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

    Lesson - レッスン情報

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

/* ==================================
    Tab - タブ
================================== */

.tabs {
    width: 100%;
    margin: 64px auto 0;
    background-color: #fff;
}

.tab-item {
    width: calc(100% / 7);
    height: 50px;
    border-bottom: 2px solid #22333B;
    background-color: #d9d9d9;
    line-height: 50px;
    font-size: 1.5rem;
    text-align: center;
    color: #22333B;
    display: block;
    float: left;
    transition: all 0.2s ease;
}

.tab-item:hover {
    cursor: pointer;
    opacity: 0.75;
}

/* ラジオボタンを全て消す */
input[name="tab_item"] {
    display: none;
}

/* タブ切り替えの中身のスタイル */
.tab-content {
    display: none;
    padding: 16px 8px;
    clear: both;
}

@media screen and (min-width: 768px) {
    .tab-content {
        padding: 32px;
    }
}

@media screen and (min-width: 960px) {
    .tab-content {
        padding: 32px 80px;
    }
}

/* 選択されているタブのコンテンツのみを表示 */
#sun:checked ~ #sun_content,
#mon:checked ~ #mon_content,
#tue:checked ~ #tue_content,
#wed:checked ~ #wed_content,
#thu:checked ~ #thu_content,
#fri:checked ~ #fri_content,
#sat:checked ~ #sat_content {
    display: block;
}

/* 選択されているタブのスタイルを変える */
.tabs input:checked + .tab-item {
    background-color: #22333B;
    color: #fff;
}

.accordion-area {
    list-style: none;
    width: calc(100% - 16px);
    max-width: 900px;
    margin: 0 auto 16px;
}

.accordion-area > li {
    border: 2px solid #590004;
    padding: 16px;
    position: relative;
}

@media screen and (min-width: 768px) {
    .accordion-area > li {
        padding: 32px;
    }
}

@media screen and (min-width: 960px) {
    .accordion-area > li {
        padding: 48px;
    }
}

.accordion-box {
    padding: 16px 0;
    text-align: justify;
}

.accordion-box p {
    font-size: 1.3rem;
}

@media screen and (min-width: 768px) {
    .accordion-box p {
        font-size: 1.5rem;
    }
}

.l-place-name-box {
    display: inline-block;
    color: #fff;
    padding: 8px 16px;
    margin: 16px auto;
    text-align: center;
    font-size: 1.3rem;
}

@media screen and (min-width: 768px) {
    .l-place-name-box {
        font-size: 1.5rem;
    }
}

.l-studio-a {
    background-color: #590004;
}

.l-studio-b {
    background-color: #13286d;
}

.l-studio-out {
    background-color: #3f5642;
}

.l-flex-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.l-inst-img-box img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid #590004;
    object-fit: cover;
}

.l-inst-name-box {
    width: calc(100% - 100px);
}

@media screen and (min-width: 768px) {
    .l-inst-img-box img {
        width: 200px;
        height: 200px;
    }

    .l-inst-name-box {
        width: calc(100% - 200px);
    }
}

.l-inst-name-box p {
    font-family: 'Anton', sans-serif;
    font-size: 3.0rem;
    text-align: center;
    color: #22333b;
}

.l-inst-name-box p a {
    color: #22333b;
    transition: .4s;
}

.l-inst-name-box p a:hover {
    color: #FF0000;
    transition: .4s;
}

.l-inst-name-box p:nth-of-type(2) {
    font-size: 1.3rem;
}

@media screen and (min-width: 768px) {
    .l-inst-name-box p {
        font-size: 5.0rem;
    }

    .l-inst-name-box p:nth-of-type(2) {
        font-size: 2.0rem;
    }
}

.l-inst-name-box p:nth-of-type(2):before,
.l-inst-name-box p:nth-of-type(2):after {
    content: '-';
    padding: 0 4px;
}

.l-text-box {
    width: 100%;
}

.l-text-box p {
    font-size: 1.3rem;
}

@media screen and (min-width: 768px) {
    .l-text-box {
        margin: 32px auto;
    }

    .l-text-box p {
        font-size: 1.5rem;
    }
}

@media screen and (min-width: 980px) {
    .l-inst-img-box img {
        width: 250px;
        height: 250px;
    }

    .l-inst-name-box {
        width: calc(100% - 250px);
    }
}

.l-text-box p:nth-of-type(1):before {
    content: '-';
    padding-right: 4px;
}

.triangle1 {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 20px 0;
    border-color: transparent #590004 transparent transparent;
}

.triangle2 {
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 0 20px;
    border-color: transparent transparent transparent #590004;
}

.l-last-box {
    color: #22333B;
    text-align: justify;
    text-justify: inter-ideograph;
    margin: 0 32px 96px;
}

@media screen and (min-width: 768px) {
    .l-last-box {
        margin: 0 48px 96px;
    }
}