@charset "utf-8";
/* CSS Document */
/*----- common -----*/
body{
    background-color: #fffaf4;
    color: #666;
    width: 100%;
    overflow: hidden;
}
header{
    padding: 20px 100px;
}
#loader{
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 9999;
}
#loader .logo img{
	animation-name: loader;
	animation-duration: 1.8s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
.sns_links li{
    display: block;
    width: 40px;
    overflow: hidden;
    margin-left: 25px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    transition: ease 0.3s;
}
header .sns_links li:hover{transform: translateY(-5px);}
#main_menu{}
#main_menu .logo,#sc_menu .logo{text-align: center;}
#main_menu .logo img,#sc_menu .logo img{max-width: 300px;}
#main_menu li,#sc_menu li{text-align: center;}
#main_menu li span,#sc_menu li span{display: block;font-weight: bold;}
#main_menu li:hover,#main_menu li.on,#sc_menu li:hover,#sc_menu li.on{transform: translateY(-10px);border-radius: 0 0 10px 10px;}
#main_menu li span.jp,#sc_menu li span.jp{font-size: 16px;}
#main_menu li span.en,#sc_menu li span.en{font-size: 12px;}
#footer_contents{background-position: center center;background-size: cover;position: relative;}
#footer_contents > div{position: relative;z-index: 2;}
#footer_contents::after{content: "";background-color: rgba(255,255,255,0.3);width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;}
#footer_contents a{box-shadow: 5px 5px 10px rgba(0,0,0,0.2);}
#footer_contents a h3{text-shadow: 0px 3px 0 rgba(255,255,255,1)}
#footer_contents a figure img{transition: all 0.5s;}
#footer_contents a:hover figure img{transform: translate(-50%,-50%) scale(1.1);}
#footer_contents .more{max-width: 300px;border-radius: 100px;margin: 0 auto;padding: 15px;box-sizing: border-box;transform: translateY(-20px);box-shadow: 5px 5px 20px rgba(0,0,0,0.1);}
#footer #map{position: relative;overflow: hidden;}
#footer #map iframe{width: 100%;height: 400px;margin: 0 auto;}
#footer #time {max-width: 600px;margin: 0 auto;font-weight: bold;}
#footer #time .d_flex div{box-sizing: border-box;width: 10%;border-right-style: solid;border-right-width: 2px;padding-top: 10px;padding-bottom: 10px;}
#footer #time .d_flex div:first-of-type{width: 30%}
#footer #time .d_flex div:last-of-type{border-right-width: 0;}
#footer #time .d_flex:first-of-type div{border-bottom-style: solid;border-bottom-width: 2px;}
#footer #time .d_flex:last-of-type div{border-top-style: solid;border-top-width: 2px;}

#sc_menu{position: fixed;top: 0;width: 100%;z-index: 99;transform: translateY(-100%);transition: all 0.5s;box-shadow: 0 5px 10px rgba(0,0,0,0.2);}
#sc_menu.active{transform: translateY(0);}
#sp_nav{position: fixed;width: 100%;top: 0;left: 0;z-index: 999;box-sizing: border-box;box-shadow: 0 5px 10px rgba(0,0,0,0.1);}
#sp_nav .menu_bt{width: 50px;height: 50px;display: inline-block;position: absolute;top: 50%;transform: translate(-20px,-50%);right: 0;}
#sp_nav .menu_bt.point_none{pointer-events: none;}
#sp_nav .menu_bt span,#sp_nav .menu_bt span::before,#sp_nav .menu_bt span::after{
    background-color: #fff;
    width: 50px;
    height: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all 0.3s;
}
#sp_nav .menu_bt span::before{
    content: "";
    top: -300%;
}
#sp_nav .menu_bt span::after{
    content: "";
    top: 400%;
}
#sp_nav .menu_bt.active span{opacity: 1!important;background-color: transparent}
#sp_nav .menu_bt.active span::before{width: 80%;transform: translate(-30px,-50%) rotate(45deg)!important;top: 0;}
#sp_nav .menu_bt.active span::after{width: 80%;transform: translate(-30px,-50%) rotate(-45deg)!important;top: 0;}
#main_nav{
	display: none;
	opacity: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	padding: 50px;
	box-sizing: border-box;
	overflow: auto;
	animation-name: navanime2;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
	z-index: 996;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    justify-content: flex-start;
    align-items: center;
	flex-direction: row;
}
#main_nav.active{
	animation-name: navanime;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
#main_nav .nav li{text-align: center;padding-top: 20px; padding-bottom: 20px;border-bottom: 1px solid rgba(255,255,255,0.5);}
#main_nav .nav li:nth-of-type(odd){padding-left: 20px;border-right: 1px solid rgba(255,255,255,0.5);}
#main_nav .nav li:nth-of-type(1),#main_nav .nav li:nth-of-type(2){border-top: 1px solid rgba(255,255,255,0.5);}

#main_nav .nav li a span{font-weight: bold;display: block;font-size: 20px;}
#main_nav .nav li a span.en{font-size: 14px;}

#page-top{position: fixed;width: 50px;height: 50px;right: 0;bottom: 0;z-index: 99;border-radius: 10px 0 0 0;cursor: pointer;font-size: 20px;transform: translateY(10px);}
/*----- index -----*/
#main_img{width: 100%;overflow: hidden;}
.slick-slider .slick-list{width: 100%; max-width: 900px;margin: 20px auto;overflow:visible;box-sizing: border-box;}
.slick-slider .slick-list figure{margin: 0 25px;box-shadow: 10px 10px 0;border-color: #fff;}
#main_img .slick-arrow{display: none!important;}
#main_img .slick-dots{
	display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    justify-content: flex-end;
    align-items: center;
	flex-direction: row;
    width: 90%;
    margin: 0 auto;
    padding-top: 20px;
}
#main_img .slick-dots li{width: 30px;height: 30px;position: relative;border-radius: 50%;margin-left: 20px;transition: all 0.3s;cursor: pointer;opacity: 0.7;}
#main_img .slick-dots button{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border: none;background-color: transparent;color: #fff;cursor: pointer;font-weight: bold;letter-spacing: 0px;}
#main_img .slick-dots li:hover,#main_img .slick-dots li.slick-active{transform: translateY(-3px);box-shadow: 3px 3px 6px rgba(0,0,0,0.2);opacity: 1;}
#main_img .slick-dots button:focus,#main_img .slick-dots li:active{border: none;outline: none;}
#intro h2{text-shadow: 5px 5px 10px rgba(0,0,0,0.1);position: relative;}
#intro h2 span{position: absolute;width: 60%;height: 10px;top:100%;left: 50%;transform: translateX(-50%) skewX(-45deg);}
#contents1,#contents2,#contents3{position: relative;}
#contents2 > .d_flex{flex-flow: row-reverse wrap;}
#contents1 figure,#contents2 figure,#contents3 figure{
    position: relative;
    z-index: 2;
}
#contents1 figure img,#contents2 figure img,#contents3 figure img{box-shadow: 5px 5px 20px rgba(0,0,0,0.1);}
#contents1 div.grid_6,#contents3 div.grid_6{
    position: relative;
    z-index: 1;
    transform: translate(-100px,150px);
    padding: 50px 50px 50px 100px;
}
#contents2 div.grid_6{
    position: relative;
    z-index: 1;
    transform: translate(100px,150px);
    padding: 50px 100px 50px 50px;
}
#contents1 > .bg_color,#contents3 > .bg_color{position: absolute;width: 80%;height: 100%; top: 100px;right: 0;border-radius: 10px 0 0 10px;}
#contents2 > .bg_color{position: absolute;width: 80%;height: 100%; top: 100px;left: 0;border-radius: 0 10px 10px 0;}
#contents1 .more a,#contents2 .more a,#contents3 .more a,#top_cms  .more a{border-radius: 50px;padding: 15px 30px;transition: all 0.3s;font-weight: bold;border-width: 2px 2px 6px 2px;}
#contents1 .more a:hover,#contents2 .more a:hover,#contents3 .more a:hover,#top_cms  .more a:hover{border-width: 2px 2px 2px 2px;}
#contents1 .more a:hover i,#contents2 .more a:hover i,#contents3 .more a:hover i,#top_cms  .more a:hover i{transform: translateX(10px)}
#top_cms .top_cms_title{border-style: dotted;border-width: 8px;border-top: none;border-left: none;border-right: none;}
/*----- other page -----*/
#page_title p{position: relative;}
#page_title p::after{
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid #fff;
    position: absolute;
    border-radius: 10px;
    top: -1px;
    left: -1px;
    transition: ease 0.5s;
}
#page_title.active p::after{
    top: 10px;
    left: 10px;
}
.pager{justify-content: flex-end!important;}
.pager li {transition: all 0.3s;margin-right: 0!important;overflow: hidden;}
.pager li:first-of-type{border-radius: 10px 0 0 10px;}
.pager li:last-of-type{border-radius: 0 10px 10px 0;}
.pager li a{padding: 5px 10px;transition: all 0.3s;display: block;position: relative;overflow: hidden;width: 80px;height: 50px;}
.cate_list li{margin: 20px;margin-left: 0;}
.cate_list a{padding: 10px 20px;}
.cate_list a:hover i{transform: translateX(10px)}
.cate_list a{border-radius: 100px;padding: 15px 30px;transition: all 0.3s;border-width: 2px 2px 6px 2px;font-weight: bold;}
.cate_list a:hover{border-width: 2px 2px 2px 2px;}

#page7 .info_wrap .info_box{margin-bottom: 30px;}
#page7 .info_wrap .info_box:last-of-type{margin-bottom: 0px;}
#page7 .info_wrap .info_box h3{padding: 20px;position: relative;z-index: 2;box-shadow: 0 0 10px rgba(0,0,0,0.2);}
#page7 .info_wrap .info_box p{padding: 80px 20px 40px;transform: translate(50px,-50px);position: relative;z-index: 1;}

#page8 .contact_wrap input{border-radius: 50px;padding: 10px;}
#page8 .contact_wrap textarea{border-radius: 10px;padding: 10px;}
#page8 .contact_wrap input[type="submit"]{border-radius: 50px;padding: 15px 30px;transition: all 0.3s;border-width: 2px 2px 6px 2px;font-weight: bold;cursor: pointer;}
#page8 .contact_wrap input[type="submit"]:hover{border-width: 2px 2px 2px 2px;margin-bottom: 4px;}
#page8 #form_area > div,#page8 #form_area > p{width:100%;text-align:center;}
#page8 #form_area .disable{opacity:0.6}

#page9 .privacy_wrap .privacy_box h3{border-radius: 50px;padding-left: 40px;}

#page10 ul{box-sizing: border-box;}
#page10 ul li span{display: block;}
#page10 ul li span.jp{font-size: 18px;}
#page10 ul li span.en{font-size: 14px;}
#page10 ul li a:hover{transform: translateY(-10px);box-shadow: 0 0 10px rgba(0,0,0,0.2);border-radius: 10px;}

/*----- animation -----*/
.sc_anime.top_anime.active{
	animation-name: fadein;
	animation-duration: 1.3s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
.sc_anime.left_anime.active{
	animation-name: leftin;
	animation-duration: 1.3s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
.sc_anime.right_anime.active{
	animation-name: rightin;
	animation-duration: 1.3s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
.sc_anime.bgleft_anime.active{
	animation-name: bgleftin;
	animation-duration: 1.3s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
.sc_anime.bgright_anime.active{
	animation-name: bgrightin;
	animation-duration: 1.3s;
	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 bgleftin {
	0% {opacity:0;transform: translate(-300px,0);}
	100% {opacity:1;transform: translate(0,0);}
}
@keyframes bgrightin {
	0% {opacity:0;transform: translate(300px,0);}
	100% {opacity:1;transform: translate(0,0);}
}

@keyframes loader {
	0% {opacity:0;transform: scale(0.8);}
	50% {opacity:1;transform: scale(1);}
	100% {opacity:0;transform: scale(1.2);}
}
@keyframes navanime {
	0% {opacity:0;transform: scale(0.8);}
	100% {opacity:1;transform: scale(1);}
}
@keyframes navanime2 {
	0% {opacity:1;transform: scale(1);}
	100% {opacity:0;transform: scale(0.8);}
}

/* ---------- PC 1280px~ ---------- */
@media screen and (max-width: 1280px){
header{
    padding: 20px 50px;
}
}

/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
   #main_img .slick-dots button{padding-top:1px;}
    #contents1 .more a, #contents2 .more a, #contents3 .more a, #top_cms .more a,.cate_list a,#footer_contents .more{padding-bottom: 9px}
    #footer_menu{padding-bottom: 40px;}
    #footer #time .d_flex div{padding-bottom: 4px;}
    #copyright{padding-top: 17px;}
    #page_title p{padding-bottom: 15px;}
    .pager li a span{padding-top: 7px;}
    #page7 .info_wrap .info_box h3{padding-bottom: 15px;}
    #page7 .info_wrap .info_box p{padding-bottom: 27px;}
    #page8 input.width_300{margin: 0;}
    #page9 .privacy_wrap .privacy_box h3{padding-bottom: 4px;}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
footer .sns_links li{
    width: 60px;
}
#page-top{position: fixed;width: 40px;height: 40px;right: 0;bottom: 0;z-index: 99;border-radius: 10px 0 0 0;cursor: pointer;font-size: 16px;}

/*----- index -----*/
#contents1 figure img,#contents2 figure img,#contents3 figure img{box-shadow: 5px 5px 20px rgba(0,0,0,0.1);}
#contents1 div.grid_6,#contents3 div.grid_6{
    transform: translate(-20px,-100px);
    padding: 120px 30px 50px 30px;
}
#contents2 div.grid_6{
    transform: translate(20px,-100px);
    padding: 120px 30px 50px 30px;
}
#contents1 > .bg_color,#contents2 > .bg_color,#contents3 > .bg_color{;width: 90%;height: 90%;}
#page7 .info_wrap .info_box p{padding: 50px 20px 20px;transform: translate(30px,-30px);position: relative;z-index: 1;}
#page10 ul li span.jp{font-size: 16px;}
#page10 ul li span.en{font-size: 12px;}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
header{
    padding: 10px 10px;
}
footer .sns_links li{width: 50px;margin: 0;}
#footer #map{position: relative;overflow: hidden;min-height: 300px;}
#sp_nav .menu_bt{width: 30px;transform: translate(-20px,-50%);}
#sp_nav .menu_bt span,#sp_nav .menu_bt span::before,#sp_nav .menu_bt span::after{
    background-color: #fff;
    width: 30px;
    height: 3px;
}
#main_nav{padding: 50px 0;}
#main_nav .nav li a span{font-weight: bold;display: block;font-size: 14px;}
#main_nav .nav li a span.en{font-size: 10px;}
#page-top{position: fixed;width: 40px;height: 40px;right: 0;bottom: 0;z-index: 99;border-radius: 10px 0 0 0;cursor: pointer;}

/*----- index -----*/
#contents1 figure img,#contents2 figure img,#contents3 figure img{box-shadow: 5px 5px 20px rgba(0,0,0,0.1);}
#contents1 div.grid_6,#contents3 div.grid_6{
    transform: translate(30px,-50px);
    padding: 80px 50px 50px 20px;
}
#contents2 div.grid_6{
    transform: translate(-30px,-50px);
    padding: 80px 20px 50px 50px;
}
#contents1 > .bg_color,#contents2 > .bg_color,#contents3 > .bg_color{top: 50px;width: 80%;height: 95%;}
#page_title p::after{
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid #fff;
    position: absolute;
    top: 5px;
    left: 5px;
    border-radius: 10px;
}
.pager{justify-content: center!important;}
.pager li:not(.prev) {display: none;}
.pager li:first-of-type{margin-right: 10px!important;}
#page7 .info_wrap .info_box{margin-bottom: 30px;}
#page7 .info_wrap .info_box h3{padding: 10px;position: relative;z-index: 2;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
#page7 .info_wrap .info_box p{padding: 40px 10px 20px;transform: translate(10px,-30px);position: relative;z-index: 1;}
#page10 ul{border: none;}
#page10 ul li{margin-bottom: 30px;}
#page10 ul li a{border-radius: 100px;padding: 10px;}
#page10 ul li span.jp{font-size: 16px;}
#page10 ul li span.en{font-size: 10px;}

/*----- animation -----*/    
.sc_anime.top_anime.active,.sc_anime.left_anime.active,.sc_anime.right_anime.active,.sc_anime.bgleft_anime.active,.sc_anime.bgright_anime.active{animation-duration: 0.8s;}

}