@media screen and (max-width: 768px){
    
    *{
        font-size: 12px;
    }
    
    .sp_none{
        display: none;
    }
    
    .pc_none{
        display: block;
    }
    
    header{
        position: sticky;
        padding: 10px 20px;
        padding-right: 80px;
    }
    
    .toggle_switch{
        z-index: 999;
        position: fixed;
        top: 20px;
        right: 20px;
        font-size: 16px;
        background-color: #fff;
        color: #ccc;
        padding: 10px;
        box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
        cursor: pointer;
    }
    
    .toggle_switch:hover{
        background-color: #ddd;
        color:#fff;
    }
    
    .sp_menu.active + div .toggle_switch{
        color:#fff;
        background-color: #eee;
    }
    
    .sp_menu{
        display: none;
    }
    
    .sp_menu.active{
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        flex-direction: column;
        width: 100%;
        height: 100vh;
        background-color:rgba(255,255,255,0.9);
        justify-content: center;
        padding: 30px;
        box-sizing: border-box;
    }
    
    .sp_menu li{
        text-align: center;
        border-bottom: 1px solid #ccc;
    }
    
    header li a{
        font-size: 14px;
        display: block;
        padding: 20px;
    }
    
    .sp_menu li:after{
        display: none;
    }
    
    .container{
        width: 90%;
    }
    
    h1,
    h2,
    h3{
        font-size: 18px;
    }
    
    h2{
        padding-bottom: 30px;
    }
    
    .info1{
        margin-top: -75px;
        padding-top: 0;
    }

    .info2 .container{
        padding-top: 200px;
        padding-bottom: 30px;
    }
    
    .info2 .container div{
        width: 100%;
    }
    
    .info2 {
        background-image: url(../images/info2_bg.png);
        background-color:rgba(255,255,255,0.5);
        background-blend-mode:lighten;
        background-size: cover;
        background-position: center;
    }
    
    .profiles1 .name{
        font-size: 20px;
    }
    
    .profiles1 .name span{
        font-size: 14px;
    }
    
    .profiles2 {
        background-image: url(../images/profiles2_bg.png);
        background-size: 200%;
        background-repeat: no-repeat;
        background-position: top left;
        padding-top: 180px;
    }
    
    .profiles2 p,
    .profiles3 .container div{
        background-color:rgba(255,255,255,0.5);
        background-blend-mode:lighten;
        padding: 20px 20px 0 20px;
    }
    
    .profiles2 .container div,
    .profiles3 .container div{
        width: 100%;
    }
    
    .profiles3 {
        background-size: 200%;
        background-position: top right;
        padding-top: 200px;
}
    .list_box {
        width: 100%;
        padding-top: 20px;
    }
    
    .list_box:not(:first-child){
        padding-top: 0;
    }
    
    .list_title{
        padding-top: 30px;
    }
    
    footer div{
        width: 100%;
    }
    
    footer h1{
        width: 100%;
        max-width: 300px;
        margin: auto;
    }
    
    footer .company:after {
        display: none;
    }
    
    footer .company{
        padding-bottom: 40px;
    }
    
    footer .company p{
        text-align: center;
    }
    
    footer ul{
        flex-direction: column;
        padding-top: 40px;
    }
    
    footer li{
        text-align: center;
    }
    
    footer li:after{
        display: none;
    }
    
    footer .contact a{
        font-size: 16px;
    }
    
}