/* ==================================================================
   ウイングナカヤマの思い（2026-09-20 仮）
   - .welcome : トップの「思い」のセクション（ABOUT の下、SERVICE の前）
   - .cases   : トップの制作事例（WORKS を小さくしたもの。NEWS の下）
   - .omoi-*  : 「ウイングナカヤマの思い」のページ（/omoi/）
   人の写真はカラーで出す（白黒だと冷たく見えるため）。色・書体は既存の規範の中だけ。
================================================================== */

/* ---------- トップ：思い ---------- */
.welcome__body{display:flex;align-items:center;column-gap:5vw;width:82%;margin:90px 0 0 9%}
.welcome__img{flex:0 0 54%;aspect-ratio:3/2;overflow:hidden;background:var(--ph)}
.welcome__img img{width:100%;height:100%;object-fit:cover}
.welcome__text{flex:1 1 auto;min-width:0}
.welcome__title{font-family:var(--jp);font-weight:900;font-size:clamp(24px,2.5vw,36px);line-height:1.5;letter-spacing:.02em;word-break:keep-all;overflow-wrap:anywhere}
.welcome__desc{margin-top:26px;font-family:var(--jp);font-size:15px;line-height:2.3;letter-spacing:.03em}
.welcome__text .more{margin-top:34px}

/* ---------- トップ：うちの仕事 ---------- */
.jobs__inner{margin-top:70px}
.jobs__lead{font-family:var(--jp);font-size:15px;line-height:2.1;letter-spacing:.03em}
.jobs .data{margin:36px 0 0}
.jobs .more{margin-top:40px}

/* ---------- トップ：制作事例（小さく） ---------- */
.cases__head{display:flex;align-items:flex-end;justify-content:space-between;column-gap:40px;flex-wrap:wrap;row-gap:18px}
.cases__eng{font-family:var(--cond);font-weight:500;font-size:15px;letter-spacing:.12em;color:var(--cat);text-transform:uppercase}
.cases__title{margin-top:4px;font-family:var(--jp);font-weight:900;font-size:32px;line-height:1.4}
.cases__lead{margin-top:12px;font-family:var(--jp);font-size:14px;line-height:2}
.cases__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:28px;row-gap:36px;margin-top:44px}
.cases__list a{display:block}
.cases__img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--ph)}
.cases__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e-slide)}
.cases__list a:hover .cases__img img{transform:scale(1.04)}
.cases__name{display:block;margin-top:14px;font-family:var(--jp);font-weight:700;font-size:15px;line-height:1.5}
.cases__note{display:block;margin-top:4px;font-family:var(--jp);font-size:13px;line-height:1.8;color:var(--cat)}

/* ---------- ページ：ウイングナカヤマの思い ---------- */
/* 最初の画面：左に引きの写真、右に見出し。写真は大きくしすぎず、ヘッダー（ロゴ）の下から始める（被せない）。
   ヘッダーは高さ0なので、ここで margin を使うとヘッダーごと押し下がる（margin の相殺）。padding で下げる */
.omoi-fv{position:relative;display:grid;grid-template-columns:minmax(0,56%) minmax(0,1fr);column-gap:5vw;padding-top:172px}
.omoi-fv__img{grid-column:1;grid-row:1;height:min(60vh,580px);min-height:380px;overflow:hidden;background:var(--ph)}
.omoi-fv__img img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.omoi-fv__text{grid-column:2;grid-row:1;align-self:end;padding-right:9%}
.omoi-fv__title{font-family:var(--jp);font-weight:700;font-size:15px;letter-spacing:.14em;color:var(--cat)}
.omoi-fv__catch{margin-top:14px;font-family:var(--jp);font-weight:900;font-size:clamp(28px,3vw,46px);line-height:1.45;letter-spacing:.02em;word-break:keep-all;overflow-wrap:anywhere}
.omoi-fv__sub{margin-top:18px;font-family:var(--jp);font-weight:700;font-size:14px;letter-spacing:.1em;color:var(--cat)}

/* このページ独自の部品は作らない。以下は既存の部品への小さな足し（会社概要・お問い合わせと同じ組みを使う） */
/* 質問と答えの行（会社データの行の組みのまま、左を質問にする） */
.data--qa dt{flex:0 0 330px;display:block;font-family:var(--jp);font-weight:700;font-size:17px;line-height:1.7}
.data--qa dd{font-weight:400;font-size:15px;line-height:2}

@media screen and (max-width:768px){
  .welcome__body{display:block;width:77%;margin:56px 0 0 11.5%}
  .welcome__img{margin-bottom:28px}
  .welcome__title{font-size:22px}
  .welcome__desc{margin-top:16px;font-size:14px;line-height:2.1}
  .welcome__text .more{margin-top:26px}

  .jobs__inner{margin-top:40px}
  .jobs__lead{font-size:14px;line-height:2}
  .cases__title{font-size:24px}
  .cases__lead{font-size:13px}
  .cases__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:26px;margin-top:30px}
  .cases__name{margin-top:10px;font-size:14px}
  .cases__note{font-size:12px;line-height:1.7}

  .omoi-fv{display:block;padding-top:120px}
  .omoi-fv__img{height:44vh;min-height:280px}
  .omoi-fv__text{width:83%;margin:36px auto 0}
  .omoi-fv__title{font-size:13px}
  .omoi-fv__catch{font-size:28px}
  .omoi-fv__sub{font-size:13px}
  .info__lead{font-size:14px;line-height:2}
  .data--qa dt{font-size:15px}
  .data--qa dd{font-size:14px}
}

/* ---------- 改稿で足した小さな調整（既存の部品の組みを流用） ---------- */
/* トップ：MVの直下のサブコピーと2つのリンク（jobs の導入文と more を流用） */
.mvlead{padding-top:56px}
.mvlead .more{margin:28px 40px 0 0}
/* 広い画面では赤い帯の左下に重ねる（帯と写真の重なりを動かさないため、高さ0で置く） */
@media (min-width:1025px){
  .mvlead{position:relative;height:0;padding:0;z-index:3}
  .mvlead .inner{position:absolute;left:56px;bottom:40px;width:32vw}
  .mvlead .jobs__lead{color:var(--white)}
  .mvlead .more::before{background:var(--white)}
  .mvlead .more a{color:var(--white)}
  .mvlead .more a::after{background:var(--white)}
}
/* NEWS の導入文 */
.news__intro{margin-top:44px}
/* WORKS の小見出しと、カードの「車両の詳細を見る」 */
.cases__sub{margin-top:14px;font-family:var(--jp);font-weight:700;font-size:17px;line-height:1.6}
.cases__sub + .cases__lead{margin-top:6px}
.cases__go{margin-top:8px;color:var(--black);font-weight:700;text-decoration:underline;text-underline-offset:4px}
/* 電話の下の受付時間、ACCESS の導入文 */
.jobs .more + .jobs__lead{margin-top:14px}
.access__info .jobs__lead{margin-bottom:14px}

@media screen and (max-width:768px){
  .mvlead{padding-top:36px}
  .mvlead .more{margin:20px 0 0}
  .news__intro{margin-top:28px}
  .cases__sub{font-size:15px}
}
.jobs{padding-bottom:70px}

/* ---------- 反映案：販売・修理の案内（横スライドをやめて一覧に）、お店・スタッフ、アクセスの写真 ---------- */
.service--list .service__intro{margin-top:70px}
.service--list .service__intro .jobs__lead{margin-top:18px;max-width:46em}
.service__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:3vw;margin-top:56px}
.service--list .service__card{flex:none;margin-right:0;padding-bottom:0}
.service--list .service__card .wipe{height:auto;aspect-ratio:3/2}
.service--list .service__cont{margin-top:28px}
.service--list .service__title{font-size:48px;line-height:58px}
.service--list .service__desc{width:100%}
.service__next{margin-top:56px}
.service--list{padding-bottom:70px}
.shop__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3vw;width:82%;margin:56px 0 0 9%}
.shop__pair>div{aspect-ratio:3/2}
.shop__pair img{width:100%;height:100%;object-fit:cover}
.access .sect__top{height:auto;min-height:193px}
/* 店構えの写真と地図を1段に並べる（地図の左右の端にそろえる） */
.access__media{display:grid;grid-template-columns:2fr 3fr;column-gap:2vw;width:calc(100% - 8.7vw);height:34vw;margin:80px 0 0 7vw}
.access__media .access__photo{height:100%;overflow:hidden}
.access__media .access__photo img{display:block;width:100%;height:100%;object-fit:cover}
.access__media .access__map{width:auto;height:100%;margin:0}
.mv__info p{font-size:16px;line-height:26px}

@media screen and (max-width:768px){
  .service--list .service__intro{margin-top:36px}
  .service__list{grid-template-columns:minmax(0,1fr);row-gap:44px;margin-top:36px}
  .service--list .service__title{font-size:40px;line-height:48px}
  .service__next{margin-top:36px}
  .shop__pair{grid-template-columns:minmax(0,1fr);row-gap:16px;width:77%;margin:32px 0 0 11.5%}
  .access__media{grid-template-columns:minmax(0,1fr);row-gap:16px;width:calc(100% - 8.2vw);height:auto;margin:64px auto 0}
  .access__media .access__photo{height:auto;aspect-ratio:3/2}
  .access__media .access__map{height:95vw}
  /* メインビジュアルの店の種類：縦書きの小さい文字をやめ、白地に横書き16pxで最初の画面に出す */
  .mv__info{writing-mode:horizontal-tb;left:0;bottom:13px;z-index:4}
  .mv__info p{margin-left:22px;padding:10px 14px 10px 12px;background:var(--white);font-size:16px;line-height:1.6;letter-spacing:.06em}
}
.cases{padding-bottom:60px}

/* 写真なしの組み：販売・修理の3列は見出しから始め、お店紹介は文字だけ */
.service--list .service__cont{margin-top:28px}
.service--list .service__card .wipe img{display:block}

/* 改稿(10/23)：ご来店についての電話、制作事例の末尾リンク */
.visit .access__tel{margin:24px 0 0;padding-left:0}
.visit .access__tel::before{content:none}
.visit__hours{margin-top:4px;font-family:var(--jp);font-weight:700;font-size:14px;letter-spacing:.06em}
.visit .more{margin-top:28px}
.cases__more{margin-top:44px}
@media screen and (max-width:768px){.cases__more{margin-top:30px}}
.staff{padding-bottom:70px}