@charset "UTF-8";

/* ==========================================================================
   1. CSS Variables (Design System)
   ========================================================================== */
:root {
  /* Colors */
  --primary: #006a64;
  --primary-container: #4C8887;
  --on-primary: #ffffff;
  --primary-fixed: #7af6eb;
  
  --background: #fbf9f8;
  --on-background: #1b1c1c;
  
  --surface: #fbf9f8;
  --on-surface: #1b1c1c;
  --surface-variant: #e4e2e2;
  --on-surface-variant: #3c4947;
  
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f2f2f2;
  --surface-container: #efeded;
  --surface-container-high: #e9e8e7;
  --surface-container-highest: #e4e2e2;
  --inverse-surface: #303031;
  
  --outline: #6c7a78;
  --outline-variant: #bbc9c7;
  
  --error: #ba1a1a;
  --on-secondary-container: #646464;
  --secondary-fixed-dim: #c6c6c6;

  /* Spacing */
  --gutter: 24px;
  --margin-mobile: 16px;
  --container-max: 1200px;
  --section-padding-desktop: 100px;
  --section-padding-mobile: 60px;
}

/* ==========================================================================
   2. Reset & Base Styles
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Noto Sans JP', 'Hanken Grotesk', sans-serif;
  background-color: var(--background);
  color: var(--on-surface);
  letter-spacing: 0.05em;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
}

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
}

ul {
  list-style: none;
}

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  font-size: 22px;
}
.material-symbols-filled {
  font-variation-settings: 'FILL' 1;
}
.contact-tel .material-symbols-outlined{
position: relative; top: 3px;}
.font-weight-200 { font-variation-settings: 'wght' 200; }
.font-weight-300 { font-variation-settings: 'wght' 300; }

/* Utilities */
.hidden { display: none !important; }
.num-font {  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: 0.02em; }
.text-primary { color: var(--primary); }
.text-surface-variant { color: var(--on-surface-variant); }
.font-bold { font-weight: 700; }
.mb-0 { margin-bottom: 0 !important; }
.mb-sm { margin-bottom: 0.5rem !important; }
.mb-1 { margin-bottom: 1rem;}
.mb-2 { margin-bottom: 2rem;}
.btn-group-nowrap { flex-wrap: nowrap; }
.btn-flex { flex: 1; }
.center { text-align: center;}
.center-flex { justify-content: space-evenly;}

/* ==========================================================================
   3. Components
   ========================================================================== */

/* --- Buttons --- */
.btn-group { display: flex; flex-wrap: wrap; gap: 1rem; }
.btn { padding: 0.75rem 2rem; border-radius: 0.5rem; font-weight: 700; letter-spacing: 0.1em; transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; }
.btn-outline { background: #fff; border: 1px solid var(--on-background); color: var(--on-background); }
.btn-outline:hover { background: var(--surface-container); }
.btn-solid { background: var(--on-background); color: #fff; border: 1px solid var(--on-background); }
.btn-solid:hover { background: rgba(27, 28, 28, 0.9); }
.btn-full { width: 100%; height: 3.5rem; border-radius: 0.5rem; font-weight: 700; letter-spacing: 0.1em; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.3s ease; }

/* --- Header --- */
.site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 50; height: 5rem; border-bottom: 1px solid transparent; transition: all 0.3s ease; }
.site-header.scrolled { background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); border-color: var(--outline-variant); }
.header-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--margin-mobile); }
@media (min-width: 768px) { .header-inner { padding: 0 var(--gutter); } }
.header-left { display: flex; align-items: center; gap: 3rem; }
.header-logo { height: 1.5rem; width: auto; display: flex; align-items: center; transition: color 0.3s ease; }
@media (min-width: 768px) { .header-logo { height: 2rem; } }
.header-logo img { height: 100%; width: auto; }
.header-nav { display: none; align-items: center; gap: 1.5rem; }
@media (min-width: 1024px) { .header-nav { display: flex; } }
.nav-link { color: rgba(255, 255, 255, 0.9); font-size: 14px; font-weight: 600; letter-spacing: 0.1em; transition: color 0.3s ease; }
.nav-link:hover { color: #fff; }
.nav-link.active { border-bottom: 2px solid #fff; padding-bottom: 0.25rem; color: #fff; }
.site-header.scrolled .nav-link { color: var(--on-surface); }
.site-header.scrolled .nav-link:hover { color: var(--primary); }
.site-header.scrolled .nav-link.active { border-color: var(--on-surface); color: var(--on-surface); }
.header-actions { display: flex; align-items: center; gap: 0; }
@media (min-width: 768px) { .header-actions{ gap: 1rem;} }
.btn-map { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 4rem; height: 4rem; color: #fff; transition: background 0.3s ease; letter-spacing: 0.15em; line-height: 1.2;}
.btn-map:hover { background-color: rgba(245, 243, 243, 0.2); }
.btn-map span:last-child { font-size: 10px; font-weight: 700; margin-top: 2px; }
.site-header.scrolled .btn-map { color: var(--on-surface); }
.site-header.scrolled .btn-map:hover { background-color: rgba(0, 0, 0, 0.05); }
.btn-reserve { background-color: var(--primary-container); color: #fff; padding: 0 0.8rem; height: 3rem; border-radius: 0.5rem; font-weight: 700; font-size:0.8rem; display: flex; align-items: center; gap: 0.5rem; letter-spacing: 0.1em; transition: all 0.3s ease; white-space: nowrap;}
@media (min-width: 768px) { .btn-reserve {font-size: 1rem;  padding: 0 1.5rem; }}
.btn-reserve:hover { opacity: 0.9; }
.btn-reserve:active { transform: scale(0.95); }

/* --- Hero Section --- */
.hero-section { position: relative; height: 819px; min-height: 600px; display: flex; align-items: flex-end; padding-bottom: 6rem; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 1; }
.hero-content { position: relative; z-index: 2; width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--margin-mobile); }
@media (min-width: 768px) { .hero-content { padding: 0 var(--gutter); } }
.hero-text { max-width: 42rem; color: #fff; }
.hero-title { font-family: 'Hanken Grotesk', sans-serif; font-size: clamp(30px, calc(1.875rem + ((1vw - 3.2px) * 4.0179)), 48px);
  min-height: 0vw; line-height: 1.2; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 1rem; filter: drop-shadow(0 10px 8px rgba(0,0,0,0.04)) drop-shadow(0 4px 3px rgba(0,0,0,0.1)); }
.hero-subtitle { font-size: 18px; line-height: 1.6; opacity: 0.9; border-left: 4px solid var(--primary); padding-left: 1rem; }

/* --- About Section --- */
#about-section { display: grid; grid-template-columns: 1fr; overflow: hidden; }
@media (min-width: 768px) { #about-section { grid-template-columns: 1fr 1fr; } }
.about-image-wrap { width: 100%; height: 100%; min-height: 400px; }
@media (min-width: 768px) { .about-image-wrap { min-height: 600px; } }
.about-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.about-content-wrap { display: flex; align-items: center; justify-content: center; padding: 4rem var(--margin-mobile); background-color: var(--surface); }
@media (min-width: 768px) { .about-content-wrap { padding: var(--section-padding-desktop) 5rem; } }
.about-inner { max-width: 36rem; }
.section-title { font-family: 'Hanken Grotesk', sans-serif; font-size: 32px; font-weight: 600; line-height: 1.3; letter-spacing: 0.1em; margin-bottom: 1.5rem; }
.section-title span { color: var(--on-surface-variant); font-size: 1rem; font-weight: 500; padding-left: 1rem;}
.about-desc { font-size: 15px; color: var(--on-surface-variant); margin-bottom: 2rem; width: 100%; }
.features-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; width: 250px; margin-left: auto; margin-right: auto; }
@media (min-width: 1024px) { .features-grid { grid-template-columns: repeat(3, 1fr); width: auto; margin-left: 0; margin-right: 0; } }
.feature-item { padding: 1.3rem; border: 1px solid var(--outline-variant); border-radius: 0.5rem; text-align: left; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; }
@media (min-width: 1024px) { .feature-item { flex-direction: column; text-align: center; justify-content: center; } }
.feature-item img { height: 35px; margin-top: 0; flex-shrink: 0; }
@media (min-width: 1024px) { .feature-item img { margin-top: 0.75rem; } }
.feature-title { font-size: 14px; font-weight: 600; letter-spacing: 0.05em; line-height: 1.4; text-align: center; margin: 0 auto; }
@media (min-width: 1024px) { .feature-title { font-size: 13px; } }
.about-inner .btn-group { justify-content: center;}
@media (min-width: 1024px) { .about-inner .btn-group { justify-content: flex-end;}}

/* --- Reviews Section --- */
#reviews-section { background-color: var(--surface-container-low); padding: 4rem 0; overflow: hidden; }
@media (min-width: 768px) { #reviews-section { padding: var(--section-padding-desktop) 0; } }
.reviews-header { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 3rem; padding: 0 var(--margin-mobile); }
.reviews-header img { width: 2rem; height: 2rem; }
.marquee-wrapper { position: relative; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-container { display: flex; width: max-content; animation: marquee 40s linear infinite; gap: var(--gutter); }
.marquee-container:hover { animation-play-state: paused; }
.review-card { background: #fff; padding: 1.5rem; border-radius: 0.75rem; border: 1px solid var(--outline-variant); width: 65vw; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
@media (min-width: 768px) { .review-card { width: 400px; } }
.review-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.review-author-info { display: flex; align-items: center; gap: 0.75rem; }
.review-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--surface-container-highest); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--outline); }
.review-name { font-weight: 700; font-size: 14px; }
.review-date { font-size: 11px; color: var(--on-surface-variant); }
.review-quote-icon { width: 1.25rem; height: 1.25rem; opacity: 0.2; }
.review-stars { display: flex; color: #FBBC05; margin-bottom: 0.75rem; font-size: 14px; gap: 2px; }
.review-text { font-size: 15px; color: var(--on-surface-variant); display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 768px) { .review-text { -webkit-line-clamp: 5; } }

/* --- Works Section --- */
#works-section { padding: 4rem var(--margin-mobile); max-width: var(--container-max); margin: 0 auto; }
@media (min-width: 768px) { #works-section { padding: var(--section-padding-desktop) var(--gutter); } }
.works-header { margin-bottom: 3rem; }
.works-desc { color: var(--on-surface-variant); width: 100%; line-height: 1.6; }
.works-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .works-grid { grid-template-columns: repeat(3, 1fr); } }
.work-item { aspect-ratio: 1/1; border-radius: 0.5rem; overflow: hidden; position: relative; cursor: pointer; }
.work-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.work-item:hover .work-img { transform: scale(1.1); }

/* --- Print Processing Section --- */
#processing-section { background-color: var(--surface-container-low); padding: 4rem var(--margin-mobile); }
@media (min-width: 768px) { #processing-section { padding: var(--section-padding-desktop) var(--gutter); } }
.processing-inner { max-width: var(--container-max); margin: 0 auto; }
.processing-desc { color: var(--on-surface-variant); margin-bottom: 3rem; }
.processing-grid { display: grid; grid-template-columns: 1fr; gap: var(--gutter); }
@media (min-width: 768px) { .processing-grid { grid-template-columns: repeat(3, 1fr); } }
.process-card { background: #fff; border: 1px solid var(--outline-variant); border-radius: 0.75rem; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.3s ease; }
.process-card:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.process-img-wrap { aspect-ratio: 1.2/1; position: relative; overflow: hidden;}
.process-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.process-content { padding: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.process-title { font-family: 'Hanken Grotesk', sans-serif; font-size: 20px; font-weight: 600; letter-spacing: 0.05em; margin-bottom: 1rem;}
.process-desc { font-size: 13px; color: var(--on-surface-variant); line-height: 1.6; }

/* --- Oneday Print Section --- */
#oneday-section { position: relative; padding: 6rem 0; overflow: hidden; }
.oneday-bg { position: absolute; inset: 0; background-image: url('../img/shop/bg_oneday-print.webp'); background-size: cover; background-position: center; z-index: 0; }
.oneday-inner { position: relative; z-index: 10; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--margin-mobile); display: flex; justify-content: flex-end; }
@media (min-width: 768px) { .oneday-inner { padding: 0 var(--gutter); } }
.oneday-card { max-width: 36rem; padding: 2.5rem; border-radius: 1rem; border: 1px solid var(--outline-variant); background: rgba(255, 255, 255, 0.94); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
.oneday-title { font-family: 'Hanken Grotesk', sans-serif; font-size: 32px; font-weight: 600; color: var(--primary); letter-spacing: 0.1em; margin-bottom: 1.5rem; }
.oneday-desc { font-size: 15px; margin-bottom: 1.5rem; line-height: 1.6; }
.oneday-notice { margin-bottom: 2rem; font-size: 14px; color: var(--on-surface-variant); }
.oneday-notice strong { color: var(--on-surface); display: block; margin-bottom: 0.5rem; }
.oneday-list { list-style-type: disc; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; }

/* --- Price Section --- */
.price-section { background: #fff; padding: 4rem var(--margin-mobile); }
@media (min-width: 768px) { .price-section { padding: var(--section-padding-desktop) var(--gutter); } }
.price-inner { max-width: 1000px; margin: 0 auto; }
.section-header-center { text-align: center; margin-bottom: 3rem; }
.section-header-center p { color: var(--on-surface-variant); }
.price-illustration { margin-bottom: 4rem; display: flex; justify-content: center; }
.price-illustration img { max-width: 410px; width: 100%; height: auto; }
/* スマホ（〜480px）：縦積み、カード最大幅300px */
.price-cards { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; max-width: 50rem; margin: 0 auto; }
.price-card { background: #fff; border-radius: 0.75rem; padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 2rem; border: 1px solid rgba(187, 201, 199, 0.3); width: 100%; max-width: 300px; }

/* タブレット未満（481〜767px）：2枚横並び、各カード幅300px固定 */
@media (min-width: 481px) and (max-width: 767px) {
  .price-cards { flex-direction: row; align-items: stretch; justify-content: center; flex-wrap: wrap; }
  .price-card { width: 300px; max-width: 300px; flex-shrink: 0; }
}

/* タブレット以上（768px〜）：現状維持 */
@media (min-width: 768px) {
  .price-cards { flex-direction: column; align-items: stretch; }
  .price-card { flex-direction: row; width: auto; max-width: none; }
}
.price-icon { flex-shrink: 0; }
.price-icon img { width: 8rem; height: auto; }
.price-details { flex: 1; width: 100%; text-align: center; }
@media (min-width: 768px) { .price-details { text-align: left; } }
.price-card-title { color: var(--on-surface-variant); font-weight: 700; font-size: 1rem; margin-bottom: 0.5rem; }
.price-divider { border-bottom: 1px solid rgba(187, 201, 199, 0.3); margin-bottom: 1rem; }
.price-amounts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; flex-direction: column; gap: 0; }
@media (min-width: 768px) { .price-amounts { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 1.5rem; } }
.price-main { color: var(--error); font-weight: 700; font-size: 1.875rem;}
.price-sub { color: var(--on-surface-variant); font-size: 1.35rem; }
.price-main .unit, .price-sub .unit{ font-size: 0.75em; padding-right: 0.1rem;}
.price-time-box { background: var(--surface-container); border-radius: 0.75rem; text-align: center; min-width: 160px; padding: 1rem; display: flex; align-items: center; justify-content: center; gap: 1rem; }
.price-time-label { font-size: 0.9rem; font-weight: 700; color: var(--on-surface-variant); letter-spacing: 0.1em; margin-bottom: 0; }
@media (min-width: 768px) { .price-time-box { flex-direction: column; padding: 1.5rem; gap: 0; } }
@media (min-width: 768px) { .price-time-label { margin-bottom: 0.5rem; } }
.price-time-val { display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: var(--on-surface); font-weight: 700; }
.price-time-val .material-symbols-outlined { font-size: 1.6rem; transform: translateY(8%); }
.price-time-val .num { font-size: 1.875rem; margin-right: 3px; }


/* --- Items Section --- */
.items-section { background: #fff; padding: 4rem var(--margin-mobile); }
@media (min-width: 768px) { .items-section { padding: 2rem var(--gutter); } }
.items-grid { display: flex; flex-wrap: wrap; gap: 3rem var(--gutter); }
.item-card {  width: calc((100% - var(--gutter)) / 2);}
@media (min-width: 480px) { .item-card {width: calc((100% - (var(--gutter) * 2)) / 3);}}
@media (min-width: 768px) { .item-card {width: calc((100% - (var(--gutter) * 3)) / 4);}}
.item-card { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 1rem; cursor: pointer; }
.item-img-wrap { width: 100%; aspect-ratio: 1/1; margin-bottom: 1rem; border-radius: 0.5rem; background: #fff; display: flex; align-items: center; justify-content: center; padding: 1rem; overflow: hidden; }
.item-img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.3s ease; }
.item-card:hover .item-img { transform: scale(1.05); }
.item-title { font-weight: 700; font-size: 0.875rem; margin-bottom: 0.25rem; }
.item-desc { font-size: 0.75rem; color: var(--on-surface-variant); margin-bottom: 0.5rem; }
.item-price { color: var(--primary); font-weight: 700; font-size: 1.125rem; }
.item-price .unit { font-size: 0.85em; padding-right: 0.05rem;}

/* --- Order Step Section --- */
.order-section { background: #fff; padding-top: 2rem; padding-bottom: 4rem; }
@media (min-width: 768px) { .order-section { padding-top: var(--section-padding-desktop); padding-bottom: var(--section-padding-desktop); } }
.order-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--margin-mobile); }
@media (min-width: 768px) { .order-inner { padding: 0 var(--gutter); } }
.order-step { text-align: center; margin-bottom: 4rem;}
.order-step-sub { color: rgb(60, 73, 71); font-weight: 400; letter-spacing: 0.8px; }
.order-step-box { background: var(--primary-container); padding: 4rem 2rem; border-radius: 0.75rem; margin-top: 3rem; width: 400px; max-width: calc(100% - 2rem); margin: 0 auto; }
@media (min-width: 768px) { .order-step-box { padding: 4rem; width: 100%; max-width: 56rem; } }
.step-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 56rem; margin: 0 auto; }
@media (min-width: 768px) { .step-grid { grid-template-columns: repeat(5, 1fr); } }
.step-item { display: flex; flex-direction: row; align-items: center; gap: 1rem; color: #fff; }
.step-num { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; letter-spacing: 0.1em; }
.step-icon { font-size: 3rem; margin-bottom: 0.5rem; }
.step-title { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; text-align: left; }
.step-en { font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; opacity: 0.9; text-align: left; }
@media (min-width: 768px) {
    .step-item { flex-direction: column; align-items: center; }
    .step-title { text-align: center; }
    .step-en { text-align: center; }
}
.data-section { max-width: 56rem; margin: 0 auto; }
.data-title-wrap { text-align: center; margin-bottom: 3rem; }
.data-title { font-weight: 700; font-size: 1.125rem; display: inline-block; border-bottom: 2px solid var(--on-background); padding-bottom: 0.25rem; }
.data-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .data-grid { grid-template-columns: repeat(2, 1fr); } }
.data-card { padding: 2rem 2rem 2rem 0; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 2rem; background: var(--surface-container-high); transition: box-shadow 0.3s ease; width: calc(100% - 2rem); max-width: 400px; margin: 0 auto; }
@media (min-width: 768px) { .data-card { padding: 2rem 3rem 2rem 0; width: auto; max-width: none; margin: 0; } }
.data-card:hover { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.data-card-icon { font-size: 3.75rem; color: var(--on-surface-variant); flex-shrink: 0; }
.data-card-en { font-size: 14px; color: var(--on-surface-variant); text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700; }
.data-card-jp { font-size: 1.5rem; font-weight: 700; color: var(--on-surface); line-height: 1.2; letter-spacing: 0.05em; margin: 0.25rem 0; }
.data-card-desc { font-size: 0.75rem; color: var(--on-surface-variant); margin-top: 0.25rem; opacity: 0.8; }
.data-notice-text { text-align: center; font-weight: 700; margin-bottom: 2rem; }

.caution-box { border: 1px solid var(--outline-variant); border-radius: 0.75rem; padding: 2rem; margin-bottom: 3rem; display: flex; flex-direction: column; gap: 1.5rem; background: var(--surface-container-low); }
.caution-item { display: flex; gap: 1rem; align-items: flex-start; }
.caution-icon { color: var(--primary); font-size: 1.875rem; flex-shrink: 0; margin-top: 0.25rem; }
.caution-text { font-size: 0.875rem; line-height: 1.6; color: var(--on-surface); }

.tech-specs { display: flex; flex-direction: column; gap: 2rem; font-size: 0.875rem; padding: 0 5%; }
.tech-specs > li { list-style: disc; margin-left: 1.25rem; }
.tech-block-title { font-weight: 700; margin-bottom: 1rem; }
.bullet-dot { display: none; } /* 念のため残す場合。不要なら削除してOK */
.tag-list { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding: 0; }
.tag-item { display: flex; align-items: center; gap: 0.5rem; }
.tag { background: var(--on-background); color: #fff; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap;}
.size-list { display: flex; flex-wrap: wrap; column-gap: 2rem; row-gap: 1rem; list-style: none; padding: 0; }
.size-item { display: flex; align-items: baseline; }
.size-item span.tag { margin-right: 0.5rem; }
.tech-desc-list { padding-left: 1rem; color: var(--on-surface-variant); display: flex; flex-direction: column; gap: 0.25rem; }
.tech-desc-list dt { font-weight: 700; color: var(--on-surface); margin-top: 0.5rem; }
.tech-desc-list dt:first-child { margin-top: 0; }
.tech-desc-list dd { padding-left: 1rem; }

/* --- FAQ Section --- */
#faq-section { padding: 4rem var(--margin-mobile); max-width: var(--container-max); margin: 0 auto; display: flex; flex-direction: column; gap: 3rem; }
@media (min-width: 768px) { #faq-section { padding: var(--section-padding-desktop) var(--gutter); flex-direction: row; } }
.faq-header { width: 100%; }
@media (min-width: 768px) { .faq-header { width: 33.333%; } }
.faq-list { width: 100%; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 768px) { .faq-list { width: 66.666%; } }
.faq-item { border: 1px solid var(--outline-variant); border-radius: 0.5rem; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.faq-btn { width: 100%; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; background: #fff; color: var(--on-surface); text-align: left; letter-spacing: 0.1em; transition: background 0.3s ease; }
.faq-btn:hover { background: var(--surface-container-low); }
.faq-btn.bg-surface-container-low { background: var(--surface-container-low); }
.faq-btn .material-symbols-outlined { transition: transform 0.3s ease; color: var(--primary-container);}
.faq-content { padding: 1rem 1.5rem; border-top: 1px solid var(--outline-variant); background: #fff; }
.faq-content p { color: var(--on-surface-variant); }

/* --- Contact & Access Section --- */
#contact-section { display: flex; flex-direction: column; min-height: 600px; height: auto; width: 100%; overflow: hidden; }
@media (min-width: 768px) { #contact-section { flex-direction: row; height: 80vh; } }
.contact-info-wrap { width: 100%; background: #fff; display: flex; align-items: center; justify-content: center; padding: 2.5rem; }
@media (min-width: 768px) { .contact-info-wrap { width: 50%; padding: 5rem; } }
.contact-inner { width: 100%; max-width: 28rem; }
.contact-title { font-family: 'Hanken Grotesk', sans-serif; font-size: 32px; font-weight: 600; letter-spacing: 0.1em; margin-bottom: 2rem; }
.contact-details { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 3rem; }
.contact-label { font-size: 0.75rem; font-weight: 700; color: var(--primary); margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.05em; }
.contact-text { color: var(--on-surface-variant); line-height: 1.6; }
.contact-tel { font-size: 24px; font-weight: 600; line-height: 1.4; letter-spacing: 0.06em; color: var(--on-surface-variant); }
.contact-buttons { display: flex; flex-direction: column; gap: 1rem; }
.contact-map-wrap { width: 100%; height: 60vh; display: flex; align-items: center; justify-content: center; background-color: #eee;}
.map-label {color: var(--primary); -webkit-text-stroke: 3px #fff;paint-order: stroke fill;font-weight: bold;white-space: nowrap;}
@media (min-width: 768px) { .contact-map-wrap { width: 50%; height: 100%; } }
.contact-map-wrap iframe { width: 100%; height: 100%; border: 0; }

/* マップの吹き出し非表示 */
.gm-style .gm-style-iw-c {  background: transparent !important; box-shadow: none !important; padding: 0 !important;}
.gm-style .gm-style-iw-d {  overflow: hidden !important; }
.gm-style .gm-style-iw-tc { display: none !important;}
.gm-style .gm-style-iw-chr { display: none !important; }

/* --- Form Section --- */
.form-container { background: var(--surface-container-low); padding: 6rem 0; }
.form-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--margin-mobile); }
.air-reserve{ overflow: hidden;}
@media (min-width: 768px) { .form-inner { padding: 0 var(--gutter); } }

/* --- Footer Section --- */
.site-footer { background: var(--inverse-surface); padding: 4rem 0; color: #fff; }
.footer-top { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; width: 100%; padding: 3rem var(--margin-mobile); max-width: var(--container-max); margin: 0 auto; border-bottom: 1px solid rgba(255,255,255,0.1); }
@media (min-width: 768px) { .footer-top { flex-direction: row; padding: 3rem var(--gutter); } }
.footer-brand { display: flex; flex-direction: column; align-items: center; margin-bottom: 2rem; }
@media (min-width: 768px) { .footer-brand { align-items: flex-start; margin-bottom: 0; } }
.footer-logo { font-family: 'Hanken Grotesk', sans-serif; font-size: 24px; font-weight: 700; color: var(--primary-fixed); margin-bottom: 0.5rem; }
.footer-logo img { height: 1.48rem;  width: auto;}
.footer-shop { color: var(--secondary-fixed-dim); font-size: 14px; font-weight: 600; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .footer-nav { margin-bottom: 0; } }
.footer-nav a { color: var(--secondary-fixed-dim); font-size: 12px; transition: color 0.3s ease; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }
.footer-bottom { max-width: var(--container-max); margin: 0 auto; padding: 2rem var(--margin-mobile); text-align: center; }
@media (min-width: 768px) { .footer-bottom { padding: 2rem var(--gutter); text-align: left; } }
.footer-copy { color: rgba(198, 198, 198, 0.6); font-size: 12px; }