@charset "UTF-8";

body,div,pre,p,blockquote,form,fieldset,input,textarea,select,option,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,table,th,td,embed,object{margin: 0;padding: 0;vertical-align: baseline;}h1,h2,h3,h4,h5,h6 {font-style: normal;font-weight: normal;font-size: 100%;}table{border-spacing:0;}* html table{border-collapse:collapse;}*:first-child+html table{border-collapse:collapse;}caption,th{text-align:left; font-weight:normal;}table,th,td,img {border:0;}img,input{vertical-align:top;}q:before,q:after{content:'';}strong,em,address{font-weight:normal;font-stretch:normal;font-style:normal;}ul{list-style:none;}article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}

/* 基本設定 */
html {
	overflow-x: hidden;
	overflow-y: scroll;	
	min-height: 100vh;
	height: -webkit-fill-available;
}

body {
	word-break: break-all;
	min-height: 100vh;
	min-height: -webkit-fill-available;
	line-height: 1.5;
	background: #f6f6f6
}
img { 
	max-width: 100%;
	height: auto; 
}

/* レスポンシブ */
@media screen and (max-width:767px) {
	.pc,.pctb,.tb { display: none!important; } 
}
@media screen and (min-width:768px) and ( max-width:1024px) {
	.sp,.pc { display: none!important; }
}
@media screen and (min-width:1025px) {
	.sp,.sptb,.tb { display: none!important; }
}

.hover input:hover,
.hover a:hover {
	opacity: 0.7;
}

/*--- fadein ---*/
.fadein {
	opacity : 0.1;
}

.fadeinB {
	transform : translate(0, 100px);
	transition : all 500ms;	
}

.fadeinT {
	transform : translate(0, -100px);
	transition : all 500ms;	
}

.fadeinL {
	transform : translate(100px);
	transition : all 500ms;	
}

.fadeinR {
	transform : translate(-100px);
	transition : all 500ms;	
}

.fadeinC {
	transform : translate(0);
	transition : all 500ms;	
}

.fadein.scrollin {
	opacity : 1;
	transform : translate(0px, 0px);
}

/*=========================================================
wrapper
=========================================================*/

#wrapper {
	background: #fff;
	margin: 0 auto;
}
	
/*=========================================================
header
=========================================================*/

#header {
	padding: 0 30px;
	height: 78px;
	background-size: auto 78px;
	background-image:
		url(../images/hdr_l.png),
		url(../images/hdr_r.png),
		url(../images/hdr_bg.png);
	background-repeat:
		no-repeat,
		no-repeat,
		repeat-x;
	background-position:
		left,
		right,
		center;
	position: relative;
}

#header ul {
	position: absolute;
	top: 50%;
	right: 40px;
	display: flex;
	margin-top: -15px;
}

#header li {
	width: 30px;
	height: 30px;
	margin-left: 10px;
}

@media screen and (max-width:700px) {
	#header { 
		height: 40px;
		background-size: auto 40px;
	}
	
	#header h1 img {
		width: auto;
		height: 40px;
	}
	
	#header ul {
		position: absolute;
		top: 50%;
		right: 15px;
		display: flex;
		margin-top: -10px;
	}

	#header li {
		width: 20px;
		height: 20px;
		margin-left: 5px;
	}
}

/*=========================================================
main
=========================================================*/

.fv {
	text-align: center;
	height: 510px;
	width: 100%;
	background-image: 
		url("../images/main_left.png"),
		url("../images/main_right.png"),
		url("../images/main_bg.jpg");
	background-position: 
		left -10px center,
		right 10px center,
		center center;
	background-repeat:
		no-repeat,
		no-repeat,
		repeat-x;
	background-size: 
		auto 90%,
		auto 90%,
		auto 100%;
}

.fv img {
	width: 600px;
	height: auto;
}

.cs {
	text-align: center;
}

.rs {
	text-align: center;
	padding: 50px 0;
}

@media screen and (max-width:700px) {

	.fv {
		text-align: center;
		height: 300px;
		width: 100%;
		background-image: 
			url("../images/main_left.png"),
			url("../images/main_right.png"),
			url("../images/main_bg.jpg");
		background-position: 
			left -10px center,
			right 10px center,
			center center;
		background-repeat:
			no-repeat,
			no-repeat,
			repeat-x;
		background-size: 
			auto 90%,
			auto 90%,
			auto 100%;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
	}

	.fv img {
		width: 300px;
		max-width: 70%;
		height: auto;
		margin-top: -15%;
	}
	
}

/*=========================================================
footer
=========================================================*/

#footer {
	background: #4532af;
	color: #fff;
	text-align: center;
	padding: 30px;
	font-size: 0.8rem;
}