:root{
  /* Tweak freely */
  --main-color: #FF7E57;
  --accent-color:#FFB78A;
  --orange-deep:#F1AE16;    /* accents/hover */
  --ink:#000;            /* text */
  --muted:#6b7280;          /* secondary text */
  --bg:#ffffff;             /* base */
  --light:#f7f7f7;
  --line:#e6e6e6;
  --bubble-l:#dbe6ff;     
  --bubble-r:#ffe0ef;    
  --tile:#fdeac9;
}

/* ==============================
   1. BASE / RESET
============================== */
*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}

html,body{
  margin:0;
  padding:0;
}

body{
  font-family:'Inter','Noto Sans JP',system-ui,Segoe UI,Arial;
  color:var(--ink); 
 background: url('../image/main-1.png') no-repeat center center;
  background-size: cover;   /* 画面いっぱいに拡大 */
  background-attachment: fixed; /* スクロールしても背景固定（必要な場合） */
}

a{
  color:inherit; 
  text-decoration:none
}

.container{
  margin:0;
  padding:0 24px;
}

.container.sm{
  max-width:760px;
}

/* ==============================
   2. HEADER / NAV
============================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Header inner */
.header-inner {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 40px 24px;
   background-image: url('../image/nav.png'); /* ← ナビ用画像 */
  background-size: 1900px;        /* 横いっぱい */
  background-position: center;   /* 中央 */
  background-repeat: no-repeat;
}

/* Brand (logo) */
.brand {
 margin-left: 16px;
}

.brand img {
  display: block; /* 余白防止 */
}

/* Navigation */
.nav {
  display: flex;
  gap: 35px;
  font-weight: 900;
  margin-left: auto;
}

.nav a {
  letter-spacing: 0.15em;
}

/* Hamburger (mobile) */
.hamburger {
  display: none;

  border: none;
  background: transparent;

  font-size: 22px;
}

/* ==============================
   3. HERO SECTION
============================== */
.hero{
   position: relative; /* 中の絶対配置の基準 */
  width: 100%;
  height:calc(100vh - 64px);      /* 画像を置くスペースの高さ */
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 20%;           
  left: 50%;          /* 横中央 */
  transform: translate(-50%, -50%); /* 中央に補正 */
  width: 300px;       /* サイズ調整 */
  height: auto;       /* 縦横比維持 */
}
.hanabi-1 {
  position: absolute;
  top: -120px;
  left: -120px;
  width: 60vw;
  height: auto;
}

.hanabi-2 {
  position: absolute;
  top: -125px;
  right: -120px;
  width: 52.1vw;
  height: auto;
}

.hureru {
  position: absolute;
  top: 60%;           
  left: 20%;          
  transform: translate(-50%, -50%);
  width: 400px;       
  height: auto;       
}
.taberu {
  position: absolute;
  top: 65%;           
  left: 50%;          
  transform: translate(-50%, -50%);
  width: 400px;       
  height: auto;       
}
.miru {
  position: absolute;
  top: 60%;           
  left: 80%;          
  transform: translate(-50%, -50%);
  width: 400px;       
  height: auto;       
}
.hito-1 {
  position: absolute;
  bottom: -160px;
  left: -50px;
  width: 52.1vw;
  height: auto;
  bottom: -160px;
}

.hito-2 {
   position: absolute;
  bottom: -160px;
  right: -250px;
  width: 65vw;
  height: auto;
  bottom: -260px;
}

.main-2 {
  position: absolute;
  bottom: 0;          /* 親の下端に沿って配置 */
  left: 50%;           /* 横中央 */
  transform: translateX(-50%); /* 横中央補正 */
  width: 100%;
  height: 150px;
  z-index: -1;
}

.movie-wrap {
  position: absolute;       /* ヒーローの中で絶対配置 */
  top: 35%;                 /* 縦中央 */
  left: 20%;                /* 横中央 */
  transform: translate(-50%, -50%);
  width: 500px;             /* ロゴサイズ */
  z-index: 2;
   border-radius: 12px;                  /* 角丸 */
  box-shadow: 0 8px 20px rgba(0,0,0,0.35); /* ドロップシャドウ */
  overflow: hidden;
}

.movie-wrap iframe {
 width: 100%;
  height: auto;             /* 縦横比維持 */
  aspect-ratio: 16 / 9;     /* 高さ自動計算 */
  border: 0;
}

/* ==============================
   4. EVENT SECTION
============================== */

.event-hero {
  position: relative;     /* 中の絶対配置の基準 */
  display: inline-block;
  text-align: center;     /* 中央揃え */
  width: 100%;
}
#event {
  width: 100%;
  padding: 0;
  margin :0;
  text-align: center;
}

#event h1{
  display: inline-block;
  width: 400px;
  font-size: 50px;  /* size → font-size に修正 */
  color: #000;
  margin: 40px auto 20px auto;
  text-align: center;
  letter-spacing: .1em;
  border-bottom: 2px solid var(--accent-color);
  display: block;
  padding: 20px 0;
}

.event-image {
 display: block;
  width: 300px;           /* 画像サイズ */
  height: auto;
  margin: 0 auto;
  transform: translateX(150px);
}

.event-title {
  position: absolute;     /* 画像の上に重ねる */
  top: 50%;               /* 縦中央 */
  left: 50%;              /* 横中央 */
  transform: translate(-50%, -50%); /* 完全中央 */
  font-size: 50px;
  font-weight: 700;
  color: #fff;            /* 文字色 */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* 文字を見やすく */
}

#event .container {
  max-width: none;       
  padding: 0;
}


.section-title{
  text-align:center;
  font-family:'Noto Sans JP',sans-serif;
  font-weight:700;
  letter-spacing:.08em;
  margin:0 0 24px;
}

.section--news {
  display: flex;            /* フレックスボックスにする */
  flex-direction: column;   /* 縦方向に並べる */
  justify-content: center;  /* 縦方向の中央揃え */
  align-items: center;      /* 横方向の中央揃え */ 
  padding:0;
}

.news-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  text-align: center;
}

.news-list li {
  margin-bottom: 12px;
}

.news-list li time {
  font-size: 16px;
  font-weight: 700;
}

.news-list li a {
  font-size: 20px;
  font-weight: 600;
}

.pill-btn {
  display: inline-block;

  padding: 14px 40px;          /* ← 大きさ */
  font-size: 16px;             /* ← 文字サイズ */
  font-weight: 700;

  color: #fff;                 /* 文字色 */
  background: #F47B61; /* ボタン色 */

  border-radius: 9999px;       /* 丸いボタン */
  text-align: center;
  transition: all .3s ease;
}

.pill-btn:hover {
  background: #8E483C;
  transform: translateY(-2px);
}

#event, 
.section--news {
  text-align: center;
}

/* ==============================
   Carousel
============================== */
.carousel {
  position: relative;          
  width: 100%;
  padding: 0;
  margin: 0 auto;    
  overflow: hidden;
  background: linear-gradient(180deg, var(--main-color), var(--accent-color));
}

.car-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 40px 0;
  width: max-content;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  transition: transform 0.4s ease;
}

.car-track::-webkit-scrollbar {
  display: none;
}

.card{
  background:#fff;
  border-radius:8px; 
  width:260px;
  min-height:360px; 
  flex:0 0 260px;
  box-shadow:0 2px 6px rgba(0,0,0,.08); 
  transform:translateY(0); 
  transition:transform .2s;
  scroll-snap-align: start;
}

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

.thumb{
  height:180px;
  background:#bbb center/cover no-repeat;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
}

.card-body{
  padding:16px 14px;
}

.card-body h3{
  color: #000;
  margin:0;
  font-weight:700;
  font-size:18px;
}

.car-btn{
  position:absolute; 
  top:50%; 
  transform:translateY(-50%);
  z-index: 10;
  width:44px;
  height:44px;
  border-radius:50%;
  border:0;
  background:#fff;
  color:#333;
  box-shadow:0 2px 8px rgba(0,0,0,.2); 
  cursor:pointer;
}

.car-btn:hover{
  background:#fff8;
}
.prev{
  left:10px;
} 

.next{
  right:10px;
}

/* ==============================
  5. NEWS SECTION
============================== */

.news-hero {   
  text-align: center;
  margin-bottom: 40px;         /* 下に余白 */
  position: relative;
  inset: 0;
}

.section--news h1 {
  position: relative;               /* 中央揃えの基準 */
  font-size: 50px;
  font-weight: 700;
  color: #000;
  text-align: center;
  letter-spacing: 0.1em;
  width: 400px;
  margin: 0 auto 10px auto;       /* 横中央＋下マージン */
  padding: 20px 0;
  border-bottom: 2px solid var(--accent-color);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 文字を見やすく */
  display: block;                   /* 中央寄せの基本は block + margin auto */
}

.container.sm {
  max-width: 760px;
  margin: 0 auto 100px auto;  /* 上下0, 左右自動で中央寄せ */
}

.news-title {
  position: absolute;        /* 画像の上に重ねる */
  top: 50%;                  /* 縦中央 */
  left: 50%;                 /* 横中央 */
  transform: translate(-50%, -50%); /* 完全中央に配置 */
  font-size: 50px;
  font-weight: 700;
  color: #fff;               /* 文字色は白が見やすい */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* 背景でも見やすく */
  letter-spacing: 0.1em;
}

.news-image {
   position: relative; 
 display: block;
  width: 300px;           /* 画像サイズ */
  height: auto;
  margin: 0 auto;
  transform: translateX(150px);
}

.news-list{
  list-style:none;
  margin:0;
  padding:0;
}

.news-list li{
  padding:18px 0;
  text-align: center;
}

.news-list time{
  display:block;
  color:#888;
  font-size:13px;
  margin-bottom:6px;
}

.news-list a{
  font-weight:600;
}

.news-list .divider{
  display:block;
  height:1px;
  background:#cfcfcf;
  margin-top:14px;
}

.center{
  text-align:center;
  margin-top:20px;
}



/* Banners */

.banners{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin:56px auto;
}

.banner{
  min-height:120px;
  background:#333;
  border-radius:10px;
}

/* ==============================
   6. HISTORY PAGE
============================== */
.history-bg{
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: auto;
}
/* ================================
   CHAT LAYOUT
================================ */
.container-intro {
  text-align: center;
}

.con-in {
  font-size: 28px;
  margin: 50px 0;
  border-top: 2px solid var(--mian-color);
  border-bottom: 2px solid var(--accent-color);
  display: inline-block;
  padding: 20px 0;
  letter-spacing: .12em;
  width: 800px;
}

.chat {
 list-style: none;
  padding: 0;
  margin: 0 auto;       /* 横中央 */
  display: grid;
  gap: 22px;

  max-width: 750px;     /* 横幅指定 */
  width: 100%;
}

.msg {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.msg.right {
  flex-direction: row-reverse;
}

.avatar {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: #fdeac9;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px) scale(.98);
}

.avatar.emerge {
  animation: avatarFade .35s ease forwards;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bubble {
  position: relative;
  max-width: 74ch;
  padding: 14px 18px;
  border-radius: 16px;
  line-height: 1.7;
  box-shadow: 0 4px 12px #0001;
  opacity: 0;
  transform: translateY(8px) scale(.98);
  color: #222;
}


.msg.left .bubble {
  background: #FFDBF3;
}

.msg.right .bubble {
  background: #dbe6ff;
}

.bubble::after {
  content: "";
  position: absolute;
  bottom: 10px;
  border: 10px solid transparent;
}

.msg.left .bubble::after {
  left: -10px;
  border-right-color: #FFDBF3;
}

.msg.right .bubble::after {
  right: -10px;
  left: auto;
  border-left-color: #dbe6ff;
  border-right-color: transparent;
}

/* ================================
   ANIMATION
================================ */

.bubble.emerge {
  animation: fadeUp .35s ease forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.bubble.typing {
  border-right: 2px solid #0002;
  white-space: pre-wrap;
  overflow: hidden;
}

@keyframes avatarFade {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* small screens */
@media (max-width:720px){
  .avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
  }
  .bubble {
    font-size: 15px;
  }
}

/* ==============================
   7.Event
============================== */
/* ===== Event hero ===== */
.event-hero {
  position: relative;
  inset: 0;
  width: 100%;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.event-bg {
  width: 100vw;
}

.event-hero-title {
  font-size: clamp(22px, 3vw, 30px);
  color: #111;
}

/* ===== Sections ===== */
.event-section {
  padding: 56px 0 40px;
  text-align: center;
}

.event-section-head {
  margin-bottom: 32px;
}

.event-section-head--double {
  display: flex;
  justify-content: center;
  gap: 80px;
}

.event-section-title {
  font-size: 28px;
  letter-spacing: .12em;
  color: #000;
  border-top: 2px solid var(--mian-color);
  border-bottom: 2px solid var(--accent-color);
  display: inline-block;
  width: 300px;
  padding: 20px 0;
}

.event-section-line.small {
  width: 80px;
}

.event-section-line.small.under {
  margin-top: 4px;
}

/* ===== Carousel ===== */
.event-carousel{
  position: relative;
  width: min(1200px, 100%);
  margin: 0 auto 24px;
  padding: 0 56px;             
}

.event-track{
  display: flex;
  gap: 54px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 24px 0;
}

.event-track::-webkit-scrollbar { display:none; }

.event-card{
  flex: 0 0 320px;               
  height: 652px;
  border-radius: 24px;
  overflow: hidden;
  background-color: #000;
  transform: scale(1);
  backface-visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.event-card:hover {
  transform: scale(1.08);
}

.event-card img{
  display: block;
  width: 350px;
  height: 700px;
  object-fit: cover;
  object-position: center;      
}


.event-card-title {
  font-size: 14px;
  padding: 8px 12px 16px;
  color: #333;
}

/* arrows */
.event-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: #ff8a65;
  color: #fff;
  cursor: pointer;
  z-index: 10;                   
}

.event-btn.prev { left: -18px; }
.event-btn.next { right: -18px; }

.event-divider {
  width: 900px;
  margin: 0 auto;
  border: 0;
  border-top: 3px solid #FF7E57;
}

/* ===== Info + Map ===== */
.event-info-map {
  padding: 64px 16px 80px;
}

.event-info-box {
  max-width: 900px;
  margin: 0 auto;
  background-size: 1000px;  /* 画像を要素にフィットさせる */
  background-repeat: no-repeat; /* 繰り返さない */
  background-position: center;  /* 中央に配置 */
  background-image: url(../image/map-img.png);

  border-radius: 24px;
  padding: 32px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
}

.event-info-text{
  text-align: center;
}

.event-info-text dl {
  color: #fff;
  margin: 0 0 20px;
}

.event-info-text dt {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 4px;
}

.event-info-text dd {
  margin: 0 0 10px;
  font-size: 20px;
  color: #fff;
  font-weight: 700;
}

.event-cal-btn {
  padding: 10px 24px;
  border-radius: 999px;
  border: none;
  background: #F47B61;
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  cursor: pointer;
}

.event-cal-btn:hover {
  background: var(--accent-color);
}

.event-map {
  background: #b3b3b3;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-map-label {
  color: #222;
  font-weight: 700;
}

/* responsive */
@media (max-width: 800px) {
  .event-section-head--double {
    flex-direction: column;
    gap: 24px;
  }
  .event-info-box {
    grid-template-columns: 1fr;
  }
  .event-btn.prev { left: 4px; }
  .event-btn.next { right: 4px; }
}

/* ==============================
   8.News 
============================== */
/* ==============================
   NEWS PAGE
============================== */

.news-hero-title {
  font-size: 26px;
  letter-spacing: .18em;
  margin-bottom: 8px;
  color: #111;
}

.news-hero-sub {
  font-size: 14px;
  color: #555;
}

/* main list area */
.news-list-section {
  padding: 16px 0 72px;
}


/* card layout */
/* ニュースカード全体 */
.news-card,
.news-card--reverse {
  display: flex;
  flex-direction: row;      /* 横並び */
  align-items: center;      /* 縦中央揃え */
  gap: 40px;                /* 画像と本文の間隔 */
  background: linear-gradient(var(--main-color), var(--accent-color));
  border-radius: 40px;
  padding: 40px 48px;
  margin-bottom: 40px;
}

/* 画像が右側のときは row-reverse */
.news-card--reverse {
  flex-direction: row-reverse;
}

/* 画像領域 */
.news-card-media {
  flex: 1;                  /* 横幅の比率 */
  display: flex;
  align-items: center;
  justify-content: center;  /* 画像中央揃え */
}

/* 画像ボックス */
.news-card-img {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 3;
  border-radius: 26px;
  overflow: hidden;
  background: #bfb9b9;      /* 仮背景 */
}

/* 画像の中の実際のimg */
.news-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 本文領域 */
.news-card-body {
  flex: 1.5;               /* 横幅の比率 */
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 縦中央に本文を揃える */
}

/* meta情報 */
.news-card-meta {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

/* タイトル */
.news-card-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #111;
}

/* 本文 */
.news-card-text {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 12px;
}

/* ボタン */
.news-card-link {
  display: inline-block;
  padding: 6px 12px;       /* 上下6px、左右12px */
  font-size: 14px;
  font-weight: 600;
  color: #000;
  border-radius: 999px;
  border: 1px solid #0002;
  background: #fff;
  text-align: center;
  white-space: nowrap;      /* 改行させない */
  max-width: 120px;         /* 最大幅 */
  min-width: 60px;          /* 最小幅 */
  overflow: hidden;
  text-overflow: ellipsis;  /* 長すぎる文字は…に */
  transition: all 0.3s;
}

.news-card-link:hover {
  background: var(--accent-color);
  color: #fff;
}

/* divider */
.news-card-divider {
  border: none;
  border-top: 3px solid var(--main-color);
  margin: 0 0 40px;
}

/* レスポンシブ対応 */
@media (max-width: 900px) {
  .news-card,
  .news-card--reverse {
    flex-direction: column;
    text-align: center;
    padding: 28px 22px;
  }

  .news-card--reverse .news-card-media {
    order: -1; /* 画像を上に */
  }

  .news-card-body {
    flex: unset;
    justify-content: unset;
  }

  .news-card-img {
    max-width: 100%;
  }
}


/* ==============================
   9. FOOTER
============================== */
.site-footer {
  margin-top: 56px;
  background:#F47B61;
  padding: 36px 0;
  border-top: 1px solid rgba(0, 0, 0, .06);
  text-align: center;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.brand {
  font-weight: 700;
  font-size: 20px;
}

.sns {
  display: flex;
  justify-content: center;
  gap: 20px;
  font-size: 26px;
  color: #fff;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.footer-links a {
  display: block;
  margin: 4px 0;
  font-size: 14px;
  color: #fff;
}

/* Responsive */
@media (max-width:900px){
  .nav{
    display:none;
  }
  .hamburger{
    display:block;
  }
  .carousel{
    padding:24px 32px;
  }
  .car-btn{
    display: none;
  }
  .footer-inner{
    grid-template-columns:1fr;
  }
  .footer-links{
    grid-template-columns:1fr;
  }
  .banners{
    grid-template-columns:1fr;
  }
  .qr-badge{
    transform:scale(.9);
    left:12px;bottom:12px;
  }
  .flag{
    width:96px;
  }
  .hero-photos img{
    width:100%;
    height:180px;
  }
  .avatar{
    width:52px;
    height:52px;
    border-radius:14px;
  }
  .bubble{
    font-size:15px;
  }
}

@media (max-width: 1200px) {
  .carousel {
    width: 600px; /* 2 cards */
  }
}

@media (max-width: 700px) {
  .carousel {
    width: 260px; /* 1 card */
  }
}