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

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

    body {
        min-width: 97%
    }

    #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 {
        height: auto;
    }

    .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 {
        display: flex;
        align-items: center;
        color: black;
    }

    #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-right: 50px;
    }

    #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;
    }

    .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: 80%
    }

    #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: 100%
    }

    #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
    }

    nav.hamburger-nav>ul>li.has-sub.open>.toggle::after {
        content: "－";
    }

    nav.hamburger-nav ul li.has-subB.open .toggle::after {
        content: "－";
    }

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

    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 {
        margin-inline: auto;
    }

    .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: 95%
    }
}

@media (min-width:749px) {

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

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

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

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

@media screen and (max-width:765px) {
    .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-nav {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        width: 80%;
        height: calc(100% - 40px);
        background: #fff;
        z-index: 900;
        padding-top: 40px;
        overflow-y: auto;
        opacity: .95;
        font-weight: 1000;
        font-size: 100%;
    }

    .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;
        font-size: 110%;
    }

    .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:765px) {
    #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: 8.8px;
        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 section .sec div .tdcont {
        border-bottom: 1px solid #cdcdcd;
    }

    #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: 100%;
        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: 140%;
    }

    .company-info {
        flex-direction: column;
        text-align: center;
    }

    .company-info .logo img {
        width: 100px;
    }

    .i_l {
        position: absolute;
    }
}

.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: 120%;
        text-align: center;
    }

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

    button.hamburger-btn {
        display: block;
        background-color: rgba(171, 171, 171, 0.7);
        color: #333;
        padding-bottom: 32px;
    }

    div.footer-bg img.ora {
        width: 45%;
    }

    div.footer-bg img.pm {
        width: 90%;
    }

    div.footer-bg table {
        margin-top: 10px;
        margin-left: 120px;
    }

    section#sec1 .f_4 {
        background-size: 75%;
        background-position: top;
        padding: 130px 10px 20px;
    }

    body {
        font-size: 75%;
    }

    .carri_sec ul.carr li {
        float: none;
        width: 95%;
    }

    ul#goal {
        padding-left: 0px;
    }

    div#pankuzu {
        font-size: 9.5px;
    }

 
    #contents .course-detail section#sp2 h2 {
        font-size: 150%;
    }


}

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

    #inq_btn,
    #tel_btn {
        left: 135px;
    }
}

html,
body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

div small.copyright {
    font-size: 10px;
}

footer#footer div#footer-bg {
    background-color: f5f5f5;
}

#footer .footer-bg {
    color: black;
}

caption {
    caption-side: bottom;
    width: 220px;
}