@charset "UTF-8";
@import url("//fonts.googleapis.com/css?family=Noto+Serif+JP:400&display=swap");
@import url("//fonts.googleapis.com/css?family=Noto+Serif+JP:500&display=swap");
@import url("//fonts.googleapis.com/css?family=Noto+Serif+JP:600&display=swap");
@import url("//fonts.googleapis.com/css?family=Noto+Serif+JP:700&display=swap");
/* ---------------------------------------------
  reset
--------------------------------------------- */
body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: "Noto Serif JP",serif;
}

/* 解析タグの隙間対策 */
body > img {
  display: none;
}

#lp_wrap div, #lp_wrap span, #lp_wrap iframe, #lp_wrap h1, #lp_wrap h2, #lp_wrap h3, #lp_wrap h4, #lp_wrap h5, #lp_wrap h6, #lp_wrap p, #lp_wrap address, #lp_wrap img, #lp_wrap small, #lp_wrap strong, #lp_wrap sub, #lp_wrap sup, #lp_wrap dl,
#lp_wrap dt, #lp_wrap dd, #lp_wrap ol, #lp_wrap ul, #lp_wrap form, #lp_wrap label, #lp_wrap table, #lp_wrap caption, #lp_wrap tbody, #lp_wrap tfoot, #lp_wrap thead, #lp_wrap tr, #lp_wrap th, #lp_wrap td, #lp_wrap article,
#lp_wrap aside, #lp_wrap footer, #lp_wrap header, #lp_wrap menu, #lp_wrap nav, #lp_wrap section, #lp_wrap video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 0;
  line-height: 0;
  vertical-align: baseline;
}
#lp_wrap article, #lp_wrap aside, #lp_wrap details, #lp_wrap figcaption, #lp_wrap figure,
#lp_wrap footer, #lp_wrap header, #lp_wrap menu, #lp_wrap nav, #lp_wrap section {
  display: block;
}
#lp_wrap ol, #lp_wrap ul {
  list-style: none;
}
#lp_wrap :focus {
  outline: 0;
}
#lp_wrap table {
  border-collapse: collapse;
  border-spacing: 0;
}
#lp_wrap *,
#lp_wrap *::before,
#lp_wrap *::after {
  box-sizing: border-box;
}
#lp_wrap img,
#lp_wrap video,
#lp_wrap svg {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}


/* ---------------------------------------------
  common
--------------------------------------------- */
/* スムーススクロール */
html {
  scroll-behavior: smooth;
}

#lp_wrap {
  overflow-x: hidden;
}

/* positionで配置したい要素の外側に使用 */
#lp_wrap .p_box {
  position: relative;
}

body {
  background-color: #000;
  background-image: url(../img/pc_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}


/* ---------------------------------------------
  #pcArea
--------------------------------------------- */
#lp_wrap #pcArea {
  display: flex;
  justify-content: flex-end;
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 1;
}

@media (max-width:1000px) {
  #lp_wrap #pcArea {
    display: none;
  }
}

/* pc_left */
#lp_wrap .pc_left {
  width: 280px;
  margin-left: 5%;
  margin-top: 90px;
}
#lp_wrap .pcLeft_inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#lp_wrap .pcLeft_logo {
  margin-bottom: 40px;
}

@media (max-width:1250px) {
  #lp_wrap .pc_left {
    width: 18%;
    margin-left: 3%;
  }
}

/* pc_right */
#lp_wrap .pc_right {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 503px;
  margin-right: 5%;
  padding-bottom: 80px;
}

@media (max-width:1800px) {
  #lp_wrap .pc_right {
    width: 25%;
    margin-right: 3%;
  }

}
#lp_wrap .pcRight_nav li:nth-of-type(1) {
  width: calc(150/503*100%);
}
#lp_wrap .pcRight_nav li:nth-of-type(2) {
  width: calc(382/503*100%);
}
#lp_wrap .pcRight_nav li:nth-of-type(3) {
  width: calc(342/503*100%);
}
#lp_wrap .pcRight_nav li:nth-of-type(4) {
  width: calc(455/503*100%);
}
#lp_wrap .pcRight_nav li:nth-of-type(5) {
  width: calc(503/503*100%);
}
#lp_wrap .pcRight_nav li:nth-of-type(6) {
  width: calc(123/503*100%);
}


@media (max-width:1250px) {
  #lp_wrap .pc_right {
    width: 20%;
    margin-right: 3%;
  }
}

/* pc_right Navi */
#lp_wrap .pcRight_nav {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
}
#lp_wrap .pcRight_nav .nav_item {
  display: inline-block;
}
#lp_wrap .pcRight_nav .nav_item:not(:last-of-type) {
  margin-bottom: 50px;
}
#lp_wrap .pcRight_nav .nav_item a {
  position: relative;
   opacity: 0.5;
  transition: all ease 0.2s;
  font-size: 20px;
  line-height: 1.5;
  color: #000;
  text-decoration: none;
}

/* アクティブメニュー */
#lp_wrap .pcRight_nav .nav_item .current {
  opacity: 1;
}


/* ---------------------------------------------
  #main
--------------------------------------------- */
#lp_wrap #main {
  position: relative;
  width: min(100%, 500px);
  margin: 0 auto;
  z-index: 2;
}

@media (max-width:1000px) {

}
@media (max-width:750px) {
  #lp_wrap #main {
    width: 100%!important;
  }
}
#lp_wrap #main .p-box {
  position: relative;

}
#lp_wrap #main .anime {
  position: absolute;
  z-index:2;
  top:0;
}

/*============================
#top
============================*/
#lp_wrap #main #top {
}
#lp_wrap #main #top .fv-text01 {
  width: calc(55/750*100%);
  top: calc(152/1180*100%);
  right:calc(61/750*100%);
}
#lp_wrap #main #top .fv-text02 {
  width: calc(55/750*100%);
  top: calc(327/1180*100%);
  right:calc(132/750*100%);
}

/*============================
#about
============================*/
#lp_wrap #main #about {
}
#lp_wrap #main #about {
}
#lp_wrap #main #about .anime {
  left:calc(80/750*100%);
}

#lp_wrap #main #about .about-text01.anime {
  width: calc(495/750*100%);
  top: calc(103/751*100%);
}
#lp_wrap #main #about .about-text02.anime {
  width: calc(313/750*100%);
  top: calc(114/751*100%);
}
#lp_wrap #main #about .about-text03.anime {
  width: calc(352/750*100%);
  top: calc(413/751*100%);
}
#lp_wrap #main #about .about-text04.anime {
  width: calc(342/750*100%);
  top: calc(551/751*100%);
}

/*============================
#point01
============================*/

#lp_wrap #main #point01 .anime {
}
#lp_wrap #main #point01 .point01-text01.anime {
  width: calc(494/750*100%);
  left: calc(137/750*100%);
  top: calc(105/809*100%);
}
#lp_wrap #main #point01 .point01-text02.anime {
  width: calc(494/750*100%);
  left: calc(120/750*100%);
  top: calc(281/809*100%);
}
#lp_wrap #main #point01 .point01-text03.anime {
  width: calc(509/750*100%);
  left: calc(122/750*100%);
  top: calc(473/809*100%);
}
#lp_wrap #main #point01 .point01-text04.anime {
  width: calc(581/750*100%);
  left: calc(80/750*100%);
  top: calc(713/809*100%);
}

/*============================
#point02
============================*/

#lp_wrap #main #point02 .point02-text01.anime {
  width: calc(447/750*100%);
  left: calc(160/750*100%);
  top: calc(190/348*100%);
}
#lp_wrap #main #point02 .point02-text02.anime {
  width: calc(551/750*100%);
  left: calc(101/750*100%);
  top: calc(20/789*100%);
}
#lp_wrap #main #point02 .point02-text03.anime {
  width: calc(587/750*100%);
  left: calc(80/750*100%);
  top: calc(211/789*100%);
}
#lp_wrap #main #point02 .point02-text04.anime {
  width: calc(271/750*100%);
  left: calc(240/750*100%);
  top: calc(544/789*100%);
}
#lp_wrap #main #point02 .point02-text05.anime {
  width: calc(484/750*100%);
  left: calc(130/750*100%);
  top: calc(640/789*100%);
}

/*============================
#detail
============================*/

#lp_wrap #main #detail .detail-text01.anime {
  width: calc(521/750*100%);
  left: calc(122/750*100%);
  top: calc(98/1158*100%);
}
#lp_wrap #main #detail .detail-text02.anime {
  width: calc(462/750*100%);
  left: calc(144/750*100%);
  top: calc(274/1158*100%);
}
#lp_wrap #main #detail .detail-text03.anime {
  width: calc(570/750*100%);
  left: calc(84/750*100%);
  top: calc(580/1158*100%);
}
#lp_wrap #main #detail .detail-text04.anime {
  width: calc(356/750*100%);
  left: calc(198/750*100%);
  top: calc(751/1158*100%);
}
#lp_wrap #main #detail .detail-text05.anime {
  width: calc(568/750*100%);
  left: calc(82/750*100%);
  top: calc(943/1158*100%);
}
#lp_wrap #main #detail .detail-line {
  position: absolute;
  width: calc(18/750*100%);
  left: calc(367/750*100%);
  top: calc(1112/1158*100%);
  z-index:2;
}

/*============================
#close
============================*/
#lp_wrap #main #close {
}
#lp_wrap #main #close {
}
#lp_wrap #main #close h2.anime {
  width: calc(469/750*100%);
  left: calc(140/750*100%);
  top: calc(154/1094*100%);
}

/*============================
footer
============================*/

#lp_wrap #main footer {
  background-color: #c9b166;
  padding:calc(55/750*100%) 0;
}

#lp_wrap #main footer ul {
  display: flex;
  justify-content: center;
}
#lp_wrap #main footer ul li a {
  color: #000;
  font-size: min(calc(22/750*100vw),22px);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
#lp_wrap #main footer ul li:nth-child(1) {
  margin-right: 8%;
  position: relative;
}
#lp_wrap #main footer ul li:nth-child(1):after {
  content:"";
  display: block;
  width: 1px;
  height: min(calc(22/750*100vw),22px);
  background-color: #000;
  position: absolute;
  right:-32%;
  top:0;
  z-index:2;
}

@media (min-width:750px) {
  #lp_wrap #main footer ul li a {
    font-size: 16px;
  } 
  #lp_wrap #main footer ul li:nth-child(1):after {
    height: 16px;
}