/*
Theme Name: Lightning Child Sample
Theme URI: 
Template: lightning
Description: 
Author: 
Tags: 
Version: 0.6.0
*/

/* ユーティリティ */
/* 左右のコンテンツを入れ替える（レスポンシブで上下を変える） */
.reverse-container {
  display: flex;
  flex-direction: row-reverse;
}


/* 全体 */

/* font */
body,html {
  font-family: "M PLUS 1p", sans-serif;
}

a {
  color: #f254a8;
}

/* パンクズを非表示 */
.breadcrumb{display:none;}

/* モバイルメニューの設定*/
.vk-mobile-nav-menu-btn {
  /* background-image:none; */
  border-radius:10%;
  border:none;
  background-color: white;
  background-image:url(/img/movieconLogomenu.png);
  background-repeat:no-repeat;
  background-size: cover;
  width:50px;
  height:50px;
  /* 3秒周期で、無限に繰り返す設定 */
  animation: pulse-infinite 3s ease-in-out infinite;
}

/* 常に繰り返すためのキーフレーム */
@keyframes pulse-infinite {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.7); /* ボタンの色に合わせる */
  }
  20% {
    transform: scale(1.1); /* 少し大きく */
    box-shadow: 0 0 0 15px rgba(255, 87, 34, 0); /* 外側に広がる波紋 */
  }
  40% {
    transform: scale(1); /* 元に戻る */
    box-shadow: 0 0 0 0 rgba(255, 87, 34, 0);
  }
  100% {
    transform: scale(1); /* 残りの時間は静止（ここがポイント！） */
  }
}


/* ページヘッダーを非表示 */
.site-header{display:none;}
/* ページヘッダーを非表示 */
.page-header{display:none;}

/* モバイルメニューを常に表示 */
.vk-mobile-nav.vk-mobile-nav-drop-in.vk-mobile-nav-open{
  max-width: 600px;
  background: radial-gradient(circle at bottom, #fff, transparent 80%), linear-gradient(to top, dodgerblue 0%, transparent 70%), linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4) 70%), #1e90ff;
  animation: bg 30s infinite;
}

/* .admin-bar .vk-mobile-nav.vk-mobile-nav-open.vk-mobile-nav-drop-in{ */
.vk-mobile-nav.vk-mobile-nav-open.vk-mobile-nav-drop-in{right: 0;}

@media (min-width: 992px) {
  body.device-mobile .vk-mobile-nav-menu-btn {display: block;}  
  body.device-pc .vk-mobile-nav-menu-btn {display: block;}
  .vk-mobile-nav-menu-btn {width:70px;height:70px;}
  .mobile-nav-btn-right .vk-mobile-nav-menu-btn, .vk-mobile-nav-menu-btn.position-right {right: 2%;}
  .vk-menu-acc .acc-btn {width: 40px;height: 40px;right: 2%;}
  .vk-mobile-nav nav ul li a {padding: 1em .5em;}
  body.device-pc .vk-mobile-nav {display: block;}
  .page_top_btn {width: 50px;height: 48px;}
}

/* :where(.wp-block-columns) { */
.wp-block-columns {margin-bottom:0;}

/* メニュー */
/* .global-nav-list > li > ul.sub-menu {
  background: radial-gradient(circle at bottom, #fff, transparent 80%), linear-gradient(to top, dodgerblue 0%, transparent 70%), linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4) 70%), #1e90ff;
  animation: bg 30s infinite;
} */


/* 上へボタン */
.page_top_btn {
  box-shadow:none;
  border: 2px solid white;
  border-radius: 5%;
  /* background: rgba(0, 0, 0, .8); */
  animation: bg3 30s infinite;
  background-size: 80%;
}

.social-list {
  display:flex;
  justify-content:center;
  gap: 40px;
}
.social-list a {
  display: block;
  width: 50px;
}

/* 固定ボタン */
.fixed_btn {
  position: fixed;
  top: 270px;
  right: -7px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 11px;
  padding-right: 31px;

  width: 1.6em;
  font-size: 0.8em;
  color: white;
  font-weight:bold;
  border-radius: 5px;
  border-color: white;
  background:linear-gradient(135deg,rgb(241,82,159) 0%,rgb(251,105,98) 100%);
  z-index: 20000;
}


/* トップページ */
/*==================================================
TOP
===================================*/
#top-hero{
  background-image:url(/img/web_backimages26.svg);
  background-repeat:no-repeat;
  background-size: cover;
}
.example1 {position: relative;}
.back.pc {
width: 100%;
opacity: 0;
}
.back.sp{
  width: 100%;
  display: none;
  opacity: 0;
}
.marumaruWrap {
	display: relative;
}
.marumaru {
    width: 200px;
    height: 200px;
    line-height: 1.8;
    background-color: black;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    position: absolute;
    margin: 0;
    padding: 0;
    bottom: 80px;
    right: 30px;
    z-index: 50;
    cursor: pointer;
    font-size: 21px;
    -webkit-transition: background .3s;
    transition: background .3s;
}
.pattern-5{
  height:200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (max-width: 779px) {
  .marumaru {
    width: 130px;
      height: 130px;
      bottom: 80px;
      right: 30px;
      font-size: 15px;
  }
  .pattern-5{
    height:130px;
  }
}

.news_top{
	color:#666666!important;
}

.marumaru:hover{
  background-color: #0068B7;
}

.yureru-j  {
	transform-origin:center bottom;
	animation:yureru-j  0.8s ease alternate infinite;
}
@keyframes yureru-j {
  0% {transform:translateY(-15%) scale(1,1);}
  80% {transform:translateY(0%) scale(1,1);}
	100% {transform:translateY(0%) scale(1,1);}
}

.fuwafua-j {
    animation: fuwafua-j 5s ease-in infinite;
}
@keyframes fuwafua-j {
  0% {transform: translate(0px, 0px);}
	50% {transform: translate(0px, 20px);}
	100% {transform: translate(0px, 0px);}
}



.speechBubble {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
  padding: 16px;
  border: 2px solid #000000;
  border-radius: 8px;
  background-color: #e2feff;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #000000;
}

.speechBubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 25%;
  border-style: solid;
  border-width: 20px 20px 0 0;
  border-color: #000000 transparent transparent;
  translate: -50% 100%;
  transform: skew(-25deg);
  transform-origin: top;
}

.speechBubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 25%;
  border-style: solid;
  border-width: 15.2px 15.2px 0 0;
  border-color: #e2feff transparent transparent;
  translate: calc(-50% - 0.4px) 100%;
  transform: skew(-25deg);
  transform-origin: top;
}


.alignfull img.airplane,
.alignfull img.Cloud1,
.alignfull img.Cloud2,
.alignfull img.Cloud3,
.alignfull img.Thema,
.alignfull img.Title, 
.alignfull img.SubTitle, 
.alignfull img.yellow_post, 
.alignfull img.Yuzu,
.alignfull img.catch,
.alignfull img.himuka,
.alignfull img.surfing,
.alignfull img.waterPolo,
.alignfull img.hurdle,
.alignfull img.apply,
.alignfull img.detailButton
{
  position: absolute;
  margin: 0;
  padding: 0;
  color: white;
}


.speechBubble-wrap{
  position: absolute;
  margin: 0;
  padding: 0;
  color: white;  
}

.alignfull img.airplane{width: 15%;top:35%;left:15%;z-index: 5;}
.alignfull img.Thema{width: 30%;top: 40%;left:36.5%;}
.alignfull img.SubTitle{width:40%;top:7%;left:31%;z-index: 10;}
.alignfull img.eventPlate{width:10%;top:35%;right:30%;z-index: 10;}
.alignfull img.Title{width: 50%;top: 17%;left:26.5%;z-index: 10;}
.alignfull img.catch{width:24%;bottom:0%;right:3%;}

.speechBubble-wrap{width:24%;bottom:23%;right:0%;}

.alignfull img.Cloud1{width: 30%;top: 3%;right:0%;}
.alignfull img.Cloud2{width: 30%;top: 33%;left:0%;}
.alignfull img.Cloud3{width: 30%;top: 50%;right:0%;}
.alignfull img.waterPolo{width:15%;bottom:3%;left:25%;}
.alignfull img.surfing{width: 15%;bottom: 5%;right:25%;}
.alignfull img.hurdle{width: 10%;top: 8%;right:15%;z-index: 20;}
.alignfull img.apply{width: 13%;top: 33%;right:15%;z-index: 20;}
.alignfull img.detailButton{width: 10%;top:57%;right:16.5%;z-index: 20;}
.alignfull img.airplane{
transform: rotate(-20deg); 
}
@media screen and (max-width: 800px) {
  #top-hero{
    background-image:url(/img/web_backimages26_mobile.webp);
  }
  .back.pc{display: none;}
  .back.sp{display: inline;}

  .alignfull img.airplane{width: 25%;top:25%;left: 15%;}
  .alignfull img.Thema{width: 70%;top: 35%;left:15%;}
  .alignfull img.SubTitle{width:70%;top:5%;left:15%;}
  .alignfull img.Title{width: 90%;top: 10%;left:5%;}
  .alignfull img.catch{width:40%;bottom:0%;right:3%;}
	.alignfull img.himuka{width:40%;bottom:0%;left:3%;}

  .speechBubble-wrap{width:34%;bottom:10%;right:1%;}
  .speechBubble{font-size:12px;}

  .alignfull img.Cloud1{width: 60%;top: 2%;right:0%;}
  .alignfull img.Cloud2{width: 40%;top: 33%;left:-10%;}
  .alignfull img.Cloud3{width: 50%;top: 50%;right:0%;}
.alignfull img.surfing{width: 27%;bottom: 5%;left:35%;}
.alignfull img.waterPolo{width: 27%;bottom: 2%;left:7%;}
.alignfull img.hurdle{width: 20%;top: 35%;right:15%;z-index: 20;}
}

@media screen and (max-width: 950px) {
  .speechBubble{font-size:12px;}
}
  
.fadeUp {
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0.01;
}

.fadeUp2 {
animation-name: fadeUpAnime2;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0.01;
}

.slideInR{
	animation-name: slideInAnimeR;
	animation-duration:2s;
    animation-fill-mode:forwards;
    opacity:0.01;
}

.slideInL{
	animation-name: slideInAnimeL;
	animation-duration:2s;
    animation-fill-mode:forwards;
    opacity:0.01;
}

.airplaneUp {
  animation-name: airplaneUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0.01;
}

.hurdleUp {
  animation-name: hurdleUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0.01;
}

@keyframes airplaneUpAnime {
  from {
    opacity: 0.01;
    transform: translate(-100px, 100px) rotate(-20deg);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) rotate(-20deg);
  }
}
@keyframes hurdleUpAnime {
  from {
    opacity: 0.01;
    transform: translate(100px, -100px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes fadeUpAnime{
  from {
    opacity: 0.01;
    transform: translateY(200px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@keyframes fadeUpAnime2{
  from {
    opacity: 0.01;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideInAnimeR{
  from {
    opacity: 0.01;
    transform: translateX(200px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInAnimeL{
  from {
    opacity: 0.01;
    transform: translateX(-200px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/*==================================================
アニメーション設定
===================================*/

/* アニメーション１回分の時間の長さを指定するCSS*/

/* 高速化対応 */
.change-time05{animation-duration: 0.25s;}
.change-time1{animation-duration: 0.5s;}
.change-time15{animation-duration: 0.75s;}
.change-time2{animation-duration: 1s;}
.change-time25{animation-duration: 1.25s;}
.change-time30{animation-duration: 1.5s;}
.change-time40{animation-duration: 2s;}
.change-time50{animation-duration: 2.5s;}
.change-time60{animation-duration: 3s;}

/* 動きをループさせるCSS*/
.count2{animation-iteration-count: 2;/*この数字を必要回数分に変更*/}
.countinfinite{animation-iteration-count: infinite;/*無限ループ*/}

/* アニメーションの開始を遅らせるCSS*/

/* 高速化対応 */
.delay-time05{animation-delay: 0.25s;}
.delay-time1{animation-delay: 0.5s;}
.delay-time15{animation-delay: 0.75s;}
.delay-time2{animation-delay: 1s;}
.delay-time25{animation-delay: 1.25s;}
.delay-time30{animation-delay: 1.5s;}
.delay-time40{animation-delay: 2s;}
.delay-time50{animation-delay: 2.5s;}
.delay-time60{animation-delay: 3s;}

/* アニメーションの進行具合を操作するCSS*/
.timing-ease{animation-timing-function:ease;}
.timing-ease-in{animation-timing-function:ease-in;}
.timing-ease-out{animation-timing-function:ease-out;}
.timing-ease-in-out{animation-timing-function:ease-in-out;}
.timing-linear{animation-timing-function:linear;}
.timing-steps{animation-timing-function:steps(4, end);}
.timing-cubic-bezier{animation-timing-function:cubic-bezier(.17,.67,.67,.51);  }

/*==================================================
アニメーションをまとめて設定する
===================================*/

.fadeDown{
animation-name: fadeDownAnime;/*アニメーションの定義名*/
/* animation-duration:1s; *//*アニメーション変化時間 ※デフォルト*/
/* 高速化 */
animation-duration:0.5s;/*アニメーション変化時間 ※デフォルト*/
animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
opacity:0.01;
}

/*アニメーションの開始から終了までを指定する*/
@keyframes fadeDownAnime{
  from {
    opacity: 0.01;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeDown2{
animation-name: fadeDownAnime2;/*アニメーションの定義名*/
/* animation-duration:1s; *//*アニメーション変化時間 ※デフォルト*/
/* 高速化 */
animation-duration:0.5s;/*アニメーション変化時間 ※デフォルト*/
animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
opacity:0.01;
}

/*アニメーションの開始から終了までを指定する*/
@keyframes fadeDownAnime2{
  from {
    opacity: 0.01;
    transform: translateY(-30px) rotate(-20deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(-20deg);
  }
}



/* top飛行機スライド */
/* top-action */
.wraptop {
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  cursor: none;
  position:relative;
}

.shapes {
  position: relative;
  height: 80vh;
  width: 100%;
  background: #2128bd;
  overflow: hidden;
}

.shape {
  will-change: transform;
  position: absolute;
  border-radius: 50%;
}
.shape.shape-1 {
  background: #005ffe;
  width: 650px;
  height: 650px;
  margin: -325px 0 0 -325px;
}
.shape.shape-2 {
  background: #ffe5e3;
  width: 440px;
  height: 440px;
  margin: -220px 0 0 -220px;
}
.shape.shape-3 {
  background: #ffcc57;
  width: 270px;
  height: 270px;
  margin: -135px 0 0 -135px;
}

.tp-content {
  top: 0;
  left: 0;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 100vh; */
  height: 80vh;
  width: 100%;
  background: #fff;
  mix-blend-mode: screen;
}

.wraptop h1 {
  font-size: 30px;
  color: #000;
  margin: 0;
  text-align: center;
}
@media (min-width: 450px) {
  .wraptop h1 {
    font-size: 35px;
  }
}
@media (min-width: 650px) {
  .wraptop h1 {
    font-size: 50px;
    /* font-size: calc((0.0989119683 * 100vw + (58.5558852621px))); */
  }
}
@media (min-width: 1430px) {
  .wraptop h1 {
    font-size: 75px;
  }
}
.plane {
  position: absolute;
  width: 15%;
  margin: -10px 0 0 -10px;
  will-change: transform;
  -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  z-index: 10000;
}

.concept-group,
.disp-group,
.extra-prize{
  width: 80vw;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 2em;
}

.concept-back{
  overflow: hidden;
  background: radial-gradient(circle at bottom, #fff, transparent 80%), linear-gradient(to top, dodgerblue 0%, transparent 70%), linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4) 70%), #1e90ff;
  animation: bg 30s infinite;
  padding-top: 100px;
  padding-bottom: 100px;
}

/* 概要 */

/* インスタボタン */
.button a {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    text-decoration: none;
    display: block;
    max-width: 250px;
    background:linear-gradient(to right,
        rgba(247, 207, 0, 0.7),
        rgba(246, 37, 2, 0.7) 45%,
        rgba(182, 47, 82, 0.7) 75%,
        rgba(113, 58, 166, 0.7));
    margin: auto;
    padding: 10px 30px;
    text-align: center;
    line-height: 1.8;
	transition: 0.3s ease-in-out;
    text-decoration: none;
    font-weight: 500;
    outline: none;
    color: #fff;
    transition: ease .2s;
}
.button a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  transform: skewX(-25deg);
}
.button a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #333333;
    border-right: 3px solid #333333;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.button a:hover {
    background:linear-gradient(to right,
        rgba(247, 207, 0, 0.7),
        rgba(246, 37, 2, 0.7) 45%,
        rgba(182, 47, 82, 0.7) 75%,
        rgba(113, 58, 166, 0.7));;
    color: #FFF;
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 30%), 0 0 5px rgb(0 0 0 / 30%);
}
.button a:hover:after {
    border-color: #FFF;
}
.button a:hover::before {
  animation: shine 0.7s;
}

@keyframes shine {
  100% {
    left: 125%;
  }
}

.button{
    vertical-align:middle; 
    padding: 10px 0;
    text-align: center;
}


/* 背景共通 */
.disp-back {
  overflow: hidden;
  background: radial-gradient(circle at bottom, #fff, transparent 80%), linear-gradient(to top, dodgerblue 0%, transparent 70%), linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4) 70%), #1e90ff;
  animation: bg 30s infinite;
  padding-top: 100px;
  padding-bottom: 100px;
}

/* 背景アニメ */
@keyframes bg {
  0%, 100% {background-color: #1e90ff;}
  25% {background-color: #39d24a;}
  50% {background-color: #ffe244;}
  75% {background-color: #ff36a3;}
}

@keyframes bg2 {
  0%, 100% {background-color: #ffe244;}
  25% {background-color: #1e90ff;}
  50% {background-color: #39d24a;}
  75% {background-color: #ff36a3;}
}

@keyframes bg3 {
  0%, 100% {background-color: #ff36a3;}
  25% {background-color: #39d24a;}
  50% {background-color: #ffe244;}
  75% {background-color: #1e90ff;}
}

@keyframes bg4 {
  0%, 100% {background-color: #39d24a;}
  25% {background-color: #1e90ff;}
  50% {background-color: #ff36a3;}
  75% {background-color: #ffe244;}
}

@keyframes bg5 {
  0%, 100% {background-color: #1e90ff;}
  25% {background-color: #ff36a3;}
  50% {background-color: #ffe244;}
  75% {background-color: #39d24a;}
}

.extra-priz-back{
  overflow: hidden;
  background: radial-gradient(circle at bottom, #fff, transparent 80%), linear-gradient(to top, dodgerblue 0%, transparent 70%), linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4) 70%), #1e90ff;
  animation: bg 30s infinite;
  padding-top: 100px;
  padding-bottom: 100px;
}


/* ------- */
/* 賞 */
/* ------- */

.usn-head{
  width: 80vw;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 2em;
}
.usn {
  margin:0;
  padding:0;
  box-sizing: border-box;
  color: #1b1717;
}
.usn ul,
.usn li {
  list-style: none;
}


.usn section {
  width: 100%;
  padding: 100px 0;
}

.usn .side-scroll-container {
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
  background-color: white;
}

/* 横スクロールセクション */
.usn .side-scroll{
  display: flex;
  justify-content: center;
  align-items: center;
}
.usn .side-scroll-heading {
  color: #eeebdd;
}

.usn .side-scroll-list-wrapper {
  position: relative;
  width: 100%;
  height: 640px;
}

.usn .side-scroll-list {
  position: absolute;
  left: 0;
  display: flex;
  gap: 0 60px;
}

.usn .side-scroll-item {
  display: block;
  align-items: center;
  justify-content: center;
}

.usn .side-scroll-item{
  width: 360px;
  height: 600px;
  color: #1b1717;
  font-size: 32px;
  font-weight: 700;
  padding: 0.25em;
}

.usn .ssi-card{
  background-color: whitesmoke;
  padding-bottom: 0.25em;
}

.usn .side-scroll-item .ssi-back,
.usn .side-scroll-item .ssi-back2,
.usn .side-scroll-item .ssi-back3,
.usn .side-scroll-item .ssi-back4,
.usn .side-scroll-item .ssi-back5,
.usn .side-scroll-item .ssi-back6
{
  background: radial-gradient(circle at bottom, #fff, transparent 80%), linear-gradient(to top, dodgerblue 0%, transparent 70%), linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4) 70%), #1e90ff;
  animation: bg 30s infinite;
  text-align: center;
  padding: 0.5em;
  margin-bottom: 0.25em;
}

/* .usn .side-scroll-item .ssi-back h3,
.usn .side-scroll-item .ssi-back2 h3,
.usn .side-scroll-item .ssi-back3 h3,
.usn .side-scroll-item .ssi-back4 h3,
.usn .side-scroll-item .ssi-back5 h3,
.usn .side-scroll-item h4,
.usn .side-scroll-item h4,
.usn .side-scroll-item h4,
.usn .side-scroll-item h4,
.usn .side-scroll-item h4
{
  text-align: center;
  margin-bottom: 0;
} */


.usn .side-scroll-item .ssi-back h3,
.usn .side-scroll-item .ssi-back2 h3,
.usn .side-scroll-item .ssi-back3 h3,
.usn .side-scroll-item .ssi-back4 h3,
.usn .side-scroll-item .ssi-back5 h3,
.usn .side-scroll-item .ssi-back6 h3,
.usn .side-scroll-item h4
{
  text-align: center;
  margin-bottom: 0;
}


.usn .side-scroll-item .ssi-back2{
  animation: bg2 30s infinite;
}
.usn .side-scroll-item .ssi-back3{
  animation: bg3 30s infinite;
}
.usn .side-scroll-item .ssi-back4{
  animation: bg4 30s infinite;
}
.usn .side-scroll-item .ssi-back5{
  animation: bg5 30s infinite;
}

.usn .side-scroll-item .ssi-back6{
  animation: bg2 30s infinite;
}


.usn .side-scroll-item + .side-scroll-item {
  margin-left: 60px;
}

.usn .side-scroll-item p
{
  font-size: 0.5em;
  margin-bottom:10px;
}
.usn .side-scroll-item h4
{
  text-align: center;
}

body .container :is(.is-layout-flow,.is-layout-constrained) .usn .side-scroll-item p:where(:not(:last-child))
{
  margin-block-end:10px;
}

.usn .side-scroll-item .img-wrap{
  height: 71px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background-color: white;
  margin: 0.5em;
}

.usn .side-scroll-item img
{
  width: 300px;
  margin-top: 0;
  margin-bottom: 0;
}
.usn .side-scroll-item img.hinokage-img,
.usn .side-scroll-item img.ksol-img
{
  margin-top:19px;
}

/* 副賞 */
.extra-prize img{
  width: 60vw;
  max-width: 600px;
  margin-top: 50px;
  margin-bottom: 50px;
}



/* 応募概要 */

/* .disp-back2 { */
  /* height: 100vh; */
  /* overflow: hidden; */
  /* background: radial-gradient(circle at bottom, #fff, transparent 80%), linear-gradient(to top, dodgerblue 0%, transparent 70%), linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4) 70%), #1e90ff; */
  /* animation: bg 30s infinite; */
  /* padding-top: 100px; */
  /* padding-bottom: 100px; */
/* } */


/* .overview .section {
  height: 125vh;
  position: relative;
  color: #fff;
}
.overview .section1 {
  background: radial-gradient(circle at bottom, #fff, transparent 80%), linear-gradient(to top, dodgerblue 0%, transparent 70%), linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4) 70%), #1e90ff;
  animation: bg2 30s infinite;
}
.overview .section2 {
  background: radial-gradient(circle at bottom, #fff, transparent 80%), linear-gradient(to top, dodgerblue 0%, transparent 70%), linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4) 70%), #1e90ff;
  animation: bg3 30s infinite;
}
.overview .section3 {
  background: radial-gradient(circle at bottom, #fff, transparent 80%), linear-gradient(to top, dodgerblue 0%, transparent 70%), linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4) 70%), #1e90ff;
  animation: bg4 30s infinite;
}
.overview .section4 {
  background: radial-gradient(circle at bottom, #fff, transparent 80%), linear-gradient(to top, dodgerblue 0%, transparent 70%), linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4) 70%), #1e90ff;
  animation: bg5 30s infinite;
}
.overview .section5 {
  background: radial-gradient(circle at bottom, #fff, transparent 80%), linear-gradient(to top, dodgerblue 0%, transparent 70%), linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4) 70%), #1e90ff;
  animation: bg 30s infinite;
}
.overview .section6 {
  background: radial-gradient(circle at bottom, #fff, transparent 80%), linear-gradient(to top, dodgerblue 0%, transparent 70%), linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4) 70%), #1e90ff;
  animation: bg2 30s infinite;
}

.overview .section__pin {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.overview .section h2{
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
margin-bottom: 25px;
padding-top: 2em;
}

.overview .section__pin .inner {
  color: black;
  font-size: 14px; 
  display: block;
  height: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  margin-bottom: 25px;
  padding: 2em;
  background-color: white;
  width: 80vw;
  max-width: 800px;
} */

.st_section{
  height:600vh;
  margin-left: auto;
  margin-right: auto;
}
.st_wrapper{
  overflow: hidden;
}
.st_container {
  display: flex;
}
.st_item {
  height: 150vh;
  display: grid;
  place-items: center;
  font-size: 40px;
  color: #ffffff;
  background-repeat:no-repeat;
  background-size:cover;
}
#st_item_1 {
  background-image: url(/img/kirikae/kirikae_1.jpg);
}
#st_item_2 {
  background-image: url(/img/kirikae/kirikae_2.jpg);
}
#st_item_3 {
  background-image: url(/img/kirikae/kirikae_3.jpg);
}
#st_item_4 {
  background-image: url(/img/kirikae/kirikae_4.jpg);
}
#st_item_5 {
  background-image: url(/img/kirikae/kirikae_5.jpg);
}


@media screen and (max-width: 1280px) {
    /* 1024pxまでの幅の場合に適応される */
    .st_section{
      height:320vh;
      max-width:100vw;
      margin-left: auto;
      margin-right: auto;
    }
    .st_item {
      height:80vh;
    }
  }
  @media screen and (max-width: 768px) {
    /* 1024pxまでの幅の場合に適応される */
    .st_section{
      height:280vh;
    }
    .st_item {
      height: 70vh;
    }


  }
  @media screen and (max-width: 600px) {
    .st_section{
      height:200vh;
    }
    .st_item {
      height: 50vh;
    }
  }
  @media screen and (max-width: 320px) {
    .st_section{
      height:100vh;
    }
    .st_item {
      height: 25vh;
    }
  }


.Sponsoredlogo{max-width:300px;}


/* てくてくアニメーション */
/* 監視用のレール：この範囲が画面に入ったら発火 */
.walk-track {
  width: 100%;
  height: 150px; /* キャラクタの高さに合わせて調整 */
  position: relative;
  margin: 100px 0;
}

/* 移動するコンテナ */
.character-sprite {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px; /* キャラクタのサイズ */
  transform: translateX(-100%); /* 最初は左の画面外 */
  opacity: 0;
}

/* クラスが付いた時の移動（1回だけ実行） */
.is-active .character-sprite {
  /* 5sかけて右へ。forwardsで最後（右端）に留まらせる */
  animation: move-once 5s linear forwards;
  opacity: 1;
}

/* 中の画像の「てくてく」揺れ（移動中は無限ループ） */
.is-active .walking-image {
  width: 100%;
  display: block;
  animation: tekuteku 0.5s ease-in-out infinite;
}

/* 移動アニメーション：最後は 100vw + 自分の幅 分まで移動 */
@keyframes move-once {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100vw); }
}

/* てくてくアニメーション */
@keyframes tekuteku {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50% { transform: rotate(8deg) translateY(-15px); }
}


/*ーーーーーーーーーーーーーーーーー サブページ */
/* 投稿ページ*/
.media-img {
display: none;
}
/* 問い合わせページ*/
/* 必須マーク */
.contact_must{
  background: #ff1a00;
  }
  /* 任意マーク */
  .contact_free{
    background: #999;
  }
  /* コンタクトフォーム */
  .contact_must,
  .contact_free {
    color: #fff;
    border-radius: 3px;
    font-size: 12px;
    margin-right: 10px;
    padding: 1px 5px;
    letter-spacing: 0.2em;
  }
  /* リパッチャ */
  .grecaptcha-badge { visibility: hidden; }