@charset "utf-8";

/* CSS Document */

@media only screen and (min-width: 769px) {
#slideMenu {
    /*display: none;*/
}
}
@media only screen and (max-width: 768px) {
.sp {
    display: none !important;
}
.pc {
    display: block !important;
}
/*----------  メニュー バツボタン  ----------*/


#submenu_btn {
    width: 46px;
    height: 36px;
    display: table;
    position: absolute;
    top: 9px;
    right: 20px;
    cursor: pointer;
    transition-property: top, right;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    z-index: 20;
    border: #777 solid 1px;
    border-radius: 3px;
}
.spnav_line1 {
    width: 25px;
    height: 3px;
    background-color: #fff;
    top: 10px;
    right: 10px;
    position: absolute;
}
.spnav_line2 {
    width: 25px;
    height: 3px;
    background-color: #fff;
    top: 17px;
    right: 10px;
    position: absolute;
}
.spnav_line3 {
    width: 25px;
    height: 3px;
    background-color: #fff;
    top: 24px;
    right: 10px;
    position: absolute;
}
.spnav_line1, .spnav_line2, .spnav_line3 {
    transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out; /* Opera */
    -moz-transition: all 0.4s ease-out; /* Firefox */
    -webkit-transition: all 0.4s ease-out; /* GoogleChrome, Safari */
    -ms-transition: all 0.4s ease-out; /* IE */
}
#submenu_btn.show img {
    display: none;
}
#submenu_btn.show .spnav_line1 {
    top: 5px;
    width: 25px;
    height: 3px;
    background-color: #807e92;
    -o-transform: rotate(405deg);
    -moz-transform: rotate(405deg);
    -webkit-transform: rotate(405deg);
    -ms-transform: rotate(405deg);
    transform: rotate(405deg);
}
#submenu_btn.show .spnav_line2 {
    opacity: 0;
}
#submenu_btn.show .spnav_line3 {
    top: 5px;
    width: 25px;
    height: 3px;
    background-color: #807e92;
    -o-transform: rotate(-405deg);
    -moz-transform: rotate(-405deg);
    -webkit-transform: rotate(-405deg);
    -ms-transform: rotate(-405deg);
    transform: rotate(-405deg);
}
section .inner {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    /*overflow: hidden;*/
}
/* スライドメニュー */

.slideMenu {
    position: fixed;
    height: 100%;
    width: 100%;
    right: -100%;
    top: 0;
    background: rgba(0,0,0,0.8);
    font-size: 16px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 50;
    -o-transition: all 0.3s ease-out; /* Opera */
    -moz-transition: all 0.3s ease-out; /* Firefox */
    -webkit-transition: all 0.3s ease-out; /* GoogleChrome, Safari */
    -ms-transition: all 0.3s ease-out; /* IE */
}
#slideMenu.show1 {
    right: 0;
}
.slideMenu nav {
    height: 100%;
    width: 100%;
    position: relative;
    float: right;
    margin-top: 98px;
}

/*
↓↓↓ スライドメニュー修正後 ↓↓↓----------------------------------------------------------------------------------------
*/
.sub-l-1{
    height:0;
}
.sub-l-1.on{
    height:233.5px;
}
.sub-l-2{
    height:0;
}
.sub-l-2.on{
    height:233px;
    margin-top: 66px
}
.sub-l-3{
    height:0;
}
.sub-l-3.on{
    height: 178px;
    margin-top: 132px;
}
.sub-l-4{
    height:0;
}
.sub-l-4.on{
    height: 345px;
    margin-top: 198px;
}
.sub-l-6.on{
    height: 300px;
    margin-top: 198px;
}
.sub-m{
    float:left;
    width: 100%;
    margin-bottom: 0;
    /*border-right: 1px solid #fff;*/
    border-bottom: 1px solid #fff;
}
.sub-m.open {
    border-bottom: 0;
}
.sub-m > span {
    line-height: 65px;
    padding-left: 14px;
    display: block;
    background-color: #493830;
    color: #fff;
    font-size: 20px;
    background: url(../images/common/slideMenu_icon_002.png) 93% center no-repeat rgba(0,0,0,0.85);
    background-size: 10px 10px;
}
.sub-m.open > span {
    font-size: 20px;
    font-weight: 600;
    background: url(../images/common/slideMenu_icon_001.png) 93% center no-repeat rgba(66, 80, 91, 0.85);
}
@media only screen and (max-width: 640px) {
.sub-m{
    width: 100%;
}
}
@media only screen and (max-width: 480px) {
.sub-m{
    width: 100%;
}
.sub-m > span {
    font-size: 16px;
}
.sub-m.open > span {
    font-size: 18px;
}
}
@media only screen and (max-width: 411px) {
.sub-m > span {
    font-size: 16px;
}
.sub-m.open > span {
    font-size: 15px;
}
}
.sub-m.open > span:before {
    content: '>';
}

.sub-m div {
    background-color: rgba(66, 80, 91, 0.85);
    overflow: hidden;
    width: 100%;
    /*margin-left: 1px;*/
    position: relative;
}
.sub-m div p{
    width:100%;
    /*float: left;*/
    margin: 0 -1px 0 1px;
    /*border-right: 1px solid #777;*/
    /*border-bottom: 1px solid #777;*/
    border-top: 1px solid #777;
}
@media only screen and (max-width: 480px) {
.sub-m div p{
    width: 100%;
}
}
@media only screen and (max-width: 414px) {
.sub-m div p{
    width: 100%;
}
}

#sub-m-2 > div,
#sub-m-4 > div,
#sub-m-6 > div,
#sub-m-8 > div,
#sub-m-11 > div {
    /*left: -100%;*/
}
#sub-m-9 a span,#sub-m-5 a span,#sub-m-1 a span,#sub-m-2 a span,#sub-m-10 a span,#sub-m-11 a span{
    line-height: 44px;
    padding: 10px 10px 10px 15px;
    display: block;
    color: #fff;
    background-color: rgba(0,0,0,0.85);
    /*border-right: 1px solid #777;*/
    border-bottom: 1px solid #777;
    font-size: 18px;
    text-decoration: none;
}
#sub-m-9 a ,#sub-m-5 a ,#sub-m-1 a,#sub-m-10 a,#sub-m-11 a {
    text-decoration: none;
}
#sub-m-9 a:hover,
#sub-m-9 a:focus,
#sub-m-9 a:active{
    color: #fff;
}
/*
#sub-m-2.open{
    height:177.5px
}
#sub-m-1.open{
    height:345.5px;
}
*/
#sub-close span{
    background: rgba(0,0,0,0.85);
    font-size: 24px;
    text-align: right;
    padding-right: 5px;
}
#sub-close span.triangle{
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 13px solid #fff;
    float: right;
    background: rgba(0,0,0,0);
    margin: 21px -15px 0 15px;
}
@media only screen and (max-width: 640px) {
#sub-close span{
    font-size: 20px;
}
}
/*
↑↑↑ スライドメニュー修正後 ↑↑↑----------------------------------------------------------------------------------------
*/
.slideMenu p a {
    line-height: 35px;
    padding: 10px 0 10px 10px;
    display: block;
    color: #fff;
    font-size: 16px;
}
@media only screen and (max-width: 375px) {
.slideMenu p a {
    font-size: 14px;
}
}
@media only screen and (max-width: 359px) {
.slideMenu p a {
    font-size: 14px;
}
}
.line {
    border-bottom: 1px solid #fff;
/*    background-color: #292828; */
    background-color: rgba(0,0,0,0.8);
}
.hide {
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    -moz-transition-duration: 0.1s;
    -webkit-transition-duration: 0.1s;
    -o-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.show {
    -moz-transition-duration: 0.1s;
    -webkit-transition-duration: 0.1s;
    -o-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -moz-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    max-height: 3000px;
    overflow: hidden;
}
 @media screen and (max-width: 1024px) {
 #menu {
 width: 60%;
 position:inherit !important;
}
 #submenu li {
 margin-left:3% !important;
}
/*#submenu_btn{
        top:30px;
    }*/

 @media screen and (max-width: 800px) {
.sp {
 display:block !important;
}
 .pc {
 display:none !important;
}
}