@charset "utf-8";

html,
body {
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

.waku {
    width: 100%;
    max-width: 1100px;
    padding: 0 20px;
}

nav ul {
    width: 100%;
    max-width: 900px;
    padding: 0 10px;
}

.openbtn,
.circle-bg {
    display: none;
}

.top_aisatsu {
    width: 100%;
    max-width: 900px;
    padding: 0 20px;
}

.top_news {
    padding: 70px 5%;
}

.about_c p {
    padding: 0 5%;
}

.proifileMesse {
    width: 100%;
    max-width: 632px;
}

.proifileMesse p {
    width: auto;
    left: 0;
    padding: 0 20px;
}

.rensyu,
.bbq {
    width: 100%;
    max-width: 1000px;
}

.practice_point {
    width: 100%;
    max-width: 960px;
    padding: 40px 5% 30px;
}

.proifileMesse02 {
    width: 100%;
    max-width: 940px;
    padding: 40px 5% 50px;
}

.proifileMesse02 p {
    width: auto;
    left: 0;
}

.join_map {
    width: 100%;
    max-width: 1100px;
}

.join_t,
.join_m,
.join_h,
.join_h2 {
    width: 100%;
    max-width: 600px;
    padding: 0 20px;
}

.t-waku {
    width: 100%;
    max-width: 1100px;
    height: auto;
    padding: 65px 20px 40px;
}

.toi_form {
    width: 90%;
    max-width: 460px;
    margin: 50px auto 20px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    max-width: 100%;
}

@media screen and (min-width: 821px) and (max-width: 1024px) {

    .fuwafuwa {
        margin: 80px auto 30px;
        display: block;
    }
}

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

    body {
        padding-top: 62px;
    }

    /* .clear {
        height: 16px;
    } */

    #content {
        width: 100%;
    }

    h2 {
        font-size: 24px;
        padding-bottom: 20px;
    }

    h3 {
        font-size: 18px;
        margin: 15px 0 25px;
    }

    h4 {
        font-size: 17px;
    }

    h5 {
        font-size: 16px;
    }

    main {
        padding-bottom: 30px;
    }

    footer {
        padding: 16px;
        font-size: 12px;
        line-height: 1.6;
    }

    .waku {
        padding: 0 15px;
    }

    :root {
        --btn-top: 10px;
        --btn-size: 50px;
        --btn-gap: 6px;
    }

    .headBox {
        position: fixed;
        top: 0;
        width: 100%;
        border-bottom: 4px solid #CE0D1B;
    }

    .top {
        max-width: 100%;
        min-height: calc(var(--btn-top) + var(--btn-size) + var(--btn-gap));
        padding: 4px 66px 4px 12px;
        align-items: center;
    }

    .top p {
        flex-shrink: 0;
        margin: 0;
    }

    .top p img {
        height: 40px;
        width: auto;
    }

    h1 {
        flex: 1 1 auto;
        min-width: 0;
        margin-left: 12px;
    }

    h1 img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 22px;
        margin: 0;
        object-fit: contain;
        object-position: left center;
    }

    nav {
        width: 100%;
        padding: 0;
        background-color: transparent;
    }

    .openbtn {
        display: block;
        position: fixed;
        top: var(--btn-top);
        right: 12px;
        z-index: 10000;
        width: var(--btn-size);
        height: var(--btn-size);
        cursor: pointer;
    }

    .openbtn span {
        display: inline-block;
        position: absolute;
        left: 12px;
        width: 26px;
        height: 3px;
        border-radius: 2px;
        background-color: #CE0D1B;
        transition: all 0.4s;
    }

    .openbtn span:nth-of-type(1) {
        top: 15px;
    }

    .openbtn span:nth-of-type(2) {
        top: 24px;
    }

    .openbtn span:nth-of-type(3) {
        top: 33px;
    }

    .openbtn.active span {
        background-color: #ffffff;
    }

    .openbtn.active span:nth-of-type(1) {
        top: 18px;
        left: 14px;
        width: 24px;
        transform: translateY(6px) rotate(-45deg);
    }

    .openbtn.active span:nth-of-type(2) {
        opacity: 0;
    }

    .openbtn.active span:nth-of-type(3) {
        top: 30px;
        left: 14px;
        width: 24px;
        transform: translateY(-6px) rotate(45deg);
    }

    body.nav-open .headBox {
        background-color: transparent;
        border-bottom-color: transparent;
    }

    body.nav-open .top {
        opacity: 0;
        visibility: hidden;
    }

    .circle-bg {
        display: block;
        position: fixed;
        z-index: 9100;
        pointer-events: none;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #CE0D1B;
        top: calc(50% - 50px);
        left: calc(50% - 50px);
        transform: scale(0);
        transition: all 0.6s;
    }

    .circle-bg.circleactive {
        transform: scale(30);
        pointer-events: auto;
    }

    #g-nav.panelactive {
        position: fixed;
        z-index: 9500;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
    }

    #g-nav-list {
        display: none;
        position: fixed;
        z-index: 9500;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    #g-nav.panelactive #g-nav-list {
        display: block;
    }

    #g-nav ul {
        opacity: 0;
        display: block;
        position: absolute;
        z-index: 9500;
        top: 50%;
        left: 50%;
        width: auto;
        max-width: none;
        padding: 0;
        transform: translate(-50%, -50%);
    }

    #g-nav.panelactive ul {
        opacity: 1;
    }

    #g-nav.panelactive ul li {
        opacity: 0;
        animation-name: gnaviAnime;
        animation-duration: 1s;
        animation-delay: 0.2s;
        animation-fill-mode: forwards;
    }

    @keyframes gnaviAnime {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    #g-nav li {
        list-style: none;
        text-align: center;
    }

    #g-nav .gnavi li.menuOnly {
        display: block;
    }

    #g-nav li a {
        display: block;
        padding: 14px 10px;
        color: #ffffff;
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 0.1em;
        text-decoration: none;
    }

    #g-nav li a:hover {
        text-decoration: none;
        opacity: 0.7;
    }

    .gnavi li a::after {
        content: none;
    }

    #g-nav .gnavi li.bgLRextendTrigger,
    #g-nav .gnavi li.bgextend,
    #g-nav .gnavi li a.bgappearTrigger,
    #g-nav .gnavi li a.bgappear {
        opacity: 1;
        overflow: visible;
        animation: none;
    }

    #g-nav .gnavi li.bgLRextend::before {
        content: none;
    }

    .top_copy {
        padding: 20px 0;
    }

    .top_kikkake {
        font-size: 22px;
    }

    .top_koufun {
        font-size: 28px;
        padding-bottom: 25px;
    }

    .top_hello {
        padding-top: 60px;
    }

    .top_hello,
    .top_aisatsu {
        display: block;
        text-align: center;
    }

    .top_aisatsu p {
        padding-bottom: 20px;
    }

    .top_fukami {
        width: 200px;
    }

    .aisatu-text {
        text-align: left;
    }

    .top_news {
        padding: 30px 16px;
        font-size: 15px;
    }

    .top_news h2 {
        font-size: 20px;
    }

    .top_news table tr td {
        display: block;
        padding: 0 0 4px;
    }

    .top_news table tr td:first-child {
        padding-top: 14px;
        font-weight: 500;
    }

    .top_news table tr td:last-child {
        padding-bottom: 14px;
        border-bottom: 1px solid #c9d8e6;
    }

    .top_about {
        display: block;
        margin: 30px auto;
        padding: 0 15px;
    }

    .about_a {
        margin-bottom: 50px;
        padding: 0;
    }

    .top_h3 {
        white-space: nowrap;
        font-size: min(20px, calc(5vw - 2px));
    }

    .about_a ul {
        display: block;
        padding-bottom: 15px;
    }

    .about_a ul li {
        padding-bottom: 10px;
    }

    .about_schedule li {
        display: block;
        padding-bottom: 0;
    }

    .about_schedule li+li {
        margin-top: 16px;
    }

    .about_schedule .about_place,
    .about_schedule .about_time {
        display: block;
    }

    .about_schedule .about_time {
        padding-left: 1em;
    }

    .about_c {
        padding: 20px 0;
        margin-bottom: 15px;
    }

    .about_c p {
        padding: 0;
    }

    .about_a p a,
    .about_b a {
        display: inline-block;
        padding: 10px 40px;
    }

    .ranking p {
        font-size: 26px;
        margin: 0.5em;
    }

    .noto-serif-jp {
        font-size: 26px;
        margin-bottom: 15px;
    }

    .jyusyo_title {
        padding-top: 40px;
    }

    .record_img02 {
        margin: 40px auto 8px;
    }

    .accordion-area h4 {
        font-size: 18px;
    }

    .proifileBox01 {
        display: block;
        text-align: center;
        margin: 30px 0 40px;
    }

    .proifileBox01 p {
        text-align: center;
    }

    .proifileBox02 {
        margin-bottom: 50px;
    }

    .proifileText {
        margin-left: 0;
        padding: 0 15px;
        text-align: left;
    }

    .proifileMesse p {
        padding: 0;
    }

    .rensyu>p {
        padding-bottom: 40px;
        text-align: left;
    }

    .scheduleBox01,
    .scheduleBox02,
    .scheduleBox03 {
        display: block;
        margin-bottom: 30px;
    }

    .schedule01 img,
    .schedule02 img,
    .schedule03 img {
        width: 100%;
    }

    .schedule01 p,
    .schedule02 p,
    .schedule03 p {
        padding-bottom: 15px;
    }

    .timeline {
        padding: 10px 5px;
    }

    .timeline dl {
        margin: 0 0 12px 2em;
    }

    .timeline dt {
        width: 5.5em;
        font-size: 20px;
    }

    .timeline dd {
        font-size: 15px;
        line-height: 1.7;
    }

    .practice_point {
        margin-bottom: 60px;
        padding: 25px 20px;
        border-radius: 12px;
    }

    .practice_point::before {
        content: none;
    }

    .practice_point p:first-of-type {
        padding-left: 0;
    }

    .rule {
        padding-top: 20px;
        font-size: 15px;
        text-align: left;
    }

    .practice_point a {
        display: inline-block;
        margin: 10px 0 0;
        padding: 8px 30px;
    }

    .bbq {
        display: block;
    }

    .bbq img {
        width: 100%;
        margin-bottom: 15px;
    }

    .fuwafuwa {
        display: block;
        width: 220px;
        height: 220px;
        background-size: 220px auto;
        margin: 30px auto;
    }

    .coachBox {
        display: block;
        margin: 0 0 40px;
        text-align: center;
    }

    .coachBox img {
        width: 60%;
        max-width: 260px;
    }

    .coachText {
        width: 100%;
        margin: 15px 0 0;
        padding: 0 15px;
        text-align: left;
    }

    .coachKana {
        font-size: 16px;
    }

    .proifileMesse02 {
        margin-bottom: 60px;
        border-radius: 12px;
    }

    .waku_lead {
        text-align: left;
        margin: 15px 0 25px;
    }

    .join_item {
        margin: 40px 0 20px;
        font-size: 18px;
    }

    .join_t,
    .join_m,
    .join_h,
    .join_h2 {
        font-size: 16px;
    }

    .join_time li {
        display: block;
        margin-bottom: 16px;
    }

    .join_time li:last-child {
        margin-bottom: 0;
    }

    .join_time_place {
        display: block;
        font-weight: 500;
    }

    .join_time_when {
        display: block;
        padding-left: 1em;
    }

    .rolling {
        position: static;
        margin: 10px auto 0;
        text-align: center;
    }

    .join_map {
        display: block;
    }

    .join_map figure {
        width: 100%;
        max-width: 100%;
        margin-bottom: 30px;
    }

    .join_map .join_h3_02 {
        padding-top: 0;
    }

    .join_memo {
        margin-top: 40px;
        line-height: 2;
    }

    .submit_btn a {
        display: inline-block;
        padding: 10px 40px;
    }

    .t-waku {
        padding: 30px 15px;
    }

    .otoiawase a {
        padding: 16px 9px;
        font-size: 13px;
    }

    #form {
        scroll-margin-top: 75px;
    }

    .yokuaru_bar,
    .otoiawase_bar {
        font-size: 1.1em;
    }

    .qa_q {
        align-items: flex-start;
        margin: 0;
        padding: 14px 40px 14px 4px;
    }

    .qa_q::before,
    .qa_q::after {
        right: 12px;
        width: 13px;
    }

    .qa_a_inner {
        align-items: flex-start;
        padding: 0 10px 20px 4px;
    }

    .q_icon,
    .a_icon {
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        margin: 0 10px 0 0;
        background-size: contain;
    }

    .a_icon {
        margin-left: 15px;
    }

    .qa_question,
    .qa_anser {
        font-size: 15px;
        line-height: 1.6;
    }

    .toi_form {
        margin: 30px auto 10px;
    }

    input[type="radio"] {
        margin: 10px 8px 10px 0;
    }

    .submit {
        width: 200px;
        height: 70px;
    }

    .submit input[type="submit"] {
        font-size: 16px;
    }

    .toTop {
        right: 12px;
        bottom: 12px;
        width: 56px;
        height: 56px;
        line-height: 52px;
        font-size: 12px;
    }
}

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

    body {
        padding-top: 54px;
    }

    /* .clear {
        width: 100vw;
        height: 5px;
        background-color: #CE0D1B;
    } */

    .waku {
        margin-top: 0;
    }

    .waku h2 {
        margin-top: 0;
        padding-bottom: 15px;
    }

    .waku h2 img {
        display: block;
        width: 100vw;
        max-width: 100vw;
        height: auto;
        margin: 0 0 0 -15px;
    }

    .top {
        padding: 4px 66px 4px 10px;
    }

    .top p {
        flex-shrink: 0;
        margin: 0;
    }

    .top p img {
        height: 30px;
        width: auto;
    }

    h1 {
        flex: 1 1 auto;
        min-width: 0;
        margin-left: 10px;
    }

    h1 img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 16px;
        margin: 0;
        object-fit: contain;
        object-position: left center;
    }

    .top_koufun {
        font-size: 24px;
    }

    .ranking p {
        font-size: 22px;
    }

    .noto-serif-jp {
        font-size: 22px;
    }

    .coachBox img {
        width: 70%;
    }
}

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

    .footSitemap {
        padding: 6px 0 0;
        font-size: 14px;
        text-align: left;
    }

    .footSitemapInner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px 20px;
        padding: 0 6px 22px;
    }

    .footColTitle {
        font-size: 14px;
        padding-bottom: 8px;
        margin-bottom: 10px;
    }

    .footSitemap li {
        margin-bottom: 8px;
    }

    .footSitemap a {
        padding: 4px 0;
    }

    .copyright {
        padding-top: 14px;
        font-size: 11px;
    }

    #hello,
    #news,
    #koryu {
        scroll-margin-top: 75px;
    }
}

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

    .footSitemapInner {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}