body {
     font-family: 'M PLUS 1p', sans-serif;
     letter-spacing: 0.4px;
     font-weight: 400;

 }

 .service-section {
     padding: 60px 0;
     background-color: #f9f6f1;
 }

 .service-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 30px;
 }

 .service-title {
     font-size: clamp(1.5rem, 4vw, 2rem);
     font-weight: bold;
     margin-bottom: clamp(30px, 5vw, 55px);
     position: relative;
     text-align: center;

 }

 .service-title::after {
     content: "";
     display: block;
     width: 85px;
     height: 8px;
     background-color: #0054a7;
     margin: 10px auto 0;
     box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
 }

 .service-main-feature {
     background-color: #0054a7;
     color: #fff;
     padding: 15px;
     margin: 0 auto 200px;
     text-align: center;
     font-weight: bold;
     font-size: 1.9rem;
     border-radius: 8px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
 }

 .service-item {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 150px;
     margin-top: 100px;
 }

 .service-text {
     flex: 1;
     line-height: 20px;
 }

 .service-heading-wrap {
     border-left: 3px solid #0054a7;
     padding-left: 8px;
     margin-bottom: 10px;
 }

 .service-heading {
     font-weight: bold;
     font-size: 1.4rem;
     margin-left: 35px;
 }

 .service-heading-wrap p {
     margin: 20px 35px;
     line-height: 1.8;
 }

 .service-toggle {
     position: relative;
     background: #00356a;
     color: #fff;
     padding: 15px 20px;
     border: none;
     border-radius: 8px;
     cursor: pointer;
     font-weight: bold;
     margin-top: 10px;
     width: 100%;
     text-align: center;
     font-size: 1.2rem;
     transition:
         background-color 0.3s ease,
         transform 0.1s ease,
         box-shadow 0.3s ease,
         border-radius 0.3s ease;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
 }

 .service-toggle:hover {
     background-color: #014283;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
 }

 .service-toggle:active,
 .service-toggle.active {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }

 .service-toggle.open {
     background-color: #0456a8;
     border-radius: 6px 6px 0 0;
 }

 .service-toggle .label {
     display: inline-block;
 }

 .service-toggle .plus {
     position: absolute;
     right: 20px;
     top: 50%;
     transform: translateY(-50%);
 }

 .rotate-right {
     display: inline-block;
     animation: rotateRight 0.3s forwards;
 }

 .rotate-left {
     display: inline-block;
     animation: rotateLeft 0.3s forwards;
 }

 @keyframes rotateRight {
     from {
         transform: translateY(-50%) rotate(0deg);
     }

     to {
         transform: translateY(-50%) rotate(180deg);
     }
 }

 @keyframes rotateLeft {
     from {
         transform: translateY(-50%) rotate(180deg);
     }

     to {
         transform: translateY(-50%) rotate(0deg);
     }
 }


 .service-details-wrapper {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     border-radius: 0 0 6px 6px;
     padding-bottom: 0.01px;
     transition: none;
 }

 .service-details {
     background: #fff;
     padding: 0 20px;
     border: 0 solid #00356a;
     border-top: none;
     border-radius: 0 0 6px 6px;
     max-height: 0;
     overflow: hidden;
     opacity: 1;
     transition:
         max-height 0.3s ease-in-out,
         opacity 0.2s ease-out,
         padding 0.2s ease-out;
 }

 .service-details.show {
     max-height: 600px;
     padding: 20px;
     opacity: 1;
     border: 1px solid #0456a8;
 }


 .service-description {
     line-height: 2.8;
     padding: 50px 20px;
 }

 .service-description p {
     text-indent: -1em;
     padding-left: 1em;
     margin: 0 0 1em;
     word-break: break-word;
     overflow-wrap: break-word;
 }

 .wbr-fix {
     display: inline-block;
     word-break: break-word;
 }


 .service-description .note {
     display: block;
     line-height: 2.8;
     font-size: 16px;
     margin-top: 2px;
     margin-bottom: 14px;
     text-indent: -1em;
     padding-left: 1em;
 }

 .service-image {
     flex: 1;
     min-width: 350px;
     max-width: 350px;
     width: 100%;
     height: 265px;
     overflow: hidden;
     position: relative;
     box-shadow: 6px 5px 4px rgba(0, 0, 0, 0.14);
 }

 .service-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .service-area,
 .service-dealers {
     text-align: center;
     background: white;
     padding: clamp(20px, 5vw, 40px);
     box-shadow: 6px 4px 8px rgba(0, 0, 0, 0.2);
     margin: clamp(40px, 5vw, 80px) auto;
 }

 .service-area {
     margin: 150px auto 0;
 }

 .service-dealers {
     margin: 50px auto;
 }

 .service-area h3,
 .service-dealers h3 {
     font-size: clamp(1.2rem, 4vw, 1.6rem);
     font-weight: bold;
     position: relative;
     display: inline-block;
     margin-bottom: 10px;
     word-break: keep-all;
     overflow-wrap: break-word;
 }

 .service-area h3::after,
 .service-dealers h3::after {
     content: "";
     position: absolute;
     left: 50%;
     bottom: -5px;
     transform: translateX(-50%);
     width: 105%;
     height: 8px;
     background-color: #fff38a;
 }

 .service-area p,
 .service-dealers p {
     font-size: clamp(1rem, 2.5vw, 1.2rem);
     line-height: 1.7;
 }

 .dealer-paragraph {
     margin: 1em auto;
     text-align: left;
     max-width: 71%;
     width: 100%;
     padding-left: clamp(1em, 3vw, 2.5em);
     text-indent: clamp(-1em, -3vw, -2.5em);
     word-break: break-word;
     font-size: clamp(0.95rem, 2.5vw, 1.2rem);
     line-height: 1.8;
 }

 .visual-banner {
     position: relative;
     width: 100vw;
     margin-left: calc(-50vw + 50%);
     aspect-ratio: 16 / 5;
     overflow: hidden;
 }

 .visual-banner__img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .visual-banner__inner {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 2;
     text-align: center;
 }

 .visual-banner__inner p {
     color: #fff;
     font-size: 1.3rem;
     font-family: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
     line-height: 1.6;
     font-weight: 500;
     text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
     letter-spacing: 2px;
 }

 .visual-banner::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.5);
     z-index: 1;
 }

 @media (max-width: 1024px) {
     .service-section {
         padding: 60px 6vw;
     }

     .service-item {
         flex-direction: row;
         gap: 60px;
     }

     .service-image {
         max-width: 100%;
         min-width: unset;
         height: auto;
         aspect-ratio: 4 / 3;
     }

     .service-description {
         line-height: 1.8;
         padding: 30px 10px;
     }

     .service-main-feature {
         font-size: 1.4rem;
         margin-bottom: 100px;
         padding: 12px;
     }

     .service-heading {
         font-size: 1.2rem;
         margin-left: 20px;
     }

     .service-toggle {
         font-size: 1rem;
         padding: 12px 16px;
     }

     .service-details {
         padding: 0 16px;
     }

     .service-details.show {
         padding: 20px 16px;
     }

     .dealer-paragraph {
         max-width: 90%;
     }
 }

 @media (max-width: 768px) {
     .service-section {
         padding: 40px 6vw;
     }

     .service-container {
         margin: 0 50px;
     }

     .service-item {
         flex-direction: column;
         gap: 40px;
     }

     .service-text {
         width: 100%;
         max-width: 100%;
         padding: 0;
     }

     .service-image {
         order: 2;
         width: 100%;
         height: auto;
         max-width: 100%;
         aspect-ratio: 4 / 3;
         box-shadow: none;
     }

     .visual-banner {
         height: 200px;
     }

     .visual-banner__inner p {
         font-size: 1rem;
     }

 }

 @media (max-width: 480px) {
     .service-section {
         padding: 30px 5vw;
     }

     .service-container {
         margin: 0;
         padding: 0;
     }

     .service-title {
         font-size: 1.3rem;
         margin-bottom: 40px;
     }

     .service-title::after {
         width: 50px;
         height: 5px;
     }

     .service-main-feature {
         font-size: 1rem;
         padding: 12px;
         margin-bottom: 60px;
     }

     .service-heading-wrap {
         padding-left: 6px;
     }

     .service-heading-wrap p {
         font-size: 0.95rem;
         margin: 8px 20px;
     }

     .service-heading {
         font-size: 1.1rem;
         margin-left: 15px;
     }

     .service-item {
         margin-top: 70px;
     }

     .service-toggle {
         font-size: 1.0rem;
         padding: 13px;
         letter-spacing: 1px;
     }

     .service-image {
         aspect-ratio: 4 / 3;
         box-shadow: none;
     }

     .service-description {
         padding: 20px 10px;
         font-size: 0.95rem;
         line-height: 1.5;
         font-weight: 400;
     }

     .service-description .note {
         font-size: 0.95rem;
     }

     .service-area h3,
     .service-dealers h3 {
         font-size: clamp(1rem, 3vw, 1.3rem);
         font-weight: bold;
         position: relative;
         display: inline-block;
         margin-bottom: 10px;
     }

     .service-area h3::after,
     .service-dealers h3::after {
         bottom: -2px;
         width: 105%;
         height: 5px;
     }

     .service-area {
         margin: 70px auto 0;
     }


     .service-dealers {
         margin: 40px auto 50px;
     }

     .service-area p,
     .service-dealers p {
         font-size: clamp(0.85rem, 2.5vw, 1.2rem);
     }

     .service-details.show {
         max-height: 600px;
         padding: 20px;
         opacity: 1;
         border: 1px solid #0456a8;
     }

     .visual-banner__inner p {
         font-size: 0.8rem;
         letter-spacing: 1px;
     }
 }