/* =========================================================
   マンション管理組合のミカタ｜さくら事務所
   トップページ ワイヤーフレーム v2
   ========================================================= */


/* ---------- ファーストビュー ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 63%;
  background: url("https://www.s-mankan.com/wp-content/themes/tokyo/img/renew/top/hero-mansion-generated.webp") 68% center / cover no-repeat;
  filter: saturate(.72) contrast(.96);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.99) 42%, rgba(255,255,255,.86) 55%, rgba(255,255,255,.14) 78%, rgba(255,255,255,.04) 100%);
}
.hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 24px;
  align-items: stretch;
  min-height: 680px;
  padding-block: 68px 0;
}
.hero__body { align-self: center; max-width: 640px; padding-bottom: 62px; }
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--red-dark);
  font-weight: 900;
  font-size: 1.02rem;
  letter-spacing: .03em;
  margin-bottom: 22px;
}
.hero__eyebrow::before { content: ""; width: 38px; height: 3px; background: var(--red); }
.hero__title { font-size: clamp(2.2rem, 3.6vw, 2.75rem); font-weight: 900; line-height: 1.3; letter-spacing: -.02em; }
.hero__title-line { display: block; white-space: nowrap; }
.hero__title .lg { display: block; color: var(--red); font-size: 1.08em; white-space: nowrap; }
.hero__lead { margin-top: 22px; max-width: 600px; font-size: 1.08rem; font-weight: 700; line-height: 1.95; }
.hero-proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  max-width: 600px;
  margin-top: 26px;
  padding: 16px 18px 16px 20px;
  background: linear-gradient(100deg, #fff7f8 0%, rgba(255,255,255,.94) 100%);
  border: 1px solid #e8c9cd;
  border-left: 6px solid var(--red);
  border-radius: 12px;
  box-shadow: 0 7px 20px rgba(82,42,48,.08);
}
.hero-proof__label { color: var(--ink); font-size: .92rem; font-weight: 900; line-height: 1.4; white-space: nowrap; }
.hero-proof__label small { color: inherit; font-size: 1em; }
/* 社名に創業年を添える。ラベルは white-space: nowrap のため1行に収まらないので、
   社名部分だけを別行にしています（各行は折り返さずに収まります）。 */
.hero-proof__founded { display: block; }
.hero-proof__number { color: var(--red); font-size: 3.35rem; font-weight: 900; line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.hero-proof__number small { margin-left: 6px; color: var(--ink); font-size: 1rem; letter-spacing: 0; }
.hero__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 16px; }
.hero__actions .btn { min-width: 244px; }
.hero-assurance { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; color: var(--ink-soft); font-size: .86rem; font-weight: 900; }
.hero-assurance span::before { content: "✓"; margin-right: 7px; color: var(--red); }
.hero__note { margin-top: 12px; font-size: .9rem; font-weight: 700; color: var(--ink-soft); }
.hero__note .accent { color: var(--red-dark); }

.hero__visual { position: relative; min-height: 612px; align-self: end; }
.hero-portrait { position: absolute; inset: 0; margin: 0; }
/* PC ではこの枠は無いものとして扱う（従来の配置を維持） */
.hero-portrait__frame { display: contents; }
.hero-portrait__image {
  position: absolute;
  right: -90px;
  bottom: 0;
  width: auto;
  height: 630px;
  max-width: none;
  filter: saturate(.84) contrast(1.01) drop-shadow(0 8px 10px rgba(31,31,31,.1));
}
.hero-portrait__cap {
  position: absolute;
  z-index: 2;
  right: -34px;
  bottom: 20px;
  width: 314px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  background: rgba(255,255,255,.95);
  border-top: 5px solid var(--red);
  border-radius: 2px;
  box-shadow: 0 8px 22px rgba(31,31,31,.14);
  padding: 13px 16px 14px;
}
.hero-portrait__role { width: 100%; font-size: .78rem; font-weight: 900; color: var(--ink-soft); }
.hero-portrait__name { font-size: 1.5rem; font-weight: 900; letter-spacing: .04em; }
.hero-portrait__badge { margin-left: auto; color: var(--red-dark); border: 1px solid var(--red); font-size: .72rem; font-weight: 900; border-radius: 999px; padding: 3px 10px; }

/* ---------- メディア協力ロゴ帯 ---------- */
.medialogos { background: #fff; border-bottom: 1px solid var(--line); padding-block: 40px; }
.medialogos__ttl { text-align: center; font-size: clamp(1.3rem, 3.4vw, 1.7rem); font-weight: 900; line-height: 1.5; margin-bottom: 22px; }
.medialogos__ttl .slash { display: inline-block; color: var(--red); margin-inline: .6em; }
.medialogos__strip { padding: 6px; }
.medialogos__strip img { display: block; width: 100%; }
.medialogos__note { margin-top: 12px; text-align: center; font-size: .86rem; color: var(--ink-soft); line-height: 1.7; }
.medialogos__strip {
	overflow: hidden;
	padding: 10px 15px;
}
.medialogos__strip .loop {
	animation: scroll-left 40s infinite linear .5s both;
	display: flex;
	align-items: center;
}
.medialogos__strip .loop.reverse {
	animation: scroll-right 40s infinite linear .5s both;
}
.medialogos__strip .loop .loop-item {
	margin: 10px 15px;
}
.medialogos__strip .loop .loop-item img {
	height: 60px;
	max-width: none;
	width: auto;
}
@media only screen and (max-width: 600px) {
	.medialogos__strip .loop {
		animation: scroll-left 20s infinite linear .5s both;
	}
	.medialogos__strip .loop.reverse {
		animation: scroll-right 20s infinite linear .5s both;
	}
	.medialogos__strip .loop .loop-item {
		height: 50px;
	}
}
@keyframes scroll-left {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}
@keyframes scroll-right {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(0);
	}
}

/* ---------- お困りごと（共感） ---------- */
.worries {
  background: var(--bg-soft);
  padding-block: 84px 76px;
}
.worries .section-head { margin-bottom: 46px; }
.worries__lead { margin-top: 12px; color: var(--ink-soft); font-size: 1.04rem; font-weight: 700; }
.worry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.worry-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: rgba(255,255,255,.96);
  border: 2px solid rgba(204,58,74,.45);
  border-radius: 28px;
  box-shadow: 0 9px 28px rgba(70,47,47,.07);
  text-align: center;
}
.worry-card__copy { min-height: 152px; display: flex; align-items: center; justify-content: center; padding: 24px 20px 0; }
.worry-card p { font-size: 1.18rem; font-weight: 900; line-height: 1.72; }
.worry-card mark {
  color: inherit;
  background: linear-gradient(transparent 62%, #f7d8dc 62%);
  padding-inline: .08em;
}
.worry-card img { display: block; width: 100%; margin-top: 0; }
.worries__bridge { margin-top: 44px; text-align: center; }
.worries__bridge .big { font-size: clamp(1.65rem, 3.3vw, 2.35rem); font-weight: 900; line-height: 1.55; }
.worries__bridge .big .accent { color: var(--red); }
.worries__bridge .sub { margin-top: 8px; color: var(--ink-soft); font-size: 1rem; font-weight: 700; }
.worries__bridge::after { content: ""; display: block; width: 220px; height: 6px; margin: 24px auto 0; border-radius: 999px; background: var(--red); }

/* ---------- 選ばれる理由 ---------- */
.reason-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding-block: 40px; }
/* 区切り線は「2行目以降の上」に引きます（隣接セレクタ）。
   :last-of-type で最後だけ消す書き方にすると、行のあとに div を足したときに
   余分な線が残ります。 */
.reason-row + .reason-row { border-top: 1px dashed var(--line); }
/* 写真を左に出す行は HTML側のクラス（.reason-row--visual-left）で指定します。
   :nth-of-type() で数える書き方にしないでください。同じ階層の .section-head も
   数に入るため、div を1つ足すだけで左右が全部反転します。
   現在は 01=写真左／02=写真右／03=写真左 です。 */
.reason-row--visual-left .reason-row__visual { order: -1; }
.reason-row__no { font-size: clamp(2.8rem, 7vw, 4.2rem); font-weight: 900; color: var(--red); line-height: 1; }
.reason-row__ttl { font-size: clamp(1.4rem, 3.4vw, 1.9rem); font-weight: 900; line-height: 1.45; margin: 8px 0 12px; }
.reason-row__ttl .accent { color: var(--red-dark); }
.reason-row__txt { font-size: 1.06rem; color: var(--ink-soft); line-height: 1.9; }
.reason-row__list { margin-top: 14px; }
.reason-row__list li { position: relative; padding-left: 1.5em; margin-top: 8px; font-size: 1rem; font-weight: 900; line-height: 1.8; }
.reason-row__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 9px; background: var(--red); border-radius: 2px; }
.reason-row__links { margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 22px; }
/* 箇条書き（.reason-row__list li）と同じ 1rem に揃えています。
   指定が無いと body の 18px を継いで箇条書き（16px）より大きくなり、
   本文より目立ってしまうためです。太さは 400 のままで控えめにしています。 */
.reason-row__links a { font-size: 1rem; font-weight: 400; }
.reason-row__visual .ph { aspect-ratio: 4/3; }
.reason-row__visual img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 12px;
}

/* ---------- サービス（5カテゴリ パネル） ---------- */
.svc-panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.svc-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e1d9da;
  border-top: 4px solid var(--red);
  border-radius: 14px;
  box-shadow: none;
  padding: 30px 20px 26px;
}
.svc-panel__ico {
  width: 112px;
  height: 104px;
  margin-inline: auto;
  display: grid;
  place-items: center;
}
.svc-panel__ico img { display: block; width: 100%; height: 100%; object-fit: contain; }
.svc-panel__category {
  display: block;
  margin-top: 16px;
  color: var(--red);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-align: center;
}
.svc-panel__guide {
  display: block;
  margin-top: 16px;
  color: var(--red);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
}
.svc-panel__ttl { margin-top: 6px; font-size: 1.75rem; font-weight: 900; line-height: 1.45; text-align: center; }
.svc-panel__lead { margin-top: 14px; font-size: 1rem; color: var(--ink-soft); line-height: 1.85; }
.svc-panel__list { margin-top: 20px; padding-top: 16px; border-top: 1px solid #eadfe1; display: flex; flex-direction: column; gap: 7px; }
.svc-panel__list a {
  position: relative;
  display: block;
  min-height: 44px;
  padding: 9px 28px 9px 6px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: -.035em;
  text-decoration: none;
}
.svc-panel__list a::after {
  content: "›";
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-52%);
  color: var(--red);
  font-size: 1.35rem;
  font-weight: 900;
}
@media (hover: hover) {
  .svc-panel__list a:hover { background: #fff3f5; color: var(--red-dark); }
}
.svc-panel__free { display: block; width: max-content; margin: 0 0 3px; font-size: .72rem; font-weight: 900; line-height: 1.35; letter-spacing: .02em; color: #fff; background: var(--red); border-radius: 999px; padding: 2px 8px; }
.svc-panel--cta { background: #fff8f9; border: 1px solid #dcaab0; border-top: 4px solid var(--red); }
.svc-panel--cta .svc-panel__ttl { font-size: 1.3rem; color: var(--red-dark); }
.svc-panel--cta .svc-panel__lead { color: var(--ink); }
.svc-panel--cta .btn { margin-top: auto; }
.svc-panel--cta .btn--primary {
  border-color: var(--red);
  transition: background-color .2s ease, color .2s ease;
}
.svc-panel--cta .btn--primary:hover,
.svc-panel--cta .btn--primary:focus-visible {
  background: #fff;
  color: var(--red-dark);
}
.svc-crosslink { margin-top: auto; padding-top: 16px; color: var(--ink-soft); font-size: .94rem; line-height: 1.7; }
.svc-crosslink strong { color: inherit; font-weight: 900; }

/* ---------- テレビ出演・メディア掲載（統合リスト）＋出版書籍 ---------- */
.mlist { display: flex; flex-direction: column; gap: 14px; }
.mlist__item { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 20px 24px; }
.mlist__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
.mlist__badge { flex: none; font-size: .78rem; font-weight: 900; color: var(--red-dark); border: 1px solid var(--red-dark); border-radius: 4px; padding: 1px 10px; white-space: nowrap; }
.mlist__date { font-size: .98rem; font-weight: 900; }
.mlist__outlet { font-size: 1.08rem; font-weight: 900; line-height: 1.5; }
.mlist__txt { margin-top: 8px; font-size: 1rem; color: var(--ink-soft); line-height: 1.85; }
.mlist__txt .note { font-size: .9rem; }
.media-more-link {
  display: inline-block;
  color: var(--red-dark);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  font-size: 1rem;
  font-weight: 400;
}
.media-more-link:hover { color: var(--red); text-decoration: none; }

/* 出版書籍（メディアセクション下部の小ブロック） */
/* 3列の並びは中の .booksrow__items が担当します。
   カルーセル化で書籍3件を1つの入れ物にまとめた分、グリッドを内側へ移しました。
   見出しと「その他の出版書籍を見る」の余白は、グリッドの gap から margin に置き換えています。 */
.booksrow { margin-top: 40px; padding-top: 28px; border-top: 1px dashed var(--line); }
.booksrow__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px 34px; }
.booksrow__ttl { margin-bottom: 18px; font-size: 1.12rem; font-weight: 900; padding-left: 12px; border-left: 6px solid var(--red); }
.booksrow__more { margin-top: 20px; font-size: 1rem; text-align: center; }
.bookmini { display: flex; align-items: center; gap: 18px; }
.bookmini .ph { flex: none; width: 68px; aspect-ratio: 3/4.2; font-size: .68rem; padding: 4px; }
.bookmini__cover {
  flex: none;
  width: 98px;
  height: auto;
  display: block;
  border: 1px solid #e1d9da;
  border-radius: 3px;
  box-shadow: 0 5px 14px rgba(31,31,31,.12);
}
.bookmini__ttl { font-size: 1rem; font-weight: 900; line-height: 1.6; }
.bookmini__meta { margin-top: 2px; font-size: .86rem; color: var(--ink-soft); line-height: 1.6; }
.bookmini__publisher { color: var(--ink); font-weight: 900; }
.media-note { margin-top: 24px; text-align: center; font-size: 1rem; }

/* ---------- LINE登録 ---------- */
.linereg {
  position: relative;
  margin-top: 48px;
  overflow: hidden;
  background: linear-gradient(105deg, #f3fff7 0%, #fff 58%);
  border: 2px solid #06c755;
  border-radius: 12px;
  padding: 30px 34px 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 270px;
  gap: 22px 30px;
  align-items: center;
  box-shadow: 0 8px 24px rgba(6, 199, 85, .08);
}
.linereg::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  left: -92px;
  top: -126px;
  border-radius: 50%;
  background: rgba(6, 199, 85, .08);
  pointer-events: none;
}
.linereg__content { position: relative; z-index: 1; }
.linereg__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: #008c3b;
  font-size: .88rem;
  font-weight: 900;
  letter-spacing: .04em;
}
.linereg__logo {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 70px;
  height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  background: #06c755;
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .02em;
}
.linereg__logo::after {
  content: "";
  position: absolute;
  left: 13px;
  bottom: -6px;
  border-width: 7px 7px 0 0;
  border-style: solid;
  border-color: #06c755 transparent transparent transparent;
}
.linereg__ttl {
  font-size: clamp(1.42rem, 2.2vw, 1.85rem);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: .01em;
}
.linereg__ttl .line-green { color: #008c3b; }
.linereg__txt { margin-top: 9px; font-size: 1rem; color: var(--ink-soft); line-height: 1.8; }
.linereg__qr {
  position: relative;
  text-align: center;
  background: #fff;
  border: 1px solid #cdebd9;
  border-radius: 8px;
  padding: 9px 9px 8px;
  box-shadow: 0 5px 16px rgba(31, 31, 31, .08);
}
.linereg__qr img { display: block; width: 130px; height: 130px; object-fit: contain; }
.linereg__qr .cap { margin-top: 5px; font-size: .78rem; font-weight: 900; color: var(--ink-soft); }
.linereg__action { text-align: center; }
.linereg__action-lead { margin-bottom: 9px; font-size: .92rem; font-weight: 900; color: #008c3b; }
.linereg__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  padding: 13px 24px;
  border: 2px solid #06c755;
  border-radius: 999px;
  background: #06c755;
  color: #fff;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.4;
  box-shadow: 0 5px 0 #009b42;
}
.linereg__btn:hover {
  background: #fff;
  color: #008c3b;
  text-decoration: none;
  transform: translateY(2px);
  box-shadow: 0 3px 0 #009b42;
}
.linereg__note { grid-column: 1 / -1; padding-top: 16px; border-top: 1px dashed #b9dcca; font-size: .88rem; color: var(--ink-soft); line-height: 1.75; }

/* ---------- セミナー・お知らせ ---------- */
/* 背景をピンクにして前後の白と色で分かれるため、以前の上下の区切り線は外しました
   （色の境目に線を重ねると継ぎ目が目立つため） */
.news-band { padding-block: 30px; }
.news-band__inner { display: grid; grid-template-columns: auto 1fr; gap: 10px 30px; align-items: start; }
.news-band__ttl { font-size: 1.12rem; font-weight: 900; white-space: nowrap; padding-left: 12px; border-left: 6px solid var(--red); }
.news-list li { border-bottom: 1px dashed var(--line); }
.news-list li:last-child { border-bottom: 0; }
.news-list a { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; padding: 10px 2px; color: var(--ink); }
.news-list a:hover { background: var(--bg-tint); text-decoration: none; }
.news-list__date { min-width: 6.6em; font-size: .92rem; font-weight: 900; color: var(--ink-soft); }
.news-list__cat { font-size: .78rem; font-weight: 900; color: var(--red-dark); border: 1px solid var(--red-dark); border-radius: 3px; padding: 0 8px; }
.news-list__ttl { font-size: 1rem; font-weight: 700; line-height: 1.7; }

/* ---------- YouTubeチャンネル ---------- */
.yt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.yt-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--ink); }
.yt-card:hover { border-color: var(--red); text-decoration: none; }
.yt-card__thumb { position: relative; display: block; }
.yt-card__thumb img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-bottom: 1px solid var(--line); }
.yt-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 36px; background: rgba(20,20,20,.78); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.yt-card__play::after { content: ""; margin-left: 4px; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; }
.yt-card__duration { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.78); color: #fff; font-size: .74rem; font-weight: 900; padding: 1px 6px; border-radius: 3px; }
.yt-card__body { display: block; padding: 14px 16px; }
.yt-card__ttl { display: block; font-size: .98rem; font-weight: 900; line-height: 1.6; }
.yt-card__meta { display: block; margin-top: 8px; font-size: .82rem; color: var(--ink-soft); font-weight: 700; }

/* ---------- コラム ---------- */
.col-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.col-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--ink); }
.col-card:hover { border-color: var(--red); text-decoration: none; }
.col-card .thumb { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-bottom: 1px solid var(--line); }
.col-card .body { padding: 16px 18px; }
.col-card .cat { display: inline-block; color: var(--red-dark); border: 1px solid var(--red-dark); border-radius: 3px; font-size: .78rem; font-weight: 900; padding: 1px 8px; }
.col-card h4 { margin-top: 10px; font-size: 1.08rem; font-weight: 900; line-height: 1.6; }
.col-card .author { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: .88rem; font-weight: 700; color: var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 860px; margin-inline: auto; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; }
.faq-item summary { list-style: none; cursor: pointer; position: relative; padding: 20px 56px; font-size: 1.12rem; font-weight: 900; line-height: 1.6; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "Q"; position: absolute; left: 18px; top: 18px; width: 28px; height: 28px; background: var(--red); color: #fff; border-radius: 50%; display: grid; place-items: center; font-weight: 900; }
/* 開閉の目印はメニューと揃えて ▼／▲。＋より「下に開く」と形で伝わります
   （白抜きの ▽／△ にする場合はこの2文字を差し替えてください）。
   ＋より字面が小さいため、font-size と top を合わせて調整しています。 */
.faq-item summary::after { content: "▼"; position: absolute; right: 20px; top: 22px; color: var(--red); font-weight: 900; font-size: 1rem; }
.faq-item[open] summary::after { content: "▲"; }
.faq-item .ans { position: relative; padding: 0 22px 22px 56px; font-size: 1.02rem; color: var(--ink-soft); line-height: 1.9; }
/* 質問行にカーソルを載せると薄いピンクになります。
   ・「押せる場所」だと一目で分かるようにするためです。開いているかどうかに
     関わらず、質問行（summary）だけが色づきます。
   ・スマホにはホバーがないため、タップ中（:active）に同じ色を出します。
     ホバー指定を @media (hover: hover) に入れているのは、タップ後に
     色が残り続ける端末があるためです。
   ・キーボード操作（Tabキー）でも同じ色になるようにしています。 */
.faq-item summary { transition: background-color .18s ease; }
@media (hover: hover) {
  .faq-item summary:hover { background: #fff0f3; }
}
.faq-item summary:active,
.faq-item summary:focus-visible { background: #fff0f3; }

.faq-item .ans::before { content: "A"; position: absolute; left: 18px; top: 0; width: 28px; height: 28px; background: var(--ink); color: #fff; border-radius: 50%; display: grid; place-items: center; font-weight: 900; }

/* ---------- 資料ダウンロード ---------- */
.download__box {
  background: #fff;
  border: 2px solid var(--red);
  border-radius: 14px;
  padding: 36px;
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(0, 1.35fr);
  gap: 38px;
  align-items: center;
}
.download__visual {
  position: relative;
  padding: 14px;
  background: #f8f1f2;
  border: 1px solid #ecd9dc;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(60,38,42,.12);
}
.download__visual img { display: block; width: 100%; height: auto; border-radius: 5px; }
.download__sample-label {
  position: absolute;
  left: 22px;
  top: -14px;
  padding: 5px 13px;
  border-radius: 0;
  background: var(--red);
  color: #fff;
  font-size: .8rem;
  font-weight: 900;
}
.download__box .free { display: inline-block; background: var(--red); color: #fff; font-weight: 900; font-size: .98rem; border-radius: 0; padding: 4px 16px; }
.download__box h3 { margin: 10px 0; font-size: 1.44rem; font-weight: 900; line-height: 1.55; }
.download__box p { color: var(--ink-soft); font-size: 1rem; }
.download__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.download__actions .btn {
  flex: 1;
  min-width: 220px;
  white-space: nowrap;
  border-color: var(--red);
  transition: background-color .2s ease, color .2s ease;
}
.download__actions .btn--primary:hover,
.download__actions .btn--primary:focus-visible {
  background: #fff;
  color: var(--red-dark);
}
.download__actions .btn--outline:hover,
.download__actions .btn--outline:focus-visible {
  background: var(--red);
  color: #fff;
}


/* ---------- レスポンシブ ---------- */
@media (max-width: 1080px) {
  .svc-panels { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr .72fr; gap: 8px; min-height: 620px; }
  .hero__visual { order: 0; min-height: 550px; }
  .hero-portrait__image { right: -125px; height: 570px; }
  .hero-portrait__cap { right: -25px; width: 280px; }
  .hero__actions .btn { min-width: 210px; }
  .worry-grid, .col-grid, .yt-grid { grid-template-columns: repeat(2, 1fr); }
  /* 1カラムになる幅では「番号 → 見出し → 写真 → 本文」の順にします。
     ------------------------------------------------------------
     写真は HTML上では .reason-row__body の“外”にあるため、そのままだと
     本文をすべて読み終えた最後に写真が来ます。見出しの直後に置きたいので、
     .reason-row__body を display: contents にして中の要素を .reason-row の
     直接の子として扱い、order で写真を見出しの次に差し込んでいます
     （ファーストビューで使っているのと同じ手法です）。
     ・gap は 0 にしています。display: contents で子要素が全部 flex の項目に
       なるため、gap を残すと番号と見出しの間などにも18pxが入ってしまいます。
       間隔は各要素の margin で作ります。
     ・偶数行の写真を左に出すPCの指定（order: -1）も、ここでは 3 に上書きして
       01〜03すべて同じ並び順に揃えています。
     ・並び替えは見た目だけで、HTMLの読み上げ順（番号→見出し→本文→写真）は
       変わりません。写真は装飾のため、読み上げ順が前後しても意味は崩れません。 */
  /* align-items は基本ルールで center（PCの2カラムで写真と本文を天地中央に
     揃えるため）です。1カラムでは縦並びになるので center が“横方向の中央寄せ”
     として効いてしまい、番号(01/02/03)やリンクが中央に寄ってしまいます。
     stretch に戻して、番号は左・リンクは右（justify-content: flex-end）のままにします。 */
  /* 見出し「さくら事務所が選ばれる理由」と「01」の間を詰めます。
     .section-head の margin-bottom と .reason-row の padding-top の合計です。
     「01」は44.8pxの大きな数字で字面の上に余白があるため、
     数値どおりより広く見えます。合計34pxにしています。
     ・2行目以降の padding-top（40px）は変えていません。区切り線と次の番号の
       間隔はそのままにしたいためです（隣接セレクタで1行目だけを対象にしています）。
     ・PCは従来どおり80pxのままです（横幅が広く、詰まって見えないため）。 */
  .reasons .section-head { margin-bottom: 18px; }
  .reasons .section-head + .reason-row { padding-top: 16px; }

  .reason-row { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .reason-row__body { display: contents; }
  .reason-row__no  { order: 1; }
  .reason-row__ttl { order: 2; }
  .reason-row__visual,
  .reason-row--visual-left .reason-row__visual { order: 3; margin: 4px 0 20px; }
  .reason-row__txt,
  .reason-row__list,
  .reason-row__links { order: 4; }
  .linereg { grid-template-columns: minmax(0, 1fr) 150px; }
  .linereg__action { grid-column: 1 / -1; }
  .linereg__btn { max-width: 360px; margin-inline: auto; }
}
@media (max-width: 720px) {
  /* 50代以上が主読者のため、スマホでも本文サイズは下げません（18pxのまま） */

  /* スマホでセクション見出し・リードを1行に収める
     ------------------------------------------------------------
     PCの指定（clamp の下限 1.7rem＝27.2px）がそのままスマホにも効いていたため、
     375px幅では「こんなお困りごとはありませんか？」が392px必要なのに
     使える幅が335pxしかなく、「か？」だけが2行目に落ちていました。
     ・PCの値（1.7rem／1.04rem）を上限に置いたまま、vw で頭を押さえています。
       min() なので721px以上には影響せず、境界で文字サイズが飛びません。
     ・実機幅 375px / 360px / 320px で1行になることを実測で確認しています
       （375px:21.8px ／ 360px:20.9px ／ 320px:18.6px）。
     ・リードの vw 指定は 360px 以下で必要です。スマホの文（「判断には、…」）は
       375pxなら等倍でも収まりますが、360pxでは323px必要／316pxしかないためです。
     ・「テレビ出演・メディア掲載／最新情報」だけは2行ですが、
       これは <br> で意図的に改行しているものです。
     ・見出しはこの1行で全セクションに効きます。個別に指定を足すと
       セクションごとに文字サイズがバラつくので、増やさないでください。 */
  .section-title { font-size: min(1.7rem, 5.8vw); }
  .worries__lead { font-size: min(1.04rem, 4.3vw); }
  /* サービス一覧のリードで「工事も管理も請け負わない第三者の立場で／対応します。」と
     改行させています（br.br-sp）。この1行目は 16.64px で311px必要で、
     375px幅なら収まりますが320px幅では276pxしかなく、指定位置以外でも折り返します。
     そのためPCの値を上限に vw で頭を押さえています。
     375pxでは等倍（16.64px）のままなので、他セクションのリードの見た目は変わりません。 */
  .section-lead  { font-size: min(1.04rem, 4.5vw); }
  /* .pc-only ＝ PCだけに出す文字（スマホでは隠す）。
     ・お困りごとのリード：PCは「管理組合の判断には、…」の完全な文、
       スマホは「判断には、…」。文字サイズだけでは1行に収まらず
       （13.6pxまで落とす必要があり小さすぎる）、PCの文言は変えたくないためです。
     ・お役立ち情報のリード：「知識を、」の読点。スマホでは同じ位置で改行するので、
       読点と改行が重なって間延びしないよう読点だけ隠しています。
       ここは文字サイズの調整は不要です（一番長い行が239pxで、320px幅でも収まります）。
     テキストはHTMLに1つしか持たせていません（同じ文を2つ置くと重複コンテンツに
     なるため）。スマホ専用の改行 .br-sp と対になる指定です。 */
  .pc-only { display: none; }

  .section { padding-block: 48px; }
  .brand__logo img { width: min(220px, 62vw); }
  /* 変更：スマホでも理由セクションの画像を表示します。
     ただし4:3のままでは縦を取りすぎるため、16:9に切り替えて高さを抑えています。
     【DES/DEV】実画像は1ファイルで両対応させるため、<img> に
     object-fit: cover を指定してください（PC＝4:3／スマホ＝16:9でトリミング）。
     どちらの比率でも主題が切れない構図でご用意ください。 */
  .reason-row__visual .ph,
  .reason-row__visual img { aspect-ratio: 16/9; }
  .worry-grid, .col-grid, .yt-grid, .svc-panels, .footer-sitemap, .footer-banners,
  .booksrow { grid-template-columns: 1fr; }
  .news-band__inner { grid-template-columns: 1fr; }
    /* 説明文は3行。文（。）の区切りで改行位置を指定しています。
     ------------------------------------------------------------
     ブラウザ任せの折り返しだと「対応／実績」のように語の途中で切れるため、
     3つの文の境目に br.br-sp を入れて意味の区切りで改行させています。

     ・この方式では「一番長い文」が収まる大きさが上限になります。
       一番長いのは「理事会での検討資料としてもお使いいただけます。」で、
       16pxだと343px必要です。
     ・左右の余白を 20px → 14px にして、文字に使える幅を12px広げました。
       余白のままだと文字をさらに小さくする必要があったためです。
     ・文字サイズは vw で頭を押さえ、320pxまで指定どおりの3行を保ちます
       （375px→12.8px／360px→12.2px／320px→10.9px）。
     ※この指定は資料ダウンロードのブロック専用です。
     ・PCでは br.br-sp が無効なので、従来どおり16pxで流し込みます。 */
  .download__box { grid-template-columns: 1fr; gap: 30px; padding: 28px 14px; text-align: center; }
  .download__box p { font-size: min(1rem, 3.4vw); }
  /* 見出しも「さくら事務所のマンション管理／サービスがわかる資料」で改行します。
     1行目は23.04pxで299px必要ですが、375px幅で使える幅は301pxしかなく（余り2px）、
     360px以下では入りきらず指定位置以外でも折り返します。
     PCの値を上限に vw で頭を押さえています（375px→21.4px／320px→18.2px）。 */
  .download__box h3 { font-size: min(1.44rem, 5.7vw); }
  .download__actions .btn { width: 100%; }
  .mlist__item { padding: 18px 18px; }
  .linereg { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px 20px; }
  .linereg__qr { display: none; }
  .linereg__action { width: 100%; }
  .linereg__btn { width: 100%; max-width: none; }
  .hero__actions .btn, .cta-final__actions .btn { width: 100%; }

  /* 最終CTAの改行を整えます。
     ・見出し「まずは、お気軽にご相談ください。」は27.2pxで385px必要ですが
       使える幅は333pxしかなく、「さい。」だけが2行目に落ちていました。
       PCの値を上限に vw で押さえて1行に収めます（375px→22.5px／320px→19.2px）。
     ・リード・電話・注記は br.br-sp で意味の区切りに改行位置を指定しています。
     ・注記は2文に分けても1文目が371px必要なため、こちらもサイズに上限を付けます
       （375px→15.4px／320px→13.1px）。 */
  .cta-final h2 { font-size: min(1.7rem, 6vw); }
  .cta-final p.cta-final__area { font-size: min(.98rem, 4.1vw); }
  .hero::before { inset: auto 0 0 0; width: 100%; height: 48%; background-position: center; }
  .hero::after { background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.98) 54%, rgba(255,255,255,.42) 76%, rgba(255,255,255,.08) 100%); }
  .hero .wrap { grid-template-columns: 1fr; gap: 0; min-height: auto; padding-block: 42px 0; }
  .hero__body { padding-bottom: 26px; }
  .hero__title { font-size: clamp(1.4rem, 6.8vw, 2.25rem); }
  .hero__lead br { display: none; }
  .hero-proof { grid-template-columns: 1fr; max-width: none; gap: 9px; padding: 14px 16px; }
  .hero-proof__label { font-size: clamp(.62rem, 3vw, .78rem); }
  .hero-proof__number { justify-self: end; font-size: 2.55rem; }
  .hero__visual { min-height: 390px; }
  .hero-portrait__image { right: 50%; transform: translateX(64%); height: 420px; }
  .hero-portrait__cap { right: 4px; bottom: 12px; width: min(300px, calc(100% - 16px)); }
  .hero-assurance { font-size: .8rem; }
  .worries { padding-block: 56px 50px; }
  .worry-card { min-height: 0; }
  .worry-card__copy { min-height: 0; padding: 25px 18px 0; }
  .worry-card p { font-size: 1.12rem; }
  .br-sp { display: inline; }

  /* 「その悩みに応えるサービスを／ご用意しています。」
     「工事会社にも管理会社にも属さない立場で、／組合の判断を支えます。」
     の位置で改行させています（br.br-sp）。
     ただし文字サイズが等倍のままだと、狭い画面で1行目が入りきらず
     指定した位置以外でも折り返してしまいます。
       ・「その悩みに応えるサービスを」は 26.4px で326px必要／375pxでは331pxしかない
       ・「工事会社にも…立場で、」は 16px で305px必要／320px幅では276pxしかない
     そこでPCの値を上限に vw で頭を押さえ、320pxまで指定どおりの2行になるように
     しています（min() なので721px以上には影響しません）。 */
  .worries__bridge .big { font-size: min(1.65rem, 6.9vw); }
  .worries__bridge .sub { font-size: min(1rem, 4.5vw); }

  .worries__bridge { margin-top: 34px; }
  .sticky-cta {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #fff; border-top: 1px solid var(--line);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 8px;
  }
  .sticky-cta .btn { flex: 1; min-height: 52px; font-size: 1.04rem; padding: 8px 10px; }
}

/* ワイヤーフレームであることを示す帯（本番では削除） */
.wf-ribbon{background:#f4f4f4;color:#aa2228;text-align:center;font-weight: 900;
  font-size:.88rem;padding:8px 12px;border-bottom:1px dashed #aa2228;}

/* ============================================================
   ★スマホのFV：土屋さんを「リード文の直後のカード」へ移動
   ------------------------------------------------------------
   ・キャッチ → 顔・氏名 → 実績 → CTA が1画面に収まる形にしています。
     写真を本文の下に大きく置くと、顔の位置が約818pxになり
     （iPhone SEでは画面外）1画面に収まりません。
   ・トリミング値は元画像（1000×1500の透過PNG）を解析して算出したものです。
     横位置は「頭部の中心 x524」に合わせています。肩幅が右に広いため、
     全身の重心 x598 で合わせると顔が左に15pxずれます。
     縦は 頭頂 y259 / 首 y534 / 顔の中心 y400 で、頭〜胸元が入ります。
     ※お渡しするファイルはWebP（840×1260）に縮小してありますが、下の指定は
       CSSのpx（width: 204px と left / top）で切り出しているため、素材の実寸が
       変わっても切り出し位置はずれません。上の座標は元画像基準の参考値です。
   ・PC（721px以上）の見た目は変更していません。
   ============================================================ */
@media (max-width: 720px) {
  /* hero__body を display:contents にして、その子要素と hero__visual を
     同じ並びに置き、order で写真をリード文の直後に差し込む */
  .hero .wrap { display: flex; flex-direction: column; padding-bottom: 26px; }
  .hero__body { display: contents; }
  .hero__eyebrow  { order: 1; }
  .hero__title    { order: 2; }
  .hero__lead     { order: 3; }
  .hero__visual   { order: 4; }
  .hero-proof     { order: 5; }
  .hero__actions  { order: 6; }
  .hero-assurance { order: 7; }
  .hero__note     { order: 8; }

  /* 大きな写真 → 横並びのコンパクトカード */
  .hero__visual { min-height: 0; align-self: stretch; margin: 20px 0 2px; }
  .hero-portrait {
    position: static; display: flex; align-items: center; gap: 14px;
    background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--red);
    border-radius: 8px; padding: 10px 14px;
  }
  /* 顔まわり（頭〜胸元）だけを切り出す枠 */
  .hero-portrait__frame {
    display: block; position: relative; flex: none;
    width: 78px; height: 96px; overflow: hidden;
    border-radius: 6px; background: var(--bg-tint);
  }
  .hero-portrait__image {
    position: absolute; right: auto; transform: none;
    width: 204px; height: auto; left: -68px; top: -47px;
  }
  .hero-portrait__cap {
    position: static; right: auto; bottom: auto; width: auto;
    padding: 0; border: 0; background: none; box-shadow: none;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
  }
  .hero-portrait__name { font-size: 1.28rem; }

  /* ★背景写真と重なって読みにくいため、文字の背後に半透明の白を敷く。
     スマホでは .hero::after のグラデーションが下端で白8%まで薄まるため、
     この2行だけ写真に直撃していました（CTAボタンは自前の塗りがあるので無事）。
     写真を完全に隠さずに読みやすさを確保するため、白96%＋ぼかしにしています。
     2行はつなげて1枚のパネルに見せています。 */
  .hero-assurance,
  .hero__note {
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    padding: 10px 14px;
  }
  .hero-assurance {
    margin-top: 18px; margin-bottom: 0;
    border-radius: 8px 8px 0 0;
  }
  .hero__note {
    margin-top: 0;
    border-top: 1px dashed var(--line);
    border-radius: 0 0 8px 8px;
  }
}

@media (max-width: 720px) {
  /* アンカーで飛んだとき、追従ヘッダーに隠れないように */
  .svc-panel { scroll-margin-top: 92px; }
  #services, #reasons, #media, #faq, #news, #columns, #download { scroll-margin-top: 88px; }
}

/* ============================================================
   ★PC：下にスクロールすると、グローバルナビだけが上端に残る
   ------------------------------------------------------------
   ・上段（ロゴ・電話・相談ボタン）は通常どおり流れて消え、
     下段のナビ（55px）だけが固定されます。
   ・仕組み：ヘッダー全体を position:sticky のまま、上段の高さ分だけ
     上へずらして固定しています（top を負の値にする）。
     上端まで戻ると上段も自然に戻ります。
   ・上段の高さは JavaScript で実測して --header-main-h に入れています。
     JSが動かない場合も 112px（実測値）で正しく動きます。
   ・スマホ（980px以下）はナビがドロワーに入るため、従来どおり
     ヘッダー全体が固定されます。
   ============================================================ */
@media (min-width: 981px) {

  /* 固定されたナビ（55px）に見出しが隠れないようにする */
  #services, #reasons, #media, #faq, #news, #columns, #download,
  .svc-panel { scroll-margin-top: 74px; }
}

/* ============================================================
   PCヘッダーの構成（3段）
   ------------------------------------------------------------
   ・1段目：運営会社の表記のみ。この帯にリンクはありません。
     区切り線と地色は付けず、ロゴと一体に見せています。
   ・2段目：ロゴ ／ 電話 ／ 相談ボタン
   ・3段目：グローバルナビ6項目
     （サービス／選ばれる理由／メディア実績／よくある質問／お役立ち情報／会社概要）
     PCは6列グリッド、スマホはドロワー内に縦積み。ナビ行にボタンは置きません。
   ・スクロールすると1・2段目は流れ、3段目のナビだけが上端に固定されます。
     2段目の高さはJavaScriptで実測して --header-main-h に入れています
     （JSが動かない場合も 112px で正しく動きます）。
   ・スマホ（980px以下）はヘッダー全体が固定＋ドロワーです。
   ============================================================ */

@media (min-width: 981px) {

  /* 固定されたメイン行（約89px）に見出しが隠れないように */
  #services, #reasons, #media, #faq, #news, #columns, #download,
  .svc-panel { scroll-margin-top: 108px; }
}

@media (min-width: 981px) {

  /* 固定されたナビ行（約56px）に見出しが隠れないように */
  #services, #reasons, #media, #faq, #news, #columns, #download,
  .svc-panel { scroll-margin-top: 76px; }
}

/* ============================================================
   右下の追従CTA（PCのみ）
   ------------------------------------------------------------
   ・表示条件：PC（981px以上）／スクロール600px超／最終CTAが画面外
   ・アニメーションは prefers-reduced-motion に配慮しています
   ============================================================ */
.float-cta { display: none; }

@media (min-width: 981px) {
  /* 「押せる」ことが一目で伝わるように、次の3つを組み合わせています。
       ① 右端に白い丸＋矢印（サイトの他のリンクと同じ「›」を使用）
       ② 下辺に濃い赤の縁を入れて、浮いたボタンらしい立体感を出す
       ③ 押すと沈む（:active）／触ると白地に色が反転する（:hover）
     文字だけの赤い塊だと「見出し」や「ラベル」に見えてしまうためです。 */
  .float-cta {
    /* min-width で幅を確保しているため、justify-content: center が無いと
       テキストが左に寄ります（自然な幅より約21px広いので、その分が右に余る）。 */
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 14px;
    position: fixed; right: 24px; bottom: 24px; z-index: 60;
    min-width: 215px; padding: 14px 28px;
    /* 枠線は通常時は「赤地に赤」で見えませんが、ホバーで白に反転したときの輪郭になります。
       常に持たせておくことで、反転してもボタンの大きさが変わりません（box-sizing: border-box）。
       padding を 16/30 → 14/28 にして、枠線2px分を相殺しています。 */
    background: var(--red); color: #fff; border: 2px solid var(--red);
    border-radius: 999px; text-decoration: none;
    box-shadow: 0 4px 0 var(--red-dark), 0 9px 24px rgba(82, 42, 48, .32);
    /* カーソルの印を右下に重ねるための基準 */
    overflow: visible;
    opacity: 0; visibility: hidden; transform: translateY(14px);
    transition: opacity .25s ease, transform .18s ease, visibility .25s ease,
                background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .18s ease;
  }
  .float-cta.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
  /* 他のボタンと同じく、触ると白地に反転します（.btn--primary:hover と同じ挙動） */
  .float-cta:hover, .float-cta:focus-visible {
    background: #fff; color: var(--red-dark); border-color: var(--red); text-decoration: none;
  }
  .float-cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
  /* 触ると「押し込まれる」。下辺の縁が縮んで沈むので、押した感じが出ます */
  .float-cta.is-visible:hover,
  .float-cta.is-visible:focus-visible {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--red-dark), 0 6px 16px rgba(82, 42, 48, .34);
  }
  .float-cta.is-visible:hover .float-cta__cursor {
    animation: none; transform: translate(-1px, 1px) scale(.96);
  }
  /* 押したときに沈む */
  .float-cta.is-visible:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--red-dark), 0 3px 10px rgba(82, 42, 48, .3);
  }
  .float-cta__text { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .float-cta__main { font-size: 1.14rem; font-weight: 900; white-space: nowrap; }
  .float-cta__sub { margin-top: 2px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
  /* 右下に重ねるマウスカーソルの印。
     赤い塊が「ラベル」に見えてしまう問題への対策で、
     「これは押せるものだ」を図で直接伝えます。
     ボタンの輪郭から少しはみ出させることで、上に載っている感じを出しています。 */
  .float-cta__cursor {
    /* 丸い背景は付けません（カーソルの形だけを見せます）。
       ボタンの外にはみ出した部分が背景に溶けないよう、影で輪郭を付けています。
       クリックを表す放射線を添えて「押せる」ことを図で伝えます。 */
    position: absolute; right: -12px; bottom: -16px;
    display: grid; place-items: center;
    filter: drop-shadow(0 1px 3px rgba(45, 38, 40, .4));
    transition: transform .18s ease;
  }
  .float-cta__cursor svg { display: block; }
  /* ときどき小さく動かして「触れるもの」だと気づかせる */
  @keyframes float-cta-tap {
    0%, 68%, 100% { transform: translate(0, 0); }
    78%           { transform: translate(-3px, -3px); }
    88%           { transform: translate(0, 0); }
  }
  .float-cta.is-visible .float-cta__cursor { animation: float-cta-tap 2.8s ease-in-out infinite; }
  .float-cta:hover .float-cta__cursor { animation: none; transform: translate(-2px, -2px); }
}

@media (prefers-reduced-motion: reduce) {
  /* 動きを控える設定の端末では、揺れを止めます（印は出したままにします） */
  .float-cta { transition: none; }
  .float-cta.is-visible .float-cta__cursor { animation: none; }
}

/* ============================================================
   全ボタンを「押し込む」形に統一 ＋ ホバーで色反転
   ------------------------------------------------------------
   ・下辺に濃い色の縁を入れて「押せる立体感」を出します。
     触ると2px、押すと4px沈み、それに合わせて縁が縮みます。
   ・色反転は基本ルール（.btn--primary / .btn--outline）で全ボタンに効かせています。
   ・ホバーの沈み込みは @media (hover: hover) に入れています。
     タップ後にホバー状態が残る端末で、沈んだままになるのを防ぐためです。
     押下（:active）は外に置いているので、スマホのタップでも効きます。
   ・transform と box-shadow を含む transition を後段で再定義しています
     （個別ルールに上書きされないようにするため）。
   ・LINEボタン（.btn--line）は対象外です。公式のデザイン規定に沿った素材を
     使う想定のため、独自の立体感や沈み込みを加えていません。
   ============================================================ */
.btn {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              transform .12s ease, box-shadow .12s ease;
}
/* 既存ルールが transition を上書きしてしまう箇所を上書きし直す */
.site-header .btn, .cta-final .btn, .svc-panel--cta .btn,
.download__actions .btn, .footer-cta .btn, .hero__actions .btn, .sticky-cta .btn {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              transform .12s ease, box-shadow .12s ease;
}

/* 押せる立体感（下辺の縁） */
.btn--primary { box-shadow: 0 4px 0 var(--red-dark); }
.btn--outline { box-shadow: 0 4px 0 var(--red); }

/* 色反転（全ボタン共通に） */
.btn--primary:hover, .btn--primary:focus-visible {
  background: #fff; color: var(--red-dark); border-color: var(--red);
}
.btn--outline:hover, .btn--outline:focus-visible {
  background: var(--red); color: #fff; border-color: var(--red);
}

/* マウス操作の端末だけ、ホバーで沈ませる */
@media (hover: hover) {
  .btn--primary:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--red-dark); }
  .btn--outline:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--red); }
}

/* 押した瞬間はさらに深く沈む（スマホのタップでも効きます）
   LINEボタンは下辺の縁が無いため、沈ませないよう除外しています */
.btn:not(.btn--line):active { transform: translateY(4px); }
.btn--primary:active { box-shadow: 0 0 0 var(--red-dark); }
.btn--outline:active { box-shadow: 0 0 0 var(--red); }

@media (prefers-reduced-motion: reduce) {
  /* 動きを控える設定では沈む動きを止めます（色反転は残します） */
  .btn { transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
  .btn--primary:hover, .btn--outline:hover, .btn:active { transform: none; }
}

/* ============================================================
   業界団体と管理組合様からの評価（受賞・感謝状）
   ------------------------------------------------------------
   ・背景は白。賞状は生成り色なので、白地に沈まないよう
     金色の額縁（外側2px＋内側の細線1px）と控えめな影を付けています。
     金は装飾専用（--gold）で、文字色には使いません（白地でのコントラストが
     足りず、読みづらくなるため）。
   ・賞状は横長（約1.41:1）なので、PCは2列、スマホは1列にしています。
   ============================================================ */
.awards { background: #fff; }

.awards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.award { display: flex; flex-direction: column; }
.award__fig {
  margin: 0; background: #fff; padding: 13px;
  border: 2px solid var(--gold); border-radius: 4px;
  /* inset の細線で「二重枠の額縁」に見せています */
  box-shadow: inset 0 0 0 1px rgba(176, 140, 58, .38),
              0 6px 18px rgba(45, 38, 40, .12);
}
.award__fig img { display: block; width: 100%; height: auto; }
.award__body { margin-top: 20px; }
.award__label {
  display: inline-block; background: var(--red); color: #fff;
  font-size: .8rem; font-weight: 900; letter-spacing: .06em;
  border-radius: 4px; padding: 3px 12px;
}
.award__label--thanks { background: var(--red-dark); }
.award__ttl { margin: 10px 0 6px; font-size: 1.3rem; font-weight: 900; line-height: 1.5; }
.award__meta { font-size: .9rem; font-weight: 700; color: var(--ink-soft); line-height: 1.7; }
/* 主催団体へのリンク。青リンクだと浮くため、下線付きの本文色にしています */
.award__meta a { color: var(--ink); text-decoration: underline; }
.award__meta a:hover { color: var(--red-dark); }
.award__txt { margin-top: 10px; font-size: 1rem; line-height: 1.85; color: var(--ink-soft); }

@media (max-width: 720px) {
  .awards-grid { grid-template-columns: 1fr; gap: 34px; }
  .award__ttl { font-size: 1.18rem; }
}

/* ============================================================
   スマホのカルーセル（テレビ・メディア掲載／出版書籍）
   ------------------------------------------------------------
   縦に長くなりがちな2ブロックを、スマホでは横スクロールにまとめています。
   PCは従来どおりの縦並び／3列で、カルーセルにはしません。

   【高齢者にも分かるようにした点】
   ・◀▶の記号だけでなく「前へ」「次へ」の文字も入れています。
     記号だけだと何のボタンか伝わらないおそれがあるためです。
   ・ボタンは 104×56px 以上。指で押しやすい大きさにしています
     （一般に推奨される44pxより大きめ）。
   ・赤地に白文字でコントラストを確保し、常に表示します
     （ホバーで出てくる方式にはしていません）。
   ・「1 / 5」と現在位置を必ず表示します。あと何件あるかが分かるようにするためです。
   ・端まで来たボタンは無効化しますが、薄くしすぎず白地＋グレー文字にして
     「押せない状態」だと分かる程度に留めています。
   ・スワイプでも動きます（scroll-snap）。ボタンはその補助です。
   ・読み上げには現在位置を aria-live="polite" で伝えます。
     横スクロール領域はキーボードでも操作できるよう tabindex="0" を付けています。
   ・「動きを減らす」設定の端末では、スクロールのアニメーションを止めます。

   【DEV】.carousel__track の子要素が1件分のテンプレートです。
     .carousel と .carousel__nav は静的な枠なので、CMSのループは
     .carousel__track の中だけを繰り返してください。
     「1 / 5」の件数はJavaScriptが実際の件数から書き換えるので、直書きは不要です。
   ============================================================ */
.carousel__nav { display: none; }   /* PCではカルーセルにしないため出しません */

@media (max-width: 720px) {
  .carousel { position: relative; }
  .carousel__track {
    display: flex; flex-direction: row; flex-wrap: nowrap; gap: 14px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* 枠線やフォーカス表示が切れないよう上下に少し余裕を持たせます */
    padding-block: 2px;
  }
  .carousel__track::-webkit-scrollbar { display: none; }
  .carousel__track > * { flex: 0 0 100%; scroll-snap-align: start; }

  .carousel__nav {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin-top: 16px;
  }
  .carousel__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 104px; min-height: 56px; padding: 8px 16px;
    background: var(--red); color: #fff;
    border: 2px solid var(--red); border-radius: 8px;
    font-size: 1rem; font-weight: 900; line-height: 1;
    transition: background-color .18s ease, color .18s ease,
                border-color .18s ease, transform .12s ease;
  }
  .carousel__btn .arw { font-size: 1.2rem; }
  .carousel__btn:active { transform: translateY(3px); }
  .carousel__btn[disabled] {
    background: #fff; color: #8a8a8a; border-color: var(--line);
    cursor: default; transform: none;
  }
  .carousel__count {
    min-width: 76px; text-align: center;
    font-size: 1.06rem; font-weight: 900; line-height: 1.3; color: var(--ink);
  }
  .carousel__now { color: var(--red-dark); }
}