/* style.css */

/* ベーシックリセット */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Noto Sans JP", "Meiryo", sans-serif;
  background: #065fc4;     /* 全体の背景色 */
  color: #000;              /* 全体の文字色 */
  line-height: 1.7;
}

a:link {
  color:inherit;      /* リンクの色を変えない */
  text-decoration: none;      /* リンクの下線を消す */
 }
 
 a:visited {
  color:inherit;      /* リンクの色を変えない */
  text-decoration: none;     /* リンクの下線を消す */
 }

 a:hover {
  color: #e6dace;     /* カーソルを重ねた時の色 */
 }
 
 a:active {
  color:inherit;      /* リンクの色を変えない */
  text-decoration: none;     /* リンクの下線を消す */
 }


/* メニューからリンク先へ飛んだ際の位置ずれ対策  */ 
 html {
  scroll-padding-top: 80px;
}



/* ナビゲーションバー  */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ヘッダーをFlexbox化し高さを固定 */
header {
  background:  #065fc4 !important;
  border-bottom: 1px solid #e6dace;
  position: sticky;
  top: 0;
  z-index: 1000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

header .container {
  display: flex;
  align-items: center;       /* 垂直方向中央揃え */
  justify-content: space-between;
  height: 60px;              /* 高さを統一 */
}

.logo {
  font-family: "open sans", serif;  /* フォントのみ変更可 */
  font-size: 1.5em;
  font-weight: bold;
  letter-spacing: 0.1em;    /* 文字間隔英文字なので少し空ける */
  color: #fff;
  padding: 0 10px;
  height: 100%;
  display: flex;
  align-items: center;       /* ロゴの垂直中央揃え */
  z-index: 1100;             /* メニューより前面に */
  position: relative;
}

/* ナビゲーション */
nav#pc-menu ul {
  display: flex;
  list-style: none;
  height: 100%;
  align-items: center;       /* リンクを垂直中央揃え */
  gap: 15px;  /* 行や列の間のすき間 */
}

nav#pc-menu li {
  margin-left: 1.5em;
}

nav#pc-menu a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  font-size: 1em;
  line-height: 60px;         /* メニューリンクの高さを揃える */
}

nav#pc-menu a:hover {
  color: #e6dace;
}

.hamburger {
  display: none;
  width: 30px;
  height: 25px;
  position: absolute;
  top: 23px;
  right: 20px;
  z-index: 150;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
.hamburger span {
  display: block;
  height: 4px;
  background: #fff;
  border-radius: 2px;
}

/* スマホメニュー */
.sp-menu {
  display: none;
  position: fixed;
  top: 60px;
  right: 0;
  background-color: #065fc4 !important;
  width: 100%;
  text-align: center;
  z-index: 1000 !important;
}
.sp-menu.open {
  display: block;
}
.sp-menu ul {
  list-style: none;
}
.sp-menu li {
  border-bottom: 1px solid #e6dace;
}
.sp-menu a {
  display: block;
  padding: 1em;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

/* メインビジュアル */
.hero {
  padding: 80px 0 40px 0;
  text-align: center;
  background: linear-gradient(90deg, #c1ab05 0%, #fff9e6 50%, #c1ab05  100%);
  color: #000;
}

.hero h1 {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 1em;
}

.benefit {
  font-size: 1.1em;
  color: #000;
  line-height: 1.8;
}

section {
  margin: 40px 0;
}

p {
  font-size: 1em; 
  margin-bottom: 0.6em;
}

h2 {
  font-size: 1.6em;
  text-align: center;
  margin-bottom: 0.8em;
  color: #000;
}

h3 {
  font-size: 1em;
  color: #000;
}


.radio, .rodoku_video, .options, .contact {
  background:#fff; 
  border-radius: 14px;
  box-shadow: 0 0 10px rgba(127, 144, 221, 0.1);
  padding: 30px 2vw;
  margin: 30px auto;
  max-width: 645px;
}

.radio1 .radio {
  margin-bottom: 1.5em;
}

.radio-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.radio-text {
  flex: 1;
}

.radio-image {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 240px;
  height: 100%;
}

.radio-image img {
  width: 240px;
  height: 345px;
  object-fit: cover;
  border-radius: 8px;
}

.radio-text-bottom {
  margin-top: 1px; /* 任意で調整 */
}

/* スマホ表示用 */
@media screen and (max-width: 768px) {
  .radio-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .radio-image {
    width: 200px;
    height: auto;
    margin: 16px auto 0 auto; /* 上マージン16px、左右自動でセンター寄せ */
    justify-content: center; /* 中央揃え */
  }
}




.contact-btn {
  display: inline-block;
  padding: 1em 2em;
  margin-top: 1em;
  background: linear-gradient(90deg, #e6bd06 0%, #fff9e6 50%, #e6bd06  100%); 
  color: #000;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s;
}

.contact-btn:hover {
  background: #DBDBDB;
}

footer {
  background: #f5ece6;
  text-align: center;
  padding: 2em 0;
  color: #000;
  font-size: 0.9em;
}

@media (max-width: 900px) {
  .container {
    padding: 0 2vw;
  }
  .main-course, .options, .contact {
    padding: 18px 3vw;
    max-width: 100vw;
  }
}

@media (max-width: 650px) {
  nav#pc-menu {
    display: none;
  }
  .hamburger {
    display: flex;
  }

  .hero h1 {
    font-size: 1.3em; /* スマホ用サイズに調整 */
  }

  .hero p {
    font-size: 0.8em; /* スマホ用サイズに調整 */
  }

  h2 {
    font-size: 1.2em; /* スマホ用サイズに調整 */
  }

  p {
    font-size: 0.77em; /* スマホ用サイズに調整 */
  }

  .options .cross h4 {
    font-size: 1em;
  }

  .main-course .koe h4 {
    font-size: 1em;
  }
  
  .main-course .koe p {
    font-size: 0.77em;
  }
}

@media (min-width: 651px) {
  .sp-menu {
    display: none !important;
  }
}