@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Kadwa:wght@400;700&display=swap');
/*----- common -----*/
body{
    font-family: "Meiryo UI", "メイリオ", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif!important;
    font-weight: 300;
}
.en_font{
    font-family: "Kadwa", "Meiryo UI", "メイリオ", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif!important;}
.en_font .font_bold,.en_font.font_bold{font-weight: 700!important;}

.more > div{border-radius: 100px;overflow: hidden;position: relative;box-sizing: border-box;}
.more a{position: relative;z-index: 2;border-radius: 100px;}
.more > div > span.posi_abs{width: 100%;height: 100%;border-radius: 100px;transform: translateY(-100%);top: 0;left: 0; transition: ease 0.3s;z-index: 0;}
.more > div:hover > span.posi_abs{transform: translateY(0);}

#loader div{
    position: fixed;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
	animation-name: loader;
	animation-fill-mode: forwards;
}
#loader .cover1{animation-delay: 1.0s;animation-duration: 0.6s;animation-timing-function: ease-in-out;z-index: 99;}
#loader .cover2{animation-delay: 1.5s;animation-duration: 0.4s;animation-timing-function: ease-in-out;z-index: 98;}
#loader .cover3{animation-delay: 1.5s;animation-duration: 0.6s;animation-timing-function: ease-in;z-index: 97;}
#loader div img{max-width: 600px;width: 70%;}

#wrap{box-sizing: border-box;border:20px solid #fff;max-height: 100vh;overflow: auto;padding: 20px;padding-bottom: 0;}
#wrap::-webkit-scrollbar{ 
    width: 4px;
    border-radius: 5px;
}
#wrap::-webkit-scrollbar-thumb{ 
    background: #f15a24;
    border-radius: 2px;
}
#wrap::-webkit-scrollbar-track-piece{
    background: #ff947b;
}
#wrap::-webkit-scrollbar-track-piece:start{
    background: #ff947b;
}
#wrap::-webkit-scrollbar-track-piece:end{
    background: #ccc;
}
#header h1 img{vertical-align: middle}
#header li a{padding: 0 5px;}
#footer #footer_txt{margin-bottom: 9px;}
#map iframe{width: 100%;height: 500px;}
.footer_link ul::after,.footer_link ul::before{content: "|";display: block;}
.footer_link li:nth-of-type(1){order: 1;}
.footer_link li:nth-of-type(2){order: 3;}
.footer_link li:nth-of-type(3){order: 5;}
.footer_link ul::after{order: 2;}
.footer_link ul::before{order: 4;}
.footer_link li:last-of-type::after{display: none;}
footer .sns_link li{margin-left: 20px;}
.sns_link img{width: 40px;}

#page-top{cursor: pointer;transition: ease 0.3s;}
#page-top:hover{transform: translateY(-5px);}

/*----- index -----*/

#main_img{overflow: hidden;position: relative;}
#main_img figure{position: relative;overflow: hidden;}
#main_img img{
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
#main_img .border_wrap{position: absolute;top: 20px;left: 20px;}

#intro img{border:10px solid #fff;box-shadow: 10px 10px 15px rgba(0,0,0,0.1);box-sizing: border-box;}
#intro h3{text-shadow: 5px 5px 1px rgba(0,0,0,0.1);}
.border_dash1,.border_dash2 {
    width: 100%;
    height: 3px;
    position: absolute;
    z-index: 2;
}
.border_dash3,.border_dash4 {
    width: 3px;
    height: 100%;
    position: absolute;
    z-index: 2;
}
.border_dash1 {
    top: 0;
    left: 0;
}
.border_dash2 {
    bottom: 0;
    left: 0;
}
.border_dash3 {
    top: 0;
    left: 0;
}
.border_dash4 {
    top: 0;
    right: 0;
}
.border_dash1::before,.border_dash2::before {
    content: "";
    background-image: linear-gradient(to right, #fff, #fff 10px, transparent 10px, transparent 10px);
    background-size: 21px 3px;
    background-repeat: repeat-x;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.border_dash3::before,.border_dash4::before {
    content: "";
    background-image: linear-gradient(to bottom, #fff, #fff 10px, transparent 10px, transparent 10px);
    background-size: 3px 21px;
    background-repeat: repeat-y;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
#concept{background-position: center center;background-size: cover;}
#concept::after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0.6;
}
#concept .posi_rel{z-index: 2;}
#concept h3{
    position: relative;
}
#concept h3,#concept p{text-shadow: 0 0 10px rgba(0,0,0,0.2);}
#concept h3::after{
    content: "";
    position: absolute;
    width: 80px;
    height: 3px;
    background-color: #fff;
    top: 100%;
    left: 50%;
    transform: translate(-50%,20px);
    border-radius: 10px;
}
#contents_links{}
#contents_links{
}
#contents_links .grid_4 a{
    position: relative;
    display: block;
    height: 250px;
    overflow: hidden;
}
#contents_links .grid_4 a::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.0);
    z-index: 1;
    transition: ease 0.3s;
}
#contents_links .grid_4 a:hover::after{
    opacity: 0;
}
#contents_links .grid_4 a h3{
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-45deg) translate(-70px,-20px);
    width: 150px;
    padding: 10px 50px;
    text-align: center;
    z-index: 2;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
#contents_links .grid_4 a div{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    transition: ease 0.3s;
}
#contents_links .grid_4 a:hover div{transform: scale(1.1);opacity: 0.7;}
#contents_links .grid_4 a div p{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);padding: 0 20px;border-radius: 50px;}

#top_cms .top_cms_box .top_cms_title {transform: translateY(15px);}
#top_cms .top_cms_box .more {transform: translateY(-30px);}
#top_cms .top_cms_box .top_cms_title p span{display: inline-block;position: relative;}
#top_cms .top_cms_box .top_cms_title p span::before,#top_cms .top_cms_box .top_cms_title p span::after{
    content: "・";
    padding: 0 10px;
}
#top_cms .top_cms_box .cms_wrap{
    padding: 50px 20px 70px;
}
/*----- other -----*/
#page_title{height: 300px;background-position: center center;background-size: cover;text-shadow: 0 0 5px rgba(0,0,0,0.2);}
#page_title .border_wrap{position: relative;width: 100%;z-index: 2;}
#page_title .bg_color1{position: absolute;width: 100%;height: 100%;top: 0;left: 0;}

.cate_list{
    width: 100%;
    box-sizing: border-box;
    padding-left: 250px;
    position: relative;
}
.cate_list .cate_list_title{
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 20px;
}

#info .box:nth-of-type(odd){background-color: transparent;}
#info .box:last-of-type{margin-bottom: 0;}

#contact #form_bt input{border-radius: 100px;overflow: hidden;cursor: pointer;transition: ease 0.3s;}
#contact #form_bt input:hover{transform: translateY(-10px);box-shadow: 0 0 10px rgba(0,0,0,0.2)}

#sitemap ul li{transition: ease 0.3s;overflow: hidden;}
#sitemap ul li:hover{border-radius: 100px;}
#sitemap ul li a{padding: 10px 10px 15px;}
#sitemap ul li a:hover{transform: translateY(-5px);}
#sitemap ul li a span{display: block;transition: ease 0.3s;}
#sitemap ul li a:hover span{color: #fff;}
#sitemap ul li a span.jp{display: inline-block;position: relative;}
#sitemap ul li a span.jp::before,#sitemap ul li a span.jp::after{
    content: "・";
    padding: 0 10px;
}

/*----- animation -----*/
.sc_anime.top_anime.active{
	animation-name: fadein;
	animation-duration: 1.5s;
	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% {height: 100%;bottom:0;}
	100% {height: 0;bottom:-100px;}
}
@keyframes page_title{
    0% {width: 0;}
	100% {width: 100%;}
}
@keyframes menu_action{
    0% {left: 100%;opacity: 0;}
    10% {border-radius: 1000px 0 0 1000px;}
	100% {left: 30%;border-radius: 0px;opacity: 1}
}
@keyframes menu_action2{
    0% {left: 100%;opacity: 0;border-radius: 1000px 0 0 1000px;}
	100% {left: 0%;border-radius: 0px;opacity: 1}
}
/* ---------- PC 1280px~ ---------- */
@media screen and (max-width: 1280px){
    #header h1.grid_4{order: 1;width: 100%!important; margin-bottom: 20px;}
    #header h1 img{vertical-align: middle}
    #header ul.grid_4{width: 50%!important;order: 2;}
    #header ul .font_18{font-size: 14px;}
    #contents_links .grid_4 a div p{padding: 0px 10px;}
}

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

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
/*----- common -----*/
    #header h1.grid_4{width: 50%!important; margin-bottom: 0px;}
    #header h1 img{vertical-align: middle}
    #footer #footer_txt{margin-bottom: 20px;}
    #footer_txt >div{transform: translate(0);}
    
    #menu_bt{top: 30px;right: 40px;width: 60px;height: 60px;z-index: 9;border: 3px solid #fff;}
    #menu_bt span,#menu_bt span::before,#menu_bt span::after{width: 40px;height: 2px;background-color: #fff;transition: ease 0.3s;}
    #menu_bt span::before,#menu_bt span::after{content: "";position: absolute;}
    #menu_bt span::before{top: -10px;}
    #menu_bt span::after{top: 10px;}
    #menu_bt.active{transform: rotate(-45deg)}
    #menu_bt.active span::before,#menu_bt.active span::after{top: 0px;transform: rotate(90deg)}
    #menu_bt.active span::after{opacity: 0;}
    .point_none{pointer-events: none;}
    
    #menu_wrap{position: fixed;top: 0;left: 100%;width: 70%;height: 100%;transition: ease 0.3s;box-sizing: border-box;z-index: 5;overflow: auto;border-radius: 1000px 0 0 1000px;}
    #menu_wrap.active{
        animation-name: menu_action;
        animation-duration: 0.8s;
        animation-timing-function: ease;
        animation-fill-mode: forwards;
    }
    #menu_wrap ul.menu_li{position: relative;z-index: 2;padding-top: 70px;}
    #menu_wrap ul.sns_link{position: relative;z-index: 2;padding-top: 30px;}
    #menu_wrap > div{min-height: 100vh;box-sizing: border-box;padding: 5%;}
    #menu_wrap > div > div{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;}
/*----- index -----*/
#main_img figure{max-height: 500px;}
#main_img .border_wrap{max-height: 460px;}
/*----- other -----*/
#page_title{height: 200px;}
    .cate_list{padding-left: 0;}
    .cate_list li{
        box-sizing: border-box;
        width: 100%;
        margin-right: 0;
    }
    .cate_list .cate_list_title{
        position: static;
        margin-bottom: 10px;
    }

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
/*----- common -----*/
    #wrap{border:5px solid #fff;padding: 10px;padding-bottom: 0;}
    #map iframe{width: 100%;height: 300px;}
    #footer #footer_txt{margin-bottom: 10px;}
    #menu_bt{top: 10px;right: 15px;width: 45px;height: 45px;z-index: 9;border: 3px solid #fff;}
    #menu_bt span,#menu_bt span::before,#menu_bt span::after{width: 28px;height: 2px;background-color: #fff;transition: ease 0.3s;}
    #menu_wrap{position: fixed;top: 0;left: 100%;width: 100%;height: 100%;transition: ease 0.3s;padding: 5px 5px 0;border-bottom: 5px solid transparent;}
    #menu_wrap.active{
        animation-name: menu_action2;
        animation-duration: 0.5s;
    }
    #menu_wrap > div{padding-bottom: 30px;}

/*----- index -----*/
#main_img figure{max-height: 300px;}
#main_img .border_wrap{max-height: 260px;}    
.border_dash1,.border_dash2 {
    width: 100%;
    height: 2px;
}
.border_dash3,.border_dash4 {
    width: 2px;
    height: 100%;
}
#intro img{border:5px solid #fff;box-shadow: 7px 7px 14px rgba(0,0,0,0.1);box-sizing: border-box;}
#contents_links .grid_4 a h3{font-size: 14px;}
#contents_links .grid_4 a div p{top: 75%;}
#top_cms .top_cms_box .top_cms_title {transform: translateY(10px);}
#top_cms .top_cms_box .cms_wrap{padding: 30px 10px 50px;}
/*----- other -----*/
#page_title{height: 160px;}
.pager li:not(.prev){display: none;}

#info .box h3{padding-bottom: 0;}
#info .box p{padding-top: 0;}

#sitemap ul li{border-radius: 100px;}
#sitemap ul li a{padding: 10px 10px 15px;background-color: transparent;}
#sitemap ul li a span{color: #fff;}

}