@charset "UTF-8";
/* CSS Document */
/* あの日のラーメン｜ラーメン価格史 */
/* みんなの知識 ちょっと便利帳 */
/* C2026/07/26 */

/* ============================================================
   あの日のラーメン - scoped styles (prefix: .ramen-)
============================================================ */
.ramen-wrap{
    --ramen-bg: #FAF3E4;
    --ramen-border: #4A3222;
    --ramen-text: #2C2115;
    --ramen-heading: #3B2412;
    --ramen-sub: #7A6A54;
    --ramen-accent: #E0455C;
    --ramen-accent-dark: #B22F44;
    --ramen-gold: #E8A93B;
    --ramen-card-bg: #FFFFFF;

    font-family: system-ui,-apple-system,"Segoe UI",sans-serif;
    background: var(--ramen-bg);
    margin: 10px auto;
    padding: 0 10px;
    border: 2px solid var(--ramen-border);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(74, 50, 34, 0.18);
    color: var(--ramen-text);
    line-height: 1.9;
    font-size: 19px;
    text-align: left;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.ramen-wrap *{ box-sizing:border-box; }

.ramen-container{
    max-width:800px;
    margin:auto;
    padding: 22px 0 32px;
}

.ramen-header{
    text-align:left;
    padding: 6px 18px 4px;
}
.ramen-header h2{
    font-family: "Yu Mincho","Hiragino Mincho ProN",serif;
    font-size: clamp(23px, 4.5vw, 30px);
    margin: 0;
    letter-spacing: .04em;
    color: var(--ramen-heading);
	text-align: center;
}
.ramen-header p{
    margin:0;
    font-size:16px;
    color: var(--ramen-sub);
}
.ramen-subtitle{
    margin:5px 0 !important;
    font-size:16px !important;
    color: var(--ramen-accent-dark) !important;
	font-weight: bold !important;
    letter-spacing:.03em;
	text-align: center;
}

.ramen-form{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap: 16px 18px;
    margin: 22px 18px 0;
    padding: 20px;
    background: var(--ramen-card-bg);
    border: 1px solid #E4D8C4;
    border-radius: 8px;
}
.ramen-field{
    display:flex;
    flex-direction:column;
    gap:7px;
    flex: 1 1 200px;
    text-align:left;
}
.ramen-field-year{ flex: 0 1 220px; }
.ramen-field label{
    font-size:14px;
    color: var(--ramen-sub);
    font-weight:600;
}
.ramen-input{
    font-size:17px;
    padding:11px 12px;
    border:1px solid #D8CBB4;
    border-radius:6px;
    background:#FFFDFA;
    color: var(--ramen-text);
    line-height:1.4;
}
.ramen-input:focus{
    outline:none;
    border-color: var(--ramen-accent);
    box-shadow: 0 0 0 3px rgba(224,69,92,0.15);
}

.ramen-btns{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    flex: 0 1 auto;
}
.ramen-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size:16px;
    font-weight:600;
    padding:11px 20px;
    border-radius:6px;
    cursor:pointer;
    border:1px solid transparent;
    transition: transform .08s ease, opacity .15s ease, background-color .15s ease;
}
.ramen-btn:active{ transform: scale(0.97); }
.ramen-btn-primary{
    background: var(--ramen-accent);
    color:#fff;
}
.ramen-btn-primary:hover{ background: var(--ramen-accent-dark); }
.ramen-btn-ghost{
    background:#fff;
    color: var(--ramen-border);
    border-color:#D8CBB4;
}
.ramen-btn-ghost:hover{ border-color: var(--ramen-border); }

.ramen-result{
    margin: 22px 18px 0;
    padding: 24px;
    background: var(--ramen-card-bg);
    border: 1px solid #E4D8C4;
    border-radius: 8px;
}

.ramen-summary{ text-align:left; }
.ramen-summary-date{
    font-size:20px;
    color: var(--ramen-sub);
	font-weight: bold;
    letter-spacing:.04em;
    margin-bottom:8px;
	text-align: center;
}
.ramen-price-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin: 6px 0 6px;
}
.ramen-bowl{
    flex:0 0 auto;
    font-size:55px;
    line-height:1;
	margin: 10px 15px 0 0;
}
.ramen-price{
    font-family: "Yu Mincho","Hiragino Mincho ProN",serif;
    font-weight:700;
    font-size: clamp(40px, 9vw, 58px);
    color: var(--ramen-heading);
    line-height:1;
    text-align:center;
}
.ramen-summary-text{
    margin: 8px 0 0;
    font-size:15px;
    color: var(--ramen-sub);
    text-align:center;
}

.ramen-compare{
    margin: 18px 0 0;
    text-align:left;
    font-size:16px;
    padding: 16px 18px;
    background:#FBEAE5;
    border-radius:8px;
    color: var(--ramen-accent-dark);
    line-height:1.85;
}
.ramen-compare b{ font-size:1.08em; }

.ramen-quick-block{
    margin: 18px 18px 0;
    padding: 20px 22px;
    background: var(--ramen-card-bg);
    border: 1px solid #E4D8C4;
    border-radius: 8px;
}
.ramen-quick-block h3{
    font-size:15px;
    color: var(--ramen-heading);
    margin: 0 0 14px;
    text-align:left;
}
.ramen-quick-list{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
    gap:10px;
}
.ramen-quick-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 14px;
    border-radius:6px;
    background:#F6EFDE;
    font-size:15px;
    border:none;
    cursor:pointer;
    font-family:inherit;
    color:inherit;
    text-align:left;
    transition: background-color .15s ease, transform .08s ease;
}
.ramen-quick-item:hover{ background:#EFE2C4; }
.ramen-quick-item:active{ transform: scale(0.98); }
.ramen-quick-item.is-selected{
    background: var(--ramen-gold);
    color:#3B2412;
    font-weight:700;
}
.ramen-quick-item .ramen-quick-year{ color:inherit; }
.ramen-quick-item .ramen-quick-price{ font-weight:700; }

.ramen-chart-block{
    margin: 18px 18px 0;
    padding: 20px 22px;
    background: var(--ramen-card-bg);
    border: 1px solid #E4D8C4;
    border-radius: 8px;
}
.ramen-chart-block h3{
    font-size:15px;
    color: var(--ramen-heading);
    margin: 0 0 14px;
    text-align:left;
}
#ramen-chart{ width:100%; }
#ramen-chart svg{ width:100%; height:auto; display:block; }
.ramen-chart-legend{
    margin: 12px 0 0;
    font-size:13px;
    color: var(--ramen-sub);
    text-align:left;
}
.ramen-legend-solid, .ramen-legend-dashed{
    display:inline-block;
    width:22px;
    height:0;
    border-top: 3px solid var(--ramen-accent);
    vertical-align:middle;
    margin-right:4px;
}
.ramen-legend-dashed{
    border-top-style: dashed;
    border-top-color: var(--ramen-sub);
    margin-left:14px;
}

.ramen-note{
    text-align:left;
    margin: 22px 18px 0;
    padding: 14px 16px;
    background: #FDEBD3;
    border-left: 4px solid var(--ramen-gold);
    border-radius: 4px;
}
.ramen-note p{
    text-align:left;
    margin: 0;
    font-size: 12px;
    line-height: 1.8;
    color: #7A4E12;
}

.ramen-credit{
    text-align:left;
    font-size:13px;
    color: var(--ramen-sub);
    margin: 18px 18px 4px;
}
.ramen-credit a{ color: var(--ramen-accent-dark); }