/* ===== 基本レイアウト ===== */
body {
  font-family:"Helvetica","Arial",sans-serif;
  font-size:16px;
  line-height:1.6;
  margin:0;
  padding:0;
  background-color:#fdfdfd;
  color:#333;
}

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

/* ===== ヘッダー全体 ===== */
header {
  display:flex;
  flex-direction:column;
  background-color:#004080;
  color:#fff;
  padding:8px 16px;
}

/* ===== ロゴ＋MENUボタン ===== */
.site-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  height:80px;
  padding:0 16px;
  background-color:#004080;
  margin:0 0 10px 0;
  font-size:1.5em;
  font-weight:bold;
}

.site-title {
  display: flex;
  align-items: center;      /* ← ロゴと文字を上下中央に揃える */
  justify-content: space-between;
  width: 100%;
  padding: 0 16px;
  margin: 0;
  background-color: #004080;
  font-size: 1.5em;
  font-weight: bold;
  height: auto;             /* ← 80px を削除して自然な高さに */
}



.site-title {
  margin-top: 1em;
  margin-bottom: 0.5em;
  line-height: 1.3;
}

.site-title a {
  color: inherit;         /* 親要素の色を引き継ぐ */
  text-decoration: none;  /* 下線を消す */
}

.logo-link {
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff;
  text-decoration:none;
}

.logo-icon {
  width:60px;
  height:60px;
  margin-right:12px;
}

/* ===== MENUボタン ===== */
.menu-toggle {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  gap:6px;
  font-size:28px;
  background:none;
  border:none;
  color:white;
  cursor:pointer;
}

/* PCではMENUボタンを消す */
@media (min-width:769px){
  .menu-toggle {
    display:none;
  }
}

/* ===== nav-sns（ナビ＋SNS） ===== */
.nav-sns {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  width:100%;
  background-color:#004080;
  opacity:1;          /* PCでは常に表示 */
  max-height:none;    /* PCでは閉じない */
  padding:0 12px;
}

/* ===== ナビゲーション ===== */
.main-nav ul {
  list-style:none;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:20px;
  margin:0;
  padding:0;
}

.main-nav ul li a {
  color:white;
  text-decoration:none;
  padding:8px 12px;
  display:block;
  white-space:nowrap;
}

/* ===== SNSアイコン ===== */
.sns-links {
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  margin-top:10px;
}

/* ===== スマホ時の開閉アニメーション ===== */
@media (max-width:768px){
  .nav-sns {
    flex-direction:row;
    justify-content:center;
    align-items:flex-start;
    gap:24px;
    flex-wrap:wrap;

    max-height:0;
    overflow:hidden;
    opacity:0;
    padding:0 12px;
    transition:max-height .3s ease, opacity .2s ease, padding .3s ease;
  }

  .nav-sns.open {
    max-height:400px;
    opacity:1;
    padding:12px;
  }

  .main-nav ul {
    justify-content:center;
    gap:12px;
  }

  .nav-sns .main-nav li {
    flex:1 0 30%;
    text-align:center;
    font-size:14px;
  }
}

/* ===== スライダー（ファーストビュー） ===== */
.hero-carousel {
  overflow:hidden;
  position:relative;
  width:100%;
  max-width:100vw;
  box-sizing:border-box;
  max-height:600px;
  height:60vh;
}

.carousel-track {
  display:flex;
  transition:transform 1s ease-in-out;
  height:100%;
}

.carousel-track a {
  flex:0 0 100%;
}

.slide {
  flex:0 0 100%;
  height:100%;
  position:relative;
}

.slide img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ===== スライド内テキスト ===== */
.caption {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:#fff;
  font-size:1.2rem;
  font-weight:bold;
  text-align:center;
  z-index:2;
}

/* ===== 矢印 ===== */
.arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background-color:rgba(0,0,0,.5);
  color:#fff;
  border:none;
  font-size:2rem;
  padding:8px 12px;
  cursor:pointer;
  z-index:1;
}
.arrow.left { left:10px; }
.arrow.right { right:10px; }

/* ===== ドット・一時停止ボタン ===== */
.carousel-controls {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  transform:translateX(-20px);
  margin-top:10px;
}

.carousel-dots {
  display:flex;
  gap:10px;
  align-items:center;
}

.carousel-dots .dot {
  width:12px;
  height:12px;
  border-radius:50%;
  background-color:#003366;
  border:2px solid #fff;
  cursor:pointer;
  transition:background-color .3s;
}

.carousel-dots .dot.active {
  background-color:#99ccff;
}

.pause-btn {
  background:none;
  border:none;
  font-size:16px;
  line-height:1;
  padding:0;
  cursor:pointer;
  color:black;
  display:flex;
  align-items:center;
  transform:translateY(5px);
}