@charset "UTF-8";
/*------------------------------------------------------

	指定席券売機ご利用案内CSS ※SASS

-------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap");
/* font family */
/* fon weight */
/* 汎用追加 */
.u-bg--gray {
	background-color: var(--color-bg-sub);
}

.u-bg--white {
	background-color: #FFF;
}

.u-ml-none {
	margin-left: 0 !important;
}

.u-mr-none {
	margin-right: 0 !important;
}

.u-fontsize85 {
	font-size: 85%;
}

.u-text-size-xs {
	font-size: 1.2rem !important;
}

.highlightTxt-szM {
	font-size: 1.9rem;
}
@media (min-width: 751px) {
	.highlightTxt-szM {
		font-size: 2.6rem;
	}
}

.u-text-normal {
	font-weight: normal !important;
}

.u-lhBase {
	line-height: 1.6 !important;
}

.u-lhLg {
	line-height: 1.8 !important;
}

.u-text-indent02 {
	text-indent: -2.5em;
	padding-left: 2.5em;
}

.u-text-indent03 {
	text-indent: -3.1em;
	padding-left: 3.1em;
}

@media (min-width: 751px) {
	.u-text-pcright {
		text-align: right !important;
	}
}

@media (max-width: 750px) {
	.u-text-spcenter {
		text-align: center !important;
	}
}

@media (max-width: 1024px) {
	.u-text-sptabcenter {
		text-align: center !important;
	}
}

.u-text-green--bright {
	color: var(--color-theme-main) !important;
}

.c-anchor-button__inner__border {
	border-color: var(--color-border);
}

.c-box--noborder {
	border: none;
}

@media (min-width: 751px) {
	.c-button-container {
		gap: min(3.515625vw, 40px);
	}
}
.c-menulink > li > a > span {
	display: flex;
	flex-direction: column;
	width: 100%;
}
@media (min-width: 751px) {
	.c-menulink > li > a > span {
		flex-direction: row;
		gap: 1em;
	}
}

.c-menulink__image {
	width: 75px;
	height: 56px;
}
.c-menulink__image > img {
	max-width: 100%;
	width: auto;
	height: 100%;
}

/* 背景の色分けセクション */
.l-section-bg-s {
	padding: 24px 0;
}
@media (min-width: 751px) {
	.l-section-bg-s {
		padding: 40px 0;
	}
}

.l-section-bg-m {
	padding: 40px 0;
}
@media (min-width: 751px) {
	.l-section-bg-m {
		padding: 60px 0;
	}
}

.l-section-bg-ml {
	padding: 40px 0 64px;
}
@media (min-width: 751px) {
	.l-section-bg-ml {
		padding: 60px 0 80px;
	}
}

.l-section-bg-l {
	padding: 54px 0 64px;
}
@media (min-width: 751px) {
	.l-section-bg-l {
		padding: 80px 0;
	}
}

.l-section-bg-l--last {
	padding-bottom: 100px;
}
@media (min-width: 751px) {
	.l-section-bg-l--last {
		padding-bottom: 120px;
	}
}

/* アンカーリンクボタン：スマホ時2カラム */
@media (max-width: 750px) {
	.c-button-container.c-button-container--sp2up {
		gap: 16px;
	}
	.c-button-container--sp2up {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	.c-button-container--sp2up .c-anchor-button__inner {
		font-size: 1.3rem;
	}
}
/* 表 */
.c-table table td.ta-c {
	text-align: center;
}

.c-table table td.ve-m {
	vertical-align: middle;
}

@media (max-width: 750px) {
	.c-table table th.ve-top-sp,
	.c-table table td.ve-top-sp {
		vertical-align: top;
	}
}
.mv-guide-table table .c-table__title {
	background-color: var(--color-bg-sub);
}

.mv-guide-table table .c-table__sub {
	background-color: #F0FAF0;
}

@media (min-width: 751px) {
	.mv-guide-table table td,
	.mv-guide-table table td > [class^=c-],
	.mv-guide-table table td > [class^=c-] > a {
		font-size: 1.5rem;
	}
}

/* box */
.mv-guide-box-bg {
	padding: 8vw 6.6666666667vw 9.3333333333vw;
	border-radius: 20px;
	background-color: rgba(246, 246, 228, 0.5);
}
@media (min-width: 751px) {
	.mv-guide-box-bg {
		padding: 50px 50px 55px;
	}
}

/* ローカルナビ */
.u-bg--gray + .mv-guide-nav {
	background-color: #FFF;
}

@media (max-width: 750px) {
	.mv-guide-nav .c-grid--sp3up {
		grid-template-columns: repeat(3, 1fr);
	}
	.mv-guide-nav .c-caption-imagelink__image {
		height: 46px;
	}
}
.mv-guide-nav .c-caption-imagelink__inner {
	padding: 3.2vw 2.6666666667vw;
}
@media (min-width: 751px) {
	.mv-guide-nav .c-caption-imagelink__inner {
		padding: 16px;
	}
}
.mv-guide-nav .c-caption-imagelink__caption {
	font-size: 1.3rem;
}
@media (min-width: 751px) {
	.mv-guide-nav .c-caption-imagelink__caption {
		font-size: 1.6rem;
	}
}

/* 指定席券売機ご利用案内 */
.mv-guide-intro-column {
	display: flex;
	justify-content: center;
	gap: 8vw;
	width: 92%;
	margin-right: auto;
	margin-left: auto;
}
@media (min-width: 751px) {
	.mv-guide-intro-column {
		gap: min(9.765625vw, 100px);
		width: 100%;
	}
}

.mv-guide-intro-column__item {
	position: relative;
}

.mv-guide-intro-caption {
	font-size: 1.6rem;
	font-weight: 600;
	text-align: center;
}
@media (min-width: 751px) {
	.mv-guide-intro-caption {
		font-size: 2.4rem;
	}
}
.mv-guide-intro-caption .fontS {
	font-size: 1rem;
	font-weight: 500;
}
@media (min-width: 751px) {
	.mv-guide-intro-caption .fontS {
		font-size: 1.5rem;
	}
}

.mv-guide-intro-icon {
	position: absolute;
	top: -25px;
	left: -25px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: var(--color-success);
	font-family: "Poppins", sans-serif;
	font-size: 1.4rem;
	font-weight: 600;
	color: #fff;
	text-align: center;
}
@media (min-width: 751px) {
	.mv-guide-intro-icon {
		top: -30px;
		left: -40px;
		width: 90px;
		height: 90px;
		font-size: 2.3rem;
	}
}

.mv-guide-card-column {
	display: flex;
	justify-content: center;
	gap: 4.2666666667vw;
}
@media (min-width: 751px) {
	.mv-guide-card-column {
		gap: 35px;
	}
}

.mv-guide-card-column__item {
	max-width: 190px;
}
.mv-guide-card-column__item img {
	filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3));
}

/* 話せる指定席券売機 */
.mv-guide-about-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10.6666666667vw;
}
@media (min-width: 751px) {
	.mv-guide-about-column {
		flex-direction: row;
		gap: min(4.8828125vw, 50px);
	}
}

.mv-guide-about-image-wrapper {
	display: flex;
	flex-direction: column;
	gap: 4vw;
}
@media (min-width: 751px) {
	.mv-guide-about-image-wrapper {
		flex-direction: column-reverse;
		gap: 18px;
	}
}

.mv-guide-about-image {
	position: relative;
}
@media (min-width: 751px) {
	.mv-guide-about-image {
		width: fit-content;
		height: min(41.9921875vw, 430px);
	}
	.mv-guide-about-image > img {
		width: auto;
		height: 100%;
	}
}

.mv-guide-about-image-caption {
	font-size: 1.6rem;
	font-weight: 600;
	text-align: center;
}
@media (min-width: 751px) {
	.mv-guide-about-image-caption {
		font-size: 2rem;
	}
}

.mv-guide-about-number {
	position: absolute;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 5.8666666667vw;
	height: 5.8666666667vw;
	background-color: var(--color-theme-main);
	border-radius: 50%;
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-size: clamp(1rem, 3.4666666667vw, 1.8rem);
	font-weight: var(--fw-med);
	line-height: 1;
}
@media (min-width: 751px) {
	.mv-guide-about-number {
		width: min(2.734375vw, 28px);
		height: min(2.734375vw, 28px);
		font-size: min(1.46484375vw, 1.5rem);
	}
}

.mv-guide-about-list {
	display: flex;
	flex-wrap: wrap;
}

.mv-guide-about-list__item {
	text-indent: -1em;
	padding-left: 1em;
	margin-right: 1em;
}

@media (min-width: 751px) {
	.mv-guide-optime-box {
		width: 70%;
		margin-left: auto;
		margin-right: auto;
	}
}

/* オペレーターの呼び出し方法 */
@media (max-width: 750px) {
	.mv-guide-howto-column--scrollable {
		margin-left: -6.6666666667vw;
		margin-right: -6.6666666667vw;
		padding: 0 6.6666666667vw 5.3333333333vw;
		overflow: auto;
	}
	.mv-guide-howto-column--scrollable .mv-guide-howto-column {
		width: 800px;
	}
}
.mv-guide-howto-column {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8vw;
}
@media (min-width: 751px) {
	.mv-guide-howto-column {
		gap: min(4.39453125vw, 45px);
	}
}

/* 主な機能一覧 表の説明（定義リスト） */
@media (min-width: 751px) {
	.mv-guide-dlist {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: baseline;
		gap: 5px 30px;
	}
}
.mv-guide-dlist > dt {
	font-size: 1.5rem;
	font-weight: var(--fw-sb);
}
@media (max-width: 750px) {
	.mv-guide-dlist > dt {
		margin-top: 4vw;
	}
	.mv-guide-dlist > dt:first-of-type {
		margin-top: 0;
	}
}
@media (min-width: 751px) {
	.mv-guide-dlist > dt {
		font-size: 1.6rem;
	}
}
@media (max-width: 750px) {
	.mv-guide-dlist > dd {
		margin-top: 3px;
		margin-left: 1.3em;
		font-size: 1.4rem;
	}
}
@media (min-width: 751px) {
	.mv-guide-dlist > dd {
		font-size: 1.5rem;
	}
}

/* 体験版 */
.un-secbg-yellow {
	position: relative;
	padding-bottom: 10.6666666667vw;
}
@media (min-width: 751px) {
	.un-secbg-yellow {
		padding-bottom: 50px;
	}
}

.un-secbg-yellow::before {
	content: "";
	width: 100%;
	height: calc(100% - 70px);
	position: absolute;
	top: 70px;
	right: 0;
	border-radius: 40px 0 0 40px;
	background-color: #F6F6E4;
	z-index: -1;
}
@media (min-width: 1025px) {
	.un-secbg-yellow::before {
		border-radius: 60px 0 0 60px;
		width: calc(50% + 660px);
	}
}

@media (max-width: 750px) {
	.mv-guide-demo-intro-column {
		width: 95%;
		margin-right: auto;
		margin-left: auto;
	}
}
@media (max-width: 1024px) {
	.mv-guide-demo-intro-column {
		width: 80%;
		margin-right: auto;
		margin-left: auto;
	}
}
@media (min-width: 1025px) {
	.mv-guide-demo-intro-column {
		display: grid;
		grid-template-columns: min(39.74609375vw, 407px) 1fr;
		gap: 45px;
		width: 100%;
	}
}

.mv-guide-demo-intro-column-image .mv-guide-intro-column {
	width: 92%;
	margin-right: auto;
	margin-left: auto;
}
@media (min-width: 1025px) {
	.mv-guide-demo-intro-column-image .mv-guide-intro-column {
		gap: 34px;
		width: 100%;
	}
}
.mv-guide-demo-intro-column-image .mv-guide-intro-caption {
	font-size: 1.6rem;
	text-align: center;
}
.mv-guide-demo-intro-column-image .mv-guide-intro-caption .fontS {
	font-size: 1.1rem;
}
.mv-guide-demo-intro-column-image .mv-guide-intro-icon {
	top: -18px;
	left: -30px;
	width: 44px;
	height: 44px;
	font-size: 1.3rem;
}
@media (min-width: 751px) {
	.mv-guide-demo-intro-column-image .mv-guide-intro-icon {
		top: -30px;
		left: -40px;
		width: 62px;
		height: 62px;
		font-size: 1.7rem;
	}
}

.mv-guide-demo-intro-column-text {
	margin-top: 15px;
}
@media (min-width: 1025px) {
	.mv-guide-demo-intro-column-text {
		margin-top: 130px;
	}
}

.swiper-slide:has(.demo-slide) {
	height: auto;
}

.demo-slide {
	height: 100%;
	background-color: #F5FAF5;
	border-radius: 20px;
}
.u-bg--gray .demo-slide {
	background-color: #FAFCFA;
}

.demo-title {
	display: flex;
	align-items: center;
	padding: 10px 20px;
	width: 100%;
	background-color: #E7F8E4;
	border-radius: 20px 20px 0 0;
	color: var(--color-text-green);
	font-weight: var(--fw-sb);
	font-size: 1.4rem;
}
@media (min-width: 751px) {
	.demo-title {
		padding: 15px 25px;
		min-height: 75px;
		font-size: 1.6rem;
	}
}

.demo-title-text {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3em;
}

.demo-title-number {
	flex-shrink: 0;
}

.demo-inner {
	padding: 15px 20px;
}
@media (min-width: 751px) {
	.demo-inner {
		padding: 30px 40px;
	}
}

.demo-image-caption {
	margin-top: 15px;
}

/* swiper */
.swiper-area {
	position: relative;
}
@media (min-width: 751px) and (max-width: 1024px) {
	.swiper-area {
		width: 95%;
		margin-right: auto;
		margin-left: auto;
	}
}
@media (max-width: 750px) {
	.swiper-area {
		margin-left: -15px;
		margin-right: -15px;
	}
}
.swiper-area .swiper-button-prev,
.swiper-area .swiper-button-next {
	width: 40px;
	height: 40px;
	margin-top: -40px;
}
@media (max-width: 750px) {
	.swiper-area .swiper-button-prev,
	.swiper-area .swiper-button-next {
		display: none;
	}
}
.swiper-area .swiper-button-prev {
	left: -60px;
}
@media (max-width: 1024px) {
	.swiper-area .swiper-button-prev {
		left: -40px;
	}
}
.swiper-area .swiper-button-next {
	right: -60px;
}
@media (max-width: 1024px) {
	.swiper-area .swiper-button-next {
		right: -40px;
	}
}
.swiper-area .swiper-button-prev::after,
.swiper-area .swiper-button-next::after {
	content: "";
	display: block;
	width: 40px;
	height: 40px;
}
.swiper-area .swiper-button-prev::after {
	background: url("/assets/img/icon/prev.svg") no-repeat center/contain;
}
.swiper-area .swiper-button-next::after {
	background: url("/assets/img/icon/next.svg") no-repeat center/contain;
}
.swiper-area .swiper-pagination {
	position: static;
	margin-top: 20px;
}
@media (max-width: 750px) {
	.swiper-area .swiper-pagination {
		display: none;
	}
}
.swiper-area .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	margin: 0 7px !important;
	background: var(--color-theme-main);
	transform: unset !important;
}
.swiper-area .swiper-scrollbar {
	position: static;
	margin: 20px auto 0;
}
@media (min-width: 751px) {
	.swiper-area .swiper-scrollbar {
		display: none;
	}
}

.swiper-scrollbar {
	background: #EBF0EB;
}

.swiper-scrollbar-drag {
	background: var(--color-theme-main);
}/*# sourceMappingURL=mv-guide.css.map */