/* ==================================

    Item    -   共通アイテム

================================== */

/* ==================================
    h - 見出し

    About           -   スタジオについて
    Info            -   新着情報
    Lesson          -   レッスン情報
    Rental          -   レンタル
    Instructor      -   インストラクター
    Fee             -   料金システム
    Q&A             -   よくある質問
    Contact         -   お問い合わせ
    Privacy Policy  -   プライバシーポリシー
================================== */

h1 {
    font-family: 'Koulen', cursive;
    font-size: 3.0rem;
    color: #22333b;
    text-align: left;
    letter-spacing: 0.08em;
    display: inline-block;
    padding: 16px;
}

h1 + span {
    font-size: 1.2rem;
    color: #22333b;
}

h1 + span:before {
    content: '-';
    padding-right: 4px;
}

@media screen and (min-width: 768px) {
    h1 {
        font-size: 5.0rem;
        padding: 32px;
    }

    h1 + span {
        font-size: 2.0rem;
    }
}

h2 {
    font-size: 1.8rem;
    color: #22333b;
    text-align: left;
    letter-spacing: 0.08em;
    display: inline-block;
    padding: 32px 8px 8px 16px;
    position: relative;
}

@media screen and (min-width: 768px) {
    h2 {
        font-size: 2.5rem;
        padding: 32px 8px 8px 32px;
    }
}



/* ==================================
    area    -   エリア

    About           -   スタジオについて
    Info            -   新着情報
    Lesson          -   レッスン情報
    Rental          -   レンタル
    Instructor      -   インストラクター
    Fee             -   料金システム
    Q&A             -   よくある質問
    Contact         -   お問い合わせ
    Privacy Policy  -   プライバシーポリシー
    Student Recruit -   生徒募集
================================== */

.about-area-box,
.info-area-box,
.l-area-box,
.r-area-box,
.inst-area-box,
.fee-area-box,
.qa-area-box,
.contact-area-box,
.pp-area-box,
.sr-area-box {
    width: calc(100% - 16px);
    max-width: 980px;
    padding: 0 0 64px 0;
    margin: 16px auto 64px;
    background-color: #fff;
    color: #22333b;
}

@media screen and (min-width: 768px) {
    .about-area-box,
    .info-area-box,
    .l-area-box,
    .r-area-box,
    .inst-area-box,
    .fee-area-box,
    .qa-area-box,
    .contact-area-box,
    .pp-area-box,
    .sr-area-box {
        width: calc(100% - 96px);
    }
}



/* ==================================
    box -   ボックス

    About           -   スタジオについて
    Info            -   新着情報
    Lesson          -   レッスン情報
    Rental          -   レンタル
    Instructor      -   インストラクター
    Fee             -   料金システム
    Student Recruit -   生徒募集
================================== */

.about-box,
.info-box,
.l-box,
.r-box,
.inst-box,
.fee-box,
.sr-box {
    padding: 16px;
    text-align: justify;
    text-justify: inter-ideograph;
}

@media screen and (min-width: 768px) {
    .about-box,
    .info-box,
    .l-box,
    .r-box,
    .inst-box,
    .fee-box,
    .sr-box {
        padding: 32px;
    }
}

@media screen and (min-width: 980px) {
    .about-box,
    .info-box,
    .l-box,
    .r-box,
    .inst-box,
    .fee-box,
    .sr-box {
        padding: 32px 64px;
    }
}

.about-box p,
.info-box p,
.l-box p,
.r-box p,
.inst-box p,
.fee-box p,
.sr-box p {
    font-size: 1.6rem;
}



/* ==================================
    link-arrow-box - リンクボックス
================================== */

a.link-arrow-box {
    width: calc(100% - 64px);
    background-color: #22333b;
    margin: 16px auto;
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    transition: .4s;
}

@media screen and (min-width: 768px) {
    a.link-arrow-box {
        width: calc(100% - 128px);
        margin: 48px auto;
        padding: 8px 16px;
        display: flex;
        justify-content: space-between;
        color: #fff;
    }
}

a.link-arrow-box {
    color: #fff;
    font-size: 1.3rem;
}

a.link-arrow-box p {
    color: #fff;
    font-size: 1.3rem;
    height: 24px;
    line-height: 24px;
    vertical-align: middle;
}

a.link-arrow-box span:after {
    content: '>';
    color: #fff;
}

a.link-arrow-box:hover {
    background-color: #F3EFEB;
    color: #22333B;
    transition: .4s;
}