@charset "UTF-8";
/* font family */
/* fon weight */
/*----------
	Suica　カテゴリ共通
----------*/
.l-suica-header .l-nav__suicaservice,
.l-suica-ic-header .l-nav__suicaservice,
.l-mobilesuica-header .l-nav__suicaservice,
.l-appsuica-header .l-nav__suicaservice {
	margin-bottom: 24px;
}
.l-suica-header .l-nav__suicaservice__toggle,
.l-suica-ic-header .l-nav__suicaservice__toggle,
.l-mobilesuica-header .l-nav__suicaservice__toggle,
.l-appsuica-header .l-nav__suicaservice__toggle {
	display: none;
}
.l-suica-header .l-nav__suicaservice__list__inner,
.l-suica-ic-header .l-nav__suicaservice__list__inner,
.l-mobilesuica-header .l-nav__suicaservice__list__inner,
.l-appsuica-header .l-nav__suicaservice__list__inner {
	background-color: #fff;
}
.l-suica-header .l-nav__suicaservice__list ul,
.l-suica-ic-header .l-nav__suicaservice__list ul,
.l-mobilesuica-header .l-nav__suicaservice__list ul,
.l-appsuica-header .l-nav__suicaservice__list ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
}
.l-suica-header .l-nav__suicaservice__list ul > li > a,
.l-suica-ic-header .l-nav__suicaservice__list ul > li > a,
.l-mobilesuica-header .l-nav__suicaservice__list ul > li > a,
.l-appsuica-header .l-nav__suicaservice__list ul > li > a {
	display: block;
	height: 100%;
	border: 2px solid #DDDDDD;
	border-radius: 10px;
	position: relative;
	overflow: hidden;
	background-color: #fff;
	text-decoration: none;
	color: #202020;
}
.l-suica-header .l-nav__suicaservice__list ul > li > a > figure,
.l-suica-ic-header .l-nav__suicaservice__list ul > li > a > figure,
.l-mobilesuica-header .l-nav__suicaservice__list ul > li > a > figure,
.l-appsuica-header .l-nav__suicaservice__list ul > li > a > figure {
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	position: relative;
	overflow: hidden;
}
.l-suica-header .l-nav__suicaservice__list ul > li > a > figure img,
.l-suica-ic-header .l-nav__suicaservice__list ul > li > a > figure img,
.l-mobilesuica-header .l-nav__suicaservice__list ul > li > a > figure img,
.l-appsuica-header .l-nav__suicaservice__list ul > li > a > figure img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: contain;
	object-position: center;
}
.l-suica-header .l-nav__suicaservice__list ul > li.l-nav__suicaservice__list__sogo, .l-suica-header .l-nav__suicaservice__list ul > li.l-nav__suicaservice__list__area,
.l-suica-ic-header .l-nav__suicaservice__list ul > li.l-nav__suicaservice__list__sogo,
.l-suica-ic-header .l-nav__suicaservice__list ul > li.l-nav__suicaservice__list__area,
.l-mobilesuica-header .l-nav__suicaservice__list ul > li.l-nav__suicaservice__list__sogo,
.l-mobilesuica-header .l-nav__suicaservice__list ul > li.l-nav__suicaservice__list__area,
.l-appsuica-header .l-nav__suicaservice__list ul > li.l-nav__suicaservice__list__sogo,
.l-appsuica-header .l-nav__suicaservice__list ul > li.l-nav__suicaservice__list__area {
	height: 112px;
	grid-column: 1/3;
	grid-row: 1/2;
}
.l-suica-header .l-nav__suicaservice__list ul > li.l-nav__suicaservice__list__sogo > a > figure, .l-suica-header .l-nav__suicaservice__list ul > li.l-nav__suicaservice__list__area > a > figure,
.l-suica-ic-header .l-nav__suicaservice__list ul > li.l-nav__suicaservice__list__sogo > a > figure,
.l-suica-ic-header .l-nav__suicaservice__list ul > li.l-nav__suicaservice__list__area > a > figure,
.l-mobilesuica-header .l-nav__suicaservice__list ul > li.l-nav__suicaservice__list__sogo > a > figure,
.l-mobilesuica-header .l-nav__suicaservice__list ul > li.l-nav__suicaservice__list__area > a > figure,
.l-appsuica-header .l-nav__suicaservice__list ul > li.l-nav__suicaservice__list__sogo > a > figure,
.l-appsuica-header .l-nav__suicaservice__list ul > li.l-nav__suicaservice__list__area > a > figure {
	padding-bottom: 110px;
}
.l-suica-header .l-nav__suicaservice__list ul > li.l-nav__suicaservice__list__area,
.l-suica-ic-header .l-nav__suicaservice__list ul > li.l-nav__suicaservice__list__area,
.l-mobilesuica-header .l-nav__suicaservice__list ul > li.l-nav__suicaservice__list__area,
.l-appsuica-header .l-nav__suicaservice__list ul > li.l-nav__suicaservice__list__area {
	grid-row: 4/5;
}
.l-suica-header .l-nav__suicaservice__close,
.l-suica-ic-header .l-nav__suicaservice__close,
.l-mobilesuica-header .l-nav__suicaservice__close,
.l-appsuica-header .l-nav__suicaservice__close {
	display: none;
}
@media (min-width: 1024px) {
	.l-suica-header .l-nav-wrapper__footer,
	.l-suica-ic-header .l-nav-wrapper__footer,
	.l-mobilesuica-header .l-nav-wrapper__footer,
	.l-appsuica-header .l-nav-wrapper__footer {
		display: block;
		width: 63px;
		position: absolute;
		top: 50%;
		right: 32px;
		translate: 0 -50%;
	}
	.l-suica-header .l-nav-wrapper__footer__close,
	.l-suica-ic-header .l-nav-wrapper__footer__close,
	.l-mobilesuica-header .l-nav-wrapper__footer__close,
	.l-appsuica-header .l-nav-wrapper__footer__close {
		display: none;
	}
	.l-suica-header .l-nav__lower,
	.l-suica-ic-header .l-nav__lower,
	.l-mobilesuica-header .l-nav__lower,
	.l-appsuica-header .l-nav__lower {
		right: 140px;
	}
	.l-suica-header .l-nav__suicaservice,
	.l-suica-ic-header .l-nav__suicaservice,
	.l-mobilesuica-header .l-nav__suicaservice,
	.l-appsuica-header .l-nav__suicaservice {
		margin-bottom: 0;
	}
	.l-suica-header .l-nav__suicaservice__toggle,
	.l-suica-ic-header .l-nav__suicaservice__toggle,
	.l-mobilesuica-header .l-nav__suicaservice__toggle,
	.l-appsuica-header .l-nav__suicaservice__toggle {
		display: grid;
		place-items: center;
		min-height: 36px;
		margin-left: 24px;
		padding: 8px 16px;
		border: 1px solid #DDDDDD;
		border-radius: 100px;
		background-position: right 18px center;
	}
	.l-suica-header .l-nav__suicaservice__toggle > span,
	.l-suica-ic-header .l-nav__suicaservice__toggle > span,
	.l-mobilesuica-header .l-nav__suicaservice__toggle > span,
	.l-appsuica-header .l-nav__suicaservice__toggle > span {
		font-size: 1.4rem;
	}
	.l-suica-header .l-nav__suicaservice__toggle > span::after,
	.l-suica-ic-header .l-nav__suicaservice__toggle > span::after,
	.l-mobilesuica-header .l-nav__suicaservice__toggle > span::after,
	.l-appsuica-header .l-nav__suicaservice__toggle > span::after {
		content: "";
		display: inline-block;
		width: 10px;
		height: 10px;
		margin-left: 8px;
		background: url(/assets/img/icon/chev-down.svg) no-repeat center/contain;
	}
	.l-suica-header .l-nav__suicaservice__list,
	.l-suica-ic-header .l-nav__suicaservice__list,
	.l-mobilesuica-header .l-nav__suicaservice__list,
	.l-appsuica-header .l-nav__suicaservice__list {
		padding: 12px 4px 4px;
		position: absolute;
		top: 40px;
		right: 0;
		z-index: 20;
		overflow: hidden;
		height: 0;
		visibility: hidden;
		pointer-events: none;
		transition: height 0.2s ease-out, visibility 0.2s;
	}
	.l-suica-header .l-nav__suicaservice__list__inner,
	.l-suica-ic-header .l-nav__suicaservice__list__inner,
	.l-mobilesuica-header .l-nav__suicaservice__list__inner,
	.l-appsuica-header .l-nav__suicaservice__list__inner {
		width: 375px;
		padding: 20px 24px;
		border-top: 3px solid #008803;
		border-radius: 0 0 10px 10px;
		box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
		position: relative;
	}
	.l-suica-header .l-nav__suicaservice__list__inner::before,
	.l-suica-ic-header .l-nav__suicaservice__list__inner::before,
	.l-mobilesuica-header .l-nav__suicaservice__list__inner::before,
	.l-appsuica-header .l-nav__suicaservice__list__inner::before {
		content: "";
		display: block;
		clip-path: polygon(50% 0, 100% 100%, 0 100%);
		width: 12px;
		height: 8px;
		position: absolute;
		right: 70px;
		top: -10px;
		background-color: #008803;
	}
	.l-suica-header .l-nav__suicaservice__close,
	.l-suica-ic-header .l-nav__suicaservice__close,
	.l-mobilesuica-header .l-nav__suicaservice__close,
	.l-appsuica-header .l-nav__suicaservice__close {
		display: block;
		margin: 20px auto 0;
	}
	.l-suica-header .l-nav__suicaservice.is-open .l-nav__suicaservice__list,
	.l-suica-ic-header .l-nav__suicaservice.is-open .l-nav__suicaservice__list,
	.l-mobilesuica-header .l-nav__suicaservice.is-open .l-nav__suicaservice__list,
	.l-appsuica-header .l-nav__suicaservice.is-open .l-nav__suicaservice__list {
		height: auto;
		height: calc-size(auto, size);
		visibility: visible;
		pointer-events: all;
	}
}
@media (hover: hover) {
	.l-suica-header .l-nav__suicaservice__list ul > li > a,
	.l-suica-ic-header .l-nav__suicaservice__list ul > li > a,
	.l-mobilesuica-header .l-nav__suicaservice__list ul > li > a,
	.l-appsuica-header .l-nav__suicaservice__list ul > li > a {
		transition: border-color 0.2s;
	}
	.l-suica-header .l-nav__suicaservice__list ul > li > a > figure img,
	.l-suica-ic-header .l-nav__suicaservice__list ul > li > a > figure img,
	.l-mobilesuica-header .l-nav__suicaservice__list ul > li > a > figure img,
	.l-appsuica-header .l-nav__suicaservice__list ul > li > a > figure img {
		transition: scale 0.2s ease-out;
	}
	.l-suica-header .l-nav__suicaservice__list ul > li > a:hover,
	.l-suica-ic-header .l-nav__suicaservice__list ul > li > a:hover,
	.l-mobilesuica-header .l-nav__suicaservice__list ul > li > a:hover,
	.l-appsuica-header .l-nav__suicaservice__list ul > li > a:hover {
		border-color: #008803;
	}
	.l-suica-header .l-nav__suicaservice__list ul > li > a:hover > figure img,
	.l-suica-ic-header .l-nav__suicaservice__list ul > li > a:hover > figure img,
	.l-mobilesuica-header .l-nav__suicaservice__list ul > li > a:hover > figure img,
	.l-appsuica-header .l-nav__suicaservice__list ul > li > a:hover > figure img {
		scale: 1.1;
	}
}

.l-suica-header .l-header__logo {
	width: 104px;
}
@media (min-width: 1024px) {
	.l-suica-header .l-header__logo {
		width: 190px;
	}
	.l-suica-header .l-nav__lv1 {
		width: 100%;
		padding-left: 280px;
	}
}

.l-suica-ic-header .l-header__logo {
	width: 208px;
}
@media (min-width: 1024px) {
	.l-suica-ic-header .l-header__logo {
		width: 294px;
		translate: 0 -9px;
	}
	.l-suica-ic-header .l-nav__lv1 {
		width: 100%;
		padding-left: 390px;
	}
}

.l-mobilesuica-header .l-header__logo {
	width: 200px;
	height: 45px;
}
.l-mobilesuica-header .l-header__logo > a {
	height: 100%;
	position: relative;
	background: url("/assets/img/suica/logo-mobilesuica_penguin.png") no-repeat center left/auto 100%;
}
.l-mobilesuica-header .l-header__logo > a > img {
	width: 162px;
	position: absolute;
	top: 8px;
	right: 0;
}
@media (min-width: 1024px) {
	.l-mobilesuica-header .l-header__logo {
		width: 280px;
		height: 63px;
	}
	.l-mobilesuica-header .l-header__logo > a > img {
		width: 227px;
		top: 12px;
	}
	.l-mobilesuica-header .l-nav__lv1 {
		width: 100%;
		padding-left: 365px;
	}
	.l-mobilesuica-header .l-nav__lv1__global > a[target=_blank] {
		position: relative;
		padding-right: calc(1em + 10px);
	}
	.l-mobilesuica-header .l-nav__lv1__global > a[target=_blank]::after {
		content: "";
		display: block;
		width: 0.9em;
		height: 0.9em;
		background: url("/assets/img/icon/blank.svg") no-repeat center/contain;
		position: absolute;
		top: 0.2em;
		right: 8px;
	}
}

.l-appsuica-header .l-header__logo {
	width: 200px;
}
@media (min-width: 1024px) {
	.l-appsuica-header .l-header__logo {
		width: 280px;
	}
	.l-appsuica-header .l-nav__lv1 {
		width: 100%;
		padding-left: 360px;
		width: 100%;
		padding-left: 365px;
	}
	.l-appsuica-header .l-nav__lv1__global > a[target=_blank] {
		position: relative;
		padding-right: calc(1em + 10px);
	}
	.l-appsuica-header .l-nav__lv1__global > a[target=_blank]::after {
		content: "";
		display: block;
		width: 0.9em;
		height: 0.9em;
		background: url("/assets/img/icon/blank.svg") no-repeat center/contain;
		position: absolute;
		top: 0.2em;
		right: 8px;
	}
}

.suica-titlelogo {
	display: inline-block;
	width: 5.666em;
	height: auto;
	margin: 0 0.4em;
	vertical-align: middle;
	translate: 0 -0.2em;
}

.mobilesuica-titlelogo {
	display: inline-block;
	width: 10em;
	height: auto;
	margin: 0 0.4em;
	vertical-align: middle;
	translate: 0 -0.2em;
}

.l-suica-localnav,
.l-mobilesuica-localnav,
.l-appsuica-localnav {
	margin-top: 100px;
	padding: 40px 0;
	background-color: var(--color-bg-sub);
}
@media (min-width: 750px) {
	.l-suica-localnav,
	.l-mobilesuica-localnav,
	.l-appsuica-localnav {
		margin-top: 120px;
		padding: 50px 0;
	}
}

.l-bg-suica-beige:has([data-include-id=suica-servicelink]) + [data-include-id] {
	margin-top: 0;
}
.l-bg-suica-beige:has([data-include-id=suica-servicelink]) + [data-include-id] > * {
	margin-top: 0;
}

.u-rad-20 {
	border-radius: 20px;
}

.u-image-text-layout {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}
.u-image-text-layout__image {
	width: 310px;
	flex-shrink: 0;
}
.u-image-text-layout__image img {
	width: 100%;
	height: auto;
}
.u-image-text-layout__content {
	flex: 1;
}
@media (max-width: 750px) {
	.u-image-text-layout {
		flex-direction: column;
		gap: 20px;
	}
	.u-image-text-layout__image {
		width: 100%;
	}
}

.u-position-relative {
	position: relative !important;
}

.c-heading-lv3__icon {
	min-height: 40px;
	padding-top: 0;
	padding-left: 50px;
	background-position: left center;
	background-size: 40px;
	background-repeat: no-repeat;
}
@media (max-width: 750px) {
	.c-heading-lv3__icon {
		min-height: 30px;
		padding-left: 40px;
		background-size: 30px;
		background-repeat: no-repeat;
	}
}

.bg-white {
	background-color: #fff !important;
}

.u-text-size-xxl {
	font-size: 2.6rem;
}
@media (max-width: 750px) {
	.u-text-size-xxl {
		font-size: 2.4rem;
	}
}

.u-align-items {
	align-items: center;
}

@media (max-width: 750px) {
	.c-button-container--center-sp {
		justify-content: center;
	}
}

.u-pt-l {
	padding-top: 50px;
}
@media (max-width: 750px) {
	.u-pt-l {
		padding-top: 40px;
	}
}

@media (max-width: 750px) {
	.u-mt-m-sp {
		margin-top: 30px;
	}
}

.u-color-green {
	color: var(--color-theme-main);
}

@media (max-width: 750px) {
	.u-sp-block {
		display: block !important;
	}
}

@media (max-width: 750px) {
	.u-mt-s-sp {
		margin-top: 20px !important;
	}
}

@media (max-width: 750px) {
	.u-mt-l-sp {
		margin-top: 40px;
	}
}

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

.u-max-width-500 {
	max-width: 500px;
	margin: 0 auto;
}
.u-max-width-500 img {
	width: 100%;
}

.u-max-width-600 {
	max-width: 600px;
	margin: 0 auto;
}
.u-max-width-600 img {
	width: 100%;
}

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

.va-m {
	vertical-align: middle !important;
}

.u-service-icon-work {
	background-image: url("/suica/ic/suica-id/img/icon-work.svg") !important;
}

.u-pl-15em {
	padding-left: 1.5em;
}

/* 追記：Suicaの大切なお知らせ一覧ページ　お知らせリストの整形用CSS ********************/

#importantInfoList .importantInfoList_title {
	font-weight: bold;
}

#importantInfoList .importantInfoList_contentsText {
	display: block;
	margin-top: 1em;
	font-size: 1.3rem;
}

@media (min-width: 1024px) {
	#importantInfoList .importantInfoList_contentsText {
		font-size: 1.4rem;
	}
}

#importantInfoList .importantInfoList_detailLink {
	display: inline-block;
	margin-top: 1em;
	position: relative;
	padding-left: 1.3em;
}

#importantInfoList .importantInfoList_detailLink::before {
	position: absolute;
	content: "";
	display: block;
	width: 1em;
	height: 1em;
	top: 0.335em;
	left: 0;
	background: url(/assets/img/icon/chev-cir-right.svg) no-repeat left top;
}
/*# sourceMappingURL=suica-common.css.map */