@charset "UTF-8";

/* =========================================
SP用スタイル (Smartphone Override)
========================================= */

@media (max-width: 600px) {
	
	
body, html {
margin: 0;
padding: 0;
text-align: center;
background: #000000;
}
	
	
#dmm_ntgnavi {
  position: relative;
  z-index: 1000;
}

/* CSS Document */
/* ========================= [ #dmm_ntgnavi ] */
#dmm_ntgnavi {
  background: url(../images/bg_navimain.gif) center center repeat-x #ffffff;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  font-size: 12px;
  font-family: 'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', Verdana, sans-serif;
  display: flex;
  justify-content: space-between;
}

#dmm_ntgnavi ul {
  list-style: none;
  margin: 2px 0;
  padding: 0;
  display: flex;
}

#dmm_ntgnavi ul li {
  margin: 0 6px 0 0;
  line-height: 15px;
}

#dmm_ntgnavi ul.navi_left {
  flex-grow: 2;
}

#dmm_ntgnavi ul.navi_left li a {
  display: block;
  padding: 0 3px 0 8px;
  text-decoration: none;
  border: 1px solid #eee;
  border-radius: 3px;
}

#dmm_ntgnavi ul.navi_left li a:hover {
  background: #eee;
  border: 1px solid #666;
  border-radius: 3px;
}

#dmm_ntgnavi ul.navi_left li a > span {
  display: block;
  padding: 9px 10px 7px 28px;
  color: #333;
  font-weight: bold;
  white-space: nowrap;
}

#dmm_ntgnavi ul.navi_left li.dmm_top img {
  margin: 8px 5px 8px 0;
}

#dmm_ntgnavi ul.navi_left li.ntg_top {
  margin-left: 10px;
}

#dmm_ntgnavi ul.navi_left li.ntg_top a > span {
  background: url(../images/bg_bt_olgtop.gif) 0 center no-repeat;
}

#dmm_ntgnavi ul.navi_left li.ntg_chip a > span {
  background: url(../images/bg_bt_chip.gif) 0 center no-repeat;
  letter-spacing: 0.05em;
}

#dmm_ntgnavi ul.navi_left li.ntg_poi a > span {
  background: url(../images/bg_bt_point.gif) 0 center no-repeat;
  letter-spacing: 0.05em;
}

#dmm_ntgnavi ul.navi_right {
  flex-grow: 1;
  justify-content: flex-end;
  font-size: 10px;
}

#dmm_ntgnavi ul.navi_right li {
  margin: 0 10px 0 0;
  padding: 8px 5px;
}

#dmm_ntgnavi ul.navi_right li.ntg_chip, #dmm_ntgnavi ul.navi_right li.ntg_poi {
  display: none;
}

#dmm_ntgnavi .arrow {
  padding-left: 14px;
  background: url(../images/arrow_common.gif) no-repeat left center;
  color: initial;
  text-decoration: underline;
}

#dmm_ntgnavi .tx-point {
  font-size: 16px;
  font-weight: bold;
  color: #ff4b4b !important;
}

#dmm_ntgnavi p {
  margin: 0;
  line-height: 2.6em;
}

#dmm_ntgnavi .clear {
  clear: both;
}

@media (max-width: 960px) {
  #dmm_ntgnavi ul {
    justify-content: space-between;
  }
  #dmm_ntgnavi ul.navi_left {
    flex-grow: 2;
  }
  #dmm_ntgnavi ul.navi_left li.ntg_top a > span > span {
    display: none;
  }
  #dmm_ntgnavi ul.navi_left li.ntg_chip, #dmm_ntgnavi ul.navi_left li.ntg_poi {
    display: none;
  }
  #dmm_ntgnavi ul.navi_right li {
    display: none;
  }
  #dmm_ntgnavi ul.navi_right li.ntg_chip, #dmm_ntgnavi ul.navi_right li.ntg_poi {
    display: list-item;
  }
}	
	
	
	
	

.fv-container {
position: relative;
width: 100%;
height: auto;
min-height: auto;
aspect-ratio: 750 / 933;
overflow: hidden;
background-color: #0f172a;
}

.bg-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: top center;
background-size: 100% auto;
background-repeat: no-repeat;
transition: background-image 0.3s ease;
will-change: opacity;
}

.bg-normal {
z-index: 1;
background-image: url('../images/sp_fv.webp');
}

.bg-glow {
z-index: 2;
opacity: 0;
background-image: url('../images/sp_fv_light.webp');
animation: glow-pulse 2s ease-in-out infinite;
}


@keyframes glow-pulse {
0%, 100% { opacity: 0; }
50% { opacity: 0.8; } /* 完全に不透明にはせず、下のレイヤーと馴染ませる */
}


#particle-canvas {
position: absolute;
top: 20%;
left: 0%;
width: 100%;
height: 100%;
z-index: 3;
pointer-events: none;
}

.content-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 0vh;
}

.top-logo {
margin:3% auto 0% auto;
top:0%;
width: 70%;
height: auto;
display: block;
}

.title-container {
display: flex;
justify-content: center;
align-items: center;
gap: 0.2rem;
margin-top: 1rem;
flex-wrap: wrap;
}

.bounce-char {
margin:68% auto 0% auto;
display: inline-block;
height: auto;
animation: bounce-wave 2s ease-in-out infinite;
}

@keyframes bounce-wave {
0%, 100% { transform: translateY(0); }
25% { transform: translateY(-20px); }
50% { transform: translateY(0); }
75% { transform: translateY(5px); }
}

/* 文字サイズ調整 */
.bounce-char:nth-child(1) { width: clamp(70px, 20vw, 120px); animation-delay: 0.0s; }
.bounce-char:nth-child(2) { width: clamp(40px, 14vw, 80px); animation-delay: 0.1s; }
.bounce-char:nth-child(3) { width: clamp(50px, 15vw, 90px); animation-delay: 0.2s; }
.bounce-char:nth-child(4) { width: clamp(50px, 15vw, 90px); animation-delay: 0.3s; }
.bounce-char:nth-child(5) { width: clamp(50px, 15vw, 90px); animation-delay: 0.4s; }
.bounce-char:nth-child(6) { width: auto; height: clamp(25px, 10vw, 70px); animation-delay: 0.5s; }
.bounce-char:nth-child(7) { width: clamp(25px, 10vw, 70px); animation-delay: 0.6s; }

.sf-frame-container {
position: relative;
width: 95%;
max-width: 800px;
margin: 0 auto;
box-sizing: border-box;
border: 2px solid #00f0ff;
background-color: rgba(0, 41, 54, 0.8);
font-family: 'M PLUS 1', sans-serif;
}
.sf-frame-title {
padding:10px 0px;
color: #f6f712;
font-weight: 800;
background-color: #00f0ff;
background-image:url("../images/frame_ptarn.webp");
background-size:10%;
border: none;
}
.sf-frame-content {
color: #ffffff;
font-size: 1rem;
line-height: 1.6;
font-weight: normal;
padding:0% 2%;
}
.deco-triangle-left {
position: absolute;
bottom: -2px;
left: -2px;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 0 20px;
border-color: transparent transparent transparent #00f0ff;
}
.deco-triangle-right {
position: absolute;
bottom: -2px;
right: -2px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 20px 20px;
border-color: transparent transparent #00f0ff transparent;
}

	

#section01{
margin:15% auto 0% auto;
}
	
#section01 .capt{
margin:0% auto 0% auto;
width:90%;
}

#section01 .capt01{
margin:5% auto 0% auto;
width:95%;
}

#section02{
margin:15% auto 0% auto;
}	


#section02 .capt01{
margin:0% auto 0% auto;
width:90%;
}

#section02 .capt02{
margin:10% auto 0% auto;
width:98%;
}


#section02 .capt03{
margin:5% auto 0% auto;
width:95%;
}
	
#section02 .capt04{
margin:5% auto 0% auto;
width:95%;
}
	
#section02 .capt05{
margin:8% auto 0% auto;
width:95%;
}

#section02 .list{
margin:8% 0% 8% 3%;
text-align: left;
font-size:2.2vw;
line-height:4vw;
font-family:'Hiragino Kaku Gothic Pro';
padding-left: 1.0em; 
text-indent: -1.0em;
}	
	
#section02 .kuma01 {
top:35.5%;
left:2%;
width:10%;
position: absolute;
 animation: piyopiyo 1.2s infinite ease-in-out;
}

#section02 .kuma02 {
top:35.5%;
right:2%;
width:10%;
position: absolute;
 animation: piyopiyo 1.2s infinite ease-in-out;
}	
	
#section02 .kuma03{
top:50.5%;
right:8%;
width:15%;
position: absolute;
}	
	
@keyframes piyopiyo {
  0%, 100% {
    transform: translateY(0); /* 地面の位置 */
  }
  50% {
    transform: translateY(-8px); /* 上に跳ねる高さ */
  }
}

#section02 .sec02_btn{
margin:10% auto 0% auto;
width:95%;
}
	
	
#slide{
margin:0% auto 0% auto;
position: relative;
}
	

	
#slide .slide_btn{
margin:0% auto 0% auto;
position: relative;
width:95%;
height:auto;
background: url("../images/slide_btn_bg_open_sp.webp") no-repeat center;
background-size:contain;
aspect-ratio: 750 / 850;
}
	


	
#slide .slide_btn .held{
top:1%;
right:38%;
position:absolute;
width:23%;
height:auto;
text-align: center;
animation: piyopiyo 1.2s infinite ease-in-out;
}	

	
	
#slide .slide_btn .btn01{
top:12%;
right:26%;
position:absolute;
width:47%;
height:auto;
text-align: center;
}


	
#slide .slide_btn .btn02{
top:26%;
left:-1%;
position:absolute;
width:40%;
height:auto;
text-align: center;
}
	

#slide .slide_btn .btn03{
top:24%;
left:auto;
right:-3%;
position:absolute;
width:38%;
height:auto;
text-align: center;
}	
	

#slide .slide_btn .btn04{
top:58%;
left:-2%;
position:absolute;
width:46%;
height:auto;
text-align: center;
}
	

#slide .slide_btn .btn05{
top:58%;
left:auto;
right:-2%;
position:absolute;
width:46%;
height:auto;
text-align: center;
}	
	


	
#slide .not_open .pic{
margin:0% auto 0% auto;
width:95%;
}	

/* --- 走査線の実体（画像の上に被せる膜） --- */
/* --- 走査線エフェクトの親設定（修正版） --- */
.scan-effect02 {
margin:0.5% auto 0% auto;
position: relative;
overflow: hidden;
width:100%;
height:auto;
/* ▼ここが重要：中身（画像）のサイズに合わせて枠を縮める */
display: inline-block;
/* 画像下の微妙な隙間（ディセンダー）を消す魔法 */
line-height: 0; 
}

/* --- 走査線の実体（変更なし） --- */
.scan-effect02::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  
  /* 走査線のデザイン */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.2) 50%
  );
  background-size: 100% 4px;
  animation: scan-scroll 0.5s linear infinite;
  pointer-events: none;
}

	
	
/* --- 光彩点滅アニメーション --- */
.glow_blink {
/* 2秒周期で無限ループ（数値を変えると速さが変わります） */
animation: glow_pulse 2s infinite ease-in-out;
}

@keyframes glow_pulse {
0% {
/* 開始時：光が弱い状態 */
filter: drop-shadow(0 0 5px rgba(255, 252, 18, 0.4));
}
50% {
/* 中間：指定の色 #fffc12 で強く発光 */
/* 20pxの部分を大きくすると光の広がりが強くなります */
filter: drop-shadow(0 0 20px rgba(255, 252, 18, 1));
}
100% {
/* 終了時：光が弱い状態に戻る */
filter: drop-shadow(0 0 5px rgba(255, 252, 18, 0.4));
}
}	
	
		

	
	
	
	
#slide .box01{
margin:0% auto 10% auto;
}		
	
#slide .box01 h2{
width:95%;
height:auto;
}		
	
#slide .box01 .slidebox01{
margin:5% auto 0% auto;
padding:2%;
width:92%;
height:auto;
background: url("../images/slidebox01_slide01_pic01_bg.webp") no-repeat center;
background-size: contain;

}	
	
#slide .box01 .slidebox01 img{
margin:0.5% auto 0% auto;
width:100%;
height:auto;
display: block;
}
	
/* --- 走査線の実体（画像の上に被せる膜） --- */
/* --- 走査線エフェクトの親設定（修正版） --- */
.scan-effect {
margin:0.5% auto 0% auto;
position: relative;
overflow: hidden;
width:100%;
height:auto;
/* ▼ここが重要：中身（画像）のサイズに合わせて枠を縮める */
display: inline-block;
/* 画像下の微妙な隙間（ディセンダー）を消す魔法 */
line-height: 0; 
}

/* --- 走査線の実体（変更なし） --- */
.scan-effect::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  
  /* 走査線のデザイン */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.2) 50%
  );
  background-size: 100% 4px;
  animation: scan-scroll 0.5s linear infinite;
  pointer-events: none;
}

/* --- アニメーション定義（変更なし） --- */
@keyframes scan-scroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 4px; }
}	
	
	
#slide .box01 .slidebox02{
margin:3% auto 0% auto;
width:100%;
height: auto;
display: block;
}	
	
#slide .box01 .slidebox02 .capt01{
margin:0% auto 0% auto;
width:95%;
height: auto;
}	
	
#slide .box01 .slidebox02 li{
margin:3% 1% 0% 1%;
width:46%;
height: auto;
display: inline-block;
white-space: normal;
}
	
#slide .box01 .slidebox03{
margin: 3% auto 0% auto;
position: relative;
width:95%;
height:auto;
box-sizing: border-box;
border: 2px solid #00f0ff;
background-color: rgba(0, 41, 54, 0.8);
padding: 0px;
font-family: 'M PLUS 1', sans-serif;
}	
	
#slide .box01 .slidebox03 .capt01{
margin:3% auto 3% auto;
width:98%;
}	

#slide .box01 .slidebox04{
margin: 3% auto 0% auto;
position: relative;
width:95%;
height:auto;
box-sizing: border-box;
border: 2px solid #00f0ff;
background-color: rgba(0, 41, 54, 0.8);
padding: 0px;
font-family: 'M PLUS 1', sans-serif;
}	
	
#slide .box01 .slidebox04 .capt01{
margin:3% auto 0% auto;
width:95%;
height: auto;
}
	
#slide .box01 .slidebox04 .btn{
margin:3% auto 0% auto;
width:95%;
height: auto;
background: none;
border: none;
}	
	
#slide .box01 .slidebox04 .capt02{
margin:3% auto 3% auto;
width:95%;	
}
	
#slide .box01 .slidebox05{
margin: 3% auto 0% auto;
position: relative;
width:95%;
height:auto;
box-sizing: border-box;
border: 2px solid #00f0ff;
background-color: rgba(0, 41, 54, 0.8);
padding: 0px;
font-family: 'M PLUS 1', sans-serif;
}		
	
#slide .box01 .slidebox05 .capt01{
margin:3% auto 3% auto;
width:95%;	
}	

#slide .box01 .btn_box{
margin: 0% auto 0% auto;
padding: 0%;
position: relative;
width:100%;
height:auto;
font-family: 'M PLUS 1', sans-serif;
}		
	
#slide .box01 .btn_box{
margin:3% 0% 0% 0%;
height:auto;
display: inline-block;
white-space: normal;
}	
	
#slide .box01 .btn_box li{
margin:3% 0% 0% 0%;
height:auto;
display: inline-block;
white-space: normal;
}	
	
#slide .box01 .btn_box li.btn03{
margin:0% 1.5% 0% 1%;
width:42%;
height:auto;
display: inline-block;
white-space: normal;
}	

#slide .box01 .btn_box li.btn04{
margin:3% 0% 0% 0%;
width:51%;
height:auto;
display: inline-block;
white-space: normal;
}
	
#slide .box01 .btn_box li.btn05{
margin:3% 0% 0% 0%;
width:45%;
height:auto;
display: inline-block;
white-space: normal;
}	

#slide .box01 .btn_back{
margin:15% 0% 0% 0%;
width:50%;
height: auto;
}


	
	


/*.box02*/

#slide .box02{
margin:0% auto 10% auto;
}		
	
#slide .box02 h2{
width:95%;
height:auto;
}		
	
#slide .box02 .slidebox01{
margin:5% auto 0% auto;
padding:2%;
width:92%;
height:auto;
background: url("../images/slidebox01_slide01_pic01_bg.webp") no-repeat center;
background-size: contain;

}	
	
#slide .box02 .slidebox01 img{
margin:0.5% auto 0% auto;
width:100%;
height:auto;
display: block;
}
	
/* --- 走査線の実体（画像の上に被せる膜） --- */
/* --- 走査線エフェクトの親設定（修正版） --- */
.scan-effect {
margin:0.5% auto 0% auto;
position: relative;
overflow: hidden;
width:100%;
height:auto;
/* ▼ここが重要：中身（画像）のサイズに合わせて枠を縮める */
display: inline-block;
/* 画像下の微妙な隙間（ディセンダー）を消す魔法 */
line-height: 0; 
}

/* --- 走査線の実体（変更なし） --- */
.scan-effect::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  
  /* 走査線のデザイン */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.2) 50%
  );
  background-size: 100% 4px;
  animation: scan-scroll 0.5s linear infinite;
  pointer-events: none;
}

/* --- アニメーション定義（変更なし） --- */
@keyframes scan-scroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 4px; }
}	
	
	
#slide .box02 .slidebox02{
margin:3% auto 0% auto;
width:100%;
height: auto;
display: block;
}	
	
#slide .box02 .slidebox02 .capt01{
margin:0% auto 0% auto;
width:95%;
height: auto;
}	
	
#slide .box02 .slidebox02 li{
margin:3% 1% 0% 1%;
width:46%;
height: auto;
display: inline-block;
white-space: normal;
}
	
#slide .box02 .slidebox03{
margin: 3% auto 0% auto;
position: relative;
width:95%;
height:auto;
box-sizing: border-box;
border: 2px solid #00f0ff;
background-color: rgba(0, 41, 54, 0.8);
padding: 0px;
font-family: 'M PLUS 1', sans-serif;
}	
	
#slide .box02 .slidebox03 .capt01{
margin:3% auto 3% auto;
width:98%;
}	

#slide .box02 .slidebox04{
margin: 3% auto 0% auto;
position: relative;
width:95%;
height:auto;
box-sizing: border-box;
border: 2px solid #00f0ff;
background-color: rgba(0, 41, 54, 0.8);
padding: 0px;
font-family: 'M PLUS 1', sans-serif;
}	
	
#slide .box02 .slidebox04 .capt01{
margin:3% auto 0% auto;
width:95%;
height: auto;
}
	
#slide .box02 .slidebox04 .btn{
margin:3% auto 0% auto;
width:95%;
height: auto;
background: none;
border: none;
}	
	
#slide .box02 .slidebox04 .capt02{
margin:3% auto 3% auto;
width:95%;	
}
	
#slide .box02 .slidebox05{
margin: 3% auto 0% auto;
position: relative;
width:95%;
height:auto;
box-sizing: border-box;
border: 2px solid #00f0ff;
background-color: rgba(0, 41, 54, 0.8);
padding: 0px;
font-family: 'M PLUS 1', sans-serif;
}		
	
#slide .box02 .slidebox05 .capt01{
margin:3% auto 3% auto;
width:95%;	
}	

#slide .box02 .btn_box{
margin: 0% auto 0% auto;
padding: 0%;
position: relative;
width:100%;
height:auto;
font-family: 'M PLUS 1', sans-serif;
}		
	
#slide .box02 .btn_box{
margin:3% 0% 0% 0%;
height:auto;
display: inline-block;
white-space: normal;
}	
	
#slide .box02 .btn_box li{
margin:3% 0% 0% 0%;
height:auto;
display: inline-block;
white-space: normal;
}	
	
#slide .box02 .btn_box li.btn03{
margin:0% 1.5% 0% 1%;
width:42%;
height:auto;
display: inline-block;
white-space: normal;
}	

#slide .box02 .btn_box li.btn04{
margin:3% 0% 0% 0%;
width:51%;
height:auto;
display: inline-block;
white-space: normal;
}
	
#slide .box02 .btn_box li.btn05{
margin:3% 0% 0% 0%;
width:45%;
height:auto;
display: inline-block;
white-space: normal;
}	

#slide .box02 .btn_back{
margin:15% 0% 0% 0%;
width:50%;
height: auto;
}




/*.box03*/

#slide .box03{
margin:0% auto 10% auto;
}		
	
#slide .box03 h2{
width:95%;
height:auto;
}		
	
#slide .box03 .slidebox01{
margin:5% auto 0% auto;
padding:2%;
width:92%;
height:auto;
background: url("../images/slidebox01_slide01_pic01_bg.webp") no-repeat center;
background-size: contain;

}	
	
#slide .box03 .slidebox01 img{
margin:0.5% auto 0% auto;
width:100%;
height:auto;
display: block;
}
	
/* --- 走査線の実体（画像の上に被せる膜） --- */
/* --- 走査線エフェクトの親設定（修正版） --- */
.scan-effect {
margin:0.5% auto 0% auto;
position: relative;
overflow: hidden;
width:100%;
height:auto;
/* ▼ここが重要：中身（画像）のサイズに合わせて枠を縮める */
display: inline-block;
/* 画像下の微妙な隙間（ディセンダー）を消す魔法 */
line-height: 0; 
}

/* --- 走査線の実体（変更なし） --- */
.scan-effect::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  
  /* 走査線のデザイン */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.2) 50%
  );
  background-size: 100% 4px;
  animation: scan-scroll 0.5s linear infinite;
  pointer-events: none;
}

/* --- アニメーション定義（変更なし） --- */
@keyframes scan-scroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 4px; }
}	
	
	
#slide .box03 .slidebox02{
margin:3% auto 0% auto;
width:100%;
height: auto;
display: block;
}	
	
#slide .box03 .slidebox02 .capt01{
margin:0% auto 0% auto;
width:95%;
height: auto;
}	
	
#slide .box03 .slidebox02 li{
margin:3% 1% 0% 1%;
width:46%;
height: auto;
display: inline-block;
white-space: normal;
}
	
#slide .box03 .slidebox03{
margin: 3% auto 0% auto;
position: relative;
width:95%;
height:auto;
box-sizing: border-box;
border: 2px solid #00f0ff;
background-color: rgba(0, 41, 54, 0.8);
padding: 0px;
font-family: 'M PLUS 1', sans-serif;
}	
	
#slide .box03 .slidebox03 .capt01{
margin:3% auto 3% auto;
width:98%;
}	

#slide .box03 .slidebox04{
margin: 3% auto 0% auto;
position: relative;
width:95%;
height:auto;
box-sizing: border-box;
border: 2px solid #00f0ff;
background-color: rgba(0, 41, 54, 0.8);
padding: 0px;
font-family: 'M PLUS 1', sans-serif;
}	
	
#slide .box03 .slidebox04 .capt01{
margin:3% auto 0% auto;
width:95%;
height: auto;
}
	
#slide .box03 .slidebox04 .btn{
margin:3% auto 0% auto;
width:95%;
height: auto;
background: none;
border: none;
}	
	
#slide .box03 .slidebox04 .capt02{
margin:3% auto 3% auto;
width:95%;	
}
	
#slide .box03 .slidebox05{
margin: 3% auto 0% auto;
position: relative;
width:95%;
height:auto;
box-sizing: border-box;
border: 2px solid #00f0ff;
background-color: rgba(0, 41, 54, 0.8);
padding: 0px;
font-family: 'M PLUS 1', sans-serif;
}		
	
#slide .box03 .slidebox05 .capt01{
margin:3% auto 3% auto;
width:95%;	
}	

#slide .box03 .btn_box{
margin: 0% auto 0% auto;
padding: 0%;
position: relative;
width:100%;
height:auto;
font-family: 'M PLUS 1', sans-serif;
}		
	
#slide .box03 .btn_box{
margin:3% 0% 0% 0%;
height:auto;
display: inline-block;
white-space: normal;
}	
	
#slide .box03 .btn_box li{
margin:3% 0% 0% 0%;
height:auto;
display: inline-block;
white-space: normal;
}	
	
#slide .box03 .btn_box li.btn03{
margin:0% 1.5% 0% 1%;
width:42%;
height:auto;
display: inline-block;
white-space: normal;
}	

#slide .box03 .btn_box li.btn04{
margin:3% 0% 0% 0%;
width:51%;
height:auto;
display: inline-block;
white-space: normal;
}
	
#slide .box03 .btn_box li.btn05{
margin:3% 0% 0% 0%;
width:55%;
height:auto;
display: inline-block;
white-space: normal;
}	

#slide .box03 .btn_back{
margin:15% 0% 0% 0%;
width:50%;
height: auto;
}
	
	




/*.box04*/

#slide .box04{
margin:0% auto 10% auto;
}		
	
#slide .box04 h2{
width:95%;
height:auto;
}		
	
#slide .box04 .slidebox01{
margin:5% auto 0% auto;
padding:2%;
width:92%;
height:auto;
background: url("../images/slidebox01_slide01_pic01_bg.webp") no-repeat center;
background-size: contain;

}	
	
#slide .box04 .slidebox01 img{
margin:0.5% auto 0% auto;
width:100%;
height:auto;
display: block;
}
	
/* --- 走査線の実体（画像の上に被せる膜） --- */
/* --- 走査線エフェクトの親設定（修正版） --- */
.scan-effect {
margin:0.5% auto 0% auto;
position: relative;
overflow: hidden;
width:100%;
height:auto;
/* ▼ここが重要：中身（画像）のサイズに合わせて枠を縮める */
display: inline-block;
/* 画像下の微妙な隙間（ディセンダー）を消す魔法 */
line-height: 0; 
}

/* --- 走査線の実体（変更なし） --- */
.scan-effect::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  
  /* 走査線のデザイン */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.2) 50%
  );
  background-size: 100% 4px;
  animation: scan-scroll 0.5s linear infinite;
  pointer-events: none;
}

/* --- アニメーション定義（変更なし） --- */
@keyframes scan-scroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 4px; }
}	
	
	
#slide .box04 .slidebox02{
margin:3% auto 0% auto;
width:100%;
height: auto;
display: block;
}	
	
#slide .box04 .slidebox02 .capt01{
margin:0% auto 0% auto;
width:95%;
height: auto;
}	
	
#slide .box04 .slidebox02 li{
margin:3% 1% 0% 1%;
width:46%;
height: auto;
display: inline-block;
white-space: normal;
}
	
#slide .box04 .slidebox03{
margin: 3% auto 0% auto;
position: relative;
width:95%;
height:auto;
box-sizing: border-box;
border: 2px solid #00f0ff;
background-color: rgba(0, 41, 54, 0.8);
padding: 0px;
font-family: 'M PLUS 1', sans-serif;
}	
	
#slide .box04 .slidebox03 .capt01{
margin:3% auto 3% auto;
width:98%;
}	

#slide .box04 .slidebox04{
margin: 3% auto 0% auto;
position: relative;
width:95%;
height:auto;
box-sizing: border-box;
border: 2px solid #00f0ff;
background-color: rgba(0, 41, 54, 0.8);
padding: 0px;
font-family: 'M PLUS 1', sans-serif;
}	
	
#slide .box04 .slidebox04 .capt01{
margin:3% auto 0% auto;
width:95%;
height: auto;
}
	
#slide .box04 .slidebox04 .btn{
margin:3% auto 0% auto;
width:95%;
height: auto;
background: none;
border: none;
}	
	
#slide .box04 .slidebox04 .capt02{
margin:3% auto 3% auto;
width:95%;	
}
	
#slide .box04 .slidebox05{
margin: 3% auto 0% auto;
position: relative;
width:95%;
height:auto;
box-sizing: border-box;
border: 2px solid #00f0ff;
background-color: rgba(0, 41, 54, 0.8);
padding: 0px;
font-family: 'M PLUS 1', sans-serif;
}		
	
#slide .box04 .slidebox05 .capt01{
margin:3% auto 3% auto;
width:95%;	
}	

#slide .box04 .btn_box{
margin: 0% auto 0% auto;
padding: 0%;
position: relative;
width:100%;
height:auto;
font-family: 'M PLUS 1', sans-serif;
}		
	
#slide .box04 .btn_box{
margin:3% 0% 0% 0%;
height:auto;
display: inline-block;
white-space: normal;
}	
	
#slide .box04 .btn_box li{
margin:3% 0% 0% 0%;
height:auto;
display: inline-block;
white-space: normal;
}	
	
#slide .box04 .btn_box li.btn03{
margin:0% 1.5% 0% 1%;
width:42%;
height:auto;
display: inline-block;
white-space: normal;
}	

#slide .box04 .btn_box li.btn04{
margin:3% 0% 0% 0%;
width:51%;
height:auto;
display: inline-block;
white-space: normal;
}
	
#slide .box04 .btn_box li.btn05{
margin:3% 0% 0% 0%;
width:45%;
height:auto;
display: inline-block;
white-space: normal;
}	

#slide .box04 .btn_back{
margin:15% 0% 0% 0%;
width:50%;
height: auto;
}
	
	
/*.box05*/

#slide .box05{
margin:0% auto 10% auto;
}		
	
#slide .box05 h2{
width:95%;
height:auto;
}		
	
#slide .box05 .slidebox01{
margin:5% auto 0% auto;
padding:2%;
width:92%;
height:auto;
background: url("../images/slidebox01_slide01_pic01_bg.webp") no-repeat center;
background-size: contain;

}	
	
#slide .box05 .slidebox01 img{
margin:0.5% auto 0% auto;
width:100%;
height:auto;
display: block;
}
	
/* --- 走査線の実体（画像の上に被せる膜） --- */
/* --- 走査線エフェクトの親設定（修正版） --- */
.scan-effect {
margin:0.5% auto 0% auto;
position: relative;
overflow: hidden;
width:100%;
height:auto;
/* ▼ここが重要：中身（画像）のサイズに合わせて枠を縮める */
display: inline-block;
/* 画像下の微妙な隙間（ディセンダー）を消す魔法 */
line-height: 0; 
}

/* --- 走査線の実体（変更なし） --- */
.scan-effect::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  
  /* 走査線のデザイン */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.2) 50%
  );
  background-size: 100% 4px;
  animation: scan-scroll 0.5s linear infinite;
  pointer-events: none;
}

/* --- アニメーション定義（変更なし） --- */
@keyframes scan-scroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 4px; }
}	
	
	
#slide .box05 .slidebox02{
margin:3% auto 0% auto;
width:100%;
height: auto;
display: block;
}	
	
#slide .box05 .slidebox02 .capt01{
margin:0% auto 0% auto;
width:95%;
height: auto;
}	
	
#slide .box05 .slidebox02 li{
margin:3% 1% 0% 1%;
width:46%;
height: auto;
display: inline-block;
white-space: normal;
}
	
#slide .box05 .slidebox03{
margin: 3% auto 0% auto;
position: relative;
width:95%;
height:auto;
box-sizing: border-box;
border: 2px solid #00f0ff;
background-color: rgba(0, 41, 54, 0.8);
padding: 0px;
font-family: 'M PLUS 1', sans-serif;
}	
	
#slide .box05 .slidebox03 .capt01{
margin:3% auto 3% auto;
width:98%;
}	

#slide .box05 .slidebox04{
margin: 3% auto 0% auto;
position: relative;
width:95%;
height:auto;
box-sizing: border-box;
border: 2px solid #00f0ff;
background-color: rgba(0, 41, 54, 0.8);
padding: 0px;
font-family: 'M PLUS 1', sans-serif;
}	
	
#slide .box05 .slidebox04 .capt01{
margin:3% auto 0% auto;
width:95%;
height: auto;
}
	
#slide .box05 .slidebox04 .btn{
margin:3% auto 0% auto;
width:95%;
height: auto;
background: none;
border: none;
}	
	
#slide .box05 .slidebox04 .capt02{
margin:3% auto 3% auto;
width:95%;	
}
	
#slide .box05 .slidebox05{
margin: 3% auto 0% auto;
position: relative;
width:95%;
height:auto;
box-sizing: border-box;
border: 2px solid #00f0ff;
background-color: rgba(0, 41, 54, 0.8);
padding: 0px;
font-family: 'M PLUS 1', sans-serif;
}		
	
#slide .box05 .slidebox05 .capt01{
margin:3% auto 3% auto;
width:95%;	
}	

#slide .box05 .btn_box{
margin: 0% auto 0% auto;
padding: 0%;
position: relative;
width:100%;
height:auto;
font-family: 'M PLUS 1', sans-serif;
}		
	
#slide .box05 .btn_box{
margin:3% 0% 0% 0%;
height:auto;
display: inline-block;
white-space: normal;
}	
	
#slide .box05 .btn_box li{
margin:3% 0% 0% 0%;
height:auto;
display: inline-block;
white-space: normal;
}	
	
#slide .box05 .btn_box li.btn03{
margin:0% 1.5% 0% 1%;
width:42%;
height:auto;
display: inline-block;
white-space: normal;
}	

#slide .box05 .btn_box li.btn04{
margin:3% 0% 0% 0%;
width:51%;
height:auto;
display: inline-block;
white-space: normal;
}
	
#slide .box05 .btn_box li.btn05{
margin:3% 0% 0% 1%;
width:40%;
height:auto;
display: inline-block;
white-space: normal;
}	

#slide .box05 .btn_box li.btn06{
margin:3% 0% 0% 1%;
width:54%;
height:auto;
display: inline-block;
white-space: normal;
}	


#slide .box05 .btn_back{
margin:15% 0% 0% 0%;
width:50%;
height: auto;
}	

	

	
	
	
	
	
	
	
	
section03{
margin:0% auto 0% auto;
position: relative;
}	
	
#section03 .capt01{
margin:10% auto 5% auto;
width: 95%;
}
	
	
#section03 .capt02{
margin:-4% auto 0% auto;
width:85%;
}
		
#section03 .capt03{
margin:10% auto 10% auto;
width:95%;
}
	
#section03 .capt04{
margin:15% auto 0% auto;
width:95%;
}

#section03 ul{
margin:0% auto 0% auto;
}
	
#section03 li{
margin:8% auto 0% auto;
width:95%;
}
	
	
	
	
	
	
#section04 {
  margin: 0% auto 0% auto;
  position: relative;
  text-align: center; 
}

#section04 .bg-video {
position: absolute;
  top:68%;
  left: 0;
  width: 100%;
  height:40%;
  object-fit: cover; /* 縦長画面に合わせて自動でトリミングされます */
  z-index:0; /* コンテンツの下に配置 */
  mix-blend-mode: screen !important; 
  opacity: 0.5 !important; 
}	
	
#section04 .capt01 {
 display: block; 
 margin: 10% auto 0% auto;
 width:95%;

}

#section04 .btn {
  display: block;
  margin: 5% auto 5% auto;
  width:95%;
}
	
#section04 .list{
margin:8% 2% 8% 2%;
text-align: left;
font-size:2.2vw;
line-height:4vw;
font-family:'Hiragino Kaku Gothic Pro';
padding-left: 1.0em; 
text-indent: -1.0em;
color: #FFFFFF;
}

#section04 .blink-container {
  position: relative;
  display: inline-block;
  /* 画像の配置位置を調整したい場合はここに margin を追加 */
  margin-top: 20px; 
}

#section04 .base-img {
  margin:0 auto 0 auto;
  display: block;
  /* 画像の下に隙間ができないようにするおまじない */
  vertical-align: bottom; 
  position: relative;
  z-index: 1;
}

#section04 .glow-img {
　margin:0 auto 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
}

#section04 .smooth-blink {
  animation: blink-smooth 2s infinite ease-in-out;
}

@keyframes blink-smooth {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  /* ★追加：ここを追加すると「スーッ」と消えるようになります */
  100% {
    opacity: 0;
  }
}

	
	
#sns{
margin: 10% auto 0% auto;
position: relative;
text-align: center;
}
	
#sns .capt01{
color: #FFFFFF;
font-family: "M PLUS 1", sans-serif;
font-size:5vw;
}	
	
#sns ul{
margin:5% auto 10% auto;
}
	
#sns li{
margin:2% 1.5% 2% 1.5%;
height:auto;
display: inline-block;
width:28%;
}

	
	
#sns li:hover{
filter: brightness(120%);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;	
}
	
	

	
#footer{
background: #FFFFFF;
border-top:2px solid #969696;
position: relative;
z-index:2;
}

#footer p{
padding:3% 0%;
font-size:15px;
color:#a4a4a4;
}

	


	
/* -----------------------------------------
 ポップアップ (モーダル) スタイル
----------------------------------------- */
.popup-overlay {
position: fixed;
top: 0; 
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: none;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
}

.popup-overlay.active {
display: flex;
opacity: 1;
}

.popup-content {
padding:2%;
position: relative;
max-width: 100%;
max-height: 100%;
transform: scale(0.8);
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
	
.popup-overlay.active .popup-content {
transform: scale(1);
}	


.popup-content img {
 max-height: 100vh;
 box-shadow: 0 0 10px rgba(0,0,0,0.5);
 }

.close-btn {
position:relative;
top:-10%;
left: 45%;
width:40px;
color: #fff;
font-size: 30px;
cursor: pointer;
font-weight: bold;
}
	
	
#page_btn {
    width: 25%;
    position: fixed;
    right: 10px;
    /* ▼ここを修正：SPも同様に隠しておきます */
    bottom: -355px; 
    z-index: 100;
}
	
	
	
	
	
	
	
	}