@charset "UTF-8";
/* ==========================================================
   logos セクション（冬の奥飛騨を楽しむ アクティビティはこちら）
   使うのは stay.html だけ（2026-09-10 にTOPから撤去・stayへ集約）。

   2026-09-21 作り替え（横山さん依頼 9/17 冬物語ルーム「奥飛騨冬のアクティビティ ロゴとタイトルを配置」
   ＋構成イメージ画像）: カンプ由来のプレースホルダー4枠（同じロゴ4つ・269×91の絶対配置）を廃止し、
   実アクティビティ3件のカード（ロゴ＋種類＋名称＋一言＋公式サイトへ）に置き換えた。
   - 見出し・英語筆記体の書体/級数/色は従来値のまま（Zen Old Mincho 42px 青／Pinyon Script 80px 銀）
   - セクションは高さ固定の絶対配置をやめて通常フロー（中身の行数が変わっても崩れない）
   - カードの罫は同ページ「４つの冬」のセルと同じ濃さ（インク32%）・角丸なし・影なし
   - ロゴ画像は 440×208（CSS 220×104 の2倍）の白地に中央配置して書き出し済み
     （生成: projects/2026-07_奥飛騨_冬物語HP/work/build_20260921_assets.py）
   旧版は _review/backup_20260921_local/ と サーバー ~/_futsu_backups/ に退避
   ========================================================== */

.logos {
  position: relative;
  width: var(--canvas);
  padding: 44px 0 72px;   /* 頭上44（英語筆記体の分）・下白72 */
  background: var(--color-white);
  overflow: hidden;
}

/* ---- 見出し裏の英語筆記体（2026-08-18 市岡さん指示で追加） ----
   Pinyon Script の実テキスト。色は concept の筆記体と同じ銀 #ebecee。見出しの青が上に載る */
.logos__script {
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  margin: 0;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 80px;
  line-height: 1;
  text-align: center;
  color: #ebecee;
  white-space: nowrap;
  pointer-events: none;
}

.logos__heading {
  position: relative;   /* 筆記体より手前 */
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 42px;
  line-height: 1.35;    /* 2行組み（2026-08-28 市岡さん指示） */
  letter-spacing: 0.01em;
  text-indent: 0.01em;  /* letter-spacing ぶんの中心ズレを戻す */
  text-align: center;
  color: var(--color-blue);
}

/* ---- 導入文（構成イメージの「導入文」枠） ---- */
.logos__lead {
  width: var(--l-col);
  margin: 30px auto 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 17px;
  line-height: 32px;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--color-ink);
}

/* ---- カード3枚（PC: 300px×3・間30 = 960 = 本文カラム幅） ---- */
.logos__list {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  gap: 30px;
  justify-content: center;
  margin: 44px auto 0;
  list-style: none;
}

.logos__item {
  border: 1px solid rgba(55, 57, 60, 0.32);
  background: var(--color-white);
}

.logos__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.logos__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  border-bottom: 1px solid rgba(55, 57, 60, 0.18);
}

.logos__img {
  display: block;
  width: 220px;
  height: 104px;
}

.logos__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 24px 24px;
}

.logos__type {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--color-blue);
}

.logos__name {
  margin-top: 12px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--color-ink);
}

.logos__desc {
  margin-top: 12px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  letter-spacing: 0.02em;
  color: rgba(55, 57, 60, 0.85);
}

/* 「公式サイトを見る →」: 矢印は base.css の --arrow（正本）をマスク抜き */
.logos__more {
  position: relative;
  align-self: flex-start;
  margin-top: auto;           /* 本文の長短に関わらずカード下端に揃える */
  padding: 16px 24px 2px 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--color-blue);
}
.logos__more::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  width: 14px;
  height: 11px;
  background: currentColor;
  -webkit-mask: var(--arrow) center / 100% 100% no-repeat;
  mask: var(--arrow) center / 100% 100% no-repeat;
  transition: transform 0.3s ease;
}
.logos__link:hover .logos__more::after,
.logos__link:focus-visible .logos__more::after { transform: translateX(4px); }
.logos__link:hover .logos__name,
.logos__link:focus-visible .logos__name { color: var(--color-blue); }
.logos__link:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }

/* ==========================================================
   SP（設計幅393px）: カードは縦1列（本文カラム341px）
   ========================================================== */
@media (max-width: 767px) {

  .logos { padding: 48px 0 50px; }

  .logos__script {
    top: 30px;
    font-size: 44px;
  }

  .logos__heading {
    font-size: 26px;
    line-height: 1.35;
    letter-spacing: 0.01em;
    text-indent: 0.01em;
  }

  .logos__lead {
    margin-top: 20px;
    font-size: 15px;
    line-height: 27px;
    text-align: left;
  }

  .logos__list {
    grid-template-columns: var(--l-col);
    gap: 16px;
    margin-top: 28px;
  }

  .logos__logo { height: 120px; }

  .logos__img {
    width: 190px;
    height: 90px;
  }

  .logos__body { padding: 18px 20px 20px; }

  .logos__name { font-size: 18px; }

  .logos__desc { font-size: 15px; line-height: 26px; }
}

/* ==========================================================
   【2026-10-01 横山さん指示（冬物語ルーム・SPのスクリーンショット付き）・市岡さん選択「PCにも入れる」】
   「テキスト部分の背景を青にして、文字を白にしてください。」
   カード下半分（.logos__body＝種類・名称・一言・公式サイトを見る）を基調青 #0159b3 の面に、文字はすべて白。
   ロゴの段（白地）とカードの罫はそのまま。白文字×#0159b3 のコントラストは 6.9:1（4.5:1以上）。
   ホバー/フォーカスで名称を青にしていた表現は青地では消えるため、名称に下線を出す形に置き換える
   ========================================================== */
.logos__body { background: var(--color-blue); }
.logos__type,
.logos__name,
.logos__desc,
.logos__more { color: var(--color-white); }
.logos__link:hover .logos__name,
.logos__link:focus-visible .logos__name {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* ==========================================================
   【2026-10-10 監査】タッチ端末ではカードの :hover（矢印の移動・名称の下線）を効かせない
   10/9 のボタン方針（タッチでは変化なし）に合わせる。:focus-visible は従来どおり。戻す時はこのブロックを消す
   ========================================================== */
@media (hover: none) {
  .logos__link:hover .logos__more::after { transform: none; }
  .logos__link:hover .logos__name { text-decoration: none; }
}

/* ==========================================================
   【2026-10-16 横山さん（冬物語ルーム 10/16 9:05）「アクテビティエリア」】
   各アクティビティの名前の直下にエリアを1行（文言は原文どおり: 平湯温泉スキー場＝平湯・上高地エリア／
   新穂高ロープウェイ＝新穂高エリア／RAICHO＝平湯・新穂高・上高地エリア）。種類のラベルと同じ 14px・青地に白。
   戻す時はこのブロックと stay.html の .logos__area を消す
   ========================================================== */
.logos__area {
  margin-top: 6px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--color-white);
}

/* ==========================================================
   【2026-10-17 市岡さん「文字だけだとわかりづらいので枠つけたりしてカテゴリっぽく」→ A 案（白枠＋ピン）を選択】
   上の【2026-10-16】のエリア1行を、細い白枠の四角（バナーの「奥飛騨冬物語を見る →」と同じ細い白罫）＋場所のピン（Lucide map-pin・
   currentColor のマスク）のタグにする。文言は変えない。幅は文字なり（左寄せ）・PC/SP とも1行（実測 PC 128〜230px／SP 121〜216px）。
   白枠 rgba(255,255,255,.75)×地 #0159b3、文字は白（6.9:1）。戻す時はこのブロックを消す（10/16 の文字だけに戻る）
   ========================================================== */
.logos__area {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 10px 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--color-white);
}
.logos__area::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}