/********************************************
  ▼ 背景画像
*********************************************/


html, body {
  height: 100%;
  margin: 0;
}

body {
  position: relative;
  z-index: 0;
  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}

/* 固定背景レイヤー */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("../img/bg-pc.jpg") center / cover no-repeat;
  z-index: -1;
}

/* スマホ表示（768px以下） */
@media screen and (max-width: 768px) {
  body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("../img/bg-sp.jpg") center / cover no-repeat;
  z-index: -1;
}
}


/********************************************
  ▼ ナビゲーション（ハンバーガーメニュー）
*********************************************/
/* ロゴ */
.brand-logo img {
  width:200px;
  height:auto;
}

.site-nav {
  position: relative;
  background: #fff;
  opacity:0.9;
  z-index: 1000;
  max-width:95%;
  margin:0 auto;
}
@media screen and (max-width: 768px) {
  .site-nav {
    max-width: 100%;
    opacity:1;
  }
}

.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em;
}

/* ナビメニュー（PC） */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 2em;
  margin: 0;
  padding: 0;
  font-family: "Expletus Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: italic;
  font-size:110%;
}

.nav-menu li {
  list-style: none;
}

.nav-menu li a {
  color: #333;
  text-decoration: none;
  font-weight: bold;
}

.nav-menu li a:hover {
  color: #e32020;
}

/* SNSアイコン（PC） */
.nav-menu .sns-icons {
  display: flex;
  gap: 15px;
}

.nav-menu .sns-icons li {
  list-style: none;
}

.nav-menu .sns-icons img {
  width: 30px;
  height: auto;
  display: block;
}

/* ハンバーガー（PCでは非表示） */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 30px;
  z-index: 2000;
}

.hamburger span {
  display: block;
  height: 3px;
  background: #333;
}

/********************************************
  ▼ スマホ & タブレット縦向き
*********************************************/
@media (orientation: portrait) and (max-width: 1200px),
       (max-width: 767px) {

  /* ナビ全体：スライドメニュー */
  .nav-menu {
  position: fixed;
  top: 0;
  right: -340px;
  width: 260px;
  height: 100%;

  /* ▼ 刷りガラス背景 */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  flex-direction: column;
  align-items: flex-start;
  padding: 5em 2em 1em;
  gap: 1.5em;

  transition: right 0.4s ease;
  box-shadow: -2px 0 13px rgba(0,0,0,0.3);
  border-left: 1px solid rgba(255,255,255,0.4);

  z-index: 1001;
}
.nav-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/bg-sp.jpg") center / cover no-repeat;
  opacity: 0.7;
  z-index: -1;
}

  /* メニュー表示 */
  .nav-menu.active {
    right: 0;
  }

  /* 通常メニュー（縦） */
  .nav-menu > li:not(.sns) {
    width: 100%;
  }

  /* ===== SNSだけ横並び ===== */
  .nav-menu .sns {
    width: 100%;
    margin-top: 20px;
  }

  .nav-menu .sns-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 0;
  }

  .nav-menu .sns-icons img {
    width: 32px;
    height: auto;
  }

  /* ハンバーガー表示 */
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 40px;
    z-index: 1002;
  }

  /* ×変形 */
  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
  }
  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(13px, -14px);
  }
  
  .hamburger p {
  font-size:60%;
  font-family: "Expletus Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: italic;
  text-align:center;
  margin:0;
  padding:0;
  }
  .hamburger.active p {
  display:none;
  }

  /* 黒幕 */
  .overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.8);
    display: none;
    z-index: 900;
  }

  .overlay.active {
    display: block;
  }
}

/********************************************
  ▼ タブレット横向き（PCと同じに戻す）
*********************************************/
@media (orientation: landscape) and (min-width: 768px) {

  .nav-menu {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 2em;
    height: auto;
    padding: 0;
    box-shadow: none;
  }

  /* ハンバーガー非表示 */
  .hamburger {
    display: none;
  }

  /* 黒幕無効 */
  .overlay {
    display: none !important;
  }
}


/********************************************
  ▼ メインカラム
*********************************************/
.keySection {
  max-width:95%;
  margin:20px auto 0;
}
@media screen and (max-width: 768px) {
  .keySection {
    max-width: 100%;
  }
}

.newsSection {
  max-width:1000px;
  margin:20px auto 0;
  padding: 1em;
  background: #fff;
  border-radius: 6px;
  position:relative;
  box-sizing: border-box;
  text-align:left;
}
.newsSection h3 {
  text-align:center;
  border-bottom:1px solid #555;
  padding:0 0 0.5em;
}
.newsSection .newsDate {
  text-align:right;
  font-family: "Expletus Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: italic;
  font-size:90%;
  
}


/* 全体 */
.main_up {
  width:100%;
  height:auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 5em;
  margin: 0 auto;
  padding: 0;
  text-align:center;
}
.teaser-video {
  width:100%;
  padding: 1em;
  background: #fff;
  border-radius: 6px;
  position:relative;
  box-sizing: border-box;
}

.main_wrapper {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin: 0 auto;
  max-width: 100%;
  padding: 0;
}
.main_up img {
  max-width:100%;
  height:auto;
  padding:1em;
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  .main_up {
  gap: 2em;
}
.teaser-video {
  width:100%;
  padding: 0;
}
}

.word-img {
  width: 100%;
  padding: 1em;

  /* 高さは中の背景で表現 */
  aspect-ratio: 198 / 43; /* ← 元画像の比率に合わせて調整 */

  background-image: url("../img/word_01.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  box-sizing: border-box;
}

/* スマホ用（画像切り替え） */
@media screen and (max-width: 768px) {
  .word-img {
    width: 95%;
    background-image: url("/assets/img/word_01_sp.png");
    aspect-ratio:99 / 43;
  }
}

.thumbox {
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  gap: 1em;              /* サムネ間余白 */
}

/* 各サムネ */
.thumbox a,
.thumbox img {
  flex: 0 0 calc(20% - 1em); /* 5列 */
  box-sizing: border-box;
  padding:0;
}

.thumbox img {
  width: 100%;
  height: auto;
  display: block;
}
@media screen and (max-width: 768px) {

  .thumbox a,
  .thumbox img {
    flex: 0 0 calc(100% - 1em); /* 2列 */
  }

}

  



/* メインビジュアル（左：7） */
/* PC（横並び） */
.main_img {
  flex: 7;
  width: 0;            /* slick 安定用 */
  overflow: hidden;
}

/* ▼ スマホ（縦並び） */
@media screen and (max-width: 768px) {
  .main_img {
    width: 100%;       /* ★ これが超重要 */
    flex: none;        /* flex 計算から外す */
  }
}


.main_img img {
  width: 100%;
  height: auto;
  display: block;
}

/* メインスライダー */
.slid_main {
  width: 100%;
}

/* 画像共通 */
.slid_main img {
  width: 100%;
  height: auto;
  display: block;
}

/* ▼ スマホ調整 */
@media screen and (max-width: 768px) {

  .main_img {
    max-height: auto;      /* ← 好みで調整 */
    overflow: hidden;
  }

  .slid_main img {
    height: auto;          /* ← 上と揃える */
    object-fit: cover;     /* トリミング */
  }
}

/* ==========================
   slick ドット（サイバー脈動）
========================== */
.slick-dotted.slick-slider {
    margin-bottom: 50px;
}

/* ドット全体位置 */
.slick-dots {
  bottom: -40px;
}

/* クリック領域 */
.slick-dots li {
  width: 20px;
  height: 20px;
  margin: 0 0.5em;
}

/* ボタン */
.slick-dots li button {
  width: 20px;
  height: 20px;
  padding: 0;
  position: relative;
}

/* 通常ドット */
.slick-dots li button:before {
  content: "";
  display: block;
  margin: auto;

  width: 10px;
  height: 10px;
  border-radius: 50%;

  background: rgba(255, 60, 60, 1);


  transition: all 0.3s ease;
}

/* アクティブドット：脈動 */
.slick-dots li.slick-active button:before {
  background: rgba(255, 60, 60, 1);

  animation: cyberPulse 1.8s ease-in-out infinite;
}

/* hover（PC） */
.slick-dots li button:hover:before {
  transform: scale(1.3);
  box-shadow:
    0 0 10px rgba(0, 234, 255, 1),
    0 0 20px rgba(0, 234, 255, 0.9);
}


/* ==========================
   脈動アニメーション
========================== */
@keyframes cyberPulse {
  0% {
    transform: scale(1);
    box-shadow:
      0 0 6px rgba(0, 234, 255, 0.6),
      0 0 10px rgba(0, 234, 255, 0.4);
    opacity: 1;
  }

  50% {
    transform: scale(1.6);
    box-shadow:
      0 0 12px rgba(0, 234, 255, 1),
      0 0 24px rgba(0, 234, 255, 0.9),
      0 0 30px rgba(0, 234, 255, 0.7);
    opacity: 0.9;
  }

  100% {
    transform: scale(1);
    box-shadow:
      0 0 6px rgba(0, 234, 255, 0.6),
      0 0 10px rgba(0, 234, 255, 0.4);
    opacity: 1;
  }
}

/* タッチデバイスでは hover を無効化 */
@media (hover: none) {
  .slick-dots li button:hover:before {
    transform: none;
    box-shadow: none;
    opacity:0.3;
  }
}


/* フォーカスでは光らせない
.slick-dots li button:focus:before {
  opacity: 0.4;
  
} */


/* slick ドットここまで */


/* 右側（動画 + お知らせ：3） */
.main_sub {
  flex: 3;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media screen and (max-width: 768px) {
  .main_sub {
    gap: 50px;
}
}

/* Youtubeデフォルト（スマホ用） */
.youtubebox iframe,
.teaser-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* お知らせ */
.defbox,
.youtubebox,
.infobox {
  padding: 1em;
  background: #fff;
  border-radius: 6px;
  position:relative;
}
.defbox h3,
.youtubebox h3,
.infobox h3 {
  font-family: "Expletus Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: italic;
  font-size: 150%;
  margin: 0 0 0.5em;

  background: linear-gradient(
    90deg,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #8b00ff
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btnBox {
    position: absolute;
    top: 1em;
    right: 1em;
}

.btnMore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;

  padding: 0.2em 1.5em;
  margin: 0;

  font-family: "Expletus Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.15em;
  text-transform: uppercase;

  color: #fff;
  text-decoration: none;
  background: linear-gradient(
    135deg,
    #069bc6,
    #0a89b3
  );

  border-radius: 100vh;
  position: relative;
  overflow: hidden;

  box-shadow:
    0 3px 2px rgba(0,0,0,0.25);

  transition: all 0.3s ease;
}

/* テキスト */
.btnMore .more {
  position: relative;
  z-index: 2;
}

/* 光のスライド */
.btnMore::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 120%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );
  transition: left 0.6s ease;
}

/* hover */
.btnMore:hover {
  transform: translateY(2px);
  box-shadow:
    0 0 0 rgba(0,0,0,0.35);
}

.btnMore:hover::before {
  left: 120%;
}

/********************************************
  ▼ スケジュール
*********************************************/
.scheduleSec {
  max-width:100%;
  margin:50px 0 0;
  padding:0;
}

.defbox  {
  max-width:70%;
  margin:0 auto;
}
@media screen and (max-width: 768px) {
  .defbox {
    max-width: 100%;
  }
}

.calendar_iframe {
  width: 100%;
  border: 0;
  display: block;
}



/******************************
  ▼ スマホ（768px以下）で縦並び
******************************/
@media screen and (max-width: 768px) {
  .main_wrapper {
    flex-direction: column;
  }

  .main_sub {
    width: 100%;
  }
}

/********************************************
  ▼ お知らせ用
*********************************************/
/* リストのマークを消す */
.eventUl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;           /* 横並び */
  align-items: center;
  gap: 1em;
}

/* li 共通 */
.eventUl li {
  margin: 0;
  padding: 2em 0;
  font-size: 14px;
}

/* 日付（1つ目の li） */
.eventUl li:first-child {
  background: #000;
  color: #fff;
  font-size:70%;
  min-width:80px;
  text-align:center;
  border-radius: 100vh;
  white-space: nowrap;
  padding: 0.2em 0.7em;
  
}
.newsBox {
  border-top:1px solid #333;
  
}
.newsBox a {
  text-decoration:none;
  
}

@media screen and (max-width: 768px) {
  .eventUl {
    flex-direction: column;
    align-items: flex-start;
    gap:0.5em;
  }
  .eventUl li {
    margin: 0;
  padding: 0 0 1em;
  }

/* 日付（1つ目の li） */
  .eventUl li:first-child {
    margin: 1em 0 0;
  }
}


/********************************************
  ▼ フッター用
*********************************************/
footer {
  width:100%;
  text-align:center;
  padding:1em;
  margin:10em 0 0;
  box-sizing: border-box;
  background-color:#333;
  opacity:0.8;
}

footer .text_link a {
  color:#fff;
}
footer .copyright,
footer p {
  color:#d9dce6;
  font-size:70%;
}