@charset "UTF-8";

.phorese_pro {
  width: 100%;
  margin-bottom: 4%;
}
.phorese_inner {
  width: min(100%, 760px);
  margin: auto;
  background: #fff;
}
.phorese_pro h1,
.phorese_pro h2,
.phorese_pro h3 {
  padding: 0;
  margin: 0;
  border: none;
}
.phorese_pro ol,
.phorese_pro ol li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.phorese_pro img {
  vertical-align: bottom;
  width: 100%;
  height: auto;
  margin-bottom: 0;
}
/* --------------------------------------------------
   価格エリア
   -------------------------------------------------- */
/* 共通 */
.phorese_pro .bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ---------- NOTE: FVの下 ---------- */
.phorese_pro .cv_top {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 1447;
  overflow: hidden;
}
.phorese_pro .cv_top .cv-price {
  position: absolute;
  top: 67.3%;
  left: 50%;
  transform: translateX(-50%);
  width: 30.4%;
  height: auto;
}
/* ---------- NOTE: HOW TO USEの次 ---------- */
.phorese_pro .cv_bottom {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 1602;
  overflow: hidden;
}
.phorese_pro .cv_bottom .cv-price {
  position: absolute;
  bottom: 23.22%;
  left: 50%;
  transform: translateX(-50%);
  width: 30.4%;
  height: auto;
}
.phorese_pro .cv_bottom .cv-btn {
  bottom: 10%;
}
/* ---------- 共通：購入ボタン ---------- */
.phorese_pro .cv-btn {
  position: absolute;
  bottom: 11%;
  left: 50%;
  transform: translateX(-50%);
  width: 82%;
  /* max-width: 640px; */
}
.phorese_pro .cv-btn a {
  display: block;
  width: 100%;
  text-decoration: none;
}
.phorese_pro .cv-btn .btn-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 26px 30px rgba(158, 115, 124, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}
.phorese_pro .cv-btn a:hover .btn-img {
  transform: translateY(3px);
  box-shadow: 0 8px 25px rgba(158, 115, 124, 0.4);
  filter: brightness(1.03);
}
/* マウスやタップでフォーカスされた時だけアウトラインを消す */
.phorese_pro a:focus:not(:focus-visible) {
  outline: none;
}
.phorese_pro a {
  -webkit-tap-highlight-color: transparent; /* スマホでのタップ時の黒い影も防止 */
}
/* --------------------------------------------------
   phorese
   -------------------------------------------------- */
.phorese_pro .phorese {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 1577;
  overflow: hidden;
}
.phorese_pro .phorese .phorese_text-01 {
  position: absolute;
  top: 8.75%;
  left: 50%;
  transform: translateX(-50%);
  width: 78.6%;
  height: auto;
}
.phorese_pro .phorese .phorese_text-02 {
  position: absolute;
  bottom: 4.43%;
  right: 5%;
  width: 57.3%;
  height: auto;
}
/* --------------------------------------------------
   point
   -------------------------------------------------- */
.phorese_pro .point_01 {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 949;
  overflow: hidden;
}
.phorese_pro .point_text-01 {
  position: absolute;
  top: 14.6%;
  left: 8.4%;
  width: 75.2%;
  height: auto;
}
.phorese_pro .point_02 {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 1300;
  overflow: hidden;
}
.phorese_pro .point_text-02 {
  position: absolute;
  top: 4.92%;
  left: 50%;
  transform: translateX(-50%);
  width: 74.6%;
  height: auto;
}
/* --------------------------------------------------
   intro
   -------------------------------------------------- */
.phorese_pro .intro_01 {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 1252;
  overflow: hidden;
}
.phorese_pro .intro_text-01 {
  position: absolute;
  top: 6.86%;
  left: 50%;
  transform: translateX(-50%);
  width: 86.7%;
  height: auto;
}
.phorese_pro .intro_02 {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 1876;
  overflow: hidden;
}
.phorese_pro .intro_text-02 {
  position: absolute;
  top: 13.48%;
  left: 8%;
  width: 53%;
  height: auto;
}
.phorese_pro .intro_list {
  position: absolute;
  top: 30.43%;
  left: 6%;
  width: 88%;
}
.phorese_pro .intro_list li {
  background-color: #ffffff;
  padding: 7.5% 5.8%;
  /* 最小15px、基本は3vw、最大30px */
  border-radius: clamp(15px, 3vw, 30px);
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.03);
}
.phorese_pro .intro_list li + li {
  margin-top: 5.3%;
}
/* --------------------------------------------------
   voice
   -------------------------------------------------- */
.phorese_pro .voice {
  background-color: #eddcdc;
  padding: 12.5% 0 10%;
}
.phorese_pro .voice h2 {
  width: 62.2%;
  margin: 0 auto 6.4%;
}
.phorese_pro .voice li {
  margin-bottom: 5%;
}
.phorese_pro .voice li:nth-of-type(2n + 1){
  padding-left: 5.3%;
}
.phorese_pro .voice li:nth-of-type(2n){
  padding-right: 5.3%;
}
.phorese_pro .voice .note {
  width: 87.2%;
  margin: auto;
}
/* --------------------------------------------------
   mode
   -------------------------------------------------- */
/* ---------- .mode_01 ---------- */
.phorese_pro .mode_01 {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 1543;
  overflow: hidden;
}
.phorese_pro .mode_text-01 {
  position: absolute;
  top: 44.91%;
  left: 50%;
  transform: translateX(-50%);
  width: 83.3%;
  height: auto;
}
/* ---------- .mode_02 ---------- */
.phorese_pro .mode_02 {
  position: relative;
  background: url(/img/usr/static/phorese_pro_2608/mode_bg02.jpg) no-repeat;
  background-size: 100%;
}
.phorese_pro .mode_02 h2 {
  position: absolute;
  top: 3.73%;
  left: 50%;
  transform: translateX(-50%);
  width: 85.3%;
}
.phorese_pro .mode_02 .main {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 3485;
  overflow: hidden;
}

.phorese_pro .mode_02 .main h3 {
  position: absolute;
  top: 21.72%;
  left: 7.8%;
  width: 54.3%;
  height: auto;
}
.phorese_pro .mode_out-list {
  position: absolute;
  top: 28.98%;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  height: auto;
}
.phorese_pro .mode_out-list li+li {
  margin-top: 5%;
}
/* ---------- .mode_03 ---------- */
.phorese_pro .mode_03 .main {
  background: url(/img/usr/static/phorese_pro_2608/mode_bg03.jpg) no-repeat;
  background-size: 100%;
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 1965;
  overflow: hidden;
}
.phorese_pro .mode_03 .main h3 {
  position: absolute;
  top: 12.46%;
  left: 7.8%;
  width: 49.8%;
  height: auto;
}
.phorese_pro .mode_in-list {
  position: absolute;
  top: 25.34%;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  height: auto;
}
/* ---------- あわせておすすめ 共通 ---------- */
.phorese_pro .mode_recom {
  padding: 0 6% 11%;
}
.phorese_pro .mode_recom h3 {
  margin-bottom: 7%;
}
.phorese_pro .mode_recom_cv {
  /* clamp(最小値, 推奨値, 最大値) */
  --gap: clamp(8px, 1.4vw, 14px);

  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
/* ---------- あわせておすすめ 共通 購入ボタン ---------- */
.phorese_pro .recom_cv-btn a:hover .btn-img {
  transform: translateY(3px);
  transition: transform 0.3s ease;
} 
/* ---------- あわせておすすめ OUT ---------- */
.phorese_pro .mode_recom.out {
  background-color: #f0f3f8;
}
.phorese_pro .mode_recom_cv.out {
  background-color: #ffffff;
  border-radius: clamp(10px, 3vw, 20px);
}
.phorese_pro .mode_recom_cv.out div {
  width: 59.09%;
  margin: 9.7% 0 0 0;
}
.phorese_pro .mode_recom_cv.out .recom_cv-img {
  width: 24.09%;
  margin: 4.4% 0 0 4.2%;
}
.phorese_pro .mode_recom_cv.out .recom_cv-btn {
  margin-top: 4%;
}
/* ---------- あわせておすすめ IN ---------- */
.phorese_pro .mode_recom.in {
  background-color: #f7edeb;
}
.phorese_pro .mode_recom_cv.in li {
  flex: 0 0 calc(50% - (var(--gap) / 2));
  /* 画面が狭くなっても要素が潰れないように最小幅を打ち消す */
  min-width: 0;
  background-color: #ffffff;
  border-radius: clamp(10px, 3vw, 20px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.phorese_pro .mode_recom_cv.in li>div {
  padding: 0 7.78% 10%;
}
.phorese_pro .mode_recom_cv.in li .recom_cv-btn {
  margin-top: 3%;
}
/* --------------------------------------------------
   HOW TO
   -------------------------------------------------- */
.phorese_pro .howto {
  background-color: #ece8e5;
  border-top: 1px solid #ffffff;
  padding-bottom: 13%;
}
.phorese_pro .howto h2 {
  width: 43.8%;
  margin: 13.3% auto 8.5%;
}
.phorese_pro .howto li+li {
  margin-top: 7%;
}
.phorese_pro .howto li:last-of-type {
  margin-top: 0.6%;
}
/* --------------------------------------------------
   FAQ
   -------------------------------------------------- */
.phorese_pro .faq {
  background-color: #ffffff;
  padding: 10% 6% 15%;
}
.phorese_pro .faq h2 {
  width: 31.4%;
  margin: auto;
  margin-bottom: 8.4%;
}
.phorese_pro .faq li+li {
  margin-top: 7.8%;
}
/* --------------------------------------------------
   注意事項
   -------------------------------------------------- */
.phorese_pro .attention {
  background-color: #f0f0f0;
  padding: 10%;
}
/* PC向けスタイル */
@media (min-width: 1025px) {
  .phorese_inner {
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
  }
}
/* --------------------------------------------------
   商品詳細ページ
   -------------------------------------------------- */
/* ---------- NOTE: FVの下 ---------- */
.block-goods-detail .phorese_pro .cv_top {
  aspect-ratio: 1000 / 1172;
}
.block-goods-detail .phorese_pro .cv_top .cv-price {
  top: 83.10%;
}
/* ---------- NOTE: mode main ---------- */
.block-goods-detail .phorese_pro .mode_02 .main {
  aspect-ratio: 1000 / 3345;
}
.phorese_pro .mode_03 .main {
  aspect-ratio: 1000 / 1834;
}
/* 
横幅 (width) ＝ (パーツの横幅 ÷ 全体の横幅) × 100

位置 (left) ＝ (パーツの左端X座標 ÷ 全体の横幅) × 100

位置 (top) ＝ (パーツの上端Y座標 ÷ 全体の縦幅) × 100

右（右の余白px ÷ 全体の横幅px）× 100
 */