@charset "UTF-8";
/* Scss Document */
/* INDEX */
.index .top_concept {
  overflow: hidden; }
  .index .top_concept .jelly {
    position: absolute;
    z-index: -1;
    opacity: 0.2;
    bottom: 0;
    right: 3vw;
    width: 40vmin; }
  .index .top_concept .flexBox dt {
    flex-basis: 35%; }
    .index .top_concept .flexBox dt .imgWrap {
      position: relative; }
      .index .top_concept .flexBox dt .imgWrap .yui {
        position: relative;
        z-index: 0;
        width: 30vw;
        height: 30vw;
        min-width: 30rem;
        min-height: 30rem;
        border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
        background-color: whitesmoke; }
      .index .top_concept .flexBox dt .imgWrap .logo {
        width: 25vw;
        max-width: 15rem;
        position: absolute;
        top: 15%;
        z-index: 1;
        opacity: 0.5; }
      .index .top_concept .flexBox dt .imgWrap .box {
        width: 30vmax;
        height: 30vmax;
        max-width: 30rem;
        max-height: 30rem;
        border: 1px dashed rgba(255, 255, 255, 0.4);
        position: relative; }
        .index .top_concept .flexBox dt .imgWrap .box::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          border-radius: 50%;
          border: 1px dashed rgba(255, 255, 255, 0.4);
          transform: scale(1.42); }
      .index .top_concept .flexBox dt .imgWrap .spin-container {
        width: 100%;
        height: 100%;
        animation: spin 12s linear infinite;
        position: relative; }
      .index .top_concept .flexBox dt .imgWrap .shape {
        width: 100%;
        height: 100%;
        transition: border-radius 1s ease-out;
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        animation: morph 8s ease-in-out infinite both alternate;
        position: absolute;
        overflow: hidden;
        z-index: 5; }
      .index .top_concept .flexBox dt .imgWrap .bd {
        width: 120%;
        height: 120%;
        position: absolute;
        left: -10%;
        top: -10%;
        background: url(/assets/images/yui.jpg);
        background-size: 100%;
        background-position: center center;
        display: flex;
        color: #003;
        font-size: 5vw;
        font-weight: bold;
        align-items: center;
        justify-content: center;
        text-align: center;
        text-transform: uppercase;
        animation: spin 12s linear infinite reverse;
        opacity: 1;
        z-index: 2; }
@keyframes morph {
  0% {
    border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%; }
  100% {
    border-radius: 40% 60%; } }
@keyframes spin {
  to {
    transform: rotate(1turn); } }
  .index .top_concept .flexBox dd {
    flex-basis: 65%;
    padding: 3rem; }
    .index .top_concept .flexBox dd p {
      font-size: 1.3rem;
      line-height: 180%;
      margin-bottom: 1.5rem; }
      .index .top_concept .flexBox dd p span {
        font-size: inherit; }
.index .top_event .bannerWrap {
  width: 90%;
  background-color: white;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.05); }
  .index .top_event .bannerWrap a {
    display: block;
    position: relative;
    z-index: 0; }
    .index .top_event .bannerWrap a img {
      width: 100%;
      border: 1rem solid white;
      -webkit-transition: 0.3s ease-in-out;
      -moz-transition: 0.3s ease-in-out;
      -o-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
      position: relative;
      z-index: 1; }
    .index .top_event .bannerWrap a:hover img {
      border-color: transparent; }
    .index .top_event .bannerWrap a .comingSoon {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      margin: 0 auto;
      pointer-events: none;
      z-index: 2;
      background-color: rgba(255, 255, 255, 0.6);
      font-size: 200%;
      font-weight: bold;
      padding-top: 25%; }
.index .cnt_pickup .flexBox {
  padding-bottom: 2rem; }
  .index .cnt_pickup .flexBox li {
    padding: 1rem .8rem; }
    .index .cnt_pickup .flexBox li .innerWrap {
      border: 1px solid #eee;
      overflow: hidden;
      display: block; }
      .index .cnt_pickup .flexBox li .innerWrap .imgWrap {
        width: 100%;
        height: 100%;
        overflow: hidden; }
      .index .cnt_pickup .flexBox li .innerWrap img {
        background-color: #f9f9f9;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        font-family: 'object-fit:cover;';
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out; }
      .index .cnt_pickup .flexBox li .innerWrap:hover img {
        transform: scale(1.08, 1.08); }
      .index .cnt_pickup .flexBox li .innerWrap .txtWrap {
        padding: 1rem; }
        .index .cnt_pickup .flexBox li .innerWrap .txtWrap h3, .index .cnt_pickup .flexBox li .innerWrap .txtWrap h4 {
          text-align: left; }
        .index .cnt_pickup .flexBox li .innerWrap .txtWrap h3 {
          margin: 1rem 0; }
        .index .cnt_pickup .flexBox li .innerWrap .txtWrap h4 {
          font-family: "Noto Serif JP", serif;
          color: lightcoral; }
.index .cnt_interview .mainWrap {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
  background-color: white;
  margin: 3px; }
  .index .cnt_interview .mainWrap dt {
    flex-basis: 40%;
    position: relative; }
    .index .cnt_interview .mainWrap dt h5, .index .cnt_interview .mainWrap dt h4, .index .cnt_interview .mainWrap dt p, .index .cnt_interview .mainWrap dt text {
      text-align: left; }
    .index .cnt_interview .mainWrap dt h5 {
      font-family: "Snell Roundhand", Georgia, "Times New Roman", Times, "serif";
      font-size: 6rem;
      color: lightsteelblue; }
    .index .cnt_interview .mainWrap dt h4 {
      font-weight: bold;
      font-size: 1.8rem;
      line-height: 160%; }
    .index .cnt_interview .mainWrap dt p {
      font-size: 1.3rem;
      line-height: 180%;
      margin: 1.5rem 0; }
    .index .cnt_interview .mainWrap dt text {
      display: block; }
      .index .cnt_interview .mainWrap dt text span {
        display: inline-block;
        padding: 0 .8rem;
        margin-right: 1rem;
        color: white;
        font-size: 1.2rem;
        line-height: 2rem;
        font-weight: bold;
        background-color: lightsteelblue; }
      .index .cnt_interview .mainWrap dt text em {
        display: block;
        text-align: right;
        font-size: 1.2rem;
        color: lightsteelblue;
        font-weight: bold; }
  .index .cnt_interview .mainWrap dd {
    flex-basis: 60%;
    position: relative; }
    .index .cnt_interview .mainWrap dd ul li img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      font-family: 'object-fit:cover;';
      display: block;
      background-color: whitesmoke; }
    .index .cnt_interview .mainWrap dd ul.parent > li {
      min-width: 100%; }
      .index .cnt_interview .mainWrap dd ul.parent > li:first-of-type {
        border-bottom: 1px solid white; }
      .index .cnt_interview .mainWrap dd ul.parent > li .child li {
        flex-basis: 50%; }
        .index .cnt_interview .mainWrap dd ul.parent > li .child li:first-of-type {
          border-right: 1px solid white; }
  .index .cnt_interview .mainWrap .btn {
    display: inline-block;
    padding: 1rem;
    width: 80%;
    max-width: 20rem;
    bottom: 0;
    right: 0;
    color: lightsteelblue;
    border-radius: 2rem;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out; }
    .index .cnt_interview .mainWrap .btn.pc {
      position: absolute; }
    .index .cnt_interview .mainWrap .btn.sp {
      position: relative;
      margin-top: 4rem; }
    .index .cnt_interview .mainWrap .btn span {
      position: relative;
      z-index: 1;
      color: inherit; }
    .index .cnt_interview .mainWrap .btn:before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 50%;
      width: 0;
      height: 100%;
      background-color: lightsteelblue;
      opacity: 0;
      border-radius: 2rem;
      -webkit-transition: 0.3s ease-in-out;
      -moz-transition: 0.3s ease-in-out;
      -o-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out; }
    .index .cnt_interview .mainWrap .btn:hover {
      color: #f9f9f9; }
      .index .cnt_interview .mainWrap .btn:hover:before {
        width: 100%;
        left: 0;
        opacity: 1; }
  .index .cnt_interview .mainWrap.disable .btn {
    pointer-events: none; }
.index .cnt_interview .listWrap li {
  min-width: calc(100% - 3px);
  margin-top: 1rem;
  padding: 1rem 0 1rem 2rem; }
  .index .cnt_interview .listWrap li .innerWrap {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
    padding: 1rem;
    background-color: white;
    display: flex;
    flex-wrap: wrap; }
    .index .cnt_interview .listWrap li .innerWrap img {
      width: 30%;
      height: 30%;
      display: inline-block;
      border-radius: 50%;
      object-fit: cover;
      font-family: 'object-fit:cover;'; }
    .index .cnt_interview .listWrap li .innerWrap p {
      flex-basis: 70%;
      padding: 0 0 0 2rem;
      text-align: left;
      display: inline-block; }
      .index .cnt_interview .listWrap li .innerWrap p span {
        width: 100%;
        display: block;
        font-family: "Snell Roundhand", Georgia, "Times New Roman", Times, "serif";
        color: lightsteelblue;
        text-align: left;
        font-size: 3rem; }
  .index .cnt_interview .listWrap li.slick-current .innerWrap {
    box-shadow: -1px 1px 3px rgba(223, 165, 249, 0.6), 1px -1px 3px rgba(156, 212, 255, 0.6); }
.index .cnt_artists .listWrap li {
  flex-basis: 50%;
  padding: 1rem;
  margin: 0; }
  .index .cnt_artists .listWrap li .innerWrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 2rem; }
    .index .cnt_artists .listWrap li .innerWrap .imgWrap {
      flex-basis: 30%;
      height: 100%;
      margin: 0;
      background-color: white;
      overflow: hidden; }
      .index .cnt_artists .listWrap li .innerWrap .imgWrap.list1 {
        border-radius: 60% 80% / 70% 80%; }
      .index .cnt_artists .listWrap li .innerWrap .imgWrap.list2 {
        border-radius: 90% 50% / 60% 70%; }
      .index .cnt_artists .listWrap li .innerWrap .imgWrap.list3 {
        border-radius: 80% 60% / 70% 60%; }
      .index .cnt_artists .listWrap li .innerWrap .imgWrap.list4 {
        border-radius: 60% 90% / 90% 70%; }
      .index .cnt_artists .listWrap li .innerWrap .imgWrap img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
        font-family: 'object-fit:cover;';
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out; }
      .index .cnt_artists .listWrap li .innerWrap .imgWrap.noimage {
        background-color: #f9f9f9;
        position: relative;
        height: 10rem; }
        .index .cnt_artists .listWrap li .innerWrap .imgWrap.noimage img {
          display: none; }
        .index .cnt_artists .listWrap li .innerWrap .imgWrap.noimage:after {
          position: relative;
          content: '準備中';
          display: block;
          line-height: 10rem;
          color: lightsteelblue; }
    .index .cnt_artists .listWrap li .innerWrap .txtWrap {
      flex-basis: 70%;
      text-align: left;
      padding-left: 10%; }
      .index .cnt_artists .listWrap li .innerWrap .txtWrap h3, .index .cnt_artists .listWrap li .innerWrap .txtWrap em, .index .cnt_artists .listWrap li .innerWrap .txtWrap text {
        display: block;
        text-align: left;
        padding-bottom: 1rem; }
      .index .cnt_artists .listWrap li .innerWrap .txtWrap h3 {
        font-family: "Noto Serif JP", serif;
        font-size: 2rem; }
      .index .cnt_artists .listWrap li .innerWrap .txtWrap em {
        font-size: 1.2rem;
        color: #cfcfcf; }
      .index .cnt_artists .listWrap li .innerWrap .txtWrap text {
        font-size: 1.3rem;
        line-height: 150%; }
      .index .cnt_artists .listWrap li .innerWrap .txtWrap p {
        display: inline-block;
        padding: .5rem 2rem;
        margin-top: 1rem;
        position: relative;
        z-index: 0;
        color: white;
        background-color: lightsteelblue;
        border-radius: 2rem;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out; }
        .index .cnt_artists .listWrap li .innerWrap .txtWrap p span {
          position: relative;
          z-index: 1;
          color: inherit; }
        .index .cnt_artists .listWrap li .innerWrap .txtWrap p:before {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          left: 50%;
          width: 0;
          height: 100%;
          background-color: white;
          opacity: 0;
          border-radius: 2rem;
          -webkit-transition: 0.3s ease-in-out;
          -moz-transition: 0.3s ease-in-out;
          -o-transition: 0.3s ease-in-out;
          transition: 0.3s ease-in-out; }
    .index .cnt_artists .listWrap li .innerWrap:hover .imgWrap img {
      transform: scale(1.05, 1.05); }
    .index .cnt_artists .listWrap li .innerWrap:hover .txtWrap p {
      color: lightsteelblue; }
      .index .cnt_artists .listWrap li .innerWrap:hover .txtWrap p:before {
        width: 100%;
        left: 0;
        opacity: 1; }
    .index .cnt_artists .listWrap li .innerWrap.disable {
      pointer-events: none; }
.index .top_news {
  position: relative;
  z-index: 0;
  background-color: rgba(250, 235, 215, 0.5); }
  .index .top_news .row {
    position: relative;
    z-index: 2; }
  .index .top_news .wrap {
    max-width: 80rem; }
    .index .top_news .wrap li {
      padding: 3rem;
      background-color: white;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
      background-repeat: no-repeat;
      background-position: right top;
      background-size: auto 100%; }
      .index .top_news .wrap li.yuukihand {
        background-image: url(/yuukihand/images/icon.jpg); }
      .index .top_news .wrap li.snowflowerjewelry {
        background-image: url(/snow_flower_jewelry/images/icon.jpg); }
      .index .top_news .wrap li.macaron {
        background-image: url(/macaron/images/icon.jpg); }
      .index .top_news .wrap li:not(:last-of-type) {
        margin-bottom: 1rem; }
      .index .top_news .wrap li a {
        display: inline-block;
        text-decoration: underline;
        text-align: left;
        line-height: 140%; }
      .index .top_news .wrap li p {
        text-align: left;
        line-height: 180%; }
        .index .top_news .wrap li p span {
          min-width: 20%;
          font-size: 1.2rem;
          text-align: left;
          color: lightsteelblue;
          font-weight: bold; }
  .index .top_news .btn {
    display: block;
    padding: 1rem;
    width: 100%;
    max-width: 20rem;
    margin-top: 4rem;
    position: relative;
    z-index: 0;
    border-radius: 2rem;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out; }
    .index .top_news .btn span {
      position: relative;
      z-index: 1;
      color: inherit; }
    .index .top_news .btn:before {
      content: '';
      display: block;
      width: 0;
      height: 100%;
      position: absolute;
      top: 0;
      left: 50%;
      z-index: -1;
      -webkit-transition: 0.3s ease-in-out;
      -moz-transition: 0.3s ease-in-out;
      -o-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
      border-radius: 2rem;
      background-color: dimgray;
      opacity: 0; }
    .index .top_news .btn:hover {
      color: white; }
      .index .top_news .btn:hover:before {
        width: 100%;
        left: 0;
        opacity: 1; }

@media screen and (max-width: 480px) {
  .index .top_concept .flexBox dt .imgWrap .logo {
    left: 68%; }
  .index .cnt_artists .listWrap li {
    min-width: 100%;
    margin-bottom: 2rem;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    padding: 0; }
  .index .top_news .wrap p span {
    display: block;
    margin-bottom: 1rem; } }
@media screen and (min-width: 481px) {
  .index .top_concept .flexBox dt .imgWrap .logo {
    left: calc(50% + 10rem); }
  .index .top_news .wrap li p span {
    display: inline-block; } }
@media screen and (min-width: 481px) and (max-width: 823px) {
  .index .cnt_artists .listWrap li {
    min-width: 33.33%; } }
@media screen and (max-width: 823px) {
  .index .top_concept .flexBox dt, .index .top_concept .flexBox dd {
    min-width: 100%; }
    .index .top_concept .flexBox dt p, .index .top_concept .flexBox dd p {
      text-align: center; }
  .index .top_concept .flexBox dd {
    margin-top: 3rem; }
  .index .cnt_interview .mainWrap {
    flex-direction: column-reverse;
    padding: 4rem 3rem; }
    .index .cnt_interview .mainWrap dt, .index .cnt_interview .mainWrap dd {
      min-width: 100%; }
  .index .cnt_interview .listWrap {
    display: none !important; }
  .index .top_news .wrap li {
    background-size: auto 60px; }
    .index .top_news .wrap li a {
      padding-right: 40px; } }
@media screen and (min-width: 824px) {
  .index .top_concept .flexBox dt .box {
    margin-top: 2rem;
    margin-right: 0; }
  .index .top_concept .flexBox dd {
    padding-left: 8rem; }
  .index .cnt_interview .indexWrap #interview_slider {
    width: 75%;
    float: left; }
  .index .cnt_interview .indexWrap #thumbnail_list {
    width: 25%;
    float: right; }
  .index .cnt_interview .mainWrap {
    padding: 4rem 5rem; }
    .index .cnt_interview .mainWrap dd {
      padding-left: 5rem; }
  .index .cnt_interview .btn.gradient {
    float: right;
    margin-right: 1rem; } }