/* Additions to the 2023 theme: two service groups, clickable cards, dialogs, estimate form. */
.main .service-group + .service-group { margin-top: 50px; }
.main .service-group .group-head { margin: 0 0 25px; border-left: 4px solid #35487A; padding-left: 15px; }
.main .service-group .group-title { color: #35487A; font-family: "Montserrat"; font-size: 26px; font-weight: 600; }
.main .service-group .group-lead { margin-top: 5px; font-size: 16px; line-height: 1.8; }

button.item { font: inherit; text-align: inherit; border: none; cursor: pointer; }
.main #why button.item { text-align: center; }
.main .item .more { display: block; margin-top: 15px; font-size: 14px; font-weight: 600; color: #35487A; text-align: center; text-decoration: underline 1px #35487A; }

.main #service .item-wrap .item .thumb { display: block; width: 100%; max-width: 250px; aspect-ratio: 270 / 187; margin: 0 auto; object-fit: cover; }
.main #service .item-wrap .item .thumb.logo { object-fit: contain; padding: 30px 0; }
.main #service .item-wrap .item .thumb.blank { background: #F5F5F5; }
.main #service .item-wrap .item .note { font-size: 14px; white-space: nowrap; }

.modal { max-width: 560px; width: 90%; border: none; border-radius: 10px; padding: 35px; box-shadow: 0px 2px 10px #0000004d; }
.modal::backdrop { background: rgba(0, 0, 0, .45); }
.modal h3 { color: #35487A; font-size: 24px; font-weight: 600; margin-bottom: 10px; }
.modal .modal-lead { margin-bottom: 15px; line-height: 1.8; }
.modal ol { list-style: decimal; padding-left: 1.4em; line-height: 1.9; }
.modal { max-height: 85vh; }
.modal .themes dt { margin-top: 15px; padding-bottom: 4px; border-bottom: 1px solid #E6E6E6; color: #35487A; font-weight: 600; }
.modal .themes dd { margin: 6px 0 0; padding-left: 1em; text-indent: -1em; line-height: 1.7; }
.modal .themes dd::before { content: "・"; }
.main #why .item .detail { text-align: center; }
.modal .breakdown { width: 100%; border-collapse: collapse; margin: 10px 0; }
.modal .breakdown th, .modal .breakdown td { padding: 10px 5px; border-bottom: 1px solid #E6E6E6; text-align: left; }
.modal .breakdown th { width: 30%; font-weight: 600; }
.modal .close { display: block; margin: 25px auto 0; padding: 8px 40px; background: #35487A; color: #fff; border: 1px solid #35487A; border-radius: 5px; font-size: 16px; font-weight: 600; cursor: pointer; }
.modal .close:hover { background: #fff; color: #35487A; transition: .5s; }

.main #contact .form-wrap input[type="text"], .main #contact .form-wrap input[type="email"] { width: 100%; }
.main #contact .form-wrap .submit input[type="submit"] { width: 100%; padding: 10px 0; background-color: #35487A; text-align: center; color: #fff; font-size: 20px; font-weight: 600; border-radius: 5px; cursor: pointer; }
.main #contact .form-wrap .submit input[type="submit"]:hover { border: 1px solid #35487A; background-color: #fff; color: #35487A; transition: .5s; }