@charset "utf-8";
/*---------------------------------------------
Reset
---------------------------------------------*/

html {
	color: #333;
	overflow-y: scroll;
	font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
	font-size: 62.5%;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
	margin: 0;
	padding: 0;
}

img {
	border: none;
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

div,
dl,
dt,
dd,
form,
input,
ul,
ol,
li,
p,
select,
textarea,
span,
th,
td {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

*,
*:before,
*:after {
	box-sizing: border-box;
}

/*---------------------------------------------
Style
---------------------------------------------*/
body {
	margin: 0 auto;
	padding: 0;
	font-size: 1.6rem;
	box-sizing: border-box;
}

.inner {
	max-width: 1200px;
	margin: 2rem auto;
	padding: 2rem 3rem;
}


.for_pc {
	display: block;
	margin: 0 auto;
}

.for_sp {
	display: none;
	margin: 0 auto;
}

.pink {
	color: #e52d8a;
}

.fwb {
	font-weight: bold;
}

.red {
	color: #e40012;
}

/* sp */
@media screen and (max-width: 767px) {

	body {
		font-size: 1.4rem;
	}

	.inner {
		max-width: 100%;
		margin: 1rem auto;
		padding: 1rem 1.4rem;
	}

	.for_pc {
		display: none;
		margin: 0 auto;
	}

	.for_sp {
		display: block;
		margin: 0 auto;
	}

}

/* =========================================================
ヘッダー
========================================================= */
header {
	background: #fff;
	padding-block: 1rem;
}

header .inner {
	position: relative;
}

header .inner .logo {
	position: absolute;
	top: 0;
	left: 0;
}

header .inner .logo img {
	max-height: 60px;
	margin: auto;
}

@media screen and (max-width: 767px) {
	header .inner .logo img {
		max-height: 30px;
	}
}

/* =========================================================
float
========================================================= */
.float_bnr {
	position: fixed;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);

	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;

	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease;

	z-index: 9999;
}

.float_bnr.show {
	opacity: 1;
	visibility: visible;
}

.float_bnr a {
	display: block;
}

.float_bnr img {
	display: block;
	width: auto;
	height: 160px;
	max-width: none;
	border-radius: 3rem;
	border: 5px solid #000;
}

.float_bnr a {
	position: relative;
	display: block;
}

.float_bnr a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 1rem;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 12px solid #000;
	transition: all 0.3s 0s ease;
}

.float_bnr a:hover::after {
	bottom: 0.6rem;
}

/* スマホ */
@media screen and (max-width: 767px) {

	.float_bnr {
		width: 80%;
		bottom: 10px;
		gap: 5px;
	}

	.float_bnr a {
		flex: 1;
	}

	.float_bnr img {
		width: 100%;
		height: auto;
		border-radius: 2rem;
		border: 3px solid #000;
	}

	.float_bnr a::after {
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 6px solid #000;
		bottom: 0.6rem;
	}

	.float_bnr a:hover::after {
		bottom: 0.2rem;
	}
}


/* =========================================================
main mv
========================================================= */

.mv {
	padding-block: 3rem 6rem;
	background: url(../img/bg01.png) center/ cover;
}

.mv .ttl_wrap {
	position: relative;
	z-index: 1;
}

.mv .ttl_wrap h1 {
	padding: 0 2rem 14rem 2rem;
}

.mv .ttl_wrap .api,
.mv .ttl_wrap .pia {
	position: absolute;
	bottom: 0;
	z-index: 2;
}

.mv .ttl_wrap .api {
	left: -7rem;
	animation: jump 6s ease-in-out infinite;
}

.mv .ttl_wrap .pia {
	right: -4rem;
	animation: jump 6s ease-in-out infinite 2s;
}

@keyframes jump {

	/* 1回目 */
	0%,
	10% {
		transform: translateY(0);
	}

	5% {
		transform: translateY(-40px);
	}

	/* 2回目 */
	20%,
	30% {
		transform: translateY(0);
	}

	25% {
		transform: translateY(-40px);
	}

	/* 待機 */
	40%,
	100% {
		transform: translateY(0);
	}
}

.mv .contents_wrap {
	text-align: center;
	background: #fff;
	border: 10px solid #30459a;
	border-radius: 5rem;
	padding: 14rem 14rem 12rem;
	margin-block: 14rem 6rem;
	position: relative;
}

.mv .contents_wrap .dokidoki {
	position: absolute;
	top: -14rem;
	left: 0;
	right: 0;
	margin-inline: auto;
}

.mv .contents_wrap ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 2rem;
}

.mv .contents_wrap ul.sub {
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 2rem;
	margin-top: 10rem;
}

.mv .contents_wrap li {
	position: relative;
}

.mv .contents_wrap li .point {
	position: absolute;
	background: #30459a;
	color: #fff;
	font-size: 2.4rem;
	font-weight: 900;
	line-height: 1;
	padding: 1.8rem;
	top: -4rem;
	left: -4rem;
	border-radius: 50%;
}

.mv .contents_wrap li .number {
	font-size: 2em;
	display: block;
}

.mv .contents_wrap .sub li .point {
	font-size: 1.6rem;
	padding: 1.4rem;
	top: -3rem;
	left: -2rem;
}


.mv .contents_wrap li img {
	border: 3px solid #30459a;
	border-bottom: 0;
}

.mv .contents_wrap li .soon img {
	border-bottom: 3px solid #30459a;
}

.mv .contents_wrap li a {
	display: inline-block;
	position: relative;
	transition: all 0.3s 0s ease;
}

.mv .contents_wrap li a.soon {
	background: #ccc;
	pointer-events: none;
	cursor: default;
}

.mv .contents_wrap li a::before {
	content: "";
	position: absolute;
	bottom: -5rem;
	left: 0;
	width: 100%;
	height: 5rem;
	background: #fff;
	border: 3px solid #30459a;
	border-top: 0;
}

.mv .contents_wrap li a::after {
	position: absolute;
	content: "\25BC";
	right: 0;
	left: 0;
	bottom: -4rem;
	margin-inline: auto;
	font-size: 2rem;
	color: #30459a;
	transition: all 0.3s 0s ease;
}

.mv .contents_wrap li a.soon::before,
.mv .contents_wrap li a.soon::after {
	display: none;
}

.mv .contents_wrap li a:hover {
	opacity: 0.8;
}

.mv .contents_wrap li a:hover::after {
	transform: translateY(2px);
}


@media screen and (max-width: 1200px) {

	.mv .ttl_wrap .api img,
	.mv .ttl_wrap .pia img {
		margin-block: auto;
	}

	.mv .contents_wrap {
		border-radius: 2rem;
		margin-block: 5rem 2rem;
	}

	.mv .contents_wrap .dokidoki img {
		max-width: 90%;
		margin-inline: auto;
	}

	.mv .contents_wrap ul {
		grid-column-gap: 2rem;
	}

	.mv .contents_wrap li img {
		border: 2px solid #30459a;
		border-bottom: 0;
	}

	.mv .contents_wrap li a::before {
		border: 2px solid #30459a;
		border-top: 0;
	}
}

@media screen and (min-width: 768px) and (max-width: 1200px) {

	.mv .ttl_wrap .api,
	.mv .ttl_wrap .pia {
		bottom: 4rem;
	}

	.mv .ttl_wrap .api {
		left: -3rem;
	}

	.mv .ttl_wrap .pia {
		right: -2rem;
	}

	.mv .ttl_wrap .api img,
	.mv .ttl_wrap .pia img {
		max-height: 160px;
	}

	.mv .contents_wrap {
		border: 3px solid #30459a;
		padding: 12rem 8rem 8rem;
	}

	.mv .contents_wrap .dokidoki {
		top: -12rem;
	}

	.mv .contents_wrap li .point {
		font-size: 1.2rem;
		line-height: 1;
		padding: 2rem;
		top: -3rem;
		left: -2rem;
	}

	.mv .contents_wrap .sub li .point {
		font-size: 1rem;
	}
}

@media screen and (max-width: 767px) {

	.mv {
		padding-block: 1.8rem 2rem;
		background: url(../img/bg01.png) center/cover;
	}

	.mv .ttl_wrap h1 {
		padding: 0 1rem 4rem;
	}

	.mv .ttl_wrap .api {
		left: -1rem;
	}

	.mv .ttl_wrap .pia {
		right: -1rem;
	}

	.mv .ttl_wrap .api img,
	.mv .ttl_wrap .pia img {
		max-height: 70px;
	}

	.mv .contents_wrap {
		border: 4px solid #30459a;
		padding: 8rem 2rem 2rem;
	}

	.mv .contents_wrap .dokidoki {
		top: -6rem;
	}

	.mv .contents_wrap ul.sub {
		margin-top: 6rem;
	}

	.mv .contents_wrap li a::before {
		bottom: -2rem;
		height: 2rem;
	}

	.mv .contents_wrap li a::after {
		bottom: -2rem;
		font-size: 1.2rem;
	}


	.mv .contents_wrap li .point {
		font-size: 0.8rem;
		line-height: 1;
		padding: 0.6rem;
		top: -1.4rem;
		left: -1rem;
	}

	.mv .contents_wrap .sub li .point {
		font-size: 0.7rem;
		padding: 0.6rem;
		top: -1.4rem;
		left: -1rem;
	}
}

@media screen and (max-width: 430px) {
	.mv .contents_wrap {
		padding: 6rem 2rem 6rem;
	}
}

/* =========================================================
main chusen_courseまで
========================================================= */

.chusen {
	background: linear-gradient(180deg,
			#00aeeb 0%,
			#55c6f1 100%);
	padding-block: 0 4rem;
}

.chusen .majicasub {
	background: #000;
	text-align: center;
	padding: 2rem 1rem;
}

.chusen .majicasub img {
	max-width: 1200px;
	margin: 2rem auto;
}

.chusen .ttl_wrap {
	background: url(../img/chusen_bg.png) center top / cover;
	text-align: center;
	padding-block: 2rem 4rem;
}

.chusen .chusen_way {
	text-align: center;
	position: relative;
}

.chusen .chusen_way::before {
	content: "";
	position: absolute;
	top: 10rem;
	left: -18rem;
	width: 300px;
	height: 300px;
	background: url(../img/fire01.png) no-repeat center / contain;
}

.chusen .chusen_way::after {
	content: "";
	position: absolute;
	bottom: 10rem;
	right: -18rem;
	width: 300px;
	height: 300px;
	background: url(../img/fire02.png) no-repeat center / contain;
	z-index: -1;
}

.chusen .chusen_way h3 {
	padding-bottom: 3rem;
}

.chusen .inner {
	position: relative;
	z-index: 1;
}

.chusen::before {
	content: "";
	position: fixed;
	inset: 0;
	background: linear-gradient(0deg,
			#fff 0%,
			#55c6f1 100%);
	z-index: -1;
}

.chusen .way_wrap {
	max-width: 1000px;
	border: 12px solid #000;
	background: #fff;
	padding: 4rem 3rem;
	margin: auto;
	border-radius: 5rem;
}

.chusen .way_wrap .txt {
	font-size: 2.8rem;
	line-height: 1.4;
	font-weight: 500;
	color: #000;
	margin-bottom: 3rem;
}

.chusen .way_wrap .note {
	font-size: 1.8rem;
	font-weight: 500;
	color: #000;
}

.chusen .tokuten_wrap h4 {
	position: relative;
	display: inline-block;
	margin-top: 8rem;
}

.chusen .tokuten_wrap h4 img {
	position: absolute;
	bottom: 0;
	left: -8rem;
	top: 0;
	margin-block: auto;
}

.chusen .tokuten_wrap h4 span {
	background: #e52d8a;
	color: #fff;
	font-size: 2.8rem;
	padding: 1rem 8.4rem;
	border-radius: 3rem;
}

.chusen .tokuten_wrap h4+div {
	background: #fcdbed;
	padding: 4rem 6rem 3rem;
	display: inline-block;
	border-radius: 3rem;
}

.chusen .tokuten_wrap h4+div .note {
	text-align: initial;
}

.chusen .btn_wrap {
	margin-block: 7rem;
}

.chusen .btn_wrap ul {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.chusen .btn_wrap li {
	width: 40%;
}

.chusen .btn_wrap a {
	display: block;
	font-size: 3rem;
	border: 10px solid #000;
	border-radius: 5rem;
	color: #fff;
	text-decoration: none;
	padding: 2rem 4rem;
	font-weight: bold;
	transition: all 0.3s 0s ease;
}

.chusen .btn_wrap li:first-child a {
	background: #d61518;
}

.chusen .btn_wrap li:last-child a {
	background: #2075e5;
}

.chusen .btn_wrap a:hover {
	transform: translateY(-1rem);
}

.chusen .chusen_course {
	padding-block: 6rem;
	text-align: center;
	position: relative;
}

.chusen .chusen_course>* {
	position: relative;
	z-index: 1;
}

.chusen .chusen_course::before,
.chusen .chusen_course::after {
	content: "";
	position: absolute;
	inset: 0 -20rem;
	z-index: 0;
	background-repeat: no-repeat;
	background-size: 300px 300px, 300px 300px, 300px 300px;
	pointer-events: none;
}

.chusen .chusen_course::before {
	background-image:
		url(../img/fire01.png),
		url(../img/fire02.png),
		url(../img/fire03.png);

	background-position:
		left 2rem top 20rem,
		right 2rem top 80rem,
		left 2rem top 150rem;
}

.chusen .chusen_course::after {
	background-image:
		url(../img/fire04.png),
		url(../img/fire03.png),
		url(../img/fire02.png);

	background-position:
		right 2rem bottom 150rem,
		left 2rem bottom 80rem,
		right 2rem bottom 10rem;
}

.chusen .chusen_course h3 {
	padding-bottom: 3rem;
}

.chusen .course_wrap {
	max-width: 1000px;
	border: 12px solid #000;
	background: #fff;
	margin: auto;
	border-radius: 5rem;
	margin-bottom: 8rem;
}

.chusen .course_wrap .ttl_wrap02 {
	background: #fff000;
	padding: 3rem 3rem 0;
	border-radius: 3rem 3rem 0 0;
}

.chusen .course_wrap.second .ttl_wrap02 {
	padding-bottom: 4rem;
}

.chusen .course_wrap .ttl_wrap02 .ttl {
	display: flex;
}

.chusen .course_wrap .naiyo_wrap {
	padding: 4rem 4rem 6rem;
}

.chusen .course_wrap .naiyo_wrap li:first-child {
	padding-bottom: 4rem;
	border-bottom: 10px solid #000;
}

.chusen .course_wrap.second .naiyo_wrap li {
	padding-block: 4rem;
	border-bottom: 10px solid #000;
}

.chusen .course_wrap.second .naiyo_wrap li:last-of-type {
	border: 0;
}

.chusen .course_wrap .naiyo_wrap li:last-child {
	padding-top: 4rem;
}

.chusen .course_wrap .naiyo_wrap li.chance {
	position: relative;
	padding-block: 16rem 4rem;
}

.chusen .course_wrap .naiyo_wrap li.chance .ttl {
	position: absolute;
	left: 0;
	right: 0;
	margin-inline: auto;
	top: 3rem;
	max-width: 80%;
}

.chusen .course_wrap .naiyo_wrap li.chance .bg {
	background: #ed6d0f;
	padding: 4rem 3rem 2rem;
}

.chusen .course_wrap .naiyo_wrap img {
	max-width: 80%;
	margin: auto;
}

/* popup */

.popup {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .7);
	opacity: 0;
	visibility: hidden;
	transition: .3s;
	z-index: 9999;
}

.popup.is-active {
	opacity: 1;
	visibility: visible;
}

.popup-inner {
	position: absolute;
	top: 34%;
	left: 0;
	right: 0;
	margin-inline: auto;
	width: 90%;
	max-width: 700px;
	max-height: 80vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 20px;
	padding: 40px 30px 30px;
}

.popup-close {
	position: absolute;
	top: 30px;
	right: 30px;
	width: 40px;
	height: 40px;
	border: 0;
	background: none;
	font-size: 4rem;
}

.popup-open {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70%;
	margin: 0 auto;
	padding: 2rem 5rem 2rem 2rem;
	background: #e52d8a;
	color: #fff;
	font-size: 2rem;
	border: none;
	border-radius: 3rem;
}

.popup-open::before,
.popup-open::after {
	content: "";
	position: absolute;
	top: 50%;
	background: #fff;
	transform: translateY(-50%);
}

.popup-open::before {
	right: 2rem;
	width: 2rem;
	height: 3px;
}

.popup-open::after {
	right: calc(2rem + 0.9rem);
	width: 2px;
	height: 2rem;
	transition: opacity .3s;
}

.popup-open.is-active::after {
	opacity: 0;
}

/* popup詳細 */

.popup button+p {
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 2rem;
}

.popup .shousai {
	padding-left: 2rem;
}

.popup li {
	border: none !important;
	padding: 0 !important;
	text-align: initial;
	list-style: disc;
}

/* ==================================================
   Tablet + SP 共通（～1200px）
================================================== */

@media screen and (max-width: 1200px) {

	.chusen .majicasub img {
		max-width: 90%;
	}

	.chusen .chusen_way::before,
	.chusen .chusen_way::after {
		display: none;
	}

	.chusen .way_wrap {
		max-width: 96%;
		border: 8px solid #000;
		border-radius: 3rem;
	}

	.chusen .tokuten_wrap h4+div {
		padding: 2rem 2rem 1rem;
		border-radius: 2rem;
		margin-top: -1.4rem;
	}

	.chusen .btn_wrap {
		margin-block: 4rem;
	}

	.chusen .btn_wrap li {
		width: 48%;
	}

	.chusen .chusen_course {
		padding-block: 3rem;
	}

	.chusen .chusen_course::before,
	.chusen .chusen_course::after {
		display: none;
	}

	.chusen .course_wrap {
		border: 8px solid #000;
		border-radius: 3rem;
		margin-bottom: 4rem;
	}

	.chusen .course_wrap .ttl_wrap02 {
		padding: 1.6rem 1.6rem 0;
		border-radius: 2rem 2rem 0 0;
	}

	.chusen .course_wrap.second .ttl_wrap02 {
		padding-bottom: 2rem;
	}

	.chusen .course_wrap .ttl_wrap02 .ttl {
		display: block;
		padding-bottom: 1rem;
	}

	.chusen .course_wrap .naiyo_wrap {
		padding: 2rem 2rem 3rem;
	}

	.chusen .course_wrap .naiyo_wrap li:first-child {
		padding-bottom: 2rem;
		border-bottom: 6px solid #000;
	}

	.chusen .course_wrap.second .naiyo_wrap li {
		padding-block: 2rem;
		border-bottom: 6px solid #000;
	}

	.chusen .course_wrap .naiyo_wrap li:last-child {
		padding-top: 2rem;
	}

	.chusen .course_wrap .naiyo_wrap img {
		max-width: 100%;
	}

	/* popup */

	.popup-inner {
		width: 90%;
		max-width: 90%;
		border-radius: 2rem;
		padding: 2rem 1rem;
	}

	.popup-close {
		top: 2rem;
		right: 1rem;
		width: 30px;
		height: 30px;
		font-size: 3rem;
	}

	.popup-open {
		width: 90%;
		padding: 1rem 5rem 1rem 1rem;
		border-radius: 2rem;
	}
}

/* ==================================================
   1000px～1200px
================================================== */

@media screen and (min-width: 1000px) and (max-width: 1200px) {

	.chusen .way_wrap {
		max-width: 80%;
	}
}

/* ==================================================
   Tablet（768px～1200px）
================================================== */

@media screen and (min-width: 768px) and (max-width: 1200px) {
	.chusen .chusen_way img {
		max-height: 88px;
	}

	.chusen .way_wrap {
		padding: 3rem 1rem;
	}

	.chusen .way_wrap .txt {
		font-size: 2.2rem;
		line-height: 1.6;
	}

	.chusen .way_wrap .note {
		font-size: 1.6rem;
	}

	.chusen .tokuten_wrap h4 {
		margin-top: 4rem;
	}

	.chusen .tokuten_wrap h4 img {
		bottom: 2rem;
		left: -7rem;
		max-width: 18%;
	}

	.chusen .tokuten_wrap h4 span {
		display: inline-block;
		font-size: 2rem;
		border-radius: 2rem;
	}

	.chusen .btn_wrap a {
		font-size: 2rem;
		border: 5px solid #000;
	}

	.chusen .course_wrap {
		max-width: 80%;
	}

	.chusen .course_wrap .ttl_wrap02 img:first-of-type {
		max-height: 150px;
	}

	.chusen .course_wrap .naiyo_wrap li.chance {
		padding-block: 14rem 2rem;
	}

	.chusen .course_wrap .naiyo_wrap li.chance .bg {
		padding: 6rem 1rem 1rem;
	}

	.popup-open {
		font-size: 1.8rem;
	}

	.popup button+p {
		font-size: 1.8rem;
	}
}

/* ==================================================
   SP（767px以下）
================================================== */

@media screen and (max-width: 767px) {

	.chusen .majicasub {
		padding: 1rem 0.6rem;
	}

	.chusen .majicasub img {
		margin: 1rem auto;
	}

	.chusen .ttl_wrap {
		padding: 1rem 2rem 2rem;
	}

	.chusen .chusen_way h3 {
		padding-bottom: 1.4rem;
	}

	.chusen .chusen_way img {
		max-height: 50px;
	}

	.chusen .way_wrap {
		padding: 2rem 1rem;
	}

	.chusen .way_wrap .txt {
		font-size: 1.6rem;
		margin-bottom: 2rem;
	}

	.chusen .way_wrap .note {
		font-size: 1.2rem;
	}

	.chusen .tokuten_wrap h4 {
		margin-top: 2rem;
	}

	.chusen .tokuten_wrap h4 img {
		left: -3rem;
		max-width: 24%;
	}

	.chusen .tokuten_wrap h4 span {
		display: inline-block;
		font-size: 1.4rem;
		padding: 1rem 3rem;
		border-radius: 2rem;
	}

	.chusen .btn_wrap a {
		font-size: 1.4rem;
		padding: 1rem;
		border: 3px solid #000;
		border-radius: 2rem;

	}

	.chusen .course_wrap {
		max-width: 96%;
	}

	.chusen .chusen_course h3 {
		padding-bottom: 1.4rem;
	}

	.chusen .course_wrap .ttl_wrap02 img:first-of-type {
		max-height: 100px;
	}

	.chusen .course_wrap .naiyo_wrap li.chance {
		padding-block: 9rem 2rem;
	}

	.chusen .course_wrap .naiyo_wrap li.chance .bg {
		padding: 2rem 1rem 1rem;
	}

	.popup-open {
		font-size: 1.4rem;
	}

	.popup button+p {
		font-size: 1.6rem;
	}
}


/* =========================================================
main 抽選条件から実施店舗まで
========================================================= */
.chusen .chusen_jyoken {
	text-align: center;
	position: relative;
	isolation: isolate;
}

.chusen .chusen_jyoken>* {
	position: relative;
	z-index: 1;
}

.chusen .chusen_jyoken::before {
	content: "";
	position: absolute;
	inset: 0 -20rem;
	z-index: 0;
	pointer-events: none;

	background-repeat: no-repeat;
	background-size: 300px 300px;

	background-image:
		url(../img/fire02.png),
		url(../img/fire04.png),
		url(../img/fire03.png),
		url(../img/fire01.png),
		url(../img/fire02.png),
		url(../img/fire04.png),
		url(../img/fire01.png),
		url(../img/fire02.png),
		url(../img/fire03.png),
		url(../img/fire04.png),
		url(../img/fire01.png);

	background-position:
		left 2rem top 0rem,
		right 2rem top 60rem,
		left 2rem top 120rem,
		right 2rem top 180rem,
		left 2rem top 240rem,
		right 2rem top 300rem,
		left 2rem top 360rem,
		right 2rem top 420rem,
		left 2rem top 480rem,
		right 2rem top 540rem,
		left 2rem top 600rem;
}

.chusen_jyoken .entry {
	max-width: 1000px;
	border: 12px solid #000;
	padding: 6rem 3rem 4rem;
	margin: 15rem auto 4rem;
	border-radius: 5rem;
	position: relative;
}

.chusen_jyoken .entry.majica {
	background: #fcebeb;
}

.chusen_jyoken .entry.receipt {
	background: #e8fbfc;
}

.chusen_jyoken h4 {
	position: absolute;
	left: 0;
	right: 0;
	top: -6rem;
	margin-inline: auto;
}

.chusen_jyoken .ttl {
	font-size: 3.2rem;
	color: #000;
	margin-bottom: 2rem;
}

.chusen_jyoken .ttl .fs-s {
	font-size: 0.7em;
}

.chusen_jyoken .ttl02 {
	font-size: 2rem;
	margin-block: 2rem;
}

.chusen_jyoken .api {
	position: absolute;
	right: -8rem;
	top: 3rem;
	animation: jump2 1s infinite;
}

.chusen_jyoken .api img {
	max-width: 150px;
}

.chusen_jyoken .pia {
	position: absolute;
	left: -8rem;
	top: 3rem;
	animation: jump2 1s infinite;
}

.chusen_jyoken .pia img {
	max-width: 140px;
}

@keyframes jump2 {

	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-20px);
	}

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

.chusen_jyoken .way {
	font-size: 3.2rem;
	background: #304599;
	color: #fff;
	display: inline-block;
	padding: 1rem 6.4rem;
	margin-top: 3rem;
	max-width: 760px;
}

.chusen_jyoken .wrap {
	max-width: 760px;
	margin: 6rem auto;
	border-radius: 3rem;
	background: #fff;
	position: relative;
}

.chusen_jyoken .wrap:after {
	position: absolute;
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	margin-inline: auto;
	bottom: -8rem;
	width: 0;
	height: 0;
	border-left: 34px solid transparent;
	border-right: 34px solid transparent;
}

.chusen_jyoken .majica .wrap:after {
	border-top: 48px solid #d60c19;
}

.chusen_jyoken .receipt .wrap:after {
	border-top: 48px solid #304599;
}

.chusen_jyoken .wrap.last::after {
	display: none;
}

.chusen_jyoken .wrap+.wrap {
	margin-top: 10rem;
}

.chusen_jyoken .majica .wrap {
	border: 8px solid #d60c19;
}

.chusen_jyoken .receipt .wrap {
	border: 8px solid #304599;
}

.chusen_jyoken .wrap .number {
	position: absolute;
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	top: -4rem;
	left: -4rem;
	color: #fff;
	font-size: 4rem;
	font-weight: bold;
	border-radius: 50%;
}

.chusen_jyoken .majica .wrap .number {
	background: #d51518;
}

.chusen_jyoken .receipt .wrap .number {
	background: #304599;
}


.chusen_jyoken .entryImg {
	background: #fff;
	padding: 4rem 2rem;
	border-radius: 3rem;
}

.chusen_jyoken .entryImg img {
	max-width: 46%;
	margin: auto;
}

.chusen_jyoken dt {
	color: #fff;
	font-size: 3.2rem;
	font-weight: bold;
	padding: 1rem;
}

.chusen_jyoken .majica dt {
	background: #d60c19;
}

.chusen_jyoken .receipt dt {
	background: #304599;
}

.chusen_jyoken dt+dd {
	background: #f6f7f7;
	padding: 3rem 2rem;
	color: #000;
	border-radius: 0 0 3rem 3rem;
	font-size: 2rem;
	font-weight: 500;
	text-align: initial;
}

.chusen_jyoken .way_ttl {
	padding: 4rem 2rem;
}

.chusen_jyoken .way_ttl h5 {
	display: inline-block;
	padding-bottom: 1rem;
	border-bottom: 4px solid #304599;
	font-size: 3rem;
}

.chusen_jyoken .way_ttl+div {
	background: #f6f7f7;
	padding: 2rem;
	text-align: initial;
	border-radius: 0 0 3rem 3rem;
}

.chusen_jyoken .way_ttl+div>p:first-of-type {
	font-size: 2.4rem;
}

.chusen_jyoken .way_ttl+div>ul {
	list-style: disc;
	padding-inline: 2rem;
	margin-block: 1rem;
}

.chusen_jyoken .receipt_wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 3rem 4rem;
	text-align: initial;
}

.chusen_jyoken .receipt_wrap:last-of-type {
	display: block;
	text-align: center;
}

.chusen_jyoken .setsumei .good,
.chusen_jyoken .setsumei .bad {
	font-size: 2.4rem;
	padding-left: 2.4rem;
	position: relative;
	display: inline-block;
	margin-bottom: 1rem;
}

.chusen_jyoken .setsumei .good::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #304599;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin-block: auto;
}

.chusen_jyoken .setsumei .bad::before,
.chusen_jyoken .setsumei .bad::after {
	content: "";
	width: 20px;
	height: 4px;
	background: #304599;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin-block: auto;
	transform-origin: center;
}

.chusen_jyoken .setsumei .bad::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.chusen_jyoken .setsumei .bad::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.chusen_jyoken .setsumei:nth-of-type(2n) div {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	grid-column-gap: 2rem;
}

.chusen_jyoken .setsumei ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.chusen_jyoken .setsumei li {
	font-weight: bold;
	font-size: 1.8rem;
}

.chusen_jyoken .more_txt {
	padding: 1rem 4rem;
	text-align: initial;
	font-size: 2rem;
	font-weight: 500;
}

.btn_wrap02 {
	margin: 3rem auto;
	width: 80%;
	text-align: center;
}

.btn_wrap02 .btn a {
	display: block;
	background: linear-gradient(90deg,
			#ffe587 0%,
			#fdd100 50%,
			#e4b600 100%);
	padding: 2rem;
	border: 3px solid #000;
	border-radius: 5rem;
	text-decoration: none;
	color: #000;
	font-weight: bold;
	font-size: 2.4rem;
	box-shadow: 0 6px 0 rgba(0, 0, 0, 0.6);
	margin-bottom: 1rem;
	transition: all 0.2s;
}

.btn_wrap02 .btn a.soon {
	background: #ccc;
	pointer-events: none;
	cursor: default;
}

.btn_wrap02 .btn a.sns {
	background: linear-gradient(90deg,
			#ED733D 0%,
			#EEB718 100%);
	color: #fff;
}

.btn_wrap02 .btn a:hover {
	transform: translateY(3px);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}

.btn_wrap02 p {
	font-weight: 500;
}

/* アコーディオン */
.toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.option {
	position: relative;
	margin-bottom: 1em;
}

.shop_ttl,
.option .ec_wrap {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
}

.shop_ttl {
	position: relative;
	cursor: pointer;
	font-size: 3.2rem;
	background: #304599;
	color: #fff;
	display: inline-block;
	padding: 1rem 8rem;
	margin-top: 3rem;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6);
	transition: transform 0.3s ease;
}

.shop_ttl::before,
.shop_ttl::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 2rem;
	width: 4px;
	height: 2.2rem;
	background: #fff;
	transform: translateY(-50%);
	transition: transform 0.3s ease;
}

.shop_ttl::after {
	transform: translateY(-50%) rotate(90deg);
}

.option .ec_wrap {
	max-height: 0;
	overflow: hidden;
	will-change: max-height;
	transition: max-height 0.5s ease;
}

.option .ec_wrap p {
	margin: 2rem 0 0;
	padding: 0.5em;
	line-height: 1.5;
}

.toggle:checked+.shop_ttl+.ec_wrap {
	max-height: 6000px;
}

.toggle:checked+.shop_ttl {
	transform: translateY(4px);
	box-shadow: 0px 0px 0 rgba(0, 0, 0, 0.6);
}

.toggle:checked+.shop_ttl::before {
	transform: translateY(-50%) rotate(90deg);
}

.chusen_note {
	text-align: center;
	position: relative;
	margin-top: 8rem;
}

.chusen_note::before {
	content: "";
	position: absolute;
	top: 10rem;
	left: -18rem;
	width: 300px;
	height: 300px;
	background: url(../img/fire03.png) no-repeat center / contain;
}

.chusen_note::after {
	content: "";
	position: absolute;
	bottom: 10rem;
	right: -18rem;
	width: 300px;
	height: 300px;
	background: url(../img/fire02.png) no-repeat center / contain;
	z-index: -1;
}

.chusen_note .wray_wrap {
	max-width: 900px;
	border: 12px solid #000;
	padding: 6rem 3rem 4rem;
	margin: 5rem auto;
	border-radius: 5rem;
	background: #fff;
	text-align: initial;
	font-weight: 500;
	font-size: 2rem;
}

.chusen_note .wray_wrap .note01 li {
	margin-bottom: 1.4rem;
}

.chusen_note .wray_wrap .note02 {
	margin-top: 3rem;
}


.chusen_shop {
	text-align: center;
	position: relative;
	margin-top: 8rem;
}

.chusen_shop::before {
	content: "";
	position: absolute;
	top: 10rem;
	left: -18rem;
	width: 300px;
	height: 300px;
	background: url(../img/fire04.png) no-repeat center / contain;
}

.chusen_shop .wray_wrap {
	max-width: 900px;
	border: 12px solid #000;
	padding: 6rem 3rem 4rem;
	margin: 5rem auto;
	border-radius: 5rem;
	background: #fff;
	text-align: initial;
	font-weight: 500;
	font-size: 2rem;
}

.chusen_shop .wray_wrap .ttl {
	font-size: 3.2rem;
	margin-bottom: 2rem;
}

.btn_wrap03 {
	margin: 3rem auto;
	width: 80%;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn_wrap03 .btn {
	width: 80%;
}

.btn_wrap03 .btn a {
	display: block;
	background: linear-gradient(90deg,
			#ed7e77 0%,
			#e6334c 50%,
			#e6334c 100%);
	padding: 2rem;
	border: 3px solid #000;
	border-radius: 5rem;
	text-decoration: none;
	color: #fff;
	font-weight: bold;
	font-size: 2.4rem;
	box-shadow: 0 6px 0 rgba(0, 0, 0, 0.6);
	margin-bottom: 1rem;
	transition: all 0.2s;
	margin-inline: 2rem;
}

.btn_wrap03 .btn a.soon {
	background: #ccc;
	pointer-events: none;
	cursor: default;
}

.btn_wrap03 .btn a:hover {
	transform: translateY(3px);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}

@media screen and (max-width: 1200px) {

	.chusen .chusen_jyoken::before,
	.chusen .chusen_jyoken::after {
		display: none;
	}

	.chusen_note::before,
	.chusen_note::after {
		display: none;
	}

	.chusen_shop::before,
	.chusen_shop::after {
		display: none;
	}
}

@media screen and (min-width: 1000px) and (max-width: 1200px) {

	.chusen_jyoken .wrap {
		max-width: 700px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1000px) {

	.chusen_jyoken .wrap {
		max-width: 540px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1200px) {

	.chusen_jyoken .api {
		right: -3rem;
	}

	.chusen_jyoken .api img {
		width: 100px;
	}

	.chusen_jyoken .pia {
		left: -3rem;
		top: 12rem;
	}

	.chusen_jyoken .pia img {
		width: 90px;
	}

	.chusen_jyoken .way {
		font-size: 2.6rem;
	}

	.chusen_jyoken dt {
		font-size: 2.4rem;
	}

	.chusen_jyoken .more_txt {
		padding: 1rem 2rem;
	}

	.chusen_jyoken .receipt_wrap .setsumei p+p img,
	.chusen_jyoken .receipt_wrap .setsumei ul img {
		max-height: 180px;
	}

	.shop_ttl {
		font-size: 2.4rem;
	}
}

@media screen and (max-width: 767px) {

	.chusen_jyoken .entry {
		max-width: 96%;
		margin: 4rem auto 8rem;
		padding: 3rem 1rem 2rem;
		border: 8px solid #000;
		border-radius: 3rem;
	}

	.chusen_jyoken .majica h4 {
		top: -2rem;
	}

	.chusen_jyoken .receipt h4 {
		top: -4rem;
	}


	.chusen_jyoken .ttl {
		margin-bottom: 1rem;
		font-size: 1.8rem;
	}

	.chusen_jyoken .ttl02 {
		margin-block: 1rem;
		font-size: 1.4rem;
	}

	.chusen_jyoken .api {
		right: -2rem;
	}

	.chusen_jyoken .api img {
		max-width: 60px;
	}

	.chusen_jyoken .pia {
		left: -2rem;
	}

	.chusen_jyoken .pia img {
		max-width: 50px;
	}

	.chusen_jyoken .way {
		margin-top: 2rem;
		padding: 1rem 2rem;
		font-size: 2rem;
	}

	.chusen_jyoken .wrap {
		max-width: 94%;
		margin: 2rem auto;
		border-radius: 2rem;
	}

	.chusen_jyoken .wrap:after {
		bottom: -4.4rem;
		border-left: 18px solid transparent;
		border-right: 18px solid transparent;
	}

	.chusen_jyoken .majica .wrap:after {
		border-top: 26px solid #d60c19;
	}

	.chusen_jyoken .receipt .wrap:after {
		border-top: 26px solid #304599;
	}

	.chusen_jyoken .wrap+.wrap {
		margin-top: 6rem;
	}

	.chusen_jyoken .majica .wrap {
		border: 4px solid #d60c19;
	}

	.chusen_jyoken .receipt .wrap {
		border: 4px solid #304599;
	}

	.chusen_jyoken .wrap .number {
		top: -2rem;
		left: -1rem;
		width: 40px;
		height: 40px;
		font-size: 1.8rem;
	}

	.chusen_jyoken .ec_wrap .number {
		top: -3rem;
	}

	.chusen_jyoken .entryImg {
		padding: 2rem 1rem;
		border-radius: 2rem;
	}

	.chusen_jyoken .entryImg img {
		max-width: 80%;
	}

	.chusen_jyoken dt {
		padding: 0.6rem;
		font-size: 2rem;
	}

	.chusen_jyoken dt+dd {
		padding: 2rem 1rem;
		font-size: 1.4rem;
		border-radius: 0 0 2rem 2rem;
	}

	.chusen_jyoken .way_ttl {
		padding: 2rem 1rem;
	}

	.chusen_jyoken .way_ttl h5 {
		padding-bottom: 0.6rem;
		font-size: 1.8rem;
		border-bottom: 2px solid #304599;
	}

	.chusen_jyoken .way_ttl+div {
		padding: 1rem;
		border-radius: 0 0 2rem 2rem;
	}

	.chusen_jyoken .way_ttl+div>p:first-of-type {
		font-size: 1.6rem;
	}

	.chusen_jyoken .way_ttl+div>ul {
		margin-block: 0.6rem;
		padding-inline: 2rem 1rem;
	}

	.chusen_jyoken .receipt_wrap {
		display: grid;
		grid-template-columns: 1fr;
		grid-row-gap: 2rem;
		padding: 1.4rem 1rem;
		text-align: center;
	}

	.chusen_jyoken .setsumei .good,
	.chusen_jyoken .setsumei .bad {
		margin-bottom: 0.6rem;
		padding-left: 1.4rem;
		font-size: 1.6rem;
	}

	.chusen_jyoken .setsumei .good::before {
		width: 10px;
		height: 10px;
	}

	.chusen_jyoken .setsumei .bad::before,
	.chusen_jyoken .setsumei .bad::after {
		width: 14px;
		height: 2px;
	}

	.chusen_jyoken .receipt_wrap .setsumei p+p img {
		max-height: 160px;
	}

	.chusen_jyoken .setsumei li {
		font-size: 1.2rem;
	}

	.chusen_jyoken .more_txt {
		padding: 1rem 0;
		font-size: 1.4rem;
	}

	.btn_wrap02 {
		width: 100%;
		margin: 1.4rem auto;
	}

	.btn_wrap02 .btn a {
		padding: 1.2rem;
		font-size: 1.6rem;
		border: 2px solid #000;
		border-radius: 3rem;
	}

	.shop_ttl {
		margin-top: 2rem;
		padding: 0.6rem 3rem;
		font-size: 1.8rem;
	}

	.shop_ttl::before,
	.shop_ttl::after {
		width: 2px;
		height: 2rem;
	}

	.option .ec_wrap {
		width: 100%;
		margin: auto;
	}

	.option .ec_wrap p {
		margin-top: 2rem;
		padding: 0.5em;
		line-height: 1.5;
	}

	.chusen_note {
		margin-top: 4rem;
	}

	.chusen_note h3 img {
		max-width: 70%;
		margin: auto;
	}

	.chusen_note .wray_wrap {
		max-width: 94%;
		margin: 2rem auto 6rem;
		padding: 3rem 1.4rem;
		font-size: 1.6rem;
		border: 8px solid #000;
		border-radius: 3rem;
	}

	.chusen_note .wray_wrap .note01 li {
		margin-bottom: 0.8rem;
	}

	.chusen_note .wray_wrap .note02 {
		margin-top: 3rem;
	}

	.chusen_shop {
		margin-top: 4rem;
		text-align: center;
	}

	.chusen_shop h3 img {
		max-width: 90%;
		margin: auto;
	}

	.chusen_shop .wray_wrap {
		max-width: 94%;
		margin: 3rem auto;
		padding: 3rem 1.4rem;
		font-size: 1.6rem;
		border: 8px solid #000;
		border-radius: 3rem;
	}

	.chusen_shop .wray_wrap .ttl {
		margin-bottom: 1rem;
		font-size: 1.8rem;
	}

	.btn_wrap03 {
		width: 100%;
		margin: 2rem auto;
	}

	.btn_wrap03 .apitan {
		width: 12%;
	}

	.btn_wrap03 .piatan {
		width: 10%;
	}

	.btn_wrap03 .btn a {
		margin-inline: 0.4rem;
		padding: 1rem;
		font-size: 1.4rem;
		border: 2px solid #000;
		border-radius: 3rem;
	}
}

/* =========================================================
main 56万～水着まで
========================================================= */

.hope {
	background: url(../img/hope_bg.png) top center / cover;
	padding-block: 4rem;
	text-align: center;
}

.hope p+p {
	margin-top: 2rem;
}

.btn_wrap04 {
	margin: 8rem auto 4rem;
	width: 70%;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn_wrap04 .btn {
	width: 100%;
}

.btn_wrap04 .btn a {
	display: block;
	background: #fff;
	padding: 2rem 4rem;
	border: 3px solid #000;
	border-radius: 5rem;
	text-decoration: none;
	color: #000;
	font-weight: bold;
	font-size: 2.4rem;
	box-shadow: 0 6px 0 rgba(0, 0, 0, 0.6);
	margin-bottom: 1rem;
	transition: all 0.2s;
	margin-inline: 2rem;
	position: relative;
}

.btn_wrap04 .btn a.sns {
	background: linear-gradient(90deg,
			#ED733D 0%,
			#EEB718 100%);
	padding: 2rem;
	color: #fff;
}

.btn_wrap04 .btn a::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	border-left: 20px solid #000;
	position: absolute;
	top: 0;
	bottom: 0;
	margin-block: auto;
	right: 5rem;
}

.btn_wrap04 .btn a.soon {
	background: #ccc;
	pointer-events: none;
	cursor: default;
}

.btn_wrap04 .btn a:hover {
	transform: translateY(3px);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}

.cosme {
	text-align: center;
	padding-block: 8rem 4rem;
	background: #f9d7d7;
}

.cosme .txt {
	font-size: 2.8rem;
	margin-block: 2rem;
}

.cosme .txt.span {
	font-size: 1.1em;
}

.cosme .day_wrap {
	text-align: left;
	width: 640px;
	margin: 4rem auto;
}

.cosme .day_wrap+.day_wrap {
	margin-top: 3rem;
}

.cosme .day_wrap p {
	font-weight: bold;
	margin-bottom: 1rem;
}

.cosme .day_wrap p:not(.day p) {
	font-size: 2.4rem;
}

.cosme .day_wrap .day {
	background: #ce004b;
	padding: 0.6rem 4rem;
	display: inline-block;
	color: #fff;
	letter-spacing: 0.1em;
	border-radius: 3rem;
}

.cosme .day_wrap .day p {
	font-size: 3.6rem;
}

.mizugi {
	padding-block: 8rem 4rem;
	text-align: center;
	background: linear-gradient(180deg,
			#008ad4 0%,
			#d8e7f7 100%);
}

.mizugi .txt {
	font-size: 2.8rem;
	margin-block: 2rem;
}

.ec_event {
	background: #ffffd8;
	padding-block: 6rem 4rem;
}

.ec_event ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: flex-end;
	text-align: center;
	row-gap: 4rem;
}

.ec_event li a {
	display: block;
	margin-top: 2rem;
}

.ec_event .event_ttl {
	max-width: 400px;
	margin: auto;
}

.ec_event li a img {
	display: block;
	max-width: 500px;
	margin: auto;
	transition: transform .3s ease;
	will-change: transform;
}

.ec_event li a:hover img {
	transform: scale(1.05);
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
	.btn_wrap03 {
		width: 90%;
	}

	.ec_event .event_ttl {
		max-width: 260px;
	}

	.ec_event ul a img {
		max-width: 300px;
	}
}

@media screen and (max-width: 767px) {
	.hope {
		padding-block: 2rem;
	}

	.hope p+p {
		margin-top: 1rem;
	}

	.btn_wrap04 {
		margin: 4rem auto 1rem;
		width: 90%;
	}

	.btn_wrap04 .btn a {
		padding: 1rem 2rem;
		border: 2px solid #000;
		border-radius: 3rem;
		font-size: 1.6rem;
		margin-inline: 0;
	}

	.btn_wrap04 .btn a::after {
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		border-left: 16px solid #000;
		right: 1rem;
	}

	.cosme {
		padding-block: 4rem 2rem;
	}

	.cosme .txt {
		font-size: 1.8rem;
		margin-block: 1rem;
	}

	.cosme .day_wrap {
		width: 280px;
		margin: 2rem auto;
	}

	.cosme .day_wrap+.day_wrap {
		margin-top: 2rem;
	}

	.cosme .day_wrap p:not(.day p) {
		font-size: 1.6rem;
	}

	.cosme .day_wrap .day {
		padding: 0.4rem 2rem;
		border-radius: 2rem;
	}

	.cosme .day_wrap .day p {
		font-size: 2rem;
	}

	.mizugi {
		padding-block: 4rem 2rem;
	}

	.mizugi .txt {
		font-size: 2rem;
		margin-block: 1rem;
	}

	.ec_event {
		padding-block: 4rem 2rem;
	}

	.ec_event ul {
		grid-template-columns: 1fr;
		grid-row-gap: 4rem;
	}

	.ec_event ul a {
		margin-top: 1rem;
	}

	.ec_event .event_ttl {
		max-width: 90%;
	}

	.ec_event ul a img {
		max-width: 100%;
	}
}

.chirashi {
	padding-block: 8rem;
	background-image: url("../img/chirashi_bg.png");
	background-repeat: repeat-y;
	background-size: 100% auto;
	background-position: top center;
	text-align: center;
}

.chirashi .inner {
	position: relative;
}

.chirashi .inner::before,
.chirashi .inner::after {
	content: "";
	position: absolute;
	inset: 0 -20rem;
	z-index: 0;
	background-repeat: no-repeat;
	pointer-events: none;
}

.chirashi .inner::before {
	background-size: 120px auto, 120px auto, 120px auto;
	background-image:
		url(../img/icon07.png),
		url(../img/icon03.png),
		url(../img/icon02.png),
		url(../img/icon09.png),
		url(../img/icon06.png);
	animation: floatY 2s ease-in-out infinite;
}

@keyframes floatY {
	0% {
		background-position:
			left 2rem top 2rem,
			right 2rem top 20rem,
			left 2rem top 84rem,
			right 2rem top 140rem,
			left 2rem top 170rem;
	}

	50% {
		background-position:
			left 2rem top 6rem,
			right 2rem top 16rem,
			left 2rem top 90rem,
			right 2rem top 134rem,
			left 2rem top 176rem;
	}

	100% {
		background-position:
			left 2rem top 2rem,
			right 2rem top 20rem,
			left 2rem top 84rem,
			right 2rem top 140rem,
			left 2rem top 170rem;
	}
}

.chirashi .inner::after {
	background-size:
		120px auto,
		120px auto,
		120px auto,
		120px auto;

	background-image:
		url(../img/icon07.png),
		url(../img/icon03.png),
		url(../img/icon05.png),
		url(../img/icon09.png);

	animation: floatY2 3s ease-in-out infinite;
}

.chirashi .inner::after {
	background-size:
		120px auto,
		120px auto,
		120px auto,
		120px auto;

	background-image:
		url(../img/icon07.png),
		url(../img/icon03.png),
		url(../img/icon05.png),
		url(../img/icon09.png);

	animation: floatY2 3s ease-in-out infinite;
}

@keyframes floatY2 {
	0% {
		background-position:
			left 2rem bottom 130rem,
			right 2rem bottom 100rem,
			left 2rem bottom 40rem,
			right 2rem bottom 10rem;
	}

	50% {
		background-position:
			left 2rem bottom 138rem,
			right 2rem bottom 92rem,
			left 2rem bottom 52rem,
			right 2rem bottom 2rem;
	}

	100% {
		background-position:
			left 2rem bottom 130rem,
			right 2rem bottom 100rem,
			left 2rem bottom 40rem,
			right 2rem bottom 10rem;
	}
}

.chirashi .ttl_wrap {
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.chirashi .ttl_wrap h2 {
	margin-inline: 0.4rem;
	margin-bottom: 1rem;
}

.chirashi .api {
	animation: jump3 6s ease-in-out infinite;
}

.chirashi .pia {
	animation: jump3 6s ease-in-out infinite 2s;
}

@keyframes jump3 {

	/* 1回目 */
	0%,
	10% {
		transform: translateY(0);
	}

	5% {
		transform: translateY(-40px);
	}


	/* 待機 */
	40%,
	100% {
		transform: translateY(0);
	}
}


.chirashi .txt {
	font-size: 2.6rem;
}

.chirashi .chirashi_wrap {
	max-width: 1000px;
	border: 12px solid #0d5999;
	padding: 3rem 2rem;
	margin: 8rem auto;
	background: #fff;
	border-radius: 5rem;
}

.chirashi .chirashi_ttl {
	position: relative;
	display: inline-block;
	overflow: hidden;
}

.chirashi h3 {
	display: inline-block;
	position: relative;
}

.chirashi h3::after {
	content: "";
	position: absolute;
	top: 0;
	left: -75%;
	width: 20%;
	height: 100%;
	background: linear-gradient(120deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.9) 50%,
			rgba(255, 255, 255, 0) 100%);
	transform: skewX(-20deg);
	opacity: 0;
	animation: shineFlash 6s ease infinite;
	animation-delay: 4s;
}

@keyframes shineFlash {
	0% {
		left: -75%;
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	20% {
		left: 125%;
		opacity: 0;
	}

	100% {
		left: 125%;
		opacity: 0;
	}
}


.chirashi .gentei_wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 2rem;
	border: 2px solid #000;
	border-radius: 3rem;
	width: 800px;
	margin: 3rem auto;
}

.chirashi .gentei_wrap img {
	max-width: 140px;
	margin-inline: 0.4rem;
}

.chirashi .gentei_wrap span {
	display: block;
	font-size: 3.2rem;
	font-weight: bold;
	margin-left: 1rem;
	color: #000;
}

.chirashi .cloth_wrap {
	width: 900px;
	margin: 7rem auto;
	border: 3px solid #000;
	border-radius: 3rem;
	background: #d7f1f9;
	overflow: hidden;
}

.chirashi .cloth_wrap .contents {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.chirashi .cloth_wrap .contents .name {
	background: #0d5999;
	color: #fff;
	font-size: 2.4rem;
	font-weight: bold;
	padding: 1rem 2rem;
	text-align: initial;
}

.chirashi .cloth_wrap .contents .name span {
	display: block;
	font-weight: 500;
}

.chirashi .cloth_wrap .contents .price {
	background: #fff;
}

.chirashi .cloth_wrap .contents .price img {
	max-height: 220px;
}

/* アコーディオン */


.chirashi .option {
	margin-bottom: 0;
	box-sizing: border-box;
}

.chirashi .chirashi_shop,
.chirashi .content {
	overflow: hidden;
}

.chirashi .chirashi_shop {
	position: relative;
	cursor: pointer;
	font-size: 1.8rem;
	background: #000;
	color: #fff;
	display: block;
	padding: 1rem 8rem;
	transition: transform 0.3s ease;
}

.chirashi .chirashi_shop::before,
.chirashi .chirashi_shop::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 2rem;
	width: 2px;
	height: 1.8rem;
	background: #fff;
	transform: translateY(-50%);
	transition: transform 0.3s ease;
}

.chirashi .chirashi_shop::after {
	transform: translateY(-50%) rotate(90deg);
}

.chirashi .toggle {
	display: none;
}

.chirashi .content {
	max-height: 0;
	transition:
		max-height 0.5s ease;
	text-align: initial;
}

.chirashi .content p {
	padding: 1rem 2rem;

}

.chirashi .toggle:checked+.chirashi_shop+.content {
	max-height: 800px;
}

.chirashi .toggle:checked+.chirashi_shop {
	border-radius: 0;
}

.chirashi .toggle:checked+.chirashi_shop::before {
	transform: translateY(-50%) rotate(90deg);
}

@media screen and (max-width: 1200px) {
	.chirashi {
		padding-block: 6rem;
	}

	.chirashi .inner::before,
	.chirashi .inner::after {
		display: none;
	}

	.chirashi .txt {
		font-size: 2.4rem;
	}

	.chirashi .chirashi_wrap {
		max-width: 96%;
		border: 8px solid #0d5999;
		padding: 1.6rem 1rem;
		margin: 4rem auto;
		border-radius: 3rem;
	}

	.chirashi .gentei_wrap {
		width: 90%;
		margin: 2rem auto 0;
	}

	.chirashi .gentei_wrap img {
		max-height: 30px;
		margin-top: 1rem;
	}

	.chirashi .gentei_wrap span {
		font-size: 2.4rem;
		margin-left: 1rem;
	}

	.chirashi .cloth_wrap {
		width: 90%;
		margin: 4rem auto;
		border: 2px solid #000;
		border-radius: 2rem;
	}

	.chirashi .cloth_wrap .contents {
		grid-template-columns: 1fr;
	}

	.chirashi .cloth_wrap .contents .name {
		font-size: 2rem;
	}

	.chirashi .cloth_wrap .contents .price img {
		max-height: 180px;
	}
}


/* SP */
@media screen and (max-width: 767px) {
	.chirashi {
		padding-block: 4rem;
	}

	.chirashi .ttl_wrap h2 {
		margin-inline: 0.2rem;
		margin-bottom: 0.6rem;
	}

	.chirashi .txt {
		font-size: 1.8rem;
	}

	.chirashi .gentei_wrap {
		display: block;
		padding: 0.4rem 1rem;
		border: 1px solid #000;
		border-radius: 2rem;
	}

	.chirashi .gentei_wrap span {
		font-size: 2rem;
	}

	.chirashi .cloth_wrap {
		border-width: 1px;
		border-radius: 1rem;
	}

	.chirashi .cloth_wrap .contents .name {
		font-size: 1.6rem;
	}

	/* アコーディオン */
	.chirashi .chirashi_shop {
		font-size: 1.4rem;
		padding: 1rem 4rem;
	}

	.chirashi .content p {
		font-size: 1.2rem;
		padding: 1rem;
		line-height: 1.4;
	}
}


/* =========================================================
main bnr
========================================================= */

.bnr {
	padding-block: 3rem 6rem;
	background: url(../img/bg03.png) center/ contain;
}

.bnr .inner {
	text-align: center;
}

.bnr .ttl_wrap {
	position: relative;
	padding-block: 4rem;
}

.bnr .ttl_wrap .api,
.bnr .ttl_wrap .pia {
	position: absolute;
	top: 0;
}

.bnr .ttl_wrap .api {
	left: 0;
}

.bnr .ttl_wrap .pia {
	right: 0;
}

.bnr h2 {
	font-size: 4rem;
	font-weight: 900;
	position: relative;
	display: inline-block;
	padding: 1rem 4rem 1rem 10rem;
	margin-left: 4rem;
}

.bnr h2 .sub {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #f78700;
	color: #fff;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	font-size: 0.6em;
	position: absolute;
	left: 1rem;
	top: 0;
	bottom: 0;
	margin-block: auto;
	animation: push1 1.4s infinite ease-in-out;
}

@keyframes push1 {
	0% {
		transform: scale(1);
	}

	20% {
		transform: scale(1.1);
	}

	40% {
		transform: scale(1);
	}

	60% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}


.bnr h2 .ttl {
	background: #fff;
	color: #f78700;
	padding: 1rem 4rem;
	line-height: 1.2;
}

.bnr h2 .ttl .and {
	font-size: 0.8em;
}

.bnr ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-block: 4rem;
	grid-column-gap: 5rem;
}

@media screen and (max-width: 1200px) {

	.bnr .ttl_wrap {
		padding-block: 1.2rem;
		text-align: center;
	}

	.bnr .ttl_wrap .api,
	.bnr .ttl_wrap .pia {
		top: initial;
		z-index: 1;
	}

	.bnr .ttl_wrap .api {
		text-align: left;
	}

	.bnr .ttl_wrap .pia {
		right: 0;
		text-align: right;
	}

	.bnr h2 {
		display: block;
		margin-left: 2rem;
		line-height: 1.4;
	}

	.bnr h2 .ttl {
		display: block;
		padding: 0.2rem 2rem;
		line-height: 1.6;
	}

	.bnr ul {
		margin-block: 2rem;
		grid-column-gap: 1rem;
	}
}


@media screen and (min-width: 768px) and (max-width: 1200px) {

	.bnr {
		padding-block: 1.2rem 3rem;
	}

	.bnr .ttl_wrap .api,
	.bnr .ttl_wrap .pia {
		bottom: -1rem;
	}

	.bnr .ttl_wrap .api {
		left: -1rem;
	}

	.bnr .ttl_wrap .api img,
	.bnr .ttl_wrap .pia img {
		width: 60%;
	}

	.bnr h2 {
		font-size: 2.6rem;
		padding: 1rem 2rem 1rem 4rem;
	}

	.bnr h2 .sub {
		width: 80px;
		height: 80px;
		left: 4rem;
	}
}


@media screen and (max-width: 767px) {

	.bnr {
		padding-block: 1rem 4rem;
	}

	.bnr .ttl_wrap .api,
	.bnr .ttl_wrap .pia {
		bottom: 0;
	}

	.bnr .ttl_wrap .api {
		left: 0;
	}

	.bnr .ttl_wrap .api img,
	.bnr .ttl_wrap .pia img {
		width: 40%;
	}

	.bnr h2 {
		font-size: 1.8rem;
		padding: 1rem 2rem 1rem 5rem;
	}

	.bnr h2 .sub {
		width: 60px;
		height: 60px;
		left: 2rem;
	}
}


/* =========================================================
ページトップ リンク
========================================================= */

/*リンクの形状*/
#page-top a {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #30459a;
	border-radius: 5px;
	width: 60px;
	height: 60px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 1.6rem;
	transition: all 0.3s;
	border-radius: 50%;
}

#page-top a:hover {
	animation: ptMove 1.2s linear;
}

@keyframes ptMove {
	0% {
		transform: translate(0);
	}

	25% {
		transform: translate(0, -2rem);
	}

	50% {
		transform: translate(0, 0);
	}

	75% {
		transform: translate(0, -3rem);
	}

	100% {
		transform: translate(0);
	}
}


/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	/*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove {
	animation: UpAnime 0.5s forwards;
	bottom: 10px;
}

@keyframes UpAnime {
	from {
		opacity: 0;
		transform: translateY(100px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*　下に下がる動き　*/

#page-top.DownMove {
	animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
	from {
		opacity: 1;
		transform: translateY(0);
	}

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

@media screen and (max-width: 960px) {

	#page-top {
		bottom: 100px;
	}

	#page-top.UpMove {
		bottom: 100px;
	}
}

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

footer {
	width: 100%;
	padding: 2rem 0;
	background: #fff;
	text-align: center;
}

footer a {
	color: #333;
	font-weight: bold;
	text-decoration: none;
}

footer address {
	color: #fff;
}

/* sp */
@media screen and (max-width: 520px) {
	footer {
		padding: 10px 0;
	}

	footer a {
		font-size: 0.5em;
	}

	#page-top a {
		margin: 0 -10px 0 0;
	}
}