@charset "UTF-8";
/* CSS Document */

.sectionInner {
 padding: 0 3rem;
  margin: 0 auto;
}
.enTitle {
  font-family: var(--font-family-eng);
  font-size: 3.6rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--main-color);
}
main h2 {
  font-family: var(--font-family-jp);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--main-color);
  letter-spacing: 0.04em;
 margin: 2rem auto 2.5rem;
}

/* ============================================
   フェードインアニメーション
   ============================================ */
.js-fadeIn {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--fade-duration) ease, transform var(--fade-duration) ease;
}
.js-fadeIn.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   MV（メインビジュアル）
   ============================================ */
.mvSec,
.brandSec {
  width: min(100%, 750px);
  margin: 0 auto;
}
.mvSec h1 {
  margin: 0;
}
.mvSec img {
  width: 100%;
}
/* ============================================
   ブランドセクション
   ============================================ */

.brandSec {
  position: relative;
  min-height: min(226.133vw, 1726px);
  overflow: hidden;
}
.brandSec .sectionInner {
  position: relative;
  z-index: 1;
  padding-top: min(7.2vw, 54px);
  padding-left: min(7.333vw, 55px);
  padding-right: min(7.333vw, 55px);
}
.brandText {
  line-height: 1.95;
  letter-spacing: 0.1em;
}
.brandPhoto {
  position: absolute;
  z-index: 0;
  top: max(-3.333vw, -25px);
  left: 50%;
  width: 100%;
  height: min(230.133vw, 1726px);
  max-width: none;
  object-fit: cover;
  transform: translateX(-50%);
}
/* ============================================
   選ばれる理由セクション
   ============================================ */
.reasonArea {
  padding: 4rem 0 5rem;
  background-image: linear-gradient(-180deg, #e6f2ff 0%, #dce4f4);
}
.reasonArea h2{
  font-size: 2.4rem;
  margin: 1rem auto 2.5rem;
}
.reasonArea .sectionInner {
  width: 100%;
}
.reasonBlock {
  margin: 0 0 54px;
}
.reasonBlock:last-of-type {
  margin-bottom: 30px;
}
.reasonImage {
  position: relative;
  width: 100%;
  margin: 0 0 26px;
}
.reasonImage > img:not(.pointLabel) {
  width: 100%;
  aspect-ratio: 700 / 404;
  object-fit: cover;
}
.reasonImage .pointLabel {
  position: absolute;
  left: -30px;
  bottom: 0;
  width: 240px;
  max-width: 68.6%;
  height: auto;
}
.reasonBlock h3 {
  margin: 0 auto 1rem;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--main-color);
}
.reasonBlock p {
  margin: 0;
  line-height: 1.9;
  letter-spacing: 0.1em;
}
.reasonBlock sup {
  position: relative;
  right: 1em;
  font-size: 0.6em;
  line-height: 0;
}
.reasonRate {
  display: inline;
  color: var(--main-color);
  font-weight: 800;
  font-size: 1.9rem;
  background: linear-gradient(transparent 63%, var(--accent-color) 63%);
}
.reasonRate sup{
  right: 0;
}
.reasonRate span {
    margin-right: 2px;
    font-size: 3rem;
}
.noteText {
  margin-top: 2rem;
  font-size: 1.0rem;
  line-height: 1.6;
}

/* ============================================
   特典セクション
   ============================================ */
.giftArea {
  padding: 5rem 0 5rem;
  background: var(--main-color);
  color: #fff;
}
.giftArea .enTitle,
.giftArea h2 {
  color: #fff;
}
.giftArea h2 {
  font-size: 2.4rem;
  line-height: 1.7;
  margin: 1rem auto 0;
}
.giftArea h2 span{
  font-size: 2rem;
  display: inline-block;
  margin: 0 auto 1.2rem;
}
.giftLead {
  position: relative;
  margin: 3rem auto 0;
  max-width: 320px;
  display: block;
  font-size: 1.5rem;
  line-height: 1.7;
  text-align: center;
}
.giftLead::before,
.giftLead::after {
  content: "";
  position: absolute;
  top: 1.5rem;
  width: 1px;
  height: 4rem;
  background: #fff;
}
.giftLead::before {
  left: 0;
  transform: rotate(-16deg);
}
.giftLead::after {
  right: 0;
  transform: rotate(16deg);
}
.giftCard {
  position: relative;
  margin-top: 6.5rem;
  padding: 4rem 2rem 2em;
  background: #fff;
  color: var(--text-color);
  text-align: center;
}
.giftLabel {
  position: absolute;
  left: 50%;
  top: -4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14rem;
  height: 7rem;
  transform: translateX(-50%);
  border-radius: 9rem 9rem 0 0;
  background: #fff;
  color: var(--main-color);
  font-family: var(--font-family-eng);
  font-size: 2rem;
  letter-spacing: 0.08em;
}
.giftCard h3 {
  padding: 0.6rem 0;
  background: #eef1f7;
  color: var(--main-color);
  font-size: 2rem;
  font-weight: 700;
}
.giftCard p {
  text-align: left;
}
.giftPrice {
  color: var(--text-color);
  font-size: 3rem;
  font-weight: 700;
  text-align: center !important;
  margin: 0 auto 1.5rem;
}
.giftPrice span.price{
  color: var(--main-color);
  font-size: 3rem;
}
.giftPrice span {
  font-size: 8rem;
  line-height: 0.8;
}
.giftCard sup {
  font-size: 1rem;
  color: var(--text-color);
  vertical-align: super;
  line-height: 1.4;
}
.pointCard h3 {
  background: none;
  color: var(--text-color);
  font-size: 3rem;
  letter-spacing: 0.1em;
}
.giftSub {
  margin-top: 0.6rem;
  text-align: center !important;
  font-size: 1.6rem;
  font-weight: 700;
}
.pointPrice {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: var(--main-color);
  font-size: 7.5rem;
  font-weight: 800;
  text-align: center !important;
}
.pointPrice span {
  font-size: 3rem;
 margin: 0 0 15px 0;
}
.pointPrice sup{
  top: -2em;
}
.addressNote {
  padding: 1.8rem;
  background: #edf1f8;
}
.addressNote p {
  font-size: 1.0rem;
  line-height: 1.75;
}
.giftNotes {
  margin-top: 2rem;
  font-size: 1.0rem;
  line-height: 1.7;
}
.productCard h3{
  background: none; 
}
.productImg {
  width: 100%;
  height: 100%;
  transform: scale(1.3);
  margin: 4rem auto;
}
/* ============================================
   入会特典W適用セクション
   ============================================ */
.campaignArea {
  padding: 5rem 0 5rem;
  background-image: linear-gradient(-180deg, #e6f2ff 0%, #dce4f4);
}
.campaignArea h2 {
  font-size: 2.4rem;
  line-height: 1.7;
  margin: 1rem auto 2.5rem;
}
.campaignNote {
  margin-top: 3.2rem;
  font-size: 1.85rem;
  line-height: 1.65;
}
/* 適用条件テキストエリア */
.benefitSec__terms {
  padding: 3rem 0 0;
  font-size: 1.0rem;
}
.benefitSec__termsList {
  padding-left: 1.2em;
  margin-bottom: 1em;
}
.benefitSec__termsList li {
  list-style: disc;
  line-height: 1.5;
}
.benefitSec__termsList li:last-child {
  margin-bottom: 0;
}
.benefitSec__termsNote {
  font-size: 1.1rem;
  color: var(--note-color);
  margin-top: 1em;
  line-height: 1.7;
}

/* ============================================
   紹介の流れセクション
   ============================================ */
.flowArea {
  padding: 5rem 0 5rem;
  background-image: linear-gradient(177deg, #8ba6d21a 0%, #2b5caa1a);

}
.flowArea h2 {
  font-size: 2.4rem;
  line-height: 1.7;
  margin: 1rem auto 2.5rem;
}
.flowList {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.flowList::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 100px; /* 04の丸より下へ伸びないように調整 */
  left: 30px;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(40, 74, 159, 1);
}
.flowList li {
  position: relative;
  z-index: 1;
  justify-content: center;
  display: flex;
  gap: 16px;
  margin: 0 0 28px;
}
.flowList li:last-child {
  margin-bottom: 0;
}
.flowList li > span {
  position: relative;
  z-index: 1;
  flex: 0 0 60px;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: var(--main-color);
  background: #DFE6F3;
 font-family: var(--font-family-eng);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
}
.flowList li > div {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}
.flowList h3 {
  margin: 0 0 8px;
  color: var(--main-color);
  font-size: 2rem;
  font-weight: 700;
}
.flowList p {
  margin: 0;
  line-height: 1.75;
}
.flowList .flowNote {
  margin-top: 1.5rem;
  font-size: 1.2rem;
}
.flowBadge {
  display: block;
  max-width: 100%;
  margin: 2rem auto 0;
  padding: 1rem 0;
  border-radius:50rem;
  color: var(--main-color);
  background: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}

/* ============================================
   LAVAセクション
   ============================================ */
.lavaArea {
  padding: 3rem 0 3rem;
  background: #fff;
}
.lavaArea h2 {
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  padding-bottom: 3.6rem;
  color: var(--main-color);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
}
.lavaArea h2::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.5rem;
  height: 2px;
  background: var(--sub-color);
}
.lavaArea h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.6rem;
  width: 1.8rem;
  height: 1.8rem;
  transform: translateX(-50%) rotate(45deg);
  border-right: 2px solid var(--sub-color);
  border-bottom: 2px solid var(--sub-color);
  background: #fff;
}
.lavaArea p {
  font-size: 1.6rem;
  margin-top: 2rem;
  line-height: 1.7;
  letter-spacing: 0.08em;
}
.lavaArea .lavaNote {
  text-align: right;
  font-size: 1.0rem ;
}
/* ============================================
   CTAエリア
   ============================================ */
.ctaArea {
  width: 90%;
    margin: 0 auto 8rem;
}
.ctaArea a {
  position: relative;
  width: 100%;
  padding: 2rem 2.5rem;
  border: 3px solid #fff;
  border-radius: 7.1rem;
  background: linear-gradient(84deg, #35569a 3%, #644490 98%);
  box-shadow: 0.4rem 0.4rem 0.8rem rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 2.3rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-align: center;
}
.ctaArea a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2.5rem;
  width: 1.5rem;
  height: 1.5rem;
  transform: translateY(-50%) rotate(-45deg);
  border-right: 0.2rem solid #fff;
  border-bottom: 0.2rem solid #fff;
}

/* ============================================
   追従型CTAボタン
   ============================================ */
.floatingCta {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9999;
  line-height: 0;
  height: auto;  /* 高さを自動調整 */
}
.floatingCta-btn {
  display: block;
  width: 130px;
}
.floatingCta img {
  width: 100%;
  height: auto;
}

/* ============================================
   レスポンシブ（PC）
   ============================================ */
/* 適用条件テキスト PC */
@media screen and (min-width: 500px) {
  .enTitle{
    font-size: 4.6rem;
  } 
  main h2,.reasonArea h2,.giftArea h2,.campaignArea h2,.flowArea h2{
    font-size: 2.6rem;
  }
  .brandText {
    font-size: 2rem;
  }
  .brandSec{
    min-height: min(198.133vw, 1400px);
  }
.brandPhoto {
   top: max(-30.333vw, -185px);
}
  .giftLead {
  font-size: 1.8rem;
    max-width: 380px;
}
  .giftLead::before, .giftLead::after {
    top: 2.5rem;
}
}