@charset "utf-8";

/* 00.USUAL
--------------------------------------------------- */
.content_inner {
  position: relative;
  width: 100%;
  padding: 0 1em;
  margin: 0 auto;
  z-index: 10;

  @media screen and (min-width: 768px) {
    width: 92%;
  }

  @media screen and (min-width: 1024px) {
    max-width: 1200px;
    margin: 0 auto;
  }
}

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

.flx_box {
  display: block;

  @media screen and (min-width: 1024px) {
    display: flex;
    align-items: center;

    .flx_item {
      width: calc(100% / 2 - 1.6em);
    }
  }

  .flx_item:nth-of-type(1) {
    @media screen and (min-width: 1024px) {
      margin: 0 2em 0 0;
    }
  }
}

.sp_block {
  display: block;

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

.pc_block {
  display: none;

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

.txt {
  font-size: clamp(16px, 1.8vw, 18px);
}

.note {
  font-size: clamp(12px, 2vw, 14px);
}

.notice {
  text-align: center;
  font-size: clamp(16px, 2vw, 26px);
  margin: 2em 0;
}

.btn {
  display: block;
  text-align: center;
  margin: 3em auto;
  a {
    position: relative;
    display: inline-bock;
    font-size: clamp(16px, 1.8vw, 20px);
    font-weight: 700;
    background: linear-gradient(
      120deg,
      #f2972c 0%,
      #e95548 10%,
      #e9639e 30%,
      #8b4897 50%,
      #e9639e 80%,
      #e95548 90%,
      #f2972c 100%
    );
    background-size: 200%;
    background-position: 0% 50%;
    color: #fff;
    border-radius: 50px;
    padding: 1em 3em;
    transition: all 0.4s ease;

    &:hover {
      text-decoration: none;
      background-position: 100% 200%;
    }
  }
}

/* 01.MAINVISUAL
--------------------------------------------------- */
#mv {
  text-align: center;
  color: #fff;

  &::before {
    position: absolute;
    content: "";
    background: url(../img/bg_figure01.png) center / contain no-repeat;
    width: 30%;
    height: 30%;
    left: -73px;
    top: 45%;

    @media screen and (min-width: 1024px) {
      width: 34%;
      height: 34%;
      left: -100px;
      top: 34%;
    }
  }

  div.mvInner {
    width: 80%;
    margin: 0 auto;

    h1 {
      font-size: clamp(20px, 1.8vw, 30px);
      margin: 1em auto;

      span {
        display: block;
        margin: 1em 0;
      }

      img {
        display: block;
        width: 100%;
        max-width: 960px;
        margin: 0 auto;
      }
    }
  }

  .mv_bg {
    position: relative;
    background: url("../img/mv_bg.png") center / cover no-repeat;
    background-position-x: 55%;
  }

  .mv_box {
    position: relative;

    &::before {
      position: absolute;
      content: "";
      background: url(../img/livedamwao_txt.svg) center / contain no-repeat;
      left: 0;
      top: 20px;
      width: 100%;
      height: 33%;

      @media screen and (min-width: 1024px) {
        top: 44px;
        height: 40%;
      }
    }

    .machine_img {
      position: relative;
      width: 100%;
      bottom: -10px;
      padding-top: 5em;
      z-index: 10;

      @media screen and (min-width: 725px) {
        bottom: -30px;
      }

      @media screen and (min-width: 940px) {
        max-width: 900px;
        margin: 0 auto;
      }

      @media screen and (min-width: 1024px) {
        bottom: -100px;
      }

      &::before {
        position: absolute;
        content: "";
        background: url(../img/figure_02.png) center / contain no-repeat;
        width: 40%;
        height: 40%;
        right: 0;
        bottom: -77px;
        z-index: 12;

        @media screen and (min-width: 1024px) {
          width: 45%;
          height: 45%;
          right: -155px;
          bottom: -30px;
        }
      }

      &::after {
        position: absolute;
        content: "";
        background: url(../img/figure_01.png) center / contain no-repeat;
        left: 0;
        bottom: -40px;
        width: 25%;
        height: 25%;

        @media screen and (min-width: 1024px) {
          top: inherit;
          left: -14%;
          bottom: -1%;
        }
      }
    }
  }
}

/* 01.btn
--------------------------------------------------- */
.btn_box {
  max-width: 900px;
  text-align: center;
  margin: 1em auto 4em;

  a {
    color: #fff;
    max-width: 400px;
    margin: 0 auto;
    display: block;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    transition: all 0.5s ease;

    &:hover {
      text-decoration: none;
    }

    @media screen and (min-width: 1024px) {
      width: 400px;
    }
  }
}

.btnShoplist {
  margin-bottom: 1em;

  @media screen and (min-width: 1024px) {
    margin-bottom: 0;
    margin-right: 2em;
  }
}
.btnShoplist a {
  font-size: 1.2em;
  font-weight: 600;
  position: relative;
  font-weight: 800;
  padding: 0.4em 0;
  background: #000;
  z-index: 0;
  transition: all 0.6s ease;
}
.btnShoplist a::before,
.btnShoplist a::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100px;
}
.btnShoplist a::before {
  background: linear-gradient(120deg, #f2972c 0%, #e95548 17%, #e9639e 50%, #8b4897 100%);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.6s ease;
}

.btnShoplist a:hover {
  background: transparent;

  &::before {
    opacity: 1;
  }
}

.exLink a {
  font-size: 1.2em;
  font-weight: 600;
  color: #000;
  border: 1px solid #000;
  background: #fff;
  padding: 0.4em 0;
  transition: all 0.6s ease;
}

.exLink a:hover {
  background-color: #000;
  color: #fff;
  border: 1px solid #fff;
}

/* .content_01
--------------------------------------------------- */
#content_01 {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #d8f8ff 0%, #fff8dc 50%, #ffddf7 100%);
  color: #000;
  padding: 8em 0 5%;

  @media screen and (min-width: 1024px) {
    padding: 12em 0 5%;
  }

  figure {
    text-align: center;
  }

  .note {
    text-align: center;
  }

  .ttl_main {
    position: relative;
    font-size: clamp(20px, 2vw, 26px);
    margin: 2em 0 1.4em;

    span {
      display: block;
      font-size: clamp(16px, 2vw, 24px);
    }

    &::before {
      position: absolute;
      content: "";
      background: linear-gradient(90deg, #eb6372 0%, #f3c727 50%, #62c4d5 80%, #8d7ab5 100%);
      width: 100%;
      height: 5px;
      bottom: -15px;
      left: 0;
    }
  }

  .big_txt {
    font-size: clamp(18px, 4vw, 44px);
    font-weight: 900;
    text-align: center;
  }

  .flx_box {
    align-items: center;
    justify-content: center;

    .item02 {
      margin-bottom: 2em;
      @media screen and (min-width: 1024px) {
        margin-bottom: 92px;
      }

      @media screen and (min-width: 1080px) {
        margin-bottom: 102px;
      }

      @media screen and (min-width: 1150px) {
        margin-bottom: 145px;
      }

      @media screen and (min-width: 1180px) {
        margin-bottom: 117px;
      }

      @media screen and (min-width: 1255px) {
        margin-bottom: 127px;
      }

      @media screen and (min-width: 1400px) {
        margin-bottom: 132px;
      }

      .txt {
        margin-bottom: 2em;
      }
    }
  }
}

section#miruhaco h2 span {
  display: block;
  font-size: 75%;
}

section#miruhaco p {
  color: #fff;
}

/* 04.SHOPLIST
--------------------------------------------------- */
section#shop_list {
  padding: 7% 0;
}
section#shop_list h2 {
  span {
    display: inline-block;
    background: linear-gradient(120deg, #f2972c 0%, #e95548 17%, #e9639e 50%, #8b4897 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  font-size: 48px;
  text-align: center;
  margin: 0 0 0.5em;
}
section#shop_list h3 {
  font-weight: bold;
  text-align: center;
  margin: 1em 0 0.8em;
}
section#shop_list h3.fs25 {
  color: #0096b4;
}
section#shop_list ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
section#shop_list li {
}
section#shop_list li:last-child {
  border-bottom: none;
}
section#shop_list a {
  display: block;
  text-decoration: none;
}
section#shop_list .b3s_ai {
  position: relative;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(120deg, #f2972c 0%, #e95548 10%, #e9639e 30%, #8b4897 50%, #e9639e 80%, #e95548 90%, #f2972c 100%)
      border-box;
  border: 3px solid transparent;
  border-radius: 5px;
  padding: 1em 2em;
  background-size:
    100% 100%,
    300% 300%;
  background-position:
    0 0,
    0% 50%;
  transition: background-position 0.6s ease;

  &:hover {
    background-position:
      0 0,
      100% 50%;
  }
}

.panel-group {
  margin-bottom: 0;
}
.panel-group .panel + .panel {
  margin-top: 0;
}
.panel-default > .panel-heading {
  color: #fff;
  background-color: #eb007e;
}
.panel-heading {
  cursor: pointer;
}
.panel-body {
  padding: 0 15px;
}
.accordion-toggle a:after {
  font-family: "Glyphicons Halflings";
  content: "\e113";
  float: right;
  color: inherit;
}
.accordion-toggle a.collapsed:after {
  font-family: "Glyphicons Halflings";
  content: "\e114";
  float: right;
  color: inherit;
}

/* ==============================================================
 Less than TABLET
================================================================= */
@media screen and (max-width: 959px) {
  section#mv div.mvInner {
    width: 92%;
  }

  section#shop_list div.container {
    width: auto;
  }
}

/* ==============================================================
 Less than SP-LANDSCAPE
================================================================= */
@media screen and (max-width: 559px) {
  section#mv div.mvInner {
    width: 90%;
  }
  section#mv a {
    width: 90%;
  }
  .btnShoplist a {
    font-size: 4vw;
  }
  .exLink a {
    font-size: 3vw;
  }

  section#shop_list {
    padding: 4em 0;
  }
  section#shop_list h2 {
    font-size: 9vw;
    margin-bottom: 0.2em;
  }
  section#shop_list h3 {
    font-size: 6vw;
  }
  section#shop_list a {
    font-size: 4vw;
  }
}