/* =========================================================
   メインスタイル定義
   ========================================================= */
html{
scroll-behavior: smooth;
scroll-padding-top: 4em;
}
/* --- 共通変数定義 --- */
:root {
	/* ヘッダーナビの高さ */
	--nav-height: 60px;
}

/* --- ベーススタイル --- */
body{
	background-color: #ebebeb;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	line-height: 1.75em;
	font-feature-settings: "palt";
	text-align: justify;
	letter-spacing: 0.045em;
}

/* --- グリッドエリア名の定義 --- */
.headerArea{grid-area: headerArea;}
.headerNav{grid-area: headerNav;}
.contentsArea{grid-area: contentsArea;}
.sideBarArea{grid-area: sideBarArea;}
.footerArea{grid-area: footerArea;}
.leftBarArea{grid-area: leftBarArea;}
.rightBarArea{grid-area: rightBarArea;}

.cb01{grid-area: cb01;}
.cb02{grid-area: cb02;}
.cb03{grid-area: cb03;}
.cb04{grid-area: cb04;}
.cb05{grid-area: cb05;}
.cb06{grid-area: cb06;}
.cb07{grid-area: cb07;}
.cb08{grid-area: cb08;}

/* --- コンテナ全体の設定 --- */
.containerAll{
	margin: auto;
	display: grid;
	background-color: #fff;
	
	/* スマホ用レイアウト */
	grid-template-areas: 
		"headerArea"
		"headerNav"
		"contentsArea"
		"sideBarArea"
		"footerArea";
	grid-template-columns: auto;
}

.linkArea a{
	color: #ef3434;
	text-decoration: none;
}

.linkArea a:hover{
	text-decoration: underline;
}

.ctaTitArea{
box-sizing: border-box;
margin-bottom: 1em;
padding: 1em;
background-color: #efefef;
text-align: center;
}

.ctaContainer{
	margin: auto;
	display: grid;
	grid-template-areas: 
	"cb01 cb01"
	"cb02 cb03"
	"cb04 cb05";
	grid-template-columns: 3fr 7fr;
	grid-template-rows: auto auto auto;
	align-items: center;
	gap: 1em;
}
.ctaArea h2,.ctaArea h3,.ctaArea h4{
font-weight: bold;
}
.ctaArea p{
font-size: 16px;
}
.bgBlue{
box-sizing: border-box;
padding: 0.1em 0.4em 0.2em;
font-size: 70%;
background-color: #254884;
color: #fff;
}
.cb01{
	margin-bottom: 0.5em;
	text-align: center;
}


.ctaContainer img {
    width: 100%;
    height: auto;
    display: block; /* 画像下の隙間消し */
}


.ctaContainer02{
	margin: 1em auto auto;
	padding-top: 1em;
	border-top: dotted 1px #666;
	display: grid;
	grid-template-areas: 
	"cb06 cb06"
	"cb07 cb08";
	grid-template-columns: 3fr 7fr;
	grid-template-rows: auto auto;
	align-items: center;
	gap: 1em;
}

.cb06{
text-align: center;
}

.ctaContainer03,.ctaContainer04{
	margin: 1em auto auto;
	padding-top: 1em;
	border-top: dotted 1px #666;
	text-align: center;
}

/* スマホでは左右バーを非表示 */
.leftBarArea, .rightBarArea {
	display: none;
}

/* --- ヘッダーナビ（上部固定設定） --- */
.headerNav{
	height: var(--nav-height);
	box-sizing: border-box;
	border-bottom: solid 4px #000;
	background-color: #fff;
	position: sticky;
	top: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.headerNav > ul{
	display: flex;
	justify-content: center;
}
.headerNav > ul li{
	padding: 0.5em;
	font-size: 14px;
	line-height: 1.5em;
}
.headerNav > ul li a{
	text-decoration: none;
	color: #254884;
	font-weight: bold;
}
.headerNav > ul li a:hover{
	opacity: 0.5;
}
.headerNav > ul li a::before{
	content: "▼";
	color: #ef3434;
	margin-right: 4px;
}

/* --- コンテンツエリア設定 --- */
.contentsArea{
	container-type: inline-size;
	container-name: mainContent;
	box-sizing: border-box;
	padding: 2em 2em 0;
}

/* --- コンテナクエリ --- */
@container mainContent (min-width: 640px){
	.contanerBox{
		box-sizing: border-box;
		padding: 0.5em;
		width: 49%;
		max-width: 428px;
		margin-bottom: 0;
	}

}

/* --- サイドバー（追従固定・可変高さ設定） --- */
.sideBarArea{
	background-color: transparent;
	padding-top: 2em;
}

/* ★ここが修正ポイント：サイドバーの中身を固定するための設定 */
.sideBarSticky {
	/* ヘッダーナビの高さ分ずらして固定 */
	position: sticky;
	top: var(--nav-height);
	
	/* 【重要】高さを「画面の高さ - ヘッダーの高さ - 余白」に固定します。
	  これにより、画面サイズに合わせてiframeの表示領域が決まります。
	  max-height ではなく height を使うことで、常に下までエリアを確保します。
	*/
	height: calc(100vh - var(--nav-height) - 20px);
	
	/* 中身（iframe）がこれより長い場合はスクロールバーを出す */
	overflow-y: auto;
	
	/* スクロールバーのデザイン調整（Chrome/Safari用・任意） */
	scrollbar-width: thin; 
}

/* ★iframeを親要素(.sideBarSticky)の高さに合わせる */
#pardot_iframe {
	height: 100%;
}
#pardot_iframe iframe {
	width: 100%;
	height: 100%;
	display: block; /* 隙間対策 */
}


/* --- コンテンツ内パーツのデザイン --- */
.scaBox{
	margin:auto auto 4em;
	padding: 1em;
	max-width:900px;
	box-sizing: border-box;
	background-color: #f5f5f5;
}

.scaBox02{
	margin:auto auto 4em;
	padding: 1em;
	width: 90%;
	max-width:876px;
	box-sizing: border-box;
	background-color: #f5f5f5;
}

.scaReadTxt{
	box-sizing: border-box; 
	padding: 1em; 
	background-color: #fff; 
	border: 2px solid transparent; 
	border-image-slice: 1; 
	border-image-source: linear-gradient(90deg,
			rgba(251, 207, 0, 1) 0%, 
			rgba(255, 252, 209, 1) 19%, 
			rgba(203, 155, 12, 1) 66%, 
			rgba(243, 225, 139, 1) 90%, 
			rgba(255, 252, 209, 1) 100%);
}

.scaTxt{
	margin-bottom: 1em;
	font-size: 18px;
	color: #333;
	font-weight: 900; 
}

.scaQuestion{
	margin: 2em auto 1em;
	padding: 0.5em;
	width: 90%;
	background-color: #254884;
	border-radius: 100px;
	color: #fff;
	font-weight: 900;
	text-align: center;
}

.blueBox{
	margin:auto auto 2em;
	padding: 1em;
	max-width:900px;
	box-sizing: border-box;
	background-color: #254884;
}

.blueBoxBorder{
	box-sizing: border-box; 
	padding: 1em; 
	background-color: #254884; 
	border: 1px solid transparent; 
	border-image-slice: 1; 
	border-image-source: linear-gradient(90deg,
			rgba(251, 207, 0, 1) 0%, 
			rgba(255, 252, 209, 1) 19%, 
			rgba(203, 155, 12, 1) 66%, 
			rgba(243, 225, 139, 1) 90%, 
			rgba(255, 252, 209, 1) 100%);
	color: #fff;
	text-align: center;
	font-size: 24px;
	font-weight: 800;
}

.doubleContainer{
	display: flex;
	flex-wrap: wrap;
	margin: auto auto 1em;
	width: 90%;
	max-width: 876px;
	justify-content: space-between;
}

.contanerBox{
	box-sizing: border-box;
	border: solid 1px #333;
	width: 100%; 
	margin-bottom: 1em;
}
.contanerBox > p{
	text-align: center;
	font-size: 16px;
}

.awardH3{
	background-color: #254884;
	color: #fff;
	text-align: center;
	font-weight: bold;
	padding: 0.5em;
}

.awardCompanyName{
	font-weight: bold;
}

.ctaArea{
	margin: auto auto 4em;
	padding: 0.5em;
	width: 90%;
	max-width:876px;
	box-sizing: border-box;
	border: solid 1px #666;
	color: #254884;
}



.ctaBtnArea{
	margin: 2em auto;
	width: 90%;
	text-align: center;
}
.ctaBtnArea a:hover{
	opacity: 0.5;
}

.tripleContainer{
	display: flex;
	flex-wrap: wrap; 
	margin: auto;
	width: 90%;
	justify-content: space-between;
}

.profileBox,.profileBox02{
	width: 100%; 
	margin-bottom: 2em;
}

.profileBox > h3,.profileBox02 > h3{
	background-color: #254884;
	color: #fff;
	text-align: center;
	font-weight: bold;
	padding: 0.5em;
}

.profileBox > p,.profileBox02 > p,.profileBox > ul li,.profileBox02 > ul li{
	font-size: 14px;
}
.profileBox > ul li,.profileBox02 > ul li{
	margin-bottom: 0.5em;
	line-height: 1.5em;
}
.profileBox > p:first-of-type,.profileBox02 > p:first-of-type{
	font-weight: bold;
	border-bottom: solid 1px #666;
}

.companyInfoArea{
	padding: 1em;
	margin: auto;
	max-width: 1200px;
}
.companyInfoArea > h2{
	margin-bottom: 1em;
	padding: 1em 0;
	font-size: clamp(12px,3.2vw,18px);
	font-weight: bold;
	text-align: center;
	border-bottom: solid 1px #999;
	background-color: #eee;
}
.companyInfoArea > h2 + h3{
	margin-bottom: 0.5em;
}
.companyInfoArea > h3{
	border-bottom: solid 1px #999;
	color: var(--ciColor);
	font-size: clamp(18px,2vw,24px);
	font-weight: bold;
}
.aboutUsWrap{
	margin-bottom: 2em;
	display: flex;
	flex-wrap: nowrap;
}
.aboutUsWrap > div{
	margin-right: 0.5em;
	width: 20%;
}
.aboutUsWrap > p{
	width: 80%;
	font-size: clamp(12px,4vw,14px);
}

.companyTit{
	margin-bottom: 0.5em;
	border-bottom: solid 1px #999;
	font-size: clamp(18px,2vw,24px);
}
.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(--baseColor);
	text-align: center;
	font-size: 12px;
}
.footerArea {
	background-color: #fff; 
}

/* 画像レスポンシブ対応 */
img {
	/* reset.css対策 */
	/* vertical-align: bottom; */
}

.scaCopyright{
margin-top: 1em;
padding: 0.5em;
background-color: #254884;
color: #fff;
text-align: center;
font-size: 12px;
}

/* --- メディアクエリ PC (640px以上) --- */
@media (min-width:640px){
	.containerAll{
		grid-template-areas: 
			"leftBarArea headerArea   rightBarArea"
			"leftBarArea headerNav    rightBarArea"
			"leftBarArea contentsArea rightBarArea"
			"leftBarArea sideBarArea  rightBarArea"
			"leftBarArea footerArea   rightBarArea";
		grid-template-columns: 64px 1fr 64px;
	}

	.contentsArea{
		padding: 2em;
	}
	
	.leftBarArea,.rightBarArea{
		display: block; 
		background-image: url("/wp-content/themes/wk_altpaper/award/lp/side-award.png");
		background-repeat: repeat-y;
	}

	.doubleContainer{
		flex-wrap:nowrap;
		width: 90%;
		max-width: 876px;
		justify-content: space-between;
	}


.ctaContainer{
	margin: auto;
	display: grid;
	grid-template-areas: 
	"cb01 cb02 cb03"
	"cb01 cb04 cb05";
	grid-template-columns: 4fr 2fr 4fr;
	grid-template-rows: auto auto;
	align-items: center;
	gap: 2em;
}

.cb01{width: 100%;}

.ctaContainer02{
	margin: 1em auto auto;
	padding-top: 1em;
	border-top: dotted 1px #666;
	display: grid;
	grid-template-areas: 
	"cb06 cb07 cb08";
	grid-template-columns: 4fr 2fr 4fr;
	grid-template-rows: auto;
	align-items: center;
	gap: 1em;
}


	.headerNav > ul{
		display: flex;
		flex-wrap: nowrap;
	}
	.headerNav > ul li{
	padding: 0.5em;
	font-size: clamp(14px,1.5vw,24px);
	line-height: 1.5em;
}

	.contanerBox{
		width: 49%; 
	}

	.profileBox{ width: 32%; }
	.profileBox02{ width: 49%; }
}

/* --- メディアクエリ Wide PC (1280px以上) --- */
@media (min-width:1280px){
	.containerAll{
		max-width: 1440px;
		grid-template-areas: 
			"leftBarArea headerArea   headerArea  rightBarArea"
			"leftBarArea headerNav    headerNav   rightBarArea"
			"leftBarArea contentsArea sideBarArea rightBarArea"
			"leftBarArea footerArea   footerArea  rightBarArea";
		grid-template-columns: 64px 1fr 358px 64px;
	}
}