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

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

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

.visibilityHidden{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.headerMenuArea{
	box-sizing: border-box;
	padding: 6px;
	background-color: #fff;
	position: sticky;
	top: 0;
	z-index: 999999;
}
.wrapHeader{
	display: flex;
}
.wrapHeader div{
	width: 100%;
	align-content: center;
}
.logoArea {
	max-width: 30%;
}
.menuArea{
	max-width: 70%;
}
.logoArea img{
	width: 100%;
	max-width: 250px;
}
.menuArea > ul{
	display: block;
	justify-content: flex-end;
}
.menuArea > ul > li{
	margin-left: 1em;
}
.menuArea > ul > li > a{
	text-decoration: none;
	display: block;
	box-sizing: border-box;
	color: #fff;
	text-align: center;
	border-radius: 1000px;
	font-size: 14px;
	font-weight: bold;
}
.menuArea > ul > .menu01 > a{
	box-sizing: border-box;
	background-color: #f2a900;
	margin-bottom: 0.5em;
	padding: 0.1em 2em;
	font-size: 14px;
}
.menuArea > ul > .menu02 > a{
	box-sizing: border-box;
	background-color: #254a84;
	padding: 0.1em 2em;
	font-size: 14px;
}

.imageArea img{
	width: 100%;
}

.hsImg{
 text-align: center;
}
.readTxt{
	box-sizing: border-box;
	padding: 40px;
	text-align: center;
	font-size: clamp(24px,2.5vw,48px);
	font-weight: 900;
	color: #0abab5;
}

.partnerMerit{
	box-sizing: border-box;
	padding: 40px 1em;
	background-color: #0abab5;
}
.headTxt03a{
	margin-bottom: 40px;
	text-align: center;
	color: #fff;
	font-size: clamp(18px,2.5vw,36px);
	font-weight: bold;
}

.twoBoxWrap{
	margin: auto;
	max-width: 1200px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.twoBoxWrap div{
	box-sizing: border-box;
	margin-bottom: 20px;
	padding: 0.5em;
	width: 100%;
	max-width: 580px;
	background-color: #fff;
	text-align: center;
}
.twoBoxWrap div > p{
	box-sizing: border-box;
	padding: 1em 0;
	border: solid 2px #0abab5;
	font-size: clamp(18px,2.5vw,36px);
	font-weight: bold;
	line-height: 1.5em;
	color: #f2a900;
}

.liteMerit{
	box-sizing: border-box;
	padding: 40px 0;
	background-image: url("/wp-content/themes/wk_altpaper/sc-lite/lp-img/bg-cloud.png");
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: cover;
}
.headTxt03b{
	margin-bottom: 40px;
	text-align: center;
	color: #0abab5;
	font-size: clamp(18px,2.5vw,36px);
	font-weight: bold;
}

.liteMeritWrap{
	margin: auto;
	max-width: 1200px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.lmBox{
	margin: auto auto 24px;
	box-sizing: border-box;
	width: 90%;
	background-color: #fff;
	border: solid 1px #0abab5;
	border-bottom: solid 4px #0abab5;
	text-align: center;
}
.lmBox > h4{
	box-sizing: border-box;
	padding: 1em;
	background-color: #0abab5;
	color: #fff;
	font-weight: bold;
	font-size: clamp(18px,2.5vw,21px);
}
.lmBox > p{
	padding: 1em;
	font-size: clamp(14px,2.5vw,18px);
	line-height: 1.5em;
}

.chartArea{
	box-sizing: border-box;
	padding: 20px 0;
}
.caTit{
	box-sizing: border-box;
	padding: 40px;
	text-align: center;
	font-size: clamp(24px,2.5vw,48px);
	font-weight: 900;
}
.redTxt{
	color: #ba0a0f;
}
.caRead{
	box-sizing: border-box;
	margin: auto auto 40px;
	padding: 1em;
	max-width: 1200px;
	background-color: #0abab5;
	text-align: center;
	font-size: clamp(16px,2.5vw,32px);
	color: #fff;
}
.caRead > p{
	line-height: 1.75em;
}
.fwbTxt{
	font-weight: bold;
}
.flowImg{
	text-align: center;
}

.actionArea{
	box-sizing: border-box;
	padding: 40px 0;
	background-color: #e6f8f8;
}
.aaTit{
	margin-bottom: 40px;
	text-align: center;
	font-size: clamp(18px,2.5vw,36px);
	font-weight: bold;
	color: #0abab5;
}
.orangeTxt{
	color: #f2a900;
}
.aaWrap{
	display: flex;
	margin: auto auto 40px;
	max-width: 1200px;
	justify-content: space-between;
	flex-wrap: nowrap;
}
.aaBox{
	width: 100%;
	max-width: 368px;
	text-align: center;
}
.aaBox p{
	font-size: clamp(14px,2.5vw,20px);
	line-height: 1.5em;
}
.outBox{
	box-sizing: border-box;
	margin-bottom: 12px;
	padding: 0.25em;
	background-color: #e6e6e6;
}
.outBox > h4{
	box-sizing: border-box;
	padding: 0.5em;
	background-color: #f2f2f2;
	border: solid 1px #999;
	font-size: clamp(16px,2.5vw,20px);
	font-weight: bold;
}
.cursor{
	padding-top: 1em;
	min-width: 24px;
}
.message01{
	box-sizing: border-box;
	margin: auto;
	padding: 1em 0;
	max-width: 1200px;
	background-color: #0abab5;
	color: #fff;
	font-size: clamp(18px,2.5vw,36px);
	font-weight: bold;
	text-align: center;
}

.faqArea{
	box-sizing: border-box;
	padding: 40px 0;
}
/* 全体の枠 */
.faq-container {
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid #ddd;
}

/* 個別の質問ブロック */
.faq-item {
    border-bottom: 1px solid #ddd;
}

/* 質問部分（クリックエリア） */
.faq-question {
    padding: 20px;
    font-weight: bold;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 40px; /* 矢印アイコン分の余白 */
    
    /* ▼▼▼ Flexboxでレイアウト制御 ▼▼▼ */
    display: flex;
    align-items: center; /* Qは通常1-2行なので上下中央揃えが綺麗 */
    gap: 0; /* アイコンのmarginで調整するため0 */
}

/* デフォルトの三角を消す */
.faq-question::-webkit-details-marker {
    display: none;
}

/* 開閉の矢印アイコン */
.faq-question .icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
}
.faq-question .icon::before,
.faq-question .icon::after {
    content: "";
    position: absolute;
    background-color: #333;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.faq-question .icon::before { width: 100%; height: 2px; }
.faq-question .icon::after { width: 2px; height: 100%; transition: 0.3s; }

.faq-item[open] .faq-question .icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}
.faq-item[open] .faq-question {
    background-color: #f9f9f9;
}

/* 回答エリア全体 */
.faq-answer {
    padding: 20px;
    color: #333;
}

/* ▼▼▼ 回答のテキスト部分の修正（ここが重要） ▼▼▼ */
.faq-answer p {
    margin: 0;
    line-height: 1.6;
    
    /* Flexboxでアイコンとテキストを横並びにする */
    display: flex;
    align-items: flex-start; /* 長文なので「上揃え」にする */
}

/* ▼▼▼ アイコン共通スタイル ▼▼▼ */
/* QとAで共通の部分をまとめました */
.square-icon-Q,
.square-icon-A {
    /* 箱のサイズ固定 */
    width: 3em;
    aspect-ratio: 1 / 1;
    
    /* Flexアイテムとしての設定 */
    flex-shrink: 0; /* ★重要：画面が狭くなってもアイコンを縮ませない */
    margin-right: 1em; /* テキストとの距離 */

    /* 文字をど真ん中に配置 */
    display: grid;
    place-items: center;

    /* 装飾 */
    color: #fff;
    font-weight: bold;
    line-height: 1;
    border-radius: 4px;
}

/* 個別の色設定 */
.square-icon-Q {
    background: #f2a900;
}

.square-icon-A {
    background: #254a84;
    /* Aは「上揃え」なので、テキストの行間と視覚的に合わせる微調整 */
    margin-top: 2px; 
}

.formArea{
	box-sizing: border-box;
	padding: 40px 0;
}
.formWrap{
	display: flex;
	box-sizing: border-box;
	margin: auto;
	padding: 40px 1em;
	max-width: 1200px;
	border-top: solid 1px #999;
	flex-wrap: wrap;
	justify-content: space-between;
}
.formWrap div{
	margin-bottom: 0.5em;
}
.formWrap input{
	border: none;
}
.formWrap .fsizeHalf{
	margin-bottom: 2em;
	width: 100%;
	border-bottom: solid 1px #b3b3b3;
}
.fsizeFull{
	margin-bottom: 3em;
	width: 100%;
	border-bottom: solid 1px #b3b3b3;
}
.fsizeFull > textarea{
	width: 99%;
	height: 200px;
	border-color: #b3b3b3;
}
.required{
	box-sizing: border-box;
	padding: 0.2em 0.5em;
	background-color: #ba0a0f;
	color: #fff;
	font-size: 60%;
}
.formKiyaku{
	box-sizing: border-box;
	margin: auto auto 40px;
	padding: 1em;
	width: 90%;
	max-width: 800px;
	height: 240px;
	font-size: 14px;
	border: solid 1px #b3b3b3;
	overflow-y: scroll;
}
.checkBox{
	margin: auto;
	text-align: center;
}
.formSubmit{
	box-sizing: border-box;
	padding: 40px 0;
	margin: auto;
	text-align: center;
}
.formSubmit input{
	width: 90%;
	max-width: 400px;
	background-color: #f2a900;
	color: #fff;
	border: none;
	border-radius: 8px;
	cursor: pointer;
}
.formSubmit input:hover{
	background-color: #0abab5;
}

.footerArea{
	box-sizing: border-box;
	padding: 40px 1em;
	background-color: #0abab5;
}
.footerArea > h2{
	box-sizing: border-box;
	margin: auto auto 40px;
	padding: 0.5em;
	max-width: 1200px;
	background-color: #fff;
	text-align: center;
	font-size: clamp(24px,2.5vw,48px);
	font-weight: bold;
	border-radius: 1000px;
}
.footerWrap{
	display: flex;
	margin: auto auto 20px;
	padding-bottom: 20px;
	width: 100%;
	max-width: 1072px;
	color: #fff;
	border-bottom: solid 1px #fff;
}
.footerLeft{
	width: 30%;
}
.footerLogo{
	background-color: #fff;
	display: flex;
	justify-content: center;
	aspect-ratio: 1 / 1;
}
.footerRight{
	margin-left: 16px;
	width: calc(70% - 16px);
	font-size: clamp(14px,2.5vw,16px);
	line-height: 1.75em;
}
.address li{
	margin-left: 1em;
	list-style-type: circle;
}
.footerService li{
	margin-bottom: 1em;
}
.copyrightArea{
	background-color: #07807c;
	color: #fff;
	font-size: 12px;
	text-align: center;
}

/* --- メディアクエリ PC (640px以上) --- */
@media (min-width:640px){
	.headerMenuArea{
		box-sizing: border-box;
		padding: 22px;
		background-color: #fff;
		position: sticky;
		top: 0;
	}
	.wrapHeader{
		display: flex;
	}
	.wrapHeader div{
		width: 100%;
		align-content: center;
	}
	.logoArea {
		max-width: 30%;
	}
	.menuArea{
		max-width: 70%;
	}
	.logoArea img{
		width: 100%;
		max-width: 250px;
	}
	.menuArea > ul{
		display: flex;
		justify-content: flex-end;
	}
	.menuArea > ul > li{
		margin-left: 2em;
	}
	.menuArea > ul > li > a{
		text-decoration: none;
		display: block;
		box-sizing: border-box;
		color: #fff;
		text-align: center;
		border-radius: 1000px;
		font-size: clamp(14px,2.5vw,16px);
		font-weight: bold;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
		transition: 0.1s;
	}
	
	.cursor{
		padding-top: 3em;
		min-width: 24px;
	}

	.partnerMerit{
		padding: 80px 1em;
	}
	
	.twoBoxWrap{
		margin: auto;
		max-width: 1200px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.twoBoxWrap div{
		box-sizing: border-box;
		margin-bottom: 20px;
		padding: 0.5em;
		width: 49%;
		max-width: 580px;
		background-color: #fff;
		text-align: center;
	}
	
	.twoBoxWrap div{
		margin-bottom: 40px;
	}

	.liteMerit{
		padding: 80px 0;
	}

	.chartArea{
		padding: 80px 0;
	}
	
.lmBox{
	max-width: 368px;
}

	.caRead{
		padding: 40px 0;
		font-size: clamp(24px,2.5vw,32px);
	}

	.actionArea{
		padding: 80px 0;
	}

	.outBox{
		margin-bottom: 24px;
		padding: 1em;
	}
	.outBox > h4{
		padding: 2em 1em;
		font-size: clamp(18px,2.5vw,24px);
	}

	.faqArea{
		box-sizing: border-box;
		padding: 80px 0;
	}

	.formArea{
		box-sizing: border-box;
		padding: 80px 0;
	}


	.footerArea{
		box-sizing: border-box;
		padding: 40px 1em;
		background-color: #0abab5;
	}
	
	.footerRight{
		margin-left: 40px;
		width: calc(70% - 40px);
	}

}

/* --- メディアクエリ Wide PC (1100px以上) --- */
@media (min-width:1100px){

	.menuArea > ul > li > a{
		background-image: url("/wp-content/themes/wk_altpaper/sc-lite/lp-img/cursor_under.png");
		background-repeat: no-repeat;
		background-position: 1em 50%;
	}

	.menuArea > ul > .menu01 > a{
		box-sizing: border-box;
		background-color: #f2a900;
		margin-bottom: 0.5em;
		padding: 0.5em 4em;
	}
	.menuArea > ul > .menu02 > a{
		box-sizing: border-box;
		background-color: #254a84;
		padding: 0.5em 6em;
	}
	

}

@media (min-width:1200px){

	.fsizeHalf{
		max-width: 560px;
	}

}

/* --- メディアクエリ Wide PC (1280px以上) --- */
@media (min-width:1280px){

	.formWrap{
		padding: 40px 0;
	}

}