@charset "utf-8";

*{
margin:0;
padding:0;
}

a{
color:#333;
text-decoration:none;
}

a:hover {
color:#333;
text-decoration:none;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;	
padding: 0;
}

article, aside, canvas, footer, header, hgroup, nav, section, figure, figcaption { 
display: block;
margin: 0;
padding: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
}

table {
border-collapse: collapse;	
border-spacing: 0;
}

caption, th	{
text-align: left;
}

q:before ,q:after {
content: '';
}

object, embed {
vertical-align: top;
}

hr, legend {
display: none;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}

img, abbr, acronym, fieldset {
border: 0;
vertical-align: bottom;
}

li {
list-style-type: none;
}

.small {
  font-size: 1rem;
  font-weight: normal;
}

/*----------------------------------------------------------------------------------------------------------------------br_sp----------*/

.br_sp{ display:none; }

.br_no_sp{ display:inline; }

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

.br_ip{ display:inline; }

.br_no_ip{ display:none; }

}

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

.br_sp{ display:inline; }

.br_no_sp{ display:none; }

}

/*----------------------------------------------------------------------------------------------------------------------sp_menu----------*/

#sp_menu{ display: none; }

#sp_menu{
display: block;
position:fixed;
top:0;
left:0;
z-index:200;
width:100%;
}

.menu-trigger,
.menu-trigger span {
display: inline-block;
transition: all .3s;
box-sizing: border-box;
}

.menu-trigger {
position: relative;
width: 70px;
height: 70px;
}

.menu-trigger span {
position: absolute;
left: 0;
width: 30%;
height: 2px;
background-color:#727272;
}

.menu-trigger span:nth-of-type(1) { top: 36%; left: 35%; }
.menu-trigger span:nth-of-type(2) { top: 47%; left: 35%; }
.menu-trigger span:nth-of-type(3) { top: 58%; left: 35%; }

.menu-trigger.active span:nth-of-type(1) {
-webkit-transform: translateY(6px) rotate(-45deg);
transform: translateY(6px) rotate(-45deg);
background-color:#333;
}

.menu-trigger.active span:nth-of-type(2) { opacity: 0; }

.menu-trigger.active span:nth-of-type(3) {
-webkit-transform: translateY(-6px) rotate(45deg);
transform: translateY(-6px) rotate(45deg);
background-color:#333;
}

#sp_menu .btn {
position: absolute;
top:10px;
right:0;
z-index:1000;
}

#sp_menu .drawr {
border-top:5px solid #f6ce39;
display: none;
/*background-color:rgba(80,183,174,1);*/
background:rgba(246,206,57,1);
position: absolute;
top:0;
right:0;
width:100%;
z-index: 999;
font-size:15px;
}

.sp_inner{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width:78%;
}

.drawr h1{
position: absolute;
top:0;
left:0;
}

.drawr .btn_lang{
position: absolute;
top:8px;
left:72px;
font-size:15px;
}

.drawr .btn_lang a{ color:#666; }

.btn_lang .active{
border-bottom:3px solid #ADDAF4;
padding-bottom:5px;
color:#ADDAF4;
}

.drawr ul{ 
overflow:hidden;
margin-top:60px;
}

.drawr li{ 
width:100%;
}

.drawr li:first-child{ border-top:1px solid #fff; }

.drawr li a{
display:block;
width:100%;
height:60px;
border-bottom:1px solid #fff;
background-size:5px 8px;
color: #5D5D5D;
font-weight: bold;
padding:16px 0;
line-height: 4;
}

#sp_anchor li a:before {
  content: "\f105";
  font-family: "FontAwesome";
  margin-right: 5px;}

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

#sp_menu{
display: block;
position:fixed;
top:0;
left:0;
z-index:200;
width:100%;
}

.menu-trigger,
.menu-trigger span {
display: inline-block;
transition: all .3s;
box-sizing: border-box;
}

.menu-trigger {
position: relative;
width: 80px;
height: 80px;
}

.menu-trigger span {
position: absolute;
left: 0;
width: 30%;
height: 2px;
background-color:#727272;
}

.menu-trigger span:nth-of-type(1) { top: 36%; left: 35%; }
.menu-trigger span:nth-of-type(2) { top: 47%; left: 35%; }
.menu-trigger span:nth-of-type(3) { top: 58%; left: 35%; }

.menu-trigger.active span:nth-of-type(1) {
-webkit-transform: translateY(6px) rotate(-45deg);
transform: translateY(6px) rotate(-45deg);
background-color:#333;
}

.menu-trigger.active span:nth-of-type(2) { opacity: 0; }

.menu-trigger.active span:nth-of-type(3) {
-webkit-transform: translateY(-6px) rotate(45deg);
transform: translateY(-6px) rotate(45deg);
background-color:#333;
}

#sp_menu .btn {
position: absolute;
right:0;
z-index:1000;
}

#sp_menu .drawr {
border-top:5px solid #f6ce39;
display: none;
/*background-color:rgba(80,183,174,1);*/
background:rgba(246,206,57,1);
position: absolute;
top:0;
right:0;
width:100%;
z-index: 999;
font-size:15px;
}

.sp_inner{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width:78%;
}

.drawr h1{
position: absolute;
top:0;
left:0;
}

.drawr .btn_lang{
position: absolute;
top:8px;
left:72px;
font-size:15px;
}

.drawr .btn_lang a{ color:#666; }

.btn_lang .active{
border-bottom:3px solid #ADDAF4;
padding-bottom:5px;
color:#ADDAF4;
}

.drawr ul{ 
overflow:hidden;
margin-top:60px;
}

.drawr li{ width:100%; }

.drawr li:first-child{ border-top:1px solid #fff; }

.drawr li a{
display:block;
width:100%;
height:60px;
line-height:60px;
border-bottom:1px solid #fff;
background:url("../images/sp_menu_yajirushi.png") no-repeat right 2% center;
background-size:5px 8px;
color: #5D5D5D;
font-weight: bold;
}

}


@media screen and (max-width:740px){
	
#sp_menu .btn { top:0px; }

.drawr li a{
height:45px;
line-height:45px;
}
	
}

/*------------ fontStyle------------*/
body {
font-family: 'Roboto', 'Osaka', 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
font-size: 12px;
line-height: 2.2;
color:#333;
letter-spacing:1px;
-webkit-text-size-adjust:100%;
}

/*-----------------------------------------------------------------------------------------------------------clearfix-----------------*/

.clearfix{ /zoom:1; }
.clearfix:after{ content : ''; display : block; clear : both; height:0; }
.clearfix{ overflow:hidden; }