@charset "UTF-8";

html,body{
    color:#3A1700;
    font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    background:#fff;
}
html,body,ul,li,h1,p,h3{
    margin:0!important;
    padding:0;
    
}
a img:hover{
    opacity: 0.5;
}
.opa{
    cursor: pointer;
}
input[type="image"]:focus {
  outline: 0;
}
.opa:hover{
    opacity: 0.5;
}
.pc{
    display:block;
 }
.sp{
    display:none;
}
li{
    list-style: none;
    background: #fff;
}

a{color:#54240a;text-decoration:none;}

img a{
    border:0;
}
#MainSlide img{
    border-radius:5px;
    width:730px;
    height: 395px;
}
.bx-wrapper{
    border:0!important;
    box-shadow: none!important;
    margin:0!important;
}
.bx-wrapper .bx-controls-auto, .bx-wrapper .bx-pager {
    bottom: 10px!important;
}

.bx-wrapper .bx-prev {
    background: url(../top_images/arrow_left.png) no-repeat !important;
}
.bx-wrapper .bx-next {
    background: url(../top_images/arrow_right.png) no-repeat !important;
    right:60px!important;
}

#lang{
    text-align: right;
    margin:0 auto;
    width:980px;
    padding:10px 0;
    font-family:'小塚ゴシック Pr6N','Kozuka Gothic Pr6N',sans-serif;
}
#lang li {
    display:inline-block;
    font-size:13px;
    font-weight:bold;
}

#lang li a{
    color:#000000;
}

header{
    background: #663D22;
    width:100%;
    /*min-width: 100%;*/
    min-width: 1200px;
    height:105px;
    text-align: center;
    box-sizing: border-box;
}

header h1{
    padding: 10px 0 0 0;
}

#menu{
    margin:0 auto;
    width: 980px;
    text-align: center;
    margin-bottom:15px;
}
.menu_text{
    float:left;
    font-size: 12px;
    width: 85%;
}
.menu_text a{
    font-weight: bold;
    color:#000;
}
.menu_text a:hover,#lang a:hover{
    opacity: 0.5;
}
.sns{
    float:right!important;
}
.sns img {
    width: auto!important;
    height: auto!important;
}
.sns img:hover{
    opacity: 0.5
}

.menu_text li,.sns li{
    display:inline-block;
    margin-right: 20px!important;
}

#contents{
    width:1200px;
    margin:0 auto;
    box-sizing: border-box;
    padding-bottom:50px;
}

.contents_left{
    float:left;
}

.contents_right{
    float:right;
}
iframe{
    border-radius: 5px;
}

.block{
    border-bottom: 2px solid #3A1700;
    margin-bottom:20px;
}
.news_tag, .insta_tag,.tw_tag {
    font-family: '小塚ゴシック Pr6N','Kozuka Gothic Pr6N',sans-serif;
    font-size: 30px;
    font-weight: bold;
    letter-spacing : 0.45px;
}
.insta_tag,.tw_tag{
    float:left;
    
}

.acc_sns{
    float:left;
    float: left;
    line-height: 68px;
    /* height: 68px; */
    padding-left: 30px;
    font-size: 13px;
    margin-left:30px;
}
.acc_twi{
    background: url("../top_images/twi_acc.png")no-repeat;
    background-position: left center;


}
.acc_insta{
    background: url("../top_images/insta_acc.png")no-repeat;
    background-position: left center;
    padding-left:35px!important;

}

#feed ul li{
    list-style-type: disc;
    list-style-position: inside;
    font-size: 14px;
    margin-bottom:10px!important;
    white-space: nowrap;
}

#feed ul li a{
    display:inline-block;
}
#feed ul li a:hover{
    text-decoration:underline;
}
.more{
    font-family: '小塚ゴシック Pr6N','Kozuka Gothic Pr6N',sans-serif;
    text-align: center;
    font-size: 14px;
    
}
.more_right{
    font-family: '小塚ゴシック Pr6N','Kozuka Gothic Pr6N',sans-serif;
    text-align: right;
    font-size: 14px;
}
.more a {
    color: #54240a!important;
    position: relative;
    bottom: 20px;
    letter-spacing : 0.72px;
}
.more_right a{
    color: #54240a!important;
    letter-spacing : 0.72px;
}
#instafeed {
    height:255px;
}
#instafeed li {
    display: inline-block;
    margin-right: 20px!important;
    /* background: #000; */
    height: 125px;
}

#instafeed li img {
    width: 125px;
    height: 125px;
    object-fit: cover;
    box-shadow: 2px 2px 1px #E4E4E4;
}
.go_m,.go_s{font-weight: bold;cursor: pointer;}
.go_m span:hover,go_s span:hover{
    opacity: 0.4;
}
.m_area,.s_area{
    display:none;
    position: absolute;
    background: #fff;
    z-index: 9999;
    text-align: left;
    text-indent: 2.0em;
    border-radius: 5px;
}
.m_area li,.s_area li{
    display: block!important;
    line-height: 2.5em!important;
    background: #fff !important;
}
.m_area li:hover,.s_area li:hover{
    opacity: 0.5;
}

footer{
    width:100%;
    /*min-width: 100%;*/
    min-width: 1200px;
    background:#663D22;

}
.footer_inner {
    width: 960px;
    margin: 0 auto;
}


footer ul {
    padding: 10px 0;
    float: left;
    font-size: 10px;
}

footer ul li {
    display: inline-block;
    margin-right: 30px!important;
    background: none!important;
}

.footer_corp {
    float: right;
    position: relative;
    top: 10px;
    font-size:10px;
    
}
.footer_corp{
    color: #C9A063!important;
}
footer a {
    color: #C9A063!important;
    
}
.C9A063{
    color: #C9A063!important;
}
footer a:hover{
	text-decoration:underline;
}

.w800{
    width: 800px;
}
.w400{
  width: 400px;
}

.pr60{
    position: relative;
    right: 60px;
}
.pr10{
    position: relative;
    right: 10px;
}
.card {
  
 /* Image will fill half the screen if window <600px wide */
  width: 50%;
  
  /* Set image to 100% of container to scale down at lower screen widths */
}

.card img{
	border-radius: 5px;
}

/* Flip animation container, keeps perspective */
.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}

/* Set animation variables */
.front, .back {
  -webkit-animation-duration: 8s;
  -moz-animation-duration: 8s;
  -ms-animation-duration: 8s;
  animation-duration: 8s;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;

  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;

  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  -ms-animation-timing-function: ease;
  animation-timing-function: ease;

  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

/* Call the animations for each side of the card */
.front {
  -webkit-animation-name: cardFlipFront;
  -moz-animation-name: cardFlipFront;
  -ms-animation-name: cardFlipFront;
  animation-name: cardFlipFront;
}

.back {
  -webkit-animation-name: cardFlipBack;
  -moz-animation-name: cardFlipBack;
  -ms-animation-name: cardFlipBack;
  animation-name: cardFlipBack;
}

/* We have two seperate @keyframe animations for each side of the card so we can get this working in IE */

/* This one animates the front card */
@keyframes cardFlipFront {
  0% {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  22.5% {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  27.5% {
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  72.5% {
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  77.5% {
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}

/* This one animates the front card in webkit */
@-webkit-keyframes cardFlipFront {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  22.5% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  27.5% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  72.5% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  77.5% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}

/* This one animates the back card */
@keyframes cardFlipBack {
  0% {
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
  22.5% {
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
  27.5% {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  72.5% {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  77.5% {
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
  100% {
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
}

/* This one animates the back card in webkit */
@-webkit-keyframes cardFlipBack {
  0% {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
  22.5% {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
  27.5% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  72.5% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  77.5% {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
  100% {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
}

/* Hide back of card during swap */
.front, .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

/* Front card stacked above the back card */
.front {
  z-index: 2;
}

/* The back, initially hidden, card */
.back {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.caution_text {
    font-size: 10px;
    padding: 5px 0;
    text-align: right;
    position: relative;
    right: -5px;
    color: #C9A063;
}

.radius5{
    border-radius: 5px;
}

/*.mb5{
    margin-bottom:5px;
}*/
/*スマホ*/


@media screen and (max-width: 767px) {
    html,body{width:100%;}
    .pc{display:none;}
    .sp{display:block;}
    a{display: block;}
    #contents{width:100%;padding-top: 59px;}
    #header_sp {
        height: 60px;
        line-height: 60px;
        width: 100%;
        
        color: #fff;
        z-index: 10000000;
        position: fixed;
        top: 0;
        background: #663D22;
    }
    .drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
        background: #fff!important;
    }
    .drawer-menu li {
        border-top: 1px solid #663D22;
        font-size: 12px;
        color: #000;
        padding: 2% 0;
        text-indent: 1em;
    }
    .drawer-menu {
        margin-top: 60px!important;
    }
    .drawer-menu li:last-child {
        margin: 0!important;
    }
    .menuclose {
        background: #663D22;
        color: #fff!important;
        text-align: center;
    }
    .contents_left,.contents_right{
        float:none;
    }
    .contents_left img,.contents_right img{
        width: 100%;
    }
    #MainSlide img {
        max-width: 100%!important;
        border-radius: 0!important;
        width: 100%;
        height: 100%;
        }
    .news_tag, .insta_tag, .tw_tag {
        font-size: 18px;
        letter-spacing: 0.1em;
        height: 30px;
        text-indent: 0.5em;
    }
    .w800,.w400{
        width:100%;
    }
    .pr60,.pr10{
        position: static;
    }
    .youtube iframe{
        width: 100%;
    }
    #instafeed {
        height: 100%;
        text-align: center;
        margin-top:30px!important;
    }
    #instafeed li {
        display: inline-block;
        margin-right: 10px!important;
        height: 125px;

    }
    #instafeed li:nth-last-of-type(3) {
        display: none;
    
    }

    #instafeed li:last-child {
        display: none;
    
    }

    #feed{
        padding-left: 10px;
    }

    #feed ul{
        padding:10px;
        box-sizing: border-box;
    }
    #feed ul li{
        text-indent: -1.0em;
        padding-left:1.0em;
        white-space: normal;
        list-style-position: outside;
        text-indent: 0;
        padding-left: 0;
    }
    #feed ul li a {
        display: block;
    }

    .more{
        padding:10px;
    }
    .more a{
        position: static;
    }
    footer {
        width: 100%!important;
        min-width: 100%;
        padding: 0;
        position: relative;
    }
    .footer_inner {
        width: 100%;
    }
    footer ul {
        width: 100%;
        padding: 0;
        float: none;
    }
    footer ul li {
        display: block;
        height: 35px;
        line-height: 35px;
        border-bottom: 1px dotted #AFA27D;
        margin-right: 0!important;
        text-indent: 1em;
    }    
    footer a {
    color: #C9A063;
    }
    .footer_corp {
        text-align: center;
        float: none;
        position: static;
        font-size: 10px;
        color: #C9A063;
        padding:5px 0;
    }
    .lang_switch{
        text-align: center;
        color: #C9A063!important;
    }
    .lang_switch a{
        display: inline-block;
        text-indent: 0!important;
    }
    .drawer-open .drawer-hamburger-icon:after {
        -webkit-transform: rotate(0deg)!important;
        -ms-transform: rotate(0deg)!important;
        transform: rotate(0deg)!important;
    } 
    .drawer-open .drawer-hamburger-icon:before {
        -webkit-transform: rotate(0deg)!important;
        -ms-transform: rotate(0deg)!important;
        transform: rotate(0deg)!important;
    }
    
    .acc_sns{
        float:right;
        height: 30px;
        line-height: 30px;
        padding-right: 10px;
    }
    .more_right{
        width: 96%;
    }
    .mb50{
        margin-bottom:50px;
    }
    .mb30{
        margin-bottom:10px!important;
    }
    .mt10{
        margin-top:10px!important;
    }
    .back_top {
        padding: 5px;
        width: 80px;
        /* background: #fff; */
        position: absolute;
        right: 5px;
        top: -26px;
        border: 1px solid #663D22;
        border-radius: 5px 5px 0 0;
        text-align: center;
        background: #663D22;
        box-sizing: border-box;
        font-size: 10px;
    }
    ul.drawer-dropdown-menu {
        margin-top: 10px!important;
    }
    .drawer-dropdown-menu {
        display: none;
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #fff;
    } 
    .drawer-dropdown-menu>li {
        background: #ffd2d2;
    }
    .drawer-dropdown-menu dl{
        font-size: 12px;
        line-height: 1.6em;
        }
    .drawer-dropdown-menu dl dt{
        width: 120px;
        }
        .drawer-dropdown-menu dl dd{
        margin: -1.6em 0 4px 0;
        padding: 0 0 4px 120px;
    }     
    .flex {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
           /* -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;*/
    }    
    .fa-envelope-o{
        margin-right:10px;
    }   
    .hamburger_button{
        position: relative;
        right: 18px;
        top: -27px;
    }
    .drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after {
        width: 100%;
        height: 0!important;
        -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
        transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
        background-color: #222;
        /* display: none; */
    }
    #header_sp h1 img {
        width: auto!important;
        height: 50px!important;
    }
    #header_sp h1 {
        padding: 0;
        height: 60px;
        position: relative;
        top: 5px;
        left: 5px;
    }
    .footer_inner ul li:first-child a{
        display: inline-block;
    }
    .footer_inner ul li:first-child{
        text-indent: 0.5em;
    }
    .bx-controls-direction{
        display:none;
    }
    .h_button{
        position: relative;
        right: -10px;
        top:5px;
        width: 150%;
    }
    .flex_between {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
-webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;

    }
    .sp_area {
        padding: 5px 0;
    }
    .sp_area img{
        /*width: 95%;
        height: 95%;*/
    }
    .f_sns a{
        display: inline-block;
        position: relative;
        top: 5px;
        }
   .opa {
        width: 50%!important;
        height: 50%;
        float: left;
    }
    
    .mt5sp{
        margin-top:5px;
    }
    .card{
        position: absolute;
        right: 0;
    }

    .C9A063 {
        text-align: center!important;
        right: 0!important;
    }
    .mb5{
        margin-bottom:0px;
    }
    .caution_text {
        text-align: center !important;
        position: static !important;
    }
}


.slider li{
	z-index:0!important;
}