:root{
--blue:#0f3f8f;
--light:#f4f8fc;
--accent:#4eb5ff;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:"Yu Gothic","Hiragino Sans",sans-serif;
background:var(--light);
color:#16396b;
padding-bottom:80px;
}

/* HERO */

@media(max-width:768px){
  .hero{
    padding: 50px 20px;
  }
}

.hero{
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.9) 40%,
      rgba(255,255,255,.7) 70%,
      rgba(255,255,255,0) 100%
    ),
    url("../images/hero.JPG");
  background-size:cover;
  background-position:center;
  animation: fadeIn 1.2s ease;
  padding: 80px 40px;
  display:flex;
  align-items:center;
}

@media(max-width:768px){
  .hero-content{
    margin-left:0;
    padding:0 10px;
  }
}

.hero-content{
  max-width:700px;
  margin-left:40px;

}

@media(max-width:768px){
  .hero h1{
    white-space: normal;   /* ←これだけで改善する */
  }
}

.hero h1{
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  white-space: nowrap;
  margin-left:10px;
  background: linear-gradient(90deg, #0f3f8f, #4eb5ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing:2px;
  position:relative;
}

.hero h1::after{
  content:"";
  display:block;
  width:120px;
  height:4px;
  background:#4eb5ff;
  margin-top:15px;
  border-radius:2px;
}

.hero p{
  font-size:1.1rem;
  line-height:2;
  margin-top:15px;
  color:#2b4c7e;
}

.hero-btn{
display:inline-flex;
align-items:center;
gap:10px;
margin-top:30px;
padding:14px 28px;
background:linear-gradient(90deg,#4284d5,#173f92);
color:white;
text-decoration:none;
border-radius:999px;
font-weight:bold;
}

@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* 共通 */
.container{
width:min(1200px,92%);
margin:auto;
}

.section{
padding:40px 0;
}

.title{
font-size:1.5rem;
margin-bottom:20px;
}

/* NEWS */
.news-box{
background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,.05);
}

.news-item{
display:flex;
gap:20px;
padding:25px;
border-bottom:1px solid #eee;
}

.news-item:last-child{
border:none;
}

.date{
font-weight:bold;
color:#4eaaf8;
min-width:110px;
}

.news-footer{
  text-align:right;     /* ←右寄せ */
  margin-top:10px;
}

.news-link{
  color:#2b6cb0;
  text-decoration:none;
  font-weight:bold;
}

.news-link:hover{
  text-decoration:underline;
}

/* CARD */
.cards{
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:20px;
}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.card:hover{
transform:translateY(-5px);
}

.card i{
font-size:3rem;
color:#5ab8ff;
margin-bottom:15px;
}

.card h3{
font-size:1rem;
}

/* アイコン */
.card i{
font-size:3rem;
color:#5ab8ff;
margin-bottom:15px;
}

/* ボタン */
.sub-box{

  display:flex;              /* ←レイアウト維持 */
  flex-direction:column;
  justify-content:center;

  display:block;
  background:white;
  padding:20px;
  border-radius:15px;
  box-shadow:0 5px 15px rgba(0,0,0,.08);
  text-align:center;
  display:flex;              /* ←追加 */
  flex-direction:column;     /* ←縦並び */
  justify-content:center;    /* ←上下中央 */

  text-decoration:none;
  color:inherit

}

/* 説明文 */
.sub-box p{
  text-align: justify;      /* ←これ超重要（両端揃え） */
  line-height:1.8;
  margin-top:10px;
}

/* スマホ対策 */
@media(max-width:768px){
  .sub-box p{
    text-align:left;        /* ←スマホは左揃えが見やすい */
  }
}

.sub-box h3{
  margin-bottom:15px;
}

.sub-box:hover{
  transform:translateY(-5px);
  box-shadow:0 10px 25px rgba(0,0,0,.1);
  transition:.2s;
}

.sub-buttons{
  display:flex;
  gap:10px;
  margin-top:15px;
}

.sub-box:not(.no-hover):hover{
  transform:translateY(-5px);
}

.no-hover:hover{
  transform:none !important;
  box-shadow:0 5px 15px rgba(0,0,0,.08) !important;
}

.mini-btn{
  flex:1;
  text-align:center;
  padding:12px 0;
  background:#2b6cb0;
  color:white;
  border-radius:10px;
  text-decoration:none;
  font-weight:bold;
}

.mini-btn:hover{
  background:#1d4f9b;
}

.icon{
  display:block;
  font-size:2.5rem;
  color:#5ab8ff;
  margin-bottom:10px;
}

/* FOOTER */
footer{
padding:60px 20px;
text-align:center;
}

footer h2{
  font-size:1.8rem;   /* ←大きくする */
  letter-spacing:1px; 
  color:var(--blue);
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap; /* スマホ対応 */
}

.footer-logo{
  height:35px;  /* ←ここでサイズ調整 */
}

.logo-group{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

.logo-group img{
height:60px;
}

/* 下ナビ */
.bottom-nav{
position:fixed;
bottom:0;
width:100%;
background:var(--blue);
display:flex;
justify-content:space-around;
padding:12px 0;
}

.bottom-nav a{
color:white;
text-decoration:none;
font-size:.8rem;
display:flex;
flex-direction:column;
align-items:center;
}

.bottom-nav i{
font-size:1.3rem;
margin-bottom:5px;
}

/* レスポンシブ */
@media (max-width:768px){

  /* タイトル */
  .hero{
    padding:50px 20px;
    background-position:center;
  }

  .hero-content{
    margin-left:0;
    max-width:100%;
  }

  .hero h1{
    font-size:1.7rem;
    white-space:nowrap;   /* 1行固定 */
    margin-left:0;
    letter-spacing:0;
  }

  .hero h1::after{
    width:80px;
  }

  .hero p{
    font-size:0.95rem;
    line-height:1.8;
  }

  /* お知らせ */
  .news-item{
    flex-direction:column;
    gap:10px;
  }

  /* カードを縦並び */
  .cards{
    grid-template-columns:1fr;
    gap:15px;
  }

  /* ボタン折返し防止 */
  .sub-buttons{
    flex-wrap:nowrap;
  }

  .mini-btn{
    font-size:1rem;
    white-space:nowrap;
  }

  /* 外部リンク画像 */
  .link-cards img{
    width:100%;
    max-width:350px;
  }

  .footer-inner{
    flex-wrap: nowrap;
  }

  footer h2{
    white-space: nowrap;
    font-size: 0.95rem;
  }

}

  .hero{
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.9) 70%,
        rgba(255,255,255,.3) 100%
      ),
      url("../images/hero.JPG");

    background-size:cover;
    background-position:center;
  }

}

.news-item{
flex-direction:column;
}
}

.external-links{
  padding:60px 0;
  text-align:center;
  margin-top: -60px;
}

.link-cards{
  display:flex;
  justify-content:center;
  gap:30px;
  margin-top:30px;
  flex-wrap:wrap;
}

.link-cards a{
  display:block;
  transition:.3s;
}

.link-cards img{
  width:400px;        /* ←サイズ調整 */
  border-radius:10px; /* ←ちょい丸く */
  box-shadow:0 5px 15px rgba(0,0,0,.1);
}

.link-cards a:hover{
  transform:translateY(-5px);
}