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

	:root {
	--baseColor: #ef6a60;
	--ciColor: #254884;
	--accentColor: #b41f09;
	--subColor: #f2f2f2;
	--white: #fff;
	--yellow: #faee00;
	--gray: #505050;
	--pastelPink: #ffdcd9;
	}
	.containerAll{
	display: grid;
	grid-template-areas:
		"header header"
		"leftArea leftArea"
		"footer footer";
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	margin: 62px auto auto;
	}

	img {
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	}
	img.loaded {
	opacity: 1;
	}

	.marker {
    background:linear-gradient(transparent 50%, rgba(250, 238, 0) 50%);
    display: inline;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition:background-size 1.5s;
	}
	.marker.on {
	background-size: 100% 100%;
	}
	
	.header{
	grid-area: header;
	}
	.leftArea{
	grid-area: leftArea;
	}
	.rightArea{
	grid-area: rightArea;
	display: none;
	}
	.footer{
	grid-area: footer;
	}
	
	.headerImageArea{
	width: 100%;
	max-width: 430px;
	max-height: 394px;
	background-image: url("/wp-content/themes/wk_altpaper/img/eap/header-img-w430-02.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top center; /* 必要に応じて調整 */
	padding-bottom: calc(394 / 430 * 100%); /* 幅に対する高さの比率で padding-bottom を設定 */
	box-sizing: border-box;
	}
	.headerImageArea h1,
	.headerImageArea h2,
	.headerImageArea h3,
	.headerImageArea ul{
	display: none;
	}
	.contactBtnArea{
	padding: 2em 1em;
	background-color: var(--subColor);
	text-align: center;
	}
	.readTit{
	padding: 0.5em 0;
	color: var(--white);
	background-color: var(--baseColor);
	font-size: clamp(24px,3vw,42px);
	text-align: center;
	}
	.contactButtonWrap{
	justify-content: center;
	}
	.contactButtonWrap ul li{
	margin: 1em 0;
	width: 100%;
	}
	.contactButtonWrap a{
	box-sizing: border-box;
	display: block;
	padding: 1em 2em;
	width: 100%;
	border-radius: 100px;
	background-color: var(--baseColor);
	color: var(--white);
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	background-image: url("/wp-content/themes/wk_altpaper/lp/img-eap/mark-btn.png");
	background-position: 0.5em 50%;
	background-repeat: no-repeat;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
	}
	
	.readTxt{
	margin: auto;
	padding: 2em 1em;
	max-width: 896px;
	}
	.readTxt > p{
	font-size: clamp(14px,3vw,24px);
	line-height: 1.75em;
	}
	
	/*
	.moviePc {
	margin-bottom: 2em;
	text-align: center;
	}
	.moviePc iframe{
	width: clamp(100px,90%,640px);
	aspect-ratio: 16 / 9;
	}
	*/
	
	.moviePc {
  margin-bottom: 2em;
  text-align: center;
  /* 中央寄せのために、子要素がインラインブロックまたはブロック要素の場合は margin: 0 auto; も有効 */
}

/* iframe とファサード要素両方に共通のサイズとアスペクト比を適用 */
/* 既存の .moviePc iframe に加えて、.moviePc .youtube-facade も指定 */
.moviePc iframe,
.moviePc .youtube-facade {
  width: clamp(100px, 90%, 640px);
  /* height は aspect-ratio で自動計算されるため通常は不要 */
  aspect-ratio: 16 / 9;
  /* text-align: center の効果を受けさせるために、子要素をブロック要素にして中央に配置 */
  display: block;
  margin: 0 auto;
}

/* ファサード要素に特有のスタイル */
.moviePc .youtube-facade {
  position: relative; /* サムネイルとボタンを絶対配置するため */
  cursor: pointer;
  overflow: hidden; /* 子要素（サムネイル）がはみ出さないように */
  background-color: #000; /* ロード中の背景色など */
}

.moviePc .youtube-facade .youtube-thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* サムネイル画像が要素を覆うように */
  display: block;
  transition: opacity 0.3s ease; /* ホバーエフェクトなど */
}

.moviePc .youtube-facade .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 60px;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: none; /* ボタン自体がクリックを捕捉しないように（親の.youtube-facadeでクリックを検出） */
}

/* （オプション）ホバー時のエフェクト */
.moviePc .youtube-facade:hover .youtube-thumbnail {
  opacity: 0.8;
}

/* iframe が追加された後にファサード要素が削除されるため、iframe には既存の .moviePc iframe スタイルが適用されます */

	
	.priceColor{
		color: var(--accentColor);
		font-weight: bold;
	}
	.priceTit{
	padding: 0.5em;
	text-align: center;
	background-color: var(--baseColor);
	color: var(--white);
	font-size: clamp(24px,3vw,42px);
	}
	.priceArea{
	box-sizing: border-box;
	margin-bottom: 2em;
	padding: 1em;
	background-color: var(--pastelPink);
	}
	.priceList{
	box-sizing: border-box;
	margin: auto;
	padding: 0.5em;
	background-color: var(--white);
	width: 100%;
	max-width: 860px;
	}
	.priceList tr:nth-child(odd){
	background-color: var(--subColor);
	}
	.priceList td{
	padding: 0.5em;
	font-size: clamp(14px,3.5vw,18px);
	}
	.priceList td:first-child{
	border-right: solid 1px var(--gray);
	}
	.priceList td:nth-child(2){
	border-right: solid 1px var(--gray);
	text-align: right;
	}
	.priceList td:nth-child(3){
	border-right: solid 1px var(--gray);
	}
	.priceList td:nth-child(3),
	.priceList td:nth-child(4){
	text-align: right;
	}
	.titP{
	padding: 0.2em;
	background-color: var(--baseColor);
	color: var(--white);
	font-size: clamp(24px,3vw,42px);
	text-align: center;
	border-radius: 8px;
	}
	.featureTitArea{
	margin:4em auto 1em;
	position: relative;
	width: clamp(100px,90%,896px);
	}
	.featureIcon{
	position: absolute;
	left: 1em;
	top: 0;
	transform: translateY(-50%);
	width: clamp(24px,10%,116px);
	}
	.featureWrap{
	margin:0 auto 1em;
	width: clamp(100px,90%,896px);
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	}
	
	.featureBox{
	margin: 0 auto 1em;
	padding: 2em 1em 1em;
	background-color: var(--pastelPink);
	border-radius: 8px;
	position: relative;
	}
	.fOpt{
	position: absolute;
	top:0;
	right: 0;
	padding: 0.25em;
	background-color: var(--baseColor);
	color: var(--white);
	font-size: 14px;
	text-align: center;
	border-top-right-radius: 8px;
	border-bottom-left-radius: 8px;
	}
	.featureBox h3{
	margin-bottom: 0.5em;
	font-size: clamp(32px,3vw,36px);
	font-weight: bold;
	text-align: center;
	color: var(--gray);
	}
	.featureBox h4{
	font-size: clamp(14px,3vw,15px);
	line-height: 1.75em;
	text-align: center;
	}
	.featureBox ul li{
	font-size: clamp(14px,3vw,15px);
	line-height: 1.75em;	
	}
	.featureBox p{
	font-size: clamp(14px,3vw,15px);
	line-height: 1.75em;
	}
	
	.methodList{
	margin: auto auto 4em;
	width: clamp(100px,90%,864px);
	}
	.methodList ul{
	display: flex;
	}
	.methodList ul li{
	margin: auto 0.5em;
	}
	.clientLogoArea{
	padding: 5% 1em;
	background-image: linear-gradient(0deg, rgba(255, 232, 230, 1), rgba(255, 255, 255, 1) 15% 85%, rgba(255, 232, 230, 1));
	}
	.clientLogoList{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	}
	.clientLogoList li{
	margin: 0 0.5em;
	width: calc(25% - 1em);
	}
	
	.contactTit{
	margin-bottom: 0.5em;
	margin-left: auto;
	margin-right: auto;
	width: clamp(100px,90%,896px);
	text-align: center;
	color: var(--baseColor);
	font-size: clamp(24px,3vw,42px);
	font-weight: bold;
	}
	
	.blackT{
	font-size: 170%;
	}

	.companyInfoArea{
	margin: auto;
	padding: 1em;
	max-width: 960px;
	}
	.companyInfoArea > h2{
	margin-bottom: 1em;
	padding-bottom: 1em;
	font-size: clamp(12px,3.2vw,18px);
	font-weight: bold;
	text-align: center;
	border-bottom: solid 1px #999;
	}
	.companyInfoArea > h3{
	color: var(--ciColor);
	font-size: clamp(21px,4vw,24px);
	font-weight: bold;
	}
	.aboutUsWrap{
	margin-top: 1em;
	margin-bottom: 2em;
	display: flex;
	flex-wrap: nowrap;
	}
	.aboutUsWrap > div{
	margin-right: 1.5em;
	width: 20%;
	}
	.aboutUsWrap > p{
	width: 80%;
	font-size: clamp(12px,4vw,14px);
	}
	
	.companyTit{
	border-bottom: solid 1px #999;
	}
	.companyAddress,
	.compDlBox,
	.companyService{
	margin-top: 1em;
	padding-bottom: 1em;
	display: flex;
	border-bottom: solid 1px #999;
	}
	.companyAddress > dt,
	.compDlBox > dt,
	.companyService > dt{
	margin-right: 0.5em;
	width: 20%;
	font-size: clamp(12px,4vw,14px);
	}
	.companyAddress > dd,
	.compDlBox > dd,
	.companyService > dd{
	width: 80%;
	font-size: clamp(12px,4vw,14px);
	}
	.companyList > li > ul{
	margin-top: 1em;
	}
	.companyList > li > ul> li{
	margin-bottom: 1em;
	}
	.companyList > li > ul> li:last-of-type{
	margin-bottom: 0;
	}
	.companyServiceList > li{
	margin-bottom: 1em;
	}
	.companyServiceList > li:last-of-type{
	margin-bottom: 0;
	}
	
	.footer{
	padding: 1em;
	background-color: var(--pastelPink);
	text-align: center;
	font-size: 12px;
	}

/* RightForm */
.contentHeader{
padding: 0 !important;
}

@media (min-width: 431px) {/* 431px以上////////////////////////////// */
	.headerImageArea{
	max-width: 811px;
	max-height: 743px;
	background-image: url("/wp-content/themes/wk_altpaper/img/eap/header-img-w431-02.png");
	padding-bottom: calc(743 / 811 * 100%);
	}
	
	.contactButtonWrap ul{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	}
	
	.contactButtonWrap ul li{
	width: 45%;
	}

	.contactButton a{
	width: 80%;
	}

}

@media (min-width: 812px) {/* 812px以上////////////////////////////// */
	.headerImageArea{
	max-width: 1200px;
	max-height: 580px;
	background-image: url("/wp-content/themes/wk_altpaper/img/eap/header-img-w1200-02.png");
	padding-bottom: calc(580 / 1200 * 100%);
	}
	
	.contactButton a{
	width: 70%;
	}

	.featureBox{
	width: calc(50% - 3em);
	}


}

@media (min-width: 1200px) {/* 1200px以上////////////////////////////// */
	.containerAll{
	margin-top:90px;
	grid-template-areas:
		"header rightArea"
		"leftArea rightArea"
		"footer rightArea";
	grid-template-columns: 1fr 358px;
	grid-template-rows: auto auto;
	}

	.contactButton a{
	width: 60%;
	}

	.rTxt1{
	font-size: 2.7vw;
	}

	.rightArea{
	display: block;
	}
	
	#pardot_iframe{
	position: fixed;
	width: 358px;
	height: 90%;
	}
	
	#pardot_iframe iframe{
	height: 100%;
	}
	
}

@media (min-width: 1558px) {/* 1558px以上////////////////////////////// */
	.headerImageArea{
	max-width: 100%;
	height: 550px;
	background-color: #fffaf0;
	padding-bottom: 0;
	}
}