@charset "utf-8";

/* =======================================================================================

// PC
@media screen and (max-width: 1380px) {}
@media screen and (max-width: 1330px) {}
@media screen and (max-width: 1280px) {}
// TB | 850以下はモーダル式ナビゲーション(.menu)
@media screen and (max-width: 1000px) {}
@media screen and (min-width: 769px) and (max-width: 1000px) {}
@media screen and (min-width: 851px) {}
@media screen and (max-width: 850px) {}
@media screen and (min-width: 769px) {}
// SP
@media screen and (max-width: 768px) {}
@media screen and (max-width: 450px) {}
@media screen and (max-width: 350px) {}
======================================================================================= */

/* =======================================================================================
	COMMON
======================================================================================= */
	:root {
		--page-themeColor-paleBlue: 		238, 244, 245; 	/* #eef4f5 */
		--page-themeColor-blue: 		63, 183, 170;	/* #3fb7aa */
		--page-markerColor: 			255, 243, 114;	/* #fff372 */
		
	}
	.bg--paleBlue {		background: rgba(var(--page-themeColor-paleBlue), 1);	}

	.marker {
		background:	linear-gradient(to bottom, transparent 0% 80%, rgba(var(--page-markerColor), 1) 80%);
	}
	.marker::before,
	.marker::after {
		content: "";
		z-index: 1;
		display: inline-block;
		width: 10px;
		height: 0.3em;
		background: rgba(var(--page-markerColor), 1);
		/*background: tan;*/
		transform: skewX(-20deg) translateX(-40%);
		vertical-align: text-bottom;
	}
	.marker::after {
		transform: skewX(-20deg) translateX(40%);
	}
	.sizeMaxWidthS p .marker::before,
	.sizeMaxWidthS p .marker::after {
		display: none;
	}
@media (max-width: 768px) {
	.marker::before,
	.marker::after {
		display: none;
	}
}



#merit h2.heading,
#column {
		--page-markerColor: 			157, 217, 210;	/* #9dd9d2 */
	
}

/* meritLinkBtn
------------------------------------------------------------------------ */
	.meritLinkBtn {
		align-items: stretch;
		margin: var(--site-marpad-M) auto;
	}
	.meritLinkBtn .col {
		width: calc((100% - 60px)/4.01);
		margin: 0 20px 20px 0;
	}
	.meritLinkBtn li {
		display: flex;
	}
	.meritLinkBtn a {
		position: relative;
		display: block;
		color: #FFF;
		text-align: center;
		background: rgba(var(--site-themeColor-main-dark),1);
		padding-bottom: 30px;
		box-shadow: 4px 8px 0px rgba(var(--page-themeColor-blue),.6);
		
		transition: all 0.3s ease;
	}
	.meritLinkBtn a::after {
		position: absolute;
		left: 50%;
		bottom: 5px;
		transform: translateX(-50%);
		content: "";
		display: block;
		width: 0px;
		height: 0px;
		margin: 1em auto 0;
		border: solid transparent;
		border-width: 5px 15px;
		border-top-color: rgba(var(--page-themeColor-blue),1);
	}
	.meritLinkBtn a i {
		display: block;
		width: 70%;
	}
	.meritLinkBtn a p {
		margin-top: 0.6em;
	}
	.meritLinkBtn a:hover {
		transform: translate(2px, 4px);
		box-shadow: 2px 4px 0px rgba(var(--page-themeColor-blue),.6);
	}


@media screen and (min-width: 450.02px) and (max-width: 768px) {
	.meritLinkBtn {
		padding: var(--site-marpad-M) 0;
	}

	.meritLinkBtn a {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
	}
	.meritLinkBtn a i {
		position: absolute;
		left: 0;
		top: 0;
		width: 50%;
	}
	.meritLinkBtn a > span {
		width: 30%;
	}
	.meritLinkBtn a > p {
		width: 68%;
		text-align: left;
	}
}
@media (max-width: 480px) {
	.meritLinkBtn {
		padding: var(--site-marpad-M) 0;
	}
	.meritLinkBtn .col {
		/*width: 100% !important;*/
		margin: 0 19px 10px 0 !important;
	}
	.meritLinkBtn .col:nth-of-type(2n) {
		margin-right: 0px !important;
	}
	.meritLinkBtn a {
		pointer-events: none;
		box-shadow: none;
		
		/*align-items: flex-start;
		padding-top: 25px;*/
		padding-bottom: 10px;
	}
	.meritLinkBtn a::after {
		display: none;
	}
	/*.meritLinkBtn a i {
		width: 40%;
	}*/
}

/* meritSection
------------------------------------------------------------------------ */
	.meritSection {
		position: relative;
		overflow: hidden;
		background: #FFF;
		margin-top: var(--site-marpad-L);
		padding: var(--site-marpad-M) var(--site-marpad-XS) var(--site-marpad-XS);
	}

	.meritSection h3 {
		text-align: center;
		
		font-size: 2.2em;
		font-weight: 500;
		margin-bottom: calc(var(--site-marpad-S) * 0.8);
	}
	.meritSection > div > i {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		color: #FFF;
		font-size: 1.4em;
		font-style: italic;
		background: rgba(var(--page-themeColor-blue), 1);
		transform: rotate(-15deg) translate(-2.3em, -2.3em);
		padding: 1em 10em 0 3em;
	}
	.meritSection > div > i span {
		display: block;
		font-size: 1.2em;
		color: rgba(var(--page-markerColor), 1);
	}
	#merit02 .meritSection .col:nth-of-type(1),
	#merit04 .meritSection .col:nth-of-type(1) {
		order: 3;
		margin-right: 0;
	}
	#merit02 .meritSection .col:nth-of-type(2),
	#merit04 .meritSection .col:nth-of-type(2) {
		margin-right: 40px;
	}


.captionPosition01 {
	bottom: 20%;
}

@media (max-width: 768px) {
	.meritSection {
		padding-top: calc(var(--site-marpad-M) * 1.6);
	}
	.meritSection h3 {
		font-size: 4.5vw;
	}
	#merit02 .meritSection .col:nth-of-type(1),
	#merit04 .meritSection .col:nth-of-type(1) {
		order: 0;
		margin-right: 0;
	}
	#merit02 .meritSection .col:nth-of-type(2),
	#merit04 .meritSection .col:nth-of-type(2) {
		margin-right: 0px;
	}
}


/* #column
------------------------------------------------------------------------ */
	#column {
		margin-top: var(--site-marpad-M);
	}
	#column > div {
		background:-webkit-linear-gradient(to bottom right, #fff 0,#b1d8dc 100%);
		background:linear-gradient(to bottom right, #fff 0, #b1d8dc 100%);
		border-top: 12px solid #6fa5b9;
	}
	/*#column .subheading::after {
		content: "";
		display: block;
		width: 60px;
		margin: 1em auto;
		border-bottom: 1px solid currentcolor;
	}*/
	#column > .lead {
		text-align: left;
	}

	#column dt {
		color: #FFF;
		text-align: center;
		background: rgba(var(--site-themeColor-main-dark),1);
		margin-bottom: var(--site-marpad-S);
	}


	.graphUnit {
		display: grid;
		gap: 20px;
		grid-template-columns: 1fr 40%;
		grid-template-rows: auto 1fr;
	}
	.graphUnit h4.subheading {
		grid-column: 1 / 2;
		grid-row: 1 / 2;

		text-align: left;
		--M-fluidFontSize-max-fontsize: 36;
		--M-fluidFontSize-min-fontsize: 30;
		letter-spacing: 0;
	}
	.graphUnit h4.subheading em {
		display: inline-block;
		font-size: 1.6em;
		font-style: italic;
		margin-right: 0.15em
	}
	.graphUnit .graphTxt {
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}
	.graphUnit .graphPic {
		grid-column: 2 / 3;
		grid-row: 1 / 3;
		
		text-align: center;
	}


@media screen and (max-width: 1000px) {
	.graphUnit {
		grid-template-columns: 100%;
		grid-template-rows: auto auto 1fr;
	}
	.graphUnit h4.subheading {
		text-align: center;
	}
	.graphUnit .graphTxt {
		grid-column: 1 / 2;
		grid-row: 3 / 4;
	}
	.graphUnit .graphPic {
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}
}


/* #carSpotInfo
------------------------------------------------------------------------ */
	.carHeadImg {
		position: relative;
		overflow: hidden;
	}
	.carHeadImg .heading {
		position: absolute;
		z-index: 1;
		top: 30%;
		left: 5%;
		width: 90%;
		color: #FFF;
		letter-spacing: 0.01em;
		text-shadow: 0 0 10px rgba(0, 0, 0, 1);
	}

#carSpot .carAccessSpot {
	background: #FFF;
}
	#carSpot .carAccessSpot dt {
		display: flex;
		align-items: center;
		line-height: 1.6em;
		margin-bottom: 0.3em;
		padding: 0.5em 0.1em 0.3em 0;
	}
	#carSpot .carAccessSpot dt i {
		display: block;
		color: #FFF;
		width: 20px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		background: #aa0000;
		margin-right: 8px;
	}
	#carSpot .carAccessSpot dd.minUnit {
		text-align: center;
		font-size: 1.2em;
		padding: 0 0.3em 0.2em;
	}
	#carSpot .carAccessSpot dd.minUnit em {
		display: inline-block;
		font-size: 1.4em;
		margin-right: 0.1em;
	}
	#carSpot .carAccessSpot dd.minUnit small {
		font-size: 0.6em;
		border-top: 1px solid #DDD;
	}

@media screen and (min-width: 768.02px) {

	[id="carSpot"] .swiper-button-prev,
	[id="carSpot"] .swiper-button-next,
	[id="carSpot"] .swiper-pagination {
		display: none;
	}
	#carSpot > dl {
		gap: 15px;
		flex-wrap: wrap;
	}
	#carSpot .carAccessSpot {
		width: calc((100% / 4.01) - 15px);
		margin-bottom: 3.2em;
	}
}

@media screen and (min-width: 768.02px) and (max-width: 1200px) {
	#carSpot .carAccessSpot {
		width: calc((100% / 3.01) - 15px);
	}
}

@media screen and (max-width: 768px) {
	
	#carSpot .carAccessSpot dd.minUnit {
		text-align: center;
		font-size: 1.0em;
		padding: 0 0.1em 0.2em;
	}
}






	/* スワイパー
	----------------------- */
@media screen and (max-width: 768px) {
	.carHeadImg .heading {
		top: 10%;
	}
	.carHeadImg img {
		position: relative;
		z-index: 0;
		width: 150%;
		margin-left: -40%;
	}
	/*[id="carSpot"] {
		overflow: visible
	}*/
	[id="carSpot"] .swiper-button-prev {
		left: 0;
	}
	[id="carSpot"] .swiper-button-next {
		right: 0;
	}
	[id="carSpot"] .swiper-button-prev::after {
		margin-left: -15px;
	}
	[id="carSpot"] .swiper-button-next::after {
		margin-right: -15px;
	}
	[id="carSpot"] .swiper-pagination {
		position: relative;
		bottom: auto;
		margin-top: 20px;
	}
	[id="carSpot"] .swiper-button-prev,
	[id="carSpot"] .swiper-button-next {
		width: max(46px);
	}
}