@charset "UTF-8";
/*----------------------------------------------------
大項目
======================================================
基本設定
mixin-font
mixin-疑似要素
mixin-テキストホバー
mixin-ボタン
mixin-アニメーション
======================================================
----------------------------------------------------*/
/* 
デバイスサイズ
・iPhone ③種類 320px,375px,414px
・iPad 大体③種類 768px,834px,1024px

PC
・MacBookPro(13.3インチ) 1280px
・MacBookPro(14インチ) 1512px
・MacBookPro(16インチ) 1728px
・iMac(24インチ) 2240px
・iMac(27インチ) 2560px
*/
/*----------------------------------------------------
基本設定
----------------------------------------------------*/
/*----------------------------------------------------
.inner 余白 設定
----------------------------------------------------*/
/*----------------------------------------------------
//ベースフォントサイズ
----------------------------------------------------*/
/*----------------------------------------------------
グローバルナビブレイクポイント
/* ハンバーガーメニューの切り替わるポイント。
----------------------------------------------------*/
/* gnav.jsの変数「gNav_bpoint」も数値を合わせる */
/*----------------------------------------------------
transition
----------------------------------------------------*/
/* ホバー変更はやさ*/
/*----------------------------------------------------
mixinで、cssアニメーションを変数で指定できるようにするのに使う
----------------------------------------------------*/
/* インクルードする際はこんなふうに使う */
/*----------------------------------------------------
アニメーション名を指定する
----------------------------------------------------*/
/*----------------------------------------------------
中央寄せ
----------------------------------------------------*/
/* 上下左右中央寄せ */
/* 上下中央寄せ */
/* 左右中央寄せ */
/*----------------------------------------------------
リストマーカー
----------------------------------------------------*/
/*----------------------------------------------------
よく使う小技
----------------------------------------------------*/
/* ボックス影 */
/* 反転*/
/* 文字幅が指定幅を超えたときに「...」を表示する */
/* 親要素よりも幅を超えて画面いっぱいに表示するとき */
/* iconを横にぐるっと回転 */
/* slickのautoスライドの時などに、画面をタップするとスライドが動かなくなるのを防ぐ */
/* safariでボタンを押した際に出てくる青枠を消す */
/* クリップパス ジェネレーター： https://bennettfeely.com/clippy/。 */
/*----------------------------------------------------
グラデーション
----------------------------------------------------*/
/* 交互に斜めを入れる。rgba(0,0,0,0)で透過させることもできる */
/*----------------------------------------------------
======================================================
mixin-font
======================================================
----------------------------------------------------*/
/*----------------------------------------------------
フォント設定
----------------------------------------------------*/
/*----------------------------------------------------
フォント
----------------------------------------------------*/
/*----------------------------------------------------
======================================================
mixin-疑似要素
======================================================
----------------------------------------------------*/
/*----------------------------------------------------
======================================================
mixin-テキストホバー
======================================================
----------------------------------------------------*/
/*----------------------------------------------------
テキストホバーで線を表示する

//html例：<p>テキスト<a href="" class="link_text"><span>こちら</span></a>テキス</p>
spanタグにhoverしたときに線画出るようにしている。

----------------------------------------------------*/
/* ホバーで下線が左に消える */
/* ホバーで左から右に線が出る */
/* ホバーで中央から線が出る */
/* ホバーで中央の線がきえる */
/*----------------------------------------------------
======================================================
mixin-ボタン
======================================================
----------------------------------------------------*/
/*----------------------------------------------------
基本のhtml
<a href="" class="btn">
  <span>私たちについて</span>
</a>
----------------------------------------------------*/
/* 右矢印付き 「▶︎」*/
/* ボタン矢印あり 「 ---\ 」*/
/* ボタン 「く」の字型*/
/* '+' ありボタン */
/* hoverするとブワッとかわる */
/*----------------------------------------------------
======================================================
mixin-アニメーション
======================================================
----------------------------------------------------*/
/*----------------------------------------------------
フェードイン
----------------------------------------------------*/
/*----------------------------------------------------
上下左右に消える
----------------------------------------------------*/
/* 下にスッと消える*/
/* 上にスッと消える*/
/*----------------------------------------------------
上下左右から表示
----------------------------------------------------*/
/* 下から上にフワッと出てくる */
/* 上から下にフワッと出てくる */
/* 左から右にスッと出てくる*/
/* 右から左にスッと出てくる*/
/*----------------------------------------------------
コンテンツを覆っているカバーが徐々に取れる (左右) 覆いたい対象にクラス名を付ければOK
ターゲットとなる要素にはあらかじめ、下記のプロパティを設定しておく
position: relative;
overflow: hidden;
----------------------------------------------------*/
/* 左から右に動かしたい場合は、0％ → 100%。 右から左は 0% ⇨ -100% */
/*----------------------------------------------------
コンテンツを覆っているカバーが徐々に取れる (上下) 覆いたい対象にクラス名を付ければOK
ターゲットとなる要素にはあらかじめ、下記のプロパティを設定しておく
position: relative;
overflow: hidden;
----------------------------------------------------*/
/*----------------------------------------------------
文字間を徐々につめるアニメーション
----------------------------------------------------*/
/*----------------------------------------------------
ボヤーと出てくる
----------------------------------------------------*/
/*----------------------------------------------------
ふわふわ 動き続ける
----------------------------------------------------*/
/* 上下にふわふわ */
/* ホバーすると上にテキストが透明になって、下から出てくる */
@-webkit-keyframes textMove {
  0% {
    opacity: 1;
  }
  25% {
    -webkit-transform: translateY(-1em);
            transform: translateY(-1em);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(1em);
            transform: translateY(1em);
    opacity: 0;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes textMove {
  0% {
    opacity: 1;
  }
  25% {
    -webkit-transform: translateY(-1em);
            transform: translateY(-1em);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(1em);
            transform: translateY(1em);
    opacity: 0;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
/* くるくる回り続ける */
@-webkit-keyframes fadeUpAnimeCircle {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes fadeUpAnimeCircle {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/*----------------------------------------------------
bgが左右から流れ、その後、テキストが表示される。

.bg_fromLeft_toRight {
 @include bg_fromLeft_toRight;
}

html構成
<div class=" target">
  <span>
    <img src="<?php echo get_template_directory_uri(); ?>/assets/images/top/introduction/catch.png" alt="写真も、動画も。無限の可能性を撮る">
  </span>
</div>
----------------------------------------------------*/
/* 左から右に流れる */
/* 右から左に流れる */
/*----------------------------------------------------
#header 
----------------------------------------------------*/
#header {
  width: 100%;
  background: white;
  /* ハンバーガーメニューだけ固定にしたい場合はfixedを外す*/
  position: fixed;
  z-index: 10;
  /* */
}
@media all and (min-width: 1401px) {
  #header {
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    /* ↓画面いっぱいに背景を敷きたい場合 */
  }
}

/* SP用のハンバーガーメニュー時、表示非表示する */
#pc #header #gNav_list .forNavSP {
  display: none;
}
#pc #header #gNav_list .forNavPC {
  display: block;
}

#sp #header #gNav_list .forNavSP {
  display: block;
}
#sp #header #gNav_list .forNavPC {
  display: none;
}

/*----------------------------------------------------
PC
----------------------------------------------------*/
#pc #header {
  display: none;
  height: 60px;
}
@media all and (min-width: 751px) {
  #pc #header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  #pc #header .logo {
    position: relative;
    top: 1px;
    left: 20px;
  }
}
@media all and (min-width: 751px) and (max-width: 1100px) {
  #pc #header .logo img {
    width: 160px;
  }
}
@media screen and (min-width: 751px) and (min-width: 1101px) and (max-width: 1399px) {
  #pc #header .logo img {
    width: 304px;
  }
}
@media all and (min-width: 751px) and (min-width: 1400px) {
  #pc #header .logo {
    top: 0px;
  }
  #pc #header .logo img {
    width: 394px;
  }
}
@media all and (min-width: 751px) {
  #pc #header #gNav {
    position: relative;
    top: 0px;
  }
}
@media all and (min-width: 751px) {
  #pc #header #gNav_list ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 0 0 auto;
  }
  #pc #header #gNav_list ul li {
    margin-right: 14px;
  }
}
@media all and (min-width: 751px) and (min-width: 1000px) {
  #pc #header #gNav_list ul li {
    margin-right: 30px;
  }
}
@media all and (min-width: 751px) {
  #pc #header #gNav_list ul li:last-child {
    margin-right: 0px;
  }
}
@media all and (min-width: 751px) {
  #pc #header #gNav_list ul li > a {
    /* クリックできる幅を広げる*/
    display: inline-block;
    padding: 9px 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    font-weight: bold;
  }
  #pc #header #gNav_list ul li > a:hover {
    color: #1ba1e6;
  }
  #pc #header #gNav_list ul li > a .en {
    display: none;
  }
}
@media all and (min-width: 751px) {
  #pc #header #gNav_list ul li:not(.entry) {
    font-size: 14px;
    letter-spacing: 0.075em;
    line-height: 1.6667;
    /* 751- */
  }
  #pc #header #gNav_list ul li:not(.entry) span {
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    position: relative;
    color: #1e2427;
  }
  #pc #header #gNav_list ul li:not(.entry) span:after {
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    background-color: #1e2427;
    bottom: -2px;
    left: 0%;
    -webkit-transform: scale(0, 1);
            transform: scale(0, 1); /* x軸方向に縮小で0にして消えてるように見せる */
  }
  #pc #header #gNav_list ul li:not(.entry).current {
    position: relative;
    color: #1e2427;
  }
  #pc #header #gNav_list ul li:not(.entry).current span::after {
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    background-color: #1e2427;
    bottom: -2px;
    left: 0%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1); /* x軸方向に縮小で0にして消えてるように見せる */
  }
}
@media all and (min-width: 751px) and (min-width: 751px) {
  #pc #header #gNav_list ul li:not(.entry):hover span {
    color: #1e2427;
  }
  #pc #header #gNav_list ul li:not(.entry):hover span::after {
    width: 100%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
@media screen and (min-width: 751px) and (min-width: 751px) and (max-width: 1380px) {
  #pc #header #gNav_list ul li:not(.entry) {
    font-size: 13px;
  }
}
@media all and (min-width: 751px) and (min-width: 1381px) {
  #pc #header #gNav_list ul li:not(.entry) {
    font-size: 16px;
    letter-spacing: 0.075em;
    line-height: 1.6667;
  }
}
@media all and (min-width: 751px) {
  #pc #header .other {
    display: none;
  }
}
@media all and (min-width: 751px) {
  #pc #header li.entry {
    margin-left: 15px;
    font-family: "Barlow", sans-serif;
  }
}
@media all and (min-width: 751px) and (min-width: 1000px) {
  #pc #header li.entry {
    margin-left: 24px;
  }
}
@media all and (min-width: 751px) {
  #pc #header li.entry a {
    color: #fff;
    background: #27232f;
    display: inline-block;
    text-align: center;
    position: relative;
    z-index: 0;
    font-weight: bold;
    border-top: 2px solid #a0a0a0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    width: 130px;
    height: 63px;
    border-left: 1px solid #27232f;
    /* 751- */
    font-size: 22px;
    letter-spacing: 0.15em;
    line-height: 1.6667;
    /* 751- */
  }
  #pc #header li.entry a span {
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    position: relative;
    color: #27232f;
  }
  #pc #header li.entry a span:after {
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    background-color: #27232f;
    bottom: 2px;
    left: 0%;
    -webkit-transform: scale(0, 1);
            transform: scale(0, 1); /* x軸方向に縮小で0にして消えてるように見せる */
  }
  #pc #header li.entry a.current {
    position: relative;
    color: #27232f;
  }
  #pc #header li.entry a.current span::after {
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    background-color: #27232f;
    bottom: 2px;
    left: 0%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1); /* x軸方向に縮小で0にして消えてるように見せる */
  }
}
@media all and (min-width: 751px) and (min-width: 751px) {
  #pc #header li.entry a:hover span {
    color: #27232f;
  }
  #pc #header li.entry a:hover span::after {
    width: 100%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
@media all and (min-width: 751px) {
  #pc #header li.entry a span {
    display: block;
    position: absolute;
    color: white;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
}
@media screen and (min-width: 751px) and (min-width: 751px) and (max-width: 1380px) {
  #pc #header li.entry a {
    font-size: 18px;
  }
}
@media all and (min-width: 751px) and (min-width: 751px) {
  #pc #header li.entry a:hover {
    background-color: #fff;
  }
  #pc #header li.entry a:hover span {
    color: #27232f;
  }
}
@media all and (min-width: 751px) and (min-width: 1200px) {
  #pc #header li.entry a {
    width: 226px;
  }
}

/*----------------------------------------------------
SP
----------------------------------------------------*/
/* ヘッダーの高さ */
#sp #header {
  -webkit-transition: all 0.9s;
  transition: all 0.9s;
  height: 60px;
  background: initial;
}
#sp #header.active {
  background: rgba(255, 255, 255, 0);
}
#sp #header.active .logo {
  z-index: 0;
  opacity: 0.4;
}
#sp #header .hamburger_Down_appear {
  -webkit-animation-name: hamburger_Down_appear;
          animation-name: hamburger_Down_appear;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}
@-webkit-keyframes hamburger_Down_appear {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes hamburger_Down_appear {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
#sp #header .logo {
  position: relative;
  top: 0px;
  left: 0px;
  -webkit-transition: all 0.9s;
  transition: all 0.9s;
}
#sp #header .logo img {
  width: 170px;
}
#sp #header #gNav {
  /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
  position: fixed;
  z-index: -1;
  opacity: 0;
  top: 0;
  width: 100%;
  background-color: white;
  -webkit-transition: all 0.9s;
  transition: all 0.9s;
  /* ハンバーガーメニューを開いた時の処理 */
}
#sp #header #gNav.gNav_fullHeight {
  /* js制御用クラス。パッと消えてしまうのを防ぐ */
  height: 100vh;
}
#sp #header #gNav.panelactive {
  opacity: 1;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.9);
}
#sp #header #gNav.panelactive #gNav_list {
  position: fixed;
  top: 65px;
  z-index: 999;
  width: 100%;
  height: 100vh;
  /*ナビの数が増えた場合縦スクロール*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /*スクロールするように下に余分にpaddingを設定してあげる*/
  padding-bottom: 200px;
}
#sp #header #gNav.panelactive ul,
#sp #header #gNav.panelactive .other {
  /* ボタンを押したらクリックできるようにする */
  display: block;
}
#sp #header ul,
#sp #header .other {
  /* ボタン押す前は非表示!!!!これをしないと、ボタンを閉じてる時でも、要素が上に来てクリックできてしまったりする */
  display: none;
  width: 100%;
  padding: 0 20px;
}
#sp #header .other a {
  font-size: 20px;
}
#sp #header li:first-child > a {
  border-top: 1px solid #27232f;
}
#sp #header li > a {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  font-size: 13px;
  letter-spacing: 0.025em;
  line-height: 1.6667;
  font-weight: bold;
}
#sp #header li > a .en {
  font-size: 20px;
  letter-spacing: 0.05em;
  line-height: 1.6667;
  font-family: "Barlow", sans-serif;
}
#sp #header li:not(.entry) > a {
  color: #27232f;
  text-decoration: none;
  padding: 20px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  margin: 0 auto;
  width: 100%;
  border-bottom: 1px solid #27232f;
}
#sp #header li.entry {
  margin-top: 35px;
  margin-bottom: 35px;
}
#sp #header li.entry a {
  width: 250px;
  padding: 18px 0px;
  margin: 0 auto;
  display: block;
  text-align: center;
  border: 1px solid #27232F;
  border-radius: 6px;
  font-size: 20px;
  letter-spacing: 0.1em;
  line-height: 1.6667;
  font-family: "Barlow", sans-serif;
  font-weight: bold;
}
#sp #header li.entry a span {
  position: relative;
  margin-left: -10px;
}
#sp #header li.entry a span::after {
  content: "";
  position: absolute;
  background: url("../images/common/icon/arrow_black.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 17px;
  height: 17px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: -25px;
}
#sp #header .openbtn {
  position: absolute;
}
#sp #header .openbtn {
  z-index: 9999;
  top: 10px;
  right: 10px;
  cursor: pointer;
  /* タップで反応するエリア*/
  width: 40px;
  height: 40px;
  background: #27232f;
  border-radius: 6px;
}
#sp #header .openbtn span {
  display: inline-block;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  position: absolute;
  left: 10px;
  height: 1px;
  border-radius: 2px;
  background-color: white;
  width: 20px;
}
#sp #header .openbtn span:nth-of-type(1) {
  top: 14px;
}
#sp #header .openbtn span:nth-of-type(2) {
  top: 20px;
}
#sp #header .openbtn span:nth-of-type(3) {
  top: 26px;
}
#sp #header .openbtn.active span {
  left: 10px;
}
#sp #header .openbtn.active span:nth-of-type(1) {
  top: 14px;
  -webkit-transform: translateY(6px) rotate(-45deg);
          transform: translateY(6px) rotate(-45deg);
}
#sp #header .openbtn.active span:nth-of-type(2) {
  opacity: 0;
}
#sp #header .openbtn.active span:nth-of-type(3) {
  top: 26px;
  -webkit-transform: translateY(-6px) rotate(45deg);
          transform: translateY(-6px) rotate(45deg);
}
#sp #header .other .wrap {
  background-color: #fff;
  padding: 19px 20px 39px;
  border-radius: 6px;
}
#sp #header .other .hamLogo {
  font-weight: bold;
  margin-bottom: 40px;
}
#sp #header .other .hamLogo .big {
  font-size: 20px;
  letter-spacing: 0.1em;
  line-height: 1.6667;
}
#sp #header .other .hamLogo .small {
  font-size: 17px;
  letter-spacing: 0.1em;
  line-height: 1.6667;
}
#sp #header .other .address {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 22px;
     -moz-column-gap: 22px;
          column-gap: 22px;
  margin-bottom: 25px;
}
#sp #header .other .address p,
#sp #header .other .address a {
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 2;
}
#sp #header .other .address p.company,
#sp #header .other .address a.company {
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 2;
}
#sp #header .other .btnArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 20px;
}
#sp #header .other .btnArea .site {
  width: 42.7627%;
}
#sp #header .other .btnArea .policy {
  width: 52.8474%;
}
#sp #header .other .btnArea a {
  border: 1px solid #27232F;
  border-radius: 6px;
  padding: 9px 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.05em;
  line-height: 1.6667;
  font-weight: bold;
}
#sp #header .other .btnArea a span {
  position: relative;
}
#sp #header .other .btnArea a span::before {
  content: "";
  position: absolute;
  background: url("../images/common/icon/link.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 10px;
  height: 8px;
  top: 3px;
  right: -12px;
}
#sp #header .other .ryukyuArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 26px;
     -moz-column-gap: 26px;
          column-gap: 26px;
}
#sp #header .other .ryukyuArea a {
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  position: relative;
}
#sp #header .other .ryukyuArea a::before {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  background-color: #27232F;
  bottom: 0;
}
#sp #header .other .ryukyuArea a img {
  width: 12px;
}

/*----------------------------------------------------
entryBtn
----------------------------------------------------*/
#entryBtn {
  padding: 115px 0 90px;
  background: white;
  position: relative;
  /* 751- */
  /* 751- */
}
#entryBtn::before {
  content: "";
  position: absolute;
  background: url("../images/common/footer/bg1_sp.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 106px;
  height: 110px;
  top: 0;
}
#entryBtn::after {
  content: "";
  position: absolute;
  background: url("../images/common/footer/bg2_sp.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 126px;
  height: 157px;
  bottom: 0;
  right: 0;
}
@media all and (min-width: 751px) {
  #entryBtn::before {
    top: 70px;
    content: "";
    position: absolute;
    background: url("../images/common/footer/bg1_pc.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 237px;
    height: 224px;
  }
  #entryBtn::after {
    content: "";
    position: absolute;
    background: url("../images/common/footer/bg2_pc.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 231px;
    height: 227px;
    bottom: 123px;
    right: 40px;
  }
}
@media all and (min-width: 1500px) {
  #entryBtn::before {
    left: calc(50% - 600px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  #entryBtn::after {
    bottom: 123px;
    right: calc(50% - 550px);
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
  }
}
@media all and (min-width: 751px) {
  #entryBtn {
    padding: 150px 0 151px;
  }
}
#entryBtn .bigText {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
  font-size: 20px;
  letter-spacing: 0.05em;
  line-height: 1.875;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  /* 751- */
}
@media all and (min-width: 751px) {
  #entryBtn .bigText {
    font-size: 30px;
    letter-spacing: 0.1em;
    line-height: 1.875;
    margin-bottom: 44px;
  }
}
#entryBtn .btnArea .btn {
  position: relative;
  max-width: 250px;
  margin: 0 auto;
  z-index: 1;
  font-size: 20px;
  letter-spacing: 0.1em;
  line-height: 1.6667;
  /* 751- */
}
#entryBtn .btnArea .btn span::before {
  content: "";
  position: absolute;
  background: url("../images/common/icon/arrow_black.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 17px;
  height: 17px;
  top: 7px;
}
@media all and (min-width: 751px) {
  #entryBtn .btnArea .btn {
    font-size: 34px;
    letter-spacing: 0.2em;
    line-height: 1.6667;
    max-width: 450px;
  }
  #entryBtn .btnArea .btn span::before {
    content: "";
    position: absolute;
    background: url("../images/common/icon/arrow_black.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
    right: -50px;
    top: 12px;
  }
  #entryBtn .btnArea .btn:hover span {
    color: white;
  }
  #entryBtn .btnArea .btn:hover span::before {
    content: "";
    position: absolute;
    background: url("../images/common/icon/arrow_white.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
    right: -70px;
  }
  #entryBtn .btnArea .btn:hover span::after {
    background: white;
  }
}

/*----------------------------------------------------
footer
----------------------------------------------------*/
#footer .main {
  padding: 47px 0px 43px;
  background-color: #27232F;
  color: white;
  /* 751- */
}
@media all and (min-width: 751px) {
  #footer .main {
    padding: 80px 0px 70px;
  }
}
#footer .wrap {
  max-width: 1200px;
  margin: 0 auto;
  /* -750 */
  /* 751- */
}
@media all and (max-width: 751px) {
  #footer .wrap {
    padding: 0 40px;
  }
}
@media all and (min-width: 751px) {
  #footer .wrap {
    padding: 0 50px;
  }
}
@media all and (min-width: 1100px) {
  #footer .wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  #footer .wrap .right {
    width: 300px;
  }
}
#footer .footLogo {
  font-weight: bold;
  margin-bottom: 40px;
  /* 751- */
}
#footer .footLogo .big {
  font-size: 20px;
  letter-spacing: 0.1em;
  line-height: 1.6667;
}
#footer .footLogo .small {
  font-size: 17px;
  letter-spacing: 0.1em;
  line-height: 1.6667;
}
@media all and (min-width: 751px) {
  #footer .footLogo {
    margin-bottom: 54px;
    -webkit-column-gap: 30px;
       -moz-column-gap: 30px;
            column-gap: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
  #footer .footLogo .big {
    font-size: 33px;
    letter-spacing: 0.1em;
    line-height: 1.6667;
  }
  #footer .footLogo .small {
    font-size: 24px;
    letter-spacing: 0.1em;
    line-height: 1.6667;
  }
}
@media all and (min-width: 900px) {
  #footer .footLogo .big {
    font-size: 36px;
    letter-spacing: 0.1em;
    line-height: 1.6667;
  }
  #footer .footLogo .small {
    font-size: 26px;
    letter-spacing: 0.1em;
    line-height: 1.6667;
  }
}
#footer .address {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 30px;
     -moz-column-gap: 30px;
          column-gap: 30px;
  margin-bottom: 30px;
  /* 751- */
}
#footer .address p {
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 2;
}
#footer .address a {
  /* 751- */
}
#footer .address a span {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  position: relative;
  color: white;
}
#footer .address a span:after {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  background-color: white;
  bottom: -2px;
  left: 0%;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1); /* x軸方向に縮小で0にして消えてるように見せる */
}
#footer .address a.current {
  position: relative;
  color: white;
}
#footer .address a.current span::after {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  background-color: white;
  bottom: -2px;
  left: 0%;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1); /* x軸方向に縮小で0にして消えてるように見せる */
}
@media all and (min-width: 751px) {
  #footer .address a:hover span {
    color: white;
  }
  #footer .address a:hover span::after {
    width: 100%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
@media all and (min-width: 751px) {
  #footer .address p {
    font-size: 20px;
    letter-spacing: 0.1em;
    line-height: 2;
  }
}
#footer .btnArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 20px;
  /* 751- */
}
#footer .btnArea .site {
  width: 42.7627%;
}
#footer .btnArea .policy {
  width: 52.8474%;
}
@media all and (min-width: 751px) {
  #footer .btnArea {
    -webkit-column-gap: 30px;
       -moz-column-gap: 30px;
            column-gap: 30px;
  }
  #footer .btnArea .site, #footer .btnArea .policy {
    width: 100%;
  }
}
@media all and (min-width: 1100px) {
  #footer .btnArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    row-gap: 20px;
  }
  #footer .btnArea .site, #footer .btnArea .policy {
    width: 100%;
  }
}
#footer .btnArea a {
  border: 0.7px solid white;
  border-radius: 6px;
  padding: 9px 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.05em;
  line-height: 1.6667;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  /* 751- */
  font-weight: bold;
  /* 751- */
}
#footer .btnArea a span {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  position: relative;
  color: white;
}
#footer .btnArea a span:after {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  background-color: white;
  bottom: -2px;
  left: 0%;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1); /* x軸方向に縮小で0にして消えてるように見せる */
}
#footer .btnArea a.current {
  position: relative;
  color: white;
}
#footer .btnArea a.current span::after {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  background-color: white;
  bottom: -2px;
  left: 0%;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1); /* x軸方向に縮小で0にして消えてるように見せる */
}
@media all and (min-width: 751px) {
  #footer .btnArea a:hover span {
    color: white;
  }
  #footer .btnArea a:hover span::after {
    width: 100%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
#footer .btnArea a span {
  position: relative;
  margin-left: -10px;
}
#footer .btnArea a span::before {
  content: "";
  position: absolute;
  background: url("../images/common/icon/link_white.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 10px;
  height: 8px;
  top: 5px;
  right: -12px;
}
#footer .btnArea a.policy {
  /* -750 */
}
@media all and (max-width: 751px) {
  #footer .btnArea a.policy span {
    position: relative;
    left: -1px;
  }
}
@media all and (min-width: 751px) {
  #footer .btnArea a {
    border: 1px solid white;
    padding: 20px 0;
  }
  #footer .btnArea a.site {
    font-size: 20px;
    letter-spacing: 0.05em;
    line-height: 1.6667;
  }
  #footer .btnArea a.policy {
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 1.6667;
  }
  #footer .btnArea a span {
    margin-left: -20px;
  }
  #footer .btnArea a span::before {
    content: "";
    position: absolute;
    background: url("../images/common/icon/link_white.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 18px;
    height: 13px;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    top: 8px;
    right: -30px;
  }
  #footer .btnArea a:hover {
    background: #fff;
  }
  #footer .btnArea a:hover span {
    color: #27232F;
  }
  #footer .btnArea a:hover span::before {
    content: "";
    position: absolute;
    background: url("../images/common/icon/link.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 18px;
    height: 13px;
  }
  #footer .btnArea a:hover span::after {
    background: #27232F;
  }
}
#footer .ryukyuArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 26px;
     -moz-column-gap: 26px;
          column-gap: 26px;
  /* 751- */
}
#footer .ryukyuArea a {
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  position: relative;
}
#footer .ryukyuArea a::before {
  content: "";
  position: absolute;
  height: 0.7px;
  width: 100%;
  background-color: white;
  bottom: 0;
}
#footer .ryukyuArea a img {
  width: 12px;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}
@media all and (min-width: 751px) {
  #footer .ryukyuArea {
    -webkit-column-gap: 38px;
       -moz-column-gap: 38px;
            column-gap: 38px;
  }
  #footer .ryukyuArea a {
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    font-size: 20px;
    letter-spacing: 0.1em;
    line-height: 2;
  }
  #footer .ryukyuArea a::before {
    height: 1px;
  }
  #footer .ryukyuArea a img {
    width: 20px;
  }
  #footer .ryukyuArea a:hover {
    opacity: 0.7;
  }
}
#footer .copyright {
  padding: 15px 0;
  background-color: white;
  font-weight: bold;
  font-size: 10px;
  letter-spacing: 0.1em;
  line-height: 1.6;
  /* 751- */
}
@media all and (min-width: 751px) {
  #footer .copyright {
    padding: 12px 0 12px;
    font-size: 12px;
    letter-spacing: 0.1em;
    line-height: 1.6667;
  }
}

body {
  /* for iOS スマホを横向きにした際に文字が大きくならなくする https://qiita.com/Sen-Din/items/3553de9cf34358f3e2e0*/
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: #27232F;
  background-color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  /* 751- */
}
@media all and (min-width: 751px) {
  body {
    font-size: 14px;
  }
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

a {
  text-decoration: none;
}

a img {
  border: none;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

figure {
  margin: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ul,
li,
dl,
dt,
dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

input,
label,
select,
textarea {
  vertical-align: middle;
}

.align-center {
  text-align: center;
}

strong {
  font-size: 1.2em;
}

.red-text {
  color: red;
}

/* パララックスっぽくするために、パララックス以外の要素に色を敷いてる */
section,
.fv {
  background-color: #fff;
  position: relative;
}

.bgwhite {
  background-color: #fff;
}

/*----------------------------------------------------
js スクロール時の動き
----------------------------------------------------*/
.boxOpacity {
  opacity: 0;
}

/* 下からフワッと出てくる */
.fadeUp {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

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

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(60px);
            transform: translateY(60px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/*----------------------------------------------------
inner
----------------------------------------------------*/
/* ベース */
.inner {
  position: relative;
  padding: 0 20px;
  /* 751- */
  /* */
}
@media all and (min-width: 751px) {
  .inner {
    padding: 0 100px;
    max-width: 1400px;
    margin: 0 auto;
  }
}
@media all and (min-width: 1401px) {
  .inner {
    padding: 0 100px;
  }
}
@media all and (min-width: 1500px) {
  .inner {
    padding: 0px;
  }
}

.short_inner {
  padding: 0 20px;
  /* 751- */
}
@media all and (min-width: 751px) {
  .short_inner {
    padding: 0 100px;
    max-width: 1200px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 751px) and (max-width: 1050px) {
  .short_inner {
    padding: 0 5%;
  }
}

/*----------------------------------------------------
クリック無効化と透過
----------------------------------------------------*/
.is_opacity {
  pointer-events: none;
  opacity: 0;
}

/*----------------------------------------------------
表示 非表示
----------------------------------------------------*/
.hide {
  display: none;
}

.opacity {
  opacity: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.forSP {
  /* -750 */
  /* 751- */
}
@media all and (max-width: 751px) {
  .forSP {
    display: block;
  }
}
@media all and (min-width: 751px) {
  .forSP {
    display: none;
  }
}

.forPC {
  /* -750 */
  /* 751- */
}
@media all and (max-width: 751px) {
  .forPC {
    display: none;
  }
}
@media all and (min-width: 751px) {
  .forPC {
    display: block;
  }
}

/*----------------------------------------------------
改行 表示非表示
----------------------------------------------------*/
.brsp {
  display: block;
  /* 751- */
}
@media all and (min-width: 751px) {
  .brsp {
    display: none;
  }
}

.brpc {
  display: none;
  /* 751- */
}
@media all and (min-width: 751px) {
  .brpc {
    display: block;
  }
}

/*----------------------------------------------------
section タイトル
----------------------------------------------------*/
.secTitle_underlayer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 15px;
     -moz-column-gap: 15px;
          column-gap: 15px;
  /* 751- */
}
@media all and (min-width: 751px) {
  .secTitle_underlayer {
    -webkit-column-gap: 40px;
       -moz-column-gap: 40px;
            column-gap: 40px;
  }
}
.secTitle_underlayer .en {
  font-size: 45px;
  letter-spacing: 0.025em;
  line-height: 1.2;
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  /* 751- */
}
@media all and (min-width: 751px) {
  .secTitle_underlayer .en {
    font-size: 80px;
    letter-spacing: 0.1em;
    line-height: 1.6667;
  }
}
.secTitle_underlayer .jp {
  font-size: 12px;
  letter-spacing: 0.15em;
  line-height: 1.6667;
  font-weight: bold;
  margin-top: 5px;
  /* 751- */
}
@media all and (min-width: 751px) {
  .secTitle_underlayer .jp {
    font-size: 18px;
    letter-spacing: 0.2em;
    line-height: 1.6667;
  }
}

/*----------------------------------------------------
下層 ファーストビュー
----------------------------------------------------*/
.fv .pageTitle {
  margin-bottom: 29px;
  /* 751- */
  /* -750 */
  /* 751- */
}
@media all and (min-width: 751px) {
  .fv .pageTitle {
    margin-bottom: 57px;
  }
}
@media all and (max-width: 751px) {
  .fv .pageTitle {
    padding: 70px 0px 0px;
  }
}
@media all and (min-width: 751px) {
  .fv .pageTitle {
    padding-top: 105px;
  }
}
.fv .pageTitle .title {
  /* 751- */
}
@media all and (min-width: 751px) {
  .fv .pageTitle .title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-column-gap: 50px;
       -moz-column-gap: 50px;
            column-gap: 50px;
  }
}
.fv .pageTitle .en {
  font-size: 59px;
  letter-spacing: 0.1em;
  line-height: 1.123;
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  /* -750 */
  /* 751- */
}
@media all and (max-width: 751px) {
  .fv .pageTitle .en {
    display: block;
  }
}
@media all and (min-width: 751px) {
  .fv .pageTitle .en {
    font-size: 118px;
    letter-spacing: 0.05em;
    line-height: 1.123;
    font-family: "Barlow", sans-serif;
    font-weight: 500;
  }
}
.fv .pageTitle .jp {
  font-size: 13px;
  letter-spacing: 0.15em;
  line-height: 1.6667;
  font-weight: bold;
  /* -750 */
  /* 751- */
}
@media all and (max-width: 751px) {
  .fv .pageTitle .jp {
    margin-top: 10px;
  }
}
@media all and (min-width: 751px) {
  .fv .pageTitle .jp {
    margin-top: 10px;
    font-size: 22px;
    letter-spacing: 0.2em;
    line-height: 1.6667;
  }
}
.fv .image {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}

/*----------------------------------------------------
ボタン
----------------------------------------------------*/
.btn {
  border: 1px solid #27232f;
  display: block;
  max-width: 230px;
  position: relative;
  text-align: center;
  padding: 18px;
  border-radius: 6px;
  background-color: #fff;
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1.6667;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  /* 751- */
}
.btn span {
  position: relative;
  margin-left: -10px;
}
.btn span::before {
  content: "";
  position: absolute;
  background: url("../images/common/icon/arrow_black.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 17px;
  height: 17px;
  right: -30px;
  top: 3px;
}
@media all and (min-width: 751px) {
  .btn {
    max-width: 300px;
    font-size: 22px;
    letter-spacing: 0.05em;
    line-height: 1.6667;
    -webkit-transition: all 0.7s;
    transition: all 0.7s;
  }
  .btn span::before {
    content: "";
    position: absolute;
    background: url("../images/common/icon/arrow_black.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 23px;
    height: 23px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    right: -40px;
    top: 5px;
  }
  .btn:hover {
    background-color: #27232f;
    color: white;
  }
  .btn:hover span::before {
    content: "";
    position: absolute;
    background: url("../images/common/icon/arrow_white.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 23px;
    height: 23px;
    right: -60px;
  }
}

/*----------------------------------------------------
404page
----------------------------------------------------*/
.noPage404 {
  text-align: center;
  padding: 200px 0px 100px;
}
/*# sourceMappingURL=common.css.map */