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

.article__header--title{
    width:100%;
    height:120px;
    padding:20px 0;
    position:absolute;
    bottom:0;
    transition: background-color 3s ease;
    z-index: 80;
}

.article__header h2{
    width:100%;
    text-align: center;
    color: #FFF;
    font-family:var(--serif);
    font-size: 4.5rem;
    line-height: 1.5;
    letter-spacing: 0;
    position:absolute;
    bottom:10px;
    z-index: 100;
}

.article__header span{
    padding-top:10px;
    display:block;
    font-size: 1.7rem;
    letter-spacing: 0.06em;

}

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

.top1{
    background: url(../images/brand/cartier/top3_sp.png) no-repeat top center;
    background-size:cover;
    padding-bottom:calc(100svh - 71px);
}

.top2{
    background: url(../images/brand/bvlgari/top1_sp.png) no-repeat top center;
    background-size:cover;
    padding-bottom:calc(100svh - 71px);
}

.top3{
    background: url(../images/brand/tiffany/top1_sp.png) no-repeat top center;
    background-size:cover;
    padding-bottom:calc(100svh - 71px);
}

.top4{
    background: url(../images/brand/vca/top1_sp.png) no-repeat top center;
    background-size:cover;
    padding-bottom:calc(100svh - 71px);
}

.top5{
    background: url(../images/brand/chanel/top1_sp.png) no-repeat top center;
    background-size:cover;
    padding-bottom:calc(100svh - 71px);
}

@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;
    }
    
    .article__header--title{
        width:60%;
        height:215px;
        top:50%;
        transform: translateY(-50%);
        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%)
       }

    .article__header h2 {
        width: 1160px;
        height:215px;
        margin:0 auto;
        font-size: 7.0rem;
        letter-spacing: 0.2em;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        left:0;
        right:0;
        top:50%;
        transform: translateY(-50%);
       }

    
    .article__header h2 span{
        font-size: 3rem;   
    }
    
    .top1{
        background: url(../images/brand/cartier/top3_pc.png) no-repeat center center;
        padding-bottom:calc(100svh - 150px);
        background-size:cover;
    }
    
    .top2{
        background: url(../images/brand/bvlgari/top1_pc.png) no-repeat center center;
        padding-bottom:calc(100svh - 150px);
        background-size:cover;
    }
    
    .top3{
        background: url(../images/brand/tiffany/top1_pc.png) no-repeat center center;
        padding-bottom:calc(100svh - 150px);
        background-size:cover;
    }
    
    .top4{
        background: url(../images/brand/vca/top1_pc.png) no-repeat center center;
        padding-bottom:calc(100svh - 150px);
        background-size:cover;
    }
    
    .top5{
        background: url(../images/brand/chanel/top1_pc.png) no-repeat center center;
        padding-bottom:calc(100svh - 150px);
        background-size:cover;
    }
 
}/* article__header pc 821 */


/* =====================
Enhance
========================*/
.enhance{
    padding:60px 0;
    background:url(../images/brand/cartier/enhance_bg.png) no-repeat top center;
    background-size: cover;

}

.enhance 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;
}

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

.enhance__sride{
    margin:50px 0;
    display: flex; 
}

.enhance__item{
    width:380px;
    display: flex;
    justify-content: center;
    align-items: end;
    color:var(--primary-white);
    font-family: var(--serif);

}

.enhance__old{
    width:40%;
    padding-left:20px;
    margin:0;
}

.enhance__brandName{
    padding-bottom:5px;
    border-bottom: solid 1px var(--primary-white);
    color:var(--primary-white);
    font-size: 1.6rem;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-align: left;
}

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

.oldPrice--title{
    display: inline-block;
    margin-top:10px;
    padding:5px 8px;
    background-color: var(--primary-lightBrown);
    text-align: center;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.2em;
}

.oldPrice--yen{
    margin-top:7px;
    text-align: center;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.05em;
}

.enhance__new{
    width: 40%;
    padding:0;
    margin-left:2%;
    display:flex;
    flex-direction: column;
    align-items: center;
}

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

.newPrice--title{
    padding:5px 10px;
    background-color: var(--primary-lightBrown);
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.1em;
    position:relative;
    bottom:5px;
}

.newPrice--yen{
    text-align:center;
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.05em;
}

.newPrice--yen::after,.oldPrice--yen::after{
    content:'円';
    font-size:70%;
}

.enhance__arrow{
    width:28px;
    position:absolute;
    bottom:18%;
    transform: rotate(73.188deg);
    opacity: 0.4;
    z-index: 100;
}

.enhance .remarks{
    width:var(--contentWidth);
    margin:0 auto;
    color: var(--primary-white);
}


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

    .enhance h2::before{background:none;}
    .enhance h2::after{background:none;}
    
    .enhance__txt{
        margin:30px auto 0;
        text-align: center;
        font-size: 1.8rem;
        line-height: 1.4;
        letter-spacing: 0.2em;
    }
    
    .enhance__sride{
        margin:70px 0;
        display: flex; 
    }
    
    .enhance__item{
        width:600px;
    }
    
    .enhance__old{
        width:45%;
    }
    
    .enhance__brandName{
        padding-bottom:8px;
        font-size: 1.8rem;
        letter-spacing: 0.15em;
    }
        
    .enhance__itemName{
        margin-top:15px; 
        font-size: 1.6rem;
        letter-spacing: 0.2em;                         
    }
    
    .oldPrice--title{
        display: block;
        width:180px;
        margin:25px auto 0;
        padding:5px 10px;
        text-align: center;
        font-size: 1.3rem;
    }
    
    .oldPrice--yen{
        margin-top:5px;
        font-size: 2.2rem;
        letter-spacing: 0.15em;
    }
        
    .enhance__new{
        margin-left:7%;
    }

    .newPrice--title{
        padding:5px 10px;
        font-size: 1.7rem;
        font-weight: 600;
        letter-spacing: 0.2em;
        position:relative;
        bottom:5px;
    }

    .newPrice--yen{
        letter-spacing: 0.15em;
    }
      
    .enhance__arrow{
        width:45px;
        bottom:0px;
        margin-left:20px;
        opacity: 0.7;
    }
    
    .enhance .remarks{
        width:var(--contentWidth);
        margin:0 auto;
        color: var(--primary-white);
    }
}/* enhance pc 821 */


/* =====================
gold
========================*/
.gold{
    padding:60px 5.13%;
}

.gold h2{
    width:100%;
    margin:0 auto;
}

.gold__txt{
    margin-top:50px;
    font-size: 1.6rem;
    line-height: 2.0;
    letter-spacing: 0.2em;
}

.gold__title{
    margin-top:50px;
    padding:15px;
    border-top:solid 1px var(--primary-mainBrown);
    border-bottom:solid 1px var(--primary-mainBrown);
    background: var(--gradation);
    color: var(--primary-mainBrown);
    text-align: center;
    font-family: var(--serif);
    line-height: 1.4;
    letter-spacing: 0.2em;
}

.gold__title h3{
    font-size: 2.0rem;
}

.gold__title time{
    display: block;
    margin-top:10px;
    font-size: 1.3rem;
}

.gold__kihei--price dt{
    display: flex;
    gap:10px;
    padding:10px;
    font-family: var(--serif);
    font-size: 1.5rem;
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: 0.2em;
    border-bottom:dashed 1px var(--primary-lightBrown);
}

.gold__kihei--price img{
    width:60px;
}

.gold__kihei--price dd{
    height:70px;
    padding:15px 10px 10px;
    display: flex;
    align-items: center;
    justify-content: end;
    font-family: var(--serif);
    font-size: 2.8rem;
    line-height: 1.3;
    letter-spacing: 0.2em;
    border-bottom:solid 1px var(--primary-mainBrown);
}

.gold__price dd::after{
    white-space: nowrap; /* Firefox改行回避 */
    content:'円/g';
    font-size:70%;
    position:relative;
    top:3px;
}

.gold__gold--price {
    padding:10px;
    display: flex;
    border-bottom:solid 1px var(--primary-mainBrown);
}

.gold__gold--price dt{
    width:37%;
    height:55px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family:var(--serif);
    font-size: 2.0rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.2em;
    border-right:dashed 1px var(--primary-lightBrown);
}

.gold__gold--price dd{
    width:100%;
    height:55px;
    display: flex;
    align-items: center;
    justify-content: end;
    font-family: var(--serif);
    font-size: 2.8rem;
    line-height: 1.3;
    letter-spacing: 0.2em;
}

.gold__link{
    width:100%;
    max-width:450px;
    margin:50px auto 0;
    padding:20px 3%;
    display: block;
    border:solid 1px var(--primary-mainBrown);
    background:linear-gradient(120deg, rgba(242, 234, 223, 1.0) 81%, rgba(255, 255, 255, 0) 81%), url(../images/gold_link.png) no-repeat right top;
    background-size:contain;  
}

.gold__link:hover{
    opacity: 0.8; 
}

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

.gold__link p:last-of-type{
    font-size: 1.2rem;
    margin-top:5px;
}

.gold__remarks{
    margin-top:50px;
    font-size: 1.2rem;
    line-height: 2.0;
    letter-spacing: 0.1em;
 } 

 .gold__remarks p{
    padding-left:5.13%;
    text-indent: -1.3em;
 }

 .gold__remarks p::before{
    content: '※ ';
 }

 /* gold pc 821 */
@media screen and (min-width:821px) {
    .gold{
        padding:120px 0;
        max-width:1160px;
        margin:0 auto;
    }
    
    .gold h2{
        letter-spacing: 0;
    }
    
    .gold__txt{
        font-size: 1.8rem;
        margin-top:80px;
    }

    .gold__price{
        display: flex;
        justify-content: space-between;
        gap:20px;
    }

    .gold__kihei{
        width:650px;
        height:520px;
    }
    
    .gold__title{
        margin-top:60px;
        padding:20px 0px;
        line-height: 1.4;
        letter-spacing: 0.2em;
    }

    .kihei__title{
        display: flex;
        gap:20px;
        align-items: center;
        justify-content: center;
    }
  
    .gold__title h3{
        font-size: 2.2rem;
    }
    
    .gold__title time{
        margin-left:20px;
        font-size: 1.5rem;
        padding:5px 0px;
    }

    .gold__kihei--price{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:25px 0;
        border-bottom:solid 1px var(--primary-mainBrown);
    }

    .gold__kihei--price dt img{
        width:100px;
        height:100px;
    }
    
    .gold__kihei--price dt{
        width:400px;
        padding:0 10px;
        font-size: 2.2rem;
        line-height: 1.3;
        border-bottom:none;
        border-right:dashed 1px var(--primary-lightBrown);
    }
    
    .gold__kihei--price dd{
        width:210px;
        padding-right:5px;
        font-size: 3.2rem;
        line-height: 1.3;
        letter-spacing: 0.2em;
        border-bottom:none;
        display: flex;
        align-items: center;
    }
    
    .gold__gold{
        width:450px;
    }
    
   .gold__gold--price {
        padding:20px 0;
    }
    
    .gold__gold--price dt{
        width:180px;
        text-align: center;
        font-size: 2.2rem;
        line-height: 1.3;
    }
    
    .gold__gold--price dd{
        font-size: 3.2rem;
        padding-right:5px;
    }
    
    .gold__link{
        width:100%;
        height:100px;
        margin-top:25px;
        padding:20px;
    }
    
    .gold__link p{
        font-size: 2.2rem;
        letter-spacing: 0.15em;
    }
    
    .gold__link p:last-of-type{
        font-size: 1.5rem;
        margin-top:10px;
    }
    
    .gold__remarks{
        margin-top:60px;
        font-size: 1.4rem;
        letter-spacing: 0.2em;
     } 
    
     .gold__remarks p{
        width:1000px;
        padding-left:20px;
        text-indent: -1.3em;
     }
}/* gold pc 821 */



/* =====================
Voice
========================*/
.voice{
    padding:60px 0;
    background-color: var(--primary-lightBeige);
}

.voice__slide{
    margin-top: 50px;
}

.voice__contents{
    width:320px;
    margin:0 10px;
    padding:30px 30px 30px;
    display: flex;
    flex-direction: column;
    border-radius: 30px;
    background-color: var(--primary-white);
    background-position: left 20px bottom 30px;
    background-repeat: no-repeat;
    background-size:88px;
}

.voice__contents dt{
    font-family: var(--serif);
    font-size: 2.0rem;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.2em;
}

.voice__dd{
    margin-top:20px;
    font-size: 1.6rem;
    line-height: 1.6;
    letter-spacing: 0.2em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.voice__dd p:last-of-type{
    text-align:right;
    margin-top:80px;
}

/* voice pc 821 */
@media screen and (min-width:821px) {
    .voice{
        padding:120px 0;
        background-color: var(--primary-lightBeige);
    }
    
    .voice h2{
        letter-spacing: 0;
    }

    .voice__slide{
        margin-top: 80px;
    }

    .voice__contents{
        margin:0 20px;
    }

}/* voice pc 821 */