@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Zen+Maru+Gothic&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
/*********************************
 *
 * COMMON
 *
 *********************************/
body {
  color: #3e3d3d;
  font-family: "Noto Sans JP", sans-serif;
  font-size: min(1.375vw, 19px);
  font-weight: 500; }
  @media screen and (max-width: 768px) {
    body {
      font-size: min(3vw, 16px);
      -webkit-text-size-adjust: 100%; }
      body .pc {
        display: none !important; } }
  @media screen and (min-width: 769px) {
    body a {
      transition: 0.3s; }
      body a:hover {
        opacity: 0.8; }
    body .sp {
      display: none !important; } }
  body a {
    text-decoration: none; }
  body img {
    width: 100%;
    height: auto; }

/* font */
strong {
  font-weight: 900; }

.en {
  font-family: "Jost", sans-serif;
  font-weight: 400; }

/* fadeUp */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@-webkit-keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
.fadeUpTrigger {
  opacity: 0; }

/* fadeDown */
.fadeDown {
  animation-name: fadeDownAnime;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  opacity: 0; }

@-webkit-keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
.fadeDownTrigger {
  opacity: 0; }

/*********************************
 *
 * HEADER
 *
 *********************************/
header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  transition: 0.3s;
  z-index: 10; }
  header .h_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 100px);
    height: 70px;
    margin: 0 auto; }
    @media screen and (max-width: 768px) {
      header .h_inner {
        width: calc(100% - 40px); } }
  header .h_logo {
    width: 13.8%;
    max-width: 184px; }
    @media screen and (max-width: 768px) {
      header .h_logo {
        width: 35.8%;
        max-width: 134px; } }
  header ul.h_nav {
    display: flex;
    align-items: center;
    font-size: 110%; }
    header ul.h_nav li {
      margin-left: 2em; }
      header ul.h_nav li.contact a {
        padding: 0.3em 2em;
        background: #f4f5f5;
        order: 2px solid transparent;
        border-radius: 2em;
        color: #91a3ba;
        transition: 0s; }
        header ul.h_nav li.contact a span {
          position: relative;
          padding: 0 0 0 1em; }
          header ul.h_nav li.contact a span::before {
            position: absolute;
            display: block;
            content: "";
            width: 0.3em;
            height: 0.3em;
            background: #91a3ba;
            border-radius: 50%;
            left: 1em;
            top: calc(50% - 0.15em);
            left: 0.2em; }
    header ul.h_nav a {
      color: #fff; }
  header .h_btn {
    position: relative;
    width: 40px;
    height: 40px; }
    header .h_btn span {
      position: absolute;
      width: 22px;
      height: 2px;
      left: 9px;
      background: #91a3ba;
      transition: 0.1s; }
      header .h_btn span:first-child {
        top: calc(50% - 7px); }
      header .h_btn span:nth-child(2) {
        top: 50%; }
      header .h_btn span:last-child {
        top: calc(50% + 7px); }
    header .h_btn.open span {
      left: 8px; }
      header .h_btn.open span:first-child {
        top: 50%;
        transform: rotate(40deg); }
      header .h_btn.open span:nth-child(2) {
        opacity: 0; }
      header .h_btn.open span:last-child {
        top: 50%;
        transform: rotate(-40deg); }
  header.scroll {
    background-color: white;
    box-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.1); }
    header.scroll ul.h_nav li.contact a {
      padding: calc(0.3em - 2px) calc(2em - 2px);
      background: none;
      border: 2px solid #91a3ba;
      color: #91a3ba; }
    header.scroll ul.h_nav a {
      color: #91a3ba; }

/*********************************
 *
 * NAV
 *
 *********************************/
nav {
  overflow-y: auto;
  display: none;
  position: fixed;
  width: 100%;
  height: 110%;
  padding: 70px 0;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 5; }
  nav ul {
    width: calc(100% - 40px);
    margin: 0 auto; }
    nav ul li {
      margin-top: 1.2rem; }
    nav ul .en {
      display: block;
      font-size: 300%;
      font-weight: 500; }
    nav ul a {
      color: #91a3ba; }
  nav .btn {
    width: calc(100% - 40px);
    margin: 3.8rem auto 0 auto; }

/*********************************
 *
 * mimg
 *
 *********************************/
.mimg {
  background: url("../images/mttl_bg.jpg") top center no-repeat;
  background-size: cover; }
  @media screen and (max-width: 768px) {
    .mimg {
      background: url("../images/mttl_bg.jpg") left top no-repeat;
      background-size: cover; } }
  .mimg .inner {
    width: 80%;
    max-width: 894px;
    margin: 0 auto; }
    @media screen and (max-width: 768px) {
      .mimg .inner {
        width: calc(100% - 40px); } }
  .mimg h1 {
    padding: 3.2em 0 1.3em 0;
    color: #91a3ba;
    font-size: 200%;
    font-weight: 500; }
    @media screen and (max-width: 768px) {
      .mimg h1 {
        padding: 3.3em 0 1.4em 0;
        font-size: 220%; } }
    .mimg h1 span {
      position: relative;
      padding: 0 0 0 0.8em; }
      @media screen and (max-width: 768px) {
        .mimg h1 span {
          padding: 0 0 0 0.7em; } }
      .mimg h1 span::before {
        position: absolute;
        display: block;
        content: "";
        width: 0.24em;
        height: 0.24em;
        top: calc(50% - 0.12em);
        left: 0;
        background: #91a3ba;
        border-radius: 50%; }
        @media screen and (max-width: 768px) {
          .mimg h1 span::before {
            width: 0.2em;
            height: 0.2em;
            top: calc(50% - 0.1em);
            font-size: 130%; } }

/*********************************
 *
 * MAIN
 *
 *********************************/
main p {
  padding-top: 1em; }
  @media screen and (max-width: 768px) {
    main p {
      padding-top: 1.5em; } }
main .inner {
  width: 80%;
  max-width: 894px;
  margin: 0 auto; }
  @media screen and (max-width: 768px) {
    main .inner {
      width: 88%; } }
main .jp_ttl {
  padding: 1.3rem 0 0 0;
  color: #BBC7D0;
  font-weight: 600; }
  @media screen and (max-width: 768px) {
    main .jp_ttl {
      padding: 0.7rem 0 0 0;
      font-size: 120%; } }

/*********************************
 * cmn_contact
 *********************************/
.cmn_contact {
  padding: 7rem 0;
  background: url("../images/top/concept_bg.jpg") top right no-repeat;
  background-size: cover; }
  .cmn_contact .btn {
    width: 60%;
    max-width: 524px;
    margin: 0 auto; }
    @media screen and (max-width: 768px) {
      .cmn_contact .btn {
        width: 100%; } }

/*********************************
 *
 * FOOTER
 *
 *********************************/
footer {
  padding: 5.5rem 0 3rem 0; }
  @media screen and (max-width: 768px) {
    footer {
      padding: 4rem 0 1.5rem 0; } }
  footer .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    max-width: 1122px;
    margin: 0 auto; }
    @media screen and (max-width: 768px) {
      footer .inner {
        display: block; } }
  footer .f_logo {
    width: 26.8%;
    max-width: 300px; }
    @media screen and (max-width: 768px) {
      footer .f_logo {
        width: 90%;
        margin: 2rem auto 0 auto; } }
  footer ul {
    display: flex; }
    @media screen and (max-width: 768px) {
      footer ul {
        justify-content: space-between;
        font-size: 170%; } }
    footer ul li {
      margin: 0 2em 0 0; }
      @media screen and (max-width: 768px) {
        footer ul li {
          margin: 0; } }
    footer ul a {
      position: relative;
      padding-left: 1em;
      color: #91a3ba; }
      footer ul a::after {
        position: absolute;
        display: block;
        content: "";
        width: 0.3em;
        height: 0.3em;
        background: #91a3ba;
        border-radius: 50%;
        left: 1em;
        top: calc(50% - 0.15em);
        left: 0.2em; }
  footer #copyright {
    padding-top: 4.5rem;
    color: #91a3ba;
    font-size: 80%;
    font-weight: 600;
    text-align: center; }
    @media screen and (max-width: 768px) {
      footer #copyright {
        padding-top: 3.5rem;
        font-size: 130%; } }