@charset "UTF-8";
/*--------------------
共通設定
----------------------*/
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom; }

a {
  text-decoration: none;
  color: #000; }
  a.disabled {
    pointer-events: none;
    text-decoration: none; }

ul, ol {
  list-style: none; }

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

.sp {
  display: none; }
  @media screen and (max-width: 869px) {
    .sp {
      display: block; } }

body {
  overflow-x: hidden; }

.fadein {
  opacity: 0;
  visibility: hidden;
  transform: translateY(100px);
  transition: 1.2s; }
  .fadein.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px); }

.wrapper {
  margin: 0 auto !important; }

main {
  max-width: 100%; }

.mainBox {
  margin: 0 auto !important; }

footer {
  position: relative;
  z-index: 9999; }

/*--------------------------------------------*/
.lp_wrapper {
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0;
  letter-spacing: 0.1em;
  color: #000000;
  font-size: 16px;
  text-align: center;
  font-family: "a-otf-ryumin-pr6n", serif;
  font-weight: 300;
  font-style: normal;
  overflow-x: hidden; }
  .lp_wrapper section {
    margin: 0 auto; }
  .lp_wrapper nav {
    position: fixed;
    left: 2.0em;
    bottom: 20%;
    z-index: 1002; }
    @media screen and (max-width: 1300px) {
      .lp_wrapper nav {
        display: none; } }
    .lp_wrapper nav ul li {
      margin-bottom: 1.0em; }
      .lp_wrapper nav ul li a {
        text-align: left;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 1.2em;
        padding-left: 20px; }
        .lp_wrapper nav ul li a:visited {
          color: #000; }
        .lp_wrapper nav ul li a.line {
          position: relative; }
          .lp_wrapper nav ul li a.line::before {
            position: absolute;
            content: "";
            width: 12px;
            height: 1px;
            background: #000;
            top: 50%;
            left: 0;
            transform: translateY(-50%); }
        .lp_wrapper nav ul li a p {
          font-size: 100%;
          padding-right: 1.0em;
          font-style: italic;
          font-weight: 400; }
          .lp_wrapper nav ul li a p span {
            padding-right: .2em; }
            .lp_wrapper nav ul li a p span.small {
              font-style: italic; }
        .lp_wrapper nav ul li a span.ja {
          font-family: "hiragino-mincho-pron", sans-serif;
          font-size: 80%; }
  .lp_wrapper .pc_ttl {
    position: fixed;
    right: 5%;
    bottom: 5%;
    z-index: 5; }
    .lp_wrapper .pc_ttl img {
      width: 150px; }
    @media screen and (max-width: 869px) {
      .lp_wrapper .pc_ttl {
        display: none; } }

.lp_mainBox {
  width: 100%;
  position: relative; }
  .lp_mainBox::before {
    position: fixed;
    content: "";
    background: url("../images/background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0; }
  .lp_mainBox .sidearea {
    position: fixed;
    top: 0;
    height: 100%;
    width: calc((100% - 40rem) * 0.5);
    overflow: hidden; }
    @media screen and (max-width: 869px) {
      .lp_mainBox .sidearea {
        width: calc((100% - 33.3rem) * 0.5); } }
    .lp_mainBox .sidearea.boxleft {
      left: 0; }
    .lp_mainBox .sidearea.boxright {
      right: 0; }
  .lp_mainBox .lp_header {
    position: relative;
    height: 100px; }
    .lp_mainBox .lp_header div {
      position: absolute; }
      .lp_mainBox .lp_header div.ttl {
        top: 20px;
        left: 20px;
        z-index: 3; }
        .lp_mainBox .lp_header div.ttl img {
          max-width: 130px; }
      .lp_mainBox .lp_header div.lp-brandlogo {
        top: 20px;
        right: 20px; }
  .lp_mainBox #box-content {
    position: relative;
    margin: 0 auto;
    overflow: auto;
    -ms-overflow-style: none;
    z-index: 1000; }
    .lp_mainBox #box-content #drawer {
      padding: 0;
      position: relative;
      max-width: 500px;
      margin: 0 auto;
      top: 0;
      background: #fff;
      overflow-x: hidden; }
      @media screen and (max-width: 500px) {
        .lp_mainBox #box-content #drawer {
          max-width: none; } }
      .lp_mainBox #box-content #drawer .mv {
        margin-bottom: 20%; }
      .lp_mainBox #box-content #drawer .txtbox .lp_ttl {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 50%;
        margin: 10% auto 15%; }
        .lp_mainBox #box-content #drawer .txtbox .lp_ttl h1 {
          width: 100%;
          font-weight: 300;
          font-size: 1.6em;
          text-align: right;
          margin: 0 auto; }
        .lp_mainBox #box-content #drawer .txtbox .lp_ttl p {
          width: 100%;
          font-size: 1.2em;
          text-align: left;
          margin: 0 auto;
          line-height: 2.8; }
      .lp_mainBox #box-content #drawer .txtbox div.message p {
        font-size: .9em;
        line-height: 2.0;
        margin-bottom: 3.0em; }
      .lp_mainBox #box-content #drawer .catchcopy {
        margin: 20% auto 10%;
        width: 60%; }
        @media screen and (max-width: 500px) {
          .lp_mainBox #box-content #drawer .catchcopy {
            margin: 28% auto 10%; } }
      .lp_mainBox #box-content #drawer .menu {
        margin: 10% auto 15%; }
        .lp_mainBox #box-content #drawer .menu ul {
          display: flex;
          width: 98%;
          margin: 0 auto;
          justify-content: space-around;
          align-items: flex-end; }
          .lp_mainBox #box-content #drawer .menu ul li {
            width: calc(100%/3 - 1%); }
            .lp_mainBox #box-content #drawer .menu ul li .menu_ttl {
              margin-bottom: 1.0em; }
              .lp_mainBox #box-content #drawer .menu ul li .menu_ttl a {
                font-size: 1.0em;
                line-height: 1.5; }
                .lp_mainBox #box-content #drawer .menu ul li .menu_ttl a span {
                  display: block;
                  font-size: 60%; }
            .lp_mainBox #box-content #drawer .menu ul li .anchor {
              margin-top: .8em;
              text-align: left; }
              .lp_mainBox #box-content #drawer .menu ul li .anchor a {
                font-size: .7em;
                display: block;
                line-height: 2.2; }
                .lp_mainBox #box-content #drawer .menu ul li .anchor a span {
                  font-size: 100%;
                  border-bottom: 1px solid #000; }
      .lp_mainBox #box-content #drawer .scene.work .layout_01 {
        border-top: 50px solid #B3ADB0; }
      .lp_mainBox #box-content #drawer .scene.holiday .layout_01 {
        border-top: 25px solid #000000; }
      .lp_mainBox #box-content #drawer .scene.mother .layout_03 {
        border-top: 25px solid #000000; }
      .lp_mainBox #box-content #drawer .scene div .scene_txt {
        margin: 5% auto;
        width: 90%;
        text-align: left; }
        .lp_mainBox #box-content #drawer .scene div .scene_txt h3.catch {
          font-weight: 400;
          font-size: .9em; }
        .lp_mainBox #box-content #drawer .scene div .scene_txt .flex {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          margin: 1.0em auto; }
          .lp_mainBox #box-content #drawer .scene div .scene_txt .flex p {
            font-size: 2.2em;
            font-style: italic; }
            .lp_mainBox #box-content #drawer .scene div .scene_txt .flex p img {
              max-height: 35px; }
        .lp_mainBox #box-content #drawer .scene div .scene_txt p.txt {
          font-size: .8em;
          line-height: 2.0; }
          @media screen and (max-width: 500px) {
            .lp_mainBox #box-content #drawer .scene div .scene_txt p.txt {
              line-height: 1.5; } }
      .lp_mainBox #box-content #drawer .scene div .number {
        position: relative; }
        .lp_mainBox #box-content #drawer .scene div .number p {
          position: absolute;
          font-style: italic;
          top: 1.5em;
          right: 0;
          font-size: 2.2em;
          color: #fff;
          border-bottom: 1px solid #fff;
          width: inherit;
          padding-right: .5em;
          font-weight: 400; }
          @media screen and (max-width: 500px) {
            .lp_mainBox #box-content #drawer .scene div .number p {
              top: 0.5em;
              font-size: 1.8em; } }
          .lp_mainBox #box-content #drawer .scene div .number p span {
            padding-right: .3em;
            font-size: 60%; }
        .lp_mainBox #box-content #drawer .scene div .number.left p {
          top: .5em;
          left: 0;
          right: auto;
          padding-right: 0;
          padding-left: .5em; }
      .lp_mainBox #box-content #drawer .scene div.layout_01 {
        background: #D7D6D4;
        padding-bottom: 10%; }
        .lp_mainBox #box-content #drawer .scene div.layout_01 .center {
          position: relative; }
          .lp_mainBox #box-content #drawer .scene div.layout_01 .center p {
            position: absolute;
            top: 1.0em;
            right: 0;
            font-size: 2.2em;
            font-style: italic;
            color: #fff;
            border-bottom: 1px solid #fff;
            width: inherit;
            padding-right: .5em;
            font-weight: 400; }
            .lp_mainBox #box-content #drawer .scene div.layout_01 .center p span {
              padding-right: .3em;
              font-size: 60%; }
            .lp_mainBox #box-content #drawer .scene div.layout_01 .center p.bottom {
              top: auto;
              bottom: 4.0em; }
        .lp_mainBox #box-content #drawer .scene div.layout_01 .sceneBox {
          display: flex;
          margin: 10% auto 0;
          width: 80%; }
          .lp_mainBox #box-content #drawer .scene div.layout_01 .sceneBox div.txt {
            -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
            width: 80%;
            display: flex;
            align-items: center;
            justify-content: center; }
            .lp_mainBox #box-content #drawer .scene div.layout_01 .sceneBox div.txt p {
              font-size: 1.0em;
              text-align: start;
              line-height: 2.0; }
              @media screen and (max-width: 500px) {
                .lp_mainBox #box-content #drawer .scene div.layout_01 .sceneBox div.txt p {
                  font-size: .8em; } }
              .lp_mainBox #box-content #drawer .scene div.layout_01 .sceneBox div.txt p span {
                font-size: 100%;
                display: block;
                text-align: end;
                padding-top: 2.0em; }
                .lp_mainBox #box-content #drawer .scene div.layout_01 .sceneBox div.txt p span:nth-child(2) {
                  padding-top: 4.0em; }
          .lp_mainBox #box-content #drawer .scene div.layout_01 .sceneBox.full {
            width: 98%; }
            .lp_mainBox #box-content #drawer .scene div.layout_01 .sceneBox.full .txt {
              width: 50%; }
      .lp_mainBox #box-content #drawer .scene div.item_detail {
        background: #E3E2E0;
        padding: 10% 0; }
        .lp_mainBox #box-content #drawer .scene div.item_detail ol {
          margin: 0 auto;
          display: inline-block; }
          .lp_mainBox #box-content #drawer .scene div.item_detail ol li {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            margin-bottom: 0.7em;
            width: fit-content; }
            .lp_mainBox #box-content #drawer .scene div.item_detail ol li img {
              margin-right: .5em; }
            .lp_mainBox #box-content #drawer .scene div.item_detail ol li p {
              text-align: left;
              font-size: .9em;
              margin: 0; }
        .lp_mainBox #box-content #drawer .scene div.item_detail .item {
          margin: 5% auto 0; }
          .lp_mainBox #box-content #drawer .scene div.item_detail .item img {
            margin-bottom: 5%; }
          .lp_mainBox #box-content #drawer .scene div.item_detail .item .txt {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 5% auto; }
            .lp_mainBox #box-content #drawer .scene div.item_detail .item .txt dl {
              font-size: 1.0em;
              text-align: left;
              width: 50%; }
              @media screen and (max-width: 500px) {
                .lp_mainBox #box-content #drawer .scene div.item_detail .item .txt dl {
                  width: 65%;
                  font-size: .9em; } }
              .lp_mainBox #box-content #drawer .scene div.item_detail .item .txt dl dt, .lp_mainBox #box-content #drawer .scene div.item_detail .item .txt dl dd {
                padding-left: 1.0em; }
              .lp_mainBox #box-content #drawer .scene div.item_detail .item .txt dl dt {
                font-size: 100%;
                line-height: 2.5;
                border-bottom: 1px solid #000; }
              .lp_mainBox #box-content #drawer .scene div.item_detail .item .txt dl dd {
                font-variant-position: 90%;
                color: #666;
                line-height: 2.5;
                letter-spacing: .2em; }
                .lp_mainBox #box-content #drawer .scene div.item_detail .item .txt dl dd span {
                  padding-left: 1.0em;
                  font-size: 70%; }
            .lp_mainBox #box-content #drawer .scene div.item_detail .item .txt a.buyBtn {
              width: 70px;
              height: 70px;
              border-radius: 50%;
              background-color: #fff;
              position: relative;
              margin: 0.5em; }
              .lp_mainBox #box-content #drawer .scene div.item_detail .item .txt a.buyBtn::after {
                content: "BUY";
                font-size: 1.0em;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%); }
      .lp_mainBox #box-content #drawer .scene div.layout_02 {
        background: #D7D6D4;
        padding: 1% 0 10%; }
        .lp_mainBox #box-content #drawer .scene div.layout_02 .sceneBox {
          display: flex;
          margin: 10% auto 0;
          width: 80%; }
          .lp_mainBox #box-content #drawer .scene div.layout_02 .sceneBox.full {
            width: 98%; }
            .lp_mainBox #box-content #drawer .scene div.layout_02 .sceneBox.full .txt {
              width: 65%; }
          .lp_mainBox #box-content #drawer .scene div.layout_02 .sceneBox.width {
            width: 90%; }
          .lp_mainBox #box-content #drawer .scene div.layout_02 .sceneBox div.txt {
            -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
            width: 80%;
            display: flex;
            align-items: center;
            justify-content: center; }
            .lp_mainBox #box-content #drawer .scene div.layout_02 .sceneBox div.txt.end {
              align-items: end; }
            .lp_mainBox #box-content #drawer .scene div.layout_02 .sceneBox div.txt.slim {
              width: 50%; }
            .lp_mainBox #box-content #drawer .scene div.layout_02 .sceneBox div.txt p {
              font-size: 1.0em;
              text-align: start;
              line-height: 2.0; }
              @media screen and (max-width: 500px) {
                .lp_mainBox #box-content #drawer .scene div.layout_02 .sceneBox div.txt p {
                  font-size: .8em; } }
              .lp_mainBox #box-content #drawer .scene div.layout_02 .sceneBox div.txt p span {
                font-size: 100%;
                display: block;
                padding-top: 4.0em;
                text-align: end; }
                @media screen and (max-width: 500px) {
                  .lp_mainBox #box-content #drawer .scene div.layout_02 .sceneBox div.txt p span {
                    padding-top: 2.0em; } }
                .lp_mainBox #box-content #drawer .scene div.layout_02 .sceneBox div.txt p span:nth-child(2) {
                  padding-top: 4.0em; }
      .lp_mainBox #box-content #drawer .scene div.layout_03 {
        background: #D7D6D4;
        padding-bottom: 10%; }
        .lp_mainBox #box-content #drawer .scene div.layout_03 .center {
          position: relative; }
          .lp_mainBox #box-content #drawer .scene div.layout_03 .center p {
            position: absolute;
            bottom: 4.0em;
            right: 0;
            font-size: 2.2em;
            font-style: italic;
            color: #fff;
            border-bottom: 1px solid #fff;
            width: inherit;
            padding-right: .5em;
            font-weight: 400; }
            .lp_mainBox #box-content #drawer .scene div.layout_03 .center p span {
              padding-right: .3em;
              font-size: 60%; }
        .lp_mainBox #box-content #drawer .scene div.layout_03 .sceneBox {
          display: flex;
          margin: 10% auto 0;
          width: 95%; }
          .lp_mainBox #box-content #drawer .scene div.layout_03 .sceneBox div {
            width: 100%;
            padding: 1%; }
            .lp_mainBox #box-content #drawer .scene div.layout_03 .sceneBox div.txt {
              -ms-writing-mode: tb-rl;
              writing-mode: vertical-rl;
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: flex-start; }
              .lp_mainBox #box-content #drawer .scene div.layout_03 .sceneBox div.txt p {
                font-size: 1.0em;
                text-align: start;
                line-height: 2.0;
                margin-top: 2.0em; }
                @media screen and (max-width: 500px) {
                  .lp_mainBox #box-content #drawer .scene div.layout_03 .sceneBox div.txt p {
                    font-size: .8em; } }
                .lp_mainBox #box-content #drawer .scene div.layout_03 .sceneBox div.txt p span {
                  font-size: 100%;
                  display: block;
                  text-align: center;
                  padding-top: 4.0em; }
          .lp_mainBox #box-content #drawer .scene div.layout_03 .sceneBox.left {
            margin-top: -100px; }
            @media screen and (max-width: 500px) {
              .lp_mainBox #box-content #drawer .scene div.layout_03 .sceneBox.left {
                margin-top: -55px; } }
            .lp_mainBox #box-content #drawer .scene div.layout_03 .sceneBox.left .txt {
              justify-content: flex-end; }
              .lp_mainBox #box-content #drawer .scene div.layout_03 .sceneBox.left .txt p {
                margin-top: 0; }
      .lp_mainBox #box-content #drawer .scene div.item_detail {
        background: #E3E2E0;
        padding: 10% 0; }
        .lp_mainBox #box-content #drawer .scene div.item_detail ol {
          margin: 0 auto;
          display: inline-block; }
          .lp_mainBox #box-content #drawer .scene div.item_detail ol li {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            margin-bottom: 0.7em;
            width: fit-content; }
            .lp_mainBox #box-content #drawer .scene div.item_detail ol li img {
              margin-right: .5em; }
            .lp_mainBox #box-content #drawer .scene div.item_detail ol li p {
              text-align: left;
              font-size: .9em; }
        .lp_mainBox #box-content #drawer .scene div.item_detail .item {
          margin: 5% auto 0; }
          .lp_mainBox #box-content #drawer .scene div.item_detail .item img {
            margin-bottom: 5%; }
          .lp_mainBox #box-content #drawer .scene div.item_detail .item .txt {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 5% auto; }
            .lp_mainBox #box-content #drawer .scene div.item_detail .item .txt dl {
              font-size: 1.0em;
              text-align: left;
              width: 50%; }
              @media screen and (max-width: 500px) {
                .lp_mainBox #box-content #drawer .scene div.item_detail .item .txt dl {
                  width: 65%;
                  font-size: .9em; } }
              .lp_mainBox #box-content #drawer .scene div.item_detail .item .txt dl dt, .lp_mainBox #box-content #drawer .scene div.item_detail .item .txt dl dd {
                padding-left: 1.0em; }
              .lp_mainBox #box-content #drawer .scene div.item_detail .item .txt dl dt {
                font-size: 100%;
                line-height: 2.5;
                border-bottom: 1px solid #000; }
              .lp_mainBox #box-content #drawer .scene div.item_detail .item .txt dl dd {
                font-variant-position: 90%;
                color: #666;
                line-height: 2.5;
                letter-spacing: .2em; }
                .lp_mainBox #box-content #drawer .scene div.item_detail .item .txt dl dd span {
                  padding-left: 1.0em;
                  font-size: 70%; }
            .lp_mainBox #box-content #drawer .scene div.item_detail .item .txt a.buyBtn {
              width: 70px;
              height: 70px;
              border-radius: 50%;
              background-color: #fff;
              position: relative;
              margin: 0.5em; }
              .lp_mainBox #box-content #drawer .scene div.item_detail .item .txt a.buyBtn::after {
                content: "BUY";
                font-size: 1.0em;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%); }
      .lp_mainBox #box-content #drawer .lp_footer {
        border-top: 25px solid #B3ADB0;
        background: #D7D6D4;
        padding: 10% 0;
        margin-bottom: 0 !important; }
        .lp_mainBox #box-content #drawer .lp_footer .message {
          width: 50%;
          margin: 10% auto; }
        .lp_mainBox #box-content #drawer .lp_footer .style {
          width: 90%;
          margin: 0 auto; }
          .lp_mainBox #box-content #drawer .lp_footer .style div {
            margin-bottom: 7%; }
          .lp_mainBox #box-content #drawer .lp_footer .style a {
            display: block;
            width: 90%;
            margin: 0 auto; }
        .lp_mainBox #box-content #drawer .lp_footer .ttl {
          margin: 15% auto; }
        .lp_mainBox #box-content #drawer .lp_footer .logo {
          margin: 10% auto; }
        .lp_mainBox #box-content #drawer .lp_footer .video {
          width: 90%;
          margin: 0 auto; }
          .lp_mainBox #box-content #drawer .lp_footer .video iframe.size {
            width: 100%;
            height: 100%;
            aspect-ratio: 16 / 9;
            display: block;
            margin: auto; }

/*--------------------------------
modal
---------------------------------*/
.modal-wrapper {
  z-index: 999;
  position: fixed;
  top: 60px;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 10px;
  text-align: center; }
  .modal-wrapper:not(:target) {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s; }
  .modal-wrapper:target {
    opacity: 1;
    visibility: visible;
    transition: opacity .4s, visibility .4s; }
  .modal-wrapper .modal-window {
    box-sizing: border-box;
    display: inline-block;
    z-index: 20;
    position: relative;
    width: 100%;
    max-width: 500px;
    background: #D7D6D4;
    vertical-align: middle;
    padding-bottom: 10px; }
    .modal-wrapper .modal-window .modal-content_lp {
      max-height: calc(90vh - 60px);
      overflow-y: auto;
      text-align: left; }
      .modal-wrapper .modal-window .modal-content_lp::-webkit-scrollbar {
        width: 10px; }
      .modal-wrapper .modal-window .modal-content_lp::-webkit-scrollbar-track {
        background-color: darkgrey; }
      .modal-wrapper .modal-window .modal-content_lp::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }
      .modal-wrapper .modal-window .modal-content_lp::-webkit-scrollbar {
        width: 5px; }
      .modal-wrapper .modal-window .modal-content_lp::-webkit-scrollbar-track {
        background-color: darkgrey; }
      .modal-wrapper .modal-window .modal-content_lp::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }
      .modal-wrapper .modal-window .modal-content_lp .flex {
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        flex-wrap: wrap;
        margin: 10px auto;
        width: 90%; }
        .modal-wrapper .modal-window .modal-content_lp .flex div {
          width: calc(100%/2 - 5%);
          margin-bottom: 5%; }
          .modal-wrapper .modal-window .modal-content_lp .flex div dl {
            margin: 0.5em auto;
            font-size: .9em; }
            .modal-wrapper .modal-window .modal-content_lp .flex div dl dt {
              font-size: 100%;
              margin-bottom: 0.5em; }
            .modal-wrapper .modal-window .modal-content_lp .flex div dl dd {
              font-size: 80%; }
  .modal-wrapper .modal-overlay {
    z-index: 10;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8); }
  .modal-wrapper .modal-close_lp {
    z-index: 20;
    font-size: 0.9em;
    line-height: 35px;
    text-align: center;
    text-decoration: none;
    text-indent: 0;
    background: #fff;
    padding: 0.5em 2.0em; }

/*---------------------
slide
-----------------------*/
.fnc-slider {
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  height: 100%; }

.fnc-slider *, .fnc-slider *:before, .fnc-slider *:after {
  box-sizing: border-box; }

.fnc-slider__slides {
  position: relative;
  height: 100%;
  transition: transform 1s 0.6666666667s; }

.fnc-slide {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0); }

.fnc-slide.m--before-sliding {
  z-index: 2 !important;
  transform: translate3d(100%, 0, 0); }

.fnc-slide.m--active-slide {
  z-index: 1;
  transition: transform 1s 0.6666666667s ease-in-out;
  transform: translate3d(0, 0, 0); }

.fnc-slide__inner {
  position: relative;
  height: 100%;
  background-size: cover;
  background-position: center top;
  transform: translate3d(0, 0, 0); }

.m--global-blending-active .fnc-slide__inner, .m--blend-bg-active .fnc-slide__inner {
  background-blend-mode: luminosity; }

.m--before-sliding .fnc-slide__inner {
  transform: translate3d(-100%, 0, 0); }

.m--active-slide .fnc-slide__inner {
  transition: transform 1s 0.6666666667s ease-in-out;
  transform: translate3d(0, 0, 0); }

.fnc-slide__mask {
  overflow: hidden;
  z-index: 1;
  position: absolute;
  right: 60%;
  top: 15%;
  width: 50.25vh;
  height: 67vh;
  margin-right: -90px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 6vh 0, 6vh 61vh, 44vh 61vh, 44vh 6vh, 6vh 6vh);
  transform-origin: 50% 0;
  transition-timing-function: ease-in-out; }

.m--before-sliding .fnc-slide__mask {
  transform: rotate(-10deg) translate3d(200px, 0, 0);
  opacity: 0; }

.m--active-slide .fnc-slide__mask {
  transition: transform 0.7s 1.2222222222s, opacity 0.35s 1.2222222222s;
  transform: translate3d(0, 0, 0);
  opacity: 1; }

.m--previous-slide .fnc-slide__mask {
  transition: transform 0.7s 0.3333333333s, opacity 0.35s 0.6833333333s;
  transform: rotate(10deg) translate3d(-200px, 0, 0);
  opacity: 0; }

.fnc-slide__mask-inner {
  z-index: -1;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100vh;
  margin-left: -50vw;
  margin-top: -50vh;
  background-size: cover;
  background-position: center center;
  background-blend-mode: luminosity;
  transform-origin: 50% 16.5vh;
  transition-timing-function: ease-in-out; }

.m--before-sliding .fnc-slide__mask-inner {
  transform: translateY(0) rotate(10deg) translateX(-200px) translateZ(0); }

.m--active-slide .fnc-slide__mask-inner {
  transition: transform 0.7s 1.2222222222s;
  transform: translateX(0); }

.m--previous-slide .fnc-slide__mask-inner {
  transition: transform 0.7s 0.3333333333s;
  transform: translateY(0) rotate(-10deg) translateX(200px) translateZ(0); }

.fnc-slide__content {
  z-index: 2;
  position: absolute;
  left: 40%;
  top: 40%; }

.fnc-nav {
  display: none; }

.fnc-nav__control {
  display: none; }

.demo-cont {
  overflow-x: hidden;
  position: relative;
  height: 100vh;
  perspective: 1500px;
  background: #000; }

.example-slider {
  z-index: 2;
  transform: translate3d(0, 0, 0);
  transition: transform 0.7s; }

.credits-active .example-slider {
  transform: translate3d(-400px, 0, 0) rotateY(10deg) scale(0.9); }

.example-slider .fnc-slide-1 .fnc-slide__inner, .example-slider .fnc-slide-1 .fnc-slide__mask-inner {
  background-image: url("../images/mv_01.webp"); }

.example-slider .fnc-slide-2 .fnc-slide__inner, .example-slider .fnc-slide-2 .fnc-slide__mask-inner {
  background-image: url("../images/mv_02.webp"); }

.example-slider .fnc-slide-3 .fnc-slide__inner, .example-slider .fnc-slide-3 .fnc-slide__mask-inner {
  background-image: url("../images/mv_03.webp"); }

/*---------------------------
カートボタン
----------------------------*/
.fix_btn {
  display: block;
  position: fixed;
  left: auto;
  top: auto;
  bottom: 30%;
  right: 1%;
  z-index: 2000;
  transition: 0.5s;
  opacity: 0 !important;
  transform: translateX(0) !important; }
  @media screen and (max-width: 869px) {
    .fix_btn {
      top: auto;
      bottom: 2%; } }
  .fix_btn.move_on {
    opacity: 1 !important;
    transform: translateX(0) !important;
    z-index: 2001; }
  .fix_btn a.move {
    transition: all 50ms 0s ease; }
    .fix_btn a.move img {
      display: block;
      max-width: 80px;
      border-radius: 1em; }
      @media screen and (max-width: 869px) {
        .fix_btn a.move img {
          display: block;
          max-width: 70px; } }
      @media screen and (max-width: 500px) {
        .fix_btn a.move img {
          max-width: 50px; } }