@charset "UTF-8";

.koizumiyakumo {
	
	--color-body-1: #333;
	--font-family: "Noto Sans JP", sans-serif;
	--shippori-mincho: "Shippori Mincho", serif;
	--padding: 15px;
	--container: 1000px;
	--stack: 100px;
	--section: 70px;
	--h2: 36;
	--p: 16;
	--fs: 16;
	--bs-border-radius: 10px;

	color: var(--color-body-1);
	font-family: var(--font-family);
	letter-spacing: 0;
	line-height: calc(30 / 16);
	margin: 0;
	::after,
	::before,
	* {
		--font-size: calc((var(--fs) / 16) * 1.6rem);
		font-size: var(--font-size);
	}

	rt {
		font-size: 50%;
	}

	img {
		max-width: 100%;
		height: auto;
	}

	a {
		color: inherit;
		text-decoration: none;
		transition: 0.2s;
	}

	a img {
		transition: 0.2s;
	}

	a:hover {
		opacity: 0.6;
	}
	
	@media(max-width: 767px) {
		--fs: 15;
	}

	.scroll-hint-text {
		white-space: nowrap;
	}

	.is-scrollable {
		margin-right: calc(var(--padding) * -1);
		padding-right: var(--padding);
		table {
			margin-right: 0;
			margin-left: 0;
		}
	}

	.container {
		padding-right: var(--padding);
		padding-left: var(--padding);
		max-width: calc(var(--container) + var(--padding) + var(--padding));
	}

	.container-sm {
		--container: 880px;
	}

	.stack {
		padding-top: var(--stack);
		padding-bottom: var(--stack);
	}

	.icon {
		aspect-ratio: 1;
		background-color: currentColor;
		-webkit-mask: no-repeat center center/contain;
		mask: no-repeat center center/contain;
		display: inline-block;
		height: auto;
		width: 1em;
	}

	.link-list {
		list-style: none;
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 40px 20px;
		padding: 0;
		margin-bottom: 0;
	}

	h2 {
		background: transparent;
		border: none;
		padding: 0;
	}

	.page-title {
		padding-top: 35px;
		padding-bottom: 35px;
	}

	.page-title h1 {
		--fs: 28;
		font-size: var(--font-size);
		text-align: center;
		font-weight: 600;
		margin-bottom: 0;
	}

	.page-title span {
		display: block;
		text-align: center;
		--fs: 16;
	}

	@media(max-width: 767px) {
		.page-title h1 {
			--fs: 16;
		}
		.page-title span {
			--fs: 15;
		}
	}

	.fv {
		text-align: center;
		background: url(./img/bg-image01.png) top left / auto;
		padding-top: 100px;
		padding-bottom: 150px;
	}

	.fv p {
		--fs: 18;
		line-height: calc(28 / 18);
		max-width: 970px;
		margin-inline: auto;
	}

	@media(max-width: 767px) {
		.fv {
			padding-top: 30px;
			padding-bottom: 80px;
		}
		.fv p {
			--fs: 15;
		}
	}

	/*		ナビ		*/
	.yakumo-nav-wrapper {
		background: url(./img/bg-image01.png) top left / auto;
		padding-bottom: 15px;
	}

	.yakumo-nav {
		display: flex;
		align-items: flex-end;
		flex-wrap: nowrap;
		justify-content: space-between;
		max-height: 68px;
		gap: 15px;
		max-width: 1180px;
		margin-inline: auto;
		padding: 0 var(--padding);
	}

	.yakumo-nav-link {
		display: flex;
		align-items: center;
		justify-content: center;
		max-width: 260px;
		min-height: 68px;
		padding: 5px 10px;
		width: 100%;
		--fs: 18;
		font-size: var(--font-size);
		font-family: var(--shippori-mincho);
		font-weight: 600;
		background: url(img/button-yellow.png) center / cover;
		border-radius: 10px;
		transition: 0.2s;
	}

	#nav-tottori-tab {
		background: url(img/button-green.png);
	}

	#nav-walk-tab {
		background: url(img/button-pink.png);
	}

	#nav-travel-tab {
		background: url(img/button-blue.png);
	}

	.yakumo-nav-link:hover {
		min-height: 78px;
	}

	.yakumo-nav-link.active {
		min-height: 78px;
	}

	@media(max-width: 991px) {
		.yakumo-nav {
			gap: 10px;
			max-height: 60px;
		}
		.yakumo-nav-link {
			--fs: 15;
			min-height: 60px;
			padding: 5px;
		}
		.yakumo-nav-link:hover {
			min-height: 70px;
		}
		.yakumo-nav-link.active {
			min-height: 70px;
		}
	}

	@media(max-width: 767px) {
		.yakumo-nav {
			max-width: 550px;
			display: grid;
			grid-template-columns: repeat(2,1fr);
			grid-template-rows: 70px 70px; 
			max-height: none;
		}
		.yakumo-nav-link:not(.active):hover {
			min-height: 60px;
			opacity: 0.6;
		}
	}

	@media(max-width: 575px) {
		.yakumo-nav {
			max-height: 135px;
			height: 135px;
		}
		.yakumo-nav-link {
			min-height: 55px;
			letter-spacing: -0.05em;
		}
		.yakumo-nav-link:not(.active):hover {
			min-height: 55px;
		}
	}

	/*		小泉八雲とセツについて		*/
	.about {
		--container: 850px;
		background: url(./img/bg-image01.png) top left / auto;
		padding-top: 60px;
		padding-bottom: 150px;
	}

	.about h2 {
		text-align: center;
		margin-bottom: 55px;
	}

	.about-content {
		display: grid;
		gap: 30px;
	}

	.about-item {
		display: grid;
		grid-template-columns: 1fr 62%;
		align-items: center;
		column-gap: 10px;
	}

	.about-item:nth-child(even) {
		grid-template-columns: 62% 1fr;
	}

	.about-item:nth-child(even) .about-text {
		order: -1;
	}

	.about-item:first-of-type .about-image {
		mix-blend-mode: multiply;
	}

	.about-text {
		background: #FFF;
		border-radius: 15px;
		padding: 40px;
	}

	.about-text h3 {
		margin-bottom: 20px;
	}

	.about-text p {
		line-height: calc(25 / 16);
		margin-bottom: 10px;
	}

	.about-text .aside {
		display: flex;
		gap: 10px;
		color: #67507E;
		margin-bottom: 0;
	}

	.about-text .aside span {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 52px;
		--fs: 16;
		color: #FFF;
		font-weight: 600;
		background: #67507E;
		border-radius: 5px;
	}

	@media(max-width: 767px) {
		.about {
			padding-top: 40px;
			padding-bottom: 20px;
		}
		.about h2 {
			margin-bottom: 0;
		}
		.about h2 img {
			max-width: 350px;
		}
		.about-content {
			gap: 50px;
		}
		.about-item,
		.about-item:nth-child(even) {
			grid-template-columns: 1fr;
		}
		.about-item:first-child .about-image {
			max-width: 240px;
			margin-inline: auto;
			margin-top: -20px;
		}
		.about-text {
			padding: 25px;
		}
		.about-item:nth-child(even) .about-text {
			order: 0;
		}
		.about-item:first-child .about-text {
			margin-top: -30px;
		}
		.about-text h3 {
			margin-bottom: 15px;
		}
		.about-item:nth-child(1) .about-text h3 img {
			width: 296px;
		}
		.about-item:nth-child(2) .about-text h3 img {
			width: 165px;
		}
		.about-text p {
			--fs: 15;
			line-height: calc(20 / 15);
			margin-bottom: 10px;
		}
		.about-text .aside span {
			--fs: 15;
			min-width: 43px;
		}
	}

	/*		ハーンとセツと鳥取県		*/
	.tottori {
		--container: 900px;
		background: url(./img/bg-image02.png) top left / auto;
		mix-blend-mode: multiply;
		overflow: hidden;
		padding-top: 60px;
		padding-bottom: 250px;
	}

	.tottori-content {
		position: relative;
		background: #FFF;
		box-shadow: 0 0 10px 0 #FFF,0 0 10px 0 #FFF,0 0 10px 0 #FFF;
		border-radius: 15px;
		padding: 50px 20px;
	}

	.tottori-content > * {
		max-width: 790px;
		margin-inline: auto;
	}

	.tottori-content h2 {
		text-align: center;
		margin-bottom: 40px;
	}

	.tottori-content p {
		font-family: var(--shippori-mincho);
	}

	.tottori-koizumi {
		display: grid;
		grid-template-columns: 70% 1fr;
		gap: 10px;
	}

	.tottori-koizumi-text {
		color: #576914;
		max-width: 470px;
		margin-inline: auto;
	}

	.tottori-koizumi-text h3 {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 10px;
		--fs: 24;
		font-size: var(--font-size);
		font-weight: normal;
		font-family: var(--shippori-mincho);
		margin-bottom: 15px;
	}

	.tottori-koizumi-text h3 span {
		--fs: 16;
		font-family: var(--font-family);
	}

	.tottori-koizumi-text p {
		line-height: calc(25 / 16);
		margin-bottom: 0;
	}

	.tottori-content-deco01,
	.tottori-content-deco02,
	.tottori-content-deco03,
	.tottori-content-deco04 {
		position: absolute;
		mix-blend-mode: multiply;
	}

	.tottori-content-deco01 {
		top: 4%;
		right: 0;
		transform: translateX(85%) scale(-1,1);
	}

	.tottori-content-deco02 {
		top: 50%;
		left: 0;
		transform: translateX(-90%);
	}

	.tottori-content-deco03 {
		bottom: 0;
		right: 0;
		transform: translate(35%,130%);
	}

	@media(max-width: 767px) {
		.tottori {
			padding-top: 20px;
			padding-bottom: 20px;
		}
		.tottori-content {
			border-radius: 10px;
			box-shadow: 0 0 10px 0 #FFF;
			padding: 20px 10px;
		}
		.tottori-content h2 {
			margin-bottom: 25px;
		}
		.tottori-content h2 img {
			max-width: 325px;
		}
		.tottori-content p {
			line-height: calc(24 / 15);
		}
		.tottori-koizumi {
			grid-template-columns: 1fr;
			padding-right: 16px;
			padding-left: 16px;
		}
		.tottori-koizumi-image {
			max-width: 163px;
			margin-inline: auto;
			order: -1;
		}
		.tottori-koizumi-text h3 {
			--fs: 17;
			gap: 10px;
			margin-bottom: 10px;
		}
		.tottori-koizumi-text h3 span {
			--fs: 11;
		}
		.tottori-content p {
			--fs: 16;
			line-height: calc(25 / 16);
		}
		.tottori-content-deco01,
		.tottori-content-deco02,
		.tottori-content-deco03,
		.tottori-content-deco04 {
			opacity: 0.5;
			width: 142px;
		}
		.tottori-content-deco01 {
			top: 125px;
			transform: translateX(45%) scale(-1,1);
		}
		.tottori-content-deco02 {
			top: 280px;
			transform: translate(-50%);
		}
		.tottori-content-deco03 {
			top: 35%;
			transform: translateX(10%);
		}
		.tottori-content-deco04 {
			bottom: 18%;
			transform: translateX(-60%);
		}
	}

	/*		八雲とセツが歩いた とっとりゆかりの地		*/
	.walk {
		overflow-x: clip;
		--container: 1000px;
		padding-top: 100px;
		padding-bottom: 0px;
	}

	.walk h2 {
		text-align: center;
		margin-bottom: 25px;
	}

	.walk h2 + p {
		max-width: 625px;
		margin-inline: auto;
	}

	.walk-map {
		position: relative;
		max-width: 1325px;
		width: 100vw;
		left: 50%;
		transform: translateX(-50%);
		padding: 0 5px;
		margin-bottom: 60px;
	}

	.walk-content {
		position: relative;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 300px));
		justify-content: space-between;
		gap: 50px 25px;
	}

	.walk-content:not(:last-child) {
		margin-bottom: 100px;
	}

	.walk-content h3 {
		display: flex;
		align-items: center;
		max-width: 300px;
		flex: 1 1 0;
	}

	.walk-item {
		flex: 1 1 0; 
		max-width: 300px;
		background: #FFF;
		border-radius: 0 20px 0 20px;
		box-shadow: 4px 4px 4px 0 rgba(0,0,0,0.25);
	}

	.walk-item h4 {
		display: flex;
		align-items: center;
		background: url(./img/title-bg-blue.png) top left / auto;
		min-height: 70px;
		border-radius: 0 20px 0 0;
		padding: 10px 20px;
		margin-bottom: 0;
	}

	.journey .walk-item h4 {
		background: url(./img/title-bg-pink.png) top left / auto;
	}

	.story .walk-item h4 {
		background: url(./img/title-bg-green.png) top left / auto;
	}

	.walk-item-body {
		background: #FFF;
		padding: 20px;
	}

	.walk-item-body p {
		--fs: 14;
		line-height: calc(23 / 14);
	}

	:where(.walk-sub-item,.walk-item-body) dl {
		display: grid;
		grid-template-columns: 50px 1fr;
		align-items: baseline;
		gap: 8px 5px;
		border-top: 2px solid #94CFD6;
		padding-top: 10px;
	}

	:where(.journey,.story) .walk-item-body dl {
		border-color: #D9D9D9;
	}

	:where(.walk-sub-item,.walk-item-body) dt {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		--fs: 12;
		line-height: 1;
		font-weight: 400;
		min-height: 20px;
		width: 100%;
		background: #94CFD6;
		border-radius: 5px;
		padding: 3px 0;
	}

	.journey .walk-item-body dt {
		background: #C5ABE1;
	}

	.story .walk-item-body dt {
		background: #DBE68A;
	}

	:where(.walk-sub-item,.walk-item-body) dd {
		--fs: 12;
		font-weight: 500;
		margin-bottom: 0;
	}

	.walk-item-link {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		width: 180px;
		min-height: 25px;
		--fs: 14;
		background: #87C1F0;
		border-radius: 15px;
	}

	.walk-item-link:hover {
		color: #FFF;
		opacity: 1;
		background: #054E8A;
	}

	.journey .walk-item-link {
		background: #CEA5F9;
	}

	.journey .walk-item-link:hover {
		background: #6D058A;
	}

	.story .walk-item-link {
		background: #EAE865;
	}

	.story .walk-item-link:hover {
		background: #D0CD27;
	}

	.walk-item-link::after {
		content: "";
		width: 16px;
		aspect-ratio: 1 / 1;
		-webkit-mask: no-repeat center center / cover;
		mask: no-repeat center center / cover;
		-webkit-mask-image: url(./img/icon-blank.svg);
		mask-image: url(./img/icon-blank.svg);
		background-color: #000;
	}

	.walk-item-link:hover::after {
		background-color: #FFF;
	}

	.walk-sub-item {
		position: relative;
		background: url(./img/title-bg-pink.png) top left / auto;
		border-radius: 50px;
		padding: 25px 20px;
	}

	.walk-sub-item::before {
		content: "";
		display: block;
		height: 25px;
		aspect-ratio: cos(0deg);
		clip-path: polygon(100% 0,0 50%,100% 100%);
		background: url(./img/title-bg-pink.png) top left / auto;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(-100%,-50%);
	}

	.walk-sub-item h4 {
		--fs: 20;
		font-size: var(--font-size);
		font-weight: 600;
		text-align: center;
		margin-bottom: 20px;
	}

	.walk-sub-item h4 span {
		--fs: 16;
		font-weight: 600;
	}

	.walk-sub-item-image {
		position: relative;
		margin-bottom: 20px;
	}

	.walk-sub-item-image span {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		width: 64px;
		aspect-ratio: 1 / 1;
		--fs: 15;
		font-weight: 500;
		line-height: calc(19 / 15);
		background: #C5ABE1;
		border-radius: 50%;
		top: 0;
		right: 0;
		transform: translate(30%,-40%);
	}

	.walk-sub-item p {
		--fs: 14;
		line-height: calc(23 / 14);
	}

	.walk-sub-item dl {
		border: none;
		padding-top: 0;
		margin-bottom: 5px;
	}

	.walk-sub-item dt {
		background: #C5ABE1;
	}

	.walk-sub-item span.small {
		display: block;
		--fs: 12;
		font-size: var(--font-size);
		line-height: calc(20 / 12);
	}

	.walk-sub-item a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 30px;
		width: 190px;
		--fs: 16;
		color: #000;
		background: #CEA5F9;
		border-radius: 20px;
		margin-inline: auto;
	}

	.walk-content.story {
		display: grid;
		grid-template-columns: 97px repeat(2, minmax(0, 300px)) 97px;
	}

	.walk-content-deco01,
	.walk-content-deco02,
	.walk-content-deco03,
	.walk-content-deco04,
	.walk-content-deco05,
	.walk-content-deco06,
	.walk-content-deco07 {
		position: absolute;
		z-index: -1;
	}

	.walk-content-deco01 {
		top: 0;
		right: 0;
		transform: translate(65%,-160%);
	}

	.walk-content-deco02 {
		bottom: 0;
		left: 0;
		transform: translate(-45%,0%);
	}

	.walk-content-deco03 {
		top: 410px;
		left: 0;
		transform: translateX(-65%);
	}

	.walk-content-deco04 {
		top: 400px;
		right: 0;
		transform: translateX(115%);
	}

	.walk-content-deco05 {
		top: 60%;
		right: 0;
		transform: translateX(80%);
	}

	.walk-content-deco06 {
		bottom: 0;
		left: 0;
		transform: translate(-90%,-50%);
	}

	.walk-content-deco07 {
		top: 50%;
		right: 0;
		transform: translate(65%,-50%);
	}

	@media(max-width: 767px) {
		.walk {
			padding-top: 55px;
			padding-bottom: 25px;
		}
		.walk h2 img {
			max-width: 301px;
		}
		.walk h2 + p {
			line-height: calc(24 / 15);
		}
		.walk h3 {
			position: relative;
			display: grid;
			--fs: 20;
			font-size: var(--font-size);
			font-family: var(--shippori-mincho);
			font-weight: 600;
			gap: 5px;
			padding-right: 55px;
			margin-bottom: 20px;
		}
		.walk h3 span {
			--fs: 14;
		}
		.walk h3::before {
			content: "scroll";
			--fs: 16;
			font-family: var(--font-family);
			font-weight: 400;
			color: #BE9461;
			background: url(./img/scroll-arrow.svg) no-repeat center bottom / contain;
			position: absolute;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
			padding: 8px 5px;
		}
		.walk-content {
			display: flex;
			overflow-x: scroll;
			padding-bottom: 8px;
			padding-right: 8px;
		}
		.walk-item,
		.walk-sub-item {
			min-width: 300px;
		}
		.walk-content.story {
			display: flex;
		}
		.walk-content:not(:last-child) {
			margin-bottom: 60px;
		}
		.walk-content-deco01,
		.walk-content-deco02,
		.walk-content-deco03,
		.walk-content-deco04,
		.walk-content-deco05,
		.walk-content-deco06,
		.walk-content-deco07 {
			display: none;
		}
	}

	/*		八雲が恋した城下町松江		*/
	.town {
		overflow-x: clip;
		--container: 960px;
		padding-top: 80px;
		padding-bottom: 100px;
	}

	.town h2 {
		text-align: center;
		margin-bottom: 30px;
	}

	.town-content {
		position: relative;
		display: grid;
		grid-template-columns: repeat(3,minmax(0,300px));
		gap: 50px 20px;
		justify-content: space-between;
		margin-bottom: 45px;
	}

	.town-content::before {
		content: "";
		width: 803px;
		aspect-ratio: 1 / 1;
		background: url(./img/town-content-deco.png) center / cover;
		position: absolute;
		bottom: 0;
		left: 0;
		transform: translate(-45%,12%);
		z-index: -1;
	}

	.town-item {
		background: #FFF;
		padding: 20px;
		box-shadow: 4px 4px 4px 0 rgba(0,0,0,0.25);
	}

	.town-item img {
		margin-bottom: 10px;
	}

	.town-item h3 {
		display: flex;
		align-items: flex-start;
		gap: 5px;
		--fs: 20;
		font-size: var(--font-size);
		color: #A83949;
		font-weight: 600;
		margin-bottom: 10px;
	}

	.town-item h3::before {
		content: "";
		display: block;
		width: 5px;
		height: 27px;
		background: #A83949;
	}

	.town-item p {
		--fs: 14;
		line-height: calc(23 / 14);
	}

	.town-item-link {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		width: 175px;
		min-height: 30px;
		--fs: 14;
		background: #F9A5A7;
		border-radius: 15px;
	}

	.town-item-link:hover {
		opacity: 1;
		color: #FFF;
		background: #8A0507;
	}

	.town-item-link::after {
		content: "";
		width: 16px;
		aspect-ratio: 1 / 1;
		-webkit-mask: no-repeat center center / cover;
		mask: no-repeat center center / cover;
		-webkit-mask-image: url(./img/icon-blank.svg);
		mask-image: url(./img/icon-blank.svg);
		background-color: #000;
	}

	.town-item-link:hover::after {
		background-color: #FFF;
	}

	@media(max-width: 767px) {
		.town {
			position: relative;
			padding-top: 25px;
			padding-bottom: 120px;
		}
		.town::before {
			content: "";
			width: 356px;
			aspect-ratio: 1 / 1;
			background: url(./img/town-content-deco.png) center / cover;
			position: absolute;
			bottom: 0;
			left: 0;
			transform: translate(-20%,-25%);
			z-index: -1;
		}
		.town h2 {
			position: relative;
			padding-bottom: 20px;		
			margin-bottom: 5px;
		}
		.town h2::before {
			content: "scroll";
			--fs: 16;
			font-family: var(--font-family);
			font-weight: 400;
			color: #BE9461;
			background: url(./img/scroll-arrow.svg) no-repeat center bottom / contain;
			position: absolute;
			bottom: 0;
			right: 0;
			padding: 8px 5px;
		}
		.town-content {
			display: flex;
			overflow-x: scroll;
			padding-bottom: 8px;
			padding-right: 8px;
			margin-bottom: 0;
		}
		.town-content::before {
			content: none;
		}
		.town-item {
			min-width: 300px;
		}
	}

	/*		妖怪たちの秘密に迫る”異界”を巡る旅		*/
	.travel {
		--container: 1000px;
		background: url(./img/bg-image03.png) top left / auto;
		padding-top: 100px;
		padding-bottom: 100px;
	}

	.travel h2 {
		text-align: center;
		margin-bottom: 0;
	}

	.travel-map {
		position: relative;
		max-width: 1200px;
		width: 100vw;
		left: 50%;
		transform: translateX(-50%);
		margin-bottom: 60px;
	}

	.travel-mizuki {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 35px;
		align-items: end;
		max-width: 840px;
		margin-inline: auto;
		margin-bottom: 35px;
	}

	.travel-mizuki h3 {
		max-inline-size: max-content;
		margin-inline: auto;
	}

	.travel-mizuki-image {
		max-inline-size: max-content;
		margin-inline: auto;
		margin-bottom: 0;
	}

	.travel-mizuki-image figcaption {
		--fs: 15;
		text-align: end;
		margin-bottom: 0;
	}

	.travel-mizuki-text {
		grid-row: 1 / 3;
		grid-column: 2 / 3;
	}

	.travel-mizuki-text h4 {
		--fs: 24;
		font-size: var(--font-size);
		font-weight: 600;
		margin-bottom: 15px;
	}

	.travel-mizuki-text p {
		--fs: 18;
		line-height: calc(28 / 18);
		margin-bottom: 20px;
	}

	.travel-mizuki-text address {
		--fs: 18;
		line-height: calc(28 / 18);
		margin-bottom: 20px;
	}

	.travel-mizuki-link {
		display: flex;
		align-items: center;
		justify-content: center;
		--fs: 18;
		width: 170px;
		min-height: 34px;
		background: #87C1F0;
		border-radius: 20px;
	}

	.travel-mizuki-link:hover {
		opacity: 1;
		color: #FFF;
		background: #054E8A;
	}

	.travel-pass {
		background: #94CFD6;
		border-radius: 20px;
		padding: 65px 20px;
		margin-bottom: 40px;
	}

	.travel-pass > * {
		max-width: 800px;
		margin-inline: auto;
	}

	.travel-pass-title {
		display: grid;
		grid-template-columns: 150px auto auto;
		align-items: center;
		gap: 15px;
		margin-bottom: 15px;
	}

	.travel-pass-title .badge {
		display: grid;
		place-items: center;
		--fs: 24;
		font-size: var(--font-size);
		font-weight: 600;
		line-height: 1.4;
		background: #604C3F;
		border-radius: 5px;
	}

	.travel-pass-title h3 {
		--fs: 40;
		font-size: var(--font-size);
		font-weight: 600;
		text-align: center;
		color: #054E8A;
		margin-bottom: 0;
	}

	.travel-pass-title h3 span {
		display: block;
		--fs: 18;
		color: #000;
		font-weight: 500;
		margin-bottom: 5px;
	}

	.travel-pass-links {
		display: flex;
		justify-content: space-between;
		gap: 10px;
		margin-bottom: 15px;
	}

	.travel-pass-links a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		min-height: 48px;
		--fs: 18;
		background: #EAE865;
		border-radius: 30px;
		padding:  5px 20px;
	}

	.travel-pass-links a:hover {
		opacity: 1;
		background: #D0CD27;
	}

	.travel-pass-links a::after {
		content: "";
		width: 18px;
		aspect-ratio: 1 / 1;
		-webkit-mask: no-repeat center center / cover;
		mask: no-repeat center center / cover;
		-webkit-mask-image: url(./img/icon-blank.svg);
		mask-image: url(./img/icon-blank.svg);
		background-color: #000;
	}

	.travel-pass p {
		line-height: calc(28 / 18);
		max-inline-size: max-content;
		margin-inline: auto;
		margin-bottom: 0;
	}
	.travel-link {
		gap: 25px 50px;
	}
	@media(max-width: 767px) {
		.travel {
			padding-top: 30px;
			padding-bottom: 85px;
		}
		.travel-map {
			margin-bottom: 45px;
		}
		.travel-mizuki {
			grid-template-columns: 1fr;
			gap: 30px;
			margin-bottom: 45px;
		}
		.travel-mizuki-text {
			grid-column: auto;
			grid-row: auto;
		}
		.travel-mizuki-image figcaption {
			--fs: 10;
		}
		.travel-mizuki-text h4 {
			--fs: 16;
			line-height: 1.5;
			margin-bottom: 10px;
		}
		.travel-mizuki-text p {
			--fs: 15;
			line-height: calc(20 / 15);
			margin-bottom: 10px;
		}
		.travel-mizuki-text address {
			--fs: 15;
			line-height: calc(20 / 15);
		}
		.travel-mizuki-link {
			--fs: 15;
			width: 140px;
			min-height: 26px;
			font-weight: 600;
			margin-inline: auto;
		}
		.travel-pass {
			border-radius: 5px;
			padding: 25px 10px;
		}
		.travel-pass-title {
			position: relative;
			grid-template-columns: 1fr;
			max-inline-size: max-content;
			margin-inline: auto;
		}
		.travel-pass-title .badge {
			--fs: 15;
			font-weight: 600;
			max-width: 190px;
			width: 100%;
			min-height: 40px;
			border-radius: 2px;
			margin-inline: auto;
		}
		.travel-pass-title h3 {
			--fs: 24;
		}
		.travel-pass-title h3 span {
			--fs: 15;
		}
		.travel-pass-title img {
			position: absolute;
			max-width: 65px;
			top: 0;
			right: 0;
			transform: translate(20px, -8px);
		}
		.travel-pass-links {
			flex-wrap: wrap;
			justify-content: flex-start;
			gap: 5px;
		}
		.travel-pass-links a {
			--fs: 15;
			min-height: 42px;
		}
		.travel-pass p {
			--fs: 15;
			line-height: calc(20 / 15);
		}
	}
}