/* Yane Area Pages - 完全スタンドアロン用CSS(元サイト準拠の見た目を再現) */

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.7;
  color: #222;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: #0a58ca; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.4; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.4em; }

/* ===== PR Disclosure Bar ===== */
.yn-prbar {
  background: #f5f5f5;
  border-bottom: 1px solid #ececec;
}
.yn-prbar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2px 24px;
  text-align: right;
}
.yn-prbar__text {
  font-size: 10px;
  color: #999;
  letter-spacing: .02em;
}

/* ===== Header ===== */
.yn-header {
  background: #fff;
  border-bottom: 1px solid #eaeaea;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
/* ログイン中のWP管理バー(固定)とstickyヘッダーの重なりを防ぐ。
   管理バーが固定表示になるPC幅(783px以上)のときだけヘッダーを32px下げる。
   モバイル幅の管理バーはスクロールで消える(absolute)ため対象外。 */
@media screen and (min-width: 783px) {
  body.admin-bar .yn-header { top: 32px; }
}
.yn-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.yn-header__logo { flex: 0 0 auto; }
.yn-header__logoLink { display: inline-block; }
.yn-header__logoLink img {
  display: block;
  height: auto;
  width: auto;
  max-height: 56px;
  max-width: 100%;
}

/* Global Nav */
.yn-gnav { flex: 1 1 auto; display: flex; justify-content: flex-end; }
.yn-gnav__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 28px;
  align-items: center;
}
.yn-gnav__item a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #333;
  text-decoration: none;
  padding: 4px 0;
  line-height: 1.2;
  transition: color .15s;
}
.yn-gnav__item a:hover { color: #c33; text-decoration: none; }
.yn-gnav__ttl { font-size: 14px; font-weight: 600; }
.yn-gnav__desc { font-size: 10px; color: #999; letter-spacing: .08em; }

/* Breadcrumb */
.yn-breadcrumb { background: #f7f7f7; border-top: 1px solid #ececec; }
.yn-breadcrumb__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 24px;
  font-size: 12px;
  color: #666;
}
.yn-breadcrumb__inner a { color: #666; text-decoration: none; }
.yn-breadcrumb__inner a:hover { color: #c33; text-decoration: underline; }
.yn-breadcrumb__sep { margin: 0 6px; color: #bbb; }
.yn-breadcrumb [aria-current="page"] { color: #222; font-weight: 600; }

/* ===== Main wrap (2-column) ===== */
.yane-area-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 60px;
  background: #fff;
  min-height: 60vh;
}
.yane-area-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.yane-area-main { min-width: 0; grid-column: 2; grid-row: 1; }
.yn-sidebar     { grid-column: 1; grid-row: 1; }

/* ===== Sidebar ===== */
.yn-sidebar { position: sticky; top: 90px; }
@media (min-width: 901px) {
  .yn-sidebar { max-height: calc(100vh - 110px); overflow-y: auto; }
}

/* Search widget */
.yn-search {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 10px;
  padding: 20px;
  margin-top: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.yn-search__title {
  font-size: 16px;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #c33;
  color: #c33;
  font-weight: 700;
}
.yn-search__field { margin-bottom: 14px; }
.yn-search__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #666;
  margin-bottom: 4px;
}
.yn-search__select,
.yn-search__input {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  color: #222;
  appearance: none;
  -webkit-appearance: none;
}
.yn-search__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.yn-search__select:disabled { background-color: #f5f5f5; color: #999; cursor: not-allowed; }
.yn-search__input:focus,
.yn-search__select:focus { outline: 2px solid #c33; outline-offset: -1px; border-color: #c33; }

.yn-search__buttons {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.yn-search__btn {
  flex: 1;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid;
  cursor: pointer;
  transition: opacity .15s;
}
.yn-search__btn:hover { opacity: .85; }
.yn-search__btn--reset { background: #fff; color: #666; border-color: #ccc; }
.yn-search__btn--search { background: #c33; color: #fff; border-color: #c33; }

.yn-search__error {
  margin-top: 10px;
  padding: 8px 10px;
  background: #ffe5e5;
  color: #c33;
  border: 1px solid #f5b5b5;
  border-radius: 6px;
  font-size: 12px;
}

/* ===== Hero (ブラウザ全幅 / フルブリード) ===== */
.yane-hero {
  /* 鮮やかすぎる赤を避け、彩度を落とした目に優しいテラコッタ系グラデーション */
  background: linear-gradient(135deg, #c96a5e 0%, #d98a6e 100%);
  color: #fff;
  padding: 48px 0;
  border-radius: 0;
  margin: 0 0 16px;
  text-align: left;
}
/* 最終更新日(ヒーロー直下・全幅コンテナに左寄せ) */
.yane-area-updated {
  max-width: 1200px;
  margin: 0 auto 20px;
  padding: 0 16px;
}
.yane-area-updated__time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #888;
}
/* 背景は全幅、テキスト(タイトル+リード)は中央寄せで幅を絞る */
.yane-hero .yane-area__container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}
/* 右側サムネイルがある場合のみ 左:テキスト / 右:画像 の2カラム(コンテナ幅は不変) */
.yane-hero__container--has-image {
  display: flex;
  align-items: center;
  gap: 32px;
}
.yane-hero__container--has-image .yane-hero__body {
  flex: 1 1 auto;
  min-width: 0;
}
.yane-hero__figure {
  flex: 0 0 280px;
  width: 280px;
}
.yane-hero__figure img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.yane-hero__badge {
  display: inline-block;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.5);
  color: #fff;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 12px;
  margin-bottom: 12px;
}
.yane-hero__title {
  font-size: clamp(20px, 3vw, 28px);
  margin: 0 0 12px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}
.yane-hero__lead {
  font-size: 14px;
  max-width: 720px;
  margin: 0;
  opacity: .96;
  line-height: 1.8;
}

/* ===== Section ===== */
.yane-section {
  margin-bottom: 40px;
  padding: 0;
}
.yane-section--cta { padding: 24px 0; }

.yane-section__heading {
  font-size: clamp(18px, 2.4vw, 22px);
  margin: 0 0 12px;
  padding-left: 12px;
  border-left: 4px solid #c33;
  line-height: 1.4;
}
.yane-section__subtext { color: #666; font-size: 13.5px; margin-bottom: 20px; line-height: 1.7; }
.yane-section__lead { color: #555; margin-bottom: 20px; }

/* ===== FAQ(よくある質問 / details アコーディオン) ===== */
.yn-faq { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.yn-faq__item {
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background: #fff;
}
.yn-faq__item[open] { box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.yn-faq__q {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 14px 44px 14px 46px;
  font-weight: 700;
  font-size: 15px;
  color: #222;
  line-height: 1.6;
}
.yn-faq__q::-webkit-details-marker { display: none; }
.yn-faq__q::before {
  content: "Q";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 22px;
  height: 22px;
  background: #c33;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.yn-faq__q::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid #c33;
  border-bottom: 2px solid #c33;
  transform: translateY(-65%) rotate(45deg);
  transition: transform .2s;
}
.yn-faq__item[open] .yn-faq__q::after {
  transform: translateY(-35%) rotate(225deg);
}
.yn-faq__a {
  position: relative;
  padding: 0 18px 16px 46px;
}
.yn-faq__a::before {
  content: "A";
  position: absolute;
  left: 14px;
  top: 0;
  width: 22px;
  height: 22px;
  background: #f0a020;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.yn-faq__a p { margin: 0; font-size: 14.5px; line-height: 1.85; color: #444; }

.yane-prose { font-size: 15px; line-height: 1.95; color: #333; }
.yane-prose h2 {
  font-size: 22px;
  margin: 1.8em 0 .7em;
  padding: 10px 14px;
  background: #fafafa;
  border-left: 5px solid #c33;
  color: #222;
  line-height: 1.4;
}
.yane-prose h2:first-child { margin-top: 0; }
.yane-prose h3 {
  font-size: 18px;
  margin: 1.6em 0 .5em;
  padding-left: 12px;
  border-left: 3px solid #c33;
  color: #c33;
  line-height: 1.5;
}
.yane-prose h4 { font-size: 16px; margin: 1.2em 0 .4em; color: #222; }
.yane-prose p { margin: 0 0 1em; }
.yane-prose ul, .yane-prose ol { padding-left: 1.5em; margin: 0 0 1em; }
.yane-prose li { margin-bottom: .4em; }
.yane-prose a { color: #c33; text-decoration: underline; }
.yane-prose a:hover { text-decoration: none; }

.yane-prose img { max-width: 100%; height: auto; border-radius: 6px; margin: .5em 0; }
.yane-prose blockquote {
  border-left: 4px solid #ddd;
  padding-left: 16px;
  color: #555;
  margin: 1em 0;
}
.yane-prose table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.yane-prose th, .yane-prose td { border: 1px solid #e0e0e0; padding: 8px 12px; }
.yane-prose th { background: #f7f7f7; }
.yane-prose mark { background: #fff3a8; padding: 0 2px; }

/* 会社の種類カード(画像左 + 本文右) */
.yn-company-types {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 1em 0 1.5em;
}
.yn-company-type {
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 8px;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  align-items: center;
}
.yn-company-type__img {
  width: 180px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: #eee;
}
.yn-company-type__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.yn-company-type__body { min-width: 0; }
.yn-company-type h4 {
  margin: 0 0 8px;
  font-size: 16px;
  color: #c86400;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.yn-company-type__num {
  display: inline-block;
  font-size: 18px;
  font-weight: 800;
}
.yn-company-type p { margin: 0; font-size: 14.5px; line-height: 1.85; }
.yn-company-type--recommend {
  background: #fff8e6;
  border-color: #f0c040;
  border-width: 2px;
}
.yn-company-type__badge {
  display: inline-block;
  background: #c33;
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 700;
  margin-left: 6px;
}

@media (max-width: 600px) {
  .yn-company-type {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .yn-company-type__img {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

/* コールアウト(注意喚起) */
.yn-callout {
  background: #fff5f5;
  padding: 14px 18px;
  margin: 1.5em 0;
  border-radius: 6px;
  font-size: 15px;
}

/* 補助金セクション */
.yn-subsidy__hero {
  margin: 0 0 1em;
}
.yn-subsidy__hero img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.yn-callout-blue {
  background: #eef6ff;
  border-left: 4px solid #4a8ed4;
  padding: 12px 16px;
  margin: 1.2em 0;
  border-radius: 0 6px 6px 0;
}
.yn-callout-blue p { margin: 0; font-size: 14.5px; color: #1f4e7a; }

.yn-subsidy-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 1em 0 1.2em !important;
  background: #f5faff;
  border-radius: 8px;
  padding: 16px 18px !important;
}
.yn-subsidy-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed #cfdfee;
  font-size: 14.5px;
  line-height: 1.85;
}
.yn-subsidy-item:last-child { border-bottom: none; }
.yn-subsidy-item__check {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  background: #4a8ed4;
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;
}
.yn-subsidy-item__title { display: block; color: #1f4e7a; margin-bottom: 2px; }
.yn-subsidy-item__desc { display: block; color: #444; }

/* 悪徳業者の手口カード */
.yane-prose mark.mark-orange { background: #ffe9c8; padding: 0 2px; }

.yn-scams {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 1.2em 0 1.5em;
}
.yn-scam {
  background: #fff8f0;
  border: 1px solid #f5d9b8;
  border-radius: 8px;
  padding: 16px 20px;
}
.yn-scam h3 {
  margin: 0 0 10px;
  font-size: 17px;
  color: #c33;
  border-left: none;
  padding-left: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.5;
}
.yn-scam__num {
  display: inline-block;
  font-size: 22px;
  font-weight: 800;
  color: #d4631c;
  flex: 0 0 auto;
}
.yn-scam p {
  margin: 0 0 .8em;
  font-size: 14.5px;
  line-height: 1.85;
}
.yn-scam p:last-child { margin-bottom: 0; }

/* 一括見積もりフォームセクション(プラグイン側のデザインに任せる) */
.yn-quote-embed { /* ショートコード側のスタイルが効くようコンテナのみ */ }

.yane-placeholder {
  background: #fff8e1;
  border: 2px dashed #f0b400;
  color: #8a6d00;
  padding: 24px;
  text-align: center;
  border-radius: 8px;
}
.yane-placeholder p { margin: 0; font-size: 14px; }

/* ===== Ranking Cards (元エリアページ準拠の配置) ===== */
.yn-ranking {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.yn-card {
  position: relative;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 16px 18px;
  transition: box-shadow .15s, transform .15s;
}
.yn-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.06); transform: translateY(-1px); }

/* 有料/上位掲載枠(type1, type2) - 上が黄色、下が白 */
.yn-card--premium {
  background: linear-gradient(to bottom, #fff5c8 0%, #ffffff 70%);
  border-color: #f0c040;
  border-width: 2px;
}
.yn-card--type1 {
  border-color: #d4a017;
  box-shadow: 0 2px 8px rgba(212, 160, 23, .15);
}
.yn-card__pr {
  position: absolute;
  top: 10px;
  right: 12px;
  background: #d4a017;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: .08em;
  z-index: 1;
}
.yn-card--type2 .yn-card__pr { background: #b8860b; }

/* Head: ランク + 会社名 */
.yn-card__head {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 14px;
}
.yn-card__rank {
  flex: 0 0 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #888;
  color: #fff;
  text-align: center;
  padding: 8px 4px;
  border-radius: 8px;
  line-height: 1.1;
}
.yn-card__rank--1 { background: linear-gradient(135deg, #d4a017, #f0b400); }
.yn-card__rank--2 { background: linear-gradient(135deg, #999, #c0c0c0); }
.yn-card__rank--3 { background: linear-gradient(135deg, #8a5a2b, #c08240); }
.yn-card__rankLabel { font-size: 10px; opacity: .95; letter-spacing: .02em; }
.yn-card__rankNumber {
  font-size: 20px;
  font-weight: 800;
  margin-top: 2px;
  font-family: Georgia, "Yu Mincho", serif;
}
.yn-card__titleArea { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.yn-card__title {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.4;
}
.yn-card__title a { color: #1a73c0; text-decoration: none; }
.yn-card__title a:hover { color: #c33; text-decoration: underline; }
.yn-card__industry { font-size: 13px; color: #888; }

/* Main: 画像(横長) + 詳細 */
.yn-card__main {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  margin-bottom: 12px;
}
.yn-card__main--noimage { grid-template-columns: 1fr; }
.yn-card__media img,
.yn-card__noimage {
  width: 320px;
  height: 230px;
  object-fit: cover;
  border-radius: 6px;
  background: #f0f0f0;
}
.yn-card__noimage {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 12px;
}

.yn-card__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* ボタンは特徴のすぐ下に配置(PC) */
.yn-card__info .yn-card__actions {
  margin-top: 10px;
}
/* 画像なしカード: 紹介文の下に置くボタン(PC・右寄せ) */
.yn-card__actions--belowintro {
  margin-top: 12px;
  justify-content: flex-end;
}
/* PCではカード最下部のボタンを非表示(情報カラム内に表示) */
.yn-card .yn-card__actions--bottom { display: none; }
.yn-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.yn-stars { display: inline-flex; gap: 1px; }
.yn-star {
  font-size: 15px;
  line-height: 1;
  color: #f0b400;
  letter-spacing: -1px;
}
.yn-star.is-empty { color: #ddd; }
.yn-star.is-half { position: relative; color: #ddd; }
.yn-star.is-half::before {
  content: '★';
  position: absolute;
  left: 0; top: 0;
  width: 50%;
  overflow: hidden;
  color: #f0b400;
}
.yn-card__score {
  font-size: 13px;
  color: #555;
  font-weight: 700;
}
.yn-card__reviewCount {
  font-size: 12px;
  color: #1a73c0;
  text-decoration: underline;
  font-weight: 600;
}
.yn-card__reviewCount:hover { color: #c33; }

.yn-card__sub {
  color: #c33;
  font-size: 15px;
  font-weight: 700;
  margin: 4px 0 8px;
  line-height: 1.5;
}

.yn-card__meta {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13.5px;
  color: #555;
  line-height: 1.7;
}
.yn-card__meta li { display: flex; gap: 8px; padding: 2px 0; }
.yn-card__metaLabel {
  flex: 0 0 70px;
  font-weight: 700;
  color: #888;
}

.yn-card__intro {
  font-size: 14.5px;
  color: #333;
  margin: 8px 0 0;
  line-height: 1.85;
}
/* 店舗説明文の「もっと見る」アコーディオン(純CSS・チェックボックス方式・JS不使用)。
   PCは全文表示・ボタン非表示。SP(≤767px)でのみ3行に畳み、ラベルで開閉。 */
.yn-card__introChk { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.yn-card__introMore { display: none; }
.yn-card__introMore .is-less { display: none; }
@media (max-width: 767px) {
  .yn-card__introWrap { position: relative; }
  .yn-card__introWrap .yn-card__intro {
    position: relative;
    max-height: 5.55em; /* 約3行 (line-height 1.85 × 3) */
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .yn-card__introChk:checked ~ .yn-card__intro { max-height: 200em; }
  .yn-card__introWrap .yn-card__intro::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2.2em;
    background: linear-gradient(rgba(255,255,255,0), #fff);
    pointer-events: none;
  }
  .yn-card__introChk:checked ~ .yn-card__intro::after { opacity: 0; }
  .yn-card__introMore {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    color: #1a73c0;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    padding: 2px 0;
    user-select: none;
  }
  .yn-card__introMore::after { content: "▼"; font-size: 10px; }
  .yn-card__introChk:checked ~ .yn-card__introMore::after { content: "▲"; }
  .yn-card__introChk:checked ~ .yn-card__introMore .is-more { display: none; }
  .yn-card__introChk:checked ~ .yn-card__introMore .is-less { display: inline; }
}

.yn-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.yn-card__tag {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 3px;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid;
}
.yn-card__tag.is-active {
  background: #fff0e8;
  color: #c33;
  border-color: #f5c8b8;
}
.yn-card__tag.is-inactive {
  background: #f2f2f2;
  color: #b0b0b0;
  border-color: #e0e0e0;
}

/* Reviews block */
.yn-card__reviews {
  margin: 12px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.yn-card__reviewsTitle {
  font-size: 13px;
  color: #888;
  margin: 0 0 4px;
  font-weight: 700;
  letter-spacing: .03em;
}
.yn-review {
  margin: 0;
  padding: 10px 12px;
  font-style: normal;
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 6px;
}
.yn-review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.yn-review__left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.yn-review__author {
  font-size: 13px;
  font-weight: 700;
  color: #444;
}
.yn-review__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #f0b400;
  line-height: 1;
}
.yn-review__rating .yn-review__star {
  line-height: 1;
  display: inline-block;
}
.yn-review__score {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #555;
  line-height: 1;
  margin-left: 2px;
  position: relative;
  top: 2px;
}
.yn-review__date {
  font-size: 12.5px;
  color: #888;
}
.yn-review__star {
  font-size: 15px;
  line-height: 1;
  letter-spacing: -1px;
}
.yn-review__star.is-empty { color: #ddd; }
.yn-review__star.is-half {
  position: relative;
  color: #ddd;
}
.yn-review__star.is-half::before {
  content: '★';
  position: absolute;
  left: 0;
  width: 50%;
  overflow: hidden;
  color: #f0b400;
}
.yn-review__score {
  font-size: 11px;
  color: #555;
  margin-left: 4px;
  font-weight: 700;
}
.yn-review__text {
  font-size: 14px;
  color: #333;
  line-height: 1.8;
  margin: 4px 0 0;
}
.yn-card__reviewsFoot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.yn-card__reviewsMore {
  margin-left: auto; /* 常に右寄せ(編集ボタンの有無に関わらず) */
  font-size: 13px;
  font-weight: 400;
  color: #1a73c0;
  text-decoration: underline;
}
.yn-card__reviewsMore:hover { color: #c33; }
.yn-card__editBtn {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #555;
  padding: 3px 12px;
  border-radius: 4px;
  text-decoration: none;
}
.yn-card__editBtn:hover { background: #333; }

.yn-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.yn-card__btn {
  display: inline-block;
  padding: 7px 20px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid;
}
.yn-card__btn--detail   { background: #fff; color: #555; border-color: #ccc; }
.yn-card__btn--detail:hover { background: #f5f5f5; }
.yn-card__btn--quote {
  background: #f08000;
  color: #fff;
  border-color: #f08000;
  box-shadow: 0 2px 0 #c66c00;
}
.yn-card__btn--quote:hover { background: #e07500; border-color: #e07500; color: #fff; text-decoration: none; }
.yn-card__btn--official { background: #c33; color: #fff; border-color: #c33; }
.yn-card__btn--official:hover { opacity: .88; color: #fff; }

/* アンカージャンプ時にスティッキーヘッダー(64px程度)で隠れないようスクロールオフセット */
#quote-form { scroll-margin-top: 90px; }

.yane-section__empty {
  background: #f7f7f7;
  border: 1px dashed #ccc;
  color: #888;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
  margin: 0;
}

/* SP */
@media (max-width: 700px) {
  .yn-card { padding: 12px; }
  .yn-card__head { gap: 10px; margin-bottom: 12px; }
  .yn-card__rank { flex-basis: 56px; padding: 6px 2px; }
  .yn-card__rankNumber { font-size: 17px; }
  .yn-card__title { font-size: 16px; }
  .yn-card__main {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .yn-card__media img,
  .yn-card__noimage {
    width: 100%;
    height: 180px;
  }
  .yn-card__metaLabel { flex-basis: 64px; }
  /* スマホ: ボタンは従来どおりカード最下部に表示 */
  .yn-card .yn-card__actions--inline { display: none; }
  .yn-card .yn-card__actions--bottom { display: flex; }
}

/* ===== Footer ===== */
.yn-footer {
  background: #474747;
  color: #fff;
  font-family: Arial, sans-serif;
  margin-top: 40px;
}
.yn-footer__widget {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 24px;
}
.yn-footer__topMenu {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.yn-footer__topMenuItem {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.yn-footer__topMenuItem:hover { color: #fff; text-decoration: underline; }

.yn-footer__region { margin-bottom: 26px; }
.yn-footer__regionTitle {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.3);
  color: #fff;
}
.yn-footer__regionLinks {
  display: flex;
  flex-wrap: wrap;
}
.yn-footer__prefLink {
  width: 25%;
  margin-bottom: 10px;
  padding-right: 14px;
  box-sizing: border-box;
  font-size: 14px;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  transition: color .2s;
}
.yn-footer__prefLink:hover { color: #fff; text-decoration: underline; }

.yn-footer__foot {
  background: #3a3a3a;
  padding: 18px 24px;
  text-align: center;
}
.yn-footer__bottomNav {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
}
.yn-footer__bottomNav a {
  color: #ddd;
  font-size: 12px;
  text-decoration: none;
}
.yn-footer__bottomNav a:hover { color: #fff; text-decoration: underline; }
.yn-footer__copyright {
  margin: 0;
  font-size: 12px;
  color: #aaa;
}

/* ===== SP調整 ===== */
@media (max-width: 992px) {
  .yn-footer__prefLink { width: 33.33%; }
}
@media (max-width: 850px) {
  .yn-footer__prefLink { width: 50%; }
}
@media (max-width: 900px) {
  .yane-area-grid { grid-template-columns: 1fr; gap: 24px; }
  /* PCで grid-column を 1/2 に固定していたので、1カラム時はリセットする */
  .yane-area-main { grid-column: auto; grid-row: auto; }
  .yn-sidebar     { grid-column: auto; grid-row: auto; position: static; max-height: none; overflow: visible; }
  .yn-search { margin-top: 0; }
}
/* スマホ版(768px以下)ではサイドバー(検索ボックス)を非表示 */
@media (max-width: 768px) {
  .yn-sidebar { display: none; }
}
@media (max-width: 600px) {
  .yn-prbar__inner { padding: 2px 14px; }
  .yn-header__inner { padding: 10px 12px; gap: 8px; }
  .yn-header__logoLink img { max-height: 30px; max-width: 150px; }
  .yn-gnav__list { gap: 12px; }
  .yn-gnav__ttl { font-size: 12px; }
  .yn-gnav__desc { display: none; }
  .yane-area-wrap { padding: 0 12px 40px; }
  .yane-hero { padding: 32px 0; }
  .yane-hero .yane-area__container { padding: 0 12px; }
  /* スマホ: タイトルは全幅、導入文の右側に正方形サムネイルを配置 */
  .yane-hero__container--has-image {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
  }
  /* body を解除し、子要素を直接 flex アイテムにして折り返しで配置する */
  .yane-hero__container--has-image .yane-hero__body { display: contents; }
  .yane-hero__container--has-image .yane-hero__badge,
  .yane-hero__container--has-image .yane-hero__title {
    flex: 0 0 100%;
    width: 100%;
  }
  .yane-hero__container--has-image .yane-hero__lead {
    flex: 1 1 0;
    min-width: 0;
  }
  .yane-hero__figure { flex: 0 0 120px; width: 120px; }
  .yane-hero__figure img { height: 120px; }
  .yn-footer__widget { padding: 24px 16px; }
  .yn-footer__topMenu { gap: 12px; }
  .yn-footer__prefLink { width: 100%; padding-right: 0; }
}