@charset "UTF-8";

/*
■ 共通

■ ヘッダー
■ 導入リード
■ スタイル
■ アイテム
■ プロフィール

■ フッター
■ ページの先頭へ

■ JSライブラリ
*/



/* ■ 共通 ==================================================================================== */


/*
変数設定
背景
*/

body {
color: #fff;
background-color: #000;
}

#Wrapper {
display: none;
}

.BgWrap,
#Footer {
display: none;
}

.WF1 {
font-family: 'Anton', sans-serif;
}

.WF2 {
font-family: 'Roboto', sans-serif;
letter-spacing: 0.1em;
}


/* 変数設定 --------------------------------------------------- */

:root {
--skewx-1: skewX(-20deg);
--skewx-2: skewX(20deg);
--skewx-3: skewX(-15deg);
}


/* 背景 --------------------------------------------------- */

.BgWrap {
display: none;
background-image: url(../img/Bg_Top.png), url(../img/Bg_Body.png);
background-repeat: repeat-x, repeat;
}

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

	.BgWrap {
	padding-bottom: 8rem;
	background-size: 60% auto, 60% auto;
	}

}

@media print, screen and (min-width: 768px) {

	.BgWrap {
	padding-bottom: 14rem;
	}

}



/* ■ ヘッダー ==================================================================================== */

#Header {
position: relative;
}

video {
margin-top: 0;
}

/* BGMボタン */
.BtnBGM {
position: absolute;
}

.MdsBGM {
font-weight: 700;
letter-spacing: 0.075em;
color: #fff;
}

#BtnSoundOn img,
#BtnSoundOff img {
display: inline-block;
vertical-align: middle;
}

#BtnSoundOff {
display: none;
}

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

	/* BGMボタン */
	.BtnBGM {
	top: 1.5rem;
	right: 2rem;
	}

	.MdsBGM {
	margin-right: 0.5rem;
	font-size: 1.1rem;
	}

	#BtnSoundOn img,
	#BtnSoundOff img {
	width: 2.1rem;
	}

}

@media print, screen and (min-width: 768px) {

	#Header {
	min-height: 60rem;
	}

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

	/* BGMボタン */
	.BtnBGM {
	top: 3rem;
	right: 3rem;
	}

	.MdsBGM {
	margin-right: 0.5rem;
	font-size: 1.1rem;
	}

	#BtnSoundOn img,
	#BtnSoundOff img {
	width: 2.3rem;
	}

}



/* ■ 導入リード ==================================================================================== */

.MainLead_Mds1,
.MainLead_Mds2 {
letter-spacing: 0.05em;
font-weight: 700;
color: #000;
}

.MainLead_Lead {
font-weight: 500;
}

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

	.MainLead {
	padding: 8rem 0 2rem;
	}

	.MainLead_Mds1,
	.MainLead_Mds2 {
	max-width: 320px;
	margin: 0 auto;
	}

	.MainLead_Mds1 span,
	.MainLead_Mds2 span {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 1rem 1rem;
	font-size: 1.9rem;
	
	background-color: #fff;
	transform: var(--skewx-1);
	}

	.MainLead_Mds1 span:nth-child(1) {
	margin-left: 2rem;
	}

	.MainLead_Mds1 span:nth-child(2) {
	margin-left: 7rem;
	}

	.MainLead_Mds2 span:nth-child(1) {
	margin-left: -0.5rem;
	}

	.MainLead_Mds2 span:nth-child(2) {
	margin-left: 2rem;
	}

	.MainLead_Lead {
	margin-top: 2rem;
	padding: 0 3rem;
	font-size: 1.5rem;
	line-height: 2;
	}

}

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

	.MainLead_Mds1,
	.MainLead_Mds2 {
	max-width: 260px;
	}

	.MainLead_Mds1 span,
	.MainLead_Mds2 span {
	font-size: 1.5rem;
	}

	.MainLead_Mds1 span:nth-child(2) {
	margin-left: 6rem;
	}

}

@media print, screen and (min-width: 768px) {

	.MainLead {
	max-width: 76.8rem;
	margin: 0 auto;
	padding: 9rem 0 6rem;
	}

	.MainLead_Mds1,
	.MainLead_Mds2 {
	display: inline-block;
	padding: 1rem 2rem;
	font-size: 2.6rem;
	background-color: #fff;
	transform: var(--skewx-1);
	}

	.MainLead_Mds1 {
	margin-left: 10rem;
	}

	.MainLead_Mds2 {
	margin-top: 2rem;
	}

	.MainLead_Lead {
	margin-top: 3rem;
	line-height: 2;
	}

}



/* ■ スタイル ==================================================================================== */



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

	.Style {
	padding-top: 6rem;
	}

	.Style_Mds {
	padding: 0 3rem;
	}

	.Style_Lead {
	margin-top: 2rem;
	padding: 0 3rem;
	font-size: 1.4rem;
	line-height: 1.8;
	}

	/* スライダー */
	.Style_Slide {
	}

}

@media print, screen and (min-width: 768px) {

	.Style {
	padding-top: 8rem;
	}

	.Style_Mds {
	max-width: 85rem;
	margin: 0 auto;
	}

	.Style_Lead {
	max-width: 80rem;
	margin: 4rem auto 0 auto;
	font-size: 1.5rem;
	line-height: 2;
	}

	/* スライダー */
	.Style_Slide {
	max-width: 130rem;
	margin: 0 auto;
	padding: 0 6rem;
	}
	
}


/* ■ アイテム ==================================================================================== */

/*
商品画像
購入案内
注釈
サンプル展示店舗
*/


/* 商品画像 --------------------------------------------------- */

/* アイコン */
.Item_IconWrap {
position: absolute;
left: 50%;
z-index: 1000;
}

.Item_Icon {
position: relative;
z-index: 1000;
margin: 0 auto;
transform-style: preserve-3d;
}

.Item_Icon_Black,
.Item_Icon_White {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.Item_Icon_White {
left: -2px;
}

.Item_Icon {
animation: KuruKuru 2.5s ease-in-out infinite alternate;
}

@keyframes KuruKuru {
	0% {
		transform: rotateY(0deg);
	}
	50% {
		transform: rotateY(180deg);
	}
	100% {
		transform: rotateY(0deg);
	}
}

.Item_Icon_White {
transform: rotateY(180deg);
}

.Item_SlideWrap {
position: relative;
}

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

	.Item_WhichColor {
	padding-top: 6rem;
	}

	.Item_WhichColor_Mds {
	max-width: 9.5rem;
	margin: 0 auto;
	}

	/* スライド */
	.Item_SlideWrap {
	margin-top: 8.5rem;
	}

	.Item_Slide {
	padding: 0 3rem;
	}

	/* アイコン */
	.Item_IconWrap {
	top: -7rem;
	margin-left: -4.2rem;
	}

	.Item_Icon {
	width: 8.4rem;
	height: 9.8rem;
	}

	.Item_Icon img {
	width: 8.4rem;
	}

}

@media print, screen and (min-width: 768px) {

	.Item_WhichColor {
	padding-top: 10rem;
	}

	.Item_WhichColor_Mds {
	max-width: 17.9rem;
	margin: 0 auto;
	}

	/* スライド */
	.Item_SlideWrap {
	margin-top: 13rem;
	}

	.Item_Slide {
	max-width: 70rem;
	margin: 0 auto;
	padding: 0 6rem;
	}

	/* アイコン */
	.Item_IconWrap {
	top: -10rem;
	margin-left: -6.25rem;
	}

	.Item_Icon {
	width: 12.5rem;
	height: 14.6rem;
	margin-top: -1rem;
	}

	.Item_Icon img {
	width: 12.5rem;
	}

}


/* 購入案内 --------------------------------------------------- */

.Item_Buy_ColorPrice {
text-align: center;
}

.Item_Buy_ColorPrice span {
font-weight: 700;
}

.Item_Buy_Period {
text-align: center;
}

.Item_Buy_Period span {
display: inline-block;
font-weight: 700;
color: #000;
background-color: #fff;
transform: var(--skewx-1);
}

.Item_Buy_Period_Lead {
font-weight: 700;
letter-spacing: 0.1em;
text-align: center;
}

.Item_Buy_Period_Lead span {
display: inline-block;
transform: var(--skewx-3);
}

.Item_Buy_Btn {
text-align: center;
}

.Item_Buy_Btn a {
display: inline-block;
position: relative;
overflow: hidden;
letter-spacing: 0.1em;
text-align: center;
color: #fff;
background-color: #000;
transform: var(--skewx-1);
}

.Item_Buy_Btn a::before {
display: block;
position: absolute;
left: -120%;
top: 0;
z-index: 1;
width: 120%;
height: 100%;
background-color: #5d5d5d;
content: "";
}

.Item_Buy_Btn a span {
display: inline-block;
position: relative;
z-index: 2;
background: url(../img/common/Icon_Cart.png) no-repeat left center;
transform: var(--skewx-2);
}

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

	.Item_Buy {
	margin-top: 6rem;
	padding: 0 3rem;
	}

	.Item_Buy_Mds {
	max-width: 34rem;
	margin: 0 auto;
	}

	.Item_Buy_ColorPrice {
	margin-top: 2rem;
	font-size: 1.3rem;
	line-height: 1.8;
	}

	.Item_Buy_Period {
	margin-top: 3rem;
	}

	.Item_Buy_Period span {
	padding: 1rem 2.5rem;
	font-size: 1.4rem;
	}

	.Item_Buy_Period_Lead {
	margin-top: 2rem;
	font-size: 1.5rem;
	line-height: 1.6;
	}

	.Item_Buy_Btn {
	margin-top: 3rem;
	}

	.Item_Buy_Btn a {
	width: 26rem;
	padding: 1.5rem 0;
	border: 3px solid #fff;
	font-size: 2rem;
	}

	.Item_Buy_Btn a span {
	padding-left: 2.5rem;
	background-size: 1.8rem 1.8rem;
	}

}

@media print, screen and (min-width: 768px) {

	.Item_Buy {
	margin-top: 10rem;
	}

	.Item_Buy_Mds {
	max-width: 68.2rem;
	margin: 0 auto;
	}

	.Item_Buy_ColorPrice {
	margin-top: 3rem;
	font-size: 2rem;
	line-height: 1.8;
	}

	.Item_Buy_Period {
	margin-top: 4rem;
	}

	.Item_Buy_Period span {
	padding: 1rem 2.5rem;
	font-size: 2.2rem;
	}

	.Item_Buy_Period_Lead {
	margin-top: 2.5rem;
	font-size: 2.6rem;
	}

	.Item_Buy_Btn {
	margin-top: 6rem;
	margin-right: 2.5rem;
	}

	.Item_Buy_Btn a {
	padding: 1.5rem 12rem 1.5rem 11rem;
	border: 5px solid #fff;
	font-size: 2.8rem;
	}

	.Item_Buy_Btn a span {
	padding-left: 4rem;
	background-size: 2.6rem 2.6rem;
	}

}

@media (hover: hover) {

	.Item_Buy_Btn a:hover {
	opacity: 1;
	}

	.Item_Buy_Btn a:hover::before {
	background-color: #5d5d5d;
	animation: Btn_Bg 0.5s forwards;
	}
	
	@keyframes Btn_Bg {
		100% {
			left: -20%;
		}
	}

}


/* 注釈 --------------------------------------------------- */

.Item_Notice {
background-color: #000;
}

.Item_Notice_Mds {
font-weight: 300;
}

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

	.Item_NoticeWrap {
	margin-top: 3rem;
	padding: 0 3rem;
	}

	.Item_Notice {
	padding: 3rem 2.5rem;
	}

	.Item_Notice_List {
	margin-top: 2rem;
	}

}

@media print, screen and (min-width: 768px) {

	.Item_NoticeWrap {
	max-width: 92rem;
	margin: 8rem auto 0 auto;
	padding: 0 6rem;
	}

	.Item_Notice {
	padding: 3rem 4rem;
	}

	.Item_Notice_MdsList {
	display: flex;
	align-items: center;
	}

	.Item_Notice_List {
	margin-top: 0;
	padding-left: 4rem;
	}

}



/* サンプル展示店舗 --------------------------------------------------- */

.Item_Shop {
position:relative;
}

.Item_Shop_Lead2 {
font-weight: 700;
}

/* 枠線設定 */
.Item_Shop::before,
.Item_Shop::after {
position: absolute;
border: solid #fff;
width: 50px;
height: 50px;
content:'';
transition: all 1s ease-in-out;
}

.Item_Shop::before {
left: 0;
top: 0;
border-width: 1px 0 0 1px;
}

.Item_Shop::after {
right: 0;
bottom: 0;
border-width: 0 1px 1px 0;
}

.Item_Shop.Effect1::before,
.Item_Shop.Effect1::after {
width: 100%;
height: 100%;
border-color: #fff
}

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

	.Item_ShopWrap {
	margin-top: 3rem;
	padding: 0 3rem;
	}

	.Item_Shop {
	padding: 3rem 2.4rem 3rem;
	color: #fff;
	background-color: #000;
	}

	.Item_Shop_Lead1 {
	font-size: 1.4rem;
	line-height: 2;
	}

	.Item_Shop_Lead2 {
	margin-top: 2rem;
	font-size: 1.8rem;
	line-height: 2;
	text-align: center;
	}

}

@media print, screen and (min-width: 768px) {

	.Item_ShopWrap {
	max-width: 92rem;
	margin: 10rem auto 0 auto;
	padding: 0 6rem;
	}

	.Item_Shop {
	padding: 6rem 8rem 7rem;
	color: #fff;
	background-color: #000;
	}

	.Item_Shop_Lead1 {
	font-size: 1.5rem;
	line-height: 2.2;
	text-align: center;
	}

	.Item_Shop_Lead2 {
	margin-top: 2rem;
	font-size: 2rem;
	text-align: center;
	}

}



/* ■ プロフィール ==================================================================================== */

.Profile {
position: relative;
}

.Profile_InBox {
position: relative;
border-left: 1px solid #717171;
border-right: 1px solid #717171;
background-color: #000;
}

.Profile_Mds {
position: absolute;
}

/* リリース情報 */
.Profile_Release {
position: relative;
border: 1px solid #717171;
}

.Profile_Release_Mds {
position: absolute;
}

.Profile_Release_Lead1 {
letter-spacing: 0.05em;
}

.Profile_Release_Lead2 {
font-weight: 700;
letter-spacing: 0.1em;
}

/* SNS */
.Profile_SNS {
display: flex;
justify-content: center;
}

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

	.Profile_Wrap {
	margin-top: 6rem;
	padding: 0 3rem;
	}

	.Profile {
	padding-top: 6rem;
	background-image: url(../img/Profile_Bg_TopL_SP.png), url(../img/Profile_Bg_TopR_SP.png), url(../img/Profile_Bg_TopC_SP.png);
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: left top, right top, center top;
	background-size: 19.2rem 6rem, 19.2rem 6rem, 35rem 6rem;
	}

	.Profile_InBoxWrap {
	padding-bottom: 6rem;
	background-image: url(../img/Profile_Bg_BtmL_SP.png), url(../img/Profile_Bg_BtmR_SP.png), url(../img/Profile_Bg_BtmC_SP.png);
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: left bottom, right bottom, center bottom;
	background-size: 19.2rem 6rem, 19.2rem 6rem, 35rem 6rem;
	}

	.Profile_InBox {
	padding: 3rem 2.5rem 0;
	}

	.Profile_Mds {
	top: -7.8rem;
	left: 2.8rem;
	width: 12rem;
	}

	.Profile_IconLead {
	margin-top: -3rem;
	}

	.Profile_Icon {
	width: 10.5rem;
	margin: 0 auto;
	}

	.Profile_Lead {
	margin-top: 3rem;
	font-size: 1.4rem;
	line-height: 2;
	}

	.Profile_Movie {
	margin-top: 2rem;
	}

	/* リリース情報 */
	.Profile_Release {
	margin-top: 4rem;
	padding: 3.5rem 2rem 3rem;
	}

	.Profile_Release_Mds {
	top: -1rem;
	left: 2rem;
	width: 7.8rem;
	}

	.Profile_Release_Lead1 {
	line-height: 1.4;
	}

	.Profile_Release_Lead2 {
	margin-top: 1rem;
	font-size: 1.3rem;
	line-height: 1.6;
	}

	.Profile_Release_Lead3 {
	margin-top: 1rem;
	font-size: 1.3rem;
	line-height: 2;
	}

	/* SNS */
	.Profile_SNS {
	margin-top: 3rem;
	margin-bottom: -0.5rem;
	}

	.Profile_SNS li {
	margin: 0 1.5rem;
	}

	.Profile_SNS img {
	height: 3rem;
	}

}

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

	.Profile {
	background-image: url(../img/Profile_Bg_TopL_SP.png), url(../img/Profile_Bg_TopR_SP.png), url(../img/Profile_Bg_TopC_S_SP.png);
	background-size: 19.2rem 6rem, 19.2rem 6rem, 20rem 6rem;
	}

	.Profile_InBoxWrap {
	background-image: url(../img/Profile_Bg_BtmL_SP.png), url(../img/Profile_Bg_BtmR_SP.png), url(../img/Profile_Bg_BtmC_S_SP.png);
	background-size: 19.2rem 6rem, 19.2rem 6rem, 20rem 6rem;
	}

}

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

	.Profile {
	background-image: url(../img/Profile_Bg_TopL_SP.png), url(../img/Profile_Bg_TopR_SP.png), none;
	}

	.Profile_InBoxWrap {
	background-image: url(../img/Profile_Bg_BtmL_SP.png), url(../img/Profile_Bg_BtmR_SP.png), none;
	}

}

@media print, screen and (min-width: 768px) {

	.Profile_Wrap {
	max-width: 117rem;
	margin: 15rem auto 0 auto;
	padding: 0 6rem;
	}

	.Profile {
	padding-top: 12rem;
	background-image: url(../img/Profile_Bg_TopL_PC.png), url(../img/Profile_Bg_TopR_PC.png);
	background-repeat: no-repeat, no-repeat;
	background-position: left top, right top;
	background-size: 52.5rem 12rem, 52.5rem 12rem;
	}

	.Profile_InBoxWrap {
	padding-bottom: 12rem;
	background-image: url(../img/Profile_Bg_BtmL_PC.png), url(../img/Profile_Bg_BtmR_PC.png);
	background-repeat: no-repeat, no-repeat;
	background-size: 52.5rem 12rem, 52.5rem 12rem;
	background-position: left bottom, right bottom;
	}

	.Profile_InBox {
	padding: 10rem 8rem 0;
	}

	.Profile_Mds {
	top: -15rem;
	right: 12rem;
	width: 20.6rem;
	}

	.Profile_IconLead {
	display: flex;
	align-items: center;
	margin-top: -13rem;
	}

	.Profile_Icon {
	width: 20%;
	padding-left: 1rem;
	}

	.Profile_Lead {
	width: 80%;
	padding-left: 4rem;
	font-size: 1.5rem;
	line-height: 2.2;
	}

	.Profile_Movie {
	margin-top: 6rem;
	}

	/* リリース情報 */
	.Profile_Release {
	margin-top: 5rem;
	padding: 3.5rem 3rem 3.5rem;
	}

	.Profile_Release_Mds {
	top: -1.35rem;
	right: 2rem;
	width: 9.4rem;
	}

	.Profile_Release_Lead1 {
	font-size: 1.8rem;
	}

	.Profile_Release_Lead2 {
	margin-top: 1.5rem;
	font-size: 1.4rem;
	}

	.Profile_Release_Lead3 {
	margin-top: 2rem;
	font-size: 1.3rem;
	line-height: 2;
	}

	/* SNS */
	.Profile_SNS {
	margin-top: 5rem;
	margin-bottom: -2rem;
	}

	.Profile_SNS li {
	max-width: 100%;
	margin: 0 2rem;
	}

	.Profile_SNS img {
	height: 4rem;
	}

}

@media print, screen and (min-width: 1110px) {

	.Profile_InBox {
	padding: 10rem 15rem 0;
	}

}



/* ■ フッター ==================================================================================== */

#Footer {
background-color: #fff;
}

/* SNS */
.Footer_SNS {
display: flex;
justify-content: center;
}

.Footer_SNS li {
display: flex;
align-items: center;
}

/* コピーライト */
.Footer_Copyright {
text-align: center;
color: #000;
}
		
/* ロゴ */
.Footer_Logo {
text-align: center;
}

.Footer_Logo img {
display: inline-block;
}

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

	#Footer {
	padding: 6rem 3rem;
	}

	/* ロゴ */
	.Footer_Logo img {
	width: 120px;
	}

	/* SNS */
	.Footer_SNS {
	margin-top: 3rem;
	}

	.Footer_SNS li {
	margin: 0 1.5rem;
	}

	.Footer_SNS img {
	height: 3rem;
	}

	.Footer_SNS li:nth-child(3) img {
	height: 2.5rem;
	}

	/* コピーライト */
	.Footer_Copyright {
	margin-top: 4rem;
	font-size: 1.1rem;
	}
	
}

@media print, screen and (min-width: 768px) {

	#Footer {
	padding: 10rem 0;
	}

	/* ロゴ */
	.Footer_Logo img {
	width: 140px;
	}

	/* SNS */
	.Footer_SNS {
	margin-top: 3rem;
	}

	.Footer_SNS li {
	margin: 0 1.5rem;
	}

	.Footer_SNS img {
	height: 3rem;
	}

	.Footer_SNS li:nth-child(3) img {
	height: 2.5rem;
	}

	/* コピーライト */
	.Footer_Copyright {
	margin-top: 4rem;
	font-size: 1.2rem;
	}

}



/* ■ ページの先頭へ ==================================================================================== */

#PageTop {
display: none;
position: fixed;
z-index: 3000;
}

#PageTop a {
display: inline-block;
position: relative;
border-radius: 100vh;
text-indent: -9999px;
background-color: #000;
}

#PageTop a::after {
display: block;
position: absolute;
left: 50%;
top: 50%;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
transform: rotate(-45deg);
content: '';
}

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

	#PageTop {
	right: 1rem;
	bottom: 3rem;
	}

	#PageTop a {
	width: 4rem;
	height: 4rem;
	}

	#PageTop a::after {
	width: 1rem;
	height: 1rem;
	margin-left: -0.5rem;
	margin-top: -0.3rem;
	}

}

@media print, screen and (min-width: 768px) {

	#PageTop {
	right: 2rem;
	bottom: 2rem;
	}

	#PageTop a {
	width: 6rem;
	height: 6rem;
	}

	#PageTop a::after {
	width: 1.2rem;
	height: 1.2rem;
	margin-left: -0.6rem;
	margin-top: -0.4rem;
	}

}



/* ■ JSライブラリ ==================================================================================== */

/*
slick
*/


/* slick カスタマイズ --------------------------------------------------- */

/* 前後ボタン */
.slick-prev,
.slick-next {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
z-index: 10;
border-radius: 100vh;
text-indent: -9999px;
background-color: rgba(0,0,0,0.5);
cursor: pointer;
}

.slick-prev-arrow,
.slick-next-arrow {
display: block;
border-color: #fff;
border-top-style: solid;
border-right-style: solid;
}

.slick-prev-arrow {
transform: rotate(225deg);
}

.slick-next-arrow {
transform: rotate(45deg);
}

.slick-disabled {
opacity: 0.2;
cursor: default;
}

/* ページネーション */
.slick-dots {
display: flex;
justify-content: center;
width: 100%;
}

.slick-dots li {
margin: 0 0.3rem;
transform: var(--skewx-1);
}

.slick-dots button {
position: relative;
overflow: hidden;
border: 1px solid #5d5d5d;
text-indent: -9999px;
color: #fff;
background-color: #000;
cursor: pointer;
transition: all 0.5s 0 ease-in-out;
}

.slick-dots button::before {
position: absolute;
left: -120%;
top: 0;
z-index: 1;
width: 120%;
background-color: #5d5d5d;
content: "";
}

.slick-dots .slick-active button::before {
background-color: #5d5d5d;
animation: Effect_Bg 4s forwards;
}

@keyframes Effect_Bg {
	100% {
		left: -20%;
	}
}

.slick-dots button::after {
position: absolute;
z-index: 2;
letter-spacing: 0.05em;
text-indent: 0px;
font-family: 'Anton', sans-serif;
}

.Style_Slide .slick-dots li:nth-child(1) button::after {
content: "STYLE 1";
}

.Style_Slide .slick-dots li:nth-child(2) button::after {
content: "STYLE 2";
}

.Style_Slide .slick-dots li:nth-child(3) button::after {
content: "STYLE 3";
}

.Item_Slide .slick-dots li:nth-child(1) button::after {
content: "BLACK";
}

.Item_Slide .slick-dots li:nth-child(2) button::after {
content: "WHITE";
}

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

	/* 前後ボタン */
	.slick-prev,
	.slick-next {
	bottom: -4rem;
	width: 3rem;
	height: 3rem;
	margin-top: -1.5rem;
	}

	.slick-prev {
	left: 0;
	padding-left: 0.5rem;
	}

	.slick-next {
	right: 0;
	padding-right: 0.5rem;
	}

	.slick-prev-arrow,
	.slick-next-arrow {
	width: 1rem;
	height: 1rem;
	border-top-width: 1px;
	border-right-width: 1px;
	}

	/* ページネーション */
	.slick-dots {
	margin-top: 2rem;
	}

	.slick-dots button {
	width: 10rem;
	height: 2.5rem;
	}

	.slick-dots button::before {
	height: 2.5rem;
	}

	.slick-dots button::after {
	left: 1rem;
	top: 0.2rem;
	font-size: 1.2rem;
	}

}

@media print, screen and (min-width: 768px) {

	/* 前後ボタン */
	.slick-prev,
	.slick-next {
	top: 50%;
	width: 6rem;
	height: 6rem;
	margin-top: -3rem;
	}

	.slick-prev {
	left: 2rem;
	padding-left: 1rem;
	}

	.slick-next {
	right: 2rem;
	padding-right: 1rem;
	}

	.slick-prev-arrow,
	.slick-next-arrow {
	width: 2rem;
	height: 2rem;
	border-top-width: 2px;
	border-right-width: 2px;
	}

	/* ページネーション */
	.slick-dots {
	margin-top: -3rem;
	}

	.Item_Slide	.slick-dots {
	margin-top: 3rem;
	}

	.slick-dots button {
	width: 20rem;
	height: 3.5rem;
	}

	.slick-dots button::before {
	height: 3.5rem;
	}

	.slick-dots button::after {
	left: 1.6rem;
	top: 0.4rem;
	}

}