@charset "utf-8";
/* アンパンマンのふわふわねつききゅう */

/*
  寸法はデザインカンプ（desktop.svg: 1366px / mobile.svg: 430px）の px 値を --u 倍して指定する。
  --u は PC では最大 1px（1366px 以上は等倍・中央寄せ）、それ未満はカンプ比率を保って縮小する。
  cqw はスクロールバーを除いた #fuwafuwa の幅を基準にするため、横スクロールが出ない。
  背景（空・虹・緑・コピー帯）は幅100%で敷く。
*/
#fuwafuwa {
    container-type: inline-size;
    background-color: #7ed34f;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    overflow: hidden;
}
#fuwafuwa > * { --u: min(1px, 100cqw / 1366); }

/* KV（空） */
.kv {
    position: relative;
    z-index: 1;
    background: linear-gradient(#51b8ea, #c6e5f7);
}
.kv__inner {
    position: relative;
    width: calc(1366 * var(--u));
    height: calc(556 * var(--u));
    margin: 0 auto;
}
.kv__inner > * { position: absolute; margin: 0; }
.kv__inner img { display: block; width: 100%; height: auto; }
.kv__logo    { left: calc(84 * var(--u));     top: calc(25 * var(--u));   width: calc(628 * var(--u)); }
.kv__catch   { left: calc(84 * var(--u));     top: calc(308 * var(--u));  width: calc(740 * var(--u)); }
/* 筐体は虹・緑エリアに重ねてはみ出させる */
.kv__machine { left: calc(733.87 * var(--u)); top: calc(59.9 * var(--u)); width: calc(511.5 * var(--u)); }

/* 虹の3本線 */
.rainbow {
    height: calc(30 * var(--u));
    background: linear-gradient(#e94e63 0 33.333%, #f39945 33.333% 66.666%, #fff338 66.666%);
}

/* ボタン・公開予定 */
.info {
    height: calc(260 * var(--u));
    padding-top: calc(70 * var(--u));
    box-sizing: border-box;
    text-align: center;
}

.btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(434 * var(--u));
    height: calc(68 * var(--u));
    margin: 0 auto;
    box-sizing: border-box;
    border: calc(4 * var(--u)) solid #764038;
    border-radius: calc(10 * var(--u));
    background: linear-gradient(#e85c4d 0 50%, #e83421 50%);
    box-shadow: calc(2 * var(--u)) calc(2 * var(--u)) 0 #774039;
    color: #fff;
    text-decoration: none;
    transition: transform .1s, box-shadow .1s;
}
.btn::after {
    content: "";
    position: absolute;
    top: 50%;
    /* 矢印パスの実寸は x:149.0〜176.6 / y:265.6〜291.8。viewBox はそれを余白込みで収める */
    right: calc(27 * var(--u));
    width: calc(28 * var(--u));
    height: calc(28 * var(--u));
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='148.9 264.8 28 28'%3E%3Cpath fill='%23fff' d='M161.851,291.175a1.833,1.833,0,0,1-.6-1.4,1.971,1.971,0,0,1,.6-1.445l7.891-7.891H151.027a2.027,2.027,0,1,1,0-4.053h18.715l-7.891-7.935a1.857,1.857,0,0,1-.6-1.423,2,2,0,0,1,.6-1.466,2.142,2.142,0,0,1,2.889,0l11.427,11.427a2.041,2.041,0,0,1,.453.668,1.962,1.962,0,0,1,0,1.509,2.041,2.041,0,0,1-.453.668L164.74,291.262a1.829,1.829,0,0,1-1.445.561A2.134,2.134,0,0,1,161.851,291.175Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.btn__label {
    font-size: calc(30 * var(--u));
    font-weight: 700;
    line-height: 1;
    /* ルビ分だけ下がる基準線をカンプ位置に戻す */
    transform: translateY(calc(-3 * var(--u)));
}
.btn rt { font-size: calc(11 * var(--u)); font-weight: 700; }
a.btn[href]:hover { transform: translate(calc(2 * var(--u)), calc(2 * var(--u))); box-shadow: none; }
/* 公開前：グレーアウトして押せなくする */
.btn.is-disabled { filter: grayscale(1) brightness(1.3); pointer-events: none; cursor: default; }

.release {
    margin-top: calc(17 * var(--u));
    color: #fff;
    font-size: calc(16 * var(--u));
    font-weight: 500;
    line-height: 1.6;
}
/* ルビが親文字より長い箇所で本文の字間が開かないよう詰める */
.release rt { font-size: calc(10 * var(--u)); letter-spacing: -.13em; }

/* コピーライト */
p.copy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(18 * var(--u));
    height: calc(144 * var(--u));
    background-color: rgba(0, 0, 0, .06);
    font-size: calc(12 * var(--u));
    font-weight: 500;
    color: #000;
}
p.copy::before {
    content: "";
    flex-shrink: 0;
    width: calc(106 * var(--u));
    height: calc(37 * var(--u));
    background: url(../img/cmn_foot01.png) no-repeat center / contain;
}

#footerRRe1234235 { display: block; }

/* SP（mobile.svg: 430px 基準） */
@media screen and (max-width: 812px) {
    #fuwafuwa > * { --u: calc(100cqw / 430); }

    .kv__inner { width: calc(430 * var(--u)); height: calc(699 * var(--u)); }
    .kv__logo    { left: calc(15 * var(--u));   top: calc(22 * var(--u));     width: calc(401 * var(--u)); }
    .kv__catch   { left: calc(19 * var(--u));   top: calc(203 * var(--u));    width: calc(391 * var(--u)); }
    .kv__machine { left: calc(8.37 * var(--u)); top: calc(319.17 * var(--u)); width: calc(394.1 * var(--u)); }

    .info { padding-top: calc(89 * var(--u)); }
    .btn { width: calc(323 * var(--u)); }

    p.copy {
        flex-direction: column;
        gap: calc(20 * var(--u));
        font-size: calc(10 * var(--u));
    }
}