@charset "UTF-8";

/* Object - p-font */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap");
@font-face {
	font-family: "myfont";
	src: url("../fonts/myfont.eot?jm6d8c");
	src: url("../fonts/myfont.eot?jm6d8c#iefix") format("embedded-opentype"), url("../fonts/myfont.ttf?jm6d8c") format("truetype"), url("../fonts/myfont.woff?jm6d8c") format("woff"), url("../fonts/myfont.svg?jm6d8c#myfont") format("svg");
	font-weight: normal;
	font-style: normal;
	}
	/* .icon-train:before { content: "\e900"; } */
	/* .icon-car:before { content: "\e901"; } */

/* Foundation - Reset */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, p, blockquote, th, td {
	margin: 0;
	padding: 0;
	}

input, textarea {
	margin: 0;
	font-size: 100%;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 100%;
	}

fieldset, img, iframe {
	border: 0;
	}

address, caption, cite, code, dfn, em, th, var {
	font-style: normal;
	font-weight: normal;
	}

ol, ul {
	list-style: none;
	}

caption, th {
	text-align: left;
	}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
	}

q:before, q:after {
	content: "";
	}

abbr, acronym {
	border: 0;
	}

img {
	vertical-align: bottom;
	pointer-events: none;
	}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	}

/* Foundation - Variable */
:root {
	--mediaScreenS			: 480px;
	--mediaScreenM			: 768px;
	--mediaScreenL			: 980px;

	--maxWidth				: 1060px;
	--garter				: 80px;
	--garter--in			: 25px;
	--garter--ob			: 15px;

	--baseFont				: "Noto Sans JP", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	--baseFontColor			: #29282e;
	--accentFont			: YuMincho, '游明朝', "ヒラギノ明朝 StdN W6", "HiraMinStdN-W6", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;

	--lineHeight--long		: 2.4;
	--lineHeight--middle	: 1.7;
	--lineHeight--short		: 1.4;

	--baseColor				: #f2f2f2;
	--mainColor				: #223354;
	--accentColor			: #ffd500;

	}


/* Foundation - Basic */
html {
	overflow-y: scroll;
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	}

body {
	font-family: var(--accentFont);
	font-size: 14px;
	line-height: 1;
	text-align: justify;
	color: var(--baseFontColor);
	}

a {
	color: var(--baseFontColor);
	}
a:link {
	text-decoration: none;
	}
a:visited {
	text-decoration: none;
	}
a:hover {
	text-decoration: none;
	}
a:active {
	text-decoration: none;
	}


/* Layout - Contents */
.contents {
	display: block;
	overflow: hidden;
}


/* .inner {} */
.inner {
	max-width: var(--maxWidth);
	margin: 0 auto;
}

/* Layout - Header */
.l-header {
	display: block;
	background: url(../images/img_main01.webp) center center no-repeat;
	background-size: cover;
	width: 100%;
	position: relative;
	overflow: hidden;
	}
	.l-header::before {
		content: "";
		display: block;
		width: 100%;
		padding-top: 130%;
		}
		@media screen and (min-width: 481px) {
			.l-header::before {
				padding-top: 61.8%;
			}
		}
	.l-header__title {
		width: 100%;
		text-align: center;
		position: absolute;
		left: 0;
		bottom: 8%;
		}
		.l-header__title > img {
			width: 70%;
			height: auto;
			filter: drop-shadow(0 0 10px black) drop-shadow(0 0 5px black);
			}
			@media screen and (min-width: 481px) {
				.l-header__title > img {
					width: 37%;
				}
			}
	.l-header__copy {
		width: 100%;
		position: absolute;
		top: 15%;
		left: 0;
		text-align: center;
		}
		@media screen and (min-width: 481px) {
			.l-header__copy {
				width: 8%;
				top: 7%;
				left: 4%;
			}
		}
		.l-header__copy > img {
			width: 13%;
			height: auto;
			filter: drop-shadow(0 0 10px black) drop-shadow(0 0 5px black) drop-shadow(0 0 3px black);
			}
			@media screen and (min-width: 481px) {
				.l-header__copy > img {
					width: 100%;
					filter: drop-shadow(0 0 10px black) drop-shadow(0 0 5px black);
				}
			}


/* Layout - Contents */
.l-contents {
	background: #ecddc9;
}


/* Layout - Footer */
.l-footer {
	background: black;
	}
	.l-footer--logo {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: var(--garter) var(--garter--in);
		}
		.l-footer--logo__item {
			display: block;
			width: 50%;
			text-align: center;
			}
			@media screen and (min-width: 481px) {
				.l-footer--logo__item { width: 40%; }
			}
			.l-footer--logo__item a {
				display: inline-block;
				width: 85%;
				transition: opacity .2s ease;
				}
				@media screen and (min-width: 481px) {
					.l-footer--logo__item a { width: 60%; }
				}
				.l-footer--logo__item a:hover {
					opacity: 0.6;
					}
			.l-footer--logo__item img {
				width: 100%;
				height: auto;
			}
	.l-footer__bottom {
		display: block;
		width: 100%;
		padding: 0 var(--garter--ob) var(--garter--in);
		font-size: 8px;
		text-align: center;
		color: white;
	}



/* Object - p-notice */
.p-notice {
	display: block;
	width: 100%;
	text-align: center;
	}
	.p-notice__yellow {
		display: flex;
		justify-content: center;
		font-size: 12px;
		color: black;
		line-height: var(--lineHeight--middle);
		background: var(--accentColor);
		padding: 3px 15px;
	}
	.p-notice__red {
		display: flex;
		justify-content: center;
		font-size: 12px;
		color: white;
		line-height: var(--lineHeight--middle);
		font-weight: bold;
		background: #aa272d;
		padding: 3px 15px;
	}

/* Object - p-about */
.p-about {
	padding: var(--garter) var(--garter--in);
	text-align: center;
	}

.p-about--read {
	line-height: var(--lineHeight--long);
	}
	.p-about--read > p + p { padding-top: var(--garter--in); }

.p-about--detail {
	margin-top: var(--garter);
	}
	.p-about--detail__column {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		margin: calc( var(--garter--in)*-0.5 );
		padding: var(--garter--in) 0 0;
		}
		@media screen and (min-width: 769px) {
			.p-about--detail__column {
				padding: var(--garter--in) 60px 0;
			}
		}
		.p-about--detail__item {
			display: block;
			width: 100%;
			padding: calc( var(--garter--in)*0.5 );
			}
			@media screen and (min-width: 481px) {
				.p-about--detail__item {
					width: 50%;
				}
			}

.p-about--detail__title {
	font-size: 17px;
	line-height: var(--lineHeight--short);
	padding-bottom: 8px;
	margin-bottom: 8px;
	position: relative;
	}
	.p-about--detail__title::after {
		content: "";
		display: block;
		width: 90%;
		height: 1px;
		background: var(--baseFontColor);
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate( -50%, 0);
	}

.p-about--detail__body {
	line-height: var(--lineHeight--short);
	}
	.p-about--detail__body a {
		text-decoration: underline;
		}
		.p-about--detail__body a:hover {
			text-decoration: none;
		}

/* Object - p-produce */
.p-produce {
	background: var(--mainColor);
	padding: var(--garter) var(--garter--in) 0;
	text-align: center;
	color: white;
	}
	.p-produce--maintitle {
		text-align: center;
		width: 50%;
		margin: 0 auto;
		}
		@media screen and (min-width: 481px) {
			.p-produce--maintitle {
				width: 220px;
			}
		}
		.p-produce--maintitle > img {
			width: 100%;
			height: auto;
		}
	.p-produce--mainbody {
		margin-top: var(--garter--in);
		width: 100%;
		}
		.p-produce--mainbody > img {
			width: 100%;
			height: auto;
		}

	.p-produce--message {
		margin-top: var(--garter);
		line-height: var(--lineHeight--short);
		}
		@media screen and (min-width: 481px) {
			.p-produce--message {
				text-align: left;
			}
		}
		.p-produce--message > *+* {
			margin-top: var(--garter--ob);
		}
		.p-produce--message__title {
			display: block;
			}
			.p-produce--message__title > img {
				width: 100%;
				height: auto;
			}
			@media screen and (min-width: 481px) {
				.p-produce--message__title > img {
					max-width: 500px;
				}
			}

/* Object - p-pickup */
.p-pickup {
	background: var(--mainColor);
	padding: 0 var(--garter--in) var(--garter);
	text-align: center;
	color: white;
}

/* Object - p-information */
.p-information {
	background: var(--mainColor);
	padding: 0 var(--garter--in) var(--garter);
	text-align: center;
	color: white;
	}
	.p-information--map {
		padding: 0 var(--garter--in);
		}
		@media screen and (min-width: 769px) {
			.p-information--map {
				padding: 0 var(--garter);
			}
		}
		.p-information--map__title {
			display: block;
			width: 100%;
	
			font-size: 28px;
			position: relative;
			background: #223354;
			}
			.p-information--map__title::after {
				content: "";
				display: block;
				width: 100%;
				height: 1px;
				background: white;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate( -50%, -50%);
			}
			.p-information--map__title > span {
				display: inline-block;
				padding: 0 10px;
				background: #223354;
				position: relative;
				z-index: 1;
			}
	.p-information--map__picture {
		display: block;
		width: 100%;
		height: auto;
		margin-top: var(--garter--in);
	}


/* Object - p-spot */
.p-spot {
	background: #225643;
	padding: var(--garter) var(--garter--in);
	text-align: center;
	color: white;
}

/* Object - p-media */
.p-media {
	display: flex;
	flex-wrap: wrap;
	padding: var(--garter) 0 0;
	}
	.p-media--body {
		display: block;
		width: 100%;
		line-height: var(--lineHeight--middle);
		}
		@media screen and (min-width: 481px) {
			.p-media--body {
				width: 60%;
				text-align: left;
			}
		}
		.p-media--body > *+* { margin-top: var(--garter--ob);}
		.p-media--body__title {
			display: flex;
			flex-wrap: nowrap;
			justify-content: center;
			align-items: baseline;
			font-size: 28px;
	
			line-height: 1.2;
			}
			@media screen and (min-width: 481px) {
				.p-media--body__title {
					justify-content: flex-start;
				}
			}
			.p-media--body__title > .p-media--badge {
				display: inline-block;
				width: auto;
				height: 20px;
				padding-right: 8px;
			}
			.p-media--body__title > small {
				font-size: 14px;
				padding: 0 5px;
			}
	.p-media--image {
		display: block;
		width: 100%;
		height: auto;
		padding: var(--garter--in) 0 0;
		}
		@media screen and (min-width: 481px) {
			.p-media--image {
				width: 40%;
				padding: 0 0 0 var(--garter--in);
			}
		}
		.p-media--image > img {
			width: 100%;
			height: auto;
		}
	.p-media a {
		color: white;
		text-decoration: underline;
		}
		.p-media a:hover { text-decoration: none;}

.p-media--profile.p-media {
	display: flex;
	padding: var(--garter) 0 0;
	}
	.p-media--profile.p-media > .p-media--body {
		width: 100%;
		}
		@media screen and (min-width: 481px) {
			.p-media--profile.p-media > .p-media--body {
				width: 60%;
			}
		}
	.p-media--profile.p-media > .p-media--image {
		display: block;
		width: 100%;
		height: auto;
		}
		@media screen and (min-width: 481px) {
			.p-media--profile.p-media > .p-media--image {
				width: 40%;
				padding: 0 0 0 var(--garter--in);
			}
		}
	.p-media--profile.p-media .p-media--body__title > img {
		display: block;
		width: 100%;
		height: auto;
		}
		@media screen and (min-width: 481px) {
			.p-media--profile.p-media .p-media--body__title > img {
				max-width: 500px;
			}
		}

/* Object - p-title */
.p-title {
	font-size: 28px;
	}



/* iOS26 Safari 透過対策 */
.for-status-bars {
	position: fixed;
	top: 0;
	pointer-events: none;
	height: 5px;
	width: 100%;
	background-color: black;
	mix-blend-mode: lighten;
}
.for-tab-bars {
	position: fixed;
	bottom: 0;
	pointer-events: none;
	height: 4px;
	width: 100%;
	background-color: black;
	mix-blend-mode: lighten;
	z-index: -1;
}