@charset "UTF-8";
/**
* Foundation
* ========================== */
/*
---------------------------------------
reset
---------------------------------------
*/
* {
  word-break: normal !important;
  word-wrap: break-word;
}

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,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
button {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  font-size: 100%;
  font-style: normal;
  font-weight: normal;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
  margin: 0;
  padding: 0;
}

html {
  min-height: 100%;
  width: 100%;
  font-size: 62.5%;
}

html,
body {
  position: relative;
}

body {
  width: 100%;
  margin: 0;
  padding: 0;
}

input,
textarea {
  margin: 0;
  padding: 0;
}

input:focus,
textarea:focus,
button:focus {
  outline: 0;
}

button,
input[type="button"],
input[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  box-shadow: none;
  background: none;
  font-family: inherit;
}

button {
  background: none;
  line-height: 2;
  cursor: pointer;
}

img {
  border: none;
}

ol,
ul {
  list-style: none;
}

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

table th {
  font-weight: normal;
}

caption,
th {
  text-align: left;
}

p,
dd,
li,
address {
  font-style: normal;
}

body small {
  font-size: 1.2rem;
}

figure {
  line-height: 0;
}

em {
  font-weight: inherit;
}

picture {
  display: block;
}

@font-face {
  font-family: "Young";
  src: url("../fonts/Young.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/Young.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Young.woff") format("woff"),
    url("../fonts/Young.ttf") format("truetype"),
    url("../fonts/Young.svg") format("svg");
}

body {
  font-family: "游ゴシック", "游ゴシック Medium", "Yu Gothic Medium",
    "游ゴシック体", YuGothic, "Helvetica Neue", Arial,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 400;
  word-wrap: break-word;
  color: #000;
  min-width: 375px;
  line-break: normal;
}

@media screen and (max-width: 1020px) {
  body {
    width: 1020px;
  }
}

@media (max-width: 768px) {
  body {
    width: 100%;
  }
}

/* IE */
@media all and (-ms-high-contrast: none) {
  body {
    font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo,
      "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック",
      "MS PGothic", sans-serif;
  }
}

.wrapper {
  position: relative;
  overflow: hidden;
  min-width: 1020px;
}

@media (max-width: 768px) {
  .wrapper {
    min-width: 0;
    margin-top: 0;
  }
}

.l-contents {
  position: relative;
}

p {
  text-align: justify;
  overflow-wrap: break-word;
}

p,
dt,
dd,
li {
  font-size: 1.6rem;
  line-height: 2;
}

@media (max-width: 768px) {
  p,
  dt,
  dd,
  li {
    font-size: 3.2vw;
  }
}

/*
----------------------------------------
flex
----------------------------------------
*/
.flex {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  -js-display: flex;
}

.flex.nowrap {
  flex-wrap: nowrap;
}

.flex.reverse {
  flex-direction: row-reverse;
}

.flex.item-center {
  align-items: center;
}

.flex-column {
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/*
---------------------------------------
link
---------------------------------------
*/
a {
  font-size: inherit;
  font-weight: inherit;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
}

a:hover {
  text-decoration: none;
  opacity: 0.8;
}

/*
---------------------------------------
clear
---------------------------------------
*/
.clearfix:after {
  font-size: 0;
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: ".";
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*/
  /*/
    height: auto;
    overflow: hidden;
    /**/
}

*:first-child + html .clearfix {
  zoom: 1;
}

/* IE7 */
/*
---------------------------------------
common
---------------------------------------
*/
.pc {
  display: block !important;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .pc {
    display: none !important;
  }
}

.sp {
  display: none !important;
}

@media (max-width: 768px) {
  .sp {
    display: block !important;
  }
}

.inline-pc {
  display: inline-block !important;
}

@media (max-width: 768px) {
  .inline-pc {
    display: none !important;
  }
}

.inline-sp {
  display: none !important;
}

@media (max-width: 768px) {
  .inline-sp {
    display: inline-block !important;
  }
}

.inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  word-wrap: break-word;
  word-break: break-all;
}

@media (max-width: 768px) {
  .inner {
    padding: 0 7%;
  }
}

span {
  font-size: inherit;
  font-weight: inherit;
}

.img {
  line-height: 0;
}

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

.en {
  font-family: "Young", sans-serif;
  letter-spacing: 0.03em;
}

.center {
  text-align: center;
}

.bold {
  font-weight: 600;
}

.ofi {
  object-fit: cover;
  font-family: "object-fit: cover;";
}

.ofi-contain {
  object-fit: contain;
  font-family: "object-fit: contain;";
}

input[type="text"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea,
select {
  font-size: 16px;
  border: 1px solid #b5b5b5;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  font-family: inherit;
  background: #fff;
  padding: 16px 15px;
  width: 100%;
}

@media (max-width: 768px) {
  input[type="text"],
  input[type="search"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  textarea,
  select {
    padding: 0.6rem;
  }
}

textarea {
  width: 100%;
  height: 500px;
  resize: vertical;
  box-shadow: none;
}

@media (max-width: 768px) {
  textarea {
    height: 325px;
  }
}

input::-webkit-input-placeholder {
  color: #aaa;
}

input:-moz-placeholder {
  color: #aaa;
}

textarea::-webkit-input-placeholder {
  color: #aaa;
}

textarea:-moz-placeholder {
  color: #aaa;
}
/*
---------------------------------------
pager
---------------------------------------
*/
.wrapper .pagination {
  text-align: center;
  margin: 20px 0 90px;
}

.wrapper .pagination li {
  display: inline-block;
  margin: 0 10px;
  list-style: none;
}
.wrapper .pagination li span {
  display: inline-block;
  width: 35px;
  height: 35px;
  font-family: omnes-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 18px;
  text-align: center;
  border: 1px solid #000;
  color: #000;
  background: #fff;
}
.wrapper .pagination li a img {
  width: 52px;
  margin: -15px 10px;
}

/*
---------------------------------------
animation
---------------------------------------
*/
@keyframes lineMove {
  0% {
    bottom: 100%;
    height: 0;
  }
  20% {
    bottom: 0;
    height: 100%;
  }
  40% {
    bottom: 0;
    height: 0;
  }
  100% {
    bottom: 0;
    height: 0;
  }
}

/* Object
* ========================== */
/* Component ------------ */
.c-copyright {
  text-align: center;
  font-size: 1.4rem;
}

@media (max-width: 768px) {
  .c-copyright {
    font-size: 1rem;
  }
}

.c-links {
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  padding-bottom: 2.3rem;
}

@media (max-width: 768px) {
  .c-links {
    padding-bottom: 0;
  }
}

.c-links__item {
  font-size: 1.4rem;
  padding: 0 1.75rem;
}

@media (max-width: 768px) {
  .c-links__item {
    font-size: 1rem;
    padding: 0 1rem;
  }
}

/* Structure ------------ */
/*
---------------------------------------
footer
--------------------------------------
*/
.st-footer {
  padding: 3.2rem 0;
}

@media (max-width: 768px) {
  .st-footer {
    padding: 1.5rem 0;
  }
}

/*
---------------------------------------
header
---------------------------------------
*/
.st-header {
  width: 100%;
}

.st-header__content {
  padding: 5.5rem 0;
}

@media (max-width: 768px) {
  .st-header__content {
    padding: 1.5rem 0;
  }
}

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

@media (max-width: 768px) {
  .st-header__logo img {
    width: 30vw;
    max-width: 135px;
  }
}

.st-header__nav {
  padding: 26vh 0 0 19vh;
}

@media (min-height: 1320px) {
  .st-header__nav {
    padding: 33.4rem 0 0 25rem;
  }
}

@media (max-width: 768px) {
  .st-header__nav {
    padding: 36.5vw 7% 0;
  }
}

@media (max-width: 768px) {
  .st-header__globalNav {
    margin-bottom: 50vw;
  }
}

.st-header__globalNav li {
  opacity: 0;
  transition: opacity 0.2s linear 0.2s;
}

.st-header__globalNav li:not(:last-child) {
  margin-bottom: 3.1rem;
}

@media (max-width: 768px) {
  .st-header__globalNav li:not(:last-child) {
    margin-bottom: 5vw;
  }
}

.st-header__globalNav__link {
  width: 180px;
  background: rgba(255, 255, 255, 0.8);
  padding: 0.5rem 0 0 1.8rem;
  line-height: 1.3;
  display: block;
  position: relative;
  transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
  opacity: 1;
}

@media (max-width: 768px) {
  .st-header__globalNav__link {
    width: 100%;
    padding: 1.2rem 1rem 0.9rem;
    background: rgba(255, 255, 255, 0.9);
  }
}

.st-header__globalNav__link .st-header__globalNav__txt {
  font-size: 2.4rem;
  transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}

@media (max-width: 768px) {
  .st-header__globalNav__link .st-header__globalNav__txt {
    font-size: 1.7rem;
  }
}

.st-header__globalNav__link:hover {
  background: rgba(0, 0, 0, 0.8);
}

.st-header__globalNav__link:hover .st-header__globalNav__txt {
  color: #fff;
}

@keyframes fadeInMenu {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  80% {
    opacity: 0.75;
  }
  90% {
    transform: translateX(0%);
    opacity: 0.9;
  }
  100% {
    opacity: 1;
  }
}
.st-header__globalNav li {
  display: none;
}
.st-header__nav[aria-hidden="false"] .st-header__globalNav li {
  opacity: 1;
  transition: opacity 0.25s linear 0.2s;
  display: block;
}

.st-header__nav[aria-hidden="false"]
  .st-header__globalNav
  li
  .st-header__globalNav__link {
  animation: fadeInMenu 0.4625s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
  opacity: 0;
}

.st-header__nav[aria-hidden="false"]
  .st-header__globalNav
  li:nth-of-type(1)
  .st-header__globalNav__link {
  animation-delay: 0.4s;
}

.st-header__nav[aria-hidden="false"]
  .st-header__globalNav
  li:nth-of-type(2)
  .st-header__globalNav__link {
  animation-delay: 0.4625s;
}

.st-header__nav[aria-hidden="false"]
  .st-header__globalNav
  li:nth-of-type(3)
  .st-header__globalNav__link {
  animation-delay: 0.525s;
}

.st-header__nav[aria-hidden="false"]
  .st-header__globalNav
  li:nth-of-type(4)
  .st-header__globalNav__link {
  animation-delay: 0.5875s;
}

.st-header__nav[aria-hidden="false"]
  .st-header__globalNav
  li:nth-of-type(5)
  .st-header__globalNav__link {
  animation-delay: 0.65s;
}

#sp-btn {
  position: fixed;
  z-index: 99999999999;
  top: 23px;
  left: 30px;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  transition: 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

#sp-btn:after {
  content: "CLOSE";
  font-family: "Young", sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -3rem;
  padding-left: 0.06em;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s cubic-bezier(0.7, 0, 0.3, 1);
  text-align: center;
}

@media (max-width: 768px) {
  #sp-btn:after {
    bottom: -0.2rem;
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  #sp-btn {
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
  }
}

#sp-btn span {
  width: 50px;
  height: 5px;
  transition: 0.4s cubic-bezier(0.7, 0, 0.3, 1);
  background: #000000;
}

@media (max-width: 768px) {
  #sp-btn span {
    width: 30px;
    height: 2px;
  }
}

#sp-btn span:not(:last-child) {
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  #sp-btn span:not(:last-child) {
    margin-bottom: 5px;
  }
}

#sp-btn.active:after {
  opacity: 1;
  visibility: visible;
}

#sp-btn #sp-btn-a,
#sp-btn #sp-btn-a span {
  display: inline-block;
  box-sizing: border-box;
  transition: 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

#sp-btn #sp-btn-a {
  display: block;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background: none;
}

@media (max-width: 768px) {
  #sp-btn #sp-btn-a {
    width: 60px;
    height: 60px;
  }
}

#sp-btn #sp-btn-a:hover {
  opacity: 1;
}

#sp-btn.active span:nth-of-type(1) {
  -webkit-transform: translateY(15px) rotate(-45deg);
  transform: translateY(15px) rotate(-45deg);
}

@media (max-width: 768px) {
  #sp-btn.active span:nth-of-type(1) {
    -webkit-transform: translateY(7px) rotate(-45deg);
    transform: translateY(7px) rotate(-45deg);
  }
}

#sp-btn.active span:nth-of-type(2) {
  opacity: 0;
}

#sp-btn.active span:nth-of-type(3) {
  -webkit-transform: translateY(-15px) rotate(45deg);
  transform: translateY(-15px) rotate(45deg);
}

@media (max-width: 768px) {
  #sp-btn.active span:nth-of-type(3) {
    -webkit-transform: translateY(-7px) rotate(45deg);
    transform: translateY(-7px) rotate(45deg);
  }
}

/* g-anv */
#g-nav {
  position: fixed;
  z-index: 9999999;
  top: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 46vh;
  max-width: 608px;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

@media (max-width: 768px) {
  #g-nav {
    width: 100%;
    max-width: 100%;
  }
}

#g-nav[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
  transition: all 0.01s linear;
}

@media (max-width: 768px) {
  #g-nav[aria-hidden="false"] {
    transition: all 0.01s linear, background 0.4s linear 0.6s;
    background: #fff;
  }
}

#g-nav[aria-hidden="true"] {
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s linear 0.2s;
}

@media (max-width: 768px) {
  #g-nav[aria-hidden="true"] {
    background: none;
  }
}

#g-nav::-webkit-scrollbar {
  display: none;
}

@media (max-width: 768px) {
  /* sp-btn */
  .scroll-prevent {
    position: fixed;
    width: 100%;
    height: 100%;
  }
  .st-header__nav__logo {
    text-align: center;
    padding-bottom: 1.4rem;
  }
  .st-header__nav__logo img {
    width: 30vw;
    max-width: 135px;
  }
}

.st-header__background {
  display: flex;
  width: 100%;
  height: calc(100% + 100px);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.st-header__column {
  width: calc(100% / 4);
  flex-shrink: 0;
  transform: translate3d(0, -100%, 0);
  transition: transform 0.6875s cubic-bezier(0.473, 0.427, 0, 0.993);
}

.st-header__column:nth-child(1) {
  background: url(../images/common/build@2x_01.png) no-repeat top 15px left/100%;
  transition-delay: 0.45s;
}

@media (max-width: 768px) {
  .st-header__column:nth-child(1) {
    background: #fff url(../images/common/build_sp_01.jpg) no-repeat top
      left/100%;
  }
}

.st-header__column:nth-child(2) {
  background: url(../images/common/build@2x_02.png) no-repeat top 15px left/100%;
  transition-delay: 0.3875s;
}

@media (max-width: 768px) {
  .st-header__column:nth-child(2) {
    background: #fff url(../images/common/build_sp_02.jpg) no-repeat top
      left/100%;
  }
}

.st-header__column:nth-child(3) {
  background: url(../images/common/build@2x_03.png) no-repeat top 15px left/100%;
  transition-delay: 0.2625s;
}

@media (max-width: 768px) {
  .st-header__column:nth-child(3) {
    background: #fff url(../images/common/build_sp_03.jpg) no-repeat top
      left/100%;
  }
}

.st-header__column:nth-child(4) {
  background: url(../images/common/build@2x_04.png) no-repeat top 15px left/100%;
  transition-delay: 0.2s;
}

@media (max-width: 768px) {
  .st-header__column:nth-child(4) {
    background: #fff url(../images/common/build_sp_04.jpg) no-repeat top
      left/100%;
  }
}

.st-header__nav[aria-hidden="false"] .st-header__column {
  transform: translate3d(0, 0, 0);
}

.st-header__nav[aria-hidden="false"] .st-header__column:nth-child(1) {
  transition-delay: 0.1875s;
}

.st-header__nav[aria-hidden="false"] .st-header__column:nth-child(2) {
  transition-delay: 0.125s;
}

.st-header__nav[aria-hidden="false"] .st-header__column:nth-child(3) {
  transition-delay: 0.0625s;
}

.st-header__nav[aria-hidden="false"] .st-header__column:nth-child(4) {
  transition-delay: 0s;
}

@media (max-width: 768px) {
  .st-header__bottom {
    padding-top: 3vw;
    position: relative;
    z-index: 2;
  }
}

/* Project ------------ */
/*
---------------------------------------
contact
---------------------------------------
*/
#contact .secContact {
  padding: 4.2rem 0 7.5rem;
}

@media (max-width: 768px) {
  #contact .secContact {
    padding: 3.3rem 0 3.5rem;
  }
}

#contact .secContact .inner {
  max-width: 790px;
}

#contact .secContact__heading {
  padding-bottom: 5.8rem;
}

@media (max-width: 768px) {
  #contact .secContact__heading {
    padding-bottom: 4rem;
  }
}

#contact .secContact__heading__en {
  font-size: 5rem;
  line-height: 1;
  padding-bottom: 0.6rem;
}

@media (max-width: 768px) {
  #contact .secContact__heading__en {
    font-size: 3.5rem;
  }
}

#contact .secContact__heading__ja {
  font-size: 1.4rem;
  color: #7d7d7d;
  font-weight: bold;
  letter-spacing: 0.06em;
}

@media (max-width: 768px) {
  #contact .secContact__heading__ja {
    font-size: 1.2rem;
  }
}

#contact .secContact__dl {
  padding-bottom: 4rem;
}

@media (max-width: 768px) {
  #contact .secContact__dl {
    padding-bottom: 1rem;
  }
}

#contact .secContact__dl .row {
  padding-bottom: 2.1rem;
}

#contact .secContact__dl dt {
  color: #7d7d7d;
  font-weight: bold;
  letter-spacing: 0.06em;
}

@media (max-width: 768px) {
  #contact .secContact__dl dt {
    font-size: 1.2rem;
  }
}

#contact .btn-submit {
  width: 350px;
  font-size: 1.6rem;
  color: #fff;
  background: #231815;
  font-weight: bold;
  letter-spacing: 0.06em;
  margin: 0 auto;
  display: block;
  padding: 1.9rem 0;
}

@media (max-width: 768px) {
  #contact .btn-submit {
    width: 100%;
    font-size: 1.2rem;
  }
}

/*
---------------------------------------
look
---------------------------------------
*/
#look {
  /**************************\
  Basic Modal Styles
\**************************/
  /**************************\
    nimation Style
  \**************************/
}

#look .collection__list {
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  padding-top: 1.5rem;
}

@media (max-width: 768px) {
  #look .collection__list {
    padding-top: 0.7rem;
  }
}

#look .collection__item {
  width: calc(25% - 0.975rem);
  margin-bottom: 13px;
}

@media (max-width: 768px) {
  #look .collection__item {
    width: calc(33.3333% - 0.8rem);
    margin-bottom: 0.8rem;
  }
}

#look .collection__item:not(:nth-of-type(4n)) {
  margin-right: 13px;
}

@media (max-width: 768px) {
  #look .collection__item:not(:nth-of-type(4n)) {
    margin-right: 0;
  }
}

@media (max-width: 768px) {
  #look .collection__item:not(:nth-of-type(3n)) {
    margin-right: 1.2rem;
  }
}

#look .modal {
  display: none;
}

#look .modal.is-open {
  display: block;
}

#look .modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.9);
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#look .modal__container {
  max-width: 514px;
  height: 100vh;
  width: 100%;
  text-align: center;
  padding-top: 5rem;
}

@media (max-width: 768px) {
  #look .modal__container {
    max-width: 100%;
    height: auto;
    margin-top: 30px;
  }
}

#look .modal__header {
  position: relative;
}

@media (max-width: 768px) {
  #look .modal__header {
    width: 80%;
    margin: 0 auto;
  }
}

#look .modal__title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 2rem;
  color: #fff;
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 768px) {
  #look .modal__title {
    font-size: 1.2rem;
  }
}

#look .modal__count {
  font-size: 2rem;
  color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  #look .modal__count {
    font-size: 1.2rem;
  }
}

#look .modal__close {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  border: 0;
  width: 30px;
  height: 30px;
}

@media (max-width: 768px) {
  #look .modal__close {
    width: 15px;
    height: 15px;
  }
}

#look .modal__close:before {
  content: "";
  background: #fff;
  width: 3px;
  height: 41px;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(-44deg);
  transform-origin: left top;
}

@media (max-width: 768px) {
  #look .modal__close:before {
    width: 2px;
    height: 20px;
    top: 2px;
  }
}

#look .modal__close:after {
  content: "";
  background: #fff;
  width: 3px;
  height: 41px;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  transform: rotate(44deg);
  transform-origin: right top;
}

@media (max-width: 768px) {
  #look .modal__close:after {
    width: 2px;
    height: 20px;
    top: 2px;
  }
}

#look .modal__content {
  margin-top: 1.5rem;
  height: calc(100% - 70px);
}

@media (max-width: 768px) {
  #look .modal__content {
    padding: 0 10%;
    height: auto;
  }
}

#look .modal__content img {
  width: auto;
  max-width: 514px;
  max-height: 100%;
  margin: 0 auto;
}

@media (max-width: 768px) {
  #look .modal__content img {
    width: 100%;
    max-width: 100%;
  }
}

#look .modal__btn {
  cursor: pointer;
}

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

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

#look .micromodal-slide {
  display: none;
}

#look .micromodal-slide.is-open {
  display: block;
}

#look .micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

#look .micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

#look .micromodal-slide .modal__overlay {
  will-change: transform;
}

/*
---------------------------------------
top
---------------------------------------
*/
.page-top .st-header__logo {
  display: none;
}

#top .mainView {
  width: 100%;
  max-height: calc(100vh - 130px);
  padding: 0 50px;
  position: relative;
  text-align: center;
}

@media (max-width: 768px) {
  #top .mainView {
    padding: 31px 0 0;
    max-height: 100%;
  }
}

#top .mainView__cont {
  max-height: calc(100vh - 130px);
  width: 80%;
  margin: 0 auto;
}

@media (max-width: 768px) {
  #top .mainView__cont {
    max-height: 100%;
    width: 100%;
  }
}

#top .mainView__img {
  max-height: calc(100vh - 130px);
}

@media (max-width: 768px) {
  #top .mainView__img {
    max-height: 100%;
  }
}

#top .mainView__img .img {
  max-height: calc(100vh - 130px);
}

@media (max-width: 768px) {
  #top .mainView__img .img {
    max-height: 100%;
  }
}

#top .mainView__img .mainView__pic {
  width: 100%;
  max-height: calc(100vh - 130px);
  object-fit: cover;
}

@media (max-width: 768px) {
  #top .mainView__img .mainView__pic {
    max-height: 100%;
  }
}

#top .mainView__coming {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 39.5%;
  text-align: center;
  width: 29.5%;
}

@media (max-width: 768px) {
  #top .mainView__coming {
    top: 45.8%;
    width: 61.5%;
  }
}