@charset "utf-8";

/* ---------- reset ---------- */
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
a { text-decoration: none; color: inherit; }

.sp-only { display: none; }
@media screen and (max-width: 1023px) {
  .sp-only { display: inline; }
  .pc-only { display: none; }
}

/* ---------- design tokens ---------- */
:root {
  --font-body: "Noto Sans JP", sans-serif;
  /* KV タイトルの混植 */
  --font-antique: "Zen Antique", serif;
  --font-heading-en: "Inria Serif", serif;
  --font-label: "Lato", sans-serif;

  --color-ink: #000;
  --color-ink-mid: #1c1c1c;
  --color-ink-soft: #242629;
  --color-base: #f2f3f3;
  --color-footer: #000;
  --color-foot-copy: #666;
  --color-white: #fff;
  --color-accent: #a100ff;
}

/* ==========================================================
   背景装飾
   ========================================================== */
.deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.shape {
  position: absolute;
  animation: floating var(--dur) ease-in-out var(--delay) infinite;
}
/* 上下だけ動かす */
@keyframes floating {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(var(--amp) * -1)); }
}

/* KV（design_PC y=100〜1006。下端は ABOUT にかかる）*/
.s-kv-1 { top: 383rem; left: 1089rem; width: 126rem; --dur: 6.4s; --delay: 0s;   --amp: 14rem; }
.s-kv-2 { top: 152rem; left: 520rem;  width: 223rem; --dur: 7.8s; --delay: 0.6s; --amp: 18rem; }
.s-kv-3 { top: 100rem; left: 1023rem; width: 54rem;  --dur: 5.2s; --delay: 1.2s; --amp: 10rem; }
.s-kv-4 { top: 780rem; left: -31rem;  width: 392rem; --dur: 8.4s; --delay: 0.3s; --amp: 16rem; }
.s-kv-5 { top: 152rem; left: -35rem;  width: 139rem; --dur: 6.9s; --delay: 1.8s; --amp: 12rem; }
.s-kv-6 { top: 612rem; left: 888rem;  width: 173rem; --dur: 7.2s; --delay: 0.9s; --amp: 15rem; }
.s-kv-7 { top: 270rem; left: -78rem;  width: 156rem; --dur: 8s;   --delay: 2.4s; --amp: 13rem; }
.s-kv-8 { top: 756rem; left: 1165rem; width: 58rem;  --dur: 5.6s; --delay: 1.5s; --amp: 9rem;  }
.s-kv-9 { top: 503rem; left: 775rem;  width: 98rem;  --dur: 6s;   --delay: 2.1s; --amp: 11rem; }

/* MESSAGE 左（design_PC y=4544〜5673）*/
.s-msg-1 { top: 4836rem; left: 57rem;  width: 156rem; --dur: 7.4s; --delay: 0.4s; --amp: 14rem; }
.s-msg-2 { top: 4544rem; left: 201rem; width: 63rem;  --dur: 5.8s; --delay: 1.1s; --amp: 10rem; }
.s-msg-3 { top: 5396rem; left: 52rem;  width: 242rem; --dur: 8.2s; --delay: 0s;   --amp: 17rem; }
.s-msg-4 { top: 5235rem; left: -20rem; width: 76rem;  --dur: 6.2s; --delay: 2.2s; --amp: 9rem;  }
.s-msg-5 { top: 5070rem; left: 228rem; width: 100rem; --dur: 6.6s; --delay: 1.7s; --amp: 12rem; }
/* MESSAGE 右 */
.s-msg-6 { top: 4864rem; left: 950rem;  width: 233rem; --dur: 7.6s; --delay: 0.8s; --amp: 15rem; }
.s-msg-7 { top: 5470rem; left: 1139rem; width: 409rem; --dur: 8.6s; --delay: 0.2s; --amp: 16rem; }
.s-msg-8 { top: 4823rem; left: 1271rem; width: 161rem; --dur: 6.8s; --delay: 1.4s; --amp: 13rem; }
.s-msg-9 { top: 4991rem; left: 1295rem; width: 227rem; --dur: 7s;   --delay: 2.6s; --amp: 14rem; }

/* 回転した正方形 + 太いグラデーション枠 */
.frame {
  position: absolute;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.frame-kv-1 {
  top: 0;
  left: 896rem;
  width: 544rem;
  height: 578rem;
  background-image: url(../img/frame-kv-1.webp);
}
.frame-kv-2 {
  top: 0;
  left: 343rem;
  width: 1059rem;
  height: 1018rem;
  background-image: url(../img/frame-kv-2.webp);
}
.frame-kv-3 {
  top: 0;
  left: 0;
  width: 1202rem;
  height: 1288rem;
  background-image: url(../img/frame-kv-3.webp);
}
.frame-bottom {
  top: 5634rem;
  left: 0;
  width: 497rem;
  height: 1299rem;
  background-image: url(../img/frame-bottom.webp);
}

/* ---------- fluid base ----------
   上限も下限も置かず、どの幅でも画面にぴったり収まるよう追従させる。
   1024px で PC（1440 基準）と SP（375 基準）を切り替える。iPad 横は PC、縦は SP になる */
html {
  overflow-x: hidden;
  font-size: 0.069444vw;
  background: var(--color-base);
  -webkit-text-size-adjust: 100%;
}
@media screen and (max-width: 1023px) {
  html { font-size: 0.26667vw; }
}

body {
  position: relative;
  overflow-x: hidden;
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: var(--color-ink);
  background: var(--color-base);
}

/* ---------- Header ---------- */
header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
}
.head-logo {
  display: block;
  width: 370rem;
  height: 94rem;
  padding: 16rem 27rem;
  background: var(--color-white);
}
.head-logo img {
  width: 316rem;
  height: 62rem;
  object-fit: contain;
}

main { position: relative; }

/* ---------- KV ---------- */
.kv {
  position: relative;
  height: 904rem;
}
.kv-inner {
  position: absolute;
  top: 204rem;
  left: 150rem;
  z-index: 1;
}
.kv-sub {
  margin-left: 13rem;
  font-family: var(--font-heading-en);
  color: var(--color-ink-mid);
  font-weight: 700;
  font-size: 26rem;
  line-height: 1;
  letter-spacing: 0.04em;
}

.kv-tit {
  margin-top: 31rem;
  font-size: 100rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.kv-tit .t-s { font-weight: 600; }
.kv-tit .t-a { font-family: var(--font-antique); font-weight: 400; }
.kv-lead {
  position: absolute;
  top: 444rem;
  left: 0;
  font-size: 20rem;
  line-height: 1.9;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

/* ---------- ABOUT ---------- */
.about {
  position: relative;
  width: 1198rem;
  height: 778rem;
  margin: 0 auto;
}
.about-card {
  position: absolute;
  top: 28rem;
  left: 0;
  width: 100%;
  min-height: 750rem;
  padding-top: 81rem;
  background: rgb(255 255 255 / 0.7);
  backdrop-filter: blur(10rem);
}
.about-ttl {
  position: absolute;
  top: -28rem;
  left: 33rem;
  width: 82rem;
  line-height: 0;
}
.about-sub {
  font-weight: 700;
  font-size: 34rem;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.about-sub .mk { padding: 0 5rem; }
.about-sub .mk::before { height: 1.12em; }
.about-txt {
  width: 760rem;
  margin: 22rem auto 0;
  font-size: 16rem;
  line-height: 2.5;
  text-align: center;
}

/* ---------- 共通見出し ---------- */
.sec-tit {
  line-height: 0;
}
.sec-ttl img {
  display: block;
  width: 100%;
  height: auto;
}

.sec-tit .sec-ttl img {
  height: 80rem;
  object-fit: cover;
  object-position: top;
}
.article .sec-tit { width: 492rem; }
.feature .sec-tit { width: 526rem; }
.message .sec-tit { width: 551rem; margin: 0 auto; }
.sec-sub {
  font-weight: 700;
  font-size: 20rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.mk {
  position: relative;
  z-index: 0;
  padding: 0 2rem;
  color: var(--color-base);
}
.mk::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 0;
  left: 0;
  height: 1.1em;
  transform: translateY(calc(-50% + 0.065em));
  background: var(--color-accent);
}

/* ---------- ARTICLE ---------- */
.article {
  position: relative;
  height: 1325rem;
  margin-top: 173rem;
  background:
    linear-gradient(0deg, rgb(245 142 102 / 0) 22%, rgb(234 209 161 / 0.8) 46%, rgb(22 157 94 / 0.8) 100%) 23rem 798rem / 65rem 527rem no-repeat,
    linear-gradient(270deg, rgb(245 142 102 / 0) 22%, rgb(245 142 102 / 0.6) 46%, rgb(134 170 211 / 0.6) 100%) 542rem 117rem / 536rem 194rem no-repeat,
    linear-gradient(90deg, rgb(244 221 180 / 0.8) 32%, rgb(211 27 63 / 0.8) 100%) 696rem 178rem / 744rem 177rem no-repeat,
    linear-gradient(90deg, #d7d4b6 53%, #057496 100%) 0 937rem / 388rem 154rem no-repeat;
}
.article-head {
  position: absolute;
  top: 0;
  left: 121rem;
}
.article-head .sec-sub { margin: 18rem 0 0 3rem; }
.article-lead {
  position: absolute;
  top: -10rem;
  left: 701rem;
  font-size: 20rem;
  line-height: 1.8;
}

.carousel {
  position: absolute;
  top: 205rem;
  left: 0;
  width: 100%;
}
.carousel-slides {
  position: relative;
  margin-left: 120rem;
  width: 1199rem;
  height: 800rem;
}
.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.carousel-slide.is-current {
  opacity: 1;
  pointer-events: auto;
}
.carousel-slide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel-card {
  position: absolute;
  top: 580rem;
  left: 269rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 930rem;
  height: 220rem;
  padding: 0 45rem;
  background: rgb(255 255 255 / 0.6);
  backdrop-filter: blur(10rem);
}
.carousel-tit {
  color: var(--color-ink-mid);
  font-weight: 700;
  font-size: 30rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  line-break: strict;
}
.carousel-txt {
  margin-top: 11rem;
  color: var(--color-ink-soft);
  font-size: 16rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
}
.carousel-btn {
  position: absolute;
  right: 25rem;
  bottom: 30rem;
  width: 50rem;
  height: 50rem;
  border-radius: 50%;
  background: var(--color-ink);
}
.carousel-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 17rem;
  width: 14rem;
  height: 7rem;
  transform: translateY(-50%);
  background: currentColor;
  color: var(--color-white);
  clip-path: polygon(0 40%, 55% 40%, 55% 0, 100% 50%, 55% 100%, 55% 60%, 0 60%);
  transition: transform 0.3s ease;
}
.carousel-btn:hover::after { transform: translate(6rem, -50%); }

/* サムネ列と上下矢印 */
.carousel-nav {
  position: absolute;
  top: 107rem;
  left: 70rem;
  width: 232rem;
}
.carousel-thumbs {
  display: flex;
  flex-direction: column;
  gap: 20rem;
  margin: 18rem 0;
}
.carousel-thumbs button {
  position: relative;
  display: block;
  width: 232rem;
  height: 159rem;
  padding: 0;
}
.carousel-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel-thumbs button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(139 139 139 / 0.6);
  box-shadow: inset 0 0 0 1rem var(--color-white);
}
.carousel-thumbs button.is-current {
  outline: 10rem solid var(--color-white);
  outline-offset: -10rem;
}
.carousel-thumbs button.is-current::after { content: none; }
.carousel-arrow {
  position: relative;
  display: block;
  width: 230rem;
  height: 16rem;
}
.carousel-arrow::before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1rem;
  background: var(--color-white);
}
.carousel-arrow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 107rem;
  width: 17rem;
  height: 10rem;
  background: var(--color-white);
}
.carousel-prev::before { bottom: 0; }
.carousel-prev::after {
  bottom: 1rem;
  top: auto;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.carousel-next::before { top: 0; }
.carousel-next::after {
  top: 1rem;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ---------- FEATURE ---------- */
.feature {
  position: relative;
  height: 1456rem;
  margin-top: -90rem;
  background:
    linear-gradient(180deg, rgb(211 27 63 / 0.8) 0%, rgb(244 221 180 / 0.8) 45%) -94rem 1067rem / 177rem 389rem no-repeat,
    linear-gradient(0deg, rgb(245 142 102 / 0) 22%, rgb(245 142 102 / 0.6) 46%, rgb(134 170 211 / 0.6) 100%) 40rem 913rem / 194rem 536rem no-repeat;
}
.feature::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(245 142 102 / 0) 22%, rgb(234 209 161 / 0.8) 46%, rgb(121 58 194 / 0.8) 100%) 1289rem 873rem / 106rem 527rem no-repeat,
    linear-gradient(270deg, #d7d4b6 0%, #66b1ea 100%) 1082rem 1178rem / 426rem 154rem no-repeat;
}
.feature-head {
  position: absolute;
  top: 0;
  left: 120rem;
}
.feature-head .sec-sub { margin: 18rem 0 0 0; }
.feature-lead {
  position: absolute;
  top: -9rem;
  left: 741rem;
  font-size: 20rem;
  line-height: 1.8;
}
.feature-card {
  position: absolute;
  top: 180rem;
  left: 120rem;
  width: 1198rem;
  min-height: 1058rem;
  padding: 83rem 0 0 59rem;
  border-top: 1rem solid #000;
  border-bottom: 1rem solid #000;
  background: rgb(255 255 255 / 0.7);
  backdrop-filter: blur(10rem);
}

.feature-list {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 500rem 500rem;
  gap: 80rem 60rem;
}

.feature-ttl {
  display: flex;
  align-items: flex-start;
  gap: 16rem;
  min-height: 91rem;
  font-weight: 700;
  font-size: 30rem;
  color: var(--color-ink-mid);
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.feature-ttl span { margin-top: 0; }
.feature-num {
  flex-shrink: 0;
  width: auto;
  height: 91rem;
}
.feature-txt {
  margin-top: 28rem;
  color: var(--color-ink-soft);
  font-size: 16rem;
  line-height: 2.1;
  letter-spacing: 0.08em;
  line-break: strict;
}

.feature-txt::first-letter {
  font-weight: 600;
  font-size: 32rem;
  line-height: 1.05;
}

/* ---------- MESSAGE ---------- */
.message {
  position: relative;
  height: 1198rem;
  margin-top: -74rem;
  text-align: center;
}
.message-head {
  position: absolute;
  top: 47rem;
  left: 0;
  width: 100%;
}
.message-head .sec-sub { margin-top: 18rem; }
.message-txt {
  position: absolute;
  top: 220rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16rem;
  line-height: 3;
  white-space: nowrap;
}
.message-txt.fade { transform: translate(-50%, 30rem); }
.message-txt.fade.on { transform: translate(-50%, 0); }

.message-boxes {
  position: absolute;
  top: 755rem;
  left: 0;
  width: 100%;
  height: 308rem;
}
.message-box {
  position: absolute;
  top: 21rem;
  width: 466rem;
  height: 266rem;
  padding-top: 61rem;
  background: var(--color-white);
  border-radius: 300rem;
}
.message-box:first-child { left: 263rem; }
.message-box:last-child { left: 711rem; }
.message-boxes::before,
.message-boxes::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  width: 510rem;
  height: 308rem;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.message-boxes::before {
  left: 241rem;
  background-image: url(../img/pill-l.webp);
}
.message-boxes::after {
  left: 689rem;
  background-image: url(../img/pill-r.webp);
}
.message-box h3 {
  font-weight: 700;
  font-size: 26rem;
  color: var(--color-ink-mid);
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.message-box p {
  margin-top: 16rem;
  color: var(--color-ink-soft);
  font-size: 16rem;
  line-height: 2.1;
  letter-spacing: 0.08em;
}
.message-close {
  position: absolute;
  top: 1127rem;
  left: 0;
  width: 100%;
  font-weight: 500;
  font-size: 26rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

/* ---------- 別冊 ---------- */
.magazine {
  position: relative;
  width: 1100rem;
  height: 520rem;
  margin: 160rem auto 0;
  overflow: hidden;
  border: 1rem solid #000;
  background: var(--color-base);
  box-shadow: 6rem 6rem 0 rgb(0 0 0);
}
.magazine-cover {
  position: absolute;
  top: 81rem;
  left: 77rem;
  width: 273rem;
  height: 364rem;
  line-height: 0;
}
.magazine-cover img {
  width: 100%;
  height: auto;
}
.magazine-txt {
  position: absolute;
  z-index: 1;
  top: 118rem;
  left: 397rem;
}
.magazine-txt h2 {
  font-weight: 700;
  font-size: 28rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.magazine-txt p {
  margin-top: 36rem;
  font-size: 18rem;
  line-height: 1.8;
}
.magazine-publish {
  position: absolute;
  top: -5rem;
  left: 938rem;
  width: 164rem;
  line-height: 0;
}
.magazine-publish img { width: 100%; height: auto; }
.pub-sp { display: none; }

/* ---------- CTA ---------- */
.cta {
  width: 760rem;
  margin: 120rem auto 0;
}
.cta-link {
  position: relative;
  display: flex;
  align-items: center;
  height: 150rem;
  padding-left: 156rem;
  border: 1rem solid #000;
  background: var(--color-white);
}
.cta-txt {
  margin-left: 50rem;
  font-weight: 700;
  font-size: 20rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
}
.cta-plus {
  position: relative;
  width: 24rem;
  height: 24rem;
  margin-left: 20rem;
}
.cta-plus::before,
.cta-plus::after {
  content: '';
  position: absolute;
  background: var(--color-accent);
}
.cta-plus::before {
  top: 11.6rem;
  left: 0;
  width: 24rem;
  height: 0.8rem;
}
.cta-plus::after {
  top: 0;
  left: 11.6rem;
  width: 0.8rem;
  height: 24rem;
}
.cta-link {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 6rem 6rem 0 rgb(0 0 0 / 0.1);
}
.cta-link:hover {
  transform: translate(6rem, 6rem);
  box-shadow: 0 0 0 rgb(0 0 0 / 0.15);
}

footer { margin-top: 120rem; }

/* ---------- footer ---------- */
footer {
  position: relative;
  padding: 60rem 20rem 43rem;
  background: var(--color-footer);
  color: var(--color-white);
  text-align: center;
}
.foot-sns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 36rem;
}
.foot-sns li { width: 30rem; height: 30rem; }
.foot-sns a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30rem;
  height: 30rem;
  border-radius: 100%;
}
.foot-sns img { display: block; width: 100%; height: auto; }
.foot-logo a {
  display: block;
  width: max-content;
  margin: 35rem auto 0;
}
.foot-logo img { display: block; width: 135rem; height: auto; }
.foot-copy {
  margin-top: 28rem;
  font-size: 16rem;
  line-height: 1;
  color: var(--color-foot-copy);
  letter-spacing: 0.1em;
}

/* ---------- スクロールでのフェードイン ---------- */
.fade {
  opacity: 0;
  transform: translateY(30rem);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade.on {
  opacity: 1;
  transform: none;
}

.about-txt.fade { transition-delay: 0.25s; }

.fade-chars span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-chars.on span {
  opacity: 1;
  transform: none;
}

/* ==========================================================
   SP（375px 基準 / design_SP）
   ========================================================== */
@media screen and (max-width: 1023px) {
  header { position: relative; }
  .head-logo {
    width: 100%;
    height: 80rem;
    padding: 18rem 0;
    text-align: center;
  }
  .head-logo img {
    width: 220rem;
    height: 44rem;
  }

  /* ---------- 背景装飾 ---------- */
  .deco { top: -80rem; }
  .shape { --amp: 6rem; }
  .s-kv-1 { top: 318rem; left: 341rem; width: 54rem; }
  .s-kv-2 { top: 180rem; left: 189rem; width: 95rem; }
  .s-kv-3 { top: 108rem; left: 303rem; width: 23rem; }
  .s-kv-4 { top: 490rem; left: -58rem; width: 167rem; }
  .s-kv-5 { top: 110rem; left: 23rem;  width: 59rem; }
  .s-kv-6 { top: 466rem; left: 245rem; width: 74rem; }
  .s-kv-7 { top: 200rem; left: -37rem; width: 66rem; }
  .s-kv-8 { top: 487rem; left: 344rem; width: 25rem; }
  .s-kv-9 { top: 339rem; left: 248rem; width: 42rem; }
  .s-msg-1 { top: 5166rem; left: -50rem; width: 111rem; }
  .s-msg-2 { top: 5027rem; left: -7rem;  width: 45rem; }
  .s-msg-3 { top: 5238rem; left: 307rem; width: 113rem; }
  .s-msg-4 { top: 5570rem; left: 296rem; width: 55rem; }
  .s-msg-5 { top: 5522rem; left: 23rem;  width: 71rem; }
  .s-msg-6 { top: 5764rem; left: -58rem; width: 166rem; }
  .s-msg-7 { top: 6079rem; left: 235rem; width: 175rem; }
  .s-msg-8 { top: 5910rem; left: 301rem; width: 86rem; }
  .s-msg-9 { top: 6004rem; left: -92rem; width: 162rem; }
  .frame-kv-1 {
    top: 71rem;
    left: 205rem;
    width: 170rem;
    height: 311rem;
    background-image: url(../img/frame-kv-1-sp.webp);
  }
  .frame-kv-2 {
    top: 103rem;
    left: 0;
    width: 375rem;
    height: 477rem;
    background-image: url(../img/frame-kv-2-sp.webp);
  }
  .frame-kv-3 {
    top: 22rem;
    left: 0;
    width: 343rem;
    height: 680rem;
    background-image: url(../img/frame-kv-3-sp.webp);
  }
  .frame-bottom {
    top: 6466rem;
    left: 0;
    width: 284rem;
    height: 798rem;
    background-image: url(../img/frame-bottom-sp.webp);
  }

  /* ---------- KV ---------- */
  .kv { height: 509rem; }
  .kv-inner {
    top: 99rem;
    left: 25rem;
  }
  .kv-sub {
    margin-left: 5rem;
    font-size: 14rem;
  }
  .kv-tit {
    margin-top: 15rem;
    font-size: 42rem;
  }
  .kv-lead {
    top: 188rem;
    width: 325rem;
    font-size: 14rem;
    letter-spacing: 0.16em;
    white-space: normal;
  }

  /* ---------- 共通見出し ---------- */
  .article .sec-tit { width: 171rem; margin: 0 auto; }
  .feature .sec-tit { width: 238rem; margin: 0 auto; }
  .message .sec-tit { width: 238rem; margin: 0 auto; }
  .sec-tit .sec-ttl img { height: 28rem; }
  .sec-sub .mk::before { height: 1.25em; }
  .about-sub .mk::before { height: 1.11em; }
  .sec-sub { font-size: 12rem; }
  .mk { padding: 0 3rem; }

  /* ---------- ABOUT ---------- */
  .about {
    width: 100%;
    height: 860rem;
  }
  .about-card {
    top: 0;
    min-height: 100%;
    padding-top: 0;
  }
  .about-ttl {
    position: static;
    width: 138rem;
    margin: 0 auto;
    padding-top: 60rem;
  }
  .about-sub {
    margin-top: 39rem;
    font-size: 18rem;
  }
  .about-txt {
    width: 310rem;
    margin-top: 35rem;
    font-size: 14rem;
    line-height: 2;
    text-align: center;
  }

  /* ---------- ARTICLE ---------- */
  .article {
    height: 1161rem;
    margin-top: 31rem;
    background:
      linear-gradient(0deg, rgb(245 142 102 / 0) 22%, rgb(234 209 161 / 0.8) 46%, rgb(22 157 94 / 0.8) 100%) 8rem 890rem / 33rem 271rem no-repeat,
      linear-gradient(270deg, rgb(245 142 102 / 0) 22%, rgb(245 142 102 / 0.6) 46%, rgb(134 170 211 / 0.6) 100%) 98rem 0 / 194rem 70rem no-repeat,
      linear-gradient(90deg, rgb(244 221 180 / 0.8) 32%, rgb(211 27 63 / 0.8) 100%) 154rem 32rem / 269rem 64rem no-repeat,
      linear-gradient(90deg, #d7d4b6 53%, #057496 100%) -4rem 961rem / 200rem 79rem no-repeat;
  }
  .article-head {
    position: absolute;
    top: 145rem;
    left: 0;
    width: 100%;
    text-align: center;
  }
  .article-head .sec-sub { margin: 8rem 0 0; }
  .article-lead {
    top: 227rem;
    left: 33rem;
    width: 310rem;
    font-size: 14rem;
    line-height: 2;
  }

  .carousel { top: 360rem; }
  .carousel-nav {
    top: 0;
    left: -4rem;
    width: 384rem;
  }
  .carousel-thumbs {
    flex-direction: row;
    gap: 12rem;
    margin: 0;
  }
  .carousel-thumbs button {
    width: 120rem;
    height: 82rem;
  }
  .carousel-thumbs button.is-current {
    outline-width: 6rem;
    outline-offset: -6rem;
  }
  .carousel-arrow {
    position: absolute;
    top: 87rem;
    left: 24rem;
    width: 325rem;
  }
  .carousel-prev { display: none; }
  .carousel-arrow { pointer-events: none; }
  .carousel-arrow::before,
  .carousel-arrow::after { background: var(--color-ink); }
  .carousel-next::before { top: 0; left: 0; }
  .carousel-next::after { left: 154rem; }

  .carousel-slides {
    margin-left: 0;
    width: 375rem;
    height: 300rem;
    top: 111rem;
    position: relative;
  }
  .carousel-card {
    top: 263rem;
    left: 24rem;
    justify-content: flex-start;
    width: 325rem;
    height: 260rem;
    padding: 34rem 20rem 0;
    background: rgb(255 255 255 / 0.7);
  }
  .carousel-tit {
    font-size: 19rem;
  }
  .carousel-txt {
    margin-top: 7rem;
    font-size: 12rem;
    line-height: 1.6;
  }
  .carousel-btn {
    right: 16rem;
    bottom: 16rem;
    width: 40rem;
    height: 40rem;
  }
  .carousel-btn::after { left: 13rem; }

  /* ---------- FEATURE ---------- */
  .feature {
    height: 2340rem;
    margin-top: -10rem;
    background:
      linear-gradient(180deg, rgb(211 27 63 / 0.8) 0%, rgb(244 221 180 / 0.8) 45%) -29rem 2195rem / 65rem 145rem no-repeat,
      linear-gradient(0deg, rgb(245 142 102 / 0) 22%, rgb(245 142 102 / 0.6) 46%, rgb(134 170 211 / 0.6) 100%) 20rem 2138rem / 72rem 199rem no-repeat;
  }
  .feature::after {
    z-index: 3;
    background:
      linear-gradient(180deg, rgb(245 142 102 / 0) 22%, rgb(234 209 161 / 0.8) 46%, rgb(121 58 194 / 0.8) 100%) 316rem 2104rem / 41rem 204rem no-repeat,
      linear-gradient(270deg, #d7d4b6 0%, #66b1ea 100%) 236rem 2222rem / 165rem 60rem no-repeat;
  }
  .feature-head {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
  }
  .feature-head .sec-sub { margin: 8rem 0 0; }
  .feature-lead {
    top: 82rem;
    left: 33rem;
    width: 310rem;
    font-size: 14rem;
    line-height: 2;
  }
  .feature-card {
    top: 186rem;
    left: 0;
    width: 100%;
    min-height: 2060rem;
    padding: 57rem 0 0 39rem;
  }
  .feature-list {
    grid-template-columns: 300rem;
    gap: 77rem;
  }
  .feature-ttl {
    gap: 12rem;
    min-height: 59rem;
    font-size: 20rem;
  }
  .feature-ttl span { margin-top: 0; }
  .feature-num { height: 59rem; }
  .feature-txt {
    margin-top: 22rem;
    font-size: 14rem;
    line-height: 2.05;
  }
  .feature-txt::first-letter {
    font-size: 28rem;
    line-height: 1.025;
  }

  /* ---------- MESSAGE ---------- */
  .message {
    height: 1228rem;
    margin-top: 16rem;
  }
  .message-head { top: 0; }
  .message-head .sec-sub { margin-top: 8rem; }
  .message-txt {
    top: 101rem;
    width: 330rem;
    font-size: 14rem;
    line-height: 2;
    white-space: normal;
  }
  .message-boxes {
    top: 582rem;
    height: 347rem;
  }
  .message-box {
    width: 285rem;
    height: 163rem;
    padding-top: 27rem;
  }
  .message-box:first-child { top: 13rem; left: 45rem; }
  .message-box:last-child {
    top: 172rem;
    left: 45rem;
    padding-top: 45rem;
  }
  .message-boxes::before,
  .message-boxes::after {
    left: 32rem;
    width: 312rem;
    height: 188rem;
  }
  .message-boxes::before { top: 0; background-image: url(../img/pill-l-sp.webp); }
  .message-boxes::after { top: 159rem; background-image: url(../img/pill-r-sp.webp); }
  .message-box h3 { font-size: 18rem; }
  .message-box p {
    margin-top: 10rem;
    font-size: 12rem;
    line-height: 1.8;
  }
  .message-close {
    top: 981rem;
    font-size: 18rem;
  }

  /* ---------- 別冊 ---------- */
  .magazine {
    width: 325rem;
    height: 560rem;
    margin: -58rem auto 0;
  }
  .magazine-cover {
    top: 52rem;
    left: 43rem;
    width: 194rem;
    height: 258rem;
  }
  .magazine-txt {
    top: 340rem;
    left: 20rem;
  }
  .magazine-txt h2 { font-size: 18rem; }
  .magazine-txt p {
    margin-top: 12rem;
    font-size: 14rem;
  }
  .magazine-publish {
    top: 1rem;
    left: 271rem;
    width: 54rem;
  }
  .pub-pc { display: none; }
  .pub-sp { display: block; }
  .pub-sp-2 { margin-top: 15rem; }

  /* ---------- CTA ---------- */
  .cta {
    width: 325rem;
    margin-top: 100rem;
  }
  .cta-link {
    flex-direction: column;
    justify-content: center;
    height: 150rem;
    padding-left: 0;
  }
  .cta-link img { width: 170rem; height: 45rem; }
  .cta-txt {
    margin: 29rem 0 0;
    font-size: 14rem;
  }
  .cta-plus {
    position: absolute;
    right: 99rem;
    bottom: 31rem;
    width: 16rem;
    height: 16rem;
    margin: 0;
  }
  .cta-plus::before { top: 7.6rem; width: 16rem; }
  .cta-plus::after { left: 7.6rem; height: 16rem; }

  /* ---------- footer ---------- */
  footer {
    padding-top: 51rem;
    padding-bottom: 62rem;
    margin-top: 100rem;
  }
  .foot-sns { gap: 35rem; }
  .foot-logo a { margin-top: 40rem; }
  .foot-logo img { width: 119rem; }
  .foot-copy {
    margin-top: 27rem;
    font-size: 10rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade, .fade-chars span { opacity: 1; transform: none; transition: none; }
}