@charset "UTF-8";
/********************************************************************
	このcssは書影紹介の指定用です。
	※グラデーションとドット背景はcommon.cssに記載（topと共通のため）
	※PCの書影はhtmlに直書き
********************************************************************/

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

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

/********************************************************************
	コンテンツ
	-タイトルとキャッチ
********************************************************************/
/*グラデーションとドット背景より上に表示する設定*/
#emojacket #contents .u-position--relative{
	z-index: 3;
}

/*見出しとキャッチ　背景*/
#emojacket #contents .contents__title-catch{
	padding: 20px 40px 15px 40px;
	background: #59608b;
}

/*見出し　文字*/
#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: 480px;
}

/*キャンペーン文言（画像）とスライダー画像の上下余白*/
#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: #59608b;
	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: #59608b;
	text-align: left;
	background: #fff;
}

/********************************************************************
	スライダー
********************************************************************/
/*スライダーを包むwrap*/
#emojacket #contents .contents__slider-wrap{
	margin: 0 auto;
	max-width: 600px;
	height: auto;
}

/*スライダー境界線*/
#emojacket #contents .swiper-slide{
	max-width: 600px;
	border: 3px solid #59608b;
	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;
}

/* 矢印ボタン */
#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 #59608b;
	background-color: #fce279;
	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: 20px 0 0 0;
	text-align: center;
}

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

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

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

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

#emojacket #contents .slider-controls .swiper-button-prev,
#emojacket #contents .slider-controls .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* 以下は既存のスタイル */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid #59608b;
  background-color: #fce279;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}