/* 基本設定 */
:root {
    /* ベースとなるプライマリ（シアン系） */
    --primary-50: rgb(236 254 255);
    --primary-100: rgb(207 250 254);
    --primary-200: rgb(165 243 252);
    --primary-300: rgb(103 232 249);
    --primary-400: rgb(34 211 238);
    --primary-500: rgb(6 182 212);
    --primary-600: rgb(8 145 178);
    --primary-700: rgb(14 116 144);
    --primary-800: rgb(21 94 117);
    --primary-900: rgb(22 78 99);
    
    --card-bg: #001f1f;
}

body {
    font-family: Roboto, 'Noto Sans JP', sans-serif;
    background: var(--primary-400);
    color: whitesmoke;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

.video-background {
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* コンテンツの背後に配置 */
    overflow: hidden;
}

.video-background video {
    /* 縦横比を維持したまま画面を埋め尽くす（background-size: coverと同じ効果） */
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* 動画が準備できた時に付与するクラス */
.video-background video.is-playing {
    opacity: 1;
}

img {
    width: 100%;
    height: auto;
}

video {
    width: 100%;
    height: auto;
}

/* ロード画面のスタイル */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2026; /* 一番手前に表示 */
    /* スライドのアニメーション設定 */
    opacity: 1;
    transition: opacity 0.5s ease-in;
}

/* ロード中の画像 */
.loader-img {
    width: 100dvh;
    margin-bottom: 1dvmin;
    animation: pulse 2s infinite ease-in-out;
}

.loader-text {
    color: var(--primary-50);
    font-weight: bold;
    text-align: center;
}

/* 消える時のアニメーションクラス */
#loader.loaded {
    /* transform: translateX(100%); */
    opacity: 0;
    pointer-events: none;
}

/* 画像をふわふわさせるアニメーション */
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

.container {
    max-width: 100dvmin;
    margin: 0 auto;
    padding: 2dvmin;
}

/* ヘッダー */
header {
    background: color-mix(in srgb, var(--card-bg), transparent 25%);
    border-radius: 2dvmax;
    color: whitesmoke;
    box-shadow: 1dvmin 1dvmin 4dvmin 0 color-mix(in srgb, var(--card-bg), transparent 80%);
    backdrop-filter: blur(4px);
    text-align: center;
    margin: 2dvmin;
    margin-bottom: 0;
}

header .container {
	max-width: 100dvw;
    padding: 1rem;
    /* text-shadow: 0.075rem 0.075rem 0.2rem black; */
}

a {
  color: var(--primary-200);
}

details {
    background: var(--primary-300);
    text-align: left;
    margin: 1rem auto;
    padding: 1rem  2dvw;
    border-radius: 2dvmax;
    color: #333;
    font-weight: bold;
}

summary {
    background: transparent;
    text-align: center;
}

header p {
line-height: 1.5rem;
}

header h1 {
    margin: 0 auto;
    font-size: 2.5rem;
    letter-spacing: 0.025rem;
    line-height: 2.525rem;
    color: white;
    padding-bottom: 0.5rem;
    border-bottom: 0.25rem solid var(--primary-200);
    width: fit-content;
}

header h2 {
    margin: 0.75rem;
    margin-top: 1rem;
    font-size: 1.5rem;
    letter-spacing: 0.015rem;
    line-height: 1.525rem;
    color: whitesmoke;
}

.colored-txt {
    color: var(--primary-400)
}

.subtitle {
    margin-top: 10px;
    font-weight: bold;
}

.scam-review {
	width: 66dvw;
	margin: auto;
	padding-bottom: 0;
	background: rgba(0, 0, 0, 0.66);
	border-radius: 2dvmax;
	/* border: 0.25rem solid var(--primary-300); */
	text-shadow: none;
}

.scam-review p {
	font-size: 6dvmin;
	line-height: 1.25;
	margin-top: 0.25em;
	margin-bottom: 0;
	font-weight: bold;
}

.review-name {
	font-size: 4dvmin;
}

.scroll {
    width: 66dvw;
    margin: auto;
    margin-top:1rem;
    margin-bottom: 1rem;
    background: rgba(0, 0, 0, 0.66);
    border-radius: 2dvmax;
    padding: 0;
    height: 1.5em;
    font-size  : 140%;
    line-height: 1.5em;
    text-align : center;
    text-shadow: none;
    overflow   : hidden;
}
.scroll span{
    display     : inline-block;
    white-space : nowrap;
    line-height : 1.5em;
    animation   : scrollAnime 6s linear infinite;
}
@keyframes scrollAnime{
    0% { transform: translateY(1.5em)}
    100% { transform: translateY(-4.5em)}
}

.rateoya {
    height: 12dvmin;                /* 星のサイズに合わせて少し余裕を持たせる */
    display: flex;                /* Flexboxを有効にする */
    justify-content: center;      /* 左右中央に寄せる */
    align-items: center;          /* 上下中央に寄せる（必要に応じて） */
    text-shadow: none;
}

.rate {
    position: relative;           /* before/afterの基準点 */
    display: inline-block;        /* 幅をコンテンツ（星）に合わせる */
    width: 5em;                   /* 星5つ分の幅を確保 */
    height: 1em;                  /* 高さを1文字分に固定 */
    font-size: 10dvmin;
    line-height: 1;
}

.rate:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "★★★★★";
    color: #999999;               /* 下地のグレーの星 */
    white-space: nowrap;
}

.rate:after {
    position: absolute;
    top: 0;
    left: 0;
    content: "★★★★★";
    color: #ffff1a;               /* 重ねる黄色の星 */
    white-space: nowrap;
    overflow: hidden;
    width: 1.5em;                 /* ここで評価の数（50%なら2.5em）を調整 */
}

.header-img {
	display: block;    /* ブロック要素に変更 */
    margin-left: auto; /* 左の余白を自動 */
    margin-right: auto;/* 右の余白を自動 */
	width: 100vmin;
}

.img-img {
    object-fit: cover;
    max-width: 100dvmin;
    border-radius: 1cqmin;
}

.vid-vid {
    object-fit: cover;
}

.hit-img {
    width: 15dvmax;
    height: auto;
}

.top-notice {
    background: color-mix(in srgb, var(--card-bg), transparent 25%);
    color: whitesmoke;
    padding: 1rem;
    border-radius: 2dvmax;
    text-align: center;
    box-shadow: 1dvmin 1dvmin 4dvmin 0 color-mix(in srgb, var(--card-bg), transparent 80%);
    backdrop-filter: blur(4px);
    margin-top: 4dvmin;
    margin-bottom: 0;
}

.top-notice p {
    margin-top: 0;
}

.top-notice h3 {
    font-weight: bold;
    border-bottom: 0.25rem solid var(--primary-200);
    margin-bottom: 1rem;
    margin-top: 0;
}

/* メインカード */
.hero-card {
    background: color-mix(in srgb, var(--card-bg), transparent 25%);
    padding: 1rem;
    border-radius: 2dvmax;
    color: whitesmoke;
    box-shadow: 1dvmin 1dvmin 4dvmin 0 color-mix(in srgb, var(--card-bg), transparent 80%);
    backdrop-filter: blur(4px);
    margin-top: 4dvmin;
    margin-bottom: 0;
}

.hero-card-section {
    padding: 0 1rem;
    margin: 0;
}

.hero-card h2 {
    color: white;
    padding: 0.5rem;
    border-bottom: 0.25rem solid var(--primary-200);
    margin-top: 0;
    margin-bottom: 0;
}

.hero-card h3 {
    color: white;
    margin-bottom: 1rem;
    padding: 0 0.5rem;
    border-left: 0.5rem solid var(--primary-200);
}

.hero-card p {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 550;
    padding: 0 1.5rem;
    line-height: 1.5rem;
}

.link-highlight {
    color: var(--primary-color);
    font-weight: bold;
    text-decoration: none;
}

.link-highlight:hover {
    text-decoration: underline;
}

/* ボタン */
.bottom-card {
    text-align: center;
    background: color-mix(in srgb, var(--card-bg), transparent 25%);
    padding: 1rem;
    border-radius: 2dvmax;
    color: whitesmoke;
    box-shadow: 1dvmin 1dvmin 4dvmin 0 color-mix(in srgb, var(--card-bg), transparent 80%);
    backdrop-filter: blur(4px);
    margin-top: 4dvmin;
    margin-bottom: 0;
}

.btn {
    display: flex;
	flex-direction: column;
    padding: 1rem  2dvw;
    max-width: 100dvmin;
    background-color: var(--primary-300);
    color: #333;
    text-decoration: none;
    border-radius: 100dvmax;
    font-weight: bold;
    transition: background-color 0.2s;
    margin: 1rem auto;
    word-break: break-all;
    transition-duration: 0.5s;
}

.btn:hover {
    background-color: var(--primary-200);
}

/* --- 3D背景用のスタイル --- */
.polygon-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: var(--dypad);
}

.scene {
	/* JSから受け取る変数を適用 */
    width: var(--dysize); 
    height: var(--dysize);
    max-width: 80dvmin;
    max-height: 80dvmin;
    /* 奥行きのパース*/
    perspective: 100dvw;
}

.polygon {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    /* 奥行き(tz)をアニメーション内でも維持するように変数を指定 */
    animation: spin-floating 30s infinite linear;
}

@keyframes spin-floating {
    0%   { transform: rotateX(var(--rx)) rotateY(0deg); }
    100% { transform: rotateX(var(--rx)) rotateY(360deg); }
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.8;
}

/* フッター */
footer {
    text-align: center;
    padding: 2dvh;
    font-size: 0.75rem;
    color: #333;
}