@charset "utf-8";
/* CSS Document */

/*----- common -----*/
body{width: 100%;overflow: hidden;}

header.top_header{
	position: absolute;
	height: 100vh;
	width:100%;
	top:0;
	left: 0;
}
#header h1{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 999;
	padding: 20px;
}
#header h1.active{
	top: 20px;
	left: 20px;
	transform: translate(0,0) rotate(0.1deg);
	padding: 10px;
	transition:  1.5s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#header h1 span{
	display: inline-block;
	border: 2px solid #fff;
	padding: 20px;
}
#header h1 img{
	max-width: 300px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#header h1.active img{
	max-width: 180px;
    transition: ease 1.5s;
}
footer .logo{text-align: center;}
footer .logo img{max-width:250px;}
#loader{
	position: fixed;
	width: 100%;height: 100%;
	background-image: url("../img/design_bg1.png");
	background-position: center top;
	background-size: 10% auto;
	z-index: 998;
}
#map{overflow: hidden;height: 500px;}
#map iframe{width: 100%;height: 500px;}
#copyright{padding: 10px;}
.menu_bt{
	position: fixed;
	width:80px;
	height: 80px;
	top: 20px;
	right: 20px;
	cursor: pointer;
	z-index: 997;
}
.menu_bt.point_none{pointer-events: none;}
.menu_bt >div{
	width: 60px;
}
.menu_bt span{
	background-color: #fff;
	display: block;
	height: 2px;
	margin-bottom: 15px;
	transition: 0.3s;
}
.menu_bt span:nth-of-type(1){width: 60%;}
.menu_bt span:nth-of-type(2){width: 80%;}
.menu_bt span:nth-of-type(3){width: 100%;margin-bottom: 0;}
.menu_bt.active > div {transform: translate(-40%,-80%)}
.menu_bt.active span:nth-of-type(1){opacity: 0!important;}
.menu_bt.active span:nth-of-type(2){width: 80%;transform: translate(0,-50%) rotate(45deg)!important;position: absolute;}
.menu_bt.active span:nth-of-type(3){width: 80%;transform: translate(0,-50%) rotate(-45deg)!important;position: absolute;}

.menu_bt:hover span{width: 100%;}
#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: fadeout;
	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;
	background-image: url("../img/design_bg1.png");
	background-position: center top;
	background-size: 10% auto;
}
#main_nav.active{
	animation-name: navanime;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
#main_nav .d_flex{flex-flow: row-reverse wrap;align-items:flex-start;}
#main_nav .nav li{text-align: center;margin-bottom: 20px;}
#main_nav .nav li a{font-weight: bold;font-size: 20px;text-shadow: 0 0 15px rgba(0,0,0,0.3);transition: all 0.3s;display: inline-block;text-align: left;}
#main_nav .nav li a:hover{transform: translateY(-5px);text-shadow: 3px 3px 0px rgba(0,0,0,0.1);}
#sns_links{padding: 20px;}
#sns_links li{margin: 0 20px;}
#sns_links li a{transition: 0.3s;opacity: 0.5;max-width: 30px;display: inline-block;}
#sns_links li a:hover{opacity: 1;}
#page-top{position: fixed;right: 20px;width: 40px;height: 40px;transform: translateY(-20px);border-radius: 50%;cursor: pointer;z-index: 999;}   

/*----- 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;
    padding: 20px;
    overflow: hidden;
    box-sizing: border-box;
}
#main_img .logo{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
	transition: ease 1.5s;
}
#main_img #slide_wrap .down{
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 20px;
    height: 60px;
    animation: scdown 3s linear 0s infinite normal forwards;  
}
#main_img #slide_wrap .down img{
    width: 100%;
    height: 100%;
}
#main_img .logo span{
	display: inline-block;
	border: 2px solid #fff;
	padding: 20px;
}
#main_img .logo img{
	max-width: 300px;
	transition: 1s;
}
#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;  
}
#intro,#top_cms .top_cms_box .top_cms_title{
	background-image: url("../img/design_bg1.png");
	background-position: center top;
	background-size: 10% auto;
}
#contents1 h2{max-height: 500px;}
#contents1 p{max-height: 300px;}
#contents1 p .txt_vertical{max-height: 300px;}
#contents2{min-height: 80vh;background-position: center center;background-size: cover;}
#contents2 .txt_vertical{max-height: 500px;}
#contents2::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.50);
	z-index: 1;
}
#contents2 .d_flex{flex-flow: row-reverse wrap;align-items:flex-start;}
#contents2 div{z-index: 2;position:relative;}
#contents2 p{max-height: 500px;}
#contents3::after{
	content: "";
	width: 100%;
	height: 40%;
	background-color: white;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
#contents3 > div{position: relative;z-index: 2;}
#contents3 .d_flex{align-items:flex-start;}
#top_cms .more a img{width: 60px;height: 15px;vertical-align: baseline;padding-left: 15px;transition: 0.3s;}
#top_cms .more a:hover img{transform: translateX(10px)}
#page-top{z-index: 995;}
/*----- other page -----*/
#page_title{
    width: 100%;
    min-height: 60vh;
	background-image: url("../img/design_bg1.png");
	background-position: center top;
	background-size: 10% auto;
}
#page_title >div{width: 100%;}
#page_title::after{display: block;content: "";min-height: 60vh;}
.pager li {margin: 0 20px;opacity: 0.7;transition: all 0.3s;}
.pager li a{padding: 5px 10px; opacity: 0.7;transition: all 0.3s;display: block;position: relative;overflow: hidden;}
.pager li a::after{content: "";width: 100%;height: 1px;border-bottom: 1px solid;bottom: 0;right: 100%;box-sizing: border-box;position: absolute;transition: all 0.5s;}
.pager li a:hover {opacity: 1;}
.pager li a:hover::after {right: 0;}
.cate_list li{margin: 20px;margin-left: 0;}
.cate_list a{padding: 10px 20px;}
.cate_list a img{width: 40px;height: 10px;vertical-align: baseline;padding-left: 20px;transition: 0.3s;}
.cate_list a:hover img{transform: translateX(10px)}
/* page7 */
/* #page7 > .d_flex{flex-flow: row-reverse wrap;align-items:flex-start;} */
#page8 .tel_box{
	background-image: url("../img/design_bg1.png");
	background-position: center top;
	background-size: 10% auto;
}
#page8 .tel_box a{transition: all 0.3s;}
#page8 .tel_box a:hover{transform: translateY(-10px);}
#page8 #bt_wrap input{cursor: pointer;}
#page9 a img{width: 60px;height: 15px;vertical-align: baseline;padding-left: 10px;transition: 0.3s;}
#page9 a:hover img{transform: translateX(10px)}
#page10 .d_flex{flex-flow: row-reverse wrap;align-items:flex-start;}
#page10 ul li a{transition: all 0.3s;}
#page10 ul li a:hover{transform: translateY(-5px)}
#page10 ul li a span{top:0;left: 100%;transition: all 0.3s;}
#page10 ul li a:hover span{opacity: 1;}
/*----- animation -----*/
.sc_anime.top_anime.active{
	animation-name: fadein;
	animation-duration: 1.8s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
.sc_anime.left_anime.active{
	animation-name: leftin;
	animation-duration: 1.8s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
.sc_anime.right_anime.active{
	animation-name: rightin;
	animation-duration: 1.8s;
	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(-60px,100px);}
	100% {opacity:1;transform: translate(0,0);}
}
@keyframes rightin {
	0% {opacity:0;transform: translate(60px,100px);}
	100% {opacity:1;transform: translate(0,0);}
}
@keyframes fadeout {
	0% {opacity:1;transform: translateY(0px);}
	100% {opacity:0;transform: translateY(50px);display: none;}
}
@keyframes scdown {
	0% {transform: translateY(0px);}
	70% {transform: translateY(20px);}
	100% {transform: translateY(0px);}
}
@keyframes zoomUp {
  0% {
    transform: translate(-50%,-50%) scale(1);
    /*-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);*/
  }
    /*20% {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    }
    70% {
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
    }*/
  80% {
    transform: translate(-50%,-50%) scale(1.05);
  }
}
@keyframes zoomDown {
  0% {
    transform: translate(-50%,-50%) scale(1.08);
    /*-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);*/
  }
    /*20% {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    }
    60% {
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
    }*/
  85% {
    transform: translate(-50%,-50%) scale(1);
  }
}
@keyframes navanime {
	0% {opacity:0;transform: translateX(40%);}
	100% {opacity:1;transform: translateX(0);}
}

/* ---------- PC 1280px~ ---------- */
@media screen and (max-width: 1280px){
}

/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
    #top_cms .more a{padding-bottom: 5px;}
    #footer_menu .d_flex{padding-top: 13px;}
    #copyright{padding: 21px 10px 15px;}
    .cate_list a{padding-top: 16px;}
    #page8 .tel_box a{padding-top:30px;}
    #page8 .width_200{padding-bottom: 15px;}
    #page9 a{padding-bottom:0px;}
    #page_title h2{padding-right: 18px;}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#main_img .logo{padding: 10px;}
#main_img .logo img{max-width: 200px;}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#header h1{
	padding: 5px;
}
#header h1.active{
	top: 10px;
	left: 10px;
	transform: translate(0,0);
	padding: 5px;
}
#header h1 span{
	display: inline-block;
	border: 1px solid #fff;
	padding: 10px;
}
#header h1 img{
	max-width: 180px;
	transition: 1s;
}
#header h1.active img{
	max-width: 100px;
}
    footer .logo img{max-width: 180px;}
#loader,#main_nav{
    background-size: 20% auto;
}
.menu_bt{
	position: fixed;
	width:60px;
	height: 60px;
	top: 10px;
	right: 10px;
}
.menu_bt >div{
	width: 45px;
}
.menu_bt span{
	margin-bottom: 10px;
}
#main_nav{padding: 110px 50px 50px}
#main_nav .nav li a{font-size: 14px;}
#sns_links{padding: 0;}
#sns_links li{margin: 20px 0;width: 20%;text-align: center;}
#sns_links li a{opacity: 1;}
#page-top{right: 10px;}
#copyright{padding: 15px 5px;font-size:11px;}
footer .tel a{font-size:18px;}
/* index */
#main_img{
	width: 100%;
	height: 70vh;
	overflow: hidden;
	position: relative;
    box-sizing: border-box;
}

#main_img .logo{
	padding: 5px;
}
#main_img .logo span{
	display: inline-block;
	border: 1px solid #fff;
	padding: 10px;
}
#main_img .logo img{
	max-width: 180px;
}
#main_img #slide_wrap{
    padding: 10px;
}
#intro,#top_cms .top_cms_box .top_cms_title{
    background-size: 20% auto;
}
#contents1 p,#contents2 p{max-height: 100%;}
#contents3::after{
	height: 50%;
}

/*----- other page -----*/
#page_title h3{letter-spacing: 0;}
.pager li:not(.prev) {display: none;}
.pager li {margin: 0;}
.pager li a {opacity: 1;}
#page9 a img{width: 30px;height: 8px;}
#page10 ul li{margin-bottom: 25px;padding-bottom: 25px;}
#page10 ul li a:hover{transform: translateY(0)}
#page10 ul li a span{top:100%;left: 10px;transform: translateY(-10px)}
#page10 ul li a:hover span{opacity: 1;}

.sc_anime.top_anime.active{
	animation-duration: 1.2s;
}
.sc_anime.left_anime.active{
	animation-duration: 1.2s;
}
.sc_anime.right_anime.active{
	animation-duration: 1.2s;
}
}