@charset "UTF-8";
/*-------------------FONT-------------------*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,700&subset=japanese');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,700');

/* CSS Document */
body{font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 16px;line-height: 1.4; color: #333;}


a{font-family: 'Noto Sans JP', sans-serif; text-decoration:none !important; color: #000;}
a:hover{color: #414f93;}

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.wrapper{max-width: 1100px; margin: 0 auto; position: relative;}

.btn-black{display: inline-block; border: 2px solid #000; font-size: 18px; padding: 15px 0; width: 250px; transition: all 0.2s; text-align: center;}
.btn-black:hover{width: 280px; color: #FFF; background: #000;}

.btn-white{display: inline-block; border: 2px solid #FFF; color: #FFF; font-size: 18px; padding: 15px 0; width: 250px; transition: all 0.2s; text-align: center;}
.btn-white:hover{width: 280px; border: 2px solid #000; color: #FFF; background: #000;}

.title-section{font-family: 'Noto Serif JP', serif; font-size: 30px; text-align: center; margin: 0 0 30px; font-weight: 700;}
.title-section span{display:block; font-size: 14px; font-weight: 400;}

/*---------------Header---------------*/
header{/*padding:15px 0 0;*//* border-bottom: 4px solid #CCC; */}
.logo-head{margin:0 30px 0 0; padding: 0 0 15px; display: inline-block;}
.logo-head img{ width:265px;}
.mainmenu{display: inline-block; vertical-align: bottom;
}
.mainmenu a{
    font-family: ryo-gothic-plusn, sans-serif;
    font-weight: 400;
    font-style: normal;
}
.menu-wrapper{position:fixed; background: #FFF; width: 99%; z-index: 99;}
.wsmenucontainer{top:0; text-align: center; background: #FFF; width: 99%; z-index: 999;}

.h1_wrap{ position: relative;}
.h1_wrap h1{ position: absolute; font-size: 11px; right: 0; top: 5px;}

/*---------------Header Section---------------*/
.title-header{text-align: center; color: #FFF; padding: 50px 10px; font-family: 'Noto Serif JP', serif; margin: 0 0 30px;}
.title-header{background-size:cover !important;}
.title-header h2{font-size: 28px;}
.title-header h2 span{font-size: 13px;display: block;}

.breadcrumb .wrapper{position: relative;}
.breadcrumb p{
    position: absolute;
    right: 0;
    bottom: -37px;
    font-size: 12px;
    color: #FFF;
}
.breadcrumb p a{
    color: #FFF !important;
}
.breadcrumb p a:after{
    content: '>';
    margin: 0 5px;
}
/*---------------Float Button---------------*/
.btn-mail{background: #575757;}
.btn-fb{background: #3b5998;}
.float-btn{position: fixed;z-index: 99;top: 300px;right: -168px;transform: rotate(90deg);}
.float-btn a{margin: 0 10px; display:inline-block; padding: 10px 30px; color: #FFF;}
.float-btn a img{position: relative; margin: 0 10px 0 0; top:-2px;}
.float-btn a:hover{background: #000;}

/*---------------Paging---------------*/
.paging-container{overflow: hidden; padding: 0 10px 20px;}
.result{float: left; font-size: 16px;}
.result strong{font-weight: 700;}
.paging-number{float: right; font-size: 16px;}
.paging-number a{display: inline-block; font-weight: 700; padding: 0 5px; margin: 0 5px;}
.paging-number a:hover{background: #e5e5e5; color:#000;}
.page-active{background: #e5e5e5 !important;}

/*---------------Back-to-Top---------------*/
.btn-top a{display: block; background: #000000; text-align: center; padding: 10px; transition: all ease-in-out 0.2s;}
.btn-top a:hover{background: #CCC ;}
.btn-top a img{position: relative; top: 0;  transition: all ease-in-out 0.2s;}
.btn-top a:hover img{top: -5px;}

/*---------------Footer---------------*/
.copyright{text-align: center; background: #363636; padding: 20px; font-size: 11px; color: #FFF;}
.footer-container{background: #585858;}
.footer-container .wrapper{display: flex; justify-content: space-between; color: #FFF; padding:40px 10px 10px; font-size: 12px;}
.footer-container .wrapper a{color: #FFF;}

.footer-info{width: 30%;}
.footer-info p svg{width: 11px; height: 11px; fill: #FFF;}
.footer-info p a{border-bottom: 1px solid #FFF; font-size: 12px;}
.footer-info p a:hover{color: #bbc7ff; border:0;}
.footer-info p a:hover svg{fill: #bbc7ff;}
.footer-info a{font-size: 18px;}
.footer-info a {
    font-size: 14px;
    margin: 4px 0 0px;
    display: inline-block;
}
.footer-info a span{display: inline-block; margin: 0 5px 0 0; background: #FFF; color: #000; padding: 0 10px; border-radius: 3px;}
.footer-info strong{font-size: 24px; font-weight: 700; margin: 0 0 10px; display: block; border-bottom: 1px solid #FFF;}
.footer-info strong span{display: block; font-size: 18px; font-weight: 400; padding: 0 0 10px;}
.footer-link{width: 35%;margin:0 40px;}
.footer-link a{display: inline-block;vertical-align: top;position: relative;width: 49%;padding: 5px 0 5px 15px;}
.footer-link a::before{content: '❯'; display:block; position: absolute; left: 0; top: 6px; margin: 0 10px 0 0;}
.footer-link a:hover{color: #bbc7ff;}
.footer-banner a{margin:0 0 10px; display:block;}
.footer-banner a img{opacity: 1; transition: all 0.2s;}
.footer-banner a:hover img{opacity: 0.8;}

.pc-only{display: block !important;}
.sp-only{display: none !important;}

/*---------------Responsive---------------*/
@media (max-width:1100px){
.wrapper{padding:0 10px;}
.logo-head img{width: 110px;}
.wsmenu-list > li > a{font-size: 16px !important; padding: 10px 5px !important;}
.footer-container .wrapper{flex-wrap: wrap;}
.footer-banner{width: 100%; text-align: center;}
.footer-banner a{display: inline-block; padding: 0 10px;}
.footer-info{width: 55%; margin: 0;}
.footer-link{width: 40%; margin: 0;}
.paging-container{padding: 0 10px 20px;}
}

@media (max-width:980px){
.mainmenu{margin:10px 0 0;}
}

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


header{height: 55px;/* border-bottom: 4px solid #CCC; */}
.wsmenucontainer{text-align: left;position: fixed;width: 100%;border-bottom: 4px solid #CCC;height: 55px;}
.logo-head{padding: 0 5px;}
.logo-head img{width: 155px;}
.footer-link,.banner-footer{width: 100%; float: none;}
.footer-link{margin: 0 0 15px;}
.banner-footer{text-align: center;}
.footer-info,.footer-link{width: 100%; margin: 0 0 10px;}
.footer-banner a{width: 48%;}
.footer-banner a img{max-width: 100%;}
.float-btn{transform: rotate(0); border-top: 1px solid #777; bottom: 0; width:100%; top:unset; display: flex; right: 0;}
.float-btn a{width: 50%; margin: 0; text-align: center;}
.copyright{padding: 20px 0 60px;}
.paging-container{padding: 0;}
.result{float: none; text-align: center; padding: 0 0 15px;}
.paging-number{float: none; text-align: center;}
.paging-container{margin: 0 0 20px;}
}

@media (max-width:480px){
    .wrapper {
        padding: 0 5px;
    }
    .order-title {
        padding: 10px;
        font-size: 18px !important;
    }


.footer-banner a{width: 100%;}
.paging-number{font-size: 14px;}
.paging-number a{margin: 0 2px;  width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
}
.breadcrumb{ display: none;}

.title-section {
    margin: 0 0 16px;
}
h2{font-size: 21px !important;}
.title-header {
    padding: 5px 10px;
    margin: 0px 0 10px;
}
.column-3 .column {
    padding: 12px 0% !;
}
.order ul li figure{ text-align: center; margin: 10px 0 0 ;}
.order ul li figure img {width: 60% !important;}


}