@charset "utf-8";
/* CSS Document */

.headerH1{
color: var(--baseBlue);
font-size: clamp(12px,2.5vw,21px);
font-feature-settings: "palt";
}
.headerH1::before{
margin: auto auto auto 1em;
content: "PR";
padding: 0.1em 1em;
background-color: var(--baseBlue);
color: var(--whiteColor);
font-size: clamp(8px,2.5vw,12px);
}

/* コンテンツCSS */
.contentsArea{
font-size: clamp(14px,2.5vw,18px);
}

.contentsArea a{
color: var(--redColor);
}

.contentsArea a:hover{
opacity: 0.5;
}

.headerImageArea{
width: 100%;
background-color: #eef0f3;
text-align: center;
}
.indexArea{
margin: 3em auto;
padding: 1em;
width: 90%;
box-sizing: border-box;
border: solid 4px var(--baseBlue);
}

.indexWrap{
display: flex;
align-items: center;
}

.indexWrap hr{
width: 40%;
height: 0;
border: 0;
border-top: 1px solid var(--baseBlue);
border-bottom: 4px solid var(--baseBlue);
}

.indexWrap h2{
font-size: clamp(18px,2.5vw,36px);
font-weight: 800;
color: var(--baseBlue);
}

.indexList {
margin: 1em;
}

.indexList li{
margin-bottom: 1em;
padding-left: 1em;
background-image: url("/wp-content/themes/wk_altpaper/img/hikaku/listmark-01.png");
background-repeat: no-repeat;
background-position: left 50%;
}

.indexList li a{
color: var(--baseBlue);
text-decoration: none;
}

.indexList li a:hover{
color: var(--redColor);
}

.readTxt{
margin: auto;
padding: 1em;
background-color: #fef6e5;
width: 90%;
box-sizing: border-box;
line-height: 2em;
}

.readTxt2Wrap,
.stressCheckTxt02Wrap{
margin: 3em auto;
display: flex;
width: 90%;
}

.rtl,.scl{
margin-right: 1em;
width: 100px;
}

.rtr,.scr{
width: calc(100% - 100px - 1em);
line-height: 2em;
}

.rtrLi li{
padding-left: 1.5em;
background-image: url("/wp-content/themes/wk_altpaper/img/hikaku/checkmark.png");
background-repeat: no-repeat;
background-position: left 50%;
}

.roundH2{
margin: 3em auto 1em;
padding: 0.5em;
width: 95%;
background-color: var(--baseBlue);
color: var(--whiteColor);
text-align: center;
font-size: clamp(18px,2.5vw,36px);
font-weight: 800;
border-radius: 100px;
}

.bH3{
margin: 2em auto;
padding: 0.5em;
box-sizing: border-box;
border: solid 1px var(--baseBlue);
color: var(--baseBlue);
width: 90%;
text-align: center;
font-weight: 900;
font-size: clamp(18px,2.5vw,24px);
}

.stressCheckFlow{
margin: auto;
width: 85%;
}

.kourousho{
margin: 1em auto;
width: 90%;
text-align: center;
}

.stressCheckTxt{
margin: auto;
width: 90%;
line-height: 2em;
text-align: justify;
}

.scH4{
margin-bottom: 1em;
padding: 0.5em;
background-color: var(--baseBlue);
color: var(--whiteColor);
text-align: center;
border-radius: 8px;
}

.redH3{
margin: auto auto 1em;
padding: 1em;
box-sizing: border-box;
width: 90%;
border: solid 4px var(--redColor);
border-radius: 8px;
color: var(--redColor);
font-family: "Noto Serif JP";
font-weight: 600;
text-align: center;
}

.houkaiseiTxt{
box-sizing: border-box;
margin: auto;
padding: 1em 1.5em;
width: 85%;
background-color: #ffe680;
line-height: 2em;
font-feature-settings: "palt";
text-align: justify;
}

.kouroushoTxt{
box-sizing: border-box;
margin: auto;
padding: 1em 1.5em;
width: 85%;
background-color: #e9edf3;
}
.kouroushoTxt > p:first-of-type{
margin-bottom: 1em;
}
.kouroushoTxt > p{
line-height: 2em;
font-feature-settings: "palt";
text-align: justify;
}

.meritWrap{
margin: 3em auto;
display: flex;
width: 90%;
}

.meritL{
margin-right: 1em;
width: 100px;
}

.meritR{
width: calc(100% - 100px - 1em);
line-height: 2em;
}

.meritTxt{
margin: auto;
width: 90%;
}

.meritTxt > p{
line-height: 2em;
text-align: justify;
font-feature-settings: "palt";
}

.meritTxt > p:first-of-type{
margin-bottom: 1em;
}

.pointTxt{
margin: auto auto 1em;
width: 90%;
text-align: center;
line-height: 2em;
}

.pointList{
box-sizing: border-box;
margin: 1em auto;
padding: 1em 1.5em;
width: 90%;
background-color: #eef0f3;
}

.pointList .rtrLi li{
margin-bottom: 1em;
}
.pointList .rtrLi li:last-of-type{
margin-bottom: auto;
}

.typeTable{
margin: auto;
width: 90%;
border-top: solid 1px var(--black);
border-left: solid 1px var(--black);
}
.typeTable td{
border-right: solid 1px var(--black);
border-bottom: solid 1px var(--black);
vertical-align: top;
}
.typeTable td > h3{
padding: 0.5em;
border: solid 4px var(--whiteColor);
background-color: var(--orange);
text-align: center;
}
.typeTable td > h3 + p{
padding: 0.5em 1em 1em;
font-feature-settings: "palt";
text-align: justify;
line-height: 2em;
}

.h3Wrap{
margin: 2em auto;
box-sizing: border-box;
display: flex;
border: solid 1px var(--black);
align-items: center;
width: 90%;
}

.h3Wrap,.h3Wrap h3{
font-size: clamp(18px,2.5vw,24px);
font-weight: 900;
}

.h3Wrap > div{
padding: 0.5em 1em;
background-color: var(--black);
color: var(--whiteColor);
border: solid 1px var(--whiteColor);
}

.serviceTit{
box-sizing: border-box;
margin: 2em auto 1em;
padding: 1em;
background-color: var(--orange);
width: 85%;
}

.serviceTable{
margin: auto;
border-top: solid 1px var(--black);
border-left: solid 1px var(--black);
font-weight: normal;
}

.serviceTable th,.serviceTable td{
padding: 1em;
border-right: solid 1px var(--black);
border-bottom: solid 1px var(--black);
}

.serviceTxt{
box-sizing: border-box;
margin: 1em auto;
width: 85%;
text-align: justify;
font-feature-settings: "palt";
line-height: 2em;
}

.ctaBtn{
box-sizing: border-box;
margin: 3em auto;
width: 80%;
max-width: 600px;
text-align: center;
}
.ctaBtn a{
box-sizing: border-box;
display: block;
padding: 0.5em;
color: var(--whiteColor);
border-radius: 8px;
background: url("/wp-content/themes/wk_altpaper/img/hikaku/btinmark-01.png"),linear-gradient(0deg,rgba(92, 0, 0, 1) 0%, rgba(182, 0, 0, 1) 100%);
background-repeat: no-repeat;
background-size: 4%,cover;
background-position: 95% 50%;
box-shadow: 0px 6px 10px 0px #c2c2c2;
text-decoration: none;
font-weight: 900;
font-size: clamp(13px,2.5vw,21px);
}

.salesWrap{
display: flex;
margin: auto;
width: 85%;
}

.salesWrap p{
box-sizing: border-box;
margin: 1em auto;
padding: 1em;
width: 45%;
background-color: var(--baseBlue);
color: var(--whiteColor);
text-align: center;
border-radius: 8px;
}

.salesTit{
margin: auto;
text-align: center;
color: var(--redColor);
font-family: "Noto Serif JP";
font-size: clamp(21px,2.5vw,48px);
}

.salesH5{
box-sizing: border-box;
margin: 2em auto 1em;
width: 85%;
border-bottom: solid 4px var(--redColor);
font-size: 21px;
font-weight: 800;
}

.salesTxt{
box-sizing: border-box;
margin: 1em auto;
width: 85%;
text-align: justify;
line-height: 2em;
font-feature-settings: "palt";
}

.salesImg{
box-sizing: border-box;
margin: auto;
border: solid 1px #999;
width: 85%;
}

.matomeTxt{
box-sizing: border-box;
margin: 1em auto;
width: 85%;
line-height: 2em;
font-feature-settings: "palt";
text-align: justify;
}

.sankou{
box-sizing: border-box;
margin: 1em auto;
width: 85%;
line-height: 2em;
background-color: #eef0f3;
}

.sankou h3{
box-sizing: border-box;
padding: 0.5em;
background-color: #5b6f89;
color: var(--whiteColor);
text-align: center;
font-weight: 800;
}

.pageTop{
	margin-right: 0;
	position: fixed;
	bottom: 50px;
	right: 0;
	background-color: var(--redColor);
	border-radius: 4px;
}
.pageTop a{
	display: block;
	padding: 0.5em;
	color: #fff;
	font-size:12px;
	text-align: center;
	text-decoration: none;
}

/* //コンテンツCSS/////////////// */

/* フッタCSS */

/* //フッタCSS/////////////// */

@container (min-width: 320px){/* contentsAreaが320px以上/////////////////// */
	.redH3{
	font-size: clamp(18px,2.5vw,36px);
	}

}
@container (min-width: 480px){/* contentsAreaが480px以上/////////////////// */

}
@container (min-width: 600px){/* contentsAreaが600px以上/////////////////// */
	.rtl,.scl{
	margin-right: 1em;
	width: 215px;
	}

	.rtr,.scr{
	width: calc(100% - 215px - 1em);
	line-height: 2em;
	}

	.meritL{
	margin-right: 1em;
	width: 160px;
	}

	.meritR{
	width: calc(100% - 160px - 1em);
	line-height: 2em;
	}

}
@container (min-width: 960px){/* contentsAreaが960px以上/////////////////// */
}

@media (min-width: 1200px) {/* ウィンドウサイズ1200px以上////////////////////////////// */
	.indexArea,
	.readTxt,
	.readTxt2Wrap,
	.stressCheckFlow,
	.kourousho,
	.stressCheckTxt,
	.stressCheckTxt02Wrap,
	.serviceTit,
	.serviceTxt,
	.salesWrap,
	.salesH5,
	.matomeTxt,
	.houkaiseiTxt,
	.kouroushoTxt,
	.serviceTable,
	.salesImg,
	.salesTxt,
	.pointList,
	.pointTxt,
	.typeTable,
	.meritWrap,
	.meritTxt{
	max-width: 960px;
	}
	
	.indexArea{
	padding: 2em;
	}
	
	.roundH2{
	max-width: 1200px;
	}
	
	.bH3,
	.redH3,
	.h3Wrap{
	max-width: 1072px;
	}
	
	.pageTop{
	margin-right: 359px;
	position: fixed;
	bottom: 50px;
	right: 0;
	background-color: var(--redColor);
	border-radius: 4px;
	}
	.pageTop a{
	display: block;
	padding: 0.5em;
	color: #fff;
	font-size:12px;
	text-align: center;
	text-decoration: none;
	}

}