@charset "UTF-8";

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

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

a {
	text-decoration: none;
	transition: all .2s ease-out;
	text-decoration: none;
	display: inline-block;
}

a:hover {
	text-decoration: none;
	transform: scale(0.85);
}

header a:hover,
footer a:hover {
	text-decoration: underline;
	transform: scale(1);
}

.s a:hover {
	text-decoration: none;
	transform: scale(1);
}


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

._pc {
	display: block !important;
}

.s ._pc {
	display: none !important;
}

._sp {
	display: none !important;
}

.s ._sp {
	display: block !important;
}

.Shokkan {
	position: relative;
}

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

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

.FadeIn {
	opacity: 0;
}

.FadeIn.Center {
	opacity: 0;
	transform: scale(0.9);
}

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

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

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

.FadeIn.SlideLeft {
	transform: translate(-10px, 0);
}

/* 画面内に入った状態 */
.FadeIn.ScrollIn {
	opacity: 1;
	transform: translate(0, 0) scale(1);
	transition: opacity 600ms, transform 600ms;
}

.FadeInOrder {
	opacity: 0;
}

.FadeInOrder.Center {
	opacity: 0;
	transform: scale(0.9);
}

.FadeInOrder.UpDown {
	opacity: 0;
	transform: translate(0, -50px);
}

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

.FadeInOrder.SlideRight {
	transform: translate(50px, 0);
}

.FadeInOrder.SlideLeft {
	transform: translate(-10px, 0);
}

.FadeInOrder.ScrollIn {
	opacity: 1;
	transform: translate(0, 0) scale(1);
	transition: opacity 600ms, transform 600ms;
}

/* ================================
			ZoomIn
================================ */
@keyframes ZoomIn {
	0% {
		transform: scale(0);
		opacity: 0;
	}

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

.PopIn {
	opacity: 0;
	transform: scale(0);
}

.ZoomIn {
	animation: ZoomIn 0.6s ease-out forwards;
}


/* 各要素に遅延を設定 */
.ZoomIn:nth-of-type(1) {
	animation-delay: 0ms;
}

.ZoomIn:nth-of-type(2) {
	animation-delay: 300ms;
}


/* ================================
        Header
================================ */
.attention_box {
	font-family: YuGothic, "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-weight: 200;
	font-size: 1.2rem;
	line-height: 1.5;
	width: 100%;
	max-width: 1150px;
	margin: 0 auto;
	color: rgba(0, 0, 0, 1);
	background-color: rgba(255, 255, 255, 1);
	padding: 1vw;
}

.attention_box a {
	color: rgba(0, 0, 0, 1);
	text-decoration: underline;
}

@media screen and (max-width:1000px) {
	.attention_box {
		padding: 20px 2vw;
	}

	.attention_box p {
		width: fit-content;
		margin: 0 auto;
	}
}

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

/* ================================
        ShokkanMv
================================ */
.ShokkanMvBg {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: 2880 /1582;
	background: url(../img/shokkan-mv-bg.png) no-repeat;
	background-size: 100%;
	background-position: top center;
	z-index: 2;
}

.s .ShokkanMvBg {
	background-image: url(../img/shokkan-mv-bg-sp.png);
	aspect-ratio: 750 /1109;
}

.ShokkanMvInner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: 1.736vw;
}

.s .ShokkanMvInner {
	position: relative;
	height: 100%;
}

.ShokkanMvContent {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.ShokkanMvContent h1 {
	line-height: 1;
	width: 30.9vw;
	transform: translateX(5vw);
}

.s .ShokkanMvContent h1 {
	width: 76.26vw;
	transform: translateX(8vw);
}

.ShokkanMvPkg {
	width: 9.79vw;
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(-1.18vw, 1.18vw);
}


.s .ShokkanMvPkg {
	width: 18.93vw;
	position: absolute;
	left: 0;
	transform: translate(1.2vw, 1.2vw);
}

/* ================================
        ShokkanMovie
================================ */
.ShokkanMovieBg {
	position: relative;
	margin-top: -1vw;
	width: 100%;
	height: 100%;
	aspect-ratio: 2880 /1406;
	background: url(../img/shokkan-movie-bg.png) no-repeat;
	background-size: 100%;
	background-position: top center;
	z-index: 1;
}

.s .ShokkanMovieBg {
	margin-top: -2vw;
	background-image: url(../img/shokkan-movie-bg-sp.png);
	aspect-ratio: 750 /912;
}

.ShokkanMovieBg::before {
	content: "";
	position: absolute;
	top: -2vw;
	width: 100%;
	height: 2.08vw;
	pointer-events: none;
	box-shadow: 0 8px 22px rgba(79, 74, 62, 0.3);
}


.ShokkanMovieChips {
	width: 100%;
	aspect-ratio: 2774 /916;
	background: url(../img/shokkan-movie-chips.png) no-repeat;
	background-size: 100%;
	background-position: top center;
	z-index: 0;
}

.s .ShokkanMovieChips {
	aspect-ratio: 750 /538;
	background: url(../img/shokkan-movie-chips-sp.png) no-repeat;
	background-size: 100%;
	background-position: top center;
	z-index: 0;
}

.ShokkanMovieInner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.s .ShokkanMovieInner {
	height: 100%;
}

.ShokkanMovieContent {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-direction: column;
	margin-left: auto;
	margin-right: auto;
}

.ShokkanMovieContent h2 {
	line-height: 1;
	max-width: 283.5px;
	width: 19.68vw;
	padding-top: clamp(48.1px, 6.25vw, 90px);
	padding-bottom: clamp(13.35px, 1.736vw, 25px);
}

.s .ShokkanMovieContent h2 {
	max-width: unset;
	width: 44vw;
	padding-top: 17.33vw;
	padding-bottom: 4vw;
}

.ShokkanMovieContainer {
	position: relative;
	width: 38.88vw;
	/* max-width: 560px; */
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
}

.s .ShokkanMovieContainer {
	width: 90.66vw;
}

.ShokkanMovieContainer iframe {
	width: 100%;
	height: 101%;
	border: 0;
	border-radius: 8px;
	display: block;
}


/* ================================
        ShokkanPoint
================================ */
.ShokkanPointBg {
	position: relative;
	margin-top: -10vw;
	background-size: auto auto;
	background-color: rgba(255, 182, 97, 1);
	background-image: repeating-linear-gradient(90deg, transparent, transparent 35px, rgba(255, 172, 75, 1) 35px, rgba(255, 172, 75, 1) 70px);
	z-index: 0;
	padding: clamp(72.6px, 9.44vw, 200px) 20px 150px 20px;

}

.s .ShokkanPointBg {
	background-image: repeating-linear-gradient(90deg, transparent, transparent 18px, rgba(255, 172, 75, 1) 18px, rgba(255, 172, 75, 1) 36px);
	padding: 24vw 0 28.26vw;
}


.ShokkanPointPaper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/shokkan-point-bg.png) no-repeat;
	background-size: 100%;
	background-position: bottom center;
	z-index: 0;
}

.s .ShokkanPointPaper {
	background: url(../img/shokkan-point-bg-sp.png) no-repeat;
	background-size: cover;
	background-position: top -8vw center;
}

.ShokkanPoint h2 {
	line-height: 1;
	max-width: 624px;
	width: 43.33vw;
	margin: 0 auto;
	padding-bottom: clamp(59px, 7.64vw, 110px);
}

.s .ShokkanPoint h2 {
	max-width: unset;
	width: 90.8vw;
	padding-bottom: 10vw;
}

.ShokkanPointItem {
	max-width: 1080px;
	margin: 0 auto;
}

.s .ShokkanPointItem {
	max-width: 100%;
	display: block;
}

.ShokkanPointItem li {
	list-style: none;
	width: 100%;
	display: flex !important;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	position: relative;
}

.s .ShokkanPointItem li {
	/* max-width: unset;
	width: 90.66vw; */
	flex-direction: column;
}




.ShokkanPointItemPkgArea {
	position: relative;
	/* margin: 0 auto; */
}

.ShokkanPointFirst .ShokkanPointItemPkgArea {
	max-width: 322px;
	width: 22.36vw;
	transform: translateY(-2%);
}

.s .ShokkanPointFirst .ShokkanPointItemPkgArea {
	max-width: unset;
	width: 63.73vw;
	transform: translateY(0);
}

.ShokkanPointSecond .ShokkanPointItemPkgArea {
	max-width: 328px;
	width: 22.77vw;
}

.s .ShokkanPointSecond .ShokkanPointItemPkgArea {
	max-width: unset;
	width: 63.73vw;
}

.ShokkanPointThird .ShokkanPointItemPkgArea {
	max-width: 345px;
	width: 23.95vw;
	transform: translateY(0.5%);
}

.s .ShokkanPointThird .ShokkanPointItemPkgArea {
	max-width: unset;
	width: 63.73vw;
}

.ShokkanPointItemPkg {
	position: relative;
	z-index: 2;
}

.ShokkanPointItemNote {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 5;
}

.ShokkanPointFirst .ShokkanPointItemNote {
	max-width: 115px;
	width: 7.98vw;
	transform: translate(-82%, -51.5%);
}

.s .ShokkanPointFirst .ShokkanPointItemNote {
	max-width: unset;
	width: 22.93vw;
	transform: translate(-67%, -29.5%);
}

.ShokkanPointSecond .ShokkanPointItemNote {
	max-width: 132.5px;
	width: 9.20vw;
	transform: translate(-76%, -41.5%);
}

.s .ShokkanPointSecond .ShokkanPointItemNote {
	max-width: unset;
	width: 24.13vw;
	transform: translate(-58%, -40.5%);
}

.ShokkanPointThird .ShokkanPointItemNote {
	max-width: 118px;
	width: 8.19vw;
	transform: translate(-72%, -41.5%);
}

.s .ShokkanPointThird .ShokkanPointItemNote {
	max-width: unset;
	width: 22.13vw;
	transform: translate(-41%, -25.5%);
}

.ShokkanPointItemWrapper {
	max-width: 542px;
	width: 37.63vw;
}

.s .ShokkanPointItemWrapper {
	max-width: unset;
	width: 100%;
	padding-top: 2vw;
	padding-left: 4.66vw;
	padding-right: 4.66vw;

}

.ShokkanPointItemBox {
	width: 100%;
	aspect-ratio: 1084 / 1046;
	background: url(../img/shokkan-point-boxbottom.png) no-repeat;
	background-size: 100%;
	background-position: top center;
	/* margin-top: clamp(36px, 4.72vw, 68px); */
}


.s .ShokkanPointItemBox {
	width: 100%;
	aspect-ratio: 680 / 829;
	background: url(../img/shokkan-point-boxbottom-sp.png) no-repeat;
	background-size: 100%;
	background-position: top center;
	margin-top: 6.66vw;
}

.ShokkanPointItemInner {
	transform: translateY(-4.4vw);
}



.ShokkanPointItemTitle {
	position: relative;
	max-width: 374px;
	width: 25.97vw;
	margin: 0 auto;
}

.s .ShokkanPointItemTitle {
	max-width: unset;
	width: 83.46vw;
}

.ShokkanPointItemTitle::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
}

.ShokkanPointFirst .ShokkanPointItemTitle::after {
	background: url(../img/shokkan-point-chips1.png) no-repeat;
	background-size: 100%;
	aspect-ratio: 282 / 230;
	max-width: 141px;
	width: 9.79vw;
	background-position: bottom right;
	transform: translate(48%, 67.5%);
}

.s .ShokkanPointFirst .ShokkanPointItemTitle::after {
	background: url(../img/shokkan-point-chips1-sp.png) no-repeat;
	background-size: 100%;
	aspect-ratio: 232 / 197;
	max-width: unset;
	width: 30.93vw;
	transform: translate(35%, 78.5%);
	z-index: 3;
}

.ShokkanPointSecond .ShokkanPointItemTitle::after {
	background: url(../img/shokkan-point-chips2.png) no-repeat;
	background-size: 100%;
	aspect-ratio: 258 / 227;
	max-width: 129px;
	width: 8.958vw;
	background-position: bottom right;
	transform: translate(38%, 67.5%);
}

.s .ShokkanPointSecond .ShokkanPointItemTitle::after {
	background: url(../img/shokkan-point-chips2-sp.png) no-repeat;
	background-size: 100%;
	aspect-ratio: 229 / 206;
	max-width: unset;
	width: 30.53vw;
	transform: translate(28%, 78.5%);
}


.ShokkanPointThird .ShokkanPointItemTitle::after {
	background: url(../img/shokkan-point-chips3.png) no-repeat;
	background-size: 100%;
	aspect-ratio: 255 / 225;
	max-width: 127px;
	width: 8.819vw;
	background-position: bottom right;
	transform: translate(34%, 67.5%);
}

.s .ShokkanPointThird .ShokkanPointItemTitle::after {
	background: url(../img/shokkan-point-chips3-sp.png) no-repeat;
	background-size: 100%;
	aspect-ratio: 217 / 209;
	max-width: unset;
	width: 28.93vw;
	transform: translate(28%, 78.5%);
}


.ShokkanPointItemText {
	margin-left: 0;
	margin-right: auto;
	padding-bottom: clamp(11px, 1.39vw, 20px);
	padding-top: clamp(8px, 0.265px + 1.03vw, 15px);
	transform: translateX(11%);
}

.s .ShokkanPointItemText {
	padding: 0.66vw 0 3.73vw;
	transform: translateX(5.2vw);
}

.ShokkanPointFirst .ShokkanPointItemText {
	max-width: 391px;
	width: 27.15vw;
}

.s .ShokkanPointFirst .ShokkanPointItemText {
	max-width: unset;
	width: 60.8vw;
}

.ShokkanPointSecond .ShokkanPointItemText {
	max-width: 431px;
	width: 29.9vw;
}

.s .ShokkanPointSecond .ShokkanPointItemText {
	max-width: unset;
	width: 60.93vw;
}


.ShokkanPointThird .ShokkanPointItemText {
	max-width: 467px;
	width: 32.43vw;
}

.s .ShokkanPointThird .ShokkanPointItemText {
	max-width: unset;
	width: 62.53vw;
}

.ShokkanPointItemGraph {
	margin: 0 auto;
}

.ShokkanPointFirst .ShokkanPointItemGraph {
	max-width: 382px;
	width: 26.52vw;
}

.s .ShokkanPointFirst .ShokkanPointItemGraph {
	max-width: unset;
	width: 81.46vw;
}

.ShokkanPointSecond .ShokkanPointItemGraph {
	max-width: 378px;
	width: 26.25vw;
}

.s .ShokkanPointSecond .ShokkanPointItemGraph {
	max-width: unset;
	width: 81.46vw;
}

.ShokkanPointThird .ShokkanPointItemGraph {
	max-width: 380px;
	width: 26.38vw;
}

.s .ShokkanPointThird .ShokkanPointItemGraph {
	max-width: unset;
	width: 81.46vw;
}

.ShokkanPointBtn {
	max-width: 373px;
	width: 40vw;
	margin: 0 auto;
	position: relative;
	z-index: 10;
	padding-top: clamp(64px, 4.17vw, 120px);
}

.s .ShokkanPointBtn {
	max-width: unset;
	width: 62.13vw;
	padding-top: 14.66vw;
}

/* ================================
        Slider for SP
================================ */
.JsSlider .slick-list {
	overflow-x: clip !important;
	overflow-y: visible !important;
}

.s .JsSlider .slick-list {
	overflow: hidden !important;
}

.JsSlider .slick-prev,
.JsSlider .slick-next {
	position: absolute;
	top: 50%;
	transform: translateY(-120%);
	z-index: 2;
	background: none;
	border: none;
	padding: 0;
}

.s .JsSlider .slick-prev,
.s .JsSlider .slick-next {
	top: 0;
	transform: translateY(25vw);
}



.JsSlider .slick-prev {
	left: 0;
}

.s .JsSlider .slick-prev {
	left: 6px;
}

.JsSlider .slick-next {
	right: 0;
}

.s .JsSlider .slick-next {
	right: 6px;
}

.JsSlider .slick-prev img,
.JsSlider .slick-next img {
	max-width: 45px;
	/* width: 3.125vw; */
}

.s .JsSlider .slick-prev img,
.s .JsSlider .slick-next img {
	max-width: unset;
	width: 7.86vw;
}

.dots-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 10px;
}

.s .dots-wrap {
	padding-top: 4.66vw;
}

.dots-wrap li {
	width: 20px !important;
	height: 20px !important;
	margin: 0 18px;
	background: rgba(255, 238, 219, 1);
	border-radius: 50%;
	cursor: pointer;
}

.s .dots-wrap li {
	width: 2.93vw !important;
	height: 2.93vw !important;
	margin: 0 2.8vw;
	background: rgba(255, 238, 219, 1);
	border-radius: 50%;
	cursor: pointer;
}


.dots-wrap li.slick-active {
	width: 26px !important;
	height: 26px !important;
	background: rgba(233, 73, 38, 1);
	border: 4px solid rgba(255, 255, 255, 1);
}

.s .dots-wrap li.slick-active {
	width: 3.8vw !important;
	height: 3.8vw !important;
	border: 0.66vw solid rgba(255, 255, 255, 1);
}

.dots-wrap li button {
	display: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
	padding: 0;
	border: none;
	background-color: transparent;
}