/* =====================
　レスポンシブ必須base
===================== */

*{box-sizing:border-box;}


/* --- 写真PC・スマホ切り替え --- */
/* 初期状態（スマホ優先） */
.img-pc{
    display:none;
}

.img-sp{
    display:block;
    width:100%;
    margin-top:15px;
    border-radius:12px;
    box-shadow:0 20px 40px rgba(0,0,0,0.1);
	margin-bottom:24px;
}

/* PC表示 */
@media screen and (min-width:768px){

.img-pc{
    display:block;
    width:45%;
    border-radius:12px;
    box-shadow:0 25px 60px rgba(0,0,0,0.08);
}

.img-sp{
    display:none;
}

}



/* =====================
　H1
===================== */

.page-title-area{
  text-align:center;
  padding:30px 20px 0px;
}

.main-title{
  font-size:26px;
  color:#002f1e;
  line-height:1.4;
  margin-bottom:10px;
}

.brand-title{
  font-size:36px;
  font-weight:700;
  letter-spacing:0.06em;
}

.brand-kana{
  display:block;
  font-size:13px;
  color:#777;
  margin-top:4px;
}

.method-note{
  margin-top:8px;
  font-size:13px;
  color:#777;
  text-align:center;
  line-height:1.6;
}


/* =====================
　lead-title
===================== */

.lead-title {
  display: inline-block;        /* 文字幅＋パディング */
  background-color:#fdf3f4;
  padding: 24px 36px;
  border-radius: 8px;
  margin-top: 50px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  /* PCでは中央寄せ */
  text-align:center;
}

/* =====================
　レスポンシブ（スマホ）
===================== */
@media screen and (max-width:767px){

  .page-title-area{
    text-align:center;
    padding:20px 20px 0px;
  }

  .main-title{
    font-size:20px;
  }

  .brand-title{
    font-size:28px;
  }

  /* スマホはページ幅いっぱいに */
  .lead-title{
    display: block;       /* ページ幅いっぱいに広げる */
    width: auto;          /* 幅制御不要 */
    margin-left: 0;
    margin-right: 0;
    padding: 12px 20px;   /* 少し横余白を広げてもOK */
  }

}


/* =====================
　共通 レスポンシブ切替
===================== */

/* PCスマホ表示切替 */

/* 画像 */
.disp-pc{display:none;}
.disp-sp{display:block;}

@media (min-width:768px){
.disp-sp{display:none;}
.disp-pc{display:block;}
}

/* 文章 */
.letter-pc{display:none;}
.letter-sp{display:inline;}

@media (min-width:768px){
.letter-sp{display:none;}
.letter-pc{display:inline;}
}



/* =====================
　スマホのみ改行文字
===================== */

.mobile-br {
    display: none;      /* PCは非表示 */
}

@media screen and (max-width: 767px) {
    .mobile-br {
        display: inline;
    }
    .mobile-br::after {
        content: "\A";      /* 改行文字 */
        white-space: pre;   /* 改行を反映 */
    }
}


/* =====================
　PCのみ改行文字
===================== */

.pc-br{
  display:inline;
}

@media (max-width:767px){
  .pc-br{
    display:none;
  }
}


/* =====================
　改行なし
===================== */

.nowrap{
  white-space:nowrap;
}



/* --------------------------------------------------------- */
/* --- 画像・テキストアニメーション(スマホ環境では非動作) --- */

/* 初期状態は普通表示（スマホ） */
.fade-left,
.fade-right{
    opacity:1;
    transform:none;
}

/* PCのみアニメーション適用 */
@media screen and (min-width:768px){

.fade-left,
.fade-right{
    opacity:0;
    transition: all 0.8s ease;
}

.fade-left{
    transform:translateX(-60px);
}

.fade-right{
    transform:translateX(60px);
}

.fade-in{
    opacity:1;
    transform:translateX(0);
}

}


/* --------------------------------------------------------- */
/* --- 表示各部調整 --- */


/* =====================
   ヘッダー
===================== */

.logo{
    font-size:18px;
    font-weight:bold;
    color:#71151A;
}

/* .spacer{ height:70px; }  */



/* =====================
   ヘッダーロゴ・ボタン
===================== */

.logo-img{
    height:40px;
}

.cta-img{
    height:35px;
}

@media screen and (min-width:768px){

.logo-img{
    height:70px;
}

.cta-img{
    height:70px;

}

/* PCボタン hover用 */
.disp-pc.cta-img{
    transition:all .25s ease;
}

.disp-pc.cta-img:hover{
    transform:translateY(-3px);
    filter:brightness(1.08);
}

}


/* =====================
   セクション共通
===================== */
.section{
    width:100%;
    padding:80px 0;
}

@media screen and (max-width:767px){
.section{
    padding:30px 0;
}
}

.section-inner{
    max-width:1100px;
    margin:0 auto;
    padding:0 20px;
    box-sizing:border-box;   /* 横ずれ防止 */
}

.section p{
    margin-bottom:20px;
}



/* セクション見出し */
.section h2 {
  color:#71151A;
  font-size:26px;        /* 見出しサイズ */
  font-weight:700;       /* 太さ調整 */
  line-height:1.4;       /* 行間 */
  margin-bottom:24px;    /* 下の文章との余白 */
  padding-left:18px;     /* 左ラインの余白 */
  border-left:6px solid #71151A; /* キーカラーに統一 */
}

/* 強調用span */
.lead {
  font-size:20px;
  font-weight:600;       /* 太め */
  display:inline-block;
  margin:0 0 0 0;
}

/* マーカー */
.marker {
  background: linear-gradient(transparent 60%, #fff4a8 60%);
  font-weight:600;
  border-radius:6px;     /* ラインの角を丸める */
}


/* --------------------------------------------------------- */
/* =====================
   セクション個別
===================== */

/* --- セクション2専用スタイル --- */

.features-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:20px 0;
}

/* --- 並列box --- */
.feature {
  flex: 1 1 calc(50% - 20px);
  background: #8e1d26;
  color: #fff;
  padding:14px 2px;
  border-radius: 12px;
  font-weight:600;
  text-align:center;
  font-size:16px;
  letter-spacing:0.05em;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
  min-width:0;
  /* 折り返しなしの場合↓ */
  /* white-space:nowrap; */
}

.feature:hover {
  transform:translateY(-3px);
}

@media screen and (min-width:768px){
  .features-grid{
    grid-template-columns:1fr 1fr 1fr 1fr;
  }
}

/* セクション2専用リード文 */
.lead-s2 {
  font-weight:600;
  font-size:20px;
  display:inline-block;
  margin-top:12px;
  color:#71151A; /* キーカラーに統一 */
}



/* フローセクション専用 */
.flow-section {
  background: #fff;
  padding: 60px 20px 100px;
  text-align: center;
  border-top: 2px solid rgba(0,47,30,0.15);
  border-bottom: 2px solid rgba(0,47,30,0.15);
}

.section-title {
  font-size: 28px;
  color: #002f1e;
  margin-bottom: 40px;
  font-weight: bold;
}

.flow-steps {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.flow-step {
  background: #f7f7f7;
  border-radius: 14px;
  padding: 28px 20px;
  width: 280px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,47,30,0.08);
  border-top: 2px solid #002f1e;    /* カード上部装飾 */
}

.step-number {
  font-size: 26px;
  font-weight: bold;
  color: #002f1e;
  margin-bottom: 10px;
}

.flow-step h3 {
  font-size: 18px;
  color: #002f1e;
  margin-bottom: 10px;
}

.flow-step p {
  font-size: 14px;
  color: #333;
  line-height: 1.8;

  /* 中央ブロック化（ズレ防止の本質） */
  max-width: 220px;
  margin: 0 auto 15px;
}

.step-icon {
  margin-top: 10px;
}

/* スマホ */
@media (max-width: 767px) {
  .flow-steps {
    flex-direction: column;
    gap: 20px;
  }

  .flow-step {
    width: 100%;
  }
}



/* セクション3専用スタイル */

.logic-line{
    position:relative;
    display:inline-block;
    padding-left:18px;
    margin:8px 0;    /* セクションlogic余白 */
    font-weight:600;
    background: linear-gradient(transparent 60%, #fff4a8 60%);
    border-radius:6px;    /* ラインの角を丸める */
}

/* ドット */
.logic-line::before{
    content:"";
    position:absolute;
    left:0;
    top:0.6em;
    width:6px;
    height:6px;
    background:#002f1e;
    border-radius:50%;
}

/* PCのみアニメーション */
@media screen and (min-width:768px){

.logic-line{
    opacity:0;
    transform:translateY(15px);
    transition: all 0.8s ease;
}

.logic-line.fade-in{
    opacity:1;
    transform:translateY(0);
}

/* 順番 */
.logic-line.fade-in:nth-of-type(1){transition-delay:0.2s;}
.logic-line.fade-in:nth-of-type(2){transition-delay:0.4s;}
.logic-line.fade-in:nth-of-type(3){transition-delay:0.6s;}
.logic-line.fade-in:nth-of-type(4){transition-delay:0.8s;}
}



/* セクション4専用 */

.method-title{
  font-size:20px;
  font-weight:600;
  color:#71151A;
}

.method-title2{
  font-weight:600;
  color:#71151A;
}

.method-title3{
  font-size:20px;
  font-weight:600;
}



/* セクション5専用 */

.issue-item{
  position:relative;
  display:block;
  padding-left:28px;
  margin-bottom:10px;
  font-size:16px;
  line-height:1.8;
  color:#002f1e;
}

.issue-item::before{
  content:"\2713";   /* ←チェックマーク */
  position:absolute;
  left:0;
  top:2px;
  width:18px;
  height:18px;
  background:#002f1e;
  color:#fff;
  font-size:12px;
  text-align:center;
  line-height:18px;
  border-radius:50%;
  font-weight:bold;
}

.issue-list{
  padding:0;
  margin:0 0 16px 0;
  list-style:none;
}

.text p {
  margin-bottom: 16px;
}

.text p span.method-title3 {
  display: inline-block;
  margin-top: 16px;
  font-size: 20px;
  font-weight: 600;
  color: #002f1e;
}



/* セクション6専用 */

.method-highlight{
  display:inline-block;
  margin-top:22px;
  padding:14px 22px;
  background:#71151A;
  color:#ffffff;
  line-height:2.0;
  border-radius:0px;
}


.inst-name{
  font-size:22px;
  font-weight:700;
  letter-spacing:0.05em;
  color:#002f1e;
  margin-right: 0.5em; /* ここで右側の隙間を追加 */
}


.inst-name-en{
  font-size:0.9em;
  opacity:0.8;
}


.inst-space{
  margin-top:40px;
}


/* PCスマホ表示切替 */
.history-pc{
  display:none;
}

@media (min-width:768px){

  .history-sp{
    display:none;
  }

  .history-pc{
    display:inline;
  }

}


/* 縦位置揃え */
.history-label{
  display:inline-block;
  width:6em;
}





/* セクション8専用 */
/* 文章位置調整 */

.section-8 p{
    max-width:640px;
    margin:0 auto;
}



/* --------------------------------------------------------- */
/* =====================
   背景色
===================== */
.bg-white{ background:#ffffff; }
.bg-soft{ background:#fdf3f4; }
.bg-gray{ background:#f7f7f7; }


/* =====================
   料金
===================== */
.price-area{ 
    margin-top:30px;
    display:flex;
    gap:20px;	
}

.price-box{
    border:1px solid #ddd;
    padding:25px;
    border-radius:8px;
    text-align:center;
    margin-bottom:20px;
	flex:1;
}

.price-box h3{
    color:#71151A;
    margin-bottom:10px;
}

.tax-note{
  font-size:15px;  /* PC */
  font-weight:normal;
  margin-left:6px;
}

@media (max-width:767px){
  .tax-note{
    font-size:14px;  /* SP */
  }
}

.price-text{
  margin-bottom:30px;
  line-height:1.8;
}

.price{
  font-size:26px;
  font-weight:700;
}

.price span{
  font-size:14px;
  margin-left:4px;
}

.price-desc{
  margin-top:8px;
  font-size:14px;
  line-height:1.6;
}

.price-note{
  margin-top:30px;
  font-size:15px;
  line-height:1.7;
}

.normal-title{
  text-align:center;
  font-size:18px;
  font-weight:700;
  margin:80px 0 10px;
  color:#333;
}

@media (max-width:767px){
  .price-area{
    flex-direction:column;
  }
}

/* 割引前価格 */
.old-price {
    font-size:18px;
    color:#888;
    text-decoration: line-through;
    margin-bottom:5px;
}

/* 割引率 */
.discount {
    font-size:14px;
    color:#d33;        /* 赤系で目立たせる */
    font-weight:700;
    margin-bottom:5px;
}


/* =====================
   キャンペーン
===================== */
/* キャンペーン全体 */
.campaign-wrap{
  background:#fff;
  border:2px solid #002f1e;
  border-radius:10px;
  padding:30px 20px 20px;
  margin:50px 0;
  position:relative;
  box-shadow:0 6px 16px rgba(0,0,0,0.08); /* ←追加 */
}

/* キャンペーン丸い帯バナー */
.campaign-box{
  position:absolute;
  top:-16px;
  left:50%;
  transform:translateX(-50%);
  background:#002f1e;
  color:#fff;
  padding:8px 24px;
  border-radius:999px;
  font-weight:700;
  white-space:nowrap;
  letter-spacing:0.05em; /* ← 高級感ちょい足し */
  box-shadow:0 4px 10px rgba(0,0,0,0.15); /* 影 */
}

/* キャンペーン期間 */
.campaign-sub{
  display:block;
  width:fit-content;
  margin:0 auto 15px; /* ←中央配置 */
  color:#71151A;
  font-weight:600;
  background:#f8f3f4;
  padding:6px 20px;
  border-radius:6px;
  border:1px solid #f0dcdc;
  margin-top:20px;
  
}

@media (max-width:767px){
  .campaign-sub{
    padding:6px 12px;
    font-size:15px;
  }
}



/* =====================
   既存利用者エリア
===================== */
.existing-note{
  color:#555;
  margin-bottom:10px;
  line-height:1.6;
  text-align:center; /* PCは中央 */
}

@media (max-width:767px){
  .existing-note{
    text-align:left; /* スマホ左寄 */
  }
}

.existing-price{
  background:#fff;
  border:2px solid #002f1e;
  border-radius:10px;
  padding:20px;
  margin:50px 0 30px;
  text-align:center;
}

.existing-title{
  font-weight:700;
  margin-bottom:8px;
  color:#002f1e;
}

.existing-price ul{
  list-style:none;
  padding:0;
  margin:0;
}

.existing-price li{
  font-size:15px;
  margin:4px 0;
}

.existing-section h2{
  border-left:none;
  padding-left:0;
  text-align:center;
}

/* 下線アニメ */
.highlight{
  position: relative;
  display: inline-block;
}

.highlight::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: #002f1e;

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s ease;
}

/* 発動 */
.highlight.active::after{
  transform: scaleX(1);
}


@media (max-width:767px){
  .highlight{
    display: inline;
    border-bottom: 2px solid #002f1e;
  }

  .highlight::after{
    display: none;
  }
}




/* =====================
   CTA
===================== */

.cta-area{
    background:#71151A;
    color:#fff;
    text-align:center;
    padding:80px 20px;
}

@media screen and (max-width: 767px) {
    .cta-area {
        padding-top: 40px;  /* 上部の余白を半分に */
        padding-bottom: 40px; /* 必要なら下も調整 */
    }
}

.cta-lead{
    margin-top:10px;
}

.cta-flow{
    margin:20px 0 30px;
    font-size:15px;
    line-height:1.9;
}

.cta-message{
  text-align:center;
  line-height:1.8;
  margin-bottom:20px;
}

.cta-message strong{
  display:block;
  font-size:16px;
  font-weight:700;
  margin-bottom:6px;
}

/* 白カード */

.cta-card{
	font-size:14px;
	color:#333;
    background:#fff;
    border-radius:14px;
    padding:30px 20px;
    margin:30px auto 0;
    max-width:360px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,0.15);
    border:1px solid rgba(0,0,0,0.05);
	
}

/* LINEボタン */

.line-btn{
    width:80%;
    max-width:300px;
	margin-bottom:30px;
	transition:transform .25s ease, filter .25s ease;
}

@media (min-width:768px){

.line-btn:hover{
    transform:translateY(-3px);
    filter:brightness(1.08);
}

}


/* QR説明 */

.qr-text{
    margin-top:20px;
}


/* QRコード */

.line-qr{
    display:block;
    width:150px;
    max-width:100%;
    margin:10px auto 0;
}



/* =====================
   FOOTER
===================== */

.footer{
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0)) top / 100% 14px no-repeat,
        #fff;
    color:#333;
    padding:40px 20px;
    text-align:center;
}

.footer-inner{
    max-width:900px;
    margin:0 auto;
}

.footer-logo img{
    width:180px;
	margin-top:20px;
    margin-bottom:20px;
}

.footer-info{
    font-size:14px;
    line-height:1.8;
    margin-bottom:40px;
}

/* -------- フッターリンク -------- */

.footer-links {
    font-size: 14px;
    margin-bottom: 20px;
}

/* PC・スマホ表示切替 */
.links-pc { display: inline; }
.links-sp { display: none; }


@media screen and (max-width: 767px) {
    .links-pc { display: none; }
    .links-sp { display: inline; }
	
    .links-sp a {
        display: inline-block;     /* 改行ごとにブロック扱いに */
        margin-bottom: 8px;        /* 行間（下マージン）を調整 */
    }
}


/* PC版リンクの余白調整 */
.links-pc a {
    margin: 0 12px 0 12px; /* 右側に余白を追加 */
    text-decoration: none;
}


/* リンク装飾 */
.footer-links a {
    color: #333;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}


/* copyright */
.footer-copyright{
    background:#111;
    color:#fff;
    text-align:center;
    font-size:12px;
    font-family:'Noto Sans JP','Helvetica Neue',sans-serif;
    letter-spacing:1px;
    padding:12px 0;
}



/* =====================
   PC表示
===================== */
@media screen and (min-width:768px){

/* レイアウト */
.section-flex{
    display:flex;
    align-items:center;
    gap:50px;
}

.section-flex img{
    width:45%;
}

.section-flex .text{
    width:55%;
}

/* 左右反転 */
.reverse .section-flex{
    flex-direction:row-reverse;
}

/* 料金横並び */
.price-area{
    display:flex;
    gap:20px;
}

.price-box{
    flex:1;
    margin-bottom:0;
}

}



/* =========================
  セクション画像スライダー
========================= */

/* 親 */
.section-slider{
  position:relative;
  overflow:hidden;
}

/* 画像共通 */
.section-slider img{
  width:100%;
  display:block;
}

/* 2枚目を上に重ねる */
.section-slider img:nth-child(2){
  position:absolute;
  top:0;
  left:0;
  opacity:0;
  animation:sectionFade 12s infinite;
}

/* アニメーション */
@keyframes sectionFade{
  0%   {opacity:0;}
  10%  {opacity:1;}
  45%  {opacity:1;}
  55%  {opacity:0;}
  100% {opacity:0;}
}



/* =========================
  フッターリンクバナー
========================= */

.sns-banner-wrap{
  background:#f3f3f3;   /*薄いグレー */
  padding:30px 0;
}

.sns-banner{
  display:flex;
  gap:30px;
  max-width:600px;
  margin:0 auto 15px;
}

.sns-instagram{
  text-align:center;
}

.sns-banner img,
.sns-instagram img{
  width:100%;
  height:auto;
  display:block;
}

/* インスタだけサイズ固定 */
.sns-instagram img{
  margin-top:20px;
  width:132px;
  display:inline-block;
}

/* スマホ */
@media (max-width:767px){
  .sns-banner{
    flex-direction:column;
  }
}

@media (max-width:767px){
  .sns-banner{
    flex-direction:column;
    align-items:center;   /* 中央寄 */
  }

  .sns-banner a{
    max-width:300px;      /* 幅制限 */
    width:100%;
  }
}


/* バナーオンマウスアニメ */
.sns-banner a,
.sns-instagram a{
  display:inline-block;
  transition:0.3s;
}

.sns-banner img,
.sns-instagram img{
  transition:0.3s;
}

.sns-banner a:hover,
.sns-instagram a:hover{
  transform:translateY(-3px);   /* 少し浮く */
}

.sns-banner a:hover img,
.sns-instagram a:hover img{
  opacity:0.85;                /* 少し暗く */
}




/* =====================
　TOP leadブロック（完成形）
===================== */

.lead-block{
  max-width:640px;
  margin:60px auto 16px;
  padding:0 20px;
  line-height:1.9;
  text-align:center; /* ←軸を中央に統一 */
}

/* 段落 */
.lead-block p{
  display:inline-block;   /* ←これが超重要 */
  text-align:left;        /* ←中身は読みやすく */
  margin-bottom:10px;
}

/* 最後の余白削除 */
.lead-block p:last-child{
  margin-bottom:0;
}

/* 「そして」で間を作る */
.lead-block .space{
  display:block;
  text-align:center;
  margin:24px 0;
  font-weight:500;
  color:#777;
  letter-spacing:2px;
}

/* 最後の締め強調 */
.lead-block .strong{
  margin-top:16px;
  font-weight:600;
  font-size:17px;
}

/* キーワード強調 */
.accent{
  color:#71151A;
  font-weight:600;
}

/* =====================
　スマホ
===================== */

@media (max-width:768px){
  .lead-block{
    margin:0 auto 12px;   /* 上マージン0 */
    text-align:center;
    font-size:14px;
    padding:28px 16px 0;
  }

  .lead-block p{
    display:block;
    text-align:left;
    margin-top:0;         /* 上マージンリセット */
    margin-bottom:0.8em;  /* 下マージン微調整 */
  }

  /* 帯の下マージンもリセット */
  .header-band {
    margin-bottom:0;
    padding-bottom:0;
  }
}