@charset "UTF-8";
/*reset */
* {
  box-sizing: border-box; }

:after, :before {
  box-sizing: inherit; }

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

body {
  margin: 0; }

main {
  display: block; }

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0; }

address, blockquote, dl, figure, form, iframe, ol, p, pre, table, ul {
  margin: 0; }

ol, ul {
  padding: 0;
  list-style: none; }

dt {
  font-weight: 700; }

dd {
  margin-left: 0; }

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid;
  margin: 0;
  clear: both;
  color: inherit; }

pre {
  font-family: monospace;
  font-size: inherit; }

address {
  font-style: inherit; }

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit; }

abbr[title] {
  border-bottom: 0;
  text-decoration: underline;
  text-decoration: underline dotted; }

b, strong {
  font-weight: bolder; }

code, kbd, samp {
  font-family: monospace;
  font-size: inherit; }

small {
  font-size: 80%; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -.25em; }

sup {
  top: -.5em; }

img {
  border-style: none;
  vertical-align: bottom; }

embed, iframe, object {
  border: 0;
  vertical-align: bottom; }

button, input, optgroup, select, textarea {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit; }

[type=checkbox] {
  -webkit-appearance: checkbox;
  appearance: checkbox; }

[type=radio] {
  -webkit-appearance: radio;
  appearance: radio; }

button, input {
  overflow: visible; }

button, select {
  text-transform: none; }

[type=button], [type=reset], [type=submit], button {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none; }

[type="button"][disabled], [type="reset"][disabled], [type="submit"][disabled], button[disabled] {
  cursor: default; }

[type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner, button::-moz-focus-inner {
  border-style: none;
  padding: 0; }

[type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring, button:-moz-focusring {
  outline: 1px dotted ButtonText; }

fieldset, option {
  padding: 0; }

fieldset {
  margin: 0;
  border: 0;
  min-width: 0; }

legend {
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal; }

progress {
  vertical-align: baseline; }

textarea {
  overflow: auto; }

[type=checkbox], [type=radio] {
  padding: 0; }

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
  height: auto; }

[type=search] {
  outline-offset: -2px; }

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit; }

label[for] {
  cursor: pointer; }

details {
  display: block; }

summary {
  display: list-item; }

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

caption {
  text-align: left; }

td, th {
  vertical-align: top;
  padding: 0; }

th {
  text-align: left;
  font-weight: 700; }

[hidden], template {
  display: none; }

* {
  -webkit-transition: all 0.3s cubic-bezier(0, 0, 0, 0.99);
  -moz-transition: all 0.3s cubic-bezier(0, 0, 0, 0.99);
  -o-transition: all 0.3s cubic-bezier(0, 0, 0, 0.99);
  transition: all 0.3s cubic-bezier(0, 0, 0, 0.99); }

body {
  color: #000;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  line-height: 185%;
  background: #EFF5F8;
  font-size: 16px;
  overflow-x: hidden; }

a {
  color: #22499D; }

a:hover {
  color: #22499D; }

/* =================================================================

    共通

================================================================= */
.inner {
  width: 1100px;
  margin: auto; }

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

.en {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300; }

.en_bold {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; }

.en_black {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900; }

.cf:after {
  content: "";
  clear: both;
  display: block; }

.fadein {
  transition: 1s;
  opacity: 0;
  transform: translatey(50px); }

.fadein.animated {
  opacity: 1;
  transform: translatey(0px); }

header {
  width: 100%;
  position: fixed;
  height: 136px;
  z-index: 999;
  /*アクティブクラスがついたら透過なしにして最前面へ*/
  /*ナビゲーションの縦スクロール*/
  /*ナビゲーション*/
  /*リストのレイアウト設定*/
  /*========= ボタンのためのCSS ===============*/
  /*×に変化*/ }
  header .head_in .logo {
    width: 438px;
    padding: 31px 0 0 48px;
    float: left; }
  header .head_in .head_btn {
    float: right;
    margin: 31px 130px 0 0; }
    header .head_in .head_btn a {
      display: block;
      border-radius: 100px;
      background: url("../images/recruit/link_bg.svg") no-repeat 0 0/cover;
      box-shadow: 0px 4px 20px 0px rgba(182, 131, 0, 0.85);
      color: #000;
      font-weight: 700;
      width: 198px;
      height: 60px;
      padding: 18px;
      text-align: center; }
      header .head_in .head_btn a:hover {
        background: url("../images/recruit/link_bg_h.svg") no-repeat 0 0/cover; }
  header .head_in nav {
    padding-right: 24px; }
    header .head_in nav ul {
      display: flex;
      flex-wrap: wrap;
      align-content: stretch;
      justify-content: space-between;
      height: 100%;
      align-content: center; }
      header .head_in nav ul li a {
        display: block;
        color: #000;
        font-weight: bold;
        padding: 48px 16px;
        font-size: 14px; }
        header .head_in nav ul li a:hover {
          color: #22499D; }
  header #g-nav {
    /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
    position: fixed;
    z-index: -1;
    opacity: 0;
    /*はじめは透過0*/
    /*ナビの位置と形状*/
    top: 0;
    width: 100%;
    height: 100vh;
    /*ナビの高さ*/
    background: #22499D;
    /*動き*/
    transition: all 0.3s;
    display: none; }
  header #g-nav.panelactive {
    opacity: 1;
    z-index: 999;
    display: block; }
  header #g-nav.panelactive #g-nav-list {
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    /*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch; }
  header #g-nav ul {
    display: none;
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30vh 0 0 20vw;
    width: 100%; }
  header #g-nav.panelactive ul {
    display: block; }
  header #g-nav li {
    list-style: none;
    text-align: left; }
  header #g-nav li a {
    color: #fff;
    text-decoration: none;
    padding: 24px 24px 24px 100px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: bold;
    font-size: 24px;
    background: url("../images/common/link_line_wh.svg") no-repeat 0 50%; }
    header #g-nav li a:hover {
      color: #FDFE06; }
  header .openbtn {
    position: fixed;
    z-index: 9999;
    /*ボタンを最前面に*/
    top: 20px;
    right: 48px;
    cursor: pointer;
    width: 64px;
    height: 64px; }
  header .openbtn span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 22px;
    height: 2px;
    background-color: #000;
    width: 80%; }
  header .openbtn span:nth-of-type(1) {
    top: 24px; }
  header .openbtn span:nth-of-type(2) {
    top: 36px; }
  header .openbtn span:nth-of-type(3) {
    top: 48px; }
  header .openbtn.active span:nth-of-type(1) {
    top: 24px;
    left: 24px;
    transform: translateY(6px) rotate(-45deg);
    width: 80%;
    background: #fff; }
  header .openbtn.active span:nth-of-type(2) {
    opacity: 0; }
  header .openbtn.active span:nth-of-type(3) {
    top: 36px;
    left: 24px;
    transform: translateY(-6px) rotate(45deg);
    width: 80%;
    background: #fff; }
  header .head_wrap.fixed {
    background: #fff;
    padding-bottom: 20px;
    box-shadow: 0px 7px 46px 0px rgba(96, 131, 161, 0.22); }
    header .head_wrap.fixed .logo {
      width: 380px;
      padding: 20px 0 0 48px; }
    header .head_wrap.fixed .head_btn {
      margin-top: 14px; }
      header .head_wrap.fixed .head_btn a {
        height: 48px;
        padding: 10px; }
    header .head_wrap.fixed .openbtn {
      top: 3px; }

.more_link {
  position: absolute;
  right: 0;
  top: 0; }
  .more_link a {
    font-size: 18px;
    background: url("../images/common/link_line.svg") no-repeat 0 50%;
    display: block;
    padding: 0 0 0 64px; }
    .more_link a:hover {
      opacity: .5; }

.more_link_wh a {
  font-size: 18px;
  background: url("../images/common/link_line_wh.svg") no-repeat 0 50%;
  display: block;
  padding: 0 0 0 64px;
  color: #fff; }
  .more_link_wh a:hover {
    opacity: .5; }

.ttl_base {
  position: relative;
  padding-bottom: 40px; }
  .ttl_base .en {
    color: #22499D;
    font-weight: 600;
    font-size: 15px;
    padding-bottom: 12px; }
  .ttl_base h2 {
    font-weight: 800;
    font-size: 30px; }

.btn a {
  background: #22499D;
  color: #fff;
  text-align: center;
  font-weight: bold;
  padding: 16px;
  width: 180px;
  display: block;
  margin: auto; }
  .btn a:hover {
    opacity: .5; }

.entry_btn a {
  display: block;
  border-radius: 100px;
  background: url("../images/recruit/link_bg.svg") no-repeat 0 0/cover;
  box-shadow: 0px 4px 20px 0px rgba(182, 131, 0, 0.2);
  color: #000;
  font-weight: 700;
  height: 60px;
  padding: 18px;
  text-align: center; }
  .entry_btn a:hover {
    background: url("../images/recruit/link_bg_h.svg") no-repeat 0 0/cover;
    color: #fff; }

.opening_anime_wrap {
  background-color: #ffffff;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  display: flex;
  align-items: center; }

/* line 19, ../scss/object/project/_animation.scss */
.opening_anime_slidebox {
  background: linear-gradient(to right, #4ABEEE 0%, #1D58A4 100%);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  transform: translateY(100%); }

/* line 29, ../scss/object/project/_animation.scss */
.opening_anime_txt_wrap {
  overflow: hidden; }

/* line 32, ../scss/object/project/_animation.scss */
.opening_anime_txts {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1000px;
  margin-left: calc((100vw - 1000px) / 2);
  text-align: center;
  font-weight: 500; }

.opening_anime_txt {
  display: inline-block;
  opacity: 0;
  padding: 30px 0;
  font-weight: 800; }
  .opening_anime_txt.opening_anime_txt1 {
    font-size: 5rem;
    transform: translateX(100%);
    color: #e70025; }
  .opening_anime_txt.opening_anime_txt2 {
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(90deg, #000 0%, #072e59 40%, #1D58A4 42%, #035db6 51%, #4ABEEE 57%, #072e59 60%, #000 70%);
    background-size: 260%;
    background-position: 100% 0%;
    background-repeat: no-repeat;
    color: transparent;
    font-size: 2.5rem;
    transform: translateX(300%);
    padding: 30px 0 10px 0;
    margin-left: -20px; }

@media screen and (max-width: 768px) {
  /* line 32, ../scss/object/project/_animation.scss */
  .opening_anime_txts {
    width: 720px;
    margin-left: calc((100vw - 720px) / 2); }

  .opening_anime_txt.opening_anime_txt1 {
    font-size: 4.5rem; }
  .opening_anime_txt.opening_anime_txt2 {
    font-size: 3.5rem; } }
@media screen and (max-width: 480px) {
  /* line 32, ../scss/object/project/_animation.scss */
  .opening_anime_txts {
    width: 400px;
    font-size: 2.4rem;
    margin-left: calc((100vw - 400px) / 2); }

  .opening_anime_txt.opening_anime_txt1 {
    font-size: 3rem;
    line-height: 100%; }
  .opening_anime_txt.opening_anime_txt2 {
    font-size: 1.3rem;
    text-align: left;
    padding-top: 0; } }
/* line 71, ../scss/object/project/_animation.scss */
.opening_anime_txt .fontchange {
  font-size: 80%; }

.opening_anime_txt .fontchange2 {
  font-weight: 300; }

@keyframes triggerLine {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: right center;
    transform-origin: right center; }
  50% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right center;
    transform-origin: right center; }
  50.1% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    transform-origin: left center; }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: left center;
    transform-origin: left center; } }
/* =================================================================

    各ページインポート

================================================================= */
#home .mv {
  position: relative;
  background: url("../images/recruit/mv.jpg") no-repeat 0 0/cover;
  height: 100vh;
  z-index: 0; }
  #home .mv .txt {
    position: absolute;
    top: 4vw;
    left: -3vw;
    width: 51vw; }
  #home .mv .obj {
    position: absolute;
    bottom: -50px;
    width: 100%; }
#home .sec1 {
  margin-top: 40px;
  padding: 120px 0;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover; }
  #home .sec1 .bg_left::after {
    content: '';
    display: block;
    width: 200%;
    height: calc(100% - 57px);
    background-color: #fff;
    position: absolute;
    border-radius: 0 56px 56px 0;
    right: 23%;
    bottom: 0;
    z-index: -1; }
  #home .sec1 .img {
    width: 430px;
    position: absolute;
    right: 14%;
    top: 0; }
  #home .sec1 p {
    margin-bottom: 16px; }
#home .sec2 {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
  padding-bottom: 200px; }
  #home .sec2 .bg_right::after {
    content: '';
    display: block;
    width: 200%;
    height: calc(100% - 240px);
    background-color: #fff;
    position: absolute;
    border-radius: 56px 0 0 56px;
    left: 50%;
    bottom: 0;
    z-index: -1;
    top: 300px; }
  #home .sec2 .img {
    width: 40%;
    min-width: 56%;
    position: absolute;
    left: 0%;
    top: 0;
    z-index: -2; }
  #home .sec2 .in_wrap {
    margin-left: 57%; }
  #home .sec2 .sec_bg {
    background: url("../images/recruit/sec2_2.svg") no-repeat 50% 0;
    position: relative;
    z-index: -3;
    margin-top: 24px;
    padding: 360px 0 0; }
  #home .sec2 p {
    margin-bottom: 16px; }
#home .sec3 {
  background: linear-gradient(315deg, #1D58A4 14.43%, #37ACDC 87%);
  padding: 64px 0 0; }
  #home .sec3 .sec_bg {
    background: url("../images/recruit/sec3_2.svg") no-repeat 50% 0;
    padding-bottom: 120px; }
  #home .sec3 .ttl_base {
    color: #fff;
    text-align: center;
    background: url("../images/recruit/sec3_1.svg") no-repeat 50% 50%; }
    #home .sec3 .ttl_base .en {
      color: #fff;
      padding-bottom: 20px; }
  #home .sec3 .inner {
    width: 812px; }
  #home .sec3 .two_col {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: space-between;
    height: 100%; }
    #home .sec3 .two_col .blk {
      flex-basis: calc((100% - 36px) / 2);
      max-width: calc((100% - 36px) / 2);
      margin-top: 36px; }
      #home .sec3 .two_col .blk a {
        display: block; }
        #home .sec3 .two_col .blk a:hover {
          opacity: .5; }
        #home .sec3 .two_col .blk a .body {
          position: relative;
          background: #fff;
          border-radius: 0 0 40px 40px; }
          #home .sec3 .two_col .blk a .body .label {
            background: #000;
            width: 108px;
            color: #fff;
            text-align: center;
            font-weight: bold;
            position: absolute;
            font-size: 14px;
            top: -20px;
            padding: 6px; }
          #home .sec3 .two_col .blk a .body h3 {
            font-weight: 800;
            padding: 40px 28px 0;
            font-size: 19px;
            color: #000; }
          #home .sec3 .two_col .blk a .body p {
            padding: 10px 28px 40px;
            color: #777;
            font-size: 15px; }
#home .sec4 {
  padding: 64px 0 0; }
  #home .sec4 .sec_bg {
    background: url("../images/recruit/sec4_6.svg") no-repeat 50% 0;
    padding-bottom: 120px; }
  #home .sec4 .ttl_base {
    text-align: center;
    background: url("../images/recruit/sec4_1.svg") no-repeat 50% 50%; }
    #home .sec4 .ttl_base .en {
      padding-bottom: 20px; }
    #home .sec4 .ttl_base span {
      font-size: 14px;
      font-weight: bold;
      padding: 16px 0 0 0;
      display: block; }
  #home .sec4 .four_col {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: space-between;
    height: 100%; }
    #home .sec4 .four_col .blk {
      flex-basis: calc((100% - 28px) / 4);
      max-width: calc((100% - 28px) / 4);
      margin-top: 36px; }
  #home .sec4 .caution {
    text-align: right;
    padding-top: 16px;
    font-size: 13px; }
#home .sec5 {
  background: linear-gradient(315deg, #1D58A4 14.43%, #37ACDC 87%);
  padding: 64px 0 0; }
  #home .sec5 .ttl_base {
    color: #fff;
    text-align: center;
    background: url("../images/recruit/sec5_1.svg") no-repeat 50% 50%; }
    #home .sec5 .ttl_base .en {
      color: #fff;
      padding-bottom: 20px; }
  #home .sec5 .three_col {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: space-between;
    height: 100%; }
    #home .sec5 .three_col .blk {
      flex-basis: calc((100% - 28px) / 3);
      max-width: calc((100% - 28px) / 3);
      margin-top: 36px; }
      #home .sec5 .three_col .blk a {
        text-align: center;
        color: #fff;
        font-weight: 800;
        padding: 380px 0 120px 0;
        margin-top: -100px; }
        #home .sec5 .three_col .blk a .t1 {
          font-size: 12px;
          font-weight: normal; }
        #home .sec5 .three_col .blk a.btm {
          margin-top: -130px; }
  #home .sec5 .link1 a {
    display: block;
    background: url("../images/recruit/link1.png") no-repeat 0 0/100%;
    width: 320px;
    height: 400px; }
    #home .sec5 .link1 a:hover {
      background: url("../images/recruit/link1_h.png") no-repeat 0 0/100%; }
  #home .sec5 .link2 a {
    display: block;
    background: url("../images/recruit/link2.png") no-repeat 0 46px/100%;
    width: 320px;
    height: 400px; }
    #home .sec5 .link2 a:hover {
      background: url("../images/recruit/link2_h.png") no-repeat 0 46px/100%; }
  #home .sec5 .link3 a {
    display: block;
    background: url("../images/recruit/link3.png") no-repeat 0 0/100%;
    width: 320px;
    height: 400px; }
    #home .sec5 .link3 a:hover {
      background: url("../images/recruit/link3_h.png") no-repeat 0 0/100%; }
  #home .sec5 .link4 a {
    display: block;
    background: url("../images/recruit/link4.png") no-repeat 0 0/100%;
    width: 320px;
    height: 400px; }
    #home .sec5 .link4 a:hover {
      background: url("../images/recruit/link4_h.png") no-repeat 0 0/100%; }
  #home .sec5 .link5 a {
    display: block;
    background: url("../images/recruit/link5.png") no-repeat 0 86px/100%;
    width: 320px;
    height: 400px; }
    #home .sec5 .link5 a:hover {
      background: url("../images/recruit/link5_h.png?") no-repeat 0 86px/100%; }
  #home .sec5 .link6 a {
    display: block;
    background: url("../images/recruit/link6.png") no-repeat 0 46px/100%;
    width: 320px;
    height: 400px; }
    #home .sec5 .link6 a:hover {
      background: url("../images/recruit/link6_h.png") no-repeat 0 46px/100%; }
#home .sec6 {
  padding: 64px 0 120px; }
  #home .sec6 .ttl_base {
    text-align: center;
    background: url("../images/recruit/sec6_1.svg") no-repeat 50% 50%; }
    #home .sec6 .ttl_base .en {
      padding-bottom: 20px; }
  #home .sec6 .body h3 {
    font-weight: 800;
    font-size: 24px;
    margin: 30px 0 24px 0; }
#home .sec7 {
  padding: 196px 0 160px;
  background: url("../images/recruit/sec7_1.jpg") no-repeat 50% 0/cover;
  color: #fff; }
  #home .sec7 .ttl_base {
    color: #fff; }
    #home .sec7 .ttl_base .en {
      padding-bottom: 20px;
      color: #fff; }
  #home .sec7 .body h3 {
    font-weight: 800;
    font-size: 24px;
    margin: 30px 0 24px 0; }
  #home .sec7 .body p {
    margin-bottom: 16px; }
  #home .sec7 .btn_w {
    margin: 40px 0 0; }
    #home .sec7 .btn_w a {
      display: block;
      background: #fff;
      text-align: center;
      padding: 10px;
      color: #000;
      width: 140px;
      font-size: 14px;
      font-weight: bold; }
      #home .sec7 .btn_w a:hover {
        opacity: .5; }
#home .sec8 {
  padding: 64px 0 120px; }
  #home .sec8 .ttl_base {
    text-align: center;
    background: url("../images/recruit/sec8_1.svg") no-repeat 50% 50%; }
    #home .sec8 .ttl_base .en {
      padding-bottom: 20px; }
  #home .sec8 .two_col {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: space-between;
    height: 100%; }
    #home .sec8 .two_col .blk {
      flex-basis: calc((100% - 24px) / 2);
      max-width: calc((100% - 24px) / 2); }
      #home .sec8 .two_col .blk .fadein {
        margin-top: 24px; }
  #home .sec8 .btn {
    padding: 40px 0 120px; }

/* =================================================================

    職種

================================================================= */
#jobs .page_head {
  position: relative;
  height: 440px;
  background: url("../images/recruit/jobs_head_bg.svg") no-repeat 100% 100%; }
  #jobs .page_head .body {
    position: relative;
    z-index: 1; }
    #jobs .page_head .body .ttl {
      position: absolute;
      top: 0;
      left: 0;
      padding: 200px 0; }
      #jobs .page_head .body .ttl .en {
        font-weight: 800;
        color: #22499D;
        font-size: 65px;
        position: relative;
        z-index: 1; }
      #jobs .page_head .body .ttl h1 {
        font-weight: bold;
        padding-top: 36px;
        font-size: 25px; }
    #jobs .page_head .body .pic {
      position: absolute;
      top: 0;
      right: -100px;
      width: 800px; }
#jobs .intro {
  background: #22499D;
  color: #fff;
  padding: 60px 0 70px;
  z-index: 0;
  width: 100%; }
  #jobs .intro h2 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 24px; }
#jobs .page_navi {
  background: #fff;
  padding: 24px; }
  #jobs .page_navi .wrap {
    display: flex;
    justify-content: center; }
    #jobs .page_navi .wrap .btns {
      margin: 0 16px; }
      #jobs .page_navi .wrap .btns a {
        display: block;
        border: #CED4E1 solid 1px;
        border-radius: 100px;
        padding: 8px;
        width: 300px;
        text-align: center;
        font-weight: bold;
        background: url("../images/recruit/arrow_down.svg") no-repeat calc(100% - 24px) 50%; }
        #jobs .page_navi .wrap .btns a:hover {
          background: #CED4E1 url("../images/recruit/arrow_down.svg") no-repeat calc(100% - 24px) 50%; }
#jobs .sec_base {
  margin: 80px 0 120px; }
  #jobs .sec_base .ttlarea {
    text-align: center; }
    #jobs .sec_base .ttlarea .en {
      font-weight: 800;
      font-size: 15px;
      color: #22499D; }
    #jobs .sec_base .ttlarea h2 {
      font-weight: 800;
      font-size: 30px;
      padding: 10px 0 50px; }
  #jobs .sec_base .body {
    background: #fff;
    padding: 40px 64px 64px 64px; }
    #jobs .sec_base .body table {
      width: 100%; }
      #jobs .sec_base .body table th, #jobs .sec_base .body table td {
        border-bottom: #CED4E1 solid 1px;
        padding: 20px 8px; }
      #jobs .sec_base .body table th {
        width: 20%;
        color: #22499D; }
      #jobs .sec_base .body table td {
        width: 80%; }
  #jobs .sec_base .entry_btn {
    padding: 40px 0 0; }
    #jobs .sec_base .entry_btn a {
      width: 30%;
      margin: auto; }
#jobs #s2 {
  border-top: #CED4E1 solid 1px;
  padding: 48px 0 0 0; }
#jobs #home {
  background: linear-gradient(315deg, #1D58A4 14.43%, #37ACDC 87%); }
  #jobs #home .sec5, #jobs #home .sec3 {
    background: none; }

/* =================================================================

    スタッフ

================================================================= */
#staff {
  padding-top: 120px; }
  #staff .page_head {
    background: #22499D;
    color: #fff;
    padding: 40px; }
    #staff .page_head .inner {
      display: flex; }
      #staff .page_head .inner .photo {
        order: 2;
        width: 70%; }
      #staff .page_head .inner .info {
        margin-top: 80px;
        order: 1;
        width: 30%; }
        #staff .page_head .inner .info .names {
          background: url("../images/common/link_line_wh.svg") no-repeat 0 0;
          padding-top: 30px; }
          #staff .page_head .inner .info .names .t1 {
            font-size: 16px;
            font-weight: bold;
            padding-bottom: 16px; }
          #staff .page_head .inner .info .names .t2 {
            font-size: 25px;
            font-weight: bold; }
            #staff .page_head .inner .info .names .t2 span {
              font-weight: normal;
              font-size: 15px;
              padding-left: 16px; }
        #staff .page_head .inner .info .prof {
          margin-top: 50px; }
          #staff .page_head .inner .info .prof .en {
            font-weight: 800;
            background: url("../images/recruit/staff_icon_yellow.svg") no-repeat 0 50%/22px;
            padding: 0 0 0 35px;
            margin-bottom: 16px; }
          #staff .page_head .inner .info .prof .detail {
            font-size: 15px; }
            #staff .page_head .inner .info .prof .detail .s_ttl {
              background: url("../images/recruit/staff_icon_blue.svg") no-repeat 3px 50%/16px;
              padding: 0 0 0 35px;
              margin-bottom: 4px;
              font-weight: bold; }
            #staff .page_head .inner .info .prof .detail p {
              margin-bottom: 16px;
              padding: 0 0 0 35px; }
  #staff .sec_base {
    padding: 80px 0; }
    #staff .sec_base h2 {
      font-size: 24px;
      background: url("../images/recruit/staff_h2.svg") no-repeat 0 50%;
      padding-left: 40px;
      font-weight: bold;
      color: #22499D;
      margin: 10px 0 24px; }
    #staff .sec_base p {
      margin-bottom: 20px;
      padding-left: 40px; }
    #staff .sec_base .base1 {
      display: flex;
      padding-bottom: 60px; }
      #staff .sec_base .base1 .img {
        order: 1;
        width: 46%;
        margin-right: 4%; }
      #staff .sec_base .base1 .body {
        order: 2;
        width: 50%; }
    #staff .sec_base .base2 {
      padding-bottom: 60px; }
    #staff .sec_base .base3 {
      display: flex;
      padding-bottom: 60px; }
      #staff .sec_base .base3 .img {
        order: 2;
        width: 46%;
        margin-left: 4%; }
      #staff .sec_base .base3 .body {
        order: 1;
        width: 50%; }
  #staff .entry_btn {
    width: 400px;
    margin: auto; }
  #staff #home {
    background: linear-gradient(315deg, #1D58A4 14.43%, #37ACDC 87%); }
    #staff #home .sec5, #staff #home .sec3 {
      background: none; }

/* =================================================================

    entry

================================================================= */
#entry {
  background: linear-gradient(315deg, #1D58A4 14.43%, #37ACDC 87%);
  padding: 160px 0; }
  #entry .pttl {
    color: #fff;
    text-align: center;
    padding-bottom: 100px; }
    #entry .pttl h1 {
      font-size: 48px;
      margin-bottom: 20px;
      font-weight: 800; }
  #entry .inner {
    padding: 40px 80px;
    background: #fff; }
  #entry .base {
    border-bottom: #CED4E1 solid 1px;
    padding: 24px 0;
    font-size: 15px; }
    #entry .base p {
      margin: 8px 0; }
    #entry .base .ttl {
      font-weight: 700;
      font-size: 17px;
      margin-bottom: 16px; }
      #entry .base .ttl span.must {
        background: #BC070A;
        color: #fff;
        font-size: 10px;
        font-weight: normal;
        padding: 2px 5px 4px;
        margin-left: 10px;
        line-height: 100%; }
    #entry .base label {
      display: block; }
    #entry .base input[type="text"], #entry .base input[type="tel"], #entry .base input[type="email"] {
      background: #ECEFF4;
      padding: 10px 16px;
      width: 100%;
      border-radius: 5px; }
    #entry .base textarea {
      background: #ECEFF4;
      padding: 10px 16px;
      width: 100%;
      border-radius: 5px;
      height: 200px; }
    #entry .base ::placeholder {
      color: #A0ABB0; }
    #entry .base input.ss {
      width: 30%; }
    #entry .base .two {
      display: flex;
      flex-wrap: wrap;
      align-content: stretch;
      justify-content: space-between;
      height: 100%; }
      #entry .base .two .blk {
        flex-basis: calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2); }
    #entry .base .three {
      display: flex;
      flex-wrap: wrap;
      align-content: stretch;
      justify-content: space-between;
      height: 100%; }
      #entry .base .three .blk {
        flex-basis: calc((100% - 20px) / 3);
        max-width: calc((100% - 20px) / 3); }
  #entry .selectbox-006 {
    position: relative;
    width: 100%; }
  #entry .selectbox-006::before,
  #entry .selectbox-006::after {
    position: absolute;
    right: 15px;
    width: 9px;
    height: 6px;
    background-color: #333;
    content: '';
    pointer-events: none; }
  #entry .selectbox-006::before {
    top: calc(50% - 9px);
    clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  #entry .selectbox-006::after {
    bottom: calc(50% - 9px);
    clip-path: polygon(0 0, 50% 100%, 100% 0); }
  #entry .selectbox-006 select {
    appearance: none;
    min-width: 100%;
    height: 2.8em;
    padding: 0.4em calc(.8em + 30px) 0.4em 0.8em;
    border-radius: 3px;
    background-color: #ECEFF4;
    color: #333333;
    font-size: 1em;
    cursor: pointer; }
  #entry .radio-001 {
    display: flex;
    flex-wrap: wrap;
    gap: .3em 2em;
    border: none; }
  #entry .radio-001 label {
    display: flex;
    align-items: center;
    gap: 0 .5em;
    position: relative;
    cursor: pointer;
    width: 100%; }
  #entry .radio-001 label::before,
  #entry .radio-001 label:has(:checked)::after {
    border-radius: 50%;
    content: ''; }
  #entry .radio-001 label::before {
    width: 18px;
    height: 18px;
    background-color: #ECEFF4; }
  #entry .radio-001 label:has(:checked)::after {
    position: absolute;
    top: 50%;
    left: 9px;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: #22499D;
    animation: anim-radio-001 .3s linear; }
@keyframes anim-radio-001 {
  0% {
    box-shadow: 0 0 0 1px transparent; }
  50% {
    box-shadow: 0 0 0 10px #2589d033; }
  100% {
    box-shadow: 0 0 0 10px transparent; } }
  #entry .radio-001 input {
    display: none; }
  #entry .prvacy {
    background: #f9f9f9;
    margin-top: 36px;
    padding: 24px; }
    #entry .prvacy h3 {
      font-weight: bold;
      margin-bottom: 10px; }
    #entry .prvacy p {
      font-size: 14px;
      color: #777; }
    #entry .prvacy .btn {
      padding-top: 20px; }
      #entry .prvacy .btn a {
        font-size: 14px;
        background: #fff;
        color: #777;
        width: 280px;
        border-radius: 100px;
        border: #ddd solid 1px;
        padding: 8px; }
  #entry .mes {
    font-size: 14px;
    text-align: center;
    margin: 24px 0; }
  #entry .btn_submit input[type="submit"] {
    background: #22499D;
    color: #fff;
    font-weight: 700;
    width: 50%;
    margin: 24px auto;
    padding: 16px;
    display: block;
    border: none;
    border-radius: 100px;
    text-align: center; }
    #entry .btn_submit input[type="submit"]:hover {
      opacity: 0.6; }
  #entry .end {
    text-align: center;
    color: #fff; }
    #entry .end a {
      color: #fff;
      font-weight: bold; }

/* =================================================================

    office

================================================================= */
#office .page_head .ttl {
  text-align: center;
  padding: 50px 0 70px; }
  #office .page_head .ttl .en {
    font-size: 15px;
    font-weight: 800;
    color: #22499D; }
  #office .page_head .ttl h1 {
    font-size: 30px;
    font-weight: 800;
    padding: 10px 0 20px; }
  #office .page_head .ttl p {
    color: #777; }
#office .base {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: space-between;
  height: 100%; }
  #office .base img {
    display: block;
    margin-bottom: 24px; }
  #office .base .txt {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%; }
  #office .base.r1 .box_l {
    width: calc(60% - 12px); }
  #office .base.r1 .box_r {
    width: calc(40% - 12px); }
  #office .base.r2 .box_l {
    width: calc(40% - 12px); }
  #office .base.r2 .box_r {
    width: calc(60% - 12px); }
  #office .base.r4 .box_l {
    width: calc(60% - 12px); }
  #office .base.r4 .box_r {
    width: calc(40% - 12px); }
  #office .base.r5 .box_l {
    width: calc(41% - 12px); }
  #office .base.r5 .box_r {
    width: calc(59% - 12px); }
  #office .base.r6 .box_l {
    width: calc(58.5% - 12px); }
  #office .base.r6 .box_r {
    width: calc(41.5% - 12px); }
#office .entry_btn {
  margin: 80px auto 120px;
  width: 300px; }
#office #home {
  background: linear-gradient(315deg, #1D58A4 14.43%, #37ACDC 87%); }
  #office #home .sec5, #office #home .sec3 {
    background: none; }

/* =================================================================

    r_data

================================================================= */
#r_data .page_head .ttl {
  text-align: center;
  padding: 50px 0 70px; }
  #r_data .page_head .ttl .en {
    font-size: 15px;
    font-weight: 800;
    color: #22499D; }
  #r_data .page_head .ttl h1 {
    font-size: 30px;
    font-weight: 800;
    padding: 10px 0 20px; }
  #r_data .page_head .ttl p {
    color: #777; }
#r_data .two_col {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: space-between;
  height: 100%; }
  #r_data .two_col .blk {
    flex-basis: calc((100% - 36px) / 2);
    max-width: calc((100% - 36px) / 2); }
    #r_data .two_col .blk div {
      padding-bottom: 36px; }
#r_data .entry_btn {
  margin: 80px auto 120px;
  width: 300px; }
#r_data #home {
  background: linear-gradient(315deg, #1D58A4 14.43%, #37ACDC 87%); }
  #r_data #home .sec5, #r_data #home .sec3 {
    background: none; }

/* =================================================================

    フッター

================================================================= */
footer {
  background: #151E2F;
  color: #fff;
  padding: 0 0 40px; }
  footer a {
    color: #fff; }
  footer .linkarea {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: space-between;
    height: 100%; }
    footer .linkarea .left {
      padding: 40px 0 0 48px;
      width: 24%;
      font-size: 13px;
      padding-bottom: 80px; }
      footer .linkarea .left .top_link {
        font-weight: 800;
        font-size: 19px;
        margin: 24px 0 8px;
        display: block; }
      footer .linkarea .left .b_link a {
        font-size: 13px;
        display: block; }
      footer .linkarea .left a:hover {
        color: #FDFE06; }
    footer .linkarea .right {
      float: right;
      width: 76%; }
      footer .linkarea .right a {
        display: block;
        background: url("../images/recruit/link_bg.svg") no-repeat 0 0/cover;
        padding: 160px 0;
        transform: 0.3s; }
        footer .linkarea .right a:hover {
          background: url("../images/recruit/link_bg_h.svg") no-repeat 0 0/cover; }
        footer .linkarea .right a img {
          display: block;
          width: 300px;
          margin: auto; }
  footer .left {
    float: left;
    width: 50%;
    font-size: 13px;
    padding-bottom: 80px;
    padding-left: 48px; }
    footer .left .logo {
      width: 336px; }
    footer .left .ad1 {
      margin: 3em 0 1em; }
  footer .copy {
    clear: both;
    font-size: 13px;
    padding: 0 0 60px 0; }
    footer .copy p {
      float: left;
      width: 50%;
      padding-left: 48px; }
    footer .copy .f_btn {
      float: left;
      width: 50%;
      text-align: right;
      padding-right: 48px; }
      footer .copy .f_btn a {
        display: block;
        width: 240px;
        float: right; }
        footer .copy .f_btn a:hover {
          opacity: .5; }

/* =================================================================

    アニメーション

================================================================= */
.reveal-text,
.reveal-text::after {
  animation-delay: var(--animation-delay, 2s);
  animation-iteration-count: var(--iterations, 1);
  animation-duration: var(--duration, 800ms);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }

.blue .reveal-text {
  --animation-delay: var(--delay, 0);
  --animation-duration: var(--duration, 800ms);
  --animation-iterations: var(--iterations, 1);
  position: relative;
  animation-name: clip-text;
  white-space: nowrap;
  cursor: default; }
  .blue .reveal-text::after {
    content: "";
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #22499D;
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
    animation-name: text-revealer; }

.black .reveal-text {
  --animation-delay: var(--delay, 0);
  --animation-duration: var(--duration, 500ms);
  --animation-iterations: var(--iterations, 1);
  position: relative;
  animation-name: clip-text;
  white-space: nowrap;
  cursor: default; }
  .black .reveal-text::after {
    content: "";
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
    animation-name: text-revealer; }

@keyframes clip-text {
  from {
    clip-path: inset(0 100% 0 0); }
  to {
    clip-path: inset(0 0 0 0); } }
@keyframes text-revealer {
  0%, 50% {
    transform-origin: 0 50%; }
  60%, 100% {
    transform-origin: 100% 50%; }
  60% {
    transform: scaleX(1); }
  100% {
    transform: scaleX(0); } }
.effect {
  margin: 0;
  line-height: 1; }
  .effect span {
    display: inline-block;
    padding: 4px 0;
    position: relative;
    animation-delay: var(--animation-delay, 2s);
    /* アニメーションの開始タイミング */
    animation-iteration-count: var(--iterations, 1);
    /* 再生される回数 */
    animation-duration: var(--duration, 800ms);
    /* 完了するまでの所要時間 */
    animation-fill-mode: both;
    /* 実行の前後 */
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    /* タイミングの指定 */ }
    .effect span::after {
      animation-delay: var(--animation-delay, 2s);
      /* アニメーションの開始タイミング */
      animation-iteration-count: var(--iterations, 1);
      /* 再生される回数 */
      animation-duration: var(--duration, 800ms);
      /* 完了するまでの所要時間 */
      animation-fill-mode: both;
      /* 実行の前後 */
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
      /* タイミングの指定 */ }
  .effect.scroll-in span {
    --animation-delay:var(--delay, 0);
    --animation-duration:var(--duration, 800ms);
    --animation-iterations:var(--iterations, 1);
    position: relative;
    animation-name: clip-text;
    white-space: nowrap; }
    .effect.scroll-in span::after {
      content: "";
      position: absolute;
      z-index: 10;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #22499D;
      transform: scaleX(0);
      transform-origin: 0 50%;
      pointer-events: none;
      animation-name: text-revealer; }

@keyframes clip-text {
  from {
    clip-path: inset(0 100% 0 0); }
  to {
    clip-path: inset(0 0 0 0); } }
@keyframes text-revealer {
  0%, 50% {
    transform-origin: 0 50%; }
  60%, 100% {
    transform-origin: 100% 50%; }
  60% {
    transform: scaleX(1); }
  100% {
    transform: scaleX(0); } }
.topCurtainbg {
  display: block;
  content: "";
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  transform: scaleY(0);
  background-color: #22499D;
  animation-name: curtainAnime;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards; }

@keyframes curtainAnime {
  0% {
    transform-origin: top;
    transform: scaleY(0); }
  50% {
    transform-origin: top;
    transform: scaleY(1); }
  50.001% {
    transform-origin: bottom; }
  100% {
    transform-origin: bottom;
    transform: scaleY(0); } }
.fadeout {
  animation: fadeOut 1s;
  animation-fill-mode: both; }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
#container {
  opacity: 0;
  /*はじめは透過0に*/ }

/*bodyにpageOnクラスがついたら出現*/
body.pageOn #container {
  animation-name: PageAnimeOn;
  animation-duration: 1s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes PageAnimeOn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/* ============================================================================================================

    スマホ

============================================================================================================ */
@media screen and (max-width: 768px) {
  	/* =================================================================
  
  		共通
  
  	================================================================= */
  body {
    line-height: 185%;
    font-size: 14px; }

  .inner {
    width: auto;
    margin: auto;
    padding: 0 24px; }

  .inner_s {
    width: auto;
    margin: auto;
    padding: 0 24px; }

  header {
    height: 136px; }
    header .head_wrap, header .head_wrap.fixed {
      /*アクティブクラスがついたら透過なしにして最前面へ*/
      /*ナビゲーションの縦スクロール*/
      /*ナビゲーション*/
      /*リストのレイアウト設定*/
      /*========= ボタンのためのCSS ===============*/
      /*×に変化*/ }
      header .head_wrap .head_in .logo, header .head_wrap.fixed .head_in .logo {
        width: 50vw;
        padding: 18px 0 0 16px;
        float: left; }
      header .head_wrap .head_in .head_btn, header .head_wrap.fixed .head_in .head_btn {
        float: right;
        margin: 18px 60px 0 0; }
        header .head_wrap .head_in .head_btn a, header .head_wrap.fixed .head_in .head_btn a {
          display: block;
          border-radius: 100px;
          background: url("../images/recruit/link_bg.svg") no-repeat 0 0/cover;
          box-shadow: 0px 4px 20px 0px rgba(182, 131, 0, 0.85);
          color: #000;
          font-weight: 700;
          width: 100%;
          height: 40px;
          padding: 8px 8vw;
          text-align: center; }
          header .head_wrap .head_in .head_btn a:hover, header .head_wrap.fixed .head_in .head_btn a:hover {
            background: url("../images/recruit/link_bg_h.svg") no-repeat 0 0/cover; }
      header .head_wrap .head_in nav, header .head_wrap.fixed .head_in nav {
        padding-right: 24px; }
        header .head_wrap .head_in nav ul, header .head_wrap.fixed .head_in nav ul {
          display: flex;
          flex-wrap: wrap;
          align-content: stretch;
          justify-content: space-between;
          height: 100%;
          align-content: center; }
          header .head_wrap .head_in nav ul li a, header .head_wrap.fixed .head_in nav ul li a {
            display: block;
            color: #000;
            font-weight: bold;
            padding: 48px 16px;
            font-size: 14px; }
            header .head_wrap .head_in nav ul li a:hover, header .head_wrap.fixed .head_in nav ul li a:hover {
              color: #22499D; }
      header .head_wrap #g-nav, header .head_wrap.fixed #g-nav {
        /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
        position: fixed;
        z-index: -1;
        opacity: 0;
        /*はじめは透過0*/
        /*ナビの位置と形状*/
        top: 0;
        width: 100%;
        height: 100vh;
        /*ナビの高さ*/
        background: #22499D;
        /*動き*/
        transition: all 0.3s;
        display: none; }
      header .head_wrap #g-nav.panelactive, header .head_wrap.fixed #g-nav.panelactive {
        opacity: 1;
        z-index: 999;
        display: block; }
      header .head_wrap #g-nav.panelactive #g-nav-list, header .head_wrap.fixed #g-nav.panelactive #g-nav-list {
        /*ナビの数が増えた場合縦スクロール*/
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100vh;
        /*表示する高さ*/
        overflow: auto;
        -webkit-overflow-scrolling: touch; }
      header .head_wrap #g-nav ul, header .head_wrap.fixed #g-nav ul {
        display: none;
        /*ナビゲーション天地中央揃え*/
        position: absolute;
        z-index: 999;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 0; }
      header .head_wrap #g-nav.panelactive ul, header .head_wrap.fixed #g-nav.panelactive ul {
        display: block;
        padding-top: 80px !important; }
      header .head_wrap #g-nav li, header .head_wrap.fixed #g-nav li {
        list-style: none; }
      header .head_wrap #g-nav li a, header .head_wrap.fixed #g-nav li a {
        color: #fff;
        text-decoration: none;
        padding: 16px 16px 16px 80px;
        font-size: 15px; }
        header .head_wrap #g-nav li a:hover, header .head_wrap.fixed #g-nav li a:hover {
          color: #FDFE06; }
      header .head_wrap .openbtn, header .head_wrap.fixed .openbtn {
        position: fixed;
        z-index: 9999;
        /*ボタンを最前面に*/
        top: 1px;
        right: 30px;
        cursor: pointer;
        width: 40px;
        height: 30px; }
      header .head_wrap .openbtn span, header .head_wrap.fixed .openbtn span {
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 22px;
        height: 2px;
        background-color: #000;
        width: 80%; }
      header .head_wrap .openbtn span:nth-of-type(1), header .head_wrap.fixed .openbtn span:nth-of-type(1) {
        top: 24px; }
      header .head_wrap .openbtn span:nth-of-type(2), header .head_wrap.fixed .openbtn span:nth-of-type(2) {
        top: 36px; }
      header .head_wrap .openbtn span:nth-of-type(3), header .head_wrap.fixed .openbtn span:nth-of-type(3) {
        top: 48px; }
      header .head_wrap .openbtn.active span:nth-of-type(1), header .head_wrap.fixed .openbtn.active span:nth-of-type(1) {
        top: 24px;
        left: 24px;
        transform: translateY(6px) rotate(-45deg);
        width: 80%;
        background-color: #fff; }
      header .head_wrap .openbtn.active span:nth-of-type(2), header .head_wrap.fixed .openbtn.active span:nth-of-type(2) {
        opacity: 0; }
      header .head_wrap .openbtn.active span:nth-of-type(3), header .head_wrap.fixed .openbtn.active span:nth-of-type(3) {
        top: 36px;
        left: 24px;
        transform: translateY(-6px) rotate(45deg);
        width: 80%;
        background-color: #fff; }

  .ttl_base {
    position: relative;
    padding-bottom: 40px; }
    .ttl_base .en {
      color: #22499D;
      font-weight: 600;
      font-size: 13px;
      padding-bottom: 12px; }
    .ttl_base h2 {
      font-weight: 800;
      font-size: 24px; }

  .btn a {
    background: #22499D;
    color: #fff;
    text-align: center;
    font-weight: bold;
    padding: 16px;
    width: 180px;
    display: block;
    margin: auto; }
    .btn a:hover {
      opacity: .5; }

  	/* =================================================================
  
  		トップｔ
  	================================================================= */
  #home .mv {
    position: relative;
    background: url("../images/recruit/mv.jpg") no-repeat 38% 0/cover;
    height: 100vh;
    z-index: 0; }
    #home .mv .txt {
      position: absolute;
      top: 13vw;
      left: -17vw;
      width: 115vw; }
    #home .mv .obj {
      position: absolute;
      bottom: -50px;
      width: 100%; }
  #home .sec1 {
    margin-top: 40px;
    padding: 120px 0;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover; }
    #home .sec1 .bg_left::after {
      content: '';
      display: block;
      width: 200%;
      height: calc(100% - 57px);
      background-color: #fff;
      position: absolute;
      border-radius: 0 25px 25px 0;
      right: 10%;
      bottom: 0;
      z-index: -1; }
    #home .sec1 .img {
      width: 50%;
      position: absolute;
      right: 16px;
      top: 0; }
    #home .sec1 .ttl_base {
      padding-bottom: 70px; }
    #home .sec1 .body {
      width: 85%; }
  #home .sec2 {
    padding-bottom: 200px; }
    #home .sec2 .bg_right::after {
      content: '';
      display: block;
      width: 200%;
      height: calc(100% - 240px);
      background-color: #fff;
      position: absolute;
      border-radius: 25px 0 0 25px;
      left: 8%;
      bottom: 0;
      z-index: -1;
      top: 300px; }
    #home .sec2 .img {
      width: 100%;
      min-width: 56%;
      position: absolute;
      left: 0%;
      top: 0;
      z-index: -2; }
    #home .sec2 .in_wrap {
      margin-left: 12%; }
    #home .sec2 .sec_bg {
      background: url("../images/recruit/sec2_2.svg") no-repeat 50% 0;
      position: relative;
      z-index: -3;
      margin-top: 24px;
      padding: 360px 0 0; }
  #home .sec3 {
    background: linear-gradient(315deg, #1D58A4 14.43%, #37ACDC 87%);
    padding: 64px 0 0; }
    #home .sec3 .sec_bg {
      background: url("../images/recruit/sec3_2.svg") no-repeat 50% 0;
      padding-bottom: 120px; }
    #home .sec3 .ttl_base {
      color: #fff;
      text-align: center;
      background: url("../images/recruit/sec3_1.svg") no-repeat 50% 50%; }
      #home .sec3 .ttl_base .en {
        color: #fff;
        padding-bottom: 20px; }
    #home .sec3 .inner {
      width: auto; }
    #home .sec3 .two_col {
      display: flex;
      flex-wrap: wrap;
      align-content: stretch;
      justify-content: space-between;
      height: 100%; }
      #home .sec3 .two_col .blk {
        flex-basis: calc((100% - 0px) / 1);
        max-width: calc((100% - 0px) / 1);
        margin-top: 36px; }
        #home .sec3 .two_col .blk a {
          display: block; }
          #home .sec3 .two_col .blk a:hover {
            opacity: .5; }
          #home .sec3 .two_col .blk a .body {
            position: relative;
            background: #fff;
            border-radius: 0 0 40px 40px; }
            #home .sec3 .two_col .blk a .body .label {
              background: #000;
              width: 108px;
              color: #fff;
              text-align: center;
              font-weight: bold;
              position: absolute;
              font-size: 12px;
              top: -20px;
              padding: 6px; }
            #home .sec3 .two_col .blk a .body h3 {
              font-weight: 800;
              padding: 40px 16px 0;
              font-size: 17px;
              color: #000; }
            #home .sec3 .two_col .blk a .body p {
              padding: 10px 16px 40px;
              color: #777;
              font-size: 13px; }
  #home .sec4 .accordion-container {
    margin: 0 auto 0;
    max-width: 100%;
    width: 100%; }
  #home .sec4 .accordion-list:not(:first-child) {
    margin-top: 10px; }
  #home .sec4 .accordion-title {
    cursor: pointer;
    padding: 18px 0px 18px 22vw;
    position: relative;
    color: #fff; }
    #home .sec4 .accordion-title.s1 {
      background: #000 url("../images/recruit/sec4_sp1.svg") no-repeat 0 0/contain; }
    #home .sec4 .accordion-title.s2 {
      background: #000 url("../images/recruit/sec4_sp2.svg") no-repeat 0 0/contain; }
    #home .sec4 .accordion-title.s3 {
      background: #000 url("../images/recruit/sec4_sp3.svg") no-repeat 0 0/contain; }
    #home .sec4 .accordion-title.s4 {
      background: #000 url("../images/recruit/sec4_sp4.svg") no-repeat 0 0/contain; }
  #home .sec4 .accordion-title:after {
    position: absolute;
    display: block;
    content: '';
    top: 40%;
    right: 22px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(135deg);
    transition: all .3s ease-in-out; }
  #home .sec4 .accordion-title.open:after {
    transform: rotate(-45deg);
    top: 45%; }
  #home .sec4 .accordion-text {
    display: none; }
    #home .sec4 .accordion-text p {
      padding: 0 24px;
      background: #fff; }
  #home .sec5 {
    background: linear-gradient(315deg, #1D58A4 14.43%, #37ACDC 87%);
    padding: 64px 0 0; }
    #home .sec5 .ttl_base {
      margin-bottom: 70px; }
      #home .sec5 .ttl_base .en {
        color: #fff;
        padding-bottom: 20px; }
    #home .sec5 .three_col {
      display: flex;
      flex-wrap: wrap;
      align-content: stretch;
      justify-content: space-between;
      height: 100%; }
      #home .sec5 .three_col .blk {
        flex-basis: calc((100% - 0px) / 2);
        max-width: calc((100% - 0px) / 2);
        margin-top: 36px; }
        #home .sec5 .three_col .blk a {
          text-align: center;
          color: #fff;
          font-weight: 800;
          padding: 54vw 0 120px 0;
          margin-top: -160px;
          width: 100%;
          height: 400px; }
          #home .sec5 .three_col .blk a .t1 {
            font-size: 12px;
            font-weight: normal; }
          #home .sec5 .three_col .blk a.btm {
            margin-top: -160px; }
    #home .sec5 .link1 a {
      background: url("../images/recruit/link1.png") no-repeat 0 0/100%; }
      #home .sec5 .link1 a:hover {
        background: url("../images/recruit/link1.png") no-repeat 0 0/100%; }
    #home .sec5 .link2 a {
      background: url("../images/recruit/link2.png") no-repeat 0 8vw/100%; }
      #home .sec5 .link2 a:hover {
        background: url("../images/recruit/link2.png") no-repeat 0 0/100%; }
    #home .sec5 .link3 a {
      display: block;
      background: url("../images/recruit/link3.png") no-repeat 0 0/100%; }
      #home .sec5 .link3 a:hover {
        background: url("../images/recruit/link3.png") no-repeat 0 0/100%; }
    #home .sec5 .link4 a {
      display: block;
      background: url("../images/recruit/link4.png") no-repeat 0 0/100%; }
      #home .sec5 .link4 a:hover {
        background: url("../images/recruit/link4.png") no-repeat 0 0/100%; }
    #home .sec5 .link5 a {
      display: block;
      background: url("../images/recruit/link5.png") no-repeat 0 14vw/100%;
      width: 320px;
      height: 400px; }
      #home .sec5 .link5 a:hover {
        background: url("../images/recruit/link5.png") no-repeat 0 14vw/100%; }
    #home .sec5 .link6 a {
      display: block;
      background: url("../images/recruit/link6.png") no-repeat 0 8vw/100%;
      width: 320px;
      height: 400px; }
      #home .sec5 .link6 a:hover {
        background: url("../images/recruit/link6.png") no-repeat 0 8vw/100%; }
  #home .sec6 {
    padding: 64px 0 120px; }
    #home .sec6 .ttl_base {
      text-align: center;
      background: url("../images/recruit/sec6_1.svg") no-repeat 50% 50%; }
      #home .sec6 .ttl_base .en {
        padding-bottom: 20px; }
    #home .sec6 .body h3 {
      font-weight: 800;
      font-size: 20px;
      margin: 30px 0 24px 0; }
  #home .sec7 {
    padding: 80px 0 80px;
    background: url("../images/recruit/sec7_1.jpg") no-repeat 50% 0/cover;
    color: #fff; }
    #home .sec7 .ttl_base {
      color: #fff; }
      #home .sec7 .ttl_base .en {
        padding-bottom: 20px;
        color: #fff; }
    #home .sec7 .body h3 {
      font-weight: 800;
      font-size: 18px;
      margin: 30px 0 24px 0; }
    #home .sec7 .btn_w {
      margin: 40px 0 0; }
      #home .sec7 .btn_w a {
        display: block;
        background: #fff;
        text-align: center;
        padding: 10px;
        color: #000;
        width: 140px;
        font-size: 14px;
        font-weight: bold; }
        #home .sec7 .btn_w a:hover {
          opacity: .5; }
  #home .sec8 {
    padding: 64px 0 0; }
    #home .sec8 .ttl_base {
      text-align: center;
      background: url("../images/recruit/sec8_1.svg") no-repeat 50% 50%; }
      #home .sec8 .ttl_base .en {
        padding-bottom: 20px; }
    #home .sec8 .two_col {
      display: flex;
      flex-wrap: wrap;
      align-content: stretch;
      justify-content: space-between;
      height: 100%; }
      #home .sec8 .two_col .blk {
        flex-basis: calc((100% - 0px) / 1);
        max-width: calc((100% - 0px) / 1); }
        #home .sec8 .two_col .blk .fadein {
          margin-top: 24px; }
    #home .sec8 .btn {
      padding: 40px 0 120px; }

  	/* =================================================================
  
  		職種
  
  	================================================================= */
  #jobs .page_head {
    position: relative;
    height: 380px;
    background: url("../images/recruit/jobs_head_bg.svg") no-repeat 100% 100%; }
    #jobs .page_head .body .ttl {
      padding: 280px 0; }
      #jobs .page_head .body .ttl .en {
        font-size: 40px; }
      #jobs .page_head .body .ttl h1 {
        padding-top: 20px;
        font-size: 20px; }
    #jobs .page_head .body .pic {
      position: absolute;
      top: 0;
      right: -100px;
      width: 125%; }
  #jobs .intro {
    padding: 40px 0 50px; }
    #jobs .intro h2 {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 24px; }
  #jobs .page_navi {
    padding: 10px 24px; }
    #jobs .page_navi .wrap {
      display: block; }
      #jobs .page_navi .wrap .btns {
        margin: 16px; }
  #jobs .sec_base {
    margin: 40px 0 60px; }
    #jobs .sec_base .ttlarea .en {
      font-size: 13px; }
    #jobs .sec_base .ttlarea h2 {
      font-weight: 800;
      font-size: 24px; }
    #jobs .sec_base .body {
      background: #fff;
      padding: 24px; }
      #jobs .sec_base .body table {
        width: 100%; }
        #jobs .sec_base .body table th, #jobs .sec_base .body table td {
          display: block;
          width: 100%;
          padding: 20px 8px; }
        #jobs .sec_base .body table th {
          color: #22499D;
          padding-bottom: 0;
          border-top: none;
          border-bottom: none; }
        #jobs .sec_base .body table td {
          padding-top: 4px;
          border-top: none;
          font-size: 13px; }
    #jobs .sec_base .entry_btn {
      padding: 40px 0 0; }
      #jobs .sec_base .entry_btn a {
        width: 80%;
        margin: auto; }
  #jobs #s2 {
    border-top: #CED4E1 solid 1px;
    padding: 48px 0 0 0; }
  #jobs #home {
    background: linear-gradient(315deg, #1D58A4 14.43%, #37ACDC 87%); }
    #jobs #home .sec5, #jobs #home .sec3 {
      background: none; }

  	/* =================================================================
  
  		スタッフ
  
  	================================================================= */
  #staff {
    padding-top: 80px; }
    #staff .page_head {
      background: #22499D;
      color: #fff;
      padding: 20px 0; }
      #staff .page_head .inner {
        display: block; }
        #staff .page_head .inner .photo {
          order: 2;
          width: 104%; }
        #staff .page_head .inner .info {
          margin-top: 24px;
          order: 1;
          width: 100%; }
          #staff .page_head .inner .info .names {
            background: url("../images/common/link_line_wh.svg") no-repeat 0 0;
            padding-top: 20px; }
            #staff .page_head .inner .info .names .t1 {
              font-size: 13px;
              font-weight: bold;
              padding-bottom: 5px; }
            #staff .page_head .inner .info .names .t2 {
              font-size: 20px;
              font-weight: bold; }
              #staff .page_head .inner .info .names .t2 span {
                font-weight: normal;
                font-size: 12px;
                padding-left: 16px; }
          #staff .page_head .inner .info .prof {
            margin-top: 30px; }
            #staff .page_head .inner .info .prof .en {
              font-weight: 800;
              background: url("../images/recruit/staff_icon_yellow.svg") no-repeat 0 50%/22px;
              padding: 0 0 0 35px;
              margin-bottom: 16px; }
            #staff .page_head .inner .info .prof .detail {
              font-size: 15px; }
              #staff .page_head .inner .info .prof .detail .s_ttl {
                font-size: 13px;
                margin-bottom: 4px;
                font-weight: bold; }
              #staff .page_head .inner .info .prof .detail p {
                margin-bottom: 16px;
                font-size: 12px; }
    #staff .sec_base {
      padding: 40px 0; }
      #staff .sec_base h2 {
        font-size: 20px;
        background: url("../images/recruit/staff_h2.svg") no-repeat 0 50%;
        padding-left: 40px;
        font-weight: bold;
        color: #22499D;
        margin: 10px 0 16px; }
      #staff .sec_base p {
        margin-bottom: 20px;
        padding-left: 40px; }
      #staff .sec_base .base1 {
        display: block;
        padding-bottom: 20px; }
        #staff .sec_base .base1 .img {
          order: 1;
          width: 100%;
          margin-right: 0;
          margin-bottom: 24px; }
        #staff .sec_base .base1 .body {
          order: 2;
          width: 100%; }
      #staff .sec_base .base2 {
        padding-bottom: 20px; }
      #staff .sec_base .base3 {
        display: block;
        padding-bottom: 20px; }
        #staff .sec_base .base3 .img {
          order: 2;
          width: 100%;
          margin-left: 0;
          margin-bottom: 24px; }
        #staff .sec_base .base3 .body {
          order: 1;
          width: 100%; }
    #staff .entry_btn {
      width: 70%;
      margin: auto; }

  	/* =================================================================
  
  		entry
  
  	================================================================= */
  #entry {
    padding: 110px 16px; }
    #entry .pttl {
      color: #fff;
      text-align: center;
      padding-bottom: 50px; }
      #entry .pttl h1 {
        font-size: 30px;
        margin-bottom: 20px;
        font-weight: 800; }
    #entry .inner {
      padding: 10px 24px;
      background: #fff; }
    #entry .base {
      border-bottom: #CED4E1 solid 1px;
      padding: 24px 0;
      font-size: 14px; }
      #entry .base p {
        margin: 8px 0; }
      #entry .base .ttl {
        font-weight: 700;
        font-size: 15px;
        margin-bottom: 16px; }
        #entry .base .ttl span.must {
          background: #BC070A;
          color: #fff;
          font-size: 10px;
          font-weight: normal;
          padding: 2px 5px 4px;
          margin-left: 10px;
          line-height: 100%; }
      #entry .base label {
        display: block; }
      #entry .base input[type="text"], #entry .base input[type="tel"], #entry .base input[type="email"] {
        background: #ECEFF4;
        padding: 10px 16px;
        width: 100%;
        border-radius: 5px; }
      #entry .base textarea {
        background: #ECEFF4;
        padding: 10px 16px;
        width: 100%;
        border-radius: 5px;
        height: 200px; }
      #entry .base ::placeholder {
        color: #A0ABB0; }
      #entry .base input.ss {
        width: 30%; }
      #entry .base .two {
        display: flex;
        flex-wrap: wrap;
        align-content: stretch;
        justify-content: space-between;
        height: 100%; }
        #entry .base .two .blk {
          flex-basis: calc((100% - 8px) / 2);
          max-width: calc((100% - 8px) / 2); }
      #entry .base .three {
        display: block; }
        #entry .base .three .blk {
          flex-basis: calc((100% - 0px) / 1);
          max-width: calc((100% - 0px) / 1);
          margin-bottom: 10px; }
    #entry .selectbox-006 {
      position: relative;
      width: 100%; }
    #entry .selectbox-006::before,
    #entry .selectbox-006::after {
      position: absolute;
      right: 15px;
      width: 9px;
      height: 6px;
      background-color: #333;
      content: '';
      pointer-events: none; }
    #entry .selectbox-006::before {
      top: calc(50% - 9px);
      clip-path: polygon(50% 0, 100% 100%, 0 100%); }
    #entry .selectbox-006::after {
      bottom: calc(50% - 9px);
      clip-path: polygon(0 0, 50% 100%, 100% 0); }
    #entry .selectbox-006 select {
      appearance: none;
      min-width: 100%;
      height: 2.8em;
      padding: 0.4em calc(.8em + 30px) 0.4em 0.8em;
      border-radius: 3px;
      background-color: #ECEFF4;
      color: #333333;
      font-size: 1em;
      cursor: pointer; }
    #entry .radio-001 {
      display: flex;
      flex-wrap: wrap;
      gap: .3em 2em;
      border: none; }
    #entry .radio-001 label {
      display: flex;
      align-items: center;
      gap: 0 .5em;
      position: relative;
      cursor: pointer;
      width: 100%; }
    #entry .radio-001 label::before,
    #entry .radio-001 label:has(:checked)::after {
      border-radius: 50%;
      content: ''; }
    #entry .radio-001 label::before {
      width: 18px;
      height: 18px;
      background-color: #ECEFF4; }
    #entry .radio-001 label:has(:checked)::after {
      position: absolute;
      top: 50%;
      left: 9px;
      transform: translate(-50%, -50%);
      width: 10px;
      height: 10px;
      background-color: #22499D;
      animation: anim-radio-001 .3s linear; }
  @keyframes anim-radio-001 {
    0% {
      box-shadow: 0 0 0 1px transparent; }
    50% {
      box-shadow: 0 0 0 10px #2589d033; }
    100% {
      box-shadow: 0 0 0 10px transparent; } }
    #entry .radio-001 input {
      display: none; }
    #entry .prvacy {
      background: #f9f9f9;
      margin-top: 36px;
      padding: 24px; }
      #entry .prvacy h3 {
        font-weight: bold;
        margin-bottom: 10px; }
      #entry .prvacy p {
        font-size: 14px;
        color: #777; }
      #entry .prvacy .btn {
        padding-top: 10px; }
        #entry .prvacy .btn a {
          text-decoration: underline;
          font-size: 14px; }
    #entry .mes {
      font-size: 14px;
      text-align: center;
      margin: 24px 0; }
    #entry .btn_submit input[type="submit"] {
      background: #22499D;
      color: #fff;
      font-weight: 700;
      width: 90%;
      margin: 24px auto;
      padding: 16px;
      display: block;
      border: none;
      border-radius: 100px;
      text-align: center; }
      #entry .btn_submit input[type="submit"]:hover {
        opacity: 0.6; }

  	/* =================================================================
  
  		office
  
  	================================================================= */
  #office .page_head .ttl {
    text-align: center;
    padding: 40px 16px 60px; }
    #office .page_head .ttl .en {
      font-size: 15px;
      font-weight: 800;
      color: #22499D; }
    #office .page_head .ttl h1 {
      font-size: 24px;
      font-weight: 800;
      padding: 10px 0 20px; }
    #office .page_head .ttl p {
      color: #777; }
  #office .base {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: space-between;
    height: 100%; }
    #office .base img {
      display: block;
      margin-bottom: 4px; }
    #office .base .txt {
      font-size: 12px; }
    #office .base.r1 .box_l {
      width: calc(60% - 2px); }
    #office .base.r1 .box_r {
      width: calc(40% - 2px); }
    #office .base.r2 .box_l {
      width: calc(40% - 2px); }
    #office .base.r2 .box_r {
      width: calc(60% - 2px); }
    #office .base.r4 .box_l {
      width: calc(60% - 2px); }
    #office .base.r4 .box_r {
      width: calc(40% - 2px); }
    #office .base.r5 .box_l {
      width: calc(41% - 2px); }
    #office .base.r5 .box_r {
      width: calc(59% - 2px); }
    #office .base.r6 .box_l {
      width: calc(58.5% - 2px); }
    #office .base.r6 .box_r {
      width: calc(41.5% - 2px); }
  #office .entry_btn {
    margin: 80px auto 120px;
    width: 300px; }
  #office #home {
    background: linear-gradient(315deg, #1D58A4 14.43%, #37ACDC 87%); }
    #office #home .sec5, #office #home .sec3 {
      background: none; }

  	/* =================================================================
  
  		フッター
  
  	================================================================= */
  footer {
    padding: 0 0 40px; }
    footer .linkarea {
      display: flex;
      flex-wrap: wrap;
      align-content: stretch;
      justify-content: space-between;
      height: 100%; }
      footer .linkarea .left {
        display: none; }
      footer .linkarea .right {
        float: none;
        width: 100%; }
        footer .linkarea .right a {
          display: block;
          background: url("../images/recruit/link_bg.svg") no-repeat 0 0/cover;
          padding: 80px 0;
          transform: 0.3s; }
          footer .linkarea .right a:hover {
            background: url("../images/recruit/link_bg_h.svg") no-repeat 0 0/cover; }
          footer .linkarea .right a img {
            display: block;
            width: 50%;
            margin: auto; }
    footer .left {
      float: none;
      width: 100%;
      font-size: 13px;
      padding: 60px 0 40px 0;
      text-align: center; }
      footer .left .logo {
        width: 60%;
        margin: auto; }
      footer .left .ad1 {
        margin: 3em 0 1em; }
    footer .copy {
      clear: both;
      font-size: 13px;
      padding: 0 0 60px 0;
      text-align: center; }
      footer .copy p {
        float: none;
        width: 100%;
        padding-left: 0;
        padding-bottom: 24px; }
      footer .copy .f_btn {
        float: none;
        width: 100%;
        text-align: center;
        padding-right: 0; }
        footer .copy .f_btn a {
          display: block;
          width: 60%;
          float: none;
          margin: auto; }
          footer .copy .f_btn a:hover {
            opacity: .5; } }
/* =================================================================

    その他

================================================================= */
#page-top a {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #942D2F;
  border-radius: 5px;
  width: 60px;
  height: 60px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.6rem;
  transition: all 0.3s; }

#page-top a:hover {
  background: #777; }

/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px); }

/*　上に上がる動き　*/
#page-top.UpMove {
  animation: UpAnime 0.5s forwards; }

@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/*　下に下がる動き　*/
#page-top.DownMove {
  animation: DownAnime 0.5s forwards; }

@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0); }
  to {
    opacity: 1;
    transform: translateY(100px); } }
.pc-only {
  display: block; }

.sp-only {
  display: none; }

@media screen and (max-width: 768px) {
  .pc-only {
    display: none; }

  .sp-only {
    display: block; } }