@charset "utf-8";

/*body{
	background-color:#FFF7AA;
}
*/


#home{
background:url(../images/bg_pattern19a.gif);
}

#guide{
	background-image: -webkit-linear-gradient(90deg,rgba(255,255,255,0.60) 0%,rgba(125,136,175,1.00) 100%);
	background-image: -moz-linear-gradient(90deg,rgba(255,255,255,0.60) 0%,rgba(125,136,175,1.00) 100%);
	background-image: -o-linear-gradient(90deg,rgba(255,255,255,0.60) 0%,rgba(125,136,175,1.00) 100%);
	background-image: linear-gradient(0deg,rgba(255,255,255,0.60) 0%,rgba(125,136,175,1.00) 100%);
}
#seeing{
	background-image: -webkit-linear-gradient(90deg,rgba(255,255,255,0.62) 0%,rgba(34,176,136,1.00) 100%);
	background-image: -moz-linear-gradient(90deg,rgba(255,255,255,0.62) 0%,rgba(34,176,136,1.00) 100%);
	background-image: -o-linear-gradient(90deg,rgba(255,255,255,0.62) 0%,rgba(34,176,136,1.00) 100%);
	background-image: linear-gradient(0deg,rgba(255,255,255,0.62) 0%,rgba(34,176,136,1.00) 100%);	
}
#access{
	background-image: -webkit-linear-gradient(90deg,rgba(223,177,151,0.78) 0%,rgba(223,177,151,1.00) 100%);
	background-image: -moz-linear-gradient(90deg,rgba(223,177,151,0.78) 0%,rgba(223,177,151,1.00) 100%);
	background-image: -o-linear-gradient(90deg,rgba(223,177,151,0.78) 0%,rgba(223,177,151,1.00) 100%);
	background-image: linear-gradient(0deg,rgba(223,177,151,0.78) 0%,rgba(223,177,151,1.00) 100%);	
}
#contact{
	background-image: -webkit-linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(126,95,119,0.42) 100%);
	background-image: -moz-linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(126,95,119,0.42) 100%);
	background-image: -o-linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(126,95,119,0.42) 100%);
	background-image: linear-gradient(0deg,rgba(255,255,255,1.00) 0%,rgba(126,95,119,0.42) 100%);	
}

.clearfix:after{
	display: block;
	content: "";
	clear: both;
}

main {
	margin: 0 auto;
	width: 100%;}
	
img{
	vertical-align: bottom;
}


 
  @media screen and ( min-width: 769px ) {


main {
	margin: 0 auto;
	width:100%;
}
	  
	  
    #drawer_btn {
      display: none;
    }

#drawer_header {
   /* font-size: 20px;
    padding: 15px 25px;
    color: #fff;
    font-weight: bolder;*/
	display: none;
  }

#drawer_menu > ul {
	
	padding-left: 0;
	list-style-type: none;
	overflow: hidden;
  }

#drawer_menu li{
	/*display: inline;
	width: 200px;
	border-right: #ccc 1px solid;
	text-align: center;
	padding-bottom: 10px;
	padding-top: 10px;*/
	
	float: left;
	width: 10.3%;
	/*border-right: #ccc 1px solid;*/
	
	
	font-size:0.7rem;
		
}





#drawer_menu li:first-child{
	/*border-left: #ccc 1px solid;*/
}

#drawer_menu ul a{
	display:block;	
	text-align: center;
	padding-bottom: 10px;
	padding-top: 10px;
	background-color:#a4a9cf;
}

#home #drawer_menu ul .gnav08 a:hover{
background-color:#3C538B;
}

#drawer_menu ul .gnav01 a{
	border-radius:5px 0 0 5px;
}
#drawer_menu ul .gnav05 a{
	border-radius:0 5px 5px 0;
}

/*----------- color change  -------*/
#drawer_menu ul .gnav06 :nth-child(n+8) a{
background-color:#8FAADC;
}
#drawer_menu ul .gnav06 :nth-child(n+8) a:hover{
background-color:#3C538B;
}
/*----------- end of color -------*/

#drawer_menu ul a:hover{
	background-color:#3C538B;
}
#home #drawer_menu ul .gnav02 a:hover{
background-color:#3C538B;
}

/*#home #drawer_menu .gnav01 a{
	background-color:#a4a9cf;
}*/
#guide #drawer_menu .gnav02 a{
	background-color:#a4a9cf;
}
#seeing #drawer_menu .gnav03 a{
	background-color:#a4a9cf;
}
#access #drawer_menu .gnav04 a{
	background-color:#a4a9cf;
}
#contact #drawer_menu .gnav05 a{
	background-color:#a4a9cf;
}






#drawer_menu ul a:hover{
	background-color:#3C538B;
}



  
#drawer_menu{
width: 100%;
position: fixed;
	top: 0px;
    /*--left: 24.3%;--*/
    left: 14.4%;
    z-index:2;
}


#drawer_menu > ul > li > a {
	text-decoration: none;
	color: #fff;
	  }

/*----------- Toggle taiou -------*/
#drawer_menu ul dt{
	display:block;	
	text-align: center;
	padding-bottom: 10px;
	padding-top: 10px;
	background-color:#a4a9cf;
}
#drawer_menu ul li dt{
color:#fff;
}
#drawer_menu ul li dt:hover{
	background-color:#3C538B;
}	  

#drawer_menu ul li dd{

height:31px;
background:#eee;
border:solid 1px #aaa;
display:none;
text-align:center;

}

#drawer_menu ul li dd a{
text-decoration:none;
color:#fff;
}




/*------------ end Toggle ---------*/






/*------------------------------- header ------------------------*/
header{
position:relative;
}

#header div .hero_img {
	width: 100%;
	height: auto;
	margin-top: 0px;
	  }
	  
h1{
	max-width:100%;
	height:auto;
	position:absolute;
	top:35px;
	right:12.5%;

	/*margin-top: -38%;
	margin-left: 12.5%;
	margin-bottom: 30%;*/
}

#header h2{
 -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
	font-size: 23px;
	line-height: 34px;
	height:92%;
	color: #dddddd;
	
position:absolute;
	top:40px;
	left:12.5%;
}

.scroll2 {
  
  overflow   : hidden;
}
.scroll2 span{
  display     : inline-block;
  white-space : nowrap;
  animation   : scrollAnime 14s ease-out infinite;
}
@keyframes scrollAnime{
    0% { transform: translateY(100%)}
  100% { transform: translateY(-100%)}
}



#header .info{
color:#ddd;
line-height:1.2rem;
position:absolute;
	top:75%;
	left:66.0%;
}
#header .info a{
font-weight:bold;
color:#FE9DE2;
}
#header .info span a{
color:#FFF;
}

#header .info2 a{
line-height:1.2rem;
font-size:15px;
color:#688EF0;
font-weight:bold;
text-decoration:none;
background:#ddd;
border-radius:7px;
position:absolute;
	top:63%;
	left:66.0%;
}

#header .info3 a{
line-height:1.2rem;
font-size:15px;
color:#688EF0;
font-weight:bold;
text-decoration:none;
background:#ddd;
border-radius:7px;
position:absolute;
	top:69%;
	left:66.0%;
}
#header .info3 span{
color:#E64C7E;
}
#header .info2 span{
color:#E64C7E;
}

#main-contents h2 {
	text-align: center;
	font-weight: bold;
	font-size: 24px;
	line-height: 31.5px;
	padding-bottom: 10px;
	color: #515555;
}
#main-contents .sales{
text-align: center;
	font-size: 1.2rem;
	font-weight: normal;
	color: #515555;
}

#main-contents a{
text-decoration:none;
}
/*------------------- inner ----------------*/

main #inner1,
main #inner2{
	width:100%;
	margin-left:12.5%;
}

main #inner1 img{
	width:100%;
	height:auto;
}

main #inner2 img{
	width:100%;
	height:auto;
}





#inner1 #sino{

	width: 26.0%;
	
	background-color: rgba(255,255,255,0.70);
	
	float: left;
	margin-right:20px;
	margin-bottom: 20px;
}


#inner1 h3  {
	font-weight: bold;
	line-height:1.5rem; 
	font-size: 1.2rem;
	border-bottom: 2px solid #DD0000;
	margin: 0 auto;
	margin-top:-30px;
	width: 100%;
	text-align: center;
	color:#dddddd;
}


#inner1 #sino h3{
color: #dddddd;
}

#inner1 #karatu h3{
color: #ff9529;
}

#inner1 .setoguro h3{
color: #333333;
}

#inner2 #kiseto h3{
color: #FF9529;
}

#inner2 #cole h3{
color: #FF9999;
}





#inner1  p {
	padding: 10px;
	line-height: 1.5rem;
}
#inner1 #sino p span{
color:#E85484;
font-weight:bold;
}
.blinking{
color:#FA60A4;
font-weight:bold;
	-webkit-animation:blink 1.0s ease-in-out infinite alternate;
    -moz-animation:blink 1.0s ease-in-out infinite alternate;
    animation:blink 1.0s ease-in-out infinite alternate;
}

@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}












#inner1 #sino .ipage .img1,
#inner1 #sino .ipage .img2,
#inner1 #sino .ipage .img3,
#inner1 #sino .ipage .img4,
#inner1 #sino .ipage .img5{
	width:147px;
	height:31px;
}

#inner1 #sino .ipage .col{
width:100px;
height:66px;
}
#inner1 #sino .ipage .col2{
width:70px;
height:70px;
}


#inner1 #karatu{
	width: 26.0%;
	
	background-color: rgba(255,255,255,0.70);
	
	float: left;
	margin-right:20px;
	margin-bottom:20px;
}
#inner1 #karatu .ipage img{
	
	width:147px;
	height:31px;
}
#inner1 #karatu .ipage .col{
width:118px;
	height:60px;
}




#inner1 #setoguro{
	width: 26.0%;
	
	background-color: rgba(255,255,255,0.70);
	
	float: left;
	margin-bottom: 20px;
}


#inner1 #setoguro .ipage a img{
	width:30%;
	height:30%;
}




#inner2 #kiseto{
	width: 26.0%;
	
	background-color: rgba(255,255,255,0.80);
	
	float: left;
	
	margin-right:20px;
	margin-bottom: 20px;
}
#inner2 #kiseto .ipage img{
	
	width:147px;
	height:31px;
}




#inner2  h3 {
	font-weight: bold;
	line-height:1.5rem; 
	font-size: 1.2rem;

	margin: 0 auto;
	margin-top:-30px;
	width: 100%;
	text-align: center;
	color: #dddddd;
}
#inner2 #blog_e h3{
margin-top:-55px;
}





#inner1 p{
	padding: 10px;
	line-height: 1.5rem;
}

#inner2 p{
	padding: 10px;
	line-height: 1.5rem;
}



#inner2 #cole{
	width: 26.0%;
	
	background-color: rgba(255,255,255,0.80);
	
	float: left;
	margin-bottom: 20px;
	margin-right:20px;
}
#inner2 #cole .ipage img{
	
	width:147px;
	height:31px;
}
#inner2 #cole .ipage .col1{
	
	width:50px;
	height:57px;
}
#inner2 #cole .ipage .col2{
width:70px;
height:70px;
}

#inner2 #blog_e{
	width: 26.0%;
	
	background-color: rgba(255,255,255,0.80);
	
	float: left;
	margin-bottom: 20px;
}
#inner2 #blog_e h3 a{
font-size:1.1rem;
color: #F4B183;
}


#inner2 #blog_e h3 span a{
font-size:1.1rem;
color:#8FAADC;
}


#inner2 #blog_e p span{
font-weight:bold;
border-bottom: dashed 1px #515555;
}
#inner2 #blog_e p a{
color:#515555;
text-decoration:none;
}







#inner2 #blog_e .ipage a img{
	width:20%;
	height:20%;
}







#inner3,
#inner4,
#inner4a,
#inner5,
#inner6,
#inner7,
#inner8{
	width:81.1%;
	height:auto;
	margin-left:12.5%;
	position:relative;
	box-shadow:2px 2px 5px #999;
	margin-bottom:50px;
}
main #inner3 img,
main #inner4 img,
main #inner4a img,
main #inner8 img{
	width:100%;
	height:auto;
}
main #inner4 .waraji{
width:50px;
height:50px;
vertical-align:top;
}

#inner3 .kaisetu{
	color:#E64C7E;
	font-weight: bold;
	line-height:1.8rem; 
	font-size: 24px;
	position:absolute;
	left:50px;
	top:32px;
}

#inner3 .kodawari{
	color:#FFCD42;
	font-weight: bold;
	line-height:1.8rem; 
	font-size: 24px;
	position:absolute;
	right:50px;
	top:32px;
}








#inner4 .enjoy1{
	color:#FFCD42;
	font-weight: bold;
	line-height:1.8rem; 
	font-size: 24px;
	position:absolute;
	left:50px;
	top:32px;
}
#inner4 .kaigyo{
	color:#FFCD42;
	font-weight: bold;
	line-height:1.8rem; 
	font-size: 24px;
	position:absolute;
	right:100px;
	top:62px;
}


#inner4a .enjoy2{
	color:#FA60A4;
	font-weight: bold;
	line-height:1.8rem; 
	font-size: 24px;
	position:absolute;
	left:50px;
	top:32px;
}
#inner4a .kaigyo{
	color:#FFCD42;
	font-weight: bold;
	line-height:1.8rem; 
	font-size: 24px;
	position:absolute;
	right:100px;
	top:62px;
}



#inner3 h3 a,
#inner4 h3 a,
#inner4a h3 a,
#inner8 h3 a{
color:#fff;
font-weight:normal;
}
#inner3 h3 a:hover,
#inner8 h3 a:hover{
background-color:rgba(255,255,255,0.3);
}
#inner3 h3 span,
#inner8 h3 span{
font-weight:bold;
color:#E64C7E;
}

#inner4 h3 a:hover{
background-color:rgba(255,255,255,0.3);
}
#inner4a h3 a:hover{
background-color:rgba(255,255,255,0.3);
}
#inner5 h3 a:hover{
background-color:#DCDCDC;
}
#inner6 h3 a:hover{
background-color:#DCDCDC;
}
#inner7 h3 a:hover{
background-color:#DCDCDC;
}




#inner3 .ilink img{
	float: left;	
	position:absolute;
	left:480px;
	top:20px;
	width:36px;
	height:36px;
}
#inner8 .ilink img{
	float: left;	
	position:absolute;
	left:480px;
	top:20px;
	width:36px;
	height:36px;
}
#inner4 .ilink img{
float: left;
	position:absolute;
	left:300px;
	top:40px;
	width:50px;
	height:50px;
}
#inner4a .ilink img{
float: left;
	position:absolute;
	left:300px;
	top:40px;
	width:50px;
	height:50px;
}



main #inner5,
main #inner6,
main #inner7{
background-color: rgba(255,255,255,0.80);
}

main #inner5 img{
	width:50%;
	height:auto;
	float:left;
}

main #inner5 .blog_s{
	width:50%;
	float:left;
}
#inner5 .blog_s h3{
	font-weight: bold;
	font-size: 24px;
	margin-top:25px;
	padding-left:20px;
	padding-top:5px;
}


#inner5 .blog_s h3 a span{
color:#FA7681;
}
#inner5 .blog_s h3 a{
color:#768BDA;
}



#inner5 .blog_s p{
	line-height:1.5rem;
	padding-left:10px;
	padding-top:5px;
}



/*------------ blog latest ---------*/
#inner5 .blog_s h4{
font-size: 1.2rem;
color: #565656;
padding-left:20px;
	padding-top:10px;
margin-top:30px;
margin-bottom:8px;
}

#inner5 .blog_s li{
	margin-bottom:5px;
	color: #565656;
	font-size: 1.0rem;
	padding-left: 15px;
	background:url(../images/ico_arw01.png) left center no-repeat;
}

#inner5 .blog_s li a{
	color:#565656;
	text-decoration: none;
}
#inner5 .blog_s li a:hover{
	color: #147EB1;
	text-decoration: underline;
}
/*------------ end blog latest ---------*/











main #inner6 video{
	width:50%;
	height:auto;
	float:right;
}
main #inner6 .anime{
	width:50%;
	height:auto;
	float:right;
}
main #inner6 .blog_w{
	width:50%;
	float:left;
}
#inner6 .blog_w h3{
margin:25px 0 0 15px;
}
#inner6 .blog_w p{
	line-height:1.5rem;
	padding-left:10px;
	padding-right:5px;
	padding-top:10px;
}



main #inner7 .anime{
	width:50%;
	height:auto;
	float:left;
}
main #inner7 .blog_w{
	width:50%;
	float:right;
}
#inner7 .blog_w h3{
margin:25px 0 0 15px;
}
#inner7 .blog_w p{
	line-height:1.5rem;
	padding-left:10px;
	padding-right:5px;
	padding-top:10px;
}


#blog #inner01 .sino01 video{
	width:100%;
	height:auto;
}





#counter{
 margin-left:50%;
 margin-bottom:5px;
 }
	  
footer{
	width:100%;
	background-color:#a4a9cf;
	color:#fff;
}


footer .logo_img{
margin-left:35%;
float:left;
}
footer ul{
	margin-top:10px;
	margin-left:10px;
	float:left;
	line-height:1.5rem;
	color: #fff;
	font-size:1.2rem;
}
footer ul img{
margin-bottom:10px;
}
footer ul :nth-child(2),
footer ul :last-child{
font-size:1.0rem;
} 
footer p{
margin-top:10px;
text-align:center;
color:#515555;
padding-bottom:10px;
}

}