@charset "UTF-8";
/* ============================================================
   renewal.css — 2026リニューアルで追加したセクション専用
   ------------------------------------------------------------
   既存の style.css / add.css には手を入れず、上から重ねる。
   既存の意匠（モノトーン基調・1rem=10px・min-width のPC拡張）に合わせること。

   ⚠️ 手書きのプレーンCSS。assets/_scss/ のSCSSビルド対象**外**。
      既存部分を直すときは _scss/ を、追加部分を直すときはこのファイルを触る。
   ============================================================ */

:root {
  --rk-ink: #333;
  --rk-ink-strong: #000;
  --rk-mut: #666;
  --rk-line: #ccc;
  --rk-line-soft: #e6e6e6;
  --rk-soft: #f2f2f2;
  --rk-white: #fff;
  --rk-line-green: #06c755; /* LINE公式カラー。CTAだけに使う */
}

/* ------------------------------------------------------------
   既存テーマの「定義されていないユーティリティ」の後始末
   ------------------------------------------------------------
   下記のクラスは既存テンプレートが全ページで使っているのに、
   CSSがどこにも存在せず**効いていなかった**（＝PC/SP出し分けが両方表示されていた）。
   リプレイスのタイミングで実体を与える。
   ------------------------------------------------------------ */

/* Typekit(kit lde5ybz)の futura-pt を読み込んでいるが、当てるCSSが無かった。
   英字見出し（What We Do / NEWS 等）はこれが本来の意図。 */
.font_futura {
  font-family: "futura-pt", "Jost", "Century Gothic", CenturyGothic, sans-serif;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* PC/SPの出し分け。既存が min-width:768px 基準なのでそれに合わせる。
   ※ 既存テンプレートは `class="display_mq is-block"` の形で併用しているため、
      .is-block を先に置いて .display_mq(none) が後から勝つ順序にしてある。順番を入れ替えないこと。 */
.is-block {
  display: block;
}

/* add.css の .sp-only / .pc-only は SCSS のネスト記法が生CSSのまま出力されていて
   機能していなかった（PC/SP両方の画像が出ていた）。ここで実体を与える。 */
.sp-only {
  display: block;
}

.pc-only {
  display: none;
}

@media (min-width: 768px) {
  .sp-only {
    display: none;
  }

  .pc-only {
    display: block;
  }
}

/* 旧テーマは style_old.css（214KB のレガシー）で img を枠に収めていた。
   フォーク時にそのファイルを落としたため、ロゴなどが原寸で出て巨大化していた。
   必要な1行だけをここで復活させる。 */
img,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

.display_mq {
  display: none;
}

@media (min-width: 768px) {
  .display_mq {
    display: block;
  }

  .display_to_mq {
    display: none;
  }
}

/* ------------------------------------------------------------
   共通
   ------------------------------------------------------------ */
/* .p-sec / .p-sec--soft の寸法は「下層ページ」ブロックで定義している */

/* js-fade_up は既存JSが交差時に .is-show を付けて出現させる。
   初期状態が opacity:0 なので、JSが落ちると中身ごと見えなくなる。
   → components/FadeUp.tsx が3秒の保険で必ず表示するようにしたが、
     JS自体が動かない環境（noscript）はそれも効かないので下で救う。 */
.p-sec .js-fade_up {
  will-change: opacity, transform;
}

/* ------------------------------------------------------------
   ナビ: 「関わり方」だけ項目が多いので横に広げる
   ------------------------------------------------------------ */
/* カテゴリ名は span。リンクではないので下線アニメは出さず、開閉できることだけ示す */
.header__content__nav > .is-dropdown_wrap > .is-link {
  cursor: pointer;
  user-select: none;
}

.header__content__nav > .is-dropdown_wrap > .is-link::after {
  content: "";
  border-bottom: 0.1rem solid currentColor;
  border-right: 0.1rem solid currentColor;
  display: inline-block;
  height: 0.5rem;
  margin: -0.3rem 0 0 0.8rem;
  opacity: 0.45;
  transform: rotate(45deg);
  transition: transform 0.25s ease, opacity 0.25s ease;
  vertical-align: middle;
  width: 0.5rem;
}

.header__content__nav > .is-dropdown_wrap.is-open > .is-link::after {
  opacity: 1;
  transform: rotate(-135deg) translate(-0.2rem, -0.2rem);
}

/* ── 下位階層のインデント ──
   親（事業モデル等）の下にぶら下がる項目を一段下げる。
   ヘッダーのドロップダウンはリンクの下線アニメが a に付いているので、
   a ではなく li 側を下げて下線の位置がズレないようにしている。 */
.is-dropdown li:has(> a.is-sub),
.o-megamenu li:has(> a.is-sub),
.o-footer_nav li:has(> a.is-sub),
.p-sitemap li:has(> a.is-sub) {
  padding-left: 1.4rem;
  position: relative;
}

.is-dropdown li:has(> a.is-sub)::before,
.o-megamenu li:has(> a.is-sub)::before,
.o-footer_nav li:has(> a.is-sub)::before,
.p-sitemap li:has(> a.is-sub)::before {
  content: "";
  border-top: 0.1rem solid currentColor;
  left: 0;
  opacity: 0.3;
  position: absolute;
  top: 0.85em;
  width: 0.7rem;
}

/* :has が使えないブラウザ向けの保険（インデントだけは効かせる） */
@supports not selector(:has(a)) {
  .is-dropdown a.is-sub,
  .o-megamenu a.is-sub,
  .o-footer_nav a.is-sub,
  .p-sitemap a.is-sub {
    padding-left: 1.4rem;
  }
}

/* フッター下段の「関わり方」は見出しごとに列を分けてあるので、
   さらにインデントすると読みにくい。ここでは打ち消す。 */
.footer__related__col li {
  padding-left: 0;
}

.footer__related__col li::before {
  content: none;
}

.header__content__nav .is-dropdown li.is-heading {
  color: var(--rk-mut);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  margin: 1.6rem 0 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 0.1rem solid var(--rk-line-soft);
}

.header__content__nav .is-dropdown li:first-child.is-heading {
  margin-top: 0;
}

.header__content__nav .is-dropdown_wrap.is-wide .is-dropdown {
  left: auto;
  right: 0;
  width: 52rem;
  columns: 2;
  column-gap: 3.2rem;
}

.header__content__nav .is-dropdown_wrap.is-wide .is-dropdown li {
  break-inside: avoid;
}

/* ------------------------------------------------------------
   ハンバーガー内のメガメニュー
   ------------------------------------------------------------ */
.o-megamenu__head > .is-link {
  font-weight: 700;
}

.o-megamenu__group li.is-heading {
  color: var(--rk-mut);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  margin-top: 1.4rem;
}

@media (min-width: 768px) {
  .o-megamenu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.2rem 4rem;
    align-items: start;
  }

  .o-megamenu__group.is-wide {
    grid-column: span 3;
  }

  .o-megamenu__group.is-wide > ul {
    columns: 3;
    column-gap: 4rem;
  }

  .o-megamenu__group.is-wide > ul > li {
    break-inside: avoid;
  }
}

/* ------------------------------------------------------------
   フッターナビ
   既存CSSが .footer__content__list>ul>li に nth-child(1)=40% (2)=40% (3)=20%
   を決め打ちしているため、そのままだと列が増えた瞬間に崩れる。
   グリッドで上書きして決め打ちを無効化する。
   ------------------------------------------------------------ */
@media (min-width: 768px) {
  .footer__content__list > ul.o-footer_nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4rem;
    width: 62rem;
  }

  .footer__content__list > ul.o-footer_nav > li {
    width: auto;
  }

  /* 既存CSSは li:last-child を「プライバシーポリシー1行」だと決めつけて
     position:absolute; right:0; bottom:-12.5rem; text-align:right で飛ばしている。
     いまの last-child は普通のメニュー列なので、その決め打ちを打ち消す。 */
  .footer__content__list > ul.o-footer_nav > li:last-child {
    bottom: auto;
    font-size: inherit;
    position: static;
    right: auto;
    text-align: left;
  }
}

/* 3列目だけ li に上下 2.5rem の余白が入る決め打ちがあるので揃える */
.footer__content__list > ul.o-footer_nav > li:nth-child(3) ul li {
  border-bottom: none;
  padding-bottom: 0;
  padding-top: 0;
}

.o-footer_nav__group > ul {
  margin-top: 1.6rem;
}

.o-footer_nav__group > ul > li {
  margin-bottom: 1.2rem;
}

.o-footer_nav__group a {
  line-height: 1.6;
}

/* ── 下段：「関わり方」だけ独立した行にして、見出しごとの列に割る ── */
/* 幅は .footer__content と揃える（103.2rem）。広げるとPCで右がはみ出す。 */
.footer__related {
  border-top: 0.1rem solid #666;
  margin: 4rem auto 0;
  max-width: 103.2rem;
  padding: 3.2rem 2rem 0;
}

.footer__related__title {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 700;
}

@media (min-width: 768px) {
  .footer__related__title {
    font-size: 1.2rem;
  }
}

/* SPは2列、PCは見出しの数だけ横一列に並べる。折り返すと関係が読み取れなくなるため。 */
.footer__related__grid {
  display: grid;
  gap: 2.4rem 1.6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2.4rem;
}

@media (min-width: 768px) {
  .footer__related__grid {
    gap: 2.8rem 2rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.footer__related__col .is-heading {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  margin-bottom: 1.2rem;
}

.footer__related__col li {
  margin-bottom: 1rem;
}

.footer__related__col a {
  font-size: var(--fs-caption);
  line-height: 1.6;
}

/* ── 規約類 ── */
.footer__policy {
  display: flex;
  gap: 2.4rem;
  margin: 3.2rem auto 0;
  max-width: 120rem;
  padding: 0 3rem;
}

.footer__policy a {
  font-size: var(--fs-caption);
  opacity: 0.7;
}

.footer__policy a:hover {
  opacity: 1;
}

/* ------------------------------------------------------------
   4事業（VILLA / DIY / HOME / BASE）
   既存の p-index__business__list を4枚並びに拡張する
   ------------------------------------------------------------ */
.p-brands__list {
  display: grid;
  gap: 3.2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .p-brands__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 4.8rem 4rem;
  }
}

@media (min-width: 1180px) {
  .p-brands__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem 2.4rem;
  }
}

.p-brands__item {
  display: flex;
  flex-direction: column;
}

.p-brands__item > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.p-brands__item .is-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--rk-soft);
}

.p-brands__item .is-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.p-brands__item > a:hover .is-img img {
  transform: scale(1.04);
}

.p-brands__item .is-name {
  align-items: baseline;
  display: flex;
  gap: 1rem;
  margin-top: 1.8rem;
}

.p-brands__item .is-name b {
  font-size: var(--fs-h2-lg);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

.p-brands__item .is-name span {
  color: var(--rk-mut);
  font-size: var(--fs-sm);
}

.p-brands__item .is-lead {
  color: var(--rk-mut);
  font-size: var(--fs-body);
  line-height: 1.9;
  margin-top: 1.2rem;
}

.p-brands__item .is-more {
  font-size: var(--fs-sm);
  margin-top: auto;
  padding-top: 1.6rem;
}

/* ------------------------------------------------------------
   仕入れ → 再生 → 運営 → 売却 の4工程
   ------------------------------------------------------------ */
.p-pipeline {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .p-pipeline {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.4rem;
  }
}

.p-pipeline__step {
  background-color: var(--rk-white);
  border: 0.1rem solid var(--rk-line-soft);
  padding: 2.4rem 2rem;
  position: relative;
}

/* 工程のつながりを矢印で示す（SPは下向き） */
.p-pipeline__step:not(:last-child)::after {
  color: var(--rk-line);
  content: "▼";
  font-size: var(--fs-caption);
  left: 50%;
  position: absolute;
  bottom: -1.4rem;
  transform: translateX(-50%);
}

@media (min-width: 768px) {
  .p-pipeline__step:not(:last-child)::after {
    content: "▶";
    bottom: auto;
    left: auto;
    right: -1.8rem;
    top: 50%;
    transform: translateY(-50%);
  }
}

.p-pipeline__no {
  align-items: baseline;
  display: flex;
  gap: 0.8rem;
}

.p-pipeline__no i {
  font-size: var(--fs-lead);
  font-style: normal;
  letter-spacing: 0.08em;
  opacity: 0.35;
}

.p-pipeline__no span {
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
}

.p-pipeline__step b {
  display: block;
  font-size: var(--fs-lead);
  line-height: 1.6;
  margin: 1rem 0 0.8rem;
}

.p-pipeline__step p {
  color: var(--rk-mut);
  font-size: var(--fs-sm);
  line-height: 1.9;
}

/* ------------------------------------------------------------
   数字で見る
   ------------------------------------------------------------ */
.p-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.1rem;
  background-color: var(--rk-line-soft);
  border: 0.1rem solid var(--rk-line-soft);
}

@media (min-width: 768px) {
  .p-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.p-stats__item {
  background-color: var(--rk-white);
  padding: 3.2rem 1.6rem;
  text-align: center;
}

.p-stats__num {
  align-items: baseline;
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  line-height: 1;
}

.p-stats__num b {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.p-stats__num span {
  font-size: var(--fs-body);
  font-weight: 700;
}

.p-stats__label {
  color: var(--rk-mut);
  font-size: var(--fs-caption);
  margin-top: 1.2rem;
}

/* 数字だけだと何の数か分かりにくいので、上に線画を置く（Lucide／inc/icons.php）。
   主役は数字なので、色は落として大きさも控えめにする。 */
.p-stats__ico {
  color: var(--rk-mut);
  display: block;
  height: 2.4rem;
  margin: 0 auto 1.4rem;
  opacity: 0.75;
  width: 2.4rem;
}

@media (min-width: 768px) {
  .p-stats__ico {
    height: 2.8rem;
    margin-bottom: 1.6rem;
    width: 2.8rem;
  }
}

.p-stats__ico .o-icon {
  display: block;
  height: 100%;
  width: 100%;
}

/* .p-note の定義は「下層ページ」ブロックにまとめてある */

/* ------------------------------------------------------------
   立場別の入口
   ------------------------------------------------------------ */
.p-doors {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .p-doors {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
  }
}

@media (min-width: 1180px) {
  .p-doors {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 件数に合わせて列数を変える。3列に1〜2枚だけ残る並びを避ける。 */
@media (min-width: 768px) {
  .p-doors--1 {
    grid-template-columns: minmax(0, 62rem);
  }

  .p-doors--2,
  .p-doors--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1180px) {
  .p-doors--2,
  .p-doors--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* カードが2枚だけのときは、1枚あたりの情報量が多いので余白を広げる */
.p-doors--2 .p-doors__item,
.p-doors--1 .p-doors__item {
  padding: 3.2rem 3rem;
}

.p-doors__item {
  background-color: var(--rk-white);
  border: 0.1rem solid var(--rk-line-soft);
  display: flex;
  flex-direction: column;
  padding: 2.8rem 2.4rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.p-doors__item:hover {
  border-color: var(--rk-ink);
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.06);
}

.p-doors__item b {
  font-size: var(--fs-lead);
  line-height: 1.7;
}

/* カードの線画アイコン（Lucide／inc/icons.php）。'icon' を書いた項目だけ出る。 */
.p-doors__ico {
  color: var(--rk-ink);
  display: block;
  height: 2.8rem;
  margin-bottom: 1.6rem;
  width: 2.8rem;
}

@media (min-width: 768px) {
  .p-doors__ico {
    height: 3.2rem;
    width: 3.2rem;
  }
}

.p-doors__ico .o-icon {
  display: block;
  height: 100%;
  width: 100%;
}

.p-doors__item p {
  color: var(--rk-mut);
  /* --fs-sm(1.4rem) だとカードが主役のセクション（/business/ の強みなど）で読みづらい。
     一段上げて 1.55rem に（2026-08 指示）。 */
  font-size: var(--fs-md);
  line-height: 1.9;
  margin: 1.2rem 0 2rem;
}

.p-doors__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  margin-top: auto;
}

.p-doors__links a {
  font-size: var(--fs-sm);
  position: relative;
  padding-bottom: 0.3rem;
}

.p-doors__links a::after {
  background-color: currentColor;
  bottom: 0;
  content: "";
  height: 0.1rem;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.28s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  width: 100%;
}

.p-doors__links a:hover::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

/* ------------------------------------------------------------
   宿の一覧（TOP用の軽いカード）
   ------------------------------------------------------------ */
.p-stays {
  display: grid;
  gap: 2.4rem 1.6rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .p-stays {
    grid-template-columns: repeat(4, 1fr);
    gap: 3.2rem 2.4rem;
  }
}

.p-stays__item .is-img {
  aspect-ratio: 3 / 2;
  background-color: var(--rk-soft);
  overflow: hidden;
}

.p-stays__item .is-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-stays__item b {
  display: block;
  font-size: var(--fs-body);
  line-height: 1.6;
  margin-top: 1.2rem;
}

.p-stays__item span {
  color: var(--rk-mut);
  font-size: var(--fs-caption);
}

/* ------------------------------------------------------------
   強み
   ------------------------------------------------------------ */
/* 罫線は各カードが持つ。以前は「1pxのgap＋コンテナ背景」で線を作っていたが、
   件数が列数で割り切れないときに余った枠が灰色のブロックとして見えてしまうためやめた。 */
.p-strengths {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .p-strengths {
    gap: 2.4rem;
    grid-template-columns: repeat(3, 1fr);
  }

  /* 件数に合わせて列数を変える。3列に1つだけ余る並びを避ける。 */
  .p-strengths--1 {
    grid-template-columns: minmax(0, 60rem);
  }

  .p-strengths--2,
  .p-strengths--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-strengths__item {
  background-color: var(--rk-white);
  border: 0.1rem solid var(--rk-line-soft);
  padding: 3.2rem 2.4rem;
}

/* グレー背景のセクション上では、カードの白が浮きすぎないように */
.p-sec--soft .p-strengths__item {
  border-color: #e0e0e0;
}

.p-strengths__item i {
  font-size: var(--fs-body);
  font-style: normal;
  letter-spacing: 0.08em;
  opacity: 0.35;
}

.p-strengths__item b {
  display: block;
  font-size: var(--fs-h4);
  line-height: 1.6;
  margin: 1rem 0 1.2rem;
}

.p-strengths__item p {
  color: var(--rk-mut);
  font-size: var(--fs-sm);
  line-height: 1.9;
}

/* ── カードの線画アイコン（Lucide／inc/icons.php） ──
   'icon' を指定した項目だけ .is-with_icon が付く。
   アイコンと連番を1行に並べ、その下に見出しを置く。 */
.p-strengths__head {
  align-items: center;
  display: flex;
  gap: 1.2rem;
}

.p-strengths__ico {
  align-items: center;
  color: var(--rk-ink);
  display: flex;
  height: 3.2rem;
  justify-content: center;
  width: 3.2rem;
}

/* SVG は viewBox 24 の正方形。枠いっぱいに伸ばす。 */
.p-strengths__ico .o-icon {
  display: block;
  height: 100%;
  width: 100%;
}

/* 連番はアイコンの引き立て役なので、単独のときより控えめに */
.p-strengths__item.is-with_icon i {
  opacity: 0.3;
}

.p-strengths__item.is-with_icon b {
  margin-top: 1.6rem;
}

/* ------------------------------------------------------------
   LINE CTA（セクション + 追従ボタン）
   リスト獲得はメールよりLINEに寄せる方針
   ------------------------------------------------------------ */
.p-line_cta {
  background-color: var(--rk-soft);
  padding: 5.6rem 2rem;
  text-align: center;
}

@media (min-width: 768px) {
  .p-line_cta {
    padding: 8rem 2rem;
  }
}

.p-line_cta h2 {
  font-size: var(--fs-h2);
  line-height: 1.7;
}

@media (min-width: 768px) {
  .p-line_cta h2 {
    font-size: 2.8rem;
  }
}

.p-line_cta p {
  color: var(--rk-mut);
  font-size: var(--fs-body);
  line-height: 2;
  margin-top: 1.6rem;
}

.p-line_cta__btn {
  background-color: var(--rk-line-green);
  border-radius: 999px;
  color: var(--rk-white);
  display: inline-block;
  font-size: var(--fs-md);
  font-weight: 700;
  margin-top: 3.2rem;
  padding: 1.6rem 4rem;
  transition: filter 0.3s ease;
}

.p-line_cta__btn:hover {
  filter: brightness(1.08);
}

/* ボタンを横に並べる箱の中では、上マージンを消す。
   TOPで単独に置いたとき用の 3.2rem が残っていて、
   隣の丸ボタンと上下の中心がズレていた。 */
.p-cta__btns .p-line_cta__btn,
.p-sec__btns .p-line_cta__btn,
.is-btn .p-line_cta__btn {
  margin-top: 0;
}

.o-line_cta {
  bottom: 2rem;
  position: fixed;
  right: 2rem;
  z-index: 190;
}

.o-line_cta a {
  align-items: center;
  background-color: var(--rk-line-green);
  border-radius: 999px;
  box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.25);
  color: var(--rk-white);
  display: flex;
  font-size: var(--fs-sm);
  font-weight: 700;
  gap: 0.8rem;
  padding: 1.2rem 2rem;
  transition: filter 0.3s ease;
}

.o-line_cta a:hover {
  filter: brightness(1.08);
}

/* フッター表示中は引っ込める（add.js が付け外しする） */
.o-line_cta.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(1.2rem);
}

.o-line_cta {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.o-line_cta__icon {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  opacity: 0.85;
}

/* SPでは追従ボタンが「TO TOP」と重なるので幅いっぱいに寝かせる */
@media (max-width: 767px) {
  .o-line_cta {
    bottom: 0;
    left: 0;
    right: 0;
  }

  .o-line_cta a {
    border-radius: 0;
    justify-content: center;
    padding: 1.4rem;
  }

  .o-line_cta__icon {
    display: none;
  }

  .o-pagetop {
    bottom: 6rem !important;
  }
}

/* ============================================================
   下層ページ
   ------------------------------------------------------------
   既存の寸法体系に合わせる:
     見出しh2   2.6rem → 4.7rem(PC) / bold / lh1.5
     EN小見出し 1.3rem → 2.2rem(PC) / bold / mb2.5rem
     本文       1.4rem → 1.6rem(PC) / lh1.8〜2
     内容幅     .is-inner_content = max-width 114.6rem / padding 0 3rem
   ============================================================ */

.p-page {
  /* main の padding-top（6rem / PC 9.7rem）は既存CSSが持っている */
  /* overflow-x: hidden だと **スクロールコンテナ扱いになり、中の position:sticky が効かない**。
     （/service/ 配下の切り替えタブが貼り付かなくなる）
     clip なら横のはみ出しは止めたまま sticky が生きる。
     未対応ブラウザ向けに hidden を先に置いて上書きする。 */
  /* 既存CSSに main { overflow: hidden } があり、縦にもスクロールコンテナを作ってしまう。
     .p-page（詳細度で勝つ）で両軸まとめて clip に上書きする。 */
  overflow: hidden;
  overflow: clip;
}

/* ── パンくず ── */
.p-breadcrumb {
  color: var(--rk-mut);
  font-size: var(--fs-xs);
  line-height: 1.8;
  padding-top: 2.4rem;
}

@media (min-width: 768px) {
  .p-breadcrumb {
    font-size: 1.2rem;
    padding-top: 4rem;
  }
}

.p-breadcrumb a {
  color: inherit;
}

.p-breadcrumb a:hover {
  color: var(--rk-ink-strong);
}

.p-breadcrumb span + span::before {
  content: "／";
  margin: 0 0.8rem;
  opacity: 0.45;
}

/* ── ページ見出し ── */
.p-page_head {
  padding: 3.2rem 0 0;
}

@media (min-width: 768px) {
  .p-page_head {
    padding: 6rem 0 0;
  }
}

.p-page_head__en {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .p-page_head__en {
    font-size: 2.2rem;
    margin-bottom: 2.5rem;
  }
}

.p-page_head h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .p-page_head h1 {
    font-size: 4.7rem;
  }
}

.p-page_head__lead {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 2;
  margin-top: 2rem;
  max-width: 82rem;
}

@media (min-width: 768px) {
  .p-page_head__lead {
    font-size: 1.6rem;
    margin-top: 3.2rem;
  }
}

/* ── セクションの余白 ──（寸法は :root のトークンで管理） */
.p-sec {
  padding: var(--sec-y) 0;
}

.p-sec--soft {
  background-color: var(--rk-soft);
}

/* 見出しのすぐ下に中身が来るときの間隔 */
.p-sec .p-index__title {
  margin-bottom: 3.2rem;
}

@media (min-width: 768px) {
  .p-sec .p-index__title {
    margin-bottom: 5rem;
  }
}

.p-sec__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 3.2rem;
  margin-top: 4rem;
}

@media (min-width: 768px) {
  .p-sec__btns {
    margin-top: 5.6rem;
  }
}

/* ── 本文 ── */
.p-prose {
  font-size: var(--fs-body);
  line-height: 2;
  max-width: 82rem;
}

@media (min-width: 768px) {
  .p-prose {
    font-size: 1.6rem;
    line-height: 2.1;
  }
}

.p-prose + .p-prose {
  margin-top: 2.4rem;
}

.p-prose a {
  border-bottom: 0.1rem solid currentColor;
}

/* ── 箇条書き ── */
.p-bullets {
  max-width: 82rem;
}

.p-bullets li {
  font-size: var(--fs-body);
  line-height: 2;
  padding-left: 2.4rem;
  position: relative;
}

@media (min-width: 768px) {
  .p-bullets li {
    font-size: 1.6rem;
  }
}

.p-bullets li + li {
  margin-top: 1.4rem;
}

.p-bullets li::before {
  background-color: var(--rk-ink);
  content: "";
  height: 0.1rem;
  left: 0;
  position: absolute;
  top: 1.6rem;
  width: 1.2rem;
}

/* ── 番号つきの流れ ── */
.p-steps {
  counter-reset: step;
  display: grid;
  gap: 0;
}

.p-steps__item {
  border-top: 0.1rem solid var(--rk-line-soft);
  display: grid;
  gap: 0.8rem 2.4rem;
  grid-template-columns: 5rem 1fr;
  padding: 2.4rem 0;
}

@media (min-width: 768px) {
  .p-steps__item {
    grid-template-columns: 10rem 1fr;
    gap: 0 4rem;
    padding: 3.2rem 0;
  }
}

.p-steps__item:last-child {
  border-bottom: 0.1rem solid var(--rk-line-soft);
}

.p-steps__no {
  font-size: var(--fs-h3);
  line-height: 1.4;
  opacity: 0.3;
}

@media (min-width: 768px) {
  .p-steps__no {
    font-size: 2.4rem;
  }
}

.p-steps__body b {
  display: block;
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .p-steps__body b {
    font-size: 1.9rem;
  }
}

.p-steps__body p {
  font-size: var(--fs-sm);
  line-height: 1.9;
  margin-top: 0.8rem;
}

@media (min-width: 768px) {
  .p-steps__body p {
    font-size: 1.5rem;
  }
}

/* ── 定義リスト（会社概要など） ── */
.p-deflist {
  max-width: 90rem;
}

.p-deflist dt {
  border-top: 0.1rem solid var(--rk-line-soft);
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 2rem 0 0.4rem;
}

.p-deflist dd {
  font-size: var(--fs-body);
  line-height: 1.9;
  padding-bottom: 2rem;
}

.p-deflist dd a {
  border-bottom: 0.1rem solid currentColor;
}

@media (min-width: 768px) {
  .p-deflist {
    display: grid;
    grid-template-columns: 16rem 1fr;
  }

  .p-deflist dt {
    font-size: 1.5rem;
    padding: 2.4rem 2rem 2.4rem 0;
  }

  .p-deflist dd {
    border-top: 0.1rem solid var(--rk-line-soft);
    font-size: 1.6rem;
    padding: 2.4rem 0;
  }
}

/* ── Q&A ── */
.p-faq {
  border-top: 0.1rem solid var(--rk-line-soft);
  max-width: 90rem;
}

.p-faq__item {
  border-bottom: 0.1rem solid var(--rk-line-soft);
}

.p-faq__item summary {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  font-size: var(--fs-body);
  font-weight: 700;
  gap: 1.6rem;
  line-height: 1.7;
  list-style: none;
  padding: 2rem 3.2rem 2rem 0;
  position: relative;
}

@media (min-width: 768px) {
  .p-faq__item summary {
    font-size: 1.7rem;
    padding: 2.6rem 4rem 2.6rem 0;
  }
}

.p-faq__item summary::-webkit-details-marker {
  display: none;
}

.p-faq__item summary::after {
  content: "＋";
  font-weight: 400;
  position: absolute;
  right: 0;
  top: 2rem;
  transition: transform 0.3s ease;
}

@media (min-width: 768px) {
  .p-faq__item summary::after {
    top: 2.6rem;
  }
}

.p-faq__item[open] summary::after {
  content: "－";
}

.p-faq__q,
.p-faq__a_mark {
  flex-shrink: 0;
  font-size: var(--fs-md);
  line-height: 1.5;
  opacity: 0.35;
}

.p-faq__a {
  display: flex;
  gap: 1.6rem;
  padding: 0 0 2.4rem;
}

.p-faq__a div {
  font-size: var(--fs-body);
  line-height: 2;
}

@media (min-width: 768px) {
  .p-faq__a div {
    font-size: 1.55rem;
  }
}

/* ── 代表メッセージ ── */
.p-message {
  display: grid;
  gap: 2.4rem;
  grid-template-columns: 1fr;
}

/* 既存サイトと同じく「写真を左に大きく、本文を右に」。
   本文カラムは写真より少し下から始まる（既存の見え方に合わせている）。 */
@media (min-width: 768px) {
  .p-message {
    align-items: start;
    gap: 6rem;
    grid-template-columns: minmax(0, 42%) 1fr;
  }

  .p-message__body {
    padding-top: 2rem;
  }
}

.p-message__img {
  background-color: var(--rk-white);
  overflow: hidden;
}

.p-message__img img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
}

.p-message__body p {
  font-size: var(--fs-body);
  line-height: 2.1;
}

@media (min-width: 768px) {
  .p-message__body p {
    font-size: 1.6rem;
  }
}

.p-message__body p + p {
  margin-top: 2rem;
}

.p-message__sign {
  margin-top: 3.2rem !important;
  text-align: right;
}

.p-message__sign b {
  font-size: var(--fs-h3);
  font-weight: 700;
}

/* ── メンバー一覧（既存 o-member の中で、モーダルを持たない人の見た目を揃える） ── */
.o-member__list .o-circle_btn.is-static {
  cursor: default;
  display: block;
  width: 100%;
}

/* ── プロフィールのモーダル ──
   既存CSSはPCで右下（bottom:4rem / right:4rem）に出す設計だったが、
   メンバー紹介では画面中央に出したいので上書きする。
   SPは下からせり上がるボトムシートのまま（既存の挙動が自然なため触らない）。 */
@media (min-width: 768px) {
  .o-modal__content {
    bottom: auto;
    left: 50%;
    right: auto;
    top: 50%;
    max-height: min(84vh, 76rem);
    transform: translate(-50%, -46%);
  }

  .o-modal.is-active .o-modal__content {
    transform: translate(-50%, -50%);
  }
}

/* 中央に置くと背景が透けすぎて読みにくいので、少しだけ落とす */
.o-modal__overlay {
  background: rgba(0, 0, 0, 0.28);
}

/* ── 人物一覧 ── */
.p-people {
  display: grid;
  gap: 3.2rem;
}

@media (min-width: 768px) {
  .p-people {
    gap: 5.6rem;
  }
}

.p-people__item {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .p-people__item {
    gap: 4rem;
    grid-template-columns: 24rem 1fr;
  }
}

.p-people__img {
  background-color: var(--rk-soft);
  max-width: 24rem;
  overflow: hidden;
}

.p-people__img img {
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.p-people__body b {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .p-people__body b {
    font-size: 2.2rem;
  }
}

.p-people__role {
  color: var(--rk-mut);
  display: block;
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  margin-top: 0.6rem;
}

@media (min-width: 768px) {
  .p-people__role {
    font-size: 1.35rem;
  }
}

.p-people__body p {
  font-size: var(--fs-body);
  line-height: 2;
  margin-top: 1.6rem;
  max-width: 68rem;
}

@media (min-width: 768px) {
  .p-people__body p {
    font-size: 1.5rem;
  }
}

/* 写真なしの一覧（主要メンバー） */
.p-people--compact {
  border-top: 0.1rem solid var(--rk-line-soft);
  gap: 0;
}

.p-people--compact .p-people__item {
  border-bottom: 0.1rem solid var(--rk-line-soft);
  grid-template-columns: 1fr;
  padding: 1.8rem 0;
}

@media (min-width: 768px) {
  .p-people--compact .p-people__item {
    align-items: baseline;
    grid-template-columns: 24rem 1fr;
    gap: 0 4rem;
    padding: 2.2rem 0;
  }
}

.p-people--compact .p-people__body {
  display: contents;
}

.p-people--compact .p-people__body b {
  font-size: var(--fs-lead);
}

.p-people--compact .p-people__role {
  margin-top: 0.4rem;
}

@media (min-width: 768px) {
  .p-people--compact .p-people__role {
    margin-top: 0;
  }
}

/* ── 画像・動画 ── */
.p-media {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .p-media {
    gap: 2.4rem;
  }

  .p-media--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .p-media--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 画像は必ず枠に収める。元画像が大きいのでこれが無いと巨大化する。 */
.p-media img,
.p-figure__img,
.p-img {
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

.p-media img {
  aspect-ratio: 4 / 3;
  background-color: var(--rk-soft);
  object-fit: cover;
}

.p-media--1 img,
.p-media--video img {
  aspect-ratio: 16 / 9;
}

.p-media--video {
  position: relative;
}

.p-media__badge {
  background-color: rgba(0, 0, 0, 0.7);
  color: var(--rk-white);
  font-size: var(--fs-xs);
  left: 0;
  letter-spacing: 0.08em;
  padding: 0.6rem 1.4rem;
  position: absolute;
  top: 0;
  z-index: 2;
}

.p-media__caption,
.p-figure__caption {
  color: var(--rk-mut);
  font-size: var(--fs-caption);
  line-height: 1.8;
  margin-top: 1.2rem;
}

/* 仮素材であることの注釈。控えめに、でも見落とさない程度に */
.p-media__caption.is-provisional {
  color: #999;
  font-size: var(--fs-xs);
}

/* 素材未定のプレースホルダ（何を入れるべきかが画像に書いてある） */
.p-ph {
  background: var(--rk-soft);
  border: 0.1rem dashed #c9c9c9;
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.p-ph img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.p-ph__tag {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: var(--fs-2xs);
  left: 0;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 0.5rem 0.8rem;
  position: absolute;
  top: 0;
  z-index: 2;
}

.p-media .p-ph {
  height: 100%;
}

/* 仮画像には右上に小さく「仮」を出す。差し替え漏れを防ぐため */
.p-img_wrap {
  display: block;
  position: relative;
}

.p-img_wrap__tag {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 0.5rem 0.8rem;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}

/* grid の直下に span が入るので、画像と同じ振る舞いにしておく */
.p-media .p-img_wrap {
  height: 100%;
}

.p-media .p-img_wrap img {
  height: 100%;
}

/* ── 図解の枠（未作図） ── */
.p-figure {
  align-items: center;
  background-color: var(--rk-white);
  border: 0.1rem dashed var(--rk-line);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  justify-content: center;
  min-height: 18rem;
  padding: 3.2rem 2.4rem;
  text-align: center;
}

@media (min-width: 768px) {
  .p-figure {
    min-height: 24rem;
  }
}

.p-figure__label {
  border: 0.1rem solid var(--rk-line);
  color: var(--rk-mut);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  padding: 0.4rem 1.2rem;
}

.p-figure p {
  color: var(--rk-mut);
  font-size: var(--fs-sm);
  line-height: 1.9;
  max-width: 64rem;
}

/* ── CTAブロック ── */
.p-cta {
  text-align: center;
}

.p-cta b {
  display: block;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .p-cta b {
    font-size: 3.2rem;
  }
}

.p-cta p {
  font-size: var(--fs-body);
  line-height: 2;
  margin-top: 1.6rem;
}

@media (min-width: 768px) {
  .p-cta p {
    font-size: 1.6rem;
    margin-top: 2.4rem;
  }
}

.p-cta__btns {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-top: 3.2rem;
}

@media (min-width: 768px) {
  .p-cta__btns {
    flex-direction: row;
    gap: 4rem;
    justify-content: center;
    margin-top: 4.8rem;
  }
}

/* ── サイトマップ ── */
.p-sitemap {
  display: grid;
  gap: 3.2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .p-sitemap {
    gap: 4rem;
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-sitemap__group {
  border-top: 0.1rem solid var(--rk-line-soft);
  padding-top: 1.6rem;
}

.p-sitemap__title {
  display: inline-block;
  font-size: var(--fs-lead);
  font-weight: 700;
  margin-bottom: 1.6rem;
}

.p-sitemap li {
  font-size: var(--fs-body);
  line-height: 1.8;
  padding: 0.4rem 0;
}

.p-sitemap li.is-heading {
  color: var(--rk-mut);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  margin-top: 1.2rem;
}

/* ── 準備中の但し書き ── */
.p-wip {
  border: 0.1rem dashed var(--rk-line);
  color: var(--rk-mut);
  font-size: var(--fs-sm);
  line-height: 2;
  padding: 2.8rem 2.4rem;
}

@media (min-width: 768px) {
  .p-wip {
    font-size: 1.45rem;
    padding: 4rem;
  }
}

/* ── 注記 ── */
.p-note {
  color: var(--rk-mut);
  font-size: var(--fs-caption);
  line-height: 1.9;
  margin-top: 1.6rem;
  max-width: 82rem;
}

@media (min-width: 768px) {
  .p-note {
    font-size: 1.3rem;
  }
}

/* ============================================================
   コラム（/journal/ と記事詳細）
   ------------------------------------------------------------
   旧デザインは style_old.css 依存で崩れていたため、新デザインで組み直し。
   ============================================================ */

.p-sec--tight {
  padding-bottom: 0;
}

/* ── カテゴリのチップ ── */
.p-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.p-chips a {
  align-items: baseline;
  border: 0.1rem solid var(--rk-line);
  border-radius: 999px;
  display: inline-flex;
  font-size: var(--fs-sm);
  gap: 0.6rem;
  padding: 0.7rem 1.6rem;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.p-chips a span {
  font-size: var(--fs-xs);
  opacity: 0.5;
}

.p-chips a:hover {
  border-color: var(--rk-ink-strong);
}

.p-chips a.is-current {
  background-color: var(--rk-ink-strong);
  border-color: var(--rk-ink-strong);
  color: var(--rk-white);
}

.p-chips--tags {
  margin-top: 4rem;
}

/* ── 記事カード ── */
.p-posts {
  display: grid;
  gap: 3.2rem 2.4rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .p-posts {
    gap: 4.8rem 3.2rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.p-posts__item a {
  display: block;
  height: 100%;
}

.p-posts__img {
  aspect-ratio: 3 / 2;
  background-color: var(--rk-soft);
  overflow: hidden;
}

.p-posts__img img {
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
}

.p-posts__item a:hover .p-posts__img img {
  transform: scale(1.04);
}

.p-posts__meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 1.6rem;
}

.p-posts__meta time {
  font-size: var(--fs-sm);
  opacity: 0.6;
}

.p-posts__body h2 {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.7;
  margin-top: 0.8rem;
}

@media (min-width: 768px) {
  .p-posts__body h2 {
    font-size: 1.7rem;
  }
}

.p-posts__item a:hover .p-posts__body h2 {
  text-decoration: underline;
  text-underline-offset: 0.4rem;
}

.p-posts__body p {
  color: var(--rk-mut);
  font-size: var(--fs-sm);
  line-height: 1.9;
  margin-top: 1rem;
}

/* SPでは抜粋を省いてタイトルを見やすく */
@media (max-width: 767px) {
  .p-posts__body p {
    display: none;
  }
}

/* ── ページネーション ── */
.p-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  margin-top: 6rem;
}

.p-pagination .page-numbers {
  align-items: center;
  border: 0.1rem solid var(--rk-line);
  display: inline-flex;
  font-size: var(--fs-sm);
  height: 4.4rem;
  justify-content: center;
  min-width: 4.4rem;
  padding: 0 1.2rem;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.p-pagination .page-numbers:hover {
  border-color: var(--rk-ink-strong);
}

.p-pagination .page-numbers.current {
  background-color: var(--rk-ink-strong);
  border-color: var(--rk-ink-strong);
  color: var(--rk-white);
}

.p-pagination .dots {
  border-color: transparent;
}

/* ── 記事詳細 ── */
.p-page_head--article h1 {
  font-size: var(--fs-h2-lg);
  margin-top: 1.6rem;
}

@media (min-width: 768px) {
  .p-page_head--article h1 {
    font-size: 3.6rem;
  }
}

.p-article__hero {
  margin-top: 4rem;
}

.p-article__hero img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

/* 本文は WordPress のエディタ出力なので、タグ単位でスタイルを当てる */
.p-article {
  font-size: var(--fs-md);
  line-height: 2.1;
  margin: 0 auto;
  max-width: 80rem;
}

@media (min-width: 768px) {
  .p-article {
    font-size: 1.6rem;
  }
}

.p-article > * + * {
  margin-top: 2.4rem;
}

.p-article h2 {
  border-bottom: 0.1rem solid var(--rk-line-soft);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.6;
  margin-top: 6rem;
  padding-bottom: 1.2rem;
}

@media (min-width: 768px) {
  .p-article h2 {
    font-size: 2.6rem;
  }
}

.p-article h3 {
  font-size: var(--fs-h3);
  font-weight: 700 !important;
  line-height: 1.6;
  margin-top: 4.8rem;
}

@media (min-width: 768px) {
  .p-article h3 {
    font-size: 2.1rem;
  }
}

.p-article h4 {
  font-size: var(--fs-lead);
  font-weight: 700;
  margin-top: 3.2rem;
}

.p-article a {
  border-bottom: 0.1rem solid currentColor;
}

.p-article img {
  height: auto;
  max-width: 100%;
}

.p-article figure {
  margin: 3.2rem 0;
}

.p-article figcaption {
  color: var(--rk-mut);
  font-size: var(--fs-caption);
  margin-top: 0.8rem;
  text-align: center;
}

.p-article ul,
.p-article ol {
  padding-left: 2.4rem;
}

.p-article ul li {
  list-style: disc;
}

.p-article ol li {
  list-style: decimal;
}

.p-article li + li {
  margin-top: 0.8rem;
}

.p-article blockquote {
  border-left: 0.3rem solid var(--rk-line);
  color: var(--rk-mut);
  padding: 0.4rem 0 0.4rem 2rem;
}

.p-article table {
  border-collapse: collapse;
  font-size: var(--fs-body);
  width: 100%;
}

.p-article th,
.p-article td {
  border: 0.1rem solid var(--rk-line-soft);
  padding: 1.2rem;
  text-align: left;
}

.p-article th {
  background-color: var(--rk-soft);
  font-weight: 700;
}

/* ── 前後の記事 ── */
.p-article__nav {
  align-items: center;
  border-top: 0.1rem solid var(--rk-line-soft);
  display: flex;
  font-size: var(--fs-sm);
  gap: 2rem;
  justify-content: space-between;
  margin: 6rem auto 0;
  max-width: 80rem;
  padding-top: 2.4rem;
}

.p-article__nav .is-index {
  color: var(--rk-mut);
  white-space: nowrap;
}

.p-article__nav .is-prev,
.p-article__nav .is-next {
  max-width: 32%;
}

.p-article__nav a {
  display: inline-block;
  line-height: 1.6;
}

.p-article__nav a:hover {
  text-decoration: underline;
  text-underline-offset: 0.4rem;
}

/* ── TOP：投資家向けの近道（ヒーロー直下） ── */
.p-lead_cta {
  border-bottom: 0.1rem solid var(--rk-line-soft);
  padding: 4.8rem 0;
}

@media (min-width: 768px) {
  .p-lead_cta {
    padding: 6.4rem 0;
  }
}

.p-lead_cta__inner {
  display: grid;
  gap: 2.8rem;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .p-lead_cta__inner {
    align-items: center;
    gap: 4.8rem;
    grid-template-columns: 1fr auto;
  }
}

.p-lead_cta__en {
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-bottom: 1.2rem;
  opacity: 0.5;
}

.p-lead_cta h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .p-lead_cta h2 {
    font-size: 2.8rem;
  }
}

.p-lead_cta__note {
  color: var(--rk-mut);
  font-size: var(--fs-sm);
  line-height: 1.9;
  margin-top: 1.4rem;
}

.p-lead_cta__btns {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

@media (min-width: 900px) {
  .p-lead_cta__btns {
    align-items: flex-end;
  }
}

/* ── フッターの事業者情報 ── */
.footer__info {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-caption);
  line-height: 1.9;
  margin: 4rem auto 0;
  max-width: 103.2rem;
  padding: 3.2rem 2rem 0;
  border-top: 0.1rem solid #666;
}

.footer__info__name {
  color: #fff;
  font-weight: 700;
  margin-bottom: 0.8rem;
}

.footer__info p + p {
  margin-top: 0.8rem;
}

.footer__info a {
  border-bottom: 0.1rem solid currentColor;
}

.footer__policy {
  flex-wrap: wrap;
  gap: 1.2rem 2.4rem;
}

/* ── メディア掲載の一覧 ── */
.p-coverage {
  border-top: 0.1rem solid var(--rk-line-soft);
}

.p-coverage__item {
  border-bottom: 0.1rem solid var(--rk-line-soft);
  display: grid;
  gap: 0.6rem 1.6rem;
  grid-template-columns: auto auto;
  grid-template-areas:
    "date type"
    "media media"
    "title title";
  justify-content: start;
  padding: 2rem 0;
}

@media (min-width: 768px) {
  .p-coverage__item {
    align-items: baseline;
    grid-template-columns: 10rem 6rem 26rem 1fr;
    grid-template-areas: "date type media title";
    gap: 0 2.4rem;
    justify-content: stretch;
    padding: 2.2rem 0;
  }
}

.p-coverage__item time {
  grid-area: date;
  font-size: var(--fs-sm);
  opacity: 0.6;
}

.p-coverage__item .is-category {
  grid-area: type;
  justify-self: start;
}

.p-coverage__item b {
  grid-area: media;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.6;
}

.p-coverage__item p {
  grid-area: title;
  color: var(--rk-mut);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* ============================================================
   図解
   ------------------------------------------------------------
   色相は増やさず濃淡のみ。要素には必ずラベルを直付けし、
   色だけに意味を持たせない（モノクロ印刷でも読める）。
   ============================================================ */

/* ── 4事業を関与の深さ順に並べる ── */

.p-brandmap__list {
  display: grid;
  gap: 2.4rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .p-brandmap__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .p-brandmap__list {
    gap: 2rem;
    grid-template-columns: repeat(4, 1fr);
  }
}

.p-brandmap__item a {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.p-brandmap__img {
  aspect-ratio: 4 / 3;
  background-color: var(--rk-soft);
  display: block;
  overflow: hidden;
}

.p-brandmap__img img {
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
}

.p-brandmap__item a:hover .p-brandmap__img img {
  transform: scale(1.04);
}

/* 関与の深さを濃さで表す（1→4 で濃くなる） */
.p-brandmap__step {
  display: block;
  height: 0.5rem;
}

.p-brandmap__item--1 .p-brandmap__step { background: #d4d4d4; }
.p-brandmap__item--2 .p-brandmap__step { background: #a0a0a0; }
.p-brandmap__item--3 .p-brandmap__step { background: #6b6b6b; }
.p-brandmap__item--4 .p-brandmap__step { background: #333; }

.p-brandmap__name {
  align-items: baseline;
  display: flex;
  gap: 1rem;
  margin-top: 1.6rem;
}

.p-brandmap__name b {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

.p-brandmap__name em {
  color: var(--rk-mut);
  font-size: var(--fs-sm);
  font-style: normal;
}

.p-brandmap__lead {
  color: var(--rk-mut);
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.9;
  margin-top: 1.2rem;
}

.p-brandmap__more {
  display: block;
  font-size: var(--fs-sm);
  margin-top: auto;
  padding-top: 1.6rem;
}

/* ── 循環図 ── */
.p-cycle {
  display: grid;
  gap: 3.2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .p-cycle {
    align-items: center;
    gap: 5.6rem;
    grid-template-columns: 30rem 1fr;
  }
}

.p-cycle__ring {
  margin: 0 auto;
  max-width: 26rem;
  position: relative;
  width: 100%;
}

.p-cycle__ring svg {
  display: block;
  width: 100%;
}

.p-cycle__center {
  font-size: var(--fs-body);
  font-weight: 700;
  left: 50%;
  line-height: 1.7;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
}

.p-cycle__list {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .p-cycle__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 3.2rem;
  }
}

.p-cycle__item {
  border-top: 0.1rem solid var(--rk-line-soft);
  padding: 2rem 0;
}

.p-cycle__no {
  color: var(--rk-mut);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
}

.p-cycle__item b {
  display: block;
  font-size: var(--fs-h4);
  font-weight: 700;
  margin: 0.6rem 0 0.8rem;
}

.p-cycle__item p {
  color: var(--rk-mut);
  font-size: var(--fs-sm);
  line-height: 1.9;
}

/* ── 価値の分配図 ── */
.p-valueflow__source {
  background-color: var(--rk-ink-strong);
  color: var(--rk-white);
  display: inline-flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.4rem 2.4rem;
}

.p-valueflow__source__label {
  font-size: var(--fs-h4);
  font-weight: 700;
}

.p-valueflow__source__sub {
  font-size: var(--fs-caption);
  opacity: 0.7;
}

.p-valueflow__list {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
  margin-top: 3.2rem;
  position: relative;
}

@media (min-width: 768px) {
  .p-valueflow__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
  }
}

@media (min-width: 1180px) {
  .p-valueflow__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

.p-valueflow__item {
  background-color: var(--rk-white);
  border: 0.1rem solid var(--rk-line-soft);
  padding: 2.8rem 2.2rem 2.4rem;
  position: relative;
}

/* 「1軒の空き家」から各者へ分かれていく線 */
.p-valueflow__item::before {
  background-color: var(--rk-line);
  content: "";
  height: 1.6rem;
  left: 2.2rem;
  position: absolute;
  top: -1.7rem;
  width: 0.1rem;
}

.p-valueflow__who {
  border: 0.1rem solid var(--rk-line);
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  padding: 0.4rem 1rem;
}

.p-valueflow__item b {
  display: block;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.6;
  margin: 1.4rem 0 1rem;
}

.p-valueflow__item p {
  color: var(--rk-mut);
  font-size: var(--fs-sm);
  line-height: 1.9;
}

.p-valueflow__link {
  display: block;
  font-size: var(--fs-sm);
  margin-top: 1.6rem;
}

.p-valueflow__link a {
  border-bottom: 0.1rem solid currentColor;
  padding-bottom: 0.2rem;
}

/* 同じ背景色のセクションが続くときは余白が二重になるので詰める。
   ただしゼロにすると前のブロックに文章がくっついて見えるので、1段分だけ残す。 */
.p-sec--soft + .p-sec--soft,
.p-sec:not(.p-sec--soft) + .p-sec:not(.p-sec--soft):not(.p-sec--dark) {
  padding-top: 2.4rem;
}

@media (min-width: 768px) {
  .p-sec--soft + .p-sec--soft,
  .p-sec:not(.p-sec--soft) + .p-sec:not(.p-sec--soft):not(.p-sec--dark) {
    padding-top: 4rem;
  }
}

/* 直前のブロックの補足にあたる注記は、少し引きつけて関係を見せる */
.p-sec--soft + .p-sec--soft > .is-inner_content > .p-note:only-child,
.p-sec:not(.p-sec--soft) + .p-sec:not(.p-sec--soft):not(.p-sec--dark) > .is-inner_content > .p-note:only-child {
  margin-top: 0;
}

/* 関与の深さを示す帯。白背景に埋もれないよう太さと濃さを確保する */
.p-brandmap__step {
  height: 0.8rem;
}

.p-brandmap__item--1 .p-brandmap__step { background: #c9c9c9; }
.p-brandmap__item--2 .p-brandmap__step { background: #9a9a9a; }
.p-brandmap__item--3 .p-brandmap__step { background: #616161; }
.p-brandmap__item--4 .p-brandmap__step { background: #222; }

/* 縦積みになるSPでは、軸の矢印が横向きだと嘘になるので隠す */
@media (max-width: 639px) {
  .p-brandmap__axis {
    display: none;
  }
}

/* 循環図：左（環）と右（説明）の高さ差で下に空きができるので詰める */
@media (min-width: 900px) {
  .p-cycle {
    align-items: start;
  }

  .p-cycle__ring {
    position: sticky;
    top: 12rem;
  }
}

.p-cycle + .p-sec__btns,
.p-cycle .p-sec__btns {
  margin-top: 3.2rem;
}

/* ── 2つの選択肢の比較表 ── */
.p-compare {
  background-color: var(--rk-white);
  border: 0.1rem solid var(--rk-line-soft);
}

.p-compare__head {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .p-compare__head {
    grid-template-columns: 14rem 1fr 1fr;
  }
}

/* 見出し行の左上の空セル。3列グリッドの1列目を埋める役なので、
   非表示にすると見出しだけ1列ぶん左へズレる（実際そうなっていた）。 */
.p-compare__axis {
  display: block;
}

.p-compare__col {
  border-bottom: 0.1rem solid var(--rk-line-soft);
  padding: 2.4rem 2rem;
}

@media (min-width: 768px) {
  .p-compare__col {
    border-left: 0.1rem solid var(--rk-line-soft);
  }
}

.p-compare__col--2 {
  background-color: #fafafa;
}

.p-compare__tag {
  background-color: var(--rk-ink-strong);
  color: var(--rk-white);
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.4rem 1.2rem;
}

.p-compare__col b {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.6;
  margin: 1.2rem 0 0.8rem;
}

.p-compare__col p {
  color: var(--rk-mut);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

.p-compare__row {
  border-bottom: 0.1rem solid var(--rk-line-soft);
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .p-compare__row {
    grid-template-columns: 14rem 1fr 1fr;
  }
}

.p-compare__row:last-child {
  border-bottom: 0;
}

.p-compare__row dt {
  background-color: var(--rk-soft);
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 1.4rem 2rem;
}

@media (min-width: 768px) {
  .p-compare__row dt {
    background-color: transparent;
    padding: 2rem;
  }
}

.p-compare__val {
  font-size: var(--fs-body);
  line-height: 1.8;
  padding: 1.6rem 2rem;
}

@media (min-width: 768px) {
  .p-compare__val {
    border-left: 0.1rem solid var(--rk-line-soft);
    padding: 2rem;
  }
}

.p-compare__val--2 {
  background-color: #fafafa;
}

/* ── SPは横スワイプの表にする ──
   以前はSPで1列に積み上げ、CSSの ::before に「買取：」「活用：」と
   直書きして見分けさせていた。ページごとに列名が違う（/owner/ は
   「持ち続ける／売却する」）ので嘘になるうえ、そもそも比較しづらかった。
   表の形のまま横に流し、項目名の列だけ左に貼り付けて残す。 */
@media (max-width: 767px) {
  .p-compare {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .p-compare__head,
  .p-compare__row {
    grid-template-columns: 8.5rem minmax(19rem, 1fr) minmax(19rem, 1fr);
    min-width: 46.5rem;
  }

  /* 項目名の列は、横に流しても左に残す */
  .p-compare__axis,
  .p-compare__row dt {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--rk-soft);
    border-right: 0.1rem solid var(--rk-line-soft);
    padding: 1.4rem 1.2rem;
    font-size: var(--fs-caption);
  }

  .p-compare__axis {
    background-color: var(--rk-white);
    border-right: 0.1rem solid var(--rk-line-soft);
  }

  .p-compare__col {
    padding: 1.6rem 1.2rem;
  }

  .p-compare__col + .p-compare__col {
    border-left: 0.1rem solid var(--rk-line-soft);
  }

  .p-compare__val {
    border-left: 0.1rem solid var(--rk-line-soft);
    padding: 1.4rem 1.2rem;
    font-size: var(--fs-sm);
  }

  /* 横に続きがあることを示す。スクロールし切ると消える。 */
  .p-compare__swipe {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0 0.8rem;
    color: #666;
    font-size: var(--fs-2xs);
  }

  .p-compare__swipe::after {
    content: "→";
  }
}

/* PCではスワイプの案内は出さない。
   ※ この打ち消しは max-width の指定より前に置かないと、
     後勝ちでSPでも消えてしまう（一度それで消していた）。 */
@media (min-width: 768px) {
  .p-compare__swipe {
    display: none;
  }
}

.p-compare + .p-note,
.p-compare__note {
  margin-top: 0;
  padding: 1.6rem 2rem 2rem;
  border: 0.1rem solid var(--rk-line-soft);
  border-top: 0;
  background-color: var(--rk-white);
}

@media (max-width: 767px) {
  .p-compare__note {
    padding: 1.4rem 1.6rem 1.8rem;
  }
}

/* ── 判定フロー ── */
.p-flow__steps {
  counter-reset: q;
  max-width: 82rem;
}

.p-flow__step {
  display: grid;
  gap: 0.4rem 1.6rem;
  grid-template-columns: 4.4rem 1fr;
  padding-bottom: 3.2rem;
  position: relative;
}

/* 次の問いへ落ちていく縦線 */
.p-flow__step:not(:last-child)::before {
  background-color: var(--rk-line);
  content: "";
  height: calc(100% - 4.4rem);
  left: 2.2rem;
  position: absolute;
  top: 4.4rem;
  width: 0.1rem;
}

.p-flow__q {
  align-items: center;
  background-color: var(--rk-white);
  border: 0.15rem solid var(--rk-ink-strong);
  border-radius: 50%;
  display: flex;
  font-size: var(--fs-sm);
  font-weight: 700;
  height: 4.4rem;
  justify-content: center;
  width: 4.4rem;
}

.p-flow__qbody b {
  display: block;
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.7;
  padding-top: 1rem;
}

@media (min-width: 768px) {
  .p-flow__qbody b {
    font-size: 1.8rem;
  }
}

.p-flow__no {
  color: var(--rk-mut);
  display: inline-block;
  font-size: var(--fs-sm);
  margin-top: 0.8rem;
}

.p-flow__exits {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
  margin-top: 1.6rem;
}

@media (min-width: 768px) {
  .p-flow__exits {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

.p-flow__exit {
  background-color: var(--rk-white);
  border: 0.1rem solid var(--rk-line-soft);
  padding: 2rem 1.8rem;
}

.p-flow__exit.is-main {
  border-color: var(--rk-ink-strong);
  border-width: 0.2rem;
}

.p-flow__exit__key {
  border: 0.1rem solid var(--rk-line);
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 700;
  padding: 0.2rem 0.9rem;
}

.p-flow__exit.is-main .p-flow__exit__key {
  background-color: var(--rk-ink-strong);
  border-color: var(--rk-ink-strong);
  color: var(--rk-white);
}

.p-flow__exit b {
  display: block;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.6;
  margin: 1rem 0 0.6rem;
}

.p-flow__exit p {
  color: var(--rk-mut);
  font-size: var(--fs-caption);
  line-height: 1.8;
}

/* ============================================================
   CV導線の強化
   ============================================================ */

/* ── CTAブロック：ページの中で「ここが行動の場所」だと分かる面にする ── */
.p-cta {
  background-color: var(--rk-white);
  border: 0.1rem solid var(--rk-line-soft);
  padding: 4rem 2.4rem;
  text-align: center;
}

@media (min-width: 768px) {
  .p-cta {
    padding: 6rem 4rem;
  }
}

.p-sec--soft .p-cta {
  border-color: #e0e0e0;
}

/* ── 締めのCTAのホバー ──
   現行サイトの Contact 帯（add.css の .o-contact_link .o-circle_btn:hover）と同じ動き。
   角を丸め、枠線を消し、影を落として面が浮き上がって見えるようにする。
   タッチ端末では :hover が張り付くので PC 幅だけ。 */
@media (min-width: 768px) {
  .p-cta {
    transition: border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                border-radius 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .p-cta:hover {
    border-color: transparent;
    border-radius: 1rem;
    box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.08), 0 0.8rem 2.4rem rgba(0, 0, 0, 0.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-cta {
    transition: none;
  }
}

.p-cta__assure {
  color: var(--rk-mut);
  font-size: var(--fs-caption);
  line-height: 1.8;
  margin-top: 2rem;
}

/* ── LINEボタン：緑はLINEの友だち追加だけに使う ── */
.o-line_btn {
  align-items: center;
  background-color: var(--rk-line-green);
  border-radius: 999px;
  box-shadow: 0 0.4rem 1.6rem rgba(6, 199, 85, 0.28);
  color: var(--rk-white);
  display: inline-flex;
  font-weight: 700;
  gap: 1.2rem;
  padding: 1.6rem 3.2rem;
  transition: filter 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.o-line_btn:hover {
  box-shadow: 0 0.8rem 2.4rem rgba(6, 199, 85, 0.34);
  filter: brightness(1.06);
  transform: translateY(-0.2rem);
}

.o-line_btn__icon {
  border: 0.15rem solid rgba(255, 255, 255, 0.75);
  border-radius: 0.5rem;
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 0.4rem 0.6rem;
}

.o-line_btn__text {
  font-size: var(--fs-md);
  letter-spacing: 0.02em;
}

@media (min-width: 768px) {
  .o-line_btn__text {
    font-size: 1.6rem;
  }
}

/* ── 準備中ブロック：未完成に見えないよう、案内として整える ── */
.p-wip {
  align-items: flex-start;
  background-color: var(--rk-white);
  border: 0.1rem solid var(--rk-line-soft);
  border-left: 0.3rem solid var(--rk-line);
  display: flex;
  gap: 1.6rem;
}

.p-wip::before {
  color: var(--rk-mut);
  content: "準備中";
  border: 0.1rem solid var(--rk-line);
  flex-shrink: 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  padding: 0.4rem 1rem;
}

/* 英字ラベル（.p-index__title span）は add.css の定義（SP 1.3rem / PC 2.2rem・bold・黒）が正。
   ここで小さく薄くする上書きを当てていたが、.p-sec の外にある
   「What We Do」「News」だけ大きいままで、TOPの中で2種類の大きさが混在していた。
   全ページで揃えるため上書きを撤去した（2026-08-28 指示）。 */

.p-sec .p-index__title p {
  margin-top: 2rem;
  max-width: 82rem;
}

/* ── リンクのホバーを全体で揃える ── */
.p-doors__links a,
.p-valueflow__link a,
.p-sitemap a,
.p-chips a {
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* ── カードのホバー：触れることが分かる程度に ── */
.p-doors__item,
.p-flow__exit,
.p-strengths__item {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.p-doors__item:hover {
  transform: translateY(-0.3rem);
}

/* ============================================================
   デザインQAで出た不具合の修正
   ============================================================ */

/* ── 画像が読めないときにレイアウトが暴れないようにする ──
   /info/ /journal/ は uploads 未同期でサムネが全滅し、
   width/height 属性の実寸ぶん高さを確保してSPが白紙スクロールになっていた。
   比率だけ先に決めておけば、欠損しても枠の高さは変わらない。 */
.p-info__list__main > ul > li dl dd img,
.p-posts__img img,
.p-brandmap__img img,
.p-stays__item .is-img img,
.p-people__img img {
  aspect-ratio: attr(data-ratio type(<number>), 3 / 2);
  display: block;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  width: 100%;
}

/* attr() の型指定が使えないブラウザ向けに、枠側で比率を確定させる */
.p-info__list__main > ul > li dl dd {
  aspect-ratio: 16 / 9;
  background-color: var(--rk-soft);
  overflow: hidden;
}

/* 読み込めなかった画像の代替テキストが崩れて見えないように */
img {
  color: var(--rk-mut);
  font-size: var(--fs-xs);
}

/* ── コンテナ幅を1本に揃える ──
   本文は .is-inner_content（max-width 114.6rem / padding 0 3rem）が基準。
   Contact帯とフッターの一部だけ別の幅で、縦のラインが通っていなかった。 */
.o-contact_link .o-circle_btn {
  margin-inline: auto;
  max-width: 114.6rem;
  padding-inline: 3rem;
  width: 100%;
}

.footer__content,
.footer__related,
.footer__info,
.footer__policy {
  margin-inline: auto;
  max-width: 114.6rem;
  padding-inline: 3rem;
  width: 100%;
}

.footer__related__grid {
  padding-inline: 0;
}

@media (min-width: 768px) {
  .footer__content__list > ul.o-footer_nav {
    width: auto;
  }
}

/* ルートの文字サイズ（1rem = 10px）は header.php のインラインCSSで定義している。
   外部CSSが届くまでのあいだ既定の16pxで描画されてしまうため、
   ここではなく <head> の先頭に置いている。二重に書かないこと。 */

/* ============================================================
   デザイントークン
   ------------------------------------------------------------
   文字サイズ・余白・カードの寸法はここだけで管理する。
   個別のコンポーネントに数値を直書きしないこと。

   既定値（このブロック）＝ スマートフォン。
   下の @media (min-width: 768px) が PC 値で上書きする。
   PC 値は移行前の実測値と同じなので、PCの見え方は変わらない。

   1rem = 10px 固定（上の「ルートの文字サイズ」参照）なので、
   1.5rem = 15px と読める。
   ============================================================ */
:root {
  /* ── 文字サイズ ── */
  --fs-2xs:     1.2rem;   /* タグ・単位など、最小。SPではこれを下回らせない */
  --fs-xs:      1.25rem;  /* 英字ラベル（What We Do 等）・パンくず */
  --fs-caption: 1.35rem;  /* 注釈・出典・補足。文章が入るので 13px を下回らせない */
  --fs-sm:      1.4rem;   /* 小さめの本文・リスト・表の中身 */
  --fs-body:    1.5rem;   /* 本文 */
  --fs-md:      1.55rem;  /* 少し強い本文 */
  --fs-lead:    1.6rem;   /* リード文 */
  --fs-h4:      1.7rem;   /* カードの見出し */
  --fs-h3:      1.8rem;   /* 小見出し */
  --fs-h2:      1.9rem;   /* セクション見出し（小） */
  --fs-h2-lg:   2.1rem;   /* セクション見出し */
  --fs-h1:      2.2rem;   /* ページタイトル */
  --fs-display: 3.2rem;   /* 数字 */
  --fs-sec:     2.2rem;   /* セクション見出し（add.css の .p-index__title h2 系） */
  --fs-hero:    3.4rem;   /* TOPの大見出し。SP専用（PCは add.css の 9.2rem） */

  /* ── 行間 ── */
  --lh-tight:  1.4;
  --lh-body:   1.85;      /* 和文の本文。SPは行間を広めに取ると読みやすい */
  --lh-head:   1.45;

  /* ── 余白 ── */
  --gutter:    2rem;      /* 画面の左右。.is-inner_content の padding */
  /* 本文ブロックの幅。カード・画像・グリッドと左右の端を揃えるため、
     コンテンツ幅いっぱいにしている。
     以前は 82rem で止めていたが、全幅の要素の下に来ると
     右に中途半端な余白が残って「途中で切れている」ように見えた。
     行が長くなるぶんは行間（--lh-body 1.9〜2.0）で補う。 */
  --measure:   100%;
  --sec-y:     4.4rem;    /* セクションの上下 */
  --sec-y-sm:  2.4rem;    /* 同種セクションが連続したときの上 */
  --gap:       2rem;      /* グリッドの間隔 */
  --gap-sm:    1.2rem;

  /* ── 部品 ── */
  --card-pad:  2rem;      /* カードの内側 */
  --card-gap:  2rem;
  --btn-h:     5.2rem;    /* 丸ボタンの直径 */
  --rule:      #ccc;      /* 罫線 */
  --rule-soft: #e5e5e5;
}

@media (min-width: 768px) {
  :root {
    --fs-2xs:     1rem;
    --fs-xs:      1.1rem;
    --fs-caption: 1.2rem;
    --fs-sm:      1.3rem;
    --fs-body:    1.4rem;
    --fs-md:      1.5rem;
    --fs-lead:    1.6rem;
    --fs-h4:      1.7rem;
    --fs-h3:      1.8rem;
    --fs-h2:      2rem;
    --fs-h2-lg:   2.2rem;
    --fs-h1:      2.35rem;
    --fs-display: 4rem;

    --lh-body:    1.9;

    --gutter:     3rem;
    --sec-y:      8rem;
    --sec-y-sm:   4rem;
    --gap:        3rem;
    --gap-sm:     2rem;
    --card-pad:   3rem;
    --card-gap:   3rem;
    --btn-h:      6rem;
  }
}

/* ── 素材未定のプレースホルダ：不具合ではなく「進行中」に見えるように ── */
.p-ph {
  background: #efede9;
  border: 0;
}

.p-ph__tag {
  background: rgba(0, 0, 0, 0.06);
  color: #7d766c;
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  padding: 0.5rem 0.9rem;
}

/* ── 法務ページは1カラムで読ませる（条文をカードに割ると読みにくい） ── */
.page-terms .p-strengths,
.page-policy .p-strengths {
  border: 0;
  display: block;
  max-width: 82rem;
}

.page-terms .p-strengths__item,
.page-policy .p-strengths__item {
  border: 0;
  border-top: 0.1rem solid var(--rk-line-soft);
  padding: 2.8rem 0;
}

.page-terms .p-strengths__item p,
.page-policy .p-strengths__item p {
  font-size: var(--fs-body);
  line-height: 2.1;
  max-width: none;
}

/* ── コラム一覧：抜粋が長くカードが文字で埋まるので行数で切る ── */
.p-posts__body p {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  overflow: hidden;
}

/* ── タップ領域を44px以上に（iOS の指針） ── */
@media (max-width: 767px) {
  .p-posts__item a,
  .p-sitemap li a,
  .o-footer_nav a,
  .footer__related__col a,
  .p-doors__links a {
    display: inline-block;
    min-height: 4.4rem;
    line-height: 4.4rem;
  }

  .p-doors__links a {
    line-height: 2;
    padding-block: 1.2rem;
  }
}

/* ── 円形矢印ボタンのサイズを2種類に整理 ──
   同一クラスで96/66/32pxの3種類が混在していたので、
   セクションのCTAは大、リスト行は小、の2つに寄せる。 */
.p-sec__btns .o-circle_btn__circle,
.p-cta__btns .o-circle_btn__circle,
.is-btn .o-circle_btn__circle {
  height: 6.4rem;
  width: 6.4rem;
}

@media (min-width: 768px) {
  .p-sec__btns .o-circle_btn__circle,
  .p-cta__btns .o-circle_btn__circle,
  .is-btn .o-circle_btn__circle {
    height: 9.6rem;
    width: 9.6rem;
  }
}

/* ── LINE CTAブロックの上下余白をページ間で揃える ── */
.p-sec > .is-inner_content > .p-cta {
  margin-block: 0;
}

/* ============================================================
   下層ページの写真ヘッダー帯
   ------------------------------------------------------------
   本番サイトは下層ページに写真フルブリードの帯を敷いていた。
   新サイトで白地テキストのみにしたら「文字だけのサイト」に見えたので戻す。
   写真の上に文字を乗せるので、可読性のために黒のグラデーションを重ねる。
   ============================================================ */
.p-hero {
  align-items: flex-end;
  background-color: #2a2a2a;
  background-image: var(--hero);
  background-position: center;
  background-size: cover;
  color: #fff;
  display: flex;
  min-height: 30rem;
  padding: 4rem 0;
  position: relative;
}

@media (min-width: 768px) {
  .p-hero {
    min-height: 40rem;
    padding: 6rem 0;
  }
}

/* 写真の明暗にかかわらず文字が読めるようにする */
.p-hero::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 38%, rgba(0, 0, 0, 0.62) 100%);
  content: "";
  inset: 0;
  position: absolute;
}

.p-hero > .is-inner_content {
  position: relative;
  z-index: 1;
}

.p-hero .p-breadcrumb {
  color: rgba(255, 255, 255, 0.75);
  padding-top: 0;
}

.p-hero .p-breadcrumb a:hover {
  color: #fff;
}

.p-hero__body {
  margin-top: 3.2rem;
}

@media (min-width: 768px) {
  .p-hero__body {
    margin-top: 5.6rem;
  }
}

.p-hero__en {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 1.4rem;
  opacity: 0.85;
}

@media (min-width: 768px) {
  .p-hero__en {
    font-size: 1.4rem;
    margin-bottom: 2rem;
  }
}

.p-hero h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.5;
  text-shadow: 0 0.1rem 2.4rem rgba(0, 0, 0, 0.35);
}

@media (min-width: 768px) {
  .p-hero h1 {
    font-size: 4.7rem;
  }
}

.p-hero__lead {
  font-size: var(--fs-body);
  line-height: 2;
  margin-top: 2rem;
  max-width: 82rem;
  text-shadow: 0 0.1rem 1.6rem rgba(0, 0, 0, 0.4);
}

@media (min-width: 768px) {
  .p-hero__lead {
    font-size: 1.6rem;
    margin-top: 2.8rem;
  }
}

/* 写真帯の直後は、main の上余白ぶん空きすぎるので詰める */
.p-hero + .p-sec {
  padding-top: 6rem;
}

@media (min-width: 768px) {
  .p-hero + .p-sec {
    padding-top: 9rem;
  }
}

/* 帯はヘッダーの下から始める。
   main の padding-top（6rem / PC 9.7rem）を消すと、
   透過ヘッダーの黒ロゴ・黒ナビが写真に重なって読めなくなる。 */

/* ── ヘッダー右端の問い合わせCTA ── */
.header__content__nav .o-nav_cta {
  border: 0.1rem solid currentColor;
  display: block;
  font-size: var(--fs-sm);
  margin-left: 4rem;
  padding: 0.9rem 2rem;
  transition: background-color 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}

.header__content__nav .o-nav_cta:hover {
  background-color: var(--rk-ink-strong);
  color: #fff;
}

/* 透過ヘッダー（写真帯ページの上）でも読めるように、固定後は通常配色 */
.header.is-fixed .header__content__nav .o-nav_cta {
  border-color: var(--rk-ink-strong);
}

/* ── TOPのお知らせ：見出しを揃えたぶん、リストの上余白を調整 ── */
.p-index__news .p-index__title {
  margin-bottom: 3.2rem;
}

@media (min-width: 768px) {
  .p-index__news .p-index__title {
    margin-bottom: 4.8rem;
  }
}

/* max-height だけで大きさを決めている画像は、幅を自動にして比率を保つ */
.footer__sns ul li img,
.footer__content__logo ul li img,
.header__list .is-wrap ul li img,
.header__content__logo img,
.header__list__logo img {
  width: auto;
}

/* ============================================================
   レイアウトの基準寸法をトークンに寄せる
   ------------------------------------------------------------
   .is-inner_content は add.css 由来（padding: 0 3rem 固定）。
   SPでは 3rem = 30px×2 で、390px幅だと本文が330pxしか残らず
   1行の文字数が足りなかったので、--gutter（SP 2rem）に置き換える。
   add.css は編集しない方針なので、ここで上書きしている。
   ============================================================ */
.is-inner_content {
  padding: 0 var(--gutter);
}

/* ============================================================
   ハンバーガーメニュー（SP）
   ------------------------------------------------------------
   不具合: .header__list__content が height:100vh 固定だったため、
   メニューの中身（約2,170px）が 100vh を超えたところで白背景が
   途切れ、後ろのページが透けて見えていた。
   ・背景は外側（.header__list）にも敷いて、スクロールしても切れないようにする
   ・content の高さは min-height にして中身に合わせて伸ばす
   ============================================================ */
.header__list {
  background: #fff;
  overscroll-behavior: contain;
}

.header__list__content {
  height: auto;
  min-height: 100svh;
  width: 100%;
  padding-bottom: 4rem;
}

.header__list__content .is-wrap {
  padding: 7rem var(--gutter) 0;
}

/* ── ハンバーガー内メニュー：SPはアコーディオン ──
   全部開くと 2,600px 超（3画面分）あってスクロールが辛かったので、
   SPではグループごとに畳む。開閉は assets/js/renewal.js。
   いま見ているページのグループだけ最初から開いている。

   SPでは見出し行を「開閉するだけ」のボタンにしている。
   見出しがリンクを兼ねていると、開こうとしたタップで画面が飛んでしまうため。
   同じページへは、開いた中の先頭項目から行ける。 */
.o-megamenu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.o-megamenu__toggle {
  display: none;
}

@media (max-width: 767px) {
  .o-megamenu {
    gap: 0;
  }

  .o-megamenu__group + .o-megamenu__group {
    border-top: 0.1rem solid var(--rule-soft);
  }

  /* SPは見出しリンクを隠し、行まるごとがボタン */
  .o-megamenu__head > .is-link {
    display: none;
  }

  .o-megamenu__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 5.6rem;
    padding: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.04);
  }

  .o-megamenu__toggle .is-label {
    font-size: var(--fs-h4);
    font-weight: 700;
  }

  /* ＋／− のしるし。行全体がタップ領域なので、これ自体は飾り。 */
  .o-megamenu__toggle .is-icon {
    position: relative;
    flex: 0 0 1.6rem;
    height: 1.6rem;
  }

  .o-megamenu__toggle .is-icon::before,
  .o-megamenu__toggle .is-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.4rem;
    height: 0.1rem;
    background: #000;
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .o-megamenu__toggle .is-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .o-megamenu__group.is-open .o-megamenu__toggle .is-icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0;
  }

  /* 閉じている間は高さ0。display:none にしないのは、
     開いたときにアニメーションさせたいのと、リンクを
     DOMに残して検索エンジン・スクリーンリーダーから辿れるようにするため。
     （grid の 0fr→1fr は子が1つのときしか効かないので max-height でやる） */
  .o-megamenu__group > ul {
    display: block;
    overflow: hidden;
    max-height: 0;
    /* 閉じるときは最初にガクッと縮む曲線にして、
       max-height の余りぶんの「無音時間」を目立たなくする */
    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
  }

  /* 開いた高さは renewal.js が中身の実寸を入れる。
     ここを固定値にしていたら、項目の多いグループが下から切れて
     「クラブチーム」などに到達できなくなっていた。
     この none は JS が動かなかったときの保険（アニメーションはしない）。 */
  .o-megamenu__group.is-open > ul {
    max-height: none;
    transition: max-height 0.4s ease-in;
  }

  /* SPは項目の高さ（min-height 4.4rem）でリズムを作るので、
     add.css が入れている padding を落とす。
     ・ul の padding-top 2rem は max-height:0 でも消えないため、
       閉じたグループが 20px ぶん残る原因になっていた
     ・li の padding-bottom 2rem があると li が中身より 20px 高くなり、
       ダッシュの top:50% が文字の中心とズレる

     セレクタが長いのは add.css 側（詳細度 0,3,3）に勝つため。
     短く書くと負ける。add.css は編集しない方針なのでここで合わせている。 */
  .header__list__content .is-wrap > ul:first-child > li {
    padding-top: 0;
    padding-bottom: 0;
    border-top: 0;
  }

  .header__list__content .is-wrap > ul:first-child > li ul {
    padding-top: 0;
    padding-left: 0;
  }

  .header__list__content .is-wrap > ul:first-child > li ul li {
    padding-bottom: 0;
    font-size: inherit;
  }

  /* 下層のダッシュ。PCは1行前提で top:0.85em だが、
     SPはリンクを flex で縦中央寄せにしているので中央基準にする。 */
  .o-megamenu li:has(> a.is-sub)::before {
    top: 50%;
    transform: translateY(-50%);
  }

  /* リンクとして押せるのは、開いた中だけ */
  .o-megamenu a {
    display: flex;
    align-items: center;
    min-height: 4.4rem;
    font-size: var(--fs-body);
  }

  .o-megamenu a.is-sub {
    font-size: var(--fs-sm);
    min-height: 4rem;
  }

  .o-megamenu li.is-heading {
    font-size: var(--fs-caption);
    padding-top: 1.2rem;
  }

  .o-megamenu__group:last-child > ul {
    padding-bottom: 1.2rem;
  }
}

/* ============================================================
   継承パーツ（add.css）の文字サイズ ― SPだけ上書きする
   ------------------------------------------------------------
   ここは必ず @media (max-width: 767px) の中に置くこと。

   理由: add.css はこれらに @media (min-width: 768px) でPC用の値を
   当てている（例: .p-index__read h2 は base 4.4rem / PC 9.2rem）。
   メディアクエリは詳細度を上げないので、renewal.css の後ろに
   素で書くとPC値まで打ち消してしまう。
   実際それをやって、TOPの「地域を、動かす。」が 92px → 44px、
   セクション見出しが 47px → 26px に縮んだ。

   SPに限定しておけば、PC側は add.css の値がそのまま残る。
   ============================================================ */
@media (max-width: 767px) {
  .p-index__title h2,
  .p-company__table h2,
  .is-business .p-company__table h2,
  .p-company__message__title h2,
  .p-company__section h2 {
    font-size: var(--fs-sec);
  }

  .p-index__read h2 {
    font-size: var(--fs-hero);
  }

  .o-page_title__content h2,
  .p-company__content__text h2 {
    font-size: var(--fs-h1);
  }

  /* 役職・カテゴリ・コピーライトは add.css で 1.1rem 直書き。
     SPで11pxは小さすぎるのでトークンに載せ替える。
     役職名は文章に近いので --fs-caption（13.5px）。 */
  .o-member__list li dl dd {
    font-size: var(--fs-caption);
  }

  .p-index__news__content ul li dl dt .is-category {
    font-size: var(--fs-xs);
  }

  .footer__content__logo .is-copy {
    font-size: var(--fs-2xs);
  }
}

/* ============================================================
   「差し替え予定」バッジ
   ------------------------------------------------------------
   本番素材が揃うまでの仮当て画像に必ず印を出す。
   これが無いと、差し替え漏れのまま公開してしまう。
   pages.php の 'hero_note' を消せばバッジも消える。
   ============================================================ */
.p-hero__provisional {
  position: absolute;
  right: var(--gutter);
  bottom: 1.2rem;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 0.8rem;
  max-width: calc(100% - var(--gutter) * 2);
  padding: 0.6rem 1.2rem;
  border-radius: 0.3rem;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.p-hero__provisional .is-detail {
  color: rgba(255, 255, 255, 0.72);
}

/* SPは幅が足りないので、説明は隠して「差し替え予定」だけ出す */
@media (max-width: 767px) {
  .p-hero__provisional .is-detail {
    display: none;
  }
}

.p-img_wrap__tag {
  white-space: nowrap;
}

/* ── YouTube 埋め込み（type=video）──
   16:9 を固定しておくと、読み込み中に高さが変わってページが飛ばない。 */
.p-video {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: 0.4rem;
  background: #000;
}

.p-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.p-video + .p-note {
  margin-top: 1.2rem;
}

/* 本文中で1文だけ強調したいとき（金額の下限など、読み飛ばされると困る条件） */
.is-strong {
  display: inline-block;
  margin-top: 0.6rem;
  font-weight: 700;
}

/* ============================================================
   /works/ エリア別の実績（type=proof）
   ------------------------------------------------------------
   「雰囲気が良い」ではなく数字で見せる欄。
   数字が未取得の宿は「取得中」と出して、空欄で誤魔化さない。
   ============================================================ */
.p-proof {
  display: grid;
  gap: 3.2rem;
}

@media (min-width: 768px) {
  .p-proof {
    gap: 4.8rem;
  }
}

.p-proof__head {
  padding-bottom: 1.2rem;
  border-bottom: 0.1rem solid #000;
}

.p-proof__region {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: var(--fs-h3);
  font-weight: 700;
}

/* 地域名は折り返さない。「瀬戸／内」と割れていた。 */
.p-proof__region > :first-child,
.p-proof__region {
  white-space: nowrap;
}

.p-proof__region span {
  color: #666;
  font-size: var(--fs-caption);
  font-weight: 400;
  white-space: normal;
}

.p-proof__lead {
  margin-top: 0.6rem;
  color: #333;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.p-proof__list {
  display: grid;
}

.p-proof__item {
  display: grid;
  gap: 0.8rem;
  padding: 1.6rem 0;
  border-bottom: 0.1rem solid var(--rule-soft);
}

@media (min-width: 768px) {
  .p-proof__item {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2rem;
  }
}

.p-proof__name {
  font-size: var(--fs-body);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 0.05em;
  text-decoration-color: #ccc;
}

.p-proof__name:hover {
  text-decoration-color: #000;
}

/* 3つの数字。SPでも横に並べたいので固定3列にする。 */
.p-proof__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

@media (min-width: 768px) {
  .p-proof__metrics {
    grid-template-columns: repeat(3, 9rem);
    gap: 2rem;
    text-align: right;
  }
}

.p-proof__metrics dt {
  color: #666;
  font-size: var(--fs-2xs);
  font-weight: 400;
  letter-spacing: 0.04em;
}

.p-proof__metrics dd {
  margin-top: 0.2rem;
  line-height: 1.2;
}

.p-proof__metrics dd b {
  font-family: "futura-pt", "Jost", "Century Gothic", CenturyGothic, sans-serif;
  font-size: var(--fs-h3);
  font-weight: 700;
}

.p-proof__metrics dd span {
  margin-left: 0.2rem;
  color: #666;
  font-size: var(--fs-2xs);
}

.p-proof__metrics .is-pending {
  color: #999;
  font-size: var(--fs-caption);
}

.p-note.is-provisional {
  color: #666;
}

/* ============================================================
   スマホ表示のQAで出た不具合の修正
   ============================================================ */

/* ── LINEボタンの「LINE」バッジが「LIN／E」に割れていた ── */
.o-line_btn__icon {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── 見出しの1〜2文字だけが次行に落ちる問題 ──
   「…場所がない方／へ」のような孤立を、文節単位の折り返しで防ぐ。
   対応していないブラウザでは今までどおり文字単位で折り返すだけ。 */
h1,
h2,
h3,
.p-index__read h2,
.p-index__title h2,
.p-hero h1,
.p-page_head h1,
.p-cta__title,
.p-sec__title {
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

/* CTAの本文はSPでは左揃えに。中央揃えのまま折り返すと孤立が目立つ。 */
@media (max-width: 767px) {
  .p-cta p,
  .p-cta__body {
    text-align: left;
  }
}

/* ── フッターのリンクが2行になると行間44pxで分断されていた ──
   タップ領域は行間ではなく padding で確保する。 */
@media (max-width: 767px) {
  /* 左右は本文と同じ --gutter に揃える。add.css の 3rem のままだと
     390px幅で本文より10pxずつ内側に入って窮屈だった。 */
  .footer__content,
  .footer__related,
  .footer__info,
  .footer__policy {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  /* 項目の縦の余白。add.css が li に 25px/5px を持たせていて、
     さらにリンク側の padding が重なり、1項目81pxまで開いていた。
     タップ領域はリンク側だけで確保する。 */
  /* セレクタが長いのは add.css の
       .footer__content__list>ul>li:nth-child(1) ul li { margin-bottom: 2rem }
     （詳細度 0,2,4）に勝つため。短く書くと負けて 1項目64px のままになる。
     タップ領域はリンク側の44pxで足りているので、間隔は詰める。 */
  .footer__content__list > ul.o-footer_nav > li > ul > li {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0.4rem;
  }

  .o-footer_nav a {
    display: block;
    padding: 1rem 0;
    line-height: 1.6;
  }

  /* 子リンクのインデントをハンバーガー側と揃える */
  .o-footer_nav > li > ul {
    padding-left: 1.4rem;
  }

  /* ダッシュはリンクの高さの中央に置く。
     li の余白を消したので、これで文字の中心と合う。 */
  .o-footer_nav li:has(> a.is-sub)::before {
    top: 50%;
    transform: translateY(-50%);
  }

  /* 2カラムだと1カラムあたり127pxしかなく、ほぼ全部が折り返していた */
  .footer__content__list > ul.o-footer_nav {
    grid-template-columns: 1fr;
  }

  /* グループ同士の間 */
  .o-footer_nav__group + .o-footer_nav__group {
    margin-top: 2.4rem;
  }
}

/* ── SNSアイコン・フッター下部リンクのタップ領域 ── */
.footer__content__logo + ul a,
.header__list__content .is-wrap > ul:last-child a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.4rem;
  min-height: 4.4rem;
}

@media (max-width: 767px) {
  .o-footer_sub a,
  .footer__content__nav a {
    display: inline-block;
    padding: 0.9rem 0;
    font-size: var(--fs-caption);
  }
}

/* ── TOPのお知らせ一覧、右端の丸矢印が18pxしかなく、
      しかも本文と1px重なっていた ──
   ⚠️ もとは .o-circle_btn（＝行そのもの、および「すべて見る」ボタン）にも
      width/height:4rem を当てていて、SPで行が幅40pxに潰れ、
      日付もタイトルも1文字ずつ縦に折り返されていた。
      サイズを効かせたいのは丸アイコン（__circle）だけなので、そこに限定する。 */
@media (max-width: 767px) {
  /* 丸矢印は add.css で position:absolute / right:0 に置かれているので、
     本文が下に潜り込まないよう右に逃がす。 */
  .p-index__news__content ul li a {
    padding-right: 5.2rem;
  }

  /* add.css の .p-index__news__content ul li .o-circle_btn__circle (0,3,2) が
     height/width:1.8rem を持っている。セレクタを合わせないと高さだけ負けて
     「幅40px・高さ18px」の潰れた楕円になる。top:43% も中央からずれていた。 */
  .p-index__news__content ul li .o-circle_btn__circle {
    width: 4rem;
    height: 4rem;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* ── 図版（フロアプランなど）が cover で左右15%ずつ切れていた ──
   写真は cover でよいが、文字の入った図は全部見えないと意味がない。 */
.p-img_wrap img.is-diagram,
img.is-diagram {
  object-fit: contain;
  background: #fff;
}

/* ── ヒーローの文字が明るい写真に埋もれる ──
   上下グラデだけだと中央が抜けるので、全面に薄い暗幕を足す。 */
.p-hero::before {
  background-color: rgba(0, 0, 0, 0.34);
}

@media (min-width: 768px) {
  .p-hero::before {
    background-color: rgba(0, 0, 0, 0.28);
  }
}

/* ── /company/ の理念・ビジョンのブロック ──
   ここに --sec-y の上下パディングを足していたが、add.css の
   `.p-company__section { margin-bottom: 38rem }` と二重になって
   写真の下に画面1つぶんの空白ができていた（2026-08-22 指示で現行サイトに合わせて撤去）。
   38rem は、写真が absolute で bottom:-17.5rem までせり出すぶんの逃げ。
   上の余白は .p-company__read の padding-bottom:15rem が持っている。 */

@media (max-width: 767px) {
  /* PC想定で手打ちされた <br> が、SPでは二重折り返しになる */
  .p-company__section p br,
  .p-company__section h2 br {
    display: none;
  }

  /* 写真行が左30px・右0pxで右端が画面外へ抜けていた */
  .p-company__section > img {
    width: 100%;
    margin: 0;
    padding: 0 var(--gutter);
  }
}

/* ── /works/・/business/ のカード間に残っていた
      PC用コネクタ線の切れ端 ── */
@media (max-width: 767px) {
  .p-valueflow__item::after,
  .p-cycle__item::after {
    display: none;
  }
}

/* ── /members/ の氏名行の28pxの丸は、何のリンクか分からず装飾のゴミに見えていた ── */
@media (max-width: 767px) {
  .o-member__list .o-circle_btn__circle {
    width: 3.6rem;
    height: 3.6rem;
  }
}

/* ── メガメニューの3段組み（PC・wideグループ）──
   見出し＋配下の項目を1つの li にまとめてあるので、
   段の境目でグループが分断されない。 */
.o-megamenu__col > .is-heading {
  display: block;
}

@media (min-width: 768px) {
  .o-megamenu__group.is-wide > ul > li.o-megamenu__col {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 2.4rem;
  }

  .o-megamenu__group.is-wide > ul > li.o-megamenu__col:first-child {
    /* 「関わり方とストーリー」だけは見出しのない先頭項目 */
    margin-bottom: 1.6rem;
  }
}

/* 強みの一言（--fs-h4 の見出しと本文のあいだ） */
.p-strengths__lead {
  display: block;
  margin-top: 0.6rem;
  color: #666;
  font-size: var(--fs-sm);
}

/* ── 拠点図（type=locations）──
   写真ではなく図版なので SVG。色はサイトのモノクロに合わせる。 */
.p-locmap svg {
  width: 100%;
  height: auto;
  max-width: 64rem;
}

.p-locmap .is-spine {
  stroke: #ccc;
  stroke-width: 1;
}

.p-locmap .is-office {
  fill: #000;
}

.p-locmap .is-dot {
  fill: #fff;
  stroke: #000;
  stroke-width: 1.5;
}

.p-locmap .is-pref {
  fill: #000;
  font-size: 20px;
  font-weight: 700;
  dominant-baseline: middle;
}

.p-locmap .is-badge {
  fill: #000;
}

.p-locmap .is-badge_label {
  fill: #fff;
  font-size: 13px;
  text-anchor: middle;
  dominant-baseline: middle;
}

.p-locmap .is-towns,
.p-locmap .is-count {
  fill: #666;
  font-size: 15px;
}

.p-locmap figcaption {
  margin-top: 1.2rem;
}


/* ============================================================
   本文ブロックの幅と位置を1本に揃える
   ------------------------------------------------------------
   これまで場所ごとにバラバラだった:
     ・.p-prose / セクションのリード  … max-width 82rem で左寄せ（右に266pxの死に幅）
     ・.p-index__about__content       … PCで padding-left 31.2rem（左に312pxの空き）
   見出し・カード・画像は全幅なので、本文だけ幅が違うと
   「中途半端に余白がある」ように見える。全部コンテンツ幅に揃える。
   ============================================================ */
/* セレクタが長いのは、先に書かれている
   `.p-sec .p-index__title p { max-width: 82rem }`（詳細度 0,2,1）に
   勝つため。短く書くと負ける。 */
.p-prose,
.p-sec .p-index__title p,
.p-index__title p,
.p-page_head__lead,
.p-hero__lead,
.p-bullets,
.p-deflist,
.p-faq,
.p-figure p,
.p-note {
  max-width: var(--measure);
  margin-right: 0;
  margin-left: 0;
}

/* 記事本文（コラム）だけは例外。長文を読ませる場所なので、
   1行が長くなりすぎないように従来どおり幅を絞る。 */
.p-article {
  max-width: 80rem;
}

/* TOPの「What We Do」本文。add.css がPCで 31.2rem の左インデントを
   付けていたが、見出しは全幅左端なので揃っていなかった。 */
@media (min-width: 768px) {
  .p-index__about__content {
    padding-left: 0;
  }
}

/* ── カードの上に置く帯写真（type=cards の 'img'）──
   文字だけのページをSPで読ませるための息継ぎ。
   高さは 16:9 で固定して、読み込み中にガタつかせない。 */
.p-cardsimg {
  position: relative;
  margin-bottom: var(--gap);
  overflow: hidden;
  border-radius: 0.4rem;
  aspect-ratio: 16 / 9;
}

@media (min-width: 768px) {
  .p-cardsimg {
    aspect-ratio: 21 / 9;
  }
}

.p-cardsimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-cardsimg__tag {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.6rem 1.2rem;
  border-radius: 0.3rem;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: var(--fs-2xs);
  line-height: 1.5;
}

.p-cardsimg__tag span {
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 767px) {
  .p-cardsimg__tag span {
    display: none;
  }
}

/* グループ見出しはリンクではなくなったので、カーソルと下線を消す。
   （span / p になったが、既存の .is-link のスタイルはそのまま使う） */
span.is-link,
.p-sitemap__title,
.footer__related__title {
  cursor: default;
}

span.is-link:hover,
.p-sitemap__title:hover,
.footer__related__title:hover {
  opacity: 1;
  text-decoration: none;
}

/* ── 動画アーカイブ（type=videos）── */
.p-videos__group + .p-videos__group {
  margin-top: var(--sec-y-sm);
}

.p-videos__label {
  padding-bottom: 1.2rem;
  border-bottom: 0.1rem solid #000;
  font-size: var(--fs-h3);
  font-weight: 700;
}

.p-videos {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
  margin-top: var(--gap);
}

@media (min-width: 768px) {
  .p-videos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 16:9 を固定しておくと、iframe の読み込み中に高さが変わらない */
.p-videos__frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.4rem;
  background: #000;
}

.p-videos__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.p-videos__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.p-videos__title span {
  flex: 0 0 auto;
  color: #666;
  font-family: "futura-pt", "Jost", "Century Gothic", CenturyGothic, sans-serif;
  font-size: var(--fs-2xs);
}


/* ============================================================
   ヘッダー：ハンバーガーの切替点を 1024px まで上げる
   ------------------------------------------------------------
   add.css は 768px 以上で横並びナビ（.header__content__nav）を出し、
   ハンバーガー（.header__content__ham）を消していた。
   だが 768〜890px ではナビの1項目目がロゴに重なって読めなかった
   （実測 768px で -125px、880px で -13px 重なり）。
   タブレット域の文字を大きくするとさらに広い幅まで破綻するので、
   1180px までハンバーガーに寄せる。中身は同じメガメニューなので
   情報は失われない。
   ============================================================ */
@media (min-width: 768px) and (max-width: 1180px) {
  .header__content__nav {
    display: none;
  }

  .header__content__ham {
    display: block;
  }
}

/* /company/ の Philosophy / Vision のラベル。
   もとは h3 だったが h1 の直後に来ていて見出し階層が飛んでいたため、
   見出しではなく飾り（p）にした。見た目は元のまま。 */
/* 現行サイトは h3 で「Philosophy  -経営理念-」を1行に並べている。
   こちらは h3 が h2 より先に来る階層崩れを避けて p にしたので、
   add.css の `.p-company__section h3` が当たらない。見た目だけ同じ値で作り直す。
   （縦積み・グレー小文字にしていたが、現行と違うという指摘で戻した 2026-08-22） */
.p-company__eyebrow {
  align-items: center;
  display: flex;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 0;
}

.p-company__eyebrow .font_futura {
  font-size: 1.8rem;
  letter-spacing: 0.08em;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .p-company__eyebrow .font_futura {
    font-size: 2.2rem;
    padding-right: 1.8rem;
  }
}

/* ── SNSは「空き家再生」と「宿」の2アカウント ──
   アイコンだけでは見分けがつかないので、必ずラベルを添える。
   ラベルとアイコンは左端で揃える（別々の配置だと関係が読めない）。 */
.footer__sns_group,
.header__list__sns {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.footer__sns_group + .footer__sns_group,
.header__list__sns + .header__list__sns {
  margin-top: 0.4rem;
}

/* ラベルは文字幅ぶんだけ。固定幅にすると、短い「宿」のときに
   アイコンとの間が間延びする。 */
.footer__sns_group .is-label,
.header__list__sns .is-label {
  flex: 0 0 auto;
  min-width: 3em;
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  line-height: 1.4;
}

.footer__sns_group .is-label {
  color: rgba(255, 255, 255, 0.5);
}

.header__list__sns .is-label {
  color: #666;
}

.footer__sns_group ul,
.header__list__sns ul {
  display: flex;
  align-items: center;
  gap: 0;
}

/* タップ領域。アイコン自体は小さいので当たり判定だけ広げる。 */
/* タップ領域は 4.4rem 角。アイコン自体はその中で少し大きめに。 */
.footer__sns_group ul a,
.header__list__sns ul a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.4rem;
  min-height: 4.4rem;
}

.footer__sns_group ul img,
.header__list__sns ul img {
  width: auto;
  max-height: 2.2rem;
}

/* コピーライトはフッターのいちばん下に1つだけ。
   以前はロゴの下にも同じものがあって二重に出ていた。 */
.footer__copy {
  margin-top: var(--sec-y-sm);
  padding-top: 2rem;
  border-top: 0.1rem solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-2xs);
  text-align: center;
}

/* ── /journal/ の PICK UP ──
   旧サイトの #pickup を引き継いだ枠。1本目を大きく、残り2本を横に並べる。 */
.p-pickup {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .p-pickup {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-pickup__item:first-child {
    grid-row: span 2;
  }

  .p-pickup__item:first-child .p-pickup__img {
    aspect-ratio: 4 / 3;
  }
}

.p-pickup__item a {
  display: block;
  height: 100%;
}

.p-pickup__img {
  overflow: hidden;
  border-radius: 0.4rem;
  aspect-ratio: 16 / 9;
  background: #f2f2f2;
}

.p-pickup__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.p-pickup__item a:hover .p-pickup__img img {
  transform: scale(1.03);
}

.p-pickup__body {
  margin-top: 1.2rem;
}

.p-pickup__body h3 {
  margin-top: 0.4rem;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .p-pickup__item:first-child .p-pickup__body h3 {
    font-size: var(--fs-h3);
  }
}

/* ── PCヘッダーのドロップダウン（2段組みするグループ）──
   見出し＋配下の項目を1つの li にまとめてあるので、段の境目で分断されない。 */
.header__content__nav .is-dropdown_wrap.is-wide .is-dropdown > li.is-col {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 1.6rem;
}

.header__content__nav .is-dropdown_wrap.is-wide .is-dropdown > li.is-col > .is-heading {
  display: block;
}

/* ── フッターのナビの小見出し ──
   「読む」「見る」「フォローする」「相談する」。
   これを出さないと、Instagram と YouTube が2つずつ並んで区別できない。 */
.o-footer_nav li.is-heading {
  margin-top: 1.6rem;
  margin-bottom: 0.4rem;
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
}

.o-footer_nav li.is-heading:first-child {
  margin-top: 0;
}

/* フッターの狭い列で「売り出し中の物件一／覧」のように語中で折れていた。
   文節単位の折り返しにする（非対応ブラウザは従来どおり）。 */
.o-footer_nav a,
.footer__related__col a,
.footer__policy a {
  word-break: auto-phrase;
}

/* 実績一覧のサムネイル（type=proof）。
   写真グリッドと実績表で同じ12棟を二度出していたのを1つにまとめた。 */
.p-proof__name {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.p-proof__thumb {
  flex: 0 0 6.4rem;
  overflow: hidden;
  border-radius: 0.3rem;
  aspect-ratio: 4 / 3;
  background: #f2f2f2;
}

.p-proof__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.p-proof__name:hover .p-proof__thumb img {
  transform: scale(1.06);
}

.p-proof__label {
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 0.05em;
  text-decoration-color: #ccc;
}

.p-proof__name:hover .p-proof__label {
  text-decoration-color: #000;
}

/* ============================================================
   TOP 2026-08 改訂（外部ワイヤー akiyato_preview.html v11 反映）
   ------------------------------------------------------------
   このファイルの末尾に置いているのは、既存ルールを後から上書きするため。
   ここより上のブロックは触らないこと。
   ============================================================ */

/* KV直下のCTA */
.p-hero__btns {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  justify-content: center;
  margin-top: 3.2rem;
}

@media (min-width: 768px) {
  .p-hero__btns {
    flex-direction: row;
    gap: 1.6rem;
  }
}

/* 角丸の塗りボタン。LINEボタンと横に並べても高さが揃うように寸法を合わせてある */
.o-flat_btn {
  background-color: var(--rk-ink-strong);
  border-radius: 999px;
  color: var(--rk-white);
  display: inline-block;
  font-size: var(--fs-md);
  font-weight: 700;
  padding: 1.6rem 4rem;
  transition: opacity 0.3s ease;
}

.o-flat_btn:hover {
  opacity: 0.78;
}

.p-hero__btns .p-line_cta__btn {
  margin-top: 0;
}

@media (max-width: 767px) {
  .p-hero__btns .o-flat_btn,
  .p-hero__btns .p-line_cta__btn {
    display: block;
    text-align: center;
    width: 100%;
  }
}

/* ------------------------------------------------------------
   4サービス：写真を背景に敷いて文字を重ねる版
   ------------------------------------------------------------ */
.p-brands__list--cover {
  gap: 1.6rem;
}

@media (min-width: 768px) {
  .p-brands__list--cover {
    gap: 2rem;
  }
}

@media (min-width: 1180px) {
  .p-brands__list--cover {
    gap: 2rem;
  }
}

.p-brands__list--cover .p-brands__item > a {
  color: var(--rk-white);
  display: block;
  min-height: 32rem;
  overflow: hidden;
  position: relative;
}

@media (min-width: 768px) {
  .p-brands__list--cover .p-brands__item > a {
    min-height: 36rem;
  }
}

.p-brands__list--cover .is-img {
  aspect-ratio: auto;
  inset: 0;
  position: absolute;
}

.p-brands__list--cover .is-img img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* 写真の上に白文字を置くので、黒のグラデをかけて可読性を確保する。
   上（サービス名・説明）と下（詳しく見る）の両方に文字が乗るので、
   下だけでなく上も濃くする。明るい写真だと上の文字が消えていた。
   濃度は下層ページの .p-hero::before と同じ考え方に揃えてある。 */
.p-brands__list--cover .p-brands__item > a::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.34) 42%, rgba(0, 0, 0, 0.78) 100%);
  content: "";
  inset: 0;
  position: absolute;
}

.p-brands__list--cover .is-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 32rem;
  padding: 2rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .p-brands__list--cover .is-body {
    min-height: 36rem;
  }
}

.p-brands__list--cover .is-name {
  margin-top: 0;
}

.p-brands__list--cover .is-name b,
.p-brands__list--cover .is-name span,
.p-brands__list--cover .is-lead,
.p-brands__list--cover .is-more {
  color: var(--rk-white);
  text-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.7);
}

.p-brands__list--cover .is-lead {
  flex: 1 1 auto;
  margin-top: 1rem;
}

.p-brands__list--cover .is-more {
  font-weight: 700;
  margin-top: auto;
  padding-top: 1.6rem;
}

.p-brands__list--cover .p-brands__item > a:hover .is-img img {
  transform: scale(1.05);
}

/* ------------------------------------------------------------
   4工程：写真つき + 矢印を見えるように + 総括の1行
   ------------------------------------------------------------ */
.p-pipeline__step {
  display: flex;
  flex-direction: column;
}

/* 写真はカードの一番下に固定する。本文の長さが工程ごとに違うので、
   margin-top:auto を入れないと4枚の写真の高さが揃わない。 */
.p-pipeline__img {
  margin-top: auto;
  overflow: hidden;
  padding-top: 1.6rem;
}

.p-pipeline__img img {
  background-color: var(--rk-soft);
  aspect-ratio: 16 / 10;
  display: block;
  object-fit: cover;
  width: 100%;
}

/* 矢印はもともと --rk-line（#ccc）で、背景の上ではほぼ見えていなかった。
   工程が「つながっている」ことがこの矢印だけの情報なので、濃く・大きくする。 */
.p-pipeline__step:not(:last-child)::after {
  color: var(--rk-ink-strong);
  font-size: 2rem;
  line-height: 1;
  bottom: -2.2rem;
}

@media (min-width: 768px) {
  .p-pipeline__step:not(:last-child)::after {
    font-size: 2.2rem;
    right: -2rem;
  }
}

@media (max-width: 767px) {
  .p-pipeline {
    gap: 3.6rem;
  }
}

.p-pipeline__all {
  align-items: center;
  display: flex;
  font-size: var(--fs-body);
  gap: 1.2rem;
  justify-content: center;
  line-height: 1.9;
  margin-top: 4rem;
  text-align: left;
}

.p-pipeline__all b {
  font-weight: 700;
}

.p-pipeline__all__ico {
  align-items: center;
  background-color: var(--rk-ink-strong);
  border-radius: 50%;
  color: var(--rk-white);
  display: inline-flex;
  flex: none;
  height: 2.4rem;
  justify-content: center;
  width: 2.4rem;
}

.p-pipeline__all__ico svg {
  display: block;
  height: 1.3rem;
  width: 1.3rem;
}

/* ------------------------------------------------------------
   暗いセクション（宿の物語）
   ------------------------------------------------------------ */
.p-sec--dark {
  background-color: #1a1a1a;
  color: var(--rk-white);
  /* 黒地は面として見せたいので、上下の余白を通常セクションの3倍取る（2026-08-28 指示）。
     見出しの上と、締めのボタンの下、どちらも同じだけ空ける。 */
  padding-bottom: calc(var(--sec-y) * 3);
  padding-top: calc(var(--sec-y) * 3);
}

.p-sec--dark .p-index__title h2,
.p-sec--dark .p-index__title span {
  color: var(--rk-white);
}

.p-sec--dark .p-index__title p {
  color: rgba(255, 255, 255, 0.72);
}

.p-sec--dark .o-circle_btn__text {
  color: var(--rk-white);
}

/* ------------------------------------------------------------
   宿カード：写真の上に宿名とキャッチを重ねる版
   ------------------------------------------------------------ */
.p-stays--story {
  gap: 1.6rem;
}

@media (min-width: 768px) {
  .p-stays--story {
    gap: 2rem;
  }
}

.p-stays--story .p-stays__item {
  color: var(--rk-white);
  display: block;
  min-height: 30rem;
  overflow: hidden;
  position: relative;
}

@media (min-width: 768px) {
  .p-stays--story .p-stays__item {
    min-height: 34rem;
  }
}

.p-stays--story .is-img {
  aspect-ratio: auto;
  inset: 0;
  position: absolute;
}

.p-stays--story .is-img img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.p-stays--story .p-stays__item:hover .is-img img {
  transform: scale(1.05);
}

.p-stays--story .p-stays__item::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.42) 45%, rgba(0, 0, 0, 0.8) 100%);
  content: "";
  inset: 0;
  position: absolute;
}

.p-stays--story .is-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  min-height: 30rem;
  padding: 2rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .p-stays--story .is-body {
    min-height: 34rem;
  }
}

.p-stays--story .is-body b {
  color: var(--rk-white);
  font-size: var(--fs-h4);
  margin-top: 0;
  text-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.75);
}

.p-stays--story .is-catch {
  color: rgba(255, 255, 255, 0.92);
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.8;
  margin-top: 0.8rem;
  text-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.75);
}

/* .p-stays__item span の color:var(--rk-mut) を上書きする。
   暗い写真の上でグレーになっていて読めなかった。 */
.p-stays--story .is-more {
  color: var(--rk-white);
  display: block;
  font-size: var(--fs-caption);
  font-weight: 700;
  margin-top: 1.4rem;
  text-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.75);
}

/* ------------------------------------------------------------
   LINE CTA セクション：グレーではなく LINE 寄りの淡い緑地にする
   ------------------------------------------------------------ */
.p-line_cta {
  background-color: #f2fbf5;
  border-block: 0.1rem solid #cfead9;
}

/* ------------------------------------------------------------
   LINE CTA の文字組みを、他のセクション見出しと同じ体系に揃える
   ------------------------------------------------------------
   ここだけ h2 が 400/2.56rem、リードが 1.4rem で、
   ページ内で1つだけ弱い見出しになっていた。
   .p-index__title h2（SP 2.6rem / PC 4.7rem / bold）に合わせる。
   ------------------------------------------------------------ */
.p-line_cta h2 {
  font-size: var(--fs-sec);
  font-weight: bold;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .p-line_cta h2 {
    font-size: 4.7rem;
  }
}

.p-line_cta p {
  color: var(--rk-ink);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.9;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .p-line_cta p {
    font-size: 1.6rem;
    line-height: 2;
  }
}

/* ------------------------------------------------------------
   長文中の強調（<b>）
   ------------------------------------------------------------
   長い本文はどこが要点か分からないと読み飛ばされる。
   段落あたり1〜2か所だけ太字にしてメリハリを付ける運用にしている。
   本文がグレー（--rk-mut）の枠でも強調が沈まないよう、色も一段濃くする。
   ------------------------------------------------------------ */
/* カード見出しの b（.p-strengths__item b など）は display:block なので、
   同じカードの本文に入れた強調の <b> まで改行されてしまう。
   段落の中の b は必ずインラインに戻す。
   :is(...) で (0,1,2) にして、(0,1,1) の見出し側ルールに勝たせている。 */
:is(.p-sec, .p-page, .p-index, .o-member__text, .p-faq__a) p b {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}

.p-prose b,
.p-doors__item p b,
.p-strengths__item p b,
.p-page_head__lead b,
.p-index__title p b,
.p-compare__val b,
.o-member__text b,
.p-faq__a b {
  color: var(--rk-ink-strong);
  font-weight: 700;
}

/* ------------------------------------------------------------
   一覧のすぐ下に置く丸ボタンの余白
   ------------------------------------------------------------
   .is-btn には上マージンが無く、カードの直下にくっついていた
   （TOPの「4つのサービスを見る」がカードに接していた）。
   セクション内の区切りとして、はっきり間を空ける。
   ------------------------------------------------------------ */
.p-sec .is-btn,
.p-index__business .is-btn {
  margin-top: 4rem;
}

@media (min-width: 768px) {
  .p-sec .is-btn,
  .p-index__business .is-btn {
    margin-top: 6.4rem;
  }
}

/* ------------------------------------------------------------
   モーダル（役員・メンバー）の位置ずれ
   ------------------------------------------------------------
   .o-modal は position:fixed だが left/right の指定が無く、
   静的位置＝親の左右パディング（--gutter 2rem）ぶん右にずれていた。
   本体（.o-modal__content）は left:0/right:0 なので気づきにくいが、
   オーバーレイ（inset:0 の絶対配置）が20pxずれて、
   画面左端の20pxだけ覆われずに背後が見えていた。
   ------------------------------------------------------------ */
.o-modal {
  left: 0;
  right: 0;
}

/* ------------------------------------------------------------
   TOP：ファーストビュー直下の入口カード（2026-08）
   ------------------------------------------------------------
   もとは「事業内容を見る／LINEで相談する」の2ボタン。
   会社側の都合の並びで、来た人が自分の居場所を選べなかったので、
   4属性を名指ししたカードに置き換えた。

   写真＋見出し＋2〜3行＋CTA の「枠」。写真は後から差し込む前提で、
   未設定のあいだは .p-ph（何を撮るか書いてあるプレースホルダ）が入る。

   下の「4サービス」が写真の上に文字を重ねるカードなので、
   ここは **写真と文字を分ける**（同じ見た目が連続しないようにする）。
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   TOP：KV直下の入口カード（2枚）
   ------------------------------------------------------------
   写真を全面に敷いて白文字を重ねる作りだったが、2026-08-22 のワイヤーに合わせて
   ベージュの面＋アイソメ線画に変更。線画は装飾なので、文字に重なる側は薄く敷く。
   ------------------------------------------------------------ */
.p-entrance {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 3.2rem 0 0;
  padding: 0;
}

@media (min-width: 768px) {
  .p-entrance {
    gap: 2.4rem;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 4.8rem;
  }
}

.p-entrance__item > a {
  background: #eae7e0;
  border-radius: 0.6rem;
  color: var(--rk-ink-strong);
  display: block;
  overflow: hidden;
  position: relative;
  transition: background-color 0.4s ease;
}

.p-entrance__item > a:hover {
  background: #e3dfd6;
}

/* 線画。カードの右下に置き、下と右は枠で切る（ワイヤーどおり少しはみ出させる）。 */
.p-entrance__ill {
  bottom: -1.6rem;
  display: block;
  line-height: 0;
  pointer-events: none;
  position: absolute;
  right: -1.2rem;
  width: 20rem;
}

@media (min-width: 768px) {
  .p-entrance__ill {
    bottom: -2rem;
    right: -1.6rem;
    width: 24rem;
  }
}

.p-entrance__ill img {
  height: auto;
  /* 元素材が小さく、線が太く出る。薄くして図面らしい見え方にする。 */
  opacity: 0.28;
  width: 100%;
}

.p-entrance__body {
  display: flex;
  flex-direction: column;
  min-height: 22rem;
  padding: 3.2rem 2.4rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .p-entrance__body {
    min-height: 26rem;
    padding: 4.4rem 4rem;
  }
}

.p-entrance__body > b {
  display: block;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.5;
}

.p-entrance__body > p {
  font-size: var(--fs-sm);
  line-height: 1.9;
  margin-top: 1.6rem;
  /* 線画に文字が重ならない幅で止める */
  max-width: 34rem;
}

/* CTAはカードの下端に揃える（本文の長さが違っても行が並ぶ） */
.p-entrance__cta {
  align-items: center;
  display: flex;
  font-size: var(--fs-sm);
  font-weight: 700;
  gap: 1.2rem;
  margin-top: auto;
  padding-top: 2.8rem;
}

/* 黒い角丸に白い▶。ワイヤーの再現。CSSの三角形なので画像は要らない。 */
.p-entrance__cta_ico {
  align-items: center;
  background: var(--rk-ink-strong);
  border-radius: 0.4rem;
  display: flex;
  flex: 0 0 auto;
  height: 3.2rem;
  justify-content: center;
  transition: transform 0.3s ease;
  width: 3.8rem;
}

.p-entrance__cta_ico::before {
  border-bottom: 0.5rem solid transparent;
  border-left: 0.8rem solid var(--rk-white);
  border-top: 0.5rem solid transparent;
  content: '';
  display: block;
}

.p-entrance__item > a:hover .p-entrance__cta_ico {
  transform: translateX(0.3rem);
}

.p-entrance__item > a:hover .p-entrance__cta_label {
  text-decoration: underline;
}

/* ------------------------------------------------------------
   TOP：採用バナー（2026-08）
   ------------------------------------------------------------
   問い合わせ導線（LINE / フッターのContact）の手前に置く1本。
   写真を左（SPは上）、テキストを右。他のセクションより濃い地色にして
   「別の話が始まった」ことを面で分からせる。
   ------------------------------------------------------------ */
.p-recruit_cta {
  padding: 0 var(--gutter);
}

.p-recruit_cta__inner {
  background: var(--rk-ink-strong);
  color: var(--rk-white);
  display: block;
  margin: 0 auto;
  max-width: 120rem;
  overflow: hidden;
}

@media (min-width: 768px) {
  .p-recruit_cta__inner {
    align-items: stretch;
    display: flex;
  }
}

.p-recruit_cta__img {
  overflow: hidden;
}

@media (min-width: 768px) {
  .p-recruit_cta__img {
    flex: 0 0 46%;
  }
}

.p-recruit_cta__img img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  width: 100%;
}

.p-recruit_cta__inner:hover .p-recruit_cta__img img {
  transform: scale(1.04);
}

.p-recruit_cta__img .p-ph {
  border: 0;
  height: 100%;
}

.p-recruit_cta__body {
  padding: 3.2rem 2.4rem 3.6rem;
}

@media (min-width: 768px) {
  .p-recruit_cta__body {
    align-self: center;
    padding: 4.8rem 5.6rem;
  }
}

.p-recruit_cta__en {
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
}

.p-recruit_cta__body > b {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
  margin-top: 1.2rem;
}

.p-recruit_cta__lead {
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-sm);
  line-height: 1.95;
  margin-top: 1.6rem;
}

/* 長文中の強調は白地側と色が違うので個別に指定する */
.p-recruit_cta__lead b {
  color: var(--rk-white);
  font-weight: 700;
}

.p-recruit_cta__btn {
  border: 0.1rem solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-top: 2.4rem;
  padding: 1.2rem 2.8rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.p-recruit_cta__inner:hover .p-recruit_cta__btn {
  background: var(--rk-white);
  color: var(--rk-ink-strong);
}

/* ------------------------------------------------------------
   TOP：連携している企業・行政のロゴ（2026-08）
   ------------------------------------------------------------
   採用バナーの直下。いまは坂出市のみなので、
   1件でも寂しく見えないよう左寄せの帯ではなく中央に1枠で置く。
   件数が増えたら自動で折り返す。
   ------------------------------------------------------------ */
.p-sec--tight {
  padding-block: 4.8rem;
}

@media (min-width: 768px) {
  .p-sec--tight {
    padding-block: 6.4rem;
  }
}

.p-logos__head {
  color: var(--rk-mut);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-align: center;
}

.p-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  justify-content: center;
  margin-top: 2rem;
}

.p-logos__item {
  align-items: center;
  border: 0.1rem solid var(--rk-line-soft);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  justify-content: center;
  min-height: 8rem;
  min-width: 18rem;
  padding: 1.6rem 2.4rem;
}

/* タイルの幅は揃える。中身なりの幅にすると、横長のワードマークと
   円形のエンブレムで箱の大きさが変わり、並びが不揃いに見える。 */
.p-logos__item {
  width: 21rem;
}

.p-logos__item img {
  height: auto;
  max-height: 5.6rem;
  max-width: 16rem;
  object-fit: contain;
  width: auto;
}

/* 円形・正方形のエンブレム。横長のワードマークと同じ高さだと面積が半分以下になり、
   隣に並べたときだけ小さく見えるので、1辺で見せる形のものは少し大きく出す。 */
.p-logos__item img.is-square {
  max-height: 7.2rem;
  max-width: 7.2rem;
}

.p-logos__name {
  color: var(--rk-ink-strong);
  font-size: var(--fs-md);
  font-weight: 700;
}

.p-logos__note {
  color: var(--rk-mut);
  font-size: var(--fs-xs);
}

/* ------------------------------------------------------------
   記事バナー（2026-08）
   ------------------------------------------------------------
   「相談してください」のCTA（.p-cta）とは別。
   読み物へ送り出すための帯。写真 + 見出し + 1行 + 矢印だけ。
   ------------------------------------------------------------ */
.p-banner {
  background: var(--rk-white);
  border: 0.1rem solid var(--rk-line-soft);
  display: block;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.p-banner:hover {
  border-color: var(--rk-ink-strong);
  box-shadow: 0 0.6rem 2.4rem rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
  .p-banner {
    align-items: stretch;
    display: flex;
  }
}

.p-banner__img {
  overflow: hidden;
}

@media (min-width: 768px) {
  .p-banner__img {
    flex: 0 0 42%;
  }
}

.p-banner__img img {
  aspect-ratio: 16 / 9;
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  width: 100%;
}

.p-banner:hover .p-banner__img img {
  transform: scale(1.04);
}

.p-banner__img .p-ph {
  border: 0;
  height: 100%;
}

.p-banner__body {
  padding: 2.8rem 2rem 3.2rem;
}

@media (min-width: 768px) {
  .p-banner__body {
    align-self: center;
    padding: 4rem 4.8rem;
  }
}

.p-banner__en {
  color: var(--rk-mut);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
}

.p-banner__body > b {
  color: var(--rk-ink-strong);
  display: block;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
  margin-top: 0.8rem;
}

.p-banner__body > p {
  color: var(--rk-ink);
  font-size: var(--fs-sm);
  line-height: 1.95;
  margin-top: 1.6rem;
}

.p-banner__btn {
  color: var(--rk-ink-strong);
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-top: 2.4rem;
}

.p-banner:hover .p-banner__btn {
  text-decoration: underline;
}

/* ------------------------------------------------------------
   メンバーのモーダル：経歴のあとに続ける2ブロック（2026-08）
   ------------------------------------------------------------
   経歴だけだと「立派な人」で終わるので、
   「この会社との出会い」と「本人が出てくる記事」を足せるようにした。
   ------------------------------------------------------------ */
.o-member__text .o-member__label {
  border-top: 0.1rem solid var(--rk-line-soft);
  color: var(--rk-mut);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-top: 2.4rem;
  padding-top: 2.4rem;
}

.o-member__text .o-member__label + p {
  margin-top: 0.8rem;
}

.o-member__text .o-member__story {
  margin-top: 2.4rem;
}

.o-member__text .o-member__story a {
  color: var(--rk-ink-strong);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.4rem;
}

/* サンプル原稿の札。差し替え忘れを本番で見逃さないため、目立つ場所に置く。 */
.o-member__text .o-member__sample {
  background: #efede9;
  color: #7a736a;
  display: inline-block;
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  line-height: 1;
  margin-bottom: 1.6rem;
  padding: 0.6rem 1rem;
}

/* ------------------------------------------------------------
   大判スライドショー（/works/ の再生事例）
   ------------------------------------------------------------
   サムネイルを小さく並べる一覧（.p-proof）はページ下部に残し、
   ここでは1軒ずつ大きく見せる。

   ⚠️ JSが動かなかったときは **縦積みのまま全部読める** ようにしてある。
      判定は .no-js（header.php が最初の描画前に外す）で行う。
   ------------------------------------------------------------ */
/* 既定は「重ね合わせ」。JSが使えない環境（.no-js）だけ縦積みに戻す。

   もとは逆で、素のHTMLが縦積み、JSが .is-ready を付けた瞬間に重ね合わせ、
   という作りだった。読めることは読めるが、描画後にレイアウトが変わるので
   /works/ では 46,000px ぶんのリフローが走り CLS 0.23 を出していた。
   no-js は header.php の1行スクリプトが最初の描画より前に外す（2026-08-29）。 */
.p-slideshow__track {
  display: grid;
  gap: 0;
}

.p-slideshow__viewport {
  overflow: hidden;
}

.p-slideshow__slide {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.p-slideshow__slide.is-current {
  opacity: 1;
  pointer-events: auto;
}

/* JSが動かないときは全部縦に並べて読ませる */
.no-js .p-slideshow__track {
  gap: 2.4rem;
}

.no-js .p-slideshow__slide {
  grid-area: auto;
  opacity: 1;
  pointer-events: auto;
}

.p-slideshow__slide > a {
  display: block;
  position: relative;
}

.p-slideshow__img {
  background: var(--rk-soft);
  overflow: hidden;
}

.p-slideshow__img img {
  aspect-ratio: 4 / 3;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

@media (min-width: 768px) {
  .p-slideshow__img img {
    /* PCは横長で大きく。1枚で画面のほとんどを占めるくらいにする */
    aspect-ratio: 16 / 9;
  }
}

/* SPは写真の下、PCは写真の上に重ねる。
   SPで重ねると、文字が小さい画面いっぱいの写真を潰してしまう。 */
.p-slideshow__caption {
  padding: 2rem 0 0;
}

@media (min-width: 768px) {
  .p-slideshow__caption {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 100%);
    bottom: 0;
    color: var(--rk-white);
    left: 0;
    padding: 12rem 4.8rem 4rem;
    position: absolute;
    right: 0;
  }
}

.p-slideshow__no {
  color: var(--rk-mut);
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
}

.p-slideshow__no i {
  font-style: normal;
  margin: 0 0.4rem;
  opacity: 0.6;
}

.p-slideshow__caption > b {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.4;
  margin-top: 0.6rem;
}

.p-slideshow__area {
  color: var(--rk-mut);
  display: inline-block;
  font-size: var(--fs-sm);
  margin-top: 0.8rem;
}

.p-slideshow__caption > p {
  font-size: var(--fs-sm);
  line-height: 1.8;
  margin-top: 1.2rem;
}

.p-slideshow__more {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-top: 1.6rem;
}

@media (min-width: 768px) {
  .p-slideshow__no,
  .p-slideshow__area {
    color: rgba(255, 255, 255, 0.78);
  }

  .p-slideshow__caption > b {
    font-size: var(--fs-h2, var(--fs-h3));
  }

  .p-slideshow__slide > a:hover .p-slideshow__more {
    text-decoration: underline;
  }
}

/* 操作系。JSが動くまでは押せないので見せないが、**場所は先に取っておく**。
   display:none から出すと、その瞬間に下のセクションが押し下げられて
   レイアウトがずれる。visibility なら高さが変わらない。 */
.p-slideshow__ui {
  align-items: center;
  display: flex;
  gap: 1.6rem;
  justify-content: center;
  margin-top: 2.4rem;
  visibility: hidden;
}

.p-slideshow.is-ready .p-slideshow__ui {
  visibility: visible;
}

/* JSが無い環境では操作系そのものが意味を持たないので消す */
.no-js .p-slideshow__ui {
  display: none;
}

.p-slideshow__arw {
  align-items: center;
  background: none;
  border: 0.1rem solid var(--rk-line);
  border-radius: 50%;
  color: var(--rk-ink-strong);
  cursor: pointer;
  display: flex;
  height: 4.4rem;
  justify-content: center;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  width: 4.4rem;
}

.p-slideshow__arw:hover {
  background: var(--rk-ink-strong);
  border-color: var(--rk-ink-strong);
  color: var(--rk-white);
}

.p-slideshow__arw svg {
  height: 1.8rem;
  width: 1.8rem;
}

.p-slideshow__dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  max-width: 32rem;
}

.p-slideshow__dots button {
  background: var(--rk-line);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  height: 0.8rem;
  padding: 0;
  transition: background-color 0.3s ease, transform 0.3s ease;
  width: 0.8rem;
}

.p-slideshow__dots button.is-current {
  background: var(--rk-ink-strong);
  transform: scale(1.4);
}

/* PCでの幅。
   もとは内枠（114.6rem）より外へ広げて 136rem まで伸ばしていたが、
   写真だけが横に張り出して大きすぎたので、内枠の内側に収めた（2026-08-29 指示）。
   96rem ＝ 16:9 で高さ 54rem。1枚が一度に視界へ入り、
   下の本文と軸も揃う。はみ出させないので中央寄せだけでよい。 */
@media (min-width: 768px) {
  .p-slideshow {
    margin-inline: auto;
    max-width: 96rem;
    width: auto;
  }

  .p-slideshow__ui {
    margin-inline: auto;
    max-width: 96rem;
  }
}

/* スライドショー直下のボタンは中央に。
   矢印もドットも中央に置いているので、ここだけ左寄せだと軸がずれて見える。 */
.p-slideshow + .p-sec__btns,
.p-slideshow + .is-btn {
  display: flex;
  justify-content: center;
}

/* ------------------------------------------------------------
   写真グリッド（/works/）
   ------------------------------------------------------------
   宿ごとの数値表の代わり。写真の量そのものを実績として見せる。
   隙間を詰めて、1枚ずつではなく「面」で見えるようにしている。
   ------------------------------------------------------------ */
.p-photogrid {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(2, 1fr);
}

/* PCは3カラム。4〜5カラムだと1枚が小さくなりすぎて、
   何が写っているか分からないまま「模様」になってしまう。 */
@media (min-width: 768px) {
  .p-photogrid {
    gap: 0.8rem;
    grid-template-columns: repeat(3, 1fr);
  }
}

.p-photogrid__box {
  background: var(--rk-soft);
  display: block;
  overflow: hidden;
  position: relative;
}

.p-photogrid__box img {
  aspect-ratio: 1 / 1;
  display: block;
  height: auto;
  object-fit: cover;
  transition: transform 0.6s ease;
  width: 100%;
}

a.p-photogrid__box:hover img {
  transform: scale(1.06);
}

/* 宿名は常時うっすら出す。ホバーでしか出ないと、
   タッチ端末では「どれが宿でどれが現場か」が分からなくなる。 */
.p-photogrid__cap {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  bottom: 0;
  color: var(--rk-white);
  left: 0;
  padding: 3.2rem 1.2rem 1.2rem;
  position: absolute;
  right: 0;
}

.p-photogrid__cap b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.4;
}

.p-photogrid__cap i {
  color: rgba(255, 255, 255, 0.8);
  display: block;
  font-size: var(--fs-xs);
  font-style: normal;
  margin-top: 0.2rem;
}

/* ------------------------------------------------------------
   行き先が1つだけのカードは、カード全体をリンクにする
   ------------------------------------------------------------
   中に「見る」という小さなテキストリンクを置いていたが、
   カードは押せそうに見えるのに実際は文字の上でしか反応せず、
   クリック領域が見た目と一致していなかった。
   ------------------------------------------------------------ */
.p-doors__item--link {
  color: inherit;
  cursor: pointer;
}

.p-doors__item--link b {
  color: var(--rk-ink-strong);
}

/* 矢印は「見る」の代わり。カード下端に固定して、本文の長さが違っても行が揃う */
.p-doors__arw {
  color: var(--rk-ink-strong);
  font-size: var(--fs-md);
  font-weight: 700;
  margin-top: auto;
  transition: transform 0.3s ease;
}

.p-doors__item--link:hover .p-doors__arw {
  transform: translateX(0.4rem);
}

/* ------------------------------------------------------------
   サービスカードの「事業としての1行」（.is-biz / .p-brandmap__biz）
   キャッチ（lead）とは層が違う情報なので、見た目でも分ける。
   小さく・字間を広げて、見出しの添え字として読ませる。
   ------------------------------------------------------------ */
.p-brands__list--cover .is-biz {
  color: var(--rk-white);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-top: 0.8rem;
  opacity: 0.92;
  text-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.7);
}

/* lead は is-biz の下に来るので、二重に間隔が空かないよう詰める */
.p-brands__list--cover .is-biz + .is-lead {
  margin-top: 0.8rem;
}

.p-brandmap__biz {
  color: var(--rk-ink-strong);
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-top: 1rem;
}

.p-brandmap__biz + .p-brandmap__lead {
  margin-top: 0.8rem;
}

/* ------------------------------------------------------------
   お問い合わせページのボタン2つ（LINE / フォーム）
   このページに来た人は「送る」段階なので、選択肢を2つだけ大きく置く。
   ------------------------------------------------------------ */
.p-contact_actions {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 768px) {
  .p-contact_actions {
    flex-direction: row;
    gap: 3.2rem;
    justify-content: center;
  }
}

/* ------------------------------------------------------------
   お問い合わせフォーム（inc/contact-form.php）
   MW WP Form をやめてテーマ内蔵にしたので、見た目もこちらで持つ。
   ------------------------------------------------------------ */
.p-form__form {
  margin: 0 auto;
  max-width: 68rem;
}

.p-form__row {
  margin-top: 2.4rem;
}

.p-form__row label {
  align-items: center;
  display: flex;
  font-size: var(--fs-sm);
  font-weight: 700;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

.p-form__req {
  background-color: var(--rk-ink-strong);
  color: var(--rk-white);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem;
}

.p-form__row input,
.p-form__row select,
.p-form__row textarea {
  background-color: var(--rk-white);
  border: 0.1rem solid var(--rk-line);
  font-family: inherit;
  font-size: var(--fs-sm);
  padding: 1.4rem;
  width: 100%;
}

.p-form__row textarea {
  line-height: 1.8;
  resize: vertical;
}

.p-form__row input:focus,
.p-form__row select:focus,
.p-form__row textarea:focus {
  border-color: var(--rk-ink-strong);
  outline: none;
}

/* ハニーポット。見えないが display:none にはしない
   （bot が「非表示なら埋めない」と判断するのを避けるため画面外へ逃がす）。 */
.p-form__hp {
  height: 0;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  width: 0;
}

.p-form__privacy {
  font-size: var(--fs-xs);
  margin-top: 2.4rem;
}

.p-form__privacy a {
  text-decoration: underline;
}

.p-form__submit {
  background-color: var(--rk-ink-strong);
  border: 0.1rem solid var(--rk-ink-strong);
  color: var(--rk-white);
  cursor: pointer;
  display: block;
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 700;
  margin: 3.2rem auto 0;
  min-width: 28rem;
  padding: 1.8rem 3rem;
  /* min-width で箱を広げているので、指定しないと文字が左端に寄る。
     <button> の中央寄せはブラウザ既定に見えるが、既存CSSのリセットで
     text-align: start に戻されている。 */
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.p-form__submit:hover {
  background-color: transparent;
  color: var(--rk-ink-strong);
}

.p-form__error {
  border: 0.1rem solid #c0392b;
  color: #c0392b;
  font-size: var(--fs-sm);
  margin: 0 auto;
  max-width: 68rem;
  padding: 1.6rem 2rem;
}

.p-form__done {
  border: 0.1rem solid var(--rk-line);
  margin: 0 auto;
  max-width: 68rem;
  padding: 4rem 3rem;
  text-align: center;
}

.p-form__done b {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 700;
}

.p-form__done p {
  font-size: var(--fs-sm);
  margin-top: 1.6rem;
}

/* お問い合わせページの電話番号。LINEボタンの隣に置く。 */
.p-contact_tel {
  display: block;
  text-align: center;
}

.p-contact_tel__num {
  border-bottom: 0.1rem solid var(--rk-ink);
  display: inline-block;
  font-family: var(--font-futura, inherit);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  padding-bottom: 0.2rem;
}

.p-contact_tel__note {
  color: var(--rk-mut);
  display: block;
  font-size: var(--fs-xs);
  margin-top: 0.8rem;
}

/* SNSの入口を lit.link 1本にしたので、アイコン列だったところをテキストリンクにする */
.footer__sns_link {
  color: var(--rk-white);
  display: inline-block;
  font-size: var(--fs-sm);
  margin-top: 0.8rem;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

.footer__sns_link:hover {
  opacity: 1;
}

.header__list__sns_link {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-top: 0.8rem;
}

/* ------------------------------------------------------------
   4サービスの切り替えタブ（/service/ と配下4ページ）
   ------------------------------------------------------------
   ページ上部に貼り付いて、隣のサービスへ1クリックで移れるようにする。
   ヘッダーは position:fixed（SP 6rem / PC 7.2rem）なので、その下に止める。
   ------------------------------------------------------------ */
.p-service_tabs {
  background: var(--rk-white);
  border-bottom: 0.1rem solid var(--rk-line);
  position: sticky;
  top: 6rem;
  z-index: 100;
}

@media (min-width: 768px) {
  .p-service_tabs {
    top: 7.2rem;
  }
}

.p-service_tabs__inner {
  display: flex;
  gap: 0;
  margin: 0 auto;
  max-width: 114.6rem;
  /* SPは横スクロール。5つを詰めると1つあたりが狭すぎて押せない。 */
  overflow-x: auto;
  padding: 0 var(--gutter);
  scrollbar-width: none;
}

.p-service_tabs__inner::-webkit-scrollbar {
  display: none;
}

.p-service_tabs__item {
  align-items: baseline;
  border-bottom: 0.2rem solid transparent;
  color: var(--rk-mut);
  display: flex;
  flex: 0 0 auto;
  gap: 0.6rem;
  justify-content: center;
  padding: 1.6rem 1.6rem;
  transition: color 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .p-service_tabs__item {
    flex: 1 1 0;
    padding: 1.8rem 1rem;
  }
}

.p-service_tabs__item b {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.p-service_tabs__item span {
  font-size: var(--fs-xs);
}

.p-service_tabs__item:hover {
  color: var(--rk-ink-strong);
}

/* いま開いているページ。色だけだと弱いので下線でも示す。 */
.p-service_tabs__item.is-current {
  border-bottom-color: var(--rk-ink-strong);
  color: var(--rk-ink-strong);
}

/* ------------------------------------------------------------
   ブランドロゴ（AKIYAto VILLA / HOME / BASE）
   2026-08-22 支給。DIY だけ未支給なので、その1枚は文字（.is-text）で出る。

   webp は「各ロゴのインクで切って、4枚を同じ倍率で縮小」してある
   （台紙のままだと単語の長さで左端がずれて、左揃えの並びがガタつく）。
   高さが揃っていて幅は単語なりなので、**必ず height で指定する**こと。
   ------------------------------------------------------------ */
.o-brand_logo {
  display: block;
  line-height: 0;
}

.o-brand_logo img {
  display: block;
  height: 100%;
  width: auto;
}

/* ── 4サービスの切り替えタブ ── */
/* ロゴは「AKIYAto ○○」の横組み（およそ 7.5:1）。横に「泊まる」を並べると
   1枚が細長くなりすぎて、SPでは1タブが画面幅を食ってしまう。
   ロゴを上、和文を下の2段にして、幅ではなく高さを使う。 */
.p-service_tabs__item {
  align-items: center;
  flex-direction: column;
  gap: 0.5rem;
  /* 2段（ロゴ＋和文）のタブと1段（「4つの違い」）が混ざる。
     center にすると1段のタブだけ上下の真ん中に落ちて、ロゴの行から外れる。 */
  justify-content: flex-start;
}

.p-service_tabs__item .o-brand_logo {
  height: 1.6rem;
}

@media (min-width: 768px) {
  .p-service_tabs__item .o-brand_logo {
    height: 1.9rem;
  }
}

/* ロゴが無い区分（DIY）と「4つの違い」は、ロゴの列と高さを揃える。
   文字だけだと1段ぶん低くなって、下線の位置がタブごとにずれる。 */
.p-service_tabs__item .o-brand_logo.is-text {
  font-size: 1.3rem;
  height: 1.6rem;
}

@media (min-width: 768px) {
  .p-service_tabs__item .o-brand_logo.is-text {
    font-size: 1.5rem;
    height: 1.9rem;
  }
}

.p-service_tabs__item span {
  line-height: 1;
}

/* 現在地は下線で示している。画像だとリンク色では差が出ないので、
   選択されていないタブのロゴを少し落として差をつける。 */
.p-service_tabs__item:not(.is-current) .o-brand_logo img {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.p-service_tabs__item:hover .o-brand_logo img {
  opacity: 1;
}

/* ── 4つの使い道（/service/ の p-brandmap） ── */
/* ここも横並びだと「住む」がロゴに押されて縦組みに折れる。上下に積む。 */
.p-brandmap__name {
  align-items: flex-start;
  flex-direction: column;
  gap: 0.8rem;
}

.p-brandmap__name .o-brand_logo {
  height: 2.2rem;
}

.p-brandmap__name .o-brand_logo.is-text {
  font-size: 1.9rem;
  height: 2.2rem;
}

/* ── ロゴ未支給ぶんの文字表示（現状 DIY のみ） ──
   ロゴは「AKIYAto」が太く、区分名は細い。文字で置くぶんも同じ強弱にしておくと
   並べたときに浮かない。ロゴが届いたらこのブロックごと不要になる。 */
.o-brand_logo.is-text {
  align-items: center;
  display: flex;
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}

.o-brand_logo.is-text i {
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  padding-right: 0.3em;
}

/* 支給待ちの札。写真の .p-ph__tag と同じ扱い（公開前に消えるべきもの）。 */
.o-brand_logo__wait {
  background: rgba(0, 0, 0, 0.06);
  color: #7d766c;
  font-size: var(--fs-2xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1;
  margin-left: 0.8rem;
  padding: 0.4rem 0.6rem;
}

/* ── TOPの4サービスカード（写真の上） ──
   区分名を白抜きロゴに置き換えた。ロゴは横長のロックアップなので、
   4カラムだと和文と1行に収まらない幅になる。上下に積む。 */
.p-brands__list--cover .is-name {
  align-items: flex-start;
  flex-direction: column;
  gap: 0.8rem;
}

.p-brands__list--cover .is-name .o-brand_logo {
  height: 2rem;
}

@media (min-width: 768px) {
  .p-brands__list--cover .is-name .o-brand_logo {
    height: 2.2rem;
  }
}

.p-brands__list--cover .is-name .o-brand_logo img {
  filter: drop-shadow(0 0.1rem 0.6rem rgba(0, 0, 0, 0.6));
}

/* 和文は区分名と同じ大きさで並んでいた。ロゴの下に置くので、
   ロゴを主、和文を従にして大きさで差をつける。 */
.p-brands__list--cover .is-name span {
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
}

/* ── 4サービスのヒーロー ──
   英字ラベル（.p-hero__en）の位置にロゴの白抜きを置く。
   下の H1 が 4.7rem あるので、ロゴはその半分弱に抑えて主役を奪わない。 */
.p-hero__brand {
  height: 1.8rem;
  margin-bottom: 1.6rem;
}

@media (min-width: 768px) {
  .p-hero__brand {
    height: 2.4rem;
    margin-bottom: 2.2rem;
  }
}

/* 白抜きロゴは暗い写真の上に置く。明るい写真でも輪郭が残るよう影を敷く。 */
.p-hero__brand img {
  filter: drop-shadow(0 0.1rem 1.6rem rgba(0, 0, 0, 0.45));
}

/* ロゴ未支給（DIY）の文字表示。ヒーローでは白で出す。 */
.p-hero__brand.is-text {
  color: #fff;
  font-size: 1.5rem;
  text-shadow: 0 0.1rem 1.6rem rgba(0, 0, 0, 0.45);
}

@media (min-width: 768px) {
  .p-hero__brand.is-text {
    font-size: 2rem;
  }
}

.p-hero__brand .o-brand_logo__wait {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  text-shadow: none;
}

/* ── TOPの求人バナー枠（バナー支給待ち） ──
   支給されたら .p-ph を <img> に差し替えるだけで済むよう、枠側に寸法を持たせない。 */
/* ── 採用バナー ──
   写真は支給データそのまま。文字は焼き込まず、ここで載せている
   （支給画像の文字が明朝で、サイトの書体と揃わなかったため 2026-08-29 に作り直し）。
   SPは「写真の下に文字」、PCは「写真の上に、左から白でぼかして文字」。 */
.p-recruit_banner {
  background: var(--rk-white);
  border: 1px solid var(--rk-line-soft);
  display: block;
  overflow: hidden;
  position: relative;
}

.p-recruit_banner__img {
  aspect-ratio: 3 / 2;
  display: block;
  height: auto;
  object-fit: cover;
  object-position: center 55%;
  width: 100%;
}

.p-recruit_banner__body {
  display: block;
  padding: 2.4rem 2rem 2.8rem;
}

.p-recruit_banner__en {
  color: var(--rk-mut);
  display: block;
  font-size: 1.1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.p-recruit_banner__title {
  display: block;
  font-size: 2.6rem;
  letter-spacing: 0.18em;
  margin-top: 0.8rem;
}

.p-recruit_banner__lead {
  color: var(--rk-ink);
  display: block;
  font-size: 1.3rem;
  line-height: 1.9;
  margin-top: 1.2rem;
}

.p-recruit_banner__more {
  align-items: center;
  border: 1px solid var(--rk-line);
  border-radius: 999px;
  display: inline-flex;
  font-size: 1.2rem;
  gap: 1.2rem;
  letter-spacing: 0.08em;
  margin-top: 2rem;
  padding: 1rem 2rem;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.p-recruit_banner__more i {
  font-style: normal;
}

@media (min-width: 768px) {
  .p-recruit_banner__img {
    /* 現行バナーと同じ横長。写真は3:2なので上下が切れる前提で位置を決める */
    aspect-ratio: 3 / 1;
  }

  /* 文字を置く左半分だけ、白でぼかして写真を沈める。
     帯で切るとコラージュに見えるので、グラデーションでつなぐ。 */
  .p-recruit_banner__body {
    align-content: center;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(255, 255, 255, 0.95) 30%,
      rgba(255, 255, 255, 0.82) 42%,
      rgba(255, 255, 255, 0) 62%
    );
    display: grid;
    inset: 0;
    padding: 0 6.4rem;
    position: absolute;
  }

  .p-recruit_banner__title {
    font-size: 4.4rem;
    margin-top: 1.2rem;
  }

  .p-recruit_banner__lead {
    font-size: 1.5rem;
    margin-top: 1.6rem;
  }

  .p-recruit_banner__more {
    justify-self: start;
    padding: 1.2rem 2.4rem;
  }

  .p-recruit_banner:hover .p-recruit_banner__more {
    background: var(--rk-ink-strong);
    border-color: var(--rk-ink-strong);
    color: var(--rk-white);
  }
}

/* ── お知らせの帯とロゴマーキー ──
   2026-08-22 指示。お知らせから下のグレー／白を反転させ、
   お知らせを淡いグレーの帯に、「4つのサービス」を白にした。
   ロゴマーキーは現行サイトと同じく、帯の中に絶対配置で入れて上へ半分せり出させる。
   白とグレーの境目に跨るので、淡いグレーのロゴが宙に浮かずに収まる。 */
.p-index__newsband {
  background: var(--rk-soft);
  position: relative;
}

.p-index__marquee {
  left: 0;
  overflow: hidden;
  position: absolute;
  /* ロゴ（SP 4rem / PC 7.8rem）が帯のすぐ上に接する位置。現行サイトと同じ値。
     半分だけ帯に重ねると、淡いグレーのロゴがグレーの地に沈んで切れて見える。 */
  top: -3.8rem;
  width: 100%;
}

@media (min-width: 768px) {
  .p-index__marquee {
    top: -7.4rem;
  }
}

/* animation は add.css の `.p-index__business .is-slide` にスコープされているので、
   ここで当て直す（.p-index__business を付けると背景と余白まで付いてくる）。 */
.p-index__marquee .is-slide {
  animation: slide-left 30s linear infinite;
  display: flex;
  width: max-content;
}

.p-index__marquee .is-slide img {
  display: block;
  height: 4rem;
  margin: 0 2.5rem;
  width: auto;
}

@media (min-width: 768px) {
  .p-index__marquee .is-slide img {
    height: 7.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-index__marquee .is-slide {
    animation: none;
  }
}

/* お知らせがグレーになったぶん、続く「4つのサービス」は白に戻す
   （add.css で #F2F2F2 が直書きされている）。同じ色が2枚続くと境目が消える。 */
.p-index .p-index__business {
  background: transparent;
}

/* 切り抜かずに出す写真（Before / After の上下2枚組、文字入りバナーなど）。
   既定の 4:3 で cover すると端が欠けるので、比率を固定しない。
   align-self がないとグリッドに引き伸ばされる。 */
.p-media.is-natural_set img {
  align-self: start;
  aspect-ratio: auto;
  object-fit: contain;
}

/* 写真そのものがリンクのとき（書影 → Amazon など）。
   a はブロックにしないと下に余白が出る。 */
.p-media__link {
  display: block;
  line-height: 0;
  transition: opacity 0.3s ease;
}

.p-media__link:hover {
  opacity: 0.82;
}

/* カード内の自治体ロゴ。高さだけ揃えて、形も色も触らない。 */
.p-doors__logo {
  display: block;
  margin-bottom: 1.6rem;
}

.p-doors__logo img {
  display: block;
  height: 4rem;
  object-fit: contain;
  object-position: left center;
  width: auto;
}

@media (min-width: 768px) {
  .p-doors__logo img {
    height: 4.8rem;
  }
}

/* ------------------------------------------------------------
   宿ごとの Before / After スライド（/works/）

   支給データは「上に再生前、下に再生後」を1枚に組んだ縦位置の画像。
   切り抜くと片方が欠けるので 4:5 のまま出し、PCでは幅を絞って
   縦に伸びすぎないようにしている。
   動きは .p-slideshow と同じJS。枚数が多いのでドットは出さない。
   ------------------------------------------------------------ */
.p-ba__group + .p-ba__group {
  margin-top: 4.8rem;
}

.p-ba__head {
  align-items: baseline;
  border-bottom: 1px solid var(--rk-line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  margin-bottom: 2rem;
  padding-bottom: 1.2rem;
}

.p-ba__head > b {
  font-size: 1.8rem;
  letter-spacing: 0.04em;
}

.p-ba__head > span {
  color: var(--rk-mut);
  font-size: 1.3rem;
}

.p-ba__head > a {
  color: var(--rk-mut);
  font-size: 1.3rem;
  margin-left: auto;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.p-ba__head > a:hover {
  color: var(--rk-ink-strong);
}

.p-slideshow--ba {
  margin-inline: auto;
  max-width: 42rem;
}

.p-slideshow--ba .p-slideshow__img img {
  aspect-ratio: 4 / 5;
}

.p-slideshow--ba .p-slideshow__dots {
  display: none;
}

.p-ba__no {
  color: var(--rk-mut);
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  margin-top: 0.8rem;
  text-align: center;
}

.p-ba__no i {
  font-style: normal;
  margin-inline: 0.4em;
  opacity: 0.5;
}

@media (min-width: 768px) {
  .p-ba__group + .p-ba__group {
    margin-top: 7.2rem;
  }

  .p-ba__head > b {
    font-size: 2.2rem;
  }

  .p-slideshow--ba {
    max-width: 50rem;
  }

  /* 大判スライドショーはPCで16:9にするが、Before/After は縦のまま */
  .p-slideshow--ba .p-slideshow__img img {
    aspect-ratio: 4 / 5;
  }
}

/* ── フッターのSNSアイコン列 ──
   現行サイト（re-akiya.co.jp）と同じくロゴの下に置く。
   ただし Instagram / YouTube は会社と宿で別アカウントなので、
   アイコンだけ並べると見分けがつかない。会社／宿のラベルで束ねている。 */
.o-footer_sns {
  margin-top: 2.4rem;
}

.o-footer_sns__row {
  align-items: center;
  display: flex;
  gap: 1.2rem;
}

.o-footer_sns__row + .o-footer_sns__row {
  margin-top: 1.2rem;
}

.o-footer_sns__label {
  color: rgba(255, 255, 255, 0.5);
  flex: none;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  width: 2.4em;
}

.o-footer_sns__row ul {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.o-footer_sns__row a {
  display: block;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

.o-footer_sns__row a:hover {
  opacity: 1;
}

.o-footer_sns__row img {
  display: block;
  height: 2rem;
  width: auto;
}

.o-footer_sns__all {
  color: rgba(255, 255, 255, 0.6);
  display: inline-block;
  font-size: 1.2rem;
  margin-top: 1.6rem;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.o-footer_sns__all:hover {
  color: var(--rk-white);
}

/* ============================================================
   SP（スマホ）の作り直し — 2026-08-31
   ------------------------------------------------------------
   PC を見ながら作っていたので、SP で
   「幅が他のセクションと合っていない」「文字が途中で折り返す」
   「固定ボタンがぶつかる」が残っていた。実機幅 390px で全ページ
   （30ページ）を撮って出た崩れを、ここでまとめて直す。

   横スクロール（body がはみ出す）と、要素どうしの重なりは
   機械検査でゼロを確認済み。ここで直すのは「見た目の揃い」。

   ⚠️ add.css / style.css は触らない方針なので、必要な打ち消しは
      すべてこのファイルの末尾（＝いちばん後勝ち）で行う。
   ============================================================ */

/* ------------------------------------------------------------
   1) .is-inner_content の入れ子で左右の余白が二重になっていた
   ------------------------------------------------------------
   page-company.php が reakiya_render_sections() を
   .is-inner_content で包んでいるため、/company/ の
   「代表メッセージ」「会社概要」だけ本文が 40px 内側にあった
   （他のページはすべて 20px）。入れ子の内側は余白を持たせない。
   PC でも同じ理屈でズレるので、メディアクエリの外に置く。
   ------------------------------------------------------------ */
.is-inner_content .is-inner_content {
  max-width: none;
  padding-inline: 0;
}

/* ------------------------------------------------------------
   2) 一覧カードの見出し・抜粋の行数を揃える
   ------------------------------------------------------------
   /journal/ で、タイトルが2行の記事と5行の記事が隣り合って
   カードの高さがバラバラだった。行数を固定して段を通す。
   ------------------------------------------------------------ */
.p-posts__body h2,
.p-posts__body h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.p-posts__body p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@media (max-width: 767px) {

  /* ----------------------------------------------------------
     3) 固定ボタン（TO TOP / LINE）の足元
     ----------------------------------------------------------
     ・LINE の帯が画面の最下端に貼り付いていて、iPhone の
       ホームインジケータに文字が潜っていた。
     ・TO TOP が帯の 7px 上まで来ていて、ぶつかる寸前だった。
     ・TO TOP は下地が無いので、写真の上に来ると読めなかった。
     ---------------------------------------------------------- */
  .o-line_cta a {
    padding-bottom: calc(1.4rem + env(safe-area-inset-bottom));
  }

  .o-pagetop {
    /* LINE帯(53px) + セーフエリア + 余白 */
    bottom: calc(7.2rem + env(safe-area-inset-bottom)) !important;
    /* 下地。写真や表の上に来ても字が読めるように、ただし細いまま。
       幅を auto にすると白い塊になって本文を隠すので、元の 1.6rem を保つ。 */
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(2px);
    border-radius: 999px;
    box-sizing: content-box;
    padding: 0.8rem 0.5rem;
  }

  /* ----------------------------------------------------------
     4) /company/ のページ内目次
     ----------------------------------------------------------
     add.css が 47% 幅の2列で組んでいるが、ラベルが nowrap なので
     箱からあふれ、下線の長さもバラバラで3つ目だけ孤立していた。
     SPは1行1項目にして、タップ領域も確保する。
     ---------------------------------------------------------- */
  .p-company__read ul {
    display: block;
  }

  .p-company__read ul li,
  .p-company__read ul li:nth-child(2n) {
    margin-bottom: 0;
    margin-left: 0;
    width: 100%;
  }

  .p-company__read ul li .o-circle_btn {
    align-items: center;
    justify-content: space-between;
    min-height: 5.6rem;
    padding-block: 1.2rem;
  }

  /* ----------------------------------------------------------
     5) /info/ の一覧で日付が「2026.05.1 / 9」と割れていた
     ----------------------------------------------------------
     カテゴリの丸バッジが min-width 8rem + margin-right 2rem を
     取っていて、日付に 82px しか残っていなかった。
     バッジを縮めて、日付は絶対に折り返さない。
     ---------------------------------------------------------- */
  .p-info__list__main>ul>li dl dt .is-wrap {
    column-gap: 1.2rem;
    flex-wrap: wrap;
    row-gap: 0.6rem;
  }

  .p-info__list__main>ul>li dl dt .is-wrap>p {
    white-space: nowrap;
  }

  .p-info__list__main>ul>li dl dt .is-category li {
    margin-right: 0;
    min-width: 0;
  }

  /* ----------------------------------------------------------
     6) お問い合わせの送信ボタンが入力欄と幅違い
     ----------------------------------------------------------
     入力欄は 20..370（画面幅いっぱい）なのに、ボタンだけ
     min-width:28rem + auto マージンで 55..335 に寄っていた。
     ---------------------------------------------------------- */
  .p-form__submit {
    min-width: 0;
    width: 100%;
  }

  /* ----------------------------------------------------------
     7) 数字カードで「671,000」が桁の途中で改行していた
     ----------------------------------------------------------
     /service/base/ のクラウドファンディング実績。
     カードの左右padding を詰めて、数字は絶対に割らない。
     ---------------------------------------------------------- */
  .p-stats__item {
    padding-inline: 1rem;
  }

  .p-stats__num {
    flex-wrap: wrap;
  }

  .p-stats__num b {
    white-space: nowrap;
  }

  /* ラベルが「…ゲス／ト」のように最後の1文字だけ落ちていた。
     カード幅 154px に対して 13文字×12px が数pxだけ足りない。 */
  .p-stats__label {
    font-size: 1.1rem;
    line-height: 1.6;
  }

  /* ----------------------------------------------------------
     8) 比較表 / 切り替えタブが画面の端でブツ切りに見える
     ----------------------------------------------------------
     どちらも横スクロールできるのに、余白の内側で切れるので
     「表示しきれていない」ようにしか見えなかった。
     画面の端まで流して、右端をぼかして続きがあることを示す。
     ---------------------------------------------------------- */
  .p-compare {
    /* スクロールバーは出さない。案内文と右端のぼかしで足りている */
    scrollbar-width: none;
    /* 左右の余白を食い破って画面幅いっぱいに */
    margin-inline: calc(var(--gutter) * -1);
    max-width: none;
    width: calc(100% + var(--gutter) * 2);
    /* 右端をぼかす。スクロールで動かない mask なので、
       最後まで送っても薄く残るが、切れて見えるよりは良い */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.4rem), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.4rem), transparent 100%);
    scroll-padding-inline: var(--gutter);
  }

  .p-compare::-webkit-scrollbar {
    display: none;
  }

  /* 画面いっぱいに広げたぶん、左に貼り付く項目名の列だけ
     本文と同じ 20px の位置から始まるようにする（幅は据え置き）。 */
  .p-compare__head,
  .p-compare__row {
    grid-template-columns: 9.3rem minmax(19rem, 1fr) minmax(19rem, 1fr);
    min-width: 47.3rem;
  }

  .p-compare__axis,
  .p-compare__row dt {
    padding-left: var(--gutter);
  }

  /* 表を全幅にしたぶん、注記も端まで伸ばして縦のラインを合わせる */
  .p-compare+.p-note,
  .p-compare__note {
    margin-inline: calc(var(--gutter) * -1);
    width: calc(100% + var(--gutter) * 2);
  }

  .p-service_tabs__inner {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.6rem, #000 calc(100% - 1.6rem), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 1.6rem, #000 calc(100% - 1.6rem), transparent 100%);
    scroll-padding-inline: var(--gutter);
  }

  /* ----------------------------------------------------------
     9) 文字の入った図版が、SPだと縮みすぎて読めない
     ----------------------------------------------------------
     循環図・フロー図・相場マップ・フロアプランは、350px に
     収めると本文が 1〜2px になって図の意味が消える。
     SPだけ実寸を保ったまま横に流す（写真には効かせない）。
     ---------------------------------------------------------- */
  .p-figscroll {
    margin-inline: calc(var(--gutter) * -1);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .p-figscroll::-webkit-scrollbar {
    display: none;
  }

  /* 右端をぼかして「まだ続きがある」ことを見せる（比較表と同じ扱い） */
  .p-figscroll {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.4rem), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.4rem), transparent 100%);
  }

  .p-figscroll>img,
  .p-figscroll>.p-media {
    max-width: none;
    width: 66rem;
  }

  /* 枠の中では図版の高さを固定しない（contain で潰れないように） */
  .p-figscroll .p-media img {
    aspect-ratio: auto;
    height: auto;
    width: 100%;
  }

  .p-figscroll__swipe {
    align-items: center;
    display: flex;
    color: var(--rk-mut);
    display: flex;
    font-size: var(--fs-2xs);
    gap: 0.6rem;
    padding-bottom: 0.8rem;
  }

  .p-figscroll__swipe::after {
    content: "→";
  }

  /* ----------------------------------------------------------
     10) /members/ が1列で 10,000px 超あった
     ----------------------------------------------------------
     顔写真が画面幅いっぱいに出るので、20人並ぶと延々スクロール
     することになる。SPは2列にして、名前だけ1段落とす。
     ---------------------------------------------------------- */
  .o-member__list {
    display: grid;
    gap: 2.8rem 1.6rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .o-member__list>li {
    margin-bottom: 0;
    min-width: 0;
  }

  .o-member__list li dl dt {
    font-size: 1.6rem;
    margin-bottom: 0.8rem;
  }

  .o-member__list li dl dt p {
    min-width: 0;
  }

  /* ローマ字表記が iPhone SE 幅（320px）で2行に割れていた */
  .o-member__list li dl dt span.font_futura {
    font-size: 1.1rem;
    letter-spacing: 0.02em;
  }

  /* CEO のように1人だけのグループは、これまでどおり全幅で見せる。
     半分の幅に落ちると、役職の重みと見た目が合わなくなる。 */
  .o-member__list>li:only-child {
    grid-column: 1 / -1;
  }

  /* ----------------------------------------------------------
     11) 丸ボタンが縦に並ぶと、矢印の位置がバラバラになる
     ----------------------------------------------------------
     PCでは横に並ぶので気にならないが、SPでは1行1つに折り返す。
     矢印がラベルの長さに追随して左右に散り、揃っていないように見えた
     （/faq/ で6つ、/owner/ /service/base/ でも発生）。
     幅いっぱいにして、矢印を右端に固定する。
     ※ .o-circle_btn は他の場所でも使うので、ボタン行の中だけに効かせる。
     ---------------------------------------------------------- */
  .p-sec__btns {
    flex-direction: column;
    gap: 0;
  }

  .p-sec__btns>.o-circle_btn {
    align-items: center;
    border-bottom: 0.1rem solid var(--rk-line-soft);
    display: flex;
    justify-content: space-between;
    min-height: 5.6rem;
    padding-block: 1.2rem;
    width: 100%;
  }

  .p-sec__btns>.o-circle_btn:last-child {
    border-bottom: 0;
  }

  /* ----------------------------------------------------------
     12) Before/After の見出し行が、宿名の長さで崩れる
     ----------------------------------------------------------
     「宿名 + 地名 + この宿を見る →」を1行に詰めているので、
     名前が短い宿は1行、長い宿は2行になって、しかも margin-left:auto の
     せいで2行目のリンクだけ右端に取り残されていた（/works/）。
     SPは「宿名+地名」と「リンク」で必ず2段にして、左を揃える。
     ---------------------------------------------------------- */
  .p-ba__head {
    gap: 0.4rem 1.2rem;
  }

  .p-ba__head>a {
    flex-basis: 100%;
    margin-left: 0;
  }

  /* ----------------------------------------------------------
     13) フッター「AKIYAtoとの関わり方」の2列が段でズレる
     ----------------------------------------------------------
     grid の行が「その行でいちばん高いセル」に揃うので、
     項目数の少ない「宿を持つ」の下に 160px の空白ができていた。
     段組みにして上から詰める。
     ---------------------------------------------------------- */
  .footer__related__grid {
    column-count: 2;
    column-gap: 1.6rem;
    display: block;
  }

  .footer__related__col {
    break-inside: avoid;
    margin-bottom: 2.4rem;
    -webkit-column-break-inside: avoid;
  }

  .footer__related__col:last-child {
    margin-bottom: 0;
  }
}

/* 図版の「横にスワイプ」案内はSPだけ。PCは素の <p> として残ってしまうので消す。
   ※ この打ち消しは上の max-width ブロックより後ろに置くこと（後勝ちで消える）。 */
@media (min-width: 768px) {
  .p-figscroll__swipe {
    display: none;
  }
}


/* ------------------------------------------------------------
   noscript-fade-guard
   JavaScript が無効なブラウザでは .is-show が永久に付かず、
   本文・画像がまるごと読めなくなる。JSが動くときだけ隠す形に反転させる（html.no-js は起動時のインラインスクリプトが外す）。
   ------------------------------------------------------------ */
.js-fade_up {
  opacity: 1;
  transform: none;
}
html:not(.no-js) .js-fade_up:not(.is-show) {
  opacity: 0;
  transform: translateY(0.4rem);
}
html:not(.no-js) .js-fade_up.is-show {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-fade_up,
  html:not(.no-js) .js-fade_up:not(.is-show) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}