/* =========================================================
   contents.css : コンテンツ内で使用するCSS
   ヘッダー・フッター・フォームなど共通部分は base.css に記述
   ========================================================= */

/* lpBody：コンテンツ全体の囲み
   WordPress（consulting 対応領域：詳細）へはこの要素ごと取り込む。WordPress側ではLPの base.css が読み込まれないため、
   コンテンツ内で必要な base.css の指定はここにも書いておく（値は base.css と同じなので、LPの表示は変わらない）
-------------------------------------------------------------- */
.lpBody {
	--color_main-grad_start: #F7F7F7;
	--color_main-grad_end: #EAF3FF;
	--color_main-grad2_start: #87BBF5;
	--color_main-grad2_end: #FAFAFA;
	--color_main-grad3_start: #3B93F8;
	--color_main-grad3_end: #1067CC;
}
/* 見出し：テーマ側の .hl1（左寄せ）に負けないよう、base.css と同じく中央寄せを指定
   .mainContents：WordPress（対応領域：詳細）側の囲み。取り込んだ本文に .lpBody が無い場合も効かせる */
.lpBody .hl1,
.mainContents .hl1 {
	width: fit-content;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/* mv
-------------------------------------------------------------- */
.mv {
	position: relative;
	background: linear-gradient(180deg, var(--color_main-grad_start) 0%, var(--color_white) 41%, var(--color_main-grad_end) 100%) repeat 0 0 / auto;
	padding-top: 60px;
	overflow-x: clip; /* :after の背景線（right:-20%）が右にはみ出さないよう切り取る（LPでは .contents の overflow:hidden で隠れている） */
}
.mv:after {
	position: absolute;
	bottom: 0;
	right: -20%;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background: url("../img/mv/line.svg") no-repeat 0 0 / cover;
	pointer-events: none;
	user-select: none;
	z-index: 1;
}
.mv .inr {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	gap: 2em 3%;
	padding: 5% 5% 2%;
	z-index: 2;
}
.mv .txt { width: 57%; container-type: inline-size;} /* h1 の文字サイズを .txt の幅基準でも制限するため */
.mv .img {
	display: flex;
	width: 40%;
	pointer-events: none;
	user-select: none;
}

.mv hgroup { font-weight: bold; line-height: 1.2; margin-bottom: 1.5em;}
.mv h1 {
	color:var(--color_main);
	font-size: min(3.6vw, 10.8cqi); /* 10.8cqi：最長行「業務改善につながる」が .txt の幅に収まる上限。LPでは通常 vw 側が使われる */
}

.mv h1 > strong {
	display: inline-block;
	background-color: var(--color_main);
	color: var(--color_white);
	padding: 0.05em 0.1em;
}
.mv hgroup p { font-size: 1.25em; margin: 0.5em 0 0;}

.mv ul {
	display: flex;
	justify-content:space-between;
	font-weight: bold;
	font-size: var(--fs-xs);
	padding: 0;
	margin: 0;
}
.mv ul li {
	width:32%;
	position: relative;
	background-color: var(--color_white);
	box-shadow: 0px 0px 8px var(--color_shadow);
	font-size: 0.75em;
	text-align:center;
	line-height: 1.2;
	list-style-type: none;
	padding: 3% 1%;
	margin-top: 0.5em;
}
.mv ul li:before,
.mv ul li:after{
	position:absolute;
	content:"";
	background-color:var(--color_main);
	width:7px;
	height:7px;
	opacity: 0.13;
	border-radius:50%;
}
.mv ul li:before{
	top:6px;
	left:6px;
}
.mv ul li:after{
	right:6px;
	bottom:6px;
}

.mv .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mv .bnr,
.mv .btnArea { /* .btnArea：WordPress（対応領域：詳細）側のマークアップ。.bnr と同じく横並びにする */
	display: flex;
	width: 100%;
	justify-content: center;
	gap: 1em 2%;
	margin: 0 auto;
}
.mv .bnr > div,
.mv .btnArea > .btn {
	width: 300px;
	max-width: 100%;
}
.mv .btn {
	width: 100%;
	font-size:1.32em;
}
.mv .btnArea { font-size: 1.4em;} /* ai_governance の .mv .btnArea と同じ文字サイズ */
.mv .btnArea > .btn { font-size: 1em;}

.mv .footnote {
	width: 100%;
	font-size: 0.88rem;
	color: var(--color_gray-dark);
	margin: 0;
}
.fadeIn{
	animation-name:fadeInAnime;
	animation-duration:3s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes fadeInAnime{
	from {opacity: 0;}
	to {opacity: 1;}
}

@media screen and (min-width: 1367px) {
	.mv h1 { font-size: min(4vw, 10.8cqi);}
	.mv hgroup p { font-size: 1.45vw;}
	.mv ul li { font-size: 1vw;}
	.mv .btn { font-size: 1.75vw; border-radius: 80px;}
	.mv .bnr > div,
	.mv .btnArea > .btn { width: 20vw;}
}
@media screen and (max-width: 1720px) {
	.mv .btnArea { font-size: 1.2em;}
}
@media screen and (max-width: 1460px) {
	.mv .btnArea { font-size: 1em;}
}
@media screen and (max-width: 896px) {
	.mv ul li br{ display: none; }
}
@media screen and (max-width: 680px) {
	.mv ul{ flex-direction:column; }
	.mv ul li{ width: 100%;}
	.mv .btn { font-size:1.04em; }
	.mv .btnArea > .btn { font-size: 1.2em;}
}
@media screen and (max-width: 480px) {
	.mv {
		padding-bottom: 20%;
		background-position: 31% 94%, 70% 87%, 40% 200%, left top;
		background-size: 30%, 30%,160%,100%;
		position: relative;
	}
	.mv h1{ font-size:4.8vw; }
	.mv h1 br{ display:none; }
	.mv .img { width: 100%; }
	.mv .txt{ width: 100%; }
	.mv .txt .hidePc-Tb .btn{
		text-align:center;
		display: block;
		margin-bottom:0.5em;
	}
	.mv ul{
		margin-bottom:1em;
		font-size:var(--fs-xs);
	}
	.mv ul li{ font-size:1em; }
	.mv .bnr,
	.mv .btnArea{
		flex-direction:column;
		gap:0.5em;
	}
	.mv .bnr > div,
	.mv .btnArea > .btn{ width:100%; }
	.mv .btn { font-size:1.4em; }
	.footnote {
		position: absolute;
		bottom: -4em;
    	left:0;
		padding:0.5em;
		line-height:1.2
	}
}


.anshinno1{
	padding:4em 1em 4em 1em;
	text-align:center;
	background: transparent linear-gradient(180deg, var(--color_main) 0%, var(--color_main-grad2_start) 38%, var(--color_main-grad2_end) 76%, var(--color_white) 100%) 0% 0% no-repeat;
}
.anshinno1 .inr{max-width:900px;width: 100%;}
.anshinno1 p{
	color:var(--color_white);
	font-size:0.78em;
	text-align:left;
}
.anshinno1 .box{
	max-width: 900px;
	background-color: var(--color_white);
	box-shadow: 0px 4px 12px var(--color_shadow2);
	margin: 2% auto 0;
	padding: 5%;
}
.anshinno1 .box .hl1 { margin-bottom: 0.7em;}
.anshinno1 .box ul{
	list-style:none;
	display:flex;
	justify-content:space-between;
	flex-wrap: wrap;
	text-align: left;
	font-weight: bold;
	line-height: 1.2;
	padding: 0;
}
.anshinno1 .box ul li{
	width:32%;
	background:var(--color_gray-light) no-repeat 12% center / 18% auto;
	padding: 4% 2% 4% 10%;
}
.anshinno1 .box ul li:nth-child(1){ background-image: url("../img/nayami/icon1.svg"); }
.anshinno1 .box ul li:nth-child(2){ background-image: url("../img/nayami/icon2.svg"); }
.anshinno1 .box ul li:nth-child(3){ background-image: url("../img/nayami/icon3.svg"); }

@media screen and (min-width: 1367px) {
	.anshinno1 img { width: 100%;}
	.anshinno1 .box{ max-width: 1240px; padding: 4%;}
	.anshinno1 .box ul { font-size: 1vw; margin-bottom: 0;}
	.anshinno1 .box ul li{ padding: 1.5em 1.5em 1.5em 10%;}
}
@media screen and (max-width: 680px) {
	.anshinno1 .box ul li{
		padding: 60px 4% 4% 4%;
		background-position:center 15px;
	}
	.anshinno1 .box ul li br{ display:none; }
}
@media screen and (max-width: 480px) {
	.anshinno1 .box ul li{
		width: 100%;
		margin-bottom: 1em;
		padding: 4% 4% 4% 80px;
		background-position:4% center;
		min-height:50px;
		display:flex;
		align-items: center;
	}
	.anshinno1 .box ul li:last-child{ margin-bottom:0;}
}

/* priceMsg
-------------------------------------------------------------- */
.priceMsg{
	background: transparent linear-gradient(115deg, var(--color_main-grad3_start) 0%, var(--color_main-grad3_end) 100%) 0% 0% no-repeat;
	text-align: center;
	padding: 2.5em 4%;
}
.priceMsg .txt {
	color: var(--color_white);
	font-family: var(--family-min);
	font-size: var(--fs-xl);
	font-weight: bold;
	line-height: 1.3;
	margin: 0 0 0.5em 0;
}
.priceMsg .btnArea {
    display: flex;
    gap: 0.5em 2%;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
}
.priceMsg .btnArea > div { width: 300px; }

.priceMsg .btnArea > .estimateBtn {
    flex-basis: 100%; 
    display: flex;
    justify-content: center;
}
.priceMsg .btnArea .btn { 
	width: 100%;
    font-size: 1.24em;
}
.priceMsg .btnArea > .estimateBtn .btn { width: 300px; }


@media screen and (min-width: 1367px) {
	.priceMsg .btnArea { width: 80%;}
	.priceMsg .btn{ font-size: 1.5vw; border-radius: 80px;}
	.priceMsg .txt{ font-size: var(--fs-xxl);}
}
@media screen and (max-width: 680px) {
	.priceMsg .btnArea .btn { font-size:1.04em; }
}
@media screen and (max-width: 480px) {
	.priceMsg .btnArea { flex-flow: column wrap; gap: 1em 0;}
	.priceMsg .btnArea > div { width: 100%;}
	.priceMsg .btnArea .btn { font-size:1.4em; }
	.priceMsg .txt{ font-size:var(--fs-l); }
}


/* secVoice
-------------------------------------------------------------- */

.secVoice { background-color: var(--color_main);}
.secVoice .hl1 {
	color: var(--color_white);
	border-bottom: none;
	/* border-image: linear-gradient(90deg, var(--color_main) 0%, var(--color_main-grad3_start) 45%, var(--color_main) 100%) 1; */
	padding-bottom: 0;
}

.voiceArea {
	display: flex;
	justify-content: space-between;
}
.voiceArea > .box {
	width: 32%;
	display: flex;
	flex-flow: column nowrap;
	background-color: var(--color_white);
	box-shadow: 0 0 24px var(--color_shadow2);
	padding: 20px 20px 30px;
}
.voiceArea .box .hl { order: 2; margin: 0;}
.voiceArea .box .txt { order: 3; margin: 0;}
.voiceArea .box .img { order: 1; line-height: 1; margin-bottom: 1em;}


@media screen and (max-width: 480px) {
	.voiceArea { flex-flow: column wrap; gap: 1em 0;}
	.voiceArea > .box {
			width: 100%;
			flex-flow: row wrap;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 20px;
		}
	.voiceArea .box .hl { width: 53%;}
	.voiceArea .box .txt { margin-top: 1em;}
	.voiceArea .box .img { width: 45%; margin-bottom: 0;}
}


/* secFeature
-------------------------------------------------------------- */
.featureArea{
	display:flex;
	flex-wrap: wrap;
	justify-content:space-between;
	padding: 0 0 3%;
}
.featureArea:last-child{ padding-bottom: 0;}
.featureArea .box{
	width:60%;
	margin: 0;
}
.featureArea .box:before{
	color:var(--color_white);
	font-size:1.25em;
	font-weight:bold;
	line-height: 1;
}
.featureArea:before{
	width:100%;
	color:var(--color_main);
	font-family: var(--family-min);
	font-weight:bold;
}
.featureArea:nth-of-type(1):before{content:"-01";}
.featureArea:nth-of-type(2):before{content:"-02";}
.featureArea:nth-of-type(3):before{content:"-03";}

.featureArea picture{ width:38%; }

@media screen and (max-width: 480px) {
	.featureArea .box,
	.featureArea picture{
		width:100%;
	}
}


/* secCompany
-------------------------------------------------------------- */
.comtable td table,
.comtable td th,
.comtable td td {border: none; padding: 0;}
.comtable td table {display: inline-table; width: auto; margin-bottom: 1em;}
.comtable td table:last-child {margin-bottom: 0;}
.comtable td th {width: 8.5em; background-color: transparent;}
.comtable td th,
.comtable td td {padding: 0.1em 0;}
.comtable dl {margin: 0;}
.comtable dd {margin-bottom: 1em;}
.comtable dd:last-child {margin-bottom: 0;}
.comtable ul{
	padding-left:1.5em;
	margin:0;
}

@media screen and (max-width: 640px) {
	.comtable td .noBorder tr td:nth-child(2) {display: inline;}
	.comtable td th {
		width: auto;
		vertical-align: top;
	}
	.comtable td td + td {font-size: 0.88em;}
}
@media screen and (max-width: 480px) {
	.comtable td td {display: block;}
}

/* Achievement
-------------------------------------------------------------- */
.secAchievement{
	background: transparent linear-gradient(123deg, var(--color_main-grad_start) 0%, var(--color_white) 41%, var(--color_main-grad_end) 100%) 0% 0% no-repeat;
}
.secAchievement .inr{
	background: var(--color_white) 0% 0% no-repeat padding-box;
	box-shadow: 0px 0px 24px var(--color_shadow2);
	padding:6% 4%;
	text-align: center;
}
.secAchievement p{
	color: var(--color_gray-dark);
	font-size: 0.78em;
	text-align: left;
}
.secAchievement picture { text-align: center;}
.secAchievement picture img { width: 90%;}


/* Price
--------------------------------------------------------------- */

.priceTxt {
	font-size: 2em;
	font-weight: bold;
	text-align: center;
}
.priceTxt strong { font-size: 2em;}

.priceArea {
	width: 720px;
	max-width: 100%;
	margin: 0 auto;
}
.priceArea .box {
	background-color: var(--color_white);
	box-shadow: 0 0 24px var(--color_shadow2);
	padding: 20px;
}
.priceArea .box p,
.priceArea .box ul { margin-top: 0;}
.priceArea .box li + li { margin-top: 0.4em;}
.priceArea .footnote {
	font-size: 0.88rem;
	color: var(--color_gray-dark);
}
.priceArea .footnote strong { color: var(--color_main);}


/* Consultant
--------------------------------------------------------------- */
.secConsultant{
	background-color: var(--color_main-light);
	box-shadow: 0px 6px 24px var(--color_shadow);
}
.secConsultant .inr{
	width:90%;
	margin:0 auto;
}
.secConsultant .hl1 {
	border-image: linear-gradient(90deg, var(--color_main-light) 0%, #c8def7 45%, var(--color_main-light) 100%) 1;
}

.consulArea{
	display:flex;
	justify-content:center;
	flex-wrap: wrap;
	gap: 0 2%;
}
.consulArea .box{
	width: 32%;
	position:relative;
}
.consulArea .box picture { display: block;}
.consulArea .box picture img{ height:100%; }
.consulArea .box .txtBox{
	width:100%;
	position:absolute;
	bottom:0;
	left:0;
	background: transparent linear-gradient(180deg, var(--color_primary) 0%, var(--color_shadow3) 100%) 0% 0% no-repeat padding-box;
	opacity: 0.86;
	color:var(--color_white);
	padding: 4% 2%;
}
.consulArea .box .txtBox p{
	text-align:center;
	margin:0 0 0.5em 0;
}
.consulArea .box .txtBox p.ttl{
	font-weight:bold;
}

@media screen and (min-width: 1367px) {
.consulArea .box picture img{
	display: block;
	width: 100%;
	height: 500px;
	object-fit: cover;
	object-position: 50% 0;
	margin: 0;
}
}
@media screen and (max-width: 1380px){
	.secConsultant .inr{ width: 100%; }
	.consulArea .box .txtBox p{ font-size:var(--fs-xxs);}
	.consulArea .box .txtBox p br{ display:none;}
}
@media screen and (max-width: 1024px){
	.consulArea .box .txtBox p{ font-size:unset;}
	.consulArea .box .txtBox p br{ display:block;}
}
@media screen and (max-width: 896px){
	.consulArea .box picture img{ height: auto;}
}
@media screen and (max-width: 768px) {
	.consulArea .box{
		width:100%;
		margin-bottom:1em;
	}
	.consulArea .box .txtBox p br{ display:none;}
}     
@media screen and (max-width: 380px) {
	.consulArea .box{ width:100%; }
}




/* Question
--------------------------------------------------------------- */
.secQuestion .question,
.secQuestion .answer{
	padding-left:40px;
	position:relative;
	margin:0;
	line-height: 1.3;
}
.secQuestion .question{
	font-size:var(--fs-m);
	margin-bottom:0.5em;
}
.secQuestion .answer{
	font-size:var(--fs-xs);
	border-bottom:1px solid var(--color_gray-light);
	padding-bottom:2.5em;
	margin-bottom:2.5em;
}
.secQuestion .answer:last-child {
    border: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.secQuestion .question:before,
.secQuestion .answer:before{
	position:absolute;
	left:0;
	top:4px;
	font-family: var(--family-min);
	font-size:18px;
	font-weight:normal;
	padding:6px 8px;
	color:var(--color_white);
	margin:0 10px 0 0; /* margin-top：Cocoonの .question::before（margin-top:-0.5em）を打ち消す */
	line-height:1;
	width:auto; /* 以下3行：Cocoonの .question::before（width・中央寄せ・右線）を打ち消す */
	text-align:left;
	border:none;
}
.secQuestion .question:before{
	content:"Q";
	background-color:var(--color_primary);
}
.secQuestion .answer:before{
	content:"A";
	background-color:var(--color_main);
}
/* WordPress（対応領域：詳細）側はテーマの --color_main が --color_primary と同じ紺色のため、LPの色（base.css の --color_main）を指定 */
.mainContents .secQuestion .answer:before { background-color:#1067CC; }


/* Osusume
--------------------------------------------------------------- */
.secOsusume{
	background: transparent linear-gradient(119deg, var(--color_main-grad_start) 0%, var(--color_white) 41%, var(--color_main-grad_end) 100%) 0% 0% no-repeat padding-box;
}
.osusumeArea{
	display: flex;
	justify-content:space-between;
	flex-wrap: wrap;
}
.osusumeArea .box{
	width:32%;
	text-align:center;
	box-shadow: 0px 0px 24px var(--color_shadow2);
	padding:10% 20px 20px 20px;
	background:var(--color_white) no-repeat center 25px / auto 45%;
}
.osusumeArea .box:nth-child(3){ background-image: url(../img/osusume/img_comicon1.svg); }
.osusumeArea .box:nth-child(2){ background-image: url(../img/osusume/img_comicon2.svg); }
.osusumeArea .box:nth-child(1){ background-image: url(../img/osusume/img_comicon3.svg); }

@media screen and (max-width: 1680px){
	.osusumeArea .box{ padding-top: 14%;}
}
@media screen and (max-width: 1380px){
	.osusumeArea .box br{ display: none;}
}
@media screen and (max-width: 1024px){
	.osusumeArea .box br{ display: block;}
}
@media screen and (max-width: 896px){
	.osusumeArea .box br{ display: none;}
}
@media screen and (max-width: 768px){
	.osusumeArea .box{ background-size: auto 42%; padding-top: 20%;}
}
@media screen and (max-width: 480px) {
	.osusumeArea .box{
		width: 100%;
		padding:20px 20px 20px 100px;
		min-height:100px;
		background-position:20px 20px;
		text-align:left;
		display:flex;
		align-items: center;
		margin-bottom:1em;
	}
	.osusumeArea .box:last-child{
		margin-bottom:0;
	}
}