/* v10: proposals adopted on 2026-10-25 (1, 5, 6, 7, 8 and reworked 3, 4), plus the track-record chart slots
   and the contact flow. Loaded after refine.css. */

/* English label above the Japanese heading, short navy rule below */
.sec-title { display: flex; flex-direction: column-reverse; }
.sec-title .sub-title { margin: 0 0 10px 1px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #35487A; }
.sec-title h2::after { content: ""; display: block; width: 28px; height: 2px; margin-top: 14px; background: #35487A; }

/* Grounds: white panels never sit on white. Card sections alternate grey and a navy-tinted grey. */
.main #service, .main #business { background: #F4F5F7; }
.main #why { background: #E9EDF3; }
.main #management { background: #fff; }
.main #company { background: #F4F5F7; }

/* Tighter spacing in the second half */
.main #business, .main #management, .main #company { padding: 80px 0; }
.main #company { padding: 56px 0; }

/* 選ばれる理由: numeral and unit on one baseline */
.main #why .item-wrap .item .abstruct { display: flex; justify-content: center; align-items: baseline; gap: 4px; font-size: 46px; }
.main #why .item-wrap .item .abstruct small { margin: 0; }

/* Track-record charts: one full-width panel (not three separate cards), the three charts side by side inside it; blank for now */
.main #why .charts { margin-top: 24px; padding: 36px 40px 40px; background: #fff; border-radius: 6px; box-shadow: 0 1px 2px rgba(20, 48, 94, .06), 0 6px 20px rgba(20, 48, 94, .08); }
.main #why .charts-en { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #35487A; }
.main #why .charts-head h3 { margin-top: 6px; font-size: 20px; color: #35487A; letter-spacing: .06em; }
.main #why .chart-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.main #why .chart .chart-title { font-size: 15px; color: #35487A; letter-spacing: .08em; }
.main #why .chart .chart-box { display: flex; align-items: center; justify-content: center; margin-top: 10px; aspect-ratio: 4 / 3; background: #F4F5F7; border: 1px dashed #C9CED8; border-radius: 4px; }
.main #why .chart .chart-box span { font-size: 12px; color: #8A8A8A; letter-spacing: .08em; }
@media (max-width: 765px) {
  .main #why .charts { padding: 28px 20px; }
  .main #why .chart-row { grid-template-columns: 1fr; }
}

/* 代表: smaller portrait (to be replaced later), career and the one article beside it */
.main #management .president-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
.main #management .president-wrap .img-wrap { width: auto; margin: 0; }
.main #management .president-wrap .img-wrap img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
.main #management .president-wrap .txt-wrap { width: auto; padding: 0; margin: 0; }
@media (max-width: 898px) {
  .main #management .president-wrap { grid-template-columns: 1fr; max-width: none; gap: 28px; }
  .main #management .president-wrap .img-wrap { width: 200px; }
}

/* 会社概要: full container width, tighter rows, address on one line */
.main #company .sec-title { margin-bottom: 0; }
.main #company .company-main { max-width: none; margin: 24px 0 0; }
.main #company .company-main dl { display: grid; grid-template-columns: 160px minmax(0, 1fr); padding: 12px 0; }
.main #company .company-main dl dt, .main #company .company-main dl dd { width: auto; padding-left: 0; }
.main #company dd { white-space: normal; }
@media (max-width: 765px) { .main #company .company-main dl { grid-template-columns: 96px minmax(0, 1fr); } }

/* ご相談・お見積もり: navy close with the three-step flow */
.main #contact { background: #35487A; }
.main #contact .sec-title h2, .main #contact .txt, .main #contact .label { color: #fff; }
.main #contact .sec-title .sub-title { color: rgba(255, 255, 255, .75); }
.main #contact .sec-title h2::after { background: #fff; }
/* Lead and steps on the left, form on the right; together they span the container */
.main #contact .contact-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 56px; margin-top: 8px; }
.main #contact .txt { line-height: 1.9; }
.main #contact .steps { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.main #contact .steps li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 6px; }
.main #contact .steps b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #fff; border-radius: 50%; color: #fff; font-size: 14px; }
.main #contact .steps span { color: #fff; font-size: 13px; line-height: 1.6; }
.main #contact .contact-grid .form-wrap { max-width: none; margin: 0; }
.main #contact .form-wrap .input-item { display: block; margin: 0 0 18px; }
.main #contact .form-wrap .label, .main #contact .form-wrap .input-field, .main #contact .form-wrap .textarea-item .label { width: 100%; margin-bottom: 8px; }
.main #contact .form-wrap .input-field input { width: 100%; }
.main #contact .form-wrap .submit { margin: 24px 0 0; padding: 0; }
@media (max-width: 898px) { .main #contact .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
.main #contact .form-wrap input:not([type="submit"]), .main #contact .form-wrap textarea { border-color: transparent; font-size: 16px; }
.main #contact .form-wrap .submit input[type="submit"] { background: #fff; color: #35487A; border: 1px solid #fff; }
.main #contact .form-wrap .submit input[type="submit"]:hover { background: transparent; color: #fff; }
.main #contact .form-wrap .label { display: block; }
footer { background: #2A3A63; }

/* Keyboard focus is visible again (reset.css removes outlines) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #F2A900; outline-offset: 2px; }
.nw { white-space: nowrap; }

/* Section leads in dark text (owner, 2026-10-25) */
.main .sec-lead { color: #1A1A1A; }

/* Comments of 2026-10-25 afternoon */
/* 特長: the whole slide, as wide as the panel's inner width, with the same padding on top as on the sides */
.main #service .item-wrap .item { padding: 20px 20px 30px; }
.main #service .item .thumb.slide { width: 100%; max-width: none; margin: 0; border: 1px solid #E6E6E6; border-radius: 3px; }
.main #service .item .thumb.slide img { inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
/* 自社事業: third panel is a placeholder with Coming Soon in the middle */
.main #business .item-wrap .soon-panel { display: flex; align-items: center; justify-content: center; min-height: 240px; }
.main #business .soon-panel .soon { font-family: "Montserrat", sans-serif; font-size: 15px; letter-spacing: .2em; color: #8A8A8A; }
/* 代表: romanised name in body text colour; the article title on one line on wide screens */
.main #management .president-wrap .txt-wrap .name-wrap p { color: #1A1A1A; font-weight: 400; }
@media (min-width: 899px) { .main #management .media-item .media { white-space: nowrap; } }
/* 代表: square portrait (president.jpg, 600 x 600 px) */
@media (min-width: 899px) { .main #management .president-wrap { grid-template-columns: 200px minmax(0, 1fr); } }
.main #management .president-wrap .img-wrap img { aspect-ratio: 1 / 1; object-position: center; }

/* Form: hidden trap field for bots, and the sending status line */
.main #contact .form-wrap .hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.main #contact .form-wrap .form-status { margin: 16px 0 0; min-height: 1.6em; color: #fff; font-size: 14px; }