@charset "UTF-8";
/* ==========================================================================
   ピックアップバナー お問い合わせモーダル

   - style_new.css は外部ビルドの Tailwind 成果物なので触らない。ここで完結させる
   - .material-symbols-outlined の定義は header.php の Google Fonts CSS が持っており、
     そのリンクは wp_head() より後ろにある。同じ詳細度では向こうが勝つので、
     必ず親クラスと組み合わせて指定する
   ========================================================================== */

/* --------------------------------------------------------------------------
   バナー側：モーダルを開くトリガー
   <a> と同じ見た目にするため button の既定スタイルを落とす
   -------------------------------------------------------------------------- */
.iw-pickup-trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   ダイアログ本体
   -------------------------------------------------------------------------- */
.iw-modal {
    width: calc(100% - 32px);
    max-width: 672px;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    padding: 0;
    border: 0;
    border-radius: 8px;
    background-color: #fff;
    color: #1a1a1a;
    box-shadow: 0 20px 45px rgba(15, 32, 56, .18);
    overflow: hidden;
}

/* 背景を黒で落とす。濃さを変えるならこの1行のアルファ値だけ触る */
.iw-modal::backdrop {
    background-color: rgba(0, 0, 0, .5);
}

.iw-modal__inner {
    padding: 40px;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
}

/* 背景スクロールの固定。JS が body に付け外しする */
body.iw-modal-open {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   右上の閉じるボタン
   -------------------------------------------------------------------------- */
.iw-modal__close {
    position: absolute;
    z-index: 1;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #6b7280;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.iw-modal__close:hover {
    background-color: #f3f4f6;
    color: #1a1a1a;
}

.iw-modal__close .material-symbols-outlined {
    font-size: 26px;
}

/* --------------------------------------------------------------------------
   見出し・説明文
   -------------------------------------------------------------------------- */
.iw-modal__title {
    margin: 0 0 12px;
    padding: 0 40px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

.iw-modal__desc {
    margin: 0 0 28px;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
}

/* --------------------------------------------------------------------------
   2枚のカード
   -------------------------------------------------------------------------- */
.iw-modal__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.iw-modal__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 20px;
    border: 1px solid #e3ebf5;
    border-radius: 8px;
    text-align: center;
}

.iw-modal__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 50%;
    background-color: #e9f2fd;
    color: #0767b7;
}

.iw-modal__icon .material-symbols-outlined {
    font-size: 28px;
}

/* テキスト側。margin-bottom でボタンとの間隔を確保する */
.iw-modal__card-body {
    width: 100%;
    margin-bottom: 20px;
}

.iw-modal__card-title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
}

.iw-modal__staff {
    margin: 0 0 8px;
    font-size: 14px;
}

.iw-modal__tel {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin: 0 0 6px;
}

.iw-modal__tel-label {
    font-size: 13px;
    font-weight: 700;
}

.iw-modal__tel-num {
    color: #0767b7;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
}

.iw-modal__tel-num:hover {
    text-decoration: underline;
}

.iw-modal__note {
    margin: 0 0 6px;
    color: #4b5563;
    font-size: 13px;
    line-height: 1.7;
}

/* 意味の切れ目で折り返させる。1行に収まるときは折り返さない
   （<br> と違って、幅の広い画面で不要な改行が入らない） */
.iw-phrase {
    display: inline-block;
}

.iw-modal__accent {
    margin: 0 0 6px;
    color: #0767b7;
    font-size: 13px;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   カード内のボタン
   左右で本文の高さが違っても margin-top:auto で下端に揃う
   -------------------------------------------------------------------------- */
.iw-modal__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    margin-top: auto;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s, border-color .2s, color .2s;
}

.iw-modal__btn .material-symbols-outlined {
    font-size: 20px;
}

.iw-modal__btn--fill {
    border: 1px solid #0767b7;
    background-color: #0767b7;
    color: #fff;
}

.iw-modal__btn--fill:hover {
    border-color: #05548f;
    background-color: #05548f;
    color: #fff;
}

.iw-modal__btn--outline {
    border: 1px solid #0767b7;
    background-color: #fff;
    color: #0767b7;
}

.iw-modal__btn--outline:hover {
    background-color: #e9f2fd;
}

/* --------------------------------------------------------------------------
   下部の「閉じる」
   -------------------------------------------------------------------------- */
.iw-modal__dismiss {
    display: block;
    margin: 24px auto 0;
    padding: 4px 8px;
    border: 0;
    background: none;
    color: #6b7280;
    font-size: 14px;
    cursor: pointer;
}

.iw-modal__dismiss:hover {
    color: #1a1a1a;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   スマホ：カードを縦積み
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
    .iw-modal__inner {
        padding: 32px 20px 24px;
    }

    .iw-modal__close {
        top: 10px;
        right: 10px;
    }

    .iw-modal__title {
        padding: 0 32px;
        font-size: 19px;
    }

    .iw-modal__desc {
        margin-bottom: 20px;
        font-size: 13px;
    }

    .iw-modal__cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}