/* ==========================================================================
   Web Craft ねこのて LP
   基準幅：1440px（1440px以上は背景が伸び、コンテンツ幅は保持）
   単位：rem（10px = 1rem）
   1439px以下：html の font-size を vw で可変させ、calc(値/1440*100vw) と
   同じ結果になるようにしてデザインを維持したまま縮小します。
   768px以下：SP用のブレークポイントのみ用意。中身は後日追加してください。
   ========================================================================== */

:root{
  --c-bg: #f7f8fc;
  --c-white: #ffffff;
  --c-border: #e8eaf2;
  --c-text: #1e2433;
  --c-text-gray: #666a78;
  --c-navy: #1b2c66;
  --c-navy-deep: #0c1c55;
  --c-navy-light: #23377b;
  --c-blue: #314e9f;
  --c-pink: #c75d9b;
  --c-gray-bg: #f3f5fa;
  --gradient-main: linear-gradient(125deg, #d979b3 3%, #e18a8b 74%, #e8c19b 120%);

  --font-serif: "Noto Serif JP", serif;
  --font-sans: "Zen Kaku Gothic New", sans-serif;
  --font-script: "Oooh Baby", cursive;
}

/* prefers-reduced-motion: モーションを抑えたい方向けの設定 */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ---------- reset ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ font-size: 62.5%; } /* 1rem = 10px（1440px以上の基準） */
body{
  font-family: var(--font-sans);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.6;
  font-size: 1.6rem;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }

.container{
  max-width: 144rem;
  margin: 0 auto;
  padding: 0 7rem;
}
.container2{
  max-width: 144rem;
  margin: 0 auto;
  padding: 0 12rem;
}

/* ---------- 共通ボタン ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: .8rem;
  padding: 0;
  border-radius: 1rem;
  font-family: var(--font-sans);
  font-weight:500;
  font-size: 2rem;
  letter-spacing: .1rem;
  transition: opacity .2s ease, transform .2s ease;
  white-space: nowrap;
}
.btn:hover{ opacity:.85; transform: translateY(-2px); }
.btn__icon{ width:4.5rem;}
.btn__icon--sm{ width:4.5rem;}
.btn__icon--next{ width:1rem;}

.btn--primary{ background: var(--gradient-main); color:#fff; font-weight:700; width:35rem; height:7rem; }
.btn--outline{ background:#fff; border:1px solid var(--c-pink); color: var(--c-navy); width:35rem; height:7rem; }
.btn--outline-navy{ background:#fff; border:1px solid var(--c-navy); color: var(--c-navy); font-size:1.8rem; width:25rem; height:5rem; }
.btn--white{ background:#fff; color: var(--c-navy); width:35rem; height:7rem; }
.btn--gradient{ background: var(--gradient-main); color:#fff; font-weight:700; width:32rem; height:6rem; padding:0 3.4rem; justify-content:space-between; }

.section-eyebrow{
  font-family: var(--font-serif);
  font-weight:700;
  font-size: 1.8rem;
  line-height: 1;
}
.section-eyebrow--navy{ color: var(--c-blue); }
.section-eyebrow--white{ color:#fff; }
.section-title{
  font-family: var(--font-serif);
  font-weight:700;
  font-size: 3.6rem;
  letter-spacing:.18rem;
  margin-bottom: 1rem;
}
.section-title--white{ color:#fff; }
.section-desc{
  color: var(--c-text-gray);
  font-size:1.8rem;
  font-family: var(--font-serif);
  font-weight:500;
  line-height:2.6rem;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header{
  position: fixed;
  top:0; left:0; width:100%;
  background: transparent;
  transition: background-color .32s ease, box-shadow .32s ease, backdrop-filter .32s ease;
  z-index: 100;
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.header__logo {
    margin-right: 4rem;
}
.header__logo-main{
  font-family: var(--font-serif);
  font-weight:700;
  font-size:2rem;
  letter-spacing:.1rem;
}
.header__logo-sub{
  font-family: var(--font-serif);
  font-weight:600;
  font-size:1rem;
  letter-spacing:.05rem;
  text-align:center;
}
.header__nav-list{
  display:flex;
  gap: 3rem;
}
.header__nav-list a{
  font-size:1.8rem;
  font-weight:500;
  letter-spacing:.09rem;
  white-space:nowrap;
  transition:color .2s ease;
}
.header__nav-list a:hover{ color:var(--c-pink); }
.header__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: .8rem;
  width: 22rem;
  height: 5rem;
  border-radius:1rem;
  background: var(--gradient-main);
  color:#fff;
  font-weight:500;
  font-size:1.8rem;
  letter-spacing:.1rem;
  flex-shrink:0;
}
.header__hamburger{
  display:none;
  flex-direction:column;
  gap:.5rem;
  width:3rem;
  background:none;
  border:none;
  cursor:pointer;
}
.header__hamburger span{
  display:block;
  height:2px;
  background: var(--c-navy);
}
.header.is-scrolled{
  background:#f7f8fc;
  box-shadow:0 .4rem 1.6rem rgba(18,37,84,.09);
  backdrop-filter:blur(1.2rem);
}

main{ padding-top:0; }

/* ==========================================================================
   FV（ヒーロー）
   ========================================================================== */
.fv{
  position:relative;
  min-height:72.7rem;
  padding-top: 14rem;
}
.fv-bg{
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
}
.fv-bg__img{
  width:100%; height:100%;
  object-fit:cover;
  object-position: right;
}
.fv__lead{
  font-family: var(--font-serif);
  font-weight:700;
  font-size:2rem;
  color: var(--c-navy-light);
  letter-spacing:.1rem;
  margin-bottom: 1.5rem;
}
.fv__title{
  font-family: var(--font-serif);
  font-weight:600;
  font-size: 5.6rem;
  line-height:7.4rem;
  letter-spacing:.448rem;
  max-width: 60rem;
  margin-bottom: 2rem;
}
.fv__title span{ color: var(--c-pink); }
.fv__desc{
  font-family: var(--font-sans);
  font-size:2rem;
  color: var(--c-text-gray);
  line-height:3rem;
  margin-bottom: 3.9rem;
  max-width: 62rem;
}
.fv__badges{
  display:flex;
  gap: 1rem;
  margin-bottom: 4rem;
}
.fv__badge{
  flex:1 1 19rem;
  max-width: 19rem;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:1rem;
  padding: 2.5rem 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.2rem;
  text-align:center;
}
.fv__badge-icon{ width:5.5rem; height:5rem; }
.fv__badge p{
  font-size:1.6rem;
  color: var(--c-navy);
  line-height:2.4rem;
}
.fv__btns{
  display:flex;
  gap:1.5rem;
}

/* ---------- キャンペーン フローティングカード（共通） ---------- */
.campaign-card{
  background: rgba(255,255,255,.9);
  width: 47rem;
  max-width:100%;
  padding: 4rem 3.1rem 4.5rem;
  flex-shrink:0;
}
.campaign-card__label{
  font-family: var(--font-serif);
  font-weight:700;
  font-size:1.6rem;
  line-height:1;
  color: var(--c-pink);
}
.campaign-card__title{
  font-family: var(--font-serif);
  font-weight:700;
  font-size:2.6rem;
  letter-spacing:.13rem;
  margin-bottom: 2rem;
}
.campaign-card__price{
  font-family: var(--font-serif);
  font-weight:700;
  font-size:3.4rem;
  margin-bottom: 1.5rem;
}
.campaign-card__price span{ color: var(--c-pink); }
.campaign-card__desc{
  font-size:1.8rem;
  line-height:2.6rem;
  margin-bottom: 3rem;
}

.fv__campaign-card{
  position:absolute;
  right: 7.4rem;
  top: 35.7rem;
}

/* ==========================================================================
   ABOUT（こだわり）
   ========================================================================== */
.about,.service,.feature,.works,.flow{
  margin: 10rem auto;
}
.about{
  padding: 0 7rem;
}
.about__box{
  max-width: 130rem;
  margin: 0 auto;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:1rem;
  padding: 4.8rem 7.5rem 5.2rem 6.2rem;
  display:flex;
  align-items:center;
  gap: 3rem;
}
.about__left{
  position:relative;
  flex: 1 1 50rem;
}
.about__ribbon{
  position:absolute;
  left: 0;
  top: -1.8rem;
  font-family: var(--font-script);
  font-size:3rem;
  color: var(--c-pink);
  transform: rotate(-10deg);
  line-height:1;
}
.about__title{
  font-family: var(--font-serif);
  font-weight:700;
  font-size:1.9rem;
  color: var(--c-text);
  margin-bottom: 1.6rem;
}
.about__desc{
  font-family: var(--font-serif);
  font-weight:500;
  font-size:1.8rem;
  color: var(--c-text-gray);
  line-height:2.6rem;
}
.about__right{
  flex: 1 1 45rem;
  display:flex;
}
.about__right li{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  padding: 0 1.5rem;
  text-align:center;
  border-left:1px solid #d9d9d9;
}
.about__right li:first-child{ border-left:none; }
.about__icon{ width:4.5rem; height:4rem; }
.about__right p{
  font-family: var(--font-serif);
  font-size:1.6rem;
  line-height:2.2rem;
  color: var(--c-text);
}

/* ==========================================================================
   SERVICE
   ========================================================================== */
.service{
  padding: 0 7rem;
  text-align:center;
}
.service__container{
  max-width: 124rem;
  margin: 0 auto;
}
.service__list{
  display:flex;
  gap:1rem;
  margin: 4rem 0 3rem;
}
.service__card{
  flex:1 1 0;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:1rem;
  padding: 2.5rem 2rem;
}
.service__icon{ width:5.5rem; height:5rem; margin:0 auto 1.6rem; }
.service__card-title{
  font-family: var(--font-sans);
  font-weight:700;
  font-size:1.8rem;
  color: var(--c-navy);
  margin-bottom: 1.6rem;
}
.service__card-title--deep{ color: var(--c-navy-deep); }
.service__card-desc{
  font-size:1.6rem;
  line-height:2.4rem;
}
.service__option{
  background: var(--c-gray-bg);
  border:1px solid var(--c-border);
  border-radius:1rem;
  padding: 2rem 3rem;
}
.service__option-label{
  font-family: var(--font-sans);
  font-weight:500;
  font-size:1.8rem;
  color: var(--c-navy);
  margin-bottom: 1.6rem;
}
.service__option-list{
  display:flex;
  justify-content:center;
  align-items:center;
}
.service__option-list li{
  flex:1 1 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  padding: 0 2rem;
  border-left:1px solid #d9d9d9;
}
.service__option-list li:first-child{ border-left:none; }
.service__option-icon{ width:5rem; height:4.5rem; }
.service__option-list p{
  font-family: var(--font-sans);
  font-weight:500;
  font-size:1.6rem;
  color: var(--c-navy);
}

/* ==========================================================================
   FEATURE（選ばれる理由）
   ========================================================================== */
.feature{
  position:relative;
  background:var(--c-gray-bg);
  color:#fff;
  padding:7.2rem 0 6rem;
  overflow:hidden;
}
.feature__photo{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.feature__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.feature__shape{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  overflow:visible;
}
.feature__shape-path{
  fill:url(#feature-gradient);
  transform-origin:50% 50%;
  animation:featureShapeDrift 9s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes featureShapeDrift{
  from{ transform:translateX(-.6%) scaleX(1); }
  to{ transform:translateX(.8%) scaleX(1.025); }
}
.feature__inner{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 4rem;
}
.feature__left{ flex: 1 1 45rem; }
.feature__line{
  display:block;
  width: 40rem;
  max-width:100%;
  height:1px;
  background: rgba(255,255,255,.4);
  margin: 2.5rem 0 3rem;
}
.feature__list li{
  display:flex;
  align-items:center;
  gap:1rem;
  padding: .8rem 0;
}
.feature__check{ width:2rem; height:2rem; flex-shrink:0; }
.feature__list p{ font-size:1.8rem; }

.feature__card{
  background: rgba(255,255,255,.92);
  color: var(--c-navy);
  flex: 0 0 50rem;
  max-width: 50rem;
  padding: 3rem 4rem;
  border-radius:.5rem;
}
.feature__card-title{
  font-family: var(--font-sans);
  font-weight:700;
  font-size:1.8rem;
  margin-bottom: 1.6rem;
}
.feature__card-desc{
  font-size:1.8rem;
  line-height:2.6rem;
  margin-bottom: 2.4rem;
}

/* ==========================================================================
   WORKS（制作実績）
   ========================================================================== */
.works__row{
  display:flex;
  gap: 6rem;
  align-items:flex-start;
}
.works__main{ flex: 1 1 0; }
.works__heading{
  display:flex;
  align-items:baseline;
  gap: 2rem;
  margin-bottom: 2rem;
}
.works__heading .section-title{ margin-bottom:0; }
.works__list{
  display:flex;
  gap:1rem;
  margin: 2rem 0 1rem;
}
.works__card{
  flex:1 1 0;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:.5rem;
  overflow:hidden;
}
.works__thumb{ width:100%; height:auto; object-fit:cover; }
.works__card-title{
  font-family: var(--font-sans);
  font-weight:700;
  color: var(--c-navy);
  font-size:1.6rem;
  text-align:center;
  padding: 1.3rem 0;
}
.works__more{
  background: var(--c-gray-bg);
  border:1px solid var(--c-border);
  border-radius:.5rem;
  padding: 1.5rem 3rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}
.works__more-desc{ font-size:1.6rem; line-height:2.4rem; }

/* ==========================================================================
   FLOW（制作の流れ）
   ========================================================================== */
.flow__inner{ text-align:center; }
.flow__list{
  display:flex;
  gap: .8rem;
  margin-top: 4.3rem;
}
.flow__step{
  flex:1 1 0;
  position:relative;
  padding-top: 1.8rem;
}
.flow__number{
  position:absolute;
  top:0; left:48%;
  transform: translateX(-50%);
  width:3.6rem;
  height:3.6rem;
  padding: 0.2rem 0 0.4rem;
  border-radius:50%;
  background: var(--c-pink);
  color:#fff;
  font-family: var(--font-serif);
  font-weight:700;
  font-size:1.8rem;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
}
.flow__card{
  position:relative;
  width: 21rem;
  max-width:100%;
  margin:0 auto;
}
.flow__card-bg{
  display:block;
  width:100%;
  height:auto;
}
.flow__card-content{
  position:absolute;
  inset:0;
  padding: 3.4rem 2rem 2rem 1rem;
  text-align:center;
}
.flow__icon{ width:5.5rem; height:5rem; margin:0 auto 1.6rem; }
.flow__label{
  font-family: var(--font-sans);
  font-weight:700;
  font-size:1.6rem;
  color: var(--c-navy);
  margin-bottom: 1rem;
}
.flow__desc{
  font-size:1.4rem;
  line-height:2rem;
  color: var(--c-text-gray);
}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{
  position:relative;
}
.cta-bg{ position:absolute; inset:0; z-index:-1; }
.cta-bg__img{ width:100%; height:100%; object-fit:cover; }
.cta__inner{
  display:flex;
  align-items: flex-end;
  gap:10rem;
  padding-top: 4rem;
  padding-bottom: 4.7rem;
  flex-wrap:wrap;
  color:#fff;
}
.cta__small{
  font-family: var(--font-serif);
  font-weight:600;
  font-size:2.2rem;
  letter-spacing:.1rem;
}
.cta__title{
  font-family: var(--font-serif);
  font-weight:700;
  font-size:3.6rem;
  letter-spacing:.1rem;
  margin-bottom: 1.6rem;
}
.cta__desc{
  font-family: var(--font-serif);
  font-weight:600;
  font-size:1.8rem;
  letter-spacing:.1rem;
}
.cta__btn{ background:#fff; color: var(--c-navy); flex-shrink:0; margin-bottom: 1rem;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  background:#fff;
  padding: 4rem 0 0;
}
.footer__row{
  display:flex;
  justify-content:space-between;
  gap: 4rem;
}
.footer__logo{
  font-family: var(--font-serif);
  font-weight:700;
  font-size:2.4rem;
  color: var(--c-navy);
  letter-spacing:.1rem;
}
.footer__logo-sub{
  font-family: var(--font-serif);
  font-weight:600;
  font-size:1.4rem;
  color: var(--c-navy);
  letter-spacing:.05rem;
  text-align:center;
}
.footer__desc{
  font-family: var(--font-serif);
  font-weight:600;
  font-size:1.4rem;
  color: var(--c-text-gray);
  letter-spacing:.07rem;
  line-height:2rem;
  margin: 2rem 0 1.5rem;
}
.footer__icon{ width:4.5rem;}
.footer__nav{
  display:flex;
  gap: 6rem;
}
.footer__nav-col li{ margin-bottom: 1rem; }
.footer__nav-col a{
  font-size:1.6rem;
  font-weight: 500;
  color: var(--c-navy);
}
.footer__copy{
  font-family: var(--font-serif);
  font-weight:600;
  font-size:1.4rem;
  color: var(--c-text-gray);
  letter-spacing:.07rem;
  text-align:center;
  padding: 1.5rem 0;
}

/* ==========================================================================
   レスポンシブ
   1439px以下：デザインを維持したまま縮小（htmlのfont-sizeをvwで可変させる方式）
   ========================================================================== */
@media (max-width: 1439px){
  html{
    font-size: calc(100vw / 144); /* = calc(値 / 1440 * 100vw) と同じ挙動 */
  }
}

/* ==========================================================================
   768px以下：SP対応
   基準は calc(値 / 390 * 100vw) の考え方をベースに、必要な要素だけ
   個別に上書きしています（この@mediaはファイル末尾＝最後に読み込まれる
   位置に置くことで、通常スタイルに上書きされないようにしています）。
   ========================================================================== */
@media (max-width: 767px){
  html{
    font-size: calc(100vw / 39); /* = calc(値 / 390 * 100vw) と同じ挙動 */
  }

  .container{ padding-right:2rem; padding-left:2rem; }
  .container2{ padding-right:2rem; padding-left:2rem; }
  .header__inner{ min-height:6.8rem; padding-top:1.2rem; padding-bottom:1.2rem; }
  .header__logo-main{ font-size:1.6rem; }
  .header__logo-sub{ font-size:.85rem; }
  .header__btn{ display:none; }
  .header__hamburger{ display:flex; position:relative; z-index:2; }
  .header__hamburger span{ width:3rem; transition:transform .25s ease, opacity .2s ease; }
  .header__hamburger.is-open span:nth-child(1){ transform:translateY(.7rem) rotate(45deg); }
  .header__hamburger.is-open span:nth-child(2){ opacity:0; }
  .header__hamburger.is-open span:nth-child(3){ transform:translateY(-.7rem) rotate(-45deg); }
  .header__nav{ display:block; position:fixed; inset:0; padding:9.5rem 2.4rem 3rem; background:rgba(255,255,255,.98); opacity:0; pointer-events:none; transform:translateY(-1rem); transition:opacity .25s ease, transform .25s ease; }
  .header__nav.is-open{ opacity:1; pointer-events:auto; transform:none; }
  .header__nav-list{ flex-direction:column; gap:0; border-top:1px solid var(--c-border); }
  .header__nav-list li{ border-bottom:1px solid var(--c-border); }
  .header__nav-list a{ display:block; padding:1.6rem .4rem; font-size:1.6rem; }
  .btn{ width:100%; min-height:5.6rem; padding:1.4rem 2rem; font-size:1.6rem; }
  .btn__icon, .btn__icon--sm{ width:3.2rem; height:3rem; }
  .section-eyebrow{ font-size:1.4rem; margin-bottom:.5rem; }
  .section-title{ font-size:2.8rem; line-height:1.45; margin-bottom:1rem; }
  .section-desc{ font-size:1.5rem; line-height:2.2rem; }
  .fv{ min-height:0; padding:12rem 2rem 5rem; }
  .fv__lead{ font-size:1.5rem; margin-bottom:2.4rem; }
  .fv__title{ font-size:3.4rem; line-height:1.55; letter-spacing:.12rem; margin-bottom:2.4rem; }
  .fv__desc{ font-size:1.5rem; line-height:2.3rem; margin-bottom:2.4rem; }
  .fv__badges{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem; margin-bottom:2.4rem; }
  .fv__badge{ max-width:none; min-height:14rem; padding:1.5rem .8rem; gap:.8rem; }
  .fv__badge-icon{ width:4.2rem; height:4rem; }
  .fv__badge p{ font-size:1.3rem; line-height:1.9rem; }
  .fv__btns{ flex-direction:column; gap:1rem; }
  .fv__campaign-card{ position:static; width:auto; margin:3rem 2rem 0; }
  .campaign-card{ width:100%; padding:2.4rem 2rem; border-radius:1rem; box-shadow:0 1rem 3rem rgba(19,34,82,.08); }
  .campaign-card__title, .campaign-card__price{ font-size:2rem; margin-bottom:1.5rem; }
  .campaign-card__desc{ font-size:1.5rem; line-height:2.2rem; }
  .about{ padding:3rem 2rem 4.5rem; }
  .about__box{ padding:3rem 2rem; flex-direction:column; align-items:stretch; gap:3rem; }
  .about__left, .about__right{ flex:1 1 auto; width:100%; }
  .about__ribbon{ font-size:2.4rem; top:-1.4rem; }
  .about__title{ font-size:1.8rem; line-height:1.8; }
  .about__desc{ font-size:1.5rem; line-height:2.3rem; }
  .about__right{ display:grid; grid-template-columns:repeat(3, 1fr); }
  .about__right li{ min-width:0; padding:0 .5rem; gap:.8rem; }
  .about__right p{ font-size:1.2rem; line-height:1.7rem; }
  .about__icon{ width:3.6rem; height:3.4rem; }
  .service{ padding:4.5rem 2rem; }
  .service__list{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem; margin:2.6rem 0 2rem; }
  .service__card{ padding:1.8rem 1.2rem; border-radius:.8rem; }
  .service__icon{ width:4rem; height:3.8rem; margin-bottom:1rem; }
  .service__card-title{ font-size:1.5rem; line-height:1.6; margin-bottom:1rem; }
  .service__card-desc{ font-size:1.25rem; line-height:1.9rem; }
  .service__option{ padding:1.8rem 1.2rem; }
  .service__option-label{ font-size:1.4rem; line-height:2rem; }
  .service__option-list{ align-items:stretch; }
  .service__option-list li{ flex-direction:column; gap:.6rem; padding:0 .4rem; }
  .service__option-icon{ width:3.7rem; height:3.5rem; }
  .service__option-list p{ font-size:1.15rem; text-align:center; }
  .feature{ padding:4.8rem 0; background:var(--c-gray-bg); }
  .feature__shape{ height:calc(100% - 15rem); }
  .feature__shape-path{ animation-duration:12s; }
  .feature__inner{ flex-direction:column; align-items:stretch; gap:2.4rem; }
  .feature__left{ flex:1 1 auto; }
  .feature__line{ margin:2rem 0; }
  .feature__list li{ align-items:flex-start; padding:.6rem 0; gap:.8rem; }
  .feature__list p{ font-size:1.45rem; line-height:2.1rem; }
  .feature__card{ flex-basis:auto; max-width:none; margin-top:0; padding:2.4rem 2rem; border-radius:1rem; }
  .feature__card-title{ font-size:1.6rem; }
  .feature__card-desc{ font-size:1.45rem; line-height:2.2rem; }
  .feature__card-btn{ width:100%; }
  .works{ padding:4.5rem 0; }
  .works__row{ flex-direction:column; align-items:stretch; gap:3rem; }
  .works__campaign-card{ width:100%; }
  .works__list{ gap:.8rem; margin:2.4rem 0; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem; }
  .works__heading{ flex-wrap:wrap; gap:.8rem 1.6rem; margin-bottom:2rem; }
  .works__card{ min-width:23rem; scroll-snap-align:start; }
  .works__more{ padding:2rem; flex-direction:column; align-items:stretch; }
  .works__more-desc{ font-size:1.45rem; line-height:2.2rem; }
  .flow{ padding:4.5rem 0; }
  .flow__list{ display:grid; grid-template-columns:repeat(2, 1fr); gap:2rem 1rem; margin-top:3rem; }
  .flow__step{ padding-top:1.5rem; }
  .flow__number{ width:3rem; height:3rem; font-size:1.5rem; }
  .flow__card{ width:100%; }
  .flow__card-content{ padding:2.8rem 1rem 1rem; }
  .flow__icon{ width:4.2rem; height:4rem; margin-bottom:.8rem; }
  .flow__label{ font-size:1.3rem; margin-bottom:.6rem; }
  .flow__desc{ font-size:1.15rem; line-height:1.6rem; }
  .cta__inner{ padding-top:4rem; padding-bottom:4rem; gap:2rem; }
  .cta__small{ font-size:1.6rem; }
  .cta__title{ font-size:2.6rem; line-height:1.5; }
  .cta__desc{ font-size:1.45rem; line-height:2.1rem; }
  .cta__btn{ width:100%; }
  .footer{ padding-top:3.5rem; }
  .footer__row{ flex-direction:column; gap:2.8rem; }
  .footer__logo{ font-size:2rem; }
  .footer__desc{ font-size:1.3rem; line-height:2rem; margin-top:1.6rem; }
  .footer__icon{ margin-top:1.6rem; }
  .footer__nav{ gap:3rem; }
  .footer__nav-col a{ font-size:1.4rem; }
  .footer__copy{ margin-top:2.5rem; font-size:1.15rem; }
}