@charset "utf-8";
:root {--main-color: #01418e;}
:root {--text-color: #222222;}
:root {--text-font: "noto-sans-cjk-jp", sans-serif;}
:root {--header-height: 160px;}

/* series color */
:root {--service01-color: #00a0e6;}
:root {--service02-color: #11ba76;}
:root {--service03-color: #ffae00;}
:root {--service04-color: #ef584f;}
:root {--service05-color: #a354a5;}
:root {--service06-color: #f89633;}

/* series dark color */
:root {--service01-color-dark: #0066bc;}
:root {--service02-color-dark: #00835b;}
:root {--service03-color-dark: #d28200;}
:root {--service04-color-dark: #b22b20;}
:root {--service05-color-dark: #63127c;}
:root {--service06-color-dark: #cd6400;}

/* series shadow color */
:root {--service01-color-shadow: #004d9e;}
:root {--service02-color-shadow: #006545;}
:root {--service03-color-shadow: #9b5a00;}
:root {--service04-color-shadow: #830d00;}
:root {--service05-color-shadow: #45004f;}
:root {--service06-color-shadow: #ac5200;}

/* series pale color */
:root {--service01-color-pale: #f2f9ff;}
:root {--service02-color-pale: #eefaf6;}
:root {--service03-color-pale: #fff6e2;}
:root {--service04-color-pale: #fdf4f2;}
:root {--service05-color-pale: #f9f2f9;}
:root {--service06-color-pale: #fef4ea;}

/* inquiry dark color */
:root {--inquiry-request-color: #f23f2c;}
:root {--inquiry-request-color-dark: #cc1d1d;}
:root {--inquiry-document-color: #296ed3;}
:root {--inquiry-document-color-dark: #1d55ae;}
:root {--inquiry-trial-color: #31c96e;}
:root {--inquiry-trial-color-dark: #21a560;}
:root {--inquiry-contact-color: #ffbf40;}
:root {--inquiry-contact-color-dark: #f7931e;}


html {
	scroll-padding-top: var(--header-height);
}

body {
	&.riskey {
		.philosophy {
			border-color: var(--service01-color-dark);
		}
		@media (820px < width) {
			&::before {
				content: "";
				display: block;
				width: 30px;
				height: 100vh;
				background: linear-gradient(var(--service01-color), var(--service01-color-dark));
				position: fixed;
				left: 0;
				top: 0;
				z-index: 1;
			}
			&::after {
				content: "riskey";
				display: block;
				color: #fff;
				font-size: 20px;
				position: fixed;
				left: -14px;
				top: 50%;
				z-index: 1;
				transform: rotateZ(-90deg);
			}
		}
		main.lp {
			.bg-color {
				background: var(--service01-color-pale);
			}
			.company::before{
				background: var(--service01-color-pale);
			}
			table {
				th {
					background: var(--service01-color-pale);
				}
			}
		}
	}
	&.riskey_Pro {
		.philosophy {
			border-color: var(--service02-color-dark);
		}
		@media (820px < width) {
			&::before {
				content: "";
				display: block;
				width: 30px;
				height: 100vh;
				background: linear-gradient(var(--service02-color), var(--service02-color-dark));
				position: fixed;
				left: 0;
				top: 0;
				z-index: 1;
			}
 			&::after {
				content: "riskey PRO";
				display: block;
				color: #fff;
				font-size: 20px;
				position: fixed;
				left: -35px;
				top: 50%;
				z-index: 1;
				transform: rotateZ(-90deg);
			}
		}
		main.lp {
			.bg-color {
				background: var(--service02-color-pale);
			}
			.company::before{
				background: var(--service02-color-pale);
			}
			table {
				th {
					background: var(--service02-color-pale);
				}
			}
		}
	}
	&.riskey_BulkCheck {
		.philosophy {
			border-color: var(--service03-color-dark);
		}
		.fv div.float_btn {
			& > a {
				&.contact {
					background: linear-gradient(var(--service01-color), var(--service01-color-dark));
				}
			}
		}
		@media (820px < width) {
			&::before {
				content: "";
				display: block;
				width: 30px;
				height: 100vh;
				background: linear-gradient(var(--service03-color), var(--service03-color-dark));
				position: fixed;
				left: 0;
				top: 0;
				z-index: 1;
			}
			&::after {
				content: "riskey BulkCheck";
				display: block;
				color: #fff;
				font-size: 20px;
				position: fixed;
				left: -65px;
				top: 50%;
				z-index: 1;
				transform: rotateZ(-90deg);
			}
		}
		.btn.contact span.btnText {
			background: linear-gradient(var(--service01-color), var(--service01-color-dark));
		}
		main.lp {
			.bg-color {
				background: var(--service03-color-pale);
			}
			.company::before{
				background: var(--service03-color-pale);
			}
			table {
				th {
					background: var(--service03-color-pale);
				}
			}
		}
		.inquiry p.btn a {
			text-shadow: -2px -1px 0 var(--service01-color-dark), 0 -1px 0 var(--service01-color-dark), 2px 1px 0 rgba(255, 255, 255, 0.2), 0px 1px 0 rgba(255, 255, 255, 0.2);
			background: linear-gradient(var(--service01-color), var(--service01-color-dark));
			border-bottom-color: var(--service01-color-shadow);
			&::before {
				filter: drop-shadow(-2px -2px 0 var(--service01-color-dark)) drop-shadow(2px 2px 0 rgba(255, 255, 255, 0.4));
			}
		}
		
	}
	&.riskey_DeepSearch {
		.philosophy {
			border-color: var(--service04-color-dark);
		}
		@media (820px < width) {
			&::before {
				content: "";
				display: block;
				width: 30px;
				height: 100vh;
				background: linear-gradient(var(--service04-color), var(--service04-color-dark));
				position: fixed;
				left: 0;
				top: 0;
				z-index: 1;
			}
			&::after {
				content: "riskey DeepSearch";
				display: block;
				color: #fff;
				font-size: 20px;
				position: fixed;
				left: -72px;
				top: 50%;
				z-index: 1;
				transform: rotateZ(-90deg);
			}
		}
		main.lp {
			.bg-color {
				background: var(--service04-color-pale);
			}
			.company::before{
				background: var(--service04-color-pale);
			}
			table {
				th {
					background: var(--service04-color-pale);
				}
			}
		}
	}
	&.riskey_global {
		.philosophy {
			border-color: var(--service05-color-dark);
		}
		@media (820px < width) {
			&::before {
				content: "";
				display: block;
				width: 30px;
				height: 100vh;
				background: linear-gradient(var(--service05-color), var(--service05-color-dark));
				position: fixed;
				left: 0;
				top: 0;
				z-index: 1;
			}
			&::after {
				content: "riskey Global";
				display: block;
				color: #fff;
				font-size: 20px;
				position: fixed;
				left: -47px;
				top: 50%;
				z-index: 1;
				transform: rotateZ(-90deg);
			}
		}
		main.lp {
			.bg-color {
				background: var(--service05-color-pale);
			}
			.company::before{
				background: var(--service05-color-pale);
			}
			table {
				th {
					background: var(--service05-color-pale);
				}
			}
		}
	}
	&.CompetitorScan {
		.btn.contact span.btnText {
			background: linear-gradient(var(--service02-color), var(--service02-color-dark));
		}
		.fv div.float_btn {
			& > a {
				&.contact {
					background: linear-gradient(var(--service02-color), var(--service02-color-dark));
				}
			}
		}
		.philosophy {
			border-color: var(--service06-color-dark);
		}
		@media (820px < width) {
			&::before {
				content: "";
				display: block;
				width: 30px;
				height: 100vh;
				background: linear-gradient(var(--service06-color), var(--service06-color-dark));
				position: fixed;
				left: 0;
				top: 0;
				z-index: 1;
			}
			&::after {
				content: "CompetitorScan";
				display: block;
				color: #fff;
				font-size: 20px;
				position: fixed;
				left: -63px;
				top: 50%;
				z-index: 1;
				transform: rotateZ(-90deg);
			}
		}
		main.lp {
			.bg-color {
				background: var(--service06-color-pale);
			}
			.company::before{
				background: var(--service06-color-pale);
			}
			table {
				th {
					background: var(--service06-color-pale);
				}
			}
		}
		.inquiry p.btn a {
			text-shadow: -2px -1px 0 var(--service02-color-dark), 0 -1px 0 var(--service02-color-dark), 2px 1px 0 rgba(255, 255, 255, 0.2), 0px 1px 0 rgba(255, 255, 255, 0.2);
			background: linear-gradient(var(--service02-color), var(--service02-color-dark));
			border-bottom-color: var(--service02-color-shadow);
			&::before {
				filter: drop-shadow(-2px -2px 0 var(--service02-color-dark)) drop-shadow(2px 2px 0 rgba(255, 255, 255, 0.4));
			}
		}
	}
}

main {
	position: relative;
}

section {
	width: 100%;
	padding: 60px 0;
	position: relative;
	overflow: hidden;
}

span {
	&#service01,&#service02,&#service03,&#service04,&#service05,&#service06,&#service07,&#service08 {
		position: relative;
		top: -80px;
		@media (820px >= width) {
			position: relative;
			top: 0px;
		}
	}
}
span.anchor {
	@media (820px >= width) {
		position: relative;
		top: -60px;
	}
}

.inner{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
    position: relative;
}
.inner_wide{
	width: 90%;
	max-width: 100% - 80px;
	margin: 0 auto;
	position: relative;
}
h1,h2,h3,h4,h5,h6{
	line-height: 2;
	letter-spacing: 0.05em;
}
p{
	font-size: 16px;
	line-height: 2;
    letter-spacing: 0.05em;
}
@media screen and (max-width: 820px) {
	section{
		padding: 30px 0;
	}
	p{
		font-size: 15px;
	}
}
.taC {
	text-align: center;
}
.taR {
	text-align: right;
}

.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}
.mt50 {margin-top: 50px;}
.mt60 {margin-top: 60px;}

.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mb40 {margin-bottom: 40px;}
.mb50 {margin-bottom: 50px;}
.mb60 {margin-bottom: 60px;}

.pc {
	display: none;
	@media(820px < width) {
		display: block;
	}
}
.sp {
	display: none;
	@media(820px > width) {
		display: block;
	}
}

/*==================================================================================================*/
/*共通記述*/
h2{
	font-size: 34px;
	font-weight: bold;
	text-align: center;
	line-height: 1.4;
	color: #333333;
	margin-bottom: 30px;
}
h2 span{
	color: var(--main-color);
}
.bg-gray{
	background: #fafafa;
}
.bg-color{
	background: #f2f9ff;
}
.btnBox ul{
	width: 90%;
	max-width: 1117px;
//	margin: -55px auto 0;
	margin: 0 auto;
}
.btnBox li{
	width: 49%;
	max-width: 540px;
}
.btn a{
	display: block;
	position: relative;
}
.btn span.btnText{
    display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 75px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.14em;
	color: #FFF;
	background: #999;
	border-radius: 3px;
	position: relative;
}
.btn span.btnText::before{
    display: block;
	content: "";
	width: 17px;
	height: 18px;
	margin: 0 8px 0 0 ;
}
.btn span.btnText::after{
    display: block;
	content: "〉";
	font-size: 15px;
	line-height: 1;
	color: #FFF;
	position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
}
.btn span.kira{
	display:inline-block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}
.btn span.kira::before {
	content: '';
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	position: absolute;
	top: 0;
	left: -75%;
	transform: skewX(-25deg);
}
/*hoverした際の移動のアニメーション*/
.btn span.kira:hover::before {
	animation: shine 0.7s;
}
@keyframes shine {
  100% {
    left: 125%;
  }
}
/*カラー変更*/
.btn.trial span.btnText{
	background: linear-gradient(#31c96e, #21a560);
}
.btn.document span.btnText{
	letter-spacing: 0.05em;
	background: linear-gradient(#296ed3, #1d55ae);
}
.btn.contact span.btnText{
	background: linear-gradient(#ffbf40, #f7931e);
}
.btn.request span.btnText{
	background: linear-gradient(#f23f2c, #cc1d1d);
}
.btn.trial span.btnText::before{
	background: center / contain no-repeat url("../img/icon-beginner.svg");
	position: relative;
	top: 2px;
}
.btn.document span.btnText::before{
	width: 17px;
    height: 20px;
	background: center / contain no-repeat url("../img/icon-data.svg");
}
.btn.contact span.btnText::before{
	width: 19px;
	background: center / contain no-repeat url("../img/icon-mail.svg");
}
.btn.request span.btnText::before{
	background: center / contain no-repeat url("../img/icon-request.svg");
}
.btn.login span.btnText::before{
	background: center / contain no-repeat url("../img/icon-login.svg");
}

/*吹き出し付*/
.btn.fukidashi{
	position: relative;
	padding: 20px 0 0 0;
}
.btn.fukidashi p{
	display: block;
	width: max-content;
	font-size: 14px;
	font-weight: 500;
	padding: 1px 15px 2px;
	border-radius: 20px;
	border: solid 2px #000;
	background: #FFF;
	position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
	z-index: 1;
}
.btn.fukidashi p span{
	position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
}
.btn.fukidashi p span::before{
	display: block;
	content: "";
	width: 13px;
	height: 13px;
	border-right: solid 2px #000;
	border-bottom: solid 2px #000;
	background: #FFF;
	transform: rotate(45deg);
}
/*吹き出しカラー変更*/
.btn.trial.fukidashi p{
	color: #1ead68;
	border: solid 2.5px #1ead68;
}
.btn.trial.fukidashi p span::before{
	border-right: solid 2px #1ead68;
	border-bottom: solid 2px #1ead68;
}
.btn.document.fukidashi p{
	color: #1d55ae;
	border: solid 2.5px #1d55ae;
}
.btn.document.fukidashi p span::before{
	border-right: solid 2px #1d55ae;
	border-bottom: solid 2px #1d55ae;
}
.btn.contact.fukidashi p{
	color: #f7931e;
	border: solid 2.5px #f7931e;
}
.btn.contact.fukidashi p span::before{
	border-right: solid 2px #f7931e;
	border-bottom: solid 2px #f7931e;
}
@media screen and (max-width: 820px) {
	h2{
		font-size: 23px;
	}
	.btnBox ul{
		max-width: 335px;
		gap: 40px;
		justify-content: center;
	}
	.btnBox li{
		width: 100%;
		margin: 0 auto;
	}
	.point + .btnBox li{
		margin: 0 auto 40px;
	}
	.btn span.btnText{
    	height: 65px;
		font-size: 20px;
	}
	.btn.fukidashi span.btnText{
		font-size: 18px;
		padding: 5px 0 0 0;
	}
	.btn.fukidashi p{
		font-size: 13px;
	}
	.btn.trial.fukidashi p{
		border: solid 2px #1ead68;
	}
	.btn.document.fukidashi p{
		border: solid 2px #1d55ae;
	}
	.btn.contact.fukidashi p{
		border: solid 2px #f7931e;
	}
}
/**/
header {
	position: relative;
}
header .inner{
	width: 96%;
	max-width: 1280px;
	height: 86px;
	padding: 0 25px;
	border-radius: 50px;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 0 4px rgba(0,0,0,0.20);
	position: fixed;
	top: 35px;
    left: 50%;
    transform: translateX(-50%);
	z-index: 10000;
	@media (820px < width) {
		will-change: animation;
		animation: 1.5s cubic-bezier(0.545, 0.005, 0.145, 1.005) 0.5s forwards frameIn;
		opacity: 0;
	}
}
@keyframes frameIn {
	0% {
		top: -15px;
		opacity: 0;
	}
	100% {
		top: 35px;
		opacity: 1;
	}
}
/* @keyframes duration | easing-function | delay |iteration-count | direction | fill-mode | play-state | name */
@keyframes squirrel {
	0% {transform: rotateZ(0);}
	2% {transform: rotateZ(7deg);}
	4% {transform: rotateZ(-7deg);}
	6% {transform: rotateZ(2.5deg);}
	8% {transform: rotateZ(-2.5deg);}
	10% {transform: rotateZ(0deg);}
	100% {transform: rotateZ(0deg);}
}

header .inner .logo{
	width: 320px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	font-size: clamp(20px, 3vw, 32px);
	font-weight: bold;
	z-index: 10;
	> img {
		max-width: 120px;
		margin-right: 4px;
	}
}
header .inner .logo img:nth-child(2){
	display: none;
}
header .inner ul{
	width: calc( 100% - 320px);
	max-width: 800px;
}
header .inner ul li{
	width: fit-content;
}



nav#service_list {
	position: relative;
	> div {
		width: fit-content;
		position: fixed;
		top: calc(15%);
		right: 0px;
		z-index: 105;
		&:hover > ul{
			transform: translateX(0px);
		}
		> p {
			color: #777;
			font-size: 12px;
			text-align: center;
			line-height: 1.2;
			width: fit-content;
			background: #fff;
			padding: 5px;
			border-radius: 4px;
			margin: 0 5px 5px auto;
			position: relative;
			filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
			&::after {
				content: "";
				width: 7px;
				height: 7px;
				display: block;
				background: #fff;
				position: absolute;
				left: 50%;
				bottom: -3px;
				transform: translateX(-50%) rotateZ(45deg);
			}
		}
		img.submenu_icon {
			width: 60px;
			height: auto;
			display: block;
			margin: 0 5px 10px auto;
			filter: drop-shadow(1px 2px 0px rgba(255, 255, 255, 1));
			cursor: pointer;
			will-change: transform;
			transform-origin: bottom center;
			animation: 5s linear 0.5s infinite squirrel;
			
		}
	}
	ul {
		width: fit-content;
		display: flex;
		gap: 6px;
		flex-direction: column;
		transform: translateX(121px);
		transition: 0.3s;
		li {
			display: block;
//			overflow: hidden;
			background: #fff;
			border: solid 2px #ccc;
			border-right: none;
			border-radius: 30px 0 0 30px;
			will-change: scale;
			transform-origin: center right;
			transition: 0.3s;
			&:hover {
				scale: 1.3;
				&:has(a[href$="01"]) {border: solid 2px var(--service01-color-dark); border-right: none;}
				&:has(a[href$="02"]) {border: solid 2px var(--service02-color-dark); border-right: none;}
				&:has(a[href$="03"]) {border: solid 2px var(--service03-color-dark); border-right: none;}
				&:has(a[href$="04"]) {border: solid 2px var(--service04-color-dark); border-right: none;}
				&:has(a[href$="05"]) {border: solid 2px var(--service05-color-dark); border-right: none;}
				&:has(a[href$="06"]) {border: solid 2px var(--service06-color-dark); border-right: none;}
			}
			&::before {
				content: "";
				display: block;
				width: auto;
				height: auto;
				white-space: nowrap;
				font-size: 12px;
				background: #fff;
				padding: 5px 10px;
				border: solid 1px #000;
				border-radius: 5px;
				position: absolute;
				right: calc(100% + 11px);
				top: 50%;
				will-change: transform, opacity;
				transform: translateY(-50%) scale(0, 0);
				transform-origin: right center;
				filter: drop-shadow(0 0 5px rgba(255, 255, 255, 1));
				opacity: 0.5;
				transition: 0.3s;
				transition-delay: 0.05s;
			}
			&:hover::before {
				opacity: 1;
				transform: translateY(-50%) scale(1, 1);
			}
			&::after {
				content: "";
				display: block;
				width: 7px;
				height: 7px;
				background: linear-gradient(45deg, transparent calc(50% - 2px), #fff calc(50% - 1px));
				border-top: solid 1px #000;
				border-right: solid 1px #000;
				position: absolute;
				right: calc(100% + 7px);
				top: 50%;
				will-change: transform, opacity;
				transform: translateY(calc(-50% - 0px)) rotateZ(45deg) scale(0, 0);
				transform-origin: center center;
				opacity: 0;
				transition: 0.3s;
				transition-delay: 0.05s;
			}
			&:hover::after {
				opacity: 1;
				transform: translateY(calc(-50% - 0px)) rotateZ(45deg) scale(1, 1);
			}
			&:has(a[href$="00"])::before,
			&:has(a[href$="00"])::after {
				content: none;
			}
			&:has(a[href$="01"]):hover::before {
				content: "リスクチェックツール";
			}
			&:has(a[href$="02"]):hover::before {
				content: "調査員による検索";
			}
			&:has(a[href$="03"]):hover::before {
				content: "プロによる定期チェック";
			}
			&:has(a[href$="04"]):hover::before {
				content: "深掘りリスク情報調査";
			}
			&:has(a[href$="05"]):hover::before {
				content: "海外の取引先調査";
			}
			&:has(a[href$="06"]):hover::before {
				content: "競合情報収集";
			}
			&:has( + li:hover),
			&:hover + li {
				scale: 1.1;
				transition-delay: 0.05s;
			}
			a {
				width: 100%;
				height: 100%;
				display: block;
				line-height: 1;
				padding: 8px 15px;
				&:hover {
				}
			}
		}
	}
	@media (820px >= width) {
		display: none;
	}
}

header .inner ul .sp {
	padding: 10px 20px 0;
	@media (820px < width) {
		display: none;
	}
}





header .inner ul li a{
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.1em;
	opacity: 1;
	transition: .5s;
}
header .inner ul li a:hover span{
	opacity: 0.5;
	transition: .5s;
}
header .inner ul li.btn.contact a {
	background: #fff;
	border-radius: 50px;
	@media(820px > width) {
		border-radius: 5px;
		width: 100%;
	}
}
header .inner ul li.btn.contact span.btnText{
	width: 190px;
	height: 52px;
	font-size: 13px;
	border-radius: 30px;
	letter-spacing: 0.04em;
	text-shadow: 0 0 1px #f7931e;
	transition: .5s;
}
header .inner ul li.btn.contact span.btnText::before{
	width: 14px;
	margin: 0 4px 0 0 ;
}
header .inner ul li.btn.contact span.btnText::after{
	display: none;
}
.openbtn1,
.sp-contact{
	display: none;
}
@media screen and (max-width: 1100px) {
	header .inner ul li.btn.contact span.btnText{
    	width: 135px;
		height: 50px;
	}
	header .inner ul li.btn.contact span.btnText span{
		display: none;
	}
}
@media screen and (max-width: 1000px) {
	header .inner{
		height: 70px;
		padding: 0 20px;
	}
	header .inner .logo{
//		width: 94px;
	}
	header .inner ul{
//		width: calc( 100% - 120px);
	}
	header .inner ul li a{
		font-size: 13px;
	}
	header .inner ul li.btn.contact span.btnText {
		height: 40px;
	}
}
@media screen and (max-width: 820px) {
	header .inner{
		width: 100%;
		height: 65px;
		padding: 0 15px;
		border-radius: 0;
		box-shadow: 0 0 4px rgba(0,0,0,0.20);
		top: 0;
	}
	header .inner .logo{
//		width: 94px;
	}
	.pcNav header .inner .logo img:nth-child(1){
//		display: none;
	}
	.pcNav header .inner .logo img:nth-child(2){
		display: block;
	}
	.sp-contact{
		display: block;
		width: 65px;
		height: 65px;
		position: fixed;
		top: 0;
		right: 65px;
	}
	.pcNav .sp-contact{
	}
	/*ハンバーガーメニュースマホから作成*/
	.openbtn1{
		display: block;
		cursor: pointer;
		width: 65px;
		height: 65px;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 10;
	}
	.openbtn1 span{
		display: block;
		width: 34px;
		height: 2px;
		border-radius: 1px;
		background: #fff;
		position: absolute;
		top: 24px;
		right: 14px;
		transition: all .4s;
	}
	.openbtn1.black span{
		display: block;
		width: 34px;
		height: 2px;
		border-radius: 1px;
		background: #1f1f1f;
		position: absolute;
		top: 24px;
		right: 14px;
		transition: all .4s;
	}
	.openbtn1 span:nth-of-type(2) {
		width: 26px;
		top: 31px;
		opacity: 1;
	}
	.openbtn1 span:nth-of-type(3) {
		width: 20px;
		top: 38px;
	}
	.openbtn1.active span{
		background: #FFF;
	}
	.openbtn1.active span:nth-of-type(1) {
		top: 25px;
		transform: translateY(6px) rotate(-32deg);
	}
	.openbtn1.active span:nth-of-type(2){
		opacity: 0;
	}
	.openbtn1.active span:nth-of-type(3){
		width: 34px;
		top: 37px;
		transform: translateY(-6px) rotate(32deg);
	}
	header .inner > ul{
		align-items: flex-start;
		align-content: baseline;
		width: 100%;
		height: 100vh;
		padding: 100px 140px;
		background: linear-gradient(#1d55ae, #296ed3);
		position: fixed;
		top: -100vh;
		left: 0;
		transition: 1s;
		z-index: 1;
		overflow: auto;
		@media (820px > width) {
			justify-content: center;
		}
	}
	.pcNav header .inner ul{
		top: 0;
	}
	header .inner ul li{
		width: 280px;
		padding: 10px 0;
		border-bottom: solid 1px #1d55ae;
//		margin: 0 auto 10px;
	}
	header .inner ul li:nth-child(7),
	header .inner ul li:last-child{
		border-bottom: none;
	}
	header .inner ul li:not(:last-child) a{
		display: block;
		font-size: 16px;
		color: #FFF;
		position: relative;
	}
	header .inner ul li:not(:last-child) a::after{
		display: block;
		content: "〉";
		font-size: 14px;
		line-height: 1;
		color: #FFF;
		position: absolute;
		top: 50%;
		right: 15px;
		transform: translateY(-50%);
	}
	
	header .inner ul li.btn.contact .sp-contact {
		right: 0;
	}
	header .inner ul li.btn.contact span.btnText{
//		width: 100%;
		width: 280px;
		height: 65px;
		font-size: 18px;
		border-radius: 5px;
		margin: 10px 0 0;
	}
	header .inner ul li.btn.contact span.btnText::before {
		width: 19px;
		margin: 3px 4px 0 0;
	}
	header .inner ul li.btn.contact span.btnText::after{
		display: block;
	}
}
@media screen and (max-width: 560px) {
	header .inner > ul{
		padding: 100px 20px;
	}
}
/*==================================================================================================*/
/*fv-ファーストビュー*/
.top{
	padding: 0;
	padding-bottom: 60px;
}

.top::before{
	display: block;
	content: "";
	width: 100%;
	height: 740px;
	background: center / cover no-repeat url("../img/fv-bg.jpg");
	opacity: 0.2;
	position: absolute;
	top: 0;
}
.fv {
	position: relative;
}
.fv .inner{
	max-width: 1030px;
	min-height: 740px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.fv .inner div{
	width: fit-content;
	text-align: center;
	padding: 20px 0 0;
	position: relative;
	z-index: 1;
}
.fv .inner div p{
	font-size: 30px;
	font-weight: bold;
	line-height: 1.5;
	text-shadow: 0 0 20px #fff, 0 0 15px #fff, 0 0 10px #fff, 0 0 5px #fff;
}
.fv .inner div img{
	margin: 10px 0;
}
/* 
.fv .inner div h1{
	font-size: 16px;
	font-weight: normal;
}
 */

.fv .inner div h1{
	display: block;
	max-width: 400px;
	filter: drop-shadow(0 0 10px rgba(255, 255, 255, 1));
	@media (820px <= width) {
		
	}
	@media (1000px <= width) {
		max-width: 550px;
	}
}
body {
	.fv {
		.inner hgroup {
			filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
		}
	}
}
.fv .inner div + img{
	display: block;
	width: 550px;
	position: absolute;
    top: 58%;
    right: 0;
    transform: translateY(-50%);
    overflow: visible;
}


.fv div.float_btn {
	display: flex;
	gap: 15px;
	flex-direction: column;
	width: fit-content;
	position: fixed;
	bottom: 100px;
	right: 0px;
	z-index: 100;
	> a {
		display: flex;
		gap: 5px;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 60px;
		height: 172px;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		color: #fff;
		font-size: 16px;
		font-weight: bold;
		letter-spacing: 0.1em;
		border-radius: 3px 0 0 3px;
		will-change: transform;
		transition: 0.3s;
		&:hover {
			bottom: 10px;
			opacity: .8;
			transform: scale(1.1, 1.1);
			transform-origin: right center;
			transition: 0.3s;
		}
		&.trial {
			background: linear-gradient(#31c96e, #21a560);
			&::before {
				content: "";
				display: block;
				width: 17px;
				height: 18px;
				background: center / contain no-repeat url("../img/icon-beginner.svg");
				position: relative;
			}
		}
		&.login {
			background: linear-gradient(var(--service06-color), var(--service04-color));/* #ffbf40, #f7931e */
			&::before {
				content: "";
				display: block;
				width: 22px;
				height: 22px;
				background: center / contain no-repeat url("../img/icon-login.svg");
				position: relative;
			}
		}
		&.contact {
			background: linear-gradient(#ffbf40, #f7931e);
			&::before {
				content: "";
				display: block;
				width: 20px;
				height: 20px;
				background: center / contain no-repeat url("../img/icon-mail.svg");
				position: relative;
			}
		}
	}
}



.philosophy {
	background: #fff;
	padding: 20px 30px;
	border: solid 2px #00a0e6;
	border-radius: 5px;
	margin: -170px auto 50px;
	@media (820px <= width) {
		margin: -80px auto 50px;
	}
}



@media screen and (max-width: 1000px) {
	.fv .inner {
    	max-width: 750px;
	}
	.fv .inner div p{
		font-size: 20px;
	}
	.fv .inner div img{
		width: 100%;
		max-width: 500px;
		margin: 10px auto;
	}
	.fv .inner div h1{
		font-size: 14px;
	}
	.fv .inner div + img{
		width: 430px;
	}
}
@media screen and (max-width: 820px) {
	.top{
//		padding: 65px 0 0 ;
		padding-top: 65px;
	}
	.top::before{
//		height: calc( 100vh + 65px );
		height: 750px;
    	top: 0;
	}
	.fv .inner{
		display: block;
//		height: calc( 100vh - 65px );
		height: calc( 100vh - 460px );
//		min-height: calc( 684px - 65px );
		padding: 40px 0 0;
	}
	.fv .inner div{
		padding: 0;
		margin: 0 auto 20px;
	}
	.fv .inner div p{
		font-size: 18px;
	}
	.fv .inner div img{
//		width: 248px;
	}
	.fv .inner div h1{
		font-size: 13px;
		color: #4f4f4f;
	}
	.fv .inner div + img{
//		width: 330px;
		max-width: calc(100% - 40px);
		max-height: 240px;
		position: relative;
		top: 0;
		transform: none;
		margin: 0 auto;
	}
	.fv .btn.trial{
		top: auto;
		transform: auto;
		bottom: 0px;
	}
	.fv .btn.trial:hover{
		top: auto;
		transform: auto;
		bottom: 0px;
	}
	.fv .btn.trial span.btnText {
    	width: 50px;
	}
}
/**/
.point{
	width: 96%;
	max-width: 1255px;
	margin: -70px auto 80px;
	position: relative;
}
.point li{
	width: 33%;
	max-width: 410px;
	border-radius: 5px;
	padding: 30px 0;
	background: #FFF;
}
.point li div{
	width: 90%;
	max-width: 304px;
	margin: 0 auto;
}
.point li div span{
	display: inline-block;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.4;
    color: #FFF;
    padding: 0 10px 3px;
	background: #00a0e6;
	margin: 0 0 10px;
}
.point li div p:nth-child(2){
	font-size: 54px;
	font-weight: bold;
	line-height: 1;
	letter-spacing: 0.12em;
	margin: 0 0 15px;
}
.point li div p:nth-child(3){
	line-height: 1.6;
}
@media screen and (max-width: 1011px) {
	.point li:nth-child(3) div p:nth-child(3) br:nth-child(2){
		display: none;
	}
}
@media screen and (max-width: 1000px) {
	.point li div{
		max-width: 285px;
		position: relative;
	}
	.point li:not(:last-child) div::after{
		display: block;
		content: "";
		width: 100%;
		height: 1px;
		background: #eeeeee;
		position: absolute;
		bottom: -12px;
	}
	.point li div span{
		font-size: 14px;
		padding: 0 6px;
	}
	.point li div p:nth-child(2){
		font-size: 34px;
		margin: 0 0 7px;
	}
}
@media screen and (max-width: 820px) {
	.point{
		max-width: 334px;
		justify-content: center;
		margin: -20px auto 60px;
	}
	.point li{
		width: 100%;
		border-radius: 5px;
		padding: 20px 0 15px;
	}
	.point + .btnBox{
		margin: 0 auto 20px;
	}
}
/**/
.news{
	width: 90%;
	max-width: 1113px;
	border: solid 1px #eeeeee;
	margin: 80px auto;
}
.news li{
	width: 90%;
	max-width: 920px;
	margin: 0 auto;
}
.news li:not(:last-child){
	border-bottom: solid 1px #d7d8da;
}
.news li,
.info li a{
	height: 88px;
	position: relative;
	opacity: 1;
	transition: .5s;
}
.info li a:hover{
	opacity: 0.5;
}
.day{
	width: 144px;
	font-size: 14px;
}
.day + h4{
	width: calc( 100% - 144px );
	font-size: 16px;
}
.info li a::after{
    display: block;
	content: "〉";
	font-size: 15px;
	line-height: 1;
	position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
}
@media screen and (max-width: 820px) {
	.news{
		margin: 0 auto 50px;
	}
	.news li,
	.info li a{
		height: 77px;
		align-content: center;
	}
	.day{
		width: 100%;
	}
	.day + h4{
		width: 100%;
	}
	.info li a::after{
		display: none;
	}
	.day{
		font-size: 13px;
	}
	.day + h4{
		font-size: 14px;
		letter-spacing: 0;
	}
}

/*==================================================================================================*/
/*目的からシリーズを選ぶ*/
#purpose {
	& + section {
	}
}
#summary {
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-top: 30px;
	dl {
		font-size: 16px;
		margin-bottom: 20px;
		position: relative;
		> dt {
			clear: both;
			width: fit-content;
			line-height: 1.5;
			background: #fff url("../img/solution-deco.png");
			background-repeat: no-repeat;
			background-size: 50px 50px;
			background-position: 15px center;
			padding: 20px 20px 20px 80px;
			border: solid 2px #ccc;
			border-radius: 15px 15px 15px 0;
			box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.075);
			margin: 0 5px 20px 0;
			position: relative;
			> ul {
				display: flex;
				gap: 1.5rem;
				flex-direction: column;
				li {
				}
			}
		}
		> dd {
			width: fit-content;
			min-width: 320px;
			float: right;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: clamp(20px, 4vw, 24px);
			font-weight: bold;
			background-repeat: no-repeat;
			background-size: 50px 50px;
			background-position: calc(100% - 10px) center;
			padding: 10px 60px 10px 15px;
			border-radius: 15px 15px 0 15px;
			box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.075);
			margin-right: 5px;
			margin-bottom: 10px;
			position: relative;
			z-index: 0;
			cursor: default;
			&:has(a[href$="01"]) {
				border: solid 3px var(--service01-color-dark);
			}
			&:has(a[href$="02"]) {
				border: solid 3px var(--service02-color-dark);
			}
			&:has(a[href$="03"]) {
				border: solid 3px var(--service03-color-dark);
			}
			&:has(a[href$="04"]) {
				border: solid 3px var(--service04-color-dark);
			}
			&:has(a[href$="05"]) {
				border: solid 3px var(--service05-color-dark);
			}
			&:has(a[href$="06"]) {
				border: solid 3px var(--service06-color-dark);
			}
			&::before {
				content: "";
				display: block;
				width: 100%;
				height: 100%;
				background: #fff;
				border-radius: 12px 12px 0 12px;
				position: absolute;
				left: 0;
				top: 0;
				z-index: -1;
			}
			&::after {
				content: "";
				width: 60px;
				height: 60px;
				display: block;
				background: url("../img/bulb.svg");
				background-size: contain;
				position: absolute;
				z-index: 0;
				top: 50%;
				right: 10px;
				will-change: transform;
				transform: translateY(-50%) rotateZ(15deg) scale(1.2, 1.2);
				transform-origin: center;
				opacity: 1;
				transition: 0.3s;
			}
			> span {
				font-size: clamp(14px, 2vw, 15px);
				font-weight: normal;
			}
			> a {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 120px;
				color: #fff;
				font-size: 14px;
				font-weight: normal;
				background: #f54e3c;
				padding: 5px 10px;
				margin-top: 10px;
				border-radius: 4px;
				transition: 0.3s;
				&:hover {
					opacity: 0.7;
				}
				&::after {
					box-sizing: border-box;
					content: "";
					width: 9px;
					height: 6px;
					display: block;
					border-top: solid 6px #fff;
					border-right: solid 4px transparent;
					border-left: solid 4px transparent;
					margin-left: 5px;
				}
			}
		}
		
		
		@media (820px <= width) {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			font-size: 18px;
			position: relative;
			&::after {
					content: "";
					display: block;
					box-sizing: border-box;
					width: 20px;
					height: 30px;
					border-top: solid 15px transparent;
					border-bottom: solid 15px transparent;
					border-left: solid 15px #89a;
					position: absolute;
					left: calc(calc(100% - 50px) * 0.6 + 18px);
					top: 50%;
					transform: translateY(-50%);
			}
			> dt {
				display: flex;
				align-self: stretch;
				align-items: center;
				clear: both;
				float: left;
				width: calc(calc(100% - 50px) * 0.6);
				margin: 0 0 10px;
			}
			> dd {
				width: calc(calc(100% - 50px) * 0.4);
				min-width: auto;
				display: flex;
				flex-direction: column;
				justify-content: center;
				background: #fff;
				padding: 15px 15px;
				border: solid 1px #ccc;
				position: relative;
				&::after {
					content: "";
					width: 100px;
					height: 100px;
					display: block;
					background: url("../img/bulb.svg");
					background-size: contain;
					position: absolute;
					top: 50%;
					right: 10px;
					z-index: -1;
					will-change: transform;
					transform: translateY(-50%) rotateZ(15deg) scale(1.2, 1.2);
					transform-origin: center;
					opacity: 0;
					transition: 0.3s;
				}
				&:hover::after {
					transform: translateY(-50%) rotateZ(15deg) scale(1, 1);
					opacity: 1;
				}
				> a {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 120px;
					color: #fff;
					font-size: 14px;
					font-weight: normal;
					background: #f54e3c;
					padding: 5px 10px;
					border-radius: 4px;
					margin-inline: auto;
					transition: 0.3s;
					&:hover {
						opacity: 0.7;
					}
					&::after {
						box-sizing: border-box;
						content: "";
						width: 9px;
						height: 6px;
						display: block;
						border-top: solid 6px #fff;
						border-right: solid 4px transparent;
						border-left: solid 4px transparent;
						margin-left: 5px;
					}
				}

			}
		}
	}
}


/*==================================================================================================*/
/*サービス一覧表*/
.grid {
	display: grid;
	gap: 1px;
/* 	grid-auto-flow: column;
	grid-template-rows: repeat(6, auto); */
	grid-template-columns: repeat(4, auto);
	min-width: 738px;
	background: linear-gradient(150deg, #00a0e6, #0066bc);
	padding: 5px;
	border-radius: 9px;
	margin-top: 20px;
	> * {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 1em;
		line-height: 1.2;
		background: #fff;
		padding: 15px 10px;
		position: relative;
		&.name {
			color: #01418e;
			font-size: clamp(18px, 2vw, 22px);
			font-weight: bold;
			text-align: center;
		}
		&.ltop,
		&.name {
			position: sticky;
			left: 0px;
			z-index: 1;
			&::after {
				content: "";
				display: block;
				width: 100%;
				height: 100%;
				border-right: solid 1px var(--service01-color);
				position: absolute;
				left: 0;
				top: 0;
				z-index: -1;
			}
		}
		&:nth-child(1 of .name) {color: var(--service01-color-dark);}
		&:nth-child(2 of .name) {color: var(--service02-color-dark);}
		&:nth-child(3 of .name) {color: var(--service03-color-dark);}
		&:nth-child(4 of .name) {color: var(--service04-color-dark);}
		&:nth-child(5 of .name) {color: var(--service05-color-dark);}
		&:nth-child(6 of .name) {color: var(--service06-color-dark);}
		
		&.check {
		}
		
		&.link_btn {
			min-width: 80px;
			font-size: clamp(16px, 2vw, 20px);
			font-weight: bold;
			> span {
				font-size: 12px;
				font-weight: normal;
			}
		}
		> a {
			display: flex;
			justify-content: center;
			align-items: center;
			width: fit-content;
			min-width: 5em;
			color: #fff;
			font-size: clamp(12px, 2vw, 14px);
			font-weight: normal;
			background: #f54e3c;
			padding: 5px 10px;
			border-radius: 4px;
			margin-inline: auto;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			&:hover {
				opacity: 0.7;
			}
			&::after {
				box-sizing: border-box;
				content: "";
				width: 9px;
				height: 6px;
				display: block;
				border-top: solid 6px #fff;
				border-right: solid 4px transparent;
				border-left: solid 4px transparent;
				margin-left: 5px;
			}
		}
	}
	> .ltop {
		border-radius: 5px 0 0 0;
	}
	> .rtop {
		border-radius: 0 5px 0 0;
	}
	> .lbottom {
		border-radius: 0 0 0 5px;
	}
	> .rbottom {
		border-radius: 0 0 5px 0;
	}
}

#service00 + section {
	h3 {
		font-size: 24px;
		line-height: 1.5;
		margin-bottom: 20px;
		@media (820px < width) {
			text-align: center;
		}
		span {
			color: var(--main-color);
		}
	}
}

.grid_single {
	display: grid;
	gap: 1px;
/* 	grid-auto-flow: column;
	grid-template-rows: repeat(6, auto); */
	grid-template-columns: repeat(3, auto);
	background: linear-gradient(150deg, var(--service06-color), var(--service06-color-dark));
	padding: 5px;
	border-radius: 9px;
	> * {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 1em;
		line-height: 1.2;
		background: #fff;
		padding: 15px 10px;
		position: relative;
		&.name {
			color: var(--service06-color-dark);
			font-size: clamp(18px, 2vw, 22px);
			font-weight: bold;
			text-align: center;
			border-radius: 5px 0 0 5px;
			position: sticky;
			left: 0px;
			z-index: 1;
			&::after {
				content: "";
				display: block;
				width: 100%;
				height: 100%;
				border-right: solid 1px var(--service06-color);
				position: absolute;
				left: 0;
				top: 0;
				z-index: -1;
			}
		}
		&.link_btn {
			min-width: 80px;
			border-radius: 0  5px 5px 0;
			> span {
				font-size: 12px;
				font-weight: normal;
			}
		}
		> a {
			display: flex;
			justify-content: center;
			align-items: center;
			width: fit-content;
			min-width: 5em;
			color: #fff;
			font-size: clamp(12px, 2vw, 14px);
			font-weight: normal;
			background: #f54e3c;
			padding: 5px 10px;
			border-radius: 4px;
			margin-inline: auto;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			&:hover {
				opacity: 0.7;
			}
			&::after {
				box-sizing: border-box;
				content: "";
				width: 9px;
				height: 6px;
				display: block;
				border-top: solid 6px #fff;
				border-right: solid 4px transparent;
				border-left: solid 4px transparent;
				margin-left: 5px;
			}
		}
	}
}







/*==================================================================================================*/
/*各種サービス*/


/*各種サービス色分け*/
/* 
#service01 + section > .inner {background: var(--service01-color);}
#service02 + section > .inner {background: var(--service02-color);}
#service03 + section > .inner {background: var(--service03-color);}
#service04 + section > .inner {background: var(--service04-color);}
#service05 + section > .inner {background: var(--service05-color);}
#service06 + section > .inner {background: var(--service06-color);}
 */

#service01 + section > .inner {background: linear-gradient(150deg, var(--service01-color), var(--service01-color-dark));}
#service02 + section > .inner {background: linear-gradient(150deg, var(--service02-color), var(--service02-color-dark));}
#service03 + section > .inner {background: linear-gradient(150deg, var(--service03-color), var(--service03-color-dark));}
#service04 + section > .inner {background: linear-gradient(150deg, var(--service04-color), var(--service04-color-dark));}
#service05 + section > .inner {background: linear-gradient(150deg, var(--service05-color), var(--service05-color-dark));}
#service06 + section > .inner {background: linear-gradient(150deg, var(--service06-color), var(--service06-color-dark));}



/*各種サービス背景写真*/
#service01,
#service02,
#service03,
#service04,
#service05,
#service06 {
	& + section {
		position: relative;
		z-index: 0;
		&::after {
			content: "";
			width: 600px;
			aspect-ratio: 16/9;
			display: block;
			position: absolute;
			top: 50%;
			z-index: 0;
			transform: translateY(-50%);
			opacity: 0.5;
		}
		> .inner {
			position: relative;
			z-index: 1;
		}
	}
}
#service01,
#service03,
#service05 {
	& + section {
		position: relative;
		&::after {
			left: 70%;
		}
	}
}
#service02,
#service04,
#service06 {
	& + section {
		position: relative;
		&::after {
			right: 70%;
		}
	}
}
/* #service01 + section::after {background: url("../pro/img/fv-image_pro.png"); background-repeat: no-repeat; background-size: contain;} */
#service02 + section::after {background: url("../pro/img/fv-image_pro.png"); background-repeat: no-repeat; background-size: contain;}
#service03 + section::after {background: url("../bulkcheck/img/fv-image_bulk.png"); background-repeat: no-repeat; background-size: contain;}
#service04 + section::after {background: url("../deepsearch/img/fv-image_deep.png"); background-repeat: no-repeat; background-size: contain;}
#service05 + section::after {background: url("../global/img/fv-image_global.png"); background-repeat: no-repeat; background-size: contain;}
#service06 + section::after {background: url("../competitorscan/img/fv-image_competitor.png"); background-repeat: no-repeat; background-size: contain;}


.price_flex {
	display: flex;
	gap: 20px;
	flex-direction: column;
	justify-content: space-evenly;
	margin: 50px auto;
	> li {
		display: flex;
		flex-direction: row;
		align-self: center;
		width: 100%;
		background: #f2f9ff;
		border: solid 1px var(--main-color);
		border-top: solid 5px var(--main-color);
		img {
			width: clamp(100px, 10vw, 200px);
			object-fit: contain;
			position: relative;
			&::before {
				content: "";
				width: auto;
				height: 100%;
				display: block;
				background: #f99;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
		> dl {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			background: #fff;
			padding: 10px;
			> * {
			}
			> dt {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				color: var(--main-color);
				font-size: clamp(22px, 2vw, 28px);
				font-weight: bold;
			}
			> dd {
				font-size: clamp(14px, 2vw, 18px);
				span {
					display: block;
					border: solid 1px #f54e3c;
				}
			}
			strong {
//				color: #d90000;
				font-size: clamp(24px, 2vw, 28px);
				font-weight: bold;
				margin: 0 0.5rem;
			}
		}
		> div {
			background: #fff;
			padding: 10px 15px;
		}
	}
}

section.service {
	padding: 60px 0 60px;
	> h2{
		margin: 0 0 30px;
	}
	> .inner {
		padding: 0 5px 5px;
		border-radius: 9px;
		hgroup {
			display: flex;
			gap: 10px;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			text-shadow: 1px 1px 5px rgba(80, 0, 50, 0.5);
			padding: 20px 10px;
			> h2 {
				width: 35%;
				min-width: 270px;
				color: #fff;
				font-size: clamp(30px, 5vw, 40px);
				line-height: 1.2;
				margin: 0;
				@media(820px > width) {
					width: 100%;
					> br {
						display: none;
					}
				}
			}
			> p {
				align-self: center;
				color: #fff;
				font-size: clamp(16px, 2vw, 20px);
				line-height: 1.5;
			}
			@media (820px >= width) {
				flex-direction: column;
			}
		}
		> div {
			background: #fff;
			padding: 20px;
			border-radius: 5px;
			& > h3 {
				color: #01418e;
			}
		}
		p {
			&:has( + h3) {
				margin-bottom: 2rem;
			}
		}
	}
	.basic_explanation {
		display: flex;
		gap: 1rem;
		flex-direction: row;
		@media (820px > width) {
			flex-direction: column;
			align-items: center;
		}
		h3 {
			color: var(--main-color);
		}
		div.img {
			width: 45%;
			display: flex;
			flex-direction: column;
			gap: 1rem;
			padding: 0;
			img {
				height: auto;
				object-fit: contain;
				position: relative;
			}
			@media (820px > width) {
				width: calc(100% - 80px);
				max-width: 400px;
			}
		}
		& + * {
			margin-top: 2rem;
		}
	}
}
span#service + section {
	table {
		font-size: 1.25em;
		table-layout: fixed;
		th {
			width: 160px;
		}
	}
}
.riskey_global span#service + section {
	table {
	 	min-width: 738px;
		font-size: 1.1em;
		position: relative;
		th {
			width: 140px;
			position: sticky;
			left: 1px;
			border: solid 1px #000;
		}
	}
}


.button_lead {
	font-size: clamp(20px, 2vw, 22px);
	text-align: center;
	line-height: 1.5;
	margin-bottom: 60px;
	position: relative;
	&::after {
		box-sizing: border-box;
		content: "";
		display: block;
		width: 80px;
		height: 20px;
		border-top: solid 20px #89a;
		border-right: solid 40px transparent;
		border-left: solid 40px transparent;
		position: absolute;
		left: 50%;
		top: calc(100% + 20px);
		transform: translateX(-50%);
	}
}

.inquiry2 {
	display: flex;
	gap: 30px;
	flex-direction: row;
	justify-content: space-around;
	margin-top: 20px;
	> li {
		display: flex;
		justify-content: center;
		align-items: stretch;
		align-self: center;
		background: #fff;
		> a {
			display: flex;
			justify-content: center;
			width: 100%;
			color: #fff;
			font-size: clamp(18px, 2vw, 20px);
			letter-spacing: 0.05em;
			padding: 10px 30px 10px 15px;
			border-radius: 3px;
			position: relative;
			transition: 0.3s;
			&[href$="request/"] {
				background: linear-gradient(var(--inquiry-document-color), var(--inquiry-document-color-dark));
				&::before {
					content: "";
					width: 18px;
					height: 18px;
					display: inline-block;
					background: center / contain no-repeat url("../img/icon-data.svg");
					margin-right: 10px;
					position: relative;
					top: 9px;
					left: 0;
				}
			}
			&[href$="contact/"] {
				background: linear-gradient(var(--inquiry-contact-color), var(--inquiry-contact-color-dark));
				&::before {
					content: "";
					width: 18px;
					height: 18px;
					display: inline-block;
					background: center / contain no-repeat url("../img/icon-mail.svg");
					margin-right: 10px;
					position: relative;
					top: 10px;
					left: 0;
				}
			}
			&[href$="lp1/"] {
				background: linear-gradient(var(--inquiry-request-color), var(--inquiry-request-color-dark));
				&::before {
					content: "";
					width: 18px;
					height: 18px;
					display: inline-block;
					background: center / contain no-repeat url("../img/icon-detail.svg");
					margin-right: 10px;
					position: relative;
					top: 9px;
					left: 0;
				}
			}
			&:hover {
				opacity: 0.7;
			}
			&::after {
				display: block;
				content: "〉";
				line-height: 1;
				color: #FFF;
				position: absolute;
				top: 50%;
				right: 15px;
				transform: translateY(-50%);
			}
		}
	}
}


.external_link {
	display: flex;
	gap: 20px;
	flex-direction: row;
	overflow: hidden;
	padding-bottom: 5px;
	margin-top: 30px;
	margin-bottom: -5px;
	> li {
		> a {
			display: block;
			background: linear-gradient(var(--service01-color), var(--service01-color-dark));
			border-radius: 6px;
			padding: 4px;
			border-bottom: solid 5px var(--service01-color-shadow);
			transition: 0s;
			&:hover {
				border-bottom: solid 4px var(--service01-color-shadow);
				margin-top: 1px;
				position: relative;
			}
			&:active {
				border-bottom: solid 1px var(--service01-color-shadow);
				margin-top: 4px;
				position: relative;
			}
			
			p {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 20px 10px;
				&.lead_text {
					font-size: clamp(15px, 4vw, 20px);
					line-height: 1.5;
					background: #fff;
					border-radius: 3px;
					position: relative;
					&::after {
						display: block;
						content: "";
						width: 20px;
						height: 20px;
						background: #FFF;
						position: absolute;
						left: 50%;
						bottom: -17px;
						z-index: 1;
						transform: rotate(45deg) translateX(-50%);
					}
				}
				&:not(.lead_text) {
					color: #fff;
					font-size: clamp(20px, 2.5vw, 26px);
					padding-right: 34px;
					position: relative;
					&::before {
						content: "";
						width: 24px;
						height: 24px;
						display: inline-block;
						background: center / contain no-repeat url("../img/icon-detail.svg");
						margin-right: 10px;
						position: relative;
						top: 50%;
						left: 0;
					}
					&::after {
						display: block;
						content: "〉";
						line-height: 1;
						color: #FFF;
						position: absolute;
						top: 50%;
						right: 15px;
						transform: translateY(-50%);
					}
				}
			}
		}
	}
}

.external_link.login_btn {
	display: flex;
	gap: 20px;
	flex-direction: row;
	overflow: hidden;
	padding-bottom: 5px;
	margin-top: 30px;
	margin-bottom: -5px;
	> li {
		> a {
			display: block;
			background: linear-gradient(var(--service06-color), var(--service04-color));
			border-radius: 6px;
			padding: 4px;
			border-bottom: solid 5px var(--service04-color-dark);
			transition: 0s;
			&:hover {
				border-bottom: solid 4px var(--service04-color-dark);
				margin-top: 1px;
				position: relative;
			}
			&:active {
				border-bottom: solid 1px var(--service04-color-dark);
				margin-top: 4px;
				position: relative;
			}
			
			p {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 20px 10px;
				&.lead_text {
					font-size: clamp(15px, 4vw, 20px);
					line-height: 1.5;
					background: #fff;
					border-radius: 3px;
					position: relative;
					&::after {
						display: block;
						content: "";
						width: 20px;
						height: 20px;
						background: #FFF;
						position: absolute;
						left: 50%;
						bottom: -17px;
						z-index: 1;
						transform: rotate(45deg) translateX(-50%);
					}
				}
				&:not(.lead_text) {
					color: #fff;
					font-size: clamp(20px, 2.5vw, 28px);
					padding-right: 34px;
					position: relative;
					&::before {
						content: "";
						width: 28px;
						height: 28px;
						display: inline-block;
						background: center bottom / contain no-repeat url("../img/icon-login.svg");
						margin-right: 10px;
						position: relative;
						top: 50%;
						left: 0;
					}
					&::after {
						display: block;
						content: "〉";
						line-height: 1;
						color: #FFF;
						position: absolute;
						top: 50%;
						right: 15px;
						transform: translateY(-50%);
					}
				}
			}
		}
	}
}

main.lp .flex_col {
	h3 {
		font-size: clamp(16px, 2vw, 18px);
	}
}

.flex_col {
	display: flex;
	gap: 40px;
	flex-direction: column;
	margin-top: 40px;
	&.col2 {
		gap: 20px;
		flex-direction: row;
		@media(820px >= width) {
		gap: 40px;
			flex-direction: column;
		}
	}
	&.col3 {
		gap: 20px;
		flex-direction: row;
		@media(820px >= width) {
		gap: 40px;
			flex-direction: column;
		}
	}
	> div {
		padding: 25px 10px 10px;
		border: solid 1px #999;
		border-radius: 6px;
		position: relative;
		h3 {
			display: flex;
			color: #fff;
			font-weight: normal;
			align-content: space-around;
			justify-content: center;
			align-items: center;
			width: calc(8em + 20px);
			line-height: 1.75;
			background: #555;
			padding: 0 20px;
//			border: solid 1px #999;
			border-radius: 50px;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
		}
	}
	.range {
		display: flex;
//		align-items: stretch;
		> ul {
			display: flex;
			gap: 1rem;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: center;
			@media(820px >= width) {
				gap: 1rem;
			}
			> li {
				display: flex;
				justify-content: center;
				align-self: center;
				align-items: flex-end;
				width: 100%;
				max-width: 80px;
				aspect-ratio: 1 /  1.35;
				font-size: clamp(9px, 1.2vw, 13px);
				position: relative;
				&.web {
					background: url("../img/icons/icon_pc.png");
					background-repeat: no-repeat;
					background-size: contain;
					background-position: 50% top;
				}
				&.newspaper {
					background: url("../img/icons/icon_newspaper.png");
					background-repeat: no-repeat;
					background-size: contain;
					background-position: 50% top;
				}
				&.research {
					background: url("../img/icons/icon_research.png");
					background-repeat: no-repeat;
					background-size: contain;
					background-position: 50% top;
				}
				&.interview {
					background: url("../img/icons/icon_interview.png");
					background-repeat: no-repeat;
					background-size: contain;
					background-position: 50% top;
				}
				&.antisocial {
					background: url("../img/icons/icon_antisocial.png");
					background-repeat: no-repeat;
					background-size: contain;
					background-position: 50% top;
				}
				&.criminal {
					background: url("../img/icons/icon_criminal.png");
					background-repeat: no-repeat;
					background-size: contain;
					background-position: 50% top;
				}
				&.lawsuit {
					background: url("../img/icons/icon_scales.png");
					background-repeat: no-repeat;
					background-size: contain;
					background-position: 50% top
				}
				&.automatic {
					background: url("../img/icons/icon_automatic.png");
					background-repeat: no-repeat;
					background-size: contain;
					background-position: 50% top
				}
				&.precedent {
					background: url("../img/icons/icon_precedent.png");
					background-repeat: no-repeat;
					background-size: contain;
					background-position: 50% top
				}
				@media(820px >= width) {
					font-size: clamp(10px, 2.5vw, 13px);
				}
			}
		}
	}
	.purpose {
		display: flex;
		gap: 20px;
		flex-direction: row;
		> div {
			background: #eee;
			ul {
				padding-left: 10ox;
			}
		}
	}
}




/* 
table{
	box-sizing: content-box;
	border-collapse: collapse;
	padding: 50px 0 10px;
}
tbody {
	display: flex;
	flex-direction: row;
}

tbody tr{
	display: flex;
	flex-direction: column;
	width: 100%;
}
tbody tr {
	td {
		border: solid 1px #333;
	}
}


table{
	display: flex;
	padding: 50px 0 10px;
}
thead th{
	display: flex;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	width: 205px;
	height: 78px;
	font-size: 16px;
	line-height: 1.4;
	padding: 0 25px;
}
thead th:not(:first-child){
	border: solid 1px #eeeeee;
	background: #fafafa;
}
thead th span{
	width: 100%;
	font-size: 12px;
	font-weight: normal;
	text-align: left;
	color: #6d6d6d;
}
tbody th,
tbody td{
	border: solid 1px #eeeeee;
}
tbody{
	display: flex;
	width: 790px;
	background: #FFF;
}
tbody tr{
	display: block;
}
tbody tr th,
tbody tr td{
	display: flex;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	width: 100%;
	height: 78px;
}
tbody tr th{
	justify-content: center;
	font-size: 20px;
	color: #6d6d6d;
	background: #ffeece;
}
tbody tr td img{
	width: 28px;
	margin: 0 auto 5px;
}
tbody tr td p{
	font-size: 13px;
	line-height: 1;
	text-align: center;
	color: #6d6d6d;
}
tbody tr:nth-child(1){
	position: relative;
}
tbody tr:nth-child(1)::before{
	display: block;
	content: "";
	width: 256px;
	height: 100%;
	border: solid 4px #f7931e;
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
tbody tr:nth-child(1)::after{
	display: block;
	content: "";
	width: 264px;
	height: 30px;
	border-radius: 20px 20px 0 0;
	background: #f7931e;
	position: absolute;
	top: -25px;
    left: 50%;
    transform: translateX(-50%);
}
tbody tr:nth-child(1) th{
	border: none;
	background: #f7931e;
	position: relative;
}
tbody tr:nth-child(1) th::before{
	display: flex;
	align-items: center;
	justify-content: center;
	content: "当社";
	width: 80px;
	height: 30px;
	font-size: 14px;
	font-weight: bold;
	color: #f7931e;
	border: solid 2px #f7931e;
	border-radius: 20px;
	background: #FFF;
	position: absolute;
	top: -40px;
    left: 50%;
    transform: translateX(-50%);
	z-index: 1;
}
tbody tr:nth-child(1) th img{
	width: 157px;
	margin: 0 0 10px;
}
 */


.js-scrollable{
}
.scroll-hint.is-right-scrollable {
	background: linear-gradient(270deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}

.scroll-hint.is-right-scrollable.is-left-scrollable {
	background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}

.scroll-hint.is-left-scrollable {
	background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}
span.scroll-hint-icon.scroll-hint-icon-white {
    height: auto;
}

@media screen and (max-width: 820px) {
	.service {
		padding: 45px 0 70px;
	}
	.service .inner{
		width: 100%;
	}
	.service h2{
		margin: 0 0 20px;
	}
	table{
		padding: 50px 5% 10px;
	}
	thead th{
		width: 180px;
		font-size: 15px;
		letter-spacing: 0.1em;
		padding: 0 15px;
	}
	thead th span{
		font-size: 13px;
	}
	tbody{
		width: 700px;
	}
	tbody tr{
		width: 230px;
	}
	thead tr th:nth-child(1),
	tbody tr th{
		height: 60px;
	}
	/**/
	tbody tr:nth-child(1)::before{
		width: 230px;
	}
	tbody tr:nth-child(1)::after{
		width: 238px;
	}
	tbody tr:nth-child(1) th img{
		width: 130px;
	}
}






/*==================================================================================================*/
/*feature-機能のご紹介*/

.feature h2 {
    margin: 0 auto 60px;
}
.feature-point{
	margin: 0 auto 70px;
}
.feature-point li{
	min-height: 426px;
	padding: 34px 0;
	background: #FFF;
	margin-bottom: 50px;
	position: relative;
}
.feature-point li:nth-child(2){
	flex-direction: row-reverse;
}
.feature-point li::before,
.feature-point li::after{
	display: block;
	content: "";
	width: 180px;
	height: 100%;
	background: #FFF;
	position: absolute;
	top: 0;
	left: -180px;
}
.feature-point li:nth-child(2)::before{
	left: auto;
	right: -180px;
}
.feature-point li::after{
	width: 230px;
	background: #f2f9ff;
	left: auto;
	right: 0;
}
.feature-point li:nth-child(2)::after{
	left: 0;
	right: auto;
}
.feature-point li div{
	max-width: 495px;
}
.feature-point li:nth-child(2) div{
	max-width: 555px;
}
.feature-point li div h3{
	display: flex;
	align-items: center;
	font-size: 28px;
	font-weight: bold;
	line-height: 1.3;
	color: var(--main-color);
	padding: 0 0 26px;
	border-bottom: solid 1px #eeeeee;
	margin: 0 0 12px;
}
.feature-point li:nth-child(2) div h3,
.feature-point li:nth-child(3) div h3{
	font-size: 26px;
	padding: 0 0 15px;
}
.feature-point li div h3::before{
	display: inline-block;
	content: "";
	width: 46px;
	height: 40px;
	background: center / contain no-repeat url("../img/feature-no01.svg");
	margin: 0 15px 0 0;
	position: relative;
    top: 5px;
}
.feature-point li:nth-child(2) div h3::before{
	background: center / contain no-repeat url("../img/feature-no02.svg");
}
.feature-point li:nth-child(3) div h3::before{
	background: center / contain no-repeat url("../img/feature-no03.svg");
}
.feature-point li div .pluseone{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 1.6;
	padding: 20px;
	background: #fafafa;
	margin: 22px 0 0;
}
.feature-point li div .pluseone::before{
	display: inline-block;
	content: "";
	width: 43px;
	height: 43px;
	background: center / contain no-repeat url("../img/pluseone.svg");
	margin: 0 10px 0 0;
}
.feature-point li div .pluseone span{
	width: calc( 100% - 53px );
}
.feature-point li div + img{
	width: calc( 100% - 495px );
	z-index: 1;
}
.feature-point li:nth-child(2) div + img,
.feature-point li:nth-child(3) div + img{
	width: calc( 100% - 555px );
    max-width: 400px;
}
@media screen and (max-width: 1000px) {
	.feature h2 {
		margin: 0 auto 60px;
	}
	.feature-point{
		margin: 0 auto 50px;
	}
	.feature-point li,
	.feature-point li:nth-child(even){
		max-width: 520px;
		padding: 130px 0 30px;
		margin: 120px auto 50px;
	}
	.feature-point li:nth-child(even),
	.feature-point li:nth-child(3){
		padding: 110px 0 30px;
	}
	.feature-point li::before{
		width: 240px;
		left: -240px;
	}
	.feature-point li:nth-child(2)::before{
		left: auto;
		right: -240px;
	}
	.feature-point li::after{
		display: none;
	}
	.feature-point li div{
		width: 90%;
		margin: 0 auto;
	}
	.feature-point li div h3{
		justify-content: center;
		flex-wrap: wrap;
		font-size: 20px;
		text-align: center;
		line-height: 1.6;
		padding: 0 0 15px;
		margin: 0 0 10px;
	}
	.feature-point li:nth-child(2) div h3,
	.feature-point li:nth-child(3) div h3{
		font-size: 20px;
	}
	.feature-point li div h3::before{
		width: 100%;
		height: 33px;
		margin: 0 0 15px;
	}
	.feature-point li div h3 + p{
		font-size: 14px;
		line-height: 1.5;
	}
	.feature-point li div .pluseone{
		font-size: 13px;
		padding: 10px 15px;
		margin: 10px 0 0;
	}
	.feature-point li:nth-child(3) div .pluseone br{
		display: none;
	}
	.feature-point li div + img{
		width: 320px;
		position: absolute;
		top: -90px;
		left:  50%;
		transform: translateX(-50%);
	}
	.feature-point li:nth-child(2) div + img{
		width: 300px;
		right: auto;
		left: 50%;
		transform: translateX(-50%);
	}
	.feature-point li:nth-child(3) div + img{
		width: 300px;
	}
}
@media screen and (max-width: 520px) {
	.feature{
		padding: 25px 0 30px;
	}
}
/*その他の機能*/
.feature-point + h2{
	font-size: 32px;
	margin: 0 auto 30px;
}
.feature-other{
	width: 90%;
	max-width: 907px;
	margin: 0 auto;
	&.flex {
		align-items: stretch;
		
	}
}
.feature-other li{
	width: 48%;
	max-width: 430px;
	position: relative;
	z-index: 1;
	margin: 0 0 40px;
}
.feature-other li div{
	width: 100%;
	height: 100%;
	padding: 40px 0 ;
	border-radius: 10px;
	background: #FFF;
}
.feature-other li::before{
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	border-radius: 10px;
	background: linear-gradient(#005de8, #0087ff);
	opacity: 0.3;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: -1;
}
.feature-other li img{
	display: block;
	width: 58px;
	margin: 0 auto 10px;
}
.feature-other li h4{
	font-size: 21px;
	font-weight: bold;
	text-align: center;
	color: var(--main-color);
	margin: 0 0 10px;
}
.feature-other li p{
	width: 90%;
	line-height: 1.8;
	max-width: 340px;
	margin: 0 auto 10px;
}
@media screen and (max-width: 820px) {
	.feature-point + h2{
		font-size: 23px;
		margin: 0 auto 20px;
	}
	.feature-other{
		width: 98%;
		justify-content: center;
	}
	.feature-other li{
		width: 100%;
		margin: 0 auto 30px;
	}
	.feature-other li:last-child{
		margin: 0 auto 15px;
	}
	.feature-other li div{
		width: 100%;
		padding: 25px 0 ;
		border-radius: 5px;
	}
	.feature-other li::before{
		top: 8px;
		left: 8px;
	}
	.feature-other li img{
		width: 53px;
	}
	.feature-other li h4{
		font-size: 18px;
		margin: 0 0 5px;
	}
	.feature-other li p{
		width: 86%;
	}
	.feature-other li p br{
		display: none;
	}
}
/*==================================================================================================*/

/*==================================================================================================*/
/*faq-よくある質問*/
.faq h2{
	margin: 0 auto 34px;
}
/*ベース*/
.toggle {
	display: none;
}
.Label{
	align-items: center;
}
.Label:hover{
    cursor: pointer;
}
.Label,.box{
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 16px 30px;
    background: #FFF;
	margin: 0 0 7px;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.Label::before,
.box::before{
    display: block;
	content:"";
	width: 36px;
	height: 36px;
	background: center / contain no-repeat url("../img/icon-q.svg");
}
.box::before{
	background: center / contain no-repeat url("../img/icon-a.svg");
}
.Label span{
	display: block;
	position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
.Label span::after{
    display: block;
	content:"";
	width: 12px;
	height: 8px;
	background: center / contain no-repeat url("../img/icon-arrow.svg");
	transform: rotate(180deg);
}
.Label p,.box p{
	width: calc( 100% - 52px );
}
.Label p{
    font-weight: 500;
	line-height: 1.7;
}
.box{
	height: 0;
	background: none;
	padding: 0 40px;
	overflow: hidden;
}
.toggle:checked + .Label{
	margin: 0;
}
.toggle:checked + .Label + .box {
	height: auto;
	padding: 20px 40px;
	transition: all .3s;
}
.toggle:checked + .Label span::after {
	transform: rotate(0deg);
}
/*answer*/
.Label p{
	line-height: 1.6;
}
.box p br,
.box p br{
	display: none;
}
/*1つ目の記述*/
.toggle:checked + .label01,
.toggle:checked + .label02{
	margin: 0 0 7px;
}
.box01,
.box02{
	height: auto;
	padding: 20px 40px;
}
.toggle:checked + .Label + .box01,
.toggle:checked + .Label + .box02{
	height: 0;
	padding: 0 40px;
}
.label01 span::after,
.label02 span::after{
	transform: rotate(0deg);
}
.toggle:checked + .label01 span::after,
.toggle:checked + .label02 span::after{
	transform: rotate( 180deg) ;
}
/**/
.faq .btn.contact{
	max-width: 540px;
	margin: 70px auto 0;
}
@media screen and (max-width: 820px) {
	.faq{
		padding: 40px 0 80px;
	}
	.faq .inner{
		max-width: 520px;
	}
	.faq h2{
		margin: 0 auto 25px;
	}
	.Label, .box {
	    padding: 15px 15px;
	}
	.box{
		padding: 0 20px;
	}
	.Label::before, .box::before {
		width: 30px;
		height: 30px;
	}
	.Label span {
	    right: 10px;
	}
	.Label span::after {
		width: 6px;
		height: 4px;
	}
	.Label p, .box p {
		width: calc(100% - 40px);
	}
	.Label p{
		font-weight: normal;
		line-height: 1.5;
	}
	.box p{
		font-size: 14px;
	}
	.toggle:checked + .Label + .box{
		padding: 15px 20px;
	}
	.box01, .box02 {
		padding: 10px 20px;
	}
	.toggle:checked + .Label + .box01,
	.toggle:checked + .Label + .box02{
		padding: 0 20px;
	}
	.faq .btn.contact{
		margin: 50px auto 0;
	}
}
/*==================================================================================================*/
/*scene-シーン別活用方法*/

.scene h2{
	margin: 0 0 30px;
}
.scene h2 span:nth-child(1){
	font-size: 24px;
	color: var(--text-color);
}
/*タブ切り替え全体のスタイル*/
.tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/*タブのスタイル*/
.tab_item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(100%/5 - 3px);
	height: 74px;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	color: #FFF;
	border-radius: 3px 3px 0 0;
	background-color: var(--main-color);
	transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}
/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab_content {
	display: none;
	padding: 40px;
	clear: both;
	overflow: hidden;
	border-radius: 0 0 10px 10px;
}
/*選択されているタブのコンテンツのみを表示*/
#tabs01:checked ~ #tabs01-contents,
#tabs02:checked ~ #tabs02-contents,
#tabs03:checked ~ #tabs03-contents,
#tabs04:checked ~ #tabs04-contents,
#tabs05:checked ~ #tabs05-contents {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #FFF;
  color: var(--main-color);
}

/**/
.tab_content{
	background: #FFF;
}
.tab_content .innerIn{
	width: 90%;
	max-width: 940px;
	padding: 20px 0;
	margin: 0 auto;
}
.tab_content .innerIn h3{
	display: none;
}
.tab_content .innerIn img{
	width: 215px;
}
.tab_content .innerIn img + div{
	width: calc( 100% - 220px );
	max-width: 650px;
}
.tab_content dl{
	min-height: 100px;
	padding: 15px 0;
	border-bottom: solid 1px #eeeeee;
	position: relative;
	margin: 0 0 5px;
}
.tab_content dl::before{
	display: block;
	content: "";
	width: 176px;
	height: 3.6px;
	background: var(--main-color);
	position: absolute;
	bottom: 0;
	left: 0;
}
.tab_content dl dt{
	width: 176px;
	font-size: 18px;
	font-weight: bold;
}
.tab_content dl dd{
	width: calc( 100% - 176px );
	font-size: 18px;
	padding: 0 0 0 30px;
}
/**/
.tab_content .innerIn div:last-child{
	width: 100%;
	padding: 30px 40px;
	background: #fafafa;
	margin: 40px 0 0;
}
.tab_content .innerIn div:last-child h4{
	width: fit-content;
	font-size: 18px;
	font-weight: bold;
	margin: 0 auto;
}
.tab_content .innerIn div:last-child h4::before{
	display: inline-block;
	content: "";
	width: 22px;
	height: 18px;
	background: center / contain no-repeat url("../img/icon-voice.svg");
	margin: 0 10px 0 0;
}
.tab_content .innerIn div:last-child p{
	max-width: 590px;
	line-height: 1.7;
}
@media screen and (max-width: 1000px) {
	.scene {
		padding: 40px 0 ;
	}
	.scene .inner {
		max-width: 520px;
	}
	.scene h2{
		margin: 0 0 25px;
	}
	.scene h2 span:nth-child(1){
		font-size: 15px;
	}
	/*タブのスタイル*/
	.tab_item {
		width: calc(100%/2 - 7px);
		height: 60px;
		font-size: 18px;
		border: solid 1px var(--main-color);
		border-radius: 3px;
		margin: 0 0 20px;
	}
	.tab_item:nth-child(10){
		margin: 0 0 30px;
	}
	/*タブ切り替えの中身のスタイル*/
	.tab_content {
		padding: 0;
		border-radius: 5px;
	}
	.tab_content .innerIn{
		padding: 30px 0 40px;
	}
	.tab_content .innerIn h3{
		display: block;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		color: var(--main-color);
	}
	.tab_content .innerIn img{
		width: 170px;
		margin: 0 auto;
	}
	.tab_content .innerIn img + div{
		width: 100%;
	}
	.tab_content dl{
		max-width: 350px;
		padding: 15px 0;
		margin: 0 auto;
	}
	.tab_content dl::before{
		display: none;
	}
	.tab_content dl dt{
		width: 100%;
		font-size: 14px;
		color: var(--main-color);
	}
	.tab_content dl dd{
		width: 100%;
		font-size: 15px;
		line-height: 1.6;
		letter-spacing: 0.1em;
		padding: 0;
	}
	/**/
	.tab_content .innerIn div:last-child{
		padding: 30px 40px;
		margin: 30px 0 0;
	}
	.tab_content .innerIn div:last-child h4{
		width: fit-content;
		font-size: 15px;
		font-weight: bold;
		line-height: 1.6;
		margin: 0 auto 8px;
	}
	.tab_content .innerIn div:last-child h4::before{
		width: 100%;
		height: 28px;
		margin: 0;
	}
	.tab_content .innerIn div:last-child p {
		line-height: 1.7;
	}
}
@media screen and (max-width: 520px) {
	.tab_content .innerIn div:last-child {
		padding: 30px 20px;
	}
	.tab_content .innerIn div:last-child p br{
		display: none;
	}
}
/*==================================================================================================*/
/*flow-お申し込みの流れ*/

.flow h2{
	margin: 0 0 20px;
}
.flow h2 + p{
	font-size: 18px;
	text-align: center;
	margin: 0 0 20px;
}
.flow h2 + p span{
	color: var(--main-color);
}
/**/
.flowList{
	margin: 0 auto 34px;
	overflow: hidden;
	position: relative;
}
.flowList::before{
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background: #fafafa;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1000;
	transition: 3s;
}
.flowList.run::before{
	width: 0;
}
.flowList li{
	width: 25%;
	position: relative;
}
.flowList div:nth-child(1){
	width: 100%;
	height: 94px;
	padding: 20px 0;
	background: #61a3e5;
	position: relative;
}
.flowList div:nth-child(1) p{
	width: 80%;
    max-width: 200px;
	font-family: "Lato", sans-serif;
	font-size: 15px;
	line-height: 1;
	color: #FFF;
	margin: 0 auto;
}
.flowList div:nth-child(1) p span{
	font-size: 26px;
	margin: 0 0 0 3px;
}
.flowList li:not(:last-child) div:nth-child(1)::before,
.flowList li:not(:last-child) div:nth-child(1)::after{
	display: block;
	content: "";
	border-top: 54px solid transparent;
	border-bottom: 54px solid transparent;
	border-left: 20px solid #61a3e5;
	position: absolute;
    top: 50%;
    right: -14px;
    transform: translateY(-50%);
	z-index: 10;
}
.flowList li:not(:last-child) div:nth-child(1)::after{
	border-left: 20px solid #FFF;
	right: -17px;
	z-index: 1;
}
.flowList li::before{
	display: block;
	content: "";
	width: 100%;
	height: 10px;
	background: #fafafa;
	position: absolute;
	top: 94px;
	z-index: 100;
}
/*前後角丸*/
.flowList li:nth-child(1) div:nth-child(1){
	border-radius: 3px 0 0 3px;
}
.flowList li:nth-child(4) div:nth-child(1){
	border-radius: 0 3px 3px 0;
}
/*カラー変更*/
.flowList li:nth-child(2) div:nth-child(1){
	background: #468dd3;
}
.flowList li:nth-child(2) div:nth-child(1)::before{
	border-left: 20px solid #468dd3;
}
.flowList li:nth-child(3) div:nth-child(1){
	background: #1d6ab7;
}
.flowList li:nth-child(3) div:nth-child(1)::before{
	border-left: 20px solid #1d6ab7;
}
.flowList li:nth-child(4) div:nth-child(1){
	background: #01418e;
}
.flowList li:nth-child(4) div:nth-child(1)::before{
	border-left: 20px solid #01418e;
}
/**/
.flowList div:nth-child(2){
	width: 200px;
	height: 190px;
	padding: 25px 0 20px;
	border-radius: 5px;
	background: #FFF;
	margin: -25px auto 0;
	position: relative;
	z-index: 100;
}
.flowList div:nth-child(2) img{
	display: block;
	width: 80px;
	margin: 0 auto;
}
.flowList div:nth-child(2) h3{
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}
.flowList div:nth-child(2) p{
	width: fit-content;
	font-size: 12px;
	line-height: 1.4;
	color: #878787;
	margin: 0 auto;
}
/**/
.flow .inner:nth-child(2){
	width: 100%;
	max-width: 100%;
	padding: 60px 0 0;
	border-top: solid 1px #eeeeee;
}
.flow .btnBox{
	border-top: solid 1px #eeeeee;
}
.flow .btnBox ul{
	max-width: 1120px;
	padding: 60px 0 0;
}
.flow .btnBox .btn,
aside + .btnBox .btn {
	margin: 0 0 40px;
}
.anti + .btnBox .btn {
	margin: 0 0 80px;
}


li.left01{
	z-index: 4;
}
li.left02{
	z-index: 3;
}
li.left03{
	z-index: 2;
}
li.left04{
	z-index: 1;
}
@media screen and (max-width: 1000px) {
	.flow {
		padding: 40px 0 50px;
	}
	.flow h2{
		margin: 0 0 10px;
	}
	.flow h2 + p{
		font-size: 15px;
	}
	/**/
	.flowList{
		max-width: 300px;
		margin: 0 auto 45px;
	}
	.flowList.run::before{
		width: 100%;
		height: 0;
	}
	.flowList li{
		width: 100%;
	}
	.flowList div:nth-child(1){
		width: 90px;
		height: 100%;
		padding: 35px 15px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.flowList li:nth-child(1) div:nth-child(1){
		padding: 20px 15px;
	}
	.flowList div:nth-child(1) p{
		width: fit-content;
		-ms-writing-mode: tb-rl;
  		writing-mode: vertical-rl;
		margin: 0;
	}
	.flowList li:not(:last-child) div:nth-child(1)::before,
	.flowList li:not(:last-child) div:nth-child(1)::after{
		border-top: 22px solid #61a3e5;
		border-bottom: none;
		border-right: 50px solid transparent;
		border-left: 50px solid transparent;
		top: auto;
		bottom: -22px;
		right: auto;
		left: 50%;
		transform: translateX(-50%);
	}
	.flowList li:not(:last-child) div:nth-child(1)::after{
		border-top: 22px solid #FFF;
		border-left: 50px solid transparent;
		bottom: -24.5px;
		right: auto;
	}
	.flowList li::before{
		width: 10px;
		height: 100%;
		top: 0;
		left: 90px;
	}
	/*前後角丸*/
	.flowList li:nth-child(1) div:nth-child(1){
		border-radius: 5px 5px 0 0;
	}
	.flowList li:nth-child(4) div:nth-child(1){
		border-radius: 0 0 5px 5px;
	}
	/*カラー変更*/
	.flowList li:nth-child(2) div:nth-child(1)::before{
		border-top: 22px solid #468dd3;
	}
	.flowList li:nth-child(3) div:nth-child(1)::before{
		border-top: 22px solid #1d6ab7;
	}
	.flowList li:nth-child(4) div:nth-child(1)::before{
		border-top: 22px solid #01418e;
	}
	/**/
	.flowList div:nth-child(2){
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: center;
		flex-wrap: wrap;
		width: 235px;
		height: 208px;
		margin: 40px 0 27px auto;
	}
	.flowList li:nth-child(1) div:nth-child(2){
		margin: 27px 0 27px auto;
	}
	.flowList div:nth-child(2) img{
		margin: 0 auto 10px;
	}
	/**/
	.flow .inner:nth-child(2){
		width: 100%;
		max-width: 100%;
		padding: 60px 0 0;
		border-top: solid 1px #eeeeee;
	}
	.flow .btnBox ul{
		padding: 55px 0 0;
	}
	.flow .btnBox .btn,
	aside + .btnBox .btn{
		margin: 0 0 20px;
	}
}
/*==================================================================================================*/
/*attention-開発秘話*/
.attention{
	z-index: 1;
	.flexTop {
		justify-content: space-around;
		
	}
}
.attention .inner::after{
	display: block;
	content: "";
	width: 230px;
	height: 213px;
	background: center / contain no-repeat url("../img/attention-image.png");
	position: absolute;
	bottom: 0;
	left: 0;
}
.attention h3{
	width: fit-content;
	font-size: 36px;
	font-weight: bold;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	line-height: 1.5;
//	margin: 0 auto;
}
.attention .flexTop {
	margin: 60px auto;
}
.attention .flexTop p{
	width: calc(100% - 290px);
    max-width: 630px;
	font-size: 18px;
	line-height: 2.14;
	letter-spacing: 0.08em;
	position: relative;
//	margin: 0 0 0 150px;
}
.attention .flexTop p::before,
.attention .flexTop p::after{
	display: block;
	content: "";
	width: 42px;
	height: 31px;
	background: center / contain no-repeat url("../img/attention-deco.svg");
	position: absolute;
}
.attention p::before{
	top: -5px;
	left: -57px;
}
.attention p::after{
	bottom: -5px;
	right: -50px;
	transform: rotate(180deg);
}
@media screen and (max-width: 820px) {
	.attention{
		padding: 40px 0 200px;
	}
	.attention .inner::after{
		width: 196px;
		height: 164px;
		bottom: -200px;
		left: auto;
		right: 0;
	}
	.attention h3{
		width: 100%;
		font-size: 23px;
		text-align: center;
		writing-mode: lr;
		margin: 0 auto 25px;
	}
	.attention p{
		width: 100%;
		font-size: 15px;
		margin: 0 auto;
	}
	.attention p::before,
	.attention p::after{
		width: 28px;
		height: 21px;
	}
	.attention p::before{
		top: auto;
		bottom: -25px;
		left: 0;
	}
	.attention p::after{
		bottom: auto;
		top: -25px;
		right: 0;
		transform: rotate(180deg);
	}
}
/*==================================================================================================*/
/*company-当社について*/
.company{
	overflow: inherit;
}
.company::before{
	display: block;
	content: "";
	width: 100%;
	height: calc( 100% - 40px );
	background-color: #f2f9ff;
    transform: skewY(7deg);
	position: absolute;
	top: -60px;
}
.company .inner{
	max-width: 1070px;
	padding: 40px 0 50px;
	background: #FFF;
	box-shadow: 3px 3px 10px rgba(0,0,0,0.10);
}
.company .inner .innerIn{
	width: 90%;
	max-width: 860px;
	margin: 0 auto;
}
.company h3{
	font-size: 30px;
	padding: 0 0 10px;
	border-bottom: solid 3px #eeeeee;
	margin: 0 0 30px;
}
.company h3::before{
	display: inline-block;
	content: "";
	width: 4px;
	height: 28px;
	background: #61a3e5;
	margin: 0 15px 0 0;
	position: relative;
	top: 3px;
}
.company img{
	display: block;
	width: 270px;
	margin: 0 auto;
}
.company img + div{
	width: calc( 100% - 270px );
	max-width: 526px;
}
.company img + div h2{
	display: flex;
	align-items: center;
	font-size: 20px;
	font-weight: bold;
	text-align: left;
	color: #000000;
	margin: 0 0 5px;
}
.company img + div h2 a{
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 0 0 5px;
}
.company img + div h2 a img{
	width: 100%;
}
.company img + div p{
	margin: 0 0 30px;
}
/**/
.company img + div + div{
	padding: 1px;
	border: solid 1px #01418e;
	margin: 0 auto 0;
}


div.linkage {
	display: flex;
	gap: 0px 1px;
	flex-direction: row;
	flex-wrap: wrap;
	position: relative;
	overflow: hidden;
	> dl {
		width: calc(calc(100% - 1px) / 2);
//		aspect-ratio: 5 / 4;
		color: #fff;
		background: #213965;
		padding: 10px 20px 150px;
		&:nth-of-type(3),
		&:nth-of-type(4) {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: flex-end;
			padding: 150px 20px 10px;
		}
		dt {
			font-size: 1.25em;
		}
		dd {
			min-height: 130px;
		}
	}
	@media (820px > width) {
		flex-direction: column;
		gap: 1px;
		> dl {
			width: 100%;
			padding: 15px 15px 15px 50px;
			&:nth-of-type(3),
			&:nth-of-type(4) {
				padding: 15px 15px 15px 50px;
			}
			&:nth-of-type(3),
			&:nth-of-type(4) {
				align-items: flex-start;
			}
			dd {
				min-height: auto;
				margin-top: 5px;
			}
			dt {
				display: flex;
				justify-content: center;
				align-items: center;
				width: fit-content;
				height: 30px;
				font-size: clamp(14px, 2vw, 16px);
				border: solid 1px #fff;
				background: #000;
				padding: 2px 8px;
				position: relative;
			}
			dt::after {
				display: flex;
				justify-content: center;
				align-items: center;
				width: fit-content;
				height: 30px;
				color: #000;
				font-size: clamp(14px, 2vw, 16px);
				line-height: 1em;
				background: #fff;
				padding: 0 8px;
				position: absolute;
				left: 100%;
				top: 50%;
				transform: translateY(-50%);
			}
			&:nth-of-type(4) dt::after {
				content: "情報発信";
				width: 4em;
			}
			&:nth-of-type(3) dt::after {
				content: "未然防止・抑止";
				width: 6.5em;
			}
			&:nth-of-type(1) dt::after {
				content: "調査・分析・再発防止";
				width: 9em;
			}
			&:nth-of-type(2) dt::after {
				content: "早期発見";
				width: 4em;
			}
		}
	}
}
.governance {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 120px;
	aspect-ratio: 1 / 1;
	color: #fff;
	background: #b09a37;
	border: solid 1px #fff;
	border-radius: 1000px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	@media (820px > width) {
		writing-mode: vertical-rl;
		width: clamp(30px, 2vw, 40px);
		height: 100%;
		font-size: clamp(18px, 2vw, 20px);
		border-radius: 0 0 0 0;
		left: 0;
		top: 0;
		transform: translate(0, 0);
	}
}
div.quarter {
	width: 150px;
	aspect-ratio: 1 / 1;
	position: absolute;
	z-index: 0;
	> dl {
		width: 180px;
		position: absolute;
		dt {
			display: flex;
			justify-content: center;
			algin-items: center;
			color: #fff;
			white-space: nowrap;
			background: #000;
			border: solid 1px #fff;
		}
		dd {
			display: flex;
			justify-content: center;
			algin-items: center;
			width: 180px;
			color: #000;
			background: #fff;
			white-space: nowrap;
		}
	}
	&:nth-of-type(1) {
		bottom: 50%;
		right: 50%;
		&::before {
			content: "";
			display: block;
			width: 100%;
			height: 100%;
			background: rgba(255, 255, 255, 0.8);
			border-top: solid 1px #fff;
			border-left: solid 1px #fff;
			border-radius: 1000px 0 0 0;
			position: absolute;
			bottom: 0;
			z-index: -1;
		}
		> dl {
			right: 35%;
			bottom: 35%;
		}
		&::after {
			content: "";
			display: block;
			width: 200vw;
			height: 1px;
			background: #fff;
			position: absolute;
			bottom: -1px;
			left: -50vw;
			@media(820px > width) {
				content: none;
			}
		}
	}
	&:nth-of-type(2) {
		bottom: 50%;
		left: 50%;
		&::before {
			content: "";
			display: block;
			width: 100%;
			height: 100%;
			background: rgba(255, 255, 255, 0.1);
			border-top: solid 1px #fff;
			border-right: solid 1px #fff;
			border-radius: 0 1000px 0 0;
			position: absolute;
			z-index: -1;
		}
		> dl {
			left: 35%;
			bottom: 35%;
		}
	}
	&:nth-of-type(3) {
		top: 50%;
		right: 50%;
		&::before {
			content: "";
			display: block;
			width: 100%;
			height: 100%;
			background: rgba(255, 255, 255, 0.55);
			border-bottom: solid 1px #fff;
			border-left: solid 1px #fff;
			border-radius: 0 0 0 1000px;
			position: absolute;
			z-index: -1;
		}
		> dl {
			right: 35%;
			top: 35%;
		}
	}
	&:nth-of-type(4) {
		top: 50%;
		left: 50%;
		&::before {
			content: "";
			display: block;
			width: 100%;
			height: 100%;
			background: rgba(255, 255, 255, 0.25);
			border-right: solid 1px #fff;
			border-bottom: solid 1px #fff;
			border-radius: 0 0 1000px 0;
			position: absolute;
			z-index: -1;
		}
		> dl {
			position: absolute;
			left: 35%;
			top: 35%;
		}
	}
	@media(820px > width) {
		display: none;
	}
}


/* 
.company img + div + div div h5{
	font-size: 17px;
	font-weight: bold;
	line-height: 1.6;
	color: var(--main-color);
	margin: 0 0 20px;
}
.company img + div + div div p{
	font-size: 14px;
}
 */

@media screen and (max-width: 820px) {
	.company::before {
		height: calc(100% + 60px);
		transform: skewY(30deg);
		top: -150px;
	}
	.company .inner{
		padding: 25px 0;
		box-shadow: 2.2px 2.2px 3.7px rgba(0,0,0,0.30);
	}
	.company h3{
		font-size: 20px;
		padding: 0 0 5px;
		border-bottom: solid 1px #eeeeee;
	}
	.company h3::before{
		width: 3px;
		height: 20px;
		margin: 0 10px 0 0;
		top: 2px;
	}
	.company img{
		width: 190px;
		margin: 0 auto 30px;
	}
	.company img + div{
		width: 100%;
		max-width: 100%;
	}
	.company img + div h2{
		font-size: 18px;
		line-height: 1.4;
		margin: 0 0 15px;
	}
	.company img + div h2 + p{
		line-height: 1.8;
		margin: 0 0 23px;
	}
	.company img + div h2 a{
		position: relative;
		top: 17px;
	}
	.company img + div h2 a img{
		margin: 0;
	}
	/**/
	.company img + div + div{
//		padding: 15px 12px;
		margin: 0 auto 25px;
	}
	.company img + div + div div h5{
		font-size: 14px;
		margin: 0 0 10px;
	}
	.company img + div + div div p{
		font-size: 13px;
		margin: 0 0 20px;
	}
	.company img + div + div img{
		width: 198px;
		margin: 0 auto 15px;
	}
}
/*==================================================================================================*/
/*anti-反社とは*/
.anti{
	padding: 50px 0 30px;
}
.anti .inner{
	max-width: 1070px;
}
.anti h2{
	margin: 0 0 30px;
}
.anti h2 + div{
	padding: 20px 40px;
	background: #fafafa;
	margin: 0 0 100px;
}
.anti h2 + div h2{
	width: fit-content;
	font-size: 26px;
	font-weight: bold;
	margin: 0 auto;
}
.anti h2 + div h2::before{
	display: inline-block;
	content: "";
	width: 23px;
	height: 23px;
	background: center / contain no-repeat url("../img/icon-anti.svg");
	margin: 0 10px 0 0;
}
.anti h2 + div p{
	width: calc( 100% - 170px );
	max-width: 615px;
}
/**/
.anti div + div{
	position: relative;
	margin: 0 0 75px;
}
.anti img{
	width: 734px;
	position: relative;
	left: -185px;
	z-index: -1;
}
.anti img + div{
	width: 660px;
	padding: 50px 0 40px 60px;
	background: #FFF;
	position: absolute;
	right: 0;
	bottom: 0;
}
.anti img + div h2{
	font-size: 26px;
	text-align: left;
	padding: 0 0 10px;
	border-bottom: solid 3px #eeeeee;
	margin: 0 0 15px;
}
.anti img + div h2::before{
	display: inline-block;
	content: "";
	width: 4px;
	height: 26px;
	background: #61a3e5;
	margin: 0 15px 0 0;
	position: relative;
	top: 3px;
}
.anti img + div h2 + p{
	letter-spacing: 0.08em;
}

.anti .advice {
	@media (820px >= width) {
		padding: 0 2em;
	}
	p {
		font-size: 18px;
		font-weight: bold;
		text-align: left;
		margin: 0 0 20px;
		&:nth-child(2) span {
			color: var(--main-color);
		}
		@media (820px <= width) {
			text-align: center;
		}
		br {
			display: none;
			@media (820px <= width) {
				display: block;
			}
		}
	}
}

.marker,.marker2{
	background: linear-gradient(transparent 60%, #ffe67d 60%);
	display: inline;
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition:background-size 1.5s;
}
.marker.on,.marker2.on {
  /* 横方向を100%にして、マーカーを引く */
  background-size: 100% 100%;
}
.anti p:nth-child(5){
	display: none;
}

.anti .btn{
	max-width: 540px;
	margin: 70px auto 0 ;
}
@media screen and (max-width: 820px) {
	.anti {
		padding: 20px 0 60px;
	}
	.anti .inner{
		width: 100%;
	}
	.anti h2{
		margin: 0 0 20px;
	}
	.anti h2 + div{
		width: 90%;
		padding: 30px 20px;
		margin: 0 auto 50px;
	}
	.anti h2 + div h2{
		font-size: 18px;
		margin: 0 auto 10px;
	}
	.anti h2 + div h2::before{
		width: 18px;
		height: 18px;
		margin: 0 5px 0 0;
		position: relative;
		top: 2px;
	}
	.anti h2 + div p{
		width: 100%;
		font-size: 14px;
		margin: 0 auto;
	}
	/**/
	.anti div + div{
		margin: 0;
	}
	.anti img{
		width: 100%;
		height: 229px;
		position: relative;
		left: 0;
	}
	.anti img + div{
		width: 95%;
		padding: 30px 20px;
		position: relative;
		margin: -70px auto 0;
	}
	.anti img + div h2{
		font-size: 20px;
		padding: 0 0 5px;
		border-bottom: solid 1px #eeeeee;
		margin: 0 0 15px;
	}
	.anti img + div h2::before{
		width: 3px;
		height: 20px;
		margin: 0 10px 0 0;
	}
	.anti .btn{
		width: 90%;
		margin: 45px auto 0 ;
	}
}
/*==================================================================================================*/
/*info-新着情報*/
.info .inner{
	max-width: 1070px;
}
.info h2{
	font-size: 30px;
	text-align: left;
	margin: 0 0 10px;
}
.info h2::before{
	display: inline-block;
	content: "";
	width: 4px;
	height: 28px;
	background: #61a3e5;
	margin: 0 15px 0 0;
	position: relative;
	top: 3px;
}
.info ul{
	background: #FFF;
}
.info ul li{
	width: 90%;
	max-width: 925px;
	margin: 0 auto;
}
@media screen and (max-width: 820px) {
	.info {
		padding: 35px 0 40px;
	}
	.info h2{
		font-size: 20px;
	}
	.info h2::before{
		width: 3px;
		height: 20px;
		margin: 0 10px 0 0;
	}
	.info li a{
		height: 90px;
	}
}
/*==================================================================================================*/
/*aside-アラート×自由キーワード検索*/
/*aside-検索ツール×調査員対応*/
aside{
	padding: 60px 0;
	background: center / cover no-repeat url("../img/catch-bg.jpg");
	margin: 0 0 100px;
}
aside .inner{
	max-width: 1200px;
}
aside .innerIn{
	width: 570px;
	font-weight: bold;
	text-align: center;
	color: #FFF;
	margin: 0 0 0 auto;
}
aside .innerIn div{
	padding: 70px 0 60px;
	margin: 0 0 20px;
    position: relative;
    z-index: 1;
}
aside .innerIn div::before{
	content: "";
	background: linear-gradient(#00a0e6, #005dba);
	opacity: 0.85;
    transform: skewX(-15deg);
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 5px;
    z-index: -1;
}
aside .innerIn div p:nth-child(1){
	font-size: 28px;
	line-height: 1;
}
aside .innerIn div p:nth-child(1) span{
	font-size: 24px;
	padding: 5px 13px;
	border: solid 1px #FFF;
	margin: 0 7px;
}
aside .innerIn div p:nth-child(2){
	font-size: 28px;
	line-height: 1.2;
}
aside .innerIn div p:nth-child(2) span{
	font-size: 66px;
	margin: 10px 0 0;
}
aside .innerIn div p:nth-child(2) span:nth-child(2){
	font-size: 40px;
}
/**/
aside .innerIn div + p{
	line-height: 2.4;
}
aside .innerIn div + p span{
	display: inline;
	padding: 2px 10px 4px;
	background: #000;
	position: relative;
}
aside .innerIn div + p span::after{
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background: #000;
	position: absolute;
	top: 0;
	right: 0;
	transition: 1s;
}
aside .innerIn div + p.slide-in.run span::after{
	width: 0;
}
/**/
aside + .btnBox{
	margin: 0 auto 70px;
}
@media screen and (max-width: 820px) {
	aside{
		padding: 40px 0 35px;
		background-position: left;
		margin: 0 0 40px;
	}
	aside .innerIn{
		width: 100%;
		margin: 0 auto;
	}
	aside .innerIn div{
		padding: 25px 0;
		margin: 0 0 30px;
	}
	aside .innerIn div::before{
		width: auto;
		margin: 0 20px;
		transform: skewX(-15deg);
	}
	aside .innerIn div p:nth-child(1){
		font-size: 16px;
	}
	aside .innerIn div p:nth-child(1) span{
		font-size: 14px;
		padding: 1px 3px;
		margin: 0 4px;
	}
	aside .innerIn div p:nth-child(2){
		font-size: 16px;
	}
	aside .innerIn div p:nth-child(2) span{
		font-size: 38px;
	}
	aside .innerIn div p:nth-child(2) span:nth-child(2){
		font-size: 23px;
	}
	/**/
	aside .innerIn div + p{
		font-size: 14px;
		letter-spacing: 0.08em;
		line-height: 2.8;
		margin: 0 0 20px;
	}
	side .innerIn div + p span {
		padding: 4px 10px 6px;
	}
	/**/
	aside + .btnBox{
		margin: 0 auto 100px;
	}
}

.inquiry {
	padding-bottom: 100px;
	p {
		&:not(:has(a)) {
			font-size: clamp(22px, 2.5vw, 28px);
			font-weight: bold;
			text-align: center;
		}
		&.btn {
			overflow: hidden;
			height: 105px;
			a {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: clamp(18px, 2.5vw, 30px);
				line-height: 1.2;
				text-shadow: -2px -1px 0 #ce7100, 0 -1px 0 #ce7100, 2px 1px 0 rgba(255, 255, 255, 0.2), 0px 1px 0 rgba(255, 255, 255, 0.2);
				background: linear-gradient(var(--service03-color), var(--service03-color-dark));
				padding: 15px 35px 15px 15px;
				border-bottom: solid 5px var(--service03-color-shadow);
				border-radius: 3px;
				position: relative;
				transition: 0s;
				&:hover {
					border-bottom: solid 4px var(--service03-color-shadow);
					top: 1px;
				}
				&:active {
					border-bottom: solid 1px var(--service03-color-shadow);
					top: 4px;
				}
				
				&::before {
					content: "";
					width: clamp(24px, 2.5vw, 40px);
					height: auto;
					aspect-ratio: 1 / 1;
					display: block;
					margin-right: 10px;
					background: center / contain no-repeat url("../img/icon-mail.svg");
					filter: drop-shadow(-2px -2px 0 #ce7100) drop-shadow(2px 2px 0 rgba(255, 255, 255, 0.4));
					position: relative;
					top: 0.1rem;
				}
				&::after {
					display: block;
					content: "〉";
					line-height: 1;
					color: #FFF;
					position: absolute;
					top: 50%;
					right: 15px;
					transform: translateY(-50%);
				}
			}
		}
	}


}




/*==================================================================================================*/
/*footer-*/
footer{
	background: var(--text-color);
	position: relative;
}
footer p,
footer a{
	color: #FFF;
}
.topBtn{
	display: block;
	width: 100px;
	height: 100px;
	position: absolute;
	top: -60px;
	right: 150px;
	transition: .5s;
}
.topBtn:hover{
	top: -55px;
}
footer .inner{
	max-width: 1120px;
}
footer {
	.ftTop {
		display: flex;
		gap: 20px;
		flex-direction: row;
		padding: 80px 0 60px;
		border-bottom: solid 1px #353535;
		> div:has(img) {
			display: flex;
			gap: 20px;
			flex-direction: column;
			justify-content: space-evenly;
			> a {
				display: flex;
				justify-content: center;
				align-self: center;
				width: 70%;
				align-items: center;
			}
			img {
				margin: 0 auto;
			}
		}
		@media (820px > width) {
			flex-direction: column;
			> div:has(img) {
				img {
//					width: 50%;
				}
			}
		}
	}
	.service_btn {
		display: flex;
		gap: 10px;
		flex-direction: column;
		flex-wrap: wrap;
		> * {
		}
		a {
			display: block;
			line-height: 1;
		}
		dl {
			box-sizing: border-box;
			display: flex;
			gap: 10px;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			height: 100%;
			min-height: 70px;
			text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
			line-height: 1.3;
			padding: 5px 15px;
			border: solid 2px #777;
			position: relative;
			&::before {
				content: "";
				display: block;
				width: 100%;
				height: 100%;
				background: var(--text-color);
				position: absolute;
				z-index: 1;
				transition: 0.3s;
			}
			&:hover::before {
				opacity: 0;
			}
			&.service01:hover {background: linear-gradient(var(--service01-color), var(--service01-color-dark));}
			&.service02:hover {background: linear-gradient(var(--service02-color), var(--service02-color-dark));}
			&.service03:hover {background: linear-gradient(var(--service03-color), var(--service03-color-dark));}
			&.service04:hover {background: linear-gradient(var(--service04-color), var(--service04-color-dark));}
			&.service05:hover {background: linear-gradient(var(--service05-color), var(--service05-color-dark));}
			&.service06:hover {background: linear-gradient(var(--service06-color), var(--service06-color-dark));}
			&:hover {
				border-top: solid 2px rgba(255, 255, 255, 0.3);
				border-right: solid 2px rgba(0, 0, 0, 0.3);
				border-bottom: solid 2px rgba(0, 0, 0, 0.3);
				border-left: solid 2px rgba(255, 255, 255, 0.3);
			}
			&::after {
				content: "";
				width: 8px;
				height: 8px;
				display: block;
				box-sizing: border-box;
				border-top: solid 2px #fff;
				border-right: solid 2px #fff;
				position: absolute;
				bottom: 10px;
				right: 10px;
				transform: rotateZ(45deg);
				filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.4));
				z-index: 1;
			}
			dt {
				width: 30%;
				min-width: 110px;
				font-size: clamp(16px, 2vw, 18px);
				font-weight: bold;
				position: relative;
				z-index: 1;
			}
			dd {
				color: #fff;
				position: relative;
				z-index: 1;
			}
		}
	}
}

/* 
.ftTop{
	padding: 80px 0 60px;
	border-bottom: solid 1px #353535;
}
.ftTop img{
	width: 464px;
}
.ftTop img + div{
	width: 363px;
}
.ftTop ul{
	width: fit-content;
}
.ftTop ul li{
	margin: 0 0 10px;
}
.ftTop ul li a{
	font-size: 15px;
	opacity: 1;
	transition: .5s;
}
.ftTop ul li a:hover{
	opacity: 0.5;
}
.ftTop ul li a::before{
	display: inline-block;
	content: "\0203a";
	font-size: 15px;
	margin: 0 10px 0 0;
}
 */
/**/
.ftBottom{
	padding: 40px 0;
}
.ftBottom .inner div{
	width: fit-content;
}
.ftBottom .inner div:nth-child(1) p{
	font-weight: bold;
	margin: 0 0 10px;
}
.ftBottom .inner div:nth-child(1) p:nth-child(2){
	font-size: 13px;
}
.ftBottom .inner div:nth-child(1) a:nth-child(3){
	font-size: 13px;
	opacity: 1;
	transition: .5s;
}
.ftBottom .inner div:nth-child(1) a:nth-child(3):hover{
	opacity: 0.5;
}
.ftBottom .inner div:nth-child(1) a:nth-child(3)::before{
	display: inline-block;
	content: "";
	width: 14px;
	height: 14px;
	background: center / contain no-repeat url("../img/icon-search.svg");
	margin: 0 5px 0 0;
	position: relative;
	top: 1.5px;
}
/**/
.ftBottom .inner div:nth-child(2) p{
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	margin: 0 0 15px;
}
.ftBottom .inner div:nth-child(2) p span{
	font-size: 13px;
	margin: 0 0 0 5px;
}
.ftBottom .inner div:nth-child(2) .telBtn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 360px;
	height: 60px;
	font-size: 26px;
	text-decoration: underline;
	border-radius: 40px;
	border: solid 1px #FFF;
	margin: 0 0 10px;
	transition: 1s;
}
.ftBottom .inner div:nth-child(2) .telBtn::before{
	display: inline-block;
	content: "";
	width: 28px;
	height: 28px;
	background: center / contain no-repeat url("../img/icon-tel.svg");
	margin: 0 5px 0 0;
	transition: 1s;
}
.ftBottom .inner div:nth-child(2) .telBtn:hover{
	color: var(--text-color-);
	border: solid 1px var(--text-color-);
	background: #FFF;
}
.ftBottom .inner div:nth-child(2) .telBtn:hover::before{
	background: center / contain no-repeat url("../img/icon-tel-black.svg");
}
.ftBottom .inner div:nth-child(2) p:nth-child(3){
	font-size: 13px;
	font-weight: normal;
	color: #a5a5a5;
}
.ftBottom .inner div:nth-child(2) p:nth-child(3) a{
	text-decoration: underline;
	color: #a5a5a5;
	opacity: 1;
	transition: .5s;
}
.ftBottom .inner div:nth-child(2) p:nth-child(3) a:hover{
	opacity: 0.5;
}
small{
	display: block;
	width: 100%;
	font-size: 10px;
	color: #bbbbbb;
	margin: 100px 0 0;
}
@media screen and (max-width: 1000px) {
	.ftTop{
		padding: 70px 0 45px;
	}
	.ftTop img{
		width: 270px;
		margin: 0 0 50px;
	}
	.ftTop ul li{
		margin: 0 0 15px;
	}
	/**/
	.ftBottom{
		padding: 40px 0 30px;
	}
	.ftBottom .inner{
		flex-direction: column-reverse;
	}
	.ftBottom .inner div:nth-child(1) p {
		margin: 0 0 25px;
	}
	.ftBottom .inner div:nth-child(1){
		padding: 40px 0 80px;
	}
	/**/
	.ftBottom .inner div:nth-child(2) p{
		font-size: 14px;
		font-weight: normal;
		line-height: 1.7;
	}
	.ftBottom .inner div:nth-child(2) p span{
		font-size: 13px;
	}
	.ftBottom .inner div:nth-child(2) .telBtn{
		margin: 0 0 20px;
	}
	small{
		margin: 0;
		position: absolute;
		bottom: 0;
		left: 0;
	}
}
@media screen and (max-width: 820px) {
	.topBtn {
		width: 74px;
		height: 74px;
		position: absolute;
		top: -45px;
		right: 10px;
	}
	footer .inner {
//		max-width: 320px;
	}
	.ftTop img + div{
		width: 100%;
	}
}

/* ↓各下層ページ ==================================================================================================*/

/* ↓各下層ヘッダー ------------------------------*/
body {
	&.riskey {
		nav.inner {
			background: linear-gradient(var(--service01-color), var(--service01-color-dark));
			a {
				color: #fff;
			}
		}
	}
	&.riskey_Pro {
		nav.inner {
			background: linear-gradient(var(--service02-color), var(--service02-color-dark));
			a {
				color: #fff;
			}
		}
	}
	&.riskey_BulkCheck {
		nav.inner {
			background: linear-gradient(var(--service03-color), var(--service03-color-dark));
			a {
				color: #fff;
			}
		}
	}
	&.riskey_DeepSearch {
		nav.inner {
			background: linear-gradient(var(--service04-color), var(--service04-color-dark));
			a {
				color: #fff;
			}
		}
	}
	&.riskey_global {
		nav.inner {
			background: linear-gradient(var(--service05-color), var(--service05-color-dark));
			a {
				color: #fff;
			}
		}
	}
	&.CompetitorScan {
		nav.inner {
			background: linear-gradient(var(--service06-color), var(--service06-color-dark));
			a {
				color: #fff;
			}
		}
	}
}
/* ↑各下層ヘッダー ------------------------------*/


.panel_area {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	ul {
		display: flex;
		gap: 20px;
		justirfy-content: row;
		flex-wrap: wrap;
		li {
			width: calc(calc(100% - 20px) / 2);
		}
	}
}
.panel_area {
	&:has(> div) {
		display: flex;
		gap: 30px;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		@media (820px > width) {
			flex-direction: column;
		}
		> div {
			display: flex;
			gap: 10px;
			flex-direction: column;
			justify-content: space-evenly;
			align-items: center;
			width: calc(calc(100% - 30px) / 2);
			aspect-ratio: 16 / 9;
			background: #fff;
			padding: 50px 40px;
			box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
			position: relative;
			@media (820px > width) {
				width: 100%;
				aspect-ratio: auto;
				br {
					display: none;
				}
			}
			&::before {
				content: "";
				display: block;
				width: 125px;
				height: 60px;
				color: #fff;
				font-size: 28px;
				line-height: 1em;
				background: linear-gradient(-25deg, transparent 50%, #253968 calc(50% + 1px));
				box-sizing: border-box;
				padding-top: 7px;
				padding-left: 14px;
				filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
				position: absolute;
				left: 0;
				top: 0;
			}
			&:nth-of-type(1)::before {
				content: "1";
			}
			&:nth-of-type(2)::before {
				content: "2";
			}
			&:nth-of-type(3)::before {
				content: "3";
			}
			&:nth-of-type(4)::before {
				content: "4";
			}
			&:nth-of-type(5)::before {
				content: "5";
			}
			&:nth-of-type(6)::before {
				content: "6";
			}
			h3 {
				color: #444;
				font-weight: normal;
				line-height: 1.5em;
				text-align: center;
				@media (820px > width) {
					text-align: left;
				}
			}
			p {
				color: #444;
				line-height: 1.5em;
			}
		}
	}
}

.features {
	background-image: url("../pro/img/cc03_sample01-2.gif");
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: contain;
}

main.lp {
	h3 {
		font-size: clamp(22px, 2vw, 26px);
		line-height: 1.75;
		margin-bottom: 10px;
	}
	* + h4 {
		margin-top: 40px;
	}
	h4 {
		font-size: clamp(18px, 2vw, 24px);
	}
	.tel {
		font-size: 36px;
		font-weight: 700;
		text-align: center;
		line-height: 1.75;
		&::before {
			content: "";
			display: inline-block;
			width: 50px;
			height: 32px;
			background: url("../img/hl01_tel_01.gif");
			background-size: contain;
			background-repeat: no-repeat;
			background-position: left bottom;
		}
		& + p {
			font-weight: bold;
			text-align: center;
			line-height: 1;
			margin: 0;
		}
	}
	table {
		margin: 0 auto;
		th,td {
			background: #fff;
			padding: 10px 15px;
			border: solid 1px #333;
		}
		th {
//			background: #f2f9ff;
		}
	}
}
.column1 {
	display: flex;
	gap: 20px;
	flex-direction: column;
}
.column2 {
	display: flex;
	gap: 40px;
	flex-direction: row;
	flex-wrap: wrap;
	@media (820px > width) {
		flex-direction: column;
	}
	> div {
		width: calc(calc(100% - 40px) / 2);
		@media (820px > width) {
			width: 100%;
		}
	}
}
.column3 {
	display: flex;
	gap: 40px;
	flex-direction: row;
	flex-wrap: wrap;
	@media (820px > width) {
		flex-direction: column;
	}
	> div {
		width: calc(calc(100% - 80px) / 3);
		@media (820px > width) {
			width: 100%;
		}
	}
}



.bg_dot_l {
	background-image: url("../pro/img/h400_ue6.gif");
	background-repeat: no-repeat;
	background-position: left bottom;
}
.bg_dot_r {
	background-image: url("../pro/img/h400_shitas6.gif");
	background-repeat: no-repeat;
	background-position: right top;
}

.process {
	display: flex;
	gap: 40px 30px;
	flex-direction: row;
	margin-top: 50px;
	> div {
		padding-top: 50px;
		position: relative;
		&::before {
			content: "";
			width: 15px;
			height: 15px;
			display: block;
			border-top: solid 5px #dd3333;
			border-right: solid 5px #dd3333;
			margin-bottom: 30px;
			transform: rotateZ(45deg);
			position: absolute;
			top: 5px;
			left: 0;
		}
		&:last-child::before {
			content: "";
			width: 35px;
			height: 35px;
			background: url("../img/flag.svg");
			background-position: top left;
			background-repeat: no-repeat;
			background-size: contain;
			border: none;
			transform: rotateZ(0deg) translateY(-3px);
			position: absolute;
		}
		h3 {
			font-size: clamp(16px, 2vw, 16px);
			line-height: 1.5em;
			margin-bottom: 20px;
		}
	}
	@media (820px > width) {
		flex-direction: column;
		> div {
			padding-top: 0;
			padding-left: 50px;
			&:not(last-child)::before {
				content: "";
				transform: rotateZ(135deg);
			}
		}
	}
}

.riskey_global {
	.country {
		display: flex;
		gap: 10px;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 30px;
		@media (820px > width) {
			flex-direction: column;
		}
		h3 {
			display: flex;
			justify-content: center;
			align-items: center;
			width: calc(20% - 10px);
			font-size: clamp(16px, 2vw, 18px);
			background: #eee;
			padding: 10px;
			margin-bottom: 0;
			@media (820px > width) {
				width: 100%;
			}
		}
		ul {
			width: calc(80% - 10px);
			display: flex;
			gap: 10px 20px;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			font-size: clamp(14px, 2vw, 16px);
			background: #fafafa;
			border: solid 1px #f5f5f5;
			padding: 10px;
			@media (820px > width) {
				width: 100%;
			}
			> li {
				width: fit-content;
				line-height: 1.5;
			}
		}
	}
}

.column2.price_list {
	margin-top: 40px;
	> div {
		display: flex;
		gap: 10px;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 20px;
		border: solid 1px var(--service01-color);
		border-radius: 6px;
		> h3 {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			padding: 7px 10px;
			border-radius: 4px;
		}
		&:nth-of-type(1) {
			> h3 {
				background: var(--service01-color);
			}
			.ltd {
				display: inline;
				width: fit-content;
				color: #fff;
				font-weight: bold;
				text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
				background: #f54e3c;
				padding: 7px 25px;
				border-radius: 50px;
			}
		}
		&:nth-of-type(2) {
			> h3 {
				background: var(--service01-color-dark);
			}
		}
		p {
			width: fit-content;
			&.price {
				width: fit-content;
				font-size: 20px;
				line-height: 1.5;
				font-weight: bold;
			}
		}
	}
}
#scene + section {
	padding-bottom: 0;
	hgroup > h2 {
		margin-bottom: 0;
	}
}

/* ↓アコーディオン ------------------------------------------------------------ */
.accordion_container {
	font-size: 15px;
	margin: 0 auto;
	&+ .accordion_container {
		margin-top: 5px;
	}
}
.accordion_title {
	background-color: #eee;
	font-weight: bold;
	padding: 15px 40px 15px 20px;
	position: relative;
	z-index: +1;
	cursor: pointer;
	transition-duration: 0.2s;
	&:hover {
		opacity: .8;
	}
	&::before {
		content: "";
		display: block;
		width: 14px;
		height: 2px;
		background: #555;
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
	}
	&.default::after,
	&:not(.open)::after {
		content: "";
		display: block;
		width: 2px;
		height: 14px;
		background: #555;
		position: absolute;
		right: 21px;
		top: 50%;
		transform: translateY(-50%);
	}
}
.accordion_title.open {
	color: #dd3333;
}
.accordion_inner {
	display: none;
	padding: 15px 20px;
	box-sizing: border-box;
	a {
		color: #61a3e5;
		text-decoration: underline;
	}
}
.accordion_inner.open {
	display: block;
}

/* --------------- CompetitorScanの調査事例 アコーディオン --------------- */
body.CompetitorScan {
	main.lp {
		.column2 {
			.accordion {
				.accordion_title {
					display: flex;
					align-items: center;
					min-height: 80px;
				}
				h3 {
					font-size: clamp(16px, 2vw, 20px);
					margin-bottom: 0;
				}
			}
		}
	}
}
/* --------------- CompetitorScanの調査事例 アコーディオン --------------- */

/* ↑アコーディオン ------------------------------------------------------------ */

.customer {
	> div {
		display: flex;
		gap: 20px;
		flex-direction: row;
		hgroup{
			& + * {
				margin-top: 1em;
			}
		}
		h3 {
			line-height: 1.3em;
			& + p {
				margin-top: 1em;
			}
		}
		> img {
			width: 30%;
			max-width: 200px;
			object-fit: contain;
			align-self: self-start;
		}
	}
}
.column1.customer {
	> div {
		> div {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	}
}


main a:has(img) {
	display: block;
	width: 100%;
	line-height: 1;
	transition: 0.3s;
	will-change: transform;
	&:hover {
		transform: scale(1.05, 1.05);
		filter:drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
		transition: 0.3s;
	}
}
.scale_up {
	img {
	}
}

/*==================================================================================================*/
/*CompetitorScan*/
.business_type {
	margin-top: 60px;
	ul {
		display: flex;
		gap: 20px;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin: 30px auto 60px;
		li {
			display: flex;
			justify-content: center;
			align-items: center;
			width: calc(calc(100% - 80px) / 5);
			min-width: 8em;
			font-weight: bold;
			letter-spacing: 1px;
			padding: 10px 15px;
			border: solid 1px #ccc;
			border-radius: 5px;
			&:nth-child(6n - 5) {background: var(--service01-color-pale); border: solid 1px var(--service01-color);}
			&:nth-child(6n - 4) {background: var(--service02-color-pale); border: solid 1px var(--service02-color);}
			&:nth-child(6n - 3) {background: var(--service03-color-pale); border: solid 1px var(--service03-color);}
			&:nth-child(6n - 2) {background: var(--service04-color-pale); border: solid 1px var(--service04-color);}
			&:nth-child(6n - 1) {background: var(--service05-color-pale); border: solid 1px var(--service05-color);}
			&:nth-child(6n) {background: var(--service06-color-pale); border: solid 1px var(--service06-color);}
		}
		@media (820px > width) {
			li {
				width: calc(calc(100% - 20px) / 2);
			}
		}
	}
}
/*==================================================================================================*/


/*==================================================================================================*/
/*各種フォーム*/
body.form {
	span#form + section {
		padding-top: 160px;
		.column2 {
			display: flex;
			flex-direction: row;
		}
	}
}
.form {
	p.info {
		margin: 10px auto 40px;
	}
	a[href^="#"] {
		text-decoration: underline;
		&:hover {
			background: var(--service01-color-pale);
		}
	}
}
#tel {
	& + section {
		div {
			width: fit-content;
			text-align: center;
			padding: 30px 40px;
			border: solid 1px #ccc;
			border-radius: 6px;
			margin: 10px auto;
			h3 {
				font-size: clamp(20px, 2vw, 26px);
				line-height: 1.5;
			}
			p.number {
				font-size: 36px;
				font-weight: bold;
				line-height: 1.5;
				&::before {
					content: "";
					display: inline-block;
					width: 50px;
					height: 32px;
					background: url("../img/hl01_tel_01.gif");
					background-size: contain;
					background-repeat: no-repeat;
					background-position: left bottom;
				}
			}
		}
	}
}

body.complete {
	span#complete + section {
		padding: 300px 0;
	}
}