@charset "utf-8";

/*
==============
top.css
==============
*/

/* -----------------
■ 全体
------------------- */
body {
  overflow: hidden;
}

/* -----------------
■ ヘッダー
------------------- */
.header {
  top: 50%;
  transform: translateY(-50%);
  transition: top 0.6s, background-color 0.6s, transform 0.6s;
  background-color: transparent;
}

/* start */
.start .header {
  top: 0;
  transform: translateY(0);
  background-color: #fff;
}

/* ハンバーガー */
.hamburger {
  opacity: 0;
  transition-delay: 0.6s;
}

.start .hamburger {
  opacity: 1;
}

/* -----------------
■ ローディング
------------------- */
.loadingWrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9;
  background-color: #fff;
}

.loadingWrapper .loadingBox {
  position: absolute;
  top: 54.2%;
  left: 50%;
  font-size: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.6s;
  transition-delay: 0.6s;
}

.loadingWrapper .loadingBox span {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 11px;
  border-radius: 50%;
  background-color: #eee;
}

.loadingWrapper .loadingBox .dot1 {
  animation: loader1 1s ease infinite normal;
}

.loadingWrapper .loadingBox .dot2 {
  animation: loader2 1s ease infinite normal;
}

.loadingWrapper .loadingBox .dot3 {
  animation: loader3 1s ease infinite normal;
}

.loadingWrapper .loadingBox .dot4 {
  animation: loader4 1s ease infinite normal;
}

.loadingWrapper .loadingBox .dot5 {
  animation: loader5 1s ease infinite normal;
}

@keyframes loader1 {
  0% {
    background-color: #eee;
  }
  10% {
    background-color: #ccc;
  }
  80% {
    background-color: #ccc;
  }
  90% {
    background-color: #eee;
  }
  100% {
    background-color: #eee;
  }
}

@keyframes loader2 {
  0% {
    background-color: #eee;
  }
  20% {
    background-color: #eee;
  }
  30% {
    background-color: #ccc;
  }
  80% {
    background-color: #ccc;
  }
  90% {
    background-color: #eee;
  }
  100% {
    background-color: #eee;
  }
}

@keyframes loader3 {
  0% {
    background-color: #eee;
  }
  30% {
    background-color: #eee;
  }
  40% {
    background-color: #ccc;
  }
  80% {
    background-color: #ccc;
  }
  90% {
    background-color: #eee;
  }
  100% {
    background-color: #eee;
  }
}

@keyframes loader4 {
  0% {
    background-color: #eee;
  }
  40% {
    background-color: #eee;
  }
  50% {
    background-color: #ccc;
  }
  80% {
    background-color: #ccc;
  }
  90% {
    background-color: #eee;
  }
  100% {
    background-color: #eee;
  }
}

@keyframes loader5 {
  0% {
    background-color: #eee;
  }
  50% {
    background-color: #eee;
  }
  60% {
    background-color: #ccc;
  }
  80% {
    background-color: #ccc;
  }
  90% {
    background-color: #eee;
  }
  100% {
    background-color: #eee;
  }
}

/* start */
.start .loadingWrapper .loadingBox {
  opacity: 0;
}

/* -----------------
■ bgVideo
------------------- */
.bgVideo,
.bgVideo .background,
.bgVideo .background-front {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.bgVideo {
  background-color: #000;
}
.bgVideo .background-front {
  background: url(/j/info/technology/tec_haptic/images/top/img_cover.png) repeat;
}

.bgVideo .background iframe {
  width: 100%;
  height: 100%;
}

.bgVideo .background,
.bgVideo .background-front {
  opacity: 0;
  transition: opacity 1.2s, transform 0.6s;
  transition-delay: 1.2s;
  transform: translateY(100%);
}

/* start */
.start .bgVideo .background,
.start .bgVideo .background-front {
  opacity: 1;
  transform: translateY(0);
}

/* -----------------
■ シーン共通
------------------- */
.fp-section {
  overflow: hidden;
}

.btnDetail {
  position: absolute;
  overflow: hidden;
  width: 0;
  text-align: right;
  transition: width 0.6s;
}

.btnDetail a {
  display: block;
  width: 310px;
  padding-right: 74px;
  color: #fff;
  font-size: 12px;
  line-height: 45px;
  transition: opacity 0.4s;
  border: 1px solid #fff;
  box-sizing: border-box;
  background: url(/j/info/technology/tec_haptic/images/top/icon_detail_arrow.svg)
    no-repeat right 35px center;
}

.btnDetail a:hover {
  opacity: 0.6;
}

.fp-completely .btnDetail {
  width: 310px;
}

.bgImg {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s;
  z-index: -1;
}

.bgImg.pageOut {
  transform: scale(1.2);
}

.section .pictureCover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/j/info/technology/tec_haptic/images/common/img_cover.png)
    repeat;
}

/* slide fade */
.fullpage-wrapper {
  width: 100% !important;
  -webkit-transform: none !important;
  transform: none !important;
  z-index: 7;
}
.fullpage-wrapper .fp-section {
  width: 100% !important;
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 0;
  -webkit-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
}
.fullpage-wrapper .fp-section.active {
  visibility: visible;
  opacity: 1;
  z-index: 1;
}
.fullpage-wrapper .fp-section .fp-slidesContainer {
  width: 100% !important;
  -webkit-transform: none !important;
  transform: none !important;
}
.fullpage-wrapper .fp-section .fp-slidesContainer .fp-slide {
  width: 100% !important;
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 0;
  -webkit-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
}
.fullpage-wrapper .fp-section .fp-slidesContainer .fp-slide.active {
  visibility: visible;
  opacity: 1;
  z-index: 1;
}

/* -----------------
■ シーン1
------------------- */
.scene1 .textWrapper {
  position: absolute;
  left: 91px;
  bottom: 82px;
  z-index: 1;
}

.scene1 .textWrapper p {
  margin-top: 40px;
  line-height: 0;
}

.scene1 .textWrapper p:first-child {
  margin-top: 0;
}

.scene1 .textWrapper p img {
  height: 40px;
}

/* start */
.start .scene1 .textWrapper p {
  opacity: 1;
  transform: translateY(0);
}

.start .scene1 .textWrapper .text1 {
  transition-delay: 1.4s;
}

.start .scene1 .textWrapper .text2 {
  transition-delay: 1.6s;
}

.start .scene1 .textWrapper .text3 {
  transition-delay: 1.8s;
}

.start .scene1 .textWrapper .text4 {
  transition-delay: 2s;
}

/* ナビ */
.navWrapper {
  position: absolute;
  top: 105px;
  right: 33px;
  color: #fff;
  text-align: right;
}

.navWrapper li {
  margin-top: 15px;
}

.navWrapper .nav1 {
  margin-top: 0;
  transition-delay: 2.2s;
}

.navWrapper .nav2 {
  transition-delay: 2.4s;
}

.navWrapper .nav3 {
  transition-delay: 2.6s;
}

.navWrapper .nav4 {
  transition-delay: 2.8s;
}

.navWrapper .nav5 {
  transition-delay: 3s;
}

.navWrapper .brnArea {
  margin-top: 60px;
  transition-delay: 3.2s;
}

.navWrapper .number {
  padding-right: 30px;
  font-size: 12px;
  line-height: 20px;
}

.navWrapper .text a {
  display: block;
  font-size: 24px;
  line-height: 40px;
  letter-spacing: 2.2px;
  cursor: pointer;
}

.navWrapper .text a span {
  padding-right: 30px;
  background: url(/j/info/technology/tec_haptic/images/top/icon_nav_arrow.svg)
    no-repeat right center;
  background-size: 14px 8px;
}

/* start */
.start .navWrapper li {
  opacity: 1;
  transform: translateY(0);
}

.start .navWrapper .brnArea {
  opacity: 1;
  transform: translateY(0);
}

/* -----------------
■ シーン2
------------------- */
.scene2 {
  text-align: center;
}

.scene2 .text1 img {
  width: 650px;
}

.scene2 .text2 {
  margin-top: 95px;
}

.scene2 .text2 img {
  width: 656px;
}

.scene2.fp-completely .text1 {
  opacity: 1;
  transform: translateY(0);
}

.scene2.fp-completely .text2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

/* -----------------
■ シーン3
------------------- */
.scene3 .number {
  color: #fff;
  font-size: 12px;
  line-height: 1;
  text-align: center;
}

.scene3 h2 {
  margin-top: 12px;
  text-align: center;
}

.scene3 h2 img {
  width: 500px;
}

.scene3 .bodyWrapper {
  position: relative;
  width: 850px;
  margin: 0 auto;
}

.scene3 .text,
.scene4 .text,
.scene5 .text,
.scene6 .text,
.scene7 .text {
  margin-top: 70px;
}

.scene3 .text {
  transition-delay: 0.2s;
}

.scene3 .text img {
  width: 400px;
}

.scene3 .btnDetail {
  left: 55%;
  bottom: 0;
  transition-delay: 0.6s;
}

.scene3.fp-completely .head {
  opacity: 1;
  transform: translateY(0);
}

.scene3.fp-completely .text {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 900px) {
.scene3 .bodyWrapper {
  width: 712px;
}
  .scene3 .text img {
    width: 332px;
  }
}

/* -----------------
■ シーン4
------------------- */
.scene4 .number {
  color: #fff;
  font-size: 12px;
  line-height: 1;
  text-align: center;
}

.scene4 .bodyWrapper {
  position: relative;
  width: 988px;
  margin: 0 auto;
}

.scene4 h2 {
  margin-top: 12px;
  text-align: center;
}

.scene4 h2 img {
  width: 700px;
}

.scene4 .text {
  text-align: right;
  transition-delay: 0.2s;
}

.scene4 .text img {
  width: 464px;
}

.scene4 .btnDetail {
  left: 142px;
  bottom: 0;
  transition-delay: 0.6s;
}

.scene4.fp-completely .head {
  opacity: 1;
  transform: translateY(0);
}

.scene4.fp-completely .text {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 1060px) {
  .scene4 .bodyWrapper {
    width: 850px;
  }
  .scene4 .text img {
    width: 420px;
  }
  .scene4 .btnDetail {
    left: 62px;
  }
}

@media screen and (max-width: 920px) {
  .scene4 .bodyWrapper {
    width: 700px;
  }
  .scene4 .text img {
    width: 400px;
  }
  .scene4 .btnDetail {
    left: 22px;
  }
  .scene4 .btnDetail a{
    width: 230px;
  }
}

/* -----------------
■ シーン5
------------------- */
.scene5 .number {
  color: #fff;
  font-size: 12px;
  line-height: 1;
  text-align: center;
}

.scene5 .bodyWrapper {
  position: relative;
  width: 960px;
  margin: 0 auto;
}

.scene5 h2 {
  margin-top: 12px;
  text-align: center;
}

.scene5 h2 img {
  width: 330px;
}

.scene5 .text {
  transition-delay: 0.2s;
}

.scene5 .text img {
  width: 480px;
}

.scene5 .btnDetail {
  left: 57%;
  bottom: 0;
  transition-delay: 0.6s;
}

.scene5.fp-completely .head {
  opacity: 1;
  transform: translateY(0);
}

.scene5.fp-completely .text {
  opacity: 1;
  transform: translateY(0);
  margin-left: -40px;
}
@media screen and (max-width: 1070px) {
  .scene5 .bodyWrapper {
    width: 100%;
  }
  .scene5.fp-completely .text {
    width: 45%;
    text-align: right;
    margin-left: 20px;
  }
  .scene5 .text img {
    width: 100%;
  }
  .scene5 .btnDetail {
    left: 57%;
  }
  .scene5 .btnDetail a{
    width: 230px;
  }
}


/* -----------------
■ シーン6
------------------- */
.scene6 .number {
  color: #fff;
  font-size: 12px;
  line-height: 1;
  text-align: center;
}

.scene6 .bodyWrapper {
  position: relative;
  width: 820px;
  margin: 0 auto;
}

.scene6 h2 {
  margin-top: 12px;
  text-align: center;
}

.scene6 h2 img {
  width: 330px;
}

.scene6 .text {
  text-align: right;
  transition-delay: 0.2s;
}

.scene6 .text img {
  width: 370px;
}

.scene6 .btnDetail {
  left: 52px;
  bottom: 0;
  transition-delay: 0.6s;
}

.scene6.fp-completely .head {
  opacity: 1;
  transform: translateY(0);
}

.scene6.fp-completely .text {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 900px) {
  .scene6 .bodyWrapper {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .scene6.fp-completely .text {
    width: 45%;
    text-align: right;
    margin-right: 20px;
  }
  .scene6 .text img {
    width: 100%;
  }
  .scene6 .btnDetail {
    left: 14%;
  }
  .scene6 .btnDetail a{
    width: 230px;
  }
}

/* -----------------
■ シーン7
------------------- */
.scene7 .number {
  color: #fff;
  font-size: 12px;
  line-height: 1;
  text-align: center;
}

.scene7 .bodyWrapper {
  position: relative;
  width: 924px;
  margin: 0 auto;
}

.scene7 h2 {
  margin-top: 12px;
  text-align: center;
}

.scene7 h2 img {
  width: 466px;
}

.scene7 .text {
  transition-delay: 0.2s;
}

.scene7 .text img {
  width: %420px;
}

.scene7 .btnDetail {
  left: 57%;
  bottom: 0;
  transition-delay: 0.6s;
}

.scene7.fp-completely .head {
  opacity: 1;
  transform: translateY(0);
}

.scene7.fp-completely .text {
  opacity: 1;
  transform: translateY(0);
}

/* -----------------
■ fixItemWrapper
------------------- */
.fixItemWrapper {
  position: absolute;
  top: 0;
  left: 0;
}

.fixItemWrapper .decoHaptic {
  position: absolute;
  top: 100vh;
  left: 20px;
  transition: top 0.6s;
  transition-delay: 1.2s;
}

.fixItemWrapper .decoHaptic img {
  width: 120px;
  height: 611px;
  opacity: 0.2;
}

/* start */
.start .fixItemWrapper .decoHaptic {
  top: 76px;
}

/* mouse */
.fixItemWrapper .iconMouse {
  position: fixed;
  bottom: -50px;
  left: 50%;
  text-align: center;
  cursor: pointer;
  transition: bottom 0.6s, transform 0.6s;
  transition-delay: 3.4s;
  transform: translate(-50%, 100px);
  z-index: 8;
}

.fixItemWrapper .iconMouse:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -24px;
  width: 1px;
  height: calc(100vh + 150px);
  opacity: 0.2;
  background-color: #fff;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.fixItemWrapper .iconMouse .iconMouseInner {
  opacity: 1;
  transition: opacity 0.4s;
}

.fixItemWrapper .iconMouse.fadeOut .iconMouseInner {
  opacity: 0;
}

.start .fixItemWrapper .iconMouse {
  bottom: 24px;
  transform: translate(-50%, 0);
}

.fixItemWrapper .iconMouse .img .wheel {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 4px;
  opacity: 0.6;
  border-radius: 50%;
  background-color: #000;
  transform: translateX(-50%);
  animation: mouseWheel 1.6s linear infinite normal;
}

@keyframes mouseWheel {
  0% {
    top: 6px;
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  30% {
    opacity: 1;
  }
  60% {
    top: 20px;
    opacity: 0;
  }
  100% {
    top: 20px;
    opacity: 0;
  }
}

.fixItemWrapper .iconMouse .img img {
  width: 16px;
  height: 28px;
}

.fixItemWrapper .iconMouse p {
  margin-top: 6px;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.6s;
  transition-delay: 3.2s;
  letter-spacing: 1.8px;
}

.start .fixItemWrapper .iconMouse p {
  opacity: 1;
}

/* -----------------
■ SP
------------------- */
@media screen and (max-width: 767px) {
  /* -----------------
■ SP ローディング
------------------- */
  .loadingWrapper .loadingBox {
    top: 56.2%;
  }

  /* -----------------
■ SP bgVideo
------------------- */
  .bgVideo .background-front {
    background-size: 6px auto;
  }

  /* -----------------
■ シーン共通
------------------- */
  .btnDetail {
    position: static;
  }

  .btnDetail a {
    width: 100%;
  }
  .scene4 .btnDetail a {
    width: 100%;
  }

  .fp-completely .btnDetail {
    width: 100%;
    margin-top: 8.5%;
  }

  .section .pictureCover {
    background-size: 6px auto;
  }

  /* -----------------
■ SP シーン1
------------------- */
  .scene1 .textWrapper {
    position: static;
    margin-left: 6.6666%;
  }

  .scene1 .textWrapper p {
    margin-top: 23px;
  }

  .scene1 .textWrapper p img {
    height: 25px;
  }

  /* ナビ */
  .navWrapper {
    position: static;
    margin-top: 20px;
    margin-left: 6.6666%;
    text-align: left;
  }

  .navWrapper li {
    margin-top: 12px;
  }

  .navWrapper .number {
    font-size: 10px;
    line-height: 16px;
  }

  .navWrapper .text a {
    font-size: 12px;
    line-height: 20px;
  }

  .navWrapper .text a span {
    padding-right: 16px;
    background-size: 7px 4px;
  }
  .navWrapper .brnArea {
    margin-top: 30px;
  }
  .navWrapper .brnArea img {
    width: 87%;
    height: auto;
  }

  /* -----------------
■ SP シーン2
------------------- */
  .scene2 {
    text-align: left;
  }

  .scene2 .fp-tableCell {
    padding: 0 7.46666%;
  }

  .scene2 .text1 img {
    width: 95.92476%;
  }

  .scene2 .text2 {
    margin-top: 57px;
  }

  .scene2 .text2 img {
    width: 97.80564%;
  }

  /* -----------------
■ SP シーン3
------------------- */
  .scene3 {
    background: url(/j/info/technology/tec_haptic/images/top/bg_scene3_sp.jpg)
      no-repeat;
    background-size: cover;
  }

  .scene3 .fp-tableCell {
    padding: 0 7.46666%;
  }

  .scene3 .number {
    font-size: 10px;
    text-align: left;
  }

  .scene3 h2 {
    text-align: left;
  }

  .scene3 h2 img {
    width: 64%;
  }

  .scene3 .bodyWrapper {
    width: auto;
  }

  .scene3 .text,
  .scene4 .text,
  .scene5 .text,
  .scene6 .text,
  .scene7 .text {
    margin-top: 0;
  }

  .scene3 .text {
    margin-top: 10%;
    text-align: right;
  }

  .scene3 .text img {
    width: 70%;
  }

  /* -----------------
■ SP シーン4
------------------- */
  .scene4 {
    background: url(/j/info/technology/tec_haptic/images/top/bg_scene4_sp.jpg)
      no-repeat;
    background-size: cover;
  }

  .scene4 .fp-tableCell {
    padding: 0 7.46666%;
  }

  .scene4 .number {
    font-size: 10px;
    text-align: left;
  }

  .scene4 h2 {
    text-align: left;
  }

  .scene4 h2 img {
    width: 90%;
  }

  .scene4 .bodyWrapper {
    width: auto;
    margin-top: 10.5%;
  }

  .scene4 .text {
    text-align: left;
  }

  .scene4 .text img {
    width: 78%;
  }

  /* -----------------
■ SP シーン5
------------------- */
  .scene5 {
    background: url(/j/info/technology/tec_haptic/images/top/bg_scene5_sp.jpg)
      no-repeat;
    background-size: cover;
  }

  .scene5 .fp-tableCell {
    padding: 0 7.46666%;
  }

  .scene5 .number {
    font-size: 10px;
    text-align: left;
  }

  .scene5 h2 {
    text-align: left;
  }

  .scene5 h2 img {
    width: 46%;
  }

  .scene5 .bodyWrapper {
    width: auto;
    margin-top: 10.5%;
  }

  .scene5 .text {
    text-align: right;
  }

  .scene5.fp-completely .text {
    width: 100%;
    margin-left: 0;
  }

  .scene5 .text img {
    width: 88%;
  }

  .scene5 .btnDetail a {
      width: 100%;
  }

  /* -----------------
■ SP シーン6
------------------- */
  .scene6 {
    background: url(/j/info/technology/tec_haptic/images/top/bg_scene6_sp.jpg)
      no-repeat;
    background-size: cover;
  }

  .scene6 .fp-tableCell {
    padding: 0 7.46666%;
  }

  .scene6 .number {
    font-size: 10px;
    text-align: left;
  }

  .scene6 h2 {
    text-align: left;
  }

  .scene6 h2 img {
    width: 48%;
  }

  .scene6 .bodyWrapper {
    width: auto;
    margin-top: 10.5%;
    display: block;
  }

  .scene6 .text {
    text-align: left;
  }
  .scene6.fp-completely .text {
    width: auto;
    margin-right: 0;
    text-align: left;
  }

  .scene6 .text img {
    width: 66%;
  }

  .scene6 .btnDetail a {
      width: 100%;
  }

  /* -----------------
■ SP シーン7
------------------- */
  .scene7 {
    background: url(/j/info/technology/tec_haptic/images/top/bg_scene7_sp.jpg)
      no-repeat;
    background-size: cover;
  }

  .scene7 .fp-tableCell {
    padding: 0 7.46666%;
  }

  .scene7 .number {
    font-size: 10px;
    text-align: left;
  }

  .scene7 h2 {
    text-align: left;
  }

  .scene7 h2 img {
    width: 68%;
  }

  .scene7 .bodyWrapper {
    width: auto;
    margin-top: 10.5%;
  }

  .scene7 .text {
    text-align: right;
  }

  .scene7 .text img {
    width: 80%;
  }

  /* -----------------
■ SP fixItemWrapper
------------------- */
  .fixItemWrapper .decoHaptic {
    left: 2px;
  }

  .fixItemWrapper .decoHaptic img {
    width: 100px;
  }

  .fixItemWrapper .iconMouse .iconMouseInner {
    position: absolute;
    right: 8px;
    bottom: 0;
    width: 15px;
  }

  .fixItemWrapper .iconMouse p {
    letter-spacing: 1.8px;
    display: block;
    transform: rotate(90deg);
    margin-top: 0px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .fixItemWrapper .iconMouse .img {
    margin-top: 46px;
    opacity: 0;
  }

  .fixItemWrapper .iconMouse .img img {
    display: none;
  }
  .fixItemWrapper .iconMouse .img .spBar {
    display: block;
    width: 1px;
    height: 52px;
    background: #fff;
    margin: 0 auto;
  }

  /* start */
  .fixItemWrapper .iconMouse {
    bottom: -50px;
  }

  .start .fixItemWrapper .iconMouse,
  .start.cookieOn .fixItemWrapper .iconMouse {
    right: 0;
    bottom: 0px;
    width: 100%;
  }

  .start .fixItemWrapper .decoHaptic {
    top: 44px;
  }

  .start .fixItemWrapper .iconMouse .img {
    animation: scrollArrow 2s ease infinite normal;
    animation-delay: 3.4s;
  }

  @keyframes scrollArrow {
    0% {
      opacity: 0;
      transform: translateY(0);
    }
    30% {
      opacity: 1;
      transform: translateY(0);
    }
    90% {
      opacity: 1;
      transform: translateY(50px);
    }
    100% {
      transform: translateY(50px);
      opacity: 0;
    }
  }

  /* -----------------
■ sp end
------------------- */
}
