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

/************************************
** 子テーマ用のスタイルを書く
************************************/


/************************************
** クイズUI（quiz_ui）表示用スタイル
************************************/

/* クイズ表示エリア */
#quiz-ui {
  margin: 40px auto;
  max-width: 1200px;
  padding: 10px;
  display: none;
}

/* クイズ画像の配置とデザイン */
#quiz-area {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  align-items: flex-start;
}
#quiz-area img {
  max-width: 48%;
  height: auto;
  border: 2px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}
#quiz-area img:hover {
  transform: scale(1.03);
}

/* スタートボタン（中央下固定＋拡大反応付き） */
#fixed-quiz-button {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}

#start-quiz {
  padding: 20px 40px;
  font-size: 20px;
  font-weight: bold;
  background-color: #0073aa;
  color: #fff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.25s ease;
}

#start-quiz:hover {
  background-color: #005c90;
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}


/************************************
** ランダム画像ショートコード用
************************************/
.random-post-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.random-post-image {
  flex: 1 1 auto;
  max-width: 80%;
  text-align: center;
}
.random-post-image img {
  width: 100%;
  max-width: 1024px;
  height: auto;
  object-fit: cover;
}

/*==================================================
  ちょいであラボ 
==================================================*/
/* 記事・固定ページのタイトルを非表示 */
.entry-title {
  display: none;
}
/* 投稿・固定ページのカテゴリ表示を非表示 */
.entry-categories,
.cat-label,
.entry-category {
    display: none !important;
}

/* ========================================
   ちょいであラボ ローディング画面
======================================== */

#choidea-loader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999999;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100vh;

  background-color: #ffffff;

  opacity: 1;
  visibility: visible;

  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#choidea-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.choidea-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 82%;
  max-width: 440px;

  transform: translateY(-2vh);
}

.choidea-loader-image {
  display: block;
  width: 100%;
  height: auto;

  animation: choidea-loader-float 1.8s ease-in-out infinite;
}

.choidea-loader-dots {
  display: flex;
  justify-content: center;
  gap: 9px;

  margin-top: 10px;
}

.choidea-loader-dots span {
  display: block;

  width: 9px;
  height: 9px;

  border-radius: 50%;
  background-color: #ff8500;

  animation: choidea-loader-dot 1.2s ease-in-out infinite;
}

.choidea-loader-dots span:nth-child(2) {
  background-color: #58a900;
  animation-delay: 0.15s;
}

.choidea-loader-dots span:nth-child(3) {
  background-color: #0873c9;
  animation-delay: 0.3s;
}

@keyframes choidea-loader-float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes choidea-loader-dot {
  0% {
    opacity: 0.35;
    transform: scale(0.8);
  }

  30% {
    opacity: 1;
    transform: scale(1.15);
  }

  60% {
    opacity: 0.35;
    transform: scale(0.8);
  }

  100% {
    opacity: 0.35;
    transform: scale(0.8);
  }
}

/* 動きを減らす設定への対応 */
@media (prefers-reduced-motion: reduce) {
  .choidea-loader-image,
  .choidea-loader-dots span {
    animation: none;
  }
}

/* ========================================
   スマートフォン最適化
======================================== */

@media screen and (max-width: 768px) {
  .choidea-loader-inner {
    width: 88%;
    max-width: 360px;
    transform: translateY(-3vh);
  }

  .choidea-loader-dots {
    gap: 8px;
    margin-top: 6px;
  }

  .choidea-loader-dots span {
    width: 8px;
    height: 8px;
  }
}

/*==================================================
  ちょいであラボ CSS Ver.2
  ・マイページアイコン
  ・Smart Slider対策
  ・TOP商品一覧
  ・TOP商品スライダー
  ・スマホ最適化込み
==================================================*/

/*==================================================
  ここからちょいであ
  マイページアイコン Ver.2 修正版
==================================================*/

/* マイページ項目を右端へ */
.menu-item-myaccount{
    margin-left:auto !important;
}

/* リンク全体 */
.menu-item-myaccount > a{
    width:72px !important;
    height:66px !important;
    min-height:66px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    gap:10px !important;

    padding:0 !important;
    margin:0 !important;

    text-align:center !important;
    line-height:1 !important;
    text-decoration:none !important;
}

/* 丸アイコン */
.menu-item-myaccount .myicon-wrap{
    width:38px !important;
    height:38px !important;

    border-radius:50% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    background:#f3f4f6 !important;
    color:#111 !important;

    border:1px solid #d1d5db !important;
    box-sizing:border-box !important;

    margin:0 auto !important;
    padding:0 !important;

    position:relative !important;
}

/* 人型アイコン */
.menu-item-myaccount .myicon-wrap i{
    position:static !important;
    display:block !important;

    margin:0 !important;
    padding:0 !important;

    font-size:18px !important;
    line-height:1 !important;

    transform:none !important;
}

/* MY PAGE */
.menu-item-myaccount .myicon-text{
    display:block !important;

    width:100% !important;

    font-size:12px !important;
    font-weight:700 !important;
    line-height:1 !important;
    letter-spacing:.03em !important;

    color:#111 !important;
    text-align:center !important;

    margin:0 !important;
    padding:0 !important;
    white-space:nowrap !important;
}

/* ログイン中 */
body.logged-in .menu-item-myaccount .myicon-wrap{
    background:#fff !important;
    color:#22c55e !important;
    border:2px solid #22c55e !important;
}

body.logged-in .menu-item-myaccount .myicon-text{
    color:#22c55e !important;
}

/* ホバー */
.menu-item-myaccount > a:hover .myicon-wrap{
    background:#e5e7eb !important;
}

body.logged-in .menu-item-myaccount > a:hover .myicon-wrap{
    background:#22c55e !important;
    color:#fff !important;
}

/*==================================================
  ここまでちょいであ
==================================================*/


/*==================================================
  共通スマホ画像対策
  画像が画面からはみ出すのを防ぐ
==================================================*/

img,
.wp-block-image img,
figure img{
    max-width:100%;
    height:auto;
    display:block;
}

figure{
    max-width:100%;
}


/*==================================================
  Smart Slider 3 黒背景・暗さ対策
==================================================*/

#n2-ss-3,
#n2-ss-3-align,
#n2-ss-3 .n2-ss-slider,
#n2-ss-3 .n2-ss-slide,
#n2-ss-3 .n2-ss-slide-background{
    background:transparent !important;
}

#n2-ss-3 .n2-ss-slide-background-image{
    opacity:1 !important;
    filter:none !important;
}

#n2-ss-3 .n2-ss-slide-background:before,
#n2-ss-3 .n2-ss-slide-background:after{
    display:none !important;
    background:none !important;
    opacity:0 !important;
}


/*==================================================
  TOP 商品一覧
==================================================*/

.choidea-product-slider{
    width:100vw;
    margin-left:calc(50% - 50vw);

    padding:30px 20px;

    display:flex;
    gap:28px;

    overflow-x:auto;
    scroll-behavior:smooth;
    scrollbar-width:none;

    background:#fafafa;
}

.choidea-product-slider::-webkit-scrollbar{
    display:none;
}

.choidea-card{
    flex:0 0 360px;

    text-decoration:none;
    color:#222;

    transition:.25s;
}

.choidea-card img{
    width:100%;
    border-radius:18px;
    display:block;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
}

.choidea-card:hover{
    transform:translateY(-8px) scale(1.04);
}

.choidea-card p{
    text-align:center;
    margin-top:14px;
    font-size:18px;
    font-weight:700;
}


/*==================================================
  TOP 商品スライダー
==================================================*/

.choidea-top-slider-section{
    width:100vw;
    margin-left:calc(50% - 50vw);

    padding:28px 0 42px;

    background:#f6f7f9;
    overflow:hidden;
}

.choidea-top-slider-head{
    text-align:center;
    margin-bottom:12px;
}

.choidea-top-slider-head span{
    display:block;
    font-size:20px;
    letter-spacing:.05em;
    font-weight:800;
    color:#ff8a00;
    margin-bottom:2px;
}

.choidea-top-slider-head h2{
    margin:0;
    font-size:40px;
    font-weight:900;
    line-height:1.15;
    letter-spacing:-.02em;
    color:#10213f;
}

.choidea-top-slider-track{
    display:flex;
    gap:32px;

    overflow-x:auto;

    padding:22px 30px 38px;

    scroll-snap-type:x mandatory;
    scrollbar-width:none;
}

.choidea-top-slider-track::-webkit-scrollbar{
    display:none;
}

.choidea-top-slider-card{
    flex:0 0 620px;

    scroll-snap-align:center;

    text-decoration:none;
    color:#10213f;

    transition:.25s ease;
}

.choidea-top-slider-card:hover{
    transform:translateY(-8px) scale(1.04);
}

.choidea-top-slider-image{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 12px 28px rgba(0,0,0,.16);
}

.choidea-top-slider-image img{
    width:100%;
    height:360px;
    object-fit:cover;
    display:block;
}

.choidea-top-slider-title{
    margin-top:18px;
    text-align:center;
    font-size:26px;
    font-weight:900;
    line-height:1.35;
    letter-spacing:.02em;
    color:#10213f;
}


/*==================================================
  タブレット対応 1024px以下
==================================================*/

@media screen and (max-width:1024px){

    #quiz-area img{
        max-width:100%;
    }

    #start-quiz{
        font-size:15px;
        padding:10px 18px;
    }

    .choidea-top-slider-card{
        flex:0 0 520px;
    }

    .choidea-top-slider-image img{
        height:320px;
    }

}


/*==================================================
  スマホ対応 768px以下
==================================================*/

@media screen and (max-width:768px){

    /* マイページアイコン */
    .menu-item-myaccount{
        margin-left:0 !important;
    }

    .menu-item-myaccount > a{
        width:68px !important;
        min-height:64px !important;
        padding:6px 0 8px !important;
    }

    .menu-item-myaccount .myicon-wrap{
        width:36px !important;
        height:36px !important;
        margin-bottom:8px !important;
    }

    .menu-item-myaccount .myicon-wrap i{
        font-size:16px !important;
    }

    .menu-item-myaccount .myicon-text{
        font-size:11px !important;
    }

    /* スマホ共通：画像を画面内に収める */
    .entry-content img,
    .wp-block-image img,
    .wp-block-cover img{
        max-width:100% !important;
        height:auto !important;
    }

    /* TOP商品一覧 */
    .choidea-product-slider{
        padding:22px 14px 30px;
        gap:18px;
    }

    .choidea-card{
        flex:0 0 82vw;
    }

    .choidea-card:hover{
        transform:none;
    }

    .choidea-card p{
        font-size:16px;
        margin-top:10px;
    }

    /* TOP商品スライダー */
    .choidea-top-slider-section{
        padding:24px 0 34px;
    }

    .choidea-top-slider-head{
        margin-bottom:10px;
        padding:0 16px;
    }

    .choidea-top-slider-head span{
        font-size:16px;
        letter-spacing:.06em;
    }

    .choidea-top-slider-head h2{
        font-size:28px;
    }

    .choidea-top-slider-track{
        gap:18px;
        padding:18px 16px 30px;
        scroll-snap-type:x mandatory;
    }

    .choidea-top-slider-card{
        flex:0 0 86vw;
    }

    .choidea-top-slider-card:hover{
        transform:none;
    }

    .choidea-top-slider-image{
        border-radius:18px;
    }

    .choidea-top-slider-image img{
        width:100%;
        height:auto;
        aspect-ratio:16 / 10;
        object-fit:cover;
    }

    .choidea-top-slider-title{
        margin-top:12px;
        font-size:20px;
        line-height:1.35;
    }

    #start-quiz{
        font-size:14px;
        padding:8px 16px;
    }

}


/*==================================================
  小型スマホ対応 480px以下
==================================================*/

@media screen and (max-width:480px){

    .menu-item-myaccount > a{
        width:62px !important;
        min-height:60px !important;
        padding:5px 0 7px !important;
    }

    .menu-item-myaccount .myicon-wrap{
        width:34px !important;
        height:34px !important;
        margin-bottom:7px !important;
    }

    .menu-item-myaccount .myicon-text{
        font-size:10px !important;
    }

    .choidea-top-slider-head h2{
        font-size:24px;
    }

    .choidea-top-slider-head span{
        font-size:14px;
    }

    .choidea-top-slider-card{
        flex:0 0 88vw;
    }

    .choidea-top-slider-title{
        font-size:18px;
    }

    .choidea-card{
        flex:0 0 86vw;
    }

    #start-quiz{
        font-size:13px;
        padding:6px 12px;
        bottom:15px;
        right:15px;
    }

}

/*==================================================
  スマホ用：ヘッダーメニュー横並び調整
  目的：
  ・スマホでカードが縦積みになるのを防ぐ
  ・TOP / SHOP / ABOUT / NEWS / CONTACT / MY PAGE を横並びにする
  ・横スクロールで見せる
==================================================*/

@media screen and (max-width:768px){

    /* メニュー全体を横並びにする */
    .navi-in > ul,
    .menu-header-container > ul,
    .menu-header-container .menu,
    #navi .menu{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:center !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        gap:10px !important;

        padding:10px 12px !important;

        white-space:nowrap !important;

        scrollbar-width:none !important;
    }

    .navi-in > ul::-webkit-scrollbar,
    .menu-header-container > ul::-webkit-scrollbar,
    .menu-header-container .menu::-webkit-scrollbar,
    #navi .menu::-webkit-scrollbar{
        display:none !important;
    }

    /* 各メニューカードをスマホ用に小さくする */
    .navi-in > ul > li,
    .menu-header-container .menu > li,
    #navi .menu > li{
        flex:0 0 auto !important;
        width:auto !important;
        margin:0 !important;
    }

    /* 通常メニューのカードサイズ調整 */
    .menu-card-icon{
        font-size:20px !important;
        line-height:1 !important;
    }

    .menu-card-text strong{
        font-size:13px !important;
        line-height:1.1 !important;
    }

    .menu-card-text small{
        font-size:10px !important;
        line-height:1.1 !important;
    }

    /* マイページだけは既存の形を維持しつつ横並びに収める */
    .menu-item-myaccount{
        margin-left:0 !important;
        flex:0 0 auto !important;
    }

    .menu-item-myaccount > a{
        width:60px !important;
        height:58px !important;
        min-height:58px !important;
        gap:7px !important;
    }

    .menu-item-myaccount .myicon-wrap{
        width:34px !important;
        height:34px !important;
    }

    .menu-item-myaccount .myicon-wrap i{
        font-size:16px !important;
    }

    .menu-item-myaccount .myicon-text{
        font-size:10px !important;
    }

}
/*==================================================
  スマホ用：ヘッダー側のメニュー重複のみ修正
==================================================*/

@media screen and (max-width:768px){

    /* スマホで同じヘッダーメニューが2段出る場合、2つ目以降を非表示 */
    #navi .menu > li:nth-child(n+7){
        display:none !important;
    }

}


/*==================================================
  ちょいであラボ NEWS一覧デザイン
  対象：CSSクラス「choidea-news-list」を付けた投稿一覧ブロックのみ
  目的：
  ・1記事ずつ横長リスト表示
  ・左：日付
  ・中央：記事タイトル
  ・右：もっと見る
  ・画像なし、余白少なめ、ミニマルデザイン
  ・スマホ最適化込み
==================================================*/


/*==================================================
  NEWS一覧 全体
==================================================*/

.choidea-news-list{
    width:100%;
    max-width:1100px;
    margin:40px auto 0;
}


/*==================================================
  NEWS記事カード
  各記事を横長の1行リスト風にする
==================================================*/

.choidea-news-list article,
.choidea-news-list .uagb-post__inner-wrap,
.choidea-news-list .uagb-post-grid-byline,
.choidea-news-list .uagb-post__text{
    box-shadow:none !important;
    background:transparent !important;
}


/*==================================================
  NEWS記事1件
==================================================*/

.choidea-news-list .uagb-post__inner-wrap{

    display:grid !important;

    grid-template-columns:160px 1fr 170px;

    align-items:center;

    padding:28px 0 !important;

    min-height:90px;

    background:transparent !important;

    box-shadow:none !important;

    border-top:1px solid #e5e5e5 !important;

    border-bottom:1px solid #e5e5e5 !important;

    margin-top:-1px;

}


/*==================================================
  投稿日
  左側に表示
==================================================*/

.choidea-news-list .uagb-post-grid-byline{
    grid-column:1;
    grid-row:1;

    margin:0 !important;
    padding:0 !important;

    font-size:15px !important;
    font-weight:500;
    color:#333333;
    line-height:1.4;
}


/*==================================================
  コメント数・著者など不要なメタ情報を非表示
==================================================*/

.choidea-news-list .uagb-post__comment,
.choidea-news-list .uagb-post__author,
.choidea-news-list .uagb-post__taxonomy,
.choidea-news-list .uagb-post__meta{
    display:none !important;
}


/*==================================================
  記事タイトル
  中央左寄せ
==================================================*/

.choidea-news-list .uagb-post__title{
    grid-column:2;
    grid-row:1;

    margin:0 !important;
    padding:0 !important;

    font-size:20px !important;
    font-weight:800 !important;
    line-height:1.4 !important;
    color:#111111 !important;
}

.choidea-news-list .uagb-post__title a{
    color:#111111 !important;
    text-decoration:none !important;
}


/*==================================================
  抜粋文
  今回のNEWS一覧では非表示
  ※表示したい場合は display:none を削除
==================================================*/

.choidea-news-list .uagb-post__excerpt{
    display:none !important;
}


/*==================================================
  もっと見るボタン
  右端に配置
==================================================*/

.choidea-news-list .uagb-post__cta{
    grid-column:3;
    grid-row:1;

    margin:0 !important;
    padding:0 !important;

    text-align:right !important;
}

.choidea-news-list .uagb-post__cta a{
    display:inline-flex !important;
    align-items:center;
    justify-content:flex-end;

    padding:0 !important;
    border:none !important;
    background:transparent !important;

    font-size:15px !important;
    font-weight:700 !important;
    color:#111111 !important;
    text-decoration:none !important;
}


/*==================================================
  もっと見るの右に矢印を追加
==================================================*/

.choidea-news-list .uagb-post__cta a::after{
    content:"›";
    margin-left:14px;

    font-size:26px;
    font-weight:400;
    line-height:1;
    color:#ff8a00;
}


/*==================================================
  ホバー時
==================================================*/

.choidea-news-list .uagb-post__inner-wrap:hover .uagb-post__title a,
.choidea-news-list .uagb-post__inner-wrap:hover .uagb-post__cta a{
    color:#ff8a00 !important;
}


/*==================================================
  タブレット対応 1024px以下
==================================================*/

@media screen and (max-width:1024px){

    .choidea-news-list{
        max-width:92%;
    }

    .choidea-news-list .uagb-post__inner-wrap{
        grid-template-columns:130px 1fr 130px;
        padding:24px 0 !important;
    }

    .choidea-news-list .uagb-post__title{
        font-size:18px !important;
    }

}


/*==================================================
  スマホ対応 768px以下
  ・縦に詰まりすぎないよう2段構成
  ・上：日付
  ・中：タイトル
  ・下：もっと見る
==================================================*/

@media screen and (max-width:768px){

    .choidea-news-list{
        max-width:90%;
        margin:28px auto 0;
    }

    .choidea-news-list .uagb-post__inner-wrap{
        display:grid !important;
        grid-template-columns:1fr auto;
        grid-template-rows:auto auto;

        padding:20px 0 !important;
        min-height:auto;
    }

    .choidea-news-list .uagb-post-grid-byline{
        grid-column:1 / 3;
        grid-row:1;

        margin-bottom:8px !important;

        font-size:13px !important;
        color:#555555;
    }

    .choidea-news-list .uagb-post__title{
        grid-column:1;
        grid-row:2;

        font-size:17px !important;
        line-height:1.45 !important;
    }

    .choidea-news-list .uagb-post__cta{
        grid-column:2;
        grid-row:2;

        align-self:center;
        padding-left:16px !important;
    }

    .choidea-news-list .uagb-post__cta a{
        font-size:0 !important;
    }

    .choidea-news-list .uagb-post__cta a::after{
        content:"›";
        margin-left:0;
        font-size:28px;
        color:#ff8a00;
    }

}


/*==================================================
  小型スマホ対応 480px以下
==================================================*/

@media screen and (max-width:480px){

    .choidea-news-list{
        max-width:88%;
    }

    .choidea-news-list .uagb-post__inner-wrap{
        padding:18px 0 !important;
    }

    .choidea-news-list .uagb-post__title{
        font-size:16px !important;
    }

    .choidea-news-list .uagb-post-grid-byline{
        font-size:12px !important;
    }

}



/*==================================================
  ちょいであラボ
  TCG商品手札デザイン Ver.1.0
----------------------------------------------------
【対象】
・WooCommerceの商品ショートコード
・class="choidea-tcg-hand" を付けた商品一覧だけ

【PC表示】
・商品カードを手札のように重ねて扇状表示
・赤、青、黄、緑、紫のカラーフレーム
・ホバーしたカードだけ手前へ浮く
・商品画像、商品名、価格を表示
・カートボタンは非表示
・カードクリックで商品ページへ移動

【スマホ表示】
・扇状表示を解除
・横スワイプ式に変更
・1商品ずつ見やすいカードサイズ
・横スクロール位置を自動で揃える
==================================================*/


/*==================================================
  01 手札エリア全体
==================================================*/

.choidea-tcg-hand{
    width:100%;
    max-width:1180px;
    margin:40px auto 80px;
    padding:70px 20px 50px;
    overflow:visible;
}

/* WooCommerce標準のグリッド指定を解除 */
.choidea-tcg-hand ul.products{
    position:relative;
    display:flex !important;
    align-items:flex-end;
    justify-content:center;

    width:100%;
    min-height:520px;

    margin:0 !important;
    padding:0 !important;

    list-style:none;
}


/*==================================================
  02 商品カード共通
==================================================*/

.choidea-tcg-hand ul.products li.product{
    position:relative !important;

    float:none !important;
    clear:none !important;

    width:260px !important;
    min-width:260px !important;
    max-width:260px !important;

    margin:0 -58px !important;
    padding:8px !important;

    background:#ffffff;
    border:5px solid #cccccc;
    border-radius:18px;

    box-shadow:
        0 18px 36px rgba(0,0,0,.20),
        0 4px 10px rgba(0,0,0,.10);

    overflow:hidden;

    transform-origin:center 115%;
    transition:
        transform .32s ease,
        box-shadow .32s ease,
        filter .32s ease,
        z-index 0s;

    box-sizing:border-box;
}

/* カード内リンク */
.choidea-tcg-hand ul.products li.product
.woocommerce-LoopProduct-link{
    display:block;
    height:100%;
    color:#111111;
    text-decoration:none;
}


/*==================================================
  03 商品画像
==================================================*/

.choidea-tcg-hand ul.products li.product img{
    width:100% !important;
    height:320px !important;

    margin:0 !important;

    display:block;
    object-fit:cover;

    border-radius:11px;
    background:#f4f4f4;
}


/*==================================================
  04 商品名
==================================================*/

.choidea-tcg-hand ul.products li.product
.woocommerce-loop-product__title{
    min-height:58px;

    margin:14px 8px 4px !important;
    padding:0 !important;

    font-size:17px !important;
    font-weight:800 !important;
    line-height:1.35 !important;

    color:#10213f !important;
    text-align:center;
}


/*==================================================
  05 商品価格
==================================================*/

.choidea-tcg-hand ul.products li.product .price{
    display:block;

    margin:6px 8px 10px !important;

    font-size:16px !important;
    font-weight:800 !important;

    color:#111111 !important;
    text-align:center;
}


/*==================================================
  06 カートボタンを非表示
  カードクリックで商品ページへ直接移動させる
==================================================*/

.choidea-tcg-hand ul.products li.product .button,
.choidea-tcg-hand ul.products li.product
.added_to_cart{
    display:none !important;
}


/*==================================================
  07 5枚のカードを扇状に配置
==================================================*/

/* 1枚目：赤 */
.choidea-tcg-hand ul.products li.product:nth-child(1){
    border-color:#e53935;
    transform:translateY(40px) rotate(-14deg);
    z-index:1;
}

/* 2枚目：青 */
.choidea-tcg-hand ul.products li.product:nth-child(2){
    border-color:#1e88e5;
    transform:translateY(15px) rotate(-7deg);
    z-index:2;
}

/* 3枚目：黄 */
.choidea-tcg-hand ul.products li.product:nth-child(3){
    border-color:#fbc02d;
    transform:translateY(0) rotate(0deg);
    z-index:3;
}

/* 4枚目：緑 */
.choidea-tcg-hand ul.products li.product:nth-child(4){
    border-color:#43a047;
    transform:translateY(15px) rotate(7deg);
    z-index:2;
}

/* 5枚目：紫 */
.choidea-tcg-hand ul.products li.product:nth-child(5){
    border-color:#8e24aa;
    transform:translateY(40px) rotate(14deg);
    z-index:1;
}


/*==================================================
  08 枠色ごとの発光
==================================================*/

.choidea-tcg-hand ul.products li.product:nth-child(1):hover{
    box-shadow:
        0 28px 60px rgba(229,57,53,.38),
        0 10px 24px rgba(0,0,0,.25);
}

.choidea-tcg-hand ul.products li.product:nth-child(2):hover{
    box-shadow:
        0 28px 60px rgba(30,136,229,.38),
        0 10px 24px rgba(0,0,0,.25);
}

.choidea-tcg-hand ul.products li.product:nth-child(3):hover{
    box-shadow:
        0 28px 60px rgba(251,192,45,.42),
        0 10px 24px rgba(0,0,0,.25);
}

.choidea-tcg-hand ul.products li.product:nth-child(4):hover{
    box-shadow:
        0 28px 60px rgba(67,160,71,.38),
        0 10px 24px rgba(0,0,0,.25);
}

.choidea-tcg-hand ul.products li.product:nth-child(5):hover{
    box-shadow:
        0 28px 60px rgba(142,36,170,.38),
        0 10px 24px rgba(0,0,0,.25);
}


/*==================================================
  09 ホバー時
  選択したカードだけ前へ出す
==================================================*/

.choidea-tcg-hand ul.products li.product:hover{
    z-index:20 !important;

    transform:
        translateY(-55px)
        rotate(0deg)
        scale(1.10) !important;

    filter:brightness(1.03);
}

/* 選択していないカードを少し暗くする */
.choidea-tcg-hand ul.products:hover li.product:not(:hover){
    filter:brightness(.82) saturate(.80);
}


/*==================================================
  10 カード上部の小さな装飾
==================================================*/

.choidea-tcg-hand ul.products li.product::before{
    content:"CHOIDEA TCG";

    position:absolute;
    top:15px;
    left:18px;
    z-index:3;

    padding:5px 9px;

    border-radius:999px;

    background:rgba(0,0,0,.72);
    color:#ffffff;

    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;

    pointer-events:none;
}


/*==================================================
  11 タブレット対応 1024px以下
==================================================*/

@media screen and (max-width:1024px){

    .choidea-tcg-hand{
        max-width:920px;
        padding-top:55px;
    }

    .choidea-tcg-hand ul.products{
        min-height:450px;
    }

    .choidea-tcg-hand ul.products li.product{
        width:220px !important;
        min-width:220px !important;
        max-width:220px !important;

        margin:0 -48px !important;
    }

    .choidea-tcg-hand ul.products li.product img{
        height:270px !important;
    }

    .choidea-tcg-hand ul.products li.product
    .woocommerce-loop-product__title{
        font-size:15px !important;
    }

}


/*==================================================
  12 スマホ対応 768px以下
  扇状を解除して横スワイプ式へ変更
==================================================*/

@media screen and (max-width:768px){

    .choidea-tcg-hand{
        width:100vw;
        max-width:none;

        margin:24px 0 48px;
        margin-left:calc(50% - 50vw);

        padding:20px 0 30px;

        overflow:hidden;
    }

    .choidea-tcg-hand ul.products{
        position:relative;

        display:flex !important;
        align-items:stretch;
        justify-content:flex-start;

        min-height:auto;

        gap:18px;

        overflow-x:auto;
        overflow-y:hidden;

        padding:24px 8vw 38px !important;

        scroll-snap-type:x mandatory;
        scroll-padding-left:8vw;
        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;
    }

    .choidea-tcg-hand ul.products::-webkit-scrollbar{
        display:none;
    }

    .choidea-tcg-hand ul.products li.product,
    .choidea-tcg-hand ul.products li.product:nth-child(1),
    .choidea-tcg-hand ul.products li.product:nth-child(2),
    .choidea-tcg-hand ul.products li.product:nth-child(3),
    .choidea-tcg-hand ul.products li.product:nth-child(4),
    .choidea-tcg-hand ul.products li.product:nth-child(5){
        flex:0 0 78vw !important;

        width:78vw !important;
        min-width:78vw !important;
        max-width:78vw !important;

        margin:0 !important;

        transform:none !important;
        filter:none !important;

        scroll-snap-align:center;
        z-index:1;
    }

    .choidea-tcg-hand ul.products li.product:hover{
        transform:translateY(-8px) scale(1.02) !important;
        filter:none !important;
    }

    .choidea-tcg-hand ul.products:hover
    li.product:not(:hover){
        filter:none;
    }

    .choidea-tcg-hand ul.products li.product img{
        height:auto !important;
        aspect-ratio:1 / 1;
        object-fit:cover;
    }

    .choidea-tcg-hand ul.products li.product
    .woocommerce-loop-product__title{
        min-height:auto;
        font-size:17px !important;
    }

    .choidea-tcg-hand ul.products li.product .price{
        font-size:16px !important;
    }

}


/*==================================================
  13 小型スマホ対応 480px以下
==================================================*/

@media screen and (max-width:480px){

    .choidea-tcg-hand ul.products{
        gap:14px;
        padding-left:7vw !important;
        padding-right:7vw !important;
    }

    .choidea-tcg-hand ul.products li.product,
    .choidea-tcg-hand ul.products li.product:nth-child(1),
    .choidea-tcg-hand ul.products li.product:nth-child(2),
    .choidea-tcg-hand ul.products li.product:nth-child(3),
    .choidea-tcg-hand ul.products li.product:nth-child(4),
    .choidea-tcg-hand ul.products li.product:nth-child(5){
        flex-basis:84vw !important;

        width:84vw !important;
        min-width:84vw !important;
        max-width:84vw !important;
    }

    .choidea-tcg-hand ul.products li.product{
        border-width:4px;
        border-radius:16px;
    }

    .choidea-tcg-hand ul.products li.product::before{
        top:13px;
        left:15px;
        font-size:9px;
    }

}

/*==================================================
  ちょいであラボ
  TCG手札オープン演出 Ver.2.0
----------------------------------------------------
【対象】
・choidea-tcg-hand を付けたWooCommerce商品一覧

【動作】
・JavaScriptが有効な場合だけアニメーションを準備
・手札エリアが画面内に入った瞬間に展開
・5枚が中央から順番に扇状へ開く
・展開後は既存のホバー演出が利用可能

【安全設計】
・JavaScriptが動かなければ通常の手札表示を維持
・ページ全体や他の商品一覧には影響しない
==================================================*/


/*==================================================
  01 各カードの最終位置・開始位置・待ち時間
==================================================*/

/* 1枚目：赤 */
.choidea-tcg-hand.choidea-hand-animate ul.products li.product:nth-child(1){
    --choidea-start-x: 290px;
    --choidea-final-y: 40px;
    --choidea-final-rotate: -14deg;
    --choidea-open-delay: .05s;
}

/* 2枚目：青 */
.choidea-tcg-hand.choidea-hand-animate ul.products li.product:nth-child(2){
    --choidea-start-x: 145px;
    --choidea-final-y: 15px;
    --choidea-final-rotate: -7deg;
    --choidea-open-delay: .16s;
}

/* 3枚目：黄 */
.choidea-tcg-hand.choidea-hand-animate ul.products li.product:nth-child(3){
    --choidea-start-x: 0px;
    --choidea-final-y: 0px;
    --choidea-final-rotate: 0deg;
    --choidea-open-delay: .27s;
}

/* 4枚目：緑 */
.choidea-tcg-hand.choidea-hand-animate ul.products li.product:nth-child(4){
    --choidea-start-x: -145px;
    --choidea-final-y: 15px;
    --choidea-final-rotate: 7deg;
    --choidea-open-delay: .38s;
}

/* 5枚目：紫 */
.choidea-tcg-hand.choidea-hand-animate ul.products li.product:nth-child(5){
    --choidea-start-x: -290px;
    --choidea-final-y: 40px;
    --choidea-final-rotate: 14deg;
    --choidea-open-delay: .49s;
}


/*==================================================
  02 アニメーション開始前
  5枚を中央付近へ重ねて待機
==================================================*/

.choidea-tcg-hand.choidea-hand-animate:not(.is-open)
ul.products li.product{
    opacity:0;

    transform:
        translateX(var(--choidea-start-x, 0px))
        translateY(80px)
        rotate(0deg)
        scale(.88) !important;

    transition:
        transform .82s cubic-bezier(.17,.84,.28,1.08),
        opacity .38s ease;

    transition-delay:var(--choidea-open-delay, 0s);

    pointer-events:none;
}


/*==================================================
  03 画面内に入った後
  中央の重なりから扇状へ展開
==================================================*/

.choidea-tcg-hand.choidea-hand-animate.is-open
ul.products li.product{
    opacity:1;

    transform:
        translateY(var(--choidea-final-y, 0px))
        rotate(var(--choidea-final-rotate, 0deg))
        scale(1) !important;

    transition:
        transform .82s cubic-bezier(.17,.84,.28,1.08),
        opacity .38s ease,
        box-shadow .3s ease,
        filter .3s ease;

    transition-delay:var(--choidea-open-delay, 0s);

    pointer-events:auto;
}


/*==================================================
  04 展開完了後のホバー
  選択カードをまっすぐ手前へ出す
==================================================*/

.choidea-tcg-hand.choidea-hand-animate.is-open
ul.products li.product:hover{
    z-index:30 !important;

    transform:
        translateY(-55px)
        rotate(0deg)
        scale(1.10) !important;

    transition-delay:0s !important;
}


/*==================================================
  05 選択していないカードを少し暗くする
==================================================*/

.choidea-tcg-hand.choidea-hand-animate.is-open
ul.products:hover li.product:not(:hover){
    filter:brightness(.82) saturate(.82);
}


/*==================================================
  06 タブレット対応 1024px以下
==================================================*/

@media screen and (max-width:1024px){

    .choidea-tcg-hand.choidea-hand-animate
    ul.products li.product:nth-child(1){
        --choidea-start-x:220px;
    }

    .choidea-tcg-hand.choidea-hand-animate
    ul.products li.product:nth-child(2){
        --choidea-start-x:110px;
    }

    .choidea-tcg-hand.choidea-hand-animate
    ul.products li.product:nth-child(4){
        --choidea-start-x:-110px;
    }

    .choidea-tcg-hand.choidea-hand-animate
    ul.products li.product:nth-child(5){
        --choidea-start-x:-220px;
    }

}


/*==================================================
  07 スマホ対応 768px以下
----------------------------------------------------
  スマホでは横スワイプを維持。
  扇状ではなく下から順番に表示する。
==================================================*/

@media screen and (max-width:768px){

    .choidea-tcg-hand.choidea-hand-animate
    ul.products li.product:nth-child(1),
    .choidea-tcg-hand.choidea-hand-animate
    ul.products li.product:nth-child(2),
    .choidea-tcg-hand.choidea-hand-animate
    ul.products li.product:nth-child(3),
    .choidea-tcg-hand.choidea-hand-animate
    ul.products li.product:nth-child(4),
    .choidea-tcg-hand.choidea-hand-animate
    ul.products li.product:nth-child(5){
        --choidea-start-x:0px;
        --choidea-final-y:0px;
        --choidea-final-rotate:0deg;
    }

    .choidea-tcg-hand.choidea-hand-animate:not(.is-open)
    ul.products li.product{
        opacity:0;

        transform:
            translateY(34px)
            scale(.96) !important;
    }

    .choidea-tcg-hand.choidea-hand-animate.is-open
    ul.products li.product{
        opacity:1;

        transform:
            translateY(0)
            rotate(0deg)
            scale(1) !important;
    }

    .choidea-tcg-hand.choidea-hand-animate.is-open
    ul.products li.product:hover{
        transform:
            translateY(-6px)
            rotate(0deg)
            scale(1.01) !important;
    }

    .choidea-tcg-hand.choidea-hand-animate.is-open
    ul.products:hover li.product:not(:hover){
        filter:none;
    }

}


/*==================================================
  08 動きを減らす設定への対応
==================================================*/

@media (prefers-reduced-motion:reduce){

    .choidea-tcg-hand.choidea-hand-animate
    ul.products li.product{
        opacity:1 !important;

        transform:
            translateY(var(--choidea-final-y, 0px))
            rotate(var(--choidea-final-rotate, 0deg))
            scale(1) !important;

        transition:none !important;
    }

}









/*==================================================
  ちょいであラボ
  左上ロゴ＋スクロール固定メニュー
==================================================*/

/* ヘッダー全体 */
#header-container {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #ffffff;
}

/* ロゴとメニューを縦に配置 */
#header-container-in {
  position: relative;
  width: 100%;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(16, 33, 63, 0.06);
}

/*==================================================
  通常時の左上ロゴ
==================================================*/

#header {
  height: 62px;
  overflow: hidden;
  transition:
    height 0.4s ease,
    opacity 0.3s ease;
}

#header-in {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* 左上にだけ表示 */
.logo-header {
  position: absolute;
  top: 15px;
  left: 28px;
  width: auto;
  margin: 0;
  padding: 0;
  line-height: 1;
  transition:
    opacity 0.25s ease,
    transform 0.4s ease;
}

/* 文字ロゴの大きさ */
.logo-header img {
  display: block;
  width: 175px;
  height: auto;
  max-height: 35px;
  margin: 0;
  object-fit: contain;
}

/*==================================================
  現在のメニュー部分
==================================================*/

#navi {
  position: relative;
  z-index: 2;
  background: #ffffff;
  transition: box-shadow 0.3s ease;
}

/*==================================================
  スクロール後
==================================================*/

/* ロゴが入っている上段を収納 */
body.choidea-header-scrolled #header {
  height: 0;
  opacity: 0;
}

/* 上へ畳まれるような動き */
body.choidea-header-scrolled .logo-header {
  opacity: 0;
  transform: translateY(-20px) scale(0.9);
}

/* メニューだけを固定ヘッダーとして残す */
body.choidea-header-scrolled #navi {
  box-shadow: 0 5px 16px rgba(16, 33, 63, 0.12);
}

/*==================================================
  スマートフォン
==================================================*/

@media screen and (max-width: 768px) {

  #header {
    height: 48px;
  }

  .logo-header {
    top: 11px;
    left: 16px;
  }

  .logo-header img {
    width: 135px;
    max-height: 27px;
  }

  body.choidea-header-scrolled #header {
    height: 0;
  }
}

/*==================================================
  WordPress管理バー表示中
==================================================*/

body.admin-bar #header-container {
  top: 32px;
}

@media screen and (max-width: 782px) {

  body.admin-bar #header-container {
    top: 46px;
  }
}

/* 動きを減らす設定への対応 */
@media (prefers-reduced-motion: reduce) {

  #header,
  .logo-header,
  #navi {
    transition: none;
  }
}