@charset "UTF-8";

/* =========================================
PC & 共通スタイル (Base Style - Min Width 601px)
========================================= */

@media (min-width: 601px) {

/* カスタム設定 */
:root {
--particle-color-start: 255, 255, 255; /* 白 */
--particle-color-end: 100, 200, 255; /* 青っぽい虹彩 */
}

body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
text-align: center;
background: #000000;
}

/* ========================= [ #dmm_ntgnavi ] */
#dmm_ntgnavi {
position: relative;
z-index: 1000;
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;
}

/* ナビゲーション用メディアクエリ (960px以下) */
@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 コンテナエリア
----------------------- */
.fv-container {
width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 1920 / 1080;     
background-position: center;
background-repeat: no-repeat;
container-type: inline-size;
position: relative;
background-size: cover; 
}

/* -----------------------
背景画像レイヤー (PC/SP切り替え & 明滅)
----------------------- */
.bg-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: background-image 0.3s ease;
will-change: opacity; /* パフォーマンス最適化ヒント */
}

/* 通常の背景 (暗め) - PC用 */
.bg-normal {
z-index: 1;
/* imagesフォルダのパスを指定 (../images/ になります) */
background-image: url('../images/fv.webp');
}

/* 光っている背景 (明るめ) - PC用 */
.bg-glow {
z-index: 2;
opacity: 0;
/* imagesフォルダのパスを指定 */
background-image: url('../images/fv_light.webp');

/* ゆっくり点滅するアニメーション */
animation: glow-pulse 2s ease-in-out infinite;
}

/* アニメーション停止用のクラス（JSで制御） */
.paused {
animation-play-state: paused !important;
}

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

/* -----------------------
光の粒子 Canvas
----------------------- */
#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 {
	position: absolute;
	margin-top: 1.5%;  /* 上から5%の位置 */
	left: 32%; /* 左から5%の位置 */
	width: 34cqw; /* 親幅の15%のサイズ */
	z-index: 10;
}

/* タイトルエリア */
.title-container {
display: flex;
justify-content: center;
align-items: center;
gap: 0rem; /* 文字間隔 */
flex-wrap: wrap; /* 画面が狭すぎる場合は折り返し */
}

/* バウンドする文字 (共通設定) */
.bounce-char {
margin:20px 0px 0px 0px;
right:210px;
display: inline-block;
height: auto; /* アスペクト比を維持 */
/* デフォルト幅設定 */
width: clamp(60px, 12vw, 110px);
/* アニメーション設定 */
animation: bounce-wave 2s ease-in-out infinite;
}

/* --- 文字ごとのサイズ・遅延設定 --- */
/* clamp(最小px, 推奨vw, 最大px) の数値を変更して各文字の大きさを調整してください */

/* 1文字目: 祭 */
.bounce-char:nth-child(1) {
position: absolute;
	margin-top: 42%;  /* 上から5%の位置 */
	left: 34%; /* 左から5%の位置 */
	width: 6.5cqw; /* 親幅の15%のサイズ */
	z-index: 10;
animation-delay: 0.0s;
}
/* 2文字目: り */
.bounce-char:nth-child(2) {
position: absolute;
margin-top: 42%;  /* 上から5%の位置 */
left: 40.5%; /* 左から5%の位置 */
width: 4.5cqw; /* 親幅の15%のサイズ */
z-index: 10;
animation-delay: 0.1s;
}
/* 3文字目: の */
.bounce-char:nth-child(3) {
position: absolute;
margin-top: 42%;  /* 上から5%の位置 */
left: 45%; /* 左から5%の位置 */
width: 3.7cqw; /* 親幅の15%のサイズ */
z-index: 10;
animation-delay: 0.2s;
}
/* 4文字目: 予 */
.bounce-char:nth-child(4) {
position: absolute;
margin-top: 42%;  /* 上から5%の位置 */
left: 48.8%; /* 左から5%の位置 */
width: 5.5cqw; /* 親幅の15%のサイズ */
z-index: 10;
animation-delay: 0.3s;
}
/* 5文字目: 感 */
.bounce-char:nth-child(5) {
position: absolute;
margin-top: 42%;  /* 上から5%の位置 */
left: 54%; /* 左から5%の位置 */
width: 4.7cqw; /* 親幅の15%のサイズ */
z-index: 10;
animation-delay: 0.4s;
}
/* 6文字目: ！ (縦長画像のため height 基準) */
.bounce-char:nth-child(6) {
position: absolute;
margin-top: 42%; /* 上から5%の位置 */
left: 58.7%; /* 左から5%の位置 */
width: 1.3cqw; /* 親幅の15%のサイズ */
animation-delay: 0.5s;
}
/* 7文字目: ？ */
.bounce-char:nth-child(7) {
position: absolute;
margin-top: 41.5%;  /* 上から5%の位置 */
left: 60%; /* 左から5%の位置 */
width: 3.7cqw; /* 親幅の15%のサイズ */
animation-delay: 0.6s;
}

/* 文字のアニメーション定義 */
@keyframes bounce-wave {
0%, 100% { transform: translateY(0); }
25% { transform: translateY(-20px); }
50% { transform: translateY(0); }
75% { transform: translateY(5px); }
}
	
.container {
width: 850px;
margin: 0 auto;
position: relative;
}	
	

.sf-frame-container {
position: relative;
width: 100%;
max-width: 850px;
margin: 0 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;
}
.sf-frame-title {
color: #f6f712;
padding:0px 0px;
margin-bottom:0px;
background-color: #00f0ff;
background-image:url("../images/frame_ptarn.webp");
background-size:10%;

}
.sf-frame-content {
padding:0px 20px;
color: #ffffff;
font-size: 1rem;
line-height: 1.6;
font-weight: normal;
}
.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:100px auto 0px auto;
}
	
#section01 .capt{
margin:0px auto 0px auto;
}

#section01 .capt01{
margin:50px auto 0px auto;
}
	

#section02{
margin:80px auto 0px auto;
position: relative;
}

#section02 .capt01{
margin:10px auto 10px auto;
}

#section02 .capt02{
margin:50px auto 0px auto;
}


#section02 .capt03{
margin:30px auto 0px auto;
}
	
#section02 .capt04{
margin:30px auto 0px auto;
}
	
#section02 .capt05{
margin:50px auto 0px auto;
}

#section02 .list{
margin:30px auto 30px auto;
text-align: left;
font-size:14px;
line-height:25px;
font-family:'Hiragino Kaku Gothic Pro';
padding-left: 1.2em; 
text-indent: -1.2em;
}
	
#section02 .kuma01 {
top:14%;
left:4%;
position: absolute;
 animation: piyopiyo 1.2s infinite ease-in-out;
}

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

	
#section02 .sec02_btn{
margin:50px auto 0px auto;
}
	
#section02 .sec02_btn: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;	
}	
	

#slide{
margin:0px auto 0px auto;
position: relative;
}
	
#slide .slide_btn{
margin:100px auto 0px auto;
position: relative;
width:1000px;
height:500px;
background: url("../images/slide_btn_bg_open.webp") no-repeat center;
background-size:100%;

}

	
#slide .slide_btn .held{
top:-80px;
left:auto;
right:380px;
position:absolute;
width:200px;
height:auto;
text-align: center;
animation: piyopiyo 1.2s infinite ease-in-out;
}
	
	
	
	
#slide .slide_btn .btn01{
top:0px;
left:auto;
right:325px;
position:absolute;
width:340px;
height:auto;
text-align: center;
cursor: pointer;
}

	
#slide .slide_btn .btn02{
top:70px;
left:20px;
position:absolute;
width:310px;
height:auto;
text-align: center;
cursor: pointer;
}
	
#slide .slide_btn .btn03{
top:45px;
left:auto;
right:0px;
position:absolute;
width:269px;
height:auto;
text-align: center;
cursor: pointer;
}	
	
	
#slide .slide_btn .btn04{
top:310px;
left:100px;
position:absolute;
width:299px;
height:auto;
text-align: center;
cursor: pointer;
}
	
	
#slide .slide_btn .btn05{
top:300px;
left:auto;
right:0px;
position:absolute;
width:308px;
height:auto;
text-align: center;
cursor: pointer;
}
	
#slide .not_open{
margin:50px auto 0px auto;
width:850px;
}		
	
	
#slide .not_open .pic{
margin:50px auto 0px auto;

}	
	


.scan-effect02 {
margin-top:10px;
position: relative;
overflow: hidden;
width:850px;
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;
}

	
	
#slide .box01{
margin:50px auto 0px auto;
width:850px;
}	
	
#slide .box01 .slidebox01{
margin:30px 0px 0px 0px;
width:514px;
height:288px;
background: url("../images/slidebox01_slide01_pic01_bg.webp") no-repeat center;
background-size: contain;
float: left;
}
	
#slide .box01 .slidebox01 .pic01{
width:492px;
height:267px;
display: block;
}
	


	

.scan-effect {
margin-top:10px;
position: relative;
overflow: hidden;
width:492px;
height:267px;

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; }
}
	
	
/* --- 光彩点滅アニメーション --- */
.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 .slidebox02{
margin:30px 0px 0px 10px;
width:325px;
height: auto;
display: block;
float: left;
}	
	
#slide .box01 .slidebox02 .capt01{
margin:0px auto 0px auto;
width:323px;
height: auto;
}		

#slide .box01 .slidebox02 li{
margin:6px 2px 0px 2px;
width:155px;
height: auto;
display: inline-block;
white-space: normal;
cursor: pointer;
}
	
	
	
#slide .box01 .slidebox02 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;	
}
	
	
	
#slide .box01 .slidebox03{
margin: 10px auto 0px auto;
position: relative;
width:375px;
height:365px;
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;
float:left;
}

#slide .box01 .slidebox03 .capt01{
margin:10px auto 0px auto;
width:345px;
}
	

#slide .box01 .slidebox04{
margin: 10px 0px 0px 11px;
position: relative;
width:462px;
height:365px;
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;
float:left;
}
	
#slide .box01 .slidebox04 .capt01{
margin:9px auto 0px auto;
width:425px;
height: auto;
}
	
#slide .box01 .slidebox04 .btn{
margin:15px auto 0px auto;
width:425px;
height: auto;
background: none;
border: none;
cursor: pointer;
}
	
#slide .box01 .slidebox04 .btn: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;	
}	


#slide .box01 .slidebox04 .capt02{
margin:15px auto 0px auto;
width:420px;	
}
	
	
#slide .box01 .slidebox05{
margin: 10px 0px 0px 0px;
position: relative;
width:850px;
height:231px;
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;
float:left;
}

#slide .box01 .slidebox05 .capt01{
margin:10px auto 0px auto;
}
	
#slide .box01 .btn_box{
clear:both;
margin: 10px auto 0px auto;
padding: 0px;
position: relative;
width:650px;
height:auto;
font-family: 'M PLUS 1', sans-serif;
}	

	

#slide .box01 .btn_box li{
margin:50px 10px 0px 10px;
width:289px;
height:auto;
display: inline-block;
white-space: normal;
cursor: pointer;
}		
	
#slide .box01 .btn_back{
margin:50px 10px 0px 10px;
width:235px;
height: auto;
cursor: pointer;
}
	
	
#slide .box01 .btn_back: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;	
}	
	
	
	

/*-------box02-------*/


#slide .box02{
margin:50px auto 0px auto;
width:850px;
}	
	
#slide .box02 .slidebox01{
margin:30px 0px 0px 0px;
width:514px;
height:288px;
background: url("../images/slidebox01_slide01_pic01_bg.webp") no-repeat center;
background-size: contain;
float: left;
}
	
#slide .box02 .slidebox01 .pic01{
width:492px;
height:267px;
display: block;
}
	
/* --- 走査線の実体（画像の上に被せる膜） --- */
/* --- 走査線エフェクトの親設定（修正版） --- */
.scan-effect {
margin-top:10px;
position: relative;
overflow: hidden;
width:492px;
height:267px;
/* ▼ここが重要：中身（画像）のサイズに合わせて枠を縮める */
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:30px 0px 0px 10px;
width:325px;
height: auto;
display: block;
float: left;
}	
	
#slide .box02 .slidebox02 .capt01{
margin:0px auto 0px auto;
width:323px;
height: auto;
}		

#slide .box02 .slidebox02 li{
margin:6px 2px 0px 2px;
width:155px;
height: auto;
display: inline-block;
white-space: normal;
}
	
	
#slide .box02 .slidebox02 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;	
}	
	
	
#slide .box02 .slidebox03{
margin: 10px auto 0px auto;
position: relative;
width:375px;
height:365px;
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;
float:left;
}

#slide .box02 .slidebox03 .capt01{
margin:10px auto 0px auto;
width:345px;
}
	

#slide .box02 .slidebox04{
margin: 10px 0px 0px 11px;
position: relative;
width:462px;
height:365px;
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;
float:left;
}
	
#slide .box02 .slidebox04 .capt01{
margin:9px auto 0px auto;
width:425px;
height: auto;
}
	
#slide .box02 .slidebox04 .btn{
margin:15px auto 0px auto;
width:425px;
height: auto;
background: none;
border: none;
cursor: pointer;
}
	
#slide .box02 .slidebox04 .btn: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;	
}	


#slide .box02 .slidebox04 .capt02{
margin:15px auto 0px auto;
width:420px;	
}
	
	
#slide .box02 .slidebox05{
margin: 10px 0px 0px 0px;
position: relative;
width:850px;
height:231px;
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;
float:left;
}

#slide .box02 .slidebox05 .capt01{
margin:10px auto 0px auto;
}
	
#slide .box02 .btn_box{
clear:both;
margin: 10px auto 0px auto;
padding: 0px;
position: relative;
width:650px;
height:auto;
font-family: 'M PLUS 1', sans-serif;
}	

	

#slide .box02 .btn_box li{
margin:50px 10px 0px 10px;
width:289px;
height:auto;
display: inline-block;
white-space: normal;
cursor: pointer;
}		
	
#slide .box02 .btn_back{
margin:50px 10px 0px 10px;
width:235px;
height: auto;
cursor: pointer;
}
	
	
#slide .box02 .btn_back: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;	
}	
	

/*-------.box03-------*/


#slide .box03{
margin:50px auto 0px auto;
width:850px;
}	
	
#slide .box03 .slidebox01{
margin:30px 0px 0px 0px;
width:514px;
height:288px;
background: url("../images/slidebox01_slide01_pic01_bg.webp") no-repeat center;
background-size: contain;
float: left;
}
	
#slide .box03 .slidebox01 .pic01{
width:492px;
height:267px;
display: block;
}
	
/* --- 走査線の実体（画像の上に被せる膜） --- */
/* --- 走査線エフェクトの親設定（修正版） --- */
.scan-effect {
margin-top:10px;
position: relative;
overflow: hidden;
width:492px;
height:267px;
/* ▼ここが重要：中身（画像）のサイズに合わせて枠を縮める */
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:30px 0px 0px 10px;
width:325px;
height: auto;
display: block;
float: left;
}	
	
#slide .box03 .slidebox02 .capt01{
margin:0px auto 0px auto;
width:323px;
height: auto;
}		

#slide .box03 .slidebox02 li{
margin:6px 2px 0px 2px;
width:155px;
height: auto;
display: inline-block;
white-space: normal;
}
	
	
#slide .box03 .slidebox02 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;	
}	
	
	
	
#slide .box03 .slidebox03{
margin: 10px auto 0px auto;
position: relative;
width:375px;
height:365px;
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;
float:left;
}

#slide .box03 .slidebox03 .capt01{
margin:10px auto 0px auto;
width:345px;
}
	

#slide .box03 .slidebox04{
margin: 10px 0px 0px 11px;
position: relative;
width:462px;
height:365px;
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;
float:left;
}
	
#slide .box03 .slidebox04 .capt01{
margin:9px auto 0px auto;
width:425px;
height: auto;
}
	
#slide .box03 .slidebox04 .btn{
margin:15px auto 0px auto;
width:425px;
height: auto;
background: none;
border: none;
cursor: pointer;
}
	
	
	
#slide .box03 .slidebox04 .btn: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;	
}	


#slide .box03 .slidebox04 .capt02{
margin:15px auto 0px auto;
width:420px;	
}
	
	
#slide .box03 .slidebox05{
margin: 10px 0px 0px 0px;
position: relative;
width:850px;
height:231px;
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;
float:left;
}

#slide .box03 .slidebox05 .capt01{
margin:10px auto 0px auto;
}
	
#slide .box03 .btn_box{
clear:both;
margin: 10px auto 0px auto;
padding: 0px;
position: relative;
width:650px;
height:auto;
font-family: 'M PLUS 1', sans-serif;
}	

	

#slide .box03 .btn_box li{
margin:50px 10px 0px 10px;
width:289px;
height:auto;
display: inline-block;
white-space: normal;
cursor: pointer;
}		
	
#slide .box03 .btn_back{
margin:50px 10px 0px 10px;
width:235px;
height: auto;
cursor: pointer;
}
	
	
#slide .box03 .btn_back: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;	
}	
	

/*-------.box04-------*/


#slide .box04{
margin:50px auto 0px auto;
width:850px;
}	
	
#slide .box04 .slidebox01{
margin:30px 0px 0px 0px;
width:514px;
height:288px;
background: url("../images/slidebox01_slide01_pic01_bg.webp") no-repeat center;
background-size: contain;
float: left;
}
	
#slide .box04 .slidebox01 .pic01{
width:492px;
height:267px;
display: block;
}
	
/* --- 走査線の実体（画像の上に被せる膜） --- */
/* --- 走査線エフェクトの親設定（修正版） --- */
.scan-effect {
margin-top:10px;
position: relative;
overflow: hidden;
width:492px;
height:267px;
/* ▼ここが重要：中身（画像）のサイズに合わせて枠を縮める */
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:30px 0px 0px 10px;
width:325px;
height: auto;
display: block;
float: left;
}	
	
#slide .box04 .slidebox02 .capt01{
margin:0px auto 0px auto;
width:323px;
height: auto;
}		

#slide .box04 .slidebox02 li{
margin:6px 2px 0px 2px;
width:155px;
height: auto;
display: inline-block;
white-space: normal;
}
	
	

#slide .box04 .slidebox02 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;	
}
	
	
	
#slide .box04 .slidebox03{
margin: 10px auto 0px auto;
position: relative;
width:375px;
height:365px;
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;
float:left;
}

#slide .box04 .slidebox03 .capt01{
margin:10px auto 0px auto;
width:345px;
}
	

#slide .box04 .slidebox04{
margin: 10px 0px 0px 11px;
position: relative;
width:462px;
height:365px;
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;
float:left;
}
	
#slide .box04 .slidebox04 .capt01{
margin:9px auto 0px auto;
width:425px;
height: auto;
}
	
#slide .box04 .slidebox04 .btn{
margin:15px auto 0px auto;
width:425px;
height: auto;
background: none;
border: none;
cursor: pointer;
}
	
	
#slide .box04 .slidebox04 .btn: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;	
}	


#slide .box04 .slidebox04 .capt02{
margin:15px auto 0px auto;
width:420px;	
}
	
	
#slide .box04 .slidebox05{
margin: 10px 0px 0px 0px;
position: relative;
width:850px;
height:231px;
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;
float:left;
}

#slide .box04 .slidebox05 .capt01{
margin:10px auto 0px auto;
}
	
#slide .box04 .btn_box{
clear:both;
margin: 10px auto 0px auto;
padding: 0px;
position: relative;
width:650px;
height:auto;
font-family: 'M PLUS 1', sans-serif;
}	

	

#slide .box04 .btn_box li{
margin:50px 10px 0px 10px;
width:289px;
height:auto;
display: inline-block;
white-space: normal;
cursor: pointer;
}		
	
#slide .box04 .btn_back{
margin:50px 10px 0px 10px;
width:235px;
height: auto;
cursor: pointer;
}
	
	
#slide .box04 .btn_back: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;	
}	
	
	
	
/*-------.box05-------*/


#slide .box05{
margin:50px auto 0px auto;
width:850px;
}	
	
#slide .box05 .slidebox01{
margin:30px 0px 0px 0px;
width:514px;
height:288px;
background: url("../images/slidebox01_slide01_pic01_bg.webp") no-repeat center;
background-size: contain;
float: left;
}
	
#slide .box05 .slidebox01 .pic01{
width:492px;
height:267px;
display: block;
}
	
/* --- 走査線の実体（画像の上に被せる膜） --- */
/* --- 走査線エフェクトの親設定（修正版） --- */
.scan-effect {
margin-top:10px;
position: relative;
overflow: hidden;
width:492px;
height:267px;
/* ▼ここが重要：中身（画像）のサイズに合わせて枠を縮める */
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:30px 0px 0px 10px;
width:325px;
height: auto;
display: block;
float: left;
}	
	
#slide .box05 .slidebox02 .capt01{
margin:0px auto 0px auto;
width:323px;
height: auto;
}		

#slide .box05 .slidebox02 li{
margin:6px 2px 0px 2px;
width:155px;
height: auto;
display: inline-block;
white-space: normal;
}
	
	
#slide .box04 .slidebox02 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;	
}	
	
	
	
	
#slide .box05 .slidebox03{
margin: 10px auto 0px auto;
position: relative;
width:375px;
height:365px;
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;
float:left;
}

#slide .box05 .slidebox03 .capt01{
margin:10px auto 0px auto;
width:345px;
}
	

#slide .box05 .slidebox04{
margin: 10px 0px 0px 11px;
position: relative;
width:462px;
height:365px;
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;
float:left;
}
	
#slide .box05 .slidebox04 .capt01{
margin:9px auto 0px auto;
width:425px;
height: auto;
}
	
#slide .box05 .slidebox04 .btn{
margin:15px auto 0px auto;
width:425px;
height: auto;
background: none;
border: none;
cursor: pointer;
}
	
#slide .box05 .slidebox04 .btn: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;	
}	


#slide .box05 .slidebox04 .capt02{
margin:15px auto 0px auto;
width:420px;	
}
	
	
#slide .box05 .slidebox05{
margin: 10px 0px 0px 0px;
position: relative;
width:850px;
height:231px;
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;
float:left;
}

#slide .box05 .slidebox05 .capt01{
margin:10px auto 0px auto;
}
	
#slide .box05 .btn_box{
clear:both;
margin: 10px auto 0px auto;
padding: 0px;
position: relative;
width:650px;
height:auto;
font-family: 'M PLUS 1', sans-serif;
}	

	

#slide .box05 .btn_box li{
margin:50px 10px 0px 10px;
width:289px;
height:auto;
display: inline-block;
white-space: normal;
cursor: pointer;
}		
	
#slide .box05 .btn_back{
margin:50px 10px 0px 10px;
width:235px;
height: auto;
cursor: pointer;
}
	
	
#slide .box05 .btn_back: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;	
}		
	

	
	

	
	
	

	
	
#section03{
clear: both;
margin:100px auto 0px auto;
position: relative;
min-width: 850px;
}	
	
#section03 .capt01{
margin:0px auto 50px auto;
}
	
	
#section03 .capt02{
margin:10px auto 10px auto;
}
		
#section03 .capt03{
margin:40px auto 40px auto;
}
	
#section03 .capt04{

margin:60px auto 40px auto;

}
	
#section03 .box01{
		
}
	
#section03 ul{
margin:0px auto 0px auto;
min-width: 850px;
white-space: nowrap;
}
	
#section03 li{
margin:0px 9px 0px 9px;
width:417px;
height:auto;
display: inline-block;
white-space: normal;
}
	
	
	
	
#section04 {
  margin: 0px auto 0px auto;
  position: relative;
  min-width: 850px;
  text-align: center; 
}

#section04 .bg-video {
position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 55%;
  width: 1280px;
  height: 720px;
  mix-blend-mode: screen !important; 
  opacity: 0.5 !important; 
  z-index: 0;
  object-fit: cover;
}	
	
#section04 .list{
margin:30px auto 30px auto;
text-align: left;
font-size:14px;
line-height:25px;
font-family:'Hiragino Kaku Gothic Pro';
padding-left: 1.1em; 
text-indent: -1.1em;
color: #FFFFFF;
}	
	
#section04 .capt01 {
  display: block; 
  margin: 100px auto 0px auto;
}

#section04 .btn {
  display: block;
  margin: 50px auto 50px auto;
}
	
#section04 .btn: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;	
}	


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

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

#section04 .glow-img {
  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: 100px auto 0px auto;
position: relative;
min-width: 850px;
text-align: center;
}
	
#sns .capt01{
color: #FFFFFF;
font-family: "M PLUS 1", sans-serif;
}

#sns .capt01{
color: #FFFFFF;
font-family: "M PLUS 1", sans-serif;
}	
	
#sns ul{
margin:50px auto 100px auto;
white-space: nowrap;
min-width: 850px;
}
	
#sns li{
margin:0px 9px 0px 9px;
width:170px;
height:auto;
display: inline-block;
white-space: normal;
}
	
#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:20px 0px;
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:30px 30px 30px 30px;
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);
 overflow-y: auto; /* 縦にはみ出た場合にスクロールバーを出す */
  -webkit-overflow-scrolling: touch; /* スマホで滑らかにスクロールさせる */
}

.popup-content img {
max-width:850px;
 }

.close-btn {
position:relative;
top: -10%; left: 47%;
color: #fff;
font-size: 30px;
cursor: pointer;
font-weight: bold;
}


/* --- 外部HTML読み込みモーダル用 --- */

/* 背景（黒） */
.iframe-modal-wrapper {
    display: none; /* 初期状態は非表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10000;
}

/* 白い箱（外部ファイルを表示する枠） */
.iframe-modal-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width:100%;
    height:auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* 埋め込みフレーム本体 */
.iframe-modal-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* 閉じるボタン */
.iframe-modal-close {
    position: absolute;
    top: -45px; /* 箱の外側右上に配置 */
    right: 0;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    line-height: 1;
}
.iframe-modal-close:hover {
    color: #ccc;
}	
	
		
#page_btn {
    position: fixed;
    right: 50px;
    bottom: 0;
    z-index: 100;
}
	
	
#page_btn: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;	
}

	
	
	

	}