@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;
}