/*
Theme Name: tac-staging-local-2
Theme URI: テーマのURL
Description: テーマの説明
Version: バージョン
Author: テーマを作った人の名前
Author URI: テーマを作った人のURL
License: ライセンス
License URI: ライセンスURL
Tags: タグ
*/
@charset "UTF-8";

body {
    background-image: url(./assets/images/bg-pattern.png);
    background-size: auto;
    background-position: top left;
    background-repeat: repeat;
    font-family: Arial, sans-serif;
    line-height: 1.5;
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    width: 100%;
}

body main {
    width: 980px;
}

@media (max-width: 768px) {
    body main {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 100px;
    }
}

a {
    color: #FF1555;
    text-decoration: none;
    transition: 0.3s ease;
}

a:hover {
    opacity: 0.3;
}

ul {
    padding: 0;
}

@media (max-width: 768px) {
    .pc {
        display: none;
    }
}

.sp {
    display: none;
}

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

body main {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 40px;
    width: 980px;
}

@media (max-width: 768px) {
    body main {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 100px;
    }
}

body main .page-top section.kv {
    margin-top: 40px;
}

@media (max-width: 768px) {
    body main .page-top section.kv {
        margin-top: 0px;
    }
}

body main .page-top section.kv .slideshow {
    position: relative;
    width: 100%;
    height: 264px;
    overflow: hidden;
}

@media (max-width: 768px) {
    body main .page-top section.kv .slideshow {
        height: 335px;
    }
}

body main .page-top section.kv .slideshow .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

body main .page-top section.kv .slideshow .slide.active {
    opacity: 1;
    z-index: 1;
}

body main .page-top section.kv .slideshow img.sp {
    display: none;
}

@media (max-width: 768px) {
    body main .page-top section.kv .slideshow img.sp {
        display: block;
        width: 100%;
        height: auto;
    }
}

body main .page-top section.about {
    margin-top: 40px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 24px;
    background-color: white;
}

@media (max-width: 768px) {
    body main .page-top section.about {
        padding: 16px;
    }
}

body main .page-top section.about p.title {

    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1em;

    color: #FF1555;
    font-size: 1.25rem;
    line-height: 100%;
}

body main .page-top section.about p.text {
    line-height: 150%;
    text-align: justify;
}

body main .page-top section.about p.sub-text {
    color: #999;
    font-size: 0.75rem;
    line-height: 150%;
}

body main .page-top section.contents {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 40px;
}

body main .page-top section.contents .credit,
body main .page-top section.contents .library {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    gap: 40px;
}

@media (max-width: 768px) {

    body main .page-top section.contents .credit,
    body main .page-top section.contents .library {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 24px;
    }
}

body main .page-top section.contents .credit img.image,
body main .page-top section.contents .library img.image {
    width: 300px;
}

@media (max-width: 768px) {

    body main .page-top section.contents .credit img.image,
    body main .page-top section.contents .library img.image {
        display: none;
    }
}

body main .page-top section.contents .credit .block,
body main .page-top section.contents .library .block {
    background-color: white;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 24px;
}

@media (max-width: 768px) {

    body main .page-top section.contents .credit .block,
    body main .page-top section.contents .library .block {
        padding: 16px;
    }
}

body main .page-top section.contents .credit .block .title,
body main .page-top section.contents .library .block .title {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 8px;
}

@media (max-width: 768px) {

    body main .page-top section.contents .credit .block .title,
    body main .page-top section.contents .library .block .title {
        flex-direction: column;
        align-items: start;
    }
}

body main .page-top section.contents .credit .block .title p.title,
body main .page-top section.contents .library .block .title p.title {
    font-size: 1.5rem;
}

@media (max-width: 768px) {

    body main .page-top section.contents .credit .block .title p.title,
    body main .page-top section.contents .library .block .title p.title {
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.2;
    }
}

body main .page-top section.contents .credit .block .title p.english,
body main .page-top section.contents .library .block .title p.english {
    color: #999;
    font-size: 0.75rem;
    line-height: 150%;
}

body main .page-top section.contents .credit .block .title-2,
body main .page-top section.contents .library .block .title-2 {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 4px;
}

body main .page-top section.contents .credit .block .title-2 p.title,
body main .page-top section.contents .library .block .title-2 p.title {
    font-size: 1.5rem;
    line-height: 1.2;
}

@media (max-width: 768px) {

    body main .page-top section.contents .credit .block .title-2 p.title,
    body main .page-top section.contents .library .block .title-2 p.title {
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.2;
    }
}

body main .page-top section.contents .credit .block .title-2 p.english,
body main .page-top section.contents .library .block .title-2 p.english {
    color: #999;
    font-size: 0.75rem;
    line-height: 150%;
}

body main .page-top section.contents .credit .block .contents,
body main .page-top section.contents .library .block .contents {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 8px;
}

body main .page-top section.contents .credit .block .contents p.english,
body main .page-top section.contents .library .block .contents p.english {
    color: #999;
    font-size: 0.75rem;
    line-height: 150%;
}

body main .page-top section.contents .credit .block .contents a,
body main .page-top section.contents .library .block .contents a {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    margin-left: auto;
}

body main .page-credit {
    width: 100%;
}

body main .page-credit section.toggle {
    margin-top: 40px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 40px;
}

@media (max-width: 768px) {
    body main .page-credit section.toggle {
        display: none;
    }
}

body main .page-credit section.toggle .block-wrap {
    background-color: #FF1555;
    width: 100%;
}

body main .page-credit section.toggle .block-wrap .block {
    position: relative;
    top: -16px;
    left: -16px;
    background-color: white;
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 0px;
}

body main .page-credit section.toggle .block-wrap .block p {
    text-align: center;
}

body main .page-credit section.toggle .block-wrap .block p.text {
    font-size: 1.5rem;
}

body main .page-credit section.toggle .block-wrap .block p.english {
    color: #999;
    font-size: 0.75rem;
    line-height: 150%;
}

body main .page-credit section.toggle a.library-btn {
    width: 100%;
    padding: 24px 0;
    background-color: white;
    border: 1px solid #FF1555;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 0px;
}

body main .page-credit section.toggle a.library-btn:hover {
    background-color: #FF1555;
    color: white;
    opacity: 1;
}

body main .page-credit section.toggle a.library-btn:hover span.text,
body main .page-credit section.toggle a.library-btn:hover span.english {
    color: white;
}

body main .page-credit section.toggle a.library-btn span.text {
    font-size: 1.5rem;
}

body main .page-credit section.toggle a.library-btn span.english {
    color: #999;
    font-size: 0.75rem;
    line-height: 150%;
}

body main .page-credit section.about {
    margin-top: 40px;
}

@media (max-width: 768px) {
    body main .page-credit section.about {
        margin-top: 0px;
    }
}

body main .page-credit section.about .block {
    background-color: white;
    padding: 40px;
}

@media (max-width: 768px) {
    body main .page-credit section.about .block {
        padding: 16px;
    }
}

body main .page-credit section.about .block p.text {
    color: #333;
    font-size: 1.25rem;
    line-height: 100%;
}

@media (max-width: 768px) {
    body main .page-credit section.about .block p.text {
        font-size: 1rem;
        font-weight: bold;
        line-height: 150%;
    }
}

body main .page-credit section.about .block p.sub-text {
    margin-top: 24px;
}

@media (max-width: 768px) {
    body main .page-credit section.about .block p.sub-text {
        margin-top: 8px;
    }
}

body main .page-credit section.school {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

body main .page-credit section.school .block-1,
body main .page-credit section.school .block-2,
body main .page-credit section.school .block-3,
body main .page-credit section.school .block-4,
body main .page-credit section.school .block-5,
body main .page-credit section.school .block-6 {
    margin-top: 40px;
    background: white;
    padding: 40px;
}

@media (max-width: 768px) {

    body main .page-credit section.school .block-1,
    body main .page-credit section.school .block-2,
    body main .page-credit section.school .block-3,
    body main .page-credit section.school .block-4,
    body main .page-credit section.school .block-5,
    body main .page-credit section.school .block-6 {
        padding: 16px;
        margin-top: 24px;
    }
}

body main .page-credit section.school .block-1 .box-title,
body main .page-credit section.school .block-2 .box-title,
body main .page-credit section.school .block-3 .box-title,
body main .page-credit section.school .block-4 .box-title,
body main .page-credit section.school .block-5 .box-title,
body main .page-credit section.school .block-6 .box-title {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    gap: 40px;
}

@media (max-width: 768px) {

    body main .page-credit section.school .block-1 .box-title,
    body main .page-credit section.school .block-2 .box-title,
    body main .page-credit section.school .block-3 .box-title,
    body main .page-credit section.school .block-4 .box-title,
    body main .page-credit section.school .block-5 .box-title,
    body main .page-credit section.school .block-6 .box-title {
        flex-direction: column;
        gap: 16px;
    }
}

body main .page-credit section.school .block-1 .box-title img,
body main .page-credit section.school .block-2 .box-title img,
body main .page-credit section.school .block-3 .box-title img,
body main .page-credit section.school .block-4 .box-title img,
body main .page-credit section.school .block-5 .box-title img,
body main .page-credit section.school .block-6 .box-title img {
    width: 380px;
}

body main .page-credit section.school .block-1 .box-title .box-text p.title,
body main .page-credit section.school .block-2 .box-title .box-text p.title,
body main .page-credit section.school .block-3 .box-title .box-text p.title,
body main .page-credit section.school .block-4 .box-title .box-text p.title,
body main .page-credit section.school .block-5 .box-title .box-text p.title,
body main .page-credit section.school .block-6 .box-title .box-text p.title {
    border-bottom: solid 1px #FF1555;
    padding-bottom: 16px;
    color: #333;
    font-size: 1.25rem;
    line-height: 100%;
}

@media (max-width: 768px) {

    body main .page-credit section.school .block-1 .box-title .box-text p.title,
    body main .page-credit section.school .block-2 .box-title .box-text p.title,
    body main .page-credit section.school .block-3 .box-title .box-text p.title,
    body main .page-credit section.school .block-4 .box-title .box-text p.title,
    body main .page-credit section.school .block-5 .box-title .box-text p.title,
    body main .page-credit section.school .block-6 .box-title .box-text p.title {
        font-size: 1rem;
        font-weight: bold;
        line-height: 150%;
    }
}

body main .page-credit section.school .block-1 .box-title .box-text p.text,
body main .page-credit section.school .block-2 .box-title .box-text p.text,
body main .page-credit section.school .block-3 .box-title .box-text p.text,
body main .page-credit section.school .block-4 .box-title .box-text p.text,
body main .page-credit section.school .block-5 .box-title .box-text p.text,
body main .page-credit section.school .block-6 .box-title .box-text p.text {
    line-height: 150%;
    margin-top: 16px;
    color: #333;
    font-size: 1.25rem;
    line-height: 150%;
}

@media (max-width: 768px) {

    body main .page-credit section.school .block-1 .box-title .box-text p.text,
    body main .page-credit section.school .block-2 .box-title .box-text p.text,
    body main .page-credit section.school .block-3 .box-title .box-text p.text,
    body main .page-credit section.school .block-4 .box-title .box-text p.text,
    body main .page-credit section.school .block-5 .box-title .box-text p.text,
    body main .page-credit section.school .block-6 .box-title .box-text p.text {
        font-size: 1rem;
        font-weight: bold;
        line-height: 150%;
    }
}

body main .page-credit section.school .block-1 .box-title .box-text a.go-school-btn,
body main .page-credit section.school .block-1 .box-title .box-text a.go-ichiran-btn,
body main .page-credit section.school .block-2 .box-title .box-text a.go-school-btn,
body main .page-credit section.school .block-2 .box-title .box-text a.go-ichiran-btn,
body main .page-credit section.school .block-3 .box-title .box-text a.go-school-btn,
body main .page-credit section.school .block-3 .box-title .box-text a.go-ichiran-btn,
body main .page-credit section.school .block-4 .box-title .box-text a.go-school-btn,
body main .page-credit section.school .block-4 .box-title .box-text a.go-ichiran-btn,
body main .page-credit section.school .block-5 .box-title .box-text a.go-school-btn,
body main .page-credit section.school .block-5 .box-title .box-text a.go-ichiran-btn,
body main .page-credit section.school .block-6 .box-title .box-text a.go-school-btn,
body main .page-credit section.school .block-6 .box-title .box-text a.go-ichiran-btn {
    margin-top: 16px;
    width: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    gap: 8px;
}

body main .page-credit section.school .block-1 .box-title .box-text a.go-school-btn img,
body main .page-credit section.school .block-1 .box-title .box-text a.go-ichiran-btn img,
body main .page-credit section.school .block-2 .box-title .box-text a.go-school-btn img,
body main .page-credit section.school .block-2 .box-title .box-text a.go-ichiran-btn img,
body main .page-credit section.school .block-3 .box-title .box-text a.go-school-btn img,
body main .page-credit section.school .block-3 .box-title .box-text a.go-ichiran-btn img,
body main .page-credit section.school .block-4 .box-title .box-text a.go-school-btn img,
body main .page-credit section.school .block-4 .box-title .box-text a.go-ichiran-btn img,
body main .page-credit section.school .block-5 .box-title .box-text a.go-school-btn img,
body main .page-credit section.school .block-5 .box-title .box-text a.go-ichiran-btn img,
body main .page-credit section.school .block-6 .box-title .box-text a.go-school-btn img,
body main .page-credit section.school .block-6 .box-title .box-text a.go-ichiran-btn img {
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

body main .page-credit section.school .block-1 .box-title .box-text a.go-school-btn .text,
body main .page-credit section.school .block-1 .box-title .box-text a.go-ichiran-btn .text,
body main .page-credit section.school .block-2 .box-title .box-text a.go-school-btn .text,
body main .page-credit section.school .block-2 .box-title .box-text a.go-ichiran-btn .text,
body main .page-credit section.school .block-3 .box-title .box-text a.go-school-btn .text,
body main .page-credit section.school .block-3 .box-title .box-text a.go-ichiran-btn .text,
body main .page-credit section.school .block-4 .box-title .box-text a.go-school-btn .text,
body main .page-credit section.school .block-4 .box-title .box-text a.go-ichiran-btn .text,
body main .page-credit section.school .block-5 .box-title .box-text a.go-school-btn .text,
body main .page-credit section.school .block-5 .box-title .box-text a.go-ichiran-btn .text,
body main .page-credit section.school .block-6 .box-title .box-text a.go-school-btn .text,
body main .page-credit section.school .block-6 .box-title .box-text a.go-ichiran-btn .text {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 0px;
}

body main .page-credit section.school .block-1 .box-title .box-text a.go-school-btn .text span.text,
body main .page-credit section.school .block-1 .box-title .box-text a.go-ichiran-btn .text span.text,
body main .page-credit section.school .block-2 .box-title .box-text a.go-school-btn .text span.text,
body main .page-credit section.school .block-2 .box-title .box-text a.go-ichiran-btn .text span.text,
body main .page-credit section.school .block-3 .box-title .box-text a.go-school-btn .text span.text,
body main .page-credit section.school .block-3 .box-title .box-text a.go-ichiran-btn .text span.text,
body main .page-credit section.school .block-4 .box-title .box-text a.go-school-btn .text span.text,
body main .page-credit section.school .block-4 .box-title .box-text a.go-ichiran-btn .text span.text,
body main .page-credit section.school .block-5 .box-title .box-text a.go-school-btn .text span.text,
body main .page-credit section.school .block-5 .box-title .box-text a.go-ichiran-btn .text span.text,
body main .page-credit section.school .block-6 .box-title .box-text a.go-school-btn .text span.text,
body main .page-credit section.school .block-6 .box-title .box-text a.go-ichiran-btn .text span.text {
    font-size: 14px;
    font-weight: bold;
}

body main .page-credit section.school .block-1 .box-title .box-text a.go-school-btn .text span.english,
body main .page-credit section.school .block-1 .box-title .box-text a.go-ichiran-btn .text span.english,
body main .page-credit section.school .block-2 .box-title .box-text a.go-school-btn .text span.english,
body main .page-credit section.school .block-2 .box-title .box-text a.go-ichiran-btn .text span.english,
body main .page-credit section.school .block-3 .box-title .box-text a.go-school-btn .text span.english,
body main .page-credit section.school .block-3 .box-title .box-text a.go-ichiran-btn .text span.english,
body main .page-credit section.school .block-4 .box-title .box-text a.go-school-btn .text span.english,
body main .page-credit section.school .block-4 .box-title .box-text a.go-ichiran-btn .text span.english,
body main .page-credit section.school .block-5 .box-title .box-text a.go-school-btn .text span.english,
body main .page-credit section.school .block-5 .box-title .box-text a.go-ichiran-btn .text span.english,
body main .page-credit section.school .block-6 .box-title .box-text a.go-school-btn .text span.english,
body main .page-credit section.school .block-6 .box-title .box-text a.go-ichiran-btn .text span.english {
    font-size: 12px;
}

body main .page-credit section.school .box-kamoku .line-wrap {
    margin-top: 16px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 8px;
}

body main .page-credit section.school .box-kamoku .line-wrap .line-left {
    background-color: #eee;
    width: 8px;
    height: 1px;
}

body main .page-credit section.school .box-kamoku .line-wrap .line-right {
    background-color: #eee;
    flex-grow: 1;
    height: 1px;
}

body main .page-credit section.school .box-kamoku p.text {
    margin-top: 16px;
}

body main .page-credit section.school .box-kamoku a.link {
    margin-top: 16px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 0px;
}

body main .page-credit section.school .box-kamoku a.link span.text {
    font-size: 14px;
    font-weight: bold;
}

body main .page-credit section.how-to-use {
    margin-top: 40px;
    background-color: white;
    padding: 40px;
}

@media (max-width: 768px) {
    body main .page-credit section.how-to-use {
        padding: 16px;
        margin-top: 24px;
    }
}

body main .page-credit section.how-to-use .title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
    font-size: 1.25rem;

}

@media (max-width: 768px) {
    body main .page-credit section.how-to-use .title {
        flex-direction: column;
        gap: 16px;
    }
}

body main .page-credit section.how-to-use .title .text {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 8px;
}

body main .page-credit section.how-to-use .title .text p.title {

    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1em;

    color: #FF1555;
    font-size: 1.25rem;
    line-height: 100%;

}

body main .page-credit section.how-to-use .title a.link {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 0px;
}

body main .page-credit section.how-to-use ul.list {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
}

body main .page-credit section.how-to-use ul.list li.items {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    border-top: solid 1px #FF1555;
    padding: 40px 0;
}

@media (max-width: 768px) {
    body main .page-credit section.how-to-use ul.list li.items {
        padding: 16px 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

body main .page-credit section.how-to-use ul.list li.items .number-title {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: flex-start;
    gap: 8px;
}

body main .page-credit section.how-to-use ul.list li.items .number-title p.number {
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1em;

    color: #FF1555;
    font-size: 1.25rem;
    line-height: 100%;
    margin-right: 16px;
}

body main .page-credit section.how-to-use ul.list li.items .number-title p.title {
    width: 200px;
    margin-right: 16px;
    color: #333;
    font-size: 1.25rem;
    line-height: 100%;
}

@media (max-width: 768px) {
    body main .page-credit section.how-to-use ul.list li.items .number-title p.title {
        font-size: 1rem;
        font-weight: bold;
        line-height: 150%;
    }
}

@media (max-width: 768px) {
    body main .page-credit section.how-to-use ul.list li.items .number-title p.title {
        width: 100%;
    }
}

body main .page-credit section.how-to-use ul.list li.items:nth-child(4) {
    padding-bottom: 0px;
}

body main .page-credit section.how-to-use ul.list li.items .text {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 8px;
}

body main .page-credit section.how-to-use ul.list li.items .text p.subtext {
    font-size: 0.75rem;
}

body main .page-credit section.ichiran {
    margin-top: 40px;
    background-color: white;
    padding: 40px;
}

@media (max-width: 768px) {
    body main .page-credit section.ichiran {
        padding: 16px;
    }
}

body main .page-credit section.ichiran .title {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 8px;
}

body main .page-credit section.ichiran .title p.jp {
    color: #333;
    font-size: 1.25rem;
    line-height: 100%;
}

@media (max-width: 768px) {
    body main .page-credit section.ichiran .title p.jp {
        font-size: 1rem;
        font-weight: bold;
        line-height: 150%;
    }
}

body main .page-credit section.ichiran .title p.en {
    color: #999;
    font-size: 0.75rem;
    line-height: 150%;
}

body main .page-credit section.ichiran .img p.text {
    font-size: 12px;
}

body main .page-credit section.ichiran .img a img {
    margin-top: 16px;
}

body main .page-credit section.interview {
    background-color: white;
    margin-top: 40px;
    padding: 40px;
}

@media (max-width: 768px) {
    body main .page-credit section.interview {
        padding: 16px;
    }
}

body main .page-credit section.interview .section-title {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 2px solid #FF1555;
}

body main .page-credit section.interview .section-title p.title {
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1em;

    color: #FF1555;
    font-size: 1.25rem;
    line-height: 100%;
}

body main .page-credit section.interview .section-title .subtitle {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    gap: 8px;
}

@media (max-width: 768px) {
    body main .page-credit section.interview .section-title .subtitle {
        flex-direction: column;
        gap: 4px;
    }
}

body main .page-credit section.interview .section-title .subtitle p.en {
    color: #999;
    font-size: 0.75rem;
    line-height: 150%;
}

body main .page-credit section.interview .comment-contents {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 8px;
}

body main .page-credit section.interview .comment-contents .name {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
    gap: 8px;
}

body main .page-credit section.interview .comment-contents .name p.jp {
    margin-top: 16px;
    font-size: 14px;
    font-weight: bold;
}

body main .page-credit section.interview .comment-contents .name p.en {
    font-size: 12px;
    font-weight: bold;
}

body main .page-credit section.interview .comment-contents .title {
    margin-top: 16px;
    color: #333;
    font-size: 1.25rem;
    line-height: 100%;
}

@media (max-width: 768px) {
    body main .page-credit section.interview .comment-contents .title {
        font-size: 1rem;
        font-weight: bold;
        line-height: 150%;
    }
}

body main .page-credit section.interview .comment-contents .title p.title {
    /* margin-left: 16px; */
}

body main .page-credit section.interview .comment-contents .text p.jp {
    /* margin-left: 16px; */
}

body main .page-credit section.interview .comment-contents .text p.en-title {
    margin-top: 40px;
    color: #999;
}

body main .page-credit section.interview .comment-contents .text p.en {
    margin-top: 8px;
    color: #999;
    font-size: 0.75rem;
    line-height: 150%;
}

body main .page-credit section.footer-toggle {
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 40px;
    background-color: white;
    padding: 40px;
}

@media (max-width: 768px) {
    body main .page-credit section.footer-toggle {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }
}

body main .page-credit section.footer-toggle a {
    display: block;
    border: solid 1px #FF1555;
    padding: 40px 0;
    width: 470px;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    body main .page-credit section.footer-toggle a {
        padding: 24px 0;
    }
}

body main .page-credit section.footer-toggle a:hover {
    background-color: #FF1555;
    color: white;
    opacity: 1;
}

body main .page-credit section.footer-toggle a:hover span.btn {
    color: white;
}

@media (max-width: 768px) {
    body main .page-credit section.footer-toggle a {
        width: 100%;
    }
}

body main .page-credit section.footer-toggle a span.btn {
    display: block;
    color: #FF1555;
    font-size: 1.25rem;
    line-height: 100%;
    text-align: center;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    body main .page-credit section.footer-toggle p.text {
        margin-top: 0px;
    }
}

body main .page-library {
    width: 100%;
}

body main .page-library section.toggle {
    margin-top: 40px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 40px;
}

@media (max-width: 768px) {
    body main .page-library section.toggle {
        display: none;
    }
}

body main .page-library section.toggle .block-wrap {
    background-color: #FF1555;
    width: 100%;
}

body main .page-library section.toggle .block-wrap .block {
    position: relative;
    top: -16px;
    left: -16px;
    background-color: white;
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 0px;
}

body main .page-library section.toggle .block-wrap .block p {
    text-align: center;
}

body main .page-library section.toggle .block-wrap .block p.text {
    font-size: 1.5rem;
}

body main .page-library section.toggle .block-wrap .block p.english {
    color: #999;
    font-size: 0.75rem;
    line-height: 150%;
}

body main .page-library section.toggle a.credit-btn {
    width: 100%;
    padding: 24px 0;
    background-color: white;
    border: 1px solid #FF1555;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 0px;
}

body main .page-library section.toggle a.credit-btn:hover {
    background-color: #FF1555;
    color: white;
    opacity: 1;
}

body main .page-library section.toggle a.credit-btn:hover span.text,
body main .page-library section.toggle a.credit-btn:hover span.english {
    color: white;
}

body main .page-library section.toggle a.credit-btn span.text {
    font-size: 1.5rem;
}

body main .page-library section.toggle a.credit-btn span.english {
    color: #999;
    font-size: 0.75rem;
    line-height: 150%;
}

body main .page-library section.about {
    margin-top: 40px;
    padding: 40px;
    background-color: #FFf;
}

@media (max-width: 768px) {
    body main .page-library section.about {
        margin-top: 0px;
        padding: 16px;
    }
}

body main .page-library section.about p.title {
    color: #333;
    font-size: 1.25rem;
    line-height: 100%;
}

@media (max-width: 768px) {
    body main .page-library section.about p.title {
        font-size: 1rem;
        font-weight: bold;
        line-height: 150%;
    }
}

body main .page-library section.about p.text {
    margin-top: 16px;
}

@media (max-width: 768px) {
    body main .page-library section.about p.text {
        text-align: justify;
    }
}

body main .page-library section.about p.en {
    margin-top: 16px;
    color: #999;
    font-size: 0.75rem;
    line-height: 150%;
}

body main .page-library section.service {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

body main .page-library section.service .block-top,
body main .page-library section.service .block-bottom {
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: stretch;
    gap: 40px;
}

@media (max-width: 768px) {

    body main .page-library section.service .block-top,
    body main .page-library section.service .block-bottom {
        flex-direction: column;
        margin-top: 24px;
        gap: 24px;
    }
}

body main .page-library section.service .block-top .block-1,
body main .page-library section.service .block-top .block-2,
body main .page-library section.service .block-top .block-3,
body main .page-library section.service .block-top .block-4,
body main .page-library section.service .block-top .block-5,
body main .page-library section.service .block-bottom .block-1,
body main .page-library section.service .block-bottom .block-2,
body main .page-library section.service .block-bottom .block-3,
body main .page-library section.service .block-bottom .block-4,
body main .page-library section.service .block-bottom .block-5 {
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    box-shadow: 8px 8px 0px 0px #FF1555;
    background-color: white;
    padding: 40px;
}

@media (max-width: 768px) {

    body main .page-library section.service .block-top .block-1,
    body main .page-library section.service .block-top .block-2,
    body main .page-library section.service .block-top .block-3,
    body main .page-library section.service .block-top .block-4,
    body main .page-library section.service .block-top .block-5,
    body main .page-library section.service .block-bottom .block-1,
    body main .page-library section.service .block-bottom .block-2,
    body main .page-library section.service .block-bottom .block-3,
    body main .page-library section.service .block-bottom .block-4,
    body main .page-library section.service .block-bottom .block-5 {
        padding: 16px;
    }
}

@media (max-width: 768px) {

    body main .page-library section.service .block-top .block-1,
    body main .page-library section.service .block-top .block-2,
    body main .page-library section.service .block-top .block-3,
    body main .page-library section.service .block-top .block-4,
    body main .page-library section.service .block-top .block-5,
    body main .page-library section.service .block-bottom .block-1,
    body main .page-library section.service .block-bottom .block-2,
    body main .page-library section.service .block-bottom .block-3,
    body main .page-library section.service .block-bottom .block-4,
    body main .page-library section.service .block-bottom .block-5 {
        width: 100%;
    }
}

body main .page-library section.service .block-top .block-1 p.en-title,
body main .page-library section.service .block-top .block-2 p.en-title,
body main .page-library section.service .block-top .block-3 p.en-title,
body main .page-library section.service .block-top .block-4 p.en-title,
body main .page-library section.service .block-top .block-5 p.en-title,
body main .page-library section.service .block-bottom .block-1 p.en-title,
body main .page-library section.service .block-bottom .block-2 p.en-title,
body main .page-library section.service .block-bottom .block-3 p.en-title,
body main .page-library section.service .block-bottom .block-4 p.en-title,
body main .page-library section.service .block-bottom .block-5 p.en-title {
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1em;

    color: #FF1555;
    font-size: 1.25rem;
    line-height: 100%;
}

body main .page-library section.service .block-top .block-1 .title,
body main .page-library section.service .block-top .block-2 .title,
body main .page-library section.service .block-top .block-3 .title,
body main .page-library section.service .block-top .block-4 .title,
body main .page-library section.service .block-top .block-5 .title,
body main .page-library section.service .block-bottom .block-1 .title,
body main .page-library section.service .block-bottom .block-2 .title,
body main .page-library section.service .block-bottom .block-3 .title,
body main .page-library section.service .block-bottom .block-4 .title,
body main .page-library section.service .block-bottom .block-5 .title {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 8px;
}

body main .page-library section.service .block-top .block-1 .title p.jp,
body main .page-library section.service .block-top .block-2 .title p.jp,
body main .page-library section.service .block-top .block-3 .title p.jp,
body main .page-library section.service .block-top .block-4 .title p.jp,
body main .page-library section.service .block-top .block-5 .title p.jp,
body main .page-library section.service .block-bottom .block-1 .title p.jp,
body main .page-library section.service .block-bottom .block-2 .title p.jp,
body main .page-library section.service .block-bottom .block-3 .title p.jp,
body main .page-library section.service .block-bottom .block-4 .title p.jp,
body main .page-library section.service .block-bottom .block-5 .title p.jp {
    color: #333;
    font-size: 1.25rem;
    line-height: 150%;
}

@media (max-width: 768px) {

    body main .page-library section.service .block-top .block-1 .title p.jp,
    body main .page-library section.service .block-top .block-2 .title p.jp,
    body main .page-library section.service .block-top .block-3 .title p.jp,
    body main .page-library section.service .block-top .block-4 .title p.jp,
    body main .page-library section.service .block-top .block-5 .title p.jp,
    body main .page-library section.service .block-bottom .block-1 .title p.jp,
    body main .page-library section.service .block-bottom .block-2 .title p.jp,
    body main .page-library section.service .block-bottom .block-3 .title p.jp,
    body main .page-library section.service .block-bottom .block-4 .title p.jp,
    body main .page-library section.service .block-bottom .block-5 .title p.jp {
        font-size: 1rem;
        font-weight: bold;
        line-height: 150%;
    }
}

body main .page-library section.service .block-top .block-1 .title p.en,
body main .page-library section.service .block-top .block-2 .title p.en,
body main .page-library section.service .block-top .block-3 .title p.en,
body main .page-library section.service .block-top .block-4 .title p.en,
body main .page-library section.service .block-top .block-5 .title p.en,
body main .page-library section.service .block-bottom .block-1 .title p.en,
body main .page-library section.service .block-bottom .block-2 .title p.en,
body main .page-library section.service .block-bottom .block-3 .title p.en,
body main .page-library section.service .block-bottom .block-4 .title p.en,
body main .page-library section.service .block-bottom .block-5 .title p.en {
    color: #999;
    font-size: 0.75rem;
    line-height: 150%;
}

body main .page-library section.service .block-top .block-1 .text,
body main .page-library section.service .block-top .block-2 .text,
body main .page-library section.service .block-top .block-3 .text,
body main .page-library section.service .block-top .block-4 .text,
body main .page-library section.service .block-top .block-5 .text,
body main .page-library section.service .block-bottom .block-1 .text,
body main .page-library section.service .block-bottom .block-2 .text,
body main .page-library section.service .block-bottom .block-3 .text,
body main .page-library section.service .block-bottom .block-4 .text,
body main .page-library section.service .block-bottom .block-5 .text {
    margin-top: 8px;
}

body main .page-library section.service .block-top .block-1 .text p.en,
body main .page-library section.service .block-top .block-2 .text p.en,
body main .page-library section.service .block-top .block-3 .text p.en,
body main .page-library section.service .block-top .block-4 .text p.en,
body main .page-library section.service .block-top .block-5 .text p.en,
body main .page-library section.service .block-bottom .block-1 .text p.en,
body main .page-library section.service .block-bottom .block-2 .text p.en,
body main .page-library section.service .block-bottom .block-3 .text p.en,
body main .page-library section.service .block-bottom .block-4 .text p.en,
body main .page-library section.service .block-bottom .block-5 .text p.en {
    margin-top: 8px;
    color: #999;
    font-size: 0.75rem;
    line-height: 150%;
}

body main .page-library section.service .block-top .block-1 a,
body main .page-library section.service .block-top .block-2 a,
body main .page-library section.service .block-top .block-3 a,
body main .page-library section.service .block-top .block-4 a,
body main .page-library section.service .block-top .block-5 a,
body main .page-library section.service .block-bottom .block-1 a,
body main .page-library section.service .block-bottom .block-2 a,
body main .page-library section.service .block-bottom .block-3 a,
body main .page-library section.service .block-bottom .block-4 a,
body main .page-library section.service .block-bottom .block-5 a {
    margin-top: 8px;
    width: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 8px;
}

body main .page-library section.service .block-top .block-1 a span.text,
body main .page-library section.service .block-top .block-2 a span.text,
body main .page-library section.service .block-top .block-3 a span.text,
body main .page-library section.service .block-top .block-4 a span.text,
body main .page-library section.service .block-top .block-5 a span.text,
body main .page-library section.service .block-bottom .block-1 a span.text,
body main .page-library section.service .block-bottom .block-2 a span.text,
body main .page-library section.service .block-bottom .block-3 a span.text,
body main .page-library section.service .block-bottom .block-4 a span.text,
body main .page-library section.service .block-bottom .block-5 a span.text {
    margin-top: 0;
}

body main .page-library section.links {
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    background-color: white;
    padding: 40px;
}

@media (max-width: 768px) {
    body main .page-library section.links {
        padding: 16px;
    }
}

@media (max-width: 768px) {
    body main .page-library section.links {
        flex-direction: column;
    }
}

body main .page-library section.links p.text {
    margin-right: 24px;
}

@media (max-width: 768px) {
    body main .page-library section.links p.text {
        text-align: justify;
        margin-right: 0;
    }
}

body main .page-library section.links a {
    border: solid 1px #FF1555;
    padding: 16px;
    white-space: nowrap;
    width: fit-content;
    margin-left: 16px;
    text-align: center;
}

@media (max-width: 768px) {
    body main .page-library section.links a {
        width: 100%;
        margin-top: 16px;
        margin-left: 0;
    }
}

body main .page-library section.links a span.text {
    color: #FF1555;
}

body main .page-library section.school-library .block-top,
body main .page-library section.school-library .block-bottom {
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: stretch;
    gap: 40px;
}

@media (max-width: 768px) {

    body main .page-library section.school-library .block-top,
    body main .page-library section.school-library .block-bottom {
        flex-direction: column;
        margin-top: 24px;
        gap: 24px;
    }
}

body main .page-library section.school-library .block-top .block-1,
body main .page-library section.school-library .block-top .block-2,
body main .page-library section.school-library .block-top .block-3,
body main .page-library section.school-library .block-top .block-4,
body main .page-library section.school-library .block-top .block-5,
body main .page-library section.school-library .block-top .block-6,
body main .page-library section.school-library .block-bottom .block-1,
body main .page-library section.school-library .block-bottom .block-2,
body main .page-library section.school-library .block-bottom .block-3,
body main .page-library section.school-library .block-bottom .block-4,
body main .page-library section.school-library .block-bottom .block-5,
body main .page-library section.school-library .block-bottom .block-6 {
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
}

@media (max-width: 768px) {

    body main .page-library section.school-library .block-top .block-1,
    body main .page-library section.school-library .block-top .block-2,
    body main .page-library section.school-library .block-top .block-3,
    body main .page-library section.school-library .block-top .block-4,
    body main .page-library section.school-library .block-top .block-5,
    body main .page-library section.school-library .block-top .block-6,
    body main .page-library section.school-library .block-bottom .block-1,
    body main .page-library section.school-library .block-bottom .block-2,
    body main .page-library section.school-library .block-bottom .block-3,
    body main .page-library section.school-library .block-bottom .block-4,
    body main .page-library section.school-library .block-bottom .block-5,
    body main .page-library section.school-library .block-bottom .block-6 {
        width: 100%;
    }
}

body main .page-library section.school-library .block-top .block-1 img,
body main .page-library section.school-library .block-top .block-2 img,
body main .page-library section.school-library .block-top .block-3 img,
body main .page-library section.school-library .block-top .block-4 img,
body main .page-library section.school-library .block-top .block-5 img,
body main .page-library section.school-library .block-top .block-6 img,
body main .page-library section.school-library .block-bottom .block-1 img,
body main .page-library section.school-library .block-bottom .block-2 img,
body main .page-library section.school-library .block-bottom .block-3 img,
body main .page-library section.school-library .block-bottom .block-4 img,
body main .page-library section.school-library .block-bottom .block-5 img,
body main .page-library section.school-library .block-bottom .block-6 img {
    width: 100%;
}

body main .page-library section.school-library .block-top .block-1 .text-wrap,
body main .page-library section.school-library .block-top .block-2 .text-wrap,
body main .page-library section.school-library .block-top .block-3 .text-wrap,
body main .page-library section.school-library .block-top .block-4 .text-wrap,
body main .page-library section.school-library .block-top .block-5 .text-wrap,
body main .page-library section.school-library .block-top .block-6 .text-wrap,
body main .page-library section.school-library .block-bottom .block-1 .text-wrap,
body main .page-library section.school-library .block-bottom .block-2 .text-wrap,
body main .page-library section.school-library .block-bottom .block-3 .text-wrap,
body main .page-library section.school-library .block-bottom .block-4 .text-wrap,
body main .page-library section.school-library .block-bottom .block-5 .text-wrap,
body main .page-library section.school-library .block-bottom .block-6 .text-wrap {
    flex: 1;
    margin-top: 0;
    background-color: white;
    padding: 40px;
}

@media (max-width: 768px) {

    body main .page-library section.school-library .block-top .block-1 .text-wrap,
    body main .page-library section.school-library .block-top .block-2 .text-wrap,
    body main .page-library section.school-library .block-top .block-3 .text-wrap,
    body main .page-library section.school-library .block-top .block-4 .text-wrap,
    body main .page-library section.school-library .block-top .block-5 .text-wrap,
    body main .page-library section.school-library .block-top .block-6 .text-wrap,
    body main .page-library section.school-library .block-bottom .block-1 .text-wrap,
    body main .page-library section.school-library .block-bottom .block-2 .text-wrap,
    body main .page-library section.school-library .block-bottom .block-3 .text-wrap,
    body main .page-library section.school-library .block-bottom .block-4 .text-wrap,
    body main .page-library section.school-library .block-bottom .block-5 .text-wrap,
    body main .page-library section.school-library .block-bottom .block-6 .text-wrap {
        padding: 16px;
    }
}

body main .page-library section.school-library .block-top .block-1 .text-wrap .title p.jp,
body main .page-library section.school-library .block-top .block-2 .text-wrap .title p.jp,
body main .page-library section.school-library .block-top .block-3 .text-wrap .title p.jp,
body main .page-library section.school-library .block-top .block-4 .text-wrap .title p.jp,
body main .page-library section.school-library .block-top .block-5 .text-wrap .title p.jp,
body main .page-library section.school-library .block-top .block-6 .text-wrap .title p.jp,
body main .page-library section.school-library .block-bottom .block-1 .text-wrap .title p.jp,
body main .page-library section.school-library .block-bottom .block-2 .text-wrap .title p.jp,
body main .page-library section.school-library .block-bottom .block-3 .text-wrap .title p.jp,
body main .page-library section.school-library .block-bottom .block-4 .text-wrap .title p.jp,
body main .page-library section.school-library .block-bottom .block-5 .text-wrap .title p.jp,
body main .page-library section.school-library .block-bottom .block-6 .text-wrap .title p.jp {
    line-height: 1.5;
    color: #333;
    font-size: 1.25rem;
    line-height: 100%;
}

@media (max-width: 768px) {

    body main .page-library section.school-library .block-top .block-1 .text-wrap .title p.jp,
    body main .page-library section.school-library .block-top .block-2 .text-wrap .title p.jp,
    body main .page-library section.school-library .block-top .block-3 .text-wrap .title p.jp,
    body main .page-library section.school-library .block-top .block-4 .text-wrap .title p.jp,
    body main .page-library section.school-library .block-top .block-5 .text-wrap .title p.jp,
    body main .page-library section.school-library .block-top .block-6 .text-wrap .title p.jp,
    body main .page-library section.school-library .block-bottom .block-1 .text-wrap .title p.jp,
    body main .page-library section.school-library .block-bottom .block-2 .text-wrap .title p.jp,
    body main .page-library section.school-library .block-bottom .block-3 .text-wrap .title p.jp,
    body main .page-library section.school-library .block-bottom .block-4 .text-wrap .title p.jp,
    body main .page-library section.school-library .block-bottom .block-5 .text-wrap .title p.jp,
    body main .page-library section.school-library .block-bottom .block-6 .text-wrap .title p.jp {
        font-size: 1rem;
        font-weight: bold;
        line-height: 150%;
    }
}

body main .page-library section.school-library .block-top .block-1 .text-wrap .title p.en,
body main .page-library section.school-library .block-top .block-2 .text-wrap .title p.en,
body main .page-library section.school-library .block-top .block-3 .text-wrap .title p.en,
body main .page-library section.school-library .block-top .block-4 .text-wrap .title p.en,
body main .page-library section.school-library .block-top .block-5 .text-wrap .title p.en,
body main .page-library section.school-library .block-top .block-6 .text-wrap .title p.en,
body main .page-library section.school-library .block-bottom .block-1 .text-wrap .title p.en,
body main .page-library section.school-library .block-bottom .block-2 .text-wrap .title p.en,
body main .page-library section.school-library .block-bottom .block-3 .text-wrap .title p.en,
body main .page-library section.school-library .block-bottom .block-4 .text-wrap .title p.en,
body main .page-library section.school-library .block-bottom .block-5 .text-wrap .title p.en,
body main .page-library section.school-library .block-bottom .block-6 .text-wrap .title p.en {
    color: #999;
    font-size: 0.75rem;
    line-height: 150%;
    margin-top: 8px;
}

body main .page-library section.school-library .block-top .block-1 .text-wrap .text,
body main .page-library section.school-library .block-top .block-2 .text-wrap .text,
body main .page-library section.school-library .block-top .block-3 .text-wrap .text,
body main .page-library section.school-library .block-top .block-4 .text-wrap .text,
body main .page-library section.school-library .block-top .block-5 .text-wrap .text,
body main .page-library section.school-library .block-top .block-6 .text-wrap .text,
body main .page-library section.school-library .block-bottom .block-1 .text-wrap .text,
body main .page-library section.school-library .block-bottom .block-2 .text-wrap .text,
body main .page-library section.school-library .block-bottom .block-3 .text-wrap .text,
body main .page-library section.school-library .block-bottom .block-4 .text-wrap .text,
body main .page-library section.school-library .block-bottom .block-5 .text-wrap .text,
body main .page-library section.school-library .block-bottom .block-6 .text-wrap .text {
    margin-top: 16px;
}

@media (max-width: 768px) {

    body main .page-library section.school-library .block-top .block-1 .text-wrap .text p.jp,
    body main .page-library section.school-library .block-top .block-2 .text-wrap .text p.jp,
    body main .page-library section.school-library .block-top .block-3 .text-wrap .text p.jp,
    body main .page-library section.school-library .block-top .block-4 .text-wrap .text p.jp,
    body main .page-library section.school-library .block-top .block-5 .text-wrap .text p.jp,
    body main .page-library section.school-library .block-top .block-6 .text-wrap .text p.jp,
    body main .page-library section.school-library .block-bottom .block-1 .text-wrap .text p.jp,
    body main .page-library section.school-library .block-bottom .block-2 .text-wrap .text p.jp,
    body main .page-library section.school-library .block-bottom .block-3 .text-wrap .text p.jp,
    body main .page-library section.school-library .block-bottom .block-4 .text-wrap .text p.jp,
    body main .page-library section.school-library .block-bottom .block-5 .text-wrap .text p.jp,
    body main .page-library section.school-library .block-bottom .block-6 .text-wrap .text p.jp {
        text-align: justify;
    }
}

body main .page-library section.school-library .block-top .block-1 .text-wrap .text p.en,
body main .page-library section.school-library .block-top .block-2 .text-wrap .text p.en,
body main .page-library section.school-library .block-top .block-3 .text-wrap .text p.en,
body main .page-library section.school-library .block-top .block-4 .text-wrap .text p.en,
body main .page-library section.school-library .block-top .block-5 .text-wrap .text p.en,
body main .page-library section.school-library .block-top .block-6 .text-wrap .text p.en,
body main .page-library section.school-library .block-bottom .block-1 .text-wrap .text p.en,
body main .page-library section.school-library .block-bottom .block-2 .text-wrap .text p.en,
body main .page-library section.school-library .block-bottom .block-3 .text-wrap .text p.en,
body main .page-library section.school-library .block-bottom .block-4 .text-wrap .text p.en,
body main .page-library section.school-library .block-bottom .block-5 .text-wrap .text p.en,
body main .page-library section.school-library .block-bottom .block-6 .text-wrap .text p.en {
    color: #999;
    font-size: 0.75rem;
    line-height: 150%;
    margin-top: 8px;
}

body main .page-library section.how-to-use-library {
    margin-top: 40px;
    background-color: white;
    padding: 40px;
}

@media (max-width: 768px) {
    body main .page-library section.how-to-use-library {
        padding: 16px;
    }
}

body main .page-library section.how-to-use-library .title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
    width: 100%;
}

@media (max-width: 768px) {
    body main .page-library section.how-to-use-library .title {
        flex-direction: column;
        width: 100%;
    }
}

body main .page-library section.how-to-use-library .title .title-content {
    width: 360px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 8px;
}

@media (max-width: 768px) {
    body main .page-library section.how-to-use-library .title .title-content {
        width: 100%;
    }
}

body main .page-library section.how-to-use-library .title .title-content p.title {
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1em;

    color: #FF1555;
    font-size: 1.25rem;
    line-height: 100%;
}

@media (max-width: 768px) {
    body main .page-library section.how-to-use-library .title .title-content p.subtitle {
        margin-top: 8px;
    }
}

@media (max-width: 768px) {
    body main .page-library section.how-to-use-library .title p.text {
        margin-top: 8px;
        text-align: justify;
    }
}

body main .page-library section.how-to-use-library .title a.link {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 0px;
}

body main .page-library section.how-to-use-library ul.list {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
}

body main .page-library section.how-to-use-library ul.list li.items {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    border-top: solid 1px #FF1555;
    padding: 40px 0;
}

@media (max-width: 768px) {
    body main .page-library section.how-to-use-library ul.list li.items {
        flex-direction: column;
        align-items: start;
    }
}

body main .page-library section.how-to-use-library ul.list li.items .number-title {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 8px;
}

body main .page-library section.how-to-use-library ul.list li.items .number-title p.number {
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1em;

    color: #FF1555;
    font-size: 1.25rem;
    line-height: 100%;
    margin-right: 16px;
}

@media (max-width: 768px) {
    body main .page-library section.how-to-use-library ul.list li.items .number-title p.number {
        margin-right: 4px;
    }
}

body main .page-library section.how-to-use-library ul.list li.items .number-title p.title {
    width: 260px;
    color: #333;
    font-size: 1.25rem;
    line-height: 100%;
}

@media (max-width: 768px) {
    body main .page-library section.how-to-use-library ul.list li.items .number-title p.title {
        font-size: 1rem;
        font-weight: bold;
        line-height: 150%;
    }
}

@media (max-width: 768px) {
    body main .page-library section.how-to-use-library ul.list li.items .number-title p.title {
        width: 100%;
    }
}

body main .page-library section.how-to-use-library ul.list li.items .text-wrap {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 8px;
}


@media (max-width: 768px) {
    body main .page-library section.how-to-use-library ul.list li.items .text-wrap {
        margin-top: 8px;
    }
}

body main .page-library section.how-to-use-library ul.list li.items .text-wrap a {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 0px;
}

body main .page-library section.how-to-use-library ul.list li.items:nth-child(3) {
    padding-bottom: 0px;
}

body main .page-library section.how-to-use-library ul.list li.items .text {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 8px;
}

@media (max-width: 768px) {
    body main .page-library section.how-to-use-library ul.list li.items .text {
        text-align: justify;
        margin-top: 8px;
    }
}

body main .page-library section.how-to-use-library ul.list li.items .text p.subtext {
    font-size: 0.75rem;
}

body main .page-library section.footer-toggle {
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 40px;
    background-color: white;
    padding: 40px;
}


@media (max-width: 768px) {
    body main .page-library section.footer-toggle {
        flex-direction: column;
        gap: 24px;
        padding: 16px;
    }
}

body main .page-library section.footer-toggle a {
    display: block;
    border: solid 1px #FF1555;
    padding: 40px 0;
    width: 470px;
}

@media (max-width: 768px) {
    body main .page-library section.footer-toggle a {
        width: 100%;
        padding: 24px 0;
    }
}

body main .page-library section.footer-toggle a:hover {
    background-color: #FF1555;
    color: white;
    opacity: 1;
}

body main .page-library section.footer-toggle a:hover span.btn {
    color: white;
}

body main .page-library section.footer-toggle a span.btn {
    display: block;
    color: #FF1555;
    font-size: 1.25rem;
    line-height: 100%;
    text-align: center;
}

@media (max-width: 768px) {
    body main .page-library section.footer-toggle p.text {
        text-align: justify;
    }
}

body main .page-qa section.qa {
    margin-top: 40px;
    background-color: white;
    padding: 40px;
}

@media (max-width: 768px) {
    body main .page-qa section.qa {
        margin-top: 0px;
    }
}

body main .page-qa section.qa p.title {
    text-align: center;
    margin-bottom: 40px;
    color: #333;
    font-size: 1.25rem;
    line-height: 100%;
}

@media (max-width: 768px) {
    body main .page-qa section.qa p.title {
        font-size: 1rem;
        font-weight: bold;
        line-height: 150%;
    }
}

@media (max-width: 768px) {
    body main .page-qa section.qa p.title {
        margin-bottom: 24px;
        margin-top: 8px;
    }
}

body main .page-qa section.qa ul.list {
    list-style-type: none;
    padding: 0;
}

body main .page-qa section.qa ul.list li.items {
    padding: 40px 0;
    border-top: solid 1px #FF1555;
}

body main .page-qa section.qa ul.list li.items:nth-last-child(1) {
    padding-bottom: 0;
}

body main .page-qa section.qa ul.list li.items .line-q {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    gap: 16px;
}

body main .page-qa section.qa ul.list li.items .line-q p.q {
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1em;

    color: #FF1555;
    font-size: 1.25rem;
    line-height: 100%;
}

body main .page-qa section.qa ul.list li.items .line-q p.text {
    color: #333;
    font-size: 1.25rem;
    line-height: 100%;
}

@media (max-width: 768px) {
    body main .page-qa section.qa ul.list li.items .line-q p.text {
        font-size: 1rem;
        font-weight: bold;
        line-height: 150%;
    }
}

body main .page-qa section.qa ul.list li.items .line-a {
    margin-top: 24px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    gap: 16px;
}

body main .page-qa section.qa ul.list li.items .line-a p.a {
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1em;

    color: #FF1555;
    font-size: 1.25rem;
    line-height: 100%;
}

body main .page-qa section.contact {
    margin-top: 40px;
    width: 980px;
    background-color: white;
    padding: 40px;
}

@media (max-width: 768px) {
    body main .page-qa section.contact {
        padding: 16px;
    }
}

@media (max-width: 768px) {
    body main .page-qa section.contact {
        width: 100%;
    }
}

body main .page-qa section.contact .title p.en {
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1em;

    color: #FF1555;
    font-size: 1.25rem;
    line-height: 100%;
}

body main .page-qa section.contact .title p.jp {
    margin-top: 8px;
}

body main .page-qa section.contact .content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
    gap: 24px;
    margin-top: 40px;
}

@media (max-width: 768px) {
    body main .page-qa section.contact .content {
        margin-top: 24px;
    }
}

body main .page-qa section.contact .content .box {
    width: 280px;
}

body main .page-qa section.contact .content .box p.number {
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1em;

    color: #FF1555;
    font-size: 1.25rem;
    line-height: 100%;
}

body main .page-qa section.contact .content .box p.text {
    margin-top: 4px;
}

body main .page-news {
    width: 980px;
}

@media (max-width: 768px) {
    body main .page-news {
        width: 100%;
    }
}

body main .page-news section.article {
    margin-top: 40px;
    background-color: white;
    padding: 40px;
    width: 100%;
}

body main .page-news section.article:first-child {
    margin-top: 0;
}


@media (max-width: 768px) {
    body main .page-news section.article {
        padding: 16px;
    }
}

body main .page-news section.article a.link {
    display: block;
}

body main .page-news section.article a.link span.text {
    display: block;
    color: #FF1555;
    font-size: 1.25rem;
    line-height: 100%;
}

@media (max-width: 768px) {
    body main .page-news section.article a.link span.text {
        line-height: 1.5;
    }
}

body main .page-news section.article p.date {
    margin-top: 8px;
    font-size: 16px;
}

body main .page-news section.article p.text {
    margin-top: 24px;
}

body main .page-news-detail {
    width: 100%;
}

body main .page-news-detail section.article {
    margin-top: 40px;
    background-color: white;
    padding: 40px;
}

@media (max-width: 768px) {
    body main .page-news-detail section.article {
        padding: 16px;
    }
}

@media (max-width: 768px) {
    body main .page-news-detail section.article {
        margin-top: 24px;
    }
}

body main .page-news-detail section.article p.title {
    color: #333;
    font-size: 1.25rem;
    line-height: 100%;
}

@media (max-width: 768px) {
    body main .page-news-detail section.article p.title {
        font-size: 1rem;
        font-weight: bold;
        line-height: 150%;
    }
}

body main .page-news-detail section.article p.date {
    margin-top: 16px;
    font-size: 12px;
}

body main .page-news-detail section.article p.text {
    margin-top: 24px;
}

body main .page-news-detail section.article a {
    display: block;
    margin-top: 16px;
}

body main .page-news-detail section.page-link-before,
body main .page-news-detail section.page-link-after {
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 8px;
    background-color: white;
    padding: 40px;
}

@media (max-width: 768px) {

    body main .page-news-detail section.page-link-before,
    body main .page-news-detail section.page-link-after {
        padding: 16px;
    }
}

@media (max-width: 768px) {

    body main .page-news-detail section.page-link-before,
    body main .page-news-detail section.page-link-after {
        margin-top: 24px;
    }
}

body main .page-news-detail section.page-link-before img {
    transform: rotate(180deg);
}

body main .page-news-detail section.page-link-after {
    justify-content: flex-end;
}

body main .page-news-detail section.page-link-after img {
    transform: rotate(0deg);
}

header.pc {
    background-color: white;
    padding: 8px 40px;
    width: 980px;
}

header.pc nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

header.pc nav img {
    height: 28px;
}

header.pc nav ul {
    display: flex;
    list-style: none;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

header.pc nav ul li {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    margin: 0 12px;
}

header.pc nav ul li a {
    text-align: center;
    text-decoration: none;
    color: #FF1555;
    line-height: 1;
}

header.pc nav ul li a:hover {
    color: #0066cc;
}

header.pc nav ul li p {
    color: #999;
    font-size: 0.75rem;
    line-height: 150%;
    text-align: center;
    line-height: 1.2;
    margin-top: 4px;
}

@media (max-width: 768px) {
    header.pc {
        display: none;
    }
}

header.sp {
    display: none;
    position: fixed;
    z-index: 100;
    /* スマホメニューを開いてる時のボタン */
    /* メニュー背景　*/
}

@media (max-width: 768px) {
    header.sp {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: white;
        padding: 16px;
        width: 100%;
    }
}

header.sp img:nth-child(1) {
    height: 20px;
}

header.sp .hamburger {
    display: block;
    z-index: 3;
    width: 20px;
    height: 20px;
    cursor: pointer;
    text-align: center;
}

header.sp .hamburger span {
    display: block;
    position: absolute;
    width: 28px;
    height: 2px;
    right: 16px;
    background: #FF1555;
    transition: 0.3s ease-in-out;
}

header.sp .hamburger span:nth-child(1) {
    top: 14px;
}

header.sp .hamburger span:nth-child(2) {
    top: 25px;
    opacity: 1;
    transition: opacity 0.2s ease;
}

header.sp .hamburger span:nth-child(3) {
    top: 36px;
}

header.sp .hamburger.active span:nth-child(1) {
    top: 22px;
    right: 14px;
    background: #FF1555;
    transform: rotate(-45deg);
}

header.sp .hamburger.active span:nth-child(2) {
    opacity: 0;
    transition: opacity 0.2s ease;
}

header.sp .hamburger.active span:nth-child(3) {
    top: 22px;
    right: 14px;
    background: #FF1555;
    transform: rotate(45deg);
}

header.sp nav.globalMenuSp {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    background: white;
    text-align: center;
    width: 100%;
    opacity: 0;
    display: none;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    height: 100svh;
}

header.sp nav.globalMenuSp ul {
    margin: 40px auto 0;
    padding: 0;
    width: 100%;
}

header.sp nav.globalMenuSp ul li {
    list-style-type: none;
    padding: 0;
    width: 100%;
    transition: 0.4s all;
}

header.sp nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
}

header.sp nav.globalMenuSp ul li:hover {
    background: #ddd;
}

header.sp nav.globalMenuSp ul li a {
    display: block;
    color: #FF1555;
    padding: 1em 0;
    text-decoration: none;
}

header.sp nav.globalMenuSp.active {
    opacity: 1;
    display: block;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

footer {
    background-color: white;
    text-align: center;
    padding: 1rem;
    width: 980px;
    font-size: 0.75rem;
    margin-top: 40px;
}

@media (max-width: 768px) {
    footer {
        width: 100%;
    }
}