@charset "utf-8";
.mobile {
    display: none;
}

.body-page {
    margin-top: 10rem;
    font-family: 'Noto Sans JP', sans-serif !important;
}
a{
    text-decoration: none;
}
h1{
    font-size: calc(1.35rem + 1.2vw);
}
h3{
    font-size: 1.575rem;
    font-weight: 400;
    margin: unset;
}
/* Toggle Tabs */
.toggle-tabs {
    text-align: center;
}

.toggle-tabs ul.nav.nav-tabs {
    width: 65vw;
}

.toggle-tabs ul.nav.nav-tabs li {
    position: relative;
    pointer-events: none;
}

.nav-tabs>li>a {
    font-size: 1.3rem;
}

.toggle-tabs ul li i {
    position: absolute;
    top: -10px;
    right: -15px;
    font-size: 6.1rem;
    color: #CCCCCC;
    z-index: 1;
    filter: drop-shadow(6px 0 0 white);
}

.toggle-tabs ul li.active i {
    color: #0f947c;
}

.toggle-tabs .nav-tabs {
    border: unset;
    display: flex;
    width: 65vw;
    margin: auto;
}

.tab-content {
    display: flex;
    justify-content: center;
}

/* Style Nav (style-nav.css) */
ul.nav.nav-tabs {
    clear: both;
    margin-top: 20px;
    display: inline-flex;
    justify-content:space-between;
    width: 100%;
}
ul.nav.nav-tabs li {
    list-style: none;
    width: 32.8%;
}
.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.nav-tabs>li>a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;

    color: black;
    background-color:#CCCCCC;
    border-top-right-radius: .5rem;
    border-top-left-radius: .5rem;
    padding:1rem;
    text-align: center;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    cursor: default;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
    background-color: #0f947c;
    color: #fff;
}
.nav>li {
    position: relative;
    display: block;
}
.nav-tabs>li {
    float: left;
    margin-bottom: -1px;
}
.nav:after, .nav:before, .navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before, .pager:after, .pager:before, .panel-body:after, .panel-body:before, .row:after, .row:before {
    display: table;
    content: " ";
}
.nav:after, .navbar-collapse:after, .navbar-header:after, .navbar:after, .pager:after, .panel-body:after, .row:after {
    clear: both;
}
.nav-tabs {
    border-bottom: 1px solid #ddd;
}
.tab-pane:not(.active) {
    display: none;
}

ul.nav.nav-tabs.nav_mobile {
    display: none;
}

.nav-tabs img {
    width: 100%;
}

/* Second Tab */
.second-tab .registration-notes {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--div-background);
    padding: 1rem;
    font-weight: normal;
}

/* Default (tab 3) */
.content{
    max-width: 720px;}
    .content h1{
        color: #0f947c;
        font-size: 2rem;
        margin: 0px
    }
    .content h1::before{
        content: '-';
        color: #0f947c;
        font-weight: bold;
        font-size: 5rem;
        vertical-align: sub;}
.content1{
    position: relative;}
    .content1 p{
        width: calc(100% - 10vw);
        max-width: 920px;
        margin-left: auto;
        margin-right: auto;
        border-bottom: solid 2px #5cbda2;
        padding: 20px 20px 10px 10px;
        font-size: 2.4rem;
    }

.info-title{
    width:30%;
    margin: 5px 0;}
    .info-title p{
        margin: 0;
        background-color: #0f947c;
        padding: 1rem;
        color:#fff;}
.info-content{
    width: 70%;
    margin: 5px 0;}
    .info-content input,
    .info-content textarea{
        border-radius: 10px;
        width: calc(100% - 3.6rem);
        padding: 1rem;
        margin-left: 1rem;
        border: 1px solid #aeaeae;}
    .info-content select {
        border-radius: 10px;
        width: calc(100% - 2.4rem);
        padding: 1rem;
        margin-left: 1rem;
        border: 1px solid #aeaeae;}

.opening-rules .rules-details {
    border: 1px solid;
    height: 30rem;
    overflow: scroll;
}


/* Tab 1 */
input,
input[type=text],
input[type=password],
input[type=date] {
    border: 0.5px solid;
    padding: 1rem 0.5rem;
    text-align: left;
}

/* Tabs contents */
/* First Tabs */
.first-tab,
.second-tab,
.third-tab {
    width: 65vw;
}

.title {
    margin: 1rem 0;
}

.title h1 {
    padding: 1rem;
    background: #edf9f8;
}

.title .desc {
    font-size: 14px;
    margin: 2rem 0;
}

.title .email-input {
    display: flex;
    align-items: center;
}

.opening-rules .rules-details {
    border: 1px solid;
    height: 30rem;
    overflow: scroll;
}

.title .email-input h3 {
    font-weight: bold;
    margin-right: 2rem;
}

.title .email-input input {
    padding: 1rem 0;
    flex: 1;
}


.link-rules {
    display: flex;
    flex-direction: column;
    margin: 1rem 0;
}

.link-rules a {
    color: #212529;
    text-decoration: underline;
}

.link-rules a:hover {
    color: green;
}

.agree {
    color: #212529;
    background: #edf9f8;
    height: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 2rem 0;
}

.submit-button {
    display: flex;
    justify-content: center;
}

.second-tab .second-submit-button {
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 3rem;
}

.second-tab .second-submit-button button {
    cursor: pointer;
    width: 30rem;
    background: none;
    color: black !important;
    border: 1px solid;
    padding: 1.5rem;
    border-radius: 1rem;
    font-size: 2rem;
}

.submit-button button {
    cursor: pointer;
    width: 30rem;
    padding: 1.5rem;
    font-size: 2rem;
    border-radius: 1rem;
    background: #0f947c;
}

.submit-button .btn-back {
    cursor: pointer;
    margin-right: 10px;
    /* background-color: #fff; */
    /*border: 1px solid black;
    color: black;*/
}

.form-submit {
    cursor: pointer;
    padding: 1.2rem 4rem;
    border: unset;
    border-radius: 0.5rem;
    background: #008972;
    width: 28rem;
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 3rem;
}

.post-code-info {
    display: flex;
    border-radius: 10px;
    width: 63.5%;
    padding: 1rem;
    margin-left: 1rem;
    border: 1px solid black;
    align-items: center;
    flex-wrap: wrap;
}

.post-code-info p {
    margin: 0 10px;
}

.post-code-info button {
    margin-left: 20px;
    padding: 10px;
    border: 1px solid #aeaeae;
    background-color: #0f947c;
    color: white;
    border-radius: 10px;
}

.post-code-info input {
    width: 20%;
    border-radius: 10px;
    border: 1px solid #aeaeae;
    padding: 10px;
}

@media (max-aspect-ratio: 10/9) {
    .container{
        margin-left: 5vw;
        margin-right: 5vw;
    }
    .toggle-tabs ul.nav.nav-tabs,
    .first-tab, .second-tab, .third-tab {
        width: 100%;
    }

    .title .desc{
        font-size: 14px;
    }

    /* Tab 1 */
    .title .email-input {
        flex-direction: column;
    }
    .title .email-input h3,
    .title .email-input input {
        width: 100%;
        margin: unset;
        padding: 1rem 0;
    }
    .title .email-input h3 {
        background: var(--highlight-box);
    }
    .link-rules a {
        font-size: 1.2rem;
    }
    .agree span {
        font-size: 1rem;
    }


    /* Tab 3 */
    .form-pc-view {
        display: none;
    }
    .form-mobile-view {
        display: flex;
        flex-direction: column;
    }
    .form-first-part,
    .form-second-part,
    .form-third-part,
    .form-fourth-part,
    .form-fifth-part {
        margin: 1rem;
    }

    .first-label,
    .second-label,
    .third-label,
    .fourth-label,
    .fifth-label {
        padding: 1rem;
        background: var(--contractor-primary);
        color: #fff;
    }
    .first-content-items,
    .second-content-items,
    .third-content-items,
    .fourth-content-items,
    .fifth-content-items {
        display: flex;
        flex-direction: column;
    }
    .first-content-items label,
    .second-content-items label,
    .third-content-items label,
    .fourth-content-items label,
    .fifth-content-items label {
        margin-top: 1rem;
        padding: 0.3rem 1rem;
    }
    .first-content-items label span,
    .second-content-items label span,
    .third-content-items label span,
    .fourth-content-items label span,
    .fifth-content-items label span {
        color: red;
    }

    .tel-number,
    .post-code-number {
        display: flex;
    }
    .tel-number {
        align-items: center;
    }
    .post-code-number .number-area {
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex: 1;
    }
    .post-code-number .number-area input {
        width: calc(100%/3);
        /* margin: 0 1rem; */
    }
    .post-code-number button {
        border: unset;
        width: calc(100%/3);
        border-radius: 0.5rem;
        background: var(--contractor-primary);
        color: white;
    }
    .insurance textarea,
    .qualifications textarea,
    .license textarea,
    .various-identifications textarea,
    .registration-notification textarea {
        border: 0.5px solid;
        height: 6rem;
    }
    .comment textarea {
        height: 9rem;
        border: 0.5px solid;
    }

    .submit-button button,
    .second-tab .second-submit-button button,
    .form-mobile-view .form-submit {
        width: calc(100vw/2.5);
        padding: 0.5rem 0;
        font-size: 1.7rem;
        border-radius: 1rem;
    }
    .payment select {
        width: 100%;
    }

    .third-content-items .label{
        margin-top: 1rem;
        padding: 0.3rem 1rem;
    }
    .third-content-items .label p {
        font-size: 1.3rem;
        font-weight: 500;
    }
    .third-content-items .label span{
        color: red;
    }

    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }

    .toggle-tabs .nav-tabs {
        width: 100%;
    }
}

@media(max-width: 480px) {
    .post-code-info p {
        padding: 0;
        margin: 0;
    }
    .post-code-info input{
        width: 25%;
        padding: 1rem 0.5rem;
    }

    .post-code-info button {
        margin-left: 3px;
        padding: 10px 2px;
    }
}