@charset "urf-8";

@page {
    size: A4 portrait;
    margin: 0mm;
}

@mixin print_color_adjust_none {
    -webkit-print-color-adjust: exact; //safari、Chrome用
    print-color-adjust: exact;
    // @media print {
    //     -webkit-print-color-adjust: economy;
    //     print-color-adjust: economy;
    // }
}

@mixin font_family($type:sans) {
    @if $type == sans { font-family: "Noto Sans JP", serif; }
    @else if $type == serif { font-family: "Noto Serif JP", serif; }
}
.page{
    font-family: "Noto Sans JP", serif;
	width: 210mm;
	height: 297mm;
    // padding: 20mm 0;
    padding: 25mm 0;
	box-sizing: border-box;
    position: relative;
    .main {
        // height: calc(297mm - 40mm);
        height: calc(297mm - 50mm);
        color: #22252C;
        font-size: 10pt;
        // padding: 6mm 4mm;
        padding: 6mm 9mm;
        box-sizing: border-box;
        .columns {
            display: flex;
            .column {
                &>*:first-child { margin-top: 0 !important; }
                &:nth-child(1) {
                    // flex-basis: 134mm;
                    flex-basis: 131mm;
                    margin-right: 2mm;
                }
                &:nth-child(2) { flex-basis: 70mm; }
                h2 {
                    @include print_color_adjust_none();
                    @include font_family(serif);
                    font-size: 13pt;
                    font-weight: bold;
                    display: flex;
                    align-items: center;
                    padding-left: 2mm;
                    box-sizing: border-box;
                    margin-top: 5.5mm;
                    margin-bottom: 3.5mm;
                    .box{
                        display: inline-block;
                        width: 2.5mm;
                        height: 2.5mm;
                        background-color: #493365;
                        margin-right: 2mm;
                    }
                }
                .seat-imgs {
                    display: flex;
                    .img {
                        // flex-basis: 62mm;
                        // flex-basis: 58mm;
                        // flex-basis: 60mm;
                        flex-basis: 59mm;
                        margin-right: 3mm;
                        &>img {
                            max-width: 100%;
                            height: auto;
                        }
                    }
                }
                table.specs-table {
                    @include print_color_adjust_none();
                    width: 100%;
                    box-sizing: border-box;
                    tr {
                        border: solid 0.5mm #BEBEBE;
                        border-top: none;
                        &:first-child { border-top: solid 0.5mm #BEBEBE; }
                        *,th,td {
                            display: block;
                            width: 100%;
                            box-sizing: border-box;
                        }
                        th,td {
                            font-size: 10pt;
                            font-weight: 500;
                            padding: 3mm;
                            // height: 9.7mm;
                        }
                        th {
                            border-bottom: solid 0.5mm #BEBEBE;
                            background-color: #EBE7E1;
                        }
                        td { background-color: #F9F9F9; }
                    }
                }
                .equip-list {
                    @include print_color_adjust_none();
                    display: flex;
                    flex-wrap: wrap;
                    .list-item {
                        font-size: 7.5pt;
                        font-weight: bold;
                        color: #ffffff;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 1mm; 
                        // width: 16.3mm;
                        // height: 16.3mm;
                        width: 15.7mm;
                        height: 15.7mm;
                        background-color: #cecece;
                        padding-bottom: 3mm;
                        box-sizing: border-box;
                        margin-right: 1mm;
                        margin-bottom: 1mm;
                        position: relative;
                        &:nth-child(4n) { margin-right: 0; }
                        &:nth-child(n+5) { margin-bottom: 0; }
                        &.selected { background-color: #22252C; }
                        img {
                            max-width: 42px;
                        }
                        span {
                            text-align: center;
                            position: absolute;
                            bottom: 2mm;
                            left: 0;
                            right: 0;
                            margin: auto;
                        }
                    }
                }
                .gallery {
                    &-item {
                        border: solid 0.5mm #F5F1EB;
                        margin-bottom: 2mm;
                        text-align: center;
                        // background-color: #000000;
                        background-color: #000000;
                        @include print_color_adjust_none();
                        &:last-child { margin-bottom: 0; }
                    }
                    img {
                        // width: 100%;
                        // height: 31.5mm;
                        // height: 29.2mm;
                        width: calc(100% - 10mm);
                        height: 35.0mm;
                        object-fit: cover;
                    }
                }
            }
        }
    }
    .header {
        @include print_color_adjust_none();
        font-size: 16pt;
        font-weight: bold;
        color: #ffffff;
        background-color: #22252C !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        // padding: 0 6mm;
        padding: 5mm 11mm 0;
        box-sizing: border-box;
        // height: 20mm;
        height: 25mm;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    .footer {
        @include print_color_adjust_none();
        color: #ffffff;
        background-color: #493365 !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        // padding: 0 4mm;
        padding: 0 9mm 5mm;
        box-sizing: border-box;
        // height: 20mm;
        height: 25mm;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        .sitename {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            .outline { font-size: 7.5pt; }
            &>img { height: 7mm; }
        }
        .detail {
            font-size: 7.5pt;
            line-height: 1.4;
        }
        .bg {
            position: absolute;
            top: 0;
            left: 0;right: 0;
            bottom: 0;
            margin: auto;
            svg { fill: #493365; }
        }
    }
}

@media print {
    .page {
        padding-left: 0;
        padding-right: 0;
        // margin: 0;
    }
    .note { display: none; }
}

@media screen {
    html, body { background-color: #C0B3A0; }
    .page {
        margin: 12.5mm auto;
        background-color: #ffffff;
    }
    .note {
        background-color: #ffffff;
        color: #22252C;
        @include font_family(sans);
        font-weight: 400;
        font-size: 14px;
        line-height: 1.5;
        box-sizing: border-box;
        padding: 20px 25px;
        box-sizing: border-box;
        strong { font-weight: 500; }
        ul {
            display: flex;
            align-items: center;
            justify-content: center;
            li {
                a {
                    display: inline-flex;
                    align-items: center;
                    .text { margin-right: 0.8em; }
                    &.print-button {
                        cursor: pointer;
                        @include font_family(sans);
                        position: relative;
                        &:hover {
                            text-decoration: underline;
                            .toggle { opacity: 1; }
                        }
                        .icon { width: 18px; }
                        .toggle {
                            @include font_family(sans);
                            opacity: 0;
                            font-size: 12px;
                            padding: 0.4em;
                            box-sizing: border-box;
                            background-color: #22252C;
                            border: solid 1px #fff;
                            border-radius: 5px;
                            position: absolute;
                            right: -7em;
                            bottom: -2.5em;
                        }
                        // position: fixed;
                        // right: 5vw;
                        // bottom: 10vh;
                    }
                }
            }
        }
    }
}