@charset "UTF-8";


/* BASE
------------------------------------ */
body {
	/*overflow-x: hidden;*/
}

main {
	display: block;
	padding-bottom: calc(200 / 1920 * 100%);
	box-sizing: border-box;
}

main img {
	width: 100%;
	height: auto;
}

.dirpath {
	margin-top: 0;
	border-top: none;
}

@media screen and (min-width: 768px) {
	.pcNone {
		display: none;
	}
}

@media screen and (max-width: 767px) {
	.dirpath {
		margin-top: 30px;
	}

	.spNone {
		display: none;
	}
}

@media screen and (max-width: 767px) and (orientation: landscape) {
	main {
		padding-bottom: calc(60 / 1920 * 100%);
	}
}


/* KV
------------------------------------ */
.kvBox {
	height: 960px;
	padding-top: 78px;
	background-color: #001C58;
	background-image: url(/files/cdb/ZZ/special/as246r3/zzspecial_as246r3_kv_pc.png),-webkit-linear-gradient(to bottom right,#003399 30%, #001A53 90%);
	background-image: url(/files/cdb/ZZ/special/as246r3/zzspecial_as246r3_kv_pc.png),-o-linear-gradient(to bottom right,#003399 30%, #001A53 90%);
	background-image: url(/files/cdb/ZZ/special/as246r3/zzspecial_as246r3_kv_pc.png),linear-gradient(to bottom right,#003399 30%, #001A53 90%);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: left bottom;
	background-repeat: no-repeat;
}

@media screen and (max-width: 1024px) {
.kvBox {
  	height: 600px;
  }
}


.kvInner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}

.kvHeading {
	position: absolute;
	top: 0;
	right: 0;
	max-width: 903px;
}


@media screen and (max-width: 767px) {
	.kvBox {
		height: calc(240 / 568 * 100vh);
		min-height: 240px;
		margin-bottom: -1px;
		padding: 28px 16px 0;
		background-image: url(/files/cdb/ZZ/special/as246r3/zzspecial_as246r3_kv_sp.png),-webkit-linear-gradient(to bottom right,#003399 30%, #001A53 90%);
		background-image: url(/files/cdb/ZZ/special/as246r3/zzspecial_as246r3_kv_sp.png),-o-linear-gradient(to bottom right,#003399 30%, #001A53 90%);
		background-image: url(/files/cdb/ZZ/special/as246r3/zzspecial_as246r3_kv_sp.png),linear-gradient(to bottom right,#003399 30%, #001A53 90%);
	}

	.kvInner {
		padding: 0 16px;
	}

	.kvHeading {
		width: calc(272 / 320 * 100%);
	}
}

@media screen and (max-width: 767px) and (orientation: landscape) {
	.kvBox {
		height: 114vh;
	}
}


/* CONTENT
------------------------------------ */
.contentWrap {
	position: relative;
	z-index: 1;
	top: 0;
	background-color: #003399;
	background-image: -webkit-linear-gradient(to bottom left, #001a53, #003aad);
	background-image: -o-linear-gradient(to bottom left, #001a53, #003aad);
	background-image: linear-gradient(to bottom left, #001a53, #003aad);
}

.contentInner {
	max-width: 1200px;
	margin: 0 auto;
	padding-bottom: 40px;
}

@media screen and (max-width: 767px) {
	.contentWrap {
		padding-bottom: 0;
	}

	.contentWrap:before {
		top: -10px;
		left: -50%;
		height: 102%;
		transform: rotate(-3deg);
	}

	.contentInner {
		padding: 20px 0 0;
	}
}


/* LEAD
------------------------------------ */
.leadBox {
	position: relative;
	margin-bottom: 64px;
	padding: 74px 100px;
	border-top: 1px solid #7a8bad;
	border-bottom: 1px solid #7a8bad;
}

.leadBox:before {
	content: '';
	display: block;
	position: absolute;
	top: 6px;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #7a8bad;
}
.leadBox:after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: 6px;
	width: 100%;
	height: 1px;
	background-color: #7a8bad;
}

.leadHeading {
	max-width: 777px;
	margin: 0 auto 48px;
}

.leadBox p {
	font-size: 16px;
	color: #fff;
	line-height: 1.8;
}

@media screen and (max-width: 767px) {
	.leadBox {
		width: 100%;
		margin-bottom: 48px;
		padding: 37px 20px 30px;
	}
	.leadBox:before {
		top: 5px;
	}
	.leadBox:after {
		bottom: 5px;
	}

	.leadHeading {
		width: calc(252 / 320 * 100%);
		max-width: 320px;
		margin: 0 auto 28px;
	}

	.leadBox p {
		font-size: 14px;
	}
}


/* MAP
------------------------------------ */
.mapBox {
	position: relative;
	max-width: 1040px;
	height: 582px;
	margin: 0 auto;
	padding: 66px 0;
	background-image: url(/files/cdb/ZZ/special/as246r3/ZZspecial_as246r3_pict_map_pc.png);
	-webkit-background-size: 345px auto;
	background-size: 691px auto;
	background-position: center center;
	background-repeat: no-repeat;
}

.mapHeading {
	max-width: 514px;
}

.mapButton {
	display: block;
	position: absolute;
	width: 340px;
	padding: 36px 0;
	background-color: #000;
	background-image: url(/files/cdb/ZZ/special/as246r3/ZZspecial_as246r3_button-arrow.png), -webkit-linear-gradient(150deg, #000 92%, #e02d2d 92%);
	background-image: url(/files/cdb/ZZ/special/as246r3/ZZspecial_as246r3_button-arrow.png), -o-linear-gradient(150deg, #000 92%, #e02d2d 92%);
	background-image: url(/files/cdb/ZZ/special/as246r3/ZZspecial_as246r3_button-arrow.png), linear-gradient(150deg, #000 92%, #e02d2d 92%);
	-webkit-background-size: 16px auto, 100% 100%;
	background-size: 16px auto, 100% 100%;
	background-position: 98% 95%, left top;
	background-repeat: no-repeat, repeat;
	text-align: center;
	transition: background-color .3s ease;
}
.mapButton .buttonTag {
	position: absolute;
	top: 0;
	left: 0;
	max-width: 40px;
}
.mapButton img {
	max-width: 300px;
}

.mapButton:hover {
	opacity: 1;
	background-color: #0044cc;
	background-image: url(/files/cdb/ZZ/special/as246r3/ZZspecial_as246r3_button-arrow.png);
}
.mapButton:hover img {
	opacity: 1;
}

.mapButton.isYokohama {
	right: 0;
	bottom: 54px;
}
.mapButton.isFukuoka {
	top: 184px;
	left: 0;
}

@media screen and (max-width: 767px) {
	.mapBox {
		height: calc(360 / 320 * 100vmin);
		max-height: 400px;
		padding: 0 20px;
		background-image: url(/files/cdb/ZZ/special/as246r3/ZZspecial_as246r3_pict_map_sp.png);
		background-position: center 50%;
		-webkit-background-size: 100% auto;
		background-size: 85% auto;
	}

	.mapHeading {
		margin: 0 auto;
	}

	.mapButton {
			width: calc(138 / 320 * 100%);
			padding: 32px 7px;
			background-image: url(/files/cdb/ZZ/special/as246r3/ZZspecial_as246r3_button-arrow.png), -webkit-linear-gradient(60deg, #000 88%, #e02d2d 88%);
			background-image: url(/files/cdb/ZZ/special/as246r3/ZZspecial_as246r3_button-arrow.png), -o-linear-gradient(60deg, #000 88%, #e02d2d 88%);
			background-image: url(/files/cdb/ZZ/special/as246r3/ZZspecial_as246r3_button-arrow.png), linear-gradient(150deg, #000 88%, #e02d2d 88%);
		}
	.mapButton .buttonTag {
		max-width: 30px;
	}

	.mapButton.isYokohama {
		right: 20px;
		bottom: 0;
	}
	.mapButton.isFukuoka {
		top: calc(72 / 360 * 100%);
		left: 20px;
	}
}

@media screen and (max-width: 767px) and (orientation: landscape) {
	.mapBox {
		background-image: url(/files/cdb/ZZ/special/as246r3/ZZspecial_as246r3_pict_map_pc.png);
		-webkit-background-size: 62% auto;
		background-size: 62% auto;
	}

	.mapButton {
		width: calc(100 / 320 * 100%);
		max-width: 240px;
	}
	.mapButton.isFukuoka {
		top: calc(88 / 360 * 100%);
	}
}


/* STORE
------------------------------------ */
.storeList {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	flex-flow: row-reverse wrap;
	margin-top: 24px;
}

.storeList > li {
	width: 580px
}
.storeList > li:nth-child(2) {
	margin: 80px 40px 0 0;
}

.storeImage {
	position: relative;
}
.storeImage .imageTag {
	position: absolute;
	top: 0;
	left: 0;
	max-width: 80px;
}

.storeBox {
	width: 100%;
	background-color: #000;
}

.storeAddress {
	padding: 30px 90px 0;
}

.storeHeading {
	max-width: 400px;
	margin: 0 auto 32px;
}

.storeInfoList {
	text-align: center;
	font-size: 16px;
	color: #fff;
}

.storeInfoList li:not(:last-child) {
	margin-bottom: 16px;
}

.storeInfoList .tel {
	padding-right: 18px;
	color: #fff;
}
.storeInfoList .tel:hover {
	text-decoration: none;
}
.storeInfoList .tel:visited {
	color: #fff;
}

.storeInfoList .mailLink {
	color: #fff;
}
.storeInfoList .mailLink:hover {
	color: #fff;
	text-decoration: none;
}
.storeInfoList .mailLink:visited {
	color: #fff;
}

.storeMap {
	margin: 32px 90px;
}

.buttonBox {
	padding: 0 90px 66px;
}
.basicButton {
	display: block;
	padding: 21px;
	background-color: #e02d2d;
	background-image: url(/files/cdb/ZZ/special/as246r3/ZZspecial_as246r3_button-arrow.png);
	-webkit-background-size: 20px auto;
	background-size: 20px auto;
	background-position: 95% center;
	background-repeat: no-repeat;
	text-align: center;
	font-size: 18px;
	color: #fff;
	text-decoration: none;
	transition: background-color .3s ease;
}
.basicButton:hover {
	background-color: #0044cc;
}

@media screen and (max-width: 767px) {
	.storeList {
		margin-top: 48px;
		padding: 0 20px;
	}

	.storeList > li {
		width: 100%;
	}
	.storeList > li:nth-child(2) {
		margin: 32px 0 0;
	}

	.storeImage .imageTag {
		max-width: 60px;
	}

	.storeHeading {
		width: calc(260 / 280 * 100%);
		margin-bottom: 24px;
	}

	.storeAddress {
		padding: 24px 20px 16px;
	}

	.storeInfoList {
		font-size: 14px;
		line-height: 1.8;
		text-align: left;
	}

	.storeInfoList li:not(:last-child) {
		margin-bottom: 0;
	}

	.storeInfoList .tel {
		display: block;
		padding: 0;
	}

	.storeMap {
		width: 100%;
		margin: 0 0 24px;
	}

	.buttonBox {
		padding: 0 20px 40px;
	}
	.basicButton {
		padding: 16px;
		font-size: 16px;
	}
}


@media screen and (max-width: 767px) and (orientation: landscape) {
	.storeList {
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		flex-flow: row-reverse wrap;
		justify-content: center;
	}

	.storeList > li {
		width: 48%;
	}

	.storeList > li:nth-child(2) {
		margin-right: 3%;
	}
}