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

/* design1 css */

html{font-size: 14px;}
#loading_bg{
	height: 100vh;
	width: 100vw;
	z-index: 100
}
#loading{
	top: 0;
	bottom: 0;
	margin: auto;
	width: 100vw;
	height: 2px;
	background-color: #f1f1f1
}
#loading .gauge{
	width: 0
}
.fadein {
    opacity : 0;
    -webkit-transform : translate(0, 20px);
    -ms-transform : translate(0, 20px);
    transform : translate(0, 20px);
	transition: all 1s
}
.fadein.scrollin {
    opacity : 1;
    -webkit-transform : translate(0, 0);
    -ms-transform : translate(0, 0);
    transform : translate(0, 0);
}

/* --all page-- */

#header::before,#header::after,#header > div::before,#header > div::after,footer .foot_bt a::after,#info_box::before,#pagetop a::before,#pagetop a::after,#contents1::before,#contents1 p::after,#contents1 h3::before,#contents1 h3::after,#contents1 p::before,#contents234 .box .contents_img4::before,.cms_title::before,.more a::before,.more a::after,#info_box .info_left::after,#info_box .info_left::before,#info_box .info_right::after,#info_box .info_right::before,#page_title::before{
	content: "";
	display: block;
	position: absolute;
	pointer-events: none;
}
#pagetop{
	bottom: 40px;
	z-index: 6
}
#pagetop a{
	width: 50px;
	height: 50px;
}
#pagetop a:hover{
	-webkit-transform: translateY(-5px);
	-ms-transform: translateY(-5px);
	transform: translateY(-5px);
}
#pagetop a::before{
	width: 1px;
	height: 30px;
	top: 0;
	bottom: 1px;
	right: 0;
	left: 0;
	background-color: #fff;
	margin: auto;
}
#pagetop a::after{
	height: 10px;
	width: 1px;
	top: 10px;
	right: 0;
	left: 1px;
	margin: auto;
	background-color: #fff;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	transform-origin: top right;
}
.cate_list{
	padding-bottom: 1px
}
.cate_list li:nth-child(3n) a{
	border-right: none
}
.pager li a{
	height: 50px;
	line-height: 50px
}
.pager li{
	margin: 0!important;
	margin-right: 15px!important
}
.pager li:last-child{
	margin-right: 0!important
}
.pager li a:hover{
	-webkit-transform: translateY(-5px);
	-ms-transform: translateY(-5px);
	transform: translateY(-5px);
}

/* header */

#sns{
	z-index: 6
}
#sns li:last-child{
	padding-right: 20px
}
#header,.header_wrap,#header .header_logo{
	height: 135px;
	box-sizing: border-box;
	z-index: 5
}
#header.headfix{
	position: fixed;
	top: 0;
	left: 0
}
#header::before{
	margin: auto;
	border-bottom: solid 1px;
	right: 0;
	left: 0;
	bottom: 10px;
}
#header::after{
	margin: auto;
	height: 3px;
	width: 280px;
	background-color: #fff;
	right: 0;
	left: 0;
	bottom: 9px;
}
#header > div::before{
	margin: auto;
	background-color: #fff;
	right: 0;
	left: 0;
	bottom: -63px;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	clip: rect(330px,400px,400px,0px);
}
#header > div::after{
	margin: auto;
	right: 0;
	left: 0;
	bottom: -53px;
	width: 380px;
	height: 390px;
	border-radius: 50%;
	border: solid 1px;
	clip: rect(328px,400px,400px,0px);
	z-index: 5;
}
#header div div{
	width: 12.5%;
	box-sizing: border-box
}
#header #logo{
	width: 25%;
	z-index: 5
}
#header.logo{
	margin-bottom: -40px
}

/* -- タブレット版ナビゲーション -- */

#header .sp_nav_bor{
	top: 0;
	bottom: 0;
	margin: auto;
	right: 20px;
	height: 30px;
	cursor: pointer;
}
#header .sp_nav_bor span{
	border-bottom: solid 1px;
	transition: 0.5s
}
#header .nav_click span:nth-child(1),#header .nav_click span:nth-child(2){
	-webkit-transform: rotate(225deg);
	-ms-transform: rotate(225deg);
	transform: rotate(225deg);
	margin: 14px 0 0
}
#header .nav_click span:nth-child(2){opacity: 0;margin: 0}
#header .nav_click span:nth-child(3){
	-webkit-transform: rotate(-225deg);
	-ms-transform: rotate(-225deg);
	transform: rotate(-225deg);
	margin: -2px 0 0
}
#header #sp_nav li a{
	border-color: #fff
}
#header .header_logo,#header .sp_nav_bor{
	z-index: 5
}
#header #sp_nav{
	z-index: 4;
	-webkit-transform: translateY(-105%);
	-ms-transform: translateY(-105%);
	transform: translateY(-105%);
	transition: 1s;
}
#header #sp_nav.slide_nav{
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
}

/* footer */
footer .foot_bt a::after{
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	transition: 0.5s;
	border: solid 1px transparent
}
footer .foot_bt a:hover::after{
	right: 5px;
	bottom: 5px;
	left: 5px;
	top: 5px;
	border: solid 1px #fff
}
footer .foot_bt a:last-child::before{
	content: "Tel.";
	font-size: 14px;
	margin-right: 10px
}
#info_box::before{
	top: 10px;
	right: 10px;
	bottom: 10px;
	left: 10px;
	border: solid 1px;
	z-index: 1
}
#info_box .info_left::after,#info_box .info_left::before,#info_box .info_right::after,#info_box .info_right::before{
	border-top: solid 15px transparent;
	border-right: solid 15px;
	border-bottom: solid 15px transparent;
	width: 0;
	height: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: 1
}
#info_box .info_left::after{
	left: 8px;
	top: 1px;
}
#info_box .info_left::before{
	left: 8px;
	bottom: 1px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
#info_box .info_right::after{
	right: 8px;
	bottom: 1px;
	-webkit-transform: rotate(225deg);
	-ms-transform: rotate(225deg);
	transform: rotate(225deg);
}
#info_box .info_right::before{
	right: 8px;
	top: 1px;
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
}

/* -- page title -- */

#page_title::before{
	width: 0;
	height: 50px;
	right: 0;
	left: 0;
	margin: auto;
	bottom: -25px;
	border-right: solid 1px
}

/* -- index.html -- */

#main_img .box_img{
	max-height: 700px;
}
#contents1{
	margin-top: -40px;
	z-index: 1
}
#contents1::before{
	right: 10px;
	left: 10px;
	top: 10px;
	bottom: 10px;
	border: solid 1px
}
#contents1 p::after,#contents1 h3::before,#contents1 h3::after,#contents1 p::before{
	border-top: solid 15px transparent;
	border-right: solid 15px;
	border-bottom: solid 15px transparent;
	width: 0;
	height: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
#contents1 p::after{
	left: 8px;
	top: 1px;
}
#contents1 h3::before{
	right: 8px;
	top: 1px;
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
}
#contents1 h3::after{
	right: 8px;
	bottom: 1px;
	-webkit-transform: rotate(225deg);
	-ms-transform: rotate(225deg);
	transform: rotate(225deg);
}
#contents1 p::before{
	left: 8px;
	bottom: 1px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
#contents234 .box .contents_img4::before{
	top: 10px;
	right: 10px;
	bottom: 10px;
	left: 10px;
	border: solid 1px;
	z-index: 1;
	transition: 0.5s
}
#contents234 .box .contents_img4:hover::before{
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
}
.cms_title::before{
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	width: 1px;
	height: 40px;
	border-right: solid 1px;
}
.more a::before{
	width: 0;
	height: 0;
	left: 2.5px;
	top: 1.5px;
	transition: 0.5s;
	border-left: solid 1px;
	border-top: solid 1px;
	opacity: 0
}
.more a::after{
	width: 0;
	height: 0;
	right: 2.5px;
	bottom: 2.5px;
	transition: 0.5s;
	border-right: solid 1px;
	border-bottom: solid 1px;
	opacity: 0
}
.more a:hover::before,.more a:hover::after{
	width: 100%;
	height: 100%;
	opacity: 1
}

/* -- page7.html -- */
#map iframe{
	width: 100%;
	height: 300px;
}

/* -- page8.html -- */

#page8 .mail input[type=reset],#page8 .mail input.bt_on{
	cursor: pointer
}


/* -- page10.html -- */

#page10 ul li a:hover{
	letter-spacing: 3px
}

/***　IE対処　***/

@media all and (-ms-high-contrast:none) {
	#contents1 .contents_txt1{
		padding-top: 45px;
		padding-bottom: 25px
	}
	#top_cms .more a,.cate_list a,#page8 .mail input{
		padding-top: 12px;
		padding-bottom: 8px
	}
	footer .foot_bt a,#page10 ul li a{
		padding-top: 23px;
		padding-bottom: 17px
	}
	.pager li a{
		line-height: 55px
	}
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#contents1.fadein {
    opacity : 1;
    -webkit-transform : translate(0, 0);
    -ms-transform : translate(0, 0);
    transform : translate(0, 0);
}
#header::before,#header::after,#header > div::before,#header > div::after{
	display: none
}
.header_wrap,#header,#header .header_logo{
	height: 100px
}
#header{
	height: 100px
}
	#header .header_logo{
		background-color: #fff;
		box-shadow: 0 0 5px rgba(0,0,0,0.2)
	}
#header #logo img{
	width: auto!important;
	height: 70px!important
}
.more a{
	border: solid 1px
}
.more a::before,.more a::after,.more a:hover::before,.more a:hover::after{
	display: none
}
.pager li:not(.prev):not(.next){
	display: none;
}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.header_wrap,#header,#header .header_logo{
	height: 80px
}
#header{
	height: 80px
}
#header #logo img{
	width: auto!important;
	height: 50px!important
}
#sns li:last-child{
	margin-right: 5px
}
#contents1{
	margin-top: -20px;
}
footer .foot_bt a{
	transition: 0;
}
}

/* ---------- IE ---------- */
@media all and (-ms-high-contrast:none){
	#page9 > div p a{padding: 7px 10px 3px;}
}