@charset "UTF-8";

/* =========================================================
   DREAM PROJECT / RECEIVED BOX THEME
   ---------------------------------------------------------
   読み込み順:
   1. normalize.css
   2. common.css
   3. received-box-theme.css ← このファイル

   方針:
   - common.css のレイアウト機能を活かす
   - HTML / Twig / システム処理は変更しない
   - 受信ボックスページだけで読み込む
   - ターコイズ / ピンクを撤廃
   - 白・赤・黄・黒を中心に統一
========================================================= */


/* =========================================================
   THEME VARIABLES
   common.css が参照している変数を、このページだけ差し替える
========================================================= */

:root {
    --main-color: #d90818;
    --primary-color: #d90818;
    --secondary-color: #222222;
    --background-color: #f6f6f6;
    --font-color: #222222;
    --btn-color: #d90818;

    --white-color: #ffffff;
    --black-color: #171717;
    --gray-color: #6f6f6f;
    --silver-color: #dedede;
    --red-color: #d90818;
    --blue-color: #333333;
    --orange-color: #e86e00;

    --dp-red: #d90818;
    --dp-red-dark: #b80714;
    --dp-yellow: #f4c400;
    --dp-black: #171717;
    --dp-text: #222222;
    --dp-muted: #777777;
    --dp-border: #e4e4e4;
    --dp-bg: #f6f6f6;
    --dp-white: #ffffff;
    --dp-line: #06c755;
    --dp-shadow: 0 5px 18px rgba(0, 0, 0, 0.055);
}


/* =========================================================
   PAGE BASE
========================================================= */

html,
body {
    background: var(--dp-bg) !important;
}

body {
    color: var(--dp-text);
}

/*
 common.css は固定ヘッダー前提で #wrapper に上余白を設定しているため
 ヘッダー固定解除と同時にリセットする。
*/
#wrapper {
    padding-top: 0 !important;
    background: var(--dp-bg) !important;
}


/* =========================================================
   HEADER
========================================================= */

#Header {
    position: relative !important;
    top: auto !important;
    left: auto !important;

    width: 100%;
    background: var(--dp-white) !important;

    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.055) !important;
    z-index: 20;
}


/* 上段 */
#Header .inner {
    position: relative;

    height: 66px !important;

    background: var(--dp-white) !important;

    border-top: 4px solid var(--dp-red) !important;
    border-bottom: 1px solid #eeeeee;

    padding: 0 32px !important;
}


/* 空のロゴ画像は非表示 */
#Header .header-logo img[src=""] {
    display: none !important;
}

#Header .header-logo p {
    display: none !important;
}


/* 空ロゴ領域をブランド表示として利用 */
#Header .header-logo::before {
    content: "DREAM PROJECT";

    display: block;

    color: var(--dp-black);

    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
}

#Header .header-logo::after {
    content: "ドリームプロジェクト";

    display: block;

    color: var(--dp-red);

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.12em;

    margin-top: 6px;
}


/* Q&A / ログアウト */
#Header ul.header-menu li:not(:last-child) {
    margin-right: 24px !important;
}

#Header ul.header-menu li a {
    color: #333333 !important;

    font-size: 14px !important;
    font-weight: 600 !important;
}

#Header ul.header-menu li a:hover {
    color: var(--dp-red) !important;
}

#Header ul.header-menu li .icon {
    margin-right: 7px !important;
}

#Header ul.header-menu li .icon img {
    height: 17px !important;
}


/* =========================================================
   GLOBAL NAVIGATION
   4項目を縦並び。LINEだけ強いCTA。
========================================================= */

#g-nav {
    width: 100%;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #ffffff 72%,
            #fafafa 100%
        ) !important;

    border-bottom: 1px solid #e9e9e9;
}

#g-nav ul.menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    width: calc(100% - 40px);
    max-width: 780px;

    gap: 10px;

    background: transparent !important;

    padding: 16px 0 20px !important;
    margin: 0 auto !important;
}

#g-nav ul.menu > li {
    position: relative;

    width: 100% !important;
    min-width: 0 !important;

    padding: 0 !important;
    margin: 0 !important;
}


/* common.css の区切り線を解除 */
#g-nav ul.menu > li::after {
    display: none !important;
}


/* 共通ナビボタン */
#g-nav ul.menu > li > a {
    position: relative;

    display: flex !important;
    align-items: center;
    justify-content: flex-start;

    width: 100%;
    min-height: 58px;

    color: var(--dp-text) !important;

    background: var(--dp-white) !important;

    border: 1px solid #dfdfdf;
    border-radius: 9px;

    padding: 13px 52px 13px 22px !important;

    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.35;
    text-align: left !important;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.035);

    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


/* 右矢印 */
#g-nav ul.menu > li:not(:first-child) > a::after {
    position: absolute;

    content: "";

    top: 50%;
    right: 22px;

    width: 8px;
    height: 8px;

    border-top: 2px solid #888888;
    border-right: 2px solid #888888;

    transform: translateY(-50%) rotate(45deg);
}


/* hover */
#g-nav ul.menu > li:not(:first-child) > a:hover {
    color: var(--dp-black) !important;
    background: #fafafa !important;
    border-color: #cccccc;

    transform: translateY(-1px);

    box-shadow: 0 4px 9px rgba(0, 0, 0, 0.06);
}


/* 1. LINE */
#g-nav ul.menu > li:nth-child(1) > a,
#g-nav .dream-menu-line > a {
    justify-content: center;

    min-height: 64px;

    color: #ffffff !important;
    background: var(--dp-line) !important;

    border-color: #05b94e !important;

    padding-left: 22px !important;
    padding-right: 22px !important;

    font-size: 20px !important;

    box-shadow: 0 5px 12px rgba(6, 199, 85, 0.20);
}

#g-nav ul.menu > li:nth-child(1) > a::before,
#g-nav .dream-menu-line > a::before {
    content: "LINE";

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 30px;

    color: var(--dp-line);
    background: #ffffff;

    border-radius: 6px;

    font-size: 11px;
    font-weight: 900;
    line-height: 1;

    margin-right: 12px;
}

#g-nav ul.menu > li:nth-child(1) > a:hover,
#g-nav .dream-menu-line > a:hover {
    color: #ffffff !important;
    background: #05b94e !important;
}


/* 2. 受信ボックス */
#g-nav ul.menu > li:nth-child(2) > a,
#g-nav .dream-menu-inbox > a {
    border-left: 5px solid var(--dp-red);
}


/* 3. ドリプロとは */
#g-nav ul.menu > li:nth-child(3) > a,
#g-nav .dream-menu-about > a {
    border-left: 5px solid var(--dp-yellow);
}


/* 4. 注意事項 */
#g-nav ul.menu > li:nth-child(4) > a,
#g-nav .dream-menu-notice > a {
    border-left: 5px solid var(--dp-black);
}


/* =========================================================
   RECEIVED BOX
   HTML/Twigは一切変更せず、既存ID/クラスのみ使用
========================================================= */

#mypage-mail {
    width: 94% !important;
    max-width: 1120px !important;

    margin: 38px auto 0 !important;
}


/* ---------------------------------------------------------
   ページタイトル
--------------------------------------------------------- */

#mypage-mail .ttl-section {
    position: relative;

    display: block !important;

    color: var(--dp-black) !important;
    background: transparent !important;

    border: 0 !important;
    border-left: 5px solid var(--dp-red) !important;

    padding: 4px 0 4px 16px !important;
    margin-bottom: 28px !important;

    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.04em !important;
}

#mypage-mail .ttl-section::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -10px;

    width: 70px;
    height: 3px;

    background: var(--dp-yellow);

    border-radius: 999px;
}


/* ---------------------------------------------------------
   2カラム
--------------------------------------------------------- */

#mypage-mail .flex-column-wrap {
    align-items: flex-start;
    gap: 28px;
}

#mypage-mail .flex-column-wrap .col-1.fixity {
    width: 300px !important;
    flex: 0 0 300px;
}

#mypage-mail .flex-column-wrap .col-1.fixity + .col-2 {
    width: calc(100% - 328px) !important;
    min-width: 0;
}


/* =========================================================
   POINT CARD
========================================================= */

#mypage-mail #point.border-frame {
    position: relative;

    overflow: hidden;

    background: var(--dp-white) !important;

    border: 1px solid var(--dp-border) !important;
    border-radius: 12px !important;

    padding: 28px 24px !important;

    box-shadow: var(--dp-shadow);
}


/* 上部アクセント */
#mypage-mail #point.border-frame::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--dp-red) 0 70%,
            var(--dp-yellow) 70% 100%
        );
}


/* 名前 */
#mypage-mail #point .user-name {
    color: #555555 !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.5;

    text-align: center;
}


/* ポイント */
#mypage-mail #point .user-point {
    color: var(--dp-muted) !important;

    font-size: 15px !important;
    font-weight: 500;

    text-align: center;

    margin-top: 13px;
}

#mypage-mail #point .user-point span {
    display: inline-block;

    color: var(--dp-red) !important;

    font-size: 40px !important;
    font-weight: 800 !important;
    line-height: 1;

    margin-right: 5px;
}


/* 購入CTA */
#mypage-mail #point .btn.btn-red {
    margin-top: 22px !important;
}

#mypage-mail #point .btn.btn-red a {
    height: 44px !important;

    color: #ffffff !important;
    background: var(--dp-red) !important;

    border: 1px solid var(--dp-red) !important;
    border-radius: 6px !important;

    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;

    box-shadow: 0 3px 8px rgba(217, 8, 24, 0.15);
}

#mypage-mail #point .btn.btn-red a:hover {
    color: #ffffff !important;
    background: var(--dp-red-dark) !important;
    border-color: var(--dp-red-dark) !important;

    opacity: 1 !important;
}


/* 料金案内 */
#mypage-mail #point .link {
    margin-top: 16px !important;
}

#mypage-mail #point .link a {
    color: #666666 !important;

    font-size: 14px !important;
}

#mypage-mail #point .link a:hover {
    color: var(--dp-red) !important;
}


/* =========================================================
   MAIL
========================================================= */

#mypage-mail #mail {
    width: 100%;

    background: var(--dp-white);

    border: 1px solid var(--dp-border);
    border-radius: 12px;

    box-shadow: var(--dp-shadow);
}

#mypage-mail #mail .mail-inner {
    padding: 22px 24px 26px;
}


/* 受信メールタイトル */
#mypage-mail #mail .ttl-block {
    position: relative;

    color: var(--dp-black) !important;

    border: 0 !important;
    border-bottom: 1px solid #e9e9e9 !important;

    padding: 0 0 15px 17px !important;
    margin-bottom: 0 !important;

    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.03em !important;
}

#mypage-mail #mail .ttl-block::before {
    top: 3px !important;
    left: 0 !important;

    width: 5px !important;
    height: 21px !important;
    aspect-ratio: auto !important;

    background: var(--dp-red);

    border: 0 !important;
    border-radius: 999px !important;

    transform: none !important;
}


/* ---------------------------------------------------------
   メール一覧
--------------------------------------------------------- */

#mypage-mail #mail .mail-list {
    width: 100%;
}

#mypage-mail #mail .mail-list > li {
    position: relative;

    width: 100%;

    border-bottom: 1px solid #ededed;
}

#mypage-mail #mail .mail-list > li:last-child {
    border-bottom: 0;
}


/* クリック領域 */
#mypage-mail #mail .mail-list > li > a {
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    align-items: center;

    width: 100%;

    gap: 14px;

    color: var(--dp-text) !important;
    background: #ffffff;

    padding: 13px 4px !important;

    transition: background-color .18s ease;
}

#mypage-mail #mail .mail-list > li > a:hover {
    color: var(--dp-text) !important;
    background: #fafafa;
}


/* 日付 */
#mypage-mail #mail .mail-date {
    color: #888888 !important;

    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4;

    white-space: nowrap;
}


/* 件名 */
#mypage-mail #mail .mail-subject {
    min-width: 0;

    overflow: hidden;

    color: #333333 !important;

    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.45;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* 既読/未読 */
#mypage-mail #mail .mail-list .icon {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    min-width: 40px;
}

#mypage-mail #mail .icon-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 36px;

    color: #777777 !important;
    background: #f3f3f3 !important;

    border: 1px solid #dedede !important;
    border-radius: 999px;

    padding: 4px 7px;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}


/* 未読だけ赤 */
#mypage-mail #mail .icon-check.unread {
    color: #ffffff !important;
    background: var(--dp-red) !important;

    border-color: var(--dp-red) !important;
}


/* =========================================================
   PAGINATION
========================================================= */

#mypage-mail .pagination {
    margin-top: 22px !important;
}

#mypage-mail .pagination ul.page-list {
    gap: 8px 12px !important;
}

#mypage-mail .pagination ul.page-list li a {
    min-width: 34px !important;

    color: #555555 !important;

    font-size: 14px;
}

#mypage-mail .pagination ul.page-list li a:hover,
#mypage-mail .pagination ul.page-list li a:focus {
    color: #ffffff !important;
    background: var(--dp-red) !important;
}

#mypage-mail .pagination ul.page-list li.item-previous a::after,
#mypage-mail .pagination ul.page-list li.item-next a::after {
    border-color: #555555 !important;
}

#mypage-mail .pagination ul.page-list li.item-previous a:hover::after,
#mypage-mail .pagination ul.page-list li.item-next a:hover::after {
    border-color: #ffffff !important;
}


/* =========================================================
   CAMPAIGN IMAGES
========================================================= */

/* 1枚目 */
#mypage-mail #mail .mail-inner > img {
    display: block !important;

    width: 100%;
    max-width: 100%;

    border-radius: 8px;

    margin-top: 24px;

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06);
}


/* 2枚目CTA画像 */
#mypage-mail #mail .mail-inner > a[href="/redirectpage"] {
    display: block;

    width: 100%;

    margin-top: 8px;

    text-align: center;
}

#mypage-mail #mail .mail-inner > a[href="/redirectpage"] img {
    display: block;

    width: 100%;
    max-width: 100%;

    border-radius: 8px;

    transition:
        transform .2s ease,
        opacity .2s ease;
}

#mypage-mail #mail .mail-inner > a[href="/redirectpage"]:hover img {
    transform: translateY(-2px);
    opacity: .95;
}


/* =========================================================
   FOOTER
========================================================= */

#Footer {
    position: relative;

    color: #555555 !important;
    background: #ffffff !important;

    border-top: 4px solid var(--dp-red);

    padding-top: 40px !important;
    margin-top: 90px !important;

    box-shadow: inset 0 2px 0 var(--dp-yellow);
}


/* ロゴ */
#Footer .logo {
    margin-bottom: 28px !important;
}

#Footer .logo img {
    width: 150px !important;
}


/* ナビ */
#Footer .navigation {
    margin: 0 auto 45px !important;
}

#Footer ul.menu {
    gap: 14px 0 !important;
}

#Footer ul.menu + ul.menu {
    margin-top: 14px !important;
}

#Footer ul.menu li {
    border-right: 1px solid #dddddd !important;
}

#Footer ul.menu li:last-child {
    border-right: 0 !important;
}

#Footer ul.menu li a {
    color: #555555 !important;

    font-size: 14px;
}

#Footer ul.menu li a:hover {
    color: var(--dp-red) !important;
}


/* Copyright */
#Footer .copy {
    color: #999999 !important;
    background: #fafafa !important;

    border-top: 1px solid #eeeeee;

    padding: 18px 0 !important;
}


/* =========================================================
   PAGE TOP
========================================================= */

#pageTop {
    width: 48px !important;

    background: #ffffff !important;

    border: 2px solid var(--dp-red);

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.09);
}

#pageTop::after {
    border-top-color: var(--dp-red) !important;
    border-right-color: var(--dp-red) !important;
}


/* =========================================================
   TABLET / SMARTPHONE
========================================================= */

@media screen and (max-width: 768px) {

    /* common.css の固定ヘッダー用余白を確実に解除 */
    #wrapper {
        padding-top: 0 !important;
    }


    /* Header */
    #Header .inner {
        height: 58px !important;

        border-top-width: 4px !important;

        padding: 0 14px !important;
    }

    #Header .header-logo::before {
        font-size: 15px;
    }

    #Header .header-logo::after {
        font-size: 9px;
        margin-top: 4px;
    }

    #Header ul.header-menu li:not(:last-child) {
        margin-right: 12px !important;
    }

    #Header ul.header-menu li a {
        display: flex !important;

        font-size: 11px !important;
    }

    #Header ul.header-menu li .icon {
        margin-right: 4px !important;
        margin-bottom: 0 !important;
    }

    #Header ul.header-menu li .icon img {
        width: auto !important;
        height: 13px !important;
    }


    /* Navigation */
    #g-nav ul.menu {
        width: calc(100% - 20px);

        gap: 8px;

        padding: 12px 0 15px !important;
    }

    #g-nav ul.menu > li > a {
        min-height: 56px;

        padding: 11px 46px 11px 18px !important;

        font-size: 17px !important;
    }

    #g-nav ul.menu > li:nth-child(1) > a {
        min-height: 62px;

        padding-left: 18px !important;
        padding-right: 18px !important;

        font-size: 18px !important;
    }

    #g-nav ul.menu > li:nth-child(1) > a::before,
    #g-nav .dream-menu-line > a::before {
        width: 42px;
        height: 28px;

        font-size: 9px;

        margin-right: 10px;
    }


    /* Received Box */
    #mypage-mail {
        width: calc(100% - 24px) !important;

        margin-top: 28px !important;
    }

    #mypage-mail .ttl-section {
        padding-left: 13px !important;
        margin-bottom: 24px !important;

        font-size: 24px !important;
    }


    /* Column → 1 column */
    #mypage-mail .flex-column-wrap {
        display: block !important;
    }

    #mypage-mail .flex-column-wrap .col-1.fixity,
    #mypage-mail .flex-column-wrap .col-1.fixity + .col-2 {
        width: 100% !important;
        min-width: 0 !important;
    }

    #mypage-mail .flex-column-wrap .col-1.fixity {
        margin-bottom: 18px;
    }

    #mypage-mail .flex-column-wrap .col-1.fixity + .col-2 {
        margin-top: 0 !important;
    }


    /* Point */
    #mypage-mail #point.border-frame {
        padding: 22px 18px !important;

        border-radius: 10px !important;
    }

    #mypage-mail #point .user-point span {
        font-size: 34px !important;
    }

    #mypage-mail #point .btn.btn-red a {
        height: 46px !important;

        font-size: 15px !important;
    }


    /* Mail */
    #mypage-mail #mail {
        border-radius: 10px;
    }

    #mypage-mail #mail .mail-inner {
        padding: 18px 14px 20px;
    }

    #mypage-mail #mail .ttl-block {
        padding: 0 0 12px 14px !important;

        font-size: 20px !important;
    }

    #mypage-mail #mail .ttl-block::before {
        width: 4px !important;
        height: 18px !important;
    }


    /* Mail item */
    #mypage-mail #mail .mail-list > li > a {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "date status"
            "subject status";

        gap: 4px 10px;

        padding: 11px 2px !important;
    }

    #mypage-mail #mail .mail-date {
        grid-area: date;

        font-size: 12px !important;
    }

    #mypage-mail #mail .mail-subject {
        grid-area: subject;

        font-size: 14px !important;
    }

    #mypage-mail #mail .mail-list .icon {
        grid-area: status;
    }

    #mypage-mail #mail .icon-check {
        min-width: 38px;

        padding: 5px 7px;

        font-size: 11px !important;
    }


    /* Footer */
    #Footer {
        padding-top: 30px !important;
        margin-top: 60px !important;
    }

    #Footer .logo {
        margin-bottom: 22px !important;
    }

    #Footer .logo img {
        width: 125px !important;
    }

    #Footer .navigation {
        margin-bottom: 28px !important;
    }

    #Footer ul.menu {
        display: block !important;

        border-top: 1px solid #e8e8e8 !important;
    }

    #Footer ul.menu + ul.menu {
        margin-top: 0 !important;
        border-top: 0 !important;
    }

    #Footer ul.menu > li {
        border-right: 0 !important;
        border-bottom: 1px solid #e8e8e8 !important;

        padding: 0 !important;
    }

    #Footer ul.menu li a {
        color: #555555 !important;

        padding: 15px 42px 15px 16px !important;

        font-size: 13px !important;
    }

    #Footer ul.menu > li > a::after {
        width: 7px !important;
        height: 7px !important;

        right: 20px !important;

        border-top: 1px solid #999999 !important;
        border-right: 1px solid #999999 !important;
    }


    /* Page Top */
    #pageTop {
        position: fixed !important;

        right: 10px !important;
        bottom: 10px !important;

        width: 42px !important;

        top: auto !important;
    }

    #pageTop::after {
        width: 8px !important;
        height: 8px !important;
    }
}


/* =========================================================
   SMALL SMARTPHONE
========================================================= */

@media screen and (max-width: 420px) {

    #Header .header-logo::before {
        font-size: 13px;
    }

    #Header .header-logo::after {
        display: none;
    }

    #Header ul.header-menu li a {
        font-size: 10px !important;
    }

    #g-nav ul.menu {
        width: calc(100% - 14px);
    }

    #mypage-mail {
        width: calc(100% - 18px) !important;
    }

    #mypage-mail #mail .mail-subject {
        max-width: 100%;
    }
}

/* =========================================================
   LINE CTA - IMPACT VERSION
========================================================= */

#g-nav ul.menu > li:nth-child(1),
#g-nav .dream-menu-line {
    position: relative;
    overflow: visible !important;
    padding-bottom: 44px !important;
}

#g-nav ul.menu > li:nth-child(1) > a,
#g-nav .dream-menu-line > a {
    position: relative;
    overflow: hidden;

    min-height: 72px !important;

    justify-content: center !important;

    background:
        linear-gradient(
            135deg,
            #00b84d 0%,
            #06c755 48%,
            #12d968 100%
        ) !important;

    border: 2px solid #03a947 !important;
    border-radius: 12px !important;

    padding: 14px 22px !important;

    font-size: 0 !important;

    box-shadow:
        0 5px 0 #038f3b,
        0 10px 22px rgba(6, 199, 85, 0.28),
        0 0 0 1px rgba(255,255,255,0.25) inset !important;

    transform-origin: center;

    animation:
        dp-line-pulse 2.2s ease-in-out infinite,
        dp-line-gradient 4s linear infinite !important;

    background-size: 200% 100% !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease !important;
}

#g-nav ul.menu > li:nth-child(1) > a::before,
#g-nav .dream-menu-line > a::before {
    content: "LINE" !important;

    position: relative;
    z-index: 3;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 52px !important;
    height: 34px !important;

    margin: 0 14px 0 0 !important;

    color: #06c755 !important;
    background: #ffffff !important;

    border: 0 !important;
    border-radius: 8px !important;

    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    box-shadow: 0 2px 5px rgba(0,0,0,0.12) !important;

    transform: none !important;
}

#g-nav ul.menu > li:nth-child(1) > a::after,
#g-nav .dream-menu-line > a::after {
    content: "▶︎ LINE追加はこちら ◀︎" !important;

    position: relative !important;
    z-index: 3;

    display: inline-block !important;

    width: auto !important;
    height: auto !important;

    top: auto !important;
    right: auto !important;

    color: #ffffff !important;

    border: 0 !important;

    font-size: 23px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.035em !important;

    white-space: nowrap;

    text-shadow: 0 2px 2px rgba(0,0,0,0.18);

    transform: none !important;

    animation: dp-line-text-pop 1.5s ease-in-out infinite;
}

#g-nav ul.menu > li:nth-child(1) > a:hover,
#g-nav .dream-menu-line > a:hover {
    background:
        linear-gradient(
            135deg,
            #00a946 0%,
            #05ba4f 48%,
            #0dcc5d 100%
        ) !important;

    filter: brightness(1.03);

    transform: translateY(-2px) scale(1.012);

    box-shadow:
        0 6px 0 #027c33,
        0 13px 25px rgba(6, 199, 85, 0.32),
        0 0 0 1px rgba(255,255,255,0.3) inset !important;
}

#g-nav ul.menu > li:nth-child(1) > a:active,
#g-nav .dream-menu-line > a:active {
    transform: translateY(3px) scale(0.995);

    box-shadow:
        0 2px 0 #027c33,
        0 5px 10px rgba(6, 199, 85, 0.22) !important;
}

#g-nav ul.menu > li:nth-child(1)::after,
#g-nav .dream-menu-line::after {
    content: "※LINEが届かなくなった場合はこちらから追加" !important;

    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 7px !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    color: #555555 !important;
    background: transparent !important;

    border: 0 !important;

    padding: 0 8px !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;

    text-align: center !important;

    transform: none !important;

    pointer-events: none;
}

@keyframes dp-line-pulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.018);
        filter: brightness(1.055);
    }
}

@keyframes dp-line-text-pop {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.035);
    }
}

@keyframes dp-line-gradient {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

@media screen and (max-width: 768px) {

    #g-nav ul.menu > li:nth-child(1),
    #g-nav .dream-menu-line {
        padding-bottom: 50px !important;
    }

    #g-nav ul.menu > li:nth-child(1) > a,
    #g-nav .dream-menu-line > a {
        min-height: 68px !important;
        padding: 12px 14px !important;
        border-radius: 10px !important;
    }

    #g-nav ul.menu > li:nth-child(1) > a::before,
    #g-nav .dream-menu-line > a::before {
        width: 46px !important;
        height: 30px !important;
        margin-right: 10px !important;
        font-size: 10px !important;
    }

    #g-nav ul.menu > li:nth-child(1) > a::after,
    #g-nav .dream-menu-line > a::after {
        font-size: 19px !important;
        letter-spacing: 0.02em !important;
    }

    #g-nav ul.menu > li:nth-child(1)::after,
    #g-nav .dream-menu-line::after {
        bottom: 6px !important;
        padding: 0 4px !important;
        font-size: 11px !important;
        line-height: 1.45 !important;
    }
}

@media screen and (max-width: 420px) {

    #g-nav ul.menu > li:nth-child(1),
    #g-nav .dream-menu-line {
        padding-bottom: 56px !important;
    }

    #g-nav ul.menu > li:nth-child(1) > a,
    #g-nav .dream-menu-line > a {
        min-height: 64px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #g-nav ul.menu > li:nth-child(1) > a::before,
    #g-nav .dream-menu-line > a::before {
        width: 42px !important;
        height: 28px !important;
        margin-right: 8px !important;
        font-size: 9px !important;
    }

    #g-nav ul.menu > li:nth-child(1) > a::after,
    #g-nav .dream-menu-line > a::after {
        font-size: 16px !important;
    }

    #g-nav ul.menu > li:nth-child(1)::after,
    #g-nav .dream-menu-line::after {
        font-size: 10px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #g-nav ul.menu > li:nth-child(1) > a,
    #g-nav .dream-menu-line > a,
    #g-nav ul.menu > li:nth-child(1) > a::after,
    #g-nav .dream-menu-line > a::after {
        animation: none !important;
    }
}


/* =========================================================
   LINE NOTICE - OVERLAP FIX
   注意書きを絶対配置から通常フローへ変更
========================================================= */

/* 注意書き用に確保していた下余白を解除 */
#g-nav ul.menu > li:nth-child(1),
#g-nav .dream-menu-line {
    padding-bottom: 0 !important;
}


/* 注意書きをボタン直下の独立ブロックとして表示 */
#g-nav ul.menu > li:nth-child(1)::after,
#g-nav .dream-menu-line::after {
    content: "※LINEが届かなくなった場合はこちらから追加👆" !important;

    position: static !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    margin: 18px 0 0 !important;
    padding: 10px 14px !important;

    color: #a60000 !important;
    background: #fffbea !important;

    border: 1px solid #eadb91 !important;
    border-left: 4px solid #027d34 !important;
    border-radius: 7px !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;

    text-align: center !important;

    transform: none !important;

    pointer-events: none;
    box-sizing: border-box !important;
}


/* LINEボタンの影と注意書きの間隔を少し確保 */
#g-nav ul.menu > li:nth-child(1) > a,
#g-nav .dream-menu-line > a {
    margin-bottom: 0 !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 768px) {

    #g-nav ul.menu > li:nth-child(1),
    #g-nav .dream-menu-line {
        padding-bottom: 0 !important;
    }

    #g-nav ul.menu > li:nth-child(1)::after,
    #g-nav .dream-menu-line::after {
        position: static !important;

        margin-top: 14px !important;
        padding: 9px 10px !important;

        font-size: 11px !important;
        line-height: 1.55 !important;

        text-align: left !important;
    }
}


/* =========================================================
   SMALL SMARTPHONE
========================================================= */

@media screen and (max-width: 420px) {

    #g-nav ul.menu > li:nth-child(1),
    #g-nav .dream-menu-line {
        padding-bottom: 0 !important;
    }

    #g-nav ul.menu > li:nth-child(1)::after,
    #g-nav .dream-menu-line::after {
        margin-top: 14px !important;
        padding: 8px 9px !important;

        font-size: 10px !important;
        line-height: 1.55 !important;
    }
}


/* =========================================================
   LINE CTA - STRONG IMPACT OVERRIDE
   既存レイアウト・注意書きは維持し、LINEボタンだけ強化
========================================================= */

/* ボタン外側にも存在感を追加 */
#g-nav ul.menu > li:nth-child(1),
#g-nav .dream-menu-line {
    border-radius: 16px;
}


/* LINEボタン本体 */
#g-nav ul.menu > li:nth-child(1) > a,
#g-nav .dream-menu-line > a {
    min-height: 82px !important;

    border: 3px solid #ffffff !important;
    border-radius: 15px !important;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 32%,
            rgba(255,255,255,0.08) 39%,
            rgba(255,255,255,0.62) 47%,
            rgba(255,255,255,0.12) 55%,
            transparent 63%,
            transparent 100%
        ),
        linear-gradient(
            135deg,
            #009c41 0%,
            #06c755 35%,
            #14dc69 60%,
            #05b64d 82%,
            #008c3a 100%
        ) !important;

    background-size:
        260% 100%,
        100% 100% !important;

    background-position:
        145% 0,
        0 0 !important;

    box-shadow:
        0 0 0 2px #06c755,
        0 7px 0 #027d34,
        0 14px 28px rgba(6,199,85,0.34),
        0 0 28px rgba(6,199,85,0.24),
        inset 0 2px 0 rgba(255,255,255,0.42),
        inset 0 -3px 0 rgba(0,0,0,0.10) !important;

    animation:
        dp-line-strong-pulse 1.9s ease-in-out infinite,
        dp-line-strong-shine 2.8s ease-in-out infinite !important;

    transform-origin: center;
}


/* LINEバッジ */
#g-nav ul.menu > li:nth-child(1) > a::before,
#g-nav .dream-menu-line > a::before {
    width: 58px !important;
    height: 38px !important;

    margin-right: 16px !important;

    border-radius: 9px !important;

    font-size: 13px !important;

    box-shadow:
        0 3px 0 rgba(0,0,0,0.08),
        0 4px 10px rgba(0,0,0,0.14) !important;
}


/* CTA文言 */
#g-nav ul.menu > li:nth-child(1) > a::after,
#g-nav .dream-menu-line > a::after {
    content: "▶︎ LINE追加はこちら ◀︎" !important;

    font-size: 27px !important;
    font-weight: 900 !important;
    letter-spacing: 0.055em !important;

    color: #ffffff !important;

    text-shadow:
        0 2px 0 rgba(0,0,0,0.18),
        0 0 8px rgba(255,255,255,0.22),
        0 0 14px rgba(255,255,255,0.10) !important;

    animation:
        dp-line-strong-text 1.35s ease-in-out infinite !important;
}


/* hover */
#g-nav ul.menu > li:nth-child(1) > a:hover,
#g-nav .dream-menu-line > a:hover {
    filter: brightness(1.06) saturate(1.08);

    transform: translateY(-3px) scale(1.018);

    box-shadow:
        0 0 0 2px #06c755,
        0 9px 0 #02732f,
        0 17px 34px rgba(6,199,85,0.40),
        0 0 34px rgba(6,199,85,0.30),
        inset 0 2px 0 rgba(255,255,255,0.50),
        inset 0 -3px 0 rgba(0,0,0,0.10) !important;
}


/* active */
#g-nav ul.menu > li:nth-child(1) > a:active,
#g-nav .dream-menu-line > a:active {
    transform: translateY(5px) scale(0.992);

    box-shadow:
        0 0 0 2px #06c755,
        0 2px 0 #02732f,
        0 6px 13px rgba(6,199,85,0.24),
        inset 0 2px 0 rgba(255,255,255,0.34) !important;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes dp-line-strong-pulse {
    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.022);
        filter: brightness(1.065);
    }
}


@keyframes dp-line-strong-shine {
    0% {
        background-position:
            145% 0,
            0 0;
    }

    42%,
    100% {
        background-position:
            -85% 0,
            0 0;
    }
}


@keyframes dp-line-strong-text {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.045);
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 768px) {

    #g-nav ul.menu > li:nth-child(1) > a,
    #g-nav .dream-menu-line > a {
        min-height: 76px !important;

        border-radius: 13px !important;

        padding: 13px 12px !important;

        box-shadow:
            0 0 0 2px #06c755,
            0 6px 0 #027d34,
            0 11px 22px rgba(6,199,85,0.30),
            0 0 22px rgba(6,199,85,0.18),
            inset 0 2px 0 rgba(255,255,255,0.40) !important;
    }

    #g-nav ul.menu > li:nth-child(1) > a::before,
    #g-nav .dream-menu-line > a::before {
        width: 50px !important;
        height: 33px !important;

        margin-right: 11px !important;

        font-size: 11px !important;
    }

    #g-nav ul.menu > li:nth-child(1) > a::after,
    #g-nav .dream-menu-line > a::after {
        font-size: 22px !important;
        letter-spacing: 0.025em !important;
    }
}


/* =========================================================
   SMALL SMARTPHONE
========================================================= */

@media screen and (max-width: 420px) {

    #g-nav ul.menu > li:nth-child(1) > a,
    #g-nav .dream-menu-line > a {
        min-height: 70px !important;

        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #g-nav ul.menu > li:nth-child(1) > a::before,
    #g-nav .dream-menu-line > a::before {
        width: 44px !important;
        height: 30px !important;

        margin-right: 7px !important;

        font-size: 10px !important;
    }

    #g-nav ul.menu > li:nth-child(1) > a::after,
    #g-nav .dream-menu-line > a::after {
        font-size: 18px !important;
        letter-spacing: 0 !important;
    }
}


/* OS側でアニメーションを抑制している場合 */
@media (prefers-reduced-motion: reduce) {

    #g-nav ul.menu > li:nth-child(1) > a,
    #g-nav .dream-menu-line > a,
    #g-nav ul.menu > li:nth-child(1) > a::after,
    #g-nav .dream-menu-line > a::after {
        animation: none !important;
    }
}

/* =========================================================
   ATTENTION NOTE - 注意事項ボタン下
   HTML変更なし / 4番目のナビ項目の直下に表示
========================================================= */

#g-nav ul.menu > li:nth-child(4),
#g-nav .dream-menu-notice {
    position: relative;
    overflow: visible !important;
}


/* 注意書き本体 */
#g-nav ul.menu > li:nth-child(4)::after,
#g-nav .dream-menu-notice::after {
    content: "※今すぐ当選金を受け取り手配したい方はこちらから連絡👆" !important;

    position: static !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    margin: 10px 0 0 !important;
    padding: 11px 14px !important;

    color: #a60000 !important;
    background: #fff6e8 !important;

    border: 1px solid #efcf91 !important;
    border-left: 4px solid #222222 !important;
    border-radius: 7px !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;

    text-align: center !important;

    transform: none !important;

    pointer-events: none;

    box-sizing: border-box !important;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.035);
}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 768px) {

    #g-nav ul.menu > li:nth-child(4)::after,
    #g-nav .dream-menu-notice::after {
        margin-top: 14px !important;
        padding: 10px 10px !important;

        font-size: 12px !important;
        line-height: 1.55 !important;

        text-align: left !important;
    }
}


/* =========================================================
   SMALL SMARTPHONE
========================================================= */

@media screen and (max-width: 420px) {

    #g-nav ul.menu > li:nth-child(4)::after,
    #g-nav .dream-menu-notice::after {
        margin-top: 8px !important;
        padding: 9px 9px !important;

        font-size: 11px !important;
        line-height: 1.55 !important;
    }
}

/* =========================================================
   LINE CTA - BRIGHT SOLID GREEN OVERRIDE
   グラデーションなし / 明るい単色グリーン
========================================================= */

#g-nav ul.menu > li:nth-child(1) > a,
#g-nav .dream-menu-line > a {
    background: #12d95f !important;
    background-image: none !important;
    background-size: auto !important;
    background-position: initial !important;

    border: 3px solid #ffffff !important;

    box-shadow:
        0 0 0 2px #0bc955,
        0 7px 0 #069540,
        0 13px 26px rgba(18, 217, 95, 0.28),
        0 0 18px rgba(18, 217, 95, 0.16),
        inset 0 2px 0 rgba(255,255,255,0.30),
        inset 0 -3px 0 rgba(0,0,0,0.08) !important;

    animation:
        dp-line-solid-pulse 1.9s ease-in-out infinite !important;
}


/* hover */
#g-nav ul.menu > li:nth-child(1) > a:hover,
#g-nav .dream-menu-line > a:hover {
    background: #0fca57 !important;
    background-image: none !important;

    filter: brightness(1.035);

    transform: translateY(-3px) scale(1.016);

    box-shadow:
        0 0 0 2px #0bc955,
        0 9px 0 #07873b,
        0 16px 30px rgba(18, 217, 95, 0.32),
        0 0 22px rgba(18, 217, 95, 0.19),
        inset 0 2px 0 rgba(255,255,255,0.34),
        inset 0 -3px 0 rgba(0,0,0,0.08) !important;
}


/* active */
#g-nav ul.menu > li:nth-child(1) > a:active,
#g-nav .dream-menu-line > a:active {
    background: #0fca57 !important;

    transform: translateY(5px) scale(0.992);

    box-shadow:
        0 0 0 2px #0bc955,
        0 2px 0 #07873b,
        0 5px 11px rgba(18, 217, 95, 0.22),
        inset 0 2px 0 rgba(255,255,255,0.24) !important;
}


/* 単色グリーン用の控えめな脈動 */
@keyframes dp-line-solid-pulse {
    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.016);
        filter: brightness(1.045);
    }
}


/* 文字アニメーションはそのまま維持 */
#g-nav ul.menu > li:nth-child(1) > a::after,
#g-nav .dream-menu-line > a::after {
    animation:
        dp-line-strong-text 1.35s ease-in-out infinite !important;
}


/* モバイルでも同じ単色 */
@media screen and (max-width: 768px) {

    #g-nav ul.menu > li:nth-child(1) > a,
    #g-nav .dream-menu-line > a {
        background: #12d95f !important;
        background-image: none !important;

        box-shadow:
            0 0 0 2px #0bc955,
            0 6px 0 #069540,
            0 10px 20px rgba(18, 217, 95, 0.26),
            0 0 14px rgba(18, 217, 95, 0.13),
            inset 0 2px 0 rgba(255,255,255,0.28) !important;
    }

    #g-nav ul.menu > li:nth-child(1) > a:hover,
    #g-nav .dream-menu-line > a:hover {
        background: #0fca57 !important;
        background-image: none !important;
    }
}


/* OS側でアニメーション抑制の場合 */
@media (prefers-reduced-motion: reduce) {

    #g-nav ul.menu > li:nth-child(1) > a,
    #g-nav .dream-menu-line > a,
    #g-nav ul.menu > li:nth-child(1) > a::after,
    #g-nav .dream-menu-line > a::after {
        animation: none !important;
    }
}

/* =========================================================
   NAV CTA COLOR BUTTONS
========================================================= */

/* 共通 */
#g-nav ul.menu > li:nth-child(2) > a,
#g-nav ul.menu > li:nth-child(3) > a,
#g-nav ul.menu > li:nth-child(4) > a,
#g-nav .dream-menu-inbox > a,
#g-nav .dream-menu-about > a,
#g-nav .dream-menu-notice > a {
    min-height: 76px !important;
    justify-content: center !important;
    border: 3px solid #ffffff !important;
    border-radius: 15px !important;
    padding: 13px 58px 13px 22px !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.035em !important;
    text-align: center !important;
    transform-origin: center;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

#g-nav ul.menu > li:nth-child(2) > a::after,
#g-nav ul.menu > li:nth-child(3) > a::after,
#g-nav ul.menu > li:nth-child(4) > a::after,
#g-nav .dream-menu-inbox > a::after,
#g-nav .dream-menu-about > a::after,
#g-nav .dream-menu-notice > a::after {
    top: 50% !important;
    right: 24px !important;
    width: 11px !important;
    height: 11px !important;
    border-width: 3px 3px 0 0 !important;
}

/* 受信ボックス：青 */
#g-nav ul.menu > li:nth-child(2) > a,
#g-nav .dream-menu-inbox > a {
    color: #ffffff !important;
    background: #2f80ed !important;
    background-image: none !important;
    border-left: 3px solid #ffffff !important;
    box-shadow:
        0 0 0 2px #2f80ed,
        0 7px 0 #1f5fae,
        0 13px 24px rgba(47,128,237,.24),
        0 0 15px rgba(47,128,237,.12),
        inset 0 2px 0 rgba(255,255,255,.26),
        inset 0 -3px 0 rgba(0,0,0,.07) !important;
}
#g-nav ul.menu > li:nth-child(2) > a::after,
#g-nav .dream-menu-inbox > a::after { border-color: #ffffff !important; }
#g-nav ul.menu > li:nth-child(2) > a:hover,
#g-nav .dream-menu-inbox > a:hover {
    color:#fff !important;
    background:#2674da !important;
    transform: translateY(-3px) scale(1.012);
    box-shadow:
        0 0 0 2px #2f80ed,
        0 9px 0 #1b559f,
        0 16px 28px rgba(47,128,237,.28),
        0 0 19px rgba(47,128,237,.14),
        inset 0 2px 0 rgba(255,255,255,.30) !important;
}

/* ドリプロとは：黄 */
#g-nav ul.menu > li:nth-child(3) > a,
#g-nav .dream-menu-about > a {
    color: #2a2400 !important;
    background: #ffd83d !important;
    background-image: none !important;
    border-left: 3px solid #ffffff !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
    box-shadow:
        0 0 0 2px #f4c400,
        0 7px 0 #c49b00,
        0 13px 24px rgba(244,196,0,.24),
        0 0 15px rgba(244,196,0,.12),
        inset 0 2px 0 rgba(255,255,255,.38),
        inset 0 -3px 0 rgba(0,0,0,.06) !important;
}
#g-nav ul.menu > li:nth-child(3) > a::after,
#g-nav .dream-menu-about > a::after { border-color: #3a3100 !important; }
#g-nav ul.menu > li:nth-child(3) > a:hover,
#g-nav .dream-menu-about > a:hover {
    color:#211d00 !important;
    background:#ffcf1f !important;
    transform: translateY(-3px) scale(1.012);
    box-shadow:
        0 0 0 2px #f4c400,
        0 9px 0 #b99000,
        0 16px 28px rgba(244,196,0,.28),
        0 0 19px rgba(244,196,0,.14),
        inset 0 2px 0 rgba(255,255,255,.42) !important;
}

/* ドリプロサポート：赤 */
#g-nav ul.menu > li:nth-child(4) > a,
#g-nav .dream-menu-notice > a {
    color: #ffffff !important;
    background: #ef3340 !important;
    background-image: none !important;
    border-left: 3px solid #ffffff !important;
    box-shadow:
        0 0 0 2px #ef3340,
        0 7px 0 #b91f2a,
        0 13px 24px rgba(239,51,64,.24),
        0 0 15px rgba(239,51,64,.12),
        inset 0 2px 0 rgba(255,255,255,.27),
        inset 0 -3px 0 rgba(0,0,0,.07) !important;
    font-size: 0 !important;
}
#g-nav ul.menu > li:nth-child(4) > a::before,
#g-nav .dream-menu-notice > a::before {
    content: "ドリプロサポートに連絡する" !important;
    position: static !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    letter-spacing: .025em !important;
    box-shadow: none !important;
    transform: none !important;
}
#g-nav ul.menu > li:nth-child(4) > a::after,
#g-nav .dream-menu-notice > a::after { border-color: #ffffff !important; }
#g-nav ul.menu > li:nth-child(4) > a:hover,
#g-nav .dream-menu-notice > a:hover {
    color:#fff !important;
    background:#dc2935 !important;
    transform: translateY(-3px) scale(1.012);
    box-shadow:
        0 0 0 2px #ef3340,
        0 9px 0 #a91c26,
        0 16px 28px rgba(239,51,64,.28),
        0 0 19px rgba(239,51,64,.14),
        inset 0 2px 0 rgba(255,255,255,.31) !important;
}

/* 押下 */
#g-nav ul.menu > li:nth-child(2) > a:active,
#g-nav ul.menu > li:nth-child(3) > a:active,
#g-nav ul.menu > li:nth-child(4) > a:active,
#g-nav .dream-menu-inbox > a:active,
#g-nav .dream-menu-about > a:active,
#g-nav .dream-menu-notice > a:active {
    transform: translateY(5px) scale(.994);
}

/* SP */
@media screen and (max-width: 768px) {
    #g-nav ul.menu > li:nth-child(2) > a,
    #g-nav ul.menu > li:nth-child(3) > a,
    #g-nav ul.menu > li:nth-child(4) > a,
    #g-nav .dream-menu-inbox > a,
    #g-nav .dream-menu-about > a,
    #g-nav .dream-menu-notice > a {
        min-height: 68px !important;
        border-radius: 13px !important;
        padding: 12px 48px 12px 16px !important;
        font-size: 18px !important;
    }
    #g-nav ul.menu > li:nth-child(4) > a::before,
    #g-nav .dream-menu-notice > a::before {
        font-size: 18px !important;
    }
    #g-nav ul.menu > li:nth-child(2) > a::after,
    #g-nav ul.menu > li:nth-child(3) > a::after,
    #g-nav ul.menu > li:nth-child(4) > a::after {
        right: 19px !important;
        width: 9px !important;
        height: 9px !important;
    }
}

@media screen and (max-width: 420px) {
    #g-nav ul.menu > li:nth-child(2) > a,
    #g-nav ul.menu > li:nth-child(3) > a,
    #g-nav ul.menu > li:nth-child(4) > a,
    #g-nav .dream-menu-inbox > a,
    #g-nav .dream-menu-about > a,
    #g-nav .dream-menu-notice > a {
        min-height: 64px !important;
        padding-left: 12px !important;
        padding-right: 42px !important;
        font-size: 16px !important;
    }
    #g-nav ul.menu > li:nth-child(4) > a::before,
    #g-nav .dream-menu-notice > a::before {
        font-size: 15px !important;
        letter-spacing: 0 !important;
    }
}


/* =========================================================
   MOBILE FIX
   - スマホ時のボタン間余白を拡大
   - 4番目ボタン文言崩れ修正
========================================================= */

@media screen and (max-width: 768px) {

    /* ボタン間の余白を少し広げる */
    #g-nav ul.menu {
        gap: 12px !important;
        padding-top: 12px !important;
        padding-bottom: 18px !important;
    }

    /* LINE下の注意書きと次ボタンの間隔 */
    #g-nav ul.menu > li:nth-child(1)::after,
    #g-nav .dream-menu-line::after {
        margin-top: 12px !important;
    }

    /* 4番目の注意書きとボタンの間隔 */
    #g-nav ul.menu > li:nth-child(4)::after,
    #g-nav .dream-menu-notice::after {
        margin-top: 12px !important;
    }

    /* 4番目の元テキストを再度しっかり隠す */
    #g-nav ul.menu > li:nth-child(4) > a,
    #g-nav .dream-menu-notice > a {
        font-size: 0 !important;
        letter-spacing: 0 !important;
        line-height: 1 !important;
    }

    /* 4番目の表示文言を整える */
    #g-nav ul.menu > li:nth-child(4) > a::before,
    #g-nav .dream-menu-notice > a::before {
        content: "ドリプロサポートに連絡する" !important;

        display: block !important;
        width: 100% !important;

        margin: 0 auto !important;
        padding: 0 18px !important;

        font-size: 16px !important;
        font-weight: 900 !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;

        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: anywhere !important;

        text-align: center !important;

        box-sizing: border-box !important;
    }
}


@media screen and (max-width: 420px) {

    /* 小さいスマホではさらに少し余白を確保 */
    #g-nav ul.menu {
        gap: 11px !important;
    }

    /* 4番目のボタン文言を少しだけ小さく */
    #g-nav ul.menu > li:nth-child(4) > a::before,
    #g-nav .dream-menu-notice > a::before {
        font-size: 14px !important;
        line-height: 1.35 !important;
        padding: 0 14px !important;
    }
}


/* =========================================================
   LARGE READABLE CTA OVERRIDE
   高齢ユーザー向け：
   - ボタン文字を大幅拡大
   - ボタン高も拡張
   - 補足文言も大きく
========================================================= */

/* DESKTOP / TABLET */
#g-nav ul.menu > li:nth-child(1) > a::after,
#g-nav .dream-menu-line > a::after {
    font-size: 31px !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
}

#g-nav ul.menu > li:nth-child(1) > a::before,
#g-nav .dream-menu-line > a::before {
    width: 62px !important;
    height: 40px !important;
    font-size: 14px !important;
}

#g-nav ul.menu > li:nth-child(1) > a,
#g-nav .dream-menu-line > a {
    min-height: 88px !important;
}

#g-nav ul.menu > li:nth-child(2) > a,
#g-nav ul.menu > li:nth-child(3) > a,
#g-nav .dream-menu-inbox > a,
#g-nav .dream-menu-about > a {
    min-height: 84px !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
}

#g-nav ul.menu > li:nth-child(4) > a,
#g-nav .dream-menu-notice > a {
    min-height: 88px !important;
}

#g-nav ul.menu > li:nth-child(4) > a::before,
#g-nav .dream-menu-notice > a::before {
    font-size: 25px !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.01em !important;
    white-space: normal !important;
    word-break: keep-all !important;
}

#g-nav ul.menu > li:nth-child(1)::after,
#g-nav .dream-menu-line::after,
#g-nav ul.menu > li:nth-child(4)::after,
#g-nav .dream-menu-notice::after {
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.55 !important;
    padding: 14px 16px !important;
    text-align: center !important;
}

/* SMARTPHONE */
@media screen and (max-width: 768px) {
    #g-nav ul.menu {
        width: calc(100% - 12px) !important;
        gap: 14px !important;
    }

    #g-nav ul.menu > li:nth-child(1) > a,
    #g-nav .dream-menu-line > a {
        min-height: 84px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #g-nav ul.menu > li:nth-child(1) > a::before,
    #g-nav .dream-menu-line > a::before {
        width: 48px !important;
        height: 32px !important;
        margin-right: 8px !important;
        font-size: 10px !important;
    }

    #g-nav ul.menu > li:nth-child(1) > a::after,
    #g-nav .dream-menu-line > a::after {
        font-size: clamp(20px, 6.2vw, 27px) !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
    }

    #g-nav ul.menu > li:nth-child(2) > a,
    #g-nav ul.menu > li:nth-child(3) > a,
    #g-nav .dream-menu-inbox > a,
    #g-nav .dream-menu-about > a {
        min-height: 78px !important;
        padding-left: 12px !important;
        padding-right: 46px !important;
        font-size: clamp(24px, 7.5vw, 31px) !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
    }

    #g-nav ul.menu > li:nth-child(4) > a,
    #g-nav .dream-menu-notice > a {
        min-height: 90px !important;
        padding-left: 12px !important;
        padding-right: 44px !important;
    }

    #g-nav ul.menu > li:nth-child(4) > a::before,
    #g-nav .dream-menu-notice > a::before {
        width: 100% !important;
        padding: 0 4px !important;
        font-size: clamp(19px, 5.9vw, 25px) !important;
        font-weight: 900 !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        text-align: center !important;
    }

    #g-nav ul.menu > li:nth-child(1)::after,
    #g-nav .dream-menu-line::after,
    #g-nav ul.menu > li:nth-child(4)::after,
    #g-nav .dream-menu-notice::after {
        margin-top: 12px !important;
        padding: 13px 12px !important;
        font-size: clamp(17px, 5vw, 21px) !important;
        font-weight: 800 !important;
        line-height: 1.55 !important;
        text-align: left !important;
    }
}

/* SMALL SMARTPHONE */
@media screen and (max-width: 420px) {
    #g-nav ul.menu {
        width: calc(100% - 8px) !important;
        gap: 13px !important;
    }

    #g-nav ul.menu > li:nth-child(1) > a,
    #g-nav .dream-menu-line > a {
        min-height: 82px !important;
    }

    #g-nav ul.menu > li:nth-child(1) > a::after,
    #g-nav .dream-menu-line > a::after {
        font-size: clamp(19px, 6vw, 24px) !important;
    }

    #g-nav ul.menu > li:nth-child(2) > a,
    #g-nav ul.menu > li:nth-child(3) > a,
    #g-nav .dream-menu-inbox > a,
    #g-nav .dream-menu-about > a {
        min-height: 76px !important;
        font-size: clamp(23px, 7.2vw, 29px) !important;
    }

    #g-nav ul.menu > li:nth-child(4) > a,
    #g-nav .dream-menu-notice > a {
        min-height: 92px !important;
    }

    #g-nav ul.menu > li:nth-child(4) > a::before,
    #g-nav .dream-menu-notice > a::before {
        font-size: clamp(18px, 5.6vw, 22px) !important;
        line-height: 1.3 !important;
    }

    #g-nav ul.menu > li:nth-child(1)::after,
    #g-nav .dream-menu-line::after,
    #g-nav ul.menu > li:nth-child(4)::after,
    #g-nav .dream-menu-notice::after {
        padding: 12px 10px !important;
        font-size: clamp(16px, 4.8vw, 19px) !important;
        line-height: 1.55 !important;
    }
}


/* =========================================================
   SHORT HEIGHT BUTTON OVERRIDE
   - 文字サイズは維持
   - ボタン縦幅だけをできる限り短くする
========================================================= */

/* PC / Tablet */
#g-nav ul.menu > li:nth-child(1) > a,
#g-nav .dream-menu-line > a {
    min-height: 74px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

#g-nav ul.menu > li:nth-child(2) > a,
#g-nav ul.menu > li:nth-child(3) > a,
#g-nav .dream-menu-inbox > a,
#g-nav .dream-menu-about > a {
    min-height: 68px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

#g-nav ul.menu > li:nth-child(4) > a,
#g-nav .dream-menu-notice > a {
    min-height: 72px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

#g-nav ul.menu > li:nth-child(4) > a::before,
#g-nav .dream-menu-notice > a::before {
    line-height: 1.2 !important;
}

/* Smartphone */
@media screen and (max-width: 768px) {

    #g-nav ul.menu > li:nth-child(1) > a,
    #g-nav .dream-menu-line > a {
        min-height: 68px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #g-nav ul.menu > li:nth-child(1) > a::after,
    #g-nav .dream-menu-line > a::after {
        line-height: 1.1 !important;
    }

    #g-nav ul.menu > li:nth-child(2) > a,
    #g-nav ul.menu > li:nth-child(3) > a,
    #g-nav .dream-menu-inbox > a,
    #g-nav .dream-menu-about > a {
        min-height: 62px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        padding-left: 12px !important;
        padding-right: 42px !important;
    }

    #g-nav ul.menu > li:nth-child(4) > a,
    #g-nav .dream-menu-notice > a {
        min-height: 70px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        padding-left: 10px !important;
        padding-right: 40px !important;
    }

    #g-nav ul.menu > li:nth-child(4) > a::before,
    #g-nav .dream-menu-notice > a::before {
        line-height: 1.15 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* Small Smartphone */
@media screen and (max-width: 420px) {

    #g-nav ul.menu > li:nth-child(1) > a,
    #g-nav .dream-menu-line > a {
        min-height: 64px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    #g-nav ul.menu > li:nth-child(2) > a,
    #g-nav ul.menu > li:nth-child(3) > a,
    #g-nav .dream-menu-inbox > a,
    #g-nav .dream-menu-about > a {
        min-height: 58px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        padding-left: 10px !important;
        padding-right: 38px !important;
    }

    #g-nav ul.menu > li:nth-child(4) > a,
    #g-nav .dream-menu-notice > a {
        min-height: 66px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        padding-left: 8px !important;
        padding-right: 36px !important;
    }

    #g-nav ul.menu > li:nth-child(4) > a::before,
    #g-nav .dream-menu-notice > a::before {
        line-height: 1.12 !important;
    }
}


/* =========================================================
   SHORT HEIGHT BUTTON OVERRIDE V2
   - 前回版からもう一段だけ短く
========================================================= */

/* ---------------------------------------------------------
   PC / Tablet
--------------------------------------------------------- */

#g-nav ul.menu > li:nth-child(1) > a,
#g-nav .dream-menu-line > a {
    min-height: 70px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

#g-nav ul.menu > li:nth-child(2) > a,
#g-nav ul.menu > li:nth-child(3) > a,
#g-nav .dream-menu-inbox > a,
#g-nav .dream-menu-about > a {
    min-height: 64px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

#g-nav ul.menu > li:nth-child(4) > a,
#g-nav .dream-menu-notice > a {
    min-height: 68px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

#g-nav ul.menu > li:nth-child(4) > a::before,
#g-nav .dream-menu-notice > a::before {
    line-height: 1.16 !important;
}

/* ---------------------------------------------------------
   Smartphone
--------------------------------------------------------- */

@media screen and (max-width: 768px) {

    /* LINE */
    #g-nav ul.menu > li:nth-child(1) > a,
    #g-nav .dream-menu-line > a {
        min-height: 64px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    #g-nav ul.menu > li:nth-child(1) > a::after,
    #g-nav .dream-menu-line > a::after {
        line-height: 1.08 !important;
    }

    /* 青・黄 */
    #g-nav ul.menu > li:nth-child(2) > a,
    #g-nav ul.menu > li:nth-child(3) > a,
    #g-nav .dream-menu-inbox > a,
    #g-nav .dream-menu-about > a {
        min-height: 58px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        padding-left: 10px !important;
        padding-right: 40px !important;
    }

    /* 赤 */
    #g-nav ul.menu > li:nth-child(4) > a,
    #g-nav .dream-menu-notice > a {
        min-height: 64px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        padding-left: 8px !important;
        padding-right: 38px !important;
    }

    #g-nav ul.menu > li:nth-child(4) > a::before,
    #g-nav .dream-menu-notice > a::before {
        line-height: 1.12 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* ---------------------------------------------------------
   Small Smartphone
--------------------------------------------------------- */

@media screen and (max-width: 420px) {

    /* LINE */
    #g-nav ul.menu > li:nth-child(1) > a,
    #g-nav .dream-menu-line > a {
        min-height: 60px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    /* 青・黄 */
    #g-nav ul.menu > li:nth-child(2) > a,
    #g-nav ul.menu > li:nth-child(3) > a,
    #g-nav .dream-menu-inbox > a,
    #g-nav .dream-menu-about > a {
        min-height: 54px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        padding-left: 9px !important;
        padding-right: 36px !important;
    }

    /* 赤 */
    #g-nav ul.menu > li:nth-child(4) > a,
    #g-nav .dream-menu-notice > a {
        min-height: 62px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        padding-left: 7px !important;
        padding-right: 34px !important;
    }

    #g-nav ul.menu > li:nth-child(4) > a::before,
    #g-nav .dream-menu-notice > a::before {
        line-height: 1.1 !important;
    }
}


/* =========================================================
   NOTICE COMPACT OVERRIDE
   LINE下 / サポート下の注意書きを少し小さく・低く
========================================================= */

#g-nav ul.menu > li:nth-child(1)::after,
#g-nav .dream-menu-line::after,
#g-nav ul.menu > li:nth-child(4)::after,
#g-nav .dream-menu-notice::after {
    margin-top: 10px !important;
    padding: 9px 12px !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}

@media screen and (max-width: 768px) {
    #g-nav ul.menu > li:nth-child(1)::after,
    #g-nav .dream-menu-line::after,
    #g-nav ul.menu > li:nth-child(4)::after,
    #g-nav .dream-menu-notice::after {
        margin-top: 9px !important;
        padding: 8px 10px !important;
        font-size: clamp(15px, 4.4vw, 18px) !important;
        line-height: 1.4 !important;
    }
}

@media screen and (max-width: 420px) {
    #g-nav ul.menu > li:nth-child(1)::after,
    #g-nav .dream-menu-line::after,
    #g-nav ul.menu > li:nth-child(4)::after,
    #g-nav .dream-menu-notice::after {
        margin-top: 8px !important;
        padding: 7px 9px !important;
        font-size: clamp(14px, 4.2vw, 16px) !important;
        line-height: 1.38 !important;
    }
}