/**************
reset.css start
**************/

/* http://meyerweb.com/eric/tools/css/reset/ */

/* v1.0 | 20080212 */

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,
font,
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 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

/* remember to define focus styles! */

:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */

ins {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */

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

/**************
reset.css end
**************/

/*
  z-index
    #loading 2000
    #transition 1999
    header 1000
*/

.mt1 {
  margin-top: 1px;
}

.mt2 {
  margin-top: 2px;
}

.mt3 {
  margin-top: 3px;
}

.mt4 {
  margin-top: 4px;
}

.mt5 {
  margin-top: 5px;
}

.mt6 {
  margin-top: 6px;
}

.mt7 {
  margin-top: 7px;
}

.mt8 {
  margin-top: 8px;
}

.mt9 {
  margin-top: 9px;
}

.mt10 {
  margin-top: 10px;
}

.mt11 {
  margin-top: 11px;
}

.mt12 {
  margin-top: 12px;
}

.mt13 {
  margin-top: 13px;
}

.mt14 {
  margin-top: 14px;
}

.mt15 {
  margin-top: 15px;
}

.mt16 {
  margin-top: 16px;
}

.mt17 {
  margin-top: 17px;
}

.mt18 {
  margin-top: 18px;
}

.mt19 {
  margin-top: 19px;
}

.mt20 {
  margin-top: 20px;
}

.mt21 {
  margin-top: 21px;
}

.mt22 {
  margin-top: 22px;
}

.mt23 {
  margin-top: 23px;
}

.mt24 {
  margin-top: 24px;
}

.mt25 {
  margin-top: 25px;
}

.mt26 {
  margin-top: 26px;
}

.mt27 {
  margin-top: 27px;
}

.mt28 {
  margin-top: 28px;
}

.mt29 {
  margin-top: 29px;
}

.mt30 {
  margin-top: 30px;
}

.mt31 {
  margin-top: 31px;
}

.mt32 {
  margin-top: 32px;
}

.mt33 {
  margin-top: 33px;
}

.mt34 {
  margin-top: 34px;
}

.mt35 {
  margin-top: 35px;
}

.mt36 {
  margin-top: 36px;
}

.mt37 {
  margin-top: 37px;
}

.mt38 {
  margin-top: 38px;
}

.mt39 {
  margin-top: 39px;
}

.mt40 {
  margin-top: 40px;
}

.mt41 {
  margin-top: 41px;
}

.mt42 {
  margin-top: 42px;
}

.mt43 {
  margin-top: 43px;
}

.mt44 {
  margin-top: 44px;
}

.mt45 {
  margin-top: 45px;
}

.mt46 {
  margin-top: 46px;
}

.mt47 {
  margin-top: 47px;
}

.mt48 {
  margin-top: 48px;
}

.mt49 {
  margin-top: 49px;
}

.mt50 {
  margin-top: 50px;
}

.mt51 {
  margin-top: 51px;
}

.mt52 {
  margin-top: 52px;
}

.mt53 {
  margin-top: 53px;
}

.mt54 {
  margin-top: 54px;
}

.mt55 {
  margin-top: 55px;
}

.mt56 {
  margin-top: 56px;
}

.mt57 {
  margin-top: 57px;
}

.mt58 {
  margin-top: 58px;
}

.mt59 {
  margin-top: 59px;
}

.mt60 {
  margin-top: 60px;
}

.mt61 {
  margin-top: 61px;
}

.mt62 {
  margin-top: 62px;
}

.mt63 {
  margin-top: 63px;
}

.mt64 {
  margin-top: 64px;
}

.mt65 {
  margin-top: 65px;
}

.mt66 {
  margin-top: 66px;
}

.mt67 {
  margin-top: 67px;
}

.mt68 {
  margin-top: 68px;
}

.mt69 {
  margin-top: 69px;
}

.mt70 {
  margin-top: 70px;
}

.mt71 {
  margin-top: 71px;
}

.mt72 {
  margin-top: 72px;
}

.mt73 {
  margin-top: 73px;
}

.mt74 {
  margin-top: 74px;
}

.mt75 {
  margin-top: 75px;
}

.mt76 {
  margin-top: 76px;
}

.mt77 {
  margin-top: 77px;
}

.mt78 {
  margin-top: 78px;
}

.mt79 {
  margin-top: 79px;
}

.mt80 {
  margin-top: 80px;
}

.mt81 {
  margin-top: 81px;
}

.mt82 {
  margin-top: 82px;
}

.mt83 {
  margin-top: 83px;
}

.mt84 {
  margin-top: 84px;
}

.mt85 {
  margin-top: 85px;
}

.mt86 {
  margin-top: 86px;
}

.mt87 {
  margin-top: 87px;
}

.mt88 {
  margin-top: 88px;
}

.mt89 {
  margin-top: 89px;
}

.mt90 {
  margin-top: 90px;
}

.mt91 {
  margin-top: 91px;
}

.mt92 {
  margin-top: 92px;
}

.mt93 {
  margin-top: 93px;
}

.mt94 {
  margin-top: 94px;
}

.mt95 {
  margin-top: 95px;
}

.mt96 {
  margin-top: 96px;
}

.mt97 {
  margin-top: 97px;
}

.mt98 {
  margin-top: 98px;
}

.mt99 {
  margin-top: 99px;
}

.mt100 {
  margin-top: 100px;
}

.font1 {
  font-family: eb-garamond, serif;
}

.font2 {
  font-family: century-gothic, sans-serif;
}

.font3 {
  font-family: yu-gothic-pr6n, sans-serif;
}

.font4 {
  font-family: a-otf-ryumin-pr6n, serif;
}

img,
video {
  vertical-align: bottom;
}

a,
a:visited {
  text-decoration: none;
  color: #1d1d1d;
}

.shadow {
  box-shadow: 0px 0px 56px 10px rgba(0, 0, 0, 0.1);
}

.gray {
  color: #AAAAAA;
}

#loading {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  z-index: 2000;
}

#loading .background_night {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-image: url(/assets/img/common/bg_patern_night.png);
  background-repeat: repeat;
}

#loading .background {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-image: url(/assets/img/common/bg_patern_day.png);
  background-repeat: repeat;
}

@keyframes loop_blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: .6;
  }

  100% {
    opacity: 1;
  }
}

#loading .spoon {
  position: fixed;
  -webkit-mask: url(/assets/img/common/loading_spoon.svg) 50% 50%/contain no-repeat;
  mask: url(/assets/img/common/loading_spoon.svg) 50% 50%/contain no-repeat;
  width: 51px;
  height: 88px;
  display: block;
  background-color: #1d1d1d;
  top: 50vh;
  left: 50vw;
  margin-left: -25px;
  margin-top: -56px;
  animation: loop_blink .4s infinite;
}

#loading .text {
  position: fixed;
  font-size: 12px;
  top: 50vh;
  left: 50vw;
  margin-left: -38px;
  margin-top: 36px;
  letter-spacing: .06em;
  font-weight: 600;
  animation: loop_blink .4s infinite;
}

#transition {
  position: fixed;
  z-index: 1999;
  display: none;
}

#transition.visible {
  display: block;
}

#transition .svg_container {
  position: absolute;
  z-index: -1;
  width: 100vw;
  height: 100vh;
}

#transition .svg_container .svg-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: .6;
}

#transition .svg_container .svg-bg path {
  fill: #808080;
}

#transition .svg_container .svg-bg-no-transparent {
  opacity: 1;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
}

html.lock {
  overflow: hidden;
}

body {
  display: block;
  width: 100%;
  color: #1d1d1d;
  font-family: a-otf-ryumin-pr6n, serif;
  font-weight: 400;
  overflow: hidden;
  line-height: 2;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0;
  font-feature-settings: "palt";
}

body.happy_hour .gray {
  color: #808080 !important;
}

body.night {
  color: #fff;
}

body.night #loading .spoon {
  background-color: #fff;
}

body.night #loading .text {
  color: #fff;
}

body.night #transition .svg_container .svg-bg path {
  fill: #ffffff;
}

body.night header .menu a {
  color: #fff;
}

body.night header .menu .menuSub ul li a.external:after {
  background-color: #fff;
}

body.night header .menu .social_media li a {
  border: 1px solid #fff;
}

body.night header .menu .social_media li a:before {
  background-color: #fff;
}

#background_night {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-image: url(/assets/img/common/bg_patern_night.png);
  background-repeat: repeat;
  z-index: -2;
}

#background {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-image: url(/assets/img/common/bg_patern_day.png);
  background-repeat: repeat;
  z-index: -1;
}

header {
  z-index: 1000;
  position: fixed;
  width: 100%;
  top: 0;
}

header.show_menu .menu {
  display: block;
}

header.fade_in_menu .menu .background_container {
  opacity: 1;
}

header.fade_in_menu .menu .menuMain ul li:nth-of-type(1) {
  transition-delay: 0.07s;
  opacity: 1;
}

header.fade_in_menu .menu .menuMain ul li:nth-of-type(2) {
  transition-delay: 0.14s;
  opacity: 1;
}

header.fade_in_menu .menu .menuMain ul li:nth-of-type(3) {
  transition-delay: 0.21s;
  opacity: 1;
}

header.fade_in_menu .menu .menuMain ul li:nth-of-type(4) {
  transition-delay: 0.28s;
  opacity: 1;
}

header.fade_in_menu .menu .menuMain ul li:nth-of-type(5) {
  transition-delay: 0.35s;
  opacity: 1;
}

header.fade_in_menu .menu .menuSub ul li:nth-of-type(1) {
  transition-delay: 0.27s;
  opacity: 1;
}

header.fade_in_menu .menu .menuSub ul li:nth-of-type(2) {
  transition-delay: 0.34s;
  opacity: 1;
}

header.fade_in_menu .menu .menuSub ul li:nth-of-type(3) {
  transition-delay: 0.41s;
  opacity: 1;
}

header.fade_in_menu .menu .menuSub ul li:nth-of-type(4) {
  transition-delay: 0.48s;
  opacity: 1;
}

header.fade_in_menu .menu .menuSub ul li:nth-of-type(5) {
  transition-delay: 0.55s;
  opacity: 1;
}

header.fade_in_menu .menu .social_media ul li:nth-of-type(1) {
  transition-delay: 0.47s;
  opacity: 1;
}

header.fade_in_menu .menu .social_media ul li:nth-of-type(2) {
  transition-delay: 0.54s;
  opacity: 1;
}

header.fade_in_menu .menu .social_media ul li:nth-of-type(3) {
  transition-delay: 0.61s;
  opacity: 1;
}

header.fade_in_menu .menu .social_media ul li:nth-of-type(4) {
  transition-delay: 0.68s;
  opacity: 1;
}

header.fade_in_menu .menu .social_media ul li:nth-of-type(5) {
  transition-delay: 0.75s;
  opacity: 1;
}

header .moon {
  position: fixed;
  cursor: pointer;
  z-index: 2;
  transition: opacity 400ms;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  /*    img{
      filter: drop-shadow(0px 0px 36px #fff);
    }*/
}

header .moon.hide {
  opacity: 0;
  pointer-events: none;
}

header .menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  display: none;
  transition: opacity 500ms;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

header .menu .background_container {
  opacity: 0;
  transition: opacity 700ms;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

header .menu .background_night {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-image: url(/assets/img/common/bg_patern_night.png);
  background-repeat: repeat;
}

header .menu .background {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-image: url(/assets/img/common/bg_patern_day.png);
  background-repeat: repeat;
}

header .menu h2 {
  position: absolute;
}

header .menu .menuMain {
  position: relative;
}

header .menu .menuMain ul li {
  opacity: 0;
  transition: opacity 500ms;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

header .menu .menuMain ul li a {
  display: inline-block;
}

header .menu .menuMain ul li.current a:after {
  content: '';
  width: 100%;
  height: 1px;
  background-color: #c7b9a5;
  display: block;
  position: relative;
  margin-top: -4px;
}

header .menu .menuSub {
  position: relative;
}

header .menu .menuSub ul li {
  opacity: 0;
  transition: opacity 500ms;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

header .menu .menuSub ul li a.external:after {
  content: '';
  -webkit-mask: url(/assets/img/common/external.svg) 50% 50%/contain no-repeat;
  mask: url(/assets/img/common/external.svg) 50% 50%/contain no-repeat;
  width: 10px;
  height: 10px;
  margin-left: 10px;
  display: inline-block;
  background-color: #1d1d1d;
}

header .menu .social_media ul li {
  opacity: 0;
  transition: opacity 500ms;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

header .menu .social_media ul li a:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  display: block;
  background-color: #1d1d1d;
}

header .menu .social_media ul li.social_i a:before {
  -webkit-mask: url(/assets/img/common/icon-instagram.svg) 50% 50%/contain no-repeat;
  mask: url(/assets/img/common/icon-instagram.svg) 50% 50%/contain no-repeat;
}

footer {
  color: #fff;
  overflow: hidden;
  position: relative;
}

footer a,
footer a:visited {
  color: #fff;
}

footer .bg {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(/assets/img/common/bg_patern_footer.png);
  z-index: -1;
}

footer .child .social_media ul li a:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  display: block;
  background-color: #fff;
}

footer .child .social_media ul li.social_i a:before {
  -webkit-mask: url(/assets/img/common/icon-instagram.svg) 50% 50%/contain no-repeat;
  mask: url(/assets/img/common/icon-instagram.svg) 50% 50%/contain no-repeat;
}

@media screen and (min-width: 1024px) {
  .pc {
    display: block;
  }

  .sp {
    display: none;
  }

  .night .btn {
    background-color: #fff;
  }

  .btn {
    position: relative;
    border-radius: 30px;
    background-color: #c7b9a5;
    font-family: century-gothic, sans-serif;
    display: inline-block;
    width: 200px;
    text-align: center;
    font-size: 1.4rem;
  }

  .btn a {
    display: block;
    padding: 15px 0;
  }

  .btn a:after {
    content: "";
    background-image: url(/assets/img/common/arrow1.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 8px;
    height: 14px;
    display: inline-block;
    position: absolute;
    right: 22px;
    top: 22px;
  }

  .prev {
    background: url("/assets/img/common/prev.svg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 81px;
    height: 81px;
    cursor: pointer;
    transition: transform 500ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .prev:hover {
    transform: scale(0.95);
  }

  .next {
    background: url("/assets/img/common/next.svg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 81px;
    height: 81px;
    cursor: pointer;
    transition: transform 500ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .next:hover {
    transform: scale(0.95);
  }

  .shadow {
    transition: box-shadow 500ms, transform 500ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .shadow .img {
    transition: filter 750ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .shadow:hover {
    box-shadow: 0px 0px 22px 10px rgba(0, 0, 0, 0.15);
    transform: scale(0.975);
  }

  .shadow:hover .img {
    filter: brightness(1.4);
  }

  header .moon:hover img {
    transform: scale(0.95);
    filter: drop-shadow(0px 0px 16px #fff);
  }

  header .moon img {
    width: 9.7rem;
    margin-left: -4.85rem;
    margin-top: -4.71759rem;
    transition: filter 400ms, transform 400ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  header .menu .menuMain {
    position: absolute;
    left: 32.6vw;
    top: 50vh;
    transform: translate3d(0, -15.5rem, 0);
  }

  header .menu .menuMain ul {
    font-size: 2.2rem;
  }

  header .menu .menuMain ul li {
    margin-bottom: 2.2rem;
    letter-spacing: .04em;
    white-space: nowrap;
  }

  header .menu .menuMain ul li a {
    transition: opaciy 400ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  header .menu .menuMain ul li a:hover {
    opacity: .6;
  }

  header .menu .menuSub {
    position: relative;
    left: 54.6vw;
    top: 50vh;
    transform: translate3d(0, -14.8rem, 0);
  }

  header .menu .menuSub ul {
    font-size: 1.4rem;
  }

  header .menu .menuSub ul li {
    letter-spacing: .04em;
    margin-bottom: 17px;
  }

  header .menu .menuSub ul li a {
    transition: opaciy 400ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  header .menu .menuSub ul li a:hover {
    opacity: .6;
  }

  header .menu .social_media {
    position: absolute;
    left: 54.4vw;
    top: 50vh;
    transform: translate3d(0, 5.8rem, 0);
  }

  header .menu .social_media ul {
    display: flex;
    justify-content: center;
  }

  header .menu .social_media ul li {
    width: 48px;
    height: 48px;
    margin-right: 20px;
  }

  header .menu .social_media ul li a {
    display: block;
    position: relative;
    width: 47px;
    height: 47px;
    border: 1px solid #1d1d1d;
    border-radius: 50%;
    transition: opaciy 400ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  header .menu .social_media ul li a:hover {
    opacity: .6;
  }

  header .menu .social_media ul li.social_i a:before {
    width: 17px;
    height: 17px;
  }

  header .menu .social_media ul li.social_y a:before {
    width: 22px;
    height: 16px;
  }

  header .menu .social_media ul li.social_t a:before {
    width: 22px;
    height: 18px;
  }

  header .menu .social_media ul li.social_f a:before {
    width: 9px;
    height: 20px;
  }

  header .menu .social_media ul li:last-of-type {
    margin-right: 0;
  }

  footer {
    height: calc(1100px - 314px);
    padding-top: 314px;
  }

  footer .child {
    margin: 0 auto;
    width: 89vw;
  }

  footer .child:before {
    content: "";
    position: absolute;
    background-image: url(/assets/img/common/footer_logo_mark.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 664px;
    height: 1158px;
    display: block;
    left: 46.9vw;
    top: -23.4vw;
  }

  footer .child:after {
    content: "";
    position: absolute;
    background-image: url(/assets/img/common/footer_logo_type.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 1035px;
    height: 413px;
    display: block;
    margin-top: 40px;
  }

  footer .child h2 {
    font-size: 2.2rem;
    letter-spacing: .07em;
  }

  footer .child h2 a,
  footer .child h2 a:visited {
    color: #fff;
  }

  footer .child .address {
    font-size: 1.2rem;
    margin-top: 26px;
    line-height: 1.7;
    letter-spacing: 0.06em;
  }

  footer .child .email {
    font-size: 1.2rem;
    margin-top: 8px;
    letter-spacing: .04em;
  }

  footer .child .email a,
  footer .child .email a:visited {
    color: #fff;
  }

  footer .child .social_media {
    margin-top: 59px;
  }

  footer .child .social_media ul {
    display: flex;
  }

  footer .child .social_media ul li {
    width: 55px;
    height: 55px;
    border: 1px solid #fff;
    border-radius: 50%;
    margin-right: 19px;
    transition: opaciy 400ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  footer .child .social_media ul li:hover {
    opacity: .6;
  }

  footer .child .social_media ul li a {
    display: block;
    position: relative;
    width: 55px;
    height: 55px;
  }

  footer .child .social_media ul li.social_i a:before {
    width: 20px;
    height: 20px;
  }

  footer .child .social_media ul li.social_y a:before {
    width: 22px;
    height: 16px;
  }

  footer .child .social_media ul li.social_t a:before {
    width: 22px;
    height: 18px;
  }

  footer .child .social_media ul li.social_f a:before {
    width: 9px;
    height: 20px;
  }

  footer .child .cp {
    font-size: 1.2rem;
    margin-top: 48px;
    letter-spacing: .03em;
  }
}

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

  .sp {
    display: block;
  }

  .night .btn {
    background-color: #fff;
  }

  .btn {
    position: relative;
    border-radius: 30px;
    background-color: #c7b9a5;
    font-family: century-gothic, sans-serif;
    font-weight: 600;
    width: 200px;
    text-align: center;
    font-size: 1.4rem;
  }

  .btn a {
    display: block;
    padding: 15px 0;
  }

  .btn a:after {
    content: "";
    background-image: url(/assets/img/common/arrow1.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 8px;
    height: 14px;
    display: inline-block;
    position: absolute;
    right: 22px;
    top: 22px;
  }

  .prev {
    background: url("/assets/img/common/prev.svg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 75px;
    height: 75px;
    cursor: pointer;
  }

  .next {
    background: url("/assets/img/common/next.svg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 75px;
    height: 75px;
    cursor: pointer;
  }

  header .moon img {
    width: 8.15rem;
    margin-left: -4.075rem;
    margin-top: -3.96375rem;
  }

  header .menu {
    height: 100vh;
    overflow: auto;
  }

  header .menu .menuMain {
    position: relative;
    left: 50vw;
    padding-top: 15rem;
    transform: translate3d(-50%, 0, 0);
  }

  header .menu .menuMain ul {
    font-size: 2rem;
    text-align: center;
  }

  header .menu .menuMain ul li {
    margin-bottom: 1.8rem;
    letter-spacing: .04em;
  }

  header .menu .menuSub {
    position: relative;
    left: 50vw;
    transform: translate3d(-50%, 0, 0);
    margin-top: 4.3rem;
  }

  header .menu .menuSub ul {
    font-size: 1.4rem;
    text-align: center;
  }

  header .menu .menuSub ul li {
    margin-bottom: 1.7rem;
  }

  header .menu .social_media {
    width: 100vw;
    margin-top: 3.7rem;
    margin-bottom: 22.9rem;
  }

  header .menu .social_media ul {
    display: flex;
    justify-content: center;
  }

  header .menu .social_media ul li {
    width: 45px;
    height: 45px;
    margin-right: 20px;
  }

  header .menu .social_media ul li a {
    display: block;
    position: relative;
    width: 44px;
    height: 44px;
    border: 1px solid #1d1d1d;
    border-radius: 50%;
  }

  header .menu .social_media ul li.social_i a:before {
    width: 17px;
    height: 17px;
  }

  header .menu .social_media ul li.social_y a:before {
    width: 22px;
    height: 16px;
  }

  header .menu .social_media ul li.social_t a:before {
    width: 22px;
    height: 18px;
  }

  header .menu .social_media ul li.social_f a:before {
    width: 9px;
    height: 20px;
  }

  header .menu .social_media ul li:last-of-type {
    margin-right: 0;
  }

  footer {
    height: calc(1005px - 585px);
    padding-top: 585px;
  }

  footer .child {
    margin: 0 auto;
    width: 89vw;
  }

  footer .child:before {
    content: "";
    position: absolute;
    background-image: url(/assets/img/common/footer_logo_mark.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 664px;
    height: 1158px;
    display: block;
    left: -5.1vw;
    top: -149px;
    pointer-events: none;
  }

  footer .child:after {
    content: "";
    position: absolute;
    background-image: url(/assets/img/common/footer_logo_type.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 327px;
    height: 131px;
    display: block;
    top: 60px;
    pointer-events: none;
  }

  footer .child h2 {
    font-size: 2.5rem;
    letter-spacing: .03em;
  }

  footer .child h2 a,
  footer .child h2 a:visited {
    color: #fff;
  }

  footer .child .address {
    font-size: 1.4rem;
    margin-top: 26px;
    margin-left: -3px;
    line-height: 1.6;
    letter-spacing: 0.04em;
  }

  footer .child .email {
    font-size: 1.4rem;
    margin-top: 8px;
    letter-spacing: .02em;
    margin-left: -3px;
  }

  footer .child .email a,
  footer .child .email a:visited {
    color: #fff;
  }

  footer .child .social_media {
    margin-top: 63px;
  }

  footer .child .social_media ul {
    display: flex;
    justify-content: center;
  }

  footer .child .social_media ul li {
    width: 55px;
    height: 55px;
    border: 1px solid #fff;
    border-radius: 50%;
    margin-right: 25px;
  }

  footer .child .social_media ul li a {
    display: block;
    position: relative;
    width: 55px;
    height: 55px;
  }

  footer .child .social_media ul li.social_i a:before {
    width: 20px;
    height: 20px;
  }

  footer .child .social_media ul li.social_y a:before {
    width: 22px;
    height: 16px;
  }

  footer .child .social_media ul li.social_t a:before {
    width: 22px;
    height: 18px;
  }

  footer .child .social_media ul li.social_f a:before {
    width: 9px;
    height: 20px;
  }

  footer .child .social_media ul li:last-of-type {
    margin-right: 0;
  }

  footer .child .cp {
    font-size: 1.2rem;
    margin-top: 86px;
    letter-spacing: .03em;
    text-align: center;
    white-space: nowrap;
  }
}
/*
z-index

*/

.night main.top .section2 .section_child .bigger > .ui ul li:after {
  background-color: rgba(255, 255, 255, 0.15);
}

.night main.top .section2 .section_child .bigger > .ui .bar .base {
  background-color: rgba(255, 255, 255, 0.15);
}

.night main.top .section3 .section_child .list li .tit {
  color: #fff;
}

.night main.top .section4 .section_child .bigger > .ui ul li:after {
  background-color: rgba(255, 255, 255, 0.15);
}

.night main.top .section4 .section_child .bigger > .ui .bar .base {
  background-color: rgba(255, 255, 255, 0.15);
}

.night main.top .section4 .section_child .bigger .tit,
.night main.top .section4 .section_child .bigger .txt {
  color: #fff;
}

main.top .hero h1.show_day img:nth-of-type(1) {
  opacity: 1;
}

main.top .hero h1.show_night img:nth-of-type(2) {
  opacity: 1;
}

main.top .hero .moon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
}

main.top .hero .moon img {
  transition: filter 500ms;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

main.top .copy {
  color: #1d1d1d;
  position: relative;
  margin-top: 170px;
}

main.top .copy .svg_container {
  position: absolute;
  z-index: -1;
  width: 100vw;
  height: 600px;
  top: -600px;
}

main.top .copy .svg_container .svg-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: .6;
}

main.top .copy .svg_container .svg-bg-no-transparent {
  opacity: 1;
}

main.top .section1 .section_child h2 {
  color: #1d1d1d;
}

main.top .section2 {
  position: relative;
}

main.top .section2 .section_child .bigger .img img:first-of-type {
  transition: margin-left 1200ms;
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}

main.top .section2 .svg_container {
  position: absolute;
  z-index: -1;
  width: 100vw;
  height: 600px;
  top: -400px;
}

main.top .section2 .svg_container .svg-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: .6;
}

main.top .section2 .svg_container .svg-bg-no-transparent {
  opacity: 1;
}

main.top .section4 .section_child .bigger .img img:first-of-type {
  transition: margin-left 1200ms;
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}

@media screen and (min-width: 1024px) {
  main.top .hero {
    width: 100vw;
    height: 100vh;
  }

  main.top .hero h1 {
    position: absolute;
    left: 13.7vw;
    top: 46.7vh;
    transform: translate3d(0, -50%, 0);
  }

  main.top .hero h1 img {
    width: 40px;
    height: 535px;
    opacity: 0;
  }

  main.top .hero h1 img:nth-of-type(2) {
    position: absolute;
    left: 0;
  }

  main.top .hero .moon img {
    width: 220px;
  }

  main.top .copy {
    font-style: italic;
    font-weight: 500;
    font-size: 2.0rem;
    text-align: center;
    padding-top: 122px;
    line-height: 1.8;
    background: #fff;
  }

  main.top > section .section_child {
    position: relative;
  }

  main.top > section .section_child h2 {
    font-size: 5.6rem;
    font-family: eb-garamond, serif;
    font-weight: 100;
    letter-spacing: .04em;
  }

  main.top .section1 {
    padding-top: 187px;
    padding-bottom: 280px;
    background: #fff;
  }

  main.top .section1 .section_child {
    margin: 0 auto;
    width: 88.9vw;
  }

  main.top .section1 .section_child .ui {
    display: flex;
    position: absolute;
    right: -1px;
    top: 5px;
  }

  main.top .section1 .section_child .ui .next {
    margin-left: 10px;
  }

  main.top .section1 .section_child .list {
    margin-top: 5px;
    white-space: nowrap;
    display: flex;
  }

  main.top .section1 .section_child .list li {
    display: inline-block;
    width: 336px;
    height: 461px;
    margin-right: 37px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    /*&:before{
                            content: "";
                            //background: #ff0000;
                            background-image: url(/assets/img/common/bg_patern.png);
                            background-repeat: round;
                            display: block;
                            position: absolute;
                            width: 100%;
                            height: 136px;
                            transform-origin: right top;
                            transform: skew(-43deg, 0deg);
                            top: 0px;
                            left: 0px;
                            z-index: -1;
                            border-radius: 10px;
                        }

                        &:after{
                            content: "";
                            //background: #ff0000;
                            background-image: url(/assets/img/common/bg_patern.png);
                            background-repeat: round;
                            display: block;
                            position: relative;
                            width: 100%;
                            height: 136px;
                            transform-origin: right top;
                            transform: skew(-43deg, 0deg);
                            top: 5px;
                            left: 0px;
                            z-index: -1;
                            border-radius: 10px;
                        }*/
  }

  main.top .section1 .section_child .list li a {
    width: 336px;
    height: 461px;
    display: block;
  }

  main.top .section1 .section_child .list li .img {
    width: 336px;
    height: 219px;
    overflow: hidden;
  }

  main.top .section1 .section_child .list li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  main.top .section1 .section_child .list li .under_img {
    background: #fff;
    padding-top: 30px;
    height: 100%;
  }

  main.top .section1 .section_child .list li .date {
    color: #c7b9a5;
    font-size: 1.2rem;
    margin-left: 30px;
  }

  main.top .section1 .section_child .list li .tit {
    font-size: 1.8rem;
    font-weight: 600;
    margin-top: 12px;
    margin-left: 30px;
  }

  main.top .section1 .section_child .list li .cate {
    font-size: 1.2rem;
    margin-left: 30px;
    margin-top: 74px;
    margin-bottom: 30px;
    display: inline-block;
  }

  main.top .section1 .section_child .list li .cate:after {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    background: #c7b9a5;
  }

  main.top .section2 .section_child {
    padding: 212px 0 126px;
    margin: 0 auto;
    width: 89vw;
    position: relative;
  }

  main.top .section2 .section_child h2:after {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    background: rgba(208, 221, 237, 0.2);
    margin-top: 4px;
  }

  main.top .section2 .section_child .bigger > .ui {
    height: 50px;
    position: absolute;
    display: flex;
    top: 427px;
    left: -3px;
  }

  main.top .section2 .section_child .bigger > .ui ul {
    display: flex;
  }

  main.top .section2 .section_child .bigger > .ui ul li {
    position: relative;
    width: 18px;
    height: 18px;
    margin-right: 14px;
    cursor: pointer;
  }

  main.top .section2 .section_child .bigger > .ui ul li:before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #b69237;
    display: block;
    opacity: 0;
    transition: opacity 400ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  main.top .section2 .section_child .bigger > .ui ul li:after {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.15);
    display: block;
    position: relative;
    left: 5px;
    top: 5px;
  }

  main.top .section2 .section_child .bigger > .ui ul li.current:after,
  main.top .section2 .section_child .bigger > .ui ul li:hover:after {
    background-color: #b69237;
  }

  main.top .section2 .section_child .bigger > .ui ul li.current:before,
  main.top .section2 .section_child .bigger > .ui ul li:hover:before {
    opacity: 1;
  }

  main.top .section2 .section_child .bigger > .ui .bar {
    position: relative;
    top: 9px;
    margin-left: 11px;
    width: 110px;
  }

  main.top .section2 .section_child .bigger > .ui .bar .base {
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.15);
  }

  main.top .section2 .section_child .bigger > .ui .bar .progress {
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #b69237;
    transform-origin: left;
    transform: scaleX(0);
  }

  main.top .section2 .section_child .bigger .date {
    font-size: 2.6rem;
    position: absolute;
    right: 0;
    top: 410px;
    letter-spacing: .01em;
  }

  main.top .section2 .section_child .bigger .img_link:hover .img {
    filter: brightness(1.4);
  }

  main.top .section2 .section_child .bigger .img {
    margin: 149px auto 0;
    width: 79.4vw;
    height: 40.3vw;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    transition: filter 750ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  main.top .section2 .section_child .bigger .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
  }

  main.top .section2 .section_child .bigger .tit {
    font-size: 3.8rem;
    margin-top: 33px;
    letter-spacing: .03em;
  }

  main.top .section2 .section_child .bigger .cast {
    font-size: 1.6rem;
    color: #AAAAAA;
    line-height: 1.6;
    letter-spacing: .01em;
  }

  main.top .section2 .section_child .bigger .cast:before {
    content: "";
    width: 37px;
    height: 1px;
    position: relative;
    top: -3px;
    background-color: #808080;
    display: inline-block;
    margin-right: 18px;
  }

  main.top .section2 .section_child .bigger .txt {
    font-size: 1.6rem;
    color: #AAAAAA;
    line-height: 1.6;
    margin-top: 19px;
    width: 60%;
    letter-spacing: .08em;
  }

  main.top .section2 .section_child .bigger .btn {
    position: absolute;
    right: 0px;
    margin-top: -63px;
    width: 236px;
  }

  main.top .section2 .section_child .bigger .btn:hover {
    transform: scale(0.95);
  }

  main.top .section2 .section_child .list {
    margin-top: 190px;
    white-space: nowrap;
    display: flex;
  }

  main.top .section2 .section_child .list li {
    display: inline-block;
    width: 336px;
    margin-right: 37px;
  }

  main.top .section2 .section_child .list li .date {
    color: #aaaaaa;
    font-size: 1.6rem;
    letter-spacing: .02em;
  }

  main.top .section2 .section_child .list li .chunk {
    height: 441px;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
    position: relative;
  }

  main.top .section2 .section_child .list li .chunk .img {
    width: 336px;
    height: 219px;
    overflow: hidden;
  }

  main.top .section2 .section_child .list li .chunk .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  main.top .section2 .section_child .list li .chunk .under_img {
    background: #fff;
    padding-top: 30px;
    height: 100%;
  }

  main.top .section2 .section_child .list li .chunk .tit {
    font-size: 1.8rem;
    font-weight: 600;
    margin-left: 30px;
    width: 276px;
    white-space: initial;
    line-height: 1.7;
  }

  main.top .section2 .section_child .list li .chunk .cast {
    font-size: 1.2rem;
    margin-left: 30px;
    margin-top: 15px;
  }

  main.top .section2 .section_child .list li .chunk .place {
    position: absolute;
    font-size: 1.2rem;
    margin-left: 30px;
    margin-top: 37px;
    bottom: 30px;
  }

  main.top .section2 .section_child .list li .chunk .place:after {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    background: #c7b9a5;
  }

  main.top .section2 .section_child > .ui {
    position: absolute;
    display: flex;
    right: 0px;
    margin-top: 23px;
  }

  main.top .section2 .section_child > .ui .next {
    margin-left: 10px;
  }

  main.top .section2 .section_child > .btn {
    margin-top: 264px;
    position: relative;
    left: 50vw;
    background: #fff;
    width: 365px;
    transform: translate3d(-262px, 0px, 0px);
  }

  main.top .section2 .section_child > .btn:hover {
    transform: translate3d(-262px, 0px, 0px) scale(0.95);
  }

  main.top .section3:after {
    content: "";
    display: block;
    background: #e6e6e6;
    height: 1px;
    margin: 126px auto 0;
    width: 89vw;
  }

  main.top .section3 .section_child .head {
    color: #fff;
    background-image: url(/assets/img/top/section3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: -5vw;
    width: 100vw;
    height: 55.5vw;
    position: relative;
  }

  main.top .section3 .section_child .head h2 {
    position: absolute;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    left: 80px;
    letter-spacing: .03em;
  }

  main.top .section3 .section_child .head h2:after {
    content: "";
    width: 35px;
    height: 1px;
    background: #fff;
    display: inline-block;
    left: 29px;
    top: -7px;
    position: relative;
  }

  main.top .section3 .section_child .list {
    display: flex;
    flex-wrap: wrap;
    margin: 118px auto 0;
    width: 89vw;
  }

  main.top .section3 .section_child .list li {
    width: 43vw;
    display: inline-block;
    margin-bottom: 93px;
  }

  main.top .section3 .section_child .list li:hover .img {
    filter: brightness(1.4);
  }

  main.top .section3 .section_child .list li:hover .img img {
    transform: scale(1.05);
  }

  main.top .section3 .section_child .list li:nth-child(odd) {
    margin-right: 3vw;
  }

  main.top .section3 .section_child .list li .img {
    overflow: hidden;
    transition: filter 750ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  main.top .section3 .section_child .list li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  main.top .section3 .section_child .list li .tit {
    font-size: 2.0rem;
    margin-top: 15px;
    letter-spacing: .02em;
  }

  main.top .section3 .section_child .list li .sub_tit {
    font-size: 1.4rem;
    margin-top: -4px;
    letter-spacing: .04em;
    color: #AAAAAA;
  }

  main.top .section3 .section_child .list li:after {
    content: "";
    background: url(/assets/img/common/arrow2.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    width: 44px;
    height: 8px;
    position: absolute;
    margin-top: 7px;
  }

  main.top .section3 .section_child > .btn {
    margin-top: 77px;
    position: relative;
    left: 50vw;
    transform: translate3d(-50%, 0, 0);
    background: #fff;
    width: 365px;
  }

  main.top .section3 .section_child > .btn:hover {
    transform: translate3d(-50%, 0, 0) scale(0.95);
  }

  main.top .section4 {
    padding-top: 87px;
    padding-bottom: 100px;
  }

  main.top .section4 .section_child {
    margin: 0 auto;
    width: 89vw;
  }

  main.top .section4 .section_child .bigger a {
    display: flex;
    margin-top: 40px;
  }

  main.top .section4 .section_child .bigger a:hover .img {
    filter: brightness(1.4);
  }

  main.top .section4 .section_child .bigger .left {
    width: 39vw;
  }

  main.top .section4 .section_child .bigger .right {
    width: 50vw;
    height: 28.95vw;
    margin-top: 12px;
  }

  main.top .section4 .section_child .bigger .right .img {
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    transition: filter 750ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  main.top .section4 .section_child .bigger .right .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
  }

  main.top .section4 .section_child .bigger > .ui {
    height: 50px;
    position: absolute;
    display: flex;
    right: 111px;
    margin-top: -30px;
  }

  main.top .section4 .section_child .bigger > .ui ul {
    display: flex;
  }

  main.top .section4 .section_child .bigger > .ui ul li {
    position: relative;
    width: 18px;
    height: 18px;
    margin-right: 14px;
    cursor: pointer;
  }

  main.top .section4 .section_child .bigger > .ui ul li:before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #b69237;
    display: block;
    opacity: 0;
    transition: opacity 400ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  main.top .section4 .section_child .bigger > .ui ul li:after {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.15);
    display: block;
    position: relative;
    left: 5px;
    top: 5px;
  }

  main.top .section4 .section_child .bigger > .ui ul li.current:after,
  main.top .section4 .section_child .bigger > .ui ul li:hover:after {
    background-color: #b69237;
  }

  main.top .section4 .section_child .bigger > .ui ul li.current:before,
  main.top .section4 .section_child .bigger > .ui ul li:hover:before {
    opacity: 1;
  }

  main.top .section4 .section_child .bigger > .ui .bar {
    position: relative;
    top: 9px;
    margin-left: 11px;
  }

  main.top .section4 .section_child .bigger > .ui .bar .base {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.15);
  }

  main.top .section4 .section_child .bigger > .ui .bar .progress {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: #b69237;
    transform-origin: left;
    transform: scaleX(0.5);
  }

  main.top .section4 .section_child .bigger .date {
    color: #c7b9a5;
    font-size: 1.2rem;
    margin-top: 5px;
    font-weight: 600;
    letter-spacing: .04em;
  }

  main.top .section4 .section_child .bigger .tit {
    font-size: 2.4rem;
    font-weight: 600;
    margin-top: 27px;
    letter-spacing: 0.07em;
    width: 94%;
  }

  main.top .section4 .section_child .bigger .credit {
    font-size: 1.4rem;
    color: #AAAAAA;
    margin-top: 5px;
    line-height: 1.9;
  }

  main.top .section4 .section_child .bigger .txt {
    font-size: 1.6rem;
    margin-top: 44px;
    line-height: 1.6;
    width: 94%;
    letter-spacing: 0.07em;
  }

  main.top .section4 .section_child .bigger .txt:after {
    content: "";
    background: url(/assets/img/common/arrow3.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    width: 83px;
    height: 9px;
    position: absolute;
    margin-top: 53px;
  }

  main.top .section4 .section_child > .ui {
    position: absolute;
    display: flex;
    right: 0px;
    margin-top: 23px;
  }

  main.top .section4 .section_child > .ui .next {
    margin-left: 10px;
  }

  main.top .section4 .section_child .list {
    display: flex;
    margin-top: 180px;
    white-space: nowrap;
  }

  main.top .section4 .section_child .list li {
    display: inline-block;
    width: 336px;
    height: 461px;
    margin-right: 37px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
  }

  main.top .section4 .section_child .list li .img {
    width: 336px;
    height: 219px;
    overflow: hidden;
  }

  main.top .section4 .section_child .list li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  main.top .section4 .section_child .list li .under_img {
    background: #fff;
    padding-top: 30px;
    height: 100%;
  }

  main.top .section4 .section_child .list li .date {
    color: #c7b9a5;
    font-size: 1.2rem;
    margin-left: 30px;
  }

  main.top .section4 .section_child .list li .tit {
    font-size: 1.8rem;
    font-weight: 600;
    margin-top: 7px;
    margin-left: 30px;
    width: 276px;
    white-space: initial;
    line-height: 1.7;
  }

  main.top .section4 .section_child .list li .credit {
    font-size: 1.4rem;
    margin-left: 30px;
    margin-top: 44px;
    margin-bottom: 30px;
    line-height: 1.7;
  }

  main.top .section4 .section_child .list li .place {
    font-size: 1.2rem;
  }

  main.top .section4 .section_child > .btn {
    margin-top: 214px;
    position: relative;
    left: 50vw;
    background: #fff;
    width: 365px;
    transform: translate3d(-262px, 0px, 0px);
  }

  main.top .section4 .section_child > .btn:hover {
    transform: translate3d(-262px, 0px, 0px) scale(0.95);
  }

  main.top .section5 {
    padding-top: 110px;
    padding-bottom: 127px;
  }

  main.top .section5 .section_child {
    margin: 0 auto;
    width: 89vw;
  }

  main.top .section5 .section_child .list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 57px;
  }

  main.top .section5 .section_child .list li {
    width: 22.1vw;
    position: relative;
    margin-right: 1px;
    margin-bottom: 1px;
  }

  main.top .section5 .section_child .list li:hover .img {
    filter: brightness(1.4);
  }

  main.top .section5 .section_child .list li:hover .img img {
    transform: scale(1.1);
  }

  main.top .section5 .section_child .list li a,
  main.top .section5 .section_child .list li a:visited {
    position: relative;
    color: #fff;
    display: block;
  }

  main.top .section5 .section_child .list li:after {
    content: "";
    background: url(/assets/img/common/arrow3_w.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    width: 83px;
    height: 9px;
    position: absolute;
    bottom: 22px;
    left: 24px;
  }

  main.top .section5 .section_child .list li .img {
    overflow: hidden;
    transition: filter 750ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  main.top .section5 .section_child .list li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  main.top .section5 .section_child .list li .tit {
    position: absolute;
    z-index: 1;
    top: 28px;
    font-size: 2.2rem;
    font-weight: 600;
    left: 20px;
  }

  main.top .section5 .section_child .list li .txt {
    position: absolute;
    z-index: 1;
    font-size: 1.4rem;
    font-weight: 600;
    width: 17.6vw;
    left: 23px;
    top: 161px;
    line-height: 1.87;
  }

  main.top .section5 .section_child > .btn {
    margin-top: 113px;
    position: relative;
    left: 50vw;
    background: #fff;
    width: 365px;
    transform: translate3d(-262px, 0px, 0px);
  }

  main.top .section5 .section_child > .btn:hover {
    transform: translate3d(-262px, 0px, 0px) scale(0.95);
  }
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {
  main.top .section5 .section_child .list li .txt {
    font-size: 0.97222vw;
  }
}

@media screen and (max-width: 1023px) {
  .night main.top .hero .arrow {
    background-color: #fff;
  }

  main.top .hero {
    width: 100vw;
    height: 100vh;
  }

  main.top .hero h1 {
    position: absolute;
    left: 12.7vw;
    top: 46.7vh;
    transform: translate3d(0, -50%, 0);
  }

  main.top .hero h1 img {
    width: 30.5px;
    height: 418.5px;
  }

  main.top .hero h1 img:nth-of-type(2) {
    position: absolute;
    left: 0;
  }

  main.top .hero .moon img {
    width: 160px;
  }

  main.top .hero .arrow {
    position: absolute;
    bottom: 97px;
    right: -19px;
    transform: rotate(90deg);
    background-color: #1d1d1d;
    -webkit-mask: url(/assets/img/common/arrow3_w.svg) 50% 50%/contain no-repeat;
    mask: url(/assets/img/common/arrow3_w.svg) 50% 50%/contain no-repeat;
    width: 76px;
    height: 9px;
  }

  main.top .copy {
    font-style: italic;
    font-weight: 500;
    font-size: 4.83092vw;
    text-align: center;
    padding-top: 67px;
    line-height: 1.6;
    background: #fff;
  }

  main.top > section .section_child {
    position: relative;
  }

  main.top > section .section_child h2 {
    font-size: 12.31884vw;
    font-family: eb-garamond, serif;
    font-weight: 100;
    letter-spacing: .04em;
  }

  main.top .section1 {
    padding-top: 176px;
    padding-bottom: 220px;
    background: #fff;
  }

  main.top .section1 .section_child {
    margin: 0 auto;
    width: 91vw;
  }

  main.top .section1 .section_child .ui {
    display: flex;
    position: absolute;
    right: 1px;
    top: -7px;
  }

  main.top .section1 .section_child .ui .next {
    margin-left: 10px;
  }

  main.top .section1 .section_child .list {
    margin-top: 17px;
    white-space: nowrap;
    display: flex;
  }

  main.top .section1 .section_child .list li {
    display: inline-block;
    width: 296px;
    height: 406px;
    margin-right: 25px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    /*&:before{
                            content: "";
                            background-image: url(/assets/img/common/bg_patern.png);
                            background-repeat: round;
                            display: block;
                            position: absolute;
                            width: 100%;
                            height: 136px;
                            transform-origin: right top;
                            transform: skew(-43deg, 0deg);
                            top: 0px;
                            left: 0px;
                            z-index: -1;
                            border-radius: 10px;
                        }

                        &:after{
                            content: "";
                            background-image: url(/assets/img/common/bg_patern.png);
                            background-repeat: round;
                            display: block;
                            position: relative;
                            width: 100%;
                            height: 136px;
                            transform-origin: right top;
                            transform: skew(-43deg, 0deg);
                            top: 5px;
                            left: 0px;
                            z-index: -1;
                            border-radius: 10px;
                        }*/
  }

  main.top .section1 .section_child .list li a {
    width: 296px;
    height: 406px;
    display: block;
  }

  main.top .section1 .section_child .list li .img {
    width: 296px;
    height: 194px;
    overflow: hidden;
  }

  main.top .section1 .section_child .list li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  main.top .section1 .section_child .list li .under_img {
    background: #fff;
    padding-top: 21px;
    height: 100%;
  }

  main.top .section1 .section_child .list li .date {
    color: #c7b9a5;
    font-size: 1.3rem;
    margin-left: 23px;
    letter-spacing: .02em;
  }

  main.top .section1 .section_child .list li .tit {
    font-size: 1.7rem;
    font-weight: 600;
    margin-top: 9px;
    margin-left: 22px;
    letter-spacing: .03em;
  }

  main.top .section1 .section_child .list li .cate {
    font-size: 1.3rem;
    margin-left: 27px;
    margin-top: 60px;
    margin-bottom: 30px;
    display: inline-block;
  }

  main.top .section1 .section_child .list li .cate:after {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    background: #c7b9a5;
  }

  main.top .section2 .section_child {
    padding: 98px 0 118px;
    margin: 0 auto;
    width: 91vw;
    position: relative;
  }

  main.top .section2 .section_child h2:after {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    background: rgba(208, 221, 237, 0.2);
    margin-top: 4px;
  }

  main.top .section2 .section_child .bigger {
    position: relative;
  }

  main.top .section2 .section_child .bigger > .ui {
    height: 50px;
    position: absolute;
    display: flex;
    left: -4px;
    margin-top: -112px;
  }

  main.top .section2 .section_child .bigger > .ui ul {
    display: flex;
  }

  main.top .section2 .section_child .bigger > .ui ul li {
    position: relative;
    width: 18px;
    height: 18px;
    margin-right: 14px;
    cursor: pointer;
  }

  main.top .section2 .section_child .bigger > .ui ul li:after {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.15);
    display: block;
    position: relative;
    left: 5px;
    top: 5px;
  }

  main.top .section2 .section_child .bigger > .ui ul li.current:after {
    background-color: #b69237;
  }

  main.top .section2 .section_child .bigger > .ui ul li.current:before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #b69237;
    display: block;
  }

  main.top .section2 .section_child .bigger > .ui .bar {
    position: relative;
    top: 9px;
    margin-left: 11px;
    width: 110px;
  }

  main.top .section2 .section_child .bigger > .ui .bar .base {
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.15);
  }

  main.top .section2 .section_child .bigger > .ui .bar .progress {
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #b69237;
    transform-origin: left;
    transform: scaleX(0);
  }

  main.top .section2 .section_child .bigger .date {
    font-size: 5.31401vw;
    position: absolute;
    right: 2px;
    margin-top: -60px;
    letter-spacing: .02em;
  }

  main.top .section2 .section_child .bigger .img {
    margin: 149px auto 0;
    width: 90vw;
    height: 103.5vw;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
  }

  main.top .section2 .section_child .bigger .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
  }

  main.top .section2 .section_child .bigger .tit {
    font-size: 7.72947vw;
    margin-top: 37px;
    letter-spacing: 0.025em;
    line-height: 1.1;
  }

  main.top .section2 .section_child .bigger .cast {
    font-size: 3.38164vw;
    color: #AAAAAA;
    line-height: 1.6;
    letter-spacing: .01em;
    margin-top: 23px;
  }

  main.top .section2 .section_child .bigger .cast:before {
    content: "";
    width: 32px;
    height: 1px;
    position: relative;
    top: -3px;
    background-color: #808080;
    display: inline-block;
    margin-right: 14px;
  }

  main.top .section2 .section_child .bigger .txt {
    font-size: 3.62319vw;
    color: #AAAAAA;
    line-height: 1.5;
    margin-top: 23px;
    letter-spacing: .03em;
  }

  main.top .section2 .section_child .bigger .btn {
    position: relative;
    margin: 49px auto 0;
    width: 90vw;
  }

  main.top .section2 .section_child .list {
    margin-top: 170px;
    white-space: nowrap;
    display: flex;
  }

  main.top .section2 .section_child .list li {
    display: inline-block;
    width: 296px;
    margin-right: 25px;
  }

  main.top .section2 .section_child .list li .date {
    color: #aaaaaa;
    font-size: 1.6rem;
    letter-spacing: .02em;
  }

  main.top .section2 .section_child .list li .chunk {
    height: 406px;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
    position: relative;
  }

  main.top .section2 .section_child .list li .chunk .img {
    width: 296px;
    height: 193px;
    overflow: hidden;
  }

  main.top .section2 .section_child .list li .chunk .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  main.top .section2 .section_child .list li .chunk .under_img {
    background: #fff;
    padding-top: 30px;
    height: 100%;
  }

  main.top .section2 .section_child .list li .chunk .tit {
    font-size: 1.7rem;
    font-weight: 600;
    margin-left: 23px;
    width: 276px;
    white-space: initial;
    line-height: 1.5;
  }

  main.top .section2 .section_child .list li .chunk .cast {
    font-size: 1.3rem;
    margin-left: 22px;
    margin-top: 20px;
  }

  main.top .section2 .section_child .list li .chunk .place {
    position: absolute;
    font-size: 1.3rem;
    margin-left: 27px;
    margin-top: 37px;
    bottom: 36px;
  }

  main.top .section2 .section_child .list li .chunk .place:after {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    background: #c7b9a5;
  }

  main.top .section2 .section_child > .ui {
    position: absolute;
    display: flex;
    right: 0px;
    margin-top: 38px;
  }

  main.top .section2 .section_child > .ui .next {
    margin-left: 10px;
  }

  main.top .section2 .section_child > .btn {
    margin: 292px auto 0;
    position: relative;
    background: #fff;
    width: 90vw;
  }

  main.top .section3:after {
    content: "";
    display: block;
    background: #e6e6e6;
    height: 1px;
    margin: 107px auto 0;
    width: 89vw;
  }

  main.top .section3 .section_child .head {
    color: #fff;
    background-image: url(/assets/img/top/section3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: -5vw;
    width: 100vw;
    height: 125.5vw;
    position: relative;
  }

  main.top .section3 .section_child .head h2 {
    position: absolute;
    top: 50%;
    transform: translate3d(0, -61%, 0);
    left: 14px;
    letter-spacing: .03em;
    font-size: 10.86957vw;
  }

  main.top .section3 .section_child .head h2:after {
    content: "";
    width: 35px;
    height: 1px;
    background: #fff;
    display: inline-block;
    left: 16px;
    top: -9px;
    position: relative;
  }

  main.top .section3 .section_child .list {
    display: flex;
    flex-wrap: wrap;
    margin: 69px auto 0;
    width: 91vw;
  }

  main.top .section3 .section_child .list li {
    width: 43vw;
    display: inline-block;
    margin-bottom: 73px;
  }

  main.top .section3 .section_child .list li:nth-child(odd) {
    margin-right: 5vw;
  }

  main.top .section3 .section_child .list li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  main.top .section3 .section_child .list li .tit {
    font-size: 4.34783vw;
    margin-top: 21px;
    letter-spacing: .02em;
    line-height: 1.3;
  }

  main.top .section3 .section_child .list li .sub_tit {
    font-size: 1.4rem;
    margin-top: 9px;
    letter-spacing: .04em;
    line-height: 1.3;
    color: #AAAAAA;
  }

  main.top .section3 .section_child .list li:after {
    content: "";
    background: url(/assets/img/common/arrow2.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    width: 44px;
    height: 8px;
    position: absolute;
    margin-top: 21px;
  }

  main.top .section3 .section_child > .btn {
    margin-top: 38px;
    position: relative;
    left: 50vw;
    transform: translate3d(-50%, 0, 0);
    background: #fff;
    width: 90vw;
  }

  main.top .section4 {
    padding-top: 64px;
    padding-bottom: 113px;
  }

  main.top .section4 .section_child {
    margin: 0 auto;
    width: 91vw;
  }

  main.top .section4 .section_child .bigger a {
    display: flex;
    margin-top: 96px;
    flex-direction: column-reverse;
  }

  main.top .section4 .section_child .bigger .right {
    margin-top: 12px;
  }

  main.top .section4 .section_child .bigger .right .img {
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
  }

  main.top .section4 .section_child .bigger .right .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
  }

  main.top .section4 .section_child .bigger > .ui {
    height: 50px;
    position: absolute;
    display: flex;
    left: 2px;
    margin-top: -45px;
  }

  main.top .section4 .section_child .bigger > .ui ul {
    display: flex;
  }

  main.top .section4 .section_child .bigger > .ui ul li {
    position: relative;
    width: 18px;
    height: 18px;
    margin-right: 14px;
    cursor: pointer;
  }

  main.top .section4 .section_child .bigger > .ui ul li:after {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.15);
    display: block;
    position: relative;
    left: 5px;
    top: 5px;
  }

  main.top .section4 .section_child .bigger > .ui ul li.current:after {
    background-color: #b69237;
  }

  main.top .section4 .section_child .bigger > .ui ul li.current:before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #b69237;
    display: block;
  }

  main.top .section4 .section_child .bigger > .ui .bar {
    position: relative;
    top: 9px;
    margin-left: 11px;
  }

  main.top .section4 .section_child .bigger > .ui .bar .base {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.15);
  }

  main.top .section4 .section_child .bigger > .ui .bar .progress {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: #b69237;
    transform-origin: left;
    transform: scaleX(0.5);
  }

  main.top .section4 .section_child .bigger .date {
    color: #c7b9a5;
    font-size: 3.1401vw;
    margin-top: 24px;
    font-weight: 600;
    letter-spacing: .04em;
  }

  main.top .section4 .section_child .bigger .tit {
    font-size: 5.31401vw;
    font-weight: 600;
    margin-top: 6px;
    letter-spacing: 0.07em;
    width: 94%;
    line-height: 1.3;
  }

  main.top .section4 .section_child .bigger .credit {
    font-size: 1.4rem;
    color: #AAAAAA;
    margin-top: 14px;
    line-height: 1.6;
  }

  main.top .section4 .section_child .bigger .txt {
    font-size: 1.6rem;
    margin-top: 33px;
    line-height: 1.6;
    width: 94%;
    letter-spacing: 0.07em;
  }

  main.top .section4 .section_child .bigger .txt:after {
    content: "";
    background: url(/assets/img/common/arrow3.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    width: 83px;
    height: 9px;
    position: absolute;
    margin-top: 49px;
  }

  main.top .section4 .section_child > .ui {
    position: absolute;
    display: flex;
    right: 0px;
    margin-top: 38px;
  }

  main.top .section4 .section_child > .ui .next {
    margin-left: 10px;
  }

  main.top .section4 .section_child .list {
    margin-top: 140px;
    white-space: nowrap;
    display: flex;
  }

  main.top .section4 .section_child .list li {
    display: inline-block;
    width: 295px;
    height: 406px;
    margin-right: 28px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
  }

  main.top .section4 .section_child .list li a {
    display: block;
    height: 406px;
  }

  main.top .section4 .section_child .list li .img {
    width: 295px;
    height: 194px;
    overflow: hidden;
  }

  main.top .section4 .section_child .list li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  main.top .section4 .section_child .list li .under_img {
    background: #fff;
    padding-top: 21px;
    height: 100%;
  }

  main.top .section4 .section_child .list li .date {
    color: #c7b9a5;
    font-size: 1.3rem;
    margin-left: 23px;
  }

  main.top .section4 .section_child .list li .tit {
    font-size: 1.7rem;
    font-weight: 600;
    margin-top: 7px;
    margin-left: 22px;
    width: 251px;
    white-space: initial;
    line-height: 1.5;
  }

  main.top .section4 .section_child .list li .credit {
    position: absolute;
    font-size: 1.4rem;
    margin-left: 20px;
    margin-top: 23px;
    bottom: 36px;
    line-height: 1.7;
  }

  main.top .section4 .section_child > .btn {
    margin: 194px auto 0;
    position: relative;
    background: #fff;
    width: 90vw;
  }

  main.top .section5 {
    padding-top: 65px;
    padding-bottom: 97px;
  }

  main.top .section5 .section_child {
    margin: 0 auto;
    width: 91vw;
  }

  main.top .section5 .section_child .list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 44px;
  }

  main.top .section5 .section_child .list li {
    width: 45.2vw;
    position: relative;
    margin-right: 1px;
    margin-bottom: 1px;
  }

  main.top .section5 .section_child .list li a,
  main.top .section5 .section_child .list li a:visited {
    position: relative;
    color: #fff;
    display: block;
  }

  main.top .section5 .section_child .list li:after {
    content: "";
    background: url(/assets/img/common/arrow3_w.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    width: 83px;
    height: 9px;
    position: absolute;
    bottom: 35px;
    left: 18px;
  }

  main.top .section5 .section_child .list li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  main.top .section5 .section_child .list li .tit {
    position: absolute;
    z-index: 1;
    top: 15px;
    font-size: 2.0rem;
    font-weight: 600;
    left: 16px;
  }

  main.top .section5 .section_child .list li .txt {
    display: none;
  }

  main.top .section5 .section_child > .btn {
    margin: 83px auto 0;
    position: relative;
    background: #fff;
    width: 90vw;
  }
}
/*
z-index

*/

.night main.news a,
.night main.news a:visited {
  color: #fff;
}

.night main.news .head nav.cate_menu ul li a.current .tit,
.night main.news .head nav.cate_menu ul li a:hover .tit,
.night main.news .head nav.cate_menu ul li a:visited.current .tit,
.night main.news .head nav.cate_menu ul li a:visited:hover .tit {
  color: #1d1d1d;
  background-color: #fff;
}

.night main.news .uis .ui1 ul li.current:after,
.night main.news .uis .ui1 ul li:hover:after {
  background-color: #fff;
}

main.news .head h1 {
  font-weight: 100;
}

main.news .list {
  display: flex;
  flex-wrap: wrap;
}

main.news .list li {
  flex-shrink: 0;
}

main.news .list li a,
main.news .list li a:visited {
  color: #1d1d1d;
}

@media screen and (min-width: 1024px) {
  main.news {
    padding-top: 162px;
  }

  main.news .head {
    width: 89vw;
    margin: 0 auto;
    position: relative;
  }

  main.news .head h1 {
    font-size: 5.6rem;
    letter-spacing: .02em;
  }

  main.news .head nav.cate_menu {
    position: absolute;
    left: 178px;
    top: 60px;
  }

  main.news .head nav.cate_menu ul {
    display: flex;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.2;
  }

  main.news .head nav.cate_menu ul li {
    position: relative;
  }

  main.news .head nav.cate_menu ul li:last-child:after {
    content: none;
  }

  main.news .head nav.cate_menu ul li a,
  main.news .head nav.cate_menu ul li a:visited {
    transition: color 300ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  main.news .head nav.cate_menu ul li a.current,
  main.news .head nav.cate_menu ul li a:hover,
  main.news .head nav.cate_menu ul li a:visited.current,
  main.news .head nav.cate_menu ul li a:visited:hover {
    color: #fff;
  }

  main.news .head nav.cate_menu ul li a.current .tit,
  main.news .head nav.cate_menu ul li a:hover .tit,
  main.news .head nav.cate_menu ul li a:visited.current .tit,
  main.news .head nav.cate_menu ul li a:visited:hover .tit {
    background-color: #1d1d1d;
    border-radius: 3px;
  }

  main.news .head nav.cate_menu ul li .tit {
    padding: 0px 3px;
    background-color: transparent;
    transition: background-color 300ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  main.news .head nav.cate_menu ul li .num {
    position: absolute;
    color: #aaaaaa;
    font-size: 1.0rem;
    top: -16px;
    margin-left: -12px;
  }

  main.news .head nav.cate_menu ul li:after {
    content: "/";
    margin: 0 8.7px;
  }

  main.news .head:after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #aaaaaa;
    opacity: .2;
    display: block;
    margin-top: 3px;
  }

  main.news .list {
    margin: 60px auto 0;
    width: 88.9vw;
  }

  main.news .list li {
    display: inline-block;
    width: 27.7vw;
    height: 36.2vw;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-right: 2.58vw;
    margin-bottom: 3.6vw;
    /*&:before{
                    content: "";
                    background-image: url(/assets/img/common/bg_patern.png);
                    background-repeat: round;
                    display: block;
                    position: absolute;
                    width: 100%;
                    height: 136px;
                    transform-origin: right top;
                    transform: skew(-43deg, 0deg);
                    top: 0px;
                    left: 0px;
                    z-index: -1;
                    border-radius: 10px;
                }

                &:after{
                    content: "";
                    background-image: url(/assets/img/common/bg_patern.png);
                    background-repeat: round;
                    display: block;
                    position: relative;
                    width: 100%;
                    height: 136px;
                    transform-origin: right top;
                    transform: skew(-43deg, 0deg);
                    top: 5px;
                    left: 0px;
                    z-index: -1;
                    border-radius: 10px;
                }
*/
  }

  main.news .list li:nth-of-type(3n) {
    margin-right: 0;
  }

  main.news .list li a {
    width: 27.7vw;
    height: 36.2vw;
    display: block;
  }

  main.news .list li .img {
    width: 27.7vw;
    height: 18vw;
    overflow: hidden;
  }

  main.news .list li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  main.news .list li .under_img {
    background: #fff;
    padding-top: 2.8vw;
    height: 100%;
  }

  main.news .list li .date {
    color: #c7b9a5;
    font-size: 0.83333vw;
    margin-left: 2.1vw;
  }

  main.news .list li .tit {
    font-size: 1.25vw;
    font-weight: 500;
    margin-top: 0.8vw;
    margin-left: 2vw;
  }

  main.news .list li .cate {
    font-size: 0.83333vw;
    margin-left: 2vw;
    margin-top: 5.7vw;
    margin-bottom: 30px;
    display: inline-block;
  }

  main.news .list li .cate:after {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    background: #c7b9a5;
  }

  main.news .uis {
    width: 89vw;
    position: relative;
    height: 187px;
    margin: 75px auto;
  }

  main.news .uis .ui1 {
    display: flex;
    position: absolute;
    right: 212px;
    top: 24px;
  }

  main.news .uis .ui1 ul {
    display: flex;
  }

  main.news .uis .ui1 ul li {
    position: relative;
    font-size: 1.6rem;
    font-weight: 500;
    width: 18px;
    height: 18px;
    margin-left: 28px;
    text-align: center;
  }

  main.news .uis .ui1 ul li.current:after,
  main.news .uis .ui1 ul li:hover:after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #1d1d1d;
    display: block;
    position: relative;
  }

  main.news .uis .ui1 ul li.current,
  main.news .uis .ui1 ul li.three_dot {
    pointer-events: none;
  }

  main.news .uis .ui1 .bar {
    position: relative;
    top: 9px;
    margin-left: 11px;
  }

  main.news .uis .ui1 .bar .base {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: #d9d9d9;
  }

  main.news .uis .ui1 .bar .progress {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: #b69237;
    transform-origin: left;
    transform: scaleX(0.5);
  }

  main.news .uis .ui2 {
    display: flex;
    right: 0px;
    position: absolute;
  }

  main.news .uis .ui2 .next {
    margin-left: 20px;
  }
}

@media screen and (max-width: 1023px) {
  main.news {
    padding-top: 162px;
  }

  main.news .head {
    width: 92vw;
    margin: 0 auto;
    position: relative;
  }

  main.news .head h1 {
    font-size: 5.6rem;
    letter-spacing: -.03em;
  }

  main.news .head nav.cate_menu {
    position: relative;
    margin-top: 72px;
  }

  main.news .head nav.cate_menu ul {
    display: flex;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
  }

  main.news .head nav.cate_menu ul li {
    position: relative;
    white-space: nowrap;
  }

  main.news .head nav.cate_menu ul li:last-child:after {
    content: none;
  }

  main.news .head nav.cate_menu ul li a.current,
  main.news .head nav.cate_menu ul li a:visited.current {
    color: #fff;
  }

  main.news .head nav.cate_menu ul li a.current .tit,
  main.news .head nav.cate_menu ul li a:visited.current .tit {
    background-color: #1d1d1d;
    border-radius: 3px;
  }

  main.news .head nav.cate_menu ul li .tit {
    padding: 0px 3px;
  }

  main.news .head nav.cate_menu ul li .num {
    position: absolute;
    color: #aaaaaa;
    font-size: 1.0rem;
    top: -16px;
    margin-left: -12px;
  }

  main.news .head nav.cate_menu ul li:after {
    content: "/";
    margin: 0 .75rem;
  }

  main.news .head:after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #aaaaaa;
    opacity: .2;
    display: block;
    top: 110px;
    position: absolute;
  }

  main.news .list {
    margin: 80px auto 0;
    width: 91vw;
  }

  main.news .list li {
    display: inline-block;
    width: 100%;
    height: 117.7vw;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-right: 2.6vw;
    margin-bottom: 8.2vw;
    /*&:before{
                    content: "";
                    background-image: url(/assets/img/common/bg_patern.png);
                    background-repeat: round;
                    display: block;
                    position: absolute;
                    width: 100%;
                    height: 136px;
                    transform-origin: right top;
                    transform: skew(-43deg, 0deg);
                    top: 0px;
                    left: 0px;
                    z-index: -1;
                    border-radius: 10px;
                }

                &:after{
                    content: "";
                    background-image: url(/assets/img/common/bg_patern.png);
                    background-repeat: round;
                    display: block;
                    position: relative;
                    width: 100%;
                    height: 136px;
                    transform-origin: right top;
                    transform: skew(-43deg, 0deg);
                    top: 5px;
                    left: 0px;
                    z-index: -1;
                    border-radius: 10px;
                }*/
  }

  main.news .list li:nth-of-type(3n) {
    margin-right: 0;
  }

  main.news .list li a {
    width: 100%;
    height: 117.7vw;
    display: block;
  }

  main.news .list li .img {
    width: 100%;
    height: 59vw;
    overflow: hidden;
  }

  main.news .list li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  main.news .list li .under_img {
    background: #fff;
    padding-top: 8.9vw;
    height: 100%;
  }

  main.news .list li .date {
    color: #c7b9a5;
    font-size: 3.1401vw;
    margin-left: 5.3vw;
  }

  main.news .list li .tit {
    font-size: 4.10628vw;
    font-weight: 500;
    margin-top: 1.5vw;
    margin-left: 4.8vw;
  }

  main.news .list li .cate {
    font-size: 3.1401vw;
    margin-left: 5vw;
    margin-top: 17.9vw;
    display: inline-block;
  }

  main.news .list li .cate:after {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    background: #c7b9a5;
  }

  main.news .uis {
    width: 92vw;
    position: relative;
    height: 215px;
    margin: 54px auto;
  }

  main.news .uis .ui1 {
    display: flex;
    position: absolute;
    right: 0;
    top: 24px;
  }

  main.news .uis .ui1 ul {
    display: flex;
  }

  main.news .uis .ui1 ul li {
    position: relative;
    font-size: 1.8rem;
    font-weight: 500;
    width: 18px;
    height: 18px;
    margin-left: 34px;
    text-align: center;
  }

  main.news .uis .ui1 ul li.current {
    pointer-events: none;
  }

  main.news .uis .ui1 ul li.current:after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #1d1d1d;
    display: block;
    position: relative;
  }

  main.news .uis .ui1 .bar {
    position: relative;
    top: 9px;
    margin-left: 11px;
  }

  main.news .uis .ui1 .bar .base {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: #d9d9d9;
  }

  main.news .uis .ui1 .bar .progress {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: #b69237;
    transform-origin: left;
    transform: scaleX(0.5);
  }

  main.news .uis .ui2 {
    display: flex;
    right: 5px;
    margin-top: 100px;
    position: absolute;
  }

  main.news .uis .ui2 .next {
    margin-left: 10px;
  }
}
/*
z-index

*/

.night main.event .bigger > .ui ul li:after {
  background-color: rgba(255, 255, 255, 0.15);
}

.night main.event .bigger > .ui .bar .base {
  background-color: rgba(255, 255, 255, 0.15);
}

main.event .head h1 {
  font-weight: 100;
}

main.event .head .bigger .img img:first-of-type {
  transition: margin-left 1200ms;
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}

@media screen and (min-width: 1024px) {
  main.event {
    padding-top: 162px;
  }

  main.event .head {
    width: 89vw;
    margin: 0 auto;
    position: relative;
  }

  main.event .head h1 {
    font-size: 5.6rem;
    letter-spacing: .02em;
  }

  main.event .bigger > .ui {
    height: 50px;
    position: absolute;
    display: flex;
    top: 169px;
    left: 0px;
  }

  main.event .bigger > .ui ul {
    display: flex;
  }

  main.event .bigger > .ui ul li {
    position: relative;
    width: 18px;
    height: 18px;
    margin-right: 14px;
    cursor: pointer;
  }

  main.event .bigger > .ui ul li:before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #b69237;
    display: block;
    opacity: 0;
    transition: opacity 400ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  main.event .bigger > .ui ul li:after {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.15);
    display: block;
    position: relative;
    left: 5px;
    top: 5px;
  }

  main.event .bigger > .ui ul li.current:after,
  main.event .bigger > .ui ul li:hover:after {
    background-color: #b69237;
  }

  main.event .bigger > .ui ul li.current:before,
  main.event .bigger > .ui ul li:hover:before {
    opacity: 1;
  }

  main.event .bigger > .ui .bar {
    position: relative;
    top: 9px;
    margin-left: 11px;
  }

  main.event .bigger > .ui .bar .base {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: #d9d9d9;
  }

  main.event .bigger > .ui .bar .progress {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: #b69237;
    transform-origin: left;
    transform: scaleX(0);
  }

  main.event .bigger .date {
    font-size: 2.6rem;
    position: absolute;
    right: 0;
    top: 150px;
    letter-spacing: .01em;
  }

  main.event .bigger .img_link:hover .img {
    filter: brightness(1.4);
  }

  main.event .bigger .img {
    margin: 108px auto 0;
    width: 79.4vw;
    height: 40.3vw;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    transition: filter 750ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  main.event .bigger .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
  }

  main.event .bigger .tit {
    font-size: 3.8rem;
    margin-top: 33px;
    letter-spacing: .03em;
  }

  main.event .bigger .cast {
    font-size: 1.6rem;
    color: #AAAAAA;
    line-height: 1.6;
    letter-spacing: .01em;
  }

  main.event .bigger .cast:before {
    content: "";
    width: 37px;
    height: 1px;
    position: relative;
    top: -3px;
    background-color: #808080;
    display: inline-block;
    margin-right: 18px;
  }

  main.event .bigger .txt {
    font-size: 1.6rem;
    color: #AAAAAA;
    line-height: 1.6;
    margin-top: 19px;
    width: 60%;
    letter-spacing: .08em;
  }

  main.event .bigger .btn {
    position: absolute;
    right: 0px;
    margin-top: -63px;
    width: 236px;
    background-color: #fff;
  }

  main.event .list {
    width: 89vw;
    margin: 196px auto 207px;
    display: flex;
    flex-wrap: wrap;
  }

  main.event .list li {
    display: inline-block;
    width: 27.7vw;
    height: 36.2vw;
    margin-right: 2.6vw;
    margin-bottom: 95px;
  }

  main.event .list li:nth-of-type(3n) {
    margin-right: 0;
  }

  main.event .list li a {
    width: 27.7vw;
    height: 36.2vw;
    display: block;
  }

  main.event .list li .date {
    color: #c7b9a5;
    font-size: 1.6rem;
    letter-spacing: .02em;
  }

  main.event .list li .chunk {
    height: 36.2vw;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 14px;
    position: relative;
  }

  main.event .list li .chunk .img {
    width: 27.7vw;
    height: 18vw;
    overflow: hidden;
  }

  main.event .list li .chunk .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  main.event .list li .chunk .under_img {
    background: #fff;
    padding-top: 0.5vw;
    height: 100%;
  }

  main.event .list li .chunk .tit {
    font-size: 1.25vw;
    font-weight: 600;
    margin-left: 2vw;
  }

  main.event .list li .chunk .cast {
    font-size: 0.83333vw;
    margin-left: 30px;
    margin-top: 15px;
  }

  main.event .list li .chunk .place {
    position: absolute;
    font-size: 0.83333vw;
    margin-left: 2vw;
    bottom: 3vw;
  }

  main.event .list li .chunk .place:after {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    background: #c7b9a5;
  }

  main.event .archives {
    color: #fff;
    background-image: url(/assets/img/event/archives.jpg);
    background-size: cover;
    background-position-x: 50%;
    background-position-y: 50%;
    background-repeat: no-repeat;
    width: 100vw;
    height: 55.5vw;
    position: relative;
    margin-bottom: 317px;
  }

  main.event .archives .tit {
    font-size: 5.6rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -108%, 0);
    letter-spacing: .03em;
  }

  main.event .archives .tit:after {
    content: "";
    width: 36px;
    height: 1px;
    display: block;
    background: #aaaaaa;
    position: absolute;
    left: 50%;
    transform: translate3d(-50%, -5px, 0);
  }

  main.event .archives .btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, 48%, 0);
    background: #fff;
    width: 368px;
  }

  main.event .archives .btn:hover {
    transform: translate3d(-50%, 48%, 0) scale(0.95);
  }
}

@media screen and (max-width: 1023px) {
  main.event {
    padding-top: 181px;
  }

  main.event .head {
    width: 92vw;
    margin: 0 auto;
    position: relative;
  }

  main.event .head h1 {
    font-size: 5.6rem;
    letter-spacing: -.01em;
  }

  main.event .head:after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #aaaaaa;
    opacity: .2;
    display: block;
    top: 110px;
    position: absolute;
  }

  main.event .bigger > .ui {
    height: 50px;
    position: absolute;
    display: flex;
    top: 150px;
    left: -1px;
  }

  main.event .bigger > .ui ul {
    display: flex;
  }

  main.event .bigger > .ui ul li {
    position: relative;
    width: 18px;
    height: 18px;
    margin-right: 14px;
    cursor: pointer;
  }

  main.event .bigger > .ui ul li:before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #b69237;
    display: block;
    opacity: 0;
    transition: opacity 400ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  main.event .bigger > .ui ul li:after {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.15);
    display: block;
    position: relative;
    left: 5px;
    top: 5px;
  }

  main.event .bigger > .ui ul li.current:after {
    background-color: #b69237;
  }

  main.event .bigger > .ui ul li.current:before {
    opacity: 1;
  }

  main.event .bigger > .ui .bar {
    position: relative;
    top: 9px;
    margin-left: 11px;
  }

  main.event .bigger > .ui .bar .base {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: #d9d9d9;
  }

  main.event .bigger > .ui .bar .progress {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: #b69237;
    transform-origin: left;
    transform: scaleX(0);
  }

  main.event .bigger .date {
    font-size: 2.2rem;
    position: absolute;
    right: 7px;
    top: 202px;
    letter-spacing: .01em;
  }

  main.event .bigger .img {
    margin: 149px auto 0;
    width: 90vw;
    height: 103.5vw;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
  }

  main.event .bigger .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
  }

  main.event .bigger .tit {
    font-size: 7.72947vw;
    margin-top: 37px;
    letter-spacing: 0.025em;
    line-height: 1.1;
  }

  main.event .bigger .cast {
    font-size: 1.6rem;
    color: #AAAAAA;
    line-height: 1.6;
    letter-spacing: .01em;
    margin-top: 23px;
  }

  main.event .bigger .cast:before {
    content: "";
    width: 32px;
    height: 1px;
    position: relative;
    top: -3px;
    background-color: #808080;
    display: inline-block;
    margin-right: 14px;
  }

  main.event .bigger .txt {
    font-size: 3.62319vw;
    color: #AAAAAA;
    line-height: 1.5;
    margin-top: 23px;
    letter-spacing: .03em;
  }

  main.event .bigger .btn {
    position: relative;
    margin: 49px auto 0;
    width: 90vw;
  }

  main.event .list {
    width: 90vw;
    margin: 160px auto 0px;
    white-space: nowrap;
    display: flex;
  }

  main.event .list li {
    display: inline-block;
    width: 296px;
    margin-right: 5vw;
  }

  main.event .list li a {
    display: block;
  }

  main.event .list li .date {
    color: #c7b9a5;
    font-size: 1.6rem;
    letter-spacing: .02em;
  }

  main.event .list li .chunk {
    height: 406px;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 14px;
    position: relative;
  }

  main.event .list li .chunk .img {
    width: 296px;
    height: 192px;
    overflow: hidden;
  }

  main.event .list li .chunk .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  main.event .list li .chunk .under_img {
    background: #fff;
    padding-top: 30px;
    height: 100%;
  }

  main.event .list li .chunk .tit {
    font-size: 1.7rem;
    font-weight: 600;
    margin-left: 23px;
    width: 276px;
    white-space: initial;
    line-height: 1.5;
  }

  main.event .list li .chunk .cast {
    font-size: 1.3rem;
    margin-left: 22px;
    margin-top: 20px;
  }

  main.event .list li .chunk .place {
    position: absolute;
    font-size: 1.3rem;
    margin-left: 27px;
    margin-top: 37px;
    bottom: 36px;
  }

  main.event .list li .chunk .place:after {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    background: #c7b9a5;
  }

  main.event > .ui {
    position: relative;
    width: 90vw;
    display: flex;
    justify-content: flex-end;
    margin: 39px auto;
  }

  main.event > .ui .next {
    margin-left: 10px;
  }

  main.event > .btn {
    margin: 76px auto 100px;
    position: relative;
    background: #fff;
    width: 90vw;
  }

  main.event .archives {
    color: #fff;
    background-image: url(/assets/img/event/archives.jpg);
    background-size: cover;
    background-position-x: 50%;
    background-position-y: 50%;
    background-repeat: no-repeat;
    width: 100vw;
    height: 120.5vw;
    position: relative;
    margin-bottom: 111px;
  }

  main.event .archives .tit {
    font-size: 10.86957vw;
    white-space: nowrap;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -126%, 0);
    letter-spacing: .03em;
  }

  main.event .archives .tit:after {
    content: "";
    width: 36px;
    height: 1px;
    display: block;
    background: #aaaaaa;
    position: absolute;
    left: 50%;
    transform: translate3d(-50%, 5px, 0);
  }

  main.event .archives .btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, 48%, 0);
    background: #fff;
    width: 368px;
  }
}
/*
z-index

*/

.night main.journal a,
.night main.journal a:visited {
  color: #fff;
}

.night main.journal .uis .ui1 ul li.current:after,
.night main.journal .uis .ui1 ul li:hover:after {
  background-color: #fff;
}

.night main.journal .list li > .ui ul li:after {
  background-color: rgba(255, 255, 255, 0.15);
}

.night main.journal .list li > .ui .bar .base {
  background-color: rgba(255, 255, 255, 0.15);
}

.night main.journal .list li .credit {
  color: #fff;
}

main.journal .head h1 {
  font-weight: 100;
}

main.journal .list li .right .img img:first-of-type {
  transition: margin-left 1200ms;
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}

@media screen and (min-width: 1024px) {
  main.journal {
    padding-top: 162px;
  }

  main.journal .head {
    width: 89vw;
    margin: 0 auto;
    position: relative;
  }

  main.journal .head h1 {
    font-size: 5.6rem;
    letter-spacing: .02em;
  }

  main.journal hr {
    width: 89vw;
    margin: 3px auto 0;
    border-color: #aaaaaa;
    opacity: .2;
    top: 0;
  }

  main.journal .list {
    margin: 87px auto 0;
    width: 89vw;
  }

  main.journal .list li {
    position: relative;
    margin-bottom: 195px;
  }

  main.journal .list li a {
    display: flex;
    margin-top: 40px;
  }

  main.journal .list li:hover .img {
    filter: brightness(1.4);
  }

  main.journal .list li .left {
    width: 39vw;
  }

  main.journal .list li .right {
    width: 50vw;
    margin-top: 12px;
  }

  main.journal .list li .right .img {
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    transition: filter 750ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  main.journal .list li .right .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
  }

  main.journal .list li > .ui {
    height: 50px;
    position: absolute;
    display: flex;
    right: 111px;
    margin-top: -30px;
  }

  main.journal .list li > .ui ul {
    display: flex;
  }

  main.journal .list li > .ui ul li {
    position: relative;
    width: 18px;
    height: 18px;
    margin-right: 14px;
    cursor: pointer;
  }

  main.journal .list li > .ui ul li:before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #b69237;
    display: block;
    opacity: 0;
    transition: opacity 400ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  main.journal .list li > .ui ul li:after {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.15);
    display: block;
    position: relative;
    left: 5px;
    top: 5px;
  }

  main.journal .list li > .ui ul li.current:after,
  main.journal .list li > .ui ul li:hover:after {
    background-color: #b69237;
  }

  main.journal .list li > .ui ul li.current:before,
  main.journal .list li > .ui ul li:hover:before {
    opacity: 1;
  }

  main.journal .list li > .ui .bar {
    position: relative;
    top: 9px;
    margin-left: 11px;
  }

  main.journal .list li > .ui .bar .base {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: #d9d9d9;
  }

  main.journal .list li > .ui .bar .progress {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: #b69237;
    transform-origin: left;
    transform: scaleX(0);
  }

  main.journal .list li .date {
    color: #c7b9a5;
    font-size: 1.2rem;
    margin-top: 5px;
    font-weight: 600;
    letter-spacing: .04em;
  }

  main.journal .list li .tit {
    font-size: 2.4rem;
    font-weight: 600;
    margin-top: 27px;
    letter-spacing: 0.07em;
    width: 94%;
  }

  main.journal .list li .credit {
    font-size: 1.4rem;
    color: #AAAAAA;
    font-weight: 600;
    margin-top: 5px;
    line-height: 1.9;
  }

  main.journal .list li .txt {
    font-size: 1.6rem;
    margin-top: 44px;
    line-height: 1.6;
    width: 94%;
    letter-spacing: 0.07em;
  }

  main.journal .list li .txt:after {
    content: "";
    background: url(/assets/img/common/arrow3.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    width: 83px;
    height: 9px;
    position: absolute;
    margin-top: 53px;
  }

  main.journal .uis {
    width: 89vw;
    position: relative;
    height: 187px;
    margin: 87px auto 77px;
  }

  main.journal .uis .ui1 {
    display: flex;
    position: absolute;
    right: 212px;
    top: 24px;
  }

  main.journal .uis .ui1 ul {
    display: flex;
  }

  main.journal .uis .ui1 ul li {
    position: relative;
    font-size: 1.6rem;
    font-weight: 500;
    width: 18px;
    height: 18px;
    margin-left: 28px;
    text-align: center;
  }

  main.journal .uis .ui1 ul li.current:after,
  main.journal .uis .ui1 ul li:hover:after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #1d1d1d;
    display: block;
    position: relative;
  }

  main.journal .uis .ui1 ul li.current,
  main.journal .uis .ui1 ul li.three_dot {
    pointer-events: none;
  }

  main.journal .uis .ui1 .bar {
    position: relative;
    top: 9px;
    margin-left: 11px;
  }

  main.journal .uis .ui1 .bar .base {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: #d9d9d9;
  }

  main.journal .uis .ui1 .bar .progress {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: #b69237;
    transform-origin: left;
    transform: scaleX(0);
  }

  main.journal .uis .ui2 {
    display: flex;
    right: 0px;
    position: absolute;
  }

  main.journal .uis .ui2 .next {
    margin-left: 20px;
  }
}

@media screen and (max-width: 1023px) {
  main.journal {
    padding-top: 181px;
  }

  main.journal .head {
    width: 92vw;
    margin: 0 auto;
    position: relative;
  }

  main.journal .head h1 {
    font-size: 5.6rem;
    letter-spacing: -.03em;
  }

  main.journal hr {
    width: 89vw;
    border-color: #aaaaaa;
    opacity: .2;
    position: relative;
    margin: 0px auto 0;
  }

  main.journal .list {
    margin: 38px auto 0;
    width: 91vw;
  }

  main.journal .list li {
    margin-bottom: 151px;
  }

  main.journal .list li:last-child {
    margin-bottom: 0;
  }

  main.journal .list li a {
    display: flex;
    flex-direction: column-reverse;
  }

  main.journal .list li .right {
    margin-top: 12px;
  }

  main.journal .list li .right .img {
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
  }

  main.journal .list li .right .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
  }

  main.journal .list li > .ui {
    height: 50px;
    display: flex;
    top: 150px;
    left: -1px;
  }

  main.journal .list li > .ui ul {
    display: flex;
  }

  main.journal .list li > .ui ul li {
    position: relative;
    width: 18px;
    height: 18px;
    margin-right: 14px;
    cursor: pointer;
  }

  main.journal .list li > .ui ul li:before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #b69237;
    display: block;
    opacity: 0;
    transition: opacity 400ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  main.journal .list li > .ui ul li:after {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.15);
    display: block;
    position: relative;
    left: 5px;
    top: 5px;
  }

  main.journal .list li > .ui ul li.current:after {
    background-color: #b69237;
  }

  main.journal .list li > .ui ul li.current:before {
    opacity: 1;
  }

  main.journal .list li > .ui .bar {
    position: relative;
    top: 9px;
    margin-left: 11px;
  }

  main.journal .list li > .ui .bar .base {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: #d9d9d9;
  }

  main.journal .list li > .ui .bar .progress {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: #b69237;
    transform-origin: left;
    transform: scaleX(0.5);
  }

  main.journal .list li .date {
    color: #c7b9a5;
    font-size: 3.1401vw;
    margin-top: 24px;
    font-weight: 600;
    letter-spacing: .04em;
  }

  main.journal .list li .tit {
    font-size: 5.31401vw;
    font-weight: 600;
    margin-top: 6px;
    letter-spacing: 0.07em;
    width: 94%;
    line-height: 1.3;
  }

  main.journal .list li .credit {
    font-size: 1.4rem;
    color: #AAAAAA;
    margin-top: 14px;
    font-weight: 600;
    line-height: 1.6;
  }

  main.journal .list li .txt {
    font-size: 1.6rem;
    margin-top: 33px;
    line-height: 1.6;
    width: 94%;
    letter-spacing: 0.07em;
  }

  main.journal .list li .txt:after {
    content: "";
    background: url(/assets/img/common/arrow3.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    width: 83px;
    height: 9px;
    position: absolute;
    margin-top: 49px;
  }

  main.journal .uis {
    width: 92vw;
    position: relative;
    height: 215px;
    margin: 121px auto 82px;
  }

  main.journal .uis .ui1 {
    display: flex;
    position: absolute;
    right: 0;
    top: 24px;
  }

  main.journal .uis .ui1 ul {
    display: flex;
  }

  main.journal .uis .ui1 ul li {
    position: relative;
    font-size: 1.8rem;
    font-weight: 500;
    width: 18px;
    height: 18px;
    margin-left: 34px;
    text-align: center;
  }

  main.journal .uis .ui1 ul li.current {
    pointer-events: none;
  }

  main.journal .uis .ui1 ul li.current:after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #1d1d1d;
    display: block;
    position: relative;
  }

  main.journal .uis .ui1 .bar {
    position: relative;
    top: 9px;
    margin-left: 11px;
  }

  main.journal .uis .ui1 .bar .base {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: #d9d9d9;
  }

  main.journal .uis .ui1 .bar .progress {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: #b69237;
    transform-origin: left;
    transform: scaleX(0.5);
  }

  main.journal .uis .ui2 {
    display: flex;
    right: 5px;
    margin-top: 100px;
    position: absolute;
  }

  main.journal .uis .ui2 .next {
    margin-left: 10px;
  }
}
/*
z-index

*/

.night main.archives a,
.night main.archives a:visited {
  color: #fff;
}

.night main.archives .head .years_menu a.current,
.night main.archives .head .years_menu a:hover,
.night main.archives .head .years_menu a:visited.current,
.night main.archives .head .years_menu a:visited:hover {
  color: #1d1d1d;
  background-color: #fff;
}

.night main.archives .uis .ui1 ul li.current:after,
.night main.archives .uis .ui1 ul li:hover:after {
  background-color: #fff;
}

main.archives .head h1 {
  font-weight: 100;
}

@media screen and (min-width: 1024px) {
  main.archives {
    padding-top: 162px;
  }

  main.archives .head {
    width: 89vw;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: space-between;
  }

  main.archives .head h1 {
    font-size: 5.6rem;
    letter-spacing: .03em;
  }

  main.archives .head h1 .year {
    font-size: 2.0rem;
    margin-left: 14px;
  }

  main.archives .head .years_menu {
    font-size: 1.4rem;
    color: #AAAAAA;
    font-weight: 600;
    display: flex;
    margin-top: 30px;
  }

  main.archives .head .years_menu .all {
    margin-right: 27px;
  }

  main.archives .head .years_menu a,
  main.archives .head .years_menu a:visited {
    transition: color 300ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  main.archives .head .years_menu a.current,
  main.archives .head .years_menu a:hover,
  main.archives .head .years_menu a:visited.current,
  main.archives .head .years_menu a:visited:hover {
    background-color: #1d1d1d;
    border-radius: 3px;
    color: #fff;
  }

  main.archives .head .years_menu ul {
    display: flex;
    width: 38.7vw;
    flex-wrap: wrap;
    align-content: flex-start;
  }

  main.archives .head .years_menu ul li {
    margin-left: 24.5px;
  }

  main.archives hr {
    position: relative;
    width: 89vw;
    margin: 3px auto 0;
    border-color: #aaaaaa;
    opacity: .2;
    top: 0;
  }

  main.archives .list {
    display: flex;
    flex-wrap: wrap;
    margin: 60px auto 0;
    width: 89vw;
  }

  main.archives .list li {
    width: 43vw;
    display: inline-block;
    margin-bottom: 93px;
  }

  main.archives .list li:hover .img {
    filter: brightness(1.4);
  }

  main.archives .list li:hover .img img {
    transform: scale(1.05);
  }

  main.archives .list li:nth-child(odd) {
    margin-right: 3vw;
  }

  main.archives .list li .img {
    overflow: hidden;
    transition: filter 750ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  main.archives .list li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  main.archives .list li .tit {
    font-size: 2.0rem;
    margin-top: 15px;
    letter-spacing: .02em;
  }

  main.archives .list li .sub_tit {
    font-size: 1.4rem;
    margin-top: -4px;
    letter-spacing: .04em;
  }

  main.archives .list li:after {
    content: "";
    background: url(/assets/img/common/arrow2.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    width: 44px;
    height: 8px;
    position: absolute;
    margin-top: 7px;
  }

  main.archives .uis {
    width: 89vw;
    position: relative;
    height: 187px;
    margin: 87px auto 77px;
  }

  main.archives .uis .ui1 {
    display: flex;
    position: absolute;
    right: 212px;
    top: 24px;
  }

  main.archives .uis .ui1 ul {
    display: flex;
  }

  main.archives .uis .ui1 ul li {
    position: relative;
    font-size: 1.6rem;
    font-weight: 500;
    width: 18px;
    height: 18px;
    margin-left: 28px;
    text-align: center;
  }

  main.archives .uis .ui1 ul li.current:after,
  main.archives .uis .ui1 ul li:hover:after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #1d1d1d;
    display: block;
    position: relative;
  }

  main.archives .uis .ui1 ul li.current,
  main.archives .uis .ui1 ul li.three_dot {
    pointer-events: none;
  }

  main.archives .uis .ui1 .bar {
    position: relative;
    top: 9px;
    margin-left: 11px;
  }

  main.archives .uis .ui1 .bar .base {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: #d9d9d9;
  }

  main.archives .uis .ui1 .bar .progress {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: #b69237;
    transform-origin: left;
    transform: scaleX(0.5);
  }

  main.archives .uis .ui2 {
    display: flex;
    right: 0px;
    position: absolute;
  }

  main.archives .uis .ui2 .next {
    margin-left: 20px;
  }
}

@media screen and (max-width: 1023px) {
  main.archives {
    padding-top: 187px;
  }

  main.archives .head {
    width: 92vw;
    margin: 0 auto;
    position: relative;
  }

  main.archives .head h1 {
    font-size: 5.6rem;
    letter-spacing: -.01em;
    line-height: 1.1;
  }

  main.archives .head h1 span {
    display: block;
  }

  main.archives .head h1 .year {
    font-size: 1.9rem;
    margin-left: 6px;
  }

  main.archives .head .years_menu {
    font-size: 1.5rem;
    color: #AAAAAA;
    font-weight: 500;
    margin: 88px auto 0;
    width: 89vw;
  }

  main.archives .head .years_menu a,
  main.archives .head .years_menu a:visited {
    transition: color 300ms;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  main.archives .head .years_menu a.current,
  main.archives .head .years_menu a:visited.current {
    color: #fff;
    background-color: #1d1d1d;
    border-radius: 3px;
  }

  main.archives .head .years_menu ul {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2px;
    line-height: 2.2;
  }

  main.archives .head .years_menu ul li {
    margin-right: 26.5px;
  }

  main.archives hr {
    width: 89vw;
    border-color: #aaaaaa;
    opacity: .2;
    position: absolute;
    top: 310px;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
  }

  main.archives .list {
    display: flex;
    flex-wrap: wrap;
    margin: 50px auto 0;
    width: 91vw;
  }

  main.archives .list li {
    width: 43vw;
    display: inline-block;
    margin-bottom: 73px;
  }

  main.archives .list li:nth-child(odd) {
    margin-right: 5vw;
  }

  main.archives .list li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  main.archives .list li .tit {
    font-size: 4.34783vw;
    margin-top: 21px;
    letter-spacing: .02em;
    line-height: 1.3;
  }

  main.archives .list li .sub_tit {
    font-size: 1.4rem;
    margin-top: 9px;
    letter-spacing: .04em;
    line-height: 1.3;
  }

  main.archives .list li:after {
    content: "";
    background: url(/assets/img/common/arrow2.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    width: 44px;
    height: 8px;
    position: absolute;
    margin-top: 21px;
  }

  main.archives .uis {
    width: 92vw;
    position: relative;
    height: 215px;
    margin: 28px auto 78px;
  }

  main.archives .uis .ui1 {
    display: flex;
    position: absolute;
    right: 0;
    top: 24px;
  }

  main.archives .uis .ui1 ul {
    display: flex;
  }

  main.archives .uis .ui1 ul li {
    position: relative;
    font-size: 1.8rem;
    font-weight: 500;
    width: 18px;
    height: 18px;
    margin-left: 34px;
    text-align: center;
  }

  main.archives .uis .ui1 ul li.current {
    pointer-events: none;
  }

  main.archives .uis .ui1 ul li.current:after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #1d1d1d;
    display: block;
    position: relative;
  }

  main.archives .uis .ui1 .bar {
    position: relative;
    top: 9px;
    margin-left: 11px;
  }

  main.archives .uis .ui1 .bar .base {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: #d9d9d9;
  }

  main.archives .uis .ui1 .bar .progress {
    position: absolute;
    width: 110px;
    height: 1px;
    background-color: #b69237;
    transform-origin: left;
    transform: scaleX(0.5);
  }

  main.archives .uis .ui2 {
    display: flex;
    right: 5px;
    margin-top: 100px;
    position: absolute;
  }

  main.archives .uis .ui2 .next {
    margin-left: 10px;
  }
}
/*
z-index

*/

.night main.single .others ul li a {
  color: #fff;
}

@media screen and (min-width: 1024px) {
  main.single .head {
    text-align: center;
    margin-top: 185px;
  }

  main.single .head h1 {
    font-weight: 400;
  }

  main.single .head h1 .sub_tit {
    font-size: 2.4rem;
    display: block;
  }

  main.single .head h1 .tit {
    font-size: 3.2rem;
    display: block;
    padding-bottom: 10px;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-position: under;
    margin-top: 18px;
    line-height: 1.7;
    letter-spacing: .09em;
  }

  main.single .head .date {
    font-size: 1.4rem;
    color: #AAAAAA;
    margin-top: 27px;
  }

  main.single .body {
    font-size: 1.8rem;
    width: 55.4vw;
    margin: 71px auto 0;
    line-height: 1.6;
    letter-spacing: .15rem;
  }

  main.single .body:after {
    content: "";
    background: url(/assets/img/common/logo_black.png);
    background-size: cover;
    display: block;
    width: 58px;
    height: 101px;
    position: relative;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    margin-top: 120px;
    margin-left: 14px;
  }

  main.single .body a,
  main.single .body a:visited {
    color: #df5c5c;
    text-decoration: underline;
    text-underline-position: under;
  }

  main.single .body .smaller {
    font-size: 1.4rem;
  }

  main.single .body h2 {
    font-size: 3.0rem;
  }

  main.single .body h3 {
    font-size: 2.6rem;
  }

  main.single .body h4 {
    font-size: 2.4rem;
  }

  main.single .body h5 {
    font-size: 2.2rem;
  }

  main.single .body .bold {
    font-weight: 900;
  }

  main.single .body hr {
    border: 1px solid #e2e2e2;
    margin-top: 30px;
  }

  main.single .body div,
  main.single .body p {
    margin-top: 52px;
  }

  main.single .body .box {
    background: #eeeeee;
    padding: 27px 33px;
    color: #1d1d1d;
  }

  main.single .body .img {
    margin: 0;
  }

  main.single .body .img img {
    margin-top: 63px;
    width: 100%;
  }

  main.single .body .cap {
    font-size: 1.4rem;
    color: #a7a7a7;
    margin-top: 13px;
  }

  main.single .body .vimeo,
  main.single .body .youtube,
  main.single .body .map {
    padding: 56.25% 0 0 0;
    position: relative;
    margin-top: 63px;
  }

  main.single .body .vimeo iframe,
  main.single .body .youtube iframe,
  main.single .body .map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  main.single .photos {
    width: 89vw;
    margin: 78px auto 0;
  }

  main.single .photos ul {
    position: relative;
  }

  main.single .photos ul li img {
    width: 100%;
  }

  main.single .others {
    margin: 85px auto 0;
    width: 79vw;
  }

  main.single .others h2 {
    font-size: 3.4rem;
    font-weight: 400;
    padding-bottom: 15px;
    border-bottom: 1px solid #e2e2e2;
  }

  main.single .others ul {
    margin-bottom: 187px;
  }

  main.single .others ul li {
    border-bottom: 1px solid #e2e2e2;
  }

  main.single .others ul li a {
    display: flex;
    padding: 19px 0 8px;
  }

  main.single .others ul li .date {
    font-size: 1.2rem;
    color: #c7b9a5;
    width: 13.7vw;
  }

  main.single .others ul li .cate {
    font-size: 1.2rem;
    width: 4vw;
  }

  main.single .others ul li .txt {
    font-size: 1.6rem;
    position: relative;
    top: -6px;
  }
}

@media screen and (max-width: 1023px) {
  main.single .head {
    text-align: center;
    margin-top: 202px;
  }

  main.single .head h1 {
    font-weight: 400;
    width: 91vw;
    margin: 0 auto;
  }

  main.single .head h1 .sub_tit {
    font-size: 2.5rem;
    display: block;
  }

  main.single .head h1 .tit {
    font-size: 2.5rem;
    display: block;
    padding-bottom: 10px;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-position: under;
    margin-top: 18px;
    line-height: 1.7;
    letter-spacing: .09em;
  }

  main.single .head .date {
    font-size: 1.4rem;
    color: #AAAAAA;
    margin-top: 27px;
  }

  main.single .body {
    font-size: 1.6rem;
    width: 91vw;
    margin: 42px auto 0;
    line-height: 1.8;
    letter-spacing: .15rem;
  }

  main.single .body:after {
    content: "";
    background: url(/assets/img/common/logo_black.png);
    background-size: cover;
    display: block;
    width: 58px;
    height: 101px;
    position: relative;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    margin-top: 120px;
    margin-left: 14px;
  }

  main.single .body a,
  main.single .body a:visited {
    color: #df5c5c;
    text-decoration: underline;
    text-underline-position: under;
  }

  main.single .body .smaller {
    font-size: 1.4rem;
  }

  main.single .body h2 {
    font-size: 3.0rem;
  }

  main.single .body h3 {
    font-size: 2.6rem;
  }

  main.single .body h4 {
    font-size: 2.4rem;
  }

  main.single .body h5 {
    font-size: 2.2rem;
  }

  main.single .body .bold {
    font-weight: 900;
  }

  main.single .body hr {
    border: 1px solid #e2e2e2;
    margin-top: 30px;
  }

  main.single .body div,
  main.single .body p {
    margin-top: 42px;
  }

  main.single .body .box {
    background: #eeeeee;
    padding: 27px 33px;
    color: #1d1d1d;
  }

  main.single .body .img {
    margin: 0;
  }

  main.single .body .img img {
    margin-top: 63px;
    width: 100%;
  }

  main.single .body .cap {
    font-size: 1.4rem;
    color: #a7a7a7;
    margin-top: 13px;
  }

  main.single .body .vimeo,
  main.single .body .youtube,
  main.single .body .map {
    padding: 56.25% 0 0 0;
    position: relative;
    margin-top: 63px;
  }

  main.single .body .vimeo iframe,
  main.single .body .youtube iframe,
  main.single .body .map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  main.single .photos {
    width: 90vw;
    margin: 71px auto 0;
  }

  main.single .photos ul li {
    margin-bottom: 21px;
  }

  main.single .photos ul li img {
    width: 100%;
  }

  main.single .others {
    margin: 85px auto 0;
    width: 79vw;
  }

  main.single .others h2 {
    font-size: 3.4rem;
    font-weight: 400;
    padding-bottom: 15px;
    border-bottom: 1px solid #e2e2e2;
  }

  main.single .others ul {
    margin-bottom: 187px;
  }

  main.single .others ul li {
    border-bottom: 1px solid #e2e2e2;
  }

  main.single .others ul li a {
    display: block;
    padding: 19px 0 8px;
  }

  main.single .others ul li .date {
    font-size: 1.2rem;
    color: #c7b9a5;
    width: 13.7vw;
  }

  main.single .others ul li .cate {
    font-size: 1.2rem;
    width: 4vw;
  }

  main.single .others ul li .txt {
    font-size: 1.6rem;
    position: relative;
    top: -6px;
  }
}