@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');

body{position: relative;width: 100%;overflow: hidden;}
body::before{
    content: "";
    width: 30%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    background-color: rgba(0,0,0,0.30);
}

/*----- common -----*/
#wrap{
    position: relative;
    z-index: 2;
    font-family: "Yu Gothic Medium", YuGothic, "游ゴシック Medium", "游ゴシック体","ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}
.font_en{font-family: "Fjalla One", "Yu Gothic Medium", YuGothic, "游ゴシック Medium", "游ゴシック体","ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;line-height: 1;}


header{border-bottom: 1px solid #fff;}
header .sns_links li{width: 30px;margin-left: 20px;}
header .sns_links li a{opacity: 0.6;transition: all 0.3s;}
header .sns_links li a:hover{opacity: 1;}


#map{margin-bottom: -10px;}
#map iframe{width: 100%;height: 500px;}
#footer .grid_6{position: relative;overflow: hidden;z-index: 1}
#footer .grid_6 > span{position: absolute;width: 100%;height: 100%;bottom: 100%;right: 0;z-index: -2;transition: all 0.3s;}
#footer .grid_6:hover > span{bottom: 0;}
#footer .grid_6:nth-of-type(2){background-color: rgba(0,0,0,0.30);}
#footer .grid_6 > a{position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 1;}
#footer .grid_6 .tel{position: relative;z-index: 2;}
#footer .grid_6 .tel a{display: block;}

footer .footer_menu li{margin-right: 20px;}
footer .footer_menu li a{transition: all 0.3s;}
footer .footer_menu li a:hover{opacity: 0.6;}
#copyright{padding-right: 60px;}
#page-top,#con_bnr{position: fixed;width: 54px;height: 54px;right: 0;bottom: 0;z-index: 97;cursor: pointer;font-size: 20px;transform:translateY(10px);}


#loader{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 9999;transition: ease-in 1s}
/*#loader > div{*/
/*    text-align: center;*/
/*	animation-name: loader2;*/
/*	animation-duration: 2.5s;*/
/*	animation-timing-function: ease-in;*/
/*	animation-fill-mode: forwards;*/
/*    -webkit-backface-visibility: hidden;*/
/*    backface-visibility: hidden;*/
/*}*/
/*#loader img{*/
/*    width: 80px;*/
/*    height: 80px;*/
/*	animation-name: loader1;*/
/*	animation-duration: 0.7s;*/
/*	animation-timing-function: linear;*/
/*	animation-fill-mode: none;*/
/*    animation-iteration-count:infinite;*/
/*    -webkit-backface-visibility: hidden;*/
/*    backface-visibility: hidden;*/
/*}*/
#loader::after{
    content: "";
    width: 100%;
    height: 5px;
    box-sizing: border-box;
    border-bottom: 5px solid #fff;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0,38px);
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/*----- index -----*/
.more img{width: 22px;}
.more a{position: relative;overflow: hidden;display: inline-block;}
.more a span{position: absolute;width: 100%;height: 100%;top: 0;right: 100%;transition: all 0.3s;z-index: -1;}
.more a:hover span{right: 0;}

#main_contents{position: relative;z-index: 1;}
#main_contents::after{content: "";width: 1px;height: 100%;position: absolute;top: 0;left: 5%;background-color: #fff;}

#main_contents #main_menu li{position: relative;margin-bottom: 20px;transition: all 0.3s;overflow: hidden;}
#main_contents #main_menu li a{padding-left: 30px; display: block;padding-bottom: 10px;}
#main_contents #main_menu li::before,#main_contents #main_menu li::after{content: "";position: absolute;}
#main_contents #main_menu li::before{border: 2px solid #fff;width: 13px;height: 13px;top: 0;left: 0px;opacity: 0;transition: all 0.3s;}
#main_contents #main_menu li::after{border-bottom: 1px solid #fff;width: 100%;height: 1px;bottom: 0;right: 100%;transition: all 0.3s;}
#main_contents #main_menu li.active,#main_contents #main_menu li:hover{margin-left: 0px;transform: translateX(-20px);}
#main_contents #main_menu li.active::before{background-color: #fff;}
#main_contents #main_menu li.active::before,#main_contents #main_menu li:hover::before{opacity: 1;}
#main_contents #main_menu li.active::after,#main_contents #main_menu li:hover::after{right: 0;transform: translateX(30px)}

#main_contents #main_img{box-shadow: 0 0 15px rgba(0,0,0,0.5);}

#main_contents #catch{transform: translateY(-60px);position: relative;z-index: 3;}
#main_contents #catch h2,#main_contents #catch p{line-height: 1;}


#intro,#contents,#contents_link a,#page_title{background-position: center center;background-repeat: no-repeat;background-size: cover;position: relative;}
#intro > div,#contents > div,#page_title > div{position: relative;z-index: 2;}
#intro::after,#contents::after,#contents_link a::after,#page_title::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.50);z-index: 1;}

#intro .more a{border: 2px solid #fff;padding: 10px 40px 10px 10px;position: relative;}
#intro .more a img{position: absolute;top: 50%;right: 10px;transform: translateY(-50%);}

#contents h3 span{display: inline-block;padding: 10px;border-top: 5px solid #fff;font-size: 50px;}
#contents figure{box-shadow: 0 0 10px rgba(0,0,0,0.42);}
#contents h4{transform: translateY(-55px);}
#contents p{transform: translateY(-35px);}


#top_cms .top_cms_title h3 span{display: inline-block;border-top: 3px solid #fff;padding: 10px 10px 0px 10px;text-align: left;word-break:break-all;}
#top_cms .top_cms_title h4 span{display: inline-block;border-bottom: 3px solid #fff;padding: 0px 5px 10px 5px;text-align: left;}
#top_cms .more{transform: translateY(-100%);}
#top_cms .more a{border: 2px solid #fff;padding: 10px 40px 10px 10px;position: relative;box-sizing: border-box;display: inline-block;}
#top_cms .more a img{position: absolute;top: 50%;right: 10px;transform: translateY(-50%);}

#contents_link a{height: 400px;overflow: hidden;}
#contents_link a::after{background-color: rgba(0,0,0,0.60);transition: all 0.3s;}
#contents_link a:hover::after{top:100%;}
#contents_link a > div{z-index: 2;text-align: center;}
#contents_link a span{display: inline-block;text-align: left;}
#contents_link a h3{margin-bottom: 20px;}
#contents_link a h4{border: 1px solid #fff;padding: 10px 20px;}

/*----- other -----*/
#page_title::after{opacity: 0;}
#page_title h2 span{display: inline-block;border-top: 3px solid #fff;padding: 10px 10px 0px 10px;text-align: left;word-break:break-all;}
#page_title h3 span{display: inline-block;border-bottom: 3px solid #fff;padding: 0px 5px 10px 5px;text-align: left;}
.pager li a{padding: 10px;}
.pager li:not(.prev) a{padding: 10px 20px;}
.cate_list{line-height: 1;}
.cate_list li{position: relative;overflow: hidden;font-size: 20px;}
.cate_list li::after{content: "";background-color: #fff;width: 100%;height: 100%;z-index:1;position: absolute; top: 0;left: 0;transition: 0.3s;}
.cate_list li:hover::after{left: 100%;}
.cate_list a{position: relative;z-index: 2;display: block;padding: 10px;padding-left: 40px;}
.cate_list a .font_en{
    font-size: 18px;
    position: absolute;
    padding: 10px 5px;
    letter-spacing: 3px;
    top: 0;
    left: 0;
}
#page07,#page08,#page09,#page10{border-top: 1px solid #fff;}
#page07 .grid_4 h3{position: relative;}
#page07 .grid_4 h3::after{content: "";width: 100%;height: 1px;background-color: #fff;top: 50%;left: 0;position: absolute;z-index: 1;}
#page07 h3 span{display: inline-block;padding-right: 20px; position: relative;z-index: 2;}
#page07 .box{border-bottom: 2px solid rgba(255,255,255,0.10);}
#page08 input{border: none;}
#page08 #form_area .disable{opacity:0.6}
#page08 #form_area input{padding-top:28px;padding-bottom:28px;margin-left:30px;}
#page09 h3 span{background-color: rgba(0,0,0,0.30);display: inline-block;border:1px solid #fff;}
#page10 .grid_4 a{border: 1px solid #fff;position: relative;overflow: hidden;z-index: 1;padding: 50px 50px 30px 50px;}
#page10 .grid_4 a span.font_24{text-shadow: 0 0 5px rgba(0,0,0,0.3);}
#page10 .grid_4 a:hover .opacity07{opacity: 1;transition: all 0.3s;}
#page10 .grid_4 a .bg_color3{position: absolute;width: 100%;height: 100%;transition: all 0.3s;top: 0;right: 100%;z-index: -1;}
#page10 .grid_4 a:hover .bg_color3{right: 0;}
#page10 .grid_4 a .no{position: absolute;top: 0;left: 0;padding: 10px;box-shadow: 3px 3px 5px rgba(0,0,0,0.3);}

/*----- animation -----*/
.sc_anime.top_anime.active{
	animation-name: fadein;
	animation-duration: 1.0s;
	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: rotate(0deg)}
	100% {transform: rotate(360deg)}
}
@keyframes loader2{
	0% {left: 0;transform: translate(-100%,-50%);}
	100% {left: 100%;transform: translate(0,-50%);}
}
/* ---------- PC 1280px~ ---------- */
@media screen and (max-width: 1280px){
}

/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
    footer h3.footer_txt{padding-bottom: 7px;}
    #main_contents #catch h2 span{padding-top: 20px;}
    #contents h4{padding-bottom: 5px;transform: translateY(-50px)}
    .pager.font_en{font-family: "Yu Gothic Medium", YuGothic, "游ゴシック Medium", "游ゴシック体","ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;}
    .pager li a,.pager li:not(.prev) a{padding-top:16px;}
    #page09 h3 span{padding-left: 12px;transform:translateY(3px)}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
/*----- common -----*/
#menu_bt{
    position: fixed;
    top:0;
    right: 0;
    width: 80px;
    height: 80px;
    z-index: 99;
}
#menu_bt > div{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center;}
#menu_bt > div span{display: block;width: 50px;height: 4px;background-color: #fff;margin-bottom: 10px;transition: all 0.3s; transform: translateX(2px)}
#menu_bt.active > div span:nth-of-type(1){width: 35px;transform: translateX(18px) rotate(45deg) translateY(10px)}
#menu_bt.active > div span:nth-of-type(2){width: 35px;transform: translateX(18px) rotate(-45deg) translateY(-10px)}
#menu_bt > div div{letter-spacing: 5px;transform: translateX(2px)}
#menu_bt.point_none{pointer-events: none;}
#main_nav{
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: auto;
    top: 0;
    left: 0;
    z-index: 98;
    box-sizing: border-box;
    display: none;
}
#main_nav.active{
    display: block;
    animation-name: rightin;
    animation-duration: 1.0s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}
#main_nav > div{padding-top: 80px;box-sizing: border-box;min-height: 100vh;}
#main_nav > div > ul{padding: 0 50px;margin-bottom: 50px;position: relative;z-index: 2;}
#main_nav > div > ul li{position: relative;margin-top: 50px;transition: all 0.3s;overflow: hidden;}
#main_nav > div > ul li a{padding-left: 60px; display: block;}
#main_nav > div > ul  li::before{content: "";position: absolute;}
#main_nav > div > ul  li::before{border: 5px solid #fff;width: 25px;height: 25px;top: 50%;left: 0px;transform: translateY(-50%);transition: all 0.3s;box-sizing: border-box;}
#main_nav > div > ul  li.active::before{background-color: #fff;}
#main_nav .sns_links{padding: 20px 50px;border-top: 5px solid #fff;border-bottom: 5px solid #fff;background-color: rgba(0,0,0,0.30);position: relative;z-index: 2;}
#main_nav .sns_links li{width: 40px;}
#main_nav .sns_links li a{opacity: 1;transition: all 0.3s;}
#main_nav #menu_bg{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;}
#main_nav #menu_bg::after{content: ""; position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2;background-color: rgba(0,0,0,0.60);}
#main_nav #menu_bg span{position: absolute;width: 100%;height: 33.3333%;background-position: center center;background-size: cover;z-index: 1;}
#main_nav #menu_bg span:nth-of-type(2){top: 33.3333%;}
#main_nav #menu_bg span:nth-of-type(3){top: 66.6666%;}
#page-top,#con_bnr{width: 55px;height: 55px;}
/*----- index -----*/
.more a span{display: none;}
#main_contents::after{display: none;}
#contents h3 span{font-size: 40px;}
#contents h4{transform: translateY(-50px);}
#contents p{transform: translateY(-30px);}
#top_cms .more{transform: translateY(0);}
#contents_link a{height: 200px;}

/*----- other -----*/
    #page10 .grid_4{width: 50%!important;}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
/*----- common -----*/
#menu_bt{
    position: fixed;
    top:0;
    right: 0;
    width: 60px;
    height: 60px;
    z-index: 99;
}
#menu_bt > div{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center;}
#menu_bt > div span{display: block;width: 40px;height: 2px;background-color: #fff;margin-bottom: 10px;transition: all 0.3s; transform: translateX(0px)}
#menu_bt.active > div span:nth-of-type(1){width: 30px;transform: translateX(12px) rotate(45deg) translateY(8px)}
#menu_bt.active > div span:nth-of-type(2){width: 30px;transform: translateX(12px) rotate(-45deg) translateY(-8px)}
#menu_bt > div div{letter-spacing: 5px;transform: translateX(2px);font-size: 10px;}
#main_nav > div{padding-top: 40px;}
#main_nav > div > ul{padding: 0 20px;}
#main_nav > div > ul li{margin-top: 30px;}
#main_nav > div > ul li a{padding-left: 40px;}
#main_nav > div > ul li::before{border: 2px solid #fff;width: 15px;height: 15px;top: 50%;left: 0px;transform: translateY(-50%);transition: all 0.3s;box-sizing: border-box;}
#main_nav .sns_links{padding: 20px 20px;border-top: 5px solid #fff;border-bottom: 5px solid #fff;background-color: rgba(0,0,0,0.30);position: relative;z-index: 2;}
#main_nav .sns_links li{width: 30px;}
#loader{transition: ease-in 0.8s}
#loader > div{
	animation-duration: 2s;
}
#loader img{
    width: 40px;
    height: 40px;
}
#loader::after{
    border-bottom: 2px solid #fff;
    transform: translate(0,18px);
}
#page-top,#con_bnr{width: 50px;height: 50px;}

/*----- index -----*/
#main_contents #catch{transform: translateY(-30px)}
#contents h3 span{font-size: 30px;}
/*----- other -----*/

.pager li:not(.prev) a{padding: 10px 20px;}
.cate_list li{width: 100%;margin-bottom: 30px;margin-right: 0;}
.cate_list a{display: block;}
#page08 #form_area input{padding-top:28px;padding-bottom:28px;margin:0 auto;}
#page10 .grid_4{width: 100%!important;}
#page10 .grid_4 a{padding: 40px 10px 30px 60px;border: none;}
#page10 .grid_4 a .bg_color3{right: 0;}
}