/*
Theme Name: IT-Wing (Twenty Twenty-Four Child)
Theme URI:  https://school.tbi-basmile.com/
Description: Twenty Twenty-Four child theme for IT-Wing landing pages.
Author: basmile
Template: twentytwentyfour
Version: 1.0.0
*/

/* 背景色 */
body{
  background-color: #F5F5F5;
}

/* =========================
   FV見出しを画像に重ねる
   ========================= */
/* 画像側を基準 */
.fv-photo{
  position: relative;
  z-index: 1;
}

/* テキスト側を前面に */
.fv-copy{
  position: relative;
  z-index: 2;
  margin-right: -150px;  /* 重なり量：-80〜-180で調整 */
  font-size: 2em;
  line-height: 1.35;
  font-weight: 500;
}


/* =========================================
   「ITエンジニアという選択肢」だけ赤
   ========================================= */
.fv-copy .itwing-red{
  color: #E60000;
  font-weight: 700;
}

/* ===============================
   SPのみ改行調整
================================= */
@media (max-width:781.98px){
  .fv-copy{
    font-size: 1.4em;
    margin-right: 0;      /* PCの重なり解除 */
    font-weight: 400;
    width: fit-content;   /* テキスト幅に縮める */
    margin-left: auto;    /* ブロックを中央に */
    margin-right: auto;
    text-align: left;     /* テキストは左揃えのまま */
    line-height: 1.5;     /* 均等な行間 */
  }

  .fv-copy .sp-break{
    display: block;
    margin: 0;
  }
}


/* =========================================
   現役エンジニア監修の実践カリキュラム
   ========================================= */
.oval-back{
  position: relative;
  z-index: 0;
}

.title-front{
  position: relative;
  z-index: 2;
}

.support-text2{
  position: relative;
  z-index: 2;
}


/* =========================================
   ITエンジニアになって…
   ========================================= */
@media (max-width:781.98px){
  .fv-next{
    padding-top: 30px;
    width: fit-content;        /* テキスト幅まで縮める */
    max-width: calc(100% - 32px); /* 画面左右16px余白 */
    margin-left: auto;
    margin-right: auto;
    text-align: left;   
  }
}


/* =========================================
   FV：ボタン2つ（SPで横並びに戻す）
   ========================================= */
@media (max-width:781.98px){

  /* Columns ブロックを横並び維持 */
  .wp-block-columns.fv-btns{
    display: flex !important;
    flex-wrap: nowrap !important;        /* 縦積み防止 */
    justify-content: center !important;  /* 全体を中央へ */
    align-items: center !important;
    gap: 12px !important;                /* ボタン間の余白 */
    margin-bottom: 20px;
  }

  /* 各カラムが勝手に 100% になるのを止める */
  .wp-block-columns.fv-btns > .wp-block-column{
    flex: 0 1 auto !important;
    width: auto !important;
  }

  /* ボタン幅をSP用に調整（はみ出し防止） */
  .wp-block-columns.fv-btns .wp-block-button__link{
    width: min(170px, 44vw);
    text-align: center;
    white-space: nowrap;
  }
}


/* =========================================
   モットーのボタン
   ========================================= */
@media (max-width:781.98px){
  .motto-btn{
    margin-bottom: 25px;
  }
}


/* =========================================
   選ばれる理由 画像 SPのみ縮小 ＋ 本文テキスト調整
   ========================================= */
@media (max-width:781.98px){
  .reason-photo{
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }
  .reason-text{
    font-size: 80% !important;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
}


/* =========================================
   選ばれる理由 本文テキスト調整
   ========================================= */
@media (min-width:500px) and (max-width:781.98px){
  .reason-text{
    font-size: 100% !important;     /* 80%は小さすぎるなら 90% */
    width: 100%;
    max-width: 500px;              /* ←ここで“読み幅”を決める（480〜560で調整） */
    margin: 0 auto;                /* ブロックを中央へ */
    padding: 0 24px;               /* 端末幅が狭い時の保険 */
    text-align: left;
    box-sizing: border-box;
  }
}

@media (max-width:499.98px){
  .reason-text{
    font-size: 80% !important;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
}


/* =========================================
   サポート本文 500px未満だけ行長制限
   ========================================= */
@media (max-width:499.98px){
  .support-text{
    max-width: 300px;   /* ← ここが行長。300〜360で微調整 */
    width: 100%;
  }

  .support-text2{
    position: relative;
    z-index: 2;
    max-width: 230px;
    width: 100%;
  }
}


/* =========================================
   サポート本文 500px未満だけ行長制限
   ========================================= */
@media (max-width:499.98px){
  .figure-photo{
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }
}


/* =========================================
   CTAエリア（500px未満）
   ========================================= */
@media (max-width:499.98px){
  .cta-text{
    max-width: 240px;      /* 好みで 300〜360 */
    margin-left: auto;
    margin-right: auto;
    text-align: left;      /* 左揃え維持 */
  }
}


/* =========================================
   カリキュラム紹介
   ========================================= */
.curriculum-title{
  color: #FF9500;
  font-weight: 700;
  line-height: 1.25;

  /* 左揃えのまま中央配置（幅を絞って中央寄せ） */
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;

  /* 黒フチ（太さ1相当） */
  text-shadow:
    -1px 0 #000, 1px 0 #000,
    0 -1px #000, 0 1px #000,
    -1px -1px #000, 1px -1px #000,
    -1px  1px #000, 1px  1px #000;
}

@media (max-width:781.98px){
  .curriculum-section{
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
  }
}

/* カリキュラムタイトル_デフォルトでは改行させない */
.curriculum-title .sp-break{
  display: none;
}

/* 500未満だけ改行 */
@media (max-width:499.98px){
  .curriculum-title .sp-break{
    display: block;
  }
}

/* リード文_500未満だけ改行させる */
.curriculum-lead .br-sp{
  display: none;
}
@media (max-width:499.98px){
  .curriculum-lead .br-sp{
    display: block;
  }
  .curriculum-lead{
    width: fit-content;
    margin: 20px auto 0;
    text-align: left;
  }
}
/* 500以上は今まで通り（中央揃えのまま） */
@media (min-width:500px){
  .curriculum-lead{
    text-align: center;
    font-size: 1.25em;
  }
}

/* 学習内容 */
@media (max-width:499.98px){
  .curriculum-list{
    max-width: 270px;
    margin: 20px auto 0;
    text-align: left;
  }
}

/* ノート文_500未満だけ改行 */
.curriculum-note .br-sp{
  display: none;
}
@media (max-width:499.98px){
  .curriculum-note .br-sp{
    display: block;
  }
  .curriculum-note{
    width: fit-content;
    margin: 0 auto;
    text-align: left;
  }
}
/* 500以上はそのまま（必要なら中央に戻す） */
@media (min-width:500px){
  .curriculum-note{
    width: fit-content;
    margin: 20px auto 0;
    font-size: 1.2em;
    text-align: left;
  }
}


/* 応用コース_学習内容 */
@media (max-width:499.98px){
  .curriculum-list2{
    width: fit-content;
    margin: 20px auto 0;
    text-align: left;
  }
}


/* =========================================
   受講生の声
   ========================================= */
@media (max-width:781.98px){
  .voice-section{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .voice-name{
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    margin-top: 0;
  }
  .voice-text{
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
  .voice-name2{
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    margin-top: 0;
  }
  .voice-text2{
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
}

@media (max-width:499.98px){
  .voice-name{
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
  .voice-name2{
    max-width: 180px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
}


/* =========================================
   全体グループにテキストとスペーサー縮小をかける
   ========================================= */
@media (min-width:1000px) and (max-width:1399px){
  .site-wrap{
    font-size: 80%;
  }
  .wp-block-spacer[style*="height:30px"]  { height: 20px !important; }
  .wp-block-spacer[style*="height:60px"]  { height: 34px !important; }
}

@media (min-width:900px) and (max-width:999.98px){
  .site-wrap{
    font-size: 70%;
  }
  .wp-block-spacer[style*="height:30px"]  { height: 15px !important; }
  .wp-block-spacer[style*="height:60px"]  { height: 26px !important; }
}

@media (min-width:782px) and (max-width:899.98px){
  .site-wrap{
    font-size: 60%;
  }
  .wp-block-spacer[style*="height:30px"]  { height: 10px !important; }
  .wp-block-spacer[style*="height:60px"]  { height: 18px !important; }
}

@media (max-width:899.98px){
  .fv-gap-only{
    display: none !important;
  }
}

@media (max-width:781.98px){
  .fv-gap-spless{
    display: none !important;
  }
  .sub-title{
    font-size: 1.35em !important;
  }
  .wp-block-spacer[style*="height:80px"]  { height: 30px !important; }
  .wp-block-spacer[style*="height:70px"]  { height: 30px !important; }
  .wp-block-spacer[style*="height:50px"]  { height: 30px !important; }
}


/* ==================================
   お問い合わせフォーム
   ================================== */

/* フォームの横幅と中央寄せ */
.itwing-contact .wpcf7{
  max-width: 1000px;
  margin: 0 auto;
}

.itwing-contact .wpcf7-form{
  width: 100%;
}

/* CF7が出すpの余白を殺す（崩れ防止） */
.itwing-contact .wpcf7-form p{
  margin: 0;
}

/* 1行（30% / 70%） */
.itwing-contact .form-row{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}

/* 左：ラベル */
.itwing-contact .form-label{
  width: 30%;
  font-size: 26px;
  line-height: 1.4;
  padding-top: 10px; /* input高さに合わせる */
  box-sizing: border-box;
  text-align: left;
}

/* 必須マーク */
.itwing-contact .form-label .required{
  display: inline-block;
  margin-left: 4px;
  font-size: 0.7em;
  color: #c00000;
}

/* 右：入力 */
.itwing-contact .form-input{
  width: 70%;
}

/* 入力欄（text/email/tel） */
.itwing-contact .form-input .wpcf7-form-control.wpcf7-text,
.itwing-contact .form-input .wpcf7-form-control.wpcf7-email,
.itwing-contact .form-input .wpcf7-form-control.wpcf7-tel{
  width: 100%;
  height: 48px;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid #000000;
  box-sizing: border-box;
  background: #ffffff;
  font-size: 16px;
}

/* textarea */
.itwing-contact .form-input .wpcf7-form-control.wpcf7-textarea{
  width: 100%;
  height: 240px;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #000000;
  box-sizing: border-box;
  background: #ffffff;
  resize: vertical;
  font-size: 16px;
}

/* textarea行だけ上揃え */
.itwing-contact .form-row.is-textarea{
  align-items: flex-start;
}
.itwing-contact .form-row.is-textarea .form-label{
  padding-top: 10px;
}

/* 送信ボタンエリア */
.itwing-contact .form-submit{
  margin: 40px 0 0;
  text-align: center;
}

/* CF7が勝手に包むpも中央寄せ＆余白カット */
.itwing-contact .form-submit p{
  margin: 0;
  text-align: center;
}

/* 送信ボタン自体も block 扱いで中央固定 */
.itwing-contact .form-submit .custom-submit-button{
  display: block;
  margin: 0 auto;
}

/* 送信ボタン（写真2/3寄せ） */
.itwing-contact .custom-submit-button{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 300px;
  height: 70px;
  border-radius: 50px;
  border: 2px solid #000000;
  background: linear-gradient(#DDDDDD, #151515);

  font-size: 28px;
  letter-spacing: 0.03em;
  color: #ffffff;
  paint-order: stroke fill;

  cursor: pointer;
  box-sizing: border-box;
}

.itwing-contact .custom-submit-button:hover{
  opacity: 0.9;
}

/* エラーメッセージ等の見た目（任意） */
.itwing-contact .wpcf7-not-valid-tip{
  margin-top: 6px;
  font-size: 14px;
}
.itwing-contact .wpcf7-response-output{
  max-width: 1000px;
  margin: 20px auto 0;
}


@media screen and (max-width: 1024px){

  /* 横幅を少し絞って左右余白を確保 */
  .itwing-contact .wpcf7{
    max-width: 860px;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* 行間・隙間を少し詰める */
  .itwing-contact .form-row{
    gap: 14px;
    margin-bottom: 22px;
  }

  /* ラベル：中間サイズ */
  .itwing-contact .form-label{
    font-size: 20px;     /* PC26 → 中間 */
    padding-top: 8px;
  }

  /* 入力欄：中間サイズ */
  .itwing-contact .form-input .wpcf7-form-control.wpcf7-text,
  .itwing-contact .form-input .wpcf7-form-control.wpcf7-email,
  .itwing-contact .form-input .wpcf7-form-control.wpcf7-tel{
    height: 44px;        /* 48 → 少し小さく */
    padding: 7px 10px;
    font-size: 16px;
  }

  .itwing-contact .form-input .wpcf7-form-control.wpcf7-textarea{
    height: 200px;       /* 240 → 少し小さく */
    font-size: 16px;
  }

  /* 送信ボタン */
  .itwing-contact .form-submit{
    margin: 55px 0 0;
  }

  .itwing-contact .custom-submit-button{
    width: 280px;        /* 300 → 少し絞る */
    height: 64px;        /* 70 → 少し小さく */
    font-size: 24px;     /* 28 → 中間 */
  }
}


@media screen and (max-width: 767px){

  .itwing-contact .wpcf7{
    max-width: 600px;
    padding: 0 16px;
    box-sizing: border-box;
  }

  /* 1行レイアウト（40% / 60%） */
  .itwing-contact .form-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
  }

  .itwing-contact .form-label{
    width: 40%;
    font-size: 14px;
    line-height: 1.4;
    padding-top: 0;
    margin-bottom: 0;
    box-sizing: border-box;
    text-align: left;
    white-space: nowrap; /* ラベルは基本折り返さない */
  }

  .itwing-contact .form-input{
    width: 60%;
  }

  .itwing-contact .form-input .wpcf7-form-control.wpcf7-text,
  .itwing-contact .form-input .wpcf7-form-control.wpcf7-email,
  .itwing-contact .form-input .wpcf7-form-control.wpcf7-tel{
    width: 100%;
    height: 40px;
    padding: 6px 8px;
    font-size: 14px;
  }

  .itwing-contact .form-input .wpcf7-form-control.wpcf7-textarea{
    width: 100%;
    height: 140px;
    padding: 6px 8px;
    font-size: 14px;
  }

  /* textarea行だけ上揃え */
  .itwing-contact .form-row.is-textarea{
    align-items: flex-start;
  }
  .itwing-contact .form-row.is-textarea .form-label{
    padding-top: 10px;
    white-space: normal; /* 「メッセージ本文」だけ折り返しOK */
  }

  /* 送信ボタン */
  .itwing-contact .form-submit{
    margin: 35px 0 0;
    text-align: center;
  }

  .itwing-contact .custom-submit-button{
    width: min(250px, 100%);
    height: 56px;
    font-size: 20px;
  }

  .itwing-contact .wpcf7-not-valid-tip{
    font-size: 13px;
    margin-top: 6px;
  }

  .itwing-contact .wpcf7-response-output{
    margin: 14px auto 0;
  }
}


/* =========================================
   コピーライト
   ========================================= */
@media (max-width:449.98px){
  .copyright{
    font-size: 0.75rem !important;
  }
}