﻿#header {
    background-color: rgba(231, 223, 218, 0.85);
}

.bg_color1 {
    background-color: #1a1a1a;
}

#header div.logo{
    max-width: 300px;
}

.back_color {
    background: -webkit-gradient(linear, rgba(0,0,0,0.5) 0%, rgba(235, 228, 224, 0.95) 20%, rgba(235, 228, 224, 0.95) 80%,rgba(0,0,0,0.5) 100%);
    background: -webkit-linear-gradient(rgba(0,0,0,0.5) 0%, rgba(235, 228, 224, 0.95) 20%, rgba(235, 228, 224, 0.95) 80%,rgba(0,0,0,0.5) 100%);
    background: linear-gradient(rgba(0,0,0,0.5) 0%, rgba(235, 228, 224, 0.95) 20%, rgba(235, 228, 224, 0.95) 80%,rgba(0,0,0,0.5) 100%);
}

#contents .no{
        background-color: #ee8d2a;
}

#contents .box .box_item:after {
    background: linear-gradient(to top left, rgba(255,255,255,0) 50%, #f08921 50.5%) no-repeat top left/100% 100%;
}

.catch_txt {
    padding: 40px 40px;
    padding-bottom: 60px;
    background-image: url(./Dup/img/test.jpg);
    background-size: 20%;
    color: black;
}

.catch_txt h2{
        color: #eb5f2a;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 30px;
    letter-spacing: 0.2em;
}

.page3, .page4, .page2, .page5, .page6, .page7, .page8, .page9, .page10{
    /*background-image: url(./Dup/img/test.jpg);
    background-size: 10%;*/
    background-color: #ebe4e0;
}

#page_title:before {
    background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #ebe4e0 50.5%) no-repeat top left/100% 100%;
}

/*#page_title:before {
        background: url(./Dup/img/test.jpg);
    display: block;
    height: 200px;
    z-index: 2;
    bottom: -100px;
    background-size: 10%;
    transform: rotate(-5deg) scale(1.1);
}*/


#main span.befo{
    content: "";
    display: block;
    width: 90%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/right.png);
    background-position: center right;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
    z-index: 1;
    transition: 0.3s;
}

#main span.kakusi{
    content: "";
    display: block;
    width: 90%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 60%;
    background-image: url(./Dup/img/kakusi.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: 0.7s;
}

#main span.af{
    content: "";
    display: block;
    width: 90%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/center.png);
    background-position: center right;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
    z-index: 1;
    transition: 0.3s;
}

#main .main_box {
    height: 100%;
        background-color: white;
}

#main {
    height: 60vw !important;
    max-height: 100%;
    position: relative;
}

#main .cms_img1 img {
    height: 60vw;
}

#main .main_box {
    max-width: 430px;
    width: 26%;
}

.ore{
    transform: translate(-50%, -50%);
    top: 25%;
    left: 0%;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: auto;
    text-align: center;
}

.header_menu li a span{
    color:#52332b;
}

.cms_title::before {
    content: none;
}

#top_cms .cms_title{
    padding-top: 40px;
    display: block;
    padding-left: 20px;
}

.banner2{
      bottom: 10px;
    right: 10px;
    text-align: right;
    z-index: 100;
    max-width: 150px;
}

#page_title{
    background-position: center bottom;
}

#cms_2-c .cate_txt1{
        border: 1px solid #dbdada;
    padding: 30px 20px;
}

#tel_contact{
        background-color: #c5c5c5;
    margin-bottom: 0;
    color:black;
}

#tel_contact .tel a{
    background-color: #ea774b;
}

.page_title_box p.font_9up span{
        color: #ea774b;
}

.main_box .more a{
        margin: auto;
}

#main .sns_link {
    z-index: 2;
}

#contents .box .box_item:after {
    background: linear-gradient(to top left, rgba(255,255,255,0) 50%, #ee8d2a 50.5%) no-repeat top left/100% 100%;
}

#cms_6-a .cate_box p.box_txt1{
        background-color: white;
    padding: 20px;
}

#cms_6-a .cate_box p.box_txt2{
        padding: 20px;
}

.cate_list li {
    width: auto;
    padding: 0 4%;
}

@media all and (-ms-high-contrast: none){
  

}


/* ---------- タブレット ---------- */
@media screen and (max-width: 900px){

.banner2{
    max-width: 150px;
}

}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){

.more a {
    width: 85%;
}

.banner2 {
    max-width: 120px;
    bottom: 30px;
}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){

#main {
    height: 100vw !important;
}

#main .cms_img1 img {
    height: 100vw;
}

#main .sns_link {
    display: none;
}

.g-menu-btn {
    right: 10px;
}

.g-menu-btn {
    width: 40px;
    height: 40px;
}

#main span.af {
    display: none;
}

#main span.befo {
    width: 102%;
}

#main .main_box {
    max-width: 450px;
    width: 40%;
    z-index: 3;
    left: 3%;
}

.main_box .more a {
    font-size: 12px;
}

.shop_info .contact, .shop_info .info {
    padding: 90px 0;
}

.shop_info h2 {
    font-size: 20px;
}

.banner2 {
    max-width: 90px;
    bottom: 5px;
    right: 5px;
}

.footer_txt{
    padding-left: 0;
}

.catch_img{
    margin: auto;
}

.top_cms_box .cms_3-e .cate_box .box_title2{
    padding-left: 0;
}

#page_title {
    margin-bottom: 30px;
}

.cate_list {
    margin-left: 10px;
}

#cms_3-e .box_title2{
    font-size: 16px;
}

.page_title_box p{
        font-size: -webkit-calc(1rem + 14px);
    font-size: calc(1rem + 14px);
}

.page10 .more a{
        font-size: -webkit-calc(1rem + 0px);
    font-size: calc(1rem + 0px);
}

}