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

/* =import-css
-----------------------------------------------------------------------------*/
@import url("base.css"); /* ヘッダー及びフッター等基本部分 */
@import url("contents.css"); /* コンテンツ内基本部分 */
@import url("drawer.css"); /* ドロワーメニュー設定 */

/* =import-webfonts
-----------------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap&subset=japanese");
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP:500&display=swap&subset=japanese");

/* =box-sizing
-----------------------------------------------------------------------------*/
*, *:before, *:after { box-sizing: border-box; }

/* =基本設定
-----------------------------------------------------------------------------*/
html { background: rgba(255,255,255,1.0); font-size: 62.5%; font-family: 'Noto Sans JP', sans-serif; scroll-behavior: smooth; } /* 初期値16pxの62.5%でルートが10px */
body { background: rgba(255,255,255,1.0); }
body { -webkit-text-size-adjust: 100%; } /* 端末横回転時の文字拡大防止 */
html, body { height: 100%; }

/* =IEバグ対応設定
-----------------------------------------------------------------------------*/
img[src$=".svg"] { max-width: 100%; height: auto; } /* SVGバグ対応 */
img { vertical-align: bottom; } /* 画像下余白バグ対応 */

/* =アンカーリンク設定
-----------------------------------------------------------------------------*/
a.anchor-top { display: block; padding-top: 68px; margin-top: -68px; }
a.anchor-other { display: block; padding-top: 72px; margin-top: -72px; }

/* =文字 基本設定
-----------------------------------------------------------------------------*/
h2, h3, h4, h5, h6, p, li, th, td, dt, dd, address, caption { line-height: 1.5; letter-spacing: 0.12em; font-feature-settings: "palt" 1; margin: 0; padding: 0; }
strong { font-style: normal; font-weight: 400; }
ul { list-style: none; }
img { width: 100%; height: auto; }
a, a:hover { text-decoration: none; transition: all 0.3s ease; } /* リンク部分ホバーアニメーション設定 */
p { word-wrap: break-word; } /* テキストを折り返し指定 */
br.br-none { display: none; } /* 改行設定 */

/* =メインビジュアル部分
-----------------------------------------------------------------------------*/
article.main-visualbox { width: 100%; height: auto; position: relative; }

/* =メインビジュアル部分（タイトル共通部分）
-----------------------------------------------------------------------------*/
div.main-titlebox { width: 80%; height: 100%; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); padding-top: 70px; display: flex; justify-content: center; align-items: center; z-index: 2; }
div.main-titlebox div { min-width: 370px; background-color: rgba(65,40,25,0.85); position: relative; border: 7px solid rgba(65,40,25,1.0); padding: 20px 40px; }
div.main-titlebox div::before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 1px solid rgba(255,255,255,1.0); }
div.main-titlebox h1 { max-width: 200px; text-align: center; margin: 0 auto 5px; }
div.main-titlebox h2 { font-family: 'Noto serif JP'; font-size: 2.0rem; font-weight: 400; color: rgba(255,255,255,1.0); text-align: center; white-space: nowrap; }

/* =スライダー矢印及びページネーション部分
-----------------------------------------------------------------------------*/
div.swiper-button-prev, div.swiper-button-next { width: 10%; height: 100%; display: grid; place-content: center; cursor: pointer; position: absolute; top: 0; bottom: 0; margin: auto; padding-top: 70px; z-index: 1; }
div.swiper-button-prev { left: 0; }
div.swiper-button-next { right: 0; }
div.swiper-button-prev::before, div.swiper-button-next::before { content: ""; width: 4.6rem; height: 4.6rem; background: rgba(65,40,25,1.0); border-radius: 50%; transition: all 0.3s ease; }
div.swiper-button-prev::before, div.swiper-button-next::before { position: absolute; top: 50%; bottom: 0; left: 50%; transform: translateY(-50%) translateX(-50%); margin-top: 35px; }
div.swiper-button-prev:hover::before, div.swiper-button-next:hover::before { background: rgba(100,0,0,1.0); }
div.swiper-button-prev::after, div.swiper-button-next::after { content: ""; width: 1.2rem; height: 1.2rem; border: solid rgba(255,255,255,1.0); border-width: 3px 3px 0 0; }
div.swiper-button-prev::after { margin-left: 0.4rem; transform: rotate(-135deg); }
div.swiper-button-next::after { margin-right: 0.4rem; transform: rotate(45deg); }
span.swiper-pagination-bullet-active { background: rgba(255,255,255,1.0)!important; } /* ページネーション色設定 */

/* =トップページアイキャッチ部分
-----------------------------------------------------------------------------*/
article.eyecatch-box { width: 100%; background: rgba(65,40,25,1.0); border-top: 2px solid rgba(255,255,255,1.0); }
article.eyecatch-box ul { width: 80%; display: flex; margin: 0 auto; }
article.eyecatch-box ul li { color: rgba(255,255,255,1.0); display: flex; flex-flow: column; justify-content: center; align-items: center; padding: 30px 20px; }
article.eyecatch-box h3 { font-size: 1.8rem; font-family: 'Noto serif JP'; font-weight: 500; line-height: 1.3; }
article.eyecatch-box p { font-size: 1.5rem; font-weight: 400; line-height: 1.25; }
article.eyecatch-box p + p { margin-top: 0.7em; }
li.eyecatch-locations { width: 100%; padding-left: 0!important; }
li.eyecatch-locations figure { margin: 1.5em 0; }
li.eyecatch-contact { min-width: 400px; text-align: center; background: rgba(90,55,35,1.0); position: relative; }
li.eyecatch-contact h3 span { font-size: 95%; display: block; }
li.eyecatch-contact figure { margin: 2.0em 0; }
li.eyecatch-contact a { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; z-index: 1; }

/* =スタイリストメニュー部分
-----------------------------------------------------------------------------*/
article.stylist-box { width: 100%; background: url("../images/stylist/stylist-bgimages.jpg") top center / cover; border-top: 2px solid rgba(255,255,255,1.0); }
article.stylist-box > div.title-box { background: none; border-bottom: none; }
article.stylist-box h2.stylist-title { color: rgba(255,255,255,1.0)!important; background: rgba(65,40,25,1.0); border-radius: 100vh; margin: 0 0 1.0em!important; padding: 0.2em; }
article.stylist-box p { color: rgba(0,0,0,1.0); }
div.staff-menubox { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 20px; }
div.staff-menubox section { color: rgba(65,40,25,1.0); text-align: center; display: flex; flex-direction: column; }
div.staff-menubox figure img { max-width: 230px; border: 2px solid rgba(255,255,255,1.0); border-radius: 50%; }
div.staff-menubox h3 { font-size: 1.8rem; font-weight: 500; line-height: 1.0; letter-spacing: 0.025em; margin: 15px 0 10px; }
div.staff-menubox h3 span { font-size: 80%; display: block; margin-bottom: 0.3em; }
div.staff-menubox p { color: rgba(65,40,25,1.0); font-size: 1.6rem; font-weight: 500; border: 1px solid rgba(65,40,25,1.0); outline: 2px solid rgba(65,40,25,1.0); outline-offset: 1px; }
div.staff-menubox p { transition: all 0.3s ease; margin-top: 15px; padding: 3px; }
div.staff-menubox section a:hover p { background: rgba(255,255,255,0.7); transition: all 0.3s ease; }
br.staff-brnone { display: none; }

/* =インフォメーション部分
-----------------------------------------------------------------------------*/
div.information-box { width: 100%; max-width: 830px;  margin: 30px auto 50px; padding: 0 15px; }
div.information-box > div { width: 100%; height: 400px; overflow-y: auto; border-top: 1px solid rgba(200,200,195,1.0); border-bottom: 1px solid rgba(200,200,195,1.0); }
div.cm-box { border-top: 1px dotted rgba(200,200,195,1.0); }
div.cm-box:first-of-type { border-top: none; }
div.information-box dl { text-align: left; display: flex; justify-content: space-between; }
div.information-box dt, div.information-box dd { color: rgba(30,30,30,1.0); font-size: 1.5rem; font-weight: 400; padding: 1.2em 0; }
div.information-box dt { width: 20%; }
div.information-box dd { width: 80%; }
div.information-box dt a, div.information-box dd a { color: rgba(60,120,200,1.0); }
div.information-box dt a:hover, div.information-box dd a:hover { color: rgba(100,80,180,1.0); }
p.info-cautionarynote { font-size: 1.4rem; text-align: right; margin-top: 3px; }



/* =tablet 
----------------------------*/
@media screen and (max-width: 950px){

/* =メインビジュアル部分（タイトル共通部分）
-----------------------------------------------------------------------------*/
div.main-titlebox div { min-width: 340px; }
div.main-titlebox h1 { max-width: 180px }
div.main-titlebox h2 { font-size: 1.8rem; }

/* =トップページアイキャッチ部分
-----------------------------------------------------------------------------*/
li.eyecatch-contact { min-width: 320px; }

}

/* =tablet 
----------------------------*/
@media screen and (max-width: 800px){

/* =メインビジュアル部分（タイトル共通部分）
-----------------------------------------------------------------------------*/
div.main-titlebox div { min-width: 320px; border: 5px solid rgba(65,40,25,1.0); padding: 15px 30px; }
div.main-titlebox h1 { max-width: 160px }
div.main-titlebox h2 { font-size: 1.8rem; }

/* =トップページアイキャッチ部分
-----------------------------------------------------------------------------*/
article.eyecatch-box ul { width: 100%; }
article.eyecatch-box ul li { padding: 20px 20px; }
article.eyecatch-box p { font-size: 1.4rem; }
li.eyecatch-locations { width: 50%; padding-left: 20px!important; }
li.eyecatch-contact { min-width: 50%; }

}

/* =tablet 
----------------------------*/
@media screen and (max-width: 700px){
	
/* =インフォメーション部分
-----------------------------------------------------------------------------*/
div.information-box > div { height: 350px; }
div.information-box dt { width: 25%; }
div.information-box dd { width: 75%; }
p.info-cautionarynote { font-size: 1.3rem; }

}

/* =tablet 
----------------------------*/
@media screen and (max-width: 650px){

/* =アンカーリンク設定
-----------------------------------------------------------------------------*/
a.anchor-top { display: block; padding-top: 48px; margin-top: -48px; }
a.anchor-other { display: block; padding-top: 60px; margin-top: -60px; }

/* =メインビジュアル部分（タイトル共通部分）
-----------------------------------------------------------------------------*/
div.main-titlebox { padding-top: 50px; }

/* =スライダー矢印及びページネーション部分
-----------------------------------------------------------------------------*/
div.swiper-button-prev, div.swiper-button-next { padding-top: 50px; }
div.swiper-button-prev::before, div.swiper-button-next::before { margin-top: 25px; }

/* =トップページアイキャッチ部分
-----------------------------------------------------------------------------*/
article.eyecatch-box ul { width: 100%; flex-direction: column; margin: 0 auto; }
article.eyecatch-box ul li { padding: 20px 15px; }
li.eyecatch-locations { width: 100%; padding-left: 15px!important; }
li.eyecatch-contact h3 span { display: none; }
li.eyecatch-contact figure { margin: 1.0em 0; }

/* =スタイリストメニュー部分
-----------------------------------------------------------------------------*/
div.staff-menubox h3 { font-size: 1.6rem; margin: 10px 0 10px; }
div.staff-menubox p { font-size: 1.5rem; }
div.staff-menubox p { margin-top: 12px; }

}

/* =tablet 
----------------------------*/
@media screen and (max-width: 600px){

/* =メインビジュアル部分（タイトル共通部分）
-----------------------------------------------------------------------------*/
div.main-titlebox div { min-width: 300px; border: 5px solid rgba(65,40,25,1.0); padding: 15px 20px; }
div.main-titlebox h1 { max-width: 140px }
div.main-titlebox h2 { font-size: 1.6rem; }

/* =スライダー矢印及びページネーション部分
-----------------------------------------------------------------------------*/
div.swiper-button-prev::before, div.swiper-button-next::before { width: 3.6rem; height: 3.6rem; }
div.swiper-button-prev::after, div.swiper-button-next::after { width: 1.0rem; height: 1.0rem; border-width: 2px 2px 0 0; }
div.swiper-button-prev::after { margin-left: 0.3rem; }
div.swiper-button-next::after { margin-right: 0.3rem; }

}

/* =mobile 
----------------------------*/
@media screen and (max-width: 500px){

/* =メインビジュアル部分（タイトル共通部分）
-----------------------------------------------------------------------------*/
div.main-titlebox div { min-width: 280px; border: 5px solid rgba(65,40,25,1.0); padding: 10px 15px; }
div.main-titlebox h1 { max-width: 120px }

/* =スライダー矢印及びページネーション部分
-----------------------------------------------------------------------------*/
div.swiper-button-prev::before, div.swiper-button-next::before { width: 3.0rem; height: 3.0rem; }
div.swiper-button-prev::after, div.swiper-button-next::after { width: 0.8rem; height: 0.8rem; }
div.swiper-button-prev::after { margin-left: 0.2rem; }
div.swiper-button-next::after { margin-right: 0.2rem; }

/* =トップページアイキャッチ部分
-----------------------------------------------------------------------------*/
li.eyecatch-locations figure { max-width: 150px; margin: 1.0em 0; }
li.eyecatch-contact figure { max-width: 220px; margin: 0.7em 0; }

/* =スタイリストメニュー部分
-----------------------------------------------------------------------------*/
div.staff-menubox h3 { line-height: 1.2; }
div.staff-menubox h3 span { margin-bottom: 0.1em; }
div.staff-menubox p { font-size: 1.4rem; padding: 2px; }
br.staff-brnone { display: block; }

/* =インフォメーション部分
-----------------------------------------------------------------------------*/
div.information-box > div { height: 300px; border-top: 3px double rgba(200,200,195,1.0); border-bottom: 3px double rgba(200,200,195,1.0); }
div.cm-box { border-top: 1px solid rgba(200,200,195,1.0); }
div.information-box dl { flex-direction: column; justify-content: flex-start; }
div.information-box dt, div.information-box dd { font-size: 1.4rem; }
div.information-box dt { width: 100%; border-bottom: 1px dotted rgba(200,200,195,1.0); padding: 0.6em 0; }
div.information-box dd { width: 100%; padding: 0.6em 0 1.6em; }
p.info-cautionarynote { font-size: 1.2rem; }

}

/* =mobile 
----------------------------*/
@media screen and (max-width: 400px){

/* =メインビジュアル部分（タイトル共通部分）
-----------------------------------------------------------------------------*/
div.main-titlebox { display: none; }

/* =スタイリストメニュー部分
-----------------------------------------------------------------------------*/
div.staff-menubox p { font-size: 1.3rem; }

}