@charset "utf-8";
/* CSS Document */

/*PC:body-------------------------------------*/
@media screen and (min-width:1084px) {

.toggleSpc {display: none !important;}
.toggle {display: none !important;}
#nav {display: none !important;}

/* Global Navigation */
.menu {background: #FFFFFF; width: 100%; height: 46px; margin: 0 0 3px; padding: 0; box-sizing: border-box;  border-bottom: 1px solid #CCCCCC;}
.menu ul {width: 100%; max-width: 1200px;  list-style-type: none; padding-left: 0px; margin: 0px auto;}
.menu ul li {float: left; width: 14.2857%; width: calc( 100% / 7); height: 44px;}
.menu ul li a {background: #FFFFFF; float: left; height: 44px; width: 100%; color: #2D2D2D; font-family: "メイリオ"; font-size: 14px; line-height: 44px; text-align: center; border-right: solid 1px #CCCCCC; border-left: solid 1px #CCCCCC;}
.menu ul li a:hover {background: #406C3A; float: left; height: 44px; width:100%; color: #FFF; font-family: "メイリオ"; font-size: 14px; line-height: 44px; text-align: center; text-decoration: none;}

#bNav {display: none !important;}
.bRgba {display: none !important;}

.fixed {position: fixed; top: 0; left: 0; width: 100%; z-index: 9999;}

}

/*TB:body-------------------------------------*/
@media screen and (min-width: 560px) and (max-width: 1083px) {

.toggleSpc {display: none !important;}
.toggle {display: none !important;}
#nav {display: none !important;}

/* Global Navigation */
.menu {background: #FFFFFF; width: 100%; height: 46px; margin: 0 0 3px; padding: 0; box-sizing: border-box;}
.menu ul {width: 100%; list-style-type: none; padding-left: 0px; margin: 0px auto;}
.menu ul li {float: left; width: 14.2857%; width: calc( 100% / 7); height: 44px;}
.menu ul li a {background: #FFFFFF; float: left; height: 44px; width: 100%; color: #2D2D2D; font-family: "メイリオ"; font-size: 14px; line-height: 44px; text-align: center; border: 1px solid #CCCCCC; box-sizing: border-box;}
.menu ul li a:hover {background: #406C3A; float: left; height: 44px; width:100%; color: #FFF; font-family: "メイリオ"; font-size: 14px; line-height: 44px; text-align: center; text-decoration: none;}

#bNav {display: none !important;}
.bRgba {display: none !important;}

}

/*SP:body-------------------------------------*/
@media screen and (max-width: 559px) {

/* Global Navigation */
.menu {background: #FFFFFF; width: 98%; margin: 0 1% 3px; padding: 0; box-sizing: border-box;}

.menuTop {float: left; width: 100%; height: 44px; margin: 5px 0;}
.menuTop a {float: left; width: 100%; height: 44px; line-height: 44px; text-align: center; background: #F28A1B; color: #FFFFFF; border-radius: 5px;}
.menuTop a:hover {background: #406C3A; float: left; width: 100%; height: 44px; line-height: 44px; text-decoration: none; color: #FFFFFF;}

.menu ul {width: 100%; list-style-type: none; padding-left: 0px; margin: 0px auto;}
.menu ul li {float: left; width: 33.33333%; width: calc( 100% / 3); height: 44px;}
.menu ul li a {background: #FFFFFF; float: left; height: 44px; width: 100%; color: #2D2D2D; font-family: "メイリオ"; font-size: 14px; line-height: 44px; text-align: center; border: 1px solid #CCCCCC;}
.menu ul li a:hover {background: #406C3A; float: left; height: 44px; width:100%; color: #FFF; font-family: "メイリオ"; font-size: 14px; line-height: 44px; text-align: center; text-decoration: none;}

/*toggleStyle*/
.toggleSpc {display: block; position: fixed; top: 0; width: 100%; height: 68px; z-index: 9998; background: #FFFFFF; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); overflow-x: hidden;}

#logo {width: 240px; height: 68px; float: left; font-family: 'Lora', serif;}
#logo a {width: 240px; height: 68px; float: left; margin: 18px 0 0 15px; font-family: 'Lora', serif; font-size: 18px; line-height: 18px; font-weight: bold; color: #242424; text-decoration: none;}
#logo p {font-family: 'Lora', serif; font-size: 14px; line-height: 14px;}
.call {display: block; position: fixed; right: 68px; top: 10px; width: 50px; height: 50px; cursor: pointer; z-index: 9999; background: #FFFFFF; text-align: center; border-radius: 5px;}
.call a img {width: 50px;}
 
.toggle {display: block; position: fixed; right: 13px; top: 8pt; width: 48px; height: 48px; cursor: pointer; z-index: 9999; background: #FFFFFF; text-align: center; border-radius: 5px; border: solid 1px #405C3C;}
.toggle span {display: block; position: absolute; width: 35px; border-bottom: solid 2px #405C3C; -webkit-transition:.35s ease-in-out; -moz-transition:.35s ease-in-out; transition:.35s ease-in-out; left: 6px;}
.toggle span:nth-child(1) {top: 9px;}
.toggle span:nth-child(2) {top: 18px;}
.toggle span:nth-child(3) {top: 27px;}
 
.toggle.active span:nth-child(1) {top: 18px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg);}
.toggle.active span:nth-child(2),
.toggle.active span:nth-child(3) {top: 18px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);}
.toggle span:nth-child(4){border: 0; color: #405C3CD; font-size: 9px; font-weight: 700; top: 32px}

#nav {position: fixed; margin-top: 70px; top: 0; right: 0; width: 300px; height: calc(100% - 70px); background-color: rgba(255,255,255,0.9); transition: all 0.2s; transform: translate(300px); z-index: 1000; border-left: solid 1px #CCC; overflow-y: scroll; -webkit-overflow-scrolling: touch;}
#nav.open {transform: translate(0);}
#nav ul {margin: 0; padding: 1em; list-style-type: none; overflow: auto;}
#nav ul li {padding: 10px 0; font-size: 14px; border-bottom: 1px solid #CCC;}
#nav ul li a {display: block; text-decoration: none; color: #000000; text-align: left;}
.liinner {padding-top: 0; margin-top: 0;}
.litel {color: #2D2D2D; font-weight: bold; font-size: 16px;}

#bNav {width: 100%; height: 45px; margin: 0; padding: 5px 0 0; position: fixed; bottom: 0; left: 0; z-index: 999; background-color: rgba(0,0,0,0.5);}
#bNav ul {width: 100%; max-width: 355px; margin: 0 auto; padding: 0; list-style-type: none; overflow: hidden;}
#bNav ul li {float: left; margin: 0 0 0 10px;}

#bnavCall {width: 88px; height: 40px; float: left;}
#bnavCall a {width: 88px; height: 36px; line-height: 36px; font-size: 16px; color:#FFFFFF; background: #F28A1B; border-radius: 5px; text-align: center; border: solid 2px #FFFFFF; float: left;}
#bnavCall a:hover {width: 88px; height: 36px; line-height: 36px; color:#FFFFFF; background: #F28A1B; float: left; text-decoration: none;}

#bnavMb {width: 88px; height: 40px; float: left;}
#bnavMb a {width: 88px; height: 36px; line-height: 36px; font-size: 16px; color:#FFFFFF; background: #F28A1B; border-radius: 5px; text-align: center; border: solid 2px #FFFFFF; float: left;}
#bnavMb a:hover {width: 88px; height: 36px; line-height: 36px; color:#FFFFFF; background: #F28A1B; float: left; text-decoration: none;}

#bnavTop {width: 88px; height: 40px; float: left;}
#bnavTop a {width: 88px; height: 36px; line-height: 36px; font-size: 16px; color:#FFFFFF; background: #F28A1B; border-radius: 5px; text-align: center; border: solid 2px #FFFFFF; float: left;}
#bnavTop a:hover {width: 88px; height: 36px; line-height: 36px; color:#FFFFFF; background: #F28A1B; float: left; text-decoration: none;}

#bnavBack {width: 40px; height: 40px; float: left;}
#bnavBack a {width: 40px; height: 36px; line-height: 36px; font-size: 32px; font-weight: bold; color: #405C3C; background: #F3D300; border-radius: 5px; text-align: center; border: solid 2px #FFFFFF; float: left;}
#bnavBack a:hover {width: 40px; height: 36px; line-height: 36px; color: #405C3C; background: #F3D300; float: left; text-decoration: none;}

}