@charset "utf-8";

html {
	/*overflow-y: scroll;*/
}

body, div, dl, dt, dd, ul, ul li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td,
section, nav, article, aside, hgroup, header, address,
figure, figcaption {
	margin: 0;
	padding: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th {
	text-align: left;
}
q:before ,q:after {
	content: '';
}
object, embed {
	vertical-align: top;
}
hr, legend {
	display: none;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}
img, abbr, acronym, fieldset {
	border: 0;
}
img {
	vertical-align: top;
	-ms-interpolation-mode: bicubic;
}
ul li {
	list-style-type: none;
}

/*
 body
=====================================================================================*/
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 100;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 200;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 300;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 400;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic bold");
	font-weight: bold;
}
@font-face {
	font-family: "Avenir";
	src: local("Avenir Medium");
	font-weight: 100;
}

@font-face {
	font-family: "Avenir";
	src: local("Avenir bold");
	font-weight: bold;
}
@font-face {
	font-family: "Verdana";
	src: local("Verdana Medium");
	font-weight: 100;
}

@font-face {
	font-family: "Verdana";
	src: local("Verdana bold");
	font-weight: bold;
}
body {
	width: 100%;
	background: url(../images/bg_top.jpg) no-repeat fixed center;
	background-size: cover;
 	color:#333;
	font-size:14px;
	line-height:1.6;
}
body::before {
	content: "";
	background: url(../images/bg_top.jpg) no-repeat fixed center;
	background-size: cover;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
}
div.wrapper {
	width: 100%;
	margin: 0 auto;
}
a {
 	color:#fff;
	text-decoration:none;
	cursor:pointer;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}
a:hover {
 	color:#333;
	text-decoration:underline;
}
.inview, .inview li:nth-of-type(2),.inview li:nth-of-type(3),.inview li:nth-of-type(4),.inviewBtn {
	opacity: 0;
}
.inview + .inview ,.inview li:nth-of-type(1){animation-delay: 0.8s; }
.inview li:nth-of-type(2){animation-delay: 1.0s; }
.inview li:nth-of-type(3) {animation-delay: 1.2s; }
.inview li:nth-of-type(4) {animation-delay: 1.4s; }

/* PC向けおよび大型タブレット向けのレイアウトの指定：769px～ */
@media only screen and (min-width: 768px){
	body {
	font-size:16px;
	line-height:1.6;
	}
div.wrapper {
	width: 100%;
	}
}

/*
 common
=====================================================================================*/

.sp{
	display:block;
}
.pc{

	display:none;
}
img {
	zoom: 0.5;
}
img {
	max-width: 100%;
	height: auto;
	zoom: 1;
}
.is_contents{
	width: 100%;
 	font-family: "Avenir", Avenir,Verdana,'游ゴシック体', 'Yu Gothic', YuGothic;
}
.ttl{
	margin-bottom: 60px;
	padding-top: 100px;
	font-size: 24px;
	font-weight: bold;
	position: relative;
	text-decoration: none;
	text-align: center;
	color: #fff;
	}
.ttl::after {
	position: absolute;
	bottom: -4px;
	left: 50%;
	margin-left: -50px;
	content: '';
	width: 100px;
	height: 2px;
	background: #fff;
}



/* PC向けおよび大型タブレット向けのレイアウトの指定：769px～ */
@media only screen and (min-width: 768px){
	.sp{
	display:none;
	}
	.pc{
		display:block;
	}
	.is_contents{
		width: 100%;
		margin: 0 auto;
		padding: 0 20px;
		box-sizing: border-box;
	}
	a:hover img{
		opacity: 0.8;
	}
	.ttl{
		font-size: 30px;
	}
}
@media only screen and (min-width: 1080px){
	.is_contents{		
		width: 1080px;
	}
}
/*
 header
=====================================================================================*/
#header{
	overflow: hidden;
	position: fixed;
	z-index: 2;
}
#header .is_contents{

}
#header h1.logo{
	float: left;
	width: 63%;
	margin:8% 0 5.06% 4.26%;
}
#header nav{
	display: none;
}


/* PC向けおよび大型タブレット向けのレイアウトの指定：769px～ */
@media only screen and (min-width: 768px){
	#header .is_contents{
	overflow: hidden;
	position: fixed;
	left: -50%;
	right: -50%;
	z-index: 2;
	}
	#header h1.logo{
	width: 269px;
	margin:30px 0;
	}
	#header nav{
	display: block;
	float: right;
	}
	#header li{
	display: inline-block;
	font-size: 14px;
	padding-left: 40px;
	padding-top: 40px;
	}
	#header li a {
	position: relative;
	text-decoration: none;
	color: #fff;
	}
	#header li a::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #fff;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
	}
	#header li a:hover::after {
	transform: scale(1, 1);
	}
}

/*
 main
=====================================================================================*/
#main{
	padding-top: 150px;
	min-height: 600px;
	text-align: center;
	color: #fff;
	box-sizing: border-box;
}
#main h1{
	padding-bottom: 30px;
	font-size: 30px;
	font-weight: bold;
}
#main p{
	padding-bottom: 15px;
	font-size: 18px;
}
#main h2{
	font-size: 12px;
}


/* PC向けおよび大型タブレット向けのレイアウトの指定：769px～ */
@media only screen and (min-width: 768px){
	#main{
		padding-top: 310px;
		min-height: 800px;
		text-align: center;
		color: #fff;
		box-sizing: border-box;
	}
	#main h1{
		padding-bottom: 30px;
		font-size: 60px;
		font-weight: bold;
	}
	#main p{
		padding-bottom: 15px;
		font-size: 24px;
	}
	#main h2{
		font-size: 13px;
	}

}

/*
 section01
=====================================================================================*/
#section01{
	background: #f1d43b;
	min-height: 800px;
	padding-bottom: 40px;
}
#section01 .ttl{
	color: #333;
}
#section01 .ttl::after{
	background: #333;
}

#section01 li{
	margin: 0 auto 20px;
	padding-top: 20px;
	width: 86%;
	border-radius: 3px;
	box-shadow: 0px 8px 8px -5px rgba(0,0,0,0.2);
	color: #fff;
}
#section01 li:nth-of-type(1){
	background: -moz-linear-gradient(top, #f29c99 0%, #f5576c 100%); 
	background: -webkit-linear-gradient(top, #f29c99 0%, #f5576c 100%);
	background: linear-gradient(to bottom, #f29c99 0%, #f5576c 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f29c99', endColorstr='#f5576c',GradientType=0 ); 
}
#section01 li:nth-of-type(2){
	background: -moz-linear-gradient(top, #fbc2eb 0%, #a18cd1 100%); 
	background: -webkit-linear-gradient(top, #fbc2eb 0%, #a18cd1 100%);
	background: linear-gradient(to bottom, #fbc2eb 0%, #a18cd1 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbc2eb', endColorstr='#a18cd1',GradientType=0 ); 
}
#section01 li:nth-of-type(3){
	background: -moz-linear-gradient(top, #92fe9d 0%, #00c9ff 100%); 
	background: -webkit-linear-gradient(top, #92fe9d 0%, #00c9ff 100%);
	background: linear-gradient(to bottom, #92fe9d 0%, #00c9ff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92fe9d', endColorstr='#00c9ff',GradientType=0 ); 
}
#section01 li:last-child{
	background: -moz-linear-gradient(top, #7dd3e9 0%, #347dd5 100%); 
	background: -webkit-linear-gradient(top, #7dd3e9 0%, #347dd5 100%);
	background: linear-gradient(to bottom, #7dd3e9 0%, #347dd5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7dd3e9', endColorstr='#347dd5',GradientType=0 ); 
}
#section01 li span{
	margin: 0 auto 20px;
	width: 85px;
	height: 85px;
	background: #fff;
	border-radius: 100px;
	display: block;
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	vertical-align: top;
	line-height: 85px;
}
#section01 li:nth-of-type(1) span{
	color: #f5576c;
}
#section01 li:nth-of-type(2) span{
	color: #a18cd1;
}
#section01 li:nth-of-type(3) span{
	color: #00c9ff;
}
#section01 li:last-child span{
	color: #347dd5;
}
#section01 li h3{
	text-align: center;
	border-bottom: 1px sold #fff;
	font-weight: bold;
	width:100%;
	position: relative;
}
#section01 li h3::after {
	position: absolute;
	bottom: -4px;
	left: 50%;
	margin-left: -50px;
	content: '';
	width: 100px;
	height: 1px;
	background: #fff;
}
#section01 li p{
	padding: 20px 20px 60px;
	font-size: 14px;

}

/* PC向けおよび大型タブレット向けのレイアウトの指定：769px～ */
@media only screen and (min-width: 768px){
	#section01{
		padding-bottom: 0;
	}
	#section01 ul{
		display: flex;
	}
	#section01 li{
		margin-right: 0.83%;
		padding-top: 0;
		width: 24.37%;
	}
	#section01 li:last-child{
		margin-right: 0;
	}
	#section01 li span{
		margin: 35px auto 20px;
	}
}

/*
 section02
=====================================================================================*/
#section02{
	background: #040000; 
	background: -moz-linear-gradient(right, #00f2fe 0%, #4facfe 100%); 
	background: -webkit-linear-gradient(right, #00f2fe 0%, #4facfe 100%);
	background: linear-gradient(to right, #00f2fe 0%, #4facfe 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f2fe', endColorstr='#4facfe',GradientType=0 ); 
	min-height: 800px;	
}
#section02 li{
	position: relative;
	width: 86%;
	margin: 0 auto;
	margin-bottom: 20px;
	box-shadow: 0px 8px 8px -5px rgba(0,0,0,0.2);
}
#section02 li span{
	background: #4ba6f4;
	position: absolute;
	top: 5px;
	left: 0;
	padding: 3px 10px;
	font-size: 10px;
	color: #fff;	
}
#section02 p{
	color: #fff;
	text-align: center;
}
#section02 div{
	padding: 20px 0 60px;
	text-align: center;
}
.btn_clr {
	position: relative;
	display: inline-block;
	padding: .5em 4em;
	border: 2px solid #fff;
	border-radius: 3px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	outline: none;
	transition: all .2s;
}
.btn_clr::before,
.btn_clr::after {
	position: absolute;
	top: -2px;
	left: -2px;
	z-index: 2;
	content: '';
	width: 0;
	height: 0;
	border: 2px solid transparent;
	border-radius: 3px;
}
.btn_clr:hover {
	color: #333;
	text-decoration: none;
}
.btn_clr:hover::before,
.btn_clr:hover::after {
	width: 100%;
	height: 100%;
}
.btn_clr:hover::before {
	border-top-color: #333;
	border-right-color: #333;
	transition: width .3s, height .3s .3s;
}
.btn_clr:hover::after {
	border-bottom-color: #333;
	border-left-color: #333;
	transition: height .3s, width .3s .3s;
}

/* PC向けおよび大型タブレット向けのレイアウトの指定：769px～ */
@media only screen and (min-width: 768px){
	#section02 ul{
		overflow: hidden;
	}
	#section02 li{
		float: left;
		width: 49.4%;
		margin-bottom: 60px;
	}
	#section02 li:first-child{
		margin-right: 0.6%;
	}
}



/*
 section03
=====================================================================================*/
#section03{
	background: #dadada; 
	padding-bottom: 60px;
}
#section03 .ttl{
	color: #333;
}
#section03 .ttl::after{
	background: #333;
}
#section03 dl{
	width: 86%;
	margin: 0 auto;
	font-size: 14px;
	overflow: hidden;
}
#section03 dt{
	background: #fff;
	padding: 12px;
	width: 100%;
	font-weight: bold;
	border-top: 2px solid #f9f9f9;
	border-bottom: 3px solid #000;
	box-sizing: border-box;
}
#section03 dd{
	background: #fff;
	padding: 12px;
	width: 100%;
	border-top: 2px solid #f9f9f9;
	border-bottom: 3px solid #fff;
	box-sizing: border-box;
}
#section03 a {
	display: inline-block;
	position: relative;
	text-decoration: none;
	color: #333;
}
#section03 a::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #333;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
}
#section03 a:hover::after {
	transform: scale(1, 1);
}

/* PC向けおよび大型タブレット向けのレイアウトの指定：769px～ */
@media only screen and (min-width: 768px){
	#section03{
		padding-bottom: 120px;
		min-height: 800px;
	}
	#section03 dl{
		width: 74.074%;
	}
	#section03 dt{
		clear: both;
		float: left;
		padding: 20px 20px 15px 20px;
		width: 18.75%;
	}
	#section03 dd{
		float: left;
		padding: 20px 20px 15px 100px;
		width: 81.25%;
	}
}

/*
 footer
=====================================================================================*/
#footer{
	background: #000;
	padding-bottom: 30px;
	color: #fff;
	text-align: center;
}
#footer h2 + p{
	margin-bottom: 50px;
}
#footer ul{
	margin-bottom: 100px;
}
#footer li{
	margin-bottom: 50px;
}
#footer li:first-child{
	font-size: 30px;
	font-weight: bold;
}
#footer li:last-child{
	font-size: 18px;
}
#footer small{
	font-size: 12px;
}
.btn {
	position: relative;
	display: inline-block;
	padding: .5em 2em;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	transition: .3s;
}
.btn:hover {
	color: #000;
	text-decoration: none;
}
.btn::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: '';
	background: #fff;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
}
.btn:hover::before {
	transform-origin: left top;
	transform: scale(1, 1);
}


/* PC向けおよび大型タブレット向けのレイアウトの指定：769px～ */
@media only screen and (min-width: 768px){
	#footer{
		padding-bottom: 50px;
	}
	#footer ul{
		margin-bottom: 150px;
	}
	#footer li:first-child{
		font-size: 48px;
	}
	.btn {
		padding: .5em 4em;
	}
	#footer li:first-child a[href^="tel:"] {
		pointer-events: none;
	}
}

#PageTopBtn {
position: fixed; /*ボタンの配置場所を固定*/
bottom: -30px; /*下からのボタンの配置場所を指定*/
right: -50%; /*右からのボタンの配置場所を指定*/
left:50%;
margin-left: -30px;
margin-bottom: 30px;
}
#PageTopBtn a {
display: block; /*配置の調整*/
 width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #000;

}
#PageTopBtn a:hover {
text-decoration: none; 
}



/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	background:#eee;
	text-align:center;
	color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo svg{
    width:300px;
}
/*=============== SVGアニメーション内の指定 =================*/

/*アニメーション前の指定*/
#mask path {
		fill-opacity: 0;/*最初は透過0で見えない状態*/
		transition: fill-opacity .5s;/*カラーがつく際のアニメーション0.5秒で変化*/
		fill: none;/*塗りがない状態*/
		stroke: #333;/*線の色*/
	}

/*アニメーション後に.doneというクラス名がで付与された時の指定*/
#mask.done path{
	  fill: #333;/*塗りの色*/
	  fill-opacity: 1;/*透過1で見える状態*/
	  stroke: none;/*線の色なし*/
	}