@charset "UTF-8";
/* CSS Document */

.event2026_01{
position: relative;
}

.event2026_01_fv{
background: url("../img/event2026/kochi_ba.png") no-repeat top 70px center;
background-size: 70%;
position: relative;
/*padding-bottom: 2000px;*/
}

.event2026_01_fv h2{
width: 45%;
padding: 8% 0% 1% 33%;
}

.event2026_01_fv_copy_01{
font-family: "Zen Maru Gothic", serif;
font-weight: 700;
font-style: normal;
font-size: 2.2rem;
text-align: center;
padding: 2% 0% 2% 7%;
line-height: 47px;
}

.event2026_01_fv_copy_01 b{
color: #E60202;
font-weight: 700;
}


/* スライドの外枠（画面からはみ出た部分を隠す） */
.slider-container {
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
}




/* スライド全体を横並びにし、アニメーションを適用 */
.slider-track {
  display: flex;
  /* スライドの幅(200px) + 余白(左右10px=20px) = 220px */
  /* 220px × 10枚 = 2200px を確保 */
  width: max-content; 
  animation: scrollLeft 120s linear infinite; /* 15秒かけて一定速度で無限ループ */
}

/* ホバー時に動きを止めたい場合は以下のコメントアウトを外してください */
/*
.slider-track:hover {
  animation-play-state: paused;
}
*/

/* 個別のスライド要素 */
.slide {
  width: 350px;
  margin: 0 10px; /* スライド同士の隙間 */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 8px;
  flex-shrink: 0; /* 要素が潰れるのを防ぐ */
}

.slide img{
width: 100%;
}

/* アニメーションの設定 */
@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 1セット分（5枚分）だけ左に移動させる */
    /* 1枚の幅(200px) + マージン(20px) = 220px × 5枚 = 1100px */
    transform: translateX(-4440px); 
  }
}


.kv_hover{
position: absolute;
top: -5%;
left: 0;
bottom: 0;
}

/* --- 追従させるための設定 --- */
.target-section {
  position: relative; /* 必要に応じて */
  /* stickyを機能させるため、セクションにある程度の高さを持たせます */
/*  min-height: 200vh; */
}

.sticky-wrapper {
  position: sticky;
  top: 0%; /* 画面の縦の中央あたりに固定（好みに合わせて変更してください） */
  left: 0;  /* 画面の左端に配置 */
  width: fit-content; /* 画像の幅に合わせる */
  z-index: 10; /* 他のコンテンツより手前に表示 */
  height: 100%;
  /* 中央揃えの微調整（top: 50%にする場合） */
/*  transform: translateY(-50%); */
}

/* --- アニメーションの設定 --- */
.animated-image {
/*  display: block;*/
  /* 4秒かけて出入りを永遠に繰り返す */
  animation: slideInOut 4s ease-in-out infinite; 
  height: 100%;
}

/* 左から右に出たり入ったりするキーフレーム */
@keyframes slideInOut {
  0% {
    /* 最初は画面外（左側）に隠れている状態 */
    transform: translateX(-30%);
  }
  50% {
    /* 画面内（左端）に完全に出てきた状態 */
    transform: translateX(-20%);
  }
  100% {
    /* 再び画面外（左側）に隠れる */
    transform: translateX(-30%);
  }
}

.event2026_01_fv ul{
display: flex;
justify-content: center;
padding-left: 5%;
}

.event2026_01_fv ul li{
font-family: "Zen Maru Gothic", serif;
font-weight: 500;
font-style: normal;
font-size: 3.0rem;
background: #F18D26;
color: #fff;
padding: 2%;
border-radius: 50px;
line-height: 0;
margin: 0 0.5%;
}

.event2026_01_fv_copy_02{
font-family: "Zen Maru Gothic", serif;
font-weight: 700;
font-style: normal;
font-size: 3.0rem;
text-align: center;
padding: 2% 0% 2% 7%;
line-height: 50px;
}


.ilst02{
width: 7%;
position: absolute;
top: 20%;
right: 13%;
}
.ilst03{
width: 15%;
position: absolute;
top: 55%;
left: 20%;
}
.ilst04{
width: 22%;
position: absolute;
top: 62%;
right: 10%;
}
@media screen and (max-width: 1945px) {
.ilst04{
width: 22%;
position: absolute;
top: 62%;
right: 5%;
}
}
@media screen and (max-width: 1440px) {
.ilst04{
width: 22%;
position: absolute;
top: 62%;
right: 0%;
}
}
.ilst05{
width: 10%;
position: absolute;
top: 50%;
right: 5%;
}
@media screen and (max-width: 1945px) {
.ilst05{
width: 10%;
position: absolute;
top: 50%;
right: 2%;
}
}
@media screen and (max-width: 1440px) {
.ilst05{
width: 10%;
position: absolute;
top: 50%;
right: 1%;
}
}
.ilst06{
width: 6%;
position: absolute;
top: 12%;
right: 4%;
}
.ilst07{
width: 10%;
position: absolute;
top: 18%;
left: 20%;
}
.ilst08{
width: 5%;
position: absolute;
top: 69%;
left: 32%;
}
@media screen and (max-width: 1680px) {
.ilst08{
width: 5%;
position: absolute;
top: 69%;
left: 28%;
}
}
@media screen and (max-width: 1363px) {
.ilst08{
width: 5%;
position: absolute;
top: 69%;
left: 25%;
}
}
.ilst09{
width: 10%;
position: absolute;
top: 7%;
right: 17%;
}
.ilst10{
width: 12%;
position: absolute;
top: 5%;
left: 26%;
}

.event2026_01_section_01{
background: #FFF7C0;
width: 100%;
padding: 7% 0;
}

.event2026_01_section_01 div{
width: 1200px;
margin: 0 auto;
position: relative;
}

.conceput_txt{
  font-family: "Fugaz One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 3.0rem;
  position: relative;
  display: inline;
}

.conceput_txt::after{
content: '';
display: block;
background: #000000;
height: 1px;
width: 90px;
position: absolute;
top: 22px;
right: -100px;
}

.event2026_01_section_01 h2{
font-family: "Zen Maru Gothic", serif;
font-weight: 700;
font-style: normal;
font-size: 8.0rem;
color: #5B3208;
}

.event2026_01_section_01 h2 b{
font-weight: 700;
color: #E60202;
}


.event2026_01_section_01_txt{
font-family: "Zen Maru Gothic", serif;
font-weight: 700;
font-style: normal;
font-size: 3.0rem;
margin-top: 20px;
line-height: 50px;
}

.ilst11{
width: 452px;
position: absolute;
top: 0;
right: 0;
mix-blend-mode: multiply;
}

.event2026_01_section_02{
width: 1200px;
margin: 0 auto;
padding: 5% 0;
}

.event2026_01_midashi_01{
font-family: "Zen Maru Gothic", serif;
font-weight: 700;
font-style: normal;
font-size: 5.5rem;
color: #5B3208;
text-align: center;
position: relative;
display: block;
margin-bottom: 20px;
}

.event2026_01_midashi_01::after{
content: '';
display: block;
background: #F18D26;
height: 5px;
width: 86%;
margin-left: 6%;
margin-top: 10px;
}

.event2026_01_copy_01{
font-family: "Zen Maru Gothic", serif;
font-weight: 600;
font-style: normal;
font-size: 2.0rem;
text-align: center;
line-height: 46px;
}

.event2026_01_list_01{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 50px;
margin-bottom: 150px;
}

.event2026_01_list_01 li{
width: 25%;
background: #FFF7C0;
padding: 3% 3%;
border-radius: 10px;
position: relative;
}

.place{
width: 168px;
margin: 0 auto;
margin-bottom: 18px;
display: block;
}

.list_ilst{
height: 157px;
}

.event2026_01_list_01 li h3{
font-family: "Zen Maru Gothic", serif;
font-weight: 600;
font-style: normal;
font-size: 3.0rem;
color: #F14B26;
text-align: center;
margin: 20px 0;
}

.event2026_01_list_01 li p{
font-family: "Zen Maru Gothic", serif;
font-weight: 500;
font-style: normal;
font-size: 1.5rem;
line-height: 32px;
}

.place_name{
width: 175px;
position: absolute;
bottom: -25px;
right: -15px;
}

.event_section_2026_main{
border: #FFF7C0 8px solid;
border-radius: 16px;
padding: 5% 8%;
position: relative;
margin-bottom: 100px;
}

.place_02{
width: 320px;
position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.place_name_02{
width: 400px;
position: absolute;
top: -30px;
left: -100px;
}

.event2026_01_midashi_02{
text-align: center;
font-family: "Zen Maru Gothic", serif;
font-style: normal;
margin-top: 20px;
margin-bottom: 37px;
}

.event2026_01_midashi_02 p{
font-size: 3.0rem;
font-weight: 600;
margin-bottom: 20px;
}

.event2026_01_midashi_02 h2{
font-size: 5.0rem;
font-weight: 900;
color: #5B3208;
}

.event2026_01_two-column-wrapper{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

.text-area{
width: 643px;
}

.text-area p{
font-family: "Zen Maru Gothic", serif;
font-weight: 500;
font-style: normal;
font-size: 1.5rem;
line-height: 27px;
}


.text-area p b{
font-family: "Zen Maru Gothic", serif;
font-weight: 500;
color: #E60202;
}

.image-area{
width: 300px;
}

.event_gaiyo_section{
background: #FFF7C0;
padding: 5%;
margin-top: 30px;
border-radius: 20px;
}

.event_gaiyo_section h4{
font-family: "Zen Maru Gothic", serif;
font-weight: 700;
font-style: normal;
font-size: 2.8rem;
color: #5B3208;
border-bottom: #F18D26 4px solid;
padding-bottom: 10px;
}

.event_gaiyo_section h4::before{
content: "　";
background: url("../img/event2026/icon01.svg") no-repeat center center;
background-size: 100% 100%;
width: 19px;
height: 23px;
margin-right: 8px;
}

.event2026_01_dl_01{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.event2026_01_dl_01 dt{
width: 8%;
font-family: "Zen Maru Gothic", serif;
font-weight: 700;
font-style: normal;
font-size: 2.0rem;
margin-top: 25px;
}

.event2026_01_dl_01 dd{
width: 92%;
font-family: "Zen Maru Gothic", serif;
font-weight: 500;
font-style: normal;
font-size: 2.0rem;
margin-top: 25px;
}

.event2026_01_dl_01 dd b{
font-family: "Zen Maru Gothic", serif;
font-weight: 800;
font-style: normal;
font-size: 2.5rem;
color: #F14B26;
line-height: 25px;
}

.event2026_01_dl_01 dd span{
font-family: "Zen Maru Gothic", serif;
font-weight: 500;
font-style: normal;
font-size: 1.4rem;
color: #F14B26;
line-height: 31px;
}

.event2026_01_dl_01 dd > section{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.event2026_01_dl_01 dd > section div:nth-of-type(1){
width: 55%;
}


.event2026_01_dl_01 dd > section div:nth-of-type(2){
width: 42%;
}

.event2026_01_dl_01 dd > section div h5{
font-family: "Zen Maru Gothic", serif;
font-weight: 700;
font-style: normal;
font-size: 2.5rem;
}

.event2026_01_dl_01 dd > section div small{
font-family: "Zen Maru Gothic", serif;
font-weight: 500;
font-style: normal;
font-size: 1.4rem;
}

.event2026_01_dl_01 dd > section div p{
font-family: "Zen Maru Gothic", serif;
font-weight: 500;
font-style: normal;
font-size: 1.5rem;
line-height: 27px;
margin-top: 20px;
}

.osusume_section{
background: #FFE9E7;
padding: 5%;
position: relative;
margin-top: 50px;
border-radius: 20px;
}

.osusume_section h5{
font-family: "Zen Maru Gothic", serif;
font-weight: 700;
font-style: normal;
font-size: 2.3rem;
background: #F14B26;
color: #fff;
display: inline-block;
padding: 1% 2%;
border-radius: 10px;
position: absolute;
top: -25px;
left: 5%;
}

.osusume_section ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
gap: 20px 0;
}

.osusume_section li{
width: 50%;
font-family: "Zen Maru Gothic", serif;
font-weight: 700;
font-style: normal;
font-size: 2.0rem;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}

.osusume_section li::before{
content: " ";
display: block;
background: url("../img/event2026/check.svg") no-repeat center center;
width: 25px;
height: 25px;
margin-right: 10px;
}

.event_section_2026_main h6{
font-family: "Zen Maru Gothic", serif;
font-weight: 700;
font-style: normal;
font-size: 2.5rem;
color: #5B3208;
border-bottom: #5B3208 2px solid;
display: inline-block;
text-align: center;
margin-top: 5%;
}

.guest_list{
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.guest_list li{
width: 238px;
margin: 2% 2%;
}

.tour_list_01{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 22px;
}
.tour_list_01 li{
width: 23%;
background: #FFE9E7;
border-radius: 20px;
padding: 3% 0;
text-align: center;
}

.tour_list_01 li img{
height: 117px;
margin-bottom: 20px;
}

.tour_list_01 li dl{
}

.tour_list_01 li dl dt{
font-family: "Zen Maru Gothic", serif;
font-weight: 700;
font-style: normal;
font-size: 2.0rem;
color: #F14B26;
}

.tour_list_01 li dl dd{
font-family: "Zen Maru Gothic", serif;
font-weight: 500;
font-style: normal;
font-size: 1.5rem;
margin-top: 15px;
}

.kaisaibi{
font-family: "Zen Maru Gothic", serif;
font-weight: 700;
font-style: normal;
font-size: 4.5rem;
color: #5B3208;
text-align: center;
line-height: 45px;
margin-top: 35px;
}
.kaisaibi small{
font-family: "Zen Maru Gothic", serif;
font-weight: 700;
font-style: normal;
font-size: 2.5rem;
color: #F14B26;
text-align: center;
}

.event2026_01_section_03{
background: #FFF7C0;
width: 100%;
padding: 7% 0;
}


.event2026_01_section_03 h2{
font-family: "Zen Maru Gothic", serif;
font-weight: 700;
font-style: normal;
font-size: 8.0rem;
color: #5B3208;
line-height: 111px;
}

.event2026_01_section_03 h2 b{
font-weight: 700;
color: #E60202;
}


.event2026_01_section_03_txt{
font-family: "Zen Maru Gothic", serif;
font-weight: 500;
font-style: normal;
font-size: 2.2rem;
line-height: 47px;
text-align: center;
margin-top: 30px;
}

.event2026_01_section_03_txt b{
font-weight: 500;
color: #E60202;
}

.insta_btn_01{
font-family: "Zen Maru Gothic", serif;
font-weight: 700;
font-style: normal;
font-size: 3.5rem;
color: #009D9E;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
width: 662px;
text-align: center;
margin: 0 auto;
margin-top: 50px;
padding: 40px 0;
border-radius: 100px;
}

.insta_btn_01 img{
width: 56px;
margin-right: 23px;
}



/* 追従するコンテナのスタイル【ここが重要】 */
.sticky-bottom-right {
  position: sticky;
  bottom: 20px;          /* 画面下から20pxの位置に固定 */
  display: flex;
  justify-content: flex-end; /* ボタンを右寄せにする */
  padding-right: 20px;   /* 右側の余白 */
  
  /* コンテナ自体が背面のテキスト選択やクリックを邪魔しないようにする。
   これがないと、ボタンの左側の透明な領域がクリックできなくなります。
  */
  pointer-events: none; 
}

/* ボタン自体のスタイル */
.action-btn {
  pointer-events: auto;  /* ボタン部分はクリックできるように元に戻す */
  cursor: pointer;
  transition: background-color 0.3s;
  width: 400px;
}

.sticky-bottom-right ul{
width: 400px;
padding-bottom: 10px;
}

.sticky-bottom-right ul li{
margin-top: 10px;
}