/**
 * Coupon Block - Default Pattern CSS
 */

/* ==========================================================================
   クーポンブロック基本スタイル
   ========================================================================== */

.coupon-block--default {
    margin: 2rem 0;
}

/* ==========================================================================
   クーポンリボン（提供されたCSS）
   ========================================================================== */

.coupon-rebon01 {
    position: relative;
    overflow: hidden;
}

.coupon-rebon01 figure {
    margin-top: 0 !important;
}

.coupon-rebon01 p {
    text-align: center;
    width: 410px;
    transform: rotate(-45deg);
    transform-origin: top center;
    position: absolute;
    top: 29px;
    left: calc(-427px / 2 + 40px);
    color: #FFF;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a21e11', endColorstr='#a21e11', GradientType=1);
    padding: 0.25rem 0;
    font-size: 0.9rem;
    font-weight: bold;
    z-index: 1;
}

/* ==========================================================================
   クーポンタイプ別カラー
   ========================================================================== */

/* サプライズ - 赤系（デフォルト） */
.coupon-type--surprise {
    background: linear-gradient(to right, rgba(162, 30, 17, 1) 0%, rgba(255, 63, 63, 1) 42%, rgba(162, 30, 17, 1) 100%);
}

/* 飲み放題 - 青系 */
.coupon-type--all_you_can_drink {
    background: linear-gradient(to right, rgba(17, 62, 139, 1) 0%, rgba(63, 136, 255, 1) 42%, rgba(17, 62, 139, 1) 100%);
}

/* 宴会 - 緑系 */
.coupon-type--party {
    background: linear-gradient(to right, rgba(34, 139, 34, 1) 0%, rgba(90, 200, 90, 1) 42%, rgba(34, 139, 34, 1) 100%);
}

/* その他 - 紫系 */
.coupon-type--other {
    background: linear-gradient(to right, rgba(102, 51, 153, 1) 0%, rgba(147, 112, 219, 1) 42%, rgba(102, 51, 153, 1) 100%);
}

/* ==========================================================================
   画像エリア
   ========================================================================== */

.coupon-rebon01 .wp-block-image {
    margin: 0;
}

.coupon-rebon01 .wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* 画像なしの場合 */
.coupon-no-image {
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.coupon-no-image span {
    color: #999;
    font-size: 1.2rem;
    font-weight: bold;
}

/* ==========================================================================
   クーポンコンテナ
   ========================================================================== */

.coupon-Sec01 {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.coupon-Sec01 > p {
    margin: 1rem 0;
    font-weight: bold;
}



/* ==========================================================================
   親テーマスタイル調整
   ========================================================================== */

.coupon-block--default .ark-block-dl__dt {
    border-left: 0;
}

.coupon-block--default .ark-block-dl__dd {
    padding-bottom: 0;
}

/* ==========================================================================
   カラムレイアウト
   ========================================================================== */

/* PCカラム設定 */
.ark-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.ark-block-columns__inner {
    gap: 1rem;
    width: 100%;
}

/* カラム */
.coupon-block--default .ark-block-columns {
    --arkb-gap--x: 0;
    --arkb-gap--y: 0;
}
.coupon-block--default .ark-block-columns .ark-block-column{
    margin: 0;
}

/* 1カラム */
.ark-block-columns--1 .ark-block-column {
    width: 100%;
}

/* 2カラム */
.ark-block-columns--2 .ark-block-column {
    width: calc(50% - 0.5rem);
}

/* 3カラム */
.ark-block-columns--3 .ark-block-column {
    width: calc(33.333% - 0.667rem);
}

/* 4カラム */
.ark-block-columns--4 .ark-block-column {
    width: calc(25% - 0.75rem);
}

/* ==========================================================================
   レスポンシブ - タブレット対応
   ========================================================================== */

@media not all and (min-width: 1000px) {
    /* タブレットデフォルトは2カラム */
    .ark-block-columns--3 .ark-block-column,
    .ark-block-columns--4 .ark-block-column {
        width: calc(50% - 0.5rem);
    }
    
    /* タブレット1カラム指定時 */
    .ark-block-columns--tb-1 .ark-block-column {
        width: 100%;
    }
    
    /* タブレット2カラム指定時 */
    .ark-block-columns--tb-2 .ark-block-column {
        width: calc(50% - 0.5rem);
    }
    
    /* タブレット3カラム指定時 */
    .ark-block-columns--tb-3 .ark-block-column {
        width: calc(33.333% - 0.667rem);
    }
}

/* ==========================================================================
   レスポンシブ - スマホ対応
   ========================================================================== */

@media not all and (min-width: 768px) {
    /* デフォルトは1カラム */
    .ark-block-columns .ark-block-column {
        width: 100%;
    }
    
    /* スマホ2カラム指定時 */
    .ark-block-columns--sp-2 .ark-block-column {
        width: calc(50% - 0.5rem);
    }
    
    /* リボンサイズ調整 */
    .coupon-rebon01 p {
        width: 300px;
        font-size: 0.8rem;
        top: 20px;
        left: calc(-300px / 2 + 30px);
    }
}

/* ==========================================================================
   その他の調整
   ========================================================================== */

/* クーポンタイトル */
.coupon-Sec01 > p strong {
    font-size: 1.1rem;
    line-height: 1.6;
}

/* 条件リスト */
.coupon-block--default .wp-block-list {
    margin: 0;
}

.coupon-block--default .wp-block-list li {
    margin-bottom: 0.5rem;
}

.coupon-block--default .wp-block-list li:last-child {
    margin-bottom: 0;
}