:root{
  --header-h:56px;
  --content-w:1100px;

  --color-main:#0b3c5d;
  --color-main-light:#4a647a;
  --color-link:#0b4f6c;
  --color-link-hover:#08384f;

  --bg:#f7fbfd;
  --surface:#ffffff;
  --surface-2:#f0f8fb;

  --border:rgba(11,60,93,.14);
  --shadow:0 12px 28px rgba(0,0,0,.10);

  --radius:18px;

  /* ✅ LINE（Lighthouse完全対応：白文字でもAAを確実に満たす濃い緑） */
  --line:#046C32;
  --line-d:#035A29;

  --container:1120px;
}

/* ✅ ページ内スクロールを滑らかに */
html { scroll-behavior: smooth; }

*,
*::before,
*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  line-height:1.7;
  background:var(--bg);
  color:var(--color-main);
}

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

a{
  color:var(--color-link);
  text-decoration:none;
  transition:color .15s ease, opacity .15s ease;
}
a:hover{ color:var(--color-link-hover); }

ul,ol{ margin:0; padding:0; list-style:none; }

h1,h2,h3,h4,h5,h6{ margin:0; font-weight:inherit; color:var(--color-main); }
p{ margin:0; color:var(--color-main-light); }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 16px;
}

.visually-hidden{
  position:absolute!important;
  height:1px; width:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}

.inline-link{
  font-weight:900;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* ===== Header ===== */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--header-h);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  z-index:1000;
}
.header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  max-width:var(--container);
  margin:0 auto;
}
.site-logo{
  display:inline-flex;
  flex-direction:column;
  line-height:1.05;
  text-decoration:none;
}
.site-logo__main{
  font-weight:900;
  letter-spacing:.02em;
  color:var(--color-main);
  font-size:15px;
}
.site-logo__sub{
  font-weight:900;
  letter-spacing:.14em;
  color:var(--color-main-light);
  font-size:11px;
  text-transform:uppercase;
}
.header-actions{
  display:inline-flex;
  gap:10px;
  align-items:center;
}
.icon-btn{
  appearance:none;
  border:1px solid var(--border);
  background:rgba(240,248,251,.95);
  color:var(--color-main);
  border-radius:999px;
  height:40px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font-weight:900;
}
.icon-btn:hover{ background:rgba(240,248,251,1); }
.icon-btn__icon{ font-size:16px; line-height:1; }
.icon-btn__text{ font-size:12px; letter-spacing:.06em; }

/* ===== Dropdown (vertical) ===== */
.mobile-menu,
.lang-menu{
  position:fixed;
  top:var(--header-h);
  right:12px;
  left:12px;
  max-width:520px;
  margin:0 auto;

  background:rgba(255,255,255,.98);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);

  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index:1100;
}
.mobile-menu.is-open,
.lang-menu.is-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.menu-panel{
  display:flex;
  flex-direction:column;
  padding:10px;
  gap:6px;
}
.menu-item{
  display:block;
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(11,60,93,.10);
  background:#fff;
  color:var(--color-main);
  font-weight:900;
  letter-spacing:.04em;
}
.menu-item:hover{ background:var(--surface-2); }
.menu-divider{
  height:1px;
  background:rgba(11,60,93,.10);
  margin:6px 0;
}

/* ===== Buttons（共通） ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  border:1px solid transparent;
  padding:12px 16px;
  font-weight:900;
  text-decoration:none;
  line-height:1;
  letter-spacing:.02em;
  cursor:pointer;
  user-select:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  color:inherit;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(0,0,0,.10); }
.btn:active{ transform:translateY(0); box-shadow:none; }

.btn-large{ padding:14px 18px; font-size:14px; }
.btn-full{ width:100%; }

/* LINE（通常定義） */
.btn-line{
  background:var(--line);
  color:#fff;
}
.btn-line:hover{ background:var(--line-d); }

.btn-secondary{ background:var(--color-main); color:#fff; }
.btn-secondary:hover{ background:#08314b; }

.btn-outline{ background:#fff; color:var(--color-main); border-color:rgba(11,60,93,.20); }
.btn-outline:hover{ background:var(--surface-2); }

/* Instagram */
.btn-instagram{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);
}
.btn-instagram:hover{ filter:brightness(.98); }

/* お問合せフォーム */
.btn-form{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(90deg, var(--color-main), #0b4f6c);
}
.btn-form:hover{ filter:brightness(0.96); }

/* 電話 */
.btn-tel{
  color:var(--color-main);
  background:#ffffff;
  border:1px solid rgba(11,60,93,.28);
}
.btn-tel:hover{ background:var(--surface-2); }

/* ===== Modal ===== */
.modal{ position:fixed; inset:0; z-index:2000; display:none; }
.modal.is-open{ display:block; }

.modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); }

.modal__panel{
  position:absolute;
  left:50%;
  top:50%;
  width:min(560px, calc(100% - 24px));
  transform:translate(-50%, -50%);
  background:rgba(255,255,255,.98);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:16px;
}
.modal__close{
  position:absolute;
  right:10px;
  top:8px;
  border:none;
  background:transparent;
  font-size:26px;
  cursor:pointer;
  color:var(--color-main);
}
.modal__title{ margin:4px 0 8px; font-size:16px; font-weight:900; color:var(--color-main); }
.modal__sub{ margin:0 0 12px; color:var(--color-main-light); font-size:13px; }
.modal__grid{ display:grid; gap:10px; grid-template-columns:1fr; }

.modal__btn{
  display:block;
  text-align:center;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(11,60,93,.16);
  background:#fff;
  font-weight:900;
  color:var(--color-main);
}
.modal__btn:hover{ background:var(--surface-2); }
.modal__btn.is-disabled{ opacity:.55; cursor:not-allowed; }

/* TEL modal */
.tel-grid{ display:grid; gap:12px; }
.tel-shop{
  border:1px solid rgba(11,60,93,.12);
  border-radius:14px;
  background:#fff;
  padding:12px;
}
.tel-shop__head{ display:grid; gap:4px; }
.tel-shop__name{ font-weight:900; color:var(--color-main); }
.tel-shop__nums{ font-size:12px; color:var(--color-main-light); }
.tel-shop__actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}
.tel-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  border-radius:999px;
  font-weight:900;
  border:1px solid rgba(11,60,93,.18);
  background:var(--surface-2);
  color:var(--color-main);
}
.tel-btn:hover{ background:#fff; }

.tel-btn.is-tel{
  border-color: transparent;
  color:#fff;
  background: linear-gradient(90deg, #f59e0b, #fb7185);
  box-shadow:0 10px 18px rgba(0,0,0,.10);
}
.tel-btn.is-tel:hover{ filter: brightness(.97); }

/* ===== Footer ===== */
.site-footer{
  background:#1f3a5f;
  color:#ffffff;
  padding:0;
  font-size:12px;
  line-height:1.9;
  letter-spacing:0.06em;
}
.site-footer,
.site-footer *{ color:#ffffff; }

.footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:32px 16px 16px;
  display:grid;
  gap:24px;
}
@media (min-width: 769px){
  .footer-inner{ grid-template-columns:repeat(3,1fr); gap:32px; }
}

.footer-block h2,
.footer-block h3{
  margin:0 0 12px;
  font-size:13px;
  font-weight:900;
}
.footer-block p,
.footer-block li{ margin:0 0 8px; font-size:12px; }

.footer-block a{
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.3);
}
.footer-block a:hover{ border-bottom-color:#fff; }

.footer-copyright{
  grid-column:1 / -1;
  text-align:center;
  margin-top:8px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.2);
  font-size:11px;
  letter-spacing:0.10em;
  color:#e6edf5;
}

/* アンカー位置が固定ヘッダーに隠れないようにする */
#areas, #about, #contact, #top {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* h1（hidden）念のため */
.hero h1.visually-hidden {
  font-size: 2em;
  margin-block: 0.67em;
}

/* =========================================================
   ✅ A11y: LINE buttons — FINAL（低コントラスト確実対策）
   置き場所：base.css の一番最後（ここ）
========================================================= */
.site-menu__link--cta,
.btn-line,
.mobile-cta__line{
  background-color: var(--line) !important;
  color:#fff !important;
  border-color: transparent !important;

  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
}
.site-menu__link--cta:hover,
.btn-line:hover,
.mobile-cta__line:hover{
  background-color: var(--line-d) !important;
}
.site-menu__link--cta *,
.btn-line *,
.mobile-cta__line *{
  color: #fff !important; /* inheritだと評価ブレする事があるので白固定 */
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}
/* 擬似要素が被さって薄く見える事故を完全停止 */
.site-menu__link--cta::before,
.site-menu__link--cta::after,
.btn-line::before,
.btn-line::after,
.mobile-cta__line::before,
.mobile-cta__line::after{
  content: none !important;
}

.footer-updated{
  margin: 12px 0 0;
  opacity: .85;
  font-size: 12px;
}
.footer-updated time{ font-variant-numeric: tabular-nums; }

.breadcrumb{ padding: 10px 0; }
.breadcrumb__list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:12px;
  opacity:.9;
}
.breadcrumb__item{ display:flex; align-items:center; }
.breadcrumb__item:not(:last-child)::after{
  content:"/";
  margin-left:6px;
  opacity:.5;
}
.breadcrumb__link{ text-decoration:none; }
.breadcrumb__link:hover{ text-decoration:underline; }
.breadcrumb__current{ font-weight:600; 
}

/* =========================================
   Skip link（キーボード操作用）
========================================= */
.skip-link{
  position:absolute;
  left:12px;
  top:12px;
  z-index:9999;
  padding:10px 14px;
  border-radius:10px;
  background:#0B3B5A;
  color:#fff;
  text-decoration:none;
  transform:translateY(-140%);
  transition:transform .15s ease;
}
.skip-link:focus{
  transform:translateY(0);
  outline:2px solid rgba(255,255,255,.9);
  outline-offset:2px;
}

/* =========================================
   Breadcrumb（パンくず）
========================================= */
.breadcrumb{
  padding: 10px 0;
}
.breadcrumb__list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:12px;
  line-height:1.4;
  opacity:.9;
}
.breadcrumb__item{
  display:flex;
  align-items:center;
}
.breadcrumb__item:not(:last-child)::after{
  content:"/";
  margin-left:6px;
  opacity:.5;
}
.breadcrumb__link{
  text-decoration:none;
}
.breadcrumb__link:hover,
.breadcrumb__link:focus-visible{
  text-decoration:underline;
}
.breadcrumb__current{
  font-weight:700;
}

/* 小さい画面で余白を少し詰める */
@media (max-width: 600px){
  .breadcrumb{ padding: 8px 0; }
  .breadcrumb__list{ font-size:11px; }
}

/* =========================================
   Footer: Last updated（最終更新日）
========================================= */
.footer-updated{
  margin: 12px 0 0;
  opacity: .85;
  font-size: 12px;
}
.footer-updated time{
  font-variant-numeric: tabular-nums;
}