@charset "UTF-8";
/********************************************************************
	このcssは書影紹介の指定用です。
	※PCの書影はhtmlに直書き
********************************************************************/

/********************************************************************
	書影の表示設定
********************************************************************/
/*書影の表示範囲*/
#emojacket #contents .contents__wrap {
    width: 100%;
	background: url(/auto/images/fix/feature/260211_emojacket2/lp/pcc/common__bg-lattice.png) repeat;
}

#emojacket #contents .contents__wrap div{
	margin: 0 auto;
	max-width: 600px;
}

/********************************************************************
	コンテンツ
	-背景画像
********************************************************************/
/*グラデーション*/
#emojacket .common__bg{
	background-image: url(/auto/images/fix/feature/260211_emojacket2/lp/pcc/main__bg.jpg);
	background-color: #f5eedc;
	background-position: top center;
	background-size: cover;
	background-repeat: repeat-y;
}

/********************************************************************
	コンテンツ
	-タイトルとキャッチ
********************************************************************/
/*見出しとキャッチ　背景*/
#emojacket #contents .contents__title-catch{
	padding: 20px 40px 15px 40px;
	background: #3c3f3e;
}

/*見出し　文字*/
#emojacket #contents .contents__title-catch h2{
	padding: 0 0 6px 0;/*境界線との余白*/
	color: #fff;
	font-size: 3.833rem;
	line-height: 1;
	letter-spacing: 0.287rem;
	border-bottom: 1px solid #fff;/*キャッチとの境界線*/
	
}

/*見出し　サブタイトル*/
#emojacket #contents .contents__title-catch h2 span{
	font-size: 2.5rem;
	display: block;
}

/*見出しのリンク*/
#emojacket #contents .contents__title-catch h2 a{
	color: #fff;
}

/*キャッチ　文字*/
#emojacket #contents .contents__title-catch p{
	padding: 6px 0 0 0;/*境界線との余白*/
	color: #fff;
	font-size: 1.666rem;
	line-height: 2rem;
	letter-spacing: 0.3rem;
}

/********************************************************************
	コンテンツ
	-キャンペーン文言、スライダー画像、ボタン
	-横幅、上下余白
********************************************************************/
/*横幅の共通指定*/
#emojacket #contents .contents__top-wrap,
#emojacket #contents .contents__summary-wrap{
	margin: 0 auto;
	width: 90%;
	max-width: 600px;
}

/*キャンペーン文言（画像）とスライダー画像の上下余白*/
#emojacket #contents .contents__top-wrap{
	padding: 30px 0 30px 0;
}

/*ボタンの上下余白*/
#emojacket #contents .contents__button-wrap{
	padding: 30px  0 70px 0;
}

/********************************************************************
	コンテンツ
	-コピーライト、あらすじ
	-個別設定
********************************************************************/
/*コピーライト 背景*/
#emojacket #contents .contents__copyright{
	padding: 2px 10px 2px 10px;
	background: #3c3f3e;
	display: inline-block;
}

/*コピーライト 文字*/
#emojacket #contents .contents__copyright small{
	font-size: 1.25rem;
	color: #fff;
}

/*あらすじ*/
#emojacket #contents .contents__synopsis{
	padding: 20px 20px 20px 20px;
	width: 100%;
	font-size: 1.5rem;
	line-height: 1.8rem;
	color: #3c3f3e;
	text-align: left;
	background: #fff;
}

/********************************************************************
	スライダー
	-背景
********************************************************************/
#emojacket #contents .contents__slider-wrap{
	position: relative;
}

#emojacket #contents .contents__slider-wrap::before{
	position: absolute;
	content: "";
	width: 600px;
	height: 600px;
	top: 10px;
	right: -10px;
	background: url(/auto/images/fix/feature/260211_emojacket2/lp/pcc/main__bg-dot.png) no-repeat;
	background-position: right bottom;
	aspect-ratio: 1 / 1;
	z-index: 0;
}

/********************************************************************
	スライダー
	-矢印、サムネイルなど
********************************************************************/
/*スライダーを包むwrap*/
#emojacket #contents .contents__slider-wrap{
	margin: 0 auto;
	max-width: 600px;
	height: auto;
}

/*スライダー境界線*/
#emojacket #contents .swiper-slide{
	max-width: 600px;
	border: 3px solid #3c3f3e;
	box-sizing: border-box;
}

/* 矢印全体の位置*/
#emojacket #contents .slider-controls {
	position: absolute;
	inset: 0; /* top, right, bottom, left を全部0に */
	display: flex;
	align-items: center; /* 縦中央揃え */
	justify-content: space-between; /* 左右に配置 */
	z-index: 10;
	pointer-events: none;
	top: -10%;
}

/* 矢印ボタン */
#emojacket #contents .slider-controls .swiper-button-prev,
#emojacket #contents .slider-controls .swiper-button-next {
	width: 50px;
	height: 50px;
	max-width: 50px;
	max-height: 50px;
	border-radius: 50%;
	border: 3px solid #3c3f3e;
	background-color: #f7ca42;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
}

/*右矢印*/
#emojacket #contents .slider-controls .swiper-button-prev{
	left: -20px!important;
}

/*左矢印*/
#emojacket #contents .slider-controls .swiper-button-next{
	right: -20px!important;
}

/* SwiperのデフォルトSVG矢印を非表示 */
#emojacket #contents .swiper-container-wrap .swiper-button-prev::after,
#emojacket #contents .swiper-container-wrap .swiper-button-next::after{
    display: none;
}

/*サムネイル画像下の●　位置調整*/
#emojacket #contents .swiper-pagination{
	position: relative;
	margin: 30px 0 0 0;
	text-align: center;
}

/*サムネイル画像下の●　サイズ*/
#emojacket #contents .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
}

/*サムネイル画像下の●　通常状態*/
#emojacket #contents .swiper-pagination-bullet {
  background-color: #3c3f3e; /* ← お好きな色に変更 */
  opacity: 1; /* Swiperのデフォルトは0.2なので、見えやすくする */
}

/* サムネイル画像下の●　アクティブ状態*/
#emojacket #contents .swiper-pagination-bullet-active{
	border: 2px solid #3c3f3e;
	background: #f7ca42;
}

/* サムネイル画像下の●　左右の間隔を広げる*/
#emojacket #contents .swiper-pagination-bullet {
  margin: 0 10px;
}