/* ---------- font ---------- */

@import url('https://fonts.googleapis.com/css2?family=Yuji+Syuku&display=swap');

:root{
    /*--font-jp: 'Zen Kaku Gothic New', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;*/
    --font-jp: "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";;
    --font-fude:  "Yuji Syuku","游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
    
	/*font-family: "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";*/
}
body, .font_sans-serif, .font_serif{
    font-family: var(--font-jp);
}
#header_menu,#t_cms_banner, #top_cms .cms_title .title_box h2, #page_title h2, .cate_title, .drawer-nav, #page10 .d_flex {
    font-family: var(--font-fude);
    font-weight: normal;
    color: #111;
}
#t_cms_banner .font_bold{
    font-weight: normal;
}
#page_title h2{
    color: #fff;
}
#content2 h2{
    font-size: 38px;
    line-height: 1.3;
}

/* ---------- color ---------- */
#intro{
    background-color: var(--color1);
}
#content1 .con1_img1, #t_cms_banner .bg_color {
    border: 4px solid;
    margin-inline: auto;
    border-image: linear-gradient(to right, #6b502b, #d7b27e);
    border-image-slice: 1;
}


/* ---------- all ---------- */
.top #header #logo, #header .contact, #main_img:before, #intro:before  {display: none;}
.is-show{background-color: rgb(13 12 38 / 33%);backdrop-filter: blur(4px);}
#top_header.is-show{background-color: rgb(13 12 38 / 0%);backdrop-filter: none;}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before{height: 2px;background-color: #ffffff!important;}
.drawer-open .drawer-hamburger-icon:before, .drawer-open .drawer-hamburger-icon:after{background-color: #111!important;} 
.drawer-open .drawer-hamburger-icon{background-color: transparent!important;}
.drawer-open #logo{transition: .3s;}
.drawer-open #logo{display:none;}
header #header #header_menu li:hover{border-color: #fff!important;}

#top_header.is-show {
    mix-blend-mode: difference;
}
.drawer-open #top_header.is-show {
    mix-blend-mode: normal;
}

.load_logo_wrap {
    z-index: 99998;
}
#loader {
    z-index: 99997;
     background: url( "../img/load_bg.jpg" ) center / cover no-repeat;
}
/*#loader img {
    width: 100%;
}*/
.load_logo{
     z-index: 99999;
     width: 110px!important
}
.load_logo img, .scroll-line{
	animation-name: loaderLogo;
	animation-duration: 3s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-delay: .3s;
	opacity: 0;
}
.scroll-line{
    animation-delay: 1.5s;
}
@keyframes loaderLogo {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

#wrap, .drawer-nav, #content1, #top_cms {
    background: url( "../img/bg1.jpg" ) center /  1000px repeat;
}
#top_cms {
    z-index: 1;
    position: relative;
}
/*#wrap:before {
    display: inline-block;
    content: "";
    width: 100%;
    height: 100%;
    background: url(../img/item1.png) left bottom / 35% no-repeat;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    pointer-events: none;
}*/

footer.width_1280-max{
    max-width: 100%;
    background-color: var(--color1);
    position: relative;
}
footer.top{
    margin-top: 50vh;
}
#footer {
    width: 100%;
    max-width: 1280px;
}
#footer,#footer a, #copyright, #copyright a, #bottom_menu a {
    color: #fff;
}
#loader{background-color: var(--color1);}


/* ---------- top ---------- */
.top #header{
    display: none;
}

#main_img{
    position: relative;
    z-index: 4;
}
#main_img:before{
    display: inline-block;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 5;
}
.fv_img_box {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vh;
}

.sticky_item{
    position:-webkit-sticky;
    position: sticky;
    top: 7%;
}
.sticky_item .txt {
    line-height: 2;
}
.sticky_container .img_box {
    position: relative;
    z-index: -1;
    opacity: 0.5;
}
.item1{
    width: 21vw;
    position: relative;
    left: 9%;
}
.item2{
    width: 35vw;
    position: relative;
    right: 0;
    top: -88px;
    margin-left: auto;
}
.item3{
    width: 23vw;
    position: relative;
    left: 0;
}
.item4{
    width: 19vw;
    position: relative;
    right: 13%;
    /* top: -179px; */
    margin-left: auto;
}

#intro {
    z-index: 4;
}
#intro .txt_wrap{
    width: 100%!important;
    position: relative;
}
#intro .txt_wrap::before {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    background-image: url(../img/bg4.png), url(../img/bg3.png);
    background-position: top 5% right -3%, top -3.2% left -3%;
    background-repeat: no-repeat;
    background-size: 28%, 27%;
    opacity: 0.3;
}
#intro .txt_wrap .title {
    font-size: calc(1rem + 12px);
    letter-spacing: 7px;
    line-height: 1.7;
    text-align: start;
    margin-bottom: -41px;
    background: url(../img/m_img.png) center top / 210px auto no-repeat;
    padding-top: 149px;
    margin-bottom: -8px;
}
.click_box {
    cursor: pointer;
    display: inline-block;
    padding: 4px;
    border-bottom: 1px solid;
    font-size: 17px;
}
#t_cms_banner .box_title {
    background-color: #fff;
}
#t_cms_banner .img_box:hover .box_title{
    background-color: var(--color3);
}
#t_cms_banner .img_box:hover .box_title{
    transition: .5s;
}
#t_cms_banner .bg_color{
    width: 90%;
}
#t_cms_banner .img_box {
    padding-top: 163%;
}

#content1{
    overflow: hidden;
    position: relative;
}
#content1::before {
    content:"";
    display: block;
    height: 44%;
    width: 100vw;
    background: url( "../img/bg2.png" ) center / 1100px repeat;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0.07;
}
#content1 .con1_wrap {
    padding-bottom: 61px;
}
#content1 .con1_img1 {
    width: calc(100% - 14vw);
}
#content1 #con1_txt > div {
    height: 297px;
}

#content2 .back_color2{
    background-attachment: fixed;
}
#content2 .back_color2::after {
    background: rgb(8 7 23 / 61%);
}

#content2 h2 {
    -webkit-writing-mode: vertical-tb;
    -moz-writing-mode: vertical-tb;
    -ms-writing-mode: lr-tb;
    -ms-writing-mode: vertical-rl;
    writing-mode: horizontal-tb;
    margin-right: 0% !important;
    margin-left: 0% !important;
    -webkit-text-orientation: inherit;
    text-orientation: inherit;
    display: block;
    margin-bottom: 50px;
    text-align: center;
    max-height: 100%;
    width: 100%!important;
}

#top_cms .cms_title{
    margin-bottom: 50px;
}
#top_cms .cms_title .title_box{
    background: url( "../img/icon.png" ) center top / 30px no-repeat ;
}



/* ---------- under ---------- */
header #header #header_menu li {
    max-height: 19.5em;
}
header #header #header_menu li a .jp {
    height: 16.5em;
}
#wrap:not(.top) #logo{
    max-width: 117px;
}

#page_title .back_color2 {
    background-color: rgb(0 0 0 / 55%);
}

.box_title1 {
    font-weight: bold;
}




/* ---------- tablet ---------- */
@media screen and (max-width: 768px){
#main_img {
    height: 100vh;
}

#intro .txt_wrap .title{
    font-size: -webkit-calc(1rem + 6px);
    font-size: calc(1rem + 6px);
}
#intro .txt_wrap::before {
    background-position: top 20% right -3%, top 2.8% left -3%;
    background-size: 35%, 28%;
}
    
.sticky_item {
    position: static;
    top: 7%;
}
.sticky_container .img_box{
    display: none;
}

#t_cms_banner .img_box {
    padding-top: 132%;
}
#t_cms_banner .box_title{
     right: 0;
}

footer.top{
    margin-top: 0;
}

#page_title h2{
    padding-top: 28px;
    padding-bottom: 0;
}
}

/* ---------- mobile ---------- */
@media screen and (max-width: 667px){
body {
    font-size: 15px;
}
.sp_contact{
    display: none;
}

.load_logo {
    width: 78px!important;
    top: 48%;
}
.scroll-line {
    bottom: -1px!important;
}
.fv_img_box, #video, #main_img {
    height: 600px;
}

#video video{
    min-height: 600px;
    height: 600px;
}

#intro .txt_wrap .title {
    font-size: -webkit-calc(1rem + 6px);
    font-size: calc(1rem + 6px);
    letter-spacing: 7px;
    line-height: 1.5;
    text-align: center;
    padding-bottom: 36px;
    background: url(../img/m_img.png) center top / 150px auto no-repeat;
    padding-top: 70px;
}
#intro .txt_wrap {
    padding: 44px 10px 19px;
}
#intro .txt_wrap::before {
    background-position: top 60% right -3%, top -34.2% left -3%;
        background-size: 46%, 45%;
}
#content1 #con1_txt > div{
    padding-top: 0;
}

#t_cms_banner .bg_color {
    width: 100%;
    right: 0;
}
#t_cms_banner .img_box:hover .bg_color {
        width: 100%;
    }
#t_cms_banner .box_title span{
    letter-spacing: 0px;
}
#t_cms_banner .img_box {
    padding-top: 182%;
}

#content1 #con1_txt > div{
    height: 100%!important;
}
#content2 h2 {
    font-size: 23px;
}
#content2 .con_title {
    line-height: 1.3;
}
#content2 .back_color2 {
    padding-top: 60px !important;
    padding-bottom: 30px !important;
}

#top_cms .cms_title {
    margin-bottom: 20px;
}
.top_cms_box {
    padding-bottom: 50px;
}
.more_btn {
    width: 135px;
}
.cms_btn_wrap .more_btn {
    width: 193px;
}
#page_title h2 {
        padding-top: 41px;
        padding-bottom: 0;
    }
.cms_2-g .box_item_img {
        padding-top: 77%!important;
    }
}



/* fix_bnr ---------------------------------------------------------------------------------------------*/
/*#fix_bnr {
    bottom: 24px;
    left: 20px;
    z-index: 3;
    width: 70%;
    max-width: 380px;
    transition: 0.5s;
    opacity: 0;
}*/
#fix_bnr {
    bottom: 24px;
    right: 0;
    z-index: 5;
    width: 70%;
    max-width: 331px;
    transition: 0.5s;
    opacity: 0;
    left: 0;
    margin: auto;
    pointer-events: none;
}  
#fix_bnr.scroll{
    opacity: 1;
    pointer-events: auto;
}
#fix_bnr.close{
    opacity: 0;
    z-index: -1;
}
@media screen and (max-width: 768px){
#fix_bnr.close{
    transform: translateX(-200px);
}
}
@media screen and (max-width: 667px){
#fix_bnr {
    width: 70% !important;
    right: 0px;
    left: 0;
    margin: auto;
    bottom: 10px;
    transform: translateX(-4px);
}
}
/* fix_bnr end ---------------------------------------------------------------------------------------------*/