@charset "utf-8";

/* Theme: MyTheme */

/* base
---------------------------------------------*/

* {margin:0;padding:0;}

a:link,a:visited {
	color: #2236cf;
	text-decoration:underline;
}
a:hover,a:active {
	color: #d90909;
	text-decoration:underline;
}
.pagetop a{text-decoration: none;
   vertical-align: middle;
    color: #fff;}
body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
  background:#ffffff;
  text-align:center;
  font-size:20px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", 游ゴシック, YuGothic,  Verdana, メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color: #383d5c;
	-webkit-text-size-adjust: 100%;
}
#wrap{max-width: 750px;
margin: 0 auto;}
img{ display:block;
border: none;
max-width:100%;
height: auto;
margin:-1px auto;}

footer{font-size:1em;
padding:2em 0 3em;
background:#0f1e42;
color: #fff !important;
position: relative;
z-index: 11;
}
footer a{    text-decoration: none !important;
color: #fff !important;
	}

/* layout
---------------------------------------------*/
.top{background:#000;}
/* 親コンテナ */
.image-container {
  position: relative; /* 子要素の位置基準を設定 */
  max-width: 750px; /* 大きな画像の最大幅 */
  width: 100%; /* 画面幅に合わせて縮小 */
  margin: 0 auto; /* センター揃え（必要なら） */
}
/* btn */
.btn-box{    width: 90%;
    position: absolute;
    top: 0;
    left: 50%;
    height: auto;}
.btn-box2{    width: 60%;
    position: absolute;
    bottom: 25px;
    left: 50%;
	transform: translateX(-50%);
    height: auto;}
/* 大きな画像 */
.large-image {
  width: 100%; /* 親コンテナに合わせる */
  height: auto; /* アスペクト比を維持 */
}

/* 小さい画像 */
.small-image {
  position: absolute; /* 親画像を基準に配置 */
  top: 18%; /* 上から30%の位置（例） */
  left: 50%; /* 左から50%の位置（例） */
  transform: translate(-50%, -50%); /* 完全に中央を基準にする */
  height: auto; /* 小さい画像のアスペクト比を維持 */
}
.item1{      width: 24.7%;
    height: auto;
    position: absolute;
    bottom: 14%;
    left: 5%;
    transform: translate(0%, 0%);
}

.countdown1 {    width: 100%;
    letter-spacing: 0;
    font-size: 40px;
    line-height: 100%;
    color: #fff000;
    font-weight: 500;
    position: absolute;
    top:50%;
    left: 63%;
    transform: translate(-50%, -50%);
    height: auto;
}

.countdown2 {width: 100%;
    font-size: 59px;
    letter-spacing: 2px;
    color: #fff000;
    font-weight: 400;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
}
.countdown1 .countdown-number{font-size:2.2em;}
.countdown2 .countdown-message{ writing-mode: vertical-rl;
font-weight:400;
position: relative;
    left: 13px;
    top: 6px;}
.countdown2 .countdown-number{font-size:2.2em;}
.countdown2 .countdown-name{font-size:1.5em;
position: relative;
right:12px;
}
.countdown2 .countdown-end{position: relative;
bottom:37px;}
/* form */
.form-input {width: 81%;
    font-size: 28px;
    text-align: center;
    padding: 1em 0;
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    background: #fff;
}
.form-btn {
    width: 82%;
    position: absolute;
    top:55%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
		z-index: 5;
}
.btn2 .form-btn{    top:57%;}
.btn2 .form-ring{    top:57%;}
.btn3 .form-btn{    top:58.5%;}
.btn3 .form-ring{    top:58.5%;}
.form-btn.form-btn3, .form-ring.form-ring3{    bottom: 17.5%;}
.form-input.form-input2 {top: 34.5%;}
.form-input.form-input3 {top: 25.5%;}
.form-ring{         width: 82%;
    height: 141px;
    position: absolute;
    top:55%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
		pointer-events: none;}
.arrow1{   width: 4.5%;
 position: relative;; /* 親画像を基準に配置 */
margin:-22px auto;
top: 9px;
z-index: 5;
}
.arrow2{    width: 10.7%;
 position: relative; /* 親画像を基準に配置 */
margin:-36px auto;
z-index: 5;
top:0px;
}
ol,
ul{
	list-style-position: inside;
	padding-left:10px;
}
ol li,
ul li{
	text-align:left;
}

/* utilities
---------------------------------------------*/
.c{color:#fff600;}
.b{font-weight:bold;}
.y{background-color: #ffff66;}
.l{font-size:1.2em;    line-height: 130%;}
.ll{font-size:1.5em;    line-height: 130%;}
.u {  text-decoration: none;
background: linear-gradient(rgba(255, 204, 255,0) 80%, rgb(255, 244, 171) 20%);
background-repeat: no-repeat;
background-size: 0% 100%;
transition: background-size 2.5s;
}

.position-r{position: relative;}

/* components
---------------------------------------------*/
.topbox{    z-index: 5;
    width: 750px;
    height: 60px;
    background: url(../images/webp/topbox-bg.webp);
    background-size: 100% 100%;
    position: absolute;
    top: 32px;
    overflow: hidden;
	display: flex;
  justify-content: center; /* 水平方向に中央揃え */
  align-items: center; }
.topbox-text{    color: #fff;
    font-size: 26px;
    font-weight: 500;
    position: relative;}

/* 背景アニメーションのスタイル */
    .topbox::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(to right, #023510 0%, #067023 50%, #0aa433 100%);
      transform: scaleX(0); /* 初期状態で背景は0%の幅 */
      transform-origin: left; /* アニメーションが左から始まる */
      animation: moveBackground 1.5s forwards ease-out; /* 3秒でアニメーション */
-webkit-animation-delay: 1s;
animation-delay: 1s;
    }

.box{width:1100px;
height:450px;
border:1px solid #000;
display: block;
margin:0 auto;}


/* スライダー全体 */
body .swiper {
  width: 100%; /* 画面全体に合わせる */
  height: auto; /* 任意の高さ */
  overflow: hidden; /* スライドのはみ出しを隠す */
	padding:30px 0 80px;
	background:#010c11;
}

/* スライドの動きを一定にする */
body .swiper-wrapper {
  transition-timing-function: linear !important;
}
.swiper-slide{width:44%;
height:auto;}
/* 各スライドの画像 */
.swiper-slide img {
  width: 100%; /* 画像の幅を100%に */
  height: 100%; /* 高さを100%に */
}

/* モーダルの初期状態 */
.modal-overlay {
  display: none;
  position: fixed;
z-index: 16;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0; /* 初期値: 不可視 */
  transition: opacity 0.5s ease; /* フェード効果 */
}
.modal-text-box br {
  display: none;
}
.modal-text-box .small-text{font-size: 1em;
vertical-align: inherit;;}
.modal {
	position: relative;
    top: -6%;
  margin: auto;
    width: 650px;
  max-width: 100%;
  opacity: 0; /* 初期値: 不可視 */
  transition: opacity 0.5s ease; /* フェード効果 */
}
.modal-box1{ position: absolute;
    top: 45%;
    height: auto;
    max-width: 18%;
    left: 22.5%;
    transform: translate(-50%, -50%);}
.modal-box2{position: absolute;
	bottom:5%;
	height:auto;
	max-width: 87%;
	left: 50%;
    transform: translateX(-50%);}
.modal-text-box{    width: 100%;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);}
.modal-text{    color: #fff;
    font-size: 60px;
    line-height: 120%;
		font-weight:500;
		padding-top:2%;}
/* オーバーレイのフェードイン */
.modalOverlayFadeIn {
  opacity: 1 !important; /* 表示 */
  transition: opacity 0.5s ease;
}

/* モーダルのフェードイン */
.modalFadeIn {
  opacity: 1 !important; /* 表示 */
  transform: translateY(50px); /* 元の位置に戻す */
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* オーバーレイのフェードアウト */
.modalOverlayFadeOut {
  opacity: 0 !important; /* 不可視 */
  transition: opacity 0.5s ease;
}

/* モーダルのフェードアウト */
.modalFadeOut {
  opacity: 0 !important; /* 不可視 */
  transform: translateY(10%); /* 下に移動 */
  transition: opacity 0.5s ease, transform 0.5s ease;
}


/* 閉じるボタン */
.close-btn {
        position: absolute;
    background: #fff;
    color: #052335;
    width: 30px;
    height: 30px;
    top: -32px;
    line-height: 112%;
    border-radius: 3px;
    right: 3px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}
    .countdown {
      font-size: 2rem;
      text-align: center;
      margin-top: 50px;
    }
    .message {
      font-size: 1.5rem;
      color: red;
      text-align: center;
    }
.small-text {
  font-size: 0.8em;
  vertical-align: middle;
}
.banner{width:750px;
max-width: 100%;
height:auto;
position: fixed;
bottom:0;
margin:0 auto;
z-index: 10;
}
.banner-wrap{max-width: 17.9%;
    height: auto;
    transform: translateY(-50%);
	position: absolute;
right: 3%;
    top: 55%;
}
.pagetop{width:72px;
height:72px;
font-size: 24px;
padding: 1em;
background:#0f1e42;
border-radius: 5px;
display: block;
    line-height: 0.9;
position: fixed;
bottom:25px;
right:25px;
margin:0 auto;
z-index:15;}

/* pages - home
---------------------------------------------*/
.text-hm3{font-family: "hiragino-mincho-pron", sans-serif;
font-weight: 300;
font-style: normal;
 -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.text-hm6{font-family: "hiragino-mincho-pron", sans-serif;
font-weight: 600;
font-style: normal;
 -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;}
.topimg{
padding:12px;}

/* animations
---------------------------------------------*/
.animated-element {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.animated-element.animate {
  opacity: 1;
}
.up-down{
animation: up-down 1.5s forwards ease-out;
    animation-iteration-count: infinite;}
.btn-box{
animation: pulse 1s forwards ease-out;
    animation-iteration-count: infinite;}

   /* 親要素に表示設定 */
    .btn-box {
      display: inline-block;
      overflow: hidden;
    }

    /* 画像の初期状態 */
    .btn-box img {
      display: block;
      width: 100%; /* 画像サイズをレスポンシブ対応に */
      filter: brightness(1); /* 初期は少し暗くする */
      transition: filter 0.3s ease; /* 滑らかなアニメーション */
    }

    /* Hover時の状態 */
    .btn-box:hover img, .modal-box2:hover, .form-btn:hover, .banner-wrap:hover img{
      filter: brightness(1.2); /* 明るくする */
    }
#target{
  opacity: 0;
  transition: opacity .3s ease-in-out;
  pointer-events: none;   /* ← 透明の時はクリック無効 */
}
#target img{pointer-events: none;   /* ← 透明の時はクリック無効 */}
#target.is-visible{
  opacity: 1;
  
}

#target.is-visible img{pointer-events: auto;   /* ← 表示中だけクリック有効 */}
#target2 {
      opacity:0;
            transition: opacity 0.3s ease-in-out;  /* フェードアウトにスムーズなトランジションを追加 */
}
@keyframes moveBackground {
      0% {
        transform: scaleX(0);
      }
      100% {
        transform: scaleX(0.75); /* 70%のところで停止 */
      }
    }
@keyframes up-down{0% {
    transform: translateY(0px);
}

50% {
    transform: translateY(var(--up-down-swing, 15%));
}
100% {
    transform: translateY(0px);
}
}
@keyframes pulse{
0% {
    transform: translate(-50%, 0%) scaleX(1);
}

50% {
    transform: translate(-50%, 0%) scale( 1.05);
}
100% {
    transform: translate(-50%, 0%) scaleX(1);
}
}
/* 点滅 */
.blinking{
 -webkit-animation:blink 1s ease-in-out infinite alternate;
    -moz-animation:blink 1s ease-in-out infinite alternate;
    animation:blink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0.2;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity: 0.2 ;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity: 0.2 ;}
    100% {opacity:1;}
}
/* ring */
.ring::after {
    animation-delay: 0.4s;
}

.ring::before, .ring::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
        box-shadow: 0 0 50px rgba(53, 250, 148, 0.53) inset;
    animation-name: ring;
border-radius: 100vh;
}

.ring, .ring::before, .ring::after {
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
}

.ring {
    --ring-border-radius: 1em;
}

*, ::after, ::before {
    box-sizing: border-box;
}

.ring {
    --ring-border-radius: 1em;
}
.ring.ring2::before, .ring.ring2::after{
border-radius: 100vh;
}
.btn {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: transparent;

    cursor: pointer;
    user-select: none;
    display: inline-block;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
@keyframes ring {
0% {
    transform: scale(0.95);
    opacity: 1;
}

90% {
    opacity: 0.1;
}
100% {
    transform: scale(var(--ring-scale, 1.3));
    opacity: 0;
}
}

/* フェードインのアニメーション */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* responsive
---------------------------------------------*/
@media only screen and
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
@media screen and (min-width: 750px) and (max-width: 960px) {
.pagetop{
 width: 8vw;
    height: 8vw;
    text-align: center;
    padding: 2vw;
    background: #0f1e42;
    border-radius: 4px;
    display: block;
    line-height: 0.9;
    position: fixed;
    bottom: 20vw;
    right: 2%;
    margin: 0 auto;}
}
@media screen and (min-width: 751px){
	.sp{display:none;}
}
@media screen and (max-width: 750px){
	body{font-size:4.5vw;}
  	#wrap{width: 100%;
    overflow: hidden;}
	.pc{display:none;}
.topimg {
    padding: 2vw;
}
.topbox{max-width: 100%;
    height: 3.5vh;
    top: 4vw;}
.topbox-text {font-size:4vw;}
.pagetop{    width: 8vw;
    height: 8vw;
    font-size: 4vw;
    text-align: center;
    padding: 3vw;
    background: #0f1e42;
    border-radius: 4px;
    display: block;
    line-height: 0.9;
    position: fixed;
    bottom: 25vw;
    right: 2%;
    margin: 0 auto;
}
.text-center{        position: absolute;
                top: 2px;
        left: 0;
        transform: translate(50%, 50%);}

.btn-box2{bottom:4vw;}
.modal{padding:0;}

.modal-box2{    bottom: 7vw;}
.modal-text{    font-size: 7.5vw;
    padding-top: 3%;}
	footer br{display:inherit;}
#container{width: 100%;}
.arrow1{
    margin: -3vw auto;
    top: 1.5vw;
}
.arrow2{    margin: -2.6vw auto;}
.form-input{    font-size: 3.6vw;
}

.form-ring {
            height: 19vw;
}
.countdown1{        font-size: 5vw;}
.countdown2{font-size: 12vw;}
.countdown2 .countdown-message{left: 8px;
    top: 1vw;}
.countdown2 .countdown-name{    right: 3px;}
.countdown2 .countdown-end{bottom: 5vw;}
body .swiper {padding:4vw 0 10vw;}
}