@media screen and (max-width:768px) {
    .footer-container {
        flex-direction: column
    }

    .footer-column {
        width: 100%;
        flex: 0
    }

    body {
        min-width: 99%
    }

    #footer div.tel {
        font-size: 10px
    }

    #footer div.inc h1 {
        font-size: 20px;
        width: 100%;
        line-height: 1;
        margin: 8px 0 .5px;
        font-weight: lighter;
        font-family: "A P-OTF 丸フォーク ProN", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif
    }

    #footer div.inc div.i_l img {
        width: 220%;
        height: auto;
        padding-top: 20px
    }

    .i_l {
        width: 150px;
        max-width: 100%
    }

    .accordion-trigger::after {
        float: right
    }

    .accordion-trigger.active::after {
        content: "－"
    }

    #footer .footer-bg {
        display: flex;
        flex-direction: column;
        align-items: center
    }

    #footer .footer-bg .inc {
        float: none;
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin: 0 0 20px
    }

    #footer .footer-bg .foot {
        float: none;
        display: flex;
        width: 100%;
        box-sizing: border-box;
        flex-direction: column;
        align-items: flex-start
    }

    #footer .footer-bg .foot .i_r {
        display: flex;
        justify-content: left;
        gap: 10px;
        margin-bottom: 0
    }

    .i_l {
        width: 90px;
        max-width: 100%
    }

    .i_a {
        display: none
    }

    #footer div.foot {
        margin-left: 0
    }

    #footer div.foot img {
        width: 60%
    }

    #footer div.inc div.i_a h3 {
        font-size: 20px;
        margin: 0
    }

    #footer div.inc div.i_a img {
        width: 10%;
        height: 10%
    }

    #footer .inc .foot div {
        float: none
    }

    #footer .i_r {
        display: flex;
        align-items: flex-start;
        gap: 10px
    }

    #footer .inc .foot,
    #footer .inc .foot .i_r,
    #footer .inc .foot div {
        float: none !important
    }

    #footer .tel {
        justify-content: flex-end;
        padding-left: 50px
    }

    #footer div.inc div.i_a {
        text-align: right;
        width: 93%
    }

    .foot {
        gap: 0
    }

    #footer div.footer-bg div.inc div.i_a h1 {
        text-align: right
    }

    body,
    header {
        overflow-x: hidden
    }

    #header {
        height: 100px
    }

    .hamburger {
        display: block
    }

    #headerFixedBox {
        position: fixed;
        top: 0;
        right: -100%;
        width: 92%;
        height: 100dvh;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        overflow-y: auto;
        transition: right .4s ease;
        z-index: 9998;
        padding: 20px
    }

    #header {
        overflow-y: hidden;
    }

    body {
        overflow-y: hidden;
    }

    #headerFixedBox.active {
        right: 0
    }

    #headerFixedBox ul#topmenu {
        display: flex;
        flex-direction: column;
        gap: 15px
    }

    #headerFixedBox .child {
        display: none;
        flex-direction: column;
        gap: 10px;
        padding-left: 20px
    }

    #headerFixedBox .child .item a {
        display: block;
        padding: 5px 0
    }

    #headerFixedBox ul#topmenu li:hover>.child {
        display: block
    }

    #inq_btn,
    #tel_btn {
        left: 150px
    }

    #tel_btn div#telephone h3 {
        font-size: 28px
    }

    #headerFixedBox .child.open {
        display: flex;
        flex-direction: column;
        gap: 10px
    }

    #headerFixedBox .accordion-trigger {
        display: block;
        width: 100%;
        padding: 12px 0;
        font-weight: bold;
        cursor: pointer
    }

    body.noscroll {
        overflow: hidden;
        height: 100vh
    }

    #headerFixedBox ul#topmenu li a,
    #headerFixedBox ul#topmenu li span {
        font-size: 13px
    }

    ul.child li {
        padding: 10px 0 5px 10px;
        text-align: left;
        width: 100%
    }

    #headerFixedBox ul#topmenu li span.txsmall {
        font-size: 14px
    }

    ul.child li div.item {
        background-position: left 15px
    }

    #mainTop .logo-area {
        display: flex;
        align-items: center;
        gap: 15px
    }

    #mainTop .logo-area h1 img {
        display: block;
        height: 80px;
        width: auto
    }

    #mainTop .sub-logos {
        display: flex;
        align-items: center;
        gap: 10px
    }

    #mainTop .sub-logos img {
        height: 40px;
        width: auto;
        display: block
    }

    #footer .footer-bg .foot {
        width: auto;
        padding-left: 70px
    }

    .footer-bg {
        height: 100px
    }

    #rightSide {
        display: none
    }

    #contents section .sec div .td {
        clear: both
    }

    li.selected {
        width: 280px
    }

    #hamburger {
        display: block
    }

    #headerFixedBox {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100%;
        background: #fff;
        z-index: 1002;
        overflow-y: auto;
        transition: right .3s ease;
        padding: 20px 10px
    }

    #headerFixedBox.active {
        right: 10px
    }

    #headerFixedBox.open {
        right: 0
    }

    #topmenu>li {
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px
    }

    #topmenu>li>a,
    #topmenu>li>span {
        display: block;
        font-size: 16px;
        padding: 12px;
        cursor: pointer
    }

    .toggle-btn::after {
        content: "＋";
        float: right;
        font-size: 18px
    }

    .toggle-btn.open::after {
        content: "ー"
    }

        .has-sub .toggle::after {
        content: "＋";
        float: right;
        font-size: 18px
    }

    .has-sub.open .toggle::after {
        content: "－"
    }

    ul.child {
        display: none !important;
        padding-left: 15px
    }

    ul.child.open {
        display: flex;
        flex-direction: column
    }

    ul.child .item a,
    ul.child span {
        display: block;
        padding: 10px 6px;
        font-size: 14px
    }

    body.no-scroll {
        overflow: hidden;
        height: 100vh
    }

    #contents,
    #mainTop {
        width: 100%;
        max-width: 100%
    }

    .nav ul {
        width: 100%
    }

    .nav li {
        width: auto;
        float: none;
        border-left: none;
        text-align: left;
        flex: 1 0 auto
    }

    body.menu-open {
        overflow: hidden;
        height: 100%
    }

    body {
        padding-left: 3px
    }

    .pc {
        display: none !important
    }

    html {
        overflow-x: hidden
    }

    .body-fixed {
        /*
        position: fixed;
        */
        width: 100%;
        overflow-y: hidden
    }

    .hamburger {
        position: absolute;
        right: 10px;
        top: 15px;
        width: 32px;
        height: 26px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: 0 0;
        border: none;
        z-index: 1100
    }

    .hamburger span {
        display: block;
        height: 4px;
        background: #333;
        border-radius: 2px
    }

    #menuOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .4);
        display: none;
        z-index: 800
    }

    #menuOverlay.active {
        display: block
    }

    #headerFixedBox {
        position: fixed;
        top: 0;
        right: -75%;
        width: 70%;
        max-width: 360px
    }
}

@media screen and (max-width:480px) {
    body {
        width: 99%
    }
}

@media (min-width:749px) {

    div.pick,
    div#phone {
        display: none
    }
}

@media screen and (min-width:769px) {
    ul.child {
        display: none
    }

    #topmenu li:hover>ul.child {
        display: block
    }
}

.hamburger-btn,
.hamburger-nav {
    display: none
}

@media screen and (max-width:768px) {
    .hamburger-btn {
        display: block;
        width: 35px;
        height: 25px;
        position: fixed;
        top: 15px;
        right: 5px;
        z-index: 1000;
        background: 0 0;
        border: none
    }

    .hamburger-btn span {
        display: block;
        height: 3px;
        background: #333;
        margin: 6px 0;
        transition: .3s
    }

    
    .hamburger-btn.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg)
    }

    .hamburger-btn.active span:nth-child(2) {
        opacity: 0
    }

    .hamburger-btn.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg)
    }
    /*

    .hamburger-btn span:nth-child(1) {
        transform: translateY(9px) rotate(45deg)
    }

    .hamburger-btn span:nth-child(2) {
        opacity: 0
    }

    .hamburger-btn span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg)
    }


    .hamburger-btn.active span:nth-child(1) {
        transform: translateY(3px) rotate(0deg)
    }

    .hamburger-btn.active span:nth-child(2) {
        transform: translateY(3.5px) rotate(0deg);
        opacity : 1;
    }

    .hamburger-btn.active span:nth-child(3) {
        transform: translateY(4px) rotate(0deg)
    }
        */



    .hamburger-nav {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        width: 80%;
        height: 100vh;
        background: #fff;
        z-index: 900;
        padding-top: 40px;
        overflow-y: auto;
        opacity: .95
    }

    .hamburger-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%
    }

    .hamburger-nav ul li {
        text-align: left;
        padding: 15px 20px;
        border-bottom: 1px solid #eee
    }

    .hamburger-nav a,
    .hamburger-nav .toggle {
        color: #333;
        font-size: 12px;
        text-decoration: none;
        display: block
    }

    .sub-menu {
        display: none;
        background: #f9f9f9;
        padding-left: 20px;
        overflow: hidden;
        transition: all .25s ease
    }

    .sub-menu li {
        padding: 10px 0;
        border-bottom: none
    }

    .hamburger-nav .sub-menu {
        display: none;
        padding-left: 20px
    }

    .hamburger-nav .toggle {
        display: block;
        cursor: pointer;
        padding: 10px 0
    }
}

body.fixed {
    overflow: hidden;
}

@media screen and (max-width:768px) {
    #contents section .jisseki div.tbright {
        float: none;
        margin-top: 10px;
        border-top: 0;
        text-align: center;
        width: 98%
    }

    #contents section .jisseki div.tbleft {
        border-bottom: 0;
        text-align: center;
        width: 98%
    }

    #contents section .jisseki div.total {
        text-align: left;
        margin-left: 10px
    }

    #contents section .jisseki div.tbright div.top,
    #contents section .sec div .right,
    div#iCatch,
    .detail_tbl .clearFloat {
        display: none
    }

    #contents section div#company_lst {
        height: 150px;
        margin-top: 10px;
        padding: 0 5px 8px 10px;
        font-size: 10px;
        background-image: none;
        font-weight: 700
    }

    #contents div#company_lst div.left {
        width: 33%
    }

    div.tokouzalist {
        width: 380px
    }

    #contents section .sec div .td {
        width: 100%
    }

    div#contact_con .contact_det {
        width: auto
    }

    #contents div.inq_btn a {
        background-image: url(../image/contact_btn-small.jpg?ver=1.0.1);
        width: 170px
    }

    div#contact_con .contact_det .inquiry {
        padding-left: 205px
    }

    div#phone img {
        width: 100%
    }

    #contents {
        width: 100%
    }



    #contents,
    #footer div.inc,
    #mainTop,
    #subContent .sub {
        max-width: 960px;
        width: 100%;
    }

    #leftMain,
    article {
        width: 100%;
    }

    #contents section .jisseki div.bottom {
        border-bottom: 1px #9b9b9b dotted
    }

    section#sec1 .f_1,
    section#sec1 .f_2,
    section#sec1 .f_3 {
        padding: 130px 10px 10px;
        background-size: 100%
    }

    section#sec1 td {
        text-align: left
    }

    .course-detail section {
        margin-bottom: 0
    }

    section#other .corse .btn {
        width: 67%
    }

    #contents #leftMain div.detail .detail_tbl {
        display: flex
    }

    .detail_tbl {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
        align-items: baseline;
        padding: 15px 0
    }

    section#voice .f_1,
    section#voice .f_2,
    section#voice .f_3 {
        padding-top: 0;
        padding-left: 15px;
        text-align: left;
        font-size: 15px;
        width: 480px
    }

    section#voice .studentleft {
        padding-left: 0;
        width: 50px;
        padding-top: 25px
    }

    #contents #leftMain div.detail .detail_tbl .dt_title {
        width: 180px;
        flex-shrink: 0;
        font-weight: 700;
        color: #333
    }

    .detail_tbl .dt_normal,
    .detail_tbl .price {
        flex-grow: 1;
        text-align: left;
        line-height: 1.6
    }

    .detail_tbl .fl {
        float: none
    }

    #contents #leftMain div.detail .bt {
        display: flex;
        flex-wrap: wrap
    }

    #contents #leftMain div.detail .detail_tbl .dt_normal {
        padding-left: 10px
    }

    #contents #leftMain div.detail div {
        margin-top: 0
    }

    iframe {
        width: 380px
    }

    div#op_r table,
    div#op_r tbody tr td {
        text-align: left
    }

    div.cnts {
        border-bottom: 1px solid #ddd;
        padding-bottom: 0;
        flex-direction: column
    }

    div.cnts .c,
    div.cnts .l,
    div.cnts .r {
        width: 95%;
        border: none;
        padding-left: 5px
    }

    div.cnts .r {
        margin-top: 0;
        border-top: 1px solid #eee;
        padding-top: 0
    }

    div.cnts .r .rtop {
        height: auto
    }

    .cta .flex a:first-child {
        width: 90%
    }

    .cta .flex .btn {
        width: 95%;
        display: flex
    }

    .cta {
        width: 85%;
        margin-top: 10px
    }

    .cta p {
        text-align: left
    }

    .cta h2 span {
        display: inline-block
    }

    .cta .flex {
        display: block
    }

    input,
    textarea {
        width: 98%
    }

    section#intr {
        background-image: url(../image/support.jpg?ver=1.0.1);
        background-repeat: no-repeat;
        height: 220px;
        padding-left: 130px;
        background-size: 30%
    }

    section#intr .up {
        margin: 0;
        padding-top: 0
    }

    section#sp1 ul {
        left: 0;
        position: relative;
        width: 98%
    }

    section#sp1 .detail {
        width: 96%
    }

    div#op_p {
        background-image: none;
        height: auto;
        padding-right: 10px;
        margin: 10px 0;
        padding-left: 10px
    }

    section#sp1 .p {
        width: 98%;
        margin: 0 auto
    }

    section#sp1 div.exp {
        font-size: 19px
    }
}

.page-nav li a {
    white-space: nowrap
}

@media screen and (max-width:767px) {
    div#pagettl h1.python {
        font-size: 20px
    }

    section.sec1 table td div.overview1,
    section.sec1 table td div.overview2,
    section.sec1 table td div.overview3,
    section.sec1 table td div.overview4 {
        max-height: 3000px;
        height: auto;
    }

    section.sec1 table td {
        vertical-align: top;
        border-bottom: 2px #87a9cc solid;
    }

    section.sec1 table td div.under {
        border-bottom: none;
    }

    div.cnts .c div.detail .detail_tbl .fl {
        font-size: 20px;
    }

    .detaila {
        padding: 0;
    }

    div.cnts h3 {
        margin-top: 0;
    }

    #contents .course-detail div.cta h2 {
        font-size: 16.5px;
        text-align: center;
    }

    .cta p {
        font-size: 10px;
        text-align: center;
    }

    button.hamburger-btn {
        display: block;
    }

}