/* ==========================================================
   熊本銀行 バリーカード × 復興支援 LP
   PC: 1000px コンテンツ幅 / SP: 768px 以下
   ========================================================== */

:root {
  --c-text: #171717;
  --c-note: #808080;
  --c-line: #BFD9E8;
  --c-gray: #F2F2F2;
  --c-ring: #A9A9A9;
  --c-red: #D10035;
  --c-orange: #F39800;
  --c-orange-text: #F38000;
  --c-cream: #FEFAF2;
  --grad-vary: linear-gradient(124deg, #BFD9E8 -14%, #F2D4BB 20.5%, #EAD0E3 56.7%, #C2E3F0 93%, #CDE6D8 126%, #EDD6E7 157%);
  --grad-border: linear-gradient(135deg, #BFD9E8 0%, #F2D4BB 20%, #EAD0E3 41%, #C2E3F0 62%, #CDE6D8 81%, #EDD6E7 99%);
  --font-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-num: "Akshar", var(--font-base);
  --font-ennichi: "Zen Kaku Gothic New", var(--font-base);
  --inner: 1000px;
  --sec-gap: 100px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 2;
  color: var(--c-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; vertical-align: top; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.page { overflow-x: clip; }

/* ---------- layout ---------- */
.inner { width: var(--inner); max-width: calc(100% - 40px); margin: 0 auto; }
.stack > * + * { margin-top: 40px; }
.stack--50 > * + * { margin-top: 50px; }
.main { position: relative; z-index: 1; background: #fff; border-radius: 60px 60px 0 0; }
.sec--vary {
  padding: var(--sec-gap) 0;
  border-radius: 30px;
  background: linear-gradient(136deg, rgba(242, 212, 187, .3) 11%, rgba(234, 208, 227, .3) 44%, rgba(191, 217, 232, .3) 64%, rgba(194, 227, 240, .3) 100%);
}
.sec--scheme { padding: var(--sec-gap) 0; }
.sec--movie { padding: 0 0 var(--sec-gap); }

/* ---------- typography ---------- */
.ttl { font-size: 36px; font-weight: 400; line-height: 1.2; text-align: center; }
.ttl--left { text-align: left; }
.txt { font-size: 16px; line-height: 32px; line-break: strict; }
.lead { font-size: 16px; line-height: 32px; text-align: center; }
.label {
  display: block;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--c-orange);
  text-align: center;
}
.notes { display: flex; flex-direction: column; gap: 5px; font-size: 10px; line-height: 18px; color: var(--c-note); }
.notes--center { text-align: center; }

/* ---------- button / icons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 100px;
  border: 1px solid var(--c-text);
  border-radius: 10px;
  font-size: 18px;
  line-height: 22px;
  color: var(--c-text);
  text-decoration: none;
  background: transparent;
  transition: background-color .3s, color .3s, border-color .3s;
}
.btn:hover { background: var(--c-text); color: #fff; }
.sec__action { text-align: center; }

/* 外部リンクアイコン */
.icon-ext { flex: none; width: 16px; height: 16px; overflow: hidden; }
.icon-ext path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
a:hover .icon-ext__arrow, button:hover .icon-ext__arrow { animation: extFly .6s ease-in-out both; }
@keyframes extFly {
  0%   { transform: translate(0, 0); opacity: 1; }
  40%  { transform: translate(8px, -8px); opacity: 0; }
  41%  { transform: translate(-8px, 8px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}
/* くの字矢印 */
.icon-chev { flex: none; width: 8px; height: 14px; transition: transform .3s ease; }
.icon-chev--down { transform: rotate(90deg); }
a:hover .icon-chev--down, button:hover .icon-chev--down { transform: rotate(90deg) translateX(3px); }
a:hover .icon-chev--right, button:hover .icon-chev--right { transform: translateX(3px); }

/* ==========================================================
   FV
   ========================================================== */
.fv { position: relative; z-index: 0; }
.fv__fixed {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #2a63c9;
}
.fv__bg, .fv__bg picture { position: absolute; inset: 0; }
.fv__bg img {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  min-width: 100%;
  height: max(100vw, calc(var(--fvh, 100vh) * 1.45));
  transform: translate(-50%, 0);
  will-change: transform;
}
.fv__logo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 20px 30px 20px 20px;
  background: #fff;
  border-radius: 0 0 30px 0;
}
.fv__logo img { width: 150px; height: 23px; }

/* 画面 1: コピー + SCROLL */
.fv__screen {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.fv__screen--copy { height: var(--fvh, 100vh); }
.fv__copy { font-size: 64px; font-weight: 400; line-height: 84px; color: #fff; text-align: center; }
.fv__copy-line { display: block; }
.fv__scroll {
  position: absolute;
  left: 50%;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  transform: translateX(-50%);
}
.fv__scroll-line { position: relative; width: 1px; height: 43px; overflow: hidden; background: rgba(255, 255, 255, .3); }
.fv__scroll-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  animation: scrollFlow 2s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes scrollFlow { from { top: -100%; } to { top: 100%; } }
.fv__scroll-text { font-size: 10px; line-height: 36px; letter-spacing: .1em; }
/* 読み込み時のフェードイン */
.js .fv__copy-line { opacity: 0; transform: translateY(8px); transition: opacity 1s ease, transform 1s ease; }
.js .fv__scroll { opacity: 0; transition: opacity 1s ease; }
.js .fv.is-loaded .fv__copy-line { opacity: 1; transform: none; }
.js .fv.is-loaded .fv__copy-line:nth-child(1) { transition-delay: .2s; }
.js .fv.is-loaded .fv__copy-line:nth-child(2) { transition-delay: 1.3s; }
.js .fv.is-loaded .fv__scroll { opacity: 1; transition-delay: 2.4s; }

/* 画面 2: リード文 */
.fv__screen--lead { height: var(--fvh, 100vh); pointer-events: none; }
/* 画面 3: 背景のパン */
.fv__screen--pan { height: calc(var(--fvh, 100vh) * 2); pointer-events: none; }
.fv__lead-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px calc(var(--fvh, 100vh) * .08);
  pointer-events: none;
}
.fv__lead { font-size: 16px; line-height: 36px; color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .28); }
.js .fv__lead { opacity: 0; }
.js .fv__lead.is-inview { opacity: 1; }
.fv__line { display: block; opacity: var(--lo, 1); transform: translateY(calc((1 - var(--lo, 1)) * -8px)); }
.fv__line-text { display: block; }
.js .fv__line-text {
  opacity: 0;
  transform: translate(-10px, 6px);
  -webkit-mask-image: linear-gradient(100deg, #000 0%, #000 45%, transparent 65%);
  mask-image: linear-gradient(100deg, #000 0%, #000 45%, transparent 65%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}
.js .fv__lead.is-inview .fv__line-text {
  animation: leadWipe 1s cubic-bezier(.4, 0, .2, 1) both;
  animation-delay: calc(var(--i, 0) * .15s);
}
@keyframes leadWipe {
  from { opacity: 0; transform: translate(-10px, 6px); -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { opacity: 1; transform: translate(0, 0); -webkit-mask-position: 0 0; mask-position: 0 0; }
}

/* ==========================================================
   Block1: PROJECT カルーセル
   ========================================================== */
.sec--project {
  padding: var(--sec-gap) 0;
  border-radius: 60px;
  background: var(--c-cream);
}
.carousel { margin-top: 80px; }
.carousel__stage { position: relative; }
.carousel__viewport { overflow: hidden; border-radius: 30px; background: #fff; }
.carousel__track { display: flex; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.slide {
  position: relative;
  flex: 0 0 100%;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  min-height: 482px;
  padding: 40px;
}
.slide__visual { flex: none; width: 410px; height: 400px; border-radius: 30px; overflow: hidden; }
.slide__visual--photo img { width: 100%; height: 100%; object-fit: cover; }
.slide__visual--ennichi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--c-red);
  color: #fff;
  font-family: var(--font-ennichi);
  text-align: center;
}
.ennichi__tagline { font-size: 16px; line-height: 32px; }
.ennichi__tagline strong { display: block; font-size: 22px; font-weight: 500; line-height: 32px; }
.ennichi__logo { width: 187px; height: auto; }
.slide__body { flex: 1; min-width: 0; }
.slide__label { font-size: 16px; font-weight: 700; line-height: 36px; letter-spacing: 1.6px; color: var(--c-orange-text); }
.slide__ttl { margin-top: 10px; font-size: 24px; font-weight: 700; line-height: 36px; }
.slide__ttl-seg { display: inline-block; }
.slide__txt { margin-top: 40px; font-size: 16px; line-height: 32px; }
.slide__btn {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 55px;
  padding: 0 35px;
  border-radius: 30px 0 30px 0;
  background: var(--c-orange);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .3s;
}
.slide__btn:hover { background: #e58f00; }
/* 公開前のグレーアウト */
.slide__btn--disabled { padding: 0 58px; background: #DADADA; color: #fff; pointer-events: none; cursor: default; }
.slide__btn .icon-chev { width: 8px; height: 14px; }
/* 左右の矢印 */
.carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border: 1px solid var(--c-orange);
  border-radius: 50%;
  background: #fff;
  color: var(--c-orange-text);
  transform: translateY(-50%);
  transition: background-color .3s;
}
.carousel__arrow:hover { background: #fff7ea; }
.carousel__arrow .icon-chev { width: 17px; height: 31px; }
.carousel__arrow[hidden] { display: none; }
.carousel__prev { left: -36px; }
.carousel__next { right: -36px; }
.icon-chev--left { transform: rotate(180deg); }
button:hover .icon-chev--left { transform: rotate(180deg) translateX(3px); }
.carousel__dots { display: flex; justify-content: center; gap: 10px; margin-top: 80px; }
.carousel__dot { width: 18px; height: 18px; border-radius: 50%; background: #D9D9D9; transition: background-color .3s; }
.carousel__dot.is-active { background: var(--c-orange); }

/* ---------- カードセット（Block3） ---------- */
.cardset { position: relative; width: 456px; aspect-ratio: 456 / 423.3; }
.cardset__back { position: absolute; left: 0; top: 12.1%; width: 100%; height: auto; }
.cardset__card {
  position: absolute;
  left: 33.1%;
  top: 5.15%;
  width: 46.45%;
  height: auto;
  border-radius: 3.6% / 2.3%;
  transform: rotate(15.12deg);
}

/* ---------- Block3 ---------- */
.vary { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.vary__text { flex: none; width: 493px; }
.vary__text .ttl { margin-bottom: 40px; }
.features { display: flex; justify-content: space-between; margin-top: 40px; }
.feature { position: relative; width: 138px; padding-top: 22px; text-align: center; }
.feature__num {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 36px;
  line-height: 50px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(23, 23, 23, .25);
}
.feature__circle {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 138px;
  height: 138px;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
}
.feature__circle::before,
.feature__circle::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--c-ring);
  border-radius: 50%;
}
.feature__circle::before { z-index: -2; background: #fff; transform: translate(4px, 4px); }
.feature__circle::after { z-index: -1; background: var(--grad-vary); }
.feature__sup { font-size: 11px; font-weight: 400; line-height: 1; color: var(--c-note); vertical-align: top; }
.vary__cardset { flex: none; width: 456px; }

/* ---------- Block4 ---------- */
.steps { display: flex; align-items: center; gap: 10px; padding-top: 15px; }
.step {
  position: relative;
  flex: 1;
  border: 1px solid transparent;
  border-radius: 10px;
  background: linear-gradient(#fff, #fff) padding-box, var(--grad-border) border-box;
}
.step__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  border-radius: 9px 9px 0 0;
  background: var(--c-gray);
}
.step__icon { height: auto; }
.step__icon--1 { width: 125.4px; }
.step__icon--2 { width: 139px; }
.step__icon--3 { width: 83px; }
.step__icon--4 { width: 79px; }
.step__who {
  position: absolute;
  top: 140px;
  left: 50%;
  z-index: 1;
  padding: 3px 20px;
  border-radius: 50px;
  background: var(--c-text);
  color: #fff;
  font-size: 12px;
  line-height: 14px;
  white-space: nowrap;
  transform: translateX(-50%);
}
.step__body { padding: 20px 10px; text-align: center; }
.step__ttl { margin-bottom: 10px; font-size: 18px; font-weight: 500; line-height: 24px; }
.step__txt { font-size: 13px; line-height: 24px; }
.step__arrow { flex: none; width: 8px; height: 14px; color: var(--c-text); }
.step__arrow svg { display: block; width: 100%; height: 100%; }
.step__badge {
  position: absolute;
  top: -15px;
  right: -15px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 75px;
  height: 75px;
  background: url(../img/badge_circle.svg) center / contain no-repeat;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.24;
  text-align: center;
}

/* ---------- Block6 ---------- */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: 15px; overflow: hidden; background: #000; }
.video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; }
.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 125px;
  height: 125px;
  transform: translate(-50%, -50%);
  transition: transform .3s;
}
.video__play img { width: 100%; height: 100%; }
.video__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video.is-playing .video__poster, .video.is-playing .video__play { display: none; }

/* ---------- FV2 ---------- */
.fv2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(600px, 62.5vw, 1200px);
  overflow: hidden;
  background: #2a63c9;
}
.fv2__bg, .fv2__bg picture, .fv2__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fv2__bg img { object-fit: cover; object-position: 50% 100%; }
.fv2__copy { position: relative; z-index: 1; font-size: 64px; line-height: 84px; color: #fff; text-align: center; }
.fv2__copy-line { display: block; }
/* 画面に入ったら 1 行ずつフェードイン */
.js .fv2__copy.js-fade { opacity: 1; transform: none; transition: none; }
.js .fv2__copy-line { opacity: 0; transform: translateY(8px); transition: opacity 1s ease, transform 1s ease; }
.js .fv2__copy.is-inview .fv2__copy-line { opacity: 1; transform: none; }
.js .fv2__copy.is-inview .fv2__copy-line:nth-child(1) { transition-delay: .2s; }
.js .fv2__copy.is-inview .fv2__copy-line:nth-child(2) { transition-delay: 1.3s; }

/* ---------- footer ---------- */
.footer__main { padding: 100px 0; background: rgba(243, 152, 0, .1); text-align: center; }
.footer__logos { display: flex; align-items: center; justify-content: center; gap: 20px; }
.footer__logo { height: auto; }
.footer__logo--ffg { width: 103px; }
.footer__logo--kmb { width: 200px; }
.footer__sep { width: 1px; height: 22px; background: var(--c-text); }
.footer__text { margin-top: 60px; font-size: 16px; line-height: 32px; }
.footer__links { display: flex; justify-content: center; gap: 10px; margin-top: 30px; font-size: 16px; line-height: 32px; }
.footer__links li + li::before { content: "｜"; margin-right: 10px; }
.footer__links a { text-decoration: underline; text-underline-offset: .15em; }
.footer__links a:hover { text-decoration: none; }
.footer__legal { padding: 10px 0; background: #fff; }
.footer__legal-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 83px; }
.footer__legal-text { font-size: 12px; line-height: 24px; }
.footer__legal-text small { font-size: inherit; }
.footer__legal-line { display: inline-block; }
.footer__legal-logo { flex: none; width: 330px; max-width: 45%; height: auto; }

/* ==========================================================
   scroll animation
   ========================================================== */
.js .js-fade { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.js .js-fade.is-inview { opacity: 1; transform: none; }

/* Block3 */
.js .sec--vary .cardset__back, .js .sec--vary .cardset__card, .js .sec--vary .feature { opacity: 0; }
.js .sec--vary .js-fade.is-inview .cardset__back { animation: triUp .55s cubic-bezier(.2, .9, .3, 1) both; }
.js .sec--vary .js-fade.is-inview .cardset__card { animation: cardIn .6s ease-out .35s both; }
.js .sec--vary .js-fade.is-inview .feature { animation: popIn .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.js .sec--vary .js-fade.is-inview .feature:nth-child(1) { animation-delay: .8s; }
.js .sec--vary .js-fade.is-inview .feature:nth-child(2) { animation-delay: .95s; }
.js .sec--vary .js-fade.is-inview .feature:nth-child(3) { animation-delay: 1.1s; }
@keyframes triUp { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cardIn { from { opacity: 0; transform: translateY(40px) rotate(15.12deg); } to { opacity: 1; transform: translateY(0) rotate(15.12deg); } }

/* フロー図（Block4） */
.js .js-stagger > * { opacity: 0; }
.js .js-stagger.is-inview > * { animation: popIn .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.js .js-stagger.is-inview > :nth-child(2) { animation-delay: .3s; }
.js .js-stagger.is-inview > :nth-child(3) { animation-delay: .4s; }
.js .js-stagger.is-inview > :nth-child(4) { animation-delay: .7s; }
.js .js-stagger.is-inview > :nth-child(5) { animation-delay: .8s; }
.js .js-stagger.is-inview > :nth-child(6) { animation-delay: 1.1s; }
.js .js-stagger.is-inview > :nth-child(7) { animation-delay: 1.2s; }
@keyframes popIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .js .js-fade { opacity: 1; transform: none; transition: none; }
  .js .fv2__copy-line { opacity: 1; transform: none; transition: none; }
  .js .js-stagger > * { opacity: 1; animation: none !important; }
  .js .sec--vary .cardset__back, .js .sec--vary .cardset__card, .js .sec--vary .feature { opacity: 1; animation: none !important; }
  .js .sec--vary .cardset__card { transform: rotate(15.12deg); }
  .fv__screen--pan { height: 0; }
  .js .fv__copy-line, .js .fv__scroll { opacity: 1; transform: none; transition: none; }
  .js .fv__scroll { transform: translateX(-50%); }
  .js .fv__line-text { opacity: 1; transform: none; -webkit-mask-image: none; mask-image: none; animation: none !important; }
  .fv__line { transform: none; }
  .js .fv__lead { transition: opacity .3s; }
  .fv__scroll-line::after { animation: none; }
  .carousel__track { transition: none; }
  a:hover .icon-ext__arrow, button:hover .icon-ext__arrow { animation: none; }
}

/* ==========================================================
   responsive
   ========================================================== */
/* タブレット〜小さめPC */
@media (min-width: 769px) and (max-width: 1040px) {
  .vary { gap: 24px; }
  .vary__text { width: 56%; }
  .vary__cardset { width: 40%; }
  .btn { padding: 20px 60px; }
  .slide__visual { width: 40%; height: auto; aspect-ratio: 410 / 400; }
  .carousel__next { right: -12px; }
}

/* SP */
@media (max-width: 768px) {
  :root { --sec-gap: 60px; }
  body { font-size: 14px; }
  .stack > * + * { margin-top: 24px; }
  .stack--50 > * + * { margin-top: 32px; }
  .ttl { font-size: 24px; line-height: 1.4; }
  .txt, .lead { font-size: 14px; line-height: 26px; }
  .label { margin-bottom: 12px; font-size: 14px; }
  .notes { font-size: 10px; line-height: 16px; }
  .btn { width: 100%; max-width: 335px; padding: 16px 24px; font-size: 15px; line-height: 20px; }

  /* FV */
  .fv__logo { padding: 12px 16px 12px 12px; border-radius: 0 0 20px 0; }
  .fv__logo img { width: 120px; height: 18px; }
  .fv__copy { font-size: 30px; line-height: 46px; }
  .fv__scroll { bottom: 28px; }
  .fv__lead { font-size: 14px; line-height: 28px; }

  /* Block1 */
  .main { border-radius: 30px 30px 0 0; }
  .sec--project { border-radius: 30px; }
  .carousel { margin-top: 40px; }
  .carousel__viewport { border-radius: 20px; }
  .slide { flex-direction: column; gap: 20px; min-height: 0; padding: 20px 20px 76px; }
  .slide__visual { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 20px; }
  .ennichi__tagline { font-size: 14px; line-height: 24px; }
  .ennichi__tagline strong { font-size: 19px; line-height: 28px; }
  .ennichi__logo { width: 130px; }
  .slide__body { width: 100%; }
  .slide__label { font-size: 14px; line-height: 24px; }
  .slide__ttl { margin-top: 8px; font-size: 18px; line-height: 28px; }
  .slide__txt { margin-top: 16px; font-size: 14px; line-height: 26px; }
  .slide__btn { height: 48px; padding: 0 20px; border-radius: 20px 0 20px 0; font-size: 13px; }
  .carousel__arrow { width: 48px; height: 48px; }
  .carousel__arrow .icon-chev { width: 11px; height: 20px; }
  .carousel__prev { left: -8px; }
  .carousel__next { right: -8px; }
  .carousel__dots { gap: 8px; margin-top: 32px; }
  .carousel__dot { width: 12px; height: 12px; }

  /* Block3 */
  .sec--vary { border-radius: 20px; }
  .vary { flex-direction: column; gap: 32px; }
  .vary__text { width: 100%; }
  .vary__text .ttl { margin-bottom: 24px; }
  .features { margin-top: 24px; }
  .feature { width: 96px; padding-top: 16px; }
  .feature__num { font-size: 26px; line-height: 36px; }
  .feature__circle { width: 96px; height: 96px; font-size: 12px; line-height: 16px; }
  .feature__circle::before { transform: translate(3px, 3px); }
  .feature__sup { font-size: 9px; }
  .vary__cardset { width: 72%; margin: 0 auto; }

  /* Block4 */
  .steps { flex-direction: column; gap: 0; padding-top: 12px; }
  .step { width: 100%; }
  .step__visual { height: 120px; }
  .step__icon--1 { width: 100px; }
  .step__icon--2 { width: 110px; }
  .step__icon--3 { width: 66px; }
  .step__icon--4 { width: 63px; }
  .step__who { top: 110px; }
  .step__body { padding: 20px 12px 16px; }
  .step__ttl { margin-bottom: 6px; font-size: 16px; line-height: 22px; }
  .step__txt { font-size: 13px; line-height: 20px; }
  .step__arrow { display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin: 8px 0; }
  .step__arrow svg { width: 8px; height: 14px; transform: rotate(90deg); }
  .step__badge { top: -12px; right: -8px; width: 60px; height: 60px; font-size: 8px; }

  /* Block6 */
  .video { border-radius: 10px; }
  .video__play { width: 72px; height: 72px; }

  /* FV2 */
  .fv2 { height: 480px; }
  .fv2__copy { font-size: 30px; line-height: 46px; }

  /* footer */
  .footer__main { padding: 60px 0; }
  .footer__logos { gap: 14px; }
  .footer__logo--ffg { width: 80px; }
  .footer__logo--kmb { width: 150px; }
  .footer__sep { height: 16px; }
  .footer__text { margin-top: 40px; font-size: 13px; line-height: 24px; }
  .footer__links { flex-wrap: wrap; margin-top: 20px; font-size: 13px; line-height: 24px; }
  .footer__legal { padding: 24px 0; }
  .footer__legal-inner { flex-direction: column; gap: 16px; min-height: 0; text-align: center; }
  .footer__legal-text { font-size: 10px; line-height: 18px; }
  .footer__legal-logo { width: 220px; max-width: 100%; }
}