@charset "UTF-8";

/* =Reset=
-------------------------------------------------------------- */
/* assets */
:root{
	--color_primary: #333;
	--color_main: #2CA8E0;
	--color_main-light: #eff9ff;
	--color_main-light2: #ddf0ff;
	--color_main-dark: #0f3f67;
	--color_main-grad_start: #5ab8ef;
	--color_main-grad_end: #006cd8;
	--color_point: #f2771d;
	--color_point2: #ea7d31;
	--color_point-light: #f2eee4;
	--color_white: #fff;
	--color_gray: #ccc;
	--color_gray-light: #f2f2f2;
	--color_gray-dark: #999;
	--color_gray-dark2: #666;
	--color_marker: #fff500;
	--color_danger: #c00;
	--color_marker_danger: #ffd3d3;
	--color_shadow: rgba(0,0,0,0.16);
	--color_shadow-light: rgba(255,255,255,0.8);
	--color_shadow-dark: rgba(0,0,0,0.8);
	--color_shadow_main: rgba(65, 168, 228, 0.32);
	--color_shadow_main-light: rgba(65, 168, 228, 0.16);
	
	--fs-xl: 2.67em;		/* 18の場合：48px, 16の場合：35px, 14の場合：32.5px */
	--fs-l: 1.78em;		/* 18の場合：32px, 16の場合：28px, 14の場合：26px */
	--fs-m: 1.34em;		/* 18の場合：24px, 16の場合：21px, 14の場合：19.5px */
	--fs-s: 1.12em;		/* 18の場合：20px, 16の場合：18px, 14の場合：16.2px */
	--fs-xs: 0.89em;	/* 18の場合：16px, 16の場合：16px, 14の場合：14.6px */
	--fs-xxs: 0.78em;	/* 18の場合：14px, 16の場合：12px, 14の場合：11.4px */

	--family-noto: "Noto Sans JP","Meiryo","メイリオ","Meiryo UI","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Sans","ヒラギノ角ゴシック","MS PGothic","ＭＳ Ｐゴシック",Helvetica,Helvetica Neue,Arial,Osaka,sans-serif;
	--family-poppin:"Poppins", sans-serif;
	--family-icon: "Font Awesome 5 Free";
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse: collapse;border-spacing:0;}
fieldset,img{border:0;}
img{max-width: 100%;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
ul{list-style:none;padding:0;margin:0;}
ul>li{margin:0;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}
small{ font-size: 0.89em;}
input,button,textarea,select{*font-size:100%;}
header,main,footer,article,aside,section{display: block;}


/* base
-------------------------------------------------------------- */
body{
	color:var(--color_primary);
	font:normal normal 18px/1.6 var(--family-noto);
}
#wrapper,#container {overflow:hidden;}
*, *:before, *,:after { box-sizing: border-box;}

p { margin: 1em 0;}

@media screen and (max-width: 1024px) {
	body{ font-size: 16px;}
}
@media screen and (max-width: 678px) {
	body{ font-size: 14px;}
}

/* utility
-------------------------------------------------------------- */
.fLeft		{float:left !important;}
.fRight		{float:right !important;}
.clr		{clear:both;}

/* clearfix */
.cf:before,
.cf:after {content:".";display:block;height:0;overflow:hidden;}
.cf:after {clear:both;}
.cf {zoom:1;} /* IE < 8 */

/* fonts */
.tLeft		{text-align:left;}
.tRight		{text-align:right;}
.tCenter	{text-align:center;}
.clRed		{color:var(--color_danger);}
.clMain		{color:var(--color_main);}

/* margin */
.m0			{margin: 0 !important;} /* 強制リセット用のため多用厳禁 */
.mt5		{margin-top:5px;}
.mt10		{margin-top:10px;}
.mt15		{margin-top:15px;}
.mt20		{margin-top:20px;}
.mr5		{margin-right:5px;}
.mr10		{margin-right:10px;}
.mr15		{margin-right:15px;}
.mr20		{margin-right:20px;}
.mb5		{margin-bottom:5px;}
.mb10		{margin-bottom:10px;}
.mb15		{margin-bottom:15px;}
.mb20		{margin-bottom:20px;}
.ml5		{margin-left:5px;}
.ml10		{margin-left:10px;}
.ml15		{margin-left:15px;}
.ml20		{margin-left:20px;}

/* padding */
.p0			{padding: 0 !important;} /* 強制リセット用のため多用厳禁 */
.pt5		{padding-top:5px;}
.pt10		{padding-top:10px;}
.pt15		{padding-top:15px;}
.pt20		{padding-top:20px;}
.pr5		{padding-right:5px;}
.pr10		{padding-right:10px;}
.pr15		{padding-right:15px;}
.pr20		{padding-right:20px;}
.pb5		{padding-bottom:5px;}
.pb10		{padding-bottom:10px;}
.pb15		{padding-bottom:15px;}
.pb20		{padding-bottom:20px;}
.pl5		{padding-left:5px;}
.pl10		{padding-left:10px;}
.pl15		{padding-left:15px;}
.pl20		{padding-left:20px;}

/* hide */
.hidePc-Tb,
.hidePc-Sp { display: none;}
@media screen and (max-width: 896px) {
	.hidePc-Tb { display: block;}
	.hideTb { display: none;}
}
@media screen and (max-width: 480px) {
	.hidePc-Sp { display: block;}
	.hideSp { display: none;}
}

/* header
-------------------------------------------------------------- */

.header {
	display: table;
	width: 100%;
	background-color: var(--color_white);
	box-shadow: 0 2px 15px var(--color_shadow);
	padding: 0.5em 4%;
}
.header .logo,
.hNav {
	display: table-cell;
	vertical-align: middle;
}
.header .logo img { width: 180px; vertical-align: middle;}
.hNav { width: 50%; text-align: right;}
.hNav .trigger,
.hNav > ul,
.hNav > ul > li {
	display: inline-block;
	vertical-align: middle;
	margin: 0;
}
.hNav li + li { margin-left: 1em;}
.txtTel a,
.icoTel a {
	color: var(--color_primary);
	text-decoration: none;
	pointer-events: none;
	cursor: default;
}
.icoTel a {
	font-size: 1.4em;
	font-weight: bold;
	letter-spacing: -0.02em;
	line-height: 1;
}
.icoTel a > small { display: block; font-size: 0.9rem; font-weight: normal;}
.icoCon a:before,
.icoTel a:before {
	display: inline-block;
	content: "";
	vertical-align: middle;
}
.icoTel a:before {
	width: 0.9em;
	height: 0.9em;
	background: url(../images/ico_tel.svg) no-repeat 50% 50% / contain;
	margin: -2px 4px 0 0;
}
.icoCon a:before,
.icoCon a:after {
	width: 1.5em;
	height: 1em;
	background: no-repeat 50% 50% / contain;
	margin-top: -2px;
	margin-right: 0.4em;
}
.icoCon a:before { background-image: url(../images/ico_email_white.svg);}
.icoCon a:hover:before { background-image: url(../images/ico_email.svg);}

@media screen and (max-width: 896px) {
	.hNav .icoTel { display: none;}
	.txtTel a {
		color: #3ae;
		text-decoration: underline;
		pointer-events: auto;
		cursor: pointer;
	}
	.icoTel a:hover { text-decoration: none;}
}
@media screen and (max-width: 480px) {
	.header .logo img { width: 130px;}
}

/* mv
-------------------------------------------------------------- */

.mv {
	background: url(../images/mv_bg.svg) no-repeat 100% 100%;
	padding: 4% 4% 0;
}
.mv > .inr {
	width: 1240px;
	max-width: 100%;
	background: url(../images/mv.png) no-repeat 100% 100% / contain;
	padding: 0 550px 4% 0;
	margin: 0 auto;
}
.mv p { font-size: var(--fs-m); font-weight: bold;}

@media screen and (max-width: 1366px) {
	.mv {
		background-position: 50% 100%;
		background-size: 110% auto;
	}
}
@media screen and (max-width: 1240px) {
	.mv > .inr { padding-right: 48%; margin: 0 auto;}
}
@media screen and (max-width: 896px) {
	.mv { padding-top: 8%;}
	.mv > .inr {
		background-position: 100% 115%;
		background-size: 34% auto;
		padding-right: 36%;
		padding-bottom: 20%;
	}
	.mv p { margin-top: 2em; margin-right: 5%;}
}
@media screen and (max-width: 480px) {
	.mv { padding: 10% 0 0;}
	.mv > .inr {
		background-position: 108% 100%;
		background-size: 70% auto;
		text-align: center;
		padding: 0 8% 90%;
	}
}

/* content
-------------------------------------------------------------- */

.sec {
	position: relative;
	padding: 5em 4%;
	overflow: hidden;
}
.sec > .inr {
	width: 1240px;
	max-width: 100%;
	margin: 0 auto;
}

.hl1 {
	position: relative;
	font-size: var(--fs-xl);
	text-align: center;
	line-height: 1.2;
	margin: 2em 0 0.5em;
}
.hl1:first-child { margin-top: 0;}
.hl2 {
	font-size: var(--fs-m);
	text-align: center;
	margin: 3em 0 1em;
}
.hl2:first-child { margin-top: 0;}

a.btn, .btn {
	display: inline-block;
	color: var(--color_main);
	background-color: var(--color_white);
	box-shadow:0 2px 6px rgba(0,0,0,0.16);
	font-weight: bold;
	text-decoration: none;
	border: 1px solid var(--color_main);
	border-radius: 4px;
	padding: 0.5em 1em;
	transition: all 0.2s linear;
}
.btn:hover {
	color: var(--color_white);
	background-color: var(--color_point);
}
.btn.typeBlue {
	color: var(--color_white);
	background-color: var(--color_main);
	border-color: transparent;
}
.btn.typeBlue:hover {
	color: var(--color_main);
	background-color: transparent;
	border-color: var(--color_main);
}
.btn.wide {
	width: 360px;
	max-width: 100%;
	border-radius: 10px;
	padding: 1em;
}

@media screen and (max-width: 896px) {
}
@media screen and (max-width: 480px) {
	.sec { padding-top: 3em; padding-bottom: 3em;}
}


/* secFunction */
.secFunction {
	color: var(--color_white);
	background-color: var(--color_main);
}
.secFunction .hl1:before {
	position: absolute;
	bottom: 0.5em;
	display: block;
	content: "";
	width: 100%;
	border-bottom: 1px solid #fff;
}
.secFunction .hl1 > small,
.secFunction .hl1 > span { position: relative; z-index: 1;}
.secFunction .hl1 > small { display: block; font-size: 1.5rem;}
.secFunction .hl1 > span {
	display: inline-block;
	background-color: var(--color_main);
	line-height: 1.2;
	padding: 0 0.4em;
}

.functionList {
	display: flex;
	justify-content: space-between;
	margin-top: 10%;
}
.functionList ul {
	display: flex;
	width: 50%;
	flex-flow: column nowrap;
	gap: 1.5em 0;
	font-weight: bold;
}
.functionList li {
	background-color: var(--color_white);
	color: var(--color_primary);
	font-size: var(--fs-m);
	border-radius: 10px;
	padding: 1em;
}
.functionList li > small {
	display: inline-block;
	background-color: var(--color_main-light);
	color: var(--color_main);
	font-size: 1rem;
	border-radius: 20px;
	padding: 0.1em 1em;
}
.functionList .img { width: 40%;}

@media screen and (max-width: 896px) {
	.functionList {
		flex-direction: column;
		align-items: center;
		gap: 3em;
		margin-top: 6%;
	}
	.functionList ul {
		width: 500px;
		max-width: 100%;
	}
}

/* secFlow */
.flowBox {
	background-color: var(--color_main-light);
	padding: 4%;
}
.flowBox + .flowBox { margin-top: 4%;}
.flowBox .hl2 i { display: inline-block; margin-right: 8px;}
.flowBox .hl2 img { vertical-align: middle; margin-top: -4px;}
.flowBox ol {
	display: flex;
	flex-flow: row wrap;
	gap: 2.5em 4%;
	counter-reset: number 0;
	list-style: none;
	margin: 4% 0 0;
}
.flowBox ol > li {
	position: relative;
	width: 48%;
	background-color: var(--color_white);
	border-radius: 10px;
}
.flowBox ol > li:before {
	position: absolute;
	top: -0.4em;
	left: -0.2em;
	counter-increment: number 1;
	content: counter(number) " ";
	color: var(--color_main-light2);
	font-size: 5em;
	font-weight: bold;
	line-height: 1;
}
.flowBox .photo { margin: 0; padding: 2em;}
.flowBox .photo img { border: 1px solid var(--color_gray-light);}
.flowBox .photo figcaption {
	font-weight: bold;
	text-align: center;
	padding-top: 0.5em;
}

.noteBox {
	background-color: var(--color_main-light2);
	padding: 1em 2em;
	margin-top: 4%;
}
.noteBox dl { margin: 1.5em 0 0;}
.noteBox dt {
	display: inline-block;
	width: 11em;
	background-color: var(--color_white);
	float: left;
	font-size: var(--fs-xs);
	font-weight: bold;
	text-align: center;
	border-radius: 1em;
	padding: 0.2em 1em;
	clear: both;
}
.noteBox dd {
	padding-left: 10.5em;
	padding-bottom: 1em;
}

@media screen and (max-width: 896px) {
	.flowBox ol {
		flex-direction: column;
		align-items: center;
	}
	.flowBox ol > li { width: 600px; max-width: 100%;}
}
@media screen and (max-width: 480px) {
	.noteBox dt {
		float: none;
		margin: 0 auto;
	}
	.noteBox dd {
		padding-left: 10.5em;
		padding-bottom: 1em;
	}
}

/* footer
-------------------------------------------------------------- */

.footCta {
	background-color: var(--color_main);
	text-align: center;
}
.footCta dt {
	color: var(--color_white);
	font-size: var(--fs-m);
	font-weight: bold;
}
.footCta dd { margin-top: 1em;}
.footCta ul {
	display: inline-flex;
	gap: 1em;
	padding: 0;
	margin: 0 auto;
}
.footCta .txtTel { color: var(--color_white);}
.footCta .txtTel a {
	color: var(--color_white);
	font-size: var(--fs-m);
	font-weight: bold;
}
.footCta .txtTel a:before {
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	content: "";
	background: url(../images/ico_tel_white.svg) no-repeat 50% 50% / contain;
	vertical-align: middle;
	margin: -2px 0.4em 0 0;
}

.footLink {
	text-align: center;
	padding-top: 2em;
}
.fLink > li {
	display: inline-block;
	padding: 0 1em;
}
.fLink > li + li { border-left: 1px solid var(--color_primary);}
.fLink > li a { color: var(--color_primary);}
.fLink > li a:hover {
	color: var(--color_main);
	text-decoration: none;
}

.copyright { text-align: center;}
.copyright a { color: var(--color_primary);}
.copyright a:hover {
	color: var(--color_main);
	text-decoration: none;
}

@media screen and (max-width: 896px) {
	.footCta dd { margin-top: 2em;}
	.footCta ul {
		display: flex;
		width: 100%;
		gap: 4%;
	}
	.footCta ul > li { width: 48%;}
	.footCta ul .btn { width: 100%;}
}
@media screen and (max-width: 480px) {
	.footCta ul {
		flex-direction: column;
		align-items: center;
		gap: 1em;
	}
	.footCta ul > li { width: 80%;}
	.footCta ul .btn { width: 100%;}
}