@charset "UTF-8";

html {
  overflow-x: hidden; /* 横はみ出し防止は html 側に適用 */
}
body {
  background-color: #0c5f81;
  color: #333333;
  font-family: "Kiwi Maru", "Noto Sans JP", sans-serif;
  line-height: 1.6;
}

#header_bot{
  display: none;
}

.iks_logo_left img{
  display: none;
}
.iks_logo_right img{
  display: none;
}
/*浮いてるハンバーガーメニューの色変更*/
.hamburger-fade__wrapper {
  background-color: #00A99D;
}
/*フッターの色変更*/
.footer_wrapper{
  background-color: #00A99D !important;
}
/* img要素自体を新しい画像で上書きする */
/*おんなじ画像のURLで大丈夫だよ～*/
img.piece_pc {
  content: url('../img/lottery/piece.svg');
}
img.piece_sp {
  content: url('../img/lottery/piece.svg');
  padding-top: 2.5px;
}
/*ページトップボタン画像変更*/
#pagetop.is-show img {
  content: url('../img/lottery/pagetop_butten.svg');
}
#pagetop span{
  color: #00a99d;
  font-weight: bold;
}
#pagetop p{
  color: #00a99d;
  font-weight: bold;
}
#pagetop img {
  transition: transform 0.3s ease; /* アニメーションを滑らかに */
}
#pagetop:hover img {
  transform: rotate(-45deg)!important;
}


.garapon_container {
  position: relative;
  margin: 0 auto;
  padding: 20px 15px 30px 15px; /* ヘッダー下余白 */
}


/* ヒーローエリア */
.hero_section {
  position: relative;
  text-align: center;
  margin-bottom: 30px;
  padding-top: 20px;
  z-index: 2;
}

.main_subtitle {
  font-size: 15px;
  color: #ffe97b;
  text-align: center;
}

/* トップヒーロー画像の絶対配置 */
.garagara {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 110px;
}

.wagara {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 100px;
}

.kirakira_y {
  position: relative;
  width: 16px;
  top: 60px;
  margin-left: 35px;
  border-width: thick;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.4));
}

.kirakira_g {
  position: relative;
  top: 35px;
  width: 18px;
}

.kirakira_y_top{
  position: relative;
  top: 30px;
  width: 20px;
}

.main_title {
  position: relative;
  display: block;
  align-items: center;
  width: 65%;
  margin-top: 48px;
  margin-bottom: 5px;
  left: 17.5%;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.4));
}

.nami {
  display: block;
  margin: 10px auto 15px;
  width: 75%;
  max-width: 300px;
}

.puzzle_w {
  position: absolute;
  left: 20px;
  margin-top: 15px;
  width: 40px;
}

.picture_container {
  display: flex;
  align-items: center; 
  justify-content: space-between; 
  width: 100%;
  max-width: 230px;
  margin: 30px auto 0;
}

 .picture_1 {
   position: relative;
   width: 115px;
   margin: 0; 
 }

 .picture_2 {
   position: relative;
   width: 105px;
   margin: 0; 
 }

.kirakira_gg {
  position: absolute;
  right: 40px;
  top: 62.5%;
  width: 20px;
}

.tama {
  position: absolute;
  right: -5px;
  top: 70%;
  width: 42.5px;
}

.puzzle_g {
  position: absolute;
  right: 3px;
  top: 90%;
  width: 35px;
}


/* セクション＆カード */
.section_block {
  position: relative;
  margin-bottom: 40px;
}

/* 見出しと装飾のラッパー */
.title_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 12px;
}

/* 左側のガラポン＋テキスト部分 */
.heading_area {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  width: fit-content;    /* ガラポン＋文字の全体の長さにジャストフィット */
  padding-bottom: 8px;   
  margin-top: 10px;
  margin-bottom: 10px;
}

.midashi{
  position: relative;
  width: 65px;
  height: auto;
  margin-right: 8px;
  margin-bottom: -6px;   /* ★ガラポンの足元を下線画像とぴったり密着させる調整 */
  z-index: 2;            /* 下線画像の上に乗せる */
  flex-shrink: 0;
}

.section_title {
  position: relative;
  white-space: nowrap;
  font-size: clamp(18.25px, 3vw, 21px);
  font-weight: normal;
  color: #CBE8EC;
  margin-bottom: -6px;
}

.under_midashi{
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 105%;           
  height: 3.5px;           
  object-fit: fill;      
}

.kira_icons{
  position: relative;
  display: flex;
  align-items: flex-end;
  margin-bottom: 5px;
}

.kirakira_g_icon{
  position: absolute;
  top: -16px;        /* ★ 上へのズレ幅（数値がマイナスなほど上に行きます） */
  left: -18px;       /* ★ 左へのズレ幅（数値がマイナスなほど左に行きます） */
  width: 18px;     
  height: auto;
  margin: 0;
}

.kirakira_gg_icon {
  width: 20px;
  height: auto;
  display: block;
}


/* =========================================================
   ファーストビュー アニメーション演出
   ========================================================= */

/* フェードイン表示 */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   ガラポン中央回転アニメーション
   ========================================================= */

/* スマホ版（SP）のアニメーション：中央付近から左上へ */
@keyframes garagaraCenterToTopLeftSP {
  0% {
    opacity: 0;
    /* スマホ画面中央付近の位置からスタート */
    transform: translate(100px, 120px) scale(1.8) rotate(-360deg);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    /* 定位置（左上）へ到達 */
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

.hero_section .garagara {
  opacity: 0;
  /* ease-out で最初は速く、後半スムーズに収まる */
  animation: garagaraCenterToTopLeftSP 1.0s ease-out 0.1s forwards;
}

/* Step 2: 玉が転がって固定位置へ（0.8秒〜） */
.hero_section .tama {
  opacity: 0;
  animation: tamaRoll 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.2s forwards;
}

@keyframes tamaRoll {
  0% {
    opacity: 0;
    /* ガラポン付近（左上）からスタート */
    transform: translate(-120px, -100px) rotate(0deg) scale(0.5);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    /* 本来の位置（右下）へ回転しながら移動 */
    transform: translate(0, 0) rotate(720deg) scale(1);
  }
}

/* Step 3: 玉のあとに「文字のみ」が浮かび上がる（2.0秒〜） */
.hero_section .main_title,
.hero_section .main_subtitle {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out 2.0s forwards;
}

/* Step 4: その他のファーストビュー内要素（2.6秒〜） */
.hero_section .wagara,
.hero_section .kirakira_y,
.hero_section .kirakira_g,
.hero_section .kirakira_y_top,
.hero_section .nami,
.hero_section .puzzle_w,
.hero_section .picture_container,
.hero_section .kirakira_gg,
.hero_section .puzzle_g {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out 2.6s forwards;
}

/* =========================================================
   ファーストビュー完了後の見出し・コンテンツ表示アニメーション
   ========================================================= */

@keyframes sectionFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 企画紹介以後の見出しとコンテンツ */
.section_block .title_wrapper,
.section_block .card_box,
.section_block .card_wrapper,
.section_block .pv_box,
.section_block .step_section_wrapper,
.section_block .prize_section_wrapper,
.section_block .caution_title_wrapper {
  opacity: 0; 
  animation: sectionFadeInUp 0.8s ease-out 2.6s forwards;
}

/* さらにスクロール先の見出し等もスクロール前初期表示する場合、時間を少しずらす設定 */
.garapon_container > .section_block:nth-of-type(2) {
  opacity: 0;
  animation: sectionFadeInUp 0.8s ease-out 3.0s forwards;
}



/* カードと左側のパズル画像 */
.card_wrapper {
  position: relative;
  width: 100%;
}

.card_box {
  position: relative;
  border-radius: 8px;
  padding: 15px 20px;
  margin-left: 10px;
  margin-right: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  z-index: 2;
}

.intro_text, .mykikaku_text {
  font-size: 13.5px;
  text-align: left;
  color: #ffffff;
}

.kikaku_link {
  color: #31d5f8;             
  text-decoration: underline;  /* 下線を表示 */
  font-weight: normal;           
  transition: color 0.2s ease;
  margin-left: 2.5px;
  margin-right: 2.5px;
}

.kikaku_link:hover {
  color: #00a99d;              
  text-decoration: underline;  /* 下線を維持 */
}


/* PV動画ブロック */
.pv_box {
  margin-top: 30px;
  text-align: center;
}

.pv_title {
  font-size: 18px;
  font-weight: bold;
  color: #CBE8EC;
  margin-bottom: 4px;
}

.movie_outer {
  position: relative;
  width: 75%;
  max-width: 450px;
  margin: 0 auto;
}

.movie_wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 8px;
  overflow: hidden;
  z-index: 2;
}

.movie_wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ue{
  position: relative;
  margin-top: 20px;
  width: 25px;
}

.pv_sub {
  font-size: 11px;
  color: #ffffff;
  text-align: center;
  margin-bottom: 10px;
}


/* STEPフロー */
.step_section_wrapper{
  position: relative;
  border-radius: 8px;
  padding: 10px 20px;
  margin-left: 10px;
  margin-right: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  z-index: 2;
}

.step_list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* 各ステップの親枠 */
.step_item {
  position: relative; 
  width: 100%;
  max-width: 450px;   
  margin: 0 auto;
}

/* チャート図（背景矢印） */
.chart {
  display: block;
  width: 85%;
  height: auto;
  margin-left: 5%;
}

/* STEPフロー（375pxの数値を基準固定） */
.step_list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.step_item {
  position: relative; 
  width: 100%;
  max-width: 450px;   
}

.chart {
  display: block;
  width: 85%;
  height: auto;
}

.step_text_first {
  position: relative;
  white-space: nowrap;
  top: -60px;
  left: 21%;        
  font-size: 13.5px;
  color: #ffffff;
  margin: 0;
  line-height: 1.4;
}

.commentbox {
  position: absolute;
  width: 85%;
  height: auto;
  top: 48px;
  left: 17.5%;
}

.step_note {
  position: absolute;
  white-space: nowrap;
  top: 60.5px;          
  left: 20.5%;
  font-size: 10.5px;
  color: #CBE8EC;
  margin: 0;
  letter-spacing: normal; 
  word-break: keep-all;
  letter-spacing: -0.05em;
}

.step_text {
  position: relative;
  display: block;
  white-space: nowrap;
  top: -35px;
  left: 21%;        
  font-size: 13.5px;
  color: #ffffff;
  margin: 0;
  line-height: 1.4;
}

.step_text_final {
  position: relative;
  white-space: nowrap;
  top: -17px;
  left: 21%;        
  font-size: 13.5px;
  color: #ffffff;
  margin: 0;
  line-height: 1.4;
}

.step_link {
  color: #31d5f8;             
  text-decoration: underline;  /* 下線を表示 */
  font-weight: normal;         
  transition: color 0.2s ease;
  margin-left: 2.5px;
  margin-right: 2.5px;
}

.step_link:hover {
  color: #00a99d; 
  text-decoration: underline;  /* 下線を維持 */
}


/* 企画場所・マップ */
.map_lead {
  font-size: 15px;
  font-weight: normal;
  color: #ffffff;
  margin-bottom: 12px;
}

.map_content {
  display: flex;
  flex-direction: column;
}

.map_img {
  display: block;
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  border: 1px solid #ddd;
}

.map_img_link {
  display: block;
  overflow: hidden;
  border-radius: 4px; /* 角丸がある場合は指定 */
  transition: opacity 0.2s ease;
}

.map_img_link:hover {
  opacity: 0.8;
}

.map_bullet {
  font-size: 13px;
  margin-bottom: 8px;
  color: #ffffff;
}

.map_link {
  color: #31d5f8;             
  text-decoration: underline;  /* 下線を表示 */
  font-weight: normal;           
  transition: color 0.2s ease;
  margin-left: 2.5px;
  margin-right: 2.5px;
}

.map_link:hover {
  color: #00a99d; 
  text-decoration: underline;  /* 下線を維持 */
}

.map_yellow{
  color: #ffe97b; 
}


/* 景品 */
/* 一番上のcard_box */
.prize_card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 75%;            
  max-width: 350px;     
  margin: 0 auto 25px;  
  padding: 40px 18px;    
  text-align: center;
  box-sizing: border-box;
}

.prize_catch {
  font-size: 20px;
  font-weight: normal;
  color: #ffe97b;
  margin-bottom: 12px;
  text-align: center;
}

.prize_desc {
  font-size: 13.5px;
  color: #ffffff;
  white-space: normal;   /* 75%の幅に合わせて自動折り返し */
  margin-bottom: 12px;
}

/* 枠画像エリア */
.prize_intro_box {
  position: relative;
  width: 75%;
  max-width: 350px;
  margin: 20px auto 0;
  padding: 30px 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prize_intro_box .prize_box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 1;
}

.prize_box {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;           
  object-fit: fill;     
  z-index: 1;            /* 背後に配置 */
}

.prize_intro {
  position: relative;
  color: #0c5f81;
  font-size: 14px;
  margin: 0;
  padding: 10px 7.5px 10px 7.5px;
  z-index: 2;            /* 画像の上（前面）に配置 */
}

.prize_item {
  display: flex;         
  align-items: flex-start; 
  margin-bottom: 4px;
}

.prize_label {
  flex-shrink: 0;         
  white-space: nowrap;   
}

.prize_text {
  flex: 1;                /* ★ 残りの右側エリアを全て使い、溢れたら自動折り返し */
}

/* カルーセルエリア */
.prize_container {
  position: relative;
  margin: 80px auto 0;
  width: 300px;
  margin-bottom: 40px;
}

.prise_circle{
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%); 
  width: 160px;                      
  height: auto;
  z-index: 1;                        
  pointer-events: none;             
}

.prize_slider {
  position: relative;
  z-index: 2;
}

.slick-track{
  width: 300px;
}

.slick-dots li{
  display: none;
}

/* ボタン共通（transition を追加） */
.slick-arrow {
  background-color: #cbe8ec;
  bottom: 0;
  height: 0;
  margin: auto;
  position: absolute;
  top: 0;
  width: 0;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease; /* ★ ホバーアニメーションを滑らかにする */
}

.prev-arrow{
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  width: 15px;
  height: calc(tan(60deg) * 20px / 2);
  left: -15px;
  z-index: 1;
}

.next-arrow{
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  width: 15px;
  height: calc(tan(60deg) * 20px / 2);
  right: -15px;
}

/* ★ ホバー時に1.3倍に拡大＆色を黄色に変更 */
.prev-arrow:hover {
  transform: scale(1.3);
  background-color: #cbe8ec;
}

.next-arrow:hover {
  transform: scale(1.3);
  background-color: #cbe8ec;
}

/* 両脇（中央以外）のスライド画像：小さく・やや薄く表示 */
.prize_slider .slick-slide img {
  width: 100px;             /* ★ 幅を一定に固定 */
  height: 80px;             /* ★ 高さも一定に固定 */
  object-fit: contain;      /* ★ 画像のアスペクト比を維持して収める */
  opacity: 0.6;           
  transform: scale(0.75); 
  transition: transform 0.5s ease, opacity 0.5s ease; 
  margin: 0 auto; 
}

/* 中央に来たアクティブスライド画像：大きく・不透明に拡大 */
.prize_slider .slick-center img {
  opacity: 1;
  transform: scale(1.25) !important; /* 中央画像の拡大率（1.2〜1.3倍程度が最適です） */
  opacity: 1 !important;             
  z-index: 10;                         
}

/* 文字背景（円形バッジ）の基本スタイル */
.prize_badge {
  position: absolute;
  top: 0px;
  right: 15px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #ffffff;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.badge_a .badge_b .badge_c .badge_d{ 
  background-color: #0c5f81;
 }  

.prize_subcatch {
  font-size: 16px;
  font-weight: normal;
  color: #CBE8EC;
  text-align: center;
  margin-top: 50px;
}


/* 注意事項 */
.caution_title_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 12px;
}

.caution_heading_area {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  width: fit-content;    /* ガラポン＋文字の全体の長さにジャストフィット */
  padding-bottom: 8px;   
  margin-top: 10px;
  margin-bottom: 10px;
}

.caution{
  position: absolute;
  width: 25px;
  top: 24px;
  left: 90%;
}

.rule_list {
  padding-left: 20px;
  font-size: 13.5px;
  color: #ffffff;
  text-align: left;
}

.rule_list li {
  margin-bottom: 4px;
}

.rule_link {
  color: #31d5f8;             
  text-decoration: underline;  /* 下線を表示 */
  font-weight: normal;         
  transition: color 0.2s ease;
  margin-left: 2.5px;
  margin-right: 2.5px;
}

.rule_link:hover {
  color: #00a99d; 
  text-decoration: underline;  /* 下線を維持 */
}


/* 模擬店コンテスト */
.mogicon_link {
  color: #31d5f8;             
  text-decoration: underline;  /* 下線を表示 */
  font-weight: normal;           
  transition: color 0.2s ease;
  margin-left: 2.5px;
  margin-right: 2.5px;
}

.mogicon_link:hover {
  color: #00a99d; 
  text-decoration: underline;  /* 下線を維持 */
}

.section_text{
  font-size: 13.5px;
  text-align: left;
  color: #ffffff;
}


/* ボタン */
.btn_link, .btn_action {
  display: block;                  /* ブロック要素にして margin: auto を効かせる */
  width: fit-content;             /* ボタンの文字幅にサイズを合わせる */
  margin: 20px auto 0 auto;       /* 左右 auto でページ中央に配置 */
  padding: 3px 30px;
  border-radius: 20px;
  color: #0c5f81;
  font-size: 14px;
  font-weight: normal;
  text-decoration: none;
  background-color: #8cbbb8;
  transition: all 0.2s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.btn_link:hover, .btn_action:hover {
  background-color: #00a99d;
  color: #ffffff;
  transform: translateY(2px);
}


/* =========================================================
   garagara マウスホバー & タップ時回転アニメーション
   ========================================================= */

.hero_section .garagara {
  /* 変形のスムーズなアニメーション設定 */
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* スマホタップ時の青い枠線を消す */
}

/* PCのホバー時 または スマホでタップ（押した）瞬間 */
.hero_section .garagara:hover,
.hero_section .garagara:active,
.hero_section .garagara.is-spinning {
  transform: rotate(360deg) scale(1.1);
}






/* タブレット (768px〜1023px) */
@media screen and (min-width: 768px) {
  .garapon_container {
    max-width: 850px;
    margin: 0 auto;
  }

  /* 企画場所：2列横並び */
  .map_content {
    flex-direction: row;
    align-items: center;
    gap: 25px;
  }
  .map_image_area, .map_info {
    width: 50%;
  }

  /* STEPフロー：375pxの見た目のまま等倍拡大 */
  .step_item {
    transform: scale(1.15);
    margin-bottom: 20px; /* 拡大による上下重なり防止 */
  }

  /* 景品カード */
  .prize_card {
    width: 60%;
    max-width: 400px;
  }
}





/* PC (1024~1440px) */
@media screen and (min-width: 1024px) {
.hamburger-fade { display: none; }
 main { padding-top: 65px; }


.garapon_container {
  max-width: 1024px;
  margin-bottom: 80px;
  padding:  100px 15px 30px 20px; /* ヘッダー下余白 */
}


/* トップページ */
.hero_section {
  position: relative;
  text-align: center;
  margin-bottom: 50px;
  padding-top: 20px;
  z-index: 2;
}

.main_subtitle {
  font-size: 40px;
  color: #ffe97b;
  text-align: center;
}

/* トップ画像の絶対配置 */
.garagara {
  position: absolute;
  left: 10px;
  width: 250px;
}

.wagara {
  position: absolute;
  right: 10px;
  width: 230px;
}

.kirakira_y {
  position: relative;
  width: 30px;
  top: 155px;
  margin-left: 70px;
  border-width: thick;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.4));
}

.kirakira_g {
  position: relative;
  top: 95px;
  left: 2%;
  width: 35px;
}

.kirakira_y_top{
  position: relative;
  top: 75px;
  left: 2%;
  width: 45px;
}

.main_title {
  position: relative;
  display: block;
  align-items: center;
  width: 45%;
  margin-top: 132.5px;
  margin-bottom: 5px;
  left: 27.5%;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.4));
}

.nami {
  display: block;
  margin: 15px auto 15px;
  width: 100%;
  max-width: 660px;
}

.puzzle_w {
  position: absolute;
  left: 70px;
  margin-top: 40px;
  width: 110px;
}

.picture_container {
  display: flex;
  align-items: center; 
  justify-content: space-between; 
  width: 100%;
  max-width: 600px;
  margin: 30px auto 0;
}

.picture_1 {
  position: relative;
  margin-top: 25px;
  margin-left: auto;
  margin-right: 15px;
  width: 270px;
}

.picture_2 {
  position: relative;
  margin-top: 40px;
  margin-left: 15px;
  margin-right: auto;
  width: 230px;
}

.kirakira_gg {
  position: absolute;
  right: 17.5%;
  width: 45px;
}

.tama {
  position: absolute;
  right: 3%;
  margin-top: 1px;
  width: 92.5px;
}

.puzzle_g {
  position: absolute;
  top: 87.5%;
  right: 7.5%;
  width: 85px;
}


/* セクション＆カード */
.section_block {
  position: relative;
  margin-bottom: 40px;
}


/* 見出しと装飾のラッパー */
.title_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 25px;
}

.heading_area {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  width: fit-content;    /* ガラポン＋文字の全体の長さにジャストフィット */
  padding-bottom: 8px;   /* 下線画像を敷く空間 */
  margin-left: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.midashi{
  position: relative;
  width: 120px;
  height: auto;
  margin-right: 8px;
  margin-bottom: -5px;   /* ★ガラポンの足元を下線画像とぴったり密着させる調整 */
  z-index: 2;            /* 下線画像の上に乗せる */
  flex-shrink: 0;
}

.section_title {
  position: relative;
  white-space: nowrap;
  font-size: clamp(35px, 3vw, 40px);
  font-weight: normal;
  color: #CBE8EC;
  margin-bottom: -10px;
}

.under_midashi{
  display: block;
  position: absolute;
  width: 110%;           
  height: 4.5px;           
  object-fit: fill;      
}

.kira_icons{
  position: relative;
  display: flex;
  align-items: flex-end;
  margin-bottom: 5px;
}

.kirakira_g_icon{
  position: absolute;
  width: 30px;
  top: -30px;        /* ★ 上へのズレ幅（数値がマイナスなほど上に行きます） */
  left: -40px;       /* ★ 左へのズレ幅（数値がマイナスなほど左に行きます） */    
  height: auto;
  margin: 0;
}

.kirakira_gg_icon {
  display: block;
  width: 35px;
  height: auto;
}


/* =========================================================
   ファーストビュー アニメーション演出
   ========================================================= */

/* フェードイン表示 */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   ガラポン中央回転アニメーション
   ========================================================= */

/* PC版のアニメーション：PC画面中央付近から左上へ */
@keyframes garagaraCenterToTopLeftPC {
  0% {
    opacity: 0;
    transform: translate(300px, 180px) scale(2) rotate(-360deg);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

.hero_section .garagara {
    animation: garagaraCenterToTopLeftPC 1.0s ease-out 0.1s forwards;
  }


/* カードと左側のパズル画像 */
.card_wrapper {
  position: relative;
  width: 100%;
}

.card_box {
  position: relative;
  border-radius: 8px;
  padding: 30px 30px;
  margin-left: 40px;
  margin-right: 40px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  z-index: 2;
}

.intro_text, .mykikaku_text {
  font-size: 20px;
  line-height: 1.8;
  text-align: center;
  color: #ffffff;
}

.section_text{
  font-size: 20px;
  line-height: 1.8;
  text-align: left;
  color: #ffffff;
}


/* PV動画ブロック */
.pv_box {
  margin-top: 30px;
  text-align: center;
}

.pv_title {
  font-size: 18px;
  font-weight: bold;
  color: #CBE8EC;
  margin-bottom: 4px;
}

.movie_outer {
  position: relative;
  width: 75%;
  max-width: 600px;
  margin: 0 auto;
}

.movie_wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 8px;
  overflow: hidden;
  z-index: 2;
}

.movie_wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ue{
  position: relative;
  margin-top: 40px;
  width: 60px;
}

.pv_sub {
  font-size: 20px;
  white-space: nowrap;
  color: #ffffff;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 30px;
}

.pv_sub br {
  display: none; /* ★ <br> による改行を打ち消す */
}


/* STEPフロー */
.step_section_wrapper{
  position: relative;
  border-radius: 8px;
  padding: 10px 20px;
  margin-left: 40px;
  margin-right: 40px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  z-index: 2;
}

.step_list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.step_item {
  position: relative; 
  width: 100%;
  max-width: 700px;             
  transform: scale(1.3);       /* ★ 375px基準のレイアウトを崩さず全体を1.3倍にバランスよく拡大 */
  transform-origin: top center;
}

.chart {
  display: block;
  width: 55%;
  height: auto;
  padding-top: 1%;
  margin-left: 20%;
}

/* 文字位置・サイズ（375px指定をそのまま維持して変形拡大） */
.step_text_first {
  position: relative;
  white-space: nowrap;
  top: -90px;
  left: 30.5%;        
  font-size: 16px;
  color: #ffffff;
  margin: 0;
  line-height: 1.4;
}

.commentbox {
  position: absolute;
  width: 55%;
  height: auto;
  top: 72.5px;
  margin-left: 15%;
}

.step_note {
  position: absolute;
  white-space: nowrap;
  top: 90px;          
  left: 35%;
  font-size: 16px;
  color: #CBE8EC;
  padding: 3px 8px;
  margin: 0;
}

.step_text {
  position: relative;
  white-space: nowrap;
  top: -52.5px;
  left: 30.5%;        
  font-size: 16px;
  color: #ffffff;
  margin: 0;
  line-height: 1.4;
}

.step_text br {
  display: none;
}

.step_text_final {
  position: relative;
  white-space: nowrap;
  top: -25px;
  left: 30.5%;        
  font-size: 16px;
  color: #ffffff;
  margin: 0;
  line-height: 1.4;
}

/* 企画場所・マップ */
.map_lead {
  font-size: 20px;
  font-weight: normal;
  color: #ffffff;
  margin-left: 10px;
  margin-bottom: 20px;
}

.map_content {
  display: flex;
  gap: 15px;
}

.map_img {
  display: block;
  width: 100%;
  max-width: 300px;
}

.map_bullet {
  font-size: 20px;
  margin-bottom: 8px;
  color: #ffffff;
}


/* 景品 */
  .prize_section_wrapper {
    display: flex;
    flex-wrap: wrap;             /* ★ 1段目と2段目を折り返す */
    flex-direction: row;         /* ★ 左から右へ並べる */
    align-items: flex-start;
    justify-content: center;
    gap: 50px 30px;              
    margin-top: 20px;
  }

   /* 上段：card_box（横幅100%で最上部に配置） */
  .prize_card_top {
    width: 100%;                 /* ★ 横幅いっぱいに広げて上段固定 */
    max-width: 900px;
    margin: 0 auto;
  }

  .prize_catch {
    text-align: center;
    font-size: 32px;
    font-weight: normal;
    color: #ffe97b;
    margin-bottom: 12px;
  }

  .prize_desc {
    text-align: center;
    font-size: 22.5px;
    color: #ffffff;
    line-height: 1.6;
    margin-bottom: 0;            
  }

  /* 下段左側：prize_intro_box (景品説明ボックス) */
  .prize_intro_box {
    width: 45%;                  /* ★ 右側半分の幅 */
    max-width: 350px;
    margin-left: 50px;
    padding: 40px 25px;
  }

  .prize_box {
    position: absolute;          /* 画像を背後に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 110%;
    object-fit: fill;
    z-index: 1;
  }

  .prize_intro {
    position: relative;
    color: #0c5f81;
    font-size: 19px;
    margin: 0;
    padding: 10px 7.5px;
    z-index: 2;           
  }

  /* 下段右側：カルーセルエリア */
 .prize_container {
   width: 50%;
   max-width: 450px;
   margin-right: 50px;
   margin-bottom: 60px;
  }

  .prise_circle{    
    position: absolute;
    top: 25.5%;
    left: 50%;
    transform: translate(-50%, -50%); 
    width: 225px;                      
    height: auto;
    z-index: 1;                        
    pointer-events: none;
  }

 .prize_slider {
    position: relative;
    z-index: 2;
  }

 .slick-track{
    width: 300px;
  }

 .slick-dots li{
    display: none;
  }

 .slick-arrow {
    position: absolute;
    background-color: #cbe8ec;
    top: 0;
    bottom: 0;
    height: 0;
    margin: auto;
    width: 0;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease; 
  }

  .prev-arrow{
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    width: 18px;
    height: calc(tan(60deg) * 20px / 2);
    right: 95%;
  }

  .next-arrow{
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    width: 18px;
    height: calc(tan(60deg) * 20px / 2);
    left: 95%;
  }

  /* PC版の矢印ホバー設定 */
  .prev-arrow:hover {
    transform: scale(1.35); /* ★ PC表示時も同様に拡大 */
    background-color: #cbe8ec;
  }

  .next-arrow:hover {
    transform: scale(1.35);
    background-color: #cbe8ec;
  }

/* 両脇（中央以外）のスライド画像：小さく・やや薄く表示 */
  .prize_slider .slick-slide img {
    width: 130px ;
    height: 115px ;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0.6;           
    transform: scale(0.75); 
    transition: transform 0.5s ease, opacity 0.5s ease; 
    margin: 0 auto; 
  }

/* 中央に来たアクティブスライド画像：大きく・不透明に拡大 */
  .prize_slider .slick-center img {
    opacity: 1;
    transform: scale(1.35) !important;          
    z-index: 10;                         
  }

  .prize_subcatch {
    font-size: 22.5px;
    font-weight: normal;
    color: #CBE8EC;
    margin-top: 75px;
    text-align: center;
  }


/* 注意事項 */
.caution_title_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 25px;
}

.caution_heading_area {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  width: fit-content;   
  padding-bottom: 8px;  
  margin-left: 40px; 
  margin-top: 20px;
  margin-bottom: 20px;
}

.caution{
  position: absolute;
  width: 45px;
  top: 47.5px;
}

.rule_list {
  padding-left: 20px;
  font-size: 20px;
  color: #ffffff;
  line-height: 1.8;
}

.rule_list li {
  margin-bottom: 4px;
}

/* ボタン */
.btn_link, .btn_action {
  display: block;                  /* ブロック要素にして margin: auto を効かせる */
  width: fit-content;             /* ボタンの文字幅にサイズを合わせる */
  margin: 20px auto 0 auto;       /* 左右 auto でページ中央に配置 */
  padding: 1.5px 35px;
  border-radius: 20px;
  color: #0c5f81;
  font-size: 21px;
  font-weight: normal;
  text-decoration: none;
  background-color: #8cbbb8;
  transition: all 0.2s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.btn_link:hover, .btn_action:hover {
  background-color: #00a99d;
  color: #ffffff;
  transform: translateY(2px);
}

}



/* PC (1440px以上) */
@media screen and (min-width: 1024px){
  .garapon_container {
  max-width: 1024px;
  margin-bottom: 80px;
  padding:  100px 15px 30px 20px; /* ヘッダー下余白 */
}
}