@charset "UTF-8";

#promotion-tool {
    font-family: NeulisAlt, sans-serif;
    color: #21304f;
}

@media screen and (max-width: 768px) {
    #promotion-tool {
        font-size: 16px;
    }
}

#promotion-tool .responsive-bg-image-1 {
  background-image: url("/wp-content/themes/usblueberry/asset/img/promotion-tool/promo_hero_image2.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

#promotion-tool .billboard .breadcrumb-wrapper + .content-wrapper {
    max-width: fit-content;
}

#promotion-tool h1 {
    font-size: clamp(1.8rem, 1.067rem + 3.26vw, 4rem);
}

@media screen and (max-width: 768px) {
    #promotion-tool .promo-title-hidden {
        font-size: 0;
        /* 万が一フォント幅が残る場合の保険 */
        letter-spacing: 0;
    }
}

#promotion-tool .lead-text {
  width: min(760px, 90%);
  margin: 3rem auto 0;
  font-size: 1.1rem;
  font-weight: 500;
}
#promotion-tool .lead-text-hr {
    margin-top: 2rem;
    margin-inline: auto;
}
#promotion-tool .lead-subtext {
  margin-top: 2rem;
  font-size: 0.8em;
      color: #5E3382;
}


#promotion-tool .promo-search {
    position: relative;

    display: grid;
    grid-template-columns:
        2fr
        3fr;

    align-items: center;
    column-gap: 64px;

    padding: 4rem 8%;

    background: rgba(255, 245, 249, 0.65);
    border-radius: 1rem;
}


/* ------------------------------
   左
------------------------------ */

#promotion-tool .promo-search__title {
    margin: 0 0 18px;

    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;

    color: #5E3382;
}

#promotion-tool .promo-search__description {
    margin: 0;

    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.8;

}


/* ------------------------------
   カテゴリーボタン
------------------------------ */

#promotion-tool .promo-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1rem;
}

#promotion-tool .promo-filter__button {
    appearance: none;

    flex: 0 0 auto;
    width: fit-content;
    padding: 12px 24px;

    border-radius: 9999px;

    background: #FFE8F1;
    /* color: #444; */

    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}
#promotion-tool .promo-filter__button:hover {
    background: #f7f7f7;
}

#promotion-tool .promo-filter__button.is-active {
    background: #2e008b;
    color: #fff;
    border-color: #2e008b;
}


/* ------------------------------
   右下の装飾画像
------------------------------ */

#promotion-tool .promo-search__image {
    position: absolute;
    right: -50px;
    bottom: -70px;
}

#promotion-tool .promo-search__image img {
    display: block;
    width: 100%;
    height: auto;
}



@media (max-width: 767px) {

    #promotion-tool .promo-search {
        grid-template-columns: 1fr;

        row-gap: 28px;
    }

    #promotion-tool .promo-search {
        padding-bottom: 80px;
    }

    #promotion-tool .promo-search__image {
        right: 0;

    }

}

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

.promo-list__title {
    margin: 6rem 0 1rem;

    color: #5c2b7d;

    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
}


/* ========================================
   商品Grid
======================================== */

.promo-items {
    margin-top: 1.2rem;
    margin-bottom: 4rem;
    display: grid;
    /* grid-template-columns: repeat(auto-fill, 24rem); */
    grid-template-columns: repeat(auto-fit, min(94%, 24rem));

    gap: 24px 20px;
    justify-content: center;
}


/* ========================================
   商品カード
======================================== */

.promo-item {
    min-width: 0;
    padding: 1rem;
    background: #fff;
    border: 1px solid rgba(68, 68, 68, 0.53);
    border-radius: 1rem;

    display: flex;
    flex-direction: column;
}

/* 絞り込みをしたときに隠す */
.promo-item[hidden] {
    display: none !important;
}


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

.promo-item__image {
    position: relative;

    display: block;

    width: 100%;
    aspect-ratio: 16 / 9;

    padding: 0;

    overflow: hidden;

    border: 1px dashed rgba(68, 68, 68, 0.53);
    border-radius: 1rem;

    background-color: #FFF5F9A6;

    cursor: pointer;
}

.promo-item__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* 拡大案内 */

.promo-item__zoom {
    position: absolute;
    top: 50%;
    left: 50%;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;

    color: #999;

    font-size: 11px;

    transform: translate(-50%, -50%);
}

.promo-item__zoom-icon {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    background: rgba(255, 255, 255, 0.85);

    border-radius: 50%;

    font-size: 18px;
    font-weight: 300;
}


/* ========================================
   テキスト
======================================== */

.promo-item__content {
    padding: 1rem 0.5rem 0.6rem;

    display: flex;
    flex-direction: column;
    flex: 1;
}

.promo-item__category {
    color: #777;

    font-size: 12px;
    line-height: 1.5;
}

.promo-item__title {
    margin-top: 1rem;
    margin-bottom: 0.5rem;

    /* color: #444; */

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
}
.promo-item__pack-size,
.promo-item__size {
    color: rgba(68, 68, 68, 0.53);
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.5; 
}


/* ========================================
   数量・DL
======================================== */

.promo-item__bottom {
    display: flex;
    align-items: center;
    gap: 1rem;

    margin-top: auto;
    margin-left: 0.5rem;

    padding-top: 1rem;
}

.promo-item__quantity {
    display: flex;
    align-items: center;
    gap: 12px;

    font-size: 0.94rem;
    font-weight: 700;

    white-space: nowrap;
}

.promo-item__quantity input {
    width: 7rem;
    height: 2.6rem;

    padding: 4px 8px;

    border: 1px solid rgb(33, 48, 79, 0.3);
    border-radius: 0.25rem;

    background: #E9EBF2;

    /* color: #444; */
    font-size: 1rem;
    text-align: right;
}

/* 数字とスピンボタンの間に余白を入れる（ブラウザの仕様） */
.promo-item input[type="number"]::-webkit-inner-spin-button {
    margin-left: 8px;
}


/* ダウンロード */

.promo-item__download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-width: 36%;
    height: 2.6rem;

    margin-left: auto;
    padding: 0 18px;

    border: 0;
    border-radius: 0.25rem;

    background: #5E3382;
    color: #fff;

    font-size: 1rem;
    font-weight: 700;

    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .promo-item__download:hover {
        opacity: 0.85;
        color: #fff;
    }
}
.promo-item__download:focus,
.promo-item__download:active,
.promo-item__download:visited {
    opacity: 1;
    color: #fff;
}


/* ========================================
   申込フォームへのリンク
======================================== */
.promo-item__form-link {
    display: none;
    width: fit-content;
    margin: 24px auto 0;

    color: #2f169b;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;

    transition: opacity 0.2s ease;
}

/* 数量が1以上：リンクのスペースを確保 */
.promo-item__form-link.has-selection {
    display: block;
    visibility: hidden;
}

/* 数量が1以上 ＋ フォームが画面外：リンクを表示 */
.promo-item__form-link.is-visible {
    visibility: visible;
}

.promo-item__form-link:hover {
    opacity: 0.7;
    /* text-decoration: underline; */
}



/* ========================================
   画像モーダル
======================================== */

/* hidden属性が付いている要素を非表示 */
.promo-modal[hidden],
.promo-modal__image[hidden],
.promo-modal__3d[hidden] {
    display: none;
}

.promo-modal {
    position: fixed;
    z-index: 9999;
    inset: 0;

    display: grid;
    place-items: center;

    margin-top: 0;
    padding: 2.5rem 5rem;
    box-sizing: border-box;

    background: rgba(0, 0, 0, 0.75);
}

.promo-modal__inner {
    position: relative;

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

    width: 100%;
    max-width: 1200px;

    height: 100%;
    max-height: 900px;

    min-width: 0;
    min-height: 0;


    background: #f0f1f7;
}


/* 画像 */

.promo-modal__image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    background-color: #FFF5F9A6;
}

.promo-modal__image {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
}


/* 閉じる */

/* 閉じるボタン */

.promo-modal__close {
    position: absolute;
    z-index: 2;
    top: 4rem;
    right: 5rem;

    width: 48px;
    height: 48px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #fff;

    cursor: pointer;
}

.promo-modal__close::before,
.promo-modal__close::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 20px;
    height: 3px;

    background: #333;
    border-radius: 2px;
}

.promo-modal__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.promo-modal__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}


/* 左右矢印 */

.promo-modal__prev,
.promo-modal__next {
    position: absolute;
    z-index: 2;
    top: 50%;

    width: 56px;
    height: 56px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.9);

    cursor: pointer;

    transform: translateY(-50%);
}

.promo-modal__prev {
    left: -70px;
}

.promo-modal__next {
    right: -70px;
}

.promo-modal__prev::before,
.promo-modal__next::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 14px;
    height: 14px;

    border-top: 3px solid #333;
    border-right: 3px solid #333;
}

.promo-modal__prev::before {
    transform: translate(-35%, -50%) rotate(-135deg);
}

.promo-modal__next::before {
    transform: translate(-65%, -50%) rotate(45deg);
}


.promo-modal__prev:hover,
.promo-modal__next:hover,
.promo-modal__close:hover {
    opacity: 0.8;
}


/* 三角POP 3D */

.promo-modal__3d {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;
}


/* モーダル表示中は背景をスクロールさせない */

body.is-promo-modal-open {
    overflow: hidden;
}


/* ========================================
   スマホ
======================================== */

@media (max-width: 767px) {

    .promo-modal {
        padding: 60px 48px 40px;
    }
    
    .promo-modal__inner {
        height: calc(100vh - 100px);
    }

    .promo-modal__close {
        right: 4rem;

        width: 40px;
        height: 40px;

        font-size: 26px;
    }

    .promo-modal__prev,
    .promo-modal__next {
        width: 42px;
        height: 42px;

        font-size: 32px;
    }

    .promo-modal__prev {
        left: -44px;
    }

    .promo-modal__next {
        right: -44px;
    }

}

/* =========================
   申込フォーム
========================= */

.promotion-form {
    background-color: #F5F5F5;
}

.promo-form {
    width: 100%;
    margin: 4rem auto;
    padding-block: 4rem;
    padding-inline: 6.25rem;

    background: #fff;
    border: 1px solid rgba(68, 68, 68, 0.49);
    border-radius: 0.25rem;

    /* color: #444; */
}
@media (max-width: 767px) {
    .promo-form {
        padding-inline: 6%;
    }
}

.promo-form
.smf-item:not(.promo-form__address):has([data-validations~="required"])
.smf-item__label::after {
    content: "*";
}

/* タイトル */

.promo-form__title {

    padding-bottom: 1.6rem;

    border-bottom: 1px solid #21304f;

    color: #5E3382;

    font-size: 1.5rem;
    font-weight: 700;
}


/* セクション */

/* .promo-form__section {
} */

.promo-form__heading {
    margin-top: 2.5rem;
    font-size: 1.25rem;
    font-weight: 700;
}

/* ラベルと入力欄の長さを調整 */
@media (min-width: 640px) {

    /* ラベルはすべて 10rem */
    .smf-form--simple-table .smf-item__col--label {
        flex: 0 0 10rem;
        max-width: 10rem;
    }

    /* 会社名・Eメール・Eメール確認 */
    .promo-form__wide .smf-item__col--controls {
        flex: 0 0 24rem;
        max-width: 24rem;
    }

    /* 担当者名・電話番号 */
    .promo-form__medium .smf-item__col--controls {
        flex: 0 0 20rem;
        max-width: 20rem;
    }

    /* 郵便番号 */
    .promo-form__postal .smf-item__col--controls {
        flex: 0 0 10rem;
        max-width: 10rem;
    }
    /* 住所 */
    .promo-form__address .smf-item__col--controls {
        flex: 1 1 24rem;
        min-width: 24rem;
        max-width: none;
    }
}


.promo-form input[type="text"],
.promo-form input[type="tel"],
.promo-form input[type="email"] {
    box-sizing: border-box;

    width: 100%;
    height: 44px;

    padding: 8px 12px;

    border: 1px solid #999;
    border-radius: 3px;

    background: #fff;

    font-size: 16px;
}


/* 郵便番号 */
.promo-form .promo-form__postal .smf-item__col--controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* 〒を表示 */
.promo-form .promo-form__postal .smf-item__col--controls::before {
    content: "〒";
    flex: 0 0 auto;
}

/* 郵便番号入力欄を短くする */
.promo-form .promo-form__postal input[type="text"] {
    width: 10rem;
    max-width: 100%;
    flex: 0 0 auto;
}


/* 郵便番号と住所の間を狭くする */
.promo-form .smf-form--simple-table .promo-form__address {
    padding-top: 0.25rem;
}

/* メール用ボックスは非表示にする */
.promo-form .promo-form__selected-hidden {
    display: none;
}

/* メールアドレスのダブルチェック */
.promo-email-confirm-error {
    margin-top: 6px;
    color: #d63638;
    font-size: 0.9em;
    line-height: 1.5;
}

.promo-email-confirm-error[hidden] {
    display: none;
}

/* 確認画面では表示しない */
.snow-monkey-form[data-screen="confirm"] .promo-form__email-confirm {
    display: none;
}

/* 選択アイテム：選ばれていない時 */
.promo-form__selected-empty {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 10rem;
    background-color: #FFF5F9A6;
}

/* 選択アイテム：見出し行 */
.promo-form__selected-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px;
    gap: 1rem;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

/* 選択アイテム：商品行 */
.promo-form__selected-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

/* アイテム名・数量のボックス */
.promo-form__selected-name,
.promo-form__selected-quantity {
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    border: 1px solid #999;
    border-radius: 3px;
    background: #fff;
}

/* 数量 */
.promo-form__selected-quantity {
    text-align: center;
}

/* 個人情報保護方針 */
.smf-checkboxes-control:has(
    input[name="privacy-consent[]"]
) .smf-checkboxes-control__control {
    display: flex;
    justify-content: center;
}

/* 確認ボタン無効 */
.promo-form .smf-action .smf-button-control__control:disabled {
    box-sizing: border-box;

    width: min(12rem, 40%);
    /* padding: 1.265625rem 3.2473210255rem; */
    padding-block: 1.265625rem;

    border: none;
    border: none;
    border-radius: 1.8020324707rem;

    background: #ddd;
    background-image: none;

    color: #888;

    box-shadow: none;

    white-space: nowrap;
    cursor: not-allowed;
    opacity: 1;
}

/* 確認ボタン有効・送信ボタン と 完了ボタン */
.promo-form .smf-action .smf-button-control__control:not(:disabled),
#promotion-tool .wp-block-buttons > .promo-form__back-link > .wp-block-button__link {
    
    box-sizing: border-box;

    font-weight: 600;
    color: #fff;
    /* padding: 1.265625rem 3.2473210255rem; */
    padding-block: 1.265625rem;

    line-height: 1.15;

    width: min(12rem, 40%);

    border: none;
    border-radius: 1.8020324707rem;

    background: #a20067;
    background-image: none;


    white-space: nowrap;
    cursor: pointer;

    transition:
        opacity 0.2s,
        box-shadow 0.2s;
    transition-property: all;
    transition-duration: .6s;
    transition-timing-function: cubic-bezier(.39, .575, .565, 1);


}

.promo-form .smf-action .smf-button-control__control:not(:disabled):hover {
    background-color: #2e008b;
}

/* 完了ボタン */
/* 横幅だけ上書き */
.wp-block-buttons > .wp-block-button.promo-form__back-link,
#promotion-tool .wp-block-buttons > .promo-form__back-link > .wp-block-button__link {
    width: 12rem;
}


/* Snow Monkey Forms送信用：選択アイテム情報 */
.smf-placeholder[data-name="selected-items"] {
    display: none;
}


/* 確認画面タイトル・リードは通常は非表示 */
.promo-form__confirm-title,
.promo-form__confirm-lead {
    display: none;
}

/* 確認画面だけ表示 */
.snow-monkey-form[data-screen="confirm"] .promo-form__confirm-title,
.snow-monkey-form[data-screen="confirm"] .promo-form__confirm-lead {
    display: block;
}
/* 確認画面と完了画面のタイトル */
.snow-monkey-form[data-screen="confirm"] .promo-form__confirm-title,
.promo-form__complete-title {
    font-size: 2rem;
    font-weight: 700;
}
.snow-monkey-form[data-screen="confirm"] .promo-form__confirm-lead {
    margin-top: 1.5rem;
    margin-bottom: 6rem;
}

/* 確認チェックボックスは非表示 */
.snow-monkey-form[data-screen="confirm"] .smf-placeholder[data-name="privacy-consent"] {
    display: none;
}

/* 確認画面 */
@media (min-width: 640px) {
    .smf-form--simple-table
    .smf-item:has(.smf-placeholder) {
        align-items: center;
    }
}

/* 確認画面・完了画面ではアイテム一覧を非表示 */
body:has(.smf-button-control__control[data-action="complete"])
.items-section,
body:has(.smf-complete-content)
.items-section {
    display: none;
}

/* クラウドフレアマークを左右中央に */
#promotion-tool .snow-monkey-forms-turnstile > div {
    justify-content: center;
}

/* 完了画面ではクラウドフレアマークは非表示 */
#promotion-tool
.snow-monkey-form[data-screen="complete"]
.snow-monkey-forms-turnstile {
    display: none;
}


/* フッター上画像 */
.prom-footer-img {
    object-fit: cover;
    width: 100%;
    height: 20rem;
    vertical-align: bottom;
}