.urukosoko-ecps {
--ecps-primary: #008a73;
--ecps-primary-dark: #006858;
--ecps-accent: #f39a23;
--ecps-ink: #18302c;
--ecps-muted: #5f706d;
--ecps-border: #dce7e4;
--ecps-soft: #f1f8f6;
--ecps-white: #fff;
--ecps-danger: #c84040;
--ecps-shadow: 0 18px 50px rgba(18, 74, 64, .10);
color: var(--ecps-ink);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Yu Gothic", "Meiryo", sans-serif;
line-height: 1.7;
margin: 40px auto;
max-width: 1240px;
}
.urukosoko-ecps *,
.urukosoko-ecps *::before,
.urukosoko-ecps *::after { box-sizing: border-box; }
.urukosoko-ecps [hidden] { display: none !important; }
.urukosoko-ecps__header {
background: linear-gradient(135deg, #eaf8f4 0%, #fff8eb 100%);
border: 1px solid var(--ecps-border);
border-radius: 22px;
padding: 38px clamp(22px, 5vw, 58px);
text-align: center;
}
.urukosoko-ecps__eyebrow,
.urukosoko-ecps__cta-label,
.urukosoko-ecps__mini-label {
color: var(--ecps-primary);
font-size: 12px;
font-weight: 800;
letter-spacing: .06em;
margin: 0 0 6px;
text-transform: uppercase;
}
.urukosoko-ecps__header h2 {
color: var(--ecps-ink);
font-size: clamp(27px, 4vw, 42px);
line-height: 1.3;
margin: 0 0 14px;
}
.urukosoko-ecps__header > p:not(.urukosoko-ecps__eyebrow):not(.urukosoko-ecps__notice) {
font-size: 17px;
margin: 0 auto;
max-width: 820px;
}
.urukosoko-ecps__notice {
color: var(--ecps-muted);
font-size: 12px;
margin: 16px 0 0;
}
.urukosoko-ecps__layout {
display: grid;
gap: 24px;
grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr);
margin-top: 24px;
}
.urukosoko-ecps__form,
.urukosoko-ecps__result {
background: var(--ecps-white);
border: 1px solid var(--ecps-border);
border-radius: 20px;
box-shadow: var(--ecps-shadow);
overflow: hidden;
}
.urukosoko-ecps__section { padding: 28px; }
.urukosoko-ecps__section-heading {
align-items: center;
display: flex;
gap: 12px;
margin-bottom: 22px;
}
.urukosoko-ecps__section-heading span {
background: var(--ecps-primary);
border-radius: 999px;
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
padding: 5px 10px;
}
.urukosoko-ecps__section-heading h3 {
font-size: 21px;
margin: 0;
}
.urukosoko-ecps__fields {
display: grid;
gap: 18px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.urukosoko-ecps__field { display: block; min-width: 0; }
.urukosoko-ecps__field-label { display: block; font-size: 14px; font-weight: 750; margin-bottom: 7px; }
.urukosoko-ecps__field small { color: var(--ecps-muted); display: block; font-size: 11px; margin-top: 5px; }
.urukosoko-ecps__input-wrap {
align-items: center;
background: #fff;
border: 1px solid #cbdad6;
border-radius: 10px;
display: flex;
overflow: hidden;
transition: border-color .2s, box-shadow .2s;
}
.urukosoko-ecps__input-wrap:focus-within {
border-color: var(--ecps-primary);
box-shadow: 0 0 0 3px rgba(0, 138, 115, .12);
}
.urukosoko-ecps__input-wrap input {
appearance: textfield;
background: transparent;
border: 0 !important;
box-shadow: none !important;
color: var(--ecps-ink);
flex: 1;
font-size: 18px;
font-weight: 700;
min-width: 0;
outline: 0;
padding: 12px 6px 12px 13px;
width: 100%;
}
.urukosoko-ecps__input-wrap input::placeholder {
color: #98a7a4;
font-size: 12px;
font-weight: 500;
}
.urukosoko-ecps__input-wrap > span {
color: var(--ecps-muted);
flex: 0 0 auto;
font-size: 13px;
font-weight: 700;
padding: 0 12px 0 5px;
}
.urukosoko-ecps__details { border-top: 1px solid var(--ecps-border); }
.urukosoko-ecps__details summary {
align-items: center;
cursor: pointer;
display: flex;
flex-direction: column;
list-style: none;
padding: 18px 28px;
text-align: left;
}
.urukosoko-ecps__details summary::-webkit-details-marker { display: none; }
.urukosoko-ecps__details summary span {
align-self: stretch;
color: var(--ecps-primary);
font-size: 15px;
font-weight: 800;
position: relative;
}
.urukosoko-ecps__details summary span::after { content: "+"; font-size: 23px; position: absolute; right: 0; top: -7px; }
.urukosoko-ecps__details[open] summary span::after { content: "−"; }
.urukosoko-ecps__details summary small { align-self: stretch; color: var(--ecps-muted); font-size: 11px; }
.urukosoko-ecps__details-body { background: var(--ecps-soft); border-top: 1px solid var(--ecps-border); padding: 24px 28px; }
.urukosoko-ecps__target-input {
background: #fff;
border: 1px solid var(--ecps-border);
border-radius: 14px;
margin-bottom: 20px;
padding: 18px;
}
.urukosoko-ecps__scenario-editor { display: grid; gap: 14px; }
.urukosoko-ecps__scenario-editor-head {
align-items: center;
display: flex;
gap: 16px;
justify-content: space-between;
}
.urukosoko-ecps__scenario-editor-head h4 { font-size: 16px; margin: 0; }
.urukosoko-ecps__scenario-editor-head p { color: var(--ecps-muted); font-size: 11px; margin: 2px 0 0; }
.urukosoko-ecps__autofill {
background: #fff;
border: 1px solid #a9c9c1;
border-radius: 9px;
color: var(--ecps-primary-dark);
cursor: pointer;
flex: 0 0 auto;
font-size: 12px;
font-weight: 800;
padding: 9px 12px;
}
.urukosoko-ecps__autofill:hover { background: #e9f6f2; }
.urukosoko-ecps__scenario-card {
background: #fff;
border: 1px solid var(--ecps-border);
border-radius: 14px;
padding: 16px;
}
.urukosoko-ecps__scenario-title { align-items: center; display: flex; gap: 9px; margin-bottom: 13px; }
.urukosoko-ecps__scenario-title > span {
align-items: center;
background: var(--ecps-primary);
border-radius: 50%;
color: #fff;
display: inline-flex;
font-size: 12px;
font-weight: 800;
height: 25px;
justify-content: center;
width: 25px;
}
.urukosoko-ecps__scenario-title strong { font-size: 14px; }
.urukosoko-ecps__scenario-fields { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.urukosoko-ecps__scenario-fields .urukosoko-ecps__field-label { font-size: 12px; }
.urukosoko-ecps__scenario-fields .urukosoko-ecps__input-wrap input { font-size: 15px; padding: 10px 5px 10px 10px; }
.urukosoko-ecps__scenario-fields .urukosoko-ecps__input-wrap > span { font-size: 11px; padding-right: 8px; }
.urukosoko-ecps__scenario-fields .urukosoko-ecps__field small { font-size: 10px; }
.urukosoko-ecps__actions {
display: flex;
gap: 10px;
padding: 22px 28px 10px;
}
.urukosoko-ecps button { font: inherit; }
.urukosoko-ecps__calculate,
.urukosoko-ecps__cta-button {
align-items: center;
background: var(--ecps-primary);
border: 0;
border-radius: 11px;
color: #fff !important;
cursor: pointer;
display: inline-flex;
font-size: 16px;
font-weight: 800;
justify-content: center;
padding: 14px 22px;
text-decoration: none !important;
transition: background .2s, transform .2s;
}
.urukosoko-ecps__calculate { flex: 1; }
.urukosoko-ecps__calculate:hover,
.urukosoko-ecps__cta-button:hover { background: var(--ecps-primary-dark); transform: translateY(-1px); }
.urukosoko-ecps__reset,
.urukosoko-ecps__print,
.urukosoko-ecps__share {
background: #fff;
border: 1px solid #bfd1cc;
border-radius: 11px;
color: var(--ecps-ink);
cursor: pointer;
font-weight: 700;
padding: 12px 16px;
}
.urukosoko-ecps__share { background: #eaf8f4; border-color: #9fcac0; color: var(--ecps-primary-dark); }
.urukosoko-ecps__save-status { color: var(--ecps-muted); font-size: 11px; margin: 0 28px 6px; min-height: 1.5em; }
.urukosoko-ecps__error { color: var(--ecps-danger); font-size: 13px; margin: 0 28px 20px; min-height: 1.5em; }
.urukosoko-ecps__result {
align-self: start;
min-height: 520px;
position: sticky;
top: 24px;
}
.urukosoko-ecps__result-placeholder {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 520px;
padding: 40px;
text-align: center;
}
.urukosoko-ecps__placeholder-icon {
align-items: center;
background: var(--ecps-soft);
border-radius: 50%;
color: var(--ecps-primary);
display: flex;
font-size: 45px;
font-weight: 800;
height: 90px;
justify-content: center;
margin-bottom: 18px;
width: 90px;
}
.urukosoko-ecps__result-placeholder h3 { font-size: 20px; margin: 0 0 8px; }
.urukosoko-ecps__result-placeholder p { color: var(--ecps-muted); font-size: 14px; margin: 0; }
.urukosoko-ecps__print-summary { display: none; }
.urukosoko-ecps__score-area {
align-items: center;
background: var(--ecps-soft);
display: flex;
gap: 16px;
justify-content: space-between;
padding: 24px;
}
.urukosoko-ecps__score-label { color: var(--ecps-primary); font-size: 12px; font-weight: 800; margin: 0 0 3px; }
.urukosoko-ecps__score-title { font-size: 22px; margin: 0 0 3px; }
.urukosoko-ecps__score-message { color: var(--ecps-muted); font-size: 12px; line-height: 1.6; margin: 0; }
.urukosoko-ecps__score-badge {
align-items: baseline;
background: var(--ecps-primary);
border-radius: 50%;
color: #fff;
display: flex;
flex: 0 0 78px;
height: 78px;
justify-content: center;
padding-top: 19px;
width: 78px;
}
.urukosoko-ecps__score-badge span { font-size: 29px; font-weight: 850; line-height: 1; }
.urukosoko-ecps__score-badge small { font-size: 11px; }
.urukosoko-ecps__score-area[data-level="caution"] { background: #fff8e8; }
.urukosoko-ecps__score-area[data-level="caution"] .urukosoko-ecps__score-badge { background: #d8941e; }
.urukosoko-ecps__score-area[data-level="danger"] { background: #fff0f0; }
.urukosoko-ecps__score-area[data-level="danger"] .urukosoko-ecps__score-badge { background: var(--ecps-danger); }
.urukosoko-ecps__primary-metrics { display: grid; grid-template-columns: repeat(3, 1fr); }
.urukosoko-ecps__metric { border-bottom: 1px solid var(--ecps-border); border-right: 1px solid var(--ecps-border); padding: 19px 12px; text-align: center; }
.urukosoko-ecps__metric:last-child { border-right: 0; }
.urukosoko-ecps__metric span { color: var(--ecps-muted); display: block; font-size: 10px; line-height: 1.45; }
.urukosoko-ecps__metric strong { display: block; font-size: clamp(18px, 2.2vw, 25px); margin-top: 4px; }
.urukosoko-ecps__metric--primary strong { color: var(--ecps-primary); }
.urukosoko-ecps__result-grid {
background: var(--ecps-border);
display: grid;
gap: 1px;
grid-template-columns: repeat(2, 1fr);
}
.urukosoko-ecps__result-grid > div { background: #fff; padding: 14px 17px; }
.urukosoko-ecps__result-grid span { color: var(--ecps-muted); display: block; font-size: 10px; }
.urukosoko-ecps__result-grid strong { display: block; font-size: 15px; margin-top: 2px; }
.urukosoko-ecps__target-result {
align-items: center;
background: linear-gradient(135deg, #fff9ec, #fff);
border-top: 1px solid var(--ecps-border);
display: flex;
gap: 18px;
justify-content: space-between;
padding: 22px 24px;
}
.urukosoko-ecps__target-result h4 { font-size: 17px; line-height: 1.5; margin: 0 0 4px; }
.urukosoko-ecps__target-result h4 strong { color: #bb6a00; }
.urukosoko-ecps__target-result > div:first-child > p:last-child { color: var(--ecps-muted); font-size: 11px; margin: 0; }
.urukosoko-ecps__target-price { flex: 0 0 auto; text-align: right; }
.urukosoko-ecps__target-price > span { color: var(--ecps-muted); display: block; font-size: 10px; }
.urukosoko-ecps__target-price > strong { color: #bb6a00; display: block; font-size: 25px; line-height: 1.3; }
.urukosoko-ecps__target-price > small { color: var(--ecps-muted); display: block; font-size: 10px; }
.urukosoko-ecps__comparison,
.urukosoko-ecps__breakdown,
.urukosoko-ecps__advice { border-top: 1px solid var(--ecps-border); padding: 22px 24px; }
.urukosoko-ecps__comparison-heading { align-items: end; display: flex; gap: 15px; justify-content: space-between; margin-bottom: 13px; }
.urukosoko-ecps__comparison-heading h4,
.urukosoko-ecps__breakdown h4,
.urukosoko-ecps__advice h4 { font-size: 16px; margin: 0; }
.urukosoko-ecps__best-scenario { color: var(--ecps-primary-dark); font-size: 10px; font-weight: 700; margin: 0; max-width: 210px; text-align: right; }
.urukosoko-ecps__table-wrap { overflow-x: auto; }
.urukosoko-ecps__comparison-table { border-collapse: collapse; font-size: 10px; min-width: 660px; width: 100%; }
.urukosoko-ecps__comparison-table th,
.urukosoko-ecps__comparison-table td { border-bottom: 1px solid var(--ecps-border); padding: 9px 7px; text-align: right; white-space: nowrap; }
.urukosoko-ecps__comparison-table thead th { background: #f5f8f7; color: var(--ecps-muted); font-weight: 700; }
.urukosoko-ecps__comparison-table thead th:first-child,
.urukosoko-ecps__comparison-table tbody th { text-align: left; }
.urukosoko-ecps__comparison-table tbody th { align-items: center; display: flex; gap: 5px; }
.urukosoko-ecps__comparison-table tbody th > span:nth-child(2) { font-size: 10px; }
.urukosoko-ecps__comparison-table tbody th small {
background: var(--ecps-primary);
border-radius: 999px;
color: #fff;
font-size: 8px;
margin-left: auto;
padding: 2px 5px;
}
.urukosoko-ecps__scenario-key {
align-items: center;
background: #dfeae7;
border-radius: 50%;
display: inline-flex;
flex: 0 0 20px;
font-size: 9px;
height: 20px;
justify-content: center;
}
.urukosoko-ecps__comparison-table tr.is-best { background: #ecf8f5; }
.urukosoko-ecps__comparison-table tr.is-best .urukosoko-ecps__scenario-key { background: var(--ecps-primary); color: #fff; }
.urukosoko-ecps__comparison-table .urukosoko-ecps__profit-cell { font-weight: 800; }
.urukosoko-ecps__bar { background: #edf1f0; border-radius: 999px; display: flex; height: 12px; margin-top: 14px; overflow: hidden; width: 100%; }
.urukosoko-ecps__bar span { min-width: 0; transition: width .5s ease; }
.urukosoko-ecps__bar-cost, .dot--cost { background: #738783; }
.urukosoko-ecps__bar-fees, .dot--fees { background: #e0a33d; }
.urukosoko-ecps__bar-logistics, .dot--logistics { background: #62a7bd; }
.urukosoko-ecps__bar-profit, .dot--profit { background: var(--ecps-primary); }
.urukosoko-ecps__breakdown ul { display: grid; gap: 7px 14px; grid-template-columns: repeat(2, 1fr); list-style: none; margin: 14px 0 0; padding: 0; }
.urukosoko-ecps__breakdown li { align-items: center; display: flex; font-size: 10px; }
.urukosoko-ecps__breakdown li strong { margin-left: auto; }
.dot { border-radius: 50%; display: inline-block; flex: 0 0 8px; height: 8px; margin-right: 6px; width: 8px; }
.urukosoko-ecps__advice { background: #fcfdfd; }
.urukosoko-ecps__advice-list { margin: 0; padding-left: 22px; }
.urukosoko-ecps__advice-list li { font-size: 11px; margin-bottom: 8px; padding-left: 3px; }
.urukosoko-ecps__result-actions { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; padding: 20px 24px 8px; }
.urukosoko-ecps__share-status { color: var(--ecps-muted); font-size: 10px; margin: 0 24px 20px; min-height: 1.5em; text-align: center; }
.urukosoko-ecps__cta {
align-items: center;
background: var(--ecps-ink);
border-radius: 20px;
color: #fff;
display: flex;
gap: 30px;
justify-content: space-between;
margin-top: 24px;
padding: 30px clamp(22px, 4vw, 42px);
}
.urukosoko-ecps__cta h3 { color: #fff; font-size: 23px; margin: 0 0 6px; }
.urukosoko-ecps__cta p:not(.urukosoko-ecps__cta-label) { color: #dce7e4; font-size: 13px; margin: 0; max-width: 730px; }
.urukosoko-ecps__cta-button { flex: 0 0 auto; }
.urukosoko-ecps__seo-copy {
background: #fff;
border: 1px solid var(--ecps-border);
border-radius: 18px;
margin-top: 24px;
padding: 28px clamp(22px, 4vw, 40px);
}
.urukosoko-ecps__seo-copy h3 { font-size: 21px; margin: 0 0 10px; }
.urukosoko-ecps__seo-copy p { color: var(--ecps-muted); font-size: 14px; margin: 8px 0; }
@media (max-width: 980px) {
.urukosoko-ecps__layout { grid-template-columns: 1fr; }
.urukosoko-ecps__result { min-height: 0; position: static; }
.urukosoko-ecps__result-placeholder { min-height: 300px; }
.urukosoko-ecps__comparison-table { font-size: 11px; }
}
@media (max-width: 680px) {
.urukosoko-ecps { margin: 24px auto; }
.urukosoko-ecps__header { border-radius: 16px; padding: 28px 18px; }
.urukosoko-ecps__header > p:not(.urukosoko-ecps__eyebrow):not(.urukosoko-ecps__notice) { font-size: 15px; }
.urukosoko-ecps__fields { grid-template-columns: 1fr; }
.urukosoko-ecps__section, .urukosoko-ecps__details-body { padding: 22px 18px; }
.urukosoko-ecps__details summary { padding-left: 18px; padding-right: 18px; }
.urukosoko-ecps__scenario-editor-head { align-items: stretch; flex-direction: column; }
.urukosoko-ecps__autofill { width: 100%; }
.urukosoko-ecps__scenario-fields { grid-template-columns: 1fr; }
.urukosoko-ecps__actions { flex-direction: column; padding: 20px 18px 10px; }
.urukosoko-ecps__save-status, .urukosoko-ecps__error { margin-left: 18px; margin-right: 18px; }
.urukosoko-ecps__primary-metrics { grid-template-columns: 1fr; }
.urukosoko-ecps__metric { border-right: 0; }
.urukosoko-ecps__result-grid { grid-template-columns: 1fr; }
.urukosoko-ecps__target-result { align-items: stretch; flex-direction: column; }
.urukosoko-ecps__target-price { text-align: left; }
.urukosoko-ecps__comparison-heading { align-items: stretch; flex-direction: column; }
.urukosoko-ecps__best-scenario { max-width: none; text-align: left; }
.urukosoko-ecps__breakdown ul { grid-template-columns: 1fr; }
.urukosoko-ecps__result-actions { grid-template-columns: 1fr; padding-left: 18px; padding-right: 18px; }
.urukosoko-ecps__cta { align-items: stretch; flex-direction: column; }
.urukosoko-ecps__cta-button { width: 100%; }
}
@media print {
@page { margin: 12mm; size: A4 portrait; }
html, body { background: #fff !important; }
body * { visibility: hidden !important; }
.urukosoko-ecps,
.urukosoko-ecps * { visibility: visible !important; }
.urukosoko-ecps {
color: #111;
left: 0;
margin: 0;
max-width: none;
position: absolute;
top: 0;
width: 100%;
}
.urukosoko-ecps__header,
.urukosoko-ecps__form,
.urukosoko-ecps__cta,
.urukosoko-ecps__seo-copy,
.urukosoko-ecps__result-actions,
.urukosoko-ecps__share-status,
.urukosoko-ecps__result-placeholder { display: none !important; }
.urukosoko-ecps__layout { display: block; margin: 0; }
.urukosoko-ecps__result { border: 0; border-radius: 0; box-shadow: none; min-height: 0; overflow: visible; position: static; }
.urukosoko-ecps__result-content { display: block !important; }
.urukosoko-ecps__print-summary { display: block; margin-bottom: 6mm; }
.urukosoko-ecps__print-summary h1 { font-size: 20pt; margin: 0 0 2mm; }
.urukosoko-ecps__print-summary > p { color: #555; font-size: 9pt; margin: 0 0 4mm; }
.urukosoko-ecps__print-summary table { border-collapse: collapse; font-size: 8.5pt; width: 100%; }
.urukosoko-ecps__print-summary th,
.urukosoko-ecps__print-summary td { border: 1px solid #bbb; padding: 2mm; }
.urukosoko-ecps__print-summary th { background: #eee !important; text-align: left; }
.urukosoko-ecps__score-area,
.urukosoko-ecps__target-result,
.urukosoko-ecps__comparison-table tr.is-best { background: #f3f3f3 !important; }
.urukosoko-ecps__score-area { border: 1px solid #bbb; page-break-inside: avoid; }
.urukosoko-ecps__score-badge { background: #333 !important; }
.urukosoko-ecps__primary-metrics,
.urukosoko-ecps__result-grid,
.urukosoko-ecps__target-result,
.urukosoko-ecps__comparison,
.urukosoko-ecps__breakdown,
.urukosoko-ecps__advice { page-break-inside: avoid; }
.urukosoko-ecps__primary-metrics { border-left: 1px solid #bbb; }
.urukosoko-ecps__metric { border-color: #bbb; }
.urukosoko-ecps__result-grid { background: #bbb; }
.urukosoko-ecps__comparison-table { font-size: 7.5pt; min-width: 0; }
.urukosoko-ecps__comparison-table th,
.urukosoko-ecps__comparison-table td { border: 1px solid #bbb; padding: 1.5mm; }
.urukosoko-ecps__comparison-table tbody th { display: table-cell; }
.urukosoko-ecps__comparison-table tbody th small { background: #333 !important; }
.urukosoko-ecps__advice-list li { font-size: 8pt; }
} .urukosoko-ecps.urukosoko-ecps--compact {
max-width: 920px;
margin: 32px auto;
padding: 0;
overflow: hidden;
border: 1px solid #cfe3de;
border-radius: 18px;
background: #ffffff;
box-shadow: 0 10px 28px rgba(27, 74, 66, 0.09);
color: #183b36;
font-size: 16px;
line-height: 1.7;
}
.urukosoko-ecps-compact__header {
padding: 24px 28px 20px;
background: linear-gradient(135deg, #eefaf7 0%, #f8fcfb 100%);
border-bottom: 1px solid #dcece8;
}
.urukosoko-ecps-compact__eyebrow {
display: inline-flex;
margin: 0 0 8px;
padding: 4px 11px;
border-radius: 999px;
background: #d9f2eb;
color: #126653;
font-size: 13px;
font-weight: 700;
letter-spacing: .04em;
}
.urukosoko-ecps-compact__header h3 {
margin: 0;
color: #153f37;
font-size: clamp(22px, 3vw, 29px);
line-height: 1.35;
}
.urukosoko-ecps-compact__header > p:last-child {
margin: 9px 0 0;
color: #49645f;
font-size: 15px;
}
.urukosoko-ecps-compact__form {
padding: 24px 28px 26px;
}
.urukosoko-ecps-compact__fields {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.urukosoko-ecps-compact__field {
display: block;
min-width: 0;
}
.urukosoko-ecps-compact__field > span:first-child {
display: block;
margin-bottom: 6px;
color: #294c45;
font-size: 14px;
font-weight: 700;
}
.urukosoko-ecps-compact__input-wrap {
display: flex;
align-items: center;
overflow: hidden;
border: 1px solid #bcd4cf;
border-radius: 10px;
background: #fff;
transition: border-color .2s ease, box-shadow .2s ease;
}
.urukosoko-ecps-compact__input-wrap:focus-within {
border-color: #16846e;
box-shadow: 0 0 0 3px rgba(22, 132, 110, .13);
}
.urukosoko-ecps-compact__input-wrap input {
width: 100%;
min-width: 0;
height: 46px;
padding: 8px 10px 8px 13px;
border: 0 !important;
outline: 0;
background: transparent;
color: #173f37;
font-size: 17px;
font-weight: 700;
box-shadow: none !important;
}
.urukosoko-ecps-compact__input-wrap small {
flex: 0 0 auto;
padding: 0 12px 0 4px;
color: #607772;
font-size: 13px;
font-weight: 600;
}
.urukosoko-ecps-compact__optional {
margin-top: 15px;
border: 0;
}
.urukosoko-ecps-compact__optional summary {
width: fit-content;
cursor: pointer;
color: #2d6f61;
font-size: 14px;
font-weight: 700;
}
.urukosoko-ecps-compact__optional .urukosoko-ecps-compact__field {
max-width: 280px;
margin-top: 12px;
}
.urukosoko-ecps-compact__calculate {
display: block;
width: min(360px, 100%);
margin: 22px auto 0;
padding: 13px 22px;
border: 0;
border-radius: 10px;
background: #087a66;
color: #fff;
font-size: 17px;
font-weight: 800;
line-height: 1.4;
cursor: pointer;
box-shadow: 0 7px 16px rgba(8, 122, 102, .18);
transition: transform .15s ease, background .15s ease;
}
.urukosoko-ecps-compact__calculate:hover {
background: #066553;
transform: translateY(-1px);
}
.urukosoko-ecps-compact__error {
min-height: 1.5em;
margin: 8px 0 0;
color: #b3261e;
text-align: center;
font-size: 14px;
font-weight: 700;
}
.urukosoko-ecps-compact__result {
padding: 24px 28px 26px;
border-top: 1px solid #dcece8;
background: #fbfefd;
}
.urukosoko-ecps-compact__result-label {
margin: 0 0 12px;
color: #247263;
font-size: 14px;
font-weight: 800;
}
.urukosoko-ecps-compact__metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 11px;
}
.urukosoko-ecps-compact__metrics > div {
min-width: 0;
padding: 14px 12px;
border: 1px solid #d8e8e4;
border-radius: 11px;
background: #fff;
text-align: center;
}
.urukosoko-ecps-compact__metrics span {
display: block;
margin-bottom: 5px;
color: #5b706b;
font-size: 12px;
font-weight: 700;
}
.urukosoko-ecps-compact__metrics strong {
display: block;
color: #0b6d5b;
font-size: clamp(18px, 2.4vw, 23px);
line-height: 1.3;
overflow-wrap: anywhere;
}
.urukosoko-ecps-compact__comment {
margin: 15px 0 0;
padding: 12px 14px;
border-left: 4px solid #f0a340;
background: #fff8ec;
color: #59482f;
font-size: 14px;
}
.urukosoko-ecps-compact__detail-link {
display: block;
width: fit-content;
margin: 17px auto 0;
color: #096e5d;
font-size: 15px;
font-weight: 800;
text-align: center;
text-decoration: underline;
text-underline-offset: 3px;
}
.urukosoko-ecps-compact__privacy {
margin: 10px 0 0;
color: #758682;
font-size: 12px;
text-align: center;
}
@media (max-width: 760px) {
.urukosoko-ecps.urukosoko-ecps--compact {
margin: 24px 0;
border-radius: 14px;
}
.urukosoko-ecps-compact__header,
.urukosoko-ecps-compact__form,
.urukosoko-ecps-compact__result {
padding-left: 18px;
padding-right: 18px;
}
.urukosoko-ecps-compact__fields {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px 10px;
}
.urukosoko-ecps-compact__metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 420px) {
.urukosoko-ecps-compact__fields {
grid-template-columns: 1fr;
}
}