* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family:  "Yu Gothic","Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
}

:root {
  /* カラー */
  --color-primary: #DABDC6;
  --color-secondary: #B97A8A;
  --color-accent: #A4586F;
  --color-text: #695D57;
  --color-white: #fff;
  --color-gray: #959595;
  --color-footer: #f2dee4;
  --color-blue:#8195A7;
  --color-light-blue:#B7C5CD;
  --color-hilight-blue:#dfe8eb;
  --color-oorange:#9F4F11; /* 重複定義あり */
  --color-orange: #C87E45;
  --color-light-orange:#DDB99D;
  --color-hilight-orange:#f6e5d8;
  /* レイアウト */
  --width-content: 1220px;
  --width-narrow: 720px;
  --space-unit: 15px;
  --space-section: 45px;

  /* その他 */
  --duration: 0.7s;
}

/* Fade Up Animation */

.f-up {
  opacity: 0;
}
.f-up.fadeup {
  animation: fadeupanime 1s forwards;
}

@keyframes fadeupanime {
  from {
      opacity: 0;
      transform: translateY(50px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}


/* -----------------------------
  ベース
----------------------------- */

body {
  font-family: "Yomogi", "Yu Gothic", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif,!important;
}
.sec-ttl,
.copy {
  font-family: 'Merriweather', serif;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
  /* margin: 0 auto; 不要な場合も */
}
h2,h3,p,a {
  color: var(--color-text);
  text-decoration: none; /* デフォルトの下線を消す */
}
h3 {
  font-size: 22px;
  font-weight: bold;
}
p {
  font-size: 14px;
  line-height: 1.6; /* 行間調整 */
}

/* メインビジュアル Splide スタイル */
#main-visual-splide {
  margin-bottom: var(--space-section);
  /* 必要に応じて max-width や margin を設定 */
  max-width: 1170px; /* 例: コンテンツ幅に合わせる */
  margin: 0 auto var(--space-section);
}

#main-visual-splide .splide__slide img {
  width: 100%;
  height: auto; /* または固定の高さを指定 */
  object-fit: cover; /* 画像のアスペクト比を保ちつつカバー */
}

/* Splide ページネーション スタイル (メインビジュアル用) */
#main-visual-splide .splide__pagination {
bottom: 1em; /* 下からの位置調整 */
}
#main-visual-splide .splide__pagination__page {
background: rgba(255, 255, 255, 0.7); /* 背景色 */
opacity: 1;
  width: 12px; /* ドットのサイズ */
  height: 12px;
  margin: 0 6px; /* ドットの間隔 */
}
#main-visual-splide .splide__pagination__page.is-active {
background: var(--color-accent); /* アクティブなドットの色 */
transform: scale(1); /* アクティブ時のスケール変化をなくす場合 */
  opacity: 1;
}

/* Splide 矢印 スタイル (共通 & メインビジュアル用) */
.splide__arrow {
  background: rgba(0, 0, 0, 0.3); /* 半透明の背景 */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  opacity: 0.8;
  transition: opacity 0.3s;
}
.splide__arrow:hover {
  opacity: 1;
}
.splide__arrow svg,
.splide__arrow i { /* Font Awesome アイコンを使う場合 */
  fill: white; /* SVGの場合 */
  color: white; /* Font Awesomeの場合 */
  font-size: 18px;
}
/* デフォルトの矢印SVGを非表示に */
.splide__arrow svg {
  display: none;
}
/* Font Awesome アイコンを表示 */
.splide__arrow i {
  display: inline-block; /* または block */
  line-height: 40px; /* ボタン中央に配置 */
}

/* 左右の位置調整 (メインビジュアル) */
#main-visual-splide .splide__arrow--prev {
  left: 1em;
}
#main-visual-splide .splide__arrow--next {
  right: 1em;
}

/* -----------------------------
  レイアウト
----------------------------- */
.wrapper {
  max-width: var(--width-content); /* width から max-width へ変更推奨 */
  margin: 0 auto;
  position: relative;
  padding: 0 var(--space-unit);
  /* box-sizing: border-box; 全体に適用されていれば不要 */
}

.copy {
  font-size: 16px;
  color: #695D57;
  text-align: center;
  padding-bottom: 25px;
  line-height: 1.7;
}

/* 共通コンポーネント */
.sec-ttl {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  padding-bottom: 10px;
  color: var(--color-text);
}


.btn {
  display: block;
  text-align: center;
  font-weight: bold;
  transition: all var(--duration);
  margin: 0 auto;
}

/* プライマリーボタン */
.btn-primaryp {
  width: 290px;
  height: 55px;
  line-height: 55px;
  background: var(--color-secondary);
  color: var(--color-white);
  font-weight: normal;
}
.btn-primary {
  width: 290px;
  height: 55px;
  line-height: 55px;
  background: var(--color-text);
  color: var(--color-white);
  font-weight: normal;
}
/* セカンダリーボタン */
.btn-secondary {
  width: 300px;
  height: 45px;
  line-height: 45px;
  font-size: 15px;
  background: var(--color-light-orange);
  color: var(--color-white);
  font-weight: normal;
}

.btn-primaryp:hover {
  background-color: #fedbe2;
  transform: translateY(-2px);
}
.btn-primary:hover {
  background-color: #888484;
  transform: translateY(-2px);
}
.btn-secondary:hover {
  background-color: #ffe6ca;
  transform: translateY(-2px);
}

/* バナー */
.top-banner {
  /* align-items は Flex/Gridコンテナ用 */
  background-color: var(--color-blue);
}
.top-banner .wrapper {
  /* text-align: center; 画像を中央寄せする場合 */
}
.top-banner img {
  /* 必要ならスタイル調整 */
  margin: 0 auto; /* 中央寄せ */
}

/* ヘッダー */
.header {
  /* margin-bottom: 50px; 下の要素との間隔は margin-top で取る方が一般的 */
  width: 100%;
  position: sticky;
  top: 0px;
  z-index: 1000;
  background-color: white;
  padding: 15px 0; /* 上下のパディング */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 影を追加 */
}
.header .wrapper {
  display: flex;
  flex-direction: column; /* ロゴエリアと検索エリアを縦に並べる */
  gap: 15px; /* 各エリア間の余白 */
}
.logop {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  /* display: inline-block; 不要 */
  margin-left: 0; /* デフォルトで左寄せ */
  flex-shrink: 0; /* 縮まないように */
}
.logo img {
  height: 40px; /* ロゴの高さを指定 */
  width: auto;
}

.nav-list {
  display: flex;
  align-items: center; /* 中央揃え */
  gap: 30px; /* メニュー間のスペース調整 */
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link {
  font-size: 15px; /* フォントサイズ調整 */
  transition: color 0.3s, text-decoration 0.3s;
}
.nav-link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 20px;
  cursor: pointer;
  z-index: 1001;
}

.hamburger span {
  display: block;
  height: 3px;
  background: #333;
  border-radius: 2px;
}

.sp-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 1000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sp-nav ul {
  list-style: none;
  padding: 0;
  background-color: var(--color-white);
}

.sp-nav ul li {
  margin: 20px 0;
}
.nav-link:hover,
.sp-nav ul li a:hover {
  color: var(--color-accent); /* ホバー時の色 */
  text-decoration: underline;
}
/* 検索フォーム */
.search-sp {
  display: none; /* SP用は非表示 */
}
.logopp { /* PC用検索・アイコンエリア */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.search {
  display: flex;
  align-items: center;
  flex-grow: 1; /* スペースを埋める */
  max-width: 600px; /* 最大幅 */
  /* border-bottom: none; 不要 */
}
.search input[type="text"] { /* inputのセレクタをより具体的に */
  width: 100%; /* 親要素に対して100% */
  height: 40px; /* 高さを調整 */
  padding: 0 15px; /* 左右のパディング */
  border: 1px solid var(--color-text);
  font-size: 14px;
  border-right: none; /* アイコンボタンと繋げる */
}
.search .search-icon {
  width: 40px; /* 高さに合わせる */
  height: 40px;
  color: var(--color-white);
  background-color: var(--color-text);
  border: 1px solid var(--color-text); /* 枠線 */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s;
}
.search .search-icon:hover {
  background-color: var(--color-accent);
}
.search-icons {
  display: flex;
  align-items: center; /* アイコンを中央揃え */
  gap: 20px; /* アイコン間のスペース */
  color: var(--color-text);
  font-size: 22px; /* アイコンサイズ */
}
.search-icons i {
  cursor: pointer;
  transition: color 0.3s;
}
.search-icons i:hover {
  color: var(--color-accent);
}

/* mv -> main-visual-splide に移行 */
.main {
  margin-top: 50px; /* ヘッダーとの間隔 */
  margin-bottom: 50px;
}
/* .main .wrapper { width: 100vw; } 不要 or 意図を確認 */
/* セクション01 */
.sec-01 .btn-primary:hover {
  background:#959595;
}
.sec-01 .wrapper {
  width: var(--width-narrow);
  margin-bottom: 100px;
}

.blog-list {
  width: 100%;
  margin: 0;
  padding: 0;
}

.blog-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  margin: 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  position: relative;
}

.blog-title:hover {
  background-color: #f9f9f9;
}

.blog-date {
  flex: 0 0 100px;
  color: #666;
  font-weight: 200;
}

.blog-headline {
  flex: 1;
  padding: 0 15px;
  color: var(--color-text);
  font-weight: 200;
}

.toggle-icon {
  flex: 0 0 20px;
  font-size: 18px;
  text-align: center;
  transition: transform 0.3s;
}

.blog-detail {
  padding: 15px;
  margin: 0;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
}

.read-more {
  display: inline-block;
  margin-top: 10px;
  color: var(--color-accent);
  text-decoration: none;
}

.read-more:hover {
  text-decoration: underline;
}

/* セクション02 */
.sec-02 {
  margin-bottom: 100px;
  /* background-image: url(../img/sec-02-04.png); */
  background-position: center;
  background-repeat: repeat-x;
}
.sec-02 .wrapper {
  width: var(--width-content);
}
.story-area {
  display: flex;
  justify-content: space-between;
}
.sec-02 img {
  width: 100%;
}
/* .story-item {
  flex: 0 0 50%;
} */
.story-img {
  flex: 0 0 40%;
}
.sec-02 h3 {
  padding-top: 10px;
  font-weight: bold;
  text-align: center;
}

.story-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 上部はテキスト、下部にボタン */
  padding: 0 10px;
  line-height: 1.7rem;
  flex: 0 0 60%;
}
.story-text p {
  line-height: 30px;
  padding: 0 10px;
}
.story-text-sp {
  display: none;
}
/* セクション02-01 */
.gift-banner .sec-ttl {
  display: none;
}
.gift-banner-sp {
  display: none;
}
.gift-ttl-sp {
  display: none;
}
.gift-ttl-sp {
  display: none;
}
.gift-banner {
  margin-bottom: 100px;
}
.gift-banner .wrapper {
  width: var(--width-narrow);
  background-color: var(--color-primary);
  padding: 10px;
}
.gift-item {
  display: flex;
  justify-content: space-between;
  flex: 0 0 40%;
}
.gift-text {
  flex: 0 0 60%;
}
.gift-ttl {
  color: var(--color-accent);
  padding-bottom: 15px;
}
.gift-text p {
  color: #fff;
  padding: 0 10px;
  line-height: 1.5rem;
}
/* セクション03 */
.sec-03 {
  margin-bottom: 100px;
  /* background-image: url(../img/sec-03-11.png); */
  background-position: center;
  background-repeat: no-repeat;
}
.sec-03 .wrapper {
  padding: 0;
}
.sec-03 img {
  width: 100%;
}
.item-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item-list {
  flex: 0 1 calc(33.333%); 
  padding: 0 1.3rem;
  margin-bottom: 3.6rem;
}
.item-ttl {
  text-align: left;
  font-size: 1.1rem;
  text-align: center;
  color: var(--color-orange);
  padding-bottom: 20px;
}
.item-image {
  margin-bottom: 30px;
}
.item-content {
  padding-left: 12px;
  padding-right: 12px;
}
.item-text {
  margin-bottom: 2.4rem;
  min-height: 40px;
}
.sec-03 .btn-primary {
  background: var(--color-orange);
}
.btn-primary:hover {
  background-color: #f6d6b9;
  transform: translateY(-2px);
}
/* セクション04 */
.sec-04 {
  padding-bottom: 50px;
  padding-top: 50px;
  /* background-image: url("../img/sec-04.png"); */
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-hilight-blue);
  margin-bottom: 100px;
}
.sec-04 .wrapper {
  width: var(--width-content);
}
.copy-text {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 30px;
  font-weight: 100;
}
.steps {
  display: flex;
  justify-content: space-between;
  padding-bottom: 30px;
  gap: 25px;
}
.step {
  width: calc(25%);
  background-color: var(--color-white);
  position: relative;
  border-radius: 10px;
  padding: 20px;
}
.number {
  align-items: center;
  display: flex;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: var(--color-light-blue);
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  border-radius: 50%;
  margin: 0 auto 20px;
}
.step-ttl {
  text-align: left;
  font-size: 1.1rem;
  text-align: center;
  color: var(--color-blue);
  padding-bottom: 20px;
}
.step-text {
  line-height: 22px;
}
.sec-04 .btn-primary {
  background: var(--color-blue);
}
.sec-04 .btn-primary:hover {
  background-color: #bfccee;
  transform: translateY(-2px);
}

/* .step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 40px;
  right: -15px;
  width: 30px;
  height: 2px;
  background-color: var(--color-blue);
} */
/* セクション05 */
.sec-05 {
  margin-bottom: 100px;
}
.sec-05 .wrapper {
  width: var(--width-narrow);
}
.post {
  display: flex;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}
.post:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); /* 影を少し強調 */
  transform: translateY(-2px);               /* 少し浮かせる */
  transition: all 0.3s ease;                 /* なめらかなアニメーション */
}
.post-content {
  padding: 20px;
  flex-grow: 1;
}

.product-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  color: var(--color-text);
}
.size-info {
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 12px;
}
.review {
  margin-top: 10px;
}
.stars {
  display: flex;
  margin-bottom: 12px;
}

.fa-star {
  color: #e9ce77; 
  margin-right: 2px;
  font-size: 18px;
}
.post-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text);
}

.post-image {
  width: 40%;
  min-width: 180px;
  overflow: hidden;
  align-self: flex-end;
  margin: 0 20px 20px 0;
}

.post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
/* フッター */
.footer {
  background-color: var(--color-footer);
  padding: 50px 0 20px; /* パディング調整 */
  color: var(--color-text);
}
.footer .wrapper {
  max-width: var(--width-content);
}
.footerp {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* 折り返し */
  gap: 30px; /* 要素間の隙間 */
  margin-bottom: 40px; /* copyrightとの間隔 */
}
.footer-info {
  flex-basis: 300px; /* ロゴ情報の幅 */
  flex-grow: 1;
}
.footer-info img {
  height: 35px; /* フッターロゴサイズ */
  width: auto;
  margin: 0 0 15px 0; /* ロゴ下の余白、左寄せ */
}
.footer-info p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.sns-link {
  display: flex;
  gap: 15px;
}
.sns-link a {
  font-size: 24px; /* SNSアイコンサイズ */
  color: var(--color-secondary);
  transition: color 0.3s;
}
.sns-link a:hover {
  color: var(--color-accent);
}

.footer-link {
  flex-basis: 180px; /* 各リンクリストの幅 */
  flex-grow: 1;
}
.footer-link h5 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: var(--color-accent);
}
.contentp {
  list-style: none;
  padding: 0;
  margin: 0;
}
.contentp li {
  margin-bottom: 10px;
}
.contentp a {
  font-size: 14px;
  color: var(--color-text);
  transition: color 0.3s;
}
.contentp a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.copyright {
  text-align: center;
  font-size: 12px;
  color: var(--color-gray);
  padding-top: 20px; /* 上の区切り線 */
  border-top: 1px solid var(--color-primary);
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
.wrapper {
    width: 768px;
}
.header .wrapper {
  width: 100%;
}
/* .nav-list {
  width: 100%;
  display: flex;
  justify-content: space-between;
} */
.logop {
  gap: 100px;
}

/* セクション02 */
.sec-02 .wrapper {
  width: 100%;
}
.ttext  {
  display: none;
}
.story-area {
  flex-direction: row;
}
.story-text-sp {
  display: block;
}
.story-image {
  flex: 0 0 40%;
  margin-left: 0;
}

.story-text {
  flex: 0 0 60%;
  max-width: 60%;
}
.btn-primaryp {
  align-items: center;
}
.gift-ttl {
  font-size: 18px;
}
.gift-banner .wrapper {
  max-width: 600px;
}
/* セクション03 */
.sec-03 {
  margin-bottom: 100px;
}
.sec-03 .wrapper {
  width: 100%;
}
.btn-secondary {
  width: 180px;
  height: 45px;
  line-height: 45px;
  font-size: 15px;
  background: var(--color-light-orange);
  color: var(--color-white);
  font-weight: normal;
}

.sec-04 .wrapper {
  width: 100%;
}
/* フッター */
.footer .wrapper {
  width: 100%;
}
}

/* レスポンシブスマートフォン */
@media screen and (max-width: 767px) {
  .wrapper {
      width: 100%;
  }
  .header .wrapper {
    width: 100%;
  }
  .top-banner .wrapper {
    padding: 0;
  }
  /* ナビゲーション（sp） */
  .hamburger {
    display: flex;
  }

    .hamburger {
        display: flex;
    }

    .nav-list {
        display: none;
    }

    .sp-nav.active {
        display: flex;
    }
  .nav-list {
    display: none;
    flex-direction: column;
    background: white;
    position: absolute;
    top: 100%;
    right: 0;
    width: 200px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1000;
  }

  .nav-list.active {
    display: flex;
  }
/* セクション01 */
.sec-01 .wrapper {
  width: 400px;
}
/* セクション02 */
.sec-02 img {
  width: 100%;
}
.story-image {
  align-items: center;
}
.sec-02 h3 {
  text-align: center;
}
.story-area {
  flex-direction: column;
  gap: 20px;
}
.ttext  {
  display: none;
}
.story-text-sp {
  display: block;
}
.story-item {
  width: 100%;
}
.btn-primaryp {
  margin-top: 20px;
}
/* セクション02-01 */
.gift-banner .wrapper .gift-item .gift-text .gift-ttl {
  display: none;
}
.gift-banner {
  display: none;
}

.gift-banner-sp {
  background-color: var(--color-primary); /* 例：#333など */
  color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: var(--space-unit);
  display: block;
  margin-bottom: 100px;
}

.gift-banner-sp .wrapper {
  width: 400px;
  margin: 0 auto;
  
}
.gift-ttl-sp {
  font-size: 18px;
  text-align: center;
  margin-bottom: 20px;
}

.gift-content-sp {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  flex-direction: column;
  align-items: center;
}
.gift-ttl {
  color: var(--color-accent);
  padding-bottom: 6px;
  font-size: 18px;
        text-align: center;
}

.gift-content-sp img {
  width: 100%;
  height: auto;
  flex-shrink: 0;
}

.gift-content-sp p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  flex: 1;
  color: var(--color-white);
}
/* セクション03 */

.item-content {
  display: flex;/* 直下の要素を並列に */
  flex-direction: column;
}
.item-list {
  flex: 0 1 calc(50%); 
  padding: 0 0.8rem;
  margin-bottom: 3.6rem;
}
.item-ttl {
  font-size: 16px;
}
.item-content p {
  flex-grow: 1;
}
.btn-secondary {
  width: 135px;
  height: 45px;
  line-height: 45px;
  font-size: 15px;
  background: var(--color-light-orange);
  color: var(--color-white);
  font-weight: normal;
}
/* セクション04 */
.sec-04 .wrapper{
  width: 100%;
}
.steps {
  flex-direction: column;
  align-items: center;
}
.step {
  width: 100%;
    padding: 1rem 0;
    position: relative;
}
.step-text:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 40px;
  right: -15px;
  width: 30px;
  height: 2px;

}
.step-text {
  margin-left: 18px;
  margin-right: 18px;
}
/* セクション05 */
.sec-05 {

}
.sec-05 .wrapper {
  width: 400px;
}

.sec-ttl {
  font-size: 1.8rem;
}

.copy {
  font-size: 1rem;
}

.copy-text {
  font-size: 1.1rem;
  margin-bottom: 25px;
}

.posts {
  gap: 20px;
}

.post {
  flex-direction: row;
}

.post-content {
  padding: 15px;
}

.product-name {
  font-size: 1.1rem;
  margin-bottom: 5px;
}

.post-content p {
  font-size: 0.85rem;
  margin-bottom: 10px;
}

.stars {
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.post-text {
  font-size: 0.8rem;
  line-height: 1.5;
}

.post-image {
  min-width: 120px;
}

.footerp { flex-direction: column; text-align: center; }
    .footer-info img { margin: 0 auto 15px; }
    .sns-link { justify-content: center; }
    .footer-link { text-align: center; }
    .footer-info {
      flex-basis: 0px; /* ロゴ情報の幅 */
      flex-grow: 1;
    }
}

/* item のスタイルはこちらから*/

/* セクション01 */
.item .point-ttl {
  color: var(--color-blue);
}
.item .sec-01 {
  margin-bottom: 100px;
  background-color: var(--color-hilight-blue);
  padding-top: 60px;
  padding-bottom: 30px;
}
.item .sec-01 .wrapper {
  width: var(--width-content);
} 
.item .sec-01 p {
  text-align: center;
  padding-bottom: 30px;
  line-height: 30px;
}
.item .points {
  display: flex;
  justify-content: space-between; /* 横に間隔を開ける */
  gap: 80px; /* 要素間のスペース */
  flex-wrap: wrap;
}

.item .point {
  flex: 1; 
  background-color: var(--color-white); /* 背景つけたい場合 */
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}
.item .sec-01 .fa-solid {
  align-items: center;
  display: flex;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: var(--color-light-blue);
  color: var(--color-blue);
  font-size: 22px;
  font-weight: bold;
  border-radius: 50%;
  margin: 0 auto 20px;
}
/* セクション02 */
.item .tag-list {
  margin-bottom: 30px;
}

.item .tag {
  display: inline-block;
  background-color: #f5f5f5;
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 12px;
  margin-right: 8px;
  margin-bottom: 8px;
}
.item .recommended-section {
  margin-top: 60px;
}
.item .recommended-section-sp {
  display: none;
}
.item .recommended-title {
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 30px;
}

.item .recommended-products {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 50px;
  
}
/* .item .product-1 .recommended-product,
.product-2 .recommended-product,
.product-4 .recommended-product,
.product-5 .recommended-product,
.product-7 .recommended-product,
.product-8 .recommended-product {
  border-right: 2px dotted #ccc;
} */
.item .recommended-product {
  flex: 0 0 33%;
  padding: 30px 20px 50px;                     /* 中身の余白 */
  background-color: #fff;           /* 背景色（白） */
  transition: all 0.3s ease;
}
/* .item .recommended-product:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);  
  transform: translateY(-4px);               
  background-color: #f9f9f9;                
} */
.item .recommended-image {
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
}

.item .recommended-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;  /* ホバー時に滑らかに変化 */
}

.item .recommended-image img:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); /* 影を少し強調 */
  transform: translateY(-2px);   
}

.item .recommended-product-title {
  font-size: 14px;
  margin-bottom: 10px;
}

.item .recommended-product-price {
  font-size: 12px;
  margin-bottom: 10px;
  padding: 0px 20px;
}

.item .recommended-product-description {
  font-size: 12px;
  color: #666;
  margin-bottom: 15px;
  line-height: 1.5;
  padding: 0px 20px;
}
.item .recommended-product-description:hover {
  text-decoration: underline;
}
.item .status-tag {
  display: inline-block;
  padding: 3px 10px;
  background-color: #f0f0f0;
  font-size: 12px;
  border-radius: 3px;
  margin-bottom: 10px;
  margin: 0px 20px;
}
.item .sec-02 {
  margin-bottom: 100px;
}
.item .sec-02 .wrapper {
  width: var(--width-content);
}
.item .tag-list {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 30px;
  
}
.item .tag {
  color: var(--color-text);
  gap: 20px;
}
.item .item-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item .item-list {
  flex: 0 1 calc(33.333% - 40px);
  margin-bottom: 3.6rem;
  border: 1px solid #f0f0f0;
  position: relative;
  transition: all 0.3s ease;
}

.item .item-list:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.item .item-image {
  margin-bottom: 15px;
  padding: 10px;
  position: relative;
}

.item .item-image img {
  width: 100%;
  height: auto;
  display: block;
}

.item .item-image h3 {
  font-size: 17px;
  margin: 10px 0 5px;
  text-align: left;
  font-weight: 600;
}
/* 商品1と商品2の間にborder-right */
.item .recommended-product:nth-child(1) {
  border-right: 2px dotted #ccc;
  border-bottom: 2px dotted #ccc;
}

/* 商品2と商品3の間にborder-right */
.item .recommended-product:nth-child(2) {
  border-right: 2px dotted #ccc;
  border-bottom: 2px dotted #ccc;
}
.item .recommended-product:nth-child(3) {
  border-bottom: 2px dotted #ccc;
}
.item .recommended-product:nth-child(4) {
  border-right: 2px dotted #ccc;
  border-bottom: 2px dotted #ccc;
}
/* 商品2と商品3の間にborder-right */
.item .recommended-product:nth-child(5) {
  border-right: 2px dotted #ccc;
  border-bottom: 2px dotted #ccc;
}
.item .recommended-product:nth-child(6) {
  border-bottom: 2px dotted #ccc;
}
.item .recommended-product:nth-child(7) {
  border-right: 2px dotted #ccc;
}

/* 商品2と商品3の間にborder-right */
.item .recommended-product:nth-child(8) {
  border-right: 2px dotted #ccc;
}

.item .item-image p {
  font-size: 14px;
  color: var(--color-text);
  text-align: left;
  padding-top: 5px;
  padding-bottom: 10px;
}
.item .sec-02 .btn-secondary {
  margin: 0;
}
.item .btn-primary {
  background-color: var(--color-secondary);
}
.item .btn-primary:hover:hover {
  background-color: #e0a3b5;
  /* transform は .btn:hover で共通化 */
}
/* セクション03 */
.item .sec-03 {
  margin-bottom: 100px;
}
.item .sec-03 .wrapper {
  width: var(--width-content);
}
.item .sec-03 p {
  text-align: center;
  line-height: 30px;
  padding-bottom: 20px;
  color: var(--color-text);
}
.item table {
  width: 100%;
  border-collapse: collapse;
}
.item table thead {
  background-color: var(--color-light-orange);
  color: var(--color-white);
}
.item table th,
.item table td {
  border: 1px solid var(--color-orange);
  padding: 12px;
  text-align: center;
  color: var(--color-text);
}

.item table tbody tr:nth-child(even) {
  background-color: var(--color-hilight-orange);
}
.item ol {
  list-style: decimal;
  padding-left: 1.5em;
}
.item .weigh .wrapper {
  padding-top: 30px;

  display: flex;
  justify-content: space-between;
  gap: 20px; 
  padding-left: 0;
}

.item .weigh img {
  width: 40%; /* 写真の大きさ（調整可） */
  height: auto;
  object-fit: cover;
  margin: 0;
}

.item .weigh-text {
  width: 50%; /* テキスト側も半分 */
}
.item .sec-03 h3 {
  position: relative;
  padding-bottom: 15px;
}
.item .sec-03 h3::before {
  content: '';
  position: absolute;
  top: 48%;
  left: 0;
  right: 0;
  border-top: 1px solid var(--color-text);
}
.item .sec-03 h3 > span {
  position: relative;
  display: inline-block;
  padding: 0 8px 0 0;
  background-color: #fff;
}
.item .sec-03 li {
  line-height: 50px;
  color: var(--color-text);
}
/* フッター */
.item .footer {
  background-color: var(--color-footer);
  padding: 50px 0 20px; /* パディング調整 */
  color: var(--color-text);
}
.item .footer .wrapper {
  max-width: var(--width-content);
}
.item .footerp {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* 折り返し */
  gap: 30px; /* 要素間の隙間 */
  margin-bottom: 40px; /* copyrightとの間隔 */
}
.item .footer-info {
  flex-basis: 300px; /* ロゴ情報の幅 */
  flex-grow: 1;
}
.item .footer-info img {
  height: 35px; /* フッターロゴサイズ */
  width: auto;
  margin: 0 0 15px 0; /* ロゴ下の余白、左寄せ */
}
.item .footer-info p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.item .sns-link {
  display: flex;
  gap: 15px;
}
.item .sns-link a {
  font-size: 24px; /* SNSアイコンサイズ */
  color: var(--color-secondary);
  transition: color 0.3s;
}
.item .sns-link a:hover {
  color: var(--color-accent);
}

.item .footer-link {
  flex-basis: 180px; /* 各リンクリストの幅 */
  flex-grow: 1;
}
.item .footer-link h5 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: var(--color-accent);
}
.item .contentp {
  list-style: none;
  padding: 0;
  margin: 0;
}
.item .contentp li {
  margin-bottom: 10px;

}
.item .contentp a {
  font-size: 14px;
  color: var(--color-text);
  transition: color 0.3s;
}
.item .contentp a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.item .copyright {
  text-align: center;
  font-size: 12px;
  color: var(--color-gray);
  padding-top: 20px; /* 上の区切り線 */
  border-top: 1px solid var(--color-primary);
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
.item .wrapper {
    width: 768px;
}
.item .header .wrapper {
  width: 100%;
}
/* .nav-list {
  width: 100%;
  display: flex;
  justify-content: space-between;
} */
.item .logop {
  gap: 100px;
}
.item .sec-01 .wrapper {
  width: 100%;
} 
.item .sec-02 .wrapper {
  width: 100%;
} 
.item .btn-secondary {
  width: 260px;
}
.item .sec-03 .wrapper {
  width: 100%;
} 
.item .footer .wrapper {
  width: 100%;
}
}
/* レスポンシブスマートフォン */
@media screen and (max-width: 767px) {
.item .wrapper {
  width: 100%;
}
.item .header .wrapper {
width: 100%;
}
.item .top-banner .wrapper {
padding: 0;
}
/* ナビゲーション（sp） */
.item .hamburger {
display: flex;
}

.item .hamburger {
    display: flex;
}

.item .nav-list {
    display: none;
}

.item .sp-nav.active {
    display: flex;
}
.item .nav-list {
display: none;
flex-direction: column;
background: white;
position: absolute;
top: 100%;
right: 0;
width: 200px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
z-index: 1000;
}

.item .nav-list.active {
display: flex;
}
  /* セクション01 */
  .item .sec-01 {
    padding-top: 30px;
  }
  .item .sec-01 .wrapper{
      width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
  }
  .item .points {
  flex-direction: column;
  align-items: center;
  }
  .item .point {
  width: 100%;
  padding: 1rem 0;
  position: relative;
  }
  .item .point-text:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 40px;
  right: -15px;
  width: 30px;
  height: 2px;
  background-color: var(--color-blue);
  }
  .item .point-text {
  margin-left: 18px;
  margin-right: 18px;
  }
  /* セクション02 */
  .item .sec-02 .wrapper {
      width: 100%;
  }
  .item .recommended-products {
    gap: 30px;
  }
  
  .item .recommended-product {
    flex: 0 0 calc(50% - 15px);
    padding: 15px;
  }
  
  .item .recommended-image {
    height: 150px;
  }
  
  /* 商品リスト */
  .item .item-link {
    justify-content: space-between;
  }
  
  .item .item-list {
    flex: 0 1 calc(50% - 10px);
    margin-bottom: 20px;
  }
  
  .item .sec-02 .wrapper {
    width: 100%;
    margin: 0 auto;
  }
  
  .item .recommended-section {
    margin-top: 40px;
  }
  
  .item .recommended-title {
    font-size: 16px;
    margin-bottom: 20px;
  }
  
  .item .sec-02 {
    margin-bottom: 60px;
  }

  /* 商品1と商品2の間にborder-right */
.item .recommended-product:nth-child(1) {
  border-right: 0px;
  border-bottom: 2px dotted #ccc;
  padding-bottom: 30px;
}

/* 商品2と商品3の間にborder-right */
.item .recommended-product:nth-child(2) {
  border-right: 0px;
  border-bottom: 2px dotted #ccc;
}
.item .recommended-product:nth-child(3) {
  border-right: 0px;
  border-bottom: 2px dotted #ccc;
}
.item .recommended-product:nth-child(4) {
  border-right: 0px;
  border-bottom: 2px dotted #ccc;
}
/* 商品2と商品3の間にborder-right */
.item .recommended-product:nth-child(5) {
  border-right: 0px;
  border-bottom: 2px dotted #ccc;
}
.item .recommended-product:nth-child(6) {
  border-right: 0px;
  border-bottom: 2px dotted #ccc;
}
.item .recommended-product:nth-child(7) {
  border-right: 0px;
  border-bottom: 2px dotted #ccc;
}

/* 商品2と商品3の間にborder-right */
.item .recommended-product:nth-child(8) {
  border-right: 0px;
  border-bottom: 2px dotted #ccc;
}
.item .recommended-product:nth-child(9) {
  border-right: 0px;
  border-bottom: 2px dotted #ccc;
}
.item .recommended-products {
  display: flex;
  flex-direction: column;
    gap: 20px; 
}
.item .recommended-image {
  aspect-ratio: 4 / 3;
  height: auto;
}

.item .recommended-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
  /* セクション03 */
  .item .sec-03 .wrapper {
      width: 100%;
  }
  .item .sec-ttl {
      font-size: 1.5rem;
      text-align: center;
  }
  .item .sec-03 li {
    line-height: 30px;
  }
  .item .sec-03 p {
  font-size: 1rem;
  line-height: 1.6;
  }

  .item .weigh ol li {
  margin-bottom: 0.8em;
  font-size: 14px;
  }
  .item table {
      width: 100%;
      border-collapse: collapse;
      min-width: 600px;
  }
  .item .table-wrapper {
  overflow-x: auto;
  }
  .item .weigh .wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  .item .weigh img {
  max-width: 90%;
  height: auto;
  margin-bottom: 1em;
  }

  .item .weigh-text {
  width: 90%;
  }
  .item .footerp { flex-direction: column; text-align: center; }
  .item .footer-info img { margin: 0 auto 15px; }
  .item .sns-link { justify-content: center; }
  .item .footer-link { text-align: center; }
  .item .footer-info {
    flex-basis: 0px; /* ロゴ情報の幅 */
    flex-grow: 1;
  }
}

/* order のスタイルはこちらから */

/* セクション01 */
.order .sec-01 {
  margin-bottom: 100px;
}
.order .sec-01 .wrapper {
  max-width: var(--width-narrow); /* width から max-width へ変更推奨 */
}
.order .orders {
  display: flex;
  gap: 30px; /* 間隔調整 */
  justify-content: center; /* 中央寄せ */
  flex-wrap: wrap; /* スマホ表示で折り返す場合 */
}
.order .order { /* 共通スタイル */
  flex: 1; /* 横並びで均等幅 */
  min-width: 280px; /* 最小幅 */
  max-width: 340px; /* 最大幅 */
  padding: 20px; /* パディング調整 */
  border-radius: 8px; /* 角丸 */
  text-align: center; /* テキスト中央寄せ */
  box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* 影 */
}
.order .order img {
  margin-bottom: 15px; /* 画像下の余白 */
  border-radius: 4px;
}
.order .order p {
  font-size: 14px;
  color: var(--color-text);
  padding-top: 5px;
  text-align: left;
}
.order .point-ttl {
  padding-bottom: 10px;
  font-size: 20px; /* サイズ調整 */
  text-align: left;
}
.order .order1 {
  background-color: var(--color-footer);
}
.order .order1 h3 {
  color: var(--color-secondary);
}
.order .order1 .btn-secondary {
  background-color: var(--color-secondary);
  width: 150px;
}
.order .order1 .btn-secondary:hover {
  background-color: #e0a3b5;
  /* transform は .btn:hover で共通化 */
}


.order .order1:hover,
.order .order2:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);  /* ホバーで影を追加 */
  transform: translateY(-4px);               /* 少し浮かせる */
}

.order .order1,
.order .order2 {
  transition: all 0.3s ease;
}
.order .order1 {
  background-color: var(--color-footer);
}
.order .order2 {
  background-color: var(--color-hilight-blue);
}
.order .order2 h3 {
  color: var(--color-blue);
}
.order .order2 .btn-secondary {
  background-color: var(--color-blue);
  width: 150px;
}
.order .order2 .btn-secondary:hover {
  background-color: #bfccee;
  /* transform は .btn:hover で共通化 */
}
.order .sec-01 .btn-secondary {
  margin: 0; /* ボタン自体のマージンは不要 */
}
/* .sec-01 .btn-primary { align-items: center; } Flexアイテムではないので不要 */

/* セクション02 (人気デザイン) */
.order .sec-02 {
  margin-bottom: 100px; /* セクション下のマージン */
}
.order .sec-02 .wrapper {
  max-width: var(--width-content);
}
/* .sec-02 .slider {...} Splideに移行したので不要 */
/* .sec-02.slide {...} 不要 */
.order .sec-02 p.copy { /* copyクラスへのスタイル */
   margin-bottom: 30px; /* スライダーとの間隔 */
}
.order #popular-designs-splide { /* IDセレクタに変更 */
  /* width: 100%; デフォルトでOK */
  margin: 0 auto;
  padding-bottom: 30px; /* プログレスバーのためのスペース */
}

/* 人気デザイン スライドアイテムのスタイル */
.order #popular-designs-splide .splide__slide {
  text-align: center; /* 内容を中央寄せ */
  padding: 0 10px; /* スライド間の左右パディング */
}
.order #popular-designs-splide .splide__slide img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px; /* 画像とテキストの間隔 */
  border: 1px solid #eee; /* 枠線 */
  border-radius: 4px;
}
.order #popular-designs-splide .splide__slide p {
  text-align: center;
  font-size: 1rem; /* 16px */
  margin: 5px 0;
  line-height: 1.4;
}

/* 人気デザイン プログレスバーのスタイル */
.order #popular-designs-splide .splide__progress {
  background: #e0e0e0; /* バーの背景色 */
  height: 4px; /* バーの高さ */
}
.order #popular-designs-splide .splide__progress__bar {
  background: var(--color-secondary); /* 進捗の色 */
  height: 100%;
  transition: width 400ms ease; /* アニメーション */
  transform-origin: left center;
  width: 0; /* 初期状態 */
}

/* 人気デザイン 矢印の位置調整 */
.order #popular-designs-splide .splide__arrow {
  top: 40%; /* 上下中央あたりに */
}
.order #popular-designs-splide .splide__arrow--prev {
  left: -1em; /* 少し外側に */
}
.order #popular-designs-splide .splide__arrow--next {
  right: -1em; /* 少し外側に */
}

/* --- style.css の続き --- */

/* セクション03 オーダーメイドの流れ */
.order .sec-03 {
  margin-bottom: 100px;
  background-color: var(--color-hilight-orange); /* 背景色をつけてみる */
  padding: 60px 0; /* 上下パディング */
}
.order .sec-03 .wrapper {
  max-width: var(--width-content);
}
.order .steps {
  display: grid; /* Gridレイアウトに変更 */
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); /* レスポンシブなカラム */
  gap: 30px; /* グリッド間の隙間 */
  margin-top: 40px; /* タイトルとの間隔 */
}
.order .step-ttl {
  color: var(--color-orange);
}
.order .step {
  background-color: var(--color-white);
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  position: relative;
  padding-top: 30px;
  width: 100%; /* 数字のためのスペース */
}
.order .step .number {
      align-items: center;
      display: flex;
      justify-content: center;
      width: 80px;
      height: 80px;
      background-color: var(--color-orange);
      color: #fff;
      font-size: 22px;
      font-weight: bold;
      border-radius: 50%;
      margin: 0 auto 20px;
}
.order .step-ttl {
  font-size: 18px; /* サイズ調整 */
  margin-bottom: 15px;
  text-align: center;
}
.order .step-text {
  font-size: 15px;
  margin-bottom: 15px;
  text-align: justify; /* 両端揃え */
}
.order .step-textt { /* Tip用のスタイル */
  font-size: 14px;
  color: var(--color-gray);
  background-color: #f0f0f0; /* 背景色 */
  padding: 10px;
  border-radius: 4px;
  border-left: 3px solid var(--color-orange); /* 左のボーダー */
}

/* セクション04 お客様の声 */
.order .sec-04 {
  background-color: var(--color-white);
  margin-bottom: 100px;
  padding-bottom: 0px;
}
.order .sec-04 .wrapper {
  max-width: var(--width-narrow); /* Narrow幅に */
}
.order .voice-card {
  background-color: var(--color-white);
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  margin-bottom: 40px; /* カード間の間隔 */
  display: flex; /* Flexboxでレイアウト */
  flex-direction: column; /* 縦並び */
  align-items: center; /* 中央寄せ */
}
.order .voice-card img {
  width: 100px; /* 画像サイズ */
  height: 100px;
  border-radius: 50%; /* 円形に */
  object-fit: cover;
  margin-bottom: 20px;
  border: 3px solid var(--color-primary); /* 枠線 */
}
.order .voice-name {
  font-weight: bold;
  font-size: 17px;
  margin-bottom: 10px;
  color: var(--color-accent);
}
.order .voice-text {
  font-size: 15px;
  text-align: center; /* テキスト中央寄せ */
  line-height: 1.8; /* 行間広め */
}
.order .voice-text::before,
.order .voice-text::after { /* 引用符風デザイン */
  content: '"';
  font-family: 'Merriweather', serif;
  font-size: 24px;
  color: var(--color-primary);
  margin: 0 5px;
}


/* フッター */
.order .footer {
  background-color: var(--color-footer);
  padding: 50px 0 20px; /* パディング調整 */
  color: var(--color-text);
}
.order .footer .wrapper {
  max-width: var(--width-content);
}

.order .footerp {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* 折り返し */
  gap: 30px; /* 要素間の隙間 */
  margin-bottom: 40px; /* copyrightとの間隔 */
}
.order .footer-info {
  flex-basis: 300px; /* ロゴ情報の幅 */
  flex-grow: 1;
}
.order .footer-info img {
  height: 35px; /* フッターロゴサイズ */
  width: auto;
  margin: 0 0 15px 0; /* ロゴ下の余白、左寄せ */
}
.order .footer-info p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.order .sns-link {
  display: flex;
  gap: 15px;
}
.order .sns-link a {
  font-size: 24px; /* SNSアイコンサイズ */
  color: var(--color-secondary);
  transition: color 0.3s;
}
.order .sns-link a:hover {
  color: var(--color-accent);
}

.order .footer-link {
  flex-basis: 180px; /* 各リンクリストの幅 */
  flex-grow: 1;
}
.order .footer-link h5 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: var(--color-accent);
}
.order .contentp {
  list-style: none;
  padding: 0;
  margin: 0;
}
.order .contentp li {
  margin-bottom: 10px;
}
.order .contentp a {
  font-size: 14px;
  color: var(--color-text);
  transition: color 0.3s;
}
.order .contentp a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.order .copyright {
  text-align: center;
  font-size: 12px;
  color: var(--color-gray);
  padding-top: 20px; /* 上の区切り線 */
  border-top: 1px solid var(--color-primary);
}


/* レスポンシブ対応例 (仮) */
@media (max-width: 767px) {
  :root {
      --width-content: 95%; /* スマホでは幅を%指定に */
      --width-narrow: 90%;
  }
  .order .top-banner .wrapper {
      padding: 0;
  }
  .order .sec-ttl { font-size: 24px; }
  .order h3 { font-size: 18px; }
  .order p { font-size: 14px; }

  .order .wrapper {
      width: 100%;
  }
  .order .header .wrapper {
      width: 100%;
      }
      .order .top-banner .wrapper {
      padding: 0;
      }
      /* ナビゲーション（sp） */
      .order .hamburger {
      display: flex;
      }
  
      .order .hamburger {
          display: flex;
      }
  
      .order .nav-list {
          display: none;
      }
  
      .order .sp-nav.active {
          display: flex;
      }
      .order .nav-list {
      display: none;
      flex-direction: column;
      background: white;
      position: absolute;
      top: 100%;
      right: 0;
      width: 200px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      z-index: 1000;
      }
  
      .order .nav-list.active {
      display: flex;
  }

  .order .orders { flex-direction: column; gap: 20px; align-items: center;}
  .order .order { flex-basis: auto; width: 90%; max-width: 400px; }

  .order #popular-designs-splide .splide__arrow { display: none; } /* スマホでは矢印非表示 */

  .order .steps { grid-template-columns: 1fr; } /* 1カラムに */
  .order .footerp { flex-direction: column; text-align: center; }
  .order .footer-info img { margin: 0 auto 15px; }
  .order .sns-link { justify-content: center; }
  .order .footer-link { text-align: center; }
  .order .footer-info {
      flex-basis: 0px; /* ロゴ情報の幅 */
      flex-grow: 1;
  }
}

/* purchase のスタイルはこちらから */

  /* .main .wrapper { width: 100vw; } 不要 or 意図を確認 */

  .purchase .container {
    max-width: 1200px;
    margin: auto;

    display: flex;
  justify-content: space-between; /* 必要に応じて調整 */
  align-items: flex-start; /* 高さを揃える */
}

/* サイドバー */
.purchase .paw-toggle {
    position: fixed;
    top: 130px;   /* ヘッダーの下に表示 */
    left: 15px;
    background: none;
    border: none;
    font-size: 24px;
    z-index: 1100;
    display: none;  /* デフォルトで非表示（PC版には表示しない） */
    cursor: pointer;
}
.purchase .sidebar-wrapper {
    position: relative;
    height: 1000px;
}

.purchase .sidebar {
position: sticky;
top: 125px; 
width: 200px;
padding: 20px;

border-radius: 8px;
}

.main-wrapper {
  max-width: 1020px;

}
.purchase .sidebar h3 {
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 15px;
}

.purchase .sidebar ul {
    list-style: none;
    margin-bottom: 30px;
}

.purchase .sidebar li {
    margin-bottom: 10px;
    font-size: 14px;
    padding-left: 20px;
}
.purchase .sidebar li a:hover {
  color: var(--color-accent);
  text-decoration: underline; /* 好きな色を指定 */
}
/* メインコンテンツ */
.purchase .main-content {
    flex: 1;
    display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
    
}

/* 商品詳細 */
.purchase .splide-sp {
    display: none;
}
.purchase .product-container {
    display: flex;
    margin-bottom: 60px;
    width: 50%;
}

.purchase .product-images {
    width: 100%;
    padding-right: 30px;
}

.purchase .main-image img {
    width: 100%;
    border-radius: 5px;
}

.purchase .thumbnail-images {
    display: flex;
    margin-top: 10px;
}

.purchase .thumbnail {
    width: 80px;
    height: 80px;
    margin-right: 10px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
}

.purchase .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.purchase .product-info {
    width: 50%;
}

.purchase .product-title {
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 20px;
}

.purchase .product-price {
    font-size: 16px;
    margin-bottom: 15px;
}

.purchase .product-description {
    font-size: 14px;
    margin-bottom: 30px;
    line-height: 1.8;
}

.purchase .product-tags {
    margin-bottom: 30px;
}

.purchase .tag {
    display: inline-block;
    background-color: #f5f5f5;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 12px;
    margin-right: 8px;
    margin-bottom: 8px;
}

/* 数量選択 */
.purchase .quantity-sections {
  display: flex;
  justify-content: flex-start;
}
.purchase .quantity-section {
    margin-bottom: 20px;
}

.purchase .quantity-label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
}

.purchase .quantity-selector {
    display: flex;
    align-items: center;
}

.purchase .quantity-input {
    width: 100px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    margin-right: 10px;
}

/* カートボタン */
.purchase .cart-button {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #000;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 15px;
    text-align: center;
}

.purchase .shipping-note {
    font-size: 12px;
    color: #666;
    margin-bottom: 30px;
}

/* 商品詳細セクション */
.purchase .details-section {
    margin-bottom: 20px;
}

.purchase .details-title {
    font-size: 16px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

.purchase .plus-icon {
    cursor: pointer;
    font-size: 20px;
}

.purchase .details-content {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
    display: none;
}

.purchase .details-content.active {
    display: block;
}

/* おすすめ商品 */
.purchase .recommended-section {
    margin-top: 60px;
}
.purchase .recommended-section-sp {
    display: none;
}
.purchase .recommended-title {
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 30px;
}

.purchase .recommended-products {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.purchase .recommended-product {
    width: calc(33.333% - 14px);
}

.purchase .recommended-image {
    width: 100%;
    height: 200px;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 10px;
}

.purchase .recommended-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.purchase .recommended-product-title {
    font-size: 14px;
    margin-bottom: 5px;
}

.purchase .recommended-product-price {
    font-size: 12px;
    margin-bottom: 10px;
}

.purchase .recommended-product-description {
    font-size: 12px;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.5;
}

.purchase .status-tag {
    display: inline-block;
    padding: 3px 10px;
    background-color: #f0f0f0;
    font-size: 12px;
    border-radius: 3px;
    margin-bottom: 10px;
}
/* フッター */
.purchase .footer {
    background-color: var(--color-footer);
    padding: 50px 0 20px; /* パディング調整 */
    color: var(--color-text);
}
.purchase .footer .wrapper {
max-width: var(--width-content);
}
.purchase .footerp {
display: flex;
justify-content: space-between;
flex-wrap: wrap; /* 折り返し */
gap: 30px; /* 要素間の隙間 */
margin-bottom: 40px; /* copyrightとの間隔 */
}
.purchase .footer-info {
flex-basis: 300px; /* ロゴ情報の幅 */
flex-grow: 1;
}
.purchase .footer-info img {
height: 35px; /* フッターロゴサイズ */
width: auto;
margin: 0 0 15px 0; /* ロゴ下の余白、左寄せ */
}
.purchase .footer-info p {
font-size: 14px;
line-height: 1.6;
margin-bottom: 20px;
}
.purchase .sns-link {
display: flex;
gap: 15px;
}
.purchase .sns-link a {
font-size: 24px; /* SNSアイコンサイズ */
color: var(--color-secondary);
transition: color 0.3s;
}
.purchase .sns-link a:hover {
color: var(--color-accent);
}

.purchase .footer-link {
flex-basis: 180px; /* 各リンクリストの幅 */
flex-grow: 1;
}
.purchase .footer-link h5 {
font-size: 16px;
font-weight: bold;
margin-bottom: 15px;
color: var(--color-accent);
}
.purchase .contentp {
list-style: none;
padding: 0;
margin: 0;
}
.purchase .contentp li {
margin-bottom: 10px;
}
.purchase .contentp a {
font-size: 14px;
color: var(--color-text);
transition: color 0.3s;
}
.purchase .contentp a:hover {
color: var(--color-accent);
text-decoration: underline;
}

.purchase .copyright {
text-align: center;
font-size: 12px;
color: var(--color-gray);
padding-top: 20px; /* 上の区切り線 */
border-top: 1px solid var(--color-primary);
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    .purchase .wrapper {
        width: 768px;
    }
    .purchase .header .wrapper {
    width: 100%;
}
.purchase .logop {
    gap: 100px;
    }

.purchase .container {
  max-width: 1199px;
  margin: auto;

  display: flex;
justify-content: center; /* 必要に応じて調整 */
align-items: flex-start; /* 高さを揃える */
}
.purchase .sidebar {
  position: sticky;
  top: 125px; 
  width: 180px;
  padding: 20px;
  
  border-radius: 8px;
  }
  
  .main-wrapper {
    max-width: 700px;
  
  }
}
@media screen and (max-width: 768px) {
    .purchase .wrapper {
        width: 100%;
    }
    .purchase .header .wrapper {
    width: 100%;
}
.purchase .top-banner .wrapper {
    padding: 0;
}
/* ナビゲーション（sp） */
.purchase .main-content {
  padding: 0 20px;
  margin-bottom: 80px;
}
.purchase .hamburger {
    display: flex;
}

    .purchase .hamburger {
        display: flex;
    }

    .purchase .nav-list {
        display: none;
    }

    .purchase .sp-nav.active {
        display: flex;
    }
.purchase .nav-list {
    display: none;
    flex-direction: column;
    background: white;
    position: absolute;
    top: 100%;
    right: 0;
    width: 200px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1000;
}

.purchase .nav-list.active {
    display: flex;
    }
    .purchase .paw-toggle {
    display: block;
    text-align: right;
}
.purchase .paw-toggle i {
  display: inline-block;
  text-align: right;
}
.purchase .search-icons {
  display: flex;
  justify-content: flex-end; /* ← フレックスで右寄せ */
}

.purchase .paw-toggle {
    display: block;
}
.purchase .sidebar {
  top: 160px; 
  }
.purchase .sidebar-wrapper {
position: fixed;
top: 130px;  /* ヘッダーの下に表示 */
left: -250px;  /* 最初は左側に隠れている */
width: 250px;
height: calc(100% - 125px);  /* ヘッダー下から残りの高さを調整 */
background-color: #fff;
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
transition: left 0.3s ease;
z-index: 1000;
}

.purchase .sidebar-wrapper.open {
left: 0;  /* 開いた時にサイドバーが表示される */
}
.purchase .search-icons .paw-toggle {
    font-size: 35px; /* アイコンサイズ */
    }
    .purchase .main-content {
        display: block;
    }

    
    .purchase .product-container {
    display: block;
    width: 100%;
    }
    .purchase .product-images {
        width: 100%;
        align-items: center;
        padding: unset;
    }

    .purchase .product-info {
    width: 100%;
    margin-top: 20px;
    }

    /* おすすめ商品を縦に並べる */
    .purchase .recommended-section-sp {
        padding: 0 20px;
    }
    .purchase .recommended-section-sp .recommended-product {
        width: calc(100% - 14px);
      }
    
    .purchase .recommended-image {
        width: 100%;
        height: 200px;
        border-radius: 5px;
        overflow: hidden;
        margin-bottom: 10px;
    }
    
    .purchase .recommended-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .purchase .recommended-product-title {
        font-size: 14px;
        margin-bottom: 5px;
    }
    
    .purchase .recommended-product-price {
        font-size: 12px;
        margin-bottom: 10px;
    }
    
    .purchase .recommended-product-description {
        font-size: 12px;
        color: #666;
        margin-bottom: 15px;
        line-height: 1.5;
    }
    .purchase .recommended-section {
        display: none;
    }
    .purchase .recommended-section-sp {
        display: block;
    }
    .purchase .recommended-products-sp {
        display: flex; /* 横並びにする */
        /* flex-wrap: wrap; 画面幅に応じてアイテムが折り返される */
        justify-content: space-between;
    }

    .purchase .recommended-product-sp {
        width: calc(50% - 14px);
        padding: 0 0.8rem;
        margin-bottom: 3.6rem;
    }
    .purchase #popular-designs-splide { /* IDセレクタに変更 */
    /* width: 100%; デフォルトでOK */
    margin: 0 auto;
    padding-bottom: 30px; /* プログレスバーのためのスペース */
}

/* 人気デザイン スライドアイテムのスタイル */
.purchase #popular-designs-splide .splide__slide {
    text-align: center; /* 内容を中央寄せ */
    padding: 0 10px; /* スライド間の左右パディング */
}
.purchase #popular-designs-splide .splide__slide img {
    
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px; /* 画像とテキストの間隔 */
    border: 1px solid #eee; /* 枠線 */
    border-radius: 4px;
}
.purchase #popular-designs-splide .splide__slide p {
    text-align: center;
    font-size: 14px; /* 16px */
    margin: 5px 0;
    line-height: 1.4;
}
.purchase .splide__slide {
    width: calc(50% - 15px) !important;
}
/* 人気デザイン プログレスバーのスタイル */
.purchase #popular-designs-splide .splide__progress {
    background: #e0e0e0; /* バーの背景色 */
    height: 4px; /* バーの高さ */
}
.purchase #popular-designs-splide .splide__progress__bar {
    background: var(--color-secondary); /* 進捗の色 */
    height: 100%;
    transition: width 400ms ease; /* アニメーション */
    width: 0; /* 初期状態 */
}
/* 人気デザイン 矢印の位置調整 */
.purchase #popular-designs-splide .splide__arrow {
    top: 40%; /* 上下中央あたりに */
}
.purchase #popular-designs-splide .splide__arrow--prev {
    left: -1em; /* 少し外側に */
}
.purchase #popular-designs-splide .splide__arrow--next {
    right: -1em; /* 少し外側に */
}

/* --- style.css の続き --- */

    /* サムネイル画像も縦に並べる */
    

    /* 詳細セクションやお手入れ方法セクションも縦に並べる */
    .purchase .details-section {
    display: block;
    }

    .purchase .details-title {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    }

    .purchase .details-content {
    display: none; /* 初期状態で非表示 */
    }

    /* "+" アイコンのクリックで詳細表示 */
    .purchase .details-title .plus-icon {
    cursor: pointer;
    }
    .purchase .item-list {
        flex: 0 1 calc(50%); 
        padding: 0 0.8rem;
        margin-bottom: 3.6rem;
        }
        .purchase .footerp { flex-direction: column; text-align: center; }
    .purchase .footer-info img { margin: 0 auto 15px; }
    .purchase .sns-link { justify-content: center; }
    .purchase .footer-link { text-align: center; }
    .purchase .footer-info {
      flex-basis: 0px; /* ロゴ情報の幅 */
      flex-grow: 1;
    }
}

/* story のスタイルはこちらから */

/* セクション01 */
.story .sec-01 {
  margin-bottom: 100px;
}
.story .sec-01 .wrapper {
  width: var(--width-narrow);
}
.story .story-item {
  flex: unset;
}

.story .sec-01 p {
  padding-bottom: 30px;
  line-height: 25px;
}
.story .sec-01-p {
  text-align: center;
}
.story .sec-01 h3 {
  position: relative;
  padding-bottom: 15px;
}
.story .sec-01 h3::before {
  content: '';
  position: absolute;
  top: 48%;
  left: 0;
  right: 0;
  border-top: 1px solid var(--color-text);
}
.story .sec-01 h3 > span {
  position: relative;
  display: inline-block;
  padding: 0 8px 0 0;
  background-color: #fff;
}
.story .story-area {
  display: flex;
  justify-content: space-between;
  flex: 0 0 40%;
  padding-bottom: 40px;
  gap: 10px;
}
.story .story-text {
  flex: 0 0 60%;
}
.story .story-01 h3 {
  color: var(--color-accent);
}
.story .story-02 h3 {
  color: var(--color-blue);
}
.story .story-03 h3 {
  color: var(--color-oorange);
}
/* セクション02 */
.story .sec-02 {
  margin-bottom: 100px;
  background-color: var(--color-footer);
  padding-top: 60px;
  padding-bottom: 60px;
}

.story .sec-02 .wrapper {
  width: var(--width-content);
} 
.story .sec-02 p {
  text-align: center;
  padding-bottom: 30px;
  line-height: 30px;
}
.story .steps {
  display: flex;
  justify-content: space-between; /* 横に間隔を開ける */
  gap: 80px; /* 要素間のスペース */
  flex-wrap: wrap;
}

.story .step {
  flex: 1; 
  background-color: var(--color-white); /* 背景つけたい場合 */
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}
.story .sec-02 .fa-solid {
  align-items: center;
  display: flex;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: var(--color-primary);
  color: var(--color-accent);
  font-size: 22px;
  font-weight: bold;
  border-radius: 50%;
  margin: 0 auto 20px;
}
.story .step-ttl {
  color: var(--color-accent);
}
/* セクション03 */
.story .sec-03 {
  margin-bottom: 100px;
}
.story .sec-03 .sec-ttl {
  text-align: center;

}
.story .sec-03 h3 {
}
.story .staff {
background-color: var(--color-white);
padding: 30px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
margin-bottom: 40px; /* カード間の間隔 */
display: flex; /* Flexboxでレイアウト */
flex-direction: column; /* 縦並び */
align-items: center;
}
.story .staff img {
width: 200px; /* 画像サイズ */
height: 200px;
border-radius: 50%; /* 円形に */
object-fit: cover;
margin-bottom: 20px;
border: 3px solid var(--color-primary); 
}
.story .staff-text {
  flex: 0 0 60%;
}
.story .staff .copyy {
font-size: 15px;
text-align: center; /* テキスト中央寄せ */
line-height: 1.8;
}
.story .staff .copy {
font-weight: bold;
font-size: 17px;
margin-bottom: 10px;
color: var(--color-accent);
}
.story .staff .copy,.copyy::before,
.story .staff .copy,.copyy::after { /* 引用符風デザイン */
  content: '"';
  font-family: 'Merriweather', serif;
  color: var(--color-primary);
  margin: 0 5px;
}
/* フッター */
.story .footer {
  background-color: var(--color-footer);
  padding: 50px 0 20px; /* パディング調整 */
  color: var(--color-text);
}
.story .footer .wrapper {
  max-width: var(--width-content);
}
.story .footerp {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* 折り返し */
  gap: 30px; /* 要素間の隙間 */
  margin-bottom: 40px; /* copyrightとの間隔 */
}
.story .footer-info {
  flex-basis: 300px; /* ロゴ情報の幅 */
  flex-grow: 1;
}
.story .footer-info img {
  height: 35px; /* フッターロゴサイズ */
  width: auto;
  margin: 0 0 15px 0; /* ロゴ下の余白、左寄せ */
}
.story .footer-info p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.story .sns-link {
  display: flex;
  gap: 15px;
}
.story .sns-link a {
  font-size: 24px; /* SNSアイコンサイズ */
  color: var(--color-secondary);
  transition: color 0.3s;
}
.story .sns-link a:hover {
  color: var(--color-accent);
}

.story .footer-link {
  flex-basis: 180px; /* 各リンクリストの幅 */
  flex-grow: 1;
}
.story .footer-link h5 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: var(--color-accent);
}
.story .contentp {
  list-style: none;
  padding: 0;
  margin: 0;
}
.story .contentp li {
  margin-bottom: 10px;
}
.story .contentp a {
  font-size: 14px;
  color: var(--color-text);
  transition: color 0.3s;
}
.story .contentp a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.story .copyright {
  text-align: center;
  font-size: 12px;
  color: var(--color-gray);
  padding-top: 20px; /* 上の区切り線 */
  border-top: 1px solid var(--color-primary);
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .story .wrapper {
      width: 768px;
  }
  .story .header .wrapper {
      width: 100%;
  }
  .story .logop {
      gap: 100px;
  }
  .story .sec-01 .wrapper {
      width: 768px;
  }
  /* セクション02 */
  .story .sec-02 .wrapper {
      width: 100%;
  }
  .story .sec-03 .wrapper {
      width: 100%;
  }
  /* フッター */
.story .footer .wrapper {
  width: 100%;
  }
  .story .ttext {
    display: block;
  }
}

/* レスポンシブスマートフォン */
@media screen and (max-width: 767px) {
.story .wrapper {
  width: 100%;
}
.story .header .wrapper {
width: 100%;
}
.story .top-banner .wrapper {
padding: 0;
}
/* ナビゲーション（sp） */
.story .hamburger {
display: flex;
}

.story .hamburger {
    display: flex;
}

.story .nav-list {
    display: none;
}

.story .sp-nav.active {
    display: flex;
}
.story .nav-list {
display: none;
flex-direction: column;
background: white;
position: absolute;
top: 100%;
right: 0;
width: 200px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
z-index: 1000;
}

.story .nav-list.active {
display: flex;
}
  /* セクション01  */
  .story .sec-01 .wrapper {
      width: 100%;
  }
  .story .sec-01 .sec-ttl {
      font-size: 22px;
  }
  .story .story {
      flex-direction: column;
      gap: 0px;
      margin-bottom: 30px;
  }

  .story .story-text h3 {
  order: 1;
  }

  .story .story-image {
  order: 2;
  }

  .story .story-text .ttext {
  order: 3;
  }
  .story .story-text h3 {
  margin-top: 16px;
  }

  .story .story-text p {
  margin-top: 8px;
  }
  .story .sec-01 p {
    padding-bottom: 0px;
    line-height: 25px;
  }
  .story .sec-01 img {
  width: 80%;
  max-width: 400px; 
  height: auto;
  display: block;
  margin: 0 auto;
  }
  /* セクション02 */
  .story .sec-02 .wrapper {
      width: 100%;
  }
  .story .steps {
      display: flex;
      flex-direction: column;
      gap: 24px; /* 各ステップの間に余白 */
  }
  /* セクション03 */
  .story .sec-03 .wrapper {
      width: 100%;
  }
  .story .staff {
      display: flex;
      flex-direction: column;
  }
  .story .staff img {
      order: 1;
  }
  .story .staff-text {
      order: 2;
  }
  .story .footerp { flex-direction: column; text-align: center; }
  .story .footer-info img { margin: 0 auto 15px; }
  .story .sns-link { justify-content: center; }
  .story .footer-link { text-align: center; }
  .story .footer-info {
    flex-basis: 0px; /* ロゴ情報の幅 */
    flex-grow: 1;
  }
  .story .ttext {
    display: block;
  }
}