.urukosoko-ocs,
.urukosoko-ocs * { box-sizing: border-box; }
.urukosoko-ocs {
--navy: #0c2a47;
--navy-2: #173f5f;
--teal: #138f7a;
--teal-soft: #e9f7f3;
--blue-soft: #edf5fb;
--gold: #d99a2b;
--red: #b74b4b;
--ink: #102a3d;
--muted: #5d7180;
--line: #d8e3e7;
--panel: #ffffff;
--bg: #f5f9fa;
width: 100%;
max-width: 1440px;
margin: 24px auto;
color: var(--ink);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
font-size: 17px;
line-height: 1.75;
}
.urukosoko-ocs button,
.urukosoko-ocs input { font: inherit; }
.urukosoko-ocs__hero {
position: relative;
overflow: hidden;
padding: clamp(32px, 5vw, 64px);
border-radius: 28px;
color: #fff;
background: linear-gradient(120deg, var(--navy), #14546a 62%, #15927f);
box-shadow: 0 18px 48px rgba(12, 42, 71, .16);
}
.urukosoko-ocs__hero::after {
content: "";
position: absolute;
width: 280px;
height: 280px;
right: -70px;
top: -120px;
border-radius: 50%;
background: rgba(255,255,255,.08);
}
.urukosoko-ocs__eyebrow {
margin: 0 0 10px;
font-size: 15px;
font-weight: 800;
letter-spacing: .06em;
}
.urukosoko-ocs__hero h2 {
position: relative;
z-index: 1;
margin: 0;
color: #fff;
font-size: clamp(30px, 4.2vw, 54px);
line-height: 1.25;
letter-spacing: .01em;
}
.urukosoko-ocs__lead {
position: relative;
z-index: 1;
max-width: 1050px;
margin: 16px 0 20px;
font-size: clamp(17px, 1.8vw, 21px);
}
.urukosoko-ocs__service-rates {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.urukosoko-ocs__service-rates span {
padding: 8px 13px;
border: 1px solid rgba(255,255,255,.3);
border-radius: 999px;
background: rgba(255,255,255,.12);
font-size: 15px;
}
.urukosoko-ocs__notice {
position: relative;
z-index: 1;
margin: 20px 0 0;
padding: 13px 16px;
border-left: 3px solid rgba(255,255,255,.8);
border-radius: 8px;
background: rgba(255,255,255,.12);
font-size: 15px;
}
.urukosoko-ocs__form { margin-top: 28px; }
.urukosoko-ocs__panel {
margin-bottom: 24px;
padding: clamp(24px, 3.5vw, 42px);
border: 1px solid var(--line);
border-radius: 22px;
background: var(--panel);
box-shadow: 0 10px 30px rgba(15, 52, 73, .06);
}
.urukosoko-ocs__panel--self { border-top: 5px solid var(--navy-2); }
.urukosoko-ocs__panel--agency { border-top: 5px solid var(--teal); }
.urukosoko-ocs__comparison-inputs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.urukosoko-ocs__section-heading {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 26px;
}
.urukosoko-ocs__section-heading > span {
flex: 0 0 auto;
padding: 5px 10px;
border-radius: 7px;
background: var(--navy);
color: #fff;
font-size: 13px;
font-weight: 800;
letter-spacing: .05em;
}
.urukosoko-ocs__panel--agency .urukosoko-ocs__section-heading > span { background: var(--teal); }
.urukosoko-ocs__section-heading h3 {
margin: 0 0 4px;
color: var(--ink);
font-size: clamp(22px, 2.4vw, 29px);
line-height: 1.35;
}
.urukosoko-ocs__section-heading p {
margin: 0;
color: var(--muted);
font-size: 15px;
}
.urukosoko-ocs__channel-fieldset {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 0 0 24px;
padding: 0;
border: 0;
}
.urukosoko-ocs__channel-fieldset legend {
width: 100%;
margin-bottom: 8px;
font-weight: 800;
}
.urukosoko-ocs__channel-fieldset label {
cursor: pointer;
}
.urukosoko-ocs__channel-fieldset input { position: absolute; opacity: 0; }
.urukosoko-ocs__channel-fieldset span {
display: inline-flex;
min-width: 180px;
justify-content: center;
padding: 12px 20px;
border: 2px solid var(--line);
border-radius: 12px;
background: #fff;
font-weight: 800;
transition: .2s ease;
}
.urukosoko-ocs__channel-fieldset input:checked + span {
border-color: var(--teal);
background: var(--teal-soft);
color: #087563;
box-shadow: 0 0 0 3px rgba(19,143,122,.09);
}
.urukosoko-ocs__fields {
display: grid;
gap: 20px 18px;
}
.urukosoko-ocs__fields--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.urukosoko-ocs__fields--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.urukosoko-ocs__field {
display: flex;
flex-direction: column;
min-width: 0;
}
.urukosoko-ocs__field-label {
margin-bottom: 7px;
font-size: 15px;
font-weight: 800;
line-height: 1.45;
}
.urukosoko-ocs__input-wrap {
display: flex;
align-items: stretch;
overflow: hidden;
border: 1px solid #c9d8dd;
border-radius: 11px;
background: #fff;
transition: .2s ease;
}
.urukosoko-ocs__input-wrap:focus-within {
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(19,143,122,.11);
}
.urukosoko-ocs__input-wrap input {
width: 100%;
min-width: 0;
padding: 13px 14px;
border: 0;
outline: 0;
background: transparent;
color: var(--ink);
font-size: 17px;
font-weight: 700;
}
.urukosoko-ocs__input-wrap > span {
display: flex;
align-items: center;
padding: 0 12px;
background: #f3f7f8;
color: #526a78;
font-size: 14px;
white-space: nowrap;
}
.urukosoko-ocs__field small {
margin-top: 6px;
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}
.urukosoko-ocs__field.is-disabled { opacity: .48; }
.urukosoko-ocs__field--readonly strong {
display: flex;
align-items: center;
min-height: 52px;
padding: 12px 14px;
border: 1px dashed #a9c4c4;
border-radius: 11px;
background: var(--teal-soft);
color: #087563;
font-size: 18px;
}
.urukosoko-ocs__commission-card {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 2px 16px;
margin-bottom: 18px;
padding: 16px 18px;
border-radius: 14px;
background: linear-gradient(120deg, #e8f8f4, #f6fcfa);
border: 1px solid #b9e1d7;
}
.urukosoko-ocs__commission-card span { font-weight: 800; }
.urukosoko-ocs__commission-card strong {
grid-row: span 2;
color: var(--teal);
font-size: 32px;
line-height: 1;
}
.urukosoko-ocs__commission-card small { color: var(--muted); font-size: 13px; }
.urukosoko-ocs__check-row {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 20px;
padding: 12px 14px;
border-radius: 10px;
background: #f4f8f9;
font-size: 14px;
font-weight: 700;
}
.urukosoko-ocs__check-row input { margin-top: 5px; transform: scale(1.15); }
.urukosoko-ocs__actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin: 28px 0 12px;
}
.urukosoko-ocs__actions button,
.urukosoko-ocs__result-actions button {
cursor: pointer;
min-height: 52px;
padding: 13px 24px;
border: 1px solid #bdcdd3;
border-radius: 11px;
background: #fff;
color: var(--ink);
font-size: 16px;
font-weight: 800;
}
.urukosoko-ocs__actions .urukosoko-ocs__calculate {
min-width: 340px;
border-color: var(--navy);
background: var(--navy);
color: #fff;
}
.urukosoko-ocs__actions button:hover,
.urukosoko-ocs__result-actions button:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15,52,73,.12); }
.urukosoko-ocs__status,
.urukosoko-ocs__error { text-align: center; font-size: 14px; }
.urukosoko-ocs__status { color: var(--muted); }
.urukosoko-ocs__error { min-height: 1.5em; color: var(--red); font-weight: 800; }
.urukosoko-ocs__result {
scroll-margin-top: 30px;
margin-top: 28px;
border: 1px solid var(--line);
border-radius: 22px;
overflow: hidden;
background: #fff;
box-shadow: 0 14px 38px rgba(15,52,73,.08);
}
.urukosoko-ocs__result-placeholder {
padding: 70px 24px;
text-align: center;
color: var(--muted);
}
.urukosoko-ocs__placeholder-icon {
display: grid;
place-items: center;
width: 70px;
height: 70px;
margin: 0 auto 16px;
border-radius: 50%;
background: var(--teal-soft);
color: var(--teal);
font-size: 34px;
font-weight: 900;
}
.urukosoko-ocs__result-placeholder h3 { margin: 0 0 6px; color: var(--ink); font-size: 25px; }
.urukosoko-ocs__result-placeholder p { margin: 0; }
.urukosoko-ocs__diagnosis {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 28px 32px;
background: var(--bg);
border-bottom: 1px solid var(--line);
}
.urukosoko-ocs__diagnosis-label { margin: 0; color: var(--teal); font-size: 14px; font-weight: 900; }
.urukosoko-ocs__diagnosis h3 { margin: 4px 0 5px; font-size: 28px; line-height: 1.35; }
.urukosoko-ocs__diagnosis p:last-child { margin: 0; color: var(--muted); font-size: 15px; }
.urukosoko-ocs__channel-badge {
flex: 0 0 auto;
padding: 10px 16px;
border-radius: 999px;
background: var(--navy);
color: #fff;
font-size: 14px;
font-weight: 800;
}
.urukosoko-ocs__profit-cards {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: stretch;
gap: 14px;
padding: 28px 32px 18px;
}
.urukosoko-ocs__profit-card {
padding: 22px;
border-radius: 16px;
border: 1px solid var(--line);
text-align: center;
}
.urukosoko-ocs__profit-card--self { background: var(--blue-soft); }
.urukosoko-ocs__profit-card--agency { background: var(--teal-soft); }
.urukosoko-ocs__profit-card span { display: block; margin-bottom: 7px; font-size: 15px; font-weight: 800; }
.urukosoko-ocs__profit-card strong { display: block; font-size: clamp(28px, 4vw, 42px); line-height: 1.2; }
.urukosoko-ocs__profit-card--agency strong { color: var(--teal); }
.urukosoko-ocs__profit-card small { color: var(--muted); font-size: 14px; }
.urukosoko-ocs__versus { align-self: center; font-weight: 900; color: #8aa0ad; }
.urukosoko-ocs__summary-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
margin: 10px 32px 30px;
}
.urukosoko-ocs__summary-grid > div {
min-height: 112px;
padding: 18px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.urukosoko-ocs__summary-grid span { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; }
.urukosoko-ocs__summary-grid strong { display: block; margin-top: 7px; font-size: 21px; line-height: 1.35; }
.urukosoko-ocs__breakdown-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
padding: 0 32px 30px;
}
.urukosoko-ocs__breakdown-grid section {
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
}
.urukosoko-ocs__breakdown-grid h4 {
margin: 0;
padding: 15px 18px;
background: var(--bg);
font-size: 18px;
}
.urukosoko-ocs__breakdown-grid dl { margin: 0; }
.urukosoko-ocs__breakdown-grid dl > div {
display: flex;
justify-content: space-between;
gap: 18px;
padding: 11px 18px;
border-top: 1px solid #e7eef0;
font-size: 14px;
}
.urukosoko-ocs__breakdown-grid dt { color: var(--muted); }
.urukosoko-ocs__breakdown-grid dd { margin: 0; font-weight: 800; text-align: right; }
.urukosoko-ocs__breakdown-grid dl > div:last-child { background: #f6fbfa; font-size: 16px; }
.urukosoko-ocs__insights {
margin: 0 32px 30px;
padding: 24px 26px;
border-radius: 16px;
background: #f8fafb;
}
.urukosoko-ocs__insights h4 { margin: 0 0 10px; font-size: 20px; }
.urukosoko-ocs__insights ol { margin: 0; padding-left: 1.6em; }
.urukosoko-ocs__insights li { margin: 8px 0; font-size: 15px; }
.urukosoko-ocs__result-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
padding: 0 32px 30px;
}
.urukosoko-ocs__result-actions .urukosoko-ocs__print { background: var(--navy); color: #fff; border-color: var(--navy); }
.urukosoko-ocs__cta {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 24px;
padding: 28px 32px;
background: linear-gradient(120deg, var(--navy), #14566a);
color: #fff;
}
.urukosoko-ocs__cta h4 { margin: 0 0 6px; color: #fff; font-size: 22px; }
.urukosoko-ocs__cta p { margin: 0; font-size: 15px; }
.urukosoko-ocs__cta a {
display: inline-flex;
justify-content: center;
padding: 13px 22px;
border-radius: 10px;
background: #fff;
color: var(--navy);
font-weight: 900;
text-decoration: none;
white-space: nowrap;
}
.urukosoko-ocs__disclaimer {
margin: 0;
padding: 18px 32px;
color: var(--muted);
background: #f7fafb;
font-size: 12px;
}
.urukosoko-ocs__print-only { display: none; }
.urukosoko-ocs--agency-wins [data-result="profit-difference"] { color: var(--teal); }
.urukosoko-ocs--self-wins [data-result="profit-difference"] { color: var(--red); }
@media (max-width: 1080px) {
.urukosoko-ocs__comparison-inputs { grid-template-columns: 1fr; }
.urukosoko-ocs__fields--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.urukosoko-ocs__summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.urukosoko-ocs { font-size: 16px; }
.urukosoko-ocs__hero { padding: 28px 22px; border-radius: 20px; }
.urukosoko-ocs__panel { padding: 24px 18px; border-radius: 16px; }
.urukosoko-ocs__fields--four,
.urukosoko-ocs__fields--two { grid-template-columns: 1fr; }
.urukosoko-ocs__section-heading { gap: 10px; }
.urukosoko-ocs__section-heading h3 { font-size: 22px; }
.urukosoko-ocs__channel-fieldset label,
.urukosoko-ocs__channel-fieldset span { width: 100%; }
.urukosoko-ocs__actions { align-items: stretch; flex-direction: column; }
.urukosoko-ocs__actions .urukosoko-ocs__calculate { min-width: 0; }
.urukosoko-ocs__diagnosis { align-items: flex-start; flex-direction: column; padding: 24px 20px; }
.urukosoko-ocs__profit-cards { grid-template-columns: 1fr; padding: 22px 18px 14px; }
.urukosoko-ocs__versus { justify-self: center; }
.urukosoko-ocs__summary-grid { grid-template-columns: 1fr; margin: 8px 18px 24px; }
.urukosoko-ocs__summary-grid > div { min-height: auto; }
.urukosoko-ocs__breakdown-grid { grid-template-columns: 1fr; padding: 0 18px 24px; }
.urukosoko-ocs__breakdown-grid dl > div { align-items: flex-start; flex-direction: column; gap: 2px; }
.urukosoko-ocs__breakdown-grid dd { text-align: left; }
.urukosoko-ocs__insights { margin: 0 18px 24px; padding: 20px; }
.urukosoko-ocs__result-actions { flex-direction: column; padding: 0 18px 24px; }
.urukosoko-ocs__cta { grid-template-columns: 1fr; padding: 24px 20px; }
.urukosoko-ocs__cta a { white-space: normal; text-align: center; }
.urukosoko-ocs__disclaimer { padding: 16px 20px; }
}
@media print {
body * { visibility: hidden !important; }
.urukosoko-ocs__result-content,
.urukosoko-ocs__result-content * { visibility: visible !important; }
.urukosoko-ocs__result-content {
position: absolute;
inset: 0;
width: 100%;
color: #111;
}
.urukosoko-ocs__print-only { display: block; }
.urukosoko-ocs__print-header { margin-bottom: 18px; }
.urukosoko-ocs__print-header h1 { font-size: 22px; }
.urukosoko-ocs__result-actions,
.urukosoko-ocs__cta { display: none !important; }
.urukosoko-ocs__diagnosis,
.urukosoko-ocs__profit-card,
.urukosoko-ocs__insights { background: #fff !important; }
.urukosoko-ocs__result,
.urukosoko-ocs__profit-card,
.urukosoko-ocs__breakdown-grid section { box-shadow: none !important; }
.urukosoko-ocs__summary-grid { grid-template-columns: repeat(4, 1fr); }
} .urukosoko-ocs__input-guide {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 240px)) 1fr;
align-items: stretch;
gap: 12px;
max-width: 980px;
margin: 22px 0 18px;
}
.urukosoko-ocs__input-guide-item {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 82px;
padding: 13px 17px;
border: 1px solid rgba(255,255,255,.38);
border-radius: 14px;
background: rgba(255,255,255,.14);
}
.urukosoko-ocs__input-guide-item span {
font-size: 14px;
font-weight: 700;
opacity: .86;
}
.urukosoko-ocs__input-guide-item strong {
font-size: 22px;
line-height: 1.35;
}
.urukosoko-ocs__input-guide > p {
display: flex;
align-items: center;
margin: 0;
padding: 14px 18px;
border-left: 3px solid rgba(255,255,255,.88);
border-radius: 9px;
background: rgba(255,255,255,.1);
font-size: 15px;
font-weight: 700;
}
.urukosoko-ocs__service-summary {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
max-width: 1050px;
}
.urukosoko-ocs__service-summary > div {
display: flex;
flex-direction: column;
min-width: 0;
padding: 12px 14px;
border-radius: 12px;
background: rgba(4, 30, 49, .24);
border: 1px solid rgba(255,255,255,.2);
}
.urukosoko-ocs__service-summary span,
.urukosoko-ocs__service-summary small { font-size: 13px; }
.urukosoko-ocs__service-summary span { font-weight: 700; opacity: .88; }
.urukosoko-ocs__service-summary strong { font-size: 20px; line-height: 1.35; }
.urukosoko-ocs__service-summary small { opacity: .8; }
.urukosoko-ocs__details {
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
background: #fff;
}
.urukosoko-ocs__details summary {
cursor: pointer;
list-style: none;
position: relative;
padding: 14px 46px 14px 17px;
font-size: 15px;
font-weight: 800;
}
.urukosoko-ocs__details summary::-webkit-details-marker { display: none; }
.urukosoko-ocs__details summary::after {
content: "+";
position: absolute;
right: 17px;
top: 50%;
transform: translateY(-50%);
font-size: 23px;
line-height: 1;
}
.urukosoko-ocs__details[open] summary::after { content: "−"; }
.urukosoko-ocs__details > div {
padding: 0 17px 16px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 14px;
}
.urukosoko-ocs__details p { margin: 13px 0 0; }
.urukosoko-ocs__details ul { margin: 10px 0 0; padding-left: 1.4em; }
.urukosoko-ocs__details li { margin: 4px 0; }
.urukosoko-ocs__details--hero {
position: relative;
z-index: 1;
max-width: 1050px;
margin-top: 12px;
border-color: rgba(255,255,255,.28);
background: rgba(255,255,255,.09);
color: #fff;
}
.urukosoko-ocs__details--hero > div {
color: rgba(255,255,255,.88);
border-top-color: rgba(255,255,255,.2);
}
.urukosoko-ocs__details--result {
margin: 0;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
background: #f7fafb;
}
.urukosoko-ocs__details--result summary { padding-left: 32px; }
.urukosoko-ocs__details--result > div { padding: 0 32px 18px; }
@media (max-width: 920px) {
.urukosoko-ocs__input-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.urukosoko-ocs__input-guide > p { grid-column: 1 / -1; }
.urukosoko-ocs__service-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.urukosoko-ocs__input-guide,
.urukosoko-ocs__service-summary { grid-template-columns: 1fr; }
.urukosoko-ocs__input-guide > p { grid-column: auto; }
.urukosoko-ocs__input-guide-item { min-height: 70px; }
.urukosoko-ocs__details--result summary { padding-left: 20px; }
.urukosoko-ocs__details--result > div { padding: 0 20px 16px; }
}
@media print {
.urukosoko-ocs__details--result { display: block; }
.urukosoko-ocs__details--result > div { display: block; }
.urukosoko-ocs__details--result summary { display: none; }
}