/* ワンフロンティア トップページ用CSS(子テーマの css/of-home.css に置く)
   フォント(Shippori Mincho / Zen Kaku Gothic New)は functions.php 側で読み込みます */

body.home { overflow-x: hidden; }

.of-top {
  --of-sky: #2CA9E1;
  --of-sky-d: #166F98;
  --of-deep: #14587F;
  --of-navy: #0F3A55;
  --of-pale: #EAF4FA;
  --of-text: #1D3A4F;
  --of-muted: #3C5A70;
  --of-serif: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--of-pale);
  color: var(--of-text);
  font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  line-height: 1.8;
  overflow: hidden;
}
.of-top *, .of-top *::before, .of-top *::after { box-sizing: border-box; }

/* Lightning の見出し装飾・リンク色を打ち消す */
.of-top .of-h1, .of-top .of-h2, .of-top .of-h3 {
  margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
  color: inherit; font-family: var(--of-serif); font-weight: 700; letter-spacing: normal;
}
.of-top .of-h1::before, .of-top .of-h1::after,
.of-top .of-h2::before, .of-top .of-h2::after,
.of-top .of-h3::before, .of-top .of-h3::after { content: none; display: none; }
.of-top .of-p, .of-top .of-lead { margin: 0; }
.of-top .of-p, .of-top .of-news__title { font-weight: 500; }
.of-top a, .of-top a:hover, .of-top a:visited { color: inherit; text-decoration: none; }

.of-top .of-inner { max-width: 1160px; margin: 0 auto; }

/* HERO */
.of-top .of-hero { display: flex; flex-wrap: wrap; align-items: stretch; background: var(--of-pale); }
.of-top .of-hero__visual {
  flex: 1 1 100%; min-width: 0; min-height: 480px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #D6EEFA 0%, #8ED3F1 55%, #2CA9E1 100%);
}
.of-top .of-hero__visual svg { position: absolute; inset: 0; display: block; }
.of-top .of-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ヒーローの動き(波・太陽・線上の点)。transform と opacity だけを動かす */
.of-top .of-hero__visual svg .of-wave--1 { animation: of-wave-x 45s linear infinite; }
.of-top .of-hero__visual svg .of-wave--2 { animation: of-wave-x 35s linear -12.6s infinite; }
.of-top .of-hero__visual svg .of-wave--3 { animation: of-wave-x 28s linear -10.08s infinite; }
@keyframes of-wave-x { from { transform: translateX(0); } to { transform: translateX(-1600px); } }
.of-top .of-hero__visual svg .of-sun { animation: of-sun-float 8s ease-in-out infinite; }
@keyframes of-sun-float { 0%, 100% { transform: translateY(8px); } 50% { transform: translateY(-8px); } }
.of-top .of-hero__visual svg .of-sun__ring { transform-box: fill-box; transform-origin: center; animation: of-sun-glow 8s ease-in-out infinite; }
@keyframes of-sun-glow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .52; } }
/* 止めた点は、通常時は表示しない */
.of-top .of-hero__visual svg .of-dot--still { display: none; }
/* 「動きを減らす」設定のとき: 波・太陽を止め、移動する点を消して、止めた点を表示する。
   animateMotion(SVG の動き)は CSS の animation: none では止まらないため、点は表示の切り替えで扱う */
@media (prefers-reduced-motion: reduce) {
  .of-top .of-hero__visual svg .of-wave,
  .of-top .of-hero__visual svg .of-sun,
  .of-top .of-hero__visual svg .of-sun__ring { animation: none; }
  .of-top .of-hero__visual svg .of-dot--move { display: none; }
  .of-top .of-hero__visual svg .of-dot--still { display: inline; }
}

/* INTRO */
.of-top .of-intro { background: var(--of-deep); color: #fff; padding: clamp(56px, 8vw, 104px) 40px; }
.of-top .of-intro__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.of-top .of-intro__text { flex: 3 1 420px; min-width: 0; max-width: 744px; }
.of-top .of-lead { font-family: var(--of-serif); font-weight: 700; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.9; letter-spacing: .06em; color: #fff; }
.of-top .of-nb { display: inline-block; }

/* ボタン */
.of-top a.of-btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 14px 34px;
  border-radius: 999px; font-weight: 700; font-size: 16px; line-height: 1.4;
  transition: transform .2s, background .2s, color .2s;
}
.of-top a.of-btn:hover { transform: translateY(-2px); }
.of-top .of-intro .of-btn { margin-top: 40px; }
.of-top a.of-btn--white, .of-top a.of-btn--white:visited { border: 1px solid #fff; color: #fff; }
.of-top a.of-btn--white:hover { background: #fff; color: var(--of-deep); }

/* セクション共通 */
.of-top .of-sec { padding: clamp(72px, 9vw, 120px) 40px; }
.of-top .of-sec--white { background: #fff; }
.of-top .of-sec--pale { background: var(--of-pale); }
.of-top .of-eyebrow { font-family: var(--of-serif); font-size: 13px; letter-spacing: .3em; color: var(--of-sky-d); }
.of-top .of-h2 { margin-top: 12px; font-size: clamp(30px, 3.6vw, 44px); color: var(--of-navy); line-height: 1.4; }

/* SERVICE */
.of-top .of-cards { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 28px; }
.of-top .of-card { padding: 44px 40px; border-radius: 6px; background: var(--of-pale); transition: transform .25s, box-shadow .25s; }
.of-top .of-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(22, 111, 152, .14); }
.of-top .of-card__icon { width: 56px; height: 56px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.of-top .of-card__en { margin-top: 28px; font-family: var(--of-serif); font-size: 12px; letter-spacing: .24em; color: var(--of-sky-d); }
.of-top .of-h3 { margin-top: 8px; font-size: 26px; color: var(--of-navy); line-height: 1.5; }
.of-top .of-card .of-p { margin-top: 16px; line-height: 2; color: var(--of-muted); }
.of-top .of-sec--product { border-top: 1px solid #C9DEEB; }
.of-top .of-cards--single { grid-template-columns: minmax(0, 566px); }
.of-top .of-card:focus-visible { outline: 3px solid var(--of-sky-d); outline-offset: 3px; }

/* スマホ */
@media (max-width: 640px) {
  .of-top .of-hero__visual { min-height: 320px; flex-basis: 100%; }
  .of-top .of-intro, .of-top .of-sec { padding-left: 24px; padding-right: 24px; }
  .of-top .of-card { padding: 32px 28px; }
}

/* ヒーローの太陽が狭い幅で切れないよう、太陽の中心(x=1080/1600)を枠の左から62%に置く */
@media (max-width: 900px) {
  .of-top .of-hero__visual svg {
    inset: auto; top: 0; left: 62%; transform: translateX(-67.5%);
    height: 100%; width: auto; aspect-ratio: 1600 / 480;
  }
}