@charset "utf-8";
/*
Theme Name: 有限会社南平開発
Author: Kotaro Saito
Description:  有限会社南平開発のテーマ
version: 1.0.0
*/

:root {
	--white:rgba(255,255,255,1);
	--bg-lightgreen:rgba(204, 234, 141, 1);
	--bg-bluegreen:rgba(44, 105, 120, 1);
	--bg-bluegreen-dark: rgba(30, 80, 90, 1);
	--bg-gray:rgba(246, 246, 246, 1);
	--green:rgba(135, 206, 146, 1);
	--navy:rgba(73, 95, 109, 1);
	--btn-green:rgba(47, 139, 140, 1);
	--gray:rgba(225, 225, 226, 1);
	--letter-space-8px : 0.077em;
	--letter-space-4px : 0.038em;
	--letter-space-08px : 0.008em;

}

/*common
-----------------------------------------------------------------------------------------*/
html,body{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight:400;
	font-style: normal;
	color: var(--navy);
	font-size: 16px;
	scroll-behavior: smooth;
}
.eng{
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.eng-logo{
	font-family: "Chakra Petch", sans-serif;
	font-weight: 500;
	font-style: italic;
}
.body-fixed{
	overflow: hidden;
}
.bg-dark{
	width: 100%;
	height: 100%;
	content: '';
	position: fixed;
	top:0;
	left: 0;
	display: none;
	z-index: 50;
}
.bg-overlay{
	display: block;
	background-color:rgba(58, 58, 58, .1);
	backdrop-filter: blur(7px);
}
.img-item{
     width: 100%;
     height: 100%;
     object-fit: cover;
}
a{
     color: var(--navy);
}
@media screen and (max-width:1023px) {
	html,body{
		font-size: 14px;
	}

}
@media screen and (min-width:768px) {
.sp{
	display: none;
}
}

@media screen and (max-width:767px) {
.pc{
	display: none;
}
}


/*header
-----------------------------------------------------------------------------------------*/

.header{
	position: fixed;
	top:0;
	z-index: 999;
	width: 100%;
}
.header-wrapper{
	width: 100%;
	height: 100px;
	padding-left: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}
.header-bg{
	content: '';
	width: 100%;
	height: 100px;
	position: absolute;
	top:0;
	left: 0;
	z-index: -1;
	background-color:var(--white);
}
.top .header-bg{
	background-color:transparent;
}

.header-scrolled .top .header-bg{
	background-color:rgba(47, 72, 88, .7);
}
.header-scrolled .sub .header-bg{
	background-color:rgba(255,255,255,.8);
}
.header-home-link{
	transition: all .4s;
}
.header-home-link:hover{
	transition: all .4s;
	opacity: .7;
}
.header-logo-wrapper{
	display: flex;
	align-items: center;
	gap: 15px;
}
.header-logo{
	font-size: 2.5rem;
	letter-spacing: -0.05rem;
	text-transform: uppercase;
	margin-top: 5px;
}
.header-title-wrapper{
	display: flex;
	align-items: center;
	gap: 3px;
}
.top .header-logo-wrapper{
	color: var(--white);
}
.header-title-company{
	font-size: .875rem;
	line-height: 1.15;
}
.header-title-name{
	font-size: 2rem;
	font-weight: 350;
}

.pc-navi{
	display: flex;
	align-items: center;
	gap: 30px;
}
.pc-navi-area{
	height: 100px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 5px;
}
.pc-header-phone-tel{
	font-size: 1.25rem;
	text-transform: uppercase;
}
.pc-header-phone-number{
	font-size: 1.5rem;
}
.top .pc-navi-area a{
	color: var(--white);
}
.pc-navi-list{
	display: flex;
	align-items: center;
	justify-content: center;
	gap:40px;
}
.pc-navi-link {
	position: relative;
	display: inline-block;
	z-index: 1;
}
.pc-navi-link::before {
	content: "";
	position: absolute;
	width: 110%;
	left: 50%;
	transform: translateX(-50%) scaleX(0);
	transform-origin: right center;
	height: 12px;
	bottom: -3px;
	background: rgba(204, 234, 141, 0.7);
	transition: transform 0.3s ease;
	z-index: -1;
}
.pc-navi-link:hover::before {
	transform: translateX(-50%) scaleX(1);
	transform-origin: left center;
}
.header-contact{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	height: 100px;
	width: 160px;
	background-color: var(--bg-bluegreen);
	transition: all .4s;
}
.header-contact:hover{
	transition: all .4s;
	background-color: var(--bg-bluegreen-dark);
}
.header-mail-icon{
	width:30px ;
	aspect-ratio: 1/1;
}

.header-contact-text{
	color: var(--white);
}

.hamburger,
.sp-navi{
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	a[href^="tel:"] {
	pointer-events: none; 
	}
}


@media screen and (max-width:1023px) {
	.pc-navi{
		display: none;
	}
	.header-wrapper,
	.header-bg,
	.pc-navi-area,
	.header-contact{
		height: 60px;
	}
	.header-wrapper{
		padding: 0 10px 0 20px;
	}
	.header-logo-wrapper{
		gap: 10px;
	}
	.header-logo{
		font-size: 2rem;
	}
	.header-title-company{
		font-size: .65rem;
	}
	.header-title-name{
		font-size: 1.5rem;
	}
	.hamburger{
		display: block;
          width: 50px;
          height: 50px;
          position: relative;
          cursor: pointer;
          transition: all .6s;
          z-index: 20;
     }
	.hamburger::before{
		width: 100%;
		height: auto;
		content:"Menu";
		font-family: "Bebas Neue", sans-serif;
		font-weight: 400;
		font-style: normal;
		text-transform: uppercase;
		font-size: 1.3rem;
		color: var(--white);
		text-align: center;
		position: absolute;
		top:25%;
		left: 50%;
		transform: translate(-50%,-50%);
		transition: all .6s;
	}
	.sub .hamburger::before{
		color: var(--navy);
	}
	.hamburger.active::before{
		content:"Close";
		color: var(--navy);
	}
     .hamburger-line{
		content:'';
          display: block;
          background-color:var(--white);
          width: 35px;
          height: 2px;
          border-radius: 10px;
          transition: all .6s;
          opacity: .8;
		left: 50%;
		transform: translate(-50%,-50%);
     }
	.sub .hamburger-line{
		background-color: var(--navy);
	}
     .hamburger span:nth-child(1){
          position: absolute;
          top:60%;
     }
     .hamburger span:nth-child(2){
          position: absolute;
          top:80%
     }
     .hamburger.active span:nth-of-type(1) {
          transform: translate(-18px,7px) rotate(-315deg);
          transition: 0.6s ease-out;
		background-color: var(--navy);
     }
     .hamburger.active span:nth-of-type(2) {
          transform: translate(-18px,-3px) rotate(315deg);
          transition: 0.6s ease-out;
		background-color: var(--navy);
     }
     .sp-navi{
		display: block;
          height:100vh;
          width: 500px;
          position: fixed;
          z-index: 10;
          top:0;
          right: -100%;
		background-color  : var(--bg-lightgreen);
          transition: all .6s;
     }
	.sp-navi-inner{
		position: relative;
		z-index: 2;
		height: calc(100vh - 60px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.sp-navi-ashirai{
		width: 60%;
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 0;
		opacity: .5;
	}
     .open{
		right: 0;
     }
	.sp-navi-logo{
		width: 100%;
		padding-left: 20px;
		height: 60px;
		display: flex;
		align-items: center;
	}
	.sp-navi .header-logo-wrapper{
		color: var(--navy);
	}
	.sp-navi-wrapper{
		position: relative;
		z-index: 5;
	}
	.sp-navi-list{
		margin-bottom: 30px;
	}
	.sp-navi-item{
		border-bottom: 1px solid var(--bg-gray);
	}
     .sp-navi-link{
		display: block;
          width: 100%;
          font-size: 1.25rem;
          transition:all .6s;
		text-align: left;
		padding: 15px 20px;
		transition: all .4s;
     }
	.sp-navi-link:hover{
		background-color: rgba(255, 255, 255, .7);
		transition: all .4s;
	}
	.sp-acc-head{
		display:flex;
		align-items:center;
		justify-content:space-between;
		cursor: pointer;
		position: relative;
	}
	.sp-acc-toggle{
		width: 15px;
		height: 15px;
		display: grid;
		place-items: center;
		position: absolute;
		top:50%;
		right: 40px;
		transform: translateY(-50%);
		pointer-events: none;
	}
	.sp-acc-toggle::before,
	.sp-acc-toggle::after{
		content: "";
		position: absolute;
		width: 15px;
		height: 2px;
		background-color: var(--navy);
		transition: all .4s;
	}
	.sp-acc-toggle::after{
		transform: rotate(90deg);
	}
	.sp-acc.is-open .sp-acc-toggle::after{
		transform: rotate(0deg);
		opacity: 0;
		transition: all .4s;
	}
	.sp-acc-panel{
		display:grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows .35s ease;
	}
	.sp-acc.is-open .sp-acc-panel{
		grid-template-rows: 1fr;
	}
	.sp-acc-panel > *{
		overflow:hidden;
	}
	.sp-navi-sublist{
		padding: 0 40px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	.is-open .sp-navi-sublist{
		padding: 0  40px 10px;
	}
	.sp-navi-sublink{
		display: block;
		padding: 10px 15px;
		transition: all .4s;
	}
	.sp-navi-sublink:hover{
		color: var(--btn-green);
		transition: all .4s;
	}
	.sp-navi-phone{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 300px;
		margin: 0 auto 30px;
		background-color: rgba(255, 255, 255, .7);
		padding: 20px;
		font-size: 1.5rem;
	}
	.sp-navi-contact{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 15px;
		width: 300px;
		margin: 0 auto 100px;
		background-color: var(--btn-green);
		padding: 20px;
		transition: all .4s;
	}
	.sp-navi-contact:hover{
		background-color: var(--bg-bluegreen);
		transition: all .4s;
	}
	.sp-navi-contact .mail-icon-wrapper{
		width: 30px;
	}
	.sp-navi-contact-text{
		font-size: 1.5rem;
		color: var(--white);
	}

}
@media screen and (max-width:767px) {
	.sp-navi{
		width: 400px;
	}
	.is-open .sp-navi-sublist{
		padding:0  25px 10px;
	}
}
@media screen and (max-width:500px) {
	.sp-navi{
		width: 100vw;
	}
	.sp-navi-list{
		margin-bottom: 15px;
	}
	.is-open .sp-navi-sublist{
		padding:0  15px 10px;
	}
	.sp-navi-phone{
		font-size: 1.3rem;
		padding: 15px;
		width: min(250px,80%);
		margin: 0 auto 15px;
	}
	.sp-navi-contact{
		padding: 15px;
		width: min(250px,80%);
	}
	.sp-navi-contact-text{
		font-size: 1.3rem;
	}
	.sp-navi-contact .mail-icon-wrapper{
		width: 25px;
	}
}
/*footer
-----------------------------------------------------------------------------------------*/
.footer{
	background-color: var(--bg-bluegreen);
	padding-top: 125px;
	padding-bottom: 30px;
}
.footer a{
	transition: all .4s;
}
.footer a:hover{
	transition: all .4s;
	opacity: .7;
}
.footer-main-container{
	display: grid;
	grid-template-columns: 300px 1fr;
	align-items: flex-start;
	justify-content: space-between;
	gap: 100px;
	margin-bottom: 30px;
}
.footer-logo-wrapper{
	display: flex;
	align-items: center;
	gap: 15px;
	color: var(--white);
	margin-bottom: 30px;
}
.footer-logo{
	text-transform: uppercase;
	font-size: 2.5rem;
	margin-top: 5px;
}
.footer-title-wrapper{
	display: flex;
	align-items: center;
	gap: 5px;
}
.footer-title-company{
	font-size: .875rem;
	line-height: 1.15;
}
.footer-title-name{
	font-size: 2rem;
}
.footer-address{
	color: var(--white);
}
.footer-address:last-of-type{
	margin-bottom: 5px;
}
.footer-map-wrapper{
	margin-bottom: 30px;
}
.footer-map-link{
	font-size: .875rem;
	color: var(--white);
	text-decoration: underline;
}
.footer-phone-wrapper{
	color: var(--white);
}
.footer-phone{
	text-transform: uppercase;
}
.footer-phone-number{
	font-size: 1.25rem;
}

.footer-navi-container{
	padding-top: 15px;
	display: grid;
	grid-template-columns: 100px 1fr;
	align-items: flex-start;
	gap: 100px;
}
.footer-navi-list{
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: flex-start;
}
.footer-navi-link{
	color: var(--white);
}
.footer-products-text{
	color: var(--white);
	margin-bottom: 15px;
}
.footer-products-list{
	margin-left: 60px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	position: relative;
	padding:15px 0 15px 15px ;
	gap:15px 30px ;
	justify-content: space-between;
}
.footer-products-link{
	color: var(--white);
	font-size: .875rem;
}
.footer-products-list::before{
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	background-color: var(--white);
	width: 1px ;
	height: 100%;
}
.footer-privacy-policy{
	width: fit-content;
	margin-left: auto;
	margin-bottom: 10px;
}
.footer-privacy-policy-link{
	display: inline-block;
	color: var(--white);
}
.footer-copy-right{
	text-align: right;
	color: var(--white);
	font-size: .75rem;
}
@media screen and (max-width:1500px) {
	.footer{
		padding-top: 100px;
	}
	.footer-main-container,
	.footer-navi-container{
		gap: 50px;
	}
}
@media screen and (max-width:1200px) {
	.footer{
		padding-top: 80px;
	}
}
@media screen and (max-width:1023px) {
	.footer-main-container{
		grid-template-columns: 220px 1fr;
		gap: 30px;
	}
	.footer-logo-wrapper{
		gap: 10px;
	}
	.footer-logo{
		font-size: 2rem;
	}
	.footer-title-company{
		font-size: .65rem;
	}
	.footer-title-name{
		font-size: 1.5rem;
	}
	.footer-navi-container{
		gap: 20px;
		display: flex;
		justify-content: space-around;
	}
	.footer-products{
		max-width: 450px;
	}
	.footer-products-list{
		margin-left: 30px;
	}
}
@media screen and (max-width:767px) {
	.footer{
		padding-top: 50px;
	}
	.footer-navi-container{
		display: none;
	}
	.footer-main-container{
		display: block;
		margin-bottom: 50px;
	}
	.footer-logo-wrapper{
		justify-content: center;
		margin-bottom: 15px;
	}
	.footer-address-wrapper,
	.footer-phone-wrapper,
	.footer-copy-right{
		text-align: center;
	}
	.footer-map-wrapper{
		text-align: center;
		margin-bottom: 15px;
	}
	.footer-privacy-policy{
		margin: 0 auto 10px;
	}
}


/*contact-area
-----------------------------------------------------------------------------------------*/
.contact-area{
	padding: 120px 0;
	background-image: url(./images/contact-area-bg.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.contact-area-textarea{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 75px;
	align-items: flex-end;
	margin-bottom: 60px;
}

.contact-area-text{
	font-size: 1.5rem;
}
.contact-area-btn-container{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 75px;
	align-items: stretch;
}
.contact-area-btn-phone{
	display: block;
	height: 100%;
	padding: 35px 30px;
	background-color: rgba(255, 255, 255, .7);
	transition: all .4s;
}
.contact-area-btn-phone:hover{
	transition: all .4s;
	background-color: var(--white);
}
.contact-area-phone{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}
.contact-area-phone-tel{
	text-transform: uppercase;
	font-size: 2.25rem;
}
.contact-area-phone-number{
	font-size: 3rem;
	font-weight: 500;
}
.contact-area-time{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}
.contact-area-btn-form{
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 25px;
	padding:35px 30px;
	background-color: var(--btn-green);
	transition: all .4s;
}
.contact-area-btn-form:hover{
	transition: all .4s;
	background-color: var(--bg-bluegreen);
}
.contact-form-text{
	color: var(--white);
	font-size: 2rem;
	font-weight: 500;
}
.contact-form-icon{
	width: 45px;
	aspect-ratio: 1/1;
}

@media screen and (max-width:1500px) {
	.contact-area{
		padding: 100px 0;
	}
	.contact-area-textarea{
		margin-bottom: 40px;
	}
	.contact-area-text{
		font-size: 1.3rem;
	}
	.contact-area-btn-container,
	.contact-area-textarea{
		gap: 3%;
	}
	.contact-area-phone-tel{
		font-size: 1.8rem;
	}
	.contact-area-phone-number{
		font-size: 2.7rem;
	}
}
@media screen and (max-width:1200px) {
	.contact-area{
		padding: 80px 0;
	}
	.contact-area-btn-phone{
		padding: 10px 15px 20px;
	}
	.contact-area-time{
		font-size: .9rem;
	}
	.contact-area-btn-form{
		gap: 5%;
	}
	.contact-form-text{
		font-size: 1.8rem;
	}
	.contact-form-icon{
		width: 40px;
	}
}
@media screen and (max-width:1023px) {
	.contact-area-text{
		font-size: 1.1rem;
	}
	.contact-area-phone-number{
		font-size: 2.2rem;
	}
	.contact-area-btn-form{
		padding: 35px 0;
	}
	.contact-area-phone{
		gap: 10px;
	}
	.contact-form-text{
		font-size: 1.6rem;
	}
	.contact-form-icon{
		width: 35px;
	}
}
@media screen and (max-width:900px) {
	.contact-area-btn-phone{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
	}
	.contact-area-time{
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
		width: 267px;
	}
}
@media screen and (max-width:767px) {
	.contact-area{
		padding: 50px 0;
	}
	.contact-area-textarea{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 30px;
	}
	.contact-area-text{
		font-size: 1rem;
		text-align: center;
		width: 100%;
	}
	.contact-area-btn-container{
		flex-direction: column;
		display: flex;
		align-items: center;
		gap: 15px;
	}
	.contact-area-btn-wrapper{
		width: min(350px , 100%);
		height: 100px;
	}
	.contact-area-btn-link{
		padding: 0;
	}
	.contact-area-btn-phone{
		justify-content: center;
		gap: 0;
	}
	.contact-area-phone{
		margin-bottom: 10px;
	}
	.contact-area-phone-tel{
		font-size: 1.3rem;
	}
	.contact-area-phone-number{
		font-size: 1.7rem;
		line-height: 1;
	}
	.contact-area-time{
		width: 208px;
	}
	.contact-area-btn-form{
		gap: 3%;
	}
	.contact-form-text{
		font-size: 1.3rem;
	}
	.contact-form-icon{
		width: 25px;
	}
	
}


/*sub-fv
-----------------------------------------------------------------------------------------*/
.sub-fv{
	margin-top: 100px;
	position: relative;
}
.sub-fv::before{
	content: '';
	width: auto;
	height: 100%;
	aspect-ratio: 1/1;
	background-color: var(--btn-green);
	position: absolute;
	top: 0;
	left: 0;
	opacity: .7;
	z-index: 2;
	clip-path: polygon(100% 0, 0 0, 0 100%);
}
.sub-fv-img{
	position: relative;
}
.sub-title{
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 5;
}
.sub-title-eng{
	color: var(--white);
	font-size: 6.25rem;
	letter-spacing: var(--letter-space-8px);
	text-shadow: 4px 4px 8px rgba(0,0,0,0.4);
}
.sub-title-jp{
	color: var(--white);
	font-weight: 600;
	font-size: 2rem;
	padding: 0 55px;
	position: relative;
	z-index: 5;
	text-shadow: 4px 4px 8px rgba(0,0,0,0.4);
}
.sub-title-jp::before{
	content: '';
	width: 21px;
	height: 27px;
	background-color: var(--green);
	clip-path: polygon(100% 0, 0 0, 0 100%);
	position: absolute;
	top: 0;
	left: 0;
}
.sub-title-jp::after{
	content: '';
	width: 21px;
	height: 27px;
	background-color: var(--bg-lightgreen);
	clip-path: polygon(100% 100%, 100% 0, 0 100%);
	position: absolute;
	bottom: 0;
	right: 0;
}
.breadcrumb{
	text-align: right;
	padding: 15px 0 45px;
	font-size: .75rem;
	letter-spacing: var(--letter-space-08px);
}
.breadcrumb a{
	color: var(--gray);
}


@media screen and (max-width:1920px) {
	.sub-title-eng,
	.sub-title-jp{
		margin-left: 3%;
	}
}


@media screen and (max-width:1500px) {
	.sub-fv::before{
		aspect-ratio: .7/1;
	}
	.sub-title-eng{
		font-size: 5rem;
	}
	.sub-title-jp{
		font-size: 1.7rem;
		padding: 0 30px;
	}
	.breadcrumb{
		padding: 15px 0;
	}
}
@media screen and (max-width:1350px) {
	.sub-title-eng,
	.sub-title-jp{
		margin-left: 10%;
	}
}
@media screen and (max-width:1200px) {
	.sub-fv-img{
		aspect-ratio: 4/1;
	}
	.sub-title-eng{
		font-size: 4rem;
	}
	.sub-title-jp{
		font-size: 1.5rem;
	}
	.sub-title-jp::before,
	.sub-title-jp::after{
		width: 15px;
		height: 20px;
	}
}
@media screen and (max-width:1023px) {
	.sub-fv{
		margin-top: 60px;
	}
	.sub-title-eng{
		font-size: 3.5rem;
	}


}
@media screen and (max-width:767px) {
	.sub-fv{
		padding-top: 15px;
	}
	.sub-fv::before{
		height: 80%;
		width: auto;
		aspect-ratio: .8/1;
	}
	.sub-fv-img{
		aspect-ratio: auto;
		height: 200px;
	}
	.sub-title-eng,
	.sub-title-jp{
		margin-left: 15%;
	}
	.sub-title-eng{
		font-size: 3rem;
	}
	.sub-title-jp{
		font-size: 1.3rem;
		padding: 0 20px;
	}
	.sub-title-jp::before,
	.sub-title-jp::after{
		width: 10px;
		height: 15px;
	}
	.breadcrumb{
		display: none;
	}

}
@media screen and (max-width:500px) {
	.sub-fv{
		padding-top: 10px;
	}
	.sub-fv::before{
		height: 70%;
	}
	.sub-title .contents-wrapper1130{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.sub-title-eng,
	.sub-title-jp{
		text-align: center;
		margin: 0;
	}
	.sub-title-jp{
		width: fit-content;
	}
}


/*news
-----------------------------------------------------------------------------------------*/
.sub-news{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.sub-news-container{
	width: calc(100% - 180px - 170px);
}
.news-link{
	padding: 25px 0;
	display: block;
	border-bottom: 1px solid var(--gray);
	transition: opacity .4s;
}
.news-link:first-of-type{
	border-top: 1px solid var(--gray);
}
.news-link:hover{
	opacity: .7;
	transition: opacity .4s;
}
.news-date{
	font-size: .875rem;
	font-weight: 300;
	margin-bottom: 20px;
}
.news-title:not(.single){
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.archive-selectbox-text{
	font-size: 1.25rem;
	padding: 15px;
	background-color: var(--bg-lightgreen);
}
.dropdown-wrapper{
	width: 170px;
	position: relative;
}
.dropdown-wrapper::before{
	content:'';
	width: 15px;
	height: 8px;
	background-color: var(--navy);
	position: absolute;
	top:50%;
	right: 15px;
	transform: translateY(-50%);
	pointer-events: none;
	clip-path: polygon(100% 15%, 0 15%, 50% 100%);
}
.select-archive{
	padding: 10px 15px;
	width: 100%;
	border:1px solid var(--bg-lightgreen);
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	border-radius: 0px;
	font-size: 1rem;
	letter-spacing: var(--letter-space-08px);
	cursor: pointer;
}

.wp-pagenavi{
	display: flex;
	align-items: center;
	justify-content: center;
	gap:8px;
	margin-top: 60px;
}
.wp-pagenavi .previouspostslink{
	order: 1;
}
.wp-pagenavi .first{
	order: 2;
}
.wp-pagenavi .extend:has(.extend-prev){
	order: 3;
}
.wp-pagenavi .smaller{
	order: 4;
}
.wp-pagenavi .current{
	order: 5;
	color: var(--white);
	background-color: var(--btn-green);
}
.wp-pagenavi .larger{
	order: 6;
}
.wp-pagenavi .extend:has(.extend-next){
	order: 7;
}
.wp-pagenavi .last{
	order: 8;
}
.wp-pagenavi .nextpostslink{
	order: 9;
}
.wp-pagenavi span,
.wp-pagenavi a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	aspect-ratio: 1/1;
	border-radius: 10px;
	line-height: 1;
	color: var(--navy);
	transition: all .4s;
}
.wp-pagenavi a:hover{
	color: var(--white);
	background-color: var(--btn-green);
	transition: all .4s;
}
.wp-pagenavi a:has(.pagenavi-arrow):hover{
	background-color: transparent;
	opacity: .5;
	transition: opacity .4s;
}
.extend-prev,
.extend-next{
	letter-spacing: -10px!important;
	font-size: 1.2rem!important;
	line-height: 0!important;
	transform: translateY(3px);
}
.pagenavi-arrow{
	content: '';
	width: 16px;
	height: auto;
	aspect-ratio: 1/1;
	background-image:url(./images/pagenavi-arrow.png) ;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: opacity .4s;
}
.pagenavi-arrow.prev{
	transform: rotate(180deg);
}



@media screen and (max-width:1200px) {
	.news-link{
		padding: 20px 0;
	}
	.news-date{
		margin-bottom: 10px;
	}
	.sub-news-container{
		width: calc(100% - 10% - 170px);
	}
	.archive-selectbox-text{
		padding: 10px;
	}
}

@media screen and (max-width:1023px) {
	.sub-news-container{
		width: calc(100% - 5% - 150px);
	}
	.archive-selectbox{
		margin-bottom: 30px;
	}
	.dropdown-wrapper{
		width: 150px;
	}
	.dropdown-wrapper::before{
		right: 10px;
	}
	.select-archive{
		padding: 10px;
	}
	.archive-selectbox-text{
		font-size: 1rem;
		padding: 5px 10px;
	}
}

@media screen and (max-width:767px) {
	.sub-news{
		flex-direction: column-reverse;
		align-items: flex-end;
	}
	.sub-news-container{
		width: 100%;
	}
	.news-link{
		padding: 15px 0;
	}
	.news-date{
		margin-bottom: 5px;
	}
	.archive-selectbox{
		margin-bottom: 30px;
	}
	.wp-pagenavi{
		margin-top: 40px;
	}
	.wp-pagenavi span,
.wp-pagenavi a{
	width: 27px;
}
}
@media screen and (max-width:500px) {
}



/*single
-----------------------------------------------------------------------------------------*/

.news-date.single{
	color: var(--green);
	margin-bottom: 30px;
}
.news-title.single{
	font-size: 1.5rem;
	font-weight: 600;
	padding: 10px 40px;
	border-bottom:1px solid var(--gray) ;
	margin-bottom: 60px;
}
.news-contents{
	padding: 0 35px;
}
@media screen and (max-width:1200px) {
	.news-date.single{
		margin-bottom: 20px;
	}
	.news-title.single{
		font-size: 1.3rem;
		margin-bottom: 40px;
	}
}
@media screen and (max-width:1023px) {
	.news-date.single{
		margin-bottom: 10px;
	}
	.news-title.single{
		margin-bottom: 30px;
		font-size: 1.2rem;
	}
}
@media screen and (max-width:768px) {

	.news-title.single{
		padding: 10px 20px;
		margin-bottom: 20px;
	}
	.news-contents{
		padding: 0 20px;
	}
}
@media screen and (max-width:500px) {
	.news-title.single{
		padding: 5px 10px;
		margin-bottom: 15px;
	}
	.news-contents{
		padding: 0 10px;
	}
}


/*page-products
-----------------------------------------------------------------------------------------*/


.page-products-container{
	display: grid;
	grid-template-columns: 240px 1fr;
	align-items: flex-start;
	gap: 30px;
	margin-bottom: 240px;
}
.products-sidebar {
	position: sticky;
	top: 100px; /* ＝ヘッダーのheight */
	align-self: start; 
	max-height: calc(100vh - 120px); 
	overflow-y: auto; /* はみ出した分だけ中身をスクロール */
}
.products-sidebar-link{
	display: block;
	border-bottom: 1px solid var(--gray);
	font-size: 1.125rem;
	color: var(--green);
	padding: 10px;
	transition: all .4s;
}
.products-sidebar-link:hover{
	transition: all .4s;
	color: var(--white);
	background-color: var(--green);
}

.products-block {
	scroll-margin-top: 100px; /* ＝ヘッダーのheight */
	border: 1px solid var(--bg-lightgreen);
}
.products-block-title{
	font-size: 2rem;
	background-color:var(--bg-lightgreen) ;
	padding: 10px 30px;
}
.products-block-container{
	padding: 40px 10%;
}
.products-archive-list{
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 15px 30px;
}
.products-archive-link{
	display: block;
	font-size: 1.5rem;
	position: relative;
	padding-left: 40px;
	transition: all .4s;
}
.products-archive-link::before{
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 25px;
	height: auto;
	aspect-ratio: 1/1;
	background-image: url(./images/arrow-btn-next.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transition: all .4s;
}
.products-archive-link:hover{
	transition: all .4s;
	color: var(--green);
}
.products-archive-link:hover::before{
	transition: all .4s;
	transform: translate(3px,-50%);
}
.sample-quotation-title{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	margin-bottom: 50px;
}
.sample-quotation-title-eng{
	font-size: 3.5rem;
	letter-spacing: var(--letter-space-8px);
	display: inline-block;
}
.sample-quotation-title-jp{
	font-size: 1.5rem;
	letter-spacing: var(--letter-space-4px);
	display: inline-block;
}
.sample-quotation-table--sp{ 
	display: none; 
}
.sample-quotation-table--pc{ 
	display: table;
	width: 100%;
	border-collapse: separate;
	border-spacing: 2px;   
}
.sample-quotation-thead-th{
	width: 70%;
	background-color: var(--btn-green);
	color: var(--white);
	font-size: 1.125rem;
	text-align: center;
	padding: 15px ;
	font-weight: 600;
	letter-spacing: var(--letter-space-4px);
}
.sample-quotation-thead-td{
	width: 30%;
	background-color: var(--btn-green);
	color: var(--white);
	font-size: 1.125rem;
	text-align: center;
	padding: 15px ;
	font-weight: 600;
	letter-spacing: var(--letter-space-4px);
}
.sample-quotation-tbody-th{
	width: 70%;
	background-color: rgba(213, 232, 232, 1);
	padding: 10px 30px;
}
.sample-quotation-tbody-td{
	width: 30%;
	background-color: rgba(234, 243, 243, 1);
	padding: 10px 30px;
	text-align: right;
}
@media screen and (max-width:1500px) {
	.page-products-container{
		margin-bottom: 150px;
	}
	.products-block-container{
		padding: 30px 8%;
	}
	.products-block-title{
		font-size: 1.5rem;
		padding: 10px 20px;
	}
	.products-archive-link{
		font-size: 1.3rem;
		padding-left: 35px;
	}
	.products-archive-link::before{
		width: 20px;
	}
}
@media screen and (max-width:1200px) {
	.page-products-container{
		margin-bottom: 100px;
	}
	.page-products-container{
		grid-template-columns: 200px 1fr;
	}
	.products-block-container{
		padding: 30px 6%;
	}
	.products-archive-list{
		gap: 15px;
	}
	.sample-quotation-title{
		gap: 0;
		margin-bottom: 30px;
	}
}

@media screen and (max-width:1023px) {
	.products-block {
		scroll-margin-top: 60px; /* ＝ヘッダーのheight */
	}
	.page-products-container{
		grid-template-columns: 160px 1fr;
		margin-bottom: 80px;
	}
	.products-sidebar-link{
		font-size: 1.1rem;
	}
	.products-block-title{
		font-size: 1.3rem;
		padding: 7px 14px;
	}
	.products-block-container{
		padding: 20px 4%;
	}
	.products-archive-link{
		font-size: 1.1rem;
	}
	.products-archive-link::before{
		width: 18px;
	}
	.products-archive-link{
		padding-left: 25px;
	}
	.sample-quotation-title{
		margin-bottom: 20px;
	}
	.sample-quotation-title-eng{
		font-size: 3rem;
	}
	.sample-quotation-title-jp{
		font-size: 1.3rem;
	}


}


@media screen and (max-width: 767px){
	.sub-contents-wrapper.products{
		overflow: hidden;
	}
	.page-products-container{
	display: flex;
	flex-direction: column;
	}
	.page-products-container,
	.page-products-contents,
	.products-sidebar{
		min-width: 0;
	}
	.page-products-container{
		margin-bottom: 70px;
	}
	.products-sidebar{
		position: relative;
		top: auto;
		margin: 0;
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		overflow: hidden;
	}
	.products-sidebar-list{
		display: flex;
		gap: 10px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		padding:0 30px 8px;
		margin: 0;
		list-style: none;
		white-space: nowrap;
		box-sizing: border-box;
	}
	.products-sidebar-item{
		flex: 0 0 auto;
	}
	.products-sidebar-link{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 7px 14px;
		border-radius: 999px;
		border: 1px solid var(--gray);
	}
	.products-sidebar::after{
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 24px;
		height: calc(100% - 7px);
		pointer-events: none;
		background: linear-gradient(
		to right,
		rgba(255,255,255,0),
		rgba(255,255,255,1)
		);
	}
	.products-sidebar-list::-webkit-scrollbar{
		height: 6px;
	}
	.products-sidebar-list::-webkit-scrollbar-track{
		background: transparent;
	}
	.products-sidebar-list::-webkit-scrollbar-thumb{
		background-color: var(--gray);
		border-radius: 999px;
	}
	.page-products-contents{
		width: 100%;
	}
	.products-block-title{
		font-size: 1.2rem;
	}
	.products-block-container{
		padding: 15px 4%;
	}
	.products-archive-link{
		font-size: 1rem;
	}
	.sample-quotation-title-eng{
		font-size: 2.5rem;
	}
	.sample-quotation-title-jp{
		font-size: 1.2rem;
	}
	.sample-quotation-table--pc{ 
		display: none; 
	}
	.sample-quotation-table--sp{ 
		display: table;
		width: 100%;
		border-collapse: collapse;
	}
	.sample-quotation-sp-row{
		background-color: rgba(213, 232, 232, 1);
	}
	.sample-quotation-sp-row--product{
		border-top: 3px solid var(--white);
	}
	.sample-quotation-sp-row--price{
		border-bottom: 3px solid var(--white);
	}
	.sample-quotation-sp-cell--product{
		padding: 15px 30px 5px 15px;
	}
	.sample-quotation-sp-cell--price{
		text-align: right;
		white-space: nowrap;
		padding: 5px 15px 15px;
	}
}


@media screen and (max-width:600px){
	.products-sidebar-link{
		padding: 5px 10px;
		font-size: 1rem;
	}
	.products-archive-list{
		grid-template-columns: 1fr ;
	}
}

@media screen and (max-width:500px){
	.products-sidebar-list{
		padding:0  20px 8px;
	}
	.products-archive-list{
		grid-template-columns: 1fr ;
	}
	.sample-quotation-title-eng{
		font-size: 2.3rem;
	}
	.sample-quotation-sp-cell--product{
		padding: 10px 30px 5px 10px;
	}
	.sample-quotation-sp-cell--price{
		padding: 5px 10px 10px;
	}
}

/*single-products
-----------------------------------------------------------------------------------------*/
.single-product-title{
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: var(--letter-space-08px);
	padding: 15px 20px;
	border-bottom: 1px solid var(--btn-green);
	border-left: 12px solid var(--btn-green);
	margin-bottom: 50px;
}
.single-product-swiperarea{
	margin:0 auto 80px;
	width: min(60% , 480px);
}
.single-product-main-swiper .swiper-wrapper{
	aspect-ratio: 1/1;
}
.single-product-thumb-swiper{
	margin-top: 50px;
}
.single-product-detail{
	background-color: var(--bg-gray);
	padding: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}
.single-product-item{
	background-color: var(--white);
	padding: 25px;
	width: 100%;
}
.single-product-item-title{
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 25px;
}
.single-product-detail-text{
	line-height: 2;
	letter-spacing: 0;
}
.product-info-table{
	width: 100%;
}
.product-info-tr{
	border-bottom: 1px solid var(--bg-gray);
}
.product-info-tr:first-of-type{
	border-top: 1px solid var(--bg-gray);
}
.product-info-th{
	width: 25%;
	padding: 20px 10px;
	color: var(--green);
	font-weight: 400;
}
.product-info-td{
	width: 75%;
	padding: 20px 30px;
	position: relative;
}
.product-info-td::before{
	content: '';
	background-color: var(--bg-gray);
	width: 1px;
	height: calc(100% - 20px);
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.single-product-btn-container{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap:50px ;
	margin: 90px auto 0;
}
.single-product-btn-wrapper{
	padding-top: 20px;
	width:400px;
}
.single-product-btn{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	position: relative;
	padding: 45px 0 40px;
	background-color: var(--btn-green);
	box-shadow: 4px 4px 4px rgba(0,0,0,0.25);
	border-radius: 5px;
	transition: all .4s;
}
.single-product-btn:hover{
	box-shadow: none;
	transform: translate(4px,4px);
	background-color: var(--bg-bluegreen);
	transition: all .4s;
}
.single-product-btn-popup{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,-50%);
	background-color: var(--white);
	border: 2px solid var(--btn-green);
	border-radius: 5px;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
	text-align: center;
	color: var(--btn-green);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: var(--letter-space-4px);
	padding: 10px 20px;
	white-space: nowrap;
}
.single-product-btn-popup .green{
	color: var(--green);
}
.single-product-btn-text{
	font-size: 1.875rem;
	font-weight: 800;
	color: var(--white);
	letter-spacing: var(--letter-space-4px);
}
.single-product-btn-icon{
	width: 40px;
	height: auto;
	aspect-ratio: 1/1;
}

@media screen and (max-width:1500px) {
	.single-product-swiperarea{
		margin-bottom: 50px;
	}
	.single-product-btn-container{
		margin-top: 70px;
	}

}
@media screen and (max-width:1200px) {
	.single-product-thumb-swiper{
		margin-top: 30px;
	}
	.single-product-title{
		font-size: 1.8rem;
		padding: 10px 15px;
		border-left: 8px solid var(--btn-green);
	}
	.single-product-detail{
		padding: 40px;
		gap: 30px;
	}
	.single-product-item{
		padding: 20px;
	}
	.single-product-item-title{
		margin-bottom: 15px;
	}
	.product-info-th{
		padding: 15px 10px;
	}
	.product-info-td{
		padding: 15px 30px;
	}
	.single-product-btn-container{
		margin-top: 50px;
	}
	.single-product-btn-text{
		font-size: 1.7rem;
	}
	.single-product-btn-icon{
		width: 35px;
	}

}
@media screen and (max-width:1023px) {
	.single-product-title{
		margin-bottom: 40px;
	}

	.single-product-detail{
		padding: 30px;
		gap: 20px;
	}
	.single-product-item{
		padding: 15px;
	}
	.single-product-item-title{
		margin-bottom: 10px;
	}
	.product-info-th{
		padding: 10px;
	}
	.product-info-td{
		padding: 10px 20px;
	}
	.single-product-btn-container{
		margin-top: 40px;
		gap: 5%;
	}
	.single-product-btn-wrapper{
		width: 320px;
	}
	.single-product-btn{
		padding: 35px 0 30px;
	}
	.single-product-btn-text{
		font-size: 1.5rem;
	}
	.single-product-btn-icon{
		width: 30px;
	}
	.single-product-btn-popup{
		padding: 7px 14px;
		font-size: 1rem;
	}
}
@media screen and (max-width:767px) {
	.single-product-title{
		margin-bottom: 30px;
		font-size: 1.5rem;
		border-left-width: 5px;
		padding: 10px;
	}
	.single-product-swiperarea{
		margin-bottom: 30px;
		width: min(70% , 480px);
	}
	.single-product-thumb-swiper{
		margin-top: 20px;
	}
	.single-product-detail{
		padding: 20px;
		gap: 15px;
	}
	.single-product-detail-text{
		line-height: 1.7;
	}
	.single-product-item-title{
		font-size: 1.3rem;
	}
	.product-info-table{
		width: 100%;
		border-collapse: collapse;
	}
	.product-info-tr{
		display: block;
		width: 100%;
		padding: 10px;
	}
	.product-info-th{
		display: block;
		width: 100%;
		padding: 0;
	}
	.product-info-td{
		display: block;
		width: 100%;
		padding: 3px 0 0 0;
	}
	.product-info-td::before{
		display: none;
	}
	.single-product-btn-container{
		margin-top: 30px;
		flex-direction: column;
		gap: 25px;
	}
	.single-product-btn-wrapper{
		width: min(300px,100%);
	}
	.single-product-btn{
		padding: 30px 0 25px;
	}
	.single-product-btn-text{
		font-size: 1.25rem;
	}
	.single-product-btn-icon{
		width: 25px;
	}
	.single-product-btn-popup{
		padding: 5px 14px;
	}
}
@media screen and (max-width:500px) {
	.single-product-title{
		font-size: 1.3rem;
	}
	.single-product-swiperarea{
		width: min(100% , 480px);
	}
	.single-product-item-title{
		font-size: 1.2rem;
	}
	.product-info-tr{
		padding: 10px 0;
	}

}

/*404
-----------------------------------------------------------------------------------------*/
.error-message{
	text-align: center;
	font-size: 1.5rem;
}

@media screen and (max-width:767px) {
	.error-message{
		font-size: 1rem;
	}
}
/*animation
-----------------------------------------------------------*/
.fadeup{
	opacity: 0;
	transform: translate(0, 50px);
	transition: all 1.2s;
}
.fadeup.scrollin{
	opacity: 1;
	transform: translate(0, 0);
}