@charset "utf-8";

/* --- 基本設定（見切れ対策済み） --- */
.lp-wrapper * {
box-sizing: border-box !important;
}

.lp-wrapper {
width: 100%;
max-width: 480px;
margin: 0 auto;
background-color: #ffffff;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
line-height: 1.6;
color: #333;
overflow: hidden; /* 横はみ出し防止 */
padding-bottom: 50px;
/*border: 1px solid #e0e0e0; /* 枠線 */
}

.lp-wrapper img {
max-width: 100%;
height: auto;
display: block;
/*margin: 0 auto;*/
}

.simple-page-title {
  text-align: center;      /* 中央寄せ */
  font-size: 28px;         /* 中〜大サイズ（スマホなら24px程度に調整してもOK） */
  color: #3071b9;          /* 濃い青（以前のボタンと同じ濃いめの色） */
  line-height: 1.8;        /* 行間 180% */
  font-weight: bold;       /* 太字 */
  margin: 30px 0;          /* 上下の余白 */
  
  /* スマホで少し小さくしたい場合（任意） */
  @media screen and (max-width: 480px) {
    font-size: 24px;
  }
}


/* --- 既存エリア設定 --- */
.top-images-wrapper {
position: relative;
width: 100%;
}
.base-img { position: relative; z-index: 1; width: 100%; }
.overlay-img {
position: absolute;
top: 65%; left: 0; width: 100%; z-index: 2;
}

.overlay-img-text {
position: absolute;
top: 80%; left: 10%; width: 80%; z-index: 3;
}

.lp-section-bg {
position: relative;
background-size: 100% auto;
background-position: center top;
background-repeat: no-repeat;
/* width: 100%; は削除（自動調整させる） */
padding: 40px 0px;
text-align: center;
}

.cover-triangle{
  position: absolute;
  top: 0%;
  width: 100%;
}


.section-01 { z-index: 10; margin-top: 45%; }
.section-02 { z-index: 20; margin-top: -240px; padding-top: 100px; }

.section-final {
position: relative;
z-index: 30;
padding-top: 60px;
background-color: #fff;
/*  border-top-left-radius: 20px;
border-top-right-radius: 20px;
*/
padding-bottom: 40px;
}

/* --- テキスト・ボタン類 --- */
.lp-text-blue-lg {
color: #3071b9;
font-size: 2.25em;
font-weight: bolder;
margin-bottom: 20px;
line-height: 1.4;
}
.lp-text-black-norm {
color: #333;
font-size: 1.5em;
margin-bottom: 20px;
text-align: center;
width: 100%;
padding: 0 10%;
}
.lp-inner-img { margin: 20px auto; width: 80% !important; border-radius: 8px; }

.cta-btn {
display: block;
/*width: 90%; max-width: 350px;*/
margin: 0px 5% 20px;
background-color: #3071b9;
color: #fff;
font-size: 1.75em; font-weight: bolder;
text-decoration: none;
padding: 15px 0;
border-radius: 50px;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
position: relative; text-align: center;
}
.cta-btn::after { content: "▶"; margin-left: 10px; font-size: 0.8em; }

/* --- Section Final 内部の調整 --- */
.blue-border-box {
border: 1px solid #3071b9;
color: #3071b9;
font-weight: bolder;
font-size: 1.75em;
padding: 15px;
width: 90%; margin: 15px auto;
}
.img-left-30 {
width: 30% !important; margin-right: auto; margin-left: 10%; margin-bottom: 20px;
}
.flex-img-wrapper {
display: flex; justify-content: center; gap: 5px;
width: 80%; margin: 20px auto;
}
.flex-img-wrapper img { width: calc(50% - 5px) !important; }

/* --- ▼▼▼ 今回追加したエリア用CSS ▼▼▼ --- */

.added-content-area {
/*background-color: #fff; /* 背景白 */
padding-top: 20px;
}

/* 横幅90%のFlex行 */
.flex-row-90 {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 90%;
margin:-60px auto; /* 上下20px, 左右自動(中央) */
}

.col-70 { width: 70%; }
.col-70 img { width: 98%; margin-right: auto; margin-left: 0; margin-top:50px; } /* 左寄せ気味 */

.col-30 { width: 25%; margin-right:30px; }
.col-30 img { width: 100%; margin-top:30px;}

/* 縦積み用クラス */
.col-stack {
display: flex;
flex-direction: column;
gap: 10px; /* 画像間の隙間 */
}

/* 画像90%単体 */
.img-90 {
width: 90% !important;
margin: 30px auto;
}

/* --- 最後の背景画像＋5枚積み重ねセクション --- */
.final-stack-section {
position: relative;
width: 100%;
/* 背景画像の設定 */
background-size: 100% 100%; /* 枠に合わせて引き伸ばす */
background-position: center top;
background-repeat: no-repeat;

/* 上の画像(-20px)とくっつけるため、マージン等は0にする */
margin-top: -5px; /* 隙間調整用（白線が出るなら-1px〜-5pxで調整） */
padding-top: 80px; /* 背景画像の上部に余白を持たせて、中身を下げる */
padding-bottom: 50px;
z-index: 1; /* 手前に表示 */
}

.stack-container {
width: 90%; /* コンテンツ幅 */
margin: 0 auto;
display: flex;
flex-direction: column; /* 縦1列 */
gap: 20px; /* 5枚の画像の間の余白 */
}

.stack-container img {
width: 100%;
/* 影をつけて浮かせる場合 */
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
}



/**強み**/
.point-section {
  background-color: #fff;
  margin-left:10%;
  margin-right:10%;
  margin-top:30px;
  margin-bottom:50px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.point-header {
padding: 15px 25px;
}

.point-header {
  background: linear-gradient(to right, #3b93e4, #66b5ff);
  padding: 20px 15px;
  color: #fff;
  text-align: center;
}

.point-number {
font-size: 1.2rem;
}

.point-content {
  padding: 25px;
  font-size: 1rem;
}

.point-subtitle {
  color: #3b79bb;
  margin-top: 5%;
  text-align: center;
  font-size: 1.25rem;
  margin-bottom: 5%;
  font-weight: bolder;
}

.point-content p {
  margin: 0 0 1em 0;
}

.main-content p {
  /* margin: 10px 0; */
  font-size: 15px;
  line-height: 200%;
  margin-top: 2%;
}



/**コース詳細**/
.grey-box{
position:relative;
background-color:#f2f2f2;
padding: 5%;
margin: 0 5%;
}

.grey-box-head{
color:blue;
text-align:left;
}

.overlap-flex-wrapper {
display: flex;          /* 横並びにする */
justify-content: center;
position: relative;     /* 重ねる画像の基準位置にする */
padding: 0 1.75%;         /* ★重要：左右に10%の余白 */
box-sizing: border-box; /* paddingを含めて幅計算する */
width: 100%;
}

.side-img {
width: 50%;             /* 左右の画像は残り幅を半分ずつ分け合う */
padding: 0% 0% 0% 2%;   /* ★重要：左右に10%の余白 */
height: auto;
display: block;
object-fit: cover;      /* 画像の比率を保つ */
}

.center-img {
position: absolute;     /* 親要素に対して絶対配置 */
top: 50%;               /* 上から50%の位置 */
left: 50%;              /* 左から50%の位置 */
transform: translate(-50%, -50%); /* 自身の大きさ半分ずらして完全中央にする */

width: 20%;             /* ★中央画像のサイズ（お好みで調整してください） */
height: auto;
z-index: 2;             /* 他の画像より手前に表示 */

/* 必要であれば影などを追加 */
filter: drop-shadow(0 0 5px rgba(0,0,0,0.3));
}



/**体験記**/
.interview-block{
	padding-top: 5%;
	padding-left: 5%;
	padding-right: 5%;
}

.center-line {
  /* 中央配置の肝（上下は適当な余白、左右はautoで中央になります） */
  margin: 50px auto;
  
  /* 長さは横に30% */
  width: 30%;
  
  /* 線の太さと色（border-topを使うと綺麗に引けます） */
  border: 0; /* デフォルトの枠線をリセット */
  border-top: 1px solid #e0e0e0; /* ここで色と太さを指定 */
}






/**Q&A**/
.qa-heading {
  /* 全体のフォント設定 */
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; /* 一般的なゴシック体 */
  color: #222;            /* 文字色（黒に近い濃いグレー） */
  text-align: center;     /* 中央揃え */
  line-height: 1;         /* 行間を詰める */

  /* 「Q&A」部分のスタイル */
  font-size: 3rem;        /* 文字サイズを大きく（約64px） */
  font-weight: 900;       /* 文字を極太にする */
  margin-top: 30%;              /* デフォルトの余白をリセット（必要に応じて調整） */
}

.qa-sub {
  /* 「よくある質問」部分のスタイル */
  display: block;         /* ブロック要素にして改行させる */
  font-size: 1.25rem;      /* 文字サイズを小さくする（約24px） */
  font-weight: normal;    /* 文字の太さを標準に戻す */
  margin-top: 0.3em;      /* 「Q&A」との間隔を少し空ける */
}

/* --- FAQリスト全体の枠 --- */
.faq-list {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
  text-align: left; /* 左寄せにする */
}

/* --- 各質問アイテム --- */
.faq-item {
  border-bottom: 1px solid #e0e0e0; /* 下線で区切る */
  padding: 30px 0;
}
.faq-item:last-child {
  border-bottom: none;
}

/* --- 質問エリア (Q) --- */
.faq-q {
  display: flex;
  align-items: flex-start; /* アイコンとテキストの上端を揃える */
  margin-bottom: 15px;
}
.icon-q {
  background-color: #3071b9; /* 青色 */
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%; /* 丸くする */
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  font-size: 1.5em;
  flex-shrink: 0; /* 幅が縮まないようにする */
  margin-right: 15px;
}
.q-text {
  margin: 0;
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1.5;
  padding-top: 5px; /* アイコンとの位置調整 */
  color: #333;
}

/* --- 回答エリア (A) --- */
.faq-a {
  display: flex;
  align-items: flex-start;
}
.icon-a {
  background-color: #f2f2f2; /* 薄いグレー */
  color: #333;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  font-size: 18px;
  flex-shrink: 0;
  margin-right: 15px;
}
.a-text {
  margin: 0;
  font-size: 1.3em;
  line-height: 1.8;
  padding-top: 5px;
  width: 100%;
}

/* --- 費用セクション用 --- */
.fee-block {
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
}
.fee-period {
  font-weight: bold;
  color: #3071b9;
  margin-bottom: 10px;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 5px;
  display: inline-block;
}
.fee-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
}
.fee-list li {
  margin-bottom: 5px;
  padding-left: 1em;
  text-indent: -1em;
}
.fee-note {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* --- お問い合わせボタン --- */
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 20px;
}
.btn-tel, .btn-line {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  transition: opacity 0.3s;
}
.btn-tel {
  background-color: #fff;
  border: 2px solid #333;
  color: #333;
  font-size: small;
}
.btn-line {
  background-color: #06c755; /* LINEの緑色 */
  color: #fff;
  border: 2px solid #06c755;
  font-size: small;
}
.btn-tel:hover, .btn-line:hover {
  opacity: 0.8;
}






/* --- 概要、コース詳細 --- */

/* --- 全体の枠 --- */
.summary-wrapper {
  max-width: 600px;
  margin: 0px 50px 50px 50px;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #333;
}

/* --- ヘッダー部分（概要 / 1.5年コース） --- */
.summary-header {
  text-align: center;
  margin-bottom: 40px; /* 本文との間の「少し余白」 */
}

.summary-title {
  font-size: 2.5em;      /* 大きめ */
  font-weight: 900;     /* 太字（極太） */
  margin: 0 0 5px 0;    /* 下の隙間を少し空ける */
  line-height: 1.2;
  color: #000;          /* 黒 */
}

.summary-sub {
  font-size: 1.5em;      /* 小さめのフォント */
  margin: 0;
  font-weight: normal;
}

/* --- コンテンツ部分 --- */
.summary-body {
  text-align: left;     /* 左寄せ */
  /* スマホで端がカツカツにならないよう余白を入れる */
  padding: 0 20px; 
}

/* 青い見出し */
.summary-blue-head {
  color: #3071b9;       /* 指定のカラー */
  font-size: 2.0em;      /* 大きめ */
  font-weight: bolder;
  margin-bottom: 20px;  /* 下の文章との間隔 */
  line-height: 1.4;
}

/* 本文テキスト */
.summary-text {
  font-size: 18px;      /* やや大きめ */
  line-height: 1.8;     /* 読みやすい行間 */
  font-weight: 500;     /* 少しだけしっかりした太さ */
  margin: 0;
  text-align: left;
}


.heading-bar {
  /* ▼▼▼ ここがポイント：左側の縦棒 ▼▼▼ */
  border-left: 6px solid #3071b9; /* 線の太さ(6px) と 色(#3071b9) */
  padding-left: 15px;             /* 線と文字の間の余白 */
  
  /* 文字のスタイル */
  color: #3071b9;                 /* 文字色 */
  font-size: 24px;                /* 文字サイズ */
  font-weight: bold;              /* 太字 */
  line-height: 1.3;               /* 行の高さ（線の高さにも連動します） */
  text-align: left;               /* 左寄せ */
  
  /* 周りの余白（必要に応じて調整してください） */
  margin: 30px 0;
}













/* =========================================
   PC向けレスポンシブ対応 (768px以上)
   ※既存CSSの末尾に追加してください
   ========================================= */
@media screen and (max-width: 767px) {
    /* スマホで横揺れ防止のための保険 */
    .lp-wrapper { overflow-x: hidden; }
}

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

    /* --- 全体の幅を広げる --- */
    .lp-wrapper {
        max-width: 1000px; /* PCでの最大幅 */
        border: none;      /* PCでは枠線を消してスッキリさせる */
        box-shadow: 0 0 20px rgba(0,0,0,0.05); /* うっすら影をつけて立体感を出す */
    }

    .overlay-img {
        top: 75%;
    }

    .section-01{
        margin-top: 35%;
    }

    /* --- 背景画像の調整 --- */
    .lp-section-bg {
        /* 横に引き伸ばされすぎて縦長になるのを防ぐ */
        background-size: cover; 
        /*padding: 80px 40px; /* 余白を広めに */
    }

    /* --- フォントサイズのバランス調整 --- */
    .lp-text-blue-lg { font-size: 2.0em; margin-bottom: 30px; }
    .lp-text-black-norm { font-size: 1.5em; line-height: 2; width: 100%; margin: 0 auto 30px; }
    
    /* --- 画像のサイズ感を調整 --- */
    .lp-inner-img {
        width: 60% !important; /* PCでデカすぎないように */
        max-width: 600px;
    }

    /* --- 「強み (POINT)」を2列にする --- */
    /* 親要素にFlexを適用して並べる */
    .added-content-area {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        padding: 5%;
        /*margin: 0 20% 0 20%;*/
    }
    
    /* ポイントの箱を2列配置 */
    .point-section {
        width: 48%;       /* 2列にする */
        margin: 0 0 40px 0; /* 上下の余白 */
    }
    
    /* ポイント以外の要素（画像など）は横幅いっぱいに戻す */
    .added-content-area > :not(.point-section) {
        width: 100%;
    }
    
    /* ポイント内のテキスト調整 */
    .point-content p { font-size: 16px; }

    /* --- 概要・費用の「グレーBOX」を並べる --- */
    .section-02 .summary-wrapper {
        max-width: 800px;
        margin: 0 auto 50px;
    }

    .grey-box {
        max-width: 90%;
        margin: 0 auto 40px;
        padding: 3% 10% 3% 10%;
    }
    
    /* 費用などのFlex画像の調整 */
    .overlap-flex-wrapper {
        width: 80%;
        margin: 0 auto;
    }

    /* --- Q&Aを2列にする --- */
    .faq-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        max-width: 900px;
    }
    
    .faq-item {
        width: 48%; /* 2列配置 */
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 20px;
    }
    
    /* 最後の1つが余った場合に線がおかしくならないよう調整 */
    .faq-item:nth-last-child(2) { border-bottom: 1px solid #e0e0e0; }

    /* --- ボタンをPCサイズに --- */
    .cta-btn {
        width: 60%;
        max-width: 500px;
        margin: 40px auto;
        font-size: 24px;
        transition: transform 0.3s, opacity 0.3s;
    }
    .cta-btn:hover {
        transform: translateY(-3px);
        opacity: 0.9;
        cursor: pointer;
    }
    
    /* --- お問い合わせボタン（電話・LINE） --- */
    .contact-links {
        justify-content: center;
    }
    .btn-tel, .btn-line {
        padding: 10px 20px;
        font-size: 15px;
    }
    
    /* --- フッター付近の積み重ね画像の調整 --- */
    .final-stack-section {
        background-size: cover;
    }
    .stack-container {
        width: 30%; /* PCでは少し幅を絞る */
    }

    .flex-img-wrapper{
      width: 60%;
    }

    .blue-border-box{
      font-size: 2.5em;
    }

    .flex-row-90{
      margin: -60px 20%;
    }
    .img-90{
      width: 60% !important;
    }

    /* 対象のセクションクラス（例として .section-01 にしています） */
    .pc-image-shrink {
      /* 横幅を「100%」ではなく「120%」や「140%」に指定します。
         auto を指定することで、縦横比を保ったまま拡大されます（左右がはみ出て切れる形になります）。
      */
      background-size: 180% auto !important; 

      /* 基準位置を「中央の上」にします。
         これで画像の中心を維持したまま、左右均等にはみ出させることができます。
      */
      background-position: center top !important;
    }

    .section-final{
      padding-bottom: 0px;
    }

    .qa-heading{
      margin-top: 15%;
    }

}




/* --- 画像切り替え用クラス --- */

/* デフォルト（スマホ）ではPC用画像を隠す */
.pc-only {
  display: none !important;
}

/* 768px以上（PC）のときの設定 */
@media screen and (min-width: 768px) {
  /* PC用画像を表示 */
  .pc-only {
    display: block !important;
  }
  /* スマホ用画像を隠す */
  .sp-only {
    display: none !important;
  }
}



.stretch-img {
  /* 横に1.5倍に引き伸ばす */
  transform: scaleX(1.4);
  
  /* 左端を固定して、右方向へ伸ばす */
  transform-origin: left top;
  
  /* ※必要であれば width: 100%; なども併用 */
}