@charset "UTF-8";
/*--------------------------------------------------------------
Foundation
--------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, i, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, figure, figcaption,
button, input, textarea, select, i {
  border: 0;
  font-style: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
  line-height: 1.5;
}

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

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

body {
  font-size: 20px;
  font-size: 2rem;
  line-height: 1.5;
  background: #fff;
  color: #333333;
  overflow-x: hidden;
  overflow-y: scroll;
  font-family: 'Noto Sans JP', sans-serif;
}

ul, li {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

a:hover,
a:active,
a:focus {
  outline: 0;
}

a {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  -webkit-transition-property: opacity, color, background, box-shadow, -webkit-transform;
  transition-property: opacity, color, background, box-shadow, -webkit-transform;
  transition-property: opacity, color, background, transform, box-shadow;
  transition-property: opacity, color, background, transform, box-shadow, -webkit-transform;
  opacity: 1;
  line-height: inherit;
}

img {
  vertical-align: middle;
}

img,
input[type="image"] {
  border: 0;
  height: auto;
  max-width: 100%;
}

input[type="submit"], input[type="button"], button {
  cursor: pointer;
  -webkit-appearance: none;
  border-radius: 0;
  font-size: inherit;
  letter-spacing: inherit;
  background: none;
}

strong {
  font-weight: bold;
}

a {
  text-decoration: none;
}

a:hover,
input[type="image"]:hover {
  opacity: 0.7;
}

p {
  line-height: inherit;
}

p * {
  line-height: inherit;
}

main {
  overflow: hidden;
}

.m_ft {
  font-family: "游明朝 Medium", "Yu Mincho Medium", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.g_ft {
  font-family: 'Noto Sans JP', sans-serif;
}

.ft_e {
  font-family: 'Oswald', sans-serif;
  letter-spacing: .1em;
}

/*--------------------------------------------------------------
Component
--------------------------------------------------------------*/
.evt {
  visibility: hidden;
}

.c_anchor {
  position: absolute;
  width: 100%;
  left: 0;
}

@media screen and (max-width: 767px) {
  .c_anchor {
    margin-top: -6rem;
  }
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

.c_ttl {
  text-align: center;
  font-size: 2.6rem;
  margin-bottom: 10rem;
  line-height: 1;
}

.c_btn a {
  display: inline-block;
  font-size: 1.8rem;
  background: #333333;
  color: #fff;
  position: relative;
  width: 11.5em;
  line-height: 6.4rem;
  padding-left: 1.4em;
  border: solid 1px #333333;
}

.c_btn a.gray {
  background: #cddad9;
  border: solid 1px #cddad9;
}

.c_btn a.gray:hover {
  border: solid 1px #333333;
}

.c_btn a.white {
  background: #fff;
  border: solid 1px #fff;
  color: #231815;
}

.c_btn a.white:before {
  border-left: 0.45em solid #333333;
}

.c_btn a.white:hover {
  color: #fff;
}

.c_btn a.white:hover:before {
  border-left: .45em solid #fff;
}

.c_btn a.red {
  background: #e00022;
  border: solid 1px #e00022;
}

.c_btn a.red:hover {
  color: #e00022;
}

.c_btn a.red:hover:before {
  border-left: .45em solid #e00022;
}

.c_btn a:before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1.4em;
  border: .25em solid transparent;
  border-left: .45em solid #fff;
  transition: border .2s ease-in;
}

.c_btn a:hover {
  opacity: 1;
  background: none;
  color: #333333;
}

.c_btn a:hover:before {
  border-left: 0.45em solid #333333;
}

.c_btn2 > * {
  color: #9bcea1;
  display: inline-block;
  font-size: 1.8rem;
  letter-spacing: .05em;
  position: relative;
  padding-right: 1.5em;
}

.c_btn2 > *:before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: .25em solid transparent;
  border-left: .4em solid #9bcea1;
  right: 0;
}

.scroll_move .move {
  position: relative;
}

.scroll_fixed {
  height: 600vh;
  position: relative;
}

.fixed_wrap {
  height: 100vh;
  position: relative;
  right: 0;
  top: 0;
  margin-left: auto;
  width: 100%;
}

.fixed_wrap .box {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.fixed_wrap.fixed {
  position: fixed;
}

@media screen and (min-width: 768px) {
  .fixed_wrap.fixed {
    width: calc(100% - 7.6rem);
  }
}

.fixed_wrap.fixed.abs {
  position: absolute;
  width: 100%;
  top: auto;
  left: 0;
  bottom: 0;
}

.img_wrap {
  height: 100vh;
  background: no-repeat 50% / cover;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  transition: background .2s ease-in;
}

.img_wrap img {
  opacity: 0;
}

.mask {
  position: relative;
  z-index: 2;
}

.mask.evt {
  visibility: visible;
}

.mask:before, .mask:after {
  content: '';
  transition: transform .4s ease-in;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: scaleX(1);
  height: 100%;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

.mask:before {
  z-index: 2;
  background: #000;
  transition-delay: 1s;
}

.mask:after {
  background: #fff;
  z-index: 3;
}

.mask.show:before {
  transform: scaleX(0);
}

.mask.show:after {
  transform: scaleX(0);
}

/*--------------------------------------------------------------
Utility
--------------------------------------------------------------*/
.u_wrap {
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  .u_wrap {
    margin-left: 7.6rem;
  }
}

.u_inner {
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .u_inner {
    max-width: calc(100% - 4rem);
  }
}

html {
  font-size: 10px;
}

@media screen and (min-width: 768px) and (max-width: 1500px) {
  html {
    font-size: calc(100vw * 10 / 1500);
  }
}

@media screen and (max-width: 767px) {
  html {
    font-size: calc(100vw * 10 / 500);
  }
}

.u_clearfix:after,
.u_clearfix > li:after {
  height: 0;
  visibility: hidden;
  content: ".";
  display: block;
  clear: both;
}

* html .u_clearfix,
* html .u_clearfix > li {
  zoom: 1;
}

* + html .u_clearfix,
* + html .u_clearfix li {
  zoom: 1;
}

.u_switch_img {
  opacity: 1;
}

.u_relative {
  position: relative;
}

@media screen and (min-width: 768px) {
  .u_visible_sp {
    display: none;
  }
  .u_tel {
    pointer-events: none;
    cursor: default;
  }
  .u_tel:hover {
    opacity: 1;
  }
}

@media screen and (max-width: 767px) {
  .u_visible_pc {
    display: none;
  }
  .u_inner {
    width: auto;
    margin: 0 3.5rem;
  }
  .u_inner.b {
    margin: 0;
  }
}

/*--------------------------------------------------------------
Layout/PageBase
--------------------------------------------------------------*/
#header a {
  display: block;
}

@media screen and (max-width: 767px) {
  #header {
    height: 6rem;
    top: 0;
    width: 100%;
    position: fixed;
    background: #fff;
    z-index: 66;
  }
}

@media screen and (min-width: 768px) {
  .h_side {
    position: fixed;
    width: 7.6rem;
    height: 100%;
    top: 0;
    z-index: 10;
    background: #fff;
  }
}

@media screen and (min-width: 768px) {
  .h_logo {
    position: fixed;
    right: 2rem;
    top: 2rem;
    z-index: 66;
  }
}

@media screen and (max-width: 767px) {
  .h_logo {
    position: absolute;
    left: 2rem;
    top: 1.7rem;
  }
  .h_logo img {
    width: 1.5rem;
  }
}

.h_logo a {
  display: block;
  background: url(../img/logo.svg) no-repeat center top/contain;
}

.h_logo img {
  display: block;
  width: 10.6rem;
  opacity: 0;
}

@media screen and (min-width: 768px) {
  body.h_w .h_logo a {
    background: url(../img/logo_w.svg) no-repeat center top/contain;
  }
}

.h_sns img {
  width: 1.3rem;
}

.h_sns li {
  margin: .8rem 0;
}

@media screen and (min-width: 768px) {
  .h_sns {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@media screen and (max-width: 767px) {
  .h_sns {
    position: absolute;
    top: 1.2rem;
    right: 6rem;
  }
  .h_sns li {
    display: inline-block;
    margin: 0 .5rem;
  }
}

.h_logo2 a {
  transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translateY(-3rem);
  opacity: 0;
}

body.open .h_logo2 a {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 1s;
}

.h_logo2 img {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .h_logo2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 7.4rem;
  }
}

@media screen and (max-width: 767px) {
  .h_logo2 {
    width: 10.6rem;
    margin: 0 auto;
  }
}

.h_nav li {
  font-size: 1.8rem;
  padding: .6em 0;
  transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translateX(5rem);
  opacity: 0;
}

.h_nav li:nth-child(odd) {
  transform: translateX(-5rem);
}

body.open .h_nav li {
  transform: translateX(0);
  opacity: 1;
  transition-delay: 1s;
}

.h_nav a.active, .h_nav a:hover {
  opacity: 1;
}

.h_nav a.active i, .h_nav a:hover i {
  position: relative;
}

.h_nav a.active i:before, .h_nav a:hover i:before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-bottom: solid 2px #000;
  width: calc(100% + .8em);
  top: 50%;
}

@media screen and (min-width: 768px) {
  .h_nav {
    margin-left: 17.5rem;
  }
}

@media screen and (max-width: 767px) {
  .h_nav {
    text-align: center;
    padding: 1.5rem 0 4rem;
    margin: 0 5rem;
  }
  .h_nav li {
    font-size: 2.1rem;
    padding: .5em 0;
  }
}

@media screen and (min-width: 768px) {
  .h_wrap {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 14rem;
  }
}

.h_menu {
  position: absolute;
  top: .6rem;
  width: 7.6rem;
  height: 7.6rem;
  cursor: pointer;
}

@media screen and (min-width: 768px) {
  .h_menu {
    left: 0;
  }
}

.h_menu:hover .wrap {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.h_menu .wrap {
  width: 1.8rem;
  height: 1.4rem;
  display: block;
  margin: 2.3rem auto 0;
  position: relative;
  overflow: visible;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.h_menu i {
  display: block;
  width: 1.8rem;
  position: absolute;
  height: 2px;
  background: #000;
  transition: left 1s ease-in-out;
}

@media screen and (min-width: 768px) {
  .h_menu i {
    left: -15rem;
  }
}

@media screen and (max-width: 767px) {
  .h_menu i {
    right: -15rem;
    transition-property: right;
  }
}

.h_menu.show i {
  -webkit-animation-duration: .4s, 4s;
  animation-duration: .4s, 4s;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: both, none;
  animation-fill-mode: both, none;
}

@media screen and (min-width: 768px) {
  .h_menu.show i {
    left: 0;
  }
}

@media screen and (max-width: 767px) {
  .h_menu.show i {
    right: 0;
  }
}

.h_menu .top {
  top: 0;
  -webkit-animation-name: line-slide-in, blink-top;
  animation-name: line-slide-in, blink-top;
  -webkit-animation-delay: 0s, .6s;
  animation-delay: 0s, .6s;
}

.h_menu .mid {
  transition-delay: .3s;
  top: 50%;
  margin-top: -1px;
  -webkit-animation-name: line-slide-in, blink-middle;
  animation-name: line-slide-in, blink-middle;
  -webkit-animation-delay: .1s, .6s;
  animation-delay: .1s, .6s;
}

.h_menu .btm {
  transition-delay: .4s;
  bottom: 0;
  -webkit-animation-name: line-slide-in, blink-bottom;
  animation-name: line-slide-in, blink-bottom;
  -webkit-animation-delay: .2s, .6s;
  animation-delay: .2s, .6s;
}

@media screen and (max-width: 767px) {
  .h_menu {
    width: 4.8rem;
    height: 4.8rem;
    right: 0;
  }
  .h_menu .wrap {
    margin-top: 1.6rem;
  }
}

.h_close {
  opacity: 0;
  transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body.open .h_close {
  opacity: 1;
  transition-delay: 1s;
}

@media screen and (min-width: 768px) {
  .h_close {
    left: -100%;
  }
  body.open .h_close {
    left: 0;
  }
}

.h_menu_close {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 50%;
  width: 1.8rem;
  height: 1px;
}

.h_menu_close:before, .h_menu_close:after {
  width: 1.8rem;
  height: 2px;
  background-color: #222;
}

.h_menu_close:before, .h_menu_close:after {
  content: '';
  position: absolute;
  width: 1.8rem;
  height: 1px;
  left: 0;
  top: 0;
}

.h_menu_close:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.h_menu_close:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.h_inner {
  background: #fff;
  padding: 4rem 0;
  height: 100%;
}

#toggle_menu {
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 67;
  overflow-x: hidden;
  overflow-y: auto;
  transition: left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-transition: left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: .4s;
}

@media screen and (min-width: 768px) {
  #toggle_menu {
    width: 50%;
    left: -100%;
  }
  body.open #toggle_menu {
    left: 0;
  }
}

@media screen and (max-width: 767px) {
  #toggle_menu {
    transition-property: right;
    right: -100%;
  }
  body.open #toggle_menu {
    right: 0;
  }
}

body.open {
  overflow-y: hidden;
}

#footer {
  background: #232323;
  color: #fff;
  padding: 12.5rem 0 2.5rem;
}

@media screen and (max-width: 767px) {
  #footer {
    padding: 5rem 0 2.5rem;
  }
}

.f_logo {
  width: 6.5rem;
}

@media screen and (min-width: 768px) {
  .f_logo {
    position: absolute;
  }
}

@media screen and (max-width: 767px) {
  .f_logo {
    margin: 0 auto 5rem;
    width: 5rem;
  }
}

.f_info dt {
  font-size: 1.8rem;
  margin-bottom: .3em;
}

.f_info dd {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.71;
  color: #969696;
}

@media screen and (max-width: 767px) {
  .f_info > * {
    width: 48%;
  }
  .f_info > *:nth-child(even) {
    float: right;
  }
  .f_info > *:nth-child(odd) {
    float: left;
    clear: both;
  }
}

@media screen and (min-width: 768px) {
  .f_info {
    margin-left: 50%;
    margin-bottom: 8rem;
  }
  .f_info dl + dl {
    margin-top: 4rem;
  }
}

@media screen and (min-width: 768px) {
  .f_mail {
    position: absolute;
    top: 0;
    right: 4.5rem;
  }
}

@media screen and (max-width: 767px) {
  .f_mail {
    margin: 4rem 0 4.5rem;
  }
  .f_mail a {
    width: 100%;
  }
}

.f_copy {
  color: #969696;
  font-size: 1.2rem;
  text-align: center;
}

@-webkit-keyframes line-slide-in {
  0% {
    -webkit-transform: translateX(-38px);
    transform: translateX(-38px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes line-slide-in {
  0% {
    -webkit-transform: translateX(-38px);
    transform: translateX(-38px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes blink-top {
  0%,
  60% {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  70% {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }
  80% {
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }
  90% {
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  100% {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

@keyframes blink-top {
  0%,
  60% {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  70% {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }
  80% {
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }
  90% {
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  100% {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

@-webkit-keyframes blink-middle {
  0%,
  60% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  70% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }
  80% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }
  90% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

@keyframes blink-middle {
  0%,
  60% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  70% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }
  80% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }
  90% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

@-webkit-keyframes blink-bottom {
  0%,
  60% {
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  70% {
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }
  80% {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }
  90% {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  100% {
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

@keyframes blink-bottom {
  0%,
  60% {
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  70% {
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }
  80% {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }
  90% {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  100% {
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

/*--------------------------------------------------------------
Project
--------------------------------------------------------------*/
.top_main {
  position: relative;
  height: 100vh;
  min-height: 50rem;
}

@media screen and (max-width: 767px) {
  .top_main {
    margin-top: 6rem;
    height: calc(100vh - 6rem);
  }
}

.top_main .img {
  height: 100%;
  background: no-repeat 50% / cover;
}

.top_main .box {
  height: 100%;
  position: relative;
}

@media screen and (min-width: 768px) {
  .top_main .box {
    margin-left: 34.6rem;
  }
}

.top_main .box dl {
  position: absolute;
  left: -14.5rem;
  bottom: 10%;
  width: 62.3rem;
}

@media screen and (max-width: 767px) {
  .top_main .box dl {
    width: 36.3rem;
    left: 3.5rem;
    bottom: 19.5rem;
  }
}

.top_main .box dd {
  margin-top: 5%;
  width: 70.07%;
}

.top_main .line {
  width: 100%;
  height: 5rem;
  display: block;
  position: absolute;
  overflow: hidden;
}

.top_main .line:before {
  content: '';
  height: 100%;
  border-left: solid 1px #fff;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  animation: wrap_on 1s ease-in-out 1.5s forwards;
}

@media screen and (max-width: 767px) {
  .top_main .line:before {
    border-left: solid 1px #717171;
  }
}

.top_main .line:after {
  content: '';
  height: 100%;
  border-left: solid 1px #717171;
  position: absolute;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, 0);
  animation: scroll_border 2.5s ease-in-out 2.5s infinite;
}

@media screen and (max-width: 767px) {
  .top_main .line:after {
    border-left: solid 1px #fff;
  }
}

.top_main .scroll {
  width: 4rem;
  position: absolute;
  left: 1.5rem;
  bottom: 0;
  z-index: 66;
  height: 5rem;
}

@media screen and (max-width: 767px) {
  .top_main .scroll {
    display: none;
  }
}

.top_main .scroll span {
  position: absolute;
  font-size: 1rem;
  top: -4rem;
  left: 0;
  transform: rotate(-90deg);
}

.top_main .scroll a {
  display: block;
}

@keyframes wrap_on {
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}

@keyframes scroll_border {
  0%,
  100%,
  52% {
    top: 0;
    opacity: 1;
  }
  25% {
    top: 100%;
    opacity: 1;
  }
  26% {
    top: 100%;
    opacity: 0;
  }
  27% {
    top: -100%;
    opacity: 0;
  }
}

.top_lead {
  position: relative;
  padding: 0 0 25rem;
}

@media screen and (max-width: 767px) {
  .top_lead {
    padding: 0 0 25rem;
  }
}

.top_lead:before {
  content: '';
  position: absolute;
  background: url(../img/top_bg01.jpg) no-repeat left center/100%;
  height: 100%;
  width: 45%;
  left: 0;
  top: -34rem;
  top: -42%;
  z-index: -1;
}

@media screen and (max-width: 767px) {
  .top_lead:before {
    top: -21rem;
    width: 100%;
    background-position: left top;
  }
}

@media screen and (min-width: 768px) and (max-width: 1720px) {
  .top_lead:before {
    width: 39%;
  }
}

@media screen and (min-width: 768px) and (max-width: 1650px) {
  .top_lead:before {
    width: 42%;
  }
}

.top_lead:after {
  content: '';
  position: absolute;
  background: url(../img/top_bg02.jpg) no-repeat left top/100%;
  height: 100%;
  width: 23rem;
  right: 0;
  top: 19rem;
}

@media screen and (max-width: 767px) {
  .top_lead:after {
    top: 60rem;
    width: 30%;
  }
}

@media screen and (min-width: 768px) {
  .top_lead .u_inner {
    width: 154rem;
  }
}

.top_output {
  margin-bottom: 22rem;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .top_output .desc {
    margin-top: 16rem;
  }
}

@media screen and (min-width: 768px) {
  .top_output {
    display: flex;
  }
  .top_output .txt {
    width: calc(50% + 8rem);
  }
  .top_output .desc {
    margin-top: 5rem;
  }
}

@media screen and (min-width: 768px) and (max-width: 1700px) {
  .top_output dl {
    width: 48%;
  }
}

.top_output .txt img {
  width: 42.4rem;
}

@media screen and (max-width: 767px) {
  .top_output .txt img {
    width: 85%;
  }
}

.top_output .desc p {
  font-size: 1.6rem;
  line-height: 2.1875;
  margin-bottom: 5rem;
}

@media screen and (min-width: 768px) {
  .top_service ul {
    display: -webkit-box;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .top_service ul > * {
    margin-left: 3%;
    width: 22.75%;
  }
  .top_service ul > *:nth-child(4n + 1) {
    margin-left: 0;
  }
  .top_service .c_btn2 {
    position: absolute;
  }
  .top_service li a {
    padding-bottom: 6.7rem;
  }
}

.top_service li {
  margin-bottom: 6rem;
}

.top_service li a {
  border-top: solid .5px #000;
  display: block;
  padding-top: 2.5rem;
}

.top_service dt {
  font-size: 2.6rem;
  letter-spacing: .05em;
  margin-bottom: .6em;
}

.top_service dt i {
  display: block;
  font-size: 1.4rem;
  margin-bottom: .7em;
}

.top_service dt small {
  font-size: 1.4rem;
  vertical-align: .3em;
  display: inline-block;
  margin-left: .7em;
}

.top_service dd {
  font-size: 1.3rem;
  line-height: 1.92;
}

@media screen and (max-width: 767px) {
  .top_service dd {
    font-size: 1.45rem;
  }
}

.top_service .c_btn2 {
  margin-top: 4rem;
}

@media screen and (min-width: 768px) {
  .top_brand .img_wrap {
    width: 50%;
  }
  .top_brand .img_wrap.b {
    right: 0;
    left: auto;
  }
  .top_brand .box {
    width: 50%;
  }
  .top_brand .box.a {
    margin-left: auto;
  }
  .top_brand .box.a dl {
    margin-left: 15%;
  }
  .top_brand .box.b dl {
    margin-left: auto;
    margin-right: 20%;
    width: 40rem;
  }
  .top_brand dl.a {
    margin-left: 15rem;
  }
}

.top_brand dt {
  font-weight: 500;
  margin-bottom: .8em;
}

.top_brand dt img {
  display: block;
  margin-bottom: 3em;
}

.top_brand dt img.a {
  height: 2.5em;
}

.top_brand dt img.b {
  height: 2.35em;
}

.top_brand dd {
  font-size: 1.6rem;
  line-height: 2.1875;
}

.top_brand .bg {
  background: #000000;
  color: #fff;
}

.top_brand .c_btn {
  margin-top: 3.5rem;
}

@media screen and (max-width: 767px) {
  .top_brand .box {
    padding: 8rem 3.5rem 10rem;
  }
  .top_brand .box.b {
    background: #333333;
    color: #fff;
    padding-top: 10rem;
  }
  .top_brand .box dd br {
    display: none;
  }
  .top_brand .scroll_fixed .box {
    display: none;
  }
}

.top_works {
  margin: 18rem 0 12.5rem;
}

.top_works .inner {
  position: relative;
  height: 100vh;
}

.top_works dl {
  position: absolute;
  bottom: 1.5rem;
  left: 2rem;
}

.top_works dt {
  color: #fff;
}

.top_works dd i {
  display: inline-block;
  background: #fff;
  font-size: 1.3rem;
  margin-right: .4em;
  width: 5em;
  text-align: center;
}

.top_center .lead {
  font-size: 1.6rem;
  line-height: 2.1875;
  margin-bottom: 10rem;
}

.top_center .c_ttl {
  margin-bottom: 4rem;
}

@media screen and (min-width: 768px) {
  .top_center .u_inner {
    width: 75.5rem;
  }
}

.top_flow {
  margin-bottom: 15rem;
}

.top_flow ul {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  position: relative;
}

.top_flow ul > * {
  width: 15rem;
}

.top_flow ul:before {
  content: '';
  position: absolute;
  width: 100%;
  border-bottom: solid 1px #000;
  top: 50%;
  z-index: -1;
}

.top_flow li {
  border: solid 1px #000;
  border-radius: 50%;
  text-align: center;
  font-size: 1.6rem;
  line-height: 15rem;
  background: #fff;
}

@media screen and (max-width: 767px) {
  .top_flow li {
    width: 9rem;
    line-height: 9rem;
  }
}

.top_flow p {
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.7;
  margin-top: 2.5rem;
}

.top_num {
  margin-bottom: 22rem;
}

@media screen and (max-width: 767px) {
  .top_num {
    margin-bottom: 12rem;
  }
}

.top_num .list {
  text-align: center;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .top_num .list {
    flex-wrap: wrap;
  }
  .top_num .list dl {
    width: 50%;
    margin-bottom: 2rem;
  }
}

.top_num dt {
  font-size: 1.4rem;
  margin-bottom: .4em;
}

.top_num dd {
  font-size: 10rem;
  line-height: 1;
  letter-spacing: .05em;
  font-weight: 300;
}

.top_num dd * {
  line-height: inherit;
}

.top_fashion {
  margin-bottom: 22rem;
}

@media screen and (min-width: 768px) {
  .top_fashion .u_inner {
    width: 138rem;
  }
  .top_fashion dl {
    width: 51rem;
    left: calc(50% - 68rem);
  }
}

@media screen and (max-width: 767px) {
  .top_fashion dl {
    margin: 0 3.5rem;
  }
}

.top_fashion dl {
  position: relative;
  z-index: 2;
  color: #fff;
}

@media screen and (min-width: 768px) {
  .top_fashion dl {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
}

@media screen and (max-width: 767px) {
  .top_fashion dl {
    top: 11rem;
  }
}

.top_fashion dt {
  font-size: 4.2rem;
  font-weight: 100;
  margin-bottom: .8em;
  line-height: 1.35;
}

@media screen and (max-width: 767px) {
  .top_fashion dt {
    font-size: 3.3rem;
  }
}

.top_fashion dd {
  font-size: 1.6rem;
  line-height: 2.1875;
}

.top_school {
  margin-bottom: 22rem;
}

.top_school .img {
  margin: 10rem 0 22rem;
  position: relative;
  z-index: -1;
}

.top_school .img img {
  width: 100%;
}

.top_school dt {
  font-size: 2.2rem;
  font-weight: 500;
  margin-bottom: 1em;
}

.top_school dd {
  font-size: 1.6rem;
  line-height: 2.1875;
}

@media screen and (max-width: 767px) {
  .top_school dl {
    margin-bottom: 6rem;
  }
}

@media screen and (min-width: 768px) {
  .top_school .u_inner {
    width: 107rem;
  }
  .top_school .row {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
  }
  .top_school .row > * {
    width: 46%;
  }
}

.top_about {
  margin-bottom: 22rem;
}

.top_about li img {
  width: 100%;
}

.top_about dl {
  background: #fff;
  margin-top: -8.5rem;
  position: relative;
  margin-left: 20%;
  padding: 3rem 4rem;
  z-index: 3;
}

.top_about dt {
  font-size: 2.2rem;
  font-weight: 500;
  margin-bottom: .8em;
}

.top_about dd {
  font-size: 1.6rem;
  line-height: 1.6;
}

@media screen and (min-width: 768px) {
  .top_about ul {
    display: flex;
  }
  .top_about li {
    width: 33.33%;
  }
}

.top_news {
  margin-bottom: 22rem;
}

.top_news .img {
  position: relative;
  margin-bottom: 2.5rem;
}

.top_news .img img {
  width: 100%;
}

.top_news .img i {
  position: absolute;
  background: #000000;
  font-size: 1.4rem;
  color: #fff;
  width: 9em;
  padding: .3em 1em;
  bottom: -.5em;
  right: -.7em;
}

.top_news li p {
  font-size: 1.3rem;
  line-height: 1.92;
}

.top_news li p small {
  display: block;
  font-size: 1.4rem;
  margin-bottom: .8em;
}

@media screen and (max-width: 767px) {
  .top_news li {
    margin-bottom: 4rem;
  }
}

.top_news .c_btn2 {
  margin-top: 3rem;
}

@media screen and (min-width: 768px) {
  .top_news .u_inner {
    width: 157rem;
  }
  .top_news ul {
    display: -webkit-box;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 3rem 2.4%;
  }
  .top_news ul > * {
    width: 23.2%;
  }
}

.top_recruit {
  position: relative;
}

@media screen and (max-width: 767px) {
  .top_recruit .img {
    background: none !important;
  }
  .top_recruit .img img {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .top_recruit .img {
    height: 79.6rem;
    background: no-repeat 50% / cover;
    width: calc(50% + 30.6rem);
  }
  .top_recruit .img img {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .top_recruit .box {
    margin: 5rem 3.5rem 10rem;
  }
}

@media screen and (min-width: 768px) {
  .top_recruit .box {
    padding: 8rem 11rem;
    position: absolute;
    z-index: 3;
    background: #fff;
    top: 7rem;
    left: calc(50% - 10rem);
  }
}

.top_recruit .ttl {
  font-size: 5rem;
  line-height: 1;
  margin-bottom: 3rem;
}

.top_recruit .ttl small {
  display: block;
  font-size: 1.8rem;
  margin-bottom: 2em;
}

.top_recruit p {
  font-size: 1.6rem;
  line-height: 2.1875;
  margin-bottom: 4rem;
}

.top_menu {
  position: relative;
  font-size: 1rem;
  margin-top: 15rem;
  margin-left: 21.4em;
  width: 134.1em;
  height: 182em;
  margin-bottom: 18%;
  font-size: calc(100vw * 10 / 1920);
}

@media screen and (min-width: 768px) and (max-width: 1920px) {
  .top_menu {
    font-size: calc(100vw * 10 / 1700);
  }
}

@media screen and (max-width: 767px) {
  .top_menu {
    font-size: calc(100vw * 10 / 675);
    margin-left: 0;
    margin-top: 22.5rem;
    margin-bottom: 25rem;
    height: 359.5em;
    width: auto;
  }
}

.top_menu a {
  display: block;
  position: absolute;
  right: 0;
}

.top_menu a[href="#"] {
  pointer-events: none;
}

.top_menu a:hover {
  opacity: 1;
  transform: scale(1.05);
}

.top_menu a img {
  width: 100%;
}

.top_menu .movie {
  position: relative;
  height: 0;
  padding-top: 123.8%;
  overflow: hidden;
}

.top_menu .movie video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.top_menu .menu01 {
  width: 21em;
  left: 0;
}

.top_menu .menu02 {
  width: 28.5em;
  left: 32.7em;
  top: 7.6em;
}

@media screen and (max-width: 767px) {
  .top_menu .menu02 {
    left: 36.1em;
    top: 7.7em;
  }
}

.top_menu .menu03 {
  width: 14em;
  left: 72.6em;
  top: 6.3em;
}

@media screen and (max-width: 767px) {
  .top_menu .menu03 {
    left: 7.2em;
    top: 90.6em;
  }
}

.top_menu .menu04 {
  width: 30.9em;
  right: 0;
  top: 0;
}

@media screen and (max-width: 767px) {
  .top_menu .menu04 {
    top: 84.2em;
  }
}

.top_menu .menu05 {
  width: 30.8em;
  left: 70.2em;
  top: 31.4em;
}

@media screen and (max-width: 767px) {
  .top_menu .menu05 {
    left: 4.8em;
    top: 115.8em;
  }
}

.top_menu .menu06 {
  width: 18.6em;
  left: 9.4em;
  top: 36.2em;
}

@media screen and (max-width: 767px) {
  .top_menu .menu06 {
    left: 12.8em;
    top: 36.3em;
  }
}

.top_menu .menu07 {
  width: 30.3em;
  left: 5.6em;
  top: 60.9em;
}

@media screen and (max-width: 767px) {
  .top_menu .menu07 {
    left: 6em;
    top: 64.1em;
  }
}

.top_menu .menu08 {
  width: 14.6em;
  left: 50.9em;
  top: 55.8em;
}

@media screen and (max-width: 767px) {
  .top_menu .menu08 {
    left: 42.9em;
    top: 59em;
  }
}

.top_menu .menu09 {
  width: 47.1em;
  left: 80.7em;
  top: 45.9em;
}

.top_menu .menu09 .movie {
  padding-top: 56.8%;
}

@media screen and (max-width: 767px) {
  .top_menu .menu09 {
    left: 11.5em;
    top: 130.10em;
  }
}

.top_menu .menu10 {
  width: 33.6em;
  left: 0;
  top: 80.6em;
}

.top_menu .menu10 .movie {
  padding-top: 138%;
}

@media screen and (max-width: 767px) {
  .top_menu .menu10 {
    left: 0;
    top: 168.4em;
  }
}

.top_menu .menu11 {
  width: 37.3em;
  left: 39.5em;
  top: 80.6em;
}

@media screen and (max-width: 767px) {
  .top_menu .menu11 {
    left: 36.7em;
    top: 168.4em;
    width: 28.1em;
  }
}

.top_menu .menu12 {
  width: 11.7em;
  left: 51.7em;
  top: 92.3em;
}

@media screen and (max-width: 767px) {
  .top_menu .menu12 {
    left: 48.3em;
    top: 181.3em;
  }
}

.top_menu .menu13 {
  width: 11.7em;
  left: 65.1em;
  top: 92.3em;
}

@media screen and (max-width: 767px) {
  .top_menu .menu13 {
    left: 48em;
    top: 199.4em;
  }
}

.top_menu .menu14 {
  width: 46.6em;
  right: 0;
  top: 80.6em;
}

@media screen and (max-width: 767px) {
  .top_menu .menu14 {
    left: 0;
    top: 218.5em;
  }
}

.top_menu .menu15 {
  width: 30.1em;
  left: 5.3em;
  top: 140.9em;
}

@media screen and (max-width: 767px) {
  .top_menu .menu15 {
    left: 0;
    top: 304.5em;
  }
}

.top_menu .menu16 {
  width: 19.6em;
  left: 50em;
  top: 127em;
}

@media screen and (max-width: 767px) {
  .top_menu .menu16 {
    left: 41.8em;
    top: 304.50em;
  }
}

.top_menu .menu17 {
  width: 51.7em;
  left: 76.7em;
  top: 123.2em;
}

@media screen and (max-width: 767px) {
  .top_menu .menu17 {
    left: 3.9em;
    top: 269.8em;
  }
}

.top_menu .menu18 {
  width: 17.7em;
  left: 81.3em;
  top: 159em;
}

@media screen and (max-width: 767px) {
  .top_menu .menu18 {
    left: 48.3em;
    top: 244.4em;
  }
}

.top_menu .menu20 {
  width: 20em;
  left: 105em;
  top: 159em;
}

@media screen and (max-width: 767px) {
  .top_menu .menu20 {
    left: 10em;
    top: 338em;
  }
}

.menu_modal {
  color: #fff;
}

.menu_modal dt {
  font-family: 'Oswald', sans-serif;
    letter-spacing: .1em;
font-weight: 100;
  font-size: 2.8rem;
  margin-bottom: 1.4em;
}

@media screen and (min-width: 768px) {
  .menu_modal dt {
    font-size: 3.2rem;
    margin-bottom: .5em;
  }
}

.menu_modal dd {
  font-size: 1.6rem;
  line-height: 2.0;
}

.popup-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 9999;
  background: rgba(26, 26, 26, 0.9);
  display: none;
}

.popup-modal .close {
  position: absolute;
  top: 4.5rem;
  width: 5.7rem;
  right: 4.5rem;
  cursor: pointer;
  z-index: 1;
}

.popup-modal .wrap {
  position: relative;
  height: 100%;
  overflow-y: auto;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.popup-modal .box {
  width: 50rem;
  max-width: calc(100% - 4rem);
  margin: auto;
  padding: 2rem 0;
}

body.show-modal {
  overflow-y: hidden;
}

.top_works .slider {
  height: 100%;
  background: #fff;
}

.top_works .slider li {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  overflow: hidden;
}

.top_works .slider li .wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.top_works .slider li .img {
  background: #fff no-repeat center center;
  background-size: cover;
  height: 100%;
  overflow: hidden;
  transform: translateX(20%);
  position: relative;
}

.top_works .slider li dl {
  opacity: 0;
}

.top_works .slider li.active .img {
  transition: transform 0.8s cubic-bezier(0.39, 0.575, 0.565, 1);
  -webkit-transition: transform 0.8s cubic-bezier(0.39, 0.575, 0.565, 1);
  transform: translateX(0);
}

.top_works .slider li.active dl {
  opacity: 1;
  transition: opacity 1s ease-in;
  transition-delay: 1s;
}

.top_works .slider li.hide .wrap {
  width: 0;
  transition: width 1s ease-in-out;
  -webkit-transition: width 1s ease-in-out;
}

.top_works .slider li.hide .img {
  transition: transform 1.5s ease-in-out;
  -webkit-transition: transform 1.5s ease-in-out;
  transform: translateX(-50%);
}

.top_works .slider ul {
  float: left;
  height: 50%;
  width: 25.58%;
  position: relative;
}

.top_works .slider ul:nth-child(3) {
  float: right;
  height: 100%;
}

.top_works .slider ul:nth-child(3) li {
  padding-left: 2px;
}

@media screen and (min-width: 768px) {
  .top_works .slider ul:nth-child(2), .top_works .slider ul:nth-child(4) {
    width: 48.84%;
  }
  .top_works .slider ul:nth-child(n + 4) li {
    padding-top: 1px;
  }
  .top_works .slider ul:nth-child(1) li {
    padding-right: 2px;
    padding-bottom: 1px;
  }
  .top_works .slider ul:nth-child(2) li {
    padding-bottom: 1px;
  }
  .top_works .slider ul:nth-child(4) li {
    padding-right: 2px;
  }
}

@media screen and (max-width: 767px) {
  .top_works .slider ul {
    position: absolute;
    width: 100%;
    height: 33.33%;
    position: absolute;
  }
  .top_works .slider ul:nth-child(3) {
    display: none;
  }
  .top_works .slider ul:nth-child(2) li {
    padding-bottom: 1px;
  }
  .top_works .slider ul:nth-child(1), .top_works .slider ul:nth-child(5) {
    width: 50%;
    bottom: 33.33%;
  }
  .top_works .slider ul:nth-child(1) li, .top_works .slider ul:nth-child(5) li {
    padding-top: 1px;
    padding-bottom: 1px;
  }
  .top_works .slider ul:nth-child(5) {
    right: 0;
  }
  .top_works .slider ul:nth-child(4) {
    bottom: 0;
  }
  .top_works .slider ul:nth-child(4) li {
    padding-top: 1px;
  }
}

@media screen and (max-width: 767px) {
  .low {
    margin-top: 6rem;
  }
}

.low_header {
  background: url(../img/about_mv.jpg) no-repeat 50%/cover;
  height: 30rem;
}

.low_header .ttl {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/*# sourceMappingURL=style.css.map */