@charset "UTF-8";
/****************shiroebi201909********************************************/
body {
  background: #fff;
}
footer {
  margin-top: 0 !important;
  padding-top: calc(100vw / (1200 / 100));
  padding-bottom: calc(100vw / (1200 / 172));
  position: inherit !important;
  height: auto;
}
#contents.natsu2026 {
  width: 100% !important;
  margin: 0 !important;
  padding: 0;
  overflow: hidden;
}
#contents.natsu2026 .min {
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
}
#contents.natsu2026 .key {
  position: relative;
}
#contents.natsu2026 .key h1 {
  margin: 0 !important;
}
#contents.natsu2026 .key .nav {
  width: 100%;
  position: absolute;
  left: calc(100vw / (1200 / 0));
  bottom: calc(100vw / (1200 / 80));
  z-index: 1;
}

#contents.natsu2026 .key ul {
  width: calc(100vw / (1200 / 480));
  margin: 0 auto;
  padding: calc(100vw / (1200 / 15)) 0;
  display: flex;
  justify-content: space-between;
}
#contents.natsu2026 .key ul li {
  width: 32%;
  height: auto;
}

#contents.natsu2026 .key div.nav {
  position: absolute;
  left: 0;
  top: calc(100vw / (1200 / 390));
  z-index: 999;
  width: 100%;
  background: transparent; 
}


/* 1. 初期状態（ファーストビュー ＆ 上に戻ってきたとき） */
#contents.natsu2026 .key div.nav {
  position: absolute;

  bottom: calc(100vw / (1200 / 90));
  z-index: 999;
  width: 100%;
  background: transparent;
  
  /* 
    【超重要】animationを「none」に強制指定することで、
    クラスが外れてここに戻ってきた時にアニメーションが残るバグを完全に防ぎます。
  */
  animation: none !important; 
}

/* 2. 1200pxスクロールして固定されるとき */
#contents.natsu2026 .key div.nav.is-scrolled {
  position: fixed;
  left: 0;
    left: 0;
  top: inherit;
  bottom: 0; /* アニメーション完了後の着地点 */
  width: 100%;
  background: rgb(208 243 255 / 0.7);
  
  /* スクロールダウン時のみアニメーションを適用 */
  animation: slideInBottom 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* アニメーション定義 */
@keyframes slideInBottom {
  0% {
    transform: translateY(100%); /* 画面の下（外側）に隠した状態からスタート */
  }
  100% {
    transform: translateY(0);    /* 定位置（bottom: 0）へ */
  }
}

/*********co_01******/
#contents.natsu2026 h2 {
  width: calc(100vw / (1200 / 450));
  margin: 0 auto calc(100vw / (1200 / 50)) !important;
  padding-top: calc(100vw / (1200 / 20)) !important;
}
#contents.natsu2026 .matsuri {
  margin: 0 auto calc(100vw / (1200 / 100));
  background: url("../img/matsuriebi_matsuri.png") no-repeat;
  background-position: calc(100vw / (1200 / 20)) left;
  background-size: calc(100vw / (1200 / 363)) auto;
}
#contents.natsu2026 .co_in {
  margin: 0;
  padding: 0 0 calc(100vw / (1200 / 100));
  background: #f5e7e7 url("../img/natsu2026_c01_bg_sp.jpg") no-repeat bottom;
  background-size: 100% auto;
}
#contents.natsu2026 .co_02 {
  background: #dbeef4 url("../img/natsu2026_c02_bg_sp.jpg") no-repeat bottom;
  background-size: 100% auto;
}
#contents.natsu2026 .co_03 {
  padding: 0 0 calc(100vw / (1200 / 140));
  background: #fef8e3 url("../img/natsu2026_c03_bg_sp.jpg") no-repeat bottom;
  background-size: 100% auto;
}
/****Campaign two column****/
#contents.natsu2026 .box {
  width: calc(100vw / (1200 / 1000));
  margin: 0 auto;
}
#contents.natsu2026 .matsuri .cmp {
  width: calc(100vw / (1200 / 1000));
  margin: 0 auto;
}
#contents.natsu2026 .matsuri .cmp li {
  width: calc(100vw / (1200 / 480));
  margin: 0 auto calc(100vw / (1200 / 20));
  position: relative;
  background: #fff;
}
#contents.natsu2026 .matsuri .cmp.one li {
  width: calc(100vw / (1200 / 800));
}
#contents.natsu2026 .matsuri .cmp li h3 {
  padding: calc(100vw / (1200 / 8));
  text-align: center;
  font-size: calc(100vw / (1200 / 18));
  font-weight: bold;
}
#contents.natsu2026 .matsuri .cmp li h3 span {
  font-size: calc(100vw / (1200 / 15));
  color: #eb7a28;
}
#contents.natsu2026 .matsuri.co_02 .cmp li h3 span {
  color: #32923f;
}
#contents.natsu2026 .matsuri.co_03 .cmp li h3 span {
  color: #235c91;
}
#contents.natsu2026 .matsuri .cmp li .cmp_in {
  background: #fff;
  padding-bottom: calc(100vw / (1200 / 10));
  line-height: 1.4;
}
#contents.natsu2026 .matsuri .cmp li .cmp_in a {
  text-decoration: none;
}
#contents.natsu2026 .matsuri .cmp li h4 {
  width: calc(100vw / (1200 / 220));
  margin: calc(100vw / (1200 / 10)) auto calc(100vw / (1200 / 5)) !important;
  background: #e60012;
  text-align: center;
  font-size: calc(100vw / (1200 / 16));
  color: #fff;
}
#contents.natsu2026 .matsuri.co_02 .cmp li h4 {
  background: #1d2088;
}
#contents.natsu2026 .matsuri.co_03 .cmp li h4 {
  background: #f49526;
}
#contents.natsu2026 .matsuri .cmp li p {
  text-decoration: none;
  text-align: center;
  font-size: calc(100vw / (1200 / 16));
  font-weight: bold;
  color: #000;
}
#contents.natsu2026 .matsuri p.algnC.fs {
  font-size: calc(100vw / (1200 / 14));
}
#contents.natsu2026 .matsuri .kome {
  width: calc(100vw / (1200 / 720));
  margin: 0 auto;
  font-size: calc(100vw / (1200 / 14));
}
.yotei {
  position: relative;
  width: calc(100vw / (1200 / 500));
  margin: calc(100vw / (1200 / 75)) auto 0;
  padding: calc(100vw / (1200 / 5)) 0;
  border: 2px solid #e60012;
  background: #fff;
  border-radius: 10px;
  line-height: 1.3;
  text-align: center;
  font-size: calc(100vw / (1200 / 23));
  font-weight: bold;
  color: #e60012;
}
.yotei dt {
  width: calc(100vw / (1200 / 100));
  position: absolute;
  top: calc(100vw / (1200 / -55));
  left: calc(100vw / (1200 / -23));
}
.co_02 .yotei {
  border: 2px solid #1d2088;
  color: #1d2088;
}
/*****btnarea****/
#contents.natsu2026 .btnarea .kome {
  width: calc(100vw / (1200 / 450));
  margin: 0 auto calc(100vw / (1200 / 100));
  font-size: calc(100vw / (1200 / 14));
}
#contents.natsu2026 .btn_cv {
  margin: 0 auto calc(100vw / (1200 / 100));
}
#contents.natsu2026 .banner {
  width: calc(100vw / (1200 / 400));
  margin: calc(100vw / (1200 / 50)) auto;
}
#contents.natsu2026 .btnarea .btn_goto {
  width: calc(100vw / (1200 /650));
  margin: 0 auto calc(100vw / (1200 / 100));
  border: 1px solid #888;
}