@media screen and (max-width: 768px) {
    img {
        max-width: 100%;
    }

    header {
        width: 100%;
        text-align: left;
        padding: 7px 0px 0;
        box-sizing: border-box;
    }

    header h1 {
        padding-left: 15px;
        padding-bottom: 13px;
    }

    header h1 img {
        height: 33px;
    }

    header .menu-trigger,
    header .menu-trigger span {
        display: inline-block;
        transition: all 0.4s;
        box-sizing: border-box;
    }

    header .menu-trigger {
        z-index: 999;
        position: fixed;
        top: 0;
        background: #414141;
        right: 0px;
        width: 45px;
        height: 45px;
        box-sizing: border-box;
        top: 0px;
        padding: 15px 10px;
    }

    header .menu-trigger.active {
        background: none;
    }

    header .menu-trigger span {
        position: absolute;
        left: 20%;
        width: 60%;
        height: 2px;
        background-color: #fff;
        border-radius: 4px;
    }

    header .menu-trigger span:nth-of-type(1) {
        top: 15px;
    }

    header .menu-trigger span:nth-of-type(2) {
        top: calc(50% - 1px);
    }

    header .menu-trigger span:nth-of-type(3) {
        bottom: 14px;
    }

    header .menu-trigger.active span:nth-of-type(1) {
        -webkit-transform: translateY(20px) rotate(-45deg);
        transform: translateY(20px) rotate(-45deg);
        top: 1px;
    }

    header .menu-trigger.active span:nth-of-type(2) {
        opacity: 0;
    }

    header .menu-trigger.active span:nth-of-type(3) {
        -webkit-transform: translateY(-20px) rotate(45deg);
        transform: translateY(-20px) rotate(45deg);
        top: 42px;
    }

    header .h_lead {
        border-top: 1px solid #e6e6e6;
        font-size: 12px;
        text-align: center;
        color: #666666;
        padding: 5px 0;
        background: #f9f8f4;
    }

    #nav {
        position: fixed;
        left: 0;
        top: 0px;
        z-index: 99;
        display: none;
        width: 100%;
        background: #231815;
        padding-top: 45px;
    }

    #nav ul {
        display: block;
        width: 100%;
        border-top: 1px solid #000;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 20px;
    }

    #nav ul li {
        width: 100%;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid #000;
    }
    #nav ul li a {
        display: block;
        padding: 10px 20px 10px;
        color: #fff;
        font-size: 1.4rem;
        line-height: 140%;
        text-decoration: none;
        position: relative;
        transition: ease all 0.3s;
    }

    #nav ul li a:hover {
        background: #ee7a01;
    }

    #nav ul li a:after {
        content: "";
        display: block;
        position: absolute;
        right: 20px;
        top: 50%;
        margin-top: -6px;
        width: 6px;
        height: 6px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    #nav .nav_btn {
        text-align: center;
        padding-bottom: 20px;
    }

    #nav .nav_btn img {
        width: calc(100% - 40px);
    }
    #nav .nav_btn a {
        margin-top: 8px;
        display: block;
    }
    #contents {
        background: #FFF;
        padding-bottom: 60px;
    }

    .ft_cta {
        background: #414141;
        padding: 20px 0 40px 0;
    }

    .ft_cta ul {
        text-align: center;
    }

    .ft_cta li {
        display: block;
        margin: 20px 5px 0 5px;
        text-align: center;
    }
    .ft_cta li span {
        font-size: calc(100vw / 375 * 16);
        font-weight: bold;
        color: #fff;
    }

    .ft_cta li img {
        width: calc(100% - 30px);
        margin-top: calc(100vw / 375 * 8);
    }

    #footer {
        background: #fff;
        padding: 20px 0 10px;
        color: #333;
    }

    #footer .inner {
        margin: 0 20px;
    }

    #footer .ft_lead {
        padding-bottom: 25px;
    }

    #footer img {
        padding-bottom: 25px;
    }

    #footer #copyright {
        clear: both;
        font-size: 10px;
    }

    .ft_bnr {
        background: #787878;
        padding: 20px 15px 20px;
    }

    .ft_bnr ul {
        text-align: center;
        font-size: 0;
        vertical-align: middle;
    }

    .ft_bnr ul li {
        margin: 0 px;
    }

    .ft_bnr ul img {
        max-width: 100%;
        max-height: 45px;
        vertical-align: middle;
    }

    .mv.under {
        height: 225px;
        margin-bottom: 22px;
        margin-top: 45px;
    }

    .mv.under h2 {
        position: absolute;
        width: 100%;
        left: 0;
        top: 50%;
        color: #fff;
        text-align: center;
        font-size: 2rem;
        line-height: 100%;
        margin-top: -20px;
        font-weight: bold;
    }

    .mv.under h2 span {
        display: block;
        font-size: 1.3rem;
        font-family: "Libre Franklin", sans-serif;
    }

    .link_btn a {
        background: url("../img/common/icon_link.png") no-repeat left;
        background-size: 14px;
        text-decoration: none;
        color: #000;
        padding-left: 20px;
    }

    .link_btn a:hover {
        text-decoration: underline;
    }

    .basic_ttl {
        background: #969694;
        color: #fff;
        font-size: 14px;
        box-sizing: border-box;
        border-left: 7px solid #e77024;
        padding: 7px 15px;
        margin-bottom: 24px;
    }

    .pc {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    .to-top {
        display: block;
        height: 40px;
        width: 40px;
        margin: 0 20px 20px;
        background-image: url(../img/common/top_2x.png);
        background-repeat: no-repeat;
        background-size: 40px;
        text-indent: -9999px;
        float: right;
    }

    .to-top a {
        display: block;
        height: 40px;
        width: 40px;
    }
}