@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


/* PCヘッダー */

ul{
display: flex;
}

#menu-container{
width: 100%;
margin: 0 auto;
background: #fff;
position: relative;
font-family: "Roboto", sans-serif;
font-size: 16px;
border-bottom: 1px solid #bbb;
color: #474747;
z-index: 9990;
letter-spacing: .06em;
height: 60px;
}

#menu-container a{
color: #474747;
transition: 0.35s;
}

#menu-container a:hover{
color: #751c3a;
}

#menu-container .menu ul, 
#menu-container .menu li{
-ms-overflow-style: none;
scrollbar-width: none;
}

#menu-container .menu ul::-webkit-scrollbar, 
#menu-container .menu li::-webkit-scrollbar{
display: none;
}

#menu-container a.menu-mobile{
display: none;
height: 50px;
}

#menu-container a.menu-mobile:after{
font-family: "Font Awesome 5 Free";
content: "\f0c9";
font-weight: 600;
font-size: 24px;
padding: 0;
float: right;
position: relative;
top: 50%;
right: 5%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

#menu-container a.menu-mobile:hover{
color: #474747;
}

#menu-container .menu-dropdown-icon:before{
position: absolute;
font-family: "Font Awesome 5 Free";
content: "\f0fe";
font-weight: 500;
display: none;
cursor: pointer;
float: right;
padding: 1em 1.3em;
background: #751c3a;
color: #fff;
top: 0.5em;
right: 0.5em;
}

#menu-container .menu_logo{
position: absolute;
top: 10px;
left: 50px;
z-index: 9999;
}

#menu-container .menu_logo img{
width: auto;
height: 40px;
}

#menu-container .menu > ul{
margin: 0 auto;
width: 100%;
height: 100%;
list-style: none;
padding: 0 40px 0 0;
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
}

#menu-container .menu > ul:before,
#menu-container .menu > ul:after{
content: "";
display: table;
}

#menu-container .menu > ul:after{
clear: both;
}

#menu-container .menu > ul > li{
padding: 0;
margin: 0;
}

#menu-container .menu > ul > li a{
text-decoration: none;
padding: 18px 15px;
display: block;
}

#menu-container .menu > ul > li.sns_link a{
font-size: 20px;
line-height: 1em;
padding: 10px;
}

#menu-container .menu > ul > li > ul{
display: none;
width: 100%;
max-height: calc(95vh - 60px);
overflow: scroll;
background: #f7f7f7;
padding: 0 0 30px 30px;
position: absolute;
z-index: 9998;
left: 0;
margin: 0;
list-style: none;
flex-wrap: wrap;
box-shadow: 0px 10px 10px -5px rgba(0,0,0, .3)
}

#menu-container .menu > ul > li > ul:before,
#menu-container .menu > ul > li > ul:after{
content: "";
display: table;
}

#menu-container .menu > ul > li > ul:after{
clear: both;
}

#menu-container .menu > ul > li > ul > li{
margin: 30px 30px 0 0;
padding-bottom: 0;
list-style: none;
width: calc(20% - 30px);
background: none;
float: left;
}

#menu-container .menu > ul > li > ul > li a{
padding: 0.2em 0;
display: block;
border-bottom: 1px solid #751c3a;
font-size: 14px;
}

#menu-container .menu > ul > li > ul > li a.select_title{
cursor: auto;
color: #751c3a;
}

#menu-container .menu > ul > li > ul > li > ul{
display: block;
padding: 0;
margin: 10px 0 0;
list-style: none;
}

#menu-container .menu > ul > li > ul > li > ul:before,
#menu-container .menu > ul > li > ul > li > ul:after{
content: "";
display: table;
}

#menu-container .menu > ul > li > ul > li > ul:after{
clear: both;
}

#menu-container .menu > ul > li > ul > li > ul > li{
float: left;
width: 100%;
padding: 10px 0 0 0.5em;
margin: 0;
font-size: 0.9em;
}

#menu-container .menu > ul > li > ul > li > ul > li a{
border: 0;
}


/* SPヘッダー */
@media only screen and (max-width: 800px){

#menu-container{
width: 100%;
font-size: 15px;
height: 50px;
}

#menu-container a.menu-mobile,
#menu-container a.menu-mobile:hover,
#menu-container a.menu-mobile:active{
display: block;
}

#menu-container .menu-dropdown-icon:before{
display: block;
}

#menu-container .menu_logo{
left: 5%;
}

#menu-container .menu_logo img{
height: 30px;
}

#menu-container .menu .show-on-mobile{
display: flex;
flex-wrap: wrap;
z-index: 9996;
background: #f7f7f7;
justify-content: center;
padding: 0 0 3em;
box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, .3);
}

#menu-container .menu > ul{
display: none;
padding: 0;
max-height: calc(100vh - 100px);
overflow: scroll;
}

#menu-container .menu > ul > li{
width: calc(100% - 10%);
margin: 0 auto;
float: none;
display: block;
padding: 1.5em 0 1.5em 0.5em;
border-bottom: 1px solid #ddd;
position: relative;
}

#menu-container .menu > ul > li.sns_link{
width: auto;
min-width: 11%;
margin: 3em 0.3em 0;
padding: 0;
border: none;
text-align: center;
}

#menu-container .menu > ul > li.sns_link a{
font-size: 28px;
}

#menu-container .menu > ul > li a{
width: 100%;
display: block;
padding: 0;
}

#menu-container .menu > ul > li > ul{
position: relative;
padding: 0;
padding: 0;
margin: 1.5em 0 0;
max-height: none;
box-shadow: none;
}

#menu-container .menu > ul > li > ul > li{
float: none;
width: 100%;
margin: 2em 0 0;
padding: 0 0 0 0.5em;
}

#menu-container .menu > ul > li > ul > li:first-child{
margin-top: 0;
}

#menu-container .menu > ul > li > ul > li a{
margin: 1.5em 0 0;
padding: 0;
}

#menu-container .menu > ul > li > ul > li a.select_title{
margin: 0;
padding: 0 0 0.5em;
}

#menu-container .menu > ul > li > ul > li > ul{
margin: 0;
position: relative;
}

#menu-container .menu > ul > li > ul > li > ul > li{
padding: 0 0 0 0.5em;
float: none;
}

#menu-container .menu > ul > li > ul > li > ul > li a{
padding: 0 0 0 1em;
position: relative;
}

#menu-container .menu > ul > li > ul > li > ul > li a:before{
content: "";
width: 5px;
height: 5px;
border-top: solid 1px #751c3a;
border-right: solid 1px #751c3a;
transform: rotate(45deg);
position: absolute;
left: 0;
top: calc(50% - 2px);
}
}



/* PCフッター */

#footer-container{
width: 100%;
margin: 0 auto;
padding: 50px 0 0;
font-family: "Roboto", sans-serif;
font-size: 16px;
line-height: 1.5;
color: #474747;
letter-spacing: .06em;
background: #fff;
}

#footer-container a{
color: #474747;
transition: 0.35s;
}

#footer-container a:hover{
color: #751c3a;
}

#footer-container .footer_main{
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 50px;
}

#footer-container .footer_link{
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px 50px;
font-size: 14px;
align-items: center;
}

#footer-container .footer_link a.company_logo img{
width: 140px;
}

#footer-container .footer_link a.company_logo:hover{
opacity: 0.6;
}

#footer-container .contact_address span{
display: inline-block;
margin: 0 1em 0 0;
}

#footer-container .contact_mail a{
padding: 0.4em 1.2em;
display: inline-block;
border: 1px solid;
font-size: 13px;
}

#footer-container .contact_mail a span{
font-size: 80%;
margin: 0 0 0 0.3em;
display: inline-block;
}

#footer-container .guide_link{
display: flex;
justify-content: center;
margin: 50px 0 0;
gap: 1em 20px;
font-size: 12px;
line-height: 1em;
flex-wrap: wrap;
}

#footer-container .external_link{
display: flex;
justify-content: space-between;
width: 100%;
max-width: 1200px;
margin: 50px auto;
padding: 0 50px;
gap: 20px;
}

#footer-container .external_link a:hover{
opacity: 0.6;
}

#footer-container .copyright{
background: #bbb;
color: #fff;
text-align: center;
font-size: 11px;
padding: 10px 0;
}


/* SPフッター */
@media only screen and (max-width: 800px){

#footer-container{
padding: 5% 0 0;
}

#footer-container .footer_main,
#footer-container .external_link{
padding: 0 5%;
}

#footer-container .footer_link{
gap: 1.5em 5%
}

#footer-container .guide_link{
margin: 5% 0 0;
}

#footer-container .external_link{
margin: 5% auto;
}


/* SP_Sフッター */
@media only screen and (max-width: 500px){

#footer-container{
padding: 8% 0 0;
}

#footer-container .contact_address p.phone{
margin: 0.5em 0 0;
text-align: center;
}

#footer-container .contact_address span{
display: block;
margin: 0;
}

#footer-container .guide_link{
margin: 8% 0 0;
}

#footer-container .external_link{
flex-wrap: wrap;
margin: 8% auto;
gap: 1em 5%;
justify-content: start;
}

#footer-container .external_link li{
width: 30%;
}
}