@charset "UTF-8";

@font-face {
	font-family: 'MOBO';
	src: url('../font/MOBO-Bold.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
}

html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	overflow-y: scroll;
	font-size: 62.5%;
}

body {
	font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO", "verdana", sans-serif;
	width: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
	line-height: 1.8;
	background-color: rgba(245, 243, 241, 1);
	color: rgba(33, 26, 21, 1);
	margin: 0;
	-webkit-font-smoothing: antialiased;
	position: relative;
}

a {
	transition: all .2s ease-out;
	text-decoration: underline;
	color: rgba(33, 26, 21, 1);
}

a:hover {
	cursor: pointer;
	color: rgba(136, 125, 117, 1);
	opacity: 1;
}

img {
	width: 100%;
}

ol,
ul,
li {
	list-style: none;
	padding: 0;
}

.l ._pc {
	display: block;
}

._pc {
	display: none;
}

.l ._sp {
	display: none;
}

._sp {
	display: block;
}

/* ================================
			FadeIn
================================ */

.FadeIn {
	opacity: 0;
}

.FadeIn.DownUp {
	opacity: 0;
	transform: translate(0, 50px);
}

.FadeIn.ScrollIn {
	opacity: 1;
	transform: translate(0, 0);
	transition: all 300ms ease-in;
}

.FadeIn.Second.ScrollIn {
	transition-delay: 0.2s;
}

:not(.s) .FadeIn.Bounce.ScrollIn {
	opacity: 1;
	animation: fadeUpBounce 800ms ease-in both;
}


@keyframes fadeUpBounce {
	0% {
		opacity: 1;
		transform: translateY(50px);
	}

	60% {
		opacity: 1;
		transform: translateY(-10px);
	}

	100% {
		opacity: 1;
		transform: translateY(2px);
	}
}

.s .FadeIn.Bounce.ScrollIn {
	opacity: 1;
	animation: fadeUpBounceSp 800ms ease-in both;
	will-change: transform;
}

@keyframes fadeUpBounceSp {
	0% {
		opacity: 1;
		transform: translateY(50px);
	}

	60% {
		opacity: 1;
		transform: translateY(2px)
	}

	100% {
		opacity: 1;
		transform: translateY(2px);
	}
}

/* ================================
        Layout
================================ */
.Center {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	max-width: 1240px;
	position: relative;
	text-align: center;
}

.s .Center {
	padding-left: 5.08vw;
	padding-right: 5.08vw;
}

.CommonText {
	font-size: 1.8rem;
	font-weight: 600;
	padding-top: 20px;
}

.s .CommonText {
	font-size: 4.07vw;
	padding-top: 3.05vw;
}

.CommonNote {
	font-size: 1.4rem;
	font-weight: 600;
	position: relative;
	z-index: 10;
}

.s .CommonNote {
	font-size: 3.562vw;
}

.CommonNote li {
	padding-bottom: 5px;
}

.CommonNote li:last-child {
	padding-bottom: 0;
}

.s .CommonNote li {
	padding-bottom: 2.035vw;
}

.s .CommonNote li:last-child {
	padding-bottom: 0;
}

.CommonBox {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 24px;
	padding: 60px 100px;
	margin-top: 40px;
}

.s .CommonBox {
	padding: 10.178117vw 4.07vw;
	margin-top: 6.106vw;
}

/* ================================
        Title
================================ */

h2,
h3,
h4 {
	font-family: 'MOBO', sans-serif;
}

h1 {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

h2 {
	font-size: 4.4rem;
	line-height: 1.3;
	font-weight: 900;
}

.s h2 {
	font-size: 8.14vw;
	line-height: 1.3;
	font-weight: 900;
}


h2 span {
	color: rgba(217, 0, 19, 1);
}

h3 {
	font-size: 4rem;
	line-height: 1;
	font-weight: 900;
}

h3 span {
	color: rgba(217, 0, 19, 1);
}

.s h3 {
	font-size: 6.10687vw;
	line-height: 1.4;
}

h4 {
	font-size: clamp(1.6rem, 1.649vw, 2.4rem);
	line-height: 1.4;
	font-weight: 800;
}

.s h4 {
	font-size: 5.089vw;
}

h4 span {
	color: rgba(217, 0, 19, 1);
}

/* ================================
        Mv
================================ */
.Mv {
	background-color: rgba(217, 0, 19, 1);
	width: 100%;
	position: relative;
}

.Mv::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 7.14vw;
	background-color: rgba(217, 0, 19, 1);
	transform: skewY(-4deg);
	transform-origin: bottom right;
	z-index: 0;
}

.MvBgWrap {
	position: relative;
	max-width: 1900px;
	margin: 0 auto;
	height: 800px;
}

.s .MvBgWrap {
	height: auto;
}

.MvBg {
	background: rgba(255, 255, 255, 1) url(../img/mv.png) center center no-repeat;
	background-size: cover;
	height: 100%;
	width: 100%;
	position: relative;
	z-index: 1;
}

@media screen and (min-width:441px) and (max-width:970px) {
	.s .MvBg {
		background: rgba(255, 255, 255, 1) url(../img/mv-sp.png) center center no-repeat;
		background-size: cover;
		width: 100%;
		aspect-ratio: 440 / 660;
		position: relative;
	}
}

@media screen and (max-width:440px) {
	.s .MvBg {
		background: rgba(255, 255, 255, 1) url(../img/mv-sp.png) center center no-repeat;
		background-size: cover;
		width: 100%;
		aspect-ratio: unset;
		max-width: 440px;
		height: 666px;
		margin: 0 auto;
		position: relative;
	}
}


.MvLogo {
	max-width: 235px;
	position: absolute;
	top: 50px;
	left: 60px;
}

.s .MvLogo {
	display: none;
}

/* ================================
        Change
================================ */
.Change {
	padding: 292px 0 271px;
}

.s .Change {
	padding: 39.94vw 0 43vw;
}

.ChangeMainTitle {
	position: relative;
}

.ChangeMainTitle:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 70px;
	height: 101px;
	background: url(../img/change-hatson-icon.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom center;
	transform: translateY(-64px);
}

.s .ChangeMainTitle:before {
	width: 17.81vw;
	height: 25.699vw;
	transform: translateY(-24vw);
}

.ChangeTitle1 {
	max-width: 407px;
	margin: 0 auto;
	padding-bottom: 12px;
}

.s .ChangeTitle1 {
	max-width: 57.76vw;
}

.ChangeTitle2 {
	max-width: 382px;
	margin: 0 auto;
	padding-bottom: 12px;
}

.s .ChangeTitle2 {
	max-width: 57.5vw;
}

.ChangeBox {
	margin: 48px auto 56px auto;
	background-color: rgba(245, 243, 241, 1);
	border-radius: 12px;
	padding: 48px;
}

.s .ChangeBox {
	margin: 10.178vw auto;
	padding: 4.198vw 4.07vw;
}

.ChangeCouponList {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 24px;
	margin-top: 45px;
}

.s .ChangeCouponList {
	gap: 6.106vw;
	margin-top: 6.106vw;
	flex-wrap: wrap;
}

.ChangeCouponList li {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 12px;
	padding: 24px;
	width: 33.3333%;
	text-align: center;
	position: relative;
}

.s .ChangeCouponList li {
	padding: 6.106vw;
	width: 100%;
}

.ChangeCouponNumber {
	max-width: 64px;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-25%, -25%);
}

.s .ChangeCouponNumber {
	max-width: 16.28vw;
}

.ChangeCouponItem {
	max-width: 164px;
	margin: 0 auto;
	padding-bottom: 17px;
}

.s .ChangeCouponItem {
	max-width: 41.73vw;
	padding-bottom: 4.325vw;
}


.ChangeCouponFollow {
	display: flex;
	justify-content: center;
	gap: 32px;
	padding-bottom: 24px;
}

.s .ChangeCouponFollow {
	flex-wrap: wrap;
	gap: 4.071vw;
	padding-bottom: 6.106vw;
}

.ChangeCouponText {
	font-size: 2.4rem;
	line-height: 1.8;
	font-weight: 900;
}

.ChangeCouponText h3 {
	line-height: 1.4;
}

.s .ChangeCouponText {
	font-size: 5.089vw;
}


.ChangeCouponImg {
	max-width: 194px;
}

.s .ChangeCouponImg {
	max-width: 49.363vw;
}

.ChangeAppList {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 24px;
	margin-top: 45px
}

.s .ChangeAppList {
	flex-wrap: wrap;
	gap: 9.414vw;
	margin-top: 13.486vw;
}

.ChangeAppList li {
	width: 33.3333%;
	text-align: center;
	position: relative;
}

.s .ChangeAppList li {
	width: 100%
}

.ChangeAppList li p {
	font-size: 1.8rem;
	line-height: 1.8;
	font-weight: 600;
	padding-top: 6px;
}

.s .ChangeAppList li p {
	font-size: 4.071vw;
	padding-top: 1.017vw;
}

.ChangeAppItem {
	max-width: 317px;
	margin: 0 auto;
	padding-bottom: 17px;
}

.s .ChangeAppItem {
	max-width: 80.661vw;
	padding-bottom: 4.071vw;
}

/* ================================
        Announce
================================ */
.Announce {
	position: relative;
	background-color: rgba(255, 255, 255, 1);
	padding: 72px 0;
}

.s .Announce {
	padding: 10.178vw 0 20.356vw;
}

.Announce::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 7.14vw;
	background-color: rgba(255, 255, 255, 1);
	transform: skewY(4deg);
	transform-origin: top right;
	z-index: -1;
}

.Announce::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 7.14vw;
	background-color: rgba(255, 255, 255, 1);
	transform: skewY(-4deg);
	transform-origin: bottom right;
	z-index: -1;
}

.AnnounceMarker {
	position: absolute;
	z-index: -2;
	top: 0;
	right: 0;
	transform: translate(0, 0);
	max-width: 313px;
}

.s .AnnounceMarker {
	max-width: 45.292vw;
}

.AnnounceBox {
	max-width: 728px;
	margin: 40px auto 24px auto;
	background-color: rgba(245, 243, 241, 1);
	border-radius: 12px;
	padding: 34px;
}

.s .AnnounceBox {
	margin: 6.106vw auto;
	padding: 8.142vw 5.089vw;
}

.AnnounceBox p {
	max-width: 356px;
	margin: 0 auto;
}

.s .AnnounceBox p {
	max-width: 79.64vw;
}

/* ================================
        Faq
================================ */
.Faq {
	padding: 170px 0 180px;
}

.s .Faq {
	padding: 30.59vw 0 20.35vw
}

.FaqList {
	max-width: 800px;
	margin: 49px auto 0 auto;
	text-align: left;
}

.s .FaqList {
	margin: 6.1068vw auto 0 auto;
}

.FaqList li {
	border-bottom: 2px solid rgba(200, 195, 191, 1);
}

.FaqHeader,
.FaqContent {
	display: flex;
	align-items: center;
	width: 100%;
	font-size: 1.8rem;
}


.s .FaqHeader,
.s .FaqContent {
	font-size: 4.071vw;
}


.FaqHeader {
	position: relative;
	padding: 33px 36px 33px 0;
	font-weight: 700;
}

.s .FaqHeader {
	padding: 7.888vw 7.888vw 6.106vw 0;
}

.FaqHeader::after {
	position: absolute;
	content: "";
	width: 26px;
	height: 13px;
	background: url(../img/faq-arrow-down.png) no-repeat center center;
	background-size: contain;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 0;
	margin: auto;
}

.s .FaqHeader::after {
	position: absolute;
	content: "";
	width: 4.834vw;
	height: 2.7989vw;
	background: url(../img/faq-arrow-down-sp.png) no-repeat center center;
	background-size: contain;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 0;
	margin: auto;
}

.FaqHeader._open::after {
	position: absolute;
	content: "";
	width: 26px;
	height: 13px;
	background: url(../img/faq-arrow-up.png) no-repeat center center;
	background-size: contain;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 0;
	margin: auto;
}

.s .FaqHeader._open::after {
	position: absolute;
	content: "";
	width: 4.834vw;
	height: 2.7989vw;
	background: url(../img/faq-arrow-up-sp.png) no-repeat center center;
	background-size: contain;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 0;
	margin: auto;
}

.FaqHeader:hover {
	cursor: pointer;
}

.FaqHeader span {
	position: relative;
	display: block;
	padding-left: 62px;
}

.s .FaqHeader span {
	padding-left: 13.77vw;
}

.FaqHeader span::before {
	content: "";
	display: inline;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0px;
	margin: auto;
	width: 50px;
	height: 50px;
	display: block;
	background-image: url(../img/faq-q.png);
	background-size: 50px 50px;
	background-repeat: no-repeat;
}

.s .FaqHeader span::before {
	content: "";
	top: 0;
	bottom: auto;
	width: 10.178vw;
	height: 10.178vw;
	background-image: url(../img/faq-q-sp.png);
	background-size: 10.178vw 10.178vw;
	transform: translateY(1vw);
}

.s .FaqHeader span._singular::before {
	content: "";
	top: 0;
	bottom: 0;
	transform: unset;
}

.FaqContent {
	display: none;
	padding-bottom: 33px;
}

.s .FaqContent {
	padding-bottom: 6.106vw;
	padding-right: 6.106vw;
}

.FaqContent p {
	position: relative;
	display: block;
	padding-left: 62px;
}

.FaqContent p span {
	display: block;
}

.s .FaqContent p {
	padding-left: 13.77vw;
}


.FaqContent p::before {
	content: "";
	display: inline;
	position: absolute;
	top: 0;
	bottom: auto;
	left: 0px;
	margin: auto;
	width: 50px;
	height: 50px;
	display: block;
	background-image: url(../img/faq-a.png);
	background-size: 50px 50px;
	background-repeat: no-repeat;
	transform: translateY(8px);
}

.s .FaqContent p::before {
	content: "";
	top: 0;
	bottom: auto;
	width: 10.178vw;
	height: 10.178vw;
	background-image: url(../img/faq-a-sp.png);
	background-size: 10.178vw 10.178vw;
	transform: translateY(1vw);
}