@media (min-width: 768px) {
  body {
    padding-top: 60px; /*headerとhero画面を揃えるために調整*/
  }

/*================================
header
=================================*/
  /* --- ヘッダーの幅を画面いっぱいに広げる --- */
 .header-inner {
  max-width: 100%;       /* 1200pxの制限を解除 */ 
  align-items: center;
  justify-content: space-between;
  height: 85px;             /* ヘッダーの太さを固定 */
  padding: 0 4%;
 }

/*================================
PCナビ
=================================*/
 .hamburger {
    display: none;
  }

 /* --- PC用メニューを表示・整列 --- */
 nav {
  display: block;        /* style.cssのnoneを上書き */
 }

 nav ul {
  display: flex;
  align-items: center;
  gap: 40px;             /* メニュー間の間隔 */
 }

 nav a {
  font-size: 15px;
  font-weight: 500;
  height: 45px;
  color: #fff;
  letter-spacing: 0.1em;
  transition: color 0.3s ease;
  white-space: nowrap;
 }

 nav a:hover {
  color: #E6C766;        /* ホバー時にゴールドへ */
 }

 .nav_btn a {
  display: flex;             /* 箱として認識させ、背景を確実に出す */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: #E6C766 !important; /* 背景色（ゴールド） */
  color: #1E3D5B !important;      /* 文字色（ネイビー） */
  width: auto !important;
  padding: 12px 30px;        /* 左右にゆとりを持たせる */
  border-radius: 50px;
  font-weight: bold;
  font-size: 15px;
  margin: 0;                 /* 余計なマージンをリセット */
  transition: all 0.3s ease;
 }

 .nav_btn a:hover {
  background: #f0d680 !important;
  transform: translateY(-2px); /* 少し浮かせて「押せる感」を出す */
  box-shadow: 0 4px 15px rgba(230, 199, 102, 0.3);
 }

 /* ボタンの中のアイコン（iタグ）の調整 */
 .nav_btn a i {
  margin-right: 8px;
  font-size: 1.1em;
 }
 .btn a {
      padding: 10px 10px;
      margin: 0 30px;
      font-size: 0.8em;
  }

  .logo img{
     width: 20%; 
  }

/*================================
CTA
=================================*/
 .cta-btn {
  padding: 40px 0;
 }

 .cta-btn a {
  width: 80%; 
  max-width: 500px;
  padding: 25px 0;
  font-size: 1.4em;
  border-radius: 60px;
  /* マウスを乗せた時に少し浮く */
  transition: all 0.3s ease; 
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }

 .cta-btn a:hover {
  background: #264b6e; /* 少し明るく */
  transform: translateY(-3px); /* 3px上に浮く */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* 影を強く */
}


/*================================
hero
=================================*/
 #hero{
  background-position: 70% 20%;
  height: 95vh;
 }

 .hero-text {
    left: 100px;
    bottom: 120px;
  }

 .hero-text {
  font-size: 1.5em;
 }

  .hero-text br{
     display: none;
  }

/*================================
mind
=================================*/

  #mind {
    padding: 5em 5em;
  }

  #mind h2 {
  font-size: 1.5em;
}

.mind-text {
  font-size: 1.2em;
  max-width: 1200px; /* ★ここを「上の3つのボックスを囲む親要素」の幅と同じ数値にする */
  margin-left: auto;  /* 左右中央揃えにするための必須設定 */
  margin-right: auto; /* 左右中央揃えにするための必須設定 */
  padding-top: 50px;  /* 上下の余白はpaddingで調整 */
  padding-bottom: 50px;
  text-align: center;
  line-height: 1.8;   /* 少し行間を広げると読みやすくなります */
}


  .mind-text br:not(.pc-only-br){
    display: none;
  }

  .pc-only-br {
    display: inline;
  }

  .fade-in {
    font-size: 1.2em;
  }
  .fade-text {
    font-size: 1.5rem; 
  }

  .mind-grid {
     grid-template-columns: repeat(3,1fr);
     max-width: 1200px;
     gap: 60px;
     box-sizing: border-box;
  }
 
  .mind-box {
    padding: 40px 10px;
  }
  .mind-box p {
     font-size: 1em;
  }

  .mind-box br {
     display: none;
  }

  .mind-box img {
     width: 80px;
     height: auto;
}

  .fade-in br{
     display: none;
  }
  .fade-in {
  padding: 5em;
  font-size: 1.3em;
 }

/*================================
section
=================================*/
  section {
    max-width: none;
    padding: 2% 5%;
  }
  section .section-title {
  font-size: 2.5rem;
  padding-left: 0;
  }

  .section-title span {
  font-size: 1em;
  line-height: 3;
  }

/*================================
vision
=================================*/
   #vision {
    background-size: 900px;
    background-position: 50% 10%;
  }
  
 .vision-container {
    display: grid;
    /* 左(テキスト)5割、右(画像)5割の比率 */
    grid-template-columns: 5fr 5fr;
    /* 位置の指定。imgが右側を縦にぶち抜く指定 */
    grid-template-areas:
      "lead  img"
      "text  img";
    margin: 0 auto;
    column-gap: 100px;
    align-items: center;
    flex-wrap: wrap;
  }

  .vision-lead {
    grid-area: lead;
    text-align: left;
    margin-bottom: 20px;
    font-size: 2.5em; /* 元の調整数値を維持 */
    padding: 0;
  }

  .vision-text {
    grid-area: text;
    text-align: left;
    flex: 1 1 400px;  /*最低400pxは確保 */
  }

  .vision-text p {
    text-align: left;
    font-size: 1.1em;
  }

  .vision-text .text2 {
    font-size: 1.1em;
    margin-top: 50px;
  }

  .vision-text br {
    display: none;
  }

  .vision-image {
    grid-area: img;
    max-width: 800px;
    text-align: rigt;
    flex: 0 1 450px;         /* 最大450px、画面が狭まっても極端に小さくしない */
    min-width: 300px;        /* これ以上は小さくさせない */
  }

  .vision-image img {
    width: 120%;
    max-width: 800px;
  }

/* QAセクション */
.qa-section {
  max-width: 1200px;   /* ボックス自体の最大幅 */
  width: 100%;
  margin: 100px auto;   
  padding: 60px 40px;  
  border-radius: 12px;
  text-align: center;  
}

.qa-intro {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 30px;
  display: flex;
  align-items: center; /* 線と文字の高さを中央で揃える */
  justify-content: center;
  gap: 20px;           
}

/*左右の線の共通設定 */
.qa-intro::before,
.qa-intro::after {
  content: "";
  height: 1px;         /* 線の太さ */
  background-color: #1E3D5B; 
  flex-grow: 1;        /* 線を伸ばす */
  max-width: 150px;     /* 線の長さ */
}

.qa-intro br {
  display: none;
}

.qa-text {
  margin: 0 auto 10px;
  font-size: 1.1rem;     
  line-height: 2.2;      
  white-space: nowrap;   /* 勝手に改行させない */
}

.qa-end {
  font-size: 1.1rem;    
  margin-bottom: 30px;
  display: block;
  text-align: center;
}

/*================================
service
=================================*/
  /*リストを横並び */
  .service-list {
    display: flex;
    justify-content: space-between;
    align-items: stretch; 
    max-width: 1200px;
    margin: 0 auto;
    gap: 30px;       /* カード同士の隙間 */
  }

  /* 点線を水平に変更し、菱形の中央を通す */
  .service-list::before {
    top: 30px;    /* 菱形(60px)のちょうど真ん中 */
    left: 10%;     /* 開始位置 */
    right: 10%;    /* 終了位置 */
    width: auto;
    height: 2px;
    border-left: none;
    border-top: 2px dashed #E6C766;
    bottom: auto; /* スマホ用のbottomを解除 */
  }

  /* 菱形が上、カードが下の縦並びに変更 */
  .service-item {
    display: flex;
    flex: 1 1 0;      /* 中身に関わらず均等に */
    flex-direction: column; 
    margin-bottom: 0;
    min-width: 0;
  }

  /* 菱形の位置調整 */
  .stage-number {
    margin-bottom: 50px; /* カードとの隙間 */
    z-index: 2;
  }

  /* カード本体　*/
  .service-card {
    width: 100%;
    box-sizing: border-box; /*paddingを含めた幅にする*/
    margin-left: 0; 
    min-height: 180px; 
    display: flex;
    flex-direction: column;
    overflow: visible; /* 凹みパーツを枠外に見せる */
  }

  /* 凹みの向きを「左」から「上」に変更  */
  /* 背景色マスク（上の線を消す） */
  .service-card::before {
    top: -1.5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #1E3D5B; /* 上の線を背景色でカット */
    border-bottom: none;
  }

  /* ゴールドの線（V字） */
  .service-card::after {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 13.5px solid transparent;
    border-right: 13.5px solid transparent;
    border-top: 13.5px solid #E6C766;
    border-bottom: none;
  }

  /* 文字色の強制適用 */
 .service-card h3 {
   font-size: 1.3em;
   word-wrap: break-word;
   overflow-wrap: break-word;
   hyphens: auto;
 }
 .service-card ul li {
  font-size: 0.9em;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
 }

 .bg-text {
  position: absolute;
  left: 20px; 
  top: 60%;
  transform: translateY(-50%); /* 上下の中央寄せだけ残す */
  font-size: 3.5rem; /* 少し大きめにするとインパクトが出ます */
  font-weight: bold;
  z-index: 0;
}
 /* スマホ版で個別で設定していた設定はすべて削除 */
 .service-card.mindset .bg-text,
 .service-card.base .bg-text {
  left: 20px;
  right: auto;
}


 .service-footer {
  font-size: 1.2em;
  padding-right: 0%;
}



/*================================
about
=================================*/
#program {
display: grid;
    /* 左にテキスト、右に画像（比率は4:6くらいが画像が映えます） */
    grid-template-columns: 4fr 6fr; 
    column-gap: 8%;         /* 左右の要素の間のゆとり */
    align-items: center;    /* 縦方向を中央で揃える */
    padding-right: 0;
    padding-bottom: 0;
}

/* 2. 画像を「2列目」に固定し、高さをぶち抜く */
  .program-img {
    grid-column: 2;      /* 右側（2列目） */
    grid-row: 1 / 5;     /* 1行目から4行目（タイトル〜注意書き）までを占有 */
    margin: 0;           /* スマホ用の余白リセット */
    width: 100%;
  }

  .program-img img {
    width: 100%;
    height: 100%;        /* 親の高さ（テキスト全体の高さ）に合わせる */
    min-height: 450px;
    object-fit: cover;   /* 写真が潰れないように調整 */
  }

  /* 3. 各テキスト要素を「1列目（左側）」に固定 */
  .section-title,
  .program-container,
  .notes {
    grid-column: 1;      /* 全て左側（1列目） */
    text-align: left;    /* 左寄せ */
    margin-left: 0;
    width: 100%;
  }

  .notes {
    margin-top: 20px;
  }

/*================================
contact
=================================*/
 .contact-container {
    max-width: 700px; /* スマホ600pxから微増。余裕が生まれます */
    padding: 60px 80px; /* 上下左右の余白を増やしてリッチに */
  }

  .contact-lead {
    font-size: 1rem; /* PCだと0.8remは小さすぎるので標準サイズに */
  }

  /* 3. 希望日時の並び */
  /* スマホでは縦並びだった「第◯希望」と「日付・時間」を横に並べる */
  .c-form__wish-group {
    flex-direction: row; /* 横並びにする */
    align-items: center;
    gap: 20px;
  }

  .c-form__wish-label {
    flex: 0 0 80px; /* 「第1希望」などのラベル幅を固定 */
    margin-bottom: 0;
    font-size: 0.9rem;
  }

  .c-form__wish-inputs {
    flex: 1; /* 入力欄を右側に広げる */
  }

  .c-btn {
    max-width: 400px; /* ボタンが目立ちすぎないようバランス調整 */
    font-size: 1.3rem;
  }

/*================================
footer
=================================*/
.l-footer {
    padding: 40px 5%; /* 上下の余白を少し削る */
  }

  .footer-inner {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between; /* 左右に振り分ける */
    align-items: flex-end;        
    text-align: right;              
    max-width: none;
  }

  .footer-main {
    margin-bottom: 0;               /* 下の余白をリセット */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }

  .footer-logo img {
    max-width: 160px;               /* PCではロゴを少し小さくしてコンパクトに */
    margin-bottom: 5px;
  }

  .footer-company-name {
    font-size: 1rem;
    margin-bottom: 5px;
  }

  .footer-sub {
    border-top: none;             
    padding-top: 0;
    text-align: left;             
  }

  .footer-sub-nav {
    justify-content: flex-start;      /* ナビも右寄せ */
    margin-bottom: 10px;
    gap: 20px;                      /* リンク同士の間隔 */
  }

  .footer-sub-nav a {
    font-size: 0.85rem;             /* PCならもう少し読みやすく */
  }

  .copyright {
    text-align: left;
    font-size: 0.85rem;
  }

 .floating-line-circle {
  display: none ;
 }
  
}