@charset "UTF-8";

body,	
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
margin: 0 auto;
padding: 0;
}	
		
ul,
ol,
dl {
list-style: none;
}	
	
		

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

img {
max-width: 100%;
height: auto;
vertical-align:top;
}





 /* -----------------------------------------
 ユーティリティクラス
----------------------------------------- */
@media (min-width: 600px) {
.invisible-pc { display: none !important; }
}

@media (max-width: 600px) {
.invisible-sp { display: none !important; }
}

/* --- 外部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%);
width: 90%;
max-width: 1000px;
height: 80%;
max-height: 800px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
/* ★ここを追記：これがないとiframeが箱を突き破ります */
overflow: hidden !important; 
}

/* 埋め込みフレーム本体 */
.iframe-modal-container iframe {
width: 100%;
/* ★重要：heightがautoになっていないか確認してください。必ず100%にします。 */
height: 100% !important; 
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;
}



/* --- #slide セクション自体の設定 --- */
#slide {
    position: relative; /* Canvas配置の基準 */
    overflow: hidden;   /* はみ出し防止 */
    background: #000;   /* Canvasロード前の黒背景 */
}

/* 1. 星空Canvas */
#slide-starfield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* 一番奥 */
    pointer-events: none;
}

/* 2. コンテンツラッパー (これが歪む) */
.slide-content-wrapper {
    position: relative;
    z-index: 10; /* Canvasより手前 */
    width: 100%;
    height: 100%;
    /* ワープ時の変形アニメーション設定 */
    transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1), filter 0.8s, opacity 0.8s;
    transform-origin: center center;
}

/* ワープ中の状態 (JSでクラス付与) */
.slide-content-wrapper.warping {
    transform: scale(2) perspective(500px) translateZ(200px); /* 手前に迫ってくる */
    filter: blur(10px) brightness(200%); /* ブラーと発光 */
    opacity: 0;
}

/* 3. フラッシュオーバーレイ */
.slide-flash-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 100; /* 最前面 */
    opacity: 0;
    pointer-events: none;
    display: none;
}

/* フラッシュアニメーション */
.slide-flash-overlay.active {
    animation: slide-flash-bang 0.8s forwards;
}

@keyframes slide-flash-bang {
    0% { opacity: 0; transform: scale(1); }
    40% { opacity: 0.8; background: #00f3ff; } /* シアンに光る */
    50% { opacity: 1; background: #ffffff; }   /* 真っ白 */
    100% { opacity: 0; transform: scale(1.2); }
}

/* --- 矢印ボタン --- */
.slide-arrows {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1000px;
    height: 0;
    z-index: 20;
    pointer-events: none; /* エリア自体はクリック透過 */
}

.slide-arrow {
    position: absolute;
    top: -30px;
    width: 60px;
    height: 60px;
    border: 2px solid #00f3ff; /* ネオンシアン */
    background: rgba(0, 41, 54, 0.6);
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s;
    /* SFっぽい角切り落としデザイン */
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%, 0% 20%);
}

.slide-arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 15px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: translate(-50%, -50%);
}

.slide-arrow:hover {
    background: #00f3ff;
    box-shadow: 0 0 15px #00f3ff;
}

.slide-arrow.prev { left: 0px; }
.slide-arrow.prev::before { transform: translate(-30%, -50%) rotate(-135deg); }

.slide-arrow.next { right: 0px; }
.slide-arrow.next::before { transform: translate(-70%, -50%) rotate(45deg); }

/* SP調整 */
@media (max-width: 600px) {
    .slide-arrows { top: 15%; width: 100%; }
    .slide-arrow { width: 40px; height: 40px; }
    .slide-arrow.prev { left: 10px; }
    .slide-arrow.next { right: 10px; }
}



/* --- 星空セクションの基準点設定 --- */
.starry-section {
    position: relative; /* Canvasをこの要素内に閉じ込めるために必須 */
    overflow: hidden;   /* はみ出し防止 */
    width: 100%;
}

/* --- スライドのロック機能用スタイル（任意） --- */
/* ロックされているボタンは少し暗くしてクリックできないように見せる */
.slide_btn li.is-locked {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none; /* CSSでもクリックを無効化 */
}