@charset "UTF-8";

/*-------------------------------------------
セクションタイトル・テキスト
-------------------------------------------*/
.section-title {
  color: #0B2447;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-align: center;
}
.text {
  color: #0B2447;
  font-weight: 400;
  letter-spacing: 0.05em;
  font-size: 1rem;
  text-align: center;
}

/*-------------------------------------------
アイテム一覧（PC：3カラム）
-------------------------------------------*/
ul.item {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}
li.list {
  width: 32%;
  margin: 1% 1% 2% 0;
  display: flex;
  flex-direction: column;
  background: #fff;
}
li.list:nth-child(3n) {
  margin-right: 0;
}
div.image,
div.image1 {
  width: 100%;
}
div.image img,
div.image1 img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
p.content,
p.explanation {
  line-height: 1.6;
  color: #0B2447;
  text-align: start;
}

/*-------------------------------------------
Mainvisual
-------------------------------------------*/
.mainvisual {
  height: 600px;
  margin-bottom: 80px;
  position: relative;
}
.mainvisual .fade-img img {
  width: 100%;
  height: 600px;
  object-fit: cover;
}
.mainvisual .fade-img li {
  width: 100%;
  position: absolute;
  right: 0;
  opacity: 0;
  animation: fade 15s infinite;
}
.mainvisual .fade-img li:nth-child(1) {
  animation-delay: 0s;
}
.mainvisual .fade-img li:nth-child(2) {
  animation-delay: 5s;
}
.mainvisual .fade-img li:nth-child(3) {
  animation-delay: 10s;
}
@keyframes fade {
  0%, 45%, 100% { opacity: 0; }
  15%, 30% { opacity: 1; }
}
.mainvisual .catchphrase {
  font-size: 2.5rem;
  font-weight: 5500;
  color: #fff;
  text-shadow: 3px 3px 4px #0B2447;
  position: absolute;
  top: 210px;
  left: 2%;
}


/*-------------------------------------------
　news
-------------------------------------------*/
.news {
  padding: 2% 0;
  margin: 8%;
  background-color: #dddddd;
}
.news .text {
  border-bottom: 3px solid #0B2447;
  text-align: center;
}
ul.newscontent {
  overflow-y: scroll;
  text-align: center;
  height: 200px;
  padding: 0.5rem;
  margin: 3%;
}
.news li {
  margin-top: 1rem;
  border-bottom: 1px solid #0B2447;
}

/*-------------------------------------------
class紹介
-------------------------------------------*/
.program {
  margin: 80px;
  text-align: center;
}
.program .text {
  font-size: 1rem;
  margin-bottom: 8%;
}
.program-list-area {
  width: 100%;
  padding: 2rem 1rem;
}
.program-list-area a {
  text-decoration: underline;
  text-align: right;
}

program-list-are　img{
  margin-bottom: 2rem;
}




/*-------------------------------------------
voice fadein
-------------------------------------------*/
.voice-fadein {
  width: 100%;
  padding: 10rem 1rem;
}

/*-------------------------------------------
タブレット（2カラム）
-------------------------------------------*/
@media screen and (max-width: 1024px) {
  .mainvisual {
    height: 400px;
    margin-bottom: 60px;
  }
  .mainvisual .fade-img img {
    height: 400px;
  }
  .mainvisual .catchphrase {
    color: #fff;
    text-shadow: 1px 1px 1px #1f1f1f;
    font-size: 2rem;
    top: 150px;
    left: 8%;
  }
  ul.item li.list {
    width: 48%;
    margin-right: 2%;
    margin-bottom: 2rem;
  }
  ul.item li.list:nth-child(2n) {
    margin-right: 0;
  }
}

/*-------------------------------------------
スマートフォン（1カラム）
-------------------------------------------*/
@media screen and (max-width: 767px) {
  .mainvisual {
    height: 350px;
    margin-bottom: 60px;
  }
  .mainvisual .fade-img img {
    height: 350px;
  }
  .mainvisual .catchphrase {
    color: #fff;
    text-shadow: 1px 1px 1px #1f1f1f;
    font-size: 1.5rem;
    top: 100px;
    left: 6%;
  }
  .section-title {
    font-size: 16px;
    font-weight: bolder;
  }
  .text {
    font-size: 12px;
  }
  a {
    font-size: 10px;
  }
  p {
    font-size: 10px;
  }
  ul.item li.list {
    width: 100%;
    margin-right: 0;
    margin-bottom: 1.5rem;
  }
  .newscontent li {
    font-size: 8px;
    text-align: left;
    padding: 0.5rem;
  }
}
/* ================================
   ベース設定
================================ */
html, body {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
              "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  color: #0B2447;
  background-color: #fff;
}

a {
  color: #123b74;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* コンテナ中央寄せ＋最大幅 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 画像は常に画面幅内に収める */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 見出し */
h1, h2, h3 ,h4{
  line-height: 1.4;
  font-weight: 700;
  margin: 0.3rem 0.5rem ;
}

/* ================================
   モバイル調整（幅768px以下）
================================ */
@media (max-width: 768px) {
  body {
    font-size: 16px;
    padding: 0;
  }
  .container {
    padding: 0 12px; /* iPhone mini / Pixel 7a 向け余白 */
  }
  h1 {
    font-size: 1.8rem;
  }
  h2 {
    font-size: 1.4rem;
  }
}

/* ================================
   小さいスマホ（幅480px以下）
================================ */
@media (max-width: 480px) {
  body {
    font-size: 15px;
  }
  h1 {
    font-size: 1.6rem;
  }
  h2 {
    font-size: 1.3rem;
  }
}