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

.sans-serif{
font-family: "Noto Sans JP", sans-serif;
font-weight: 600;
}

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

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

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

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

.indexList li a{
color: var(--baseBlue);
text-decoration: none;
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 a:hover{
color: var(--redColor);
}

.indexList > li ul li ul li {
padding-left: 1em;
}

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

.h3Box{
box-sizing: border-box;
margin: auto;
padding: 1em;
background-image: url("/wp-content/themes/wk_altpaper/ss/lp-img/h3bg.svg");
background-repeat: no-repeat;
background-size: 100% 100%;
border: solid 4px var(--baseBlue);
text-align: center;
}

.h3Box > h3{
font-size: clamp(18px, 2vw,21px);
font-weight: bold;
color: var(--baseBlue);
}

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

.esTxt{
margin: 2em auto;
width: 90%;
line-height: 2em;
text-align: justify;
font-feature-settings: "palt";
font-family: "Noto Serif JP";
}

.surveyWrap{
margin: 2em auto;
width: 90%;
display: grid;
gap: clamp(1em, 2.5vw, 2em);
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.surveyBox{
background-color: #f1f7f9;
}

.h4Wrap{
box-sizing: border-box;
padding: 0.2em 0;
background-color: var(--baseBlue);
}

.h4Wrap > h4{
box-sizing: border-box;
padding: 0.3em 0;
color: #ffe680;
text-align: center;
border-left: solid 4px #fff;
border-right: solid 4px #fff;
font-weight: 600;
}

.surveyBox > p{
margin: 0.5em;
font-size: clamp(14px,2vw,16px);
font-family: "Noto Serif JP";
line-height: 1.75;
font-feature-settings: "palt";
}

.type4{
margin: 2em auto;
width: 90%;
}

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

.surveyCtaBox{
margin: 2em auto;
padding: 1em;
box-sizing: border-box;
border: solid 8px #e6e6e6;
width: 90%;
}


.ctaLeft{
text-align: center;
width: 100%;
}

.ctaRight > p{
margin-top: 1em;
margin-bottom: 1em;
font-size: clamp(14px,2vw,17px);
font-family: "Noto Serif JP";
line-height: 1.75;
font-feature-settings: "palt";
}

.ctaRight > h3{
box-sizing: border-box;
margin-bottom: 1em;
padding: 0.5em;
background-color: #e6e6e6;
color: var(--baseBlue);
font-weight: 600;
text-align: center;
border-radius: 100px;
}

.surveyHikaku{
font-size: clamp(14px,2vw,16px);
text-align: center;
}
.surveyHikaku li{
border-bottom: dotted 1px #999;
padding: 0.5em 0;
}
.surveyHikaku li:last-of-type{
border-bottom: none;
padding-bottom: 0;
}

.surveyJujitsu{
box-sizing: border-box;
margin: 2em auto;
padding: 1em;
width: 90%;
max-width: 832px;
border: solid 1px var(--baseBlue);
display: flex;
flex-wrap: wrap;
background-color: #f1f7f9;
}

.surveyJujitsu > dt{
padding: 0.5em 0;
width: 30%;
background-color: var(--baseBlue);
color: #fff;
text-align: center;
border-bottom: solid 1px #fff;
}
.surveyJujitsu > dt:last-of-type{
border-bottom: solid 1px var(--baseBlue);
}
.surveyJujitsu > dd{
box-sizing: border-box;
padding: 0.5em 0.5em 0.5em 1em;
width: 70%;
border-bottom: solid 1px var(--baseBlue);
}

.h3Wrap h3{
padding-left: 1em;
font-size: clamp(18px,2.5vw,24px);
font-weight: 900;
color: var(--baseBlue);
}

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

.serviceTit{
box-sizing: border-box;
margin: 2em auto 1em;
padding: 1em;
background-color: var(--baseBlue);
color: #fff;
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;
}

.descWrap{
margin: 2em auto;
width: 90%;
}

.descLeft{
margin-right: auto;
margin-left: auto;
margin-bottom: 2em;
width: 100%;
text-align: center;
}
.descRight{
width: 100%;
}
.descRight > p{
font-size: clamp(14px,2vw,17px);
font-family: "Noto Serif JP";
line-height: 1.75;
}

.outboundLink{
margin: 2em auto 4em;
width: 90%;
max-width: 840px;
}
.outboundLink a{
box-sizing: border-box;
padding: 1em 2em;
display: block;
border:solid 4px #b60000;
border-radius: 800px;
text-align: center;
text-decoration: none;
font-feature-settings: "palt";
transition: 0.1s;
}

.outboundLink a:hover{
opacity: 0.5;
}

.outboundLink a > span{
padding-left: 1em;
background-image: url("/wp-content/themes/wk_altpaper/ss/lp-img/mark-right.png");
background-repeat: no-repeat;
background-position:  center left;
}

.descTxt{
margin: 2em auto;
width: 90%;
font-size: clamp(14px,2vw,17px);
font-family: "Noto Serif JP";
line-height: 1.75;
}

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

.ctaBtnArea{
margin-top: 1em;
border-top: solid 4px #e6e6e6;
}

.ctaBtn02{
box-sizing: border-box;
margin: 2em auto 1em;
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);
transition: 0.1s;
}
.ctaBtn02 a:hover{
opacity: 0.5;
}

.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: #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-color: #ffd500;
	color: #b60000;
	border-radius: 8px;
	box-shadow: 0px 3px 6px 3px #959f9e;
	text-decoration: none;
	font-size: clamp(10px,2vw,20px);
	font-feature-settings: "palt";
	font-weight: 800;
	transition: background-color 0.1s;
	}
	.topBtnBox a:hover{
	background-color: #b60000;
	color: #fff;
	
	}
	.topBtnBox a > span{
	font-size: 180%;
	}

	.headerRead-01{
	box-sizing: border-box;
	margin: auto auto 1em;
	padding: 2em 1em;
	max-width: 1200px;
	text-align: center;
	}
	
	.headerRead-01 > h2{
	font-weight: 900;
	font-size: clamp(18px,3vw,36px);
	color: var(--baseBlue);
	}
	
	.headerRead-02{
	box-sizing: border-box;
	margin: auto;
	padding: 1em;
	background-color: #f1f7f9;
	max-width: 1200px;
	}
	.headerRead-02 > p{
	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(--baseBlue);
	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(--baseBlue);
	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;
	}
	.dlBox dl{
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	}
	.dlBox dl > dt{
	margin-bottom: 0.5em;
	width: 20%;
	background-color: var(--baseBlue);
	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以上/////////////////// */

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

	.ctaWrap{
	display: flex;
	}

	.ctaLeft{
	margin-right: 1em;
	width: 100%;
	max-width: 360px;
	}

	.ctaRight > p{
	margin-top: 0;
	}

	.surveyHikaku{
	display: flex;
	font-size: clamp(12px,2vw,14px);
	justify-content: center;
	}
	.surveyHikaku li{
	border-bottom: none;
	}
	.surveyHikaku li::after{
	content: "｜";
	}
	.surveyHikaku li:last-of-type::after{
	content: "";
	}


}
@container (min-width: 600px){/* contentsAreaが600px以上/////////////////// */
	.descWrap{
	display: flex;
	}
	.descLeft{
	margin-right: 1em;
	width: 100%;
	max-width: 300px;
	}
	.descRight{
	width: calc(100% - 300px - 1em);
	}
	.descRight > p{
	font-size: clamp(14px,2vw,17px);
	font-family: "Noto Serif JP";
	line-height: 1.75;
	}
	.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,
	.esTxt,
	.surveyWrap,
	.type4,
	.surveyCtaBox,
	.serviceTit,
	.serviceTxt,
	.descWrap,
	.descTxt,
	.salesWrap,
	.salesH5,
	.matomeTxt,
	.serviceTable,
	.salesImg,
	.salesTxt,
	.pointList,
	.pointTxt,
	.exampleWrap{
	max-width: 960px;
	}
	
	.indexArea{
	padding: 2em;
	}
	
	.roundH2{
	max-width: 1200px;
	}
	
	.bH3,
	.h3Box,
	.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;
	}

}