@charset "UTF-8";
/* Scss Document */
/*-----------------*/
/* 
--------------------------------------------------------- */
/* VWはSPのみ利用
--------------------------------------------------------- */
/*=============================
.btn-trigger
=============================*/
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css";
.add--mn { color: #000; font-size: 200%; z-index: 999; }

.btn-trigger { position: relative; /*width: 100px;*/ width: 70px; height: 70px; cursor: pointer; background: #003670; text-align: center; }
@media (max-width: 750px) { .btn-trigger { position: relative; width: 7rem; height: 7rem; background: none; cursor: pointer; text-align: center; } }

.btn-trigger span { position: absolute; left: 21px; width: 28px; height: 4.6px; background-color: #fff; border-radius: 0px; margin: 0 auto; text-align: center; }
@media (max-width: 750px) { .btn-trigger span { background-color: #000; width: 50%; /*left: pxvw(20);*/ left: 20px; } }

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

.btn-trigger span:nth-of-type(1) { top: 23px; }
@media (max-width: 750px) { .btn-trigger span:nth-of-type(1) { /*top: pxvw(20);*/ top: 23px; } }

.btn-trigger span:nth-of-type(2) { top: 36px; }
@media (max-width: 750px) { .btn-trigger span:nth-of-type(2) { top: 33px; } }

.btn-trigger span:nth-of-type(3) { top: 48px; }
@media (max-width: 750px) { .btn-trigger span:nth-of-type(3) { /*top: pxvw(50);*/ top: 43px; } }

/*=============================
#btn01
=============================*/
#btn01.active { z-index: 1200; width: 70px; height: 70px; }

#btn01.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg); width: 30%; left: 25px; }
@media (max-width: 750px) { #btn01.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg); width: 30%; left: 35px; } }

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

#btn01.active span:nth-of-type(3) { -webkit-transform: translateY(-15px) rotate(45deg); transform: translateY(-15px) rotate(45deg); width: 30%; left: 25px; }
@media (max-width: 750px) { #btn01.active span:nth-of-type(3) { -webkit-transform: translateY(-10px) rotate(45deg); transform: translateY(-10px) rotate(45deg); width: 30%; /* left: pxvw(30);*/ left: 35px; } }

/*=============================
#btn01
=============================*/
.drow--btn { padding: 0 !important; margin-left: 30px; }
@media (max-width: 750px) { .drow--btn { margin-left: 0.1rem; } }
.drow--btn img { vertical-align: bottom; }

.drawer_menu { display: block; z-index: 500; height: 70px; /*+++ Default Button Color +++*/ }
@media (max-width: 750px) { .drawer_menu { max-height: 70px; height: 100%; } }
.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(51, 51, 51, 0.5); display: none; top: 0; left: 0; }
.drawer_menu .drawer_button { display: block; background-color: #003670; color: #FFF; border: none; padding: 5px; width: 100px; height: 100px; letter-spacing: 0.1em; cursor: pointer; /*	position: fixed;*/ position: static; top: 0px; right: 0px; z-index: 1001; text-align: center; outline: none; text-align: center; }
.drawer_menu .drawer_bar { background-color: #FFF; display: block; height: 6px; width: 60%; margin: 10px auto; transition: all 0.2s; transform-origin: 0 0; text-align: center; }
.drawer_menu .drawer_text { text-align: center; font-size: 2rem; }
.drawer_menu .drawer_close { letter-spacing: 0.08em; display: none; }
.drawer_menu .drawer_menu_text { display: block; }
.drawer_menu .drawer_nav_wrapper { width: 50%; height: 100%; transition: all 0.2s; transform: translate(100%); position: fixed; top: 0; right: 0; z-index: 1000; /*	background-color: #F5F7F8;*/ background-color: rgba(255, 255, 255, 0.8); /* ドロワーメニュー内背景色 */ overflow-x: hidden; overflow-y: auto; }
@media (max-width: 750px) { .drawer_menu .drawer_nav_wrapper { width: 80%; } }
.drawer_menu .drawer_nav { display: block; /*position: relative;*/ position: static; margin-top: 70px; list-style-type: none; }
@media (max-width: 750px) { .drawer_menu .drawer_nav { margin-top: 70px; } }
.drawer_menu .drawer_nav li { background-color: #FFF; height: auto; /*	line-height: 50px;*/ /*  ドロワーメニューリスト項目高さ */ /*position: relative;*/ color: #000; position: static; border-top: 1px solid #000; list-style-type: none; }
.drawer_menu .drawer_nav li a { background-color: #FFF; /* ドロワーメニューリスト背景色 */ /* ドロワーメニューリスト文字色 */ display: block; text-align: left; color: #000; padding: 20px 0 10px 20px; }
@media (max-width: 750px) { .drawer_menu .drawer_nav li a { padding: 10px 0 10px 15px; color: #000; } }

.drawer_menu .drawer_nav li { background-color: #fff; height: auto; line-height: 40px; /*  ドロワーメニューリスト項目高さ */ position: relative; /*	border-bottom: 1px solid #eee;*/ list-style-type: none; padding: 0 0px !important; }

.drawer_menu .drawer_nav li a { color: #000 !important; display: block; text-align: left; padding-left: 20px; font-size: 2rem; }
@media (max-width: 750px) { .drawer_menu .drawer_nav li a { font-size: 1.6rem; } }

/* スマートフォン2階層目 */
.drawer_menu .drawer_nav li ul.second-level { display: none; position: relative; padding: 0; z-index: 1001; font-size: 2rem; }
@media (max-width: 750px) { .drawer_menu .drawer_nav li ul.second-level { font-size: 1.6rem; } }

.drawer_menu .drawer_nav li ul.second-level li a { padding-left: 40px; font-size: 2rem; }
@media (max-width: 750px) { .drawer_menu .drawer_nav li ul.second-level li a { font-size: 1.6rem; } }

.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); }

/*■のデザイン*/
.touch-btn { color: #FFF; position: absolute; /*	position: static;*/ top: 0; right: 0; display: block; z-index: 10; width: 100%; height: 50px; text-align: center; vertical-align: middle; /* background-color:rgba(255,255,255,0.8);*/ height: 100%; }
.touch-btn i { position: absolute; top: 3rem; right: 5%; color: #000; font-size: 2rem; }
@media (max-width: 750px) { .touch-btn i { top: 1.5rem; } }

/*
############################ContentsMenu############################
*/
@media (max-width: 750px) { .sp-single-nav { display: block; width: 100%; background-color: #E4E4E4; color: #000; vertical-align: middle; text-align: left; padding: 1em; box-sizing: border-box; padding: 0.5em 1.5em; color: #000; font-size: 1.8rem; }
  .select { position: relative; display: block; margin: 0 auto; width: 100%; /*max-width: 325px;*/ max-width: 100%; color: #000; vertical-align: middle; text-align: left; user-select: none; -webkit-touch-callout: none; }
  .select .placeholder { position: relative; display: block; background-color: #E4E4E4; z-index: 1; padding: 0.5em 1.5em; color: #000; cursor: pointer; font-size: 1.8rem; }
  .select .placeholder:hover { background: #34383c; }
  .select .placeholder:after { position: absolute; right: 1em; top: 50%; transform: translateY(-50%); font-family: 'FontAwesome'; content: '\f078'; z-index: 10; color: #000; }
  .select.is-open .placeholder:after { content: '\f077'; }
  .select.is-open ul { display: block !important; }
  .select.select--white .placeholder { background: #E4E4E4; color: #000; }
  .select.select--white .placeholder:hover { background: #fafafa; }
  .select .dispN { display: none !important; position: absolute; overflow: hidden; overflow-y: auto; width: 100%; background: #E4E4E4; border-radius: 2px; top: 100%; left: 0; list-style: none; margin: 0px; padding: 0; z-index: 100; /*max-height: 120px;*/ }
  .select .dispN li { display: block; text-align: left; color: #999; cursor: pointer; border-top: 1px solid #707070; }
  .select .dispN li:last-child { border-bottom: 1px solid #707070; }
  .select .dispN li a { display: block; width: 100%; padding: 1em 1em 1em 2em; box-sizing: border-box; }
  .select .dispN li a:hover { background: #000; color: #fff; } }