@charset "utf-8";
/* CSS Document */
/*sp*/
@media only screen and (max-width: 768px) {
.drawer_menu a {
color: inherit;
text-decoration: none;
}
.drawer_menu a:visited {
color: inherit;
}
.drawer_menu .drawer_bg {
width: 100%;
height: 100%;
position: fixed;
z-index: 999;
background-color: rgba(0,0,0, 0.7);
display: none;
top: 0;
left: 0;
}
.drawer_menu .drawer_button {
display: block;
background-color: #121212;
color: #fff;
border: none;
padding: 10px;
width: 62px;
letter-spacing: 0.1em;
cursor: pointer;
position: fixed;
top: 0;
right: 0;
height: 62px;
z-index: 1001;
text-align: center;
outline: none;
}
.drawer_menu .drawer_button.active .drawer_bar {
width: 30px;
}
.drawer_menu .drawer_button.active .drawer_bar1 {
transform: rotate(30deg);
}
.drawer_menu .drawer_button.active .drawer_bar2 {
opacity: 0;
}
.drawer_menu .drawer_button.active .drawer_bar3 {
transform: rotate(-30deg);
}
.drawer_menu .drawer_button.active .drawer_menu_text {
display: none;
}
.drawer_menu .drawer_button.active .drawer_close {
display: block;
}
.drawer_menu .drawer_bar {
display: block;
height: 2px;
background: #fff;
width: 30px;
margin: 5px auto;
transition: all 0.2s;
transform-origin: 0 0;
}
.drawer_menu .drawer_text {
text-align: center;
font-size: 10px;
}
.drawer_menu .drawer_close {
letter-spacing: 0.08em;
display: none;
}
.drawer_menu .drawer_menu_text {
display: block;
}
.drawer_menu .drawer_nav_wrapper {
width: 250px;
height: 100%;
transition: all 0.2s;
transform: translate(250px);
position: fixed;
top: 0;
right: 0;
z-index: 1000;
background-color: #FFF;
/* ドロワーメニュー内背景色 */
overflow-x: hidden;
overflow-y: auto;
}
.drawer_menu .drawer_nav {
display: block;
position: relative;
margin-top: 40px;
}
.drawer_menu .drawer_nav li {
background-color: #fff;
height: auto;
line-height: 50px;
/*  ドロワーメニューリスト項目高さ */
position: relative;
border-bottom: 1px solid #eee;
}
.drawer_menu .drawer_nav li a {
background-color: #fff;
/* ドロワーメニューリスト背景色 */
color: #555;
/* ドロワーメニューリスト文字色 */
display: block;
text-align: left;
padding: 10px;
font-size: .9rem;
line-height: 1.5em;
font-weight: 300;
padding-left: 20px;
}
.drawer_nav li a span.en {
display: block;
font-size: .5rem;
font-weight: 300;
line-height: 1;
color: #00488a;
border-left: 1px solid #00488a;
padding:0 0 0 5px;
margin-bottom: 5px;
}
.drawer_nav li a span.jp {
font-size: .7rem;
font-weight: 300;
color: #000;
}
/* スマートフォン2階層目 */
.drawer_menu .drawer_nav li:hover ul.second-level {
display: block;
}
.drawer_menu .drawer_nav li ul.second-level {
display: none;
position: relative;
padding: 10px;
z-index: 1001;
}
.drawer_menu .drawer_nav li ul.second-level li a {
padding-left: 40px;
}
.drawer_menu .drawer_nav li ul.second-level li:hover {
background: #dadada;
}
.drawer_menu .drawer_nav_wrapper.open {
transform: translate(0);
}
.drawer_menu.left .drawer_button {
right: auto;
left: 32px;
}
.drawer_menu.left .drawer_nav_wrapper {
transform: translate(-250px);
right: auto;
left: 0;
}
.drawer_menu.left .drawer_nav_wrapper.open {
transform: translate(0);
}
.pc-hidden {
text-align: center;
}
.touch-btn {
color: #555;
position: absolute;
top: .25rem;
right: 2%;
display: block;
z-index: 10;
width: 50px;
height: 50px;
text-align: center;
vertical-align: middle;
}
}