@charset "utf-8";

html {
    overflow: auto;
    font-size: 62.5%; /* 10px */
}
@media screen and (max-width : 767px) {
	html {
    	font-size: 56%;
	}
}
body{
    color: #666;
    font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.5;
    background-color: #1a1a1a;
    -webkit-text-size-adjust: 100%; /* モバイルで文字が勝手に大きくなるのをリセット */
    margin-top: 16.5rem;
}
@media screen and (max-width:767px) {
    body{
        margin-top: 0;
    }
}
@media screen and (min-width:768px) and (max-width:991.98px) {
    body{
        margin-top: 13.0rem;
    }
}
@media screen and (min-width:992px) and (max-width:1199.98px) {
    body{
        margin-top: 15.0rem;
    }
}
img * {
    border: none;
}
*:focus {
    outline: none !important; /* Bootstrapのボタンのスタイルを無効化 */
}
#wrapper {
    overflow: hidden;
}
#wrapper a{
	text-decoration: none;
	outline:none;
}
#menu{
    position: fixed;
    top:0;
    z-index: 999;
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
    background-color: #1a1a1a;
    transition: .5s;
}
#menu.transform{
    padding-top: 1.0rem;
    padding-bottom: 1.0rem;
    background-color: #1a1a1a;
}
@media screen and (min-width:768px) and (max-width:991.98px) {
    #menu{
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    #menu.transform{
        padding-top: 0;
        padding-bottom: 0;
    }
}
.logo{
    width: 80%;
}
@media screen and (min-width:768px) and (max-width:1199.98px) {
    .logo{
        width: 90%;
    }
}
#head-menu{
    text-align: right;
}
#head-menu > ul{
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
	list-style-type: none;
	font-size: 0;
}
#head-menu > ul > li{
    text-align: left;
    margin-top: 1.0rem;
    margin-right: 2.4rem;
    padding-left: 0.5rem;
    padding-bottom: 0.2rem;
    border-left:0.1rem #945600 solid;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.2;
    color: #ccc;
}
.current{
    color: #D12D2F !important;
    pointer-events: none;
}
#head-menu > ul > li  span{
    font-family: 'Bebas Neue', cursive;
	font-size: 1.8rem;
    font-weight: 400;
}
#head-menu > ul > li > a{
    color: #ccc;
    transition: color .3s ease-out;
}
#head-menu > ul > li > a:hover{
    color: #D12D2F;
}
@media screen and (min-width:768px) and (max-width:991.98px) {
    #head-menu > ul > li{
        flex-basis: 18.0rem;
        margin-right: 1.0rem;
        font-size: 1.3rem;
    }
    #head-menu > ul > li:nth-child(2){
        order: 3;
    }
    #head-menu > ul > li:nth-child(3){
        order: 4;
    }
    #head-menu > ul > li:last-child{
        order: 2;
    }
}
#shop{
	padding: 9.0rem 0 0 0;
    background-color: #1a1a1a;
}
#shop h1{
    margin-bottom: 9.0rem;
    font-weight: 400;
    font-size: 2.0rem;
    text-align: center;
    color: #5BA0AB;
}
#shop h1 > span{
    display: block;
    font-family: 'Bebas Neue', cursive;
    font-size: 5.0rem;
    font-weight: 400;
}
.shopinfo{
    margin-bottom: 9.5rem;
}
@media screen and (max-width:575.98px) {
    .shopinfo{
        max-width: 85%;
        margin-bottom: 4.5rem;
        margin-left: auto;
        margin-right: auto;
    }
}
#shop h2{
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.0;
}
#shop h2 a{
    color: #F8FFE5;
    transition: color .3s ease-out;
}
.shopinfo > p{
    padding-top: 0.5rem;
    margin-top: 1.0rem;
    border-top: 0.1rem solid #945600;
    color: #ccc;
    font-size: 1.4rem;
}
.shopinfo > p > span{
    display: block;
    font-family: 'Bebas Neue', cursive;
    font-size: 2.0rem;
	font-weight: 400;
    color: #6969B3;
}
.shopinfo > p > a{
    color: #ccc;
    transition: color .3s ease-out;
}
#shop h2 a:hover, .shopinfo > p > a:hover{
    color: #D12D2F;
}
.copyright{
    color: #999;
    width: 100%;
    margin: 3.0rem auto 0 auto;
    font-size: 1.2rem;
    text-align: center;
    font-family: Georgia, "Times New Roman", Times, serif;
    padding-bottom: 1.0rem;
}
.clr{
	clear:both;
}