@charset "UTF-8";
@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanjp.css');
@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanmp.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');


body {
  font-family: YakuHanJP, "Helvetica Neue", "Helvetica", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, メイリオ, "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
  background-color: #ede8e2;
  background-image: url(images/background.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: left top;
  background-size: cover;
}

header, main {
}
main {
  color: #534741;
  text-align: center;
  background-color: #fffffc;
}

@media screen and (min-width:426px) { 
/*　画面サイズが426pxからはここを読み込む　*/
  body {
  }
  header, main {
    max-width: 425px;
    margin: 0 auto;
  }
}
/* iOS Chrome 用 fixed 背景要素（通常は非表示・JS検出時のみ有効化） */
#bg-fixed {
  display: none;
  position: fixed;
  inset: 0;
  background-color: #ede8e2;
  background-image: url(images/background.jpg);
  background-size: cover;
  background-position: left top;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: -1;
}



.btn {
  background-color: #097a81;
  width: 60%;
}
.btn.yoyaku { background-color: #d3a243; }

strong { font-weight: 700; }
small {
  font-size: 14px;
  font-size: 1.4rem;
}


/* =============================================
   50代からのフラットシューズ
   ============================================= */

main {
  background-color: #f7f4ef;
}


/* --- イントロ --- */

.intro {
  padding: 52px 28px 48px;
  text-align: center;
  border-bottom: 1px solid #ddd5c8;
}
.intro__eyebrow {
  font-size: 14px;
  font-size: 1.4rem;
  letter-spacing: 0.15em;
  color: #9b7e5e;
  margin-bottom: 1.5em;
}
.intro__ttl {
  font-family: YakuHanMP, "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", YuMincho, serif;
  font-size: 30px;
  font-size: 3.0rem;
  font-weight: 600;
  line-height: 1.4;
  color: #2c2420;
  margin-bottom: 0.4em;
}
.intro__subttl {
  font-family: YakuHanMP, "Noto Serif JP", "Yu Mincho", serif;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: #9b7e5e;
  padding-bottom: 1.8em;
  border-bottom: 1px solid #ddd5c8;
  margin-bottom: 2em;
}
.intro__lead {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 2.2;
  color: #534741;
  text-align: left;
}


/* --- 商品ブロック --- */

#products {
  border-top: 1px solid #ddd5c8;
}
.pd-block {
  background-color: #f7f4ef;
}
.pd-block--alt {
  background-color: #ede8e2;
}
.pd-block__fig {
  margin: 0;
}
.pd-block__fig img {
  width: 100%;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.pd-block__fig.pd166animal img {
  aspect-ratio: 4 / 3!important;
}
.pd-block__body {
  padding: 36px 28px 52px;
  text-align: center;
}
.pd-block__tagline {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: 0.2em;
  color: #9b7e5e;
  margin-bottom: 1em;
}
.pd-block__name {
  font-family: YakuHanMP, "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", YuMincho, serif;
  font-size: 26px;
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1.3;
  color: #2c2420;
  margin-bottom: 0.75em;
}
.pd-block__color {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 300;
  color: #9b7e5e;
}
.pd-block__note {
  font-size: 12px;
  font-size: 1.2rem;
  color: #9b7e5e;
  margin-bottom: 0.5em;
}
.pd-block__desc {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 2;
  color: #534741;
  margin-bottom: 1.5em;
}
.pd-block__price {
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: 500;
  color: #2c2420;
  margin-bottom: 1.5em;
  line-height: 1;
}
.pd-block__price small {
  font-size: 14px;
  font-size: 1.4rem;
  color: #9b7e5e;
  font-weight: 300;
}
.pd-block .btn {
  width: 75%;
}


/* --- 機能紹介 --- */

.features {
  background-color: #2c2420;
  color: #f7f4ef;
  padding: 56px 24px 64px;
  text-align: center;
}
.features__hd {
  margin-bottom: 2.5em;
}
.features__ttl {
  font-family: YakuHanMP, "Noto Serif JP", "Yu Mincho", serif;
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 1em;
}
.features__lead {
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 2.2;
  color: #c2b5a8;
  text-align: left;
}
.features__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.features__item {
  display: flex;
  align-items: center;
  gap: 20px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 20px;
}
.features__img {
  width: 45%;
  flex-shrink: 0;
}
.features__img img {
  width: 100%;
  display: block;
  aspect-ratio: 1;
  object-fit: cover;
}
.features__check {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 500;
  color: #c4a976;
  margin-bottom: 0.3em;
}
.features__check::before {
  content: "✓";
  margin-right: 0.4em;
}
.features__desc {
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1.7;
  color: #c2b5a8;
}


/* --- UGC / Letro --- */

.ugc {
  padding: 2em 1em;
  text-align: center;
  background-color: #f0ebe4;
}
.ugc__ttl {
  font-family: YakuHanMP, "Noto Serif JP", "Yu Mincho", serif;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.9;
  color: #2c2420;
  margin-bottom: 1em;
}
.ugc__embed {
  display: block;
  padding: 1em 2em 0.5em;
  background-color: #e2d9cf;
  align-items: center;
  justify-content: center;
  color: #9b7e5e;
  /*font-size: 12px;
  min-height: 160px;
  font-size: 1.2rem;*/
}
/*.ugc__embed::after {
  content: "[ Letro UGCエリア ]";
}*/


/* --- ラインナップ --- */

.lineup {
  padding: 56px 24px 80px;
  background-color: #f7f4ef;
}
.lineup__ttl {
  font-family: YakuHanMP, "Noto Serif JP", "Yu Mincho", serif;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-align: center;
  color: #2c2420;
  padding-bottom: 1em;
  /*border-bottom: 1px solid #ddd5c8;
  margin-bottom: 3em;*/
}
.lineup__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 52px;
}
.lineup__item {
  text-align: center;
}
.lineup__item > img {
  width: 100%;
  display: block;
  margin-bottom: 16px;
}
.lineup__name {
  font-family: YakuHanMP, "Noto Serif JP", "Yu Mincho", serif;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 500;
  color: #2c2420;
  margin-bottom: 0.3em;
}
.lineup__note {
  font-size: 12px;
  font-size: 1.2rem;
  color: #9b7e5e;
  margin-bottom: 0.5em;
}
.lineup__price {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 400;
  color: #3d3530;
  margin-bottom: 1.2em;
}
.lineup__price small {
  display: block;
  font-size: 12px;
  font-size: 1.2rem;
  color: #9b7e5e;
  margin-top: 0.3em;
}
.lineup__item .btn {
  width: 85%;
}