@charset "UTF-8";
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,main {margin:0;padding:0;border:0;font-size:100%;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main {display:block;}
body {font-family:Verdana,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1;}
ol,ul {list-style:none;}
blockquote,q {quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}
table {border-collapse:collapse;border-spacing:0;}
wbr:after {content:"\00200B";}

/*	TBS reset
============================== */
.alt {position:absolute;top:-5000px;left:-9999px;}
.clearfix:after {content:"";clear:both;display:block;}
.hide-txt {text-indent:110%;white-space:nowrap;overflow:hidden;}
.fp-causion {display:none;}
.nocontxt {-webkit-touch-callout: none;-webkit-user-select: none;user-select: none;-webkit-user-drag:none;}
.nocontxt img {pointer-events: none;}
@media all and (min-width:768px) {
.alt-pc {position:absolute;top:-5000px;left:-9999px;}
.clearfix-pc:after {content:"";clear:both;display:block;}
.hide-txt-pc {text-indent:110%;white-space:nowrap;overflow:hidden;}
}
@media all and (max-width:767px) {
.alt-smp {position:absolute;top:-5000px;left:-9999px;}
.clearfix-smp:after {content:"";clear:both;display:block;}
.hide-txt-smp {text-indent:110%;white-space:nowrap;overflow:hidden;}
}
div.embed-tbsplayer {
background-color:#000;
position:relative;
height:0;
padding-top:56.25%;
}
div.embed-tbsplayer .tbs-player {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
div.embed-tbsplayer-audio {
background-color:#fff;
}
div.embed-tbsplayer-audio .tbs-player {
height:46px;
}
div.lbx-overlay {
z-index:10000;position:absolute;background-color:#000;width:100%;height:100%;left:0;top:0;right:0;bottom:0;opacity:0.9;
}

/* -----------------------------------------------------------
   COMMON
------------------------------------------------------------*/

/*/TEXT/*/
.blue{ color:#0bc1f5 !important;}
.green{ color:#52b145 !important;}
.turquoise{ color:#2fbdb5 !important;}
.yellow{ color:#d6d414 !important;}
.orange{ color:#ee8020 !important;}
.pink{ color:#e4007f !important;}
.red{ color:#eb3434 !important;}
.purple{ color:#9362dd !important;}
.brown{ color:#a05f37 !important;}
.navy{color:#1a44ad !important;}

.tCenter{ text-align:center !important;}
.tLeft{ text-align:left !important;}
.tRight{ text-align:right !important;}

/*/LINK/*/
a { text-decoration:none;}
a:hover { text-decoration:underline;}
a:visited { text-decoration:none;}

.alt{
	position: absolute;
	top: -5000px;
	left: -9999px;
}

/* -----------------------------------------------------------
   BASE
------------------------------------------------------------*/
@font-face {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-weight: 100;
	font-style: normal;
}
@font-face {
	font-family: noto-sans-cjk-jp,sans-serif;
	font-weight: 200;
	font-style: normal;
}
@font-face {
	font-family: noto-sans-cjk-jp,sans-serif;
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: source-han-serif-japanese, serif;
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: source-han-serif-japanese, serif;
	font-weight: 400;
	font-style: normal;
}

body {
	font-family: noto-sans-cjk-jp, sans-serif;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust: 100%;
}

.fade {
	opacity : 0;
	transform : translate(0, 100px);
	transition : all 800ms;
}

.scroll {
	opacity : 1;
	transform : translate(0, 0);
}


.wrap{
	background-color: #f8df75;
	background-image: url(../img/bg1.png);
	background-repeat: no-repeat;
	background-size: 100%;
	}
	.wrap p{
		color: #202020;
	}
	#bottom {
		background-image: url(../img/bg4.png);
		background-repeat: no-repeat;
		background-position:left center;
	}

	.lazy img{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}

@media all and (min-width: 768px) {
	.btm-area{
		padding-top: 40px;
	}
	#bottom{
		padding: 40px 0;
	}
}

@media all and (max-width: 767px) {

	#container{
		width:100%;
		margin:0 auto;
		}
	#container .unit{
		width: 95%;
		margin: 0 auto;
	}
	#bottom{
		padding: 30px 0;
	}

}
/* -----------------------------------------------------------
   BUTTON
------------------------------------------------------------*/
.btn1 a{
  display: inline-block;
  text-align: center;
  background-color: #141a5e;
  color: #FFF;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.btn1 a:after{
  width: 100%;
  height: 0;
  content:"";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #b10a0a;
  opacity: 0;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transition: .2s;
  z-index: -1;
}
.btn2{ text-align: center;}
.btn2 a{
  display: inline-block;
  text-align: center;
  background-color: #141414;
  color: #FFF;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.btn2 a:after{
  width: 100%;
  height: 0;
  content:"";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fbdb52;
  opacity: 0;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transition: .2s;
  z-index: -1;
}
.btn3{ text-align: center;}
.btn3 a{
  display: inline-block;
  text-align: center;
  background-color: #a70203;
  color: #FFF;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.btn3 a:after{
  width: 100%;
  height: 0;
  content:"";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #141a5e;
  opacity: 0;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transition: .2s;
  z-index: -1;
}

@media all and (min-width: 768px) {
	.btn1 a{
		width: 300px;
	  height:50px;
		font-size: 100%;
	  line-height: 50px;
	}
	.btn2 a{
		width: 500px;
	  height:50px;
		font-size: 100%;
	  line-height: 50px;
	}
	.btn3 a{
		width: 300px;
	  height:50px;
		font-size: 100%;
	  line-height: 50px;
	}
	.btn1 a:hover , .btn2 a:hover , .btn3 a:hover{
	  color: #fff;
		text-decoration: none;
	}
	.btn1 a:hover:after , .btn2 a:hover:after , .btn3 a:hover:after{
	  height: 240%;
	  opacity: 1;
	}
	.btn1 a:active:after , .btn2 a:active:after , .btn3 a:active:after{
	  height: 340%;
	  opacity: 1;
	}
}

@media all and (max-width: 767px) {
	.btn1 a{
		width: 300px;
	  height:50px;
		font-size: 100%;
	  line-height: 52px;
	}
	.btn2 a{
		width: 100%;
	  height:35px;
		font-size: 100%;
	  line-height: 35px;
		font-size: 90%;
	}
	.btn3 a{
		width: 70%;
	  height:35px;
		font-size: 90%;
	  line-height: 35px;
		font-size: 90%;
	}
}
/* -----------------------------------------------------------
   FOOTER
------------------------------------------------------------*/
footer{
	width:100%;
	background-color: #141414;
}
p.copyright {
	color:#fff;
	font-size:75%;
	line-height:1.25;
}
p.copyright a{
	font-weight:bold;
	color:#fff;
	}
@media all and (min-width: 768px) {
	footer{
		padding:30px 0;
		}
	p.copyright {
		text-align:center;
		}
	}
	@media all and (max-width: 767px)  {
	p.copyright{
		padding:10px 10px;
		text-align:center;
		}
}
/* -----------------------------------------------------------
   PAGETOP
------------------------------------------------------------*/
#pagetop{
	z-index: 100;
}
#pagetop a{
	display: block;
	overflow:hidden;
	background-image:url(../img/pagetop.png);
	z-index: 100;
	}
@media all and (min-width: 768px) {
	#pagetop {
	  position:fixed;
	  bottom:40px;
	  right:20px;
	}
	#pagetop a {
	  width:102px;
		height:200px;
		top:0;
		position: relative;
		text-indent:-9999px;
		background-size: cover;
	}
}
@media all and (max-width: 767px)  {
	#pagetop{
		width:15%;
		position:fixed;
	  bottom:7%;
	  right:3%;
		}
	#pagetop a {
		width:100%;
		height:0;
		padding-top: 196%;
		text-indent:-9999px;
		background-size: cover;
	}
}