@charset "UTF-8";

/* --------------------------------------------------
 Base
-------------------------------------------------- */
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
 
body,ol,ul,dl,li,dt,dd,table,th,td,input,textarea,select,h1,h2,h3,h4,h5,h6{
color:#000;
font-weight:normal;
font-family:"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Noto Sans Japanese', Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif; /* Gothic */
font-weight:300;
letter-spacing:0;
margin:0;
padding:0;
-webkit-text-size-adjust:100%;
}

body{
min-width:320px;
line-height:2.4;
font-size:100%;
word-wrap:break-word;
position:relative;
overflow-x:hidden;
}

@media screen and (max-width: 767px) {
body{
font-size:85%;
line-height:1.8;
}
}

img{
max-width:100%;
vertical-align:middle;
}

input{
padding:5px 8px;
}

textarea{
padding:3px;
}

ol{
margin:0px 0px 0px 21px;
}

ol > li{
list-style:decimal outside;
margin:0px 0px 3%;
}

a:link,
a:visited{
color:#000;
text-decoration:underline;
outline:0;
}

a:hover,
a:active{
color:#222;
text-decoration:none;
}

em{
font-style:normal;
font-weight:bold;
color:#000;
}

strong{
font-style:normal;
font-weight:bold;
}

/* --------------------------------------------------
 Wrapper
-------------------------------------------------- */
#wrapper{
width:100%;
}


/* --------------------------------------------------
 Pure-drawer
-------------------------------------------------- */
#leftArea{
background-color:#000;
display:none;
float:left;
left:0;
position:relative;
text-align:center;
top:0;
z-index:999;
}

#leftInner{
box-sizing:border-box;
min-width:300px;
height:102%;
overflow:scroll;
padding:0 0 10%;
width:104%;
}

#leftArea .catchTxt{
font-size:80%;
max-width:240px;
text-align:left;
margin:80px auto 0;
}

#leftArea .logo{
max-width:240px;
text-align:center;
margin:80px auto 0;
}

#leftArea .logo a{
text-decoration:none;
}

#leftArea .catchTxt + .logo{
margin-top:20px;
}

#leftArea .languageNav{
max-width:240px;
text-align:center;
margin:20px auto 30px;
padding:0 2%;
}

#leftArea .languageNav li{
display:inline-block;
}

#leftArea .languageNav li:after{
content:" ｜ ";
color:#fff;
}

#leftArea .languageNav li:last-of-type:after{
content:"";
}

#leftArea .languageNav li a{
color:#fff;
letter-spacing:0.2em;
text-decoration:none;
}

#leftArea .gNav{
max-width:240px;
margin:20px auto 30px;
padding:0 2%;
}

#leftArea .gNav li{
text-align:left;
border-bottom:1px solid #333;
}

#leftArea .gNav li.bgRed{
background-color:#b82d30;
border-bottom:none;
margin-top:3px;
}

#leftArea .gNav li a{
background:url(../img/common/arrow_right_white.png) no-repeat 98% center;
font-size:90%;
color:#ccc;
padding:5px 7%;
text-decoration:none;
display:block;
position:relative;
}

#leftArea .gNav li a:hover{
opacity:0.7;
}

#leftArea .gNav li.accordion a{
background:url(../img/common/arrow_right_white.png) no-repeat 98% center;
}

#leftArea .gNav li.accordion a.onclick{
background:url(../img/common/arrow_up_white.png) no-repeat 98% center;
}

#leftArea .gNav li.accordion a:after{
content:"";
background-color:#fff;
width:100%;
height:1px;
position:absolute;
bottom:0;
left:0;
opacity:0;
transition:all 200ms ease-in-out;
}

#leftArea .gNav li.accordion a.onclick:after{
opacity:1;
}

#leftArea .gNav li.accordion .accordContent li{
border-bottom:none;
}

#leftArea .gNav li.accordion .accordContent li a{
background:#EFF7F5 url(../img/common/arrow_right_white.png) no-repeat 98% center;
font-size:75%;
padding:10px 7% 10px 10%;
}

#leftArea .sNav{
max-width:240px;
margin:20px auto 30px;
padding:0 2%;
}

#leftArea .sNav li{
margin-top:3px;
}

#leftArea .sNav li a{
text-decoration:none;
border:1px solid #000;
padding:3px 4%;
display:block;
}

#leftArea .tel{
max-width:240px;
margin:30px auto;
padding:0 2%;
box-sizing:border-box;
}

.pure-pusher-container{
height:100%;
position:relative;
}

.pure-pusher{
height:100%;
}

input#pure-toggle-left,
label.pure-toggle-label{
display:none;
}

@media screen and (max-width: 1200px) {
#leftArea{
display:block;
height:100%;
margin-top:0;
overflow:hidden;
position:fixed;
}

.pure-pusher{
overflow-y:auto;
}
}

@media screen and (max-width: 767px) {
#leftArea .gNav li a{
padding-top:10px;
padding-bottom:10px;
}
}

@media only screen and (max-width: 40.063em) {
#leftArea .catchTxt{
max-width:300px;
}

#leftArea .logo{
max-width:300px;
}

#leftArea .languageNav{
max-width:300px;
}

#leftArea .gNav{
max-width:300px;
}

#leftArea .sNav{
max-width:300px;
}

#leftArea .tel{
max-width:300px;
}
}

@media screen and (max-width: 480px) {
#leftArea .catchTxt{
max-width:240px;
}

#leftArea .logo{
max-width:240px;
}

#leftArea .languageNav{
max-width:240px;
}

#leftArea .gNav{
max-width:240px;
}

#leftArea .sNav{
max-width:240px;
}

#leftArea .tel{
max-width:240px;
}
}


/* --------------------------------------------------
 Header
-------------------------------------------------- */
#header{
width:100%;
position:relative;
box-sizing:border-box;
}

#header .topBar{
background-color:#000;
padding:25px 2%;
position:relative;
}

#header #logo{
text-align:center;
}

#header .topBar .languageNav{
position:absolute;
right:0;
bottom:0;
}

#header .topBar .languageNav li{
display:inline-block;
}

#header .topBar .languageNav li.forSp{
display:none;
}

#header .topBar .languageNav li:after{
content:" ｜ ";
color:#fff;
}

#header .topBar .languageNav li:last-of-type:after{
content:"";
}

#header .topBar .languageNav li a{
color:#fff;
letter-spacing:0.2em;
text-decoration:none;
}

#header #gNav{
background-color:#fff;
text-align:center;
padding:20px 2%;
box-sizing:border-box;
transition:all 200ms ease-in-out;
}

#header #gNav.fixNav{
background-color:rgba(255,255,255,0.95);
width:100%;
padding-top:1%;
padding-bottom:1%;
position:fixed;
top:0;
left:0;
z-index:999;
}

#header #gNav ul{
letter-spacing:-0.4em;
}

#header #gNav ul li{
letter-spacing:normal;
padding:0 1%;
display:inline-block;
}

#header #gNav ul li a{
font-size:120%;
text-decoration:none;
transition:all 200ms ease-in-out;
}

#header #gNav ul li a:hover{
opacity:0.6;
}

@media screen and (max-width: 1440px) {
#header .topBar .languageNav li a{
font-size:90%;
}

#header #gNav ul li a{
font-size:100%;
}
}

@media screen and (max-width: 1200px) {
#header .topBar{
padding-top:10px;
padding-bottom:10px;
}

#header #logo{
max-width:260px;
margin-left:auto;
margin-right:auto;
}

#header .topBar .languageNav{
width:22%;
}

#header .topBar .languageNav li.forPc,
#header .topBar .languageNav li:last-of-type{
display:none;
}

#header .topBar .languageNav li.forSp{
padding:4% 0 4% 20%;
position:relative;
display:block;
}

#header .topBar .languageNav li.forSp:after{
content:"";
background-color:#fff;
width:1px;
height:20px;
margin:auto 0;
position:absolute;
top:0;
bottom:0;
left:0;
}

#header .topBar .languageNav li:after{
content:"";
}

#header .topBar .languageNav li a{
letter-spacing:0.1em;
}

#header #gNav{
display:none;
}
}

@media screen and (max-width: 1000px) {
}

@media screen and (max-width: 767px) {
#header .topBar{
padding-top:15px;
padding-bottom:15px;
}

#header #logo{
padding:0 26% 0 14%;
}
}

@media screen and (max-width: 480px) {
#header .topBar{
padding-top:20px;
padding-bottom:20px;
}
}


/* --------------------------------------------------
 Contents
-------------------------------------------------- */
#contents{
width:100%;
position:relative;
z-index:1;
}

@media screen and (max-width: 1000px) {
}

@media screen and (max-width: 767px) {
}

@media screen and (max-width: 480px) {
}



/* --------------------------------------------------
 Footer
-------------------------------------------------- */
#footer{
width:100%;
padding:2% 0;
box-sizing:border-box;
}

#footer .copyright{
font-size:90%;
text-align:center;
padding:10px 0;
}

@media screen and (max-width: 1000px) {
}

@media screen and (max-width: 767px) {
}

@media screen and (max-width: 480px) {
}

.hide{
opacity:0;
}

@media screen and (max-width: 1200px) {
.hide{
opacity:1;
}
}