/* ============================================================
  01. HOME COMMON
============================================================ */
.home-page {
 overflow: clip;
}

.home-page .section {
 padding: 96px 0;
}

.home-page .section-alt {
 background: var(--gray-bg);
}

.home-page .sec-head {
 max-width: 720px;
 margin: 0 auto 56px;
 text-align: center;
}

.home-page .sec-eyebrow {
 margin-bottom: 12px;
 color: var(--blue-royal);
 font-size: 13px;
 font-weight: 700;
 letter-spacing: 0.08em;
}

.home-page .sec-head h2 {
 margin-bottom: 14px;
 color: var(--ink);
 font-family: var(--serif);
 font-size: clamp(24px, 2.8vw, 32px);
 font-weight: 700;
}

.home-page .sec-head p {
 color: var(--ink-soft);
 font-size: 15px;
}

.home-page .ph-img {
 position: absolute;
 inset: 0;
 z-index: 1;
 width: 100%;
 height: 100%;
 object-fit: cover;
}

/* ============================================================
  02. HERO
============================================================ */
.hero {
 position: relative;
 display: flex;
 align-items: center;
 min-height: 780px;
 overflow: hidden;
 background: #33414f;
}

.hero-slider {
 position: absolute;
 inset: 0;
 z-index: 0;
}

.hero-slider .swiper-wrapper,
.hero-slider .swiper-slide {
 height: 100%;
}

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

.hero-slider .swiper-pagination {
 bottom: 28px;
 z-index: 3;
}

.hero-slider .swiper-pagination-bullet {
 width: 10px;
 height: 10px;
 opacity: 0.45;
 background: #fff;
}

.hero-slider .swiper-pagination-bullet-active {
 opacity: 1;
 background: #4f9657;
}

.hero-photo-bg {
 position: absolute;
 inset: 0;
 z-index: 1;
 background:
  linear-gradient(
   100deg,
   rgb(47 92 56 / 85%) 0%,
   rgb(47 92 56 / 58%) 38%,
   rgb(47 92 56 / 20%) 65%,
   rgb(47 92 56 / 5%) 100%
  ),
  linear-gradient(180deg, #6f8870 0%, #547359 30%, #3f5d44 55%, #283a2b 100%);
}

.hero-photo-bg::before {
 position: absolute;
 inset: 0;
 content: "";
 background-image:
  radial-gradient(circle at 15% 30%, rgb(255 255 255 / 5%) 0, transparent 3%),
  radial-gradient(circle at 38% 60%, rgb(255 255 255 / 4%) 0, transparent 2.5%),
  radial-gradient(circle at 62% 25%, rgb(255 255 255 / 5%) 0, transparent 3%),
  radial-gradient(circle at 80% 70%, rgb(255 255 255 / 4%) 0, transparent 2.5%),
  radial-gradient(circle at 25% 85%, rgb(0 0 0 / 8%) 0, transparent 4%),
  radial-gradient(circle at 70% 45%, rgb(0 0 0 / 7%) 0, transparent 3%);
 background-size:
  200px 200px,
  160px 160px,
  220px 220px,
  180px 180px,
  240px 240px,
  190px 190px;
}

.hero-photo-note {
 position: absolute;
 right: 24px;
 bottom: 18px;
 z-index: 3;
 padding: 5px 12px;
 color: rgb(255 255 255 / 55%);
 border: 1px solid rgb(255 255 255 / 30%);
 border-radius: 999px;
 font-size: 11px;
}

.hero-content {
 position: relative;
 z-index: 2;
 width: min(100%, 1188px);
 margin-inline: auto;
 padding-inline: 24px;
}

.hero-eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 22px;
 color: #d7e3d5;
 font-size: 13.5px;
 font-weight: 600;
 letter-spacing: 0.03em;
}

.hero-eyebrow::before {
 width: 28px;
 height: 2px;
 content: "";
 background: var(--amber);
}

.hero h1 {
 max-width: 750px;
 margin-bottom: 26px;
 color: var(--white);
 font-family: var(--serif);
 font-size: clamp(30px, 4.2vw, 65px);
 font-weight: 700;
 line-height: 1.55;
 text-shadow: 1px 1px 2px black;
}

.hero .lead {
 max-width: 600px;
 margin-bottom: 38px;
 color: rgb(255 255 255 / 100%);
 font-size: 15px;
 text-shadow: 1px 1px 2px black;
}

@media screen and (min-width: 768px) {
 .hero .lead {
  font-size: 20px;
 }
}

.hero-cta {
 display: flex;
 gap: 14px;
 flex-wrap: wrap;
}

.hero-content {
 pointer-events: none;
}

.hero-content a,
.hero-content button {
 pointer-events: auto;
}

/* ============================================================
  03. STRENGTHS
============================================================ */
.strengths {
 padding: 96px 0;
 background: var(--white);
}

.strength-list {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 border-top: 1px solid var(--line);
}

.strength-item {
 padding: 40px 32px 8px;
 border-right: 1px solid var(--line);
}

.strength-item:last-child {
 border-right: 0;
}

.strength-num {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 22px;
 color: var(--blue-royal);
 font-family: var(--serif);
 font-size: 15px;
 font-weight: 700;
}

.strength-num::after {
 flex: 1;
 height: 1px;
 content: "";
 background: var(--line);
}

.strength-item h3 {
 margin-bottom: 14px;
 color: var(--ink);
 font-size: 19px;
 font-weight: 700;
 line-height: 1.5;
}

.strength-item p {
 color: var(--ink-soft);
 font-size: 14.3px;
}

/* ============================================================
  04. SERVICES
============================================================ */
.services-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 22px;
}

.service-card {
 padding: 30px 24px;
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 10px;
 transition:
  box-shadow 0.2s ease,
  transform 0.2s ease;
 display: flex;
 flex-direction: column;
 align-items: center;
}

.service-card:hover {
 box-shadow: 0 10px 26px rgb(0 0 0 / 10%);
 transform: translateY(-2px);
}

.service-icon {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 48px;
 height: 48px;
 margin-bottom: 18px;
 background: var(--blue-bg);
 border-radius: 9px;
}

.service-icon svg {
 width: 24px;
 height: 24px;
 stroke: var(--blue-royal);
}

.service-card h3 {
 margin-bottom: 8px;
 color: var(--ink);
 font-size: 20px;
 font-weight: 700;
}

.service-card p {
 color: var(--ink-soft);
 font-size: 14px;
}

/* --- 主な対応工事（公共/民間 2カード） ------------------------- */
.services-grid--main {
 position: relative;
 align-items: stretch;
}

.service-card--main {
 position: relative;
 align-items: flex-start;
 overflow: hidden;
 padding: 44px 40px 40px;
 text-align: left;
 border-top: 3px solid transparent;
 border-radius: 14px;
}

.service-card--public {
 border-top-color: var(--blue-royal);
}

.service-card--private {
 border-top-color: var(--amber);
}

.service-card--main:hover {
 border-color: var(--line);
}

.service-card--public:hover {
 border-top-color: var(--blue-royal);
}

.service-card--private:hover {
 border-top-color: var(--amber);
}

/* 背景の透かし番号（公共=01 / 民間=02） */
.service-card--main::after {
 position: absolute;
 top: -0.12em;
 right: 18px;
 z-index: 0;
 color: var(--ink);
 opacity: 0.04;
 font-family: var(--serif);
 font-size: 148px;
 font-weight: 700;
 line-height: 1;
 pointer-events: none;
}

.service-card--public::after {
 content: "01";
}

.service-card--private::after {
 content: "02";
}

.service-tag {
 position: relative;
 z-index: 1;
 margin-bottom: 20px;
 font-size: 11.5px;
 font-weight: 700;
 letter-spacing: 0.12em;
}

.service-card--public .service-tag {
 color: var(--blue-royal);
}

.service-card--private .service-tag {
 color: var(--amber);
}

.service-card--main .service-icon {
 position: relative;
 z-index: 1;
 width: 56px;
 height: 56px;
 margin-bottom: 22px;
 background: none;
 border: 1.5px solid currentColor;
 border-radius: 50%;
}

.service-card--public .service-icon {
 color: var(--blue-royal);
}

.service-card--private .service-icon {
 color: var(--amber);
}

.service-card--main .service-icon svg {
 width: 26px;
 height: 26px;
 stroke: currentColor;
}

.service-card--main h3 {
 position: relative;
 z-index: 1;
 font-size: 22px;
}

.service-desc {
 position: relative;
 z-index: 1;
 margin-bottom: 24px;
 color: var(--ink-soft);
 font-size: 14px;
 line-height: 1.7;
}

.service-card--main .service-list {
 position: relative;
 z-index: 1;
 width: 100%;
 padding-top: 20px;
 border-top: 1px solid var(--line);
}

.service-card--main .service-list li {
 padding-left: 1.35em;
 color: var(--ink);
 font-size: 14.5px;
}

.service-card--main .service-list li::before {
 top: 0.78em;
 width: 5px;
 height: 5px;
 opacity: 1;
}

.service-card--public .service-list li::before {
 background: var(--blue-royal);
}

.service-card--private .service-list li::before {
 background: var(--amber);
}

/* ============================================================
  05. GALLERY
============================================================ */
.gallery-grid {
 display: grid;
 grid-template-columns: 1.4fr 1fr 1fr;
 grid-template-rows: 240px 240px;
 gap: 14px;
}

.gphoto {
 position: relative;
 display: flex;
 align-items: flex-end;
 overflow: hidden;
 border-radius: 10px;
}

.gphoto::before {
 position: absolute;
 inset: 0;
 z-index: 2;
 content: "";
 background: linear-gradient(180deg, transparent 50%, rgb(0 0 0 / 55%) 100%);
}

.gphoto .gcap {
 position: relative;
 z-index: 3;
 padding: 16px 18px;
 color: var(--white);
 font-size: 13px;
 font-weight: 600;
 letter-spacing: 0.02em;
}

.gphoto.g1 {
 grid-row: 1 / 3;
 background: linear-gradient(
  150deg,
  #869186 0%,
  #5f6c60 35%,
  #3e473d 70%,
  #262e25 100%
 );
}

.gphoto.g2 {
 background: linear-gradient(150deg, #94957f 0%, #6e7060 45%, #4d4f42 100%);
}

.gphoto.g3 {
 background: linear-gradient(150deg, #a8b3a6 0%, #82967f 40%, #566e54 100%);
}

.gphoto.g4 {
 background: linear-gradient(150deg, #8d9398 0%, #646b70 45%, #3d4347 100%);
}

.gphoto.g5 {
 background: linear-gradient(150deg, #b0a489 0%, #8d7f61 45%, #5e5340 100%);
}

/* ============================================================
  06. NEWS
============================================================ */
.news-list {
 max-width: 820px;
 margin-inline: auto;
}

.news-item {
 display: grid;
 grid-template-columns: 140px 90px 1fr;
 gap: 24px;
 align-items: baseline;
 padding: 24px 0;
 border-bottom: 1px solid var(--line);
}

.news-item:first-child {
 border-top: 1px solid var(--line);
}

.news-date {
 color: var(--ink-soft);
 font-family: var(--serif);
 font-size: 13.5px;
}

.news-tag {
 width: fit-content;
 padding: 3px 12px;
 color: var(--blue-royal);
 border: 1px solid var(--blue-royal);
 border-radius: 999px;
 font-size: 11.5px;
 font-weight: 700;
 line-height: 1.5;
 text-align: center;
}

.news-title {
 color: var(--ink);
 font-size: 14.8px;
 font-weight: 400;
}

.news-title a:hover {
 color: var(--blue-royal);
 text-decoration: underline;
}

.news-more {
 margin-top: 36px;
 text-align: center;
}

/* ============================================================
  07. RECRUIT
============================================================ */
.recruit {
 background: var(--white);
}

.recruit-grid {
 display: grid;
 grid-template-columns: 0.9fr 1.1fr;
 gap: 60px;
 align-items: center;
}

.recruit-photo {
 position: relative;
 overflow: hidden;
 aspect-ratio: 4 / 3.4;
 background: linear-gradient(
  150deg,
  #9aa39a 0%,
  #71807a 35%,
  #4d5c52 65%,
  #2f3a32 100%
 );
 border-radius: 12px;
}

.rp-note {
 position: absolute;
 right: 16px;
 bottom: 16px;
 z-index: 2;
 padding: 5px 12px;
 color: rgb(255 255 255 / 70%);
 border: 1px solid rgb(255 255 255 / 35%);
 border-radius: 999px;
 font-size: 11px;
}

.recruit-text .sec-eyebrow {
 text-align: left;
}

.recruit-text > h2 {
 margin-bottom: 18px;
 color: var(--ink);
 font-family: var(--serif);
 font-size: clamp(24px, 2.8vw, 32px);
 font-weight: 700;
}

.recruit-lead {
 max-width: 480px;
 margin-bottom: 32px;
 color: var(--ink-soft);
 font-size: 15px;
}

.recruit-points {
 display: flex;
 flex-direction: column;
 gap: 20px;
 margin-bottom: 34px;
}

.rp-item {
 display: flex;
 gap: 14px;
 align-items: flex-start;
}

.rp-dot {
 width: 8px;
 height: 8px;
 margin-top: 8px;
 flex-shrink: 0;
 background: var(--blue-royal);
 border-radius: 50%;
}

.rp-item h3 {
 margin-bottom: 4px;
 color: var(--ink);
 font-size: 15.5px;
 font-weight: 700;
}

.rp-item p {
 color: var(--ink-soft);
 font-size: 13.5px;
}

.recruit-cta {
 width: fit-content;
}

/* ============================================================
  08. ACCESS / CONTACT
============================================================ */
.access-grid {
 display: grid;
 grid-template-columns: 1.1fr 1fr;
 gap: 48px;
 align-items: start;
}

.map-box {
 position: relative;
 overflow: hidden;
 aspect-ratio: 4 / 3.2;
 border: 1px solid var(--line);
 border-radius: 10px;
}

.map-pin {
 position: absolute;
 top: 46%;
 left: 50%;
 z-index: 2;
 width: 30px;
 height: 30px;
 transform: translate(-50%, -100%);
}

.map-pin svg {
 width: 100%;
 height: 100%;
 fill: var(--blue-royal);
}

.map-label {
 position: absolute;
 right: 18px;
 bottom: 18px;
 left: 18px;
 z-index: 2;
 padding: 14px 18px;
 background: var(--white);
 border-radius: 8px;
 box-shadow: 0 4px 14px rgb(0 0 0 / 12%);
}

.map-label strong {
 display: block;
 margin-bottom: 3px;
 color: var(--ink);
 font-size: 14.5px;
}

.map-label span {
 color: var(--ink-soft);
 font-size: 13px;
}

.contact-card > h3 {
 margin-bottom: 22px;
 color: var(--ink);
 font-size: 21px;
 font-weight: 700;
}

.contact-tel-box {
 margin-bottom: 24px;
 padding: 22px 26px;
 background: var(--blue-bg);
 border-radius: 10px;
}

.contact-tel-box .label {
 margin-bottom: 6px;
 color: var(--blue-deep);
 font-size: 12.5px;
 font-weight: 600;
}

.contact-tel-box .num {
 display: block;
 color: var(--blue-royal);
 font-family: var(--serif);
 font-size: 29px;
 font-weight: 700;
 line-height: 1.4;
}

.contact-rows {
 display: flex;
 flex-direction: column;
 gap: 14px;
 margin-bottom: 28px;
}

.contact-rows .cr {
 display: flex;
 gap: 16px;
 font-size: 14.3px;
}

.contact-rows dt {
 width: 80px;
 flex-shrink: 0;
 color: var(--ink-soft);
 font-weight: 600;
}

.contact-rows dd {
 color: var(--ink);
}

/* ============================================================
  09. RESPONSIVE
============================================================ */
@media (max-width: 980px) {
 .strength-list {
  grid-template-columns: 1fr;
 }

 .strength-item {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
 }

 .strength-item:last-child {
  margin-bottom: 0;
 }

 .services-grid {
  grid-template-columns: repeat(2, 1fr);
 }

 .gallery-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 200px 200px 200px;
 }

 .gphoto.g1 {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
 }

 .recruit-grid {
  grid-template-columns: 1fr;
  gap: 36px;
 }

 .recruit-photo {
  order: -1;
  max-width: 480px;
 }

 .access-grid {
  grid-template-columns: 1fr;
 }

 .news-item {
  grid-template-columns: 100px 1fr;
 }

 .news-tag {
  grid-row: 1;
  grid-column: 2;
  justify-self: start;
 }

 .news-title {
  grid-column: 1 / -1;
 }
}

@media (max-width: 640px) {
 .home-page .section,
 .strengths {
  padding: 72px 0;
 }

 .home-page .sec-head {
  margin-bottom: 40px;
 }

 .hero {
  min-height: 520px;
 }

 .hero-content {
  padding-inline: 18px;
 }

 .hero-photo-note {
  right: 18px;
 }

 .services-grid {
  grid-template-columns: 1fr;
 }

 .gallery-grid {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(5, 180px);
 }

 .gphoto.g1 {
  grid-row: 1;
  grid-column: 1;
 }

 .news-item {
  gap: 12px 16px;
 }

 .contact-rows .cr {
  flex-direction: column;
  gap: 2px;
 }

 .contact-rows dt {
  width: auto;
 }
}
/* ============================================================
  HOME / SERVICES 補足
============================================================ */
.services-grid--main {
 grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-card--main {
 min-height: auto;
}

.service-list {
 margin: 18px 0 0;
 padding: 0;
 list-style: none;
}

.service-list li {
 position: relative;
 padding-left: 1.2em;
 line-height: 1.8;
}

.service-list li::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0.82em;
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: currentColor;
 opacity: 0.45;
}

.service-note {
 margin: 22px 0 0;
 font-size: 0.92rem;
 line-height: 1.8;
 color: rgba(34, 34, 34, 0.72);
}

/* ============================================================
  HOME / INSTAGRAM
============================================================ */
.instagram-box {
 margin-top: 56px;
 padding: 34px;
 border-radius: 24px;
 background: #fff;
 box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

.instagram-box__head {
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 gap: 20px;
 margin-bottom: 24px;
}

.instagram-box__head h3 {
 margin: 4px 0 0;
 font-size: clamp(1.6rem, 3vw, 2.2rem);
 line-height: 1.2;
}

.instagram-box__link {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 42px;
 padding: 0 18px;
 border: 1px solid rgba(34, 34, 34, 0.2);
 border-radius: 999px;
 font-size: 0.9rem;
 text-decoration: none;
 color: inherit;
 transition:
  opacity 0.2s ease,
  transform 0.2s ease;
}

.instagram-box__link:hover {
 opacity: 0.72;
 transform: translateY(-1px);
}

.instagram-box__body {
 min-height: 260px;
}

.instagram-placeholder {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 min-height: 260px;
 border: 1px dashed rgba(34, 34, 34, 0.22);
 border-radius: 18px;
 background: rgba(34, 34, 34, 0.03);
 text-align: center;
}

.instagram-placeholder p {
 margin: 0 0 8px;
 font-weight: 700;
}

.instagram-placeholder span {
 font-size: 0.92rem;
 color: rgba(34, 34, 34, 0.65);
}

@media (max-width: 767px) {
 .services-grid--main {
  grid-template-columns: 1fr;
 }

 .instagram-box {
  margin-top: 40px;
  padding: 24px 18px;
  border-radius: 18px;
 }

 .instagram-box__head {
  display: block;
 }

 .instagram-box__link {
  margin-top: 16px;
 }

 .instagram-box__body,
 .instagram-placeholder {
  min-height: 220px;
 }
}