/*
Theme Name: INFUSE CAR STORAGE
Theme URI: https://infuse.website/
Author: 株式会社INFUSE
Author URI: https://infuse.website/
Description: クラシックカー・ヒストリックカー専門保管サービス「INFUSE CAR STORAGE」の公式テーマ。
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: infuse-car-storage
*/

:root {
  --ink: #171714;
  --paper: #f4f1e9;
  --ivory: #e9e2d4;
  --muted: #77746c;
  --line: rgba(23, 23, 20, 0.18);
  --light-line: rgba(255, 255, 255, 0.18);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
p, h1, h2, h3, blockquote { margin: 0; }

.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: .8rem 1rem;
  background: white;
  color: black;
}
.skip-link:focus { top: 1rem; }

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 92px;
  padding: 0 4vw;
  border-bottom: 1px solid rgba(255,255,255,.18);
  color: white;
}

.brand {
  display: inline-flex;
  width: max-content;
  flex-direction: column;
  gap: .08rem;
  letter-spacing: .12em;
}
.brand-name { font-size: 1.3rem; font-weight: 700; line-height: 1; }
.brand-sub { font-size: .52rem; font-weight: 500; letter-spacing: .32em; }

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.3rem, 2.5vw, 3rem);
  font-size: .76rem;
  letter-spacing: .08em;
}

.desktop-nav a, .header-cta, .text-link, .footer-links a {
  transition: opacity 180ms ease;
}
.desktop-nav a:hover, .header-cta:hover, .text-link:hover, .footer-links a:hover { opacity: .6; }

.header-cta {
  justify-self: end;
  border-bottom: 1px solid currentColor;
  padding: .35rem 0;
  font-size: .75rem;
  letter-spacing: .14em;
}

.hero {
  position: relative;
  min-height: 820px;
  height: 100svh;
  overflow: hidden;
  background-color: #11110f;
  background-image: url("assets/infuse-hero.png");
  background-position: center;
  background-size: cover;
  color: white;
}

.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,8,7,.92) 0%, rgba(8,8,7,.65) 38%, rgba(8,8,7,.12) 72%), linear-gradient(0deg, rgba(7,7,6,.48), transparent 45%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  width: min(92vw, 1440px);
  height: 100%;
  margin: 0 auto;
  padding: 19vh 0 150px;
  flex-direction: column;
  justify-content: center;
}

.eyebrow {
  margin-bottom: 1.5rem;
  color: #776f64;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .27em;
}
.eyebrow.light { color: rgba(255,255,255,.62); }

.hero h1, .section h2, .location-band h3 {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  font-weight: 400;
}

.hero h1 {
  max-width: 860px;
  font-size: clamp(3rem, 5.6vw, 6.3rem);
  line-height: 1.25;
  letter-spacing: -.035em;
}
.hero h1 em { color: #cdb99d; font-style: normal; }

.hero-copy {
  margin-top: 2.2rem;
  color: rgba(255,255,255,.72);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  font-size: clamp(.95rem, 1.2vw, 1.15rem);
  line-height: 2;
}

.hero-actions { display: flex; align-items: center; gap: 2rem; margin-top: 2.7rem; }

.button {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  padding: .9rem 1.5rem;
  border: 1px solid transparent;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.button.primary { background: #eee8dc; color: #171714; }
.button.primary:hover, .ivory-button:hover { background: white; }
.text-link { display: inline-flex; gap: .9rem; font-size: .75rem; letter-spacing: .09em; }
.light-link { color: rgba(255,255,255,.72); }

.opening-panel {
  position: absolute;
  right: 4vw;
  bottom: 0;
  left: 4vw;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  border-top: 1px solid rgba(255,255,255,.22);
}

.opening-panel > div {
  display: flex;
  min-height: 104px;
  align-items: center;
  justify-content: space-between;
  padding: 1.3rem 3vw;
  border-right: 1px solid rgba(255,255,255,.18);
}
.opening-panel > div:first-child { padding-left: 0; }
.opening-panel > div:last-child { border-right: 0; }
.opening-panel span { color: rgba(255,255,255,.5); font-size: .58rem; letter-spacing: .17em; }
.opening-panel strong { font-family: "Yu Mincho", Georgia, serif; font-size: clamp(1.2rem,2vw,1.8rem); font-weight: 400; }
.image-note { position: absolute; right: 4vw; bottom: 112px; z-index: 3; color: rgba(255,255,255,.4); font-size: .58rem; }

.section { padding: 130px max(4vw, calc((100vw - 1440px) / 2)); }
.section-index {
  margin-bottom: 5rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line);
  color: #817c73;
  font-size: .62rem;
  letter-spacing: .22em;
}
.light-index { border-color: var(--light-line); color: rgba(255,255,255,.46); }
.manifesto { background: var(--paper); }

.manifesto-grid, .section-heading-row, .plan-grid, .faq-grid {
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
  gap: 10vw;
}

.section h2 { font-size: clamp(2.5rem,4.5vw,5rem); line-height: 1.36; letter-spacing: -.035em; }
.body-copy { padding-top: 2.8rem; }
.body-copy p, .section-heading-row > p, .plan-lead, .faq-grid > div:first-child > p:last-child {
  color: #5e5b54;
  font-size: .96rem;
  line-height: 2.15;
}
.body-copy p + p { margin-top: 1.6rem; }

blockquote {
  position: relative;
  margin-top: 9rem;
  padding: 4rem 0 1rem 12vw;
  border-top: 1px solid var(--line);
  font-family: "Yu Mincho", Georgia, serif;
  font-size: clamp(1.8rem,3.6vw,4rem);
  line-height: 1.5;
}
blockquote span { position: absolute; top: 2.2rem; left: 0; color: #a98a65; font: 5rem Georgia, serif; }

.dark-section { background: var(--ink); color: #f2eee7; }
.section-heading-row { align-items: end; }
.section-heading-row > p { padding-bottom: .6rem; color: rgba(255,255,255,.58); }

.metric-strip {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  margin-top: 7rem;
  border-top: 1px solid var(--light-line);
  border-bottom: 1px solid var(--light-line);
}

.metric-strip > div { min-height: 190px; padding: 2.2rem 2.4rem; border-right: 1px solid var(--light-line); }
.metric-strip > div:first-child { padding-left: 0; }
.metric-strip > div:last-child { border-right: 0; }
.metric-strip span { display: block; margin-bottom: 2.3rem; color: rgba(255,255,255,.42); font-size: .65rem; letter-spacing: .1em; }
.metric-strip strong { font-family: "Yu Mincho", Georgia, serif; font-size: clamp(2.5rem,4.2vw,4.5rem); font-weight: 400; letter-spacing: -.04em; }
.metric-strip small { margin-left: .35rem; color: rgba(255,255,255,.56); font-size: .8rem; font-weight: 400; }
.metric-note { margin-top: 1rem; color: rgba(255,255,255,.38); font-size: .67rem; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1px;
  margin-top: 6rem;
  background: var(--light-line);
  border: 1px solid var(--light-line);
}
.feature-card { min-height: 270px; padding: 2.4rem; background: var(--ink); }
.feature-card > span { color: #9c8265; font: .78rem Georgia, serif; }
.feature-card h3 { margin-top: 4rem; font-family: "Yu Mincho", Georgia, serif; font-size: 1.25rem; font-weight: 400; }
.feature-card p { margin-top: 1.2rem; color: rgba(255,255,255,.5); font-size: .8rem; line-height: 1.9; }

.facility-notes {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1px;
  margin-top: 1px;
  background: var(--light-line);
}
.facility-notes article { padding: 2.6rem; background: #20201d; }
.facility-notes span { color: #9c8265; font-size: .6rem; letter-spacing: .18em; }
.facility-notes h3 { margin-top: 1.4rem; font-family: "Yu Mincho", Georgia, serif; font-size: 1.35rem; font-weight: 400; }
.facility-notes p { margin-top: 1rem; max-width: 520px; color: rgba(255,255,255,.5); font-size: .78rem; line-height: 1.9; }

.location-band {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 10vw;
  align-items: end;
  margin-top: 7rem;
  padding: 4rem 0 0;
  border-top: 1px solid var(--light-line);
}
.location-band h3 { font-size: clamp(1.8rem,3vw,3rem); }
.location-band > p { color: rgba(255,255,255,.54); font-size: .85rem; line-height: 2; }

.service { background: #ebe6dc; }
.service-heading > p { color: #5e5b54; }
.service-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 7rem; }
.service-main-card, .option-card { border: 1px solid rgba(23,23,20,.18); background: rgba(255,255,255,.26); }
.service-main-card { min-height: 560px; padding: 3rem; }
.card-label { color: #89745b; font-size: .62rem; font-weight: 600; letter-spacing: .2em; }
.service-main-card h3, .option-card h3 { font-family: "Yu Mincho", Georgia, serif; font-size: clamp(1.6rem,2.5vw,2.5rem); font-weight: 400; }
.service-main-card h3 { margin-top: 1.3rem; }
.service-main-card ul { display: grid; margin: 4rem 0 0; padding: 0; list-style: none; }
.service-main-card li { position: relative; padding: 1.25rem 0 1.25rem 2rem; border-top: 1px solid var(--line); font-size: .86rem; }
.service-main-card li::before { position: absolute; left: 0; content: "○"; color: #9b8161; font-size: .7rem; }
.option-stack { display: grid; gap: 1.4rem; }
.option-card { display: grid; grid-template-columns: 1fr 1.15fr; gap: 2rem; padding: 2.3rem; }
.option-card h3 { margin-top: .9rem; }
.option-card > p { color: #69655c; font-size: .78rem; line-height: 1.9; }
.option-card strong, .option-card small { grid-column: 2; }
.option-card strong { align-self: end; font: 1.3rem Georgia, serif; }
.option-card small { color: #817c73; font-size: .63rem; }

.use-flow {
  display: grid;
  grid-template-columns: 1fr 50px 1fr 50px 1fr;
  align-items: center;
  margin-top: 6rem;
  padding: 3rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.use-flow > div { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.2rem; }
.use-flow span { grid-row: 1 / 3; color: #a18462; font: 1.6rem Georgia, serif; }
.use-flow strong { font-family: "Yu Mincho", Georgia, serif; font-size: 1.1rem; font-weight: 400; }
.use-flow p { color: #77736c; font-size: .7rem; }
.use-flow i { width: 100%; height: 1px; background: var(--line); }

.sand-section { background: #d8cdbc; }
.plan-grid { align-items: start; }
.plan-lead { max-width: 560px; margin-top: 2.5rem; }
.price-card { padding: clamp(2rem,4vw,4rem); border: 1px solid rgba(23,23,20,.28); background: rgba(244,241,233,.35); }
.price-card > p:first-child { font-size: .7rem; letter-spacing: .12em; }
.price { display: flex; align-items: baseline; margin-top: 1.2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.price > span { margin-right: .6rem; font: 1.3rem Georgia, serif; }
.price strong { font: 400 clamp(3rem,5.5vw,5.5rem) Georgia, serif; letter-spacing: -.06em; }
.price small { margin-left: .9rem; color: #5f5a52; font-size: .75rem; }
.price-note { margin-top: 1.3rem; color: #676158; font-size: .72rem; }
.price-card dl { margin: 2.4rem 0; }
.price-card dl > div { display: grid; grid-template-columns: 1fr 1fr; padding: 1rem 0; border-top: 1px solid var(--line); font-size: .76rem; }
.price-card dl > div:last-child { border-bottom: 1px solid var(--line); }
.price-card dt { color: #736d64; }
.price-card dd { margin: 0; text-align: right; }
.dark-button { width: 100%; background: var(--ink); color: white; }
.dark-button:hover { background: #34332e; }
.construction-note { margin-top: 2rem; color: #716a61; font-size: .65rem; line-height: 1.7; }

.faq { background: var(--paper); }
.faq-grid > div:first-child > p:last-child { max-width: 420px; margin-top: 2rem; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  padding: 1.6rem 0;
  cursor: pointer;
  font-family: "Yu Mincho", Georgia, serif;
  font-size: 1rem;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: #92785c; font-family: sans-serif; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list summary span { color: #9a8267; font: .7rem Georgia, serif; }
.faq-list details > p { padding: 0 3rem 1.8rem 50px; color: #66625b; font-size: .78rem; line-height: 2; }

.contact { padding-top: 160px; padding-bottom: 160px; text-align: center; }
.contact h2 { font-size: clamp(2.8rem,5.5vw,6rem); }
.contact-lead { max-width: 670px; margin: 2.5rem auto 0; color: rgba(255,255,255,.56); font-size: .85rem; line-height: 2.1; }
.contact-actions { display: grid; grid-template-columns: repeat(2,minmax(0,310px)); justify-content: center; gap: 1rem; margin-top: 3.5rem; }
.contact-actions .button { min-height: 82px; flex-direction: column; gap: .45rem; }
.contact-actions small { font-size: .58rem; font-weight: 400; opacity: .54; }
.ivory-button { background: var(--ivory); color: var(--ink); }
.outline-button { border-color: rgba(255,255,255,.28); color: white; }
.outline-button:hover { border-color: white; }
.contact-note { margin-top: 1.7rem; color: rgba(255,255,255,.3); font-size: .6rem; }

.site-footer {
  display: grid;
  grid-template-columns: 1fr 1.3fr .8fr;
  gap: 4vw;
  padding: 70px 4vw 35px;
  background: #11110f;
  color: rgba(255,255,255,.7);
  border-top: 1px solid rgba(255,255,255,.14);
}

body.admin-bar .site-header { top: 32px; }
.footer-brand { display: flex; align-self: start; flex-direction: column; gap: .08rem; color: white; }
.company-details p { margin-bottom: .65rem; font-size: .7rem; }
.footer-links { display: grid; align-content: start; gap: .8rem; font-size: .7rem; }
.copyright { grid-column: 1 / -1; margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.3); font-size: .58rem; }

.legal-page { min-height: 100vh; padding: 60px max(6vw, calc((100vw - 960px) / 2)) 120px; background: var(--paper); }
.legal-back { display: inline-block; margin-bottom: 7rem; color: #706b63; font-size: .68rem; letter-spacing: .12em; }
.legal-page article { max-width: 820px; }
.legal-page h1 { font-family: "Yu Mincho", Georgia, serif; font-size: clamp(2.5rem,5vw,4.5rem); font-weight: 400; }
.legal-intro { margin: 2rem 0 5rem; color: #59564f; line-height: 2; }
.legal-page section { padding: 2rem 0; border-top: 1px solid var(--line); }
.legal-page section h2 { margin-bottom: 1rem; font-family: "Yu Mincho", Georgia, serif; font-size: 1.15rem; font-weight: 400; }
.legal-page section p { color: #656159; font-size: .82rem; line-height: 2; }
.legal-date { margin-top: 3rem; color: #777168; font-size: .68rem; }

@media (max-width: 1000px) {
  .site-header { grid-template-columns: 1fr auto; }
  .desktop-nav { display: none; }
  .manifesto-grid, .section-heading-row, .plan-grid, .faq-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .body-copy { padding-top: 0; }
  .feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-columns { grid-template-columns: 1fr; }
  .service-main-card { min-height: auto; }
}

@media (max-width: 700px) {
  .site-header { height: 72px; padding: 0 5vw; }
  .header-cta { font-size: .67rem; }
  .hero { min-height: 760px; background-position: 62% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(8,8,7,.91), rgba(8,8,7,.34)), linear-gradient(0deg, rgba(7,7,6,.72), transparent 55%); }
  .hero-inner { width: 90vw; padding: 120px 0 190px; justify-content: flex-start; }
  .hero h1 { font-size: clamp(2.65rem,12vw,4rem); line-height: 1.32; }
  .hero-copy { margin-top: 1.7rem; font-size: .87rem; }
  .desktop-only { display: none; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 1.4rem; margin-top: 2rem; }
  .opening-panel { right: 5vw; left: 5vw; grid-template-columns: 1fr; }
  .opening-panel > div { min-height: 54px; padding: .65rem 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .opening-panel > div:last-child { border-bottom: 0; }
  .opening-panel strong { font-size: 1.05rem; }
  .image-note { right: 5vw; bottom: 176px; }
  .section { padding: 90px 6vw; }
  .section-index { margin-bottom: 3.5rem; }
  .section h2 { font-size: clamp(2.25rem,10vw,3.6rem); }
  blockquote { margin-top: 5rem; padding: 3rem 0 0 3rem; font-size: 1.7rem; }
  blockquote span { top: 1.8rem; font-size: 3.5rem; }
  .metric-strip { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 4rem; }
  .metric-strip > div { min-height: 140px; padding: 1.5rem; border-bottom: 1px solid var(--light-line); }
  .metric-strip > div:nth-child(2) { border-right: 0; }
  .metric-strip > div:first-child, .metric-strip > div:nth-child(3) { padding-left: 0; }
  .metric-strip > div:nth-child(3), .metric-strip > div:nth-child(4) { border-bottom: 0; }
  .feature-grid { grid-template-columns: 1fr; margin-top: 4rem; }
  .facility-notes { grid-template-columns: 1fr; }
  .feature-card { min-height: 230px; padding: 2rem; }
  .feature-card h3 { margin-top: 3rem; }
  .location-band { grid-template-columns: 1fr; gap: 2rem; margin-top: 5rem; }
  .service-columns { margin-top: 4rem; }
  .service-main-card { padding: 2rem; }
  .option-card { grid-template-columns: 1fr; gap: 1.2rem; padding: 2rem; }
  .option-card strong, .option-card small { grid-column: 1; }
  .use-flow { grid-template-columns: 1fr; gap: 1.6rem; }
  .use-flow i { width: 1px; height: 26px; margin-left: .8rem; }
  .price-card { padding: 2rem; }
  .price strong { font-size: 3.3rem; }
  .price small { margin-left: .5rem; }
  .faq-list summary { grid-template-columns: 40px 1fr auto; padding-right: .5rem; font-size: .9rem; }
  .faq-list details > p { padding-left: 40px; padding-right: .5rem; }
  .contact { padding-top: 110px; padding-bottom: 110px; }
  .contact-actions { grid-template-columns: minmax(0,1fr); }
  .site-footer { grid-template-columns: 1fr; padding: 55px 6vw 30px; }
  .copyright { grid-column: 1; }
  .legal-page { padding-top: 40px; }
  .legal-back { margin-bottom: 5rem; }
}

@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}