/* -------------------------------------------------- */
/* 汎用設定 */
/* -------------------------------------------------- */

/* カラーパレット */
:root {
--bk:#141414;
--bl:#1068c1;
--bl-2:#b5d9e9;
--bl-3:#f1fbff;
--gr:#d4f28f;
--gr-2:#7de2af;
--gr-3:#b6e928;
--gr-4:#c0db88;
--pi:#e298bd;
--wh:#fff;
}

/* 色 */
.color-bl { color:var(--bl); }

/* 背景画像設定 */
.back-config::before, .back-config::after { content:''; }
.back-config, .back-config::before, .back-config::after { background-repeat:no-repeat; background-position:center center; background-size:contain; display:inline-block; }

/* フレックス縦並び */
.flex.flex-column { flex-direction:column; }
 
/* ボタンホバー */
.h-button img { transition:.3s; opacity:1;}
.h-button:hover img { transition:.3s; opacity:0; }

/* -------------------------------------------------- */
/* フォント設定 */
/* -------------------------------------------------- */

/* ベース */
html, body, h1, h2, h3, h4, p, ul li, dt, dd, table tr td, time, address {
color:var(--bk);
font-family:"Poppins", sans-serif;
font-optical-sizing:auto;
font-style:normal;
font-weight:500;
line-height:32px;
}

/* -------------------------------------------------- */
/* 桜エフェクト（全頁） */
/* -------------------------------------------------- */

/* ベース */
div.sakura { box-sizing:border-box; overflow:hidden; pointer-events:none; position:fixed; height:100vh; width:100%; z-index:2; }

/* 花弁設定 */
div.sakura span { aspect-ratio:1/1; position:absolute; display:block; height:15px; width:15px; z-index:999; } 
.sakura-1 { background-image:url('../img/effect/sakura-1.png'); }
.sakura-2 { background-image:url('../img/effect/sakura-2.png'); }
.sakura-3 { background-image:url('../img/effect/sakura-3.png'); }

/* -------------------------------------------------- */
/* ヘッダ */
/* -------------------------------------------------- */

/* ロゴ */
header h1 { align-items:center; display:flex; flex-direction:column; gap:25px; position:absolute; top:30px; left:25px; z-index:2; }
header h1 img.main-logo { height:84px; width:74px; }
header h1 img.sub-logo { aspect-ratio:1/1; height:auto; width:60px; }

@container( min-width:769px ) {

/* ロゴ */
header h1 { top:52px; left:5vw; }
header h1 img.main-logo { aspect-ratio:244/276; height:auto; width:150px; }
header h1 img.sub-logo { width:120px; }

}

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

/* ハンバーガーメニュー */
.global-nav__toggle { cursor:pointer; position:fixed; top:20px; right:20px; height:35px; width:35px; z-index:1000; }
.global-nav__toggle span.global-nav__toggle-line, .global-nav__toggle span.global-nav__toggle-line::before, .global-nav__toggle span.global-nav__toggle-line::after { background-color:var(--bk); display:inline-block; transition:.3s; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:1px; width:35px; }
.global-nav__toggle span.global-nav__toggle-line::before, .global-nav__toggle span.global-nav__toggle-line::after { content:''; }
.global-nav__toggle span.global-nav__toggle-line::before { transform:translate(-50%,calc(-50% + 12.5px)); }
.global-nav__toggle span.global-nav__toggle-line::after { transform:translate(-50%,calc(-50% - 12.5px)); }

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

/* ナビゲーション */
.global-nav__list { background-color:var(--wh); box-sizing:border-box; overflow:hidden; transition:.3s; position:fixed; top:0; left:0; min-height:0; height:0; width:100vw; z-index:999; }
.global-nav__list li { font-size:18px; font-weight:600; }
.global-nav__list li ul.in-nav { padding-left:12.5px; }

/* 展開 */
#nav-toggle:checked ~ .global-nav__list { gap:10px; transition:.3s; padding:40px; min-height:100%; height:100vh; }

@container(min-width:1000px) {

/* ハンバーガーメニュー */
.global-nav__toggle { display:none; }

/* ナビゲーション */
.global-nav__list.flex.flex-column { background-color:rgba(255,255,255,0.5); border-radius:50px; flex-direction:row; gap:20px; justify-content:center; overflow:visible; transition:0s; position:absolute; top:40px; right:0; left:auto; padding:5px 30px; min-height:auto; height:auto; width:auto; }
.global-nav__list li { position:relative; }
.global-nav__list li a:hover { color:var(--wh); }
.global-nav__list li ul.in-nav { display:flex; flex-direction:column; gap:10px; padding-left:0; position:absolute; top:30px; left:0; width:100%; }
.global-nav__list li ul.in-nav li a:hover { color:var(--bk); }

}

@container(min-width:1000px) {

  /* 親メニューに矢印を付与 */
  .global-nav__list > li {
    padding-right: 18px;
  }

  .global-nav__list > li:has(ul.in-nav)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid var(--bk);
    border-bottom: 2px solid var(--bk);
    transition: .2s;
  }

  /* ホバー時に矢印を下向き → 上向きっぽく反転 */
  .global-nav__list > li:has(ul.in-nav):hover::after {
    transform: translateY(-50%) rotate(225deg);
  }

  /* サブメニュー初期状態（非表示） */
  .global-nav__list li ul.in-nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: all .25s ease;
    background-color: rgba(255,255,255,0.98);
    border: 1px solid #e5e5e5;
    padding: 12px 15px;
    width: max-content; 
    white-space: nowrap;
    z-index: 1000;
  }

  /* ホバーで表示 */
  .global-nav__list > li:hover > ul.in-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) translateX(-20px);
  }

  /* サブメニュー内リンク styling（任意で調整） */
  .global-nav__list li ul.in-nav li {
    font-size: 16px;
    font-weight: 400;
    padding: 4px 0;
  }
}

/* -------------------------------------------------- */
/* ファーストビュー */
/* -------------------------------------------------- */

/* ベース */
.fv { aspect-ratio:7/10; background-image:linear-gradient(rgba(111, 146, 181, 0.60), rgba(111, 146, 181, 0.60)), url('../img/fv/fv-back.jpg'); background-size:cover; position:relative; height:auto; width:100vw; z-index:1; }

/* ボタン */
ul.fv-btn { position:absolute; bottom:0; left:0; z-index:2; }
ul.fv-btn li a { align-items:center; box-sizing:border-box; border:1px solid var(--bk); padding:10px 0; width:100vw; }
ul.fv-btn li a picture { border-right:1px solid var(--bk); box-sizing:border-box; text-align:center; width:25%; }
ul.fv-btn li a picture:nth-child(2) { border-right:none; width:75%; }
ul.fv-btn li a picture img { height:auto; max-width:100%; }
ul.fv-btn li .icon-1 { aspect-ratio:20/30; height:auto; width:20px; }
ul.fv-btn li .icon-2 { aspect-ratio:1/1; height:auto; width:25px; }
ul.fv-btn li .txt-1 { object-fit:contain; height:14px; width:auto; }
ul.fv-btn li.pink a { background-color:var(--pi); }
ul.fv-btn li.green a { background-color:var(--gr-2); border-top:none; }
ul.fv-btn li.pc-only { display:none; }

/* 見出し */
.fv h2.page-title { color:var(--wh); font-size:36px; font-weight:600; text-shadow:0 4px 8px rgba(0, 0, 0, 0.25); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); max-width:80%; }

@container( min-width:429px ) {

/* ベース */
.fv { aspect-ratio:3/4; }

/* 見出し */
.fv h2.page-title { font-size:65px; text-align:left; top:60%; max-width:1000px; width:100%; }

}

@container( min-width:769px ) {

/* ベース */
.fv { aspect-ratio:1280/480; height:480px; }

/* ボタン */
ul.fv-btn { flex-direction:column; transform:translate(0,-50%); top:80%; right:7.5vw; bottom:auto; left:auto; }
ul.fv-btn li:nth-child(3) { margin-bottom:30px; }
ul.fv-btn li.pink, ul.fv-btn li.green { display:none; }
ul.fv-btn li.pc-only { display:block; }
ul.fv-btn li.pc-only a { border:none; width:auto; }
ul.fv-btn li.pc-only a img { height:auto; max-width:115px; }

}

.soon { font-size:36px; font-weight:700; text-align:center; padding:10vh 0; }

/* -------------------------------------------------- */
/* 記事 */
/* -------------------------------------------------- */

/* ベース */
.post { padding:24px; }

/* 見出し */
.fv h2.page-title.single-title { text-align:center; }
.post h2 { font-size:24px; font-weight:600; line-height:1.6; margin-bottom:16px; }
.post p.time { margin-bottom:16px; }

/* テキスト */
.post p { line-height:2; }

@container(min-width:769px) {

/* ベース */
.post { padding:40px 0; margin:auto; max-width:60vw; width:100%; }

/* 見出し */
.post h2 { font-size:30px; }
.post p.time { margin-bottom:24px; }

}

/* -------------------------------------------------- */
/* フッター */
/* -------------------------------------------------- */

/* ベース */
footer { background-attachment:fixed; background-image:url('../img/footer/footer-back-sp.jpg'); background-position:center; background-repeat:no-repeat; background-size:cover; padding:80px 30px 20px 30px; }

/* 見出し */
footer h2 { align-items:center; background-color:var(--wh); color:var(--bl); font-size:25px; font-weight:600; justify-content:center; height:50px; width:190px; }

/* コンテンツ */
footer div.footer-content.flex.flex-column { gap:48px; margin-bottom:100px; }
footer div.footer-content address { font-size:16px; gap:21px; }

/* アイコン */
address .flex { align-items:center; display:flex; gap:10px; justify-content:flex-start; padding-left:50px; position:relative; }
address .address::before, address .e-mail::before, address .tel::before { position:absolute; top:50%; left:0; transform:translateY(-50%); width:50px; }
address .address::before { aspect-ratio:35/25; background-image:url('../img/footer/icon-pin.png'); height:35px; width:25px; }
address .e-mail::before { aspect-ratio:29/36; background-image:url('../img/footer/icon-mail.png'); height:29px; width:36px; }
address .tel::before { aspect-ratio:1/1; background-image:url('../img/footer/icon-tel.png'); height:33px; width:33px; }

/* デコレーション */
ul.f-deco { align-items:center; gap:20px; justify-content:center; pointer-events:none; margin-bottom:45px; }
ul.f-deco li { flex:1; }
ul.f-deco li img { height:auto; max-width:100%; width:100%; }
ul.f-deco li:nth-child(1) { order:3; }
ul.f-deco li:nth-child(2) { display:none; }
ul.f-deco li:nth-child(4) { order:1; }
ul.f-deco li:nth-child(5) { display:none; }

/* コピーライト */
.copy { font-size:12px; font-weight:300; }

@container(min-width:1000px) { 

/* ベース */
footer { background-image:url('../img/footer/footer-back-pc.jpg'); padding:190px 0 20px 0; }

/* コンテンツ */
footer div.footer-content.flex.flex-column { flex-direction:row; gap:100px; margin:auto; margin-bottom:160px; max-width:1000px; width:100%; }
footer div.footer-content address { font-size:24px; gap:50px; }

/* デコレーション */
ul.f-deco { gap:100px; margin:auto; margin-bottom:20px; max-width:90vw; width:100%; }
ul.f-deco li:nth-child(1) { order:1; }
ul.f-deco li:nth-child(2) { display:block; }
ul.f-deco li:nth-child(4) { order:4; }
ul.f-deco li:nth-child(5) { display:block; }

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

}