@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* ========================================
   TikTok風リール 完全版
======================================== */

/* 通常表示のリール枠 */
.azisai-reels {
    width: 94%;
    height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    background: #000;
    border-radius: 22px;
    margin: 18px auto 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

/* 通常表示の1件 */
.azisai-reel-item {
    width: 100%;
    height: 480px;
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: #000;
    border-radius: 22px;
    overflow: hidden;
}

/* 通常表示では映像全体を見せる */
.azisai-reel-item video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    background: #000;
}

/* 写真 */
.azisai-reel-photo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* 下側のグラデーション */
.azisai-reel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 45%,
        rgba(0, 0, 0, .08) 65%,
        rgba(0, 0, 0, .58) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* 店名・女の子名 */
.azisai-reel-info {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 22px;
    color: #fff;
    z-index: 3;
}

.azisai-reel-shop {
    display: inline-block;
    margin-bottom: 8px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .58);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.azisai-reel-girl {
    display: block;
    color: #fff;
    font-size: 25px;
    line-height: 1.3;
    font-weight: 900;
    text-decoration: none;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
}

.azisai-reel-girl:hover,
.azisai-reel-girl:focus,
.azisai-reel-girl:visited {
    color: #fff;
    text-decoration: none;
}

/* 全画面で見るボタン */
.azisai-reel-open {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 10;
    padding: 8px 12px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, .68);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

/* ========================================
   独自の全画面モーダル
======================================== */

.azisai-reel-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    background: #000;
}

.azisai-reel-modal.is-active {
    display: block;
}

body.azisai-modal-open {
    overflow: hidden;
}

/* 上下スワイプする領域 */
.azisai-reel-modal-inner {
    width: 100%;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
}

/* 全画面の1件 */
.azisai-reel-modal-item {
    width: 100%;
    height: 100dvh;
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: #000;
    overflow: hidden;
}

/* 縦動画は画面いっぱい */
.azisai-reel-modal-item.is-portrait video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* 横動画・正方形動画は切らずに全体表示 */
.azisai-reel-modal-item.is-landscape video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    background: #000;
}

/* 全画面の写真 */
.azisai-reel-modal-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
}

/* 全画面内の情報 */
.azisai-reel-modal-item .azisai-reel-info {
    left: 18px;
    right: 70px;
    bottom: 70px;
    z-index: 5;
}

/* 閉じるボタン */
.azisai-reel-close {
    position: fixed;
    top: max(18px, env(safe-area-inset-top));
    right: 18px;
    z-index: 1000000;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: 32px;
    line-height: 46px;
    text-align: center;
}

/* ========================================
   💋 NOBINOBITO NOW 電光掲示板
======================================== */

.nobiticker {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;

    background: #181818;

    /* 細いライン */
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;

    /* 帯を少し細く */
    padding: 5px 0;

    /* リールとの間隔 */
    margin: 0 0 6px 0;
}

.nobiticker-track {
    display: inline-block;
    padding-left: 100%;
    white-space: nowrap;

    /* 14秒 → 20秒にしてゆっくり */
    animation: nobiticker-move 25s linear infinite;
}

/* 💋 NOBINOBITO NOW */
.nobiticker-title {
    color: #ff718c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* ✦ */
.nobiticker-mark {
    color: #ff718c;
    font-size: 11px;
    margin: 0 11px;
}

/* 流れるコメント */
.nobiticker-comment {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
}

/* 右 → 左 */
@keyframes nobiticker-move {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.azisai-like-btn{
    width:auto !important;
    min-width:88px !important;
    height:44px !important;
    padding:0 13px !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:6px;
    border-radius:999px !important;
    font-size:15px !important;
    font-weight:800 !important;
    white-space:nowrap;
}

.azisai-gallery-media{
    position:relative !important;
}

.azisai-gallery-like{
    position:absolute;
    right:8px;
    bottom:8px;
    z-index:20;
    min-width:72px;
    height:34px;
    padding:0 9px;
    border:0;
    border-radius:999px;
    background:rgba(0,0,0,.65);
    color:#fff;
    font-size:12px;
    font-weight:800;
}

.azisai-love-pop{
    animation:azisaiLovePop .42s ease;
}

@keyframes azisaiLovePop{
    0%{transform:scale(1);}
    40%{transform:scale(1.28);}
    70%{transform:scale(.94);}
    100%{transform:scale(1);}
}

.azisai-kawaii-pop{
    position:absolute;
    z-index:999999;
    pointer-events:none;
    opacity:0;
    white-space:nowrap;
    color:#ff3b8d;
    font-size:20px;
    font-weight:900;
    text-shadow:0 2px 3px #fff;
    transform:translate(-50%,0) scale(.7);
}

.azisai-kawaii-pop.is-show{
    animation:azisaiKawaiiFloat 1s ease forwards;
}

@keyframes azisaiKawaiiFloat{
    0%{
        opacity:0;
        transform:translate(-50%,8px) scale(.7);
    }
    25%{
        opacity:1;
        transform:translate(-50%,-8px) scale(1.15);
    }
    60%{
        opacity:1;
        transform:translate(-50%,-35px) scale(1);
    }
    100%{
        opacity:0;
        transform:translate(-50%,-70px) scale(.9);
    }
}