@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;900&family=Noto+Serif+JP:wght@400;900&display=swap');
/*----- common -----*/
#wrap{
    font-family: "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
    width: 100%;
    box-sizing: border-box;
    padding-right: 55px;
    overflow: hidden;
    position: relative;
}
.font_bold{font-weight: 900;}
.font_serif{
	font-family: "Noto Serif JP", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}
#loader{
    width: 100%;height: 100vh;position: fixed;bottom: 0;left: 0;z-index: 9999;transition: ease 0.4s;
}
#loader::after{
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    animation-name: loader2;
	animation-duration: 0.4s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
    animation-delay:1.0s;
}
#loader div img{
    width: 200px;
    animation-name: loader1;
	animation-duration: 0.5s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
.index header{z-index: 2;padding-right: 55px;box-sizing: border-box;}
header h1{
    position: absolute;
    width: 20%;
    max-width: 180px;
    top: 20px;
    left: 60px;
}
header .sns_links{padding: 5px;}
header .sns_links li{
    width: 36px;
    margin-right: 20px;
}
footer #footer{background-position: center center;background-size: cover;}
footer #footer #footer_cms > div{background-color: rgba(255,255,255,0.7);}
footer #map{margin-bottom: -10px;}
footer #map iframe{width: 100%;height: 500px;}

#menu_wrap{
    position: fixed;
    width: 80%;
    max-width: 800px;
    height: 100%;
    top: 0;
    left: 100%;
    transition: ease 0.5s;
    transform: translateX(-55px);
    box-sizing: border-box;
    background-color: rgba(255,255,255,0.9);
    z-index: 999;
}
#menu_wrap.active{transform: translateX(-100%);}
#menu_bt{cursor: pointer;width: 60px;height: 100vh;transition: ease 0.3s;position: relative;}
#menu_bt:hover{opacity: 0.8;}
#menu_bt div > p{margin-bottom: 5px;}
#menu_bt div > p span:nth-of-type(2){display: none;}
#menu_bt.active div > p span:nth-of-type(1){display: none;}
#menu_bt.active div > p span:nth-of-type(2){display: block;}
#menu_bt div > span{background-color: #fff;display: block;height: 1px;transition: ease 0.3s;}
#menu_bt div > span:nth-of-type(1){width: 40px;margin-bottom: 10px;}
#menu_bt div > span:nth-of-type(2){width: 34px;margin-bottom: 10px;}
#menu_bt div > span:nth-of-type(3){width: 28px;}
#menu_bt:hover div > span:nth-of-type(2),#menu_bt:hover span:nth-of-type(3){width: 40px;}
#menu_bt.active div > span:nth-of-type(1){opacity: 0;}
#menu_bt.active div > span:nth-of-type(2){width: 30px; height: 2px; transform: translate(6px,0px) rotate(45deg)}
#menu_bt.active div > span:nth-of-type(3){width: 30px; height: 2px; transform: translate(6px,-12px) rotate(-45deg)}

#main_menu{padding: 50px;}
#main_menu ul:not(.sns_links) li{margin-bottom: 30px;text-shadow: 0 0 5px rgba(0,0,0,0.1);position: relative;}
#main_menu ul:not(.sns_links) li a {padding-left: 40px;}
#main_menu ul:not(.sns_links) li a span{position: absolute;top:0;left: 0;padding:5px 3px 0;}

#page-top{width: 55px;height: 55px;position: fixed;bottom: 0;right: 0;z-index: 1000;transition: ease 0.3s;cursor: pointer;}
#page-top:hover i{transform: translateY(-3px);}
#page-top.active{z-index: 998;}
.item1,.item2{position: relative;}
.item1 span,.item2 span{position: relative;z-index: 2;}
.item1::before,.item2::before{
    content: "";
    position: absolute;
    z-index: 1;
}
.item1::before{
    width: 80px;
    height: 80px;
    top: -40px;
    left: -40px;
    transform: translate(10px,25px);
}
.item2::before{
    width: 40px;
    height: 40px;
    bottom: -10px;
    right: -20px;
}
/*----- index -----*/
#main_img{
    width: 100%;
	height: 100vh;
	overflow: hidden;
	position: relative;
    box-sizing: border-box;
}
#main_img #slide_wrap{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    box-sizing: border-box;
}
#main_img .swiper-container{
	width: 100%;
	height: 100%;
}
#main_img .swiper-container .swiper-slide{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
}
#main_img .swiper-container .swiper-slide img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) scale(1.05);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
}
#main_img .swiper-container .swiper-slide-active img{
 	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) scale(1.05);
	animation: zoomUp 5.5s linear 0s 1 normal forwards;  
}
#main_img .sc_icon{position: absolute;width: 100px;height: 50px;border-radius: 100px 100px 0 0;bottom: -50px;left: 50%;transform: translateX(-50%);opacity: 0;transition: ease 1s;z-index: 99;}
#main_img .sc_icon.active{opacity: 1;bottom: 0;}
#main_img .sc_icon span{position: absolute;left: 50%; bottom: 5px;transform: translateX(-50%);}
#contents1{}
#contents1 .box_wrap::after{
    content: "";
    display: block;
    clear: both;
}
#contents1 .box_wrap .box{
    width: 50%;
    float: left;
    box-sizing: border-box;
    padding: 5%;
}
#contents2 .box{position: relative;}
#contents2 .box::after{content: ""; position: absolute;width: 6%;height: 1px;padding: 0 20px; top: 50%;left: 50%;transform: translate(-50%,-50%);}
#contents2 .box > div{width: 47%;box-sizing: border-box;}
#contents2 .box:nth-of-type(1) div.box_img{margin-right: 6%;}
#contents2 .box:nth-of-type(2) div.box_img{margin-left: 6%;}
#contents2 .box .grid_6{padding: 30px;}

#top_cms .top_cms_box{margin-bottom: 60px;}
#top_cms .top_cms_box:last-of-type{margin-bottom: 0px;}
#top_cms .top_cms_box .top_cms_title p{position: relative;z-index: 2;}
#top_cms .top_cms_box .more a{
    width: 80px;
    height: 80px;
    position: relative;
}
/*----- other -----*/
#page_title{padding: 80px 50px;}
#page_title .item1::before,#page_title .item2::before{background-color: #fff;opacity: 0;transform: translate(20px,35px);transition: ease 0.5s;}
#page_title.active .item1::before{width: 60px;height: 60px;top:-40px;left: -30px;transform: translate(10px,25px);opacity: 1;}
#page_title.active .item2::before{width: 30px;height: 30px;bottom:-10px;right: -10px;transform: translate(10px,25px);opacity: 1;}
.pager li a{padding:10px;overflow: hidden;line-height: 1;}
.pager li a .posi_abs{width: 100%;height: 2px;left: 0;bottom:0;transform: translateX(-100%);transition: ease 0.3s;}
.pager li a:hover .posi_abs{transform: translateX(0);}
#page07 .box_wrap .box:last-of-type{border-bottom: none;}
#page08 .contact_wrap .width_200{height: 60px;border: none;position: relative;cursor: pointer;transition: ease 0.3s;}
#page08 .contact_wrap .width_200:hover{opacity: 0.7;}
#page08 .contact_wrap .width_200::before{content: "送信";position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);font-size: 20px;color: #fff;letter-spacing: 4px;font-weight: 900;}
#page08 .contact_wrap .width_200 input{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: transparent;border: none;z-index: 2;cursor: pointer;line-height: 1;opacity: 0;}
#page09 .privacy_wrap .privacy_box p{position: relative;z-index: 3;}
#page10 .item1::before{
    width: 60px;
    height: 60px;
    top: -20px;
    left: 0px;
    transform: translate(20px,50px);
    opacity: 0;
    transition: ease 0.3s;
}
#page10 .item1:hover::before{
    transform: translate(10px,25px);
    opacity: 1;
}
#page10 .box a{position: relative;}
#page10 .box a > div{position: relative;z-index: 2;overflow: hidden;}
/*----- 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,#catch span.left_anime.active{
	animation-name: leftin;
	animation-duration: 1.0s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
.sc_anime.right_anime.active,#page_title.active::after,#page_title > div.active{
	animation-name: rightin;
	animation-duration: 1.0s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}

@keyframes fadein {
	0% {opacity:0;transform: translateY(100px);}
	100% {opacity:1;transform: translateY(0px);}
}
@keyframes leftin {
	0% {opacity:0;transform: translate(-100px,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 loader1{
    0% {transform: scale(0.4);opacity: 0;}
	50% {opacity: 1;}
	100% {transform: scale(1);}
}
@keyframes loader2{
    0% {top: 100%;}
	100% {top: 0;}
}
/* ---------- PC 1280px~ ---------- */
@media screen and (max-width: 1280px){
}

/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
/*----- common -----*/
    #footer_txt {padding: 0;padding-bottom: 3px;}
/*----- index -----*/
/*----- other -----*/
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
/*----- common -----*/
    #wrap{padding-right: 0;}
    header h1{
        max-width: 100px;
    }
    #menu_wrap{transform: translateX(0);}
    #menu_wrap .sns_links li{width: 50px;}
    #menu_bt{width: 60px;height: 60px;position: absolute;top: 20px;left: -80px;}
    #menu_wrap.active #menu_bt{left: 20px;}
    #menu_bt:hover{opacity: 1;}
    #menu_bt div > span{background-color: #fff;display: block;height: 1px;transition: ease 0.3s;}
    #menu_bt div > span:nth-of-type(1){width: 36px;margin-bottom: 8px;}
    #menu_bt div > span:nth-of-type(2),#menu_bt:hover div > span:nth-of-type(2){width: 30px;margin-bottom: 8px;}
    #menu_bt div > span:nth-of-type(3),#menu_bt:hover div > span:nth-of-type(3){width: 24px;}
    #menu_bt.active div > span:nth-of-type(2){width: 30px;transform: translate(6px,0px) rotate(45deg)}
    #menu_bt.active div > span:nth-of-type(3){width: 30px;transform: translate(6px,-12px) rotate(-45deg)}
    /*----- index -----*/
    #main_img{
        width: 100%;
        height: 50vh;
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
    }
    #main_img #slide_wrap{
        position: relative;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        overflow: hidden;
        box-sizing: border-box;
    }
    #contents1{}
    #contents1 .box_wrap .box{
        width: 100%;
        float: none;
        box-sizing: border-box;
        padding: 10%;
    }
    #contents2 .box::after{padding: 0 10px;}
    #top_cms .top_cms_box{margin-bottom: 60px;}
    #top_cms .top_cms_box:last-of-type{margin-bottom: 0px;}
    #top_cms .top_cms_box .top_cms_title p{position: relative;z-index: 2;}
    #top_cms .top_cms_box .more a{
        width: 80px;
        height: 80px;
        position: relative;
    }
/*----- other -----*/
#page10 .item1::before{
    transform: translate(10px,25px);
    opacity: 1;
}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
/*----- common -----*/
    header h1{
        top: 10px;
        left: 10px;
        position: relative;
        margin-bottom: 20px;
    }
    #menu_wrap{width: 90%;}
    #main_menu{padding: 20px;padding-top: 50px;}
    #menu_bt{width: 50px;height: 50px;position: absolute;top: 10px;left: -60px;}
    #menu_wrap.active #menu_bt{left: 10px;}
    .item1::before{
        width: 60px;
        height: 60px;
        top: -30px;
        left: -30px;
        transform: translate(10px,20px);
    }
    #menu_wrap .sns_links li{width: 30px;}
    #menu_bt.active div > span:nth-of-type(2){width: 25px;transform: translate(5px,0px) rotate(45deg)}
    #menu_bt.active div > span:nth-of-type(3){width: 25px;transform: translate(6px,-10px) rotate(-45deg)}
    #copyright{padding: 20px 45px;}
    #page-top{width: 45px;height: 45px;}
/*----- index -----*/
    #main_img{
        width: 100%;
        height: 40vh;
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
    }
    #contents2 .box .box_img{position: relative;}
    #contents2 .box::after{display: none;}
    #contents2 .box .box_img::after{content: ""; position: absolute;width: 1px;height: 70px;padding: 0; top: 100%;left: 50%;transform: translate(-50%,-10px);}
    #contents2 .box > div{width: 90%;box-sizing: border-box;margin: 0 auto;}
    #contents2 .box > div:first-of-type{margin-bottom: 50px;}
    #contents2 .box:nth-of-type(1) div.box_img{margin-right: auto;}
    #contents2 .box:nth-of-type(2) div.box_img{margin-left: auto;}
    #contents2 .box .grid_6{padding: 20px;}
    #top_cms .top_cms_box .more a{
        width: 60px;
        height: 60px;
        position: relative;
    }
/*----- other -----*/
    #page_title{padding: 50px 20px;}
    #page_title .item2::before{transform: translate(10px,15px);}
    #page_title.active .item2::before{transform: translate(10px,5px);}
    .pager li:not(.prev) {display: none;}
    .pager li:first-of-type a {margin-left: 0;}
    #page08 .contact_wrap .width_200::before{font-size: 14px;letter-spacing: 4px;}
}