@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* 共通：アフィリエイト1pxトラッキング非表示 */
img[width="1"][height="1"],
img[src*="t.afi-b.com/lead"] {
  display: none !important;
}
/* ========== 基本レイアウト ========== */
.slp-cards{
  display:grid !important;
  grid-template-columns:repeat(var(--slp-cols,2),minmax(0,1fr));
  gap:var(--slp-gap,16px);
  row-gap:calc(var(--slp-gap,16px)*.6) !important;
  align-items:start;
	
}
@media (max-width:768px){ .slp-cards{ grid-template-columns:1fr !important; } }

figure.slp-card-row{
  margin:0 !important; padding:.7rem .9rem !important;
  display:flex; flex-direction:column; gap:12px;
  background:var(--slp-surface,#fff);
  border:1px solid rgba(0,0,0,.08); border-radius:14px;
  box-shadow:0 4px 12px rgba(0,0,0,.05); box-sizing:border-box;
}

.slp-card-head{ padding-bottom:4px !important; }
.slp-card-head h3{ margin:0 0 .3rem 0 !important; font-size:1.1rem; line-height:1.4; }
.slp-card-head a{ text-decoration:none; color:inherit; }

.slp-card-text{ color:#5b3d46; line-height:1.7; font-size:1rem; }
.slp-card-text p{ margin:0 !important; line-height:1.55 !important; }

/* CTA：縦積み（中心寄せやmarginはここで一元管理） */
.slp-card-cta{
  display:flex; flex-direction:column; gap:8px; align-items:stretch;
  margin-top:12px !important; text-align:left;  /* ← centerの旧指定を統一して上書き */
}
.slp-card-cta .btn{
  display:block; text-align:center; padding:10px 14px; border-radius:6px; font-size:.95rem;
}

/* ========== メディア枠（JSカルーセル前提） ========== */
.slp-card-media{
  position:relative; width:100%; aspect-ratio:var(--media-ratio,1/1); overflow:hidden;
}

/* scroll-snap 無効化（保険） */
.slp-snap{ position:absolute; inset:0; overflow:hidden; scroll-snap-type:none !important; }

/* トラック&スライド（100%幅=1枚表示） */
.slp-snap__track{
  display:flex; height:100%; will-change:transform; transition:transform .35s ease;
}
.slp-snap__slide{
  flex:0 0 100% !important; width:100% !important; height:100% !important; min-width:0 !important;
}
.slp-snap__slide > a{ display:block; width:100%; height:100%; }
.slp-snap__slide img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:center;
}

/* 矢印（PCのみ表示／画像下に小さく） */
.slp-snap__nav{
  position:absolute; bottom:8px; top:auto; transform:none;
  background:rgba(255,255,255,.9); color:#333; border:none; border-radius:50%;
  width:28px; height:28px; line-height:28px; font-size:16px; cursor:pointer; opacity:.95; z-index:3;
  transition:background .2s, color .2s, opacity .2s;
}
.slp-snap__nav:hover{ background:#ff5fa2; color:#fff; }
.slp-snap__prev{ left:40%; } .slp-snap__next{ right:40%; }
@media (max-width:767px){ .slp-snap__nav{ display:none; } }

/* 旧スライダー系を完全に無効化（保険） */
.slp-slider, .slp-slider__track, .slp-slide{ all:unset !important; }

/* ========== PC単列レイアウト（画像左／本文右／CTA下） ========== */
.slp-card-body{ display:contents !important; }

@media (min-width:900px){
  .slp-cards[style*="--slp-cols:1"] > figure.slp-card-row,
  .slp-cards[style*="--slp-cols: 1"] > figure.slp-card-row,
  .slp-cards > figure.slp-card-row:only-child{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(260px,38%);
    grid-template-rows:auto 1fr auto;  /* タイトル / 本文 / CTA */
    column-gap:18px; row-gap:10px;
  }
  .slp-card-head{ grid-column:1 / 3 !important; grid-row:1 !important; }
  .slp-card-text{ grid-column:1 / 2 !important; grid-row:2 !important; align-self:center !important; }
  .slp-card-cta { grid-column:1 / 2 !important; grid-row:3 !important; align-self:start !important; }
  .slp-card-media{
    grid-column:2 / 3 !important; grid-row:2 / 4 !important; align-self:stretch !important; justify-self:stretch !important;
  }
}

/* まず既存の「display:none」を打ち消す */
@media (max-width: 767px){
  .slp-snap__nav{
    display: block !important;
    width: 28px; height: 28px; font-size: 16px; line-height: 28px;
    bottom: 8px;
  }
  /* 位置は左右に寄せる方が押しやすい */
  .slp-snap__prev{ left: 12px; }
  .slp-snap__next{ right: 12px; }
}

/* 横スワイプをJSに、縦スクロールはブラウザに任せる */
.slp-snap{
  touch-action: pan-y;        /* ← これがキモ（iOS/Androidとも安定） */
  -ms-touch-action: pan-y;    /* 旧Edge対策（保険） */
}

/* ============================================
   Secret Love Play - カードレイアウト最終版
   PC: 左メディア｜右テキスト+CTA
   SP: タイトル→本文→画像→CTA
============================================ */

/* ベース共通 */
figure.slp-card-row{
  margin:0.5rem !important;
  padding:.7rem .9rem !important;
  background:var(--slp-surface,#fff);
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* ===== スマホ（縦積み） ===== */
@media (max-width: 899px){
  figure.slp-card-row{ display:flex !important; flex-direction:column !important; }

  /* タイトル→本文→画像→CTA（順番を制御） */
  .slp-card-head{ order:1; }
  .slp-card-text{ order:2; }
  .slp-card-media{ order:3; }
  .slp-card-cta{ order:4; }

  /* CTAは最後に下マージン */
  .slp-card-cta{
    margin-top:12px !important;
    text-align:center;
  }
}

/* ===== PC（左メディア｜右テキスト+CTA） ===== */
@media (min-width: 900px){
  figure.slp-card-row{
    display:grid !important;
    grid-template-columns: minmax(260px, 40%) 1fr; /* 左=画像 */
    grid-template-rows: auto 1fr auto;              /* タイトル / 本文 / CTA */
    column-gap: 18px;
    row-gap: 10px;
    align-items: start;
  }

  /* タイトルは上段で全幅 */
  .slp-card-head{ grid-column:1 / 3 !important; grid-row:1 !important; }

  /* メディア：左カラムで中〜下段まで */
  .slp-card-media{
    grid-column:1 / 2 !important;
    grid-row:2 / 4 !important;
    align-self:stretch !important;
    justify-self:stretch !important;
  }

  /* 本文：右カラム・中段 */
  .slp-card-text{
    grid-column:2 / 3 !important;
    grid-row:2 / 3 !important;
    align-self:start !important;
  }

  /* CTA：右カラム・下段 */
  .slp-card-cta{
    grid-column:2 / 3 !important;
    grid-row:3 / 4 !important;
    align-self:start !important;
    justify-self:center !important;
    text-align:left !important;
  }
}

/* CTAボタン縦並び */
.slp-card-cta{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
}
.slp-card-cta .btn{
  display:block;
  text-align:center;
  padding:10px 14px;
  border-radius:6px;
  font-size:.95rem;
}

/* ===== スライダー領域（アスペクト比維持） ===== */
.slp-card-media{
  position:relative;
  width:100%;
  aspect-ratio:var(--media-ratio,1/1);
  overflow:hidden;
}
.slp-snap{
  position:absolute;
  inset:0;
  overflow:hidden;
  scroll-snap-type:none !important;
  touch-action:pan-y;
}
.slp-snap__track{
  display:flex;
  height:100%;
  will-change:transform;
  transition:transform .35s ease;
}
.slp-snap__slide{
  flex:0 0 100% !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
}
.slp-snap__slide > a{ display:block; width:100%; height:100%; }
.slp-snap__slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* 矢印（SPも表示、サイズ調整済み） */
.slp-snap__nav{
  position:absolute;
  bottom:8px;
  background:rgba(255,255,255,.9);
  color:#333;
  border:none;
  border-radius:50%;
  width:28px;
  height:28px;
  line-height:28px;
  font-size:16px;
  cursor:pointer;
  opacity:.95;
  z-index:3;
  transition:background .2s, color .2s, opacity .2s;
}
.slp-snap__nav:hover{ background:#ff5fa2; color:#fff; }
.slp-snap__prev{ left:12px; }
.slp-snap__next{ right:12px; }

/* === SPは絶対配置をやめて流し込み（中央・幅100%）=== */
@media (max-width: 899px){
  .slp-card-media{
    position: relative !important;
    display: block !important;
  }
  .slp-card-media .slp-snap{
    position: static !important;     /* ← これが肝。absolute をやめる */
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 auto !important;       /* 親幅に対して中央 */
    overflow: hidden !important;
    touch-action: pan-y;
  }
  .slp-card-media .slp-snap__track{
    display: flex !important;
    height: 100% !important;
    will-change: transform;
    transition: transform .35s ease;
  }
  .slp-card-media .slp-snap__slide{
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
  }
  .slp-card-media .slp-snap__slide > a{ display:block; width:100%; height:100%; }
  .slp-card-media .slp-snap__slide img{
    display:block; width:100%; height:100%;
    object-fit: cover; object-position: center;
  }
}

/* ===== PC：CTAを本文に対して縦中央寄せ ===== */
@media (min-width: 900px){
  .slp-card-cta{
    align-self: center !important;    /* ←縦方向の中央寄せ */
    justify-self: center !important;   /* 左右方向は本文の左寄せ */
  }
}

/* ===== スマホ：画像（スライダー）を中央寄せ ===== */
@media (max-width: 899px){
  .slp-card-media{
    display: flex;
    justify-content: center;  /* 横中央 */
    align-items: center;      /* 縦中央（高さ調整の保険） */
  }
  .slp-card-media img,
  .slp-card-media .slp-snap__track{
    margin: 0 auto;           /* 画像・スライダー中央寄せ */
  }
}

/* SP時：絶対配置の .slp-snap を中央に固定 */
@media (max-width: 899px){
  .slp-card-media{ position: relative; }           /* 念のため */
  .slp-snap{
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;                    /* ← 中央基準に置く */
    right: auto;
    transform: translateX(-50%);  /* ← 幅100%を中央起点で展開 */
    width: 100%;
  }
}

/* === SPだけスライダー本体を“絶対センター”に固定 === */
@media (max-width: 899px){
  .slp-card-media{ position: relative !important; }

  /* ラッパーを中央起点に固定。親の内側余白に影響されない */
  .slp-card-media .slp-snap{
    position: absolute !important;
    top: 0; bottom: 0;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 100% !important;         /* 常に枠幅いっぱい */
    overflow: hidden !important;
    touch-action: pan-y;             /* 縦スクロールはブラウザに、横はJSへ */
  }

  /* スライドは“必ず1枚=100%”を死守 */
  .slp-card-media .slp-snap__track{
    height: 100% !important;
    will-change: transform;
  }
  .slp-card-media .slp-snap__slide{
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
  }
  .slp-card-media .slp-snap__slide > a{ display:block; width:100%; height:100%; }
  .slp-card-media .slp-snap__slide img{
    display:block; width:100%; height:100%;
    object-fit: cover; object-position: center;
  }
	
	@media (max-width: 899px){
  .entry-content .slp-card-media .slp-snap__slide{ flex-basis:100% !important; }
}
	
/* SPは画像スライダーに上限幅を与えて中央寄せ */
@media (max-width: 899px){
  .slp-card-media{
    max-width: 320px;   /* 好みで 280〜360px など */
    margin: 0 auto;     /* 中央寄せ */
    width: 100%;
  }
}			
}

/* PC：1:1画像を正方形枠で完全表示（見切れなし） */
@media (min-width: 900px){
  .slp-card-media{
    aspect-ratio: 1 / 1 !important;  /* 正方形を維持 */
    align-self: start !important;     /* グリッドの伸縮を防止 */
    justify-self: stretch !important;
    max-height: 100%;                 /* 右カラムの高さに合わせすぎない */
  }

  .slp-snap__slide img{
    object-fit: contain !important;   /* 切らずに全体表示 */
    background: var(--slp-surface, #fff); /* 枠背景を統一（白など） */
  }
}


/* SLP: カード本文先頭の価格ピル */
.slp-card-row .slp-card-text .slp-price,
.slp-card-row .slp-card-text [data-slp="price"]{
  display:inline-block;
  box-sizing:border-box;
  padding:4px 10px;
  margin:0 0 8px;               /* 既存の p {margin:0!important;} を個別に補う */
  background:#fff5f8;
  border:1px solid #f0ccd6;
  color:#7a1b33;
  font-weight:700;
  font-size:.92rem;
  line-height:1;
  border-radius:999px;
  white-space:nowrap;
}
.slp-card-row .slp-card-text .slp-price::before,
.slp-card-row .slp-card-text [data-slp="price"]::before{
  content:"参考価格";
  display:inline-block;
  margin-right:6px;
  padding:2px 8px;
  font-size:.84em;
  font-weight:700;
  background:#ffe9f1;
  color:#7a1b33;
  border-radius:999px;
}
.slp-card-row .slp-card-text .slp-price small,
.slp-card-row .slp-card-text [data-slp="price"] small{
  margin-left:6px;
  font-weight:600;
  color:#8a7a6f;
  font-size:.88em;
}
@media (max-width:768px){
  .slp-card-row .slp-card-text .slp-price,
  .slp-card-row .slp-card-text [data-slp="price"]{ font-size:.9rem; }
}

/* SLP: タイトル下の価格ピル */
.slp-card-head .slp-price,
.slp-card-head [data-slp="price"]{
  display:inline-block;
  box-sizing:border-box;
  padding:4px 10px;
  margin-top:4px;
  background:#fff5f8;
  border:1px solid #f0ccd6;
  color:#7a1b33;
  font-weight:700;
  font-size:.9rem;
  line-height:1.2;
  border-radius:999px;
}
.slp-card-head .slp-price::before,
.slp-card-head [data-slp="price"]::before{
  content:"参考価格";
  display:inline-block;
  margin-right:6px;
  padding:2px 8px;
  font-size:.8em;
  font-weight:700;
  background:#ffe9f1;
  color:#7a1b33;
  border-radius:999px;
}
.slp-card-head .slp-price small,
.slp-card-head [data-slp="price"] small{
  margin-left:6px;
  font-weight:600;
  color:#8a7a6f;
  font-size:.88em;
}

.slp-links{list-style:none;padding:0;margin:.3em 0}
.slp-links li{margin:.4em 0}
.slp-links a{color:var(--slp-link,#704b43);text-decoration:underline}
.slp-links a:hover{opacity:.8;text-decoration:none}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
  .container .column-wrap {
    flex-direction: row;
  }
  .large-thumb-on .widget-entry-card-title {
    font-size: 12px;
  }	
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
  .container .column-wrap {
    flex-direction: row;
  }	
}