@charset "utf-8";

.courtesy.detail .news_detail .news_content .app {
    display: flex;
    margin-top: 40px;
}

.courtesy.detail .news_detail .news_content .app .app-inner {
    background: #ffc68c;
    color: #000;
}

.courtesy.detail .news_detail .news_content .app .app-inner .qr_img {
    max-width: 123px;
    width: 100%;
    height: auto;
}

.courtesy.detail .news_detail .news_content .app .app-inner figure p {
    display: block;
    font-size: 12px;
    margin-top: 0;
}

.courtesy.detail .news_detail .news_content .qr02 .app .app-inner {
    gap: 20px;
    justify-content: space-around;
}

.courtesy.detail .news_detail .news_content .qr02 .app .app-inner figure {
    margin-left: 0;
}


.spStyle {
    display: none !important;
}

.pcStyle {
    display: block !important;
}

.btn {
    max-width: 490px;
    width: 100%;
}

.btn.printing_btn {
    height: 53px;
}

.btn.printing_btn a {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn.printing_btn::before {
    display: none;
}

.btn.printing_btn a::after {
    position: absolute;
    right: 15px;
    left: auto;
    background: url("/assets/images/service/courtesy/icon_printing_01.png") no-repeat center center/contain;
    width: 40px;
    height: 40px;
    border: none;
    transform: none;
}

/* 古い .for-print の 700px 指定を解除して 100% に戻す */
.for-print .page-header>.inner,
.for-print .content,
.for-print .main-content {
    width: 100% !important;
    /* 強制的に100%にする */
    max-width: none !important;
}

.for-print .page-footer {
    min-width: 0 !important;
    /* 700pxの制限を解除 */
}

a.link {
    text-indent: 0em;
    color: #006699;
}

/* aタグの中にimgがある場合、::before と ::after の両方を完全に消す */
a[target="_blank"]:has(img)::before,
a[target="_blank"]:has(img)::after {
    content: none !important;
    display: none !important;
    border: none !important;
    width: 0 !important;
    height: 0 !important;
}

a[target="_blank"]:has(img) {
    padding: 0;
}

/* a.linkImgを付けると中央配置にするコード */
.linkImg {
    width: fit-content;
    display: block !important;
    margin-top: 20px;
    margin-inline: auto;
}

/* 念のため、印刷時（@media print）の余計な挙動もリセット */
@media print {

    body,
    .page-container {
        width: 100% !important;
        min-width: 0 !important;
    }
}

.courtesy.detail .news_detail .news_content .appArea>a {
    width: 100%;
}

.courtesy.detail .news_detail .news_content .app>a {
    width: 100%;
}

.courtesy.detail .news_detail .news_content .app>div {
    width: 100%;
}

.courtesy.detail .news_detail .news_content .app>a>div {
    width: 100%;
}

@media screen and (max-width: 767px) {
    .spStyle {
        display: block !important;
    }

    .pcStyle {
        display: none !important;
    }

    .courtesy.detail .news_detail .news_content .app .app-inner {
        display: flex;
        align-items: center;
        background: #ffc68c;
        gap: 4.26vw;
        padding: 1.57vw 2.26vw 1.91vw 3.39vw;
        color: #000;
        text-align: center;
        font-size: 2.3rem;
        font-weight: 700;
        width: 100%;
    }

    .courtesy.detail .news_detail .news_content .app>a {
        width: 100%;
    }

    .courtesy.detail .news_detail .news_content .app>div {
        width: 100%;
    }

    .courtesy.detail .news_detail .news_content .app>a>div {
        width: 100%;
    }

    .post.detail .news_detail .app img {
        width: 60px;
    }

    .courtesy.detail .news_detail .news_content .app .app-inner .app_text {
        display: inline;
        font-size: 3.4vw;
    }
}


/* 印刷時専用スタイル：1枚に収める設定 */
@media print {

    /* 1. ページ全体を1枚の枠に固定する */
    @page {
        size: auto;
        /* 用紙サイズ自動 */
        margin: 5mm;
        /* 余白を最小限にして領域を稼ぐ */
    }

    html,
    body {
        width: 1000px !important;
        min-width: 1000px !important;
        /* 🔥 重要：2枚目を作らせないための設定 */
        height: 100% !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    /* 🔥 重要：コンテンツ全体を1枚に収まるように縮小する */
    /* ページが長い場合は 0.8 や 0.7 に数値を下げてください */
    #wrap {
        transform: scale(0.8);
        transform-origin: top center;
        width: 1000px !important;
        height: auto !important;
    }

    /* 2. 不要な要素を完全に消す */
    header,
    footer,
    .breadcrumb,
    .btn_back,
    .none,
    .app,
    .btn-area,
    .swiper-button-prev,
    .swiper-button-next,
    .swiper-pagination,
    .nav-menu,
    aside {
        display: none !important;
    }

    /* 3. レイアウトのリセット */
    .l-content,
    section,
    .inner {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* 4. クーポン詳細・メインコンテンツの調整 */
    .courtesy.news_detail {
        padding: 10px 0 !important;
    }

    .courtesy_title,
    .courtesy_content {
        width: 100% !important;
        padding: 0 15px !important;
    }

    /* 5. 画像・スライダーの調整（1枚目のみ表示） */
    .courtesy_slider-detail,
    .courtesy_slider__detail {
        width: 100% !important;
        margin: 0 auto !important;
        overflow: visible !important;
    }

    .courtesy_slider__detail .swiper-wrapper {
        transform: none !important;
        /* 位置ズレ防止 */
        display: block !important;
        width: 100% !important;
    }

    .courtesy_slider__detail .swiper-slide {
        display: none !important;
        /* 一旦すべて消す */
    }

    .courtesy_slider__detail .swiper-slide:first-child {
        display: block !important;
        /* 1枚目だけ表示 */
        width: 100% !important;
        text-align: center !important;
    }

    .courtesy_slider__detail .swiper-slide img {
        max-width: 50% !important;
        /* 1枚に収めるため画像サイズを控えめに */
        height: auto !important;
    }

    /* 6. テーブルが途中で切れないようにする */
    table {
        width: 100% !important;
        border-collapse: collapse !important;
        page-break-inside: avoid !important;
        /* テーブルの途中で改ページさせない */
    }

    th,
    td {
        word-break: break-all !important;
    }
}

/* 画像＋テキストの横並びcss */

/* グリッドで再現する場合 */
.content_grid02 {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .content_grid02 {
        margin-top: 20px;
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.flex-content {

    display: flex;
    gap: 20px;
    align-items: stretch;
}

.flex-content>div {
    flex: 1;

}

.flex-content .mod-page-intro {
    margin-top: 10px;
    background-color: #ffc68c;
    padding: 10px;
}

.flex-content .mod-page-intro .inner {
    padding: 10px;
    background-color: #fff;
}

.flex-content .mod-page-intro .inner p {
    margin-top: 5px !important;
}

.flex-content .mod-page-intro .inner a {
    margin-top: 10px;
    margin-inline: auto;
}

.content_grid02--center {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    align-items: stretch;
    gap: 20px;
}

.content_grid_item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    gap: 0px;

}

.content_grid_item h3 {
    margin: 0;
}

.content_grid_item p {
    margin: 0;
}

.content_grid_item .button {
    margin: auto 0 0 0;
}

@media screen and (max-width: 767px) {
    .flex-content {
        flex-direction: column;
    }

    .content_grid02 {
        grid-template-columns: 1fr;
    }
}

.btn a[href$=".pdf"]::after {
    filter: brightness(0) invert(1);
}