@media only screen and (max-width: 800px) {
  /* header */
  .header.fixed {
    position: fixed;
    z-index: 10000;
  }
  .header {
    padding: 16px 8px;
  }
  .header .logo-home,
  .header .logo {
    width: 100px;
  }
  .header.is-fixed {
    padding: 8px;
  }
  .header h1 {
    position: relative;
    z-index: 2;
  }
  .mobile-nav {
    margin-left: auto;
    position: relative;
    display: block;
    width: 26px;
    height: 26px;
    cursor: pointer;
    z-index: 2;
  }
  .mobile-nav i {
    position: absolute;
    display: block;
    width: 26px;
    height: 2px;
    top: 0;
    left: 0;
    background-color: #065EE3;
    transition-duration: 0.25s;
  }
  .mobile-nav i:before,
  .mobile-nav i:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 26px;
    height: 2px;
    background-color: #065EE3;
  }
  .home .mobile-nav i,
  .home .mobile-nav i:before,
  .home .mobile-nav i:after {
    background-color: #FFF;
  }
  .home .header.is-fixed .mobile-nav i,
  .home .header.is-fixed .mobile-nav i:before,
  .home .header.is-fixed .mobile-nav i:after {
    background-color: #065EE3;
  }
  .mobile-nav i:before {
    top: 10px;
    left: 0;
    transition-duration: 0.25s;
  }
  .mobile-nav i:after {
    top: 20px;
    left: 0;
    transition-duration: 0.25s;
  }
  .home .header.is-fixed .mobile-nav.closed i,
  .mobile-nav.closed i {
    background-color: transparent;
  }
  .mobile-nav.closed i:before {
    transform: rotate(45deg);
  }
  .mobile-nav.closed i:after {
    transform: rotate(-45deg);
    top: 10px;
  }
  .home .is-fixed .global-nav a {
    color: #FFF;
  }
  .global-nav {
    display: none;
  }
  .global-nav a {
    padding: 16px 10px;
  }
  .global-nav .sub-menu a {
    padding: 16px 24px;
  }
  .global-nav.active {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    padding: 60px 24px 24px;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.9);
  }
  .global-nav.active a {
    color: #FFF;
  }
  .global-nav a:hover,
  .global-nav .current-menu-item a {
    background-color: #065EE3;
  }
  .global-nav.active .sub-menu {
    display: block;
    position: relative;
    background-color: transparent;
  }
  .global-nav .sub-menu.active {
    animation: none;
  }
  .business-model-pattern-item {
    width: 100%;
    padding: 40px 24px;
  }
  .company-list-item {
    width: 33.333%;
  }
  .company-list-item img {
  width: 120%!important;
  height: auto;
}
  .local-nav-item a {
    padding: 24px 16px;
  }

  .form section {
    flex-flow: column nowrap;
    align-items: flex-start;
    padding: 16px 0;
  }
  .form section p {
    margin-bottom: 10px;
  }
  .form section select {
    width: 100%;
  }
  p.item {
    width: 100%;
  }
  p.ipt {
    width: 100%;
  }
  .inquiry-head h2 {
    font-size: 1.8rem;
  }
  .inquiry-head p {
    font-size: 1.2rem;
  }
  .career-message-comment {
    padding: 20px;
  }
  .career-message {
    background-size: auto;
    background-attachment: scroll;
    background-repeat: no-repeat;
  }
}

@media only screen and (min-width: 640px) {
  .member-profile-photo img {
    filter: grayscale(100%) brightness(80%);
    transform: scale(1);
  }
  .member-profile-photo img:hover {
    filter: grayscale(0);
    transform: scale(1.1);
  }
}

@media only screen and (max-width: 639px) {

  .member-profile {
    flex-flow: column nowrap;
  }
  .member-profile-list {
    width: 100%;
  }
  .member-profile-photo {
    width: 100%;
    box-sizing: border-box;
  }
  .member-profile-detail {
    width: 100%;
  }
  .member-profile-list:nth-child(2) .member-profile-detail,
  .member-profile-list:nth-child(5) .member-profile-detail,
  .member-profile-list:nth-child(8) .member-profile-detail,
  .member-profile-list:nth-child(11) .member-profile-detail,
  .member-profile-list:nth-child(3n) .member-profile-detail {
    left: 0;
  }
  .member-profile-content {
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
  }
  .member-profile-photo img,
  .member-profile-photo img:hover {
    /*filter: grayscale(100%) brightness(80%);*/
    /*transform: scale(1);*/
  }
}
@media only screen and (max-width: 479px) {
  /* layout.css */
  .section {
    padding: 40px 16px;
  }
  .section-inner {
  
  }
  .flex {
    display: block;
    box-sizing: border-box;
  }
  .flex-col60 {
    width: 100%;
    box-sizing: border-box;
  }
  .flex-col40 {
    width: 100%;
    box-sizing: border-box;
  }
  .flex-col50 {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 40px;
  }

  /* */
  .page-title-inner {
    padding: 32px 16px;
    width: 100%;
    box-sizing: border-box;
  }
  .page-title-inner.min {
    padding: 20px 16px;
  }
  .page-title h1 {
    font-size: 2.0rem;
  }
  .h2-title {
    font-size: 2rem;
    margin-bottom: 20px;
  }
  /* home.css */
  .key-visual-inner {
    height: auto;
    padding: 240px 20px;
  }

  .dl-basic {
    flex-wrap: wrap;
    font-size: 1.4rem;
  }
  .dl-basic-dt,
  .dl-basic-dd {
    margin-bottom: 0;
    padding: 8px 0;
    width: 100%;
    box-shadow: none;
  }

  /* service */
  .service-index-list {
    flex-flow: column nowrap;
  }
  .service-index-item {
    width: 280px;
    margin: 0 auto 24px;
  }

  .service-box-title {
    width: 100%;
    padding: 24px 0;
    color: #FFF;
    font-size: 1.8rem;
  }
  .service-box-content {
    width: 100%;
    padding: 0 0 32px;
  }

  .adviser-profile-box {
    padding: 24px 8px;
    width: 100%;
  }
  .adviser-profile-box:nth-child(2n) {
    border-left: none;
  }

  .portfolio-box {
    flex-flow: column nowrap;
  }
  .portfolio-left {
    margin: 0 auto;
    width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
  }
  .portfolio-right {
    margin: 0 auto;
    width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
  }
  .portfolio-item {
    margin-bottom: 20px;
  }
  .modal-wrapper {
    left: 5%;
    width: 90%;
  }
  .sourcing-list-title {
    width: 100%;
    padding: 10px;
    font-size: 1.4rem;
  }
  .sourcing-list-content {
    width: 100%;
    padding: 20px 10px;
  }
  .sourcing-list li {
    font-size: 1.2rem;
  }
  .sourcing-box p {
    font-size: 1.4rem;
  }

  .responsive img {
    max-width: 100%;
    height: auto;
  }
}