﻿@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@500&display=swap');
.font1,#top_cms h3{
    font-family: 'Shippori Mincho B1',"游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}

.linkStyle{
    color:#bf9d74;
    text-decoration:underline;
}
.linkStyle:hover{
    transition:all 0.3s;
    opacity:0.7;
}



/*--all page---------------------------
-------------------------------------*/
#body{
    background-color:#222;
    overflow:hidden;
    color: #fff;
}
#loader{
    background-image:none;
    background-color: #222;
}
#header h1 span{background-color: #fff;}
#header h1.active{
    padding:0;
    box-shadow: 10px 10px 10px -8px #222;
}
#sns_links{
    background-image: url(./Dup/img/wood.jpg);
    background-size: cover;
}
#sns_links li a{
    opacity:1;
}
#sns_links li a:hover{
    opacity:0.5;
}
#main_nav{
    background-image:none;
}
#footer{
    background-image: url(./Dup/img/bg3.jpg);
}
#footer .grid_8{color:#333;}

/*--top page---------------------------
-------------------------------------*/

.catch{
    top: 13%;
    right: 15%;
    width: 12vw;
    height: 80vh;    
    z-index: 2;
    background-image:url(./Dup/img/catch.png);
    background-repeat:no-repeat;
    background-size:contain;
}
/*
.catch img{
    width: 12vw;
    height: 80vh;
}
*/
/*ローディング後にフェードイン*/
.load-fade {opacity : 0; transition : all 2s/*処理にかかる時間*/;}
.load-fade.done{opacity : 1; transform : translate(0, 0);}

#intro, #top_cms .top_cms_box .top_cms_title{background-image: url(./Dup/img/bg.jpg);}
#contents1,.top_cms_box{color:#fff;}
#contents1{
    position: relative;
    background: url(./Dup/img/en.png) no-repeat;
    background-size: cover;
}
#contents1::before,#contents2::before,#contents1::before,#contents3::before{
    content: '';
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    background-size:contain;
}
#contents1::before{
    width: 20vw;
    height: 70vh;
    background-image: url(./Dup/img/item.png);
    background-position:top right;
    top: -100px;
    right: -100px;
    z-index: 1;
}
#contents2::before{
    width: 20vw;
    height: 45vh;
    background-image: url(./Dup/img/kanpai.png);
    background-position:top left;
    top: -235px;
    left: 100px;  
    z-index: 2;
}
#contents3::before{
    width: 20vw;
    height: 65vh;
    background-image: url(./Dup/img/beer.png);
    background-position: top right;
    top: -200px;
    right: 20px;
    z-index: 2;
}
#contents3{
    background-image:url(./Dup/img/bg3.jpg);
    color: #333;
    padding-top:100px;
}
#contents3::after{height:30%;}
#contents3 .con_logo{
    text-align:center;
    margin-bottom:50px;
}
#contents3 .con_logo img{
    width:auto;
    opacity:0.5;
}
.cms_5-c .box_title1 {border-color: rgba(255,255,255,0.5);}
.cms_5-c .box_txt1::before{color: rgba(152,112,40,0.9);}

/*--under page---------------------------
-------------------------------------*/
#page_title{
    background-image: url(./Dup/img/wood.jpg);
    background-size: cover;
}
#cms_5-c .box_title1 {border-color: rgba(255,255,255,0.5);}
#cms_5-c .box_txt1::before{color: rgba(152,112,40,0.9);}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.catch{
    width: 20vw;
    height: 50vh;
}
#contents1::before{
    width: 30vw;
    height: 31vh;
    right: -80px;
}
#contents2::before{
    width: 25vw;
    height: 25vh;
    left: 30px;
}
#contents3::before{
    height: 30vh;
}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#contents1::before {
    width: 35vw;
    height: 30vh;
    right: -30px;
}
#contents1 p{
    margin-top:30px;
}
#contents2::before{
    height: 20vh;
    left: 20px;
    top: -35px;
}
#contents3::before {
    width: 27vw;
    height: 30vh;
    top: -100px;
    right: 10px;
}
#contents3 .con_logo img {
    width: 100%;
}
}

@media screen and (max-width: 360px){
.catch {
    top: 25%;
}
#main_img #slide_wrap .down{
    display:none;
}    
 #contents2{
     padding:50px 30px;
 }   
}

/* ---------- IEの処理 ---------- */
@media all and (-ms-high-contrast: none){

}


