﻿:root{
    --br: #4d4748;
}

body, .txt_color_nomal {
    color: var(--br);
}

.bg_color1 {
    background-color: var(--br);
}

.more_btn span{
    position: absolute;
    bottom: -5px;
    transform: translateX(-15px);
}

.bg_color4 {
    background-color: transparent;
    background-image: url(./Dup/img/haikei.jpg);
}

#intro{
    display: none;
}


#content2 .back_color2:after {
    background: rgba(86, 56, 58, 0.75);
    backdrop-filter: brightness(0.7);
}

#content2 .con_inner{
    display: block;
}

/*#main_img:before {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background: transparent;
    z-index: 2;
    background-image: url(./Dup/img/effe.jpg);
}*/

.con1_img1{
    display: none;
}

.kusa{
    padding-bottom: 100px;
    /*background-image: url(./Dup/img/kusa.png);*/
    background-repeat: no-repeat;
    background-position: 97% 100.2%;
    background-size: max(20%, 100px);
    position: relative;
}

.kusa:before{
        content: "";
    display: block;
    width: 60%;
    height: 100%;
    position: absolute;
    top: -35px;
    left: 0%;
    /*background-image: url(./Dup/img/yoko.png);*/
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 300px;
    pointer-events: none;
}

#content1 #con1_txt {
    flex-direction: column-reverse;
}

#content1 #con1_txt p {
    height: auto;
        padding-top: 100px;
}

.img_box img{
    opacity: 1;
}

.img_box .box_title span{
        background-color: #4d4748 !important;
        color: white;
}

#t_cms_banner .box_txt {
    right: 0%;
    bottom: -10%;
}

/*#header_menu li span{
    text-shadow: 0px 0px 9px white;
    backdrop-filter: blur(2px);
    filter: drop-shadow(0px 0px 15px rgba(255, 255, 255, 0.3));
}



header #header #header_menu li a .jp{
    color: black;
    backdrop-filter: blur(2px);
}*/

#main_img:before, #intro:before {
        background: rgba(95, 95, 95, 0.0);
    mix-blend-mode: hard-light;
}

/*#main_img:after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/right.png);
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 60%;
    pointer-events: none;
mix-blend-mode: lighten;
    opacity: 0.8;
}

#main_img span{
        content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 25%;
    left: 75%;
    background-image: url(./Dup/img/copy.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-size: 43%;
    pointer-events: none;
    z-index: 3;
}
*/
header #header .contact a {
       background-color: rgba(77, 71, 72, 0.7);
    backdrop-filter: blur(10px);
}

header.is-show #header .contact a {
        background-color: rgba(77, 71, 72, 0.7);
    color: white;
    border: none;
}

/*#main_img{
    height: 60vw;
}*/

.all header #header {
    width: 95%;
    background-color: rgba(86, 56, 58, 0.7);
    padding: 10px 20px;
    border-radius: 0 0 20px 20px;
}

#page_title h2 {
       -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
    margin: auto;
    margin-top: -40px;
    padding-bottom: 10px;
    position: relative;
    z-index: 9;
    letter-spacing: 6px;
    -webkit-text-orientation: upright;
    text-orientation: upright;
    color: #fff;
    background-color: black;
    background-color: #56383a;
    background-color: #2b2828;
    padding-top: 10px;
    padding-left: 30px;
    padding-right: 30px;
    max-width: 400px;
    text-align: center;
    border-radius: 10px;
}

#page_title {
    height: 400px;
    position: relative;
}

#main_img:after{
        content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 52%;
    left: 50%;
    background-image: url(./Dup/img/eye.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-size: max(220px, 22.5%);
    pointer-events: none;
    z-index: 2;
}

#logo h1 img{
        filter: invert(1) drop-shadow(0px 0px 10px rgba(85, 62, 48, 1)) drop-shadow(0px 0px 20px rgba(85, 62, 48, 1));
}

.is-show #header #logo img {
    filter: none;
}

.all .back_color h2{
    display: none;
}

#page_title .back_color2 {
    background-color: rgba(97, 95, 95, 0.3);
    mix-blend-mode: darken;
}

header #header #header_menu li a .jp {
    height: 6.5em;
    line-height: 1.7em;
}

.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
    background-color: #000;
}

.all .drawer-hamburger-icon, .all .drawer-hamburger-icon:after, .all .drawer-hamburger-icon:before {
    background-color: #fff;
}

.drawer-open .drawer-hamburger-icon {
    background-color: transparent;
}

.contents_box_wrap .con_box{
    padding-bottom: 40px;
}

.modal-wrap {
    padding: 0px;
}

.modal-box .modal-close {
    top: 5px;
    right: 5px;
}

.modal-box .modal-close span {
    width: 35px;
    height: 35px;
}

.linkStyle{
color: #29a9e0;
font-weight: bold;
}

/*--20240515 correct start--*/

.only #logo h1{
    opacity: 0;
}

#content2 h3{
    font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/*--20240515 correct end--*/

/*--20240605 correct start--*/

.clone-nav div.menu_bt{
    display: none !important;
}

header #header_test{
    display: none;
}

header.clone-nav #header_test{
    display: block;
    width:80%;
    margin-right: 1.5%;
}

header.clone-nav #header_test ul li{
    margin-right: 0.7%;
}

.clone-nav .header_info {
    width: 80% !important;
}

.all header #logo{
    margin-right: 10%;
}

header.clone-nav  #logo {
    margin-right: 0;
}

#page_title h2 {
    margin-top: 100px;
        color: black;
    font-size: 35px;
    background-color: transparent;
        width: 100%;
    max-width: 100%;
}

#page_title {
        margin-bottom: 300px;
}

.all header #header {
    background-color: rgba(86, 56, 58, 0);
}

#page7 .box{
    padding-bottom: 0;
    padding-top: 0;
}

/*--20240605 correct end--*/



/*--20240617 correct start--*/

.bg_color4 {
    background-color: transparent;
    background-image: none; 
}

header.clone-nav #header_test ul li {
    margin-right: 1%;
}

.txt_color3 {
    color: #4d4748;
}

header div.contact{
        position: relative;
    right: -25%;
}

/*footer h3 + p.footer_cms, footer h3 + p.footer_cms + div.tel{
    display: none;
}*/

footer #info h3{
    display: none;
}

/*--20240617 correct end--*/


/* ---------- カスタム ---------- */
@media screen and (max-width: 1280px){

#content1 #con1_txt{
        text-align: left;
 -webkit-writing-mode: horizontal-tb;
 -ms-writing-mode: lr-tb;
 writing-mode: horizontal-tb;
}

#content1 {
    max-width: 780px;
}

#content1 #con1_txt h2 {
    margin-left: 0;
}

header div.contact{
        position: relative;
    right: 0%;
}

}


/* ---------- カスタム ---------- */
@media screen and (max-width: 845px){
    /*--20240605 correct start --*/

.clone-nav div.menu_bt{
    display: block !important;
}

header.clone-nav #header_test{
    display: none;
}

/*--20240605 correct end --*/
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){

#content1 #con1_txt p {
        padding-top: 50px;
}



}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){

.kusa:before {
    background-size: 100%;
}

    #main_img {
        height: 80vh;
    }

.kusa {
    background-size: max(45%, 100px);
}

.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
    background-color: #000;
}

#page_title h2 {
    letter-spacing: 0.15em;
    max-width: 300px;
    font-size: 25px;
}




}
