@charset "utf-8";

/*
 * style.css
 *
 *  version --- 1.0
 *  updated --- 2017/11/30
 */

/* !WEB FONTS
---------------------------------------------------------- */
@font-face {
    font-family: 'KoPub Batang';
    src: url('../fonts/KoPubBatang-Bold.eot');
    src: url('../fonts/KoPubBatang-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/KoPubBatang-Bold.woff2') format('woff2'),
        url('../fonts/KoPubBatang-Bold.woff') format('woff'),
        url('../fonts/KoPubBatang-Bold.ttf') format('truetype'),
        url('../fonts/KoPubBatang-Bold.svg#KoPubBatang-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KoPub Batang';
    src: url('../fonts/KoPubBatang-Light.eot');
    src: url('../fonts/KoPubBatang-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/KoPubBatang-Light.woff2') format('woff2'),
        url('../fonts/KoPubBatang-Light.woff') format('woff'),
        url('../fonts/KoPubBatang-Light.ttf') format('truetype'),
        url('../fonts/KoPubBatang-Light.svg#KoPubBatang-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KoPub Batang';
    src: url('../fonts/KoPubBatang-Regular.eot');
    src: url('../fonts/KoPubBatang-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/KoPubBatang-Regular.woff2') format('woff2'),
        url('../fonts/KoPubBatang-Regular.woff') format('woff'),
        url('../fonts/KoPubBatang-Regular.ttf') format('truetype'),
        url('../fonts/KoPubBatang-Regular.svg#KoPubBatang-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* !root
---------------------------------------------------------- */
:root {
    --KoPubBatang: 'KoPub Batang';
    --NotoSansJP: "Noto Sans JP", sans-serif;
    --ZenOldMincho: "Zen Old Mincho", serif;
    --inter: "Inter", serif;
}

/* !HTML5 elements
---------------------------------------------------------- */
header, 
footer, 
nav, 
section, 
aside, 
article {
    display: block;
}

/* !Reseting
---------------------------------------------------------- */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

fieldset {
  border: none;
}

ul,
ol,
li {
	list-style: none;
}

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

table {
	border-collapse: collapse;
}

button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}

select::-ms-expand {
	display: none;
}

input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check{
	display: none;
}

select,
input[type=radio],
input[type=checkbox],
input[type=text],
input[type=password],
input[type=email],
input[type=tel],
input[type=number],
input[type=reset],
input[type=button],
input[type=submit],
textarea {
	appearance: none;
	border-radius: 0;
	font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear{
	display: none;
}

input[type=reset],
input[type=button],
input[type=submit]  {
	font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	cursor: pointer;
}

*,
*:before,
*::after {
	box-sizing: border-box;
}
/* !Clearfix
---------------------------------------------------------- */
.clearfix {
    display: block;
    min-height: 1%;
}

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

* html .clearfix {
    height: 1%;
}

/* !Layout
---------------------------------------------------------- */
html {
    overflow-y: scroll;
    font-size: 62.5%;
}

/*** タブレット 768x ~ 1280px***/
@media screen and (min-width: 768px) and (max-width: 1280px) {
  html {
    font-size: calc(100vw / 128);
  }
}

/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {
    html {
        font-size: calc(100vw / 39.3);
    }
}

body {
    font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 1.6rem;
    -webkit-text-size-adjust: none;
    line-height: 1.5;
    font-weight: normal;
    color: #1C1C1C;
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html, body {
    user-select: none; /* supported by Chrome and Opera */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */     
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:#fff;  /* 背景カラー */
    z-index: 9999;  /* 一番手前に */
    pointer-events: none;  /* 他の要素にアクセス可能にするためにポインターイベントは無効に */
    opacity: 0;  /* 初期値では非表示 */
    -webkit-transition: opacity .8s ease;  /* アニメーション時間は 0.8秒 */
    -ms- transition: opacity .8s ease;
    -moz- transition: opacity .8s ease;
    transition: opacity .8s ease;
}
 
 
/*body要素に.fadeoutセレクタがある場合には、レイヤーが表示されるようにopacityを１に設定します。*/
 
body.fadeout::after {
    opacity: 1;
}

/* !Base Fonts -------------------------------------------------------------- */
a {
    color: #1C1C1C;
    text-decoration: none;
}

/*** hover ***/
@media screen and (min-width: 960px) {
    a {
        transition: all 0.5s;
    }

    a:hover {
        text-decoration: underline;
    }

    .h-opacity {
        transition: opacity 0.5s ease-out;
    }

    .h-opacity:hover {
        opacity: .7;
        text-decoration: none;
    }

    a[href^="tel:"] {
        cursor: default;
        pointer-events:none;
    }

    .h-underline {
        background: linear-gradient(to right, #1C1C1C, #1C1C1C) 0 100% no-repeat;
        background-size: 0 .1rem;
        transition: background-size 0.5s ease-out;
    }

    a.h-underline:hover,
    a:hover .h-underline {
        text-decoration: none;
        background-size: 50% .1rem;
    }
}

.is-hide {
    display: none;
}

/*** 非スマホ 768px ~ ***/
@media screen and (min-width: 768px) {
    .is-sp {
        display: none;
    }
}

/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width : 767px){
    .is-pc {
        display: none;
    }
}

/* !JS
---------------------------------------------------------- */
.js-letter {
    display: block;
    overflow: hidden;
}
.js-letter__char {
    display: inline-block;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

.animated .js-letter__char {
    transition: -webkit-transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1), 
    -webkit-transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* !wrapper
---------------------------------------------------------- */
#wrapper {
    width: 100%;
    background: #fff;
}
/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width : 767px){
    #wrapper {
        padding-top: 6.5rem;
    }

    .home #wrapper {
        padding-top: 0;
    }
}

/* !header
---------------------------------------------------------- */
#header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
}

.header-inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4rem;
    height: 8rem;
}

.header-logo {
    width: 17.5rem;
    font-size: 1px;
    line-height: 1;
    position: relative;
    z-index: 3;
}

.header-logo a {
    display: block;
    width: 100%;
    position: relative;
}


.header-logo img {
    width: 100%;
}


.btn-menu {
    display: none;
}

#header-under {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9998;
    width: 100%;
    pointer-events: none;
    mix-blend-mode: difference;
    transition: all .15s ease-in-out;
}

/*** hover ***/
@media screen and (min-width: 960px) {}

/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width : 767px){

    #header {
        z-index: 9998;
    }

    #header-under {
        z-index: 9999;
    }

    .header-inner {
        padding: 0 .4rem 0 2rem;
        height: 6.5rem;
    }

    .btn-menu {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: .6rem;
        width: 6rem;
        height: 6.5rem;
        position: relative;
        z-index: 3;
    }

    .btn-menu .line {
        width: 3rem;
        height: .1rem;
        border-radius: .1rem;
        background: #fff;
        transition: all .3s ease-in-out;
    }


    header.is-open .btn-menu .line:nth-child(1) {
        transform: translateY(.7rem) rotate(45deg);
    }

    header.is-open .btn-menu .line:nth-child(2) {
        opacity: 0;
    }

    header.is-open .btn-menu .line:nth-child(3) {
        transform: translateY(-.7rem) rotate(-45deg);
    }


}

/* !global navigation
---------------------------------------------------------- */

.g-navi {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.g-navi > ul {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.g-navi > ul > li {
    position: relative;
}

.g-navi > ul > li a {
    font-size: 1.5rem;
    line-height: 2;
    font-family: var(--KoPubBatang);
    color: #fff;
    text-transform: uppercase;
    display: block;
}

.g-navi > ul > li .has-child {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .7rem;
    pointer-events: none;
}

.g-navi > ul > li .has-child:after {
    width: 1.2rem;
    height: .2rem;
    border-radius: .2rem;
    content: '';
    background: #fff;
}

.g-navi > ul > li .has-child span {
    display: block;
}

#header .g-navi > ul > li > a {
    opacity: 0;
}

.g-navi .sub-menu {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, 0);
    z-index: 2;
    width: 13.8rem;
    background: #fff;
    border-radius: .4rem;
    box-shadow: 0 .4rem .4rem 0 rgba(0, 0, 0, 0.1);
    padding: 2.4rem 1.6rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
}

.g-navi .sub-menu li + li {
    margin-top: 1.2rem;
}

.g-navi .sub-menu li a {
    font-size: 1.4rem;
    line-height: 1.714;
    font-weight: bold;
    color: #1C1C1C;
    font-family: var(--ZenOldMincho);
    display: block;
}

.g-navi .g-navi__button a {
    display: block;
    width: 14rem;
    height: 4rem;
    background: linear-gradient(100.15deg, #03C29B 1.42%, #0575E6 100%);
    border-radius: 2rem;
    padding: .2rem;
}

.g-navi .g-navi__button a span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .8rem;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 2rem;
    font-size: 1.5rem;
    line-height: 2;
    color: #fff;
    font-family: var(--KoPubBatang);
    text-transform: uppercase;
    transition: all .3s ease;
}

.g-navi .g-navi__button a span small {
    display: none;
}

.g-navi .g-navi__button a span:after {
    width: 1.2rem;
    height: 1.2rem;
    background: url(../img/common/icon_blank_white.svg) center center no-repeat;
    background-size: 100% 100%;
    content: '';
    transition: background-image .3s ease;
}

/*** hover ***/
@media screen and (min-width: 960px) {
    .g-navi > ul > li a {
        text-decoration: none;
    }

    .g-navi > ul > li:hover .sub-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .g-navi .g-navi__button a {
        text-decoration: none;
    }

    .g-navi .g-navi__button a:hover span {
        background: #fff;
        color: #1C1C1C;
    }

    .g-navi .g-navi__button a:hover span:after {
        background-image: url(../img/common/icon_blank_black.svg);
    } 
}

/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width : 767px){
    .g-navi {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100dvh;
        z-index: 2;
        background: #000;
        padding: 6.5rem 0 8rem;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .3s ease, visibility .3s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

    }

    header.is-open .g-navi {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    #header-under .g-navi {
        display: none;
    }

    .g-navi > ul {
        display: block;
        padding: 1rem 1.8rem 4rem;
    }

    .g-navi > ul > li {
        position: relative;
        border-bottom: .1rem solid #888888;
    }

    .g-navi > ul > li > a {
        font-size: 2rem;
        line-height: 1.3;
        display: block;
        padding: 2.45rem 2.45rem 2.45rem 0;
        background: url(../img/common/icon_arrow_right_white.svg) right center no-repeat;
        background-size: 2.4rem auto;
    }

    #header .g-navi > ul > li > a {
        opacity: 1;
    }

    .g-navi > ul > li .has-child {
        display: block;
        background: none;
    }

    .g-navi > ul > li .has-child:after {
        display: none;
    }

    .g-navi .sub-menu {
        position: relative;
        left: 0;
        top: 0;
        transform: translate(0, 0);
        width: 100%;
        background: none;
        border-radius: 0;
        box-shadow: unset;
        padding: 0 0 2.5rem;
        opacity: 1;
        visibility: visible;
    }

    header.is-open .g-navi .sub-menu {
        pointer-events: auto;
    }

    .g-navi .sub-menu li + li {
        margin-top: 1.6rem;
    }

    .g-navi .sub-menu li a {
        font-size: 1.5rem;
        line-height: 1.46;
        color: #fff;
    }

    .g-navi .g-navi__button {
        padding: 0 1.8rem;
    }

    .g-navi .g-navi__button a {
        display: block;
        width: 100%;
        height: 5rem;
        background: linear-gradient(180deg, #03C29B 0%, #0575E6 100%);
        border-radius: 2.5rem;
        padding: 1.4rem;
    }

    .g-navi .g-navi__button a span {
        border-radius: 0;
        font-size: 2rem;
    }

    .g-navi .g-navi__button a span small {
        display: block;
        font-size: 1.5rem;
        font-family: var(--ZenOldMincho);
        font-weight: bold;
        margin-left: .5em;
        padding-bottom: .4rem;
    }

    .g-navi .g-navi__button a span:after {
        width: 1.6rem;
        height: 1.6rem;
    }
}

/* !breadcrumb
---------------------------------------------------------- */
.breadcrumb {
    padding-bottom: 2.4rem;
    position: relative;
    z-index: 4;
}

.breadcrumb ul {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.breadcrumb li {
  position: relative;
  word-break: keep-all;
  white-space: nowrap;
}

.breadcrumb li + li {
  margin-left: 3.3rem;
}

.breadcrumb ul li:last-child {
  white-space: normal;
  word-break: break-all;
}

.breadcrumb li + li::before {
  content: '/';
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.18;
  color: #1C1C1C;
  position: absolute;
  left: -3.3rem;
  top: 0;
  z-index: 3;
  width: 3.3rem;
  height: 1.18em;
}

.breadcrumb li,
.breadcrumb li a {
  font-size: 1.1rem;
  line-height: 1.18;
  color: #1C1C1C;
}

.breadcrumb li a {
  color: #888;
}

.breadcrumb li.is-active {
    text-decoration: underline;
}

.has-image #teaser + .breadcrumb {
    padding-bottom: 3.4rem;
    margin-top: -4.7rem;
}

.has-image #teaser + .breadcrumb li,
.has-image #teaser + .breadcrumb li a,
.has-image #teaser + .breadcrumb li + li::before {
    color: #fff;
}

.has-image #teaser + .breadcrumb {
    padding-bottom: 3.4rem;
    margin-top: -4.7rem;
}


/*** hover ***/
@media screen and (min-width: 960px) {}

/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width: 767px) {
    .breadcrumb {
        padding-bottom: .7rem;
    }

    .has-image #teaser + .breadcrumb {
        padding: 1.6rem 0;
        margin-top: 0;
        position: absolute;
        right: 0;
        top: 6.5rem;
    }
}

/* !main Visual
---------------------------------------------------------- */
#main-visual {
    width: 100%;
    position: relative;
}

#main-visual .swiper-slide {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    min-height: 76.8rem;
}

#main-visual .swiper-slide-active .swiper-img,
#main-visual .swiper-slide-duplicate-active .swiper-img,
#main-visual .swiper-slide-prev .swiper-img {
    animation: zoomUp 7s linear 0s normal both;
    transform: scale(1.15);
    width: 100%;
    height: 100%;
}

#main-visual .swiper-slide img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

@keyframes zoomUp {
    0% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

#main-visual .swiper-pagination {
    font-size: 1px;
    line-height: 1;
    bottom: 3.2rem;
}

#main-visual .swiper-pagination .swiper-pagination-bullet {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 .8rem;
    position: relative;
    opacity: 1;
    background: none;
}

#main-visual .swiper-pagination .swiper-pagination-bullet:after {
    width: .6rem;
    height: .6rem;
    border: .1rem solid #fff;
    opacity: .5;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
    content: '';
}

#main-visual .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:after {
    background: #fff;
    opacity: 1;
}

#main-visual .swiper-pagination .circle {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
#main-visual .swiper-pagination .circle svg {
  width: 100%;
  height: 100%;
  fill: none;
}
#main-visual .swiper-pagination .circle-01 {
  stroke: rgba(255, 255, 255, 0);
  stroke-width: .2rem;
}
#main-visual .swiper-pagination .circle-02 {
  stroke: #fff;
  stroke-width: .2rem;
  stroke-dasharray: 201.056px;
  stroke-dashoffset: 201.056px;
}

#main-visual .swiper-pagination .swiper-pagination-bullet-active .circle-02 {
  -webkit-animation: mv04-circle 4s linear both;
          animation: mv04-circle 4s linear both;
}

@-webkit-keyframes mv04-circle {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes mv04-circle {
  100% {
    stroke-dashoffset: 0;
  }
}

#main-visual .mv-copy {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 10rem;
    z-index: 2;
    text-align: center;
    color: #fff;
}

#main-visual .mv-copy .mv-copy__jap {
    font-size: 11rem;
    line-height: 1.072;
    font-family: var(--ZenOldMincho);
    font-weight: 400;
    letter-spacing: -.12em;
}

#main-visual .mv-copy .mv-copy__eng {
    font-size: 1.8rem;
    line-height: 1;
    font-family: var(--KoPubBatang);
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin-top: 2.5rem;
}

@media only screen and (max-width : 959px){
    #main-visual .swiper-slide {
        height: 83.2rem;
        min-height: auto;
    }
}

/*** hover ***/
@media screen and (min-width: 960px) {}

/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width : 767px){

    #main-visual .swiper-slide {
        height: min(100vh, 26.2rem);
    }

    #main-visual .swiper {
        padding-bottom: 4.4rem;
    }

    #main-visual .swiper-pagination {
        bottom: 0;
    }

    #main-visual .swiper-pagination .swiper-pagination-bullet:after {
        border-color: #1C1C1C;
    }

    #main-visual .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:after {
        background: #1C1C1C;
    }

    #main-visual .swiper-pagination .circle-01 {
      stroke: rgba(28, 28, 28, 0);
    }

    #main-visual .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .circle-01 {
      stroke: rgba(28, 28, 28, 0.5);
    }

    #main-visual .swiper-pagination .circle-02 {
      stroke: #1C1C1C;
    }

    #main-visual .mv-copy {
        bottom: 6.8rem;
    }

    #main-visual .mv-copy .mv-copy__jap {
        font-size: 4rem;
        line-height: 1.45;
    }

    #main-visual .mv-copy .mv-copy__eng {
        font-size: 1.4rem;
        line-height: 1.6rem;
        margin-top: 1rem;
    }
}

/* !teaser
---------------------------------------------------------- */
#teaser {
    width: 100%;
    padding: 12.6rem 0 2.4rem;
    position: relative;
    z-index: 4;
}

#teaser .page-title  .page-title__eng {
    display: block;
    font-size: 6rem;
    line-height: 1.1;
    font-family: var(--KoPubBatang);
    letter-spacing: .02em;
    text-transform: uppercase;
    font-weight: 400;
}

#teaser .page-title  .page-title__jap {
    display: block;
    margin-top: .4rem;
    font-size: 2rem;
    line-height: 1.45;
    font-family: var(--ZenOldMincho);
    font-weight: 400;
}

.has-image #teaser {
    padding: 0;
}

.has-image #teaser .page-title {
    height: 100vh;
    min-height: 83.2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    z-index: 2;
    color: #fff;
}

.has-image #teaser .teaser-image {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.has-image #teaser .teaser-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 959px) {
    .has-image #teaser .page-title {
        height: 83.2rem;
        min-height: auto;
    }
}

/*** hover ***/
@media screen and (min-width: 960px) {}

/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width : 767px){
    #teaser {
        padding: 2.9rem 0 1.7rem;
    }

    #teaser .page-title  .page-title__eng {
        font-size: 4rem;
    }

    #teaser .page-title  .page-title__jap {
        margin-top: 0;
    }

    .has-image #teaser .page-title {
        height: 25.6rem;
        padding: 3rem 0;
        justify-content: flex-end;
    }
}

/* !contents
---------------------------------------------------------- */
#contents {
    width: 100%;
    position: relative;
    z-index: 3;
}

.inner {
    width: 100%;
    max-width: 180rem;
    margin: 0 auto;
    padding: 0 8rem;
}

/*** hover ***/
@media screen and (min-width: 960px) {}

/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width : 767px){

    .inner {
    width: 100%;
    max-width: 114.4rem;
    margin: 0 auto;
    padding: 0 2rem;
}

}

/* !page Top
---------------------------------------------------------- */
.page-top {
    position: absolute;
    left: calc(100% + 2rem);
    bottom: -5.2rem;
    width: 5.8rem;
    z-index: 99;
}

.page-top img {
    width: 100%;
}

/*** hover ***/
@media screen and (min-width: 960px) {}

/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width : 767px){
    .page-top {
        position: absolute;
        left: unset;
        bottom: unset;
        right: 0;
        top: 0;
    }
}

/* !footer
---------------------------------------------------------- */
#footer {
    padding: 10rem 0;
    background: #161616;
    color: #fff;
    position: relative;
    z-index: 3;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}

.footer-logo {
    width: 24.6rem;
    font-size: 1px;
    line-height: 1;
    margin-bottom: 3rem;
}

.footer-logo img {
    width: 100%;
}

.footer-access .footer-access__item {
    font-size: 1.3rem;
    line-height: 1.7;
}

.footer-access .footer-access__item + .footer-access__item {
    margin-top: 2.2rem;
}

.footer-access .footer-access__item dd {
    color: #666;
}

.footer-menu {
    width: 100%;
    max-width: 59rem;
}

.footer-menu-top {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 4.8rem 0;
}

.footer-menu-top .footer-menu__item {
    min-width: 13rem;
}

.footer-menu-top .footer-menu__item:nth-child(5n) {
    min-width: 0;
}

.footer-menu-title {
    font-size: 1.6rem;
    line-height: 1;
}

.footer-menu-title.small {
    font-size: 1.2rem;
    line-height: 1.6rem;
}

.footer-menu-title a {
    color: #fff;
    display: inline-block;
    line-height: 1.5;
    overflow: hidden;
    height: 1.5em;
}

.footer-menu-title a span {
    width: 100%;
    display: block;
}

.footer-menu-title a.no-link {
    pointer-events: none;
}

.footer-menu-top ul {
    margin-top: 2.2rem;
}

.footer-menu-top ul li + li {
    margin-top: .8rem;
}

.footer-menu-top ul li a {
    font-size: 1.2rem;
    line-height: 1.5;
    color: #666;
    /*font-family: var(--inter);*/
    font-weight: 500;
    display: inline-block;
    overflow: hidden;
    height: 1.5em;
}

.footer-menu-top ul li a span  {
    width: 100%;
    display: block;
}


.footer-links {
    margin-top: 9rem;
    border-top: .1rem solid #666;
    padding-top: 1.6rem;
    display: flex;
    align-items: center;
    gap: 4rem;
    flex-wrap: wrap;
}

.footer-links a {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    letter-spacing: .02em;
    line-height: 1.6rem;
    gap: .8rem;
    color: #fff;
}

.footer-links a:after {
    width: 1.6rem;
    height: 1.6rem;
    background: url(../img/common/icon_blank_white.svg) center center no-repeat;
    background-size: 100% 100%;
    content: '';
}

.footer-menu-title .h-underline,
.footer-menu-bottom .h-underline,
.footer-links .h-underline {
    background: linear-gradient(to right, #fff, #fff) 0 100% no-repeat;
    background-size: 0 .1rem;
}

#copyright {
    margin-top: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    line-height: 2;
    color: #666;
}

#copyright img {
    width: 11.5rem;
}

/*** hover ***/
@media screen and (min-width: 960px) {
    .footer-menu-title .h-underline:hover,
    .footer-menu-bottom .h-underline:hover,
    .footer-menu-top ul li .h-underline:hover,
    .footer-links .h-underline:hover {
        background-size: 100% .1rem;
    }

    .footer-menu-title a:hover,
    .footer-menu-top ul li a:hover {
        text-decoration: none;
    }

    .footer-menu-title a:hover span,
    .footer-menu-top ul li a:hover span {
        transform: translateY(-100%);
        transition: transform .3s ease;
    }
}

/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width : 767px){
    #footer {
        padding: 4.7rem 0 8rem;
    }

    .footer-inner {
        display: block;
    }

    .footer-logo {
        width: 13.7rem;
        margin-bottom: 3.5rem;
    }

    .footer-menu {
        margin-top: 10.2rem;
        max-width: 100%;
    }

    .footer-menu-top {
        gap: 2rem 0;
        justify-content: space-between;
    }

    .footer-menu-top .footer-menu__item {
        min-width: 0;
        width: 30%;
    }

    .footer-menu-top .footer-menu__item:nth-child(4n) {
        min-width: 0;
    }

    .footer-menu-top .footer-menu__item:last-child {
        width: 100%;
    }

    .footer-menu-title,
    .footer-menu-title.small {
        font-size: 1.47rem;
        line-height: 1.36;
    }

    .footer-menu-title a {
        line-height: 1.36;
        height: auto;
    }

    .footer-menu-title a span + span {
        display: none;
    }

    .footer-menu-top ul {
        margin-top: .73rem;
    }

    .footer-menu-top ul li + li {
        margin-top: .524rem;
    }

    .footer-menu-top ul li a {
        height: auto;
    }

    .footer-menu-top ul li a span + span {
        display: none;
    }

    .footer-links {
        margin-top: 3.4rem;
        padding-top: 2rem;
        align-items: flex-start;
        flex-direction: column;
        gap: 1.6rem;
    }

    #copyright {
        margin-top: 3.4rem;
        align-items: flex-start;
        flex-direction: column-reverse;
        gap: 3.8rem;
        font-size: 1.05rem;
        line-height: 1;
    }

    #copyright p:first-child {
        width: 100%;
        text-align: center;
    }
}


/* !button
---------------------------------------------------------- */
.btn-links {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 34.6rem;
    padding: 0 5.8rem 0 0;
    font-size: 1.6rem;
    line-height: 1.5;
    padding: 0 6.8rem 0 1rem;
    height: 6rem;
    text-align: center;
    color: #fff;
    background: #000;
    position: relative;
    border-radius: .3rem;
}

.btn-links:after {
    width: 5.8rem;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    border-left: .1rem solid rgba(255, 255, 255, .3);
    background: url(../img/common/icon_arrow_right_white.svg) center center no-repeat;
    background-size: 2.4rem auto;
    content: '';
}

.btn-map {
    border: .1rem solid #0575E6;
    border-radius: 1.3rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.2rem;
    font-size: 1.2rem;
    line-height: 1.4rem;
    color: #0575E6;
}

.btn-map:after {
    width: 1.2rem;
    height: 1.2rem;
    content: '';
    background: url(../img/common/icon_blank_blue.svg) center center no-repeat;
    background-size: 100% 100%;
}

/*** hover ***/
@media screen and (min-width: 960px) {}

/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width : 767px){}


/* !text link
---------------------------------------------------------- */
.text-links {
    color: #0575E6;
    text-decoration: underline;
}

.text-button {
    display: inline-block;
    font-size: 2rem;
    line-height: 1.2;
    padding-right: 5.6rem;
    position: relative;
}

.text-button span {
    background: linear-gradient(#1C1C1C,#1C1C1C) 100% 100% no-repeat;
    background-size: 100% .1rem;
    display: inline-block;
    transition: background-size .3s ease;
}

.text-button:before,
.text-button:after {
    width: 4rem;
    height: 2.4rem;
    border-radius: 1rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    content: '';
}

.text-button:before {
    background: rgba(0, 0, 0, .08);
}

.text-button:after {
    background: url(../img/common/icon_arrow_black.svg) center center no-repeat;
    background-size: 1.2rem auto;
}


/*** hover ***/
@media screen and (min-width: 960px) {
    .text-button:hover span {
        background-size: 0 .1rem;
    }

    .text-button:hover:before {
        background: linear-gradient(180deg, #03C29B 0%, #0575E6 100%);
    }

    .text-button:hover:after {
        background: url(../img/common/icon_arrow_white.svg) center center no-repeat;
        background-size: 1.2rem auto;
    }
}

/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width : 767px){}


/* !list
---------------------------------------------------------- */
.ul-list {
    padding-left: 1.5em;
}
.ul-list li {
    list-style: disc;
}

/*** hover ***/
@media screen and (min-width: 960px) {}

/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width : 767px){}


/* !heading
---------------------------------------------------------- */
.heading-large {
    margin-bottom: 2.4rem;
}

.heading-large .heading-large__eng {
    text-transform: uppercase;
    font-size: 7rem;
    line-height: 1.1;
    font-family: var(--KoPubBatang);
    font-weight: 300;
    display: block;
}

.heading-large .heading-large__jap {
    font-size: 2rem;
    line-height: 1.2;
    font-family: var(--ZenOldMincho);
    font-weight: bold;
    display: block;
    margin-bottom: 1.6rem;
}

.heading-large .heading-large__jap .js-letter__char {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
}

.heading-large .heading-large__jap .js-letter__char:before {
    width: 1.5rem;
    height: .1rem;
    background: #1C1C1C;
    content: '';
}

.heading-medium {
    margin-bottom: 1.6rem;
}

.heading-medium .heading-medium__eng {
    text-transform: uppercase;
    font-size: 1.6rem;
    letter-spacing: .02em;
    line-height: 1.125;
    font-family: var(--KoPubBatang);
    font-weight: 400;
    display: block;
}

.heading-medium .heading-medium__jap {
    font-size: 4rem;
    line-height: 1.45;
    font-family: var(--ZenOldMincho);
    font-weight: 400;
    display: block;
}

/*** hover ***/
@media screen and (min-width: 960px) {}

/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width : 767px){
    .heading-large {
        margin-bottom: 3.6rem;
    }

    .heading-large .heading-large__eng {
        font-size: 5rem;
        line-height: 1;
        font-weight: 400;
    }

    .heading-large .heading-large__jap {
        font-size: 1.6rem;
        line-height: 1.225;
        margin-bottom: .5rem;
    }

    .heading-large .heading-large__jap .js-letter__char {
        gap: .5rem;
    }

    .heading-large .heading-large__jap .js-letter__char:before {
        width: 1rem;
    }

    .heading-medium {
        margin-bottom: 2.4rem;
    }

    .heading-medium .heading-medium__eng {
        font-size: 1.4rem;
        line-height: 1.071428571428571;
    }

    .heading-medium .heading-medium__jap {
        font-size: 3rem;
        line-height: 1.433;
    }
}


/* !お知らせ
---------------------------------------------------------- */
.news-wrap {
    padding-bottom: 12rem;
    width: 100%;
    max-width: 75rem;
    margin: 0 auto;
}

.news-head {
    margin-bottom: 2.8rem;
}

.news-head .news-date {
    font-size: 1.4rem;
    color: #777777;
    line-height: 1.2;
    margin-bottom: 2.8rem;
}

.news-head .news-title {
    font-size: 3.2rem;
    line-height: 1.5;
    font-weight: 400;
}

.news-body {
    font-size: 1.6rem;
    line-height: 1.625;
}

/*** hover ***/
@media screen and (min-width: 960px) {}

/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width : 767px){
    .news-wrap {
        padding-bottom: 10rem;
    }
}


/* !プライバシーポリシー
---------------------------------------------------------- */
.privacypolicy-wrap {
    padding: 1rem 0 10rem;
    font-size: 1.4rem;
    line-height: 1.714285714285714;
}

.privacypolicy-wrap .privacypolicy-top {
    margin-bottom: 8rem;
}

.privacypolicy-wrap .privacypolicy-item + .privacypolicy-item {
    margin-top: 6.4rem;
}

.privacypolicy-wrap .privacypolicy-item__box {
    padding: 1.6rem 0;
}

.privacypolicy-wrap .privacypolicy-item h2 {
    font-size: 2.4rem;
    line-height: 1.25;
    font-weight: bold;
    font-family: var(--ZenOldMincho);
    padding-bottom: 1.6rem;
    margin-bottom: 1.6rem;
    border-bottom: .1rem solid #D9D9D9;
}

.privacypolicy-wrap .privacypolicy-item h3 {
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 400;
    margin-bottom: 1.6rem;
}

.privacypolicy-wrap .privacypolicy-item .btn-links {
    max-width: 46.7rem;
}

.privacypolicy-wrap .privacypolicy-item table {
    width: 100%;
    border: .1rem solid #C0C5CC;
}

.privacypolicy-wrap .privacypolicy-item table th,
.privacypolicy-wrap .privacypolicy-item table td {
    border: .1rem solid #C0C5CC;
    font-size: 1.4rem;
    line-height: 1.5;
    padding: 1.6rem;
    vertical-align: middle;
}

.privacypolicy-wrap .privacypolicy-item table th {
    background: #F5F7FA;
    text-align: center;
    font-weight: bold;
    width: 50%;
}

/*** hover ***/
@media screen and (min-width: 960px) {}

/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width : 767px){

    .privacypolicy-wrap .privacypolicy-top {
        margin-bottom: 4.8rem;
    }

    .privacypolicy-wrap .privacypolicy-item + .privacypolicy-item {
        margin-top: 4rem;
    }

    .privacypolicy-wrap .privacypolicy-item h2 {
        font-size: 2rem;
        line-height: 1.5;
    }
}


/* !事業内容
---------------------------------------------------------- */
.content-wrap {
    padding: .5rem 0 10rem;
}

.content-head {
    border-top: .1rem dotted rgba(0, 0, 0, 0.5);
    border-bottom: .1rem dotted rgba(0, 0, 0, 0.5);
    margin-bottom: 2.5rem;
}

.content-head ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.content-head ul li + li {
    border-left: .1rem dotted rgba(0, 0, 0, 0.5);
}

.content-head ul li a {
    display: flex;
    align-items: center;
    padding: 1.5rem 8.5rem 1.5rem 2rem;
    font-size: 1.6rem;
    line-height: 1.25;
    position: relative;
}

.content-head ul li a:before,
.content-head ul li a:after {
    width: 4rem;
    height: 2.4rem;
    border-radius: 1rem;
    position: absolute;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    content: '';
}

.content-head ul li a:before {
    background: rgba(0, 0, 0, .08);
}

.content-head ul li a:after {
    background: url(../img/common/icon_arrow_black.svg) center center no-repeat;
    background-size: 1.2rem auto;
}

.content-head ul li a.is-active:before {
    background: linear-gradient(180deg, #03C29B 0%, #0575E6 100%);
}

.content-head ul li a.is-active:after {
    background: url(../img/common/icon_arrow_white.svg) center center no-repeat;
    background-size: 1.2rem auto;
}

.content-head ul li a small {
    font-size: 1rem;
    margin-right: .5rem;
}

.content-mainimg {
    width: 100%;
    position: relative;
}

.content-mainimg .content-mainimg__image {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
}

.content-mainimg .content-mainimg__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-mainimg .content-mainimg__inner {
    width: 100%;
    height: 83.2rem;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
}

.content-mainimg .content-heading {
    color: #fff;
}

.content-mainimg .content-heading .content-heading__eng {
    font-size: 1.6rem;
    line-height: 1.8rem;
    font-family: var(--KoPubBatang);
    letter-spacing: .02em;
    display: block;
}

.content-mainimg .content-heading .content-heading__jap {
    font-size: 5rem;
    line-height: 1.44;
    font-family: var(--ZenOldMincho);
    display: block;
}

.content-mainimg .content-notes {
    position: absolute;
    left: 0;
    bottom: 4rem;
    width: 100%;
    z-index: 2;
    padding: .8rem;
    color: #fff;
    font-size: 1.8rem;
    line-height: 1.78;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(2.2rem)
}

.content-recruit .content-recruit__link {
    display: block;
    width: 100%;
    font-size: 2.8rem;
    line-height: 1.5;
    color: #fff;
    font-family: var(--ZenOldMincho);
    font-weight: 400;
    background: url(../img/content/bg_recruit.jpg) center center no-repeat;
    background-size: cover;
}

.content-recruit .content-recruit__link .inner {
    display: block;
}

.content-recruit .content-recruit__link .content-recruit__link--inner {
    display: flex;
    align-items: center;
    width: 100%;
    height: 24rem;
    position: relative;
}

.content-recruit .content-recruit__link .content-recruit__link--inner .underline span {
    background: linear-gradient(#fff , #fff) 0 100% no-repeat;
    background-size: 100% .1rem;
    transition: background-size .3s ease;
}

.content-recruit .content-recruit__link .content-recruit__link--inner:before,
.content-recruit .content-recruit__link .content-recruit__link--inner:after {
    width: 4rem;
    height: 2.4rem;
    border-radius: 1rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    content: '';
}

.content-recruit .content-recruit__link .content-recruit__link--inner:before {
    background: rgba(255, 255, 255, .08);
}

.content-recruit .content-recruit__link .content-recruit__link--inner:after {
    background: url(../img/common/icon_arrow_white.svg) center center no-repeat;
    background-size: 1.2rem auto;
}

.content-section {
    margin-top: 10rem;
}

.content-side {
    display: none;
}

.content-list .content-list__item {
    border-top: .1rem solid #D9D9D9;
    padding: 3.2rem 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.content-list .content-list__item .content-box {
    width: 100%;
    max-width: 74rem;
    display: flex;
    align-items: flex-end;
    gap: 4rem;
}

.content-list .content-list__item .content-box .content-box__image {
    width: 35rem;
    aspect-ratio: 35 / 28;
}

.content-list .content-list__item .content-box .content-box__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-list .content-list__item .content-box .content-box__info {
    width: calc(100% - 39rem);
    font-size: 1.4rem;
    line-height: 1.5;
}

.content-list .content-title .content-title__eng {
    font-size: 1.6rem;
    line-height: 1.125;
    font-family: var(--KoPubBatang);
    letter-spacing: .02em;
    font-weight: 400;
    margin-bottom: .8rem;
    display: block;
    text-transform: uppercase;
}

.content-list .content-title .content-title__eng small {
    font-size: 1rem;
    font-family: var(--NotoSansJP);
    margin-right: .25em;
}

.content-list .content-title .content-title__jap {
    font-size: 3.2rem;
    line-height: 1;
    font-weight: 400;
    font-family: var(--ZenOldMincho);
    display: block;
}

.content-list .content-subtitle {
    font-size: 2rem;
    line-height: 1.3;
    margin-bottom: 3.2rem;
    font-weight: 400;
}

.content-links {
    text-align: right;
    margin-top: 7.8rem;
}

.content-list .content-list__item.no-flex {
    display: block;
}

.content-list .content-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.2rem 4rem;
    margin-top: 3.2rem;
}

.content-list .content-gallery figure {
    display: block;
    position: relative;
}

.content-list .content-gallery figure img {
    width: 100%;
}

.content-list .content-gallery figure figcaption {
    position: absolute;
    left: .8rem;
    bottom: .8rem;
    z-index: 2;
    padding: 0 .8rem;
    font-size: 1.4rem;
    line-height: 2.28;
    color: #fff;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(2.2rem);
    margin: 0;
}

/*** hover ***/
@media screen and (min-width: 960px) {

    .content-head ul li a:hover {
        text-decoration: none;
    }

    .content-head ul li a:hover:before {
        background: linear-gradient(180deg, #03C29B 0%, #0575E6 100%);
    }

    .content-head ul li a:hover:after {
        background: url(../img/common/icon_arrow_white.svg) center center no-repeat;
        background-size: 1.2rem auto;
    }

    .content-recruit .content-recruit__link:hover {
        text-decoration: none;
    }

    .content-recruit .content-recruit__link:hover  .content-recruit__link--inner .underline span {
        background-size: 100% 0;
    }
}

/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width : 767px){
    .content-wrap {
        padding: .7rem 0 6.4rem;
    }

    .content-head {
        border-bottom: 0;
        margin-bottom: 6rem;
    }

    .content-head .inner {
        padding: 0;
    }

    .content-head ul {
        display: block;
    }

    .content-head ul li {
        border-bottom: .1rem dotted rgba(0, 0, 0, 0.5);
    }

    .content-head ul li + li {
        border-left: 0;
    }

    .content-head ul li a {
        display: flex;
        align-items: center;
        padding: .7rem 5.2rem .7rem 1rem;
        font-size: 1.4rem;
        line-height: 1.214;
    }

    .content-head ul li a:before,
    .content-head ul li a:after {
        width: 3.2rem;
        height: 1.6rem;
        border-radius: .6rem;
        right: 1rem;
    }

    .content-head ul li a small {
        font-size: 1.2rem;
        margin-right: 1rem;
    }

    .content-mainimg {
        width: 100%;
        position: relative;
    }

    .content-mainimg .inner {
        padding: 0;
    } 

    .content-mainimg .content-mainimg__image {
        height: 25.6rem;
    }

    .content-mainimg .content-mainimg__inner {
        height: auto;
        display: block;
    }

    .content-mainimg .content-heading {
        color: #fff;
        display: flex;
        padding: 2.4rem 2rem;
        height: 25.6rem;
        justify-content: flex-end;
        align-items: flex-start;
        flex-direction: column;
    }

    .content-mainimg .content-heading .content-heading__jap {
        font-size: 4rem;
        line-height: 1.45;
    }

    .content-mainimg .content-notes {
        position: relative;
        bottom: 0;
        padding: 1.6rem;
        color: #fff;
        font-size: 1.4rem;
        line-height: 1.714;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(0)
    }

    .content-recruit .content-recruit__link {
        font-size: 2rem;
    }

    .content-recruit .content-recruit__link .content-recruit__link--inner {
        height: 14.2rem;
    }

    .content-section {
        margin-top: 2.4rem;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }

    .content-side {
        width: 1.8rem;
        padding-top: 2.4rem;
        display: block;
        font-size: 1.4rem;
        line-height: 1.2;
        text-align: center;
        position: sticky;
        top: 4.1rem;
    }

    .content-side small {
        display: block;
        font-size: 1rem;
        line-height: 1.2;
        margin-bottom: .8rem;
    }

    .content-list {
        width: calc(100% - 4rem);
    }

    .content-list .content-list__item {
        border-top: .1rem solid #D9D9D9;
        padding: 2.4rem 0;
        display: block;
    }

    .content-list .content-list__item:first-child {
        border-top: 0;
    }

    .content-list .content-list__item .content-box {
        max-width: 100%;
        display: block;
    }

    .content-list .content-list__item .content-box .content-box__image {
        width: 100%;
        margin-bottom: 1.6rem;
        aspect-ratio: 63 / 34;
    }

    .content-list .content-list__item .content-box .content-box__info {
        width: 100%;
    }

    .content-list .content-title {
        margin-bottom: 1.6rem;
    }

    .content-list .content-title .content-title__eng {
        font-size: 1.4rem;
        line-height: 1.5rem;
        margin-bottom: .4rem;
    }

    .content-list .content-title .content-title__jap {
        font-size: 3rem;
    }

    .content-list .content-subtitle {
        font-size: 1.8rem;
        line-height: 1.5;
        margin-bottom: 1.6rem;
    }

    .content-links {
        margin-top: 8.4rem;
    }

    .content-list .content-gallery {
        grid-template-columns: repeat(1, 1fr);
        gap: .8rem;
        margin-top: 1.6rem;
    }
}


/* !会社概要
---------------------------------------------------------- */
.company-wrap {
    padding: 2rem 0 0;
}

.company-item {
    padding: 10rem 0;
}

.company-item + .company-item {
    border-top: .1rem solid #D9D9D9;
}

.company-item .company-body {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.company-item .company-body .company-body__inner {
    width: 100%;
    max-width: 70rem;
}

.company-item .company-body .company-body__inner p + p {
    margin-top: 2.4rem;
}

.company-info .company-info__item {
    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
}

.company-info .company-info__item + .company-info__item {
    margin-top: 3.2rem;
    padding-top: 3.2rem;
    border-top: .1rem solid #D9D9D9;
}

.company-info .company-info__item dt,
.company-info .company-info__item dd {
    font-size: 1.8rem;
    line-height: 1.667;
}

.company-info .company-info__item dt {
    width: 20rem;
}

.company-info .company-info__item dd {
    width: calc(100% - 21.6rem);
}

.company-access .company-access__item {
    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
}

.company-access .company-access__item + .company-access__item {
    margin-top: 3.2rem;
    padding-top: 3.2rem;
    border-top: .1rem solid #D9D9D9;
}

.company-access .company-access__item .company-access__info {
    width: calc(100% - 35.6rem);
    font-size: 1.4rem;
    line-height: 1.714285714285714;
}

.company-access .company-access__item .company-access__map {
    width: 34rem;
    aspect-ratio: 17 / 12;
}

.company-access .company-access__item .company-access__map iframe {
    width: 100%;
    height: 100%;
}

.company-access .company-access-title {
    font-size: 2.2rem;
    line-height: 1.59;
    font-family: var(--ZenOldMincho);
    font-weight: bold;
    margin-bottom: 1.6rem;
}

.company-text {
    font-size: 1.8rem;
    line-height: 1.94;
}

.company-button {
    display: flex;
    gap: 2.4rem;
}

/*** hover ***/
@media screen and (min-width: 960px) {}

/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width : 767px){
    .company-wrap {
        padding: .8rem 0 6rem;
    }

    .company-item {
        width: calc(100% + 4rem);
        margin: 0 -2rem;
        padding: 4rem 2rem;
    }

    .company-item .company-body {
        display: block;
    }

    .company-item .company-body .company-body__inner {
        max-width: 100%;
    }

    .company-info .company-info__item + .company-info__item {
        margin-top: 1.6rem;
        padding-top: 1.6rem;
        border-top: .1rem dotted #888888;
    }

    .company-info .company-info__item dt,
    .company-info .company-info__item dd {
        font-size: 1.4rem;
        line-height: 1.714285714285714;
    }

    .company-info .company-info__item dt {
        width: 10rem;
    }

    .company-info .company-info__item dd {
        width: calc(100% - 11.6rem);
    }

    .company-access .company-access__item {
        flex-direction: column;
        gap: 2.4rem;
    }

    .company-access .company-access__item + .company-access__item {
        margin-top: 2.4rem;
        padding-top: 2.4rem;
        border-top: .1rem dotted #888888;
    }

    .company-access .company-access__item .company-access__info {
        width: 100%;
    }

    .company-access .company-access__item .company-access__map {
        width: 100%;
        aspect-ratio: 3 / 2;
    }

    .company-access .company-access-title {
        font-size: 2rem;
        line-height: 1.75;
        margin-bottom: .8rem;
    }

    .company-text {
        font-size: 1.4rem;
        line-height: 1.714285714285714;
        max-width: 100%;
    }

    .company-button {
        flex-direction: column;
        gap: 1.6rem;
    }
}


/* !ご挨拶
---------------------------------------------------------- */
#message .has-image #teaser .teaser-image {
    display: none;
}

#message #wrapper {
    position: relative;
    z-index: 2;
}

#message #wrapper:before {
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
    content: '';
    background: url(../img/message/teaser.jpg) center center no-repeat;
    background-size: cover;
}

.message-wrap {
    width: 100%;
    padding: 13.5rem 0 16.8rem;
    color: #fff;
    position: relative;
}

.message-wrap .blur-area {
    width: 100%;
    height: calc(100% + 100vh);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    content: '';
}

.message-body {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.message-box {
    width: 100%;
    max-width: 70rem;
    font-size: 1.8rem;
    line-height: 1.5;
}

.message-box p + p {
    margin-top: 1.5em;
}

.message-title {
    font-size: 4rem;
    line-height: 1.45;
    font-weight: 400;
    font-family: var(--ZenOldMincho);
    margin-bottom: 7rem;
}

.message-sign {
    margin-top: 10rem;
    display: flex;
    justify-content: flex-end;
    font-size: 2rem;
    line-height: 1.45;
    font-family: var(--ZenOldMincho);
    font-weight: 400;
}

.message-sign p + p {
    margin-top: 1.2rem;
}

.message-sign p {
    display: flex;
    align-items: center;
    gap: 3.5rem;
}

.message-sign .sign {
    font-size: 4rem;
    line-height: 1.45;
}

/*** hover ***/
@media screen and (min-width: 960px) {}

/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width : 767px){
    #message .has-image #teaser .teaser-image {
        display: block;
    }

    #message #wrapper {
        position: relative;
        z-index: 2;
    }

    #message #wrapper:before {
        display: none;
    }

    .message-wrap {
        background: #fff;
        padding: 5.6rem 0 8.6rem;
        color: #1C1C1C;
    }

    .message-wrap .blur-area {
        display: none;
    }

    .message-body {
        display: block;
    }

    .message-box {
        max-width: 100%;
        font-size: 1.6rem;
        line-height: 2;
    }

    .message-box p + p {
        margin-top: 2em;
    }

    .message-title {
        font-size: 2.6rem;
        line-height: 1.7;
        margin-bottom: 3rem;
    }

    .message-sign {
        margin-top: 5.6rem;
        font-size: 1.4rem;
    }

    .message-sign p + p {
        margin-top: 0;
    }

    .message-sign p {
        gap: 1.4rem;
    }

    .message-sign .sign {
        font-size: 2.4rem;
    }

}


/* !私たちについて
---------------------------------------------------------- */
.about-wrap {
    padding: 0 0 3.3rem;
}

.about-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.2rem 0 2.6rem;
}

.about-image {
    width: 42.329%;
}

.about-image img {
    width: 100%;
}

.about-box {
    width: 52.68%;
}

.about-title {
    font-size: 3rem;
    line-height: 1.43;
    font-weight: bold;
    font-family: var(--ZenOldMincho);
    margin-bottom: 4rem;
}

.guideline-list li {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    font-size: 1.8rem;
    line-height: 1.667;
}

.guideline-list li + li {
    margin-top: 3.2rem;
    padding-top: 3.2rem;
    border-top: .1rem solid #D9D9D9;
}

.guideline-list li .number {
    min-width: 4rem;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(#03C29B 1.42%, #0575E6 100%);
    font-size: 1.6rem;
    font-family: var(--ZenOldMincho);
    font-weight: 400;
    line-height: 1;
    color: #fff;
    border-radius: 100%;
}

/*** hover ***/
@media screen and (min-width: 960px) {}

/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width : 767px){
    .about-wrap {
        padding: 0 0 6rem;
    }

    .about-area {
        flex-direction: column-reverse;
        gap: 4.8rem;
        padding: .8rem 0 2.4rem;
    }

    .about-image {
        width: 100%;
    }

    .about-box {
        width: 100%;
    }

    .about-heading {
        margin-bottom: 4.8rem;
    }

    .about-heading .about-heading__jap {
        display: block;
        font-size: 1.6rem;
        line-height: 1.5;
        font-family: var(--ZenOldMincho);
        font-weight: bold;
        margin-bottom: 1.1rem;
    }

    .about-heading .about-heading__eng {
        display: block;
        font-size: 1.6rem;
        line-height: 1;
        font-family: var(--KoPubBatang);
        font-weight: 400;
        letter-spacing: .02em;
        text-transform: uppercase;
    }

    .about-title {
        font-size: 2.6rem;
        line-height: 1.384615384615385;
    }

    .guideline-list li {
        align-items: flex-start;
        font-size: 1.4rem;
        line-height: 1.571428571428571;
    }

    .guideline-list li + li {
        margin-top: 2.4rem;
        padding-top: 2.4rem;
        border-top: .1rem dotted #888888;
    }
}


/* !TOP
---------------------------------------------------------- */
.top-company {
    padding: 8.6rem 0 0;
    overflow: hidden;
}

.top-company-box {
    position: relative;
    padding: 5rem 50% 6.4rem 0;
}

.top-title {
    font-size: 2.6rem;
    line-height: 1.384615384615385;
    font-weight: bold;
    font-family: var(--ZenOldMincho);
    margin-bottom: 3.4rem;
}

.top-text {
    font-size: 1.4rem;
    line-height: 1.8;
    font-weight: 400;
    max-width: 45rem;
    margin-bottom: 5.2rem;
}

.top-company-links {
    width: 100%;
    max-width: 44.25rem;
}

.top-company-links .top-company-links__item a {
    display: block;
    position: relative;
    padding: 3.8rem 4.1rem 2.1rem 0;
    font-size: 2rem;
    line-height: 1.45;
    font-family: var(--ZenOldMincho);
    font-weight: bold;
    background: url(../img/common/icon_arrow_right_black.svg) right .85rem top 5.1rem no-repeat;
    background-size: 2.4rem auto;
}

.top-company-links .top-company-links__item a:before {
    width: 100%;
    height: .2rem;
    background: #F0F0F0;
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
}

.top-company-links .top-company-links__item a:after {
    width: 3rem;
    height: .2rem;
    background: #1C1C1C;
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    transition: width .3s ease, background .3s ease;
}

.top-company-links .top-company-links-image {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    width: 50vw;
    height: 100%;
    padding-left: 4rem;
    opacity: 0;
    transition: opacity .3s ease;
    overflow: hidden;
}

.top-company-links .top-company-links__item:nth-child(1) .top-company-links-image {
    opacity: 1;
}
 
.top-company-links .top-company-links-image img {
    width: 100%;
    height: 120%;
    object-fit: cover;
}

/*** hover ***/
@media screen and (min-width: 960px) {
    .top-company-links .top-company-links__item a:hover {
        text-decoration: none;
    }

    .top-company-links .top-company-links__item a:hover:after {
        background: linear-gradient(90deg, #03C29B 0%, #0575E6 100%);
        width: 100%;
    }

    .top-company-links .top-company-links__item a:hover + .top-company-links-image {
        opacity: 1;
    }
}

/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width : 767px){
    .top-company {
        padding: 3.6rem 0 0;
    }

    .top-company-box {
        padding: 0;
    }

    .top-title {
        margin-bottom: 4rem;
    }

    .top-text {
        max-width: 100%;
        margin-bottom: 6.4rem;
    }

    .top-company-links {
        max-width: 100%;
    }

    .top-company-links .top-company-links__item + .top-company-links__item {
        margin-top: 4rem;
    }

    .top-company-links .top-company-links__item a {
        padding: 0 3rem 2.4rem 0;
        font-size: 2rem;
        line-height: 1.15;
        background: url(../img/common/icon_arrow_right_black.svg) right 1rem no-repeat;
        background-size: 2.4rem auto;
    }

    .top-company-links .top-company-links-image {
        position: relative;
        left: 0;
        width: 100%;
        margin-top: 2rem;
        padding-left: 0;
        opacity: 1;
        aspect-ratio: 2 / 1;
        overflow: hidden;
    }
}

.top-content {
    padding: 12rem 0 0;
}

.top-content-top {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 4rem;
}

.top-content-top .top-content-top__box {
    width: 50%;
    padding-left: 4rem;
}

.top-content-top .top-content-top__box .top-title {
    margin-bottom: 2.4rem;
}

.top-content-top .top-content-top__box .top-text {
    margin-bottom: 0;
}

.top-content-body {
    position: relative;
    width: 100%;
}

.top-content-sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content-sticky {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 96rem;
    margin: 0 auto;
}

.content-sticky .content-sticky__image {
    width: 40rem;
    height: 40rem;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.content-sticky .content-sticky__image ul {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
}

.content-sticky .content-sticky__image ul li {
    font-size: 1px;
    line-height: 1;
    width: 100%;
    height: 40rem;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.content-sticky .content-sticky__image ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-sticky .content-sticky__links {
    width: 100%;
    max-width: 48rem;
    position: relative;
}

.content-sticky .content-sticky__links .content-sticky__links--item {
    width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0s linear 0s;
}

.top-content-body[data-page="0"] .content-sticky__links--item[data-section="0"],
.top-content-body[data-page="1"] .content-sticky__links--item[data-section="1"],
.top-content-body[data-page="2"] .content-sticky__links--item[data-section="2"] {
    opacity: 1;
    pointer-events: auto;
    transition: opacity .5s inear .1s;
    z-index: 3;
}

.top-content-links {
    display: block;
    color: #fff;
}

.top-content-links .top-content-links__eng {
    text-transform: uppercase;
    font-size: 1.1rem;
    line-height: 1.2rem;
    font-family: var(--KoPubBatang);
    font-weight: 400;
    margin-bottom: 1.5rem;
    display: block;
}

.top-content-links .top-content-links__jap {
    font-size: 4.2rem;
    line-height: 1.25;
    font-family: var(--ZenOldMincho);
    font-weight: 500;
    display: block;
}

.top-content-links .top-content-links__button {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5.3rem;
    border-top: .1rem solid rgba(255, 255, 255, .4);
    width: 100%;
    max-width: 32.5rem;
    height: 5.8rem;
    font-size: 1.588rem;
    line-height: 1.32;
    font-family: var(--ZenOldMincho);
    font-weight: 500;
}

.top-content-links .top-content-links__button:after {
    width: 2.4rem;
    height: .4rem;
    content: '';
    background: url(../img/common/icon_arrow_right_white.svg) center center no-repeat;
    background-size: 100% 100%;
    transform: translateX(-.8rem);
    transition: transform .3s ease;
}

.top-content-main {
    width: 100%;
    margin-top: -100vh;
    z-index: 1;
}

.top-content-main .top-content-main__item {
    width: 100%;
    height: 150vh;
    overflow: hidden;
    position: relative;
}

.top-content-main .top-content-main__item:before {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    content: '';
    background: #000;
    opacity: .4;
}

.top-content-main .top-content-main__item img {
    width: 100%;
    height: 120%;
    object-fit: cover;
    filter: grayscale(100%);
}

/*** hover ***/
@media screen and (min-width: 960px) {
    .top-content-links:hover {
        text-decoration: none;
    }

    .top-content-links:hover .top-content-links__button:after {
        transform: translateX(0);
    }
}

/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width : 767px){
    .top-content {
        padding: 8rem 0 0;
    }

    .top-content-top {
        display: block;
        padding-bottom: 2.4rem;
    }

    .top-content-top .top-content-top__box {
        width: 100%;
        padding-left: 0;
    }

    .top-content-top .top-content-top__box .top-title {
        margin-bottom: 3rem;
    }

    .content-sticky {
        display: block;
        max-width: 100%;
    }

    .content-sticky .content-sticky__image {
        width: 24rem;
        height: 24rem;
        margin: 0 auto;
    }

    .content-sticky .content-sticky__image ul li {
        height: 24rem;
    }

    .content-sticky .content-sticky__links {
        max-width: 100%;
        margin-top: 2.2rem;
        text-align: center;
    }

    .content-sticky .content-sticky__links .content-sticky__links--item {
        width: 100%;
        top: 0;
        transform: translateY(0);
    }

    .content-sticky .content-sticky__links .content-sticky__links--item[data-section="0"] {
        position: relative;
    }

    .top-content-links .top-content-links__eng {
        font-size: .9rem;
        line-height: 1rem;
        margin-bottom: .8rem;
    }

    .top-content-links .top-content-links__jap {
        font-size: 2.9rem;
        line-height: 1.2;
        font-weight: 400;
    }

    .top-content-links .top-content-links__button {
        margin-top: 6rem;
        max-width: 17.2rem;
        height: 4.6rem;
        font-size: 1.4rem;
        line-height: 1.428571428571429;
    }
}

.top-news {
    padding: 12rem 0;
}

.top-news .top-news__body {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: -4.4rem;
}

.top-news .top-news__body .news-list {
    max-width: 72rem;
}

.news-list {
    width: 100%;
}

.news-list li {
    border-top: .1rem solid #CCCCCC;
}

.news-list .news-list__item {
    display: flex;
    align-items: flex-start;
    padding: 2rem 4rem 2rem 0;
    background: url(../img/common/icon_arrow_right_black.svg) right .8rem center no-repeat;
    background-size: 2.4rem auto;
    color: #000;
}

.news-list .news-list__item .news-date {
    width: 8.4rem;
    font-size: 1rem;
    line-height: 1.9;
    /*font-family: var(--inter);*/
    font-weight: 400;
}

.news-list .news-list__item .news-title {
    font-size: 1.4rem;
    line-height: 1.357142857142857;
    /*font-family: var(--inter);*/
    font-weight: 500;
    width: calc(100% - 8.4rem);
}

/*** hover ***/
@media screen and (min-width: 960px) {
    .news-list .news-list__item:hover {
        text-decoration: none;
    }

    .news-list .news-list__item:hover .h-underline {
        background-size: 100% .1rem;
    }
}

/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width : 767px){
    .top-news {
        padding: 8rem 0;
    }

    .top-news .top-news__body {
        display: block;
        margin-top: 0;
    }

    .top-news .top-news__body .news-list {
        max-width: 100%;
    }

    .news-list li {
        border-top: .1rem solid #CCCCCC;
    }

    .news-list .news-list__item {
        flex-direction: row-reverse;
        align-items: center;
        padding: 1rem 0 3rem;
        background: url(../img/common/icon_arrow_right_black.svg) right 2.5rem top 5.2rem no-repeat;
        background-size: 2.4rem auto;
        min-height: 8.2rem;
    }

    .news-list .news-list__item .news-date {
        width: 13.3rem;
        text-align: right;
        font-size: 1rem;
        line-height: 1.3;
        padding-right: .8rem;
    }

    .news-list .news-list__item .news-title {
        font-size: 1.2rem;
        line-height: 1.5;
    }
}

.top-recruit {
    width: 100%;
    background: linear-gradient(180deg, #03C29B 0%, #0575E6 100%);
    position: relative;
}

.top-recruit .top-recruit-links {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.top-recruit .top-recruit__body {
    width: 100%;
    height: 83.4rem;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.top-recruit-head {
    color: #fff;
    font-size: 1.4rem;
    line-height: 1.8;
    position: absolute;
    top: 21.5rem;
    left: calc(50% + 7rem);
    z-index: 2;
}

.top-recruit-head .heading-large .heading-large__jap .js-letter__char:before {
    background: #fff;
}

.top-recruit-icon {
    position: absolute;
    right: 0;
    bottom: 20rem;
    z-index: 2;
    width: 12rem;
    height: 12rem;
    border-radius: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-recruit-icon:before {
    content: '';
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 100%;
    background: linear-gradient(121.75deg, #03C29B 0%, #0575E6 100%);
    transition: all .3s ease;
}

.top-recruit-icon:after {
    content: '';
    width: 2rem;
    height: 2rem;
    background: url(../img/common/icon_arrow_wh.svg) center center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) scale(0);
    z-index: 2;
    transition: all .3s ease;
}

.js-image-scroll {
    overflow: hidden;
    display: flex;
}
.js-image-scroll ul {
    display: flex;
}
.js-image-scroll ul:nth-child(odd) {
    animation-name: image-loop-left1;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.js-image-scroll ul:nth-child(even) {
    animation-name: image-loop-left2;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.js-image-scroll.is-vertical,
.js-image-scroll.is-vertical ul {
    flex-direction: column;
}

.js-image-scroll.is-vertical ul:nth-child(odd) {
    animation-name: image-loop-up1;
}

.js-image-scroll.is-vertical ul:nth-child(even) {
    animation-name: image-loop-up2;
}

@keyframes image-loop-left1 {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}
@keyframes image-loop-left2 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-200%);
    }
}
@keyframes image-loop-up1 {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(-100%);
    }
}
@keyframes image-loop-up2 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-200%);
    }
}

.top-recruit-gallery {
    width: 82.8rem;
    gap: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.top-recruit-gallery:after {
    width: 59.5rem;
    height: 161rem;
    position: absolute;
    right: -5.2rem;
    top: -6rem;
    z-index: 2;
    content: '';
    background: linear-gradient(180deg, rgba(3, 181, 168, 0) 3.82%, rgba(5, 121, 226, 0.6) 54.9%);
}

.top-recruit-gallery .top-recruit-gallery__item {
    height: 100%;
    width: 100%;
}

.top-recruit-gallery .top-recruit-gallery__item ul li {
    padding-bottom: 1.2rem;
    font-size: 1px;
    line-height: 1;
}

.top-recruit-gallery .top-recruit-gallery__item img {
    width: 100%;
}

.top-recruit-gallery .top-recruit-gallery__item:nth-child(even),
.top-recruit-gallery .top-recruit-gallery__item:nth-child(even) ul {
    align-items: flex-end;
}

.top-recruit-gallery .top-recruit-gallery__item:nth-child(even),
.top-recruit-gallery .top-recruit-gallery__item:nth-child(even) img{
    transform: scaleY(-1);
}

/*** hover ***/
@media screen and (min-width: 960px) {
    .top-recruit .top-recruit-links:hover + .top-recruit__body .top-recruit-icon:before {
        width: 100%;
        height: 100%;
    }

    .top-recruit .top-recruit-links:hover + .top-recruit__body .top-recruit-icon:after {
        transform: translate(-50%,-50%) scale(1);
    }
}

/*** 非スマホ 375px ~ 767 ***/
@media only screen and (max-width : 767px){
    .top-recruit {
        padding: 6rem 0;
    }

    .top-recruit .top-recruit__body {
        width: calc(100% + 4rem);
        margin: 0 -2rem;
        height: auto;
        overflow: hidden;
        position: relative;
        z-index: 2;
    }

    .top-recruit-head {
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 7.5rem;
        padding: 0 2rem;
    }

    .top-recruit-icon {
        right: 2rem;
        bottom: 25.4rem;
        width: 8rem;
        height: 8rem;
    }

    .top-recruit-icon:before {
        display: none;
    }

    .js-image-scroll.is-vertical,
    .js-image-scroll.is-vertical ul {
        flex-direction: row;
    }

    .js-image-scroll.is-vertical ul:nth-child(odd) {
        animation-name: image-loop-left1;
    }

    .js-image-scroll.is-vertical ul:nth-child(even) {
        animation-name: image-loop-left2;
    }

    .top-recruit-gallery {
        width: 100%;
        gap: 1.6rem;
        flex-direction: column;
    }

    .top-recruit-gallery:after {
        display: none;
    }

    .top-recruit-icon:after {
        width: 1.5rem;
        height: 1.5rem;
        background-image: url(../img/common/icon_arrow_color.svg);
        transform: translate(-50%,-50%) scale(1);
    }

    .top-recruit-gallery .top-recruit-gallery__item {
        height: auto;
        width: 100%;
    }

    .top-recruit-gallery .top-recruit-gallery__item ul li {
        padding: 0 1.2rem 0 0;
        width: 13.2rem;
    }

    .top-recruit-gallery .top-recruit-gallery__item img {
        width: 100%;
    }

    .top-recruit-gallery .top-recruit-gallery__item:nth-child(even),
    .top-recruit-gallery .top-recruit-gallery__item:nth-child(even) ul {
        align-items: flex-end;
    }

    .top-recruit-gallery .top-recruit-gallery__item:nth-child(even),
    .top-recruit-gallery .top-recruit-gallery__item:nth-child(even) img{
        transform: scaleX(-1);
    }
}



/* !cursor
---------------------------------------------------------- */
#magic-cursor {
    position: absolute;
    left:0;
    top:0;
    width: 30px;
    height: 30px;
    pointer-events: none;
    z-index:10000;
    -webkit-transition: opacity 0.2s ease-in-out 0.5s;
            transition: opacity 0.2s ease-in-out 0.5s;
}

.hidden-ball #magic-cursor {
    opacity:0!important;
    visibility:hidden;
}

#ball {
    position: fixed;
    width: 80px;
    height: 80px;
    border: 2px solid #999999;
    border-radius: 50%;
    pointer-events: none;
    opacity:1;
    box-sizing:border-box;
     -webkit-transform: scale(0.5);
    transform: scale(0.5);  
}

#ball.with-blur {
    /*-webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);*/
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);        
}

#ball:before {
    font: var(--fa-font-solid);
    content: "\f106";
    font-size:14px;
    width:8px;
    height:16px;
    line-height:16px;
    text-align:center;
    position:absolute;
    left: 32px;
    top: -42px;
    color:#999;
    opacity:0;
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    transition: all 0.15s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

#ball::after {
    font: var(--fa-font-solid);
    content: "\f107";
    font-size: 14px;
    width: 8px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    position: absolute;
    left: 32px;
    top: 100px;
    color: #999;
    opacity:0;
    transform: translateY(20px);
    -webkit-transform: translateY(20px);
    transition: all 0.15s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.scale-up #ball:before, .scale-drag-horizontal #ball:before {
    opacity:1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.scale-drag-horizontal #ball:before {
    color: #fff;
}

.scale-up #ball:after, .scale-drag-horizontal #ball:after {
    opacity:1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.scale-drag-horizontal #ball:after {
    color: #fff;
}

.scale-up.scale-none #ball:before, .scale-up.scale-none #ball:after {
    opacity:0;
}

#ball-drag-x {
    position: absolute;
    width: 72px;
    height: 72px;
    pointer-events: none;
    opacity:1;
    box-sizing:border-box;  
}

#ball-drag-x::before {
    font: var(--fa-font-solid);
    content: "\f053";
    font-size: 14px;
    width: 8px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    position: absolute;
    left: -37px;
    top: 30px;
    color: #000;
    opacity: 0;
    transform: translateX(-20px);
    -webkit-transform: translateX(-20px);
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

#ball-drag-x::after {
    font: var(--fa-font-solid);
    content: "\f054";
    font-size: 14px;
    width: 8px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    position: absolute;
    right: -40px;
    left: auto;
    top: 30px;
    color: #000;
    opacity: 0;
    transform: translateX(20px);
    -webkit-transform: translateX(20px);
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.drag-cursor-white #ball-drag-x:before, .drag-cursor-white #ball-drag-x:after {
    color:#fff;
}

.drag-cursor-black #ball-drag-x:before, .drag-cursor-black #ball-drag-x:after {
    color:#000;
}

.scale-drag-x #ball-drag-x:before {
    opacity:1;
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.scale-drag-x #ball-drag-x:after {
    opacity:1;
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.scale-up.scale-drag #ball-drag-x:before, .scale-up.scale-drag #ball-drag-x:after {
    opacity:0;
}

#ball-drag-y {
    position: absolute;
    width: 72px;
    height: 72px;
    pointer-events: none;
    opacity:1;
    box-sizing:border-box;  
}

#ball-drag-y:before {
    font: var(--fa-font-solid);
    content: "\f077";
    font-size:14px;
    width:8px;
    height:16px;
    line-height:16px;
    text-align:center;
    position:absolute;
    left: 32px;
    top: -40px;
    color:#000;
    opacity:0;
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

#ball-drag-y::after {
    font: var(--fa-font-solid);
    content: "\f078";
    font-size: 14px;
    width: 8px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    position: absolute;
    left: 32px;
    top: 100px;
    color: #000;
    opacity:0;
    transform: translateY(20px);
    -webkit-transform: translateY(20px);
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.scale-drag-y #ball-drag-y:before {
    opacity:1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.scale-drag-y #ball-drag-y:after {
    opacity:1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.scale-up.scale-drag #ball-drag-y:before, .scale-up.scale-drag #ball-drag-y:after {
    opacity:0;
}

#ball i {
    color:#fff;
    width: 9rem;
    height: 9rem;
    text-align:center;
    display:block;
    opacity:1;
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

#ball {
    display:flex;
    flex-direction: column;
    justify-content: center;
}

#ball p {
    color:#fff;
    width:auto;
    height:16px;
    line-height:16px;
    padding-top:0px;
    padding-left:0px;
    box-sizing:border-box;
    margin:0 auto;
    margin-bottom:0;
    text-align:center;
    font-size: 1rem;
    display:flex;
    flex-direction: column;
    align-self: center;
    opacity:1;
    position:relative;
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

#ball p.center-first::before {
    content:"";
    font-weight: 500;
    position:absolute;
    height:20px;
    top:calc(50% - 10px);
    left:-8px;
    line-height:20px;
}

#ball p.center-first::after {
    content:"";
    font-weight: 500;
    position:absolute;
    height:20px;
    top:calc(50% - 10px);
    right:-8px;
    line-height:20px;
}

.drag-cursor-white #ball i, .drag-cursor-white #ball.with-icon i {
    color:#fff;
}

.drag-cursor-black #ball i, .drag-cursor-black #ball.with-icon i {
    color:#000;
}

.scale-up #ball i {
    opacity:0;
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

#ball.with-icon i {
    width:76px;
}

#ball.with-icon i:nth-child(2) {
    display:none;
}

#ball.close-icon i {
    width:75px;
    height:76px;
    font-size:14px;
}

#ball.over-movie i.fa-play, #ball.over-movie.pause-movie i.fa-pause {
    display:block;
}

#ball.over-movie i.fa-pause, #ball.over-movie.pause-movie i.fa-play {
    display:none;
}

#ball-loader {
    width: 100px;
    height: 100px;
    position:absolute;
    background-color: transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid #999999;
    border-left: 4px solid transparent;
    border-top: 4px solid transparent;
    border-radius: 100px;
    box-sizing: border-box;
    opacity:0;
    -webkit-transform: translate(-14px, -14px) rotate(0deg);
    transform: translate(-14px, -14px) rotate(0deg);
    -webkit-animation: rotating 0.8s ease-in-out infinite;
    animation: rotating 0.8s ease-in-out infinite;
    -webkit-transition: opacity 0s ease-in-out 0s;
    transition: opacity 0s ease-in-out 0s;
}

.show-loader #ball-loader {
    opacity:1;
    -webkit-transition: opacity 0.2s ease-in-out 0s;
    transition: opacity 0.2s ease-in-out 0s;
}

@keyframes rotating {
    0% {
        -webkit-transform: translate(-14px, -14px)rotate(0deg);
        transform:  translate(-14px, -14px) rotate(0deg);
    }

    95% {
        -webkit-transform:  translate(-14px, -14px) rotate(350deg);
        transform:  translate(-14px, -14px) rotate(350deg);
    }

    100% {
        -webkit-transform:  translate(-14px, -14px) rotate(360deg);
        transform:  translate(-14px, -14px) rotate(360deg);
    }
}

.show-loader a, .show-loader nav, .scale-up a, .scale-up .hide-ball, scale-up .link, .scale-up .button-wrap, .scale-up #burger-wrapper, .scale-up .disable-drag, .scale-drag a, .scale-drag .move-title {
    pointer-events:none!important;
}

.disable-cursor #magic-cursor {
    display:none;
}

#ball i.arrow-icon {
    border: solid #fff;
    border-width: 3px 3px 0px 0px;
    box-sizing:border-box;
    display: block;
    position:absolute;
    top:28px;
    left:30px;
    height:20px;
    width:20px;
}

#ball i.arrow-icon:after {
    content:"";
    position:absolute;
    width:30px;
    height:3px;
    top:8px;
    left:-8px;
    background-color:#fff;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}