/* 
NOTICE: 
This CSS file contains customized styles for certain pages. Some components could be used in multiple pages.
Please add comment to each component so we can find what component does this style belong to, 
as we will merge CSS files together and remove unnecessary lines or duplicated lines.
When coping with responsive design, please follow the breakpoint in this file.
This file must be loaded after bootstrap.min.css.
*/

/* Desktop Style */
.checklist-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 120px;
}
.checklist-section:last-of-type {
    margin-bottom: 50px;
}
/*-- Checklist--*/
.checklist {
    width: 75%;
    max-width: 754px;
    margin: 60px 0;
}
.checklist-table {
    /* border: 2px solid var(--color-main); */
}
.checklist-tr {
    border-left: 2px solid var(--color-main);
    border-right: 2px solid var(--color-main);
    border-bottom: 2px solid var(--color-main);
    height: 140px;
}
.checklist-tr:first-of-type {
    border-top: 2px solid var(--color-main);
}
.checklist-tr:has(input:checked) {
    background-color: var(--color-background-beige);
}
.checklist-th {
    min-width: 63px;
}
.checklist-td {
    border-left: 1px solid var(--color-main);
}
.checklist-td.desc {
    padding: 0 26px 0 50px;
    font-size: 1.125rem;
}
.checklist-td.checklist-img {
    min-width: 147px;
    text-align: center;
}
.checklist-th {
    text-align: center;
}
.checklist-th .checkbox {
    appearance: none;
}
.checklist-th label {
    position: relative;
    width: 35px;
    height: 35px;
    border: 1.5px solid var(--color-main);
    border-radius: 5px;
    background-color: #FFFFFF;
    cursor: pointer;
}
.checklist-th .checkbox + label::after {
    content: "";
    position: absolute;
    display: none;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 16px;
    border: solid var(--color-main);
    border-width: 0 3px 3px 0;
    transform: translate(-50%, -55%) rotate(45deg);
}
.checklist-th .checkbox:checked + label::after {
    display: block;
}
/*--End of Checklist --*/
/* institution link */
.institution-link {
    display: flex;
    align-items: center;
    gap: 24px;
    background-color: var(--color-light-grayish-orange);
    border: 1.5px solid #FFA302;
    margin-top: 30px;
    width: 100%;
    padding: 26px 20px;
}
.institution-link .description {
    display: flex;
    align-items: center;
    font-size: 1.125rem;
    font-weight: 400;
}
.institution-link .description img {
    margin-right: 10px;
    width: 44px;
}
.institution-link .description p {
    text-align: start;
}
.institution-link .button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #E35304, #F88D01);
    font-size: 14px;
    font-weight: bold;
    color: #FFFFFF;
    min-width: 200px;
    width: 200px;
    height: 37px;
    border-radius: 20px;
}
.institution-link .button::after {
    content: "";
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1.5px solid #FFFFFF;
    border-top: 1.5px solid #FFFFFF;
 }
/* End of institution link */
.blue-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 360px;
    height: 64px;
    font-size: 1.125rem;
    font-weight: bold;
    color: #FFFFFF;
    background-image: linear-gradient(to right, #38457B, #7290B5);
    border-radius: 35px;
    border: none;
    text-decoration: none;
    margin-bottom: 80px;
}
.asterisk-ul {
    font-size: 13px;
    padding-left: 1.25rem;
}
.asterisk-ul .asterisk-li {
    padding-left: 0.25rem;
}
.asterisk-ul .asterisk-li::marker {
    content: "※";
}
.text-link {
    font-weight: bold;
    text-decoration: underline;
}
.contact-wrapper {
    width: 100%;
    margin: 30px 0 72px;
    border: 1.5px solid #FFA302;
    border-radius: 20px;
    padding: 30px 40px;
}
.contact-wrapper .contact-info {
    margin-top: 20px;
    margin-bottom: 0;
    width: 100%;
    padding: 20px 60px 16px;
    background-color: var(--color-light-grayish-orange);
    border: none;
}
.contact-wrapper .contact-info-text {
    font-size: 1.125rem;
    font-weight: bold;
    text-align: start;
}
.contact-wrapper .phoneno_symbol {
    margin-right: 18px;
}
.contact-wrapper .venue {
    padding-top: 12px;
}
/* Offscreen page */
#offscreen {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 1440px;
    height: 2036px;
}
#offscreen .main-container {
    width: 1280px;
    margin: 0 auto;
}
#offscreen .header {
    top: auto;
}
#offscreen .page-maintitle sup {
    font-size: 1.125rem;
}
#offscreen .checklist {
    margin-top: 0;
}
#offscreen .paragraph {
    font-size: 1.125rem;
    line-height: 2rem;
}
#offscreen .qr-box {
    display: flex;
    border: 1.5px solid var(--color-main);
    padding: 8px 10px 8px 45px;
    align-items: center;
    width: 50%;
    height: 120px;
    gap: 30px;
    margin-top: 18px;
}
#offscreen .qr-box .qr-text {
    font-size: 1.125rem;
    line-height: 2rem;
    font-weight: bold;
}
#offscreen .qr-box .qr-img {
    height: 100%;
}
#offscreen .contact-info {
    margin-top: 10px;
    margin-bottom: 40px;
    width: 910px;
    padding: 20px 60px 16px;
    background-color: var(--color-light-grayish-orange);
    border: none;
}
#offscreen .contact-info-text {
    font-size: 1.125rem;
    font-weight: bold;
    text-align: start;
}
#offscreen .phoneno {
    font-size: 31px;
}
#offscreen .phoneno_symbol {
    margin-right: 18px;
}
#offscreen .venue {
    font-size: 13px;
    padding-top: 12px;
}
#offscreen .citation {
    margin-bottom: 0;
}
#offscreen .citation .numbering-ol {
    padding-left: 0;
    counter-reset: item; 
}
#offscreen .citation .numbering-ol .numbering-li {
    list-style: none;
    position: relative;
    padding-left: 1.5rem;
    counter-increment: item;
}
#offscreen .citation .numbering-ol .numbering-li::before {
    content: counter(item) "）";
    position: absolute;
    left: 0;
    top: 0;
    width: 1.8em;
    text-align: right;
}
#offscreen .citation .numbering-ol .numbering-li::marker {
    content: none;
}
#offscreen .footer-bottom .footer-logo {
    align-items: center;
}
#offscreen .footer-bottom .footer-logo .footer-logo-text {
    width: 200px;
    max-width: 200px;
    height: 14px;
}
#offscreen .footer-bottom .footer-logo .footer-logo-text .img-bg {
    width: 100%;
    height: 100%;
    background-size: contain; /* object-fit の代わりにこれを使う */
    background-repeat: no-repeat;
    background-position: center;
}
#offscreen .footer-relations {
    margin-top: 1rem;
}
/* End of Offscreen page */
/* Responsive: Mobile view 390px~768px */
@media (max-width: 767.98px) {
    .checklist-section {
        margin-bottom: 80px;
    }
    /*-- Checklist--*/
    .checklist {
        width: 100%;
        margin-bottom: 40px;
    }
    .checklist-tr, .checklist-th, .checklist-td {
        display: block;
        height: auto;
    }
    .checklist-th {
        padding: 12px 0;
    }
    .checklist-tr {
        margin-bottom: 20px;
        border-top: 2px solid var(--color-main);
    }
    .checklist-tr:last-of-type {
        margin-bottom: 0;
    }
    .checklist-td {
        border-left: none;
        border-top: 1px solid var(--color-main);
    }
    .checklist-td.desc {
        padding: 12px 20px;
    }
    .checklist-td.checklist-img {
        padding: 20px 0;
    }
    /*-- End of Checklist--*/
    .blue-btn {
        font-size: 1.25rem;
        margin-bottom: 40px;
        width: 100%;
    }
    /* institution link */
    .institution-link {
        flex-direction: column;
    }
    .institution-link .description {
        display: block;
        text-align: center;
        padding: 0;
    }
    .institution-link .description img {
        margin-right: auto;
        margin-bottom: 28px;
        width: 76px;
    }
    .institution-link .description p {
        text-align: center;
    }
    /* End of institution link */
    /* Contact wrapper */
    .contact-wrapper {
        padding: 25px 20px;
    }
    .contact-wrapper .contact-info {
        margin-top: 24px;
        padding: 20px 16px;
    }
    .contact-wrapper .phoneno {
        font-size: 25px;
        padding-top: 18px;
    }
    .contact-wrapper .phoneno_symbol {
        max-width: 4rem;
    }
    .contact-wrapper .venue {
        padding-top: 18px;
        line-height: 20px;
    }
    /* End of Contact wrapper */
}
/*--END of mobile responsive--*/

/* Responsive: Tablet view 769px~1080px */
@media (min-width: 768px) and (max-width: 1079.98px) {
}
/*--END of table responsive--*/

/* Responsive: Desktop view 1440px~1920px only if necessary */
@media (min-width: 1440px) and (max-width: 1919.98px) {
}
/*--END of desktop responsive--*/

/* Responsive: Extra Large Desktop view > 1920px */
@media (min-width: 1920px) {
}
/*--END of extra large desktop responsive--*/