@charset "utf-8";

/* *****************************************************************************
   PC用のスタイル記述
***************************************************************************** */
@media screen and (min-width: 769px), print {
	
	/* -----------------------------------------------------------------------------
	 Header
	----------------------------------------------------------------------------- */
	header {
		height: auto;
	}
	header > .inner {
		display: flex;
		align-items: center;
		min-height: 60px;
		box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.20);
	}
	header > .inner > .logo {
		padding: 0 20px;
	}
	header > .inner > navi {
		right: 0;
		padding: 0 20px;
		text-align: right;
		vertical-align: middle;
	}
	header > .inner > navi > ul {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		flex-wrap: wrap;
		margin: auto 0;
	}
	header > .inner > navi > ul > li {
		display: inline-block;
	}
	header > .inner > navi > ul > li a {
		width: auto;
		text-align: left;
		padding: 5px 15px;
	}
	header > .inner > navi > .translation {
		display: inline-block;
	}
	#bt-menu {
		display: none;
	}
	
	
	/* style1 */
	header.style1 {
		position: absolute;
		width: 100%;
		z-index: 999;
		display: none;
	}
	header.style1.fixed {
		position: fixed;
		top: 0;
		left: 0;
		display: block;
	}
	header.style1 > .inner > navi {
		position: static;
		display: flex;
		background-color: var(--header-bg-color);
		padding: 10px 0;
		margin-left: auto;
		opacity: 1;
	}
	
	
	/* powered by Sangyo Navi */
	.powered {
		display: none;
	}

	
	/* -----------------------------------------------------------------------------
	 Breadcrumb
	----------------------------------------------------------------------------- */
	#breadcrumb .bc{
		max-width: 1024px;
		margin: auto;
	}

	
	/* -----------------------------------------------------------------------------
	 contents
	----------------------------------------------------------------------------- */
	main .contents .fixed-bg img {
		width: 100%;
		height: auto;
	}

	.w1200 {
		position: relative;
		max-width: 1200px;
		margin: 60px auto;
	}

	.w1200.bg {
		padding: 40px;
	}
	
	.layer {
		position: absolute;
		z-index: 99;
	}
	
	.contents section {
		margin: 0 20px 40px;
	}
	
	
	/* -----------------------------------------------------------------------------
	 Footer
	----------------------------------------------------------------------------- */
	footer {
		font-size: .95em;
		padding: 90px 0;
		margin-bottom: 0;
	}
	footer .pagetop a:hover {
		background-color: var(--footer-arrow-hover-bg-color);
		filter:alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
	}
	footer .pagetop a:hover::before {
		color: var(--footer-arrow-hover-color);
	}
	footer .inner {
		max-width: 1024px;
		margin: 0 auto;
	}
	
	
	/* -----------------------------------------------------------------------------
	 財団カスタマイズ
	----------------------------------------------------------------------------- */
	a.anchor.anc1{
		padding-top: 0;
    	margin-top: 0;
	}
	
	/* 2分割 */
	.half{
		gap: 2vw;
	}
	.half .left,
	.half .right{
		width: calc(50% - 2vw);
	}
	
	/* 3分割 */
	.trisection{
		gap: 2vw;
	}
	.trisection .left,
	.trisection .center,
	.trisection .right{
		width: calc(100% / 3 - 2vw);
	}
	
	/* 4分割 */
	.quarter{
		gap: 2vw;
	}
	.quarter .left1,
	.quarter .left2,
	.quarter .right1,
	.quarter .right2{
		width: calc(25% - 2vw);
	}
	
	/* ful-half */
	.ful-half{
		flex-direction: row;
	}
	.ful-half.l-img{
		flex-direction: row-reverse;
	}
	.ful-half.r-img .left,
	.ful-half.l-img .right{
		height: auto;
	}
	.ful-half.r-img .right,
	.ful-half.l-img .left{
		height: auto;
	}
	.ful-half .left,
	.ful-half .right{
		width: 50%;
	}
	.ful-half .txt .inner{
		max-width: 540px;
		margin: auto;
	}
	
	/* flow 横 */
	.flow-area1 ul li{
		width: calc(25% - 20px);
	}
	
	/* 会社概要 */
	.cpn_tbl table th,
	.cpn_tbl table td{
		display: table-cell;
		border-bottom: 1px solid var(--cpn-table-border);
		padding: 5px 20px;
	}
	
	/* お問合せ */
	.contact{
		flex-direction: row;
	}
	.contact .left{
		position: relative;
	}
	.contact .left:after{
		position: absolute;
		content: '';
		display: inline-block;
		width: 1px;
		height: 80%;
		top: 10%;
		right: 0;
		background-color: var(--contact-center-line-color);
	}
	a.mail_button {
		margin-top: 0;
	}
	
	/* 横問合せボタン */
	.cv_btn_area {
		width: auto;
		right: 0;
		top: 15vw;
		left: auto;
    	bottom: auto;
	}
	.cv_btn_area .btn{
		flex-direction: column;
	}
	.cv_btn_area .btn a {
		flex-direction: column;
		width: 90px;
		height: 75px;
		font-size: 12px;
		border-radius: 10px 0 0 10px!important;
		padding: 12px 17px 10px 10px;
		margin: 0 -10px 3px auto;
	}
	.cv_btn_area .btn a:hover{
		margin-right: 0;
		opacity: 1;
	}
	.cv_btn_area .btn a i {
		margin-bottom: 7px;
		margin-right: 0;
	}
	/* PC：追従ボタンを2行縦並びに */
	.cv_btn_area .btn a:last-child{
		height: 90px;
		width: 100px;
	}
	.cv_btn_area .btn a .side-btn-text{
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		line-height: 1.3;
	}
	.cv_btn_area .btn a .side-btn-eyebrow{
		margin-right: 0;
	}
	.cv_btn_area .btn a .side-btn-main{
		font-size: 1em;
	}
	.cv_btn_area .btn a:after{
		display: none;
	}

	/* レスポンシブ出し分け */
	.for-pc{
		display: block;
	}
	.for-tab{
		display: none;
	}
	

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

	/* === FV（top-contents）— MITERAS === */
	#top-contents{
		min-height: 720px;
		padding: 0;
	}
	#top-contents .slider{
		display: none;
	}
	/* テキストエリア：画面幅に応じて中央寄せ */
	#top-contents .layer1{
		position: absolute;
		top: 50%;
		left: max(5%, calc(50vw - 720px));
		right: auto;
		max-width: clamp(420px, 52vw, 900px);
		padding: 0;
		transform: translateY(-50%);
	}
	/* PCではSP用画像は非表示 */
	.fv-visual-sp{
		display: none;
	}
	.fv-eyebrow{
		font-size: .8em;
		letter-spacing: .18em;
	}
	.fv-catch{
		font-size: clamp(2.2rem, 3.6vw, 4rem);
		line-height: 1.35;
		margin-bottom: .6em;
	}
	.fv-catch-sub p{
		font-size: clamp(1.3rem, 1.5vw, 1.8rem);
	}
	/* mv visual（画面右半分にフィット・viewport追従） */
	.fv-visual{
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 46vw;
		z-index: 4;
		overflow: hidden;
	}
	.fv-visual img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		display: block;
	}
	.fv-lead p{
		font-size: .8rem;
		line-height: 1.9;
		max-width: 43em;
	}
	.fv-badges{
		gap: 10px;
	}
	.fv-badges li{
		font-size: .85em;
		padding: 7px 18px;
	}
	.fv-cta-primary{
		padding: 20px 55px 20px 50px;
	}
	/* AIO回答ボックス（FAQ柄） */
	.aio-faq{
		padding: 26px 32px;
	}
	.aio-faq-q{
		font-size: 1.05em;
	}
	.aio-faq-a p{
		font-size: .95em;
		line-height: 1.85;
	}
	/* 課題提起セクション */
	.problem-list{
		grid-template-columns: 1fr 1fr 1fr;
		gap: 22px;
		margin: 40px 0 0;
	}
	.problem-card{
		padding: 34px 28px 26px;
	}
	.problem-check{
		width: 42px;
		height: 42px;
		font-size: 1.1em;
		top: -16px;
		left: -16px;
	}
	.problem-icon{
		width: 170px;
		margin-bottom: 24px;
	}
	.problem-title{
		font-size: 1.1em;
		margin-bottom: 18px;
	}
	.problem-desc p{
		font-size: .9em;
	}
	/* 損失インパクト表 */
	.contents.loss-section{
		padding: 80px 0 90px;
	}
	.loss-eyebrow{
		margin-bottom: 22px;
	}
	.loss-eyebrow-line{
		font-size: .8em;
		letter-spacing: .22em;
		padding: 6px 18px;
	}
	.loss-section .loss-headline{
		margin-bottom: 40px;
	}
	.loss-grid{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 60px;
		align-items: center;
	}
	.loss-lead p{
		font-size: 1em;
		line-height: 2;
	}
	.loss-note p{
		font-size: .78em;
	}
	.loss-table{
		margin-top: 0;
	}
	.loss-row{
		padding: 20px 26px;
	}
	.loss-label p{
		font-size: .95em;
	}
	.loss-value p{
		font-size: 1.1em;
	}
	.loss-num{
		font-size: 1.6em;
	}
	.loss-row.loss-roi{
		padding: 28px 26px;
	}
	.loss-row.loss-roi .loss-num{
		font-size: 2.3em;
	}
	.pc-br{
		display: inline;
	}
	/* MITERASとは */
	.about-eyebrow{
		margin-bottom: 22px;
	}
	.about-headline{
		margin-bottom: 36px;
	}
	.about-body{
		margin-top: 70px;
		margin-bottom: 50px;
	}
	.about-body p{
		font-size: 1em;
		line-height: 2.1;
	}
	/* できること（原稿P10の5項目） */
	.about-capability-list{
		margin-bottom: 34px;
	}
	.about-capability-list ul{
		grid-template-columns: 1fr 1fr;
		gap: 10px 30px;
	}
	.about-capability-list li{
		font-size: .95em;
	}
	.about-terms,
	.about-targets{
		margin-bottom: 32px;
	}
	.about-subtitle{
		font-size: .95em;
		margin-bottom: 14px;
	}
	.about-chips{
		gap: 10px;
	}
	.about-chips li{
		font-size: .9em;
		padding: 8px 18px;
	}
	.about-terms-list{
		grid-template-columns: 1fr 1fr 1fr;
		gap: 16px;
		margin-bottom: 30px;
	}
	.about-terms-list li{
		font-size: 1em;
		padding: 16px 18px;
	}
	.about-pitch{
		margin-bottom: 40px;
	}
	.about-pitch a{
		padding: 26px 50px 32px 32px;
	}
	.about-pitch p{
		font-size: 1em;
	}
	/* 始めやすい4つの理由 */
	.reason-lead{
		margin-bottom: 40px;
	}
	.reason-lead p{
		font-size: 1em;
		line-height: 2;
	}
	.reason-list{
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		margin: 40px 0 0;
	}
	.reason-card{
		padding: 32px 30px;
	}
	.reason-num{
		font-size: .82em;
	}
	.reason-title{
		font-size: 1.2em;
		margin-bottom: 14px;
	}
	.reason-desc p{
		font-size: .92em;
	}
	/* 5アルゴリズム合議制 */
	.algo-body{
		margin-bottom: 40px;
	}
	.algo-body p{
		font-size: 1em;
		line-height: 2;
	}
	.algo-consensus{
		margin-top: 40px;
		padding: 36px 40px;
	}
	.algo-consensus-text{
		margin-bottom: 28px;
		text-align: center;
	}
	.algo-consensus-title{
		font-size: 1.25em;
		margin-bottom: 16px;
	}
	.algo-consensus-desc p{
		font-size: .95em;
		margin-bottom: 0;
		max-width: 760px;
		margin-left: auto;
		margin-right: auto;
	}
	.algo-consensus-img{
		margin: 0;
		padding: 20px;
	}
	/* 現場ヒアリング整合パネル */
	.algo-hearing{
		margin-top: 22px;
		padding: 28px 36px;
		gap: 22px;
	}
	.algo-hearing-icon{
		width: 60px;
		height: 60px;
		font-size: 1.5em;
	}
	.algo-hearing-title{
		font-size: 1.18em;
	}
	.algo-hearing-desc p{
		font-size: .95em;
		line-height: 2;
	}
	/* 診断レポートで分かること */
	.report-lead{
		margin-bottom: 40px;
	}
	.report-lead p{
		font-size: 1em;
		line-height: 2;
	}
	.report-main{
		margin-bottom: 32px;
	}
	.report-main-info{
		padding: 32px 40px 28px;
		text-align: center;
	}
	.report-main-eyebrow{
		font-size: .8em;
		letter-spacing: .18em;
	}
	.report-main-title{
		font-size: 1.3em;
		margin-bottom: 14px;
	}
	.report-main-desc p{
		font-size: .95em;
		line-height: 2;
	}
	.report-sub-list{
		grid-template-columns: 1fr 1fr;
		gap: 22px;
	}
	.report-sub-info{
		flex: 1;
		padding: 22px 26px;
	}
	.report-sub-title{
		font-size: 1.05em;
		margin: 0 0 10px;
	}
	.report-sub-desc{
		padding: 0;
	}
	.report-sub-desc p{
		font-size: .9em;
	}
	/* 他社比較表 */
	.compare-lead{
		margin-bottom: 40px;
	}
	.compare-lead p{
		font-size: 1em;
		line-height: 2;
	}
	.compare-table-wrap{
		overflow-x: visible;
	}
	.compare-table{
		min-width: 0;
	}
	.compare-table th,
	.compare-table td{
		padding: 20px 24px;
		font-size: .95em;
	}
	.compare-table thead th{
		font-size: .9em;
		padding: 22px 20px;
	}
	.compare-table tbody th{
		width: 16%;
		font-size: .95em;
	}
	.compare-table thead .compare-th-miteras{
		font-size: 1.15em;
		width: 24%;
	}
	.compare-scroll-hint{
		display: none;
	}
	/* 対象業種・用途 */
	.usecase-scope-lead{
		margin-bottom: 40px;
	}
	.usecase-scope-lead p{
		font-size: 1em;
		line-height: 2;
	}
	.usecase-scope-list{
		grid-template-columns: 1fr 1fr 1fr;
		gap: 22px;
		margin: 40px 0 0;
	}
	.usecase-scope-card{
		padding: 32px 26px;
	}
	.usecase-scope-icon{
		width: 64px;
		height: 64px;
		font-size: 1.7em;
		margin-bottom: 18px;
	}
	.usecase-scope-title{
		font-size: 1.08em;
		margin-bottom: 12px;
		/* JSで高さを揃えるため、1行のタイトルは縦中央に置く */
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.usecase-scope-desc p{
		font-size: .9em;
	}
	/* 1ヶ月フロー */
	.flow-lead{
		margin-bottom: 40px;
	}
	.flow-lead p{
		font-size: 1em;
		line-height: 2;
		/* PCも文字は中央揃え（tabの display:table / margin:auto はそのまま継承） */
		text-align: center;
	}
	.flow-list{
		flex-direction: row;
		gap: 30px;  /* 矢印(::after 幅18px)がカード外にはみ出すため、隙間を確保 */
		margin: 40px 0 0;
	}
	.flow-step{
		flex: 1;
		padding: 0;
	}
	.flow-step:not(:last-child)::after{
		bottom: auto;
		top: 50%;
		left: auto;
		right: -16px;
		transform: translate(50%, -50%);
		border-width: 14px 0 14px 18px;
		border-color: transparent transparent transparent var(--miteras-accent);
	}
	.flow-step-num{
		width: 76px;
		height: 76px;
		font-size: .72em;
		margin: 32px auto 14px;
	}
	.flow-step-num span{
		font-size: 1.9em;
	}
	.flow-step-body{
		padding: 0 24px 28px;
	}
	.flow-step-title{
		font-size: 1.12em;
		margin: 4px 0 12px;
	}
	.flow-step-desc p{
		font-size: .9em;
		text-align: left;
	}
	.flow-step-period{
		padding: 14px 14px;
		font-size: .88em;
	}
	/* USE CASE 現場の課題とMITERASの活用 */
	/* USE CASE（活用シーン） ※適用範囲側は .usecase-scope-lead */
	.voice-lead{
		margin-bottom: 40px;
	}
	.voice-lead p{
		font-size: 1em;
		line-height: 2;
		/* PCも文字は中央揃え（tabの display:table / margin:auto はそのまま継承） */
		text-align: center;
	}
	/* SCANの条件（1台・1工程・2週間・30万円）はPCでだけ塊で改行させない */
	.voice-lead-scan{
		display: inline-block;
	}
	.voice-list{
		/* お客様の声3枚を横3カラム。w1200 を超えて広げている（担当者指定）
		   ※ .contents は overflow:hidden のため、はみ出しても横スクロールは出ない */
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
		width: calc(100vw - 80px);
		max-width: 1440px;
		margin: 70px 0 0 50%;
		transform: translateX(-50%);
	}
	.voice-card{
		padding: 50px 28px 30px;
	}
	.voice-quote-mark{
		top: -30px;
	}
	.voice-title p{
		font-size: 1.05em;
	}
	.voice-body p{
		font-size: .9em;
	}
	/* PRICE 料金 */
	.price-lead{
		margin-bottom: 40px;
	}
	.price-lead p{
		font-size: 1em;
		line-height: 2;
	}
	.price-plan-list{
		max-width: none;  /* SPの720px制限を解除 */
		/* 769～1199px：金額7桁が3カラムに収まらないため SCAN／FOCUS の2カラム＋PARTNERは下段 */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
		align-items: stretch;
	}
	.price-card-partner{
		grid-column: 1 / -1;  /* 下段に横幅いっぱいで配置 */
	}
	.price-card{
		padding: 32px 24px 26px;
	}
	.price-plan-sub{
		font-size: .74em;
	}
	.price-plan-badge{
		font-size: .82em;
	}
	.price-plan-name{
		font-size: 1.2em;
	}
	.price-card-amount{
		padding: 22px 16px;
	}
	.price-amount-yen{
		font-size: 1.6em;
	}
	.price-amount-num{
		font-size: 2.3em;  /* 7桁＋（税抜）～が1行に収まる上限 */
	}
	.price-amount-dual .price-amount-num{
		font-size: 1.9em;
	}
	.price-amount-tax{
		font-size: .82em;
	}
	.price-card-period{
		font-size: 1em;
	}
	.price-card-content{
		padding: 22px 20px;
	}
	.price-card-content-title{
		font-size: 1em;
	}
	.price-include-list ul{
		grid-template-columns: 1fr;  /* PCは3カラム並びのため1列に戻す（tabの2列を打ち消し） */
		gap: 12px;
	}
	.price-include-list li{
		font-size: .88em;
	}
	.price-card-desc p{
		font-size: .88em;
	}
	.price-note p{
		font-size: .82em;
	}
	.price-cta-btn{
		font-size: .95em;
		padding: 18px 16px;
		gap: 10px;
	}
	/* FAQ */
	.faq-item{
		padding: 30px 32px;
	}
	.faq-question{
		gap: 16px;
		padding-bottom: 18px;
		margin-bottom: 18px;
	}
	.faq-answer{
		gap: 16px;
	}
	.faq-q-mark,
	.faq-a-mark{
		width: 42px;
		height: 42px;
		font-size: 1.15em;
	}
	.faq-q-text{
		font-size: 1.18em;
		margin-top: 8px;
	}
	.faq-a-text{
		padding-top: 8px;
	}
	.faq-a-text p{
		font-size: .95em;
	}
	/* 会社概要 認定・宣言マーク */
	.cpn-credentials{
		grid-template-columns: 1fr 1fr;
		gap: 14px;
		margin-top: 18px;       /* 控えめに：余白縮小 */
	}
	.cpn-credential{
		padding: 16px 18px;     /* 縦積み・枠ありコンパクトな箱 */
		gap: 10px;
	}
	/* .cpn-credential-img の高さ70pxはSPから継承 */
	.cpn-credential-title{
		font-size: .86em;
	}
	.cpn-credential-desc p{
		font-size: .76em;
	}
	/* 最終CTA */
	.final-cta-section::before{
		top: -160px;
		right: -120px;
		width: 480px;
		height: 480px;
	}
	.final-cta-section::after{
		width: 100%;
		height: 80%;
		background-size: auto 100%;
	}
	.final-cta{
		max-width: 880px;
		padding: 30px 0;
	}
	.final-cta-eyebrow{
		font-size: .95em;
	}
	.final-cta-catch{
		font-size: 2.6em;
		margin-bottom: 26px;
	}
	.final-cta-lead{
		margin-top: 58px;
		margin-bottom: 54px;
	}
	.final-cta-lead p{
		font-size: 1em;
		line-height: 2;
	}
	.final-cta-btn{
		font-size: 1.15em;
		padding: 26px 70px 26px 38px;
	}
	.final-cta-badge{
		width: 76px;
		height: 76px;
		font-size: .78em;
		top: -18px;
		left: -16px;
	}
	.final-cta-btn i.fa-arrow-right{
		right: 28px;
	}
	#top_bottom{
		padding: 22px 40px;
	}
	#top_bottom p{
		font-size: .92em;
	}

	
	/* -----------------------------------------------------------------------------
	 損失インパクト表（上段・下段それぞれ2カラム）
	----------------------------------------------------------------------------- */
	.loss-grid{
		display: flex;
		align-items: flex-start;
		gap: 40px;
	}
	.loss-grid > *{
		flex: 1 1 0;
		min-width: 0;
	}
	.loss-grid-upper{
		margin-top: 70px;
	}
	.loss-lower-block{
		margin-top: 70px;
	}
	.loss-grid-lower .loss-note{
		margin-top: 0;
	}
}

/* *****************************************************************************
   追加ブレイクポイント：1200px以上
   PRICEの3プランを横並びに戻すための追加指定。
   1199px以下では金額7桁（月額¥1,500,000）が3カラムに収まらず「月額」が縦積みに
   なるため、その帯は2カラム＋PARTNER下段とし、1200px以上で本来の3カラムへ戻す。
   ※ .w1200（最大幅1200px）が頭打ちのため、1200px未満では3カラムに必要な幅を確保できない。
***************************************************************************** */
@media screen and (min-width: 1200px), print {

	.price-plan-list{
		grid-template-columns: repeat(3, minmax(0, 1fr));  /* 3プラン横並び */
	}
	.price-card-partner{
		grid-column: auto;  /* 下段いっぱいの指定を打ち消し */
	}

}

/* *****************************************************************************
   追加ブレイクポイント（担当者指定）
   769～900px：PCで2カラムに切り替わった直後は「見える化対象額の試算」の表幅が
   狭く、回収目安の行が窮屈になるため、SPと同じく「対象額の／約3.5%改善」で改行する
***************************************************************************** */
@media screen and (min-width: 769px) and (max-width: 900px) {
	.loss-roi .loss-value .loss-roi-amount{
		display: block;
	}
}

/* *****************************************************************************
   追加ブレイクポイント（担当者指定）
   769～1023px：VOICE（お客様の声）を2カラムに落とす。
   3カラムのままだとカード中身の幅が約158px（769px時）まで潰れて読めないため。
   3枚目（PARTNER）は右下に穴が空かないよう2カラム分の全幅にする。
   1024px以上は本来の3カラム（769pxのmedia内で指定）へ戻る。
***************************************************************************** */
@media screen and (min-width: 769px) and (max-width: 1023px) {
	.voice-list{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.voice-card-partner{
		grid-column: 1 / -1;  /* 3枚目は下段いっぱい */
	}
}