:root{
  --sec-subtitle-size: clamp(14px, 1.2vw, 16px);

  --sec-pill-font-size: clamp(12px, 0.95vw, 14px);}

/* =========================================================
   トップページ専用
   ========================================================= */

/* =========================================================
   安心のポイント（top-features）
   ========================================================= */
.top-features{
  position: relative;
}

.top-features__head{
  text-align: center;
  margin-bottom: 24px;
}

.top-features__kicker{
  background-color: var(--anchor-color-features-kicker-bg, var(--color-accent-soft));
}

.top-features__title{
  margin: 0;
}

.top-features__grid{
  display: grid;
  grid-template-columns: repeat(var(--af-cols, 3), minmax(0, 1fr));
  gap: 18px;
}

.top-features__card{
  position: relative;
  border-radius: 16px;
  padding: 18px 18px 16px;
  /* 背景/枠色はutilities.cssの変数で上書きされてもOK */
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
}

.top-features__card-title{
  margin: 0 0 10px;
  text-align: center;
  font-size: 18px;
  line-height: 1.4;
}

.top-features__media{
  margin: 0 0 12px;
  border-radius: var(--af-img-radius, 12px);
  overflow: hidden;
  aspect-ratio: var(--af-img-aspect, 1/1);
}

.top-features__img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--af-img-fit, cover);
}


/* モード：自然な高さ（トリミング回避）。カードの高さは揃わない場合があります。 */
.top-features[style*="--af-img-mode: natural"] .top-features__media{
  aspect-ratio: auto;
}
.top-features[style*="--af-img-mode: natural"] .top-features__img{
  height: auto;
  object-fit: contain;
}

.top-features__text{
  margin: 0;
  text-align: center;
  line-height: 1.8;
}

@media (max-width: 1023px){
  .top-features__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .top-features__grid{
    grid-template-columns: repeat(var(--af-cols-sp, 1), minmax(0,1fr));
  }
}

/* ---------- FV ---------- */
.fv{
  position: relative;
  padding: 80px 20px 60px;
  background: linear-gradient(135deg, #f8f4f0 0%, #ffffff 60%, #f2f7fb 100%);
  overflow: hidden;
}
.fv__inner{
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
}
.fv__content{ flex: 1 1 55%; }
.fv__eyebrow{
  display: inline-block;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: var(--anchor-color-kicker-bg, rgba(0,0,0,.04));
}
.fv__title{
  font-size: 32px;
  line-height: 1.4;
  margin-bottom: 16px;
}
.fv__lead{
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 20px;
}
.fv__points{
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  font-size: 14px;
}
.fv__points li{
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
}
.fv__points li::before{
  content: "●";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 8px;
  line-height: 1.8;
}
.fv__buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 右側ビジュアル */
.fv__visual{
  position: relative;
  flex: 1 1 45%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fv__visual::before{
  content:"";
  position:absolute;
  width:120%;
  height:120%;
  max-width:520px;
  border-radius:40px;
  background:
    radial-gradient(circle at 0% 0%, #f9e7ff 0%, transparent 60%),
    radial-gradient(circle at 100% 100%, #e4f4ff 0%, transparent 60%);
  opacity:.8;
  z-index:-2;
}
.fv__image-wrap{
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  border-radius: 32px;
  overflow: hidden;
  background-color: #ddd;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}
.fv__image-wrap::before{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:28px;
  border: 1px solid rgba(255,255,255,.7);
  pointer-events:none;
}
.fv__image-wrap img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.04);
}

/* Scroll誘導 */
.fv-scroll{
  position:absolute;
  left:50%;
  bottom:16px;
  transform: translateX(-50%);
  display:flex;
  flex-direction: column;
  align-items:center;
  gap:6px;
  font-size: 11px;
  letter-spacing:.18em;
  text-transform: uppercase;
  color:#777;
}
.fv-scroll__line{
  width:1px;
  height:32px;
  background-color: var(--color-text-base);
  position:relative;
  overflow:hidden;
}
.fv-scroll__line::after{
  content:"";
  position:absolute;
  top:-12px;
  left:0;
  width:100%;
  height:12px;
  background-color: var(--color-primary);
  animation: fv-scroll 1.4s infinite;
}
@keyframes fv-scroll{
  0%{ transform: translateY(0); opacity:0; }
  30%{ opacity:1; }
  100%{ transform: translateY(32px); opacity:0; }
}

/* ---------- Aboutセクション ---------- */
.front-about{ background-color:#fff; }
.front-about__inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 60px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 40px;
  align-items: center;
}
.front-about__text{
  
  line-height: 1.9;
  color: var(--color-text-base);
}
.front-about__title{
  text-align: left;
  margin-bottom: 18px;
}
.front-about__lead{ margin-bottom: 14px; }
.front-about__body{
  margin-bottom: 18px;
  
  color: var(--color-text-base);
}
.front-about__link{
  display: inline-block;
  
  text-decoration: none;
  color: var(--color-primary);
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(203,167,212,.5);
}
.front-about__link::after{
  content:"›";
  margin-left: 4px;
}

.front-about__visual{
  display: flex;
  justify-content: flex-end;
}
.front-about__photo{
  width:100%;
  max-width:380px;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow:hidden;
  background:#ddd;
  box-shadow: 0 18px 40px rgba(0,0,0,.06);
}
.front-about__photo img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* ---------- 選ばれる理由 ---------- */
.front-reasons{
  /* 縦方向のリズムにはセクション余白システムを使う。
     環境差分でも安定するよう、内側コンテナの左右余白は維持する。 */
  padding: var(--sec-pad-y, 80px) 0;
  background-color: #f7f4fb;
}
.front-reasons__inner{
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

.front-reasons__subtitle{
  display: block;
  margin: 0 auto 8px;
  background-color: var(--anchor-color-reasons-kicker-bg, var(--color-accent-soft));
}




.front-reasons__title{
  font-size: 26px;
  text-align: center;
  margin-bottom: 32px;
}

/* SP列数 */
@media (max-width: 767px){
  .front-reasons__cards{
    grid-template-columns: repeat(var(--ar-cols-sp, 1), minmax(0,1fr));
  }
}

.front-reasons__cards{
  display: grid;
  grid-template-columns: repeat(var(--ar-cols, 3), minmax(0,1fr));
  gap: 24px;
}
.front-reasons__card{
  background:#fff;
  border-radius: 12px;
  padding: 24px 20px 28px;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
.front-reasons__card-number{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  color: #c7a6d8;
  margin-bottom: 6px;
}
.front-reasons__card-title{
  font-size: 18px;
  margin-bottom: 10px;
}
.front-reasons__card-text{
  font-size: 14px;
  line-height: 1.8;
}

/* ---------- お知らせ一覧（p-frontNews） ---------- */
.p-frontNews{
  background: #f8f4fb;
  padding: var(--sec-pad-y, 72px) 0;
}
.p-frontNews__inner{
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}
.p-frontNews__subtitle{
  display: inline-block;
  margin-bottom: 12px;
}
.p-frontNews__title{
  font-size: 20px;
  margin-bottom: 16px;
}
.p-frontNews__list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #eee;
}
.p-frontNews__item{ border-bottom: 1px solid #eee; }
.p-frontNews__link{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 0;
  text-decoration:none;
  color: inherit;
  font-size: 14px;
}
.p-frontNews__date{
  font-size: 12px;
  color: #777;
  min-width: 110px;
}
.p-frontNews__sep{ color:#ccc; }
.p-frontNews__text{ flex:1; line-height:1.5; }
.p-frontNews__link:hover .p-frontNews__text{ text-decoration: underline; text-decoration-color: var(--color-link-hover-underline); }

.p-frontNews__archive{
  margin: 18px 0 0;
  text-align: right;
}
.p-frontNews__archiveLink{
  display: inline-flex;
  align-items: center;
  gap: .4em;
  color: inherit;
  text-decoration: none;
  font-size: 14px;
}
.p-frontNews__archiveLink:hover{
  text-decoration: underline;
  text-decoration-color: var(--color-link-hover-underline);
}

/* 任意のサムネイル */
.p-frontNews__thumb{
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,.06);
}
.p-frontNews__thumbImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 日付を非表示にした場合 */
.p-frontNews--noDate .p-frontNews__date,
.p-frontNews--noDate .p-frontNews__sep{
  display: none;
}

/* ---------- トップヒーロー（基準はGRIDのみ） ---------- */
.top-hero{
  /* 構造設定（セクション余白）で上書きできるように */
  padding: var(--hero-pad-y, 80px) 0;
  background: linear-gradient(135deg, #fdf8f2 0%, #f7f2eb 45%, #fefbff 100%);
  color: var(--color-text-base);
}

/* ヒーロー：画像なし（テキストのみ）の場合は中央寄せで崩れを防ぐ */
.top-hero--no-media .top-hero__inner{
  /* 画像なしヒーローは常に1カラム。取扱業務のSP列数(--as-cols-sp)には連動させない。 */
  grid-template-columns: 1fr;
  grid-template-areas: "content";
}
.top-hero--no-media .top-hero__content{
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.top-hero--no-media .top-hero__title,
.top-hero--no-media .top-hero__subtitle{
  max-width: 100%;
}

.top-hero__inner{
  max-width: var(--hero-inner-maxw, 1100px);
  margin: 0 auto;
  padding: 0 20px;

  display: grid;
  gap: 32px;
  align-items: center;
}

/* PC: 2カラム（左右・中央は modifierで切替） */
/* Customizerのプレビュー幅が狭いと「配置が効いてない」に見えやすいので、
   2カラム化の閾値を少し下げて反映させる */
@media (min-width: 1025px){
  .top-hero__inner{
    /* カスタマイザー『ヒーロー画像の横幅（PC %）』を fr 比率に変換して反映する。 */
    grid-template-columns: minmax(0, var(--hero-content-col-fr, 45fr)) minmax(0, var(--hero-media-col-fr, 55fr));
    grid-template-areas: "content media"; /* デフォルト：右に画像 */
  }

  .top-hero--img-right .top-hero__inner{
    grid-template-columns: minmax(0, var(--hero-content-col-fr, 45fr)) minmax(0, var(--hero-media-col-fr, 55fr));
    grid-template-areas: "content media";
  }

  .top-hero--img-left .top-hero__inner{
    grid-template-columns: minmax(0, var(--hero-media-col-fr, 55fr)) minmax(0, var(--hero-content-col-fr, 45fr));
    grid-template-areas: "media content";
  }

  .top-hero--img-center .top-hero__inner{
    /* 中央配置は画像と文章を縦積みする専用レイアウト。 */
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "content";
    justify-items: center;
    text-align: center;
  }
}

.top-hero__content{ grid-area: content; max-width: var(--hero-copy-maxw, 520px); }
.top-hero__media{ grid-area: media; width: 100%; }

.top-hero__title{
  margin: 0 0 16px;
  font-size: 32px;
  line-height: 1.4;
  font-weight: 700;
}
.top-hero__subtitle{
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.8;
}

/* 画像枠（必ず高さが出る） */
.top-hero__media{
  max-width: var(--hero-media-maxw, 520px);
  margin-left: auto;
  aspect-ratio: var(--hero-media-ratio, 4 / 3);
  overflow: hidden;
  border-radius: 16px;
}
.top-hero--img-center .top-hero__media{
  margin-left: 0;
  max-width: min(var(--hero-media-maxw, 720px), 100%);
}
.top-hero__image{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* SP: 画像最大幅（SP設定）を優先 */
@media (max-width: 767px){
  .top-hero__media{
    max-width: var(--hero-media-maxw-sp, var(--hero-media-maxw, 520px));
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: var(--hero-media-ratio-sp, 16 / 10);
  }
}


/* CTAセクション */
.top-hero__actions{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- トップ取扱業務（gridのみ） ---------- */
.top-service{
  /* 構造設定（セクション余白）で上書きできるように */
  padding: var(--sec-pad-y, 80px) 0;
}
.top-service__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
.top-service__head{
  text-align:center;
  max-width: 720px;
  margin: 0 auto 40px;
}
.top-service__grid{
  display:grid;
  gap: 24px;
  margin: 32px auto 0;
  max-width: 1120px;
  grid-template-columns: repeat(var(--as-cols, 2), minmax(0,1fr));
}

/* 6枚のときだけ 3列（PCのみ） */
@media (min-width: 768px){
  .top-service__grid.cols-6{
    grid-template-columns: repeat(var(--as-cols, 3), minmax(0,1fr));}
}

/* SPはカスタマイザーの「表示列数（SP）」を使う */
@media (max-width: 767px){
  .top-service__grid{
    grid-template-columns: repeat(var(--as-cols-sp, 1), minmax(0,1fr));
    max-width: 760px;
  }
}

/* ---------- トップ困りごと（カード） ---------- */
.top-worries{
  padding: var(--sec-pad-y, 80px) 0;
  background: var(--worries-sec-bg, #fff);
}
.top-worries__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
.top-worries__title{
  text-align: center;
  font-size: 24px;
  margin: 0 0 28px;
  font-family: var(--font-heading, inherit);
  color: var(--color-h2, var(--color-text-heading));
}
.top-worries__grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(var(--aw-cols, 3), minmax(0, 1fr));
}
.top-worries__card{
  background: var(--worries-card-bg, #fff) !important;
  border: 1px solid var(--worries-card-border, rgba(130,111,199,.18)) !important;
  border-radius: 14px;
  padding: 18px 18px 18px 22px;
  box-shadow: 0 6px 18px rgba(130,111,199,.06);
  position: relative;
}
/* アクセントライン */
.top-worries__card::before{
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: var(--card-accent-size, 4px);
  border-radius: 4px;
  background: var(--card-accent, var(--worries-card-accent, rgba(130,111,199,.6)));
  opacity: .35;
}
.top-worries__card-text{
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--worries-card-text, var(--color-text-base, inherit)) !important;
}


@media (max-width: 1024px){
  .top-worries__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px){
  .top-worries__title{ font-size: 20px; }
  .top-worries__grid{ grid-template-columns: repeat(var(--aw-cols-sp, 1), minmax(0,1fr)); }
  .top-worries__card{ padding: 16px; }
}

/* ---------- トップ投稿 ---------- */
.front-posts{
  padding: 56px 0;
  background:#fff;
}
.front-posts__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
.front-posts__title{
  margin: 0 0 24px;
  font-size: 22px;
  font-weight: 700;
}
.front-posts__list{
  display:flex;
  flex-direction: column;
  gap: 16px;
}
.front-posts__item{
  border-radius: 12px;
  border: 1px solid #eee5ff;
  background: #fff;
  box-shadow: 0 6px 16px rgba(130,111,199,.06);
  overflow:hidden;
}
.front-posts__link{
  display:block;
  padding: 16px 20px;
  text-decoration:none;
  color: inherit;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.front-posts__link:hover{
  background:#faf7ff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(130,111,199,.12);
}

/* ---------- レスポンシブ（トップ） ---------- */
@media (max-width: 1024px){
  .fv{ padding: 60px 16px 48px; }
  .fv__inner{
    flex-direction: column-reverse;
    gap: 28px;
    align-items: center;
  }
  .fv__content{
    max-width: 380px;
    margin: 0 auto;
  }
  .fv__title{ font-size: 24px; }
  .fv__lead{ font-size: 14px; }
  .fv__points{ margin-left: 0 !important; padding-left: 0 !important; }
  .fv__buttons{
    flex-direction: column;
    align-items: stretch;
  }
  .btn{ width: 100%; }

  .fv__image-wrap{
    max-width: 320px;
    aspect-ratio: 4 / 3;
  }
  .fv__visual::before{
    width: 140%;
    height: 140%;
    max-width: none;
  }

  .front-about__inner{
    /* 代表挨拶はSP/タブレットで1カラム固定。取扱業務の列数設定とは分離する。 */
    grid-template-columns: 1fr;
    padding: 48px 16px;
  }
  .front-about__title{ text-align: center; }
  .front-about__photo{
    margin: 0 auto;
    max-width: 320px;
  }

  .front-reasons__inner{
    padding: 0 16px;
  }

  .front-reasons__cards{
    /* 選ばれる理由は専用のSP列数変数を使用する。 */
    grid-template-columns: repeat(var(--ar-cols-sp, 1), minmax(0,1fr));
  }

  .p-frontNews{
  padding: var(--sec-pad-y, 72px) 0;
  }
  .p-frontNews__inner{
    padding: 0 16px;
  }
  .p-frontNews__date{
    min-width: 90px;
    font-size: 11px;
  }

  .top-hero{
    padding: var(--hero-pad-y, 56px) 0;
  }
  .top-hero__inner{
    /* SP/タブレットのヒーローは1カラム固定。 */
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "content";
  }
  .top-hero__content{ max-width: 100%; }
  .top-hero__title{ font-size: 24px; }
  .top-hero__subtitle{ font-size: 14px; }

  .top-hero__media{
    max-width: 100%;
    margin-left: 0;
    aspect-ratio: var(--hero-media-ratio-sp, 16 / 10);
  }

  .front-posts{
    padding: 48px 0;
  }
  .front-posts__link{
    padding: 14px 16px;
  }
}



/* ---------- タブレット修正（769px–1024px） ----------
   Aim: prevent 3-column grids from becoming too tight on tablet,
   and keep consistent gutters.
-------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px){
  /* 選ばれる理由：タブレットでは3列→2列 */
  .front-reasons__inner{ padding-left: 24px; padding-right: 24px; }
  .front-reasons__cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .front-reasons__card{ padding: 22px 18px 24px; }

  /* トップニュース：読みやすい行幅を保つ */
  .p-frontNews__inner{ padding-left: 24px; padding-right: 24px; }

  /* FV：タブレットで隙間が広がりすぎないようにする */
  .fv{ padding-left: 24px; padding-right: 24px; }
  .fv__inner{ gap: 28px; }
}

/* ==========================
   ヒーローCTAボタン
========================== */
.top-hero__cta{
  display: flex;
  justify-content: var(--hero-cta-align, center);
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.top-hero__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  border: 1px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.top-hero__button:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}
.top-hero__button.is-primary{
  background: var(--color-primary);
  color: #000;
}
.top-hero__button.is-secondary{
  /* 2.8.18: 副CTAは透過ではなく、淡い塗りつぶしで視認性を確保 */
  background: var(--color-accent-soft, #f3ecff);
  color: var(--color-text-base);
  border-color: var(--color-primary);
}
.top-hero__button.is-secondary:hover{
  background: var(--color-primary, #cba7d4);
  color: #000;
  border-color: var(--color-primary, #cba7d4);
}


/* Tablet (portrait/landscape): ヒーローを1カラムにして読みやすく */
@media (min-width: 769px) and (max-width: 1024px){
  .top-hero__inner{
    /* SP/タブレットのヒーローは1カラム固定。 */
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "content";
  }
  .top-hero__content{
    max-width: 100%;
  }
  .top-hero__media{
    max-width: 100%;
    margin-left: 0;
  }
  .top-hero__title,
  .top-hero__subtitle{
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

/* SP */
@media (max-width: 1024px){
  .top-hero__cta{ justify-content: center; }
  .top-hero__button{ width: 100%; }
}



/* ==============================
  Top Profile section (プロフィール)
  画像が元サイズのまま表示されるのを防止
============================== */
.top-profile__grid{
  display: grid;
  /* プロフィールは初期状態で1カラム。取扱業務のSP列数(--as-cols-sp)とは連動させない。 */
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

.top-profile__media{
  width: 100%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.top-profile__image{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

/*
  画像が大きい場合でも“ちょうど良い”見た目になるように
  ※caption（画像下テキスト）は .top-profile__media 内にあるため、
    コンテナに aspect-ratio + overflow:hidden を付けると caption が隠れる。
    画像自体に aspect-ratio を持たせてトリミングする。
*/
@supports (aspect-ratio: 1 / 1){
  .top-profile__media{ max-width: 340px; }
  .top-profile__image{
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center;
  }
}

@media (min-width: 768px){
  .top-profile__grid{
    grid-template-columns: minmax(240px, 340px) 1fr;
    gap: 32px;
    align-items: start;
  }
  .top-profile__media{
    max-width: none;
    margin: 0;
  }
}

.top-profile__caption{
  margin-top: 10px;
  font-size: 0.9em;
  opacity: 0.85;
  text-align: center;
}
@media (min-width: 768px){
  .top-profile__caption{
    text-align: left;
  }
}


/* Profile image position (Customizer: left / right)
   grid-column の入れ替えだけだと「行落ち」や「幅潰れ」が起きやすいので、
   grid-template-areas で確実に左右を制御する。
*/
@media (min-width: 768px){
  /* 初期値 = 左 */
  .top-profile__grid{
    display: grid;
    grid-template-columns: minmax(240px, 340px) 1fr;
    grid-template-areas: "media content";
    gap: 32px;
    align-items: start;
  }

  .top-profile__media{
    grid-area: media;
    max-width: none;
    margin: 0;
  }

  .top-profile__content{
    grid-area: content;
    align-self: start;
  }

  /* 右 */
  .top-profile--img-right .top-profile__grid{
    grid-template-columns: 1fr minmax(240px, 340px);
    grid-template-areas: "content media";
  }

  /* キャプション配置 */
  .top-profile--img-right .top-profile__caption{ text-align: right; }
  .top-profile--img-left  .top-profile__caption{ text-align: left; }
}
/*
  NOTE:
  .top-profile__inner は .top-profile__grid の外枠（コンテナ）なので、
  ここを grid にすると中の .top-profile__grid が「1列目」に配置されて
  幅が潰れ、見出しが1文字ずつ折り返される等の崩れが起きる。
  レイアウト制御は .top-profile__grid のみで行う。
*/
@media (min-width: 768px){
  .top-profile__inner{ display: block; }
}

/* =========================================================
   お客様の声（top-voice）
   ========================================================= */
.top-voice{ position: relative; }

.top-voice__head{
  text-align: center;
  margin-bottom: 24px;
}

.top-voice__kicker{
  background-color: var(--anchor-color-voice-kicker-bg, var(--color-accent-soft));
}


.top-voice__title{ margin: 0; }

.top-voice__list{
  display: grid;
  grid-template-columns: repeat(var(--av-cols, 3), minmax(0, 1fr));
  gap: 18px;
}


@media (max-width: 767px){
  .top-voice__list{
    grid-template-columns: repeat(var(--av-cols-sp, 1), minmax(0,1fr));
  }
}
.top-voice__card{
  border-radius: 16px;
  padding: 18px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-top: var(--card-accent-size, 4px) solid var(--card-accent);
  }



/* --- 修正：お客様の声カード色はカスタマイザー変数に追従させる --- */
.top-voice .top-voice__card{
  background: var(--voice-card-bg, var(--card-bg, #fff)) !important;
  border-color: var(--voice-card-border, var(--card-border, #e5e5e5)) !important;
  border-top: 1px solid var(--voice-card-border, var(--card-border, #e5e5e5)) !important; /* アクセント帯なし */
  color: var(--voice-card-text, var(--card-text, #555)) !important;
}

.top-voice__row{
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.top-voice__avatar{
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0,0,0,.06);
}

.top-voice__avatar-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-voice__body{ min-width: 0; }

.top-voice__card-title{
  margin: 0 0 8px;
  font-weight: 700;
  font-size: var(--h3-size, 1.125rem);
  font-family: var(--font-heading, inherit);
  line-height: var(--h3-line-height, 1.5);
  color: var(--color-h3, var(--color-text-heading));

}

.top-voice__text{
  margin: 0;
  line-height: 1.8;
  }

@media (max-width: 1023px){
  .top-voice__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .top-voice__list{ grid-template-columns: repeat(var(--av-cols-sp, 1), minmax(0,1fr)); }
  .top-voice__card{ padding: 16px; }
}

/* =========================================================
   お客様の声（top-voice）
   ========================================================= */
.top-voice{ position: relative; }

.top-voice__head{
  text-align: center;
  margin-bottom: 24px;
}

.top-voice__title{ margin: 0; }

.top-voice__list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.top-voice__card{
  border-radius: 16px;
  padding: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}

.top-voice__row{
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.top-voice__avatar{
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  overflow: hidden;
  background-color: rgba(0,0,0,.06);
}

.top-voice__avatar-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-voice__body{ flex: 1 1 auto; min-width: 0; }

.top-voice__card-title{
  margin: 0 0 8px;
  font-weight: 700;
  line-height: 1.4;
}

.top-voice__text{
  margin: 0;
  line-height: 1.85;
  word-break: break-word;
}

@media (max-width: 1023px){
  .top-voice__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .top-voice__list{ grid-template-columns: repeat(var(--av-cols-sp, 1), minmax(0,1fr)); }
  .top-voice__card{ padding: 16px; }
  .top-voice__avatar{ flex-basis: 48px; width:48px; height:48px; }
}

/* =========================================================
   お客様の声（top-voice）
   ========================================================= */
.top-voice{ position: relative; }

.top-voice__head{
  text-align: center;
  margin-bottom: 24px;
}

.top-voice__title{
  margin: 0;
}

.top-voice__list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.top-voice__card{
  border-radius: 16px;
  padding: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
}

.top-voice__row{
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.top-voice__avatar{
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  overflow: hidden;
  background-color: rgba(0,0,0,.06);
}

.top-voice__avatar-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.top-voice__body{ flex: 1 1 auto; min-width: 0; }

.top-voice__card-title{
  margin: 0 0 8px;
  font-weight: 700;
  line-height: 1.4;
}

.top-voice__text{
  margin: 0;
  line-height: 1.8;
  }

@media (max-width: 1023px){
  .top-voice__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .top-voice__list{ grid-template-columns: repeat(var(--av-cols-sp, 1), minmax(0,1fr)); }
}

/* =========================================================
   お客様の声（top-voice）
   ========================================================= */
.top-voice{ position: relative; }

.top-voice__head{
  text-align: center;
  margin-bottom: 24px;
}

.top-voice__kicker{
  background-color: var(--anchor-color-voice-kicker-bg, var(--color-accent-soft));
}


.top-voice__title{ margin: 0; }

.top-voice__list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.top-voice__card{
  border-radius: 16px;
  padding: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
}

.top-voice__row{
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.top-voice__avatar{
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  overflow: hidden;
  background-color: rgba(0,0,0,.06);
}

.top-voice__avatar-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-voice__body{ min-width: 0; }

.top-voice__card-title{
  margin: 0 0 10px;
  font-weight: 700;
  line-height: 1.4;
}

.top-voice__text{
  margin: 0;
  line-height: 1.85;
}

@media (max-width: 1023px){
  .top-voice__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .top-voice__list{ grid-template-columns: repeat(var(--av-cols-sp, 1), minmax(0,1fr)); }
}


/* ==========================
   取扱業務カードの余白修正
========================== */
.top-service__card {
  padding: 2rem 2.25rem;
}

.top-service__card-title {
  margin-bottom: 0.75rem;
}

.top-service__card-text {
  line-height: 1.75;
}


/* ==========================
   取扱業務カードのテキストレイアウト修正
========================== */
.top-service__card {
  padding: 2.25rem 2.5rem;
}

.top-service__card-text {
  line-height: 1.9;
  margin-top: 0.75rem;
  word-break: break-word;
}

.top-service__card-text p {
  margin-bottom: 0.75rem;
}

.top-service__card-text p:last-child {
  margin-bottom: 0;
}


/* ==========================
   困りごとセクションのリード文中央寄せ
========================== */
.top-worries__lead,
.top-worries .c-sec-lead,
.top-worries .c-section__lead {
  text-align: center;
  max-width: 52ch;
  margin: 0.75rem auto 0;
}


/* ==========================
   困りごとカード中央寄せ
========================== */
.top-worries__grid{
  justify-content: center;
}

.top-worries__card{
  text-align: center;
  padding: 1.5rem 2rem;
}


/* ===== 複製セクション（無制限） ===== */
.top-clone-sections__items{ display:grid; gap:24px; }
.top-clone-sections__item{ padding: 0; }
.top-clone-sections__content{ margin-top: 12px; }


/* ===== 複製セクション（無制限） ===== */

.top-clone-sections__box{
  padding: 24px;
}
.top-clone-sections--container .top-clone-sections__box{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
}
.top-clone-sections--bgfull .top-clone-sections__box{
  padding: 0; /* container内の余白はHTML側で自由に */
}
.top-clone-sections--full .top-clone-sections__full{
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 1024px){
  .top-clone-sections--full .top-clone-sections__full{
    padding-left: 40px;
    padding-right: 40px;
  }
}
.top-clone-sections__content{
  margin-top: 12px;
}


/* =========================================================
   カード色（カスタマイザー）— セクション別
   ========================================================= */

/* 選ばれる理由 */
.front-reasons__card{
  background: var(--reasons-card-bg, #ffffff);
  border: 1px solid var(--reasons-card-border, rgba(0,0,0,.08));
}
.front-reasons__card-title{
  }
.front-reasons__card-text{
  }

/* 安心のポイント */
.top-features__card{
  background: var(--features-card-bg, #ffffff);
  border: 1px solid var(--features-card-border, rgba(0,0,0,.08));
}
.top-features__card-title{
  }
.top-features__text{
  }

.c-secSubtitle,
.front-about__subtitle,
.front-service__subtitle,
.front-reasons__subtitle,
.front-voice__subtitle,
.front-cta__subtitle {
  font-size: var(--sec-subtitle-size);
  line-height: 1.6;
}

.c-secSubtitle,
.top-service__subtitle,
.top-profile__kicker,
.p-frontNews__subtitle,
.front-reasons__subtitle,
.top-voice__kicker,
.top-features__kicker{
  display: inline-block;
  width: fit-content;
  margin: 0 0 10px;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

.top-service__subtitle,
.front-reasons__subtitle{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.front-about__role,
.front-about__shoulder {
}




/* ==========================
   お知らせサブタイトルのピル表示
========================== */
.p-frontNews__subtitle{
  display: block;
  margin: 0 0 12px;
  background-color: var(--anchor-color-news-kicker-bg, var(--color-accent-soft));
}

.p-frontNews--second .p-frontNews__subtitle{
  background-color: var(--anchor-color-news2-kicker-bg, var(--anchor-color-news-kicker-bg, var(--color-accent-soft)));
}

/* === ピル型ラベルのフォントサイズ統一（セクションサブタイトル/小見出し） === */
.c-secSubtitle,
.c-secKicker,
.c-pill,
.front-service__subtitle,
.front-reasons__subtitle,
.front-profile__subtitle,
.front-features__subtitle,
.front-about__subtitle,
.front-about__role,
.front-about__shoulder {
}
/* =========================================================
   Patch: お客様の声（top-voice）列数制御を最終優先
   以前の重複定義（repeat(3)固定）が後勝ちしてしまうため、ここで上書きする
   ========================================================= */
.top-voice__list{
  grid-template-columns: repeat(var(--av-cols, 3), minmax(0, 1fr)) !important;
}

@media (max-width: 1023px){
  .top-voice__list{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 640px){
  .top-voice__list{ grid-template-columns: 1fr !important; }
}

/* =========================================================
   Patch: SP列数制御（最終優先 / 統一）
   - 後勝ちの固定列指定（utilities.css / 既存パッチ / 旧CSS）に負けないように、
     front.css の最終行で SP列数を必ずカスタマイザー値に合わせる。
   ========================================================= */
@media (max-width: 767px){
  .front-reasons__cards{
    grid-template-columns: repeat(var(--ar-cols-sp, 1), minmax(0, 1fr)) !important;
  }
  .top-features__grid{
    grid-template-columns: repeat(var(--af-cols-sp, 1), minmax(0, 1fr)) !important;
  }
  .top-voice__list{
    grid-template-columns: repeat(var(--av-cols-sp, 1), minmax(0, 1fr)) !important;
  }
  .top-worries__grid{
    grid-template-columns: repeat(var(--aw-cols-sp, 1), minmax(0, 1fr)) !important;
  }
  .top-service__grid{
    grid-template-columns: repeat(var(--as-cols-sp, 1), minmax(0, 1fr)) !important;
  }
}


/* =========================================================
   Patch: お客様の声 SP可読性改善（v2.6.37）
   - 狭い幅でアバター横並びにより本文が極端に細くなる問題を解消
   - SPではカード内を縦積みにして本文幅を確保
   - 極小幅端末では1カラムにして読みやすさを優先
   ========================================================= */
@media (max-width: 767px){
  .top-voice__list{
    gap: 14px !important;
  }
  .top-voice__card{
    padding: 16px !important;
  }
  .top-voice__row{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .top-voice__avatar{
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 52px !important;
  }
  .top-voice__body{
    width: 100% !important;
    min-width: 0 !important;
  }
  .top-voice__card-title{
    margin: 0 0 10px !important;
    font-size: clamp(1rem, 3.8vw, 1.125rem) !important;
    line-height: 1.5 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .top-voice__text{
    line-height: 1.9 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 480px){
  .top-voice__list{
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   安心のポイント：画像レイアウト切替（お客様の声風）
   ========================================================= */
.top-features--layout-voice .top-features__card{
  padding: 18px;
}

.top-features--layout-voice .top-features__row{
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.top-features--layout-voice .top-features__avatar{
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0,0,0,.06);
}

.top-features--layout-voice .top-features__avatar-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-features--layout-voice .top-features__body{
  min-width: 0;
  flex: 1 1 auto;
}

.top-features--layout-voice .top-features__card-title{
  margin: 0 0 8px;
}

.top-features--layout-voice .top-features__text{
  margin: 0;
}

.top-features--layout-voice .top-features__media,
.top-features--layout-voice .top-features__img{
  display: none;
}

@media (max-width: 640px){
  .top-features--layout-voice .top-features__card{
    padding: 16px;
  }
}