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

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;600&display=swap');

:root{
    --font-jp: "Shippori Mincho", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";;
    --font-en: 'Jost', 'Shippori Mincho', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}
body, .font_sans-serif, .font_serif{
    font-family: var(--font-jp)!important;
    font-weight: 600;
}
.font_en, a[href^="tel:"],.font_shippori{
    font-family: var(--font-en)!important;
    font-weight: 300;
}

/* ---------- color ---------- */
.border_color2, .hvr_border_color2:hover {
    border-color: #e1ddd5;
}


/* ---------- all ---------- */
#logo{
    opacity: 0;
    pointer-events: none;
    transition: .5s;
}
#header.active #logo{
    opacity: 1;
    pointer-events: auto;
}
.shop_link {
    display: none;
}
.button_container, .shop_link {
    height: 110px;
    width: 110px;
    border-radius: 50%;
    top: 19px;
    right: 19px;
    top: -7px;
    right: 19px;
    background-color: #3b3b3b00;
}
.button_container span{
    background: var(--normal);
}

#wrap{
    min-width: 1200px;
}
#logo img, #logo2 {
    max-width: 150px;
}
#header.active #logo img {
    max-width: 250px;
    max-width: 150px;
}
.font_14 {
    font-size: 15px;
}
#logo2{
    margin-bottom: 17px;
}


/* ---------- stroke ---------- */
#stroke{
    width: 100% !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.stroke-path {
    stroke: #403939!important;
}
.stroke-path {
	fill: none;
	stroke: #111;
	stroke-dasharray: 1500;
	stroke-dashoffset: 1500;
	stroke-miterlimit: 10;
	stroke-width: 8px;
	stroke-linecap:round;
}
#fv_logo.active .stroke-path{
	animation: stroke-written 3s ease forwards;
}
@keyframes stroke-written {
	to {
		stroke-dashoffset: 0;
	}
}

#fv_logo img{
    opacity: 0;
}
#fv_logo.active img{
	animation: logoopa 2.5s ease .8s forwards;
}
@keyframes logoopa {
	to {
		opacity: 1;
	}
}




/* ---------- top ---------- */
#intro span.bg_box{display: none;}

#main_img,#main_img2{
    height: 87vh!important;
}
#fv_logo{
    top: 40%;
    left: 11%;
    transform: translateY(-50%);
    width: min(18vw, 286px);
    z-index: 2;
}
.fv_txt{
    width: 100%;
    background-color: rgb(192 174 157 / 68%);
    padding: 10px 10px;
    z-index: 3;
    bottom: 0;
    letter-spacing: 4px;
    font-size: 16px;
    
    .inner{
        position: relative;
        left: 10%;
        bottom: 0;
    }
}


#pc_nav {
    /* bottom: auto; */
    /* top: -5px; */
    /* right: 111px; */
    background-color: #fff;
    backdrop-filter: none;
    width: 100%;
}

#intro .left{
    margin-top: -137px;
}

#top_cms1{
    padding: 0 14%;
}
#contents_links{
    padding: 0 7%;
    padding-left: 0px;
}
#contents_links .box_wrap h3{
        font-size: 30px;
}
#contents_links .box_wrap .box a h4 {
    background-color: rgb(255 255 255);
    padding: 7px 10px 7px;
    font-weight: normal;
}
#contents_links .box_wrap .box a::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 
ease 0.6s;
    z-index: 2;
    opacity: 1;
    /* background-color: rgba(0, 0, 0, 0.05); */
    backdrop-filter: contrast(0.9);
}
#contents_wrap h2 {
    font-size: 30px;
}

#top_cms1 .top_cms_title h3, #top_cms2 .top_cms_title h3{
    /*text-align: left;*/
    font-size: 18px;
}
#top_cms1 .top_cms_title p, #top_cms2 .top_cms_title p {
    font-size: 30px;
    opacity: 1;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    letter-spacing: 6px;
    color: var(--normal);
    top: -67px;
}
.top_cms_title {
    margin-bottom: 0;
}
.more_bt {
    margin-top: 0;
}


/* ---------- under ---------- */
#cms_2-f .cate_img1 {
    max-height: 486px;
}
#page_title h2 span.font_anim {
    height: 65px;
    overflow: hidden;
}


/* ---------- tablet ---------- */
@media screen and (max-width: 768px){
#wrap{
    min-width: 100%;
}
#header.active #logo img {
    max-width: 119px;
}
#logo {
    padding-top: 20px;
}
#main_img, #main_img2 {
    height: 450px !important;
}
#intro .left{
    margin-top: 0;
}
#top_cms1 {
    padding: 100px 14%;
}
#cms_2-f .cate_img1 {
    max-height: 331px;
}
}

/* ---------- mobile ---------- */
@media screen and (max-width: 667px){
.load_logo {
    width: 130px;
}
#header {
    background-color: transparent;
}
#logo img, #logo2 {
    max-width: 78px;
}
#header.active #logo img {
        max-width: 78px;
    }
.button_container, .shop_link {
    height: 81px;
    width: 63px;
}
.button_container .posi_center {
    width: 50px;
    height: 42px;
}
#main_img, #main_img2 {
    height: 522px !important;
    margin-top: 0;
}
#fv_logo {
    top: 37%;
    left: 10%;
    transform: translateY(-50%);
    width: 30vw;
}
.fv_txt {
    letter-spacing: 3px;
        font-size: 15px;
        line-height: 1.6;
        padding: 9px 10px;
        text-align: center;
    
    .inner {
        left: 0;
    }
}
#intro{
    padding-top: 50px;
}
.more_bt {
    margin-top: 30px;
}
#contents3 .title{
    line-height: 1.5;
}
#top_cms1 .top_cms_title p, #top_cms2 .top_cms_title p{
    width: 100%;
}
.intro_title {
    transform: translate(0, 0)!important;
    opacity: 1!important;
}
.top_cms_title {
    margin-bottom: 30px;
}
#cms_2-f .cate_img1 {
        max-height: 154px;
    }
#page_title h2 span.font_anim {
    height: 39px;
    overflow: hidden;
}
}



/* fix_bnr ---------------------------------------------------------------------------------------------*/
#fix_bnr {
    bottom: 9px;
    right: 97px;
    z-index: 10;
    width: 70%;
    max-width: 350px;
    transition: 0.5s;
    opacity: 0;
pointer-events: none;
z-index: 4;
}
#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: 81% !important;
    right: auto;
    left: 0;
    margin: auto;
    bottom: 0;
}
}
/* fix_bnr end ---------------------------------------------------------------------------------------------*/