@charset "UTF-8";

/* =============================================================================
   cocoloni占い館 トップページ カルーセル（単体動作版）

   本家 https://honkaku-uranai.jp/ の画面上部カルーセルを切り出したもの。
   本家は jQuery 1.7.2 + bxSlider 製だが、ここでは外部ライブラリなしで再現している。
   見た目の数値（サイズ・色・余白）は本家の style.css をそのまま踏襲。
   ========================================================================== */


/* -----------------------------------------------------------------------------
   0. 最低限のリセット
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", meiryo, sans-serif;
  color: #1F2121;
  background: #FFFFFF;
}


/* -----------------------------------------------------------------------------
   1. サイズ・時間の設定値

   --slide-pitch は js/carousel.js の CONFIG.slidePitch と必ず揃えること。
   （JS が「何 px ずらすか」を計算するのに同じ値を使うため）
   -------------------------------------------------------------------------- */
:root {
  --slide-pitch: 700px;        /* スライド1枚が占める幅（カード幅 + 右の隙間） */
  --slide-gap: 20px;           /* 隣のカードとの隙間 */
  --slide-image-height: 368px; /* バナー画像の高さ */
  --slide-title-height: 77px;  /* 画像下の白いタイトル帯の高さ */
  --slide-title-font: 16px;
  --slide-title-padding: 0 20px 0 155px;   /* 左はロゴバッジぶんを空ける */
  --slide-title-padding-nologo: 0 20px;    /* ロゴなしのバナー用 */

  /* 背景の帯の色。ここ1箇所を変えれば全体の色が変わる */
  --band-color: #EFF9F1;
  --band-gap: 5px;             /* 帯の下と次のコンテンツとの隙間 */

  /* タイトル帯の左に出すサービスロゴのバッジ */
  --badge-width: 123px;
  --badge-height: 37px;
  --badge-left: 20px;
  --badge-logo-size: 68.96px 20.66px;      /* ロゴがこの枠に収まるよう縮小される */
}

@media only screen and (max-width: 599px) {
  :root {
    --slide-pitch: 335px;
    --slide-gap: 8px;
    --slide-image-height: 176px;
    --slide-title-height: 60px;
    --slide-title-font: 13px;
    --slide-title-padding: 0 15px 0 88px;
    --slide-title-padding-nologo: 0 15px;

    --badge-width: 65px;
    --badge-height: 22px;
    --badge-left: 12px;
    --badge-logo-size: 48px 13px;
  }
}


/* -----------------------------------------------------------------------------
   2. 背景の帯
   -------------------------------------------------------------------------- */
.top_slide {
  height: 537px;
  padding: 32px 0;
  margin-bottom: var(--band-gap);   /* 次のコンテンツとの隙間 */
  overflow: hidden;
  background-color: var(--band-color);
}

@media only screen and (max-width: 599px) {
  .top_slide {
    height: 294px;
    padding: 20px 0 15px;
    border-radius: 32px 32px 0 0;
  }
}


/* -----------------------------------------------------------------------------
   3. カルーセルの骨格

   viewport は「画像 + タイトル帯」ぶんの高さだけを持ち、左右にはみ出した
   スライドを隠す。矢印とページャーは .carousel を基準に絶対配置する。
   -------------------------------------------------------------------------- */
.carousel {
  position: relative;
}

.carousel_viewport {
  position: relative;
  height: calc(var(--slide-image-height) + var(--slide-title-height));
  overflow: hidden;
}

.carousel_track {
  display: flex;
  visibility: hidden;   /* 初期化が終わるまで隠す（整列前のチラつき防止） */
}

.carousel.is-ready .carousel_track {
  visibility: visible;
}


/* -----------------------------------------------------------------------------
   4. スライド1枚

   幅は必ず --slide-pitch ちょうど。右側の padding が隣との隙間になり、
   画像はその内側に収まる。
   -------------------------------------------------------------------------- */
.pickup {
  flex: 0 0 var(--slide-pitch);
  width: var(--slide-pitch);
  padding-right: var(--slide-gap);
}

.pickup a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.pickup img {
  display: block;
  width: 100%;
  height: var(--slide-image-height);
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}


/* -----------------------------------------------------------------------------
   5. 画像下の白いタイトル帯

   帯の左端に ::before でサービスロゴのバッジを置く。
   タイトルはそのぶん左を空けて配置し、2行を超えたら打ち切る。
   -------------------------------------------------------------------------- */
.pickup_title {
  position: relative;                 /* ::before（バッジ）の位置の基準 */
  display: flex;
  align-items: center;
  height: var(--slide-title-height);
  padding: var(--slide-title-padding);
  font-size: var(--slide-title-font);
  background: #FFFFFF;
  border-radius: 0 0 12px 12px;
}

/*
  サービスロゴのバッジ。角丸の枠線の中央にロゴを置いている。
  ロゴは SVG なので、--badge-logo-size の枠に縦横比を保ったまま収まる
  （枠を埋めるのではなく、はみ出さない大きさまで縮小されて中央に置かれる）。
  --service-logo は js/slides.js の serviceLogo をもとに JS がスライドごとに立てる。
*/
.pickup_title::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--badge-left);
  transform: translateY(-50%);
  width: var(--badge-width);
  height: var(--badge-height);
  border: 1px solid #1F2121;
  border-radius: 40px;
  background-image: var(--service-logo, none);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: var(--badge-logo-size);
}

/*
  serviceLogo が指定されていないバナー。
  バッジそのものを作らず、タイトルを帯の左端から始める。
*/
.pickup--no-logo .pickup_title {
  padding: var(--slide-title-padding-nologo);
}

.pickup--no-logo .pickup_title::before {
  content: none;
}

.pickup_title span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}


/* -----------------------------------------------------------------------------
   6. 左右の矢印
   -------------------------------------------------------------------------- */
.carousel_arrow {
  position: absolute;
  top: calc(var(--slide-image-height) / 2);   /* 画像部分の高さの中央に置く */
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(31, 33, 33, 0.3);
  cursor: pointer;
}

.carousel_arrow--prev { left: 18px; }
.carousel_arrow--next { right: 18px; }

/* 白い「く」の字。正方形の2辺だけを描いて回転させている */
.carousel_arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid #FFFFFF;
  border-left: 2px solid #FFFFFF;
}

.carousel_arrow--prev::before {
  left: 15px;
  transform: translateY(-50%) rotate(-45deg);
}

.carousel_arrow--next::before {
  right: 15px;
  transform: translateY(-50%) rotate(135deg);
}


/* -----------------------------------------------------------------------------
   7. ページャー（下のドット）
   -------------------------------------------------------------------------- */
.carousel_pager {
  position: absolute;
  bottom: -36px;
  width: 100%;
  padding-top: 20px;
  text-align: center;
}

.carousel_pager button {
  width: 8px;
  height: 8px;
  margin: 0 5px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #F2F2F2;
  vertical-align: middle;
  cursor: pointer;
}

.carousel_pager button:hover,
.carousel_pager button.is-active {
  background: #1F2121;
}

@media only screen and (max-width: 599px) {
  .carousel_pager {
    bottom: -32px;
  }
  .carousel_pager button {
    width: 6px;
    height: 6px;
  }
}