@import url("./color.scss");
@import url("./animation.scss");
@media screen and (max-width: 767px) {
    br.sp-br {
        display: block
    }

    #load-animation-logo img.logo {
        height: 70px
    }

    #load-animation-logo img.logo-name {
        height: 35px
    }

    header.pc_menu {
        display: none
    }

    header.sp_menu {
        display: block;
        position: fixed;
        z-index: 99999;
        height: 70px;
        width: 100vw;
        background-color: var(--white-color)
    }

    header.sp_menu .sp-header-area {
        display: none
    }

    header.sp_menu .sp-header-area.active {
        display: block;
        width: 100vw;
        height: 100vh;
        position: fixed;
        z-index: 9998;
        top: 0;
        background-color: var(--footer-color);
        animation: DownAnime 1s
    }

    header.sp_menu .sp-header-area .sp-header-list {
        padding-top: 15vh
    }

    header.sp_menu .sp-header-area .sp-header-list .accordion-area {
        width: 80vw
    }

    header.sp_menu .sp-header-area .sp-header-list .accordion-area .sp-header-title a span {
        font-size: 2rem;
        color: var(--white-color);
        margin-bottom: 1.25rem
    }

    header.sp_menu .sp_menu_header {
        position: fixed;
        z-index: 999999;
        top: 10px;
        left: 10px
    }

    header.sp_menu .sp_menu_header .sp_menu_header_link li p {
        font-size: 2rem;
        color: var(--second-color);
        font-weight: bold
    }

    header.sp_menu .sp_menu_header .openbtn1 {
        position: fixed;
        cursor: pointer;
        right: 2vw;
        top: 1vh;
        width: 50px;
        height: 50px;
        border-radius: 5px;
        z-index: 99999
    }

    header.sp_menu .sp_menu_header .openbtn1 span {
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 14px;
        height: 3px;
        border-radius: 2px;
        background-color: var(--second-color);
        width: 45%
    }

    header.sp_menu .sp_menu_header .openbtn1 span:nth-of-type(1) {
        top: 15px
    }

    header.sp_menu .sp_menu_header .openbtn1 span:nth-of-type(2) {
        top: 23px
    }

    header.sp_menu .sp_menu_header .openbtn1 span:nth-of-type(3) {
        top: 31px
    }

    header.sp_menu .sp_menu_header .openbtn1.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%
    }

    header.sp_menu .sp_menu_header .openbtn1.active span:nth-of-type(2) {
        opacity: 0
    }

    header.sp_menu .sp_menu_header .openbtn1.active span:nth-of-type(3) {
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%
    }

    footer .footer-contact_section .footer-contact_area .footer-contact_text p {
        font-size: 1rem
    }

    footer .footer-contact_section .footer-contact_area .footer-contact_list {
        flex-direction: column
    }

    footer .footer-contact_section .footer-contact_area .footer-contact_list li {
        margin: 25px
    }

    footer .footer-contact_section .footer-contact_area .footer-contact_list li a {
        display: flex;
        flex-direction: column
    }

    footer .footbar .footbar-content {
        flex-direction: column
    }

    footer .footbar .footbar-content .company-detail_area {
        flex-direction: column
    }

    footer .footbar .footbar-content .company-detail_area .company-detail {
        margin-bottom: 50px
    }

    footer .footbar .footbar-content .company-detail_area .company-sns_link {
        margin-bottom: 50px
    }

    .section-title h2 {
        font-size: 2rem
    }

    main.toppage-main section.top-section div.text-area {
        align-items: end;
        justify-content: center
    }

    main.toppage-main section.top-section div.text-area h1 {
        font-size: 2rem;
        text-align: center;
        margin-bottom: 5vh;
        margin-right: 0
    }

    main.toppage-main section.company-area div.company-contact {
        padding: 10vh 5vw
    }

    main.toppage-main section.company-area div.company-contact div.section-title h2 {
        font-size: 1.25rem
    }

    main.toppage-main section.service-area ul.service-list {
        flex-direction: column
    }

    main.toppage-main section.service-area ul.service-list li.service-item {
        margin: 20px auto;
        width: 80vw
    }

    main.toppage-main section.service-area ul.service-list li.service-item div.service-item_image img {
        height: auto;
        width: 100%
    }

    main.toppage-main section.effect-area {
        padding: 10vh 10vw
    }

    main.toppage-main section.effect-area div.effect-content_table table,
    main.toppage-main section.effect-area div.effect-content_table tbody,
    main.toppage-main section.effect-area div.effect-content_table tr {
        display: flex;
        flex-direction: column-reverse
    }

    main.toppage-main section.effect-area div.effect-content_table table tbody tr th {
        justify-content: center;
        border-right: none;
        border-bottom: var(--white-color) 2px dotted
    }

    main.toppage-main section.effect-area div.effect-content_table table tbody tr td p {
        font-size: 1rem;
        text-align: center
    }

    main.toppage-main section.effect-area div.effect-content_declaration {
        width: 80vw
    }

    main.toppage-main section.effect-area div.effect-content_declaration p {
        font-size: 1.25rem
    }

    main.toppage-main section.recruit-area div.recruit-section {
        height: 60vh
    }

    main.toppage-main section.recruit-area div.recruit-section div.recruit-contact {
        height: 60vh;
        padding: 10vh 5vw
    }

    main.toppage-main section.recruit-area div.recruit-section div.recruit-contact div.section-title h2 {
        font-size: 1.5rem
    }

    main.toppage-main section.access-area div.access-section div.access-company_detail {
        flex-direction: column
    }

    main.toppage-main section.access-area div.access-section div.access-company_detail h3 {
        margin: 0 25px
    }

    main.toppage-main section.access-area div.access-section div.access-company_detail h4 {
        margin: 0 25px;
        font-size: 1rem
    }

    main.toppage-main section.access-area div.access-section div.access-company_image img {
        margin: 0 5vw;
        width: 90vw
    }

    main.toppage-main section.achievements-area ul.achievements-list li.achievements-item {
        width: 50vw
    }

    main.toppage-main section.achievements-area ul.achievements-list li.achievements-item div.achievements-item_image img {
        width: 100%;
        height: 50vw
    }

    main.toppage-main section.achievements-area ul.achievements-list li.achievements-item div.achievements-item_title h4,
    main.toppage-main section.achievements-area ul.achievements-list li.achievements-item div.achievements-item_title h3 {
        font-size: 1rem
    }

    #output canvas {
        margin-left: 0
    }

    section.page-top {
        flex-direction: column
    }

    section.page-top div.pagetop-image {
        width: 100vw
    }

    main.achievements-main section.achievements-area div.achievements-content div.search-area dl {
        display: block
    }

    main.achievements-main section.achievements-area div.achievements-content div.search-area dl dd ul li {
        padding: 5px
    }

    main.achievements-main section.achievements-area div.achievements-content div.search-area dl dd ul li a {
        font-size: 1rem;
        padding: 5px 0
    }

    main.achievements-main section.achievements-area div.achievements-content div.achievements-list ul li {
        margin: 50px 10px
    }

    main.achievements-main section.achievements-area div.achievements-content div.achievements-list ul li div.item-image_area {
        width: 75vw;
        height: auto
    }

    main.achievements-main section.achievements-area div.achievements-content div.achievements-list ul li div.item-image_area img {
        height: initial;
        width: 100%
    }

    main.achievements-main section.achievements-area div.achievements-content div.achievements-page_area ul li a.pagination {
        margin: 0 5px;
        width: 30px;
        height: 30px;
        line-height: 30px
    }

    main.achievements-main section.achievements-area div.achievements-content div.achievements-page_area ul li a.next_btn {
        font-size: 1rem
    }

    main.company-main section.company-ceo_area div.company-ceo_content {
        flex-direction: column
    }

    main.company-main section.company-ceo_area div.company-ceo_content div.ceo-comment {
        width: 100vw;
        padding: 20px
    }

    main.company-main section.company-ceo_area div.company-ceo_content div.ceo-comment p {
        font-size: 1rem
    }

    main.company-main section.company-mvv_area .js-item div.subimg {
        height: 30vh;
        width: 90vw
    }

    main.company-main section.company-mvv_area .js-item div.subimg img {
        width: 90vw;
        height: 100%;
        object-fit: contain
    }

    main.company-main section.company-mvv_area .js-item .subtitle {
        width: 90vw;
        padding: 0 5vw
    }

    main.company-main section.company-mvv_area .js-item .subtitle h4 {
        font-size: 1rem !important
    }

    main.company-main section.company-mvv_area section.company-mvv_contetn {
        padding: 10dvh 5vw
    }

    main.company-main section.company-mvv_area section.company-mvv_contetn .section-title {
        margin-bottom: 2vh
    }

    main.company-main section.company-mvv_area section.company-mvv_contetn div.fx {
        flex-direction: column
    }

    main.company-main section.company-mvv_area section.company-mvv_contetn div.fx div img {
        width: 90vw
    }

    main.company-main section.company-mvv_area section.company-mvv_contetn div.fx .company-mvv_text_area {
        width: 80vw
    }

    main.company-main section.company-mvv_area section.company-mvv_contetn div.fx .company-mvv_text_area h3 {
        width: 100%;
        display: none
    }

    main.company-main section.company-mvv_area section.company-mvv_contetn div.fx .company-mvv_text_area p {
        font-size: 1rem
    }

    main.company-main section.company-mvv_area section.company-mvv_contetn div.subtitle h4 {
        font-size: 1.25rem
    }

    main.company-main section.company-mvv_area section.company-mvv_contetn ul.mvv-list li h3 {
        width: initial;
        padding: 5px;
        margin: 10px 0;
        font-size: 1rem
    }

    main.company-main section.company-mvv_area section.company-mvv_contetn ul.mvv-list li p {
        font-size: 1rem
    }

    section.company-detail_area div.company-detail_section div.company-detail_image {
        width: 100%;
        height: auto
    }

    section.company-detail_area div.company-detail_section div.company-detail_image img {
        height: auto
    }

    section.company-detail_area div.company-detail_section div.company-detail_content {
        flex-direction: column
    }

    section.company-detail_area div.company-detail_section div.company-detail_content table tbody tr {
        display: flex;
        flex-direction: column
    }

    section.company-detail_area div.company-detail_section div.company-detail_content table tbody tr td p {
        padding-left: 10px
    }

    section.company-detail_area div.company-detail_section div.company-detail_content iframe {
        width: 100%
    }

    main.recruit-main {
        background-color: var(--white-color)
    }

    main.recruit-main section.recruit-area_mvv {
        padding: 10dvh 5vw
    }

    main.recruit-main section.recruit-area_mvv div.fx {
        flex-direction: column
    }

    main.recruit-main section.recruit-area_mvv div.fx div img {
        width: 90vw
    }

    main.recruit-main section.recruit-area_mvv div.fx ul.mvv-list li p {
        font-size: 1.25rem
    }

    main.recruit-main section.requirements-area {
        padding: 10vh 5vw
    }

    main.recruit-main section.requirements-area section.content-heading {
        padding: 5vh 5vw
    }

    main.recruit-main section.requirements-area section.content-heading table tbody tr {
        display: flex;
        flex-direction: column
    }

    main.recruit-main section.requirements-area section.content-heading table tbody tr th {
        width: 100%;
        padding-top: 20px;
        padding-left: 0
    }

    main.recruit-main section.requirements-area section.content-heading table tbody tr td {
        padding-left: 10px
    }

    main.recruit-main section.requirements-area section.content-heading table tbody tr td p {
        font-size: 1rem
    }

    main.recruit-main section.intern-area {
        /* padding: 10vh 10vw */
    }

    main.recruit-main section.intern-area table tbody tr {
        display: flex;
        flex-direction: column;
        border-top: none;
        border: none !important;
    }

    main.recruit-main section.intern-area table tbody tr th {
        width: 100%;
        margin-top: 20px;
        margin-bottom: 10px;
        padding-left: 0
    }
    main.recruit-main section.intern-area table tbody tr td {
        padding: 0;
    }

    main.recruit-main section.intern-area table tbody tr td p {
        font-size: 1rem;
    }

    main.recruit-main section.requirements-area {
        /* padding: 10vh 10vw; */
    }

    main.recruit-main section.requirements-area table tbody tr {
        display: flex;
        flex-direction: column;
        border-top: none;
        border: none !important;
    }

    main.recruit-main section.requirements-area table tbody tr th {
        width: 100%;
        margin-top: 20px;
        margin-bottom: 10px;
        padding-left: 0;
    }
    main.recruit-main section.requirements-area table tbody tr td {
        padding: 0;
    }

    main.recruit-main section.requirements-area table tbody tr td p {
        font-size: 1rem;
        /* padding-bottom: 10px; */
    }

    main.servicepage-main {
        background-color: var(--footer-color)
    }

    main.servicepage-main section.page-top div.pagetop-image img {
        height: auto
    }

    main.servicepage-main section.official-area section.content-heading h3 {
        font-size: 3rem;
        line-height: 5rem
    }

    main.servicepage-main section.official-worries_area {
        padding-bottom: 10vh
    }

    main.servicepage-main section.official-worries_area ul {
        width: 90vw
    }

    main.servicepage-main section.official-worries_area ul li {
        margin-top: 25px;
        margin-bottom: 25px
    }

    main.servicepage-main section.official-worries_area ul li p {
        font-size: 1.25rem
    }

    main.servicepage-main section.official-necessity_area {
        padding-top: 10vh
    }

    main.servicepage-main section.official-necessity_area ul {
        width: 90vw
    }

    main.servicepage-main section.official-necessity_area ul li h4 {
        font-size: 1.5rem
    }

    main.servicepage-main section.official-necessity_area ul li p {
        padding: 50px 20px;
        font-size: 1rem
    }

    main.servicepage-main section.official-necessity_area div.text-area h3 {
        font-size: 1.25rem
    }

    main.servicepage-main section.official-comparison_area ul {
        width: 90vw
    }

    main.servicepage-main section.official-comparison_area ul h4 {
        font-size: 1.5rem
    }

    main.servicepage-main section.official-comparison_area ul li div.text-area h5 {
        font-size: 1.25rem
    }

    main.servicepage-main section.official-comparison_area ul li div.image-area {
        width: 100%
    }

    main.servicepage-main section.official-comparison_area ul li div.image-area img {
        width: 100%;
        object-fit: cover
    }

    main.servicepage-main section.official-comparison_area ul li p {
        padding: 50px 20px;
        font-size: 1rem
    }

    main.contact-main section.page-top {
        flex-direction: column;
        align-items: center
    }

    main.contact-main section.page-top div.title-section {
        width: 90vw
    }

    main.contact-main section.page-top div.title-section div.contact-title_detail {
        margin-top: 20px
    }

    main.contact-main section.page-top div.title-section div.contact-title_detail a {
        padding: 10px
    }

    main.contact-main section.page-top div.pagetop-image {
        width: 100%;
        padding-bottom: 10dvh
    }

    main.contact-main section.page-top div.pagetop-image form {
        display: block;
        padding: 0 5vw
    }

    main.contact-main section.page-top div.pagetop-image form table {
        width: 100%
    }

    main.contact-main section.page-top div.pagetop-image form table tbody tr {
        display: flex;
        flex-direction: column;
        border-top: none
    }

    main.contact-main section.page-top div.pagetop-image form table tbody tr th {
        width: 100%;
        padding-top: 10px;
        padding-right: 0;
        padding-left: 10px
    }

    main.contact-main section.page-top div.pagetop-image form table tbody tr td {
        padding: 10px 0
    }

    main.contact-main section.page-top div.pagetop-image form table tbody tr td textarea {
        resize: auto;
        width: 100%
    }

    main.contact-main section.page-top div.pagetop-image form table tbody tr td.contact-submit_area .contact-submi {
        padding: 10px;
        width: 75%
    }

    .modal-content .modal-content-area {
        flex-direction: column
    }

    .modal-content .modal-content-area .modal-image-area {
        position: relative;
        width: 100%
    }

    .modal-content .modal-content-area .modal-image-area img {
        width: 100%;
        position: relative
    }

    .modal-content .modal-content-area .modal-text-area {
        width: 100%;
        padding: 25px
    }

    .modal-content .modal-content-area .modal-text-area h3 {
        font-size: 1.5rem
    }
}