@charset "utf-8";
/* CSS Document */

/* bootstrap custum */
    .navbar-toggler { border: 0; }
    .navbar { --bs-navbar-toggler-focus-width: 0; }
    .navbar-toggler .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(37,145,57,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    }
    .navbar-toggler:hover, .navbar-toggler:focus { text-decoration: none; }
    #global-nav a:hover, #global-nav a:focus { text-decoration: none; }
    .dropdown-menu { margin: 0; padding: 0; border-radius: 0; }
    .dropdown-item.active, .dropdown-item:active {
        background-color: #999;
    }
    .dropdown-item { padding-top: .5rem; padding-bottom: .5rem; }
    .dropdown-item:last-child { margin-bottom: 2px; }
    .btn-order, .btn-select, .btn-admit, .btn-prev, .btn-next, .btn-quit, .btn-open, .btn-dpe-close, .btn-dpe-green, .btn-dpe-blue, .btn-dpe-red, .btn-dpe-brown {
        background-image: -webkit-linear-gradient(transparent 0%,rgba(255,255,255,.3) 50%,transparent 50%,rgba(0,0,0,.1) 100%);
        background-image:         linear-gradient(transparent 0%,rgba(255,255,255,.3) 50%,transparent 50%,rgba(0,0,0,.1) 100%);
        box-shadow: 0 2px 2px 0 rgba(255,255,255,.2) inset,0 2px 10px 0 rgba(255,255,255,.5) inset,0 -2px 2px 0 rgba(0,0,0,.1) inset;
    }
    .badge {
        margin-top: 1px;
        vertical-align: top;
    }
    .card { border: none!important; }
    .list-group { box-shadow: 0 1px 6px rgba(0, 0, 0, .2); }
    .list-group-item { 
        border-left: none!important;
        border-right: none!important;
    }
    .list-group-item:first-child {
        border-top: none!important;
    }
    .list-group-item:last-child {
        border-bottom: none!important;
    }
    .list-group-item + .list-group-item { border-top: #dee2e6!important; }
    .card .list-group { box-shadow: none; }
    .card .list-group-item { 
        border-left: 1px solid #dee2e6!important;
        border-right: 1px solid #dee2e6!important;
    }
    .card .list-group-item:first-child {
        border-top: 1px solid #dee2e6!important;
    }
    .card .list-group-item:last-child {
        border-bottom: 1px solid #dee2e6!important;
    }

    
/* --end--bootstrap custom */

    body {background-color: #f3f3f3;}
    .wrapper { margin: 0 auto; max-width: 1172px; background-color: #fbfbfb; box-shadow: 0 1px 6px rgba(0,0,0,.2); }
    #global-nav {
        backdrop-filter: saturate(150%) blur(12px);
        background-color: rgba(255,255,255,0.85);
        box-shadow: 0 1px 6px rgba(0,0,0,.2);
    }
    .alink {
        color: #033694;
        text-decoration: none;
        background-color: rgba(0,0,0,0);
    }
    .alink:hover {
        color: #022462;
        text-decoration: underline;
    }
    #first-notice {
        background: linear-gradient(#fefefe, 90%, #dedede);
    }
    #first-notice a {
        background: none;
        text-decoration: none;
    }
    #first-notice a:hover { text-decoration: underline; }
    ul.annotation {
        padding-left: 0;
        list-style: none;
    }
    ul.annotation li {
        position: relative;
        padding-left: 1.5rem;
    }
    ul.annotation li:before{
        content: "※";
        position: absolute;
        left: 0;
    }
    ol.annotation {
        padding-left: 0;
        list-style: none;
    }
    ol.annotation li {
        position: relative;
        padding-left: 2.5rem;
    }
    ol.annotation li:before{
        content: "※" attr(data-number);
        position: absolute;
        left: 0;
    }
    ul.bullet-points {
        padding-left: 0;
        list-style: none;
    }
    ul.bullet-points li {
        position: relative;
        padding-left: 1.5rem;
    }
    ul.bullet-points li:before{
        content: "・";
        position: absolute;
        left: 0;
    }
    li.bracket:first-letter { margin-left: -.5rem!important; } /* liタグの最初の文字がかぎ括弧の時に使う */
    footer {
        color: #fff; background-color: #404040;
    }
    footer .btn-link { color: #fff; text-decoration:none; }
    footer .btn-link:hover { color: #fff; text-decoration:underline; }
    footer .btn:active { color: #fff!important; text-decoration:underline; }
    footer .mark-footer-copy {
        margin-right: 3px;
        margin-left: 3px;
        font-family: Arial;
        font-size: 1.2em;
        vertical-align: middle;
    }
    #notice h1 { 
        padding: 3px 0 4px;
        margin: 0 auto;
        width: 120px;
        font-size: 86%;
        line-height: 1.1;
        color: #fff;
        border-radius: 8px;
        background-color: #f95959;
    }
    #notice a { text-decoration: none; }
    #notice a:hover { text-decoration: underline; }
    #news a { text-decoration: none; }
    #news a:hover { text-decoration: underline; }
    .breadcrumb-item a { text-decoration: none; }
    .breadcrumb-item a:hover { text-decoration: underline; }

@media (min-width: 768px) {
    a {
        color: #111;
    }
    a:hover {
        color: #111;
    }
    #first-notice {
        background: none;
    }
    #first-notice a {
        padding: 3px 20px 4px;
        line-height: 1.1;
        border-radius: 20px;
        background-color: #def7ff;
        background-image: -webkit-linear-gradient(transparent 0%,rgba(255,255,255,.3) 50%,transparent 50%,rgba(0,0,0,.1) 100%);
        background-image:         linear-gradient(transparent 0%,rgba(255,255,255,.3) 50%,transparent 50%,rgba(0,0,0,.1) 100%);
        box-shadow: 0 2px 2px 0 rgba(255,255,255,.2) inset,0 2px 10px 0 rgba(255,255,255,.5) inset,0 -2px 2px 0 rgba(0,0,0,.1) inset;
        text-decoration: none;
    }
    #first-notice a:hover {
        filter: brightness(96%);
        text-decoration: none;
}
}

    #navbarServiceMenu > ul > li > a { padding-left: 1rem; color: #252525; background-color: #eee; letter-spacing: 1px; font-size: 1rem; }
    #navbarServiceMenu > ul > li > a:hover { color: #fff; background-color: #999; }
    #navbarServiceMenu > ul > li.nav-item.active > a { color: #000; background-color: #fdd538; }

@media (min-width: 992px) {
    #navbarServiceMenu > ul > li > a { padding: 0 .75rem; color: #252525; letter-spacing: 1px; }
    #navbarServiceMenu > ul > li > a { color: #252525; background-color: rgba(255,255,255,0.7); letter-spacing: 1px; font-size: .9rem; }
    #navbarServiceMenu > ul > li:nth-child(1) > a { border-color: #449d44; border-style: solid; border-width: 0px 0px 4px 0px; }
    #navbarServiceMenu > ul > li:nth-child(2) > a { border-color: #1c469c; border-style: solid; border-width: 0px 0px 4px 0px; }
    #navbarServiceMenu > ul > li:nth-child(3) > a { border-color: #e71418; border-style: solid; border-width: 0px 0px 4px 0px; }
    #navbarServiceMenu > ul > li:nth-child(4) > a { border-color: #fdd538; border-style: solid; border-width: 0px 0px 4px 0px; }
    #navbarServiceMenu > ul > li:nth-child(6) > a { border-color: #7c4226; border-style: solid; border-width: 0px 0px 4px 0px; }
    #navbarServiceMenu > ul > li.nav-item.active > a { color: #000; background-color:#fdd538; }
}
@media (min-width: 992px) {
    #navbarServiceMenu > ul > li > a { font-size: 1rem; }
}


@media (max-width: 992px) {
    .btn-admit {
        order: -1 !important;
    }
    .btn-next {
        order: -1 !important;
    }
}

/* =========================================================
   DPE TOP (MAIN FULL REWRITE) - POP & FUN
   角丸: 3px / 影: 0 1px 6px rgba(0,0,0,.2) / カードborderなし
   ========================================================= */
:root{
    --dpe-radius: 3px;
    --dpe-shadow: 0 1px 6px rgba(0,0,0,.2);

    --ink: #222;
    --muted: rgba(0,0,0,.65);
    --line: rgba(0,0,0,.10);

    --accent: #259139; /* 基本アクセント */
    --accent2: #ff4fa3; /* ポップ */
    --accent3: #ffb200; /* もう一色 */

    --bg: #fbfbfb;
    --panel: #ffffff;
    --soft: #f3f3f3;
}

/* 見出し（既存の.titleと共存） */
.dpe-h{
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 900;
    letter-spacing: .02em;
    color: var(--ink);
}
.dpe-kicker{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.35rem .6rem;
    border-radius: 999px;
    background: rgba(222,247,255,.95);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
    font-weight: 900;
    letter-spacing: .06em;
    color: #0b2a3a;
}

/* ボタン（既存btn群と独立。Bootstrap .btn を上書きしない） */
.dpe-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    text-decoration:none;
    border-radius: var(--dpe-radius);
    padding:.85rem 1rem;
    font-weight: 900;
    letter-spacing:.03em;
    border: 1px solid var(--line);
    box-shadow: 0 2px 2px 0 rgba(255,255,255,.2) inset,0 2px 10px 0 rgba(255,255,255,.5) inset,0 -2px 2px 0 rgba(0,0,0,.1) inset;
    transition: transform .14s ease, filter .14s ease;
    user-select: none;
}
.dpe-btn:hover{ transform: translateY(-1px); filter: brightness(98%); }
.dpe-btn:active{ transform: translateY(0px); }

.dpe-btn-primary{
    background: linear-gradient(#39c36a, #259139);
    color: #fff;
    border-color: rgba(0,0,0,.08);
}
.dpe-btn-ghost{
    background: rgba(255,255,255,.85);
    color: var(--ink);
}
.dpe-btn-pink{
    background: linear-gradient(#ff74bd, #ff4fa3);
    color:#fff;
    border-color: rgba(0,0,0,.08);
}
.dpe-btn-gold{
    background: linear-gradient(#ffd36b, #ffb200);
    color:#2a1c00;
    border-color: rgba(0,0,0,.08);
}

/* ダミー画像（灰色） */
.dpe-ph{
    border-radius: var(--dpe-radius);
    box-shadow: var(--dpe-shadow);
    background:
        linear-gradient(120deg, #e9e9e9, #dcdcdc 45%, #eeeeee);
    border: 1px solid rgba(0,0,0,.06);
    position: relative;
    overflow: hidden;
}
.dpe-ph::after{
    content:"";
    position:absolute;
    inset:0;
    background-image: radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px);
    background-size: 14px 14px;
    opacity: .22;
}
.dpe-ph .dpe-ph-label{
    position:absolute;
    left:.75rem;
    bottom:.65rem;
    z-index: 1;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.35rem .6rem;
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 1px 6px rgba(0,0,0,.18);
    font-weight: 900;
    letter-spacing:.03em;
    color: var(--ink);
}

/* =========================================================
   HERO
   ========================================================= */
#dpe-hero{
    margin-top: .75rem;
}
#dpe-hero .hero-shell{
    border-radius: var(--dpe-radius);
    box-shadow: var(--dpe-shadow);
    background:
        radial-gradient(circle at 12% 18%, rgba(255,79,163,.14), transparent 46%),
        radial-gradient(circle at 92% 22%, rgba(255,178,0,.16), transparent 46%),
        radial-gradient(circle at 20% 88%, rgba(37,145,57,.12), transparent 46%),
        linear-gradient(#ffffff, #f7fbff);
    overflow:hidden;
    position: relative;
}
#dpe-hero .hero-shell::before{
    content:"";
    position:absolute;
    inset:0;
    background-image: radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px);
    background-size: 16px 16px;
    opacity:.20;
    pointer-events:none;
}
#dpe-hero .hero-inner{
    position: relative;
    padding: 1.25rem;
}
@media (min-width: 992px){
    #dpe-hero .hero-inner{ padding: 1.75rem; }
}
#dpe-hero .hero-lead{
    color: var(--muted);
    line-height: 1.7;
    margin: .6rem 0 1rem;
}
#dpe-hero .hero-points{
    list-style:none;
    padding-left:0;
    margin: 0;
    display:grid;
    gap:.35rem;
    color: var(--muted);
}
#dpe-hero .hero-points strong{ color: var(--ink); font-weight: 900; }

/* 浮遊カード */
#dpe-hero .float-card{
    border-radius: var(--dpe-radius);
    box-shadow: var(--dpe-shadow);
    background: rgba(255,255,255,.92);
    padding: .75rem;
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    width: min(18rem, 92%);
}
#dpe-hero .float-title{
    font-weight: 900;
    margin-bottom: .4rem;
}
#dpe-hero .float-tags{
    display:flex;
    flex-wrap:wrap;
    gap:.35rem;
}
#dpe-hero .float-tags span{
    display:inline-block;
    padding:.25rem .5rem;
    border-radius:999px;
    background:#f3f3f3;
    font-size:.85rem;
}

/* =========================================================
   QUICK ACTIONS（3つの導線）
   ========================================================= */
#dpe-quick{
    margin-top: .75rem;
}
#dpe-quick .quick-card{
    border-radius: var(--dpe-radius);
    box-shadow: var(--dpe-shadow);
    background: var(--panel);
    padding: 1rem;
    height: 100%;
}
#dpe-quick .quick-title{
    font-weight: 900;
    margin-bottom: .25rem;
}
#dpe-quick .quick-desc{
    color: var(--muted);
    margin-bottom: .75rem;
}

/* =========================================================
   SERVICES（増えても崩れないカードグリッド）
   ========================================================= */
#dpe-services{
    margin-top: 1rem;
    padding-top: .25rem;
}
#dpe-services .svc-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}
#dpe-services .svc-sub{
    color: var(--muted);
    margin: 0;
}
#dpe-services .svc-card{
    border-radius: var(--dpe-radius);
    box-shadow: var(--dpe-shadow);
    background: var(--panel);
    overflow:hidden;
    height: 100%;
    transition: transform .14s ease;
    position: relative;
}
#dpe-services .svc-card:hover{ transform: translateY(-3px); }

#dpe-services .svc-bar{
    height: 8px;
    background: var(--accent);
}
#dpe-services .svc-body{
    padding: .9rem;
}
#dpe-services .svc-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    margin-bottom: .35rem;
}
#dpe-services .svc-name{
    font-weight: 900;
    letter-spacing:.02em;
    margin: 0;
}
#dpe-services .svc-badge{
    border-radius: 999px;
    padding: .28rem .55rem;
    font-weight: 900;
    font-size: .82rem;
    background:#f3f3f3;
}
#dpe-services .svc-desc{
    color: var(--muted);
    margin: .35rem 0 .75rem;
    line-height: 1.6;
}
#dpe-services .svc-actions{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
}
#dpe-services .svc-actions .dpe-btn{
    padding: .65rem .8rem;
}

/* サービス色（クラス追加するだけ） */
.svc-green .svc-bar{ background: var(--accent); }
.svc-blue  .svc-bar{ background: #1c469c; }
.svc-red   .svc-bar{ background: #e71418; }
.svc-brown .svc-bar{ background: #7a4a2a; }
.svc-pink  .svc-bar{ background: var(--accent2); }
.svc-gold  .svc-bar{ background: var(--accent3); }

/* =========================================================
   NEWS（カード枠＋リスト整理）
   ========================================================= */
#dpe-news{
    margin-top: 1rem;
    padding-top: .25rem;
}
#dpe-news .news-shell{
    border-radius: var(--dpe-radius);
    box-shadow: var(--dpe-shadow);
    background: var(--panel);
    overflow:hidden;
}
#dpe-news .news-head{
    padding: .9rem 1rem;
    background: linear-gradient(#fefefe, #f3f3f3);
}
#dpe-news .news-head p{
    margin: .25rem 0 0;
    color: var(--muted);
}
#dpe-news .news-tools{
    display:flex;
    justify-content:flex-end;
    padding: .6rem 1rem 0;
}
#dpe-news .list-group{ box-shadow:none; }
#dpe-news .list-group-item{
    border-left:none !important;
    border-right:none !important;
}

/* =========================================================
   DPE TOP - SIMPLE COMPETITOR STYLE (MAKE GRID)
   ========================================================= */
:root{
    --dpe-radius: 3px;
    --dpe-shadow: 0 1px 6px rgba(0,0,0,.2);
    --ink: #222;
    --muted: rgba(0,0,0,.65);
    --line: rgba(0,0,0,.10);
    --bg: #fbfbfb;
    --panel: #fff;

    --accent: #259139;
}

/* セクション全体 */
#dpe-make{
    padding: 2.25rem 0 1.5rem;
}

/* 左側テキスト */
#dpe-make .make-title{
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 900;
    letter-spacing: .03em;
    font-size: 2.2rem;
    margin-bottom: .6rem;
    color: var(--ink);
}
#dpe-make .make-lead{
    color: var(--muted);
    line-height: 1.9;
    margin: 0;
}

/* グリッド */
#dpe-make .make-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 991.98px){
    #dpe-make .make-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px){
    #dpe-make .make-grid{ grid-template-columns: 1fr; }
}

/* カード */
#dpe-make .make-card{
    background: var(--panel);
    border-radius: var(--dpe-radius);
    box-shadow: var(--dpe-shadow);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .14s ease, filter .14s ease;
    position: relative;
}
#dpe-make .make-card:hover{
    transform: translateY(-3px);
    filter: brightness(99%);
}

/* 画像（灰ダミー） */
#dpe-make .make-img{
    position: relative;
    background: linear-gradient(120deg, #e9e9e9, #dcdcdc 45%, #eeeeee);
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
#dpe-make .make-img::after{
    content:"";
    position:absolute;
    inset:0;
    background-image: radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px);
    background-size: 14px 14px;
    opacity: .22;
}

/* 中身 */
#dpe-make .make-body{
    padding: .95rem .95rem 1.05rem;
    text-align: center;
}
#dpe-make .make-name{
    font-weight: 900;
    letter-spacing: .03em;
    margin: .1rem 0 .4rem;
}
#dpe-make .make-desc{
    margin: 0;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.6;
}

/* ラベル（キャンペーン中 / NEW） */
#dpe-make .make-tag{
    position:absolute;
    left:.6rem;
    top:.6rem;
    z-index: 2;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: .25rem .55rem;
    border-radius: 2px;
    font-weight: 900;
    font-size: .82rem;
    letter-spacing: .04em;
    color: #fff;
    background: #000;
}
#dpe-make .make-badge-new{
    position:absolute;
    right:.55rem;
    top:.55rem;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight: 900;
    font-size: .78rem;
    letter-spacing: .03em;
    color: #fff;
    background: #e14b3a;
    box-shadow: var(--dpe-shadow);
}

/* プレミアム（ガラスフォト）を目立たせる：2カラム分使う */
#dpe-make .make-card.featured{
    grid-column: span 2;
}
@media (max-width: 991.98px){
    #dpe-make .make-card.featured{
        grid-column: auto;
    }
}
#dpe-make .make-card.featured .make-img{
    aspect-ratio: 16 / 9;
}
#dpe-make .make-card.featured .make-body{
    text-align: left;
}
#dpe-make .make-card.featured .make-name{
    font-size: 1.15rem;
}

/* 画像内の「プレミアムライン」を右下に配置 */
#dpe-make .make-premium{
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    z-index: 2;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: rgba(255,178,0,.92);
    color: #2a1c00;
    font-weight: 900;
    font-size: .82rem;
    letter-spacing: .03em;
    box-shadow: 0 1px 6px rgba(0,0,0,.18);
}
/* =========================================================
   FEATURES (DPE宅配便の特長)
   ========================================================= */
#dpe-features{
    padding: 1.75rem 0 2rem;
}
#dpe-features .feat-head{
    text-align: center;
    margin-bottom: 1.25rem;
}
#dpe-features .feat-title{
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 900;
    letter-spacing: .03em;
    font-size: 1.35rem;
    margin: 0 0 .35rem;
    color: var(--ink);
}
#dpe-features .feat-lead{
    margin: 0;
    color: var(--muted);
    line-height: 1.8;
}

/* 特長カード */
#dpe-features .feat-card{
    background: var(--panel);
    border-radius: var(--dpe-radius);
    box-shadow: var(--dpe-shadow);
    padding: 1rem;
    height: 100%;
}
#dpe-features .feat-card h3{
    font-weight: 900;
    letter-spacing: .02em;
    font-size: 1.05rem;
    margin: 0 0 .5rem;
}
#dpe-features .feat-card p{
    margin: 0;
    color: var(--muted);
    line-height: 1.75;
}

/* Googleフォトの小タグ */
#dpe-features .feat-pill{
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: #f3f3f3;
    font-weight: 900;
    font-size: .88rem;
    letter-spacing: .02em;
    margin-top: .75rem;
}

/* 会員メリット（番号つきリスト） */
#dpe-features .merits{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem 1rem;
    margin: .25rem 0 0;
    padding-left: 0;
    list-style: none;
}
@media (max-width: 991.98px){
    #dpe-features .merits{ grid-template-columns: 1fr; }
}
#dpe-features .merits li{
    position: relative;
    padding-left: 2.25rem;
    color: var(--muted);
    line-height: 1.7;
}
#dpe-features .merits li::before{
    content: attr(data-no);
    position: absolute;
    left: 0;
    top: .05rem;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: .85rem;
    color: #fff;
    background: var(--accent);
    box-shadow: 0 1px 6px rgba(0,0,0,.18);
}

/* “詳しくはこちら”リンク */
#dpe-features .feat-link{
    display: inline-block;
    margin-top: .75rem;
    text-decoration: none;
}
#dpe-features .feat-link:hover{
    text-decoration: underline;
}