.page-header{color:var(--ink);border-color:var(--line)}
.page-header .nav-cta{border-color:var(--ink)}
.hero{background-image:url('../images/hero-garage-westcoast.jpg')}
.story-image{background-image:url('../images/garage-story-westcoast.jpg')}
.photo-placeholder{background:url('../images/garage-detail.jpg') center/cover;color:#fff;text-shadow:0 1px 10px #000}
@media(max-width:700px){.page-header nav{background:var(--paper)}.page-header .menu-button{color:var(--ink)}}

/* West Coast garage direction: sun-faded paper, ink, oxidized red and muted sea blue. */
:root{--ink:#18242b;--paper:#f2e9d8;--sand:#ded0b7;--mist:#c8d2cd;--accent:#a94a34;--line:#18242b29}
body{background-color:var(--paper);background-image:radial-gradient(#18242b0b .7px,transparent .8px),linear-gradient(115deg,#f8f0df 0%,var(--paper) 52%,#e9dfca 100%);background-size:7px 7px,auto}
.intro,.contact-band,.page-stock{background:transparent}.stock{background:#ded0b7}.choice{background:#c8d2cd}.page-hero{background:linear-gradient(120deg,#d5e0da 0%,#ded0b7 55%,#f2e9d8 100%);border-bottom:1px solid var(--line)}
.hero-shade{background:linear-gradient(90deg,#18242bd6 0%,#18242b78 47%,#18242b16 100%),linear-gradient(0deg,#18242b6b,transparent 55%)}
.brand-mark{border-radius:1px}.nav-cta{background:#f2e9d81a}.page-header .nav-cta{background:transparent}.button{border-radius:1px;text-transform:none}.primary{background:#f2e9d8;color:var(--ink);box-shadow:4px 4px 0 #18242b2b}.dark{background:var(--ink);box-shadow:4px 4px 0 #a94a3440}.ghost{border-color:#f2e9d8;color:#fff}.stock-card,.contact-form{box-shadow:7px 7px 0 #18242b17}.stock-info{background:#f8f0df}.stock-image span{background:#a94a34}.choice-grid article{border-color:#18242b38}.eyebrow{color:#a94a34}.story-banner{background:#18242b}.story-copy{background:linear-gradient(145deg,#18242b 0%,#273b42 100%)}
.contact-layout{align-items:start}.contact-aside{padding:35px;background:#d5e0da;border-top:3px solid #6e9fba}.contact-options{display:grid;gap:14px;margin-top:28px}.contact-option{display:flex;gap:15px;align-items:center;padding:17px 18px;background:#f8f0df;border:1px solid var(--line);transition:transform .2s ease,box-shadow .2s ease}.contact-option:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 #18242b33}.contact-option-mark{display:grid;place-items:center;width:38px;height:38px;background:var(--ink);color:#f2e9d8;font:600 10px 'DM Sans',sans-serif;letter-spacing:.08em}.contact-option.line .contact-option-mark{background:#6f765b}.contact-option strong{display:block;font-size:13px}.contact-option small{display:block;margin-top:2px;color:#526066;font-size:10px;letter-spacing:.04em}.contact-form{background:#ded0b7;border-top:3px solid #a94a34}.contact-form h2{margin-bottom:10px}.contact-form .form-note{margin-bottom:25px}.line-card{background:#d5e0da;border-left:3px solid #6f765b}.line-card .button{margin-right:10px}
.contact-band .button.primary{background:var(--ink);color:#f2e9d8}.contact-band .text-button{border-color:#6f765b;color:#445b4c;font-weight:700}.site-line-link{display:inline-flex;align-items:center;gap:9px;font:600 11px 'DM Sans',sans-serif;letter-spacing:.11em;color:#d5e0da}.site-line-link::before{content:'LINE';display:grid;place-items:center;width:30px;height:22px;background:#6f765b;color:#fff;font-size:8px;letter-spacing:.03em}
.service-intro{margin-bottom:76px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}.service-card{min-height:250px;padding:27px 24px;background:#f8f0df;border-top:3px solid #6e9fba;box-shadow:5px 5px 0 #18242b17}.service-card:nth-child(2){border-top-color:#a94a34}.service-card:nth-child(3){border-top-color:#6f765b}.service-card span{color:#a94a34;font:600 11px 'DM Sans',sans-serif;letter-spacing:.15em}.service-card h3{margin:25px 0 12px!important;font-size:20px!important;line-height:1.55}.service-card p{margin:0;font-size:13px!important;line-height:1.9}.service-copy{max-width:760px}.service-contact-card{margin-top:55px}.service-contact-card .button{margin:0 10px 10px 0}
.video-card{margin:44px 0 50px;padding:30px;background:#d5e0da;border-top:3px solid #6e9fba}.video-card h2{margin-bottom:19px}.video-frame{position:relative;aspect-ratio:16/9;background:#18242b}.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.video-card p:last-child{margin:18px 0 0}
@media(max-width:700px){body{background-size:6px 6px,auto}.contact-aside{padding:25px}.contact-option{padding:15px}.mobile-cta a:last-child{background:#6f765b;color:#fff}.line-card .button{display:flex;margin:12px 0 0}}
@media(max-width:700px){.service-intro{margin-bottom:55px}.service-grid{grid-template-columns:1fr;gap:12px}.service-card{min-height:0;padding:24px 20px}.service-card h3{margin:16px 0 8px!important}.service-contact-card .button{display:flex;margin:12px 0 0}}

/* ヒーローの見出しを、狭い画面でも必ず2行に収める。
   「日常が少し変わる。」が9文字。字送り込みで 9.36em 要る。
   左右の余白 22px×2 を引いた幅に収まるよう、画面幅に連動させる。
   （固定40pxだと iPhone で「る」だけ3行目に落ちていた） */
@media(max-width:700px){
  .hero h1{font-size:clamp(25px,8.8vw,44px)}
}

/* CONTACT の「LINEで相談する」をボタン形式に */
.contact-band .button.line{background:#6f765b;color:#fff;box-shadow:4px 4px 0 #18242b2b}

/* 車両写真のスライド */
.gallery{position:relative;margin:0 0 6px}
.gallery-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-track:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.gallery-track>figure{flex:0 0 100%;margin:0;scroll-snap-align:center}
.gallery-track img{display:block;width:100%;height:min(63vw,600px);object-fit:cover;background:var(--sand)}
.gallery-arrow{position:absolute;top:calc(min(63vw,600px)/2);transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;border:0;background:#18242bbf;color:#fff;font-size:26px;line-height:1;cursor:pointer;transition:background .2s}
.gallery-arrow:hover{background:#18242b}
.gallery-arrow.prev{left:0}
.gallery-arrow.next{right:0}
.gallery-count{position:absolute;right:10px;top:calc(min(63vw,600px) - 34px);margin:0;padding:4px 10px;background:#18242bbf;color:#fff;font:11px 'DM Sans',sans-serif;letter-spacing:.08em}
.gallery-thumbs{display:flex;gap:7px;overflow-x:auto;padding-top:8px;scrollbar-width:thin}
.gallery-thumbs button{flex:0 0 84px;padding:0;border:1px solid transparent;background:none;cursor:pointer;opacity:.55;transition:opacity .2s,border-color .2s}
.gallery-thumbs button.on{opacity:1;border-color:var(--ink)}
.gallery-thumbs img{display:block;width:100%;height:60px;object-fit:cover}
@media(max-width:700px){
  .gallery-track img{height:72vw}
  .gallery-arrow{display:none}
  .gallery-count{top:calc(72vw - 32px)}
  .gallery-thumbs button{flex:0 0 68px}
  .gallery-thumbs img{height:50px}
}

/* 買う／売る の二択 */
.paths{background:#d5e0da}
.paths-head{margin-bottom:46px}
.paths-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.path{padding:38px 34px 34px;background:#f8f0df;border-top:3px solid var(--accent);box-shadow:6px 6px 0 #18242b17}
.path.sell{border-top-color:#6f765b}
.path-label{margin:0;font:600 11px 'DM Sans',sans-serif;letter-spacing:.22em;color:var(--accent)}
.path.sell .path-label{color:#5c6350}
.path h3{margin:16px 0 14px;font-size:26px;font-weight:500;line-height:1.45}
.path>p{margin:0 0 26px;font-size:13px}
.path-actions{display:flex;flex-wrap:wrap;gap:10px}
.button.outline{background:transparent;border-color:var(--ink);color:var(--ink)}
@media(max-width:700px){
  .paths-head{margin-bottom:30px}
  .paths-grid{grid-template-columns:1fr;gap:14px}
  .path{padding:28px 22px 26px}
  .path h3{font-size:22px}
  .path-actions .button{flex:1 1 100%}
}

/* 車両一覧の段見出し */
.stock-band{margin:0 0 18px;padding-bottom:10px;border-bottom:2px solid var(--ink);font:600 13px 'DM Sans',sans-serif;letter-spacing:.14em}
.stock-band.own{margin-top:56px;border-bottom-color:#6f765b}
.page-stock h2{margin:0 0 18px;padding-bottom:10px;border-bottom:2px solid var(--ink);font-size:20px;letter-spacing:.06em}
#own-stock-title{border-bottom-color:#6f765b}

/* タグ */
.card-tags,.bike-tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0}
.card-tags span,.bike-tags span{display:inline-block;padding:4px 10px;background:#18242b0f;border:1px solid var(--line);font-size:11px;letter-spacing:.04em;color:#3b4a52}
.bike-tags{margin:0 0 30px}

/* 段見出しの小見出し（YAHOO! AUCTIONS / WEB ONLY） */
.stock-band em,.page-stock h2 em{display:block;margin-bottom:6px;font:600 10px 'DM Sans',sans-serif;font-style:normal;letter-spacing:.22em;color:var(--accent)}
.stock-band.own em,#own-stock-title em{color:#5c6350}

/* 携帯でも、最初から本物の写真を出す（旧AI画像 hero-mobile.png を使わない） */
@media(max-width:700px){
  .hero{background-image:url('../images/hero-garage-westcoast.jpg')}
}
/* STORYページの写真も既定で本物にする */
.photo-placeholder{background:url('../images/garage-detail.jpg') center/cover}

/* 見出しに添える一行 */
.hero-sub{margin:18px 0 0;font-size:14px;letter-spacing:.06em;opacity:.8}
.hero-sub.light{color:#f7f4ed}
.page-hero .hero-sub{max-width:650px}

/* 売約済み（SOLD）。赤枠に赤文字、背景は透ける。 */
.stock-card.sold .stock-image,.detail-image.sold,.gallery.sold{position:relative}
.stock-card.sold .stock-image::after,.detail-image.sold::after{content:'';position:absolute;inset:0;background:#18242b59}
.sold-tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);z-index:3;
  padding:10px 30px;border:5px solid #e0301f;color:#e0301f;background:transparent;
  font:800 34px/1 'DM Sans',sans-serif;letter-spacing:.24em;text-indent:.24em;pointer-events:none}
.sold-tag.big{padding:16px 50px;border-width:7px;font-size:58px}
.stock-card.sold .stock-info b{color:#7b6a5c}
@media(max-width:700px){.sold-tag{font-size:24px;padding:8px 22px;border-width:4px}.sold-tag.big{font-size:34px;padding:12px 32px;border-width:5px}}

/* よくあるご質問 */
.faq-list{max-width:820px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;font-size:15px;font-weight:700;line-height:1.7}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';position:absolute;right:8px;top:22px;font:400 26px/1 'DM Sans',sans-serif;color:var(--accent)}
.faq-item[open] summary::after{content:'−'}
.faq-item p{margin:0 0 26px;font-size:14px;color:#3f4b52}
@media(max-width:700px){.faq-item summary{font-size:14px;padding:20px 36px 20px 0}.faq-item p{font-size:13px}}

/* 見出し帯に写真を当てたとき */
.page-hero.has-photo{background-size:cover;background-position:center;color:#f7f4ed;border-bottom:0}
.page-hero.has-photo .breadcrumbs,.page-hero.has-photo .breadcrumbs a{color:#f7f4edb3}
.page-hero.has-photo .eyebrow{color:#e0b3a5}
.page-hero.has-photo h1{color:#fff}
.page-hero.has-photo p:not(.eyebrow):not(.breadcrumbs){color:#f7f4edd9}

/* スライドの上にSOLDを出すときの暗幕 */
.gallery.sold .gallery-track::after{content:'';position:absolute;inset:0;background:#18242b59;pointer-events:none;z-index:2}
.gallery.sold .gallery-track{position:relative}
#own-parts-title em{color:#5c6350}
.letter-sign{margin-top:36px;font-size:14px}

/* ロゴの印は3文字（AAS）。38px / 34px の枠に収まるよう字を詰める */
.brand-mark{font-size:13px;letter-spacing:.02em}
@media(max-width:700px){.brand-mark{font-size:12px}}