@charset "UTF-8";
body{
    margin: 0;
    font-family:”ヒラギノ角ゴ Pro W1″, "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    -webkit-text-size-adjust: 100%;
}


/*---- 基本 ----*/
html {
    scroll-behavior: smooth;
}
body {
    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3",
      "Hiragino Kaku Gothic ProN", "游ゴシック体", "Yu Gothic", YuGothic,
      "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    width: 100%;
    overflow-x: hidden;
    margin: 0 auto;
    background-color: #ffffff;
}
  
section,
div,
h1,
h2 {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ol,
ul {
    list-style: none;
}
  
img {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 0;
    vertical-align: bottom;
    object-fit: contain;
}
  
header {
    display: flex;
    font-size: 0;
    background: #f7f6f1;
    padding: 1% 2%;
    justify-content: space-between;
    box-shadow: 1px 4px 8px 0px #00000014;
    z-index: 2;
    position: relative;
}
  
@media screen and (min-width: 768px) {
    .pc {
        display: block;
    }
    .sp {
        display: none;
    }
}
@media screen and (max-width: 767px) {
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
}

/* 注釈(サイズと色) */
.fsS{
    font-size: 0.7em;
    color: #aca8a3;
}

.main-text{
    font-size: 1.1em;
}
.fcBr{
    font-weight: 600;
    color: #6e4718;
}
.fcO{
    color: #e56c44;
}
.fcG{
    color: #009a69;
}
.fcW{
    color: #fff;
}

b{
    font-weight: 600;
}

/*---- 基本 ここまで ----*/

/*------------------ コンテンツ　ここから ------------------*/

/*---- FV ----*/
.FV_area{
    position: relative;
}

/*---- ヘッター追従 ----*/
.site-header{
    display: flex;
    gap: 1%;
    padding: 1.5% 19%;
    box-sizing: border-box;
    position: absolute;
    justify-content: center;
    width: 100%;
    align-items: center;
    position: relative;
    z-index: 100;
}
.site-header.fixed{
    z-index: 20;
    position: fixed;
    top: 0;
}
#content .site-header img{
    align-self: flex-start;
    width: 100%;
}

/*---- cta ----*/
/* ホバー時に画像を薄くする */
.CTA_area a img {
    transition: opacity 0.5s ease;
}
.CTA_area a:hover img {
    opacity: 0.8;
}
.tel_cta img {
    cursor: pointer;
}
.tel_cta img {
    transition: opacity 0.5s ease;
}
.tel_cta:hover img {
    opacity: 0.8;
}
.visit_cta{
    width: 406px;
}

.tel_pop {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 100%;
    background: #ffffffe8;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    padding: 1%;
}

/* active クラスで表示 */
.tel_pop.active {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

.pop_close {
    position: absolute;
    top: -9px;
    right: -7px;
    width: 22px;
    height: 22px;
    cursor: pointer;
}

@media screen and (min-width: 768px) {
    .tel_pop_flex{
        display: flex;
        gap: 2%;
        justify-content: center;
    }
}
@media screen and (max-width: 767px) {
    .site-header {
        display: flex;
        gap: 1%;
        padding: 4% 2%;
    }
    .visit_cta{
        width: 92%;
    }
    .tel_wbtn img{
        margin-bottom: 2%;
    }
    .tel_pop {
        display: flex;
        top: 100%;
        left: 50%;
        right: 0;
        transform: translateX(-50%);
        z-index: 999;
        padding: 3%;
        border-radius: 0;
        width: 100%;
    }
    .tel_pop_flex{
        display: flex;
        gap: 2%;
    }
    .tel_cta img,
    .CTA_area a img {
        transition: transform 0.2s ease;
    }
}
/*---- cta ここまで ----*/


/*---- Topvoice ----*/
section.Topvoice_area{
    position: relative;
    padding: 5% 0 6%;
    background: #f6f5f0;
    overflow: hidden; /* 背景装飾がはみ出さないように */
}

section.Topvoice_area::before {
    top: -9%;
    left: 0;
    transform: scale(-1, -1); /* 左右＆上下反転 */
}

section.Topvoice_area::after {
    bottom: -16%;
    right: 0;
    transform: 0; 
}

section.Topvoice_area h2 img{
    max-width: 800px;
    width: 60%;
    margin: 0 auto;
}
.Topvoice_wrap img{
    margin: 2% auto 0;
    max-width: 1400px;
    width: 100%;
    position: relative;
    z-index: 1;
}
@media screen and (min-width: 768px) {
    section.Topvoice_area::before,
    section.Topvoice_area::after {
        content: "";
        position: absolute;
        width: 500px; /* 画像サイズに応じて調整 */
        height: 300px;
        background-image: url(../img/bg-Gdeco_pc.png);
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 0;
        pointer-events: none;
    }
    section.Topvoice_area::after {
        bottom: -16%;
    }
}
@media screen and (max-width: 767px) {
    section.Topvoice_area{
        padding:0;
    }
    section.Topvoice_area h2 img {
        width: 100%;
    }
}
/*---- Topvoice ここまで ----*/

/*---- Point ----*/
section.Point_area{
    margin: 6% 0;
}
.G-line{
    border: #55bd9a solid 1px;
}

section.Point_area h2{
    margin: 4% auto 0;
    display: block;
    width: 70%;
    max-width: 800px;
}

.Point_wrap{
    display: flex;
    justify-content: center;
    gap: 3%;
    width: 85%;
    align-items: center;
    margin: 0 auto 3%;
}

@media screen and (max-width: 767px) {
    section.Point_area h2{
        margin: 8% auto 4%;
        display: block;
        width: 92%;
    }
    .Point_wrap{
        width: 100%;
        padding: 0 4% 5%;
        display: block;
    }
}
/*---- Point ここまで ----*/


/*-------- Reason_area --------*/

/*-- Reason01 --*/
section.Reason_area{
    position: relative;
    background: #f6f5f0;
    padding: 100px 0; /* コンテンツと背景の重なり防止用に調整 */
    overflow: hidden;
}
section.Reason_area h2{
    margin: 0 auto 3%;
    display: block;
    max-width: 800px;
    width: 70%;
    position: relative;
}

div.Reason01 h3{
    max-width: 800px;
    width: 90%;
    margin: 0 auto;
}
/* オレンジ区切り丸 */
section.Reason_area::before,
section.Reason_area::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 170px; /* 高さは画像に合わせて調整 */
    background-image: url(../img/reasonbg_deco_pc.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top;
    z-index: 0;
}
section.Reason_area::before {
    top: 0;
}
section.Reason_area::after {
    bottom: -18px;
    transform: scaleY(-1); /* 上下反転 */
}
/* オレンジ区切り丸 ここまで */
@media screen and (min-width: 768px) {
    .Reason01_frame{
        border: solid 3px #fff;
        max-width: 1600px;
        width: 96%;
        margin: 3% auto;
        padding: 0 6% 4%;
    }
    .Reason01_frame h4{
        margin-bottom: 0;
    }
    .Reason01_frame h4 img{
        max-width: 750px;
        margin: 0 auto;
        display: block;
    }
    .reason01-1_image{
        display: flex;
        align-items: flex-start;
        gap: 1%;
        width: 33%;
    }
    .reason01-1_image img{
        width: 100%;
    }
    .Reason01-2 .reason01-2_image img{
        width: 90%;
        margin: 0 auto;
        display: block;
    }
    section.Reason_area::after {
        bottom: 0;
        transform: scaleY(-1); /* 上下反転 */
    }
}
@media screen and (max-width: 767px) {
    section.Reason_area h2{
        margin: -11% auto 4%;
        width: 92%;
    }
    div.Reason01 h3{
        width: 100%;
    }
    /* オレンジ区切り丸 */
    section.Reason_area::before,
    section.Reason_area::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 100px; /* 高さは画像に合わせて調整 */
        background-image: url(../img/reasonbg_deco_sp.png);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: top;
        z-index: 0;
    }
    section.Reason_area::after {
        bottom: -18px;
        transform: scaleY(-1); /* 上下反転 */
    }
    .Reason01_wrap{
        padding: 0 4% 4%;
    }
}
/*-- Reason01 ここまで --*/

/*-- Reason02 --*/
.Reason02{
    background: #f6f5f0;
    padding: 3% 0;
}
div.Reason02 h3 {
    max-width: 800px;
    width: 90%;
    margin: 0 auto;
}
.Reason02-1{
    padding: 0 7% 4%;
}
.Reason02-1 .main-text{
    text-align: center;
}

.Reason02-2 .tab_toptext{
    text-align: center;
    font-size: 0.9em;
}

@media screen and (min-width: 768px) {
    .Reason02-wrap{
        background: #fff;
        max-width: 1600px;
        width: 96%;
        margin: 0 auto;
        padding: 4% 5%;
    }
    .Reason02-2{
        max-width: 1100px;
        width: 90%;
        margin: 0 auto;
    }
}
@media screen and (max-width: 767px) {
    .Reason02{
        background: #fff;
        padding: 3% 0;
    }
    div.Reason02 h3 {
        width: 100%;
        margin-top: 8%;
    }
}

/*　　 tab切り替え ①ウィッグの種類 　　*/
div.tab{ 
    margin:0 auto;
    text-align: center;
}

/* チェックボックスを非表示に */
input[type="checkbox"] {
    display: none;
}
.tab_area{
    font-size: 0;
    padding: 0 2%;
    margin: 0 auto;
    text-align: center;
}
.tab_label {
    display: inline-block;
    border-radius: 7px 7px 0 0;
    margin: 0 1%;
    padding: 0;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 1px -2px 5px 0px rgb(0 0 0 / 17%);
    background: #f8f5f0;
}
.tab_area label{
    width: 17.7%;
    border-radius: 7px 7px 0 0;
    margin: 0 1%;
    display: inline-block;
    padding: 2% 0;
    background: #ddd;
    text-align: center;
    font-size: 18px;
    cursor:pointer;
    font-weight: bold;
    box-shadow: 1px -2px 5px 0px rgb(0 0 0 / 17%);
}
.panel_area{
    background:#f8f5f0;
    margin: 0 4% 5%;
    padding: 0;
    box-shadow: 1px 2px 11px 0px rgb(0 0 0 / 17%);
}
.tab_panel h5{
    font-weight: 600;
    margin: 2%;
    font-size: 1.3em;
    color: #7b5224;
    text-align: center;
}
.tab_panel { display: none; }
.tab_panel.active { display: block; }
.tab_panel p{
    margin: 0;
}

#panel1{
    border-top: #f3e7e4 solid 10px;
    border-bottom: #f3e7e4 solid 10px;
}
#panel2{
    border-top: #e7e9ea solid 10px;
    border-bottom: #e7e9ea solid 10px;
}
#panel3{
    border-top: #f5ebda solid 10px;
    border-bottom: #f5ebda solid 10px;
}
@media screen and (min-width: 768px) {
    label.tab_label {
        width: 20%;
        padding: 1.5% 0;
    }
    .tab_panel{
        padding: 3% 8%;
    }
}
@media screen and (max-width: 767px) {
    .tab_area{
        padding: 0;
        width: 94%;
        margin: 0 auto;
    }
    .tab_label {
        width: 30%;
        font-size: 15px;
        padding: 3% 0;
        margin: 0;
    }
    .panel_area {
        margin: 0 auto;
        width: 92%;
        padding: 0;
    }
    .tab_panel h5{
        margin: 5% 2% 2%;
        font-size: 1.3em;
        color: #7b5224;
        text-align: center;
    }
    #panel1{
        padding: 2% 0 6%;
        border-top: #f3e7e4 solid 8px;
        border-bottom: #f3e7e4 solid 8px;
    }
    #panel2{
        padding: 2% 0 6%;
        border-top: #e7e9ea solid 8px;
        border-bottom: #e7e9ea solid 8px;
    }
    #panel3{
        padding: 2% 0 6%;
        border-top: #f5ebda solid 8px;
        border-bottom: #f5ebda solid 8px;
    }
}

/*　　 アコーディオン ①ウィッグの種類 　　*/
.accordion{
    width: 92%;
    margin: 0 auto 2%;
    background: #fff;
    border-radius: 10px;
    padding: 1% 0 0;
}
.acc-content {
    overflow: hidden;
    height: 0;
    transition: height 0.35s ease; /* スピード調整ここ */
}
.acc-content.open {
    height: auto; /*コンテンツの高さ*/
}
.acc-content-inner{
    padding: 4% 5%;
}
.acc-btn {
    all: unset;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 600;
    padding: 2% 4% 3%;
    position: relative;
    display: block;         /* ← これが重要！幅を100%にする */
    width: 100%;            /* ← ボタン全体の幅を確保 */
    text-align: center;       /* ← テキストは左寄せ */
    box-sizing: border-box; /* ← padding含めて正しく表示 */
}

/* 通常状態のボタン画像 */
.acc-btn .arrow-icon {
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: 1em;
    width: 1.2em;
    margin: 0;
    pointer-events: none;
    transition: transform 0.3s ease;
}
/* 開いているとき（親に .open がついている）だけ回転 */
.acc-btn.open .arrow-icon {
    transform: translateY(-50%) rotate(180deg);
}

/* 女性向け */
.wig_waccordion{
    margin-bottom: 4%;
    border: #cf727c solid 2px;
}
.acc-wbtn{
    color: #cf727c !important;
}
.acc-wcontent.open{
    border-top: #cf727c solid 2px;
    padding-bottom: 7%;
}

/* 男性向け */
.wig_maccordion{
    margin-bottom: 4%;
    border: #5885af solid 2px;
}
.acc-mbtn{
    color: #5885af !important;
}
.acc-mcontent.open{
    border-top: #5885af solid 2px;
    padding-bottom: 2%;
    padding-bottom: 7%;
}

/* 子ども向け */
.wig_kaccordion{
    margin-bottom: 4%;
    border: #e79118 solid 2px;
}
.acc-kbtn{
    color: #e79118 !important;
}
.acc-kcontent.open{
    border-top: #e79118 solid 2px;
    padding-bottom: 2%;
    padding-bottom: 7%;
}

.wig_kaccordion .wig_image{
    margin-top: 7%;
}
.acc-content p{
    text-align: left;
}
.cover_type{
    margin: 4% 0;
}

/*　　 acc-specif ボタンデザイン（※子アコーディオンは動かない仕様）　　*/
.acc-specif{
    width: 72%;
    margin: 0 auto;
    background: #f3e7e4;
    padding: 0;
}
.specif-btn {
    position: relative;
    border: none;
    font-size: 0.95rem;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    color: #5c5956;
    left: 0;
    right: 0;
    display: block;
    padding: 3% 0;
    border-radius: 8px;
}

/* ul のデフォルトスタイルをリセット */
.specif-list {
    list-style: none;
    padding: 0;
    margin: 0;
} 
/* li をflexで横並び・折り返し対応 */
.specif-item {
    display: flex;
    align-items: flex-start;
    gap: 0;
}
/* ドット画像のサイズ調整 */
.list-dot {
    width: 1em;
    height: 1em;
    margin-top: 0.2em; /* テキストと縦位置を合わせる微調整 */
    flex-shrink: 0;
}
/* テキスト部分（折り返し時に左に揃える） */
.list-text {
    line-height: 1.6;
    flex: 1;
    color: #5c5956;
    font-size: 0.9em;
}
.wig_waccordion .wig_image{
    margin-top: 5%;
}
.wig_spot{
    max-width: 1000px;
    width: 92%;
    margin: 0 auto;
}
@media screen and (max-width: 767px) {
    .accordion{
        width: 92%;
        margin: 0 auto 2%;
        border-radius: 10px;
        padding: 0;
    }
    .acc-btn {
        all: unset;
        cursor: pointer;
        font-size: 1.1em;
        font-weight: 600;
        padding: 4%;
        position: relative;
        display: block;         /* ← これが重要！幅を100%にする */
        width: 100%;            /* ← ボタン全体の幅を確保 */
        text-align: left;       /* ← テキストは左寄せ */
        box-sizing: border-box; /* ← padding含めて正しく表示 */
    }
    .acc-specif{
        width: 100%;
    }
    .specif-btn {
        position: relative;
        border: none;
        font-size: 0.95rem;
        cursor: pointer;
        font-weight: bold;
        text-align: center;
        color: #5c5956;
        left: 0;
        right: 0;
        display: block;
        padding: 3% 0;
    }
    /* 丸 + アイコンの表示（＋） */
    .specif-btn::after {
        font-size: 0.8em;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .specif-content .fsS{
        margin-left: 6%;
        padding-bottom: 20px;
    }
    .wig_spot{
        width: 100%;
    }
    .under-switch{
        transform: scale(1, -1);
    }
}
/*-- Reason02 ここまで --*/

/*-- Reason03 --*/
div.Reason03{
    padding: 0 0 5%;
}
div.Reason03 h3 {
    max-width: 800px;
    width: 90%;
    margin: 3% auto 0;
}
.Reason03 p.main-text{
    text-align: center;
}
div.Subscription_plan{
    border: #e56c44 solid 2px;
    border-radius: 10px;
    margin: 0 auto;
    background: #fff;
    max-width: 1000px;
    width: 90%;
    padding: 0;
}
div.Buy_plan{
    border: #009c6a solid 2px;
    border-radius: 10px;
    background: #fff;
    max-width: 1000px;
    width: 90%;
    padding: 0;
    margin: 3% auto;
}
.Subscription_plan p, .Buy_plan p{
    padding: 0 5% 4%;
    text-align: left;
    margin-top: 0;
}
.Subscription_plan p.fsS{
    padding-top: 0;
    margin-top: -6%;
}
.Buy_plan p.fsS{
    padding-top: 0;
    margin-top: -6%;
}
.Reason03 h5{
    text-align: center;
    font-size: 1.2em;
    color: #7b5224;
    margin-bottom: 4%;
}
.panel_area #panel4 {
    padding: 7% 5%; 
    border-top: #f3e7e4 solid 8px; 
    background: #fff;
}
.panel_area #panel5 {
    padding: 7% 5%; 
    border-top: #e7e9ea solid 8px; 
    background: #fff;
}
.panel_area #panel6 {
    padding: 7% 5%; 
    border-top: #f5ebda solid 8px; 
    background: #fff;
}
#panel4 .fsS, #panel5 .fsS, #panel6 .fsS {
    margin: 3% 0 0;
    padding-bottom: 0;
}
@media screen and (min-width: 768px) {
    .plan_flex{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .plan_flex h4{
        margin: 0 4% 2% 0;
        width: 30%;
    }
    .Subscription_plan p, .Buy_plan p{
        padding: 0 0 4%;
        text-align: left;
        margin-top: 0;
    }
    .plan_flex2{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .Reason03 h5 {
        text-align: left;
        font-size: 1.3em;
        color: #7b5224;
        margin-bottom: 4%;
    }
    .plan_flex2 .reason03_image{
        width: 60%;
    }
    .reason03_recom img{
        padding: 5% 5% 3%;
    }
    div.Subscription_plan{
        border: #e56c44 solid 2px;
        border-radius: 10px;
        margin: 0 auto;
        background: #fff;
        max-width: 1000px;
        width: 90%;
        padding: 3% 5%;
    }
    div.Buy_plan{
        border: #009c6a solid 2px;
        border-radius: 10px;
        background: #fff;
        max-width: 1000px;
        width: 90%;
        padding: 3% 5%;
        margin: 3% auto;
    }
    .Buy_plan .plan_flex {
        justify-content: flex-start;
    }
    .Buy_plan .plan_flex h4{
        width: 24%;
    }
    .plan_flex2 .reason03_image2{
        width: 100%;
    }
    .Reason03 h5{
        margin: 4% auto 3%;
        display: block;
        text-align: center;
        font-size: 1.5em;
    }
    .price_area h5{
        margin: 4% auto 2%;
    }
    .price_area_image{
        max-width: 1000px;
        width: 80%;
        margin: 0 auto;
    }
}
@media screen and (max-width: 900px) and (min-width: 767px) {
    .plan_flex h4{
        width: 38%;
    }
}
@media screen and (max-width: 767px) {
    div.Reason03 h3 {
        width: 100%;
        margin-top: 7%;
    }
    div.Subscription_plan{
        width: 92%;
        margin: 0 4%;
    }
    .reason03_recom img{
        padding: 0 5% 8%;
    }
    div.Buy_plan {
        width: 92%;
        margin: 3% 4%;
    }
    .Subscription_plan p, .Buy_plan p{
        padding: 0 5% 4%;
        text-align: left;
        margin-top: 0;
    }
}
/*-- Reason03 ここまで --*/

/* Reason04 */
.Reason04{
    background: #f6f5f0;
    padding: 0 0 5%;
}
.Reason04 h4{
    text-align: center;
    font-size: 1.2em;
    color: #7b5224;
    margin-bottom: 1%;
}
.reason04_image{
    margin: 0 4%;
}

@media screen and (min-width: 768px) {
    .Reason04-wrap{
        background: #fff;
        max-width: 1600px;
        width: 96%;
        margin: 0 auto;
        padding: 4% 5%;
    }
    div.Reason04 h3 {
        max-width: 800px;
        width: 90%;
        margin: 1% auto 0;
    }
    .reason04-flex{
        display: flex;
        align-items: center;
    }
    .reason04-flex img{
        width: 50%;
    }
    .Reason04_text{
        margin-right: 3%;
    }
    .Reason04_text h4{
        text-align: left;
        font-size: 1.4em;
    }
    .Reason04_text .fsS{
        text-align: right;
    }
}
@media screen and (max-width: 767px) {
    .Reason04{
        background: #fff;
        padding: 5% 0 10%;
    }
    .Reason04 h3{
        width: 100%;
    }
}
/*-- Reason04 ここまで --*/

/*-- Reason05 --*/
.map_area{
    margin: 0 4%;
}
.map_text .fsS{
    text-align: right;
}
.Reason05 h4{
    text-align: center;
    font-size: 1.2em;
    color: #7b5224;
    margin-bottom: 4%;
}
.private_room{
    margin: 8% 4%;
}
.shop_area{
    margin: 0 4% 5%;
}
.shop_tab .tab_area{
    width: 98%;
}
.shop_tab .panel_area{
    width: 96%;
}

.panel_area #panel7{
    padding: 7% 5%; 
    border-top: #f3e7e4 solid 8px; 
    background: #fff
}
.panel_area #panel8 {
    padding: 7% 5%; 
    border-top: #e7e9ea solid 8px; 
    background: #fff;
}
/* 店舗アコーディオン */
.shop_waccordion, .shop_maccordion{
    width: 100%;
    margin: 0 auto 4%;
    background: #f6f5f0;
    border-radius: 10px;
    padding: 2% 0 0;
}
.shop_waccordion .acc-btn{
    color: #7b5224 !important;
    text-align: center;
}
.shop_maccordion .acc-btn{
    color: #7b5224 !important;
    text-align: center;
}
.shop_waccordion .acc-content.open {
    border-top: #c8c4c2 solid 1px;
    padding-bottom: 2%;
}
.shop_maccordion .acc-content.open {
    border-top: #c8c4c2 solid 1px;
    padding-bottom: 2%;
}
.shop_name{
    display: flex;
    gap: 4%;
    align-items: flex-start;
}
.shop_name img{
    width: 5%;
    margin-top: 1%;
}
.shop_tab .address{
    font-size: 0.9em;
}
.shop-na{
    border-top: #edead7 solid 1px;
    margin-top: 4%;
    padding-top: 4%;
}
.shop-na.topshop{
    border-top: #dfcac5 solid 0; 
    margin-top: 0;
    padding-top: 0;
}
.award_imase{
    margin: 0 4%;
}
.award_area h4{
    text-align: center;
    font-size: 1.4em;
    color: #7b5224 !important;
}

@media screen and (min-width: 768px) {
    div.Reason05 h3 {
        max-width: 800px;
        width: 90%;
        margin: 1% auto 0;
    }
    .map_area{
        display: flex;
        align-items: center;
        max-width: 1000px;
        width: 90%;
        justify-content: center;
        margin: 0 auto;
    }
    .map_area img{
        width: 50%;
    }
    .private_room{
        display: flex;
        align-items: center;
        max-width: 1000px;
        width: 90%;
        justify-content: center;
        margin: 0 auto;
        gap: 2%;
    }
    .private_room_text{
        background: #fff;
        padding: 4% 6%;
    }
    .private_room_text h4{
        margin-top: 0;
        text-align: left;
        font-size: 1.4em;
    }
    .Reason05 h4 {
        text-align: center;
        font-size: 1.4em;
    }
    .shop_area h4{
        margin: 6% 0 2%;
    }
    .shop_area p.main-text{
        text-align: center;
        margin: 0 auto 3%;
    }
    .shop_tab_wrap{
        max-width: 1300px;
        width: 100%;
        margin: 0 auto;
    }
    .shop_tab{
        max-width: 1100px;
        width: 90%;
        margin: 0 auto;
    }
    .shop_tab .panel_area{
        padding: 0; 
    }
    .panel_area_flex{
        display: flex;
        gap: 2%;
        align-items: flex-start;
    }
    .shop_waccordion, .shop_maccordion {
        width: 100%;
        margin: 0 auto 2%;
        background: #f6f5f0;
        border-radius: 10px;
        padding: 0;
    }
    .shop_waccordion .acc-btn, .shop_maccordion .acc-btn{
        padding: 3% 4%;
    }
    .shop_name {
        display: flex;
        gap: 2%;
        align-items: center;
    }
    .shop_name img {
        width: 4%;
        margin-bottom: 1%;
    }
    .award_area{
        max-width: 1000px;
        width: 90%;
        margin:  0 auto;
        position: relative;
        z-index: 1;
    }
    .award_area .fsS{
        text-align: center;
    }
}
@media screen and (max-width: 900px) and (min-width: 767px) {
    .reason05_image{
        width: 72%;
    }
}
@media screen and (max-width: 767px) {
    .map_text{
        background: #fff;
        border-radius: 8px;
        padding: 4% 5% 5%;
    }
    .shop_tab .tab_label {
        width: 49%;
        font-size: 15px;
    }
    .shop_area .panel_area{
        width: 100%;
    }
    .award_area h4{
        text-align: center;
        font-size: 1.2em;
        color: #7b5224 !important;
        margin-top: 13%;
    }
}
/*-- Reason05 ここまで --*/

/*------- Reason_area ここまで -------*/

/*---- Voice ----*/
section.Voice_area {
    position: relative;
    padding: 6% 4% 4%;
    overflow: hidden;
}
section.Voice_area h2 {
    margin: 0 auto 3%;
    display: block;
    max-width: 800px;
    width: 70%;
    position: relative;
}

#panel9{
    border-top: #f3e7e4 solid 10px;
    border-bottom: #f3e7e4 solid 10px;
}
#panel10{
    border-top: #e7e9ea solid 10px;
    border-bottom: #e7e9ea solid 10px;
}
#panel11{
    border-top: #f5ebda solid 10px;
    border-bottom: #f5ebda solid 10px;
    padding: 5% 10%;
}


.voice_tab .tab_panel {
    width: 100%;
    padding: 2%;
}

/* スライダー */
.slider_wrapper {
    position: relative;
    max-width: 600px;
    margin: auto;
    overflow: hidden;
    padding: 10% 4% 0;
  }
  
.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 3%;
    margin: 0 2% 0 0;
}
.slider-woman{
    margin: 0 6% 0 0;
}
  
.slide {
    min-width: 100%;
    box-sizing: border-box;
}

.slide img {
    width: 100%;
}

/* 矢印ボタン（画像） */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: auto;
    cursor: pointer;
    z-index: 10;
    opacity: 0.8;
}
.arrow.left {
    left: 3px;
    transform: translateY(-50%); /* 正位置 */
}
.arrow.right {
    right: 3px;
    transform: translateY(-50%) scaleX(-1); /* 左右反転＋中央寄せ */
}
  
/* ドットナビゲーション */
.slider-dots {
    text-align: center;
}

/* 女性用ドット：非アクティブ */
.dot-woman .slider-dot {
    background-color: #f3e7e4;
}
/* 女性用ドット：アクティブ */
.dot-woman .slider-dot.active {
    background-color: #cf727c;
}
/* 男性用ドット：非アクティブ */
.dot-man .slider-dot {
    background-color: #e7e9ea;
}
/* 男性用ドット：アクティブ */
.dot-man .slider-dot.active {
    background-color: #5885af;
}
.slider-dot.active {
    background-color: #cf727c;
}

/* voice_cta_area 用 CTAスタイル */
/* ホバー時に画像を薄くする */
.voice_cta_area a img {
    transition: opacity 0.5s ease;
}
.voice_cta_area a:hover img {
    opacity: 0.8;
    cursor: pointer;
}
.tel_cta_voice img {
    transition: opacity 0.5s ease;
}
.tel_cta_voice:hover img {
    opacity: 0.8;
    cursor: pointer;
}
@media screen and (min-width: 768px) {
    .voice_tab_wrap{
        max-width: 1300px;
        width: 100%;
        margin: 0 auto;
    }
    .voice_tab {
        max-width: 1100px;
        width: 90%;
        margin: 0 auto;
    }
    .voice_tab .panel_area {
        background: #f8f5f0;
        margin: 0 0 5%;
        padding: 0;
        box-shadow: 1px 2px 11px 0px rgb(0 0 0 / 17%);
    }
    .slider_wrapper {
        position: relative;
        max-width: 1000px;
        margin: auto;
        overflow: hidden;
        padding: 1% 4% 1% 6%;
    }
    .slider {
        gap: 1%;
        margin: 0 4% 0 0;
        padding: 2%;
    }
    .slider-dot {
        display: inline-block;
        width: 97px;
        height: 7px;
        margin: 0 0.5%;
        cursor: pointer;
    }
    .kisd_voice{
        margin: 0 2%;
    }
    .voice_cta_area{
        max-width: 770px;
        margin: 4% auto;
    }
    .voicecta_flex{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 3%;
    }
    .voicecta_flex .visit_cta {
        width: 70%;
    }

    .visit_cta02 img{
        width: 60%;
        margin: 0 auto 2%;
    }
}
@media screen and (max-width: 767px) {
    section.Voice_area {
        padding: 13% 4% 15%;
    }
    section.Voice_area h2{
        width: 100%;
    }
    .voice_tab .tab_area{
        width: 100%;
    }
    .Voice_area .tab_label {
        width: 32%;
    }
    .Voice_area .panel_area {
        margin: 0 auto;
        width: 100%;
    }
    .voice_cta_area{
        margin: 5% 4%;
    }
    .voice_cta_area a img {
        transition: transform 0.2s ease;
    }
    .kisd_voice{
        margin: 0;
        padding: 5% 0 0;
    }
    .slider-dot {
        display: inline-block;
        width: 72px;
        height: 8px;
        margin: 2% 0.5% 0;
        cursor: pointer;
    }
    #panel11 {
        padding: 5%;
    }
    .voicein_telbtn img{
        margin: 4% 0;
        padding: 0 8% 5%;
    }
    .voicein_telbtn02 img{
        margin: 4% 0;
        padding: 0 8%;
    }
}
/*---- Voice ここまで ----*/

/*---- Flow_area ----*/
section.Flow_area{
    position: relative;
    background: #f7f6f1;
    padding: 23% 4% 15%;
    overflow: hidden;
}
section.Flow_area::before,
section.Flow_area::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 200px;
    background-image: url(../img/bg-Gdeco_sp.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    pointer-events: none; /* 背景として機能させるためにクリック無効化 */
}
.step5{
    position: relative;
    z-index: 1;
}
@media screen and (min-width: 768px) {
    section.Flow_area {
        padding: 7% 4% 8%;
    }
    section.Flow_area::before,
    section.Flow_area::after {
        content: "";
        position: absolute;
        width: 500px;
        height: 300px;
        background-image: url(../img/bg-Gdeco_pc.png);
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 0;
        pointer-events: none; /* 背景として機能させるためにクリック無効化 */
    }
    section.Flow_area::before {
        top: -8%;
        left: 0;
        transform: scale(-1, -1);
    }
    section.Flow_area::after {
        bottom: -9%;
        right: 0;
    }
    section.Flow_area h2 {
        margin: 0 auto 3%;
        display: block;
        max-width: 800px;
        width: 70%;
        position: relative;
    }
    .flow_wrap{
        max-width: 1000px;
        width: 90%;
        margin: 0 auto;
    }
    .flow_flex{
        display: flex;
        align-items: center;
        margin: 0 auto;
    }
    .flow_flex img{
        width: 50%;
    }
    .flow_text h3{
        font-size: 1.4em;
        color: #6e4718;
    }
    .flow_text .fsS{
        text-align: left;
    }
}
@media screen and (max-width: 767px) {
    section.Flow_area::before,
    section.Flow_area::after {
        content: "";
        position: absolute;
        width: 300px; /* 画像サイズに応じて調整 */
        height: 200px; /* 同上 */
        background-image: url(../img/bg-Gdeco_sp.png);
        background-repeat: no-repeat;
        background-size: contain; /* または cover, 100% など適宜 */
        z-index: 0;
        pointer-events: none; /* 背景として機能させるためにクリック無効化 */
    }
    section.Flow_area::before {
        top: 0;
        left: 0;
        transform: none; /* 通常向き */
    }
    
    section.Flow_area::after {
        bottom: 0;
        right: 0;
        transform: scale(-1, -1); /* 左右＆上下反転 */
    }
}
/*---- Flow_area ここまで ----*/

/*---- Q&A ----*/
section.QA_area{
    padding: 5%;
}
section.QA_area h2 {
    margin: 0 auto 3%;
    display: block;
    max-width: 800px;
    width: 70%;
    position: relative;
}
.qa_wrap{
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
}
.qa-btn {
    position: relative;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    font-weight: bold;
    text-align: left;
    color: #724615;
    left: 0;
    right: 0;
    display: block;
    padding: 3% 0;
    border-radius: 8px;
    display: flex;
    gap: 2%;
    align-items: center;
}
.qa-btn .q_icon{
    width: 5%;
}
  
/* 丸 + アイコンの表示（＋） */
.qa-btn::after {
    content: "+";
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    background: #69c167;
    color: #fff;
    font-size: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* アクティブ時（−） */
.qa-btn.open{
    border-radius: 8px 8px 0 0;
    margin: 0;
}
.qa-btn.open::after {
    content: "−";
    background: #dfd3c5;
}
.qa-answer{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2%;
    padding: 0 10% 0 0 !important;
}
.accordion.acc-qa {
    margin: 0 auto 1%;
}
.qa-answer p{
    margin: 0 0 5%;
}
.qa-answer img{
    width: 5%;
}
.Br-line{
    border: #dfd3c5 solid 1px;
}
@media screen and (max-width: 767px) {
    section.QA_area{
        padding: 5% 4% 10%;
    }
    section.QA_area h2 {
        margin: 8% auto 4%;
        width: 92%;
    }
    .qa_wrap {
        width: 100%;
        margin: 0 auto;
    }
    .accordion.acc-qa {
        width: 100%;
    }
    .qa-btn {
        position: relative;
        border: none;
        font-size: 1.2rem;
        cursor: pointer;
        font-weight: bold;
        text-align: left;
        color: #724615;
        left: 0;
        right: 0;
        display: block;
        padding: 5% 12% 5% 0;
        border-radius: 8px;
        display: flex;
        gap: 4%;
        align-items: center;
        justify-content: flex-start;
    }
    .qa-btn::after {
        content: "+";
        position: absolute;
        right: 0em;
        top: 49%;
        transform: translateY(-50%);
        width: 1.6em;
        height: 1.6em;
        border-radius: 50%;
        background: #69c167;
        color: #fff;
        font-size: 0.9em;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }
    .qa-btn .q_icon {
        width: 8%;
    }
    .qa-answer img{
        width: 8%;
    }
    .qa-answer {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 3%;
        padding: 0 !important;
    }
}
@media screen and (max-width: 1000px) and (min-width: 767px) {
    .qa-btn {
        font-size: 1.2rem !important;
    }
}
/*---- Q&A ここまで ----*/

/*---- consult ----*/
section.consult_area{
    position: relative;
    padding: 6% 0 4%;
    background: #f6f5f0;
}
section.consult_area h2{
    margin: 0 auto;
    display: block;
    width: 70%;
    max-width: 800px;
}
.consult_wrap{
    max-width: 1200px;
    width: 90%;
    margin: 2% auto;
}
.consult_wrap a{
    transition: opacity 0.5s ease;
}
.consult_wrap a:hover img {
    opacity: 0.8;
}
.consult01, .consult02, .consult03{
    position: relative;
}
.consult01 .con_visit_cta{
    position: absolute;
    left: 0;
    right: 0;
    width: 63%;
    bottom: 10%;
    margin: 0 auto;
}
.consult02 .con_docu_cta{
    position: absolute;
    left: 0;
    right: 0;
    width: 63%;
    bottom: 12%;
    margin: 0 auto;
}
.consult03{
    margin-top: 5%;
}
.consult03 .consult03_flex{
    position: absolute;
    left: 0;
    right: 0;
    width: 63%;
    bottom: 20%;
    margin: 0 auto;
    gap: 3%;
}

@media screen and (min-width: 768px) {
    .consult_flex{
        display: flex;
        gap: 4%;
    }
    .consult03_flex{
        display: flex;
    }
}
@media screen and (max-width: 767px) {
    section.consult_area h2 {
        margin: 8% auto 4%;
        width: 92%;
    }
    .consult01 {
        margin: 11% 0 7%;
    }
    .consult01 .con_visit_cta {
        position: absolute;
        left: 0;
        right: 0;
        width: 86%;
        bottom: 8%;
        margin: 0 auto;
    }
    .consult02 {
        margin-bottom: 8%;
    }
    .consult02 .con_docu_cta {
        position: absolute;
        left: 0;
        right: 0;
        width: 86%;
        bottom: 8%;
        margin: 0 auto;
    }
    .consult03 .consult03_flex {
        position: absolute;
        left: 0;
        right: 0;
        width: 78%;
        bottom: 10%;
        margin: 0 auto;
    }
    a.consult03_telbtn img {
        margin-bottom: 3%;
    }
}
/*---- consult ここまで ----*/

/*---- footer ----*/
section.Footer_area {
    background-image: linear-gradient(90deg, #019a69, #67be69);
    padding: 5% 4% 1%;
}
.footer_logo {
    width: 40%;
}
.footer_top ul.navi{
    display: flex;
    justify-content: center; /* 中央揃え */
    gap: 30px; /* li同士の間隔 */
    padding: 0;
    list-style: none;
}
.footer_top .navi li {
    display: flex;
    align-items: center;
}
  
.footer_top  .navi a {
    display: flex;
    align-items: center;
    font-size: 16px; /* 矢印と文字の基準サイズ */
    text-decoration: none;
    color: #fff;
}
  
.footer_top .footer_arrow {
    width: 0.5em;
    height: auto;
    margin-right: 0.4em; /* 文字との間隔 */
    vertical-align: middle;
}
.Wh_line{
    border: #fff solid 1px;
    width: 80%;
    margin: 0 auto;
}

.footer_under .navi{
    display: flex;
    align-items: center;
    gap: 3%;
    margin: 4% auto;
    justify-content: center;
}
  
.footer_under  .navi a {
    display: flex;
    align-items: center;
    font-size: 16px;
    text-decoration: none;
    color: #fff;
}
.footer_under .footer_icon {
    width: 0.8em;
    height: auto;
    margin-right: 0.4em; /* 文字との間隔 */
    vertical-align: middle;
}
section.Footer_area .fsS{
    padding: 10% 0 0;
}
@media screen and (min-width: 768px) {
    section.Footer_area {
        padding: 5% 4% 4%;
    }
    .footer_top {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 2%;
    }
    .footer_under_flex{
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 2%;
        width: 90%;
        margin: 0 auto;
    }
    .footer_under .navi {
        display: flex;
        align-items: flex-start;
        gap: 3%;
        margin: 4% auto;
        justify-content: flex-start;
        width: 60%;
        margin: 0;
    }
    section.Footer_area .fsS {
        padding: 0;
    }
}
@media screen and (max-width: 1000px) and (min-width: 767px) {
    .footer_under .navi a {
        font-size: 13px;
    }
}
@media screen and (max-width: 767px) {
    section.Footer_area{
        padding: 5% 4%;
    }
    .footer_logo{
        width: 80%;
        margin:  0 auto;
        display: block;
    }
    section.Footer_area .fsS{
        padding: 10% 0 0;
        text-align: center;
    }
}
/*---- footer ここまで ----*/