@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;700&family=Open+Sans+Condensed:wght@300;700&display=swap');
/*----- common -----*/
body{
    font-family: "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif!important;
    font-weight: 300;
}
.rectangle_img{transition: ease 0.3s;}
#loader {width: 100%;height: 100%;position: fixed;top: 0;left: 0; z-index: 9999;}
#loader p{padding: 20px;padding-right: 18px;z-index: 2;}
#loader span{
    width: 100%;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 0;}
#loader span{
	animation-name: loader;
	animation-duration: 1.0s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
    z-index: 1;
}
#wrap{
    padding-left: 300px;
    padding-right: 60px;
    transition: ease 0.8s;
}
#wrap.active{
    padding-left: 100px;
}
#wrap.close{
    padding-left: 100px;
}
#wrap.open{
    padding-left: 300px;
}
.en_font{
    font-family: "Open Sans Condensed", "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif!important;
}
.font_bold{font-weight: 700!important;}
#main_wrap{width: 100%; box-shadow: 0 0 15px rgba(0,0,0,0.1);position: relative;overflow-y: hidden;z-index: 2;}
.sns_links.side_bar{
    position: fixed;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    z-index: 1;
}
.sns_links.side_bar ul{
    position: absolute;
    top: 30px;
    width: 100%;
}
.sns_links.side_bar li{
    margin-bottom: 30px;
    padding: 0 10px;
}
.sns_links.side_bar li a{
    display: block;
    transition: ease 0.3s;
}
.sns_links.side_bar li a:hover{opacity: 0.6;}
.close_menu,.open_menu{width: 50px;height: 50px;line-height: 1.2;cursor: pointer;}
.open_menu{position: fixed;top: 50%;left: 25px;transform: translateY(-50%);z-index: 99;display: none;}
header{
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    z-index: 1;
    overflow: auto;
}
header nav ul li a{overflow: hidden;transition: ease 0.3s;position: relative;}
header nav ul li a::after{
    content: "";
    position: absolute;
    width: 40%;
    height: 1px;
    box-sizing: border-box;
    border-top-style: solid;
    border-top-width: 1px;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    transition: ease 0.3s;
}
header nav ul li.active a::after,header nav ul li a:hover::after{transform: translateX(0);}
header nav ul li:not(.active) a{padding-left: 20px;}
header nav ul li:not(.active) a:hover{padding-left: 10px;}
header .more_menu_bt{cursor: pointer;}
header .more_menu_bt .close{display: none;}
header .more_menu_bt.active .close{display: block;}
header .more_menu_bt.active .on{display: none;}
header .more_menu_bt.active i{transform: rotate(180deg) translateY(-5px);}
header #more_menu li{display: none;}
footer #map iframe{
    width: 100%;
    height: 400px;
}
footer .logo img{max-width: 200px;}
#page-top{position: fixed;bottom: 0px;right: 0px;width: 60px;height: 60px;z-index: 10;cursor: pointer;}
/*----- index -----*/
#main_img{
    position: relative;
    height: 100vh;
    min-height: 800px;
}
#main_img figure{
    position: relative;
    width: 100%!important;
    height: 100vh!important;
    min-height: 800px!important;
    background-position: center center!important;
    background-repeat: no-repeat!important;
    background-size: cover!important;
}
#main_img #main_img_border{
    position: absolute;
    top: 20px;
    left: 20px;
    border-color: #fff;
    box-sizing: border-box;
    transition: ease 0.3s;
    z-index: 9;
}
#main_img .arrowWrap{
    position: absolute;
    right: 10px;
    bottom: 40px;
    height: 200px;
    color: #fff;
}
#main_img .arrowInner p {
    text-align: end;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

#main_img .arrow {
    width: 1px;
    height: 100px;
    margin: 50px auto 0;
    background-color: #eee;
    position: relative;
    overflow: hidden;
}

#main_img .arrow::before {
    content: '';
    width: 1px;
    height: 100px;
    margin: 50px auto 0;
    background-color: #000;
    position: absolute;
    top: -150px;
    left: 0;
    -webkit-animation: arrow 2.5s ease 0s infinite normal;
    animation: arrow 2.5s ease 0s infinite normal;
}

@keyframes arrow {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }

  60% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }

  100% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }
}
#intro h2{position: relative;}
#intro h2::after{
    content: "";
    position: absolute;
    width: 50px;
    height: 2px;
    box-sizing: border-box;
    border-top-style: solid;
    border-top-width: 2px;
    top: 100%;
    left: 0;
    transform: translateY(10px);
}
#contents1 .arrow{
    position: absolute;
    z-index: 9;
    cursor: pointer;
    transition: ease 0.3s;
}
#contents1 .arrow:hover{
    transform: translateY(-2px);
}
#contents1 .slick-arrow span{
    width: 30px;
    height: 30px;
}
#contents1 .arrow.prev{
    bottom: 10px;
    right: 60px;
}
#contents1 .arrow.prev{
    bottom: 10px;
    right: 70px;
}
#contents1 .arrow.next{
    bottom: 10px;
    right: 20px;
}

#contents2{
    height: 800px;
    position: relative;
    background-position: center center;
    background-size: cover;
}
#contents2 > div{
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
}
#contents2 h3{
    padding-left: 60px;
    position: relative;
}
#contents2 h3::after{
    content: "";
    position: absolute;
    width: 40px;
    height: 1px;
    left: 0;
    top: 9px;
    background-color: #fff;
}
#top_cms .top_cms_box .top_cms_title p{position: relative;padding-left: 40px;}
#top_cms .top_cms_box .top_cms_title p::after{
    content: "";
    position: absolute;
    width: 30px;
    height: 1px;
    left: 0;
    top: 7px;
    box-sizing: border-box;
    border-top-width: 1px;
    border-top-style: solid;
}
#top_cms .more a{}
#top_cms .more a:hover{box-shadow: 5px 5px 15px rgba(0,0,0,0.2);transform: translate(-3px,-3px)}
/*----- other -----*/
#page_title{background-position: center center;background-size: cover;}
#page_title > div{position: relative;z-index: 1;}
#page_title > div::after{
    content: "";
    position: absolute;
    width: 0;
    height: 100%;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: rgba(255,255,255,0.80);
}
#page_title.active > div::after{
	animation-name: page_title;
	animation-duration: 0.5s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
#page_title h2,#page_title p{opacity: 0;}
#page_title p{position: relative;padding-left: 40px;}
#page_title p::after{
    content: "";
    position: absolute;
    width: 30px;
    height: 1px;
    left: 0;
    top: 8px;
    box-sizing: border-box;
    border-top-width: 1px;
    border-top-style: solid;
}
.pager li a{overflow: hidden;display: block;padding: 10px 20px;}
.pager li a span.border_so1-b{transition: ease 0.3s;bottom: 0;left: 0;transform: translateX(-100%);width: 100%;height: 1px;position: absolute;}
.pager li a:hover span.border_so1-b{transform: translateX(0);}
.pager li a span.border_so1-r{transition: ease 0.5s;bottom: 0;right: 0;transform: translateY(200%);width: 1px;height: 100%;position: absolute;}
.pager li a:hover span.border_so1-r{transform: translateY(0);}

#page07 .box_wrap .box:nth-of-type(odd){background-color: transparent!important;}
#page07 .box_wrap .box p{position: relative;transform: translateX(20px);line-height: 1.5;}
#page07 .box_wrap .box p::after{
    content: "";
    position: absolute;
    width: 30px;
    height: 1px;
    left: 0;
    top: 12px;
    box-sizing: border-box;
    border-top-width: 1px;
    border-top-style: solid;
}
#page08 .tel_contact .box p{padding-top: 10px;line-height: 1.3}
#page08 .tel_contact .box:last-of-type p{padding-top: 0px;line-height: 1.5}
#page08 #form_bt input{width: 200px;cursor: pointer;transition: ease 0.3s;}
#page08 #form_bt .posi_rel:hover input{box-shadow: 0 5px 10px rgba(0,0,0,0.2);}
#page08 #form_bt .posi_rel{cursor: pointer;transition: ease 0.3s;border-radius: 50px;}
#page08 #form_bt .posi_rel:hover{transform: translateY(-5px);}
#page08 #form_bt .posi_rel::after{
    content: "SEND";
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 20px;
    color: #fff;
}
#page08 #form_bt .disable input{pointer-events: none;opacity:0.3;}
#page08 #form_bt .posi_rel.disable:hover{transform: translateY(0px);cursor: not-allowed}

#page10 > div > div > div{width: 45%;}
#page10 .box{margin-bottom: 80px;}
#page10 .box h3,#page10 .box p{word-break: break-all;}
#page10 .box a:hover{box-shadow: 5px 5px 15px rgba(0,0,0,0.2);transform: translate(-3px,-3px)}
/*----- animation -----*/
.sc_anime.top_anime.active{
	animation-name: fadein;
	animation-duration: 1.5s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
.sc_anime.left_anime.active,#page_title.active h2{
	animation-name: leftin;
	animation-duration: 1.0s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
.sc_anime.left_anime2.active,#page_title.active p{
	animation-name: leftin;
    animation-delay: 0.5s;
	animation-duration: 1.0s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
@keyframes fadein {
	0% {opacity:0;transform: translateY(50px);}
	100% {opacity:1;transform: translateY(0px);}
}
@keyframes leftin {
	0% {opacity:0;transform: translate(-50px,0);}
	100% {opacity:1;transform: translate(0,0);}
}
@keyframes rightin {
	0% {opacity:0;transform: translate(100px,0);}
	100% {opacity:1;transform: translate(0,0);}
}
@keyframes loader{
    0% {width: 0;left: 0;}
	50% {}
	100% {width: 100%;}
}
@keyframes page_title{
    0% {width: 0;}
	100% {width: 100%;}
}
/* ---------- PC 1280px~ ---------- */
@media screen and (max-width: 1280px){
    #page10 .box h3{font-size: 20px;}
    #page10 .box p{font-size: 12px;}
}

/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
/*----- common -----*/
#main_wrap{width: 100%; overflow: hidden;}
/*----- index -----*/
/*----- other -----*/
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
/*----- common -----*/
    #wrap,#wrap.active,#wrap.close,#wrap.open{
        padding-left: 0;
        padding-right: 0;
    }
    #main_wrap{box-shadow:none;}
    .sns_links.side_bar,.open_menu{display: none!important;}
    header{
        position: static;
        width: 100%;
        padding: 20px;
        z-index: 99;
        display: block!important;
        opacity: 1!important;
    }
    header h1{max-width: 300px;}
    
    #menu_bt{
        width: 80px;
        height: 80px;
        top: 20px;
        right: 20px;
        z-index: 99;
    }
    #menu_bt > div {width: 60%;}
    #menu_bt span{
        display: block;
        height: 3px;
        background-color: #fff;
        margin-bottom: 15px;
        transition: ease 0.5s;
        position: relative;
        transform: translateY(15px)
    }
    #menu_bt span::before,#menu_bt span::after{
        content: "";
        display: block;
        width: 100%;
        height: 3px;
        background-color: #fff;
        transition: ease 0.5s;
        position: absolute;
        left: 0;
    }
    #menu_bt span::before{transform: translateY(-30px)}
    #menu_bt span::after{transform: translateY(-15px)}
    #menu_bt.active span{transform: translateY(0px) rotate(45deg)}
    #menu_bt.active span::before{transform: translateY(0px) rotate(-90deg)}
    #menu_bt.active span::after{opacity: 0;transform: translateY(0px) rotate(-45deg) translateX(10px)}
    #menu_bt span:last-of-type{
        margin-bottom: 0;
    }
    #menu_bt span{
        display: block;
        height: 3px;
        background-color: #fff;
        margin-bottom: 15px;
    }
    #menu_wrap{
        position: fixed;
        z-index: 98;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        top: 0;
        left: 0;
        padding-top: 170px;
        padding-right: 20px;
        padding-left: 30px;
        background-color: rgba(255,255,255,0.95);
        line-height: 1;
        display: none;
    }
    #menu_wrap ul.menu_nav{margin-bottom: 50px;}
    #menu_wrap ul.menu_nav li{width: 45%;order: 2;}
    #menu_wrap ul.menu_nav li.active{width: 100%;order: 1;}
    #menu_wrap ul.menu_nav li a{position: relative;padding: 20px;padding-left: 20px;overflow: hidden;}
    #menu_wrap ul.menu_nav li a::before{
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        box-sizing: border-box;
        border-top-style: solid;
        border-top-width: 1px;
        top: 0;
        left: -40px;
        transition: ease 1s;
    }
    #menu_wrap.active ul.menu_nav li a::before{left: 0;}
    #menu_wrap ul.menu_nav li a::after{
        content: "";
        position: absolute;
        width: 20px;
        height: 1px;
        box-sizing: border-box;
        border-top-style: solid;
        border-top-width: 1px;
        top: 50%;
        left: -10px;
        transition: ease 0.3s;
        transform: translateY(-50%);
    }
    #menu_wrap ul.menu_nav li.active a::after{
        display: none;
    }
    #menu_wrap .sns_links li{
        width: 60px;
    }
/*----- index -----*/
    #main_img{
        position: relative;
        height: 60vh;
        min-height: 500px;
    }
    #main_img figure{
        position: relative;
        width: 100%!important;
        height: 60vh!important;
        min-height: 500px!important;
    }
    #contents1 .slick{margin-bottom: 50px;}
    #contents1 .arrow.prev{
        bottom: -50px;
        right: 50%;
        transform: translateX(-15px);
    }
    #contents1 .arrow.next{
        bottom: -50px;
        right: 50%;
        transform: translateX(60px);
    }

    #contents2{
        height: 100%;
        /*background-image: none!important;*/
    }
    #contents2 > div{
        transform: translateY(-80px);
        padding: 50px!important;
    }
    /*----- other -----*/
    #page_title > div::after{
        border-width: 1px;
    }
    #page10 > div > div > div{width: 100%;}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
/*----- common -----*/
    #wrap,#wrap.active,#wrap.close,#wrap.open{
        padding-left: 0;
        padding-right: 0;
    }
    .sns_links.side_bar,.open_menu{display: none!important;}
    header h1{max-width: 200px;}
    
    #menu_bt{
        width: 50px;
        height: 50px;
        top: 20px;
        right: 20px;
        z-index: 99;
    }
    #menu_bt > div {width: 70%;}
    #menu_bt span{
        display: block;
        height: 1px;
        background-color: #fff;
        transition: ease 0.5s;
        position: relative;
        transform: translateY(10px)
    }
    #menu_bt span::before,#menu_bt span::after{
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background-color: #fff;
        transition: ease 0.5s;
        position: absolute;
        left: 0;
    }
    #menu_bt span::before{transform: translateY(-20px)}
    #menu_bt span::after{transform: translateY(-10px)}
    #menu_bt.active span{transform: translateY(0px) rotate(45deg)}
    #menu_bt.active span::before{transform: translateY(0px) rotate(-90deg)}
    #menu_bt.active span::after{opacity: 0;transform: translateY(0px) rotate(-45deg) translateX(10px)}
    #menu_bt span:last-of-type{
        margin-bottom: 0;
    }
    #menu_wrap{
        position: fixed;
        z-index: 98;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        top: 0;
        left: 0;
        padding-top: 90px;
        padding-right: 20px;
        padding-left: 20px;
        padding-bottom: 20px;
        background-color: rgba(255,255,255,0.95);
        line-height: 1;
        display: none;
        overflow: auto;
    }
    #menu_wrap ul.menu_nav {margin-bottom: 20px;}
    #menu_wrap ul.menu_nav li{width: 100%;order: 2;margin-bottom: 0px;}
    #menu_wrap ul.menu_nav li.active{width: 100%;order: 1;margin-bottom: 20px;}
    #menu_wrap ul.menu_nav li a{position: relative;padding: 15px 10px;overflow: hidden;padding-left: 30px;}
    #menu_wrap ul.menu_nav li.active a{padding-left: 10px;}
    #menu_wrap ul.menu_nav li a::before{
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        box-sizing: border-box;
        border-top-style: solid;
        border-top-width: 1px;
        top: 0;
        left: 0px;
        transition: ease 1s;
    }
    #menu_wrap ul.menu_nav li a::after{
        content: "";
        position: absolute;
        width: 20px;
        height: 1px;
        box-sizing: border-box;
        border-top-style: solid;
        border-top-width: 1px;
        top: 50%;
        left: 0;
        transition: ease 0.3s;
        transform: translateY(0);
    }
    #menu_wrap ul.menu_nav li.active a::after{
        display: none;
    }
    #menu_wrap .sns_links li{
        width: 40px;
    }
    #page-top{position: fixed;bottom: 0px;right: 0px;width: 40px;height: 40px;z-index: 10;cursor: pointer;}
/*----- index -----*/
    #main_img{
        position: relative;
        height: 40vh;
        min-height: 200px;
    }
    #main_img figure{
        position: relative;
        width: 100%!important;
        height: 40vh!important;
        min-height: 200px!important;
    }
    #intro h2::after{
        width: 30px;
        height: 1px;
    }
    #contents2 > div{
        transform: translateY(-40px);
        padding: 20px!important;
    }
    #top_cms .top_cms_box{margin-bottom: 80px;}
/*----- other -----*/
.pager li:not(.prev){display: none;}
.pager li:first-of-type{margin-left: 0;}
.pager li a span.border_so1-b,.pager li a span.border_so1-r{display: none;}
#page07 .box_wrap .box p{transform: translateX(0px);}
#page07 .box_wrap .box p::after{
    width: 20px;
    top: 9px;
}
#page08 .tel_contact .box p{padding-top: 0}
#page08 .tel_contact .box:last-of-type p{padding-top: 0px;line-height: 1.5}
}

/*----- Safari -----*/
_::-webkit-full-page-media, _:future, :root #page08 .tel_contact .box p{
    margin-left: 15px;
}