@charset "UTF-8";

/* --------------------------------------------------------------------------------------
	body
--------------------------------------------------------------------------------------- */

body { background-color: var(--color-beige) !important; }

.ymtr-widget { background-color: transparent !important; }

/* --------------------------------------------------------------------------------------
	ボタン
--------------------------------------------------------------------------------------- */

.ymtr-widget .ymtr--button .ymtr--button__wrapper {
	background-color: var(--color-yellow) !important;
	border: 3px solid var(--color-blue) !important;
	border-radius: 100vw !important;
	box-shadow: 5px 5px 0 var(--color-blue) !important;
}

.ymtr-widget .ymtr--button .ymtr--button__link {
	color: var(--color-blue) !important;
	display: inline-block !important;
	font-family: 'Noto Sans JP', sans-serif !important;
	font-size: 24px !important;
	min-width: 480px !important;
	padding: 24px 60px !important;
	position: relative !important;
	transition: var(--transition) !important;
}

.ymtr-widget .ymtr--button .ymtr--button__under { display: none !important; }

.ymtr-widget .ymtr--button .ymtr--button__link>span { font-weight: var(--Bold) !important; }

.ymtr-widget .ymtr--button .ymtr--button__link::after {
	align-items: center;
	background-color: var(--color-blue);
	border-radius: 100vw;
	color: var(--color-yellow);
	content: 'TAP';
	display: flex;
	font-family: 'Noto Sans JP', sans-serif !important;
	font-size: 75%;
	height: 54px;
	justify-content: center;
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	transition: var(--transition);
	width: 54px;
}

.ymtr-widget .ymtr--button,
.ymtr-widget .ymtr--main-image {
	position: relative !important;
	z-index: 11 !important;
}

.ymtr-widget .ymtr--button + .ymtr--main-image { margin-top: 19px !important; }

@media (max-width: 768px) {

	.ymtr-widget .ymtr--button .ymtr--button__link {
		font-size: 5.333vw !important;
		min-height: 0 !important;
		min-width: 78.667vw !important;
		padding: 4.333vw 10.667vw !important;
	}

	.ymtr-widget .ymtr--button .ymtr--button__link::after {
		height: 10.667vw !important;
		right: 1.2vw !important;
		width: 10.667vw !important;
	}

	.ymtr-widget .ymtr--button + .ymtr--main-image {
		/* margin-left: 2.613vw !important;
		margin-top: -6.333vw !important;
		max-width: 91.733vw !important; */
	}
}

/* --------------------------------------------------------------------------------------
	画像
--------------------------------------------------------------------------------------- */

.ymtr-widget .ymtr--main-image .ymtr--main-image__content img {
	height: auto !important;
	max-width: 100% !important;
	width: auto !important;
}

/* --------------------------------------------------------------------------------------
	ヘッダー
--------------------------------------------------------------------------------------- */

.ymtr-widget .ymtr--header {
	background: #fff url(../img/key-image.png) no-repeat center top !important;
	height: 1160px !important;
	padding: 15px 0 0 !important;
	z-index: 0 !important;
}

.ymtr-widget .ymtr--header::after {
	background: url(../img/key-under.png) no-repeat center bottom;
	background-size: 100% auto;
	bottom: -43.333vw;
	content: '';
	display: block;
	height: 43.333vw;
	position: absolute;
	width: 100%;
	z-index: -1;
}

@media (min-width: 1981px) {

	.ymtr-widget .ymtr--header {
		background-size: cover !important;
		height: 58.333vw !important;
	}
}

.ymtr-widget .ymtr--header .ymtr--inner { padding: 0 !important; }

.ymtr--page .ymtr--header__text {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 1000px !important;
	position: relative !important;
	text-align: left !important;
	width: 100% !important;
	z-index: 1 !important;
}

.ymtr--page .ymtr--header__text .ymtr--rich-text-row {
	background: url(../img/logo.png) no-repeat center top !important;
	background-size: 100% auto !important;
	font-family: 'Noto Sans JP', sans-serif !important;
	font-size: 0 !important;
	height: 50px !important;
	margin-left: 184px !important;
	width: 148px !important;
}

.ymtr--header + .ymtr--main-image { margin-top: -192px !important; }

.ymtr--header + .ymtr--button {
	margin-bottom: 219px !important;
	margin-top: -486px !important;
}

.ymtr--header + .ymtr--button .ymtr--button__wrapper { left: 22px; }

.ymtr--header + .ymtr--button .ymtr--button__link { min-width: 350px !important; }

@media (max-width: 768px) {

	.ymtr-widget .ymtr--header {
		background-color: transparent !important;
		background-image: url(../img/key-image-sp.png) !important;
		background-position: center top !important;
		background-size: 100% auto !important;
		height: 188.4vw !important;
	}

	/* .ymtr-widget .ymtr--header::before {
		background-color: #fff;
		content: '';
		display: block;
		height: 5.333vw;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
	} */

	.ymtr--page .ymtr--header__text .ymtr--rich-text-row {
		height: 9.467vw !important;
		margin-left: 4.533vw !important;
		width: 29.067vw !important;
	}

	.ymtr-widget .ymtr--inner { max-width: 100% !important; }

	.ymtr-widget .ymtr--header::after { display: none !important; }

	.ymtr--header + .ymtr--main-image {
		margin-bottom: 0 !important;
		margin-left: 5.067vw !important;
		margin-right: 8vw !important;
		margin-top: -116.333vw !important;
	}


	.ymtr--header + .ymtr--main-image + .ymtr--button {
		margin-bottom: 25.333vw !important;
		margin-top: -10.667vw !important;
	}

	.ymtr--header + .ymtr--main-image + .ymtr--button .ymtr--button__wrapper { left: 0 !important; }
	.ymtr--header + .ymtr--main-image + .ymtr--button .ymtr--button__link { min-width: 78.667vw !important; }
}

/* --------------------------------------------------------------------------------------
	リード
--------------------------------------------------------------------------------------- */

.ymtr-widget .ymtr--button + .ymtr--main-image + .ymtr--main-image { margin: 120px auto 0 !important; }

.ymtr--main-image + .ymtr--division .ymtr--division__inner,
.ymtr--main-image + .ymtr--division + .ymtr--division + .ymtr--division .ymtr--division__inner {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.ymtr--main-image + .ymtr--division .ymtr--division__inner .ymtr--rich-text-row,
.ymtr--main-image + .ymtr--division + .ymtr--division .ymtr--division__inner .ymtr--rich-text-row,
.ymtr--main-image + .ymtr--division + .ymtr--division + .ymtr--division .ymtr--division__inner .ymtr--rich-text-row,
.ymtr--main-image + .ymtr--division + .ymtr--division + .ymtr--division + .ymtr--division .ymtr--division__inner .ymtr--rich-text-row { font-size: 30px; }

.ymtr--main-image + .ymtr--division .ymtr--division__inner .ymtr--rich-text-row:nth-of-type(n+2),
.ymtr--main-image + .ymtr--division + .ymtr--division .ymtr--division__inner .ymtr--rich-text-row:nth-of-type(n+2),
.ymtr--main-image + .ymtr--division + .ymtr--division + .ymtr--division .ymtr--division__inner .ymtr--rich-text-row:nth-of-type(n+2),
.ymtr--main-image + .ymtr--division + .ymtr--division + .ymtr--division + .ymtr--division .ymtr--division__inner .ymtr--rich-text-row:nth-of-type(n+2) { margin-top: 20px !important; }

.ymtr--main-image + .ymtr--division + .ymtr--division + .ymtr--division .ymtr--division__inner .ymtr--division__element-row:nth-of-type(1) { order: 2; }
.ymtr--main-image + .ymtr--division + .ymtr--division + .ymtr--division .ymtr--division__inner .ymtr--division__element-row:nth-of-type(2) { order: 1; }


.ymtr--main-image + .ymtr--division + .ymtr--division + .ymtr--division + .ymtr--division .ymtr--division__inner {
	align-items: flex-start;
	display: flex;
	justify-content: space-between;
}

.ymtr--main-image + .ymtr--division + .ymtr--division + .ymtr--division + .ymtr--division + .ymtr--main-image + .ymtr--button {
	margin-bottom: 62px !important;
	margin-top: -40px !important;
}

@media (max-width: 768px) {

	.ymtr--header + .ymtr--main-image +  .ymtr--button + .ymtr--main-image {
		margin-left: auto !important;
		margin-right: auto !important;
		margin-top: -2.333vw !important;
		max-width: 68.267vw !important;
	}

	.ymtr--main-image + .ymtr--division .ymtr--division__inner,
	.ymtr--main-image + .ymtr--division + .ymtr--division + .ymtr--division .ymtr--division__inner {
		margin-left: 5.067vw !important;
		margin-right: 5.067vw !important;
	}

	.ymtr--main-image + .ymtr--division .ymtr--division__inner .ymtr--rich-text-row,
	.ymtr--main-image + .ymtr--division + .ymtr--division .ymtr--division__inner .ymtr--rich-text-row,
	.ymtr--main-image + .ymtr--division + .ymtr--division + .ymtr--division .ymtr--division__inner .ymtr--rich-text-row,
	.ymtr--main-image + .ymtr--division + .ymtr--division + .ymtr--division + .ymtr--division .ymtr--division__inner .ymtr--rich-text-row  {
		font-size: 4.267vw !important;
	}

	.ymtr--main-image + .ymtr--division .ymtr--division__inner .ymtr--rich-text-row,
	.ymtr--main-image + .ymtr--division + .ymtr--division + .ymtr--division .ymtr--division__inner .ymtr--rich-text-row { white-space: nowrap !important; }

	.ymtr--main-image + .ymtr--division .ymtr--division__element-row:nth-of-type(n+2) {
		margin-top: 0 !important;
		position: absolute !important;
		right: 4.267vw !important;
		width: 42.667vw !important;
	}

	.ymtr--main-image + .ymtr--division .ymtr--division__inner .ymtr--rich-text-row:nth-of-type(n+2),
	.ymtr--main-image + .ymtr--division + .ymtr--division .ymtr--division__inner .ymtr--rich-text-row:nth-of-type(n+2),
	.ymtr--main-image + .ymtr--division + .ymtr--division + .ymtr--division .ymtr--division__inner .ymtr--rich-text-row:nth-of-type(n+2),
	.ymtr--main-image + .ymtr--division + .ymtr--division + .ymtr--division + .ymtr--division .ymtr--division__inner .ymtr--rich-text-row:nth-of-type(n+2) { margin-top: 4.267vw !important; }

	.ymtr--main-image + .ymtr--division + .ymtr--division .ymtr--division__inner .ymtr--rich-text-row { margin-left: 4.267vw !important; }

	.ymtr--main-image + .ymtr--division + .ymtr--division + .ymtr--division { margin-top: -11.667vw !important; }

	.ymtr--main-image + .ymtr--division + .ymtr--division + .ymtr--division .ymtr--division__inner .ymtr--division__element-row:nth-of-type(1) { margin-left: 2.667vw !important; }

	.ymtr--main-image + .ymtr--division + .ymtr--division + .ymtr--division .ymtr--division__inner .ymtr--division__element-row:nth-of-type(2) {
		margin-left: -3.667vw !important;
		width: 39.2vw !important;
	}

	.ymtr--main-image + .ymtr--division + .ymtr--division + .ymtr--division + .ymtr--division {
		margin-bottom: 4.333vw !important;
		margin-left: 5.333vw !important;
		margin-top: -6.333vw !important;
	}

	.ymtr--main-image + .ymtr--division + .ymtr--division + .ymtr--division + .ymtr--division .ymtr--division__element-row:nth-of-type(2) {
		margin-top: 1.333vw !important;
		position: absolute !important;
		right: 5.867vw !important;
		width: 35.467vw !important;
	}

	.ymtr--main-image + .ymtr--division + .ymtr--division + .ymtr--division + .ymtr--division + .ymtr--main-image {
		margin-left: 5.067vw !important;
		margin-right: 8vw !important;
	}

	.ymtr--main-image + .ymtr--division + .ymtr--division + .ymtr--division + .ymtr--division + .ymtr--main-image + .ymtr--button {
		margin-bottom: 7.333vw !important;
		margin-top: -9.667vw !important;
	}
}


/* --------------------------------------------------------------------------------------
	フッター
--------------------------------------------------------------------------------------- */

footer::before {
	background: url(../img/wave_bottom.png) no-repeat center top;
	background-size: 100% auto;
	content: '';
	display: block;
	height: 53.333vw;
	position: absolute;
	top: -53.333vw;
	width: 100%;
	z-index: -1;
}

@media (max-width: 768px) {

	footer::before {
		background-image: url(../img/wave_bottom-sp.png);
		height: 119.2vw;
		top: -119.2vw;
	}
}


/* --------------------------------------------------------------------------------------
	ボタンのアニメーション
--------------------------------------------------------------------------------------- */

.ymtr--header + .ymtr--main-image + .ymtr--button,
.ymtr--main-image + .ymtr--division + .ymtr--division + .ymtr--division + .ymtr--division + .ymtr--main-image + .ymtr--button {
	animation: poyoyon 1.8s ease-in-out forwards infinite normal;
}

/* @keyframes poyoyon {

	0%  { transform: scale(1, 1) translate(0, 0); }
	15% { transform: scale(.98, .9) translate(0, 5px); }
	30% { transform: scale(1.02, 1) translate(0, 8px); }
	50% { transform: scale(.98, 1.05) translate(0, -8px); }
	70% { transform: scale(1, .9) translate(0, 5px); }
	100% { transform: scale(1, 1) translate(0, 0); }

	0%,
	100% { opacity: 1; }
} */

@keyframes poyoyon {

	25%  { transform: scale(1, 1) translate(0, 0); }
	40% { transform: scale(.98, .9) translate(0, 5px); }
	55% { transform: scale(1.02, 1) translate(0, 8px); }
	75% { transform: scale(.98, 1.05) translate(0, -8px); }
	95% { transform: scale(1, .9) translate(0, 5px); }
	100% { transform: scale(1, 1) translate(0, 0); }

	0%,
	100% { opacity: 1; }
}