@charset "UTF-8";

/* .zen-kurenaido-regular {
  font-family: "Zen Kurenaido", sans-serif;
  font-weight: 400;
  font-style: normal;
}
  .kosugi-maru-regular {
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 400;
  font-style: normal;
}

 */
/* リセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- 画像のリセット --- */
/* img { 
    /* 画像が親要素の幅を超えないようにする（レスポンシブ対応） 
    max-width: 100%;
    /* 縦横比を維持する 
    height: auto;
    /* インライン要素が持つ余計な下部のスペース（ベースライン）を削除し、レイアウトを安定させる 
    display: block;
}*/

body {
    /* 日本語の標準フォントとしてNoto Sans JPを指定 */
    font-family: "Noto Sans JP", sans-serif;
    /* 標準の文字色（濃い茶色/濃い灰色） */
    color: #332714;
    background: #e9f3ef;

}

/* HERO */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #fff;
}

/* ========================
  四辺の背景
======================== */
.hero-bg {
    position: absolute;

    background-repeat: no-repeat;
    background-size: contain;
    /* ← coverをやめて切れないように */
    pointer-events: none;
    transform: scale(0.9);
    /* ← 植物を少し小さくする */
}

.hero-bg.top {
    /* top: -30px; */
    left: 0;
    width: 100%;
    height: 30%;
    background-image: url("../img/hero_bg_top.png");
    background-position: center top;

}

.hero-bg.bottom {
    bottom: -2%;
    left: 0;
    width: 100%;
    height: 30%;
    background-image: url("../img/hero_bg_bottom.png");
    background-position: center bottom;

}

.hero-bg.left {

    bottom: 0;
    /* ← 常に下へ */
    left: -28px;
    width: 30%;
    height: 100%;
    background-image: url("../img/hero_bg_left.png");
    background-position: left bottom;
    transform: none;
    /* 位置を素直に */
}

.hero-bg.right {

    bottom: 0;
    /* ← 常に下へ */
    right: -28px;
    width: 30%;
    height: 100%;
    background-image: url("../img/hero_bg_right.png");
    background-position: right bottom;
    transform: none;
    /* 位置を素直に */
}

.hero-bg.top {
    z-index: 6;
}

.hero-bg.left {
    z-index: 50;
}

.hero-bg.right {
    z-index: 50;
}

.hero-bg.bottom {
    z-index: 40;
}

/* ========================
  レスポンシブ設定
======================== */
@media (max-width: 768px) {

    .hero-bg.left,
    .hero-bg.right {
        width: 35%;
        /* 基本サイズ */
        min-width: 250px;
        /* ← これが最小サイズ */
        height: 80%;
    }

}

/* ========================
  恐竜レイヤー
======================== */
.dinos {
    position: absolute;
    inset: 0;

    /* 背景より後ろ */
    pointer-events: none;
}

.dino {
    position: absolute;
    will-change: transform;
}

/* サイズ感（添付イメージ基準で大きめ） */
/* ========================
  アーケオ用ジャンプ
======================== */
.archeo-wrap {
    position: absolute;
    bottom: 170px;
    /* 地面の高さ */
    left: 0;
    z-index: 40;
    pointer-events: none;
}

.archeo {
    width: 250px;
    animation: hopArcheo 0.8s ease-in-out infinite;
    transform-origin: bottom center;
}

/* ジャンプの動き */
@keyframes hopArcheo {
    0% {
        transform: translateY(0) scaleY(1);
    }

    30% {
        transform: translateY(-25px) scaleY(1.05);
    }

    50% {
        transform: translateY(-40px) scaleY(0.95);
    }

    70% {
        transform: translateY(-25px) scaleY(1.05);
    }

    100% {
        transform: translateY(0) scaleY(1);
    }
}


.brachio {
    width: 680px;
    bottom: 0px;
    z-index: 20;
}

.sutego {
    width: 500px;
    bottom: 300px;
    z-index: 10;
    position: absolute;
}

.para {
    width: 400px;
    bottom: 80px;
    z-index: 30;
}

.ptera {
    width: 400px;
    /* 子要素に上下アニメを移す */
    animation: floatPtera 4s ease-in-out infinite;
    display: block;
    position: relative;
    /* 親の absolute に対して相対的表示（任意） */
    transform-origin: center center;
    pointer-events: none;
    z-index: 20;
}

@keyframes floatPtera {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-30px);
    }

    100% {
        transform: translateY(0);
    }
}

.ptera-wrap {
    position: absolute;
    top: 60px;
    /* 必要に応じて調整 */
    left: 0;
    /* 初期の横位置は JS が上書きします */
    pointer-events: none;
    z-index: 20;
}



/* ========================
  中央コンテンツ
======================== */
.hero-content {
    position: relative;
    z-index: 10;
    height: 100%;
    display: grid;
    place-content: center;
    text-align: center;
}

.hero-content h1 {
    font-family: "Kosugi Maru", sans-serif;
    font-weight: 400;
    font-size: 3.5rem;
    letter-spacing: .05em;
    color: rgb(64, 79, 38);
}

.hero-content p {
    margin-top: 10px;
    font-family: "Kosugi Maru", sans-serif;
    font-weight: 400;
    font-size: 2rem;
    color: indianred;
}

/* ========================
   HERO → TOP 切替用
======================== */

/* 恐竜だけ消す */
.dinos.is-hide {
    opacity: 0;
    transition: opacity 2s;
}

/* 背景だけ薄くする（暗くしない） */
.hero.is-top .hero-bg {
    opacity: 0.4;
    transition: opacity 2s;
}

/* タイトルは薄くしない */
.hero.is-top .hero-content {
    opacity: 1;
}

.top-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2s;
}

.top-screen.is-show {
    opacity: 1;
    pointer-events: auto;
}

.nav {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    place-items: center;
}

/* 丸本体 */
.fluid {
    width: 180px;
    height: 180px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: bold;
    font-size: 1.2rem;
    animation: fluidrotate 30s ease infinite,
        float 4s ease-in-out infinite;
    text-decoration: none;
}



/* 形アニメ */
@keyframes fluidrotate {

    0%,
    100% {
        border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
    }

    25% {
        border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
    }

    50% {
        border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
    }

    75% {
        border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
    }
}

/* ふわふわ */
@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0);
    }
}

.nav {
    position: absolute;
    inset: 0;
    z-index: 100;
}

.fluid {
    position: absolute;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    color: #fff;
    font-weight: bold;
    text-decoration: none;
    font-size: 1.2rem;
    text-align: center;
}

.math {
    top: 20%;
    left: 15%;
}

.japanese {
    top: 11%;
    right: 45%;
}

.science {
    top: 15%;
    right: 20%;
}

.social {
    bottom: 21%;
    left: 15%;
}



.english {
    bottom: 10%;
    left: 38%;
}

.art {
    bottom: 15%;
    right: 20%;
}

.math {
    background: #06B6D4;
    width: 180px;
    height: 190px;
    opacity: 0.7;
}

.science {
    background: #10B981;
    width: 200px;
    height: 180px;
    opacity: 0.7;
}

.social {
    background: #FBBF24;
    width: 170px;
    height: 170px;
    opacity: 0.7;
}

.japanese {
    background: #EC4899;
    width: 160px;
    height: 185px;
    opacity: 0.7;
}

.english {
    background: #EF2805;
    width: 200px;
    height: 150px;
    opacity: 0.7;
}

.art {
    background: #9370db;
    width: 190px;
    height: 190px;
    opacity: 0.7;
}


.math {
    animation: float1 10s ease-in-out infinite, fluidrotate 18s linear infinite;
}

.japanese {
    animation: float2 8s ease-in-out infinite, fluidrotate 25s linear infinite;
}

.science {
    animation: float3 7s ease-in-out infinite, fluidrotate 20s linear infinite;
}

.social {
    animation: float4 9s ease-in-out infinite, fluidrotate 30s linear infinite;
}

.english {
    animation: float5 11s ease-in-out infinite, fluidrotate 22s linear infinite;
}

.art {
    animation: float6 10s ease-in-out infinite, fluidrotate 27s linear infinite;
}

@keyframes float1 {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(10px, -20px);
    }
}

@keyframes float2 {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-15px, -25px);
    }
}

@keyframes float3 {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(20px, -10px);
    }
}

@keyframes float4 {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-10px, -15px);
    }
}

@keyframes float5 {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(8px, -18px);
    }
}

@keyframes float6 {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-18px, -12px);
    }
}

/* ========================
 * SKIPボタンとタイマーメッセージ
 * ======================== */

/* 1. コンテナを画面右下に固定配置 */
.skip-timer-area {
    position: absolute;
    /* HEROセクションの右下に配置 */
    right: 30px;
    bottom: 30px;
    z-index: 100;

    /* Flexboxでメッセージとボタンを横に並べる */
    display: flex;
    align-items: center;
    /* 垂直中央揃え */
    gap: 15px;
    /* 要素間の隙間 */
}

/* 2. タイマーメッセージボックス */
.timer-message {
    background-color: rgba(255, 255, 255, 0.9);
    /* 白背景、少し透過 */
    border: 2px solid #332714;
    /* 濃い茶色の枠線 */
    padding: 8px 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* フォントを小さく */
    font-size: 0.9rem;
    white-space: nowrap;
    /* テキストが折り返さないように */
}

.timer-message p {
    margin: 0;
    color: #332714;
}

/* 3. スキップボタンのデザイン */
.skip-button {
    /* HTMLでIDが指定されている場合は #skip-button でもOK */
    background-color: #e20a76;
    /* 目立つ色（ピンクなど） */
    color: #fff;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 4px 0 #b3005b;
    /* 立体的な影 */
    line-height: 1;
    /* ボタン内のテキストの高さを調整 */
}

.skip-button:hover {
    background-color: #b3005b;
}

.skip-button:active {
    /* クリック時に沈むアニメーション */
    transform: translateY(4px);
    box-shadow: 0 0px 0 #b3005b;
}

/* ========================
 * スマホ用レイアウト調整 (SKIPボタン)
 * ======================== */
@media (max-width: 768px) {
    .skip-timer-area {
        right: 15px;
        bottom: 15px;
        gap: 10px;
        /* メッセージが長すぎる場合は縦並びも検討 */
        /* flex-direction: column; */
    }

    .timer-message {
        font-size: 0.8rem;
        padding: 6px 10px;
    }

    .skip-button {
        font-size: 1rem;
        padding: 8px 15px;
    }
}

/* ========================
  スマホ用レイアウト調整（PCはノータッチ）
======================== */
@media (max-width: 768px) {

    /* スマホだけ nav を中央の枠に入れる */
    .nav {
        position: absolute !important;
        top: 55% !important;
        /* タイトルとの距離調整 */
        left: 50% !important;
        width: 90%;
        max-width: 360px;
        transform: translate(-50%, -50%);

        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, auto);
        place-items: center;
        row-gap: 25px;
    }

    /* 丸の absolute 強制解除（ここが最重要） */
    .fluid {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform-origin: center;
    }

    /* 下段だけ上に詰める */
    .social,
    .english,
    .art {
        margin-bottom: 50px;
    }

    /* サイズも一回り小さく */
    .fluid {
        width: 120px !important;
        height: 120px !important;
        font-size: 0.95rem;
    }

}