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

.headerH1{
color: var(--emeraldBlue);
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(--emeraldBlue);
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: #fff;
text-align: center;
}
.indexArea{
margin: 3em auto;
padding: 1em;
width: 90%;
box-sizing: border-box;
border: solid 4px var(--emeraldDarkBlue);
}

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

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

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

.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 0.5em;
}

.indexList > li ul li {
margin-top: 1em;
}

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

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

.readTxt2Wrap,
.sangyouiTxt02Wrap{
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(--emeraldDarkBlue);
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(--emeraldDarkBlue);
color: var(--emeraldDarkBlue);
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;
}

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

.scH4{
margin-bottom: 1em;
padding: 0.5em;
background-color: var(--emeraldBlue);
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;
}

.houkaiseiTxtAfter{
box-sizing: border-box;
margin: auto;
padding: 1em 0;
width: 85%;
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: 2em 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: #e0fffd;
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(--emeraldBlue);
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;
}

	.exampleWrap{
	display: flex;
	margin: auto;
	max-width: 90%;
	}
	.exampleWrap > div{
	box-sizing: border-box;
	padding: 1px;
	width: 100%;
	border: solid 1px #000;
	text-align: center;
	}
	.exampleWrap > div.eBox02{
	border-left: none;
	border-right: none;
	}
	.exampleWrap > div h3{
	margin-bottom: 0.5em;
	padding: 0.2em;
	background-color: var(--orange);
	font-size: 90%;
	}
	.exampleWrap > div p{
	font-size: 80%;
	line-height: 2em;
	font-feature-settings: "palt";
	}
	.exampleWrap > div p img{
	display: inline-block;
	margin-top: 0.5em;
	}
	.exampleWrap p.rBox{
	margin: 1em auto;
	padding: 0.5em;
	width: 80%;
	background-color: var(--emeraldBlue);
	color: #fff;
	border-radius: 100px;
	}
	
	.dlBox{
	box-sizing: border-box;
	margin: auto;
	padding: 1em 1em 0;
	border: solid 1px #000;
	width: 85%;
	max-width: 960px;
	}
	
	.dlH3{
	margin-bottom: 1em;
	padding: 1em;
	background-color: var(--emeraldDarkBlue);
	color: #fff;
	text-align: center;
	font-weight: bold;
	}
	
	.dlBox ul li{
	text-align: center;
	margin-bottom: 0.5em;
	padding-bottom: 0.5em;
	border-bottom: dotted 1px #000;
	}

.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);
}

.ctaBtn02{
box-sizing: border-box;
margin: 3em auto;
width: 80%;
max-width: 600px;
text-align: center;
}
.ctaBtn02 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), rgba(182, 0, 0, 1));
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(--emeraldBlue);
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: #fff6f2;
}
.sankou ul li a::before{
content: url("/wp-content/themes/wk_altpaper/img/sangyoui/listmark-right.png");

}

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

.authorProfile{
margin: 2em auto;
width: 85%;
}

.authorProfile p{
font-feature-settings: "palt";
line-height: 1.75em;
text-align: justify;
}

.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;
}


	.topBtnBox{
	margin: 1em auto;
	width: 90%;
	white-space:nowrap;
	}
	.topBtnBox a{
	box-sizing: border-box;
	display: block;
	padding: 0.5em;
	background-image: linear-gradient(0deg, rgba(92, 0, 0, 1), rgba(182, 0, 0, 1));
	color: #fff;
	border-radius: 8px;
	box-shadow: 0px 3px 6px 3px #959f9e;
	text-decoration: none;
	font-size: clamp(10px,2vw,21px);
	font-weight: 800;
	}
	.topBtnBox a > span{
	font-size: 180%;
	}
	
	.headerRead{
	box-sizing: border-box;
	margin: auto;
	padding: 2em 1em 1px;
	background-color: #e0fffd;
	max-width: 1200px;
	}
	.headerRead > p{
	margin-bottom: 1.75em;
	line-height: 1.75em;
	text-align: justify;
	font-feature-settings: "palt";
	}
	
	.sangyouiTable{
	box-sizing: border-box;
	margin: 2em auto;
	width: 90%;
	max-width: 960px;
	}
	.sangyouiTable td,.sangyouiTable th{
	box-sizing: border-box;
	padding: 1em;
	border: solid 1px #000;
	}
	.sangyouiTable td{
	text-align: center;
	}
	
	.tableHeader01{
	background-color: var(--emeraldDarkBlue);
	color: #fff;
	text-align: center;
	}
	
	.sangyouiPoint{
	margin: 2em auto;
	width: 90%;
	max-width: 960px;
	display: flex;
	flex-wrap: wrap;
	border-bottom: solid 1px #000;
	border-right: solid 1px #000;
	}
	.sangyouiPoint > dt{
	width: 30%;
	background-color: var(--emeraldBlue);
	color: #fff;
	}
	.sangyouiPoint > dd{
	width: 70%;
	}
	.sangyouiPoint > dt,.sangyouiPoint > dd{
	box-sizing: border-box;
	padding: 0.5em;
	border-top: solid 1px #000;
	border-left: solid 1px #000;
	}
	.spBox{
	box-sizing: border-box;
	margin: 2em auto;
	padding: 1em;
	width: 90%;
	max-width: 960px;
	background-color: #e0fffd;
	}
	.dlBox dl{
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	}
	.dlBox dl > dt{
	margin-bottom: 0.5em;
	width: 20%;
	background-color: var(--emeraldBlue);
	text-align: center;
	align-items: center;
	align-content: center;
	}
	.dlBox dl > dd{
	margin-bottom: 0.5em;
	padding-left: 0.5em;
	width: calc(80% - 0.5em);
	}
	.teikeiList > li{
	border-bottom: dotted 1px #000;
	margin-bottom: 0.5em;
	padding-bottom: 0.5em;
	}


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

/* フッタCSS */

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

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

}
@container (min-width: 481px){/* contentsAreaが480px以上/////////////////// */
	.headerImageArea{
	position: relative;
	max-width: 1200px;
	margin: auto;
	}
	.topBtnBox{
	position: absolute;
	bottom: 1em;
	right: 1em;
	width: 50%;
	}

}
@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,
	.sangyouiTxt,
	.sangyouiTxt02Wrap,
	.serviceTit,
	.serviceTxt,
	.salesWrap,
	.salesH5,
	.matomeTxt,
	.houkaiseiTxt,
	.houkaiseiTxtAfter,
	.kouroushoTxt,
	.serviceTable,
	.salesImg,
	.salesTxt,
	.pointList,
	.pointTxt,
	.typeTable,
	.meritWrap,
	.meritTxt,
	.exampleWrap{
	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;
	}

}