@media (max-width: 1200px){
    .menu-header > a {
        margin: 0 10px;
    }

    .recruit .menu-header, .header-right {
        padding-top: 0;
    }

    .group-2-content h2 {
        font-size: 1.5em;
        line-height: 1.5em;
        margin-bottom: 25px;
    }

    .group-2-content {
        padding: 35px 80px 35px 30px;
        margin-top: 190px;
    }

    .group-2-wrap {
        height: 700px;
        background-size: 60%;
    }

    .group-2-img {
        margin-top: 100px;
    }

    #group-3 {
        height: 700px;
    }

    .wrap-group-3 {
        padding-top: 130px;
    }

    .content-group-3 .title-content h2 {
        font-size: 1.5em;
        line-height: 1.43em;
    }
    
    .content-group-3 {
        padding: 30px 80px 0 210px;
        top: 230px;
    }

    .content-group-3 .title-content {
        padding-bottom: 10px;
        margin-bottom: 15px;
    }

    .content-group-3 .group-button {
        margin: 30px 0 45px 60px;
    }

    .box-gallery {
        width: auto;
        height: auto;
    }

    .gallery-comp-content {
        left: 30px;
    }

    .box-button-link.btn1, .box-button-link.btn2,
    .box-button-link.btn3, .box-button-link.btn4 {
        width: 100%;
    }
    .content-img-right .box-button-link.btn1 {width:300px;}

    .box-img-border .title-h2 {
        margin-bottom: 20px;
        font-size: 1.8em;
    }

    .wrap-img-border .box-img-border {
        padding: 30px 5px 0 3%;
    }
}

@media(max-width: 1199px){
    body {
        margin: 20px auto 0;
    }

    .hc-offcanvas-nav .nav-container {
        top: 115px;
    }

    #header {
        display: flex;
        align-items: center;
    }

    .header-right, .menu-header {
        display: none;
    }

    .wrap-menu {
        text-align: right;
        display: block;
    }

    #header .container {
        padding-bottom: 25px;
    }

    .logo {
        display: flex;
        align-items: center;
    }

    .logo img {
        width: 280px;
    }
}

@media (max-width: 992px){

    .about-box-content h2 {font-size:2em;}

    .group-title {
        padding-top: 50px;
        margin-bottom: 50px;
    }

    .box-banner .group-button[data="slide02"] {
        bottom: 0;
    }

    .group-2-content {
        padding: 35px 30px;
        max-width: 720px;
        margin: auto;
        margin-top: 150px;
    }

    .group-2-wrap {
        height: 600px;
        background-size: 35%;
        margin-top: 50px;
    }

    .group-2-img {
        margin: 50px 0;
        position: static;
        text-align: center;
    }

    #group-3 {
        height: auto;
        padding: 20px 0;
    }

    .wrap-group-3 {
        padding-top: 0;
        margin: 50px 0;
    }

    .wrap-group-3 .img-group-3, .wrap-group-3 .content-group-3 {
        position: static;
    }

    .wrap-group-3 .content-group-3 {
        padding: 60px 50px 0 60px;
        /*max-width: 647px;*/
        margin: 0 auto;
    }
    
    #group-3 .img-group-3 {padding-left:0!important;padding-right:0!important;}

    .box-gallery p,.box-gallery .title-box-gallery {
        font-size: 1.125em;
    }

    .gallery-comp {
        margin-top: 80px;
    }

    #company {
        margin-bottom: 80px;
    }

    #qa {
        padding: 100px 0;
    }

    .content-group-2-img {
        margin-left: 0;
    }

    .content-group-2-img .position, .group-2-content.position {
        position: static;
    }
    
    .tab-pane .type {
        width: 140px;
    }

    .tab-pane .date, .wrapper-tab .content {
        width: inherit;
    }

    .wrapper-tab .content {
        display: block;
        margin-top: 20px;
    }

    .contact {
        display: none;
    }

    .contact-footer {
        justify-content: center;
    }

    .info-footer {
        margin: 0;
    }

    .info-footer .col-lg-3 a {
        font-size:  1.125em;
        text-align: center;
        border-bottom: 1px solid #ccc;
        margin: 0;
        padding: 25px 0;
    }

    .info-footer .col-lg-3:last-child a {
        border: none;
    }

    .info-footer .container {
      max-width: 100%;
    }

    .info-footer .container .col-lg-3 {
        padding: 0;
    }

    .copy-right {
        margin-top: 20px;
    }

    .wrap-img-border {
        margin: 0 auto 60px;
        display: block;
        max-width: 560px;
    }

    .wrap-img-border .box-img-border {
        padding: 10px 30px 0;
    } 

    .box-button-link.small, .box-button-link.btn1, .box-button-link.btn2,
    .box-button-link.btn3, .box-button-link.btn4 {
        height: auto;
    }

    .wrapper-news .pl-pc{
      padding-left: 15px;
    }

    .content-material {
        width: 90%;
        padding: 0;
        margin-right: 13px;
    }

    .wrap-material, .box-material {
        padding: 10px;
    }

    .button-banner {
        display: table;
        border-spacing: 10px 0;
    }

    .button-link.large {
        padding: 10px 25px;
    }

    .button-link {
        padding: 10px 30px;
    }

    .button-link.button-image {
        width: 150px;
        background-size: contain;
    }

    .wrap-view-more {
        margin-bottom: 50px;
    }

    .box-content-bot {
        margin-left: 20px;
    }

    .three-col .wrap-content-bot .box-content-bot {
        margin-left: 10px;
    }

    .wrap-img-border figure, .wrap-img-border .box-img-border {
        width: 100%;
    }

    #svg-animation {
        width: 100%;
        padding-right: 0;
    }
    
    .tab-content .wrapper-tab {
        display: block;
    }
    
    .startup .five-col {
        flex-direction:column;
    }
    .startup .five-col > li {
        width:100%;
    }
}

@media (max-width: 768px){
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 1.57em;
    }
    #banner {
        height: 280px;
    }
    
    #new {
        margin-bottom: 50px;
        text-align: left;
    }

    #new .date {
        border: none;
        padding: 0;
        margin-bottom: 15px;
    }

    #new .tag {
        display: inline-block;
        margin-bottom: 15px;
        max-width: 140px;
        transform: scaleX(1);
        margin-right: 15px;
    }

    #new .new-title {
        display: block;
        margin-left: 0;
    }
    
    .about-box-content h2 {
        font-size:2.625em;
    }

    .title-company {
        background-size: contain;
        height: 160px;
    }

    .title-company h2 {
        font-size: 1.57em;
    }

    #company {
        margin-bottom: 40px;
    }

    .gallery-comp {
        margin-top: 50px;
    }

    .group-button a:first-child {
        margin: 0 auto 20px;
    }

    .group-button a {
        display: block;
        max-width: 300px;
        margin: auto;
        padding: 20px 0;
    }

    .content-img {margin-top: 0;}

    #qa {
        padding: 45px 0;
    }

    .title-qa {
        height: 130px;
        background-size: contain;
    }

    .group-2-wrap {
        background-size: 50%;
    }

    .content-group-3 .title-content {
        padding-right: 0;
    }

    .wrap-group-3 .img-group-3 {
        padding: 0;
    }

    .content-group-3 .group-button {
        margin: 30px auto 45px;
    }
    
    .border-left-gallery {
        position: static;
        background-image: inherit;
        margin: 25px auto;
    }

    .gallery-comp-content {
        position: relative;
        padding-top: 48px;
        padding-right:1.1em;
        left:4.25%;
        top:-56px;
    }

    .banner .nav-link {
        padding: 15px 30px;
    }

    .news-board .nav-link {
        padding: 0 15px;
    }

    .group-text {
        font-size: 16px;
    }

    .box-banner .group-button a {
        width: 400px !important;
        max-width: 400px;
        height: 60px !important;
        padding: 10px 0 !important;
        font-size: 1.71em;
        margin: 0;
    }

    .box-banner .box-img-banner  .group-button {
        left: 50%;
        bottom: inherit;
    }

    .box-banner .box-img-banner  .group-button[data="slide01"] {
        top: 49%;
    }

    .box-banner .box-img-banner  .group-button[data="slide02"] {
        top: 65%;
    }

    .box-banner .box-img-banner  .group-button[data="slide03"] {
        top: 70%;
    }

    .group-button {
        margin-top: 0;
        padding-bottom: 0;
    }

    #group .group-button {
        padding-bottom: 50px;
    }

    .about-box-content {
        left: 40px;
    }

    .gt-equal {
        min-height: 91px;
    }

    .button-navi {
      margin: 20px 0;
    }

    #main, .text, .list li,
    .wrap-img-right, .wrap-text-around, .wrap-news-list,
    .box-qa .question, .wrap-qa, .wrap-box-title,
    .box-text-link, .box-icon-link, .wrap-text-link,
    .wrap-button-link, .wrap-icon-link, .wrap-table
    .wrap-news, .box-content-line {
        margin-bottom: 40px;
    }

    .mg-img1-2, .title-line.big, .box-button-link {
        margin-bottom: 30px;
    }

    .title-h2, .list, .wrap-img-border, .title-h3,
    .title-line.title-h4, .wrap-table, .wrap-news {
      margin-bottom: 40px;
    }
    
    .nomal-h3 {
        margin-bottom:32px;
    }

    .title-line,  .box-qa, .title, #group .title, .group-text,
    .breadcrumb, .wrap-board .nav-tabs, .wrapper-news,
    .wrap-img-content-bot {
        margin-bottom: 20px;
    }

    .title {
        padding-bottom: 20px;
    }

    .title-h2.color, .title-cotent {
        padding: 15px 0;
        margin-bottom: 15px;
    }

    #group, .wrap-know {
        padding: 20px 0;
    }

    #about .col-md-6, #about .col-md-4 {
        margin-bottom: 150px;
    }

    .box-content-bot {
        margin-left: 15px;
    }

    .wrapper-news {
        padding: 0 0 40px;
    }

    .box-content-bot p strong{
        line-height: 1;
        margin-bottom: 10px;
    }

    .img-right .content-img-right {
        padding-right: 15px;
    }

    .caption {
        margin: 20px 0 30px;
    }

    .img-around, .img-text figure {
        margin: 0;
    }

    .wrap-img-3-small .row > div {
        max-width: 100%;
    }

    .box-news-list {
        display: block;
    }

    .box-tag-list {
        min-width: inherit; 
        width: inherit; 
        float: left;
    }

    .box-news-list .date-pc {
        display: none;
    }

    .box-news-list .date-sp {
        display: inline-block; 
        margin-bottom: 15px;
    }

    .box-news-list .date {
        margin-bottom: 15px;
        display: inline-block;
    }

    .wrap-news-list .tag-list {
        margin-bottom: 5px;
        margin-right: 0;
    }

    .content-news-list {
        padding: 0 0 25px;
        display: block;
    }

    .box-news-list p {
        padding-left: 0;
        border: none;
    }

    .box-qa .question {
        padding: 0 15px;
    }
    
    .wrap-qa p {
        padding: 0 15px;
    }

    .box-qa .answer {
        padding: 10px 15px;
    }

    .question span, .answer span {
        max-width: 40px;
        text-align: center;
        margin-right: 10px;
        padding-top: 10px;
    }

    .box-qa .question i {
        display: none;
    }

    .box-text-link {
        width: 33%;
        text-align: center;
    }

     .box-icon-link {
        width: 33%;
     }

    .box-table {
        padding: 15px 0;
    }

    .title-table {
        width: 100px;
        min-width: 100px;
        margin-right: 10px;
    }

    .box-tag {
        padding-bottom: 20px;
        margin-bottom: 15px;
        display: flex;
        align-items:center;
    }

    .content-his {
        padding: 15px 0;
    }

    .wrap-img-border .box-img-border {
        padding: 0 15px;
    }

    .question, .answer {
        padding: 20px 15px;
        align-items: inherit;
    }

    .box-qa .question p {
        border-right: none;
        padding: 0 0 0 15px;
    }

    .box-qa .answer p {
        padding: 0 0 0 15px;
    }

    .year-his a:hover, .question:hover, .answer:hover {
      color: #333;
      opacity: .5;
    }

    .box-img-csr {
        text-align: center;
    }

    .two-col > li, .two-col > figure, .two-col > div,
    .three-col > li, .three-col > figure, .three-col > div,
    .img-text figure {
        width: 100%;
    }

    .two-col.three-img > li {
        width: 50%;
    }

    .five-col > li, .five-col > figure, .five-col > div {
       width: 33%;
    }

    .two-col.three-img figure img  {
        margin-bottom: 0;
    }

    .mb-4-pc, .mb-5-pc, .mb-6-pc, .mb-7-pc {
        margin-bottom: 20px !important;
    }

    .mb-8-pc, .mb-9-pc, .mb-10-pc {
        margin-bottom: 40px !important;
    }

    figure, .two-col,
    .three-col.img-small, .wrap-history {
        margin-bottom: 20px;
    }
    
    .three-col {margin-bottom:0;}
    .three-col li {margin-bottom:15px;}

    .img-text {
        margin-bottom: 40px;
    }

    .two-col.three-img {
        margin-bottom: 30px;
    }

    .two-col.three-img li:last-child figure {
        margin-bottom: 0;
    }

    .three-col.img-small > li { 
        max-width: 100%;
    }

    .box-content-bot .content-title {
      line-height: 1;
      margin-bottom: 12px;
    }

    #news {
        margin-top: 30px;
    }

    figure {
        text-align: center;
    }

    figure img {
     margin-left: auto;
     margin-right: auto;
     width:100%;
    }

    .sp-none {
        display: none !important;
    }

    .pc-none {
        display: block !important;
    }

    .banner .button-link.button-image {
        width: 100%;
        background-size: auto;
    }

    .banner .button-link {
        display: inline-block;
    }

    .button-banner {
        display: block;
        width: 100%;
        bottom: -5px;
    }

    .box-btn-banner {
        display: flex;
        justify-content: space-between;
    }

    .box-btn-banner .button-link {
        padding: 25px;
    }

    .box-btn-banner .button-link:first-child {
        width: 50%;
    }

    .box-btn-banner .button-link:last-child {
        width: 48%;
    }

    .box-btn-banner .button-link:after {
        border-right-width: 40px; 
        border-bottom-width: 40px;
    }
    .content-img-right .box-button-link.btn1 {width:100%;}

    .wrap-content-bot {
        padding: 0 15px 0 9%;
        margin-left: auto;
        margin-right: auto;
    }

    .three-col .wrap-content-bot {
        padding: 0 15px 0 9%;
    }

    .wrap-content-bot:before,
    .wrap-content-bot[column="3"]:before {
        height: 160%;
        top: -56px;
        left: 8%;
    }

    .three-col .wrap-content-bot:before, 
    .wrap-content-bot[column="3"]:before {
        height: 180%;
    }
	
    .hc-offcanvas-nav .nav-container {
        top: 90px;
    }

    .img-logo {
        width: 360px;
        max-width: inherit;
    }

    .question:after {
        top: 35px;
    }

    #svg-animation {
        height: 200px !important;
    }

    #svg-animation-2 {
        height: 260px !important;
    }

    #svg-animation image, #svg-animation-2 image {
        width: 1200px;
    }
    
    .startup .five-col{
        flex-direction:column;
    }
}

@media (max-width: 767px){

    body {
        margin: 10px auto 0;
    }
    
    #header {height:80px;}
    #header .container {padding-bottom:5px;}

    .box-table {
        display: block;
    }

    .title-table {
        margin-bottom: 15px;
    }

    .title-table, .content-table {
        width: 100% !important;
    }

    .box-img:after, .img-thumb figure:after {
        content: none;
    }

    .content-his {
        display: block;
    }

    .content-his .date-content-his {
        max-width: inherit;
        margin: 0 0 20px 0;
        display: block;
    }
}


@media (max-width: 576px){

    .three-col .wrap-content-bot:before, 
    .wrap-content-bot[column="3"]:before {
        height: 150%;
    }

    .five-col > li, .five-col > figure, .five-col > div {
       width: 50%;
    }

    .title-company h2 {
        font-size: 1.3em;
    }

    .button-link.guide {
        margin: 5px 0;
    }

    #guide {
        padding: 50px 0;
    }

    .group-2-wrap {
        background-size: contain;
    }

    .group-2-content {
        margin-top: 50px;
    }

    .group-2-img {
        margin: 25px 0 30px;
    }

    .group-2-content h2 {
        font-size: 1.57em;
    }

    .wrap-group-3 .content-group-3 {
        padding: 20px 30px 0;
        margin: 0 auto;
    }

    .content-group-3 .title-content h2 {
        font-size: 1.42em;
    }

    .group-button {
        margin-bottom: 50px;
        padding-bottom: 0;
    }

    .banner .nav-link {
        padding: 15px 10px;
    }

    .news-board .nav-tabs .nav-item {
        margin-bottom: 10px;
    }

    .box-banner .group-button {
      margin: 50px 0 0;
      padding-bottom: 95px;
    }

    .group-text {
        font-size: 1em;
    }

    .about-box-content {
        left: 20px;
    }

    .gallery-comp .nav-tabs .nav-link {
        padding: 0 10px;
        font-size: 1em;
    }

    .gallery-comp-content {
        padding-left: 15px;
    }

    .box-text-link {
        text-align: center;
    }

    .box-text-link, .box-icon-link {
        width: 50%;
    }

    .box-btn-banner .button-link {
        padding: 15px;
    }

    .box-banner .group-button a {
        width: 250px !important;
        height: 45px !important;
        font-size: 1.28em;
    }

    #svg-animation {
        height: 160px !important;
        width: 120%;
        position: absolute;
        left: -55px;
        bottom: 0;
    }

    #svg-animation-2 {
        padding-right: 30px;
        width: 100%;
    }

    .wrap-qa .question p {
        padding: 0 40px 0 15px;
    }
    
    .content-group-3 > p {
        letter-spacing: 1.2px;
    }
    
}

@media (max-width: 400px){
    .hc-offcanvas-nav li.button-menu {
        margin: 0 5px;
    }

    .button-navi a {
        width: 45%;
    }

    .box-btn-banner .button-link {
        padding: 10px;
    }

    .box-btn-banner .button-link:after {
        border-right-width: 30px; 
        border-bottom-width: 30px;
    }

    .box-banner .group-button a {
        width: 200px !important;
        height: 35px !important;
        font-size: 1em;
    }

    .content-banner span {
        letter-spacing: 0;
    }

    
}

@media (max-width: 380px){

    .tab-pane .type {
        margin: 10px 0 0;
        display: block;
    }

    .img-logo {
        max-width: 120%;
    }

    #banner .content-banner .title-category {
        font-size: 2.8em;
    }
}

@media (max-width: 360px){

    .title-company h2 {
        font-size: 1.2em;
    }
}

@media (max-width: 340px){

    .title-company h2 {
        font-size: 1em;
    }

    #svg-animation {
        height: 130px !important;
    }
}