@charset "utf-8";


@media(min-width: 600px){
  .footer-area{
    flex-direction: row;
    flex-wrap: wrap;
  }
  .footer-left{
    width: calc( 50% - 25px);
  }
  .footer-center{
    width: calc( 50% - 25px);
  }
  .footer-right{
    width: 100%;
  }
  #footer-gnav li{
    padding-bottom: 20px;
    font-size: 1.2rem;
  }
}

@media(min-width: 768px) {
  .top-menu{
    padding: 100px 5%;
  }
  .top-menu-inner{
    flex-direction: row;
    justify-content: center;
    gap: 50px;
  }
  .top-menu-item{
    width: calc( 50% - 25px )
  }
  .top-news{
    padding: 100px 0;
    flex-direction: row;
    align-items: flex-start;
  }
  .top-news-left{
    width: 30%;
  }
  .top-news-area{
    flex: 1;
  }
  .top-contact-btn{
    gap: 1em;
    padding: 15px 40px;
    letter-spacing: 0.1rem;
  }
  .top-recruit-btn img{
    width: 60px;
    height: 180px;
  }
  #office-list h3{
    font-size: 2rem;
    padding-bottom: 50px;
  }
}

@media(min-width:900px){
/*----------レイアウト----------*/
  .pc{
    display: block
  }
  .sp{
    display: none;
  }
/*----------header----------*/
  #header{
    height: 80px;
  }
  #header-logo{
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    vertical-align: middle;
    align-items: center;
    width: auto;
    font-size: 0.8rem;
  }
  #logo{
    width: 100px;
  }
  #pc-gnav{
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    vertical-align: middle;
    align-items: center;
  }
  #pc-gnav li a{
    color: var(--main-color);
    font-size: 0.9rem;
  }
/*----------mainvisual----------*/
  .mv {
    height: calc( 100vh - 80px );
    top: 80px;
  }
  .mv-ttl.vertical .bg-line {
    font-size: 3.5rem;
    letter-spacing: 0.2em;
  }
  .mv-ttl.vertical {
    gap: 2em;
  }
  
/*----------top----------*/
  .top-about{
    flex-direction: row;
  }
  .top-about-txt{
    width: 40%;
  }
  .top-about-imgarea{
    width: calc( 60% - 50px )
  }
/*----------下層共通----------*/
  .lower-nav ul{
    gap: 30px;
  }
  .lower-nav ul a{
    font-size: 1.3rem;
  }
/*---------- About----------*/
  #philosophy,
  #overview,
  #history{
    padding: 100px 0;
  }
/*----------recruiｔ----------*/
  .recruit-table{
    display: table;
  }

  .recruit-table thead,
  .recruit-table tbody,
  .recruit-table tr {
    display: table-row-group;
  }

  .recruit-table tr {
     display: table-row;
  }

  .recruit-table th,
  .recruit-table td {
    display: table-cell;
    width: auto;
    padding: 2em;
    background-color: inherit;
    border-bottom: 1px solid var(--main-color);
  }
  .recruit-table th{
    background-color: inherit;
    text-align: center;
    width: 30%;
  }
/*----------news----------*/
  .news-table{
    display: table;
  }

  .news-table thead,
  .news-table tbody,
  .news-table tr {
    display: table-row-group;
  }

  .news-table tr {
     display: table-row;
  }

  .news-table th,
  .news-table td {
    display: table-cell;
    width: auto;
    padding: 2em 1em;
    background-color: inherit;
    border-bottom: 1px solid var(--main-color);
  }
  .news-table th{
    width: 30%;
    vertical-align: middle;
  }
  h2.title{
    font-size: 2.3rem;
    padding-bottom: 10px;
  }
/*----------contact----------*/ 
  .contact-table{
    display: table;
  }

  .contact-table thead,
  .contact-table tbody,
  .contact-table tr {
    display: table-row-group;
  }

  .contact-table tr {
     display: table-row;
  }

  .contact-table th,
  .contact-table td {
    display: table-cell;
    width: auto;
    padding: 2em 1em;
    border-bottom: 1px solid var(--main-color);
  }
  .contact-table th{
    vertical-align: middle;
  }
  .contact-table p{
    padding-bottom: 0;
  }
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 textarea{
    font-size: 16px;
    }
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"]{
    width: 50%;
    }
  .contact-mail{
    padding-top: 20px;
  }
}
@media(min-width:1024px){
  .w60{
    width:60vw;
    margin: 0 auto;
  }
/*----------top----------*/
  .top-menu-inner{
    gap: 100px;
  }
  .top-menu-item{
    width: calc( 33% - 66px );
  }
/*----------lower----------*/
  .lower-page h2{
    font-size: 2.5rem;
    padding-bottom: 50px;
  }
  #greeting::before{
    top: -149px;
    left: 0;
    right: 0;
    height: 150px;
    clip-path: polygon(0 100%, 100% 0, 100% 100%, 0% 100%);
    z-index: 1;
    background-color: var(--bg-color);
  }
  .greeting-flex{
    flex-direction: row;
    gap: 100px;
  }
  .greeting-txt{
    width: 65%;
  }
  .greeting-img{
    flex: 1;
  }
  .philosophy-flex{
    flex-direction: row-reverse;
    gap: 100px;
  }
  .philosophy-txt{
    flex: calc( 50% - 100px );
  }
  .philosophy-img-area{
    flex: 50%;
  }
  .philosophy-img {
    position: absolute;
    width: 50vw;
    top: 100px;
    left: 0;
    
  }
  .philosophy-img img{
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    vertical-align: bottom;
    width: 100%;
    max-height: 800px;
    object-fit:cover;
  }
  .policy-flex{
    flex-direction: row;
    gap: 50px;
    align-items: stretch;
  }
  .policy-box{
    flex: 1;
  }
  .overview-table th,
  .overview-table td{
    padding: 2em;
  }
  .office-flex{
    flex-direction: row;
    gap: 100px;
  }
  .office-img{
    width: 35%;
  }
  .office-overview{
    flex: 1;
  }
  .hr-flex{
    flex-direction: row;
    gap: 100px;
  }
  .hr-flex2{
    flex-direction: row-reverse;
    gap: 100px;
  }
  .hr-img{
    width: 50%;
  }
  .hr-txt{
    flex: 1;
  }

/*----------footeｒ----------*/
  .footer-left{
    width: 25%;
  }
  .footer-center{
    width: 25%;
  }
  .footer-right{
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .footer-right ul{
    flex-grow: 1;
  }
}
@media(min-width:1200px){
  .footer-area{
    padding: 100px 50px;
  }
}
@media(min-width:1300px){
  #philosophy{
    height: 1000px;
  }
}
@media(min-width:1400px){
  .top-about{
    padding-bottom: 200px;
  }
  .footer-area{
    padding: 100px 10%;
  }
}