@charset "utf-8";

/* ==================================================
   공통
   ================================================== */
#csc{
  overflow:hidden;
}

#csc .container{
  text-align:center;
}

#csc br.sp,
#csc br.pc{
  display:none;
}
@media only screen and (min-width: 1000px){
  #csc br.pc{
    display:block;
  }
}
@media only screen and (max-width: 768px){
  #csc br.sp{
    display:block;
  }
}

@media only screen and (min-width: 1000px){
  #csc h2{
    padding:0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1000px){
  #csc h2{
    padding:3vw 0;
  }
}

#csc .atten{
  text-align:center;
  font-size:0.9em;
  line-height:1.6;
  color:#000;
}
@media (max-width: 780px){
  #csc .atten{
    font-size:0.6em;
  }
}

#csc sup{
  font-size:0.5em;
  font-weight:normal;
  top:-1em;
}

/* 구분선 */
.divider{
  width:140px;
  height:1px;
  background-color:#666;
  margin:0 auto 16px auto;
}

/* 카타카나 서브 타이틀 */
.subtitle-katakana{
  font-size:14px;
  letter-spacing:0.25em;
  color:#000;
  margin-bottom:30px;
  font-family:'Noto Serif JP';
}

/* ==================================================
   구매 버튼 (공식 / 楽天 / Amazon)
   ================================================== */
#csc .linksec{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:25px 0;
}

#csc .linksec > div{
  padding:0 1%;
  width:30%;
}

#csc .linksec button,
#csc .linksec a{
  width:100%;
  height:50px;
  display:block;
}

#csc .linksec img{
  vertical-align:middle;
}

#csc .linksec .lk-of{
  line-height:1.2;
}
#csc .linksec .lk-of button{
  background:#64ccc9;
  color:#fff;
  border:none;
}
#csc .linksec .lk-of span{
  font-size:70%;
}

#csc .linksec .lk-raku button{
  background:#bf0000;
  border:none;
}
#csc .linksec .lk-raku img{
  width:50%;
  height:auto;
}

#csc .linksec .lk-am a{
  background:#000;
  display:flex;
  align-items:center;
}
#csc .linksec .lk-am img{
  width:90%;
  height:auto;
  margin:0 auto;
}

@media only screen and (max-width: 768px){
  #csc .linksec{
    flex-wrap:wrap;
    padding:5vw 0;
  }
  #csc .linksec > div{
    padding:2%;
    width:48%;
  }
  #csc .linksec button,
  #csc .linksec a{
    border-radius:3rem;
    height:13vw;
  }
  #csc .linksec .lk-of{
    line-height:1.1;
  }
}

/* ==================================================
   animation (떠다니는 장식)
   ================================================== */
@keyframes fluffy{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(25px); }
}
@keyframes fluffy2{
  0%, 100%{ transform:translateY(3px); }
  50%{ transform:translateY(27px); }
}
@keyframes fluffy3{
  0%, 100%{ transform:translateY(25px); }
  50%{ transform:translateY(0); }
}

.fluffy { animation:fluffy 2.5s ease-in-out infinite alternate; }
.fluffy2{ animation:fluffy2 2.5s ease-in-out infinite alternate; }
.fluffy3{ animation:fluffy3 3.5s ease-in-out infinite alternate; }

/* ==================================================
   section01 (PRODUCTS / 상품정보 / 체크리스트 / 리드문)
   ================================================== */
#csc .section01{
  padding-top:0;
  padding-bottom:0;
  background-image:url('./pc_new/bg_201.png');
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:100% auto;
  background-color:#F4F4F6;
  position:relative;
}
@media only screen and (max-width: 768px){
  #csc .section01{
    padding-bottom:10vw;
  }
}

#csc .section01 .container{
  position:relative;
}

/* 장식 이미지 */
#csc .section01 .bg01{ width:30%; max-width:80px;  position:absolute; top:10px;   left:12%; }
#csc .section01 .bg02{ width:30%; max-width:80px;  position:absolute; top:120px;  right:-2%; }
#csc .section01 .bg03{ width:80%; max-width:150px; position:absolute; top:180px;  right:-12%; }
#csc .section01 .bg04{ width:80%; max-width:150px; position:absolute; top:300px;  left:-12%; }
#csc .section01 .bg05{ width:80%; max-width:100px; position:absolute; top:580px;  right:-2%; }
#csc .section01 .bg06{ width:80%; max-width:80px;  position:absolute; top:1200px; left:-2%; }
#csc .section01 .bg07{ width:80%; max-width:160px; position:absolute; top:1800px; right:-5%; }
#csc .section01 .bg08{ width:80%; max-width:50px;  position:absolute; top:1950px; right:-8%; }

@media only screen and (max-width: 768px){
  #csc .section01 .bg01{ top:3%; }
  #csc .section01 .bg02{ top:18%; }
  #csc .section01 .bg03{ top:40%; }
  #csc .section01 .bg06{ top:-10%; }
  #csc .section01 .bg07{
    width:100px;
    bottom:-8%;
    left:-5%;
  }
}

/* 리드문 */
#csc .section01 .lead{
  padding:0 0 3vw 0;
  position:relative;
  z-index:2;
}
@media only screen and (min-width: 1000px){
  #csc .section01 .lead{ padding:10px 0 20px 0; }
}
@media only screen and (min-width: 768px) and (max-width: 1000px){
  #csc .section01 .lead{ padding:0 0 5vw 0; }
}
@media only screen and (max-width: 768px){
  #csc .section01 .lead{ padding:0 0 8vw 0; }
}

#csc .section01 .lead .cp{
  font-family:'Noto Serif JP';
  font-size:1.6em;
  font-weight:500;
  color:#000;
  letter-spacing:.1em;
}
@media (max-width: 780px){
  #csc .section01 .lead .cp{ font-size:1.4em; }
}

#csc .section01 .lead .cp-sub{
  font-family:'Noto Serif JP';
  font-size:clamp(0.9em, 1.4vw, 0.9em);
  color:#000;
  letter-spacing:.2em;
  padding-top:3vw;
}
@media only screen and (min-width: 1000px){
  #csc .section01 .lead .cp-sub{ padding-top:50px; }
}
@media only screen and (min-width: 768px) and (max-width: 1000px){
  #csc .section01 .lead .cp-sub{ padding-top:3vw; }
}
@media only screen and (max-width: 768px){
  #csc .section01 .lead .cp-sub{
    letter-spacing:.05em;
    padding-top:40px;
  }
}

/* 상품정보 박스 (PC/모바일 공통) */
#csc .section01 .sec01pr{
  background:#fff;
  width:95%;
  margin:0 auto;
  padding:3vw;
  position:relative;
}
@media only screen and (min-width: 1000px){
  #csc .section01 .sec01pr{
    width:80%;
    padding:20px 15px 40px 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1000px){
  #csc .section01 .sec01pr{
    width:80%;
    padding:5vw 5vw 2vw 3vw;
  }
}

#csc .section01 .sec01pr .sec01pr-in{
  display:flex;
  justify-content:center;
}

#csc .section01 .sec01pr .prleft{
  margin-top:20px;
  padding-right:40px;
}
#csc .section01 .sec01pr .prleft img{
  width:100%;
  height:auto;
  padding-top:80px;
}

#csc .section01 .sec01pr .prright{
  padding-top:50px;
}

#csc .section01 .sec01pr .cp{
  font-family:'Yu Mincho', serif;
  font-size:2.4em;
  line-height:1.6;
  color:#575757;
  font-weight:600;
  letter-spacing:.1em;
}

#csc .section01 .sec01pr .rightprt{
  padding-top:30px;
  font-size:1.1em;
  font-weight:500;
  line-height:1.4;
  letter-spacing:.2em;
  color:#000;
}

#csc .section01 .sec01pr .rightprp{
  font-size:clamp(0.7em, 1.4vw, 0.9em);
  line-height:1.4;
  letter-spacing:.2em;
  padding-top:20px;
  color:#000;
}

@media (max-width: 780px){
  #csc .section01 .sec01pr .prright{ padding-top:10px; }
  #csc .section01 .sec01pr .cp{ font-size:1.8em; }
  #csc .section01 .sec01pr .rightprt{
    padding-top:15px;
    font-size:0.9em;
  }
}

@media only screen and (max-width: 768px){
  #csc .section01 .sec01pr .sec01pr-in{
    display:block;
  }
  #csc .section01 .sec01pr .prleft{
    margin:0 auto;
    width:70%;
    padding-right:0;
    padding-bottom:3vw;
  }
}

#csc .section01 .sec01pr .linksec{
  width:80%;
  margin:0 auto;
}
@media only screen and (min-width: 768px) and (max-width: 1000px){
  #csc .section01 .sec01pr .linksec{ width:100%; }
}
@media only screen and (max-width: 768px){
  #csc .section01 .sec01pr .linksec{ width:90%; }
}

/* ==================================================
   section03 (Q&A / PUREAL PRODUCTS 슬라이더)
   ================================================== */
#csc .section03{
  padding:20px 0 0 0;
  background-color:#9CDBD9;
}
@media only screen and (max-width: 768px){
  #csc .section03{
    padding:5vw 0 0 0;
  }
}

#csc .section03 .prescription{
  padding-bottom:5vw;
}

#csc .section03 .prescription .cp{
  font-family:'Yu Mincho', serif;
  font-size:2.4em;
  line-height:1.6;
  color:#000;
  letter-spacing:.1em;
  padding-top:5vw;
}
@media (max-width: 780px){
  #csc .section03 .prescription .cp{ font-size:1.6em; }
}

#csc .section03 .products{
  padding-bottom:5vw;
}

#csc .section03 .btlink{
  width:80%;
  max-width:800px;
  margin:0 auto;
  padding:5vw 0;
}
@media only screen and (max-width: 768px){
  #csc .section03 .btlink{
    width:100%;
    padding:10vw 0 5vw 0;
  }
}

/* 슬라이더 페이징 */
#csc .flex-control-paging li a{
  box-shadow:none;
  background:#aaa;
}
#csc .flex-control-paging li a.flex-active{
  background:#000 !important;
}

/* ==================================================
   section04 (제품 상세 / 3STEP / 6つのフリー) 장식 이미지
   ================================================== */
.section04 .bg01{ width:100%; max-width:200px; position:absolute; top:20px;   right:1%; }
.section04 .bg02{ width:15%;  max-width:60px;  position:absolute; top:800px;  left:10%; }
.section04 .bg03{ width:15%;  max-width:60px;  position:absolute; top:500px;  right:20%; }
.section04 .bg04{ width:100%; max-width:200px; position:absolute; top:1300px; right:15%; }
.section04 .bg05{ width:100%; max-width:150px; position:absolute; top:1700px; right:1%; }
.section04 .bg06{ width:100%; max-width:150px; position:absolute; top:2200px; right:15%; }
.section04 .bg07{ position:absolute; top:2700px; left:6%; }
.section04 .bg08{ position:absolute; top:2800px; left:-2%; }
.section04 .bg09{ width:100%; max-width:150px; position:absolute; top:3500px; right:5%; }
.section04 .bg10{ width:100%; max-width:150px; position:absolute; top:3700px; right:-2%; }
.section04 .bg11{ position:absolute; top:4000px; left:-2%; }

.section04 .bg07 img,
.section04 .bg08 img{ width:80%; }
.section04 .bg11 img{ width:20%; }

@media only screen and (max-width: 768px){
  .section04 .bg01 img{ width:30%; }
}

/* ==================================================
   section01 : 상품정보 2컬럼 (PC)  (index.php 인라인 <style>에서 이동)
   ================================================== */

/* 제품 정보 2컬럼 레이아웃 컨테이너 */
.product-info-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin-top: 25px;
  margin-bottom: 25px;
  text-align: left;
  font-family: inherit;
}

/* 좌/우 컬럼 설정 */
.product-info-grid .info-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 15px;
}

/* 중앙 세로 구분선 */
.product-info-grid .info-divider {
  width: 1px;
  background-color: #d0d0d0;
  margin: 5px 0;
}

/* 상품명 */
.product-info-grid .item-name {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  line-height: 1.4;
}

/* 한정 수량/공식사이트 한정 문구 */
.product-info-grid .item-name.limit-badge {
  font-size: 13px;
  color: #333333;
}

/* 용량 및 가격 */
.product-info-grid .item-price {
  font-size: 13px;
  color: #555555;
  margin-top: 2px;
  margin-bottom: 12px;
}

.product-info-grid .item-price span {
  margin-left: 8px;
}

/* ==================================================
   section01 : ゆらぎ肌 체크리스트  (index.php 인라인 <style>에서 이동)
   ================================================== */

  /* ===================================================
     PC 기본 스타일 (912px 기준, 3x2 배치)
     =================================================== */
  .check-bg-container {
    width: 912px;
    height: 410px;
    background: url('./pc_new/bg_119.png') no-repeat center top / contain;
    position: relative;
    box-sizing: border-box;
    margin: 0 auto;
    font-family: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
    color: #4a4a4a;
  }

  /* PC: 제목 영역 */
  .check-bg-container .title-area {
    position: absolute;
    top: 65px;
    left: 50%;
    transform: translateX(-50%);
    width: 740px;
    text-align: center;
  }

  .check-bg-container .title-area h2 {
    font-size: 28px;
    font-weight: normal;
    color: #4a4a4a;
    margin: 0;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  .check-bg-container .title-area .num {
    font-size: 1.15em;
    font-weight: 600;
  }

  .check-bg-container .title-area .highlight {
    background: #ffff00;
    padding: 0 4px;
    font-weight: 600;
    font-size: 1.3em;
  }

  /* PC: 체크리스트 영역 (3x2) */
  .check-bg-container .list-area {
    position: absolute;
    top: 185px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    display: flex;
    justify-content: space-between;
  }

  .check-bg-container .list-col {
    width: 380px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .check-bg-container .list-item {
    display: flex;
    align-items: flex-end;
    gap: 10px;
  }

  .check-bg-container .icon-check {
    width: 32px;
    height: auto;
    flex-shrink: 0;
    margin-bottom: 2px;
  }

  .check-bg-container .item-text {
    flex: 1;
    border-bottom: 1px solid #84cfc7;
    padding-bottom: 3px;
    font-size: 16px;
    letter-spacing: 0.05em;
    white-space: nowrap;
    text-align: left;
  }

  .check-bg-container .item-text sup {
    font-size: 10px;
    top: -0.5em;
  }

  /* PC: 하단 주석 */
  .check-bg-container .footnote {
    position: absolute;
    bottom: 35px;
    width: 100%;
    text-align: center;
    font-size: 11px;
    color: #666666;
    letter-spacing: 0.05em;
  }

  /* ===================================================
     모바일 대응 (768px 이하 - bg_119_m.png 맞춤)
     =================================================== */
  @media (max-width: 768px) {
    .check-bg-container {
      width: 100%;
      max-width: 450px; /* 모바일 배경 상자 최대 너비 제한 */
      height: auto;
      min-height: inherit;
      /* bg_119_m.png 모바일 배경 적용 */
      background: url('./pc_new/bg_119_m.png') no-repeat center top / 100% auto;
      /* 상단 타이틀 상자와 하단 내지 영역 위치에 맞춘 패딩 조절 */
      padding: 8% 2% 12% 6%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* 모바일: 제목 영역 (상단 상자 안에 위치) */
    .check-bg-container .title-area {
      position: static;
      transform: none;
      width: 100%;
      margin-top: 1%;  /* 상단 박스 내부 중앙 정렬 */
      margin-bottom: 10%; /* 아래 내지 박스와의 간격 */
      padding: 0 5%;
      box-sizing: border-box;
    }

    .check-bg-container .title-area h2 {
      font-size: 15px !important;
      line-height: 1.45;
      white-space: normal;
      padding-top: 5px !important;
      word-break: keep-all;
    }

    /* 모바일: 체크리스트 1열 6개(1x6) 직렬 배치 */
    .check-bg-container .list-area {
      position: static;
      transform: none;
      width: 100%;
      flex-direction: column;
      gap: 16px;
      padding: 10px 0px 10px 0px;
      box-sizing: border-box;
    }

    .check-bg-container .list-col {
      width: 100%;
      gap: 16px;
    }

    .check-bg-container .list-item {
      gap: 8px;
      align-items: center;
    }

    .check-bg-container .icon-check {
      width: 20px !important;
    }

    .check-bg-container .item-text {
      font-size: 13px;
      white-space: normal;
      line-height: 1.35;
      word-break: keep-all;
      padding-bottom: 2px;
    }

    /* 모바일: 하단 주석 */
    .check-bg-container .footnote {
      position: static;
      margin-top: 20px;
      font-size: 10px;
    }
  }

  /* 아주 작은 모바일 화면 (360px 이하) 폰트 미세 조정 */
  @media (max-width: 360px) {
    .check-bg-container .title-area h2 {
      font-size: 13.5px !important;
    }
    .check-bg-container .item-text {
      font-size: 11.5px;
    }
  }

/* ==================================================
   section04 : 배경  (index.php 인라인 <style>에서 이동)
   ================================================== */

.section04 {
  position: relative;
  width: 100%;
  /* 쉼표(,)로 두 배경을 순서대로 지정합니다 */
  background-image: url('./pc_new/bg_203.png'), url('./pc_new/bg_202.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center bottom, center top; /* bg_202는 위쪽, bg_203은 아래쪽 고정 */
  background-size: contain, cover; /* bg_203의 크기에 맞춰 cover 또는 contain, auto 등으로 조절 가능합니다 */
  padding: 100px 0;
  box-sizing: border-box;
  color: #333333;
}
@media (max-width: 768px) {
	.section04 {
  /* 쉼표(,)로 두 배경을 순서대로 지정합니다 */
  background-image: url('./pc_new/bg_202_m.png');
  background-repeat: no-repeat;
  background-position: center top; /* bg_202는 위쪽, bg_203은 아래쪽 고정 */
  background-size: contain; /* bg_203의 크기에 맞춰 cover 또는 contain, auto 등으로 조절 가능합니다 */
  background-color:#F2FBFC;
  	}
}

/* ==================================================
   section04 : 제품 상세 카드  (index.php 인라인 <style>에서 이동)
   ================================================== */

  /* 전체 컨테이너 */
  .product-detail-wrapper {
    width: 100%;
    max-width: 912px;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
    color: #4a4a4a;
    position: relative;
    padding-top:100px;
  }

  /* 흰색 메인 카드 박스 */
  .product-main-card {
    background-color: #ffffff;
    padding: 0 0 30px 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
  }

  /* 상단 헤더 배너 */
  .card-header-banner {
    text-align: center;
    padding: 15px 10px;
  }

  .card-header-banner .sub-title {
    font-size: 28px;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
    background-color: #72c8c4;
    color: #ffffff;
    font-family: 'Noto Serif JP';
  }

  .card-header-banner .main-title {
  	  margin-top:15px;
    font-size: 42px;
    font-weight: 500;
    letter-spacing: 0.15em;
    background-color: #72c8c4;
    color: #ffffff;
    font-family: 'Noto Serif JP';
  }

  /* 본문 영역 (좌측 제품 + 우측 성분 이미지 및 텍스트) */
  .card-body-content {
    display: flex;
    align-items: flex-start;
    padding: 30px 20px 10px;
    gap: 0px;
  }

  /* 좌측 제품 이미지 영역 */
  .product-img-col {
    width: 38%;
    flex-shrink: 0;
    text-align: center;
  }

  .product-img-col img {
    width: 100%;
    max-width: 360px;
    height: auto;
  }

  /* 우측 성분 및 텍스트 영역 */
  .ingredient-info-col {
    width: 68%;
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

  .ingredient-img-wrap img {
    width: 100%;
    height: auto;
  }

  /* 우측 하단 설명 문구 */
  .description-text-wrap {
    border-top: 1px dashed #cccccc;
    padding-top: 20px;
    text-align: center;
  }

  .description-text-wrap .desc-top {
    font-size: 18px;
    color: #555555;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
  }

  /* 하단 제품 정보 (뱃지, 제품명, 가격) */
  .product-info-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 5%;
    margin-top: 5px;
  }

  .badge-reset {
    background-color: #83d4ce;
    color: #ffffff;
    font-size: 13px;
    padding: 3px 25px;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 8px;
  }

  .product-name {
    font-size: 15px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 4px;
  }

  .product-price {
    font-size: 14px;
    color: #555555;
  }

  /* 최하단 각주 (주석) */
  .footnote-section {
    text-align: center;
    font-size: 11px;
    color: #666666;
    margin-top: 15px;
    line-height: 1.6;
  }

  /* 반응형 처리 */
  @media (max-width: 768px) {
  .product-img-col img {
  	max-width:230px;
  }
	  .footnote-section {
    font-size: 7px;
	  }
    .card-body-content {
      flex-direction: column;
      align-items: center;
    }
    .product-img-col, .ingredient-info-col {
      width: 100%;
    }
    .card-header-banner .main-title {
      font-size: 24px;
    }
    .card-header-banner .sub-title {
      font-size: 14px;
    }
    .product-info-footer {
      padding-left: 0;
      align-items: center;
      margin-top: 15px;
    }
  }

/* ==================================================
   section04 : おすすめの3STEP  (index.php 인라인 <style>에서 이동)
   ================================================== */

  /* 전체 영역 컨테이너 */
  .step-section-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;
    color: #4a4a4a;
    padding-top: 120px;
  }

  /* 섹션 타이틀 */
  .step-section-title {
    text-align: center;
    font-size: 38px;
    letter-spacing: 0.1em;
    margin-bottom: 60px;
    color: #333333;
    font-weight: normal;
    font-family: 'Noto Serif JP';
  }

  /* ==========================================
     전체 그리드 레이아웃 
     ========================================== */
  .step-grid-container {
    display: flex;
    justify-content: space-between;
    gap: 15px;
  }

  /* 개별 STEP 컬럼 (상단 카드 + 하단 설명) */
  .step-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
  }

/* PC버전 구분선: 위쪽 흰색 박스를 제외하고 아래쪽 영역에만 표시 */
.step-column:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 390px; /* 흰색 박스 높이(약 220px) + 여백을 제외하고 아래부터 시작하도록 지정 */
  bottom: 0;
  width: 1px;
  border-right: 1px dashed #cccccc;
}

  /* ------------------------------------------
     상단 카드 요소 (1, 2, 3)
     ------------------------------------------ */
  .top-card-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #FFF;
    padding-top: 20px;
    padding-bottom: 30px;
    margin-bottom: 30px;
  }

  .top-white-box {
    width: 100%;
    background-color: #ffffff;
    padding: 20px 10px 0px 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 220px;
  }

  .box-left-img {
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box-left-img img {
    max-width: 100%;
    max-height: 250px;
    height: auto;
  }

  .box-right-content {
    width: 55%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .english-title-img {
    max-height: 50px;
    width: auto;
    margin-bottom: 10px;
  }

  .step-badge {
    display: inline-block;
    border: 1px solid #4a4a4a;
    padding: 4px 24px 4px 18px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.05em;
    position: relative;
    margin-bottom: 12px;
    background-color: #fffde8;
  }

  .step-catchphrase {
    font-family: 'Noto Serif JP';
    font-size: 24px;
    line-height: 1.4;
    font-weight: 600;
    color: #333333;
    text-align: left;
    word-break: keep-all;
  }

  .category-pill {
    background-color: #83d4ce;
    color: #ffffff;
    font-size: 14px;
    padding: 3px 20px;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 6px;
    text-align: center;
  }

  .product-title {
    font-size: 14px;
    color: #4a4a4a;
    letter-spacing: -0.02em;
    text-align: center;
    white-space: nowrap;
  }

  /* ------------------------------------------
     하단 설명 요소 (4, 5, 6)
     ------------------------------------------ */
  .bottom-info-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .usage-text {
    font-size: 17px;
    line-height: 1.7;
    color: #4a4a4a;
    margin-bottom: 30px;
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dosage-box {
    width: 100%;
    background-color: #83d4ce;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px;
    box-sizing: border-box;
    font-size: 14px;
    position: relative;
  }

  .dosage-box::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 16px solid #83d4ce;
  }

  .dosage-label {
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    padding-right: 8px;
    width: 35%;
    color: #ffffff;
  }

  .dosage-value {
    font-size: 19px;
    font-weight: 600;
    flex: 1;
    text-align: center;
    color: #FFF;
  }

  .tip-text {
    font-family: 'Noto Serif JP';
    font-size: 20px;
    color: #555555;
    margin-top: 32px;
    line-height: 1.9;
  }

  /* ==========================================
     모바일 반응형 (768px 이하)
     ========================================== */
  @media (max-width: 768px) {
    /* 세로 1열 정렬로 변경하여 1 -> 4 -> 2 -> 5 -> 3 -> 6 순서로 표시 */
    .step-grid-container {
      flex-direction: column;
      gap: 50px;
    }

    .step-column:not(:last-child)::after {
      display: none;
    }

    .top-card-column {
      margin-bottom: 15px;
    }

    .product-title {
      white-space: normal;
    }
  }

/* ==================================================
   section04 : 6つのフリー処方  (index.php 인라인 <style>에서 이동)
   ================================================== */

  /* 전체 영역 컨테이너 */
  .free-section-wrapper {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    color: #4a4a4a;
    text-align: center;
  }

  /* 메인 타이틀 */
  .free-main-title {
  font-family: 'Noto Serif JP';
    font-size: 38px;
    color: #333333;
    letter-spacing: 0.1em;
    margin-bottom: 40px;
    font-weight: normal;
  }

  /* 서브 타이틀 문구 */
  .free-sub-title {
    font-size: 20px;
    color: #555555;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
  }

  /* 주석 각주 문구 */
  .free-note {
    font-size: 14px;
    color: #777777;
    margin-bottom: 40px;
  }

  /* 6개의 프리 원형 아이콘 그리드 */
  .free-circle-grid {
  	  padding-top:30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 60px;
  }

.free-circle-item {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background-color: #83d4ce;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  padding: 10px;
  box-sizing: border-box;
  letter-spacing: 0.02em;
  position: relative; /* 가상 요소의 기준점 설정 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* 원 안쪽 흰색 테두리 선 생성 */
.free-circle-item::after {
  content: "";
  position: absolute;
  top: 5px;    /* 원 가장자리로부터 떨어진 거리 */
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.85); /* 얇은 흰색 테두리 */
  border-radius: 50%; /* 안쪽 선도 원형으로 */
  pointer-events: none; /* 클릭 이벤트 방해 방지 */
}

  /* 하단 구매 버튼 영역 */
  .buy-buttons-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    max-width: 680px;
    margin: 0 auto;
    padding-top:60px;
  }

  /* 모바일 반응형 */
  @media (max-width: 768px) {
  .step-section-title {
      font-size: 32px;
  }
    .free-main-title {
      font-size: 32px;
    }
    .free-sub-title {
      font-size: 13px;
    }
    .free-circle-grid {
      gap: 10px;
    }
    .free-circle-item {
      width: 100px;
      height: 100px;
      font-size: 11px;
    }
    .buy-buttons-wrapper {
      flex-direction: column;
      gap: 10px;
      padding-top:0px;
    }
  }

/* ==================================================
   section03 : Q&A  (index.php 인라인 <style>에서 이동)
   ================================================== */

  /* 전체 영역 컨테이너 */
  .qa-section-wrapper {
    width: 100%;
    max-width: 912px;
    margin: 0 auto;
    box-sizing: border-box;
    color: #4a4a4a;
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

  /* 개별 Q&A 아이템 박스 */
  .qa-item {
    width: 100%;
  }

  /* Q 질문 영역 (민트색 배경 + q.png 배경 이미지) */
  .qa-question-box {
    background-color: #e1f3f3; /* 연한 민트 배경 */
    /* Q 배경 이미지 설정 */
    background-image: url('./pc_new/q.png');
    background-repeat: no-repeat;
    background-position: 20px center; /* 왼쪽에서 20px, 세로 중앙 */
    background-size: 52px auto;        /* Q 아이콘 크기 */
    
    padding: 25px 20px 25px 85px;      /* 왼쪽 패딩을 65px 주어 배경 이미지와 글자 안 겹치게 처리 */
    box-sizing: border-box;
  }

  /* 질문 텍스트 */
  .q-text {
    font-size: 18px;
    color: #555555;
    letter-spacing: 0.05em;
    text-align:left;
    font-weight:500;
  }

  /* A 답변 영역 (흰색 배경 + a.png 배경 이미지) */
  .qa-answer-box {
    background-color: #ffffff;
    border: 1px solid #e1f3f3;
    margin-top: -1px;
    
    /* A 배경 이미지 설정 */
    background-image: url('./pc_new/a.png');
    background-repeat: no-repeat;
    background-position: right 25px top 15px; /* 우측에서 25px, 위에서 15px 떨어진 위치 */
    background-size: 45px auto;               /* A 아이콘 크기 */
    
    padding: 25px 80px 25px 70px;              /* 오른쪽 패딩을 80px 주어 배경 이미지와 글자 안 겹치게 처리 */
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    
    margin-top:15px;
  }

  /* 답변 텍스트 */
  .a-text {
    font-size: 17px;
    line-height: 1.8;
    color: #555555;
    letter-spacing: 0.03em;
    text-align:left;
  }

  /* 모바일 반응형 */
  @media (max-width: 768px) {
    .qa-question-box {
      background-position: 12px center;
      background-size: 26px auto;
      padding: 12px 15px 12px 48px;
    }
    .qa-answer-box {
      background-position: right 12px top 12px;
      background-size: 32px auto;
      padding: 20px 50px 20px 20px;
    }
    .q-text {
      font-size: 13px;
    }
    .a-text {
      font-size: 13px;
      line-height: 1.6;
    }
  }

/* ==================================================
   section03 : PUREAL PRODUCTS 슬라이더  (index.php 인라인 <style>에서 이동)
   ================================================== */

/* 페이징의 기준점을 슬라이더 자신으로 고정 (없으면 section03 기준으로 튀어나감) */
.flexslider113,
.flexslider114 {
  position: relative;
  margin-bottom: 70px;
}

.flexslider113 .flex-control-nav,
.flexslider114 .flex-control-nav {
  width: 100%;
  position: absolute;
  left: 0;
  text-align: center;
  padding: 0;
  bottom: -45px;
}

.flexslider114 .slides img {
  width: 100%;
  height: auto;
}

/* ==================================================
   section01 : 모바일 상품정보 (기존 <table> 대체)
   ================================================== */
.sp-prd{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin-bottom:15px;
}
.sp-prd-img{
  flex:0 0 45%;
  min-width:0;
}
.sp-prd-img img{
  display:block;
  width:100%;
  max-width:350px;
  height:auto;
  margin:0 auto;
}
.sp-prd-list{
  flex:1;
  min-width:0;
  margin:0;
  text-align:left;
  font-size:0.8em;
  line-height:1.5;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
.sp-prd-list dt{
  font-weight:900;
  margin-top:10px;
  font-family: noto Serif JP;
  font-size: 1.1em;
}
.sp-prd-list dt:first-child{
  margin-top:0;
}
.sp-prd-list dd{
  font-family: noto Serif JP;
  margin:0;
}
.sp-prd-list dd.limit{
  font-weight:600;
}

/* ==================================================
   모바일 상단 비주얼 (텍스트 애니메이션)
   - 배경 : mobile_new/HP_TOP_18_m_no_text.png (430x932)
   - 위치/크기는 원본 이미지 430px 기준 px 값 × --u 로 지정
   ================================================== */
.m-hero{
  position:relative;
  width:100%;
  overflow:hidden;
  container-type:inline-size;
}
.m-hero__bg{
  display:block;
  width:100%;
  height:auto;
}
.m-hero__txt{
  --u:calc(100vw / 430);
  position:absolute;
  inset:0;
  pointer-events:none;
}
@supports (width:1cqw){
  .m-hero__txt{ --u:calc(100cqw / 430); }
}
.m-hero .m-hero__txt p{
  position:absolute;
  left:0;
  right:0;
  margin:0;
  padding:0;
  line-height:1;
  text-align:center;
  white-space:nowrap;
  color:#111;
  font-family:'Noto Serif JP', serif;
  transform:translateY(-50%);
}
.m-hero .m-hero__txt p span{
  display:inline-block;
  opacity:0;
  animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
}
/* 1행 : 発酵の力で、 */
.m-hero .m-hero__txt .m-hero__l1{
  top:calc(var(--u) * 175);
  left:calc(var(--u) * -12);
  font-size:calc(var(--u) * 28.5);
  font-weight:600;
  font-feature-settings:"palt";
  letter-spacing:.01em;
}
.m-hero .m-hero__l1 span{ animation:mHeroUp 1.2s .3s both; }
/* 2행 : ゆらぎ肌をすこやかな肌へ導く */
.m-hero .m-hero__txt .m-hero__l2{
  top:calc(var(--u) * 227);
  font-size:calc(var(--u) * 26.8);
  font-weight:600;
  font-feature-settings:"palt";
  letter-spacing:.04em;
}
.m-hero .m-hero__l2 span{ animation:mHeroUp 1.2s .75s both; }
/* 영문 */
.m-hero .m-hero__txt .m-hero__en{
  top:calc(var(--u) * 278.5);
  font-size:calc(var(--u) * 15);
  font-weight:500;
  letter-spacing:.045em;
}
.m-hero .m-hero__en span{ animation:mHeroSpread 1.6s 1.3s both; }
/* 가타카나 */
.m-hero .m-hero__txt .m-hero__jp{
  top:calc(var(--u) * 313);
  font-size:calc(var(--u) * 17.2);
  font-weight:700;
  font-feature-settings:"palt";
}
.m-hero .m-hero__jp span{ animation:mHeroFade 1.4s 1.7s both; }

@keyframes mHeroUp{
  from{ opacity:0; transform:translateY(40%); filter:blur(6px); }
  to  { opacity:1; transform:translateY(0);   filter:blur(0); }
}
@keyframes mHeroSpread{
  from{ opacity:0; letter-spacing:.2em; filter:blur(4px); }
  to  { opacity:1; letter-spacing:.045em; filter:blur(0); }
}
@keyframes mHeroFade{
  from{ opacity:0; filter:blur(4px); }
  to  { opacity:1; filter:blur(0); }
}
@media (prefers-reduced-motion:reduce){
  .m-hero .m-hero__txt p span{ animation:none; opacity:1; }
}