@charset "UTF-8";

/* ---------------------------------------------------------------------------
  ★共通
--------------------------------------------------------------------------- */
:root{
  scroll-padding-top: 135px;
}
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;
}
.column3{
 flex-flow: row wrap;
 gap:40px 30px;
}
.column4{
 flex-flow: row wrap;
 gap:40px 20px;
}
.column3 > li{
 width: calc((100% - 30px*2)/3);
}
.column4 > li{
 width: calc((100% - 20px*3)/4);
}


/*タイトル
========================================== */
.h2Tit {
}
.h3Tit {
 font-size: min(5.5vw,3rem);
	margin-bottom: 40px;
}
.h4Tit {
	font-size: 2.5rem;
	margin-bottom: 30px;
}
.h5Tit {  
	font-size: 2.2rem;
	margin-bottom: 20px;
}
.h6Tit{
	font-size: 2rem;
	margin-bottom: 20px;
}

/*
　テキスト
========================================== */
.leadTxt{
  font-size: min(2.2vw, 2.2rem);
}
.note,
.note li{
  font-size: 1.2rem;
}
.pcCenter{
	text-align: center;
}

/*
　ボタン,リンク
========================================== */
.btnWrap{
 margin-top: 40px;
}
.btn{
	min-height: 74px;
	padding: 10px min(14.56%,52px) 10px 0px;
	font-size: min(3.6vw, 1.8rem);
	letter-spacing: 0.08em;
	width: min(100%,357px);
}

/*		bnr
-----------------------------*/
main .bnr{
	font-size: 3rem;
	padding: 25px min(14.56%,52px) 20px 25px;
	width: max(80%,800px);
}
main .bnr::after{
 width: 27px;
 height:24px;
 right: 8.4%;
}
.bnr .slash{
	font-size: 2rem;
	margin-bottom: 5px;
}
.bnr .slash::before,
.bnr .slash::after{
	height: 2em;
}


/* =======================================
  ページャー
========================================== */
/*-- 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
========================================== */
header {
}
header > div{
 position: relative;
 align-items: flex-end;
 height: 132px;
 padding: 0 0 0 1.9%;
}
header #logo{
	margin-bottom: 25px;
}
header #logo a{
	width: 15vw;
	max-width: 248px;
}


/* =======================================
	gnavi
========================================== */
.gnavi{
 position: relative;
 flex: 1;
	padding-top: 68px;
}
#gnaviList{
 justify-content: flex-end;
 align-items: center;
 gap: 0 min(1.6vw,30px);
	padding-right: 20px;
}
#gnaviList > li{
	font-size: min(1.24vw,16px);
}
#gnaviList > li > a{
 display:flex;
 align-items: center;
 white-space: nowrap;
 height: 64px;
}
#gnaviList li a:hover{
 opacity: .7;
}
#gnaviList .hasSub{
 position: relative;
	display: flex;
	align-items: center;
 gap:0 5px;
 height: 64px;
}
#gnaviList .hasSub::after{
	content: "";
	display: block;
 background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 10 5" fill="none"><path d="M0.75 0.75L4.15 3.3C4.50556 3.56667 4.99444 3.56667 5.35 3.3L8.75 0.75" stroke="%23333333" stroke-width="1.5" stroke-linecap="round"/></svg>') no-repeat left top/100% auto;
 width: 10px;
 height:5px;
	margin-top: 4px;
}

.gnavi .hasSub:hover .sub{
	display: block;
	visibility: visible;
}


#gnaviList .sub{
	display: none;
	visibility: hidden;
	position: absolute;
	top: calc(100% - 15px);
	left: 50%;
	transform: translate(-50%, 0);
	z-index: 2;
	transition: all 0.6s ease-in-out;
 padding-top: 4px;
	min-width:100px;
}
#gnaviList > li:last-child .sub{
	right: 0;
	left: auto;
	transform: translate(0, 0);
}
#gnaviList .hasSub:hover .sub{
	display: block;
	visibility: visible;
}
#gnaviList .sub li{
	font-size: min(1.0vw,1.4rem);
}
#gnaviList .sub li + li{
 border-top: 1px #fff solid;
}
#gnaviList .sub li a{
	display: block;
 background: var(--Lorange);
	padding: 8px 20px 10px;
 color: var(--wh);
 font-weight: 400;
 text-align: center;
	white-space: nowrap;
}
#gnaviList .sub li a:hover{
 opacity: .7;
}


.gnavi #headLinks{
	position: absolute;
	right: 0px;
	top: 0px;
}

#headLinks .diagnose{
	width: min(17vw,245px);
}
#headLinks .tel{
	width: min(17vw,222px);
}
#headLinks .contact{
	width: min(16vw,237px);
}
#headLinks a:hover{
 opacity: .7;
}

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


/* =======================================
	footContact
========================================== */
#footContact{
}
#footContact ul {
 justify-content: center;
}
#footContact ul li{
 width: 50%;
}
#footContact ul .tel a{
	border-bottom-left-radius: 15px;
}
#footContact ul .contact a{
	border-bottom-right-radius: 15px;
}
#footContact .area.pcFlex{
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: flex-end;
}
#footContact .area >p{
	width: 100%;
}
#footContact .area dl{
	max-width: calc(100% - 288px - min(2.85vw, 40px) - 10px);
}
#footContact .area .map{
	width: 288px;
	margin-top: -75px;
	padding-right:min(2.85vw, 40px);
	box-sizing: content-box;
}
/* =======================================
	footer
========================================== */
footer{
}
footer a:hover{
	opacity: .7;
}
#footBottom{
}
#footBottom > .pcFlex{
 justify-content: space-between;
}
.footerLeft{
 width: 36%;
 max-width: 310px;
}

#footerRight{
 flex-flow: row wrap;
 justify-content: flex-end;
 align-items:flex-start;
 align-content: flex-start;
 gap: 25px min(4.35vw,80px);
 width: min(62%,616px);
 padding-top: 21px;
}
.footerNavi > li{
	font-size: 1.6rem;
 line-height: 1.4;
}
.footerNavi > li + li{
	margin-top: 3rem;
}
.footerNavi li a{
	display: block;
}
.footerNavi .sub li{
 margin-top: 10px;
	font-size: 87.5%;
}
.footerNavi .sub li a::before{
 content: "-";
}
.footerNavi .recruit a{
	border-radius: 5px;
 background: var(--orange);
 width: 159px;
 color: var(--wh);
 text-align: center;
 line-height: 33px;
}
.footerNavi .privacy{
	margin-top: 5rem;
	text-align: right;
	font-size: 12px;
}


#pageTop{
	right:max(2vw, calc((100% - 1200px)/2));
	bottom: 40px;
}
#pageTop a:hover{
 opacity: .7;
}

/* =======================================
	pgs common
========================================== */
.pgs footer{
	margin-top: 160px;
}

/*-- mainTitle --*/
.mainTitle{
	height: 220px;
}

/*-- table --*/
.basicTable > dt,
.basicTable >div>dt{
	border-right: 1px dotted var(--blue);
	padding: 15px 2.5%;
	width: 25%;
}
.basicTable > dd,
.basicTable >div>dd{
	padding: 15px 2.5%;
	width: 75%;
}
.basicTable > dt:last-of-type{
	border-bottom: none;
}
 .basicTable > dd:last-of-type{
	border-bottom: none;
}

table.basicTable thead th{
	font-size: min(1.3vw,1.6rem);
}
table.basicTable th,
table.basicTable td{
	padding: 10px 2px; 
}

.basicTable.data tbody th,
.basicTable.data tbody td{
	font-size: min(1.3vw,1.4rem);
}

/*		anchorLink
-----------------------------*/
.anchorLink{
	gap: 25px 20px;
	padding: 100px 0 50px;
}
.secLead .anchorLink{
	padding: 50px 0 0;
}
.anchorLink ul{
	padding: 35px 0 ;
	gap:15px 20px;
}
.anchorLink li a{
	font-size: min(1.2vw,1.6rem);
	padding: 15px min(25%,55px) 15px min(3%,10px);
}
.anchorLink a::before{
	width: 24px;
  height: 24px;
  right: 24px;
  top: calc(50% - 12px);
}
.anchorLink a::after{
  width: 4px;
  height: 4px;
  right: 34px;
  top: calc(50% - 3px);
}
.pageLinks{
	padding: 35px 0 ;
	gap:15px 20px;
}
.anchorLink li,
.pageLinks li{
	width: calc((100% - 20px * 3) / 4);
}
.anchorLink .pcWide{
	flex-shrink: 0;
	width: max-content;
}
.anchorLink .pcWide a{
	padding: 5px 62px 5px 24px;
}
.anchorLink a,
.pageLinks li a{
	min-height: 40px;
}
.pageLinks a{
	padding: 10px min(10.56%,52px);
}
.anchorWrap > ul,
.anchorWrap .anchorLink{
	padding: 50px 0 !important;
}

/*		pagelinks
-----------------------------*/
.pagelinksWrap{
	margin-top: 100px;
}
.pageLinks li a span{
	font-size: 1.4rem;
}

.pageLinkArea{
	margin-bottom: 50px;
}

/*		noticeBox
-----------------------------*/
.noticeBox{
	margin-top: 30px;
	padding: 25px 25px 25px 110px;
}
.noticeBox::before{
	width: 60px;
	height: 60px;
	top: calc(50% - 30px);
	left: 25px;
}
.noticeBox::after{
	font-size: 3rem;
	width: 3rem;
	height: 60px;
	top: calc(50% - 3rem);
	left: calc(25px + 1.5rem);
}

.secLead p{
 font-size: 18px;
 line-height: 2;
}

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

/*		#mv
-----------------------------*/
#mv .pcFlex{
	justify-content: space-between;
	align-items: flex-start;
}
#mv .pcFlex .txts{
	width: 54%;
	padding-top: 30px;
	padding-bottom: 25px;
}
#mv .pcFlex figure{
	width: 45.5%;
	max-width: 550px;
	margin-bottom: -62px;
}

/*		##topAchievements PC
-----------------------------*/
#topAchievements{
	padding-top: 115px;
	padding-bottom: 148px;
}
.achievementsSlider .slick-slide{transition: 0.3s;}
.achievementsSlider .slick-slide.is-left-edge{
transform: rotate(-3deg);
	transform-origin: right bottom;
}
.achievementsSlider .slick-slide.is-right-edge{
transform: rotate(3deg);
	transform-origin: left bottom;
}
/*		#topRecommend  PC
-----------------------------*/
#topRecommend{
	padding-top: 113px;
	padding-bottom: 120px;
}
#topRecommend ul{
	flex-flow: row wrap;
	justify-content: center;
}
#topRecommend ul li:nth-of-type(1){
	margin-right: -13px;
}
#topRecommend ul li:nth-of-type(2){
	margin-right: -20px;
}
#topRecommend ul li:nth-of-type(3){
	margin-right: -26px;
}

/*		#topMerit PC
-----------------------------*/
#topMerit{
	padding-top: 85px;
}
#topMerit ul.pcFlex{
	flex-flow: row wrap;
	justify-content: center;
	gap:24px min(5.5vw,78px);
}
#topMerit ul.pcFlex li{
	max-width: 353px;
}
#topMerit ul.pcFlex li:nth-of-type(4){
	margin-right: 33px;
}
#topMerit ul.pcFlex li:nth-of-type(5){
	margin-left: 33px;
}
#topMerit dl{
	gap:0 24px;
	align-items: flex-start;
	justify-content: center;
}
#topMerit dl dt{
	width: 300px;
	flex-shrink: 0;
}

/*		#topService PC
-----------------------------*/
#topService{
	padding-block: 119px;
}
#topService .center{
	font-size: 20px;
}
#topService li{
	width: 45.8%;
}

/*		#topReason PC
-----------------------------*/
#topReason ul.pcFlex{
	justify-content: space-between;
}
#topReason li{
	width: 24.6%;
	max-width: 295px;
}
#topReason li figure{
	display: grid;
	place-content: center;
	height: 159px;
}

/*		#topPrice PC
-----------------------------*/
#topPrice .inner1300{
	padding: 60px min(21%,274px);
}
@media screen and (max-width: 1300px) {
#topPrice .inner1300{
	padding: 60px 12%;
}
}/*-max1000 only-*/
#topPrice h2{
	font-size: 55px;
}
#topPrice .formula{
	justify-content: center;
	gap:0 min(13.8%,102px);
}
#topPrice .formula dl:first-of-type{
	width: 50%;
	max-width: 366px;
}
#topPrice .formula dl:nth-of-type(2){
	width: 36.2%;
	max-width: 268px;
}

#topPrice .total dd .note{
	font-size: 1.4rem;
}

/*		#topDiagnose PC
-----------------------------*/
#topDiagnose{
	padding: 0;
}
#topDiagnose .inner1300{
	justify-content: space-between;
	max-width: 1320px !important;
}
#topDiagnose .txts{
	width: 50%;
	padding-block: 80px;
	padding-left: 59px;
}
#topDiagnose .txts .baloon,
#topDiagnose .txts .btnWrap{
	margin-left: -59px;
}
#topDiagnose .txts ul li p{
	margin-inline:-2em;
}


#topDiagnose .imgs{
	width: 47.5%;
	max-width: 625px;
}

/*		#topNews PC
-----------------------------*/
#topNews{
	padding-bottom: 75px;
}
#topNews ul{
	gap:0 30px;
}
#topNews li{
	width: calc((100% - 30px*2)/3);
}
#topNews li a:hover{
	opacity: .7;
}


/*------------------------------------------
		roof PC
------------------------------------------*/
#roofMerit h3{
	margin-bottom: 45px;
	font-size: 4.5rem;
}
#roofMerit h3 .num{
	font-size: 344.4%;
}
#roofMerit .lead{
	font-size: 2rem;
}
#roofMerit ul.pcFlex{
	flex-flow: row wrap;
	justify-content: center;
	gap:24px min(5.5vw,50px);
	padding: 26px 3% 60px;
}
#roofMerit ul.pcFlex li{
	max-width: 330px;
}
#roofMerit ul li h4{
	font-size: 2.7rem;
	margin-bottom: 15px;
}
#roofMerit ul li h5{
	font-size: 2.2rem;
	margin-bottom: 26px;
}
#roofMerit li figure{
	margin: -14px 0 27px;
	min-height: 208px;
}
#roofMerit li p{
	font-size: 1.8rem;
}

#roofDifference dl + dl{
	margin-top: 30px;
}
#roofDifference dl dt{
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	font-size: min(2.1vw,2.4rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 25px min(1.8vw,25px);
	width: 25%;
}
#roofDifference dl dd{
	padding: 25px min(3.5vw,50px);
	width: 75%;
}
#roofDifference dl dd > span.bold{
	font-size: 1.8rem;
}
#roofDifference .checkTxt li{
	padding-left: 34px;
}
#roofDifference .checkTxt li::before{
	width: 24px;
	height: 24px;
}

#roofPoint .basicTable thead th{
	border-radius: 20px 20px 0 0;
	font-size: min(1.8vw,1.8rem);
	width: calc(100% / 3);
}
#roofPoint .basicTable tbody th{
	padding-left: 5%;
	padding-right: 5%;
}
#roofPoint .basicTable .icOrange,
#roofPoint .basicTable .icPurple,
#roofPoint .basicTable .icRed,
#roofPoint .basicTable .icLblue{
	font-size: 3rem;
}
#roofPoint .roofExample{
  max-width: 80%
}
.commentBox{
	background: url("../images/img_commentbox.png") no-repeat left center / 108px auto;
	padding-left: 130px;
	min-height: 115px;
}
.commentBox p{
	padding: 20px 40px;
}
.commentBox p::before{
	width: 22px;
	height: 1px;
	left: -22px;
	top: 50%;
}

#roofWarranty > div.bgW{
	padding: 100px;
}
#roofWarranty .h4Tit{
	margin-bottom: 20px;
}
#roofWarranty h5{
	font-size: 2rem;
}
#roofWarranty .txtYear{
	font-size: 2.4rem;
	margin: 0 30px 0 0;
	width: 180px;
	height: 180px;
}

#roofVoice li + li{
	margin-top: 30px;
}
#roofVoice dl dt{
	font-size: 2rem;
	padding: 15px 15px 20px;
	width: 12%;
}
#roofVoice dl dt .num{
	font-size: 4rem;
}
#roofVoice dl dd{
	padding: 15px 20px 20px;
	width: 88%;
}
#roofVoice .commentBox{
	margin-top: 15px;
}

#roofFlow ul{
	gap: 60px min(5.3vw,30px);
	flex-wrap: wrap;
}
#roofFlow ul li{
	/* max-width: 200px; */
	width: calc((100% - 120px) / 5);
}
#roofFlow ul li::after{
	width: 90px;
	height: 8px;
	right: -60px;
	top: 126px;
}
#roofFlow ul li:nth-of-type(5n)::after{
	display: none;
}
#roofFlow ul li h4{
	font-size: 2.4rem;
	height: min(2.5em,50px);
	padding-right: 60px;
}
#roofFlow ul li .num{
	padding-left: min(115px,8vw);
}
#roofFlow ul li h5{
	font-size: min(1.7vw,1.8rem);
}
#roofFlow ul li figure{
	margin: 0 auto 10px;
	width: min(80%,160px);
}

#roofArea{
	padding-bottom: 60px;
}
#roofArea ul {
	gap: 0 30px;
	margin-bottom: 30px;
}
#roofArea ul li span{
	font-size: 2.5rem;
	padding: 3px 40px;
}
#roofArea p{
	font-size: 2rem;
}


/* =======================================
  service PC 
========================================== */
#serviceList{
	margin-top: 40px;
	padding: 40px 0 0;
}
#serviceList .h3Tit{
	margin-bottom: 0;
}
#serviceList .anchorLink{
	display: flex;
	gap: 25px 2%;
	padding-top: 25px !important;
}
#serviceList .anchorLink > li{
	width: 49%;
}
#serviceList .anchorLink .linkSet{
	padding: 15px 20px 25px;
}
#serviceList .anchorLink .linkSet h4{
	font-size: 1.8rem;
	margin-bottom: 15px;
}
#serviceList .anchorLink .linkSet ul{
	gap: 20px 2%;
	padding: 0;
}
#serviceList .anchorLink .linkSet ul li{
	width: calc((100% - 8%) / 5);
}
#service .btnWrap{
	margin-top: 100px;
}
#service .columnBox{
	margin: 80px 0 40px;
	padding: 50px 4.2%;
}
#service .columnBox h4 span{
	font-size: 2.5rem;
	padding: 10px 50px;
}
#service .columnBox dt,
#service .columnBox dd{
	font-size: 1.8rem;
}
#service .columnBox dt img,
#service .columnBox dd img{
	width: 96px;
	height: 96px;
}
#service .columnBox dt span,
#service .columnBox dd span{
	width: calc(100% - (120px + 96px));
}
#service .columnBox dd{
	margin: 15px 0 50px;
}

#serviceArea .areaInner{
	padding: 35px 3.6%;
}
#serviceArea dl dt{
	font-size: 23px;
}

/* =======================================
  price PC
========================================== */
#price .secLead .anchorWrap{
	margin-top: 40px;
}

#price #price01 h4.lead{
	font-size: min(3.8vw,4.5rem);
}
#price .priceLead .txts{
	font-size: min(1.6vw,1.8rem);
	padding: 30px min(4%,40px);
}
#price .priceLead .txts::before{
  width: 30px;
  height: 1px;
  left: -30px;
  top: 50%;
}
#price .priceLead figure{
	width: 216px;
}
#price #price01 dl{
	gap: 0 24px;
  align-items: flex-start;
  justify-content: center;
}
#price #price01 dl dt{
	width: 300px;
	flex-shrink: 0;
}
#price #price01 .noticeBox{
	gap: 0 30px;
	align-items: center;
	padding-left: 100px;
}

#price .priceDetail{
	margin-top: 40px;
	padding: 20px 30px 30px;
}
#price .priceDetail h5 span{
	font-size: 2.2rem;
	padding: 0 1em 5px;
}
#price .priceDetail ul li{
	padding: 15px;
	width: calc((80% - 60px) / 2);
}
#price .priceDetail ul li:nth-child(1)::after{
	top: calc(50% - .5em);
	right: -45px;
}
#price .priceDetail p:not(.note){
	font-size: 2rem;
}
#price .priceDetail p span{
	font-size: 1.6rem;
}
#price .priceDetail p.note{
	text-align: center;
}

#price .priceList th,
#price .priceList td{
	padding: 15px min(1.3%,10px);
}
#price .priceList thead th:nth-of-type(2){
	width: 92px;
}
#price .priceList thead th:nth-of-type(3),
#price .priceList thead th:nth-of-type(4),
#price .priceList thead th:nth-of-type(5){
	font-size: min(1.6vw,1.8rem);
	min-width: 200px;
}
#price .priceList thead th span{
	font-size: min(1.4vw,1.6rem);
}
#price .priceList tbody th,
#price .priceList tbody td{
	padding: 20px min(1%,10px);
}
#price .priceList .price01{
	font-size: 2rem;
}
#price .priceList .price01 .num{
	font-size: 3.2rem;
}
#price .priceList .price01 span:not(.num){
	font-size: min(1.4vw,1.6rem);
}
#price .priceList .price02 span:not(.subTi){
	font-size: min(1.2vw,1.4rem);
}

#price .planBox{
	padding: 50px;
}
#price .planBox .lead{
	font-size: 2rem;
}
#price .planBox .area{
	font-size: 2.4rem;
}
#price .planBox .price{
	gap: 0 10px;
	font-size: 3rem;
}
#price .planBox .priceBox .bgOrange,
#price .planBox .total .bgOrange{
  line-height: 1.4;
}
#price .planBox .priceBox .orange{
	font-size: 3rem;
}
#price .planBox .priceBox .orange span{
	font-size: 4.4rem;
}
#price .planBox .total{
	font-size: 3.8rem;
	justify-content: flex-end;
}
#price .planBox .total .bgOrange{
	font-size: 1.8rem;
}
#price .planBox .total .bgOrange + span{
	font-size: 3.6rem;
}
#price .planBox .total .bgOrange + span span{
	font-size: 8rem;
}
#price .planBox .warrantyBox dl{
	margin: 20px;
}
#price .planBox .warrantyBox h4{
	font-size: 2.2rem;
	padding: 5px 20px 8px;
}
#price .planBox .warrantyBox dl dt{
	width: 32%;
}
#price .planBox .warrantyBox dl dd{
	font-size: 2rem;
	width: 68%;
}

#price #price01 dl{
	margin-top: 66px;
}
#price #price01 dl dt{
	font-size: 2.5rem;
}
#price #price01 dl dt::before{
	width: 30px;
	height: 30px;
}
#price #price01 dl dd{
	font-size: 2rem;
}
#price #price01 .noticeBox h4{
	font-size: 2.4rem;
}

#priceMaker div.pcFlex{
	gap: 30px 40px;
	margin-top: 40px;
	flex-wrap: wrap;
}
#priceMaker dl{
	width: calc((100% - 80px) / 3);

    display: flex;
    flex-direction: column;
}
#priceMaker dl dt{
	font-size: 1.8rem;
	padding: 10px 20px;
}
#priceMaker dl dd{
  flex-grow: 1;
}

#priceWarranty h3 .slash{
	font-size: 2.8rem;
}
#priceWarranty h3 .edgingB{
	font-size: min(5.5vw,4.5rem);
}

#price .btnWrap{
	margin-top: 100px;
}

#pricePayment ul{
	gap: 40px;
}
#pricePayment ul li{
	font-size: 2rem;
	padding: 15px 20px;
	width: calc((100% - 40px) / 2);
}
#pricePayment ul li span{
	font-size: 1.6rem;
}
#price .planBox .noimg .txts .price{
  display: inline-flex
}
#price .planBox .noimg .txts .total{
  display: inline-block;
}

/* =======================================
  reason PC
========================================== */
#reasonStrength .h3Tit{
	margin-bottom: 40px;
	font-size: 45px;
}

#reasonStrength ul{
	flex-wrap: wrap;
	gap: calc(50px + 1em) 5%;
	margin-top: 74px;
}
#reasonStrength ul li{
	width: 47.5%;
  max-width: 576px;
}
#reasonStrength ul li h4{
  font-size: min(3.6vw,3.8rem);
	margin-bottom: 30px;
}
#reasonStrength ul li h4 span{
	width: 70%;
}
#reasonStrength ul li h5{
	font-size: 2.4rem;
	margin-bottom: 25px;
}
#reasonStrength ul li figure{
	display: grid;
  place-content: center;
  height: 159px;
	margin-bottom: 35px;
}
#reasonStrength ul li p{
	font-size: 1.8rem;
}

#reasonPromise div.pcFlex{
	margin-top: 50px;
}
#reasonPromise div.pcFlex .h4Tit{
	font-size: min(2.2vw,2.5rem);
}

/* =======================================
  diaqnose PC
========================================== */
#diagnose main > .btnWrap{
	margin-bottom: 50px;
}

#diagnoseTrouble h3{
	padding: 5px min(3.3%,35px) 13px;
	margin: 0 auto 60px;
	font-size: 45px;
}
#diagnoseTrouble ul{
	background-position: center 270px;
	background-size: min(22vw,320px) auto;
	gap: 30px min(.9vw,20px);
}
#diagnoseTrouble ul::before{
	width: 60px;
	height: 30px;
	top: calc(100% + 20px);
	left: calc(50% - 30px);
}
#diagnoseTrouble ul::after{
	width: 80px;
	height: 30px;
	top: calc((100% + 20px) + 30px);
	left: calc(50% - 40px);
}
#diagnoseTrouble ul li{
	line-height: 1.9;
	padding: 50px 0 0;
	font-size: 1.8rem;
	width:min(31vw,314px);
	height:240px;
}
#diagnoseTrouble .messageBox{
	gap: 0 40px;
	margin-top: 80px;
}
#diagnoseTrouble .messageBox figure{
	max-width: 150px;
}
#diagnoseTrouble .messageBox p{
	padding: 20px min(5vw,75px);
	font-size: 3.2rem;
}
#diagnoseTrouble .messageBox p .sub{
	font-size: 2rem;
}

#diagnosePromise h3{
	font-size: 4.5rem;
	margin-bottom: 45px;
}
#diagnosePromise h3 .slash{
	font-size: 2.6rem;
}
#diagnosePromise ul{
	gap: 35px min(3%,40px);
	flex-wrap: wrap;
	justify-content: center;
}
#diagnosePromise ul li{
	width: calc((100% - min(6%,80px)) / 3);
}
#diagnosePromise h4{
	font-size: 2rem;
}

#diagnoseFlow h4{
	gap: 0 20px;
}
#diagnoseFlow h4 .num{
	font-size: 6.2rem;
}
#diagnoseFlow h4:not(.num){
	font-size: 2.2rem;
}
#diagnoseFlow div.pcFlex{
	align-items: center;
}
#diagnoseFlow div.pcFlex figure{
	margin-right: 35px;
	width: 360px;
}
#diagnoseFlow div.pcFlex .txts{
	width: calc(100% - (360px + 35px));
}
#diagnoseFlow div.pcFlex + h4{
	margin-top: 30px;
}
#diagnoseFlow .captionImg figcaption{
	font-size: 1.8rem;
	width: 180px;
	height: 180px;
	left: -20px;
	top: -30px;
}
#diagnoseFlow .captionImg figcaption > span{
	font-size: 2.2rem;
}

	/* =======================================
	achievements PC
========================================== */
	#achievements .pageLinks.inner1100 li{
		width: calc((100% - 20px * 3) / 4);
	}
	#achievementsList >ul{
		flex-flow: row wrap;
		gap:40px 40px;
	}
	#achievementsList >ul li{
		width: calc((100% - 40px * 2) / 3);
	}
	
/* =======================================
	achievements detail PC
========================================== */
	.infolist dt{
		width: 15%;
		font-size: 18px;
	}
	.infolist dd{
		width: 35%;
		font-size: 18px;
	}

/* =======================================
  company PC
========================================== */
#companyMessage .pcFlex{
	justify-content: space-between;
}
#companyMessage .txts{
	width: 50%;
}
#companyMessage .txts h4{
	margin-bottom: 20px;
	font-size: min(2.32vw, 2.4rem);
}
#companyMessage figure{
	width: 44%;
}
#companyMessage .txts p{
	font-size: 18px;
}
#companyPhilosophy p{
	font-size: 1.8rem;
	text-align: center;
}

/* =======================================
  esg PC
========================================== */
#esgLead ul {
	justify-content: center;
	margin-top: 120px;
}
#esgLead ul li{
	border-radius: 30px;
	font-size: min(2vw,2.2rem);
	padding: 20px 30px 30px;
	width: 28%;
}
#esgLead ul li::before{
	top: -70px;
}
#esgLead ul li.esg01::before{
	width: 76px;
	height: 92px;
	left: calc(50% - 38px);
}
#esgLead ul li.esg02::before{
	width: 124px;
	height: 84px;
	left: calc(50% - 62px);
}
#esgLead ul li.esg03::before{
	width: 66px;
	height: 87px;
	left: calc(50% - 33px);
}
#esgLead .bgLLLorange p.bgW{
	padding: 30px;
}

#esgEnvironment .pcFlex,
#esgSocial .pcFlex,
#esgGovernance .pcFlex{
	justify-content: space-between;
	margin-top: 60px;
}
#esgEnvironment .pcFlex .txts,
#esgSocial .pcFlex .txts,
#esgGovernance .pcFlex .txts{
	padding: 30px;
	width:48%;
}
#esgEnvironment .pcFlex figure,
#esgSocial .pcFlex figure,
#esgGovernance .pcFlex figure{
	width:48%;
}
#esgLead .bgLLLorange{
	text-align: center;
}

/* =======================================
  recruit PC
========================================== */
#recruitCharm ul{
	justify-content: space-between;
}
#recruitCharm ul li{
	width: 30%;
}
#recruitEducation .pcFlex{
	justify-content: space-between;
	margin-top: 60px;
}
#recruitEducation .txts{
	width: 52%;
}
#recruitEducation figure{
	width: 44%;
}
/* =======================================
   PC
========================================== */

 
/* =======================================
	news PC
========================================== */
/*		一覧
-----------------------------*/
#news .pageLinks{
	padding: 35px 0 ;
	gap:15px 20px;
}
#news .pageLinks li{
	width: calc((100% - 20px * 4) / 5);
	height: 60px;
}

#newsList{
	padding-top: 30px !important;
}
.newsBox{
	margin-bottom: 40px;
	padding: 20px 25px;
}
.newsBox.pcFlex,
.newsBox a.pcFlex{
 justify-content: space-between;
 align-items: flex-start;
}
.newsBox figure{
 width: 30%;
}
.newsBox .txts{
 width: 66%;
}
.newsBox h4{
 font-size: 2rem;
}
.newsInfo .date{
	margin-right: 20px;
}

/*		single
-----------------------------*/
article{
 padding: 100px 0;
}
#newsDetail .newsInfo{
 margin-bottom: 20px;
}

/* =======================================
	contact. PC
========================================== */
#contactLead{
	padding-bottom: 100px;
}
#contactLead ul {
	justify-content: space-between;
}
#contactLead ul li{
	width: 31%;
}

/* =======================================
	form PC
========================================== */
.formArea .basicTable input[type=text],
.formArea .basicTable input[type=email],
.formArea .basicTable input[type=tel],
.formArea .basicTable select{
	padding: 8px;
	width:100%;
}
.formArea .basicTable textarea{
	padding: 8px;
	width: 100% !important;
}
.formArea .basicTable dt{
	width: 25%;
}
.formArea .basicTable dd{
	width: 75%;
}
.formArea #fRecruit[style^="display: block;"]{
 display: flex !important;
}
.formArea #fRecruit dt{
 flex-flow: column;
 align-items: flex-start;
}
.confirm {
		margin-top: 40px;
}
.formFoot{
 margin:40px 0 0;
}
.contactPrivacy a:hover{
	text-decoration: none;
}