html, body{
    margin: 0; /* 画面の枠が消える */
    padding: 0;
}
body{
    overflow-x: hidden;
}
img{
    /* メニュー実装時ドラック不可の原因はココかも！ */
user-drag: none; /* ドラッグ禁止（Safari） */
-webkit-user-drag: none; /* 画像ドラッグ禁止（Chrome） */
pointer-events: none; /* マウス操作を無効化 */
}
a img {
    display: block;
}
a {
    display: inline-block;
}
/* ↓ 画面いっぱいに表示させたいときにこのクラスをつける。（Safariにも対応！）【このクラスをつけた子要素の指定は、100%を使うと省略可】*/
.fullScreen{
    height: calc(var(--vh, 1vh) * 100); /* アドレスバーを除いた実寸の高さ */
}
nav{
    user-select: none; /* テキストの選択禁止 */
}
/*背景のグラデーション*/
/* ===== Smartphone only =====
    幅ベース or タッチ端末(スマホ想定)のどちらかにマッチしたら適用
    片方だけにしたい場合は、不要な条件を削ってOK
*/
@media screen and (max-width: 767px), (hover: none) and (pointer: coarse) {
  /* 背景のグラデーション（記事全体の高さに比例） */
article{
    margin: 0;
    padding: 0;
    /* 横スクロール抑止（clip対応外は下の@supportsでhiddenへ） */
    overflow-x: clip;
    background: linear-gradient(
        to bottom,
      /* 深い紺 → 濃い青 → 朝の空色 */
        #050937 0%,
        #050937 10%,
        #141BB2 30%,
        #141BB2 50%,
        #B5DBEF 80%
    );
}
  /* overflow-x: clip 非対応ブラウザ向けフォールバック */
@supports not (overflow-x: clip){
    article{ overflow-x: hidden; }
}
  /* 念のため：要素がページ全体を抱えられるように */
html, body, article { min-height: 100%; }
}
#rocket{
    opacity: 0;
    position: absolute;
    max-width: 25%;
    max-height: 25%;
    top: 30%;
    left: 85%;
    transform: rotate(-110deg) scale(0.001);
    transition: 0.7s ease-out;
    z-index: 1;
    pointer-events: auto;
    cursor: pointer;
}
#earth{
    opacity: 0;
    position: fixed;
    max-width: 25%;
    max-height: 25%;
    top: 60%;
    left: 60%;
    transform: scale(0.001);
    transition: 0.3s linear;
}
#parachute{
    opacity: 0;
    display: none;
    position: fixed;
    max-width: 45%;
    max-height: 45%;
    top: 20%;
    left: 60%;
    transition: 0.7s ease-out;
    z-index: 1;
    pointer-events: auto;
    cursor: pointer;
}
#parachute.appearance{
    display: grid;
    transform: translate(0vw, 20vh) rotate(15deg);
    position: fixed;
}
#space {
position: relative;
width: 100%;/* 全画面の宇宙 */
overflow: hidden;
}
/* ↓ fullscreen設定アリ */
#mainVisual{
    margin: 0;
    width: 100vw;
    height: 100vh;
    display: grid;
    position: relative;
    color: rgb(204, 202, 75);
    z-index: 0;
}
#title{
    position: relative;
    margin: 0;
    padding: 0;
}
#titleRogo{
    position: absolute;
    margin: 0;
    top: 20%;
    left: 0%;
    max-width: 105%;
    max-height: auto;
    z-index: -1;
}
#schedule{
    position: relative;
    margin: 0;
    top: 55%;
    left: 13%;
    max-width: 70%;
    max-height: auto;
    z-index: -1;
}
#subTitle{
    position: absolute;
    margin: 0;
    top: 35%;
    left: 10%;
    max-width: 80%;
    max-height: auto;
    z-index: -1;
}
/* ↑ ～～～～～～～～～ */
#utiiConstellation{
    display: grid;
    position: absolute;
    top: 60%;
    right: 5%;
    max-width: 45%;
    max-height: 45%;
    transform: rotate(25deg);
}
#galaxy{
position: absolute;
top: 5%;
left: 7%;
max-width: 35%;
}
#mainVisual p{
    position:relative;
    margin: 0;
    color: rgb(253, 140, 140);
    font-size: 2rem;
    width: 90%;
    height: auto;
    top: 70%;
    left: 5%;
}
#galaxy-lightChange-listener{
    position: absolute;
    top: 150vh;
}
#galaxy-lightChange{
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255);
    pointer-events: none;
    opacity: 0;
    z-index: 400;
}
/* #galaxy-lightChange.moving{
    animation: flash 0.5s ease-out;
}
@keyframes flash {
    0% {opacity: 0;}
    20% {opacity: 1;}
    100% {opacity: 0;}
} */
#linkButton{
    width: 95%;
    display: grid;
    position: relative;
    text-align: center;
    margin: 0 auto;
}
#linkButton h1{
    position: relative;
    margin: 0 auto;
    color: white;
    white-space: nowrap;
    font-size: 2rem;
    height: 5%;
}
#linkButton h2{
    position: relative;
    margin: 0 auto;
    color: white;
    white-space: nowrap;
    font-size: 1.25rem;
    height: 0%;
}
#link-list {
    position: relative;
    padding: 5%;
    display: flex;
    flex-wrap: wrap;
}
.btn{
    display: flex;
    margin: auto;
    flex: 0 0 calc(50% - 5%);
    box-sizing: border-box;
}

.btn a{
    display: inline-block;
}

.btnIcon{
    width: 80%;
    max-width: 200px;
    height: auto;
    border-radius: 10px;
    margin: 0 auto;
}

.btn:hover {
    transform: scale(1.1, 1.1);
}

#information{
    margin: 0;
    width: 100vw;
    height: 100vh;
    display: grid;
    position: relative;
    text-align: center;
    contain: content;
}
#information h1{
    position: relative; /* 相対指定 */
    margin: 0 auto;
    color: white;
    font-size: 2rem;
    height: 0%;
}
#information h2{
    position: relative;
    margin: 0 auto;
    color: white;
    font-size: 2rem;
    height: 0;
}
#space-lightChange-listener{
    position: relative;
}
#space-lightChange{
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255);
    pointer-events: none;
    opacity: 0;
    z-index: 400;
}
/* #space-lightChange.moving{
    animation: flash 1s ease-out;
}
@keyframes flash {
    0% {opacity: 0;}
    20% {opacity: 1;}
    100% {opacity: 0;}
} */
/* ↓ fullscreen設定アリ */
#cloudArea{
    display: none;
    position: fixed; /* 画面固定 */
    margin: 0;
    top: 0%; /* jsでtop450vhから出現 */
    width: 100vw;
    height: 100vh;
    text-align: center;
    z-index: 10;
    pointer-events: none;
}
#cloud_wrapper{
    display: none;
    position: relative;
    margin: 0;
    top: 0%;
    width: 100vw;
    height: 100%;
    text-align: center;
    z-index: 10;
    pointer-events: none;
}
.cloud{
    position: absolute;
    max-width: 45%;
    max-height: 30%;
    top: 0%;
    left: 0%;
    z-index: 10;
    transition: all 0.5s ease-in;
}
#project {
    width: 100%;
    height: 100vh;             /* 画面いっぱい */
    display: flex;
    flex-direction: column;    /* h1 と rec-scene を縦並び */
    align-items: center;       /* 左右中央 */
    justify-content: center;   /* 上下中央 */
    text-align: center;        /* ← 上に少し余白（調整用） */
    box-sizing: border-box;    /* padding 込みで高さを扱う */
}
#project h1 {
    margin: 0 auto;   /* rec-scene との間に余白 */
    color: black;
    font-size: 2rem;
    height: 0;
}
#project h2{
    margin: 0 auto;
    color: black;
    font-size: 1.25rem;
    margin-top: 1rem;
    height: 0;
}
/*協賛企業の装飾は別ファイル*/
#sponsor{
    margin: 0;
    width: 100vw;
    height: 100vh;
    display: grid;
    position: relative;
    text-align: center;
}
#sponsor p{
    font-size: 1.3em;
}
#countDown{
    margin: 0 auto;
    max-width: 90%;
    display: grid;
    position: relative;
    text-align: center;
}
#backPlate{
    position: relative;
    margin: 0 auto;
    padding: 10%;
    width: 100%;
    font-size: clamp(1rem, 2vw, 2em);
    background-color: #77aaca;
    border-radius: 20px;
}
#message{
    position: relative;
    margin: 0;
    top: 0;
    left: 0;
    color: white;
    font-size: clamp(1rem, 4vw, 1.8rem);
}
#countDown .timer{
    position: relative;
    color: white;
    max-width: 60ch;
    font-size: clamp(1.4rem, 6vw, 3rem);
    line-height: 1.4;
    margin: 0 auto;
    word-break: keep-all;/* 改行予防 */
}
#countDown h2{
    position: relative;
    max-width: 60ch;
    font-size: clamp(1.2rem, 5vw, 2.5rem);
    line-height: 1.6;
    margin: 0 auto;
}
footer {
    margin-top: 20vh;
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #cfeaff;
    font-family: sans-serif;
    padding-top: 1px;
    width: 100%;
    z-index: 0;
}
#inquiry_sns{
    display: grid;
    position: absolute;
    margin: 0;
}