@charset "utf-8";
/**
 * style 
 * (c) FOURDIGIT Inc.
 *
 * 1. import
 * 2. html, body
 * 3. HTMLtag, siteCommonClass
 * 4. Layout
 * 5. EachPageStyle
 *
 */
/**
 * 1. import
 */
@import "import/reset.css";
@import "import/util.css";
/*font-family: 'Dancing Script', cursive;*/
@import url('https://fonts.googleapis.com/css?family=Dancing+Script:400,700');
/*font-family: 'Reenie Beanie', cursive;*/
@import url('https://fonts.googleapis.com/css?family=Reenie+Beanie');
/*font-family: 'Spectral', serif;*/
@import url('https://fonts.googleapis.com/css?family=Spectral:200,200i,300,300i,400,400i,500,500i');
/*ゴシック英字　font-family: 'Roboto', sans-serif;*/
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i');
/*数字　font-family: 'Prata', serif;*/
@import url('https://fonts.googleapis.com/css?family=Prata');


/*icomoon*/
@font-face {
  font-family: 'icomoon';
  src:  url('../icon/icomoon.eot?j54xd9');
  src:  url('../icon/icomoon.eot?j54xd9#iefix') format('embedded-opentype'),
    url('../icon/icomoon.ttf?j54xd9') format('truetype'),
    url('../icon/icomoon.woff?j54xd9') format('woff'),
    url('../icon/icomoon.svg?j54xd9#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-map:before {
  content: "\e901";
}
.icon-menu:before {
  content: "\e904";
}
.icon-request:before {
  content: "\e907";
}
.icon-reserve:before {
  content: "\e908";
}
.icon-tel:before {
  content: "\e90e";
}
.icon-btn-arrow:before {
  content: "\e900";
}
.icon-close:before {
  content: "\e902";
}
.icon-down:before {
  content: "\e903";
}
.icon-info:before {
  content: "\e905";
}
.icon-mail:before {
  content: "\e906";
}
.icon-minus:before {
  content: "\e909";
}
.icon-next:before {
  content: "\e90a";
}
.icon-plus:before {
  content: "\e90b";
}
.icon-prev:before {
  content: "\e90c";
}
.icon-print:before {
  content: "\e90d";
}
.icon-up:before {
  content: "\e915";
}
.icon-zoom:before {
  content: "\e911";
}
.icon-home:before {
  content: "\e912";
}
.icon-freedial:before {
  content: "\e914";
}


@media only screen and (max-width:1024px) {
}

@media only screen and (max-width:640px){
}

/**
 * 2. html, body
 */

	body {
		background-color: #fff;
	}
	.page {
		color: #333;
		font-size: 14px;
		line-height: 1.5;
		letter-spacing: 0.10em;
		font-weight: 300;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	}

	
/**
 * 3. HTMLtag, siteCommonClass
 */
/* anchor */
	a {
		background-color: transparent;
		background-image: none;
		background-repeat: no-repeat;
		background-position: top left;
		color: #333333;
		text-decoration: none;
		transition: .4s;
	}
	a:visited {}
	a:hover {
		background-position: bottom right;
		text-decoration: none;
	}
	a:active {}
	a img{
		transition: .4s;		
	}
	a img:hover{
		opacity: .7;
	}

/* cap */
	.cap,
	.caption {
		font-family: "Segoe UI", "Yu Gothic", YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック' ,sans-serif;
		background: none;
		color: #666666;
		font-size: 10px;
		line-height: 15px;
		letter-spacing: 0.1em;
	}
	.cap {
		padding-top: 10px;
	}
	.color-white{
		color:#fff;
	}
	.color-black{
		color:#333333;
	}
	
/* imageCap */
	.imageCap {
		position: relative;
	}
	.imageCap .caption {
		position: absolute;
		left: 7px;
		bottom: 7px;
		text-align: left;
		padding:0 0 0 7px;
		/*text-shadow: 0px 0px 6px #fff, 0px 0px 6px #fff, 0px 0px 6px #fff;*/
	}


/* img */
	img {
		max-width: 100%;
		height: auto;
		vertical-align: top;
	}


/* pc sp */

	.sp{
		display: none;
	}

	img.sp,
	br.sp,
	br.spOnly {
		display: none !important;
	}
	@media only screen and (max-width:1024px) {
		br.sp {
			display: inline-block !important;
		}
		br.pc {
			display: none !important;
		}
	}
	@media only screen and (max-width:736px) {
		.sp{
			display: block;
		}
		img.sp,
		br.spOnly{
			display: inline-block !important;
		}
		img.pc {
			display: none !important;
		}
	}


/* telephone */
	.telephone {
		pointer-events: none;
	}
	@media only screen and (max-width:736px) {
		.telephone {
			pointer-events: visible;
		}
	}

/* .wrap */
	.wrap {
		width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
	.wrap02 {
		width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}

	@media only screen and (max-width:1200px) {
		.wrap02 {
			width: 100%;
			-webkit-box-sizing: border-box;
			   -moz-box-sizing: border-box;
			        box-sizing: border-box;
			padding-left: 20px;
			padding-right: 20px;
		}
	}
	@media only screen and (max-width:1000px) {	
		.wrap {
			width: 100%;
			-webkit-box-sizing: border-box;
			   -moz-box-sizing: border-box;
			        box-sizing: border-box;
			padding-left: 20px;
			padding-right: 20px;
		}
	}

/* alt text to span */
	img.toText {
		
	}
	
	span.altText {
		display: none;	
	}
	
	@media only screen and (max-width:640px){
		
		img.toText {
			display: none;
		}
		
		span.altText {
			display: inline;
		}
	}


/**
 * 4. Layout
 */
#gHeader {
	width: 100%;
	background-color: #fff;
}
#gHeader .section {
	padding: 0 60px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	overflow: hidden;
	position: relative;
}
.headline-01 {
		position: absolute;
	font-size: 10px;
	top: 15px;
	right: 60px;
	letter-spacing: 0.30em;
}
.header_logo {
	width: 394px;
	float: left;
	margin-top: 45px;
	-webkit-display: flex;
			display: flex;
	-webkit-justify-content: space-between;
	        justify-content: space-between;
	-webkit-align-items: center;
	        align-items: center;
}
.header_logo span {
	display: block;
}
span.header_logo-company {
	width: 95px;
}
span.header_logo-mansion {
	width: 285px;
}
span.header_logo-company img,
span.header_logo-mansion img {
	width: 100%;
}

/*ftrPankuzu*/
#ftrPankuzu{
	padding: 25px 0 20px;
	margin-top: 120px;
	border-top: solid 1px #efe9e3;
}
#ftrPankuzu ul li{
	display: inline-block;
	padding-bottom: 5px;
	font-size: 11px;
	letter-spacing: 0.1em;
	position: relative;
}
#ftrPankuzu ul li.on{
	border-bottom: dotted 1px #ad8f73;
}
#ftrPankuzu ul li:nth-child(n+2){
	margin-left:24px;
}
#ftrPankuzu ul li:nth-child(n+2):before{
	content: '>';
	font-size: 10px;
	color:#ccc;
	position: absolute;
	left: -16px;
	top: 0;
}
@media only screen and (max-width:736px) {
	#ftrPankuzu{
		margin-top: 60px;
	}
}


/*hNavArea*/
#hNavArea {
	margin-top: 45px;
	float: right;
	margin-bottom: 15px;
	-webkit-display: flex;
			display: flex;
	-webkit-flex-wrap: wrap;
	        flex-wrap: wrap;
    -webkit-justify-content: space-between;
            justify-content: space-between;
}

#pNav {
margin-right: 10px;
	margin-top: 14px;
}
#pNav ul{
	display: flex;
	align-items: center;
}
#pNav ul li {
display: block;
font-size: 10px;
line-height: 1;
padding-left: 10px;
position: relative;
-webkit-transition: .3s;
   -moz-transition: .3s;
        transition: .3s;
}
#pNav ul li:hover {
	opacity: 0.7;
}
#pNav ul li:nth-child(n+2) {
}
#pNav ul li a {
	color: #000;
	font-weight: bold;
	text-decoration: none;		
}
#pNav ul li i{
	font-size: 12px;
	margin-right:5px;
}
.cvNav {
	width: 285px;
}
.cvNav ul {
-webkit-display: flex;
		display: flex;
-webkit-flex-wrap: wrap;
        flex-wrap: wrap;
-webkit-justify-content: space-between;
        justify-content: space-between; 		
}
.cvNav ul li {
	font-size: 12px;
	line-height: 1;
	text-align: center;
	-webkit-transition: .3s;
	   -moz-transition: .3s;
	        transition: .3s;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.cvNav ul li a {
	color: #fff;
	text-decoration: none;
}
.cvNav ul li.request {
	background:#899994;
}
.cvNav ul li.reserve {
	background:#ad8f73;
}
.cvNav ul li:hover {
	opacity: 0.7;	
}

#hdrCvNav {
	width: 370px; 		
}
#hdrCvNav ul li {
	width: 180px;
	padding: 13px 0;
	font-weight:bold;
	position: relative;
}
#hdrCvNav ul li i{
	font-size: 12px;
	position: absolute;
	left: 10px;
	top:50%;
	-webkit-transform: translateY(-50%); /* Safari用 */
	transform: translateY(-50%);
}
@media only screen and (max-width:1024px) {
	#gHeader {
		padding-top: 20px;
			position: relative;
			z-index: 100;
	}
	.header_logo {
		text-align: center;
		width: 100%;
		display: block;
		margin: 0 auto 20px;
	}

	span.header_logo-company,
	span.header_logo-mansion {
		margin-left: auto;
		margin-right: auto;
	}
	span.header_logo-mansion {
		margin-top: 10px;
	}

	.headline-01,
	#hNavArea {
		display: none;
	}
}

@media only screen and (max-width:736px) {
	#gHeader .section {
		padding: 0;
	}
	.header_logo {
		width: 100%;
	}
	span.header_logo-mansion {
		
	}
	span.header_logo-company,
	span.header_logo-mansion {
		margin-left: auto;
		margin-right: auto;
	}
}

/*spNav*/
#spNav {
	display: none;
}
@media only screen and (max-width:1024px) {

	#spNav {
		display: block;
		width: 100%;
		background: #09212b;
		position: relative;
		z-index: 100;
	}	
	#spNav.fixed {
		z-index: 13;
		position: fixed;
		top: 0;
		left: 0;
	}
	#spNav ul {
		-webkit-display: flex;
				display: flex;
		-webkit-flex-wrap: nowrap;
		        flex-wrap: nowrap;
	    -webkit-justify-content: space-between;
	            justify-content: space-between;
	}
	#spNav ul li {
		width: 20%;
	}
	#spNav ul li a {
		text-align: center;
		display: block;
		padding: 10px 0;
		font-size: 14px;
		color:#fff;
		letter-spacing: 0.2px;
		text-decoration: none;
	}
	#spNav ul li a .icon {
		display: block;
		font-size: 30px;
	}
	#spNav ul li .menu-close {
		display: none;
	}
	#spMenu.is-active .menu-default {
		display: none;
	}
	#spMenu.is-active .menu-close {
		display: block;
	}
} 	
@media only screen and (max-width:736px) {
	#spNav ul li a .icon {
		display: block;
		font-size: 20px;
		padding-bottom: 5px;
	}
	#spNav ul li a {
		font-size: 10px;
	}	
}
	

#gNav {
	position: relative;
	background: #09212b;
}
#gNav.fixed{
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10;
}
#gNav ul {
	width: 960px;
	margin: 0 auto;
	-webkit-display: flex;
			display: flex;
	-webkit-flex-wrap: wrap;
	        flex-wrap: wrap;
	-webkit-justify-content: space-between;
	        justify-content: space-between;
}
#gNav ul li {
	position: relative;
	overflow-x: hidden;
	font-weight: bold;
}
#gNav ul li.new:before {
	content: url(../imgs/icon-new.png);
	position: absolute;
	top: 10px;
	left: 50%;
	-webkit-transform: translate(-50%,0);
	   -moz-transform: translate(-50%,0);
	    -ms-transform: translate(-50%,0);
	     -o-transform: translate(-50%,0);
	        transform: translate(-50%,0);
}
#gNav ul li a {
	font-size: 11px;
	color:#fff;
	padding: 17px 0;
	display: block;
	line-height: 1;
	text-decoration: none;
}
#gNav ul li a:before {
	left: 50%;
 	      transform-origin: left center;
  -webkit-transform-origin: left center;
	-webkit-transform: scale(0,1);
	   -moz-transform: scale(0,1);
	        transform: scale(0,1);
}
#gNav ul li a:after {
	right: 50%;
 	      transform-origin: right center;
  -webkit-transform-origin: right center;
	-webkit-transform: scale(0,1);
	   -moz-transform: scale(0,1);
	        transform: scale(0,1);		
}
#gNav ul li.on a:before,
#gNav ul li a:hover:before {
	-webkit-transform: scale(1,1);
	   -moz-transform: scale(1,1);
	        transform: scale(1,1);
}
#gNav ul li.on a:after,
#gNav ul li a:hover:after {
	-webkit-transform: scale(1,1);
	   -moz-transform: scale(1,1);
	        transform: scale(1,1);
}
#gNav ul li.request,
#gNav ul li.reserve,
#gNav ul li.outline {
	display: none;
}
#gNav ul li.on,
#gNav ul li:hover {
	position: relative;
}
#gNav ul li:after{
	content: '';
	position: absolute;
	width: 0;
	height: 3px;
	background: #ad8f73;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transition: .4s;
}
#gNav ul li.on:after,
#gNav ul li:hover:after{
	width: 100%;
}
#gNav ul li.off{
	pointer-events: none;	
}
#gNav ul li.off a {
	color: #848484;
}
@media only screen and (max-width:1024px) {
	#gNav {
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		border-bottom: none;
		position: absolute;
		width: 100%;
		height: 100%;
		padding: 0 30px;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
		left: 0;
		z-index: 13;
		-webkit-transition: .3s;
		   -moz-transition: .3s;
		        transition: .3s;
		-webkit-transform: translate(0,-100%);
		   -moz-transform: translate(0,-100%);
		        transform: translate(0,-100%);
	}
	#gNav.fixed {
		position: fixed;			
	}

	#gNav.is-active {
		-webkit-transition: .3s;
		   -moz-transition: .3s;
		        transition: .3s;
		-webkit-transform: translate(0,0);
		   -moz-transform: translate(0,0);
		        transform: translate(0,0);
	}
	#gNav:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #fff;	
		visibility: hidden;
		opacity: 0;
		z-index: -1;
		-webkit-transition: .3s .3s;
		   -moz-transition: .3s .3s;
		        transition: .3s .3s;
	}
	#gNav.is-active:after {
		visibility: visible;
		opacity: 1;			
	}
	#gNav ul {
		width: 100%;
		height: 60%;
		background-color: #FFF;
		border-bottom: 1px solid #ccc;
		overflow: scroll;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	#gNav.fixed ul {
		height: 80%;
	}
	#gNav ul li {
		width: 100%;
		text-align: center;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
		border-top: 1px solid #ccc;
	}
	#gNav ul li.request,
	#gNav ul li.reserve {
		border-top: none;
	}
	#gNav ul li a {
		padding: 30px 0;
		font-size: 18px;
		color:#333;
	}

	#gNav ul li.on a {
		color: #c6afa0;
		font-weight: bold;
	}
	#gNav ul li.off a {
		color: #bbb;
	}
	#gNav ul li:after{
		content: none;
	}

	#gNav ul li a:before,
	#gNav ul li a:after {
		content: none;
	}
	#gNav ul li span {
		display: block;
	}
	#gNav ul {
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
		padding-top: 30px;
	}
	#gNav ul li {
		
	}
	#gNav ul li.outline{
		display: block;
	}
	#gNav ul li.request,
	#gNav ul li.reserve {
		display: block;
		width: 100%;
		margin-bottom: 30px;
	}
	#gNav ul li.new:before { 
		top: 5px;
	}
	#gNav ul li a {
 		text-decoration: none;
 	}
 	#gNav ul li.request {
 		background: #899994;
 	}
 	#gNav ul li.reserve {
 		background: #ad8f73;
 	}
 	#gNav ul li.request,
	#gNav ul li.reserve {
		width: 50%;
	}
 	#gNav ul li.request a,
	#gNav ul li.reserve a {
		color: #fff;
		font-size: 20px;
 	}
 	#gNav ul li.request .icon,
	#gNav ul li.reserve .icon {
		font-size: 20px;
		display: inline-block;
		vertical-align: middle;
		margin-right: 10px;
	}

	}
	@media only screen and (max-width:736px) {
		#gNav {
			padding: 0 20px;
		}
	#gNav ul li a {
		font-size: 14px;
		padding: 20px 0;
	}	
 	#gNav ul li.request a,
	#gNav ul li.reserve a {
		font-size: 14px;
 	}
}
/*--------------------
テキストfont-family
---------------------*/
/*Roboto 英字タイトル*/
.Roboto{
	font-family: 'Roboto', sans-serif;
	color:#ad8f73;
	letter-spacing: 0.3em;
}
.gothic{
	font-family: -apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */
		       'Helvetica Neue', /* Macの欧文 (OS X 10.10以前) */
		       'Segoe UI',       /* Windowsの欧文 */
		       YuGothicM,        /* Windows8.1以上は游ゴシック */
		       YuGothic,         /* Macの游ゴシック */
		       Meiryo,           /* 游ゴシックが入っていないWindows */
		       sans-serif;
}
/* Windows */
@font-face {
	font-family: YuGothicM;
	font-weight: normal;
	src: local('YuGothic-Medium'),  /* Mediumを明示的に指定 */
	local('Yu Gothic Medium'), /* Chrome用 */
	local('YuGothic-Regular'); /* Windows8.1ではMediumがないのでRegularを指定 */
}
@font-face {
	font-family: YuGothicM;
	font-weight: bold;
	src: local('YoGothic-Bold'), /* Boldはそのまま */
	local('Yu Gothic');     /* Chrome用 */
}

.text{
	font-size:14px;
	letter-spacing: 0.1em;

	font-family: -apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */
		       'Helvetica Neue', /* Macの欧文 (OS X 10.10以前) */
		       'Segoe UI',       /* Windowsの欧文 */
		       YuGothicM,        /* Windows8.1以上は游ゴシック */
		       YuGothic,         /* Macの游ゴシック */
		       Meiryo,           /* 游ゴシックが入っていないWindows */
		       sans-serif;
}
/* Windows */
@font-face {
	font-family: YuGothicM;
	font-weight: normal;
	src: local('YuGothic-Medium'),  /* Mediumを明示的に指定 */
	local('Yu Gothic Medium'), /* Chrome用 */
	local('YuGothic-Regular'); /* Windows8.1ではMediumがないのでRegularを指定 */
}
@font-face {
	font-family: YuGothicM;
	font-weight: bold;
	src: local('YoGothic-Bold'), /* Boldはそのまま */
	local('Yu Gothic');     /* Chrome用 */
}
@media only screen and (max-width:736px) { 
	.text{
		font-size:12px;
	}
}

/*---------------------
headline
--------------------*/
/*headline-02*/
.headline.headline-02{
	font-size: 26px;
	text-align: center;
	letter-spacing: 0.25em;
	color:#fff;
	font-family: 'Roboto', sans-serif;
}
.headline.headline-02{
	display: inline-block;

	position: absolute;
	left: 0;
	right: 0;
	top:50%;
	top:50%;
	-webkit-transform: translateY(-50%); /* Safari用 */
	transform: translateY(-50%);
	margin:auto;
}
.headline.headline-02 span{
	position: relative;
	padding-bottom: 10px;
	padding-left: 0.25em;
}
.headline.headline-02 span:before{
	content: '';
	width: 96%;
	height: 1px;
	position: absolute;
	left: 0;
	right: 0;
	bottom:0;
	margin:auto;
	background: rgba(255,255,255,.5);
}
/*headline-03*/
.headline.headline-03{
	font-size: 18px;
	color:#111;
	text-align: center;
	margin-bottom: 50px;
	letter-spacing: 0.12em;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.headline.headline-03.left{
	text-align: left;
	margin-bottom: 20px;
}
.headline.headline-03 .cmt{
	margin-top: 25px;
}
.cmt{
	font-size:14px;
	color:#333;
	letter-spacing: 0.1em;

	font-family: -apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */
		       'Helvetica Neue', /* Macの欧文 (OS X 10.10以前) */
		       'Segoe UI',       /* Windowsの欧文 */
		       YuGothicM,        /* Windows8.1以上は游ゴシック */
		       YuGothic,         /* Macの游ゴシック */
		       Meiryo,           /* 游ゴシックが入っていないWindows */
		       sans-serif;
}
/* Windows */
@font-face {
	font-family: YuGothicM;
	font-weight: normal;
	src: local('YuGothic-Medium'),  /* Mediumを明示的に指定 */
	local('Yu Gothic Medium'), /* Chrome用 */
	local('YuGothic-Regular'); /* Windows8.1ではMediumがないのでRegularを指定 */
}
@font-face {
	font-family: YuGothicM;
	font-weight: bold;
	src: local('YoGothic-Bold'), /* Boldはそのまま */
	local('Yu Gothic');     /* Chrome用 */
}

@media only screen and (max-width:736px) {
	/*headline-02*/
	.headline.headline-02{
		font-size: 20px;
	}
	/*headline-03*/
	.headline.headline-03{
		font-size: 16px;
		margin-bottom: 40px;
		text-align: left;
	}
	.cmt{
		font-size:12px;
		line-height: 1.7;
	}
}

/*---------------
section
---------------*/
.section{
	margin-top: 100px;
}
#gHeader .section,
.section.mainVis,
#contact.section{
	margin-top: 0;
}
/*subsection*/
.subsection{
	margin-top: 70px;
}
@media only screen and (max-width:736px) {
	.section{
		margin-top: 70px;
	}
	/*subsection*/
	.subsection{
		margin-top: 40px;
	}
}

/*----------------
font
----------------*/
.num{
	font-family: 'Prata', serif;
}

/*----------------
mainVis
----------------*/
.mainVis{
	width: 100%;
	height: 300px;
	position: relative;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
	margin-bottom:70px;
}
.mainVis .cap{
	position: absolute;
	right: 7px;
	bottom: 7px;
}
@media only screen and (max-width:736px) {
	.mainVis{		
		height: 200px;
		margin-bottom:30px;
	}
}
/*-----------------
btn
------------------*/
.btnBox{
	display: flex;
	justify-content: center;
	margin-top: 30px;
}
.btnBox .btn:nth-child(n+2){
	margin-left: 10px;
}
.btn{
	width:200px;
	font-family: 'Roboto', sans-serif;
	font-weight:200;
	font-size: 12px;
	color:#09212b;
	letter-spacing: 0.3em;
	text-align: center;
	box-sizing: border-box;
	transition: .4s;
}
.btn a,
.btn-print{
	display: block;
	color:#09212b;
	padding:10px;
	border:solid 1px #7c888d;
	cursor: pointer;
}
.btn:hover a,
.btn-print:hover{
	background: #09212b;
	color:#fff;
	border:solid 1px #09212b;
}
.btn.off{
	pointer-events: none;
}
@media only screen and (max-width:736px) {
	.btn-print{
		display: none;
	}
}

/*--------------------
clmBox
---------------------*/
.clmBox{
	display: -webkit-flex; /* Safari */
	display: flex;
	-webkit-justify-content: center; /* Safari */
	justify-content: center;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap: wrap;
}
/*clm2pa*/
.clmBox.clm2pa .clm{
	width: 48%;
}
.clmBox.clm2pa .clm:nth-child(n+2){
	margin-left: 4%;
}
.clmBox.clm2pa .clm:nth-child(3){
	margin-left: 0;
}
.clmBox.clm2pa .clm:nth-child(n+3){
	margin-top: 30px;
}
/*clm2pa-img：SPのとき間隔広め用*/
.clmBox.clm2pa-img .clm{
	width: 48%;
}
.clmBox.clm2pa-img .clm:nth-child(n+2){
	margin-left: 4%;
}
.clmBox.clm2pa-img .clm:nth-child(3){
	margin-left: 0;
}
.clmBox.clm2pa-img .clm:nth-child(n+3){
	margin-top: 30px;
}
/*clm2diff*/
.clmBox.clm2diff .clm{
	width: 27%;
}
.clmBox.clm2diff .clm:nth-child(n+2){
	width: 68%;
	margin-left: 5%;
}
/*clm3pa*/
.clmBox.clm3pa .clm{
	width: 31%;
}
.clmBox.clm3pa .clm:nth-child(n+2){
	margin-left: 3.5%;
}
.clmBox.clm3pa .clm:nth-child(4){
	margin-left: 0;
}
.clmBox.clm3pa .clm:nth-child(n+4){
	margin-top: 30px;
}
/*clm3pa-img：SPのとき間隔広め用*/
.clmBox.clm3pa-img .clm{
	width: 31%;
}
.clmBox.clm3pa-img .clm:nth-child(n+2){
	margin-left: 3.5%;
}
.clmBox.clm3pa-img .clm:nth-child(4){
	margin-left: 0;
}
.clmBox.clm3pa-img .clm:nth-child(n+4){
	margin-top: 30px;
}
/*clm6pa-img：SPのとき間隔広め用*/
.clmBox.clm6pa-img .clm{
	width: 16%;
}
.clmBox.clm6pa-img .clm:nth-child(n+2){
	margin-left: 0.8%;
}
@media only screen and (max-width:736px) {
	.clmBox{
	}
	.clmBox.clm2pa .clm,
	.clmBox.clm2pa-img .clm{
		width: 100%;
	}
	.clmBox.clm2pa .clm:nth-child(n+2){
		margin-left: 0;
		margin-top: 50px;
	}
	.clmBox.clm2pa-img .clm:nth-child(n+2){
		margin-left: 0;
		margin-top: 30px;
	}
	/*clm2diff*/
	.clmBox.clm2diff .clm{
		width: 100%;
	}
	.clmBox.clm2diff .clm:nth-child(n+2){
		width: 100%;
		margin-left: 0;
		margin-top: 20px;
	}
	.clmBox.clm3pa .clm,
	.clmBox.clm3pa-img .clm{
		width: 100%;
	}
	.clmBox.clm3pa .clm:nth-child(n+2){
		margin-left: 0;
		margin-top: 40px;		
	}
	.clmBox.clm3pa-img .clm:nth-child(n+3){
		margin-left: 0;
		margin-top: 20px;
	}
	/*SPで2カラム*/
	.clmBox.clm3pa.spclm2 .clm,
	.clmBox.clm3pa-img.spclm2 .clm{
		width: 48%;
	}
	.clmBox.clm6pa-img.spclm3 .clm{
		width: 32%;
	}
	.clmBox.clm3pa.spclm2 .clm:nth-child(n+2),
	.clmBox.clm3pa-img.spclm2 .clm:nth-child(n+2),
	.clmBox.clm6pa-img.spclm3 .clm:nth-child(n+2){
		margin-left: 0;
	}
	.clmBox.clm3pa.spclm2 .clm:nth-child(n+3){
		margin-top: 30px;
	}
	.clmBox.clm6pa-img.spclm3 .clm:nth-child(n+2){
		margin-left:2%;
	}
	.clmBox.clm3pa-img.spclm2 .clm:nth-child(n+3){
		margin-top: 10px;
	}
	.clmBox.clm6pa-img.spclm3 .clm:nth-child(4){
		margin-left: 0;
	}
	.clmBox.clm6pa-img.spclm3 .clm:nth-child(n+4){
		margin-top: 10px;
	}
	.clmBox.clm3pa.spclm2 .clm:nth-child(even),
	.clmBox.clm3pa-img.spclm2 .clm:nth-child(even){
		margin-left: 4%;
	}
}


/*printArea*/
.printArea{
	display: none;
}

/*-----------------
lineBox
------------------*/
.lineBox{
	border:solid 1px #e0e0e0;
	padding:30px;
	box-sizing: border-box;
	text-align: center;
}
@media only screen and (max-width:736px) {
	.lineBox{
		padding:20px;
	}
}

/* Footer */
#gFooter {
	position: relative;
}

#ftrTop {
	position: relative;
	background-color: #f8f1eb;
	padding-bottom: 145px;
	border-top:solid 1px #efe9e3;
}
@media only screen and (max-width:1024px) {
	#ftrTop {
		padding: 0;
	}	
}
/**/
#appArea {
	text-align: center;
	padding: 40px 20px;
}
#appArea li{
	display:inline-block;
}
@media only screen and (max-width:1024px) {
 	#appArea {
 		text-align: center;
 		padding: 20px 20px 30px;
	}
		
}

/*fNav*/
#fNav {
	padding: 35px 0;
}
#fNav ul {
	margin: 0 auto;
	-webkit-display: flex;
			display: flex;
	-webkit-flex-wrap: wrap;
	        flex-wrap: wrap;
	-webkit-justify-content: space-between;
	        justify-content: space-between;
}
#fNav ul li {
	font-weight:bold;
}
#fNav ul li.on {
	font-weight: bold;
}
#fNav ul li a:hover,
#fNav ul li.on a{	
	color:#ad8f73;
}
#fNav ul li.off a {
	opacity: .3;
	cursor: default;
	pointer-events: none;
}
#fNav ul li a {
	font-size: 11px;
	line-height: 1;
	text-decoration: none;
}

@media only screen and (max-width:960px) {
	#fNav{
		padding: 35px 0 0;		
	}
	#fNav ul li{
		width: 49%;
		text-align: center;
	}
	#fNav ul li:nth-child(n+2){
		margin-right: 2%;
	}
	#fNav ul li:nth-child(2n){
		margin-right: 0;
	}
	#fNav {
	}		
}

/*ftrCaption*/
#ftrCaption {
}
@media only screen and (max-width:1024px) {
	#ftrCaption {
		padding: 30px 0 40px;
	}
}

/*contactArea*/
#contactArea {
	padding: 10px 0;
	background: #09212b;
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	z-index: 100;
	-webkit-transition: .7s;
	   -moz-transition: .7s;
	        transition: .7s;
	-webkit-transform: translate(0,0);
	   -moz-transform: translate(0,0);
	        transform: translate(0,0);
}
#contactArea.is-hidden {
	-webkit-transform: translate(0,150%);
	   -moz-transform: translate(0,150%);
	        transform: translate(0,150%);
}
#contactArea.is-fixed {
	position: absolute;
	border-top: none;
}
#contactArea .wrap {
	-webkit-display: flex;
    		display: flex;
	-webkit-flex-wrap: wrap;
		        flex-wrap: wrap;
	-webkit-justify-content: space-between;
	        justify-content: space-between;
    -webkit-align-items: center;
            align-items: center;
	-webkit-flex-direction: row-reverse;
			flex-direction: row-reverse;		
}
	@media only screen and (max-width:1024px) {
		#contactArea {
			position: static;
		}
		#contactArea .wrap {
			display: block;
		}
	}


/*ftrpNav*/
#ftrpNav {
	margin-left:85px;
}
#ftrpNav ul{
}
#ftrpNav ul li {
	display: block;
	font-size: 10px;
	line-height: 1;
	padding-left: 10px;
	position: relative;
	-webkit-transition: .3s;
	   -moz-transition: .3s;
	        transition: .3s;
}
#ftrpNav ul li:hover {
	opacity: 0.7;
}
#ftrpNav ul li:nth-child(n+2) {
	margin-top: 10px;
}
#ftrpNav ul li a {
	color: #fff;
	font-weight: bold;
	text-decoration: none;		
}
#ftrpNav ul li i{
	font-size: 12px;
	margin-right:5px;
}
@media only screen and (max-width:1024px) {
	#ftrpNav{
		display: none;
	}

}
/*ftrCvNav*/
#ftrCvNav {
	width: 390px; 		
}
#ftrCvNav ul li {
	width: 190px;
	font-size: 16px;
	position: relative;
}
#ftrCvNav ul li a {
	width: 100%;
	display: block;
	padding: 27px 0;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box; 		
}
#ftrCvNav ul li i{
	font-size: 14px;
	position: absolute;
	left: 15px;
	top:50%;
	-webkit-transform: translateY(-50%); /* Safari用 */
	transform: translateY(-50%);
}
@media only screen and (max-width:1024px) {

	#ftrCvNav,
	#ftrCvNav.cvNav ul li {
		width: 100%;
		
	}
	#ftrCvNav.cvNav {
		max-width: 510px;
		margin: 0 auto 30px;
	}
	#ftrCvNav.cvNav ul {
		display: block;
		
	}
	#ftrCvNav.cvNav ul li {
		margin-top: 5px;
	}
	#ftrCvNav.cvNav ul li:first-child {
		margin-top: 0;
	}
}

/*contact*/
#contact {
	color: #fff;
	line-height: 1;
}
.contact_inner {
	-webkit-display: flex;
    		display: flex;
	-webkit-flex-wrap: wrap;
		        flex-wrap: wrap;
	-webkit-justify-content: space-between;
	        justify-content: space-between;
    -webkit-align-items: center;
            align-items: center;
}
.contact_name {
	font-size: 13px;
	letter-spacing: 1.8px;
	margin-bottom: 5px;
}
.contact_tel {
	vertical-align: top;
	font-size: 33px;
	letter-spacing: 0.2px;
	font-family: 'Prata', serif;
}	
.contact_tel .img-icon-freecall {
	margin-right: 10px;
	vertical-align: top;		
}
.contact_tel .img-icon-freecall:before {
	content: '';
	background: url(../imgs/icon-freecall.png) no-repeat;
	-webkit-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
	width: 39px;
	height: 29px;
	margin-top: 10px;
	display: inline-block;
}
.contact_tel a {
	color: #fff;
	text-decoration: none;
}
.contact_tel span.sp {
	display: none;
} 
.contact_hour {
	font-size: 11px;
	letter-spacing: 0.6px;
	margin-left: 20px;
	line-height: 1.5;
}
@media only screen and (max-width:1024px) {
	#contactArea {
		padding: 30px 0;
	}
	#contact {
		text-align: center;
	}
	.contact_tel {
		margin-bottom: 5px;
	}
	.contact_inner {
		display: block;
	}
}
@media only screen and (max-width:736px) {
	.contact_tel .img-icon-freecall:before {
		content: none;
	}
	.contact_tel {
		font-size: 20px;
		line-height: 1;
	}
	.contact_name,
	.contact_tel {
		margin-bottom: 15px;			
	}
	.contact_tel span.pc {
		display: none;
	}
	.contact_tel span.sp {
		display: inline-block;
	} 
	.contact_tel .icon:before {
		font-size: 14px;
	}
}

#clioNav {
	clear: both;
	text-align: center;
	font-size: 12px;
	line-height: 18px;
	border-top: 1px solid #d0d0d0;
	padding: 25px 0;
}
#clioNav ul { zoom: 1; }
#clioNav ul:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }

#clioNav ul li {
	float: left;
	width: 33%;
	text-align: center;
	vertical-align: baseline;
	zoom:1;
	border-left-width: 1px;
  	border-left-style: solid;
  	border-left-color: #d6d6d6;
  	padding: 5px 0;
}
#clioNav ul:after { content : ''; display : block; clear : both; }
#clioNav ul li:first-child {
	border-left: 0;
}
#clioNav ul li a {
	color: #3a3a3a;
	text-decoration: none;
}
#clioNav ul li a img {
	margin-bottom: 5px;
}
#clioNav ul li a span {
	display: block;
	font-size: 12px;
	line-height: 18px;
	vertical-align: middle;
}
#clioNav ul li a span:before {
	content: "▶";
	display: inline-block;
	font-family: 'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro';	
	margin-right: 5px;
	font-size: 10px;
	line-height: 18px;
}
@media only screen and (max-width:1024px) {
	#clioNav {
		padding: 0;
	}
	#clioNav .wrap {
		padding: 0;
	}
	#clioNav ul li {
		float: none;
		width: 100%;
		border-bottom: 1px solid #d6d6d6;
		border-left: none;
	}
}

/*copyrightArea*/
#copyrightArea {
	clear: both;
}
#copyrightArea .linkArea {
	padding: 15px 0;
	border-bottom: 1px solid #e2e2e2;
	zoom: 1;
}
#copyrightArea .linkArea:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }
#copyrightArea .linkArea .fLogoMain {
	float: left;
	margin-top: 15px;
}
#copyrightArea .linkArea .fLogoMain img {
	width: 340px;
}
#copyrightArea .linkArea ul {
	float: right;
	font-size: 10px;
}
#copyrightArea .linkArea ul li {
	float: left;
	margin-left: 15px;
}
#copyrightArea .linkArea ul li.fLogo01 img {
	width: 148px;
}

#copyrightArea .copyright {
	padding: 20px 0;
	text-align: right;
	font-size: 10px;
	line-height: 15px;
}
@media only screen and (max-width:1024px) {
	#copyrightArea {
		text-align: center;
	}
	#copyrightArea .linkArea,
	#copyrightArea .linkArea ul,
	#copyrightArea .linkArea ul li,
	#copyrightArea .linkArea .fLogoMain {
		float: none;	
	}
	#copyrightArea .linkArea .fLogoMain {
		margin: 0 auto 20px;
	}
	#copyrightArea .linkArea .fLogo01 {
		width: 145px;
		margin: 0 auto;
		text-align: left;
	}
	#copyrightArea .copyright {
		text-align: center;
	}		
}


#bnrArea {
	text-align: center;
	padding:40px 0 0;
}
.bnrArea-clm {
	margin: 20px 0;	
}
.bnrArea-clm .clm{
	width: 49.2%;
}
.bnrArea-clm .clm:nth-child(n+2){
	margin-left:1.6%; 
}
@media only screen and (max-width:736px) {
	#bnrArea{
		margin-top: 0;
	}
	.bnrArea-clm{
		margin: 10px 0;		
	}
	.bnrArea-clm .clm{
		width: 100%;
	}
	.bnrArea-clm .clm:nth-child(n+2){
		margin-left:0; 
		margin-top: 10px;
	}
}

/* pagetop */
#gFooter .pagetop {
	position: fixed;
	right: 60px;
	bottom: 125px;
	z-index: 100;
	transition: .4s;
	opacity: 0;
}
#gFooter .pagetop.is-fixed {
	position: absolute;
	border-top: none;
	opacity: 1;
}
#gFooter .pagetop a {
	position: relative;

	/* transition */
	-webkit-transition: .3s;
	transition: .3s;
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
#gFooter .pagetop a:hover {
	opacity: 0.7;
}

@media only screen and (max-width:1024px) {
	#gFooter .pagetop{
		bottom: 35px;
	}
}
@media only screen and (max-width:736px) {
	#gFooter .pagetop{
		right: 20px;
	}
}

/*****
 * 5. popup
*****/