@charset "utf-8";
/* =============================== 
common
================================ */
:root {
    /* common color */
    --primary-red: #AB2239;
    --primary-brown: #69494E;
    --primary-black: #333333;

    --primary-darkGold: #7C6F42;
    --primary-gold: #A19467;
    --primary-lightGold: #D5CA9C;
    --primary-lightGoldR: 213,202,156;

    --primary-lightBeige: #EFEAD9;
    --primary-warmLightGray: #E9E7DF;
    --primary-coldLightGray: #F6F7F9;

    --primary-linkBlue: #2E2E81;

    /* common width */
    --contentWidth: 100rem;                         /*pc  1300/1800px 72%*/
                                                    /* レスポンシブ時に可変する */

    /* Font waight */
    --fontNormal: 400;
    --fontSemiBold: 600;
    --fontBold: 700;
    --fontExtraBold: 800;
}

html {
    font-size: 62.5%;                               /* 10px = 1rem */
}

body {
    font-family:
        shippori mincho,
        yu mincho,
        游明朝,
        YuMincho,
        ヒラギノ明朝 pron,
        serif,
        sawarabi mincho;
    font-style: normal;
    font-weight: var(--fontNormal);
    color: var(--primary-brown, #69494E);
    line-height: 1.5;
    background-color: #fff;
}

img {
    /* 画像が親要素を超えたときに、親要素の幅に合わせて縮小する */
    max-width: 100%;
    height: auto;
}

.main{
    width: var(--contentWidth);                     /* pc:〜130rem tab:130rem〜 sp:52rem〜 */          
    max-width: var(--contentWidth);
    margin: 0 auto;
}

/* レスポンシブ */
/* tablet */
@media screen and (max-width: 1000px) {             /* pc版のコンテンツサイズを下回る時 */
    :root {
        --contentWidth: 95%;
    }
}

/* sp */
@media screen and (max-width: 520px) {              /* tablet版のコンテンツサイズを下回る時 */
    :root {
        --contentWidth: 94%;                        /* これ以下のサイズは可変 */
    }
}

/* =============================== 
parts
================================ */
/* ドロワーメニュー（サイト解説） */
/* 初期表示 */
.drawer{
    background: rgba(var(--primary-lightGoldR), 0.8);
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.4s;
}

.drawer__inner{
    background-color: rgba(255, 255, 255, 0.5);
    width: var(--contentWidth);
    height: calc(100vh - 3.6rem);
    margin: 1.8rem auto 0;
    padding: 4rem;
}

.drawer__btn{
    display: block;
    width: 6rem;
    aspect-ratio: 1/1;
    position: relative;
    margin: 0 0 2rem auto;
}

.drawer__btn::before, .drawer__btn::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.5rem;                                  /* 棒の幅（太さ） */
    height: 6rem;                                   /* 棒の高さ */
    background: var(--primary-brown)
}

.drawer__btn::before{
    transform: translate(-50%,-50%) rotate(45deg);
}

.drawer__btn::after{
    transform: translate(-50%,-50%) rotate(-45deg);
}

.drawer__text{
    font-size: 2rem;
}

/* drawer active表示 */
.drawer.active{
    transform: translateX(0);
}

.line_gap{
    display: block;
    content: "";
    margin-bottom: 2rem;
}

.link__deco{
    color: var(--primary-linkBlue);
    text-decoration: underline;
}

/* 複数箇所で使用する要素 */
/* ロゴ */
.nav__logo {
    width: 11rem;                                 /* pc ※tablet-spのサイズ変更はheaderでまとめている*/
}

/* 買い物カゴに入れる ボタン */
.button__buy{    
    background-image: url(../image/00_common/button.png);
    background-repeat:no-repeat;
    background-size:contain;                        /* 要素に画像が全て含まれる */

    color: #fff;
    font-family: roboto;
    font-size: 2.8rem;
    font-weight: var(--fontSemiBold);
    text-align: center;

    width: 31%;                                     /* レスポンシブ時も比率変更無し 親要素の横幅の31% 406/1300px;*/
    max-width: 40.6rem;                             /* pc 406px */
    aspect-ratio: 10/3;                             /* 縦横比10:3 */
}

.button__buy--position{
    display: block;                                 /* 中央寄せ */
    margin: 4.6rem auto 0;                          /*pc 上46px 左右auto 下0px */
}

/* ボタンマウスオーバー時 */
.button__buy:hover{
    background-image: url(../image/00_common/button_hover.png);
    color: #AB2239;                               /* 色反転 */
}

/* go to top ボタン */
.button__top{
    width: 9%;                                      /* レスポンシブ時も比率変更無し 親要素の横幅の9% 118/1300px;*/
    max-width: 11.8rem;                             /* pc 118px */
}

.button__top--position{
    display: block;                                 /* 中央寄せにするため */
    margin: 4.6rem auto;                            /* pc 上下46px 左右auto */
}

/* ボタンマウスオーバー時 */
.button__top:hover{
    transform: translateY(-0.5rem);                 /* ちょっと浮く */
}

/* レスポンシブ */
/* tablet */
@media screen and (max-width: 1000px) {
    .drawer__inner{
        margin: 1.8vw auto 0;
        padding: 4vw;
    }

    .drawer__btn{
        width: clamp(3.5rem, 6vw, 6rem);
        aspect-ratio: 1/1;
        margin-bottom: 2vw;
    }

    .drawer__btn::before, .drawer__btn::after{
        width: 0.6vw;                               /* 棒の幅（太さ） */
        height: clamp(3vw, 9vw, 6rem);                                /* 棒の高さ */
    }

    .button__buy{ 
        font-size: clamp(1.0rem, 2.7vw, 2.8rem);    /* vw = 36px（文字サイズ） / 1300px（画面の横幅） * 100 */
    }

    .button__buy--position{
        margin: clamp(3.2rem, 3.5vw, 4.6rem)  auto; /* 画面幅に応じて可変するが、下限3.1rem 上限4.6rem */
    }

    .button__top{
        max-width: 9.0rem;                          /* 90px */
    }

    .button__top--position{
        margin: clamp(3.2rem, 3.5vw, 4.6rem)  auto; /* 画面幅に応じて可変するが、下限3.1rem 上限4.6rem */
    }
}

/* sp */
@media screen and (max-width: 520px) { 
    .drawer__btn{
        width: clamp(3rem, 4vw, 3.5rem);
    }

    .drawer__btn::before, .drawer__btn::after{
        width: 0.8vw;                               /* 棒の幅（太さ） */
    }

    .button__buy{ 
        font-size: clamp(1.0rem, 3.0vw, 1.6rem);    /* 16px（文字サイズ） / 520px（画面の横幅） * 100 */
        width: 35%;                                 /* 親要素の横幅の35% 180/520px;*/
        max-width: 18rem;                           /* sp 180px */
    }

    .button__buy--position{                         /* 画面幅が小さくなってもボタン上下のmerginは固定 */
        margin: 6.2vw auto 0;                       /* 上約32px 左右auto 下0px */
    }

    .button__top--position{
        margin: 6.2vw auto; 
    }
}

/* -------------------------------*/
/* h2 */

.header2{
    background-image: url(../image/05_h2/h2.jpg);
    background-repeat:no-repeat;
    background-size:contain;                        /* 要素に画像が全て含まれる */
    aspect-ratio: 13/4;                             /* h2の縦横比13:4 横幅は親要素の幅一杯 */
    position: relative;
}

.header2::before{
    background:                                     /* h2上部の白いグラデーション */
		linear-gradient(to bottom, white, transparent);
    content: '';
	position: absolute;
	top: 0;
    right: 0;
	left: 0;
    aspect-ratio: 13/2;                             /* 縦横比13:2 横幅は親要素の幅一杯 */
}

.header2__text{
    background:                                     /* 文字の背景の金色 */ 
        linear-gradient(to right, transparent 0%, var(--primary-lightGold) 30%, var(--primary-lightGold) 70%, transparent 100%);
    font-size: 3.6rem;                              /* pc */
    font-weight: var(--fontBold);
    line-height: 1;
    text-align: center;
    text-shadow:
        -0.3rem -0.3rem 0.6rem white, 
        0.4rem 0.4rem 0.6rem white;

    width: 65%;                                     /* pc */
    padding: 1.5rem 0 2rem;                           /* 上　左右　下 */
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.header2__text.double{                              /* h2のテキストが二行の時 */
    bottom: -10%;
}

/* h3 */
/* お悩みの中で設定（そこしか使ってないから） */

/* レスポンシブ */
/* tablet */
@media screen and (max-width: 1000px) {
    .header2__text{
        font-size: clamp(2.2rem, 3.4vw, 3.6rem);    /* 56px/1300px*100 */
        text-shadow:
            -0.2rem -0.2rem 0.4rem white, 
            0.3rem 0.3rem 0.4rem white;
        padding: 1vw 0 2vw ; 
    }  
    .header2__text.double{                          /* h2のテキストが二行の時 */
        bottom: -3vw;
    }
}

/* sp */
@media screen and (max-width: 520px) {
    .header2__text{
        font-size: 2.2rem;                          /* 22pxで固定 */
        width: 80%;
        text-shadow:
            -0.2rem -0.2rem 0.3rem white, 
            0.3rem 0.3rem 0.3rem white;
    }
    .header2__text.double{                          /* h2のテキストが二行の時 */
        bottom: -4vw;
    }
}

/* -------------------------------*/
/* バナー */

.banner{
    background-image: url(../image/03_banner/banner_bg_pc.png);
    background-repeat:no-repeat;
    background-size:contain;                        /* 要素に画像が全て含まれる */
    aspect-ratio: 1300/800;
    position: relative;
}

.banner__header{
    background-image: url(../image/03_banner/medal.png);
    background-repeat: no-repeat;
    background-size:contain; 
    width: 80rem;                                /* pc */
    aspect-ratio: 1046/200; 
    margin: 0 auto;
    padding-top: 3.0rem;                              /* pc */
    text-align: center;
    position: absolute;
    top: 4rem;                                      /* pc */
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.banner__textMain{
    font-size: 3.8rem;                                /* pc */
    font-weight: var(--fontExtraBold);
    line-height: 1;
}

.banner__textSub{
    font-size: 3.4rem;                              /* pc */
    font-weight: var(--fontExtraBold);
}

.price{
    width: 49rem;                                   /* pc */
    position: absolute;
    bottom: 1.4rem;                                   /* pc */
    right: 0.6rem;                                    /* pc */
}

/* レスポンシブ */
/* tablet */
@media screen and (max-width: 1000px) {
    .banner__header{
        width: 80.6%;
        padding-top: 2.8vw;
        top: 2.8vw;
    }
    .banner__textMain{
        font-size: clamp(2.0rem, 3.5vw, 3.8rem);
    }

    .banner__textSub{
        font-size: clamp(1.7rem, 3.2vw, 3.4rem);
    }

    .price{
        width: 49.5%;
        bottom: 1.4vw;
        right: 0.6vw;
    }
}

/* sp */
@media screen and (max-width: 520px) {
    .banner{
        background-image: url(../image/03_banner/banner_bg_sp.png);
        aspect-ratio: 345/600;
    }

    .banner__header{
        width: 94%;
        padding-top: 2.8vw;
        top: 4.4vw;
    }

    .banner__textMain{
        font-size: clamp(1.0rem, 4.5vw, 2.2rem);
    }

    .banner__textSub{
        font-size: clamp(0.8rem, 4.0vw, 2.0rem);
    }

    .price{
        width: 94%;
        bottom: 3.4vw;
        right: 0vw;
    }
}

/* =============================== 
header
================================ */
.header{
    background: linear-gradient(to bottom,var(--primary-darkGold),var(--primary-lightGold));
}

.nav__box{
    width: var(--contentWidth);                     /* pc:130rem tab:96.4rem sp:34.5rem */   
    max-width: var(--contentWidth);
    aspect-ratio: 1300/120;                         /* pc tab*/
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ロゴはpartsの中で設定している */

.nav__cart{
    width: 5.8rem;                                  /* pc */
    aspect-ratio: 1/1;
}

/* レスポンシブ */
/* tablet */
@media screen and (max-width: 1000px) {
    .nav__logo {
        width: 11vw;
    }

    .nav__cart{
        width: 5.8vw;
    }
}

/* sp */
@media screen and (max-width: 520px) {
    .nav__box{
        aspect-ratio: 520/50;
    }

    .nav__logo {
        width: 13.5vw;
    }
    .nav__cart{
        width: 6.5vw; 
    }
}

/* =============================== 
main
================================ */
/* First View */
/* main image */
.mainImage{ 
    background-image: 
        url(../image/01_FV/lightBall.png),          /* 文字の後ろの水玉 */
        url(../image/01_FV/background.png);         /* 背景 */
    background-position: 46% 6%, 40% 0;
    background-repeat: no-repeat, no-repeat;
    background-size: 100rem auto, cover;            /* 水玉画像は横1300px 背景は要素全体に表示 */
    margin: 0 calc(50% - 50vw);
}

.mainImage__box{
    width: var(--contentWidth);                     /* pc:130rem */
    aspect-ratio: 1300/1000;
    margin: 0 auto;
    position: relative;
}

.mainImage__text{
    font-size: 5.8rem;                                /* pc */
    color: var(--primary-darkGold);
}

.textPosition1{                                     /* 理想の */
    position: absolute;
    top: 0;
    left: 0;
}

.mainImage__textImage{                              /* 黄金美肌 */
    width: 80%;                                     /* pc tab sp 共通 */
    position: absolute;
    top: 10%;
    left: 0;
}

.textPosition2{                                     /* をもたらす。 */
    position: absolute;
    top: 31%;
    left: 26%;
}

.mainImage__model{                                  /* お肌が潤っている女性画像 */
    width: 56%;
    position: absolute;
    top: 10%;
    right: 0;
}

/* レスポンシブ */
/* tablet */
@media screen and (max-width: 1000px) {
    .mainImage{ 
        background-size: contain, cover;            /* 水玉の大きさをコンテンツ幅いっぱいにする */
    }

    .mainImage__text{
        font-size: clamp(3.0rem, 5.6vw, 5.8rem);    /* 70px / 1300px × 100 */
    }
}

/* sp */
@media screen and (max-width: 520px) {
    .mainImage__text{
        font-size: clamp(2.0rem, 6.1vw, 3.0rem);    /* 30px / 488px * 100 */
    }
}

/* -------------------------------*/
/* リボン */

.catchCopy{
    position: relative;
}

.catchCopy__textShort{                              /* ミラクルデュウ スキンケアクリーム 2.0 */
    width: 58.9%;                                     /* pc */
    font-size: 3.0rem;                                /* pc */
    font-weight: var(--fontExtraBold);
    color: var(--primary-darkGold);
    text-align: center;
    
    border-top: 0.3rem solid var(--primary-darkGold);       /* pc */
    border-bottom: 0.3rem solid var(--primary-darkGold);    /* pc */
    
    position: absolute;
    top: -15.4rem;                                    /* pc mainImageの上に重なる */
    left: 50%;
    transform: translateX(-50%);                    /* absoluteの中央寄せ */
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.header1{
    background-image: url(../image/02_ribbon/ribbon.png);   /* リボン */
    background-repeat: no-repeat;
    background-size: contain;                       /* 要素に画像全体が含まれる */

    font-size: 2.7rem;                              /* pc */
    font-weight: var(--fontSemiBold);
    color: white;
    text-align: center;
    line-height: 1.2;                               /* pc */

    width: 90%;
    aspect-ratio: 1160/164;
    margin: 0 auto;
    padding-top: 2rem;                              /* pc */
    position: absolute;
    top: -8.7rem;                                    /* pc */ 
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 1;                                     /* mainImageの上に乗る */
}

/* レスポンシブ */
/* tablet */
@media screen and (max-width: 1000px) {
    .catchCopy__textShort{
        width: clamp(32.6rem, 62%, 70rem);
        font-size: clamp(1.8rem, 2.9vw, 3.0rem); 
        border-top: 0.3vw solid var(--primary-darkGold);
        border-bottom: 0.3vw solid var(--primary-darkGold);
        top: -15.4vw;  
    }
    .header1{
        font-size: clamp(1.4rem, 2.6vw, 2.7rem);
        padding-top: 1.8vw;
        top: -8.6vw;
    }
}

/* sp */
@media screen and (max-width: 520px) {
    .catchCopy__textShort{
        width: clamp(1rem, 72%, 32.6rem);
        font-size: clamp(0.8rem, 3.7vw, 1.8rem); 
    }
    .header1{
        font-size: clamp(0.6rem, 2.9vw, 1.4rem);
        width: 100%;
    }
}
/* -------------------------------*/
/* お悩み */

.subImage{ 
    background-color: var(--primary-warmLightGray);         /* 横幅一杯の背景のライトグレー */
    margin: 0 calc(50% - 50vw);
}

.subImage__box{
    background-image: url(../image/04_worries/worry.png);   /* 手を見る女性の画像 */
    background-repeat: no-repeat;
    background-size: contain;                       /* 要素に画像全体が含まれる */
    width: var(--contentWidth);
    aspect-ratio: 1300/600;
    margin: 0 auto;
    position: relative;
}

.subImage__box::before{                             /* 画像の左のグラデーション */
    content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4%;
	aspect-ratio: 5/60;
	background: 
		linear-gradient(to right, var(--primary-warmLightGray), transparent);
}

.subImage__box::after{                              /* 画像の右のグラデーション */
    content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 4%;
	aspect-ratio: 5/60;
	background: 
		linear-gradient(to left, var(--primary-warmLightGray), transparent);
}

.subImage__textSub{
    background-image: url(../image/04_worries/sigh.png);
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 3.0rem;                                /* pc */
    font-weight: var(--fontSemiBold);
    width: 30rem;
    aspect-ratio: 280/87.7;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

.subImage__textSub:nth-of-type(1){                  /* ハリがない */
    position: absolute;
    top: 1.5rem;
    right: 28%;
}

.subImage__textSub:nth-of-type(2){                  /* カサつく */
    position: absolute;
    top: 7rem;
    right: 4%;
}

.subImage__textSub:nth-of-type(3){                  /* キメが乱れる */
    position: absolute;
    top: 11rem;
    right: 32%;
}

.subImage__textSub:nth-of-type(4){                  /* 透明感がない */
    position: absolute;
    top: 18rem;
    right: 10%;
}

.subImage__textMain{                                /* こんなお悩みありませんか */
    background-image: url(../image/04_worries/sigh.png);
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 3.4rem;
    font-weight: var(--fontSemiBold);
    text-shadow: 4px 4px 4px var(--primary-warmLightGray);
    text-align: center;
    width: 52.8rem;
    aspect-ratio: 528/158;
    
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    bottom: 1.2rem;
    right: 4%;
}
/* レスポンシブ */
/* tablet */
@media screen and (max-width: 1000px) {
    .subImage__textSub{
        font-size: clamp(1.6rem, 2.9vw, 3.0rem);
        width: 28vw;
    }

    .subImage__textSub:nth-of-type(1){              /* ハリがない */
        top: 1.5vw;
    }
    
    .subImage__textSub:nth-of-type(2){              /* カサつく */
        top: 7vw;
    }
    
    .subImage__textSub:nth-of-type(3){              /* キメが乱れる */
        top: 11vw;
    }
    
    .subImage__textSub:nth-of-type(4){              /* 透明感がない */
        top: 18vw;
    }

    .subImage__textMain{                            /* こんなお悩みありませんか */
        font-size: clamp(1.6rem, 3.2vw, 3.4rem);
        bottom: 1.6vw;
        width: 55.5%;
    }
}

/* sp */
@media screen and (max-width: 520px) {
    
    .subImage__textSub{
        font-size: clamp(0.4rem, 3.2vw, 1.6rem);
    }
    .subImage__textMain{ 
        font-size: clamp(0.4rem, 3.2vw, 1.6rem);
    }
}

/* -------------------------------*/
/* 商品説明 */

.productInfo__item{
    display: flex;
    position: relative;
}

.productInfo__item:nth-of-type(even){
    flex-direction: row-reverse;
}

.productInfo__imageBox {
    width: 48.6%;                                   /* pc,tab */
}

.productInfo__textBox{
    background: 
		linear-gradient(to bottom, var(--primary-lightGold), transparent);
    width: 50%;
    aspect-ratio: 492/314;

    padding: 3rem;                                  /* pc */
    position: absolute;
    top: 3rem;                                      /* pc */
    right: 4rem;                                    /* pc */
}

.productInfo__text{
    font-size: 2.4rem;                              /* pc */
}


.productInfo__item:nth-of-type(even) .productInfo__textBox{
    position: absolute;
    left: 4rem;                                     /* pc */
}

.paragraph1::before{
    content: "●";
    margin: 0 0.4rem 0 0;                           /* pc */
}

.paragraph1:last-of-type{
    margin-top: 10rem;
}

.conclusion{
    background: linear-gradient(to right, transparent 0%, var(--primary-lightBeige) 20%, var(--primary-lightBeige) 80%, transparent 100%);
    font-size: 3.0rem;                              /* pc */
    font-weight: var(--fontSemiBold);
    text-align: center;
    margin-top: 3rem;
    padding: 2rem 0;
}

.conclusion__br {
    display: none;                                  /* テキストの改行を二行にする */
}

/* レスポンシブ */
/* tablet */
@media screen and (max-width: 1000px) {
    .productInfo__textBox{
        padding: 3.0vw;
        top: 3.0vw;
        right: 4.0vw;
    }

    .productInfo__text{
        font-size: clamp(1.2rem, 2.3vw, 2.4rem);
    }

    .productInfo__item:nth-of-type(even) .productInfo__textBox{
        left: 4vw;
    }

    .paragraph1::before{
        margin: 0 0.3vh 0 0;
    }

    .conclusion{
        font-size: clamp(1.6rem, 2.8vw, 3.0rem);
        padding: 2vw 0;
    }
}

/* sp */
@media screen and (max-width: 520px) {
    .productInfo__item{
        display: flex;
        flex-direction: column;
        align-items: center;
        aspect-ratio: 345/458;
    }

    .productInfo__item:nth-of-type(even){
        flex-direction: column;
    }

    .productInfo__imageBox {
        width: 100%;
    }

    .productInfo__textBox{
        width: 91%;
        top: auto;
        right: auto;
        left: auto;
        bottom: 3.2vw;
    }

    .productInfo__text{
        font-size: clamp(1.6rem, 4.5vw, 2.2rem);
    }

    .conclusion__br{
        display: inline;                            /* テキストの改行を三行にする */
    }
}

/* -------------------------------*/
/* ご使用方法 */

.howToUse{
    display: flex;
}

.howToUse__item{
    flex: 1;                                        /* 3つのアイテムを均等に横並びにする */
}

.howToUse__imageBox{
    text-align: center;
    padding: 2rem;                                  /* pc */
}

.howToUse__text{
    font-size: 2.4rem;                              /* pc */
    padding: 0 2rem 2rem;
}

/* レスポンシブ */
/* tablet */
@media screen and (max-width: 1000px) {
    .howToUse__imageBox{
        padding: 2vw;
    }

    .howToUse__text{
        font-size: clamp(1.6rem, 2.3vw, 2.4rem);
        padding: 0 2vw 2vw;
    }
}

/* sp */
@media screen and (max-width: 520px) {
    .howToUse{
        flex-direction: column;                     /* アイテムを縦並びにする */
        align-items: center;
    }

    .howToUse__imageBox{
        padding: 10vw 10vw 0;
    }

    .howToUse__text{
        font-size: 1.6rem;
        padding: 4vw;
    }
}

/* -------------------------------*/
/* お客様の声 */

.review{
    display: flex;
    flex-wrap: wrap;                                /* 親要素の幅に小要素を折り返し表示 */
    justify-content:space-between;                  /* 行方向の子要素の余白均等配置 */
    row-gap:2rem;                                   /* 小要素間の隙間 */
    margin-bottom: 2rem;
}

.review__item{
    width: 49%;                                     /* 隙間を差し引いた50% */
    margin-top: 2rem;
    position: relative;
}

.review__image{
    display: inline-block;
    width: 38%;
    border-radius: 50%;                             /* シルエットの丸背景 */
    background-color: var(--primary-coldLightGray);
    margin: 0 2rem 2rem 0;
}

.header3{
    display: block;                                 /* 赤文字の見出し */
    color: var(--primary-red);
    font-size: 2.8rem;                              /* pc */
    font-weight: var(--fontExtraBold);
    line-height: 1.25;
    width: 58%;
    position: absolute;
    top: 0;
    right: 0;
}

.review__textShort{
    font-size: 2.2rem;                              /* pc */
    font-weight: var(--fontSemiBold);
}

.review__textShort::before{
    content: "■";
    margin-right: 0.4rem;
}

.review__text{
    font-size: 2.2rem;                              /* pc */
}

/* レスポンシブ */
/* tablet */
@media screen and (max-width: 1000px) {    
    .header3{
        font-size: clamp(1.6rem, 2.6vw, 2.8rem);
    }

    .review__textShort{
        font-size: clamp(1.4rem, 2.1vw, 2.2rem);
    }

    .review__text{
        font-size: clamp(1.4rem, 2.1vw, 2.2rem);
    }
}

/* sp */
@media screen and (max-width: 520px) {
    .review__item{
        width: 100%;
    }

    .header3{
        font-size: clamp(1.8rem, 5.7vw, 5.8rem);
    }

    .review__textShort{
        font-size: clamp(1.6rem, 2.1vw, 2.2rem);
    }

    .review__text{
        font-size: clamp(1.6rem, 2.1vw, 2.2rem);
    }
}

/* -------------------------------*/
 /* FAQ */

.faq__item{
    aspect-ratio: 1300/220;                         /* pc */
    border-bottom: 1px dotted var(--primary-gold);  /* 下の点線 */
    display: flex;                                  /* アイコンとテキストを横並び */
}

.faq__item:last-child{
    border-bottom: none;                            /* 最後は点線無し */
}

.faq__iconBox{
    width: 14%;                                     /* faq__itemの14% */
    display: flex;
    align-items: center;  
    justify-content: center;                  
}

.faq__icon{
    width: 100%;                                    /* iconBoxの100% */
    aspect-ratio: 1/1;
    border-radius: 50%;                             /* 丸背景 */
    
    font-family: didot;
    font-size: 7.6rem;                               /* pc */
   
    display: flex;
    align-items: center;                            /* アイコンの中のQとAを中心にする */
    justify-content: center;                        /* アイコンの中のQとAを中心にする */
}

.faq__icon.q{
    background-color: var(--primary-brown);
    color: var(--primary-lightGold);
}

.faq__icon.a{
    background-color: var(--primary-lightGold);
    color: var(--primary-brown);
}

.faq__texbox{
    width: 82%;                                     /* 親要素の82% */
    margin: 2rem;                                   /* 上下左右20px */
    line-height: 1.4;                               /* 行間1.4 */
}

.faq__text{
    font-size: 2.4rem;                              /* pc */
}

/* レスポンシブ */
/* tablet */
@media screen and (max-width: 1000px) {
    .faq__item{
        aspect-ratio: 1240/200;
    }

    .faq__icon{
        font-size: clamp(4.2rem, 7.4vw, 7.6rem);
    }

    .faq__texbox{
        margin: 1.0vw; 
    }

    .faq__text{
        font-size: clamp(1.2rem, 2.2vw, 3.2rem);
    }
}

/* sp */
@media screen and (max-width: 520px) {
    .faq__item{
        aspect-ratio: 488/130;
    }
    .faq__iconBox{
        width: 20%; 
        margin-top: 1vw;
    }

    .faq__icon{
        font-size: clamp(2rem, 10vw, 5.2rem);
    }

    .faq__texbox{
        width: 80%;
        margin: 1.4vw; 
    }

    .faq__text{
        font-size: clamp(0.8rem, 3.1vw, 1.6rem);
    }
}

/* =============================== 
footer
================================ */

.footer{
    background: linear-gradient(to bottom, var(--primary-warmLightGray) 0%, var(--primary-lightGold) 30%, var(--primary-gold) 70%, var(--primary-darkGold) 100%);
    padding: 6rem 0 0;                              /* フッター上部60px */
}

.footer__navBox{
    border-bottom: 1px dotted var(--primary-gold);
    display: flex;
    justify-content: center;                        /* navメニューを左右中央寄せ */
    margin: 0 0 6rem;                               /* 点線の下60px */
}

.footer__nav{
    display: flex;                                  /* メニューアイテムを横並び */
    margin: 0 0 6rem;                               /* ナビの下60px */
}

.footer__item{
    font-size: 1.8rem;
    font-weight: var(--fontSemiBold);
    margin: 0 5rem 0 0;                             /* 右50px */
}

.footer__item:last-child{
    margin-right: 0;                                /* 一番右だけ右のmargin無し */
}

.footer .nav__logo{
    margin: 0 auto 6rem;                            /* ロゴの下に60px 左右中央寄せ */
}

.copy{
    font-size: 1rem;
    text-align: center;
    padding-bottom: 6rem;
}

/* tablet */
@media screen and (max-width: 1000px) {
    .footer{
        height: auto;
        padding: 4.6vw 0 0;                           /* フッターの上部 */
    }

    .footer__navBox{
        margin: 0 0 4.6vw;                            /* 点線の下 */
    }

    .footer__nav{
        margin: 0 0 4.6vw;                            /* ナビの下 */
    }

    .footer__item{
        font-size: clamp(0.6rem, 1.7vw, 1.8rem);
        margin: 0 5vw 0 0;                          /* 右50px*/
    }

    .footer .nav__logo{
        margin: 0 auto 4.6vw;                         /* ロゴの上 0 左右中央寄せ 下 60px*/
    }
    
    .copy{
        padding-bottom: 4.6vw;
    }
}

/* sp */
@media screen and (max-width: 520px) {
    .footer__nav{
        flex-direction: column;
        align-items: center;
    }

    .footer__item{
        margin: 0 0 2.4vw 0;                        /* 下50px*/
    }

    .footer__item:last-child{
        margin-bottom: 0;                           /* 一番下だけ下のmargin無し */
    }
}