/* TABLE OF CONTENTS:
 *
 * 00 どのサイズでも共通で適用されるスタイル
 *    - ビルボード
 *    - 新着情報
 *    - 店舗案内
 *    - googleMap
 *    - スタッフ紹介
 * 01 幅 768px 未満
 *    - 店舗案内
 *    - googleMap
 * 02 幅 480px 以上
 * 03 幅 768px 以上
 *    - ビルボード
 *    - 店舗案内
 *    - googleMap
 *    - スタッフ紹介
 * 04 幅 880px 以上
 *    - 新着情報
 * 05 幅 1072px 以上
 * 06 幅 1264px 以上
 */

/* --------------------------------------------------------------------------------------------------------
   01
 *
 * どのサイズでも共通で適用されるスタイル
 */

.box img {
	vertical-align: bottom;
}

/*ビルボード*/
.site-main #mainImg {
	background-image: none;
	padding-top: 0;
	padding-bottom: 0;
}

#mainImg > div {
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
}

#mainImg div h1,
#mainImg div p {
	color: #333;
}



/* 新着情報 */
#news {
	padding: 0 !important;
	position: relative;
}

#news img {
	vertical-align: bottom;
}

#news dl {
	margin: 0;
}

#news dl dt {
	background-color: #316745;
	color: #FFF;
	font-family: 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'HGP明朝B', serif;
	font-weight: normal;
	padding: 0.5em 0;
}

#news dl dt span {
	background-image: url('data:image/svg+xml;charset=utf8,%3C!--%20Generator%3A%20Adobe%20Illustrator%2018.1.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200)%20--%3E%3Csvg%20version%3D%221.1%22%20id%3D%22_x32_%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22width%3A%2048px%3B%20height%3A%2048px%3B%20opacity%3A%201%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%234B4B4B%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M255.992%2C0.008C114.626%2C0.008%2C0%2C114.626%2C0%2C256s114.626%2C255.992%2C255.992%2C255.992%20C397.391%2C511.992%2C512%2C397.375%2C512%2C256S397.391%2C0.008%2C255.992%2C0.008z%20M300.942%2C373.528c-10.355%2C11.492-16.29%2C18.322-27.467%2C29.007%20c-16.918%2C16.177-36.128%2C20.484-51.063%2C4.516c-21.467-22.959%2C1.048-92.804%2C1.597-95.449c4.032-18.564%2C12.08-55.667%2C12.08-55.667%20s-17.387%2C10.644-27.709%2C14.419c-7.613%2C2.782-16.225-0.871-18.354-8.234c-1.984-6.822-0.404-11.161%2C3.774-15.822%20c10.354-11.484%2C16.289-18.314%2C27.467-28.999c16.934-16.185%2C36.128-20.483%2C51.063-4.524c21.467%2C22.959%2C5.628%2C60.732%2C0.064%2C87.497%20c-0.548%2C2.653-13.742%2C63.627-13.742%2C63.627s17.387-10.645%2C27.709-14.427c7.628-2.774%2C16.241%2C0.887%2C18.37%2C8.242%20C306.716%2C364.537%2C305.12%2C368.875%2C300.942%2C373.528z%20M273.169%2C176.123c-23.886%2C2.096-44.934-15.564-47.031-39.467%20c-2.08-23.878%2C15.58-44.934%2C39.467-47.014c23.87-2.097%2C44.934%2C15.58%2C47.015%2C39.458%20C314.716%2C152.979%2C297.039%2C174.043%2C273.169%2C176.123z%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%3B%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat;
	background-position: 12px center;
	background-size: auto 70%;
	display: block;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
	padding: 0.1em 0.8em 0.1em 2em;
}

#news dl dd {
	margin: 0;
}

#news dl dd ul:not(.swiper-wrapper) {
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
}

#news dl dd ul:not(.swiper-wrapper) li {
	border-bottom: 1px #CCC solid;
	list-style: none;
	display: flex;
	margin-top: 0;
	padding: 1em 0;
}

#news dl dd ul:not(.swiper-wrapper) li .thumb {
	margin-right: 1em;
	width: 60px;
}

#news dl dd ul:not(.swiper-wrapper) li .thumb + div {
	flex: 1;
}

#news dl dd ul:not(.swiper-wrapper) li .date {
	background: #999999;
	border-radius: 5px;
	color: #FFF;
	display: inline-block;
	text-align: center;
	font-size: 0.8em;
	margin-right: 0.5em;
	padding: 0.1em 0.5em;
}

#news dl dd ul:not(.swiper-wrapper) li .shop {
	display: inline-block;
}

#news dl dd ul:not(.swiper-wrapper) li a {
	display: inline-block;
	margin-top: 0.5em;
	width: 100%;
}

#news dl dd:not(.btn) {
	padding: 0 1em 1em;
}

#news dl dd.btn {
	text-align: right;
	position: absolute;
	top: 10px;
	right: 0;
	left: 0;
	max-width: 1000px;
	margin: 0 auto;
	padding-right: 10px;
}

#news dl dd.btn a {
	background: #19482a;
	border-radius: 3px;
	color: #d4ab3c;
	display: inline-block;
	font-size: 0.8em;
	padding: 0.1em 0.8em;
}

#news dl dd.btn a:after {
	font-family: "Font Awesome 5 free";
	font-weight: 900;
	content: "\f105";
	display: inline-block;
	margin-left: 0.5em;
}

#news dl dd ul:not(.swiper-wrapper) li .label {
	background: #999999;
	border-radius: 5px;
	color: #FFF;
	display: inline-block;
	text-align: center;
	font-size: 0.8em;
	margin-right: 0.5em;
	padding: 0.1em 0.5em;
}

#news dl dd ul:not(.swiper-wrapper) li .label.campaign {
	background: #cc5f05;
}

#news dl dd ul:not(.swiper-wrapper) li .label.info {
	background: #598c6c;
}


/* 店舗案内 */
section[id$="info"] table tr {
	border: none;
}

section[id$="info"] table th {
	background-color: #316745;
	border: 2px #FFF solid;
	color: #F5F5F5;
	font-weight: normal;
	font-size: 1rem;
	text-align: center;
	padding: 1rem;
	width: 8em;
}

section[id$="info"] table td {
	background-color: #f7f7f7;
	border: 2px #FFF solid;
	font-size: 1rem;
	padding: 1rem;
}

section[id$="info"] h3 {
	border-bottom: 1px #CCC solid;
	padding-bottom: 0.5em;
}



/* googleMap */
.gmap {
	height: 0;
	overflow: hidden;
	position: relative;
}

.gmap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}



/* スタッフ紹介 */
.staff-wrap {
	background-color: #FFF;
	border-radius: 0.5em;
	padding: 2em;
}

.staff-wrap .image {
	text-align: center;
}

.staff-wrap .detail .staff-name {
	font-family: 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'HGP明朝B', serif;
}

.staff-wrap .detail .staff-name .pos {
	border-bottom: 1px #333 solid;
	display: inline-block;
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 0.2em;
	padding-bottom: 0.2em;
	width: 100%;
}

.staff-wrap .detail .staff-name .name1 {
	display: inline-block;
	font-size: 1.5em;
	font-weight: bold;
}

.staff-wrap .detail .staff-name .name1 + br {
	display: none;
}

.staff-wrap .detail .staff-name .name2 {
	display: inline-block;
	font-size: 1.2em;
	margin-left: 1em;
}

.staff-wrap .detail ul {
	margin-top: 1em;
}

.staff-wrap .detail ul li {
	display: inline-block;
	margin-right: 3em;
	lis-style: none;
}




/* --------------------------------------------------------------------------------------------------------
   01
 *
 * 幅 768px 未満
 */
@media screen and (max-width: 767px) {

	/*ビルボード*/
	.site-main #mainImg {
		background-color: #FFF;
		background-size: contain;
		background-position: left bottom;
	}

	.site-main #mainImg h1 {
		padding-top: 3vw;
	}

	.site-main #mainImg h1 + div p img {
		width: 70%;
	}

	/* 新着情報 */
	#news dl dd ul:not(.swiper-wrapper) li .label {
		margin-left: 1em;
	}

	/*店舗案内*/
	.store-photo {
		max-width: 665px;
		margin-right: auto !important;
		margin-left: auto !important;
	}

	.store-photo .sub-photo {
		display: flex;
		justify-content: space-between;
	}

	.store-photo .sub-photo > * {
		width: 49%;
	}



	/*googleMap*/
	.gmap {
		padding-bottom: 400px;
	}

}

/* End max767px */



/* --------------------------------------------------------------------------------------------------------
   02
 *
 * 幅 480px 以上
 */
@media screen and (min-width: 30em) {}

/* End 620px Mobile Large */



/* --------------------------------------------------------------------------------------------------------
   03
 *
 * 幅 768px 以上
 */
@media screen and (min-width: 48em) {

	/*ビルボード*/
	.site-main #mainImg {
		background-color: #e9e4d4;
		text-align: left;
		position: relative;
	}

	#mainImg:before {
		background-position: left top, center, right center;
		background-repeat: no-repeat;
		background-size: auto 100%, auto, auto 100%;
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.shop-nakano #mainImg:before {
		background-image: url(../img/bg/under-bg.png), -webkit-linear-gradient(left, rgba(233, 228, 212, 1) 0%, rgba(233, 228, 212, 1) 60%, rgba(233, 228, 212, 0) 70%, rgba(233, 228, 212, 0) 100%), url(../img/contents/shop-nakano-bil.jpg);
		background-image: url(../img/bg/under-bg.png), linear-gradient(to right, rgba(233, 228, 212, 1) 0%, rgba(233, 228, 212, 1) 60%, rgba(233, 228, 212, 0) 70%, rgba(233, 228, 212, 0) 100%), url(../img/contents/shop-nakano-bil.jpg);
	}

	.shop-nagoya #mainImg:before {
		background-image: url(../img/bg/under-bg.png), -webkit-linear-gradient(left, rgba(233, 228, 212, 1) 0%, rgba(233, 228, 212, 1) 60%, rgba(233, 228, 212, 0) 70%, rgba(233, 228, 212, 0) 100%), url(../img/contents/shop-nagoya-bil.jpg);
		background-image: url(../img/bg/under-bg.png), linear-gradient(to right, rgba(233, 228, 212, 1) 0%, rgba(233, 228, 212, 1) 60%, rgba(233, 228, 212, 0) 70%, rgba(233, 228, 212, 0) 100%), url(../img/contents/shop-nagoya-bil.jpg);
	}

	.shop-kyoto #mainImg:before {
		background-image: url(../img/bg/under-bg.png), -webkit-linear-gradient(left, rgba(233, 228, 212, 1) 0%, rgba(233, 228, 212, 1) 60%, rgba(233, 228, 212, 0) 70%, rgba(233, 228, 212, 0) 100%), url(../img/contents/company-bil.jpg);
		background-image: url(../img/bg/under-bg.png), linear-gradient(to right, rgba(233, 228, 212, 1) 0%, rgba(233, 228, 212, 1) 60%, rgba(233, 228, 212, 0) 70%, rgba(233, 228, 212, 0) 100%), url(../img/contents/company-bil.jpg);
	}

	.shop-osaka #mainImg:before {
		background-image: url(../img/bg/under-bg.png), -webkit-linear-gradient(left, rgba(233, 228, 212, 1) 0%, rgba(233, 228, 212, 1) 60%, rgba(233, 228, 212, 0) 70%, rgba(233, 228, 212, 0) 100%), url(../img/contents/shop-osaka-bil.jpg);
		background-image: url(../img/bg/under-bg.png), linear-gradient(to right, rgba(233, 228, 212, 1) 0%, rgba(233, 228, 212, 1) 60%, rgba(233, 228, 212, 0) 70%, rgba(233, 228, 212, 0) 100%), url(../img/contents/shop-osaka-bil.jpg);
	}

	.shop-kyoto-minami #mainImg:before {
		background-image: url(../img/bg/under-bg.png), -webkit-linear-gradient(left, rgba(233, 228, 212, 1) 0%, rgba(233, 228, 212, 1) 60%, rgba(233, 228, 212, 0) 70%, rgba(233, 228, 212, 0) 100%), url(../img/contents/shop-kyoto-minami-bil.jpg);
		background-image: url(../img/bg/under-bg.png), linear-gradient(to right, rgba(233, 228, 212, 1) 0%, rgba(233, 228, 212, 1) 60%, rgba(233, 228, 212, 0) 70%, rgba(233, 228, 212, 0) 100%), url(../img/contents/shop-kyoto-minami-bil.jpg);
	}

	.shop-fukuoka #mainImg:before {
		background-image: url(../img/bg/under-bg.png), -webkit-linear-gradient(left, rgba(233, 228, 212, 1) 0%, rgba(233, 228, 212, 1) 60%, rgba(233, 228, 212, 0) 70%, rgba(233, 228, 212, 0) 100%), url(../img/contents/shop-fukuoka-bil.jpg);
		background-image: url(../img/bg/under-bg.png), linear-gradient(to right, rgba(233, 228, 212, 1) 0%, rgba(233, 228, 212, 1) 60%, rgba(233, 228, 212, 0) 70%, rgba(233, 228, 212, 0) 100%), url(../img/contents/shop-fukuoka-bil.jpg);
	}
	.shop-yokohama #mainImg:before {
		background-image: url(../img/bg/under-bg.png), -webkit-linear-gradient(left, rgba(233, 228, 212, 1) 0%, rgba(233, 228, 212, 1) 60%, rgba(233, 228, 212, 0) 70%, rgba(233, 228, 212, 0) 100%), url(../img/contents/shop-yokohama-bil.jpg);
		background-image: url(../img/bg/under-bg.png), linear-gradient(to right, rgba(233, 228, 212, 1) 0%, rgba(233, 228, 212, 1) 60%, rgba(233, 228, 212, 0) 70%, rgba(233, 228, 212, 0) 100%), url(../img/contents/shop-yokohama-bil.jpg);
	}
	.shop-matsuyama #mainImg:before {
		background-image: url(../img/bg/under-bg.png), -webkit-linear-gradient(left, rgba(233, 228, 212, 1) 0%, rgba(233, 228, 212, 1) 60%, rgba(233, 228, 212, 0) 70%, rgba(233, 228, 212, 0) 100%), url(../img/contents/shop-matsuyama-bil.jpg);
		background-image: url(../img/bg/under-bg.png), linear-gradient(to right, rgba(233, 228, 212, 1) 0%, rgba(233, 228, 212, 1) 60%, rgba(233, 228, 212, 0) 70%, rgba(233, 228, 212, 0) 100%), url(../img/contents/shop-matsuyama-bil.jpg);
	}
	.office-saitama #mainImg:before {
		background-image: url(../img/bg/under-bg.png), -webkit-linear-gradient(left, rgba(233, 228, 212, 1) 0%, rgba(233, 228, 212, 1) 60%, rgba(233, 228, 212, 0) 70%, rgba(233, 228, 212, 0) 100%), url(../img/contents/office-saitama-bil.jpg);
		background-image: url(../img/bg/under-bg.png), linear-gradient(to right, rgba(233, 228, 212, 1) 0%, rgba(233, 228, 212, 1) 60%, rgba(233, 228, 212, 0) 70%, rgba(233, 228, 212, 0) 100%), url(../img/contents/office-saitama-bil.jpg);
	}
	.office-nagoya #mainImg:before {
		background-image: url(../img/bg/under-bg.png), -webkit-linear-gradient(left, rgba(233, 228, 212, 1) 0%, rgba(233, 228, 212, 1) 60%, rgba(233, 228, 212, 0) 70%, rgba(233, 228, 212, 0) 100%), url(../img/contents/office-nagoya-bil.jpg);
		background-image: url(../img/bg/under-bg.png), linear-gradient(to right, rgba(233, 228, 212, 1) 0%, rgba(233, 228, 212, 1) 60%, rgba(233, 228, 212, 0) 70%, rgba(233, 228, 212, 0) 100%), url(../img/contents/office-nagoya-bil.jpg);
	}
	.shop-ashiya #mainImg:before {
		background-image: url(../img/bg/under-bg.png), -webkit-linear-gradient(left, rgba(233, 228, 212, 1) 0%, rgba(233, 228, 212, 1) 60%, rgba(233, 228, 212, 0) 70%, rgba(233, 228, 212, 0) 100%), url(../img/contents/office-ashiya-bil.jpg);
		background-image: url(../img/bg/under-bg.png), linear-gradient(to right, rgba(233, 228, 212, 1) 0%, rgba(233, 228, 212, 1) 60%, rgba(233, 228, 212, 0) 70%, rgba(233, 228, 212, 0) 100%), url(../img/contents/office-ashiya-bil.jpg);
	}




	#mainImg > div {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: start;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		min-height: 500px;
		position: relative;
		z-index: 1;
	}

	/*IE11対応*/
	_:-ms-lang(x)::-ms-backdrop,
	#mainImg > div {
		min-height: auto;
		height: 500px;
	}


	/* 店舗案内 */
	.store-photo {
		display: flex;
		justify-content: space-between;
	}

	.store-photo .main-photo {
		width: 66%;
	}

	.store-photo .sub-photo {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 32%;
	}


	/*googleMap*/
	.gmap {
		padding-bottom: 460px;
	}



	/* スタッフ紹介 */
	.staff-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	section[id$="staff"] > div:nth-of-type(even) {
		flex-direction: row-reverse;
	}

	section[id$="staff"] .image {
		width: 35%;
		max-width: 320px;
	}

	section[id$="staff"] > div:nth-of-type(odd) .image {
		margin-right: 2em;
	}

	section[id$="staff"] > div:nth-of-type(even) .image {
		margin-left: 2em;
	}

	section[id$="staff"] .detail {
		flex: 1;
	}

	section[id$="staff"] .detail .staff-name {
		margin-top: 0;
	}



}

/* End 740px Tablet Small */



/* --------------------------------------------------------------------------------------------------------
   04
 *
 * 幅 880px 以上
 */
@media screen and (min-width: 55em) {


	/* 新着情報 */
	#news dl dd ul:not(.swiper-wrapper) li {
		padding: 2em 0;
	}

	#news dl dd ul:not(.swiper-wrapper) li .thumb {
		width: 100px;
	}


}

/* End 880px Tablet Large */



/* --------------------------------------------------------------------------------------------------------
   05
 *
 * 幅 1072px 以上
 */
@media screen and (min-width: 67em) {

	/* ここにスタイル */

}

/* End 955px Desktop Small */



/* --------------------------------------------------------------------------------------------------------
   06
 *
 * 幅 1264px 以上
 */
@media screen and (min-width: 79em) {

	/* ここにスタイル */

}

/* End 1100px Desktop Medium */