@media screen and (min-width: 320px) and (max-width: 768px) {
/*nav*/
.header .navbar {
    padding: 1rem 2rem;
    margin: 0 auto;
}
.header .navbar .wrapper {
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    background: #fffffff0;
    transition: all 0.3s ease;
}
.header .navbar .wrapper .menu {
    display: flex;
    position: absolute;
    top: 210px;
    width: auto;
    transform: translateY(-50%);
    flex-direction: column;
}
.header .navbar .wrapper .menu-item {
    padding-bottom: 1rem;
    width: 100%;
    text-align: left;
}
.header .navbar .wrapper .menu-item:nth-child(1) a {
    transition-delay: 0.2s;
}
.header .navbar .wrapper .menu-item:nth-child(2) a {
    transition-delay: 0.3s;
}
.header .navbar .wrapper .menu-item:nth-child(3) a {
    transition-delay: 0.4s;
}
.header .navbar .wrapper .menu-item:nth-child(4) a {
    transition-delay: 0.5s;
}
.header .navbar .wrapper .menu-item:not(:first-child) {
    margin-left: 0;
}
.header .navbar .wrapper .menu-item a {
    padding: 1rem 2rem;
    opacity: 0;
    color: #252a32;
    font-size: 1rem;
    font-weight: 600;
    transform: translateX(-20px);
    transition: all 0.3s ease-in-out;
}
.header .navbar .nav-toggle {
    display: block;
    position: fixed;
    right: 5rem;
    top: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    z-index: 999;
}
.header .navbar .nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: #252a32;
    border-radius: 2px;
    margin-left: 14px;
}
.header .navbar .nav-toggle span:nth-child(1) {
    margin-top: 16px;
}
.header .navbar .nav-toggle span:nth-child(2) {
    margin-top: 4px;
    opacity: 1;
}
.header .navbar .nav-toggle span:nth-child(3) {
    margin-top: 4px;
}
.header .navbar #nav:checked + .nav-toggle {
    transform: rotate(45deg);
}
.header .navbar #nav:checked + .nav-toggle span {
    background: #252a32;
    transition: transform 0.5s ease;
}
.header .navbar #nav:checked + .nav-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(180deg);
}
.header .navbar #nav:checked + .nav-toggle span:nth-child(2) {
    opacity: 0;
}
.header .navbar #nav:checked + .nav-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(90deg);
}
.header .navbar #nav:checked ~ .wrapper {
    z-index: 99;
    opacity: 1;
}
.header .navbar #nav:checked ~ .wrapper .menu-item a {
    opacity: 1;
    transform: translateX(0);
}
/*banner*/
.right, .left {
    width: 50%;
}
.mask.mt100 {
    margin-top: unset !important;
}
.pic {
    background-position: center;
}
.center_ {
    display: none;
}
.c-img {
    width: 310px;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    display: block;
    top: 110px;
}
.column {
    top: -110px;
}

/*slider*/
.slick-prev:before, .slick-next:before {
    font-size: 18px;
}
.slick-prev {
    right: 100px;
}
.slick-next {
    right: 40px;
}
.img_description_layer {
    position: relative;
    background: #fff; 
    color: #333;
    visibility: unset;
    opacity: unset;
    padding: 10px;
}
p.img_description_date {
    padding-top: 20px;
}
.c-card_item {
    width: 47%;
    margin: 0 0.8% 10px;
}
.c-card {
    margin: 0 0% 0px;
}
.news .ttl01 {
    width: 100%;
    padding-right: 0;
}
.f_flex_m {
    display: flex;
    margin: 0;
    flex-wrap: wrap;
}
.news .ttl01 {
    text-align: center;
    padding-bottom: 20px;
}
.c-news_item .rect {
    padding: 0 10px;
}
.s_ttl {
    height: auto;
    padding-bottom: 10px;
}
.s_desc {
    margin-bottom: 10px;
    padding-top: 10px;
}
.c3>div {
    margin-right: 0;
    }

.c3>div:nth-child(3n) {
    margin-right: auto;
}
/*tables*/
table.table-outline td:first-child {
    width: 20%;
}

/*about page*/
.left__ {
    padding: 0px 30px 0 0px;
}
.timeline-content {
    padding: 0px 5px 0 30px;
}
#sns.mt20{
    margin-top: 0px !important;
}
.c2>div {
    width: 100%!important;
    margin-right: 0%;
}
.c2 div:last-child {
    margin-top: 20px;
}
.c2_content {
    font-size: 14px;
}
.c2_content {
    margin-top: 0px !important;
}
.c2_container .c2_content {
    padding: 10px;
}
.c2.c2_container>div:first-child, .c2.c2_container>div:last-child {
    padding: 0px 0 25px 0;
    margin-right: 0;
}
.sub-ttl {
    padding-top: 10px;
}

/*course page*/
.text_center.purpose-course {
    padding: 10px 10px;
}
.course-flow .flow__wrap {
    margin-top: 30px;
    margin-bottom: 30px;
}
.course-flow .flow__wrap .flow__list {
    padding-top: 10px;
    padding-bottom: 0px;
}
.course-flow .flow__wrap .flow__list .flow__item {
    padding: 10px;
}
.flow__head__page__course {
    padding: 10px;
    width: 100%;
}
.info {
    margin-bottom: 40px;
    margin-top: 40px;
}
.arrow__wrap .under__arrow {
    left: 50px;
    height: 260px !important;
    top: -134px;
}
.btn__link {
    margin-left: 40px;
    margin-right: 40px;
}
.arrow__wrap .link__arrow {
    height: 70px;
    top: -80px;
    left: 50px;
}
.arrow__wrap .under__arrow__short {
    height: 20px;
    width: 260px;
    top: -130px;
    left: 45px;
}

/*koji-cafe*/
.r-section {
    padding: 10px 0px 10px 10px;
}
#koji-cafe div.pl40 {
    padding-right: 20px;
}
#koji-cafe div.pr40 {
    padding-left: 20px;
}
.prod_box {
    width: 100%;
}

/*online-shop*/
a.link-box {
    width: 100%;
}
/*instructor*/
.c2-inst>div:first-child, .c2-inst>div:last-child {
    width: 100%;
}
.post-flex img.wp-post-image {
    width: 80%!important;
    margin: auto;
    display: block;
}

/*footer*/
.c2.footer_>div {
    padding: 25px 15px;
}
.company .ttl01 {
    text-align: center;
    display: block!important;
    padding-bottom: 30px;
}
.button-top input.present {
    width: 100%;
    margin: 0 auto !important;
    margin-bottom: 10px!important;
    display: block;
    height: 51px;
    padding: 15px;
    font-size: 16px;
}
.timeline::after {
    bottom: 80px;
}
.p10 {
    padding: 5px !important;
}
.p20 {
    padding: 10px !important;
}
.p30 {
    padding: 15px !important;
}
.p40 {
    padding: 20px !important;
}
.pt15 {
    padding-top: 8px !important;
}
.pt20 {
    padding-top: 10px !important;
}
.pt25 {
    padding-top: 10px !important;
}
.pt30 {
    padding-top: 15px !important;
}
.pt40 {
    padding-top: 20px !important;
}
.pt60 {
    padding-top: 30px !important;
}
.pt50 {
    padding-top: 25px !important;
}
.pb10 {
    padding-bottom: 5px !important;
}
.pb15 {
    padding-bottom: 7px !important;
}
.pb20 {
    padding-bottom: 10px !important;
}
.pb30 {
    padding-bottom: 15px !important;
}
.pb40 {
    padding-bottom: 20px !important;
}
.pb50 {
    padding-bottom: 25px !important;
}
.pb60 {
    padding-bottom: 20px !important;
}
.pl15 .ml20  {
    margin-bottom: 20px;
}
.pl5 {
    padding-left: 0px !important;
}
.pl30 {
    padding-left: 15px !important;
}
.pl40 {
    padding-left: 20px !important;
}
.pl15 {
    padding-left: 8px !important;
}
.pr30 {
    padding-right: 15px !important;
}
.pr40 {
    padding-right: 20px !important;
}
.pb25 {
    padding-bottom: 18px !important;
}
.ptb30 {
    padding-top: 20px;
    padding-bottom: 20px;
}
.ptb60 {
    padding-top: 30px;
    padding-bottom: 30px;
}
.mt5 {
    margin-top: 0px !important;
}
.mt50 {
    margin-top: 30px !important;
}
.mt20 {
    margin-top: 10px !important;
}
.mt25 {
    margin-top: 10px !important;
}
.mt30 {
    margin-top: 15px !important;
}
.mt40 {
    margin-top: 20px !important;
}
.mt60 {
    margin-top: 30px !important;
}
.mb20 {
    margin-bottom: 10px !important;
}
.mb30 {
    margin-bottom: 15px !important;
}
.mb40 {
    margin-bottom: 20px !important;
}
.mb50 {
    margin-bottom: 25px !important;
}
.mb60 {
    margin-bottom: 30px !important;
}
.mb80 {
    margin-bottom: 40px !important;
}
.mr30 {
    margin-right: 10px !important;
}
.mr60 {
    margin-right: 10px !important;
}
.ml20 {
    margin-left: 10px !important;
}
.ml30 {
    margin-left: 10px !important;
}
.ml60 {
    margin-left: 10px !important;
}
.button-simple, .button-top .button-simple, .button-simple2 {
    width: 70% !important;
    padding: 20px 0;
    line-height: 1.3;
    font-size: 4vw;
    margin: 30px auto 0 !important;
}
button {
    width: 100%;
}
body { 
    font-size: 16px;
}
.wrap, .wrap-course {
    width: auto;
    margin: auto;
    padding: 0 15px;
}
.w50,
.w70,
.w80 {
    width: 100%;
}
.footer {
    padding: 10px;
}
.parallax {
    height: 250px;
    background-size: contain;
}
.design_title01,
.design_title02,
.design_title03,
.design_title04,
.design_title05,
.design_title06,
.design_title07,
.design_title08,
.design_title09,
.design_title10 {
    font-size: 1.3em;
    padding: 15px;
}
.design_title07:before,
.design_title07:after,
.design_title10:before,
.design_title10:after{
    height: 2px;
}
section{overflow: hidden;}
br.sp_br {display: inline !important;}
input.present {
    width: 100%;
    margin: 0 auto !important;
    margin-bottom: 10px!important;
    display: block;
    height: 60px;
    padding: 15px;
    font-size: 16px;
}

form { padding: 10px; width: 96%; }
.c3>div {
    width: 100%;
    margin: auto;
    margin-bottom: 3%;
}
.t60, .t70 {
    font-size: 45px;
}
}
@media screen and (min-width: 320px) and (max-width: 768px) {
img.fllpic,
img.flrpic {
    width: 100%;
}
img.flrpic.picflr,
img.fllpic.picflr {
    width: 100%;
    margin: 0 0 9% 0 !important;
}
.dblock_sp {
    display: block !important
}
.dnone_sp { display: none;}
.dnone_pc { display: block;}
.overflow_h_pc { overflow: inherit;}
.inner-wrap {
    padding: 15px 10px;
}
.design_title01,
.design_title02,
.design_title03,
.design_title04,
.design_title05,
.design_title06,
.design_title07,
.design_title08,
.design_title09,
.design_title10 {
    font-size: 4.8vw;
    padding: 15px 0;
}
.t12, .t14, .t16 {
    font-size: 11px
}
.t15 {
    font-size: 13px
}
.t18 {
    font-size: 4.5vw
}
.t20 {
    font-size: 4.0vw
}
.t22 {
    font-size: 4.1vw
}
.t24{
    font-size: 4.2vw
}
.t26{
    font-size: 4.3vw
}
.t28 {
    font-size: 4.4vw
}
.t30 {
    font-size: 4.5vw
}
.t32{
    font-size: 4.6vw
}
.t34{
    font-size: 4.7vw
}
.t36{
    font-size: 4.8vw
}
.t38 {
    font-size: 4.9vw;
}
.t40 {
    font-size: 5vw;
}
.t42{
    font-size: 5.1vw;
}
.t44{
    font-size: 5.2vw;
}
.t46{
    font-size: 5.3vw;
}
.t48{
    font-size: 5.4vw;
}
.t50 {
    font-size: 5.5vw;
}
.t54 {
    font-size: 5.7vw;
}
.footer {
    float: left!important;
    line-height: 1em;
}
.parallax {
    height: 150px;
    background-size: contain;
}
/*-------------------------------------------*/
/*  Footer
/*-------------------------------------------*/
.footer div:first-child { margin-bottom: 10px; }

/*-------------------------------------------*/
/*  Page-top
/*-------------------------------------------*/
#page-top a {
    text-decoration: none;
    width: 50px;
    padding: 10px 0;
    text-align: center;
    display: block;
    border-radius: 0px;
}

#page-top {
    position: fixed;
    bottom: 0px;
    right: 0px;
    font-size: 67%;
    z-index: 9;
}
.signiture { 
    width: 120px;
 }
}
@media screen and (width: 430px) {
        .timeline::after {
        bottom: 60px;
    }
}
@media screen and (width: 540px) {
        .timeline::after {
        bottom: 70px;
    }
}
@media screen and (width: 768px) {
        .timeline::after {
        bottom: 70px;
    }
}
@media screen and (min-width: 1100px) and (max-width: 1280px) {
    .wrap {
        width: 100%;
        padding: 10px 50px;
    }
  
}