@charset "UTF-8";
/* CSS Document */

/*************************************************************************************************************************
* reset
*************************************************************************************************************************/
html{ height:100%; font-size: 14px; color: #222; line-height: 1.8; letter-spacing: 1px; }
body{ height:100%; margin:0; padding:52px 0 0; overflow-x: hidden; font-family: "Noto Sans", "Noto Sans CJK JP", sans-serif; word-break:break-all; -webkit-text-size-adjust:100%; top: 0!important; }
body.fixed{ position: fixed; top: 0; left:0;}

img{ width:100%; max-width:100%; height:auto; border:0; font-size:0; line-height:0; vertical-align:bottom; }
p{ margin:0; padding:0; }
a{ color: #222; text-decoration:none; outline:none; }
h1, h2, h3, h4, h5, h6{ margin:0; padding:0; font-weight: normal; }
ul, dl, dt, dd{ margin:0; padding:0; }
li{ margin:0; padding:0; list-style:none; }
table{ border:0; border-collapse:collapse; border-spacing:0; }
th{ text-align:left; }
header, nav, article, aside, section, footer{ display:block; }

select{ border:#bdbdbd 1px solid; -webkit-appearance: none; -moz-appearance:none; appearance: none; outline: none; }
select::-ms-expand {display: none;}

*{ box-sizing:border-box; }

/*
@font-face {
	font-family: "myriad";
	src: url('img/font/myriad-pro.woff2') format('woff2'),
	url('img/font/myriad-pro.woff') format('woff'),
	url('img/font/myriad-pro.ttf') format('truetype');
}
*/


/*************************************************************************************************************************
* デフォルト：640px以下用の記述
*************************************************************************************************************************/
.wrap{ max-width: 1120px; margin:0 auto; padding:60px 0 80px; }
.red,
.red a{ color: #ff0000!important;}


/* br */
br.pc,
br.tbpc,
br.sp375{ display: none;}


/* btn */
.btn{ display: block; background-size: 200% 100%!important; width: 200px; height: 48px; padding-top: 11px; margin:50px auto 0; font-weight: bold; text-align: center; border-radius: 4px;}

.orange{
	background: #fc8300;
	background-image: -webkit-linear-gradient(left, transparent 50%, #fc6b00 50%);
	background-image: linear-gradient(to right, transparent 50%, #fc6b00 50%);
	color: #fff;
}
.white,
.greenBorder{
	background: #fff;
	background-image: -webkit-linear-gradient(left, transparent 50%, #7D7BFE 50%);
	background-image: linear-gradient(to right, transparent 50%, #7D7BFE 50%);
	color: #7D7BFE;
}
.greenBorder{ border: #7D7BFE 1px solid; }

.whiteBorder{
	background-image: -webkit-linear-gradient(left, transparent 50%, #fff 50%);
	background-image: linear-gradient(to right, transparent 50%, #fff 50%);
	color: #fff;
}
.whiteBorder{ border: #fff 1px solid;}

.blank,
.blank02{ padding-right: 18px; position: relative; }
.blank:before,
.blank02:before{ content: ""; display: block; background-size: cover!important; width: 10px; height: 10px; position: absolute; top: 4px; right: 0;}

.blank:before{ background: url("img/icon/icon_blank02.svg")no-repeat;}
.blank02:before{ background: url("img/icon/icon_blank.svg")no-repeat;}


/* tit */
.secTit{ margin-bottom: 40px; font-size: 24px; text-align: center; letter-spacing: 2px; }
.leftTit{ padding-left: 20px; font-size: 18px; font-weight: bold; border-left:#7D7BFE 3px solid;}


/* txt */
.mTxt{ color: #666; text-align: center; }
.mTxt a{ color: #666; text-decoration: underline;}

.attention{ padding:0 0 0 1.1rem; position: relative;}
.attention:before{ content: "※"; display: block; position: absolute; top: 0; left: 0;}

.bold{ font-weight: bold;}


/* header
**********************************************************************/
header{ background: #fff; width: 100%; height: 55px; position: fixed; top: 0; left: 0; z-index: 1000; }
header .inner{ background: #fff; height: 100%; padding:10px 20px; position: relative; z-index: 2; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.07);}

header .logo{ width: 150px; margin-top: 4px; float: left; }
header .menuBtn{ background: #7D7BFE; width: 55px; height: 100%; position: absolute; top: 0; right: 0; }

header .menu{ background: rgba(255,255,255,1); width: 100%; height: 100vh; padding-bottom: 30px; position: absolute; top: -5555px; left: 0; }
header .menu a{ font-size: 13px; text-align: center; border-top: #e5e5e5 1px solid; }

header nav li a{ display: block; height: 65px; padding-top: 20px; }
header nav li:first-child a{ border-top: none;}

header .other ul{ display:flex; border-bottom: #e5e5e5 1px solid; }
/*header .other li{ width: 50%;}*/
header .other li{ width: 100%;}

header .other li a{ display: block; height: 55px; padding-top: 16px; color: #7D7BFE; border-left: #e5e5e5 1px solid; }
header .other li:first-child a{ border-left: none;}

header .signup{ display: block; background-size: 200% 100%!important; width: 240px; height: 55px; padding:20px 20px 0; margin: 40px auto 0; font-weight: bold; line-height: 1; border-radius: 4px; }

.menu-trigger,
.menu-trigger span { display: inline-block; transition: all .4s; }
.menu-trigger { position: relative; width: 50px; height: 44px; }
.menu-trigger span { background: #fff; width: 24px; height: 2px; margin-left:-12px; position: absolute; left: 50%; border-radius: 2px; }

.menu-trigger span:nth-of-type(1) { top: 18px; }
.menu-trigger span:nth-of-type(2) { top: 50%; margin-top: -1px; }
.menu-trigger span:nth-of-type(3) { bottom: 18px; }

.menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(8px) rotate(-45deg); transform: translateY(8px) rotate(-45deg); }
.menu-trigger.active span:nth-of-type(2) { opacity: 0; }
.menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-9px) rotate(45deg); transform: translateY(-9px) rotate(45deg); }


/* breadcrumb
**********************************************************************/
.breadcrumb{ display: none; background:linear-gradient(90deg,#ededed 0%,#ededed 50%,#f6f6f6 50%,#f6f6f6 100%); height: 30px; padding:0 20px; }
.breadcrumb .wrap{ display:flex; background: #f6f6f6; height: 100%; padding:0; }
.breadcrumb .home{ background: url("img/breadcrumb_img01.png") no-repeat left 9px,#ededed; background-size: 12px auto; position: relative; }
.breadcrumb .home:before{ content: ""; display: block; width: 0; height: 0; position: absolute; top: 0; right: -25px; border: 15px solid transparent; border-left: 10px solid #ededed; }

.breadcrumb a,
.breadcrumb .point{ display: block; height: 100%; padding: 10px 20px 0;font-size: 10px; color: #888; line-height: 1; }
.breadcrumb .point{ color: #7D7BFE;}

.breadcrumb ul{ display:flex; }
.breadcrumb li{ position: relative;}
.breadcrumb li:before{ content: ""; display: block; background: #ccc; width: 1px; height: 10px; margin-top:-5px; position: absolute; top: 50%; right: 0;}
.breadcrumb li:last-child:before{ display: none;}


/* submain
**********************************************************************/
.submain{ padding:50px 10px 44px; position: relative; text-align: center; border-bottom: #eee 1px solid;}
.submain:before{ content: ""; display: block; background: #7D7BFE; width: 100px; height: 3px; margin-left: -50px; position: absolute; bottom: 0; left: 50%;}

.submain h1{ font-size: 28px;}
.submain > span{ display: table; margin:0 auto; font-family: "myriad", sans-serif; font-size: 16px; font-weight: bold; color: #7D7BFE;}


/* entry
**********************************************************************/
#entry{ text-align: center;}
#entry .btnArea{ background: #7D7BFE; padding:60px 10px;}
#entry .btnArea .secTit{ margin-bottom: 30px; font-weight: bold; color: #fff;}

#entry .btnArea ul{ display:flex; justify-content: center;}
#entry .btnArea li{ width: 50%; max-width: 300px;}
#entry .btnArea li:last-child{ margin-left: 15px;}

#entry .btnArea .btn{ display: block; width: 100%; height: 54px; margin:0; padding-top: 14px; font-size: 14px; font-weight: bold; text-align: center; border-radius: 4px;}
#entry .btnArea .white{
	background: none;
	background-image: -webkit-linear-gradient(left, transparent 50%, #fff 50%);
	background-image: linear-gradient(to right, transparent 50%, #fff 50%);
	padding-top: 12px;
	color: #fff;
	border: #fff 2px solid;
}

#entry .other a{ display: block; background-size: 200% 100%!important; height: 100%; padding:30px 10px 30px 56px; position: relative; color: #fff; text-align: left;}
#entry .other li:nth-child(1) a{
	background: #052733;
	background-image: -webkit-linear-gradient(left, transparent 50%, #7D7BFE 50%);
	background-image: linear-gradient(to right, transparent 50%, #7D7BFE 50%);
}
#entry .other li:nth-child(2) a{
	background: #05232e;
	background-image: -webkit-linear-gradient(left, transparent 50%, #7D7BFE 50%);
	background-image: linear-gradient(to right, transparent 50%, #7D7BFE 50%);
}
#entry .other li:nth-child(3) a{
	background: #041f29;
	background-image: -webkit-linear-gradient(left, transparent 50%, #7D7BFE 50%);
	background-image: linear-gradient(to right, transparent 50%, #7D7BFE 50%);
}

#entry .other a:before{ content: ""; display: block; background-size: contain!important; width: 32px; height: 24px; position: absolute; top: 34px; left: 10px; }
#entry .other li:nth-child(1) a:before{ background: url("img/entry_other01.png") no-repeat;}
#entry .other li:nth-child(2) a:before{ background: url("img/entry_other02.png") no-repeat;}
#entry .other li:nth-child(3) a:before{ background: url("img/entry_other03.png") no-repeat;}

#entry .other h3{ font-size: 16px; font-weight: bold;}
#entry .other p{ margin-top: 10px; }


/* footer
**********************************************************************/
footer{ background: #041b24;}
footer .wrap{ padding:0 0 30px;}

footer,
footer a{ color: #fff;}
.spfooter li,
.ftnav > li,
.ftBottom .menu li{ border-top: #364950 1px solid; }

.spfooter a{ display: block; height: 55px; padding:16px 20px 0; font-size: 13px;}

.ftnav{ display: none; }
.ftnav > li{ width: 25%;}
.ftnav h3{ font-size: 14px; color: rgba(255,255,255,0.2);}

.ftnav .inner{ padding: 2px 10px 4px 16px; margin-top: 16px; border-left: rgba(255,255,255,0.2) 1px solid;}
.ftnav .inner li{ margin-top: 10px; }
.ftnav .inner li:first-child{ margin-top: 0;}

.ftnav .inner a{ font-size: 12px; letter-spacing: 0;}

.ftBottom .menu{ display:flex; flex-wrap:wrap; border-bottom: #364950 1px solid;}

.ftBottom .menu li{ width: 50%;}
.ftBottom .menu li:nth-child(even){ border-left: #364950 1px solid; }
.ftBottom .menu li:last-child{ width: 100%;}

.ftBottom .menu a{ display: block; height: 40px; padding-top: 9px; font-size: 11px; text-align: center; letter-spacing: 0;}
.ftBottom .logo{ display: block; width: 150px; margin:28px auto 24px;}

.ftBottom .sns{ display:flex; justify-content: center; margin-top: 30px;}
.ftBottom .sns li{ width: 24px; }
.ftBottom .sns li:last-child{ margin-left: 15px;}

footer .copy{ font-size: 9px; text-align: center;}


/* introduction（price,service）
**********************************************************************/
#introduction{ padding: 0 10px;}
#introduction ul{ flex-wrap:wrap; justify-content: space-between; margin-top: -10px;}
#introduction li{ background-size: 40px!important; margin-top: 10px; padding:22px 20px 22px 80px; border: #eee 2px solid;}
#introduction li:last-child{ display: none; opacity:0;}

#introduction li:nth-child(1){ background: url("service/img/introduction_img01.png") no-repeat 20px 28px;}
#introduction li:nth-child(2){ background: url("service/img/introduction_img02.png") no-repeat 20px 28px;}
#introduction li:nth-child(3){ background: url("service/img/introduction_img03.png") no-repeat 20px 28px;}
#introduction li:nth-child(4){ background: url("service/img/introduction_img04.png") no-repeat 20px 28px;}
#introduction li:nth-child(5){ background: url("service/img/introduction_img05.png") no-repeat 20px 28px;}

#introduction h3{ margin-bottom:4px; font-size: 14px; font-weight: bold;}
#introduction h3 span{ font-size: 12px; font-weight: normal; }
#introduction p{ font-size: 12px; letter-spacing: 0;}


@media print, screen and (max-width:350px){
	.secTit{ font-size: 20px!important;}
}

@media print, screen and (min-width:375px) {
	br.sp375{ display: block;}
	br.sp375max{display: none;}
}


/*************************************************************************************************************************
* 641px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:641px){
	.secTit{ font-size: 28px; }


	/* br */
	br.sp{ display: none;}
	br.tbpc{ display: block;}


	/* introduction
	**********************************************************************/
	#introduction ul{ display:flex; margin-top: -20px; }
	#introduction li{ width: 32%; margin-top: 20px; }
	#introduction li:last-child{ display: block;}
}

@media print, screen and (min-width:769px) {
	body{ padding-top:81px;}
	header { top: 29px;}
}


/*************************************************************************************************************************
* 980px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:980px) {
	body.fixed{ position: static;}
	.wrap{ padding:84px 0 100px;}

	/* br */
	br.pc{ display: block;}

	/* btn */
	.btn,
	header .signup,
	#entry .other a{
		-webkit-transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
		transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
	}
	.btn:hover,
	header .signup:hover,
	#entry .other a:hover{ background-position: -100% 100%!important; }

	.white:hover,
	.greenBorder:hover{ color: #fff;}
	.whiteBorder:hover{ color: #7D7BFE;}

	.btn:hover .blank:before{ background: url("img/icon/icon_blank.svg") no-repeat;}
	.btn:hover .blank02:before{ background: url("img/icon/icon_blank02.svg")no-repeat;}


	/* txt */
	.mTxt a:hover{text-decoration: none;}


	/* header
	**********************************************************************/
	header{ height: 52px; padding:10px 20px; overflow: hidden; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.07);}
	header .inner{ padding:0; float: left; box-shadow:none;}

	header .logo{ width: 130px; margin-top: 2px; }
	header .menuBtn{ display: none;}

	header .menu{ background: none; width: auto; height: auto; padding-bottom: 0; position: static; }
	header .menu a{ font-size: 12px; border-top: none; }

	header nav{ float: left;}
	header nav ul{ display:flex; margin-top: 6px;}

	header nav li{ margin:0 0 0 15px;}
	header nav li a{ height: auto; padding-top: 0; position: relative; }

	header nav li span{ background: #7D7BFE; width: 100%; height: 2px; opacity:0; position: absolute; left: 0; bottom: -15px; border-radius: 2px; transition: opacity 0.3s ease-in-out 0s;}
	header nav li a:hover span{ opacity:1;}

	header .other{ display:flex; float: right; }
	header .other a{ font-size: 12px;}

	header .other ul{ margin-top: 5px; border-bottom: none;}
	header .other li{ width: auto;}

	header .other li a{ height: auto; padding:0 10px; border-left: #eee 1px solid; transition: color 0.3s ease-in-out 0s;}
	header .other li a:hover{ color: #27c4c4;}

	header .signup{ width: auto; height: auto; padding:10px 20px; margin:0; }


	/* breadcrumb
	**********************************************************************/
	.breadcrumb{ display: block;}
	.breadcrumb a:hover{ text-decoration: underline;}


	/* entry
	**********************************************************************/
	#entry .btnArea{ padding:70px 10px 80px;}
	#entry .btnArea li:last-child{ margin-left: 40px;}

	#entry .btnArea .btn{ height: 64px; padding-top: 16px; font-size: 18px; }
	#entry .btnArea .white{ padding-top: 14px;}
	#entry .btnArea .white:hover{ color: #7D7BFE;}

	#entry .other{ display:flex;}
	#entry .other li{ width: 50%; }

	#entry .other a{ padding:134px 10px 78px; text-align: center;}
	#entry .other a:before{ margin-left: -16px; left: 50%; top: 80px; }

	#entry .other h3{ font-size: 20px; }
	#entry .other p{ margin-top: 20px;}


	/* footer
	**********************************************************************/
	footer{ padding:0 10px;}
	footer .wrap{ padding:90px 0 40px;}
	footer a:hover{ text-decoration: underline;}

	.spfooter{ display: none;}
	.ftnav > li,
	.ftBottom .menu li { border-top:none;}

	.ftnav{ display:flex; }

	.ftBottom{ display:flex; justify-content: space-between; width: 100%; margin: 76px 0 120px; padding-left: 100px; position: relative;}
	.ftBottom .menu{ display:flex; border-bottom: none;}

	.ftBottom .menu li{ width: auto;  margin-left:30px;}
	.ftBottom .menu li:first-child{ margin-left: 0;}
	.ftBottom .menu li:nth-child(even){ border-left:none;}
	.ftBottom .menu li:last-child{ width: auto;}

	.ftBottom .menu a{ font-size: 10px;}
	.ftBottom .logo{ margin:0;}

	.ftBottom .sns{ margin-top: 0; position: absolute; top: 4px; left: 0;}
	.ftBottom .sns a{ transition: opacity 0.3s ease-in-out 0s;}
	.ftBottom .sns a:hover{ opacity: 0.8;}

	footer .copy{ font-size: 10px;}
}


@media print, screen and (min-width:1080px){
	/* header
	**********************************************************************/
	header{ padding:10px 20px; }

	header nav li{ margin:0 0 0 24px;}
	header .menu a{ font-size: 13px; }
	header nav ul{ margin-top: 4px;}

	header .other li a{ padding:0 14px;}
}


@media print, screen and (min-width:1300px){
	/* header
	**********************************************************************/
	header{ padding:10px 40px; }
	header .logo{ width: 150px;}

	header nav li{ margin:0 0 0 34px;}
	header .other li a{ padding:0 18px;}
}