@charset "utf-8";

/* *****************************************************************************
   タブレット用のスタイル記述
***************************************************************************** */
@media screen and (min-width: 481px) {
	/* -----------------------------------------------------------------------------
	 財団カスタマイズ
	----------------------------------------------------------------------------- */
	/* 2分割・3分割・4分割 */
	.half,
	.trisection,
	.quarter{
		flex-direction: row;
		flex-wrap: wrap;
	}
	.half .left,
	.half .right,
	.trisection .left,
	.trisection .center,
	.trisection .right,
	.quarter .left1,
	.quarter .left2,
	.quarter .right1,
	.quarter .right2{
		width: calc(50% - 2vw);
	}
	
	/* flow 横 */
	.flow-area1 ul li{
		width: calc(50% - 20px);
		box-sizing: border-box;
		margin: 2.5em 20px 1em 0;
	}
	.flow-area1 ul li:before{
		left: 100%;
		right: auto;
		top: 0;
		bottom: 0;
		margin: auto 0;
		width: 20px;
		height: 40px;
		clip-path: polygon(0 0, 100% 50%, 0 100%);
	}
	.flow-area1 ul li:last-child{
		margin-right: 0;
	}
	
	/* お問合せ */
	.contact{
		flex-direction: column;
	}
	.contact .left,
	.contact .right{
		width: 100%;
	}
	
	/* 横問合せボタン */
	/* 電話出し分け（a:first-child / a:nth-child(2)）はこのページでは使わない。
	   資料請求／無料相談／お申込みの3ボタンを全ブレイクポイントで表示する */

	/* -----------------------------------------------------------------------------
	 個別設定
	----------------------------------------------------------------------------- */

	/* ファーストビュー */
	#top-contents .fv-visual img{
		max-width: 360px; /* tabはまだ縦積み。イラストだけ少し大きく */
	}
	/* sp側が #top-contents .layer1 .fv-cta とID付きのため、同じ強さのセレクタで指定しないと効かない */
	#top-contents .layer1 .fv-cta{
		flex-direction: row;
		flex-wrap: wrap; /* 横並び2ボタンが .layer1 の幅を超えたら折り返す */
		justify-content: center;
	}
	#top-contents .layer1 .fv-cta-btn{
		width: auto;
		flex: 1 1 0; /* min-width固定だと481px幅で2つ入りきらず折り返すため、均等伸縮で横並びさせる */
		min-width: 0;
	}

	/* ② 導入（tab以下は縦積み。2カラム化はPCのみ） */

	/* ③ コンセプト（2カラム化は600px以上。ファイル末尾の@media 600pxで指定） */

	/* ④ 提供内容（tab以下は縦積み。2カラム化はPCのみ） */

	/* ⑤ 対象 */
	.target-contents{
		padding-bottom: 100px; /* SPの51vwを打ち消し、装飾画像分の余白をtab以上は固定100pxに */
	}
	.target-check-list ul{
		grid-template-columns: repeat(2, 1fr);
	}

	/* ⑥ 判断基準（〜659pxは2カラム＋3枚目中央、660px〜で3カラム＝カード幅200px確保） */
	.decision-criteria-list{
		grid-template-columns: repeat(2, 1fr);
	}
	.decision-criteria-card:nth-child(3){
		grid-column: 1 / -1; /* 2行目を全幅セルにして */
		max-width: calc(50% - 10px); /* 1カラム分の幅に絞り */
		margin-inline: auto; /* 中央寄せ（gap20pxの半分=10pxを引く） */
	}

	/* ⑧ 実績（〜659pxは2カラム＋3枚目中央、660px〜で3カラム＝カード幅200px確保） */
	.result-stat-list{
		grid-template-columns: repeat(2, 1fr);
	}
	.result-stat-card:nth-child(3){
		grid-column: 1 / -1; /* 2行目を全幅セルにして */
		max-width: calc(50% - 10px); /* 1カラム分の幅に絞り */
		margin-inline: auto; /* 中央寄せ（gap20pxの半分=10pxを引く） */
	}

	/* ⑧-2 成功事例 */
	.citation-cases-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3vw;
	}

	/* ⑧-3 お客様の声（3カラム化はPCのみ。tabでは1カラムのまま） */

	/* ⑨ 料金（カード幅が300pxを下回ったら1カラムに折り返し） */
	.price-plan-list{
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	}

	/* ⑩ 進め方（tabは2カラム。矢印は無しにする。横4カラム＋右矢印はPCのみ） */
	.setup-flow-list ul{
		grid-template-columns: repeat(2, 1fr);
		gap: 20px; /* 矢印を無くしたぶんSPの40pxより詰める（PCはgap再定義済みで影響なし） */
	}
	/* tabでは矢印を全て非表示（PCは:afterを再定義するので影響しない） */
	.setup-flow-item:after{
		content: none;
	}

	/* ⑪ FAQ */
	.faq-question,
	.faq-answer{
		padding: 20px 24px;
	}

	/* クロージングCTA */
	.final-cta-btns{
		grid-template-columns: repeat(2, 1fr);
	}
	.hero-form{
		padding: 20px 20px 30px;
	}
	.hero-form-head .ttl p{
		font-size: 22px;
	}
}


/* -----------------------------------------------------------------------------
 追加ブレイクポイント（担当者指定）：addon-point-list を600px以上で2カラム化
 481〜599pxは1カラム縦積み／600〜768pxで2カラム＋3枚目中央／769px〜はPCで3カラム
----------------------------------------------------------------------------- */
@media screen and (min-width: 600px) {
	.addon-point-list{
		grid-template-columns: repeat(2, 1fr);
	}
	.addon-point-list .addon-point-card:nth-child(3){
		grid-column: 1 / -1; /* 2行目を全幅セルにして */
		max-width: calc(50% - 10px); /* 1カラム分の幅に絞り */
		margin-inline: auto; /* 中央寄せ（gap20pxの半分=10pxを引く） */
	}
}


/* -----------------------------------------------------------------------------
 追加ブレイクポイント：result-stat-card / decision-criteria-card を660px以上で3カラム
 （3カラムでカード幅≒200pxを確保できる幅。〜659pxは2カラム＋3枚目中央）
----------------------------------------------------------------------------- */
@media screen and (min-width: 660px) {
	.result-stat-list,
	.decision-criteria-list{
		grid-template-columns: repeat(3, 1fr);
	}
	.result-stat-card:nth-child(3),
	.decision-criteria-card:nth-child(3){
		grid-column: auto; /* 2カラム時の中央指定を打ち消し */
		max-width: none;
		margin-inline: 0;
	}
}