@charset "UTF-8";
/*書式設定
----------------------------------*/
@media only screen and (max-width: 990px) {

body{min-width: 1200px;}

}/*990px end*/

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

body{min-width: 640px;}

.left { float: none; }
.right { float: none; }
.pc { display: none; }
.sp{display: block;}

#contentWrap {
	max-width:640px;
	width: 100%;
	margin: 0 auto;
}
#contentWrap img{
	 width: 100%;
	 height: auto;
}
#naviBox {
    height: 40px;
}
#contentWrap .content {
	max-width:640px;
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
#naviBox .navi {
	width: 100%;
	height: 40px;
	margin: 0 auto;
	background-size: contain;
	background-position: 0 8px; 
	padding: 8px 0 0 0; 
}

#naviBox .navi li{
	width: 25%;
	float: left;
	margin:0;
	padding: 0 1%;
	box-sizing: border-box;	
}
#mainBoxWrap  { 
	margin: 40px auto 0; 
	background-size: cover;
    background-position: 50% 100%;
}
#mainBoxWrap .mainBox { 
	width: 100%;
	height: 90vw;
	max-width:640px;
}
#mainBoxWrap .mainBox .main01 {width: 80%; top:25px; left: 0px; right: 0; margin: 0 auto; z-index: 999;}
#mainBoxWrap .mainBox .main02 {width: 20%; top:20vh; left: 0px; z-index: 1;}
#mainBoxWrap .mainBox .main03 {width: 100%; bottom:0px; right: 0px; z-index: 1;}
#mainBoxWrap .mainBox .main04 {width: 20%; top:20px; left: 10px; z-index: 998;}
#mainBoxWrap .mainBox .main05 {width: 20%; top:20px; right: 10px; z-index: 998;}

#naviImgBox {padding-bottom: 60px;}
#naviImgBox .naviTxt {width: 100%; margin: 0 auto; text-align: center; padding: 30px 0;}
#naviImgBox ul {margin-right:-30px;}
#naviImgBox ul li { float: left; margin: 20px 30px 0 0; }

#contentWrap .wrap01 {
	background-position:top center;
	background-size: 120%;
} 
#contentWrap #naviImgBox {
	padding: 0px 20px 30px;
}
#naviImgBox .left {float: left; width: 56%;}
#naviImgBox .right {float: right; width: 40%;}
#naviImgBox ul {margin-right:-3%;}
#naviImgBox ul li {width: 30%; float: left; margin: 10px 3% 0 0; box-sizing: border-box; }

#contentWrap .wrap02 {margin-top:0; }

#contentWrap #box01 {
	padding: 0px 20px 30px;
}
#box01 .left {
	width: 100%;
	height: auto;
	position: static;
}
#box01 img {
	width: 100%;
	height: auto;
}
#box01 .btn {
	width: 100%;
	margin: 20px auto 0;
	position: static;
}


#contentWrap h2 {
	width: 100%;
	margin: 0 auto;
	display: block;
}
#contentWrap h2 img{
	width: 100%;
	height: auto;
}
#contentWrap #box02 {
	padding: 20px 20px 30px;
}
#contentWrap .wrap02 {
	margin-top: 20px;
}
#box02 .left {width: 100%;}
#box02 .left .bx-wrapper {
	margin-bottom: 10px;
	width: 100%;
}
#box02 .left .thumb {
	margin:0 auto;
	width: 100%;
	padding: 0;
}
#box02 .left .thumb li { 
	float: none; 
	margin-right:0;
	width: 33%;
    float: left;
    padding:1%; 
}
#box02 .left .thumb li a {
	width: 100%;
    height: auto;
}
#box02 .left .thumb li a.active:before {
	width: 100%;
	height: 100%;
}
#box02 .left .thumb li a.active:hover:before {
	opacity: 1;
	filter: alpha(opacity=100);
}
#box02 .left .thumb li a.active {
    box-sizing: border-box;
}
#box02 .right {
	width: 100%;
	height: auto;
	position: static;
	margin-top: 20px;
}
#box02 .btn {
	position: static;
	margin: 10px auto 0;
	width: 100%;
}
#contentWrap .wrap03 {
	margin-bottom: 30px;
}
#contentWrap #box03 {
	padding: 30px 0 0;
}

#contentWrap .wrap04 {
	margin-bottom: 0;
}
#contentWrap #box04 {
	padding: 0;
}
#contentWrap #box04 img {
	width: 100%;
	height: auto;
}
.tabNav {
	width: 100%;
	margin: 0 auto;
}
.tabNav ul  {margin: 0;}
.tabNav ul .tabNavBtn,.tabNav ul .tabNavBtn2 {
	width: 20%; margin: 0;
}

.tabBox,.tabBox2 {
	display: none;
	width: 100%;
	height: auto;
	margin-top: 30px;
	position: static;
	padding-bottom: 30px;
}
.tabBox .right,.tabBox2 .right{
	position: relative;
	width: 100%;
	height: auto;
	text-align: center;
}
.tabBox .btn,.tabBox2 .btn {
	position: static;
	width: 65%;
	margin: 20px auto 0;
}
.tabBox:before,.tabBox2:before{
  content: none;
  position: static;
  background-image:none;
}
#box03 .left,#box04 .left {width: 100%; margin-top: 20px;}
#box03 .left .bx-wrapper .slideBox li,#box04 .left .bx-wrapper .slideBox li {
	width: 100%;
}
#box03 .left .thumb,#box04 .left .thumb {
	margin:0 auto; 
}
#box03 .left .thumb li a,#box04 .left .thumb li a {
    width: 100%;
    height: auto;
}
#box03 .left .thumb li,#box04 .left .thumb li { 
	float: left;
	width: 23%; 
	margin-right:2%;
	box-sizing: border-box; 
}
#box03 .left .thumb,#box04 .left .thumb {width: auto; }
#box03 #tab01-4 .left .thumb,#box04 #tab02-0 .left .thumb {width: auto;}
#box03 #tab01-4 .left .thumb li,#box04 #tab02-0 .left .thumb li { margin-right:2%; }
#box03 .right,#box04 .right {width: 100%; position: relative;}

#contentWrap #box05 { margin-top: 0; }
#box05 h2 {	padding-bottom :0;}
#box05 .planbox .left,#box05 .planbox .right {
	position: relative;
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}
#box05 .planbox .btn {
	position: absolute;
	width: 80%;
	margin: 0 auto;
	left: 0;
	right: 0;
	bottom: 4%;
}
.checkBox {position: relative; height: 20vh;}
.checkBox .txt {width: 80%; top:0; left: 0; right: 0; margin: 0 auto; z-index: 100;}
.checkBox .btn {width: 70%; top:6vh; left: 0; right: 0; margin: 0 auto;}


.sakura {
	background-size: 85%;
}


}/*640px end*/

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

body{min-width: 380px;}

}/*380px end*/