@charset "UTF-8";

/* ---------------------------------------------------------------------------
  ★共通
--------------------------------------------------------------------------- */
:root{
  scroll-padding-top: 130px;
}
html {font-size: 62.5%;scroll-behavior: smooth;}
body{  
  font-size: 1.6rem;
}
object {pointer-events: none;}
.sp {display: none !important;}
a[href^="tel:"] {pointer-events: none;}
a {
    text-decoration: none;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.pcFlex{display: flex;}
.pcFlex.half{
 justify-content: space-between;
}
.pcFlex.half >*{
 width: 48%;
}
.img_r {overflow: hidden;}
.img_r>img {float: right;
    width: 33%;
    margin-left: 15px;
    margin-bottom: 15px;
}
p,li,dt,dd,th,td,input{
  font-size: 1.6rem;
}
h1,h2,h3,h4,h5,h6 {
  font-size: 1.6rem;
}

section{
  padding: 100px 0;
}
section p:not(:last-child){
  margin-bottom: 1.5em;
}


/*タイトル
========================================== */
.h2Tit{
 font-size: 3.2rem;
}
.h2TitEn{
	font-size: 3.2rem;
	text-align: left;
}
.h2TitEn .en{
	font-size: 1.6rem;
}
.h3Tit {
  font-size: 2.8rem;
	margin-bottom: 55px;
}
.h3Tit::after{
	width: 10px;
	height: 10px;
	left: calc(50% - 5px);
	bottom: -25px;
}
.h4Tit {
	font-size: 2.2rem;
	margin-bottom: 20px;
}
.h5Tit {  
	font-size: 2rem;
	margin-bottom: 20px;
}
.h6Tit{
	font-size: 1.8em;
	margin-bottom: 20px;
}

/*
　テキスト
========================================== */
.leadTxt{
  font-size: min(1.85vw,1.8rem);
	line-height: 2;
  text-align: center;
}
.note{
  font-size: 1.2rem;
}

/*
　ボタン,リンク
========================================== */
.btn{
	padding: 20px 73px 20px 50px;
  width: 291px;
	height: 65px;
}
.btn::after{
 width: 20px;
 height: 20px;
 right: 50px;
 top: calc(50% - 10px);
}

/* =======================================
  ページャー
========================================== */
/*-- pageNavi --*/
.pageNavi{
	gap:0 1.5%;
 margin-top: 80px;
}
.pageNavi .current,
.pageNavi .inactive,
.pageNavi a{
	font-size: 1.8rem;
	width: 40px;
	height: 40px;
}
/*-- pager --*/
.pager{
	margin-top: 50px;
}
.pager a{
font-size: 1.6rem;
  width: 200px;
}

/* =======================================
	header
========================================== */
/* #top header:not(.fixed){
 background: transparent;
} */
header{
 height: 113px;
 padding: 10px 0 0;
}
header .flex{
 position: relative;
 margin: 0 auto;
 align-items: flex-start;
}
header #logo{
 position: relative;
}
header #logo span{
 font-size: min(1.1vw,14px);
}
header #logo img{
 margin-left: -10px;
 max-width: 320px;
}

/* =======================================
	gnavi
========================================== */
.gnavi{
	flex: 1;
 padding-top: 37px;
 position: relative;
}
#gnaviList{
  height: 100%;
 justify-content: flex-end;
 align-items: center;
 margin-top: 16px;
}
#gnaviList > li{
	border-right: 1px solid #E2E2E2;
	font-size: min(1.6vw,1.6rem);
 position: relative;
}
#gnaviList > li:first-child{
	border-left: 1px solid #E2E2E2;
}
#gnaviList > li >a{
 display:flex;
 align-items: center;
 justify-content: center;
 height: 21px;
 color: var(--base);
 font-size: min(1.6vw,1.6rem);
 font-weight: 700;
 padding: 0 min(1.5vw,22px);
 white-space: nowrap;
}
#gnaviList .hasSub > a{
 position: relative;
}
#gnaviList .hasSub:hover .sub{
	display: block;
	visibility: visible;
}
#gnaviList .sub{
	display: none;
	visibility: hidden;
	position: absolute;
 top: calc(100% + 5px);
 left: 50%;
 transform: translate(-50%, 0);
	z-index: 2;
	transition: all 0.6s ease-in-out;
 min-width:100px;
}
#gnaviList .sub li{
	font-size: min(1.3vw,1.6rem);
}
#gnaviList .sub li a{
	display: block;
 background: var(--grd01);
	padding: 10px 20px 12px;
 color: var(--wh);
 font-weight: 400;
 text-align: center;
	white-space: nowrap;
}
#gnaviList .sub li + li{
 border-top: 1px #fff solid;
}

/*-- hover --*/
#gnaviList li a:hover,
.headerLinks .recruit .sub a:hover{
 opacity: .7;
}

.gnavi p{
	position: absolute;
	right: 0;
	top: 10px;
}
.gnavi p .tel{
 font-size:min(2.2vw,3rem);
}
.gnavi p .tel img{
	margin-right: 9px;
}
.gnavi p .time{
	font-size: min(1vw,1.4rem);
}

/* =======================================
	main
========================================== */
main{
	margin-top: 113px;
}

/* =======================================
	footContact
========================================== */
#footContact{
	padding: 70px 0;
}
#footContact .pcFlex{
 justify-content: space-between;
 align-items: flex-start;
}
#footContact .h2TitEn{
	text-align: left;
}
#footContact .contactList{
	gap: 0 41px;
	width: min(65.1%,716px);
}
#footContact .contactList p{
	height: 92px;
}
#footContact .contactList .telBox{
	max-width: 306px;
}
#footContact .contactList .mailBox{
	max-width: 369px;
}
#footContact .contactList .time{
	font-size: 1.5rem;
}

/* =======================================
	footer
========================================== */
footer{
	padding-bottom: 30px;
}
footer a:hover{
	opacity: .7;
}
.footerBox.pcFlex{
	align-items: flex-start;
	justify-content: space-between;
}
.footerBox .footerLeft{
	width: min(36%, 386px);
}
.footerBox .footerRight{
 position: relative;
	justify-content: space-between;
 align-items:flex-start;
 flex-flow: row wrap;
 gap:30px 5px;
 margin-top: 15px;
 padding: 0;
	width: min(45%, 455px);
}
.footerNavi > li{
 margin-bottom: 20px;
}
.footerNavi > li > a{
 font-weight: 700;
}
.footerNavi .sub li{
 margin-top: 5px;
}
.footerNavi .sub li a{
 padding: 0 0 0 6px;
}
.copy{
 font-size: 1.5rem;
 text-align: right;
}

/* =======================================
  ボタンナビ
========================================== */
.btnNavi{
	top: 204px;
}
.btnNavi li{
	width: 100px;
	height: 100px;
}
.btnNavi a{
	font-size: 1.5rem;
	padding: 23px 5px 10px;	
}
.btnNavi .btn02 a{
	padding-top: 30px;	
}
.btnNavi .btn03 a{
	padding-top: 27px;	
}
.btnNavi img{
	margin: 0 auto 6px;
}
.btnNavi .btn01 img,
.btnNavi .btn03 img{
	width: 39px;
}
.btnNavi .btn02 img{
	margin: 0 auto 12px;
	width: 33px;
}
.btnNavi a:hover{
	opacity: 0.7;
}

/* =======================================
	pgs common
========================================== */
/*-- mainTitle --*/
.mainTitle{
	height: 150px;
}
.mainTitle h2{
	font-size: 3.6rem;
}
.mainTitle h2::after{
	height: 40px;
	bottom: -44px;
}

/*-- title --*/
.pgs .h2Tit{
 font-size: 3rem;
}

/*-- table --*/
.basicTable >dt{
	border-right: 1px dotted var(--blue);
	padding: 10px 2.5%;
	width: 23%;
}
.basicTable >dd{
	padding: 10px 2.5%;
	width: 77%;
}
.basicTable >dt:last-of-type{
	border-bottom: none;
}
 .basicTable >dd:last-of-type{
	border-bottom: none;
}

table.basicTable thead th{
	font-size: 1.8rem;
}

/*		anchorLink
-----------------------------*/
.anchorLink ul{
	padding: 35px 0;
	gap:15px 20px;
}
.pageLinks{
	padding: 35px 0 ;
}
.pageLinks ul{
	gap:15px 20px;
}
.anchorLink li,
.pageLinks li{
	flex: 1;
	height: 56px;
}
.anchorLink a,
.pageLinks li a{
	padding: 8px 10px;
}
.anchorLink + section{
	padding-top: 65px;
}

/* =======================================
	top
========================================== */

/*		#mv
-----------------------------*/
#mvTxt{
 bottom: 70px;
}
#mvTxt h2{
	font-size: 4rem;
}
#mvTxt h2 span{
	font-size: 4.8rem;
}
#mvTxt h2,
#mvTxt p{
	text-shadow: 0 0 15px rgba(0,0,0,.8);
}

/*		#topNews
-----------------------------*/
#topNews{
	margin: -43px 7.29% 0 0;
	padding: 41px max(2.62%,34px) 41px max(8.32%,108px);
	width: 92.72%;
}
#topNews .pcFlex{
	align-items: flex-start;
	max-width: 1157px;
}
#topNews h2{
	font-size: 2.4rem;
	margin-right: 33px;
}
#topNews dl{
	width: 63.2%;
}
#topNews dl dt{
	padding-right: 33px;
}
#topNews p{
	font-size: 1.5rem;
	margin: auto 0 0 7.55%;
}

/*		#topBusiness
-----------------------------*/
#topBusiness{
	padding: 57px 0 75px;
}
#topBusiness > div{
	background-position: 93% 40px;
	background-size: 460px 432px;
}
#topBusiness .h2TitEn{
	margin-bottom: 62px;
}
#topBusiness dl{
	width: min(90%,864px);
}
#topBusiness dl dt{
	font-size: 3.2rem;
	margin-bottom: 27px;
}
#topBusiness dl dd{
	padding-right: min(31%,268px);
}
#topBusiness .btn{
	margin-top: 44px;
}

/*		#topReason
-----------------------------*/
#topReason{
	padding-top: 70px; 
}
#topReason ul{
	margin-top: 72px;
}
#topReason ul li{
	padding: 18px 23px 23px;
	width: calc((100% - 84px) / 3);
}
#topReason ul li span{
	font-size: 4.8rem;
}
#topReason ul li figure{
	margin: -36px auto 12px;
	width: 161px;
	height: 161px;
}
#topReason ul li:nth-child(1) figure{
	margin-bottom: 26px;
}
#topReason ul li:nth-child(1) figure img{
	margin-right: -2px;
	width: 83px;
}
#topReason ul li:nth-child(2) figure img{
	margin-right: -16px;
	width: 89px;
}
#topReason ul li:nth-child(3) figure img{
	width: 76px;
}
#topReason ul li p{
	font-size: 2rem;
}

/*		#topProduct
-----------------------------*/
#topProduct{
	padding: 57px 0 0;
}
#topProduct ul li{
	background-position: left top;
	width: calc(100% / 3);
	height: 533px;
}
#topProduct ul li a{
	padding: 140px 20px 20px;
}
#topProduct ul li a::after{
	width: 35px;
	height: 35px;
	bottom: 151px;
	left: calc(50% - 17.5px);
}
#topProduct ul li h3{
	font-size: 3.6rem;
	margin-bottom: 40px;
}

/*		#topCompany
-----------------------------*/
#topCompany{
	margin-top: -133px;
	padding: 210px 0 80px;
}
#topCompany > div{
	padding: 60px min(5.25%,83px);
}
#topCompany .h2TitEn{
	margin-bottom: 17px;
}
#topCompany figure{
	max-width: 450px;
}
#topCompany .txts{
	margin-left: 67px;
	max-width: 518px;
}
#topCompany ul li{
	max-width: 282px;
}
#topCompany .txts a{
	font-size: 2.4rem;
}
#topCompany .txts a::after{
	width: 9px;
	height: 15px;
	top: calc(50% - 7.5px);
}


/* =======================================
	company
========================================== */
#companyMessage{
	background-size: 460px 432px;
	background-position: left 10% bottom 60px;
}
#companyMessage .txts{
	width: 55%;
}
#companyMessage .txts p{
	font-size: 1.8rem;
}
#companyMessage .txts p.right span{
	font-size: 2.4rem;
}
#companyMessage figure{
	width: 40%;
}
#companyAccess p{
	text-align: center;
}
#companyAccess .map iframe{
	height: 400px;
}

/* =======================================
	partner
========================================== */
#partnerLead p{
	font-size: 2rem;
	text-align: center;
}

#partnerMerit ol li{
	padding: 18px 23px 23px;
	width: 300px;
	height: 300px;
}
#partnerMerit ol li span{
	font-size: 7rem;
	padding-bottom: 10px;
}
#partnerMerit ol li p{
	font-size: 2.8rem;
	margin-top: 25px;
}

#partnerFlow p{
	font-size: 2.4rem;
	margin-top: 50px;
	padding: 10px 20px;
	border-radius: 10px;
}

/* =======================================
	esg
========================================== */
#esgLead figure{
	width: 80%;
}
#esgLead h3{
	font-size: 2.4rem;
	margin-top: -2.4rem;
  margin-bottom: 20px;
}
#esgLead .leadBox{
	margin-top: 5.6rem;
	padding: 0 30px 30px;
}

#esgEfforts .esgBox{
	background: var(--wh);
	border-radius: 20px;
	margin-bottom: 40px;
}
#esgEfforts .esgBox:last-of-type{
	margin-bottom: 0;
}
#esgEfforts .esgBox ul{
	gap: 0 30px;
	padding: 30px min(5.25%,30px);
}
#esgEfforts .esgBox ul li{
	padding-left: 15px;
	width: calc((100% - 60px) / 3);
}
#esgEfforts h4{
	font-size: 2.4rem;
}
#esgEfforts h4 .category{
	font-size: 1.8rem;
	margin-right: 20px;
	width: 100px;
}
#esgEfforts h4 .category span{
	display: block;
	font-size: 6rem;
}
#esgEfforts .esgE li{
	border-left: 1px solid #5ea735;
}
#esgEfforts .esgS li{
	border-left: 1px solid #35a7e2;
}
#esgEfforts .esgG li{
	border-left: 1px solid #db4848;
}
#esgEfforts .esgBox h5{
	font-size: 2rem;
	margin-bottom: 10px;
}

/* =======================================
	works
========================================== */

#worksLead{
	margin-top: 50px;
	padding: 50px 30px 50px 17%;
}
#worksLead p{
	font-size: 1.8rem;
}
#worksLead .leadTxt{
	font-size: 2.9rem;
}

#worksInsulating ul.pcFlex{
	gap: 0 min(5%,50px);
}
#worksInsulating ul.pcFlex li{
	width: calc((100% - 100px) / 3);
}
#worksInsulating ul li p{
	font-size: 2rem;
}	
#worksInsulating .btnWrap{
	margin-top: 30px;
	padding: 60px min(5.25%,83px)
}
#worksInsulating .btnWrap .h4Tit{
	margin-bottom: 30px;
}

#worksProcessing .itemBox{
	margin-bottom: 30px;
	padding-bottom: 30px;
}
#worksProcessing .itemBox h4{
	font-size: 2.8rem;
	padding: 15px 20px;
}
#worksProcessing .itemBox div.pcFlex{
	padding: 30px 30px 15px;
}
#worksProcessing .itemBox figure{
	width: 40%;
}
#worksProcessing .itemBox .txts{
	width: 55%;
}
#worksProcessing .itemBox .txts h5{
	font-size: 1.8rem;
	margin-bottom: 10px;
	padding: 2px 10px;
}
#worksProcessing .itemBox .case{
	margin: 0 30px;
	padding: 20px;
}
#worksProcessing .itemBox .case h5{
	font-size: 1.8rem;
	margin-bottom: 10px;
	padding-bottom: 2px;
}

/* =======================================
	reason
========================================== */
#reasonLead{
	padding: 50px 30px 50px 15%;
}
#reasonLead p{
	font-size: 1.8rem;
	text-align: center!important;
}
#reasonLead .leadTxt{
	font-size: 2.9rem;
}

#reasonMain .h4Tit{
	display: flex;
	align-items: center;
	font-size: 3.6rem;
	margin-top: 80px;
	padding: 15px 20px;
}
#reasonMain .h4Tit .num{
	border: 3px solid var(--wh);
	font-size: 5rem;
	line-height: 1;
	width: 100px;
	height: 100px;
	margin-right: 15px;
}
#reasonMain .pcFlex figure{
	width: 40%;
}
#reasonMain .pcFlex .txts{
	width: 55%;
}
#reasonMain .txts .leadTxt{
	font-size: 3rem;
	margin-top: 10px;
	margin-bottom: 20px;
}

#reasonFlow ul{
	gap: 0 100px;
	margin-bottom: 30px;
	padding-top: 20px;
}
#reasonFlow ul li{
	font-size: 3rem;
	width: 200px;
	height: 200px;
}
#reasonFlow ul li span{
	width: 200px;
	height: 200px;
	border-radius: 100px;
}
#reasonFlow ul li:not(:last-child)::after{
	width: 25px;
	height: 30px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	top: calc(50% - 15px);
	right: -65px;
}
#reasonFlow ul li::before{
	width: 210px;
	height: 210px;
	border-radius: 105px;
	top: -7px;
	left: -7px;
}


/* =======================================
	news
========================================== */
/*		一覧
-----------------------------*/
.newsBox{
	padding: 30px 0;
}
.newsBox > a{
	display: flex;
	flex-direction: row-reverse;
 justify-content: space-between;
}
.newsBox figure{
 width: 30%;
}
.newsBox .txts{
 width: 66%;
}
.newsBox h3{
	font-size: 2rem;
}

/*		single
-----------------------------*/
article{
 padding: 100px 0;
}
#newsDetail .txtImgBox{
	justify-content: space-between;
}
#newsDetail .txtImgBox figure{
	width: 40%;
}
#newsDetail .txtImgBox .txts{
	width: 55%;
}
#newsDetail .btnWrap .btn{
	margin: 50px auto 0;
}

/* =======================================
	contact
========================================== */
#contactLead > div{
	padding-bottom: 70px;
}
#contactLead .tel{
	margin-top: 70px;
}
#contactLead .tel a{
	padding: 0 0 0 35px;
}
#contactLead .tel a::before{
	width: 30px;
	height: 40px;
	top:calc(50% - 15px);
}
#contactLead .tel dd{
	font-size: 5rem;
}
#contactFormArea{
	padding-top: 70px;
}

/* =======================================
	form
========================================== */
.tb_cont th{

	padding: 15px 2.5%;
	width: 25%;
}
.tb_cont td{
	border-left: 1px solid var(--base);
	padding: 15px 2.5%;
	width: 75%;
}
.tb_cont td input:not([type=checkbox]):not([type=radio]){
	padding: 8px;
	width: 80%;
}
.tb_cont td textarea{
	padding: 8px;
	width: 80%;
	height: 100px;
}
.tb_cont .hissu{
	padding: 3px 3%;
}
.tb_cont .zip{
	margin-right: 10px;
	width: 20%;
}
.tb_cont .zipBtn{
	font-size: 1.4rem;
	padding: 10px 14px;
}
.tb_cont .w50{
	width: 58%;
}
.tb_cont .fileBtn li{
	width: 33%;
}
.confirm {
  margin-top: 40px;
}
.tb_cont td input.radiobtn{
    width: auto;
}

/* =======================================
	privacypolicy
========================================== */


/* =======================================
#heat
========================================== */

#heat main section#Celsius90{
  padding-bottom: 100px;
}  
.heatList .accBox{
  margin: 0 30px;
}
.heatList dl{
  display: flex;
}
  
.heatList dl dt{
  width: 40%;
}  
  .heatList dl dt a{
    padding: 20px
  }  
.heatList dl dd{
  width: 60%;
  padding: 20px
}  
  
#heat main section#heatContact{
  padding: 100px 0;
}  
  
#heatContact ul.bdrBox{
  margin: -3.5rem auto 0;
  }
#heatContact ul.bdrBox::before{
  width: 40rem;
  height: 1rem;
  top: -10px;
  left: calc(50% - 20rem);
}  

/* =======================================
#product
========================================== */
#productItem > div .block-img{
  width: 45%;
}

#productItem > div .block-desc{
  width: 55%
}

#productItem > div#prod09 > .flex,
#productItem > div#prod04 > .flex,
#productItem > div#prod02 > .flex,
#productItem > div#prod05 > .flex,
#productItem > div#prod07 > .flex,
#productItem > div#prod15 > .flex,
#productItem > div#prod17 > .flex,
#productItem > div#prod12 > .flex,
#productItem > div#prod19 > .flex,
#productItem > div#prod21 > .flex{
  flex-direction: row-reverse
}

#productElectricMaker .accBox ul,
#productMachineMaker ul{
  column-count: 3;
}

/* =======================================
#qanda
========================================== */


.qaBox{
  padding: 40px
}