/* ==========================================================
   RYU'S SYSTEM — Corporate Site
   ブランドカラーは新ロゴ (ryus-system_*_full.svg) から抽出
   ========================================================== */

:root {
  /* Brand */
  --c-teal: #35c7a9;
  --c-cyan: #1c96c0;
  --c-sea: #1a9fb8;
  --c-blue: #0f6fa8;
  --c-orange: #f08a2e;
  --c-slate: #3a5a64;
  --c-ink: #24292e;
  --c-mint: #a9d4ce;

  /* UI */
  --c-navy: #0a2c42;
  --c-navy-2: #0d3a56;
  --c-bg: #ffffff;
  --c-bg-soft: #fff8ec;   /* 砂浜のような生成り */
  --c-sand: #fff3dd;      /* ヒーローイラストの地面と同じ色 */
  --c-mint-bg: #e4f6f1;
  --c-sky: #e3f6f8;
  --c-line: #e6dccb;
  --c-ink-line: #1f2d36;  /* イラスト・カードの線 */
  --c-text: #24292e;
  --c-text-sub: #5b6f76;

  --grad-brand: linear-gradient(135deg, var(--c-teal) 0%, var(--c-cyan) 55%, var(--c-blue) 100%);
  --grad-dark: linear-gradient(160deg, #0d3a56 0%, #0a2c42 60%, #082335 100%);

  --font-ja: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-en: "Montserrat", "Zen Maru Gothic", sans-serif;

  --radius: 18px;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --shadow: 0 10px 30px rgba(15, 111, 168, 0.08);
  --shadow-hover: 0 18px 40px rgba(15, 111, 168, 0.16);
  --header-h: 76px;
  --container: 1160px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-ja);
  font-size: 16px;
  line-height: 1.85;
  color: var(--c-text);
  background: var(--c-bg);
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--c-blue); text-decoration: none; transition: color .2s; }
a:hover { color: var(--c-cyan); }
h1, h2, h3, h4 { margin: 0; line-height: 1.4; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 1000; background: var(--c-blue); color: #fff; padding: 8px 16px; border-radius: 6px; }
.skip-link:focus { top: 8px; color: #fff; }
.pc-only { display: inline; }
@media (max-width: 640px) { .pc-only { display: none; } }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
/* backdrop-filter は fixed 子要素の基準になるため、モバイルメニューを持たない PC 幅のみ適用 */
@media (min-width: 1081px) {
  .site-header { background: rgba(255, 255, 255, 0.9); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); }
}
.site-header.is-scrolled { border-bottom-color: var(--c-line); box-shadow: 0 4px 20px rgba(10, 44, 66, 0.06); }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1320px; }
.site-logo { display: block; flex-shrink: 0; }
.site-logo img { height: 48px; width: auto; }

.gnav__list { display: flex; align-items: center; gap: 4px; }
.gnav__link {
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 12px; color: var(--c-ink); font-size: 14px; font-weight: 500; line-height: 1.4;
  position: relative;
}
.gnav__link small { font-family: var(--font-en); font-size: 10px; letter-spacing: .12em; color: var(--c-sea); font-weight: 600; text-transform: uppercase; }
.gnav__link::after {
  content: ""; position: absolute; left: 50%; bottom: -2px; width: 0; height: 2px;
  background: var(--grad-brand); transition: width .25s, left .25s;
}
.gnav__link:hover { color: var(--c-blue); }
.gnav__link:hover::after, .gnav__link.is-current::after { width: 60%; left: 20%; }
.gnav__cta {
  margin-left: 12px; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 999px; background: var(--c-orange); color: #fff;
  font-size: 14px; font-weight: 700; box-shadow: 0 6px 16px rgba(240, 138, 46, .3);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.gnav__cta:hover { color: #fff; background: #e57a1b; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(240, 138, 46, .38); }

.nav-toggle {
  display: none; width: 48px; height: 48px; border: 0; background: transparent; cursor: pointer;
  position: relative; border-radius: 8px;
}
.nav-toggle span { position: absolute; left: 12px; width: 24px; height: 2px; background: var(--c-ink); transition: transform .3s, opacity .3s, top .3s; }
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 23px; }
.nav-toggle span:nth-child(3) { top: 30px; }
.nav-open .nav-toggle span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { top: 23px; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  :root { --header-h: 64px; }
  .site-logo img { height: 36px; }
  .nav-toggle { display: block; }
  .gnav {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    background: var(--grad-dark); padding: 24px 24px 48px; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .3s, transform .3s, visibility .3s;
  }
  .nav-open .gnav { opacity: 1; visibility: visible; transform: none; }
  .nav-open { overflow: hidden; }
  .gnav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .gnav__link { flex-direction: row-reverse; justify-content: space-between; align-items: baseline; color: #fff; font-size: 17px; padding: 18px 4px; border-bottom: 1px solid rgba(255,255,255,.12); }
  .gnav__link small { color: var(--c-mint); }
  .gnav__link:hover { color: var(--c-mint); }
  .gnav__link::after { display: none; }
  .gnav__cta { display: flex; margin: 28px 0 0; justify-content: center; padding: 16px; font-size: 16px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 32px; border-radius: 999px;
  font-weight: 700; font-size: 15px; letter-spacing: .06em; cursor: pointer; border: 2px solid transparent;
  transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(4px); }
.btn--primary { background: var(--grad-brand); color: #fff; box-shadow: 0 8px 20px rgba(28, 150, 192, .3); }
.btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(28, 150, 192, .4); }
.btn--accent { background: var(--c-orange); color: #fff; box-shadow: 0 8px 20px rgba(240, 138, 46, .3); }
.btn--accent:hover { color: #fff; background: #e57a1b; transform: translateY(-2px); }
.btn--ghost { border-color: currentColor; color: var(--c-blue); background: transparent; }
.btn--ghost:hover { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.btn--ghost-light { border-color: rgba(255,255,255,.6); color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--c-blue); border-color: #fff; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: var(--header-h); background: linear-gradient(var(--c-sky) 0%, #f3fbfb 40%, #fff 62%); }
.hero__stage { position: relative; }
.hero__town { width: 100%; height: auto; }
.hero__copy { position: absolute; top: 0; left: 0; right: 0; padding-top: clamp(16px, 4.2vw, 96px); }
/* 見出しの枠はイラストの上に重なるので、文字以外の部分はクリックをイラスト（ロゴの看板）へ通す */
.hero__copy { pointer-events: none; }
.hero__copy > * { max-width: 46%; pointer-events: auto; }
.hero__copy > .hero__title { max-width: none; width: fit-content; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px;
  font-family: var(--font-en); font-size: 13px; font-weight: 700; letter-spacing: .2em; color: var(--c-sea); text-transform: uppercase;
}
.hero__eyebrow::before { content: ""; width: 40px; height: 10px; background: url("../img/okinawa/squiggle.svg") left center / contain no-repeat; }
.hero__title { font-size: clamp(30px, 3.7vw, 58px); font-weight: 900; line-height: 1.35; letter-spacing: .04em; color: var(--c-ink); }
.hero__line { display: block; white-space: nowrap; }
.hero__title .grad { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub span { display: block; }
.hero__sub { margin-top: 14px; font-size: clamp(14px, 1.3vw, 18px); font-weight: 700; color: var(--c-slate); }
.hero__body { position: relative; background: var(--c-sand); padding: 12px 0 110px; }
.hero__body-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.hero__lead { margin: 0; max-width: 34em; color: var(--c-text); font-size: 17px; line-height: 2; }
.hero__lead strong { color: var(--c-blue); font-weight: 700; background: linear-gradient(transparent 62%, rgba(240,138,46,.3) 62%); }
.hero__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; }
.hero__stats { display: flex; justify-content: flex-end; gap: 18px; flex-wrap: wrap; }
.hero__stat {
  --badge: var(--c-teal);
  position: relative; width: 136px; height: 136px; display: grid; place-content: center; text-align: center; color: #fff;
  animation: bob 5s ease-in-out infinite;
}
.hero__stat::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--badge); -webkit-mask: url("../img/okinawa/flower.svg") center / contain no-repeat; mask: url("../img/okinawa/flower.svg") center / contain no-repeat; animation: spin 40s linear infinite; }
.hero__stat > * { position: relative; }
.hero__stat:nth-child(2) { --badge: var(--c-cyan); animation-delay: -1.6s; margin-top: 28px; }
.hero__stat:nth-child(3) { --badge: var(--c-orange); animation-delay: -3.2s; }
.hero__stat b { display: block; font-family: var(--font-en); font-size: 30px; font-weight: 800; line-height: 1.05; }
.hero__stat b small { font-family: var(--font-ja); font-size: 13px; margin-left: 2px; }
.hero__stat span { display: block; font-size: 12px; font-weight: 700; line-height: 1.4; padding: 0 18px; margin-top: 4px; }

.hero__weather {
  display: flex; width: fit-content; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 6px 16px 6px 8px;
  background: rgba(255,255,255,.88); border: 2px solid var(--c-ink-line); border-radius: 999px; font-size: 14px; color: var(--c-ink);
  animation: rise .9s var(--spring) .05s both;
}
/* PC：イラスト左下の砂浜の上（見出しと重ならない位置）／スマホ：イラストのすぐ下 */
.hero__weather-wrap { position: absolute; left: 0; right: 0; bottom: clamp(8px, 1vw, 16px); z-index: 2; pointer-events: none; }
.hero__weather-wrap .hero__weather { pointer-events: auto; }
@media (max-width: 1024px) {
  .hero__weather-wrap { position: static; background: var(--c-sand); padding-top: 12px; padding-bottom: 4px; }
  .hero__weather { border-radius: 20px; }
  .hero__weather small { flex-basis: 100%; padding-left: 38px; margin-top: -4px; }
}
.hero__weather-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-sky); font-size: 17px; }
.hero__weather b { color: var(--c-blue); }
.hero__weather small { font-size: 11px; color: var(--c-text-sub); }
.hero__weather small a { color: inherit; text-decoration: underline; }
/* 天気に合わせた空の色（イラストの空は透明なので、ここで塗る） */
.hero[data-weather="cloudy"] { background: linear-gradient(#e6edf0 0%, #f3f6f7 40%, #fff 62%); }
.hero[data-weather="rain"] { background: linear-gradient(#d3dee5 0%, #e8eef1 40%, #fff 62%); }
.hero[data-weather="typhoon"] { background: linear-gradient(#aebfca 0%, #d9e2e8 42%, #fff 64%); }

/* 見出しの登場（1 行ずつ浮かび上がる） */
.hero__eyebrow, .hero__line, .hero__sub { animation: rise .9s var(--spring) both; }
.hero__line:nth-child(1) { animation-delay: .15s; }
.hero__line:nth-child(2) { animation-delay: .3s; }
.hero__sub { animation-delay: .5s; }

@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1024px) {
  .hero__stage { display: flex; flex-direction: column; }
  .hero__copy { position: static; order: -1; padding: 36px 24px 4px; }
  .hero__copy > * { max-width: none; }
  .hero__body-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero__stats { justify-content: center; }
}
@media (max-width: 600px) {
  .hero__town { height: 280px; } /* SVG の preserveAspectRatio（xMaxYMax slice）で右側の街並みを残して切り抜く */
}
@media (max-width: 480px) {
  .hero__stat { width: 104px; height: 104px; }
  .hero__stat b { font-size: 22px; }
  .hero__stat span { font-size: 10px; padding: 0 12px; }
  .hero__stats { gap: 8px; }
}

/* ---------- Section common ---------- */
.section { padding: 120px 0; position: relative; }
.section--soft { background: var(--c-bg-soft); }
.section--dark { background: var(--grad-dark); color: #fff; overflow: hidden; }
@media (max-width: 768px) { .section { padding: 80px 0; } }

.sec-head { margin-bottom: 56px; }
.sec-head--center { text-align: center; }
.sec-head__en {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-en); font-size: clamp(36px, 5vw, 56px); font-weight: 700; letter-spacing: .02em; line-height: 1.1;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sec-head__en .hex { width: 22px; height: 25px; flex-shrink: 0; }
.sec-head__ja { margin-top: 10px; font-size: 16px; font-weight: 700; color: var(--c-slate); letter-spacing: .12em; }
.sec-head__lead { margin-top: 24px; color: var(--c-text-sub); }
.section--dark .sec-head__en { background: linear-gradient(135deg, #63dcc4, #52cfc0 50%, #a9d4ce); -webkit-background-clip: text; background-clip: text; }
.section--dark .sec-head__ja { color: var(--c-mint); }
.section--dark .sec-head__lead { color: rgba(255,255,255,.8); }

/* ---------- Value ---------- */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.value-card {
  position: relative; background: #fff; border-radius: var(--radius); padding: 48px 32px 36px;
  box-shadow: var(--shadow); border: 1px solid var(--c-line); overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}
.value-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--grad-brand); }
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.value-card__num {
  position: absolute; right: 20px; top: 8px; font-family: var(--font-en); font-weight: 700; font-size: 72px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(28, 150, 192, .25);
}
.value-card__icon { width: 64px; height: 72px; margin-bottom: 24px; }
.value-card__title { font-size: 20px; color: var(--c-ink); margin-bottom: 16px; }
.value-card p { font-size: 15px; color: var(--c-text-sub); margin: 0; }
@media (max-width: 900px) { .value-grid { grid-template-columns: 1fr; } }

/* ---------- Business ---------- */
.biz-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 80px; }
.biz-item {
  display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: 12px;
  background: #fff; border: 1px solid var(--c-line); font-weight: 700; font-size: 15px; line-height: 1.5;
  transition: border-color .2s, transform .2s;
}
.biz-item:hover { border-color: var(--c-teal); transform: translateY(-3px); }
.biz-item__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; background: var(--grad-brand); display: grid; place-items: center; }
.biz-item__icon svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1000px) { .biz-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .biz-list { grid-template-columns: 1fr; } }

.sub-title { display: flex; align-items: center; gap: 14px; font-size: 24px; margin-bottom: 32px; color: var(--c-ink); }
.sub-title::before { content: ""; width: 6px; height: 28px; border-radius: 3px; background: linear-gradient(var(--c-teal), var(--c-blue)); }

.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 80px; }
.works-card { background: #fff; border-radius: var(--radius); border: 1px solid var(--c-line); overflow: hidden; }
.works-card__head { padding: 22px 28px; background: var(--c-navy); color: #fff; }
.works-card__head small { display: block; font-size: 12px; color: var(--c-mint); letter-spacing: .1em; }
.works-card__head h4 { font-size: 18px; }
.works-card:nth-child(2) .works-card__head { background: var(--c-blue); }
.works-card:nth-child(3) .works-card__head { background: var(--c-sea); }
.works-card ul { padding: 20px 28px 26px; }
.works-card li { position: relative; padding: 8px 0 8px 22px; border-bottom: 1px dashed var(--c-line); font-size: 15px; }
.works-card li:last-child { border-bottom: 0; color: var(--c-text-sub); }
.works-card li::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 11px; transform: translateY(-50%); background: var(--c-teal); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.works-card li:last-child::before { display: none; }
@media (max-width: 900px) { .works-grid { grid-template-columns: 1fr; } }

.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-card {
  display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); padding: 36px 32px;
  box-shadow: var(--shadow); color: var(--c-text); transition: transform .3s, box-shadow .3s; position: relative; overflow: hidden;
}
.service-card:hover { color: var(--c-text); transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.service-card__tag { font-family: var(--font-en); font-size: 12px; font-weight: 700; letter-spacing: .15em; color: var(--c-orange); }
.service-card h4 { font-size: 19px; margin: 8px 0 14px; color: var(--c-ink); }
.service-card p { font-size: 14px; color: var(--c-text-sub); flex-grow: 1; }
.service-card .more { margin-top: 12px; font-weight: 700; font-size: 14px; color: var(--c-blue); display: inline-flex; align-items: center; gap: 8px; }
.service-card:hover .more { color: var(--c-cyan); }
.service-card .note { font-size: 12px; color: var(--c-text-sub); }
@media (max-width: 900px) { .service-grid { grid-template-columns: 1fr; } }

/* ---------- Recruit ---------- */
.recruit { position: relative; }
.recruit__deco { position: absolute; right: -120px; top: 50%; transform: translateY(-50%); width: 520px; opacity: .08; pointer-events: none; }
.recruit__inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.recruit__copy { font-size: clamp(24px, 3vw, 34px); font-weight: 900; line-height: 1.6; margin-bottom: 24px; }
.recruit__copy em { font-style: normal; color: #63dcc4; }
.recruit__text { color: rgba(255,255,255,.85); }
.recruit__box { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius); padding: 40px; backdrop-filter: blur(4px); }
.recruit__box h3 { font-size: 18px; margin-bottom: 16px; }
.recruit__box p { color: rgba(255,255,255,.85); font-size: 15px; }
.recruit__badge { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(240,138,46,.15); color: #ffb978; font-size: 13px; font-weight: 700; }
@media (max-width: 900px) { .recruit__inner { grid-template-columns: 1fr; gap: 32px; } .recruit__box { padding: 28px; } }

/* ---------- Company ---------- */
.message { display: grid; grid-template-columns: 320px 1fr; gap: 64px; align-items: start; margin-bottom: 100px; }
.message__visual { position: sticky; top: calc(var(--header-h) + 32px); background: var(--c-bg-soft); border-radius: var(--radius); padding: 48px 32px; text-align: center; }
.message__visual img { width: 180px; margin: 0 auto 24px; }
.message__visual p { margin: 0; font-size: 13px; color: var(--c-text-sub); }
.message__title { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 28px; line-height: 1.6; }
.message__body p { color: var(--c-text); }
.message__sign { margin-top: 32px; text-align: right; font-weight: 700; }
.message__sign small { display: block; font-weight: 400; color: var(--c-text-sub); font-size: 13px; }
@media (max-width: 900px) { .message { grid-template-columns: 1fr; gap: 32px; } .message__visual { position: static; padding: 32px; } .message__visual img { width: 120px; } }

.company-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 960px) { .company-layout { grid-template-columns: 1fr; } }

.info-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.info-table th, .info-table td { padding: 18px 8px; border-bottom: 1px solid var(--c-line); vertical-align: top; text-align: left; }
.info-table th { width: 30%; color: var(--c-slate); font-weight: 700; position: relative; padding-left: 20px; }
.info-table th::before { content: ""; position: absolute; left: 0; top: 27px; width: 8px; height: 9px; background: var(--c-teal); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.info-table tr:first-child th, .info-table tr:first-child td { border-top: 2px solid var(--c-blue); }
@media (max-width: 560px) {
  .info-table th, .info-table td { display: block; width: 100%; }
  .info-table th { border-bottom: 0; padding-bottom: 0; }
  .info-table th::before { top: 27px; }
  .info-table td { padding-top: 6px; padding-left: 20px; }
  .info-table tr:first-child td { border-top: 0; }
}

.map { margin-top: 28px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-line); aspect-ratio: 16 / 10; background: var(--c-bg-soft); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--c-teal), var(--c-blue)); border-radius: 1px; }
.timeline li { position: relative; padding: 0 0 22px; }
.timeline li::before { content: ""; position: absolute; left: -28px; top: 6px; width: 14px; height: 16px; background: #fff; border: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: inset 0 0 0 3px var(--c-cyan); background: var(--c-cyan); }
.timeline li::after { content: ""; position: absolute; left: -25px; top: 10px; width: 8px; height: 8px; background: #fff; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.timeline li.is-key::before { background: var(--c-orange); }
.timeline time { display: block; font-family: var(--font-en); font-weight: 700; font-size: 14px; color: var(--c-blue); letter-spacing: .04em; }
.timeline li.is-key time { color: var(--c-orange); }
.timeline p { margin: 2px 0 0; font-size: 14px; line-height: 1.7; }

/* ---------- News ---------- */
.news-list { border-top: 1px solid var(--c-line); }
.news-item a {
  display: grid; grid-template-columns: 120px 150px 1fr 24px; align-items: center; gap: 16px;
  padding: 24px 8px; border-bottom: 1px solid var(--c-line); color: var(--c-text); transition: background .2s, padding .2s;
}
.news-item a:hover { background: #fff; padding-left: 20px; color: var(--c-blue); }
.news-item time { font-family: var(--font-en); font-weight: 600; color: var(--c-text-sub); font-size: 14px; }
.news-item .cat { justify-self: start; font-size: 12px; font-weight: 700; padding: 3px 14px; border-radius: 999px; background: rgba(53, 199, 169, .14); color: #138a72; white-space: nowrap; }
.news-item .ttl { font-weight: 500; }
.news-item .arr { color: var(--c-sea); }
.news-more { margin-top: 40px; text-align: center; }
@media (max-width: 700px) {
  .news-item a { grid-template-columns: auto 1fr; gap: 6px 12px; }
  .news-item .ttl { grid-column: 1 / -1; }
  .news-item .arr { display: none; }
}

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: 380px 1fr; gap: 48px; align-items: start; }
.contact-tel { position: sticky; top: calc(var(--header-h) + 32px); background: var(--grad-dark); color: #fff; border-radius: var(--radius); padding: 40px 32px; overflow: hidden; }
.contact-tel__deco { position: absolute; right: -40px; bottom: -40px; width: 180px; opacity: .1; }
.contact-tel h3 { font-size: 16px; color: var(--c-mint); margin-bottom: 8px; }
.contact-tel__num { display: block; font-family: var(--font-en); font-size: 32px; font-weight: 700; color: #fff; letter-spacing: .04em; margin-bottom: 4px; }
.contact-tel__num:hover { color: #63dcc4; }
.contact-tel p { font-size: 13px; color: rgba(255,255,255,.75); margin-bottom: 24px; }
.contact-tel dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14px; border-top: 1px solid rgba(255,255,255,.15); padding-top: 20px; }
.contact-tel dt { color: var(--c-mint); font-family: var(--font-en); font-weight: 600; }
.contact-tel dd { margin: 0; }
.contact-tel dd a { color: #fff; }
@media (max-width: 960px) { .contact-layout { grid-template-columns: 1fr; } .contact-tel { position: relative; top: auto; } }

.form { background: #fff; border-radius: var(--radius); padding: 40px; box-shadow: var(--shadow); border: 1px solid var(--c-line); }
.form__row { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 14px 0; align-items: start; }
.form__label { font-weight: 700; font-size: 15px; padding-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.req, .opt { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; line-height: 1.6; }
.req { background: var(--c-orange); color: #fff; }
.opt { background: var(--c-line); color: var(--c-text-sub); }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea {
  width: 100%; padding: 13px 16px; font: inherit; font-size: 16px; color: var(--c-text);
  background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: 8px; transition: border-color .2s, box-shadow .2s, background .2s;
}
.form textarea { min-height: 180px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; background: #fff; border-color: var(--c-cyan); box-shadow: 0 0 0 4px rgba(28,150,192,.15); }
.form .is-invalid { border-color: #d64545 !important; background: #fff6f6 !important; }
.form__radios { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 12px; }
.form__radios label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.form__agree label { cursor: pointer; }
.form__agree input { vertical-align: -3px; margin: 0 6px 0 0; }
.form__agree .req { margin-left: 6px; vertical-align: 2px; }
.form input[type="radio"], .form input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--c-blue); }
.form__agree { text-align: center; padding: 24px 0 8px; border-top: 1px solid var(--c-line); margin-top: 12px; }
.form__submit { text-align: center; margin-top: 20px; }
.form__submit .btn { min-width: 280px; }
.form__msg { margin-top: 16px; text-align: center; font-size: 14px; }
.form__msg.is-error { color: #d64545; }
.form__msg.is-ok { color: #138a72; }
.form__note { margin-top: 16px; font-size: 12px; color: var(--c-text-sub); text-align: center; }
@media (max-width: 700px) {
  .form { padding: 24px 20px; }
  .form__row { grid-template-columns: 1fr; gap: 6px; padding: 10px 0; }
  .form__label { padding-top: 0; }
  .form__submit .btn { min-width: 0; width: 100%; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--c-navy); color: rgba(255,255,255,.8); padding: 80px 0 32px; font-size: 14px; position: relative; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--c-teal), var(--c-cyan) 50%, var(--c-blue) 85%, var(--c-orange) 85%); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 48px; align-items: start; }
.footer-logo img { height: 56px; width: auto; margin-bottom: 24px; }
.footer-addr { font-style: normal; line-height: 1.9; }
.footer-addr a { color: #fff; }
.footer-nav { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 32px; justify-content: start; }
.footer-nav a { color: rgba(255,255,255,.85); }
.footer-nav a:hover { color: #63dcc4; }
.footer-cert { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 10px; padding: 14px 18px; color: var(--c-text); font-size: 12px; line-height: 1.6; max-width: 280px; }
.footer-cert img { width: 44px; flex-shrink: 0; }
.footer-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; font-size: 13px; }
.footer-bottom a { color: rgba(255,255,255,.8); }
.footer-bottom a:hover { color: #fff; }
.footer-bottom ul { display: flex; gap: 24px; flex-wrap: wrap; }
.copyright { font-family: var(--font-en); letter-spacing: .05em; color: rgba(255,255,255,.6); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }

.pagetop {
  position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 52px; height: 58px;
  display: grid; place-items: center; color: #fff; background: var(--grad-brand);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, transform .3s, visibility .3s;
}
.pagetop.is-show { opacity: 1; visibility: visible; transform: none; }
.pagetop:hover { color: #fff; transform: translateY(-3px); }
.pagetop svg { width: 20px; height: 20px; }

/* ---------- Sub page ---------- */
.page-hero { position: relative; padding: calc(var(--header-h) + 72px) 0 72px; background: var(--grad-dark); color: #fff; overflow: hidden; }
.page-hero__deco { position: absolute; right: -60px; top: 50%; transform: translateY(-50%); width: 360px; opacity: .1; }
.page-hero .sec-head { margin: 0; position: relative; }
.page-hero .sec-head__en { background: linear-gradient(135deg, #63dcc4, #52cfc0 50%, #a9d4ce); -webkit-background-clip: text; background-clip: text; }
.page-hero .sec-head__ja { color: var(--c-mint); }
.page-hero .sec-head__lead { color: rgba(255,255,255,.82); max-width: 40em; }
.breadcrumb { position: relative; margin-top: 24px; font-size: 13px; color: rgba(255,255,255,.7); display: flex; gap: 10px; flex-wrap: wrap; }
.breadcrumb a { color: #fff; }
.breadcrumb li + li::before { content: "/"; margin-right: 10px; opacity: .5; }

.page-toc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 80px; }
.page-toc a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-radius: 12px; border: 1px solid var(--c-line); background: #fff; font-weight: 700; color: var(--c-ink); }
.page-toc a:hover { border-color: var(--c-teal); color: var(--c-blue); }
.page-toc a span { color: var(--c-sea); }
@media (max-width: 900px) { .page-toc { grid-template-columns: 1fr; } }

.svc-block { padding: 72px 0; border-top: 1px solid var(--c-line); }
.svc-block:first-of-type { border-top: 0; padding-top: 0; }
.svc-block__head { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 32px; }
.svc-block__num { flex-shrink: 0; width: 64px; height: 72px; display: grid; place-items: center; color: #fff; font-family: var(--font-en); font-weight: 700; font-size: 20px; background: var(--grad-brand); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.svc-block__head h2 { font-size: clamp(22px, 2.6vw, 30px); }
.svc-block__catch { margin-top: 6px; font-weight: 700; color: var(--c-orange); }
.svc-block__lead { color: var(--c-text-sub); margin-bottom: 32px; }
.check-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 32px; padding: 32px; background: var(--c-bg-soft); border-radius: var(--radius); }
.check-list li { position: relative; padding-left: 30px; font-size: 15px; }
.check-list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--c-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (max-width: 700px) { .check-list { grid-template-columns: 1fr; padding: 24px 20px; } }
.svc-note { margin-top: 16px; font-size: 14px; color: var(--c-text-sub); }
.svc-cta { margin-top: 32px; }

.clinic-list { display: flex; flex-wrap: wrap; gap: 10px; }
.clinic-list li { padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--c-line); font-size: 14px; }

.price-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--c-line); -webkit-overflow-scrolling: touch; }
.price-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14px; background: #fff; }
.price-table caption { text-align: left; padding: 0 0 12px; font-weight: 700; }
.price-table th, .price-table td { padding: 14px 18px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.price-table thead th { background: var(--c-navy); color: #fff; font-weight: 700; white-space: nowrap; }
.price-table .group th { background: rgba(53, 199, 169, .12); color: #138a72; font-size: 13px; letter-spacing: .08em; }
.price-table td.price { font-family: var(--font-en); font-weight: 700; color: var(--c-blue); white-space: nowrap; }
.price-table tbody tr:not(.group):hover { background: var(--c-bg-soft); }
.price-notes { margin-top: 16px; font-size: 13px; color: var(--c-text-sub); }
.price-notes li { margin-bottom: 4px; }

/* ---------- Reveal animation ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- News (list / article) ---------- */
.news-empty { padding: 48px 16px; text-align: center; color: var(--c-text-sub); background: #fff; border-radius: var(--radius); border: 1px dashed var(--c-line); }

.cat-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; }
.cat-tabs a { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--c-line); background: #fff; color: var(--c-text); font-size: 14px; font-weight: 500; transition: border-color .2s, background .2s, color .2s; }
.cat-tabs a:hover { border-color: var(--c-teal); color: var(--c-blue); }
.cat-tabs a.is-active { background: var(--grad-brand); border-color: transparent; color: #fff; font-weight: 700; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 960px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }
.post-card a { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-line); color: var(--c-text); transition: transform .3s, box-shadow .3s; }
.post-card a:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); color: var(--c-text); }
.post-card__thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--grad-brand); display: grid; place-items: center; }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.post-card__thumb img.is-placeholder { width: 64px; height: auto; object-fit: contain; opacity: .9; }
.post-card a:hover .post-card__thumb img:not(.is-placeholder) { transform: scale(1.05); }
.post-card__body { padding: 20px 24px 26px; }
.post-card__title { font-size: 17px; line-height: 1.6; margin: 10px 0 8px; }
.post-card a:hover .post-card__title { color: var(--c-blue); }
.post-card__excerpt { margin: 0; font-size: 13px; color: var(--c-text-sub); line-height: 1.8; }

.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.post-meta time { font-family: var(--font-en); font-weight: 600; font-size: 13px; color: var(--c-text-sub); }
.post-meta .cat { font-size: 12px; font-weight: 700; padding: 3px 14px; border-radius: 999px; background: rgba(53, 199, 169, .14); color: #138a72; white-space: nowrap; }
.post-meta--light time { color: rgba(255,255,255,.8); }
.post-meta--light .cat { background: rgba(99, 220, 196, .18); color: #8ff0dc; }

.pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 56px; }
.pagination a, .pagination span { min-width: 44px; height: 44px; padding: 0 10px; display: grid; place-items: center; border-radius: 10px; font-family: var(--font-en); font-weight: 600; }
.pagination a { border: 1px solid var(--c-line); color: var(--c-text); background: #fff; }
.pagination a:hover { border-color: var(--c-teal); color: var(--c-blue); }
.pagination .is-current { background: var(--grad-brand); color: #fff; }
.pagination__gap { color: var(--c-text-sub); }

.preview-bar { position: sticky; top: var(--header-h); z-index: 50; margin-top: var(--header-h); padding: 12px 24px; background: var(--c-orange); color: #fff; font-size: 14px; font-weight: 700; text-align: center; }
.preview-bar a { color: #fff; text-decoration: underline; margin-left: 12px; }
.preview-bar + .page-hero { padding-top: 56px; }

.page-hero--article { padding-bottom: 56px; }
.page-hero--article .breadcrumb { margin: 0 0 24px; }
.article-title { position: relative; margin-top: 16px; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.5; max-width: 900px; }
.section--article { padding-top: 64px; }
.container--narrow { max-width: 860px; }

.article__eyecatch { margin: 0 0 48px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.article__eyecatch img { width: 100%; }
.article__body { font-size: 16px; line-height: 2; }
.article__body > * + * { margin-top: 1.4em; }
.article__body p { margin-bottom: 0; }
.article__body h2 { margin-top: 2.4em; padding: 0 0 12px; font-size: 22px; border-bottom: 2px solid var(--c-line); position: relative; }
.article__body h2::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 80px; height: 2px; background: var(--grad-brand); }
.article__body h3 { margin-top: 2em; font-size: 18px; padding-left: 14px; border-left: 4px solid var(--c-teal); }
.article__body ul { padding: 20px 24px 20px 44px; background: var(--c-bg-soft); border-radius: 12px; list-style: none; }
.article__body li { position: relative; }
.article__body li + li { margin-top: 6px; }
.article__body li::before { content: ""; position: absolute; left: -20px; top: .78em; width: 9px; height: 10px; background: var(--c-teal); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.article__body figure { margin-left: 0; margin-right: 0; }
.article__body figure img { border-radius: 12px; margin: 0 auto; }
.article__body figcaption { margin-top: 8px; font-size: 13px; color: var(--c-text-sub); text-align: center; }
.article__body a { text-decoration: underline; text-underline-offset: 3px; }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--c-line); }
.post-nav a { display: block; padding: 18px 22px; border-radius: 12px; border: 1px solid var(--c-line); color: var(--c-text); font-weight: 500; line-height: 1.6; }
.post-nav a:hover { border-color: var(--c-teal); color: var(--c-blue); }
.post-nav small { display: block; color: var(--c-sea); font-weight: 700; font-size: 12px; margin-bottom: 4px; }
.post-nav__next { grid-column: 2; text-align: right; }
@media (max-width: 600px) { .post-nav { grid-template-columns: 1fr; } .post-nav__next { grid-column: 1; } }

/* ---------- Products ---------- */
.section--tight { padding: 56px 0; }
.product-index { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.product-index__card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 28px 64px 28px 32px; border-radius: var(--radius); border: 1px solid var(--c-line); background: #fff; color: var(--c-text); transition: border-color .2s, transform .2s, box-shadow .2s; }
.product-index__card:hover { color: var(--c-text); border-color: var(--c-teal); transform: translateY(-3px); box-shadow: var(--shadow); }
.product-index__card strong { font-size: 24px; line-height: 1.3; color: var(--c-ink); }
.product-index__card span:not(.product-index__tag):not(.product-index__arrow) { font-size: 14px; color: var(--c-text-sub); }
.product-index__tag { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 2px 12px; border-radius: 999px; background: rgba(53, 199, 169, .14); color: #138a72; }
.product-index__card--sales .product-index__tag { background: rgba(15, 111, 168, .1); color: var(--c-blue); }
.product-index__arrow { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); width: 36px; height: 40px; display: grid; place-items: center; color: #fff; background: var(--grad-brand); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
@media (max-width: 760px) { .product-index { grid-template-columns: 1fr; } }

.product-hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; margin-bottom: 80px; }
.product-hero__text > p { color: var(--c-text-sub); }
.product-label { font-family: var(--font-en); font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--c-orange); margin-bottom: 8px; }
.product-name { font-size: clamp(32px, 4.4vw, 48px); font-weight: 900; line-height: 1.2; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 16px; }
.product-catch { font-size: clamp(18px, 2vw, 22px); font-weight: 700; line-height: 1.7; color: var(--c-ink) !important; margin-bottom: 20px; }
.product-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 32px; }
.product-chips li { font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--c-line); color: var(--c-slate); }
.product-chips li::before { content: "✓"; color: var(--c-teal); margin-right: 6px; }
.product-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.product-actions--center { justify-content: center; }
@media (max-width: 960px) { .product-hero { grid-template-columns: 1fr; gap: 40px; margin-bottom: 56px; } }

.product-shots { position: relative; padding: 0 0 48px 0; }
.shot { margin: 0; overflow: hidden; background: #fff; box-shadow: 0 24px 60px rgba(10, 44, 66, .18); }
.shot--pc { border-radius: 12px; border: 1px solid var(--c-line); margin-right: 64px; }
.shot__bar { display: flex; gap: 6px; padding: 10px 14px; background: #eef3f5; border-bottom: 1px solid var(--c-line); }
.shot__bar span { width: 10px; height: 10px; border-radius: 50%; background: #cfd9dd; }
.shot__bar span:first-child { background: var(--c-orange); }
.shot--sp { position: absolute; right: 0; bottom: 0; width: 28%; border-radius: 22px; border: 6px solid var(--c-ink); }
@media (max-width: 560px) { .shot--pc { margin-right: 40px; } .shot--sp { width: 34%; border-width: 4px; border-radius: 16px; } }

.product-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 80px; }
.product-point { position: relative; padding: 32px 28px; background: #fff; border-radius: var(--radius); border: 1px solid var(--c-line); }
.product-point__num { display: grid; place-items: center; width: 44px; height: 50px; margin-bottom: 16px; font-family: var(--font-en); font-weight: 700; color: #fff; background: var(--grad-brand); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.product-point h3 { font-size: 18px; margin-bottom: 10px; }
.product-point p { font-size: 14px; color: var(--c-text-sub); margin: 0; }
@media (max-width: 900px) { .product-points { grid-template-columns: 1fr; } }

.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 72px; }
.feature-grid--3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 32px; }
.feature { padding: 24px; border-radius: 12px; background: #fff; border: 1px solid var(--c-line); }
.feature h4 { font-size: 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.feature h4::before { content: ""; flex-shrink: 0; width: 10px; height: 11px; background: var(--c-teal); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.feature p { font-size: 13px; color: var(--c-text-sub); margin: 0; line-height: 1.8; }
.section--soft .feature, .section--soft .plan { border-color: transparent; }
@media (max-width: 1000px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-grid, .feature-grid--3 { grid-template-columns: 1fr; } }

.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.plan { padding: 28px; border-radius: var(--radius); background: #fff; border: 1px solid var(--c-line); }
.plan h4 { font-size: 18px; margin-bottom: 8px; color: var(--c-blue); }
.plan p { font-size: 14px; color: var(--c-text-sub); margin: 0; }
.plan--featured { box-shadow: inset 0 0 0 2px var(--c-teal); }
.plan-lead { color: var(--c-text-sub); }
.plan-note { margin-top: 16px; font-size: 13px; color: var(--c-text-sub); }
.plan-note a { text-decoration: underline; }
@media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; } }

.sales-mock { padding: 24px; border-radius: 16px; background: #fff; border: 1px solid var(--c-line); box-shadow: 0 24px 60px rgba(10, 44, 66, .14); }
.sales-mock__head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 18px; }
.sales-mock__period { font-size: 12px; padding: 2px 12px; border-radius: 999px; background: var(--c-bg-soft); color: var(--c-text-sub); }
.sales-mock__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.sales-mock__kpis div { padding: 14px; border-radius: 10px; background: var(--c-bg-soft); }
.sales-mock__kpis small { display: block; font-size: 11px; color: var(--c-text-sub); }
.sales-mock__kpis b { font-family: var(--font-en); font-size: 22px; color: var(--c-blue); }
.sales-mock__kpis i { font-style: normal; font-size: 12px; margin-left: 2px; }
.sales-mock__chart { padding: 14px; border-radius: 10px; border: 1px solid var(--c-line); }
.sales-mock__chart small { font-size: 11px; color: var(--c-text-sub); }
.sales-mock__bars { display: flex; align-items: flex-end; gap: 8%; height: 120px; padding-top: 8px; }
.sales-mock__bars span { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(var(--c-teal), var(--c-blue)); }
.sales-mock__bars span:last-child { background: var(--c-orange); }
.sales-mock__note { margin: 10px 0 0; font-size: 11px; color: var(--c-text-sub); text-align: right; }
@media (max-width: 560px) { .sales-mock__kpis { grid-template-columns: repeat(2, 1fr); } }

.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 72px; counter-reset: none; }
.flow__step { position: relative; padding: 24px 18px; border-radius: 12px; background: var(--c-bg-soft); text-align: center; }
.flow__step:not(:last-child)::after { content: ""; position: absolute; right: -11px; top: 50%; z-index: 1; width: 10px; height: 16px; transform: translateY(-50%); background: var(--c-teal); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.flow__num { font-family: var(--font-en); font-weight: 700; font-size: 13px; color: var(--c-orange); }
.flow__step h4 { font-size: 17px; margin: 4px 0 8px; color: var(--c-blue); }
.flow__step p { font-size: 13px; color: var(--c-text-sub); margin: 0; line-height: 1.7; }
@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; gap: 14px; }
  .flow__step { text-align: left; display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; padding: 16px 20px; }
  .flow__num { grid-row: span 2; align-self: center; }
  .flow__step h4 { margin: 0; }
  .flow__step:not(:last-child)::after { right: auto; left: 34px; top: auto; bottom: -13px; transform: rotate(90deg); }
}

.check-list--4 { grid-template-columns: repeat(4, 1fr); margin-bottom: 72px; }
.check-list--4 li { font-size: 13px; color: var(--c-text-sub); }
.check-list--4 b { color: var(--c-ink); font-size: 15px; }
@media (max-width: 1000px) { .check-list--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .check-list--4 { grid-template-columns: 1fr; } }

.price-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.price-card { padding: 24px; border-radius: 12px; border: 1px solid var(--c-line); background: #fff; text-align: center; }
.price-card span { display: block; font-size: 14px; font-weight: 700; color: var(--c-slate); }
.price-card b { display: block; white-space: nowrap; margin-top: 6px; font-family: var(--font-en); font-size: 32px; color: var(--c-blue); }
.price-card small { font-family: var(--font-ja); font-size: 13px; margin-left: 4px; color: var(--c-text-sub); }
@media (max-width: 900px) { .price-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .price-card { padding: 18px 10px; } .price-card span { font-size: 13px; } .price-card b { font-size: 24px; } .price-card small { font-size: 11px; margin-left: 2px; } }

.product-cta { text-align: center; }
.product-cta__inner { position: relative; }
.product-cta h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 16px; }
.product-cta p { color: rgba(255,255,255,.8); margin-bottom: 32px; }

/* top page teaser */
.product-teasers { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.product-teaser { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); overflow: hidden; color: var(--c-text); box-shadow: var(--shadow); transition: transform .3s, box-shadow .3s; }
.product-teaser:hover { color: var(--c-text); transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.product-teaser__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--grad-brand); }
.product-teaser__img img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.product-teaser__img--flow { display: grid; place-items: center; padding: 24px; }
.product-teaser__img--flow ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.product-teaser__img--flow li { position: relative; padding: 10px 16px; border-radius: 10px; background: rgba(255,255,255,.95); color: var(--c-blue); font-weight: 700; font-size: 15px; }
.product-teaser__img--flow li:not(:last-child)::after { content: "→"; position: absolute; right: -18px; top: 50%; transform: translateY(-50%); color: #fff; }
.product-teaser__body { padding: 28px 32px 32px; display: flex; flex-direction: column; flex-grow: 1; }
.product-teaser__tag { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 2px 12px; border-radius: 999px; background: rgba(53, 199, 169, .14); color: #138a72; }
.product-teaser--sales .product-teaser__tag { background: rgba(15, 111, 168, .1); color: var(--c-blue); }
.product-teaser h3 { font-size: 24px; margin: 10px 0 10px; }
.product-teaser p { font-size: 14px; color: var(--c-text-sub); flex-grow: 1; }
.product-teaser .more { font-weight: 700; font-size: 14px; color: var(--c-blue); }
@media (max-width: 900px) { .product-teasers { grid-template-columns: 1fr; } }

/* ---------- Policy pages ---------- */
.policy__intro { padding: 28px 32px; border-radius: var(--radius); background: var(--c-bg-soft); }
.policy__contact { padding: 24px 32px; border-radius: var(--radius); border: 1px solid var(--c-line); }
.policy__contact p { margin: 0; }
.policy__sign { text-align: right; line-height: 1.9; }
@media (max-width: 600px) { .policy__intro, .policy__contact { padding: 20px; } }

/* ---------- Contact form (server submit) ---------- */
.form__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form { position: relative; }
.form__msg { white-space: pre-line; }
.form--done { text-align: center; padding: 56px 32px; white-space: pre-line; }
.form--done:focus { outline: none; }
.form__done-title { font-size: 22px; font-weight: 700; color: var(--c-blue); margin-bottom: 12px; }
.form__done-title::before { content: "✓"; display: grid; place-items: center; width: 56px; height: 64px; margin: 0 auto 16px; color: #fff; background: var(--grad-brand); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }

/* ==========================================================
   沖縄テーマ（参考：線画イラスト・曲線の区切り・生成りの背景
   ＋ 海・波・赤瓦・ハイビスカス・ミンサー柄）
   ========================================================== */
html, body { overflow-x: clip; }

/* ---- セクション背景と波の区切り（下のセクションが上に波を立てる） ---- */
.section { --sec-bg: #fff; background: var(--sec-bg); }
.section--soft { --sec-bg: var(--c-bg-soft); }
.section--mint { --sec-bg: var(--c-mint-bg); }
.section--dark {
  --sec-bg: #0d3a56;
  overflow: visible;
  background: url("../img/okinawa/bubbles.svg") 0 0 / 600px 600px repeat, var(--grad-dark);
  animation: bubbles 26s linear infinite;
}
.section::before, .site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 40px; z-index: 1; pointer-events: none;
  background: var(--sec-bg);
  -webkit-mask: url("../img/okinawa/wave.svg") 0 0 / 1440px 100% repeat-x;
  mask: url("../img/okinawa/wave.svg") 0 0 / 1440px 100% repeat-x;
  animation: wave-drift 28s linear infinite;
}
.section:nth-of-type(even)::before { animation-direction: reverse; animation-duration: 34s; }
.section > .container { position: relative; z-index: 1; }
@keyframes wave-drift { to { -webkit-mask-position: 1440px 0; mask-position: 1440px 0; } }
@keyframes bubbles { to { background-position: 0 -600px, 0 0; } }

/* ---- ミンサー柄の帯 ---- */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px;
  background: url("../img/okinawa/minsa.svg") 0 0 / 32px 8px repeat-x;
  animation: minsa 40s linear infinite;
}
@keyframes minsa { to { background-position: 320px 0; } }
.site-header.is-scrolled { box-shadow: none; }

/* ---- 見出し：ハイビスカスと波線 ---- */
.sec-head__en { font-weight: 800; }
.sec-head__en::after {
  content: ""; flex-shrink: 0; width: .62em; height: .62em;
  background: url("../img/okinawa/hibiscus.svg") center / contain no-repeat;
  animation: sway-flower 6s ease-in-out infinite;
}
.sec-head__ja::after {
  content: ""; display: block; width: 84px; height: 12px; margin-top: 12px;
  background: url("../img/okinawa/squiggle.svg") left center / contain no-repeat;
}
.sec-head--center .sec-head__ja::after { margin-left: auto; margin-right: auto; background-position: center; }
.js .sec-head.reveal .sec-head__ja::after { clip-path: inset(0 100% 0 0); transition: clip-path .9s ease .35s; }
.js .sec-head.reveal.is-visible .sec-head__ja::after { clip-path: inset(0 0 0 0); }
@keyframes sway-flower { 0%, 100% { transform: rotate(-12deg) translateY(0); } 50% { transform: rotate(14deg) translateY(-6px); } }

/* ---- ふわふわ漂う飾り ---- */
.deco { position: absolute; z-index: 0; height: auto; pointer-events: none; animation: floaty 7s ease-in-out infinite; }
.deco--slow { animation-duration: 10s; animation-delay: -3s; }
.deco--cloud { opacity: .95; animation-name: cloud-drift; animation-duration: 16s; }
.deco--fish { animation-name: swim; animation-duration: 9s; }
.deco--fish.deco--slow { animation-duration: 12s; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(8deg); } }
@keyframes cloud-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(40px); } }
@keyframes swim { 0% { transform: translate(0, 0); } 25% { transform: translate(-40px, -8px); } 50% { transform: translate(-80px, 0); } 75% { transform: translate(-40px, 8px); } 100% { transform: translate(0, 0); } }
@media (max-width: 768px) { .deco { opacity: .55; } .deco--cloud { display: none; } }

/* ---- カード：線画の枠 ＋ ずらした影 ---- */
.value-card, .service-card, .biz-item, .works-card, .product-point, .feature, .plan, .price-card,
.post-card a, .product-teaser, .product-index__card, .form, .sales-mock, .page-toc a, .post-nav a,
.contact-tel, .message__visual, .policy__contact, .news-list, .shot--pc, .recruit__box {
  --pop: var(--c-teal);
  border: 2px solid var(--c-ink-line); border-radius: var(--radius);
  box-shadow: 0 6px 0 var(--pop);
  transition: transform .35s var(--spring), box-shadow .35s var(--spring), border-color .2s;
}
:is(.value-grid, .biz-list, .works-grid, .service-grid, .product-points, .feature-grid, .post-grid, .product-teasers, .plan-grid, .price-cards) > :nth-child(3n+2) { --pop: var(--c-cyan); }
:is(.value-grid, .biz-list, .works-grid, .service-grid, .product-points, .feature-grid, .post-grid, .product-teasers, .plan-grid, .price-cards) > :nth-child(3n) { --pop: var(--c-orange); }
.post-grid > .post-card:nth-child(3n+2) a { --pop: var(--c-cyan); }
.post-grid > .post-card:nth-child(3n) a { --pop: var(--c-orange); }
.value-card:hover, .service-card:hover, .biz-item:hover, .post-card a:hover, .product-teaser:hover,
.product-index__card:hover, .page-toc a:hover, .post-nav a:hover, .feature:hover, .product-point:hover {
  transform: translateY(-5px) rotate(-.4deg); box-shadow: 0 11px 0 var(--pop); border-color: var(--c-ink-line);
}
.contact-tel, .recruit__box { --pop: var(--c-orange); }
.recruit__box { border-color: rgba(255,255,255,.55); }
.shot--pc { --pop: var(--c-orange); }
.news-list { background: #fff; padding: 4px 24px; border-top: 2px solid var(--c-ink-line); }
.news-item:last-child a { border-bottom: 0; }
.value-card::before { display: none; }
.value-card, .works-card { overflow: visible; }
.works-card__head { border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0; border-bottom: 2px solid var(--c-ink-line); }
.biz-item { background: #fff; }
.biz-item__icon { border: 2px solid var(--c-ink-line); }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea {
  background: #fffaf0; border: 2px solid var(--c-line); border-radius: 12px;
}

/* ---- 番号バッジ：ハイビスカスのような花形 ---- */
.value-card__num {
  --badge: var(--c-teal);
  right: 18px; top: -30px; width: 68px; height: 68px; display: grid; place-items: center;
  font-size: 20px; font-weight: 800; color: #fff; -webkit-text-stroke: 0; z-index: 2; isolation: isolate;
}
.value-card__num::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--badge);
  -webkit-mask: url("../img/okinawa/flower.svg") center / contain no-repeat; mask: url("../img/okinawa/flower.svg") center / contain no-repeat;
  transition: transform .6s var(--spring);
}
.value-card:nth-child(2) .value-card__num { --badge: var(--c-cyan); }
.value-card:nth-child(3) .value-card__num { --badge: var(--c-orange); }
.value-card:hover .value-card__num::before { transform: rotate(90deg); }
.js .reveal .value-card__num { transform: scale(0) rotate(-120deg); transition: transform .7s var(--spring) .35s; }
.js .reveal.is-visible .value-card__num { transform: none; }
.value-card { margin-top: 20px; }

/* ---- ボタン：ぷっくり押せる ---- */
.btn { transition: transform .3s var(--spring), box-shadow .3s var(--spring), background .2s, color .2s; }
.btn--primary { box-shadow: 0 5px 0 #0b5583; }
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 8px 0 #0b5583; }
.btn--accent { box-shadow: 0 5px 0 #c4661a; }
.btn--accent:hover { transform: translateY(-3px); box-shadow: 0 8px 0 #c4661a; background: var(--c-orange); }
.btn--ghost { background: #fff; border-color: var(--c-blue); box-shadow: 0 5px 0 var(--c-blue); }
.btn--ghost:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--c-blue); }
.btn--ghost-light { background: transparent; border-color: rgba(255,255,255,.7); box-shadow: 0 5px 0 rgba(255,255,255,.35); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.25); transition-duration: .05s; }
.gnav__cta { box-shadow: 0 4px 0 #c4661a; transition: transform .3s var(--spring), box-shadow .3s var(--spring); }
.gnav__cta:hover { box-shadow: 0 7px 0 #c4661a; transform: translateY(-3px); }

/* ---- スクロールで順番に浮かび上がる ---- */
.js .reveal { transform: translateY(32px) scale(.98); transition: opacity .7s ease, transform .9s var(--spring); }
:is(.value-grid, .biz-list, .works-grid, .service-grid, .product-points, .feature-grid, .post-grid, .product-teasers, .plan-grid, .price-cards, .flow) > .reveal:nth-child(2) { transition-delay: .08s; }
:is(.value-grid, .biz-list, .works-grid, .service-grid, .product-points, .feature-grid, .post-grid, .product-teasers, .plan-grid, .price-cards, .flow) > .reveal:nth-child(3) { transition-delay: .16s; }
:is(.value-grid, .biz-list, .works-grid, .service-grid, .product-points, .feature-grid, .post-grid, .product-teasers, .plan-grid, .price-cards, .flow) > .reveal:nth-child(4) { transition-delay: .24s; }
:is(.biz-list, .feature-grid, .flow) > .reveal:nth-child(n+5) { transition-delay: .32s; }

/* ---- 下層ページの見出し：空と島のイラスト ---- */
.page-hero {
  background: linear-gradient(var(--c-sky) 0%, #f3fbfb 70%, #fff 100%); color: var(--c-ink);
  padding: calc(var(--header-h) + 64px) 0 96px;
}
.page-hero__deco { display: none; }
.page-hero::after {
  content: ""; position: absolute; right: max(2vw, calc(50% - 680px)); bottom: 0; width: min(40vw, 500px); aspect-ratio: 2;
  background: url("../img/okinawa/island.svg") center bottom / contain no-repeat; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.page-hero .sec-head__en { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; }
.page-hero .sec-head__ja { color: var(--c-slate); }
.page-hero .sec-head__lead { color: var(--c-text-sub); }
.breadcrumb { color: var(--c-text-sub); }
.breadcrumb a { color: var(--c-blue); }
.page-hero--article { padding-bottom: 72px; }
.page-hero--article::after { width: min(28vw, 340px); opacity: .9; }
.page-hero .container { position: relative; z-index: 1; }
.article-title { color: var(--c-ink); max-width: min(900px, 64%); }
.post-meta--light time { color: var(--c-text-sub); }
.post-meta--light .cat { background: rgba(53, 199, 169, .16); color: #138a72; }
.preview-bar + .page-hero { padding-top: 48px; }
@media (max-width: 768px) {
  .page-hero { padding-bottom: calc(26vw + 40px); }
  .page-hero::after { width: 56vw; right: 4vw; }
  .article-title { max-width: none; }
}

/* ---- ごあいさつ：代表の写真 ---- */
.message__visual--photo { margin: 0; padding: 0; overflow: visible; background: #fff; text-align: left; }
.message__visual--photo picture { display: block; overflow: hidden; border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0; border-bottom: 2px solid var(--c-ink-line); }
.message__visual--photo picture img { width: 100%; height: auto; margin: 0; aspect-ratio: 4 / 5; object-fit: cover; }
.message__visual--photo figcaption { padding: 14px 20px 16px; font-size: 18px; font-weight: 700; color: var(--c-ink); letter-spacing: .1em; }
.message__visual--photo figcaption small { display: block; font-size: 12px; font-weight: 700; color: var(--c-sea); letter-spacing: .08em; }
.message__visual .message__flower { position: absolute; right: -18px; top: -20px; width: 56px; height: 56px; margin: 0 !important; animation: sway-flower 6s ease-in-out infinite; }
@media (max-width: 900px) { .message__visual--photo { max-width: 420px; } .message__visual--photo picture img { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .message__visual .message__flower { animation: none; } }

/* ---- 濃い色のセクション（海の中） ---- */
.recruit__copy em { color: #7fe9d3; }
.product-cta .recruit__deco, .recruit__deco { opacity: .06; }

/* ---- フッター：波 ＋ ミンサー柄 ---- */
.site-footer { --sec-bg: var(--c-navy); position: relative; overflow: visible; }
.site-footer::before { top: auto; }
.site-footer::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px;
  background: url("../img/okinawa/minsa.svg") 0 0 / 64px 16px repeat-x;
  animation: minsa 50s linear infinite reverse;
}
.site-footer { padding-bottom: 48px; }

/* ---- ページ上部へ戻るボタン：ゆらゆら ---- */
.pagetop.is-show { animation: bob 3.5s ease-in-out infinite; }

/* ---- 動きを減らす設定のときは止める ---- */
@media (prefers-reduced-motion: reduce) {
  .section--dark, .section::before, .site-footer::before, .site-header::after, .site-footer::after,
  .sec-head__en::after, .deco, .hero__stat, .hero__stat::before, .pagetop.is-show,
  .hero__eyebrow, .hero__line, .hero__sub, .hero__weather { animation: none; }
  .js .reveal .value-card__num { transform: none; transition: none; }
  .js .sec-head.reveal .sec-head__ja::after { clip-path: none; transition: none; }
}