/* ============ Theme Vars ============ */
:root{
  --section-pad-y: min(10vh, 7rem);
  --header-offset: 4.5rem;
  --wave-h: 68px;

  /* colors */
  --c-header:#fff;
  --c-strengths:#ece1d0;
  --c-services:#f5efe6;
  --c-voice:#e59458;
  --c-profile:#fff;
  --c-contact:#f5efe6;
  --c-message:#e59458;
  --c-footer:#473933;
  --muted:#6c757d;
}


html{ scroll-behavior:smooth; }
body{ scroll-padding-top: var(--header-offset); }

/* ===== Section Base ===== */
section{
  position: relative;
  padding: var(--section-pad-y) 0;
  z-index: 0; /* 波より背面に固定 */
}

.section-heading .sub{
  color:#e59458;
  margin-top:.25rem;
}

/* ===== Navbar（共通） ===== */
.navbar{
  background: var(--c-header) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
  padding: 12px 16px; /* PCの見た目ベース */
}

/* 2行ナビの体裁はそのまま利用 */
.nav-2line .nav-link{ text-align:center; }
.nav-2line .nav-link span{ display:block; line-height:1.1; }
.nav-2line .nav-link .sub{ font-size:.75rem; color:#666; margin-top:.15rem; }

.navbar-nav .nav-item {
  margin: 0 1rem; /* ← 左右の余白を追加（1.5rem = 約24px） */
}

/* ===== Navbar（日本語と英文の調整）===== */
.nav-2line .nav-link span {
  display: block;
  line-height: 1.1;          /* 日本語と英文の行間を詰める（デフォルト1.5 → 1.1） */
}

/* 日本語部分（1行目） */
.nav-2line .nav-link span:first-child {
  font-weight: 600;  /* ← 太さ：400(標準), 500(中), 600(やや太), 700(太) */
  letter-spacing: 0.03em; /* お好みで字間を少し広げる */
}

/* 英文部分（sub） */
.nav-2line .nav-link .sub {
  font-size: 0.9rem;        /* 英文をやや小さめに */
  color: #e59458;            /* 英文カラー */
  margin-top: 0.15rem;       /* 日本語との間隔を微調整 */
  line-height: 1.1;          /* 行間をさらに詰めてコンパクトに */
  font-weight: 300;          /* 少し太めにして視認性アップ（お好み） */
  padding-top: 0.4rem;
}


/* ===== Hero（統合版） ===== */
.hero {
  /* 背景 */
  --bg: #fff; /* 波線連携用：白背景を波線に渡す */
  background:
    url('../../images/pc/mainvisual.jpg') center/cover no-repeat;

  /* レイアウト */
  position: relative;
  z-index: 0;
  min-height: 56vh;

  /* 余白 */
  padding: calc(var(--section-pad-y) + 2rem) 0;
  padding-top: 140px; /* 固定ナビ分の補正 */
}

/* 右上の電話帯の高さ（左カラムの上余白と連動） */
:root{ --topbar-h: 64px; }                 /* PC基準の高さ */
.hero .hero-left-pad{ padding-top: var(--topbar-h); }


/* SP時：縦積み・上余白リセット */
@media (max-width: 991.98px){
  :root{ --topbar-h: 0px; }               /* 電話帯の高さ分の余白は不要に */
  .phone-chip{ margin-bottom: .5rem; }
  .hero .hero-left-pad{ padding-top: 0; }
  .phone-chip{ background: rgba(255,255,255,.85); }
}


/* ===== Section Colors ===== */
#strengths{ --bg:var(--c-strengths); background:var(--bg); }
#services { --bg:var(--c-services);  background:var(--bg); }
#voice    { --bg:var(--c-voice);     background:var(--bg); }
#profile  { --bg:var(--c-profile);   background:var(--bg); }
#contact  { --bg:var(--c-contact);   background:var(--bg); }
.message  { --bg:var(--c-message);   background:var(--bg); }
footer    { background:var(--c-footer); color:#e5e7eb; }

/* ===== Wave Divider (top wave system) - FIX ===== */
.section-wave-top{
  position: absolute;           /* ← 相対ではなく絶対配置に */
  top: 0; left: 0; right: 0;
  height: var(--wave-h);
  transform: translateY(-100%); /* ← セクションの“外側”へ出す */
  z-index: 999;
  pointer-events: none;
  overflow: visible;
}
.section-wave-top svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* ★ これを追加：波は“そのセクションの --bg” で塗る */
.section-wave-top path{
  fill: var(--bg) !important;
}

/* ===== Strengths ===== */
.strengths .point h4{
  margin-bottom:.5rem;
  font-size:clamp(1.05rem,1.2vw + .6rem,1.25rem);
}
.strengths .point p{ margin-bottom:0; }

/* ===== Services ===== */
.service-plain .img-wrap{ border-radius:.5rem; overflow:hidden; }
.btn-pill{ border-radius:.75rem; }
.stacked-wrap{ max-width:720px; }
@media (max-width: 991.98px){ .stacked-wrap{ max-width:100%; } }
.stacked-item{ padding:1.1rem 0; background:transparent; border:0; }

/* ===== CTA Buttons (pill) ===== */
:root{
  --cta-red:  #a33b33;      /* 左ボタン基準色（画像の深い赤に寄せる）*/
  --cta-red-h:#8f302a;
  --cta-blue: #3d79b9;      /* 右ボタン基準色（画像の青に寄せる）*/
  --cta-blue-h:#336aa4;
}

.cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  padding:.95rem 2.25rem;
  border-radius:999px;
  font-weight:500;
  font-size:clamp(1rem,1.8vw,1.25rem);
  line-height:1;
  color:#fff;
  text-decoration:none;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  min-width:min(300px, 65vw);  /* 画像の“横長”感に合わせる */
}

.cta-btn__icon{
  width:1.25em;
  height:1.25em;
  flex:0 0 auto;
}

.cta-btn:hover,
.cta-btn:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  text-decoration:none;
  color:#fff;
}

.cta-btn {
  margin-top: 1rem;  /* ← ここで下げる量を調整 */
}

/* 色バリエーション */
.cta-btn--red{  background:var(--cta-red);  }
.cta-btn--red:hover,
.cta-btn--red:focus-visible{ background:var(--cta-red-h); }

.cta-btn--blue{ background:var(--cta-blue); }
.cta-btn--blue:hover,
.cta-btn--blue:focus-visible{ background:var(--cta-blue-h); }



/* ========== 税務業務支援（中央揃え・幅60%） ========== */
:root{
  --tax-accent: #e59458;   /* オレンジ */
  --tax-text:   #4a4a4a;   /* 本文色 */
  --tax-note:   #77736d;   /* 補助テキスト色 */
  --tax-rule:   #bdb4a8;   /* 罫線（ドット） */
}

.tax-block{
  width: 60%;
  margin-inline: auto;
  color: var(--tax-text);
}

.tax-block__head{
  display: block;
  margin: 0 auto 1.25rem;
  max-width: 100%;
  height: auto;
}

/* スマホでは横幅を広げて読みやすく */
@media (max-width: 991.98px){
  .tax-block{ width: 86%; }
}

.tax-list{ line-height: 1.8; }

.tax-item{ padding-block: .4rem; }

.tax-item__row{
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: 1.35rem; /* ← これを追加して全体を右にずらす */
}

.tax-item__dot{
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background-color: var(--tax-accent);
  flex: 0 0 auto;
  transform: translateY(1px);
}

.tax-item__title{
  font-size: clamp(1.55rem, 1.8vw, 1.25rem);
  font-weight: 500;
  color: var(--tax-accent);
  margin: 0;
}

.tax-item__desc{
  margin: .25rem 0 0 2.5rem; 
  font-size: clamp(1rem, 1.3vw, 1.4rem);
  color: var(--tax-text);
}

/* ドットの区切り線（画像の雰囲気に寄せたドット） */
.tax-item__div{
  border: none;
  border-top: 2px dotted var(--tax-rule);
  margin: .7rem 0 .4rem 1.35rem; /* 説明文と揃える */
  opacity: 1; /* ブートストラップの薄さを上書き */
}


/* ===== Voice（セクション色・見出し） ===== */
.voice-section {
  margin-bottom: 0;
  padding-bottom: 7rem;
  overflow: visible;
}
.voice-head{
  max-width:440px;
  width:80%;
  height:auto;
  display: block;
  margin: 0 auto 3rem;
}

/* ===== Voice：アバター ===== */
.voice-avatar{
  width:160px;
  height:160px;
  border-radius:50%;
  object-fit:cover;
  background:#fff;
  border:6px solid #fff;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  flex:0 0 auto;
}

/* ===== Voice：吹き出し（突起は上下中央） ===== */
.voice-card{
  position:relative;
  background:#fff;
  color:#403c39;
  border-radius:18px;
  padding:3rem 2.4rem; /* 最終値 */
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.voice-card::before{
  content:"";
  position:absolute;
  left:-12px;
  top:50%;
  transform:translateY(-50%) rotate(45deg);
  width:24px;
  height:24px;
  background:#fff;
  box-shadow:-3px 3px 6px rgba(0,0,0,.04);
  border-radius:3px;
}

/* タイトル */
.voice-title{
  font-size:clamp(1.05rem,1.8vw,1.25rem);
  font-weight:700;
  color:#c17a5a;
  margin:0 0 .35rem;
}

/* 行高さの調整（アバター中央合わせ） */
.voice-item{ align-items:center; }

/* SP */
@media (max-width:575.98px){
  .voice-avatar{ width:84px; height:84px; border-width:5px; }
  .voice-card{ padding:1rem 1.1rem; }
}

.voice-bottom-space {
  height: 7rem; /* 下余白の高さを調整 */
}

/* 左の画像と吹き出しの間を40px空ける */
.voice-item{
  display:flex;          /* 念のため明示 */
  gap:60px !important;   /* Bootstrapの gap-3 を上書き */
}


/* 吹き出し内の余白を調整 */
.voice-card {
  padding: 3rem 2.4rem;  /* 上下・左右の余白を増やす */
}

/* 吹き出し内の見出しカラーを明るく */
.voice-title {
  color: #e59458;  /* 明るめのオレンジトーン */
}


/* ===== Profile（右カラム：点線角丸＋3項目強調） ===== */
.wavy-box{
  border: 2px dotted #6c7a91;
  border-radius: 1rem;
  padding: 1.5rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  background: #fff;
  color:#000;
}
.wavy-box .highlight-item{
  font-size: 1.2rem;
  font-weight: 600;
  border-bottom: 3px solid #e9cbb5;
  padding-bottom: .2rem;
  margin-bottom: .18rem;
  display: inline-block;
}
.history-table th,
.history-table td{
  border:none;
  border-bottom:1px solid #ddd;
  padding:1.5rem 1.65rem;
  vertical-align:top;
}
.history-table th{
  width:30%;
  font-weight:400;
  border-bottom:2px solid #ddd;
  white-space:nowrap;
}

/* ===== プロフィール（シンプル見出し） ===== */
.profile-simple {
  padding: 2rem 0;
  color: #3b342f;
}

/* 1行目：肩書き＋氏名 */
.profile-head {
  display: inline-block;
  margin-bottom: 1.75rem;
  text-align: right;   /* ← 右寄せが必要な場合そのままでOK */
}

.profile-title,
.profile-name {
  display: inline-block;
  vertical-align: baseline;
}

.profile-title {
  font-size: clamp(1.2rem, 2vw, 1.2rem);
  font-weight: 500;
  letter-spacing: .02em;
  padding-right: 0.5em; /* ← margin-right の代わりにこちらを使用 */
}

.profile-name {
  font-size: clamp(1.6rem, 2vw, 1.8rem);
  font-weight: 800;
  letter-spacing: .05em;
  white-space: nowrap;
}


/* 2・3行目：説明文 */
.profile-line {
  margin: .75rem 0 0;
  font-size: clamp(.8rem, 1.2vw, .95rem);
  color: #4a443f;
  letter-spacing: .02em;
}

/* スマホ表示（1行目を縦積み） */
@media (max-width: 575.98px) {
  .profile-head {
    display: block;          /* SPでは縦積みに */
  }
  .profile-title {
    margin-right: 0;
  }
  .profile-name {
    display: block;
    margin-top: .25rem;
    white-space: normal;
  }
}

/* 左カラム */
.office-info {
  position: relative;
  font-size: 0.67em; /* ← 全体を約2/3のサイズに縮小 */
  line-height: 1.6;  /* ← 行間を適度に保つ */
}

.office-name.jp {
  font-weight: 800;
  font-size: clamp(1.1rem, 2.2vw, 1.8rem); /* 元より約2/3 */
  letter-spacing: .04em;
  color: #3b342f;
  margin-bottom: .25rem;
}

.office-name.en {
  font-size: clamp(0.8rem, 1.2vw, 0.95rem);
  color: #e59458;
  margin: 0 0 1.25rem;
  letter-spacing: .02em;
}

.office-lines li {
  font-size: clamp(0.8rem, 1.6vw, 1.05rem);
  letter-spacing: .08em; /* ← 少し詰めると綺麗 */
  line-height: 1.8;
  color: #3b342f;
}

/* 左の写真（矩形で表示） */
.office-avatar {
  margin-top: 1.5rem;
}
.office-avatar img {
  width: min(280px, 40%);
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

@media (max-width: 575.98px) {
  .office-avatar img {
    width: 100%;  /* スマホでは全幅 */
  }
}

/* 右カラムの建物写真（ストレート表示） */
.office-photo {
  border-radius: 22px;     /* ← 角丸が不要なら 0 に変更 */
  overflow: hidden;        /* ← 角丸を効かせたい場合のみ残す */
}

.office-photo img {
  width: 100%;
  height: auto;            /* ← 縦横比そのまま */
  display: block;
  border-radius: inherit;  /* ← 親の角丸を継承（任意） */
}


/* Map（プロフィール内・全幅） */
.map-frame iframe {
  display: block;  /* ← これで下の隙間を完全に消す */
  width: 100%;
  height: 300px;   /* 任意の高さ */
  border: 0;
}

.map-wrap {
  margin-top: 50px;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* 次セクションの余白を打ち消す（必要な場合のみ残す） */
.map-wrap + *{ margin-top:0 !important; }

.map-frame iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
}

/* 下のセクションとの隙間を完全に消す */
.map-wrap + * {
  margin-top: 0 !important;
}


/* ===== Contact ===== */
.form-wrap{
  border:1px solid #e5e7eb;
  border-radius:1rem;
  padding:1.5rem;
  background:#fff;
}
.form-control, .form-select, textarea{
  border-radius:.75rem!important;
}

/* ===== Footer ===== */
footer a{ color:#9cc2ff; text-decoration:none; }
footer a:hover{ text-decoration:underline; }
.copyright{ color:#9aa4b2; }

/* ===== Back to Top ボタン（Bootstrap装飾と併用） ===== */
#backToTop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10000;               /* 最前面に表示 */
  width: 48px;
  height: 48px;
  display: flex;                /* 中央寄せ */
  align-items: center;
  justify-content: center;
  background-color: #e59458;    /* オレンジに統一 */
  border: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  opacity: 0.9;
  transition: opacity .2s, transform .2s;
}
#backToTop:hover {
  opacity: 1;
  transform: translateY(-3px);
}
/* ボタン内アイコンを明確に */
#backToTop i {
  font-size: 1.4rem;      /* ← アイコンサイズ */
  color: #fff;            /* ← 白で見やすく */
  line-height: 1;         /* ← 垂直方向の中央を整える */
}



/* ===== Limit inner containers to 1000px ===== */
main .container,
section .container,
footer .container {
  max-width: 1000px;
}

@media (max-width: 991.98px) {
  main .container,
  section .container,
  footer .container {
    max-width: 100%;
  }
}

/* 送信ボタン */
#contact .text-center button {
  position: relative;
  top: -1.2rem;       /* 少しだけ上に出す */
  margin-top: 2rem;   /* 上部に余白を追加 */
}

/* ===== Strengths (2col custom) ===== */
#strengths{ --bg:#ece1d0; background:var(--bg); }
:root{ --accent:#e59458; --ink:#473933; }


/* ▼ここから追加 */
/* ===== Strengths（lead-stack調整版） ===== */

/* 左カラム中央揃え（既存） */
#strengths .left-col{ text-align:center; }

/* 3行まとめて囲むブロック */
#strengths .lead-stack{
  position: relative;
  display: inline-block;
  padding: .25rem 0 .25rem; /* 下余白を少し詰める */
}

/* 左右の斜め線（変更なし） */
#strengths .lead-stack::before,
#strengths .lead-stack::after{
  content:"";
  position:absolute;
  top:4%;
  height:92%;
  width:3px;
  background:#473933;
  opacity:.6;
  border-radius:3px;
  transform-origin:center;
}
#strengths .lead-stack::before{
  left:-26px;
  transform:rotate(-16deg);
}
#strengths .lead-stack::after{
  right:-26px;
  transform:rotate(16deg);
}

/* 各行（行間を詰める） */
#strengths .lead-line{
  margin:.15rem 0; /* ← 行間を半分に */
  font-weight:400;
  font-size:clamp(1rem, 0.8rem + 0.5vw, 1.5rem);
  line-height:1.3; /* ← コンパクトに（1.7 → 1.3） */
  color:#2f2f2f;
}

/* 1行目の下線（文字の裏側に密着） */
#strengths .lead-line.u-underline{
  display:inline-block;
  position:relative;
  padding-bottom:0; /* ← 余白ゼロ */
}
#strengths .lead-line.u-underline::after{
  content:"";
  position:absolute;
  bottom:0.1em; /* ← 文字下ギリギリに配置 */
  left:0;
  width:100%;
  height:0.35em; /* 下線を“背景風”に太め */
  background:#e59458;
  z-index:-1; /* ← 文字の裏に敷く！ */
  border-radius:1px;
}

/* モバイル調整 */
@media (max-width:575.98px){
  #strengths .lead-stack::before{ left:-18px; height:88%; }
  #strengths .lead-stack::after { right:-18px; height:88%; }
}
/* ▲ここまで追加 */

/* （既存） */
.strengths .point h4{ margin-bottom:.5rem; }
.strengths .point p{ margin-bottom:0; }


/* 見出し（サイズ控えめ＋下線＋斜め線の基準） */
#strengths .lead-title{
  position: relative;           /* ← これが基準 */
  display: inline-block;        /* 親がcenterでもOK */
  font-weight: 700;
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.25rem);
  line-height: 1.75;
  color: #2f2f2f;
  padding: .25rem 0 .5rem;
  border-bottom: 3px solid #e59458; /* 下線（この行だけ） */
}

/* サブリード（オレンジ色の強調テキスト） */
#strengths .sub-lead{
  font-size: 1.4rem;
  font-weight: 700;
  color: #e59458;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* 本文テキスト（読みやすく中央寄せ） */
#strengths .lead-text{
  font-size: 1rem;
  color: #333;
  line-height: 1.9;
  margin-bottom: 2rem;
}

/* 画像（円形ではなく横長矩形でもOK） */
#strengths .lead-image{
  display: inline-block;
  border-radius: .75rem;
  overflow: hidden;
  max-width: 90%;
  height: auto;
}


/* 下線は指定のフレーズのみ */
#strengths .lead-title .u-accent{
  border-bottom: 4px solid var(--accent);
}

/* 左右の斜め線（画像不要） */
#strengths .lead-title::before,
#strengths .lead-title::after{
  content:"";
  position:absolute;
  top:50%;
  width:3px;
  height:56px;
  background:#473933;
  opacity:.6;
  border-radius:3px;
  transform-origin:center;
}
#strengths .lead-title::before{
  left:-22px;                   /* 文字ブロックの左外へ */
  transform:translateY(-50%) rotate(-18deg);
}
#strengths .lead-title::after{
  right:-22px;                  /* 文字ブロックの右外へ */
  transform:translateY(-50%) rotate(18deg);
}

/* モバイルで少し短く・内側に */
@media (max-width:575.98px){
  #strengths .lead-title::before{ left:-16px; height:48px; }
  #strengths .lead-title::after{ right:-16px; height:48px; }
}

/* 左カラムの補助文 */
#strengths .accent-line{
  color: var(--accent);
  font-weight: 700;
  font-size: clamp(1rem, .9rem + .6vw, 1.25rem);
  margin: 1rem 0 .5rem;
}
#strengths .body-text{ color:#333; margin:0; line-height:1.9; }

/* 右カラム：見出しを角丸四角形で囲う（添付画像スタイル） */
#strengths .title-box{
  display: block;
  width: 100%;
  background: var(--accent);   /* #e59458 */
  color: #fff;
  font-weight: 500;
  font-size: clamp(.8rem, 1rem + .35vw, 1.4rem);
  line-height: 1.6;
  border-radius: 999px;        /* ピル型の角丸 */
  padding: .3rem 1.5rem .3rem;
  box-sizing: border-box;
  text-align: left;
  margin-bottom: .5rem;        /* 見出しと本文の間の余白 */
}

/* 番号部分 */
#strengths .title-box .num{
  font-weight: 800;
  margin-right: .4rem;
}

/* 各ブロック間の間隔 */
#strengths .strength-item{
  margin-bottom: 1.25rem;
}


/* 説明文 */
#strengths .strength-item .desc{
  color:#2f2f2f;
  margin:.6rem 0 0;
  line-height:1.9;
  padding:0px 40px 0px 40px;
}

/* 画像の角丸 */
#strengths .rounded-4{ border-radius: 1.25rem !important; }

/* スマホ時：斜め線の位置微調整 */
@media (max-width: 575.98px){
  #strengths .lead-title::before{ left:-16px; height:48px; }
  #strengths .lead-title::after{ right:-16px; height:48px; }
}

/* footer */

.site-footer {
  background: #3d312b;
  color: #fff;
  padding: 3rem 0 2rem;
}

/* 左の事務所名 */
.footer-brand {
  font-weight: 800;
  font-size: clamp(1.4rem, 2.5vw, 2.1rem); /* ← 約70％に縮小 */
  letter-spacing: .05em;
  margin: 0;
}

/* リンクリスト */
.ft-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem; /* 行間やや詰める */
}

.ft-list li {
  display: flex;
  align-items: center;
  gap: .6rem; /* ダッシュとの間隔を少し詰める */
  font-size: clamp(0.8rem, 1.4vw, 1.1rem); /* ← 約70％に縮小 */
}

.ft-list li::before {
  content: "—";
  color: #e59458;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-1px);
}

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

.ft-list a:hover {
  color: #e59458;
  text-decoration: underline;
}

/* コピーライト */
.copy {
  text-align: center;
  color: #e9e4e1;
  letter-spacing: .1em;
  font-size: clamp(0.8rem, 1.2vw, 1rem); /* ← 小さくバランス良く */
  opacity: .9;
  margin-top: 3rem;
}


/* SPは縦積み（既にrow/colで対応済み） */


/* ===============================
   Image Utilities
   使い方： <img class="u-img u-img--flat"> など
   =============================== */

/* 基本：はみ出さず比率維持＆配置しやすい */
.u-img{
  display:block;
  max-width:100%;
  height:auto;
}

/* 装飾リセット：角丸・影・背景・フィルタを排除 */
.u-img--flat{
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:none !important;
  filter:none !important;
}

/* 収まり方のバリエーション（任意） */
.u-img--contain{ object-fit:contain; }
.u-img--cover  { object-fit:cover; }

/* ラッパーが装飾を持つ場合のリセット（.ratio 等に効く） */
.u-frame--flat{
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important; /* 角丸切り抜き回避 */
}

/* ===== Image hard reset (section scoped) ===== */
/* ヒーロー内の画像とラッパーを完全にフラット化 */
.hero img,
.hero picture img {
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:none !important;
  filter:none !important;
}

/* 親に付いている shadow*/rounded*/overflow-hidden を無効化 */
.hero [class*="shadow"],
.hero [class*="rounded"],
.hero .overflow-hidden {
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible !important;
}

/* Bootstrapの img-thumbnail を使っていた場合の上書き */
.hero .img-thumbnail {
  border:0 !important;
  padding:0 !important;
  background:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

/* 念のため：比率ラッパー（ratio）も平坦化したい場合 */
.hero .ratio {
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

/* ボタンの色変更 */
.btn-primary {
  background-color: #e59458;
  border-color: #e59458;
  color: #fff;
}
.btn-primary:hover {
  background-color: #cf824c;
  border-color: #cf824c;
  color: #fff;
}


/* ① 固定ナビの高さを変数で定義（実寸に合わせて調整） */
:root{
  --nav-h: 100px;                 /* 例：PC時のnavbar高さ */
  scroll-behavior: smooth;        /* 任意：スムーズスクロール */
  scroll-padding-top: var(--nav-h);
}

/* ② モバイルで高さが変わるなら上書き */
@media (max-width: 575.98px){
  :root{ --nav-h: 80px; }         /* 例：SP時のnavbar高さ */
}



  /* メニューは縦並びで中央寄せ */
  #navCollapse .navbar-nav{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }


/* ==== Navbarレイアウト調整（PC共通） ==== */
/* Navbar 自体を折り返さないようにする */
#mainNav{
  flex-wrap: nowrap;  /* これでロゴとハンバーガーを同じ行に固定 */
}



/* ===== Navbar強制フレックス（最重要） ===== */
#mainNav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ===== スマホ時：ロゴとハンバーガーを横並びに見せる ===== */
@media (max-width: 991.98px) {
  /* ナビ全体を基準にする */
  #mainNav {
    position: relative;
  }

  /* ロゴ側：幅を抑えて1行に収める */
  #mainNav .navbar-brand {
    display: block;
    max-width: 70vw;
  }
  #mainNav .navbar-brand img {
    width: 100%;
    height: auto;
  }

  /* ハンバーガーメニューを右上に固定 */
  #mainNav .navbar-toggler {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
  }

  /* 開いたメニューは下側に縦並びで出す */
  #navCollapse {
    margin-top: .75rem;
  }
  #navCollapse .navbar-nav {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ===== Navbar（根本修正）ロゴとハンバーガーを1行に固定 ===== */
#mainNav .container-fluid{
  display: flex;              /* 念のため明示 */
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;          /* ★ここがポイント：折り返し禁止 */
}

/* スマホ時だけロゴをさらに小さくする（横並び確保のため） */
@media (max-width: 575.98px){
  #mainNav .navbar-brand img{
    width: 50vw !important;   /* ← ここが最重要（220px → 50vw） */
    height: auto;
  }
}


/* ============================================
   Navbar の余白調整（PC / スマホを分離）
   ============================================ */

/* PC・タブレット（幅 576px以上）は、広い余白に戻す */
@media (min-width: 576px){
  #mainNav.navbar{
    padding: 24px 24px;   /* ← 元の値に戻す（24pxでOK） */
  }
}

/* スマホ（〜575px）は狭めの余白のまま維持 */
@media (max-width: 575.98px){
  #mainNav.navbar{
    padding: 8px 12px;    /* ← スマホ用（ロゴ＋ハンバーガーが収まる） */
  }
}

/* ===== Navbar ロゴサイズ調整 ===== */
#mainNav .main-logo{
  height: 48px;
  width: auto;
}

/* スマホ（〜575px）はロゴ小さめ＆余白コンパクト */
@media (max-width: 575.98px){
  #mainNav.navbar{
    padding: 8px 12px;
  }
  #mainNav .main-logo{
    height: 36px;
  }
}

/* スマホ時だけロゴを小さくする（横並び優先） */
@media (max-width: 575.98px){
  #mainNav .navbar-brand img{
    height: 36px;      /* スマホのロゴ高さ */
    width: auto;
  }
}