@charset "UTF-8";
/* 目次
***************************************
01. min-width: 1800px
02. max-width: 1800px
03. max-width: 1350px
04. max-width: 1200px
05. max-width: 1170px
06. max-width: 1050px
07. min-width: 769px
08. max-width: 1654px
09. min-width: 1428px
10. max-width: 1304px
11. min-width: 1160px
12. max-width: 1160px
13. max-width: 1060px
14. min-width: 769px and max-width: 1300px
15. min-width: 769px and max-width: 1023px
16. min-width: 981px and max-width: 1160px
17. max-width: 980px
18. min-width: 769px and max-width: 820px
19. min-width: 767px
*****************************************/
/****************************************
01. min-width: 1800px
*****************************************/
@media screen and (min-width: 1800px) {
    .service.index {
        background-position-y: -2vw;
    }
}
/****************************************
02. max-width: 1800px
*****************************************/
@media screen and (max-width: 1800px) {
    .service.index {
        background-position-y: 8vw;
    }
}
/****************************************
03. max-width: 1350px
*******
**********************************/
@media screen and (max-width: 1350px) {
    .service.index {
        background-position-y: 21vw;
    }
    .serviceTop {
        max-width: 60vw;
    }
    .service .content_block {
        width: 100%;
        flex-direction: column;
    }
    .content_block .content_textArea,
    .service .content_img,
    .service:not(.index) .content_block.longText > div {
        width: 70%;
        margin: 0 auto;
    }
    .service .content_img {
        padding-right: 0;
    }
    .service.insourcing .content_block.prologue {
        padding: 0 22%;
    }
    .service:not(.index) .content_block.longText > div:nth-child(3) {
        margin: 0 auto;
    }
    body.service .works_block ul {
        margin-top: 2vw;
    }
    /* 採用ページ */
    body.recruit section {
        margin-bottom: 10vw;
    }
    .recruit_firstView,
    .recruit_people-inner {
        flex-direction: column-reverse;
    }
    .recruit_firstView .recruit_firstView-inner,
    .recruit_culture-inner {
        width: 100%;
    }
    body[class*="recruit"] section div .normalBtn {
        margin: 6vw auto 0;
    }
    body[class*="recruit"] .recruit_firstView { 
        height: auto;
    }
    .recruit_firstView .recruit_firstView-slideBox {
        width: 95vw;
        min-height: 30rem;
        margin: 4rem 0 2rem auto;
    }
    .recruit_company {
        padding: 36vw 0 0 0 !important;
    }
    .recruit_people-inner > div,
    .recruit_culture-inner > div,
    .recruit_recruiting-inner > div {
        width: 60vw;
        max-width: 64rem;
        padding: 0 4rem;
    }
    .recruit_people-inner > div,
    .recruit_people-inner > div {
        margin-bottom: 3rem;
    }
    .recruit_carousel-header_wrap {
        width: 86vw;
    }
    .recruit-carousel-sliderFor li div,
    .recruit-carousel-sliderFor li div img {
        height: 42vw;
    }
    .recruit-carousel-sliderFor li div p em.interview_num {
        font-size: 7.6vw;
    }
    .interview-blog .recruit-carousel-sliderFor li div, .interview-blog .recruit-carousel-sliderFor li div img {
        height: 17vw;
        min-height: 17vw;
        border-radius: 7vw;
    }
    .recruit_culture-inner {
        flex-direction: column-reverse !important;
    }
    .recruit_culture h3 {
        width: 90vw;
        margin: 8vw auto 0;
    }
    .recruit_culture ul {
        width: 100vw;
        padding: 0 4vw 2vw;
    }
    .recruit_culture ul + h3 {
        margin: 2vw auto 0;
    }
    .culture-list {
        width: 40rem;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        white-space: nowrap;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        /*スクロールバー非表示（IE・Edge）*/
        -ms-overflow-style: none;
        /*スクロールバー非表示（Firefox）*/
        scrollbar-width: none;
        margin: 3vw auto 5vw;
    }
    /*スクロールバー非表示（Chrome・Safari）*/
    .culture-list::-webkit-scrollbar{
        display:none;
    }
    .culture-list li {
        width: 28vw;
        min-width: 28vw;
    }
    .culture-list li .culture-text {
        white-space: normal;
    }
    .recruit_recruiting {
        padding: 3vw 0 18rem !important;
    }
    .recruit_recruiting-inner {
        flex-direction: column;
        width: 100vw;
    }
    .recruit_recruiting > div {

    }
    .recruit_recruiting-inner > div {
        margin: 0 auto;
    }
}
/****************************************
04. max-width: 1200px
*****************************************/
@media screen and (max-width: 1200px) {
    .service.index {
        background-position-y: 36vw;
    }
    .serviceTop {
        max-width: 100%;
        width: 100%;
        padding: 0 12vw;
        margin: 6rem auto 16rem;
    }
    .serviceTop .service-img img {
        max-width: 65vw;
    }
}
/****************************************
05. max-width: 1170px
*****************************************/
@media screen and (max-width: 1170px) {
    .service.index {
        background-position-y: 38vw;
    }
    .serviceTop .service-img img {
        max-width: 100%;
        width: 100%;
    }

}
/****************************************
06. max-width: 1050px
*****************************************/
@media screen and (max-width: 1050px) {
    .service.index {
        background-position-y: 38vw;
    }

}
/****************************************
07. min-width: 769px
*****************************************/
@media screen and (min-width: 769px) {
    .service_body.sp,
    br.sp,
    .ourService .sp {
        display: none;
    }
}

/****************************************
08. max-width: 1654px
*****************************************/
@media screen and (max-width: 1654px) {

}
/****************************************
09. min-width: 1428px
*****************************************/
@media screen and (min-width: 1428px) {
    .area-text p,
    .top_productService-description p {
        font-size: 1.8rem;
    }
    [class*="-catchcopy"] {
        font-size: 4.8rem;
    }
    .serviceTop {
        max-width: 79rem;
    }
    [class*="-catchcopy"] .color-fvOrange {
        font-size: 5.4rem;
    }
    .top_productService-carousel-description p {
        font-size: 1.6rem;
    }


}
/****************************************
10. max-width: 1304px
*****************************************/
@media screen and (max-width: 1304px) {
    .articleDetail_block,
    .whitepaperDetail .articleDetail-Title,
    .whitepaperDetail .articleDetail-data-wrapper {
        max-width: 100%;
        padding: 0 12% !important;
    }
    .newsDetail .articleDetail_block {
        padding: 0;
    }
}
/****************************************
11. min-width: 1160px
*****************************************/
@media screen and (min-width: 1160px) {
    .toggleNav_taxonomy_area {
        padding: 2rem 12rem;
    }
    body.service .ps_item-thumbnail {
        margin-bottom: 1rem;
    }
    .content_textArea .content_title {
        font-size: 3.8rem;
    }

}

/****************************************
12. max-width: 1160px
*****************************************/
@media screen and (max-width: 1160px) {
    .ps_wrapper ul {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: center;
    }
    body.service .ps_block {
        padding: 1rem 1rem 0 1rem;
    }
    .ps_item {
        width: 100%;
        margin-bottom: 0;
    }
    .ps_item:nth-child(even) {
        margin-top: 0;
    }
    .ps_item:last-child {
        margin-bottom: 0;
    }
    body.productService-List .ps_item {
        margin-bottom: 16rem;
    }
    /* About ************/
    .about section.sectionBlock-corporatePhilosophy div {
        writing-mode: unset;
        padding: 0 16vw;
    }
    .about section.sectionBlock-corporatePhilosophy div p {
        margin-left: 0;
        text-align: left;
        font-size: 1.8vw;
        line-height: 2.4;
        margin-bottom: 5vw;
    }
    .text-horizontally { transform: rotate(0deg) !important;}
    .about .sectionBlock-corporatePhilosophy br.pc {
        display: none;
    }
    .works_block ul .works_li {
        width: calc(100% / 2 - 2.2%);
    }
    .home .works .works_block li:nth-child(2) {
        width: calc(100% / 2 - 19.2%);
    }
    .home .works_block img {
        height: 13vw;
    }
    .works_block img {
        height: auto;
    }
    .works_block ul li .works_li-worksName {
        font-size: 2.2rem;
        margin-bottom: 1rem;
    }
    .works_block ul li .works-serviceName_wrapper .works-serviceName {
        margin: 0 .4rem 0.4rem 0;
    }
    .home .works .works_block li .works_li-worksName {
        padding: 1.4vw 0 1vw;
    }
    .ps_item-explanatorytext {
        margin-top: .8rem;
    }
    body.service .ps_item .ps_item-productName {
        margin-top: 0.8rem;
        margin-bottom: 6rem;
        line-height: 3.7rem;
    }
    body.service .works_block ul.service-carousel-sliderFor {
        margin-top: 0;
        padding-top: 1rem;
    }
    body.service ul.service-carousel-sliderFor .ps_item .ps_item-productName {
        margin-bottom: 0;
    }
    body.service .ps_item a:hover {
        padding: 1rem 1rem 0 1rem;
        border-radius: 1rem;
    }
    .service .serviceCommon_area {
        margin: 10rem 0 0;
    }
    .service:not(.index) .serviceCommon_area .serviceCommon_area-left {
        width: 90%;
        left: 0;
        margin: 0 auto;
    }
    body[class*="contact"] [class$="Title"] + [class$="Common_area"] > div {
        width: 100%;
    }
    body.service ul.service-carousel-sliderFor .slick-prev:before, body.service ul.service-carousel-sliderFor .slick-next:before {
        font-size: 4vw !important;
    }
    body.service ul.service-carousel-sliderFor .slick-prev {
        left: -7vw;
    }
    body.service ul.service-carousel-sliderFor .slick-next {
        right: -3vw;
    }
    /* whitepaper */
    .whitepaper_block ul li {
        width: calc(100% / 2 - 2.6vw);
    }
    .whitepaper_thumbnail {
        height: auto;
    }
    .whitepaperDetail .articleDetail_block {
        flex-direction: column;
    }
    .whitepaperDetail .articleDetail_block [class*="articleDetail_block-"] {
        width: 100%;
    }
    .whitepaperDetail .articleDetail_block .articleDetail_block-left {
        margin-bottom: 10rem;
    }
    .whitepaperDetail .articleDetail_block .articleDetail_block-left .whitepaper_text-1 .textArea {
        padding: 1.8rem;
    }
    .whitepaperDetail .articleDetail_block .articleDetail_block-left .whitepaper_text-2 {
        margin-top: 3rem;
    }
    .whitepaperDetail .articleDetail_block [class*="articleDetail_block-"] .whitepaper_thumbnail {
        padding: 8rem;
    }
    .whitepaperDetail .articleDetail_block .articleDetail_block-right {
        padding: 8rem;
    }
}

/****************************************
13. max-width: 1060px
*****************************************/
@media screen and (max-width: 1060px) {
    .normalBtn::before {
        width: 3vw;
        height:  3vw;
    }
    .normalBtn::after {
        width: 3vw;
        height: 0.9vw;
        right: 1.1vw;
    }
    .normalBtn:hover::after {
        right: 0.9vw;
        width: 1.5vw;
    }
    .about section.sectionBlock-corporatePhilosophy {
        margin-top: 26vw;
    }
    /* 採用ページ */
    section [class*="interview-"] h3,
    .recruit_people-inner  {
        width: 90vw;
    }
    .recruit_people-inner > div, .recruit_culture-inner > div, .recruit_recruiting-inner > div {
        width: 80%;
        min-width: 80%;
    }
    .recruit_company-inner img {
        top: -27vw;
        margin: 0 auto -27vw;
    }
    .recruit_company .section_header {
        width: 80vw;
    }
    .recruit_company .section_header .sectionTitle {
        text-align: left;
    }
    .recruit-carousel-sliderFor li div, .recruit-carousel-sliderFor li div img {
        height: 50vw;
        min-height: 50vw;
        border-radius: 10rem;
    }
    .interview-blog .recruit-carousel-sliderFor li div, .interview-blog .recruit-carousel-sliderFor li div img {
        height: 25vw;
        min-height: 25vw;
    }
    .culture-photo_item {
        width: calc(100vw / 2);
    }
    .recruit_culture ul {
        padding: 0 6vw 2vw 4vw;
    }
    .culture-list li {
        width: 40vw;
        min-width: 40vw;
    }
    .recruit_recruiting > div {
        width: 74vw;
    }
    .recruit_recruiting .recruit_recruiting-inner {
        width: 100vw;
    }
    .section_leftArea {
        margin-bottom: 3vw;
    }
    .process-list {
        flex-direction: column;
    }
    .process-list li {
        align-items: flex-start;
        height: 200px;
        width: 100%;
    }
    .process-list li p {
        margin-left: 20%;
        max-width: 80%;
        text-align: left;
    }
    .process-list li::before {
        background: none;
    }
    .process-list li::after {
        top: 47%;
        transform: translate(-50%,-50%);
        left: 6vw;
    }
    .recruit_recruiting-transitionArea .recruitAgentSite a {
        width: 70vw;
        height: 40vw;
    }
    .recruit_recruiting-transitionArea div a {
        height: 40vw !important;
    }
    .recruit_news-inner,
    .recruit_qa-inner {
        width: 70vw;
        margin: 0 auto;
    }
    .recruit_news .news_block,
    .recruitmentType .recruitmentType_type .recruitmentType_type_block,
    .recruit_qa .qa_block {
        width: 70vw;
        margin: 0 auto 8vw;
    }
    #qa-list .qa_block {
        width: 100%;
        margin: 8rem 0;
    }
    .recruit_news .news_block-date,
    .recruit_news .news_block-tag span {
        font-size: 1.3rem;
    }
    .recruit_news .news_block ul li > a {
        font-size: 1.8rem;
    }
    /* 募集職種ページ */
    .recruitmentType .recruitmentType_type .recruitmentType_type_block {
        margin-top: 8vw;
    }
    .recruitmentType .recruitmentType_firstView .recruitmentType_num {
        max-width: 50vw;
    }
}
/****************************************
14. min-width: 769px and max-width: 1300px
*****************************************/
@media screen and (min-width: 769px) and (max-width: 1300px) {
    .newsDetail .articleDetail_block {
        padding: 0 10rem;
    }
    .newsDetail .articleDetail-column.addText .articleDetail_group-content_inner img {
        width: 300px;
        clip-path: circle(150px at 50% 50%);

    }
    .newsDetail .articleDetail-column.addText .articleDetail_group-content_inner img + .articleDetail_group-text {
        width: calc(100% - 340px);
    }
    .content_textArea .content_title {
        line-height: 1.6;
    }

}
/****************************************
15. min-width: 768px and max-width: 1023px
*****************************************/
@media screen and (min-width: 768px) and (max-width: 1023px) {
    body.recruit-entry-Form .wrapper div[class*="-area"]>[class$="Title"] {
        top: 7rem;
        margin-bottom: 13rem;
    }
    body.recruit-entry-Confirm .wrapper div[class*="-area"]>[class$="Title"] {
        top: 7rem;
        margin-bottom: 12rem;
    }
    .whitepaperDetail .wrapper .articleDetail-area .articleDetail-Title {
        font-size: 3rem;
        margin-top: 15rem;
    }
}
/****************************************
16. min-width: 981px and max-width: 1160px
*****************************************/
@media screen and (min-width: 981px) and (max-width: 1160px) {
    body.service:not(.index) [class$="Title"] + [class$="Common_area"] {
        display: flex;
        flex-direction: column-reverse;
        margin-top: 53vw;
        margin-bottom: 8rem;
    }
    .service:not(.index) .serviceCommon_area .serviceCommon_area-left {
        width: 100%;
        margin-bottom: 8rem;
        top: 0;
    }
    .service .serviceCommon_area .serviceCommon_area-right {
        width: 100%;
    }
    .serviceLocalNav {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .serviceLocalNav li {
        width: calc(100% / 2 - 2rem);
        margin-right: 2rem;
    }
    .service.insourcing .serviceCommon_area,
    .service.product .serviceCommon_area {
        min-height: auto;
    }
    .content_textArea:only-child {
        width: 100%;
        padding: 0 5vw;
    }
    .service.insourcing .content_block.prologue {
        padding: 0 14vw;
    }

}

/****************************************
15. min-width: 981px
*****************************************/
@media screen and (min-width: 981px) {
    /* ヘッダーロゴ */
    .logo { width: 160px; }
    .header_nav { width: calc(100vw - 160px); right: 2.3rem; }
    li[class^="header_nav-list-"] { font-size: 1.6rem; }

    /* TOP Works */
    .works_block ul li .works-serviceName_wrapper .works-serviceName {
        margin: 0 0.8rem .6rem 0;
        padding: 0.1rem 1rem;
        font-size: 1rem;
    }
    .home .works_block ul li .works_li-worksName {
        margin-bottom: 0;
    }
    .works_block ul li .works_li-worksName {
        font-size: 2.4rem;
        margin-bottom: 1rem;
    }
    .newsDetail .wrapper .articleDetail-area .articleDetail-Title {
        padding: 0;
    }
    .serviceTop .service-catchcopy {
        font-size: 4.8rem;
        letter-spacing: .3rem;
    }
}

/****************************************
17. max-width: 1100px
*****************************************/
@media screen and (max-width: 1190px) {
    /* ハンバーガーボタンの実装 */
    .menu-btn {
        position: absolute;
        right: 1rem;
        display: flex;
        height: 80px;
        width: 13.4vw;
        justify-content: space-between;
        align-items: center;
        padding: 0 1vw;
        z-index: 90;
    }
    /* 三本線の実装 */
    .menu-btn span.menu-btn-icon,
    .menu-btn span.menu-btn-icon:before,
    .menu-btn span.menu-btn-icon:after {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        border-radius: 2px;
        background-color: var(--main-color-fvOrange);
        position: absolute;
    }
    .menu-btn span.menu-btn-icon {
        width: 2.8vw;
        top: calc(50% + 0.2vw);
    }
    .menu-btn span:before {
        bottom: .8vw;
    }
    .menu-btn span:after {
        top: .8vw;
    }
    .menu-btn span.menu-btn-title {
        font-size: 1.7vw;
        text-align: right;
        color: var(--main-color-fvOrange);
        display: block;
        width: calc(100% - 3vw);
        position: relative;
        top: 0.1vw;
    }
    .menu-btn:hover {
        cursor: pointer;
    }
    .menu-btn:hover span.menu-btn-icon,
    .menu-btn:hover span.menu-btn-icon:before,
    .menu-btn:hover span.menu-btn-icon:after,
    #menu-btn-check:checked ~ .menu-btn span.menu-btn-icon:before,
    #menu-btn-check:checked ~ .menu-btn span.menu-btn-icon::after {
        background-color: var(--sub-color-bule);
    }
    .menu-btn:hover span.menu-btn-title,
    #menu-btn-check:checked ~ .menu-btn span.menu-btn-title {
        color: var(--sub-color-bule);
    }
    /* チェックボックスを非表示にする */
    #menu-btn-check {
        display: none;
    }
    #menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255,255,255,0); /*メニューオープン時は真ん中の線を透明にする*/
    }
    /* メニューを開いている時はハンバーガーボタンが×になる */
    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
    }
    .menu-content {
        position: fixed;
        top: 0;
        transition: all 0.5s;
        opacity: 0;
    }
    .menu-content .header_nav-list {
        left: 100%;/* メニューを外に出しておく */
        transition: all 0.5s;
    }
    #menu-btn-check:checked ~ .menu-content { opacity: 1; }
    #menu-btn-check:checked ~ .menu-content .header_nav-list {
        left: 20%; /*メニューを画面内へ動かす*/
    }
    .header_nav {
        width: 100%;
        height: auto;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }
    #menu-btn-check:checked ~ .header_nav {
        height: 100%;
        left: 0;
        background: rgba(255,255,255,.6);
    }
    .header_nav-list {
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        width: 80%;
        height: 100vh;
        height: 100dvh;  /* Safari対策 */
        padding: 9.6vw 10vw 10vw 10vw;
        overflow-y: auto;
        background-color: var(--main-color-fvOrange);
        position: absolute;
        right: 0;
    }
    .header_nav-item {
        height: 6vw;
    }
    .header_nav-list a {
        color: #fff;
        font-size: 3vw;
    }
    .header_nav-item_text {
        padding-top: 0;
        font-size: 4rem;
    }
    li[class^="header_nav-list-"] {
        width: 100%;
        height: auto;
        text-align: left;
        padding: 5.7rem 0 0 0 !important;
        margin: 0;
    }
    li[class^="header_nav-list-"]:first-child {
        padding: 0 !important;
    }
    li[class^="header_nav-list-"] > a {
        color: #fff;
        margin: 0;
    }
    li[class^="header_nav-list-"] > .normalBtn {
        width: 100% !important;
    }
    .header_nav-list li > .header_nav_local .normalBtn::before {
        border: 1px solid #fff;
        position: absolute;
        right: 0;
        width: 5%;
        height: 46%;
    }
    li[class^="header_nav-list-"] > .normalBtn::before {
        top: 36%;
        width: 6%;
        height: 34%;
    }
    .header_nav-list li > .header_nav_local .normalBtn::after {
        background: url(../img/btn_arrow_white.svg) no-repeat;
    }
    .header_nav-list li.whitepaper,
    .header_nav-list li.contacts {
        width: 100%;
        margin: 8rem 0 0 0;
        padding-left: 0;
    }
    li[class^="header_nav-list-"] > a::after {
        display: none;
    }
    li[class^="header_nav-list-"] span::after {
        color: #fff;
        font-size: 1.3rem;
        font-weight: 500;
        margin-left: 1rem;
    }
    .header_nav-list-service span::after {
        content: "/ 私たちのサービス";
    }
    .header_nav-list-productService span::after {
        content: "/ プロダクトサービス";
    }
    .header_nav-list-works span::after {
        content: "/ 実績一覧";
    }
    .header_nav-list-news span::after {
        content: "/ お知らせ一覧";
    }
    .header_nav-list-about span::after {
        content: "/ 会社概要";
    }
    .header_nav-list-blog span::after {
        content: "/ ブログ";
    }
    .header_nav-list-recruit span::after {
        content: "/ 採用情報";
    }
    li[class^="header_nav-list-"]:hover span::before {
        color: var(--sub-color-bule);
    }
    .header_nav-list li.contacts,
    .header_nav-list li.whitepaper {
        width: 100%;
    }
    .header_nav-list li.contacts a.header_nav-contacts,
    .header_nav-list li.whitepaper a.header_nav-whitepaper {
        font-family: zen-maru-gothic, sans-serif;
        display: block;
        border: none;
        font-size: 2.4vw;
        margin-left: 0;
        text-align: center;
        color: var(--main-color-fvOrange);
        background-color: #fff;
        border-radius: 0;
        padding: 2rem;
    }
    li .header_nav-contacts::before,
    .header_nav-list li.contacts a .header_nav-contacts::before,
    li:hover .header_nav-contacts::before,
    li .header_nav-whitepaper::before,
    .header_nav-list li.whitepaper a .header_nav-whitepaper::before,
    li:hover .header_nav-whitepaper::before {
        width: 3.2rem;
        height: 2.2rem;
        margin-right: 1.6rem;
        display: inline-block;
        content: "" !important;
        background-repeat: no-repeat !important;
        position: relative;
        top: 0.4vw;
    }
    li .header_nav-contacts::before,
    .header_nav-list li.contacts a .header_nav-contacts::before,
    li:hover .header_nav-contacts::before {
        background: url(../img/icon_mail-orange.svg) !important;
        background-size: cover !important;
    }
    li .header_nav-whitepaper::before,
    .header_nav-list li.whitepaper a .header_nav-whitepaper::before,
    li:hover .header_nav-whitepaper::before {
        background: url(../img/icon_download-orange.svg) !important;
        background-size: cover !important;
    }
    .header_nav-list li.whitepaper:hover a.header_nav-whitepaper,
    .header_nav-list li.contacts:hover a.header_nav-contacts {
        background-color: var(--sub-color-bule);
    }
    li.contacts a.header_nav-contacts.normalBtn {
        width: 100% !important;
    }
    .header_nav-list .header_nav_local {
        width: auto;
        height: auto;
        position: inherit;
        left: 0;
        transition: none;
        margin: 2rem 0 2rem;
        padding: 0;
        overflow: visible;
        border-bottom: .5px solid #FDA15B !important;
        background-color: transparent;
        opacity: 1;
    }
    .header_nav-list .header_nav_local li {
        position: inherit;
        border-top: .5px solid #FDA15B;
        border-left: none;
        border-right: none;
        align-items: center;
        justify-content: flex-start;
        text-align: left !important;
    }
    .header_nav-list .header_nav_local li a {
        padding: 1.7rem 0;
        width: 100%;
        height: auto !important;
        color: #fff;
        background-color: transparent !important;
        font-size: 1.4rem;
        text-align: left !important;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        align-content: center;
    }
    .header_nav-list li > ul > li a:hover {
        padding: 1.8rem 1.7rem;
        background-color: var(--sub-color-bule) !important;
    }
    .header_nav-list li > .header_nav_local .normalBtn::after,
    .header_nav-list li > .header_nav_local .normalBtn:hover::after {
        top: 43% !important;
        width: 2.7rem;
        height: 1.4rem;
        right: 0.7rem;
    }
    li[class^="header_nav-list-"].active > a, li[class^="header_nav-list-"].active > a:hover, li[class^="header_nav-list-"] > a:hover,
    li[class^="header_nav-list-"] > a:hover span::after,
    li[class^="header_nav-list-"].active > a span::after {
        color: var(--sub-color-bule);
    }
    li[class^="header_nav-list-"] > a span::after {
        transition: all 0.7s;
        -webkit-transition: all 0.7s;
    }
    .header_nav-list li:hover > ul > li a.normalBtn:hover {
        font-size: 1.3rem !important;
        height: auto !important;
    }
    .header_nav-list li > .header_nav_local .normalBtn:hover::before {
        right: 1.7rem;
    }
    .header_nav-list li > .header_nav_local .normalBtn:hover::after {
        right: 2.5rem;
    }
}

/****************************************
18. max-width: 980px
*****************************************/
@media screen and (max-width: 980px) {
    .wrapper_firstView {
        margin-top: 10%;
        top: 0;
        margin-bottom: 0;
    }
    .home .works .works_block li .works_li-worksName {
        font-size: 1.8vw;
        padding: 1vw 0 0;
    }
    .normalBtn {
        width: 12vw;
        font-size: 1.4vw;
    }
    .wrapper div[class*="-area"] {
        margin: -13rem 0 0;
    }
    .home .wrapper { padding: 8vw; }
    .home .wrapper.service { padding: 4vh 8vh 8vh 0; }
    .home .wrapper.productService > div { padding: 0 8vw; }
    .home .wrapper.service .normalBtn { width: 13.5vw; }
    .home .works .btnWrap { width: 14.6vw; }
    .home .wrapper.news .news_block .btnWrap { width: 14vw; }
    .home .wrapper .areaName {
        margin-bottom: 0;
    }
    .home .wrapper.service > div {
        background-size: auto 190px;
    }
    .home .wrapper.about {
        padding: 2vw 8vw 10vw;
        background-size: auto 180px;
    }
    .news_block-date,
    .news_block-tag span {
        font-size: 1rem;
    }
    .news_block ul li > a {
        padding: 2rem 3rem 3rem 3rem;
        font-size: 1.4rem;
    }
    .news_block ul li div {
        min-height: 1.8rem;
    }
    [class*="categoryTilte"] {
        font-size: 4rem;
    }
    .works-categoryTilte {
        margin: 2rem 0 3rem;
    }
    .news-categoryTilte {
        margin: 3rem 0 7rem;
    }
    .home .wrapper.news {
        padding: 4vw 0;
    }
    .home .wrapper.news .news_block {
        margin: 4rem 0;
    }
    .about [class^="sectionTitle-"] {
        margin: 0 auto 10rem;
    }
    .about section[class^="sectionBlock-"] {
        width: 100%;
        padding: 5rem 14rem 8rem;
    }
    .about section.sectionBlock-corporatePhilosophy {
        margin-top: 11rem;
    }
    .about section.sectionBlock-corporatePhilosophy div {
        padding: 0;
    }
    .privacypolicy-area .privacypolicy_block {
        padding: 5vw;
        margin: 12vw;
    }
    .wrapper div.ps-area .psTitle {
        font-size: 10vw;
        margin-top: 0;
        line-height: 1;
    }
    .wrapper div.ps-area .psTitle em { top: 2rem !important; }
    body.productService-List .scrolldown {
        display: none;
    }
    .productService-List .ps_wrapper {
        margin: 12rem 0 10rem;
    }
    .ps_item {
        width: 100%;
        margin-bottom: 16rem;
    }
    .ps_item-explanatorytext::after {
        content: "製品サイトへ";
        display: block;
        pointer-events: auto;
        width: 100%;
        height: auto;
        padding: 1rem 0;
        margin: 4vw auto 0;
        font-family: zen-maru-gothic, sans-serif;
        text-align: center;
        font-size: 1.8rem;
        font-weight: 500;
        border-radius: 100px;
        color: var(--body-bg-color);
        background-color: var(--sub-color-bule);
    }
    .ps_item a:hover::after {
        color: #fff;
        background-color: var(--sub-color-bule);
    }
    .ps_item a:hover {
        background: none !important;
        transform: none;
        padding: 0;
        box-sizing: border-box;
        border-radius: 3rem;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    body.service .ps_item a:hover {
        transform: inherit;
    }
    .ps_item a:hover > * {
        opacity: 1;
        color: var(--font-baseColor-black);
    }
    .ps_item a:hover::after,
    .ps_item a:hover::before {
        display: none;
    }
    .ps_item a:hover img {
        border-radius: 0;
    }
    body.productService-List .ps_item a:hover img {
        border-radius: 1rem;
    }
    body.service .ps_item-thumbnail {
        margin-bottom: 1.4rem;
    }
    .ps_item-explanatorytext-short {
        margin-bottom: 1rem;
        font-size: 1.8rem;
        line-height: 1.6;
    }
    .ps_item-productName {
        font-size: 2.3rem !important;
        margin: 2rem 0;
        line-height: 1.6;
    }
    .ps_item-text p {
        font-size: 1.6rem;
    }
    .toggleNav_button_title {
        font-size: 1.6rem;
    }
    .toggleNav-toggleButton {
        padding: 2rem 0;
    }
    body.home .works_block ul .works_li {
        width: 100%;
        margin-bottom: 8rem;
        background-color: #FDFCFC;
        border-radius: 1rem;
        -webkit-box-shadow: 1rem 1rem 1.5rem rgb(0 0 0 / 7%);
        box-shadow: 1rem 1rem 1.5rem rgb(0 0 0 / 7%);
        padding: 2rem;
    }
    .works_block ul .works_li {
        padding: 2rem;

    }
    .works_block img {
        height: 100%;
        border-radius: 1rem 1rem 0 0;
    }
    .works_block ul li .works_li-worksName {
        line-height: 1.6;
        font-size: 2.6rem;
        font-weight: 500;
        padding: 1.2rem 1.5rem 0 0;
        white-space: initial;
    }
    .toggleNav {
        margin: 8rem 0 4rem;
        background-position: bottom;
    }
    .toggleNav-toggleButton::before, .toggleNav-toggleButton::after {
        top: 3rem;
    }
    .toggleNav_taxonomy_area {
        display: block;
    }
    .toggleNav_wrapper {
        padding: 4vw 0;
    }
    .toggleNav_taxonomy-title {
        font-size: 1.2rem;
        margin-bottom: 3rem;
        position: relative;
    }
    body.service .normalBtn {
        font-size: 1.4vw;
    }
    body.service .normalBtn:hover {
    font-size: 1.9rem !important;
    }
    body.service .normalBtn::before {
        width: 4rem;
        height: 4rem;
    }
    body.service .normalBtn::after {
        width: 4rem;
        height: 1.3rem;
        right: 1.2rem;
    }
    body.service .normalBtn:hover::after {
        width: 2.2rem;
    }
    body.service .section_header .section_rightArea {
        width: 17vw;
    }
    body.service .section_header .section_leftArea {
        width: 100%;
    }
    body.service .ps_item {
        min-width: 34vw;
        margin-right: 6rem;
        margin-bottom: 6rem;
    }
    body.service .ps_item:last-child {
        margin-right: 12rem;
    }
    body.service ul.service-carousel-sliderFor .ps_item {
        margin-right: 4vw;
        margin-left: 0;
    }
    body.service .ps_item a {
        transform: inherit;
        transition: none;
    }
    body.service .ps_item a:hover {
        padding: 0;
        background: none;
    }
    body.service .ps_block {
        /* width: 117%; */
    }
    body.service .works_block ul {
        width: 117%;
        margin-left: 0;
        margin-bottom: 2rem;
        padding: 0 12vw 0 0;
        margin-top: 6vw;
    }
    body.service .works_block ul .works_li {
        min-width: 72vw;
        margin-bottom: 8rem;
    }
    body.service .works_block ul li:hover {
        transform: inherit;
    }
    body.service .list-productService_block,
    body.service .works_block {
        position: relative;
    }
    body.service .list-productService_block::before,
    body.service .works_block::before,
    body.service .list-productService_block::after,
    body.service .works_block::after {
        content: "";
        display: block;
        width: 12vw;
        height: 1rem;
        background: var(--body-bg-color);
        position: absolute;
        z-index: 10;
    }
    body.service .list-productService_block::before,
    body.service .works_block::before {
        bottom: -0.5rem;
        left: -12vw;
    }
    body.service .list-productService_block::after,
    body.service .works_block::after {
        bottom: -0.5rem;
        right: -12vw;
    }
    ul.page-numbers li .page-numbers {
        width: 5.2rem;
        font-size: 1.6rem;
        padding: 1rem 0;
    }
    ul.page-numbers li .prev, ul.page-numbers li .next {
        background-size: contain;
        padding: 1vw 0.6vw;
        background-position: calc(50% - 0px) calc(100% - 2vw);
        width: 3rem;
    }
    .works_block ul li span.works-categoryName {
        font-size: 1.4rem;
        opacity: .7;
        margin-right: 1rem;
    }
    .toggleNav_taxonomy-listArea_li {
        font-size: 1rem;
        font-weight: bold;
        margin-right: 1.4rem;
        margin-bottom: 2rem;
    }
    .toggleNav_taxonomy-listArea_li_inner {
        padding: 0.6rem 1rem;
    }
    /* service ***********/
    .service.index br.pc {
        display: none;
    }
    .service .localNav {
        position: inherit;
        transform: inherit;
        -webkit-transform: inherit;
    }
    .serviceTop .service-catchcopy {
        font-size: 5.5rem;
    }
    .serviceTop .service-catchcopy .color-fvOrange {
        font-size: 6rem;
    }
    .service:not(.index)　.wrapper div[class*="-area"] > [class$="Title"] {
        font-size: 8rem;
        margin-top: 73vw;
        padding: 0 12rem;
    }
    .service:not(.index) br.pc {
        display: none;
    }
    .service:not(.index) .page-bg {
        width: 73vw;
        top: 10rem;
    }
    .service.vr .wrapper div[class*="-area"] > [class$="Title"] > em {
        font-size: 3.4rem;
    }
    .service .serviceCommon_area {
        margin: 4rem 0 20rem;
    }
    .service .serviceCommon_area .serviceCommon_area-right,
    .serviceLocalNav,
    .content_textArea:only-child,
    .content_textArea-text {
        width: 100%;
    }
    .service:not(.index) .serviceCommon_area .serviceCommon_area-left {
        margin: 6rem 0 0;
        width: 100%;
    }
    .serviceTitle .en-size {
        font: 300 11rem zen-maru-gothic, sans-serif;
    }
    body.service:not(.index) .serviceCommon_area-left .page-text p {
        color: var(--font-baseColor-black);
        padding: 0;
    }
    .service.software .serviceCommon_area .serviceCommon_area-left {
        top: 0;
    }
    .content_textArea {
        margin-top: -7rem;
    }
    .content_textArea .content_title {
        font: 600 3.8rem dnp-shuei-mgothic-std, sans-serif;
        letter-spacing: .4rem;
        line-height: 1.4;
    }
    .service .content_block {
        width: 100%;
        padding: 0 12rem;
    }
    .service:not(.index) .content_block.longText > div,
    .service:not(.index) .content_block.longText > div:nth-child(3),
    .service .content_img,
    .content_textArea {
        width: 100%;
    }
    .service.insourcing .wrapper div[class*="-area"] > .serviceTitle {
        font-size: 7.5rem;
    }
    .service .serviceCommon_area .serviceCommon_area-right {
        margin-top: 30rem;
        width: 68%;
    }
    .content_block .content_textArea,
    .service:not(.index) .content_block.longText .content_textArea {
        width: 100%;
    }
    .wrapper div[class*="-area"] > [class$="Title"],
    [class$="Title"] + [class$="Common_area"],
    .content_block,
    form.wpcf7cp-form-hide + #wpcf7cpcnf {
        padding: 0 10rem;
    }
    .wrapper div[class*="-area"] > [class$="Title"] {
        line-height: 1.6;
        margin: 12rem 0 -4rem;
    }
    .worksDetail .wrapper .articleDetail-area .articleDetail-Title {
        font-size: 3.5rem;
        margin-top: 14rem;
        padding-bottom: 4rem;
        font-weight: 400;
    }
    .service:not(.index) .content_block.noImg {
        margin-top: 26rem;
    }
    .service:not(.index) .list-works, .service:not(.index) .list-productService {
        width: 98vw;
    }
    .service.product .service-area .serviceTitle {
        font-size: 11vw;
    }
    .service .localNav {
        margin: 10rem 0;
        width: 100%;
    }
    .service .localNav ul {
        width: 100%;
        padding: 0 5rem;
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5rem;
    }
    .service .localNav li {
        width: calc(100% / 6);
        text-align: center;
    }
    .service .localNav li a {
        font-size: 1.3rem;
        letter-spacing: .2rem;
    }
    .service .localNav li a::before {
        width: 10rem;
        height: 10rem;
        border-radius: 100px;
        margin: 0 auto 2rem;
        text-align: center;
        top: 0;
        left: 0;
        opacity: .6;
        border: 2px solid var(--body-bg-color);
        background-size: cover !important;
    }
    .service .localNav li.index a::before {
        background-image: url(../img/service_localnav-sp-icon-index.jpg);
    }
    .service .localNav li.vr a::before {
        background-image: url(../img/service_localnav-sp-icon-vr.jpg);
    }
    .service .localNav li.aws a::before {
        background-image: url(../img/service_localnav-sp-icon-aws.jpg);
    }
    .service .localNav li.software a::before {
        background-image: url(../img/service_localnav-sp-icon-software.jpg);
    }
    .service .localNav li.design a::before {
        background-image: url(../img/service_localnav-sp-icon-design.jpg);
    }
    .service .localNav li.product a::before {
        background-image: url(../img/service_localnav-sp-icon-product.jpg);
    }
    .service .localNav li.insourcing a::before {
        background-image: url(../img/service_localnav-sp-icon-insourcing.jpg);
    }
    .service .localNav li a:hover::before,
    .service .localNav li.current a::before {
        opacity: 1;
        border: 2px solid var(--main-color-fvOrange);
    }
    .home .wrapper.service .section_leftArea {
        width: 42vh;
    }
    .home .wrapper.service .section_leftArea p {
        font-size: 1.6vh;
    }
    .home .wrapper.service .section_header p {
        margin-top: 0;
    }
    .l-hero {
        padding-top: 5vh !important;
    }
    .l-hero-wrapper {
        height: 38vh;
    }
    .l-hero-panel,
    .l-hero-panel__contents {
        width: 30vh;
    }
    .l-hero-panel {
        margin-right: 6vh;
    }
    .l-hero-panel__contents {
        padding-top: 34vh;
    }
    .l-hero-panel__contents em {
        bottom: 2.4vh;;
        font-size: 1.6rem;
    }
    .l-hero-panel__contents::before {
        top: -1rem;
        left: 1rem;
    }
    .l-hero-panel-00 {
        display: block;
        margin: 0 0 0vh 12vw;
        width: 31vh;
        height: 37vh;
    }
    .l-hero-panel-00 .section_header .text p {
        font-size: 1.7rem;
        line-height: 1.8;
    }
    .section_header {
        align-items: flex-start;
    }
    .home .wrapper.service .areaName,
    .home .wrapper.service .section_header {
        padding: 0 8vw;
        margin-bottom: 0;
    }
    .service.vr .wrapper div[class*="-area"] > [class$="Title"] > em {
        position: relative;
        top: 2.5rem;
    }
    body.service ul.service-carousel-sliderFor .slick-prev:before, body.service ul.service-carousel-sliderFor .slick-next:before {
        font-size: 6vw !important;
    }

    /***********************************
    16. Contacts
    ***********************************/
    .illust-contact.bird {
        top: 51px;
        left: calc(50% + 26vw);
        display: block;
        width: 19vw;
        height: 22vw;
    }
    .contact-area .section-wrapper {
        padding: 0;
    }
    .contactform_area .titleLabel {
        font-size: 2rem;
    }
    body.contact-Comp .contctsCommon_area {
        margin-top: 5rem;
    }
    body.contact-Comp .normalBtn {
        font-size: 1.8rem;
    }

    /* recruit top */
    body.recruit .recruit_recruiting-item .recruitmentType_type_block ul li a {
        padding: 0 2rem;
    }
    body.recruit .recruit_recruiting-item .recruitmentType_type_block ul li a div:last-child {
        margin-left: 2rem;
        max-width: 70%;
    }
    .qa_block ul li {
        padding: 2rem 3rem 3rem 3rem;
    }

    /*  interview */
    .recruitInterview .interview_firstView {
        height: auto;
    }
    .recruitInterview .interview_wrap {
        flex-direction: column-reverse;
    }
    .recruitInterview .interview_wrap_contents {
        width: 100%;
    }
    .recruitInterview .interview_wrap_contents > div {
        padding: 4rem 10rem 10rem;
    }
    .recruitInterview .interview_firstView .interview_profile {
        width: 100%;
    }
    .recruitInterview .interviewImages {
        width: 100%;
        height: 57rem;
        position: relative;
        margin-top: 0;
    }
    .recruitInterview .interviewImages p {
        width: 100%;
        height: auto;
    }
    .recruit-carousel-sliderFor li div p em.interview_num {
        font-size: 9rem;
    }

    /* recruit entry */
    body.recruit-entry-Form .recruit-entry .contctsTitle,
    .recruit-entry .section-wrapper {
        padding: 0 10rem !important;
    }
    .recruit-entry-block {
        padding: 4rem 4rem 9rem;
    }
    body.recruit-entry-Form form.wpcf7cp-form-hide + #wpcf7cpcnf {
        margin: 0 10rem !important;
        width: calc(100% - 20rem) !important;
    }
}
/****************************************
18. min-width: 769px and max-width: 912px
*****************************************/
@media screen and (min-width: 769px) and (max-width: 912px) {
    body.recruit-entry-Form .wrapper div[class*="-area"]>[class$="Title"],
    body.recruit-entry-Comp .wrapper .contact-area.recruit-entry h1.contctsTitle {
        top: 8rem;
        margin-bottom: 15rem;
    }
    .newsDetail .wrapper .articleDetail-area .articleDetail-Title  {
        font-size: 3.5rem;
        margin: 15rem 0 2rem;
    }
    .worksDetail .wrapper .articleDetail-area .articleDetail-Title {
        font-size: 3.5rem !important;
    }
}
/****************************************
19. min-width: 767px
*****************************************/
@media screen and (min-width: 767px) {
    .whitepaperDetail .articleDetail_block {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 3rem;
    }
    .whitepaperDetail .articleDetail_block .articleDetail_block-left {
        width: 40%;
    }
    .whitepaperDetail .articleDetail_block .articleDetail_block-right {
        padding: 3rem;
    }
    .whitepaperDetail .articleDetail_block [class*="articleDetail_block-"] .whitepaper_thumbnail {
        padding: 3rem;
    }
    .text-1_balloon {
        height: 46.5px;
        background-size: 73%;
    }

}