@charset "UTF-8";

.EN_fontRed {
    color: #EC081F;
}

.EN_small {
    font-size: 15px;
}

main {
    font-size: 18px;
    padding-bottom: 30px;
}

.bg_white {
    background: #fff;
}

.bg_gray {
    background: #f8f8f8;
}

/*--mv--*/
.EN_mv img {
    width: 100%;
    display: block;
}

.EN_mv_inner {
    text-align: center;
}

/*------*/
.notion-container {
    max-width: 900px;
    width: 100%;
    margin: 30px auto;
    padding: 50px;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    /* パディングを含めて幅を計算 */
}

h1 {
    font-size: 1.5em;
    text-align: center;
    margin-top: 0px;
    padding: 10px;
    color: #00aefc;
}

/* =========================================
   今回の「お知らせページ」専用の追加スタイル
   （他のページに影響しないよう .notion-container で囲っています）
========================================= */

.notion-container h2 {
    padding: 15px 20px;
    border-radius: 8px;
    font-size: 1.45em;
    color: #333;
    margin-top: 70px;
    margin-bottom: 25px;
    text-align: center;
}

.notionTitle {
    font-size: 1.6em;
    text-align: center;
    margin-top: 10px;
    padding: 10px;
    margin-bottom: 40px;
    color: #333;
    font-weight: bold;
    border-bottom: #00aefc dotted;
}

.notion-container h3 {
    border-bottom: 2px dashed #ffaa00;
    padding-bottom: 15px;
    margin-top: 40px;
    font-size: 1.2em;
}

.notion-container p {
    line-height: 1.8;
    margin-bottom: 15px;
}

/* ボタンの装飾 */
.check-btn {
    display: block;
    text-align: center;
    background-color: #ff6b6b;
    color: #fff !important;
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    padding: 18px 30px;
    border-radius: 40px;
    margin: 50px auto;
    max-width: 400px;
    box-shadow: 0 4px 6px rgba(255, 107, 107, 0.4);
    transition: background-color 0.3s;
}

.check-btn:hover {
    background-color: #ff4c4c;
}

/* 保護者向けの注記枠 */
.parents-note {
    background-color: #f0f0f0;
    border: 2px solid #ccc;
    padding: 20px;
    border-radius: 8px;
    font-size: 0.9em;
    margin: 30px 0;
    color: #333;
}

.parents-note strong {
    color: #555;
    display: block;
    margin-bottom: 8px;
}

.parents-note ul {
    margin-top: 10px;
    padding-left: 20px;
}

/* 結果表示のボックス */
.result-box {
    padding: 20px 50px;
    border-radius: 8px;
    width: 80%;
    margin: 0 auto 40px;
}

.result-ok {
    background-color: #f4fdf4;
    /*    border: 2px solid #5cb85c; */
}

.result-ok h3 {
    border-bottom-color: #5cb85c;
    color: #2b7a2b;
    margin-top: 0;
}

.result-ng {
    background-color: #fef2f2;
    /*    border: 2px solid #d9534f; */
}

.result-ng h3 {
    border-bottom-color: #d9534f;
    color: #a02825;
    margin-top: 0;
}



/* 画像プレースホルダー（実画像を入れる場合は削除・調整してください） */
.image-placeholder {
    background-color: #fff;
    text-align: center;
    padding: 40px 20px;
    margin: 15px auto;
    border-radius: 8px;
    max-width: 400px;
}


/* =========================================
   追加エリアのデザイン（表を見るヒント＆ボタンエリア）
========================================= */

/* 「表を見てみよう！」のヒントボックス */
.hint-box {
    background: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    margin: 15px 0;
    border: 2px dashed #ccc;
}

.hint-title {
    margin-top: 0 !important;
    font-weight: bold;
    color: #00aefc !important;
    font-size: 1.1em;
}

.hint-text {
    margin-bottom: 0 !important;
}

.hint-note {
    font-size: 0.9em;
    color: #888;
    display: inline-block;
    margin-top: 5px;
}

/* ボタンを囲む目立つエリア */
.check-action-area {
    text-align: center;
    margin: 50px 0;
    padding: 40px 20px;
    background-color: #fafff0;
    border: 3px dashed #5cb85c;
    border-radius: 20px;
}

.check-action-title {
    font-weight: bold;
    font-size: 1.3em;
    color: #2b7a2b !important;
    margin-top: 0 !important;
    line-height: 1.5;
}

.check-action-note {
    font-size: 0.95em;
    color: #666 !important;
    margin-bottom: 0 !important;
    margin-top: 15px;
}


/* 手順リスト（青背景） */
.step-list {
    background-color: #f2f9ff;
    padding: 20px 20px 20px 40px;
    border-radius: 8px;
    margin: 30px 0;
}

.step-list li {
    margin-bottom: 15px;
    line-height: 1.6;
}

/* =======================================
   1. 親要素の共通設定
======================================= */
.substep-list {
    counter-reset: step-number;
    list-style: none;
    padding: 0;
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    /* 横幅が足りなくなったら折り返す */
    gap: 20px;
    /* 要素間の余白 */
}

/* =======================================
   2. 基本スタイル（縦1列用 / 3個の時など）
======================================= */
.substep-list li {
    counter-increment: step-number;
    background: #fff;
    border-radius: 12px;
    width: 100%;
    /* 基本は横幅いっぱい（縦1列） */
    display: flex;
    flex-direction: row;
    /* 横並び（画像が左、テキストが右） */
    align-items: center;
    padding: 15px 20px;
    box-sizing: border-box;
    /* paddingを含めて幅を計算 */
}

/* 共通の番号バッジ（縦1列時の配置） */
.substep-list li::before {
    content: counter(step-number);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00aefc;
    color: #fff;
    font-weight: bold;
    border-radius: 50%;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    font-size: 16px;
    margin-right: 15px;
}

.substep-list li img {
    width: 180px;
    max-width: 100%;
    margin-right: 15px;
}

/* --- substep-list の一番最初の画像（設定アイコン）だけを小さくする --- */
.substep-list li:first-child img {
    width: 80px !important; 
    margin-bottom: 15px;    
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
}

.substep-list li p {
    margin: 0;
    font-weight: bold;
    font-size: 0.95em;
    line-height: 1.4;
    color: #333;
}

/* =======================================
   3. 【画像のデザイン】liが「ちょうど4つ」の時
======================================= */
.substep-list li:first-child:nth-last-child(4),
.substep-list li:first-child:nth-last-child(4)~li {
    width: 100%;
    /* 2列にする（gapの半分を引く） */
    flex-direction: column;
    /* 縦並び（番号→画像→テキスト） */
    justify-content: flex-start;
    align-items: center;
    /* すべて中央揃え */
    padding: 20px 15px;
    text-align: center;
}

/* 4つの時：番号バッジ（上部中央に配置） */
.substep-list li:first-child:nth-last-child(4)::before,
.substep-list li:first-child:nth-last-child(4)~li::before {
    margin-right: 0;
    margin-bottom: 15px;
    /* 画像との間に隙間を空ける */
    width: 36px;
    height: 36px;
    font-size: 18px;
}

/* 4つの時：画像（中央配置） */
.substep-list li:first-child:nth-last-child(4) img,
.substep-list li:first-child:nth-last-child(4)~li img {
    width: 200px;
    /* 画像のサイズ（お好みで微調整してください） */
    margin-right: 0;
    margin-bottom: 15px;
}


/* --- ニフティキッズへもどるボタンのエリア --- */
.return-area {
    text-align: center;
    margin-top: 0px;
    /* 上にしっかり余白を取る */
    margin-bottom: 20px;
    padding-top: 40px;
    border-top: 2px dashed #eee;
    /* 区切り線を入れてスッキリさせる */
}

.return-btn {
    display: inline-block;
    padding: 15px 60px;
    background-color: #fff;
    color: #00aefc !important;
    border: 2px solid #00aefc;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    font-size: 1.1em;
    transition: all 0.3s ease;
}






/* ======================================== */

/* --- 「対応が必要な人へ」専用の大きなボックス --- */
.action-container {
    background-color: #f9f9f9;
    /* 非常に薄いグレー（または薄い水色 #f2f9ff） */
    padding: 40px;
    border-radius: 16px;
    margin-top: 10px;
    /* h2との距離 */
    margin-bottom: 50px;
    /* 影をつけて少し浮かせる（お好みで） */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* ボックス内の最初のh3の上余白を調整 */
.action-container h3:first-of-type {
    margin-top: 0;
}

/* ボックス内のリスト背景を白にすると、より見やすくなります */
.action-container .step-list {
    background-color: #fff;
    border: 1px solid #eee;
}






/* 注意点リスト（オレンジ背景） */
.warning-list {
    background-color: #fff4e5;
    padding: 20px 20px 20px 40px;
    border-radius: 8px;
}

.warning-list li {
    margin-bottom: 10px;
}

/* 重要テキスト */
.important-text {
    color: #d9534f;
    font-weight: bold;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #f5c6c6;
    margin-top: 20px;
}


/* =========================================
   既存のスタイル（変更なし）
========================================= */
.event_info {
    max-width: 650px;
    margin: 20px auto;
    width: auto;
    padding: 23px 20px;
    background: #fff;
    border-radius: 10vh;
}

.event_info p {
    text-align: center;
    border-radius: 15vh;
    font-size: 1.1em;
    line-height: 1.9em;
    margin-block-start: auto;
}

.group {
    margin: 0 auto 35px;
    max-width: 800px;
}

.event_info h2 {
    text-align: center;
    margin: 0 45px;
}

.list {
    display: inline-block;
    width: 100%;
}

.list>ul {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 850px;
    width: 100%;
    margin: 15px auto;
    padding: 0;
    align-items: start;
}

.list li {
    margin: 0 5px 35px;
}

.list img {
    width: 100%;
    max-width: 165px;
    margin: 0 auto;
    padding: 5px;
}

.list a {
    text-align: center;
    display: grid;
    font-size: 0.95em;
    color: #0693e3;
    font-weight: bold;
}

.backTop {
    text-align: center;
    margin-bottom: 50px;
}

.backLink {
    padding: 1em 5em;
    text-align: center;
    border: 2px solid #0093ffe0;
    color: #0093ffe0;
    font-weight: bold;
    display: block;
    max-width: 265px;
    margin: 0 auto;
    width: 100%;
}

.btnGroup {
    display: flex;
    flex-direction: column;
}

.btnEvent {
    padding: 25px;
    max-width: 800px;
    margin: 6px auto;
    background: #fed711;
    border-radius: 1vh;
    font-weight: bold;
    color: #333;
}

.corner {
    text-align: center;
    padding: 20px 0;
    margin: 0 10px;
}

.corner h2 {
    background: #fa6301;
    padding: 20px;
    max-width: 650px;
    width: auto;
    margin: 0 auto;
    border-radius: 10px;
    color: #fff;
}

.group.linkGroup {
    display: block;
    padding: 20px 0;
}

.linkGroup a {
    padding: 25px;
    background: #fff;
    border-radius: 11px;
    display: block;
    max-width: 550px;
    margin: 15px auto;
    text-align: center;
    box-shadow: #cdcdcd 4px 4px 3px 0px;
}

.linkGroup h3 {
    color: #fa6301;
    font-size: 1.4rem;
}

/* YouTube動画一覧 */
.video-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 35px;
}

.video-container iframe {
    width: calc(30% - 10px) !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    max-width: 100% !important;
}

.video-container02 iframe {
    width: 60% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    max-width: 100% !important;
    display: block;
    margin: 0 auto 30px;
}

.textRecommend {
    margin-bottom: 30px;
    padding: 25px 0;
    background: #00aefc;
    border-radius: 12px;
    color: #fff;
    text-align: center;
}

.eduRecommend {
    margin-bottom: 30px;
    padding: 25px 0;
    background: #e84521;
    border-radius: 12px;
    color: #fff;
    text-align: center;
}

/* ②の中の iPhone / Android 分けの小見出し（h4） */

/* --- ②の中の iPhone / Android 各ブロックを白いカードにする --- */
.os-block {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    /* 角を丸く */
    padding: 25px;
    /* 中の余白 */
    margin-top: 30px;
    margin-bottom: 40px;
    box-shadow: 0 6px 0px rgba(0, 174, 252, 0.1);
    /* ほんのり影 */
}

/* ブロック内のタイトル（h4）をカードの中で調整 */
.os-title {
    background-color: #838383;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 1.1em;
    display: inline-block;
    margin-top: 0;
    /* カードのてっぺんに合わせる */
    margin-bottom: 15px;
    box-shadow: 3px 3px 0px #ccc;
}

/* --- カードの中に入ったリストの「二重枠」を消す設定 --- */
.os-block .step-list,
.os-block .substep-list {
    border: none !important;
    /* 外側の枠線を消す */
    background: transparent !important;
    /* 背景色を透明にしてカードの色(白)に合わせる */
    padding-left: 40px !important;
    /* アイコン(丸数字など)のスペースだけ残す */
    margin: 10px 0 0 0 !important;
    box-shadow: none !important;
    /* 影も消す */
}

/* PCで2列にする設定も、カード内のリストには適用されないように調整（任意） */
@media screen and (min-width: 769px) {
    .os-block .substep-list:has(> li:last-child:nth-child(4)) {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 40px;
    }
}

/* =========================================
   メディアクエリ（スマホ用調整）
========================================= */

@media screen and (min-width: 769px) {
    .show_only_sp {
        display: none;
    }

    .title_pc {
        width: 100%;
        height: auto;
        text-align: center;
    }

    .sp-only {
        display: none !important;
    }

    /* ① 基本は1列（縦並び） */
    .step-list,
    .substep-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px 50px;
    }

    .step-list li,
    .substep-list li {
        margin-bottom: 0 !important;
    }

    /* ② 項目(li)が「ちょうど4つ」の時だけ2列にする魔法のセレクタ */
    .step-list:has(> li:last-child:nth-child(4)),
    .substep-list:has(> li:last-child:nth-child(4)) {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    main {
        font-size: 16px;
    }

    .small {
        font-size: 0.85rem;
    }

    .show_only_pc {
        display: none !important;
    }

    /* 今回追加したコンテナのスマホ向け余白調整 */
    .notion-container {
        padding: 20px 10px;
        margin: 15px auto;
    }

    .check-btn {
        width: 100%;
        box-sizing: border-box;
        font-size: 1.1em;
        padding: 15px 10px;
    }

    /* 既存のスマホ調整 */
    .event_info p {
        padding: 9px 10px;
        margin: 10px auto 0;
    }

    .mv_area {
        display: block;
        text-align: center;
    }

    .event_info {
        border-radius: 5vh;
    }

    .list>ul {
        padding-inline-start: 0px;
        margin: 10px auto;
    }

    .list a {
        font-size: 1.1em;
        flex-direction: column;
        align-items: center;
    }

    .list li {
        margin: 0 5px 25px;
        padding: 0px;
    }

    .list img {
        max-width: 160px;
    }

    .backLink {
        padding: 1em 2em;
        margin: 0 auto;
        width: 100%;
        max-width: 190px;
    }

    .btnGroup {
        align-items: center;
    }

    .btnEvent {
        padding: 16px;
        max-width: 500px;
        margin: 5px 3px;
    }

    .linkGroup a {
        padding: 20px 5px;
    }

    .video-container {
        display: flex;
        flex-direction: column;
    }

    .video-container iframe {
        width: 90% !important;
        margin: 0 auto;
        max-width: 300px !important;
    }

    .video-container02 iframe {
        width: 90% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        max-width: 100% !important;
    }

    /**/
    .os-block .step-list,
    .os-block .substep-list {
        padding-left: 0 !important;
    }


    .substep-list li {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        margin-bottom: 15px;

    }

    /* 縦1列時のスマホ画像・バッジサイズ */
    .substep-list li img {
        width: 200px;
        margin-bottom: 15px;
    }

    .substep-list li::before {
        margin-right: 0;
        margin-bottom: 15px;
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    /* 4つの時（カード型）も、スマホでは横幅100%の縦1列に戻す */
    .substep-list li:first-child:nth-last-child(4),
    .substep-list li:first-child:nth-last-child(4)~li {
        width: 100%;
    }

    .result-box {
        padding: 20px;
        border-radius: 8px;
        width: auto;
    }

    .check-action-area {
        text-align: center;
        margin: 50px 0;
        padding: 20px 20px;
    }

    .check-btn {
        margin: 20px auto;
    }

    .action-container {
        background-color: #f9f9f9;
        padding: 20px 4px;
    }

    .os-block {
        padding: 18px 8px;
    }

    .return-area {
        margin-top: 50px;
        padding-top: 30px;
    }

    .return-btn {
        width: 100%;
        /* スマホでは押しやすいように横幅いっぱい */
        box-sizing: border-box;
    }
}