/* ===================================================
汎用
 =================================================== */

/* カラーパレット */
:root {
--bl:#272e9f;
--bk:#333;
--gr:#3bb64f;
--lb:#47bcff;
--hover-bl:#5159e7;
--wh:#fff;
}

/* ロールオーバー処理 */
a.hover-button { background-size:cover; background-position:center; background-repeat:no-repeat; border:none; cursor:pointer; display:inline-block; text-indent:-9999px; overflow:hidden; }

/* ===================================================
フォント
 =================================================== */

 /* フォント基礎設定 */
html, h1, h2, h3, h4, p, li, dt, dd, td, span, a { color:var(--bk); font-family:"Noto Sans JP", sans-serif; font-optical-sizing:auto; font-style:normal; text-align:justify; }

/* ===================================================
ナビゲーション
 =================================================== */

/* ハンバーガーメニュー */
nav.main-nav input { border:0; padding:0; position:absolute; margin:-1px; overflow:hidden; left:-9999px; height:1px; width:1px; }
label.hamburger-menu { align-items:center; background-color:var(--bl); border-radius:50%; cursor:pointer; flex-direction:column; gap:10px; display:flex; justify-content:center; position:fixed; top:calc( 80px / 2 ); right:12px; transform:translateY(-50%); height:48px; width:48px; z-index:100; }
label.hamburger-menu span.line, label.hamburger-menu span.line::before, label.hamburger-menu span.line::after { background-color:var(--wh); border-radius:2px; display:block; transition:.3s; height:2px; width:26px; }
label.hamburger-menu span.line { position:relative; }
label.hamburger-menu span.line::before, label.hamburger-menu span.line::after { content:''; position:absolute; }
label.hamburger-menu span.line::before { transform:translateY(-8px); }
label.hamburger-menu span.line::after { transform:translateY(9px); }

/* 動かす */
#nav-checkbox:checked ~ label.hamburger-menu span.line { transition:.3s; background-color:transparent; }
#nav-checkbox:checked ~ label.hamburger-menu span.line::before { transition:.3s; transform:translateY(0) rotate(45deg); transform-origin:center; }
#nav-checkbox:checked ~ label.hamburger-menu span.line::after { transition:.3s; transform:translateY(0) rotate(-45deg); transform-origin:center; }

/* ナビ */
ul.main-nav-list { align-items:flex-start; background-color:var(--bl); flex-direction:column; gap:24px; transition:.3s; padding:40px; position:fixed; top:80px; visibility:hidden; opacity:0; overflow:hidden; max-height:0; width:100vw; z-index:99; }
ul.main-nav-list li { font-size:18px; font-weight:600; letter-spacing:-0.36px; line-height:30px; }
ul.main-nav-list li a { color:var(--wh); }
ul.main-nav-list li.pc { display:none; }

/* 動かす */
#nav-checkbox:checked ~ ul.main-nav-list { transition:.3s; opacity:1; visibility:visible; max-height:calc( 100vh - 80px ); }

@media( min-width:960px ) {

/* ハンバーガーメニュー */
label.hamburger-menu { display:none; }

/* ナビ */
ul.main-nav-list { align-items:center; background-color:transparent; flex-direction:row; gap:40px; transition:.3s; padding:40px; position:static; visibility:visible; opacity:1; max-height:100%; width:auto; }
ul.main-nav-list li { font-size:20px; text-align:center; line-height:34px; }
ul.main-nav-list li a { color:var(--bl); }
ul.main-nav-list li.sp { display:none; }
ul.main-nav-list li.pc { align-items:center; display:flex; justify-content:center; }

/* お問い合わせボタン */
ul.main-nav-list li a.hover-button { aspect-ratio:168/58; background-image:url(../img/footer/button-contact.svg); height:auto; max-width:168px; width:168px; }
ul.main-nav-list li a.hover-button:hover { background-image:url(../img/footer/button-contact-ov.svg); }

}

@media(min-width:960px) and (max-width:1131px) { ul.main-nav-list { gap:15px; } ul.main-nav-list li { font-size:14px; } }
@media(min-width:1132px) and (max-width:1185px) { ul.main-nav-list { gap:20px; } ul.main-nav-list li { font-size:16px; } }
@media(min-width:1186px) and (max-width:1240px) { ul.main-nav-list { gap:30px; } ul.main-nav-list li { font-size:16px; } }
@media(min-width:1241px) and (max-width:1290px) { ul.main-nav-list { gap:40px; } ul.main-nav-list li { font-size:18px; } }

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

/* ベース */
header { align-items:center; justify-content:space-between; transition:.3s; padding:0; width:100%; }

/* タイトル */
header h1 { position:absolute; top:calc( 80px / 2 ); transform:translateY(-50%); left:12px; z-index:10; }

/* ヘッダ動かす */
header:has(#nav-checkbox:checked) { background-color:var(--bl); transition:.3s; position:fixed; top:0; height:80px; width:100%; z-index:50; }

@media( min-width:960px ) {

/* ベース */
header { background-color:rgba(255,255,255,0.7); backdrop-filter:blur(2px); padding:0 40px; position:fixed; height:74px; width:100%; z-index:100; }

/* タイトル */
header h1 { position:static; transform:translateY(0); }

}

/* ===================================================
コンテンツ
 =================================================== */

/* ファーストビュー */
div.first-view { aspect-ratio:375/274; height:auto; width:100%; }

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

/* 共通項 */
footer h2, .copy, footer address p, a.button-contact, nav.footer-nav ul li { color:var(--wh); }
footer h2, div.footer-map iframe, footer address p, a.button-contact, nav.footer-nav ul { margin-bottom:16px; }
.copy, nav.footer-nav ul li { font-size:10px; }
a.button-contact, footer address p.address { line-height:32px; }

/* 全体 */
footer { background-image:linear-gradient(270deg, #46AEEB 5.00%, #2B32B2 95.00%); padding:16px 0; position:relative; z-index:1; }
footer::before { background-image:linear-gradient(270deg, #46AEEB 5.00%, #2B32B2 95.00%); content:''; clip-path:ellipse(70% 92% at 64% 100%); display:block; position:absolute; top:-70px; height:70px; width:100%; }

/* フッタ見出し */
footer h2 { font-size:32.312px; font-weight:800; height:10px; }
footer h2 img { transform:translateY(-50px); }
footer h2.footer-title-pc { display:none; }

/* Googlemap */
div.footer-map iframe { aspect-ratio:39/28; width:100%; }

/* 連絡先 */
footer address br { display:none; }
footer address p.address { font-size:16px; font-weight:700; }
footer address p.tel a::before { background-image:url(../img/footer-tel-icon.svg); background-size:cover; background-repeat:no-repeat; background-position:center; content:''; display:inline-block; margin-right:8px; height:22px; width:22px; vertical-align:middle; }

/* お問い合わせボタン */
footer p a.hover-button { background-image:url(../img/footer/button-contact.svg); height:48px; width:144px; }
footer p a.hover-button:hover { background-image:url(../img/footer/button-contact-ov.svg); }

/* フッターナビ */
nav.footer-nav { margin-top:16px; }
nav.footer-nav ul { align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; }
nav.footer-nav ul li { font-weight:400; line-height:12px; }
nav.footer-nav ul li::before { content:'＞'; }

/* コピーライト */
.copy { font-weight:100; line-height:24px; }

@media(min-width:960px) { 

/* 全体 */
footer div.footer-all-content { align-items:stretch; display:flex; flex-direction:row-reverse; justify-content:center; padding:0 10vw 50px 10vw; }
footer::before { top:-250px; height:250px; width:100%; }
div.footer-content p.center { text-align:left; }

/* 配置 */
div.footer-content { display:flex; flex-direction:column; justify-content:space-between; width:20%; }
div.footer-map { width:80%; }

/* フッタ見出し */
footer h2.footer-title-sp { display:none; }
footer h2.footer-title-pc { display:block; }
footer h2.center { text-align:left; height:auto; }
footer h2 img { transform:translateY(0); height:auto; width:241px; }

/* Googlemap */
div.footer-map { padding-left:150px; }
div.footer-map iframe { aspect-ratio:902.74/495.97; }

/* 連絡先 */
footer address p.address, footer address p.tel { text-align:left; }
footer address br { display:inline; }
footer address p.tel { font-size:24px; font-weight:600; }
footer address p.tel a::before { height:32px; width:32px; }

/* お問い合わせボタン */
footer p a.hover-button { height:58px; width:168px; }

/* フッターナビ */
nav.footer-nav { margin-top:16px; }
nav.footer-nav ul { align-items:flex-start; flex-direction:column; }
nav.footer-nav ul li { font-size:16px; line-height:200%; }

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

}