@media (max-width: 1048px) {

    /* 共通 */

    .pc_none {
        display: block;
    }

    .sp_none {
        display: none;
    }

    section {
        padding: 50px 0;
    }

    .button a {
        font-size: 14px;
        letter-spacing: 0.05em;
        padding: 14px 30px;
    }

    h3 {
        font-size: 20px;
        padding-bottom: 40px;
    }

    h3 span {
        font-size: 10px;
    }


    /* sp menu */

    .sp_menu_container {
        position:fixed;
        top: 0;
        right: -110%;
        width: 100%;
        height: 570px;
        transition: all 0.5s ;
        z-index: 999;
        background: rgb(255,255,255);
        box-shadow: 0 0 15px rgba(0,0,0,0.5);
        flex-direction: column;
    }

    header > a {
        flex-direction: column;
        padding: 14px 0;
    }

    header h1 {
        padding-right: 0;
        padding-bottom: 10px;
    }

    .sp_menu_container .menu {
        flex-direction: column;
    }

    .sp_menu_container .menu li {
        line-height: 5em;
        text-align: center;
    }

    .sp_menu_container .menu li:not(:last-of-type) {
        border-bottom: 1px solid #ddd;
        padding-right: 0;
    }

    .sp_menu_container .contact_menu {
        justify-content: center;
    }

    header .contact_menu li:first-of-type {
        border-left: 0;
    }

    .sp_menu_container.active {
        right: 0;
    }

    .sp_menu {
        position: fixed;
        z-index: 9999;
        top: 0;
        right: 0;
        background: #666;
        width: 16px;
        height: 16px;
        padding: 10px 10px 16px 16px;
        border-radius: 0 0 0 20px;
        display: block;
        box-shadow: 0 0 4px rgba(0,0,0,0.5);
    }

    .sp_menu_back.active {
        display: block;
        position: fixed;
        background: #000;
        opacity: 0.5;
        width: 100%;
        height: 100%;
        z-index: 99;
    }

    .sp_menu_back {
        opacity: 0;
        transition: all 0.5s ;
    }

    .sp_menu_container.active + .sp_menu .close,
    .sp_menu_container + .sp_menu .open {
        display: none;
    }

    .sp_menu_container.active + .sp_menu .open,
    .sp_menu_container + .sp_menu .close {
        display: block;
    }



    /* index */

    main {
        background-position: 70% 100%;
        background-repeat: no-repeat;
        background-size: 900px auto;
    }

    main .container {
        flex-direction: column;
        align-items: center;
        padding-top: 50px;
        padding-bottom: 20px;
    }

    main .contents {
        width: 100%;
    }

    main h2 {
        font-size: 50px;
        text-align: center;
    }

    main h2 span {
        font-size: 30px;
        text-align: center;
    }

    main h4 {
        text-align: center;
    }

    main ul {
        padding-bottom: 320px;
    }

    main ul li {
        font-size: 14px;
        padding: 10px;
    }

    main .contents + .img {
        width: 200px;
        bottom: -100px;
        right: auto;
    }

    .main_contact {
        padding: 120px 20px 20px;
    }

    .main_contact > div {
        flex-direction: column;
    }

    .main_contact > div > div.flex {
        margin-bottom: 20px;
        align-items: center;
    }

    .main_contact .comment {
        font-size: 14px;
    }

    .main_contact .tel_box {
        padding-left: 0;
    }

    .main_contact .tel_box a {
        font-size: 30px;
        white-space: nowrap;
    }

    .main_contact .tel_box a:first-of-type {
        padding-right: 10px;
    }

    .information .list {
        font-size: 16px;
    }

    .information .list span.sub {
        font-size: 14px;
        padding-right: 0;
        width: 100%;
        text-align: center;
    }

    .information h4 {
        font-size: 16px;
    }

    .information .close_comment {
        font-size: 14px;
        top: -11px;
        text-align: center;
        padding: 4px 10px;
    }

    .information .close_comment span.icon-exclamation {
        font-size: 14px;
    }

    .information .post:not(:last-of-type) {
        padding-bottom: 40px;
    }

    .navigation h4 {
        font-size: 20px;
    }
    
    .navigation .link a{
        width: 100%;
    }

    .feature .container {
        justify-content: space-evenly;
    }

    .index .feature_box,
    .index .feature .caption,
    .index .feature_box > div {
        width: 100%;
        max-width: 320px;
    }

    .index .feature h3 {
        font-size: 20px;
    }

    .index .feature .underline {
        font-size: 14px;
    }

    .index .feature .button a {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .index .feature_box h5 {
        height: auto;
        font-size: 16px;
    }

    .index .feature_box > div:not(:last-of-type) {
        margin-bottom: 10px;
    }

    .index .point h3,
    .index .flow h3 {
        padding-bottom: 40px;
    }

    .index .point_box {
        flex-direction: column;
        padding: 20px;
        border-radius: 10px;
    }

    .index .point_box:not(:last-of-type) {
        margin-bottom: 40px;
    }

    .index .point_box .number {
        font-size: 50px;
        line-height: 1em;
        top: 0;
        position: static;
        padding-right: 10px;
    }

    .index .point_box h5 {
        width: 100%;
        font-size: 16px;
        padding-top: 0;
        white-space: normal;
        display: flex;
        align-items: center;
    }

    .index .point_box .img {
        width: 100%;
        max-width: 350px;
        padding: 20px;
    }

    .index .point_box p {
        width: 100%;
        font-size: 12px;
    }

    .index .case_box,
    .customer .case_box{
        box-sizing: border-box;
        padding: 30px;
        flex-direction: column;
    }

    .index .case h4 {
        font-size: 16px;
    }

    .index .case .interview .img,
    .index .case .school .img {
        max-width: 350px;
        width: 100%;
    }

    .index .case_box > div {
        width: 100%;
        flex-wrap: wrap;
    }

    .index .case .school {
        padding-right: 0;
        margin-right: 0;
        border-right: 0;
        margin-bottom: 20px;
    }

    .index .case .comment {
        padding: 20px;
    }

    .index .case .button {
        margin-top: 40px;
    }
    
    .index .case .number,
    .customer .number{
        margin-right: 0;
    }
    
    .index .case .number p,
    .customer .number p{
        font-size: 40px;
        margin-bottom: 10px;
    }
    
    .index .case .content .flex,
    .customer .content .flex{
        flex-direction: column;
    }

    .index .flow .number {
        font-size: 20px;
        width: 30px;
        height: 30px;
        margin-top: -10%;
    }

    .index .flow .number_line {
        width: 30px;
    }

    .index .flow h5,
    .footer_contact h5 {
        font-size: 16px;
    }




    /* 下層共通 */

    .page_contents .container {
        padding: 30px 20px;
    }

    .page_contents .container > p {
        padding-top: 10px;
    }

    .tab_menu .tab_btn {
        width: 45%;
        font-size: 12px;
        padding: 15px 0 10px 0;
    }

    .tab_menu .tab_btn_c:hover,
    .tab_menu .tab_btn_b:hover,
    .tab_menu .tab_btn_f:hover {
        padding-top: 10px;
    }

    .communication.tab_item .function_list li,
    .business.tab_item .function_list li{
        width: 100%;
    }

    .communication.tab_item .function_list li:not(:nth-of-type(4n)),
    .business.tab_item .function_list li:not(:nth-of-type(3n)){
        margin-right: 0;
    }

    .tab_item .function_list li:not(:first-of-type) {
        margin-top: 10px;
    }

    .tab_item .function_list li a {
        font-size: 12px;
        padding: 0 15px;
        height: 60px;
    }

    .tab_item li a:after {
        transform: scale(0.6);
        right: 10px;
        top: 40%;
    }

    /* price */

    .price .page_contents .container {
        padding-top: 30px;
    }

    .price .close_comment {
        max-width: 100%;
        font-size: 16px;
        padding: 4px 20px;
        display: flex;
        align-items: baseline;
        white-space: normal;
    }

    .price .page_contents .container:first-of-type {
        flex-wrap: wrap;
    }

    .price .plan {
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px;
    }

    .price .flex.plan_fields {
        flex-direction: column;
        align-items: center;
    }

    .price .head h4,
    .price .plan_c .head h4 {
        font-size: 20px;
        flex-direction: column;
    }

    .price .plan_c .head h4 + p {
        font-size: 14px;
    }

    .price .head h4 span {
        margin-right: 0;
    }

    .price_title01,
    .price_title02,
    .price .list,
    .price_title03 .yen,
    .price_title03 .kome {
        font-size: 14px;
    }

    .price_title03 .yen,
    .price_title03 .kome {
        line-height: 2.2em;
    }

    .price_title03 {
        align-items: flex-end;
    }

    .price_title03 .value {
        font-size: 24px;
    }

    .price div.badge {
        padding-top: 4px;
        width: 100px;
        height: 100px;
    }

    .price .default_price dt {
        width: 100%;
        border-right: 0;
        border-bottom: 0;
    }

    .price .default_price dd {
        width: 100%;
        text-align: left;
        border-top: 1px dashed #e3e3e3;
    }


    /* customer */

    .customer_box {
        justify-content: center;
    }

    .customer_box a {
        width: 100%;
        max-width: 275px;
        margin: 15px;
    }

    .customer_box h4 {
        font-size: 14px;
        padding-bottom: 10px;
    }

    .customer_box .text {
        padding: 20px;
    }

    .iziModal {
        width: 90%;
    }

    .modal_container {
        padding: 20px;
    }

    .iziModal-content .close {
        justify-content: flex-start;
        padding-right: 0;
        padding-left: 15px;
        height: 60px;
    }

    .interview {
        width: 100%;
    }

    .customer .case_box h4 {
        font-size: 16px;
        margin: 20px 0;
    }

    .customer .case_box .interview .img,
    .customer .case_box .school .img {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .customer .case_box .comment {
        padding: 20px;
        margin: 20px 0;
    }

    .customer .case_box .comment + div {
        flex-wrap: wrap;
        width: 100%;
    }

    .customer .case_box .school {
        padding-right: 0;
        margin-right: 0;
        border-right: 0;
        margin-bottom: 20px;
        width: 100%;
    }


    /* about */

    .about dt,
    .about dd {
        width: 100%;
    }

    .about dt {
        padding-bottom: 10px;
    }

    .about dd {
        border-top: 0;
        padding-top: 0;
    }

    .about dt:last-of-type {
        border-bottom: 0;
    }


    /* demo */

    .demo .contents_box {
        flex-direction: column;
        padding-top: 20px;
    }

    .demo .contents_box:last-of-type {
        flex-direction: column-reverse;
    }

    .demo .contents_box > div:first-of-type {
        margin-right: 0;
    }

    .demo .text,
    .demo .flow {
        width: 100%;
    }

    .demo .flow {
        padding: 20px;
        box-sizing: border-box;
    }

    .demo .flow .number {
        font-size: 20px;
        width: 30px;
        height: 30px;
        margin-top: -10%;
    }

    .demo .flow .number_line {
        width: 30px;
    }

    .demo .contents_box h4 {
        font-size: 20px;
        text-align: center;
    }

    .demo .contents_box h4 span {
        margin-left: 10px;
    }

    .demo .contents_box h4 + div {
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: center;
    }

    .demo .flow h5 {
        font-size: 16px;
    }

    .demo .flow h5 + p {
        padding-bottom: 20px;
    }

    .demo .button {
        margin-bottom: 20px;
        justify-content: center;
    }


    /* contact */

    .contact dt,
    .contact dd {
        width: 100%;
    }

    .contact dt,
    .contact dt:not(:last-of-type) {
        margin-bottom: 10px;
    }

    .contact .page_contents h4 {
        font-size: 16px;
        padding-top: 30px;
    }

    .cp_ipselect select {
        padding: 10px 30px 10px 14px;
    }

    .cp_ipselect.cp_sl01::before {
        top: 1.1em;
    }

    .contact input[type="text"],
    .contact textarea {
        padding: 10px 14px;
    }

    .radio_area {
        margin-top: 0;
    }

    .contact .privacy_policy {
        margin: 20px 0;
        padding: 20px;
    }

    .contact .contents li h6 {
        font-size: 14px;
    }

    .contact .contents li p,
    .contact .contents li ul {
        margin-left: 1em;
    }

    .contact .send {
        padding-bottom: 30px;
        margin-bottom: 30px;
    }

    .contact .send h5 {
        font-size: 16px;
    }

    .contact .send p {
        font-size: 12px;
    }

    .form_function h5 {
        font-size: 14px;
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .form_function dt,
    .form_function dd {
        padding: 10px;
    }

    .contact .form_function dt,
    .contact .form_function dt:not(:last-of-type) {
        margin-bottom: 0;
        border-bottom: 0;
    }

    .form_function dd {
        border-top: 1px dashed #c9c9c9;
    }

    .form_function dd div {
        min-height: 1em;
    }

    .form_function dt:last-of-type {
        border-bottom: 0;
    }

    .form_function dd input[type="text"] {
        width: 80px;
    }

    .form .etc {
        padding-top: 30px;
    }

    .form .etc p {
        font-size: 12px;
        padding-bottom: 10px;
    }

    .form .caution > div {
        flex-direction: column;
        padding: 0 10%;
    }

    .form .caution .img {
        padding-right: 0;
        padding-bottom: 20px;
        width: 60px;
    }

    .contact.form .page_contents h4 {
        padding-top: 0;
    }


    /* privacy-policy */

    .privacy_policy .contents li h6 {
        font-size: 14px;
    }

    .pp .page_contents .container > p,
    .privacy_policy .contents > ul > li ul li,
    .privacy_policy td {
        font-size: 12px;
    }

    /* footer */
    .footer_contact,
    .footer_menu {
        padding: 40px 0;
    }

    .footer_contact h4 span {
        padding-left: 0;
    }

    .footer_menu .container {
        flex-direction: column;
        align-items: center;
    }

    .footer_menu .container > ul {
        padding-top: 30px;
        max-width: 230px;
    }

    .footer_menu ul.flex > li:not(:last-of-type) {
        padding-right: 0;
    }

    footer div.footer_content {
        margin: 30px 0;
    }

    footer ul li ul li {
        width: 160px;
    }
}

@media (max-width: 768px) {
    .container {
        width: 90%;
    }

    .main_contact .tel_box .flex {
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        height: 8rem;
        padding-bottom: 10px;
    }

    .main_contact .tel_box .flex a {
        padding: 0;
    }

    .feature .container {
        flex-direction: column;
        align-items: center;
    }

    .footer_contact .tel_box {
        margin-bottom: 30px;
    }

    .footer_contact .tel_box div {
        flex-direction: column;
    }

    .footer_contact .tel_box a {
        font-size: 36px;
    }

    .footer_contact .tel_box a .icon-phone {
        font-size: 30px;
    }

    .footer_contact .tel_box a:first-of-type {
        padding-right: 0;
        padding-bottom: 16px;
    }

    .footer_contact .mail {
        padding: 20px 30px;
        border-radius: 10px;
    }

    .footer_contact .mail p {
        font-size: 18px;
    }

    .footer_contact .mail p span {
        font-size: 12px;
    }


    /* function */

    .function_list {
        padding: 50px 0;
    }

    .function_list p {
        padding-bottom: 30px;
    }

    .white_box {
        padding: 20px;
        flex-direction: column;
    }

    .white_box .flex {
        flex-direction: column;
    }

    .margin-right40 {
        margin-right: 0;
    }

    .width40p,
    .width60p {
        width: 100%;
    }

    .top30 {
        padding-top: 10px;
    }

    .white_box .img {
        margin: 0 auto;
    }

    .white_box div:nth-child(n+2) h5,
    .white_box div:nth-child(n+2) .img,
    .white_box .img:nth-child(n+2) {
        padding-top: 10px;
    }

    .tab_contents {
        padding-top: 30px;
        padding-bottom: 50px;
    }

    .tab_contents h4 {
        font-size: 16px;
        padding-top: 30px;
        padding-bottom: 10px;
    }

    .tab_contents h5 {
        font-size: 14px;
        padding-bottom: 10px;
    }

    .function .note {
        font-size: 12px;
    }
}

@media (max-width: 535px) {
    footer div ul.flex {
        display: block;
    }

    footer ul li ul li {
        margin: 20px 0;
    }
}