@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%;
	}
	
	/* 横問合せボタン ※元テンプレの「2つ目（電話）をtab以上で隠す」出し分けは削除。
	   本案件は 1つ目＝資料DL／2つ目＝無料相談 で、どちらも全BPで表示する */
	.cv_btn_area .btn a:first-child{
		display: flex;
	}

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

	/* === FV（top-contents）— MITERAS === */
	#top-contents .slider img{
		min-height: 620px;
	}
	.fv-eyebrow{
		font-size: .78em;
	}
	.fv-catch{
		font-size: calc(1.75em + 2vw);
		text-align: left;
	}
	.fv-catch-sub{
		text-align: left;
	}
	.fv-catch-sub p{
		font-size: calc(.8em + 1vw);
	}
	.fv-badges{
		justify-content: flex-start;
	}
	.fv-badges li{
		font-size: .82em;
		padding: 6px 16px;
	}
	.fv-cta-inner{
		width: auto;
	}
	/* AIO回答ボックス（FAQ柄） */
	.aio-faq{
		padding: 22px 26px;
	}
	.aio-faq-q{
		font-size: 1em;
	}
	.aio-faq-a p{
		font-size: .9em;
	}
	/* tab以上：折りたたみを解除し全段落を常時表示 */
	.aio-faq-a p:nth-child(n+2){
		max-height: none;
		margin-top: 1em;
		opacity: 1;
	}
	.aio-faq-more{
		display: none;
	}
	/* 課題提起セクション */
	.problem-list{
		grid-template-columns: 1fr 1fr;
		gap: 18px;
	}
	.problem-title{
		text-align: left;
	}
	/* 始めやすい4つの理由 */
	.reason-list{
		grid-template-columns: 1fr 1fr;
		gap: 18px;
	}
	/* 診断レポートで分かること
	   ※481px～600pxはSPと同じ1カラム（縦積み）のまま。
	     2カラム化は下部の追加ブレイクポイント（601px～）で行う */
	/* PRICE */
	.price-include-list ul{
		grid-template-columns: 1fr 1fr;
		gap: 10px 18px;
	}
	.price-amount-num{
		font-size: 2.6em;   /* SPの clamp を打ち消し（481px以上は幅に余裕があるため等倍） */
	}
	.price-amount-dual .price-amount-num{
		font-size: 2em;   /* SPの clamp を打ち消し */
	}
	#top_bottom{
		padding: 20px 25px;
	}
	#top_bottom p{
		font-size: .9em;
	}
	/* 最終CTA 右下の幾何学ライン装飾：tab・PCは高さ8割 */
	.final-cta-section::after{
		height: 80%;
		background-size: auto 100%;
	}
	/* PROCESS・USE SCENEリード文：tab以上でテキストのかたまりごと中央へ（PCにもそのまま継承） */
	.flow-lead p,
	.voice-lead p{
		display: table;
		margin: 0 auto;
	}
	/* 最終CTA：SPの width:min-content を解除。tab以上は入れば1行、狭ければ塊単位で折り返す */
	.final-cta-inner{
		width: auto;
		text-align: center;
	}

	/* 損失インパクト表：SPだけ「対象額の／約3.5%改善」で改行させていたのを解除 */
	.loss-roi .loss-value .loss-roi-amount{
		display: inline-block;
	}
}

/* *****************************************************************************
   追加ブレイクポイント（担当者指定）
   601px～：診断レポートのサブカードを2カラムにする。
   600pxまでは幅が足りずタイトル・本文・画像が窮屈になるため、SPと同じ縦積みで見せる。
***************************************************************************** */
@media screen and (min-width: 601px) {
	.report-sub-list{
		grid-template-columns: 1fr 1fr;
		gap: 18px;
	}
}