/* ------------------------------
 INDEX
------------------------------ */

.spec-container{
	margin: 5em 0 0;
}

.spec-container > h3{
	padding: .8em 1em;
	margin-bottom: 1em;
	background: #4C9AC0;
	background: linear-gradient(90deg,rgba(76, 154, 192, 1) 43%, rgba(255, 255, 255, 0.88) 100%);
	color: #fff;
	grid-column: 1 / -1;
}

ul.speclist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5em;
  margin: 3em 0;
}


ul.speclist li{
	text-align: center;
}

.spec-thumbnail{
	width: 100%;
	transition: all 0.2s ease;
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
	border-radius: 12px;
	overflow: hidden;
}

.spec-thumbnail img{
	width: 100%;
	height: auto;
	aspect-ratio: 6 / 3;
	object-fit: cover;
	border-radius: 5px;
	position: relative;
	
}

/* ホバーした時の動き */
.spec-thumbnail:hover {
  transform: translateY(4px); /* 下に4px移動 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 影を小さくして接地感を出す */
}

.spec-excerpt{
	padding: 1em;
}

.spec-excerpt h2{
	margin-bottom: .6em;
	font-size: 1.2rem
}

.spec-link{
	color: #0081bd
}


/* ------------------------------
 single
------------------------------ */
.quality_intoro{
	padding: 5% 0;
	margin-bottom: 5%;
	text-align: center
}

.qen{
	display: block;
	font-size: clamp(3.125rem, 2.443rem + 3.41vw, 5rem);
	color: rgba(192, 192, 192, 0.4)
}
.quality_intoro h1{
	font-size: clamp(1.875rem, 1.42rem + 2.27vw, 3.125rem);
	padding: 0 5% 5%;
	color: var(--color-main);
}
.quality_intoro h2{
	padding: 0 5%;
}

.quality_intoro h2 span{
	color: #ca1717
}
.quality_intoro p{
	padding: 0 5%;
	margin:0 auto 1em;
	font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
	line-height: 1.8em
}
.hexagon{
	background: url(../img/hexagon_bg.jpg) no-repeat;
	background-size: cover;
	background-color:rgba(255,255,255,0.6);
	background-blend-mode:lighten;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 8%;
	margin: 5% auto;
}

.hexagon img{
	width: 100%;
	max-width: 800px;
	margin: 0 auto
}

.quality6{
	
}

.quality6 > h2{
	text-align: center;
	margin-bottom: 2em;
	color: #510000;
	font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2.188rem)
}

.quality6 > h2::before{
	display: block;
	content: "";
	background: url(../img/quality_i.png) no-repeat center center;
	background-size: contain;
	width: 100px;
	height: 100px;
	margin: 0 auto 2em
}


.quality_list{
	position: relative;
	border-top: solid 3px;
	background: rgba(234, 231, 224, 0.6);
	padding: 0 0 100px
}

.quality_list .rlink{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 30px
}

.quality_list_title{
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center
}

.quality_list_title::before{
	content: "";
	width: 100%;
	height: 100%;
	background: #222;
	opacity: .3;
	position: absolute;
	left: 0;
	top: 0;
	right: 0
}

.quality_list h2{
	position: relative;
	z-index: 100
}

.quality_list h2 a{
	color: #fff;
	text-align: center;
	display: block;
	font-size: clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem)
}


.quality_list h2 a span{
	display: block;
	font-size: 1.5em;
	letter-spacing: 2px;
	margin-bottom: 10px
}

.quality_list_gaiyo{
	padding: 1.5em
}

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

.quality_list_gaiyo ul li{
	background: #fff;
	padding: 2px 5px;
	margin: 10px 10px 0 0
}

.quality_list_gaiyo p{
	margin-bottom: 1em
}

@media screen and (max-width: 767px) {
	
	.quality_list{
		margin-bottom: 2em
	}
}	

@media print, screen and (min-width: 768px) {
	.quality_list_wrap{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 1fr);
		grid-column-gap: 3%;
		grid-row-gap: 3%;
	}
	
	.quality_list_title{
		height: 300px;
	}
}	

@media print, screen and (min-width: 1024px) {}	

/* ------------------------------
 セクション共通
------------------------------ */

.quality_wrap{
	max-width: 1000px;
	margin: 0 auto;
	padding:0 5%
}


h2.pfh2{
	background: #eae2cc;
	padding: .8em 1.2em;
	border-radius: 5px;
	position: relative;
	font-size: clamp(1.125rem, 0.943rem + 0.91vw, 1.625rem);
	letter-spacing: 1px;
	margin: 0 0 1em;
	display: flex;
	align-items: center
}

h2.pfh2::before{
	content: "";
	display: inline-block;
	width: 2px;
	height: 1.5em;
	background: #fff;
	margin-right: 1em
}

h2.pfh2 span{
	font-size: .8em
}

h3.ssh3{
	padding: .8em 1em;
	position: relative;
	font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);
	letter-spacing: 1px;
	margin: 2em 0 1em;
	border-top: solid 1px #eae2cc;
	border-bottom: solid 1px #eae2cc;
}



.custum{}


.custum dl{
	margin: 0 0 1em;
}

.custum dl dt{
	margin-bottom: .4em;
	font-weight: bold
}

.custum dl dd{
	padding: 0 0 0 1em
}


.specbox{
	margin: auto;
	padding: 5%;
}


.specbox p{
	margin: 1.5em 0
}


.specbox p em{
	font-style: normal;
	color: red
}

.specbox dl.point{margin: 1em 0;
	background: rgba(198, 177, 177, 0.19);
	padding: 1em
}


.specbox dl.point dt{
	color: #9e7c1d;
	font-weight: bold;
	font-size: 1.1em;
	margin-bottom: .5em;
	text-align: center
}

.specbox dl.point dd img{
	margin-bottom: 1em
}


.single_img{
	text-align: center;
	margin: 3em .5em 2em
}

.single_img h4{font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
	background: #f1f1f1;
	padding: 1em;
}

.single_img figure{
	text-align: center
}

.single_img figure figcaption{
	font-weight: bold;
	border: dotted 1px #510000;
	padding: 1em;
	margin-top: 1.5em;
}





.checkpoint h4{
	margin-bottom: 1em;
	font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem)
}

.checkpoint ul{
	margin: 0 5px
}

.checkpoint ul li{
	padding: .4em .6em;
	background: #fbecec;
	margin-bottom: .3em;
	font-weight: bold
}
.checkpoint ul li::before{
	font-family: icomoon;
	content: "\ea52";
	padding: 0 .6em 0 0
}


.specbox ul.checkpoint.dm li{
	background: #ebebfa;
}




.experiment{
	border: solid 2px #f08314;
	border-radius: 5px;
	position: relative;
	margin: 3em 0;
}

.experiment dl{
	margin-bottom: 3%
}

.experiment dt{
	background: #f08314;
	color: #fff;
	padding: .6em;
	text-align: center;
	font-size: 1.5em;
	margin-bottom: 1em
}

.experiment dd{
	padding: 0 3%
}

.experiment figure{
	padding: 2em;
	text-align: center;
}





.rlink{
	margin: 3em 0 0;
}

.rlink a{display: block;
	padding: 1em 2em;
	max-width: 400px;
	margin: 0 auto;
	text-align: center;
	background: #222;
	color: #fff;
	border-radius: 5px;
	position: relative;
	
}

.rlink a::after{
	font-family: icomoon;
	content: "\e977";
	position: absolute;
	right: 20px;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.rlink a:hover{
	background: var(--color-main);
}
.rlink a:hover::after{
	right: 15px
}






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

@media print, screen and (min-width: 768px) {
	h2.pfh2{letter-spacing: 2px;}
	.quality_wrap{}
	.specbox p{
	margin: 1em .5em
	}
	
	
	.specbox dl.point{
	margin: 1em .5em;
	padding: 2em
	}
	
	.flexbox2{
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	align-items: center
	}
	
	.flexbox2 > *{
		width: 48%
	}
	
	.flexbox3{
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	align-items: center
	}
	
	.flexbox3 > *{
		width: 30%
	}
	
	
	
	.flex_left{
		display: flex;
		flex-wrap:wrap;
		flex-direction: row;
		justify-content: space-between;
		margin: 0 .5em
	}
	
	.flex_right{
		display: flex;
		flex-wrap:wrap;
		flex-direction: row-reverse;
		justify-content: space-between;
		margin: 2em .5em
	}
	
	.flex_left figure,
	.flex_right figure{
		width: 40%
	}
	
	.flex_left p,
	.flex_right p{
		width: 55%;
		margin: 0 .5em
	}

}	

@media print, screen and (min-width: 1240px) {
}	




.gallery_img {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.gallery_img figure{
	flex: 1
}

.gallery_img figcaption{
	padding: .5em 0;
	display: block
}



.column{
	background: rgba(229, 230, 224, 0.8);
	padding: 5%;
	position: relative;
}

.column h3{
	color: #174c28;
	margin-bottom: .7em;
	font-size: 2em
}


.att{background: #fff;
	padding: .5em 1em;
	margin-top: 1em
}

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

@media print, screen and (min-width: 668px) {
	.column{
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	align-items: flex-start;
	}
	.column > div:nth-child(1){width: 55%}
	.column > :nth-child(2){width: 40%}
	.column > img{width: 40%}
	.column > blockquote{width: 40%}
}	

@media print, screen and (min-width: 1024px) {}	






/* ------------------------------
 その他　タイトル
------------------------------ */
.pf_title{
	text-align: center;
	padding: 13% 5%;
	position: relative;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	color: #fff
}

.pf_title::before{
	content: "";
	width: 100%;
	height: 100%;
	background: #222;
	opacity: .5;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.pf_title:hover::before{
	background: #222;
	opacity: .8;
}


.pf_title h1{
	letter-spacing: 0px;
	margin: 0 0 .5em;
	position: relative;
	z-index: 100
}

.pf_title h1 span{
	display: block;
	font-size: 1.8em;
	font-weight: normal;
}

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

@media print, screen and (min-width: 768px) {
	.pf_title h1{letter-spacing: 2px;font-size: 2.2em}
/* 	.pf_title h1 br{display: none} */
}	

@media print, screen and (min-width: 1240px) {
	.pf_title h1{font-size: 2.8em}
}	




/* ------------------------------
 Single .quality_title
------------------------------ */

.quality_title{
	text-align: center;
	padding: 13% 5%;
	position: relative;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	color: #fff
}



.quality_title::before{
	content: "";
	width: 100%;
	height: 100%;
	background: #222;
	opacity: .5;
	position: absolute;
	left: 0;
	top: 0;
	right: 0
}
.quality_title div{
	position: relative;
	z-index: 100
}
.quality_title h1{
	letter-spacing: 2px;
	font-size: clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);
	font-weight: normal;
	margin: 0 0 .5em
}

.quality_title h1 span{
	display: block;
	margin-bottom: 30px;
	font-size: 2.5em
}



.quality_title .en{
	display: block;
	letter-spacing: 6px;
	
}


/* ------------------------------
 Single .quality_read
------------------------------ */

.quality_read h2{
	color: #510000;
	position: relative;
	font-size: clamp(1.125rem, 0.943rem + 0.91vw, 1.625rem);
	margin: 3em 0 1em;
	padding: 1.8em 0 0;
	line-height: 1.6em;
    background-repeat: no-repeat;
    background-size: 4rem 0.4rem;
    background-position: top;
    text-align: center;
}

.quality_read h2 em{
	border-bottom: solid 1px #891c18;
	color: #891c18;font-style: normal
}

.quality_read h3 em{
	border-bottom: solid 1px #891c18;
	color: #891c18;font-style: normal
}


ul.pagelink{margin: 5% 0 0}

ul.pagelink li{}

ul.pagelink li a{
	display: block;
	border: solid 1px #510000;
	padding: .8em 1em .8em 55px;
	position: relative;
	-webkit-transition: all .3s;
	transition: all .3s;
	font-weight: bold;
	text-align: left
}

ul.pagelink li a::before{
	position: absolute;
	left: 20px;
	font-family: icomoon;
	content: "\e972";
	font-size: 1.2em;
	color: #f08314
}

ul.pagelink li a:hover{
	background: #510000;
	color: #fff
}

ul.pagelink li a:hover::before{
	color: #fff
}


@media screen and (max-width: 767px) {
	.quality_read h2 br{display: none}
	
	ul.pagelink li{
		margin: .5em 0 0
	}
}	

@media print, screen and (min-width: 768px) {
	.quality_read h3{text-align: center}
	
	ul.pagelink{
		display: flex;
		flex-wrap:wrap;
	}
	
	ul.pagelink li{
	width: calc(( 100% - 20px ) / 2 );
	margin: 20px 20px 0 0;
	}
	
	ul.pagelink li:nth-child( 2n ) {margin-right: 0;}
}	

@media print, screen and (min-width: 1240px) {
}



/* ------------------------------
 断熱記事
------------------------------ */

.after{
	text-align: center !important;
	font-size: 1.3em;
	font-weight: bold;
	color: #ff7000
}


@media print, screen and (min-width: 668px) {
	.after{font-size: 2em;}
	
}	

@media print, screen and (min-width: 1024px) {
	.pf_wood_read h3{font-size: 1.8em;}
}	








.experiment > div{
	border: solid 2px #f08314;
	border-radius: 5px;
	position: relative;
	margin-top: 3%
}

.experiment > div dl{
	margin-bottom: 3%
}

.experiment > div dt{
	background: #f08314;
	color: #fff;
	padding: .6em;
	text-align: center;
	font-size: 1.5em;
	margin-bottom: 1em
}

.experiment > div dd{
	padding: 0 3%
}



#pf_dannetu03{}


#pf_dannetu03 h3{} 

table.tochigi_area{
	border: 2px solid #8b8b8b;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 6px;
  overflow: hidden;
  width: 98%;
  margin: 0 auto
 }
 
table.tochigi_area caption{
	text-align: left
}

table.tochigi_area th,
table.tochigi_area td{padding: .5em;
  border-bottom: 1px solid #8b8b8b; 
  vertical-align: middle}

table.tochigi_area tbody th{
	background:#eaeade;
	text-align:center;
	width: 120px
	}

table.tochigi_area td{
	text-align: center
}


table.tochigi_area td + td,
table.tochigi_area th + td,
table.tochigi_area thead th + th{
  border-left: 1px solid #8b8b8b;
}
table.tochigi_area thead tr th,
table.tochigi_area thead tr td{border-bottom: 2px solid #8b8b8b;}
table.tochigi_area tbody tr:last-child th,
table.tochigi_area tbody tr:last-child td {
  border-bottom: none;
}

.levelmap table.tochigi_area{
	margin-top: 3em
}
.level table.tochigi_area{
	margin-top: 1.5em
}


table.tochigi_area thead th.lv2,
table.tochigi_area tbody th.lv2{background: #6cbdff}
table.tochigi_area thead th.lv3,
table.tochigi_area tbody th.lv3{background: #33cc66}
table.tochigi_area thead th.lv4,
table.tochigi_area tbody th.lv4{background: #f1e800}
table.tochigi_area thead th.lv5,
table.tochigi_area tbody th.lv5{background: #ff9900}
table.tochigi_area thead th.lv6,
table.tochigi_area tbody th.lv6{background: #ff6600}

.fb2c table.tochigi_area td{
	text-align: left
}


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

@media print, screen and (min-width: 768px) {}	

@media print, screen and (min-width: 1024px) {
	.fb2c{
		display: flex;
		flex-wrap:wrap;
		justify-content: space-between;
		align-items: flex-start
	}
	.fb2c .td_map{width: 48%}
	.fb2c table.tochigi_area{
		width: 48%;
		margin: 0
	}
}	


.u41_lank > div{
	display: flex;
	flex-wrap:wrap;
	margin:2em auto 3em
}

.u41_lank > div figure{
	padding: 0
}

.u41_lank > div dl dt{
	font-weight: bold;
	font-size: 1.3em;
	margin-bottom: 1em
}

.u41_lank > div dl dt span{
	display: block;
	font-size: .8em;
	margin-bottom: 3px
}

.u41_lank > div dl dt span.sttype{color: #183fa1;}

.u41_lank > div dl dt span.optype{color: #ff3d00;}

@media screen and (max-width: 767px) {
	.u41_lank > div{
		flex-direction: column
	}
	
	.u41_lank > div dl{
		padding: 1.5em 0;
		border-bottom: solid 1px #ccc;
	}
}	

@media print, screen and (min-width: 768px) {
	.u41_lank > div figure{
	width: 300px
	}
	
	.u41_lank > div dl{
		width: calc(100% - 300px);
		padding:.5em 0 0 3em
	}
}	

@media print, screen and (min-width: 1024px) {}	




/* ------------------------------
 関連リンク　セクション
------------------------------ */

.sec_related{}


.sec_related a{
	position: relative;
	display: block;
	margin: 1.5em auto;
	background: #fff;
	border: solid 2px rgba(23, 76, 40, 0.5);
	color: #174c28;
	border-radius: 50px;
	position: relative;
	text-align: center;
	padding: 1em;
	max-width: 400px;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.sec_related a:hover{
	border: solid 2px #174c28;
	background: #174c28;
	color: #fff
}

.sec_related a::after{
	font-family: icomoon;
	content: "\e977";
	position: absolute;
	right: 1.5em
}



/* ------------------------------
 関連リンク 記事フッター
------------------------------ */
.related{
	padding: 8% 0 0
}

.related h2{
	padding: 1em;
	text-align: center;
	font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2.188rem)
}


ul.quality_link h3{
	position: relative;
	z-index: 100;
	text-align: center;
	display: flex;
	align-items: center	
	}

ul.quality_link h3 a{
	color: #fff;
	font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem)
}

ul.quality_link h3 span{
	display: block;
	margin-bottom: .4em;
	font-size: 1.3em
}



ul.quality_link h3::before,
ul.quality_link h3::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: -40px;
  width: 30px;
  height: 1px;
  border-radius: 9999px;
  background-color: #fff;
  transform-origin: calc(100% - 0.5px) 50%;
  -webkit-transition: all .3s;
  transition: all .3s;
}

ul.quality_link h3::before {
  transform: rotate(50deg);
}

ul.quality_link h3::after {
  transform: rotate(-50deg);
}


ul.quality_link h3:hover::before,
ul.quality_link h3:hover::after{
	right: -45px;
}


ul.quality_link li{
	border-top: solid 3px
}

ul.quality_link li p{
	padding: 1em 0;
	font-size: .9em
}

.quality_link_title{
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	height: 180px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.quality_link_title::before{
	content: "";
	width: 100%;
	height: 100%;
	background: #222;
	opacity: .3;
	position: absolute;
	left: 0;
	top: 0;
	right: 0
}

@media screen and (max-width: 767px) {
	ul.quality_link li{
		margin-bottom: 20px
	}
}	

@media print, screen and (min-width: 768px) {
	ul.quality_link{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 5%;
		grid-row-gap: 5%;
	}
	
	.quality_link_title{
		height: 180px;
	}
}