/* ==========================================================================
   StarOcean 共通ヘッダー／フッター 試作（グランピング・アクティビティの2サイトを明示）
   --------------------------------------------------------------------------
   ・2つのサイトを「色＋アイコン＋動詞（泊まる／遊ぶ）」で区別する切替タブをヘッダー中央に置く
   ・表示中のサイトは塗りつぶし、もう一方は枠線で「別のサイトがある」と分かるようにする
   ・スマホでも切替タブを常に表示（メニューの中に隠さない）
   ・下段は表示中サイトの専用メニュー（サイト色の帯）
   ・フッターは2サイトを写真付きカードで並べ、互いに送客する
   ========================================================================== */
:root{
  --glamp:#27408B;        /* グランピング：夜空・宿泊のインディゴ */
  --glamp-pale:#E6EBF8;
  --actv:#0E9384;         /* アクティビティ：海・マングローブのティール */
  --actv-pale:#DDF4F0;
}
.gh-wrap{max-width:1180px;margin:0 auto;padding:0 20px;}

/* ---------- utility bar（PCのみ） ---------- */
.gh-util{background:#10233A;color:#C9D6E3;font-size:12px;}
.gh-util .gh-wrap{display:flex;justify-content:space-between;align-items:center;min-height:30px;gap:16px;}
.gh-util-links{display:flex;gap:18px;}
.gh-util a{color:#DDE7F0;text-decoration:none;}
.gh-util a:hover{color:#fff;text-decoration:underline;}

/* ---------- main row ---------- */
.gh{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:50;}
.gh-main{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding-top:12px;padding-bottom:12px;}
.gh-logo img{height:52px;width:auto;}

/* 2サイト切替 */
.gh-switch{display:flex;gap:10px;justify-content:center;}
.sw{
  --c:var(--glamp);--p:var(--glamp-pale);
  display:flex;align-items:center;gap:10px;min-width:210px;
  padding:9px 18px 9px 12px;border-radius:14px;text-decoration:none;
  border:2px solid var(--c);color:var(--c);background:#fff;
  transition:background .15s,transform .15s,box-shadow .15s;
}
.sw.actv{--c:var(--actv);--p:var(--actv-pale);}
.sw:hover{background:var(--p);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08);}
.sw.is-current{background:var(--c);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.14);}
.sw-ico{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--p);color:var(--c);}
.sw.is-current .sw-ico{background:rgba(255,255,255,.2);color:#fff;}
.sw-ico svg{width:24px;height:24px;}
.sw-txt{display:flex;flex-direction:column;line-height:1.25;}
.sw-txt small{font-size:11px;font-weight:700;opacity:.85;letter-spacing:.06em;}
.sw-txt b{font-size:17px;letter-spacing:.04em;}
.sw-arrow{margin-left:auto;font-size:18px;opacity:.7;}
.sw.is-current .sw-arrow{display:none;}
.sw-here{margin-left:auto;font-size:10.5px;font-weight:800;background:rgba(255,255,255,.22);padding:2px 8px;border-radius:999px;white-space:nowrap;}

/* 右側ボタン */
.gh-actions{display:flex;gap:8px;align-items:center;}
.gh-contact,.gh-menu{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:64px;height:56px;border-radius:12px;font-size:11px;font-weight:800;text-decoration:none;
  font-family:inherit;cursor:pointer;
}
.gh-contact{background:var(--sunset);color:#fff;border:none;}
.gh-contact:hover{background:var(--sunset-deep);}
.gh-menu{background:#fff;color:var(--ink);border:1.5px solid var(--line);}
.gh-menu:hover{border-color:var(--ink-soft);}
.gh-contact svg,.gh-menu svg{width:22px;height:22px;}

/* ---------- 表示中サイトの専用メニュー ---------- */
.gh-local{background:var(--actv-pale);border-top:3px solid var(--actv);}
.gh-local.glamp{background:var(--glamp-pale);border-top-color:var(--glamp);}
.gh-local .gh-wrap{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;}
.gh-local .gh-wrap::-webkit-scrollbar{display:none;}
.gh-local-label{font-size:11.5px;font-weight:800;color:var(--actv);margin-right:10px;white-space:nowrap;}
.gh-local a{
  white-space:nowrap;text-decoration:none;color:var(--ink);font-size:14px;font-weight:700;
  padding:11px 14px;border-bottom:3px solid transparent;margin-bottom:-0px;
}
.gh-local a:hover{color:var(--actv);}
.gh-local a.active{color:var(--actv);border-bottom-color:var(--actv);}

/* ---------- drawer（全メニュー） ---------- */
.gh-drawer{position:fixed;inset:0;z-index:100;background:rgba(8,26,46,.55);display:flex;justify-content:flex-end;}
.gh-drawer[hidden]{display:none;}
.gh-drawer-panel{
  width:min(380px,90vw);height:100%;overflow-y:auto;background:#fff;padding:18px 18px 40px;
  box-shadow:-8px 0 30px rgba(0,0,0,.2);animation:gh-in .2s ease-out;
}
@keyframes gh-in{from{transform:translateX(30px);opacity:.4;}to{transform:none;opacity:1;}}
@media (prefers-reduced-motion:reduce){.gh-drawer-panel{animation:none;}}
.gh-close{
  display:block;margin:0 0 10px auto;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);
  background:#fff;font-size:22px;line-height:1;cursor:pointer;color:var(--ink);
}
.dr-group{margin-bottom:18px;}
.dr-group .sw{min-width:0;width:100%;}
.dr-group ul{list-style:none;margin:6px 0 0;padding:0 0 0 8px;}
.dr-group li a{display:block;padding:9px 8px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:14.5px;}
.dr-group li a::before{content:"›";margin-right:8px;color:var(--ink-soft);}
.dr-group li a:hover{background:var(--paper-soft);}
.dr-h{font-size:12px;font-weight:800;color:var(--ink-soft);margin:0 0 4px;letter-spacing:.08em;}

/* ---------- footer ---------- */
.gf{background:#0B1B2E;color:#B9C7D4;margin-top:20px;padding:40px 0 0;font-size:13px;}
.gf a{color:#DCE9F2;text-decoration:none;}
.gf-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.gf-card{
  --c:var(--glamp);
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;
  min-height:190px;padding:20px 22px;border-radius:18px;overflow:hidden;color:#fff !important;
  background:var(--c) center/cover no-repeat; /* 写真は HTML 側の background-image で指定 */
  border-bottom:6px solid var(--c);transition:transform .15s;
}
.gf-card.actv{--c:var(--actv);}
.gf-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 20%,rgba(0,0,0,.72));}
.gf-card > *{position:relative;z-index:1;}
.gf-card:hover{transform:translateY(-3px);}
.gf-kicker{font-size:12px;font-weight:800;letter-spacing:.1em;display:flex;align-items:center;gap:8px;}
.gf-kicker::before{content:"";width:22px;height:3px;background:var(--c);border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.6);}
.gf-card b{font-size:24px;letter-spacing:.05em;line-height:1.3;text-shadow:0 2px 10px rgba(0,0,0,.4);}
.gf-desc{font-size:12.5px;opacity:.92;}
.gf-go{
  align-self:flex-start;margin-top:10px;background:var(--c);color:#fff;font-weight:800;font-size:13px;
  padding:7px 16px;border-radius:999px;
}
.gf-card > .gf-here{position:absolute;z-index:2;}
.gf-here{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.9);color:var(--c);font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px;}
.gf-links{display:grid;grid-template-columns:repeat(3,1fr) 1.2fr;gap:24px;padding-top:34px;padding-bottom:26px;}
.gf-links h3{font-size:13.5px;color:#fff;margin:0 0 8px;padding-left:10px;border-left:4px solid #5B6B78;}
.gf-links h3.glamp{border-color:#7F95D9;}
.gf-links h3.actv{border-color:#35C2AF;}
.gf-links ul{list-style:none;margin:0;padding:0;}
.gf-links li{margin:0 0 6px;}
.gf-links li a:hover{color:#fff;text-decoration:underline;}
.gf-addr img.gf-logo{width:170px;height:auto;margin-bottom:10px;}
.gf-addr address{font-style:normal;line-height:1.8;}
.gf-sns{display:inline-flex;align-items:center;gap:8px;margin-top:10px;}
.gf-sns img{width:26px;height:26px;}
.gf-copy{text-align:center;border-top:1px solid rgba(255,255,255,.1);margin:0;padding:14px 0 18px;font-size:11.5px;color:#8A9BAC;}

/* トップページの2サイトカード（フッター直前） */
.gf.gf-top{padding:40px 0 0;margin-top:20px;}
.gf.gf-top + .gf{margin-top:0;}

/* ---------- tablet / smartphone ---------- */
@media (max-width:900px){
  .gh-util{display:none;}
  .gh-main{grid-template-columns:1fr auto;grid-template-areas:"logo actions" "switch switch";gap:10px;padding-top:8px;padding-bottom:10px;}
  .gh-logo{grid-area:logo;}
  .gh-actions{grid-area:actions;}
  .gh-switch{grid-area:switch;}
  .gh-logo img{height:40px;}
  .gh-contact,.gh-menu{width:52px;height:46px;font-size:10px;border-radius:10px;}
  .gh-contact svg,.gh-menu svg{width:20px;height:20px;}
  .sw{flex:1;min-width:0;padding:7px 10px 7px 8px;gap:8px;border-radius:12px;}
  .sw-ico{width:28px;height:28px;}
  .sw-ico svg{width:20px;height:20px;}
  .sw-txt b{font-size:14px;letter-spacing:0;white-space:nowrap;}
  .sw-arrow{display:none;}
  .sw-txt small{font-size:10px;}
  .sw-here{display:none;}
  .gh-local a{font-size:13px;padding:10px 11px;}
  .gh-local-label{display:none;}
  .gf-duo{grid-template-columns:1fr;}
  .gf-card{min-height:150px;}
  .gf-links{grid-template-columns:1fr 1fr;}
  .gf-addr{grid-column:1/-1;}
}
@media (max-width:360px){
  .sw-ico{display:none;}
}