@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400&display=swap');
body {font-family: "Noto Serif JP", serif; font-weight:300; color:#FFF; background:#5e5e5e url(../img/common/back_gray.jpg) center top;}
.txtGot {font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;}
.txtMin {font-family: "Noto Serif JP", serif; font-weight:300;}
.cla {clear:both;}
.fltL {float:left;}
.fltR {float:right;}

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

#wrap {overflow: hidden;}
nav .inner{width:1080px; margin:0 auto;}
.contents{width:1080px; margin:0 auto 0px auto; text-align: center}
.box1200 {width:1200px; margin:0 auto 0px auto;}
.contents:after,.box1100:after {display: block;content: " "; clear: both;}

/* Header */
header {width:1080px; margin:0 auto; height:60px}
h1 {float:left; margin:12px 0 0 0; padding:0; line-height:1.0em;}
h1 img {height:63px}
.head_btn {float:right; margin:20px 0 0 0;}
.head_btn img {margin:0 0 0 15px; height:26px}
.head_btn img.imgL {margin:0 0 0 15px; height: 35px}

nav {width:100%; height:55px; font-size:0;}
nav .inner {overflow: auto;}
.icon,.close { display:none;}
nav ul {margin:0; padding:0; text-align:right; margin-top: -3px}
nav li { display:inline-block}
nav li:last-child {border: none;}
nav li a {display: block; padding: 0;}
nav li.off img {filter: alpha(opacity=30); opacity:0.3;}
nav li.off a {pointer-events: none;}

nav .navbox {}
nav .navbox p {}
nav p a {}
nav p img {}
nav li img {height:36px}
nav li span { display:none;}

/* footer */
footer {clear:both; width:1080px; margin:0 auto; padding:50px 0 30px 0; line-height:1.2em; text-align:center;}
footer ul {font-size:13px; margin:0 auto; padding-left:12px;}
footer li {margin:0 5px 15px; display:inline-block;}
footer li.off {display:none;}
footer li:before,footer ul:after {content: "|"; margin: 0 12px 0 0; color:#CCC;}
footer a:link,footer a:visited{color:#FFF; text-decoration:none;}
footer a:hover,footer a:active {color:#FF9900; text-decoration:underline;}

.footer_in {width:1080px; margin:0 auto; color:#FFF}
.footer_in:after {display: block;content: " "; clear: both;}
#footer_tel {border-top:solid 1px #E5E5E5;}
.footer_box {float:left; font-size:14px; width:720px; margin:40px 0 0 0px; line-height:1.2em; text-align:left;}
.footer_box > .tel {margin:10px 0 40px 0; padding:0 0 0 0px; float:left;}
.footer_box > .tel img {height:45px}
.footer_box > .tel_info {float:left; font-size:11px; margin:20px 0 0 20px; line-height:1.7em;}
	
.footer_btn,.footer_btn_top {float:right; margin:30px 0 30px 0;}
.footer_btn1,.footer_btn2 {
    display: block;
	width:283px;
	height:47px;
    position: relative;
	text-indent: -9999px;
	margin:0px 0 11px 0;
}
.footer_btn1 {background:url(../img/common/footer_btn1.png?202606) no-repeat center top; background-size:contain}
.footer_btn2 {background:url(../img/common/footer_btn2.png?202606) no-repeat center top; background-size:contain}
.footer_btn1 a,.footer_btn2 a {
    position: relative;
    display: block;
    padding: 20px 0;
}
.footer_btn1:hover,.footer_btn2:hover {filter: alpha(opacity=60); opacity:0.6;}

#copyright {padding:0px 0 0 0; height:60px; font-size:11px;}
#copyright .f_logo1 {width:355px; float:left;}
#copyright .f_logo2 {width:410px; float:left;}
#copyright p {float:right; margin:-25px 0 0 0; font-size:11px; letter-spacing:1px;}
#copyright img {vertical-align: middle; margin:0px 0 0 5px; height:40px}

.yokoku {margin:50px 0 0 80px}
.yokoku_p1 {border:solid 1px #CCC; padding:10px 0; float:left; width:120px; text-align:center;}
.yokoku_p2 {float:left; font-size:13px; width:800px; margin-left:20px; text-align:left;}
.sp_footer {display: none;}
}

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

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,.box1200 {margin:0 20px;}

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, pre, form, fieldset, input, textarea, p, blockquote, th, td, section, nav, article, aside, hgroup, header, address, figure, figcaption {
	margin: 0;
	padding: 0;
	line-height: 1.7;
}
address, caption, cite, code, dfn, em, th, var {
	font-style: normal;
	font-weight: normal;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th {
	text-align: left;
}
q:before, q:after {
	content: '';
}
object, embed {
	vertical-align: top;
}
legend {
	display: none;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}
img, abbr, acronym, fieldset {
	border: 0;
}
img {
	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: #8eb4a7;;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}


/*---------------------------------------------
Utility
---------------------------------------------*/
/* Clearfix */
.cf:after, .sec:after, .section:after {
	visibility: hidden;
	display: block;
	content: " ";
	clear: both;
	height: 0;
}
#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: 55px;
	background:#5e5e5e url(../img/common/back_gray.jpg) center top;
}
.head_def {box-shadow: 0 2px 5px #000;}
.head_top {background-color:none;}
header.scroll{background-color:#000; box-shadow: 0 2px 5px;}

h1 {
	position: absolute;
	top: 8px;
	left:15%;
  transform: translateX(-20%);
  -webkit-transform : translateX(-20%);
}
h1 img { width:auto; height:39px;}

.head_btn {display:none;}

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: 0;
	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;
	background:#000;
}
nav li:nth-child(even) {
  border-left: #999 1px solid;
}

nav li a {
	display: block;
	text-align: left;
	font-size: 14px;
	color: #FFF;
	text-decoration: none;
	position: relative;
	padding: 12px 0 12px 20px;
}
nav li a:after {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-top: #CCC 1px solid;
	border-left: #CCC 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 li.bgc a:after,nav li.bgc2 a:after {border-top: #FFF 1px solid; border-left: #FFF 1px solid;}
nav li.bgc {background: rgba(123,155,150,.9);}
nav li.bgc2 {background: rgba(74,89,87,.9);}
nav li.bgc a,nav li.bgc2 a { color:#FFF} 
nav li.off a {pointer-events: none; color:#444;}
nav li.off a:after {filter: alpha(opacity=20); opacity:0.2;}
nav li.navStxt a {font-size:13px; padding:8px 30px 9px 20px; line-height:1.2em;}
nav li b {color:#D90000; font-weight:normal; font-size:10px; margin-left:5px}
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;
	padding: 12px 9px;
}
nav p img {
  width: 32px;
}
nav li img {display:none;}
nav li span { }

/* footer */
footer {
  border-top: #888 1px solid;
  width: 100%;
  font-size: 15px;
  margin-top:40px;
}
footer ul {overflow: hidden;}
footer li {
  font-size: 13px;
  letter-spacing: -.02em;
  width: 50%;
  float: left;
}
footer li:nth-child(even) {
  border-left: #888 1px solid;
}
footer li.wide {
  width: 100%;
  border: none;
}
footer a {
  display: block;
  color: #DDD;
  padding: 7px 5px 6px 13px;
  position: relative;
  border-bottom: #888 1px solid;
  white-space: nowrap;
}

footer li a:after {
	content: '';
	display: block;
	width: 6px;
	height: 6px;
	border-top: #CCC 1px solid;
	border-left: #CCC 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);
}
footer li.off {display:none;}

.footer_in {margin:0 10px;}
#footer_tel {padding:20px 0 10px 0; text-align:center;}
.footer_box {font-size:13px; margin:0 10px;}
.footer_box > .tel img {margin:0 0 10px; padding:0 10% 0;}
.footer_box > .tel_info {font-size:11px; margin:0px;}

.footer_btn,.footer_btn_top {position:fixed; bottom:0; left:0; width:100%; padding:0 15px; background: rgba(0,0,0,.6); text-align:center}
.footer_btn1,.footer_btn2 {
    display: inline-block;
	width:131px;
	height:40px;
	text-indent: -9999px;
	margin:10px 10px 7px;
	font-size:0;
}
.footer_btn1 {background:url(../img/common/h_rsv.png?202606) no-repeat center top;background-size:contain;}
.footer_btn2 {background:url(../img/common/h_shiryo.png?202606) no-repeat center top;background-size:contain;}
	
.footer_btn1 a,.footer_btn2 a {
    position: relative;
    z-index: 3;
    display: block;
    padding: 10px 0 2px;
	overflow: hidden;
	width: 100%; height:100%
}

	
#copyright {padding:10px 0 60px 0;}
#copyright .f_logo1 {width:50%; padding:0 10px; float:left; font-size:12px;}
#copyright .f_logo2 {width:42%; padding:0 10px; float:right; font-size:12px;}
#copyright p {clear:both; margin:0; padding:20px 0; font-size:10px; text-align:center;}
#copyright img { display:block;}


.sp_footer {
position:fixed; bottom:0; left:0; width:100%; text-align: center;border-top: solid 1px #333;box-sizing: border-box;background:#edebe8;
column-count: 5; /* 2カラムに分割 */
  column-gap: 0; /* カラム間の余白を20pxに設定 */
  column-rule: 1px solid #333; /* カラム間に実線の境界線を表示 */
	}
.sp_footer img {width:99%}

.yokoku {margin:50px 0 0 0px;}
.yokoku_p1 {border:solid 1px #CCC; padding:3px 0 2px 0; width:120px; text-align:center;}
.yokoku_p2 {font-size:11px; text-align:left; margin-top:10px; margin-bottom:50px}
}

@media all and (max-width: 320px) {
h1 img {width:80%;}
  footer .level1 > li > a,
  footer .level1 > li > span {
    padding: 8px 5px 8px 12px;
  }
  footer .level1 > li {
    font-size: 13px;
  }
  footer .level1 > li > a,
  footer .level1 > li > span {
      padding: 7px 5px 7px 27px;
  }
  footer .level2 > li,footer .level3 > li {
    font-size: 11px;
  }
  footer .level1 > li > a:before,
  footer .level1 > li > span:before {
    top: 13px;
    left: 12px;
  }
  footer a,
  footer span {
      padding: 10px 5px 10px 11px;
  }
 
}

.effect {
	width: 100%;
	overflow: hidden;
	margin: 0;
}
.effect div {
	transition: 1.0s;
}
.ef-fade01 {
	opacity: 0;
}
.fade01 {
	opacity: 1.0;
}
.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);
}
.ef-fade03 {
	opacity: 0;
	transform: translate(-20px, 0);
	-webkit-transform: translate(-20px, 0);
}
.fade03 {
	opacity: 1.0;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
}
.ef-fade04 {
	opacity: 0;
	transform: translate(20px, 0);
	-webkit-transform: translate(20px, 0);
}
.fade04 {
	opacity: 1.0;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
}
.ef-zoom {
	transform: scale(0, 0);
	-webkit-transform: scale(0, 0);
}
.zoom {
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
}
.ef-rotation {
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
}
.rotation {
	transform: rotateY(360deg);
	-webkit-transform: rotateY(360deg);
}