@charset "UTF-8";

/*==============================================================
top
==============================================================*/
/* top */
.top{
    padding: 170px 0 140px 0;
    position: relative;
    overflow: hidden;
    & > .inner{
        max-width: initial;
        padding: 0;

        & > hgroup{
            width: 100%;
            max-width: 1200px;
            margin: 0 auto 70px;
            padding: 0 4%;
            & > h2{
                font-family: var(--font-family-vintage);
                font-size: 72px;
                font-weight: 400;
                line-height: 1.3;
                color: var(--color-gray-400);

                span{
                    font-style: italic;
                }
            }
        }
    }
}

.top::before{
    content: "";
    position: absolute;
    top: -135px;
    right: -56px;
    width: 587px;
    aspect-ratio: 587 / 492;
    background: url(../../images/common/bg_flower01.png) no-repeat center;
    background-size: contain;
    pointer-events: none;
    z-index: -1;
}

.top::after{
    content: "";
    position: absolute;
    bottom: -55px;
    left: -116px;
    width: 579px;
    aspect-ratio: 779 / 634;
    background: url(../../images/common/bg_flower02.png) no-repeat center;
    background-size: contain;
    pointer-events: none;
    z-index: -1;
}


/* top_content */
.top_content{
    width: 100%;
    padding: 0 4% 0 0;
    margin:0 0 auto;
    display: grid;
    grid-template-columns: 44.5% 1fr;
    column-gap: 5.7%;
    align-items: start;

    .detail_title{
        margin-bottom: 40px;
        font-family: var(--font-family-serif);
        font-size: 36px;
        font-weight: 600;
        line-height: 1.7;
        letter-spacing: .075em;
    }
}


@media screen and (max-width:768px) {
    /* top */
    .top{
        padding: 50px 0 80px 0;

        & > .inner{
            padding: 0 4%;

            & > hgroup{
                padding: 0;
                margin: 0 auto 40px;
                & > h2{
                    font-size: 40px;

                }
            }
        }
    }

    .top::before{
        top: -36px;
        right: -26px;
        width: 266px;
    }

    .top::after{
        bottom: -55px;
        left: -22px;
        width: 265px;
    }


    /* top_content */
    .top_content{
        display: block;
        padding: 0;

        .detail_title{
            margin:30px auto 30px;
            font-size: 30px;
        }

        .txt{
            line-height: 2.0;
            font-size: 14px;
        }
    }
}


/*==============================================================
feature
==============================================================*/
/* feature */
.feature{
    padding: 110px 0 140px;
    position: relative;
    overflow: hidden;
    background: transparent url(../../images/concept/bg_fearure.png) no-repeat center center;
    -webkit-background-size: cover;
    background-size: cover;

    & > .inner{
        position: relative;

      /* header */
    & > hgroup{
        margin: 0 0 30px;

        & > h2{
            margin: 0 0 10px;
            font-family: var(--font-family-serif);
            font-size:18px;
            line-height: 1.2;
            letter-spacing: .05em;
            color: var(--color-gray-900);
        }

        & > p{
            margin: 0;
            font-family: var(--font-family-vintage);
            font-size: 71px;
            line-height: 1.02;
            letter-spacing: .0em;
            color: var(--color-gray-900);
        }
        }
    }
}

/* feature_content */
.feature_content{
    width: 100%;

    /* -----------------------------
        feature_item
    ----------------------------- */
    .feature_item{
        width: 100%;
        position: relative;
        padding: 40px 0 60px;


            /* 透かし英語（装飾） */
            .feature_bg_text{
                position: absolute;
                right: 0%;
                top: 10px;
                margin: 0;
                font-family: var(--font-family-vintage);
                font-size: 92px;
                line-height: 1;
                color: var(--color-gray-900);
                opacity: .17;
                pointer-events: none;
                user-select: none;
                white-space: nowrap;
                z-index: 3;
            }

            /* 本体2カラム */
            .feature_row{
                width: 100%;
                position: relative;
                z-index: 1;
                padding: 0 0 0 0;
                display: grid;
                grid-template-columns: 50.9% 1fr;
                column-gap: 9.0%;
                align-items: flex-end;
            }

            /* media */
            .feature_media{
                width: 100%;
                margin: 0;
                position: relative;
                background: rgba(255,255,255,.06);
                border-radius: var(--border-radius-large);
                filter: drop-shadow(0 18px 30px rgba(33,28,28,.46));

                img{
                    overflow: hidden;
                    border-radius: var(--border-radius-large);

                }


            /* 01/02/03 */
            .feature_no{
                position: absolute;
                left: -6px;
                bottom: -83px;
                font-family: var(--font-family-vintage);
                font-size: 120px;
                color: var(--color-gray-900);
                opacity: .5;
                pointer-events: none;
                user-select: none;
                z-index: 3;
            }
        }

        /* body */
        .feature_body{
            width: 100%;
            padding: 18px 0 0;

            .feature_head{
                margin: 0;
                font-family: var(--font-family-serif);
                font-size: 26px;
                font-weight: 600;
                line-height: 1.4;
                letter-spacing: .05em;
                color: var(--color-gray-900);
            }

            .feature_line{
                width: 100%;
                height: 1px;
                margin: 15px 0 20px;
                background:var(--color-gray-300);
            }

            .feature_text{
                margin: 0;
                font-size: var(--font-size-body);
                line-height: 2.0;
                letter-spacing: .05em;
                color: var(--color-gray-900);
            }
        }

    /* -----------------------------
    reverse（02だけ）
    ----------------------------- */
    .feature_row_reverse{
        grid-template-columns: 1fr 50.9%;

        .feature_media{ order: 2; }
        .feature_body{ order: 1; }
    }
    }



    /* -----------------------------
    item別微調整
    ----------------------------- */
    .feature_item_02{
        .feature_media{
            .feature_no{
            left: auto;
            right: -11px;
            }
        }

        .feature_bg_text{
            top: 24px;
        }
    }

    .feature_item_03{
        .feature_bg_text{
            top: 26px;
        }
    }
}

@media screen and (max-width:768px) {

    /* feature */
    .feature{
        padding: 60px 0 30px;

        & > .inner{
            width: 100%;

        /* header */
        & > hgroup{
            margin: 0 0 40px;

            & > h2{
                font-size:11px;
            }

            & > p{

                font-size: 47px;
            }
            }
        }
    }


    /* feature_content */
    .feature_content{
    width: 100%;

    /* -----------------------------
        feature_item
    ----------------------------- */
    .feature_item{
        padding: 30px 0 60px;


            /* 透かし英語（装飾） */
            .feature_bg_text{
                font-size: 44px;
                top: -1px;
                opacity: .5;
            }

            .feature_row{
                display: block;
            }

            /* media */
            .feature_media{
                width: 100%;

            /* 01/02/03 */
            .feature_no{
                left: 4px;
                bottom: -39px;
                font-size: 45px;
            }
        }

        /* body */
        .feature_body{
            width: 100%;
            padding: 35px 0 0;

            .feature_head{
                font-size: 24px;
                line-height: 1.7;
            }

            .feature_text{
                margin: 0;
                font-size: 14px;
            }
        }
    }
    /* -----------------------------
    item別微調整
    ----------------------------- */
    .feature_item_02{
        .feature_media{
            .feature_no{
                left: 4px;
                bottom: -39px;
                font-size: 45px;
            }
        }

        .feature_bg_text{
            top: -1px;
        }
    }

    .feature_item_03{
        .feature_bg_text{
            top: -1px;
        }
    }
}


}


/* ==========================================================================
    first
========================================================================== */

section.first{
    width: 100%;
    box-sizing: border-box;
    padding: 120px 0 0px;
    position: relative;
    background: transparent url(../../images/concept/bg_first.png) no-repeat center center;
    -webkit-background-size: cover;
    background-size: cover;
    overflow: hidden;
}

section.first .first_inner{
    box-sizing: border-box;
    position: relative;
}

@media screen and (max-width:768px) {
    section.first{
        padding: 80px 0 0px;
    }

}

/* ==========================================================================
    First block
========================================================================== */

section.first .first_block{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 4%;
    box-sizing: border-box;
}


section.first .first_header{
    width: 100%;
    margin: 0 0 50px;
    padding: 0;
    display: block;
}

section.first .first_title_jp{
    margin: 0 0 10px;
    font-family: var(--font-family-serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .05em;
    line-height: 1.2;
}

section.first .first_title_en{
    margin: 0;
    font-family: var(--font-family-vintage);
    font-size: 72px;
    font-weight: 400;
    letter-spacing: .0em;
    line-height: 1.15;
    color: var(--color-gray-400);
}

  /* 本文 */
section.first .first_text{
    margin: 0;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 2.0;
}

@media screen and (max-width:768px) {
    section.first .first_header{
        margin: 0 0 35px;
    }

    section.first .first_title_jp{
        font-size: 11px;
    }
    section.first .first_title_en{
        font-size: 47px;
    }

      /* 本文 */
    section.first .first_text{
    font-size: 14px;
    }
}


/* ==========================================================================
    How to reserve block
========================================================================== */

section.first .reserve_block{
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    margin: 60px auto 0 auto;
    padding: 35px 4% 55px;
    background: transparent;
    box-shadow: none;
    position: relative;
    isolation: isolate;
    z-index: 0;
    box-sizing: border-box;
    z-index: 2;
}

section.first .reserve_block::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw); /* 画面左へ飛ばす */
    right: 0;               /* reserve_blockの右端で止める */
    background: rgba(255,255,255,.4);
    box-shadow: 0 10px 16px rgba(123,116,115,.018);
    pointer-events: none;
    z-index: -1;
}

  /* タイトル：英字 + 和文 */
section.first .reserve_title{
    margin: 0 0 35px;
    font-family: var(--font-family-vintage);
    font-size: 50px;
    font-weight: 400;
    letter-spacing: .0em;
    line-height: 1.1;
    color: var(--color-gray-400);
}

section.first .reserve_title > span{
    display: inline-block;
    margin-left: 10px;
    font-family: var(--font-family-serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .05em;
    line-height: 1.2;
    color: var(--color-gray-100);
    vertical-align: middle;
}

  /* 予約本文 */
section.first .reserve_block > p{
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .05em;
    line-height: 2.0;
}

@media screen and (max-width:768px) {
    section.first .reserve_block{
        width: 91.4%;
        margin: 50px auto 0 0;
        padding: 40px 8.7% 50px;
    }

    section.first .reserve_block::before{
        left: 0;
    }

      /* タイトル：英字 + 和文 */
    section.first .reserve_title{
        font-size: 36px;
    }

    section.first .reserve_title > span{
        display: block;
        margin:0 0 0 0;
        font-size: 14px;
    }

      /* 予約本文 */
    section.first .reserve_block > p{
        font-size: 14px;
    }
}

/* ==========================================================================
flow peek slider
========================================================================== */

section.first .flow_block{
    width: 100%;
    box-sizing: border-box;
    margin: 70px  0 120px 0;
}

/* flow_title */
section.first .flow_title{
    width: 100%;
    max-width: 1200px;
    margin: 70px auto 55px auto;
    padding: 0 4%;
    box-sizing: border-box;
    font-family: var(--font-family-vintage);
    font-size: 50px;
    font-weight: 400;
    letter-spacing: .05em;
    line-height: 1.2;
    color: var(--color-gray-400);
}

section.first .flow_title > span{
    display: inline-block;
    margin-left: 10px;
    font-family: var(--font-family-serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .05em;
    line-height: 1.2;
    color: var(--color-gray-100);
    vertical-align: middle;
}

  /* 右だけ画面まで伸ばす器（覗き見せの本体） */
section.first .flow_stage{
    width: 100%;
    box-sizing: border-box;
    /* 左は first/howto と同じ頭 */
    padding-left: max(4%, calc((100% - 1200px) / 2 + 48px));
    /* 右は画面端まで */
    padding-right: 0;
    /* 右側を覗かせる */
    overflow: visible;
    margin-top: 18px;
}

/* viewportは覗き見せしたいので hiddenにしない */
section.first .flow_viewport{
    width: 100%;
    overflow: visible;
    position: relative;
}

section.first .flow_track{
    display: flex;
    gap: 32px;
    will-change: transform;
    transform: translate3d(0,0,0);
    transition: transform .55s cubic-bezier(.2,.8,.2,1);
    user-select: none;
}

  /* slide（中身はレスポンシブOK） */
section.first .flow_slide{
    flex: 0 0 auto; /* JSで幅を入れる前提 */
    box-sizing: border-box;
    display: grid;
    grid-template-columns: min(312px, 42vw) 1fr;
    gap: 0 20px;
    align-items: center;
}

section.first .flow_img{
    margin: 0;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 14px 22px rgba(123,116,115,.18);
    background: #fff;
}

section.first .flow_img img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* flow_body */
section.first .flow_body{
    width: 100%;
}

section.first .flow_name{
    margin: 0 0 10px;
    font-family: var(--font-family-serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .05em;
    line-height: 1.35;
}

section.first .flow_step{
    margin: 0 0 15px;
    display: inline-block;
    font-family: var(--font-family-vintage);
    font-size: 26px;
    font-weight: 400;
    color: var(--color-gray-400);
}

section.first .flow_text{
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 2.0;
}

section.first .flow_block .flow_inner{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 4%;
    box-sizing: border-box;
}

/* ctrl */
section.first .flow_ctrl{
    margin-top: 45px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
}


/* buttons */
section.first .flow_btn{
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    border: 1px solid var(--color-gray-100);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
    transition: transform .2s ease, background-color .2s ease;
}

section.first .flow_btn:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.35);
}

section.first .flow_btn img{
    width: 17px;
    height: auto;
    display: block;
}

  /* prev arrow rotate */
section.first .flow_btn_prev img{
    transform: rotate(180deg);
}

@media screen and (max-width: 1100px){

    /* 1枚のスライド内を縦積みへ */
    section.first .flow_slide{
      display: block;
    }

    section.first .flow_body{
      margin-top: 18px;
      max-width: 44ch; /* 長文暴れ防止（任意） */
    }

    /* 画像が大きくなり過ぎないように */
    section.first .flow_img{
      max-width: 520px;
    }
  }

@media screen and (max-width:768px) {
    section.first .flow_block{
        margin: 60px  0 60px 0;
    }

    /* flow_title */
    section.first .flow_title{
        margin: 60px auto 45px auto;
        font-size: 36px;
    }

    section.first .flow_title > span{
        font-size: 14px;
    }

        /* 覗き見せ：左は余白8%、右は画面端で見切れ */
    section.first .flow_stage{
        padding-left:0;
        padding-right: 0;
        margin-top: 12px;
    }

    section.first .flow_viewport{
        width: 100%;
        overflow: visible;
        padding-left: calc(50% - 142.5px); /* 285/2 */
        box-sizing: border-box;
    }

     /* gapを少し詰める（好みで） */
    section.first .flow_track{
        gap:10px;
    }

   /* ★ここが核：スライドは285px固定、縦積み */
    section.first .flow_slide{
        width: 285px;
        flex: 0 0 auto;
        display: block;   /* grid解除 */
    }

    /* 画像カード：上 */
    section.first .flow_img{
        border-radius: 12px;
    }

    /* テキスト：下 */
    section.first .flow_body{
        margin-top: 18px;
    }

    section.first .flow_name{
        font-size: 22px;
        margin: 0 0 25px;
    }

    section.first .flow_step{
        font-size: 24px;
        margin: 0 10px 0 0; /* 01 と見出しの間 */
        vertical-align: baseline;
    }

    section.first .flow_text{
        font-size: 14px;
    }

    /* 矢印：右寄せ（余白8%） */
    section.first .flow_block .flow_inner{
        padding: 0 8%;
    }

    section.first .flow_ctrl{
        margin-top: 30px;
        gap: 14px;
    }

    section.first .flow_btn{
        width: 55px;
        height: 55px;
    }

    section.first .flow_btn img{
        width: 18px;
    }


}














/*==============================================================
info_area
==============================================================*/
section.info_area{
    width: 100%;
    box-sizing: border-box;
    background: transparent url(../../images/concept/bg_payment.png) no-repeat center center;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

  /* 2カラム */
section.info_area .inner{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

  /* 中央の縦ライン */
section.info_area .inner:before{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-0.5px);
    width: 2px;
    height: 100%;
    background: var(--color-gray-900);
    pointer-events: none;
    z-index: 2;
}

  /* 各ブロック */
section.info_area .info_block{
    box-sizing: border-box;
    padding: 70px 80px 80px 0px;
    position: relative;
}

section.info_area .info_block.payment{
    padding: 70px 0px 80px 80px;
}

  /* タイトル */
section.info_area .info_title{
    margin: 0 0 40px;
    font-family: var(--font-family-vintage);
    font-size: 50px;
    font-weight: 400;
    line-height: 1.05;
    color:var(--color-gray-900);
}

  /* 和文サブ */
section.info_area .info_title > span{
    display: inline-block;
    margin-left: 5px;
    font-family: var(--font-family-serif);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .05em;
    line-height: 1.2;
    color:var(--color-gray-900);
    vertical-align: middle;
}

  /* 本文 */
section.info_area .info_block p{
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .05em;
    line-height: 2.0;
    color:var(--color-gray-900);
}


@media screen and (max-width:768px) {
    section.info_area .inner{
        display: block;
        padding: 0 0%;
    }

    /* 中央の縦ライン */
    section.info_area .inner:before{
        content: none;
    }

    /* 各ブロック */
    section.info_area .info_block{
        padding: 70px 0 60px;
        margin: 0 8%;
    }

    section.info_area .info_block.payment{
        padding: 60px 0 60px;
        margin: 0 8%;
    }
    section.info_area .info_block.payment::before{
        content: "";
        position: absolute;
        top: 0px;
        left:50%;
        transform:translateX(-50%);
        width:100vw;
        height: 1px;
        background: var(--color-gray-900);
    }

      /* タイトル */
    section.info_area .info_title{
        margin: 0 0 30px;
        font-size: 36px;
    }

    /* 本文 */
    section.info_area .info_block p{
        font-size: 14px;
    }

}