@charset "UTF-8";


#hypeelintoFlow01 + .composite_box01 .wrapper_item,
#hypeelintoFlow02 + .composite_box01 .wrapper_item {
    flex-direction: column;
}
#hypeelintoFlow01 + .composite_box01 .wrapper_item .inner_item,
#hypeelintoFlow02 + .composite_box01 .wrapper_item .inner_item {
    width: 100%;
}
#hypeelintoFlow02 + .composite_box01 .wrapper_item .inner_item {
    flex-direction: row-reverse;
    position: relative;
}
#hypeelintoFlow01 + .composite_box01 .inner_item>a,
#hypeelintoFlow02 + .composite_box01 .inner_item>a {
width: fit-content;
}
#hypeelintoFlow01 +.dec3_9.composite_box01.block_images_1 .inner_item:before {
margin: 0 auto 1rem 0!important;
}
#hypeelintoFlow02 +.dec3_9.composite_box01.block_images_1 .inner_item:before  {
counter-increment: number 1;
position: absolute;
        left: 0;
        top: 0.5rem;
}
#hypeelintoFlow02 + .composite_box01 .inner_item .heading {
padding-left: 6rem;
}

#hypeelintoFlow01 + .composite_box01 .inner_item:nth-of-type(2):nth-last-of-type(1),
#hypeelintoFlow02 + .composite_box01 .inner_item:nth-of-type(2):nth-last-of-type(1) {
    margin-left: 0!important;
  margin-top: 3rem; 
}
#hypeelintoFlow01 + .composite_box01 .wrapper_item .inner_item .inner_item_img img,
#hypeelintoFlow02 + .composite_box01 .wrapper_item .inner_item .inner_item_img img {
    height: auto!important;
}
#hypeelintoFlow01 + .composite_box01 .wrapper_item {
  counter-reset: number 0;
}
#hypeelintoFlow02 + .dec3_9.composite_box01.block_images_1 .wrapper_item {
    counter-reset: number 2; /* ← 3から始めたいので2 */
}


#list + .composite_box01 .content_wrapper .wrapper_item {
display: flex;
gap: 2%;
    justify-content: space-between;
}

#list + .composite_box01 .content_wrapper .wrapper_item .inner_item {
width: 48%!important;
}

#hypeel_3colImg + .composite_box01 .wrapper_item {
justify-content: center!important;
}
#hypeel_3colImg + .composite_box01 .wrapper_item .inner_item a .inner_item_img img {
object-fit: contain;
}

@media screen and (max-width: 768px) {
#list + .composite_box01 .content_wrapper .wrapper_item {
flex-direction: column;
}
#list + .composite_box01 .content_wrapper .wrapper_item .inner_item {
display: flex;
width: 100%!important;
align-items: center;
}
#list + .composite_box01 .content_wrapper .wrapper_item .inner_item a {
padding-left: 2rem;
max-width: 42%;
}
}

.-x-tag_wrap {
display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}
span.-x-bene_tag {
padding: 1rem 2rem;
    border: 1px solid;
    border-radius: 34px;
background: var(--i_main_color);
    color: var(--i_bg_color);
}


// add background-img 
/* ===============================
   斜め装飾（ページ全体用）
   =============================== */

/* 念のため基準を作る */
html,
body {
  position: relative;
}

/* 共通設定 */
body::before,
body::after {
  content: "";
  position: fixed; /* ページ全体に固定 */
  background-image: url(/common/upload_data/lirea-harajukujp/image/20260221233855.png);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.15;
  pointer-events: none; /* クリック邪魔しない */
  z-index: -1; /* 背面 */
}

/* 左上装飾 */
body::before {
  width: 22vw;
  height: 80vh;
  top: 5%;
  left: -5%;
  transform: rotate(14deg);
}

/* 右下装飾 */
body::after {
  width: 22vw;
  height: 90vh;
  bottom: 5%;
  right: -5%;
  transform: rotate(9deg);
}



/* ===============================
   SP調整
   =============================== */
@media (max-width: 768px) {

  body::before {
    width: 40vw;
    left: -15%;
  }

  body::after {
    width: 40vw;
    right: -15%;
    transform: rotate(2deg);
  }

}

#s1 + section .contents_box01 .inner_item_img {
    background: var(--i_main_color);
}




.-w-section{
width: 100%;

}

/* top black box */

.-w-top-row{
background:#ffffff;
padding: 20px;
display:flex;
align-items:center;
justify-content:center;
gap:20px;
}

/* circle */

.-w-circle{
width:250px;
aspect-ratio: 1;
border:2px solid #C68271;
border-radius:50%;
color:#716a68;
text-align:center;
box-sizing:border-box;
display: flex;
flex-direction: column;
justify-content: center;
}

.-w-circle h2{
margin:0;
font-size:30px;
letter-spacing:2px;
line-height: 1;
margin-bottom: 15px;
}

.-w-circle-sub{
font-size:10px;

}

/* divider line */

.-w-divider{
width:80%;
height:1px;
background:#C68271;
margin:10px auto;
}

.-w-circle p{
font-size:10px;
line-height:1.5;
color:#716a68;
}

/* symbols */

.-w-symbol{
color:#c68271;
font-size:40px;
font-weight:bold;

}

/* text box */

.-w-text{
color:#716a68;
width:166px;
font-size:13px;

}

.-w-label{
background:#C68271;
color:#423C3A;
display:inline-block;
padding:6px 15px;
margin-bottom:10px;
font-size:12px;
width: 100%;
padding: 5px 0;
text-align: center;
}

/* bottle */

.-w-bottle img{
height:200px;
}

/* bottom text */

.-w-bottom-text{
margin-top:20px;
color:#8c6f66;
}

.-w-bottom-text h3{
font-size:22px;
margin:10px 0;
}

.-w-sub{
margin:5px 0;
font-size:14px;
}

.-w-desc{
font-size:14px;
}

/* responsive */

@media (max-width:1023px){
.-w-circle {
  width: 205px;
}
}

@media (max-width:900px){

.-w-symbol{
transform: rotate(90deg);
}

.-w-circle {
  width: 300px;
}
.-w-label{
font-size:20px;
}

.-w-top-row{

flex-direction:column;
}
.-w-font {
font-size:16px !important;
}

.-w-text{
align-self: unset;
    text-align: center;
width: max-content;
}

.-w-section{
width:100%;
}

}


.-w-font{
font-size:10px;
}


.top {
     margin: 10px 0;
}

.circle {
  width: 50px;
  height: 50px;
  background: #e6c6e8;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #333;
}


    .-w-label {
      
        font-weight: bold;
    }


#s1 + section..contents_box01 .inner_item_img {
    background: var(--i_main_color);
}