@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Chiron+GoRound+TC:wght@200..900&family=Chiron+Hei+HK:ital,wght@0,200..900;1,200..900&display=swap');
@import url("spot_info_common.css");
/*--travel_agency.css--*/
:root {
    /*繁体字丸ゴシック、韓国語丸ゴシックフォント指定*/
    --font_family_tw_ko: "Chiron GoRound TC", sans-serif;
    /*繁体字ゴシック、韓国語ゴシックフォント指定*/
    --font_family_tw_ko2: "Chiron Hei HK", sans-serif;
}

/* ##########PC########## */
/*印刷ヘッダーをつけるために設定　印刷時以外はtable解除*/
.page_body .print_frame,
.page_body .print_frame thead,
.page_body .print_frame tbody,
.page_body .print_frame tr,
.page_body .print_frame td{
    display: block;
    margin: 0;
    padding: 0;
    border: none;
}


.spot_intro_msg{
    margin-bottom: 6em;
}

.spot_intro_msg::before{
    background-image: url(../shared/travel_agency/img_travel_l.png);
    width: 10rem;
    aspect-ratio: 1 / 1;
    top: 4rem;
    left: 2rem;
}
.spot_intro_msg::after{
    background-image: url(../shared/travel_agency/img_travel_r.png);
    width: 17.5rem;
    aspect-ratio: 560 / 512;
    right: -3.25rem;
    top: 1.5rem;
}

.spot_intro_msg h2{
    color: #222;
    width: auto;
}

    .spot_intro_msg h2::before{
        background-image: url(../shared/sub/fig_quotation_gray_l.png);
        left: -5.5rem;
    }

    .spot_intro_msg h2::after{
        background-image: url(../shared/sub/fig_quotation_gray_r.png);
        right: -5.5rem;
    }

.spot_intro_msg p{
    width: auto;
}

.btn_print_wrapper{
    margin-bottom: 2rem;
}

    .btn_print_wrapper button{
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: #bf402f;
        color: #fff;
        height: 3.5rem;
        font-family: "Zen Maru Gothic", sans-serif;
        color: #fff;
        font-size: 1.2rem;
        padding: 0 1.8em;
        line-height: 1;
        font-weight: 500;
        border: none;
        border-radius: 100vh;
        transition: .3s all ease;
        cursor: pointer;
    }

        .btn_print_wrapper button::before{
            content: "";
            display: inline-block;
            width: 1.5rem;
            aspect-ratio: 1 / 1;
            background-image: url(../shared/travel_agency/icon_print.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

    .btn_print_wrapper button:hover{
        filter: brightness(1.1);
        box-shadow: 0 0 3px 1px rgba(0,0,0,0.1);
    }

.lang_changer{}

    .lang_changer ul{
        display: flex;
        gap: 1rem;
    }

        .lang_changer ul li{}

        .lang_changer ul li a{
            box-sizing: border-box;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 12.5rem;
            height: 3.5rem;
            padding-right: 2rem;
            color: #222;
            border-radius: 100vh;
            background: #f5f5f5;
            font-family: "Zen Maru Gothic", sans-serif;
            text-decoration: none;
            font-weight: 500;
            font-size: 1.1rem;
            transition: .3s all ease;
        }

        .lang_changer ul li a:hover{
            color: #222;
            box-shadow: 0 0 3px 1px rgba(0,0,0,0.1);
        }

        .lang_changer ul li a::after{
            content: "";
            display: inline-block;
            width: 2.75rem;
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            position: absolute;
            top: 0.375rem;
            right: 0.375rem;
            background-color: #212121;
            background-image: url(../shared/icon_arrow_w.png);
            background-size: 1rem auto;
            background-repeat: no-repeat;
            background-position: center;
            transition: .3s all ease;
        }

        .lang_changer ul li a:hover::after{
            background-color: #bf402f;
        }

        .lang_changer ul li.active a{
            background-color: rgba(191,64,47,0.1);
        }

        .lang_changer ul li.active a::after{
            transform: rotate(90deg);
            background-color: #bf402f;
        }



.spot_detail_box > .box_header{
    background: #666;
}

.spot_detail_box > .box_header .links ul li a{
    color: #666;
}

    .capacity_budget_info{
        background: #fee5e1;
        margin-bottom: 1em;
        padding: 0.75em 1em;
        line-height: 1.4;
        display: flex;
        flex-direction: column;
        gap: 0.5em;
    }

        .capacity_budget_info dl{
            display: flex;
            font-size: 1.2em;
            font-weight: 500;
        }

        .capacity_budget_info dl dt{
            display: flex;
            align-items: flex-start;
            gap: 0.3em;
            white-space: nowrap;
            margin-right: 1em;
        }

        .capacity_budget_info dl dd{
            flex: 1;
        }

.spot_detail_box > .box_inner .figs .fig_large .caption{
    display: block;
    font-size: 0.9em;
    line-height: 1.4;
    text-align: left;
    margin-top: 0.2em;
}

.lang_en .spot_detail_box > .box_inner .text .contact_info > dl > dd dl dt::after{
    content: ":";
    margin-left: 0.2em;
}

/*英語調整*/
.travel_agency.en .spot_intro_msg h2{
    width: 50%;
    line-height: 1.2;
}

.travel_agency.en .spot_intro_msg p{
    width: 50%;
    text-align: center;
}

/*繁体字、韓国語フォント対応*/
.travel_agency.tw .content_title .lbl_ja,
.travel_agency.ko .content_title .lbl_ja,
.travel_agency.tw .spot_intro_msg h2,
.travel_agency.ko .spot_intro_msg h2,
.travel_agency.tw .spot_detail_box > .box_header h2,
.travel_agency.ko .spot_detail_box > .box_header h2{
    font-family: var(--font_family_tw_ko);
}

.travel_agency.tw .spot_detail_box > .box_header .links,
.travel_agency.ko .spot_detail_box > .box_header .links
.travel_agency.tw .spot_detail_box > .box_inner,
.travel_agency.ko .spot_detail_box > .box_inner{
    font-family: var(--font_family_tw_ko2);
}


/*印刷時用は非表示*/
.for_print{
    display: none;
}

/*ipad*/
@media screen and (min-width:1px) and (max-width:1024px){
    .spot_intro_msg::before{
        left: -1rem;
    }

    .spot_intro_msg::after{
        top: 3.5rem;
        right: -6rem;
    }

    /*英語調整*/
    .travel_agency.en .spot_intro_msg h2{
        width: 68%;
    }

    .travel_agency.en .spot_intro_msg p{
        width: 60%;
    }


}
/* ##########SP横向き########## */
@media screen and (min-width:1px) and (max-width:768px) {

}

/* ##########SP########## */
@media screen and (min-width:1px) and (max-width:479px) {
    .spot_intro_msg{
        margin-bottom: 2em;
    }

        .spot_intro_msg::before{
            width: 4rem;
        }

        .spot_intro_msg::after{
            width: 6rem;
            top: 5rem;
            right: -1rem;
        }

    .spot_intro_msg h2::before{
        left: -3.5rem;
    }

    .spot_intro_msg h2::after{
        right: -3.5rem;
    }

    .spot_intro_msg p{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .btn_print_wrapper button{
        height: 3rem;
    }

    .lang_changer{
        width: 100%;
    }

    .lang_changer ul{
        flex-wrap: wrap;
           
    }

        .lang_changer ul li{
            width: calc((100% - 1rem) / 2);
        }

            .lang_changer ul li a{
                width: auto;
                height: 2.75rem;
                padding-right: 1.5rem;
            }

                .lang_changer ul li a::after{
                    width: 2rem;
                }

    .capacity_budget_info{
        display: flex;
        flex-direction: column;
        gap: 0.4em;
        padding: 0.8em 1em;
    }

    .capacity_budget_info dl{
        font-size: 1em;
        line-height: 1.2;
        align-items: flex-start;
    }

    .capacity_budget_info dl dt{
        white-space: nowrap;
    }

        .capacity_budget_info dl dt img{
            width: 1em;
        }

    .capacity_budget_info dl dd{
        flex: 1;
    }

    /*英語調整*/
    .travel_agency.en .spot_intro_msg h2{
        width: 80%;
    }

    .travel_agency.en .spot_intro_msg p{
        width: auto;
    }

}


/* ##########印刷用########## */
@media print{
    html{
        font-size: 9px;
    }

    .column_wrapper{
        width: 100%;
    }


    header,
    .topicpath_content_title,
    .spot_intro_msg,
    .spot_detail_box > .box_header .links,
    .spot_detail_box > .box_inner .text .capacity_budget_info,
    .spot_detail_box > .box_inner .figs,
    footer{
        display: none;
    }

    .for_print{
        display: block;
    }

    .page_body .print_frame{
        position: relative;
    }

    .page_body .print_frame thead{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .page_body .print_frame tbody{
        position: relative;
        padding-top: 50px;
    }

    /*印刷ヘッダーをつけるために設定*/
    /*
    .page_body .print_frame{
        display: table;
    }
    .page_body .print_frame thead{
        display: table-header-group;
    }
    .page_body .print_frame tbody{
        display: table-row-group;
    }
    .page_body .print_frame tr{
        display: table-row;
    }
    .page_body .print_frame td{
        display: table-cell;
    }
    */

    .print_header_box{
        margin-bottom: 1em;
    }

        .print_header_box > .box_inner{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

            .page_body .print_header_box > .box_inner h2{
                margin: 0;
                font-family: "Zen Maru Gothic", sans-serif;
                font-size: 1.5rem;
                font-weight: 600;
            }

            .page_body .print_header_box > .box_inner .ph_site_title{
                width: 19%;
            }

            .page_body .print_header_box > .box_inner .ph_text p{
                line-height: 1.4;
                margin-bottom: 0;
            }



    .spot_list > ul{
        display: block;
    }

    .spot_list > ul > li{
        margin-bottom: 1em;
    }

    .spot_list > ul > li:nth-child(4n + 5){
        /* 標準プロパティ */
        break-before: page;
        /* 古いブラウザ・一部のSafari/iOS用（念のため） */
        page-break-before: always;
        padding-top: 50px;
    }

    .spot_detail_box{
        /* ページをまたいで分割されるのを防ぐ */
        break-inside: avoid;
        -webkit-column-break-inside: avoid; /* 古いブラウザ用 */
        page-break-inside: avoid;           /* Firefox/IE用 */
    }

    .spot_detail_box > .box_header{
        padding: 0.5rem 1.5rem;
    }

    .spot_detail_box > .box_header h2{
        margin-top: 0;
    }

    .spot_detail_box > .box_inner{
        flex-direction: column-reverse;
        padding: 1.5rem 1.5rem 1rem 1.5rem;
        border: 1px solid #666;
        border-top: none;
    }

        .spot_detail_box > .box_inner .text{
            display: flex;
            padding-right: 0;
        }

    .print_figs_box{
        margin-bottom: 1em;
    }

        .print_figs_box > .box_inner{
            display: flex;
            align-items: flex-start;
            gap: 1rem;
        }

            .print_figs_box > .box_inner .capacity_budget_info{
                width: calc((100% - 1rem) / 5 * 2);
                display: flex;
                flex-direction: column;
                gap: 0.5em;
            }

                .print_figs_box > .box_inner .capacity_budget_info dl{
                    line-height: 1.4;
                    align-items: flex-start;
                }

                .print_figs_box > .box_inner .capacity_budget_info dl dt{
                    white-space: nowrap;
                }

                .print_figs_box > .box_inner .capacity_budget_info dl dt img{
                    width: 1em;
                }

                .print_figs_box > .box_inner .capacity_budget_info dl dd{
                    flex: 1;
                }                

            .print_figs_box > .box_inner .print_figs{
                width: calc((100% - 1rem) / 5 * 3);
            }

                .print_figs_box > .box_inner .print_figs ul{
                    display: flex;
                    gap: 1rem;
                }

                .print_figs_box > .box_inner .print_figs ul li{
                    width: calc((100% - 2rem) / 3);
                }

                /*4個目以降は非表示*/
                .print_figs_box > .box_inner .print_figs ul li:nth-child(n + 4){
                    display: none;
                }

    .spot_detail_box > .box_inner .text .exp{
        flex: 1;
        margin-right: 1.5em;
        font-size: 1em;
    }

        .spot_detail_box > .box_inner .text .exp p{
            margin: 0;
            line-height: 1.4;
        }

    .spot_detail_box > .box_inner .text .contact_info{
        margin: 0;
        padding: 0.5em 0 0.5em 1.5em;
        border-top: none;
        border-left: 1px solid #b8b8b8;
        width: 30%;
        line-height: 1.4;
    }

    /*英語調整*/
    .lang_en .spot_detail_box > .box_inner .text{
        font-size: 0.94em;
    }

    .lang_en .spot_detail_box > .box_inner .text .contact_info{
        width: 40%;
    }

        .spot_detail_box > .box_inner .text .contact_info > dl > dt{
            display: none;
        }

        .spot_detail_box > .box_inner .text .contact_info > dl > dd dl{
            margin-bottom: 0;
        }

    /*繁体字、韓国語フォント対応*/
    .travel_agency.tw .page_body .print_header_box > .box_inner h2,
    .travel_agency.ko .page_body .print_header_box > .box_inner h2{
        font-family: var(--font_family_tw_ko);
    }



}