@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 > .logo h1{
		font-size: 16px;
	}
	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;
	}

	
	/* -----------------------------------------------------------------------------
	 Top Contents
	----------------------------------------------------------------------------- */
	/* 背景はspのグラデをそのまま継承（body背景色で塗り潰さない） */
	

	

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

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

	.w1024 {
		position: relative;
		max-width: 1024px;
		margin: 60px auto;
	}
	
	.w1024.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 {
		/* 背景色はhoverでも変えない（上のエリア色#f5f5f5のまま／矢印だけ赤くする演出） */
		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;
	}
	
	/* 横問合せボタン（PCも画面下中央に固定・3ボタン横並び） */
	.cv_btn_area {
		width: 100%;
		right: auto;
		top: auto;
		left: 0;
    	bottom: 0;
		overflow: visible; /* spのoverflow:hiddenを打ち消し。hoverで上へ出るボタンが切れないように */
		border-top: none; /* SP・tabで入れた薄い白ラインを打ち消し */
	}
	.cv_btn_area .btn{
		flex-direction: row;
		justify-content: center;
		max-width: 900px;
		margin: 0 auto;
	}
	.cv_btn_area .btn a {
		flex-direction: row;
		width: 100%;
		height: 50px;
		font-size: 14px;
		border-radius: 10px 10px 0 0;
		padding: 12px 10px;
		margin: 0 2px 0 2px;
		transition: height .25s ease, box-shadow .25s ease;
	}
	/* hoverで上へにょきっと伸びる。
	   .btnがalign-items:flex-end（下端揃え）なので、heightを増やすと下端は画面下に付いたまま上だけ伸びる。
	   transform:translateYだとボタンごと移動して下端が浮いてしまうので使わない */
	.cv_btn_area .btn a:hover {
		height: 60px;
		box-shadow: 0 -4px 14px rgba(0,0,0,.25);
	}
	/* 「お申込み」は常時光彩あり。hoverのbox-shadowで上書きされて光彩が消えないよう、2つ重ねる */
	.cv_btn_area .btn a:last-child:hover {
		box-shadow: 0 0 12px 3px rgba(255,255,255,.55), 0 -4px 14px rgba(0,0,0,.25);
	}
	.cv_btn_area .btn a i {
		margin-bottom: 0;
		margin-right: 10px;
	}
	/* 矢印マークはPCのみ表示（sp・tabでは非表示） */
	.cv_btn_area .btn a:after{
		display: table;
	}

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

/* -----------------------------------------------------------------------------
 個別設定（AIO対策プチコンサル 産業Navi55AIDX）
----------------------------------------------------------------------------- */

	/* ファーストビュー */
	/* 背景画像はPCのみ fv01.webp（sp〜tabの fv_sp01.webp を打ち消し。sizeは両方coverなので継承のまま） */
	#top-contents{
		background-image: url("../../p-img/101614_2/fv01.webp");
	}
	/* PC（769px〜）で左テキスト／右イラストの2カラム（sp・tabは縦積み） */
	#top-contents .layer1{
		padding: 56px 20px;
	}
	#top-contents .fv-inner{
		display: grid;
		grid-template-columns: 1.05fr .95fr;
		align-items: center;
		gap: 40px;
		max-width: 1200px;
	}
	#top-contents .fv-visual{
		margin-top: 0;
	}
	#top-contents .fv-visual img{
		max-width: 480px;
		margin: 0 0 0 auto;
	}
	#top-contents .layer1 .fv-cta{
		justify-content: flex-start; /* tabのcenterを打ち消し（左カラムなので左寄せ） */
	}
	#top-contents .layer1 .fv-service-name p{
		margin-left: 0; /* spのmargin:autoによる中央寄せを打ち消して左寄せ */
	}
	#top-contents .layer1 .fv-catch{
		font-size: calc(1.4em + 2.2vw);
		text-align: left;
	}
	#top-contents .layer1 .fv-cta-btn{
		font-size: 1.1em;
		padding: 1.1em 2em;
		/* tabの均等伸縮(flex:1 1 0)を解除。自然幅を保ち、左カラムに入らなければ折り返す。
		   min-widthを揃えることで折り返した時も2ボタンの幅が揃う */
		flex: 0 1 auto;
		min-width: 260px;
		white-space: nowrap;
	}

	/* ② 導入（tab以下は縦積み、PCで2カラム） */
	.aio-intro-cards{
		grid-template-columns: repeat(2, 1fr);
	}

	/* ③ コンセプト（tabの1カラムから3カラムへ） */
	.addon-point-list{
		grid-template-columns: repeat(3, 1fr);
	}
	.addon-point-list .addon-point-card:nth-child(3){
		grid-column: auto; /* tabの2行目中央指定を打ち消し（3カラムなので通常配置） */
		max-width: none;
		margin-inline: 0;
	}

	/* ④ 提供内容（tab以下は縦積み、PCで2カラム） */
	.service-menu-list{
		grid-template-columns: repeat(2, 1fr);
	}
	.service-menu-title{
		font-size: 1.4em;
	}

	/* ④ サービス概要（PCは横長画像なので最大幅の制限を解除しフル幅に） */
	.service-overview-figure img{
		max-width: none;
		padding-bottom: 0; /* PCだけ下の余白を詰める（SPの12pxから） */
	}

	/* ⑤ 対象 */
	.target-contents::after{
		right: max(0px, calc((100% - 1024px) / 2)); /* 装飾をw1024の右端あたりに合わせる（w1024はmax1024px中央寄せ） */
	}
	.target-check-list ul{
		gap: 16px;
	}

	/* ⑥ 選び方｜判断基準（SPで隠した改行をPCで復活させる） */
	.decision-closing-text br.inblock-br{
		display: inline;
	}
	.decision-closing-text p{
		font-size: 1.25em;
	}

	/* ⑦ 比較表（3列とも収まるのでSPのmin-widthを解除＝横スクロール不要になる） */
	.consul-compare-table table{
		min-width: 0;
	}
	/* 横スクロール不要になるのでヒント矢印は非表示 */
	.consul-compare-hint{
		display: none;
	}

	/* ⑧ 成果・実績 */
	.result-stat-num p{
		font-size: 3em;
	}

	/* ⑧-2 成功事例 */
	.citation-cases-item{
		padding: 40px 30px;
	}

	/* ⑧-3 お客様の声（tabの1カラムから3カラムへ。カード下端を揃えるため本文に最小高さを設ける） */
	.customer-voice-grid{
		grid-template-columns: repeat(3, 1fr);
		gap: 20px 22px;
	}
	.customer-voice-card{
		padding: 16px 16px 18px;
	}
	.voice-comment p{
		font-size: 16px;
		min-height: 200px;
	}

	/* ⑨ 料金 */
	.price-plan-amount p{
		font-size: 2em;
	}
	.price-include-list ul{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 4px 100px; /* 4項目を2個ずつ2カラムに（行間4px・列間100px） */
	}

	/* ⑩ 進め方（SPの縦積み＋下向き矢印を、横4カラム＋右向き矢印に打ち消し） */
	.setup-flow-list ul{
		grid-template-columns: repeat(4, 1fr);
		gap: 40px 32px;
	}
	.setup-flow-item:after{
		content: "\f054";
		top: 50%;
		left: calc(100% + 16px); /* 列間32pxの中央 */
		right: auto;
		bottom: auto;
		transform: translate(-50%, -50%);
	}

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

	/* クロージングCTA */
	.final-cta-btns{
		gap: 20px;
	}
	.final-cta-btn-item .mail_button{
		font-size: 1.5em;
		padding: 1.2em 1em;
	}
	.hero-form-head .ttl p{
		font-size: 28px;
	}
	.hero-form button{
		font-size: 24px;
	}









	
}

/* *****************************************************************************
   追加ブレイクポイント：769〜999px（担当者指定）
   2カラムだが左カラムが狭く、CTAボタンが折り返す／イラストが下がって見えるため、
   この幅だけボタンを小さめの均等横並びにし、イラストを上寄せにする
***************************************************************************** */
@media screen and (min-width: 769px) and (max-width: 999px) {

	/* 右のイラストを上へ（gridのalign-items:centerを打ち消し） */
	#top-contents .fv-visual{
		align-self: start;
	}
	/* CTAは2つ横並び。min-width:260pxのままだと左カラムに入りきらず折り返すため解除 */
	#top-contents .layer1 .fv-cta-btn{
		flex: 1 1 0;
		min-width: 0;
		font-size: .9em;
		padding: .9em .8em;
	}

}