@charset "utf-8";

/* 画面全体の横ブレ防止（内部スクロール要素は個別に許可） */
html,
body {
  overflow-x: hidden;
}

/* セクション表示モーション（下から上）
   セクション本体は消さず、中身だけを表示させる */
section.js-scroll-fade-up > * {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
section.js-scroll-fade-up.is-inview > * {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================================
  サイト共通：キャプション横スクロール
===================================================================== */
.caption {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-width: 0;
  margin-bottom: 1rem;
}
.caption::-webkit-scrollbar {
  display: none;
}

.caption-left {
  text-align: left;
}

/* 内部リンクボタン：サイト共通デザイン（オレンジ・丸型・ソリッド影・右矢印） */
.btn-internal a {
  background: url("img/arrow_navy.png") no-repeat center right 1.4em / auto 1em, var(--pri);
  color: var(--pri-dark);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50vh;
  box-shadow: 0.5rem 0.5rem 0 var(--pri-dark);
  padding: var(--s2) var(--s6) var(--s2) var(--s5);
}
.btn-internal:hover a {
  transform: translate(0.6rem, 0.6rem);
  box-shadow: none;
}
.btn-tel a {
  background: #FFEE7E url("img/icon-tel.svg") no-repeat left 1.7em center / auto 1.5em;
  box-shadow: 0.5rem 0.5rem 0 #4A2E05;
  padding-left: 5.5rem;
}
/* 下層ページ: テキストリンクボタンはボタン化せず、右寄せ表示 */
#low-page .btn-link {
  text-align: right;
  width: auto;
  max-width: none;
}
#low-page .btn-link a {
  display: inline-block;
  width: auto;
  box-shadow: none;
  border: none;
  border-radius: 0;
  transform: none;
  padding: 0 var(--s3) 0 0;
  color: var(--pri-dark);
  background: url("img/arrow_orange.png") no-repeat right center / auto 0.8em;
}
#low-page .btn-link:hover a {
  transform: none;
  box-shadow: none;
}

/* =====================================================================
  MV（mv.png）
===================================================================== */
.mainvisual {
  position: relative;
  padding: 0;
  background: none;
  min-height: 64rem;
  margin-bottom: 7rem;
}
.mainvisual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("img/bg_mv_lead.png") no-repeat left bottom;
  transform: translateY(2rem);
  pointer-events: none;
  z-index: 0;
  bottom: -3rem;
}
.mainvisual-inner {
  position: relative;
  z-index: 1;
  /* ノートPCでは1200px相当、広いPCでは少しだけ拡張 */
  max-width: clamp(120rem, 86vw, 150rem);
  margin: 0 auto;
  padding: var(--s2) var(--s6) 0;
  min-height: 420px;
  display: flex;
  align-items: center;
}
.mainvisual-inner:after {
  content:"";
  display: block;
  position: absolute;
  right:0;
  top:1rem;
  width: 83rem;
  height: 64.4rem;
  background: url("img/mv.png") no-repeat 0 0;
  border-radius: 5rem;
}

.mainvisual-content {
  position: relative;
  z-index: 1;
  max-width: 64%;
  padding-right: var(--s2);
}
.mainvisual-brand {
  display: flex;
  align-items: center;
  gap: var(--s1);
  margin-bottom: var(--s3);
}
.mainvisual-brand__logo img {
  width: 8rem;
  height: auto;
  display: block;
  margin: 0;
}
.mainvisual-brand__copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.mainvisual-brand__shoulder {
  font-size: 1.2rem;
  color: var(--acc-dark);
  line-height: 1.4;
  font-weight: bold;
  white-space: nowrap;
}
.mainvisual-brand__title {
  font-weight: 700;
  color: var(--pri-dark);
  font-size: 2.8rem;
  line-height: 1.4;
}
/* キッカー：ネイビー背景（少し透過）・角丸は下のみ（カンプ通り） */
.mainvisual-kicker {
  display: inline-block;
  padding: 0.2rem 1.2rem;
  background: var(--pri-dark);
  color: var(--white);
  font-weight: 700;
  font-size: 2.8rem;
  letter-spacing: 0.02em;
  margin-bottom: var(--s1);
}
.mainvisual-title {
  margin: 0 0 var(--s8);
  font-size: clamp(2.2rem, 2.1rem + 1.4vw, 4rem);
  line-height: 1.2;
  font-weight: 800;
  color: var(--pri-dark);
  letter-spacing: 0.05em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.mainvisual-title__line {
  display: inline-block;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.15em 0.35em 0 0;
  letter-spacing: 0.42rem;
}
.mainvisual-title__accent {
  color: var(--heading-orange);
  font-size: 6rem;
  letter-spacing: -0.02em;
  margin-left: -2.8rem;
  margin-right: -0.4em;
}
.mainvisual-title__large {
  font-size: 6rem;
  letter-spacing: -0.02em;
  margin-right: 1rem;
}
.mainvisual-title--sp {
  display: none;
}
.mainvisual-lead {
  color: var(--txt);
  line-height: 1.5;
  margin-bottom: 0;
  margin-top: clamp(var(--s5), 4vw, var(--s7));
  width: 65%;
}
.mainvisual-lead p {
  margin: 0 0 var(--s2);
}
.mainvisual-lead p:last-child {
  margin-bottom: 0;
}
.mainvisual-lead strong {
  font-weight: 700;
}
/* SP用ヒーロー画像（PCでは非表示）／見出しブロックはPCでラッパー無視 */
.mainvisual-sp-hero {
  display: none;
}
.mainvisual-head {
  display: contents;
}
/* =====================================================================
  Section1（section1.png）: 「デイサービス」フランチャイズ3選
===================================================================== */
#recommended {
  padding-top: var(--s6);
  padding-bottom: var(--s12);
  background: var(--white);
}

/* 下層共通（lower_bottom.php）：上部のみ3選詳細と同じ背景（#low-page 外＝フッター直前で全幅） */
#recommended.lower-bottom-reco {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding-top: var(--s12);
  padding-bottom: var(--s12);
  background-color: var(--white);
  background-image: url("img/bg_reco-detail.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  margin-top: 12rem;
}
.reco-sec-header {
  text-align: center;
  margin-bottom: 0;
  position: relative;
}
.reco-sec-header p {
  text-align: left;
}
.reco-sec-header::before {
  content: "";
  display: block;
  width: 11rem;
  height: 11rem;
  margin: 0 auto var(--s2);
  background: url("img/logo.png") no-repeat center center;
}
.reco-sec-header__title {
  margin: 0 0 3rem;
  font-size: clamp(2.6rem, 2.2rem + 1.2vw, 4.2rem) !important;
  font-weight: 700;
  line-height: 1.2;
  
}
.reco-sec-header__title a{
  position: relative;
  display: block;
}
.reco-sec-header__title a:after {
  content:"";
  position: absolute;
  width: 3.6rem;
  height: 3.6rem;
  right: 0;
  background: url("img/arrow_orange.png") no-repeat 0 0 !important;
  bottom: 10%;
}
.reco-sec-header__title .reco-sec-header__label {
  display: block;
  margin-bottom: 0;
  font-size: 3rem;
  font-weight: 700;
  color: var(--pri-dark);
}
.reco-detail .reco-sec-header__title .reco-sec-header__label {
  margin-bottom: 1rem;
}
.reco-sec-header__title .reco-sec-header__main {
  display: block;
  color: var(--pri-dark);
}
.reco-sec-header__title .reco-sec-header__num {
  font-size: 6rem;
  margin-left: 0.8rem;
  margin-right: 0.8rem;
}
#recommended .reco-grid {
  gap: var(--s6);
  margin-top: calc(-1 * var(--s3));
}
#recommended .c-card-wrapper {
  display: block; /* 高さ揃えをやめ、各カードは内容の高さに（右だけ下余白が出ないように） */
  /* min-widthは指定しない＝autoのまま＝グリッドセル幅いっぱいに（狭くならない） */
}
#recommended .c-card-wrapper > .reco-card {
  display: grid;
  grid-template-rows: auto auto auto; /* band / top（c-cardの外）/ body */
  width: 100%;
}
.reco-card {
  overflow: hidden;
  box-shadow: none;
  background: var(--white);
  border: 0.2rem solid var(--pri);
}
#recommended .reco-card__head {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#recommended .reco-card__head-inner {
  width: 92%;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--s2) var(--s2);
  background: var(--pri-dark);
  color: var(--white);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1.5;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

#recommended .reco-card__head-text {
  display: block;
  width: 100%;
}

/* PC幅では3行ぶんの高さで固定して3枚を揃える */
@media screen and (min-width: 768px) {
  #recommended .reco-card__head-inner {
    height: 13rem; /* 3行レイアウトに合わせた共通高さ */
  }
}
#recommended .reco-card__head-accent {
  font-size: 2.6rem;
}

#recommended .c-card-wrapper > .reco-card {
  margin-top: -0.2rem;
}
#recommended .reco-card__band {
  display: block;
  width: 100%;
  margin-top: 2rem;
  box-sizing: border-box;
  padding: var(--s2) var(--s3);
  background: var(--pri);
  color: var(--txt);
  font-weight: 700;
  font-size: 2.4rem;
  text-align: center;
  line-height: 1.2;
  position: relative;
}

/* 簡易3選: ツノはオレンジ帯の上部に配置 */
#recommended .reco-card__band::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2rem;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-top: 2rem solid var(--pri-dark);
}
.reco-card__body {
  padding: 0 var(--s4) var(--s4);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%; /* カード幅いっぱいに */
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}
.reco-card__top {
  background: #FFF6E8;
  padding: var(--s3) var(--s4);
  margin: 0 0 var(--s3);
  min-width: 0;
  overflow-x: hidden;
}
.reco-card__top > img {
  width: auto;
  max-width: 100%;
  height: 192px;
  object-fit: cover;
  display: block;
  margin: -1px auto 0;
}
.reco-card__name {
  margin: 0 0 2.5rem;
  padding: var(--s1) var(--s1);
  background: var(--white);
  color: #F89500;
  font-weight: 700;
  font-size: 2.4rem;
  text-align: center;
  border-radius: 5px;
  position: relative;
  z-index: 1;
}
/* キャプションを幅固定のラッパーで囲み、中だけでスクロール（BOXの幅が伸びない） */
.reco-card__caption-wrap {
  width: 100%;
  min-width: 0;
  margin-top: var(--s1);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reco-card__caption-wrap::-webkit-scrollbar {
  display: none;
}
#recommended .reco-card__top .caption {
  margin: 0;
  color: var(--txt-sub);
  font-size: 1.2rem;
  line-height: 1.5;
}
.reco-card__operate {
  padding: 0;
  /*! margin-bottom: var(--s2); */
}
.reco-card__operate-head {
  margin: 0 0 var(--s2);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--pri-dark);
  background: var(--c1);
  padding: var(--s1);
  text-align: center;
}
.reco-card__reason {
  margin-bottom: var(--s1);
  align-self: start;
}
.reco-card__bullets {
  margin: 0;
  padding-left: 0.8em;
  list-style: none;
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--txt);
}
.reco-card__bullets li:nth-child(1) {
  /* 1つ目の箇条書きは常に3行分の高さを確保してカード間の見た目を揃える */
  min-height: 4.8em; /* line-height(1.6) × 3行 = 4.8em 相当 */
}
.reco-card__bullets li:nth-child(2) {
  /* 2つ目も3行分の高さを確保 */
  min-height: 4.8em;
}
.reco-card__bullets li {
  position: relative;
  padding-left: 0.5em;
  margin-bottom: var(--s2);
}
.reco-card__bullets li::before {
  content: "";
  position: absolute;
  left: -0.5em;
  top: 0.6em;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--heading-orange);
}
.reco-card__reason-btn {
  display: block;
  margin: 0 0 var(--s2);
  padding: var(--s1);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--pri-dark);
  background: var(--c1);
  text-align: center;
}
.reco-card__reason-text {
  margin: 0;
  line-height: 1.75;
  color: var(--txt);
}
.reco-card__table {
  margin-bottom: var(--s2);
  font-size: 1.4rem;
  align-self: start;
}
.reco-card__table th,
.reco-card__table td {
  padding: var(--s1) 0;
  vertical-align: top;
  border-bottom: 1px solid var(--ln);
}
.reco-card__table tr:last-child th,
.reco-card__table tr:last-child td {
  border-bottom: none;
}
.reco-card__table th {
  color: var(--txt);
  font-weight: 500;
  width: 40%;
}

/* Section1: 3枚のテーブルデザイン */
#recommended .reco-card__table {
  background: var(--white);
  border: 1px solid var(--ln); /* テーブル全体の外枠 */
}
#recommended .reco-card__table th {
  background: var(--inv);
  text-align: left;
  width: 40%;
  border-right: 1px solid var(--ln); /* thの右側に縦線を追加 */
  vertical-align: middle; /* 縦中央寄せ */
}
#recommended .reco-card__table td {
  text-align: center;
  font-weight: 700;
}
/* 数字部分だけ大きく（単位や※はノーマルサイズのまま） */
#recommended .reco-card__table .reco-card__num {
  font-size: 3rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.reco-card__notes {
  margin: 0 0 var(--s4);
  align-self: start;
  max-width: 100%;
}
.reco-card__note {
  margin: 0;
  font-size: 1.2rem;
  color: var(--txt-sub);
  line-height: 1.6;
  text-align: left;
}
.reco-card__note + .reco-card__note {
  margin-top: 0.3em; /* 注釈同士は詰め気味に */
}

/* Section1の注釈はボタンとの間隔を少し詰める */
#recommended .reco-card__notes {
  margin-bottom: var(--s2);
}
.reco-card__cta {
  margin-top: auto;
  margin-bottom: 0;
  align-self: start; /* subgrid時は行を伸ばさず、下余白が出ないように */
}

/* 追加パーツ: まとめボックス（CHECK見出しは単体利用可） */
.c-check-heading {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s5);
}
.c-check-heading__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s12);
  height: var(--s12);
  border-radius: 50%;
  background: var(--acc);
  color: var(--white);
  font-weight: 700;
  font-size: var(--fs-m);
  line-height: 1;
  flex-shrink: 0;
  z-index: 1;
}
.c-check-heading__text {
  flex: 1;
  min-height: var(--s8);
  display: flex;
  align-items: center;
  padding: 0 var(--s3) 0 7rem;
  background: var(--pri-dark);
  color: var(--white);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: 1.3;
  margin-left: -6rem;
  z-index: 0;
}
.c-summary-box {
  padding: 0 var(--s5) var(--s5);
  background: var(--c1);
  margin-top: 6rem;
  margin-bottom: 6rem;
}
.c-summary-box__title {
  color: var(--suc);
  font-weight: 700;
  font-size: var(--fs-m);
}
.c-summary-box__body p {
  margin: 0;
}
/* 下層共通パーツ：余白の偏りを防ぐ（上に詰めすぎず、下余白を縮小） */
#recommended.lower-bottom-reco .reco-card__cta {
  margin-top: var(--s2);
}
#recommended.lower-bottom-reco .reco-card__body {
  gap: var(--s1);
  padding-bottom: var(--s1);
}
#recommended.lower-bottom-reco .reco-card__reason {
  margin-bottom: 0;
}
#recommended.lower-bottom-reco .reco-card__table {
  margin-bottom: 0;
}
#recommended.lower-bottom-reco .reco-card__notes {
  margin-bottom: var(--s1);
}

/* #low-page 内のコピペ用3選：気になる余白だけ詰める */
#low-page #recommended:not(.lower-bottom-reco) .reco-card__body {
  gap: var(--s-2);
  padding-bottom: var(--s2);
}
#low-page #recommended:not(.lower-bottom-reco) .reco-card__reason {
  margin-bottom: 0;
}
#low-page #recommended:not(.lower-bottom-reco) .reco-card__table {
  margin-bottom: 0;
  margin-block: 3rem 0;
}
#low-page #recommended:not(.lower-bottom-reco) .reco-card__notes {
  margin-bottom: var(--s1);
}
#low-page #recommended:not(.lower-bottom-reco) .reco-card__cta {
  margin-bottom: var(--s1);
}
#recommended .reco-card__cta a {
  padding: var(--s3) 4rem var(--s3) var(--s3);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  background:
    url("img/icon-web.svg") no-repeat right 1.6rem center / auto 2rem, var(--suc);
  box-shadow: 0.6rem 0.6rem 0 #236B0A;
}
#recommended .reco-card__cta.btn-web:hover a {
  transform: translate(0.6rem, 0.6rem);
  box-shadow: none;
}
/* =====================================================================
  Section2（section2.png）: 3選詳細
===================================================================== */
#recommended-detail {
  padding-top: var(--s12);
  padding-bottom: 12rem;
  background-color: var(--white);
  background-image: url("img/bg_reco-detail.jpg"), url("img/bg_reco-detail_btm.jpg");
  background-position: center top, center bottom;
  background-repeat: no-repeat, no-repeat;
}
.reco-detail-wrap {
  box-shadow: var(--sd-2);
  margin-top: calc(-1 * var(--s3));
}

#recommended-detail .l-container > .reco-detail-wrap:nth-child(3),
#recommended-detail .l-container > .reco-detail-wrap:nth-child(4) {
  margin-top: 3rem;
}

.reco-detail-title {
  text-align: center;
}
.reco-detail-title__label {
  display: inline-block;
  margin-bottom: var(--s2);
  padding: 0.5rem 1.2rem;
  border-radius: 50vh;
  background: var(--acc-dark);
  color: var(--white);
  font-weight: 800;
}
.reco-detail-title__main {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 900;
  color: var(--pri-dark);
}

.reco-detail-block--reason {
  padding: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}
.reco-detail-block--reason.l-stack-m {
  gap: 0;
}
.reco-detail-h3 {
  margin: 0 0 3rem;
  padding: var(--s3) var(--s6);
  background: var(--pri);
  color: var(--pri-dark);
  font-weight: 700;
  font-size: var(--fs-2xl);
  text-align: center;
  border-radius: 0;
}
.reco-detail-block--reason .reco-detail-h3 {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: var(--acc-dark);
  color: var(--white);
  text-align: center;
  font-size: var(--fs-xl);
  position: relative;
  line-height: 1.4;
}
#recommended-detail .reco-detail-block--reason .reco-detail-h3 {
  background: var(--acc-dark);
  color: var(--white);
}
.reco-detail-h3-main {
  display: block;
  padding: var(--s4);
  background: transparent;
  color: inherit;
  font-weight: 700;
  position: relative;
}
.reco-detail-h3-main::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.5rem;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 1.2rem solid transparent;
  border-right: 1.2rem solid transparent;
  border-top: 2rem solid var(--acc-dark);
}
.reco-detail-band {
  display: block;
  margin-top: 0;
  padding: var(--s4) var(--s4) var(--s2);
  background: var(--pri);
  color: var(--pri-dark);
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: 1.4;
}
.reco-detail-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s6);
  align-items: start;
}
.reco-detail-media {
  width: 34.5rem;
}
.reco-detail-block--reason .reco-detail-grid {
  margin-top: 5rem;
}
.reco-card--detail {
  border-radius: 0;
  box-shadow: none;
  border: 0.2rem solid var(--pri);
}
.reco-detail-intro {
  padding: var(--s6) 9.6rem;
  background: var(--c0);
  margin-bottom: 4rem;
}
.reco-card--detail .reco-card__band {
  margin: 0 auto var(--s4);
  padding: var(--s2) var(--s4);
  background: var(--white);
  color: var(--heading-orange);
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-xl);
  border-radius: 5px;
}


/* 3選詳細カード内の各ブロック左右余白 */
.reco-card--detail .reco-detail-block:not(.reco-detail-block--reason) {
  padding: var(--s6) 9.6rem;
}
.reco-detail-media img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  background: var(--c1);
}
.reco-detail-side {
  padding: var(--s4);
  border-radius: var(--r-md);
  background: var(--c1);
}
.reco-detail-intro .reco-detail-side {
  background: transparent;
  padding: 0;
}
.reco-detail-intro__text {
  margin: 0;
  color: var(--txt);
  line-height: 1.75;
}
.reco-detail-intro__text:last-of-type {
  margin-bottom: var(--s1);
}

.reco-detail-intro__table {
  width: auto;
  max-width: 100%;
  font-size: 1.4rem;
  background: var(--white);
  border: 1px solid var(--ln);
}
.reco-detail-intro__table th,
.reco-detail-intro__table td {
  padding: var(--s1) var(--s3);
  border-bottom: 1px solid var(--ln);
  vertical-align: middle;
}
.reco-detail-intro__table tr:last-child th,
.reco-detail-intro__table tr:last-child td {
  border-bottom: none;
}
.reco-detail-intro__table th {
  background: var(--inv);
  color: var(--txt);
  font-weight: 500;
  text-align: left;
  border-right: 1px solid var(--ln);
}
.reco-detail-intro__table td {
  text-align: center !important;
  font-weight: 700;
}
.reco-detail-intro__num {
  font-size: var(--fs-2xl);
  font-weight: 700;
  margin-right: 0.2em;
}
.reco-detail-intro__table + .caption {
  margin-top: -1rem;
  text-align: left;
}

/* リハプライドが選ばれる理由 */
.reco-detail-chosen__title {
  margin: 0 0 3rem;
  padding: var(--s3) var(--s6);
  background: var(--c2);
  color: var(--pri-dark);
  font-weight: 700;
  font-size: var(--fs-2xl);
  text-align: center;
  border-radius: 0;
  line-height: 1.4;
}
.reco-detail-block--voice .reco-detail-chosen__title{
  margin-bottom:7rem;
}
.reco-detail-block--support .reco-detail-chosen__title {
  margin: 0 0 6rem;
}
.reco-detail-chosen__body {
  display: grid;
  grid-template-columns: 1fr 34rem;
  gap: var(--s6);
  align-items: start;
  background: var(--white);
}
.reco-detail-chosen__content {
  min-width: 0;
}
.reco-detail-chosen__lead {
  margin: 0 0 var(--s2);
  padding-left: 6.2rem;
  position: relative;
  color: var(--pri-dark);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.5;
}
.reco-detail-chosen__lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1.5rem;
  width: 4.7rem;
  height: 4.7rem;
  background: url("img/icon_check.png") no-repeat center / contain;
}

#recommended-detail .l-container > .reco-detail-wrap:nth-child(4) .reco-detail-chosen__lead::before {
  top: 0;
}

.reco-detail-chosen__text {
  margin: 0 0 1.5rem;
  color: var(--txt);
  font-size: var(--fs-base);
  line-height: 1.75;
}
.reco-detail-block--chosen .reco-detail-media {
  width: 34rem;
  margin-left: auto;
}
.reco-detail-block--chosen .reco-detail-media img {
  margin-left: auto;
}

/* 本部支援 */
.reco-detail-support-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s6);
  margin-bottom: var(--s3);
}
.reco-detail-support-card {
  overflow: visible;
  background: var(--c0);
  box-shadow: none;
}
.reco-detail-support-card__head {
  position: relative;
  width: 80%;
  margin: calc(-1 * var(--s6)) auto 0;
  padding: var(--s2) var(--s4);
  padding-left: 8rem;
  background: var(--acc-dark);
  color: var(--white);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.4;
  border-radius: 0;
}
.reco-detail-support-card__head::before {
  content: "";
  position: absolute;
  left: var(--s3);
  top: 50%;
  transform: translateY(-50%);
  width: 4rem;
  height: 4rem;
  background: url("img/icon_check.png") no-repeat center / contain;
}
.reco-detail-support-card__head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.3rem;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-top: 1.6rem solid var(--acc-dark);
}
.reco-detail-support-card__body {
  padding: var(--s4);
  background: var(--c0);
}
.reco-detail-support-card__lead {
  margin: 0 0 var(--s2);
  color: #349312;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.5;
  text-align: center;
}
.reco-detail-support-card__text {
  margin: 0 0 var(--s2);
  color: var(--txt);
  font-size: var(--fs-base);
  line-height: 1.75;
}
.reco-detail-support-card__body .caption {
  margin: 0;
}
.reco-detail-support-cta {
  text-align: center;
}
.reco-detail-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.2rem;
  border-radius: 50vh;
  background: var(--acc-dark);
  color: var(--white);
  font-weight: 800;
}
.reco-detail-check {
  margin: 0;
  padding-left: 1.2em;
  color: var(--txt);
}
.reco-detail-check li::marker {
  color: var(--suc);
}
.reco-detail-voice {
  position: relative;
  overflow: visible;
  padding: var(--s7) var(--s6) var(--s6);
  background: var(--c1);
  border-radius: 0;
  box-shadow: none;
  border: none;
}

.reco-detail-block--voice .reco-detail-voice:first-of-type {
  margin-bottom: 6rem;
}

#recommended-detail .l-container > .reco-detail-wrap:nth-child(3) .reco-detail-voice {
  margin-bottom: 1rem;
}

#recommended-detail .l-container > .reco-detail-wrap:nth-child(4) .reco-detail-block--voice .reco-detail-chosen__title {
  margin-bottom: 3rem;
}

#recommended-detail .l-container > .reco-detail-wrap:nth-child(4) .reco-detail-block--voice .reco-detail-chosen__title + p {
  text-align: center;
}

.reco-detail-voice-top {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--s5);
  align-items: start;
  margin-top: calc(-1 * var(--s13));
}

.reco-detail-voice-icon {
  width: 12rem;
  max-width: 100%;
}

.reco-detail-voice-icon img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

.reco-detail-voice-bubble {
  position: relative;
  padding: var(--s4) var(--s6);
  background: var(--acc-dark);
  color: var(--white);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1.5;
}

.reco-detail-voice-bubble::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: 4rem;
  width: 0;
  height: 0;
  border-top: 1rem solid transparent;
  border-bottom: 1rem solid transparent;
  border-right: 2rem solid var(--acc-dark);
}

.reco-detail-voice-main {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--s6);
  align-items: start;
}

.reco-detail-voice-photo {
  min-width: 0;
}

.reco-detail-voice-photo img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

.reco-detail-voice-info {
  padding: 0 2rem 2rem;
  background-color: var(--white);
}

.reco-detail-voice-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
}

.reco-detail-voice-table th,
.reco-detail-voice-table td {
  padding: var(--s3) var(--s2) var(--s2) 0;
  border-bottom: 0.1rem solid var(--pri);
  font-size: var(--fs-base);
}

.reco-detail-voice-table th {
  width: 5em;
  text-align: left;
  color: var(--pri-dark);
  font-weight: 800;
}

.reco-detail-voice-table td {
  color: var(--txt);
}

.reco-detail-voice-text {
  margin: -2rem 0 0;
  color: var(--txt);
  line-height: 1.75;
}

.reco-detail-voice-close {
  max-width: 26rem;
  width: 95%;
  margin: 0 auto;
  padding: var(--s2) var(--s6);
  border: 0.2rem solid var(--ln);
  text-align: center;
  font-weight: 700;
  background: var(--white);
}

.reco-detail-block--voice .acc-more-btn {
  max-width: 26rem;
  width: 95%;
  margin: -2rem auto 0;
  padding: var(--s2) 6rem var(--s2) var(--s6);
  border: 0.2rem solid var(--ln);
  border-radius: 50vh;
  background: var(--white);
  color: var(--pri-dark);
  text-align: center;
  font-weight: 700;
  position: relative;
  cursor: pointer;
}

.reco-detail-block--voice .acc-more-btn::before,
.reco-detail-block--voice .acc-more-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--s6);
  transform: translateY(-50%);
  background: var(--acc-dark);
}

.reco-detail-block--voice .acc-more-btn::before {
  width: 2rem;
  height: 0.2rem;
}

.reco-detail-block--voice .acc-more-btn::after {
  width: 0.2rem;
  height: 2rem;
  right: calc(var(--s6) + 0.9rem);
  transition: opacity 0.2s ease;
}

.reco-detail-block--voice .acc-more-btn.is-open::after {
  opacity: 0;
}

.reco-detail-block--voice .more-content {
  display: none;
}

.reco-detail-voice-sub-card {
  padding: var(--s5);
}

.reco-detail-voice-sub-head {
  color: var(--pri-dark);
  font-weight: 800;
  font-size: 2rem;
  border-bottom: 0.1rem solid var(--heading-orange);
  padding-bottom: var(--s1);
}

.reco-detail-voice-sub-card:first-child {
  background: var(--white);
  border-top: none;
}

.reco-detail-voice-sub-card:first-child .reco-detail-voice-sub-head {
  padding-bottom: var(--s1);
  border-bottom: 0.1rem solid var(--heading-orange);
}

.reco-detail-voice-sub-card:nth-child(2) {
  background: var(--c0);
}

.reco-detail-voice-sub-text {
  margin: 0;
  color: var(--txt);
  line-height: 1.75;
}

/* SP: 詳細3選（#recommended-detail）の文字サイズを簡易3選に合わせる（PCは上記の既定のまま） */
@media screen and (max-width: 767px) {
  #recommended-detail .reco-detail-wrap {
    margin-top: calc(-1 * var(--s5));
  }

  #recommended-detail .reco-detail-intro {
    padding: var(--s6) var(--s3);
  }

  #recommended-detail .reco-detail-grid {
    grid-template-columns: 1fr;
  }

  #recommended-detail .reco-detail-media {
    width: 100%;
    margin: 0 auto;
  }

  #recommended-detail .reco-detail-media img {
    width: 100%;
  }

  #recommended-detail .reco-detail-title__main {
    font-size: 2.2rem;
  }

  #recommended-detail .reco-detail-h3 {
    font-size: 2.2rem;
  }

  #recommended-detail .reco-detail-block--reason .reco-detail-h3 {
    font-size: 2.2rem;
  }

  #recommended-detail .reco-detail-block--reason .reco-detail-h3::after {
    bottom: -1.5rem;
  }

  #recommended-detail .reco-detail-block--reason .reco-detail-h3-accent {
    font-size: 2.6rem;
    display: block;
  }

  #recommended-detail .reco-detail-band {
    font-size: 2.4rem;
    line-height: 1.2;
  }

  #recommended-detail .reco-card--detail .reco-card__band {
    font-size: 2.4rem;
    /*! margin-bottom: 0; */
  }

  #recommended-detail .reco-detail-intro__text {
    font-size: var(--fs-base);
  }

  #recommended-detail .reco-detail-intro__num {
    font-size: 3rem;
  }

  #recommended-detail .reco-detail-chosen__title {
    font-size: 2.2rem;
    padding: var(--s2);
    margin-bottom: 0;
  }

  #recommended-detail .reco-detail-voice-text {
    font-size: var(--fs-base);
    padding: 0 2rem;
  }

  #recommended-detail .reco-detail-voice-sub-head {
    font-size: 1.8rem;
    line-height: 1.4;
  }

  #recommended-detail .reco-detail-voice-sub-text {
    font-size: var(--fs-base);
  }

  #recommended-detail .reco-detail-cost-item__num {
    font-size: 3rem;
  }

  #recommended-detail .reco-detail-cost-rev__num {
    font-size: 3rem;
  }
}

/* 会社一覧 */
.company-list {
  background: var(--white);
}

.company-list .reco-sec-header__title .reco-sec-header__main {
  display: block;
  color: var(--pri-dark);
}

.company-list .reco-sec-header__main .c-hlink {
  color: inherit;
}

.company-list-intro {
  margin: 0 auto 1rem;
  text-align: left;
  color: var(--txt);
  line-height: 1.75;
  font-size: var(--fs-base);
}

.company-list__grid {
  gap: var(--s6);
}

@media screen and (max-width: 767px) {
  #company-list .l-container {
    max-width: 100%;
    width: 100%;
    padding: 0 var(--s2);
    box-sizing: border-box;
  }

  #company-list .company-list__grid {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #company-list .company-list__card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #company-list .company-list__card-head .company-list__card-title a {
    font-size: 2.2rem !important;
  }
}

.company-list__card {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--c0);
  border: 0.1rem solid var(--pri);
  border-radius: 0;
}

.company-list__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  /*! padding: var(--s3) var(--s4); */
  background: url("img/bg_card-head.jpg") no-repeat right top / cover;
}

.company-list__card-title {
  margin: 0;
  font-size: var(--fs-l);
  font-weight: 800;
  color: var(--pri-dark);
  flex: 1;
  text-align: center;
}

.company-list__card-title a {
  display: block;
  padding-right: 2.8rem;
  color: inherit;
}

#company-list .company-list__card-head .company-list__card-title a {
  background-image: url("img/arrow_navy.png");
  background-position: right 1.5rem center;
  background-repeat: no-repeat;
  padding: var(--s2) var(--s4);
  line-height: 1.2;
  font-size: var(--fs-2xl);
}

.company-list__card-body {
  padding: var(--s2);
  flex: 1;
}

#company-list .company-list__card-body img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  background: var(--c1);
}

.company-list__card-text {
  margin: 1rem 0 var(--s3);
  color: var(--txt);
  font-size: var(--fs-base);
  line-height: 1.75;
}

.company-list__meta {
  padding: 0 1.5rem 2rem;
  background-color: var(--white);
}

.company-list__meta-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
}

.company-list__meta-table th,
.company-list__meta-table td {
  padding: var(--s2) 0;
  border-bottom: 0.1rem solid var(--pri);
  word-break: break-word;
}

.company-list__meta-table th {
  width: 40%;
  color: var(--pri-dark);
  font-weight: 800;
  text-align: left;
  padding-right: var(--s2);
}

.company-list__meta-table td {
  color: var(--txt);
  font-weight: 800;
  text-align: left;
}

.company-list__meta-table .company-list__meta-num {
  font-size: 2.6rem;
}

.company-list__meta-note {
  margin: 0;
  font-size: var(--fs-s);
  color: var(--txt-sub);
  line-height: 1.6;
}

#company-list .company-list__card-body .caption.caption_scroll + .caption.caption_scroll {
  margin-top: 0;
}

.company-list__table {
  margin-top: 2rem !important;
}

.company-list__card-footer {
  padding: 0 var(--s2) var(--s2);
  text-align: right;
}

.company-list__card-footer .btn-link a {
  font-size: var(--fs-s);
  color: var(--pri-dark);
  font-weight: 700;
}

#company-list .btn-link a {
  background-image: url("img/arrow_navy.png");
  background-position: right bottom 0.5rem;
  text-decoration: none;
  padding-bottom: 0;
}

.company-list__more {
  text-align: center;
  margin-top: var(--s6);
}

#company-list .company-list__more .acc-more-btn {
  max-width: 26rem;
  width: 95%;
  margin: 0 auto;
  padding: var(--s2) 6rem var(--s2) var(--s6);
  border: 0.2rem solid var(--ln);
  border-radius: 50vh;
  background: var(--white);
  color: var(--pri-dark);
  text-align: center;
  font-weight: 700;
  position: relative;
  cursor: pointer;
}

#company-list .company-list__more .acc-more-btn::before,
#company-list .company-list__more .acc-more-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--s6);
  transform: translateY(-50%);
  background: var(--acc-dark);
}

#company-list .company-list__more .acc-more-btn::before {
  width: 2rem;
  height: 0.2rem;
}

#company-list .company-list__more .acc-more-btn::after {
  width: 0.2rem;
  height: 2rem;
  right: calc(var(--s6) + 0.9rem);
  transition: opacity 0.2s ease;
}

#company-list .company-list__more .acc-more-btn.is-open::after {
  opacity: 0;
}

#company-list .company-list__more .more-content {
  display: none;
  margin-top: var(--s6);
}

@media screen and (max-width: 767px) {
  .reco-detail-voice {
    padding: 0;
    margin-top: 7rem;
  }

  .reco-detail-voice-top {
    grid-template-columns: 10rem 1fr;
    gap: var(--s4);
  }

  .reco-detail-voice-icon {
    width: 10rem;
    margin: 0 auto;
    z-index: 1;
  }

  .reco-detail-voice-main {
    grid-template-columns: 1fr;
    padding: 0 2rem;
    margin-top: -2rem;
  }
}
.reco-detail-cost-pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
}
.reco-detail-cost-pills .reco-detail-pill {
  width: 100%;
}

/* 費用（開業・運営費用） */
.reco-detail-block--cost.l-stack-m {
  gap: var(--s3);
}

.reco-detail-block--cost .reco-detail-chosen__title {
  margin-bottom: var(--s3);
}

.reco-detail-block--cost.reco-detail-block--cost-kiraku .reco-detail-chosen__title {
  margin-bottom: var(--s2);
}

.reco-detail-cost-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: var(--s2);
  padding-bottom: var(--s2);
  border-bottom: 0.1rem solid var(--pri);
}

.reco-detail-cost-row__text {
  margin: 0;
  flex: 1;
  min-width: 0;
  color: var(--txt);
  font-weight: 700;
}

.reco-detail-cost-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s6);
}

.reco-detail-cost-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s2);
  align-items: start;
  padding-bottom: var(--s3);
  border-bottom: 0.1rem solid var(--pri);
}

.reco-detail-cost-item__head {
  color: var(--pri-dark);
  font-weight: 800;
  white-space: nowrap;
  width: 12.5rem;
  padding-top: 2rem;
}

.reco-detail-cost-item__body {
  color: var(--txt);
  font-weight: 700;
}

.reco-detail-cost-item__body ul {
  margin: var(--s1) 0 0;
}

.reco-detail-cost-item__body li {
  margin: 0;
  padding: 0;
  line-height: 1.4;
}

.reco-detail-cost-item__body li + li {
  margin-top: var(--s1);
}

.reco-detail-cost-item__num {
  font-size: 3.2rem;
  font-weight: 900;
  color: var(--pri-dark);
}

.reco-detail-cost-item__note {
  font-size: var(--fs-s);
  font-weight: 700;
}

.reco-detail-cost-rev {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s3);
  align-items: start;
  padding-bottom: var(--s2);
  border-bottom: 0.1rem solid var(--pri);
}

.reco-detail-cost-rev__head {
  margin-top: 0.2em;
  color: var(--pri-dark);
  font-weight: 800;
  white-space: nowrap;
  width: 12rem;
}

.reco-detail-cost-rev__body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s6);
}

.reco-detail-cost-rev__tag {
  display: inline-block;
  padding: 0 0.8em;
  background: var(--pri-dark);
  color: var(--white);
  font-weight: 800;
  font-size: var(--fs-s);
}

.reco-detail-cost-rev__row {
  color: var(--txt);
  font-weight: 800;
}

.reco-detail-cost-rev__num {
  font-size: 3.2rem;
  font-weight: 900;
  color: var(--pri-dark);
}

.reco-detail-cost-rev__sub {
  margin-left: var(--s2);
  font-weight: 700;
}

.reco-detail-cost-rev__num-s {
  font-weight: 900;
  color: var(--pri-dark);
}

.reco-detail-cost-foot {
  margin: 0;
  color: var(--txt);
  font-size: var(--fs-s);
  line-height: 1.75;
}

.reco-detail-cost .reco-detail-cost-rev + .caption {
  margin-top: calc(-1 * var(--s3));
}

@media screen and (max-width: 767px) {
  .reco-detail-cost-row {
    flex-wrap: wrap;
  }

  .reco-detail-cost-grid {
    grid-template-columns: 1fr;
  }

  .reco-detail-cost-rev {
    grid-template-columns: 1fr;
  }

  .reco-detail-cost-rev__body {
    grid-template-columns: 1fr;
  }
}
.reco-detail-unit {
  text-align: right;
  font-weight: 800;
  color: var(--pri-dark);
}
.reco-detail-total th,
.reco-detail-total td {
  background: var(--c1);
  font-weight: 900;
}

/* モデル収益：シミュレーション表 */
.c-reco-sim-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.c-reco-sim-scroll + .c-reco-sim-scroll {
  margin-top: var(--s2);
}

.c-reco-sim-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-s);
  background: var(--white);
}

.c-reco-sim-table--kpi {
  min-width: 72rem;
}

.c-reco-sim-table--pl {
  min-width: 84rem;
}

.c-reco-sim-table--lv {
  min-width: 76rem;
}

.c-reco-sim-table th,
.c-reco-sim-table td {
  border: 0.1rem solid var(--ln);
  padding: var(--s1) var(--s2);
  vertical-align: middle;
}

.c-reco-sim-table thead th {
  background: var(--cE);
  color: var(--white);
  font-weight: 700;
  text-align: center;
}

.c-reco-sim-table--kpi tbody th {
  font-weight: 700;
  text-align: center;
}

.c-reco-sim-table--kpi tbody td {
  text-align: right;
}

.c-reco-sim-table--kpi .reco-sim-tr--rate th,
.c-reco-sim-table--kpi .reco-sim-tr--sub th {
  background: var(--pri);
  color: var(--txt);
}

.c-reco-sim-table--pl td {
  text-align: right;
}

.c-reco-sim-table--pl tbody th {
  font-weight: 700;
  text-align: left;
}

.c-reco-sim-table--pl .reco-sim-tr--sales th {
  background: #fff197;
  color: var(--txt);
}

.c-reco-sim-table--pl .reco-sim-tr--sales td {
  background: #fffbe2;
}

.c-reco-sim-table--pl .c-reco-sim-pl-vlabel {
  box-sizing: border-box;
  position: relative;
  min-width: var(--s6);
  padding: 0;
  overflow: visible;
  background: color-mix(in srgb, var(--bor) 55%, var(--c1));
  color: var(--txt);
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}

.c-reco-sim-table--pl .c-reco-sim-pl-vlabel__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  padding-block: var(--s2);
  padding-inline: var(--s1);
}

.c-reco-sim-table--pl .c-reco-sim-pl-vlabel__txt {
  display: inline-block;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 1;
}

.c-reco-sim-table--pl .reco-sim-tr--exp th {
  background: var(--lig);
  color: var(--txt);
}

.c-reco-sim-table--pl .reco-sim-tr--sgna-total th {
  background: color-mix(in srgb, var(--bor) 35%, var(--c1));
  color: var(--txt);
}

.c-reco-sim-table--pl .reco-sim-tr--sgna-total td {
  background: var(--lig);
  color: var(--txt);
}

.c-reco-sim-table--pl .reco-sim-tr--profit th {
  background: #97efbd;
  color: var(--txt);
}

.c-reco-sim-table--pl .reco-sim-tr--profit td {
  background: #ebfff3;
}

.c-reco-sim-table--pl .reco-sim-tr--cum th {
  background: var(--pri);
  color: var(--txt);
}

.c-reco-sim-table--pl .reco-sim-tr--cum td {
  background: var(--c0);
}

.c-reco-sim-table--lv thead th {
  background: var(--cE);
}

.c-reco-sim-table--lv {
  table-layout: fixed;
}

.c-reco-sim-table--lv thead th:nth-child(1),
.c-reco-sim-table--lv thead th:nth-child(2) {
  text-align: center;
}

.c-reco-sim-table--lv thead th:first-child,
.c-reco-sim-table--lv tbody td.c-reco-sim-lv-cat {
  width: 10rem;
  padding-inline: var(--s1);
  white-space: nowrap;
}

.c-reco-sim-table--lv tbody td.c-reco-sim-lv-cat {
  text-align: left;
}

.c-reco-sim-table--lv .reco-sim-tr--lv-sales .c-reco-sim-lv-cat,
.c-reco-sim-table--lv .reco-sim-tr--lv-exp .c-reco-sim-lv-cat {
  text-align: center;
}

.c-reco-sim-table--lv tbody td {
  text-align: right;
}

.c-reco-sim-table--lv thead th:nth-child(2),
.c-reco-sim-table--lv tbody td.reco-sim-lv-name {
  width: 16rem;
  padding-inline: var(--s1);
}

.c-reco-sim-table--lv .reco-sim-lv-name {
  text-align: left;
  font-weight: 700;
  background: var(--lig);
}

.c-reco-sim-lv-cat,
.c-reco-sim-lv-cat--tall {
  background: color-mix(in srgb, var(--bor) 30%, var(--c1));
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}

.c-reco-sim-table--lv .reco-sim-tr--lv-sales .c-reco-sim-lv-cat {
  background: #fff197;
  color: var(--txt);
}

.c-reco-sim-table--lv .reco-sim-tr--lv-sales .reco-sim-lv-name {
  background: #ffefbd;
}

.c-reco-sim-table--lv .reco-sim-tr--lv-sales td:not(.reco-sim-lv-name, .c-reco-sim-lv-cat) {
  background: #fffbe2;
}

.c-reco-sim-table--lv .reco-sim-tr--lv-pay .c-reco-sim-lv-cat {
  background: color-mix(in srgb, var(--bor) 55%, var(--c1));
}

.c-reco-sim-table--lv .reco-sim-tr--lv-profit td {
  background: color-mix(in srgb, var(--suc) 10%, var(--white));
  font-weight: 700;
}

.c-reco-sim-table--lv .reco-sim-tr--lv-profit td:not(:first-child) {
  background: #ebfff3;
}

.c-reco-sim-table--lv .reco-sim-tr--lv-profit td:first-child {
  background: #97efbd;
  text-align: left;
}

.c-reco-sim-table--lv .reco-sim-tr--lv-sub td {
  background: var(--c1);
}

.c-reco-sim-table--lv .reco-sim-tr--lv-sub td:first-child {
  background: color-mix(in srgb, var(--bor) 30%, var(--c1));
  font-weight: 700;
  text-align: left;
}

.c-reco-sim-table--lv .reco-sim-tr--lv-sub-lite td:first-child {
  background: var(--c1);
}

.c-reco-sim-table--lv .reco-sim-tr--lv-exp-total td:not(:first-child) {
  background: var(--c1);
}

.c-reco-sim-table--lv .reco-sim-tr--lv-profit-strong td {
  background: color-mix(in srgb, var(--suc) 16%, var(--white));
}

.c-reco-sim-table--lv .reco-sim-tr--lv-profit-strong td:not(:first-child) {
  background: #fff1de;
}

.c-reco-sim-table--lv .reco-sim-tr--lv-profit-strong td:first-child {
  background: #ffbc57de;
}

.c-reco-sim-table--lv tbody tr:not(.reco-sim-tr--lv-sales):not(.reco-sim-tr--lv-profit):not(.reco-sim-tr--lv-profit-strong) td:not(.c-reco-sim-lv-cat):not(.reco-sim-lv-name):not([colspan]) {
  background: var(--white);
}

.c-reco-sim-table--lv tbody tr.reco-sim-tr--lv-exp-total td:not(.c-reco-sim-lv-cat):not(.reco-sim-lv-name):not([colspan]) {
  background: var(--c1);
}

.c-reco-sim-table--lv .reco-sim-tr--lv-exp-total td:not(.reco-sim-lv-name) {
  background: var(--c1) !important;
}

.c-reco-sim-table--kiraku tbody th {
  font-weight: 700;
  text-align: center;
}

.c-reco-sim-table--kiraku tbody td {
  text-align: right;
}

.c-reco-sim-table--kiraku {
  min-width: 72rem;
}

.c-reco-sim-table--kiraku .reco-sim-tr--sales th {
  background: #fff197;
  color: var(--txt);
}

.c-reco-sim-table--kiraku .reco-sim-tr--sales td {
  background: #fffbe2;
}

.c-reco-sim-table--kiraku .reco-sim-tr--sub th {
  background: #ffbc57de;
  color: var(--txt);
}

.c-reco-sim-table--kiraku .reco-sim-tr--sub td {
  background: #fff1de;
}

.c-reco-sim-table--kiraku .reco-sim-tr--exp th {
  background: var(--lig);
}

.c-reco-sim-table--kiraku .reco-sim-tr--profit th {
  background: #97efbd;
  color: var(--txt);
}

.c-reco-sim-table--kiraku .reco-sim-tr--profit td {
  background: #ebfff3;
}

.c-reco-sim-table--kiraku .reco-sim-tr--cum th {
  background: #97efbd;
  color: var(--txt);
}

.c-reco-sim-table--kiraku .reco-sim-tr--cum td {
  background: #ebfff3;
}

.c-reco-sim-table td.reco-sim-td--minus {
  color: #cc0000;
}

/* 運営会社情報 */
.reco-detail-block--company.l-stack-m {
  gap: var(--s3);
}

.reco-detail-block--company {
  padding-bottom: 9.6rem !important;
}

.reco-detail-block--company .reco-detail-chosen__title {
  margin-bottom: var(--s3);
}

.reco-detail-company-text {
  margin: 0;
  color: var(--txt);
  line-height: 1.75;
}

.reco-detail-company .c-table {
  border: 0.1rem solid var(--ln);
}

.reco-detail-company .c-table th,
.reco-detail-company .c-table td {
  text-align: left;
  padding: var(--s3) var(--s4);
  border-bottom: 0.1rem solid var(--ln);
}

.reco-detail-company .c-table th {
  background: var(--c1);
  font-weight: 800;
  width: 28%;
  border-right: 0.1rem solid var(--ln);
  text-align: center;
}

.reco-detail-company .c-table td {
  background: var(--white);
}

.reco-detail-company .c-table tr:last-child th,
.reco-detail-company .c-table tr:last-child td {
  border-bottom: none;
}
.btn-web a {
  padding: var(--s3) 7.2rem var(--s3) var(--s6);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  background:
    url("img/icon-web.svg") no-repeat right 2.6rem center / auto 2.4rem,
    var(--suc);
  box-shadow: 0.6rem 0.6rem 0 #236B0A;
}

.btn-web:hover a {
  transform: translate(0.6rem, 0.6rem);
  box-shadow: none;
}

/* =====================================================================
  汎用プレースホルダー用スタイル
  ===================================================================== */
.c-sec--detail {
  background: var(--c1);
}
/* 見出しスタイル */
.c-h2 {
  font-size: var(--fs-xxl);
  font-weight: 700;
  text-align: center;
  color: var(--pri-dark);
}

.c-h3 {
  font-size: var(--fs-l);
  font-weight: bold;
  color: var(--txt);
  text-align: center;
}

.c-h4 {
  font-size: var(--fs-m);
  font-weight: bold;
  padding: var(--s2) var(--s3);
  background: var(--sub);
  color: white;
}

/* 見出し内リンク */
.c-hlink {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  padding: 0 var(--s5);
  background: url("./img/arrow-s.svg") no-repeat center right / auto 0.8em;
  transition: opacity 0.2s ease;
}

.c-hlink:hover {
  text-decoration: none;
  opacity: 0.6;
}

/* テキストユーティリティ */
.c-lead {
  margin-bottom: var(--s3);
  color: var(--txt);
  font-size: var(--fs-md);
  line-height: 1.6;
}

.c-desc {
  margin: auto;
  max-width: 90rem;
  color: var(--txt);
}

/* カードコンポーネント */
.c-card {
  background: var(--white);
}

#recommended .c-card.reco-card__body {
  padding: 0 var(--s2) var(--s4);
}

.c-card--large {
  padding: var(--s4);
}

.c-sec--detail .c-card--large {
  padding: var(--s4) calc((100% - 90rem) / 2) var(--s6);
  background: var(--white);
}

.c-card--small {
  padding: var(--s2);
}

.c-cardTitle {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0 0 var(--s2);
  color: var(--txt);
}

/* バッジコンポーネント */
.c-badge {
  text-align: center;
  padding: var(--s1) var(--s2);
  background: var(--pri);
  color: white;
  font-size: var(--fs-xl);
  font-weight: bold;
  margin-bottom: 0; /* ギャップなしの縦積みのため */
}

/* テーブルコンポーネント（トップのテーブルデザイン・サイト共通） */
.c-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  background: var(--white);
  border: 0.1rem solid var(--ln);
}

.c-table th,
.c-table td {
  padding: var(--s2);
  border-bottom: 0.1rem solid var(--ln);
  word-break: break-word;
}

.c-table th {
  text-align: center;
}

.c-table td {
  text-align: left;
}

.c-table tr:last-child th,
.c-table tr:last-child td {
  border-bottom: none;
}

.c-table th {
  background: var(--inv);
  font-weight: bold;
  color: var(--txt);
  width: 30%;
  border-right: 0.1rem solid var(--ln);
}

.c-table td {
  background: var(--white);
}

/* =====================================================================
  横スクロールテーブル（SP想定：l-scroll-x-sp）
===================================================================== */
.l-scroll-x-sp {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.l-scroll-x-sp table {
  width: 100%;
  min-width: 0;
}
.l-scroll-x-sp .c-table {
  border-collapse: collapse;
}
.l-scroll-x-sp .c-table th,
.l-scroll-x-sp .c-table td {
  border-bottom: 0.1rem solid var(--ln) !important;
}
.l-scroll-x-sp .c-table tr:last-child th,
.l-scroll-x-sp .c-table tr:last-child td {
  border-bottom: 0.1rem solid var(--ln) !important;
}

/* 横スクロールテーブル：1列目を固定（.c-table の有無に関わらず） */
.l-scroll-x-sp table tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: inset 0.1rem 0 0 var(--ln), inset -0.1rem 0 0 var(--ln);
}
.l-scroll-x-sp table thead tr > :first-child {
  z-index: 3;
  background: var(--inv);
}
.l-scroll-x-sp table tbody tr > :first-child {
  background: var(--inv);
}

/* 下層 #low-page: 縦積み用・collapse 起因で欠ける罫線を PC/SP 共通で補完 */
#low-page .l-scroll-x-sp th,
#low-page .l-scroll-x-sp td {
  border-top: 0.1rem solid var(--ln) !important;
  border-bottom: 0.1rem solid var(--ln) !important;
}

/* SP時のみ：横スクロールが発生するよう最小幅を付与 */
@media screen and (max-width: 767px) {
  .l-scroll-x-sp table {
    width: max-content;
    min-width: 90rem;
  }
}

#company-list .company-list__card-body {
  text-align: left;
}

#company-list .company-list__card-body .c-table th,
#company-list .company-list__card-body .c-table td {
  text-align: left;
}

/* =============================================================
  簡易訴求カード subgrid 対応
============================================================= */

/* カードラッパー（バッジ + カード）の縦積みレイアウト */
.c-card-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0; /* バッジとカードの間のギャップを除去 */
}

/* カード自体を縦フレックスにして汎用化（可変要素対応） */
.c-card--grid {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  flex: 1; /* 残りの高さを全て使用 */
}

/* 下部ブロック（おすすめする理由） */
.c-cardReason {
  display: grid;
  gap: var(--s1);
  padding: var(--s2);

  background: var(--c3);
}

.c-cardReason__label {
  font-weight: 700;
  color: var(--pri-dark);
}

.c-cardReason__text {
  color: var(--txt);
  line-height: 1.8;
}

/* 下部ブロック（キャッチ + p）2種 */
.c-cardCatch {
  display: grid;
  grid-template-rows: auto 1fr; /* キャッチは自動、説明文は残りスペース */
  gap: var(--s-2);
  padding: var(--s2);
}

.c-cardCatch--a {
  background: var(--c0);
}

.c-cardCatch--b {
  background: var(--c1);
}

.c-cardCatch__lead {
  font-weight: 700;
  color: var(--txt);
  font-size: var(--fs-m);
}

.c-cardCatch__desc {
  margin: 0;
  color: var(--txt);
  align-self: start; /* 説明文を上端に配置 */
}

/* 下部領域（理由・キャッチ群）を一括ラップし、最下段へ押し下げ */
.c-cardFooter {
  display: grid;
  gap: var(--s2);
  margin-top: auto;
}

/* 理由ラベルを独立したブロックとして配置 */
.c-cardReason__label {
  display: block;
  padding: var(--s2);
  background: var(--c2);
  font-weight: 700;
  color: var(--pri-dark);
  font-size: var(--fs-m);
}

/* カードは内容の高さ（右だけ下余白が出ないように高さ揃えは行わない） */
#recommended .l-grid-3 {
  align-items: start;
}

/* Section1はsubgridを使わず、カードは内容の高さで右だけ下余白が出ないようにする */

/* c-featureCard コンポーネント*/
.c-featureCard {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--s-2);
  padding: var(--s2);
  background: var(--c1);
}

.c-featureCard__lead {
  font-weight: 700;
  color: var(--txt);
  font-size: var(--fs-m);
}

/* =============================================================
  会社一覧カード subgrid 対応
============================================================= */

/* =====================================================================
  Section3（section3.png）: 会社一覧（カンプ参照なしで全体に馴染ませる）
===================================================================== */
#company-list {
  background: var(--white);
}
#company-list .c-h2 {
  color: var(--pri-dark);
}
#company-list .c-hlink {
  background-image: inherit;
}
#company-list .l-grid-3 {
  gap: var(--s6);
}
#company-list .c-company-card {
  border-top: 0.6rem solid var(--pri);
  border-radius: var(--r-lg);
}
#company-list .c-company-card img {
  border-radius: var(--r-md);
  background: var(--c0);
}
#company-list .c-company-card .c-h3 {
  margin: 0;
  text-align: left;
  color: var(--pri-dark);
}
#company-list .c-company-card .c-h3 a {
  color: var(--pri-dark);
}
#company-list .c-company-card p {
  margin: 0;
  color: var(--txt);
}

/* =====================================================================
  Section4（section4.png）: コラム
===================================================================== */
#column {
  padding-top: var(--s12);
  padding-bottom: var(--s12);
  background: var(--inv);
}
#column .reco-sec-header::before {
  width: 11rem;
  height: 11rem;
  background: url("img/icon-column.png") no-repeat center center / contain;
}
#column .c-hlink {
  color: inherit;
  text-decoration: none;
  background: none;
  padding: 0;
}
.column-sec-lead {
  margin: 0;
  color: var(--txt);
  text-align: left;
}
.column-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s6);
}
.column-card {
  position: relative;
  background: var(--white);
  padding: var(--s3) var(--s3) var(--s5);
  box-shadow: var(--sd-1);
}
.column-card::before {
  content: "";
  position: absolute;
  top: -1rem;
  left: 1rem;
  width: 4.7rem;
  height: 6.5rem;
  background: url("img/icon-column-bookmark.png") no-repeat 0 0;
  z-index: 1;
  background-size: 100%;
}
.column-card__title {
  margin: 0 0 var(--s2);
  color: var(--pri-dark);
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.5;
}
#column .column-card .column-card__title a{
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  padding: 2rem 5rem 2rem 4rem;
  background-color: var(--c0);
  text-align: left;
  font-size: var(--fs-2xl);
  line-height: 1.4;
}
#column .column-card .column-card__title a::after {
  content: "";
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  background: url("img/arrow_orange.png") no-repeat 0 0;
  background-size: 100%;
}
.column-card__text {
  margin: 0;
  color: var(--txt);
  font-size: 1.4rem;
}
.column-more {
  margin-top: var(--s6);
}
#column .column-more .acc-more-btn {
  max-width: 26rem;
  width: 95%;
  margin: 0 auto;
  padding: var(--s2) 6rem var(--s2) var(--s6);
  border: 0.2rem solid var(--ln);
  border-radius: 50vh;
  background: var(--white);
  color: var(--pri-dark);
  text-align: center;
  font-weight: 700;
  position: relative;
  cursor: pointer;
}
#column .column-more .acc-more-btn::before,
#column .column-more .acc-more-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--s6);
  transform: translateY(-50%);
  background: var(--acc-dark);
}
#column .column-more .acc-more-btn::before {
  width: 2rem;
  height: 0.2rem;
}
#column .column-more .acc-more-btn::after {
  width: 0.2rem;
  height: 2rem;
  right: calc(var(--s6) + 0.9rem);
  transition: opacity 0.2s ease;
}
#column .column-more .acc-more-btn.is-open::after {
  opacity: 0;
}
#column .column-more .more-content {
  display: none;
  margin-top: var(--s6);
}

/* =====================================================================
  Section5（section5.png）: サイドビジネス
===================================================================== */
#side-business {
  padding-top: var(--s12);
  padding-bottom: var(--s12);
  background: var(--white);
  position: relative;
  overflow: hidden;
}
#side-business::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("img/bg-side-business.png") repeat-y center;
  pointer-events: none;
}
#side-business .reco-sec-header {
  position: relative;
  z-index: 1;
}
#side-business .reco-sec-header::before {
  width: 11rem;
  height: 11rem;
  background: url("img/icon-side-business.png") no-repeat 0 0;
}
#side-business .reco-sec-header__main {
  color: var(--pri-dark);
}
#side-business .reco-sec-header .c-hlink {
  color: inherit;
  text-decoration: none;
  background: none;
  padding: 0;
}
.sidebiz-lead {
  margin: 3rem auto 0;
  max-width: 90rem;
  color: var(--txt);
  text-align: left;
  position: relative;
  z-index: 1;
}
.sidebiz-items {
  position: relative;
  z-index: 1;
}
.sidebiz-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--s3);
}
.sidebiz-item--left {
  position: relative;
  z-index: 1;
  padding-bottom: 5rem;
}
.sidebiz-item--left::before {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  right: 0;
  top: 13rem;
  bottom: 0;
  background: var(--c1);
  z-index: -1;
}
.sidebiz-item--right {
  position: relative;
  z-index: 1;
  padding-bottom: 5rem;
}
.sidebiz-item--right::before {
  content: "";
  position: absolute;
  left: 0;
  right: calc(50% - 50vw);
  top: 13rem;
  bottom: 0;
  background: var(--c1);
  z-index: -1;
}
.sidebiz-item--right .sidebiz-item__img {
  order: 2;
  justify-self: end;
}
.sidebiz-item__img {
  width: 54rem;
  max-width: 100%;
}
.sidebiz-item__img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  background: var(--c1);
  box-shadow: var(--sd-1);
}
.sidebiz-item__content {
  position: relative;
  padding-right: 8rem;
}
.sidebiz-item--right .sidebiz-item__content {
  padding-left: 8rem;
  padding-right: 0;
}
.sidebiz-item__title {
  margin: 0 0 var(--s2);
  color: var(--pri-dark);
  font-weight: 900;
  font-size: var(--fs-l);
}
.sidebiz-item__title .c-hlink {
  display: inline-block;
  position: relative;
  color: inherit;
  text-decoration: none;
  background: none;
  padding: 0;
  padding-right: var(--s7);
  line-height: 1.4;
}
.sidebiz-item__title .c-hlink::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  background: url("img/arrow_orange.png") no-repeat 0 0;
  background-size: 100%;
}
.sidebiz-item__text {
  margin: 0;
  color: var(--txt);
}

/* =====================================================================
  Section6（section6.png）: 都道府県別
===================================================================== */
#prefecture {
  padding-top: 15rem;
  padding-bottom: 8rem;
  background: var(--inv);
  position: relative;
}
#prefecture::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("img/bg-prefecture.png") no-repeat top 3.4rem left calc(50% + 4rem) / contain;
  pointer-events: none;
}
#prefecture .reco-sec-header {
  position: relative;
  z-index: 1;
}
#prefecture .reco-sec-header::before {
  width: 11rem;
  height: 11rem;
  background: url("img/icon-prefecture.png") no-repeat 0 0;
}
#prefecture .reco-sec-header__title {
  line-height: 1.25;
}
#prefecture .reco-sec-header__main {
  color: var(--pri-dark);
}

#prefecture .reco-sec-header__title .reco-sec-header__main {
  font-size: clamp(3.2rem, 2.8rem + 1vw, 4.6rem);
  font-weight: 700;
}
#prefecture .reco-sec-header .c-hlink {
  color: inherit;
  text-decoration: none;
  background: none;
  padding: 0;
}
.pref-lead {
  margin: 3rem auto 5rem;
  max-width: 98rem;
  color: var(--txt);
  text-align: left;
  position: relative;
  z-index: 1;
}
.pref-grid {
  position: relative;
  z-index: 1;
  width: 98rem;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}
.pref-pill {
  margin: 0;
}
#prefecture .pref-pill a {
  padding: var(--s3) var(--s6) var(--s3) var(--s5);
  border-radius: 50vh;
  background: url("img/arrow_navy.png") no-repeat center right 1.4em / auto 1em, var(--pri);
  color: var(--pri-dark);
  font-weight: 900;
  text-decoration: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0.5rem 0.5rem 0 var(--pri-dark);
}
#prefecture .pref-pill a:hover {
  transform: translate(0.6rem, 0.6rem);
  box-shadow: none;
  opacity: 1;
}
#prefecture .pref-corp-link {
  margin: var(--s7) 0 0;
  position: relative;
  z-index: 1;
}
#prefecture .pref-corp-link a {
  color: var(--txt-main);
  background: none;
  padding-right: 2rem;
  position: relative;
}
#prefecture .pref-corp-link a::after {
  content: "";
  width: 1rem;
  height: 1rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url("./img/arrow_orange.png") no-repeat center center / contain;
}

/* =====================================================================
  Footer（footer.png）
===================================================================== */
body:not(.has-lower-bottom-reco) .footer-area {
  margin-top: 10rem;
}

/* トップページ：フッター上余白なし（header.php の body.is-top に対応） */
body.is-top .footer-area {
  margin-top: 0;
}

.footer-area {
  background: var(--c2);
  color: var(--txt);
}
.footer-area-logo {
  width: fit-content;
}
.footer-area-logo .mainvisual-brand {
  margin-bottom: 0;
}
.footer-area-logo .mainvisual-brand__logo img {
  width: 8rem;
}
.footer-area a {
  color: inherit;
}
.footer-menu-title {
  border-bottom-color: var(--txt);
}
.footer-disclaimer {
  background: var(--white);
}
.footer-nocopy {
  color: var(--txt);
}
.footer-bottom {
  background: var(--acc-dark);
  color: var(--white);
}
.footer-sitemap__link,
.footer-copyright__link {
  color: var(--white);
}
.footer-sitemap__link {
  background: url("img/arrow_orange.png") no-repeat center right / auto 1em;
}

/* ページトップ（ネイビー丸） */
.page-top {
  right: 1rem;
  bottom: 1rem;
}
.page-top__link {
  background: var(--acc-dark);
}

/* 会社カードの基本レイアウト */
.c-company-card {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  background: var(--white);
  box-shadow: var(--sd-1);
  height: 100%;
}
.c-company-card table {
  font-size: 1.4rem;
  margin: 0;
}
.c-company-card table th {
  width: 30%;
}
/* 会社一覧グリッドの高さ統一 */
.l-sec:has(.c-company-card) .l-grid-3 {
  align-items: stretch;
}

/* subgrid 対応: 会社カード要素の行整列 */
@supports (grid-template-rows: subgrid) {
  /* 6行のsubgrid設定（h3 + img + p + table(3行)） */
  .l-sec:has(.c-company-card) .l-grid-3 {
    grid-template-rows: repeat(6, auto);
  }

  /* 会社カードをsubgridに設定 */
  .c-company-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / span 6;
    gap: var(--s2);
  }

  /* 行マッピング */
  .c-company-card > .c-h3 {
    grid-row: 1;
  }
  .c-company-card > img {
    grid-row: 2;
  }
  .c-company-card > p {
    grid-row: 3;
  }
  .c-company-card > .c-table {
    grid-row: 4 / span 3;
  }
}

/* ==============================================
   目次02 (index02-frame)
   ============================================== */
.index02-frame {
  width: 100%;
  margin-bottom: 6rem;
}

@media screen and (max-width: 767px) {
  .index02-frame {
    margin-bottom: 3rem;
  }
}

.index02-wrap {
  margin: 0 auto;
  padding: var(--s1) var(--s3) var(--s4) var(--s3);
  border: solid 0.1rem var(--ln);
  background: var(--inv);
  position: relative;
}

.index02-title {
  padding: var(--s2);
  color: var(--acc-dark);
  font-size: var(--fs-m);
  font-weight: bold;
  line-height: 1;
  position: relative;
  border-bottom: 1px solid var(--ln);
}

.index02-chapter {
  padding: var(--s2) var(--s2) var(--s2) var(--s4);
  font-weight: 700;
}

.index02-chapter-h {
  margin: 0 0 0 var(--s2);
  font-size: 100%;
  line-height: 1.7;
  position: relative;
}

.index02-chapter-h a {
  display: block;
  text-decoration: none;
}

.index02-chapter-h a:hover {
  opacity: .6;
}

.index02-chapter-h-two {
  margin-left: var(--s2);
  position: relative;
}

.index02-chapter-h-three {
  margin-left: var(--s4);
  position: relative;
}

.index02-chapter-h-two::before,
.index02-chapter-h-three::before {
  position: absolute;
  top: 0;
  left: -1.5em;
}

.index02-chapter-h-two::before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 2rem;
  background-color: var(--acc);
  transform: translateY(-50%);
  top: .8em;
}

.index02-chapter-h-three::before {
  content: "└";
}

/* more content settings (目次02) */
.more-content-gradation {
  position: relative;
  height: auto;
  max-height: 12rem;
  overflow: hidden;
  transition: max-height 1s;
}

.more-content-gradation::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  transition: 0.3s;
  background: linear-gradient(to bottom, transparent 0%, var(--inv) 100%);
}

.more-content-gradation.is-open::after {
  display: none;
}

.acc-gr-more-btn {
  max-width: 32rem;
  width: 95%;
  margin: var(--s6) auto 0;
  padding: var(--s2) 6rem var(--s2) var(--s6);
  border: 0.2rem solid var(--ln);
  border-radius: 50vh;
  background: var(--white);
  color: var(--pri-dark);
  text-align: center;
  font-weight: 700;
  position: relative;
  transition: opacity 0.3s;
  cursor: pointer;
}

.acc-gr-more-btn::before {
  content: "";
  width: 2rem;
  height: 0.2rem;
  background: var(--acc-dark);
  position: absolute;
  top: 50%;
  right: var(--s6);
  transform: translateY(-50%);
}

.acc-gr-more-btn::after {
  content: "";
  width: 0.2rem;
  height: 2rem;
  background: var(--acc-dark);
  position: absolute;
  top: 50%;
  right: calc(var(--s6) + 0.9rem);
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
}

.acc-gr-more-btn:hover {
  opacity: 0.6;
}

.acc-gr-more-btn.is-open::after {
  opacity: 0;
}

/* 関連記事「すべて表示」ボタン：目次と同じスタイルに統一 */
.related-article01-btn {
  max-width: 32rem;
  width: 95%;
  margin: var(--s6) auto 0;
  padding: var(--s2) 6rem var(--s2) var(--s6);
  border: 0.2rem solid var(--ln);
  border-radius: 50vh;
  background: var(--white);
  color: var(--pri-dark);
  text-align: center;
  font-weight: 700;
  position: relative;
  cursor: pointer;
}
.related-article01-btn::before,
.related-article01-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--acc-dark);
}
.related-article01-btn::before {
  width: 2rem;
  height: 0.2rem;
  right: var(--s6);
}
.related-article01-btn::after {
  width: 0.2rem;
  height: 2rem;
  right: calc(var(--s6) + 0.9rem);
}
.related-article01-btn:hover {
  opacity: 0.6;
}
.related-article01-btn.is-open::after {
  opacity: 0;
}

/* 関連記事：目次（index02）と同じトーンに統一 */
.related-article01-frame {
  border-width: 0.1rem;
  background: var(--inv);
  overflow: hidden;
}
.related-article01-title {
  padding: var(--s2);
  color: var(--acc-dark);
  background: none;
}
.related-article01-list {
  padding: var(--s2) 0;
}
.related-article01-list li {
  margin: 0 0 0 var(--s2);
  padding-left: var(--s3);
}
.related-article01-list li + li {
  margin-top: 1rem;
}
.related-article01-list li::before {
  width: 1.2rem;
  height: 1.2rem;
  background-color: var(--acc);
  top: 0.8em;
  transform: translateY(-50%);
}
.related-article01-list a:hover {
  opacity: 0.6;
}
.related-article01-more {
  bottom: 0;
  padding: var(--s6) 0 var(--s2);
  height: auto;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--inv) 55%);
}
.related-article01-more.is-open {
  background: none;
  position: static;
  bottom: auto;
  left: auto;
  height: auto;
  padding-top: var(--s2);
}

/* =====================================================================
  footer-banner (共通・pc-fix-banner01 / sp-fix-banner01)
===================================================================== */
.footer-banner {
  position: relative;
  z-index: 500;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.footer-banner.js-show {
  opacity: 1;
}

.footer-banner.is-closed {
  opacity: 0;
  pointer-events: none;
}

.footer-banner__close {
  position: absolute;
  top: var(--s1);
  left: var(--s1);
  z-index: 2;
  width: 3.2rem;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 700;
  color: var(--pri-dark);
  background: transparent;
  border-radius: 0;
  text-decoration: none;
}
.footer-banner__close:hover {
  opacity: 0.7;
}

.pc-fix-banner01 > a:not(.footer-banner__close) {
  position: relative;
  z-index: 1;
}

.pc-fix-banner01 {
  width: 24rem;
  background-color: var(--acc-dark);
  position: fixed;
  right: 0;
  bottom: 10rem;
  z-index: 200;
}
.pc-fix-banner01 a {
  color: var(--acc-dark);
  text-decoration: none;
  display: block;
}
.pc-fix-banner01 a:hover {
  opacity: .7;
}
.pc-fix-banner01-img {
  position: relative;
}

.pc-fix-banner01-text {
  padding: var(--s2);
  color: var(--white);
  position: relative;
}
.pc-fix-banner01-text::after {
  content: "";
  width: 0.1rem;
  height: 0.1rem;
  border-top: .5rem solid transparent;
  border-left: .5rem solid transparent;
  border-right: .5rem solid var(--white);
  border-bottom: .5rem solid var(--white);
  position: absolute;
  right: .5rem;
  bottom: .5rem;
}
.pc-fix-banner01-text p {
  margin: 0;
  font-size: 2rem;
  text-align: left;
  line-height: 1.3;
  font-weight: 700;
}
.pc-fix-banner01-text p.text-small {
  font-size: 1.3rem;
  line-height: 1.5;
  background-color: var(--pri);
  color: var(--acc-dark);
  font-weight: 700;
  display: inline-block;
  padding: 0 1rem;
  margin: 0 auto 1rem;
}

.sp-fix-banner01 {
  display: none;
}

/* SP用 */
@media screen and (max-width: 767px) {
  .pc-fix-banner01 {
    display: none;
  }

  .sp-fix-banner01 {
    display: block;
    width: 81%;
    background-color: var(--acc-dark);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 200;
  }

  .sp-fix-banner01 .footer-banner__close {
    left: auto;
    right: -0.5rem;
    color: var(--white);
    border-radius: 50%;
    font-size: 1.6rem;
    top: -0.5rem;
  }

  .sp-fix-banner01 .sp-fix-banner01-text a {
    position: relative;
    z-index: 1;
  }
  .sp-fix-banner01-text {
    padding: 0.1rem 0.5rem;
    color: var(--white);
    position: relative;
  }

  .sp-fix-banner01-text p {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
  }
  .sp-fix-banner01-text p.text-small {
    margin: 0.5rem 0 0 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    background-color:var(--pri);
    display:inline-block;
    color:var(--pri-dark);
    padding:0 0.2rem
  }
  .sp-fix-banner01-text a {
    padding-right: 1.6rem;
    color: var(--white);
    text-decoration: none;
    display: block;
  }
  .sp-fix-banner01-text::after {
    content: "";
    width: 0.1rem;
    height: 0.1rem;
    border-top: .5rem solid transparent;
    border-left: .5rem solid transparent;
    border-right: .5rem solid var(--white);
    border-bottom: .5rem solid var(--white);
    position: absolute;
    right: .5rem;
    bottom: .5rem;
  }
  .sp-fix-banner01-text a:hover {
    opacity: .7;
  }

  .reco-detail-chosen__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .reco-detail-chosen__content {
    order: 2;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .reco-detail-block--chosen {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .reco-detail-block--chosen .reco-detail-media {
    order: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    box-sizing: border-box;
  }
  .reco-detail-block--chosen .reco-detail-media img {
    margin-left: 0;
    max-width: 100%;
    height: auto;
    display: block;
  }
  .reco-detail-chosen__lead,
  .reco-detail-chosen__text {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .reco-detail-support-grid {
    grid-template-columns: 1fr;
  }
  .reco-detail-support-card {
    overflow: hidden;
  }
  .reco-detail-support-card__head {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    padding-left: 6rem;
    font-size: 2rem;
  }
  .reco-detail-support-card__lead {
    font-size: 2rem;
  }
  .reco-detail-support-card__head::before {
    width: 3rem;
    height: 3rem;
    background-size: contain;
  }
  .reco-detail-voice-top {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    align-items: flex-start;
  }
  .reco-detail-voice-bubble {
    box-sizing: border-box;
    padding: 7.5rem 2rem 2rem;
    margin-top: -8rem;
    font-size: 2rem;
    text-align: center;
    width: 100%;
  }
  .reco-detail-voice-bubble::before {
    content: none;
  }
  #recommended-detail .reco-detail-voice-sub-card {
    padding: var(--s3);
  }
  .reco-detail-block--voice .reco-detail-voice:first-of-type {
    margin-bottom: 3rem;
  }
  .reco-detail-voice-table td {
    padding-right: 0;
  }
  .reco-detail-cost-rev__sub {
    display: block;
  }
  .reco-detail-cost-rev__row {
    text-align: center;
    line-height: 1.4;
  }
  .reco-detail-cost-rev__tag {
    display: block;
    width: fit-content;
    margin: 0 auto;
  }
  .reco-detail-cost-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s1);
  }
  #recommended-detail .reco-detail-block--cost .reco-detail-cost-item {
    display: block;
    padding-bottom: var(--s2);
  }
  #recommended-detail .reco-detail-block--cost .reco-detail-cost-item__head {
    width: auto;
    padding-top: 0;
    margin-bottom: var(--s1);
  }
  #recommended-detail .reco-detail-block--cost .reco-detail-cost-item__body {
    width: 100%;
    text-align: center;
  }
  #recommended-detail .reco-detail-block--cost .reco-detail-cost-item__body ul {
    text-align: left;
  }
  .reco-detail-cost-row__text {
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1.4;
  }
  .reco-detail-company .c-table th {
    padding: var(--s1) var(--s2);
  }
  .reco-detail-company .c-table td {
    padding: var(--s2) var(--s2);
  }
  .reco-detail-company .c-table th {
    width: 42%;
  }
  .reco-detail-company .c-table,
  .reco-detail-company .c-table tbody,
  .reco-detail-company .c-table tr {
    display: block;
    width: 100%;
  }
  .reco-detail-company .c-table tr {
    border-bottom: 0.1rem solid var(--ln);
  }
  .reco-detail-company .c-table tr:last-child {
    border-bottom: none;
  }
  .reco-detail-company .c-table th,
  .reco-detail-company .c-table td {
    display: block;
    width: 100%;
    border: none;
  }
  .reco-detail-company .c-table th {
    text-align: left;
    border-bottom: 0.1rem solid var(--ln);
  }
  #recommended-detail .l-container > .reco-detail-wrap:nth-child(3),
  #recommended-detail .l-container > .reco-detail-wrap:nth-child(4) {
    margin-top: 0;
  }
  /* MV SP：mv-sp.png を100%幅で全体表示／リード背景はスマホ用 bg_mv_lead_sp.png（文字サイズは既存のまま） */
  .mainvisual {
    min-height: 0;
    background: none;
  }
  .mainvisual::before {
    display: none;
  }
  .mainvisual-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    padding: 0;
    min-height: 0;
    margin: 0 auto;
    max-width: 100%;
    box-sizing: border-box;
    background: none;
  }
  .mainvisual-sp-hero {
    display: block;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    width: 95%;
    margin: 1rem auto 0;
    padding: 0;
    line-height: 0;
  }
  .mainvisual-hero-sp-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 1rem;
  }
  /* PC用の右側大画像はSPでは使わない */
  .mainvisual-inner:after {
    content: none;
    display: none;
  }
  .mainvisual-content {
    display: contents;
    max-width: 100%;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
  }
  /* 画像と同じグリッド行に載せると padding で行高が伸び MV まで動く → 重ねは absolute で文字だけ位置調整 */
  .mainvisual-head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 3% 2.5% 5%;
    margin: 18rem 0 0;
  }
  .mainvisual .mainvisual-brand {
    display: none;
  }
  .mainvisual-brand__shoulder {
    font-size: 1.1rem;
  }
  .mainvisual-brand__title {
    font-size: 2rem;
    line-height: 1.25;
  }
  .mainvisual-kicker {
    font-size: var(--fs-s);
    padding: 0.2rem 0.8rem;
    margin-bottom: var(--s2);
    background: color-mix(in srgb, var(--pri-dark) 88%, transparent);
  }
  .mainvisual-title {
    margin-bottom: var(--s4);
    width: 100%;
    max-width: 100%;
  }
  .mainvisual-title__line {
    letter-spacing: 0.06em;
    max-width: 100%;
    box-sizing: border-box;
  }
  .mainvisual-title__accent {
    font-size: 3.2rem;
    letter-spacing: -0.02em;
    margin-left: 0;
    margin-right: 0;
    display: inline;
  }
  .mainvisual-title__large {
    font-size: var(--fs-xxl);
    letter-spacing: -0.02em;
    margin-right: 0;
  }
  .mainvisual-title--pc {
    display: none;
  }
  .mainvisual-title--sp {
    display: flex;
    align-items: flex-start;
    font-size: 2rem;
  }
  .mainvisual-lead {
    grid-column: 1;
    grid-row: 2;
    margin-top: -6rem;
    margin-bottom: 0;
    padding: 13.5rem 5% var(--s4);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: var(--fs-base);
    line-height: 1.4;
    background: url("img/bg_mv_lead_sp.png") no-repeat left 65% top / cover;
    z-index: -1;
  }

  /* 各セクション：SPのみ padding-top 半分・reco見出しアイコン 7rem×7rem（PCは共通スタイルのまま） */
  #recommended {
    padding-top: var(--s3);
  }
  #recommended.lower-bottom-reco {
    padding-top: var(--s6);
    margin-top: 6rem;
  }
  #recommended-detail {
    padding-top: var(--s6);
    padding-bottom: var(--s12);
  }
  #recommended-detail .reco-detail-intro {
    overflow-x: hidden;
    margin-bottom: 0;
  }
  #recommended-detail .reco-detail-grid {
    display: block;
    min-width: 0;
    margin-top: 3rem;
  }
  #recommended-detail .reco-detail-media {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 auto;
  }
  #recommended-detail .reco-detail-media img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  #recommended-detail .reco-detail-side {
    margin-top: var(--s3);
  }
  #column {
    padding-top: var(--s6);
  }
  #column .column-grid {
    grid-template-columns: 1fr;
  }
  #column .column-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .column-card::before {
    background-size: 80%;
  }
  #side-business {
    padding-top: var(--s6);
  }
  /* =====================================================================
    Section5（section5.png）: サイドビジネス（SP最適化）
    - 画像 → キャッチ（title） → テキスト の順を維持
  ===================================================================== */
  #side-business .sidebiz-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s2);
    padding: 0;
  }

  /* 並び順は常に「画像 → キャッチ（title） → テキスト」 */
  #side-business .sidebiz-item__img {
    order: 1;
    width: 90%;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
  }

  /* PCでは右側がorder:2になるため、SPでは打ち消す */
  #side-business .sidebiz-item--right .sidebiz-item__img {
    order: 1;
  }

  #side-business .sidebiz-item__img img {
    border-radius: var(--r-md);
    position: relative;
    z-index: 1;
  }

  #side-business .sidebiz-item__content {
    order: 2;
    padding-right: 0;
    padding-left: 0;
    padding: 0 var(--s3) var(--s4);
    text-align: left;
    background: var(--c1);
    margin-top: -5rem;
    padding-top: 6rem;
  }

  /* 背景色はsidebiz-item__contentに集約（SPでは左右パネルを無効化） */
  #side-business .sidebiz-item--left::before,
  #side-business .sidebiz-item--right::before {
    content: none;
  }
  #prefecture {
    padding-top: calc(15rem / 2);
    padding-bottom: 3rem;
  }
  #prefecture::before {
    background-size: 100% auto;
    background-position: top 15rem center;
    background-repeat: no-repeat;
  }

  #prefecture .pref-lead {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  /* 都道府県ボタン：SPは縦に1列 */
  #prefecture .pref-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s2);
    width: 100%;
  }

  /* 都道府県ボタン：SPで上下の間隔を少し広げる */
  #prefecture .pref-grid .pref-pill:not(:last-child) {
    margin-bottom: var(--s3);
  }
  .reco-sec-header::before {
    width: 7rem;
    height: 7rem;
    background-size: contain;
  }
  #column .reco-sec-header::before,
  #side-business .reco-sec-header::before,
  #prefecture .reco-sec-header::before {
    width: 7rem;
    height: 7rem;
    background-size: contain;
  }

  .reco-sec-header__title .reco-sec-header__label {
    font-size: 2.2rem;
    margin-bottom: 1rem;
  }

  #recommended .reco-sec-header__title .reco-sec-header__main {
    font-size: 2.8rem;
    line-height: 1;
  }
  #column .c-hlink {
    padding-right: 4rem;
  }
  #side-business .reco-sec-header .c-hlink {
    padding-right: 4rem;
  }
  #prefecture .reco-sec-header .c-hlink {
    font-size: clamp(2.6rem, 2.2rem + 1.2vw, 4.2rem);
  }
  #column .column-card .column-card__title a {
    font-size: 2.2rem;
  }

  .reco-sec-header__title .reco-sec-header__num {
    font-size: 4rem;
  }

  #recommended .l-grid-3 {
    display: flex;
    flex-direction: column;
  }

  #recommended .l-grid-3 > .c-card-wrapper,
  #recommended .c-card--grid {
    display: flex !important;
    flex-direction: column;
    grid-row: none;
  }

  #recommended .c-cardFooter {
    display: grid;
    gap: var(--s2);
    margin-top: auto;
  }

  .c-table tr:last-child th {
    width: 40%;
  }

  .c-table td {
    text-align: center;
  }

  /* 会社一覧SP: 会社テーブルを th→td の縦積みに変更 */
  #company-list .company-list__table,
  #company-list .company-list__table tbody,
  #company-list .company-list__table tr {
    display: block;
    width: 100%;
  }
  #company-list .company-list__table tr {
    border-bottom: 0.1rem solid var(--ln);
  }
  #company-list .company-list__table tr:last-child {
    border-bottom: none;
  }
  #company-list .company-list__card-body .company-list__table th,
  #company-list .company-list__card-body .company-list__table td {
    display: block;
    width: 100%;
    border: none;
    text-align: center;
  }
  #company-list .company-list__table th {
    border-bottom: 0.1rem solid var(--ln) !important;
  }

  /* 会社一覧SP: meta-tableも th→td の縦積みに変更 */
  #company-list .company-list__meta-table,
  #company-list .company-list__meta-table tbody,
  #company-list .company-list__meta-table tr {
    display: block;
    width: 100%;
  }
  #company-list .company-list__meta-table tr:last-child {
    border-bottom: none;
  }
  #company-list .company-list__meta-table th,
  #company-list .company-list__meta-table td {
    display: block;
    width: 100%;
    border: none;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }
  #company-list .company-list__meta-table th {
    background: var(--c1);
    border-bottom: none;
    margin-top: 1rem;
    padding: 0.8rem;
  }

  /* 会社一覧SP: btn-linkはボタン化せずPC同様のテキストリンク表示 */
  #company-list .company-list__card-footer .btn-link {
    width: auto;
    margin: 0;
    text-align: right;
  }

  #company-list .company-list__card-footer .btn-link a {
    display: inline-block;
    border: none;
    border-radius: 0;
    padding: 0 var(--s3) 0 0;
    background: url("img/arrow_navy.png") no-repeat right center / auto 0.8em;
    text-align: right;
    line-height: 1.4;
    text-decoration: none;
  }

  /* 詳細SP: 会社情報テーブルは中央揃え・最後のthも全幅維持 */
  #recommended-detail .reco-detail-company .c-table th,
  #recommended-detail .reco-detail-company .c-table td {
    text-align: center;
  }
  #recommended-detail .reco-detail-company .c-table th,
  #recommended-detail .reco-detail-company .c-table tr:last-child th {
    width: 100%;
  }
  #recommended-detail .reco-detail-company .c-table tr:last-child th {
    border-bottom: 0.1rem solid var(--ln);
  }

  /* 都道府県SP: 運営会社情報はボタン化せずテキストリンク表示 */
  #prefecture .pref-corp-link {
    width: auto;
    margin-top: var(--s4);
    text-align: right;
  }

  #prefecture .pref-corp-link a {
    display: inline-block;
    border: none;
    border-radius: 0;
    padding: 0 var(--s3) 0 0;
    background: url("img/arrow_orange.png") no-repeat right center / auto 0.8em;
    text-align: right;
    line-height: 1.4;
    text-decoration: none;
    margin-right: 1rem;
  }

  #prefecture .pref-corp-link a::after {
    content: none;
  }

  .reco-card--detail .reco-detail-block:not(.reco-detail-block--reason) {
    padding: 0 var(--s3) 0;
    padding-bottom: var(--s6) !important;
  }
  .reco-card--detail > .reco-detail-intro + .reco-detail-block:not(.reco-detail-block--reason) {
    padding-top: var(--s6);
  }

  .reco-detail-chosen__lead {
    font-size: 2rem;
    padding-left: 4rem;
  }

  .reco-detail-chosen__lead::before {
    width: 3.6rem;
    height: 3.6rem;
    background-size: contain;
    top: -0.8rem;
  }

  .c-sec--detail .c-card--large {
    padding: var(--s4) var(--s2);
  }

  /* 会社一覧のSP対応 */
  .l-sec:has(.c-company-card) .l-grid-3 {
    display: flex;
    flex-direction: column;
  }

  .c-company-card {
    display: flex !important;
    flex-direction: column;
    grid-row: none;
  }

  /* 下層ヘッダー背景：スマホ用 */
  #low-header .header-area-upper {
    background-image: url("img/bg_mv_lead_sp.png");
  }

  /* TOPヘッダー：長いサイト名は横スクロール。flex-end は scrollLeft=0 で左に余白が残り PR が見えないため block+text-align:right */
  .header-area--top .header-area-upper {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 var(--s1) 0 var(--s1);
    text-align: right;
    overflow-x: hidden;
  }
  /* ヘッダー直下のMVとの余白を詰める */
  .header-area--top + .contents-area .mainvisual {
    margin-top: 0;
    margin-bottom: 0;
  }
  .header-area--top .header-area-upper::-webkit-scrollbar {
    display: none;
  }
  .header-area--top .header-title {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
    text-align: left;
    padding-left: 2.5rem;
  }
  .header-area--top .header-title::-webkit-scrollbar {
    display: none;
  }

  /* 下層ヘッダー：TOPと同様にPRを左端から見せ、横スクロールで1行表示 */
  #low-header .header-area-upper {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 var(--s1) 0 var(--s1);
    text-align: left !important;
  }
  #low-header .header-title--low {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
    text-align: left;
    padding-left: 2.5rem;
  }
  #low-header .header-title--low::-webkit-scrollbar {
    display: none;
  }
  #low-header .header-title--low::before {
    left: 0.5rem;
  }

  /* 下層ヘッダー：SPではタイトル（z-index:2）の下にロゴが隠れるため、ブランドを通常フローでサイト名の下に表示 */
  #low-header .header-lower-brand {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    z-index: auto;
    display: flex;
    width: 80%;
    max-width: 100%;
    box-sizing: border-box;
    margin: var(--s2) auto 0;
    justify-content: center;
    align-items: center;
  }
  #low-header .header-lower-brand .mainvisual-brand__logo img {
    width: 100%;
    height: auto;
  }

  .low-center-img-catch,
  .low-left-img-catch,
  .low-right-img-catch {
    font-size: 1.8rem;
  }
  .c-check-heading__text {
    font-size: 2rem;
    padding: var(--s2) var(--s2) var(--s2) var(--s10);
  }
  .c-summary-box {
    padding-right: var(--s3);
    padding-left: var(--s3);
    margin-top: 3rem;
  }

  /* SP: アコーディオン系ボタン共通（acc-gr-more-btnと同じ設定） */
  .acc-gr-more-btn,
  .acc-more-btn,
  .related-article01-btn,
  #company-list .company-list__more .acc-more-btn,
  #column .column-more .acc-more-btn,
  .reco-detail-block--voice .acc-more-btn {
    width: 50%;
    max-width: 26rem;
    padding: 1rem;
    margin-bottom: 2rem;
  }
  .acc-gr-more-btn::before,
  .acc-more-btn::before,
  .related-article01-btn::before,
  #company-list .company-list__more .acc-more-btn::before,
  #column .column-more .acc-more-btn::before,
  .reco-detail-block--voice .acc-more-btn::before {
    width: 1.5rem;
    right: var(--s2);
  }
  .acc-gr-more-btn::after,
  .acc-more-btn::after,
  .related-article01-btn::after,
  #company-list .company-list__more .acc-more-btn::after,
  #column .column-more .acc-more-btn::after,
  .reco-detail-block--voice .acc-more-btn::after {
    height:1.5rem;
    right: calc(var(--s2) + 0.7rem);
  }

  /* 加盟オーナーの声：続きを読む展開エリア */
  .reco-detail-block--voice .more-content {
    padding: 0 2rem;
    margin-top: -2rem;
  }

  /* cate.html: SP用 縦積みテーブルの崩れ調整 */
  .sp-table-vertical table,
  .sp-table-vertical tbody,
  .sp-table-vertical tr {
    display: block;
    width: 100%;
  }
  .sp-table-vertical th,
  .sp-table-vertical td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    border-right: none !important;
    border-bottom: 0.1rem solid var(--ln) !important;
    text-align: center !important;
  }
  .sp-table-vertical th {
    text-align: center;
  }
  .sp-table-vertical table tr:last-child th {
    border-bottom: 0.1rem solid var(--ln);
  }
  .sp-table-vertical table tr:last-child td:last-child {
    border-bottom: none;
  }

  /* 下層SP: sp-table-vertical なしでもテーブルを縦積み表示 */
  #low-page table,
  #low-page tbody,
  #low-page tr {
    display: block;
    width: 100%;
  }
  #low-page th,
  #low-page td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    border-right: none !important;
    text-align: center !important;
  }
  #low-page th {
    border-bottom: 0.1rem solid var(--ln) !important;
  }
  #low-page td {
    border-top: none;
    border-bottom: 0.1rem solid var(--ln);
    text-align: left !important;
  }
  #low-page tr:last-child th {
    border-bottom: 0.1rem solid var(--ln) !important;
  }
  #low-page tr:last-child td:last-child {
    border-bottom: none;
  }

  /* 下層SP: 横スクロール（l-scroll-x-sp）は縦積み対象外（thead/tbody は table ではなく row-group 系にすること） */
  #low-page .l-scroll-x-sp table {
    display: table !important;
    width: auto !important;
  }
  #low-page .l-scroll-x-sp thead {
    display: table-header-group !important;
    width: auto !important;
  }
  #low-page .l-scroll-x-sp tbody {
    display: table-row-group !important;
    width: auto !important;
  }
  #low-page .l-scroll-x-sp tr {
    display: table-row !important;
    width: auto !important;
  }
  #low-page .l-scroll-x-sp th,
  #low-page .l-scroll-x-sp td {
    display: table-cell !important;
    width: auto !important;
    border-right: 0.1rem solid var(--ln) !important;
    text-align: center !important;
    box-sizing: border-box;
  }
  #low-page .l-scroll-x-sp tr td:last-child {
    border-right: none !important;
  }

  /* SPフッター: 矢印をarrow_navy.pngに統一（回転で開閉向きを表現） */
  .footer-menu-title__link::after {
    background: url("img/arrow_navy.png") no-repeat center / auto 0.8em;
    transform: rotate(90deg);
    transition: transform 0.3s;
  }
  .footer-menu-title__link.is-open::after {
    transform: rotate(-90deg);
  }
  .footer-menu-title__link--not-toggle::after {
    background: url("img/arrow_navy.png") no-repeat center / auto 0.8em;
    transform: rotate(0);
  }
  .footer-menu__link {
    background: url("img/arrow_navy.png") no-repeat 95% center / auto 0.8em;
  }
}

/* =====================================================================
  navigation02 ※TOP、下層共通（ハンバーガー型）
===================================================================== */
.header-area-upper {
  padding: var(--s1);
  text-align: right;
}
#low-header .header-area-upper {
  position: relative;
  background: url("img/bg_mv_lead.png") no-repeat center center / cover;
  display: block;
  width: 100%;
  min-height: 11rem;
  padding: 0 var(--s1) var(--s2);
  text-align: right;
}
#low-header .header-title--low {
  position: relative;
  z-index: 2;
  display: inline-block;
  white-space: nowrap;
  text-align: left;
  padding-left: 2.5rem;
  margin-top: 0;
}
#low-header .header-title--low::before {
  left: 0.5rem;
}
.header-lower-brand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-bottom: 0;
  z-index: 1;
}
.header-lower-brand__link {
  display: flex;
  align-items: center;
  gap: var(--s1);
  text-decoration: none;
}
.header-title {
  font-size: 1.2rem;
  display: inline-block;
  position: relative;
}
.header-title::before {
  content: "PR";
  padding: 0 0.2rem;
  color: var(--white);
  background-color: var(--acc-dark);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: -2.4rem;
}
/* TOP：PCではPRをパディング内に収めて常時表示（横スクロールはSPメディア内で指定） */
.header-area--top .header-title {
  padding-left: 2.5rem;
}
.header-area--top .header-title::before {
  left: 0.5rem;
}
.header-title a {
  text-decoration: none;
}
.header-title a:hover {
  text-decoration: underline;
}
.gnavi-btn-close {
  display: none;
}
.toggle-content {
  display: none;
}
.gnavi-ctrl {
  position: fixed;
  top: calc(1rem + env(safe-area-inset-top, 0px));
  right: 1rem;
  z-index: 200;
  transition: opacity 0.6s, visibility 0.6s;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.gnavi-ctrl.is-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.is-gnavi-open .gnavi-ctrl {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.gnavi-btn {
  width: var(--s7);
  height: var(--s6);
  background: var(--acc-dark);
  display: block;
  position: relative;
  top: auto;
  right: auto;
  z-index: 1;
  cursor: pointer;
}
.is-gnavi-open .gnavi-btn {
  z-index: 300;
}
.gnavi-btn span {
  width: var(--s4);
  height: 0.2rem;
  display: inline-block;
  background: var(--white);
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.4s, opacity 0.4s;
}
.gnavi-btn span:nth-of-type(1) {
  top: calc(50% - 0.7rem);
}
.gnavi-btn span:nth-of-type(2) {
  top: 50%;
}
.gnavi-btn span:nth-of-type(3) {
  top: calc(50% + 0.7rem);
}
.gnavi-btn.is-active span:nth-of-type(1) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.gnavi-btn.is-active span:nth-of-type(2) {
  opacity: 0;
}
.gnavi-btn.is-active span:nth-of-type(3) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.gnavi-btn-close {
  width: 30%;
  margin: var(--s4) auto 0;
  padding: var(--s1);
  background: var(--acc-dark);
  display: block;
  text-align: center;
  border-radius: 3rem;
}
.gnavi-btn-close__inner {
  padding: 0 0 0 var(--s3);
  display: inline-block;
  color: var(--white);
  font-weight: 700;
  position: relative;
}
.gnavi-btn-close__inner::before {
  content: "";
  width: 1em;
  height: 0.2rem;
  background: var(--white);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%) rotate(45deg);
}
.gnavi-btn-close__inner::after {
  content: "";
  width: 1em;
  height: 0.2rem;
  background: var(--white);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%) rotate(135deg);
}
.gnavi-area {
  width: 100%;
  max-width: 37.5rem;
  height: 100vh;
  padding: var(--s3) var(--s1) var(--s10);
  display: block;
  background: #F5F5F5;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.8s ease, opacity 0.8s ease;
  opacity: 0;
}
.gnavi-title {
  min-height: var(--s6);
  margin: 0 var(--s2) var(--s2) 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: left;
  line-height: 1.5;
}
.gnavi-title a {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  text-decoration: none;
}
.gnavi-title img {
  width: 6rem;
  max-width: 100%;
  height: auto;
}
.gnavi-title .mainvisual-brand__copy {
  gap: var(--s-2);
}
.gnavi-title .mainvisual-brand__shoulder {
  font-size: 1.1rem;
}
.gnavi-title .mainvisual-brand__title {
  font-size: 2rem;
  line-height: 1.25;
}
.gnavi-pc {
  display: none;
}
.gnavi-list {
  border-bottom: 1px solid var(--txt);
  position: relative;
}
.gnavi-list li {
  padding-left: 0;
}
.gnavi-list__item::before {
  display: none;
}
.gnavi-list__link {
  width: 100%;
  margin: 0 auto;
  padding: var(--s2) var(--s4) var(--s2) var(--s2);
  border-top: 1px solid var(--txt);
  display: block;
  font-weight: 700;
  line-height: 2;
  text-decoration: none;
  position: relative;
}
.gnavi-list__link::after {
  content: "";
  width: 1.4rem;
  height: 1.4rem;
  background: url("img/arrow_orange.png") no-repeat center/100% auto;
  position: absolute;
  top: 50%;
  right: var(--s2);
  transform: translate(0, -50%) rotate(0);
  transition: transform 0.3s;
}
.gnavi-list__link--toggle::after {
  background-image: url("img/arrow_orange.png");
  transform: translate(0, -50%) rotate(90deg);
}
.gnavi-list__link--toggle.is-open::after {
  transform: translate(0, -50%) rotate(-90deg);
}
.gnavi-list__sub {
  width: 100%;
  background: var(--white);
}
.gnavi-list__low .gnavi-list__link {
  padding: var(--s2) var(--s4) var(--s2) var(--s4);
}
.gnavi-list__low .gnavi-list__link::after {
  content: "└";
  background: none;
  transform: translateY(-50%);
  position: absolute;
  top: 40%;
  left: 1rem;
}
.is-gnavi-open .gnavi-area {
  opacity: 1;
  transform: translateX(0);
}

#low-page p + .caption {
  margin-top: var(--s4);
}