/* Layout corrections for the HTML homepage; loaded after legacy and motion CSS. */
.home {
  --section-gutter: 4%;
  --article-gap: 28px;
  --article-padding: 28px;
  --article-title: 23px;
  --article-body: 17px;
}

/* Grid gaps replace percentage widths + nth-child margins. */
.home main img { height: auto; }
.home .articles .content {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--article-gap);
  width: 100%;
  max-width: 1440px;
  padding: 0 var(--section-gutter);
  margin: 32px auto 0;
}
.home .articles .content article:nth-child(n) {
  width: auto;
  min-width: 0;
  margin: 0;
}
.home .articles .content article > a { display: block; height: 100%; }
.home .articles .content article a .thumb img { display: block; }
.home .articles .content article a h2 {
  padding: 0 var(--article-padding);
  font-size: var(--article-title);
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.home .articles .content article a h3 {
  padding: 0 var(--article-padding);
  margin: 14px 0 28px;
  font-size: var(--article-body);
  line-height: 1.85;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}
.home .articles .title { padding: 0 var(--section-gutter); }
.home .articles .button { padding: 0 var(--section-gutter); }
.home .articles .button a {
  max-width: 100%;
  gap: 20px;
  padding: 20px 36px;
}
.home .articles .button a .catch { padding: 0; font-size: clamp(16px, 2.2vw, 28px); }
.home .articles .button a .icon { flex-shrink: 0; width: 40px; }
.home .articles .button a .arrow { flex-shrink: 0; width: 30px; }

/* Both columns reset their inherited 50% widths; stacking no longer leaves a half-width text column. */
.home .cta .wrapper .inner { width: 92%; max-width: 1280px; }
.home .cta .wrapper .inner .title { padding: 0 12px; }
.home .cta .wrapper .inner .box {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: 32px 40px 44px;
}
.home .cta .wrapper .inner .box .text,
.home .cta .wrapper .inner .box .thumb {
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
}
.home .cta .wrapper .inner .box .text .sentence { padding: 0; }
.home .cta .wrapper .inner .box .text .sentence p { padding: 0; font-size: 16px; line-height: 1.95; }
.home .cta .wrapper .inner .box .thumb img { display: block; }
.home .cta .wrapper .inner .box .text .to-contact { padding-top: 40px; }
.home .cta .wrapper .inner .box .text .to-contact a {
  width: 100%;
  max-width: 440px;
  padding: 20px 24px 24px;
  font-size: 24px;
  line-height: 1.5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  align-items: center;
  column-gap: 12px;
}
.home .cta .wrapper .inner .box .text .to-contact a .semi {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 340px;
  padding: 5px 8px;
  margin: -34px auto 20px;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.5;
}
.home .cta .wrapper .inner .box .text .to-contact a .semi::before {
  top: 100%;
  border-width: 8px;
  border-top-color: #fff;
}
.home .cta .wrapper .inner .box .text .to-contact a img {
  position: static;
  transform: none;
  width: 26px;
  height: 26px;
}

/* Fixed 1000px footer navigation also squeezed its neighbouring logo. */
.home .footer .wrapper .content { padding-top: 80px; }
.home .footer .wrapper .content .top {
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(0, 2fr);
  gap: 40px;
  align-items: start;
  max-width: 1440px;
  margin: auto;
}
.home .footer .wrapper .content .top .right { width: auto; min-width: 0; }
.home .footer .wrapper .content .top .right nav ul { flex-wrap: wrap; gap: 14px 28px; }
.home .footer .wrapper .content .top .right nav ul li { padding: 0; }
.home .footer .wrapper .content .top .right .explain { padding: 0; margin-top: 30px; }
.home .footer .wrapper .content .bottom ul { flex-wrap: wrap; gap: 12px 24px; }
.home .footer .wrapper .phrase { font-size: clamp(40px, 7vw, 90px); }

/* -----------------------------------
Responsive: 1281–1440 (Middle PC)
----------------------------------- */
@media screen and (1281px <= width <= 1440px) {
  .home { --article-gap: 24px; --article-padding: 26px; --article-title: 22px; }
  .home .cta .wrapper .inner .box { gap: 36px; padding: 32px 36px 40px; }
  .home .footer .wrapper .content .top { gap: 32px; }
} /* 1281px–1440px responsive-close */

/* -----------------------------------
Responsive: 1024–1280 (Small PC)
----------------------------------- */
@media screen and (1024px <= width < 1281px) {
  .home { --article-gap: 20px; --article-padding: 20px; --article-title: 20px; --article-body: 16px; }
  .home .cta .wrapper .inner .box { gap: 28px; padding: 28px 28px 36px; }
  .home .point .wrapper .inner .box-wrapper .box h3 { font-size: 22px; }
  .home .point .wrapper .inner .box-wrapper .box h3 .cover { padding: 9px 10px; }
  .home .point .wrapper .inner .box-wrapper .box h4 { font-size: 20px; line-height: 1.65; }
  .home .point .wrapper .inner .box-wrapper .box p { font-size: 16px; line-height: 1.85; }
  .home .footer .wrapper .content .top { gap: 28px; }
  .home .footer .wrapper .content .top .right nav.main ul li a { font-size: 17px; }
  .home .footer .wrapper .content .top .right nav.sub ul li a { font-size: 14px; }
} /* 1024px–1280px responsive-close */

/* -----------------------------------
Responsive: 768–1023 (Tablet)
----------------------------------- */
@media screen and (768px <= width < 1024px) {
  .home { --article-gap: 24px; --article-padding: 24px; --article-title: 21px; --article-body: 16px; }
  .home .articles .content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home .cta .wrapper .inner .box { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 28px 40px 36px; }
  .home .cta .wrapper .inner .box .text { max-width: 640px; margin: auto; }
  .home .cta .wrapper .inner .box .thumb { max-width: 460px; margin: auto; }
  .home .point .wrapper .inner .box-wrapper .box h3 { font-size: 21px; }
  .home .point .wrapper .inner .box-wrapper .box h3 .cover { padding: 9px 10px; }
  .home .point .wrapper .inner .box-wrapper .box p { font-size: 16px; line-height: 1.85; }
  .home .about-us .wrapper .inner .sentence p { font-size: 16px; line-height: 1.9; }
  .home .footer .wrapper .content .top { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .home .footer .wrapper .content .top .right nav ul { justify-content: flex-start; }
  .site-header { padding-inline: 3%; gap: 16px; }
  .site-nav { gap: 18px; }
  .site-nav a { white-space: nowrap; }
  .site-nav .nav-test { padding: 14px; }
  .nav-test span { margin-left: 12px; }
} /* 768px–1023px responsive-close */

/* -----------------------------------
Responsive: up to 767 (Mobile)
----------------------------------- */
@media screen and (width < 768px) {
  .home { --section-gutter: 6%; --article-gap: 28px; --article-padding: 22px; --article-title: 20px; --article-body: 16px; }
  .home .articles .content { grid-template-columns: minmax(0, 1fr); max-width: 600px; }
  .home .articles .button a { gap: 12px; padding: 18px 22px; }
  .home .articles .button a .catch { letter-spacing: .02em; }
  .home .articles .button a .icon { width: 28px; }
  .home .articles .button a .arrow { width: 23px; }
  .home .articles .title .sentence p { font-size: 15px; line-height: 1.8; }
  .home .cta .wrapper .inner { width: 92%; border-width: 5px; }
  .home .cta .wrapper .inner::before,
  .home .cta .wrapper .inner::after { width: 22px; height: 5px; }
  .home .cta .wrapper .inner .box { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 24px 20px 28px; }
  .home .cta .wrapper .inner .box .text .sentence p { font-size: 14px; }
  .home .cta .wrapper .inner .box .thumb { max-width: 400px; margin: auto; }
  .home .cta .wrapper .inner .box .text .to-contact a { padding-inline: 14px; font-size: 21px; column-gap: 6px; }
  .home .cta .wrapper .inner .box .text .to-contact a .semi { font-size: 13px; }
  .home .footer .wrapper .content { padding-top: 48px; }
  .home .footer .wrapper .content .top { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-inline: 6%; }
  .home .footer .wrapper .content .top .right nav ul { justify-content: flex-start; gap: 16px 22px; }
  .home .footer .wrapper .content .top .right nav.main ul li a { font-size: 15px; }
  .home .footer .wrapper .content .top .right nav.sub ul li a { font-size: 13px; letter-spacing: .02em; }
  .home .footer .wrapper .content .top .left .logo a .main { font-size: 26px; letter-spacing: .1em; }
  .home .footer .wrapper .content .bottom ul li { font-size: 11px; letter-spacing: .08em; }
}