/* ///// color ///////////////////////////////// */
:root {
 --basecolor:#666666;
 --color_red:#ff005b;
 --color-lightpurple:#f0dfff;
}
/* /////////////////////////////////////////////  */
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&family=Noto+Sans+JP:wght@400;600&display=swap");* {
 margin: 0;
 padding: 0;
}

html {
 scroll-behavior:smooth;
}

body {
 position: relative;
 z-index: 0;
 overflow-x: hidden;
 background-color: #ffffff;
 color: var(--basecolor);
 font-weight: 400;
 font-family: "Noto Sans JP", "Hiragino Sans", "Meiryo", "serif";
 line-height: 1.4;

 -webkit-text-size-adjust: 100%;
 -webkit-text-size-adjust: none;
}

img {
 width: 100%;
}

a {
 color: inherit;
 text-decoration: none;
 transition: .3s;
}

a:hover ,
a:hover:after {
 opacity: .5;
}

p {
 width: 100%;
}


/* ///// layout ///////////////////////////////// */
section ,
article ,
footer {
 display: flex;
 position: relative;
 align-items: center;
 flex-direction: column;
 width: 100%;
 text-align: center;
}

.l_sectioninner {
 padding: 4% 0;
}

.l_sectioninner_bottom {
 padding-bottom: 4%;
}

/* width */
.l_width_inner {
 margin: 0 auto;
 width: 87%;
}
@media (max-width: 768px) {
 .l_width_inner {
  width: 95%;
 }
}

.l_widht_medium {
 margin: 0 auto;
 width: 89%;
}

/* ///// component ///////////////////////////////// */
/* ttl */
.c_ttl {
 padding: 1% 0.5%;
 width: 100%;
 background-color: var(--color-lightpurple);
}

.c_ttl2 {
    padding: 1% 0.5%;
    width: 100%;
    background-color: #8c73e5;
   }

.c_ttl img {
 width: auto;
 height: 2.5vw;
 vertical-align: bottom;
}

.c_ttl2 img {
    width: auto;
    height: 2.5vw;
    vertical-align: bottom;
   }

@media (max-width:769px) {
 .c_ttl img {
  height: 5vw;
 }

 .c_ttl2 img {
    height: 5vw;
   }
}

.c_ttl_line {
 margin: 6% auto 4%;
 padding: 1% 0;
 width: 100%;
 border: solid 1px var(--basecolor);
 border-radius: 13px;
 letter-spacing: .2vw;
 font-weight: normal;
 font-family: "M PLUS Rounded 1c", sans-serif;
}

.c_ttl_line_red {
 border: solid 1px var(--color_red);
 color: var(--color_red);
}

/* txt-size */
.c_txts_s {
 font-size: min(2.8vw,14px);
}

.c_txts_m {
 font-size: min(3.3vw,17px);
}

.c_txts_l {
 letter-spacing: .2vw;
 font-size: min(4.5vw,25px);
}
@media (min-width:1025px) {
 .c_txts_s {
  font-size: 1.2vw;
 }

 .c_txts_m {
  font-size: 1.7vw;
 }

 .c_txts_l {
  letter-spacing: .3vw;
  font-size: 2.5vw;
 }
}

/* txt-weight */
.c_txtw_bold {
 font-weight: bold;
}

/* txt-align */
.c_txta_left {
 text-align: left;
}

/* txt-coler */
.c_txtc_red {
 color: var(--color_red);
}

/* txt-indent */
.c_txt_indent {
 padding-left: -1rem;
 text-indent: -1rem;
}

/* ///// infomaition ///////////////////////////////// */
/* sammary */
.p_info_pic {
 position: relative;
 margin-top: 5%;
}

.p_info_pic_btn {
 display: flex;
 position: absolute;
 top: 76%;
 left: 50%;
 width: 30%;
 transform: translateX(-50%);
}

.p_info_pic_btn a {
 width: 45%;
}

.p_info_pic_btn a:first-child {
 margin-right: 20%;
}

.special_btn01 {
   width: 70%;
    margin: 5% 0% 0%;
}

.special_btn02 {
   width: 85%;
    margin: 3% 0% 5%;
}

.p_goods_btn {
   width: 90%;
   margin: 0 auto 9%;
}

/* access */
.p_access_map {
 display: flex;
 flex-direction: row;
}

@media (max-width: 769px) {
 .p_access_map {
  flex-direction: column;
 }
}

.p_access_map iframe {
 width: min(42%, 726px);
 aspect-ratio: 363/200;
}

@media (max-width: 769px) {
 .p_access_map iframe {
  width: 100%;
 }
}

.p_access_map_txt {
 margin-left: 2%;
}
@media (max-width:769px) {
 .p_access_map_txt {
  margin-top: 2%;
  margin-left: 0;
 }
}

/* ///// goods ///////////////////////////////// */


/* ///// novelty ///////////////////////////////// */


/* ///// fotter ///////////////////////////////// */
.p_link {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 justify-content: space-around;
 margin: 0 auto;
 width: 100%;
 list-style: none;
}

.p_link:not(:first-child) {
 margin-top: 3%;
}

.p_link_artistx {
 width: 35%;
}
@media (max-width:769px) {
 .p_link_artistx {
  width: 48%;
 }
}

.p_link_melon {
 width: 15%;
}
@media (max-width:769px) {
 .p_link_melon {
  margin-top: 5%;
  width: 30%;
 }
}

.p_link_melonx {
 width: 25%;
}
@media (max-width:769px) {
 .p_link_melonx {
  margin-top: 5%;
  width: 50%;
 }
}

.p_link_info {
 width: 48%;
}
@media (max-width:769px) {
 .p_link_info {
  margin-top: 5%;
  width: 90%;
 }
}

.p_link_cregit {
 margin: 5% auto;
 width: 60%;
}
@media (max-width:769px) {
 .p_link_cregit {
  margin: 8% auto 15%;
  width: 80%;
 }
}

/* ///// utility ///////////////////////////////// */
/* margin-top */
.u_mt_s {
 margin-top: 1.5%;
}

.u_mt_m {
 margin-top: 3%;
}

/* ///// responseve ///////////////////////////////// */
.pc {
 display: block;
}

.sp {
 display: none;
}

@media (max-width: 768px) {
 .pc {
  display: none;
 }

 .sp ,
 .br {
  display: block;
 }
}

