:root{
  --brand: #0b2d5c;          /* 紺（メイン） */
  --brand2:#164a8a;          /* 紺（明） */
  --brand-soft:#eef3fb;      /* 薄い背景 */
  --ink:#0f172a;
  --nav-h: 64px;
  
  --base-font: 16.5px;
  --lead-font: 1.08rem;
}

/* ベース */
html{ scroll-behavior: smooth; }

body{
  position: relative;
  font-size: var(--base-font);
  line-height:1.85;
  color:var(--ink);
  font-family:'Noto Sans JP',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}

/*
p{
 font-size:1.05rem;
  }
*/
p, li{
  font-weight: 400;
}

/* 説明文っぽい小さい文字を一律で底上げ（Bootstrapのtext-secondary想定） */
.text-secondary{
  font-size: 0.98rem;
}

/* リード文を「電話する」周りの雰囲気に寄せる */
.lead{
  font-size: var(--lead-font);
  font-weight: 400;              /* 600でもOK */
  line-height: 1.9;
}

a{ color: var(--brand); }
a:hover{ color: #062244; }

/* ナビ */
.navbar-overlay{
  background: transparent;
  transition: background .25s ease, box-shadow .25s ease, color .25s ease;
}
.navbar-overlay .nav-link{ color:#fff; }
.navbar-overlay .navbar-toggler{ border-color: rgba(255,255,255,.55); }
.navbar-overlay .navbar-toggler-icon{ filter: invert(1) brightness(200%); }

.navbar-overlay.scrolled{
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.navbar-overlay.scrolled .nav-link{ color: var(--ink); }
.navbar-overlay.scrolled .navbar-toggler{ border-color: rgba(0,0,0,.15); }
.navbar-overlay.scrolled .navbar-toggler-icon{ filter:none; }


/* ナビ背景は白（少し透け）＋軽いブラー */
.navbar{
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 通常リンク文字色（←ここが白になってたのが原因） */
.navbar .navbar-nav .nav-link{
  color: #0b2a4a !important; /* ロゴに寄せた紺 */
  opacity: 1;
}

/* hover */
.navbar .navbar-nav .nav-link:hover{
  color: #0a3f7a !important;
}

/* active（今選ばれてるメニュー） */
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .show > .nav-link{
  color: #0a3f7a !important;
  font-weight: 800;
}

/* トグル（≡）が白背景で見えない時の保険 */
.navbar .navbar-toggler{
  border-color: rgba(11,42,74,.25) !important;
}
.navbar .navbar-toggler-icon{
  filter: none; /* 変な反転が入ってたら無効化 */
}

.brand-logo{
  height: 42px;
  width: auto;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
}

/* アンカーずれ対策 */
section[id]{ scroll-margin-top: calc(var(--nav-h) + 10px); }

/* 追加：見出しやカード等、idが付く要素にも効かせる */
[id]{ scroll-margin-top: calc(var(--nav-h) + 10px); }

/* ヒーロー（画像のみ） */
.hero{ margin-top: var(--nav-h); }
.hero-carousel{ border-bottom: 1px solid rgba(0,0,0,.06); }
.hero-img{
  height: min(62vh, 560px);
  object-fit: cover;
  /*
  object-position: center center;
  */
}
@media (max-width: 576px){
  .hero-img{
     height: 44vh;
     /*
     object-position: 18% center;
     */
  }
  .hero-img--contain{
    height: 44vh;             /* 既存のスマホ高さに合わせる */
  }
}
/* 文字入りバナーは切らない（余白は出るが安全） */
.hero-img--contain{
  height: min(62vh, 560px);   /* 既存と同じ高さ枠 */
  object-fit: contain;        /* ←切らない */
  background: #0b2d5c;        /* 余白の色（サイトの紺に合わせる） */
}

/* 見出し */
.section-title{
  color: var(--brand);
  text-align:center;
  margin: 64px 0 32px;
  font-weight: 800;
  letter-spacing: .05em;

  position: relative;
  padding-bottom: 14px;
}

.section-title .en{
  display:block;
  font-size: clamp(2.1rem, 4vw, 3.0rem);
  font-weight: 800;
  background: linear-gradient(135deg, #0b2d5c 0%, #1e56a0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  
  
}
.section-title .jp{
  display:block;
  margin-top: .35rem;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: rgba(0,0,0,.6);
}

.section-title::after{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:0;
  border-radius: 999px;
  width: 112px;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
}

/* 背景 */
.bg-soft{ background: var(--brand-soft); }

/* ボタン */
.btn-brand{
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  border: 0;
  color: #fff;
}
.btn-brand:hover{ filter: brightness(.96); color:#fff; }

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

/* 小コンポーネント */
.alert-soft{
  background: #f6f8ff;
  border: 1px solid rgba(11,45,92,.12);
  border-radius: 18px;
}
.icon-badge{
  width: 46px; height: 46px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: rgba(11,45,92,.10);
  color: var(--brand);
}
.icon-badge i{ font-size: 28px; line-height: 1; }

/* ===== Concept section ===== */
/* ===== Concept section (完全修正版) ===== */

.concept-section {
  background: linear-gradient(to bottom, #fff 0%, #f8f9fc 100%);
  position: relative;
  overflow: hidden; /* はみ出したKを隠す */
  padding: 100px 0;
}

/* 以前の before 設定が残っている場合を考慮してリセット */
.concept-section::before {
  content: none !important;
}

/* 英語サブタイトル */
.concept-sub-title {
  font-family: serif;
  color: var(--brand);
  letter-spacing: 0.3em;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* メインキャッチ */
.concept-main-title {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 800;
  color: var(--brand);
  line-height: 1.5;
  position: relative;
  z-index: 2; /* 文字をKより前に出す */
}

/* 文章 */
.concept-text p {
  font-size: 1.15rem;
  color: #334155;
  line-height: 2.2;
  position: relative;
  z-index: 2;
}

/* 背景の巨大なK：文字と重ならないよう右下に逃がす */
.concept-bg-letter {
  position: absolute;
  bottom: -10%; /* 下側に配置 */
  right: -5%;   /* 右側にはみ出させる */
  font-size: clamp(20rem, 45vw, 40rem);
  font-weight: 900;
  line-height: 0.8;
  color: var(--brand);
  opacity: 0.03; /* さらに薄くして文字を邪魔しない */
  pointer-events: none;
  z-index: 1; /* 文字(z-index: 2)の後ろへ */
  user-select: none;
}

@media (max-width: 768px) {
  .concept-section { padding: 70px 0; }
  .concept-bg-letter {
    bottom: 0;
    right: -10%;
    font-size: 20rem;
  }
}

/* =====  ===== */



.card-note{ border-radius: 20px; }
.service-card{
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  border-radius: 20px;
}

/* カードにホバーした時の浮き上がりを強調 */
.service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
  /*
  transform: translateY(-8px);
  transform: translateY(-2px);
  */
  box-shadow: 0 15px 35px rgba(11, 45, 92, 0.15);
}

.service-icon{
  width: 52px; height: 52px;
  display:grid; place-items:center;
  border-radius: 16px;
  background: rgba(11,45,92,.10);
  color: var(--brand);
}
.service-icon i{ font-size: 30px; line-height: 1; }

/* ===== Coat section ===== */
.coat-card{ border-radius: 20px; } /* service-cardと揃える */

.coat-media{
  background: #eef3fb;
}
.coat-badge{
  position:absolute;
  top: 18px;
  left: 18px;
  border-radius: 999px;
  padding: .4rem .7rem;

  /* 目立たせる */
  font-size: 0.95rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: .55rem .95rem;
  border-radius: 999px;

  /* コントラスト */
  color: #fff;
  background: linear-gradient(90deg, #ff7a18, #ff3d71); /* 暖色で“人気感” */

  /* 立体感 */
  box-shadow:
    0 14px 26px rgba(0,0,0,.22),
    0 2px 0 rgba(255,255,255,.18) inset;

  /* 少し浮かせる */
  transform: translateY(0);
}

.coat-list{ padding-left: 1.1rem; }
.coat-list li{ margin-bottom: .3rem; }

.coat-pill{
  border-radius: 999px;
  padding: .6rem 1.0rem;          /* ←少し大きく */
  font-size: 0.98rem;             /* ←本文と同じくらいに */
  line-height: 1.2;
  font-weight: 400;

  background: #f6f8ff;
  border: 1px solid rgba(11,45,92,.18) !important;

  box-shadow: 0 6px 14px rgba(0,0,0,.06); /* ほんのり浮かす */
}

/*  吹き出し */
.tip-pop{
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  color: rgba(11,45,92,.88);
}

/* Popoverの本文を読みやすく */
.popover{
  max-width: 360px; /* ちょい広げたいなら */
}

.popover-body{
  color: rgba(11,45,92,.88);   /* 濃いめ（ブランド寄り） */
  line-height: 1.75;
  font-size: .98rem;
}

.popover-header{
  color: #0b2d5c;
  font-weight: 800;
}



/* モバイルで画像が縦に長すぎるのを防ぐ */
@media (max-width: 991.98px){
  .coat-media{ height: 240px; }
  .coat-media img{ height: 100%; object-fit: cover; }
}

/* ===== Before/After ===== */
#ba .section-title {
  font-weight: 800;
  letter-spacing: .02em;
}

.ba-card{
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.ba-badge{
  display:inline-block;
  padding:.35rem .7rem;
  border-radius:999px;
  font-size:.85rem;
  background: rgba(13, 110, 253, .08);
  color:#0b2a4a;
  border: 1px solid rgba(11,42,74,.15);
}

.ba-photo{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #f5f7fb;
}

.ba-label{
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  padding:.25rem .6rem;
  border-radius:999px;
  font-size:.85rem;
  font-weight:700;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  color:#475569;
}
.ba-label--after{
  color:#0a3f7a;
}

.ba-img{
  width: 100%;
  height: auto;
  display:block;
  cursor: zoom-in;
  transition: transform .18s ease;
}
.ba-photo:hover .ba-img{
  transform: scale(1.01);
}


/* ===== 店舗情報 ===== */
.info-box{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  padding: 18px;
}
.info-row{
  display:flex;
  gap: 12px;
  padding: 10px 6px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.info-row:first-child{ border-top: 0; }
.info-label{
  width: 96px;
  flex: 0 0 96px;
  color: rgba(0,0,0,.55);
  font-weight: 700;
}
.info-value{ flex: 1 1 auto; }








/* フッター */
.footer{
  background: #0a1f3b;
  color: rgba(255,255,255,.85);
}

/* 上へ戻る */
/* 上へ戻る（画像版） */
.to-top{
  opacity:0;
  pointer-events: none;
  position: fixed;
  right: 18px;
  bottom: 18px;

  width: 100px;          /* 画像の見た目*/
  height: 100px;

  border-radius: 999px;
  padding: 0;
  background: transparent;  /* ←画像を見せたいので透明に */
  border: 0;

  display: grid;
  place-items: center;

  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
  z-index: 1050;

}

/* 画像 */
.to-top-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.22)); /* 影は画像側に */
}

/* hover / active */
.to-top:hover{
  transform: translateY(-4px); /* 少しだけ大きめに */
  filter: brightness(1.06);
}

.to-top:active{ transform: translateY(-1px); }

.to-top:focus-visible{
  outline: 3px solid rgba(22,74,138,.45);
  outline-offset: 3px;
}
.to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }


@media (max-width: 576px){
  .to-top{
    width: 72px;
    height: 72px;
    right: 14px;
    bottom: 14px;
  }
}

/* ===== モバイルメニュー：パネル型（チラつき無し） ===== */
@media (max-width: 991.98px){
  #topNav .navbar-collapse{
    position: fixed;
    top: 56px;
    right: 12px;
    width: min(86vw, 360px);
    padding: 14px 16px;
    z-index: 1040;
  }

  #topNav .navbar-collapse::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius: 14px;
    background: rgba(10,31,59,.86);
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    box-shadow: 0 14px 30px rgba(0,0,0,.25);
    opacity:0; transform: translateY(-6px);
    transition: opacity .12s ease, transform .16s ease;
    pointer-events:none;
    z-index:0;
  }

  #topNav .navbar-collapse.collapsing::before,
  #topNav .navbar-collapse.show::before{
    opacity:1; transform:none;
  }

  #topNav .navbar-collapse .nav-link{
    position: relative; z-index:1;
    color:#fff !important;
    font-size:1.12rem; padding:12px 6px;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
  }
  #topNav .navbar-collapse .nav-item + .nav-item{
    border-top: 1px solid rgba(255,255,255,.14);
  }
}

@media (prefers-reduced-motion: reduce){
  #topNav .navbar-collapse::before{ transition:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
}



/* アイコンを跳ねさせるアニメーション定義 */
@keyframes icon-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* 普段は静止、カードにホバーした時だけ発動 */
.service-card:hover .bi {
  animation: icon-bounce 0.5s ease-out;
}

/* 稲妻がパッと光る（拡大する）アニメーション */
@keyframes lightning-glow {
  0%, 80%, 100% { transform: scale(1); opacity: 1; }
  85% { transform: scale(1.2); opacity: 0.8; color: #ffc107; } /* 一瞬大きく、黄色っぽく */
  90% { transform: scale(1); opacity: 1; }
}

.icon-pulse {
  display: inline-block; /* アニメーションを有効にするために必要 */
  animation: lightning-glow 7s infinite; /* 4秒に1回発動 */
}

/* スニーカーアイコン専用：ホバーで横揺れ */
.service-card:hover .bi-person-walking {
  animation: icon-walk 0.5s ease-in-out infinite;
}
@keyframes icon-walk {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}