@charset "UTF-8";
/*
 * 参考
 * https://github.com/Andy-set-studio/modern-css-reset/blob/master/src/reset.css
*/
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ul {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
select {
  appearance: none; /* 標準の矢印を消す（全体） */
  -webkit-appearance: none; /* Safari, Chrome */
  -moz-appearance: none; /* Firefox */
  background: none; /* 必要に応じて背景も消す */
  border: none;
}

/*-------------------------------
inner
-------------------------------*/
/*-------------------------------
余白
-------------------------------*/
/*-------------------------------
フォント
-------------------------------*/
/*-------------------------------
ベースフォントサイズ
-------------------------------*/
/*-------------------------------
Color
-------------------------------*/
/*****************************************
 * 数値から単位を取り除く
 * 参考
 * https://css-tricks.com/snippets/sass/
******************************************/
/*****************************************
 * px→remの計算
 * 参考
 * https://webdou.net/sass-rem/
 * Sassではmath.div関数の使用が推奨のため、スラッシュ(/)演算子から変更
******************************************/
/*****************************************
 * vwの計算
 * 参考
 * https://webdou.net/sass-vw/
 * Sassではmath.div関数の使用が推奨のため、スラッシュ(/)演算子から変更
******************************************/
html {
  font-size: 10px;
}
@media (max-width: 389px) {
  html {
    font-size: 2.5641025641vw;
  }
}

body {
  margin-inline: auto;
  max-width: 428px;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "游ゴシック体",
    YuGothic, "Yu Gothic Medium", sans-serif;
  font-weight: 400;
  line-height: 1;
  color: #4d4d4d;
  font-size: 1.6rem;
  background: linear-gradient(90deg, #f7f5ff 0%, #fff7f9 82%);
  /* フォントが可変フォント＆palt対応時のみ有効にしてください */
}
@media screen and (max-width: 767px) {
  body {
    font-size: 1.4rem;
  }
}

a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}

@media (any-hover: hover) {
  a:hover {
    opacity: 0.8;
  }
}
.inner {
  margin: 0 auto;
  max-width: 428px;
  padding: 0 16px;
}
@media screen and (max-width: 767px) {
  .inner {
    padding: 0 16px;
  }
}

@media screen and (max-width: 767px) {
  .pc-view {
    display: none !important;
  }
}

.sp-view {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .sp-view {
    display: inline-block !important;
  }
}

.c-content-bg {
  background-color: #fff;
}

.c-noresult {
  margin-top: 2.4rem;
  font-size: 2.2rem;
  line-height: 2;
  letter-spacing: 0.05em;
  font-weight: 700;
  text-align: center;
}

/*-------------------------------

-------------------------------*/
/*-------------------------------
l-inner
-------------------------------*/
.l-inner {
  margin-inline: auto;
  max-width: 428px;
  padding: 0 16px;
}
@media screen and (max-width: 767px) {
  .l-inner {
    padding: 0 16px;
  }
}

/*-------------------------------
c-cta
-------------------------------*/
.c-cta {
  margin-inline: auto;
  width: 100%;
  max-width: 36rem;
}

.c-cta__btn {
  display: inline-block;
  width: 100%;
  padding: 0.5rem 0;
  border: none;
  border-radius: 9999px;
  background: linear-gradient(90deg, #b5aaff 0%, #ffbbc8 82%);
  font-size: 2rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: #fff;
  text-align: center;
  box-shadow: 3px 3px 3px #ccc;
  cursor: pointer;
  transition: opacity 0.3s ease;
  border: 3px solid #fff;
  position: relative;
}

.c-cta__btn.-official::after {
  content: "";
  width: 2rem;
  height: 0.7rem;
  position: absolute;
  bottom: 50%;
  right: 2.3rem;
  background-image: url(https://202212141058a8t83c48.conohawing.com/clinicfor/lp2/img/cta-arrow.webp);
  background-size: contain;
  background-repeat: no-repeat;
}

/*-------------------------------
c-note
-------------------------------*/
.c-note {
  font-size: 1.1rem;
  line-height: 1.1818181818;
  font-weight: 500;
}

/*-------------------------------
p-Aclinic
-------------------------------*/
.p-Aclinic {
  margin-top: 4.8rem;
}

.p-Aclinic__01-img {
  width: 100%;
}

.p-Aclinic__01-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  aspect-ratio: 390/695;
}

.p-Aclinic__inner.inner {
  padding-top: 2.4rem;
  padding-bottom: 3.2rem;
  background-color: #fdeaea;
}

.p-Aclinic__review {
  padding-bottom: 3.2rem;
}

/*-------------------------------
p-Bclinic
-------------------------------*/
.p-Bclinic {
  margin-top: 4.8rem;
}

.p-Bclinic__01-img {
  width: 100%;
}

.p-Bclinic__01-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  aspect-ratio: 390/663;
}

.p-Bclinic__inner.inner {
  padding-top: 2.4rem;
  padding-bottom: 3.2rem;
  background-color: #fdeaea;
}

.p-Bclinic__review {
  padding-bottom: 3.2rem;
}

/*-------------------------------
p-Cclinic
-------------------------------*/
.p-Cclinic {
  margin-top: 4.8rem;
}

.p-Cclinic__01-img {
  width: 100%;
}

.p-Cclinic__01-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  aspect-ratio: 390/635;
}

.p-Cclinic__inner.inner {
  padding-top: 2.4rem;
  padding-bottom: 3.2rem;
  background-color: #fdeaea;
}

.p-Cclinic__review {
  padding-bottom: 3.2rem;
}

/*-------------------------------
p-clifor__clinic-swiper
-------------------------------*/
.p-clifor__clinic-swiper {
  padding-bottom: 3.2rem;
  position: relative;
}

.p-clifor__clinic-swiper .swiper,
.p-clifor__clinic-swiper .swiper-slide {
  width: clamp(32rem, -7rem + 100vw, 35.8rem);
}

.p-clifor__clinic-swiper .swiper-pagination {
  bottom: 0;
}

.p-clifor__clinic-swiper .swiper-pagination .swiper-pagination-bullet {
  background: #ccc;
  opacity: 1;
}

.p-clifor__clinic-swiper .swiper-pagination .swiper-pagination-bullet-active {
  background: #f07270;
}

/*-------------------------------
p-clifor
-------------------------------*/
.p-clifor__inner.l-inner {
  padding: 0;
}

.p-clifor__01-img {
  width: 100%;
}

.p-clifor__01-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  aspect-ratio: 390/1227;
}

.p-clifor__cta.c-cta {
  margin-top: 2.4rem;
}

.p-clifor__01-note {
  margin-top: 1.2rem;
  padding: 16px;
}

.p-clifor__02 {
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  padding-inline: 1.5rem;
  padding-bottom: 3.6rem;
  background-color: #fdeaea;
}

.p-clifor__02-img,
.p-clifor__02-1-img {
  margin-inline: auto;
  width: 100%;
}

.p-clifor__02-img img,
.p-clifor__02-1-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.p-clifor__clinic {
  padding-top: 3.2rem;
  padding-inline: 2rem;
  padding-bottom: 1.8rem;
  background-color: #fff;
}

.p-clifor__clinic-swiper {
  margin-top: 1.6rem;
}

/*-------------------------------
p-Dclinic
-------------------------------*/
.p-Dclinic {
  margin-top: 4.8rem;
}

.p-Dclinic__01-img {
  width: 100%;
}

.p-Dclinic__01-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  aspect-ratio: 390/682;
}

.p-Dclinic__inner.inner {
  padding-top: 2.4rem;
  padding-bottom: 3.2rem;
  background-color: #fdeaea;
}

.p-Dclinic__review {
  padding-bottom: 3.2rem;
}

/*-------------------------------
p-footer
-------------------------------*/
.p-footer {
  padding-block: 3.6rem;
  background-color: #fffef0;
}

.p-footer__link {
  font-size: 1.4rem;
  font-weight: 500;
  text-align: center;
}

.p-footer__link a {
  width: 100%;
  display: inline-block;
}

/* new footer info layout (matching dietlp004) */
.p-footer__info {
  max-width: 360px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
}
.p-footer__info p {
  margin: 0;
  font-size: 1.2rem;
  color: #4d4d4d;
  line-height: 1.4;
}
.p-footer__privacy {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.25rem 0.6rem;
  font-size: 1.2rem;
  color: #4d4d4d;
  border-bottom: 1px solid #4d4d4d;
}

@media screen and (max-width: 420px) {
  .p-footer__info {
    padding: 0 12px;
    gap: 0.3rem;
  }
  .p-footer__info p,
  .p-footer__privacy {
    font-size: 1.1rem;
  }
}

/*-------------------------------
p-guide
-------------------------------*/
.p-guide {
  margin-top: 5rem;
}

.p-guide img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.p-guide__head {
  width: 100%;
}

.p-guide__head img {
  aspect-ratio: 390/183;
}

.p-guide__bg {
  padding-top: 5rem;
  background-color: #fffef0;
}

.p-guide__02 {
  margin-top: 5rem;
}

.p-guide__03 {
  margin-top: 5rem;
}

/*-------------------------------
p-hikaku
-------------------------------*/
.p-hikaku {
  margin-top: 2.4rem;
}

.p-hikaku__table {
  margin-top: 1.6rem;
  overflow-x: scroll;
}

.p-hikaku__table-img {
  width: 96.5rem;
  position: relative;
}

.p-hikaku__table-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  aspect-ratio: 965/573;
}

.p-hikaku__table-link {
  width: 12rem;
  height: 5.3rem;
  position: absolute;
  bottom: 1.9%;
  z-index: 10;
}

.p-hikaku__table-link a {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.p-hikaku__table-link.-clifor {
  left: 22.1%;
}

.p-hikaku__note {
  margin-top: 1.6rem;
}

/*-------------------------------
p-intro
-------------------------------*/
.p-intro__inner.l-inner {
  padding: 0;
}

.p-intro__img {
  margin-top: 2.4rem;
}

.p-intro__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  aspect-ratio: 390/325;
}

/*-------------------------------
p-medications
-------------------------------*/
.p-medications {
  padding-top: 2rem;
  padding-inline: 2rem;
  background-color: #fff;
}

.p-medications__title {
  width: 100%;
}

.p-medications__title img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  aspect-ratio: 320/32;
}

.p-medications__swiper {
  margin-top: 2rem;
  position: relative;
}

.p-medications__swiper-button-wrap {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  z-index: 100;
}

.p-medications__swiper .swiper,
.p-medications__swiper .swiper-slide {
  width: clamp(32rem, -7rem + 100vw, 35.8rem);
}

.p-medications__swiper-button-wrap .swiper-button-prev,
.p-medications__swiper-button-wrap .swiper-button-next {
  position: absolute;
  width: 2.8rem;
  height: 2.8rem;
}

.p-medications__swiper-button-wrap .swiper-button-prev {
  left: -1.4rem;
}

.p-medications__swiper-button-wrap .swiper-button-next {
  right: -1.4rem;
}

/*-------------------------------
p-review
-------------------------------*/
.p-review {
  padding-top: 3.2rem;
  padding-inline: 2rem;
  background-color: #fff;
}

.p-review__swiper {
  margin-top: 1.6rem;
  position: relative;
}

.p-review__swiper-button-wrap {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  z-index: 100;
}

.p-review__swiper .swiper,
.p-review__swiper .swiper-slide {
  width: clamp(32rem, -7rem + 100vw, 35.8rem);
}

.p-review__swiper .swiper-slide {
  position: relative;
}

.p-review__swiper .swiper-slide::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  border: 1px solid #f07270;
  border-radius: 15px;
}

.p-review__swiper .swiper-slide .p-review__img {
  transition: max-height 0.3s ease;
}

.p-review__swiper .-collapsed {
  max-height: clamp(22.5rem, -4.184rem + 68.42vw, 25.1rem);
  overflow: hidden;
}

.p-review__swiper .-collapsed::after {
  content: "";
  width: 100%;
  height: 4rem;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  background-image: url(https://202212141058a8t83c48.conohawing.com/clinicfor/lp2/img/review-gradation.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.p-review__swiper .swiper-slide .p-review__toggle {
  all: unset;
  cursor: pointer;
  width: 100%;
  height: 4rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

.p-review__swiper .swiper-slide .p-review__toggle img {
  width: 1.35rem;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.p-review__img:not(.-collapsed) + .p-review__toggle img {
  display: none;
}

.p-review__swiper-button-wrap .swiper-button-prev,
.p-review__swiper-button-wrap .swiper-button-next {
  position: absolute;
  width: 2.8rem;
  height: 2.8rem;
}

.p-review__swiper-button-wrap .swiper-button-prev {
  left: -1.4rem;
}

.p-review__swiper-button-wrap .swiper-button-next {
  right: -1.4rem;
}

/*-------------------------------
p-search
-------------------------------*/
.p-search__select-list {
  padding-inline: 0.3rem;
  font-size: 1.4rem;
  line-height: 1.7142857143;
  font-weight: 500;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.p-search__select-item {
  width: 100%;
  max-width: 11.1rem;
  border: 1px solid #4d4d4d;
  position: relative;
}

.p-search__select-item::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  position: absolute;
  top: 45%;
  right: 1rem;
  transform: translateY(-50%) rotate(45deg);
  border-bottom: 1px solid #4d4d4d;
  border-right: 1px solid #4d4d4d;
  z-index: 1;
}

.p-search__select-item select {
  padding: 0.4rem 1rem;
  width: 100%;
}

.p-search__narrow {
  margin-top: 1.1rem;
  padding: 1rem 1.6rem 2.5rem;
  background-color: #e6e6e6;
}

.p-search__narrow-title {
  font-size: 1.5rem;
  line-height: 1.6;
  font-weight: 600;
  text-align: center;
}

.p-search__narrow-title span {
  position: relative;
}

.p-search__narrow-title span::before {
  content: "";
  width: 100%;
  height: 0.1rem;
  position: absolute;
  bottom: -0.3rem;
  left: 0;
  background-color: #4d4d4d;
}

.p-search__tags {
  margin-top: 1.7rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.p-search__tags.-bottom {
  margin-top: 1rem;
  justify-content: space-between;
}

.p-search__checkbox {
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 14px;
}

.p-search__checkbox input[type="checkbox"] {
  display: none;
}

.p-search__checkbox.select4-1,
.p-search__checkbox.select5-1,
.p-search__checkbox.select6-1 {
  width: calc((100% - 2rem) / 3);
}

.p-search__checkbox.select7-1 {
  width: 40.3374233129%;
}

.p-search__checkbox.select8-1 {
  width: 55.2147239264%;
}

.p-search__checkbox span {
  padding: 0.7rem 0;
  width: 100%;
  display: inline-block;
  border: 1px solid #4d4d4d;
  border-radius: 9999px;
  background-color: #fff;
  color: #4d4d4d;
  transition: all 0.2s ease;
  text-align: center;
}

/* ✅ チェック時の状態：背景黒・文字白・枠線も黒 */
.p-search__checkbox input[type="checkbox"]:checked + span {
  background-color: #4d4d4d;
  color: #fff;
  border-color: #4d4d4d;
}

.p-search__submit {
  margin-top: 1.2rem;
}

.p-search__button {
  display: inline-block;
  width: 100%;
  padding: 0.5rem 0;
  border: none;
  border-radius: 9999px;
  background: linear-gradient(to right, #b5aaff, #ffbbc8);
  font-size: 2rem;
  line-height: 1.8;
  font-weight: 600;
  color: #fff;
  text-align: center;
  box-shadow: 3px 3px 3px #ccc;
  cursor: pointer;
  transition: opacity 0.3s ease;
  border: 3px solid #fff;
}

.p-search__reset {
  display: flex;
  justify-content: end;
}

.p-search__reset-btn {
  all: unset;
  display: inline-block;
  margin-top: 1.2rem;
  padding: 0.5rem;
  width: -moz-max-content;
  width: max-content;
  font-size: 1.4rem;
  font-weight: 500;
  color: #4d4d4d;
  border-bottom: 1px solid #4d4d4d;
  padding-bottom: 0.4rem;
  transition: opacity 0.3s;
  cursor: pointer;
}

/*-------------------------------

-------------------------------*/
/*-------------------------------

-------------------------------*/