@charset "UTF-8";

/* ▼ フィルター機能向けStyle ▼ */
.distro-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 45px;
    padding: 15px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
}

.distro-filter-form label {
    font-weight: bold;
    color: #ccc;
}

.distro-filter-form select {
    padding: 4px 8px;
    background: #222;
    color: #fff;
    border: 1px solid #555;
    border-radius: 4px;
}

/* ▼ Distroカード ▼ */
.post-card.post-card--dynamic {
    position: relative;
}

.post-card.post-card--dynamic .post-card__addition {
    position: absolute;
    background-color: #ebd065;
    font-size: 1.4rem;
    border-radius: var(--kabocy-rounded-standard);
    font-family: var(--font-site-brand);
    border: 1px solid #000;
    color: #000;
    z-index: 1;
    transition: transform .3s;
}

.post-card.post-card--dynamic .post-card__addition.post-card__addition--top {
    top: -12px;
    left: -12px;
    padding: 7px 20px 64px 20px;
}

.post-card.post-card--dynamic .post-card__addition.post-card__addition--bottom {
    bottom: -12px;
    right: -12px;
    padding: 64px 20px 7px 20px;
}

.post-card.post-card--dynamic .post-card__addition-label {
    font-size: 1.2rem;
    font-weight: normal;
    opacity: .5;
    margin-right: 5px;
}

.post-card.post-card--dynamic .post-card__eyecatch {
    padding: 10px;
    margin: 0;
    background-color: #e5cb62;
    aspect-ratio: 16/10;
    border-radius: var(--kabocy-rounded-standard);
    position: relative;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #000;
}

.post-card.post-card--dynamic .post-card__eyecatch-wrap {
    padding: 10px;
    border-radius: var(--kabocy-rounded-standard);
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: #ddd;
    background-color: transparent;
    background-color: #fff;
    border: 1px solid #000;
}

.post-card.post-card--dynamic .post-card__eyecatch-image {
    object-fit: contain;
    width: 100%;
    height: 100%;
    transform: scale(1.1);
    transition: transform .3s;
}

.post-card.post-card--dynamic .post-card-property__title-container {
    position: absolute;
    bottom: -10px;
    /*! background-color: #ebd065; */
    left: -10px;
}

.post-card.post-card--dynamic .post-card-property__title-ruby {
    position: relative;
}

.post-card.post-card--dynamic .post-card-property__title {
    /*background-color: #ebd065;*/
    padding: 5px 10px;
    font-size: 1.8rem;
    border-radius: var(--kabocy-rounded-standard);
    border: 1px solid #000;
    font-family: var(--font-din);
    color: #000;
    backdrop-filter: blur(8px);
}

.post-card.post-card--dynamic .post-card-property__title-rt {
    position: absolute;
    top: -40px;
    left: 0;
    left: 2px;
    opacity: 0;
    transition: opacity .3s;
}

.post-card-property__title-container:hover .post-card-property__title-rt,
.post-card.post-card--dynamic:has(.post-card__eyecatch-image:hover) .post-card-property__title-rt {
    opacity: 1;
}

.speech-bubble.speech-bubble--style-01 {
    position: relative;
    display: inline-block;
    /*! margin: 1.5em 0; */
    padding: 7px 10px;
    /*! min-width: 120px; */
    color: #000;
    font-size: 1.4rem;
    background: #e0edff;
    background-color: #ebd065;
    border: 1px solid;
    border-radius: var(--kabocy-rounded-standard);
    width: fit-content;
}

.speech-bubble.speech-bubble--style-01::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 24px;
    margin-left: -10px;
    border: 10px solid transparent;
    border-top-width: 10px;
    border-top-style: solid;
    border-top-color: transparent;
    border-top: 10px solid #000;
}

.post-card__part-link {
    text-decoration: none;
    color: initial;
    transition: opacity .3s, color .3s, background .3s;
}

.post-card.post-card--dynamic .post-card__addition.post-card__addition--top:hover,
.post-card.post-card--dynamic:has(.post-card__eyecatch-image:hover) .post-card__addition.post-card__addition--top {
    transform: translateX(-10px) translateY(-18px);
}

.post-card.post-card--dynamic .post-card__addition.post-card__addition--bottom:hover,
.post-card.post-card--dynamic:has(.post-card__eyecatch-image:hover) .post-card__addition.post-card__addition.post-card__addition--bottom {
    transform: translateX(10px) translateY(18px);
}

.post-card.post-card--dynamic:has(.post-card__eyecatch-image:hover) .post-card__eyecatch {
    background-image: radial-gradient(circle, #e5cb62, var(--kabocy-color-secondary) 95%);
}

@media screen and (max-width: 601px) {
    .post-card.post-card--dynamic .post-card__addition.post-card__addition--top {
        padding: 2px 5px 18px 3px;
    }
    
    .post-card.post-card--dynamic .post-card__addition.post-card__addition--bottom {        
        padding: 18px 5px 2px 5px;;
    }

    .post-card.post-card--dynamic .post-card__addition.post-card__addition--top:hover,
    .post-card.post-card--dynamic:has(.post-card__eyecatch-image:hover) .post-card__addition.post-card__addition--top {
        transform: translateX(-1px) translateY(-5px);
    }

    .post-card.post-card--dynamic .post-card__addition.post-card__addition--bottom:hover,
    .post-card.post-card--dynamic:has(.post-card__eyecatch-image:hover) .post-card__addition.post-card__addition.post-card__addition--bottom {
        transform: translateX(1px) translateY(5px);
    }
    
    .post-card.post-card--dynamic .post-card__addition-label {
        font-size: 1rem;
        margin-right: 2px;
    }


    .post-card.post-card--dynamic .post-card__addition {
        font-size: 1.1rem;
    }

    .post-card.post-card--dynamic .post-card__eyecatch {
        padding: 5px;
    }

    .post-card.post-card--dynamic .post-card-property__title {
        padding: 3px 5px;
        font-size: 1.6rem;
    }

    .speech-bubble.speech-bubble--style-01 {
        font-size: 1.2rem;
    }
}

/* ▲ Distroカード ▲ */

/* =========================================
   Distro Filter – mobile‑first stylesheet
   ========================================= */

/* フォーム本体 */
.distro-filter{
    display:flex;
    flex-direction:column;      /* =スマホでは縦積み */
    gap:1rem;
    padding:1rem;
    background: #e5cb62;
    border: 1px solid #2b2825;
    border-radius:0.75rem;
}

/* セレクト1項目 */
.distro-filter__item{
   display:flex;
   flex-direction:column;       /* ラベル→セレクトを縦 */
}

/* ラベル */
.distro-filter__label{
  font-size: 1.2rem;
  color:#333;
  margin-bottom:0.25rem;
}

/* セレクト */
.distro-filter__select{
   appearance:none;
   width:100%;
   padding:0.5rem 2.5rem 0.5rem 0.75rem; /* 右に余白＝▼アイコン分 */
   font-size:1.2rem;
   line-height:1.5;
   border:1px solid #2b2825;
   border-radius:0.5rem;
   background:#fff;
   /* ▼アイコン（SVG）を背景で */
   background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23666' stroke-width='2' \
stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><polyline points='6 9 12 15 18 9'/></svg>");
   background-repeat:no-repeat;
   background-position:right 0.75rem center;
   background-size:1rem;
}

/* ボタン（モバイルでは幅100%） */
.distro-filter .btn{
   width:100%;
   padding:0.75rem 1rem;
}

.distro-filter .btn.btn--primary {
    background-color: var(--kabocy-color-primary);
    border: 1px solid #000;
    color: #fff;
    border-radius: var(--kabocy-rounded-standard);
    font-family: var(--font-site-brand);
    transition: background-color .3s, opacity .3s;
}

.btn.btn--primary:hover {
    background-color: var(--kabocy-color-tertiary);
}

.distro-filter .btn + .btn{     /* ボタン同士の間隔 */
   margin-top:0.5rem;
}

/* ───────── 640px 以上（タブレット〜PC） ───────── */
@media(min-width:640px){
   .distro-filter{
      flex-direction:row;       /* 横並び */
      flex-wrap:wrap;
      align-items:flex-end;
      gap:1rem 1.5rem;          /* 行間1rem, 列間1.5rem */
   }
   .distro-filter__item{
      width:auto;
      flex:1 1 160px;           /* 伸縮しつつ最低160px */
   }
   .distro-filter__label{
      margin-bottom:0.25rem;
   }
   .distro-filter .btn{
      padding:0.6rem 1.25rem;
   }
   .distro-filter .btn + .btn{
      margin-top:0;
      margin-left:0.75rem;      /* ボタン横並び時の間隔 */
   }
}

/* ===== トグルボタン ===== */
.distro-filter__toggle{
    display:flex;
    align-items:center;
    gap:0.4rem;
    width:100%;
    padding:0.75rem 1rem;
    font-size:1rem;
    font-weight:600;
    background:#fff;
    border:1px solid #c5cbd5;
    border-radius:0.75rem;
    cursor:pointer;
}

.distro-filter__toggle::after{
    content:"";
    display:inline-block;
    width:0.75rem;
    height:0.75rem;
    border:solid currentColor;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);          /* ▼ */
    transition:transform 0.2s ease;
}
.distro-filter__toggle[aria-expanded="true"]::after{
    transform:rotate(-135deg);        /* ▲ */
}

/* =========================================
   アコーディオン開閉アニメーション
   ========================================= */

/* 初期＝閉じた状態 */
#distro-filter-form{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(-0.5rem);
    pointer-events:none;       /* フォーカス不可 */
    transition:max-height .35s ease,
               opacity .35s ease,
               transform .35s ease;
}

/* 開いた状態（JS で付与） */
#distro-filter-form.is-open{
    max-height:1200px;         /* タクソノミー増えたらここ変える！ */
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

/* ▼ 640px 以上は常時展開（Anime無効化） */
@media(min-width:640px){
    #distro-filter-form,
    #distro-filter-form.is-open{
        max-height:none;
        opacity:1;
        transform:none;
        overflow:visible;
        pointer-events:auto;
    }
}

/* ───── 640px 以上ではボタン非表示・フォーム常時表示 ───── */
@media(min-width:640px){
    .distro-filter__toggle{ display:none; }
    #distro-filter-form[hidden]{ display:flex; }
}