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


/****************************************************************************************************
初期設定
****************************************************************************************************/

/* IE8以下への対応 */
article, aside, figure, figcaption, footer, header, nav, section {
	display:block;
}
/* IE8以下への対応 */

.pcOnly {
	display:block;
}
span.pcOnly,
i.pcOnly {
	display:inline;
}
.spOnly {
	display:none;
}

html,body{
	text-align:center;
	/* https://spyweb.media/2017/11/27/css-font-family-best-practice-yu-gothic-meiryo-etc/ */
	font-family:-apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */
				'Hiragino Sans',
				'Hiragino Kaku Gothic ProN', /* Macのヒラギノ */
				'Helvetica Neue',            /* Macの欧文 (OS X 10.10以前) */
				Meiryo,                      /* Windowsのメイリオ */
				'Segoe UI',                  /* Windowsの欧文 */
				sans-serif;
	-webkit-font-smoothing:antialiased;
	-webkit-text-size-adjust:100%;
	font-feature-settings:"palt";
	min-width:1280px;
}

* {
	box-sizing:border-box;
  margin:0;
  padding:0;
}
img {
	vertical-align:top;
}
strong {
	font-weight:600;
}
em {
	font-style:normal;
}
a {
	color:#00d9d9;
	text-decoration:none;
	-webkit-transition:opacity 200ms;
	transition:opacity 200ms;
}
a:hover {
	opacity:.5;
}
ul{
  list-style: none;
}
ol{
  list-style: none;
}

/* clear fix */
.clearfix:before,
.clearfix:after {
	content:" ";
	display:table;
}
.clearfix:after {
	clear:both;
}
.clearfix {
	*zoom:1;
}


/****************************************************************************************************
header
****************************************************************************************************/

#contents{
	font-family: 'Hiragino Sans',
	'Hiragino Kaku Gothic ProN', 
	'Helvetica Neue',            
	Meiryo,                      
	'Segoe UI',                  
	sans-serif;
	color:#333;
}

#header {
	position:fixed;
	left:0;
	top:0;
	min-width:1280px;
	width:100%;
	z-index:100;
	background-color: rgba(0,191,255, 0.7);
}

#header .inner {
	width:1290px;
	margin:0 auto;
	padding:37px 0px 37px 0;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex; 
}

#logo {
	width:483px;
}
#h-navi {
	width:757px;
	padding-top:32px;
	font-size:0.9375rem;
	font-family: 'Hiragino Sans';
	font-weight: 500;
}
#h-navi ul li{
  display: inline;
}
#h-navi ul li a {
  color:#fff;
}
#h-navi ul li + li {
	/*変更*/
	margin-left:1rem;
}

#menu {
	width:50px;
	height:40px;
  margin-top:23px;
	margin-left:;
}
#menu-btn {
	width:100%;
	height:100%;
}
#menuButton {
	overflow:hidden;
	display:block;
	position:relative;
	width:100%;
	height:100%;
	cursor:pointer;
}

#menuButton span,
#menuButton::before,
#menuButton::after {
	display:block;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:50px;
	height:6px;
	margin:auto;
	background:#fff;
	border-radius:5px;
}
#menuButton span {
	z-index:1;
	-webkit-transform:translate(0, 0);
	transform:translate(0, 0);
	text-indent:-9999px;
}
#menuButton::before {
	z-index:2;
	-webkit-transform:translate(0, -17px);
	transform:translate(0, -17px);
	content:"";
}
#menuButton::after {
	z-index:2;
	-webkit-transform:translate(0, 17px);
	transform:translate(0, 17px);
	content:"";
}

/****************************************************************************************************
サブナビ
****************************************************************************************************/
#sNavi {
	position:fixed;
	width:300px;
	max-height:100vh;
	top:0;
	right:0;
	z-index:1001;
	padding:0 0 30px 30px;
	overflow:scroll;
	background:#FFF;
	text-align: left;
	display:none;
}
#sNaviWrap {
	contents:'';
	display:block;
	position:fixed;
	width:100%;
	height:100%;
	left:0;
	top:0;
	z-index:1000;
	background:rgba(0,0,0,.5);
	opacity:0;
}

#sNavi ul{
	padding-top:10%;
}

#closeBtn {
	float:right;
	width:60px;
	height:60px;
	background:#00bfff;
}
#close-btn {
	width:100%;
	height:100%;
}
#closeButton {
	overflow:hidden;
	display:block;
	position:relative;
	width:100%;
	height:100%;
	cursor:pointer;
}

#closeButton span,
#closeButton::before,
#closeButton::after {
	display:block;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:28px;
	height:2px;
	margin:auto;
	background:#FFF;
	border-radius:2px;
}
#closeButton span {
	display:none;
}
#closeButton::before {
	z-index:2;
	-webkit-transform:translate(0, -12px);
	transform:translate(0, -12px);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	content:"";
}
#closeButton::after {
	z-index:2;
	-webkit-transform:translate(0, 12px);
	transform:translate(0, 12px);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	content:"";
}

#sNavi ul {
}
#sNavi ul + ul {
	margin:25px 0 0 0;
	padding:27px 0 0 0;
	border-top:1px dotted #CCC;
}
#sNavi ul li {
	font-size:1rem;
	line-height:1.0;
}
#sNavi > ul > li + li {
	margin:1rem 0 0 0;
}
#sNavi ul li .children {
	display:none;
	margin:0.8rem 0 0 1rem;
	padding:0 0 0.5rem 0;
}
#sNavi ul li .children li + li {
	margin:0.6rem 0 0 0;
}
#sNavi ul li.current-cat .children,
#sNavi ul li.current-cat-parent .children {
	display:block;
}

#tel-num-s{
  color:#00bfff;
}

/****************************************************************************************************
bottom
****************************************************************************************************/

#pageup-bottom{
	border-top: #00bfff solid 1px;
	padding-top:70px;
  margin:0 auto;
	margin-top:70px;
	width:1150px;
}

#pageup-btn {
	display: inline-block;
}

#pageup-btn a {
	display:block;
	color:#FFF;
	font-size:1.066rem;
	letter-spacing:1px;
	width:60px;
	height:60px;
	background:#7adeff;
	border:1px solid #7adeff;
	border-radius:50px;
}
#pageup-btn a::after {
	content:'';
	display:block;
	width:17px;
	height:17px;
	border-top:2px solid #FFF;
	border-right:2px solid #FFF;
	-webkit-transform:translate(100%, 120%) rotate(-45deg);
	-ms-transform:translate(100%, 120%) rotate(-45deg);
	transform:translate(100%, 120%) rotate(-45deg);
	-webkit-transition:all 200ms;
	transition:all 200ms;
}
#pageup-btn p{
	font-size: 12px;
	margin-top: 7px;
}

#navi-bottom{
	text-align: center;
}

#b-navi {
	font-size:0.9375rem;
  font-weight: 500;
	padding:50px 0 60px 0;
}
#b-navi ul{
  display: inline;
}
#b-navi ul li{
  display: inline;
}
#b-navi ul li a {
  color:#00d9d9;
	font-size: 1.0625rem;
}
#b-navi ul li{
	margin-left:1.375rem;
}

#b-navi .br-sp{
	display: none;
}

/****************************************************************************************************
footer
****************************************************************************************************/
#footer {
}

#footer-contents{
	width:100%;
	height: 320px;
	background:#f6f6f6;
	color:#999999;
}

#footer-contents img{
	margin:0 auto;
	margin-top: 40px;
	margin-bottom: 40px;
}

#footer-info{
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
  display:flex; 
	justify-content: center;
	margin-bottom:40px;
	font-weight: 400;
}

#compa{
	text-align: right;
}

#add{
	text-align: left;
}

#compa h3{
	font-size:1.5rem;
}

#compa p{
	font-size: 0.8125rem;
	padding:2px 0; 
}

#add p{
	font-size: 0.9375rem;
	padding:3px 0; 
}

#copyright{
	font-size: 0.8125rem;
}

#border-v{
	border-left:solid #4da6ff 0.8px;
	margin:0 23px;
	height: 48px;
  margin-top:6px;
}




@media screen and (max-width: 896px) {
/****************************************************************************************************
初期設定
****************************************************************************************************/
	html {
		min-width:initial;
		min-width:auto;
	}
	body {
		min-width:initial;
		min-width:auto;
		scroll-padding-top:121px;
	}
	img {
		width:100%;
		height:auto;
	}
	a {
		-webkit-transition:none;
		transition:none;
	}
	a:hover {
		opacity:1;
	}
	.pcOnly {
		display:none;
	}
	.spOnly {
		display:block;
	}
	/****************************************************************************************************
	header
	****************************************************************************************************/
	#header {
		position:fixed;
		min-width:initial;
		min-width:auto;
		width:100%;
		height: 73px;
		z-index:1000;
	}
	#header .inner {
		margin:0 auto;
		padding:10px;
	}

	#logo {
		width:70vw;
	}
	#h-navi {
		display:none;
	}

	#menu {
		display:block;
		width:8vw;
		height:7.2vw;
		/* margin-top:0.5vw; */
	}
	#menu {
		position:fixed;
		right:4vw;
		top:0px;
	}

	#menuButton span,
	#menuButton::before,
	#menuButton::after {
		width:100%;
		height:0.8vw;
		border-radius:0.8vw;
	}
	#menuButton::before {
		-webkit-transform:translate(0, -2.8vw);
		transform:translate(0, -2.8vw);
	}
	#menuButton::after {
		-webkit-transform:translate(0, 2.8vw);
		transform:translate(0, 2.8vw);
	}

	.pcOnly {
		display:none;
	}
	/****************************************************************************************************
	サブナビ
	****************************************************************************************************/
	#sNavi {
		position:fixed;
		width:70%;
		max-height:100vh;
		padding:0 0 10vw 8vw;
	}

	#sNavi ul{
		padding-top:15%;
	}

	/****************************************************************************************************
bottom
****************************************************************************************************/

#pageup-bottom{
	border-top: #00bfff solid 1px;
	padding-top:70px;
  margin:0;
	margin-top:70px;
	width:100vw;
}

#pageup-btn {

}

#pageup-btn p{

}

#b-navi {
	font-size:0.8rem;
  font-weight: 500;
	padding:50px 0 60px 0;
}

#b-navi ul li a {
  color:#00d9d9;
	font-size: 1rem;
}
#b-navi ul li{
	margin-left: 0;
	margin-right:0.8rem;
}
#b-navi .br-sp{
	display: block;
}

	/****************************************************************************************************
	footer
	****************************************************************************************************/
	#footer {
		width:100vw;
	}
	
	#footer-contents{
		width:100%;
		height: 100%;
		background:#f6f6f6;
		color:#999999;
	}
	
	#footer-contents img{
		width:20vw;
	}
	
	#footer-info{
		display: block;
		margin-bottom:3vh;
	}
	
	#compa{
		text-align: center;
	}
	
	#add{
		text-align: center;
	}
	
	#compa h3{
		font-size:1.3rem;
	}
	
	#compa p{
		font-size: 0.7rem;
		padding:2px 0; 
	}
	
	#add p{
		font-size: 0.8rem;
		padding:3px 0; 
	}
	
	#copyright{
		font-size: 0.6rem;
		padding-bottom:20px;
	}
	
	#border-v{
		border-left:none;
		border-top:solid #4da6ff 0.8px;
		margin:15px 23px;
		height: 0;
	}	
}

@media screen and (max-width: 896px) and (orientation: landscape) {
	
	/****************************************************************************************************
	header
	****************************************************************************************************/
	#header {
		height:100px;
	}
	#header .inner {
		margin:0 auto;
		padding:10px;
	}

	#logo {
		width:50vw;
	}
	#h-navi {
		display:none;
	}
	#menuButton span,
	#menuButton::before,
	#menuButton::after {
		width:80%;
		height:0.8vw;
		border-radius:0.8vw;
	}
	#menuButton::before {
		-webkit-transform:translate(0, -2.3vw);
		transform:translate(0, -2.3vw);
	}
	#menuButton::after {
		-webkit-transform:translate(0, 2.3vw);
		transform:translate(0, 2.3vw);
	}

	/****************************************************************************************************
	サブナビ
	****************************************************************************************************/
	#sNavi {
		position:fixed;
		width:50vw;
		max-height:100vh;
		padding:0 0 3vw 8vw;
	}

	#sNavi ul{
		padding-top:3vw;
	}

	#sNavi ul + ul {
		margin:3vw 0 0 0;
		padding:3vw 0 0 0;
	}

	/****************************************************************************************************
	footer
	****************************************************************************************************/
	
	#footer-contents img{
		width:10vw;
	}
	
	
	#b-navi .br-sp{
		display: none;
	}
	

}