/* カラー★パレット */
:root {
--bl:#a1d8e2;
--bl-02:#81c2e0;
--bk:#3e3e1f;
--gr:#d9d9d9;
--gren:#91b122;
--gren-02:#008579;
--pi:#e95464;
--pi-02:#f4a7a6;
--or:#ffaa5b;
--ye:#ffd500;
--ye-02:#fff9b1;
--wh:#fff;
}

/* 全体 */
html { background-color:var(--bl); }
body { display:flex; flex-direction:column; justify-content:space-between; height:100%; }
main { flex:1; display:flex; flex-direction:column; }
section.content-block { flex:1; display:flex; flex-direction:column; }

/* フォント */
html, body, h1, h2, h3, h4, p, li, dt, dd, td, address { 
color:var(--bk);
font-style:normal;
font-smooth:always;
font-family:"M PLUS 2", sans-serif; 
font-optical-sizing:auto;
text-align:justify;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

/* notosans */
.noto { font-family:"Noto Sans JP", sans-serif; }

/* よく使う見出し */
.midashi-pink { color:var(--pi); font-size:20px; font-weight:900; text-align:center; margin-bottom:40px; }

/* よく使うコンテンツ */
.content-block { background-color:var(--wh); padding:40px 16px 40px 16px; margin:0 20px; }
.first-block { border-radius:20px 20px 0 0; }

@media( min-width:960px ) { 

/* よく使う見出し */
.midashi-pink { font-size:34px; letter-spacing:6.8px; }

/* よく使うコンテンツ */
.content-block { padding:60px 80px 60px 80px; margin:0 100px; }

}

/* ==================================================================================================== */
/* ヘッダー */
/* ==================================================================================================== */

/* ベース */
header { align-items:center; background-color:var(--bl); justify-content:space-between; padding:0 20px; position:fixed; height:72px; width:100%; z-index:20; }

/* タイトル */
header h1 img { margin:auto 0; height:auto; max-width:251px; width:251px; }

@media(min-width:960px) {

/* ベース */
header { padding:0 40px; height:110px; }

/* タイトル */
header h1 img { max-width:320px; width:320px; }

}

/* ==================================================================================================== */
/* ナビメニュー */
/* ==================================================================================================== */

/* ハンバーガー */
label.hamburger { aspect-ratio:1/1; align-items:center; cursor:pointer; flex-direction:column; display:flex; gap:8px; justify-content:center; position:relative; height:72px; width:26px; z-index:1; }
label.hamburger span.line::before, label.hamburger span.line::after { content:''; }
label.hamburger span.line, label.hamburger span.line::before, label.hamburger span.line::after { background-color:var(--bk); border-radius:2px; display:block; transition:.3s; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:2px; width:26px; }
label.hamburger span.line::before { transform:translateX(-50%) translateY(-8px); }
label.hamburger span.line::after { transform:translateX(-50%) translateY(6px); }

/* 動かす */
#check-nav:checked ~ label.hamburger span.line { background-color:transparent; transition:.3s; }
#check-nav:checked ~ label.hamburger span.line::before { transform:translate(-50%,-50%) rotate(45deg); transition:.3s; }
#check-nav:checked ~ label.hamburger span.line::after { transform:translate(-50%,-50%) rotate(-45deg); transition:.3s; }

@media( min-width:960px ) { 

/* ハンバーガー */
label.hamburger, label.hamburger span { display:none; }

}

/* ==================================================================================================== */
/* ナビリスト */
/* ==================================================================================================== */

/* ベース */
ul.nav-list { align-items:flex-start; background-color:var(--bl); flex-direction:column; justify-content:flex-start; gap:24px; overflow:hidden; transition:.3s; position:fixed; top:72px; left:0; min-height:0px; height:0; width:100%; z-index:100; }
ul.nav-list li { font-size:16px; font-weight:800; line-height:200%; }
ul.nav-list li.pc-only { display:none; }

/* 動かす */
#check-nav:checked ~ ul.nav-list { transition:.3s; overflow-y:auto; padding:40px; min-height:calc( 100vh - 72px ); height:calc( 100vh - 72px ); }

@media( min-width:960px ) { 

/* ベース */
nav.main-nav { width:calc( 100% - 360px ); }
ul.nav-list { flex-direction:row; justify-content:space-around; overflow:visible; position:static; min-height:auto; height:auto; }
ul.nav-list li { font-weight:500; text-align:center; line-height:normal; position:relative; z-index:1; }
ul.nav-list li.sp-only { display:none; }
ul.nav-list li.pc-only { display:block; }
ul.nav-list li a:link, ul.nav-list li a:visited, ul.nav-list li label { color:var(--bk); }
ul.nav-list li a:active, ul.nav-list li a:hover, ul.nav-list li label:active, ul.nav-list li label:hover { color:var(--wh); }

/* 展開ナビ */
ul.nav-list li label::after { content:''; display:inline-block; border-right:2px solid var(--bk); border-bottom:2px solid var(--bk); transform:translateY(-3px) rotate(45deg); margin-left:10px; height:12px; width:12px; }
ul.nav-list li label:hover::after { border-right:2px solid var(--wh); border-bottom:2px solid var(--wh); } 
ul.nav-list li ul.open-nav { overflow:hidden; position:absolute; min-height:0; height:0; width:0; z-index:100; }

/* 動かすわよ */
#pc-nav-01:checked ~ ul.open-nav, #pc-nav-02:checked ~ ul.open-nav, #pc-nav-03:checked ~ ul.open-nav { background-color:var(--bl); display:flex; flex-direction:column; gap:24px; overflow:visible; left:50%; transform:translateX(-50%); padding:24px; min-height:auto; height:auto; width:100%; }
#pc-nav-01:checked ~ ul.open-nav { min-width:100px; }
#pc-nav-02:checked ~ ul.open-nav { min-width:300px; }
#pc-nav-03:checked ~ ul.open-nav { min-width:300px; }

}

/* ==================================================================================================== */
/* メイン */
/* ==================================================================================================== */

/* ベース */
main { margin-top:72px; }

@media(min-width:960px) {

/* ベース */
main { margin-top:110px; }

}

/* ==================================================================================================== */
/* 固定要素 */
/* ==================================================================================================== */

/* スマホのみ下部ボタン */
div.bottom-fixed-button a { align-items:center; background-color:var(--wh); border-top:8px solid var(--ye); box-sizing:border-box; display:flex; justify-content:center; position:fixed; bottom:0; height:60px; width:100%; z-index:10; }
div.bottom-fixed-button a img { margin:auto; height:auto; max-width:245px; width:100%; }

@media(min-width:960px) {

/* スマホのみ下部ボタン */
.sp-only { display:none; }

}

/* ==================================================================================================== */
/* フッタ */
/* ==================================================================================================== */

/* ベース */
footer { padding:38px 0 76px 0; overflow-x:clip; position:relative; z-index:1; }
footer::before, footer::after { overflow:hidden; }
footer::before { aspect-ratio:1/1; border-radius:200px 0 0 0; background-color:var(--bl); content:''; display:inline-block; position:absolute; right:-120px; top:-100px; height:100px; width:270px; z-index:-1; }
footer::after { aspect-ratio:1000/1204;; background-size:contain; background-position:center; background-repeat:no-repeat; background-image:url(../img/footer/footer-illust.png); content:''; display:inline-block; position:absolute; top:-80px; right:20px; height:auto; width:100px; z-index:1; }
footer div.flex { flex-direction:column; }

/* マップ */
div.map-container, div.map-container iframe { aspect-ratio:390/192; height:auto; width:100%; }
div.map-container { overflow:hidden; position:relative; margin-bottom:38px; max-width:100%; z-index:1; }
div.map-container::before { background-color:var(--bl); content:''; clip-path:ellipse(49% 50% at 50% 50%); display:inline-block; position:absolute; bottom:-120px; right:-100px; height:212px; width:269px; }

/* 見出し */
footer h2 { font-size:20px; font-weight:900; margin:0 20px; margin-bottom:16px; }
footer h2.access-title { color:var(--pi); text-align:center; margin-bottom:40px; }
footer h2.access-title::after { display:none; }

/* アドレス部分 */
footer address { font-size:16px; font-weight:400; line-height:24px; margin:0 20px; margin-bottom:16px; }
footer address span.tel { margin-right:24px; }
footer address span.tel::before, footer address span.fax::before { background-size:contain; background-position:center; background-repeat:no-repeat; content:''; display:inline-block; margin-right:4px; vertical-align:middle; height:24px; width:24px; }
footer address span.tel::before { background-image:url(../img/footer/footer-tel.svg); }
footer address span.fax::before { background-image:url(../img/footer/footer-fax.svg); }

/* リンク集 */
div.footer-box ul { display:none; }

/* コピーライト */
p.copy { font-size:10px; font-weight:400; text-align:center; }

@container(max-width:384px) {

/* アドレス部分 */
footer address { font-size:14px; }

}

@media(min-width:960px) { 

/* ベース */
footer { padding:38px 0 16px 100px; }

}

@container(min-width:960px) { 

/* ベース */
footer::before { aspect-ratio:auto; border-radius:400px 0 0 0; right:-150px; top:-200px; height:200px; width:500px; }
footer::after { top:-150px; right:50px; height:auto; width:250px; z-index:1; }
footer address.center { text-align:left; margin:0 0 16px 0; }
footer div.flex { align-items:flex-start; flex-direction:row; gap:24px; justify-content:flex-start; margin:0; width:100%; }
footer div.flex ul.flex { gap:40px; }

/* 見出し */
footer h2 { font-size:32px; }
footer h2.access-title { font-size:34px; letter-spacing:6.8px; }

/* リンク集 */
div.footer-box ul { display:flex; }

/* コピーライト */
p.copy { margin-top:16px; }

}