@charset "UTF-8";
.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
word-break: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}.wpcf7-back{float:left;width:70px;margin-top:5px;position:relative}.cf7msm-ro{white-space:pre-wrap}.wp-pagenavi {
clear: both;
}
.wp-pagenavi a,
.wp-pagenavi span {
border: 1px solid var(--wp-pagenavi-border-color, #bfbfbf);
margin: 2px;
padding: 3px 5px;
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
.wp-pagenavi a,
.wp-pagenavi span {
border-color: var(--wp-pagenavi-border-color, #4f4f4f);
}
}
.wp-pagenavi a:hover,
.wp-pagenavi span.current {
border-color: var(--wp-pagenavi-border-color-current, currentColor);
}
.wp-pagenavi span.current {
font-weight: bold;
}
  *, *::before, *::after {
box-sizing: border-box;
} body, h1, h2, h3, h4, h5, h6,
p, ul, ol, li, figure, figcaption,
blockquote, dl, dt, dd {
margin: 0;
padding: 0;
} ul, ol {
list-style: none;
} a {
text-decoration: none;
color: inherit;
} img {
max-width: 100%;
height: auto;
display: block;
} body {
line-height: 1.6;
font-family: "Noto Sans JP", sans-serif;
color: #333;
background-color: #fff;
} button, input, select, textarea {
font: inherit;
color: inherit;
background: none;
border: none;
outline: none;
} article, aside, footer, header, nav, section, main, figure {
display: block;
} table {
border-collapse: collapse;
border-spacing: 0;
} .c-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 210px;
min-height: 46px;
padding: 8px 38px 8px 18px;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 0.7);
color: #fff;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.04em;
text-decoration: none;
transition: background-color 0.3s ease, color 0.3s ease;
}
.c-button:hover {
background-color: #fff;
color: #062f4d;
}
@media screen and (max-width: 500px) {
.c-button {
max-width: 100%;
}
}
.c-arrow {
position: absolute;
top: 50%;
right: 14px;
font-family: serif;
font-size: 20px;
line-height: 1;
transform: translateY(-52%);
}
.cta-btn {
max-width: 280px;
background-color: #D98C42;
width: 100%;
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
border-radius: 8px;
margin: 0 auto;
transition: all 0.2s ease;
}
@media screen and (max-width: 768px) {
.cta-btn {
max-width: 230px;
font-size: 16px;
}
}
.cta-btn a {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
padding: 16px 0;
}
.cta-btn img {
width: 30px;
height: 30px;
}
@media screen and (max-width: 768px) {
.cta-btn img {
width: 20px;
height: 20px;
}
}
.cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.cta-btn:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.line-btn {
max-width: 280px;
color: #0074C2;
background-color: #FFFFFF;
width: 100%;
font-size: 18px;
font-weight: bold;
border-radius: 8px;
margin: 0 auto;
border: 3px solid #0074C2;
align-items: center;
transition: all 0.2s ease;
}
.line-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.line-btn:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 768px) {
.line-btn {
max-width: 230px;
font-size: 16px;
}
}
.line-btn a {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 14px 0;
width: 100%;
}
.line-btn img {
width: 24px;
height: 24px;
}
@media screen and (max-width: 768px) {
.line-btn img {
width: 20px;
height: 20px;
}
}
.cta-contents {
background-color: #f1f5f9;
background-color: #fff4e5;
background-color: #f7f9fc;
padding: 60px 0;
}
.cta-contents img {
width: 20px;
height: 20px;
}
.cta-top-text {
text-align: center;
padding: 0 20px 16px 20px;
}
@media screen and (max-width: 768px) {
.cta-top-text {
font-size: 14px;
}
}
.cta-top-text-top {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-weight: normal;
font-size: 16px;
}
@media screen and (max-width: 768px) {
.cta-top-text-top {
font-size: 14px;
}
}
.cta-bottom-text {
display: flex;
justify-content: center;
gap: 20px;
padding-top: 16px;
}
@media screen and (max-width: 768px) {
.cta-bottom-text {
flex-direction: column;
font-size: 14px;
}
}
.cta-bottom-text-list {
display: flex;
gap: 10px;
align-items: center;
}
@media screen and (max-width: 768px) {
.cta-bottom-text-list {
justify-content: center;
}
}
.blue-btn {
background-color: #003366;
padding: 10px 0;
border-radius: 8px;
color: #FFFFFF;
border: 3px solid #003366;
display: inline-block;
height: 50px;
width: 128px;
text-align: center;
}
.blue-border-btn {
max-width: 180px;
padding: 8px 0;
background-color: #FFFFFF;
width: 100%;
color: #0074C2;
border: 2px solid #0074C2;
font-size: 16px;
font-weight: bold;
border-radius: 8px;
margin: 16px auto;
text-align: center;
display: block;
}
.blue-text {
color: #003366;
} .contact-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
width: 100%;
min-height: 72px;
padding: 14px 52px 14px 24px;
border: 1px solid rgba(255, 255, 255, 0.7);
background-color: rgba(1, 31, 53, 0.55);
color: #fff;
text-decoration: none;
transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.contact-button:hover {
transform: translateY(-2px);
}
@media screen and (max-width: 768px) {
.contact-button {
min-height: 66px;
}
}
.contact-button-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 26px;
}
.contact-button-icon img {
display: block;
width: 100%;
height: auto;
}
.contact-button-text {
font-family: "Zen Old Mincho", serif;
font-size: 15px;
font-weight: 500;
letter-spacing: 0.06em;
color: #fff;
}
@media screen and (max-width: 768px) {
.contact-button-text {
font-size: 14px;
}
}
.contact-button-arrow {
position: absolute;
top: 50%;
right: 20px;
font-size: 23px;
transform: translateY(-52%);
transition: transform 0.3s ease;
}
.contact-button:hover .contact-button-arrow {
transform: translate(4px, -52%);
} .section {
padding: 100px 0;
}
@media screen and (max-width: 768px) {
.section {
padding: 60px 0;
}
}  .section-heading {
padding-top: 4px;
}
@media screen and (max-width: 768px) {
.section-heading {
padding-top: 0;
}
}
.section-heading-en {
display: flex;
align-items: center;
gap: 16px;
}
.section-heading-en span {
color: #668096;
font-size: 15px;
letter-spacing: 0.18em;
font-family: serif;
}
.section-heading-en::after {
content: "";
display: block;
width: 110px;
height: 1px;
background-color: #c9d1d7;
}
.section-heading-en::after--white {
color: #fff;
}
@media screen and (max-width: 768px) {
.section-heading-en::after {
width: 80px;
}
}
.section-heading-ja {
font-size: 28px;
font-family: "Zen Old Mincho", serif;
color: #1F2937;
padding-bottom: 16px;
position: relative;
text-align: left;
font-weight: 500;
}
.section-heading-ja--white {
color: #fff;
}
@media screen and (max-width: 768px) {
.section-heading-ja {
font-size: 18px;
}
}
.section-heading-text {
margin-bottom: 24px;
color: #4d5c67;
font-size: 15px;
line-height: 1.9;
letter-spacing: 0.03em;
text-align: left;
}
.section-heading-text--white {
color: #fff;
}
.service-post-visual {
position: relative;
width: 100%;
height: 280px;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 768px) {
.service-post-visual {
height: 140px;
}
}
.service-post-visual .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
z-index: 1;
}
.service-post-visual .service-post-section-title {
position: relative;
z-index: 2;
text-align: center;
}
.service-post-visual .service-post-title {
color: #FFFFFF;
font-family: "Zen Old Mincho", serif;
font-size: 48px;
font-weight: bold;
margin: 0;
}
@media screen and (max-width: 768px) {
.service-post-visual .service-post-title {
font-size: 22px;
}
} body.postid-55 .service-post-visual {
background-position: center 30%;
} body.postid-51 .service-post-visual {
background-position: center 17%;
}
.to-top {
position: fixed;
bottom: 90px;
right: 10px;
display: none; background-color: #003366;
color: #fff;
padding: 20px 16px;
text-align: center;
text-decoration: none;
z-index: 999;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
border: 1px solid #D1D5DB;
}
.to-top img {
width: 22px;
height: auto;
}
.to-top:hover {
background-color: #003f87;
} .card-arrow {
position: absolute;
right: 13px;
bottom: 16px;
color: #082b49;
font-family: serif;
font-size: 23px;
line-height: 1;
} .c-section-heading {
color: #082b49;
} .c-section-heading__en {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 24px;
color: #082b49;
font-family: "Times New Roman", serif;
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.16em;
text-transform: uppercase;
}
@media screen and (max-width: 500px) {
.c-section-heading__en {
gap: 14px;
margin-bottom: 18px;
font-size: 14px;
}
}
.c-section-heading__line {
display: block;
width: 190px;
max-width: 30vw;
height: 1px;
background-color: currentColor;
opacity: 0.65;
}
@media screen and (max-width: 500px) {
.c-section-heading__line {
width: 90px;
}
} .c-section-heading__title {
margin: 0;
color: #082b49;
font-family: "Zen Old Mincho", serif;
font-size: clamp(42px, 5vw, 68px);
font-weight: 500;
line-height: 1.25;
letter-spacing: 0.08em;
}
@media screen and (max-width: 500px) {
.c-section-heading__title {
font-size: 36px;
letter-spacing: 0.05em;
}
} .c-section-heading__lead {
margin: 24px 0 0;
color: #163953;
font-family: "Zen Old Mincho", serif;
font-size: 16px;
line-height: 2;
letter-spacing: 0.07em;
}
@media screen and (max-width: 500px) {
.c-section-heading__lead {
margin-top: 18px;
font-size: 14px;
line-height: 1.9;
}
}
body.admin-bar #header {
top: 32px;
}
body.no-scroll {
position: fixed;
width: 100%;
overflow: hidden;
}
.wrapper {
margin: 0 auto;
padding: 0 40px;
max-width: 1300px;
}
@media screen and (max-width: 768px) {
.wrapper {
padding: 0 20px;
}
}
a {
list-style: none;
}
br.sp-br {
display: none;
}
@media screen and (max-width: 768px) {
br.sp-br {
display: inline;
}
}
main {
overflow: hidden;
}
.about-section {
background-color: #fff;
} .reason-contents {
display: grid;
grid-template-columns: 220px repeat(3, 1fr);
gap: 32px;
align-items: start;
}
@media screen and (max-width: 768px) {
.reason-contents {
grid-template-columns: 1fr;
gap: 32px;
}
} .reason-contents-list {
position: relative;
width: 100%;
height: auto;
padding: 0;
background-color: transparent;
box-shadow: none;
border-radius: 0;
text-align: left;
box-sizing: border-box;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
@media screen and (max-width: 768px) {
.reason-contents-list {
width: 100%;
max-width: 520px;
height: auto;
margin: 0 auto;
}
}
.reason-contents-list.show {
opacity: 1;
transform: translateY(0);
} .reason-card-image {
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
}
.reason-card-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
} .reason-card-body {
position: relative;
padding-top: 18px;
}
.reason-card-body h3 {
height: auto;
margin: 0 0 12px;
padding-left: 4px;
align-content: initial;
font-size: 18px;
line-height: 1.6;
letter-spacing: 0.03em;
font-weight: 500;
color: #082b49;
}
@media screen and (max-width: 768px) {
.reason-card-body h3 {
height: auto;
font-size: 18px;
}
}
.reason-card-body p {
margin: 0;
padding-left: 4px;
font-size: 13px;
line-height: 1.9;
color: #495967;
}
@media screen and (max-width: 768px) {
.reason-card-body p {
font-size: 14px;
}
.reason-card-body p br {
display: none;
}
} .reason-number {
position: absolute;
transform: translateY(-50%);
bottom: 70%;
left: 0;
background-color: #fff;
display: block;
padding: 4px;
font-size: 34px;
line-height: 1;
font-weight: 400;
font-style: italic;
font-family: "Times New Roman", serif;
color: gray;
}
@media screen and (max-width: 768px) {
.reason-number {
font-size: 30px;
}
} .faq-section {
background: linear-gradient(135deg, #f5f9fc 0%, #edf4f8 48%, #f9fbfd 100%);
} .faq-contents {
display: grid;
grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.35fr);
gap: 48px;
}
@media screen and (max-width: 768px) {
.faq-contents {
grid-template-columns: 1fr;
gap: 36px;
}
} .faq-left {
position: relative;
min-width: 0;
} .faq-right {
min-width: 0;
} .faq-contents-list {
width: 100%;
} .faq-item {
margin: 0;
padding: 0;
border: 0;
border-top: 1px solid #d9e0e5;
border-radius: 0;
background-color: transparent;
box-shadow: none;
}
.faq-item:last-child {
border-bottom: 1px solid #d9e0e5;
} .faq-summary {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: 55px;
padding: 13px 16px 13px 14px;
cursor: pointer;
list-style: none;
transition: background-color 0.3s ease;
}
.faq-summary:hover {
background-color: #f7f9fa;
}
.faq-summary::-webkit-details-marker {
display: none;
}
.faq-summary::marker {
display: none;
content: "";
}
@media screen and (max-width: 768px) {
.faq-summary {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 58px;
}
} .faq-question {
padding-right: 10px;
color: #082b49;
font-size: 16px;
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.03em;
}
@media screen and (max-width: 768px) {
.faq-question {
font-size: 14px;
}
} .faq-icon {
position: relative;
flex-shrink: 0;
width: 16px;
height: 16px;  }
.faq-icon::before, .faq-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
background-color: #082b49;
transform: translate(-50%, -50%);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.faq-icon::before {
width: 12px;
height: 1px;
}
.faq-icon::after {
width: 1px;
height: 12px;
} .faq-item[open] .faq-icon::after {
opacity: 0;
transform: translate(-50%, -50%) rotate(90deg);
}
.faq-item[open] .faq-summary {
background-color: #f7f9fa;
} .faq-answer {
padding: 18px 40px 18px 14px;
color: #52616c;
font-size: 15px;
line-height: 1.9;
letter-spacing: 0.02em;
}
.faq-answer p {
margin: 0;
font-size: 14px;
}
@media screen and (max-width: 768px) {
.faq-answer {
padding: 0 36px 18px 14px;
}
} .faq-list-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
margin-top: 14px;
border: 1px solid #aab8c2;
color: #082b49;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.05em;
text-decoration: none;
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.faq-list-button:hover {
background-color: #082b49;
border-color: #082b49;
color: #fff;
}
.faq-list-arrow {
position: absolute;
top: 50%;
right: 18px;
font-size: 20px;
line-height: 1;
transform: translateY(-52%);
} @media screen and (max-width: 520px) {
.faq-contents {
gap: 30px;
}
.faq-summary {
padding: 14px 12px;
}
.faq-question {
font-size: 16px;
}
.faq-answer {
padding: 0 34px 16px 12px;
font-size: 14px;
}
} .company-section {
background-color: #fff;
} .company-inner {
width: 100%;
} .company-overview {
display: grid;
grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
gap: clamp(60px, 8vw, 130px);
align-items: flex-start;
}
@media screen and (max-width: 768px) {
.company-overview {
grid-template-columns: 1fr;
gap: 40px;
}
} .company-heading {
min-width: 0;
} .company-heading-en {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 8px;
}
.company-heading-en span {
color: #7189a3;
font-size: 15px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.18em;
}
.company-heading-en::after {
content: "";
display: block;
width: 76px;
height: 1px;
background-color: #9db2c5;
} .company-heading-ja {
margin: 0;
color: #082b49;
font-size: clamp(32px, 3vw, 44px);
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.04em;
} .company-heading-text {
margin-top: 26px;
color: #183c5a;
font-size: 16px;
font-weight: 400;
line-height: 2;
letter-spacing: 0.06em;
}
.company-heading-text p {
margin: 0;
}
.company-heading-text p + p {
margin-top: 12px;
} .company-info-contents {
width: 100%;
min-width: 0;
}
.company-info {
width: 100%;
margin: 0;
border-top: 1px solid #cedae3;
} .company-info-row {
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
min-height: 58px;
margin: 0;
border-bottom: 1px solid #cedae3;  }
.company-info-row dt,
.company-info-row dd {
display: flex;
align-items: center;
margin: 0;
padding: 13px 24px;
line-height: 1.8;
letter-spacing: 0.03em;
}
.company-info-row dt {
background-color: #f4f7f9;
color: #082b49;
font-size: 15px;
font-weight: 600;
}
.company-info-row dd {
color: #183c5a;
font-size: 15px;
font-weight: 400;
}
@media screen and (max-width: 768px) {
.company-info-row {
grid-template-columns: 130px minmax(0, 1fr);
}
.company-info-row dt,
.company-info-row dd {
padding: 13px 18px;
}
} .company-message {
display: grid;
grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
gap: clamp(50px, 7vw, 100px);
max-width: 1040px;
margin: clamp(60px, 7vw, 90px) auto 0;
padding-top: clamp(40px, 4vw, 54px);
border-top: 1px solid #cedae3;
}
@media screen and (max-width: 768px) {
.company-message {
grid-template-columns: 1fr;
gap: 40px;
max-width: 680px;
}
} .company-message-image {
width: 100%;
max-width: 280px;
margin: 0 auto;
overflow: hidden;
}
.company-message-image img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4/5;
object-fit: cover;
object-position: center top;
}
@media screen and (max-width: 768px) {
.company-message-image {
max-width: 360px;
}
} .company-message-content {
width: 100%;
min-width: 0;
} .company-message-heading {
display: flex;
align-items: center;
gap: 22px;
margin-bottom: 26px;
}
.company-message-heading h3 {
margin: 0;
color: #082b49;
font-size: 21px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.08em;
} .company-message-heading-line {
display: block;
flex-shrink: 0;
width: 52px;
height: 1px;
background-color: #8298aa;
} .company-message-text {
color: #183c5a;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
letter-spacing: 0.05em;
}
.company-message-text p {
margin: 0;
}
.company-message-text p + p {
margin-top: 24px;
} .company-ceo {
display: flex;
align-items: baseline;
gap: 16px;
margin-top: 28px;
color: #183c5a;
justify-content: end;
} .company-ceo-position {
font-size: 15px;
font-weight: 400;
letter-spacing: 0.04em;
} .company-ceo-name {
font-size: 18px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.08em;
} .pc-only {
display: block;
}
@media screen and (max-width: 768px) {
.pc-only {
display: none;
}
} @media screen and (max-width: 768px) {
.company-heading-text {
margin-top: 20px;
font-size: 15px;
}
.company-message-content {
max-width: 600px;
margin: 0 auto;
}
} @media screen and (max-width: 520px) { .company-overview {
gap: 30px;
}
.company-heading-en {
gap: 16px;
}
.company-heading-en span {
font-size: 13px;
}
.company-heading-en::after {
width: 60px;
}
.company-heading-ja {
font-size: 30px;
}
.company-heading-text {
margin-top: 18px;
font-size: 14px;
line-height: 1.9;
} .company-info-row {
grid-template-columns: 92px minmax(0, 1fr);
min-height: 52px;
}
.company-info-row dt,
.company-info-row dd {
align-items: flex-start;
padding: 12px 12px;
font-size: 13px;
line-height: 1.8;
}
.company-info-row dt {
padding-right: 8px;
}
.company-info-row dd {
padding-left: 14px;
} .company-message {
gap: 30px;
margin-top: 50px;
padding-top: 36px;
}
.company-message-image {
max-width: 210px;
}
.company-message-image img {
aspect-ratio: 6/5;
object-position: 50% 20%;
}
.company-message-heading {
gap: 14px;
margin-bottom: 20px;
}
.company-message-heading h3 {
font-size: 23px;
}
.company-message-heading-line {
width: 38px;
}
.company-message-text {
font-size: 14px;
line-height: 1.95;
}
.company-message-text p + p {
margin-top: 20px;
} .company-ceo {
gap: 12px;
margin-top: 24px;
justify-content: end;
}
.company-ceo-position {
font-size: 13px;
}
.company-ceo-name {
font-size: 21px;
}
} .company-map {
display: flex;
justify-content: center;
margin: 40px 0;
}
.company-map iframe {
width: 100%;
max-width: 600px;
height: 400px;
border: 0;
}
@media screen and (max-width: 768px) {
.company-map iframe {
height: 300px;
}
} .contact-section {
position: relative;
width: 100%;
overflow: hidden;
color: #fff;
} .contact-background {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
}
.contact-background img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
} .contact-overlay {
position: absolute;
inset: 0;
z-index: 1;
background-color: rgba(42, 94, 128, 0.88);
}
.contact-section .wrapper {
position: relative;
z-index: 2;
} .contact-contents {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
gap: 60px;
align-items: center;
min-height: 180px;
padding: 32px 0;
}
@media screen and (max-width: 768px) {
.contact-contents {
grid-template-columns: 1fr;
gap: 28px;
padding: 40px 0;
}
} .contact-message-main {
margin: 0 0 6px;
color: #fff;
font-family: "Zen Old Mincho", serif;
font-size: 32px;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.06em;
}
@media screen and (max-width: 768px) {
.contact-message-main {
font-size: 24px;
text-align: center;
}
}
.contact-message-sub {
margin: 0;
color: rgba(255, 255, 255, 0.9);
font-family: "Zen Old Mincho", serif;
font-size: 24px;
line-height: 1.6;
letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
.contact-message-sub {
font-size: 18px;
text-align: center;
}
} .contact-action {
width: 100%;
} .contact-tel {
display: flex;
align-items: baseline;
justify-content: center;
gap: 12px;
margin-top: 15px;
}
.contact-tel-label {
font-family: "Times New Roman", serif;
font-size: 14px;
letter-spacing: 0.18em;
color: rgba(255, 255, 255, 0.7);
}
.contact-tel-number {
color: #fff;
font-family: "Times New Roman", serif;
font-size: 24px;
font-weight: 400;
line-height: 1.3;
letter-spacing: 0.05em;
text-decoration: none;
transition: opacity 0.3s ease;
}
.contact-tel-number:hover {
opacity: 0.75;
}
@media screen and (max-width: 768px) {
.contact-tel-number {
font-size: 22px;
}
} .contact-tel-time {
margin: 3px 0 0;
color: rgba(255, 255, 255, 0.72);
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.04em;
text-align: center;
} @media screen and (max-width: 520px) {
.contact-contents {
gap: 26px;
padding: 34px 0;
}
.contact-message-main {
font-size: 19px;
}
.contact-message-sub {
font-size: 15px;
}
.contact-button {
padding: 12px 42px 12px 18px;
}
.contact-button-icon {
width: 22px;
}
.contact-button-text {
font-size: 13px;
}
.contact-tel {
margin-top: 13px;
}
.contact-tel-number {
font-size: 24px;
}
} .contact-web-time {
margin: 8px 0 0;
color: rgba(255, 255, 255, 0.72);
font-size: 15px;
line-height: 1.5;
letter-spacing: 0.05em;
text-align: center;
}
@media screen and (max-width: 768px) {
.contact-web-time {
font-size: 15px;
}
} .contact-tel {
display: flex;
align-items: baseline;
justify-content: center;
gap: 12px;
margin-top: 32px;
} .contact-page {
background-color: #fff;
color: #082b49;
} .contact-hero {
position: relative;
min-height: 350px;
overflow: hidden;
background-color: #eaf2f7;
background-position: center;
background-repeat: no-repeat;
background-size: cover; }
.contact-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.83) 30%, rgba(255, 255, 255, 0.2) 63%, rgba(255, 255, 255, 0) 73%);
}
@media screen and (max-width: 768px) {
.contact-hero {
min-height: 330px;
}
}
@media screen and (max-width: 500px) {
.contact-hero {
min-height: 300px;
background-position: 66% center;
}
.contact-hero::before {
background: linear-gradient(90deg, rgba(240, 248, 253, 0.97) 0%, rgba(240, 248, 253, 0.92) 35%, rgba(240, 248, 253, 0.65) 55%, rgba(240, 248, 253, 0) 80%);
}
} .contact-hero__inner {
position: relative;
z-index: 2;
width: min(1180px, 100% - 80px);
margin: 0 auto;
padding: 66px 0 55px;
box-sizing: border-box;
}
@media screen and (max-width: 500px) {
.contact-hero__inner {
width: calc(100% - 40px);
padding: 48px 0 40px;
}
} .contact-hero__heading {
max-width: 620px;
}
.contact-hero__heading .c-section-heading__en {
color: #527087;
font-size: 13px;
letter-spacing: 0.17em;
}
.contact-hero__heading .c-section-heading__title {
color: #082d4b;
font-family: "Zen Old Mincho", serif;
font-size: clamp(48px, 5vw, 66px);
font-weight: 500;
letter-spacing: 0.08em;
}
.contact-hero__heading .c-section-heading__lead {
margin-top: 17px;
color: #284c65;
font-size: 15px;
font-weight: 500;
line-height: 1.9;
}
@media screen and (max-width: 500px) {
.contact-hero__heading .c-section-heading__title {
font-size: 38px;
}
.contact-hero__heading .c-section-heading__lead {
font-size: 13px;
}
} .contact-hero__message {
position: absolute;
top: 0;
right: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 17%;
height: 100%;
padding: 25px 10px;
box-sizing: border-box;
color: #fff;
background: linear-gradient(135deg, rgba(4, 45, 76, 0.96), rgba(4, 38, 65, 0.78));
}
.contact-hero__message p {
margin: 0;
font-family: "Zen Old Mincho", serif;
font-size: 24px;
line-height: 2;
letter-spacing: 0.17em;
writing-mode: vertical-rl;
}
.contact-hero__message span {
display: block;
margin-top: 28px;
font-family: "Times New Roman", serif;
font-size: 20px;
font-style: italic;
line-height: 1.15;
transform: rotate(-7deg);
}
@media screen and (max-width: 768px) {
.contact-hero__message {
width: 20%;
}
.contact-hero__message p {
font-size: 18px;
}
}
@media screen and (max-width: 500px) {
.contact-hero__message {
display: none;
}
} .contact-breadcrumb {
width: min(1180px, 100% - 80px);
margin: 0 auto;
padding: 14px 0;
box-sizing: border-box;
}
@media screen and (max-width: 500px) {
.contact-breadcrumb {
width: calc(100% - 40px);
}
} .contact-main {
padding: 45px 0 85px;
background-color: #fff;
}
@media screen and (max-width: 500px) {
.contact-main {
padding: 30px 0 55px;
}
}
.contact-main__inner {
display: grid;
grid-template-columns: 330px minmax(0, 1fr);
gap: 65px;
align-items: start;
width: min(1080px, 100% - 80px);
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.contact-main__inner {
grid-template-columns: 1fr;
gap: 35px;
width: calc(100% - 40px);
}
} .contact-main__intro {
position: sticky;
top: 120px;
}
@media screen and (max-width: 500px) {
.contact-main__intro {
position: static;
}
} .contact-main__heading .c-section-heading__en {
color: #668095;
font-size: 12px;
letter-spacing: 0.16em;
}
.contact-main__heading .c-section-heading__title {
margin-top: 8px;
color: #082e4d;
font-family: "Zen Old Mincho", serif;
font-size: 29px;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.04em;
}
@media screen and (max-width: 500px) {
.contact-main__heading .c-section-heading__title {
font-size: 25px;
}
} .contact-main__lead {
margin: 25px 0 0;
color: #435e71;
font-size: 14px;
line-height: 2;
letter-spacing: 0.03em;
} .contact-main__notice {
margin-top: 24px;
padding: 17px 10px;
background-color: #f3f8fb;
}
.contact-main__notice p {
margin: 0 0 5px;
color: #536c7d;
font-size: 14px;
line-height: 1.75;
}
.contact-main__notice p:last-child {
margin-bottom: 0;
} .contact-main__info {
margin-top: 28px;
border-top: 1px solid #d8e2e9;
}
.contact-main__info-item {
padding: 20px 0;
border-bottom: 1px solid #d8e2e9;
}
.contact-main__info-item p {
margin: 6px 0 0;
color: #536d80;
font-size: 15px;
line-height: 1.8;
}
.contact-main__info-item small {
display: block;
margin-top: 6px;
color: #718593;
font-size: 13px;
}
.contact-main__info-label {
display: block;
color: #506a7d;
font-size: 15px;
letter-spacing: 0.04em;
}
.contact-main__tel {
display: inline-block;
margin-top: 5px;
color: #082e4d;
font-family: "Times New Roman", serif;
font-size: 27px;
letter-spacing: 0.04em;
text-decoration: none;
} .contact-main__form {
min-width: 0;
}
.contact-main__form-inner {
padding: 42px 45px;
box-sizing: border-box;
background: linear-gradient(120deg, #f7fbfe, #eef6fb);
}
@media screen and (max-width: 768px) {
.contact-main__form-inner {
padding: 35px 30px;
}
}
@media screen and (max-width: 500px) {
.contact-main__form-inner {
padding: 30px 20px;
}
} .contact-form-contents {
width: 100%;
}
.contact-form-subtitle {
padding: 20px 0 40px;
text-align: center;
} .contact-form-contents .form-group {
margin: 0 0 30px;
}
.contact-form-contents .form-group > label {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 10px;
color: #123a57;
font-family: "Zen Old Mincho", serif;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.04em;
}
@media screen and (max-width: 500px) {
.contact-form-contents .form-group {
margin-bottom: 25px;
}
} .contact-form-contents .required {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 3px;
min-width: 37px;
min-height: 20px;
padding: 2px 6px;
box-sizing: border-box;
background-color: #e8703c;
color: #fff;
font-family: inherit;
font-size: 9px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.03em;
} .contact-form-contents .wide {
width: 100%;
}
.contact-form-contents input[type=text],
.contact-form-contents input[type=email],
.contact-form-contents input[type=tel],
.contact-form-contents textarea {
width: 100%;
padding: 13px 15px;
border: 1px solid #bdceda;
border-radius: 0;
box-sizing: border-box;
background-color: #fff;
color: #173b56;
font-family: inherit;
font-size: 14px;
line-height: 1.7;
outline: none;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.contact-form-contents input[type=text]::placeholder,
.contact-form-contents input[type=email]::placeholder,
.contact-form-contents input[type=tel]::placeholder,
.contact-form-contents textarea::placeholder {
color: #9aaab5;
}
.contact-form-contents input[type=text]:focus,
.contact-form-contents input[type=email]:focus,
.contact-form-contents input[type=tel]:focus,
.contact-form-contents textarea:focus {
border-color: #336c92;
box-shadow: 0 0 0 2px rgba(51, 108, 146, 0.08);
}
.contact-form-contents input[type=text],
.contact-form-contents input[type=email],
.contact-form-contents input[type=tel] {
min-height: 50px;
}
.contact-form-contents textarea {
min-height: 155px;
resize: vertical;
}
@media screen and (max-width: 500px) {
.contact-form-contents input[type=text],
.contact-form-contents input[type=email],
.contact-form-contents input[type=tel],
.contact-form-contents textarea {
font-size: 16px;
}
} .contact-works-select .wpcf7-form-control {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
@media screen and (max-width: 500px) {
.contact-works-select .wpcf7-form-control {
grid-template-columns: 1fr;
}
}
.contact-works-select .wpcf7-list-item {
margin: 0;
}
.contact-works-select .wpcf7-list-item-label {
position: relative;
display: flex;
align-items: center;
min-height: 45px;
padding: 8px 13px 8px 42px;
border: 1px solid #bdceda;
box-sizing: border-box;
background-color: #fff;
color: #173b56;
font-size: 13px;
cursor: pointer;
transition: border-color 0.25s ease, background-color 0.25s ease;
}
.contact-works-select .wpcf7-list-item-label::before {
content: "";
position: absolute;
left: 15px;
width: 15px;
height: 15px;
border: 1px solid #8fa8b9;
box-sizing: border-box;
background-color: #fff;
}
.contact-works-select .wpcf7-list-item-label::after {
content: "";
position: absolute;
left: 20px;
width: 5px;
height: 9px;
border: solid #0a5c8e;
border-width: 0 2px 2px 0;
opacity: 0;
transform: rotate(45deg) translateY(-1px);
}
.contact-works-select input[type=checkbox] {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
}
.contact-works-select input[type=checkbox]:checked + .wpcf7-list-item-label {
border-color: #477b9e;
background-color: #edf5fa;
}
.contact-works-select input[type=checkbox]:checked + .wpcf7-list-item-label::after {
opacity: 1;
} .contact-confirm-area {
margin-top: 5px;
padding: 25px 25px 5px;
background-color: #fff;
}
.confirm-check .wpcf7-list-item,
.box_check .wpcf7-list-item {
margin: 0;
}
.confirm-check label,
.box_check label {
position: relative;
display: flex;
align-items: center;
gap: 11px;
color: #405e73;
font-size: 14px;
cursor: pointer;
}
.confirm-check input[type=checkbox],
.box_check input[type=checkbox] {
width: 17px;
height: 17px;
margin: 0;
accent-color: #0a547f;
cursor: pointer;
}
.privacy-text {
color: #0a557f;
text-decoration: underline;
}
.privacy-text:hover {
text-decoration: none;
} .contact-form-contents .form-btn {
margin: 32px 0 0;
text-align: center;
}
.contact-form-contents input[type=submit] {
position: relative;
width: min(420px, 100%);
min-height: 58px;
margin: 0;
padding: 12px 55px;
border: 0;
border-radius: 0;
box-sizing: border-box;
background: linear-gradient(90deg, #073858, #052d49);
color: #fff;
font-family: inherit;
font-size: 14px;
letter-spacing: 0.2em;
cursor: pointer;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.contact-form-contents input[type=submit]:hover {
opacity: 0.88;
transform: translateY(-1px);
} .contact-form-contents .wpcf7-not-valid-tip {
margin-top: 7px;
color: #c94f39;
font-size: 15px;
}
.contact-form-contents .wpcf7-response-output {
margin: 25px 0 0 !important;
padding: 14px 18px !important;
border: 1px solid #99afbd !important;
background-color: #fff;
color: #25485f;
font-size: 12px;
line-height: 1.8;
} .contact-page .c-section-heading__en {
display: flex;
align-items: center;
gap: 15px;
} @media screen and (max-width: 500px) {
.contact-main__lead br {
display: none;
}
.contact-main__notice {
margin-top: 20px;
}
.contact-main__info {
margin-top: 23px;
}
.contact-confirm-area {
padding: 20px 15px 3px;
}
.contact-main__tel {
font-size: 24px;
}
.contact-page .c-section-heading__en {
gap: 10px;
}
.contact-page .c-section-heading__en::after {
width: 45px;
}
} #header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
width: 100%;
height: 72px;
background-color: rgba(255, 255, 255, 0.98);
border-bottom: 1px solid rgba(8, 43, 73, 0.07);
box-shadow: 0 2px 12px rgba(8, 43, 73, 0.035);
} .header-inner {
display: flex;
align-items: center;
width: 100%;
height: 100%;
margin: 0 auto;
padding-left: clamp(24px, 5vw, 90px);
} .site-title {
flex-shrink: 0;
margin-right: auto;
} .header-logo {
display: flex;
align-items: center;
gap: 10px;
color: #082b49;
text-decoration: none;
transition: opacity 0.3s ease;
width: 100px;
}
.header-logo:hover {
opacity: 0.75;
} .header-logo > img {
display: block;
flex-shrink: 0;
width: 46px;
height: auto;
object-fit: contain;
} @media screen and (max-width: 1135px) {
.header-logo > img {
width: 32px;
height: 32px;
max-width: 32px;
}
} @media screen and (max-width: 768px) {
.header-logo > img {
width: 30px;
height: 30px;
max-width: 30px;
}
} .header-logo-text {
display: flex;
align-items: center;
min-width: 0;
} .header-company-name {
margin: 0;
color: #102f4b;
font-family: "Zen Old Mincho", serif;
font-size: 18px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.04em;
white-space: nowrap;
}
@media screen and (max-width: 1135px) {
.header-company-name {
font-size: 15px;
}
}
@media screen and (max-width: 768px) {
.header-company-name {
font-size: 14px;
}
} .navi {
flex-shrink: 0;
height: 100%;
} .navi-menu {
display: flex;
align-items: center;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
} .navi-menu-text {
height: 100%;
}
.navi-menu-text > a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 clamp(11px, 1.1vw, 18px);
color: #173650;
font-family: "Zen Old Mincho", serif;
font-size: 15px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.035em;
text-decoration: none;
white-space: nowrap;
transition: color 0.3s ease; }
.navi-menu-text > a::after {
content: "";
position: absolute;
left: 50%;
bottom: 16px;
width: 0;
height: 1px;
background-color: #082f4c;
transform: translateX(-50%);
transition: width 0.3s ease;
}
.navi-menu-text > a:hover {
color: #082f4c;
}
.navi-menu-text > a:hover::after {
width: calc(100% - 24px);
} .header-contact-item {
align-self: stretch;
flex-shrink: 0;
height: 100%;
margin-left: 14px;
} .header-contact-button {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: clamp(190px, 15vw, 235px);
height: 100%;
padding: 0 26px;
background-color: #073554;
color: #fff;
font-family: "Zen Old Mincho", serif;
font-size: 15px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.07em;
text-decoration: none;
transition: background-color 0.3s ease;
}
.header-contact-button:hover {
background-color: #0d456c;
} .header-contact-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 19px;
}
.header-contact-icon img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
} .humberger {
position: relative;
display: none;
flex-shrink: 0;
width: 32px;
height: 25px;
margin: 0;
padding: 0;
border: 0;
background-color: transparent;
cursor: pointer;
}
.humberger span {
position: absolute;
left: 0;
display: block;
width: 100%;
height: 2px;
background-color: #082f4c;
transition: transform 0.4s ease, top 0.4s ease, opacity 0.3s ease;
}
.humberger span:nth-child(1) {
top: 1px;
}
.humberger span:nth-child(2) {
top: 11px;
}
.humberger span:nth-child(3) {
top: 21px;
} #header.active .humberger span:nth-child(1) {
top: 11px;
transform: rotate(45deg);
}
#header.active .humberger span:nth-child(2) {
opacity: 0;
}
#header.active .humberger span:nth-child(3) {
top: 11px;
transform: rotate(-45deg);
} @media screen and (max-width: 1350px) {
.header-inner {
padding-left: 28px;
} .navi-menu-text > a {
padding: 0 10px;
font-size: 13px;
}
.header-contact-item {
margin-left: 8px;
}
.header-contact-button {
width: 185px;
padding: 0 18px;
font-size: 14px;
}
} @media screen and (max-width: 1120px) {
#header {
height: 70px;
}
.header-inner {
justify-content: space-between;
padding: 0 28px;
}
.site-title {
margin-right: 0;
} .navi {
position: fixed;
top: 70px;
right: 0;
z-index: 999;
width: 100%;
height: calc(100dvh - 70px);
margin: 0;
padding: 35px 32px 60px;
overflow-y: auto;
background-color: rgba(255, 255, 255, 0.99); opacity: 0;
visibility: hidden;
pointer-events: none; transform: translateY(8px);
transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}
#header.active .navi {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.navi-menu {
flex-direction: column;
align-items: stretch;
width: 100%;
height: auto;
}
.navi-menu-text {
width: 100%;
height: auto;
border-bottom: 1px solid #e0e7eb;
}
.navi-menu-text > a {
justify-content: flex-start;
width: 100%;
height: auto;
padding: 18px 4px;
font-size: 16px;
}
.navi-menu-text > a::after {
display: none;
} .header-contact-item {
width: 100%;
height: auto;
margin: 30px 0 0;
}
.header-contact-button {
width: 100%;
max-width: 360px;
height: 58px;
margin: 0 auto;
font-size: 15px;
} .humberger {
display: block;
}
} @media screen and (max-width: 520px) {
#header {
height: 64px;
}
.header-inner {
padding: 0 15px;
} .header-logo {
gap: 8px;
}
.header-logo > img {
width: 36px;
height: auto;
max-width: none;
}
.header-company-name {
font-size: 13px;
letter-spacing: 0.03em;
} .navi {
top: 64px;
height: calc(100dvh - 64px);
padding: 26px 20px 50px;
}
.navi-menu-text > a {
padding: 17px 3px;
font-size: 15px;
} .header-contact-item {
margin-top: 28px;
}
.header-contact-button {
height: 56px;
font-size: 14px;
} .humberger {
width: 28px;
height: 23px;
}
.humberger span:nth-child(1) {
top: 1px;
}
.humberger span:nth-child(2) {
top: 10px;
}
.humberger span:nth-child(3) {
top: 19px;
}
#header.active .humberger span:nth-child(1), #header.active .humberger span:nth-child(3) {
top: 10px;
}
} .reason-works {
width: 100%;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
box-sizing: border-box;
background: linear-gradient(135deg, #073452 0%, #032b47 50%, #062f4d 100%);
color: #fff;
} .reason-works-main {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 42px;
align-items: center;
width: 100%;
}
@media screen and (max-width: 768px) {
.reason-works-main {
grid-template-columns: 1fr;
gap: 32px;
}
} .reason-works-heading {
min-width: 0;
color: #fff;
}
.reason-works-heading span {
color: #fff;
} .reason-works-contents {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
width: 100%;
min-width: 0;
}
@media screen and (max-width: 768px) {
.reason-works-contents {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
}
@media screen and (max-width: 500px) {
.reason-works-contents {
grid-template-columns: 1fr;
gap: 30px;
}
} .reason-works-item {
width: 100%;
min-width: 0;
margin: 0;
} .reason-works-images {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
overflow: hidden;
background-color: #e4e7e9;
}
.reason-works-image {
position: relative;
width: 100%;
min-width: 0;
aspect-ratio: 1.45/1;
overflow: hidden;
background-color: #ddd;
}
.reason-works-image:first-child {
border-right: 1px solid #fff;
}
.reason-works-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
@media screen and (max-width: 500px) {
.reason-works-image {
aspect-ratio: 1.5/1;
}
} .reason-works-label {
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
min-width: 76px;
padding: 5px 12px;
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.94);
color: #44505a;
font-family: "Times New Roman", serif;
font-size: 13px;
line-height: 1;
text-align: center;
} .reason-works-item-title {
margin: 10px 0 0;
padding: 0;
color: #fff;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.05em;
text-align: center;
}
@media screen and (max-width: 500px) {
.reason-works-item-title {
font-size: 13px;
}
} .reason-works-divider {
display: block;
width: 100%;
height: 1px;
margin: 40px 0 32px;
background-color: rgba(255, 255, 255, 0.45);
}
@media screen and (max-width: 768px) {
.reason-works-divider {
margin: 36px 0 30px;
}
}
@media screen and (max-width: 500px) {
.reason-works-divider {
margin: 34px 0 28px;
}
} .reason-works-recent {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
grid-template-areas: "heading list" "button list";
column-gap: 42px;
row-gap: 25px;
align-items: start;
width: 100%;
}
.reason-works-recent .reason-works-recent-heading {
grid-area: heading;
}
.reason-works-recent .reason-works-recent-list {
grid-area: list;
}
.reason-works-recent .reason-works-recent-button {
grid-area: button;
justify-self: start;
margin: 0;
}
@media screen and (max-width: 768px) {
.reason-works-recent {
grid-template-columns: 1fr;
grid-template-areas: "heading" "list" "button";
row-gap: 30px;
}
.reason-works-recent .reason-works-recent-button {
justify-self: center;
}
}
@media screen and (max-width: 500px) {
.reason-works-recent {
row-gap: 25px;
}
.reason-works-recent .reason-works-recent-button {
width: 100%;
max-width: 280px;
}
} .reason-works-recent-heading {
min-width: 0;
}
.reason-works-recent-heading h3 {
margin: 0 0 14px;
font-family: "Zen Old Mincho", serif;
color: #fff;
font-size: 24px;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
.reason-works-recent-heading h3 {
font-size: 18px;
}
}
.reason-works-recent-heading p {
margin: 0 0 24px;
color: rgba(255, 255, 255, 0.8);
font-size: 13px;
line-height: 1.9;
letter-spacing: 0.02em;
}
@media screen and (max-width: 768px) {
.reason-works-recent-heading p br {
display: none;
}
} .reason-works-recent-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
width: 100%;
min-width: 0;
}
@media screen and (max-width: 768px) {
.reason-works-recent-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 500px) {
.reason-works-recent-list {
grid-template-columns: 1fr;
gap: 22px;
}
} .reason-works-card {
width: 100%;
min-width: 0;
margin: 0;
overflow: hidden;
background-color: #fff;
}
.reason-works-card-link {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
color: inherit;
text-decoration: none;
} .reason-works-card-image {
position: relative;
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
background-color: #eee;
}
.reason-works-card-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.reason-works-card:hover .reason-works-card-image img {
transform: scale(1.035);
} .reason-works-no-image {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 140px;
background-color: #dce3e8;
color: #6d7780;
font-family: "Times New Roman", serif;
font-size: 12px;
letter-spacing: 0.08em;
} .reason-works-card-category {
position: absolute;
left: 12px;
bottom: 0;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 25px;
padding: 4px 10px;
box-sizing: border-box;
background-color: #536e83;
color: #fff;
font-size: 15px;
line-height: 1;
letter-spacing: 0.03em;
} .reason-works-card-category--wall {
background-color: #ef6b2d;
} .reason-works-card-category--roof {
background-color: #32895e;
} .reason-works-card-category--waterproof {
background-color: #1579c7;
} .reason-works-card-category--default {
background-color: #536e83;
} .reason-works-card-body {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
min-height: 158px;
padding: 13px 34px 16px 14px;
box-sizing: border-box;
background-color: #fff;
color: #082b49;
}
@media screen and (max-width: 500px) {
.reason-works-card-body {
min-height: 145px;
padding: 13px 38px 17px 14px;
}
} .reason-works-card-date {
display: block;
margin: 0 0 6px;
color: #596d7d;
font-family: "Times New Roman", serif;
font-size: 15px;
line-height: 1.4;
letter-spacing: 0.02em;
} .reason-works-card-title {
margin: 0 0 7px;
padding: 0;
color: #082b49;
font-size: 14px;
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.02em;
}
@media screen and (max-width: 500px) {
.reason-works-card-title {
font-size: 15px;
}
} .reason-works-card-text {
display: -webkit-box;
margin: 0;
padding: 0;
overflow: hidden;
color: #687986;
font-size: 15px;
line-height: 1.75;
letter-spacing: 0.01em;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
@media screen and (max-width: 500px) {
.reason-works-card-text {
font-size: 12px;
}
} @media screen and (max-width: 768px) {
.reason-works-main {
align-items: stretch;
}
.reason-works-contents {
width: 100%;
}
.reason-works-recent-list .reason-works-card:last-child {
grid-column: 1/-1;
width: calc(50% - 9px);
max-width: none;
}
} @media screen and (max-width: 500px) {
.reason-works-main {
gap: 28px;
}
.reason-works-contents {
width: 100%;
}
.reason-works-image {
aspect-ratio: 1.45/1;
}
.reason-works-recent-list .reason-works-card:last-child {
grid-column: auto;
width: 100%;
max-width: none;
}
}  .works-hero {
position: relative;
min-height: 350px;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: cover; }
.works-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.78) 27%, rgba(255, 255, 255, 0.18) 63%, rgba(255, 255, 255, 0) 73%);
}
@media screen and (max-width: 768px) {
.works-hero {
min-height: 330px;
}
}
@media screen and (max-width: 500px) {
.works-hero {
min-height: 310px;
background-position: center;
}
.works-hero::before {
background: linear-gradient(90deg, rgba(240, 248, 253, 0.97) 0%, rgba(240, 248, 253, 0.92) 35%, rgba(240, 248, 253, 0.65) 55%, rgba(240, 248, 253, 0) 80%);
}
} .works-hero__inner {
position: relative;
z-index: 2;
width: min(1180px, 100% - 80px);
margin: 0 auto;
padding: 66px 0 58px;
box-sizing: border-box;
}
@media screen and (max-width: 500px) {
.works-hero__inner {
width: calc(100% - 40px);
padding: 50px 0 42px;
}
} .works-hero__heading {
max-width: 620px;
}
.works-hero__heading .c-section-heading__title {
font-size: clamp(48px, 5vw, 66px);
}
.works-hero__heading .c-section-heading__lead {
font-size: 16px;
font-weight: 500;
}
@media screen and (max-width: 500px) {
.works-hero__heading {
max-width: 100%;
}
.works-hero__heading .c-section-heading__title {
font-size: 38px;
}
.works-hero__heading .c-section-heading__lead {
font-size: 13px;
}
} .works-hero__message {
position: absolute;
top: 0;
right: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 18%;
height: 100%;
padding: 25px 10px;
box-sizing: border-box;
color: #fff;
background: linear-gradient(135deg, rgba(4, 45, 76, 0.96), rgba(4, 38, 65, 0.68));
}
.works-hero__message p {
margin: 0;
font-family: "Zen Old Mincho", serif;
font-size: 24px;
line-height: 2;
letter-spacing: 0.17em;
writing-mode: vertical-rl;
}
.works-hero__message span {
display: block;
margin-top: 28px;
font-family: "Times New Roman", serif;
font-size: 20px;
font-style: italic;
line-height: 1.15;
transform: rotate(-7deg);
}
@media screen and (max-width: 768px) {
.works-hero__message {
width: 20%;
}
.works-hero__message p {
font-size: 18px;
}
}
@media screen and (max-width: 500px) {
.works-hero__message {
display: none;
}
} .works-breadcrumb {
width: min(1180px, 100% - 80px);
margin: 0 auto;
padding: 14px 0;
box-sizing: border-box;
}
@media screen and (max-width: 500px) {
.works-breadcrumb {
width: calc(100% - 40px);
}
} .works-archive {
padding: 0 0 80px;
background-color: #fff;
color: #082b49;
}
@media screen and (max-width: 500px) {
.works-archive {
padding-bottom: 55px;
}
}
.works-archive__inner {
width: min(1180px, 100% - 80px);
margin: 0 auto;
}
@media screen and (max-width: 500px) {
.works-archive__inner {
width: calc(100% - 40px);
}
} .works-filter {
display: grid;
grid-template-columns: 225px minmax(0, 1fr);
padding: 22px 28px;
box-sizing: border-box;
background: linear-gradient(110deg, #f7fbfe 0%, #edf6fc 100%);
}
@media screen and (max-width: 768px) {
.works-filter {
grid-template-columns: 185px 1fr;
padding: 22px;
}
}
@media screen and (max-width: 500px) {
.works-filter {
grid-template-columns: 1fr;
padding: 24px 10px;
}
}
.works-filter__intro {
padding: 14px 30px 14px 0;
border-right: 1px solid #aac0d0;
box-sizing: border-box;
}
.works-filter__intro h2 {
margin: 0 0 12px;
font-family: "Zen Old Mincho", serif;
font-size: 25px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.05em;
}
.works-filter__intro p {
margin: 0;
font-family: "Zen Old Mincho", serif;
font-size: 13px;
line-height: 1.9;
letter-spacing: 0.01em;
}
@media screen and (max-width: 500px) {
.works-filter__intro {
padding: 0 0 20px;
border-right: 0;
border-bottom: 1px solid #cbd9e3;
}
.works-filter__intro h2 {
font-size: 22px;
}
.works-filter__intro p br {
display: none;
}
}
.works-filter__contents {
padding-left: 30px;
}
@media screen and (max-width: 500px) {
.works-filter__contents {
padding: 22px 0 0;
}
}
.works-filter__groups {
display: grid;
grid-template-columns: 1fr 1.08fr;
margin-bottom: 22px;
}
@media screen and (max-width: 768px) {
.works-filter__groups {
grid-template-columns: 1fr;
}
}
.works-filter__group {
min-width: 0;
margin: 0;
padding: 0 24px;
border: 0;
box-sizing: border-box;
}
.works-filter__group:first-child {
padding-left: 0;
border-right: 1px solid #afc3d0;
}
.works-filter__group:last-child {
padding-right: 0;
}
.works-filter__group legend {
margin-bottom: 12px;
color: #153b58;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
.works-filter__group {
padding: 20px 0 0;
}
.works-filter__group:first-child {
padding-top: 0;
padding-bottom: 20px;
border-right: 0;
border-bottom: 1px solid #c6d5df;
}
}
.works-filter__options {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.works-filter__checkbox input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
} .works-filter__label {
position: relative;
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 8px 10px 8px 28px;
box-sizing: border-box;
border: 1px solid #9eb6c8;
background-color: #fff;
color: #153b58;
font-size: 13px;
line-height: 1;
cursor: pointer;
transition: 0.25s ease;
}
.works-filter__label::before {
content: "";
position: absolute;
left: 12px;
width: 14px;
height: 14px;
border: 1px solid #9eb6c8;
background-color: #fff;
box-sizing: border-box;
}
.works-filter__label::after {
content: "";
position: absolute;
left: 16px;
width: 6px;
height: 9px;
border: solid #0a4771;
border-width: 0 2px 2px 0;
opacity: 0;
transform: rotate(45deg) translateY(-1px);
} .works-filter__checkbox input:checked + .works-filter__label::after {
opacity: 1;
}
.works-filter__checkbox input:focus-visible + .works-filter__label {
outline: 2px solid #0b5d91;
outline-offset: 2px;
} .works-filter__label--wall {
border-color: #ef692c;
color: #fff;
background-color: #ef692c;
}
.works-filter__label--wall::before {
border-color: rgba(255, 255, 255, 0.75);
}
.works-filter__label--roof {
border-color: #32875d;
color: #fff;
background-color: #32875d;
}
.works-filter__label--roof::before {
border-color: rgba(255, 255, 255, 0.75);
}
.works-filter__label--waterproof {
border-color: #1778c6;
color: #fff;
background-color: #1778c6;
}
.works-filter__label--waterproof::before {
border-color: rgba(255, 255, 255, 0.75);
} .works-filter__submit {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
width: min(460px, 70%);
min-height: 52px;
margin: 0 auto;
padding: 10px 26px;
border: 0;
background: linear-gradient(90deg, #073858, #052e4b);
color: #fff;
font-family: inherit;
font-size: 14px;
letter-spacing: 0.07em;
cursor: pointer;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.works-filter__submit svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
}
.works-filter__submit:hover {
opacity: 0.88;
transform: translateY(-1px);
}
@media screen and (max-width: 500px) {
.works-filter__submit {
width: 100%;
}
}
.works-filter__arrow {
margin-left: 6px;
font-size: 20px;
} .works-result-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
margin: 32px 0 18px;
}
@media screen and (max-width: 500px) {
.works-result-head {
align-items: flex-end;
gap: 18px;
}
}
.works-result-head__count {
display: flex;
align-items: center;
color: #092d4b;
white-space: nowrap;
}
.works-result-head__count strong {
margin-left: 18px;
font-family: "Times New Roman", serif;
font-size: 42px;
font-weight: 400;
line-height: 1;
}
.works-result-head__count > span:last-child {
margin: 15px 0 0 8px;
font-family: "Zen Old Mincho", serif;
font-size: 13px;
}
@media screen and (max-width: 500px) {
.works-result-head__count strong {
margin-left: 10px;
font-size: 32px;
}
}
.works-result-head__label {
font-family: "Zen Old Mincho", serif;
font-size: 20px;
font-weight: 500;
letter-spacing: 0.05em;
}
@media screen and (max-width: 500px) {
.works-result-head__label {
font-size: 16px;
}
}
.works-result-head__line {
display: block;
width: 110px;
height: 1px;
margin-left: 14px;
background-color: #617c90;
}
@media screen and (max-width: 500px) {
.works-result-head__line {
width: 30px;
}
} .works-sort {
position: relative;
min-width: 150px;
}
.works-sort select {
width: 100%;
height: 42px;
padding: 0 40px 0 15px;
border: 1px solid #9bb3c5;
border-radius: 0;
background-color: #fff;
color: #0b3554;
font-family: inherit;
font-size: 13px;
appearance: none;
cursor: pointer;
}
.works-sort::after {
content: "";
position: absolute;
top: 50%;
right: 16px;
width: 7px;
height: 7px;
border: solid #0b3554;
border-width: 0 1px 1px 0;
pointer-events: none;
transform: translateY(-70%) rotate(45deg);
}
@media screen and (max-width: 500px) {
.works-sort {
min-width: 110px;
}
} .works-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px 20px;
}
@media screen and (max-width: 768px) {
.works-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 500px) {
.works-grid {
grid-template-columns: 1fr;
gap: 24px;
}
}
.works-card {
min-width: 0;
margin: 0;
}
.works-card__link {
display: flex;
flex-direction: column;
height: 100%;
color: inherit;
text-decoration: none;
}
.works-card__link:hover .works-card__image img {
transform: scale(1.035);
}
.works-card__link:hover .works-card__arrow {
transform: translateX(3px);
}
.works-card__image {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
background-color: #dce4e9;
}
.works-card__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.works-card__no-image {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #758694;
font-family: "Times New Roman", serif;
font-size: 12px;
letter-spacing: 0.08em;
} .works-card__tags {
position: absolute;
top: 10px;
left: 10px;
display: flex;
gap: 7px;
z-index: 2;
}
.works-card__tag {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
padding: 5px 14px;
box-sizing: border-box;
color: #fff;
font-size: 12px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.04em;
}
.works-card__tag--wall {
background-color: #ef6b2d;
}
.works-card__tag--roof {
background-color: #32895e;
}
.works-card__tag--waterproof {
background-color: #1579c7;
}
.works-card__tag--default {
background-color: #536e83;
}
.works-card__tag--building {
border: 1px solid #d5e1e9;
background-color: #fff;
color: #0b3554;
} .works-card__body {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
min-height: 150px;
padding: 14px 40px 15px 18px;
border: 1px solid #d9e3ea;
border-top: 0;
box-sizing: border-box;
background-color: #fff;
}
.works-card__title {
margin: 0 0 5px;
color: #082b49;
font-size: 18px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.04em;
}
.works-card__date {
display: block;
margin-bottom: 10px;
color: #536d80;
font-family: "Times New Roman", serif;
font-size: 15px;
}
.works-card__text {
display: -webkit-box;
margin: 0;
overflow: hidden;
color: #4d6577;
font-size: 15px;
line-height: 1.75;
letter-spacing: 0.02em;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.works-card__arrow {
position: absolute;
right: 16px;
bottom: 17px;
color: #072f4e;
font-family: "Times New Roman", serif;
font-size: 26px;
line-height: 1;
transition: transform 0.3s ease;
} .works-pagination {
margin-top: 32px;
}
.works-pagination .page-numbers {
margin: 0;
padding: 0;
list-style: none;
}
.works-pagination > .page-numbers {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.works-pagination a,
.works-pagination span {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
box-sizing: border-box;
color: #082b49;
font-family: "Times New Roman", serif;
font-size: 15px;
text-decoration: none;
}
.works-pagination .current {
background-color: #073858;
color: #fff;
}
.works-pagination a:hover {
background-color: #edf4f8;
}
.works-pagination .prev,
.works-pagination .next {
font-size: 24px;
} .works-empty {
padding: 60px 20px;
text-align: center;
}
.works-empty p {
margin: 0;
color: #526c7e;
} .works-filter__actions {
display: flex;
align-items: stretch;
justify-content: center;
gap: 12px;
width: 100%;
}
@media screen and (max-width: 500px) {
.works-filter__actions {
flex-direction: column;
gap: 10px;
}
}  .works-single {
color: #082b49;
} .works-single__section {
padding: 28px 0 72px;
background-color: #fff;
}
@media screen and (max-width: 500px) {
.works-single__section {
padding: 20px 0 50px;
}
}
.works-single__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) 310px;
gap: 52px;
align-items: start;
width: min(1180px, 100% - 80px);
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.works-single__inner {
grid-template-columns: minmax(0, 1fr) 270px;
gap: 32px;
width: calc(100% - 50px);
}
}
@media screen and (max-width: 500px) {
.works-single__inner {
grid-template-columns: 1fr;
gap: 46px;
width: calc(100% - 40px);
}
} .works-single__main {
min-width: 0;
} .works-single__date {
margin: 0 0 14px;
color: #23465f;
font-family: "Times New Roman", serif;
font-size: 14px;
line-height: 1.4;
letter-spacing: 0.03em;
}
@media screen and (max-width: 500px) {
.works-single__date {
font-size: 13px;
}
} .works-single__title {
position: relative;
margin: 0 0 20px;
padding-right: 10px;
color: #082b49;
font-size: clamp(26px, 2.6vw, 38px);
font-weight: 700;
line-height: 1.55;
letter-spacing: 0.055em;
}
@media screen and (max-width: 500px) {
.works-single__title {
margin-bottom: 18px;
font-size: 20px;
line-height: 1.55;
}
} .works-single__tags {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-bottom: 20px;
}
.works-single__tag {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 90px;
min-height: 38px;
padding: 6px 16px;
box-sizing: border-box;
color: #fff;
font-size: 13px;
line-height: 1;
letter-spacing: 0.04em;
} .works-single__tag--wall {
background-color: #ef692c;
} .works-single__tag--roof {
background-color: #25945e;
} .works-single__tag--waterproof {
background-color: #0878ca;
} .works-single__tag--default {
background-color: #61798b;
} .works-single__tag--building {
min-width: 78px;
border: 1px solid #dce6ed;
background-color: #f3f8fc;
color: #173e5d;
} .works-single__images {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
width: 100%;
margin-bottom: 22px;
}
@media screen and (max-width: 500px) {
.works-single__images {
gap: 4px;
}
}
.works-single__image {
position: relative;
width: 100%;
min-width: 0;
aspect-ratio: 3/2;
margin: 0;
overflow: hidden;
background-color: #e5eaed;
}
.works-single__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media screen and (max-width: 500px) {
.works-single__image {
aspect-ratio: 1/1;
}
} .works-single__image-label {
position: absolute;
left: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
min-width: 98px;
min-height: 38px;
padding: 6px 17px;
box-sizing: border-box;
color: #fff;
font-family: "Times New Roman", serif;
font-size: 15px;
line-height: 1;
letter-spacing: 0.04em;
}
@media screen and (max-width: 500px) {
.works-single__image-label {
min-width: 72px;
min-height: 32px;
padding: 5px 12px;
font-size: 13px;
}
}
.works-single__image-label--before {
background-color: rgba(39, 55, 67, 0.9);
}
.works-single__image-label--after {
background-color: rgba(3, 65, 111, 0.94);
} .works-single__content {
color: #163a55;
font-size: 15px;
line-height: 2.15;
letter-spacing: 0.035em;
}
.works-single__content p {
margin: 0 0 24px;
}
.works-single__content h2 {
margin: 48px 0 22px;
padding: 0 0 12px;
border-bottom: 2px solid #aabeca;
color: #082b49;
font-size: 25px;
font-weight: 700;
line-height: 1.6;
}
.works-single__content h3 {
margin: 36px 0 16px;
color: #082b49;
font-size: 21px;
font-weight: 700;
line-height: 1.6;
}
.works-single__content img {
max-width: 100%;
height: auto;
}
@media screen and (max-width: 500px) {
.works-single__content {
font-size: 14px;
line-height: 2;
}
.works-single__content h2 {
margin-top: 38px;
font-size: 18px;
}
.works-single__content h3 {
font-size: 16px;
}
} .works-single__back {
width: min(390px, 100%);
margin: 28px auto 0;
}
.works-single__back a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 62px;
border: 1px solid #547084;
box-sizing: border-box;
background-color: #fff;
color: #082b49;
font-size: 13px;
letter-spacing: 0.05em;
text-decoration: none;
transition: background-color 0.3s ease, color 0.3s ease;
}
.works-single__back a:hover {
background-color: #082f4c;
color: #fff;
}
.works-single__back-arrow {
position: absolute;
top: 50%;
left: 46px;
font-family: "Times New Roman", serif;
font-size: 24px;
transform: translateY(-54%);
}
@media screen and (max-width: 500px) {
.works-single__back-arrow {
left: 28px;
}
} .works-single__aside {
min-width: 0;
background-color: #f3f9fc;
}
.works-single-search {
width: 100%;
} .works-single-search__block {
padding: 26px 20px 22px;
border-bottom: 5px solid #fff;
box-sizing: border-box;
}
.works-single-search__block:last-of-type {
border-bottom: 0;
} .works-single-search__title {
position: relative;
margin: 0 0 18px;
padding-left: 13px;
color: #082b49;
font-family: "Zen Old Mincho", serif;
font-size: 20px;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.04em;
}
.works-single-search__title::before {
content: "";
position: absolute;
top: 3px;
bottom: 3px;
left: 0;
width: 2px;
background-color: #082f4c;
} .works-single-search__work {
display: flex;
flex-direction: column;
gap: 9px;
}
.works-single-search__work-item {
position: relative;
}
.works-single-search__work-item input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
}
.works-single-search__work-item label {
display: flex;
align-items: center;
width: 100%;
min-height: 60px;
padding: 10px 18px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
transition: opacity 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.works-single-search__work-item label:hover {
opacity: 0.88;
}
.works-single-search__work-item input:focus-visible + label {
outline: 2px solid #082f4c;
outline-offset: 2px;
}
.works-single-search__work-item input:checked + label {
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.75);
}
.works-single-search__work-item input:checked + label .works-single-search__work-check::after {
opacity: 1;
} .works-single-search__work-item--wall label {
background: linear-gradient(90deg, #ef6c27, #f45e19);
}
.works-single-search__work-item--roof label {
background: linear-gradient(90deg, #179154, #099c52);
}
.works-single-search__work-item--waterproof label {
background: linear-gradient(90deg, #087dcb, #0566bb);
} .works-single-search__work-check {
position: relative;
flex: 0 0 18px;
width: 18px;
height: 18px;
margin-right: 16px;
border: 1px solid rgba(255, 255, 255, 0.95);
box-sizing: border-box;
background-color: #fff;
}
.works-single-search__work-check::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 5px;
height: 9px;
border: solid #0a4b70;
border-width: 0 2px 2px 0;
opacity: 0;
transform: rotate(45deg);
}
.works-single-search__work-text {
font-family: "Zen Old Mincho", serif;
font-size: 15px;
line-height: 1.5;
letter-spacing: 0.04em;
}
.works-single-search__arrow {
margin-left: auto;
font-family: "Times New Roman", serif;
font-size: 26px;
line-height: 1;
} .works-single-search__building {
display: flex;
flex-direction: column;
gap: 9px;
}
.works-single-search__building-item {
position: relative;
}
.works-single-search__building-item input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
}
.works-single-search__building-item label {
display: flex;
align-items: center;
gap: 17px;
min-height: 52px;
padding: 9px 18px;
border: 1px solid #cddce6;
box-sizing: border-box;
background-color: #fff;
color: #153a55;
font-size: 14px;
cursor: pointer;
transition: border-color 0.25s ease, background-color 0.25s ease;
}
.works-single-search__building-item label:hover {
border-color: #8faabd;
background-color: #f7fbfe;
}
.works-single-search__building-item input:focus-visible + label {
outline: 2px solid #0b5d91;
outline-offset: 2px;
}
.works-single-search__building-item input:checked + label {
border-color: #507b9a;
background-color: #f1f7fb;
}
.works-single-search__building-item input:checked + label .works-single-search__check::after {
opacity: 1;
} .works-single-search__check {
position: relative;
flex: 0 0 17px;
width: 17px;
height: 17px;
border: 1px solid #98b0c1;
box-sizing: border-box;
background-color: #fff;
}
.works-single-search__check::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 5px;
height: 9px;
border: solid #0a5c8e;
border-width: 0 2px 2px 0;
opacity: 0;
transform: rotate(45deg);
} .works-single-search__submit {
display: flex;
align-items: center;
width: calc(100% - 40px);
min-height: 60px;
margin: 0 20px 22px;
padding: 10px 17px;
border: 0;
box-sizing: border-box;
background: linear-gradient(90deg, #073654, #062c49);
color: #fff;
font-family: inherit;
font-size: 13px;
letter-spacing: 0.04em;
cursor: pointer;
transition: opacity 0.3s ease;
}
.works-single-search__submit:hover {
opacity: 0.87;
}
.works-single-search__search-icon {
position: relative;
flex: 0 0 21px;
width: 21px;
height: 21px;
margin-right: 18px;
border: 1.5px solid #fff;
border-radius: 50%;
box-sizing: border-box;
}
.works-single-search__search-icon::after {
content: "";
position: absolute;
right: -6px;
bottom: -4px;
width: 9px;
height: 1px;
background-color: #fff;
transform: rotate(45deg);
transform-origin: left center;
}
.works-single-search__submit-arrow {
margin-left: auto;
font-size: 18px;
} @media screen and (max-width: 768px) {
.works-single-search__block {
padding: 22px 16px 18px;
}
.works-single-search__submit {
width: calc(100% - 32px);
margin: 0 16px 18px;
}
.works-single-search__work-item label {
padding: 10px 13px;
}
.works-single-search__work-check {
margin-right: 12px;
}
} @media screen and (max-width: 500px) {
.works-single__aside {
max-width: 100%;
}
.works-single-search__block {
padding: 24px 20px 20px;
}
.works-single-search__work-item label {
min-height: 56px;
}
.works-single-search__building {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.works-single-search__building-item label {
min-height: 48px;
padding: 8px 12px;
gap: 10px;
font-size: 13px;
}
.works-single-search__submit {
width: calc(100% - 40px);
margin: 0 20px 22px;
}
} .works-single-search__actions {
display: flex;
flex-direction: column;
gap: 10px;
padding: 0 20px 22px;
box-sizing: border-box;
} .works-single-search__actions .works-single-search__submit {
width: 100%;
margin: 0;
} .works-single-search__clear {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 48px;
margin: 0;
padding: 10px 16px;
border: 1px solid #829caf;
box-sizing: border-box;
background-color: #fff;
color: #123b58;
font-family: inherit;
font-size: 13px;
line-height: 1;
letter-spacing: 0.04em;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.works-single-search__clear:hover {
border-color: #073858;
background-color: #073858;
color: #fff;
} .works-single-search__clear-icon {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
font-family: Arial, sans-serif;
font-size: 21px;
font-weight: 300;
line-height: 1;
} @media screen and (max-width: 768px) {
.works-single-search__actions {
padding: 0 16px 18px;
}
} @media screen and (max-width: 500px) {
.works-single-search__actions {
padding: 0 20px 22px;
}
.works-single-search__clear {
min-height: 48px;
}
} .service-section {
background-color: #fff;
} .service-contents {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 40px;
align-items: stretch;
}
@media screen and (max-width: 768px) {
.service-contents {
grid-template-columns: 1fr;
gap: 36px;
}
} .service-list-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 210px;
min-height: 44px;
margin-top: auto;
border: 1px solid #aab8c2;
color: #082b49;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.04em;
text-decoration: none;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.service-list-button:hover {
background-color: #082b49;
border-color: #082b49;
color: #fff;
}
@media screen and (max-width: 768px) {
.service-list-button {
margin-top: 0;
}
}
.service-list-arrow {
position: absolute;
top: 50%;
right: 14px;
font-size: 20px;
line-height: 1;
transform: translateY(-52%);
} .service-contents-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
@media screen and (max-width: 768px) {
.service-contents-list {
grid-template-columns: 1fr;
gap: 24px;
}
} .service-contents-post {
position: relative;
min-width: 0;
background-color: #fff;
border: 1px solid #edf0f2;
box-shadow: 0 5px 16px rgba(4, 39, 65, 0.06);
overflow: hidden;
cursor: pointer;
}
.service-contents-post:hover .service-post-image img {
transform: scale(1.04);
}
@media screen and (max-width: 768px) {
.service-contents-post {
width: 100%;
}
} .service-card-link {
position: absolute;
inset: 0;
z-index: 10;
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
.service-card-link:focus-visible {
outline: 2px solid #082b49;
outline-offset: -3px;
} .service-post-image {
position: relative;
z-index: 1;
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
background-color: #f3f5f6;
}
.service-post-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
} .service-post-body {
position: relative;
z-index: 1;
padding: 16px 20px 20px;
color: #082b49;     }
.service-post-body .service-post-title {
position: absolute;
top: -10px;
transform: translateY(-50%);
left: 0;
padding: 0 12px;
background-color: #fff;
display: flex;
align-items: center;
gap: 12px;
margin: 0;
}
.service-post-body .service-post-title img {
flex-shrink: 0;
width: 36px;
height: 36px;
object-fit: contain;
}
.service-post-body .service-post-title h2,
.service-post-body .service-post-title h3,
.service-post-body .service-post-title h4,
.service-post-body .service-post-title p {
margin: 0;
padding: 0;
font-family: "Zen Old Mincho", serif;
font-size: 18px;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
color: #082b49;
}
.service-post-body .service-post-desc {
margin: 0;
padding-top: 10px;
color: #52616c;
font-size: 15px;
line-height: 1.8;
letter-spacing: 0.02em;
}
@media screen and (max-width: 768px) {
.service-post-body .service-post-desc {
font-size: 13px;
}
}
.service-post-body .service-post-textList {
min-height: auto;
margin: 10px 0 0;
padding: 0;
color: #52616c;
font-size: 15px;
line-height: 1.8;
}
@media screen and (max-width: 768px) {
.service-post-body .service-post-textList {
min-height: auto !important;
height: auto !important;
font-size: 13px;
}
}
.service-post-body h2,
.service-post-body h3,
.service-post-body h4 {
color: #082b49;
}
.service-post-body p {
color: #52616c;
font-size: 12px;
line-height: 1.8;
}
@media screen and (max-width: 768px) {
.service-post-body p {
font-size: 13px;
}
}
.service-post-body > *:last-child {
margin-bottom: 0;
} .service-empty {
grid-column: 1/-1;
padding: 30px;
text-align: center;
color: #52616c;
} .service-btn {
margin-top: 20px;
}
.blue-text-link {
text-decoration: underline;
}
.blue-text-link:hover {
text-decoration: none;
}  .service-post-section {
background-color: #fff;
color: #082b49;
}
.service-detail-container {
width: min(1180px, 100% - 80px);
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.service-detail-container {
width: calc(100% - 50px);
}
}
@media screen and (max-width: 500px) {
.service-detail-container {
width: calc(100% - 40px);
}
} .service-detail-hero {
position: relative;
min-height: 455px;
overflow: hidden;
background-color: #edf5fa;
background-position: center;
background-repeat: no-repeat;
background-size: cover;  }
.service-detail-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(90deg, rgba(240, 248, 253, 0.98) 0%, rgba(238, 247, 253, 0.96) 34%, rgba(238, 247, 253, 0.68) 46%, rgba(238, 247, 253, 0.12) 65%, rgba(238, 247, 253, 0) 74%);
}
.service-detail-hero::after {
content: "";
position: absolute;
top: 0;
right: 0;
z-index: 2;
width: 17%;
height: 100%;
background: linear-gradient(135deg, rgba(4, 45, 76, 0.96), rgba(4, 38, 65, 0.78));
}
@media screen and (max-width: 768px) {
.service-detail-hero {
min-height: 250px;
}
.service-detail-hero::after {
width: 20%;
}
}
@media screen and (max-width: 500px) {
.service-detail-hero {
background-position: 66% center;
}
.service-detail-hero::before {
background: linear-gradient(90deg, rgba(240, 248, 253, 0.97) 0%, rgba(240, 248, 253, 0.92) 35%, rgba(240, 248, 253, 0.65) 55%, rgba(240, 248, 253, 0) 80%);
}
.service-detail-hero::after {
display: none;
}
} .service-detail-hero__inner {
position: relative;
z-index: 3;
width: min(1180px, 100% - 80px);
margin: 0 auto;
padding: 28px 0 62px;
box-sizing: border-box;
}
@media screen and (max-width: 768px) {
.service-detail-hero__inner {
width: calc(100% - 50px);
}
}
@media screen and (max-width: 500px) {
.service-detail-hero__inner {
width: calc(100% - 40px);
padding: 20px 0 45px;
}
} .service-detail-hero__breadcrumb {
margin-bottom: 38px;
color: #526d80;
font-size: 15px;
line-height: 1.6;
}
.service-detail-hero__breadcrumb a {
color: inherit;
text-decoration: none;
}
.service-detail-hero__breadcrumb a:hover {
opacity: 0.65;
}
@media screen and (max-width: 500px) {
.service-detail-hero__breadcrumb {
margin-bottom: 30px;
font-size: 10px;
}
} .service-detail-hero__heading {
max-width: 520px;
}
.service-detail-hero__heading .c-section-heading__en {
margin-bottom: 15px;
color: #567289;
font-family: "Times New Roman", serif;
font-size: 13px;
line-height: 1;
letter-spacing: 0.18em;
}
.service-detail-hero__heading .c-section-heading__title {
margin: 0;
color: #072c4a;
font-family: "Zen Old Mincho", serif;
font-size: clamp(46px, 5vw, 66px);
font-weight: 500;
line-height: 1.25;
letter-spacing: 0.08em;
}
.service-detail-hero__heading .c-section-heading__lead {
margin-top: 18px;
color: #092e4b;
font-family: "Zen Old Mincho", serif;
font-size: 24px;
font-weight: 500;
line-height: 1.65;
letter-spacing: 0.055em;
}
@media screen and (max-width: 768px) {
.service-detail-hero__heading .c-section-heading__title {
font-size: 50px;
}
.service-detail-hero__heading .c-section-heading__lead {
font-size: 21px;
}
}
@media screen and (max-width: 500px) {
.service-detail-hero__heading {
max-width: 100%;
}
.service-detail-hero__heading .c-section-heading__en {
font-size: 15px;
}
.service-detail-hero__heading .c-section-heading__title {
font-size: 39px;
}
.service-detail-hero__heading .c-section-heading__lead {
margin-top: 16px;
font-size: 19px;
line-height: 1.65;
}
} .service-detail-hero__description {
max-width: 430px;
margin: 24px 0 0;
color: #25485f;
font-size: 17px;
line-height: 1.95;
letter-spacing: 0.035em;
}
@media screen and (max-width: 500px) {
.service-detail-hero__description {
max-width: 100%;
margin-top: 20px;
font-size: 13px;
}
} .service-detail-hero__side {
position: absolute;
top: 0;
right: 0;
z-index: 4;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 17%;
height: 100%;
padding: 25px 10px;
box-sizing: border-box;
color: #fff;
}
@media screen and (max-width: 768px) {
.service-detail-hero__side {
width: 20%;
}
}
@media screen and (max-width: 500px) {
.service-detail-hero__side {
display: none;
}
}
.service-detail-hero__side-ja {
margin: 0 0 40px;
font-family: "Zen Old Mincho", serif;
font-size: 24px;
line-height: 2.1;
letter-spacing: 0.15em;
writing-mode: vertical-rl;
}
@media screen and (max-width: 768px) {
.service-detail-hero__side-ja {
font-size: 18px;
}
}
.service-detail-hero__side-en {
margin: 0;
font-family: "Times New Roman", serif;
font-size: 19px;
font-style: italic;
line-height: 1.15;
transform: rotate(-8deg);
} .service-about {
display: flex;
align-items: center;
width: 100%;
background-color: #fff;
padding: 60px 0;
}
@media screen and (max-width: 768px) {
.service-about {
flex-direction: column;
padding: 30px 0;
}
} .service-about__image {
flex: 0 0 50%;
width: 50%;
overflow: hidden;
background-color: #e8eef2;
}
.service-about__image img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16/10;
object-fit: cover;
}
@media screen and (max-width: 768px) {
.service-about__image {
width: 100%;
flex: none;
}
.service-about__image img {
aspect-ratio: 16/9;
}
}
@media screen and (max-width: 500px) {
.service-about__image img {
aspect-ratio: 1.45/1;
}
} .service-about__body {
flex: 1;
display: flex;
align-items: center;
min-width: 0;
background-color: #fff;
} .service-about__body-inner {
position: relative;
width: min(500px, 100% - 70px);
margin: 0 auto;
padding: 40px 0;
box-sizing: border-box;
}
@media screen and (max-width: 768px) {
.service-about__body-inner {
width: calc(100% - 50px);
padding: 40px 0;
}
}
@media screen and (max-width: 500px) {
.service-about__body-inner {
width: calc(100% - 40px);
padding: 34px 0 40px;
}
} .service-about__heading .c-section-heading__en {
color: #637f93;
font-size: 12px;
letter-spacing: 0.16em;
}
.service-about__heading .c-section-heading__title {
margin-top: 10px;
color: #082e4d;
font-family: "Zen Old Mincho", serif;
font-size: 30px;
font-weight: 500;
line-height: 1.45;
letter-spacing: 0.04em;
}
@media screen and (max-width: 500px) {
.service-about__heading .c-section-heading__title {
font-size: 25px;
}
} .service-about__icon {
position: absolute;
top: 50px;
right: 0;
width: 100px;
}
.service-about__icon img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
@media screen and (max-width: 500px) {
.service-about__icon {
top: 20px;
}
} .service-about__text {
margin-top: 24px;
color: #435e71;
font-size: 16px;
line-height: 2;
letter-spacing: 0.025em;
}
.service-about__text p {
margin: 0 0 17px;
}
.service-about__text p:last-child {
margin-bottom: 0;
}
.service-about__text a {
color: #0b5b8d;
text-decoration: underline;
}
.service-about__text a:hover {
text-decoration: none;
}
@media screen and (max-width: 500px) {
.service-about__text {
font-size: 13px;
line-height: 1.95;
}
} .service-merit {
padding: 60px 0 68px;
background: linear-gradient(120deg, #f4f9fc, #eaf4fa);
}
@media screen and (max-width: 500px) {
.service-merit {
padding: 45px 0 50px;
}
} .service-merit__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 30px;
margin-bottom: 30px;
}
@media screen and (max-width: 500px) {
.service-merit__head {
align-items: flex-start;
flex-direction: column;
gap: 18px;
}
} .service-merit__heading .c-section-heading__en {
color: #668095;
font-size: 12px;
letter-spacing: 0.16em;
}
.service-merit__heading .c-section-heading__title {
margin-top: 8px;
color: #082e4d;
font-family: "Zen Old Mincho", serif;
font-size: 30px;
font-weight: 500;
line-height: 1.45;
}
@media screen and (max-width: 500px) {
.service-merit__heading .c-section-heading__title {
font-size: 25px;
}
} .service-merit__message {
position: relative;
margin: 0;
padding-left: 75px;
color: #36536a;
font-family: "Zen Old Mincho", serif;
font-size: 13px;
line-height: 1.7;
letter-spacing: 0.03em;
}
.service-merit__message::before {
content: "";
position: absolute;
top: 10px;
left: 0;
width: 55px;
height: 1px;
background-color: #a5b7c4;
}
@media screen and (max-width: 500px) {
.service-merit__message {
padding-left: 50px;
}
.service-merit__message::before {
width: 35px;
}
} .service-merit__cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
@media screen and (max-width: 768px) {
.service-merit__cards {
gap: 15px;
}
}
@media screen and (max-width: 500px) {
.service-merit__cards {
grid-template-columns: 1fr;
gap: 14px;
}
} .service-merit-card {
position: relative;
min-height: 205px;
padding: 28px 24px 24px;
box-sizing: border-box;
background-color: #fff;
box-shadow: 0 7px 22px rgba(6, 44, 72, 0.06);
text-align: center;
}
@media screen and (max-width: 500px) {
.service-merit-card {
min-height: 190px;
}
} .service-merit-card__number {
position: absolute;
top: 17px;
left: 20px;
color: #e5743d;
font-family: "Times New Roman", serif;
font-size: 28px;
font-style: italic;
line-height: 1;
} .service-merit-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin: 0 auto 13px;
color: #092f4d;
}
.service-merit-card__icon svg {
display: block;
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
} .service-merit-card__title {
margin: 0 0 11px;
color: #082e4d;
font-family: "Zen Old Mincho", serif;
font-size: 21px;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.04em;
} .service-merit-card__text {
margin: 0;
color: #536c7d;
font-size: 16px;
line-height: 1.85;
letter-spacing: 0.02em;
} .service-signs {
padding: 62px 0 70px;
background: linear-gradient(135deg, #063554, #032943);
color: #fff;
}
@media screen and (max-width: 500px) {
.service-signs {
padding: 46px 0 52px;
}
} .service-signs__heading {
margin-bottom: 32px;
}
.service-signs__heading .c-section-heading__en {
color: rgba(255, 255, 255, 0.68);
font-size: 12px;
letter-spacing: 0.16em;
}
.service-signs__heading .c-section-heading__title {
max-width: 780px;
margin-top: 8px;
color: #fff;
font-family: "Zen Old Mincho", serif;
font-size: 30px;
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.04em;
}
@media screen and (max-width: 500px) {
.service-signs__heading {
margin-bottom: 25px;
}
.service-signs__heading .c-section-heading__title {
font-size: 18px;
}
} .service-signs__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
@media screen and (max-width: 768px) {
.service-signs__grid {
gap: 15px;
}
}
@media screen and (max-width: 500px) {
.service-signs__grid {
grid-template-columns: 1fr;
gap: 25px;
}
} .service-sign-card {
min-width: 0;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.12);
} .service-sign-card__image {
width: 100%;
aspect-ratio: 1.42/1;
overflow: hidden;
background: rgba(255, 255, 255, 0.1);
}
.service-sign-card__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.45s ease;
} .service-sign-card__body {
position: relative;
padding: 18px 18px 20px;
box-sizing: border-box;
} .service-sign-card__number {
display: block;
margin-bottom: 10px;
color: #e88654;
font-family: "Times New Roman", serif;
font-size: 24px;
font-style: italic;
line-height: 1;
} .service-sign-card__text {
display: flex;
align-items: flex-start;
gap: 10px;
color: #fff;
font-family: "Zen Old Mincho", serif;
font-size: 15px;
line-height: 1.7;
letter-spacing: 0.025em;
}
.service-sign-card__text p {
margin: 0;
color: inherit;
}
.service-sign-card__text > div p + p {
margin-top: 8px;
} .service-sign-card__warning {
display: inline-flex;
flex: 0 0 24px;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-top: 1px;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
background-color: #f5c446;
color: #1f2930;
font-family: Arial, sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 1;
padding-top: 6px;
box-sizing: border-box;
} .service-detail-message {
padding: 62px 0 70px;
background-color: #fff;
}
@media screen and (max-width: 500px) {
.service-detail-message {
padding: 46px 0 52px;
}
} .service-detail-message__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
gap: 55px;
align-items: center;
}
@media screen and (max-width: 768px) {
.service-detail-message__inner {
grid-template-columns: 1fr;
gap: 32px;
}
} .service-detail-message__body {
min-width: 0;
} .service-detail-message__heading .c-section-heading__en {
color: #678196;
font-size: 12px;
letter-spacing: 0.16em;
}
.service-detail-message__heading .c-section-heading__title {
margin-top: 8px;
color: #082e4d;
font-family: "Zen Old Mincho", serif;
font-size: 29px;
font-weight: 500;
line-height: 1.55;
letter-spacing: 0.04em;
}
@media screen and (max-width: 500px) {
.service-detail-message__heading .c-section-heading__title {
font-size: 18px;
}
} .service-detail-message__text {
margin-top: 26px;
color: #435e71;
font-size: 16px;
line-height: 2.05;
letter-spacing: 0.025em;
}
.service-detail-message__text p {
margin: 0 0 18px;
}
.service-detail-message__text p:last-child {
margin-bottom: 0;
}
.service-detail-message__text strong {
color: #082e4d;
font-weight: 600;
}
.service-detail-message__text a {
color: #0b5b8d;
text-decoration: underline;
}
.service-detail-message__text a:hover {
text-decoration: none;
}
@media screen and (max-width: 500px) {
.service-detail-message__text {
font-size: 13px;
line-height: 1.95;
}
} .service-detail-message__image {
width: 100%;
aspect-ratio: 1.25/1;
overflow: hidden;
background-color: #e9eef1;
}
.service-detail-message__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media screen and (max-width: 768px) {
.service-detail-message__image {
aspect-ratio: 16/8;
}
}
@media screen and (max-width: 500px) {
.service-detail-message__image {
aspect-ratio: 1.4/1;
}
} .service-other {
padding: 58px 0 65px;
background: linear-gradient(120deg, #f4f9fc, #edf5fa);
}
@media screen and (max-width: 500px) {
.service-other {
padding: 45px 0 50px;
}
} .service-other__heading {
margin-bottom: 25px;
}
.service-other__heading .c-section-heading__en {
color: #6a8294;
font-size: 12px;
letter-spacing: 0.16em;
}
.service-other__heading .c-section-heading__title {
margin-top: 7px;
color: #082e4d;
font-family: "Zen Old Mincho", serif;
font-size: 27px;
font-weight: 500;
line-height: 1.5;
}
@media screen and (max-width: 500px) {
.service-other__heading .c-section-heading__title {
font-size: 18px;
}
} .service-other__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 15px;
}
@media screen and (max-width: 500px) {
.service-other__grid {
grid-template-columns: 1fr;
}
} .service-other__item {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 68px;
padding: 10px 24px;
border: 1px solid #becdd7;
box-sizing: border-box;
background-color: #fff;
color: #082e4d;
font-family: "Zen Old Mincho", serif;
font-size: 15px;
letter-spacing: 0.03em;
text-decoration: none;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.service-other__item span:last-child {
font-family: "Times New Roman", serif;
font-size: 20px;
transition: transform 0.3s ease;
}
.service-other__item:hover {
border-color: #073553;
background-color: #073553;
color: #fff;
transform: translateY(-2px);
}
.service-other__item:hover span:last-child {
transform: translateX(3px);
}
@media screen and (max-width: 500px) {
.service-other__item {
min-height: 62px;
padding: 10px 18px;
font-size: 14px;
}
} .service-detail .c-section-heading__en {
display: flex;
align-items: center;
gap: 15px;
} .service-detail-hero__heading .c-section-heading__en::after {
width: 85px;
} @media screen and (max-width: 768px) {
.service-about__body-inner {
max-width: none;
}
.service-sign-card__text {
font-size: 14px;
}
.service-detail-message__image {
max-width: 720px;
margin: 0 auto;
}
} @media screen and (max-width: 500px) { .service-detail .c-section-heading__en {
gap: 10px;
}
.service-detail .c-section-heading__en::after {
width: 45px;
} .service-merit-card {
padding: 27px 20px 22px;
}
.service-merit-card__number {
top: 15px;
left: 17px;
font-size: 25px;
} .service-sign-card__image {
aspect-ratio: 1.55/1;
}
.service-sign-card__body {
padding: 17px 16px 19px;
}
.service-sign-card__text {
font-size: 14px;
} .service-detail-message__inner {
gap: 27px;
} .service-other__grid {
gap: 10px;
}
}
.privacy-policy-section {
padding: 40px 0;
}
.privacy-policy-contents .privacy-policy-contents-title {
padding-bottom: 40px;
font-size: 32px;
}
@media screen and (max-width: 768px) {
.privacy-policy-contents .privacy-policy-contents-title {
font-size: 24px;
}
}
.privacy-policy-text {
text-align: left;
}
.privacy-policy-text h2 {
font-size: 16px;
font-weight: normal;
}
.privacy-policy-text h3 {
padding: 20px 0;
}
@media screen and (max-width: 768px) {
.privacy-policy-text h3 {
font-size: 17px;
}
}
.privacy-policy-text ul, .privacy-policy-text p {
padding-bottom: 20px;
}
.wp-block-separator {
border-top: 1px solid;
} .area-section {
position: relative;
width: 100%;
overflow: hidden;
background: linear-gradient(135deg, #f5f9fc 0%, #edf4f8 48%, #f9fbfd 100%);
color: #082b49;
} .area-contents {
position: relative;
display: grid;
grid-template-columns: minmax(340px, 0.85fr) minmax(0, 1.7fr);
align-items: center;
gap: 40px;
min-height: 420px;
}
@media screen and (max-width: 1135px) {
.area-contents {
grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.5fr);
gap: 30px;
}
}
@media screen and (max-width: 768px) {
.area-contents {
display: block;
min-height: auto;
}
}
.area-description {
font-size: 14px;
} .area-left {
position: relative;
z-index: 5;
min-width: 0;
} .area-left-inner {
position: relative;
z-index: 2;
} .area-visual {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(170px, 230px);
align-items: center;
gap: 30px;
min-width: 0;
min-height: 420px;
}
@media screen and (max-width: 1135px) {
.area-visual {
grid-template-columns: minmax(0, 1fr) minmax(150px, 200px);
gap: 20px;
}
}
@media screen and (max-width: 768px) {
.area-visual {
grid-template-columns: 1fr;
gap: 28px;
min-height: auto;
margin-top: 40px;
}
}
@media screen and (max-width: 500px) {
.area-visual {
gap: 20px;
margin-top: 32px;
}
} .area-main-map {
position: relative;
z-index: 3;
width: 100%;
max-width: 520px;
justify-self: center;
align-self: center;
}
.area-main-map img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
filter: none;
opacity: 1;
}
@media screen and (max-width: 1135px) {
.area-main-map {
max-width: 470px;
}
}
@media screen and (max-width: 768px) {
.area-main-map {
width: min(100%, 560px);
max-width: none;
justify-self: center;
}
}
@media screen and (max-width: 500px) {
.area-main-map {
width: 100%;
max-width: 430px;
}
} .area-hokkaido {
position: relative;
z-index: 4;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
width: 100%;
justify-self: end;
align-self: start;
padding-top: 10px;
}
@media screen and (max-width: 1135px) {
.area-hokkaido {
gap: 16px;
}
}
@media screen and (max-width: 768px) {
.area-hokkaido {
flex-direction: row;
width: auto;
justify-self: flex-start;
align-self: center;
padding-top: 0;
}
}
@media screen and (max-width: 500px) {
.area-hokkaido {
justify-self: center;
}
} .area-hokkaido-map {
width: 155px;
}
.area-hokkaido-map img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
filter: none;
opacity: 1;
}
@media screen and (max-width: 1135px) {
.area-hokkaido-map {
width: 130px;
}
}
@media screen and (max-width: 768px) {
.area-hokkaido-map {
width: 120px;
}
} .area-hokkaido-heading {
position: relative;
display: flex;
flex-direction: column;
gap: 7px;
padding-left: 22px;
}
.area-hokkaido-heading::before {
content: "";
position: absolute;
top: -15px;
bottom: -15px;
left: 0;
width: 1px;
background-color: rgba(8, 43, 73, 0.36);
}
.area-hokkaido-heading::after {
content: "";
display: block;
width: 70px;
height: 1px;
margin-top: 10px;
background-color: rgba(8, 43, 73, 0.35);
}
.area-hokkaido-heading span {
color: #375674;
font-family: "Times New Roman", serif;
font-size: 15px;
letter-spacing: 0.27em;
white-space: nowrap;
}
@media screen and (max-width: 768px) {
.area-hokkaido-heading {
padding-left: 18px;
}
.area-hokkaido-heading::before {
top: -10px;
bottom: -10px;
}
} .area-large-en {
position: absolute;
z-index: 1;
right: -17%;
bottom: 10px;
display: flex;
flex-direction: column;
color: rgba(99, 127, 151, 0.08);
font-family: Arial, Helvetica, sans-serif;
font-size: 80px;
font-weight: 500;
line-height: 1.02;
letter-spacing: 0.07em;
pointer-events: none;
}
.area-large-en span {
white-space: nowrap;
}
@media screen and (max-width: 1135px) {
.area-large-en {
font-size: 60px;
}
}
@media screen and (max-width: 768px) {
.area-large-en {
right: 0;
bottom: -40px;
font-size: 58px;
}
}
@media screen and (max-width: 500px) {
.area-large-en {
display: none;
}
} @media screen and (max-width: 768px) {
.area-bg-decoration-right01 {
right: 50px;
}
.area-bg-decoration-right02 {
right: -120px;
}
.area-bg-decoration-right03 {
right: -180px;
}
} @media screen and (max-width: 500px) {
.area-bg-decoration-left {
width: 130px;
height: 280px;
left: -100px;
}
.area-bg-decoration-right01 {
display: none;
}
.area-bg-decoration-right02 {
right: -100px;
opacity: 0.6;
}
.area-bg-decoration-right03 {
right: -210px;
bottom: -220px;
}
.area-map-point-yakumo {
top: 29%;
left: 25%;
}
.area-map-point-hokuto {
top: 58%;
left: 50%;
}
.area-map-point-hakodate {
top: 68%;
left: 66%;
}
} .service-area-contents {
margin: 40px 0;
}
.service-area-title {
text-align: left;
font-weight: bold;
}
.service-area-text {
padding: 10px 0;
}
@media screen and (max-width: 768px) {
.service-area-text {
padding-bottom: 10px;
}
}
.service-area-text img {
width: 24px;
height: 28px;
}
.service-area-text p {
font-weight: normal;
}
.service-area-text-bottom {
padding: 16px;
background-color: #edf4f8;
border-radius: 10px;
text-align: left;
}
.service-area-text-bottom p {
font-weight: normal;
}
@media screen and (max-width: 768px) {
.service-area-text-bottom {
padding: 8px;
}
}
.area-content-box {
gap: 40px;
}
@media screen and (max-width: 768px) {
.area-content-box {
gap: 0;
}
}
@media screen and (max-width: 768px) {
.area-content-box .wp-block-columns.is-layout-flex {
flex-direction: column;
}
}
#area .wp-block-columns.is-layout-flex {
gap: 90px;
}
@media screen and (max-width: 1135px) {
#area .wp-block-columns.is-layout-flex {
gap: 40px;
}
}
@media screen and (max-width: 768px) {
#area .wp-block-columns.is-layout-flex {
gap: 0;
justify-content: center;
}
}
@media screen and (max-width: 768px) {
#area .wp-block-columns.is-layout-flex.wp-block-columns-is-layout-flex {
justify-content: center;
}
}
#area .wp-container-core-columns-is-layout-9d6595d7 {
align-items: flex-start;
}
@media screen and (max-width: 768px) {
.area-map {
width: 100%;
height: auto;
}
} .flow-section {
background-color: #fff;
} .flow-contents {
display: grid;
grid-template-columns: 210px minmax(0, 1fr);
gap: 38px;
align-items: start;
padding: 20px 0;
}
@media screen and (max-width: 768px) {
.flow-contents {
grid-template-columns: 1fr;
gap: 36px;
padding: 10px 0;
}
}  .flow-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 210px;
min-height: 44px;
border: 1px solid #aab8c2;
color: #082b49;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.04em;
text-decoration: none;
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.flow-button:hover {
background-color: #082b49;
border-color: #082b49;
color: #fff;
}
.flow-button-arrow {
position: absolute;
top: 50%;
right: 14px;
font-size: 20px;
line-height: 1;
transform: translateY(-52%);
} .process-list {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
width: 100%;
max-width: none;
margin: 0;
padding: 0;
list-style: none;
}
@media screen and (max-width: 768px) {
.process-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 18px;
}
}
@media screen and (max-width: 520px) {
.process-list {
grid-template-columns: 1fr;
}
} .process-item {
position: relative;
display: block;
margin: 0;
min-width: 0; }
.process-item::before {
display: none;
} .process-image {
position: relative;
width: 100%;
aspect-ratio: 1.45/1;
margin-bottom: 14px;
overflow: visible;
}
.process-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
} .process-circle {
position: absolute;
top: -12px;
left: -8px;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border-radius: 50%;
background-color: #082f4c;
color: #fff;
font-family: "Times New Roman", serif;
font-size: 15px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.03em;
z-index: 2;
}
@media screen and (max-width: 768px) {
.process-circle {
width: 32px;
height: 32px;
top: -10px;
left: -5px;
}
} .process-content {
width: 100%;
max-width: none;
text-align: center;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background-color: transparent;
box-shadow: none;
transition: none;
}
.process-content:hover {
transform: none;
box-shadow: none;
} .process-step-title {
margin: 0 0 7px;
color: #082b49;
font-family: "Zen Old Mincho", serif;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.03em;
}
@media screen and (max-width: 768px) {
.process-step-title {
font-size: 15px;
}
} .process-step-text {
margin: 0;
color: #52616c;
font-size: 14px;
line-height: 1.75;
letter-spacing: 0.02em;
}
@media screen and (max-width: 768px) {
.process-step-text {
font-size: 13px;
}
} @media screen and (max-width: 768px) {
.flow-heading {
max-width: 500px;
}
.flow-button {
max-width: 220px;
}
} @media screen and (max-width: 520px) {
.process-list {
gap: 34px;
}
.process-image {
aspect-ratio: 16/9;
}
.process-step-title {
font-size: 18px;
}
.process-step-text {
font-size: 14px;
}
} #footer {
background-color: #062f4d;
color: #fff;
padding: 34px 0 18px;
} .footer-inner {
display: flex;
justify-content: space-between;
gap: 36px;
align-items: center;
}
@media screen and (max-width: 768px) {
.footer-inner {
flex-direction: column;
gap: 28px;
align-items: start;
}
} .footer-brand {
min-width: 0;
}
.footer-logo {
display: inline-flex;
align-items: center;
gap: 12px;
color: #fff;
text-decoration: none;
transition: opacity 0.3s ease;
}
.footer-logo:hover {
opacity: 0.8;
}
.footer-logo img {
display: block;
flex-shrink: 0;
width: 46px;
height: auto;
object-fit: contain;
}
@media screen and (max-width: 768px) {
.footer-logo img {
width: 42px;
}
} .footer-logo-text {
min-width: 0;
}
.footer-company-name {
margin: 0;
color: #fff;
font-family: "Zen Old Mincho", serif;
font-size: 17px;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
.footer-company-name {
font-size: 16px;
}
} .footer-nav {
min-width: 0;
}
@media screen and (max-width: 768px) {
.footer-nav {
width: 90%;
margin-inline: auto;
}
}
.footer-nav-list {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 12px 24px;
margin: 0;
padding: 0;
list-style: none;
}
.footer-nav-list li {
margin: 0;
padding: 0;
}
.footer-nav-list a {
position: relative;
display: inline-block;
padding: 5px 0;
color: rgba(255, 255, 255, 0.88);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.04em;
text-decoration: none;
font-family: "Zen Old Mincho", serif;
white-space: nowrap;
transition: color 0.3s ease;
}
.footer-nav-list a::after {
content: "";
position: absolute;
left: 50%;
bottom: 0px;
width: 0;
height: 1px;
background-color: #fff;
transform: translateX(-50%);
transition: width 0.3s ease;
}
.footer-nav-list a:hover {
color: #fff;
}
.footer-nav-list a:hover::after {
width: 100%;
}
@media screen and (max-width: 768px) {
.footer-nav-list {
justify-content: flex-start;
gap: 10px 22px;
}
} .footer-contact {
display: flex;
justify-content: flex-end;
}
@media screen and (max-width: 768px) {
.footer-contact {
justify-content: flex-start;
}
}
.footer-contact-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
max-width: 175px;
min-height: 45px;
padding: 10px 32px 10px 16px;
border: 1px solid rgba(255, 255, 255, 0.55);
color: #fff;
font-size: 15px;
line-height: 1.4;
letter-spacing: 0.05em;
text-decoration: none;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.footer-contact-button:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: #fff;
}
@media screen and (max-width: 768px) {
.footer-contact-button {
max-width: 200px;
}
} .footer-contact-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 19px;
}
.footer-contact-icon img {
display: block;
width: 100%;
height: auto;
} .footer-contact-arrow {
position: absolute;
top: 50%;
right: 12px;
font-size: 18px;
line-height: 1;
transform: translateY(-52%);
transition: transform 0.3s ease;
}
.footer-contact-button:hover .footer-contact-arrow {
transform: translate(3px, -52%);
} .footer-bottom {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 24px;
margin-top: 24px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
@media screen and (max-width: 768px) {
.footer-bottom {
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
gap: 8px;
margin-top: 6px;
}
} .footer-privacy {
color: rgba(255, 255, 255, 0.5);
font-size: 9px;
line-height: 1.5;
letter-spacing: 0.04em;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-privacy:hover {
color: #fff;
} .copyright {
margin: 0;
padding: 0;
color: rgba(255, 255, 255, 0.48);
font-size: 9px;
line-height: 1.5;
letter-spacing: 0.04em;
text-align: right;
}
@media screen and (max-width: 768px) {
.copyright {
text-align: left;
}
} .to-top {
position: fixed;
right: 24px;
bottom: 120px;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
background-color: #062f4d;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.to-top:hover {
transform: translateY(-3px);
}
.to-top img {
display: block;
width: 16px;
height: auto;
object-fit: contain;
}
@media screen and (max-width: 768px) {
.to-top {
right: 15px;
bottom: 80px;
width: 42px;
height: 42px;
}
} @media screen and (max-width: 520px) {
#footer {
padding: 30px 0 18px;
}
.footer-inner {
gap: 24px;
}
.footer-nav-list {
display: grid;
grid-template-columns: repeat(2, auto);
justify-content: space-between;
gap: 10px 28px;
}
.footer-nav-list a {
font-size: 15px;
}
.footer-bottom {
margin-top: 4px;
padding-top: 14px;
}
}
html {
font-size: 100%;
margin: 0;
scroll-behavior: smooth;
font-variant-numeric: tabular-nums;
overflow-x: hidden;
}
body {
overflow-x: hidden;
box-sizing: border-box;
font-family: sans-serif;
}
img {
width: 100%;
}
a {
list-style: none;
text-decoration: none;
} .mainvisual-contents {
position: relative;
width: 100%;
height: clamp(560px, 75vh, 760px);
overflow: hidden;
background-color: #edf5fa;
}
@media screen and (max-width: 768px) {
.mainvisual-contents {
height: 600px;
}
}
@media screen and (max-width: 500px) {
.mainvisual-contents {
height: 400px;
}
} #slideshow {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;   }
#slideshow::before {
content: "";
position: absolute;
inset: 0;
z-index: 10;
pointer-events: none;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.96) 18%, rgba(255, 255, 255, 0.9) 28%, rgba(255, 255, 255, 0.66) 39%, rgba(255, 255, 255, 0.3) 51%, rgba(255, 255, 255, 0.07) 63%, rgba(255, 255, 255, 0) 76%);
}
#slideshow picture {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}
@media screen and (max-width: 768px) {
#slideshow::before {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.93) 30%, rgba(255, 255, 255, 0.58) 48%, rgba(255, 255, 255, 0.15) 67%, rgba(255, 255, 255, 0) 82%);
}
}
@media screen and (max-width: 500px) {
#slideshow::before {
background: rgba(3, 22, 34, 0.38);
}
} #slideshow img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
z-index: 1;
transition: opacity 1s ease;
will-change: opacity;
} #slideshow img.active {
opacity: 1;
z-index: 2;
} .slideshow-text {
position: absolute;
top: 57%;
left: clamp(40px, 6vw, 110px);
z-index: 15;
width: min(560px, 44vw);
transform: translateY(-50%);
font-family: "Zen Old Mincho", serif;
}
@media screen and (max-width: 768px) {
.slideshow-text {
top: 52%;
left: 35px;
width: 410px;
}
}
@media screen and (max-width: 500px) {
.slideshow-text {
top: 100px;
left: 20px;
width: calc(100% - 40px);
transform: none;
color: #fff;
}
} .slideshow-text h1 {
margin: 0;
color: #1F2937;
font-family: "Zen Old Mincho", serif;
font-size: clamp(36px, 3.25vw, 52px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.055em;
text-shadow: 0 1px 3px rgba(255, 255, 255, 0.6);
}
@media screen and (max-width: 768px) {
.slideshow-text h1 {
font-size: 34px;
}
}
@media screen and (max-width: 500px) {
.slideshow-text h1 {
color: #fff;
font-size: 24px;
line-height: 1.55;
letter-spacing: 0.04em;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.55), 0 0 12px rgba(0, 0, 0, 0.25);
}
} .slideshow-text .mv-blue {
color: #003366;
}
@media screen and (max-width: 500px) {
.slideshow-text .mv-blue {
color: #fff;
}
} .slideshow-text__description {
margin-top: 22px;
}
.slideshow-text__description p {
margin: 0;
color: #1d3444;
font-family: "Zen Old Mincho", serif;
font-size: 16px;
font-weight: normal;
line-height: 1.9;
letter-spacing: 0.025em;
text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}
.slideshow-text__description p + p {
margin-top: 2px;
}
@media screen and (max-width: 768px) {
.slideshow-text__description {
margin-top: 18px;
}
.slideshow-text__description p {
font-size: 14px;
}
}
@media screen and (max-width: 500px) {
.slideshow-text__description {
margin-top: 17px;
}
.slideshow-text__description p {
color: rgba(255, 255, 255, 0.95);
font-size: 14px;
line-height: 1.8;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.35);
}
} .mv-btn-box {
display: flex;
align-items: center;
gap: 16px;
margin-top: 27px;
font-family: sans-serif;
}
@media screen and (max-width: 768px) {
.mv-btn-box {
align-items: flex-start;
flex-direction: column;
gap: 10px;
margin-top: 23px;
}
}
@media screen and (max-width: 500px) {
.mv-btn-box {
margin-top: 21px;
}
} .mv-btn-box .cta-btn {
width: 285px;
margin: 0;
background: none;
}
@media screen and (max-width: 500px) {
.mv-btn-box .cta-btn {
width: 260px;
max-width: 100%;
}
} .slideshow-text .contact-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 58px;
padding: 10px 44px 10px 20px;
border: 1px solid #073553;
box-sizing: border-box;
background-color: #073553;
color: #fff;
font-family: sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.04em;
text-decoration: none;
transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }
.slideshow-text .contact-button::after {
content: "›";
position: absolute;
top: 50%;
right: 18px;
color: #fff;
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: 300;
line-height: 1;
transform: translateY(-52%);
transition: transform 0.3s ease;
}
.slideshow-text .contact-button:hover {
transform: translateY(-2px);
}
.slideshow-text .contact-button:hover::after {
transform: translate(3px, -52%);
}
.slideshow-text .contact-button img {
display: block;
flex-shrink: 0;
width: 17px;
height: 17px;
object-fit: contain;
}
@media screen and (max-width: 500px) {
.slideshow-text .contact-button {
min-height: 52px;
padding: 9px 40px 9px 17px;
font-size: 15px;
}
} .mv-btn-box .line-btn {
margin: 0;
align-content: center;
} #about,
#service,
#works,
#flow,
#company,
#faq {
scroll-margin-top: 80px;
} .error-404 {
min-height: 100vh;
padding-top: 40px;
} .thanks-section {
min-height: 100vh;
padding-top: 40px;
text-align: center;
}
.thanks-section h1 {
text-align: center;
}
.thanks-section .thanks-text {
padding: 60px 0 120px;
text-align: center;
}
.thanks-section a {
margin: 0 auto;
}