/* ==========================================================================
	 114バンキングアプリ 家族口座照会機能 LP
	 Mobile First / BEM / rem
	 ========================================================================== */

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 62.5%; /* 1rem = 10px */
}

body {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.5rem;
	line-height: 1.8;
	color: #4b4b4b;
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

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

ul {
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}
.pc {display: none;}
.sp {display: block;}
@media (min-width: 768px) {
.pc {display: block;}
.sp {display: none;}
}
/* ---------- Header ---------- */
.header {
	text-align: center;
}

.header__inner {
	padding: 1.2rem 0;
}

.header__logo {
	margin-bottom: 0.4rem;
}

.header__logo-img {
	width: 4rem;
	height: auto;
}

.header__title {
	font-size: 1.8rem;
	font-weight: 400;
	color: #4b4b4b;
	letter-spacing: 0.05em;
}

.header__title span {
	font-family: "Inter", "Noto Sans JP", sans-serif;
}

.header__banner {
	background: #e7332c;
	padding: 1.6rem 0;
}

.header__banner-text {
	font-size: 1.8rem;
	font-weight: 400;
	color: #fff;
	letter-spacing: 0.05em;
}

@media (min-width: 768px) {
	.header__inner {
		padding: 1.6rem 0;
	}

	.header__logo-img {
		width: 4.3rem;
	}

	.header__title {
		font-size: 2.4rem;
	}

	.header__banner {
		padding: 1.2rem 0;
	}

	.header__banner-text {
		font-size: 2.4rem;
	}
}

/* ---------- Hero ---------- */
.hero {
	width: 100%;
	overflow: hidden;
}

.hero__img--sp {
	width: 100%;
	height: auto;
	display: block;
}

.hero__pc {
	display: none;
}

@media (min-width: 768px) {
	.hero__img--sp {
		display: none;
	}

	.hero__pc {
		display: block;
		background: url(../images/fv_bg.jpg) no-repeat center center / cover;
		padding: 4rem 2rem;
	}

	.hero__inner {
		max-width: 96rem;
		margin: 0 auto;
	}

	.hero__fg {
		width: 100%;
		height: auto;
		display: block;
	}
}

/* ---------- App Download ---------- */
.app-download {
	text-align: center;
}

.app-download--top {
	background: #006eb8;
	padding: 2.4rem 2rem 3rem;
}

.app-download--bottom {
	background: linear-gradient(to bottom, #fc0019 55.885%, #c10c0c 110.14%);
	padding: 4rem 2rem 3rem;
}

.app-download__inner {
	max-width: 70rem;
	margin: 0 auto;
}

.app-download__heading {
	font-size: 2rem;
	font-weight: 900;
	color: #fff;
	line-height: 1.4;
	margin-bottom: 2rem;
}

.app-download__heading-mark {
	display: inline-block;
	transform: rotate(15deg);
	font-size: 2.1rem;
}

.app-download__badges {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.6rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.app-download__badge {
	display: block;
}

.app-download__badge-img {
	height: 4.4rem;
	width: auto;
}

.app-download__qr {
	display: none;
}

.app-download__qr-img {
	width: 5.2rem;
	height: auto;
}

.app-download__link {
	font-size: 1.3rem;
	color: #fff;
	text-decoration: underline;
}

.app-download__link--white {
	color: #fff;
}

.app-download__cta {
	background: #fff;
	border-radius: 7rem;
	padding: 1.6rem 3rem;
	display: inline-block;
	margin-bottom: 2.4rem;
}

.app-download__cta-text {
	font-size: 1.4rem;
	font-weight: 500;
	color: #fc0019;
	line-height: 1.4;
}

@media (min-width: 768px) {
	.app-download--top {
		padding: 3rem 2rem 4rem;
	}

	.app-download--bottom {
		padding: 5rem 2rem 4rem;
	}

	.app-download__heading {
		font-size: 4rem;
		margin-bottom: 2.4rem;
	}
	.app-download__heading-mark {
		font-size: 4.1rem;
	}
	.app-download__badge-img {
		height: 5.2rem;
	}

	.app-download__qr {
		display: block;
	}

	.app-download__qr-img {
		width: 5.2rem;
	}

	.app-download__link {
		font-size: 1.5rem;
	}

	.app-download__cta {
		padding: 2rem 6rem;
	}

	.app-download__cta-text {
		font-size: 2.2rem;
	}
}

/* ---------- Section ---------- */
.section {
	padding: 4rem 2rem;
}

.section--white {
	background: #fff;
}

.section--gray {
	background: #f2f5f7;
}

.section--light-gray {
	background: #f2f5f7;
}

.section--stripe {
	background-color: rgba(241, 236, 217, 1);
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(245, 242, 228, 1) 10px, rgba(245, 242, 228, 1) 20px );
	padding: 0 2rem 4rem;
}

.section__inner {
	max-width: 60rem;
	margin: 0 auto;
}

.section__title {
	font-size: 2.4rem;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.05em;
	margin-bottom: 2rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	border-top: 4px solid #FC0019;
	border-bottom: 4px solid #FC0019;
}

.section__title--red {
	color: #fc0019;
}

.section__lead {
	font-size: 1.5rem;
	line-height: 1.8;
	letter-spacing: 0.05em;
	margin-bottom: 2rem;
}

.section__text {
	font-size: 1.5rem;
	line-height: 1.8;
	letter-spacing: 0.05em;
}

@media (min-width: 768px) {
	.section {
		padding: 6rem 2rem;
	}
	.section#flow {
		padding: 0 2rem 6rem;
	}
	.section#overview {
		padding: 0 2rem 6rem;
	}

	.section__title {
		font-size: 3rem;
		margin-bottom: 3rem;
	}

	.section__lead {
		font-size: 2.2rem;
		max-width: 84rem;
		margin-left: auto;
		margin-right: auto;
	}

	.section__text {
		font-size: 2.2rem;
		max-width: 84rem;
		margin-left: auto;
		margin-right: auto;
	}

	.section__inner {
		max-width: 96rem;
	}
}

/* ---------- Catch ---------- */
.catch {
	text-align: center;
	position: relative;
	z-index: 1;
	margin-bottom: -5.4rem;
}

.catch__text {
	display: inline-block;
	font-size: 1.6rem;
	font-weight: 400;
	color: #4b4b4b;
	letter-spacing: 0.05em;
	background: url(../images/bubble.png) no-repeat center center / contain;
	padding: 2.5rem 4rem 3.8rem;
}

@media (min-width: 768px) {
	.catch {
		font-size: 1.8rem;
		margin-bottom: -6.5rem;
	}

	.catch__text {
		font-size: 2.4rem;
		padding: 3rem 5rem 4.8rem;
	}
}

/* ---------- Usecase ---------- */
.usecase {
	background: #fafafa;
	border: 3px solid #707070;
	padding: 5rem 2.4rem 2rem;
}

.usecase__list {
	list-style: none;
}

.usecase__item {
	font-size: 1.5rem;
	line-height: 1.8;
	letter-spacing: 0.05em;
	color: #4b4b4b;
	padding-left: 2.6rem;
	position: relative;
	margin-bottom: 0.8rem;
}

.usecase__item:last-child {
	margin-bottom: 0;
}

.usecase__item::before {
	content: "●";
	position: absolute;
	left: 0;
	top: 0;
}

@media (min-width: 768px) {
	.usecase {
		max-width: 62.6rem;
		margin: 0 auto;
		padding: 5.5rem 4rem 3rem;
	}

	.usecase__item {
		font-size: 2.2rem;
	}
}

/* ---------- Overview ---------- */
#overview .section__inner {
	background: #f2f5f7;
	padding: 3rem 2rem;
	border-radius: 0.4rem;
}

@media (min-width: 768px) {
	#overview .section__inner {
		padding: 4rem 5rem;
	}
}

/* ---------- Overview Title ---------- */
.overview-title {
	text-align: center;
	margin-bottom: 3rem;
	position: relative;
	isolation: isolate;
}

.overview-title__text {
	font-size: 1.9rem;
	font-weight: 700;
	color: #4b4b4b;
	letter-spacing: 0.05em;
	display: block;
	padding: 0.8rem 2rem;
	position: relative;
	background: #fff;
	border: 2px solid #4b4b4b;
}

/* 右下にずれた影ボックス */
.overview-title__text::after {
	content: "";
	position: absolute;
	top: 7px;
	left: 7px;
	width: 100%;
	height: 100%;
	background: #4b4b4b;
	z-index: -1;
}

/* 左上角の三角形 */
.overview-title__text::before {
	content: "";
	position: absolute;
	top: -2px;
	left: -2px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 2.2rem 2.2rem 0 0;
	border-color: #4b4b4b transparent transparent transparent;
	z-index: 1;
}

.overview-title__note {
	font-size: 1.1rem;
	color: #000;
	text-align: right;
	margin-top: 0.4rem;
}

@media (min-width: 768px) {
	.overview-title__text {
		font-size: 2.6rem;
	}

	.overview-title__note {
		font-size: 1.6rem;
	}
}

/* ---------- Flow Chart ---------- */
.flow-chart {
	margin-bottom: 3rem;
}

.flow-chart__img {
	width: 100%;
	height: auto;

}

@media (min-width: 768px) {
	.flow-chart {
		margin: 0 auto 3rem;
	}
}

/* ---------- Notice ---------- */
.notice {
	padding: 2rem 2.4rem 2.4rem;
	border-radius: 2.2rem;
}

.notice--yellow {
	background: #fdf464;
}

.notice__title {
	font-size: 1.9rem;
	font-weight: 700;
	text-align: center;
	color: #4b4b4b;
	margin-bottom: -1rem;
	display: flex;
	align-items: center;
	gap: 1.2rem;
}

.notice__title::before,
.notice__title::after {
	content: "";
	flex: 1;
	height: 2px;
	background: #4b4b4b;
}

.notice__text {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.8;
	color: #4b4b4b;
	letter-spacing: 0.05em;
	border-bottom: 2px solid #4b4b4b;
	padding-top: 0.8rem;
    padding-bottom: 1.4rem;
}

@media (min-width: 768px) {
	.notice {
		max-width: 79rem;
		margin: 0 auto;
		padding: 2rem 4rem 3rem;
	}

	.notice__title {
		font-size: 3rem;
	}

	.notice__text {
		font-size: 2.2rem;
	}
}

/* ---------- Flow Heading ---------- */
.flow-heading {
	background: #fc0019;
	text-align: center;
	padding: 3rem 2rem;
	margin-left: -2rem;
	margin-right: -2rem;
}

.flow-heading__text {
	font-size: 2.4rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.05em;
}

@media (min-width: 768px) {
	.flow-heading {
		padding: 2.4rem 2rem;
	}

	.flow-heading__text {
		font-size: 3rem;
	}
}

/* ---------- Step Block ---------- */
.step-block {
	border-radius: 2rem;
	overflow: visible;
	margin-top: 5rem;
	margin-bottom: 3rem;
}

.step-block--blue {
	border: 8px solid #036eb8;
}

.step-block--pink {
	border: 8px solid #f55d7c;
}

.step-block__header {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	padding: 1.6rem 2rem;
	padding-left: 6rem;
	position: relative;
	border-radius: 1.2rem 1.2rem 0 0;
	min-height: 5.6rem;
}

.step-block__header--blue {
	background: #036eb8;
}

.step-block__header--pink {
	background: #f55d7c;
}

.step-block__header-text {
	font-size: 1.4rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.4;
	letter-spacing: 0.05em;
}

.step-block__person {
	width: 5rem;
	height: auto;
	position: absolute;
	bottom: 0;
	left: 0.8rem;
}

.step-block__person--right {
	left: auto;
	right: 0.8rem;
}

.step-block__body {
	padding: 2rem 1.6rem 3rem;
	background: #fff;
	border-radius: 0 0 1.2rem 1.2rem;
}

.step-block__note {
	font-size: 1.1rem;
	color: #fc0019;
	padding: 1rem 1.6rem;
	line-height: 1.6;
	background: #fff;
	padding-left: calc(1.6rem + 1em);
	text-indent: -1.3em;
}

.step-block__desc {
	font-size: 1.5rem;
	line-height: 1.8;
	margin-bottom: 2rem;
}

@media (min-width: 768px) {
	.step-block {
		max-width: 79.2rem;
		margin-top: 6rem;
		margin-left: auto;
		margin-right: auto;
	}

	.step-block__header {
		padding: 2rem 3rem 2rem 10rem;
	}
	.step-block__header.step-block__header--pink {
		padding: 2rem 3rem 2rem 3rem;
	}

	.step-block__header-text {
		font-size: 2.4rem;
		padding-left: 0;
	}

	.step-block__person {
		width: 8.4rem;
		left: 1.2rem;
	}

	.step-block__person--right {
		left: auto;
		right: 1.2rem;
	}

	.step-block__body {
		padding: 3rem 3.5rem 4rem;
	}

	.step-block__note {
		font-size: 2.2rem;
		padding: 1.2rem 3.5rem;
		padding-left: calc(3.5rem + 1em);
	}

	.step-block__desc {
		font-size: 2.2rem;
	}
}

/* ---------- Step Item ---------- */
.step-item {
	margin-bottom: 2rem;
}

.step-item__label {
	margin-bottom: 1.2rem;
}

.step-item__label-img {
	height: 2.5rem;
	width: auto;
}

.step-item__text {
	font-size: 1.5rem;
	line-height: 1.6;
	letter-spacing: 0.05em;
	margin-bottom: 1.6rem;
	padding-top: 1rem;
	border-top: 2px solid #ddd;
}

.step-item__screenshot {
	text-align: center;
	position: relative;
	margin-bottom: 1.6rem;
}

.step-item__screenshot-img {
	max-width: 28rem;
	width: 100%;
	height: auto;
	border-radius: 0.4rem;
}


.step-item__note {
	font-size: 1.1rem;
	color: #4b4b4b;
	line-height: 1.6;
}

.step-item__note--red {
	color: #fc0019;
}

.step-item__caution {
	font-size: 1.1rem;
	color: #4b4b4b;
	line-height: 1.6;
	margin-bottom: 2rem;
	padding-left: 1em;
	text-indent: -1.3em;
}

.step-item__caution:has(+ .step-item__caution) {
	margin-bottom: 0;
}

.step-item__arrow {
	text-align: center;
	margin: 1.6rem 0;
}

.step-item__arrow-img {
	width: 4.8rem;
	height: auto;
}

@media (min-width: 768px) {
	.step-item__label-img {
		height: 3.2rem;
	}

	.step-item__text {
		font-size: 2.2rem;
	}

	.step-item__screenshot-img {
		max-width: 36rem;
	}

	.step-item__note {
		font-size: 2.2rem;
	}

	.step-item__caution {
		font-size: 1.9rem;
	}

	.step-item__arrow-img {
		width: 6rem;
	}
}

/* ---------- Section Heading ---------- */
.section-heading {
	text-align: center;
	margin-bottom: 3rem;
}

#flow .section-heading {
	margin-top: 6rem;
}

.section-heading__title {
	font-size: 2.4rem;
	font-weight: 700;
	color: #4b4b4b;
	letter-spacing: 0.05em;
	padding-top: 1rem;
    padding-bottom: 1rem;
	border-top: 4px solid #4b4b4b;
	border-bottom: 4px solid #4b4b4b;
	background: #fff;
}

@media (min-width: 768px) {
	.section-heading__title {
		font-size: 3rem;
	}
}

/* ---------- Notes ---------- */
.notes__title {
	font-size: 1.3rem;
	font-weight: 700;
	color: #4b4b4b;
	letter-spacing: 0.05em;
	padding-bottom: 0.8rem;
	border-bottom: 2px solid #4b4b4b;
	margin-bottom: 1.2rem;
}

.notes__list {
	margin-bottom: 3rem;
}

.notes__item {
	font-size: 1.3rem;
	line-height: 1.6;
	color: #4b4b4b;
	letter-spacing: 0.05em;
	padding-left: 1.6rem;
	position: relative;
	margin-bottom: 1rem;
}

.notes__item::before {
	content: "※";
	position: absolute;
	left: 0;
	top: 0;
}

.notes__contact {
	font-size: 1.3rem;
	line-height: 1.6;
	color: #4b4b4b;
	letter-spacing: 0.05em;
	margin-bottom: 3rem;
}

@media (min-width: 768px) {
	.notes__title {
		font-size: 2.6rem;
	}

	.notes__item {
		font-size: 1.8rem;
	}

	.notes__contact {
		font-size: 1.8rem;
	}
}

.notes__legal {
	border-top: 4px solid #4b4b4b;
	padding-top: 1.6rem;
	margin-top: 2rem;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	padding-left: 2rem;
	padding-right: 2rem;
}

.notes__legal-text {
	font-size: 1rem;
	color: #4b4b4b;
	line-height: 1.8;
	text-align: left;
	max-width: 96rem;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.notes__legal-text {
		font-size: 1.4rem;
	}
}

/* ---------- Footer ---------- */
.footer {
	text-align: center;
	padding: 1rem 2rem 0;
	background: #f2f5f7;
}

.footer__date {
	font-size: 1rem;
	color: #4b4b4b;
	text-align: right;
	margin-bottom: 1rem;
}

.footer__trademark {
	font-size: 1rem;
	color: #4b4b4b;
	line-height: 1.8;
	background: #fff;
	padding: 1rem 2rem;
	margin: 0 -2rem;
}

.footer__copyright {
	background: #4b4b4b;
	padding: 1rem 2rem;
	margin: 0 -2rem;
}

.footer__copyright-text {
	font-size: 1.2rem;
	color: #fff;
}

@media (min-width: 768px) {
	.footer {
		padding: 1rem 4rem 0;
	}

	.footer__date {
		font-size: 1.2rem;
	}

	.footer__trademark {
		font-size: 1.2rem;
		padding: 1rem 4rem;
		margin: 0 -4rem;
	}

	.footer__copyright {
		margin: 0 -4rem;
	}

	.footer__copyright-text {
		font-size: 1.2rem;
	}
}

/* ---------- Back to Top ---------- */
.back-to-top {
	position: fixed;
	right: 1.6rem;
	bottom: 2rem;
	width: 5rem;
	height: 5rem;
	background: #fc0019;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
	z-index: 100;
}

.back-to-top.is-visible {
	opacity: 0.8;
	visibility: visible;
}

.back-to-top__arrow {
	display: block;
	width: 1rem;
	height: 0.8rem;
	border-left: 0.5rem solid transparent;
	border-right: 0.5rem solid transparent;
	border-bottom: 0.8rem solid #fff;
	margin-bottom: 0.2rem;
}

.back-to-top__text {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
}