@charset "utf-8";

/* ==========================================================================
	root
========================================================================== */


:root {
    --base-text-color: #212121;
    --base-yellow-color: #c09f46;
    --base-yellow-color02: #dab84b;
    --base-yellow-color03: #bd9c46;    
    --base-link-color:#bd9c46;        
    --base-bg-color: #f6f6f6;    
    --easeInQuad:cubic-bezier(.55, .085, .68, .53);
    --easeOutQuad:cubic-bezier(.25, .46, .45, .94);
    --fz14:clamp(13px,0.93vw,16px);
    --fz15:clamp(14px,1vw,17px);
    --fz16:clamp(15px,1.06vw,18px);
    --fz17:clamp(16px,1.13vw,19px);
    --fz18:clamp(17px,1.2vw,20px);
    --fz20:clamp(19px,1.33vw,22px);
    --fz22:clamp(21px,1.46vw,24px);
    --fz24:clamp(23px,1.6vw,26px);
    --fz28:clamp(27px,1.86vw,30px);
    --fz30:clamp(29px,2vw,32px);
    --fz32:clamp(31px,2.12vw,34px);
    --fz34:clamp(33px,2.26vw,36px);
    --fz36:clamp(35px,2.4vw,38px);
    --fz38:clamp(37px,2.53vw,40px);
    --fz46:clamp(45px,3.06vw,48px);
    --fz62:clamp(60px,4.13vw,64px);
    --fz74:clamp(72px,4.93vw,78px); 
}


@media screen and (max-width :800px ){
    :root {
        --fz10:max(10px,2.5vw);
        --fz12:clamp(11px,3vw,14px);
        --fz13:clamp(12px,3.25vw,15px);
        --fz14:clamp(13px,3.5vw,16px);
        --fz15:clamp(14px,3.75vw,17px);
        --fz16:clamp(15px,4vw,18px);
        --fz17:clamp(16px,4.25vw,19px);
        --fz18:clamp(17px,4.5vw,20px);
        --fz19:clamp(18px,4.75vw,21px);
        --fz20:clamp(19px,5vw,22px);
        --fz21:clamp(10px,5.25vw,23px);
        --fz22:clamp(21px,5.5vw,24px);
        --fz23:clamp(22px,5.75vw,25px);
        --fz26:clamp(25px,6.5vw,28px);
        --fz27:clamp(26px,6.75vw,29px);
        --fz28:clamp(27px,7vw,30px);
        --fz29:clamp(28px,7.25vw,31px);
        --fz33:clamp(32px,8.25vw,35px);   
        --fz35:clamp(34px,8.75vw,37px);   
        --fz39:clamp(38px,9.75vw,41px);    
        --fz42:clamp(41px,5.25vw,44px);
       
    }

}

/* ==========================================================================
	html
========================================================================== */
/*
html {
  visibility: hidden;
}
*/
html.wf-active {
  visibility: visible;
}
html {
	font: normal normal normal 62.5%/1 "Noto Sans JP","Noto Sans Japanese", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, MS PGothic, sans-serif;
    font-style: normal;
    font-weight: 300;
}
/*
.ie body {
  font-family:  'brandon-grotesque', 'source-han-sans-japanese','Noto Sans JP', 'メイリオ', 'Meiryo', sans-serif;
}
*/
body {
	margin: 0;
	padding: 0;
	background-color: #FFF;
	background-color: rgba(255, 255, 255, 1);
	position: relative;
	color: #212121;
	text-rendering: optimizeLegibility;
	font-feature-settings : "palt" 1;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-kerning: normal;
			font-kerning: normal;
	-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
    letter-spacing: 0.03em;
    
}
body.nav-open {
     overflow: hidden;
}
button,input, select, textarea {
  font-family : inherit;
  font-size   : 100%;
}
a {
	color:#000;
	text-decoration: none;
	-webkit-transition: all 0.4s var(--easeOutQuad);
    -moz-transition: all 0.4s var(--easeOutQuad);
    -o-transition: all 0.4s var(--easeOutQuad);
    transition: all 0.4s var(--easeOutQuad);
    
}

a:hover,
.trns:hover{
	-webkit-transition: all 0.4s var(--easeOutQuad);
    -moz-transition: all 0.4s var(--easeOutQuad);
    -o-transition: all 0.4s var(--easeOutQuad);
    transition: all 0.4s var(--easeOutQuad);
}
input,
select,
textarea,
button,
*:before,
*:after {
	-webkit-transition:  opacity 0.4s all var(--easeOutQuad);
	        transition:  opacity 0.4s var(--easeOutQuad);
	-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
}

a:focus,
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

img {
	width: 100%;
	vertical-align: bottom;
	-ms-interpolation-mode: bicubic;
		interpolation-mode: bicubic;
	-webkit-backface-visibility: hidden !Important;
}

.pc_off{
	display:none !important;
	}
.tab_on{
	display:none !important;
	}
.sp_off{
	display:block !Important;
	}

img.preload{
	display:none;
}
::-moz-selection
{
    background: #ebe5d5;
}
::selection
{
    background: #ebe5d5;
}

/* Safari */
::-moz-selection{
    background: #ebe5d5;
}



/* ==========================================================================
	メニュー
========================================================================== */
.menu_wrap{
    position: relative;
    z-index:500;
}
#header{
    position: absolute;
    width: 100%;
    height:auto;
    left: 0;
    right: 0;
    margin:auto;
    top:0;
}
#header h1{
    position:absolute;
    left: 0;
    top: 0;
    background:#fff;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 280px;
}
#header h1:before{
    
    content:"";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background:#fff;
    width: 100%;
    height: 100%;
    z-index:-1;
}
#header h1 a{
    display: block;
    width: 223px;
}
#header h1 a:hover{
    opacity:.6;
}
#header .menu_list{
    position: absolute;
    top:220px;
    right: 0;
    padding:30px 25px;
    padding:min(30px,2vw) clamp(50px,1.6vw,70px) min(60px,5vw);
    width: min(300px,28vw);
    min-width:300px;
    background:#fff;
    z-index:15;
    border-radius:0 0 0 10px;
    box-sizing:border-box;
}
.detail #header .menu_list{
    height: 466px;
    border-radius:0;
    border-left:1px solid #ebe5d5;
    border-bottom:1px solid #ebe5d5;
}


#header .menu_list a.b_link{
    position:relative;
    display:block;
    font-size: 17px;
    font-weight: 500;
    overflow: hidden;
    padding:28px 0;
    box-sizing:border-box;
    border-bottom:1px solid var(--base-link-color);
}
#header .menu_list a:hover{
    color:var(--base-link-color);
    padding-left:25px;
}

#header .menu_list a.b_link:before{
    content:"";
    display: block;
    width: 12px;
    height: 12px;
    position: absolute;
    left: -12px;
    top: 0;
    bottom: 0;
    margin:auto;
    background:url(../image/common/menu_link_ar.png);
    background-size:cover;
    transition: left .4s var(--easeOutQuad);
}
#header .menu_list a.b_link:hover:before{
    left: 0;   
    transition: left .4s var(--easeOutQuad);
}


#header .menu_list a.s_link{
    position:relative;
    display:inline-block;    
    padding-left: 27px;
    box-sizing:border-box;
    margin-top: 50px;
}
#header .menu_list a.s_link:before{
    content:"";
    display: block;
    width: 18px;
    height: 18px;
    position: absolute;
    left: 0;
    top: 0;
    background:url(../image/common/menu_s_link_icon01.png);
    background-size:cover;
}
#header .menu_list a.s_link:last-child:before{
    width: 13px;
    height: 16px;
    top: 0;
    background-image:url(../image/common/menu_s_link_icon02.png);
}
#header .menu_list a.s_link span{
    position: relative;
    font-size: 16px;
    font-weight: 500;
}
#header .menu_list a.s_link span:after{
    content:"";
    display: block;
    position: absolute;
    width:0;
    height: 1px;
    left:0;
    bottom:-3px;
    background:var(--base-link-color);
    z-index: 10;
    transition: width 0.4s var(--easeOutQuad);
}
#header .menu_list a.s_link:hover span:after{
    width: 100%;
    transition: width 0.4s var(--easeOutQuad);
}
    
#header .menu_list a.s_link:last-child{
    margin-left: 15px;
    padding-left: 20px;
    position:relative;
    display:inline-block;    
}


#header .contact_bnr {
    position: absolute;
    right: 355px;
    right: min(355px,calc(28vw + 30px));
    top: 55px;
    z-index:20;
    width: 300px;
    height: 100px;
    border-radius:50px 50px 10px 50px;
    background:#fff;
    padding:30px 0 0 85px;
    box-sizing:border-box;
}
#header .contact_bnr:hover{
    border-radius:10px;
}
#header .contact_bnr p {
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 11px;
    transition:color .4s var(--easeOutQuad);
}

#header .contact_bnr:hover p{
     color:var(--base-link-color);   
    transition:color .4s var(--easeOutQuad);
}
#header .contact_bnr .enb {
    font-size: 11px;
    color:var(--base-link-color);
}
#header .contact_bnr .ar {
    position: absolute;
    right: 0;
    bottom:0;
    width: 50px;
    height: 50px;
    background:url(../image/common/contact_bnr_bg.png);
    background-size:cover;
}
#header .contact_bnr .ar:before{
    content:"";
    display: block;
    position: absolute;
    right: 13px;
    bottom: 12px;
    margin:auto;
    width: 8px;
    height: 8px;
    background:url(../image/common/w_ar.png);
    background-size:cover;
    transition:transform .4s var(--easeOutQuad);
}
#header .contact_bnr:hover .ar:before{
    transform: translateX(5px);
    transition:transform .4s var(--easeOutQuad);
}
#header .contact_bnr:before{
    content:"";
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    left: 35px;
    top: 31px;
    background:url(../image/common/contact_bnr_icon.png);
    background-size:cover;
}


.global-nav {
    display: block;
    position: fixed;    
    top: 0;
    width: 100%;
    height: 100vh;
    /*
    background-color:rgba(0,0,0,.7);
    */
    box-sizing: border-box;
    transition: all .6s;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    /*
    overflow-y: auto;
    */
}

.hamburger {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    width: min(300px,28vw);
    min-width:300px;
    height: 220px;
    cursor: pointer;
    z-index: 99999;
    /*
    visibility: hidden;
    opacity:0;
    */
    transition: all .4s ease;
    background:#ebe5d5;
}
.hamburger:hover{
    background:#212121 !Important;
}
.hamburger_line {
    display: block;
    position: absolute;
    left: 0;
    top: 78px;
    right: 0;
    margin: auto;
    width: 150px;
    height: 2px;
    background-color: #212121;
    transition: all .4s cubic-bezier(.25, .46, .45, .94);
}
.hamburger_line-2 {
    top: 90px;
}
.hamburger_line-3 {
    top:102px;
}

.hamburger:hover .hamburger_line{
    background:#fff;
    transition: all .4s cubic-bezier(.25, .46, .45, .94);
    
}

.hamburger:after{
    content:"MENU OPEN";
    font-size: 26px;
    color:#212121;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 122px;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;

    transition: all .4s cubic-bezier(.25, .46, .45, .94);
}

.hamburger:hover:after{
    color:#fff;
    transition: all .4s cubic-bezier(.25, .46, .45, .94);
}

/* 表示された時用のCSS */
.nav-open .global-nav {
    visibility: inherit;
    opacity:100;
    /*
    right:0;
    */
}



.global-nav .navi_wrap{
    width: 95%;
    max-width:1000px;
    padding-top:155px;
    height: calc(100vh - 220px);
    background:#fff;
    position: absolute;
    right: 0;
    top: 220px;
    z-index:50;
    box-sizing:border-box;
    overflow-y: auto;
    
}


.global-nav .navi_wrap{
    overflow-y: auto;
    padding-top: 110px;
    
}

/*link_area*/
.navi_wrap .link_area {
    position: relative;
    width: 90%;
    max-width:;
    max-width:760px;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    margin:0 auto 90px;

}
.navi_wrap .l_link {
    width: 30.5%;
    max-width:220px;
}

.navi_wrap .list a {
    position: relative;
    display: block;
    font-size: 20px;
    font-weight: 500;
    color:var(--base-text-color);
    padding:30px 0;
    border-top:1px solid #e7e4dd;    
    overflow: hidden;
    box-sizing:border-box;
    transition: all .4s var(--easeOutQuad);
}
.navi_wrap .list a:hover{
    color:var(--base-link-color);
    padding-left:28px;
    transition: all .4s var(--easeOutQuad);
}
.navi_wrap .list a:before{
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    position: absolute;
    left: -12px;
    top: 2px;
    bottom: 0;
    margin: auto;
    background: url(../image/common/menu_link_ar.png);
    background-size: cover;
    transition: left .4s var(--easeOutQuad);
}
.navi_wrap .list a:first-child:before {
    top: -26px;
}
.navi_wrap .list a:hover:before{
    left: 0;
    transition: left .4s var(--easeOutQuad);
}

.navi_wrap .list a.pc_off {
     display:none;   
}

.navi_wrap .list a:first-child{
    padding-top: 0;
    border-top:none;
}
.navi_wrap .news_link {
    width: 30.5%;
    max-width:220px;
    width: 28.9%;
}
.navi_wrap .news_link p {
    display: block;
    font-size: 20px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom:1px solid #e7e4dd;    
}
.navi_wrap .news_link a {
    position: relative;
    display: block;
    font-size: 15px;
    padding-left: 20px;
    margin-bottom: 17px;
    width: auto;
    color:var(--base-text-color);
    transition: all .4s var(--easeOutQuad);
    box-sizing:border-box;
}
.navi_wrap .news_link a:hover {
    padding-left: 25px;
    color:var(--base-link-color);
    transition: all .4s var(--easeOutQuad);
}
.navi_wrap .news_link a:before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 0;
    margin: auto;
    background: url(../image/common/menu_link_ar.png);
    background-size: cover;
    transition: left .4s var(--easeOutQuad);
}
.navi_wrap .news_link a:hover:before {
    left: 5px;
    transition: left .4s var(--easeOutQuad);
}
.navi_wrap .r_link {
    width: 32%;
    max-width:200px;
}



/*tell_mail*/
.navi_wrap .tell_mail{
    width: 100%;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    border-top:1px solid #e7e4dd;
    border-bottom:1px solid #e7e4dd;
}
.navi_wrap .tell_mail .env{
    display: block;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.03em;
}
.navi_wrap .tell_box {
    position: relative;
    width: 50%;
    padding-top: 75px;
    display: flex;
    justify-content: center; 
    border-right:1px solid #e7e4dd;
    box-sizing:border-box;
}

.navi_wrap .tell_mail h3 {
    font-size: 20px;
    font-weight: 500;
}
.navi_wrap .tell_box a {
    display: block;
    font-size: 36px;
    color:var(--base-text-color);
    margin-top: 40px;
}
.navi_wrap .tell_box a span{
    font-size: 22px;
    color:var(--base-text-color);
    margin-top: 12px;
}

.navi_wrap .mail_box {
    position: relative;
    width:50%;
    display: flex;
    justify-content: center; 
    box-sizing:border-box;
    padding-top: 75px;
    padding-bottom: 80px;
}
.navi_wrap .mail_box .w_link_btn {
    width: 300px;
    margin-top: 30px;
}


/*sosial_area*/
.navi_wrap .social_area{
    position: relative;
    padding:40px min(100px,6.66vw);
    box-sizing:border-box;
}
.navi_wrap .social_area p{
    display:inline-block;    
    font-size: 15px;
    margin-right: 25px;
}
.navi_wrap .map_link {
    position: relative;
    display: inline-block;
    padding-left: 23px;
    box-sizing:border-box;
}
.navi_wrap .map_link:before{
    content:"";
    display: block;
    position: absolute;
    left: 0;
    top: 1px;
    width: 13px;
    height: 16px;
    background-image: url(../image/common/menu_s_link_icon02.png);
    background-size:cover;
}
    
.navi_wrap .map_link span {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    color:var(--base-text-color);
    transition: color 0.4s var(--easeOutQuad);
}
.navi_wrap .map_link:hover span {
    color:var(--base-link-color);
    transition: color 0.4s var(--easeOutQuad);
    
}
.navi_wrap .map_link span:before{    
    content:"";
    display: block;
    position: absolute;
    width:100%;
    height: 1px;
    left:0;
    bottom:-6px;
    background:var(--base-text-color);
    z-index: 5;
}
.navi_wrap .map_link span:after{
    content:"";
    display: block;
    position: absolute;
    width:0;
    height: 1px;
    left:0;
    bottom:-6px;
    background:var(--base-link-color);
    z-index: 10;
    transition: width 0.4s var(--easeOutQuad);
}
.navi_wrap .map_link:hover span:after{
    width: 100%;
    transition: width 0.4s var(--easeOutQuad);
}

.navi_wrap .inst_link {
    display: block;
    position: absolute;
    right:150px;
    right: calc(min(6vw,90px) + 70px);
    top: 40px;
    bottom: 0;
    margin:auto;
    width: 20px;
    transition: opacity 0.4s var(--easeOutQuad);
}

.navi_wrap .fb_link {
    display: block;
    position: absolute;
    top: 40px;
    bottom: 0;
    margin:auto;
    width: 10px;
    right: 120px;
    right: calc(min(6vw,90px) + 42px);
    transition: opacity 0.4s var(--easeOutQuad);
}


.navi_wrap .twi_link {
    display: block;
    position: absolute;
    top: 40px;
    bottom: 0;
    margin:auto;
    width: 24px;
    right: 90px;
    right: min(6vw,90px);
    transition: opacity 0.4s var(--easeOutQuad);
}


.navi_wrap .inst_link:hover,
.navi_wrap .fb_link:hover{
    opacity:.4;
    transition: opacity 0.4s var(--easeOutQuad);
}




/* 表示された時用のCSS */

.nav-open .hamburger {background:#212121 !Important;}
.nav-open .hamburger_line{clip-path : none;}
.nav-open .hamburger_line-1 {transform: rotate(-10deg);background:#fff;}
.nav-open .hamburger_line-2 {transform: rotate(10deg);top:78px;background:#fff;}2 {width: 100%;}
.nav-open .hamburger_line-3 {display:none;}
.global-nav {transition: all .4s cubic-bezier(.25, .46, .45, .94);}
    
.nav-open .hamburger:after{
    content:"MENU CLOSE";
    color:#fff;
    transition: all .4s cubic-bezier(.25, .46, .45, .94);
}

.nav-open .all_wrap,
.nav-open #header{    
	filter: blur(8px);/*ぼかし具合を変更したい場合はこの数値を変更*/
}


/* 追従 */

.fixed .hamburger{
   position:fixed;
   opacity:100;
   visibility: visible;
    background:none;
}
@media screen and (max-width : 1050px ){
    
    #header .contact_bnr{display:none;}
}
@media screen and (max-width : 800px ){
    
    #header h1{width: 265px;height: 170px;}
    #header h1 a{width: 173px; }
    #header .menu_list{display:none;}


    .hamburger {
        width: 135px;
        height:135px;
        min-width:10px;
        background:none;
    }
    .hamburger:hover{
        background:none !Important;
    }
    .hamburger:before{
        content:"";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index:-1;background: rgb(189,156,70);
        background: -webkit-linear-gradient(bottom, rgba(189,156,70,0) 0%, rgba(189,156,70,.6) 100%);
        background: -o-linear-gradient(bottom, rgba(189,156,70,0) 0%, rgba(189,156,70,.6) 100%);
        background: linear-gradient(to top, rgba(189,156,70,0) 0%, rgba(189,156,70,.6) 100%);
        
    }

    .hamburger_line {
        top: 47px;
        left: 0;
        width: 50px;
        background:#fff;
       }
    .hamburger_line-2 {
        top: 57px;
    }
    .hamburger_line-3 {
        top:67px;
    }


    .hamburger:after{
        display:none;
    }

    /* 表示された時用のCSS */
    .nav-open .global-nav {
        visibility: inherit;
        opacity:100;
        /*
        right:0;
        */
    }


    .global-nav .navi_wrap{
        width: 100%;
        padding-top:0;
        height: 100vh;
        position: absolute;
        right: 0;
        top: 0;
    }


    .global-nav h2{
        position:relative;
        display: flex !Important;
        align-items: center;
        justify-content: center;
        width: calc(100% - 120px);
        height: 170px;
        border-bottom:1px solid #e7e4dd;
        box-sizing:border-box;
    }
   .global-nav h2 a{
        display: block;
        width: 178px;
    }
    
    /*link_area*/
    .navi_wrap .link_area {
        width: 82.5%;
        margin:55px auto 30px;

    }
    .navi_wrap .l_link {
        width: 45%;
        max-width:800px;
    }
    #footer .news_link {
        width: 45%;
    }
    
    .navi_wrap .list a {
        font-size: 14px;
        padding:25px 0;
        border-top:1px solid #e7e4dd;    
    }
    .navi_wrap .list a:before{
        width: 10px;
        height: 10px;
        left: -10px;
        transition: left .4s var(--easeOutQuad);
    }

    .navi_wrap .news_link {
        width: 45%;
        max-width:800px;
    }
    .navi_wrap .news_link p {
        font-size: 14px;
        padding-bottom: 25px;
        margin-bottom: 25px;
        border-bottom:1px solid #e7e4dd;    
    }
    .navi_wrap .news_link a {
        display: block;
        font-size: 14px;
        padding-left: 16px;
        margin-bottom: 17px;
    }


    /*contact_box*/
    .navi_wrap .contact_box {
        position: relative;
        text-align: center;
        width: 100%;
        padding-top:18.75vw;
        border-top: 1px solid #e7e4dd;
    }
    .navi_wrap .contact_box h3{
        display: inline-block;
        position: relative;
        font-size: 37px;
        font-weight: 500;
        padding-left: 47px;
        box-sizing:border-box;
    }
    .navi_wrap .contact_box h3:before {
        content:"";
        display: block;
        width: 30px;
        height: 30px;
        position: absolute;
        left: 0;
        top: 5px;        
        background:url(../image/common/contact_box_icon.png);
        background-size:cover;
    }
    
    .navi_wrap .contact_box p{
        font-size: 15px;
        line-height: 32px;
        font-weight: 500;
        width: 80%;
        margin:35px auto 65px;
        text-align:left;
    }


    /*tell_mail*/
    .navi_wrap .tell_mail{
        width: 100%;
        border-left:none;
        border-right:none;
        box-sizing:border-box;
    }
    .navi_wrap .tell_mail .env{
        display:inline-block;
        margin-top: 0;
        margin-left: 14px;
        transform: translateY(-3px);
    }
    .navi_wrap .tell_box {
        width: 100%;
        padding: 12.5vw 0;
        border-left:none;
        border-right:none;
        border-bottom:1px solid #e7e4dd;
        box-sizing:border-box;
    }

    .navi_wrap .tell_mail h3 {
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 12px;
    }
    .navi_wrap .tell_mail h3 span{
        display:inline-block;
        margin-top: 0;
        margin-left: 14px;
        transform: translateY(-3px);
        
    }
    .navi_wrap .tell_box a {
        font-size: 39px;
        margin-top: 25px;

    }
    .navi_wrap .tell_box a span{
        font-size: 19px;
    }

    .navi_wrap .mail_box {
        width: 100%;
        padding: 12.5vw 0;
        display: flex;
        justify-content: center; 
    }
    .navi_wrap .mail_box .w_link_btn {
        width: 100%;
        max-width:800px;
        margin-top: 25px;
        text-align: center;
        padding-right: 30px;

    }


    /*sosial_area*/
    .navi_wrap .social_area{
        padding:11.25vw 0;
        text-align: center;
    }
    .navi_wrap .social_area p{
        display: block;
        text-align: center;
        font-size: 15px;
        margin:0 0 17px;
    }
    .navi_wrap .map_link {
        width: 170px;
        margin-right: 22px;
        padding-left: 18px;

    }
    .navi_wrap .map_link:before{
        top: 2px;
        width: 13px
    }

    .navi_wrap .map_link span {
        font-size: 16px;
    }
    .navi_wrap .inst_link,
    .navi_wrap .fb_link,
    .navi_wrap .twi_link{
        position: relative;
        display: inline-block;
        right: auto;
        top:auto;
        bottom:auto;
        transform: translateY(4px);
    }
    
    .navi_wrap .inst_link,
    .navi_wrap .fb_link{margin-right: 18px;}
    
    .navi_wrap .b_img {
        position: relative;
        background: url(../image/common/footer_b_img_sp.jpg) center center fixed;
        /*
        background-size: cover;
        */
        max-height:1200px;
        overflow: hidden;
    }
    .iPhone .navi_wrap .b_img {
        background: url(../image/common/footer_b_img_sp.jpg) center center;
        background-size:cover;
    }
    .navi_wrap .b_img:before{
        content:"";
        display: block;
        padding-top: 112.5%;
    }
    .navi_wrap .b_img .copy{
        font-size: 13px;
        color:#fff;
        position: absolute;
        right: 9.3%;
        top: 0;
        bottom: 0;
        margin:auto;
        text-align: center;
        letter-spacing: 0.1em;
    }
    /* 表示された時用のCSS */
    .nav-open .hamburger_line,
    .nav-open .hamburger:hover .hamburger_line{
        background:#bd9c46;
    }
    .nav-open .hamburger_line-1{        
        transform: rotate(-20deg);
        top:57px;
    }   
    .nav-open .hamburger_line-2{
        transform: rotate(20deg);
        top:57px;
    }
    .nav-open .hamburger:before{
        height: 170px;
        background: #e7e4dd;
        
    }
    
    .nav-open .hamburger:after{
        display: block;
        content:"CLOSE";
        color:var(--base-linl-color);
        top: 84px;
        font-size: 14px;
        color:#bd9c46;
    }
    
}


@media screen and (max-width : 500px ){
    
    #header h1{width: calc(100% - 135px);}

    
}
/* ==========================================================================
	hasei
========================================================================== */
#hasei_main {
    position: relative;
    height: 786px;
    padding-right: 10vw;
    box-sizing:border-box;
    background:#f4f1e9;
}
#hasei_main .img_area {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius:0 0 10px;
    padding: 570px 0 0 6.66vw;
    box-sizing:border-box;
}
.detail #hasei_main .img_area {
    padding-top: 430px;
}
#hasei_main .img_area:after {
    content: "";
    display: block;
    width: 100%;
    height: 507px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
    z-index: 2;
}
#hasei_main .img_area img{
	filter: blur(8px);/*ぼかし具合を変更したい場合はこの数値を変更*/
}
#hasei_main .enb {
    position: relative;
    font-size: 80px;
    color:#fff;
    margin-bottom: 20px;
    z-index:10;
}
#hasei_main p {
    position: relative;
    font-size: 20px;
    font-weight: 700;
    color:#fff;
    z-index:10;
}
@media screen and (max-width : 800px ){
    #hasei_main {
        height: 550px;
        padding-right:0;
    }
    .detail #hasei_main{
        height: 400px;
    }
    #hasei_main .img_area {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius:0;
        padding: 408px 10% 0;
    }
    .detail #hasei_main .img_area {
        padding-top: 260px;
    }
    #hasei_main .img_area:after {
        height: 300px;
    }
    #hasei_main .enb {
        font-size: 45px;
        margin-bottom: 17px;
        z-index:10;
    }
    #hasei_main p {
        font-size: 15px;
    }
    
}

/* ==========================================================================
	wp 一覧
========================================================================== */
.category {
    position: relative;
    width: 100%;
    padding:120px 6.66vw 100px;
    box-sizing:border-box;
    background:#f4f1e9;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
}
.category .tit_area{
    position: relative;
    width:auto;    
    margin-bottom: 20px;
    z-index:10;
}
.category h2 {
    display:inline-block;
    width: auto;
    font-size: 36px;
    font-size: var(--fz36);
    margin-right: 24px;
}
.category p {
    display:inline-block;
    width: auto;
    font-size: 15px;
    font-size: var(--fz15);
    font-weight: 500;
    transform: translateY(-6px);
}
.category .cate_list {
    position: relative;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    width: auto;
    transform: translateY(9px);
    z-index:10;
}
.category .cate_list a{
    position: relative;
    display:inline-block;
    padding-left: 28px;
    margin-right: 38px;
}
.category .cate_list a:before{
    content:"";
    display: block;
    width: 20px;
    height: 20px;
    background:#fff;
    border:5px solid #ebe5d5;
    box-sizing:border-box;
    border-radius:50%;
    position: absolute;
    left: 0;
    top: 1px;
    transition: border 0.4s var(--easeOutQuad);
}
.category .cate_list a.active:before,
.category .cate_list a:hover:before{
     border-color:var(--base-link-color);   
    transition: border 0.4s var(--easeOutQuad);
}
.category span {
    position: relative;
    font-size: 16px;
    font-size: var(--fz16);
    color:var(--base-text-color);
    transition: color 0.4s var(--easeOutQuad);
}
.category a.active span{
    color:var(--base-link-color);
    transition: color 0.4s var(--easeOutQuad);
}
.category span:after{
    content:"";
    display: block;
    position: absolute;
    width:0;
    height: 1px;
    left:0;
    bottom:-3px;
    background:var(--base-link-color);
    z-index: 10;
    transition: width 0.4s var(--easeOutQuad);
}
.category a.active span:after,
.category a:hover span:after{
    width: 100%;
    transition: width 0.4s var(--easeOutQuad);
}

.pager {

    padding-bottom:150px;
    background:#f4f1e9;
}
.pager .wp-pagenavi {
    position: relative;
    width: 540px;
    margin:0 auto;
    text-align: center;
}
.pager .prev.disabled,
.pager .next.disabled {
    display:none;
}

.pager .page-numbers {
    position: relative;
    display: inline-block;
    font-size: 20px;
    color:var(--base-text-color);
    transition: color 0.4s var(--easeOutQuad);
    margin:0 20px;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}
.pager .page-numbers:after{
    content:"";
    display: block;
    position: absolute;
    width:0;
    height: 1px;
    left:0;
    bottom:-3px;
    background:var(--base-link-color);
    z-index: 10;
    transition: width 0.4s var(--easeOutQuad);
}
.pager .page-numbers:hover:after,
.pager .page-numbers.current:after{
    width: 100%;
    transition: width 0.4s var(--easeOutQuad);
}

.pager .page-numbers.current{pointer-events: none;}
.pager .page-numbers:hover,
.pager .page-numbers.current{
    color:var(--base-link-color);
    transition: color 0.4s var(--easeOutQuad);
}
.pager .next {
    position: absolute;
    display:inline-block;
    right: 0;
    padding-right: 60px;
    z-index:10;
}
.pager .next span,
.pager .prev span{
    font-size: 16px;
    font-weight: 500;
    transition: color 0.4s var(--easeOutQuad);
    
}
.pager .next:after{
    content:"";
    display: block;
    position: absolute;
    right: 0;
    top: -11px;
    width: 40px;
    height: 40px;
    background:url(../image/common/pager_ar.png);
    background-size:cover;
    transition: transform 0.4s var(--easeOutQuad);
}
.pager .next:hover:after{
    transform: translateX(5px);
    transition: transform 0.4s var(--easeOutQuad);
}

.pager .prev{
    position: absolute;
    display:inline-block;
    left: 0;
    padding-left: 60px;
    z-index:10;
    font-size: 16px;
    font-weight: 500;
    transition: color 0.4s var(--easeOutQuad);
}

.pager .prev:after{
    content:"";
    display: block;
    position: absolute;
    left: 0;
    top: -11px;
    width: 40px;
    height: 40px;
    background:url(../image/common/pager_ar.png);
    background-size:cover;
    transform:rotate(180deg);  
    transition: transform 0.4s var(--easeOutQuad);
}
.pager .prev:hover:after{
    transform: translateX(-5px) rotate(180deg);  
    transition: transform 0.4s var(--easeOutQuad);
}



.pager .prev:hover span,
.pager .next:hover span{
    color:var(--base-link-color);
}

@media screen and (max-width : 800px ){

    .category {
        padding:70px 0 0;
        display: block;
    }
    .category:before{
        content:"";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 298px;
        background:#fff;
        z-index:1;
    }
    .category .tit_area{
        width:auto;    
        margin-bottom: 35px;
    }
    .category h2 {
        width: auto;
        font-size: 30px;
        margin-right: 18px;
        margin-left: 8.25%;
    }
    .category p {
        font-size: 13px;
        transform: translateY(-5px);
    }
    .category .cate_list {
        position: relative;
        display: block;
        width: 91.5%;
        height: 25px;
        margin-left: 8.25%;
        transform: translateY(0);
        overflow-X: scroll;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        
    }
     .category .cate_list::-webkit-scrollbar {
      display: none;
    }
    .category .cate_list .inr{
        width: 950px;
    }
    .category .cate_list a{
        padding-left: 35px;
        margin-right: 30px;
    }
    .category span {
        font-size: 16px;
    }
    
    .pager {
        padding-bottom:92px;
    }
    .pager .wp-pagenavi {
        width: 350px;
    }
    .pager .page-numbers {
        font-size: 19px;
        margin:0 20px;
    }
    .pager .next{
        padding-right: 50px;
    }
    .pager .next:after,
    .pager .prev:after{
        top: -16px;
        width: 50px;
        height: 50px;
    }

    .pager .next span,
    .pager .prev span{
        display:none;
    }

}


/*=======================================================================
	wp 詳細
========================================================================== */
.kiji_wrap {
    position: relative;
    z-index:30;
    padding-bottom: 8vw;
}
.kiji_wrap .kiji_inr {
    position: relative;
    width: calc(100% - 3.33vw);
    margin-left: 3.33vw;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    padding:0 3.33vw;
    border-radius:0 0 0 5px;
    box-sizing:border-box;
    z-index:10;
    background:#fff;
}

.kiji_wrap .kiji_inr:before{
    content:"";
    display: block;
    width: 100%;
    height: 100px;
    position: absolute;
    left: 0;
    top: -100px;
    z-index:20;
    background:#ffff;
    border-radius:10px 0 0 0;    
}
.kiji_wrap .kiji_inr:after{
    content:"";
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom:160px;
    z-index:20;
    background:#f4f1e9;
}


/*kiji_area*/
.kiji_wrap .kiji_area {
    position: relative;
    width: calc(100% - min(250px,25vw) - 3.6vw);
    padding:15px 3.33vw 0;
    box-sizing:border-box;
}
.kiji_wrap .tit_area .day{
    position: relative;
    font-size: 16px;
    color:#b0a076;
    display:inline-block;
    transform: translateY(-1px);
}

.kiji_wrap .tit_area a{
    position: relative;
    display:inline-block;
    font-size: 18px;
    font-weight: 500;
    margin-right: 40px;    
    color:var(--base-link-color);
}
.kiji_wrap .tit_area a:before{
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 1px;
    left: 0;
    bottom: -5px;
    background: var(--base-link-color);
    z-index: 10;
    transition: width 0.4s var(--easeOutQuad);
}

.kiji_wrap .tit_area a:hover:before{
    width: 100%;
    transition: width 0.4s var(--easeOutQuad);
}

.kiji_wrap .tit_area h2 {
    display: block;
    font-size: 32px;
    font-size: var(--fz32);
    font-weight: 500;
    line-height: 2;
    margin-top: 20px;
}


.kiji_wrap .text_area {
    position: relative;
    margin-top: 100px;
    padding-bottom: 70px;
}
.kiji_wrap .text_area p {
    font-size: 16px;
    font-size: var(--fz16);
    font-weight: 500;
    line-height: 2.375;
    margin-bottom: 40px;
}
.kiji_wrap .text_area h3 {
    display: block;
    font-size: 24px;
    font-size: var(--fz24);
    font-weight: 500;
    line-height: 2;
    margin-bottom: 40px;
}

.kiji_wrap .text_area h4 {
    display: block;
    font-size: 18px;
    font-size: var(--fz18);
    font-weight: 500;
    line-height: 2;
    margin-bottom: 40px;
}
.kiji_wrap .text_area a,
.kiji_wrap .text_area p a{
    position: relative;
    display:inline-block;
    
    font-size: 16px;
    font-size: var(--fz16);
    font-weight: 500;
    color:var(--base-link-color);
}

.kiji_wrap .text_area a:before{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 4px;
    background: var(--base-link-color);
    z-index: 10;
}

.kiji_wrap .text_area a:hover{
    opacity:.7;
}
.kiji_wrap .text_area ul {
    position: relative;
    list-style-type: none !important;
    margin-bottom: 50px;
}
.kiji_wrap .text_area ol{
    position: relative;    
    counter-reset: number;
    margin-bottom: 50px;
} 
.kiji_wrap .text_area li {
    position: relative;
    font-size: 16px;
    font-size: var(--fz16);
    font-weight: 500;
    padding-left: 40px;
    box-sizing:border-box;
    margin-bottom: 20px;
    list-style-type: none !important;
}
.kiji_wrap .text_area ul li:before{
    content:"";
    display: block;
    position: absolute;
    left: 0;
    top: -2px;
    width: 22px;
    height: 22px;
    background:url(../image/common/ul_icon.png);
    background-size:cover;
}
 
.kiji_wrap .text_area ol li:before{
    content: counter(number,decimal-leading-zero);
    position: absolute;
    counter-increment: number;
    display: inline-block;
    color: var(--base-link-color);
    font-size: 18px;
    font-size: var(--fz18);
    font-weight: 500;
    top: -1px;
    left: 0;

}

.kiji_wrap .text_area img {
    width: auto;
    height: auto;
    max-width:100%;
    border-radius:5px;
     margin-bottom: 50px;
}
.kiji_wrap .text_area blockquote {
     position: relative;
     display: block;
     padding:2.6vw;
     background:#f7f6f4;
     box-sizing:border-box;
     border-radius:5px;
    margin-bottom: 50px;
}
 .kiji_wrap .text_area blockquote p {
     margin-bottom: 0;
}



/*btn_area*/
.kiji_wrap .btn_area {
    position: relative;
    padding:70px 0 70px 40px;
    box-sizing:border-box;
}

.kiji_wrap .back_link {
    position: relative;
    display:inline-block;
    font-size: 16px;
    font-weight: 500;
    color:var(--base-text-color);
}
.kiji_wrap .back_link:hover {
    color:var(--base-link-color);
}


.kiji_wrap .back_link:before{
    content:"";
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    left: -60px;
    top: -11px;
    background:url(../image/common/back_ar.png);
    background-size:cover;
    transition: transform 0.4s var(--easeOutQuad);
}

.kiji_wrap .back_link:hover:before{
    transform: translateX(-5px);
    transition: transform 0.4s var(--easeOutQuad);
}




/*side_area*/
 .kiji_wrap .side_area {
    position: relative;
    position:sticky;
    width: 250px;
     width: min(250px,25vw);
    height:600px;
    top:250px;
    padding-top: 15px;
     background:#fff;
     z-index:30;
}
.kiji_wrap .side_area h2{
    font-size: 36px;
}
.kiji_wrap .side_area p {
    font-size: 15px;
    font-weight: 500;
    margin:18px 0 55px;
}
.kiji_wrap .side_area li {
    display:block;
    padding-bottom:31px;
    margin-bottom: 31px;
}
.kiji_wrap .side_area li{
    border-bottom:1px solid #f4f1e9;
}
.kiji_wrap .side_area li:last-child{
    border:none;
}
.kiji_wrap .side_area li a {
    position: relative;
    display: inline-block;
    padding-left: 28px;
    margin-right: 38px;
}

.kiji_wrap .side_area li a:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 5px solid #ebe5d5;
    box-sizing: border-box;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: -1px;
    transition: border 0.4s var(--easeOutQuad);
}
.kiji_wrap .side_area li a:hover:before,
.kiji_wrap .side_area li.active a:before {
    border-color:var(--base-link-color);
    transition: border 0.4s var(--easeOutQuad);
}
.kiji_wrap .side_area li span {
    position: relative;
    font-size: 16px;
    font-size: var(--fz16);
    color: var(--base-text-color);
    transition: color 0.4s var(--easeOutQuad);
}
.kiji_wrap .side_area li a:hover span,
.kiji_wrap .side_area li.active span{
    color:var(--base-link-color);
    transition: color 0.4s var(--easeOutQuad);
}

.kiji_wrap .side_area li span:after{
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 1px;
    left: 0;
    bottom: -3px;
    background: var(--base-link-color);
    z-index: 10;
    transition: width 0.4s var(--easeOutQuad);
}

.kiji_wrap .side_area li a:hover span:after,
.kiji_wrap .side_area li.active a span:after{
    width: 100%;
    transition: width 0.4s var(--easeOutQuad);
}




@media screen and (max-width : 1000px ){
    .kiji_wrap .kiji_area {
        padding:15px 0 0;
    }
}

@media screen and (max-width : 800px ){
    .kiji_wrap {padding-bottom: 0;}
    .kiji_wrap .kiji_inr {
        width: 100%;
        margin-left:0;
        display: block;
        padding:18.75vw 0 0;
        border-radius:0;
    }

    .kiji_wrap .kiji_inr:before,
    .kiji_wrap .kiji_inr:after{
        display:none;
    }

    /*kiji_area*/
    .kiji_wrap .kiji_area {
        position: relative;
        width: 100%;
        padding:0;
    }
    .kiji_wrap .tit_area{
        padding:0 10%;
        margin-bottom: 6.25vw;
        box-sizing:border-box;
    }
    .kiji_wrap .tit_area .day{
        font-size: 14px;
    }

    .kiji_wrap .tit_area a{
        font-size: 14px;
        margin-right: 15px;
    }
    .kiji_wrap .tit_area a:after{
        display:none;
    }
    .kiji_wrap .tit_area h2 {
        font-size: 22px;
        font-size: var(--fz22);
        margin-top: 30px;
    }

    .kiji_wrap .text_area {
        margin-top:0;
        padding:0 10% 35px;
        box-sizing:border-box;
    }
    .kiji_wrap .text_area p {
        font-size: 15px;
        font-size: var(--fz15);
        line-height: 2.13;
        margin-bottom: 30px;
    }
    .kiji_wrap .text_area h3 {
        font-size: 20px;
        font-size: var(--fz20);
        margin-bottom: 30px;
    }

    .kiji_wrap .text_area h4 {
        font-size: 17px;
        font-size: var(--fz17);
        margin-bottom: 30px;
    }
    .kiji_wrap .text_area a,
    .kiji_wrap .text_area p a{
        font-size: 15px;
        font-size: var(--fz15);
    }

    .kiji_wrap .text_area a:before{
        bottom: 2px;
    }
    .kiji_wrap .text_area ul,
    .kiji_wrap .text_area ol{
        margin-bottom: 40px;
    } 
    .kiji_wrap .text_area li {
        font-size: 15px;
        font-size: var(--fz15);
        padding-left: 35px;
        margin-bottom: 20px;
    }
    .kiji_wrap .text_area ul li:before{
        top: -3px;
        width: 20px;
        height: 20px;
    }

    .kiji_wrap .text_area ol li:before{
        font-size: 17px;
        font-size: var(--fz17);
        top: -1px;
    }

    .kiji_wrap .text_area img {
         margin-bottom: 40px;
    }
    .kiji_wrap .text_area blockquote {
        margin-bottom: 40px;
        padding:6.25vw;
    }

    .kiji_wrap .text_area blockquote p{
        font-size: 14px;
        font-size: var(--fz14);
    }

    /*btn_area*/
    .kiji_wrap .btn_area {
        width: 100%;
        background:#f4f1e9;
        padding:13.75vw 0;
        text-align: center;
    }

    .kiji_wrap .back_link {
        font-size: 17px;
        padding-left: 10px;
    }

    .kiji_wrap .back_link:before{
        width: 50px;
        height: 50px;
        left: -88px;
        top: -16px;
        background-image: url(../image/common/pager_ar.png);
        transform: rotate(180deg);
    }
    .kiji_wrap .back_link:hover:before{
        transform: translateX(-5px) rotate(180deg);
    }





    /*side_area*/
     .kiji_wrap .side_area {
        position: relative;
        width:100%;
        height:auto;
        top:0;
        padding-top: 15px;
         background:#fff;
         padding:15vw 0 15vw 10%;
         box-sizing:border-box;
         border-bottom:1px solid #f4f1e9;
    }
    .kiji_wrap .side_area h2{
        display: inline-block;
        font-size: 30px;
        margin-right: 15px;
        margin-bottom: 36px;
    }
    .kiji_wrap .side_area p {
        display: inline-block;
        font-size: 13px;
        margin:0;
        transform: translateY(-3px);
    }
    .kiji_wrap .side_area .scroll{
        position: relative;
        display: block;
        width: 100%;
        height: 25px;
        cursor: pointer;
        overflow-X: scroll;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        
    }
    .kiji_wrap .side_area .scroll::-webkit-scrollbar {
      display: none;
    }
    .kiji_wrap .side_area ul{
        width: 950px;
        
    }
    .kiji_wrap .side_area li {
        display:inline-block;
        margin: 0 30px 0 0;
        padding-bottom: 0;
        border:none;
    }
    .kiji_wrap .side_area li a {
        padding-left: 35px;
        margin-right: 0;
    }
    .kiji_wrap .side_area li a:before{top: 0;}
    .kiji_wrap .side_area li span {
        font-size: 16px;
    }

    .kiji_wrap .side_area li span:after{
        display:none;
    }

    
}
/*=======================================================================
	foot_con
========================================================================== */
.foot_con {
    position: relative;
    z-index:10;
    background:#fff;
    border-bottom:1px solid #e7e4dd;
}
.foot_con:before{
    content:"";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background:#fff;
    width: 100%;
    height: 100%;
    z-index:-1;
} 
.foot_con .foot_con_inr {
    position: relative;
    -js-display: flex;
    display:-webkit-box;
    display: -webkit-flex;
    display:-moz-box;
    display:-ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    width: 90%;
    max-width:1300px;
    margin:0 auto;
    
    z-index:10;
}

/*contact_box*/
.foot_con .contact_box {
    position: relative;
    width: 30.61%;
    padding-top:100px;
}
.foot_con .contact_box h2{
    position: relative;
    display: block;
    font-size: 44px;
    font-weight: 500;
    padding-left: 50px;
    box-sizing:border-box;
    margin-bottom: 31px;
}
.foot_con .contact_box h2:before {
    content:"";
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    left: 0;
    top: 5px;
    background:url(../image/common/contact_box_icon.png);
    background-size:cover;
}
.foot_con .contact_box a {
    position: relative;
    display:inline-block;
    padding-left: 34px;
}
.foot_con .contact_box a:before{
    content:"";
    display: block;
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    background: url(../image/common/w_link_btn_ar.png);
    background-size:cover;
    transition: transform 0.4s var(--easeOutQuad);
}
.foot_con .contact_box a:hover:before{
    transform: translateX(5px);
    transition: transform 0.4s var(--easeOutQuad);
}
.foot_con .contact_box a span{
    position: relative;
    font-size: 18px;
    color:var(--base-text-color);
    font-weight: 500;
    transition: color 0.4s var(--easeOutQuad);
}
.foot_con .contact_box a:nth-child(3){
    margin-right: 20px;
}
.foot_con .contact_box a:hover span{
    color:var(--base-link-color);
    transition: color 0.4s var(--easeOutQuad);
}
.foot_con .contact_box a span:before{    
    content:"";
    display: block;
    position: absolute;
    width:100%;
    height: 1px;
    left:0;
    bottom:-3px;
    background:var(--base-text-color);
    z-index: 5;
}
.foot_con .contact_box a span:after{
    content:"";
    display: block;
    position: absolute;
    width:0;
    height: 1px;
    left:0;
    bottom:-3px;
    background:var(--base-link-color);
    z-index: 10;
    transition: width 0.4s var(--easeOutQuad);
}
.foot_con .contact_box a:hover span:after{
    width: 100%;
    transition: width 0.4s var(--easeOutQuad);
}

/*tell_box*/
.foot_con .tell_box {
    position: relative;
    width: 38.6%;
    padding-top: 95px;
    display: flex;
    justify-content: center; 
    border-left:1px solid #e7e4dd;
    border-right:1px solid #e7e4dd;
    box-sizing:border-box;
}
.foot_con h3 {
    font-size: 20px;
    font-weight: 500;
}
.foot_con h3 span{
     display: block;   
    margin-top: 12px;
}
.foot_con .tell_box a {
    display: block;
    font-size: 38px;
    color:var(--base-text-color);
    margin-top: 30px;
}
.foot_con .tell_box a span{
    font-size: 22px;
    color:var(--base-text-color);
}

/*mail_box*/
.foot_con .mail_box {
    position: relative;
    width: 30.79%;
    padding-left: max(80px,5.33vw);
    box-sizing:border-box;
    padding-top: 92px;
    padding-bottom: 90px;
}
.foot_con .mail_box .w_link_btn {
    width: 100%;
    max-width:260px;
    margin-top: 30px;
}
.foot_con .mail_box .w_link_btn span{
    font-weight: 500;
}


@media screen and ( max-width: 1210px ) {
    .foot_con .mail_box .w_link_btn span{
        display:none;
    }

    
}
@media screen and ( max-width: 1050px ) {
    .foot_con .foot_con_inr{
        width: 100%;
    }
    .foot_con .contact_box{
        width: 100%;
        margin: 0 auto;
        padding: 40px 10% 60px;
        box-sizing: border-box;
        border-bottom: 1px solid #e7e4dd;
        
    }
    .foot_con .contact_box h2{
        
        display: inline-block;
        margin-right: 50px;
        margin-bottom: 0;
    transform: translateY(10px);
    }
    .foot_con .tell_box,
    .foot_con .mail_box{
        width: 50%;
    }
    .foot_con .tell_box{
        padding-top:70px;
    }
    .foot_con .mail_box{
        padding-top: 70px;
        padding-bottom: 70px;
        }
    
    .foot_con .mail_box .w_link_btn span{
        display:inline;
    }
}

@media screen and ( max-width: 800px ) {


    /*contact_box*/
    .foot_con .contact_box {
        padding:16.75vw 0 0;
        text-align: center;
    }
    .foot_con .contact_box h2{
        font-size: 37px;
        padding-left: 47px;
        margin-right: 0;
        margin-bottom: 0;
    }
    .foot_con .contact_box h2:before {
        width: 30px;
        height: 30px;
        top: 5px;
    }
    .foot_con .contact_box p{
            font-size: 15px;
        line-height: 32px;
        font-weight: 500;
        width: 80%;
        margin:35px auto 65px;
        text-align:left;
    }
    .foot_con .contact_box a {
        width: 49%;
        box-sizing:border-box;
        padding:22px 0 22px 10px;
        border-top:1px solid #e7e4dd;
    }
    /*
    .foot_con .contact_box a:nth-child(3){
        border-right:1px solid #e7e4dd;
        width: calc(50% - 3px);
    }
    */
    .foot_con .contact_box:after{
        content:"";
        display: block;
        width: 1px;
        height: 61px;
        position: absolute;
        left: 50%;
        bottom:0;
        background:#e7e4dd;
    }
    .foot_con .contact_box a:before{
        left: calc(50% - 60px);
        top:0;
        bottom:0;
        margin:auto;
        transform: translateY(1px);
    }
    .foot_con .contact_box a span{
        font-size: 16px;
    }
    .foot_con .contact_box a:nth-child(3){
        margin-right:0;
    }
    .foot_con .contact_box a:nth-child(3):before{
        left: calc(50% - 65px);
    }
    .foot_con .contact_box a span:before,
    .foot_con .contact_box a span:after{
        display:none;
    }

    /*tell_box*/
    .foot_con .tell_box {
        width: 100%;
        padding: 12.5vw 0;
        border-left:none;
        border-right:none;
        border-bottom:1px solid #e7e4dd;
        box-sizing:border-box;
    }
    .foot_con h3 {
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 12px;
    }
    .foot_con h3 span{
        display:inline-block;
        margin-top: 0;
        margin-left: 14px;
        transform: translateY(-3px);
    }
    .foot_con .tell_box a {
        font-size: 39px;
        margin-top: 25px;
    }
    .foot_con .tell_box a span{
        font-size: 19px;
    }

    /*mail_box*/
    .foot_con .mail_box {
        width: 100%;
        padding: 12.5vw 0;
    display: flex;
    justify-content: center; 
    }
    .foot_con .mail_box .w_link_btn {
        width: 100%;
        max-width:800px;
        margin-top: 25px;
        text-align: center;
        padding-right: 30px;
    }



}

/* ==========================================================================
	footer
========================================================================== */

#footer {
    position: relative;
    z-index:10;
    background:#fff;
    padding-top: 150px;
}
#footer:before{
    content:"";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background:#fff;
    width: 100%;
    height: 100%;
    z-index:-1;
} 
#footer .footer_inr {
    position: relative;
    width: 90%;
    max-width:1300px;
    margin:0 auto;
    z-index:20;
    padding-bottom: 145px;
}
#footer .footer_inr_left {
    width: calc(100% - 80px);
    max-width:1150px;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
}
#footer .logo_area {
    width: 280px;
}
#footer h2{
    width: 208px
}
#footer .logo_area p {
    font-size: 15px;
    margin:56px 0 30px;
}
#footer .map_link {
    position: relative;
    display: block;
    width: 170px;
    padding-left: 23px;
    box-sizing:border-box;
    margin-bottom: 50px;
}
#footer .map_link:before{
    content:"";
    display: block;
    position: absolute;
    left: 0;
    top: 1px;
    width: 13px;
    height: 16px;
    background-image: url(../image/common/menu_s_link_icon02.png);
    background-size:cover;
}
    
#footer .map_link span {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    color:var(--base-text-color);
    transition: color 0.4s var(--easeOutQuad);
}
#footer .map_link:hover span {
    color:var(--base-link-color);
    transition: color 0.4s var(--easeOutQuad);
    
}
#footer .map_link span:before{    
    content:"";
    display: block;
    position: absolute;
    width:100%;
    height: 1px;
    left:0;
    bottom:-6px;
    background:var(--base-text-color);
    z-index: 5;
}
#footer .map_link span:after{
    content:"";
    display: block;
    position: absolute;
    width:0;
    height: 1px;
    left:0;
    bottom:-6px;
    background:var(--base-link-color);
    z-index: 10;
    transition: width 0.4s var(--easeOutQuad);
}
#footer .map_link:hover span:after{
    width: 100%;
    transition: width 0.4s var(--easeOutQuad);
}
#footer .inst_link {
    display:inline-block;
    width:20px;
    margin-right: 20px;
}
#footer .fb_link {
    display:inline-block;
    width:10px;
    margin-right: 20px;
    transition: opacity 0.4s var(--easeOutQuad);
}
#footer .twi_link {
    display:inline-block;
    width:24px;
    transition: opacity 0.4s var(--easeOutQuad);
}
#footer .inst_link:hover,
#footer .fb_link:hover,
#footer .twi_link:hover {
    opacity:.4;
    transition: opacity 0.4s var(--easeOutQuad);
}


#footer .link_area {
    position: relative;
    width: calc(100% - 310px);
    max-width:680px;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;

}
#footer .l_link {
    width: 32%;
    max-width:200px;
}

#footer .list a {
    position: relative;
    display: block;
    font-size: 17px;
    font-weight: 500;
    color:var(--base-text-color);
    padding:30px 0;
    border-top:1px solid #e7e4dd;    
    overflow: hidden;
    box-sizing:border-box;
    transition: all .4s var(--easeOutQuad);
}
#footer .list a:hover{
    color:var(--base-link-color);
    padding-left:28px;
    transition: all .4s var(--easeOutQuad);
}
#footer .list a:before{
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    position: absolute;
    left: -12px;
    top: 2px;
    bottom: 0;
    margin: auto;
    background: url(../image/common/menu_link_ar.png);
    background-size: cover;
    transition: left .4s var(--easeOutQuad);
}
#footer .list a:first-child:before {
    top: -26px;
}
#footer .list a:hover:before{
    left: 0;
    transition: left .4s var(--easeOutQuad);
}

#footer .list a.pc_off {
     display:none;   
}

#footer .list a:first-child{
    padding-top: 0;
    border-top:none;
}
#footer .news_link {
    width: 170px;
}
#footer .news_link p {
    font-size: 17px;
    margin-bottom: 36px;
}
#footer .news_link a {
    position: relative;
    display: block;
    font-size: 15px;
    padding-left: 20px;
    margin-bottom: 17px;
    width: auto;
    color:var(--base-text-color);
    transition: all .4s var(--easeOutQuad);
    box-sizing:border-box;
}
#footer .news_link a:hover {
    padding-left: 25px;
    color:var(--base-link-color);
    transition: all .4s var(--easeOutQuad);
}
#footer .news_link a:before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 0;
    margin: auto;
    background: url(../image/common/menu_link_ar.png);
    background-size: cover;
    transition: left .4s var(--easeOutQuad);
}
#footer .news_link a:hover:before {
    left: 5px;
    transition: left .4s var(--easeOutQuad);
}
#footer .r_link {
    width: 32%;
    max-width:200px;
}
#footer .top_link {
    position: absolute;
        right: 0;
    top: 0;
}
#footer .b_img {
    position: relative;
    background: url(../image/common/footer_b_img.jpg) center center fixed;
    background-size: cover;
    max-height:1200px;
    overflow: hidden;
}
#footer .b_img:before{
    content:"";
    display: block;
    padding-top: 66.666%;
}
#footer .b_img:after{
    content:"";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background:#000;
    opacity:.5;
    width: 100%;
    height: 100%;
    z-index:1;
    transition: opacity .4s var(--easeOutQuad);
}
#footer .b_img.move:after{
    opacity:0;
    transition: opacity 1s var(--easeOutQuad);
    transition-delay: .2s;
}
#footer .top_link{
    display: block;
    position: absolute;
    right: 0;
    top: -50px;
    width: 50px;
    height: 50px;
    border-radius:50%;
    background:#212121;
}
#footer .top_link:before{
    z-index:1;
    border-radius:50%;
}
#footer .top_link span{
     display: block;
    position: relative;
    z-index:10;
    width: 100%;
    height: 100%;
    background:url(../image/common/top_link_ar.png);
    background-size:cover;
}
#footer .footer_inr .copy{
    font-size: 14px;
    position: absolute;
    right: 18px;
    top: 50px;
    z-index:10;
    letter-spacing: 0.1em;
}

@media screen and ( max-width: 1000px ) {

    #footer .list a.pc_off {
         display:block !Important;   
    }

    #footer .r_link{display:none !Important;}
    #footer .l_link{width:calc(100% - 185px);}
}
@media screen and ( max-width: 800px ) {
    
    #footer {
        padding-top: 17.5vw;
    }
    #footer .footer_inr {
        position: relative;
        width: 82.5%;
        padding-bottom: 13.75vw;
    }
    #footer .footer_inr_left {
        width:100%;
    }
    #footer .logo_area {
        width: 100%;
        text-align: center;
    }
    #footer h2{
        width: 100%;
    }
    
    #footer h2 img.pc_off{
        display:inline !Important;
        width: 298px;
    }
    #footer .logo_area p {
        font-size: 15px;
        margin:35px 0 17px;
    }
    #footer .map_link {
        display: inline-block;
        width: 170px;
        margin-right: 22px;
        padding-left: 18px;
        margin-bottom: 0;
    }
    #footer .map_link:before{
        top: 2px;
        width: 13px;
        height: 16px;
    }

    #footer .map_link span {
        font-size: 16px;
    }
    
    #footer .inst_link,
    #footer .fb_link,
    #footer .twi_link{
        transform: translateY(4px);
    }
    #footer .link_area {
        width: 100%;
        max-width:800px;
        margin-top: 75px;

    }
    #footer .l_link {
        width: 45%;
        max-width:800px;
    }

    #footer .list a {
        font-size: 14px;
        padding:25px 0;
        border-top:1px solid #e7e4dd;    
    }
    #footer .list a:before{
        width: 10px;
        height: 10px;
        left: -10px;
    }
    #footer .list a:first-child:before {
        top: -26px;
    }

    #footer .news_link {
        width: 45%;
    }
    #footer .news_link p {
        font-size: 14px;
        padding-bottom: 25px;
        margin-bottom: 25px;
        border-bottom:1px solid #e7e4dd;    
    }
    #footer .news_link a {
        display: block;
        font-size: 14px;
        padding-left: 16px;
        margin-bottom: 17px;
    }
    #footer .top_link {
        display:none;
    }
    #footer .b_img {
        background-image: url(../image/common/footer_b_img_sp.jpg);
    }
    .iPhone #footer .b_img {
        background: url(../image/common/footer_b_img_sp.jpg) center center;
        background-size:cover;
    }
    #footer .b_img:before{
        content:"";
        display: block;
        padding-top: 112.5%;
    }
    #footer .copy{
        font-size: 13px;
        color:#fff;
        position: absolute;
        right: 9.3%;
        top: 0;
        bottom: 0;
        margin:auto;
        text-align: center;
        letter-spacing: 0.1em;
    }
}
/* ==========================================================================
	parts
========================================================================== */

.en {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
}
.enb {
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.env {
    font-size: var(--fz14);
    color:var(--base-yellow-color03);
    letter-spacing: 0.1em;
}

.y-enb {
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.1em;
    color:var(--base-yellow-color);    
}
.all_wrap{
    position: relative;
    /*
    overflow:hidden;
    */
    box-sizing:border-box;
}
.inview.bt{
    opacity:0;
    transform: translateY(60px);
    transition: all .6s ease;
    transition-delay: .2s;
}

.inview.bt.move{
     opacity:100;
    transform: translateY(0);
    transition: all .9s ease;
    transition-delay: .2s;
}
.inview.lr{

    transform: translateX(-100px);
    opacity:0;
	-webkit-transition: transform 0.4s var(--easeOutQuad),opacity 0.4s var(--easeOutQuad);
    transition: transform 0.4s var(--easeOutQuad),opacity 0.4s var(--easeOutQuad);
}
.inview.lr.move {
    transform: translateX(0);
    opacity:100;
	-webkit-transition: transform 0.4s var(--easeOutQuad),opacity 0.4s var(--easeOutQuad);
    transition: transform 0.4s var(--easeOutQuad),opacity 0.4s var(--easeOutQuad);
}

.inview.rl{

    transform: translateX(100px);
    opacity:0;
	-webkit-transition: transform 0.4s var(--easeOutQuad),opacity 0.4s var(--easeOutQuad);
    transition: transform 0.4s var(--easeOutQuad),opacity 0.4s var(--easeOutQuad);
}
.inview.rl.move {
    transform: translateX(0);
    opacity:100;
	-webkit-transition: transform 0.4s var(--easeOutQuad),opacity 0.4s var(--easeOutQuad);
    transition: transform 0.4s var(--easeOutQuad),opacity 0.4s var(--easeOutQuad);
}



.con_top{
    position: relative;
    padding-left:6.66vw;
    padding-right:13.32vw;
    box-sizing:border-box;
}
.con_inr{
    width:100%;
    padding-left:6.66vw;
    padding-right:6.66vw;
    margin:0 auto;
    box-sizing:border-box;
}



.grd {
    position: relative;
    display:inline-block;
    background: rgb(0,44,140);
    background: linear-gradient(360deg, rgba(0,44,140,1) 19.7675%, rgba(170,0,139,1) 53.5241%, rgba(232,82,152,1) 83.9355%);
    background: -webkit-linear-gradient(360deg, rgba(0,44,140,1) 19.7675%, rgba(170,0,139,1) 53.5241%, rgba(232,82,152,1) 83.9355%);    
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
}


.grd_hvr:before {
    content:"";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity:0;
    background: rgb(230,196,78);
    background: -webkit-linear-gradient(right, rgba(230,196,78,1) 0%, rgba(189,156,70,1) 100%);
    background: -o-linear-gradient(right, rgba(230,196,78,1) 0%, rgba(189,156,70,1) 100%);
    background: linear-gradient(to left, rgba(230,196,78,1) 0%, rgba(189,156,70,1) 100%);
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94);
}

.grd_hvr:hover:before{
    opacity:100;
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94);
}


.grd_hvr:hover{
    color:#fff;
}
.ie .grd{
    background: none;
}


.w_link_btn{
    position: relative;
    display:block;
    padding:20px 0 0 25px;
    box-sizing:border-box;
    background:var(--base-text-color);
    border-radius:30px;
    color:#fff;
    font-size: 17px;
    font-weight: 500;
    width: 300px;
    height: 60px;
    z-index:10;
    
}
.w_link_btn:before{
    border-radius:30px;
}
.w_link_btn:after{
    content:"";
    display: block;
    position: absolute;
    right: 30px;
    top: 0;
    bottom: 0;
    margin:auto;
    width: 20px;
    height: 20px;
    background:url(../image/common/link_btn_ar.png);
    background-size:cover;
    z-index:10;
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94);
}

.w_link_btn:hover:after{
    transform: translateX(5px);
    background-image:url(../image/common/link_btn_ar_af.png);
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94);
}


.link_btn{
    position: relative;
    display:block;
    padding:31px 0 0 38px;
    box-sizing:border-box;
    border-radius:40px;
    font-size: 17px;
    font-weight: 500;
    width: 250px;
    height: 80px;
    z-index:10;
}
.link_btn.w_bg{
    color:var(--base-text-color);
    background:#fff;
}
.w_link_btn.grd_bg,
.link_btn.grd_bg{
    color:#fff;
}


.link_btn.w_bg:hover{
    color:#fff;
    background:var(--base-text-color);
}
.link_btn.grd_bg:hover,
.w_link_btn.grd_bg:hover{
    background:var(--base-text-color);
}

.link_btn.grd_bg:before,
.w_link_btn.grd_bg:before{
    content:"";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity:100;
    background: rgb(230,196,78);
    background: -webkit-linear-gradient(right, rgba(230,196,78,1) 0%, rgba(189,156,70,1) 100%);
    background: -o-linear-gradient(right, rgba(230,196,78,1) 0%, rgba(189,156,70,1) 100%);
    background: linear-gradient(to left, rgba(230,196,78,1) 0%, rgba(189,156,70,1) 100%);
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94);
    border-radius:40px;
}
.link_btn.grd_bg:hover:before,
.w_link_btn.grd_bg:hover:before{
    opacity:0;
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94);
}

.grd_hvr:hover:before{
    opacity:100;
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94);
}



.link_btn:after{
    content:"";
    display: block;
    position: absolute;
    right: 30px;
    top: 0;
    bottom: 0;
    margin:auto;
    width: 20px;
    height: 20px;
    background-size:cover;
    z-index:10;
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94);
}
.link_btn.w_bg:after{
    background-image:url(../image/common/w_link_btn_ar.png);
}
.link_btn.grd_bg:after,
.w_link_btn.grd_bg:after{
    background-image: url(../image/common/link_btn_ar_af.png);
    transition: all 0.4s cubic-bezier(.25, .46, .45, .94);
}
.link_btn:hover:after{
    transform: translateX(5px);
    background-image:url(../image/common/link_btn_ar.png);
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94);
}



.fit_img{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin:auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-position:center center;
    background-size:cover;
    z-index:1;
    transition: transform ease .3s;
    font-family: 'object-fit: cover;'; /*IE対策*/
}

.img_area{z-index:10;}

.v_txt{
    writing-mode: vertical-rl;
    font-feature-settings: normal;
    vertical-align: top;
    display: inline-block;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -o-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    letter-spacing: 0.05em;
}






@media screen and ( max-width: 800px ) {

    .env {
        font-size: 10px;
        font-size: var(--fz10);
    }
    .y-enb {
        font-size: 11px;
    }
    .con_inr{
        padding-left:10%;
        padding-right:10%;
    }
    .sp_w_link_btn{
        position: relative;
        box-sizing:border-box;
        color:var(--base-text-color);
        padding:25px 0 0;
        border-radius:5px;
        font-size: 17px;
        text-align: center;
        width: 100px;
        height: 70px;
        background:#fff;
        font-weight: 500;
    }
    .sp_w_link_btn:after{
        content:"";
        display: block;
        position: absolute;
        right: 30px;
        top: 0;
        bottom: 0;
        margin:auto;
        width: 20px;
        height: 20px;
        background:url(../image/common/w_link_btn_ar.png);
        background-size:cover;
        z-index:10;
        transition:all 0.4s cubic-bezier(.25, .46, .45, .94);
    }

    .sp_w_link_btn:hover:after{
        transform: translateX(5px);
        transition:all 0.4s cubic-bezier(.25, .46, .45, .94);
    }


    .oc,.oc2{
            pointer-events: all;
        }

    .pc_off{
        display:block !Important;
        }
    .sp_off{
        display:none !important;
        }

    .sp_move_off{
        transform: translate(0) !important;
    }
    .spy_txt{
            writing-mode: horizontal-tb;
    font-feature-settings: normal;
    display: inline-block;
    -webkit-writing-mode: horizontal-tb;
    }
}


.slick-slide{outline:none;}




/* ==========================================================================
    movie
========================================================================== */
.movie{
    position: relative;
    background: url(../image/mesh.jpg) repeat;
    background-size: 2px 2px;
    padding: 150px 10vw 0;
    box-sizing: border-box;
    height: 850px;
    z-index: 10;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}
.movie::-webkit-scrollbar {
  display: none;
}
.movie_inr {
    -js-display: flex;
    display:-webkit-box;
    display: -webkit-flex;
    display:-moz-box;
    display:-ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}
.movie .tit_area {
    position:sticky;
    top:0;
    width: 190px;
    height:480px;
    -js-display: flex;
    display:-webkit-box;
    display: -webkit-flex;
    display:-moz-box;
    display:-ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    flex-direction: row-reverse;
}
.movie .tit_area h2 {
    font-size: 38px;
    font-size: var(--fz38);
    font-weight: 500;
    line-height: 1.94;
    color:#fff;
}
.movie .movie_area {
    width: calc(100% - 180px - 8vw);
}
.movie a {
    display: block;
    margin-bottom: 70px;
}
.movie .thumb {
    position: relative;
    border-radius:5px;
    overflow: hidden;
    transition:opacity 0.4s cubic-bezier(.25, .46, .45, .94); 
}
.movie a:hover .thumb{
    opacity: .5;
    transition:opacity 0.4s cubic-bezier(.25, .46, .45, .94);  
}
.movie .thumb:before{
    content:"";
    display: block;
    padding-top: 57.2%;
}
.movie .text_area {
    margin-top: 25px;
}
.movie .text_area .enb {
    display:inline-block;
    padding:10px;
    border:1px solid #fff;
    padding-top:10px;
    text-align: center;
    margin-right: 35px;
    font-size: 14px;
    color:#fff;
    box-sizing:border-box;
    border-radius:5px;
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94); 
}
.movie a:hover .text_area .enb {
    color:#dbb949;
    border-color:#dbb949;
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94); 
}
.movie .text_area p {
    position: relative;
    display:inline-block;
    padding-left: 30px;
    font-size: 17px;
    font-weight: 500;
    color:#fff;
    box-sizing:border-box;
}

.movie a:hover .text_area p {
    color:#dbb949;
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94); 
}

.movie .text_area p:before{
    content:"";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 0;
    background:url(../image/common/link_btn_ar.png);
    background-size:cover;
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94); 
}
.movie a:hover .text_area p:before{
    background-image:url(../image/common/movie_link_btn_ar.png);
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94); 
}
@media screen and (max-width: 1000px){
    .movie{padding-left: 8vw;padding-right: 8vw;}
    .movie .text_area p {
        display: block;
        margin-top: 20px;
    }
    
}
@media screen and (max-width :800px ){

    .movie{
        padding:18vw 10% 0;
        height: 580px;
    }
    .movie_inr {
        display: block;
    }
    .movie .tit_area {
        position:relative;
        top:0;
        width: 100%;
        height:auto;
        display: block;
        text-align: center;
    }
    .movie .tit_area h2 {
        display: block;
        font-size: 26px;
        font-size: var(--fz26);
        line-height: 1.65;
        color:#fff;
        margin-bottom: 15px;
    }
    .movie .movie_area {
        width: 100%;
        margin-top: 50px;
    }
    .movie a {
        margin-bottom: 40px;
    }
    .movie .text_area {
        margin-top: 20px;
    }
    .movie .text_area .enb {
        margin-right: 0;
        font-size: 13px;
    }
    .movie .text_area p {
        padding-left: 30px;
        font-size: 16px;
        font-size: (--var-fz16);
        font-weight: 500;
    }
    
}