@charset "utf-8";
/* CSS Document */

.pc{display: block;}
.sp{display: none;}

@media screen and (max-width:769px) {
	.pc{display: none;}
.sp{display: block;}
	
}

/* -------------------------------------------------

btn

------------------------------------------------- */
.btn{
	display: block;
	color:#fff;
	background-color: #111;
	border-radius: 25px;
	transition: .5s;
	text-align: center;
}
.btn:hover{
	background-color: #0e2710;
	color:#fff;
	transform:translateY(-5px);
}
/* PC */
@media screen and (min-width:769px) {
.btn{
	width: 600px;
	margin: 0 auto 20px;
	padding: 15px 0;
	font-size: 18px;
}
}
/* Tablet */
@media screen and (max-width:768px) {
.btn{
	margin: 0 20px 20px;
	padding: 15px 0;
	font-size: 13px;
}
}



/* -------------------------------------------------

mainimgArea

------------------------------------------------- */
.mainimgArea{
	text-align: center;
	background-color: #ad0082;
	font-size: 0;
	line-height: 100%;
	background: url(../images/mainbg.png) center no-repeat; 
}
/* PC */
@media screen and (min-width:769px) {
	.mainimgArea{
		height: 100%;
	}
}
/* Tablet */
@media screen and (max-width:768px) {


}

/* -------------------------------------------------

copyArea

------------------------------------------------- */
.copyArea{
	background:#ad0082;
}
.copyArea > p{
	color:#fff;
	text-align: center;
}
/* PC */
@media screen and (min-width:769px) {
.copyArea{
	padding: 30px 0;
}
.copyArea > p{
	font-size: 1.3em;
}
}
/* Tablet */
@media screen and (max-width:768px) {
.copyArea{
	padding:20px;
}

}


/* -------------------------------------------------

kasouArea

------------------------------------------------- */
.kasouArea{
	background: url(../images/bg_kasou.png) repeat-x center top #111;
	padding: 40px 0 0;
}
.kasouArea > p{
	text-align: center;
}
.kasouArea > p:not(:last-child){
	margin: 0 0 20px;
}
.kasouArea > p.ta{
	width: 640px!important;
	margin: 0 auto 20px;
}
.kasouArea > p a.btn{
	background-color: #34274a;
}
.kasouArea > p a.btn:hover{
	background-color: #0a9c1e;
}
.kasouArea > p:last-child{
	background: url(../images/bg_kasou_bottom.png) no-repeat center top #ff6600;
}
/* PC */
@media screen and (min-width:769px) {
.kasouArea > p:last-child{
	height: 49px;
}
}
/* Tablet */
@media screen and (max-width:768px) {
.kasouArea{
	background-size: auto 400px;
}
.kasouArea > p:not(:last-child){
	padding: 0 20px;
}
.kasouArea > p.ta{
	width: 540px!important;
}
.kasouArea > p.ta img{
	width: 100%;
}
.kasouArea > p:last-child{
	height: 15px;
	background-size: auto 15px;
}
}





/* -------------------------------------------------

pointArea

------------------------------------------------- */
.pointArea:nth-child(2n+1){
	background: url(../images/bg_orange.gif);
}
.pointArea:nth-child(2n) > h3{
	background: url(../images/flag_a.png) no-repeat center top;
}
.pointArea:nth-child(2n+1) > h3{
	background: url(../images/flag_b.png) no-repeat center top;
}
.pointArea > h3{
	text-align: center;
	margin: 0 0 25px;
}
.pointArea > h3 span{
	display: block;
	margin: 0 auto 10px;
}
.pointArea > h3 img.ta{
	margin: 0 auto;
}

div > div.tail_box h3{width: 96%; padding: 0 2%;}
div > div.tail_box p{ width:96%; padding: 2% 2%; text-align: left; }

/* PC */
@media screen and (min-width:769px) {
.pointArea{
	padding: 30px 0 40px;
}
.pointArea > h3{
	padding-top: 85px;
}
.pointArea > div{
	width: 1000px;
	height: auto;
	margin: 0 auto 20px;
}
}
/* Tablet */
@media screen and (max-width:768px) {
.pointArea{
	padding: 30px 0 20px;
}
.pointArea > h3{
	background-size:auto 65px !important;
	padding: 50px 15px 0;
}
.pointArea > h3 span{
	width: 55px;
}
.pointArea > h3 img.taOnly{
	width: 80%!important;
}
.pointArea > div{
	margin: 0 20px 20px;
}
}
/* SP縦向き */
@media screen and (max-width:640px) and (orientation: portrait) {
.pointArea > h3 img.taOnly{
	width: 100%!important;
}

}


/* -------------------------------------------------

point01

------------------------------------------------- */
.point01 > div > div.tail_box{
	float: left;
	background-color: #111;
	margin-bottom: 20px;
}

.point01 > div > div.tail_box img{width: 100%;}
.point01 > div > div.tail_box:nth-child(1),
.point01 > div > div.tail_box:nth-child(2),
.point01 > div > div.tail_box:nth-child(4),
.point01 > div > div.tail_box:nth-child(5),
.point01 > div > div.tail_box:nth-child(7),
.point01 > div > div.tail_box:nth-child(8),
.point01 > div > div.tail_box:nth-child(10),
.point01 > div > div.tail_box:nth-child(11){
	margin-right: 2%;
}

.point01 > div > div.tail_box:nth-child(1){ width: 32%;}
.point01 > div > div.tail_box:nth-child(2){ width: 32%;}
.point01 > div > div.tail_box:nth-child(3){ width: 32%;}
.point01 > div > div.tail_box:nth-child(4){ width: 32%;}
.point01 > div > div.tail_box:nth-child(5){ width: 32%;}
.point01 > div > div.tail_box:nth-child(6){ width: 32%;}
.point01 > div > div.tail_box:nth-child(7){ width: 32%;}
.point01 > div > div.tail_box:nth-child(8){ width: 32%;}
.point01 > div > div.tail_box:nth-child(9){ width: 32%;}
.point01 > div > div.tail_box:nth-child(10){ width: 32%;}
.point01 > div > div.tail_box:nth-child(11){ width: 32%;}
.point01 > div > div.tail_box:nth-child(12){ width: 32%;}

.point01 > div > div.tail_box h3{width: 96%; padding: 0 2%;}
.point01 > div > div.tail_box p{ width:96%; padding: 2% 2%; text-align: left; }


.point01 > div > div span{
	display: block;
	text-align: center;
}
.point01 > div > div span h3{ color: #FFFFFF; font-size: 16px; font-weight: bold;}
.point01 > div > div span p{ color: #FFFFFF; font-size: 12px; margin-bottom: 15px;}
.point01 > div > div span p span{ font-size: 11px; text-align: left;}
.point01 > div > div span a{
	background-color: #0a9c1e;
	color:#efff42;
}

.point01 > div > div .btn{
	width: 80%;
	margin: 0 auto 20px;
	padding: 15px 0;
	font-size: 18px;
}

/* PC */
@media screen and (min-width:769px) {

}
/* Tablet */
@media screen and (max-width:768px) {

.point01 > div > div.tail_box{
	float: left;
	background-color: #111;
	margin-bottom: 20px;
}
}
/* SP縦向き */
@media screen and (max-width:640px) and (orientation: portrait) {
.point01 > div > div.tail_box{
	float: none;}
	.point01 > div > div.tail_box:nth-child(1){ width: 100%;}
.point01 > div > div.tail_box:nth-child(2){ width: 100%;}
.point01 > div > div.tail_box:nth-child(3){ width: 100%;}
.point01 > div > div.tail_box:nth-child(4){ width: 100%;}
.point01 > div > div.tail_box:nth-child(5){ width: 100%;}
.point01 > div > div.tail_box:nth-child(6){ width: 100%;}
.point01 > div > div.tail_box:nth-child(7){ width: 100%;}
.point01 > div > div.tail_box:nth-child(8){ width: 100%;}
.point01 > div > div.tail_box:nth-child(9){ width: 100%;}
.point01 > div > div.tail_box:nth-child(10){ width: 100%;}
.point01 > div > div.tail_box:nth-child(11){ width: 100%;}
.point01 > div > div.tail_box:nth-child(12){ width: 100%;}
	
}

/* -------------------------------------------------

point02

------------------------------------------------- */
.point02{

}

.point02 > div > div.tail_box{
	float: left;
	background-color: #111;
}

.point02 > div > div.tail_box img{width: 100%;}
.point02 > div > div.tail_box:nth-child(1){
	margin-right: 2%;
}

.point02 > div > div.tail_box:nth-child(1){ width: 49%;}
.point02 > div > div.tail_box:nth-child(2){ width: 49%;}

.point02 > div > div.tail_box h3{width: 100%;}
.point02 > div > div.tail_box p{ width:100%; }


.point02 > div > div span{
	display: block;
	text-align: center;
}
.point02 > div > div span h3{ color: #FFFFFF; font-size: 18px; font-weight: bold;}
.point02 > div > div span p{ color: #FFFFFF; font-size: 14px; margin-bottom: 15px;}
.point02 > div > div span a{
	background-color: #0a9c1e;
	color:#efff42;
}

.point02 > div > div .btn{
	width: 80%;
	margin: 0 auto 20px;
	padding: 15px 0;
	font-size: 18px;
}
.point02 > div > div.tail_box h3{width: 96%; padding: 0 2%;}
.point02 > div > div.tail_box p{ width:96%; padding: 2% 2%; text-align: left; }

/* PC */
@media screen and (min-width:769px) {
	
}
/* Tablet */
@media screen and (max-width:768px) {
.point02 > div > div{
	width: calc(50% - 2px);
}
}
/* SP縦向き */
@media screen and (max-width:640px) and (orientation: portrait) {

	.point02 > div > div.tail_box{
	float: none;}
	.point02 > div > div.tail_box:nth-child(1){ width: 100%;}
.point02 > div > div.tail_box:nth-child(2){ width: 100%;}

	
}





/* -------------------------------------------------

point03

------------------------------------------------- */
.point03{
	background: url(../images/bg_night.png) repeat-x center bottom;
}
.point03 > div > div.tail_box{
	float: left;
	background-color: #111;
}

.point03 > div > div.tail_box img{width: 100%;}
.point03 > div > div.tail_box:nth-child(1){
	margin-right: 0%;
}

.point03 > div > div.tail_box:nth-child(1){ width: 100%;}

.point03 > div > div.tail_box h4{width: 100%;}
.point03 > div > div.tail_box h4 a{color: #FFFFFF;}
.point03 > div > div.tail_box p{ width:100%; }


.point03 > div > div span{
	display: block;
	text-align: center;
}
.point03 > div > div span h4{ color: #FFFFFF; font-size: 18px; font-weight: bold; margin-bottom: 10px;}
.point03 > div > div span p{ color: #FFFFFF; font-size: 14px; margin-bottom: 15px;}
/* PC */
@media screen and (min-width:769px) {

}
/* Tablet */
@media screen and (max-width:768px) {
.point03{
	background-size: 40px auto;
}
.point03 > div > p{
	width: calc(100% - 0px);
}
}
/* SP縦向き */
@media screen and (max-width:640px) and (orientation: portrait) {
.point03 > div > p:nth-child(n+2){
	margin-right:0;
}
.point03 > div > p:nth-child(3){
	float: none;
	clear: both;
	margin: 0 auto;
}
.point03 > div > p{
	width: calc(100% - 0px);
}
}




/* -------------------------------------------------

point04

------------------------------------------------- */
.point04 p:first-of-type{
	text-align: center;
	margin: 0 0 20px;
}
.point04 > div > div.tail_box{
	float: left;
	background-color: #111;
}

.point04 > div > div.tail_box img{width: 100%;}
.point04 > div > div.tail_box:nth-child(1){
	margin-right: 0%;
}

.point04 > div > div.tail_box:nth-child(1){ width: 100%;}

.point04 > div > div.tail_box h4{width: 100%;}
.point04 > div > div.tail_box p{ width:100%; }


.point04 > div > div span{
	display: block;
	text-align: center;
}
.point04 > div > div span h4{ color: #FFFFFF; font-size: 18px; font-weight: bold; margin-bottom: 10px;}
.point04 > div > div span p{ color: #FFFFFF; font-size: 14px; margin-bottom: 15px;}

.comingSoon{
	text-align: center;
}
/* PC */
@media screen and (min-width:769px) {

}
/* Tablet */
@media screen and (max-width:768px) {
.point04 p:first-of-type{
	margin: 0 20px 20px;
}
.comingSoon{
	width: 180px;
	margin: 0 auto;
}
}





/* -------------------------------------------------

point05

------------------------------------------------- */
.point05{

}

.point05 > div > div.tail_box{
	float: left;
	background-color: #111;
}

.point05 > div > div.tail_box img{width: 100%;}
.point05 > div > div.tail_box:nth-child(1),
.point05 > div > div.tail_box:nth-child(2),
.point05 > div > div.tail_box:nth-child(3){
	margin-right: 1%;
}

.point05 > div > div.tail_box:nth-child(1){ width: 24%;}
.point05 > div > div.tail_box:nth-child(2){ width: 24%;}
.point05 > div > div.tail_box:nth-child(3){ width: 24%;}
.point05 > div > div.tail_box:nth-child(4){ width: 24%;}

.point05 > div > div.tail_box h3{width: 100%;}
.point05 > div > div.tail_box p{ width:100%; }


.point05 > div > div span{
	text-align: center;
}
.point05 > div > div span h3{ color: #FFFFFF; font-size: 14px; font-weight: bold;}
.point05 > div > div span h3 span{ font-size: 12px;}
.point05 > div > div span p{ color: #FFFFFF; font-size: 12px; margin-bottom: 15px;}
.point05 > div > div span a{
	background-color: #0a9c1e;
	color:#efff42;
}

/* PC */
@media screen and (min-width:769px) {

}
/* Tablet */
@media screen and (max-width:768px) {


}


/* SP縦向き */
@media screen and (max-width:640px) and (orientation: portrait) {
.point05 > div > div.tail_box{
	float: none;}
	.point05 > div > div.tail_box:nth-child(1){ width: 100%;}
.point05 > div > div.tail_box:nth-child(2){ width: 100%;}
.point05 > div > div.tail_box:nth-child(3){ width: 100%;}
.point05 > div > div.tail_box:nth-child(4){ width: 100%;}

}

/* -------------------------------------------------

point06

------------------------------------------------- */
.point06{

}
.point06 > div > div.tail_box{
	float: left;
	background-color: #111;
}

.point06 > div > div.tail_box img{width: 100%;}
.point06 > div > div.tail_box:nth-child(1){
	margin-right: 2%;
}

.point06 > div > div.tail_box:nth-child(1){ width: 49%;}
.point06 > div > div.tail_box:nth-child(2){ width: 49%;}

.point06 > div > div.tail_box h3{width: 100%;}
.point06 > div > div.tail_box p{ width:100%; }


.point06 > div > div span{
	display: block;
	text-align: center;
}
.point06 > div > div span h3{ color: #FFFFFF; font-size: 18px; font-weight: bold;}
.point06 > div > div span p{ color: #FFFFFF; font-size: 14px; margin-bottom: 15px;}
.point06 > div > div span a{
	background-color: #0a9c1e;
	color:#efff42;
}

.point06 > div > div .btn{
	width: 80%;
	margin: 0 auto 20px;
	padding: 15px 0;
	font-size: 18px;
}

/* PC */
@media screen and (min-width:769px) {
.point06 > div > p span a{
	width: 340px;
}
}
/* Tablet */
@media screen and (max-width:768px) {
.point06 > div > p{
	width: calc(50% - 2px);
}
}
/* SP縦向き */
@media screen and (max-width:640px) and (orientation: portrait) {
.point06 > div > div.tail_box{
	float: none;}
	.point06 > div > div.tail_box:nth-child(1){ width: 100%;}
.point06 > div > div.tail_box:nth-child(2){ width: 100%;}

}



/* -------------------------------------------------

kyosanArea

------------------------------------------------- */
.kyosanArea > h3{
	background-color: #111;
	color:#ff7a22;
	text-align: center;
	padding: 10px 15px 5px;
	cursor:pointer;
	border-radius: 25px;
}
.kyosanArea > h3:before{
	content: "\f0fe";
	font-family: FontAwesome;
	padding-right: 5px;
}
.accLangOn:before{
	content: "\f146"!important;
	font-family: FontAwesome;
	padding-right: 5px;
}
.kyosanArea > div{
	display:none;
	background-color: #fff;
	border:5px solid #111;
	padding: 20px;
}
.kyosanArea > div p{
	margin-bottom: 10px;
}
.kyosanArea > div p:nth-child(1){
	font-size: 1.6em;
}
.kyosanArea > div p:nth-child(2){
	font-size: 1.4em;
}
.kyosanArea > div p:nth-child(3){
	font-size: 1.2em;
}
.accLangOn{
	border-radius: 25px 25px 0 0 !important;
}
/* PC */
@media screen and (min-width:769px) {
.kyosanArea{
	width: 1000px;
	margin:50px auto;
}
.kyosanArea > h3{
	font-size:1.5em;
	letter-spacing: 1px;
}
}
/* Tablet */
@media screen and (max-width:768px) {
.kyosanArea{
	margin:30px 20px;
}

}
/* -------------------------------------------------

footer

------------------------------------------------- */
footer{
	text-align: center;
	background-image: url(../images/footer_img.png),url(../images/footer_bg.png);
	background-repeat: no-repeat,repeat-x;
	background-position: center bottom, center bottom;
}
footer p{
	font-size: 14px;
	letter-spacing: 1px;
}

/* PC */
@media screen and (min-width:769px) {
footer{
	padding-bottom: 300px;
}
}
/* Tablet */
@media screen and (max-width:768px) {
footer{
	background-size: auto 120px, auto 120px;
	padding-bottom: 140px;
}
}


/* -------------------------------------------------

gotop

------------------------------------------------- */
.gotop {
	position: fixed;
}
.gotop a {
	display: block;
	transition: .5s;
}
.gotop a:hover {
	transform:translateY(-5px);
}
/* PC */
@media screen and (min-width:769px) {
.gotop {
	right: 20px;
	bottom:0;
}
.gotop a {
	width: 60px;
	margin-bottom:40px;
}
}
/* Tablet */
@media screen and (max-width:768px) {
.gotop {
	right: 10px;
	bottom:0;
	padding-bottom: 15px;
}
.gotop a img{
	width: 35px!important;
	display: block;
}
}
