/* ==========================================================
   株式会社青梅物産 - トップページ
   Palette: 紺（ブランドカラー） / 白・淡いブルーグレー / コーラル / ゴールド
   ========================================================== */

:root{
  --navy: #24385F;        /* ブランドのベースカラー */
  --navy-deep: #17284A;   /* ヘッダー／CTA／フッター */
  --navy-light: #EDF4FC;  /* 淡いブルーグレー */
  --cream: #FFFFFF;       /* 紺地で使う明るい文字色 */
  --ink: #263750;         /* 本文色 */
  --ink-soft: #62738C;    /* 補助テキスト */
  --ink-on-dark: #D5E0EE;
  --surface: #FFFFFF;
  --surface-soft: #F4F8FC;
  --accent: #E76548;      /* 明るいコーラル */
  --accent-dark: #C94D33;
  --gold: #D5A84E;        /* 装飾・ラベル用のゴールド */
  --line: #D9E4F0;

  --font-display: "Shippori Mincho", serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;

  --container: 1160px;
  --radius: 4px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

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

ul, ol{ margin: 0; padding: 0; list-style: none; }

h1, h2, h3{
  font-family: var(--font-display);
  margin: 0;
  color: var(--navy-deep);
  letter-spacing: 0.02em;
}

p{ margin: 0; }

.skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: var(--cream);
  padding: 10px 16px;
  z-index: 1000;
}
.skip-link:focus{
  left: 10px;
  top: 10px;
}

:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.section-inner, .header-inner, .footer-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}
.btn-primary{
  background: var(--accent);
  color: #FBF6EC;
}
.btn-primary:hover{
  background: var(--accent-dark);
  transform: translateY(-2px);
}
.btn-ghost{
  background: transparent;
  color: var(--cream);
  border-color: rgba(245,241,231,0.5);
}
.btn-ghost:hover{
  background: var(--cream);
  color: var(--navy-deep);
  transform: translateY(-2px);
}
.btn-ghost-light{
  border-color: rgba(245,241,231,0.5);
  color: var(--cream);
}
.btn-ghost-light:hover{
  background: var(--cream);
  color: var(--navy-deep);
}
.btn-small{
  padding: 10px 20px;
  font-size: 0.85rem;
}

/* ==========================================================
   Header
   ========================================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(23,40,74,0.92);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.16);
}
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cream);
}
.brand-mark{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.brand-mark img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand-text{ display: flex; flex-direction: column; line-height: 1.3; }
.brand-text strong{
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--cream);
}
.brand-text small{
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--ink-on-dark);
}

.main-nav ul{
  display: flex;
  gap: 26px;
}
.main-nav a{
  font-size: 0.88rem;
  font-weight: 500;
  position: relative;
  padding: 4px 0;
  color: var(--cream);
}
.main-nav a::after{
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width 0.25s ease;
}
.main-nav a:hover::after{ width: 100%; }

.header-actions{ display: flex; align-items: center; gap: 14px; }

.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span{
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--cream);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================
   Hero
   ========================================================== */
.hero{
  position: relative;
  padding: 108px 24px 96px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(23,40,74,0.88) 0%, rgba(23,40,74,0.70) 50%, rgba(23,40,74,0.28) 100%),
    url("../images/mv-pc.jpg") center / cover no-repeat;
}
.hero-texture{
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 3px);
  pointer-events: none;
}
.hero-inner{
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
}
.eyebrow{
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 18px;
}
.hero-title{
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1.25;
  font-weight: 800;
  color: var(--cream);
}
.hero-title .line{ display: block; opacity: 0; transform: translateY(16px); animation: riseIn 0.7s ease forwards; }
.hero-title .line:nth-child(2){ animation-delay: 0.15s; }
.hero-title .after-comma{ margin-left: -0.5em; }
.accent-line{ color: var(--accent); }

@keyframes riseIn{
  to{ opacity: 1; transform: translateY(0); }
}

.brush-underline{
  width: 260px;
  max-width: 50vw;
  height: 20px;
  margin: 10px 0 28px;
  color: var(--gold);
  display: block;
  overflow: visible;
}
.brush-path{
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  transform-box: fill-box;
  transform-origin: left center;
  animation: draw 1.1s 0.5s ease forwards;
}
@keyframes draw{
  to{ stroke-dashoffset: 0; transform: scaleX(2); }
}

.hero-lead{
  max-width: 620px;
  font-size: 1.02rem;
  color: var(--ink-on-dark);
  margin-bottom: 40px;
}

.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 44px;
}

.area-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.area-chips li{
  font-size: 0.78rem;
  padding: 7px 16px;
  border: 1px solid rgba(255,255,255,0.26);
  border-radius: 999px;
  color: var(--ink-on-dark);
  background: rgba(255,255,255,0.08);
}

@media (max-width: 768px){
  .hero{
    background:
      linear-gradient(180deg, rgba(23,40,74,0.72) 0%, rgba(23,40,74,0.84) 100%),
      url("../images/mv-sp.jpg") center / cover no-repeat;
  }
}

/* ==========================================================
   Section generic
   ========================================================== */
.section{ padding: 100px 0; }
.section-eyebrow{
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.section-title{
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--navy-deep);
}
.section-lead{
  color: var(--ink-soft);
  max-width: 560px;
  margin-bottom: 52px;
}

.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Reasons ---------- */
.reasons{ background: var(--surface-soft); }
.reason-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.reason-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 30px;
}
.reason-icon{
  display: inline-flex;
  width: 48px; height: 48px;
  color: var(--accent);
  margin-bottom: 20px;
}
.reason-icon svg{ width: 100%; height: 100%; }
.reason-card h3{
  font-size: 1.15rem;
  margin-bottom: 12px;
  color: var(--navy-deep);
}
.reason-card p{
  color: var(--ink-soft);
  font-size: 0.92rem;
}

/* ---------- News ---------- */
.news{ background: var(--surface); }
.news-list{
  border-top: 1px solid var(--line);
}
.news-more{ margin-top:32px; text-align:center; }
.news-item{
  display: grid;
  grid-template-columns: 110px 108px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 20px;
  padding: 22px 18px;
  border-bottom: 1px solid var(--line);
  transition: background 0.2s ease, padding 0.2s ease;
}
.news-item:hover{
  background: var(--surface-soft);
  padding-left: 26px;
}
.news-item time{
  color: var(--ink-soft);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
}
.news-category{
  justify-self: start;
  padding: 3px 10px;
  border: 1px solid #BED0E5;
  border-radius: 999px;
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.news-title{
  color: var(--navy-deep);
  font-size: 0.96rem;
  font-weight: 700;
}
.news-arrow{
  color: var(--accent);
  font-size: 1.2rem;
  text-align: right;
  transition: transform 0.2s ease;
}
.news-item:hover .news-arrow{ transform: translateX(4px); }

/* ---------- Services ---------- */
.services{ background: var(--surface-soft); }
.service-guide{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 34px 0 24px;
  padding: 17px 20px;
  border-left: 4px solid var(--accent);
  background: #FFF;
  box-shadow: 0 5px 16px rgba(23,40,74,0.05);
}
.service-guide p{ color: var(--ink-soft); font-size: 0.88rem; }
.service-guide strong{ margin-right: 12px; color: var(--navy-deep); }
.service-guide a,
.service-link{
  flex-shrink: 0;
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 700;
}
.service-guide a:hover,
.service-link:hover{ color: var(--accent-dark); }
.service-guide a span,
.service-link span{ margin-left: 5px; color: var(--accent); }
.service-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.service-card{
  display: flex;
  flex-direction: column;
  background: var(--surface);
  padding: 28px 25px 24px;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(23,40,74,0.04);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  position: relative;
}
.service-card:hover{
  border-color: #AFC3DC;
  box-shadow: 0 12px 26px rgba(23,40,74,0.10);
  transform: translateY(-3px);
}
.service-num{
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--gold);
  letter-spacing: 0.1em;
}
.service-card h3{
  font-size: 1.18rem;
  margin: 11px 0 9px;
  color: var(--navy-deep);
}
.service-card .service-summary{
  min-height: 5.4em;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.service-points{
  flex: 1;
  margin: 17px 0 15px;
  padding: 14px 0;
  border-top: 1px dashed #B9C9DA;
  border-bottom: 1px dashed #B9C9DA;
}
.service-points li{
  position: relative;
  padding-left: 14px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.65;
}
.service-points li::before{
  position: absolute;
  left: 0;
  color: var(--accent);
  content: "•";
}
.service-meta{
  min-height: 3.4em;
  margin-bottom: 14px;
  color: var(--ink-soft);
  font-size: 0.74rem;
  line-height: 1.65;
}
.service-meta span{
  display: block;
  margin-bottom: 2px;
  color: var(--navy-deep);
  font-weight: 700;
}
.service-link{ display: inline-block; align-self: flex-start; }

/* ---------- Website maintenance ---------- */
.maintenance{ background: var(--surface); }
.maintenance-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.maintenance-card{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 28px;
  border: 1px solid #B9C9DA;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(23,40,74,0.05);
}
.plan-label{
  min-height: 2.2em;
  margin-bottom: 12px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.maintenance-card h3{
  font-size: 1.55rem;
  text-align: center;
}
.maintenance-price{
  margin: 10px 0 28px;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.65rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
}
.maintenance-price span,
.maintenance-price small{
  color: var(--navy-deep);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
}
.maintenance-price span{ margin-right: 5px; }
.maintenance-price small{ margin-left: 3px; }
.plan-detail{
  flex: 1;
  padding: 22px 0;
  border-top: 1px dashed #AFC0D2;
  border-bottom: 1px dashed #AFC0D2;
}
.plan-detail h4{
  margin: 0 0 12px;
  color: var(--navy-deep);
  font-size: 0.88rem;
}
.plan-detail li{
  position: relative;
  padding-left: 15px;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.7;
}
.plan-detail li::before{
  position: absolute;
  left: 1px;
  color: var(--accent);
  content: "•";
}
.plan-target{
  min-height: 7em;
  margin: 20px 0 24px;
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.75;
}
.plan-target span{
  display: block;
  margin-bottom: 5px;
  color: var(--navy-deep);
  font-size: 0.75rem;
  font-weight: 700;
}
.btn-outline{
  border-color: var(--navy);
  color: var(--navy);
}
.btn-outline:hover{
  border-color: var(--navy);
  background: var(--navy);
  color: var(--cream);
  transform: translateY(-2px);
}
.maintenance-card.is-featured{
  z-index: 1;
  margin: -18px 0;
  padding-top: 50px;
  border: 2px solid var(--accent);
  box-shadow: 0 16px 32px rgba(23,40,74,0.12);
}
.plan-badge{
  position: absolute;
  top: 14px;
  right: 22px;
  left: 22px;
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--cream);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
}

/* ---------- Print design ---------- */
.print-media{
  background: #FBF2E3;
  color: #4B3528;
}
.print-media .section-eyebrow{ color: #B55C32; }
.print-media .section-title{ color: #4B3528; }
.print-media .section-lead{ color: #786252; }
.print-strengths{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-bottom: 36px;
  background: #DECDB9;
  border: 1px solid #DECDB9;
}
.print-strengths p{
  margin: 0;
  padding: 16px 20px;
  background: #FFFDF8;
  color: #604637;
  font-size: 0.82rem;
  font-weight: 700;
}
.print-strengths strong{
  margin-right: 8px;
  color: #B55C32;
  font-family: var(--font-display);
  font-size: 1.1rem;
}
.print-price-wrap{
  overflow: hidden;
  border: 1px solid #D8C2AA;
  border-radius: 8px;
  background: #FFFDF8;
}
.print-price-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.print-price-table caption{
  padding: 19px 24px;
  background: #4B3528;
  color: #FFFDF8;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: left;
}
.print-price-table caption span{
  margin-left: 10px;
  color: #EADACA;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
}
.print-price-table th,
.print-price-table td{
  padding: 18px 22px;
  border-bottom: 1px solid #E5D4C1;
  color: #604637;
  font-size: 0.88rem;
  text-align: left;
  vertical-align: middle;
}
.print-price-table thead th{
  padding-top: 13px;
  padding-bottom: 13px;
  background: #F2E3D2;
  color: #6D4938;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
}
.print-price-table tbody th{
  width: 29%;
  color: #4B3528;
  font-size: 0.95rem;
}
.print-price-table td:nth-child(2){ width: 24%; }
.print-price-table td strong{
  color: #B55C32;
  font-family: var(--font-display);
  font-size: 1.18rem;
}
.print-price-table tbody tr:last-child th,
.print-price-table tbody tr:last-child td{ border-bottom: 0; }
.print-price-note{
  margin-top: 14px;
  color: #786252;
  font-size: 0.76rem;
}
.print-action{ margin-top: 28px; }
.btn-print{
  border-color: #4B3528;
  background: #4B3528;
  color: #FFFDF8;
}
.btn-print:hover{
  border-color: #B55C32;
  background: #B55C32;
  transform: translateY(-2px);
}

/* ---------- Social media support ---------- */
.sns-support{ background: #F9E9EB; }
.sns-support .section-eyebrow{ color: #8B1E3F; }
.sns-support .section-title{ color: #4D1228; }
.sns-support .section-lead{ color: #7A5A64; }
.sns-platforms{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -20px 0 28px;
}
.sns-platforms span{
  padding: 5px 11px;
  border: 1px solid #E2B2BD;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  color: #7E3B51;
  font-size: 0.72rem;
  font-weight: 700;
}
.sns-plan-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.sns-plan{
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  border: 1px solid #E1B9C1;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.9);
}
.sns-plan-heading{
  padding: 26px 24px 22px;
  border-bottom: 1px solid #EEDADF;
  background: #FFF6F7;
}
.sns-plan-kicker{
  margin-bottom: 8px;
  color: #9B4B63;
  font-size: 0.76rem;
  font-weight: 700;
}
.sns-plan h3{
  color: #4D1228;
  font-size: 1.38rem;
}
.sns-price{
  margin-top: 8px;
  color: #8B1E3F;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-weight: 800;
  line-height: 1.2;
}
.sns-price span,
.sns-price small{
  color: #7A5A64;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
}
.sns-price span{ margin-right: 5px; }
.sns-price small{ margin-left: 3px; }
.sns-plan-content{ padding: 22px 24px; }
.sns-plan-content h4{
  margin: 0 0 10px;
  color: #7E3B51;
  font-size: 0.85rem;
}
.sns-plan-content li{
  position: relative;
  padding-left: 15px;
  color: #7A5A64;
  font-size: 0.82rem;
  line-height: 1.75;
}
.sns-plan-content li::before{
  position: absolute;
  left: 1px;
  color: #B04B68;
  content: "●";
  font-size: 0.55rem;
}
.sns-plan-target{
  min-height: 6.5em;
  margin: 0 24px 20px;
  padding-top: 15px;
  border-top: 1px dashed #E6C0CA;
  color: #7A5A64;
  font-size: 0.8rem;
  line-height: 1.75;
}
.sns-plan-target strong{
  display: block;
  margin-bottom: 5px;
  color: #4D1228;
  font-size: 0.74rem;
}
.btn-sns{
  margin: 0 24px 24px;
  border-color: #8B1E3F;
  background: #8B1E3F;
  color: #FFF;
}
.btn-sns:hover{
  border-color: #681530;
  background: #681530;
  transform: translateY(-2px);
}
.sns-plan.is-recommended{
  border: 2px solid #B04B68;
  box-shadow: 0 12px 26px rgba(139,30,63,0.14);
}
.sns-plan.is-recommended .sns-plan-heading{ padding-top: 52px; }
.sns-recommend-badge{
  position: absolute;
  top: 14px;
  right: 20px;
  left: 20px;
  z-index: 1;
  margin: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: #B04B68;
  color: #FFF;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
}
.sns-note{
  margin-top: 14px;
  color: #815867;
  font-size: 0.76rem;
}

/* ---------- All-in-one package ---------- */
.bundle-plan{
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  background:
    radial-gradient(circle at 92% 8%, rgba(231,101,72,0.35), transparent 30%),
    radial-gradient(circle at 8% 100%, rgba(213,168,78,0.18), transparent 32%),
    var(--navy-deep);
}
.bundle-plan::after{
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 5px);
  content: "";
  pointer-events: none;
}
.bundle-inner{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: 68px;
  align-items: center;
}
.bundle-badge{
  display: inline-block;
  margin-bottom: 16px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--cream);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.bundle-plan .section-eyebrow{
  margin-bottom: 9px;
  color: #F0C978;
}
.bundle-intro h2{
  margin-bottom: 18px;
  color: var(--cream);
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.35;
}
.bundle-intro > p:not(.bundle-badge):not(.section-eyebrow):not(.bundle-price){
  max-width: 480px;
  color: var(--ink-on-dark);
  font-size: 0.94rem;
}
.bundle-price{
  margin: 24px 0 28px;
  color: #F0C978;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 2.7rem);
  font-weight: 800;
  line-height: 1.2;
}
.bundle-price span,
.bundle-price small{
  color: var(--ink-on-dark);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
}
.bundle-price span{ margin-right: 8px; }
.bundle-price small{ margin-left: 4px; }
.btn-bundle{
  border-color: var(--accent);
  background: var(--accent);
  color: var(--cream);
}
.btn-bundle:hover{
  border-color: #F07D62;
  background: #F07D62;
  transform: translateY(-2px);
}
.bundle-content{
  padding: 34px;
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(5px);
}
.bundle-content-label{
  margin-bottom: 12px;
  color: #F0C978;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.bundle-items{
  border-top: 1px solid rgba(255,255,255,0.2);
}
.bundle-items article{
  display: grid;
  grid-template-columns: 42px 1fr;
  column-gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.bundle-items span{
  grid-row: span 2;
  color: #F0C978;
  font-family: var(--font-display);
  font-size: 1.12rem;
}
.bundle-items h3{
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1rem;
}
.bundle-items p{
  color: var(--ink-on-dark);
  font-size: 0.8rem;
  line-height: 1.7;
}
.bundle-for{
  margin-top: 20px;
  padding: 16px 18px;
  border-left: 3px solid var(--accent);
  background: rgba(0,0,0,0.12);
}
.bundle-for strong{
  display: block;
  margin-bottom: 5px;
  color: #F0C978;
  font-size: 0.78rem;
}
.bundle-for p{
  color: var(--ink-on-dark);
  font-size: 0.82rem;
  line-height: 1.7;
}

/* ---------- Works ---------- */
.works-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.works{ background: var(--surface-soft); }
.work-card{
  margin: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  border-radius: var(--radius);
}
.work-thumb{
  aspect-ratio: 4 / 3;
  background-size: cover;
  overflow: hidden;
}
.work-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.work-card:hover .work-thumb img{ transform:scale(1.025); }
.thumb-1{ background: linear-gradient(135deg, #E76548, #F0C978); }
.thumb-2{ background: linear-gradient(135deg, #17284A, #4A6A9E); }
.thumb-3{ background: linear-gradient(135deg, #E7BD68, #FFF0C9); }
.thumb-4{ background: linear-gradient(135deg, #0F1C33, #304B7B); }
.work-card figcaption{ padding: 18px 20px 22px; }
.work-tag{
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 8px;
}
.work-card h3{
  font-size: 0.95rem;
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy-deep);
}
.work-url{
  display:inline-block;
  margin-top:10px;
  color:var(--ink-soft);
  font-size:.7rem;
  line-height:1.5;
  text-decoration:underline;
  text-decoration-color:#b7c4d2;
  text-underline-offset:3px;
  overflow-wrap:anywhere;
}
.work-url:hover{ color:var(--accent); }
.works-note{
  margin-top: 26px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* ---------- Flow ---------- */
.flow{ background: var(--surface); }
.flow-list{
  border-top: 1px solid var(--line);
}
.flow-item{
  display: flex;
  gap: 32px;
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.flow-num{
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--accent);
  min-width: 56px;
}
.flow-item h3{
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--navy-deep);
}
.flow-item p{
  color: var(--ink-soft);
  font-size: 0.92rem;
  max-width: 620px;
}

/* ---------- Voice ---------- */
.voice{ background: var(--surface-soft); }
.voice-carousel{
  max-width: 720px;
}
.voice-track{
  position: relative;
  min-height: 200px;
}
.voice-slide{
  margin: 0;
  padding: 40px 44px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  display: none;
}
.voice-slide.is-active{ display: block; }
.voice-slide p{
  font-size: 1.05rem;
  line-height: 1.9;
  margin-bottom: 20px;
  color: var(--navy-deep);
}
.voice-slide footer{
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.voice-controls{
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
}
.voice-controls button{
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--navy-deep);
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.voice-controls button:hover{
  background: var(--accent);
  color: var(--cream);
}
.voice-dots{ display: flex; gap: 8px; }
.voice-dots button{
  width: 8px; height: 8px;
  border-radius: 50%;
  padding: 0;
  border: none;
  background: #C3D1E0;
}
.voice-dots button.is-active{ background: var(--accent); }

/* ---------- FAQ ---------- */
.faq{ background: var(--surface); }
.faq-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.faq-group{
  padding: 26px 24px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.faq-group h3{
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--accent);
  color: var(--navy-deep);
  font-size: 1.05rem;
}
.faq-item{
  border-bottom: 1px solid var(--line);
}
.faq-item:last-child{ border-bottom: 0; }
.faq-item summary{
  position: relative;
  padding: 16px 28px 16px 0;
  color: var(--navy-deep);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.65;
  list-style: none;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  position: absolute;
  top: 50%;
  right: 2px;
  display: grid;
  width: 18px;
  height: 18px;
  border: 1px solid #B8C9DC;
  border-radius: 50%;
  color: var(--accent);
  content: "+";
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  place-items: center;
  text-align: center;
  transform: translateY(calc(-50% - 1px));
}
.faq-item[open] summary::after{ content: "−"; }
.faq-item p{
  margin: -2px 0 18px;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.8;
}

/* ---------- CTA ---------- */
.cta-band{
  background: var(--navy-deep);
  color: var(--cream);
  padding: 90px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-inner{ text-align: center; }
.cta-band h2{
  color: var(--cream);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 16px;
}
.cta-band p{
  color: var(--ink-on-dark);
  max-width: 520px;
  margin: 0 auto 36px;
}
.cta-actions{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* ==========================================================
   Footer
   ========================================================== */
.site-footer{
  background: var(--navy-deep);
  color: var(--cream);
  padding: 64px 0 0;
}
.footer-inner{
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
.footer-brand{
  display: flex;
  gap: 14px;
  max-width: 360px;
}
.footer-brand .brand-mark{
  width: 36px;
  height: 36px;
}
.footer-brand strong{
  font-family: var(--font-display);
  font-size: 1.05rem;
  display: block;
  margin-bottom: 10px;
  color: var(--cream);
}
.footer-brand p{
  font-size: 0.82rem;
  color: var(--ink-on-dark);
  line-height: 1.7;
}
.footer-nav ul{
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 12px 40px;
}
.footer-nav a{
  font-size: 0.85rem;
  color: var(--ink-on-dark);
}
.footer-nav a:hover{ color: var(--gold); }
.footer-bottom{
  text-align: center;
  padding: 24px 0;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.62);
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 960px){
  .reason-grid{ grid-template-columns: 1fr; }
  .service-grid{ grid-template-columns: repeat(2, 1fr); }
  .works-grid{ grid-template-columns: repeat(2, 1fr); }
  .maintenance-grid{ gap: 16px; }
  .maintenance-card{ padding: 28px 20px 22px; }
  .faq-grid{ gap: 16px; }
  .print-strengths{ grid-template-columns: 1fr; }
  .sns-plan-list{ gap: 12px; }
  .sns-plan-heading,
  .sns-plan-content{ padding-right: 18px; padding-left: 18px; }
  .sns-plan-target{ margin-right: 18px; margin-left: 18px; }
  .btn-sns{ margin-right: 18px; margin-left: 18px; }
  .bundle-inner{ gap: 32px; }
}

@media (max-width: 760px){
  .main-nav{
    position: fixed;
    top: 76px; left: 0; right: 0;
    background: var(--navy-deep);
    border-bottom: 1px solid var(--line);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .main-nav.is-open{ max-height: 480px; }
  .main-nav ul{
    flex-direction: column;
    padding: 20px 24px 28px;
    gap: 18px;
  }
  .nav-toggle{ display: flex; }
  .header-actions .btn-small{ display: none; }

  .hero{ padding: 64px 20px 72px; }
  .section{ padding: 72px 0; }

  .brush-underline{
    width: min(220px, 62vw);
    max-width: 62vw;
    height: 16px;
    margin: 8px 0 24px;
    overflow: hidden;
  }
  .brush-path{
    stroke-width: 4;
    stroke-dasharray: 480;
    stroke-dashoffset: 480;
  }

  .service-guide{ display: block; padding: 16px; }
  .service-guide strong{ display: block; margin: 0 0 4px; }
  .service-guide a{ display: inline-block; margin-top: 10px; }
  .service-card .service-summary,
  .service-meta{ min-height: auto; }

  .service-grid{ grid-template-columns: 1fr; }
  .works-grid{ grid-template-columns: 1fr; }
  .maintenance-grid{ grid-template-columns: 1fr; gap: 24px; }
  .maintenance-card.is-featured{ margin: 0; }
  .plan-target{ min-height: auto; }

  .print-price-wrap{ overflow: visible; }
  .print-price-table,
  .print-price-table caption,
  .print-price-table thead,
  .print-price-table tbody,
  .print-price-table tr,
  .print-price-table th,
  .print-price-table td{ display: block; }
  .print-price-table thead{ display: none; }
  .print-price-table caption{ border-radius: 7px 7px 0 0; }
  .print-price-table caption span{ display: block; margin: 5px 0 0; }
  .print-price-table tbody tr{ padding: 18px; border-bottom: 1px solid #E5D4C1; }
  .print-price-table tbody tr:last-child{ border-bottom: 0; }
  .print-price-table tbody th,
  .print-price-table td,
  .print-price-table tbody tr:last-child th,
  .print-price-table tbody tr:last-child td{
    width: auto;
    padding: 0;
    border: 0;
  }
  .print-price-table tbody th{ margin-bottom: 10px; }
  .print-price-table td{ margin-top: 6px; }
  .print-price-table td::before{
    display: inline-block;
    min-width: 9em;
    color: #8A6B57;
    content: attr(data-label) "：";
    font-size: 0.72rem;
    font-weight: 700;
  }
  .sns-plan-list{ grid-template-columns: 1fr; gap: 20px; }
  .sns-plan-target{ min-height: auto; }
  .bundle-plan{ padding: 72px 0; }
  .bundle-inner{ grid-template-columns: 1fr; gap: 34px; }
  .bundle-content{ padding: 24px 20px; }

  .news-item{
    grid-template-columns: auto 1fr 24px;
    gap: 8px 12px;
    padding: 18px 0;
  }
  .news-item:hover{ padding-left: 8px; }
  .news-item time{ grid-column: 1; }
  .news-category{ grid-column: 2; }
  .news-title{ grid-column: 1 / 3; grid-row: 2; }
  .news-arrow{ grid-column: 3; grid-row: 1 / 3; }

  .flow-item{ gap: 20px; }

  .voice-slide{ padding: 30px 24px; }
  .faq-group{ padding: 22px 18px 6px; }

  .footer-inner{ flex-direction: column; }
  .footer-nav ul{ grid-template-columns: 1fr 1fr; }
}

/* ==========================================================
   Company page
   ========================================================== */
.page-hero{ background:var(--surface-soft); border-bottom:1px solid var(--line); padding:42px 0 76px; }
.page-hero-inner{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.breadcrumb{ margin-bottom:64px; font-size:.78rem; color:var(--ink-soft); }
.breadcrumb ol{ display:flex; flex-wrap:wrap; gap:10px; }
.breadcrumb li+li::before{ content:"/"; margin-right:10px; color:#9aabc0; }
.breadcrumb a:hover{ color:var(--accent); }
.page-hero .section-eyebrow{ margin-bottom:12px; }
.page-hero h1{ font-size:clamp(2.35rem,5vw,4rem); line-height:1.4; margin-bottom:16px; }
.page-hero-lead{ color:var(--ink-soft); font-family:var(--font-display); font-size:clamp(1.05rem,2vw,1.35rem); line-height:1.8; }
.company-heading{ display:flex; align-items:end; justify-content:space-between; gap:48px; margin-bottom:48px; }
.company-heading .section-title{ margin-bottom:0; }
.company-heading>p{ max-width:430px; color:var(--navy-deep); font-family:var(--font-display); font-size:1.16rem; line-height:1.8; }
.about-layout{ display:grid; grid-template-columns: .92fr 1.08fr; gap:clamp(32px,6vw,88px); align-items:center; }
.about-photo{ min-height:440px; background:linear-gradient(rgba(23,40,74,.10),rgba(23,40,74,.10)),url("../images/mv-pc.jpg") center / cover no-repeat; border-radius:var(--radius); }
.about-copy>p{ color:var(--ink-soft); margin-bottom:20px; }
.about-points{ margin-top:30px; border-top:1px solid var(--line); }
.about-points li{ display:grid; grid-template-columns:150px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); font-size:.86rem; }
.about-points strong{ color:var(--navy-deep); }
.about-points span{ color:var(--ink-soft); }
.about-service-link{ margin-top:30px; }
.company-services{ background:var(--surface-soft); }
.company-service-list{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.company-service{ display:grid; grid-template-columns:54px 1fr; gap:18px; padding:34px; background:var(--surface); border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .2s ease; }
.company-service:hover{ background:#f9fbfe; }
.company-service>span,.commitment>span{ color:var(--accent); font-family:var(--font-display); font-size:1.15rem; }
.company-service h3{ font-size:1.22rem; margin-bottom:12px; }
.company-service p{ color:var(--ink-soft); font-size:.88rem; line-height:1.85; }
.company-service a{ display:inline-block; margin-top:18px; color:var(--navy); font-size:.8rem; font-weight:700; }
.company-service a b{ color:var(--accent); margin-left:5px; }
.template-plan{ background:#fbf7ef; }
.template-plan:hover{ background:#fbf7ef; }
.price-note{ margin-top:15px; padding-left:13px; border-left:2px solid var(--gold); }
.price-note strong{ display:block; color:var(--navy-deep); font-size:.95rem; }
.price-note small{ display:block; margin-top:2px; font-size:.72rem; }
.one-stop{ background:var(--navy-deep); padding:104px 0; color:var(--ink-on-dark); }
.one-stop-inner{ display:grid; grid-template-columns:1fr .9fr; gap:clamp(44px,8vw,120px); align-items:center; }
.one-stop .section-eyebrow{ color:#f0c978; }
.one-stop h2{ color:var(--cream); font-size:clamp(1.65rem,3.2vw,2.55rem); margin-bottom:22px; }
.one-stop h2+p{ max-width:550px; }
.support-flow{ counter-reset:flow; }
.support-flow li{ position:relative; display:flex; align-items:center; gap:20px; padding:17px 0; border-bottom:1px solid rgba(255,255,255,.18); }
.support-flow li:not(:last-child)::after{ content:"↓"; position:absolute; right:5px; bottom:-14px; color:var(--gold); z-index:1; }
.support-flow span{ color:var(--gold); font-size:.76rem; letter-spacing:.08em; }
.support-flow strong{ color:var(--cream); font-family:var(--font-display); font-size:1.08rem; font-weight:500; }
.commitment-grid{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.commitment{ padding:28px 24px 32px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.commitment h3{ font-size:1rem; margin:22px 0 10px; }
.commitment p{ color:var(--ink-soft); font-size:.82rem; line-height:1.8; }
.strength-stats{ display:flex; gap:16px; margin:0 0 18px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.strength-stats p{ display:grid; grid-template-columns:auto auto; align-items:baseline; column-gap:3px; line-height:1; }
.strength-stats strong{ color:var(--navy-deep); font-family:var(--font-display); font-size:2rem; font-weight:600; letter-spacing:0; }
.strength-stats small{ color:var(--accent); font-size:.7rem; font-weight:700; }
.strength-stats em{ grid-column:1 / -1; margin-top:5px; color:var(--ink-soft); font-size:.64rem; font-style:normal; line-height:1.4; }
.strength-contact{ display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:38px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.strength-contact p{ color:var(--ink-soft); font-size:.86rem; }
.strength-contact a{ color:var(--navy); font-size:.86rem; font-weight:700; white-space:nowrap; }
.strength-contact a span{ color:var(--accent); margin-left:6px; }
.company-profile{ background:var(--surface-soft); }
.profile-table-wrap{ max-width:880px; background:var(--surface); border:1px solid var(--line); }
.profile-table-wrap table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.profile-table-wrap th,.profile-table-wrap td{ padding:18px 24px; text-align:left; border-bottom:1px solid var(--line); }
.profile-table-wrap tr:last-child th,.profile-table-wrap tr:last-child td{ border-bottom:0; }
.profile-table-wrap th{ width:27%; background:#f8fafc; color:var(--navy-deep); font-weight:700; }
.profile-table-wrap td{ color:var(--ink-soft); }
.profile-table-wrap td a{ color:var(--navy); text-decoration:underline; text-underline-offset:3px; }
.profile-caption{ max-width:880px; margin-top:12px; color:var(--ink-soft); font-size:.73rem; }
.policy-inner{ max-width:900px; }
.policy-intro{ max-width:760px; margin-bottom:70px; color:var(--ink-soft); }
.policy-block+.policy-block{ margin-top:88px; padding-top:88px; border-top:1px solid var(--line); }
.policy-list{ border-top:1px solid var(--line); }
.policy-list section{ padding:26px 0 28px; border-bottom:1px solid var(--line); }
.policy-list h3{ margin-bottom:10px; font-family:var(--font-body); font-size:1rem; font-weight:700; }
.policy-list p{ max-width:760px; color:var(--ink-soft); font-size:.88rem; }
.policy-date{ margin-top:52px; color:var(--ink-soft); font-size:.78rem; line-height:2; }
@media (max-width:760px){
  .page-hero{ padding:28px 0 52px; }.breadcrumb{ margin-bottom:42px; }.company-heading{ display:block; margin-bottom:32px; }.company-heading .section-title{ margin-bottom:16px; }.company-heading>p{ font-size:1.02rem; }.about-layout,.one-stop-inner{ grid-template-columns:1fr; }.about-photo{ min-height:270px; }.about-points li{ grid-template-columns:1fr; gap:2px; }.company-service-list,.commitment-grid{ grid-template-columns:1fr; }.company-service{ padding:28px 22px; }.one-stop{ padding:72px 0; }.profile-table-wrap th,.profile-table-wrap td{ display:block; width:100%; padding:13px 18px; }.profile-table-wrap th{ padding-bottom:3px; }.profile-table-wrap td{ padding-top:3px; }.profile-table-wrap tr{ display:block; padding:0 0 10px; border-bottom:1px solid var(--line); }.profile-table-wrap tr:last-child{ border-bottom:0; }.profile-table-wrap th,.profile-table-wrap td{ border-bottom:0; }
  .policy-intro{ margin-bottom:52px; }.policy-block+.policy-block{ margin-top:64px; padding-top:64px; }.policy-list section{ padding:22px 0; }
  .strength-contact{ display:block; }.strength-contact a{ display:inline-block; margin-top:10px; }
}