@charset "utf-8";

/* ==================================================================
 * common
 * ================================================================== */

:root {
  --width-s: min(800px, 100%);
  --width-m: min(1080px, 100%);
  --width-l: min(1240px, 100%);

  --color-base--bk: #222;
  --color-base--bl: #002B41;

  --color-wh: #fff;
  --color-gry: #e2e2e2;
  --color-mgry: #cdcdcd;
  --color-lgry: #F4F4F4;
  --color-lgrn: #E1EDEB;
  --color-lbg: #FAF6F0;

  --color-bl: #143F83;
  --color-sbl: #058FD2;
  --color-lbl: #BECEE3;
  --color-dbl: #002B41;
  --color-rd: #E96758;

  --size-s: calc(var(--size-base) * 1.6); /* 14px */
  --size-m: calc(var(--size-base) * 2);  /* 16px */
  --size-l: calc(var(--size-base) * 2.5);  /* 20px */
  --size-2l: calc(var(--size-base) * 3);  /* 24px */
  --size-3l: calc(var(--size-base) * 3.5);  /* 28px */
  --size-4l: calc(var(--size-base) * 5);  /* 40px */
  --size-5l: calc(var(--size-base) * 7);  /* 56px */

  --size-min: calc(var(--size-base) / 2);
  --size-max: calc(var(--size-base) * 10);

  --lheight-xs: 1.2;
  --lheight-s: 1.4;
  --lheight-m: 1.58;
  --lheight-base: 1.75;

  --family-en: "Anton", "Noto Sans JP", sans-serif;
  --family-ja--zenkaku: "Zen Kaku Gothic New", sans-serif;
}

body {
  overflow-y: scroll;
  line-height: var(--lheight-base);
  color: var(--color-base--bk);
  font-size: var(--size-m);
  font-weight: 400;
  font-family: "Noto Sans JP", sans-serif;
  text-align: justify;
}
a {
  color: inherit;
  text-decoration: none;
  .fa-solid {
    display: inline-block;
    margin-left: 0.5em;
  }
}
li {
  list-style: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
picture {
  display: block;
}
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
}

/* title ----------------------------- */
*[class^="m-title"],
.m-text--desc {
  color: var(--color-base--bl);
  font-weight: 700;
}
*[class^="m-title"]:not(.m-title--m),
.m-text--desc {
  line-height: var(--lheight-s);
  font-family: var(--family-ja--zenkaku);
}
.m-title--main {
  margin-bottom: var(--size-base);
  font-weight: 700;
  text-align: center;
  & .--en,
  & .--ja {
    display: block;
  }
  & .--en {
    margin-bottom: var(--size-min);
    letter-spacing: 0.2em;
    color: var(--color-sbl);
    font-size: calc(var(--size-base) * 1.4);
  }
  & .--ja {
    letter-spacing: 0.1em;
    font-size: var(--size-l);
  }
  &.--line {
    &::before,
    &::after {
      content: "";
      position: absolute;
      left: 50%;
      display: block;
      background: var(--color-sbl);
      transform: translateX(-50%);
    }
    &::before {
      top: calc(var(--size-base) * 5 * -1);
      width: 1px;
      height: var(--size-max);
    }
    &::after {
      top: calc(var(--size-base) * 5 * -1 - 5px);
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
  }
}
.m-title--sub {
  font-size: var(--size-3l);
  text-align: center;
}
.m-title--ml,
.m-title--l {
  margin-bottom: var(--size-m);
  & + p {
    margin-top: calc(var(--size-base) * -1);
  }
}
.m-title--m {
  &.--line {
    margin: var(--size-m) 0 var(--size-min);
    padding-left: var(--size-base);
    border-left: var(--size-min) solid var(--color-base--bl);
  }
}
.m-title--ml {
  font-size: calc(var(--size-base) * 2.25);
}
.m-title--l {
  font-size: var(--size-l);
  &.--line {
    padding-left: calc(var(--size-base) * 1.5);
    border-left: var(--size-base) solid var(--color-bl);
  }
}
.m-title--2l { 
  margin-bottom: var(--size-m);
  font-size: var(--size-2l);
}
.m-title--3l { 
  margin-bottom: var(--size-m);
  font-size: var(--size-3l);
}
.m-text--desc {
  text-align: center;
}

/* js
==================================================== */
.js-modal {
  overflow: visible;
  width: min(800px, calc(100% - var(--size-2l)));
  max-width: none;
  height: auto;
  max-height: calc(100dvh - var(--size-2l));
  margin: auto;
  padding: 0;
  border: none;
  &::backdrop {
    background: rgba(0, 0, 0, 0.8);
  }
  & .js-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-wh);
    font-size: var(--size-2l);
    border: none;
    background: none;
    cursor: pointer;
    outline: none;
    z-index: 100;
  }
  & .js-modal__inner {
    overflow-y: scroll;
    position: relative;
    height: 100%;
    & .m-title--modal {
      margin-bottom: var(--size-m);
      font-size: var(--size-3l);
      text-align: center;
    }
  }
}
.js-modal__inner::-webkit-scrollbar {
  width: var(--size-base);
}
.js-modal__inner::-webkit-scrollbar-thumb {
  background: var(--color-mgry);
}
.js-modal__inner::-webkit-scrollbar-track {
  background: var(--color-lgry);
}
.js-modal[open],
.js-modal[open]::backdrop {
  animation: fadeIn 0.2s ease normal;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.js-modal.is-hide,
.js-modal.is-hide::backdrop {
  animation: fadeOut 0.2s ease normal;
}
@keyframes fadeOut {
  to { opacity: 0; }
}

body.is-noscroll {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

.hs-form-fd90d3d2-8bdd-4857-9a5f-0e792a09d68a_f4831abf-52fb-47d2-8547-50602413773a .hs-button {
  margin: 100px;
}
.hs-richtext.hs-main-font-element {
  color: var(--color-base--bk);
  font-size: var(--size-l) !important;
  text-align: center;
}

.js-modal__button.m-link--opacity {
  display: flex !important;
  align-items: center; 
  justify-content: center;
  letter-spacing: 0.1em;
  color: var(--color-wh);
  font-weight: 500;
  &::before {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background: no-repeat 50% 50%;
    background-size: contain;
  }
  &.--download {
    background: var(--color-sbl);
    &::before {
      content: "";
      background-image: url("/assets2/images/corporate/index/ico_download.svg");
    }
  }
  &.--contact {
    background: var(--color-rd);
    &::before {
      content: "";
      background-image: url("/assets2/images/corporate/index/ico_contact.svg");
    }
  }
}


/* header / footer
==================================================== */
/* header ----------------------------- */
.header--nav {
  & .nav--menu,
  & .nav--cta {
    position: fixed;
    z-index: 100;
  }
  & .nav--menu,
  & .nav--menu .m-list {
    display: flex;
  }
  & .nav--menu {
    top: 0;
    left: 0;
    align-items: center; 
    justify-content: space-between;
    width: 100%;
    & .m-link--opacity {
      display: block;
      padding: var(--size-base) var(--size-l);
      font-family: var(--family-ja--zenkaku);
    }
  }
}

/* footer ----------------------------- */
.footer {
  background: var(--color-dbl);
  & a {
    color: var(--color-wh);
  }
  & .m-link--line,
  & .footer--copyright {
    font-size: var(--size-s);
  }
  & .footer--nav > ul > .__item ul {
    line-height: 1.75;
  }
  & .footer--copyright {
    margin-top: var(--size-base);
    color: rgba(255, 255, 255, 0.6);
  }
}


.--download-contact {
  background: var(--color-lbl);
  & .download-contact--nav a {
    position: relative;
    display: block;
    padding: 0 var(--size-l) var(--size-l);
    border: 1px solid var(--color-bl);
    border-radius: var(--size-m);
    background: var(--color-lbg);
    & .m-title--3l {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: var(--size-base);
      transition: color 0.2s;
      &::after {
        content: "\f061";
        display: flex;
        align-items: center;
        justify-content: center;  
        width: calc(var(--size-base) * 5);
        height: calc(var(--size-base) * 5);
        margin-left: var(--size-m);
        font-size: var(--size-m);
        line-height: 1;      
        color: #fff;
        font-weight: 700;
        font-family: "Font Awesome 7 free";
        background: var(--color-bl);
        border-radius: 50%;
        transition: background 0.2s;
      }
      &:hover {
        color: var(--color-sbl);
      }
      & + p {
        text-align: center;
      }
    }
    &:hover {
      & .m-title--3l {
        color: var(--color-sbl);
        &::after {
          background: var(--color-sbl);
        }
      }
    }
    & .__img {
      width: 50%;
      margin: calc(var(--size-4l) * -1) auto var(--size-l);
    }
  }
}


/* ページ別
====================================================*/
body:not(.index) {
  & .header .header--title {
    background: var(--color-lgry);
  }
  & .header--nav .nav--menu {
    justify-content: flex-start;
    line-height: var(--lheight-m);
    color: var(--color-base--bk);
    font-weight: 500;
    background: var(--color-wh);
    border-bottom: 1px solid var(--color-gry);
    & .m-name {
      display: inline-block;
      margin: 0 auto 0 var(--size-m);
      font-size: var(--size-s);
    }
  }
  & .m-list--cta {
    display: flex;
    & li {
      overflow: hidden;
      width: 12em;
      border-radius: var(--size-base);
      & + li {
        margin-left: var(--size-base);
      }
      & .m-link--opacity::before {
        margin-right: var(--size-min);
      }
    }
  }
  & .--download-contact {
    & .m-title--main {
      &::before,
      &::after {
        display: none;
      }
    }
  }
}

body.corporate {
  .m-list--cta {
    & .m-link--opacity {
      &.--download {
        background: var(--color-sbl);
      }
      &.--contact {
        background: var(--color-rd);
      }
    }
  }
}




/* レスポンシブ
====================================================*/
@media screen and (min-width: 768px) {
  :root {
    --size-base: 8px;
  }

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

  .l-area {
    display: flex;
    justify-content: space-between;
    & .m-title--main {
      text-align: left;
      & .--ja {
        letter-spacing: 0;
        font-size: var(--size-3l);
      }
    }
  }
  .l-flex {
    display: flex;
    justify-content: space-between;
    & > .l-flex__title {
      width: 40%;
    }
    & > .l-flex__detail {
      width: 60%;
    }
  }
  .l-section {
    padding-left: var(--size-m);
    padding-right: var(--size-m);
    padding-bottom: calc(var(--size-max) * 1.5);
  }
  .l-section--m {
    margin-top: var(--size-max);
    padding: var(--size-max);
  }
  .l-section--b {
    padding: var(--size-4l);
  }
  .l-inner--m {
    & .l-area__title {
      width: calc(var(--width-m) - var(--width-s));
    }
    & .l-area__content {
      width: var(--width-s);
    }
  }
  .l-inner--l {
    & .l-area__title {
      width: 40%;
    }
    & .l-area__content {
      width: 60%;
    }
  }

  .m-title--sub {
    margin-bottom: var(--size-base);
  }
  .m-text--desc {
    margin-bottom: var(--size-5l);
    font-size: var(--size-4l);
  }
  .m-box--flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    & .m-box--flex__img,
    & .m-box--flex__text {
      width: calc(50% - var(--size-m));
    }
  }
  .m-list--item02 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    & .__item {
      width: calc(50% - var(--size-min));
    }
    &.--pct .__item {
      align-items: center;
    }
  }

  .m-link--opacity {
  transition: opacity 0.2s;
    &:hover {
      opacity: 0.6;
    }
  }
  .m-link--line:hover {
    opacity: 1;
    text-decoration: none;
  }

  *[class*="s-bg--"] {
    padding-top: calc(var(--size-base) * 9);
  }
  *[class*="s-bg--"] + .l-section:not([class*="s-bg--"]) {
    padding-top: calc(var(--size-max) * 1.5);
  }

  .js-modal {
    & .js-modal__inner {
      padding: var(--size-4l);
    }
    & .js-modal__close {
      position: absolute;
      top: -0.25em;
      right: -2em;
      width: 1.5em;
      height: 1.5em;
      transition: opacity 0.2s;
      &:hover {
        opacity: 0.7;
      }
    }
  }

  .m-logo {
    width: 196px;
  }
  .header--nav {
    & .nav--menu {
      padding: var(--size-m) var(--size-3l);
      & .m-list {
        align-items: center;
        & .__item.--qqtop {
          position: relative;
          &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 1px;
            height: var(--size-m);
            transform: translateY(-50%);
          }
        }
      }
    }
  }
  .footer {
    padding: var(--size-max) 0;
    & .l-inner--m,
    & .footer--nav > ul {
      display: flex;
      justify-content: space-between;
    }
    & .footer--nav > ul > .__item {
      width: 33.33%;
      &:last-of-type {
        padding-left: var(--size-4l);
        border-left: 1px solid rgba(255, 255, 255, 0.3);
      }
    }
  }

  & .--download-contact {
    padding: var(--size-5l) 0 var(--size-max);
    & .download-contact--nav {
      display: flex;
      justify-content: space-between;
      & a {
        width: calc(50% - var(--size-base));
      }
    }
  }

  /* not index ----------------------------- */
  body:not(.index) {
    padding-top: 88px;
    & .header--nav {
      & .nav--menu {
        & .m-name {
          margin: 0 auto 0 var(--size-m);
          font-size: var(--size-s);
          font-weight: 400;
        }
        & .__item {
          &.--qqtop::before {
            background: rgba(0, 0, 0, 0.1);
          }
        }
      }
      & .nav--cta {
        display: none;
      }
    }
    & .--otherpost .c-btn--common {
      border-radius: var(--size-base);
      background: var(--color-sbl);
    }
  }
}

@media screen and (max-width: 767px) {
  :root {
    --size-base: 7px;
  }
  .is-only--pc {
    display: none !important;
  }

  /* header / footer ----------------------------- */
  .header--nav {
    & .nav--menu {
      height: 60px;
      padding: 0 var(--size-m);
      & .m-logo,
      & .m-button {
        position: relative;
        z-index: 20;
      }
      & .m-logo {
        width: 140px;
      }
      & .m-button {
        display: block;
        width: 50px;
        height: 50px;
        background: var(--color-bl);
        transition: all 0.2s;
        &::before,
        &::after {
          display: block;
          line-height: 1;
          color: var(--color-wh);
          font-weight: 700;
        }
        &::before {
          content: "MENU";
          margin-bottom: var(--size-min);
          font-size: 10px;
          font-family: var(--family-ja--zenkaku);
        }
        &::after {
          content: "\f0c9";
          font-size: calc(var(--size-3l) * 1.1);
          font-family: "Font Awesome 7 free";
        }
        &.is-open {
          background: var(--color-wh);
          &::before,
          &::after {
            color: var(--color-bl);
          }
          &::before {
            content: "CLOSE";
          }
          &::after {
            content: "\f00d";
          }
          & + .m-list {
            visibility: visible;
            opacity: 1;
          }
        }
      }
      & .m-list {
        position: fixed;
        left: 0;
        top: 0;
        flex-wrap: wrap;
        padding-top: calc(var(--size-m) * 2 + 50px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        background: var(--color-base--bl);
        visibility: hidden;
        opacity: 0;
        transition: all 0.2s;
        & .__item {
          color: var(--color-wh);
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          &:not(.--qqtop) {
            width: 50%;
            & .m-link--opacity::after {
              content: "\f107";
            }
          }
          &:nth-of-type(even) {
            border-left: 1px solid rgba(255, 255, 255, 0.1);
          }
          &.--qqtop {
            width: 100%;
            & .m-link--opacity::after {
              content: "\f35d";
            }
          }
          & .m-link--opacity {
            position: relative;
            &::after {
              position: absolute;
              top: 50%;
              right: var(--size-m);
              display: flex;
              align-items: center;
              justify-content: center;
              width: 1em;
              height: 1em;
              list-style: 1;
              font-weight: 700;
              font-family: "Font Awesome 7 free";
              text-align: center;
              transform: translateY(-50%);
            }
          }
        }
      }
      & .m-list--cta {
        display: none;
      }
    }
    & .nav--cta {
      bottom: 0;
      display: flex;
      width: 100%;
      & .m-link--opacity {
        width: 50%;
        height: 44px;
        &::before {
          margin-right: calc(var(--size-base) / 2);
        }
      }
    }
  }
  .footer {
    position: relative;
    padding: var(--size-5l) 0 var(--size-max);
    & .l-inner--m {
      padding-bottom: var(--size-4l);
    }
    & .m-logo {
      width: 160px;
      margin-bottom: var(--size-m);
    }
    & .footer--copyright {
      position: absolute;
      bottom: var(--size-max);
    }
    & .footer--nav > ul {
      & > .__item + .__item {
        margin-top: var(--size-2l);
        padding-top: var(--size-2l);
        border-top: 1px solid rgba(255, 255, 255, 0.3);
      }
      & .m-list {
        display: flex;
        flex-wrap: wrap;
        & .__item {
          width: 50%;
        }
      }
    }
  }

  /* 汎用パーツ ----------------------------- */
  .l-area__content {
    margin-top: var(--size-2l);
  }
  .l-section {
    padding-bottom: var(--size-5l);
  }
  .l-section--m {
    margin: var(--size-5l) calc(var(--size-m) * -1) 0;
    padding-bottom: var(--size-3l);
  }
  .l-section--b {
    padding: var(--size-2l) var(--size-m);
  }
  .l-section--m,
  *[class*="l-inner--"] {
    padding-left: var(--size-m);
    padding-right: var(--size-m);
  }
  *[class*="s-bg--"] {
    padding-top: var(--size-5l);
  }
  *[class*="s-bg--"] + .l-section:not([class*="s-bg--"]) {
    padding-top: var(--size-5l);
  }

  .m-title--sub {
    margin-bottom: var(--size-m);
  }
  .m-text--desc {
    margin-bottom: var(--size-4l);
    font-size: var(--size-3l);
  }
  .m-box--flex .m-box--flex__img {
    margin-bottom: var(--size-m);
  }
  .m-list--item02 {
    align-items: flex-start;
    &.--pct .__item {
      align-items: flex-start;
    }
  }
  .m-dlist {
    & .__name,
    & .__detail {
      margin-bottom: var(--size-base);
    }
  }

  .js-modal {
    & .js-modal__inner {
      padding: var(--size-4l);
    }
    & .js-modal__close {
      position: fixed;
      top: 0;
      right: 0;
      width: 2em;
      height: 2em;
      background: var(--color-bl);
    }
  }
  .js-modal .js-modal__inner {
    padding: var(--size-2l) var(--size-m);
  }
  .js-tab .js-tab__link {
    width: 13em;
    font-size: var(--size-s);
  }

  & .--download-contact {
    padding: var(--size-5l) 0;
    & .download-contact--nav {
      margin-top: var(--size-max);
      & a + a {
        margin-top: calc(var(--size-5l) - var(--size-min));
      }
    }
  }

  body:not(.index) {
    padding-top: 60px;
    & .main {
      *[class*="l-section"],
      *[class*="l-inner"] {
        padding: 0;
      }
    }
    & .footer .l-inner--m {
      position: static;
    }
  }
  
}