@charset "UTF-8";

/* ==============================
  root
============================== */

:root {
  /* color */
  --color-white: #FFFFFF;
  --color-text: #333333;
  --color-red: #E81919;
  --color-navy: #0B2A4A;
  --color-lp-bg: #F7FAFC;

  /* overlay */
  --color-white-overlay-90: rgba(255, 255, 255, 0.9);
  --color-body-bg-overlay: rgba(255, 255, 255, 0.7);

  /* font */
  --font-base: "Noto Sans JP", sans-serif;
  --font-serif: "Shippori Mincho", serif;

  /* layout */
  --lp-max-width: 560px;
  --inner-padding: 4.9%;

  /* section */
  --section-padding-top: 20px;
  --section-padding-bottom: 40px;

  /* cta */
  --cta-padding-top: 16px;
  --cta-padding-bottom: 24px;
  --cta-fv-padding-top: 12px;

  /* header */
  --color-header-bg-start: #1E5B19;
  --color-header-bg-end: #09330E;
  --gradient-header-bg: linear-gradient(
    90deg,
    var(--color-header-bg-start) 0%,
    var(--color-header-bg-end) 100%
  );

  /* gold text */
  --color-gold-start: #D6B246;
  --color-gold-center: #F7EC97;
  --color-gold-end: #D6B246;
  --gradient-gold-text: linear-gradient(
    180deg,
    var(--color-gold-start) 0%,
    var(--color-gold-center) 50%,
    var(--color-gold-end) 100%
  );

  /* cta button */
  --color-cta-bg: #F7A32C;
  --color-cta-bg-hover: #E58A12;
  --color-cta-text: #FFFFFF;

  /* campaign */
  --color-campaign-label-text: #FFFFFF;
  --color-campaign-gold-01: #D9C391;
  --color-campaign-gold-02: #B28247;
  --gradient-campaign-label: linear-gradient(
    90deg,
    var(--color-campaign-gold-01) 0%,
    var(--color-campaign-gold-02) 34%,
    var(--color-campaign-gold-01) 66%,
    var(--color-campaign-gold-02) 100%
  );

  --color-campaign-border: #B28247;
  --color-campaign-item-bg: #F7FAFC;
  --color-campaign-item-border-start: #1280CF;
  --color-campaign-item-border-end: #094169;
  --gradient-campaign-item-border: linear-gradient(
    45deg,
    var(--color-campaign-item-border-start) 0%,
    var(--color-campaign-item-border-end) 100%
  );

  /* price */
  --color-price-normal: #0B2A4A;
  --color-price-accent: #C69D2F;

  /* worries */
  --color-worries-bg: #E8F0FA;
  --color-worries-title-stroke: #FFFFFF;
  --color-worries-lead: #0B2A4A;

  /* solution */
  --color-solution-gold-01: #F9E3B5;
  --color-solution-gold-02: #E3CFA5;
  --color-solution-gold-03: #FDF9D9;
  --gradient-solution-gold: linear-gradient(
    45deg,
    var(--color-solution-gold-01) 0%,
    var(--color-solution-gold-02) 29%,
    var(--color-solution-gold-03) 52%,
    var(--color-solution-gold-01) 82%,
    var(--color-solution-gold-02) 100%
  );

  --color-solution-silver-01: #F2F2F2;
  --color-solution-silver-02: #D9D9D9;
  --color-solution-silver-03: #FEFEFE;
  --color-solution-silver-04: #BCBCBC;
  --gradient-solution-silver: linear-gradient(
    45deg,
    var(--color-solution-silver-01) 0%,
    var(--color-solution-silver-02) 29%,
    var(--color-solution-silver-03) 52%,
    var(--color-solution-silver-02) 82%,
    var(--color-solution-silver-04) 100%
  );

  /* package */
  --color-package-bg-start: #E3D4B3;
  --color-package-bg-end: #FFFFFF;
  --gradient-package-bg: linear-gradient(
    180deg,
    var(--color-package-bg-start) 0%,
    var(--color-package-bg-end) 100%
  );

  --color-package-label-text: #FFF496;

  --color-package-price-gold-01: #C69D2F;
  --color-package-price-gold-02: #D9C391;
  --color-package-price-gold-03: #EEDAAC;
  --gradient-package-price-num: linear-gradient(
    180deg,
    var(--color-package-price-gold-01) 0%,
    var(--color-package-price-gold-02) 25%,
    var(--color-package-price-gold-01) 52%,
    var(--color-package-price-gold-03) 79%,
    var(--color-package-price-gold-01) 100%
  );

  --color-package-price-text: #C69D2F;

  --color-package-card-border-01: #B28247;
  --color-package-card-border-02: #D9C391;
  --color-package-card-border-03: #8E5C09;
  --gradient-package-card-border: linear-gradient(
    45deg,
    var(--color-package-card-border-01) 0%,
    var(--color-package-card-border-02) 25%,
    var(--color-package-card-border-03) 52%,
    var(--color-package-card-border-02) 79%,
    var(--color-package-card-border-01) 100%
  );

  --color-package-item-border: #D9C391;
  --color-package-num-bg: #C69D2F;
  --color-package-num-text: #FFFFFF;

  /* attention */
  --color-attention-title-shadow: #FFFFFF;

  /* pageTop */
  --color-pageTop-bg: #0B2A4A;
  --color-pageTop-bg-hover: #071E35;
  --color-pageTop-text: #FFFFFF;

  /* image */
  --image-body-bg: url("../img/bg-water-texture.webp");
}

/* ==============================
  html
============================== */

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

/* ==============================
  body
============================== */

body {
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.7;
  background:
    linear-gradient(
      var(--color-body-bg-overlay),
      var(--color-body-bg-overlay)
    ),
    var(--image-body-bg) center top / contain repeat;
}

/* ==============================
  lp
============================== */

.lp {
  width: 100%;
  max-width: var(--lp-max-width);
  margin-inline: auto;
  background: var(--color-lp-bg);
}

/* ==============================
  section
============================== */

.section {
  padding-top: var(--section-padding-top);
  padding-bottom: var(--section-padding-bottom);
}

/* ==============================
  inner
============================== */

.inner {
  padding-inline: var(--inner-padding);
}

/* ==============================
  img
============================== */

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ==============================
  section title
============================== */

.section__title {
  color: var(--color-navy);
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

/* ==============================
  c-btn
============================== */

.c-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 42px 16px 24px;
  overflow: hidden;
  color: var(--color-cta-text);
  text-decoration: none;
  background: var(--color-cta-bg);
  border-radius: 999px;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.18);
}

.c-btn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -80%;
  width: 28%;
  height: 200%;
  background: rgba(255, 255, 255, 0.35);
  transform: rotate(25deg);
}

.c-btn__label {
  display: block;
  color: var(--color-cta-text);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
}

.c-btn__arrow {
  position: absolute;
  top: 50%;
  right: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  transform: translateY(-50%);
}

.c-btn__arrow::before {
  content: "";
  width: 12px;
  height: 12px;
  border-top: 3px solid var(--color-cta-bg-hover);
  border-right: 3px solid var(--color-cta-bg-hover);
  transform: translateX(-2px) rotate(45deg);
}

.c-btn--pulse {
  animation: btnPulse 1.8s infinite ease-in-out;
  transform-origin: center;
  will-change: transform;
}

@keyframes btnPulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.04);
  }
}

@keyframes shine {
  0% {
    left: -80%;
  }

  100% {
    left: 130%;
  }
}

@media (hover: hover) {
  .c-btn:hover {
    background: var(--color-cta-bg-hover);
  }

  .c-btn:hover::before {
    animation: shine 0.8s;
  }
}

/* ==============================
  c-price
============================== */

.c-price {
  text-align: center;
}

.c-price__normal {
  color: var(--color-price-normal);
}

.c-price__normalNum {
  text-decoration: line-through;
  text-decoration-color: var(--color-price-accent);
}

.c-price__arrow,
.c-price__special {
  color: var(--color-price-accent);
}

/* ==============================
  fade-in
============================== */

.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.is-show {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==============================
  header
============================== */

.header {
  width: 100%;
  max-width: var(--lp-max-width);
  margin-inline: auto;
  padding: 8px var(--inner-padding);
  background: var(--gradient-header-bg);
}

.header__text {
  display: block;
  width: fit-content;
  margin-inline: auto;
  color: transparent;
  font-family: var(--font-base);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-align: center;
  background: var(--gradient-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ==============================
  mainImg
============================== */

.mainImg {
  padding: 0;
}

.mainImg__img {
  width: 100%;
}

/* ==============================
  cta
============================== */

.cta {
  padding-top: var(--cta-padding-top);
  padding-bottom: var(--cta-padding-bottom);
  background: var(--color-lp-bg);
}

.cta--fv {
  padding-top: var(--cta-fv-padding-top);
}

.cta__btnWrap {
  text-align: center;
}

.cta__fingers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}

.cta__finger {
  width: 32px;
  height: auto;
}

.cta__btn {
  margin-inline: auto;
}

/* ==============================
  movie
============================== */

.movie {
  background: var(--color-lp-bg);
}

.movie__wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000000;
  border-radius: 12px;
}

.movie__wrap iframe {
  display: block;
  width: 100%;
  height: 100%;
}

/* ==============================
  campaign
============================== */

.campaign {
  padding-top: 46px;
  background: var(--color-lp-bg);
}

.campaign__box {
  position: relative;
  padding: 28px 16px 34px;
  background: var(--color-white);
  border: 2px solid var(--color-campaign-border);
  border-radius: 14px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14);
}

.campaign__label {
  position: absolute;
  top: -38px;
  left: 50%;
  z-index: 1;
  width: min(94%, 460px);
  padding: 10px 14px 12px;
  color: var(--color-campaign-label-text);
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  background: var(--gradient-campaign-label);
  clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%);
  transform: translateX(-50%);
}

.campaign__label--st{
    font-size: 2.6rem;
}

.campaign__list {
  display: grid;
  gap: 7px;
  margin: 0;
}

.campaign__item {
  padding: 8px 0px;
  color: var(--color-navy);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-align: center;
  border: 2px solid transparent;
  border-radius: 7px;
  background:
    linear-gradient(var(--color-campaign-item-bg), var(--color-campaign-item-bg)) padding-box,
    var(--gradient-campaign-item-border) border-box;
}

.campaign__item--sm {
  font-size: 1.2rem;
}

/* campaign price */

.campaign__price {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: end; 
  justify-content: center; 
  column-gap: 16px; 
  width: fit-content; 
  max-width: 100%; 
  margin-inline: auto; 
  margin-top: 16px;
  color: var(--color-price-normal);
}

.campaign__priceNormal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  line-height: 1;
}

.campaign__priceLabel {
  margin-bottom: 2px;
  color: var(--color-price-normal);
  font-size: 1.2rem;
  line-height: 1;
  white-space: nowrap;
}

.campaign__normalPrice {
  display: flex;
  align-items: flex-end;
  color: var(--color-price-normal);
  line-height: 1;
  white-space: nowrap;
}

.campaign__normalNum {
  color: var(--color-price-normal);
  font-family: var(--font-serif);
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-decoration: line-through;
  text-decoration-color: var(--color-price-accent);
  text-decoration-thickness: 2px;
}

.campaign__normalUnitWrap {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin-left: 2px;
  padding-bottom: 2px;
  color: var(--color-price-normal);
}

.campaign__normalTax {
  color: var(--color-price-normal);
  font-size: 0.8rem;
  line-height: 1;
  white-space: nowrap;
}

.campaign__normalUnit {
  color: var(--color-price-normal);
  font-size: 1.4rem;
  line-height: 1;
  white-space: nowrap;
}

.campaign__arrows {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding-bottom: 14px;
  color: var(--color-price-accent);
  font-size: 1.2rem;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(1px);
}

.campaign__priceSpecial {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-width: 0;
  color: var(--color-price-accent);
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.campaign__specialNum {
  color: var(--color-price-accent);
  font-size: 4.2rem;
  line-height: 0.9;
  letter-spacing: -0.06em;
}

.campaign__specialUnitWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  margin-left: 2px;
  padding-bottom: 3px;
  color: var(--color-price-accent);
}

.campaign__specialTax {
  font-size: 0.8rem;
  line-height: 1;
  white-space: nowrap;
}

.campaign__specialUnit {
  font-size: 2.2rem;
  line-height: 1;
  white-space: nowrap;
}

.campaign__btnWrap {
  margin-top: 18px;
}

.campaign__btn {
  padding-left: 22px;
}

.campaign__btn .c-btn__label {
  font-size: 2rem;
}

.campaign__btn .c-btn__arrow {
  right: 22px;
  width: 30px;
  height: 30px;
}

/* ==============================
  narrow screen
============================== */

@media screen and (max-width: 390px) {
  .campaign__label {
    top: -36px;
  }

  .campaign__price{
    grid-template-columns: 33% 11% 50%;
  }

  .campaign__normalNum {
    font-size: 2.9rem;
  }

  .campaign__normalUnit {
    font-size: 1.3rem;
  }

  .campaign__specialUnit {
    font-size: 2.0rem;
  }
}

@media screen and (max-width: 360px) {
  .header__text {
    font-size: 1.7rem;
  }

  .c-btn {
    padding-right: 72px;
    padding-left: 18px;
  }

  .c-btn__arrow::before {
    width: 13px;
    height: 13px;
    border-top-width: 4px;
    border-right-width: 4px;
  }

  .campaign {
    padding-top: 42px;
  }

  .campaign__box {
    padding-inline: 12px;
  }

  .campaign__label {
    top: -33px;
    width: min(96%, 420px);
  }

  .campaign__priceLabel {
    font-size: 1.1rem;
  }

  .campaign__normalNum {
    font-size: 2.5rem;
  }

  .campaign__normalTax {
    font-size: 0.7rem;
  }

  .campaign__normalUnit {
    font-size: 1.1rem;
  }

  .campaign__specialNum {
    font-size: 4.3rem;
  }

  .campaign__specialTax {
    font-size: 0.7rem;
  }

  .campaign__specialUnit {
    font-size: 1.7rem;
  }
}

/* ============================== 
worries 
============================== */ 
.worries { 
    position: relative;
    padding-top: 36px; 
    padding-bottom: 44px;
    margin-bottom: 44px; 
    overflow: visible; 
    background: var(--color-worries-bg); 
} 

.worries::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -54px;
    width: 100%;
    height: 54px;
    background: var(--color-worries-bg);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.worries__title { 
    padding: 10px 12px; 
    color: var(--color-navy); 
    line-height: 1.45; 
    letter-spacing: 0.03em; 
    background-image: url("../img/worries-title-bg.webp"); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: contain; 
    -webkit-text-stroke: 1px var(--color-worries-title-stroke); 
    paint-order: stroke fill; 
    text-shadow: 2px 2px 8px #ffffff,
    -2px 2px 8px #ffffff,
    2px -2px 8px #ffffff,
    -2px -2px 8px #ffffff
} 

.worries__listBox { 
    position: relative; 
    margin-top: 12px; 
    padding: 18px 14px 22px; 
    background: var(--color-white); 
} 

.worries__listBox::after { 
    content: ""; 
    position: absolute; 
    left: 0; 
    bottom: -54px; 
    width: 100%; 
    height: 54px; 
    background: var(--color-white); 
    clip-path: polygon(0 0, 100% 0, 50% 100%); 
} 

.worries__list { 
    display: grid; gap: 12px; 
} 

.worries__item { 
    display: grid; 
    grid-template-columns: 28px 1fr; 
    column-gap: 8px; align-items: start;
}

.worries__check { 
    width: 30px; 
    margin-top: 3px; 
} 

.worries__itemText { 
    color: var(--color-text); 
    font-size: 1.8rem; 
    font-weight: 700; 
    line-height: 1.65; 
    letter-spacing: 0.01em; 
} 

.worries__red { 
    color: var(--color-red); 
}

.worries__body { 
    margin-top: 63px; 
    color: var(--color-worries-lead); 
    text-align: center; 
} 

.worries__lead { 
    color: var(--color-worries-lead); 
    font-family: var(--font-serif); 
    font-size: 1.8rem; 
    font-weight: 700; 
    line-height: 1.7; 
    letter-spacing: 0.03em; 
} 

.worries__text { 
    margin-top: 20px; 
    color: var(--color-worries-lead); 
    font-size: 1.6rem; 
    text-align: left;
}


/* ==============================
  solution
============================== */

.solution {
  padding-top: 48px;
  padding-bottom: 44px;
  background: var(--color-lp-bg);
}

.solution__title {
  line-height: 1.5;
}

.solution__title-red {
  color: var(--color-red);
}

.solution__cards { 
    display: grid; 
    gap: 16px; 
    margin-top: 16px; 
} 

.solution__card { 
    padding: 14px 10px 12px; 
} 

.solution__card--ivc { 
    background: var(--gradient-solution-gold); 
}

.solution__card--glu { 
    background: var(--gradient-solution-silver); 
} 

.solution__cardTitle { 
    color: var(--color-navy); 
    font-family: var(--font-serif); 
    font-size: 1.8rem; 
    font-weight: 700; 
    line-height: 1.5; 
    letter-spacing: 0.03em; 
    text-align: center; 
} 

.solution__img { 
    width: 100%; 
    margin-top: 8px;
 } 
 
 .solution__cardText { 
    margin-top: 8px; 
    color: var(--color-text); 
    font-size: 1.55rem; 
    font-weight: 500; 
    line-height: 1.55; 
    letter-spacing: 0.01em; 
} 

.solution__red { 
    color: var(--color-red); 
} 

.solution__steps { 
    margin-top: 18px; 
} 

.solution__stepsTitle { 
    color: var(--color-navy); 
    font-family: var(--font-serif); 
    font-size: 2rem; 
    font-weight: 600; 
    line-height: 1.6; 
    text-align: center; 
} 

.solution__step { 
    margin-top: 14px; 
} 

.solution__stepTitle { 
    color: var(--color-navy); 
    font-size: 1.8rem; 
    font-weight: 700; 
    line-height: 1.45; 
    letter-spacing: 0.03em; 
} 

.solution__stepText { 
    margin-top: 4px; 
    color: var(--color-text); 
    font-size: 1.55rem; 
    font-weight: 500; 
    line-height: 1.65; 
    letter-spacing: 0.01em; 
} 

/* solution 390px */ 
@media screen and (max-width: 390px) { 
    .solution { 
        padding-top: 40px; 
        padding-bottom: 40px; 
    } 
    
    .solution__cardTitle { 
        font-size: 1.65rem; 
    } 
    
    .solution__cardText { 
        font-size: 1.45rem; 
    } 

    .solution__stepsTitle { 
        font-size: 1.85rem; 
    } 
    
    .solution__stepTitle { 
        font-size: 1.7rem; 
    } 
    
    .solution__stepText { 
        font-size: 1.45rem; 
    } 
}

/* solution 360px */ 
@media screen and (max-width: 360px) { 
    .solution__card { 
        padding: 12px 9px 11px; 
    } 

    .solution__cardTitle { 
        font-size: 1.45rem; 
    } 
    
    .solution__cardText { 
        font-size: 1.32rem;
    } 
    
    .solution__stepsTitle { 
        font-size: 1.65rem; 
    } 
    
    .solution__stepTitle { 
        font-size: 1.55rem; 
    } 
    
    .solution__stepText { 
        font-size: 1.32rem; 
    } 
}


/* ============================== 
benefit 
============================== */ 
.benefit { 
    padding-top: 40px; 
    padding-bottom: 44px; 
    background: var(--color-white); 
} 

.benefit__title { 
    color: var(--color-navy); 
    font-family: var(--font-serif); 
    font-size: 2rem; 
    font-weight: 700; 
    line-height: 1.65; 
    letter-spacing: 0.08em; 
    text-align: center; 
} 

.benefit__red { 
    display: inline; 
    color: var(--color-red); 
} 

.benefit__list { 
    display: grid; 
    gap: 14px; 
    margin-top: 20px; 
} 

.benefit__item { 
    min-height: 156px; 
    padding: 20px 20px; 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
} 

.benefit__item--business { 
    background-image: url("../img/benefit-business.webp"); 
} 

.benefit__item--mirror { 
    background-image: url("../img/benefit-mirror.webp"); 
} 

.benefit__item--weekend { 
    background-image: url("../img/benefit-weekend.webp"); 
} 

.benefit__content { 
    width: 100%; 
    padding: 14px 18px 16px; 
    background: var(--color-white-overlay-90); 
} 

.benefit__itemTitle { 
    color: var(--color-navy); 
    font-family: var(--font-serif); 
    font-size: 1.9rem; 
    font-weight: 700; 
    line-height: 1.5; 
    letter-spacing: 0.04em; 
    text-align: center; 
} 

.benefit__text { 
    margin-top: 8px; 
    color: var(--color-text); 
    font-size: 1.55rem; 
    font-weight: 500; 
    line-height: 1.65; 
    letter-spacing: 0.01em; 
} 

/* benefit 390px */ 
@media screen and (max-width: 390px) { 
    .benefit { 
        padding-top: 38px; 
        padding-bottom: 42px; 
    } 
    
    .benefit__item { 
        min-height: 152px; 
        padding: 18px 18px; 
    } 
    
    .benefit__itemTitle { 
        font-size: 1.75rem; 
    } 
    
    .benefit__text { 
        font-size: 1.45rem; 
    } 
} 

/* benefit 360px */ 
@media screen and (max-width: 360px) { 
    .benefit { 
        padding-top: 34px; 
        padding-bottom: 38px; 
    } 
    
    .benefit__title { 
        font-size: 1.9rem; 
        letter-spacing: 0.05em; 
    } 
    
    .benefit__list { 
        gap: 12px; 
    } 
    
    .benefit__item { 
        min-height: 142px; 
        padding: 16px 16px; 
    } 
    
    .benefit__content { 
        padding: 12px 14px 14px; 
    } 
    
    .benefit__itemTitle { 
        font-size: 1.6rem; 
    } 
    
    .benefit__text { 
        font-size: 1.32rem; 
    } 
}

/* ============================== 
package 
============================== */ 
.package { 
    padding-top: 0; 
    padding-bottom: 44px; 
    background: var(--gradient-package-bg); 
} 

.package__head { 
    padding: 12px var(--inner-padding) 10px; 
    color: var(--color-package-label-text); 
    text-align: center; 
    background: var(--gradient-header-bg); 
} 

.package__headText { 
    font-family: var(--font-serif); 
    font-size: 2.0rem; 
    font-weight: 700; 
    line-height: 1.45; 
    letter-spacing: 0.04em; 
} 

.package__headTitle { 
    font-family: var(--font-serif); 
    font-size: 2rem; 
    font-weight: 700; 
    line-height: 1.45; 
} 

.package__priceBox { 
    margin-top: 20px; 
    padding: 16px 14px 18px; 
    text-align: center; 
    border: 2px solid transparent; 
    border-radius: 8px; 
    background: linear-gradient(var(--color-white), var(--color-white)) padding-box, var(--gradient-package-card-border) border-box; 
    box-shadow: 0 3px 8px rgba(142, 92, 9, 0.22); 
} 

.package__normal { 
    display: flex; 
    align-items: flex-end; 
    justify-content: center; 
    color: var(--color-price-normal); 
    line-height: 1; 
} 

.package__normalLabel { 
    margin-right: 4px; 
    padding-bottom: 6px; 
    font-size: 1.4rem; 
    line-height: 1; 
} 

.package__normalPrice { 
    display: flex; 
    align-items: flex-end; 
    line-height: 1; 
    white-space: nowrap; 
} 

.package__normalNum { 
    color: var(--color-price-normal); 
    font-family: var(--font-serif); 
    font-size: 3.5rem; 
    font-weight: 500; 
    line-height: 0.9; 
    letter-spacing: -0.04em; 
    text-decoration: line-through; 
    text-decoration-color: var(--color-price-accent); 
    text-decoration-thickness: 2px; 
} 

.package__normalUnitWrap { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin-left: 2px; 
    padding-bottom: 3px; 
} 

.package__normalTax { 
    font-size: 0.8rem; 
    line-height: 1; 
} 

.package__normalUnit { 
    font-size: 1.4rem; 
    line-height: 1; 
} 

.package__triangle { 
    width: 0; 
    height: 0; 
    margin: 8px auto 6px; 
    border-top: 10px solid var(--color-price-accent); 
    border-right: 8px solid transparent; 
    border-left: 8px solid transparent; 
} 

.package__specialLabel { 
    color: var(--color-package-price-text); 
    font-family: var(--font-serif); 
    font-size: 1.6rem; 
    font-weight: 500; 
    line-height: 1.4; 
    letter-spacing: 0.04em; 
} 

.package__specialPrice { 
    display: flex; 
    align-items: flex-end; 
    justify-content: center; 
    margin-top: 2px; 
    font-family: var(--font-serif); 
    line-height: 1; 
} 

.package__specialNum { 
    color: transparent; 
    font-size: 6.4rem; 
    font-weight: 500; 
    line-height: 0.9; 
    letter-spacing: -0.06em; 
    background: var(--gradient-package-price-num); 
    -webkit-background-clip: text; 
    background-clip: text; 
} 

.package__specialUnitWrap { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin-left: 3px; 
    padding-bottom: 8px; 
    color: var(--color-package-price-text);
 } 
 
 .package__specialTax { 
    font-size: 0.8rem; 
    line-height: 1; 
} 

.package__specialUnit { 
    font-size: 2.2rem; 
    line-height: 1; 
} 

.package__includeTitle { 
    margin-top: 20px; 
    color: var(--color-navy); 
    font-family: var(--font-serif); 
    font-size: 2.0rem; 
    font-weight: 700; 
    line-height: 1.5;     
    letter-spacing: 0.12em; 
    text-align: center; 
} 

.package__list { 
    display: grid; 
    gap: 12px; 
    margin-top: 10px; 
} 

.package__item { 
    display: grid; 
    grid-template-columns: 64px 32px 1fr; 
    column-gap: 5px; 
    align-items: center; 
    min-height: 72px; 
    padding: 5px; 
    background: var(--color-white); 
    border: 1px solid var(--color-package-item-border); 
    border-radius: 4px; 
    box-shadow: 0 2px 6px rgba(142, 92, 9, 0.16); 
} 

.package__img { 
    width: 64px; 
    height: 64px; 
    object-fit: cover; 
    border-radius: 50%; 
} 

.package__num { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 30px; 
    height: 30px; 
    color: var(--color-package-num-text); 
    font-family: var(--font-serif); 
    font-size: 1.4rem; 
    font-weight: 700; 
    line-height: 1; 
    background: var(--color-package-num-bg); 
    border-radius: 50%; 
} 

.package__text { 
    color: var(--color-text); 
    font-size: 1.6rem; 
    font-weight: 500; 
    line-height: 1.55; 
    letter-spacing: 0.01em; 
} 

.package__note { 
    margin-top: 10px; 
    color: var(--color-text); 
    font-size: 1.6rem; 
    font-weight: 500; 
    line-height: 1.6; 
}    
 /* package 390px */ 
  @media screen and (max-width: 390px) { 
    .package__headText { 
        font-size: 1.85rem; 
    } 
    
    .package__headTitle { 
        font-size: 1.9rem; 
    } 
    
    .package__normalNum { 
        font-size: 3.2rem; 
    } 
    
    .package__specialNum { 
        font-size: 5.8rem; 
    } 
    
    .package__includeTitle { 
        font-size: 1.85rem; 
    } 
    
    .package__text { 
        font-size: 1.42rem; 
    } 
} 

/* package 360px */
 @media screen and (max-width: 360px) { 
    .package { 
        padding-bottom: 40px; 
    } 
    
    .package__head { 
        padding-top: 10px; 
        padding-bottom: 9px; 
    } 
    
    .package__headText { 
        font-size: 1.65rem; 
    } 
    
    .package__headTitle { 
        font-size: 1.7rem; 
    } 
    
    .package__priceBox { 
        margin-top: 18px; 
        padding: 15px 12px 17px; 
    } 
    
    .package__normalLabel { 
        font-size: 1.2rem;
    }  
    
    .package__normalNum { 
        font-size: 2.8rem; 
    } 

    .package__normalUnit { 
        font-size: 1.2rem; 
    } 
    
    .package__specialLabel { 
        font-size: 1.35rem; 
    } 
    
    .package__specialNum { 
        font-size: 5.0rem; 
    }
    
    .package__specialUnit { 
        font-size: 1.9rem; 
    } 
    
    .package__includeTitle { 
        font-size: 1.65rem; 
    } 
    
    .package__item { 
        grid-template-columns: 56px 28px 1fr; 
        column-gap: 7px; 
        min-height: 66px; 
        padding: 7px 9px 7px 7px; 
    } 
    
    .package__img { 
        width: 56px; 
        height: 56px; 
    } 
    
    .package__num { 
        width: 28px; 
        height: 28px; 
        font-size: 1.25rem;
     } 
     
     .package__text { 
        font-size: 1.25rem; 
    } 
    
    .package__note { 
        font-size: 1.2rem;
     } 
    }



/* ==============================
  priceCta
============================== */

.priceCta {
  padding-top: 58px;
  padding-bottom: 42px;
  background-image: url("../img/price-cta-bg.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.priceCta__box {
  position: relative;
  padding: 20px 18px 25px;
  background: var(--color-white);
  border: 2px solid var(--color-campaign-border);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(142, 92, 9, 0.24);
}

.priceCta__label {
  position: absolute;
  top: -38px;
  left: 50%;
  z-index: 1;
  width: min(94%, 460px);
  padding: 10px 14px 12px;
  color: var(--color-campaign-label-text);
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  background: var(--gradient-campaign-label);
  clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%);
  transform: translateX(-50%);
}

.priceCta__label--st{
    font-size: 2.6rem;
}

.priceCta__price {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: end; 
  justify-content: center; 
  column-gap: 16px; 
  width: fit-content; 
  max-width: 100%; 
  margin-inline: auto; 
  color: var(--color-price-normal);
  margin-top: 16px;
}

.priceCta__priceNormal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  line-height: 1;
}

.priceCta__priceLabel {
  margin-bottom: 2px;
  color: var(--color-price-normal);
  font-size: 1.2rem;
  line-height: 1;
  white-space: nowrap;
}

.priceCta__normalPrice {
  display: flex;
  align-items: flex-end;
  color: var(--color-price-normal);
  line-height: 1;
  white-space: nowrap;
}

.priceCta__normalNum {
  color: var(--color-price-normal);
  font-family: var(--font-serif);
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-decoration: line-through;
  text-decoration-color: var(--color-price-accent);
  text-decoration-thickness: 2px;
}

.priceCta__normalUnitWrap {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin-left: 2px;
  padding-bottom: 2px;
  color: var(--color-price-normal);
}

.priceCta__normalTax {
  color: var(--color-price-normal);
  font-size: 0.8rem;
  line-height: 1;
  white-space: nowrap;
}

.priceCta__normalUnit {
  color: var(--color-price-normal);
  font-size: 1.4rem;
  line-height: 1;
  white-space: nowrap;
}

.priceCta__arrows {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding-bottom: 14px;
  color: var(--color-price-accent);
  font-size: 1.2rem;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(1px);
}

.priceCta__priceSpecial {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-width: 0;
  color: var(--color-price-accent);
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.priceCta__specialNum {
  color: var(--color-price-accent);
  font-size: 4rem;
  line-height: 0.9;
  letter-spacing: -0.06em;
}

.priceCta__specialUnitWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  margin-left: 2px;
  padding-bottom: 3px;
  color: var(--color-price-accent);
}

.priceCta__specialTax {
  font-size: 0.8rem;
  line-height: 1;
  white-space: nowrap;
}

.priceCta__specialUnit {
  font-size: 2.2rem;
  line-height: 1;
  white-space: nowrap;
}

.priceCta__btnWrap {
  margin-top: 18px;
}

.priceCta__btn {
  padding-left: 22px;
}

.priceCta__btn .c-btn__label {
  font-size: 2rem;
}

.priceCta__btn .c-btn__arrow {
  right: 22px;
  width: 30px;
  height: 30px;
}

/* priceCta 390px */
@media screen and (max-width: 390px) {
  .priceCta {
    padding-top: 54px;
    padding-bottom: 40px;
  }

  .priceCta__label {
    top: -40px;
  }

  .priceCta__price {
    grid-template-columns: 33% 11% 50%;
  }

  .priceCta__normalNum {
    font-size: 2.9rem;
  }

  .priceCta__normalUnit {
    font-size: 1.3rem;
  }

  .priceCta__specialNum {
    font-size: 5.0rem;
  }

  .priceCta__specialUnit {
    font-size: 2.0rem;
  }
}

/* priceCta 360px */
@media screen and (max-width: 360px) {
  .priceCta {
    padding-top: 50px;
    padding-bottom: 38px;
  }

  .priceCta__label {
    top: -36px;
    width: min(96%, 420px);
  }

  .priceCta__priceLabel {
    font-size: 1.1rem;
  }

  .priceCta__normalNum {
    font-size: 2.5rem;
  }

  .priceCta__normalTax {
    font-size: 0.7rem;
  }

  .priceCta__normalUnit {
    font-size: 1.1rem;
  }

  .priceCta__specialNum {
    font-size: 4.3rem;
  }

  .priceCta__specialTax {
    font-size: 0.7rem;
  }

  .priceCta__specialUnit {
    font-size: 1.7rem;
  }

  .priceCta__btn .c-btn__arrow {
    right: 14px;
  }
}


/* ============================== 
promise 
============================== */ 
.promise { 
  padding-top: 48px; 
  padding-bottom: 48px; 
  background: var(--color-white); 
} 

.promise__body { 
  margin-top: 22px; 
} 

.promise__text { 
  color: var(--color-text); 
  font-size: 1.6rem; 
  font-weight: 500; 
  line-height: 1.55; 
  letter-spacing: 0.02em; 
} 

/* promise 390px */ 
@media screen and (max-width: 390px) { 
  .promise { 
    padding-top: 44px; 
    padding-bottom: 44px; 
  } 
  
  .promise__text { 
    font-size: 1.55rem; 
  } 
} 

/* promise 360px */ 
@media screen and (max-width: 360px) { 
  .promise { 
    padding-top: 40px; 
    padding-bottom: 40px; 
  } 
  
  .promise__body { 
    margin-top: 18px; 
  } 
  
  .promise__text { 
    font-size: 1.42rem; 
    line-height: 1.55; 
  } 
}


/* ============================== 
attention 
============================== */ 
.attention { 
  padding-top: 48px; 
  padding-bottom: 48px; 
  background-image: url("../img/attention-bg.webp"); 
  background-repeat: no-repeat; 
  background-position: left; 
  background-size: cover; 
} 

.attention__title { 
  color: var(--color-navy); 
  font-family: var(--font-serif); 
  font-weight: 700; 
  line-height: 1.75; 
  text-align: center;   
  -webkit-text-stroke: 1px #ffffff;
  paint-order: stroke fill;
  text-shadow: 0 0 14px var(--color-attention-title-shadow), 0 0 13px var(--color-attention-title-shadow), 0 0 20px var(--color-attention-title-shadow); 
} 

.attention__body { 
  margin-top: 28px; 
  padding: 28px 24px; 
  background: var(--color-white-overlay-90); 
} 

.attention__text { 
  color: var(--color-text); 
  font-size: 1.75rem; 
  font-weight: 500; 
  line-height: 1.55; 
  letter-spacing: 0.02em; 
} 

.attention__red { 
  color: var(--color-red); 
}

/* attention 390px */ 
@media screen and (max-width: 390px) { 
  .attention { 
    padding-top: 44px; 
    padding-bottom: 44px; 
  } 
  
  .attention__title { 
    font-size: 2.2rem; 
    line-height: 1.7; 
  } 
  
  .attention__body { 
    margin-top: 24px; 
    padding: 26px 22px; 
  } 
  
  .attention__text { 
    font-size: 1.6rem; 
  } 
} 

/* attention 360px */ 
@media screen and (max-width: 360px) { 
  .attention { 
    padding-top: 40px; 
    padding-bottom: 40px; 
  } 
  
  .attention__title { 
    line-height: 1.7; 
  } 
  
  .attention__body { 
    margin-top: 22px; 
    padding: 24px 18px; 
  } 
  
  .attention__text { 
    font-size: 1.45rem; 
    line-height: 1.55; 
  } 
}


/* ============================== 
pageTop 
============================== */ 
.pageTop { 
  position: fixed; 
  right: 16px; 
  bottom: 16px; 
  z-index: 20; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width: 56px; 
  height: 56px; 
  color: var(--color-pageTop-text); 
  font-family: var(--font-serif); 
  font-size: 1.4rem; 
  font-weight: 700; 
  line-height: 1; 
  background: var(--color-pageTop-bg); 
  border-radius: 50%; 
  box-shadow: 0 4px 10px rgba(11, 42, 74, 0.24); 
  opacity: 0; 
  visibility: hidden; 
  transform: translateY(12px); 
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; 
} 

.pageTop.is-show { 
  opacity: 1; 
  visibility: visible; 
  transform: translateY(0); 
} 

@media (hover: hover) { 
  .pageTop:hover { 
    background: var(--color-pageTop-bg-hover); 
  } 
} 

/* pageTop 360px */ 
@media screen and (max-width: 360px) { 
  .pageTop { 
    right: 12px; 
    bottom: 12px; 
    width: 50px; 
    height: 50px; 
    font-size: 1.25rem; 
  } 
}


/* ============================== 
footer 
============================== */ 
.footer { 
  width: 100%; 
  max-width: var(--lp-max-width); 
  margin-inline: auto; 
  padding: 20px var(--inner-padding) 22px; 
  color: var(--color-text); 
  text-align: center; 
  background: var(--color-lp-bg); 
} 

.footer__copyright { 
  display: block; 
  color: var(--color-text); 
  font-size: 1.2rem; 
  font-weight: 400; 
  line-height: 1.5; 
  letter-spacing: 0.02em; 
} 

/* footer 360px */ 
@media screen and (max-width: 360px) { 
  .footer { 
    padding-top: 18px; 
    padding-bottom: 20px; 
  } 
  
  .footer__copyright { 
    font-size: 1.1rem; 
  } 
}