@charset "UTF-8";
/* ====================
init
==================== */
/* view port*/
/* ====================
break point
==================== */
/* font set
-------------------*/
/* font size */
/* ====================
 フォント変数
==================== */
/* ====================
 googleF/ONT
==================== */
/* ====================
 横幅の変数
==================== */
/* ====================
 サイドナビの青い文字とその左の縦線
==================== */
/*** トップページ ***/
html {
  scroll-behavior: smooth;}
h1 {
  font-size: 68px;
  font-weight: 600; }
  @media (min-width: 768px) and (max-width: 1366px) {
    h1 {
      font-size: 4.97804vw; } }
  @media (max-width: 768px) {
    h1 {
      font-size: 7.03125vw; } }

h2 {
  font-family: "Raleway", "MS PGothic", sans-serif;
  font-size: 58px;
  font-weight: bold;
  position: relative;
  padding-top: 40px; }
  @media (max-width: 768px) {
    h2 {
      font-size: 30px;
      padding-top: 12px; } }
  h2::before {
    content: "";
    background: #22A6E6;
    height: 4px;
    width: 60px;
    position: absolute;
    top: 0;
    left: 0; }
    @media (max-width: 768px) {
      h2::before {
        width: 32px;
        height: 3px; } }

h3 {
  font-family: "Raleway", "MS PGothic", sans-serif;
  font-size: 28px;
  font-weight: bold; }

h4 {
  font-size: 18px; }

section {
  max-width: 1080px;
  width: 100%;
  margin-bottom: 140px; }
  @media (max-width: 768px) {
    section {
      max-width: 100%;
      padding: 0 25px; } }

.kv {
  max-width: 100%; }
  @media (max-width: 768px) {
    .kv {
      margin-bottom: 60px;
      padding: 0; } }
  .kv .inner {
    /*
    display: flex;
    justify-content: space-between;
    margin-left: 111px;
*/
    position: relative; }
    .kv .inner .catch {
      position: absolute;
      z-index: 100;
      top: 50%;
      left: 10%;
      transform: translateY(-50%); }
      @media (max-width: 768px) {
        .kv .inner .catch {
          left: 25px;
          width: 65.10417vw; } }
      .kv .inner .catch > div:first-of-type {
        width: 271px; }
        @media (max-width: 768px) {
          .kv .inner .catch > div:first-of-type {
            width: 39.0625vw; } }
      .kv .inner .catch > div img {
        margin-bottom: 26px;
        width: 100%; }
        @media (min-width: 768px) and (max-width: 1366px) {
          .kv .inner .catch > div img {
            margin-bottom: 1.90337vw; } }
        @media (max-width: 768px) {
          .kv .inner .catch > div img {
            margin-bottom: 6.51042vw; } }
      .kv .inner .catch h1 {
        line-height: 94px;
        letter-spacing: 5px; }
        @media (min-width: 768px) and (max-width: 1366px) {
          .kv .inner .catch h1 {
            line-height: 6.88141vw;
            letter-spacing: 0.36603vw; } }
        @media (max-width: 768px) {
          .kv .inner .catch h1 {
            line-height: 9.63542vw;
            letter-spacing: 0; }
            .kv .inner .catch h1:first-of-type {
              margin-bottom: 1.82292vw; } }
        .kv .inner .catch h1 span {
          background: rgba(255, 255, 255, 0.8);
          display: inline-block;
          margin-bottom: 14px;
          padding-right: 3px; }
          @media (max-width: 768px) {
            .kv .inner .catch h1 span {
              margin-bottom: 1.02489vw; } }
  .kv .photo_area {
    height: 55.6369vw;
    overflow-y: hidden;
    position: relative;
    width: 62.22548vw;
    margin-left: auto; }
    @media (max-width: 768px) {
      .kv .photo_area {
        max-width: calc(100% - 25px);
        height: 100vw; } }
    .kv .photo_area .loop {
      margin-right: 20px;
      position: absolute;
      left: 0;
      width: calc((100% - 40px) / 3); }
      @media (max-width: 768px) {
        .kv .photo_area .loop {
          margin-right: 10px;
          width: calc((100% - 10px) / 2); } }
      .kv .photo_area .loop:nth-of-type(2) {
        left: calc(100% / 3); }
        @media (max-width: 768px) {
          .kv .photo_area .loop:nth-of-type(2) {
            margin-right: 0;
            left: calc((100% + 10px) / 2); } }
      .kv .photo_area .loop:nth-of-type(3) {
        margin-right: 0;
        left: calc(100% / 3 * 2); }
      .kv .photo_area .loop img {
        will-change: transform;
        height: auto;
        width: 100%; }
      .kv .photo_area .loop:nth-of-type(1) img,
      .kv .photo_area .loop:nth-of-type(3) img {
        animation: loop 100s -35s linear infinite; }
      .kv .photo_area .loop:nth-of-type(2) img {
        animation: loop2 100s -35s linear infinite; }
      @media (max-width: 768px) {
        .kv .photo_area .loop:nth-of-type(3) {
          display: none; } }

@keyframes loop {
  from {
    transform: translateY(0); }
  to {
    transform: translateY(-100%); } }

@keyframes loop2 {
  from {
    transform: translateY(-100%); }
  to {
    transform: translateY(0%); } }

.about {
  margin: 0 auto 140px; }
  @media (max-width: 768px) {
    .about {
      margin-bottom: 60px; } }
  .about .pc_top {
    display: flex;
    align-items: center;
    margin-bottom: 60px; }
    @media (max-width: 768px) {
      .about .pc_top {
        display: block; } }
    .about .pc_top h2 {
      margin-right: 78px; }
      @media (max-width: 768px) {
        .about .pc_top h2 {
          margin: 0 0 30px; } }
    .about .about_block {
      max-width: 800px;
      width: 100%;
      margin: 50px auto 0;
      scroll-margin-top: 80px; }
    .about .about_block p {
      text-align: center;
      margin-bottom: 20px;
      font-size: 18px; }
      @media (max-width: 768px) {
        .about .about_block p {
          font-size: 16px; }
      }
    .about .iframe_wrap {
      max-width: 800px;
      width: 100%;
      margin: auto;
      border-radius: 6px;
      box-shadow: 0 5px 40px rgba(0, 0, 0, 0.2);
      position: relative; }
      @media (max-width: 768px) {
        .about .iframe_wrap {
          max-width: 100%; } }
      .about .iframe_wrap:before {
        content: "";
        display: block;
        padding-top: 56.25%; }
      .about .iframe_wrap iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 10px; }
  .about .pc_bottom > a {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    @media (max-width: 768px) {
      .about .pc_bottom > a {
        display: block; } }
    .about .pc_bottom > a .img {
      max-width: 420px;
      margin-right: 60px; }
      @media (max-width: 768px) {
        .about .pc_bottom > a .img {
          max-width: 100%;
          margin-right: 0;
          margin-bottom: 30px; } }
      .about .pc_bottom > a .img img {
        width: 100%; }
    .about .pc_bottom > a .more {
      max-width: calc(100% - 420px);
      width: 100%;
      align-items: center;
      display: flex; }
      @media (max-width: 768px) {
        .about .pc_bottom > a .more {
          max-width: 100%; } }
      .about .pc_bottom > a .more > span {
        font-family: "Raleway", "MS PGothic", sans-serif;
        font-size: 28px;
        font-weight: bold;
        display: block;
        margin-right: 28px; }
        @media (max-width: 768px) {
          .about .pc_bottom > a .more > span {
            font-size: 16px;
            margin-right: 14px; } }
      .about .pc_bottom > a .more > svg {
        height: 46px;
        width: 46px; }
        @media (max-width: 768px) {
          .about .pc_bottom > a .more > svg {
            width: 30px;
            height: 30px; } }

.information { margin: 0 auto 150px; max-width: 1080px; width: 100%; }
@media (max-width: 1100px) {
  .information { padding: 0 20px; }
}
@media (max-width: 768px) {
  .information { margin: 0 auto 70px; }
}
.information h2 {margin-bottom: 50px;}
@media (max-width: 768px) {
  .information h2 { margin-bottom: 25px;}
}
.information li +li{ margin-top: 20px;}
.information li a { display: flex; font-weight: 500;}
@media (max-width: 768px) {
  .information li a { display: block;font-size: 14px;}
}
.information li .date { color: #22A6E6; font-weight: 700; display: block; width: 120px; letter-spacing: 0.05em;}
@media (max-width: 768px) {
  .information li .date { width: 100%; margin-bottom: 5px;}
}
.information li .txt {display: block;width: calc(100% - 120px);}
@media (max-width: 768px) {
  .information li .txt { width: 100%;}}

.people {
  margin: 0 auto 140px;
  position: relative;
  max-width: 100%; }
  @media (max-width: 768px) {
    .people {
      margin-bottom: 60px;
      padding: 0; } }
  .people h2 {
    margin-bottom: 0; }
    @media (max-width: 768px) {
      .people h2 {
        margin: 0 25px 30px; } }
  .people .area {
    background: #F3F8FA;
    height: 100%;
    max-width: 1045px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0; }
    @media (max-width: 768px) {
      .people .area {
        max-width: 80%; } }
  .people .inner {
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    padding: 140px 0; }
    @media (max-width: 768px) {
      .people .inner {
        max-width: 100%;
        padding: 50px 0; } }
  .people .peopleSlider {
    display: flex;
    position: relative;
    margin-bottom: 4px; }
    @media (max-width: 768px) {
      .people .peopleSlider {
        padding-left: 25px; } }
  .people .person {
    margin-right: 60px;
    max-width: 320px;
    width: calc((100% - 120px ) / 3); }
    @media (max-width: 768px) {
      .people .person {
        max-width: 200px;
        margin-right: 30px;
        width: calc((100% - 60px ) / 3); } }
    .people .person:nth-of-type(1) {
      padding-top: 88px; }
      @media (max-width: 768px) {
        .people .person:nth-of-type(1) {
          padding-top: 0; } }
    .people .person:nth-of-type(2) {
      padding-top: 48px; }
      @media (max-width: 768px) {
        .people .person:nth-of-type(2) {
          padding-top: 0; } }
    .people .person:nth-of-type(3) {
      padding-top: 8px; }
      @media (max-width: 768px) {
        .people .person:nth-of-type(3) {
          padding-top: 0; } }
    .people .person:last-of-type {
      margin-right: 0; }
    .people .person .person_img {
      margin-bottom: 30px;
      position: relative; }
      @media (max-width: 768px) {
        .people .person .person_img {
          margin-bottom: 15px; } }
      .people .person .person_img > img {
        width: 100%; }
      .people .person .person_img .name_block {
        position: absolute;
        bottom: 30px;
        left: 0;
        padding: 0 30px; }
        @media (max-width: 768px) {
          .people .person .person_img .name_block {
            bottom: 10%;
            padding: 0 14px; } }
        .people .person .person_img .name_block > p {
          color: #fff; }
          .people .person .person_img .name_block > p.name {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px; }
            @media (max-width: 768px) {
              .people .person .person_img .name_block > p.name {
                font-size: 14px; } }
          .people .person .person_img .name_block > p:nth-of-type(2) {
            font-size: 14px; }
            @media (max-width: 768px) {
              .people .person .person_img .name_block > p:nth-of-type(2) {
                font-size: 12px; } }
      .people .person .person_img .career {
        background: #22a6e6;
        color: #fff;
        font-size: 14px;
        padding: 10px 13px;
        position: absolute;
        top: 0;
        right: 0; }
        @media (max-width: 768px) {
          .people .person .person_img .career {
            font-size: 12px; } }
    .people .person .msg {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 1em;
      line-height: 1.8; }
      @media (max-width: 768px) {
        .people .person .msg {
          font-size: 14px; } }
    .people .person .tags {
      display: flex;
      flex-wrap: wrap; }
      @media (max-width: 768px) {
        .people .person .tags {
          margin-right: -5px; } }
      .people .person .tags span {
        display: block;
        font-size: 12px;
        border: solid 1px #E5E5E5;
        border-radius: 4px;
        padding: 4px 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        background: #fff;
        /**
        @include BP_PC{
          font-size:VW(12,pc);
          padding:VW(4,pc) VW(10,pc);
          margin-right:VW(10,pc);
          margin-bottom:VW(10,pc);
        }
**/ }
        @media (max-width: 768px) {
          .people .person .tags span {
            padding: 4px 6px;
            margin-right: 5px;
            margin-bottom: 5px; } }
        .people .person .tags span svg {
          width: 11px;
          height: 11px;
          margin-right: 8px;
          fill: #22a6e6; }
          @media (min-width: 768px) and (max-width: 1366px) {
            .people .person .tags span svg {
              width: 0.80527vw;
              height: 0.80527vw; } }
          @media (max-width: 768px) {
            .people .person .tags span svg {
              margin-right: 4px; } }
  .people .more {
    display: flex;
    justify-content: flex-end; }
    @media (max-width: 768px) {
      .people .more {
        padding-right: 25px; } }
    .people .more > a {
      display: block;
      max-width: 240px;
      width: 100%; }
      @media (max-width: 768px) {
        .people .more > a {
          max-width: 150px; } }
      .people .more > a > div {
        align-items: center;
        display: flex;
        justify-content: space-between;
        padding-bottom: 20px;
        position: relative; }
        @media (max-width: 768px) {
          .people .more > a > div {
            padding-bottom: 15px; } }
        .people .more > a > div::after {
          content: "";
          background: #333637;
          bottom: 0;
          left: 0;
          height: 1px;
          width: 100%;
          position: absolute; }
        .people .more > a > div span {
          display: inline-block;
          font-family: "Roboto", sans-serif;
          font-weight: bold;
          margin-right: 40px; }
          @media (max-width: 768px) {
            .people .more > a > div span {
              margin-right: 20px; } }
        .people .more > a > div svg {
          width: 46px;
          height: 46px; }
          @media (max-width: 768px) {
            .people .more > a > div svg {
              width: 30px;
              height: 30px; } }

.business {
  margin: 0 auto;
  max-width: 960px;
  width: 100%; }
  .business h2 {
    margin-bottom: 68px; }
    @media (max-width: 768px) {
      .business h2 {
        margin-bottom: 30px; } }
  .business div {
    display: flex;
    flex-wrap: wrap; }
  .business a {
    max-width: 300px;
    width: calc((100% - 60px) / 3);
    margin: 0 30px 40px 0; }
    @media (max-width: 768px) {
      .business a {
        max-width: 100%;
        width: calc((100% - 15px) / 2);
        margin: 0 15px 15px 0; } }
    .business a:nth-of-type(3n) {
      margin-right: 0; }
    .business a:nth-last-of-type(-n+3) {
      margin-bottom: 0; }
    @media (max-width: 768px) {
      .business a:nth-of-type(3n) {
        margin-right: 15px; }
      .business a:nth-last-of-type(-n+3) {
        margin-bottom: 15px; }
      .business a:nth-of-type(2n) {
        margin-right: 0; }
      .business a:nth-last-of-type(-n+2) {
        margin-bottom: 0; } }
    .business a img {
      width: 100%; }

.referral {
  margin: 140px auto 0;
  max-width: 960px;
  width: 100%; }
  .referral h2 {
    margin-bottom: 68px; }
    @media (max-width: 768px) {
      .referral h2 {
        margin-bottom: 30px; } }
  .referral div {
    display: flex;
    flex-wrap: wrap; }
  .referral a {
    max-width: 300px;
    width: calc((100% - 60px) / 3);
    margin: 0 30px 40px 0; }
    @media (max-width: 768px) {
      .referral a {
        max-width: 100%;
        width: calc((100% - 15px) / 2);
        margin: 0 15px 15px 0; } }
    .referral a:nth-of-type(3n) {
      margin-right: 0; }
    .referral a:nth-last-of-type(-n+3) {
      margin-bottom: 0; }
    @media (max-width: 768px) {
      .referral a:nth-of-type(3n) {
        margin-right: 15px; }
      .referral a:nth-last-of-type(-n+3) {
        margin-bottom: 15px; }
      .referral a:nth-of-type(2n) {
        margin-right: 0; }
      .referral a:nth-last-of-type(-n+2) {
        margin-bottom: 0; } }
    .referral a img {
      width: 100%; }
#bottomFloting {
  display: none; }
  @media (max-width: 768px) {
    #bottomFloting {
      display: block;
      width: 100%;
      padding: 10px 0;
      background: rgba(0, 0, 0, 0.3);
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 199; }
      #bottomFloting > a {
        display: block;
        width: 80%;
        margin: 0 auto; }
        #bottomFloting > a > img {
          width: 100%; } }

/*# sourceMappingURL=../../scss/top.css.map */