@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap');

@font-face {
	font-family:'LINESeedJP';
	font-weight:100;
	src:url('images/fonts/LINESeedJP_OTF_Th.otf') format('opentype');
}
@font-face {
	font-family:'LINESeedJP';
	font-weight:400;
	src:url('images/fonts/LINESeedJP_OTF_Rg.otf') format('opentype');
}
@font-face {
	font-family:'LINESeedJP';
	font-weight:700;
	src:url('images/fonts/LINESeedJP_OTF_Bd.otf') format('opentype');
}
@font-face {
	font-family:'LINESeedJP';
	font-weight:800;
	src:url('images/fonts/LINESeedJP_OTF_Eb.otf') format('opentype');
}



/* ==========================================================================================================================================
	var setting
=========================================================================================================================================== */
* {
	--font-body:'Murecho' ,'LINESeedJP' ,sans-serif;
	--font-mona:'Mona Sans' ,'LINESeedJP' ,sans-serif;
	--font-serif:'ten-mincho-text' ,serif;

	--color-text:#333;
	--color-fore:#69d2a3;
	--color-back:#069e4e;
	--color-em:#f60;
	--color-bg1:#faf8e8;
	--color-bg2:#f3b7b7;
	--color-bg3:#f3b7b7;
}

@media screen and (min-width:800px) { 
	* {
		--font-size:20px;
	}
}
@media screen and (max-width:799px) { 
	* {
		--font-size:16px;
	}
}





/* ==========================================================================================================================================
	CSS reset
=========================================================================================================================================== */
* {
	box-sizing:border-box;
	text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
}
html ,body ,div ,p ,span ,iframe ,a ,img ,
h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,
dl ,dt ,dd ,ol ,ul ,li ,
form ,label ,
table ,thead ,tbody ,tfoot ,tr ,th ,td ,
strong ,em ,small ,blockquote ,q ,pre ,
header ,footer ,nav ,article ,section ,aside {
	margin:0;
	padding:0;
	border:0 none;
	color:inherit;
	font-size:inherit;
	font-weight:inherit;
	font-style:inherit;
	text-decoration:inherit;
}
th ,td {
	vertical-align:middle;
}
button ,input ,textarea ,select {
	font-size:var(--font-size);
	font-family:var(--fontFamily-body);
	max-width:100%;
}
button ,
input[type='submit'] {
	padding:0.3em 1.5em;
}

a ,button {
	text-decoration:none;
	transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
}

img {
	vertical-align:top;
	max-width:100%;
}
ol ,ul ,li {
	list-style:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
header ,footer ,nav ,article ,section ,aside {
	display:block;
}


/* ============================================================================================
	common
============================================================================================= */
@media screen and (min-width:800px) { 
	.xEl > :last-child,
	.sp {
		display:none !important;
	}
}
@media screen and (max-width:799px) { 
	.xEl > :first-child,
	.pc {
		display:none !important;
	}
}
.noDisp {
	display:none;
}

.center {
	text-align:center;
}

em {
	color:var(--color-em);
}

.spl-fullscreen {
	display:none !important;
}



/* ==========================================================================================================================================
	body	
=========================================================================================================================================== */
html {
	scroll-behavior:smooth;
}
body {
	position:relative;
	font-size:var(--font-size);
	line-height:1.8;
	color:var(--color-text);
	background:#fff;
	font-family:var(--font-body);
}

.w1200 {
	width:1200px;
	margin:auto;
}
.w1000 {
	width:1000px;
	margin:auto;
}

.mona {
	font-weight:bold;
	font-family:var(--font-mona);
}


@media screen and (min-width:800px) { 
	#bgLayer {
		min-width:1400px;
	}
}
@media screen and (max-width:799px) { 
	#bgLayer {
		width:480px;
		marign:auto;
	}
	.w1200 ,
	.w1000 {
		width:100%;
	}

}



main section {
	position:relative;
}
main section .section-label {
	position:absolute;
	top:0.3em;
	left:0.3em;
}
@media screen and (max-width:799px) {
	main section {
	    padding-top:4em;
	}
	main section .section-label img {
		height:5em;
	}
}

/* ============================================================================================
	header
============================================================================================= */
header {
	height:47em;
	background:url(images/fv.jpg) 100% 100% no-repeat;
	background-size:cover;
}
header .logo {
	padding:1.2em 0.8em;
}
header .logo img {
	width:12em;
}
@media screen and (max-width:799px) {
	header {
		height:47em;
		background-position:65% 0;
		background-size:auto 50em;
	}
}


/* ==============================================
	fv
=============================================== */
#fv {
}
.fv-frame {
	width:1400px;
	margin:auto;
	padding:2em 1em;
}
h1 {
	line-height:1.2;
}
h1 > span {
	display:block;
}
h1 > span.l1 {
	font-size:140%;
	font-weight:bold;
}
h1 > span.l2 {
	line-height:1.1;
	font-size:340%;
	font-weight:bold;
}
h1 > span.l2 img {
	height:0.9em;
}

h1 > span.l3 {
	font-size:265%;
}
h1 + p {
	padding-top:0.3em;
    line-height:1.6;
	font-size:115%;
	font-weight:bold;
}
#fv .items {
	padding-top:1.4em;
	display:flex;
	text-align:center
}
#fv .items > li {
	padding-right:0.4em;
}
#fv .items .item-box {
	width:13em;
	height:6em;
	line-height:1.2;
	padding:2.6em 0 0;
	color:#fff;
	background:url(images/icons/icon_fv_security.png) 50% 0 no-repeat rgba(255,102,0,0.8);
	background-size:auto 3.5em;
	font-weight:bold;
	display:flex;
	justify-content:center;
	align-items:center;
}
#fv .items .item-box.fv2 {
	background-image:url(images/icons/icon_fv_discount.png);
}
#fv .items .item-box.fv3 {
	background-image:url(images/icons/icon_fv_support.png);
}
#fv .items .item-box .big {
	font-size:170%;
}

@media screen and (max-width:799px) {
	.fv-frame {
		width:100%;
	}
	h1 > span.l2 {
		font-size:280%;
	}
	h1 > span.l3 {
		font-size:240%;
	}

	#fv .items {
		display:block;
	}
	#fv .items li {
		padding-bottom:0.3em;
	}
	#fv .items .item-box {
		width:10em;
		height:5em;
	}
	#fv .items .item-box span {
		font-size:90%;
	}
}


#fv .github_logo {
	display:flex;
	align-items:center;
}
h1 > span.l2 {
	padding-top:0.2em;
}
h1 > span.l2 .mona {
	font-size:110%;
}


/* ============================================================================================
	main - problem
============================================================================================= */
#problem {
	padding:5em 0;
}

.problem-title {
	font-size:240%;
	letter-spacing:-0.05em;
	text-indent:-0.05em;
	font-family:var(--font-serif);
	text-align:center;
}
.problem6 {
	padding-top:2.1em;
	padding-bottom:5em;
}
.problem6-list {
	background:url(images/problem6_pc.png) 50% 0 no-repeat;
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
}
.problem6-list li {
	width:16em;
	padding-bottom:7.6em;
}
.problem6-list .problem6-text {
	padding:1.3em 0;
	display:flex;
	justify-content:center;
}
.problem6-list .problem6-text p {
	font-weight:bold;
	letter-spacing:-0.02em;
}

.problem-text {
	text-align:center;
}
.problem-text p {
	font-size:160%;
}

@media screen and (max-width:799px) {
	.problem-title {
		font-size:200%;
	}

	.problem6-list {
		width:100%;
		aspect-ratio:720/1884;
		background-image:url(images/problem6_sp.png);
		background-size:contain;
		display:block;
	}
	.problem6-list li {
		width:21em;
		height:11.6em;
		padding-bottom:4em;
	}
	.problem6-list li:nth-child(even) {
		margin-left:auto;
		padding-right:0.8em;
	}
	.problem6-list li:last-child {
		padding-top:0.5em;
	}
	.problem6-list .problem6-text {
		padding-top:1.9em;
	}
	.problem6-list .problem6-text p {
		font-size:120%;
	}
}

/* ==============================================
	solution
=============================================== */
.solution-image {
	padding-top:2.5em;
	text-align:center;
}
.solution-logo {
	padding-top:2.2em;
	text-align:center;
}
.solution-logo img {
	width:3.6em;
}
.solution-check {
	padding:0.8em 0 1.8em;
	text-align:center;
	background:url(images/icons/icon_check.png) 50% 50% no-repeat;
	background-size:contain;
}
.solution-check h3 {
	font-size:200%;
	font-weight:bold;
}
.solution-text {
	padding-top:1.2em;
	text-align:center;
}
.solution-text p {
	font-size:120%;
}

@media screen and (max-width:799px) {
	.solution-check {
		padding:1.2em 0 1em;
	}
	.solution-check h3 {
		font-size:180%;
		line-height:1.6;
	}
}


/* ============================================================================================
	cta
============================================================================================= */
.cta {
	padding:2.6em 0;
}
.cta-frame {
	position:relative;
	padding-bottom:1.5em;
	color:#fff;
	background:var(--color-fore);
	border-radius:0.8em;
	text-align:center;
}
.cta-frame:after {
	content:"";
	position:absolute;
	right:0.6em;
	bottom:0;
	z-index:2;
	display:block;
	width:7.2em;
	aspect-ratio:200/310;
	background:url(images/cta_w.png) 100% 100% no-repeat;
	background-size:contain;
}

.cta-frame h2 {
	padding:1.4em 0;
	display:flex;
	justify-content:center;
	align-items:center;
}
.cta-frame h2 span {
	font-size:140%;
	font-weight:bold;
}
.cta-frame h2:before ,
.cta-frame h2:after {
	content:"";
	width:2.6em;
	aspect-ratio:1/1;
	background:url(images/icons/icon_github_w.png) 50% 50% no-repeat;
	background-size:contain;
}
.cta-frame h2:after {
	background-image:url(images/icons/icon_gh_copilot_w.png);
}


/* ==============================================
	cta buttons
=============================================== */
.cta-buttons {
	padding:0 2.3em;
	display:flex;
	justify-content:space-between;
	text-align:center;
}
.cta-buttons li {
}
.cta-buttons li a {
	width:22.4em;
	height:3.8em;
	line-height:1;
	border:2px solid #fff;
	border-radius:2em;
	color:var(--color-fore);
	background:#fff;
	box-shadow:0 0.3em 0 0 var(--color-back);
	display:flex;
	justify-content:center;
	align-items:center;
}
.cta-buttons li a > span {
	padding-left:0.2em;
	font-size:140%;
	font-weight:bold;
}
.cta-buttons li a.tel > span {
	font-size:130%;
}
.cta-buttons li a .number {
	font-size:75%;
	font-weight:normal;
}

.cta-buttons li a:before {
	content:"";
	width:1.4em;
	aspect-ratio:1/1;
	background:url(images/icons/icon_forward.png) 50% 50% no-repeat;
	background-size:contain;
}
.cta-buttons li a.tel:before {
	background-image:url(images/icons/icon_tel.png);
}
.cta-buttons .time {
	display:block;
	font-size:75%;
}


@media screen and (min-width:800px) { 
	.cta-buttons li a.mail:hover {
		color:#fff;
		background:var(--color-back);
		box-shadow:0 0px 0 0 var(--color-back);
		transform:translateY(0.3em);
	}
	.cta-buttons li a.mail:hover:before {
		background-image:url(images/icons/icon_forward_w.png);
	}

	.cta-buttons li a.tel {
		pointer-events:none;
	}
	.cta-buttons li a.tel {
		color:#fff;
		background:transparent;
		box-shadow:none;
	}
	.cta-buttons li a.tel:before {
		background-image:url(images/icons/icon_tel_w.png);
	}
}
@media screen and (max-width:799px) {
	.cta-frame {
		width:calc(100% - 2em);
		margin:0 auto;
		padding-bottom:2.5em;
	}
	.cta-buttons {
		padding:0 2.3em;
		flex-direction:column;;
	}
	.cta-buttons li + li {
		padding-top:2em;
	}
	.cta-buttons li a {
		width:100%;
	}
	.cta-buttons .time {
		padding-top:0.3em;
		font-size:100%;
		line-height:1.4;
	}
	.cta-buttons .time .sp {
		font-size:130%;
	}

}


.cta-buttons.rev {
}
.cta-buttons.rev li a {
	border:2px solid var(--color-fore);
	color:#fff;
	background:var(--color-fore);
}
.cta-buttons.rev li a:before {
	background-image:url(images/icons/icon_forward_w.png);
}
@media screen and (min-width:800px) { 
	.cta-buttons.rev li a.mail:hover {
		color:var(--color-back);
		background:#fff;
	}
	.cta-buttons.rev li a.mail:hover:before {
		background-image:url(images/icons/icon_forward.png);
	}

	.cta-buttons.rev li a.tel {
		color:var(--color-fore);
		background:#fff;
	}
	.cta-buttons.rev li a.tel:before {
		background-image:url(images/icons/icon_tel.png);
	}
	.cta-buttons .time {
		color:var(--color-fore);
	}
}



/* ============================================================================================
	about
============================================================================================= */
#about {
	background:url(images/about_bg.jpg) 50% 0 repeat-y;
	padding:6.5em 0 5em;
}
.about-title-icon {
	text-align:center;
}
.about-title-icon img {
	width:4em;
}
.about-title {
	text-align:center;
}
.about-title h2 {
	font-size:230%;
}

.about-text {
	padding-top:0.7em;
	text-align:center;
}
.about-text p {
	font-size:120%;
}
.about-text em {
	font-weight:700;
}
.about-text2 {
	padding-top:1.2em;
	text-align:center;
}
.about-text2 p {
	font-size:120%;
}
@media screen and (max-width:799px) {
	#about {
		padding-top:14em;
		background:url(images/about_bg_sp.jpg) 50% 0 no-repeat var(--color-bg1);
		background-size:contain;
	}
	main section#about .section-label img {
		height:10em;
	}
	.about-title h2 {
		font-size:210%;
	}
	.about-text2 p
		font-size:110%;
	}
}

/* ============================================
	about4 list
=============================================== */
.about4 {
}
.about4 ul {
	width:1000px;
	height:460px;
	line-height:1.6;
	padding:3.8em 2em;
	background:url(images/about4.png) 50% 50% no-repeat;
	background-size:420px;
	display:flex;
	flex-wrap:wrap;
}
.about4 ul > .about4-text {
	width:50%;
	height:50%;
}
.about4-text {
	display:flex;
	align-items:center;
}
.about4-text.top {
	padding-bottom:4.6em;
}
.about4-text.bottom {
	padding-top:3em;
}
.about4-text.left {
	padding-right:11em;
	text-align:right;
}
.about4-text.right {
	padding-left:11em;
}
.about4-text p {
	width:100%;
	font-weight:bold;
}
@media screen and (max-width:799px) {
	.about4 ul {
		width:100%;
		height:460px;
		padding:2em 0;
		background-size:360px;
	}
	.about4-text.left {
		padding-right:2em;
		text-align:center;
	}
	.about4-text.right {
		padding-left:2em;
		text-align:center;
	}
	.about4-text.top {
		padding-bottom:9.6em;
	}
	.about4-text.bottom {
		padding-top:8em;
	}
	.about4 ul > .about4-text:last-child {
		padding-top:6em;
		padding-left:3.5em;
	}

}


/* ==============================================
	features
=============================================== */
.features-title-icon {
	padding-top:2.5em;
	text-align:center;
}
.features-title-icon img {
	width:2.7em;
}
.features-title {
	padding-top:0.5em;
	text-align:center;
}
.features-title h3 {
	display:flex;
	justify-content:center;
	align-items:center;
}
.features-title h3 > span {
	padding:0 0.9em;
	font-size:160%;
	font-weight:bold;
}
.features-title h3:before ,
.features-title h3:after {
	content:"";
	display:block;
	width:4.2em;
	height:2.5px;
	background:#999;
}

.features-text {
	padding-top:1em;
	text-align:center;
}
.features-text p {
	font-weight:bold;
	font-size:120%;
}



/* ==============================================
	features explains
=============================================== */
.features-explain {
	padding:4.2em 0;
	background:url(images/development.png) calc(50% + 720px) 50% no-repeat;
	background-size:400px;
}
.explain-frame {
	background:#fff;
	border-radius:0.8em;
}
.explain-icon {
	text-align:center;
}
.explain-icon img {
	width:3.3em;
	transform:translateY(-50%);
}
.explain-title {
	text-align:center;
	transform:translateY(-1.2em);
}
.explain-title h4 {
	line-height:1.6;
	font-size:145%;
}
.explain-body {
	padding:0 0.5em 2.2em 2em;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.explain-body .explain-image {
	position:relative;
	width:19em;
	cursor:pointer;
}
.explain-body .explain-image img {
	border-radius:0.5em;
}
.explain-body .explain-image:after {
	content:"";
	position:absolute;
	bottom:0.4em;
	right:0;
	display:block;
	width:4.2em;
	aspect-ratio:120/35;
	height:1.3em;
	background:url(images/icons/icon_zoom.png) 100% 50% no-repeat;
	background-size:contain;
	z-index:2;
}

.explain-body .explain-text {
	width:27.2em;
	padding-bottom:0.3em;
	line-height:1.8;
}

.explain-body .explain-text p {
	letter-spacing:-0.05em;
}
.explain-body .explain-text p + p {
	padding-top:1em;
}
.explain-spacer + .explain-spacer {
	padding-top:4em;
}

@media screen and (max-width:799px) {
	.explain-body {
		padding:0 1em 2.2em;
		flex-direction:column;
	}
	.explain-body .explain-image {
		width:100%;
	}
	.explain-body .explain-text {
		width:100%;
		padding-top:1em;
	}
	.explain-body .explain-text p {
		font-size:115%;
	}
}


/* ==============================================
	voice
=============================================== */
.voice {
}
.voice-title {
	padding-top:0.3em;
	text-align:center;
}
.voice-title h3 {
	display:flex;
	justify-content:center;
	align-items:center;
}
.voice-title h3:before {
	content:"";
	width:2.7em;
	aspect-ratio:1/1;
	background:url(images/icons/icon_gh_copilot.png) 50% 50% no-repeat;
	background-size:contain;
}
.voice-title h3 > span {
	padding-left:0.3em;
	font-size:150%;
	font-weight:bold;
}

.voice6-list {
	padding-top:0.8em;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
}
.voice6-list > li {
	padding:0.3em;
}
.voice6-frame {
	position:relative;
	width:15em;
	height:14.8em;
	border-radius:0.5em;
	background:#fff;
	text-align:center;
}
.voice6-frame:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:6em;
	aspect-ratio:200/145;
	background:url(images/icons/icon_good.png) 0 0 no-repeat;
	background-size:contain;
}

.voice6-frame .item {
	padding-top:2.8em;
	line-height:1;
}
.voice6-frame .counter {
	color:var(--color-em);
	font-size:360%;
	font-weight:bold;
	font-style:italic;
	font-family:var(--font-mona);
}
.voice6-frame .counter .number {
	display:inline-block;
	width:1.2em;
	font-size:145%;
}
.voice6-frame .voice6-text {
	padding-top:1.6em;
}
.voice6-frame .voice6-text p {
	line-height:1.5;
	font-size:110%;
	font-weight:bold;
}

@media screen and (max-width:799px) {
	.voice6-frame {
		width:14em;
	}
}



/* ==============================================
	report
=============================================== */
.report-check {
	padding-top:0.8em;
	text-align:center;
}
.report-check p {
	padding:0.8em 0;
	font-size:120%;
	background:url(images/icons/icon_check.png) 50% 50% no-repeat;
	background-size:contain;
}

.report-image {
	padding-top:0.2em;
	text-align:center;
}

@media screen and (max-width:799px) {
	.report-check {
		padding:2em 3em 0;
	}
	.report-check p {
		line-height:1.6;
	}
	.report-image {
		padding:2em 3em 0;
	}

}

/* ==============================================
	etc
=============================================== */
.etc {
	padding-top:3.5em;
}
.etc-title {
	padding-top:3em;
	text-align:center;
	background:url(images/icons/icon_gear.png) 50% 0 no-repeat;
	background-size:2.8em;
}
.etc-title h3 {
	display:flex;
	justify-content:center;
	align-items:center;
}
.etc-title h3 > span {
	padding:0 0.5em;
	font-size:160%;
	font-weight:bold;
}
.etc-title h3:before ,
.etc-title h3:after {
	content:"";
	display:block;
	width:4.2em;
	height:2.5px;
	background:#999;
}

.etc-text {
	padding-top:1em;
	text-align:center;
}
.etc-text p {
	font-size:115%;
}
.etc-example {
	padding-top:1.6em;
}
.etc-example h4 {
	height:5.6em;
	text-align:center;
}
.etc-example h4 > span {
	display:block;
}
.etc-example h4 .image {
	height:5.6em;
}
.etc-example h4 .text {
	font-size:130%;
	font-weight:bold;
	transform:translateY(-0.7em);
}
.etc-example-table {
	padding-top:1.3em;
	padding-bottom:1.8em;
	padding-left:10.3em;
	background:url(images/allinone_frame.png) 50% 0 no-repeat;
	display:flex;
	align-items:center;
	flex-wrap:wrap;
}
.etc-example-table > * {
	padding-top:0.9em;
}
.etc-example-table > * > span {
	font-size:116%;
}
.etc-example-table > dt {
	width:11.2em;
}
.etc-example-table > dd {
	width:calc(100% - 11.2em);
}

.etc-check {
	padding-top:1em;
	text-align:center;
}
.etc-check p {
	padding:0.8em 0;
	font-size:120%;
	background:url(images/icons/icon_check.png) 50% 50% no-repeat;
	background-size:contain;
}

#about .cta {
	padding-top:5em;
}

@media screen and (max-width:799px) { 
	.etc {
		padding-top:5em;
	}
	.etc-title {
		padding:3.8em 0 0;
		background-size:3.2em;
	}
	.etc-title h3 > span {
		line-height:1.4;
	}

	.etc-example h4 {
		height:4em;
	}
	.etc-example h4 .image {
		height:4em;
	}

	.etc-example-table {
		padding-top:1.8em;
		padding-bottom:1.8em;
		padding-left:3.3em;
		background:url(images/allinone_frame_sp.png) 50% 0 no-repeat;
		background-size:100%;
		display:block;
	}
	.etc-example-table > dt > span {
		font-size:130%;
	}

	.etc-example-table > dt {
		padding-top:0.2em;
		width:100%;
	}
	.etc-example-table > dd {
		padding-top:0.1em;
		width:100%;
		padding-left:2.3em;
	}

	.etc-text {
		padding:1em 0 0;
	}
	.etc-example {
		padding:2em 1em 0;
	}
	.etc-text2 {
		padding:2em 4em 0;
	}
}



/* ============================================================================================
	main - flow
============================================================================================= */
#flow {
	padding-bottom:6.9em;
}
.flow-title {
	padding-top:6.7em;
	text-align:center;
}
.flow-title h2 {
	font-size:180%;
}
.flow-spacer {
	padding-top:2.5em;
}
.flow-spacer + .flow-spacer {
	padding-top:2.8em;
}

.flow-frame {
	padding-bottom:1.6em;
	background:url(images/flow_pc.png) 50% 0 no-repeat;
	background-size:100%;
}
.flow-frame-title h3 {
	line-height:1.3;
	font-size:150%;
	font-weight:bold;
	display:flex;
	justify-content:center;
	align-items:center;
}
.flow-frame-title em {
	color:#fff;
	background:var(--color-em);
	padding:0 0.2em;
}

.flow-frame-list {
	padding:2.3em 1.2em 0 1.5em;
	display:flex;
	justify-content:center;
}
.flow-frame-list > li {
	width:25%;
	padding:0 1.2em;
	letter-spacing:-0.02em;
}

.flow-frame-cell {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
}
.flow-frame-cell .number {
	width:5.2em;
	aspect-ratio:1/1;
	line-height:0.9;
	color:var(--color-em);
	background:#fff;
	border:2px solid var(--color-em);
	border-radius:50%;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
}
.flow-frame-cell .number span {
	font-size:60%;
	font-weight:bold;
}
.flow-frame-cell .number em {
	font-size:250%;
	font-weight:bold;
}
.flow-frame-cell .text h4 {
	padding-top:0.2em;
	text-align:center;
}
.flow-frame-cell .text h4 span {
	font-size:110%;
	font-weight:bold;
}
.flow-frame-cell .text p {
	padding-top:0.3em;
	padding-left:0.3em;
	line-height:1.4;
}
.flow-frame-cell .text p strong {
	font-weight:bold;
}
.flow-frame-cell .text p span {
	font-size:90%;
}

.flow-frame-cell.rev .number {
	padding-right:0.1em;
	color:#fff;
	background:var(--color-em);
}
.flow-frame-cell.rev .number em {
	color:#fff;
}
.flow-frame-cell.rev .text h4 {
	color:var(--color-em);
}

.flow-frame-list > li.wide {
	padding:0 0 0 0.6em;
}

.flow-text {
	padding-bottom:4.5em;
	background:url(images/flow_text_bg.jpg) 50% 100% no-repeat;
	background-size:100%;
	text-align:center;
	transform:translateY(-0.3em);
}

.flow-tri {
	height:3.1em;
	background:url(images/flow_tri.png) 50% 0 no-repeat;
}
.flow-text1 {
	text-align:center;
}
.flow-text1 p {
	font-size:120%;
}
.flow-text1 p em {
	font-weight:bold;
}
.flow-text2 {
	padding-top:0.8em;
	text-align:center;
}
.flow-text2 p {
	padding:3.4em 0;
	background:url(images/flow_zero.png) 50% 50% no-repeat;
	background-size:contain;
}
.flow-text2 p strong {
	font-size:200%;
}
.flow-text2 p span {
	font-weight:bold;
}
.flow-text3 {
	padding-top:0.6em;
	text-align:center;
}
.flow-text3 p {
	font-size:120%;
}
.flow-text3 p em {
	font-weight:bold;
}

@media screen and (max-width:799px) { 
	.flow-title {
		padding-top:6em;
	}

	.flow-frame {
		padding-bottom:0;
		background-image:url(images/flow_sp.png);
	}
	.flow-frame-title h3 {
		line-height:1.4;
		font-size:130%;
	}

	.flow-frame-list {
		padding-top:1.6em;
		flex-direction:column;
	}
	.flow-frame-list > li {
		width:100%;
		height:7.4em;
		padding:0 0.6em;
	}
	.flow-frame-list > li + li {
		margin-top:1.5em;
	}
	.flow-frame-list > li.wide {
		padding-right:0.3em;
	}

	.flow-frame-cell {
		flex-direction:row;
		align-items:flex-start;
	}
	.flow-frame-cell .number {
		width:5.4em;
	}
	.flow-frame-cell .number span {
		font-size:80%;
	}
	.flow-frame-cell .number em {
		font-size:300%;
	}
	.flow-frame-cell .text {
		width:calc(100% - 5.4em);
		padding-left:0.7em;
	}
	.flow-frame-cell .text h4 {
		padding-top:0;
		text-align:left;
	}
	.flow-frame-cell .text h4 span {
		font-size:130%;
	}
	.flow-frame-cell .text p {
		padding-top:0;
		padding-left:0;
	}
	.flow-frame-cell .text p span {
		font-size:105%;
	}

	.flow-text {
		padding:0 2em 3em;
		background-image:url(images/flow_text_bg_sp.png);
	}
	.flow-tri {
		height:2.5em;
		background-size:contain;
	}
	.flow-text1 {
		padding-top:1em;
		text-align:left;
	}
	.flow-text1 p {
		font-size:115%;
		line-height:1.6;
	}
	.flow-text2 {
		padding-top:2em;
	}
	.flow-text3 {
		padding:2em 0 0;
	}
	.flow-text3 p {
		line-height:1.6;
	}

}



/* ============================================================================================
	main - merit
============================================================================================= */
#merit {
	padding-bottom:4.2em;
	color:#fff;
	background:url(images/merit_bg.jpg) 50% 0 no-repeat;
}
.merit-title {
	padding-top:8.5em;
	text-align:center;
}
.merit-title h2 {
	font-size:170%;
}
.merit-title h2 em {
	color:#ff9;
	font-weight:bold;
}

.merit-text {
	padding-top:0.6em;
	text-align:center;
}
.merit-text p {
	line-height:1.7;
	font-size:125%;
}
.merit-text p small {
	font-size:80%;
}

.merit-list {
	padding-top:3em;
}
.merit-list li {
	padding-left:3.7em;
}
.merit-list li + li {
	padding-top:1.5em;
}
.merit-cell {
	display:flex;
	align-items:center;
}
.merit-cell .merit-item .item-box {
	width:17.4em;
	height:5.8em;
	line-height:1.2;
	padding:3em 0 0;
	color:#fff;
	background:url(images/icons/icon_fv_discount.png) 50% 0.2em no-repeat rgba(255,102,0,0.8);
	background-size:6.8em;
	border:1px solid #fff;
	font-weight:bold;
	display:flex;
	justify-content:center;
	align-items:center;
}
.merit-cell .merit-item .item-box .big {
	font-size:170%;
}
.merit-cell .merit-item .item-box.ml2 {
	background-image:url(images/icons/icon_fv_report.png);
}
.merit-cell .merit-item .item-box.ml3 {
	background-image:url(images/icons/icon_fv_support.png);
}
.merit-cell .merit-explain {
	padding-left:1.2em;
}

.merit-license {
	margin-top:3.6em;
	padding-top:1.3em;
	color:#000;
	background:#fff;
	border-radius:0.5em;
	text-align:center;
}
.merit-license h3 {
	font-size:140%;
}
.license-logo {
	padding-top:0.5em;
}
.license-logo img {
	margin:0 0.5em;
	height:1.7em;
}

.license-list {
	padding:1.6em 2em;
	display:flex;
	justify-content:center;
}
.license-list > li {
	width:calc(100% / 6);
}
.license-list > li img {
	width:5.4em;
}
.license-list > li p {
	padding-top:0.4em;
	line-height:1.1;
	font-size:90%;
	letter-spacing:-0.03em;
}

#merit .cta {
	padding-top:4.2em;
}


@media screen and (max-width:799px) { 
	#merit {
		padding-bottom:4em;
		background-size:cover;
	}
	.merit-title {
		padding-top:6em;
	}
	.merit-text {
		padding-top:1.6em;
	}
	.merit-list li {
		padding:0 4em;
	}
	.merit-cell {
		flex-direction:column;
	}
	.merit-cell .merit-item {
		width:100%;
	}
	.merit-cell .merit-item .item-box {
		width:100%;
		height:7.4em;
		padding-top:4.2em;
		background-position:50% 0.4em;
		background-size:8em;
	}
	.merit-cell .merit-item .item-box span {
		font-size:130%;
	}
	.merit-cell .merit-explain {
		padding:0.5em 0 0;
	}
	.merit-cell .merit-explain p {
		font-size:110%;
	}

	.merit-license {
		margin:2em auto 0;
		width:calc(100% - 2em);
	}

	.merit-license h3 {
		display:flex;
		justify-content:center;
		align-items:center;
		line-height:1.3;
	}
	.merit-license h3 .slash {
		font-size:200%;
		font-weight:100;
	}
	.license-logo {
		padding-top:1em;
	}
	.license-logo img {
		height:2em;
	}
	.license-list {
		padding:1.6em 1em 0.3em;
		flex-wrap:wrap;
	}
	.license-list > li {
		width:calc(100% / 3);
		padding-bottom:1em;
	}
	.license-list > li img {
		width:6.4em;
	}

	#merit .cta {
		padding:2.4em  0;
	}
}



/* ============================================================================================
	main - price
============================================================================================= */
#price {
	padding-bottom:3.6em;
}
.price-title {
	padding-top:8.5em;
	text-align:center;
}
.price-title h2 {
	font-size:170%;
}

.price-text {
	padding-top:1em;
	text-align:center;
}
.price-text p {
	font-size:120%;
}

.price-table {
	padding-top:1.8em;
}
.price-table img {
	max-width:none;
}
.price-text2 {
	text-align:right;
}
.price-text2 span {
	font-size:75%;
}
.price-text3 {
	padding-top:0.6em;
	text-align:center;
}
.price-text3 p {
	font-size:120%;
}
#price .cta {
	padding-top:3.4em;
}

@media screen and (max-width:799px) { 
	.price-title {
		padding-top:6em;
	}
	.price-title h2 {
		font-size:200%;
	}

	.price-text {
		padding-top:0.5em;
	}
	.price-text p {
		line-height:1.6;
		font-size:130%;
	}

	.price-text2 {
		padding-right:0.5em;
	}
	.price-text2 span {
		font-size:80%;
	}

	.price-text3 {
		padding:1em 0 0;
	}
	.price-text3 p {
		line-height:1.6;
	}
	
	.price-table {
		position:relative;
		overflow-x:scroll;
	}
	.price-table .xEl img {
		width:920px;
	}
	.price-table .scroll {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		display:flex;
		justify-content:center;
		align-items:center;
	}
	.price-table .scroll img {
		width:10em;
		opacity:0.8;
	}

	#price .cta {
		padding-top:3em;
	}
}



/* ============================================================================================
	main - faq
============================================================================================= */
#faq {
	padding-bottom:6em;
	background:#f3fbfb;
}

.faq-title {
	padding-top:8.6em;
	text-align:center;
}
.faq-title h2 {
	font-size:180%;
}

.faq-list {
	padding-top:1.4em;
	border-bottom:2px dotted #ddd;
}
.faq-cell {
	border-top:2px dotted #ddd;
	padding:0.8em 2em 0.8em 5em;
}

.faq-cell .q {
	cursor:pointer;
}
.faq-cell .a {
	display:none;
	width:100% !important;
	padding-top:0.5em;
}

.faq-cell .q > *,
.faq-cell .a > * {
	display:flex;
	align-items:center;
}
.faq-cell .q > *:before ,
.faq-cell .a > *:before {
	content:"";
	width:2.6em;
	aspect-ratio:1/1;
	background:url(images/icons/icon_q.png) 50% 50% no-repeat;
	background-size:contain;
}
.faq-cell .a > *:before {
	background-image:url(images/icons/icon_a.png);
}
.faq-cell .q > * {
	font-weight:bold;
}
.faq-cell .q > * span,
.faq-cell .a > * span {
	padding-left:0.8em;
	line-height:1.2;
	font-size:90%;
}
@media screen and (max-width:799px) {
	.faq-title {
		padding-top:4em;
	}
	.faq-cell {
		padding:0.8em 2em;
	}
	.faq-cell .q > * span ,
	.faq-cell .a > * span {
		width:calc(100% - 3.5em);
		font-size:110%;
	}
	.faq-cell .q > *:before ,
	.faq-cell .a > *:before {
		width:3.5em;
	}
}




/* ============================================================================================
	main - contact
============================================================================================= */
#contact {
	padding-bottom:6em;
	background:#e9e9e9;
}
.contact-title {
	padding-top:10em;
	text-align:center;
}
.contact-title h2 {
	font-size:200%;
}

.contact-spacer {
	padding-top:3em;
}
.contact-frame {
	padding:5em;
	font-size:90%;
	background:#f6f7f7;
}
.contact-form {
	display:flex;
	flex-wrap:wrap;
}
.contact-form .form-title {
	width:25%;
	padding:1.2em;
}
.contact-form .form-title.require {
	background:url(images/icons/icon_require.png) 100% 1.6em no-repeat;
	background-size:2.4em;
}
.contact-form .form-input {
	width:75%;
	padding:1em;
}
input ,textarea {
	width:100%;
	padding:0.3em 0.5em;
}
.form-button {
	padding-top:2em;
	display:flex;
	justify-content:center;
}
button {
	width:22em;
	border-radius:2em;
	color:#fff;
	border:2px solid var(--color-fore);
	background:var(--color-fore);
	box-shadow:0 5px 0 0 var(--color-back);
	display:flex;
	justify-content:center;
	align-items:center;
}
button > span {
	padding-left:0.2em;
	font-size:140%;
	font-weight:bold;
}
button:before {
	content:"";
	width:1.4em;
	aspect-ratio:1/1;
	background:url(images/icons/icon_forward_w.png) 50% 50% no-repeat;
	background-size:contain;
}
@media screen and (min-width:800px) { 
	button:hover {
		color:var(--color-fore);
		background:#fff;
		box-shadow:0 0px 0 0 var(--color-back);
		transform:translateY(5px);
	}
	button:hover:before {
		background-image:url(images/icons/icon_forward.png);
	}
}

@media screen and (max-width:799px) {
	main section#contact .section-label img {
		height:4em;
	}
	.contact-title {
		padding-top:4em;
	}

	.contact-frame {
		padding:3em 1em;
		font-size:100%;
	}

	.contact-form .form-title {
		width:100%;
		padding-bottom:0em;
		font-weight:bold;
	}
	.contact-form .form-title.require {
		background-position:95% 1.6em;
	}
	.contact-form .form-input {
		width:100%;
		padding-top:0.5em;
	}
}








/* ============================================================================================
	footer
============================================================================================= */
footer {
	padding-bottom:6em;
	background:#f6f7f7;
	text-align:center;
}
footer .logo {
	padding-top:4em;
}
footer .logo img {
	width:8em;
}
footer .name {
	padding-top:0.5em;
}
footer .name p {
	font-size:90%;
}
footer .addr {
	padding-top:2em;
}
footer .addr p {
	font-size:90%;
}
footer .copy {
	padding-top:2em;
}
footer .copy p {
	font-size:80%;
}
@media screen and (max-width:799px) {
	padding-bottom:15em;
}


/* ============================================================================================
	fixed
============================================================================================= */
.fixed {
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	padding-top:0.3em;
	background:rgba(255,255,255,0.9);
}
.fixed_banner {
	position:fixed;
	bottom:6em;
	left:0;
}
.fixed_banner .close {
	line-height:1;
	text-align:right;
}
.fixed_banner .close img {
	width:1.5em;
	transform:translate(50%,50%);
	cursor:pointer;
}
@media screen and (max-width:799px) {
	.fixed_banner .dl {
		width:12em;
	}

	.fixed {
	padding:0.3em 0 0.6em;
	}
	.fixed .cta-buttons {
		padding:0 0.5em;
		flex-direction:row;
	}
	.fixed .cta-buttons li {
		width:50%;
		padding:0 0.5em;
	}
	.fixed .cta-buttons li a {
		height:3.2em;
	}
	.fixed .cta-buttons li a .number {
		font-size:60%;
	}
	.fixed .cta-buttons.rev li a.tel:before {
		background-image:url(images/icons/icon_tel_w.png);
	}
	.fixed .cta-buttons.rev li a.tel {
		line-height:0.8;
	}
}


/* ============================================================================================
	temp
============================================================================================= */


/* Cookie */
  .cookie-consent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    font-size: 12px;
    color: #fff;
    background: rgba(0,0,0,.7);
    padding: 1.2em;
    box-sizing: border-box;
    visibility: hidden;
  }
  .cookie-consent.is-show {
    visibility: visible;
  }
  .cookie-consent a {
    color: #fff !important;
  }
  .cookie-agree {
    color: #fff;
    background: dodgerblue;
    padding: .5em 1.5em;
  }
  .cookie-agree:hover {
    cursor: pointer;
  }
  /* パッと消える */
  .cc-hide1 {
    display: none;
  }
  /* ゆっくり消える */
  .cc-hide2 {
    animation: hide 1s linear 0s;
    animation-fill-mode: forwards;
  }
  @keyframes hide {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      visibility: hidden;
    }
  }
  /* メディアクエリ */
  @media screen and (max-width: 600px) {
    .cookie-consent {
      flex-direction: column;
    }
    .cookie-text {
      margin-bottom: 1em;
    }
  }







