@charset "UTF-8";
/* CSS Document */


 /* 使い方 */
.howto-img-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap; /* スマホ時に縦並び可 */
}

.howto-img {
  flex: 1 1 48%;
  text-align: center;
}




.howto-left img {
  width: 90%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.howto-right img {
  width: 60%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* スマホ時の調整（画面幅768px以下） */
@media (max-width: 768px) {
  .howto-img-container {
    flex-direction: column;
  }

  .howto-left img {
    width: 100%;
  }

  .howto-right img {
    width: 60%; /* 必要に応じて変更可 */
  }
}


.howto-text-01 {
  width: 100%;
  box-sizing: border-box;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
  background: linear-gradient(135deg, #f0f9f4, #e9f5eb);
  padding: 1.2em 1.5em;
  border-radius: 8px;
}


.howto-text-03 {
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  border: 1px solid #c8e6c9;
  padding: 1.2em 1.5em;
  border-radius: 10px;
  color: #2e7d32;
  font-size: 1.1rem;
  line-height: 1.8;
  margin-top: 0;
}

.howto-text-03 .howto-text-02 {
  font-size: 1.2rem;
  font-weight: bold;
  color: #287E3A;
  margin: 0 0 0.5em;
  padding-left: 0.6em;
  border-left: 4px solid #287E3A;
}

@media screen and (max-width: 768px) {
  .howto-text-03 .howto-text-02 {
    font-size: 16px;
  }
 .howto-text-03 p {
    font-size: 16px;
     line-height: 1.8;
  }
.howto-text-01 {
    font-size: 16px;
     line-height: 1.8;
  }
}


.howto-flex {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

.howto-text {
  flex: 1;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #2e7d32;
}

.howto-img-right {
  flex: 0 0 auto;
}

.howto-img-right img {
  max-width: 300px;
  width: 100%;
  height: auto;
}

/* スマホ表示時の中央揃え */
@media screen and (max-width: 768px) {
  .howto-flex {
    flex-direction: column;
  }

  .howto-img-right {
    text-align: center; /* ← 親にこれを指定 */
    width: 100%;         /* ← 幅を100%にして中央寄せを有効にする */
    margin-top: 1em;
  }

  .howto-img-right img {
    display: inline-block; /* ← 中央揃えが効くように */
  }
}







.howto-img-container-B {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.howto-left-B,
.howto-right-B {
  flex: 1 1 48%;
}

.howto-left-B img,
.howto-right-B img {
  width: 100%;
  height: auto;
  display: block;
}

/* スマホ対応（幅768px以下） */
@media screen and (max-width: 768px) {
  .howto-left-B,
  .howto-right-B {
    flex: 1 1 100%;
  }
}

.howto-img-container-C {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.howto-img-container-C img {
  width:50%;
  height: auto;
  display: block;
}

/* スマホ対応：横幅100%に */
@media screen and (max-width: 768px) {
  .howto-img-container-C img {
    width: 100%;
  }
}




.howtousebathpict {
  border: 2px solid #ccc; /* 全体を囲むボーダー */
  border-radius: 12px; /* 角を丸く */
  padding: 5%; /* 余白を相対値にして可変に */
  background-color: #f9f9f9; /* 背景色 */
  width: 100%; /* 幅を100%に */
  max-width: 90%; /* 最大幅を画面の90%に */
  margin: 0 auto; /* センター揃え */
}

.howtousebathpict > div {
  font-size: 1.5rem; /* 「使い方」の文字サイズ */
  text-align: center; /* 中央揃え */
  margin-bottom: 20px; /* 下の余白 */
  padding: 10px;
}

.howtousebathpict p {
  display: flex;
  align-items: flex-start; /* 画像とテキストを上揃え */
  gap: 15px; /* 画像とテキストの間隔 */
  margin-bottom: 15px; /* 各項目間の間隔 */
  color: inherit; /* 文字色を親要素から引き継ぐ（デフォルトの黒色に戻す） */
}

.howtousebathpict p:last-child {
  margin-bottom: 0; /* 最後のpタグの下の余白をなくす */
}

.howtousebathpict p span {
  flex-shrink: 0; /* 画像が縮小しないように */
}

.howtousebathpict p img {
  max-width: 150px; /* 画像の最大幅 */
  height: auto; /* アスペクト比を保つ */
}

.howtousebathpict p span + p {
  width: 100%; /* テキストが画像の隣にきれいに収まるように */
  font-size: 1rem;
  line-height: 1.6;
}

@media screen and (max-width: 768px) {
 .howtousebathpict p img {
  max-width:80px; /* 画像の最大幅 */
    border-radius: 0px; /* 任意で角を丸くする */  
}
}



/* 基本的なリストスタイル */
.howto-ullist {
  list-style-type: none; /* デフォルトのリストマーカーを削除 */
  padding: 0;
  margin: 0;
}

/* 各リストアイテムのスタイル */
.howto-ullist li {
  display: flex;
  align-items: flex-start; /* アイテムを上揃え */
  margin-bottom: 15px; /* アイテム間の隙間 */
  padding-left: 25px; /* アイコンとテキストの間隔 */
  position: relative;
  font-size: 1rem; /* テキストサイズ */
  line-height: 1.5; /* 行間 */
  background-color: #f9f9f9; /* アイテム背景 */
  border-radius: 8px; /* 角を丸く */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 軽い影をつける */
  padding: 10px 15px; /* 内側の余白 */
}

/* アイコン用のカスタムマーカー */
.howto-ullist li::before {
  content: '\2022'; /* ・のマーカーを使用 */
  font-size: 1.5rem; /* アイコンのサイズ */
  color: #287E3A; /* アイコンの色 */
  position: absolute;
  left: 10px; /* 左からの距離 */
  top: 50%;
  transform: translateY(-50%); /* 垂直に中央揃え */
}

/* スマホ対応: 横幅が狭いときの調整 */
@media (max-width: 768px) {
  .howto-ullist li {
    font-size: 0.9rem; /* テキストサイズを少し小さく */
    padding-left: 20px; /* アイコンとの距離調整 */
  }
}


.howto-topimage-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 960px;
  margin: 0 auto;
}

.howto-topimage-container a {
  display: block;
  flex: 1 1 0;
  max-width: 30%; /* 3つ並べて960pxに収まるよう調整 */
}

.howto-topimage-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* スマホ（幅768px以下）では縦並びに */
@media screen and (max-width: 768px) {
  .howto-topimage-container {
    flex-direction: column;
    align-items: center;
  }

  .howto-topimage-container a {
    max-width: 70%;
  }
    .howto-topimage-container img {
    /* 矩形要素全体にふんわり影 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    /* 角丸が欲しければコメントアウトを外して調整 */
    /* border-radius: 8px; */
  }

}