@charset "UTF-8";

/* =====================
vacation_modal
========================*/

.vacation_modal {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

.bg_vacation {
    /* display: none; */
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    width: 100vw;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
}

.vacation_modal .bg_vacation {
    opacity: 1;
    visibility: visible;
}

.vacation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width:var(--contentWidth);
    background-color: #fff;
    padding-bottom:40px;
}

.vacation_title {
    position: relative;
    padding: 1em 80px;
    margin: 0px;
}

.vacation_title h2{
    margin-top: 20px;
    line-height: 1.4;
}

.vacation_title_close {
    position: absolute;
    top: 30%;
    right: 30px;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    cursor: pointer;
}
.vacation_title_close::before,
.vacation_title_close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    height: 4px;
    background-color: var(--primary-lightBrown);
    content: "";
}

.vacation_title_close::before {
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.vacation_title_close::after {
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

.vacation_content {
    padding: 0px 5.13%;
    font-size: 1.4rem;
    line-height: 1.7;
    letter-spacing: 0.2em;
}

.vacation_content p{
    margin-top:15px;
}

.vacation_content p span{
    color:#C00;
    font-weight: 800;
}

.vacation_link {
    /* display: none; */
    position: fixed;
    right: 0px;
    bottom: 180px;
    z-index: 1000;
    background: #c00;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.1em;
    padding: 9px 12px;
    border-radius: 10px 0 0 10px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,.3);
}


/* vacation_modal pc 821 */
@media screen and (min-width:821px) {

    .vacation {
        width: 50%;
        min-width: 800px;
    }

    .vacation_link {
        position: fixed;
        bottom: 120px;
        font-size: 1.8rem;
        line-height: 1.7;
        letter-spacing: 0.1em;
        padding: 12px 16px;
    }



.vacation_title h2{
    margin-top: 80px;
}

.vacation_content {
    padding: 20px 100px 80px;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.1em;
}

.vacation_content p{
    margin-top:20px;
}






}/* vacation_modal pc 821 */


/* =====================
common
========================*/
:root{
    --primary-bordeaux:#600F18;
    --primary-red:#8D051F;
    --primary-mainBrown:#513924;
    --primary-lightBrown:#755F4B;
    --primary-lightBeige:#F2EADF;
    --primary-textgray:#333333;
    --primary-bordergray:#dddddd;
    --primary-white:#ffffff;
    --gradation:linear-gradient(288deg, #E8D7C0 21.07%, #F2EADF 60.52%);
    --contentWidth:89.74%;
    --serif: "Noto Serif JP", Times, serif;
    --sans-serif:"Zen Kaku Gothic Antique", Arial,sans-serif;
    --num:"Pinyon Script",Times, serif;
}

html{
    font-size:62.5%;
}

body{
    font-family:var(--sans-serif);
    font-style: normal;
    font-weight: 400;
    color:var(--primary-textgray);
    background-color:var(--primary-white);
    max-width: 100%; /* はみ出さないようにする */
    overflow-x: hidden; /* 横スクロールを無効化 */
}

img{
    max-width:100%;
    height:auto;
}

.spNone{
    display: none;
}

.pagetitle{
    width:100%;
    height:50px;
    background-color: var(--primary-red);
    display: flex;
    align-items: center;
}

.pagetitle h1{
    color: #FFF;
    font-family: var(--serif);
    font-size: 2.0rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.0;
    letter-spacing: 0.2em;
}

.pagetitle::before{
    content: '';
    display: inline-block;
    width:30px;
    height:1px;
    background-color: var(--primary-white);
    margin-right:15px;
}


h2{
    color: var(--primary-mainBrown);
    font-family:var(--serif);
    font-size: 2.3rem;
    line-height: 1.8;
    letter-spacing: 0.1em;
    text-align: center;
}

.border_h2{
    margin:0 5.13%;
    padding-bottom:10px;
    border-bottom:solid 1px var(--primary-mainBrown);
}

h3{
    color: var(--MainBrown, #513924);
    text-align: center;
    font-family:var(--serif);
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.2em;
    margin-top:10px;
}

.remarks{
    width: var(--contentWidth);
    margin:0 auto;
    text-align: left;
    font-size: 1.2rem;
    line-height: 2.0;
    letter-spacing: 0.2em;
}

/* common PC 821px */
@media screen and (min-width:821px) {
    .pcNone{
        display: none;
    }

    .spNone{
        display: inline-block;
    }

    .pagetitle{
        margin-top:170px;
        height:100px;
        position:relative;
    }
    .pagetitle h1{
        width:1160px;
        margin:0 auto;
        font-size: 3.6rem;
        background-color: var(--primary-red);
        padding-left:30px;
        position:relative;
        right:30px;
        z-index: 90;
    }
    
    .pagetitle::before{
        content: '';
        position:absolute;
        width:50%;
        margin:0;
    }

    h2{
    padding:0;
    font-size: 3.2rem;
    line-height: 1.4;
    letter-spacing: 0.2em;
    }

    h2::before{
        content:'';
        background:url(../images/left.png) no-repeat right top;
        background-size:contain;
        vertical-align: middle;
        padding-right: 120px;
        margin-right:20px;
        position: relative;
        bottom:10px;
        }
    h2::after{
        content:'';
        background:url(../images/right.png) no-repeat left top;
        background-size:contain;
        vertical-align: middle;
        padding-left: 120px;
        margin-left:20px;
        position: relative;
        bottom:10px;
        }

    .border_h2{
        margin:0 auto;
        padding-bottom:0;
        border-bottom:none;
    }

    h3{
        font-size: 2.2rem;
        line-height: 1.4;
        letter-spacing: 0.2em;
    }

    .remarks{
        max-width:1160px;
        margin:0 auto;
        text-align: center;
        font-size: 1.4rem;
        line-height: 2.0;
    }

    a[href^="tel:"] {
        pointer-events: none;
        cursor: default;
    }

}/* common pc 821 */


/* mainBtn */
.mainBtn{
    width:var(--contentWidth);
    max-width:450px;
    margin:50px auto;
    padding: 18px 25px 18px 10px;
    display: block;
    background: var(--primary-lightBrown);
    box-shadow:4px 4px 0px 0px #D2C9BC;
    color: var(--primary-white);
    text-align: center;
    font-family: var(--serif);
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.2em;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mainBtn::after{
    content: '';
    width: 17px;
    height: 20px;
    background: url(../images/btn_arrow.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
}

.mainBtn:hover {
    opacity: 0.97;
    transform: translate(-2px,-2px);
    box-shadow: 8px 8px 6px rgba(210, 201, 188, 0.8);
}

.mainBtn:active {
    opacity: 1;
    transform: translate(2px,2px);
    box-shadow: 4px 4px 0px 0px rgba(210, 201, 188, 0.1);
    background-color: var(--primary-lightBrown);
}

/* mainBtn PC 821px */
@media screen and (min-width:821px) {
    .mainBtn{        
        width:450px;
        margin:60px auto;
        padding:20px;
        padding-right:50px;
        font-size: 2.0rem;
        white-space: nowrap;
    }

    .mainBtn::after{
        content: '';
        width: 22px;
        height: 26px;
    }

}/* mainBtn pc 821 */

/* fadeIn */
.XfadeIn{
    transform: translateX(-100%);
    opacity: 0;
    transition:1s;
}

.YfadeIn{
    transform: translateY(50%);
    opacity: 0;
    transition:1s;
}

.XfadeIn.animated,.YfadeIn.animated{
    transform: translate(0,0);
    opacity: 1;
}

/* =====================
header
========================*/
.header__menu{
    display: flex;
    align-items:flex-end;
    justify-content: space-between;
    padding:25px 15% 15px 5.13% ;
}

.logo{
    width: 265px;
}

.header__menu--tel{
    max-width:34px;
}

.header__menu--btn{
    display: block;
    cursor: pointer;    /* カーソルをポインターにする(aタグ以外のリンクに活用) */
    position: fixed;
    right:5.13%;
    text-align: center;
    font-family:var(--serif);
    color: var(--primary-lightBrown); 
    font-size: 0.8rem;
    line-height: 1.3;
    letter-spacing: 0.1em;
    z-index: 90;
}

.header__menu--btn p{
    margin-top: 3px;
}

/* header__contact */
.header__contact{
    width:100%;
    padding:15px 5.13% 20px;
    position: fixed;
    bottom:0;
    background-color:rgba(255,255,255,0.9);
    display: flex;
    justify-content: space-between;
    align-items: end;
    font-family:var(--serif);
    text-align: center;
    font-size: 1.0rem;
    line-height: 1.3;
    letter-spacing: 0;
    z-index: 60;
}

.header__contact--tel{
    font-size: 1.2rem;
}

.header__contact--tel a{
    padding-left:30px;
    background: url(../images/phone_icon.svg) no-repeat left 12px;
    background-size:28px;
    color: var(--primary-lightBrown);
    font-size: 3.0rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
}

.header__contact--tel p{
    margin-top:5px;
}

.header__contact--line img{
    width:45px;
    margin-bottom:5px;
}

.header__contact--mail img{
    width:45px;
    margin-bottom:5px;
}

/* header PC 821px */
@media screen and (min-width:821px) {
    .header__fixed{
        position: fixed;
        top:0;
        width:100%;
        height:170px;
        background-color: rgba(255, 255, 255, 0.9);
        z-index: 100;
    }

    .header__top{
        max-width:1160px;
        margin:30px auto 0px;
        display: flex;
        justify-content: space-between;
        align-items: end;
    }

    .header__menu{
        padding:0;
    }

    .header__menu--btn{
        display: none;
    }
    
    .logo{
        width:580px;
        min-width:450px;
    }

    .header__contact{
        max-width:450px;
        padding:0;
        background:none;
        font-size:1.2rem;
        position:static;
        z-index:100;
    }

    .header__contact--tel{
         font-size: 1.3rem;
        line-height: 1.3;
        letter-spacing: 0.2em;
    }
    
    .header__contact--tel a{
        white-space: nowrap;
        font-size: 4.0rem;
        font-weight:400;
        line-height:1.0;
        background-size: 40px;
        padding-left:45px;
    }
    
    .header__contact--line img{
        max-width:48px;
    }
    
    .header__contact--mail img{
        max-width:48px;
    }

    .nav .header__contact{
        display: none;
    }
}/* header pc 821 */


/* header Nav */
.nav{
    width:100%;
    height:100vh;
    position: fixed; 
    top:0;
    left:0;
    background-color: var(--primary-lightBeige);
    transform: scale(0, 0);
    transition: transform 0.4s;
    z-index: 100;
}

.nav__header{
    padding:25px 5.13% 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav__list{
    margin-top:6%;
}

.nav__item{
    height:80px;
    display: flex;
    align-items: center;
}


.nav__item::before{
    content: '';
    display: inline-block;
    width:50px;
    height:1px;
    background-color: var(--primary-mainBrown);
    margin-right:20px;
}

.nav__item a{
    color: var(--primary-mainBrown);
    font-size:1.8rem;
    font-family: var(--serif);
    line-height: 1.3;
    letter-spacing: 0.2em;
}

.nav.active{
    /*transform:translatex(0) ; アクティブが付くと(jQuery＆jsで設定)設定値を0に戻す(-100にずらしてたトランスフォームを元に戻す) */
    transform: scale(1, 1);
}

/* header Nav pc 821 */
@media screen and (min-width:821px) {
    .nav {

        max-width:1160px;
        margin:0 auto;
        background: none;
        width: auto;
        height: auto;
        position: static;
        top: auto;
        left: auto;
        transform: none;
        transition: none;
        z-index: auto;
    }

    .nav__list{
        margin:20px 0 0 10px;
        display:flex; 
        flex-direction:row;
        justify-content: space-between;
        align-items: center; 
      } 

    .nav__item{
        width: 100%;
        max-width: 193px; 
        height:40px;
        text-align: center;
        border-right:solid 1px var(--primary-textgray);
        position:relative;
    }

    .nav__item a::after {
        position: absolute;
        left: 0;
        content: '';
        width: 100%;
        height:15px;
        opacity: 0.8;
        background:var(--gradation);
        bottom: -1px; 
        transform: scale(0, 1);
        transform-origin: left top;
        transition: transform 0.5s;
        z-index:-10;
        }
        
    .nav__item  a:hover::after {
        transform: scale(1, 1); 
        }
    
    .nav__item  a:hover{
        color:var(--primary-mainBrown);
    }

    .nav__item:last-of-type{
        border:none;
    }

    .nav__item::before {
        content: none;
        display: none;
    }

    .nav__item a{
        width: 100%;  
        display: block;
        color: var(--primary-textgray);
        font-size:2.0rem;
        line-height: 1.4;
        letter-spacing: 0.2em;  
     }  

    .nav__header{
        display: none;
    }

}/* hambargerMENU pc 821 */


/* =====================
article__header
========================*/
.article__header{
    position: relative;
    width:100%;
    background-color:#ffffff;
    z-index: 70;
}

.title__contents{
    position:absolute;
    bottom:20px;
    margin:0 5.13%;
    padding:10px 5.7% 15px;
    background: rgba(141, 5, 31, 0.90);
    z-index: 80;
}

.title__contents h1{
    width:100%;
    color: var(--primary-white);
    font-family:var(--serif);
    text-align: left;
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.2em;
}

.title__contents h1 span{
    display: block;
    width:100%;
    padding-bottom:5px;
    border-bottom: solid 1px var(--primary-white);
    color: var(--primary-white);
    font-family:var(--serif);
    text-align: left;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 2.0;
    letter-spacing: 0.2em;
}
.title__contents p{
    margin-top:10px;
    color: var(--primary-white);
    font-family:var(--serif);
    font-size: 1.3rem;
    line-height: 1.8;
    letter-spacing: 0.2em;
}

.title__contents p span{
    display: none;
}

.article__header--slide {
    pointer-events: none;
}


@keyframes fadezoom {
    0% {
      transform: scale(1);
    }
   
    100% {
      transform: scale(1.1);
    }
}
   
.add-zoom {
    animation: fadezoom 10s 0s forwards;
}


/* article__header PC 821px */
@media screen and (min-width:821px) {
    .article__header {
        width: 100%;
        margin-top: 170px;
        margin-bottom: 160px;
    }
    
    .brand-title{
        max-width: 1160px;
        margin:0 auto;
       }

    .title__contents{
        width:650px;
        padding:30px;
        margin:0 auto 100px 0;
    }
    .title__contents h1{
        font-size: 4.8rem;
        line-height: 1;
        letter-spacing: 0.2em;
       }


    .title__contents h1 span {
       margin-top:20px; 
       padding-bottom:25px;
       font-size: 2.8rem;
       line-height: 1;
       letter-spacing: 0.2em;
    }

    .title__contents h1 span::before,
    .title__contents h1 span::after {
        content: ' ─ ';
     }

    .title__contents p {
    margin-top:30px; 
    }

    .title__contents p span{
        display: block;
    }

 
}/* article__header pc 821 */


/* =====================
About
========================*/
.about {
    padding:80px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.vertical_title{
    width:var(--contentWidth);
    margin:0 auto;
    writing-mode: vertical-rl;
    text-align: start;
    display: flex;
    align-items: center;
    color: var(--primary-mainBrown);
    font-family:var(--serif);
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 2.0;
    letter-spacing: 0.2em;
}

.about__image {
    width: 332px;
    margin:0 auto;
    position: sticky;
    top: 100px;
    z-index: -10;
   }

.about__txt{
    padding:50px 5.13%;
    background-color:rgba(255,255,255,0.9);
    display: flex;
    flex-direction: column;
    gap:20px;
    font-family:var(--serif);
    font-size: 1.6rem;
    line-height: 2.3;
    letter-spacing: 0.2em;
    z-index: 10;
    }


/* About pc 821 */
@media screen and (min-width:821px) {
    .about {
        max-width: 1160px;
        padding-bottom:150px;
        margin: 0 auto;
        position: relative;
    }

    .vertical_title {
        width:500px;
        height: 550px;
        font-size: 3.2rem;
        line-height: 2.0;
        letter-spacing: 0.4em;
        position: sticky;
        top: 300px;
        padding-right: 550px;
        z-index: -10; 
    }

    .vertical_title.none {
        padding-top:30px;
        height: 550px;
        font-size: 3.2rem;
        line-height: 2.0;
        letter-spacing: 0.4em;
        position: sticky;
        top: 180px;
        padding-right: 600px;
        z-index: 10;
        background-color: white;
    }

    .about__image {
        width: 500px;
        position: sticky;
        top: 280px;
        left: 1600px;
    }

    .about__txt {
        width: 670px;
        padding-top:30px;
        gap: 50px;
        font-family: var(--serif);
        font-size: 1.6rem;
        line-height: 2.5;
        letter-spacing: 0.2em;
        position: relative;

    }

    /* スクロール時にh2を非表示にするためのスタイル */
    .vertical_title.hidden {
        opacity: 0;
        transition: opacity 1s ease;
    }
}/* About pc 821 */

/* =====================
BrandList
========================*/
.brandlist{
    padding:60px 0;
    background-color: var(--primary-lightBeige);
    display: flex;
    flex-flow: column;
}

.brandlist__slide{
    margin-top:50px;
    position: relative;
    display: flex;
}

.list__item img{
    width:300px;

    padding:12px;
    border-radius: 20px;
}

/* BrandList pc 821 */
@media screen and (min-width:821px) {
    .brandlist{
        padding:120px 0;
    }

    .list__item img{
        width:400px;
        padding:20px;
        border-radius: 30px;
    }

    .brandlist__slide{
        margin:90px 0 40px 0;
    }

}/* BrandList pc 821 */

/* =====================
vintage
========================*/
.vintage {
    width:100%;
    padding:60px 0;
    display: flex;
    flex-direction: column;
}

.vintage__title{
    width:var(--contentWidth);
    margin:0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vintage__title .vertical_title{
    width:100%;
    line-height: 1.6;
    letter-spacing: 0.5em;
}

.vintage__title h3{
    width: var(--contentWidth);
    color: var(--primary-mainBrown);
    margin:50px auto 0;
    padding-top:20px;
    border-top:solid 1px var(--primary-mainBrown);
    text-align: center;
    font-family:var(--serif);
    font-size: 2.2rem;
    line-height: 1.8;
    letter-spacing: 0.2em;
}

.vintage__image {
    width: 100%;
    height:600px;
    object-fit:cover;
    object-position:left  top;
    position: sticky;
    top: 50px;
}

.vintage__txt{
    padding:30px 5.13% 0px;
    background-color:rgba(255,255,255,0.95);
    z-index: 10;
}

.vintage__txt ul{
    max-width:  450px;
    margin:0 auto;
    padding-bottom:20px;
    display: flex;
    justify-content: space-between;
}

.vintage__txt li{
    width:32%;
    height:32%;
    max-width:110px;
    max-height:110px;
    aspect-ratio: 1 / 1;
    padding:7px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:var(--primary-red);
    color:var(--primary-white);
    font-family:var(--serif);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.1em;
    transform: scaleX(0);
    opacity: 0;
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

.vintage__txt li.show {
    opacity: 1;
    transform: scaleX(1);
}



.vintage__txt p:first-of-type{
    font-family:var(--serif);
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 2.3;
    letter-spacing: 0.2em;
}

.vintage__txt p{
    font-size: 1.5rem;
    line-height: 2.3;
    letter-spacing: 0.2em;
    padding-top:30px;
}


/* vintage pc 821 */
@media screen and (min-width:821px) {
    .vintage {
        max-width: 1160px;
        padding-bottom:0px;
        margin: 150px auto 50px;
        position: relative;
    }

    .vintage__title{
        width:650px;
        margin:0;
        position: sticky;
        top: 230px;
        margin-left:100px;
    }

    .vintage__title.hidden {
        opacity: 0;
        transition: opacity 1s ease;
    }

    .vintage__title .vertical_title{
        position:static;
        height:auto;
        letter-spacing: 0;
        padding-left:300px;
        margin-bottom:30px;
        letter-spacing: 0.4em;
    }

    .vintage__title h3{
        font-size: 2.5rem;
        font-weight: 500;
        line-height: 1.4;
        margin:0;
    }

    .vintage__image{
        width: 609px;
        position: sticky;
        top: 200px;
        left:1800px;
        align-items: end;
        flex: 1;
        margin-right: calc(50% - 50vw);
        z-index:-10;
    }

    .vintage__txt{
        width:740px;
        padding:0 20px;
        background-color:rgba(255,255,255,0.9);
        position:relative;
        bottom:100px;
        }


    .vintage__txt ul{
        max-width:  600px;
        padding-bottom:40px;
    }
    
    .vintage__txt li{
        max-width:190px;
        max-height:190px;
        padding:15px;
        font-size: 2.2rem;   
    }

    .vintage__txt p:first-of-type{
        font-size:2.0rem;
        line-height: 2.4;
    }
    
    .vintage__txt p{
        font-size: 1.6rem;
        line-height: 2.4;
        padding:30px 10px 0;
        }
}/* vintage pc 821 */


/* =====================
enhanceModel
========================*/
.enhanceModel{
    width:100%;
    padding:60px 0 10px;
    background:url(../images/brand/cartier/enhance_bg.png) no-repeat top center;
    background-size: cover;
}

.enhanceModel h2{
    margin:0 5.13% 10px;
    padding-bottom:10px;
    border-bottom: solid 1px var(--primary-white);
    color:var(--primary-white);
    font-family: var(--serif);
    text-align: center;
    font-size: 2.4rem;
    line-height: 1.6;
    letter-spacing: 0.2em;
}

.enhanceModel__txt{
    margin:20px 5.13% 0;
    color:var(--primary-white);
    font-size: 1.6rem;
    line-height: 1.8;
    letter-spacing: 0.2em;
}

.enhanceModel__item{
    margin:50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color:var(--primary-white);
    font-family: var(--serif);
}

.enhanceModel__itemImg{
    width:250px;
    background-color:var(--primary-white);
    border-radius: 50%;
    object-fit: contain;
    object-position: right top;
}

.enhanceModel__contents{
    min-width:250px;
}

.enhanceModel__brandName{
    width:100%;
    margin-top:20px;
    text-align: left;
    color:var(--primary-white);
    font-size: 2.0rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.1em;
}

.enhanceModel__modelName{
    width:100%;
    border-bottom: solid 1px var(--primary-white);
    margin-top:15px;
    padding-bottom:10px;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.1em;                  
}

.enhanceModel__itemName{
    width:100%;
    margin-top:10px;
    font-size: 1.3rem;
    line-height: 1.4;
    letter-spacing: 0.1em;                    
}

.enhanceModel__itemname li{
    margin-top:5px;
}

/* enhanceModel pc 821 */
@media screen and (min-width:821px) {
    .enhanceModel{
        padding:120px 0 50px;
    }
    
    .enhanceModel h2{
        font-size: 3.2rem;
        margin-bottom:0;
        border:none;
    }

    .enhanceModel h2::before{background:none;}
    .enhanceModel h2::after{background:none;}
    
    .enhanceModel__txt{
        margin:30px auto 0;
        text-align: center;
        font-size: 1.8rem;
        line-height: 1.4;
        letter-spacing: 0.2em;
    }
    
    .enhanceModel__item{
        width:560px;
        margin:50px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: end;
        color:var(--primary-white);
        font-family: var(--serif);
    }
    
    .enhanceModel__itemImg{
        width:250px;
        background-color:var(--primary-white);
        border-radius: 50%;
        object-fit: contain;
        object-position: right top;
    }

    .enhanceModel__contents{
        min-width:280px;
    }
    
    
    .enhanceModel__brandName{
        width:100%;
        margin-top:20px;
        text-align: left;
        color:var(--primary-white);
        font-size: 2.2rem;
        font-weight: 400;
        line-height: 1.3;
        letter-spacing: 0.1em;
    }
    
    .enhanceModel__modelName{
        width:100%;
        border-bottom: solid 1px var(--primary-white);
        margin-top:15px;
        padding-bottom:10px;
        font-size: 1.8rem;
        font-weight: 400;
        line-height: 1.3;
        letter-spacing: 0.1em;                  
    }
    
    .enhanceModel__itemName{
        width:100%;
        margin-top:10px;
        font-size: 1.6rem;
        line-height: 1.4;
        letter-spacing: 0.1em;                    
    }
    
    .enhanceModel__itemname li{
        margin-top:5px;
    }
}/* enhanceModel pc 821 */




/* =====================
Reason
========================*/
.reason{
    padding:60px 5.13%;
    background-color: var(--primary-lightBeige);
}

.reason h2{
    letter-spacing: 0;
}


.reason__contents{
    max-width:450px;
    display: flex;
    margin:80px auto 0;
}

.reason__contents:first-of-type{
    margin-top:50px;
}


.reason__contents dt{
    width:30px;
    margin-right:10px;
    color: var(--primary-mainBrown);
    writing-mode: vertical-rl;
    font-family:var(--serif);
    font-size: 2.2rem;
    font-weight:500;
    line-height: 1.5;
    letter-spacing: 0.2em;
}

.reason__contents dt span{
    align-self: stretch;
    margin-bottom:15px;
    border-bottom:var(--primary-mainBrown) solid 1px;
    writing-mode: horizontal-tb;
    font-family:var(--num);
    font-weight: 400;
}

.reason__contents dd{
    max-width:450px;
    padding-left:15px;
    border-left:solid 1px var(--primary-mainBrown);
    color: var(--primary-mainBrown);
    font-size: 1.6rem;
    line-height: 2.0;
    letter-spacing: 0.2em;
}


.reason__txt h3,
.reason__copy{
    font-family: var(--serif); 
    color: var(--primary-mainBrown);
    font-size: 2.0rem;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.2em;
    margin:20px 0;
}

.reason__txt h3{
    text-align: left;
    letter-spacing: 0.15em;
}

.reason__copy{
    font-size: 1.9rem;
    margin-top:50px;
    text-align: center;
}

/* reason pc 821 */
@media screen and (min-width:821px) {
    .reason{
        padding:120px 0;
    }

    .reason h2{
        letter-spacing: 0.1em;  
    }
        
    .reason__contents{
        max-width:1160px;
        display: flex;
        margin-top:100px;
    }
    
    .reason__contents:first-of-type{
        margin-top:100px;
    }
   
    .reason__contents dt{
        width:35px;
        font-size: 2.5rem;
    }

    .reason__contents dd{
        display: flex;
        padding-left:20px;
    }

    .reason__contents dd img{
        width:320px;
        height:220px;
        margin-right:30px;
    }

    .reason__contents:nth-of-type(2){
        display: flex;
        flex-direction: row-reverse;
    }

    .reason__contents:nth-of-type(2) dt{
        margin-left:15px;
    }

    .reason__contents:nth-of-type(2) dd{
        display: flex;
        flex-direction: row-reverse;
        border-left:0;
        border-right:solid 1px var(--primary-mainBrown);
    }

    .reason__contents:nth-of-type(2) dd img{
        margin:0 20px 0 30px;
    }

    .reason__txt{
        padding:0;
    }

    .reason__txt h3{
        width:520px;
        font-size: 2.2rem;
        letter-spacing: 0.2em;
        margin:0 0 20px 0;
    }
    
    .reason__copy{
        margin:30px 0 0;
        font-size: 2.2rem;
    }
    
    .reason__copy{
        font-size: 2.5rem;
        margin-top:80px;
    }
    
}/* reason pc 821 */

/* =====================
Record
========================*/
.record{
    padding:60px 0;
}

.record h2{
    margin:auto 0;
}

.record__contents{
    width:var(--contentWidth);
    margin:50px auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
    row-gap:50px   
}

.record__item{
    width:45%;
    max-width:160px;
}

.record__item dt{
    padding:5px 0;
    background-color: var(--primary-lightBeige);
    text-align: center;
    color: var(--primary-mainBrown);
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.1em;
}

.record__item dd{
    margin-top:10px;
    display: flex;
    flex-direction: column;
    gap:10px;
    font-size: 1.2rem;
    line-height: 1.6;
    letter-spacing: 0.1em;
}

.record__item img{
   border: solid 1px var(--primary-bordergray);
}

/* record pc 821 */
@media screen and (min-width:821px) {
    .record{
        padding:120px 0;
    }
       
    .record__contents{
        max-width:1160px;
        margin-top:60px;
        row-gap:100px;
        justify-content: space-between;
     }


    .record__contents::before{
        content:"";
        display: block;
        width:23%;
        order:1;
      }
      .record__contents::after{
        content:"";
        display: block;
        width:23%;
      }
    
    .record__item{
        max-width:250px;
    }
        
    .record__item dt{
        padding:7px 0;
        font-size: 1.6rem;
        letter-spacing: 0.2em;
    }
    
    .record__item dd{
        margin-top:20px;
        gap:20px;
        font-size: 1.4rem;
        line-height: 1.7;
        letter-spacing: 0.2em;
    }

    .record .mainBtn{
        margin-top:0}

}/* record pc 821 */

/* =====================
Trust
========================*/
.trust{
    padding:60px 0;
    background: url(../images/brand/cartier/trust_bg.png) no-repeat top right;
    background-size:cover;
}

.trust h2{
    color:var(--primary-white);
}

.trust__contents{
    width:var(--contentWidth); 
    margin:50px auto 0;
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
    row-gap: 25px
}

.trust dl {
    width: 47%;
    max-width: 200px;
    padding: 20px 10px; 
    aspect-ratio: 165 / 218;
    display: flex;
    flex-direction: column;
    justify-content: end;
    border-radius: 30px;
    background-color: #EACDCD;
    transform: scaleX(0);
    opacity: 0;
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

.trust dl.show {
    transform: scaleX(1);
    opacity: 1;
}



.trust__first{
    width:100%;
    display: flex;
    justify-content: center;
}

.trust__01{
    background:url(../images/trust_icon1.png) no-repeat top center;
    background-size:cover;
}

.trust__02{
    background:url(../images/trust_icon2.png) no-repeat top center;
    background-size:cover;
}

.trust__03{
    background:url(../images/trust_icon3.png) no-repeat top center;
    background-size:cover;
}

.trust__04{
    background:url(../images/trust_icon4.png) no-repeat top center;
    background-size:cover
}

.trust__05{
    background:url(../images/trust_icon5.png) no-repeat top center;
    background-size:cover;
}

.trust__06{
    background:url(../images/trust_icon6.png) no-repeat top center;
    background-size:cover;
}

.trust__07{
    background:url(../images/trust_icon7.png) no-repeat top center;
    background-size:cover;
}

.trust__08{
    background:url(../images/trust_icon8.png) no-repeat top center;
    background-size:cover;
}

.trust__09{
    background:url(../images/trust_icon9.png) no-repeat top center;
    background-size:cover;
}

.trust__10{
    background:url(../images/trust_icon10.png) no-repeat top center;
    background-size:cover;
}

.trust dt{
    text-align: center;
    color:var(--primary-mainBrown);
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 500;
    line-height:1.3;
    letter-spacing:0;
}

.trust dd{
    margin-top:4%;
    text-align: center;
    font-family: var(--serif);
    font-size: 1.4rem;
    line-height: 1.3;
    letter-spacing: 0.1em;
}

/* trust  684px */
@media screen and (min-width:684px) {

    .trust__first{
        width:200px;
    }

    .trust__first  .trust__01,
    .trust__first  .trust__09,
    .trust__first  .trust__03
    {
        width:200px;
    }

    .trust__contents::after{
        content:"";
        display: block;
        width:30%;
      }

}/* trust  684px */

/* trust pc 821 */
@media screen and (min-width:821px) {
    .trust{
        padding:100px 0;
    }
    
    .trust h2::before{background:none;}
    .trust h2::after{background:none;}

    
    .trust__contents{
        max-width:1160px; 
        margin:60px auto 0;
    }

    .trust dl{
        width:220px;
        height:260px;
        aspect-ratio: 11 / 13;
        padding:25px 10px;
    }

    
        
    .trust dt{

        font-size: 1.8rem;
        font-weight: 500;
        line-height:1.8;
        letter-spacing:0.2em;
    }
    
    .trust dd{
        margin-top:10px;
        text-align: center;
        font-family: var(--serif);
        font-size: 1.5rem;
        line-height: 1.7;
        letter-spacing: 0.05em;
    }

}/* trust pc 821 */

/* =====================
hack
========================*/
.hack{
    padding:60px 5.13%;
    background-color: var(--primary-lightBeige);
}

.hack__contents{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hack__contents img{
    width:239px;
    transform: rotate(-10deg);
    position: relative;
    top:80px;
}

.hack__contents:nth-of-type(2) img{
    transform: rotate(10deg);
}

.hack__contents dl{
    padding:130px 5.7% 30px;
    background-color: #EAE0D3;
}

.hack__contents dt{
    padding-bottom:20px;
    border-bottom: solid 1px var(--primary-lightBrown);
    color: var(--primary-mainBrown);
    text-align: center;
    font-family:var(--serif);
    font-size: 2.0rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.1em;
}

.hack__contents dt span{
    display: block;
    margin-bottom:20px;
    color: var(--primary-lightBrown);
    font-family:var(--num);
    font-size: 3.0rem;
    line-height: 1.0;
    letter-spacing: 0.2em;
}

.hack__contents dd{
    margin-top:20px;
    color: var(--primary-mainBrown);
    font-size: 1.6rem;
    line-height: 2.0;
    letter-spacing: 0.2em;
}

.hack__link{
    margin-top:50px;
}

.hack__link .mainBtn{
    margin:30px auto 0;
}


/* hack pc 821 */
@media screen and (min-width:821px) {
    .hack{
        padding:120px 0;
    }
    
    .hack__contents{
        width:1160px;
        margin:100px auto 0;
        flex-direction:row;
    }

    .hack__contents:nth-of-type(2){
        flex-direction:row-reverse;
    }

    .hack__contents:nth-of-type(2) img{
        position: relative;
        left:-180px;
    }

    .hack__contents img{
        width:380px;
        position:relative;
        top:5px;
        left:180px;
    }
    
    .hack__contents dl{
        padding:150px 50px 50px 300px;       
    }

    .hack__contents:nth-of-type(2) dl{
        padding:150px 300px 50px 50px;       
    }
        
    .hack__contents dt{
        padding-bottom:10px;
        font-size: 2.2rem;
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: 0.2em;
        display: flex;
        flex-direction:row-reverse;
        justify-content: space-between;
    }
    
    .hack__contents dt span{
        font-size: 4.0rem;
        margin-bottom:0;
    }


    .hack__link{
        width: 1000px;
        margin:100px auto 0;
        display: flex;
        justify-content: space-between;
    }

    .hack .mainBtn{
        margin-top:10px;
    }

}/* hack pc 821 */


/* =====================
article__footer
========================*/
/* article_access */
.article__footer{
    padding:60px 0;
}

.article__footer h2{
    letter-spacing: 0em;
}

.article__footer--access{
    margin:50px 5.13% 0;
    display: flex;
    flex-direction: column;
    gap:50px;
}

.footer--access__train p{
font-size: 1.6rem;
line-height: 2.2;
margin-bottom:50px;
}

.article__footer--access .map{
    width:100%;
    aspect-ratio: 35 / 25;
    border:solid 1px var(--primary-bordergray);
    margin-bottom:50px;
}

.article__footer mainBtn{width:100%;}

/* article_access pc 821 */
@media screen and (min-width:821px) {

    .article__footer{
        padding:120px 0;
        max-width:1160px;
        margin:0 auto;
    }
    
    .article__footer h2{
        letter-spacing: 0em;
    }

    .article__footer--access{
        margin:80px 0 0 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .footer--access__train{
            max-width:570px;
            height:400px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
    }
    
    .article__footer p{
    font-size: 1.8rem;
    }
    
    .article__footer .map{
        max-width:550px;
        height:400px;
        aspect-ratio: 55 / 44;
        margin-bottom:80px;
    }
}/* article_access pc 821 */



/* article_contact */
.article__footer--contact{
    margin:0 5.13%;
    padding: 30px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    background:url(../images/brand/cartier/footer_contact.png) center center ;
    background-size: cover;
}

.article__footer--contact h2{
    color:var(--primary-white);
    text-align: center;
    font-family:var(--serif);
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.3;
    border-bottom:none;
}

.article__footer--contact h3{
    color:var(--primary-white);
    text-align: center;
    font-family:var(--serif);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.1em;
    margin:0;
}

.article__footer--contact h3::before{content: '― ';}
.article__footer--contact h3::after{content: ' ―';}


.article__footer--contact ul{
    width:85%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.article__footer--contact li{
    width:100%;
    max-width:350px;
    margin-top:20px;
    padding:15px 0 15px 18%;
    background: var(--gradation, linear-gradient(288deg, #E8D7C0 21.07%, #F2EADF 60.52%));
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    color: var(--primary-mainBrown);
    text-align: center;
    font-family:var(--serif);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.1em;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article__footer--contact li::after{
    content: '';
    width: 40px;
    height: 40px;
    background: url(../images/comment_icon.png) no-repeat center;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 6%;
    transform: translateY(-50%);
}

.article__footer--contact li:nth-of-type(2):after{
    background: url(../images/phone_icon.png) no-repeat center;
    background-size: cover;
}

.article__footer--contact li:nth-of-type(3):after{
    background: url(../images/contact_icon.png) no-repeat center;
    background-size: cover;
}


.article__footer--contact li:hover {
    transform: translate(-2px,-2px); /* 少し上に浮かせる */
    box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.25);
}

.article__footer--contact li:active {
    transform: translate(2px,2px);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
}


.article__footer--contact li img{
    width:40px;
    height:40px;
    margin-right:20px;
}

.article__footer--contact li span{
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.5;
    display: block;
}

.article__footer--contact p{
    color:var(--primary-white);
    font-family: var(--serif);
    font-size: 1.3rem;
    line-height: 1.8;
    letter-spacing: 0.1em;
}


.article__footer--contact span{
    display: block;
}

/* article_contact pc 821 */
@media screen and (min-width:821px) {
    .article__footer--contact{
        max-width: 1160px;
        margin:0px auto 80px;
        padding: 46px 35px;
        gap: 10px;
    }

    .article__footer--contact h2{
        padding:0;
        font-size: 3.1rem;
        letter-spacing: 0.2em;
    }

    .article__footer--contact h2::before{content: '';background:none;}
    .article__footer--contact h2::after{content: '';background:none;}

    .article__footer--contact h3{
        font-size: 2.4rem;
        letter-spacing: 0.2em;
    }      
    
    .article__footer--contact ul{
        width:100%;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .article__footer--contact li{
        width:340px;
        height:90px;
        margin:30px 10px;
        padding:15px 15px 15px 60px;
        background: var(--gradation, linear-gradient(288deg, #E8D7C0 21.07%, #F2EADF 60.52%));
        font-size: 1.8rem;
        font-weight: 600;
        letter-spacing: 0.2em;
    }

    .article__footer--contact li:last-of-type{
        line-height: 1.6;
    }
    
    .article__footer--contact p{
        font-size: 1.8rem;
        line-height: 1.4;
        letter-spacing: 0.2em;
    }

    .article__footer--contact span{
        display: inline;
        margin-left:20px;
    }
 
    .article__footer .mainBtn{
        margin-top:80px;
    }

}/* article_contact pc 821 */

/* =====================
Footer
========================*/
.footer {
    padding: 60px 5.13% 140px;
    background-color: var(--primary-lightBeige);
    color: var(--primary-mainBrown);
    font-family: var(--serif);
}

/* Accordion */
.footer__nav {
    margin-top: 65px;
    border-top: solid 1px var(--primary-mainBrown);
}

.accordion {
    border-bottom: solid 1px var(--primary-mainBrown);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.2em;
    padding: 20px 4%;
}

.accordion__summary {
    cursor: pointer;
    position: relative;
    font-size: 1.6rem;
    font-weight: 500;
}

.accordion__summary::after {
    content: "";
    width: 25px;
    height: 26px;
    background: url(../images/accordion_btn.svg) no-repeat center;
    position: absolute;
    right: 10px;
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    transition: transform 0.3s ease-out;
}

.accordion.open .accordion__summary::after {
    transform: rotate(225deg);
}

.accordion__detail {
    display: block;
    overflow: hidden;
    opacity: 0;
    max-height: 0;
    transition: max-height 1s ease, opacity 0.8s ease;
}

.accordion.open .accordion__detail {
    opacity: 1;
    max-height: 600px;
}

.accordion__text {
    margin: 60px 0 30px;
    font-size: 1.6rem;
}

.accordion__text::before {
    content: '─ ';
}

.accordion.open .accordion__text {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

/* permit Number */
.permit {
    margin-top: 50px;
    font-size: 1.2rem;
    line-height: 2.2;
    letter-spacing: 0.05em;
}

.copy{
    margin-top: 65px;
    text-align: center;
}

.copy small{
    font-size: 1.0rem;
    line-height: 1.4;
    letter-spacing: 0.2em;
}

.topBtn {
    display: inline-block;
    padding: 25px 9px 10px;
    border-radius: 10px 0 0 10px;
    background-color: rgba(166, 142, 121, 0.80);
    color: var(--primary-mainBrown);
    font-family: var(--serif);
    font-size: 1.2rem;
    line-height: 1.0;
    position: fixed;
    bottom: 120px;
    right: 0%;
    z-index: 60;
}

.topBtn::after {
    content: "";
    width: 18px;
    height: 14px;
    background: url(../images/triangle_arrow_y.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 8px;
    right: 50%;
    transform: translatex(50%) rotate(180deg);
}

/* Footer for PC (min-width: 821px) */
@media screen and (min-width: 821px) {
    .footer {
        padding: 100px 0 60px;
    }

    .footer__logo {
        width: 500px;
    }

    .footer__contents{
        max-width:1160px;
        margin:0 auto;
      }


    .footer__nav {
        display: flex;
        border:none;
        gap: 30px;
    }

    .accordion {
        display: block;
        border: none;
        margin:0;
        padding:0;
    }

    .last--accordion{
        border-right: solid 1px var(--primary-mainBrown);
        padding-right:50px;
        margin-right:50px;
    }

    .accordion__summary {
        pointer-events: none;
        cursor: default;
        font-size: 2.0rem;
    }

    .accordion__summary::after {
        display: none;
    }

    .accordion__detail {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        max-height: none !important;
        transform: none !important;
        margin-top:20px;
        margin-right:25px;
    }

    .accordion__text{
        padding:0;
        margin:20px 0 30px 0;
        letter-spacing: 0.1em;
    }
    .accordion__text a{
        display: inline;
        position:relative;
    }

    .accordion__text a::after {
        position: absolute;
        left: 0%;
        content: '';
        width: 100%;
        height: 1px;
        background:var(--primary-lightBrown);
        bottom: -4px;               /*アンダーラインがaタグの下端から現れる*/
        transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
        transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
        transition: transform 0.5s; /*変形の時間*/
        }
        
    .accordion__text  a:hover::after {
        transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
          }

    .permit{
        display: flex;
        flex-direction: column;
        gap:50px;
        position: relative;
        bottom:50px;
        height:max-content;
        font-size: 1.6rem;  
        line-height: 2.0;
        letter-spacing: 0.2em;
    }

    .copy small{
        margin-top: 80px;
        font-size: 1.2rem;
    }

    .topBtn{
        bottom:50px;
    }

}