@media (max-width: 767px) {
    .pc {
        display: none;
    }
    
    #page {
        width: 100%;
        margin: 0 auto;
    }

    .site-header {
        width: 100%;
        padding: 3rem 0;
        background-color: var(--base-color-dark);
    }

    .site-branding {
        width: 35%;
        margin-left: 5%;
    }

    #header .logoarea {
        width: 45%;
    }

    #header .header-icon i{
        width: 7rem;
        font-size: 7rem;
        right: 3rem;
        bottom: -4rem;
    }

    header .menu-col {
        position: fixed;
        transition: .5s;
        transform: translateX(1000px);
        height: 100vh;
        overflow: auto;
        top: 0;
        left: 0;
        width: 100%;
        background-color: var(--point-color);
        z-index: 15;
        margin-top: 13rem;
    }

    header .menu-col.active {
        transform: translateX(0);
    }

    header .menu-col ul li a{
        font-size: 4rem;
        letter-spacing: 0.5rem;
        padding: 2rem 0;
        display: block;
        color: #fff!important;
    }

    .main-menu-container li {
        padding: 2rem 5rem!important;
        border-bottom: solid 2px var(--white);
    }

    .sidebar-other-content {
        margin: 5rem;
    }

    .sns-list {
        margin-bottom: 5rem;
    }

    .sns-list i {
        font-size: 7.5rem;
    }

    .ci-en {
        font-size: 3rem;
        letter-spacing: 0.1rem;
        color: #fff;
    }

    .banner {
        margin-top: 5rem;
    }

    .site-content {
        width: 100%;
    }

    .mv-img {
        background-image: url('../img/mv.jpg');
        background-size: cover;
        background-position: center;
        height: 66rem;
    }

    .mv-img:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .mv-text p {
        animation: fadeIn 3s ease-in-out forwards;
        animation-delay: 0.5s;
        color: #fff;
        font-size: 2.8rem;
        letter-spacing: 0.25rem;
        animation-delay: 0.5s;
        opacity: 0;
    }

    .mv-text2 p {
        color: #fff;
        font-size: 2.5rem;
        letter-spacing: 0.25rem;
        animation: fadeIn2 1s ease-in-out forwards;
        animation-delay: 3.5s;
        opacity: 0;
    }

    .mv-text2 span {
        font-size: 5rem;
    }

    .mv-text-small p {
        color: #fff;
        font-size: 1.5rem;
    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }
        25% {
            opacity: 1;
        }
        75% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

    @keyframes fadeIn2 {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    .content-main {
        width: 90%;
        margin: 10rem auto;
    }

    .top-works-container,
    .top-coming-soon-container,
    .top-news-container {
        margin: 5rem 0 10rem;
    }

    .top-works-container .title1 h2,
    .top-coming-soon-container .title1 h2,
    .top-news-container .title1 h2 {
        font-size: 8rem;
        letter-spacing: 0.5rem;
        color: var(--point-color);
    }

    .top-works-container .title1 h2 span,
    .top-coming-soon-container .title1 h2 span,
    .top-news-container .title1 h2 span {
        font-size: 3rem;
        letter-spacing: 0.1rem;
        margin-left: 1rem;
    }

    .top-works-swiper-container,
    .top-coming-soon-swiper-container{
        margin-top: 3rem;
    }

    .top-works-text,
    .top-coming-soon-text {
        margin-top: 4rem;
    }

    .top-works-text h2,
    .top-coming-soon-text h2 {
        font-size: 5rem;
    }

    .top-works-tag,
    .top-coming-soon-tag {
        margin: 3rem 0;
    }

    .top-works-text .top-works-tag li,
    .top-coming-soon-text .top-coming-soon-tag li {
        background: var(--point-color);
        padding: 0.25rem 3rem!important;
        border-radius: 3rem;
        font-size: 2.5rem;
        color: #fff;
    }

    .top-works-text .top-works-tag li a,
    .top-coming-soon-text .top-coming-soon-tag li a {
        color: #fff!important;
    }

    .top-works-text > p,
    .top-coming-soon-text > p {
        font-size: 4rem;
        line-height: 5.5rem;
    }

    .more-btn-container {
        margin-top: 10rem;
    }

    .more-btn-container .more-btn {
        border: dashed 1.5px var(--point-color);
        color: var(--point-color)!important;
        padding: 1rem 4rem;
        border-radius: 5px;
        transition: .5s;
        font-size: 4rem;
    }

    .more-btn-container:hover .more-btn {
        background-color: var(--hover-color);
    }

    .top-coming-soon-text .character-img {
        background-image: url(../img/misato_all.png);
        background-size: cover;
        background-position: center;
        width: 17rem;
        height: 30rem;
        animation: characterRotate 1s ease-in-out infinite alternate;
        z-index: 1;
    }

    @keyframes characterRotate {
        0% {
            transform: rotate(-2.5deg);
        }
        100% {
            transform: rotate(2.5deg);
        }   
    }

    .top-coming-soon-text .character-shadow {
        background-color: #0000002e;
        width: 8rem;
        height: 0.75rem;
        border-radius: 1rem;
        bottom: 1rem;
        right: 5rem;
    }

    .top-coming-soon-text .hukidashi-img {
        background-image: url(../img/hukidashi1.png);
        background-size: cover;
        background-position: center;
        bottom: 19rem;
        right: 17rem;
        width: 38rem;
        height: 7rem;
    }

    .top-coming-soon-text .hukidashi-text {
        bottom: 20.5rem;
        right: 20rem;
        font-size: 3rem;
        letter-spacing: 0.1rem;
    }

    /* news */
    .top-news-main {
        margin-top: 4rem;
    }

    .news--col {
        border-bottom: dashed 1.5px var(--point-color);
        padding: 2rem 0.5rem 1.5rem;
    }

    .news--col-title h3 {
        font-size: 4rem;
        line-height: 6rem;
    }

    .news--col-day {
        width: 100%;
        font-size: 4rem;
        margin-bottom: 1rem;
    }

    /* footer */
    .footer--container {
        width: 100%;
        background-color: var(--base-color-dark);
        z-index: 10;
        position: relative;
        padding: 10rem 0 5rem;
    }

    .footer--menu {
        width: 85%;
        margin: auto;
    }

    .footer--menu-list {
        display: flex;
        justify-content: space-around;
        margin-bottom: 5rem!important;
        font-size: 2.5rem;
    }

    .footer--copyright {
        margin-top: 10rem;
        font-size: 3rem;
    }

    /* archive */
    .archive--header,
    .single--header,
    .application--header,
    .single-app--header,
    .page--header {
        background-color: var(--point-color);
        padding: 5rem;
        color: #fff;
        z-index: 10;
    }

    .archive--header .archive--title,
    .single--header .single--title,
    .application--header .application--title,
    .single-app--header .single-app--title,
    .page--header .page--title {
        font-size: 5rem;
        letter-spacing: 0.25rem;
    }

    .archive-container,
    .single-container,
    .application-container,
    .single-app-container,
    .page-container {
        margin: 10rem 1rem 0;
    }

    .archive-container .title2 h2,
    .application-container .title2 h2,
    .single-app-container .title2 h2,
    .single-container .title2 h2 {
        font-size: 8rem;
        letter-spacing: 0.5rem;
        color: var(--point-color);
        margin-bottom: 0rem!important;
    }

    .archive-container .title2 p,
    .application-container .title2 p,
    .single-app-container .title2 p,
    .single-container .title2 p {
        font-size: 3rem;
        letter-spacing: 0.1rem;
        margin-left: 1rem;
        color: var(--point-color);
    }

    .archive--box,
    .single--box,
    .application--box,
    .single-app--box,
    .page--box {
        width: 90%;
        margin: 10rem auto;
    }

    .pagenavi {
        margin-top: 4rem;
    }

    .pagenavi a,
    .pagenavi span {
        font-size: 1.2rem;
    }

    /* single */
    .single-news--img {
        margin: 15rem 0;
    }

    .wp-caption-text {
        font-size: 4rem;
    }

    .single-news--text h2 {
        font-size: 5rem;
        letter-spacing: 0.5rem;
        font-weight: bold;
        margin-top: 4rem;
        background-color: #cdbd94;
        border-bottom: solid 2px var(--point-color);
        padding: 2rem;
        margin-bottom: 3rem;
        color: var(--point-color);
    }

    
    .single-news--text h3 {
        padding: 2rem;
        border-left: solid 4px var(--point-color);
        font-size: 5rem;
        letter-spacing: 0.25rem;
        margin-top: 4rem;
        margin-bottom: 3rem;
        font-weight: bold;
    }

    .single-news--text p {
        font-size: 4rem;
        line-height: 5.5rem;
        letter-spacing: 0.25rem;
    }

    /* application */
    .application--item {
        background-color: #cdbd94;
        padding: 2.5rem !important;
    }

    .application--item li {
        background: var(--point-color);
        padding: 0.25rem 3rem!important;
        border-radius: 3rem;
        font-size: 2.5rem;
    }

    .application--item-title h3 {
        font-size: 5.5rem;
        letter-spacing: 0.1rem;
        margin-bottom: 1rem;
    }

    .application--item li span {
        color: #fff!important;
    }

    .application--item-description p {
        margin-top: 2rem;
        font-size: 4rem;
        line-height: 5.5rem;
    }

    /* single application */
    .single--container-title {
        border-bottom: dashed 1.5px var(--point-color);
        margin-bottom: 4rem;
    }

    .single--container-title h1 {
        font-size: 5rem;
        letter-spacing: 0.25rem;
        color: var(--point-color);
    }

    .single--img {
        margin: 5rem 0;
    }

    .single--text p {
        font-size: 4rem;
        line-height: 6rem;
        margin-bottom: 2rem;
    }

    .single--item-tags {
        margin-bottom: 3rem;
    }

    .single--item-tags li {
        background: var(--point-color);
        padding: 0.25rem 3rem!important;
        border-radius: 3rem;
        font-size: 2.5rem;
    }

    .single--item-tags li span {
        color: #fff!important;
    }

    .single--text-title {
        margin: 5rem 0;
    }

    .single--text-title h2 {
        position: relative;
        padding: 3rem;
        text-align: center;
        font-size: 5rem;
        letter-spacing: 0.25rem;
    }

    .single--text-title h2:before {
        position: absolute;
        bottom: 0rem;
        left: calc(50% - 5rem);
        width: 10rem;
        height: 5px;
        content: '';
        border-radius: 3px;
        background-color: var(--point-color);
    }
    

    .single--text-content h2 {
        font-size: 5rem;
        letter-spacing: 0.5rem;
    }

    .single--text-content h2:first-letter {
        font-size: 7.5rem;
        color: var(--point-color);
    }

    .single--text-content h3 {
        display: flex;
        align-items: center;
        padding: .5em .7em;
        background-color: var(--base-color-dark);
        color: var(--point-color);
        margin: 10rem 0 2rem!important;
        font-size: 5rem;
    }

    .single--text-content h3::before {
        display: inline-block;
        width: 5px;
        height: 3em;
        margin-right: .5em;
        background-color: var(--point-color);
        content: '';
    }

    .single--text-content ol,
    .single--text-content ul {
        margin-left: 0;
        margin-top: 4rem;
        padding-left: 5rem !important;
    }

    .single--text-content ol li,
    .single--text-content ul li {
        list-style: decimal;
        font-size: 4rem;
        letter-spacing: 0.1rem;
        margin-bottom: 2rem !important;
    }

    .single--text-content img {
        margin-bottom: 2rem;
    }

    /* not-found */
    .not-found-img {
        width: 50%;
        margin: 0 auto;
    }

    /* FAQ */
    .faq-box  {
        width: 100%;
        margin: auto;
    }

    .qa-row {
        margin-top: 4rem;
    }

    .q {
        position: relative;
        background-color: #cdbd94;
        border-radius: 0.5rem;
        box-shadow: 1px 1px 5px #d1bfb8;
        overflow: hidden;
        cursor: pointer;
        min-height: 17rem;
    }
    
    .q h3{
        width: 75%;
        margin-left: 13%;
        font-size: 4rem;
        letter-spacing: 0.25rem;
        padding: 4rem 0;
    }
    
    .q .q_mark {
        top: 4.5rem;
        left: 2.5rem;
        z-index: 1;
        color: #fff;
        font-size: 5rem;
    }
    
    .q .plus {
        position: absolute;
        top: 4rem;
        right: 4rem;
        font-size: 6rem;
        color: var(--point-color);
    }
    
    .q .minus {
        position: absolute;
        top: 5rem;
        right: 4.5rem;
        font-size: 4.5rem;
        color: var(--point-color);
    }
    
    .q .bgcircle {
        top: -0.5rem;
        left: -1rem;
        width: 10rem;
        height: 20rem;
        background-color: var(--point-color);
    }
    
    .a {
        border-bottom: solid 1px var(--point-color);
        width: 96%;
        margin-left: 2%;
        display: flex;
        align-items: start;
        margin-top: 3rem;
        margin-bottom: 6rem;
        padding-bottom: 0.5rem;
    }
    
    .a .a_mark {
        color: #fff;
        font-size: 4.5rem;
        background-color: var(--point-color);
        padding: 3rem 2.5rem;
        border-radius: 0.5rem;
        margin-right: 3rem;
    }
    
    .a .a_mark span{
        display: block;
        line-height: 2rem;
    }
    
    .a p {
        font-size: 3rem;
        line-height: 5rem;
    }

    .faq-box .more-btn2 {
        width: 12rem;
        margin: 8rem auto 0;
    }

    .faq-box .more-btn2:before {
        content: '';
        position: absolute;
        width: 1.5rem;
        height: 1px;
        border-top: solid 1px #fff;
        right: 0rem;
        top: 1.7rem;
    }

    .faq-box .more-btn2 a{
        display: block;
        padding: 1rem;
    }

    .faq-box .more-btn2 a p{
        color: #fff;
        font-size: 2.5rem;
        letter-spacing: 0.1rem;
    }

    /* page */
    .page--text-title {
        margin: 15rem 0;
    }

    .page--text-title h2 {
        position: relative;
        padding: 3rem;
        text-align: center;
        font-size: 5rem;
        letter-spacing: 0.25rem;
    }

    .page--text-title h2:before {
        position: absolute;
        bottom: 0rem;
        left: calc(50% - 5rem);
        width: 10rem;
        height: 5px;
        content: '';
        border-radius: 3px;
        background-color: var(--point-color);
    }

    .page--faq-select .page--faq-select-form{
        width: 100%;
    }

    .page--faq-select select {
        background-color: #cdbd94;
        border: solid 1px #cdbd94;
        padding: 0.5rem 2rem;
        font-size: 4rem;
    }

    .page--faq-select-icon {
        margin: 0 3rem;
    }

    .page--faq-select-icon i {
        font-size: 5rem;
        color: var(--point-color);
    }

    .page--contact-select .page--contact-select-form{
        width: 100%;
    }

    .page--contact-select select {
        background-color: #cdbd94;
        border: solid 1px #cdbd94;
        padding: 0.5rem 2rem;
        font-size: 4rem;
    }

    .page--contact-select-icon {
        margin: 0 3rem;
    }

    .page--contact-select-icon i {
        font-size: 5rem;
        color: var(--point-color);
    }

    .contact--text-title h2 {
        font-size: 4.5rem;
        letter-spacing: 0.25rem;
    }

    .contact--text-content {
        margin: 4rem 0 8rem;
    }

    .contact--text-content p {
        font-size: 3rem;
        letter-spacing: 0.25rem;
        line-height: 5.5rem;
    }

    .contact--text-content p a {
        text-decoration: underline!important;
    }

    .contact--main {
        width: 100%;
        margin: 5rem auto;
    }

    .contact--row {
        margin-top: 4rem;
    }

    .contact--row-col h3 {
        font-size: 4rem;
        letter-spacing: 0.25rem;
        color: var(--point-color);
    }

    .contact--row-col.col2 {
        margin-bottom: 4rem;
    }

    .contact--row-col.col2 input:not([type="radio"]),
    .contact--row-col.col2 textarea,
    .contact--row-col.col2 select {
        width: 100%;
        padding: 0.5rem 2rem;
        font-size: 4rem;
        background-color: #cdbd94;
        border: solid 1px #cdbd94;
        height: 10rem;
    }

    .contact--row-col.col2 textarea {
        height: 50rem;
    }

    .contact--row-col .req {
        color: #d26161;
        font-size: 2rem;
        margin-left: 2rem;
    }

    .wpcf7-list-item label {
        display: flex;
        align-items: center;
        font-size: 4rem;
    }

    .wpcf7-list-item input[type="radio"] {
        margin-right: 1rem;
    }

    .contact--submit-box {
        margin-top: 10rem;
    }

    .wpcf7-submit {
        width: 100%;
        padding: 3rem!important;
        background-color: var(--point-color) !important;
        color: #fff !important;
        border: solid 1.5px var(--point-color) !important;
        font-size: 4rem;
        letter-spacing: 0.25rem;
    }

    .wpcf7-not-valid-tip {
        font-size: 3rem;
    }

    .wpcf7 form .wpcf7-response-output {
        font-size: 3rem;
    }

    .privacy-policy--top {
        font-size: 3rem;
        letter-spacing: 0.25rem;
        line-height: 5.5rem;
        border-bottom: solid 1px var(--point-color);
        padding-bottom: 3rem;
    }

    .privacy-policy--title {
        margin: 6rem 0 2rem;
    }

    .privacy-policy--title h3 {
        font-size: 4.5rem;
        letter-spacing: 0.25rem;
        color: var(--point-color);
    }

    .privacy-policy--content p {
        font-size: 3rem;
        letter-spacing: 0.25rem;
        line-height: 5.5rem;
        margin-bottom: 1rem;
    }

    .privacy-policy--content ul {
        margin: 3rem 1rem!important;
        padding-left: 3rem!important;
    }

    .privacy-policy--content ul li {
        font-size: 3rem;
        letter-spacing: 0.25rem;
        line-height: 5.5rem;
        list-style-type: numeric;
    }
}