@charset "utf-8";

/* -----------------------------------------------------------------------------
 環境設定
----------------------------------------------------------------------------- */
/* 定義 */
:root {
	/* 色 */
	--main-color: #4794a1; /* メインカラー */
	--sub-color: #336a73; /* サブカラー */
	--accent-color: #e9c46a; /* アクセントカラー */
	--blue-color: #1158ac; /* ブルーカラー */
	--green-color: #2f9fa5; /* グリーンカラー（碧） */
	--dark-color: #683746; /* ダークカラー */
	--light-color: #f0f8f6; /* ライトカラー */
	--light-gray: #F1F2F2; /* ライトグレー */
	--white: #fff; /* ホワイト */

	/* 全体 */
	--body-font-family: 'Noto Sans JP', sans-serif; /* フォントfamily */
	--body-font-size: 16px; /* 文字サイズ */
	--body-line-height: 2; /* 行間 */
	--body-font-color: #333; /* 文字色*/
	--body-bg-color: #fff; /* 背景色 */
	--link-a-color: var(--main-color); /* リンク文字色 */
	--link-a-hover-color: var(--accent-color); /* リンク文字色 hover */
	
	
	/* ヘッダー */
	--header-bg-color: #fff; /* 背景色 */
	--header-logo-color: #111; /* ロゴ色 */
	--header-menu-txt-color: #555; /* メニュー文字色 */
	--header-sub-menu-color: #aaa; /* ハンバーガーメニュー色 */
	--header-sub-menu-bg-color: #f5f5f5; /* サブメニュー背景色 */
	
	/* タイトル */
	--h1-main-font-family: inherit; /* メイン フォントfamily */
	--h1-main-font-weight: 900; /* メイン 文字太さ */
	--h1-main-color: var(--main-color); /* メイン色 */
	--h1-sub-font-family: inherit; /* サブ フォントfamily */
	--h1-sub-font-weight: 500; /* サブ 文字太さ */

	/* コンテンツ タイトル */
	--h2-contents1-color: var(--dark-color); /* 文字色 */
	--h2-contents1-weight: 900; /* 文字太さ */

	/* コンテンツ */
	--list-style-color: var(--main-color); /* リストアイコン色 */
	--col-line-height: 1.6; /* 2分割・3分割・4分割の行間 */
	
	/* 会社概要 */
	--cpn-table-border: #ccc; /* table線色 */
	--cpn-th-color: #aaa; /* th色 */
	
	/* お問合せ */
	--contact-tel-font-family: 'Noto Sans JP', sans-serif; /* TELフォントfamily */
	--contact-tel-font-weight: 700; /* TEL文字太さ */
	--contact-tel-color: #333; /* TEL文字色 */
	--contact-center-line-color: #ccc; /* 中央線 */
	--contact-form-btn-txt-color: #fff; /* フォームボタン文字色 */
	--contact-form-btn-bg-color: #333; /* フォームボタン背景色 */
	
	/* フッター */
	--footer-bg-color: var(--sub-color); /* 背景色 */
	--footer-txt-color: var(--white); /* 文字色 */
	--footer-txt-hover-color: var(--accent-color); /* 文字色 hover */
	--footer-arrow-color: var(--accent-color); /* TOPへ戻る矢印色 */
	--footer-arrow-bg-color: var(--light-color); /* TOPへ戻る矢印背景色 */
	--footer-arrow-hover-color: var(--main-color); /* TOPへ戻る矢印色 hover */
	--footer-arrow-hover-bg-color: var(--light-color); /* TOPへ戻る矢印背景色 hover */
	--footer-top-border-size: 0px; /* border-top 太さ */
	--footer-top-border-color: var(--dark-color); /* border-top 色 */
	--footer-logo-width: 100px; /* ロゴ 横幅 */
	--footer-name-font-size: 1.5em; /* 会社名 文字サイズ */
	--footer-name-font-weight: 700; /* 会社名 文字太さ */
	
	/* 常駐ボタン */
	--side-btn-txt-color: #fff; /* 文字色 */
	--side-btn-txt-weight: 700; /* 文字太さ */
	--side-btn-bg-color: var(--main-color); /* 背景色(上) */
	--side-btn-bg-color2: var(--sub-color); /* 背景色(下) */
}


/* 背景 */
.contents_bg1{
	background-color: var(--light-color)!important;
}
.contents_bg3{
	background-color: #f5f5f5!important;
}
/* ⑧ 成果・実績＋引用事例：白地に40pxグリッドタイルを敷き詰め */
.result-cases-contents{
	background-color: #fff;
	background-image: url("../../p-img/101614_2/bg-grid1.webp");
	background-repeat: repeat;
	background-position: center top;
}


/* -----------------------------------------------------------------------------
 Header
----------------------------------------------------------------------------- */
header {
	height: 50px;
}
header a {
	text-decoration: none !important;
}
header > .inner {
	width: 100%;
	background-color: var(--header-bg-color);
	box-shadow: 0px 3px 10px 0px rgba(204,204,204,0.20);
}
header > .inner > .logo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 0 50px 0 10px;
	border: none;
}
header > .inner > .logo h1{
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	color: var(--header-logo-color);
	margin: 0;
}
header > .inner > navi > ul {
	display: block;
}
header > .inner > navi > ul > li {
	padding-left: 0;
	text-indent: 0;
}
header > .inner > navi > ul > li a {
	display: block;
	width: 100%;
	height: 100%;
	font-size: .95em;
	color: var(--header-menu-txt-color);
	margin: 0;
	padding: 5px 20px;
	border: none;
}
header > .inner > navi > .translation {
	padding: 5px 20px;
	display: block;
}


/* bt-menu */
#bt-menu {
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
	background-color: var(--header-bg-color);
	z-index: 10;
	cursor: pointer;
}
#bt-menu span {
	position: absolute;
	top: 24px;
	right: 10px;
	width: 30px;
	height: 2px;
	background-color: var(--header-sub-menu-color);
	transition: .3s;
}
#bt-menu span::before {
	position: absolute;
	top: -10px;
	right: 0;
	content: "";
	width: 30px;
	height: 2px;
	background-color: var(--header-sub-menu-color);
	display: block;
	transition: .3s;
}
#bt-menu span::after {
	position: absolute;
	top: 10px;
	right: 0;
	content: "";
	width: 30px;
	height: 2px;
	background-color: var(--header-sub-menu-color);
	display: block;
	transition: .3s;
}
#bt-menu.open span {
	background-color: transparent;
	transition: .3s;
}
#bt-menu.open span::before {
	top: 0;
	transform: rotate(45deg);
	transition: .3s;
}
#bt-menu.open span::after {
	top: 0;
	transform: rotate(-45deg);
	transition: .3s;
}

/* style1 */
header.style1 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: var(--header-bg-color);
	z-index: 999;
}
header.style1 > .inner > .logo {
	height: 50px;
	vertical-align: middle;
}
header.style1 > .inner > navi {
	position: absolute;
	top: 50px;
	right: 0;
	padding: 5px 0 10px;
	background-color: var(--header-sub-menu-bg-color);
	opacity: 0;
}	


/* powered by Sangyo Navi */
.powered {
	display: block;
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 12px;
	color: #bbb;
	text-align: right;
	margin: 5px 10px 0;
	padding: 3px 5px 0;
	border-top: 1px solid #ddd;
}


/* -----------------------------------------------------------------------------
 Top Contents
----------------------------------------------------------------------------- */
/* 背景は fv01.webp 1枚。右下を中心に配置し、上・左ははみ出して見切れる想定 */
#top-contents {
	width: 100%;
	position: relative;
	overflow: hidden;
	margin: 0;
	background-image: url("../../p-img/101614_2/fv_sp01.webp"); /* sp〜tabはスマホ用（tabは継承）。pcで fv01.webp に上書き */
	background-position: 70% bottom;
	background-size: cover;
	background-repeat: no-repeat;
}
#top-contents .layer1 {
	position: relative;
	box-sizing: border-box;
	padding: 40px 5% 45vw; /* sp〜tabは下を広めに（tabはlayer1再定義なしで継承／pcは下記 padding:56px 20px の一括指定で打ち消し済み） */
	/* z-indexを付けると重なりコンテキストができ、
	   .fv-visual img の mix-blend-mode が #top-contents の背景に届かなくなるので付けない */
}
#top-contents .fv-inner {
	max-width: 640px;
	margin: 0 auto;
}
#top-contents .layer1 h2{
	font-weight: 900;
	font-size: calc(1.8em + 2.2vw); /* MVの箱から溢れないサイズに抑える */
	line-height: 1.4;
	text-align: center;
}
#top-contents .fv-visual {
	margin-top: 26px;
}
#top-contents .fv-visual img {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	margin: 0 auto;
	mix-blend-mode: screen; /* イラストの光まわりの黒フェードを背景に溶かす */
}

/* -----------------------------------------------------------------------------
 Breadcrumb
----------------------------------------------------------------------------- */
#breadcrumb {
	font-size: 0.85em;
	max-width: 100%;
	margin: 0 auto;
	padding: 15px 10px;
	text-align: left;
	background-color: var(--body-bg-color);
}
#breadcrumb .login {
	width: 120px;
	text-align: right;
	float: right;
}
#breadcrumb .login img {
	margin-right: 5px;
	vertical-align: top;
}
#breadcrumb .login a {
	color: var(--body-font-color);
	text-decoration:none;
	border: none;
}
#breadcrumb .login a:hover {
	color: var(--link-a-hover-color);
	text-decoration:none;
	border: none;
}
#breadcrumb .bc img {
	width: 14px;
	vertical-align: top;
}
#breadcrumb .bc a {
	color: var(--body-font-color);
	text-decoration:none;
	border: none;
}
#breadcrumb .bc a:hover {
	color: var(--link-a-hover-color);
	text-decoration: none;
	border: none;
}


/* -----------------------------------------------------------------------------
 contents
----------------------------------------------------------------------------- */
main .contents {
	background-color: var(--body-bg-color);
	overflow: hidden;
}
main .contents.fixed {
	background-color: transparent;
}
main .contents .fixed-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: -1;
}

.w1024 {
	height: auto !important;
	margin: 60px 10px;
}
.w1024.bg {
	background-color: #fff;
	padding: 20px;
}

.layer {
	position: static;
	width: 100% !important;
}

.contents section {
	margin: 0 10px 40px;
}


/* -----------------------------------------------------------------------------
 Footer
----------------------------------------------------------------------------- */
footer {
	position: relative;
	font-size: 0.92em;
	padding: 50px 0 30px;
	border-top: var(--footer-top-border-size) solid var(--footer-top-border-color);
	background-color: var(--footer-bg-color);
	background-size: cover;
	box-sizing: border-box;
	margin-bottom: 45px; /* 下部追従ボタン(高さ45px)と揃えてフッターとの隙間をなくす */
}
footer .pagetop a {
	position: absolute;
	top: calc(-25px - var(--footer-top-border-size));
	left: 50%;
	width: 50px;
	height: 50px;
	margin-left: -25px;
	background-color: #f5f5f5; /* 上のエリア(NEWS/最終CTA＝contents_bg3)の背景色に合わせる */
	text-decoration: none;
	border-radius: 50%;
	box-sizing: border-box;
	display: block;
}
footer .pagetop a::before {
	color: var(--footer-arrow-color);
	font-size: 20px;
	content: "▲";
	margin-top: 14px;
	text-align: center;
	line-height: 1em;
	display: block;
	transition: .3s;
}
footer .inner {
	margin: 0 10px;
}
footer .pagetop a span {
	display: none;
}
footer .login {
	margin: 40px auto 5px;
	text-align: center;
	display: block;
}
footer .login img {
	width: 14px;
	margin-right: 5px;
	vertical-align: 0;
}
footer .login a {
	font-size: 14px;
	color: var(--footer-txt-color);
	text-decoration: none;
	border: none;
	display: inline-block;
}
footer.login a:hover {
	color: var(--footer-txt-hover-color);
	text-decoration: none;
	border: none;
}
footer .copy {
	font-size: 13px;
	line-height: 2;
	color: var(--footer-txt-color);
	text-align: center;
}
footer .copy a{
	border: none;
}
footer .copy img{
	width: 124px;
}
.footer-info{
	color: var(--footer-txt-color);
	text-align:center;
}

.footer-info .logo{
	width: var(--footer-logo-width);
	box-sizing: border-box;
	margin: 0 auto 10px;
}
.footer-info .name{
	font-weight: var(--footer-name-font-weight);
	font-size: var(--footer-name-font-size);
}
.footer-info .mail{
	margin-top: 10px;
}
.footer-info .mail a{
	display: table;
	text-decoration: none;
	color: var(--footer-bg-color);
	background-color: var(--footer-txt-color);
	border-radius: 60px;
	padding: 0 30px;
	margin: 0 auto 8px; /* ボタン同士がくっつかないよう下に隙間 */
}
.footer-info .mail a:last-child{
	margin-bottom: 0;
}
.footer-info .mail a:hover{
	opacity: 1;
	transform: scale(1.1);
}
.footer-info .mail a i{
	margin-right: 3px;
}


/* -----------------------------------------------------------------------------
 共通 parts
----------------------------------------------------------------------------- */
/* parts-h1 */
.parts-h1 {
	font-family: var(--h1-main-font-family);
	font-weight: var(--h1-main-font-weight);
	font-size: calc(1.5em + 1.5vw);
	text-align: center;
	color: var(--h1-main-color);
	line-height: 1.6;
	letter-spacing: 2px;
	margin-bottom: 1em;
}
.parts-h1 .small{
	display: block;
	font-family: var(--h1-sub-font-family);
	font-weight: var(--h1-sub-font-weight);
	font-size: .4em;
	color: var(--main-color);
	text-shadow: none;
}

/* parts-h2 */
.parts-h2 {
	font-weight: var(--h2-contents1-weight);
	font-size: calc(1.3em + 1vw);
	color: var(--h2-contents1-color);
	text-align: center;
	line-height: 1.5;
	margin-bottom: .5em;
}

/* parts-h3 */
.parts-h3 {
	font-size: calc(1em + .5vw);
	line-height: 1.5;
	color: var(--dark-color);
	border-bottom: 1px solid var(--dark-color);
	padding-bottom: .3em;
	margin-bottom: 1em;
}

/* parts-h4 */
.parts-h4 {
	font-weight: 300;
	font-size: 1em;
}

/* parts-img */
.parts-img {
	margin-bottom: 2em;
}
.parts-img img {
	height: auto;
	width: auto;
}

/* parts-map */
.parts-map {
	max-width: 100%;
	margin-bottom: 2em;
}

/* parts-news */
.parts-news {
	height: 200px;
	margin-bottom: 2em;
	padding: 15px;
	background-color: var(--body-bg-color);
	border: 1px solid #999;
	overflow-y: scroll;
	box-sizing: border-box;
}
.parts-news.show {
	height: auto !important;
	overflow-y: visible;
}
.parts-news > p {
	margin-bottom: 1em;
}
.parts-news a{
	color: var(--link-a-color);
}


/* -----------------------------------------------------------------------------
 財団カスタマイズ
----------------------------------------------------------------------------- */

/* 共通 */
body {
	font-family: var(--body-font-family);
	font-size: var(--body-font-size);
	line-height: var(--body-line-height);
	color: var(--body-font-color);
}

*, *::before, *::after {
  box-sizing: border-box;
}

img{
	width: 100%;
	max-width: 100%;
	vertical-align: top;
}

a.anchor{
    display: block;
    padding-top: 60px;
    margin-top: -60px;
}

/* base.css の a:hover（赤文字化 #E32828 ＋ opacity 0.8）を無効化。ホバー演出は各パーツのCSSで個別に指定する */
a:hover {
	color: #0E42BC; /* base.css の a:link と同色＝ホバーで色を変えない */
	opacity: 1;
	filter: none;
}

.txt_area a:link, .txt_area a:visited, .txt_area a:active {
    color: var(--link-a-color);
	text-decoration: none;
	border-bottom: 1px solid var(--link-a-color);
	transition: .3s;
}
.txt_area a:hover {
    color: var(--link-a-hover-color);
	border-bottom: 1px solid var(--link-a-hover-color);
}
.txt_area p{
	margin-bottom: 1.5em;
}

.font_b{
	font-size: 1.3em;
	line-height: 1;
	margin: 0 3px;
}
.font_s{
	font-size: .7em;
	margin: 0 2px;
}

.inblock{
	display: inline-block;
}
.tbl_auto{
	display: table;
	margin: auto;
}

span.dots{
    background-image: radial-gradient(circle at center, #ed2323 20%, transparent 20%);
    background-position: top right;
    background-repeat: repeat-x;
    background-size: 1em 0.3em;
    padding-top: 0.15em;
}

/* 2分割・3分割・4分割 */
.half,
.trisection,
.quarter{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3vw;
	margin: 20px auto;
}
.half .left,
.half .right,
.trisection .left,
.trisection .center,
.trisection .right,
.quarter .left1,
.quarter .left2,
.quarter .right1,
.quarter .right2{
	width: 100%;
	box-sizing: border-box;
	line-height: var(--col-line-height);
}

/* parts-txt-img */
.parts-txt-img{
	max-width: 100%;
	margin: 0 auto 2em;
	overflow: hidden;
}
.parts-txt-img .r-img,
.parts-txt-img .l-img{
	width: 48%;
	box-sizing: border-box;
}
.parts-txt-img .r-img{
	float: right;
	margin-left: 20px;
}
.parts-txt-img .l-img{
	float: left;
	margin-right: 20px;
}

/* ful-half */
.ful-half{
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 480px;
	align-items: stretch;
}
.ful-half.r-img .left,
.ful-half.l-img .right{
	display: flex;
}
.ful-half.r-img .right,
.ful-half.l-img .left{
	height: 300px;
}
.ful-half .left,
.ful-half .right{
	width: 100%;
	box-sizing: border-box;
}
.ful-half .txt{
	padding: 15px;
}
.ful-half .txt .inner{
	max-width: 600px;
	box-sizing: border-box;
	margin: 20px auto;
}
.ful-half .img{
	height: 100%;
	position: relative;
	overflow: hidden;
}
.ful-half .img img{
	position: absolute;
	width: 100%;
	height: auto;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* parts-table */
.parts-table{
	margin: 0 auto 2em;
}
.parts-table table{
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
	margin: auto;
}
.parts-table th{
	font-size: .9em;
}
.parts-table th,
.parts-table td{
	vertical-align: text-top;
	border-bottom: 1px solid #ddd;
	padding: 5px 10px;
}

/* parts-list */
.parts-list ul{
	padding-left: 1.5em;
}
.parts-list ul li{
	line-height: 1.6;
	margin-bottom: 1em;
	position: relative;
}
.parts-list ul li:before{
	content: '';
	display: inline-block;
	position: absolute;
	top: .5em;
	left: -1.1em;
	width: 8px;
	height: 8px;
	background-color: var(--main-color);
}

/* flow 横 */
.flow-area1 ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-bottom: 40px;
}
.flow-area1 ul li{
	background-color: var(--body-bg-color);
	border: 2px solid var(--main-color);
	border-radius: 20px;
	padding: 10px 20px;
	margin: 2em auto 20px;
	position: relative;
}
.flow-area1 ul li:before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
    top: 100%;
	margin: 0 auto;
    width: 40px;
    height: 20px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
	background-color: var(--main-color);
}
.flow-area1 ul li:last-child:before{
	height: 0;
}
.flow-area1 ul li .num{
	position: absolute;
	left: 10px;
	top: -.85em;
	font-size: 3.5em;
	font-weight: 900;
	line-height: 1;
	color: var(--main-color);
}
.flow-area1 ul li .flow_head{
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.5;
	color: var(--main-color);
	text-align: center;
}
.flow-area1 ul li img{
	display: block;
	width: 70%;
	object-fit: contain;
	margin: 5px auto;
}
.flow-area1 ul li .flow_bottom{
	display: table;
	font-size: .9em;
	line-height: 1.5;
	margin: .5em auto;
}

/* ScrollTrigger */
.visible, .invisible {
    opacity: 0.0;
    transition: opacity 1s ease;
}
.visible {
    opacity: 1.0;
}

.visible.translateY,.invisible.translateY {
	transform: translateY(100px);
	transition: all 1s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.visible.translateY {
	transform: translateY(0);
}

.visible.translateToLeft,.invisible.translateToLeft {
	transform: translateX(100px);
	transition: all 1s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.visible.translateToLeft {
	transform: translateX(0);
}

.visible.translateToRight,.invisible.translateToRight {
	transform: translateX(-100px);
	transition: all 1s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.visible.translateToRight {
	transform: translateX(0);
}

.visible.translateScaleUp,.invisible.translateScaleUp {
	transform: scale(.5);
	transition: all 1s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.visible.translateScaleUp {
	transform: scale(1);
}

.visible.translateScaleDown,.invisible.translateScaleDown {
	transform: scale(1.4);
	transition: all 1s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.visible.translateScaleDown {
	transform: scale(1);
}

.visible.translateRotate,.invisible.translateRotate {
	transform: rotate(360deg);
	transition: all 1s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.visible.translateRotate {
	transform: rotate(0deg);
}

#app .wrapper{
	height: 50vh;
	display: flex;
	width: 100%;
	align-items: center;
}
.str__animation{
	display: flex;
	justify-content: center;
	font-size: 1.2rem;
}
.str__animation .str{
	will-change: auto;
	min-width: .3rem;
	transform: translateY(0);
	opacity: 0;
}


/* マーカー */
.c-marker {
    background: -webkit-linear-gradient(left, rgba(251,238,6,0.50) 50%, transparent 50%);
    background: -moz-linear-gradient(left, rgba(251,238,6,0.50) 50%, transparent 50%);
    background: linear-gradient(left, rgba(251,238,6,0.50) 50%, transparent 50%);
	background-repeat: no-repeat;
	background-size: 200% .8em; 
    background-position: 100% .5em;
    transition: 2s;
}
.c-marker.is-active{
    background-position: 0% .5em;
}

/* 会社概要 */
.cpn_tbl table{
	border-collapse: collapse;
	margin: 20px auto 40px;
}
.cpn_tbl table th,
.cpn_tbl table td{
	display: block;
	border-bottom: 1px solid var(--cpn-table-border);
	text-align: left;
	padding: 5px 20px;
}
.cpn_tbl table th{
	font-size: .9em;
	font-weight: 500;
	color: var(--cpn-th-color);
	white-space: nowrap;
	border-bottom: none;
	padding: 7px 0 0 5px;
}

/* お問合せ */
.contact i{
	font-size: 1em;
	line-height: 1.2em;
	margin-right: 10px;
}
.contact .tel a{
	display: block;
	font-family: var(--contact-tel-font-family);
	font-weight: var(--contact-tel-font-weight);
	font-size: calc(2em + .7vw);
	line-height: 1.7;
	text-align: center;
	color: var(--contact-tel-color);
}
.form_sub{
	font-size: .75em;
	color: #888;
	text-align: center;
	margin-top: 10px;
}
a.mail_button {
	display: inline-block;
	margin-top: 20px;
	padding: 1em 3em;/* ボタンのサイズはpaddingで調整 */
	background: var(--contact-form-btn-bg-color);
	border: 1px solid var(--contact-form-btn-bg-color); /* 枠線色 */
	color: var(--contact-form-btn-txt-color); /* 文字色 */
	text-align: center;
	text-decoration: none;
	border-radius: 8px;
	transition: all .3s;
}
a.mail_button:hover {
	opacity: 0.85;
}
a.mail_button i{
	transition: all .3s;
}
a.mail_button:hover i{
	transform: scale(1.3);
}


/* 横問合せボタン */
.cv_btn_area {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 102;
	opacity: 0;
	overflow: hidden;
	border-top: 1px solid rgba(255, 255, 255, 0.5); /* SP・tab用の薄い白ライン（PCで打ち消し） */
}
.cv_btn_area .btn{
	align-items: flex-end;
	display: flex;
}
.cv_btn_area .btn a {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 45px;
	box-sizing: border-box;
	line-height: 1.3;
	font-size: 14px;
	font-weight: var(--side-btn-txt-weight);
	letter-spacing: 1px;
	background: var(--side-btn-bg-color);
	color: var(--side-btn-txt-color);
	text-align: center;
	text-decoration: none;
	padding: 10px 0px;
	margin: 0;
	position: relative;
}
/* 各ボタンは意味（class）で色を指定。並び順が変わっても崩れないよう nth-child ではなく class で当てる。
   「無料相談」＝アクセント色。※「資料請求」を一時非表示にしても無料相談の色が維持される */
.cv_btn_area .btn a.side-btn-consult{
	background: var(--accent-color);
	color: var(--body-font-color);
}
/* 「お申込み」はフッターと同じ青のため、境界が消えて埋もれる。
   常時うっすら光彩を出して浮かせる。隣（無料相談）に光が被らないよう左に隙間を確保 */
.cv_btn_area .btn a:last-child{
	background: var(--side-btn-bg-color2);
	box-shadow: 0 0 10px 2px rgba(255,255,255,.45);
}
.cv_btn_area .btn a i {
	font-size: 1.5em;
	margin-right: 10px;
	transition: all .3s;
}
.cv_btn_area .btn a:hover i{
	transform: scale(1.3);
}
.cv_btn_area .btn a:hover i{
	transform: scale(1.3);
}
.cv_btn_area .btn a:after{
	display: none; /* 矢印マークはPCのみ表示（pc.cssで display:table に戻す） */
	position: absolute;
	top: 0;
	bottom: 0;
	right: 15px;
	margin: auto;
	font: var(--fa-font-solid);
	content: "\f054";
	transition: all .3s;
}
.cv_btn_area .btn a:hover:after{
	right: 10px;
}
.cv_btn_area .btn a.mail_button {
	border: none;
	border-radius: 0;
}

.fade_on{
	opacity: 1;
}

/* TEL */
a[href^="tel:"] {
	color:inherit;
	text-decoration:none;
	border: none;
}

@media screen and (min-width: 768px){
	a[href^="tel:"] {
		pointer-events: none;
		cursor: default;
	}
}

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


/* Margin・Padding */
.mb0{
	margin-bottom: 0!important;
}



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

/* ブランド表記「産業Navi 55 AI DX」（101614_1 と同一フォント・色）
   ヘッダーロゴ／FVサービス名／比較表の自社列ヘッダーで共通使用 */
.logo-brand,
.logo-sangyo,
.logo-navi,
.logo-55,
.logo-ai,
.logo-dx{
	display: inline-block;
	line-height: 1;
}
.logo-sangyo{
	font-family: 'M PLUS 1', sans-serif;
	font-size: 1em;
	font-weight: 700;
	color: #111;
	vertical-align: .02em;
}
.logo-navi{
	font-family: 'M PLUS 1', sans-serif;
	font-size: 1.1em;
	font-weight: 700;
	color: #111;
	vertical-align: -.04em;
	margin-left: .1em;
}
.logo-55{
	font-family: 'Tomorrow', sans-serif;
	font-size: 1.4em;
	font-weight: 700;
	color: #111;
	vertical-align: -.03em;
}
.logo-ai{
	font-family: 'Barlow', sans-serif;
	font-size: 1.47em;
	font-weight: 800;
	color: transparent;
	background-image: url('../../p-img/101614_2/AI_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-clip: text;
	background-clip: text;
	vertical-align: -.04em;
}
.logo-dx{
	font-family: 'Tomorrow', sans-serif;
	font-size: 1.13em;
	font-weight: 700;
	color: #0000cb;
	vertical-align: -.02em;
}
/* 濃色背景（FVバッジの黒／比較表ヘッダーの赤）に載る場合は全パーツ白抜き
   ※「AI」の青グラデ・「DX」の青は濃色背景では沈むため打ち消す */
.consul-compare-table thead th .logo-sangyo,
.consul-compare-table thead th .logo-navi,
.consul-compare-table thead th .logo-55,
.consul-compare-table thead th .logo-dx{
	color: #fff;
}
.consul-compare-table thead th .logo-ai{
	color: #fff;
	background-image: none;
}

/* ヘッダー ------------------------------------------------------------------ */
header > .inner > navi > ul > li a.menu-cta{
	color: var(--main-color);
	font-weight: 700;
}

/* ファーストビュー ---------------------------------------------------------- */
#top-contents .layer1 .fv-service-name p{
	display: table;
	background: rgba(255,255,255,.10);
	border: 1px solid var(--main-color);
	font-size: .85em;
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 1.6;
	padding: .3em 1.2em;
	border-radius: 999px;
	margin: 0 auto 1em;
}
#top-contents .layer1 .fv-catch-strong{
	display: inline-block;
	color: var(--sub-color);
	line-height: 1.4;
	margin-top: .3em;
}
#top-contents .layer1 .fv-lead{
	margin-top: .9em;
}
#top-contents .layer1 .fv-lead p{
	color: #444;
	font-size: .85em;
	line-height: 1.9;
}
#top-contents .layer1 .fv-cta{
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 1em;
}
#top-contents .layer1 .fv-cta-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	box-sizing: border-box;
	padding: .85em 1.2em;
	border: none;
	border-radius: 999px;
	font-size: 1em;
	font-weight: 900;
	text-decoration: none;
	box-shadow: 4px 5px 6px rgba(0,0,0,.3);
	transition: box-shadow .2s, transform .2s;
}
#top-contents .layer1 .fv-cta-btn:hover{
	box-shadow: none;
	transform: translate(4px, 5px);
	opacity: 1;
}
#top-contents .layer1 .fv-cta-doc{
	background: var(--main-color);
	color: #fff;
}
#top-contents .layer1 .fv-cta-consult{
	background: var(--accent-color);
	color: var(--body-font-color);
}
/* 各セクション共通のリード文 -------------------------------------------------- */
.aio-intro-lead,
.addon-concept-lead,
.service-menu-lead,
.consul-compare-lead,
.final-cta-lead{
	margin-bottom: 30px;
}
.aio-intro-lead p,
.addon-concept-lead p,
.service-menu-lead p,
.consul-compare-lead p,
.final-cta-lead p{
	line-height: 2;
}
.addon-concept-strong {
	color: var(--main-color); /* 共通の.red(#FF0000)を使わずメインカラーで強調 */
}

/* ② 導入｜AIO対策とは -------------------------------------------------------- */
.aio-intro-cards{
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
.aio-intro-card{
	position: relative;
	background: #fff;
	border: 1px solid #d5d5d5;
	border-radius: 12px;
	padding: 2em 1.5em 1.5em;
	box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.aio-intro-card::before{
	content: "";
	position: absolute;
	left: -10px;
	top: 12px;
	width: 60px;
	height: 8px;
	background: var(--main-color);
}
.aio-intro-card-title{
	box-sizing: border-box; /* JSで高さを揃えるためpadding分の膨らみを防ぐ */
	font-size: 1.25em;
	font-weight: 800;
	line-height: 1.5;
	margin-bottom: .5em;
}
.aio-intro-card-desc p{
	line-height: 1.8;
	border-top: 1px dotted var(--sub-color);
	padding-top: 10px;
}

/* ③ コンセプト｜“ちょっと足す” ----------------------------------------------- */
.addon-point-list{
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
.addon-point-card{
	position: relative; /* 左上の数字をabsoluteで置くため */
	background: #fff;
	border-radius: 12px;
	padding: 1.8em 1.5em;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0,0,0,.06);
	margin-top: 20px;
}
.addon-point-num{
	position: absolute;
	top: -.5em;
	left: 14px;
	font-family: 'Montserrat', sans-serif;
	font-size: 3.6em;
	font-weight: 900;
	line-height: 1;
	color: rgba(71, 148, 161, 0.5);
}
.addon-point-icon{
	line-height: 1;
	margin-bottom: 12px;
}
.addon-point-icon img{
	width: 150px;
	height: auto;
}
.addon-point-title{
	font-size: 1.32em;
	font-weight: 800;
	line-height: 1.5;
	margin-bottom: .5em;
}
.addon-point-desc p{
	line-height: 1.8;
	text-align: left;
}

/* ④ 提供内容 ---------------------------------------------------------------- */
.service-menu-list{
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
.service-menu-card{
	position: relative; /* 右上バッジのabsolute基準 */
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 12px;
	padding: 1.5em;
}
.service-menu-card-main{
	border: 2px solid var(--main-color);
}
.service-menu-num{
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: rgba(71,148,161,.82); /* CSSで丸を表現。少し淡いメインカラー(#c30036) */
	color: #fff;
	border-radius: 50%;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.2em;
	font-weight: 600;
	line-height: 1;
}
.service-menu-icon{
	line-height: 1;
	text-align: center;
	margin-bottom: 12px;
}
.service-menu-icon img{
	width: 200px;
	height: auto;
}
.service-menu-head{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.service-menu-title{
	font-size: calc(1.5em + .5vw);
	font-weight: 800;
	color: var(--sub-color);
	line-height: 1.5;
	text-align: center;
}
.service-menu-dr{
	display: block;
	margin-top: 2px; /* 上のタイトルと詰める */
	font-size: .6em;
	font-weight: 500;
	color: #777;
	line-height: 1.3;
}
.service-menu-badge{
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
}
.service-menu-badge p{
	display: inline-block;
	background: var(--main-color);
	color: #fff;
	font-size: .75em;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
	padding: .1em 1.2em;
	border-radius: 999px;
}
.service-menu-desc p{
	line-height: 1.8;
	margin-top: .8em;
}
.service-menu-note{
	margin-top: 20px;
}
.service-menu-note p{
	font-size: .85em;
	color: #666;
	line-height: 1.6;
}
.service-overview-figure{
	max-width: 1600px;
	margin: 50px auto 0;
}
.service-overview-figure picture{
	display: block; /* pictureはinline既定のため、img width:100%を効かせる */
	text-align: center; /* スマホ画像(最大600px)を中央寄せ */
}
.service-overview-figure img{
	box-sizing: border-box; /* paddingを含めて幅を維持 */
	width: 100%;
	max-width: 600px; /* 〜768pxのスマホ画像は最大600pxで頭打ち（PCで解除） */
	height: auto;
}

/* ⑤ 対象 -------------------------------------------------------------------- */
.target-contents{
	position: relative;
	padding-bottom: 180px; /* 右下装飾イラスト(高さ47vw＋下余白4vw)分を確保 */
}
.target-contents::after{
	content: "";
	position: absolute;
	right: 4vw; /* 少し内側へ */
	bottom: 1.2vw; /* 少し内側へ */
	width: 200px; /* もう少し小さく */
	height: 47vw; /* 50vw × (919.55/987.89) ≒ 47vw でアスペクト比維持（新画像はほぼ正方形） */
	background: url("../../p-img/101614_2/target_bg02.svg") no-repeat right bottom;
	background-size: contain;
	pointer-events: none;
	z-index: 0; /* チェックリストより後ろの装飾 */
}
.target-check-list{
	position: relative;
	z-index: 1; /* 装飾より前面に */
}
.target-check-list ul{
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
.target-check-list li{
	position: relative;
	list-style: none;
	text-indent: 0;
	background: #fff;
	border: 2px solid var(--main-color);
	border-radius: 8px;
	padding: 1em 1em 1em 3em;
	font-weight: 600;
	line-height: 1.6;
	box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.target-check-list li:before{
	content: "\f00c";
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	position: absolute;
	top: 1em;
	left: 1em;
	color: var(--main-color);
}

/* ⑥ 選び方｜判断基準 --------------------------------------------------------- */
.decision-criteria-list{
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
.decision-criteria-card{
	position: relative;
	z-index: 0; /* ::before装飾を内側に閉じ込めるスタッキングコンテキスト */
	overflow: hidden; /* 右上にはみ出した装飾を切る */
	background: #fff;
	border: 1px solid rgba(71,148,161,.35); /* 薄めのメインカラー(#c30036) */
	border-radius: 8px;
	padding: 1.5em;
	text-align: center;
}
.decision-criteria-card::before{
	content: "";
	position: absolute;
	top: -8%;
	right: -8%;
	height: 80%; /* カード高さの約8割 */
	aspect-ratio: 1 / 1; /* svgは200×200の正方形 */
	background-color: rgba(71,148,161,.15); /* 薄いメインカラー(#c30036) */
	-webkit-mask: no-repeat center / contain; /* svgの形だけ抜いてbg-colorで塗る */
	mask: no-repeat center / contain;
	z-index: -1; /* カード内容より後ろ */
	pointer-events: none;
}
.decision-criteria-card:nth-child(1)::before{
	-webkit-mask-image: url("../../p-img/101614_2/decision_bg01.svg");
	mask-image: url("../../p-img/101614_2/decision_bg01.svg");
}
.decision-criteria-card:nth-child(2)::before{
	-webkit-mask-image: url("../../p-img/101614_2/decision_bg02.svg");
	mask-image: url("../../p-img/101614_2/decision_bg02.svg");
}
.decision-criteria-card:nth-child(3)::before{
	-webkit-mask-image: url("../../p-img/101614_2/decision_bg03.svg");
	mask-image: url("../../p-img/101614_2/decision_bg03.svg");
}
.decision-criteria-num p{
	display: inline-block;
	background: var(--main-color);
	color: #fff;
	font-size: .8em;
	font-weight: 700;
	line-height: 1.6;
	padding: .1em 1.5em;
	border-radius: 999px;
}
.decision-criteria-label{
	font-size: 2em;
	letter-spacing: .2em;
	font-weight: 900;
	color: var(--sub-color);
	line-height: 1.4;
	margin: .4em 0;
}
.decision-criteria-desc p{
	font-weight: 600;
	line-height: 1.7;
}
.decision-closing-text{
	margin-top: 40px;
	text-align: center;
}
.decision-closing-text p{
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1.9;
}
.decision-closing-text br.inblock-br{
	display: none;
}

/* ⑦ 比較表（全ブレイクポイントでテーブル＋左列固定の横スクロール） --------------- */
.consul-compare-wrap{
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 16px; /* tableの影が下で切れないよう余白を確保 */
}
/* 横スクロールのヒント矢印（初期表示→スクロールで消える。表示制御はscript.js／PCで非表示） */
.consul-compare-hint{
	text-align: right;
	margin: 0 4px 6px 0;
	color: rgba(0,0,0,.3);
	font-size: 22px;
	line-height: 1;
	pointer-events: none;
	opacity: 1;
	transition: opacity .4s ease;
}
.consul-compare-hint.is-hidden{
	opacity: 0;
}
.consul-compare-hint i{
	display: inline-block;
	animation: compare-hint-swipe 1.4s ease-in-out infinite; /* 左右に揺れて「動かせる」ことを示す */
}
@keyframes compare-hint-swipe{
	0%, 100%{ transform: translateX(0); }
	50%{ transform: translateX(7px); }
}
@media (prefers-reduced-motion: reduce){
	.consul-compare-hint i{ animation: none; }
}
.consul-compare-table table{
	width: 100%;
	min-width: 575px;
	border-collapse: separate;
	border-spacing: 0;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.consul-compare-table th,
.consul-compare-table td{
	box-sizing: border-box;
	background: #fff;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	padding: 1em;
	font-size: .95em;
	line-height: 1.6;
	text-align: center;
	vertical-align: middle;
}
.consul-compare-table thead th{
	background: var(--sub-color);
	color: #fff;
	font-weight: 700;
	text-align: center;
}
.consul-compare-table thead th:last-child{
	background: var(--main-color);
}
.consul-compare-table thead th:first-child{
	position: sticky;
	left: 0;
	z-index: 3;
	width: 120px;
	min-width: 120px;
}
.consul-compare-table tbody th{
	position: sticky;
	left: 0;
	z-index: 2;
	width: 120px;
	min-width: 120px;
	background: var(--light-gray);
	font-weight: 700;
}
.consul-compare-table tbody td:last-child{
	background: #fffaf0;
	font-weight: 700;
}
.consul-compare-strong{
	font-weight: 900;
	letter-spacing: .1em;
	color: var(--main-color);
}

/* ⑧ 成果・実績 -------------------------------------------------------------- */
.result-stat-list{
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
.result-stat-card{
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 12px;
	padding: 1.5em;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.result-stat-num p{
	font-size: 2.4em;
	font-weight: 900;
	color: var(--main-color);
	line-height: 1.2;
}
.result-stat-label p{
	font-size: .95em;
	color: #555;
	line-height: 1.6;
	margin-top: 5px;
}

/* ⑧-2 成功事例（AIに引用された画面） -------------------------------------------- */
.citation-cases-item{
	background: var(--light-gray);
	border-radius: 20px;
	padding: 30px 20px;
	margin-bottom: 40px;
}
.citation-cases-item:last-child{
	margin-bottom: 0;
}
.citation-cases-title p{
	display: table;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.5;
	color: var(--white);
	background-color: var(--main-color);
	text-align: center;
	border-radius: 40px;
	padding: 10px 40px;
	margin: 0 auto 20px;
}
.citation-cases-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
}
.citation-cases-image img{
	display: block;
	width: 100%;
	height: auto;
}

/* ⑧-3 お客様の声 ------------------------------------------------------------- */
.customer-voice-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
.customer-voice-card{
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e1e7f1;
	border-radius: 12px;
	padding: 14px 14px 16px;
	box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.voice-rate p{
	font-size: 18px;
	color: var(--accent-color);
	letter-spacing: .08em;
	line-height: 1.4;
	margin-bottom: 10px;
}
.voice-comment{
	margin-bottom: 12px;
}
.voice-comment p{
	font-size: 15px;
	line-height: 1.75;
	color: #23364c;
}
.voice-meta{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
}
.voice-avatar{
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	overflow: hidden;
}
.voice-avatar img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.voice-info p{
	font-size: 14px;
	color: #7a8898;
	line-height: 1.5;
}

/* ⑨ 料金 -------------------------------------------------------------------- */
.price-plan-list{
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
.price-plan-card{
	background: #fff;
	border: 2px solid var(--sub-color);
	border-radius: 12px;
	padding: 1.5em;
	text-align: center;
}
.price-plan-name p{
	font-weight: 700;
	color: var(--sub-color);
	line-height: 1.6;
}
.price-plan-amount p{
	font-size: 1.6em;
	font-weight: 900;
	line-height: 1.8;
	color: var(--main-color);
	margin: .3em 0;
}
.price-plan-amount .font_b{
	font-size: 1.8em; /* 料金の数字を強調（共通font_sの1.3emから拡大） */
}
.price-plan-desc p{
	font-size: .9em;
	line-height: 1.7;
}
.price-plan-desc p .font_s{
	display: inline-block; /* inline要素はline-heightが効かないためinline-block化 */
	font-size: .8em;
	line-height: 1.6; /* font_s(小さい注釈)の行間を詰める */
	text-align: left; /* 親のcenterを打ち消し、複数行の行頭を揃える */
	margin-top: 3px;
}
.price-include-box{
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 12px;
	padding: 1.5em;
	margin-top: 30px;
}
.price-include-title p{
	text-align: center;
	font-weight: 700;
	color: var(--sub-color);
	line-height: 1.6;
	margin-bottom: 1em;
}
.price-include-list li{
	position: relative;
	list-style: none;
	text-indent: 0;
	padding-left: 1.6em;
	line-height: 1.8;
}
.price-include-list li:before{
	content: "\f058";
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	position: absolute;
	top: 0;
	left: 0;
	color: var(--main-color);
}
.price-include-list li .font_s{
	display: block; /* 折り返す注釈を独立行にして間隔をmarginで制御 */
	line-height: 1.3;
	margin-top: 2px; /* 上の行と詰める */
}

/* ⑩ 進め方 ------------------------------------------------------------------ */
.setup-flow-list ul{
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}
/* 外側li：矢印担当（overflowをかけないので矢印が切れない） */
.setup-flow-item{
	position: relative;
	list-style: none;
	text-indent: 0;
}
.setup-flow-item:after{
	content: "\f078";
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	position: absolute;
	left: 50%;
	bottom: -32px;
	transform: translateX(-50%);
	font-size: 20px;
	color: var(--main-color);
}
.setup-flow-item:last-child:after{
	content: none;
}
/* 内側：見た目のカード本体（角の三角を角丸に沿わせるためoverflow:hidden） */
.setup-flow-card{
	position: relative;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 20px;
	padding: 1.8em 1.4em 1.6em;
	text-align: center;
	box-shadow: 0 6px 18px rgba(0,0,0,.08);
	overflow: hidden;
	height: 100%;
}
/* 左上：角の赤い三角（clip-pathで直角三角形） */
.setup-flow-card:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 70px;
	height: 70px;
	background: var(--main-color);
	opacity: .9;
	clip-path: polygon(0 0, 100% 0, 0 100%);
}
/* 三角の上に白抜きの番号を重ねる */
.setup-flow-num{
	position: absolute;
	top: 9px;
	left: 16px;
	z-index: 1;
	font-family: 'Montserrat', sans-serif;
	color: #fff;
	font-size: 1.5em;
	font-weight: 400;
	line-height: 1;
}
/* 画像枠（実画像もらったら中を<img>に差し替え） */
.setup-flow-img{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 66%;
	max-width: 170px;
	aspect-ratio: 1 / 1;
	margin: .4em auto 1.1em;
	border-radius: 4px;
	color: #555;
	font-size: .95em;
}
.setup-flow-img img{
	width: 100%;
	height: 100%;
	object-fit: contain; /* 枠に収めて画像全体を表示（cover=中央トリミングだった） */
	border-radius: 4px;
}
.setup-flow-title{
	font-size: 1.08em;
	font-weight: 800;
	color: #222;
	line-height: 1.5;
	margin-bottom: .4em;
}
.setup-flow-timing p{
	font-size: .85em;
	color: #555;
	line-height: 1.7;
}

/* ⑪ FAQ --------------------------------------------------------------------- */
.faq-list{
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.faq-item{
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	overflow: hidden;
}
.faq-question,
.faq-answer{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 16px;
}
.faq-answer{
	background: #fafafa;
	border-top: 1px dashed #ddd;
}
.faq-label{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--main-color);
	color: #fff;
	font-weight: 900;
	line-height: 1;
}
.faq-label-a{
	background: var(--sub-color);
}
.faq-question-text p{
	font-weight: 700;
	line-height: 1.6;
}
.faq-answer-text p{
	line-height: 1.8;
}

/* クロージングCTA ------------------------------------------------------------ */
.final-cta-btns{
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 30px 0 40px;
}
.final-cta-btn-item{
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.final-cta-btn-item .btn-note{
	line-height: 1.2;
}
.final-cta-btn-item .btn-note p{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1em;
	font-weight: 900;
	line-height: 1.2;
	color: inherit;
}
.final-cta-btn-item .btn-note span{
	position: relative;
	display: inline-block;
	padding: 0 18px;
}
.final-cta-btn-item .btn-note span:before,
.final-cta-btn-item .btn-note span:after{
	content: "";
	position: absolute;
	top: 50%;
	width: 1px;
	height: 14px;
	background: currentColor;
}
.final-cta-btn-item .btn-note span:before{
	left: 2px;
	transform: translateY(-50%) rotate(-26deg);
}
.final-cta-btn-item .btn-note span:after{
	right: 2px;
	transform: translateY(-50%) rotate(26deg);
}
.final-cta-btn-item .mail_button{
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	margin-top: 0;
	padding: 1.3em 1em;
	font-size: 1.25em;
	font-weight: 900;
	border-radius: 999px;
	text-align: center;
	letter-spacing: 0;
	box-shadow: 4px 5px 6px rgba(0,0,0,.3);
	transition: box-shadow .2s, transform .2s;
}
.final-cta-btn-item .mail_button:hover{
	box-shadow: none;
	transform: translate(4px, 5px);
	opacity: 1;
}
.final-cta-btn-item .btn-label{
	display: inline-block;
	letter-spacing: .3em;
	padding-left: .3em;
	line-height: 1;
}
.final-cta-btn-item:nth-child(1) .btn-note{
	color: var(--body-font-color); /* 「最短でオンライン相談」を黒に（両脇の斜線もcurrentColorで追従） */
}
.final-cta-btn-item:nth-child(1) .mail_button{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--body-font-color); /* 黄背景に濃い文字で可読性確保 */
}
.final-cta-btn-item:nth-child(2) .btn-note{
	color: var(--sub-color); /* 「そのままお申込みへ」をサブカラーに（両脇の斜線もcurrentColorで追従） */
}
.final-cta-btn-item:nth-child(2) .mail_button{
	background: var(--sub-color);
	border-color: var(--sub-color);
	color: #fff; /* 青背景に白文字 */
}

/* 資料請求フォーム（現行の産業Navi55AIDX LPから移植。class名は script.js が参照するため変更しない） */
.final-cta-form-contents .hero-form-card{
	max-width: 640px;
	margin: 0 auto;
}
/* 資料請求フォームをMV・追従ボタンのアンカー先にするため別contentsへ分割。
   .contents+.w1024+section の余白が重なるので前側を全て詰め、間隔は後側w1024のmargin-top1箇所で調整 */
.final-cta-contents .final-cta-btns{ margin-bottom: 20px; } /* ボタン下40px→20px（影4px5px6pxがoverflow:hiddenで切れない余白を確保） */
.final-cta-contents .final-cta{ margin-bottom: 0; }       /* section下40px消し */
.final-cta-contents .w1024{ margin-bottom: 0; }           /* 前側w1024下60px消し */
.final-cta-form-contents .w1024{margin-top: 50px;}      /* 後側w1024上60px→20px（ボタン下20pxと合わせ間隔計40px） */
.hero-form-card{
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 16px 28px rgba(0,20,50,.30);
}
.hero-form-head{
	background: var(--main-color);
	padding: 18px 16px 14px;
	text-align: center;
}
.hero-form-head .ttl p{
	color: #fff;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
	margin-bottom: 4px;
}
.hero-form-head .sub p{
	color: #e0f2f4; /* 淡いメインカラー（赤背景に映える白寄りの淡ローズ） */
	font-size: 14px;
	line-height: 1.4;
}
.hero-form{
	padding: 16px 16px 30px;
	min-height: 300px;
}
.hero-form label{
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	font-weight: 800;
	color: #1d2e45;
	margin-bottom: 6px;
}
.hero-form label span{
	display: inline-block;
	font-size: 11px;
	line-height: 1;
	color: #fff;
	background: var(--main-color);
	border-radius: 999px;
	padding: 3px 8px;
}
.hero-form label span.optional{
	background: #9aa3ac;
}
.hero-form input,
.hero-form select{
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	border: 1px solid #d4dbe5;
	border-radius: 6px;
	padding: 0 12px;
	font-size: 14px;
	margin-bottom: 12px;
	background: #fff;
}
.hero-radio-group{
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin: 0 0 12px;
}
.hero-radio-group label{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	width: auto;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 500;
	color: #1d2e45;
	margin-bottom: 0;
}
.hero-radio-group input[type="radio"]{
	width: 16px;
	height: 16px;
	margin: 0;
}
.hero-form button{
	width: 100%;
	height: 85px;
	border: none;
	border-radius: 50px;
	background: var(--main-color);
	color: #fff;
	font-size: 18px;
	font-weight: 900;
	cursor: pointer;
	margin-top: 4px;
	box-shadow: 4px 5px 4px rgba(0,0,0,.3);
	transition: box-shadow .2s, transform .2s, opacity .2s;
}
.hero-form button:active{
	box-shadow: none;
	transform: translate(2px, 3px);
	opacity: 1;
}
.hero-form .privacy-consent{
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	margin: 20px 0;
}
.hero-form .privacy-consent input[type="checkbox"]{
	appearance: auto;
	width: 18px;
	height: 18px;
	min-width: 18px;
	margin: 2px 0 0;
	padding: 0;
}
.hero-form .privacy-consent label{
	display: block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: #607087;
	margin: 0;
}
.hero-form .privacy-consent label a{
	color: var(--link-a-color);
	text-decoration: underline;
}
.hero-form-msg{
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
}
.hero-form-complete{
	min-height: 300px;
	font-weight: 700;
	text-align: center;
	padding: 20px;
}
.hero-form-complete-banner{
	text-align: center;
	margin: 30px auto;
}
.hero-form-complete-banner img{
	width: 200px;
	margin-bottom: 2px;
}
















/* *****************************************************************************
   スマートフォン用のスタイル記述
***************************************************************************** */
@media screen and (max-width: 480px) {

	

	
	
	
	
	
	
}