/*  ========================
    *********  web page additional css  *********
=============================================  */

/* .page__sub .wrap__w800 .wdt-fx {
	width: 104%;
} */

html {
  scroll-behavior: smooth;
}

.sub_sec .inner .wide {
	justify-content: center;
}

.box_area .box01__item .flex .txtbox-follow {
	margin-left: auto;
}

.area-web-all {
  background-color: #fcfcfa;
  width: 100%;
	margin: 128px 0 -128px;
	padding: 128px 0;
}

.area-web-all-top {
  display: flex;
	justify-content: center;
	padding-bottom: 56px;
}

.box01__item .flex .flex-header {
	font-size: 0.87rem;
	font-weight: normal;
	letter-spacing: 1px;
	margin-bottom: -24px;
}

.box01__item .flex .textbox {
	color: #919191;
	font-weight: lighter;
	font-size: 0.87rem;
	letter-spacing: 1px;
	margin-top: -24px;
}

.area-web-all .web_dm {
	margin-top: 105px;
	display: flex;
	justify-content: center;
}

.box_area  .box01__item .flex .sp-only {
		display: none;
}

.box01__item {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-4x);
}

.box01__item .flex a.box_type01__cta {
    text-decoration: none;
    color: inherit; 
    border: none; 
}




/* --- CTA Link Hover Styling --- */
.box_area .box01__item .flex a.box_type01__cta:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
}


.img-wrapper {
  position: relative;
  width: 530px;   
  height: 354px; 
  overflow: hidden;
  background-color: #f6f3f1; 
}

.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease-out;
  will-change: transform;
}

.img-wrapper a {
  display: block;
  position: relative; 
  width: 100%;
  height: 100%;
  z-index: 3;
}

.box_area a:hover,
.box_area a:hover.box01__item .flex>p,
.box_area a:hover.box01__item .flex .textbox {
	color: var(--primary-color);
}
.box_area a:hover img {
  transform: scale(1.09);
}

@media screen and (max-width:1200px) {
	.img-wrapper {
		width: 100%;
		height: 100%;
	}
}



/*  ========================
    *********  SP Responsive  *********
=============================================  */

@media screen and (max-width: 768px) {
    .page__sub{
        padding-bottom: 0;
    }
    
    .area-web-all {
        margin-bottom: 0;
    }

	.sub_sec .inner .wide {
		justify-content: flex-start;
	}

	.box_area img {
		width: 100%;
	}

	.img-wrapper {
		position: relative;
		width: 100%;
		height: auto;
		overflow: hidden;
		background-color: #f6f3f1;
	}

	.area-web-all {
		background-color: #fcfcfa;
		width: 100%;
		margin-top: 64px;
		padding: 80px 0;
	}

	.area-web-all .area-web-all-top h2 {
		display: flex;
		justify-content: center;
	}

	.area-web-all .box01__item .flex {
		margin-bottom: 48px;
	}

	.area-web-all-top {
		padding-bottom: 32px;
	}

	.area-web-all .web_dm {
		margin-top: 32px;
	}

	.box_area .box01__item .flex .textbox {
		font-size: 0.81rem;
	}

	.area-web-all .web_dm img {
		width: 80.53%;
		display: flex;
		margin: 0 auto;
	}

	.box_area .box01__item .flex .sp-only {
		display: inline;
	}

	.area-web-all .box_area {
		display: block;
		grid-template-columns: 1fr;
		width: 90%;
		gap: var(--gutter-6x);
	}

	#footer_contact .web-analytics-on {
		margin-top: 60px;
	}

}