/* =============================================
   index.css – TOP ページ スタイル
   ============================================= */

:root {
	--primary: #1456A0;
	--primary-dark: #0B3060;
	--accent: #3AADE0;
	--white: #fff;
	--gray-light: #f5f8fc;
	--text: #333;
}

/* =============================================
   FV (ファーストビュー)
   ============================================= */
#fv-top {
	position: relative;
	width: 100%;
}

#fv-top::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 20vh;
  min-height: 100px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35) 0, rgba(255, 255, 255, 0) );
  z-index: 1;
}

#fv-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20vw;
  height: 100vh;
  min-width: 300px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.35) 0, rgba(255, 255, 255, 0) );
  z-index: 1;
}

.fv-top {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}

#fv-top h2::after{
  display: none;
}

#slider {
	width: 100%;
	height: 100%;
}


.fv-text {
  position: absolute;
  top: calc(50% + 30px);
  left: 6vw;
  transform: translateY(-50%);
  z-index: 2;
  color: #fff;
}

.fv-text h2 {
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 2px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
  margin-bottom: 20px;
  font-family: "Noto Serif JP", serif;
}

.fv-text h2 em {
	display: block;
	font-style: normal;
	color:#5fceff;
}

.fv-text p {
  font-size: clamp(0.8rem, 1.25vw, 0.9rem);
  letter-spacing: 0.05rem;
  opacity: 1;
  margin-bottom: 35px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
  font-weight: 600;
}

.fv-btns {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}

.fv-btn-primary {
  gap: 8px;
  padding: 14px ;
  background: #1456A0;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: 0.3s;
  letter-spacing: 1px;
  border-radius: 40px 0;
  border: 2px solid #fff;
  background-image: linear-gradient(-73deg, #1456A0, #3AADE0, #1456A0);
  width: 240px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fv-btn-primary:hover {
	background: #0B3060;
}

.fv-btn-outline {
  gap: 8px;
  padding: 14px 35px;
  border: 2px solid #fff;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: 0.3s;
  letter-spacing: 1px;
  border-radius: 40px 0;
  background: #7d92a96e;
  width: 240px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fv-btn-outline:hover {
	background: #fff;
	color: #1456A0;
}

#fv-top .white-water-pipe-right span{
  width: 27vw!important;
}


.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin: 35px 0;
    padding: 0;
    list-style: none;
}

.hero-points li {
    display: flex;
    align-items: center;
    gap: 15px;
}

.hero-points .icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #ㄑ;
  background: linear-gradient(-73deg, #416287, #3AADE0, #1456A0);
  backdrop-filter: blur(5px);
}

.hero-points .icon i:before {
    position: relative;
    left: 1px;
}

.hero-points strong {
    display: block;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 2px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

.hero-points small {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.85);
    font-size: 1.3rem;
    letter-spacing: 2px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

@media screen and (max-width: 1024px) {

    .hero-points {
        gap: 25px;
    }

    .hero-points .icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .hero-points strong {
        font-size: 1.6rem;
    }

    .hero-points small {
        font-size: 1.2rem;
    }

}


@media screen and (max-width: 768px) {

    .hero-points {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        margin: 25px 0;
    }

    .hero-points li {
        width: 100%;
        gap: 12px;
    }

    .hero-points .icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
        flex-shrink: 0;
    }

    .hero-points strong {
        font-size: 1.4rem;
    }

    .hero-points small {
        font-size: 1.1rem;
    }

}

/* =============================================
   ABOUT セクション
   ============================================= */
#about {
  background: url("../img/kyuhaisui/equipment-inspection-check.jpg") no-repeat right top;
  background-size: cover;
  position: relative;
}

#about::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  pointer-events: none;

  background: linear-gradient(
    to right,
    #fff 0,
    #fff 36vw,
    rgba(255,255,255,0) 77vw
  );
  z-index: 1;
}

#about .main-area{
  max-width: 100%;
  position: relative;
  z-index: 2;
}

.about-inner {
  display: grid;
  align-items: center;
  width: 100%;
  grid-template-columns: repeat(2, 1fr);
}



.about-text {
  display: block;
  flex: 1;
  width: 100%;
  padding-left: 0;
  padding-right: 4vw;
  
}

.section-label {
	color: var(--accent);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 4px;
	display: block;
	margin-bottom: 10px;
  text-indent: 3px;
}

.about-text h2 {
	font-size: clamp(1.6rem, 3vw, 2.5rem);
	font-weight: 800;
	color: var(--primary-dark);
	line-height: 1.4;
	margin-bottom: 25px;
}

.about-text-content p {
	color: #222;
	margin-bottom: 12px;
}



/* =============================================
   共通 セクションヘッダー
   ============================================= */
.section-header {
	text-align: center;
	margin-bottom: 60px;
}

.section-header h2 {
	font-size: clamp(1.8rem, 3.5vw, 3rem);
	font-weight: 800;
	color: var(--primary-dark);
	position: relative;
	display: inline-block;
	padding-bottom: 20px;
}

.section-header.light h2 {
	color: #fff;
}

/* =============================================
   事業内容 (BUSINESS)
   ============================================= */
#business {
  background: #fff;
}

.business-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	margin-bottom: 50px;
}

.business-card {
	background: #fff;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(20,86,160,0.08);
	transition: 0.3s;
  border-radius: 100px 0;
}

.business-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 35px rgba(20,86,160,0.18);
}

.business-card-img {
	position: relative;
	overflow: hidden;
	aspect-ratio: 2/1;
}

.business-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: 0.5s;
}

.business-card:hover .business-card-img img {
	transform: scale(1.05);
}

.business-card-label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 12px 20px;
	background: linear-gradient(135deg, var(--primary), var(--accent));
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 1px;
}

.business-card-body {
	padding: 25px;
}

.business-card-body p {
	margin-bottom: 15px;
}

.business-card-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.business-card-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #102f51;
	padding: 8px 0;
	border-bottom: 1px solid #eef0f5;
	font-weight: 600;
}

.business-card-list li:last-child {
	border-bottom: none;
}

.business-card-list li i {
  color: #3aade0;
  width: 16px;
  display: block;
  text-align: center;
}

.business-more {
	text-align: center;
}

/* =============================================
   選ばれる理由 (STRENGTH)
   ============================================= */
#strength {
	background: url("../img/kyuhaisui/pipe-laying-work-blue.jpg") no-repeat center;
  background-size: cover;
	color: #fff;
  position: relative;
}



.strength-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.strength-card {
  border: 1px solid rgba(255,255,255,0.75);
	padding: 40px 30px;
  border-radius: 100px 0;
	text-align: center;
	transition: 0.3s;
  background: linear-gradient(to top, rgba(11, 48, 96, 1) 20%, rgba(11, 48, 97, 0.25) 50%, transparent 100%);
}

.strength-card:hover {
	background: rgba(58,173,224,0.15);
	border-color: var(--accent);
	transform: translateY(-5px);
}

.strength-icon {
  width: 8vw;
  aspect-ratio: 1 / 1;
	background: linear-gradient(135deg, var(--primary), var(--accent));
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
}

.strength-icon i {
	font-size: 1.8rem;
	color: #fff;
}

.strength-num {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--accent);
	margin-bottom: 10px;
	display: block;
}

.strength-card h3 {
  font-size: max(1.6rem, 1.6vw);
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 15px;
  color: #fff;
  background: rgb(12 18 39 / 50%);
  border-radius: 20px 0;
  padding: 5px;
}

.strength-card p {
  text-align: left;
	line-height: 1.8;
	color: rgba(255,255,255,1);
}

/* =============================================
   施工実績 (WORKS)
   ============================================= */
#works {
	background: var(--white);
}

.works-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	margin-bottom: 40px;
}

.work-item {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	aspect-ratio: 4/3;
}

.work-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: 0.5s;
}

.work-item:hover img {
	transform: scale(1.08);
}

.work-item-label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 25px 12px 10px;
	background: linear-gradient(transparent, rgba(11,48,96,0.85));
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	text-align: center;
	transform: translateY(100%);
	transition: 0.3s;
}

.work-item:hover .work-item-label {
	transform: translateY(0);
}

.works-more {
	text-align: center;
}

/* =============================================
   採用情報 & エリア
   ============================================= */
#top-contact-area {
  background: linear-gradient(135deg, #0B3060 0%, #1456A0 50%, #3AADE0 100%);
}

.top-contact-area-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

.top-contact-box {
  background: var(--primary-dark);
  color: #fff;
  padding: 50px 4vw 50px 8vw;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.top-contact-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.15;
}

.top-contact-box-content {
	position: relative;
	z-index: 1;
}

.top-contact-bg{
  background: url("../img/company/contact-staffs.jpg") no-repeat center center;
  background-size: cover;
}

.top-contact-box h3 {
	font-size: clamp(1.75rem, 2.5vw, 2rem);
	font-weight: 800;
	margin-bottom: 15px;
	line-height: 1.3;
}

.tel-contact span{
  color: #fff;
}

.top-contact-box p {
  opacity: 0.85;
	margin-bottom: 30px;
}

.area-box {
	background: linear-gradient(#C8E0F3, #fff);
	padding: 80px 4vw;
	box-shadow: 0 4px 20px rgba(20,86,160,0.07);
  position: relative;
  overflow: hidden;
}


.area-box::before {
  position: absolute;
  content: '';
  background: url("../img/area-map.png") center no-repeat;
  background-size: cover;
  display: block;
  width: 80%;
  aspect-ratio: 3/2;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.area-box h3 {
	font-size: clamp(1.4rem, 2.5vw, 2rem);
	font-weight: 800;
	color: var(--primary-dark);
	margin-bottom: 30px;
}

.area-list {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
}

.area-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid #eef0f5;
	font-size: 1.05rem;
	font-weight: 600;
	color: #333;
}

.area-list li:last-child {
	border-bottom: none;
}

.area-list li i {
	color: var(--primary);
	font-size: 1.1rem;
}

.area-note {
	font-size: 0.85rem;
	color: #102f51;
	line-height: 1.7;
}


.top-contact-tel {
	display: flex;
	align-items: center;
	gap: 15px;
  margin-bottom: 15px;
}

.top-contact-tel i {
	font-size: 2rem;
	color: #fff;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #1456a042;
}

.top-contact-tel div {
	display: flex;
	flex-direction: column;
}

.top-contact-tel span {
	font-size: 0.8rem;
	margin-bottom: 3px;
  opacity: 0.8;
}

.top-contact-tel a {
	font-size: clamp(1.8rem, 3vw, 2.5rem);
	font-weight: 800;
	color: #fff;
	letter-spacing: 2px;
	text-decoration: none;
}

/* =============================================
   レスポンシブ
   ============================================= */
@media (max-width: 1200px) {
	
  .about-inner { 
    gap: 0; 
  }
	
  .works-grid { grid-template-columns: repeat(2, 1fr); 
  }
  
  .business-card {
    border-radius: 60px 0;
  }
  
  .business-grid {
    gap: 20px;
    margin-bottom: 20px;
  }
  
  .strength-grid {
    gap: 10px;
  }
  
  .strength-card {
    padding: 30px 15px 25px;
    border-radius: 50px 0;
  }
  
  .section-header {
    margin-bottom: 30px;
  }
  
  
}

@media (max-width: 1024px) {
  
  #about::after {
    background: linear-gradient(to bottom, #ffffff 0, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.3) 100%);
  }
  
  #about .main-area {
    padding-bottom: 150px;
  }
  
	.about-inner {
		flex-direction: column;
		gap: 30px;
    grid-template-columns: repeat(1, 1fr);
  }
  
  .about-br{
    display: none;
  }
  
  .about-text {
    padding-right: 0;
  }

  
  .strength-grid {
    gap: 20px;
  }

  .strength-card h3 {
    font-size: min(1.8rem, 2vw);
  }

	.top-contact-area-grid { 
    grid-template-columns: 1fr; 
  }

  .top-contact-box {
    padding: 80px 4vw;
  }
  
	.works-grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
  
  .area-box h3 {
    margin-bottom: 10px;
  }
  
  .area-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .area-list li {
    padding: 0;
  }
  
}

@media (max-width: 768px) {
	.fv-text {
		left: 5%;
		right: 5%;
	}

	.fv-btns { 
    flex-direction: column; 
    gap: 10px; 
  }
  
  #about {
    background: url(../img/kyuhaisui/equipment-inspection-check.jpg) no-repeat center;
  }
  
  
	.strength-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
  
  .strength-card {
    padding: 20px;
    max-width: 450px;
    margin: auto;
  }  
  
  .strength-card h3 {
    font-size: max(1.25rem, 3vw);
  }
  
  .strength-icon {
    width: 15vw;
    min-width: 70px;
    margin-bottom: 10px;
  }
  
  .business-card-img {
    aspect-ratio: 5 / 3;
  }
  
  
	.business-grid { 
    grid-template-columns: 1fr; 
  }
  
  .business-card-label {
    padding: 8px 20px;
    font-size: 1.1rem;
  }
  
  .area-box {
    padding: 50px 4vw;
    text-align: center;
  }
  
  .business-card-body {
    padding: 20px;
  }
  
  .top-contact-box {
    padding: 50px 4vw;
  }

  .business-more {
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
  }
  
  .area-list {
    width: 110px;
    margin: 20px auto;
    text-align: center;
  }
  
  .area-box h3 {
    font-size: clamp(1.75rem, 2.5vw, 2rem);
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.3;
  }
  
  .area-list li i {
    font-size: 1rem;
  }
  
}
@media (max-width: 600px) {
  
  .fv-text h2 {
    font-size: clamp(1.95rem, 5vw, 4.5rem);
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 5px;
  }
  
  .fv-top {
    height: calc(100vh - 80px);
  }
  
  #fv-top::before {
    top:inherit;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 30vh;
    min-height: 200px;
    pointer-events: none;
    background: linear-gradient(to top, #0328518c 0, rgba(255, 255, 255, 0));
    z-index: 1;
  }
  
  .about-br {
     display: block;
  }

  #about .main-area {
    padding-bottom: 100px;
  }

	.fv-btn-primary,
	.fv-btn-outline {
    display:none;
  }
  
  .fv-text {
    left: 5%;
    right: 5%;
    bottom: 20px;
    top: inherit;
    transform: translateY(0);
  }
  
  .hero-points strong {
    font-size: 1.2rem;
  }

  .hero-points small {
    font-size: 0.9rem;
    color: #fff;
    text-shadow: 0 0 5px #000;
  }
  
  .top-contact-box {
    justify-content: center;
  }

  .top-contact-box-content {
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  
  .top-contact-box-content p span {
        display: block;
        text-align: center;
    }

  .top-contact-tel i {
    font-size: 1.2rem;
  }
  
}