@charset "utf-8";

/* sp 599px
pc 1280px */

/*==============================
===========全体設定=============*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: YuMincho, "Hiragino Mincho ProN", serif;
}

html {
  font-size: 100%;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

p,
li,
h1,
h2,
a {
  color: #51625f;
  font-weight: normal;
}

.inner {
  max-width: 960px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: 0;
  overflow: hidden;
}

.content_title {
  padding-top: clamp(1.5rem, 0.659rem + 2.93vw, 3rem);
}

.content_title p {
  color: #3499f0;
  font-size: clamp(1.25rem, 0.26rem + 2.64vw, 2.375rem);
}

/*==============================
===========header=============*/
header {
  width: 100%;
  height: auto;
}

/*==============================
===========悩み=============*/

.problem_main {
  margin-top: -2vh;
  background: linear-gradient(30deg, #175093, #a6d4dc);
  text-align: center;
  width: 100%;
  height: auto;
  padding: clamp(1.313rem, 0.576rem + 2.56vw, 2.625rem);
}

.problem_main p {
  color: #fff;
  font-size: clamp(1.25rem, 0.26rem + 2.64vw, 2.375rem);
}

.problem_main p:first-child {
  margin-bottom: 0.8125rem;
}

/* 悩み疑問 */

.nayami_main {
  width: 45vw;
  height: auto;
  margin: 0 auto;
}

.problem_text {
  background-image: url(../img/nayami_back.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: auto;
  width: 100%;
}

.problem_text .wonder {
  padding-top: clamp(1.5rem, 0.659rem + 2.93vw, 3rem);
}

.problem_text .wonder p {
  font-size: clamp(1.25rem, 0.829rem + 1.46vw, 2rem);
}

.problem_picture {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.problem_box {
  padding-bottom: clamp(1.5rem, 0.238rem + 4.39vw, 3.75rem);
}

.nayami1 img {
  width: 40vw;
  height: auto;
}

.nayami2 img {
  width: 30vw;
  height: auto;
}

.problem1 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  background-color: #858585;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  color: #fff;
  padding: 0.5rem 3rem;
}

.problem1 p {
  color: #fff;
  /* padding: 0.5rem 3rem; */
  font-size: clamp(1rem, 0.86rem + 0.49vw, 1.25rem);
}

.problem1 img {
  width: 1.5rem;
  height: auto;
}

/*こだわり */
.about {
  background-image: url(../img/select_back2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: auto;
}

.select_1 p,
.select_2 p {
  font-size: clamp(1rem, 0.86rem + 0.49vw, 1.25rem);
}

.select_2 img {
  width: 47vw;
  height: auto;
}

/* こだわり1 */
.point img {
  width: 31vw;
  height: auto;
  margin-top: clamp(1.5rem, 0.238rem + 4.39vw, 3.75rem);
}

.commitment_1,
.commitment_2 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1.5rem;
}

.osusume01 img {
  width: 30vw;
  height: auto;
}

.osusume01,
.osusume02 {
  margin-top: 2rem;
}

.select_top p {
  color: #3499f0;
  font-size: clamp(1.25rem, 0.59rem + 1.76vw, 2rem);
  text-align: center;
}

.point_text {
  width: 35vw;
  height: auto;
  margin-top: 3rem;
}

.point_text p:first-child {
  color: #3499f0;
  font-size: clamp(1.25rem, 0.59rem + 1.76vw, 2rem);
  text-align: center;
}

.point_text p:last-child {
  color: #51625f;
  font-size: clamp(1rem, 0.89rem + 0.29vw, 1.125rem);
  margin-top: 1.5rem;
  text-align: left;
}

/* こだわり2 */
.osusume02 img {
  width: 41vw;
  height: auto;
}

.commitment_2 .select_text p {
  font-size: clamp(1rem, 0.89rem + 0.29vw, 1.125rem);
  color: #51625f;
  width: 55vw;
  height: auto;
  text-align: left;
  padding-bottom: clamp(1rem, -0.122rem + 3.9vw, 3rem);
  margin-top: clamp(1rem, -0.122rem + 3.9vw, 3rem);
  margin-left: auto;
  margin-right: auto;
}

/* 成分 */
.seibun {
  display: flex;
  justify-content: space-around;
  margin-bottom: clamp(1.5rem, 0.238rem + 4.39vw, 3.75rem);
  margin-top: clamp(1.125rem, 1.055rem + 0.24vw, 1.25rem);
}

.seibun img {
  width: 16vw;
  height: auto;
}

/* アイテム */
.item {
  background-image: url(../img/item_back.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: auto;
}

.item_list {
  margin-top: clamp(1.5rem, 0.238rem + 4.39vw, 3.75rem);
}

.item_list ul li {
  width: 80%;
  height: auto;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  text-align: left;
  margin-top: clamp(1rem, -0.543rem + 5.37vw, 3.75rem);
  margin-left: auto;
  margin-right: auto;
}

.item_list ul li:nth-child(even) {
  flex-direction: row-reverse;
}

.item_list ul li div {
  width: 100%;
}

.item_list ul li p:first-child,
.item3 {
  font-size: clamp(1.125rem, 1.055rem + 0.24vw, 1.25rem);
  font-weight: 700;
}

.item_other {
  margin-top: clamp(1rem, -0.122rem + 3.9vw, 3rem);
  margin-bottom: clamp(1rem, -0.122rem + 3.9vw, 3rem);
}

/* お客様の声 */
.voice {
  background-image: url(../img/voice_back.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: auto;
}

.voice_list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.voice_list ul li {
  width: 48%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  padding: 1.5rem;
  margin-top: clamp(1.5rem, 0.659rem + 2.93vw, 3rem);
  text-align: left;
  box-shadow: 0px 5px 10px -6px #858585;
}

.voice_list ul li:nth-child(even) {
  flex-direction: row-reverse;
}

.voice_list ul li div {
  width: 100%;
}

.voice_list ul li:last-child {
  margin-bottom: clamp(1.5rem, 0.238rem + 4.39vw, 3.75rem);
}

.voice_list ul li p:first-child {
  font-weight: 700;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.voice_list ul li img {
  width: 15rem;
  height: auto;
}

/* 注文方法 */
.order {
  width: 100%;
  margin-top: clamp(1.5rem, 0.238rem + 4.39vw, 3.75rem);
  margin-bottom: clamp(1.5rem, 0.238rem + 4.39vw, 3.75rem);
  margin-left: auto;
  margin-right: auto;
}

.order ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.order ul li {
  width: 23%;
  height: 280px;
}

.order ul li img {
  width: 9rem;
  height: 75px;
  object-fit: contain;
  margin: 10px auto;
}

.order ul li:nth-child(even) {
  width: 2rem;
  height: auto;
}

.order ul li:nth-child(even) img {
  width: 24px;
  height: auto;
}

.order ul li:nth-child(odd) {
  border: 1px solid #3499f0;
  padding: 8px 24px;
}

.order ul li h2 {
  color: #3499f0;
  font-size: clamp(1.25rem, 0.7rem + 1.47vw, 1.875rem);
}

.order ul li p:first-child {
  margin-top: 0.5rem;
}

/* 購入ボタン */
.order_btn {
  display: flex;
  justify-content: center;
  width: 300px;
  height: auto;
  background-color: #51625f;
  padding: 8px 16px;
  gap: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: clamp(1.5rem, 0.238rem + 4.39vw, 3.75rem);
}

.order_btn p {
  color: #fff;
  font-size: 1.25rem;
}

.order_btn img {
  width: 16px;
  height: auto;
  object-fit: contain;
}

/* フッター */
footer small {
  display: block;
  text-align: center;
  margin-bottom: 2rem;
}