@charset "UTF-8";

/* このファイルに記載することでCSSを上書きできます
html {
  color: #F00;
}
*/

:root {
/* color site */
  --color-primary: #d87b94;
  --color-secondary : #DFCDBE; /* Sacraベージュ */
  --color-red: #E2387F; /* Sacraイベントカラー */
  --color-gray: #E1E1E1; /* Sacraグレー */
  --color-gray-light: #EAEAEA; /* 薄グレー */
  

/* font */
  --font-en: "Cormorant Garamond", serif;
  --font-yugothic: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  --font-yumincho: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

@media screen and (max-width: 1200px) {
  html{
    font-size: 62.5%;
  }
}

/* =============================================================
    Site
============================================================= */
/* Header 共通
------------------------------------------------------------- */
.s-header-wrap__logo {
  width: 12rem;
}

.s-header__cartCnt {
  font-family: var(--font-ja);
}

  .s-header-miniCart-head__title {
    font-family: var(--font-ja);
}

  .s-header-miniCart-head__price {
    font-family: var(--font-ja);
  }
  
@media screen and (min-width: 768px) {
/*-----------------------------------------------------------
    Header PC用
------------------------------------------------------------- */
  .s-header-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -15px; /* ←外側に */
    height: 15px;
    background: var(--color-secondary);
    z-index: 0; /* 必要に応じて調整 */
  }

  .s-header-wrap__logo {
    display: block;
    width: 16rem;
  }
  
  .s-header-userNav__title {  
    font-size: 1.3rem;
  }
  
  .s-header-userNav__navLink > a {  
    font-size: 1.3rem;
  }
  
  .s-header-categoryNav__head {
    font-size: 1.3rem;
  }


  .s-header-categoryNav__body {
    background: rgba(255, 255, 255, 0.8);
  }

  .s-header-categoryNav__navLink > a:hover {
    background-color: var(--color-gray-light);
  }
}

/*===========================================================
   BODY 共通
------------------------------------------------------------- */

/** タイトル英字 */
.p-homeSection__title {
  text-align: left;
}

/**
 * #p-homeContentsUnderBtn
 */
.p-homeContentsUnderBtn {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5rem;
  padding-top: 0;
  text-align: right;
  max-width: var(--container-small);
}
@media screen and (min-width: 768px) {
/*-----------------------------------------------------------
   BODY PC用
------------------------------------------------------------- */
/** タイトルエリア */
  .p-homeSection {
  	width: 95%;
    margin-left: auto;
    margin-right: 0;
    padding-right: 2.4rem;
    padding-left: 2.4rem;
    padding-block-start: 50px;
  align-items: flex-end;
  }
/** タイトル英字 */
  .p-homeSection__title {
    /*font-size: 5rem;*/
    font-size: 6rem;
  }
/** タイトル脇の日本語 */
  .p-homeSection__title span {
    font-family: var(--font-ja);
    font-size: 1.4rem;
    margin-left: 2rem;
    margin-bottom: 1rem;
  }
}


/*===========================================================  
/* Footer 共通
------------------------------------------------------------- */
  .s-footer-snsNav__item img {
    display: block;
    width: 100%;
    height: auto;
  }

.s-footer-snsNav__item2 {
  display: block;
  width: 6rem;
}

  .s-footer-snsNav__item2 > a {
    display: block;
  }

  .s-footer-snsNav__item2 img {
    display: block;
    width: 100%;
    height: auto;
  }

  .s-footer-snsNav__item2 img {
    display: block;
    width: 100%;
    height: auto;
  }

@media screen and (min-width: 768px) {
/*-----------------------------------------------------------  
/* Footer PC用
------------------------------------------------------------- */
  .s-footer {
    border-top: 10px solid var(--color-black);
    background-color: var(--color-secondary);
  }
}


/* =========================================================
    カテゴリー 共通
  ---------------------------------------------------------- */
.c-block-category {
  width: 90%; 
  margin: 2rem auto 9rem;
}

.categoryItems {
  position: relative;
}

figure img {
  width: 100%;
  height: 100%;
}

.categoryName {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  pointer-events: none;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.categoryName h3 {
  color: var(--color-black);
  font-family: var(--font-en);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  width: 100%;
  background: rgba(255,255,255,0.6);
  padding-top: 0.5em;
  padding-bottom:0.5em;
}

.categoryName h3 span {
  display: block;
  font-family: var(--font-en);
  font-weight: 400;
}

@media only screen and (min-width: 768px) {
/* ------------------------------------------------
    カテゴリー PC用
  ------------------------------------------------ */
  .categoryList_inner {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 4px;
    grid-template-areas:
      "cleargel gellight brush careitem"
      "cleargel produce colorgel careitem"
      "allinone allinone colorgel sale";
  }

  .cleargel { grid-area: cleargel; }
  .gellight { grid-area: gellight; }
  .brush    { grid-area: brush; }
  .careitem { grid-area: careitem; }
  .produce  { grid-area: produce; }
  .colorgel { grid-area: colorgel; }
  .allinone { grid-area: allinone; }
  .sale     { grid-area: sale; }


  figure {
    overflow: hidden;
  }

  figure img {
    -webkit-transition: 1s all;
    -o-transition: 1s all;
    transition: 1s all;
    object-fit: cover;
  }

  figure img:hover {
    transform: scale(1.2, 1.2);
    transition: 1.4s all;
  }

  .categoryName h3 {
    font-size: 2.8rem;
  }

  .categoryName h3 span {
    font-size: 1.2rem;
    margin-top: 0.7rem;
  }
}

@media only screen and (max-width: 767px) {
  /* ------------------------------------------------
    カテゴリー Mobile用
  ------------------------------------------------ */
  .c-block-category {
    margin: 2rem auto 9rem;
  }

  .categoryList_inner {
    margin: 0 auto;
    display: -ms-grid;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 3px 3px;
    grid-template-areas:
      "cleargel gellight"
      "cleargel brush"
      "produce careitem"
      "colorgel careitem"
      "colorgel sale"
      "allinone allinone";
  }

  .cleargel { grid-area: cleargel; }
  .gellight { grid-area: gellight; }
  .brush    { grid-area: brush; }
  .careitem { grid-area: careitem; }
  .produce  { grid-area: produce; }
  .colorgel { grid-area: colorgel; }
  .allinone { grid-area: allinone; }
  .sale     { grid-area: sale; }
  
  .categoryName h3 {
    font-size: calc(20 * (100vw / 375));
  }

  .categoryName h3 span {
    font-size: calc(9 * (100vw / 375));
    margin-top: calc(5 * (100vw / 375));
  }
}

/* ------------------------------------------------
  お知らせ 共通
------------------------------------------------ */

details summary {
  display: flex;
  align-items: center; /* ←これでアイコンと文字を縦中央に */
  gap: 0.5em; /* ←文字との間隔 */
}

summary {
  position: relative;
  margin-bottom: 1em;
  padding-left: 2.5rem; /* アイコン分の余白 */
  cursor: pointer;
  font-weight: bold;
  list-style: none;
}

summary::before {
  font-family: "FontAwesome";
  content: "\f13a"; /* Font Awesome: fa-chevron-circle-down */
  font-weight: 900; /* solid 用 */
  position: absolute;
  left: 0;
  font-size: 2rem;
  transition: transform 0.3s ease;
  color: var(--color-secondary);
}

details[open] summary::before {
  content: "\f139"; /* Font Awesome: fa-chevron-circle-up */
}

@media only screen and (min-width: 768px) {
/* ------------------------------------------------
  お知らせ PC用
------------------------------------------------ */
  .p-homeNewsList-body {
    align-items: start;
  }
  
  .p-homeNewsList-body__time {
    width: 12em;
  }

  .p-homeNewsList-body__title {
    width: calc(100% - 17rem);
  }

  .p-homeNewsList-body p {
  	padding: 1em;
  	width: 100%;
  	background-color: var(--color-gray-light-middle);
  }
  
/* ------------------------------------------------
  お知らせ一覧ページ PC用
------------------------------------------------ */
  .p-newsList-content__article p {
  	padding: 1em;
  }

  .p-newsList-content__article-date-posted p {
  	padding: 0;
  }
}

/* ------------------------------------------------
  初めての方へ 共通
------------------------------------------------ */
.c-block-Beginners {
  margin: 0 auto 0;
}

.c-block-Beginners_inner {
  background: var(--color-gray-light);
}

.c-block-Beginners_inner_upper h3 {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
}

.c-block-Beginners_inner_upper p {
  text-align: center;
}

.co_btn {
  margin-top: 3.6rem;
}

.c-block-Beginners_inner_bottom {
  border-top: 1px solid var(--color-primary);
}

.merit {
  display: flex;
  justify-content: center;
  align-items: center;
}

.merit li {
  font-weight: 600;
  display: flex;
  align-items: center;
}

.merit li p span {
  display: block;
}


@media only screen and (min-width: 768px) {
  
  /* ------------------------------------------------
    初めての方へ　PC用
  ------------------------------------------------ */
  .c-block-Beginners {
    width: 80%; 
    padding-right: 2rem;
    padding-left: 2rem;
    margin: 0 auto 12rem;
  }

  .c-block-Beginners_inner {
    padding: 7rem 4rem 8rem;
  }

  .c-block-Beginners_inner_upper {
    margin-bottom: 4.5rem;
  }

  .c-block-Beginners_inner_upper h3 {
    font-size: 2.6rem;
  }

  .c-block-Beginners_inner_upper p {
    font-size: 1.6rem;
    margin-top: 2.2rem;
  }

  .c-block-Beginners_inner_upper p .block-SP span {
    font-weight: 600;
  }

  .co_btn {
    margin-top: 3.6rem;
  }

  .c-block-Beginners_inner_bottom {
    padding-top: 5.7rem;
  }

  .merit li {
    margin-left: 2rem;
    font-size: 1.6rem;
    font-weight: 600;
  }

  .merit li p {
    margin-left: 1rem;
  }

  .merit li p span {
    font-size: 2.2rem;
    margin-top: 1rem;
  }
  
  .merit .fa {
    font-size: 6rem;
  }
}

@media only screen and (max-width: 767px) {
  /* ------------------------------------------------
    初めての方へ　Mobile用
  ------------------------------------------------ */
  .c-block-Beginners {
    width: calc(305 * (100vw / 375));
    margin: 0 auto calc(60 * (100vw / 375));
  }

  .c-block-Beginners_inner {
    padding: calc(50 * (100vw / 375)) calc(20 * (100vw / 375)) calc(43 * (100vw / 375));
  }

  .c-block-Beginners_inner_upper {
    margin-bottom: calc(34 * (100vw / 375));
  }

  .c-block-Beginners_inner_upper h3 {
    font-size: calc(21 * (100vw / 375));
  }

  .c-block-Beginners_inner_upper p {
    font-size: calc(13 * (100vw / 375));
    margin-top: calc(19 * (100vw / 375));
  }

  .c-block-Beginners_inner_upper p .block-SP>span {
    font-weight: 600;
  }

  .co_btn {
    margin-top: calc(33 * (100vw / 375));
  }

  .c-block-Beginners_inner_bottom {
    padding-top: calc(40 * (100vw / 375));
  }

  .merit {
    flex-direction: column;
  }

  .merit li {
    font-size: calc(13 * (100vw / 375));
    font-weight: 600;
  }

  .merit li:first-child,
  .merit li:nth-child(2) {
    margin-left: 0;
    margin-bottom: calc(30 * (100vw / 375));
  }

  .merit li svg {
    width: calc(52 * (100vw / 375));
    height: calc(37 * (100vw / 375));
  }

  .merit li:first-child svg,
  .merit li:nth-child(2) svg {
    width: calc(48 * (100vw / 375));
    height: calc(48 * (100vw / 375));
    margin: 0 calc(2 * (100vw / 375));
  }

  .merit li p {
    width: calc(120 * (100vw / 375));
    margin-left: calc(25 * (100vw / 375));
    line-height: 1.384615;
    white-space: nowrap;
  }

  .merit li p span {
    font-size: calc(18 * (100vw / 375));
    margin-top: calc(5 * (100vw / 375));
  }

  .merit .fa {
    font-size: 6rem;
  }
  
  .block-SP {
    display: block;
    margin-top: calc(10 * (100vw / 375));
  }

}