@charset "UTF-8";

/*SP*/
@media only print, only screen and (max-width: 767px) {
  .sp {
    display: block !important;
  }
  .pc {
    display: none !important;
  }
  
  /*HEADER*/
  .header {
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
  }
  .title_wrapper {
    position: fixed;
    top: 30px;
    right: 20px;
    z-index: 999;
  }
  .title_wrapper p {
    width: 30px;
    height: 170px;
    font-size: 1.3rem;
    line-height: 1.75 !important;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }
  
  /*LOGO*/
  .logo {
    padding: 8rem 0 4rem;
    /*padding: 13rem 0 7rem;*/
    text-align: center;
  }
  .logo svg {
    width: 125px;
    /*width: 145px;*/
  }
  
  /*CONTENT1*/
  .content_1 .sec_1 {
    width: 57.81%;
    position: absolute;
    top: 0;
    left: 20.09%;
    z-index: 1;
  }
  .content_1 .sec_2 {
    width: 39.84%;
    position: absolute;
    top: 21.70%;
    left: 11.72%;
    z-index: 2;
  }
  .content_1 .sec_3 {
    position: absolute;
    top: 31.55%;
    /*top: 29.55%;*/
    left: 25.44%;
    /*left: 48.44%;*/
    z-index: 3;
  }
  .content_1 .sec_3 .item_img {
    width: 53.27%;
    margin-left: 31%;
    /*width: 77.27%;*/
  }
  .content_1 .sec_3 .item_caption {
    margin-top: 0.5rem;
  }
  .content_1 .sec_3 .item_caption p {
    margin: 0;
    font-size: 1.2rem;
    color: #ffffff;
    text-align: left;
  }
  .content_1 .sec_3 .item_caption p a {
    font-size: 1.2rem;
    color: #ffffff;
  }
  .content_1 .sec_4 {
    width: 62.5%;
    position: absolute;
    top: 57%;
    left: 0;
    z-index: 1;
  }
  .content_1 .sec_5 {
    width: 35.15%;
    position: absolute;
    top: 72.72%;
    left: 48.44%;
    z-index: 2;
  }
  .content_1 .sec_6 {
    position: absolute;
    top: 88%;
    right: 20%;
    z-index: 10;
  }
  .content_1 .sec_6 .item_caption p {
    margin: 0 0 0 1.5em;
    font-size: 1.2rem;
    color: #ffffff;
    text-align: right;
  }
  .content_1 .sec_6 .item_caption p a {
    font-size: 1.2rem;
    color: #ffffff;
  }
  
  /*CONTENT2*/
  .content_2 .sec_1 {
    width: 76.56%;
    position: absolute;
    top: 0;
    left: 12.5%;
    z-index: 2;
  }
  .content_2 .sec_1 .item_img {
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
  .content_2 .sec_1 .item_caption {
    margin-top: 0.5rem;
  }
  .content_2 .sec_1 .item_caption p {
    margin: 0;
    font-size: 1.2rem;
    color: #000000;
    text-align: left;
  }
  .content_2 .sec_1 .item_caption p a {
    font-size: 1.2rem;
    color: #000000;
  }
  .content_2 .sec_2 {
    width: 81.25%;
    position: absolute;
    top: 31.03%;
    left: 0;
    z-index: 1;
  }
  .content_2 .sec_3 {
    width: 100%;
    position: absolute;
    top: 37.03%;
    left: 0;
    z-index: 2;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
  .content_2 .sec_3 .item_img {
    width: 37.5%;
    order: 2;
  }
  .content_2 .sec_3 .item_caption {
    width: 62.5%;
    margin-top: 40%;
    order: 1;
  }
  .content_2 .sec_3 .item_caption p {
    margin: 0 1.5em 0 0;
    font-size: 1.2rem;
    color: #000000;
    text-align: right;
  }
  .content_2 .sec_3 .item_caption p a {
    font-size: 1.2rem;
    color: #000000;
  }
  .content_2 .sec_4 {
    width: 85.94%;
    position: absolute;
    top: 60.29%;
    left: 7.03%;
    z-index: 1;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
  .content_2 .sec_4 div:last-child {
    margin-top: 30%;
  }
  .content_2 .sec_5 {
    position: absolute;
    top: 89.96%;
    right: 25%;
    z-index: 10;
  }
  .content_2 .sec_5 .item_caption p {
    margin: 0 0 0 1.5em;
    font-size: 1.2rem;
    color: #000000;
    text-align: right;
  }
  .content_2 .sec_5 .item_caption p a {
    font-size: 1.2rem;
    color: #000000;
  }
  
  /*CONTENT3*/
  .content_3 .sec_1 {
    width: 66.40%;
    position: absolute;
    top: 0;
    left: 9.37%;
    z-index: 3;
  }
  .content_3 .sec_2 {
    width: 77.34%;
    position: absolute;
    top: 11.98%;
    right: 0;
    z-index: 2;
  }
  .content_3 .sec_2 .item_caption {
    margin-top: 0.5rem;
  }
  .content_3 .sec_2 .item_caption p {
    margin: 0 0 0 1.5em;
    font-size: 1.2rem;
    color: #000000;
    text-align: left;
  }
  .content_3 .sec_2 .item_caption p a {
    font-size: 1.2rem;
    color: #000000;
  }
  .content_3 .sec_3 {
    width: 86.72%;
    position: absolute;
    top: 33.5%;
    left: 0;
    z-index: 1;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
  .content_3 .sec_3 div:last-child {
    margin-top: 5%;
  }
  .content_3 .sec_4 {
    position: absolute;
    top: 56.5%;
    left: 6.25%;
    z-index: 2;
  }
  .content_3 .sec_4 .item_caption p {
    margin: 0 0 0 1.5em;
    font-size: 1.2rem;
    color: #ffffff;
    text-align: left;
  }
  .content_3 .sec_4 .item_caption p a {
    font-size: 1.2rem;
    color: #ffffff;
  }
  .content_3 .sec_5 {
    width: 86.72%;
    position: absolute;
    top: 68.21%;
    right: 0;
    z-index: 1;
  }
  .content_3 .sec_5 .item_img {
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
  .content_3 .sec_5 .item_caption {
    margin-top: 0.5rem;
  }
  .content_3 .sec_5 .item_caption p {
    margin: 0;
    font-size: 1.2rem;
    color: #ffffff;
    text-align: left;
  }
  .content_3 .sec_5 .item_caption p a {
    font-size: 1.2rem;
    color: #ffffff;
  }

  /*--NOTES--*/
  .note {
    position: absolute;
    bottom: 10px;
    right: 20px;
    z-index: 1;
  }
  .note p {
    font-size: 1.1rem;
    color: #ffffff;
    text-align: right;
  }
  
  /*CONTENT4*/
  .content_4 {
    width: calc(100% - 60px);
    margin: 0 auto;
  }
    
  /*--CONCEPT--*/
  .concept_area {
    margin-top: 70px;
  }
  .concept_area h2 {
    margin-bottom: 20px;
    font-size: 2.4rem;
  }
  .concept_area p {
    font-size: 1.3rem;
    line-height: 2.6;
  }
  
  /*--SHOP LIST--*/
  .shop_area {
    margin-top: 70px;
  }
  .shop_area h2 {
    margin-bottom: 20px;
    font-size: 2.4rem;
  }
  .shop_area h3 {
    font-size: 1.5rem;
    line-height: 2.6;
  }
  .shop_area h3:nth-of-type(2) {
    margin-top: 60px;
  }
  .shop_area p {
    font-size: 1.3rem;
    line-height: 2.6;
  }
  .shop_area p.btn {
    margin-top: 1em;
  }
  .shop_area p.btn a {
    width: 150px;
    height: 60px;
    border: 1px solid #000000;
    font-size: 1.8rem;
    line-height: 60px;
    text-align: center;
  }
  
  /*--PROFILE--*/
  .profile_area {
    margin-top: 70px;
  }
  .profile_area h2 {
    margin-bottom: 20px;
    font-size: 2.4rem;
  }
  .profile_area .profile_text {
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    gap: 20px;
  }
  .profile_area .profile_text div:nth-of-type(1) {
    width: 45%;
    order: 2;
  }
  .profile_area .profile_text div:nth-of-type(2) {
    width: 55%;
    order: 1;
  }
  .profile_area h3 {
    font-size: 1.3rem;
    line-height: 2.6;
  }
  .profile_area h3:nth-of-type(2) {
    margin-top: 60px;
  }
  .profile_area p {
    font-size: 1.3rem;
    line-height: 2.6;
  }
  .profile_area .instagram_icon .fa-instagram {
    margin: 0 5px 0 0;
    font-size: 3rem;
    vertical-align: middle;
  }
  
  /*--縦線--*/
  .line2 {
    position: relative;
    padding: 25px 0 25px 25px;
  }
  .line2::before {
    content: "";
    width: 1px;
    height: 0%;
    background: #000000;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  /*FOOTER*/
  .footer {
    margin: 70px 0 0 0;
    padding: 60px 0 40px;
    background: #e6e6e6;
    text-align: center;
  }
  .footer .footer_logo svg {
    width: 70px;
    margin-right: 30px;
  }
  .footer .credit_area p {
    font-size: 1.3rem;
    line-height: 1.8;
    text-align: left;
  }
  .footer .copyright {
    margin-top: 40px;
    font-size: 1.6rem;
    line-height: 1.2;
  }
  
}


/*PC*/
@media only print, only screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
  .pc {
    display: block !important;
  }
  
  /*HEADER*/
  .header {
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
  }
  .title_wrapper {
    text-align: right;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999;
  }
  .title_wrapper p {
    font-size: 1.3rem;
    line-height: 1.75 !important;
  }

  /*LOGO*/
  .logo {
    padding: 10rem 0;
    text-align: center;
  }
  .logo svg {
    width: 295px;
  }
  .logo p {
    margin: 2em auto 0;
    font-size: 2rem;
  }

  /*CONTENT1*/
  .content_1 .sec_1 {
    width: 38.28%;
    position: absolute;
    top: 0;
    left: 38.28%;
    z-index: 1;
  }
  .content_1 .sec_2 {
    width: 23.83%;
    position: absolute;
    top: 22.76%;
    left: 23.44%;
    z-index: 2;
  }
  .content_1 .sec_3 {
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    /*width: 47.66%;*/
    position: absolute;
    top: 38.78%;
    left: 42.19%;
    z-index: 3;
  }
  .content_1 .sec_3 .item_img {
    width: 40%;
    order: 1;
  }
  .content_1 .sec_3 .item_caption {
    width: 60%;
    order: 2;
  }
  .content_1 .sec_3 .item_caption p {
    margin: 0.5em 0 0.5em 1.5em;
    font-size: 1.3rem;
    color: #ffffff;
    text-align: left;
  }
  .content_1 .sec_3 .item_caption p a {
    font-size: 1.3rem;
    color: #ffffff;
  }
  .content_1 .sec_4 {
    width: 37.5%;
    position: absolute;
    top: 51.02%;
    left: 19.53%;
    z-index: 1;
  }
  .content_1 .sec_5 {
    width: 23.44%;
    position: absolute;
    top: 71.94%;
    left: 53.13%;
    z-index: 2;
  }
  .content_1 .sec_6 {
    position: absolute;
    top: 88.03%;
    right: 51.17%;
    z-index: 10;
  }
  .content_1 .sec_6 .item_caption p {
    margin: 0.5em 0 0.5em 1.5em;
    font-size: 1.3rem;
    color: #ffffff;
    text-align: right;
  }
  .content_1 .sec_6 .item_caption p a {
    font-size: 1.3rem;
    color: #ffffff;
  }
  
  /*CONTENT2*/
  .content_2 .sec_1 {
    width: 42.97%;
    position: absolute;
    top: 0;
    left: 31.64%;
    z-index: 2;
  }
  .content_2 .sec_1 .item_img {
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
  .content_2 .sec_1 .item_caption p {
    margin: 0.5em 0;
    font-size: 1.3rem;
    color: #000000;
    text-align: left;
  }
  .content_2 .sec_1 .item_caption p a {
    font-size: 1.3rem;
    color: #000000;
  }
  .content_2 .sec_2 {
    width: 51.17%;
    position: absolute;
    top: 30.44%;
    left: 19.14%;
    z-index: 1;
  }
  .content_2 .sec_3 {
    width: 42.97%;
    position: absolute;
    top: 42.03%;
    left: 36.72%;
    z-index: 3;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
  .content_2 .sec_3 .item_img {
    width: 50%;
    order: 2;
  }
  .content_2 .sec_3 .item_caption {
    width: 50%;
    margin-top: 40%;
    order: 1;
  }
  .content_2 .sec_3 .item_caption p {
    margin: 0.5em 1.5em 0.5em 0;
    font-size: 1.3rem;
    color: #000000;
    text-align: right;
  }
  .content_2 .sec_3 .item_caption p a {
    font-size: 1.3rem;
    color: #000000;
  }
  .content_2 .sec_4 {
    width: 49.21%;
    position: absolute;
    top: 63.29%;
    left: 28.52%;
    z-index: 1;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
  .content_2 .sec_4 div:last-child {
    margin-top: 35%;
  }
  .content_2 .sec_5 {
    position: absolute;
    top: 86.96%;
    right: 51.17%;
    z-index: 10;
  }
  .content_2 .sec_5 .item_caption p {
    margin: 0.5em 0 0.5em 1.5em;
    font-size: 1.3rem;
    color: #000000;
    text-align: right;
  }
  .content_2 .sec_5 .item_caption p a {
    font-size: 1.3rem;
    color: #000000;
  }

  /*CONTENT3*/
  .content_3 .sec_1 {
    width: 39.06%;
    position: absolute;
    top: 0;
    left: 24.61%;
    z-index: 3;
  }
  .content_3 .sec_2 {
    width: 45.70%;
    position: absolute;
    top: 10.74%;
    left: 38.67%;
    z-index: 2;
  }
  .content_3 .sec_2 .item_caption p {
    margin: 0.5em 0;
    font-size: 1.3rem;
    color: #000000;
    text-align: left;
  }
  .content_3 .sec_2 .item_caption p a {
    font-size: 1.3rem;
    color: #000000;
  }
  .content_3 .sec_3 {
    width: 50.78%;
    position: absolute;
    top: 33.63%;
    left: 19.14%;
    z-index: 1;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
  .content_3 .sec_3 div:last-child {
    margin-top: 30%;
  }
  .content_3 .sec_4 {
    position: absolute;
    top: 55.95%;
    right: 59.38%;
    z-index: 2;
  }
  .content_3 .sec_4 .item_caption p {
    margin: 0.5em 0 0.5em 1.5em;
    font-size: 1.3rem;
    color: #ffffff;
    text-align: right;
  }
  .content_3 .sec_4 .item_caption p a {
    font-size: 1.3rem;
    color: #ffffff;
  }
  .content_3 .sec_5 {
    width: 54.69%;
    position: absolute;
    top: 67.21%;
    left: 30.08%;
    z-index: 1;
  }
  .content_3 .sec_5 .item_img {
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
  .content_3 .sec_5 .item_caption p {
    margin: 0.5em 0 0.5em 0;
    font-size: 1.3rem;
    color: #ffffff;
    text-align: left;
  }
  .content_3 .sec_5 .item_caption p a {
    font-size: 1.3rem;
    color: #ffffff;
  }
  
  /*--NOTES--*/
  .note {
    position: absolute;
    bottom: 10px;
    right: 20px;
    z-index: 1;
  }
  .note p {
    font-size: 1.3rem;
    color: #ffffff;
    text-align: right;
  }

  /*CONTENT4*/
  .content_4 {
    width: calc(100% - 31.25%);
    margin: 0 auto;
  }

  /*--CONCEPT--*/
  .concept_area {
    margin-top: 70px;
  }
  .concept_area h2 {
    margin-bottom: 25px;
    font-size: 2.8rem;
  }
  .concept_area p {
    font-size: 1.7rem;
    line-height: 2.6;
  }
  .concept_area p:nth-of-type(2) {
    margin-top: 60px;
  }

  /*--SHOP LIST--*/
  .shop_area {
    margin-top: 70px;
  }
  .shop_area h2 {
    margin-bottom: 25px;
    font-size: 2.8rem;
  }
  .shop_area h3 {
    font-size: 1.7rem;
    line-height: 2.6;
  }
  .shop_area h3:nth-of-type(2) {
    margin-top: 60px;
  }
  .shop_area .shop_text {
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
  .shop_area p {
    font-size: 1.7rem;
    line-height: 2.6;
  }
  .shop_area p.btn a {
    width: 170px;
    height: 70px;
    border: 1px solid #000000;
    font-size: 2.3rem;
    line-height: 70px;
    text-align: center;
  }

  /*--PROFILE--*/
  .profile_area {
    margin-top: 70px;
  }
  .profile_area h2 {
    margin-bottom: 25px;
    font-size: 2.8rem;
  }
  .profile_area .profile_text {
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    gap: 40px;
  }
  .profile_area .profile_text div:nth-of-type(1) {
    width: 30%;
  }
  .profile_area .profile_text div:nth-of-type(2) {
    width: 70%;
  }
  .profile_area h3 {
    font-size: 1.7rem;
    line-height: 2.6;
  }
  .profile_area h3:nth-of-type(2) {
    margin-top: 60px;
  }
  .profile_area p {
    font-size: 1.7rem;
    line-height: 2.6;
  }
  .profile_area .instagram_icon .fa-instagram {
    margin: 0 5px 0 0;
    font-size: 3rem;
    vertical-align: middle;
  }

  /*--縦線--*/
  .line2 {
    position: relative;
    padding: 25px;
  }
  .line2::before {
    content: "";
    width: 1px;
    height: 0%;
    background: #000000;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  /*FOOTER*/
  .footer {
    margin: 70px 0 0 0;
    padding: 60px 0 40px;
    background: #e6e6e6;
    text-align: center;
  }
  .footer .footer_logo svg {
    width: 115px;
    margin-right: 50px;
  }
  .footer .credit_area p {
    font-size: 1.4rem;
    line-height: 1.8;
    text-align: left;
  }
  .footer .copyright {
    margin-top: 40px;
    font-size: 1.8rem;
    line-height: 1.2;
  }
  
}


/*SP/PC*/
.bg {
  position: relative;
}
.bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 255, 0.4);
}


/*ANIME*/
.fade.active {
  animation-name: fade;
}
.fade {
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadein.active {
  animation-name: fadein;
}
.fadein {
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  transform: translate3d(0, 50px, 0);
  opacity: 0;
}
@keyframes fadein {
  0% {
    transform: translate3d(0, 50px, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.line2.active::before {
  animation: lineAnime linear 1s forwards;
}
@keyframes lineAnime {
  0% {height: 0%;}
  100% {height: 100%;}
}