@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

/*--------------------------------------------------------
  pre
--------------------------------------------------------*/
.pre{
	text-align: center;
	margin: 100px 0 30px;
	font-size: 5em;
	font-weight: bold;
}



/*--------------------------------------------------------
  common
--------------------------------------------------------*/
*{
	position: relative;
}

body{
	background-color: #fff;
	font-family: 'Noto Sans JP', sans-serif, '游ゴシック', 'ヒラギノ角ゴ ProN', 'MS Pゴシック';
	font-size: 16px;
	color: #000;
	font-weight: 300;
	letter-spacing: .1em;
	background:url("../img/top_back.jpg") no-repeat;
	background-position: center bottom;
	background-size: 80%;
	margin-bottom: 200px;
	overflow-x: hidden;
}

h1{
	display: inline-block;
	background-color: #fff;
	font-size: 1.5rem;
	color: #666;
	letter-spacing: .05em;
	height: 60px;
	padding: 10px;
}
h1 a{
	display: block;
}

h2{
	display: inline-block;
	background-color: #fff;
	font-size: 1.5rem;
	color: #666;
	letter-spacing: .05em;
	padding: 15px;
}

h3{
	display: inline-block;
	background-color: #fff;
	font-size: 1.5rem;
	color: #666;
	letter-spacing: .05em;
	padding: 10px;
}

img{
	width: 100%;
}

p{
	font-weight: 300;
	line-height: 1.9em;
}

/* header */
.fixed {
  position: fixed;
  top: 0;
  width: 880px;
  z-index: 10;
}

/* nav */
nav{
	background-color: #fff;
	width: 880px;
}
nav ul{
	display: -ms-flexbox;
	display: flex;
	align-items: center;
}
nav ul li{
	display: inline-block;
	font-weight: 300;
}
nav ul li a{
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	font-size: .9em;
}
nav.globalNavi ul li a{
	padding-top: 70px;
	width: 880px;
}
nav.globalNavi ul li.home a{
	background: no-repeat 0 0/100% url("../img/header/logo.png");
	width: 221px;
}
nav.globalNavi ul li.company a{
	background: no-repeat 0 0/100% url("../img/header/nav_01.png");
	width: 50px;
}
nav.globalNavi ul li.space1{
	background: no-repeat 0 0/100%;
	width: 204px;
}
nav.globalNavi ul li.order a{
	background: no-repeat 0 0/100% url("../img/header/nav_02.png");
	width: 350px;
}
nav.globalNavi ul li.space2{
	background: no-repeat 0 0/100%;
	width: 35px;
}

nav.globalNavi ul li.home a:hover,
nav.globalNavi ul li.home a.on{
	background: no-repeat 0 0/100% url("../img/header/logo_ov.png");
	background-color: #eee;
}
nav.globalNavi ul li.company a:hover,
nav.globalNavi ul li.company a.on{
	background: no-repeat 0 0/100% url("../img/header/nav_01_ov.png");
	background-color: #eee;
}
nav.globalNavi ul li.order a:hover,
nav.globalNavi ul li.order a.on{
	background: no-repeat 0 0/100% url("../img/header/nav_02_ov.png");
	background-color: #eee;
}

nav.globalNavi ul li a:hover,
nav.globalNavi ul li a.on{
	background-color: #eee;
	color: #000;
}

/* contents */
.wrap{
	width: 880px;
	margin: 0 auto;
	padding-bottom: 20px;
}
.zero{
	padding-top: 70px;
}

.pankuzu{
	color: #a9a9a9;
	font-size: 12px;
	padding: 10px 0 0 10px;
}
.pankuzu a:hover{
	color: #ff9000;
}

article{
	margin-top: 40px;
	padding: 0 10px;
}

/* main */
.wrapper{
	width: 880px;
	margin: 0 auto;
}
.product{
	width:600px;
	margin: 0 40px;
	float: left;
}
.sidebar{
	width:180px;
	margin: 90px 20px 0 0;
	float: left;
	color: #666;
	font-size: 13px;
	line-height: 22px;
}
.sidebar a:hover{
	color: #ff9000;
}
.sidebar img{
	margin-bottom: 15px;
}
.sidebar hr{
	border: 1px dotted #666;
	margin: 13px 0 13px;
}
.main{
	width: 600px;
	margin: 0 auto;
}
.main .top img{
	margin: 20px 20px 0 0;
	width: 30%;
	float: left;
}
.main .top:hover{
	opacity: 0.5;
}
.main .line img{
	margin: 20px 0 0;
	padding: 0 20px 0 0;
	float: left;
}
.aux{
	text-align: right;
	margin: 5px 0 20px;
}
.aux2{
	text-align: center;
	margin: 15px 0 0;
}
.sp-main .top img{
	margin: 20px 8px 0 10px;
	width: 45%;
	float: left;
}
.sp-main .cl img {
		padding: 17px 0 0;
		width: 96%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
.sp-main .top:hover{
	opacity: 0.5;
}
.box{
	width: 600px;
	margin: 0 auto;
	padding-top: 10px;
	display: flex;
}
.image-box{
	width: 110px;
	margin: 0 auto;
}

/* for underlayer */
.underlayer .globalNavi.fixed + .contents{
	margin-top: 108px;
}

/* footer */
.pagetop{
	width: 60px;
	position: fixed;
	right: 50%;
	bottom: 30px;
	margin-right: -430px;
	z-index: 1;
}
#footer{
	clear:both;
	background-color:rgba(0,0,0,0);
}
#footer ul{
	padding:75px 0 0 0;
	text-align:center;
}
#footer li{
	display: inline;
	padding: 5px 10px;
}
#footer li a{
	text-decoration:none;
	color:#000;
}
#footer li a:hover{
	color:#dadada;
}

p#copy_logo{
	padding:5px 0 5px;
	text-align:center;
	color:#000000;
	font-size:12px;
}

p#copy{
	padding:5px 0 25px;
	text-align:center;
	color:#000000;
	font-size:12px;
}


/* =======================================================
  for SP
======================================================= */
@media screen and (min-width: 769px) {

	.for-sp{
		display: none;
	}

}

@media screen and (max-width: 768px) {

	header{
		margin-top: 10px;
	}
	.header-sp{
		position: fixed;
		top: 0;
		z-index: 5;
	}
	.logo{
		position: fixed;
		transition: top 0.3s ease;
		background-color: #fff;
		top: 0;
		padding: 8px 0;
		height: 50px;
		text-align: center;
		width: 100%;
		z-index: 4;
	}
	.logo img{
		height: auto;
    	max-height: 34px;
		width: auto;
	}

	.wrap{
		width: 100%;
		padding-bottom: 40px;
	}

	.for-pc{
		display: none;
	}

	h1{
		width: 100%;
		font-size: 1.2rem;
		height: auto;
	}
	h1 address span{
		display: block;
		line-height: 1.5em;
	}
	h1 address span:last-of-type{
		position: relative;
	}

	article{
		padding: 0 10px 0 50px;
	}
	article.bear h3::before{
		width: 30px;
		margin-left: -40px;
	}

	/* nav */
	ul#menu {
		padding-left: 0;
		margin:  0;
		position: fixed;
		display: none;
		background: #fff;
		list-style-type: none;
		left: 0px;
		top: 50px;
		width: 100%;
		opacity: 0.9;
		z-index: 990;
	}
	ul#menu li {
		border-bottom: 1px solid #a9a9a9;
	}
	ul#menu li a {
		text-decoration: none;
		display: block;
		padding: 15px 14px;
		color:#000;
	}
	ul#menu li a:hover {
		background: #a9a9a9;
		opacity: 0.7;
	}
	div#sp-icon {
		position: fixed;
		background-color: #a9a9a9;
		width: 50px;
		height: 50px;
		left: 0px;
		top: 0px;
		z-index: 999;
	}
	div#sp-icon:hover {
		cursor: pointer;
		opacity: 0.7;
	}
	div#sp-icon span,
	div#sp-icon span:before,
	div#sp-icon span:after {
		display: inline-block;
		width: 30px;
		height: 3px;
		background: #fff;
		position: absolute;
		transition-property: transform;
		transition-duration: 0.3s;
	}
	div#sp-icon span {
		left: 50%;
		top: 50%;
		transform: translate( -50%, -50% );
	}
	div#sp-icon span:before {
		content: "";
		transform: translateY( -10px ) rotate( 0deg );
	}
	div#sp-icon span:after {
		content: "";
		transform: translateY( 10px ) rotate( 0deg );
		margin-left: -.35em;
	}
	div.sp-open span {
		background: transparent !important;
	}
	div.sp-open span:before {
		transform: rotate( 45deg ) !important;
	}
	div.sp-open span:after {
		transform: rotate( -45deg ) !important;
	}


	/* contents */
	section{
		margin-bottom: 40px;
	}
	section:first-of-type{
		margin-top: 20px;
	}
	
	table.schedule{
		width: 100%;
	}

	/* for underlayer */
	.underlayer header{
		position: fixed;
		top: 0;
		margin-top: 0;
		z-index: 1;
	}
	.underlayer ul#menu{
		top: 50px;
	}
	.underlayer .nameplate{
    position: fixed;
		top: 0;
		width: 100%;
	}
	.underlayer .nameplate h1{
		height: 50px;
		padding: 14px 0;
    text-align: center;
	}
	.underlayer .nameplate h1 a{
		padding-left: 50px;
	}

	.underlayer .contents{
		margin-top: 60px;
	}

	.underlayer section figure.greeting{
		display: block;
		float: none;
		width: 40%;
    margin: 0 auto 20px;
	}

	.pagetop{
    	position: fixed;
    	right: 20px;
    	bottom: 30px;
		margin-right: 0;
		width: 50px;
    	z-index: 1;
	}
	
	.sp-main{
		overflow-x: hidden;
	}
	.viewport {
  		width: v;
  		overflow: hidden;
  		margin: 0 auto;
  		-webkit-transform: translateZ(0);
  		padding-left: 20px;
	}
	.flipsnap {
  		width: 12000px;
	}
	.flipsnap:after {
  		content: '';
  		display: block;
  		clear: both;
  		height: 0;
	}
	.item {
  		width: 400px;
  		float: left;
	}
	.item img {
  		padding-right: 20px;
	}
	input[type="button"],
	button {
  		cursor: pointer;
  		-webkit-appearance: button;
  		*overflow: visible;
	}
	.pointer {
		text-align: center;
		padding-top: 10px;
	}
	.pointer span {
  		display: inline-block;
  		width: 12px;
  		height: 12px;
  		border-radius: 12px;
  		background: #dadada;
	}
	.pointer span.current {
  		background: #ff9000;
	}

}

@media screen and (min-width: 410px) {
	/* nav */
	div#sp-icon span:after {
		content: "";
		transform: translateY( 10px ) rotate( 0deg );
		margin-left: -.4em;
	}
}



/* =======================================================
  general
======================================================= */
.ctr{text-align: center;}
.lft{text-align: left;}
.rgt{text-align: right;}
.indent{text-indent: 1em;}

.blk{display: block !important;}
.inline-blk{display: inline-block !important;}

.hide{display: none;}

.no-und{text-decoration: none;}
.und{text-decoration: underline;}

.w10{width: 10% !important;}
.w15{width: 15% !important;}
.w20{width: 20% !important;}
.w30{width: 30% !important;}
.w40{width: 40% !important;}
.w50{width: 50% !important;}
.w60{width: 60% !important;}
.w70{width: 70% !important;}
.w80{width: 80% !important;}
.w90{width: 90% !important;}
.w100{width: 100% !important;}
.wauto{width: auto !important;}

.mt10{margin-top: 10px !important;}
.mt20{margin-top: 20px !important;}
.mt30{margin-top: 30px !important;}
.mt40{margin-top: 40px !important;}
.mr10{margin-right: 10px !important;}
.mr20{margin-right: 20px !important;}
.mr30{margin-right: 30px !important;}
.mr40{margin-right: 40px !important;}
.mb10{margin-bottom: 10px !important;}
.mb20{margin-bottom: 20px !important;}
.mb30{margin-bottom: 30px !important;}
.mb40{margin-bottom: 40px !important;}
.ml10{margin-left: 10px !important;}
.ml20{margin-left: 20px !important;}
.ml30{margin-left: 30px !important;}
.ml40{margin-left: 40px !important;}

.pt10{padding-top: 10px !important;}
.pt20{padding-top: 20px !important;}
.pt30{padding-top: 30px !important;}
.pt40{padding-top: 40px !important;}
.pr10{padding-right: 10px !important;}
.pr20{padding-right: 20px !important;}
.pr30{padding-right: 30px !important;}
.pr40{padding-right: 40px !important;}
.pb10{padding-bottom: 10px !important;}
.pb20{padding-bottom: 20px !important;}
.pb30{padding-bottom: 30px !important;}
.pb40{padding-bottom: 40px !important;}
.pl10{padding-left: 10px !important;}
.pl20{padding-left: 20px !important;}
.pl30{padding-left: 30px !important;}
.pl40{padding-left: 40px !important;}

.clearfix{
	overflow:hidden;
	clear: both;
}