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

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap');

/*----- common -----*/
body{
	background-image: url(../Dup/img/design_bg1.png);
	background-position: center top;
	background-repeat: repeat;
	background-size: 5% auto;
}
#wrap #header_nav ul{border-radius: 50px;}
#wrap #header_nav ul li a{display: block;}
#wrap #header_nav ul li a:hover{transform: translateY(-3px);letter-spacing: 2px;}

footer #footer .tel a{border-radius:50px;box-shadow: 0 0 30px rgba(0,0,0,0.2);transition: ease 0.3s;}
footer #footer .tel a:hover{transform: translateY(-10px);}
#page_top{position: absolute;top: 0;left: 50%;padding-top: 50px;transform: translateX(-50%);cursor: pointer;transition: ease 0.3s;}
#page_top:hover{letter-spacing: 5px;}
#page_top::before{content: "";position: absolute;background-color: #fff; width: 2px;height: 50px;top: 0;left: 50%;transform: translateX(-50%);}
.sns_links li{max-width: 55px;margin: 0 20px;box-shadow: 0 0 30px rgba(0,0,0,0.2);width: 10%;transition: all 0.3s;border-color: #fff;}
.sns_links li:hover{transform: translateY(-5px);}
.sc_nav.tb_hide{
	position: fixed;
	top: 0;
	width: 100%;
	transform: translateY(-100%);
	transition: 0.5s;
	box-sizing: border-box;
	z-index: 9998;
}
.sc_nav.tb_hide.active{transform: translateY(0);}
.sc_nav .nav_bt{
	width: 60px;
	height: 60px;
	border-radius: 10%;
	position: relative;
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
	cursor: pointer;
}
.sc_nav .nav_bt.point_none{pointer-events: none;}
.sc_nav .nav_bt span{
	position: absolute;
	width: 30px;
	height: 3px;
	top: 50%;
	left: 50%;
	transition: ease 0.3s;
}
.sc_nav .nav_bt span:nth-of-type(1){transform: translate(-50%,-50%);}
.sc_nav .nav_bt span:nth-of-type(2){transform: translate(-50%,-350%);}
.sc_nav .nav_bt span:nth-of-type(3){transform: translate(-50%,250%);}
.sc_nav .nav_bt.active span:nth-of-type(1){opacity: 0!important;}
.sc_nav .nav_bt.active span:nth-of-type(2){transform: translate(-50%,-50%) rotate(45deg)!important;}
.sc_nav .nav_bt.active span:nth-of-type(3){transform: translate(-50%,-50%) rotate(-45deg)!important;}
#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: 999;
    -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: fadein;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
#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);}
#page08_link{
	position: fixed;
	width: 300px;
	bottom: 20px;
	right: 0;
	box-sizing: border-box;
	z-index: 99;
}
#page08_link a{border-radius: 10px 0 0 10px;transition: all 0.5s;box-shadow: 0 0 15px rgba(0,0,0,0.2);transform: translateX(200px);padding: 20px 0;}
#page08_link a:hover{transform: translateX(0px)}
#page08_link a figure{width: 60px;padding: 0 20px ;}
#page08_link a p{width: 200px;}
#loader{
	position:fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 9999;
}
#loader > div{
	width: 50%;
	height: 100%;
	position: absolute;
	top:0;
	overflow: hidden;
}
#loader > div figure{
	width: 50%;
	position: absolute;
	top: 50%;
}
#loader > div p{
	width: auto;
	position: absolute;
	top: 50%;
	font-size: 36px;
	letter-spacing: 8px;
	text-shadow: 0 0 15px rgba(0,0,0,0.2);
	text-align: center;
}
#loader .load_left{right: 50%;}
#loader .load_left figure{right: 0;transform: translate(50%,-50%);}
#loader .load_left p{right: 0;transform: translate(50%,-50%);}
#loader .load_right{left: 50%;}
#loader .load_right figure{left: 0;transform: translate(-50%,-50%);}
#loader .load_right p{left: 0;transform: translate(-50%,-50%);}
#map iframe{width:100%;height: 500px;}


/*----- index -----*/
#main_img{padding: 0 30px;}
#main_img > div{border-radius: 30px;overflow: hidden;box-shadow: 0 0 30px rgba(0,0,0,0.2);}
#main_img .rectangle_img{transition: 0.5s;}
#intro_title{transform: translateY(40px);}
#intro #intro_txt.sc_anime.active{animation-delay: 0.5s;}
#contents1 img, #contents2 img {
    border-radius: 20px;
    box-shadow: 0 0 15px rgb(0 0 0 / 0%);
}
#contents1,#top_cms .bg_color2{
	background-image: url(../Dup/img/design_bg2.png);
	background-position: center top;
	background-repeat: repeat;
	background-size: 5% auto;
}
#contents2 .con_box .number{font-family:'Roboto Mono', cursive; font-size: 100px;bottom: 90%;left: 0;line-height: 1;text-shadow:  0 0 15px rgba(0,0,0,0.2);font-weight: bold;}

#top_cms .more a {
    border-radius: 50px;
}
#top_cms .more a:hover{transform: translateY(-5px);box-shadow: 0 0 15px rgba(0,0,0,0.2);}



/*----- other page -----*/
#page_title h2{text-shadow:  0 0 15px rgba(0,0,0,0.2);}
.pager li{margin-right: 20px;}
.pager li:last-of-type{margin-right: 0;}
.pager li a{min-width:70px;min-height:70px;}
.pager li a:hover{transform: translateY(-5px);box-shadow: 0 0 15px rgba(0,0,0,0.2);}
.cate_list li{margin-right: 20px;margin-bottom: 20px;}
.cate_list li:last-of-type{margin-right: 0;}
.cate_list li a{padding: 10px 20px;border-radius: 100px;}
.cate_list li a:hover{transform: translateY(-5px);box-shadow: 0 0 15px rgba(0,0,0,0.2);}

#page07 .info_box:first-of-type{padding-top: 0;}
#page07 .info_box:last-of-type{border-bottom: none;}

#page08 .contact_box input,#page08 .contact_box textarea{border-color:#ccc;}
#page08 .contact_box input[type="submit"]{border-radius: 10px;border:none;cursor: pointer;letter-spacing: 4px;}
#page08 .contact_box input[type="submit"]:hover{transform: translateY(-5px);box-shadow: 0 0 15px rgba(0,0,0,0.2);}
#page08 .contact_box input::-webkit-input-placeholder,#page08 .contact_box textarea::-webkit-input-placeholder,#page08 .contact_box button::-webkit-input-placeholder{
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	font-size: 14px;
	opacity: 0.8;
}
#page08 .contact_box input::-moz-placeholder,#page08 .contact_box textarea::-moz-placeholder,#page08 .contact_box button::-moz-placeholder{
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	font-size: 14px;
	opacity: 0.8;
}
#page08 .contact_box input:-ms-input-placeholder,#page08 .contact_box textarea:-ms-input-placeholder,#page08 .contact_box button:-ms-input-placeholder {
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	font-size: 14px;
}

#page10 .sitemap_wrap li a{padding: 10px 20px;border-radius: 100px;display: block;text-align: center;}
#page10 .sitemap_wrap li a:hover{transform: translateY(-5px);box-shadow: 0 0 15px rgba(0,0,0,0.2);}
#page10 .sitemap_wrap li a span{text-align: left;display: inline-block;}

/*----- animation -----*/
.sc_anime.active{
	animation-name: fadein;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}

@keyframes fadein {
	0% {opacity:0;transform: translateY(50px);}
	100% {opacity:1;transform: translateY(0px);}
}
@keyframes fadeout {
	0% {opacity:1;transform: translateY(0px);}
	100% {opacity:0;transform: translateY(50px);display: none;}
}

/* ---------- PC 1280px~ ---------- */
@media screen and (max-width: 1280px){
/*----- common -----*/
	#header_nav{font-size: 15px;}
}



/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
#page08_link a p{padding-top: 7px;}
#wrap #header_nav ul{padding-bottom: 14px;}
#contents2 .con_box .number{bottom: 85%;}
#top_cms .more a{padding-top: 15px;}
footer #footer .tel a{padding-top: 30px;}
.pager li a span{transform: translate(-50%,-40%);}
.cate_list li a{padding-top: 14px;}
#page07 .info_box{padding-top: 34px;}
#page10 .sitemap_wrap li a{padding-top: 16px;}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
/*----- common -----*/
header{position: relative;}
header.sc_nav{
	position: fixed;
	top: 0;
	width: 100%;
	transform: translateY(0)!important;
	transition: 0.5s;
	box-sizing: border-box;
	z-index: 9998;
}
header.sc_nav .nav_bt{
	width: 50px;
	height: 50px;
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translate(0,-50%);
}
header.sc_nav .nav_bt span{
	position: absolute;
	width: 20px;
	height: 2px;
}
#main_nav .nav li{text-align: center;margin-bottom: 40px;}
#main_nav .nav li a{font-size: 16px;}
#loader .load_left p{width:600px;font-size:28px;}
#loader .load_right p{width:600px;font-size:28px;}

/*----- index -----*/
	
/*----- other page -----*/
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
/*----- common -----*/
header.sc_nav .nav_bt{top:60%;}
#page_top{position: absolute;top: 0;left: 50%;padding-top: 50px;transform: translateX(-50%);cursor: pointer;transition: ease 0.3s;}
#page_top:hover{letter-spacing: 5px;}
#page_top::before{content: "";position: absolute;background-color: #fff; width: 2px;height: 50px;top: 0;left: 50%;transform: translateX(-50%);}

#loader .load_left figure{
    right: 0;
    top: 45%;
}

#loader .load_right figure{
    left: 0;
    top: 45%;
}

#loader > div figure{
	width: 100%;
	display: flex;
	justify-content: center;
    align-items: center;
}
#main_nav .nav li{text-align: center;margin-bottom: 10px;}
#main_nav .nav li a{font-size: 14px;}
#page08_link{
	position: fixed;
	width: 80%;
	max-width: 300px;
	bottom: 10px;
	right: 50%;
	box-sizing: border-box;
	transform: translate(50%,120%);
	transition: ease 0.5s;
}
#page08_link.active{
	transform: translate(50%,0);
}
#page08_link a{border-radius: 10px;transform: translateX(0);padding: 10px 0;}
#page08_link a figure{width: 50px;}
#page08_link a p{width: auto;margin: 0 auto;}
#loader > div p{font-size: 20px;}

	
/*----- index -----*/
#main_img{padding: 0 10px;}
#contents2 .con_box .number{font-size: 60px;}
.sns_links li{max-width: 55px;margin: 0 2%;box-shadow: 0 0 30px rgba(0,0,0,0.2);width: 13%;transition: all 0.3s;border-color: #fff;}
.sns_links li:hover{transform: translateY(-5px);}
	
/*----- other page -----*/
.pager li:not(.prev){display: none;}
.cate_list li{width: 100%;margin-right: 0;}

}