/* ----------------------------------------------
body
----------------------------------------------- */
body {
    position: relative;
    width: 100%;
    background-color: #FAE5E5;

}

.sp {
    display: none;
}

.pc {
    display: block;
}

.js-fade {
    opacity: 0;
    visibility: hidden;
    transform: translateY(80px);
    transition: opacity 2s, visibility 1s, transform 1s;
}

.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}



@media screen and (max-width: 768px) {
    .sp {
        display: block;
    }

    .pc {
        display: none;
    }
}

/* ----------------------------------------------
hero
----------------------------------------------- */

.l-hero__wrap {
    width: 95%;
    position: absolute;
    z-index: 100;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
}

.p-mainText-l {
    width: 80%;
    margin: 100px auto 0;
    text-align: center;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 2;
}

.p-mainText {
    width: 80%;
    margin: 20px auto 0;
    text-align: center;
    font-size: 1.8rem;
    line-height: 2;
}

/* ----------------------------------------------
service
----------------------------------------------- */

.l-service {
    margin-top: 80vw;
}

.l-service__wrap {
    width: 95%;
    margin: 0 auto;
    margin-top: 200px;
}

.p-serviseText {
    width: 70%;
    margin-inline: auto;
    margin-top: 60px;
    font-size: 2.2rem;
    font-weight: 600;
    text-align: center;
}


/* ----------------------------------------------
calendar
----------------------------------------------- */
.l-calendar {
    margin-top: 120px;
}

.p-calendar {
    margin-top: 60px;
    padding-inline: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.tab_menu {
    position: relative;
    z-index: 2;
    padding: 10px 35px;
    margin: 0 5px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    transition: all 0.2s ease;
    border: 2px solid #000;
    background-color: #E0BEB6;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
}

.tab_menu:hover {
    color: #838383;
}

.tab_menu:first-of-type {
    margin: 0 5px 0 20px;
}

.tab_menu:last-of-type {
    margin: 0 15px 0 5px;
}

input:checked + .tab_menu {
    background-color: #fff;
    border-bottom: solid 2px #fff;
}

input[name="tab_menu"] {
    display: none;
}

.tab_content {
    display: none;
    z-index: 1;
    clear: both;
    border: solid 2px #000;
    border-radius: 8px;
    padding: 15px 20px;
    margin: 0 0 30px 0;
    position: relative;
    top: 10px;
    background-color: white;
}

#tab_a:checked ~ #tab_a_content,
#tab_b:checked ~ #tab_b_content,
#tab_c:checked ~ #tab_c_content,
#tab_d:checked ~ #tab_d_content,
#tab_e:checked ~ #tab_e_content  {
    display: block;
}

.p-calendarItem {
    display: flex;
    justify-content: center;
    padding: 10px;
    font-size: 20px;
    font-weight: 600;
    width: 100%;
}

.day *:first-child {
    color: #ff838b;
}

.day *:last-child {
    color: #6fb5ff;
}

.day a:last-child {
    color: #000;
    font-family: 'Noto Sans', sans-serif;
}

.day a:last-child:hover {
    color: white;
}

.week *:first-child {
    color: #ff838b;
}

.week *:last-child {
    color: #6fb5ff;
}

.p-calendarItem th,
td {
    text-align: center;
    border: 2px solid #000;
}

.p-calendarItem th {
    padding: 6px 20px;
}

.p-calendarItem td {
    padding: 10px 10px 20px;
    width: 100px;
}

.download-link {
    margin-top: 20px;
}

.download-link a {
    border: 2px solid #000;
    font-weight: 600;
    border-radius: 30px;
    padding: 4px;
    font-size: 12px;
}

.download-link a:hover {
    background-color: #000;
}







/* ----------------------------------------------
pictures
----------------------------------------------- */

.c-title {
    font-size: 60px;
    text-align: center;
    margin-bottom: 40px;
    font-family: "scriptorama-markdown-jf", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.l-pictures {
    margin-top: 120px;
}

.p-pictures {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
}


@media screen and (max-width: 1280px) {

    /* ----------------------------------------------
service
----------------------------------------------- */
    .l-service {
        margin-top: 80vw;
    }

}

@media screen and (max-width: 1000px) {

    /* ----------------------------------------------
service
----------------------------------------------- */
    .l-service {
        margin-top: 100vw;
    }

}



@media screen and (max-width: 768px) {

    /* ----------------------------------------------
body
----------------------------------------------- */
    body {
        position: relative;
        width: 100%;
        background: -moz-linear-gradient(top, #fff 6%, #FAE5E5 20%);
        background: -webkit-linear-gradient(top, #fff 6%, #FAE5E5 20%);
        background: linear-gradient(to bottom, #fff 6%, #FAE5E5 20%);
    }

    /* ----------------------------------------------
hero
----------------------------------------------- */

    .l-hero__wrap {
        width: 95%;
        position: absolute;
        z-index: 100;
        top: 2%;
        left: 50%;
        transform: translateX(-50%);
    }

    .p-mainText-l {
        width: 85%;
        margin: 60px auto 0;
        text-align: center;
        font-size: 1.8rem;
        font-weight: 600;
        line-height: 2;
    }

    .p-mainText {
        width: 85%;
        margin: 20px auto 0;
        text-align: center;
        font-size: 1.4rem;
        line-height: 2;
    }


    /* ----------------------------------------------
calendar
----------------------------------------------- */

    .l-calendar {
        margin-top: 80px;
    }

    .p-calendar {
        margin-top: 40px;
        padding-inline: 10px;
        width: 100%;
        margin-inline: auto;
        display: flex;
        justify-content: center;
    }

    .tab_menu {
        position: relative;
        z-index: 2;
        padding: 4px 10px;
        margin: 0 4px;
        text-align: center;
        font-size: 17px;
        font-weight: bold;
        transition: all 0.2s ease;
        border: 2px solid #000;
        background-color: #E0BEB6;
        cursor: pointer;
        border-radius: 8px 8px 0 0;
    }

    .tab_menu:hover {
        color: #838383;
    }

    .tab_menu:first-of-type {
        margin: 0 5px 0 20px;
    }

    .tab_menu:last-of-type {
        margin: 0 10px 0 5px;
    }

    input:checked + .tab_menu {
        background-color: #fff;
        border-bottom: solid 2px #fff;
    }

    input[name="tab_menu"] {
        display: none;
    }

    .tab_content {
        display: none;
        z-index: 1;
        clear: both;
        border: solid 2px #000;
        border-radius: 8px;
        padding: 10px;
        margin: 0 0 30px 0;
        position: relative;
        top: 3.8px;
    }

    #tab_a:checked ~ #tab_a_content,
    #tab_b:checked ~ #tab_b_content,
    #tab_c:checked ~ #tab_c_content,
    #tab_d:checked ~ #tab_d_content,
    #tab_e:checked ~ #tab_e_content {
        display: block;
    }

    .p-calendarItem {
        display: flex;
        justify-content: center;
        padding-block: 10px;
        padding-inline: 0;
        font-size: 16px;
        width: 100%;
    }

    .day *:first-child {
        color: #ff838b;
    }

    .day *:last-child {
        color: #6fb5ff;
    }

    .week *:first-child {
        color: #ff838b;
    }

    .week *:last-child {
        color: #6fb5ff;
    }

    .p-calendarItem th,
    td {
        text-align: center;
        border: 1px solid #000;
    }

    .p-calendarItem th {
        padding: 6px 12px;
        width: 60px;
    }

    .p-calendarItem td {
        padding: 10px 8px 20px;
    }



    /* ----------------------------------------------
service
----------------------------------------------- */
    .l-service {
        margin-top: 620px;
    }

    .l-service__wrap {
        width: 95%;
        margin: 0 auto;
    }

    .p-serviseText {
        width: 100%;
        margin-top: 20px;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        padding-inline: 20px;
    }




    /* ----------------------------------------------
pictures
----------------------------------------------- */

    .c-title {
        font-size: 40px;
        text-align: center;
        margin-bottom: 20px;
        font-family: "scriptorama-markdown-jf", sans-serif;
        font-weight: 400;
        font-style: normal;
    }

    .l-pictures {
        margin-top: 80px;
    }

    .p-pictures {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2px;
    }
}

@media screen and (max-width: 300px) {

    /* ----------------------------------------------
calendar
----------------------------------------------- */

    .l-calendar {
        margin-top: 100px;
    }

    .p-calendar {
        margin-top: 40px;
        padding-inline: 10px;
        width: 100%;
        margin-inline: auto;
        display: flex;
        justify-content: center;
    }

    .tab_menu {
        position: relative;
        z-index: 2;
        padding: 4px 10px;
        margin: 0 2px;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        transition: all 0.2s ease;
        border: 2px solid #000;
        background-color: #eee;
        cursor: pointer;
        border-radius: 8px 8px 0 0;
    }

    .tab_menu:hover {
        color: #838383;
    }

    .tab_menu:first-of-type {
        margin: 0 2px 0 15px;
    }

    .tab_menu:last-of-type {
        margin: 0 10px 0 2px;
    }

    input:checked + .tab_menu {
        background-color: #fff;
        border-bottom: solid 2px #fff;
    }

    input[name="tab_menu"] {
        display: none;
    }

    .tab_content {
        display: none;
        z-index: 1;
        clear: both;
        border: solid 2px #000;
        border-radius: 8px;
        padding: 10px;
        margin: 0 0 30px 0;
        position: relative;
        top: 3.8px;
    }

    #tab_a:checked ~ #tab_a_content,
    #tab_b:checked ~ #tab_b_content,
    #tab_c:checked ~ #tab_c_content,
    #tab_d:checked ~ #tab_d_content,
    #tab_e:checked ~ #tab_e_content {
        display: block;
    }

    .p-calendarItem {
        display: flex;
        justify-content: center;
        padding-block: 10px;
        padding-inline: 0;
        font-size: 16px;
        width: 100%;
    }

    .day *:first-child {
        color: #ff838b;
    }

    .day *:last-child {
        color: #6fb5ff;
    }

    .week *:first-child {
        color: #ff838b;
    }

    .week *:last-child {
        color: #6fb5ff;
    }

    .p-calendarItem th,
    td {
        text-align: center;
        border: 1px solid #000;
    }

    .p-calendarItem th {
        padding: 4px 4px;
        width: 0px;
    }

    .p-calendarItem td {
        padding: 10px 4px 15px;
    }

    .download-link {
        margin-top: 10px;
    }

}