/* =========================
 ベースレイアウト　Base / Layout
========================= */
body {
    margin: 0;
    padding: 0;
    background-color: #3399fe;
    font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    color: #555555;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    /* ▼ ここからタイル背景 */
    background-image: url('../img/bg_pattern.png');
    background-repeat: repeat;
    /* タイルで敷き詰める */
    background-size: 100px auto;
    /* タイル1個の見た目サイズ（好みで調整） */
    background-blend-mode: overlay;
}

/* 画面全体レイアウト：左 / 中央カード / 右 */
.layout {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* 左余白 : 中央カード : 右余白 */
    align-items: center;
    /* 縦方向中央揃え */
    min-height: 100vh;
    padding: 40px 0;
    /* 上下40pxの余白 */
    box-sizing: border-box;
    /* padding込みで高さ計算 */
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* スプラッシュ終了後に付けるクラス */
.layout.is-visible {
    opacity: 1;
}


/* 真ん中のカードを中央カラムの中で中央寄せ */
.center {
    display: flex;
    justify-content: center;
}

/* 真ん中のスクロールカード */
.outer-frame {
    background: #ff8baf;
    width: 560px;
    max-width: 90vw;
    margin: 0 auto;
    border-radius: 30px;
    overflow: visible;
    /* 飾りをはみ出させたいので visible */
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 5;
    /* 飾り画像の絶対配置の基準にする */
    background-image: url('../img/bg_patternof.png');
    background-repeat: repeat;
    background-size: 100px auto;
    /* ▼ カード内で色＋柄をブレンド */
    background-blend-mode: overlay;
}

.scroll-box {
    flex: 1;
    max-height: 80vh;
    overflow-y: auto;
    padding: 5px 40px 20px;
    /* 上に少し余白 */
    border-radius: 30px;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

.scroll-box::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.section {
    margin-bottom: 1.5em;
}

/* セクション内の画像共通 */
.section img {
    width: 100%;
    border-radius: 10px;
}

/* =========================
  テキスト　Typography / Text
  ========================= */

/* 見出し */
h1 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 1em;
    font-family: 'Dela Gothic One', 'M PLUS Rounded 1c',
        'Hiragino Kaku Gothic ProN',
        'ヒラギノ角ゴ ProN W3',
        sans-serif;
}

.work-item-title {
    font-family: 'Dela Gothic One',
        'M PLUS Rounded 1c',
        'Hiragino Kaku Gothic ProN',
        'ヒラギノ角ゴ ProN W3',
        sans-serif;
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.scroll-box p {
    text-align: center;
}

/* ABOUT と CONTACT 共通：基本のテキスト */
#about p,
#contact p {
    max-width: 30em;
    /* 行の長さ（お好みで） */
    margin: 0.4em auto;
    /* ふつうの段落の上下余白 */
    text-align: left;
    /* 左揃え */
    line-height: 1.9;
}

/* ここだけ「上をちょっと広く空けたい」段落用クラス */
#about p.p-gap-top,
#contact p.p-gap-top {
    margin-top: 1.6em;
    /* 好きな数字にしてOK（1.4〜2emくらい） */
}

.nowrap {
    white-space: nowrap;
}

/* スマホだけ有効な改行 */
.br-sp {
    display: inline;
}

/* =========================
 共通コンポーネント　Common Components
 ========================= */

/* 左右カラム：それぞれのスペースの中央にコンテンツを置く */
.side {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
    z-index: 5;
}

/* 左エリアの並び */
.side-left-inner {
    display: flex;
    flex-direction: column;
    /* タイトル → 画像 を縦に並べる */
    align-items: center;
    /* 中央揃え */
    gap: 8px;
    /* タイトルと画像のすき間 */
}

/* タイトル画像用 */
.side-title-img {
    display: block;
    max-width: 200px;
    /* タイトル画像の最大幅・お好みで調整 */
    width: 100%;
    margin: 0 auto 0px;
    /* 下の画像とのすき間 */
}

/* 枠ごと画像をまとめる箱（左エリア） */
.side-image-frame {
    position: relative;
    width: 360px;
    max-width: 100%;
    aspect-ratio: 366 / 416;
    /* ★ここだけ修正★ */
    background-image: url('../img/left_area.png');
    /* ここまで */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 中に入るローリング画像（枠よりちょい小さく） */
.side-image {
    max-width: 62%;
    max-height: 62%;
    margin-top: 40px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 12px;
}

/* 左エリアの SNS リンクまとめ */
.side-sns {
    display: flex;
    gap: 16px;
    /* アイコン同士の距離 */
}

/* 枠ナシでアイコンだけ表示 */
.sns-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    border-radius: 0;
}

/* 丸いSNSアイコン画像 */
.sns-icon {
    width: 50px;
    /* 小さければここを 20px とかに */
    height: 50px;
    display: block;
    border-radius: 50%;
    /* 念のため丸くする */
    object-fit: cover;
    /* 画像が少しはみ出してもキレイにトリミング */
}

/* 左エリア：画像とSNSの間に入れる画像 */
.side-middle-img img {
    display: block;
    max-width: 180px;
    /* 好きに調整してOK（200〜280くらい？） */
    width: 100%;
    height: auto;
    margin: -5px auto 5px;
    /* 上下のすき間 */
}

.sp-menu-diary .side-diary-img {
    max-width: 180px;
    margin-top: 40px;
    /* スマホでは少し小さめに */
}

/* フッター　footer */

.footer {
    text-align: center;
    font-size: 0.7rem;
    padding: 20px 10px 5px;
    color: #ffffff;
}

.footer-space {
    height: 30px;
}


/* =========================
 メニュー　Navigation (Menus)
 ========================= */

/* 右のメニュー：青い位置に相当（画像ボタン版） */
.menu-box {
    max-width: 320px;
    width: 100%;
    padding: 16px 10px;
    border-radius: 16px;
    box-sizing: border-box;
    text-align: center;
    margin-top: -70px;
    /* 画像ボタンを縦にセンター配置するため */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* タイトル画像（今の「ABOUT / WORKS …」が入ってるやつ） */
.menu-title {
    margin-bottom: 4px;
}

::details-content .menu-title img {
    display: block;
    width: 100%;
    height: auto;
}

/* メニューのリスト（それぞれ画像ボタン） */
.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
}

.menu-list li {
    margin: 0;
}

/* ここを .menu-btn に統一！ */
.menu-btn {
    display: block;
    width: 100%;
    max-width: 300px;
    /* ここが「画面上の最大幅」 */
    height: auto;
}

/* SPメニュー内で少し大きくしたいとかあれば、こうやって上書きもOK*/
.sp-menu__panel .menu-btn {
    max-width: 260px;
}

/* メニューのリンクの見た目を今まで通りにする */
.menu-list a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
}

/* 右サイドメニュー（ABOUT / WORKS / SNS / CONTACT） */
.menu-list a:hover .menu-btn {
    opacity: 0.88;
    transform: translateY(-3px);
}


/* ▼ モバイル用ハンバーガーメニュー ▼ */
.sp-menu-button {
    position: fixed;
    right: 6px;
    top: 2px;
    width: 56px;
    height: 56px;
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
    z-index: 20;
    display: none;
    /* PCでは非表示 */
}

.sp-menu-button img {
    width: 100%;
    height: 100%;
    display: block;
}

/* メニュー本体（全画面オーバーレイ） */
.sp-menu {
    position: fixed;
    inset: 0;
    /* top / right / bottom / left = 0 */
    display: none;
    z-index: 19;
    /* ★ テーマの body 色（=グリーン）を使う */
    background: var(--theme-body-color, rgba(0, 0, 0, 0.4));
    /* ▼ ここからタイル背景 */
    background-image: url('../img/bg_pattern.png');
    background-repeat: repeat;
    /* タイルで敷き詰める */
    background-size: 100px auto;
    /* タイル1個の見た目サイズ（好みで調整） */
    background-blend-mode: overlay;
}

/* メニューの中身：画面の真ん中に縦並びで配置 */
.sp-menu__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 縦方向中央 */
    align-items: center;
    /* 横方向中央 */
    padding: 24px 20px;
    box-sizing: border-box;
    /* パネル自体の色は透明にして、下の .sp-menu の背景色を見せる */
    background: transparent;
}

.sp-menu__panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sp-menu__panel li {
    margin-bottom: 16px;
    font-size: 0.9rem;
}

/* SPメニュー内のリンク文字も中央寄せにする */
.sp-menu__panel {
    text-align: center;
}

.sp-menu__panel a {
    display: inline-block;
    text-decoration: none;
    /* 下線を消す */
    color: inherit;
    /* 文字色はまわりと同じにする（お好み） */
}

.sp-menu__panel a:hover {
    opacity: 0.8;
    /* ついでにホバー時ちょい薄く（任意） */
}

/* ▼ SPメニューのポチ（・）を消す */
.sp-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sp-menu li {
    list-style: none;
}

/* 開いたときに表示 */
.sp-menu.is-open {
    display: flex;
}

/* SPメニューの中にあるSNSアイコンの調整 */
.sp-menu-sns {
    margin-top: 12px;
    display: flex;
    gap: 16px;
}

/* SPメニュー内のアイコンだけ少し小さめにしたい場合（お好み） */
.sp-menu-sns .sns-icon {
    width: 40px;
    height: 40px;
}



/* =========================
  共通：画像ボタンのホバー
  ========================= */

/* 対象の画像ボタンたちにトランジションを仕込む */
.menu-btn,
.section img.work-btn-img,
.contact-btn-img img {
    /* display は消す（各自のブロックで指定する） */
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* =========================
  #top section
  ========================= */

/* トップのロゴだけカスタム */
.top-logo {
    display: block;
    width: 100%;
    /* セクションの幅いっぱいに広げる */
    max-width: 420px;
    /* PCでの最大サイズ（好みで調整） */
    margin: 180px auto 190px;
    /* 中央寄せ＋上下に余白 */
    border-radius: 0;
    /* 角丸いらなければ */
}

/* ▼ トップの「scroll」インジケーター ▼ */
.scroll-indicator {
    margin-top: 16px;
    margin-bottom: 60px;
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    color: #ffffff;
    opacity: 0.85;
}

.scroll-indicator__text {
    display: block;
    margin-bottom: 4px;
    text-transform: uppercase;
    font-family: 'Dela Gothic One',
        'M PLUS Rounded 1c',
        'Hiragino Kaku Gothic ProN',
        'ヒラギノ角ゴ ProN W3',
        sans-serif;
}

.scroll-indicator__arrow {
    display: inline-block;
    font-size: 1.4rem;
    animation: scroll-bounce 1.2s ease-in-out infinite;
}

/* =========================
 Mini Diary（つぶやき）
 ========================= */
.mini-diary {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    padding: 10px 10px;
    font-size: 0.9rem;
    line-height: 1.7;
    box-sizing: border-box;
    text-align: center;
}

/* ラベル「mini diary」 */
.mini-diary-label {
    margin: 0 0 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #ffffff;
}

/* 本文 */
.mini-diary-text {
    margin: 0;
}

/* 左カラムにいるときのサイズ感 */
.side-left-inner .mini-diary {
    margin-top: 60px;
    max-width: 300px;
}

/* タイトル下にいるときのサイズ感 */
#miniDiaryPlaceholder .mini-diary {
    margin: 40px auto 100px;
    max-width: 100%;
}

/* =========================
  #about section
  ========================= */

/* テキストは Typography ブロックにあるので、
  ここには「about専用のなにか」が出てきたら書く */

/* =========================
  #works section
  ========================= */

/* 一覧全体のレイアウト */
.works-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* 各 work-item の間隔 */
    margin: 30px 0;
}

/* 1つの作品ブロック */
.work-item {
    text-align: center;
}

/* メイン画像（1枚目だけどーん） */
.work-item>img {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 auto 8px;
    border-radius: 10px;
}

/* サムネ2列エリア */
.work-thumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    /* 画像どうしのすき間 */
    margin-top: 8px;
}

.work-thumbs img {
    width: 48%;
    /* だいたい2列になるように */
    max-width: 200px;
    /* 大きすぎ防止 */
    height: auto;
    border-radius: 8px;
}

/* 説明文の行間を少し詰める */
.work-item p {
    margin: 0.25em 0;
    line-height: 1.4;
}

/* タイトル直下のリード文だけ余白を多めに */
#works .work-item .work-lead {
    margin-top: 0.8em;
    margin-bottom: 1.6em;
}

/* GIF 一覧 */
.gif-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    /* GIF同士のすき間 */
    margin-top: 20px;
    /* 説明文との間 */
}

.work-gif {
    max-width: 100px;
    /* 大きすぎたらここで調整 */
    width: 100%;
    height: auto;
    display: block;
}

/* BOOTH / GIPHY / Adobe Portfolio ボタン周り */
.work-item p.work-btn {
    margin-top: 40px;
    /* 説明文とのすき間 */
    margin-bottom: 30px;
}

/* ボタン画像のサイズ（.section img { width:100% } を打ち消す） */
.section img.work-btn-img {
    display: inline-block;
    width: auto;
    /* 100% を解除 */
    max-width: 240px;
    /* ボタンの最大幅 */
    height: auto;
    border-radius: 0;
}

/* ボタン画像ホバーの動き */
.work-item p.work-btn a:hover .work-btn-img {
    opacity: 0.88;
    transform: translateY(-3px);
}

/* =========================
  #contact section
  ========================= */

/* CONTACTセクションの画像ボタン */
.contact-btn-img {
    display: block;
    text-align: center;
    margin-top: 40px;
}

.contact-btn-img img {
    display: inline-block;
    max-width: 240px;
    /* ボタンの最大幅。大きさは好みで調整してOK */
    width: 100%;
    height: auto;
}

/* CONTACT のボタン画像 ホバー */
.contact-btn-img:hover img {
    opacity: 0.88;
    transform: translateY(-3px);
}


/* =========================
 デコ　動き　Decorative / Effects
 ========================= */

/* ページ下のループテキストもデラゴシックにする */
.page-loop,
.page-loop__inner span {
    font-family: 'Dela Gothic One',
        'M PLUS Rounded 1c',
        'Hiragino Kaku Gothic ProN',
        'ヒラギノ角ゴ ProN W3',
        sans-serif;
}

/* 流れるテキストは必ず白にする */
.page-loop,
.page-loop span,
.page-loop__inner span {
    color: #ffffff;
}

/* 1枚目の飾り：カード上にかぶせる */
.card-deco {
    position: absolute;
    top: -35px;
    left: -60px;
    transform: none;
    width: 150px;
    max-width: none;
    pointer-events: none;
    z-index: 2;
    animation: float-deco-1 8s ease-in-out infinite;
}

/* 2枚目の飾り：カードの右側中央を起点に配置 */
.card-deco-second {
    position: absolute;
    top: 53%;
    right: -80px;
    transform: translateY(-50%);
    width: 130px;
    max-width: none;
    pointer-events: none;
    z-index: 2;
    animation: float-deco-2 10s ease-in-out infinite;
}

/* 3枚目用：カードの下ライン基準で左下にくっつく飾り */
.card-deco-bottom {
    position: absolute;
    bottom: -35px;
    left: -80px;
    width: 160px;
    max-width: none;
    pointer-events: none;
    z-index: 2;
    animation: float-deco-3 9s ease-in-out infinite;
}

/* ▼ ページ全体の上下に流れるテキスト帯 */
.page-loop-wrap {
    position: fixed;
    left: 0;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 2px 0;
    background: rgba(255, 255, 255, 0.1);
    /* うっすら白い帯 */
    z-index: 10;
    opacity: 1;
}

.page-loop-wrap--top {
    top: 0;
}

.page-loop-wrap--bottom {
    bottom: 0;
}

/* 上下テキスト帯の中身（ループ本体） */
.page-loop {
    display: flex;
    /* 中に同じブロックを2個並べる */
    width: max-content;
    /* 中身の幅にフィットさせる */
    font-size: 1.1rem;
    letter-spacing: 0.18em;
    animation: page-loop-x 170s linear infinite;
    /* デフォは左へ流れる */
}

/* 1セット分のテキスト（これを2個並べて無限ループにする） */
.page-loop__inner {
    display: inline-block;
    white-space: nowrap;
}

.page-loop__inner span {
    padding-right: 0rem;
    /* 文章同士の間隔 */
}

/* 下帯だけ、逆方向（左→右）に動かす */
.page-loop-wrap--bottom .page-loop {
    animation-name: page-loop-x-reverse;
}

/* ▼ コンテンツ内の「画像の流れる帯」（画像そのものを流す版） ▼ */
/* カードの横幅いっぱいに広げるラッパー */
.band-wrap {
    position: relative;
    left: -40px;
    /* scroll-box の左右 padding(40px)ぶん左にズラす */
    width: calc(100% + 80px);
    /* 本来の幅 + 左右40pxずつ広げる＝カードいっぱい */
    margin: 120px 0;
    /* 帯の上下の余白 */
    overflow: hidden;
    /* はみ出した部分は隠す */
    height: 30px;
    /* 帯の太さ（ここを 50px とかに変えれば高さ調整できる） */
}

/* 中で横に並んで流れていくトラック部分 */
.band-track {
    display: flex;
    width: max-content;
    /* 中身の幅ぶんだけ横に長くなる */
    animation: band-scroll 25s linear infinite;
    /* ↑ ここがスピード
    - 数字が大きいほど「ゆっくり」
    - 速すぎたら 60s / 80s
    - 遅すぎたら 25s とかにしてOK */
}

/* ベルト画像そのもの（2枚並べて無限ループっぽく見せる） */
.band-img {
    display: block;
    height: 30px;
    /* .band-wrap の height とそろえる */
    width: auto;
    flex-shrink: 0;
    /* つぶれないように固定 */
}

/* 画像が .section img { width:100% } の影響を受けないように上書き */
.section .band-img {
    width: auto;
}

/* ▼ 上から降ってくる画像用 ▼ */
.falling-item {
    position: fixed;
    top: -100px;
    width: 80px;
    pointer-events: none;
    z-index: 0;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    /* animation-name は JS から付けるのでここでは指定しない */
}

/* 右回転で落ちる子 */
.fall-right {
    animation-name: fall-down-right;
}

/* 左回転で落ちる子 */
.fall-left {
    animation-name: fall-down-left;
}

/* ===== 読み込み時のふわっとロゴ（上に浮き上がって消える版） ===== */
.splash {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    z-index: 9999;
    opacity: 0;
    transform: translateY(0);
    /* 追加：最初の位置 */
    transition: opacity 0.8s ease, transform 0.8s ease;
    /* 追加：transformも一緒にアニメ */
}

/* ふわっと現れるとき */
.splash.is-visible {
    opacity: 1;
    transform: translateY(0);
    /* ここで一応0を指定しておく */
}

/* 上にフワッと抜けながら消えるとき */
.splash.is-hide {
    opacity: 0;
    transform: translateY(-50px);
    /* 好きなだけマイナスにすると、もっと上に飛ぶ */
}

.splash img {
    max-width: 200px;
    width: 70%;
}

/* 右カラムの中身を縦横とも中央にそろえる（PC用） */
.side.right {
    justify-content: center;
    align-items: center;
    align-items: center;
}

/* タイトル＋カードまとめている箱 */
.side-main-block {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* タイトル画像：手前に出す */
.side-title-img {
    position: absolute;
    top: -30px;
    /* かぶせ具合はお好みで */
    left: 50%;
    transform: translateX(-50%);
    width: 56%;
    max-width: none;
    pointer-events: none;
    z-index: 2;
    /* ★これで一番手前に */
}

/* カード側は一歩下げておく */
.side-main-block .side-image-frame {
    margin-top: 40px;
    position: relative;
    z-index: 1;
    /* タイトルより後ろに */
}

/* ▼ スクロールでふわっと出す用 ▼ */
.fade-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 一度表示されたらこのクラスが付く */
.fade-section.is-show {
    opacity: 1;
    transform: translateY(0);
}

/* ▼ カラーチェンジボタン ▼ */
.color-change-btn {
    position: fixed;
    right: 16px;
    bottom: 44px;
    z-index: 40;
    width: 80px;
    height: 80px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

/* 文字が載ってる円（SVG） */
.color-change-btn__circle {
    width: 100%;
    height: 100%;
    display: block;
    transform-origin: 50% 50%;
    animation: color-badge-spin 10s linear infinite;
}

/* 円周の文字スタイル */
.color-change-btn__text {
    font-size: 12px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    fill: #ffffff;
    /* 文字色（白） */
}

/* 中央のアイコン画像 */
.color-change-btn__icon {
    position: absolute;
    width: 36px;
    height: 36px;
    object-fit: contain;
    /* ここで真ん中に固定する */
    top: 50%;
    left: 50%;
    transform-origin: 50% 50%;
    animation: color-badge-spin-reverse 10s linear infinite;
    pointer-events: none;
}

/* =========================
  キーフレーム　keyframes / Animations
  ========================= */

/* 上帯：左→右? 右→左?（今まで通り左に流れる） */
@keyframes page-loop-x {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* コンテンツ2個分のうち「1個分」だけ左にずらす */
    }
}

/* 下帯用：右向きに流すアニメーション */
@keyframes page-loop-x-reverse {
    0% {
        transform: translateX(-50%);
        /* 2個分のうち後ろ側からスタート */
    }

    100% {
        transform: translateX(0);
        /* だんだん右に戻ってくるイメージ */
    }
}

/* 横にスーッと流すアニメーション */
@keyframes band-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* 右回転で落ちる */
@keyframes fall-down-right {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        /* ← フェードさせないなら、常に1でOK */
    }

    100% {
        transform: translateY(110vh) rotate(360deg);
        opacity: 1;
        /* ← ここを 0 にしてたら 1 に直す */
    }
}

/* 左回転で落ちる */
@keyframes fall-down-left {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(110vh) rotate(-360deg);
        opacity: 1;
    }
}

/* ▼ カードの飾りをゆっくり左右にゆらす ▼ */
/* 左上の飾り */
@keyframes float-deco-1 {

    0%,
    100% {
        transform: none;
        /* 元の位置 */
    }

    50% {
        transform: translateX(20px);
        /* 右へちょっと */
    }
}

/* 右側中央あたりの飾り */
@keyframes float-deco-2 {

    0%,
    100% {
        transform: translateY(-50%) translateX(0);
        /* 今の位置キープ */
    }

    50% {
        transform: translateY(-50%) translateX(-20px);
        /* 左へちょっと */
    }
}

/* 左下の飾り */
@keyframes float-deco-3 {

    0%,
    100% {
        transform: none;
    }

    50% {
        transform: translateX(15px);
        /* ちょい右へ、少しだけ弱め */
    }
}

/* 上下にふわっと動く矢印 */
@keyframes scroll-bounce {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }

    50% {
        transform: translateY(6px);
        opacity: 1;
    }
}

/* くるくるアニメーション */
@keyframes color-badge-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes color-badge-spin-reverse {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

/* =========================
 メディアクエリ　Media Queries
 ========================= */

/* 〜1000px：ノートPC・タブレットくらい（左右を消してカード中央 / SPメニュー表示 / カラーチェンジ非表示） */
@media (max-width: 1000px) {

    /* 左右サイドを消す＋カードを中央に */
    .side {
        display: none;
    }

    .layout {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        padding: 16px 0;
        box-sizing: border-box;
    }

    .center {
        display: flex;
        justify-content: center;
    }

    .outer-frame {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }

    /* SPハンバーガーボタンまわり */
    .sp-menu-button {
        display: block;
    }

    .sp-menu__panel .menu-btn {
        max-width: 220px;
    }

    /* 1000px以下では右下のカラーチェンジボタンはデフォルト非表示
    （SPメニュー表示時は JS で display を上書き） */
    .color-change-btn {
        display: none;
    }
}

/* 〜560px：スマホレイアウト（フルスクリーンカード＋装飾非表示＋ボタンちょい小さく） */
@media (max-width: 560px) {
    .layout {
        display: block;
        min-height: 100vh;
        padding: 0;
        /* 上下の余白をリセット */
    }

    .center {
        display: block;
    }

    .outer-frame {
        width: 100vw;
        max-width: none;
        min-height: 100vh;
        border-radius: 0;
        margin: 0;
        /* タイル背景をカード側に移す */
        background-image: url('../img/bg_pattern.png');
        background-repeat: repeat;
        background-size: 100px auto;
        background-blend-mode: overlay;
    }

    .scroll-box {
        max-height: 100vh;
    }

    /* スマホでは飾り画像を非表示にする */
    .card-deco,
    .card-deco-second,
    .card-deco-bottom {
        display: none;
    }

    /* スマホでは上下の流れるテキストも非表示にする */
    .page-loop-wrap {
        display: none;
    }

    /* スマホでは落ちてくるやつも非表示にする */
    .falling-item {
        display: none !important;
    }

    /* 右下カラーチェンジボタンを少し小さく＆位置調整 */
    .color-change-btn {
        right: 10px;
        bottom: 10px;
        width: 70px;
        height: 70px;
    }

    .color-change-btn__text {
        font-size: 12px;
    }

    .color-change-btn__icon {
        width: 30px;
        height: 30px;
    }
}

/* 561px〜：PC用の微調整（トップ位置＆スマホ専用改行を消す） */
@media (min-width: 561px) {

    /* カードの中身ぜんぶを少し下に下げる（タイトル＋SCROLLごと） */
    .scroll-box {
        padding-top: 80px;
        /* 好きに調整：60〜100pxくらいでお好み */
    }

    /* ABOUT がすぐ出てこないように、トップの下に少し多めの余白 */
    #top {
        margin-bottom: 80px;
        /* 大きすぎたら 60px とかに */
    }

    /* スマホだけ有効な改行は PC では消す */
    .br-sp {
        display: none;
    }
}

/* 1001〜1400px：ノートPC幅のときだけ、左右をちょっと小さくしてバランス調整 */
@media (min-width: 1001px) and (max-width: 1400px) {

    /* 左の青いカード（枠）の物理サイズだけ少し小さくする */
    .side-image-frame {
        width: 220px;
        /* 元 360px → 220px（お好みで調整OK） */
    }

    /* 右メニューのボタン画像も少し小さく */
    .side.right .menu-btn {
        max-width: 200px;
        /* 元 280px → 220〜240px あたりが無難 */
    }
}