/* :root{
	--title-h: 340px;
	@media (max-width: 767px) {
		--title-h: 50vw;
	}	
} */



/* ===================================================================================
main
====================================================================================== */

main{
	background-color: #fff;
}


/* ===================================================================================
.bread
====================================================================================== */

.bread{
	font-size: clamp(0.625rem, 0.493rem + 0.563vw, 1rem); /*16px-10px*/
	display: inline-block;
	background-color: var(--c-green);
	border-radius: 50px;
	padding: 1px 1em;
	color: #fff;
}

.bread ul{
	display: flex;
	flex-wrap: wrap;	
}

.bread li  > *::after{
	font-family: saisan;
	content: "\e86b";
	margin-left: 1em;
	color: #fff;
}

.bread li + li{
	margin-left: 1em;
}

.bread li > *{
	color: #fff;
}

.bread li > span{
	color: var(--c-gray2);
}

/* ===================================================================================
.nav_pagelink
====================================================================================== */

.nav_pagelink{
	position: sticky;
	z-index: 100;
	top: 0;
	background-color: var(--c-palegreen);
	text-align: center;
	letter-spacing: 0;
}
.nav_pagelink ul{
	display: inline-flex;
	justify-content: center;
	text-align: center;
	font-weight: 600;
	border: 2px solid var(--c-green);
	margin-inline: auto;
}

.nav_pagelink ul li{
	border: 2px solid var(--c-green);
	flex-shrink: 2;
	/* flex-basis: 100px; */
}

.nav_pagelink ul li a{
	line-height: 1.3;
	display: block;
	padding: .5em var(--s4) 30px;
	display: grid;
	place-content: center;
	background-color: #fff;
	position: relative;
	height: 100%;
}

.nav_pagelink ul li a::after{
	font-family: saisan;
	content:"\e86b";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%) rotate(90deg);	
	font-size: var(--f24);
	color: var(--c-green);
}

.nav_pagelink ul li a[href$=".pdf"]::after{
	content:"\e84e";
	transform: translateX(-50%);	
}

/* ===================================================================================
.title_area
====================================================================================== */

.title_area{
	padding: var(--s7) 0;
}

.title_area .inner{
	max-width: 1000px;
	display: grid;
	gap: 2em;
	/*SP*/
	@media (max-width: 767px) {
		grid-template-columns: 1fr;
	}
}

.title_area .inner.-grid2{
	grid-template-columns: 2fr 1fr;	
}

.title_area .inner.-grid21{
	grid-template-columns: 2fr 1fr;
	/*SP*/
	@media (max-width: 767px) {
		grid-template-columns: 1fr;
	}
}

.title_area ._tit{
	padding-top: 0.6em;
	font-size: clamp(1.25rem, 0.678rem + 2.441vw, 2.875rem); /*46px-20px*/
	font-weight: 800;
	line-height: 1.4;
}

.title_area ._lead{
	font-size: clamp(0.75rem, 0.662rem + 0.376vw, 1rem); /*16px-12px*/
	padding-top: 1.2em;
}

.title_area figure{
	text-align: center;
}

.title_area figure img{
	margin: 0 auto calc(0px - var(--s6));
	@media (max-width: 767px) {
		max-width: 80vw;
		max-height: 50vw;
	}
}



/* ===================================================================================
.cont_area
====================================================================================== */
.cont_area{
	padding: var(--s9) 0;
	background-color: var(--c-palegray);
}



/* ===================================================================================
.s_gridBox デフォルトは2個
====================================================================================== */
.s_gridBox{
	display: grid;
	grid-template-columns: repeat(var(--2-1), 1fr);
	gap: var(--s4);
}

/*左右が2:1*/
.s_gridBox21{
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--s3);
	/*SP*/
	@media (max-width: 767px) {
		grid-template-columns: 1fr;
	}
}

/*左右が1:2*/
.s_gridBox12{
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--s3);
	/*SP*/
	@media (max-width: 767px) {
		grid-template-columns: 1fr;
	}
}

.s_gridBox.-aic,
.s_gridBox21.-aic,
.s_gridBox12.-aic{
	align-items: center;	
}

.s_gridBox.-grid3{
	grid-template-columns: repeat(var(--3-1), 1fr);
}


/* ===================================================================================
.s_photoBox デフォルトは2個
====================================================================================== */
.s_photoBox{
	display: grid;
	grid-template-columns: repeat(var(--2-1), 1fr);
	gap: var(--s3);
	text-align: center;
}

.s_photoBox.-grid3{
	grid-template-columns: repeat(var(--3-1), 1fr);
}

.s_photoBox.-grid32{
	grid-template-columns: repeat(var(--3-2), 1fr);
}

.s_photoBox.-grid4{
	grid-template-columns: repeat(var(--4-2), 1fr);
}

* + .s_photoBox{
	margin-top: var(--s4);
}

.s_photoBox h4{
	font-weight: 600;
}

.s_photoBox .c-ttl--md {
	font-weight: 600;
	font-size: var(--f22);
}

/*SP*/
@media (max-width: 767px) {
	.s_photoBox.-grid32 h4{
		line-height: 1.3;
		font-size: var(--f20);
	}
	.s_photoBox.-grid32 .bt_st1 ._bt {
		font-size: 10px;
		/* display: block;
		gap: 2em;
		padding: 1em 3em 1em 2em;
		border-radius: 100px;
		background-color: #fff;
		border: 2px solid var(--c-green);
		color: var(--c-green);
		font-weight: 600;
		line-height: 1.2;
		position: relative;
		max-width: 100%; */
	}
}


.s_photoBox > *{
	padding: var(--s3);
	border-radius: var(--s2);
	background-color: #fff;
}

.s_photoBox > *{
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	gap: var(--s2);
}

.s_alert{
	background-color: #fff;
	border: 4px solid var(--c-red);
	color: var(--c-red);
	padding: var(--s4);
	font-weight: bold;
	border-radius: var(--s3);
}

/* ===================================================================================
.s_greenBox デフォルトは2個
====================================================================================== */
.s_greenBox{
	display: grid;
	grid-template-columns: repeat(var(--2-1), 1fr);
	gap: var(--s3);
	text-align: center;
}

.s_greenBox.-grid3{
	grid-template-columns: repeat(var(--3-1), 1fr);
}

* + .s_greenBox{
	margin-top: var(--s4);
}

.s_greenBox > *{
	border-radius: var(--s2);
	border: 4px solid var(--c-green);
	border-radius: var(--s2);
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	gap: 0;
	background-color: #fff;
}

.s_greenBox ._box{
	background-color: var(--c-green);
	border-radius: 0 0 var(--s1) var(--s1);
	padding: var(--s2);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap:.5em;
}

.s_greenBox figure{
	padding: var(--s2);
}

.s_greenBox h4{
	font-size: var(--f24);
	font-weight: 600;
}


.s_greenBox .bt_st1{
	margin-top: 1em;
}

.s_greenBox .bt_st1:hover ._bt{
	background-color: var(--c-ygreen);
	color: var(--c-green);
}

/* ===================================================================================
.s_withHeadBox デフォルトはグリーン
====================================================================================== */
.s_withHeadBox > ._tit{
	background-color: var(--c-green);
	font-size: var(--f32);
	font-weight: 700;
	color: #fff;
	padding: .1em 2em;
	text-align: center;
	border-radius: var(--s3) var(--s3) 0 0;
}

.s_withHeadBox.-orange > ._tit{
	background-color: var(--c-orange);
}

.s_withHeadBox > ._box{
	background-color: #fff;
	padding: var(--s5);
	border-radius: 0 0 var(--s3) var(--s3);
}

* + .s_withHeadBox{
	margin-top: var(--s8);
}

/* ===================================================================================
.s_bannerBox
====================================================================================== */
.s_bannerBox{
	padding: var(--s6);
	display: grid;
	gap: var(--s4);
}

.s_bannerBox ._bn{
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--s2);
	align-items: center;
	border: 4px solid var(--c-green);
	border-radius: var(--s3);
	padding: var(--s3);
	background-color: #fff;
	/*SP*/
	@media (max-width: 767px) {
		grid-template-columns: 1fr;
	}
	font-weight: 600;
	font-size: var(--f28);
}

.s_bannerBox ._bn > div{
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: var(--s2);
	align-items: center;
}

.s_bannerBox ._bt{
	background-color: var(--c-green);
	color: #fff;
	padding: .5em 3em .5em 1em;
	border-radius: var(--s1);
	font-size: var(--f16);
	position: relative;
	text-align: center;
}

.s_bannerBox ._bt::after{
	font-family: saisan;
	content:"\e86b";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: .3em;
	font-size: 1.5em;
}

.s_bannerBox ._bn.-gasone{
	background-color: var(--c-yellow);
	color: var(--c-green);
}

.s_bannerBox ._bn.-eneone{
	border-color: var(--c-orange);
	color: var(--c-orange);
}

.s_bannerBox ._bn.-eneone ._bt{
	background-color: var(--c-orange);
}

.s_bannerBox ._bn.-waterone{
	border-color: var(--c-blue);
	color: var(--c-blue);
}

.s_bannerBox ._bn.-waterone ._bt{
	background-color: var(--c-blue);
}

.title_area .s_bannerBox {
	padding: 0;
}

.title_area .s_bannerBox figure{
	height: 100%;
	overflow: visible;
}

.title_area .s_bannerBox figure img{
	height: 100%;
	width: 100%;
}

.title_area .s_bannerBox ._bn {
	grid-template-columns: 1fr;
	font-size: var(--f18);
}

/* ===================================================================================
s_question
====================================================================================== */
.s_question dl{
	border: 2px solid var(--c-gray2);
	border-radius: var(--s3);
	padding: var(--s3);
	background-color: #fff;
}

.s_question dl + dl{
	margin-top: var(--s2);	
}

.s_question dt{
	font-size: var(--f24);
	font-weight: 600;
	color: var(--c-green);
	position: relative;
	padding-left: 2.5em;
}

.s_question dt::before{
	font-weight: 700;
	content:"Q";
	font-family: "Jost", sans-serif;
	line-height: 1;
	display: grid;
	place-content: center;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 2em;
	height: 2em;
	background-color: var(--c-green);
	color: #fff;
	border-radius: 100px;
	text-align: center;
}

.s_question dd{
	margin-top: .5em;
	font-size: var(--f18);
	padding-left: 4.5em;
	position: relative;
}

.s_question dd::before{
	font-weight: 700;
	content:"A";
	font-family: "Jost", sans-serif;
	line-height: 1;
	display: grid;
	place-content: center;
	position: absolute;
	top: 1%;
	left: 2em;
	width: 1.8em;
	height: 1.8em;
	background-color: var(--c-gray1);
	color: #fff;
	border-radius: 100px;
	text-align: center;
}

.s_gridquestion{
	display: grid;
	grid-template-columns: 0.7fr 1fr;
	gap: var(--s3);
	padding-left: 4.5em;
	align-items: center;
	@media (max-width: 767px) {
		grid-template-columns: 1fr;
	}
}

.s_leftquestion{
	padding-left: 4.5em;
}

/* ===================================================================================
aside
====================================================================================== */
.s_osusume{
	padding-top: var(--s4);
	padding-bottom: var(--s4);
	background-color: #fff;
	font-weight: 600;
}

.s_osusume .inner{
	display: grid;
	grid-template-columns: 1.2fr 2fr;
	gap: var(--s8);

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

.s_osusume ._nav a{
	color: var(--c-green);
	display: block;
	padding: .5em .5em;
	border-bottom: 1px solid var(--c-green);
	position: relative;
}

.s_osusume ._nav a.current{
	background-color: var(--c-ygreen);
}

.s_osusume ._nav a::after{
	font-family: saisan;
	content:"\e86b";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;	
}

.s_osusume ._box{
	font-weight: 500;
	background-color: var(--c-palegray);
	border-radius: var(--s2);
	padding: var(--s2);
	display: grid;
	grid-template-columns: 1fr 2.5fr;
	gap: var(--s2);
}

.s_osusume .bt_st1 a{
	display: inline-block;
	width: auto;	
}

.s_osusume ._box > *{
	display: flex;
	flex-direction: column;
	justify-content: center;	
}

.s_osusume ._box ._tit{
	font-size: var(--f20);
	font-weight: 700;
	border-bottom: 2px solid var(--c-black);
	margin-bottom: .25em;
	padding-bottom: .25em;
}

.s_osusume ._box .bt_st1{
	margin-top: 1em;	
}


.s_bottomSlider{
	padding-top: var(--s4);
	padding-bottom: var(--s4);
	text-align: center;
	background-color: var(--c-green);
}

/* ===================================================================================
s_inquiryBox
====================================================================================== */
.s_inquiryBox{
	text-align: center;
	margin-top: var(--s8);
	background-color: #fff;
	padding: var(--s3);
	border-radius: var(--s2);
	border: 4px solid var(--c-green);
}

.s_inquiryBox h3{
	font-weight: 900;
}


.s_inquiryBox ._tel{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0 1em;
}

.s_inquiryBox ._tel + ._tel{
	margin-top: var(--s2);	
}

.s_inquiryBox ._tel ._free{
	width: var(--s8);
	margin-right: var(--s1);
}

.s_inquiryBox ._tel rt{
	font-size: var(--f12);
}

.s_inquiryBox ._tel dd{
	display: flex;
	align-items: center;
}

.s_inquiryBox ._tel dt{
	font-size: var(--f14);
	display: inline-block;
	padding: .2em .8em;
	border: 1px solid var(--c-black);
	border-radius: var(--s1);
}

/* ===================================================================================
s_contactArea
====================================================================================== */
.s_contactArea{
	background-color: #fff;
	padding-top: var(--s6);
	padding-bottom: var(--s6);
	font-weight: 800;
}

.s_contactArea ._tel {
	display: flex;
	gap: 1em;
}

.s_contactArea ._tel p{
	font-size: var(--f36);
}



/* ===================================================================================
s_menuNav
====================================================================================== */
.s_menuNav ul{
	display: flex;
	justify-content: center;
	text-align: center;
	gap: .5em;
	padding-bottom: var(--s6);
	font-size: clamp(0.75rem, 0.574rem + 0.751vw, 1.25rem); /*20px-12px*/
}

.s_menuNav a{
		display: block;
		padding: 1em 1em;
		border-radius: 50px;
		background-color: #fff;
		border: 2px solid var(--c-black);
		color: var(--c-black);
		font-weight: 600;
		line-height: 1.2;
		position: relative;
}

.s_menuNav .active a{
		background-color: var(--c-black);
		color: #fff;
		pointer-events: none;
		cursor: default;
}

.s_menuNav.-toshi-gas ul{
	flex-wrap: wrap;
	font-size: var(--f16);
}

.s_menuNav a{
	/* min-width: 200px; */
	padding: .7em;
	/*SP*/
	@media (max-width: 767px) {
		min-width: calc((100% - 1em) / 2)px;
	}
}

/* ===================================================================================
TABLE
====================================================================================== */
.tb_st1{
	width: 100%;
	line-height: 1.3;
	font-size: clamp(0.625rem, 0.493rem + 0.563vw, 1rem); /*16px-10px*/
}	

.tb_st1 th,td{
	padding: .5em;	
	font-weight: 600;
	border: 1px solid var(--c-gray);
	min-width: 5em;
}
.tb_st1 th{
	background-color: var(--c-ygreen);
}
.tb_st1 td{
	background-color: #fff;
}

.tb_st2{
	width: 100%;
	line-height: 1.3;
	font-size: clamp(0.625rem, 0.493rem + 0.563vw, 1rem); /*16px-10px*/
}	

.tb_st2 th,td{
	padding: .5em;	
	font-weight: 600;
	border: 1px solid var(--c-gray);
	min-width: 5em;
}
.tb_st2 th{
	background-color: var(--c-green);
	color: #fff;
}
.tb_st2 td{
	background-color: #fff;
}

/* ===================================================================================
discount
====================================================================================== */
.s_frame.-discount{
	background-color: var(--c-yellow);
	display: grid;
	grid-template-columns: 2fr .6fr;
	/*SP*/
	@media (max-width: 767px) {
		grid-template-columns: 1fr;
	}
}

.s_frame.-discount ._tit2{
	font-size: var(--f36);
	border-bottom: 3px solid #fff;
}

.s_frame.-discount ._tit2{
	font-size: var(--f36);
}

.s_frame.-discount ._charas{
	margin: -50px;
	position: relative;
	text-align: right;
	/*SP*/
	@media (max-width: 767px) {
		margin: -20px;
	}
}

.s_frame.-discount ._rnd{
	width: 50%;
	max-width: 160px;
	aspect-ratio: 1 / 1;
	border-radius: 200px;
	background-color: var(--c-orange);
	color: #fff;
	display: grid;
	place-content: center;
	font-size: var(--f24);
	font-weight: bold;
	transform: rotate(-15deg);
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 5%;
	/*SP*/
	@media (max-width: 767px) {
		width: 40%;
		bottom: 20%;
	}
}

.s_frame.-discount ._chara{
	height: 100%;
}

/* =====================================================================
	discount
======================================================================== */
.s_formula{
	font-size: var(--f18);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap:5px;
	row-gap:20px;
	align-content: center;
	text-align: center;
	line-height: 1.3;
	/*SP*/
	@media (max-width: 767px) {
		justify-content: flex-start;
	}
}

.s_formula > *{
	display: grid;
	place-content: center;
}

.s_formula ._frm{
	background-color: #fff;
	border: 4px solid var(--c-palegreen);
	border-radius: var(--s2);
	padding: var(--s1) var(--s1);
	/* color: var(--c-green); */
	font-weight: 700;
	flex-grow: 2;
}

.s_formula ._frm.-res{
	border-color: var(--c-green);
	background-color: var(--c-green);
	color: #fff;
}

.s_formula ._frm.-minus{
	color: var(--c-red);
}

.s_formula ._ope{
	font-weight: 600;
	font-size: var(--f28);
}

/* =====================================================================
	対象エリア
======================================================================== */

.s_taisyoArea{
	font-size: var(--s2);
	margin-top: var(--s2);
	display: flex;
}

.s_taisyoArea dt{
	padding: .2em 1em;
	background-color: var(--c-black);
	color:#fff;
	border-radius: .5em 0 0 .5em;
}

.s_taisyoArea dd{
	padding: .2em 1em;
	background-color: var(--c-palegray);
	border-radius: 0 .5em .5em 0;
}

/* =====================================================================
	文字強調
======================================================================== */

.highlighting{
	font-weight: 600;
}

/* ===================================================================================
アイコン　サイズ
====================================================================================== */
.icon{
	width: 10vw;
	height: 10vw;
	max-width: 150px;
	max-height: 150px;
}

@media screen and (max-width:767px) {
	.icon{
		width: 15vw;
		height: 15vw;
	}
}



/* ===================================================================================
リンク　青表示
====================================================================================== */
.blue_word{
	color: var(--c-blue);
	margin-right: var(--s2);
}

.blue_word._afffter-log::after{
	font-family: saisan;
	content: "\e866";
	font-weight: normal;
	font-size: var(--f16);
}

.blue_word:hover{
	color:  #02AD80;
}



/* ===================================================================================
ポータルワン　フォント
====================================================================================== */

.portal-font{
	font-family: "Jost", sans-serif;
}