/* ==========================================================
   短いトップと、詳しく読むための別ページ
   ========================================================== */

:root {
  --header-h: 80px;
  --home-water-surface: #f2fafb;
  --about-surface-start: #176d7d;
  --about-surface-end: #103c54;
  --faq-surface: #e7f2f7;
  --news-surface: #edf5f4;
  --news-line: #c8dddd;
  --closing-surface: #0b1838;
  --section-wave-height: clamp(32px, 4.5vw, 64px);
  /* 直接開く場合も波を表示するため、SVGマスクはdata URIで保持する。 */
  --section-wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20120%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%2064C240%20120%20480%20120%20720%2082S1200%2010%201440%2052V120H0Z%22%2F%3E%3C%2Fsvg%3E");
}

/* ヘッダーも本文と同じコンテナ幅に揃える */
.site-header__inner { width: min(100% - 32px, var(--container)); }
.site-header__logo img { width: 144px; }
.global-nav__list { gap: 32px; font-size: 1rem; }
.global-nav__list a[aria-current="page"] { color: var(--blue); font-weight: 700; }
.global-nav__list a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px; }
.btn { background: linear-gradient(90deg, #2473db, var(--blue)); }
.more-link { min-height: 44px; white-space: normal; }
.tag { font-size: .78rem; }
.tag--dev, .tag--info, .tag--prep { color: #185e94; }

/* ---------- gentle motion ---------- */
.story-page .ocean-bubbles > span { animation: bubble-settle 4s ease-in-out 1 paused; }
.story-page .ocean-scene__seaweed { animation: seaweed-settle 4s ease-in-out 1 paused; }
.story-page .chara--float { animation: float 4s ease-in-out 1; }
.story-page .hero__stars { animation-duration: 4s; animation-iteration-count: 1; }
@keyframes bubble-settle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}
@keyframes seaweed-settle {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(3deg); }
}

/* ---------- compact home ---------- */
.compact-page .hero { min-height: 620px; padding-block: 64px 120px; }
.compact-page .hero__bg > picture { display: contents; }
.compact-page .hero__bg > picture > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 160%; object-fit: cover; object-position: center top; }
.compact-page .hero__bg:has(> picture > img) .hero__stars { display: none; }
.compact-page .hero__wave { height: var(--section-wave-height); fill: var(--home-water-surface); pointer-events: none; }
.compact-page .ocean #services { --section-wave-color: var(--about-surface-start); background: radial-gradient(ellipse at 90% 24%, #d4eaf8, transparent 46%), linear-gradient(180deg, var(--home-water-surface), #d4eef0); }
.compact-page .ocean #values { --section-wave-color: var(--news-surface); background: linear-gradient(180deg, var(--about-surface-start), var(--about-surface-end)); }
.compact-page #values::before { display: none; }
/* 日本語・イラスト・間隔を、英語見出しと同じ比率で可変にする */
.home-section-title { font-size: clamp(2.5rem, 2rem + 2.5vw, 4rem); }
.home-section-title__label { display: flex; align-items: center; gap: .25em; margin-bottom: -.625em; font-family: var(--font-head); font-size: .3em; font-weight: 700; line-height: 1.5; color: var(--navy); }
.home-section-title__label > img { width: 2.5em; height: 2.5em; flex-shrink: 0; object-fit: contain; }
.home-section-title--light .home-section-title__label { color: #d0e9ee; }
.compact-page #services .home-section-title__heading,
.compact-page #values .home-section-title__heading,
.compact-page #news .home-section-title__heading { font-size: 1em; line-height: 1.2; letter-spacing: .025em; }
.home-about__catch { margin-top: 32px; font-family: var(--font-head); font-size: clamp(1.65rem, 1.1rem + 1.6vw, 2.4rem); font-weight: 900; line-height: 1.55; color: #fff; }
.compact-page .ocean .home-services { padding-block: 88px 96px; }
.compact-page #services .section-head { margin-bottom: 44px; }
.home-services .ocean-scene::before { content: ""; position: absolute; inset: 0; background: linear-gradient(112deg, transparent 26%, rgba(255, 255, 255, .5) 30%, transparent 44%, transparent 58%, rgba(255, 255, 255, .28) 62%, transparent 76%); }
.home-services__current { inset: 0; width: 100%; height: 100%; fill: none; stroke: #82b4d1; stroke-width: 1.2; opacity: .22; }
.home-services .ocean-bubbles > span { border-color: rgba(92, 151, 184, .4); background: radial-gradient(circle at 28% 25%, #fff, rgba(255, 255, 255, .18) 42%); }
.home-services .ocean-bubbles--left { top: 14%; left: 1%; }
.home-services .ocean-bubbles--right { top: 55%; right: 1%; }
.home-services .ocean-scene__fish { top: 72px; right: 7%; width: 160px; height: 70px; color: #3981ac; opacity: .28; }
.home-services .ocean-scene__seaweed { left: -24px; width: 180px; height: 300px; color: #478a9b; opacity: .26; }
.home-services .ocean-scene__coral { width: 190px; height: 178px; color: #5e92ab; opacity: .3; }
.home-services__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.home-services__faq { margin-top: 28px; text-align: right; }
.home-services__faq .more-link { font-size: .9rem; }
.home-service { --service-accent: #236dc2; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); grid-template-areas: "intro visual" "intro caption"; gap: 12px 44px; min-width: 0; padding: 40px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 32px; background: #fff; box-shadow: 0 18px 50px rgba(39, 87, 113, .07); overflow-wrap: anywhere; }
.home-service--ground { --service-accent: #8b6119; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); grid-template-areas: "visual intro" "caption intro"; background: #fff8e5; }
.home-service__intro { grid-area: intro; align-self: center; min-width: 0; margin: 0; }
.home-service__visual { grid-area: visual; position: relative; display: flex; align-items: center; min-width: 0; min-height: 370px; padding: 24px; border-radius: 24px; }
.home-service__visual--make { background: linear-gradient(145deg, #e8f2ff, #dceaf9); }
.home-service__visual--ground { background: none; }
.home-service__visual .demo__browser { width: 100%; transform: none; box-shadow: 0 14px 28px rgba(29, 72, 94, .1); }
.home-service__visual .demo__site { padding: 18px 20px; }
.home-service__visual .demo__site-main { padding-block: 28px 20px; }
.home-service__visual .demo__site-title { font-size: clamp(1rem, .65rem + 1vw, 1.45rem); }
.home-service__visual .demo__site-nav { display: none; }
.home-service__visual .demo__site-bottom { padding-top: 12px; }
.home-service__visual .ground__example { width: 100%; padding: 0; border: 0; border-radius: 0; background: none; }
.home-service__visual .ground__example-label { margin-bottom: 16px; color: #7a602f; }
.home-service__visual .ground__request { padding: 14px 20px; background: #e5effb; box-shadow: 0 8px 24px rgba(39, 87, 113, .04); }
.home-service__visual .ground__request p { font-size: .95rem; }
.home-service__visual .ground__answer { padding: 20px 24px; margin-top: 16px; margin-right: 20px; border: 1px solid #eee2c8; background: #fff; box-shadow: 0 12px 28px rgba(125, 100, 42, .06); }
.home-service__visual .ground__answer p { font-size: 1rem; line-height: 1.8; }
.home-service__visual .ground__answer svg { width: 40px; height: 40px; right: -14px; bottom: -14px; }
.home-service__caption { grid-area: caption; margin: 0; padding-inline: 4px; font-size: .8rem; color: #52687b; }
.make-overview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; width: 100%; }
.make-overview__label { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: #244c7e; font-size: .95rem; font-weight: 700; line-height: 1.5; }
.make-overview__label > span { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex-shrink: 0; border-radius: 50%; background: #236dc2; color: #fff; font-family: var(--font-head); font-size: .8rem; }
/* 短い依頼から、完成例と日々の管理へつなげる */
.make-overview__request { margin-left: 20px; padding: 10px 16px; border-radius: 16px 16px 4px 16px; background: #fff; color: var(--navy); font-size: .9rem; line-height: 1.8; }
.make-overview__request > span { display: block; margin-bottom: 4px; color: #52687b; font-size: .75rem; }
.make-overview__flow { display: block; margin-block: 6px; color: #236dc2; font-size: 1.1rem; line-height: 1; text-align: center; }
.make-overview__manage { padding-top: 16px; border-top: 1px solid #c5d9ef; }
.make-overview .demo__browser { border-radius: 12px; box-shadow: 0 8px 20px rgba(29, 72, 94, .08); }
.make-overview .demo__site { padding: 14px 18px; }
.make-overview .demo__site-main { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); padding-block: 18px 6px; }
.make-overview .demo__site-kicker, .make-overview .demo__site-description, .make-overview .demo__site-link, .make-overview .demo__site-bottom { display: none; }
.make-overview .demo__site-title { font-size: clamp(1rem, 1.45vw, 1.15rem); white-space: normal; }
.make-overview .demo__art { width: 100%; max-width: 132px; margin: 0 auto; }
.make-overview .demo__art-caption { display: none; }
.make-overview__tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.make-overview__tools > li { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0; padding: 8px 4px; color: #244c7e; font-size: .85rem; font-weight: 700; line-height: 1.5; text-align: center; }
.make-overview__tools > li + li { border-left: 1px solid #c5d9ef; }
.make-overview__tools > li > span { min-width: 0; max-width: 100%; word-break: normal; overflow-wrap: anywhere; }
.make-overview__tools svg { width: 28px; height: 28px; flex-shrink: 0; fill: none; stroke: #236dc2; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-service__title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; font-family: var(--font-head); font-size: 1.8rem; color: var(--service-accent); }
.home-service__title::before { content: ""; width: 6px; height: 28px; border-radius: 6px; background: var(--service-accent); }
.home-service--ground .tag { background: #fae8b1; color: #765114; }
.home-service__catch { margin-top: 24px; font-family: var(--font-head); font-weight: 900; font-size: clamp(1.45rem, 1rem + 1.5vw, 2rem); line-height: 1.65; color: var(--navy); }
.home-service__text { margin-top: 20px; font-size: 1rem; line-height: 2; color: #52687b; }
.home-service__price-lead { display: block; margin-bottom: 4px; font-size: 1.15rem; }
.home-service__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; width: fit-content; max-width: 100%; margin-bottom: 16px; line-height: 1.15; }
.home-service__price strong { position: relative; isolation: isolate; font-size: clamp(3.5rem, 5.7vw, 4.5rem); font-weight: 900; letter-spacing: -.02em; }
.home-service__price strong::before { content: ""; position: absolute; z-index: -1; inset: auto -4px 2px; height: 35%; border-radius: 50%; background: #fecb4e; transform: rotate(-5deg); }
.home-service__price > span { font-size: 1.7rem; }
.home-about__more { margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(184, 219, 229, .3); color: #dcedf2; font-size: .95rem; line-height: 2; }
.home-about__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 32px; }
.compact-page #values .home-about__links .more-link { color: #fff; border-bottom: 1px solid #8ac8d8; }
.compact-page #values .body-text, .compact-page .value-card__text { font-size: .95rem; }
.compact-page .hero__lead { font-size: 1rem; }
.faq--accordion .faq__item { border-bottom-color: var(--news-line); }
.faq--accordion .faq__item:first-child { border-top: 1px solid var(--news-line); }
.story-page .faq--accordion .faq__question { display: flex; align-items: baseline; gap: 12px; min-height: 72px; padding: 24px 36px 24px 0; font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; line-height: 1.8; color: var(--navy); }
.faq__question-text { min-width: 0; }
.faq__mark { display: inline-grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--yellow); font-size: 1rem; line-height: 1; }
.story-page .faq--accordion .faq__answer { max-width: 920px; padding: 0 0 24px 44px; font-size: .95rem; line-height: 2; color: #52687b; }
.faq--accordion .faq__answer a { color: #185e94; text-decoration: underline; text-underline-offset: 3px; }
.faq--accordion .faq__answer a:hover { color: var(--blue); }
/* 開閉中だけ回答を切り抜き、高さの変化に合わせる */
.faq--accordion .faq__item.is-animating { overflow: hidden; }
.faq--accordion .faq__item[open] .faq__answer { animation: none; }
.faq--accordion .faq__item.is-closing .faq__question::after { transform: rotate(90deg); }
/* 開閉アイコンの周りに、小さな泡を浮かべる */
.faq__bubble {
  position: absolute; right: 1px; top: calc(50% + 1px); width: 32px; height: 32px;
  border: 1px solid rgba(73, 145, 181, .2); border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .75), rgba(184, 221, 239, .7) 68%);
  opacity: 0; transform: translateY(-50%) scale(.85); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.faq--accordion .faq__question::before,
.faq--accordion .faq__question::after { right: 10px; z-index: 1; }
.faq--accordion .faq__question:focus-visible { outline-offset: -3px; }
.faq--accordion .faq__question:focus-visible .faq__bubble { opacity: 1; transform: translateY(-50%) scale(1); }
@media (hover: hover) and (pointer: fine) {
  .faq--accordion .faq__question:hover .faq__bubble { opacity: 1; transform: translateY(-50%) scale(1); }
}
.compact-page #news::before { display: none; }
.compact-page .ocean #news { --section-wave-color: var(--closing-surface); border-top: 0; background: var(--news-surface); }
.compact-page .ocean .home-news { padding-block: 80px 88px; }
.compact-page .home-news .section-head { margin-bottom: 40px; }
.compact-page .home-news .news-item { grid-template-columns: 210px minmax(0, 1fr); column-gap: 24px; padding-block: 24px; }
.compact-page .home-news .news-item__title { grid-column: 2; grid-row: 1; margin: 0; }
.compact-page .home-news .news-item__arrow { grid-column: 3; grid-row: 1; }
.compact-page .home-news .news-item__status { grid-column: 3; grid-row: 1; }
.compact-page .home-news .more-link { font-size: .9rem; }
.home-news__more { display: flex; justify-content: flex-end; margin-top: 24px; }
.compact-page .home-news div.news-item:hover { transform: none; }
.news__notice { margin-bottom: 20px; font-size: .95rem; line-height: 1.9; color: #52687b; }
.news__sample-note { font-size: .8rem; line-height: 1.9; color: #52687b; }
.home-news .news__notice { margin-bottom: 8px; }
.home-news .news__sample-note { margin-bottom: 20px; }
.news-page .page-heading .news__sample-note { margin-top: 8px; }
.news-item[aria-disabled="true"] { pointer-events: none; cursor: default; }
.news-item[aria-disabled="true"]:hover { transform: none; }
.story-page .news-item__meta, .story-page .news-item__date { font-size: .85rem; color: #52687b; }
.news-item__date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.story-page .news-item__title { font-size: .95rem; line-height: 1.9; }
.compact-page .home-news .news-item, .news-page .news-archive .news-item { border: 0; border-bottom: 1px solid var(--news-line); border-radius: 0; background: none; box-shadow: none; }
.news-item__status { grid-column: 2; grid-row: 1 / 3; font-size: .8rem; color: #52687b; white-space: nowrap; }

/* ---------- inner pages ---------- */
.inner-page { background: #f7fbfc; }
.page-main { padding-block: 40px 88px; }
.page-heading { padding-block: 0 44px; }
.page-breadcrumb { margin-bottom: 32px; font-size: .75rem; color: #52687b; }
.page-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.page-breadcrumb li { display: flex; align-items: center; gap: 12px; }
.page-breadcrumb li + li::before { content: "/"; color: #9db6c3; }
.page-breadcrumb a { display: inline-block; padding-block: 4px; text-decoration: none; }
.page-breadcrumb a:hover { color: var(--blue); }
.inner-page .page-heading > .heading { font-size: clamp(2rem, 1.35rem + 2vw, 3.2rem); }
.page-intro { margin-top: 18px; font-size: 1rem; line-height: 2; color: #52687b; }
.inner-page .page-section { padding-block: 48px 64px; }
.inner-page .page-section .heading { font-size: clamp(1.65rem, 1.1rem + 1.7vw, 2.5rem); }
.inner-page .page-section .eyebrow { color: #22647b; }
.inner-page .page-section .body-text { color: var(--text); }
.inner-page .about { border-top: 1px solid #d9e7ea; }
.inner-page .about__journey { display: none; }
.inner-page #values { position: relative; background: #e7f1f2; }
.inner-page #values::before { display: none; }
.inner-page #values .heading, .inner-page #members .heading { color: var(--navy); }
.inner-page #values .eyebrow, .inner-page #members .eyebrow { color: #22647b; }
.inner-page #values .body-text { color: #52687b; }
.inner-page #values .section-head { margin-bottom: 32px; }
.inner-page .value-card { border-top-color: #b9d1d6; }
.inner-page .value-card__num { color: #327d8d; }
.inner-page .value-card__icon { fill: #327d8d; }
.inner-page .value-card__title { color: var(--navy); }
.inner-page .value-card__text { color: #52687b; }
.inner-page .value-card__text, .inner-page .members__intro .body-text { font-size: .95rem; }
.inner-page .home-about__more { border-top-color: #b9d1d6; color: #52687b; }
.inner-page .home-about__links .more-link { color: #185e94; }
.inner-page #members { padding-top: 64px; }
.inner-page .members__intro .body-text { color: #52687b; }
.inner-page .member { border-top-color: #b9d1d6; }
.inner-page .member h3 { color: var(--navy); }
.inner-page .member__num { color: #327d8d; }
.inner-page .member__role, .inner-page .member__en { color: #52687b; }
.inner-page #faq { background: #e7f1f2; }
.inner-page #faq .section-head { margin-bottom: 24px; }
.inner-page .faq__answer a { color: #185e94; text-decoration: underline; text-underline-offset: 3px; }
.inner-page .faq__answer { font-size: .95rem; }
.inner-page #news { padding-block: 12px 48px; }
.inner-page #news::before { display: none; }
.inner-page .news-item { padding-block: 24px; }
.inner-page .news-item__title { font-size: .95rem; }
.contact-form__help { font-size: .95rem; line-height: 1.9; color: #52687b; }
.inner-page .contact-form__note { font-size: .8rem; color: #52687b; }
.inner-page .contact-form__service-note { text-align: left; }
/* ---------- 海の中で、ゆるっと相談する ---------- */
.contact-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; background: var(--home-water-surface); }
.contact-page .page-main { position: relative; isolation: isolate; flex: 1; padding-block: 64px 96px; overflow: clip; background: radial-gradient(ellipse at 95% 20%, #d7eafa, transparent 50%), linear-gradient(180deg, var(--home-water-surface), #e0f1f1); }
.contact-page .page-main > .ocean-scene { z-index: -1; }
.contact-page .ocean-scene::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .4) 28%, transparent 42%, transparent 60%, rgba(255, 255, 255, .25) 66%, transparent 78%); }
.contact-page .ocean-bubbles > span { border-color: rgba(92, 151, 184, .35); }
.contact-page .ocean-bubbles--left { top: 36%; left: -20px; opacity: .7; }
.contact-page .ocean-bubbles--right { top: 48%; right: -22px; opacity: .6; }
.contact-page .ocean-scene__fish { top: 64px; right: 6%; width: 140px; height: 62px; opacity: .18; }
.contact-page .ocean-scene__seaweed { left: -32px; width: 120px; height: 260px; color: #478a9b; opacity: .18; }
.contact-page .ocean-scene__coral { right: -30px; width: 150px; height: 140px; color: #5e92ab; opacity: .17; }
.contact-page .page-heading { padding-bottom: 44px; }
.contact-page .contact.page-section { margin: 0; padding: 0; background: none; }
.contact-page .contact__inner { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 64px; align-items: start; }
.contact-page .contact__intro, .contact-page .contact__form-area { min-width: 0; overflow-wrap: anywhere; }
.contact-page .contact__intro { padding-top: 24px; }
.contact-page .contact .heading { padding: 0; font-size: clamp(1.65rem, 1.1rem + 1.65vw, 2.4rem); line-height: 1.6; }
.contact-page .contact-form__help { max-width: 25em; margin-top: 20px; font-size: 1rem; line-height: 1.95; }
.contact-page .contact__chara { position: relative; inset: auto; width: clamp(180px, 19vw, 240px); margin: 28px auto 0; }
.contact-page .contact__chara::before { content: ""; position: absolute; inset: 12% 4% 8%; border: 1px solid rgba(151, 195, 218, .48); border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, .8), rgba(255, 255, 255, .12) 62%, transparent); }
.contact-page .contact-form { min-width: 0; padding: 40px; gap: 24px; border: 1px solid rgba(255, 255, 255, .95); border-radius: 28px; background: #fff; box-shadow: 0 18px 50px rgba(39, 87, 113, .08); }
.contact-page .contact-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.contact-page .field { min-width: 0; gap: 10px; }
.contact-page .contact-form .field label { flex-wrap: wrap; font-size: 1rem; line-height: 1.6; }
.contact-page .req { padding: .1em .65em; border-radius: 999px; font-size: .72rem; font-weight: 500; }
.contact-page .field input, .contact-page .field textarea { min-width: 0; padding: 14px 16px; border-color: #cedee9; border-radius: 12px; background: #f7fbfd; }
.contact-page .field input { min-height: 54px; }
.contact-page .field textarea { min-height: 160px; }
.contact-page .field input:focus, .contact-page .field textarea:focus { background: #fff; }
.contact-page .field__error { font-size: .875rem; line-height: 1.7; }
.contact-page .contact-form .btn { min-height: 56px; justify-content: center; gap: 8px; padding-inline: 16px; border-radius: 18px; }
.contact-page .contact-form__note { font-size: .85rem; line-height: 1.8; }
.contact-page .contact__faq { margin-top: 16px; text-align: right; }
.contact-page .contact__faq .more-link { font-size: .9rem; color: #185e94; }
.inner-page .field label { font-size: .9rem; }
.inner-page .field input, .inner-page .field textarea { font-size: 1rem; }
.inner-page .field input::placeholder, .inner-page .field textarea::placeholder { color: #626f83; opacity: 1; }
.inner-page .req { color: #b52c37; }
.inner-page .field__error { font-size: .85rem; color: #b52c37; }
.inner-page .field [aria-invalid="true"] { border-color: #b52c37; }
.inner-page .btn:disabled { background: #52687b; cursor: default; box-shadow: none; transform: none; }
.inner-page .btn:disabled .btn__arrow { transform: none; }
.page-panel { width: min(100% - 32px, var(--container)); margin-inline: auto; }
.page-container > .page-panel, .page-container > .page-cta { width: 100%; }
.inner-page .service-detail--make { padding: 36px; border: 1px solid #d5e8ec; border-radius: 24px; background: #e9f5f6; }
.inner-page .service-detail--make .service-feature__link { color: #185e94; }
.inner-page .service-card__text { font-size: 1rem; }
.inner-page .demo__description, .inner-page .demo__message, .inner-page .demo__reply, .inner-page .service-feature__steps p { font-size: .95rem; }
.inner-page .demo__note { font-size: .85rem; }
.inner-page .service-detail--ground { margin: 0 auto; padding: 36px; border: 1px solid #c9e2de; border-radius: 24px; background: #def1ed; gap: 64px; }
.inner-page .service-detail--ground .more-link { color: #185e94; }
.inner-page .service-detail--ground .ground__copy { padding-left: 0; }
.inner-page .service-detail--ground .service-feature__index { display: none; }
.service-price-note { margin-top: 24px; padding-top: 20px; border-top: 1px solid #b9d1d6; font-size: .9rem; line-height: 1.9; color: #52687b; }
.service-management { margin-top: 48px; }
.service-management__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 24px; }
.service-management__grid > li { padding-top: 20px; border-top: 1px solid #cfdee5; }
.service-management__grid h3 { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: var(--navy); }
.service-management__grid p { margin-top: 12px; font-size: .95rem; line-height: 2; color: #52687b; }
.service-consult { margin-top: 48px; padding: 40px; border: 1px solid #d5e8ec; border-radius: 24px; background: #fff; }
.service-consult__title { font-family: var(--font-head); font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem); font-weight: 900; line-height: 1.65; color: var(--navy); }
.service-consult__text { margin-top: 16px; font-size: 1rem; line-height: 2; color: #52687b; }
.service-consult .btn { min-height: 48px; margin-top: 24px; }
.inner-page .ground__request p { font-size: 1rem; }
.inner-page .ground__note { font-size: .85rem; }
.page-cta { width: min(100% - 32px, var(--container)); margin: 56px auto 0; padding-top: 32px; border-top: 1px solid #cfdee5; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.page-cta .heading { font-size: 1.4rem; }
.page-cta p { color: #52687b; }

/* ---------- news, faq and contact ---------- */
.inner-page .page-heading .home-section-title__heading { font-size: 1em; line-height: 1.2; letter-spacing: .025em; }
.news-page .page-main, .faq-page .page-main, .contact-page .page-main { padding-top: 64px; }
.news-page, .faq-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; background: var(--news-surface); }
.news-page .page-main, .faq-page .page-main { position: relative; isolation: isolate; overflow: clip; flex: 1; background: var(--news-surface); }
.faq-page, .faq-page .page-main { background: var(--faq-surface); }
.faq-page #faq { padding-block: 12px 48px; background: none; }
.news-page .page-main > .ocean-scene, .faq-page .page-main > .ocean-scene { z-index: -1; }
.news-page .page-heading, .news-page .news-archive, .faq-page .page-heading, .faq-page .faq-archive { position: relative; }
.news-page .page-intro { font-size: .95rem; line-height: 1.9; }
.news-page .ocean-bubbles--left, .faq-page .ocean-bubbles--left { left: -26px; top: 32%; opacity: .45; }
.news-page .ocean-bubbles--right, .faq-page .ocean-bubbles--right { right: -28px; top: 50%; opacity: .4; }
.news-page .ocean-scene__seaweed, .faq-page .ocean-scene__seaweed { left: -35px; width: 90px; height: 210px; opacity: .15; }
.news-page .ocean-scene__coral, .faq-page .ocean-scene__coral { right: -50px; width: 120px; height: 114px; opacity: .18; }
.news-page .news-archive__list { grid-template-columns: 1fr; gap: 0; }
.news-page .news-archive .news-item { grid-template-columns: 210px minmax(0, 1fr); column-gap: 24px; padding: 28px 0; }
.news-page .news-archive .news-item:hover { transform: none; }
.news-page .news-item__date { white-space: nowrap; }
.news-page .news-archive .news-item__title { grid-column: 2; grid-row: 1; min-width: 0; margin: 0; color: var(--navy); font-weight: 700; overflow-wrap: anywhere; }
.news-archive__note { margin-top: 24px; color: #52687b; font-size: .85rem; line-height: 1.9; }
.contact-page #contact-form { scroll-margin-top: 88px; }
.contact-page #contact-form:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

/* ---------- company ---------- */
.company-page .page-main { padding-block: 64px 0; }
.company-page .company-page__heading { padding-bottom: 56px; }
.company-page .company-page__heading .company-page__title { font-size: 1em; line-height: 1.2; letter-spacing: .025em; }
.company-page__status { display: inline-block; margin-top: 28px; padding: 4px 14px; border-radius: 999px; background: #e3effd; color: #185e94; font-size: .85rem; font-weight: 700; }
.company-page .page-intro { margin-top: 14px; }
.company-overview__row { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 3fr); gap: 32px; padding-block: 32px; border-bottom: 1px solid #cbdde4; font-size: 1rem; line-height: 1.9; }
.company-overview__row:first-child { border-top: 1px solid #cbdde4; }
.company-overview__row dt { color: var(--navy); font-weight: 700; }
.company-overview__row dd { margin: 0; color: #334f60; }
.company-overview__note { margin-top: 24px; font-size: .85rem; line-height: 1.9; color: #52687b; }
/* チーム写真：ページ末尾の夜の帯。写真は切り取らずに右へ置き、左の夜空と上端へなじませる。下端は .page-main::after の波でフッターへつなぐ */
.company-team {
  --company-team-edge: #f7fbfc;
  position: relative; display: flex; align-items: center; min-height: clamp(400px, 42vw, 560px); overflow: hidden; color: #fff;
  background:
    radial-gradient(1.6px 1.6px at 6% 14%, #fff 60%, transparent 64%),
    radial-gradient(1.2px 1.2px at 13% 56%, rgba(255, 255, 255, .75) 60%, transparent 64%),
    radial-gradient(2px 2px at 21% 30%, var(--yellow) 60%, transparent 64%),
    radial-gradient(1.2px 1.2px at 29% 9%, #fff 60%, transparent 64%),
    radial-gradient(1.6px 1.6px at 36% 44%, rgba(255, 255, 255, .7) 60%, transparent 64%),
    radial-gradient(1.2px 1.2px at 44% 20%, #fff 60%, transparent 64%),
    radial-gradient(1.8px 1.8px at 55% 7%, #fff 60%, transparent 64%),
    radial-gradient(2px 2px at 72% 13%, var(--yellow) 60%, transparent 64%),
    linear-gradient(180deg, var(--night-1), var(--night-2));
}
.company-page .company-team { margin-top: clamp(64px, 8vw, 104px); }
.company-team::before {
  content: ""; position: absolute; z-index: 3; top: -1px; left: 0; right: 0; height: var(--section-wave-height); pointer-events: none; rotate: 180deg;
  background: var(--company-team-edge);
  -webkit-mask: var(--section-wave-mask) center / 100% 100% no-repeat;
  mask: var(--section-wave-mask) center / 100% 100% no-repeat;
}
.company-team__inner { position: relative; z-index: 2; padding-block: calc(64px + var(--section-wave-height)); }
.company-team__en { margin: 0; color: var(--yellow); font-family: var(--font-head); font-size: .85rem; font-weight: 700; letter-spacing: .12em; }
.company-team__copy { margin: 10px 0 0; color: #fff; font-family: var(--font-head); font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); font-weight: 900; line-height: 1.5; }
.company-team__text { max-width: 24em; margin: 14px 0 0; color: #d5e2f7; line-height: 1.9; }
.company-team__photo { position: absolute; z-index: 1; inset: 0 0 0 auto; display: block; }
.company-team__photo img {
  display: block; width: auto; max-width: none; height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%), linear-gradient(180deg, transparent 0, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 28%), linear-gradient(180deg, transparent 0, #000 14%);
  mask-composite: intersect;
}
@media (max-width: 860px) {
  .company-team { flex-direction: column; align-items: stretch; min-height: 0; }
  .company-team__inner { padding-bottom: 0; }
  .company-team__photo { position: relative; inset: auto; margin-top: -8%; }
  .company-team__photo img {
    width: 100%; height: auto;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 32%); -webkit-mask-composite: source-over;
    mask-image: linear-gradient(180deg, transparent 0, #000 32%); mask-composite: add;
  }
}

/* Serviceはメニューと別の幅で切り替え、タブレットの横幅を使う */
@media (max-width: 1023px) {
  .home-service, .home-service--ground { gap: 12px 24px; padding: 28px; }
  .home-service__visual { min-height: 0; padding: 18px; }
  .home-service__catch { font-size: 1.45rem; }
  .contact-page .contact__inner { gap: 32px; }
  .contact-page .contact-form { padding: 28px; }
  .contact-page .contact-form__row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .site-header__logo img { width: 116px; }
  .nav-toggle { width: 48px; height: 48px; }
  .nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { width: 26px; }
  .global-nav__list { gap: 0; font-size: 1rem; }
  .global-nav:not(.is-open) { transition: none; }
  .global-nav__list a { width: 100%; }
  html:not(.js) .site-header { position: static; }
  html:not(.js) .site-header__inner { height: auto; flex-wrap: wrap; gap: 12px; padding-block: 16px; }
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .global-nav { position: static; flex: 1 0 100%; padding: 0; gap: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  html:not(.js) .global-nav__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; font-size: .9rem; }
  .home-services__grid { gap: 28px; }
  .inner-page .service-detail--ground { gap: 32px; }
  .inner-page .service-detail--ground .ground__copy { padding-left: 0; }
  .inner-page .service-detail--ground .service-feature__index { position: static; }
}

@media (max-width: 767px) {
  .compact-page .hero { min-height: 600px; padding-block: 52px 104px; }
  .compact-page .hero__bg > picture > img { object-position: 62% top; }
  .home-about__catch { margin-top: 24px; }
  .compact-page .ocean .home-services { padding-block: 56px 64px; }
  .compact-page #services .section-head { margin-bottom: 32px; }
  .home-services__grid { gap: 24px; }
  .home-service, .home-service--ground { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "visual" "caption"; gap: 14px; padding: 28px 20px 24px; border-radius: 24px; }
  .home-services .ocean-scene__fish { top: 76px; right: 4%; width: 100px; height: 44px; opacity: .24; }
  .home-services .ocean-scene__seaweed { left: -30px; width: 110px; height: 220px; opacity: .24; }
  .home-services .ocean-scene__coral { right: -30px; width: 110px; height: 104px; }
  .home-services__current { opacity: .16; }
  .home-service__visual { min-height: 0; padding: 16px; border-radius: 18px; }
  .home-service__visual .demo__site { padding: 16px; }
  .home-service__visual .demo__site-title { font-size: clamp(.82rem, 4vw, .95rem); }
  .home-service__visual .demo__site-main { padding-block: 24px 20px; }
  .home-service__visual--ground { padding: 8px 0; }
  .home-service__visual .ground__request { padding: 12px 16px; }
  .home-service__visual .ground__answer { margin-right: 0; padding: 16px; }
  .home-service__visual .ground__answer p { font-size: .95rem; }
  .home-service__intro { margin-bottom: 10px; }
  .home-service__title { font-size: 1.6rem; }
  .home-service__catch { margin-top: 20px; font-size: clamp(1.35rem, 6.3vw, 1.6rem); }
  .home-service__text { margin-top: 12px; }
  .home-about__more { margin-top: 28px; padding-top: 24px; }
  .home-about__links { flex-direction: column; align-items: flex-end; gap: 12px; }
  .story-page .faq--accordion .faq__question { gap: 10px; padding-block: 20px; font-size: 1rem; }
  .faq__mark { width: 28px; height: 28px; }
  .story-page .faq--accordion .faq__answer { padding: 0 0 20px 38px; }
  .compact-page .ocean .home-news { padding-block: 56px 64px; }
  .compact-page .home-news .section-head { margin-bottom: 32px; }
  .compact-page .home-news .news-item { grid-template-columns: 1fr auto; gap: 6px 16px; padding-block: 20px; }
  .compact-page .home-news .news-item__title { grid-column: 1; grid-row: 2; }
  .compact-page .home-news .news-item__arrow { grid-column: 2; grid-row: 1 / 3; }
  .compact-page .home-news .news-item__title { grid-column: 1 / -1; }
  .compact-page .home-news .news-item__status { grid-column: 2; grid-row: 1; }
  .inner-page .news-item__title { grid-column: 1 / -1; }
  .inner-page .news-item__status { grid-row: 1; }
  .page-main { padding-block: 24px 56px; }
  .page-heading { padding-bottom: 28px; }
  .inner-page .page-heading > .heading { font-size: clamp(1.4rem, 6.5vw, 2rem); }
  .page-breadcrumb { margin-bottom: 22px; font-size: .7rem; }
  .page-intro { margin-top: 14px; font-size: .95rem; }
  .inner-page .page-section { padding-block: 36px 48px; }
  .inner-page #members { padding-top: 40px; }
  .inner-page .member h3 { font-size: 1.18rem; }
  .inner-page .service-detail--make, .inner-page .service-detail--ground { padding: 22px 16px; border-radius: 18px; }
  .inner-page .service-detail--make .demo__site { padding: 16px; }
  .inner-page .service-detail--make .demo__site-title { font-size: clamp(.85rem, 4.1vw, 1rem); }
  .inner-page .service-detail--ground .service-card__catch { font-size: 1.35rem; }
  .service-management { margin-top: 32px; }
  .service-management__grid { grid-template-columns: 1fr; gap: 24px; }
  .service-consult { margin-top: 32px; padding: 24px 20px; border-radius: 18px; }
  .service-consult__text { font-size: .95rem; }
  .service-consult .btn { width: 100%; padding-inline: 16px; font-size: .9rem; }
  .page-cta { margin-top: 36px; padding-top: 24px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .page-cta .heading { font-size: 1.25rem; }
  .company-page .page-main { padding-block: 28px 0; }
  .company-page .company-page__heading { padding-bottom: 32px; }
  .company-page__status { margin-top: 22px; }
  .company-overview__row { grid-template-columns: 116px minmax(0, 1fr); gap: 16px; padding-block: 22px; font-size: .95rem; }
  .home-service__visual--make { min-height: 0; }
  .make-overview { gap: 16px; }
  .make-overview .demo__site { padding: 14px; }
  .make-overview .demo__site-main { padding-block: 18px 6px; }
  .make-overview .demo__site-title { font-size: clamp(.82rem, 4vw, .95rem); }
  .compact-page .home-news .news-item { grid-template-columns: 1fr; }
  .compact-page .home-news .news-item__title { grid-column: 1; }
  .news-page .page-main, .faq-page .page-main, .contact-page .page-main { padding-top: 28px; }
  .news-page .ocean-scene__seaweed, .faq-page .ocean-scene__seaweed { left: -52px; width: 70px; }
  .news-page .ocean-scene__coral, .faq-page .ocean-scene__coral { right: -54px; width: 72px; height: 68px; }
  .news-page .news-archive .news-item { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .news-page .news-archive .news-item__title { grid-column: 1; grid-row: 2; }
  .contact-page .page-main { padding-bottom: 72px; }
  .contact-page .page-heading { padding-bottom: 28px; }
  .contact-page .contact__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .contact-page .contact__intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy chara" "text text"; gap: 12px 16px; padding-top: 0; }
  .contact-page .contact__intro .heading { grid-area: copy; min-width: 0; font-size: clamp(1.3rem, 5.9vw, 1.7rem); }
  .contact-page .contact-form__help { grid-area: text; max-width: none; margin-top: 0; font-size: .95rem; }
  .contact-page .contact__chara { grid-area: chara; align-self: center; width: clamp(56px, 20vw, 80px); margin: 0; }
  .contact-page .contact-form { padding: 24px 20px; gap: 22px; border-radius: 24px; }
  .contact-page .ocean-scene__fish { top: 38px; right: -18px; width: 90px; height: 40px; }
  .contact-page .ocean-scene__seaweed { left: -48px; width: 90px; }
  .contact-page .ocean-scene__coral { right: -44px; width: 110px; height: 104px; }
}

/* ---------- UI/UXレビュー対応（2026-10-08） ---------- */
/* 状態タグは「公開準備中」1種類に統一 */
.tag--status { background: #13214a; color: #fff; }
.home-service--ground .tag--status { background: #13214a; color: #fff; }

/* make-siteプレビュー：読めない小さな文字を置かない */
.make-overview .demo__browser-bar { min-height: 26px; padding-block: 8px; }

/* ヒーロー右側：ゆるるんを置く */
.hero__chara {
  position: absolute; right: max(40px, calc((100% - 1120px) / 2 + 24px)); bottom: 168px; z-index: 1;
  width: clamp(150px, 15vw, 210px); height: auto;
  filter: drop-shadow(0 10px 30px rgba(120, 170, 255, .35));
  animation: float 4s ease-in-out 1;
}

/* 海を泳ぐゆるると、相談の入口 */
.home-closing { --section-wave-color: var(--white); position: relative; isolation: isolate; padding-block: 88px; background: var(--closing-surface); color: #e2edfb; overflow: clip; }
.home-closing::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 80% 35%, rgba(62, 115, 178, .18), transparent 60%), linear-gradient(118deg, transparent 48%, rgba(126, 178, 218, .04) 55%, transparent 67%, rgba(126, 178, 218, .03) 73%, transparent 86%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 80px); mask-image: linear-gradient(180deg, transparent, #000 80px); }
.home-closing > .ocean-scene { z-index: 0; }
.home-closing .ocean-scene__seaweed { bottom: -24px; width: 120px; height: 210px; color: #6aa6b8; opacity: .16; }
.home-closing .ocean-scene__seaweed--left { left: -38px; }
.home-closing .ocean-scene__seaweed--right { right: -32px; width: 150px; height: 260px; }
.home-closing__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 4vw, 56px); }
.home-closing__copy { min-width: 0; max-width: min(100%, 640px); overflow-wrap: anywhere; }
.home-closing__title { font-family: var(--font-head); font-weight: 900; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem); line-height: 1.5; color: #fff; }
.home-closing__text { margin-top: 18px; font-size: 1rem; line-height: 2; }
.home-closing__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; }
.home-closing__actions .btn { min-width: 0; max-width: 100%; min-height: 56px; padding-inline: 24px; background: var(--blue); }
.home-closing__scene { position: relative; inset: auto; min-width: 0; width: min(100%, 460px); aspect-ratio: 1.2; justify-self: end; overflow: visible; }
.home-closing__scene::before { content: ""; position: absolute; inset: 8% 0; border-radius: 50%; background: radial-gradient(ellipse, rgba(87, 145, 210, .13), transparent 70%); }
.home-closing__current { inset: 0; width: 100%; height: 100%; stroke: #9bc9e2; stroke-width: 1; opacity: .2; }
.home-closing__bubbles { left: 15%; top: 12%; width: 68%; height: 80%; opacity: .6; }
.home-closing__bubbles > span { border-color: rgba(166, 211, 238, .55); background: radial-gradient(circle at 28% 25%, rgba(217, 239, 255, .4), rgba(217, 239, 255, .03) 65%); }
.home-closing__bubbles > span:nth-child(1) { left: 3%; top: 64%; --bubble-size: 9px; }
.home-closing__bubbles > span:nth-child(2) { left: 15%; top: 45%; --bubble-size: 18px; }
.home-closing__bubbles > span:nth-child(3) { left: 22%; top: 27%; --bubble-size: 9px; }
.home-closing__bubbles > span:nth-child(4) { left: 70%; top: 70%; --bubble-size: 24px; }
.home-closing__bubbles > span:nth-child(5) { left: 85%; top: 37%; --bubble-size: 11px; }
.home-closing__bubbles > span:nth-child(6) { left: 65%; top: 5%; --bubble-size: 16px; }
.home-closing__swimmer { position: absolute; transform: rotate(var(--swim-tilt)); filter: drop-shadow(0 8px 20px rgba(2, 8, 25, .28)); animation: closing-swim 4s ease-in-out 1 paused; }
.home-closing__swimmer--normal { --swim-tilt: 12deg; left: 2%; bottom: 5%; width: 35%; }
.home-closing__swimmer--wakuwaku { --swim-tilt: 9deg; right: 3%; top: 3%; width: 32%; }
.home-closing__swimmer--nikkori { --swim-tilt: -9deg; left: 30%; top: 23%; width: 52%; }
.home-closing__chara { width: 100%; height: auto; }
.home-closing__scene.is-active .home-closing__swimmer { animation-play-state: running; }
@keyframes closing-swim {
  0%, 100% { transform: translate(0, 0) rotate(var(--swim-tilt)); }
  50% { transform: translate(8px, -10px) rotate(var(--swim-tilt)); }
}

@media (max-width: 860px) {
  /* ハンバーガーメニューと同じ幅で、ヒーローのゆるるんを隠す */
  .hero__chara { display: none; }
}

@media (max-width: 767px) {
  .compact-page #values .ocean-bubbles { display: none; }
  .home-closing { padding-block: 56px 64px; }
  .home-closing__inner { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 28px; }
  .home-closing__scene { width: min(100%, 360px); aspect-ratio: 1.25; justify-self: center; }
  .home-closing .ocean-scene__seaweed { width: 90px; height: 170px; opacity: .13; }
  .home-closing__text { font-size: .95rem; }
  .home-closing__actions { flex-direction: column; align-items: stretch; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__chara, .home-closing__swimmer { animation: none; }
}

/* 境目の波：次の面の開始色を、前の面の下端に重ねる */
@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
  .compact-page .ocean #services::after,
  .compact-page .ocean #values::after,
  .compact-page .ocean #news::after,
  .compact-page .home-closing::after,
  .news-page .page-main::after,
  .faq-page .page-main::after,
  .company-page .page-main::after,
  .contact-page .page-main::after {
    content: ""; position: absolute; inset: auto 0 -1px; z-index: 2;
    height: calc(var(--section-wave-height) + 1px); pointer-events: none;
    background: var(--section-wave-color);
    -webkit-mask: var(--section-wave-mask) center / 100% 100% no-repeat;
    mask: var(--section-wave-mask) center / 100% 100% no-repeat;
  }
}

/* 光や海藻を下の境目で薄くし、装飾の直線的な切れ目もなじませる（上端はヒーローの切り抜きから見せる） */
.compact-page #values .ocean-scene,
.home-services .ocean-scene,
.home-closing > .ocean-scene,
.news-page .page-main > .ocean-scene,
.faq-page .page-main > .ocean-scene,
.contact-page .page-main > .ocean-scene {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--section-wave-height)), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - var(--section-wave-height)), transparent);
}

/* 下層も白いフッターへ同じ波でつなぐ */
.news-page .page-main, .faq-page .page-main, .company-page .page-main, .contact-page .page-main { --section-wave-color: var(--white); position: relative; }

/* News：カテゴリタグを外したので、日付列を日付の幅に合わせる */
.compact-page .home-news .news-item,
.news-page .news-archive .news-item { grid-template-columns: 7.5em minmax(0, 1fr); }
.home-news .news__notice { margin-bottom: 28px; }
@media (max-width: 767px) {
  .compact-page .home-news .news-item,
  .news-page .news-archive .news-item { grid-template-columns: 1fr; }
}

/* ヒーロー下端：白い波を重ねず、ヒーロー自体を波の形に切り抜いてServiceの背景を見せる */
@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
  .compact-page .hero {
    --hero-cut-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20120%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%200H1440V52C1200%2010%20960%2044%20720%2082C480%20120%20240%20120%200%2064Z%22%2F%3E%3C%2Fsvg%3E");
    z-index: 1;
    -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--section-wave-height) + 1px) no-repeat, var(--hero-cut-mask) bottom / 100% var(--section-wave-height) no-repeat;
    mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--section-wave-height) + 1px) no-repeat, var(--hero-cut-mask) bottom / 100% var(--section-wave-height) no-repeat;
  }
  .compact-page .hero__wave { display: none; }
  .compact-page .hero + .ocean { margin-top: calc(-1 * var(--section-wave-height)); }
  .compact-page .ocean .home-services { padding-top: calc(88px + var(--section-wave-height)); }
  @media (max-width: 767px) {
    .compact-page .ocean .home-services { padding-top: calc(56px + var(--section-wave-height)); }
  }
}

/* ---------- 月とゆるるんのヒーロー ---------- */
.compact-page .hero--illustrated { min-height: max(710px, 45vw); padding-block: 88px 128px; }
.compact-page .hero--illustrated .hero__bg > picture > img { height: 100%; object-position: 76% 45%; }
.compact-page .hero--illustrated .hero__bg::after { background: linear-gradient(90deg, rgba(5, 13, 36, .2), rgba(5, 13, 36, .08) 48%, transparent 72%); }
.compact-page .hero--illustrated .hero__copy { max-width: min(59%, 640px); }
.compact-page .hero--illustrated .hero__title { font-size: clamp(3rem, 5.6vw, 4.75rem); line-height: 1.4; letter-spacing: .04em; text-shadow: 0 2px 20px rgba(5, 13, 36, .3); }
.compact-page .hero--illustrated .hero__lead { max-width: 570px; margin-block: 24px 32px; font-size: clamp(1.125rem, 1rem + .3vw, 1.375rem); line-height: 2; color: #e6edf9; }
.compact-page .hero--illustrated .hero__actions .btn { min-height: 60px; padding-inline: 1.9em; background: #d4e7fa; color: #13214a; font-family: var(--font-head); font-size: 1.05rem; box-shadow: 0 6px 24px rgba(4, 12, 35, .22); }
.compact-page .hero--illustrated .hero__actions .btn:hover { background: #e8f3ff; box-shadow: 0 8px 28px rgba(4, 12, 35, .3); }
.compact-page .hero--illustrated .hero__chara {
  position: absolute; left: 76%; right: auto; top: 42%; bottom: auto;
  width: clamp(300px, 28vw, 360px); height: auto; margin: 0;
  transform: translate(-50%, -50%); animation: none;
  filter: drop-shadow(0 16px 24px rgba(5, 13, 36, .2)); pointer-events: none;
}

@media (max-width: 767px) {
  /* 画像を画面幅に合わせ、月の上側を説明文の右下へ寄せる */
  .compact-page .hero--illustrated { --hero-mobile-h: clamp(448px, calc(168px + 84vw), 808px); min-height: var(--hero-mobile-h); align-items: flex-start; padding-block: 56px 96px; }
  .compact-page .hero--illustrated .hero__bg > picture > img { object-position: center bottom; }
  .compact-page .hero--illustrated .hero__bg::after { background: linear-gradient(180deg, rgba(5, 13, 36, .12), transparent 52%); }
  .compact-page .hero--illustrated .hero__copy { max-width: 100%; }
  .compact-page .hero--illustrated .hero__title { font-size: clamp(2rem, 10vw, 3rem); line-height: 1.45; letter-spacing: .025em; }
  .compact-page .hero--illustrated .hero__lead { margin-block: 18px 26px; font-size: clamp(1rem, 4.8vw, 1.25rem); line-height: 2; }
  .compact-page .hero--illustrated .hero__actions .btn { min-height: 54px; font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .compact-page .hero--illustrated .hero__actions .btn,
  .compact-page .hero--illustrated .hero__actions .btn__arrow { transition: none; }
  .compact-page .hero--illustrated .hero__actions .btn:hover,
  .compact-page .hero--illustrated .hero__actions .btn:hover .btn__arrow { transform: none; }
}

/* ---------- トップのヘッダー：夜空の上は透明、本文では白 ---------- */
.site-header--hero { background: #fff; transition: background-color .2s, box-shadow .2s; }
.js .site-header--hero { position: fixed; inset: 0 0 auto; }
.js .site-header--hero + main .hero--illustrated { min-height: calc(max(710px, 45vw) + var(--header-h)); padding-top: calc(88px + var(--header-h)); }
.js .site-header--hero.is-over-hero:not(.is-menu-open) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.js .site-header--hero.is-over-hero:not(.is-menu-open) .global-nav__list,
.js .site-header--hero.is-over-hero:not(.is-menu-open) .global-nav__list a { color: #f5f9ff; }
.js .site-header--hero.is-over-hero:not(.is-menu-open) .global-nav__list a:hover { color: #fff; }
.js .site-header--hero.is-over-hero:not(.is-menu-open) .global-nav__list a::after { background: #fff; }
.js .site-header--hero.is-over-hero:not(.is-menu-open) :focus-visible { outline-color: #e6f2ff; }
.js .site-header--hero.is-over-hero:not(.is-menu-open) .site-header__logo img { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .28)); }
.js .site-header--hero.is-over-hero:not(.is-menu-open) .nav-toggle__bar,
.js .site-header--hero.is-over-hero:not(.is-menu-open) .nav-toggle__bar::before,
.js .site-header--hero.is-over-hero:not(.is-menu-open) .nav-toggle__bar::after { background: #f5f9ff; }
.site-header--hero.is-menu-open { background: #fff; }
.site-header--hero.is-menu-open .global-nav { background: #fff; }
.site-header--hero.is-menu-open .global-nav__list,
.site-header--hero.is-menu-open .global-nav__list a { color: var(--navy); }
.site-header--hero.is-menu-open .nav-toggle__bar::before,
.site-header--hero.is-menu-open .nav-toggle__bar::after { background: var(--navy); }

@media (max-width: 860px) {
  .site-header--hero .nav-toggle { margin-right: 0; }
}

@media (max-width: 767px) {
  .js .site-header--hero + main .hero--illustrated { min-height: calc(var(--hero-mobile-h) + var(--header-h)); padding-top: calc(56px + var(--header-h)); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header--hero { transition: none; }
}

/* ---------- HTMLのページスクロールバー ---------- */
html.has-page-scrollbar, .has-page-scrollbar body { scrollbar-width: none; }
html.has-page-scrollbar:has(.page-scrollbar:focus) { scroll-behavior: auto; }
html.has-page-scrollbar::-webkit-scrollbar,
.has-page-scrollbar body::-webkit-scrollbar { display: none; }
.has-page-scrollbar .container,
.has-page-scrollbar .site-header__inner { width: min(100% - 40px, var(--container)); }
.has-page-scrollbar .nav-toggle { margin-right: 0; }
.page-scrollbar {
  --scroll-thumb-color: #888;
  position: fixed; inset: 0 0 0 auto; z-index: 80; width: 14px;
  background: transparent; touch-action: none; user-select: none;
}
.page-scrollbar[hidden] { display: none; }
.page-scrollbar__thumb {
  position: absolute; inset: 0 0 auto; min-height: 44px; opacity: 1; cursor: grab;
}
.page-scrollbar__thumb::before { content: ""; position: absolute; inset: 0 4px; border-radius: 999px; background: var(--scroll-thumb-color); transition: background-color .2s; }
.page-scrollbar:hover .page-scrollbar__thumb::before,
.page-scrollbar:focus-visible .page-scrollbar__thumb::before,
.page-scrollbar.is-dragging .page-scrollbar__thumb::before { background: #666; }
.page-scrollbar:focus-visible { outline: 2px solid #666; outline-offset: -2px; }
.page-scrollbar.is-pointer-focus,
.page-scrollbar.is-dragging { outline: none; }
.page-scrollbar.is-dragging, .page-scrollbar.is-dragging .page-scrollbar__thumb { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .page-scrollbar__thumb::before { transition: none; }
}

@media (forced-colors: active) {
  .page-scrollbar { forced-color-adjust: none; background: Canvas; border-left: 1px solid GrayText; }
  .page-scrollbar__thumb { opacity: 1; }
  .page-scrollbar__thumb::before,
  .page-scrollbar:hover .page-scrollbar__thumb::before,
  .page-scrollbar.is-dragging .page-scrollbar__thumb::before,
  .page-scrollbar:focus-visible .page-scrollbar__thumb::before { background: ButtonText; box-shadow: none; }
  .page-scrollbar:focus-visible { outline-color: Highlight; background: Canvas; }
}