/* ============================================================
   あたり帳 LP — Stylesheet
   Source: 20_marketing/lp/src/styles.css
   ============================================================ */

:root {
    --cream:      #FAF8F3;
    --cream-card: #F2EDE3;
    --navy:       #1A2B3C;
    --navy-mid:   rgba(26,43,60,0.55);
    --navy-faint: rgba(26,43,60,0.12);
    --red:        #8B3A2F;
    --red-dark:   #6B2D24;
    --rule:       rgba(26,43,60,0.18);
    --rule-dark:  rgba(26,43,60,0.35);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Noto Sans JP', sans-serif;
    background: var(--cream);
    color: var(--navy);
    -webkit-font-smoothing: antialiased;
}

.serif { font-family: 'Noto Serif JP', serif; }

/* ─── Animations ────────────────────────────────────── */
@keyframes fadeIn   { from { opacity:0 } to { opacity:1 } }
@keyframes slideL   { from { opacity:0; transform:translateX(-22px) } to { opacity:1; transform:translateX(0) } }
@keyframes slideR   { from { opacity:0; transform:translateX(22px)  } to { opacity:1; transform:translateX(0) } }
@keyframes slideU   { from { opacity:0; transform:translateY(14px)  } to { opacity:1; transform:translateY(0) } }

.aL { animation: slideL 0.85s cubic-bezier(.16,1,.3,1) both }
.aR { animation: slideR 0.85s cubic-bezier(.16,1,.3,1) both }
.aU { animation: slideU 0.75s cubic-bezier(.16,1,.3,1) both }
.aF { animation: fadeIn 0.7s ease both }

.d1{animation-delay:.08s} .d2{animation-delay:.18s} .d3{animation-delay:.28s}
.d4{animation-delay:.38s} .d5{animation-delay:.48s} .d6{animation-delay:.58s}
.d7{animation-delay:.68s} .d8{animation-delay:.78s}

/* ─── Masthead ──────────────────────────────────────── */
.masthead { border-bottom: 2px solid var(--navy); }

.mast-top {
    border-bottom: 1px solid var(--rule);
    padding: 9px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10.5px;
    color: var(--navy-mid);
    letter-spacing: 0.04em;
}

.mast-main {
    padding: 16px 60px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-logo {
    font-family: 'Noto Serif JP', serif;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--navy);
    text-decoration: none;
}
.site-logo em {
    font-style: normal;
    color: var(--red);
}

.mast-nav {
    display: flex;
    align-items: center;
    gap: 26px;
}
.mast-nav a {
    font-size: 12.5px;
    color: var(--navy);
    text-decoration: none;
    letter-spacing: 0.04em;
    opacity: .65;
    transition: opacity .2s;
}
.mast-nav a:hover { opacity: 1; }

/* ticket button */
.btn-ticket {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--navy);
    padding: 8px 16px;
    border: 1.5px solid var(--navy);
    text-decoration: none;
    position: relative;
    transition: background .2s, color .2s;
    display: inline-block;
    opacity: 1 !important;
}
.btn-ticket::after {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px dashed rgba(26,43,60,.28);
    pointer-events: none;
}
.btn-ticket:hover { background: var(--navy); color: var(--cream); }
.btn-ticket:hover::after { border-color: rgba(250,248,243,.25); }

/* ─── Hero wrapper ──────────────────────────────────── */
.hero-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 60px 80px;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 72px;
    align-items: start;
}

/* ─── Left: editorial copy ──────────────────────────── */
.kiji-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--red);
    margin-bottom: 20px;
}
.kiji-tag::before {
    content: '';
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--red);
}

.hero-hl {
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: -0.015em;
    color: var(--navy);
    padding-top: 18px;
    border-top: 2.5px solid var(--navy);
    margin-bottom: 10px;
}
.hero-hl .accent {
    color: var(--red);
}

.hero-sub {
    font-family: 'Noto Serif JP', serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--navy-mid);
    letter-spacing: 0.02em;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rule);
}

.hero-lead {
    font-size: 14.5px;
    line-height: 1.9;
    color: rgba(26,43,60,.72);
    margin-bottom: 30px;
    padding-left: 14px;
    border-left: 2px solid var(--rule-dark);
}

/* primary CTA */
.btn-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--red);
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 14px 26px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background .2s;
}
.btn-main:hover { background: var(--red-dark); }

.btn-sub {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    color: var(--navy);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.03em;
    padding: 13px 26px;
    text-decoration: none;
    border: 1.5px solid rgba(26,43,60,.45);
    transition: all .2s;
}
.btn-sub:hover { border-color: var(--navy); background: var(--navy); color: var(--cream); }

/* trust */
.trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 16px;
}
.trust-item {
    font-size: 11.5px;
    color: var(--navy-mid);
    display: flex;
    align-items: center;
    gap: 5px;
}
.trust-item::before {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    background: var(--red);
    border-radius: 50%;
    flex-shrink: 0;
}

/* stats band */
.stats-band {
    margin-top: 36px;
    border-top: 1px solid var(--rule-dark);
    border-bottom: 1px solid var(--rule-dark);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.stat-cell {
    padding: 18px 0;
    text-align: center;
    border-right: 1px solid var(--rule-dark);
}
.stat-cell:last-child { border-right: none; }
.stat-n {
    font-family: 'Noto Serif JP', serif;
    font-size: 28px;
    font-weight: 900;
    color: var(--navy);
    letter-spacing: -0.03em;
    line-height: 1;
}
.stat-u {
    font-size: 13px;
    font-weight: 400;
    color: var(--navy);
}
.stat-l {
    font-size: 10.5px;
    color: var(--navy-mid);
    margin-top: 5px;
    line-height: 1.4;
}

/* ─── Right: newsletter clipping ───────────────────── */
.clip-caption {
    font-family: 'Noto Serif JP', serif;
    font-size: 10.5px;
    font-style: italic;
    color: rgba(26,43,60,.38);
    text-align: right;
    margin-bottom: 9px;
    letter-spacing: 0.02em;
}

.clip {
    background: var(--cream-card);
    border: 1px solid #C8BDA9;
    box-shadow:
        3px 3px 0 #C4B89E,
        6px 6px 0 rgba(26,43,60,.06);
    position: relative;
}

/* SAMPLE stamp */
.stamp {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 56px;
    height: 56px;
    border: 2.5px solid var(--red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-14deg);
    opacity: .65;
    z-index: 2;
}
.stamp span {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--red);
    text-align: center;
    line-height: 1.3;
}

/* clip header */
.clip-hd {
    border-bottom: 2px solid var(--navy);
    padding: 15px 18px 12px;
}
.clip-hd-title {
    font-family: 'Noto Serif JP', serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .05em;
    color: var(--navy);
}
.clip-hd-meta {
    margin-top: 3px;
    display: flex;
    justify-content: space-between;
    font-size: 9.5px;
    color: var(--navy-mid);
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: .03em;
}

/* column headers */
.clip-cols {
    display: grid;
    grid-template-columns: 18px 1fr 88px;
    gap: 8px;
    padding: 6px 18px;
    background: rgba(26,43,60,.025);
    border-bottom: 1px solid rgba(26,43,60,.12);
}
.clip-cols span {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(26,43,60,.38);
    font-family: 'Noto Sans JP', sans-serif;
}

/* rows */
.clip-row {
    display: grid;
    grid-template-columns: 18px 1fr 88px;
    gap: 8px;
    align-items: center;
    padding: 9px 18px;
    border-bottom: 1px solid rgba(26,43,60,.07);
    transition: background .18s;
}
.clip-row:hover { background: rgba(26,43,60,.03); }
.cr-n  { font-size: 10px; color: rgba(26,43,60,.28); text-align:right; }
.cr-nm { font-family:'Noto Sans JP',sans-serif; font-size:12px; font-weight:500; color:var(--navy); }
.cr-lc { font-size:10.5px; color:rgba(26,43,60,.5); white-space:nowrap; }

/* blur zone */
.blur-shell { position:relative }
.blur-rows  { filter:blur(3.5px); pointer-events:none }
.blur-grad  {
    position:absolute; inset:0;
    background:linear-gradient(to bottom, rgba(242,237,227,0) 0%, rgba(242,237,227,.97) 78%);
    display:flex; flex-direction:column;
    align-items:center; justify-content:flex-end;
    padding-bottom:12px;
}
.blur-lbl {
    font-size:10.5px;
    color:rgba(26,43,60,.38);
    font-style:italic;
    font-family:'Noto Serif JP',serif;
}

/* clip footer */
.clip-ft {
    border-top: 2px solid var(--navy);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(26,43,60,.02);
}
.clip-ft-price {
    font-family: 'Noto Serif JP', serif;
    font-size: 18px;
    font-weight: 900;
    color: var(--navy);
}
.clip-ft-label {
    font-size: 9.5px;
    color: var(--navy-mid);
    margin-bottom: 3px;
    font-family: 'Noto Sans JP', sans-serif;
}
.clip-ft-btn {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: var(--red);
    padding: 9px 15px;
    text-decoration: none;
    transition: background .2s;
}
.clip-ft-btn:hover { background: var(--red-dark); }

.clip-note {
    font-family: 'Noto Serif JP', serif;
    font-size: 9.5px;
    font-style: italic;
    color: rgba(26,43,60,.3);
    text-align: center;
    margin-top: 8px;
    letter-spacing: .02em;
}

/* ─── Responsive ────────────────────────────────────── */
@media (max-width: 1024px) {
    .mast-top, .mast-main { padding-left: 28px; padding-right: 28px; }
    .hero-wrap { grid-template-columns: 1fr; gap: 48px; padding: 44px 28px 64px; }
    .clip { max-width: 480px; }
}
@media (max-width: 640px) {
    .mast-nav a:not(:last-child) { display: none; }
    .stats-band { grid-template-columns: 1fr 1fr; }
    .stat-cell:nth-child(2) { border-right: none; }
    .stat-cell:nth-child(3) { grid-column: span 2; border-top: 1px solid var(--rule-dark); border-right: none; }
}

/* ═══ SCROLL REVEAL ═══════════════════════════════════ */
.reveal { opacity:0; transform:translateY(18px); transition: opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ═══ SHARED SECTION STYLES ═══════════════════════════ */
.sec { border-bottom: 1px solid var(--rule-dark); }
.sec-inner { max-width:1200px; margin:0 auto; padding:72px 60px; }
.sec-kiji {
    display:inline-flex; align-items:center; gap:8px;
    font-size:10.5px; font-weight:700; letter-spacing:.1em;
    color:var(--red); margin-bottom:16px; font-family:'Noto Sans JP',sans-serif;
}
.sec-kiji::before { content:''; display:block; width:16px; height:1.5px; background:var(--red); }
.sec-h2 {
    font-family:'Noto Serif JP',serif;
    font-size:clamp(20px,2.6vw,30px);
    font-weight:900; line-height:1.45;
    color:var(--navy); padding-top:14px;
    border-top:2px solid var(--navy);
    margin-top:10px;
}
.sec-rule { height:1px; background:var(--rule-dark); margin:28px 0 40px; }

/* ═══ SECTION 2 — 課題提起 ═══════════════════════════ */
.news-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--rule-dark);
}
.news-col {
    padding:28px 36px 28px 0;
    border-right:1px solid var(--rule-dark);
}
.news-col:first-child { padding-left:0; }
.news-col:last-child  { border-right:none; padding-right:0; }
.news-col:not(:first-child) { padding-left:36px; }
.news-tag {
    font-size:9.5px; font-weight:700; letter-spacing:.12em;
    color:var(--red); font-family:'Noto Sans JP',sans-serif;
    text-transform:uppercase; margin-bottom:14px;
}
.news-col-hl {
    font-family:'Noto Serif JP',serif; font-size:16px;
    font-weight:900; line-height:1.6; color:var(--navy);
    margin-bottom:12px; padding-bottom:12px;
    border-bottom:1px solid var(--rule);
}
.news-col-body { font-size:13px; line-height:1.9; color:rgba(26,43,60,.65); }

/* ═══ SECTION 3 — 理由 ════════════════════════════════ */
.sec-alt { background:var(--cream-card); }
.reason-item {
    display:grid; grid-template-columns:56px 1fr;
    gap:28px; align-items:start;
    padding:32px 0; border-bottom:1px solid var(--rule);
}
.reason-item:last-child { border-bottom:none; }
.reason-num {
    font-family:'Noto Serif JP',serif; font-size:40px;
    font-weight:900; color:var(--navy); opacity:.1;
    line-height:1; text-align:right; padding-top:3px;
}
.reason-hl {
    font-family:'Noto Serif JP',serif; font-size:18px;
    font-weight:900; line-height:1.5; color:var(--navy);
    margin-bottom:8px;
}
.reason-body { font-size:13.5px; line-height:1.9; color:rgba(26,43,60,.65); }

/* ═══ SECTION 4 — サンプル表 ═════════════════════════ */
.tbl-caption {
    font-family:'Noto Serif JP',serif; font-style:italic;
    font-size:11.5px; color:var(--navy-mid);
    margin-bottom:12px; letter-spacing:.03em;
}
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table thead th {
    font-size:9.5px; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color:rgba(26,43,60,.4);
    padding:8px 14px; border-bottom:2px solid var(--navy);
    text-align:left; background:rgba(26,43,60,.02);
}
.data-table thead th.th-num { width:36px; text-align:right; }
.data-table tbody tr { border-bottom:1px solid rgba(26,43,60,.07); transition:background .15s; }
.data-table tbody tr:hover { background:rgba(26,43,60,.025); }
.data-table td { padding:9px 14px; color:var(--navy); vertical-align:middle; }
.data-table .td-num { text-align:right; color:rgba(26,43,60,.28); font-size:11px; }
.data-table .td-name { font-weight:500; }

/* ═══ SECTION 5 — 比較表 ════════════════════════════ */
.cmp-wrap { max-width:780px; margin:0 auto; border:1px solid var(--rule-dark); }
.cmp-table { width:100%; border-collapse:collapse; }
.cmp-table thead th {
    padding:14px 20px; font-family:'Noto Serif JP',serif;
    font-weight:900; font-size:14px;
    border-bottom:2px solid var(--navy); text-align:center;
}
.cmp-table thead th.th-feat { text-align:left; border-right:1px solid var(--rule-dark); width:46%; }
.cmp-table thead th.th-sample { border-right:1px solid var(--rule-dark); color:rgba(26,43,60,.55); }
.cmp-table thead th.th-full { color:var(--red); }
.cmp-table tbody td {
    padding:12px 20px; border-bottom:1px solid var(--rule);
    vertical-align:middle; font-size:13.5px;
}
.cmp-table tbody td.td-feat { border-right:1px solid var(--rule-dark); font-weight:500; color:rgba(26,43,60,.72); }
.cmp-table tbody td.td-sample { border-right:1px solid var(--rule-dark); text-align:center; }
.cmp-table tbody td.td-full { text-align:center; font-weight:500; }
.mark-y { color:var(--red); font-size:17px; font-weight:700; }
.mark-n { color:rgba(26,43,60,.22); font-size:15px; }
.mark-p { color:rgba(26,43,60,.45); font-size:13px; }

/* ═══ SECTION 6 — 料金 ══════════════════════════════ */
.pricing-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:20px; margin-top:40px;
}
.tkt { border:1.5px solid var(--navy); position:relative; }
.tkt.rec { border-color:var(--red); }
.tkt-in {
    border:1px dashed rgba(26,43,60,.2); margin:4px;
    padding:28px 22px 22px;
    display:flex; flex-direction:column; height:calc(100% - 8px);
}
.tkt.rec .tkt-in { border-color:rgba(139,58,47,.2); }
.rec-badge {
    position:absolute; top:-11px; left:50%; transform:translateX(-50%);
    background:var(--red); color:#fff;
    font-family:'Noto Sans JP',sans-serif; font-size:9.5px;
    font-weight:700; letter-spacing:.08em; padding:3px 14px;
    white-space:nowrap;
}
.tkt-plan {
    font-size:10px; font-weight:700; letter-spacing:.1em;
    color:var(--navy-mid); font-family:'Noto Sans JP',sans-serif;
    text-transform:uppercase; margin-bottom:10px;
}
.tkt-price {
    font-family:'Noto Serif JP',serif; font-size:32px;
    font-weight:900; color:var(--navy); line-height:1;
    letter-spacing:-.02em; margin-bottom:3px;
}
.tkt-unit { font-size:12px; color:var(--navy-mid); font-family:'Noto Sans JP',sans-serif; }
.tkt-sep { height:1px; background:var(--rule); margin:14px 0; }
.tkt-desc { font-size:12.5px; color:rgba(26,43,60,.6); margin-bottom:16px; line-height:1.7; }
.tkt-feats { list-style:none; flex:1; margin-bottom:22px; }
.tkt-feats li {
    font-size:12px; color:rgba(26,43,60,.68);
    padding:5px 0; border-bottom:1px dashed rgba(26,43,60,.1);
    display:flex; align-items:flex-start; gap:6px; line-height:1.5;
}
.tkt-feats li::before { content:'—'; color:var(--red); flex-shrink:0; font-size:10px; margin-top:3px; }
.tkt-btn {
    display:block; text-align:center; padding:11px;
    font-family:'Noto Sans JP',sans-serif; font-size:13px;
    font-weight:700; letter-spacing:.04em; text-decoration:none;
    border:1.5px solid var(--navy); color:var(--navy); transition:all .2s;
}
.tkt-btn:hover { background:var(--navy); color:var(--cream); }
.tkt.rec .tkt-btn { background:var(--red); border-color:var(--red); color:#fff; }
.tkt.rec .tkt-btn:hover { background:var(--red-dark); border-color:var(--red-dark); }

/* ═══ SECTION 7 — FAQ ══════════════════════════════ */
.faq-item { border-bottom:1px solid var(--rule-dark); }
.faq-item:first-child { border-top:1px solid var(--rule-dark); }
.faq-q {
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:16px; padding:20px 0; cursor:pointer; user-select:none;
}
.faq-q-left { display:flex; align-items:flex-start; gap:12px; }
.faq-q-prefix {
    font-size:10.5px; font-weight:700; color:var(--red);
    letter-spacing:.06em; font-family:'Noto Sans JP',sans-serif;
    flex-shrink:0; padding-top:2px;
}
.faq-q-text {
    font-family:'Noto Serif JP',serif; font-size:15px;
    font-weight:700; color:var(--navy); line-height:1.55;
}
.faq-icon {
    width:20px; height:20px; border:1.5px solid rgba(26,43,60,.4);
    border-radius:50%; display:flex; align-items:center;
    justify-content:center; flex-shrink:0; margin-top:2px;
    transition:transform .3s, border-color .2s; font-size:13px;
    color:var(--navy); line-height:1;
}
.faq-item.open .faq-icon { transform:rotate(45deg); border-color:var(--red); }
.faq-a {
    display:none; padding:0 0 20px 34px;
    font-size:13.5px; line-height:1.9; color:rgba(26,43,60,.65);
    border-left:2px solid var(--rule-dark); margin-left:0;
}
.faq-item.open .faq-a { display:block; }

/* ═══ SECTION 8 — CTA ══════════════════════════════ */
.cta-sec {
    background:var(--cream-card);
    border-top:2px solid var(--navy);
    border-bottom:2px solid var(--navy);
    text-align:center;
}
.cta-inner { max-width:680px; margin:0 auto; padding:80px 40px; }
.cta-h2 {
    font-family:'Noto Serif JP',serif; font-size:clamp(20px,2.4vw,28px);
    font-weight:900; line-height:1.55; color:var(--navy); margin-bottom:8px;
}
.cta-lead { font-size:13.5px; color:var(--navy-mid); margin-bottom:40px; line-height:1.7; }
.seal-btn {
    display:inline-block; border:2px solid var(--navy);
    padding:4px; text-decoration:none; transition:all .2s; margin-bottom:24px;
}
.seal-btn:hover .seal-in { background:var(--navy); color:var(--cream); }
.seal-in {
    display:block; border:1px solid rgba(26,43,60,.3);
    padding:20px 52px;
    font-family:'Noto Serif JP',serif; font-size:18px;
    font-weight:900; color:var(--navy); line-height:1.55;
    letter-spacing:.04em; transition:all .2s;
}
.cta-trust {
    font-size:12px; color:rgba(26,43,60,.38);
    display:flex; align-items:center; justify-content:center;
    gap:14px; flex-wrap:wrap;
}
.cta-trust span::before { content:'— '; }

/* ═══ FOOTER ═══════════════════════════════════════ */
.footer {
    border-top:1px solid var(--rule-dark); padding:28px 60px;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:12px;
}
.footer-logo {
    font-family:'Noto Serif JP',serif; font-size:14px;
    font-weight:700; color:var(--navy);
}
.footer-logo em { font-style:normal; color:var(--red); }
.footer-copy { font-size:11px; color:rgba(26,43,60,.32); letter-spacing:.03em; }

/* ═══ RESPONSIVE ADDITIONS ════════════════════════ */
@media (max-width:1024px) {
    .sec-inner { padding:52px 28px; }
    .news-grid { grid-template-columns:1fr; }
    .news-col { border-right:none; padding:28px 0; border-bottom:1px solid var(--rule-dark); }
    .news-col:last-child { border-bottom:none; }
    .pricing-grid { grid-template-columns:1fr; max-width:400px; margin-left:auto; margin-right:auto; }
    .footer { padding:24px 28px; }
}
@media (max-width:640px) {
    .reason-item { grid-template-columns:1fr; gap:10px; }
    .reason-num { text-align:left; font-size:28px; }
    .cmp-wrap { overflow-x:auto; }
    .seal-in { padding:18px 28px; font-size:16px; }
}