@charset "utf-8";

/* このCSSは、グループページ、フリーページ、商品ページ使えます */
/* 共通 */
:root {
  /* ボタン背景色 */
  --l-btn-bg-c: #2d2d2d;
  /* 背景色 */
  --l-bg-c-gray: #f2f2f2;
  /* ボタン色 */
  --l-bd-c-gray: #c2c2c2;
  --l-bd-c-black: #2d2d2d;
  /* マーカー */
  --l-mark: #fff799;
  /* 強調文字色 */
  --l-txt-emphasis: #ff0000;
}

.l-container {
  letter-spacing: 0.1em;
  padding: var(--sec-spc) 0;
}

.l-container h2,
.l-container h3 {
  font-weight: bold;
}

.l-container h2 mark {
  background: linear-gradient(transparent 70%, var(--l-mark) 30%);
}

.l-container h2 u {
  text-decoration: none;
  border-bottom: 1px solid var(--l-bd-c-black);
}

span.l_heading--bgcolorGray {
  background-color: var(--l-bg-c-gray);
  display: inline-block;
}

.l_heading--bdcolorBlack {
  border-left: 5px solid var(--l-bd-c-black);
}

.l_heading--center {
  text-align: center;
}

.l-container p strong {
  font-weight: bold;
}

.l-container p u {
  text-decoration: none;
  border-bottom: 1px solid var(--l-bd-c-black);
}

span.l-text__red {
  color: var(--l-txt-emphasis);
  font-weight: bold;
}

.l-container p mark {
  background: linear-gradient(transparent 70%, var(--l-mark) 30%);
}

@media screen and (min-width: 768px) {
  .l-container h2 {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .l-container h3 {
    font-size: 18px;
  }

  .l-container>[class*="l-"] {
    margin-bottom: 70px;
  }

  span.l_heading--bgcolorGray {
    padding: 8px 15px;
  }

  .l_heading--bdcolorBlack {
    padding-left: 15px;
  }

}

@media screen and (max-width: 767px) {
  .l-container h2 {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .l-container h3 {
    font-size: 16px;
  }

  .l-container>[class*="l-"] {
    margin-bottom: 40px;
  }

  span.l_heading--bgcolorGray {
    padding: 5px 12px;
  }

  .l_heading--bdcolorBlack {
    padding-left: 10px;
  }

}

/* l-btn */
.l-btn {
  display: block;
  width: 100%;
  text-align: center;
  background-color: var(--l-btn-bg-c);
  border: 1px solid var(--l-btn-bg-c);
  color: var(--c-white);
  border-radius: 70px;
  margin-left: auto;
  margin-right: auto;
}

.l-btn:visited {
  color: var(--c-white);
}

.l-btn--reverse {
  background-color: var(--c-white);
  color: var(--l-btn-bg-c);
}

@media (hover: hover) {
  .l-btn:hover {
    background-color: var(--c-white);
    color: var(--l-btn-bg-c);
    opacity: 1;
  }

  .l-btn--reverse:hover {
    background-color: var(--l-btn-bg-c);
    color: var(--c-white);
    opacity: 1;
  }
}

@media screen and (min-width: 768px) {
  .l-btn {
    padding: 10px 0;
    max-width: 400px;
  }
}

@media screen and (max-width: 767px) {
  .l-btn {
    padding: 8px 0;
    max-width: 300px;
  }
}

/* l-imageWithText */
@media screen and (min-width: 768px) {
  .l-imageWithText>img {
    margin-bottom: 12px;
  }
}

@media screen and (max-width: 767px) {
  .l-imageWithText>img {
    margin-bottom: 8px;
  }
}

/* l-imageListWithText */
.l-imageListWithText>ul:has(li img) {
  display: grid;
}

@media screen and (min-width: 768px) {
  .l-imageListWithText>ul:has(li img) {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 12px;
  }
}

@media screen and (max-width: 767px) {
  .l-imageListWithText>ul:has(li img) {
    gap: 10px;
    margin-bottom: 8px;
  }
}

/* l-imageTitleTextList */
.l-imageTitleTextList>ul:has(li img) {
  display: grid;
}

@media screen and (min-width: 768px) {
  .l-imageTitleTextList>ul:has(li img) {
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 20px;
  }

  .l-imageTitleTextList>ul:has(li img) li img {
    margin-bottom: 10px;
  }

  .l-imageTitleTextList>ul:has(li img) li h3 {
    margin-bottom: 5px;
  }
}

@media screen and (max-width: 767px) {
  .l-imageTitleTextList>ul:has(li img) {
    gap: 30px;
  }

  .l-imageTitleTextList>ul:has(li img) li img {
    margin-bottom: 8px;
  }

  .l-imageTitleTextList>ul:has(li img) li h3 {
    margin-bottom: 3px;
  }
}

/* l-imageTextSide */
.l-imageTextSide>ul:has(li div) {
  display: grid;
}

@media screen and (min-width: 768px) {
  .l-imageTextSide>ul:has(li div) {
    gap: 50px;
  }

  .l-imageTextSide>ul>li:has(div) {
    display: flex;
    gap: 30px;
  }

  .l-imageTextSide>ul>li:has(div) img,
  .l-imageTextSide>ul>li:has(div) div {
    flex: 1;
  }

  .l-imageTextSide__reverse {
    flex-direction: row-reverse;
  }
}

@media screen and (max-width: 767px) {
  .l-imageTextSide>ul:has(li div) {
    gap: 30px;
  }

  .l-imageTextSide>ul>li:has(div) img {
    margin-bottom: 8px;
  }

  .l-imageTextSide>ul>li:has(div) h3 {
    margin-bottom: 3px;
  }
}

/* l-productList */
.l-productList>ul:has(li .l-btn) {
  display: grid;
}

@media screen and (min-width: 768px) {
  .l-productList>ul:has(li .l-btn) {
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 30px;
  }

  .l-productList>ul:has(li .l-btn) img {
    margin-bottom: 10px;
  }

  .l-productList>ul:has(li .l-btn) p {
    margin-bottom: 15px;
  }
}

@media screen and (max-width: 767px) {
  .l-productList>ul:has(li .l-btn) {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 10px;
  }

  .l-productList>ul:has(li .l-btn) img {
    margin-bottom: 8px;
  }

  .l-productList>ul:has(li .l-btn) p {
    margin-bottom: 12px;
    font-size: 12px;
  }

  .l-productList>ul:has(li .l-btn) .l-btn {
    font-size: 12px;
  }
}

/* l-textLinkContainer */
.l-textLinkContainer--bgcolorGray {
  background-color: var(--l-bg-c-gray);
  border: 1px solid var(--l-bg-c-gray);
}

.l-textLinkContainer--bdcolorGray {
  border: 1px solid var(--l-bd-c-gray);
}

@media screen and (min-width: 768px) {
  .l-textLinkContainer {
    padding: 40px 30px;
  }

  .l-textLinkContainer .l-btn {
    margin-top: 20px;
  }
}

@media screen and (max-width: 767px) {
  .l-textLinkContainer {
    padding: 20px 15px;
  }

  .l-textLinkContainer .l-btn {
    margin-top: 20px;
  }
}


/* l-table */
.l-table table {
  width: 100%;
}

.l-table tr {
  display: flex;
  flex-wrap: wrap;
}

.l-table--bgcolorGray th,
.l-table--bgcolorGray td {
  background-color: var(--l-bg-c-gray);
}

@media screen and (min-width: 768px) {

  .l-table td,
  .l-table th {
    padding: 25px 30px;
  }

  .l-table th {
    width: 30%;
  }

  .l-table td {
    flex: 1;
  }

  .l-table--bdcolorGray tr:first-child th,
  .l-table--bdcolorGray tr:first-child td {
    border-top: 1px solid var(--l-bd-c-gray);
  }

  .l-table--bdcolorGray th,
  .l-table--bdcolorGray td {
    border-bottom: 1px solid var(--l-bd-c-gray);
  }

  .l-table--bdcolorGray th {
    position: relative;
  }

  .l-table--bdcolorGray th::after {
    content: "";
    display: inline-block;
    background: var(--l-bd-c-gray);
    width: 1px;
    height: calc(100% - 30px);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .l-table--bgcolorGray tr {
    gap: 10px;
  }

  .l-table--bgcolorGray tr:not(:first-child) th,
  .l-table--bgcolorGray tr:not(:first-child) td {
    margin-top: 10px;
  }
}

@media screen and (max-width: 767px) {

  .l-table td,
  .l-table th {
    width: 100%;
  }

  .l-table th {
    padding: 15px 10px 0;
  }

  .l-table td {
    padding: 15px 10px;
  }

  .l-table--bdcolorGray tr:first-child th {
    border-top: 1px solid var(--l-bd-c-gray);
  }

  .l-table--bdcolorGray td {
    border-bottom: 1px solid var(--l-bd-c-gray);
  }

  .l-table--bgcolorGray tr:not(:first-child) th {
    margin-top: 10px;
  }
}

/* 個別余白調整用クラス */
.mgb10 {
  margin-bottom: 10px;
}

.mgb20 {
  margin-bottom: 20px;
}

.mgb30 {
  margin-bottom: 30px;
}

.mgb40 {
  margin-bottom: 40px;
}

.mgb50 {
  margin-bottom: 50px;
}

.mgb60 {
  margin-bottom: 60px;
}

.mgb70 {
  margin-bottom: 70px;
}

.mgb80 {
  margin-bottom: 80px;
}

.mgb90 {
  margin-bottom: 90px;
}

.mgb100 {
  margin-bottom: 100px;
}

/* ------------------- 商品詳細jojova -------------------- */
:root {
  --c-gold-700: #A57220;
}

/* ------------------- Reason -------------------- */
.p-reason {
  position: relative;
  background-color: var(--c-gold-100);
  z-index: 1;
}

.p-reason::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  aspect-ratio: 440/740;
  width: 100%;
  z-index: 2;
  background: url(/asset2026/images/product/jojova/p-jojova_bg.jpg) no-repeat center top/contain;
  pointer-events: none;
}

.p-common__ttl {
  text-align: center;
  padding-block: var(--spc-100);
  position: relative;
  z-index: 2;
}

.p-common__ttlEn {
  display: inline-block;
  font-family: var(--ff-serif);
  font-size: var(--fz-14);
  color: var(--c-gold-700);
  border-bottom: 1px solid var(--c-gold-600);
  padding-bottom: 6px;
  margin-bottom: var(--spc-20);
}

.p-common__ttlJa {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-inline: auto;
  font-family: var(--ff-serif);
  color: var(--c-gold-700);
  background: url(/asset2026/images/product/jojova/ttl-bg.svg) no-repeat center/cover;
  aspect-ratio: 510/91;
  position: relative;
}

.p-reasonSpc {
  background: linear-gradient(to bottom, #fff 0%, #ffffff00 100%);
  padding: var(--spc-80) 0;
  margin-bottom: var(--spc-80);
  position: relative;
  z-index: 2;
}

.p-reasonSpc::after {
  content: "";
  width: 95%;
  height: 1px;
  background-color: rgba(197, 157, 98, .45);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
}

.p-reasonSpc__kicker {
  display: block;
  text-align: center;
  font-family: var(--ff-serif);
  font-size: var(--fz-14);
  color: var(--c-gold-700);
  width: fit-content;
  margin: 0 auto var(--spc-20);
  padding-bottom: var(--spc-15);
  position: relative;
}

.p-reasonSpc__kicker::after {
  content: "";
  width: 30px;
  height: 1px;
  position: absolute;
  background-color: var(--c-gold-600);
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.p-reasonSpc__kicker span {
  font-size: 1.2em;
}

.p-reasonSpc__ttl {
  text-align: center;
  font-family: var(--ff-serif);
}

.p-reasonSpc__wrap {
  display: grid;
  align-items: start;
  width: var(--inner-w);
  max-width: 1050px;
  margin-inline: auto;
}

.p-reasonSpc__wrap--rev {
  direction: rtl;
}

.p-reasonSpc__wrap--rev>* {
  direction: ltr;
}

.p-reasonSpc__txt {
  line-height: 2;
}

.p-reasonSpc__txt span+span {
  display: block;
}

.p-reasonSpc__txtLead {
  color: var(--c-gold-600);
  font-family: var(--ff-serif);
  margin-top: var(--spc-20);
  margin-bottom: var(--spc-20);
  line-height: 1.8;
}

.p-reasonSpc__txtNote {
  margin-top: var(--spc-30);
}

.p-reasonSpc__ttlSub {
  margin-bottom: 10px;
}

.p-reasonSpc__tag {
  display: inline-block;
  font-family: var(--ff-serif);
  font-size: var(--fz-18);
  color: var(--c-gold-600);
  background-color: #F8F7F2;
  padding: 5px var(--spc-10);
  margin-bottom: var(--spc-10);
}

.p-reasonSpc__sub {
  margin-top: var(--spc-30);
  border: 1px solid rgba(197, 157, 98, .6);
  background: var(--c-white);
  padding: var(--spc-10);
  max-width: 400px;
  width: 90%;
  margin-inline: auto;
}

.p-reasonSpc__sub--wide {
  width: 100%;
  max-width: unset;
  margin-bottom: var(--spc-25);
}

.p-reasonSpc__cap {
  margin-top: var(--spc-10);
  line-height: 1.8;
  font-size: var(--fz-14);
  max-width: 400px;
  width: 90%;
  margin-inline: auto;
}

.p-reasonSpc__blocks {
  width: var(--inner-w);
  max-width: 1050px;
  margin-inline: auto;
  display: grid;
  gap: var(--spc-60);
}

.p-reasonSpc__block {
  display: grid;
  align-items: start;
}

.p-reasonSpc__block--imgL {
  grid-auto-flow: dense;
}

.p-reasonSpc__visualStack {
  display: grid;
  gap: var(--spc-30);
}

.p-reasonSpc--last {
  margin-bottom: 0;
}

.p-reasonSpc__wrap--stack {
  display: grid;
  grid-template-columns: 1fr !important;
}

.p-reasonSpc__row {
  display: grid;
  align-items: center;
}

.p-reasonSpc__body--center {
  display: flex;
  align-items: center;
}

.p-useScene__grid.p-useScene__grid--point {
  grid-template-columns: 1fr;
}

.p-usePoint {
  position: relative;
  margin-top: var(--spc-45);
  padding: var(--spc-35) var(--spc-40);
  background: var(--c-gold-100);
  display: flex;
  gap: var(--spc-60);
}

.p-usePoint__label {
  width: fit-content;
  margin-bottom: 0;
  padding-bottom: 10px;
  font-family: var(--ff-serif);
  font-size: var(--fz-20);
  color: var(--c-gold-600);
}

.p-usePoint__label::after {
  content: "";
  display: block;
  height: 1px;
  background-color: var(--c-gold-600);
}

.p-usePoint__txt {
  max-width: 600px;
  margin-top: 0;
  line-height: 2;
}

.p-usePoint__visual {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-15%, -50%);
  width: 30%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 50%;
}

.p-usePoint__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


@media screen and (min-width:768px) {
  .p-common__ttlJa {
    font-size: var(--fz-32);
    padding: var(--spc-30) var(--spc-60);
  }

  .p-reasonSpc__ttl {
    font-size: var(--fz-28);
    margin-bottom: var(--spc-60);
  }

  .p-reasonSpc__wrap {
    grid-template-columns: 1fr 1fr;
    gap: var(--spc-50);
  }

  .p-reasonSpc__block {
    grid-template-columns: 1fr 1fr;
    gap: var(--spc-50);
  }

  .p-reasonSpc__block--imgL {
    grid-template-columns: 1fr 1fr;
  }

  .p-reasonSpc__ttlSub {
    font-size: var(--fz-20);
  }

  .p-reasonSpc__row {
    grid-template-columns: 1fr 1fr;
    gap: var(--spc-50);
  }

  .p-usePoint {
    padding: var(--spc-30);
    margin-block: var(--spc-60) var(--spc-50);
  }

  .p-usePoint__txt {
    width: 60%;
  }

  .p-usePoint__visual {
    max-width: 180px;
  }

  .p-reasonSpc__txt span+span {
    margin-top: var(--spc-40);
  }
}

@media screen and (max-width:767px) {
  .p-common__ttl {
    padding-block: var(--spc-60);
  }

  .p-common__ttlJa {
    font-size: 19px;
    padding: var(--spc-20) var(--spc-30);
  }

  .p-reasonSpc {
    padding: var(--spc-60) 0;
    margin-bottom: 0;
  }

  .p-reasonSpc__ttl {
    font-size: 18px;
    padding-inline: 6%;
    margin-bottom: var(--spc-50);
  }

  .p-reasonSpc__wrap {
    gap: var(--spc-30);
  }

  .p-reasonSpc__blocks {
    gap: var(--spc-60);
  }

  .p-reasonSpc__block {
    gap: var(--spc-30);
  }

  .p-reasonSpc__ttlSub {
    font-size: 16px;
  }

  .p-reasonSpc__visual {
    order: -1;
  }

  .p-reasonSpc__row {
    gap: var(--spc-30);
  }

  .p-usePoint {
    padding: var(--spc-25);
    display: grid;
    gap: var(--spc-15);
    grid-template-columns: 1fr 3.5fr;
    align-items: center;
  }

  .p-usePoint__label {
    font-size: 16px;
  }

  .p-usePoint__txt {
    width: 100%;
    margin-top: var(--spc-15);
    padding-right: 0;
    font-size: 12px;
    line-height: 2.05;
  }

  .p-usePoint__visual {
    position: static;
    transform: none;
    width: 130px;
    margin: 0 auto 0;
    border-width: 4px;
    grid-column: span 2;
  }

  .p-reasonSpc__txt span+span {
    margin-top: var(--spc-20);
  }
}

/* -----------------p-recommend----------------- */

.p-recommend {
  background: linear-gradient(to bottom, #F8F7F2 0%, #fff 100%);
}

.p-recommend__wrap {
  position: relative;
}

.p-recommend__wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  border: 1px solid var(--c-gold-700);
  border-bottom: 0;
}

.p-recommend__wrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  border: 1px solid var(--c-gold-700);
  border-top: 0;
}

.p-recommend__ttl {
  font-family: var(--ff-serif);
  color: var(--c-gold-700);
  text-align: center;
  margin-bottom: var(--spc-40);
}

.p-recommend__list {
  --grid-cols-pc: 2;
  --grid-gap-pc: var(--spc-30) 8%;
  --grid-cols-sp: 1;
  --grid-gap-sp: var(--spc-40);
}

.p-recommend__list li {
  display: flex;
  gap: var(--spc-20);
}

.p-recommend__img {
  width: 35%;
  display: none;
}

.p-recommend__img img {
  border-radius: 50%;
}


.p-recommend__ttlSub {
  font-family: var(--ff-serif);
  margin-bottom: var(--spc-10);
}

.p-recommend__txt {
  font-size: var(--fz-14);
}

@media screen and (min-width: 768px) {
  .p-recommend__wrap {
    padding: var(--spc-60) var(--spc-50);
  }

  .p-recommend__ttl {
    font-size: var(--fz-32);
  }

  .p-recommend__ttlSub {
    font-size: var(--fz-24);
  }
}

@media screen and (max-width: 767px) {
  .p-recommend__wrap {
    padding: var(--spc-60) var(--spc-20);
  }

  .p-recommend__ttl {
    font-size: var(--fz-24);
  }

  .p-recommend__ttlSub {
    font-size: var(--fz-20);
  }
}

/* -----------------成分について----------------- */
.p-component {
  background: url(/asset2026/images/product/jojova/p-jojova-component-bg.jpg) no-repeat center center/cover;
}

.p-component__ttl {
  font-family: var(--ff-serif);
  color: var(--c-gold-700);
  padding-left: var(--spc-15);
}

.p-component__wrap {
  display: grid;
  align-items: center;
}

.p-component__list li {
  font-family: var(--ff-serif);
}

.p-component__list li:not(:last-child) {
  padding-bottom: var(--spc-30);
  border-bottom: 1px solid #EEE2D0;
  margin-bottom: var(--spc-30);
}

@media screen and (min-width: 768px) {
  .p-component__ttl {
    font-size: var(--fz-32);
      margin-bottom: var(--spc-40);
  }

  .p-component__wrap {
    grid-template-columns: 1fr 0.9fr;
    gap: var(--spc-50);
  }

  .p-component {
    padding-block: var(--spc-100);
  }

  .p-component__list li {
    font-size: var(--fz-18);
  }
}

@media screen and (max-width: 767px) {
  .p-component__ttl {
    font-size: var(--fz-24);
      margin-bottom: var(--spc-20);
  }

  .p-component__wrap {
    grid-template-columns: 1fr;
    gap: var(--spc-30);
  }

  .p-component__list {
    padding-inline: var(--spc-15);
  }

  .p-component {
    padding-block: var(--spc-80) var(--spc-80);
  }

  .p-component__list li {
    font-size: var(--fz-15);
  }
}

/* -----------------ご使用方法----------------- */
.p-use {
  background: linear-gradient(to bottom, #fff 0%, var(--c-gold-100) 100%);
}

.p-use .p-common__ttl {
  padding-block: 0;
}

.p-common__ttlJa--use {
  background: url(/asset2026/images/product/jojova/ttl-bg-use.svg) no-repeat center/cover;
  aspect-ratio: 206/76;
}

.p-use .p-common__ttl {
  padding-top: 0;
}

.p-common__ttlJa--use {
  background: url(/asset2026/images/product/jojova/ttl-bg-use.svg) no-repeat center/cover;
  aspect-ratio: 206/76;
}

.p-use .g-inner {
  max-width: 900px;
  margin-inline: auto;
}

.p-useMeyasu {
  margin-top: var(--spc-60);
}

.p-useMeyasu__bg {
  background: var(--c-gold-100);
  padding: 5px;
}

.p-useMeyasu__bd {
  border: 1px solid var(--c-gold-700);
  background: var(--c-gold-100);
  padding: var(--spc-40);
}

.p-useMeyasu__ttl {
  text-align: center;
  font-family: var(--ff-serif);
  color: var(--c-gold-700);
  margin-bottom: var(--spc-40);
}

.p-useMeyasu__cntWrap {
  display: grid;
  gap: var(--spc-40);
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-useMeyasu__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-content: center;
}

.p-useMeyasu__img img {
  border-radius: 50%;
}

.p-useMeyasu__txtWrap {
  text-align: left;
}

.p-useMeyasu__tag {
  display: inline-block;
  background: rgba(197, 157, 98, 0.95);
  color: var(--c-white);
  font-size: var(--fz-14);
  line-height: 1;
  padding: 8px 12px;
  margin-bottom: 5px;
}

.p-useMeyasu__serif {
  font-family: var(--ff-serif);
  font-size: var(--fz-20);
}

.p-useMeyasu__small {
  display: block;
  font-size: var(--fz-12);
  opacity: 0.85;
  margin-bottom: 5px;
}

.p-useMeyasu__month {
  font-family: var(--ff-serif);
  font-size: var(--fz-18);
  margin-top: 0;
}

.p-useScene {
  padding-block: var(--spc-70);
  position: relative;
}

.p-useScene+.p-useScene {
  background-image: linear-gradient(to right, var(--c-gold-600) 3px, transparent 3px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  background-position: left top;
  padding-top: var(--spc-50);
  margin-top: var(--spc-50);
}

.p-useScene__kicker {
  text-align: left;
  font-family: var(--ff-serif);
  color: var(--c-gold-700);
  width: fit-content;
  padding-bottom: 12px;
  margin-bottom: var(--spc-25);
  position: relative;
  font-size: var(--fz-14);
}

.p-useScene__kicker::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 36px;
  height: 1px;
  background-color: var(--c-gold-600);
}

.p-useScene__kicker span {
  font-size: var(--fz-20);
}

.p-useScene__grid {
  display: grid;
  align-items: center;
  gap: var(--spc-40);
}

.p-useScene__ttl {
  font-family: var(--ff-serif);
  line-height: 1.7;
  margin-bottom: var(--spc-20);
}

.p-useScene__txt {
  line-height: 2;
  order: 4;
  margin-top: var(--spc-20);
}

.p-useScene__visual img {
  border-radius: 50%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

@media screen and (min-width: 768px) {
  .p-useMeyasu__ttl {
    font-size: var(--fz-20);
  }

  .p-useMeyasu__cntWrap {
    grid-template-columns: 1fr 1fr;
    max-width: 744px;
    margin-inline: auto;
  }

  .p-useScene__grid {
    grid-template-columns: 2.5fr 1fr;
  }

  .p-useScene__ttl {
    font-size: var(--fz-24);
  }

  .p-useMeyasu__item {
    gap: var(--spc-15);
  }

  .p-useMeyasu__img {
    width: 120px;
  }

  .p-useScene__txt {
    font-size: var(--fz-16);
  }

  .p-useSceneWrap {
    margin-top: var(--spc-90);
  }

  .p-useScene__kicker::after {
    left: 0;
  }

}

@media screen and (max-width: 767px) {
  .p-useMeyasu__ttl {
    font-size: var(--fz-20);
  }

  .p-useMeyasu__bg,
  .p-useMeyasu__bd {
    padding: var(--spc-25);
  }

  .p-useMeyasu__item {
    grid-template-columns: 110px 1fr;
    gap: var(--spc-20);
  }

  .p-useMeyasu__img {
    width: 100%;
  }

  .p-useMeyasu__serif {
    font-size: 14px;
  }

  .p-useScene {
    padding-block: var(--spc-55);
  }

  .p-useScene__grid {
    gap: var(--spc-10);
  }

  .p-useScene__visual {
    width: 130px;
    justify-self: center;
  }

  .p-useScene__ttl {
    font-size: var(--fz-20);
    text-align: center;
  }

  .p-useScene__txt {
    font-size: var(--fz-16);
    line-height: 2.05;
    width: var(--inner-w);
    margin-inline: auto;
  }

  .p-useScene__body {
    display: contents;
  }

  .p-useScene__kicker {
    margin-inline: auto;
  }

  .p-useSceneWrap {
    margin-top: var(--spc-60);
  }

  .p-useScene__kicker::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .p-useMeyasu__cntWrap {
    justify-content: center;
  }
}

/* -----------------レビュー----------------- */
.p-use #review-get-link {
  margin-bottom: 0;
}

.p-use #review-get-link .fs-c-button--viewAllReviews {
  background-color: #E8E8E8;
}

@media screen and (min-width: 768px) {
  .p-use #review-get-link {
    margin-top: var(--spc-200);
  }
}

@media screen and (max-width: 767px) {
  .p-use #review-get-link {
    margin-top: var(--spc-100);
  }
}

@media (hover: hover) {
  .p-use #review-get-link .fs-c-button--viewAllReviews:hover {
    background-color: var(--c-gray-300);
  }
}



/* -----------------candyfarmについて----------------- */
.p-brandAbout {
  background: url(/asset2026/images/product/jojova/p-about-bg.jpg) no-repeat center/cover;
}

.p-brandAbout .g-headingContainer {
  margin-bottom: var(--spc-50);
}

.p-brandAbout__txt {
  max-width: fit-content;
  margin-inline: auto;
  text-align: center;
  line-height: 2;
  font-size: var(--fz-16);
}

@media screen and (min-width: 768px){
  .p-brandAbout__txt p+p {
    margin-top: var(--spc-40);
  }
}

@media screen and (max-width: 767px){
  .p-brandAbout__txt p+p {
    margin-top: var(--spc-20);
  }
}