:root{
--brand-blue:#6F90AC;
--brand-mint:#89B99D;
--brand-sage:#97B47E;--radius:4px;
--c1: #6F90AC;
--c2: #89B99D;
--c3: #97B47E;
--ink: #2a5a4b;
--grad1: #6095BA;
--grad2: #6EBA9C;
--grad3: #8FC17F;
--bezier: cubic-bezier(.20,.70,.20,1);
--e-fast: .25s;
--e-mid: .45s;
--e-slow: .85s;
--pair-row-h: 122px;
--pair-row-gap: 16px;
}

/* すべてのタップハイライトを無効化（強力・サイト全体） */
@media (hover: none) and (pointer: coarse){
  a, button, [role="button"]{
    -webkit-tap-highlight-color: transparent;
  }
}



*{
box-sizing:border-box}

body{
margin:0;
font-family:"Roboto",sans-serif;
color:#0a1b1f}

a{
color:#0a1b1f;
text-decoration:none;
margin-top: auto;
margin-bottom: auto;}

a:hover{
opacity:.85}

img{
max-width:100%;
height:auto}

.container{
width:min(1200px,92%);
margin-inline:auto}

.btn{
display:inline-flex;
padding:.75rem 1rem;
border-radius:var(--radius);
border:1px solid transparent;background:linear-gradient(135deg,#6F90AC 0%,#89B99D 50%,#97B47E 100%);
color:#fff;
font-weight:600}

.btn--outline{
background:#fff;
border-color:var(--brand-mint);
color:var(--brand-mint)}

.header{
position:sticky;
top:0;
z-index:50;
background:#fff;
border-bottom:1px solid #e6eef0}

.header__inner{
display:flex;
align-items:center;
justify-content:space-between;
padding:.6rem 1rem}

.nav{
display:flex;
gap:1rem}

.hero{
position:relative;
min-height:52svh;
display:grid;
place-items:center;
color:#fff}

.hero::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(111,144,172,.85),rgba(137,185,157,.6));
mix-blend:multiply}

.hero__copy{
position:relative;
text-align:center;
font-size:clamp(24px,3.4vw,40px);
font-weight:800}

.section{
padding:56px 0}

.grid{
display:grid;
gap:24px}

.grid--3{
grid-template-columns:repeat(3,1fr)}

.grid--2{
grid-template-columns:repeat(2,1fr)}

.card{
border-radius:16px;
overflow:hidden;
box-shadow:0 8px 24px rgba(0,0,0,.08);
background:#fff;
transition:transform .2s,box-shadow .2s}

.card:hover{
transform:translateY(-2px) scale(1.02);
box-shadow:0 12px 30px rgba(0,0,0,.12)}

.card__body{
padding:16px}

.badge{
display:inline-block;
padding:.25rem .5rem;
border-radius:999px;
background:#eef6f2;
color:#2a6f4f;
font-size:.8rem;
font-weight:700}

.footer{
background:linear-gradient(135deg,#6F90AC 0%,#89B99D 50%,#97B47E 100%);
color:#fff;
margin-top:56px}

.footer .container{
padding:40px 0}

.breadcrumb{
display:flex;
flex-wrap:wrap;gap:.25rem .5rem;
font-size:.9rem;
margin:12px 0}

.breadcrumb a{
color:#275e6f}

@media (max-width:1024px){
.grid--3{
grid-template-columns:repeat(2,1fr)}

}

@media (max-width:767px){
.grid--2,.grid--3{
grid-template-columns:1fr}

span.tab-en {font-size: 1.2em!important;}	

.header__menuBtn{
display:inline-flex}

.nav{
display:none;
position:fixed;
right:0;
top:0;
width:min(86%,360px);
height:100dvh;
background:#fff;padding:20px;box-shadow:-8px 0 24px rgba(0,0,0,.12)}

.nav.is-open{
display:flex;
flex-direction:column}

}

/* === Competition list UI === */

.comp-list{
display:grid;
gap:22px}

.comp-card{
border:3px solid #222;
border-radius:14px;
overflow:hidden;
background:#fff}

.comp-card__inner{
display:grid;
grid-template-columns:220px 1fr;gap:0;
align-items:stretch;
color:inherit;
text-decoration:none}

.comp-card__thumb{
background:#eee;
display:flex;
align-items:center;
justify-content:center}

.comp-card__thumb img{
width:100%;
height:100%;
object-fit:cover}

.comp-card__ph{
width:100%;
height:100%;
display:grid;
place-items:center;
background:#e8ecef}

.comp-card__ph span{
display:block;
width:72px;
height:52px;
border:2px solid #fff;
border-radius:6px;
opacity:.7}

.comp-card__body{
padding:16px}

.comp-card__head{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap}

.comp-card__price{
font-weight:900;
font-size:1.2rem}

.comp-card__price .dash{
opacity:.7}

.comp-card__cat{
margin-left:auto;
border:2px solid #222;
border-radius:999px;
padding:4px 12px;
font-weight:800;
background:#fff}

.comp-card__title{
margin:.25rem 0 .4rem 0;
font-size:1.05rem}

.comp-card__date{
font-weight:700;
margin-bottom:.3rem}

.comp-card__lead{
color:#333;}

/* single */
.comp-single__head{
margin-bottom:14px}

.comp-single__title{
margin:0 0 6px 0}

.comp-single__meta{
display:flex;
gap:8px;
flex-wrap:wrap;
list-style:none;
margin:8px 0 0 0;
padding:0}

.comp-single__meta .cat{
border:1px solid #222;
border-radius:999px;
padding:4px 10px;
font-weight:800}

.comp-single__meta .date,.comp-single__meta .price{
font-weight:700}

.comp-single__thumb{
margin:12px 0}

.comp-single__outline{
margin-top:12px}

@media(max-width:768px){
.comp-card__inner{
grid-template-columns:120px 1fr}

}

/* ====== PC header layout ====== */
.hg-grad{
background:linear-gradient(135deg, #6095BA 0%, #6EBA9C 50%, #8FC17F 100%)}

.hg-header{
position:sticky;
top:0;
z-index:1000;
color:#fff;
display:flex;
}

/* row */
.hg-row{
display:flex;gap:2%;
padding:2% 0 1.5% 0;
width:80%;
margin-left:15%}

.hg-flex-section{
width:100%}

/* logo */
.hg-logo{
margin-top:auto;
margin-bottom:auto;
width:30%}

.hg-logo a{
display:flex;
align-items:center;
gap:12px;color:#fff;
text-decoration:none}

.hg-logo img{
width:100%;
margin-left:10%;
margin-bottom:5%}

/* pill nav */
.hg-pill{
display:flex;
align-items:center;
justify-content:center;
gap:0;
border:1px solid rgba(255,255,255,.85);
border-radius:999px;width:100%;}

.hg-pill a,.hg-pill__parent{
color:#fff;
text-decoration:none;
padding:1% 3%;
border-radius:999px;
position:relative;
white-space:nowrap;
text-align:center;
font-size:1.1em;
font-family:"Roboto",sans-serif;transition:transform .18s ease,background .2s ease}

.hg-pill a:hover,.hg-pill__parent:hover{
transform:translateY(-1px);}

.hg-pill a + a:before,.hg-pill__parent a + a:before{
content:"";
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:1px;
height:18px;
background:rgba(255,255,255,.35)}

button.hg-pill__parent:after{
content:"";
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
width:1px;
height:18px;
background:rgba(255,255,255,.35)}

.hg-pill small,.hg-pill__parent small{
display:block;
opacity:.95;
margin-top:7px;
font-size: .8em;
font-weight: 500;}
/* ===== PC: pill ナビ共通（アンカーと親ボタンを同一ルックに） ===== */
.hg-pill{
display:flex;align-items:center; flex-wrap:wrap;
}
/* リセット：buttonをaと同じ見た目に */
.hg-pill__parent{
appearance:none; -webkit-appearance:none;
background:none; border:0; font:inherit; color:inherit; padding:0; margin:0;
cursor:pointer;
}

/* a と 親ボタンに同じスタイルを付与 */
.hg-pill a,
.hg-pill .hg-pill__parent{
--padY:.6rem; --padX:.9rem;align-items:center;padding:var(--padY) var(--padX);border-radius:999px; line-height:1; font-weight:600;text-decoration:none; color:inherit; background:transparent;font-size: 1.1em;
}
.hg-pill a small,
.hg-pill .hg-pill__parent small{
  display:block; font-size:.68em; opacity:.75; line-height:1.1;
}

/* ▼アイコン（必要なら残す）。a風に控えめ表示 */
.hg-pill .hg-pill__parent .caret{
  margin-left:.15rem; transform:translateY(1px); opacity:.85;
}

/* ===== PC: ドロップダウン ===== */
.hg-submenu{position:absolute;left:0; top:calc(73%);width: 320%;padding:8px!important; border-radius:12px;backdrop-filter:saturate(1.2) blur(6px);box-shadow:0 12px 28px rgba(0,0,0,.2);opacity:0; visibility:hidden; transform:translateY(8px);transition:.18s easet;background: rgba(12, 18, 12, .2);font-size:1em!important;}
.has-children{ position:relative; }
.has-children.is-open > .hg-submenu,
.has-children:hover   > .hg-submenu{ opacity:1; visibility:visible; transform:none; }

.hg-submenu li a{
display:flex!important; align-items:center!important; justify-content:space-between!important;color:#fff;padding:.7rem .9rem!important; border-radius:10px;text-decoration:none;
}
.hg-submenu li a:hover{ background:rgba(255,255,255,.08); }

/* ===== SP: リスト内のトグルも他リンクと同一ルックに ===== */
#hg-spmenu .hg-spmenu__item{ border-top:1px solid rgba(255,255,255,.15); }
#hg-spmenu .hg-spmenu__item a,
#hg-spmenu .hg-spmenu__toggle{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  background:none; border:0; color:#fff; padding:16px 4px; text-align:left;
  text-decoration:none; font:inherit;
}
#hg-spmenu .hg-spmenu__item a:hover,
#hg-spmenu .hg-spmenu__toggle:hover{ opacity:.9; }

#hg-spmenu .hg-submenu[hidden]{ display:none; }
#hg-spmenu .hg-submenu{ padding:4px 0 10px; }
#hg-spmenu .hg-submenu li a{
display:flex; justify-content:space-between; align-items:center;
padding:12px 4px; color:#fff; text-decoration:none;
}
/* language dropdown (PC右上) */
.hg-lang{
position:absolute;
top:0;
right:1%}

.lang-btn{
display:inline-flex;
align-items:center;
gap:.5rem;
padding:.1rem .5rem .4rem;
border-radius:0 0 10px 10px;
border:0;
background:#fff;
color:#7da570;
font-weight:800;
font-family:"Roboto",sans-serif}

.lang-btn .caret{
transition:transform .2s}

.hg-lang.is-open .lang-btn .caret{
transform:rotate(180deg)}

.lang-menu{
position:absolute;
right:0;
top:calc(100% + 8px);
min-width:180px;
background:rgba(0,0,0,.55);
backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25);
border-radius:12px;
padding:6px;
display:none;
z-index:1100}

.hg-lang.is-open .lang-menu{
display:block}

.lang-item button{
width:100%;
text-align:left;
background:transparent;
border:0;color:#fff;
padding:10px 12px;
border-radius:8px;
font-weight:700}

.lang-item button:hover,.lang-item button:focus{
background:rgba(255,255,255,.12);
outline:0}

/* 2nd row: TEL center + CTAs right */
.hg-row2{
display:flex;
grid-template-columns:1fr minmax(420px,auto);
align-items: center;
gap: 16px;
padding-bottom: 1%;
justify-content: end;
width: 100%;
margin-left: -5%;
}

.hg-tel{
justify-self:center;
font-weight:600;
letter-spacing:.02em;
font-size:1.4em;
font-family:"Roboto",sans-serif;}

.hg-tel a{
color:#fff;}

.hg-tel svg{
margin-right:0.3em;}

.hg-ctas{
justify-self:end;
display:flex;
gap:16px;
font-family:"Roboto",sans-serif}

.hg-cta{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.6rem;
min-height:44px;
padding:.65rem 1.1rem;
border-radius:999px;
border:1px solid rgba(255,255,255,.95);
color:#fff;
font-weight:500;
font-family:"Roboto",sans-serif;
font-size: 1.0em;}

.hg-cta--solid{
color:#fff}

/* ====== SP overlay menu ====== */
.hg-menuBtn{
display:none;
background:transparent;
border:0;
color:#fff;
font-weight:800}

@media (max-width:1023px){
.hg-row{
grid-template-columns:1fr auto auto}

.hg-row2{display:none}

}

@media (max-width:767px){
.hg-pill{
display:none}

.hg-lang{
display:none}

.hg-menuBtn{display:inline-flex}

}

.hg-spmenu{position:fixed;
inset:0;
z-index:10000;
color:#fff;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .35s ease,visibility 0s linear .35s}

.hg-spmenu.is-open{
opacity:1;
visibility:visible;
pointer-events:auto;
transition:opacity .35s ease}

.hg-spmenu__inner{
min-height:100dvh;
padding:22px;
display:flex;
flex-direction:column;
transform:translateY(14px);
opacity:0;
transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s}

.hg-spmenu.is-open .hg-spmenu__inner{
transform:none;
opacity:1}

.hg-spmenu__head{
display:flex;
align-items:center;
gap:12px}

.hg-spmenu__logo{
display:inline-flex;
align-items:center}

.hg-spmenu__close{
margin-left:auto;
appearance:none;
border:0;
background:transparent;
color:#fff;
font-size:34px;
line-height:1}

/* SP言語ドロップダウン（ロゴ横） */
.hg-spmenu__langbtn{
position:relative}

.hg-spmenu__langbtn .lang-btn{
padding:.32rem .7rem;
border-radius:999px;
border:1px solid rgba(255,255,255,.85);
font-weight:800;
display:inline-flex;
align-items:center;
gap:.5rem}

.hg-spmenu__langbtn .lang-btn .caret{
transition:transform .2s}

.hg-spmenu__langbtn.is-open .lang-btn .caret{
transform:rotate(180deg)}

.hg-spmenu__langbtn .lang-menu{
position:absolute;
left:0;
top:calc(100% + 8px);
background:rgba(0,0,0,.55);
border:1px solid rgba(255,255,255,.25);
border-radius:12px;
padding:6px;
display:none;
z-index:1101;
backdrop-filter:blur(6px)}

.hg-spmenu__langbtn.is-open .lang-menu{
display:block}

/* メニューリストのスタガー表示 */
.hg-spmenu__list{
margin:18px 0 0px;
display:flex;
flex-direction:column;
padding: 1em;}

.hg-spmenu__list>li{
opacity:0;
transform:translateX(-12px)}

.hg-spmenu.is-open .hg-spmenu__list>li{
animation:humItem .45s cubic-bezier(.2,.7,.2,1) forwards}

.hg-spmenu.is-open .hg-spmenu__list>li:nth-child(1){
animation-delay:.08s}

.hg-spmenu.is-open .hg-spmenu__list>li:nth-child(2){
animation-delay:.12s}

.hg-spmenu.is-open .hg-spmenu__list>li:nth-child(3){
animation-delay:.16s}

.hg-spmenu.is-open .hg-spmenu__list>li:nth-child(4){
animation-delay:.20s}

.hg-spmenu.is-open .hg-spmenu__list>li:nth-child(5){
animation-delay:.24s}

.hg-spmenu.is-open .hg-spmenu__list>li:nth-child(6){
animation-delay:.28s}

.hg-spmenu.is-open .hg-spmenu__list>li:nth-child(7){
animation-delay:.32s}

@keyframes humItem{
to{
opacity:1;
transform:none
}

}

.hg-spmenu__item a{
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid rgba(255,255,255,.25);
padding: 0px 6px 10px 6px;
font-weight:500;
font-size:0.9em;
color:#fff;
text-decoration:none}

.hg-spmenu__btm{
margin-top:auto;
display:grid;
margin-bottom:20px;
gap:12px;}

.hg-spmenu__btn{
display:flex;
align-items:center;
justify-content:center;
gap:.6rem;
padding:14px;
border-radius:999px;
border:1px solid #fff;
background:transparent;
color:#fff;
font-weight:500;}

.lang-menu{
border-radius: 5px;
background: #fff;min-width: auto;position: relative;}
	
.lang-item button {
width: 100%;
text-align: left;
background: transparent;
border: 0;
color: #7da570;
padding: 10px 12px;
border-radius: 8px;
font-weight: 500;
text-align: center;
font-family: "Roboto", sans-serif;
}

::marker{
color: transparent;}

/* ============================= */
/* 追加・上書きスタイル（最小変更） */
/* ============================= */

/* ① ハンバーガーアイコン用（MENU→アイコン） */
.hg-menuBtn{
align-items:center;
justify-content:center;
width:44px;
height:44px;
background:transparent;
border:0; color:#fff;
border-radius:8px;
}

.hg-menuBtn svg{
width:31px;
height:31px}

.hg-menuBtn:focus-visible{
outline:2px solid rgba(255,255,255,.7);
outline-offset:2px}

/* 画面読み上げ支援（テキストを視覚的に非表示） */

.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden; clip:rect(0,0,0,0);
white-space:nowrap; border:0;
}

/* ③ Languageボタン：PC/SPの見た目を近づけ（PCをSP寄りへ） */

.hg-lang.is-open .lang-btn .caret,
.hg-spmenu__langbtn.is-open .lang-btn .caret{
transform:rotate(180deg);
}

.hg-lang .lang-menu{
position:relative;
right:0;
top:calc(100% + 8px);
background:#fff;
backdrop-filter:none;
border:1px solid rgba(0,0,0,.08);
border-radius:12px; padding:6px;
}

.hg-spmenu__langbtn .lang-menu{
position:absolute;
left:0;
top:calc(100% + 8px);
background:#fff;
backdrop-filter:none;
border:1px solid rgba(0,0,0,.08);
border-radius:12px;
padding:6px;
}

.hg-lang .lang-menu .lang-item button,
.hg-spmenu__langbtn .lang-menu .lang-item button{
color:#7da570;
font-weight:700;
text-align:center;
font-family:"Roboto",sans-serif;
}

.hg-lang .lang-menu .lang-item button:hover,
.hg-spmenu__langbtn .lang-menu .lang-item button:hover{
background:rgba(0,0,0,.04);
}

@media (min-width:768px){
.comp-head .chip {margin-left: 0!important;
margin-bottom: 0.3em;}
}

@media (min-width:768px) and (max-width:1280px){
.hg-logo{
width:26%}

.hg-pill a,.hg-pill__parent{font-size:.6em!important;}

.hg-pill small,.hg-pill__parent small{font-size:.74em}

.hg-tel{font-size:1.2em}

.hg-cta{min-height: 38px;padding: .0rem .40rem;font-size: .5em;}
	
.hg-ctas {gap: 7px;}
	
a.line-cta-link {width: 80%!important;}
	
.ft-grid{grid-template-columns: 1fr 1fr 1fr!important;}

.lang-btn{transform:scale(.92);}

button.hg-pill__parent.footer-course{font-size: 1em !important;}

.hg-row2{display:flex;}
.hg-row {display: flex;width: 90%;margin-left: 5%;}
	
.ft-pill--stack .ft-pill__main {font-size: 13px;}
.ft-logo {justify-content: start!important;}
}

@media (min-width:768px) and (max-width:1023px){
.hg-submenu_haba{width: 260%;}
.ft-links {margin-left: 4em!important;}
}

@media (min-width:1024px) and (max-width:1280px){
.hg-submenu_haba{width: 160%;}
}

@media (min-width:1281px){
.hg-row {
display: flex;
width: 70%;
margin-left: 25%;
}
}

/* 768px 以上では PCナビ/Language を表示（max-width:768px の非表示を打ち消し） */

@media (min-width:768px){
.hg-pill{
display:flex}

.hg-lang{
display:block}

}

/* 768–1024px：ロゴ/文字をもう一段小さく */

@media (min-width:768px) and (max-width:1024px){
.hg-logo{
width:22%}

.hg-pill a.hg-pill__parent{
font-size:.7em;
padding:.8% 2.2%}

.hg-pill small.hg-pill__parent small{
font-size:.60em}

.hg-tel{
font-size:0.9em}

.hg-cta{
min-height:38px;
padding:.50rem .90rem;
font-size: .60em;}

.lang-btn{
transform:scale(.90)}

}

@media (min-width:1025px) and (max-width:1280px){
.hg-pill a,.hg-pill__parent{
font-size:1em!important;}

.hg-pill a small, .hg-pill .hg-pill__parent small {
display: block;
font-size: .68em;}
}

/* ===== 上書き: スマホ時（〜767px）ロゴを中央、ハンバーガーを右固定、TEL/予約は従来どおり非表示 ===== */

@media (max-width:767px){
.hg-row{
position:relative;
justify-content:center;
width:100%;
margin:0;
padding:12px 16px 8px}

.hg-logo{
position:relative;
left:42%;
transform:translateX(-50%);
width:48%;
margin:0 auto;}

.hg-logo img{
width: 140%;
margin: 0;
max-width: 140%;}

.hg-menuBtn {
position: absolute;
right: 5px;
top: 80%;
transform: translateY(-50%);
display: inline-flex;
margin-top: 6px;}
	
.hg-submenu {
box-shadow: 0 0px 0px;
background: transparent;
width: 100%;
backdrop-filter: none;}
}

/* ---- SP メニュー：アコーディオン（押し下げ） ---- */
#hg-spmenu .hg-spmenu__item.has-children { border-top:1px solid rgba(255,255,255,.15); }
#hg-spmenu .hg-spmenu__toggle{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  background:none; border:0; color:#fff; padding:16px 4px; text-align:left; font:inherit;
}

/* hidden 属性は使わない（JSでheightをアニメ） */
#hg-spmenu .hg-submenu[hidden]{ display:block !important; }

/* 下方向に展開するため、positionはstatic＆高さアニメ */
#hg-spmenu .hg-submenu{
  position:static;
  overflow:hidden;
  height:0;                   /* 初期は閉じる */
  opacity:0;
  margin:0;
  padding:0;                  /* 開いた時にJSでheightアニメ、paddingは常時でもOKなら下で付与 */
  transition: height .28s ease, opacity .2s ease;
}

/* 開いた状態の見た目微調整（余白など） */
#hg-spmenu .hg-spmenu__item.is-open .hg-submenu{
  opacity:1;
  padding:4px 0 10px;
}

/* 小要素 */
#hg-spmenu .hg-submenu li a{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 4px; color:#fff; text-decoration:none;
}

/* 矢印の回転（任意） */
#hg-spmenu .hg-spmenu__toggle svg{ transition:transform .25s ease; }
#hg-spmenu .hg-spmenu__item.is-open .hg-spmenu__toggle svg{ transform:rotate(90deg); }

/* ---- SP: 押し下げ展開の基礎 ---- */
#hg-spmenu .hg-submenu[hidden]{ display:block !important; } /* hiddenを無効化（JSでも除去） */
#hg-spmenu .hg-submenu{
  position:static; margin:0; padding:0; /* 高さアニメ用に初期は余白ゼロ */
}
#hg-spmenu .hg-spmenu__item.is-open .hg-submenu{ padding:4px 0 10px; } /* 開いた時だけ余白 */
#hg-spmenu .hg-spmenu__toggle svg{ transition:transform .25s ease; }
#hg-spmenu .hg-spmenu__item.is-open .hg-spmenu__toggle svg{ transform:rotate(90deg); }

/* ---- オーバーレイ自体を縦スクロール可能に ---- */
#hg-spmenu{
  position: fixed; inset: 0;             /* 全画面オーバーレイ */
  overflow-y: auto;                       /* ← これで中身がスクロール可能に */
  max-height: 100dvh;                     /* 100vhのiOSズレ対策 */
  -webkit-overflow-scrolling: touch;      /* iOS慣性スクロール */
  overscroll-behavior: contain;           /* 背景スクロールを抑止 */
}
#hg-spmenu .hg-spmenu__inner{
  min-height: 100%;
  padding-bottom: env(safe-area-inset-bottom, 16px);
}

/* ---- SPアコーディオン：より滑らかに ---- */
:root{ --ease-c: cubic-bezier(.20,.70,.20,1); }

#hg-spmenu .hg-submenu[hidden]{ display:block !important; } /* hiddenは無効化 */
#hg-spmenu .hg-submenu{
  position: static;
  overflow: hidden;
  height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;                             /* 開いた時だけ付与 */
  will-change: height, opacity;
  transition:
    height .40s var(--ease-c),
    opacity .30s ease;
}
#hg-spmenu .hg-spmenu__item.is-open .hg-submenu{
  opacity: 1;
  padding: 4px 0 10px;
}

#hg-spmenu .hg-spmenu__toggle{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  background:none; border:0; color:#fff; padding:16px 4px; text-align:left; font:inherit;
}
#hg-spmenu .hg-spmenu__toggle svg{ transition: transform .40s var(--ease-c); }
#hg-spmenu .hg-spmenu__item.is-open .hg-spmenu__toggle svg{ transform: rotate(90deg); }

/* モーション弱めたい人向け */
@media (prefers-reduced-motion: reduce){
  #hg-spmenu .hg-submenu{ transition: none; }
  #hg-spmenu .hg-spmenu__toggle svg{ transition: none; }
}

/* --- オーバーレイは縦スクロール可（前回のまま） --- */
#hg-spmenu{
  position:fixed; inset:0;
  overflow-y:auto; max-height:100dvh;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
#hg-spmenu .hg-spmenu__inner{ min-height:100%; padding-bottom:env(safe-area-inset-bottom,16px); }

/* hiddenは無効化（JSでも除去） */
#hg-spmenu .hg-submenu[hidden]{ display:block !important; }

/* 外側は常に同じ余白＝高さ変化は内側のみ */
#hg-spmenu .hg-submenu{
  position:static; margin:0; padding:4px 0 10px;
}

/* 高さアニメの本体（内側ラッパー） */
#hg-spmenu .hg-submenu__wrap{
  overflow:hidden;
  height:0;
  opacity:0;
  will-change:height,opacity;
  transition:
    height .40s cubic-bezier(.20,.70,.20,1),
    opacity .30s ease;
  contain:layout; /* 余計な再レイアウトを隔離 */
}

/* 開いた時にだけフェードイン（高さはJSで伸縮） */
#hg-spmenu .hg-spmenu__item.is-open .hg-submenu__wrap{ opacity:1; }

/* トグルUI（お好みで） */
#hg-spmenu .hg-spmenu__toggle{
width:100%; display:flex; justify-content:space-between; align-items:center;
background:none; border:0; color:#fff; text-align:left; font:inherit;padding: 16px 4px 0px
}
#hg-spmenu .hg-spmenu__toggle svg{ transition:transform .40s cubic-bezier(.20,.70,.20,1); }
#hg-spmenu .hg-spmenu__item.is-open .hg-spmenu__toggle svg{ transform:rotate(90deg); }

@media (prefers-reduced-motion:reduce){
  #hg-spmenu .hg-submenu__wrap, #hg-spmenu .hg-spmenu__toggle svg{ transition:none; }
}



/* ===== フッター上端フェード（白→透過） ===== */

footer.hg-grad{
position:relative;
overflow:hidden;
padding-top: 8em;}

footer.hg-grad::before{
content:"";
position:absolute;
inset:0 0 auto 0;
height:120px;
pointer-events:none;
background:linear-gradient(to bottom,#ffffff 0%,rgba(255,255,255,.82) 40%,rgba(255,255,255,0) 100%);
z-index:0;}

.ft-wrap{
position:relative;
z-index:1;}

div.small-text{
font-size:1em;}

.ft-wrap{
width:min(1200px,92%);
margin-inline:auto;
padding:36px 0 20px}

.ft-grid{
font-family: "Roboto", sans-serif;
display:grid;
gap:28px;
grid-template-columns:1.4fr .9fr .9fr 1fr;
align-items:start;}

.ft-cta{
display:grid;
gap:16px;
align-content:start;}

.ft-pill{
display:flex;
align-items:center;
justify-content:center;
text-align:center;
gap:.6rem;
padding:16px 18px;
border-radius:999px;
border:1px solid rgba(255,255,255,.95);
color:#fff;font-weight:800;}

.ft-pill small{display:block;
font-size:.9rem;
font-weight:700;
opacity:.95;}

.ft-company{font-style:normal;
line-height:1.7;
margin-top: 40px;font-size:.8rem;}

.ft-pill--stack{flex-direction:column;
font-weight:500;
line-height:1.25;
padding-block:14px;}

.ft-pill--stack .ft-pill__main{font-weight:500;}

.ft-links h4{margin:0 0 2px 0;
font-size:1.3em;
font-weight:500;
letter-spacing:.02em;}

.ft-links ul{list-style:none;
margin:0;
padding:0;}

.ft-links ul+ul{margin-top:12px}

.ft-links li{margin: 1em 0 3em;}

.ft-links a{color:#fff;
text-decoration:none}

.ft-links ul{color:#fff;
font-size:0.8em;}

.ft-links small{display:block;
font-size:12px;
opacity:.95;
margin-top:2px}

.ft-logo{display:flex;
justify-content:flex-end;
align-items:end;
height:140%;}

.ft-logo img{max-width:260px;
height:auto;
display:block;}

.ft-bottom{margin-top:2em;
padding:14px 0 12px;
border-bottom:1px solid rgba(255,255,255,.6);
display:flex;
justify-content:space-between;
gap:16px;
flex-wrap:wrap;
font-size:.9rem;
margin-bottom:1em;}

.ft-bottom a{color:#fff!important;text-decoration:none;margin-right:22px}

.ft-bottom a:last-child{margin-right:0}

.ft-bottom small{opacity:.9}


@media (max-width:1023px){
.ft-grid{grid-template-columns:1fr 1fr}

.ft-logo{justify-content:flex-start;margin-top:8px}

.ft-logo img{max-width:220px}

}

@media (max-width:640px){
.ft-grid{grid-template-columns:1fr;}

.ft-bottom{flex-direction:column;align-items:flex-start;}

}
	  
.ft-links{margin-left:6em;}

.telicon{width: 0.8em;
margin-right: 0.5em;
margin-bottom: -0.1em;}

@media (max-width:767px){
.ft-cta,
.ft-links,
.ft-logo {display:none !important;}

.ft-grid{display:block;}

.ft-address{margin-top: 3em;
font-size: 0.8rem;
line-height: 1.8;
font-weight: 400;
color:#fff;}
	

.ft-address a{
color:#fff;
}

footer.hg-grad{padding-top:3em;}

footer.hg-grad::before{height:90px;}

.ft-bottom{gap:8px;
flex-direction:column;
align-items:flex-start; }
}

/* ===== SP追従フッター ===== */
.sp-sticky-footer{display:none;}

@media (max-width:767px){
.sp-sticky-footer{
display:block !important;
position:fixed; z-index:9999;
left:50%;
bottom:0;
transform:translateX(-50%);
width:100%;
transition:opacity .28s ease, transform .28s ease;
}

.sp-sticky-footer__wrap{
display:grid; grid-template-columns:1fr 1fr; gap:12px;
box-shadow:0 8px 24px rgba(0,0,0,.18);
border:1px solid rgba(255,255,255,.35);
background: linear-gradient(135deg, var(--grad1) 0%, var(--grad2) 50%, var(--grad3) 100%);
padding: 10px;
}

.sp-sticky-btn{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
text-align:center;
text-decoration:none; color:#fff;
border:1px solid rgba(255,255,255,.95);
border-radius:999px; padding:10px 14px; font-weight:800;
backdrop-filter:saturate(120%);
}

.sp-sticky-btn__main{font-size: 0.8em;
line-height:1.2;
font-weight: 500;}

.sp-sticky-btn small{font-size:.70rem;
opacity:.95;
font-weight: 400;}

.sp-sticky-btn__tel{display:inline-flex; 
align-items:center;
gap:.45em;
font-size: 0.8em;}

.sp-sticky-btn__tel svg{
width:1rem;
height:1rem; }

.sp-sticky-footer.is-hidden{ opacity:0; pointer-events:none; transform:translateX(-50%) translateY(16px); }

}


/* ========== Header row の1行固定＋崩れ防止 ========== */

/* 1) .hg-row をコンテンツ幅に合わせつつ 100% を上限に */
@media (min-width: 768px){.hg-row{
display: inline-flex;
align-items: center;
gap: clamp(8px, 1.4vw, 20px);
inline-size: fit-content;
width: -moz-fit-content;
width: fit-content;
max-inline-size: 100%;
flex-wrap: nowrap;
white-space: nowrap;
}

.hg-row > *{
flex: 0 0 auto;
min-width: 0;
}


.hg-flex-section{
width: 100%;
display: grid;
grid-auto-rows: auto;
}

.hg-row{
justify-self: end;
margin-left: 0;
margin-right:5%;
}
.hg-row2{ justify-self: start; }

.hg-pill{
display: inline-flex !important;
flex-wrap: nowrap !important;   /* ← 折り返し禁止 */
padding: 0 1em;
}
  /* 子は縮まず1ブロック扱い、テキストは1行 */
  .hg-pill > *{ flex: 0 0 auto; min-width: 0; }
  .hg-pill__item,
  .hg-pill__parent{ white-space: nowrap; }
}