/* おまかせガードUTM 静的サイト - 参照 page.tsx に合わせたスタイル */
:root {
  --teal-50: #f0fdfa;
  --teal-100: #ccfbf1;
  --teal-200: #99f6e4;
  --teal-300: #5eead4;
  --teal-400: #2dd4bf;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-700: #0f766e;
  --teal-800: #115e59;
  --teal-900: #134e4a;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --emerald-100: #d1fae5;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065f46;
  --orange-100: #ffedd5;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --yellow-400: #facc15;
  --green-100: #dcfce7;
  --green-600: #16a34a;
  --container-max: 80rem;
  --font-sans: 'Noto Sans JP', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #fff;
  color: var(--gray-900);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* キーボードフォーカス（マウス操作では出さない） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--teal-500);
  outline-offset: 2px;
}
/* フォームは既存の focus スタイルがあるため outline を統合 */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 2px rgba(20,184,166,.2);
}

/* Wrapper */
.omakase-guard-utm-wrapper { min-height: 100vh; }

/* Nav */
.omakase-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
}
.omakase-nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0.75rem 1rem;
}
@media (min-width: 640px) { .omakase-nav-inner { padding: 1rem 1.5rem; } }
.nav-flex { display: flex; align-items: center; justify-content: space-between; }
.omakase-logo img { height: 2rem; width: auto; }
@media (min-width: 640px) { .omakase-logo img { height: 2.5rem; } }
.nav-desktop { display: none; }
@media (min-width: 1024px) {
  .nav-desktop { display: flex; align-items: center; gap: 1.5rem; }
  .nav-desktop a {
    font-size: 0.875rem; font-weight: 500; color: var(--gray-900);
    white-space: nowrap;
    transition: color .2s;
  }
  .nav-desktop a:hover { color: var(--teal-600); }
  .nav-desktop a.nav-current { color: var(--teal-600); font-weight: 700; }
  .nav-desktop .btn-estimate {
    background: var(--teal-600); color: #fff;
    padding: 0.5rem 1.25rem; border-radius: 0.5rem;
    font-weight: 600; font-size: 0.875rem;
    transition: background .2s;
  }
  .nav-desktop .btn-estimate:hover { background: var(--teal-700); }
}
.nav-mobile-btn {
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  width: 2.5rem; height: 2.5rem;
  color: var(--gray-900); font-size: 1.5rem;
}
@media (min-width: 1024px) { .nav-mobile-btn { display: none; } }
.nav-mobile-btn:hover { color: var(--teal-600); }
.nav-mobile-menu {
  display: none;
  background: #fff; border-top: 1px solid var(--gray-100);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
}
.nav-mobile-menu.is-open { display: block; }
@media (min-width: 1024px) { .nav-mobile-menu { display: none !important; } }
.nav-mobile-menu .inner { padding: 1rem; }
.nav-mobile-menu a {
  display: block; padding: 0.75rem 1rem;
  font-size: 0.875rem; font-weight: 500; color: var(--gray-900);
  border-radius: 0.5rem; transition: color .2s, background .2s;
}
.nav-mobile-menu a:hover { color: var(--teal-600); background: var(--gray-50); }
.nav-mobile-menu .btn-estimate {
  display: block; text-align: center;
  background: var(--teal-600); color: #fff;
  padding: 0.75rem 1.25rem; border-radius: 0.5rem;
  font-weight: 600; font-size: 0.875rem;
}
.nav-mobile-menu .btn-estimate:hover { background: var(--teal-700); }
.nav-mobile-menu a.nav-current { color: var(--teal-600); font-weight: 700; }

/* Hero */
.omakase-hero {
  position: relative;
  padding-top: 6rem; padding-bottom: 4rem;
  background: linear-gradient(to bottom right, var(--gray-900), var(--gray-800), var(--gray-900));
  overflow: hidden;
}
@media (min-width: 640px) {
  .omakase-hero { padding-top: 8rem; padding-bottom: 6rem; }
}
.omakase-hero::before {
  content: '';
  position: absolute; inset: 0;
  opacity: .1;
  background-size: cover; background-position: center;
  background-image: url(../image/top_back.webp), repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.05) 35px, rgba(255,255,255,.05) 70px);
}
.omakase-hero .container { position: relative; z-index: 10; }
.omakase-hero .container-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 640px) { .omakase-hero .container-inner { padding: 0 1.5rem; } }
.omakase-hero-title {
  font-size: 2.25rem; line-height: 1.2; font-weight: 900; color: #fff;
  margin-bottom: 1.5rem; text-align: center;
}
.omakase-hero-title .accent { color: var(--teal-400); }
@media (min-width: 640px) { .omakase-hero-title { font-size: 3rem; } }
@media (min-width: 768px) { .omakase-hero-title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .omakase-hero-title { font-size: 4.5rem; } }
.hero-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(20,184,166,.2);
  border: 2px solid var(--teal-400);
  border-radius: 9999px;
  color: var(--teal-300); font-size: 0.75rem; font-weight: 700;
  margin-bottom: 1.5rem;
}
@media (min-width: 640px) { .hero-badge { font-size: 0.875rem; } }
.hero-subtitle {
  font-size: 1.25rem; font-weight: 700; color: #fff;
  margin-bottom: 1rem; line-height: 1.5;
}
@media (min-width: 640px) { .hero-subtitle { font-size: 1.5rem; } }
@media (min-width: 768px) { .hero-subtitle { font-size: 1.875rem; } }
.hero-desc { font-size: 1rem; color: var(--gray-300); line-height: 1.5; max-width: 48rem; margin: 0 auto 2rem; }
@media (min-width: 640px) { .hero-desc { font-size: 1.125rem; } }
.hero-cta { display: flex; flex-direction: column; gap: 1rem; justify-content: center; align-items: center; }
@media (min-width: 640px) { .hero-cta { flex-direction: row; } }
.hero-cta a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.5rem; border-radius: 0.5rem;
  font-weight: 700; font-size: 1rem;
  transition: background .2s, box-shadow .2s;
  width: 100%;
}
@media (min-width: 640px) { .hero-cta a { width: auto; padding: 1rem 2rem; font-size: 1.125rem; } }
.hero-cta .btn-tel {
  background: var(--teal-500); color: #fff;
  white-space: nowrap;
}
.hero-cta .btn-tel:hover { background: var(--teal-600); box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); }
.hero-cta .btn-form {
  background: transparent; border: 2px solid #fff; color: #fff;
  white-space: nowrap;
}
.hero-cta .btn-form:hover { background: #fff; color: var(--gray-900); }
.hero-cta .btn-tel i, .hero-cta .btn-form i { margin-right: 0.5rem; font-size: 1.25rem; }
.hero-image-wrap {
  position: relative; max-width: 56rem; margin: 2rem auto 0;
}
.hero-image-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(20,184,166,.2), rgba(59,130,246,.2));
  border-radius: 9999px; filter: blur(24px);
}
.hero-image-wrap img { position: relative; z-index: 10; width: 100%; height: auto; border-radius: 1rem; }

/* Section common */
.sec { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 640px) { .sec { padding-top: 6rem; padding-bottom: 6rem; } }
.sec-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .sec-inner { padding: 0 1.5rem; } }
.sec-header { text-align: center; margin-bottom: 3rem; }
@media (min-width: 640px) { .sec-header { margin-bottom: 4rem; } }
.sec-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(20,184,166,.1);
  border: 2px solid var(--teal-500);
  border-radius: 9999px;
  color: var(--teal-600); font-size: 0.75rem; font-weight: 700;
  margin-bottom: 1rem;
}
@media (min-width: 640px) { .sec-badge { margin-bottom: 1.5rem; font-size: 0.875rem; } }
.sec-title {
  font-size: 1.875rem; font-weight: 900; color: var(--gray-900);
  margin-bottom: 1rem; line-height: 1.2;
}
@media (min-width: 640px) { .sec-title { font-size: 2.25rem; } }
@media (min-width: 768px) { .sec-title { font-size: 3rem; } }
.sec-title.accent-teal .accent { color: var(--teal-600); }
.sec-title.accent-red .accent { color: var(--red-500); }
.sec-desc { font-size: 0.875rem; color: var(--gray-600); max-width: 48rem; margin: 0 auto; line-height: 1.5; }
@media (min-width: 640px) { .sec-desc { font-size: 1rem; } }
.sec-line { width: 4rem; height: 4px; background: var(--teal-500); margin: 1.5rem auto 0; }

/* What is UTM */
.omakase-what-is-utm { background: #fff; }
.omakase-what-is-utm .sec-badge span { color: var(--teal-600); }
.grid-utm { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .grid-utm { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } }
.utm-text h3 { font-size: 1.5rem; font-weight: 700; color: var(--gray-900); margin-bottom: 1.5rem; line-height: 1.2; }
@media (min-width: 640px) { .utm-text h3 { font-size: 1.875rem; } }
.utm-text p { font-size: 0.875rem; color: var(--gray-700); line-height: 1.5; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .utm-text p { font-size: 1rem; } }
.utm-features { display: flex; flex-direction: column; gap: 1rem; }
.utm-feature {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.utm-feature > div {
  flex: 1;
  min-width: 0;
  padding-top: 0;
  margin-top: 0;
}
.utm-feature-icon {
  width: 2.5rem; height: 2.5rem;
  max-width: 2.5rem; min-width: 2.5rem; min-height: 2.5rem;
  aspect-ratio: 1 / 1;
  border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; flex-grow: 0;
  margin-right: 1rem;
}
.utm-feature-icon.red { background: var(--red-100); }
.utm-feature-icon.red i { font-size: 1.25rem; color: var(--red-500); }
.utm-feature-icon.orange { background: #ffedd5; }
.utm-feature-icon.orange i { font-size: 1.25rem; color: var(--orange-500); }
.utm-feature-icon.yellow { background: #fef9c3; }
.utm-feature-icon.yellow i { font-size: 1.25rem; color: #ca8a04; }
.utm-feature-icon.teal { background: var(--teal-100); }
.utm-feature-icon.teal i { font-size: 1.25rem; color: var(--teal-600); }
.utm-feature h4 {
  font-size: 0.875rem; font-weight: 700; color: var(--gray-900);
  margin: 0 0 0.25rem 0; line-height: 1.35;
}
@media (min-width: 640px) { .utm-feature h4 { font-size: 1rem; } }
.utm-feature h4 a:hover { color: var(--teal-600); }
.utm-feature p { font-size: 0.75rem; color: var(--gray-600); margin: 0; }
@media (min-width: 640px) { .utm-feature p { font-size: 0.875rem; } }
.utm-visual { order: 1; }
@media (min-width: 1024px) { .utm-visual { order: 2; } }
.utm-visual .img-wrap {
  width: 100%; height: 320px; border-radius: 1rem;
  overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
}
@media (min-width: 640px) { .utm-visual .img-wrap { height: 420px; } }
.utm-visual .img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* UTM vs No UTM */
.compare-grid { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 768px) { .compare-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.compare-box {
  border-radius: 1rem; padding: 1.5rem; position: relative; overflow: hidden;
}
@media (min-width: 640px) { .compare-box { padding: 2rem; } }
.compare-box.danger {
  background: var(--red-50); border: 2px solid var(--red-200);
}
.compare-box.danger .tag { background: var(--red-500); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 0.375rem 1rem; border-radius: 0 0 0 0.5rem; position: absolute; top: 0; right: 0; }
.compare-box.safe {
  background: var(--teal-50); border: 2px solid var(--teal-200);
}
.compare-box.safe .tag { background: var(--teal-500); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 0.375rem 1rem; border-radius: 0 0 0 0.5rem; position: absolute; top: 0; right: 0; }
.compare-box .head { display: flex; align-items: center; margin-bottom: 1.5rem; }
.compare-box .head .icon {
  width: 3rem; height: 3rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-right: 1rem;
}
.compare-box.danger .head .icon { background: var(--red-200); }
.compare-box.danger .head .icon i { font-size: 1.5rem; color: var(--red-600); }
.compare-box.safe .head .icon { background: var(--teal-200); }
.compare-box.safe .head .icon i { font-size: 1.5rem; color: var(--teal-600); }
.compare-box .head h4 { font-size: 1.125rem; font-weight: 700; margin: 0; }
@media (min-width: 640px) { .compare-box .head h4 { font-size: 1.25rem; } }
.compare-box.danger .head h4 { color: var(--red-700); }
.compare-box.safe .head h4 { color: var(--teal-700); }
.compare-box .img-box { width: 100%; height: 200px; border-radius: 0.75rem; overflow: hidden; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .compare-box .img-box { height: 240px; } }
.compare-box .img-box img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.compare-box ul { list-style: none; padding: 0; margin: 0; }
.compare-box li { display: flex; align-items: flex-start; margin-bottom: 0.75rem; font-size: 0.875rem; color: var(--gray-800); }
.compare-box li .dot {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-right: 0.75rem; margin-top: 2px;
}
.compare-box.danger li .dot { background: var(--red-200); }
.compare-box.danger li .dot i { color: var(--red-600); font-size: 0.875rem; }
.compare-box.safe li .dot { background: var(--teal-200); }
.compare-box.safe li .dot i { color: var(--teal-600); font-size: 0.875rem; }

/* Who needs UTM (dark box) */
.omakase-who-needs {
  background: linear-gradient(to bottom right, var(--gray-900), var(--gray-800));
  border-radius: 1rem; padding: 2rem;
}
@media (min-width: 640px) { .omakase-who-needs { border-radius: 1.5rem; padding: 3rem; } }
.omakase-who-needs .sec-title { color: #fff; text-align: center; }
.omakase-who-needs .sec-desc { color: var(--gray-400); margin-bottom: 2rem; text-align: center; }
@media (min-width: 640px) { .omakase-who-needs .sec-desc { margin-bottom: 2.5rem; } }
.who-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .who-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (min-width: 1024px) { .who-grid { grid-template-columns: repeat(4, 1fr); } }
.who-card {
  background: rgba(255,255,255,.1); backdrop-filter: blur(4px);
  border-radius: 0.75rem; padding: 1.25rem; text-align: center;
  transition: background .2s;
}
@media (min-width: 640px) { .who-card { padding: 1.5rem; } }
.who-card:hover { background: rgba(255,255,255,.15); }
.who-card .icon {
  width: 4rem; height: 4rem;
  background: rgba(20,184,166,.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.who-card .icon i { font-size: 1.875rem; color: var(--teal-400); }
.who-card h4 { font-size: 0.875rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem; }
@media (min-width: 640px) { .who-card h4 { font-size: 1rem; } }
.who-card p { font-size: 0.75rem; color: var(--gray-400); line-height: 1.5; margin: 0; }
.who-cta { text-align: center; margin-top: 2rem; }
@media (min-width: 640px) { .who-cta { margin-top: 2.5rem; } }
.who-cta a {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal-500); color: #fff;
  padding: 1rem 2rem; border-radius: 0.5rem;
  font-weight: 700; font-size: 1rem;
  transition: background .2s, box-shadow .2s;
}
.who-cta a:hover { background: var(--teal-600); box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); }
.who-cta a i { margin-left: 0.5rem; }

/* Why Affordable */
.reason-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .reason-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .reason-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.reason-card {
  background: #fff; border-radius: 1rem; padding: 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); border: 1px solid var(--gray-100);
  display: flex; flex-direction: column; transition: box-shadow .2s;
}
@media (min-width: 640px) { .reason-card { padding: 2rem; } }
.reason-card:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); }
.reason-card .pill {
  background: var(--teal-500); color: #fff;
  border-radius: 9999px;
  padding: 0.75rem 1.5rem; text-align: center;
  font-size: 1rem; font-weight: 700; line-height: 1.3;
  margin-bottom: 1.5rem;
}
@media (min-width: 640px) { .reason-card .pill { padding: 1rem 2rem; font-size: 1.125rem; } }
.reason-card > p { font-size: 0.875rem; color: var(--gray-700); line-height: 1.5; margin-bottom: 1.5rem; flex: 1; }
@media (min-width: 640px) { .reason-card > p { font-size: 1rem; } }
.reason-card .gray-box {
  background: var(--gray-50); border-radius: 0.5rem; padding: 1rem;
  margin-top: auto;
}
@media (min-width: 640px) { .reason-card .gray-box { padding: 1.5rem; } }
.reason-compare { display: flex; align-items: center; justify-content: space-between; }
.reason-compare .item { text-align: center; flex: 1; }
.reason-compare .item .label { font-size: 0.75rem; color: var(--gray-600); margin-bottom: 0.5rem; }
@media (min-width: 640px) { .reason-compare .item .label { font-size: 0.875rem; } }
.reason-compare .item .icon-box {
  width: 3rem; height: 3rem; border-radius: 0.5rem;
  margin: 0 auto 0.5rem;
  display: flex; align-items: center; justify-content: center;
}
@media (min-width: 640px) { .reason-compare .item .icon-box { width: 4rem; height: 4rem; } }
.reason-compare .item .icon-box.red { background: var(--red-100); }
.reason-compare .item .icon-box.red i { font-size: 1.5rem; color: var(--red-600); }
@media (min-width: 640px) { .reason-compare .item .icon-box.red i { font-size: 1.875rem; } }
.reason-compare .item .icon-box.green { background: var(--green-100); }
.reason-compare .item .icon-box.green i { font-size: 1.5rem; color: var(--green-600); }
@media (min-width: 640px) { .reason-compare .item .icon-box.green i { font-size: 1.875rem; } }
.reason-compare .item .sub { font-size: 0.75rem; color: var(--gray-500); }
.reason-compare .arrow { flex-shrink: 0; margin: 0 0.5rem; }
@media (min-width: 640px) { .reason-compare .arrow { margin: 0 1rem; } }
.reason-compare .arrow i { font-size: 1.5rem; color: var(--teal-500); }
@media (min-width: 640px) { .reason-compare .arrow i { font-size: 1.875rem; } }
.reason-steps { display: flex; flex-direction: column; gap: 1rem; }
.reason-step { display: flex; align-items: center; }
.reason-step .icon-box {
  width: 2.5rem; height: 2.5rem; border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-right: 0.75rem;
}
@media (min-width: 640px) { .reason-step .icon-box { width: 3rem; height: 3rem; } }
.reason-step .icon-box.teal { background: var(--teal-100); }
.reason-step .icon-box.teal i { font-size: 1.5rem; color: var(--teal-600); }
.reason-step .icon-box.green { background: var(--green-100); }
.reason-step .icon-box.green i { font-size: 1.5rem; color: var(--green-600); }
.reason-step .title { font-size: 0.75rem; font-weight: 600; color: var(--gray-900); margin-bottom: 0.25rem; }
@media (min-width: 640px) { .reason-step .title { font-size: 0.875rem; } }
.reason-step .sub { font-size: 0.75rem; color: var(--gray-600); }

/* Network diagram section */
.omakase-network { background: var(--gray-900); }
.omakase-network .sec-title { color: #fff; }
.omakase-network .sec-desc { color: var(--gray-300); }
.omakase-network .sec-badge { border-color: var(--teal-500); }
.omakase-network .sec-badge span { color: var(--teal-600); }
.network-card {
  background: #fff; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  overflow: hidden;
}
@media (min-width: 640px) { .network-card { border-radius: 1.5rem; } }
.network-card .img-block { padding: 1.5rem; }
@media (min-width: 640px) { .network-card .img-block { padding: 2rem; } }
@media (min-width: 768px) { .network-card .img-block { padding: 3rem; } }
.network-card .img-block img { width: 100%; height: auto; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }
.network-card .text-block { background: var(--gray-50); padding: 1.5rem; }
@media (min-width: 640px) { .network-card .text-block { padding: 2rem; } }
@media (min-width: 768px) { .network-card .text-block { padding: 3rem; } }
.network-features { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1024px) { .network-features { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.network-features .item { text-align: center; }
.network-features .item .icon {
  width: 3.5rem; height: 3.5rem; background: var(--teal-500);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
@media (min-width: 640px) { .network-features .item .icon { width: 4rem; height: 4rem; } }
.network-features .item .icon i { font-size: 1.5rem; color: #fff; }
@media (min-width: 640px) { .network-features .item .icon i { font-size: 1.875rem; } }
.network-features .item h3 { font-size: 1.125rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.75rem; }
@media (min-width: 640px) { .network-features .item h3 { font-size: 1.25rem; } }
.network-features .item p { font-size: 0.75rem; color: var(--gray-700); line-height: 1.5; margin: 0; }
@media (min-width: 640px) { .network-features .item p { font-size: 0.875rem; } }
.network-features .item.span-2 { grid-column: span 1; }
@media (min-width: 1024px) { .network-features .item.span-2 { grid-column: span 1; } }

/* Pricing */
.omakase-pricing { background: var(--gray-50); }
.plan-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 3rem; }
@media (max-width: 1023px) { .plan-grid { grid-template-columns: 1fr !important; } }
@media (min-width: 1024px) { .plan-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 4rem; } }
.plan-card {
  background: #fff; border-radius: 1rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
  overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid var(--gray-200); transition: box-shadow .2s;
}
.plan-card:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); }
.plan-card.featured { border: 2px solid var(--orange-400); }
.plan-card .plan-header {
  padding: 2rem; text-align: center;
}
@media (min-width: 640px) { .plan-card .plan-header { padding: 2.5rem; } }
.plan-card .plan-header.lease {
  background: linear-gradient(to bottom right, var(--emerald-800), var(--emerald-700));
}
.plan-card .plan-header.rent {
  background: linear-gradient(to bottom right, var(--orange-500), var(--orange-600));
}
.plan-card .plan-header.cash {
  background: linear-gradient(to bottom right, var(--gray-700), var(--gray-600));
}
.plan-card .plan-header .badge {
  display: inline-block; padding: 0.25rem 1rem; border-radius: 9999px;
  font-size: 0.75rem; font-weight: 600; margin-bottom: 1rem;
}
.plan-card .plan-header.lease .badge { background: rgba(255,255,255,.1); color: #99f6e4; }
.plan-card .plan-header.rent .badge { background: rgba(255,255,255,.2); color: rgba(255,255,255,.9); }
.plan-card .plan-header.cash .badge { background: rgba(255,255,255,.1); color: var(--gray-300); }
.plan-card .plan-header h3 { font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 1.25rem; }
@media (min-width: 640px) { .plan-card .plan-header h3 { font-size: 1.5rem; } }
.plan-card .plan-header .price { display: flex; align-items: flex-end; justify-content: center; gap: 0.25rem; flex-wrap: wrap; }
.plan-card .plan-header .price .prefix { font-size: 0.875rem; padding-bottom: 0.25rem; }
.plan-card .plan-header.lease .price .prefix { color: #99f6e4; }
.plan-card .plan-header.rent .price .prefix { color: rgba(255,255,255,.9); }
.plan-card .plan-header.cash .price .prefix { color: var(--gray-300); }
.plan-card .plan-header .price .num { font-size: 3rem; font-weight: 900; color: #fff; line-height: 1; }
@media (min-width: 640px) { .plan-card .plan-header .price .num { font-size: 3.75rem; } }
.plan-card .plan-header .price .suffix { font-size: 0.875rem; padding-bottom: 0.25rem; }
.plan-card .plan-header.lease .price .suffix { color: #99f6e4; }
.plan-card .plan-header.rent .price .suffix { color: rgba(255,255,255,.9); }
.plan-card .plan-header.cash .price .suffix { color: var(--gray-300); }
.plan-card .plan-header .license {
  display: inline-block; margin-top: 1rem; padding: 0.375rem 1rem;
  border-radius: 9999px; font-size: 0.75rem; font-weight: 700; color: #fff;
}
.plan-card .plan-header.lease .license { background: rgba(255,255,255,.15); }
.plan-card .plan-header.rent .license { background: rgba(255,255,255,.2); }
.plan-card .plan-header.cash .license { background: rgba(255,255,255,.15); }
.plan-card .plan-body { padding: 1.5rem; flex: 1; }
@media (min-width: 640px) { .plan-card .plan-body { padding: 2rem; } }
.plan-card .plan-body ul { list-style: none; padding: 0; margin: 0; }
.plan-card .plan-body li { display: flex; align-items: center; margin-bottom: 1rem; font-size: 0.875rem; color: var(--gray-700); }
.plan-card .plan-body li .check {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-right: 0.75rem;
}
.plan-card.lease .plan-body li .check { background: var(--emerald-100); }
.plan-card.lease .plan-body li .check i { color: var(--emerald-600); font-size: 0.875rem; }
.plan-card.rent .plan-body li .check { background: var(--orange-100); }
.plan-card.rent .plan-body li .check i { color: var(--orange-600); font-size: 0.875rem; }
.plan-card.cash .plan-body li .check { background: var(--gray-100); }
.plan-card.cash .plan-body li .check i { color: var(--gray-600); font-size: 0.875rem; }
.plan-card.plan-cash { grid-column: span 1; }
@media (min-width: 1024px) { .plan-card.plan-cash { grid-column: span 1; } }

/* Cost comparison table */
.cost-table-wrap { background: #fff; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); padding: 1.5rem; }
@media (min-width: 640px) { .cost-table-wrap { padding: 2rem; } }
.cost-table-wrap h3 { font-size: 1.25rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.5rem; text-align: center; }
@media (min-width: 640px) { .cost-table-wrap h3 { font-size: 1.5rem; } }
.cost-table-wrap .table-desc { font-size: 0.875rem; color: var(--gray-600); text-align: center; margin-bottom: 1.5rem; }
.cost-table-wrap .overflow-x { overflow-x: auto; }
.cost-table-wrap table { width: 100%; min-width: 500px; border-collapse: collapse; }
.cost-table-wrap th {
  text-align: left; padding: 0.75rem 0.5rem;
  font-size: 0.75rem; font-weight: 700; color: var(--gray-700);
  border-bottom: 2px solid var(--gray-200);
}
@media (min-width: 640px) { .cost-table-wrap th { padding: 1rem 1rem; font-size: 0.875rem; } }
.cost-table-wrap th.text-center { text-align: center; }
.cost-table-wrap td {
  padding: 0.75rem 0.5rem; font-size: 0.75rem;
  border-bottom: 1px solid var(--gray-100);
}
@media (min-width: 640px) { .cost-table-wrap td { padding: 1rem 1rem; font-size: 0.875rem; } }
.cost-table-wrap td.text-center { text-align: center; }
.cost-table-wrap .row-lease { font-weight: 600; color: var(--gray-900); }
.cost-table-wrap .row-rent { background: #fff7ed; }
.cost-table-wrap .row-cash { font-weight: 600; color: var(--gray-900); }
.cost-table-wrap .row-other { background: var(--red-50); font-weight: 700; }
.cost-table-wrap .cost-green { font-size: 1rem; font-weight: 700; color: var(--green-600); }
@media (min-width: 640px) { .cost-table-wrap .cost-green { font-size: 1.125rem; } }
.cost-table-wrap .cost-red { font-size: 1.125rem; font-weight: 700; color: var(--red-600); }
@media (min-width: 640px) { .cost-table-wrap .cost-red { font-size: 1.25rem; } }
.cost-table-wrap .foot-note { margin-top: 1.5rem; text-align: center; }
.cost-table-wrap .foot-note .main { font-size: 1rem; font-weight: 700; color: var(--orange-600); margin-bottom: 0.5rem; }
@media (min-width: 640px) { .foot-note .main { font-size: 1.125rem; } }
.cost-table-wrap .foot-note .main i { margin-right: 0.5rem; }
.cost-table-wrap .foot-note .sub { font-size: 0.75rem; color: var(--gray-600); }
@media (min-width: 640px) { .cost-table-wrap .foot-note .sub { font-size: 0.875rem; } }

/* Specs */
.spec-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .spec-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
.spec-card {
  background: #fff; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1);
  overflow: hidden; border: 1px solid var(--gray-100);
}
.spec-card .spec-header {
  background: linear-gradient(to right, var(--gray-900), var(--gray-800));
  padding: 1rem; display: flex; align-items: center;
}
@media (min-width: 640px) { .spec-card .spec-header { padding: 1.5rem; } }
.spec-card .spec-header .icon {
  width: 3rem; height: 3rem; background: var(--teal-500);
  border-radius: 0.5rem; display: flex; align-items: center; justify-content: center;
  margin-right: 0.75rem;
}
@media (min-width: 640px) { .spec-card .spec-header .icon { width: 3.5rem; height: 3.5rem; margin-right: 1rem; } }
.spec-card .spec-header .icon i { font-size: 1.25rem; color: #fff; }
@media (min-width: 640px) { .spec-card .spec-header .icon i { font-size: 1.5rem; } }
.spec-card .spec-header h3 { font-size: 1.25rem; font-weight: 700; color: #fff; margin: 0; }
@media (min-width: 640px) { .spec-card .spec-header h3 { font-size: 1.5rem; } }
.spec-card.spec-security .spec-header { background: linear-gradient(to right, var(--teal-500), var(--teal-600)); }
.spec-card.spec-security .spec-header .icon { background: #fff; }
.spec-card.spec-security .spec-header .icon i { color: var(--teal-600); }
.spec-card .spec-body { padding: 1.5rem; }
@media (min-width: 640px) { .spec-card .spec-body { padding: 2rem; } }
.spec-card .spec-body .row {
  border-bottom: 1px solid var(--gray-100); padding-bottom: 0.75rem; margin-bottom: 0.75rem;
}
@media (min-width: 640px) { .spec-card .spec-body .row { padding-bottom: 1rem; margin-bottom: 1rem; } }
.spec-card .spec-body .row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.spec-card .spec-body .label { font-size: 0.75rem; font-weight: 600; color: var(--gray-500); margin-bottom: 0.5rem; }
@media (min-width: 640px) { .spec-card .spec-body .label { font-size: 0.875rem; } }
.spec-card .spec-body .value { font-size: 0.875rem; font-weight: 500; color: var(--gray-900); }
@media (min-width: 640px) { .spec-card .spec-body .value { font-size: 1rem; } }
.spec-card .spec-body .value small { font-size: 0.75rem; color: var(--gray-600); }
@media (min-width: 640px) { .spec-card .spec-body .value small { font-size: 0.875rem; } }
.spec-throughput {
  background: linear-gradient(to right, var(--teal-50), transparent);
  border-left: 4px solid var(--teal-500); padding: 1rem; border-radius: 0 0.5rem 0.5rem 0;
  margin-bottom: 1rem;
}
@media (min-width: 640px) { .spec-throughput { padding: 1.5rem; margin-bottom: 1.5rem; } }
.spec-throughput .flex { display: flex; align-items: center; margin-bottom: 0.5rem; }
.spec-throughput .flex i { font-size: 1.5rem; color: var(--teal-600); margin-right: 0.75rem; }
@media (min-width: 640px) { .spec-throughput .flex i { font-size: 1.875rem; } }
.spec-throughput .flex .num { font-size: 1.875rem; font-weight: 900; color: var(--gray-900); }
@media (min-width: 640px) { .spec-throughput .flex .num { font-size: 2.25rem; } }
.spec-throughput p { font-size: 0.75rem; color: var(--gray-600); margin-top: 0.5rem; }
@media (min-width: 640px) { .spec-throughput p { font-size: 0.875rem; } }
.spec-list h4 { font-size: 1rem; font-weight: 700; color: var(--gray-900); margin-bottom: 1rem; }
@media (min-width: 640px) { .spec-list h4 { font-size: 1.125rem; } }
.spec-list-title { font-size: 1rem; font-weight: 700; color: var(--gray-900); margin-bottom: 1rem; }
@media (min-width: 640px) { .spec-list-title { font-size: 1.125rem; } }
.spec-list .spec-item { display: flex; align-items: flex-start; margin-bottom: 0.75rem; }
@media (min-width: 640px) { .spec-list .spec-item { margin-bottom: 1rem; } }
.spec-list .spec-item > div {
  flex: 1;
  min-width: 0;
  padding-top: 0;
  margin-top: 0;
}
.spec-list .spec-item .icon {
  width: 2.5rem; height: 2.5rem;
  max-width: 2.5rem; min-width: 2.5rem; min-height: 2.5rem;
  aspect-ratio: 1 / 1;
  border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; flex-grow: 0;
  margin-right: 0.75rem;
}
@media (min-width: 640px) {
  .spec-list .spec-item .icon {
    width: 2.5rem; height: 2.5rem;
    max-width: 2.5rem; min-width: 2.5rem; min-height: 2.5rem;
  }
}
.spec-list .spec-item .icon.teal { background: var(--teal-100); }
.spec-list .spec-item .icon.teal i { font-size: 1.5rem; color: var(--teal-600); }
@media (min-width: 640px) { .spec-list .spec-item .icon.teal i { font-size: 1.875rem; } }
.spec-list .spec-item h5 {
  font-size: 0.875rem; font-weight: 600; color: var(--gray-900);
  margin: 0 0 0.25rem 0; line-height: 1.35;
}
@media (min-width: 640px) { .spec-list .spec-item h5 { font-size: 1rem; } }
.spec-list .spec-item p { font-size: 0.75rem; color: var(--gray-600); margin: 0; }
@media (min-width: 640px) { .spec-list .spec-item p { font-size: 0.875rem; } }

/* Testimonials */
.omakase-testimonials { background: linear-gradient(to bottom right, var(--gray-50), #fff); }
.testimonial-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
@media (min-width: 1024px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial-card {
  background: #fff; border-radius: 1rem; padding: 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); border: 1px solid var(--gray-100);
  display: flex; flex-direction: column; transition: box-shadow .2s;
}
@media (min-width: 640px) { .testimonial-card { padding: 2rem; } }
.testimonial-card:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); }
.testimonial-card .head { display: flex; align-items: flex-start; margin-bottom: 1.5rem; }
.testimonial-card .head .avatar {
  width: 3.5rem; height: 3.5rem;
  background: linear-gradient(to bottom right, var(--teal-500), var(--teal-600));
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-right: 1rem;
}
@media (min-width: 640px) { .testimonial-card .head .avatar { width: 4rem; height: 4rem; } }
.testimonial-card .head .avatar i { font-size: 1.5rem; color: #fff; }
@media (min-width: 640px) { .testimonial-card .head .avatar i { font-size: 1.875rem; } }
.testimonial-card .head .cat { font-size: 0.75rem; color: var(--gray-500); margin-bottom: 0.25rem; }
@media (min-width: 640px) { .testimonial-card .head .cat { font-size: 0.875rem; } }
.testimonial-card .head h3 { font-size: 1rem; font-weight: 700; color: var(--gray-900); margin: 0 0 0.5rem 0; }
@media (min-width: 640px) { .testimonial-card .head h3 { font-size: 1.125rem; } }
.testimonial-card .head .stars { color: var(--yellow-400); font-size: 0.875rem; }
.testimonial-card .body { font-size: 0.875rem; color: var(--gray-700); line-height: 1.5; margin-bottom: 1rem; flex: 1; }
@media (min-width: 640px) { .testimonial-card .body { font-size: 1rem; } }
.testimonial-card .plan-tag { background: var(--teal-50); border-radius: 0.5rem; padding: 0.75rem; margin-top: auto; }
@media (min-width: 640px) { .testimonial-card .plan-tag { padding: 1rem; } }
.testimonial-card .plan-tag .label { font-size: 0.75rem; font-weight: 600; color: var(--teal-700); margin-bottom: 0.25rem; }
.testimonial-card .plan-tag .name { font-size: 0.875rem; color: var(--gray-900); }

/* Support */
.omakase-support { background: var(--gray-50); }
.support-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1024px) { .support-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.support-card {
  background: #fff; border-radius: 1rem; overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); transition: box-shadow .2s;
}
.support-card:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); }
.support-card .img-wrap { height: 12rem; overflow: hidden; }
@media (min-width: 640px) { .support-card .img-wrap { height: 16rem; } }
.support-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.support-card .body { padding: 1rem; }
@media (min-width: 640px) { .support-card .body { padding: 1.5rem; } }
.support-card .body .head { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 1rem; }
.support-card .body .head .icon {
  width: 3rem; height: 3rem; background: var(--teal-500);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
@media (min-width: 640px) { .support-card .body .head .icon { width: 3.5rem; height: 3.5rem; } }
.support-card .body .head .icon i { font-size: 1.25rem; color: #fff; }
@media (min-width: 640px) { .support-card .body .head .icon i { font-size: 1.5rem; } }
.support-card .body .head h3 { font-size: 1.125rem; font-weight: 700; color: var(--gray-900); margin: 0; }
@media (min-width: 640px) { .support-card .body .head h3 { font-size: 1.25rem; } }
.support-card .body p { font-size: 0.75rem; color: var(--gray-700); line-height: 1.5; margin: 0; }
@media (min-width: 640px) { .support-card .body p { font-size: 0.875rem; } }
.support-card.span-2 { grid-column: span 1; }
@media (min-width: 1024px) { .support-card.span-2 { grid-column: span 1; } }
.support-card.span-2 .body .head .icon { width: 3.5rem; height: 3.5rem; }
@media (min-width: 640px) { .support-card.span-2 .body .head .icon { width: 4rem; height: 4rem; } }

/* FAQ */
.omakase-faq { background: var(--gray-900); }
.omakase-faq .sec-title { color: #fff; }
.omakase-faq .sec-desc { color: var(--gray-400); }
.omakase-faq .sec-line { background: var(--teal-400); }
.faq-list { max-width: 56rem; margin: 0 auto; }
.faq-item {
  background: #fff; border-radius: 0.5rem; overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); margin-bottom: 0.75rem;
  transition: box-shadow .2s;
}
@media (min-width: 640px) { .faq-item { margin-bottom: 1rem; } }
.faq-item:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); }
.faq-item summary {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 1rem; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 700; color: var(--gray-900);
  list-style: none; background: none; border: none;
  transition: background .2s;
}
@media (min-width: 640px) { .faq-item summary { padding: 1.5rem; font-size: 1.125rem; } }
.faq-item summary:hover { background: var(--gray-50); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .q-wrap { display: flex; align-items: flex-start; flex: 1; }
.faq-item summary .q-box {
  width: 1.75rem; height: 1.75rem; background: var(--teal-500);
  border-radius: 0.5rem; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-right: 0.75rem;
}
@media (min-width: 640px) { .faq-item summary .q-box { width: 2rem; height: 2.5rem; margin-right: 1rem; } }
.faq-item summary .q-box span { color: #fff; font-weight: 700; font-size: 0.75rem; }
@media (min-width: 640px) { .faq-item summary .q-box span { font-size: 0.875rem; } }
.faq-item summary .toggle { margin-left: 1rem; flex-shrink: 0; }
.faq-item summary .toggle i { font-size: 1.25rem; color: var(--teal-500); }
@media (min-width: 640px) { .faq-item summary .toggle i { font-size: 1.5rem; } }
.faq-item[open] summary .toggle .icon-open { display: none; }
.faq-item[open] summary .toggle .icon-close { display: inline; }
.faq-item:not([open]) summary .toggle .icon-close { display: none; }
.faq-item .a-wrap { padding: 0 1rem 1rem; background: var(--gray-50); }
@media (min-width: 640px) { .faq-item .a-wrap { padding: 0 1.5rem 1.5rem; } }
.faq-item .a-wrap .inner { padding-left: 2.5rem; }
@media (min-width: 640px) { .faq-item .a-wrap .inner { padding-left: 3rem; } }
.faq-item .a-wrap p { font-size: 0.75rem; color: var(--gray-700); line-height: 1.5; margin: 0; }
@media (min-width: 640px) { .faq-item .a-wrap p { font-size: 0.875rem; } }

/* Contact */
.omakase-contact {
  background: linear-gradient(to bottom right, var(--gray-900), var(--gray-800), var(--gray-900));
}
.omakase-contact .container { max-width: 56rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .omakase-contact .container { padding: 0 1.5rem; } }
.omakase-contact .sec-badge { border-color: var(--teal-400); }
.omakase-contact .sec-badge span { color: var(--teal-300); }
.omakase-contact .sec-title { color: #fff; }
.omakase-contact .sec-desc { color: var(--gray-400); }
.omakase-contact .form-box {
  background: #fff; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  padding: 1.5rem;
}
@media (min-width: 640px) { .omakase-contact .form-box { border-radius: 1.5rem; padding: 2.5rem; } }
@media (min-width: 768px) { .omakase-contact .form-box { padding: 3rem; } }
.form-grid-2 { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; }
@media (min-width: 640px) { .form-grid-2 { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 1.5rem; } }
.form-group { margin-bottom: 1.5rem; }
@media (min-width: 640px) { .form-group { margin-bottom: 2rem; } }
.form-group label {
  display: block; font-size: 0.875rem; font-weight: 600; color: var(--gray-900);
  margin-bottom: 0.5rem;
}
.form-group label .required { color: var(--red-500); font-size: 0.75rem; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: 0.75rem 1rem;
  border: 1px solid var(--gray-300); border-radius: 0.5rem;
  font-size: 0.875rem; font-family: inherit; color: var(--gray-900);
  transition: border-color .2s, box-shadow .2s;
}
/* iOS でフォーカス時のズームを防ぐ（16px 未満だとズームされる） */
@media (max-width: 767px) {
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 16px; }
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--gray-400); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none; border-color: var(--teal-500);
  box-shadow: 0 0 0 2px rgba(20,184,166,.2);
}
.form-group select { cursor: pointer; background: #fff; }
.form-group textarea { resize: none; min-height: 120px; }
.form-char-count { text-align: right; margin-top: 0.25rem; font-size: 0.75rem; color: var(--gray-500); }
.form-error { display: none; margin-bottom: 1rem; padding: 1rem; background: var(--red-50); border: 1px solid var(--red-200); border-radius: 0.5rem; font-size: 0.875rem; color: var(--red-600); text-align: center; }
.form-error.is-visible { display: block; }
.form-success { display: none; margin-bottom: 1rem; padding: 1rem; background: var(--teal-50); border: 1px solid var(--teal-200); border-radius: 0.5rem; text-align: center; }
.form-success.is-visible { display: block; }
.form-success .icon-wrap { display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; }
.form-success .icon-wrap .icon { width: 2.5rem; height: 2.5rem; background: var(--teal-500); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.form-success .icon-wrap .icon i { color: #fff; font-size: 1.25rem; }
.form-success p { font-size: 0.875rem; font-weight: 600; color: var(--teal-700); margin: 0; }
.form-success .sub { font-size: 0.75rem; color: var(--teal-600); margin-top: 0.25rem; }
.form-submit {
  width: 100%; padding: 1rem;
  background: var(--teal-600); color: #fff;
  border: none; border-radius: 0.5rem;
  font-size: 1rem; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: background .2s, box-shadow .2s;
}
@media (min-width: 640px) { .form-submit { font-size: 1.125rem; } }
.form-submit:hover { background: var(--teal-700); box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); }
.form-submit:disabled { opacity: 0.7; cursor: not-allowed; }
.form-note { font-size: 0.75rem; color: var(--gray-500); text-align: center; margin-top: 1rem; line-height: 1.5; }

/* Footer */
.omakase-footer { background: var(--gray-900); color: #fff; padding-top: 3rem; padding-bottom: 1.5rem; }
@media (min-width: 640px) { .omakase-footer { padding-top: 4rem; padding-bottom: 2rem; } }
.omakase-footer .footer-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .omakase-footer .footer-inner { padding: 0 1.5rem; } }
.omakase-footer .footer-grid { display: grid; gap: 2rem; margin-bottom: 3rem; }
@media (min-width: 640px) { .omakase-footer .footer-grid { gap: 3rem; margin-bottom: 4rem; } }
@media (min-width: 640px) { .omakase-footer .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .omakase-footer .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.omakase-footer .footer-logo img { height: 2.5rem; width: auto; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .omakase-footer .footer-logo img { height: 3rem; } }
.omakase-footer .footer-info { font-size: 0.75rem; color: var(--gray-300); line-height: 1.5; }
@media (min-width: 640px) { .omakase-footer .footer-info { font-size: 0.875rem; } }
.omakase-footer .footer-info p { margin: 0 0 0.75rem 0; }
.omakase-footer .footer-col h4 { font-size: 0.75rem; color: var(--gray-400); margin-bottom: 1rem; font-weight: 600; }
@media (min-width: 640px) { .omakase-footer .footer-col h4 { font-size: 0.875rem; } }
.omakase-footer .footer-col ul { list-style: none; padding: 0; margin: 0; }
.omakase-footer .footer-col li { margin-bottom: 0.5rem; }
@media (min-width: 640px) { .omakase-footer .footer-col li { margin-bottom: 0.75rem; } }
.omakase-footer .footer-col a { color: #fff; font-size: 0.75rem; }
@media (min-width: 640px) { .omakase-footer .footer-col a { font-size: 0.875rem; } }
.omakase-footer .footer-col a:hover { color: var(--teal-400); }
.omakase-footer .footer-area { border-top: 1px solid var(--gray-800); padding-top: 1.5rem; }
.omakase-footer .footer-area .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.25rem 1.5rem; }
.omakase-footer .footer-area span { font-size: 0.75rem; color: #fff; }
@media (min-width: 640px) { .omakase-footer .footer-area span { font-size: 0.875rem; } }
.omakase-footer .footer-bottom { border-top: 1px solid var(--gray-800); padding-top: 1.5rem; }
@media (min-width: 640px) { .omakase-footer .footer-bottom { padding-top: 2rem; } }
.omakase-footer .footer-bottom p { font-size: 0.75rem; color: var(--gray-400); text-align: center; margin: 0; }
@media (min-width: 640px) { .omakase-footer .footer-bottom p { font-size: 0.875rem; } }

/* Utility */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.hidden { display: none !important; }
/* スマホのみ改行 */
br.sm-only { display: none; }
@media (max-width: 639px) { br.sm-only { display: block; } }

/* ========== 会社概要ページ ========== */
.page-about .omakase-nav .omakase-logo a { display: block; }
.page-about .omakase-hero-about {
  position: relative;
  padding-top: 6rem; padding-bottom: 3rem;
  background: linear-gradient(to bottom right, var(--gray-900), var(--gray-800), var(--gray-900));
  overflow: hidden;
}
@media (min-width: 640px) {
  .page-about .omakase-hero-about { padding-top: 8rem; padding-bottom: 4rem; }
}
.page-about .omakase-hero-about::before {
  content: '';
  position: absolute; inset: 0;
  opacity: .1;
  background: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.05) 35px, rgba(255,255,255,.05) 70px);
}
.page-about .omakase-hero-about .inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
  text-align: center;
}
@media (min-width: 640px) { .page-about .omakase-hero-about .inner { padding: 0 1.5rem; } }
.page-about .breadcrumb { margin-bottom: 1.5rem; }
@media (min-width: 640px) { .page-about .breadcrumb { margin-bottom: 2rem; } }
.page-about .breadcrumb ol {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-size: 0.875rem; list-style: none; padding: 0; margin: 0;
}
.page-about .breadcrumb a { color: var(--gray-400); }
.page-about .breadcrumb a:hover { color: var(--teal-400); }
.page-about .breadcrumb li:last-child { color: var(--teal-400); font-weight: 500; }
.page-about .hero-about-title {
  font-size: 2.25rem; font-weight: 900; color: #fff;
  margin: 0; line-height: 1.2;
}
@media (min-width: 640px) { .page-about .hero-about-title { font-size: 3rem; } }
@media (min-width: 768px) { .page-about .hero-about-title { font-size: 3.75rem; } }
.page-about .about-sec { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 640px) { .page-about .about-sec { padding-top: 6rem; padding-bottom: 6rem; } }
.page-about .about-sec-inner { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .page-about .about-sec-inner { padding: 0 1.5rem; } }
.page-about .about-sec-header { text-align: center; margin-bottom: 3rem; }
@media (min-width: 640px) { .page-about .about-sec-header { margin-bottom: 4rem; } }
.page-about .about-sec-title {
  font-size: 1.5rem; font-weight: 900; color: var(--gray-900);
  margin: 0 0 1rem 0; line-height: 1.2;
}
@media (min-width: 640px) { .page-about .about-sec-title { font-size: 1.875rem; } }
@media (min-width: 768px) { .page-about .about-sec-title { font-size: 2.25rem; } }
.page-about .about-sec-line { width: 4rem; height: 4px; background: var(--teal-500); margin: 0 auto; }
.page-about .about-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { .page-about .about-grid { grid-template-columns: 1fr 1fr; } }
.page-about .about-img-wrap {
  width: 100%; height: 300px; border-radius: 1rem;
  overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1);
  border: 1px solid var(--gray-100);
}
@media (min-width: 640px) { .page-about .about-img-wrap { height: 350px; } }
.page-about .about-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.page-about .about-table-wrap {
  background: #fff; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1);
  border: 1px solid var(--gray-100); overflow: hidden;
}
.page-about .about-table-row {
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--gray-100);
}
@media (min-width: 640px) { .page-about .about-table-row { flex-direction: row; } }
.page-about .about-table-row:last-child { border-bottom: none; }
.page-about .about-table-label {
  flex-shrink: 0;
  background: var(--gray-50);
  padding: 1rem 1.5rem;
  font-size: 0.875rem; font-weight: 700; color: var(--gray-900);
}
@media (min-width: 640px) { .page-about .about-table-label { width: 12rem; padding: 1.25rem 1.5rem; } }
.page-about .about-table-value {
  flex: 1;
  padding: 1rem 1.5rem;
  font-size: 0.875rem; color: var(--gray-700);
}
@media (min-width: 640px) { .page-about .about-table-value { padding: 1.25rem 1.5rem; } }
.page-about .about-table-value a { color: var(--teal-600); }
.page-about .about-table-value a:hover { color: var(--teal-700); }
.page-about .about-sec.bg-gray { background: var(--gray-50); }
.page-about .about-map-wrap {
  background: #fff; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1);
  overflow: hidden; border: 1px solid var(--gray-100);
}
.page-about .about-map-wrap iframe { display: block; width: 100%; height: 360px; border: 0; }
@media (min-width: 640px) { .page-about .about-map-wrap iframe { height: 450px; } }
.page-about .about-cta {
  padding-top: 4rem; padding-bottom: 4rem;
  background: linear-gradient(to bottom right, var(--gray-900), var(--gray-800));
}
@media (min-width: 640px) { .page-about .about-cta { padding-top: 5rem; padding-bottom: 5rem; } }
.page-about .about-cta .inner { max-width: 56rem; margin: 0 auto; padding: 0 1rem; text-align: center; }
@media (min-width: 640px) { .page-about .about-cta .inner { padding: 0 1.5rem; } }
.page-about .about-cta h2 {
  font-size: 1.5rem; font-weight: 900; color: #fff;
  margin: 0 0 1rem 0; line-height: 1.2;
}
@media (min-width: 640px) { .page-about .about-cta h2 { font-size: 1.875rem; } }
@media (min-width: 768px) { .page-about .about-cta h2 { font-size: 2.25rem; } }
.page-about .about-cta p { font-size: 0.875rem; color: var(--gray-300); margin: 0 0 2rem 0; max-width: 42rem; margin-left: auto; margin-right: auto; line-height: 1.5; }
@media (min-width: 640px) { .page-about .about-cta p { font-size: 1rem; } }
.page-about .about-cta .btns { display: flex; flex-direction: column; gap: 1rem; justify-content: center; align-items: center; }
@media (min-width: 640px) { .page-about .about-cta .btns { flex-direction: row; } }
.page-about .about-cta .btns a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.5rem; border-radius: 0.5rem;
  font-weight: 700; font-size: 1rem;
  transition: background .2s, box-shadow .2s, color .2s;
  width: 100%;
}
@media (min-width: 640px) { .page-about .about-cta .btns a { width: auto; padding: 1rem 2rem; font-size: 1.125rem; } }
.page-about .about-cta .btns .btn-tel { background: var(--teal-500); color: #fff; }
.page-about .about-cta .btns .btn-tel:hover { background: var(--teal-600); box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); }
.page-about .about-cta .btns .btn-form { background: transparent; border: 2px solid #fff; color: #fff; }
.page-about .about-cta .btns .btn-form:hover { background: #fff; color: var(--gray-900); }
.page-about .about-cta .btns .btn-tel i, .page-about .about-cta .btns .btn-form i { margin-right: 0.5rem; font-size: 1.25rem; }