body {
   font-family: "Noto Sans JP", "Hiragino Sans", "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
   font-size: clamp(14px, 0.187vw + 13.29px, 16px);
   font-weight: 500;
   line-height: 2;
   letter-spacing: .05em;
   color: #5F5C71;
}

/* 全体＋スマホ版メニュー背景 */
body::before,
.drawer::before {
   content: '';
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url(/image/bg.svg);
   background-repeat: repeat;
   background-size: 100%;
   z-index: -2;
   /* 一番下 */
}

html {
   scroll-behavior: smooth;
}

@media screen and (max-width:700px) {
   body {
      line-height: 1.8;
   }
}

/* メニュー展開時にbodyのスクロールを止める */
body.is-fixed {
   overflow: hidden;
}

.gnav__list,
.mv__title__inner p,
.drawer__en,
.skill__title,
.workpage__title,
.other-works__en {
   font-family: "futura-pt", sans-serif;
   font-style: normal;
}

.ticker__inner span,
.about__subtitle {
   font-family: "futura-pt-bold", sans-serif;
   font-weight: 700;
   font-style: normal;
}


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

.wrapper-l {
   max-width: 1360px;
   width: 94%;
   margin-left: auto;
   margin-right: auto;
}

@media screen and (max-width:700px) {
   .wrapper-l {
      width: 89%;
   }
}

.wrapper-m {
   max-width: 1280px;
   width: 89%;
   margin-left: auto;
   margin-right: auto;
}

@media screen and (max-width: 700px) {
   .wrapper-m {
      width: 100%;
   }
}

.wrapper-s {
   max-width: 1120px;
   margin-left: auto;
   margin-right: auto;
}

.line-top {
   border-top: 1px solid #5F5C71;
}

.line-bottom {
   border-bottom: 1px solid #5F5C71;
}

.line-right {
   border-right: 1px solid #5F5C71;
}

.line-left {
   border-left: 1px solid #5F5C71;
}

@media screen and (max-width:700px) {
   .line-top {
      border-top: .6px solid #5F5C71;
   }

   .line-bottom {
      border-bottom: .6px solid #5F5C71;
   }

   .line-right {
      border-right: .6px solid #5F5C71;
   }

   .line-left {
      border-left: .6px solid #5F5C71;
   }

   .sp__line-top {
      border-top: .6px solid #5F5C71;
   }
}

/***************************************
ボタン
****************************************/
.button {
   display: inline-block;
   padding: 0 .12em .27em;
   font-size: clamp(16px, 0.187vw + 15.2px, 18px);
   line-height: 1;
   border-bottom: 1px solid #5F5C71;
}

@media screen and (max-width:700px) {
   .button {
      border-bottom: .8px solid #5F5C71;
   }
}

.button__inner {
   display: flex;
   align-items: center;
   gap: 1.87em;
}

.about__button-outer {
   background-color: #ffffff;
   padding: 0 5.3vw 5.3vw;
}

.about__button {
   display: block;
   width: fit-content;
   margin-left: auto;
}

/* ホバー共通 */
.hover__en,
.hover__jp {
   display: block;
   transition: transform 0.3s ease, opacity 0.3s ease;
   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   text-align: center;
}

.hover__en {
   transform: translateY(-50%);
}

.hover__jp {
   font-size: 14px;
   font-weight: 600;
   line-height: 1;
   transform: translateY(50%);
   opacity: 0;
}

/* ボタンのp要素 */
.button__inner p {
   position: relative;
   overflow: hidden;
   height: 1em;
   min-width: 100px;
}

/* ホバー発火 */
.gnav__list li a:hover .hover__en,
.button:hover .hover__en {
   transform: translateY(-150%);
   opacity: 0;
}

.gnav__list li a:hover .hover__jp,
.button:hover .hover__jp {
   transform: translateY(-50%);
   opacity: 1;
}

.button__jp {
   font-size: 15px;
}

/***************************************
セクションタイトル
****************************************/
.section__title {
   font-size: clamp(18px, 1.69vw + 11.66px, 36px);
   font-weight: 700;
   line-height: 1;
   letter-spacing: .2em;
   color: #4480A5;
   padding: 2vw 6vw;
}

@media screen and (max-width:700px) {
   .section__title {
      padding: 2vw 0;
      margin-left: 2.1vw;
   }
}

/***************************************
WORK ABOUTタイトル
****************************************/
.page-section__header {
   color: #4480A5;
   line-height: 1;
   display: flex;
   align-items: end;
   padding: clamp(30px, 2.8vw + 19.5px, 60px) 0;
}

.page-section__en {
   font-size: clamp(20px, 0.93vw + 16.5px, 30px);
   line-height: 1;
   letter-spacing: .08em;
}

.page-section__title {
   font-size: clamp(12px, 0.56vw + 9.9px, 18px);
   letter-spacing: .1em;
   margin-bottom: .3em;
}

/* ABOUT */
.about-section__header {
   padding: clamp(12px, 1.22vw + 7.4px, 25px) 0;
}

.about-section__en {
   margin-bottom: .2em;
}

@media screen and (max-width:700px) {
   .about-section__header {
      width: 89%;
      margin: 0 auto;
   }
}

/***************************************
ヘッダー
****************************************/
.header {
   padding: .65em 0 .98em;
   z-index: 300;
   position: sticky;
   top: 0;
   background-image: url(/image/bg.svg);
   background-repeat: repeat;
   background-size: 100%;
   background-color: #ffffff;
}

.logo {
   width: 3.87em;
}

.header__inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.gnav__list {
   display: flex;
   align-items: center;
   line-height: 1;
   overflow: hidden;
}

.gnav__list li+li {
   margin-left: 3.92em;
   /* WORKとABOUTの間 */
}

.gnav__list li:nth-child(3) {
   margin-left: 4em;
   /* ABOUTとCONTACTの間 */
}

.gnav__contact {
   border: 1px solid #5F5C71;
   border-radius: 50%;
   /* これで左の楕円になる */
   padding: 1.28em .4em;
   display: inline-block;
}

/* PCではハンバーガーを非表示 */
.hamburger {
   display: none;
}

.gnav__list li a {
   position: relative;
   display: block;
   height: 1em;
   min-width: 90px;
}

/* WORKページ */
.gnav__current {
   position: relative;
}

.gnav__current a::after,
.drawer__current::before {
   content: '';
   display: block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: #4480A5;
   position: absolute;
}

.gnav__current a::after {
   left: 50%;
   transform: translateX(-50%);
   bottom: -1.1em;
}

/***************************************
ドロワーメニュー
 ****************************************/

.drawer {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   background-color: #ffffff;
   z-index: 200;
   padding-top: 80px;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
}

.drawer.is-open {
   opacity: 1;
   visibility: visible;
}

.drawer__list {
   width: 88%;
   margin: 0 auto;
}

.drawer__item {
   padding: 30px 10px 10px;
}

.drawer__link {
   display: flex;
   justify-content: space-between;
   align-items: center;
   text-decoration: none;
   color: #5F5C71;
}

.drawer__link:hover {
   color: #37677C
}

.drawer__en {
   font-size: 18px;
   line-height: 1;
}

.drawer__ja {
   font-size: 14px;
   line-height: 1;
}

/***************************************
 SP
 ****************************************/
@media screen and (max-width: 700px) {

   .header {
      padding: 10px 0;
   }

   .logo {
      width: 47px;
   }

   /* PC用ナビを非表示 */
   .gnav__list {
      display: none;
   }

   /* ハンバーガーを表示 */
   .hamburger {
      display: flex;
      align-items: center;
      gap: 10px;
      background: none;
      border: none;
      cursor: pointer;
      font-family: "futura-pt", sans-serif;
   }

   /* 三本線 */
   .hamburger__icon {
      display: block;
      width: 20px;
      height: 1px;
      background-color: #5F5C71;
      position: relative;
      transition: background-color 0.3s ease;
   }

   /* MENU文字 */
   .hamburger__text {
      font-size: 20px;
      line-height: 1;
      letter-spacing: .07em;
   }

   .hamburger__icon::before,
   .hamburger__icon::after {
      content: '';
      display: block;
      width: 20px;
      height: 1px;
      background-color: #5F5C71;
      position: absolute;
      left: 0;
      transition: transform 0.3s ease, top 0.3s ease;
   }

   .hamburger__icon::before {
      top: -7px;
   }

   .hamburger__icon::after {
      top: 7px;
   }

   /* 開いた時はXに変化 */
   .hamburger.is-open .hamburger__icon {
      background-color: transparent;
   }

   .hamburger.is-open .hamburger__icon::before {
      top: 0;
      transform: rotate(45deg);
   }

   .hamburger.is-open .hamburger__icon::after {
      top: 0;
      transform: rotate(-45deg);
   }

   /* WORKページ */
   .drawer__current {
      position: relative;
   }

   .drawer__current::before {
      left: -1.5em;
      top: 50%;
      transform: translateY(-50%);
   }
}

/***************************************
共通
****************************************/
.square__text {
   display: inline-block;
   font-size: clamp(11px, 0.46vw + 9.27px, 16px);
   font-weight: 400;
   line-height: 1;
   padding: .5em .62em;
   border: 1px solid #737373;
   color: #737373;
}

@media screen and (max-width:700px) {
   .square__text {
      border: .8px solid #737373;
   }
}

.dot {
   background-image: url(/image/dot-bg.svg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   height: 100%;
   width: 100%;
}

.star {
   background-image: url(/image/star-bg.svg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   height: 100%;
   width: 100%;
}

/* （）設定 top about */
.en__ls {
   letter-spacing: .15em;
}

/* （）設定 top*/
.jp-small__ls {
   letter-spacing: -0.4em;
}

/* 文字間隔*/
.xlarge__ls {
   letter-spacing: .1em;
}

.large__ls {
   letter-spacing: .06em;
}

.middle__ls {
   letter-spacing: -.05em;
}

.small__ls {
   letter-spacing: -.02em;
}

/***************************************
ヘディングマップ
****************************************/
.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}


/***************************************
コンタクト
****************************************/
.contact__inner {
   margin: 7.5vw auto;
   width: 25vw;
   min-width: 236px;

   transition: .3s;
}

.contact__img-outer {
   position: relative;
}

.contact__img {
   display: block;
   animation: rotation 16s linear infinite;
   height: auto;
   width: 100%;
}

/* 飛行機 */
.contact__plane {
   width: 31%;
   position: absolute;
   top: 50%;
   left: 50%;
   animation: floating-x 14s ease-in-out infinite;
}

/* ホバー */
.contact__inner:hover .contact__title {
   color: #4480A5;
}

/* アニメーション */
@keyframes rotation {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}

.plane__img {
   animation: floating-y 4s ease-in-out infinite;
}

@keyframes floating-x {
   0% {
      transform: translate(calc(-60% + 0px), -50%);
   }

   33% {
      transform: translate(calc(-60% + 20px), -50%);
   }

   66% {
      transform: translate(calc(-60% - 20px), -50%);
   }

   100% {
      transform: translate(calc(-60% + 0px), -50%);
   }
}


@keyframes floating-y {
   0% {
      transform: translateY(0);
   }

   /* 中央 */
   33% {
      transform: translateY(-10px);
   }

   /* 上 */
   66% {
      transform: translateY(10px);
   }

   /* 下 */
   100% {
      transform: translateY(0);
   }

   /* 中央に戻る */
}

.contact__title {
   font-size: clamp(15px, 0.28vw + 13.9px, 18px);
   line-height: 1;
   margin: clamp(42px, .75vw + 39.18px, 50px) auto 0;
   width: max-content;
}

@media screen and (max-width:480px) {
   .contact__inner {
      margin: 21.3vw auto;
   }
}

/***************************************
フッター
****************************************/
.footer {
   display: grid;
   grid-template-columns: 6.3fr 10fr;
   grid-template-rows: 1fr 1.5fr;
   height: 25vw;
   max-height: 280px;
   min-height: 150px;
}

.footer__list {
   grid-column: 1;
   grid-row: 1 / 3;
   padding: 3.75em 0 0 5.5vw;
   align-self: start;
   height: 100%;

   position: relative;
}

.footer__list::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #BCD5E8;
   z-index: -10;
}

.footer__list li+li {
   margin-top: 2.2em;
}

.footer__list li {
   line-height: 1;
   font-size: clamp(12px, 0.37vw + 10.6px, 16px);
}

.footer__star {
   grid-column: 2;
   grid-row: 1;
}

.footer__dot {
   grid-column: 2;
   grid-row: 2;
}

/* ホバー */
.footer__list li a {
   transition: .3s;
}

.footer__list li a:hover {
   color: #333333;
}

@media screen and (max-width:700px) {
   .footer {
      grid-template-columns: 16fr 25fr;
   }

   .footer__list {
      padding: 2em 0 0 5.5vw;
   }

   .footer__list li+li {
      margin-top: 2em;
   }
}