/**
 * ticket-page-fix.css
 * チケット印刷ページの修正CSS
 *
 * 修正内容:
 * 1. 横揺れ問題を修正（ChatPlusウィジェット対策）
 * 2. アイコン表示の修正（FontAwesome互換性）
 * 3. 納期カレンダーの表示修正
 *
 * 注意: ナビゲーション・フッター・見積もりボタンには影響を与えない
 */

/* =============================================
   0. FontAwesome 4.x → 6.x 互換性
   ============================================= */
.fa {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", FontAwesome !important;
    font-weight: 900 !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
}

.fas, .fa-solid {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro" !important;
    font-weight: 900 !important;
}

.far, .fa-regular {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro" !important;
    font-weight: 400 !important;
}

.fab, .fa-brands {
    font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

/* アイコンの互換性修正（よく使うもの） */
.fa-quote-left:before { content: "\f10d" !important; }
.fa-exclamation-triangle:before, .fa-triangle-exclamation:before { content: "\f071" !important; }
.fa-question:before { content: "\3f" !important; }
.fa-angle-right:before { content: "\f105" !important; }
.fa-check:before { content: "\f00c" !important; }
.fa-check-circle:before, .fa-circle-check:before { content: "\f058" !important; }
.fa-times:before, .fa-xmark:before { content: "\f00d" !important; }
.fa-times-circle:before, .fa-circle-xmark:before { content: "\f057" !important; }
.fa-info-circle:before, .fa-circle-info:before { content: "\f05a" !important; }
.fa-question-circle:before, .fa-circle-question:before { content: "\f059" !important; }
.fa-home:before, .fa-house:before { content: "\f015" !important; }
.fa-shopping-cart:before, .fa-cart-shopping:before { content: "\f07a" !important; }
.fa-phone:before { content: "\f095" !important; }
.fa-envelope:before { content: "\f0e0" !important; }
.fa-search:before, .fa-magnifying-glass:before { content: "\f002" !important; }
.fa-bars:before { content: "\f0c9" !important; }
.fa-caret-down:before { content: "\f0d7" !important; }
.fa-chevron-down:before { content: "\f078" !important; }
.fa-chevron-right:before { content: "\f054" !important; }
.fa-arrow-right:before { content: "\f061" !important; }
.fa-external-link:before, .fa-arrow-up-right-from-square:before { content: "\f08e" !important; }
.fa-calendar:before { content: "\f133" !important; }
.fa-clock:before, .fa-clock-o:before { content: "\f017" !important; }
.fa-ticket:before { content: "\f145" !important; }
.fa-ticket-alt:before, .fa-ticket-simple:before { content: "\f3ff" !important; }
.fa-music:before { content: "\f001" !important; }
.fa-print:before { content: "\f02f" !important; }
.fa-file:before { content: "\f15b" !important; }
.fa-file-alt:before, .fa-file-lines:before { content: "\f15c" !important; }
.fa-download:before { content: "\f019" !important; }
.fa-star:before { content: "\f005" !important; }
.fa-user:before { content: "\f007" !important; }
.fa-tag:before { content: "\f02b" !important; }
.fa-tags:before { content: "\f02c" !important; }

/* 見積もりボタン・その他アイコン */
.fa-calculator:before { content: "\f1ec" !important; }
.fa-trophy:before { content: "\f091" !important; }
.fa-fire:before, .fa-fire-flame-curved:before { content: "\f06d" !important; }
.fa-diamond:before, .fa-gem:before { content: "\f3a5" !important; }
.fa-flash:before, .fa-bolt:before { content: "\f0e7" !important; }
.fa-palette:before { content: "\f53f" !important; }
.fa-cogs:before, .fa-gears:before { content: "\f085" !important; }
.fa-cog:before, .fa-gear:before { content: "\f013" !important; }
.fa-chart-bar:before, .fa-chart-column:before { content: "\f080" !important; }
.fa-chart-line:before { content: "\f201" !important; }
.fa-pen:before, .fa-pencil:before { content: "\f303" !important; }
.fa-file-pdf:before { content: "\f1c1" !important; }
.fa-adjust:before, .fa-circle-half-stroke:before { content: "\f042" !important; }
.fa-list-ol:before, .fa-list-1-2:before { content: "\f0cb" !important; }
.fa-paper-plane:before { content: "\f1d8" !important; }
.fa-book:before { content: "\f02d" !important; }
.fa-book-open:before { content: "\f518" !important; }
.fa-lightbulb:before { content: "\f0eb" !important; }
.fa-truck:before { content: "\f0d1" !important; }
.fa-box:before { content: "\f466" !important; }
.fa-handshake:before { content: "\f2b5" !important; }

/* =============================================
   1. 横揺れ修正（ChatPlusウィジェット対策のみ）
   ============================================= */
html {
    overflow-x: hidden;
}

/* ChatPlusウィジェットの横揺れ防止 */
.ue-sidebar-container,
[class*="ue-sidebar"],
.chatplus-container,
[class*="chatplus"] {
    max-width: 100vw !important;
    right: 0 !important;
}

/* =============================================
   2. 納期カレンダーモーダルの修正
   ============================================= */
.modal-nouki .modal-dialog {
    max-width: 90%;
    width: 600px;
    margin: 30px auto;
}

.modal-nouki .modal-content {
    border-radius: 8px;
}

.modal-nouki .modal-body {
    padding: 20px;
}

#nouki-list p {
    padding: 10px 15px;
    background: #f9fafb;
    border-radius: 4px;
    border-left: 4px solid #f97316;
    margin-bottom: 8px;
}

/* スマホ対応 */
@media (max-width: 767px) {
    .modal-nouki .modal-dialog {
        width: 95%;
        margin: 10px auto;
    }
}

/* =============================================
   3. 画像のレスポンシブ対応
   ============================================= */
#ticket-page2 img {
    max-width: 100%;
    height: auto;
}

/* slick/splide carousel の横揺れ修正 */
.slick-slider,
.slick-list,
.splide,
.splide__track {
    overflow: hidden;
}

/* =============================================
   4. カードの高さを揃える（PC表示）
   ============================================= */
/* 関連ブログ記事セクション */
#related-articles .row {
    display: flex;
    flex-wrap: wrap;
}

#related-articles .row > [class*="col-"] {
    display: flex;
}

#related-articles .row > [class*="col-"] > div {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#related-articles .row > [class*="col-"] > div > div:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#related-articles .row > [class*="col-"] > div > div:last-child > p {
    flex: 1;
}

/* 関連サービスセクション */
#related-services .row {
    display: flex;
    flex-wrap: wrap;
}

#related-services .row > [class*="col-"] {
    display: flex;
}

#related-services .row > [class*="col-"] > div {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#related-services .row > [class*="col-"] > div > div:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#related-services .row > [class*="col-"] > div > div:last-child > p {
    flex: 1;
}

/* 選ばれる5つの理由セクション - 同じ行のカードの高さを揃える */
#summary .row {
    display: flex;
    flex-wrap: wrap;
}

#summary .row > [class*="col-"] {
    display: flex;
}

#summary .row > [class*="col-"] > div {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* タブレット以下では通常表示に戻す */
@media (max-width: 767px) {
    #related-articles .row,
    #related-services .row,
    #summary .row {
        display: block;
    }

    #related-articles .row > [class*="col-"],
    #related-services .row > [class*="col-"],
    #summary .row > [class*="col-"] {
        display: block;
    }
}