﻿.bg_color1 {
    background-color: #f0ede5;
}

.bg_color4 {
    background-color: #000622;
}

.border_color3 {
    border-color: #423128;
}
.bg_color3 {
    background-color: #423128;
}

#header.headtrans {
    background-color: rgba(48, 52, 73, 1) !important;
}

.bg_color2 {
    background-color: #f0ede5;
}

#header.headtrans #logo a {
    max-width: 60px;
    padding-top: 10px;
    padding-bottom: 10px;
}

#footer{
        background-color: #3c2d25;
}

#main_img .main_bg {
    mix-blend-mode: multiply;
}

#header #logo a {
    transform: scale(1);
    max-width: 100px;
    /*filter: drop-shadow(2px 2px 10px white);*/
}

#main_img .main_title {
    font-size: -webkit-calc(1rem + 45px);
    font-size: calc(1rem + 45px);
    width: 100% !important;
}

#main_img .main_title span{
        font-size: 22px;
    display: block;
}

.kore #header{
    opacity: 0;
}

.kore #header.headtrans{
    opacity: 1;
}

#main_img:before{
    content: "";
    display: block;
    width: 70%;
    height: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/catch.png);
    background-position: center left;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
    z-index: 2;
}

section[id^="page"] {
    color: black;
}

/*#page_title{*/
/*        background-image: url(./Dup/img/main_img1.jpg) !important;*/
/*}*/


/*---under---*/

.top_cms_wrap{
    overflow: hidden;
}

#page_title .page_title_gradient {
    display: none;
}

#page_title .page_title_bg {
    opacity: 0.3;
}

.cms_2-g .box_wrap {
    box-shadow: none;
}

.intro_back{
    display: none;
}

#contents1 .con1_bg {
    display: none;
}

li.contact_bt a{
    
}

.headtrans li.contact_bt a, footer .contact_bt a{
    background-color: #bf9417;
    border-color: #bf9417;
}

#logo2{
    margin-bottom: 0;
        width: 90px;
}

#contents1{
    background-position: top center;
}

main{
    color: black;
}

#loader img{
    width: 95px;
}

.more a span{
    border-color: #423128;
    color: #423128;
}

.cms_wrap .txt_color1 {
    color: #423128!important;
}

.page_title_bg{
    background-color: #ed895e;
}

ul.cate_list a{
    background-color: #303449;
}

#pc_nav li.d_none_tb a{
        filter: drop-shadow(0px 0px 20px rgba(60, 45, 37, 0.7)) drop-shadow(0px 0px 10px rgba(60, 45, 37, 0.7));
}

/*translate*/
#jp_button,#en_button{
transition: opacity 0.5s;
cursor: pointer;
background: none;
border: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
    color: black;
}
#jp_button:hover,#en_button:hover{opacity: 0.5;}

.en_txt{display: none;}

.translate_btn{
        text-align: right;
    padding: 10px;
}

#cms_3-e .cate_title{
    background-color: #b1b1b1;
}

#sp_nav .txt_color_nomal{
    color: black;
}

.footer_wrap{
    padding: 60px 30px;
}

#form_box, .contact_box{
    display: none;
}

.con_no_wrap.d_inline_b:before {
    background-color: #878787;
}


/*--under2--*/

.kore main > .translate_btn {
    text-align: center;
    padding: 10px;
        margin-top: 100px;
            text-align: center;
}

.kore main > .translate_btn button{
        font-size: 24px;
    font-family: "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}

.translate_btn p{
        font-size: 16px;
    margin: 16px auto;
    letter-spacing: 0.5em;
}

/*--under3--*/

.cms_2-g .cate_box {
    min-height: 450px;
        background-color: white;
}

#contents2 .con2_box{
    color: white;
    text-align: right;
}

.con1_txt{
    font-weight: bold;
    filter: drop-shadow(0px 0px 10px white) drop-shadow(0px 0px 25px white);
}

.con1_box .con_no{
        text-align: left;
    opacity: 1;
    color: #3c3c3c;
    filter: drop-shadow(0px 0px 20px white);
}


#contents1 .con1_title:before {
    
     right: auto; 
    background-color: #d3cfcd;
}

h3.intro_title{
    font-size: -webkit-calc(1rem + 18px);
    font-size: calc(1rem + 18px);
}

#intro .intro_wrap {
        max-width: 1080px;
    margin: 100px auto;
    margin-top: 0;
    padding-top: 0;
}

.con1_box h3 span{
        font-size: 19px;
}

.catch{
        max-width: 1080px;
    margin: 120px auto 10px;
}

h3.con1_title{
    text-align: left;
}


/*---under4---*/


.ore figure{
    position: relative;
    overflow: hidden;
}

.ore figure:after{
    display: block;
    width: 100%;
    height: 10%;
    position: absolute;
    top: 150%;
    left: calc(50% - 5px);
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    pointer-events: none;
    z-index: 2;
    transition: 0.3s;
    color: black;
    text-align: center;
    font-size: 20px;
}

.ore figure:nth-of-type(1):after{
    content: "Kohada";
    
}

.ore figure:nth-of-type(2):after{
    content: "Maguro";
    
}

.ore figure:nth-of-type(3):after{
    content: "Torotaku";
    
}

.ore figure:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 150%;
    left: 50%;
        background-color: rgba(240, 237, 229, 0.4);
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    pointer-events: none;
    z-index: 1;
    transition: 0.3s;
}

.ore figure:hover:before, .ore figure:hover:after{
    top: 50%;
    transition: 0.3s;
}


/*---under5---*/


#intro{
    position: relative;
    overflow: visible;
}

#page02, #page03, #page04, #page05, #page06, #page07, #page08, #page09, #page10{
    position: relative;
}

#page02:before, #page03:before, #page04:before, #page05:before, #page06:before, #page07:before, #page08:before, #page09:before, #page10:before{
        content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -20px;
    left: 0%;
    background-image: url(./Dup/img/hana.png);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 40%;
    pointer-events: none;
    opacity: 0.08;
}

#intro:before{
        content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -400px;
    left: 0%;
    background-image: url(./Dup/img/hana.png);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    opacity: 0.08;
}

.cms_2-g .box_txt1.en_txt {
    display: none;
}

#intro figure{
        transform: scale(1.2);
    transform-origin: left top;
}

.bg_white {
    background-color: #b1b1b1;
}

#page10 .cate_box a{
        color: #202020;
}

.linkStyle{
color: #c60d1f;
    font-weight: bold;
}

.pager li a{
    background-color: #ddd8d6;
}

.border_white {
    border-color: #b9b9b9;
}

#page_top{
    mix-blend-mode: difference;
}

#sp_nav .dec{
        color: black;
}

#header .menu_stick.stick_trans span:first-of-type, #header .menu_stick.stick_trans span:last-of-type {
    background-color: #2c3a5c;
}

.contents_wrap .cate{
        padding-top: 100px;
    margin-top: -100px;
}

#contact_tel span.dec{
    margin-left: 20px;
    margin-top: -10px;
    display: block;
}

#top_cms{
    position: relative;
}

#top_cms:before {
        content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0px;
    left: 0%;
    background-image: url(./Dup/img/hana2.png);
    background-position: -15% 100%;
    background-repeat: no-repeat;
    background-size: 35%;
    pointer-events: none;
    opacity: 0.08;
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){

#header {
    background-color: rgba(48, 52, 73, 1) !important;
}

#header #logo a {
    max-width: 70px;
}

.kore #header{
    opacity: 1;
}

#intro figure{
        transform: scale(1);
    transform-origin: left top;
}

.catch {
    padding: 0 20px;
    margin: 90px auto 10px;
}

.kore main > .translate_btn {
    margin-top: 70px;
}

/*#main_img .swiper-wrapper .box_img {*/
/*    padding-top: 100px;*/
/*}*/

/*#main_img .swiper-wrapper .box_img{*/
/*       animation: zoomUp2 1s ease-out 0s forwards;*/
/*}*/

#contents2 .con2_box {
    text-align: left;
}

#main_img {
    height: 56vw!important;
}

.ore figure:before {
    top: 50%;
    left: 50%;
        background-color: rgba(0, 0, 0, 0.25);
}

.ore figure:after {
    top: 50%;
}

#contents2 .con2_txt, #contents3 .con3_txt {
    padding-left: 0px;
    padding-right: 0px;
}

#top_cms:before {
    background-image: url(./Dup/img/hana2.png);
    background-position: -15% 100%;
    background-size: 65%;
}

#page02:before, #page03:before, #page04:before, #page05:before, #page06:before, #page07:before, #page08:before, #page09:before, #page10:before{
    background-size: 60%;
        top: -60px;
}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){

#main_img:before{
    content: none;
}

.catch p span{
    transform: none !important;
}

#main_img {
    margin: 5px auto;
}

#intro .intro_wrap {
    margin: 0px auto 0;
}

.cms_box div.pd_t-150px{
    padding-top: 100px;
    padding-bottom: 0;
}



.con1_box{
    padding-top: 350px;
        /*filter: drop-shadow(0px 0px 2px white) drop-shadow(0px 0px 10px white);*/
    padding-bottom: 40px;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0.8) 20%, rgba(240, 237, 229, 0.41) 55%, rgb(240, 237, 229, 0.1) 60%);
}

#contents2 .con2_box, #contents3 .con3_box{
    padding: 45px 20px 20px;
}

#contents2 .con2_box {
    text-align: left;
}

.ore figure:after{
    color: white;
}

#main_img .main_title {
    font-size: -webkit-calc(1rem + 30px);
    font-size: calc(1rem + 30px);
    line-height: 1em;
}

h3.intro_title {
    font-size: -webkit-calc(1rem + 16px);
    font-size: calc(1rem + 16px);
}

}