@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Quattrocento&display=swap');
body {font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; color:#333; background-color:#FFF;}
.cla {clear:both;}
.fltL {float:left;}
.fltR {float:right;}

.qr {
  font-family: "Quattrocento", serif;
  font-weight: 400;
  font-style: normal;
}


@media screen and (min-width: 768px),print  {
html {min-width:1080px;}
body {
	margin: 0;
	padding: 0;
	line-height: 1.8;
	font-size: 16px;
}
ul {list-style:none;}
.pc_none {display:none;}
span.pc_br {display:block;}
a {color: #0085B2;}
a:hover {color:#F60;}
a:hover img {filter: alpha(opacity=60); opacity:0.6;}
a[href^="tel:"] {pointer-events: none;}

#wrap {}
.contents{width:1080px; margin:0 auto 0px auto;clear:both}
.contents:after {display: block;content: " "; clear: both;}

/* Header */
#nav_wrap {position:fixed; top:0; text-align:center; width:100%; height:65px; z-index:999;}
#nav_wrap.active { background:rgba(255,255,255,.9);}
header {width:100%; margin:0 auto;}

h1 {float:left; margin:7px 0 0 55px; padding:0;}
h1 img {height:50px}
    
h2 {font-family: "Quattrocento", serif; font-weight: 400; font-style: normal; font-size:51px; letter-spacing:2px; margin: 0; padding: 65px 0 30px; line-height: 1.0em}
h2 span {font-family: serif;  font-size: 15px; padding-left: 30px;letter-spacing:0}

nav {margin:20px 50px 0 0; display:block; float:right; background:rgba(255,255,255,.6);}
#nav_wrap.active nav {background:none}
nav .inner{margin:0 auto;}
.icon,.close { display:none;}
nav ul {margin:0 20px 0; padding:0; font-size:0; text-align:right;}
nav li {display:inline-block; margin:5px 10px 0;}
nav li img {height:17px;}
nav li a {display: block; padding: 5px 0 0;}

nav .inner {height:34px;}
nav li span { display:none;}
nav:after {display: block;content: " "; clear: both; width:100%; height:2px;}

/* footer */
footer {clear:both; padding:40px 0 10px 0; line-height:1.2em; text-align:center; background:#333;}
footer ul {width:1080px; font-size:13px; margin:0 auto; padding:0; letter-spacing:1px;}
footer li {margin:0 10px 15px; display:inline-block;}
footer li.off {display:none;}
/*footer li:before,footer ul:after {content: "|"; margin: 0 12px 0 0; color:#999;}*/
footer li:first-child:before,footer ul:last-child:after {content: "";}
footer a:link,footer a:visited{color:#E5E5E5; text-decoration:none;}
footer a:hover,footer a:active {color:#0085B2; text-decoration:underline;}

#copyright {padding:30px 0 30px 0; font-size:11px; text-align:center; color:#CCC; background:#333}
#copyright img {height:45px}

.back {background:#FFF url(../img/common/back.png) repeat-x calc(50% + 500px) top; margin:0; padding:0; position:relative; clear:both;}

}

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

/*---------------------------------------------
Browser Default Initialization
---------------------------------------------*/
html {
	overflow-y: scroll;
}
body, div, dl, dt, dd {
	margin: 0;
	padding: 0;
	line-height: 1.7;
	font-size: 14px;
}
.smp_none {display:none;}
span.smp_br {display:block;}
.contents,.box1100,.box1000,.box900 {margin:0 20px;clear:both}
ul {
	margin: 0;
	padding: 0;
	line-height: 1.7;
}
ul li {
	margin: 0;
	padding: 0;
	line-height: 1.7;
}
h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td,nav,header {
	margin: 0;
	padding: 0;
	line-height: 1.7;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	
}
img {border: 0; vertical-align: top;
	-ms-interpolation-mode: bicubic;
}
ul li {list-style-type: none;}
a, button, input, textarea {
	outline: none;
}
/** fade使用時のズレ対策（FF）**/
img {
	box-shadow: #000 0 0 0;
}
 x:-moz-any-link, x:default {
 box-shadow: #000 0 0 0;
}
a {
	color: #0085B2;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

#wrap * {box-sizing: border-box;}
#wrap {font-size: 1.5rem;width: 100%;overflow: hidden;}
img {max-width: 100%;height: auto;}

/*--------------------------
  Header
---------------------------*/
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 990;
	overflow: hidden;
	height: 45px;
	background-size:auto 100%;
}
#nav_wrap.active header { background:rgba(255,255,255,.9);}

h1 {
	position: absolute;
	top: 3px;
	left:10px;
}
h1 img { width:auto; height:40px;}
h2 {font-family: "Quattrocento", serif; font-weight: 400; font-style: normal; font-size:30px; letter-spacing:2px; margin: 0; padding: 45px 0 30px 5px; line-height: 1.0em}
h2 span {font-family: serif;  font-size: 13px; padding-left: 20px; }
    
/*--------------------------
  Gnav
---------------------------*/
nav {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
}
nav .inner {
	height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background: rgba(0,0,0,.8);
}
.icon {
	cursor: pointer;
	position: absolute;
	top: 0px;
	right: 5px;
	width: 50px;
	white-space: nowrap;
}
.icon a {
	padding: 13px 9px 14px 10px;
	display: inline-block;
}
nav ul {
	border-top: 1px solid #999;
}
nav li {
	border-bottom: 1px solid #999;
	position: relative;
	width:50%;
	float:left;
}
nav li.wide {width:100%;}
nav li:nth-child(even) {
  border-left: #999 1px solid;
}

nav li a {
	display: block;
	text-align: left;
	font-size: 13px;
	color: #fff;
	text-decoration: none;
	position: relative;

}
nav li a:after {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-top: #FFF 1px solid;
	border-left: #FFF 1px solid;
	position: absolute;
	top: calc(50% - 4px);
	right: 22px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
}

nav .navbox {
	background: rgba(0,0,0,.9);
}
nav .navbox p {
	width: 100%;
	height: 54px;
	position: relative;
	top: 0;
	left:  0;
}
nav p a {
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 54px;
	display: block;
	
}
nav p img {
  width: 32px;
}
nav li img {display:none;}
nav li.nav_blank a {text-indent:-999px;}
nav li.nav_blank a:after { display:none;}
	nav li span {padding: 12px 9px; width:100%; height:100%; display: block; box-sizing: border-box}
/* footer */
footer {
  border-top: #666 1px solid;
  width: 100%;
  font-size: 15px;
  margin-top:0px;
  background:#333;
}
footer ul {overflow: hidden;}
footer li {
  font-size: 13px;
  letter-spacing: -.02em;
  width: 50%;
  float: left;
}
footer li:nth-child(even) {
  border-left: #666 1px solid;
}
footer li.wide {
  width: 100%;
  border: none;
}
footer a {
  display: block;
  color: #E5E5E5;
  padding: 7px 5px 6px 13px;
  position: relative;
  border-bottom: #666 1px solid;
  white-space: nowrap;
}

footer li a:after {
	content: '';
	display: block;
	width: 6px;
	height: 6px;
	border-top: #999 1px solid;
	border-left: #999 1px solid;
	position: absolute;
	top: calc(50% - 3px);
	right: 15px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
}

#copyright {padding:20px 0 20px 0; text-align:center; font-size:10px; background:#333; color:#CCC}
#copyright img {height:40px; margin:10px auto 20px}

.back {background:#FFF url(../img/common/back.png) repeat-x center top; background-size:auto 25px; padding:0; position:relative; clear:both;}
}

.effect {
	width: 100%;
	overflow: hidden;
	margin: 0;
}
.effect div {
	transition: 1.0s;
}
.ef-fade02 {
	opacity: 0;
	transform: translate(0, 60px);
	-webkit-transform: translate(0, 60px);
}
.fade02 {
	opacity: 1.0;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
}