@charset "utf-8";
/* CSS Document */

@font-face {src: url("/fonts/Honoka-Shin-Maru-Gothic_R.woff2") format("woff2");font-family: "Honoka Maru Gothic";font-style: normal;font-display: swap;}
@font-face {src: url("/fonts/Montserrat-Bold.woff2") format("woff2");font-family: "Montserrat Bold";font-display: swap;}

body.chantic{background: #fff;}
#chanticCommonBanner{background: #EADBDD;}
#bedrock-bath.benefits p.descrition{text-align: center;}
#bedrock-bath .list-it01 img{border-radius: 6px 6px 0 0;object-fit: cover;}
#bedrock-bath .descrition{font-size: 18px;text-align: center;}

/* ===================================================
   共通（ベース設定・テーマカラー等）
=================================================== */
div#breadcrumbs a::after, div#breadcrumbs span, body.chantic h2 span, .chantic .txt_emergency > a, #sideColumn a.button, #price .price-box-aside, #how-to-use .how-to-use-box .box01 span, #facility .button, #topics .button, #sideColumn .button.primary { color: #ff768b; }
.chantic div#sideColumn, .chantic div#sideColumn header a.button.secondary, .chantic header#Gnav { background: #ff768b;}
.chantic .txt_emergency > a, #facility .button, #topics .button { border: 1px solid #ff768b;}

/* PCシェアボタン */
.chantic div.pc_share { padding: 20px 0; }
.chantic div.pc_share ul { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto; }
.chantic div.pc_share ul::before { content: "SHARE"; margin-right: 15px; padding-top: 5px; font-size: 12px; color: #fff; }
.chantic div.pc_share li { font-size: 30px; margin-left: 15px; }
.icon-line_clear, .icon-facebook_clear, .icon-instagram_clear { color: #fff; }

/* ハーブテント・その他共通コンポーネント */
#herbal h3 { text-align: center; }
.box_10 { margin-top: 40px; margin-bottom: 30px; display: table; }
.box_10 li { margin-bottom: 20px; }
.box_10 > div { display: table-cell; padding: 0 10px; vertical-align: top; min-width: 180px; }

#herbal_steam-howto li { margin-bottom: 20px; }
#herbal_steam-howto li::before { display: none; }
#herbal_steam-howto small { display: block; font-size: 12px; margin-top: 5px;}

#herbal_steam-recommend .text-box { margin-bottom: 20px; width: 100%; }
#herbal_steam-recommend .text-box p { font-size: 13px; margin-bottom: 5px; text-align: center; }
#herbal_steam-recommend .text-box strong { display: block; font-size: 18px; font-weight: 400; color: #755547; }
#herbal_steam-recommend .img-box { width: 100%; max-width: 100px; margin: 0 auto; }

ul.oils_used li span { display: block; margin-bottom: 3px; font-weight: bold; }


/* ===================================================
   スマホ・タブレット（画面幅1023px以下）
=================================================== */
@media screen and (max-width: 1023px) {
    /* PC専用シェアボタン非表示 */
    .pc_share { display: none; }

    body.chantic h2{font-size: 24px;}
    body.chantic h2 span{font-size: 16px;}
    #KV .desc-txt01{font-size: 30px;color: #fff;}
    #KV h2{font-family: 'Zen Kaku Gothic New',sans-serif;font-size: 20px;}
    .chantic section#KV{height: 260px;margin-top: 60px;}
    #KV .contents{padding-top: 0;}
    div.bg picture img{transform: none;}
    .chantic section#KV div.bg picture img{opacity: 1;}
    #KV h2{background: none;color: #fff;line-height: 1.5;}
    #bedrock-bath{background: var(--color_04);}
    #bedrock-bath h2{background: var(--color_04);}
    #bedrock-bath .descrition{padding-bottom: 40px;line-height: 1.5;}
    #bedrock-bath .list-it02{background: #fff;}
    #bedrock-bath .list-it02 dt{text-align: center;padding-top: 30px;}
    #bedrock-bath .list-it02 dd{padding: 30px;line-height: 1.5;}
    #bedrock-bath .listwrap li{margin-bottom: 20px;}
    #bedrock-bath-price th,#herbal_steam-price th  {display: flex;align-items: center;width: 100%;height: 50px; justify-content: center; padding-right: 0; text-align: center; vertical-align: middle; font-size: 14px; background: var(--color_04); border-bottom: 1px solid var(--color_07); font-weight: bold;}
    #bedrock-bath-price tr,#herbal_steam-price tr{display: flex;margin-bottom: 0;}
    #bedrock-bath-price .col-1,#herbal_steam-price .col-1 {display: flex;align-items: center;width: 50%;}
    #bedrock-bath-price td ,#herbal_steam-price td{font-size: 12px; vertical-align: middle;border-bottom: 1px solid var(--color_07); padding: 15px 0;}
    #bedrock-bath-price .col-2, #bedrock-bath-price .col-3,#herbal_steam-price .col-2,#herbal_steam-price .col-3 {display: flex; justify-content: center; align-items: center; width: 25%;font-family: 'Montserrat Bold',sans-serif;font-weight: bold;text-align: right;}
    #bedrock-bath-price .col-2:not(th), #bedrock-bath-price .col-3:not(th),#herbal_steam-price .col-2:not(th), #herbal_steam-price .col-3:not(th){font-size: 16px;}
    #bedrock-bath-price .col-2, #bedrock-bath-price .col-3,#herbal_steam-price .col-2, #herbal_steam-price .col-3 {width: 60%;text-align: center;}
    #efficacy{background: url(/images/shinjuku/efficacy-bg_sp.webp) no-repeat;background-size: cover;}
    #efficacy.container{padding: 30px 0 0;}
    #efficacy h2{background: none;}
    #efficacy .efficacy-box{margin-bottom: 20px;}
    #efficacy .efficacy-box-ct{display: flex;flex-direction: column;background: #fff;padding: 30px;}
    #efficacy .efficacy-box-it01{order: 2;font-size: 14px;}
    #efficacy .efficacy-box-it02{font-family: 'Honoka Maru Gothic',sans-serif;text-align: center;font-size: 90px;line-height: 1;margin-bottom: 20px;}
    #efficacy .efficacy-box:nth-of-type(1) .efficacy-box-it02{color: #bc8080;}
    #efficacy .efficacy-box:nth-of-type(2) .efficacy-box-it02{color: #93793d;}
    #efficacy .efficacy-box:nth-of-type(3) .efficacy-box-it02{color: #8e726a;}
    #efficacy .efficacy-box:nth-of-type(4) .efficacy-box-it02{color: #55adb4;}
    #maifan-stone .maifan-stone-it01, #koyo-seki .maifan-stone-it01, #conplimentary_services .maifan-stone-it01{margin-bottom: 20px;}
    #herbal_steam .box_10{display: flex; flex-direction: column; align-items: center;}
    #herbal_steam .box_10 img{width: 100vw; text-align: center; margin-bottom: 50px;}
    #herbal_steam .box_10_txt{width: 100%; max-width: 525px; margin: 0 auto;}
    #herbal_steam-howto { width: 100%; max-width: 525px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
    #herbal_steam-recommend .recommend-list { display: flex; flex-direction: column; gap: 30px; margin-top: 30px; padding: 0 20px; }
    #herbal_steam-recommend .recommend-list li { width: 100%; align-items: center; text-align: center; }
    ul.oils_used { display: flex; flex-direction: column; gap: 20px; padding: 0 20px; }
    ul.oils_used li { display: flex; align-items: center; gap: 15px; }
    ul.oils_used li img { width: 80px; /* スマホ向けに画像サイズを制御 */ flex-shrink: 0; }

    /* 新規追加 */
    #herbal_steam .box_10{display: flex; flex-direction: column; align-items: center;}
    #herbal_steam .box_10 img{ margin-bottom: 50px;}
    #access.container,#access.container h2{background: #fff;}
    #access a.button.open_map{color: #fff;background: #ff768b; display: flex; justify-content: center; align-items: center; padding: 15px; border-radius: 15px; width: 60%; margin: 20px auto ;}
    h3.trv-access-title{padding: 0; text-indent: 0;}
    .trv-access-wrapper{padding: 20px 0;}
    .trv-access-wrapper{padding: 20px 0;}
    .trv-access-column ol{list-style-position: outside; list-style-type: disc; padding-left: 10px;}
    .trv-access-column ol li{margin-bottom: 25px;}
    .trv-access-column ol li::before{margin-right: 10px;}
    .trv-access-column a{color: #755547; border-bottom: 1px solid #755547;}
    .trv-access-column a:hover{opacity: 0.8;}
    .trv-column-title{display: inline-block; margin-left: 1.5em;}
    .trv-access-summary{font-size: 16px;}
    .chantic div#sideColumn a{color: #fff;}
    #faq dt, #faq dl{line-height: 1.5;}
    #faq dl{border: solid 2px #f8f2f7; border-radius: 10px; margin-bottom: 20px; padding: 0;}
    #faq dt {position: relative; background: #f8f2f7; text-align: justify; padding: 20px 40px; border-radius: 8px; cursor: pointer;}
    #faq dt span{position: absolute; left: 15px; top: auto; bottom: auto; margin: auto; margin: auto; font-size: 16px;} 
    #faq dt::before { display: block; content: ''; position: absolute; top: 0; left: auto; right: 15px; bottom: 0; margin: auto; background-color: #755547; border-radius: 10px; width: 15px; height: 2px; }
    #faq dt::after { content: ""; position: absolute; top: 50%; right: 15px; width: 14px; height: 2px; background-color: #755547; transform: translateY(-50%) rotate(90deg); transition: transform 0.3s ease; }
    #faq dt.on::after { transform: translateY(-50%) rotate(0deg); }
    #faq dd {display: none; padding: 20px;}
    
    .box_03{background: #f8f2f7; font-size: 12px; border-radius: 10px; width: auto; padding: 10px; margin: 10px auto 20px;}
    .box_03 a{color: #755547; display: flex; align-items: center;}
    .box_03 a:hover{opacity: 0.8;}
    .box_03 img{width: auto; float: left; margin-right: 10px; padding-top: 10px;}
    .box02 strong{display: block; padding-top: 10px;}
    .box02 ul li{list-style-type: disc; margin-left: 20px; padding-top: 5px;}#recommend li:nth-child(1) .point-it-ico {background: url(/images/point-it03_ico.svg) no-repeat center;}
}


/* ===================================================
   PC（画面幅1024px以上）
=================================================== */
@media screen and (min-width: 1024px) {
    /* スマホ専用シェアボタン非表示 */
    .share { display: none; }

    body.chantic h2{font-size: 24px;}
    body.chantic h2 span{font-size: 16px;}
    #KV .desc-txt01{color: #fff;font-size: 30px;font-weight: 100;}
    h2{margin: 0;}
    .contents{margin-bottom: 0;}
    .chantic section#KV{height: 260px;}
    #KV .description{background: none;color: #fff;line-height: 1.5;}
    #bedrock-bath{background: var(--color_04);}
    #bedrock-bath h2{background: var(--color_04);}
    #bedrock-bath .contents{display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 0 50px 50px;}
    #bedrock-bath .listwrap{display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 20px;margin-top: 50px;max-width: 1060px;}
    #bedrock-bath .listwrap li{display: flex;flex-direction: column;width: 100%;}
    #bedrock-bath .listwrap li:last-child{margin-right: 0;}
    #bedrock-bath .listwrap li .list-it02{padding: 30px;background: #fff;flex-grow: 1;}
    #bedrock-bath .listwrap dt{text-align: center;}
    #bedrock-bath .listwrap dd{margin-top: 20px;}
    #bedrock-bath-price .contents,#herbal_steam-price .contents{width: 525px;margin: 0 auto 50px;}
    #bedrock-bath-price th,#herbal_steam-price th  {display: flex;align-items: center;width: 100%;height: 40px; justify-content: center; padding-right: 0; text-align: center; vertical-align: middle; font-size: 14px; background: var(--color_04); border-bottom: 1px solid var(--color_07); font-weight: bold;}
    #bedrock-bath-price tr,#herbal_steam-price tr {display: flex;margin-bottom: 0;}
    #bedrock-bath-price .col-1,#herbal_steam-price .col-1 {display: flex;align-items: center;width: 50%;}
    #bedrock-bath-price td,#herbal_steam-price td {font-size: 14px; vertical-align: middle;border-bottom: 1px solid var(--color_07); padding: 15px 0;}
    #bedrock-bath-price .col-2,#herbal_steam-price .col-2{display: flex; justify-content: center; align-items: center; width: 50%; text-align: center;font-weight: bold;}
    #efficacy{background: url(/images/shinjuku/efficacy-bg.webp) no-repeat;background-size: cover;padding-bottom: 40px;}
    #efficacy h2{background: none;}
    #efficacy .efficacy-box{display: flex;justify-content: center;align-items: center;background: #fff;margin-bottom: 20px;padding: 50px 0;}
    #efficacy .efficacy-box-ct{display: flex;flex-direction: row;justify-content: space-between; width: 516px;}
    #efficacy .efficacy-box-it01{width: 70%;}
    #efficacy .efficacy-box-it02{width: 30%;font-size: 120px;}
    #efficacy .efficacy-box-it02 span{display: block;padding-top: 50px;font-family: 'Honoka Maru Gothic',sans-serif;}
    #efficacy .efficacy-box:nth-of-type(2n) .efficacy-box-it01{order: 2;}
    #efficacy .efficacy-box:nth-of-type(2n) .efficacy-box-it02{text-align: left;}
    #efficacy .efficacy-box:nth-of-type(2n+1) .efficacy-box-it02{text-align: right;}
    #efficacy .efficacy-box:nth-of-type(1) .efficacy-box-it02{color: #bc8080;}
    #efficacy .efficacy-box:nth-of-type(2) .efficacy-box-it02{color: #93793d;}
    #efficacy .efficacy-box:nth-of-type(3) .efficacy-box-it02{color: #8e726a;}
    #efficacy .efficacy-box:nth-of-type(4) .efficacy-box-it02{color: #55adb4;}
    #maifan-stone ,#koyo-seki ,#conplimentary_services{padding-bottom: 40px;}
    #maifan-stone .contents, #koyo-seki .contents, #conplimentary_services .contents{display: flex;justify-content: center;padding: 0 50px;}
    #maifan-stone .maifan-stone-box, #koyo-seki .maifan-stone-box, #conplimentary_services .maifan-stone-box{display: flex;flex-direction: row; justify-content: space-between;align-items: center;width: 800px;}
    #maifan-stone .maifan-stone-box .maifan-stone-it01 img, #koyo-seki .maifan-stone-box .maifan-stone-it01 img ,#conplimentary_services .maifan-stone-box .maifan-stone-it01 img{width: 250px;height: 250px;}
    #maifan-stone .maifan-stone-box .maifan-stone-it01, #koyo-seki .maifan-stone-box .maifan-stone-it01, #conplimentary_services .maifan-stone-box .maifan-stone-it01{align-self: flex-start;}
    #maifan-stone .maifan-stone-box .maifan-stone-it02, #koyo-seki .maifan-stone-box .maifan-stone-it02 ,#conplimentary_services .maifan-stone-box .maifan-stone-it02{margin-left: 40px;align-self: flex-start;}
    #maifan-stone .description ,#koyo-seki .description ,#conplimentary_services .description{margin-bottom: 30px;}
    
    /* 新規追加 */
    #herbal_steam .box_10{display: flex; flex-direction: column; align-items: center;}
    #herbal_steam .box_10 img{margin-bottom: 50px;}
    #herbal_steam-howto { width: 525px; margin: 0 auto; }
    #herbal_steam-recommend .recommend-list { display: flex; flex-direction: row; justify-content: space-between; gap: 40px; margin-top: 30px; padding: 0 50px; }
    #herbal_steam-recommend .recommend-list li { width: 31%; align-items: flex-start; text-align: left; }
    ul.oils_used { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; padding: 0 50px; }
    ul.oils_used li { display: grid; grid-template-columns: 30% auto; column-gap: 15px; align-items: flex-start; }
    #access.container,#access.container h2{background: #fff;}
    #access a.button.open_map{color: #fff;background: #ff768b; display: flex; justify-content: center; align-items: center; padding: 15px; border-radius: 15px; width: 60%; margin: 20px auto ;}
    h3.trv-access-title{padding: 0; text-indent: 0;}
    .trv-access-wrapper{padding-top: 20px;}
    .trv-access-column{padding: 20px 0;}
    .trv-access-column ol{list-style-position: outside; list-style-type: disc; padding-left: 10px;}
    .trv-access-column ol li{margin-bottom: 25px;}
    .trv-access-column ol li::before{margin-right: 10px;}
    .trv-access-column a{color: #755547; border-bottom: 1px solid #755547;}
    .trv-access-column a:hover{opacity: 0.8;}
    .trv-column-title{display: inline-block; margin-left: 1.5em;}
    .trv-access-summary{font-size: 16px;}
    .chantic div#sideColumn a{color: #fff;}
    #faq dl{border: solid 2px #f8f2f7; border-radius: 10px; margin-bottom: 20px; padding: 0;}
    #faq dt {position: relative; background: #f8f2f7; padding: 20px; text-align: center; border-radius: 8px; cursor: pointer;}
    #faq dt span{position: absolute; left: 15px; top: auto; bottom: auto; margin: auto; margin: auto; font-size: 16px;} 
    #faq dt::before { display: block; content: ''; position: absolute; top: 0; left: auto; right: 15px; bottom: 0; margin: auto; background-color: #755547; border-radius: 10px; width: 15px; height: 2px; }
    #faq dt::after { content: ""; position: absolute; top: 50%; right: 15px; width: 14px; height: 2px; background-color: #755547; transform: translateY(-50%) rotate(90deg); transition: transform 0.3s ease; }
    #faq dt.on::after { transform: translateY(-50%) rotate(0deg); }        
    #faq dd {display: none; padding: 20px;}
    .box_03{background: #f8f2f7; font-size: 12px;padding: 20px 10px; border-radius: 10px; width: 500px; margin: 10px auto 20px;}
    .box_03 a{color: #755547; display: flex; align-items: center;}
    .box_03 a:hover{opacity: 0.8;}
    .box_03 img{width: auto; float: left; margin-right: 20px;}
    .box02 strong{display: block; padding-top: 10px;}
    .box02 ul li{list-style-type: disc; margin-left: 20px; padding-top: 5px;}
  }