﻿@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPMincho&display=swap');

.bg_color1 {
        background-color: #999970;
}

.back_color {
    background: -webkit-gradient(linear, rgba(220,220,205,0.85) 0%, rgba(220,220,205,0.85) 20%, rgba(220,220,205,0.85) 80%,rgba(220,220,205,0.85) 100%) !important;
    background: -webkit-linear-gradient(rgba(220,220,205,0.85) 0%, rgba(220,220,205,0.85) 20%, rgba(220,220,205,0.85) 80%,rgba(220,220,205,0.85) 100%) !important;
    background: linear-gradient(rgba(220,220,205,0.85) 0%, rgba(220,220,205,0.85) 20%, rgba(220,220,205,0.85) 80%,rgba(220,220,205,0.85) 100%) !important
}

#header {
    background-color: rgba(120, 120, 120,0.45) !important;
}

#contents .box .box_item:before {
    background-color: rgba(255,255,255,0.9) !important;
    transition: 0.5s;
}

footer{
    background-color: rgba(116, 116, 110, 1) !important;
}

.top_cms_box {
    background-color: rgba(255, 255, 255, 1);
    padding: 30px 20px;
}

#contents .box .box_item:after {
    background: linear-gradient(to top left, rgba(255,255,255,0) 50%, #999970 50.5%) no-repeat top left/100% 100% !important;
}

#header .logo{
        filter: invert(1);
}

.main_wrap .cms_img1{
    margin-left: 0%;
}

.test{
    margin-left: 20% !important;
    transition: 0.4s;
    transition-delay: 1.2s;
    transition-timing-function: ease-out;
}

#main .main_box.animStart h2 {
    letter-spacing: 0.15em;
}

#main .main_box {
    max-width: 370px;
}

#main:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/re.svg);
    background-position: bottom left;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 85%;
    pointer-events: none;
    opacity: 0.25;
    mix-blend-mode: darken;
}

.catch_txt{
    color: #2c2b1b;
    background-color: rgba(255,255,255,0.85) !important;
}

.en_font {
    font-family: 'BIZ UDPMincho', serif;
    font-weight: bold;
}

#contents .box .box_item {
    color: #2c2b1b;
}

#contents .box:hover{
        transform: scale(1.05);
    transition: 0.3s;
}

#contents .box:hover .box_item:before{
        background-color: rgba(255,255,255,0.7) !important;
}



#contents .box .box_item:after {
    left: -1px;
}

#top_cms .more a {
    background-color: #5e5e5b;
    background-color: #000;
}

.cms_title::before {
    color: #d9d9d9;
}

#catch, #top_cms{
        border: 40px solid white;
        
}

#top_cms{
    padding-top: 100px;
}

.catch_txt{
    padding: 40px 30px;
}

.catch_txt h2{
    text-align: center;
        margin: 70px auto 50px;
}

.messe{
    display: block;
    max-width: 300px;
    margin: auto;
    margin-top: -100px;
}

.asi{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/test.png);
    background-position: 80% 0;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
}

.page2, .page3, .page4, .page5, .page6, .page7, .page8, .page9, .page10{
        background-color: #bdbdb0;
}

#page_title:before {
    background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #bdbdb0 50.5%) no-repeat top left/100% 100%;
}

#page_title:after {
    background-color: rgba(230,230,230,0.65) !important;
}

#footer .logo{
        filter: invert(1);
}

.linkStyle{    color: #898915;}

.catch_box .catch_img{
        transform: scale(1.2) !important;
}


#contents .box .more{
    width:300px;
    margin-top: 50px;
}



#contents .box .more a{
        background-color: black;
        width: 100%;
}

#page_title{
        background-position: 0% 0%;
    background-attachment: local;
}

#mail_CONTACT{
    display: none;
}

#tel_contact{
    margin-bottom: 0;
}

.line_banner{
        max-width: 300px;
    margin: auto;
    margin-bottom: 40px;
}

#top_cms .cms_2-c .cate_box{
        padding: 2% 0;
}

.entry a{
    margin: auto;
    margin-top: 50px;
}

#video{
    max-width: 80%;
    margin: auto;
    margin-bottom: 50px;
}


@media all and (-ms-high-contrast: none){
  

}

/* firefox のみ適用される */
@-moz-document url-prefix() {
  .f_info_wrap{
      width:50%;
  }
}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){



#catch, #top_cms {
    border: 10px solid white;
}

.more a {
    padding: 5px 0;
}

.shop_info .contact {
    padding: 70px 0;
}

.shop_info .info {
    padding: 70px 0;
}

.catch_box .catch_img{
        transform: scale(1);
}

.f_info_wrap {
  width: 80%;
}

#video{
    max-width: 90%;
    margin: auto;
    margin-bottom: 50px;
}


.catch_box .catch_img {
    transform: scale(1) !important;
}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){

#main {
    max-height: 110vw;
}

#main .cms_img1 img {
    height: 110vw;
}

.test {
    margin-left: 0% !important;
}

#main .main_box.animStart h2 {
    font-size: 14px;
}

#main .main_box h1 {
    max-width: 190px;
}

.info_box h2{
    font-size: 24px;
}

.page10 .more a {
    font-size: 16px;
}

.font_4up_sp {
    font-size: -webkit-calc(1rem + 2px);
    font-size: calc(1rem + 2px);
}

.font_18up_sp {
    font-size: -webkit-calc(1rem + 16px);
    font-size: calc(1rem + 16px);
}

.cate_list {
    margin-left: 20px;
}

}