/* 色見本のボックス設定など */


 .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 自動可変 */
  gap: 5px;
  margin: 5px;
  font-family: Arial, sans-serif;
  font-size: 14px;
 width: 80vw; /* ボックスの部分だけサイト幅広げる。marginも合わせて修正 */
 margin: 0 calc(50% - 40vw); /* 中央揃えで80vw */
}
.color-box {
  border: 1px solid #ccc;
  padding: 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background-color: transparent;
  color: #fbfbfb;
  min-height: 60px;
}

    .color-box:nth-child(even) {
      background-color: transparent;
    }
.color-box img{
  width: 60px;
  height: auto;
  display: block;
  margin: 0 auto;
}

  @media screen and (max-width: 1000px) {
 .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 自動可変 */
  gap: 5px;
  margin: 5px;
  font-family: Arial, sans-serif;
  font-size: 14px;
 width: 80vw; /* ボックスの部分だけサイト幅広げる。marginも合わせて修正 */
 margin: 0 calc(50% - 40vw); /* 中央揃えで80vw */
}
  
  .color-box {
  min-height: 30px;
}

}
  @media screen and (max-width: 700px) {
 .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* 自動可変 */
  gap: 5px;
  margin: 5px;
  font-family: Arial, sans-serif;
  font-size: 14px;
 width: 90vw; /* ボックスの部分だけサイト幅広げる。marginも合わせて修正 */
 margin: 0 calc(50% - 45vw); /* 中央揃えで80vw */
}
  
  .color-box {
  min-height: 30px;
}

}

.toggle-btn, .close-btn {
  display: block;             /* インライン→ブロックに */
  padding: 8px 16px;
  margin: 10px auto;          /* 中央寄せ */
  background-color: #c2e9db;
  color: rgb(0, 0, 0);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}


#grid1, #grid2, #grid3, #grid4, #grid5, #grid6, #grid7, #grid8, #grid9, #grid10, #grid11, #grid12, #grid13, #grid14, #grid15, #grid16, #grid17, #grid81, #grid19, #grid20 {
  display: none;
  margin-top: 20px;
}



.close-btn {
  grid-column: 1 / -1; /* 最後の行にボタンが1列で表示される */
  justify-self: center;
  margin-top: 10px;
  padding: 5px 15px;
  background-color: #888;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
 /* 色見本のボックス設定ここまで */

.order-law {
      font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
      line-height: 1.8;
      color: #333;
      padding: 2em 1em;
      max-width: 900px;
      min-width: 320px; 
      margin: auto;
    }

.order-law h1 {
      color: white;
      border-left: 5px solid #ffffff;
      padding-left: 0.5em;
      margin-top: 2em;
    }

    .order-law table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 2em;
    }

    .order-law th, .order-law td {
      border: 1px solid #ccc;
      padding: 1em;
      vertical-align: top;
      text-align: left;
    }

    .order-law th {
      background-color: #f5f5f5;
      width: 30%;
      min-width: 120px;
      max-width: 240px;
    }
     .order-law td {
      background-color: #f9f8f6;
}
     .order-law p {
      color: white;
}

 @media screen and (max-width: 450px)  {
  .order-law {
     padding: 2em 0;
    }  }

    /* コンセプト */
.concept {
  margin-top: 0; /* セクションのデフォルトマージンをリセット */
}

.concept h1 {
    margin:  0;                 /* デフォルトCSS打ち消し */
    font-family: "Georgia", serif;
    font-size:  clamp(18px,5vw,24px);           /* 文字サイズ指定 */
    color: #ffffff; /* フォントカラーを赤に */
    position:  relative;        /* 位置調整 */
    font-weight:  normal;       /* 文字の太さ調整 */
    display:  inline-block;     /* インラインブロックにする */
    padding-top: 40px;          /* 余白指定 */
    padding-left: 40px;         /* 余白指定 */
    padding-bottom: 20px;       /* 余白指定 */
}
 p {
    font-family: "Georgia", serif;
    margin:  0;                 /* デフォルトCSS打ち消し */
    line-height: 2;             /* 行間調整 */
    padding-left: 20px;         /* 余白指定 */
    padding-bottom: 10px;         /* 余白指定 */
}
 .concept h1:before {
    content:  '';               /* 空白の要素を作る */
    background-color: #f00606;  /* 背景色指定 */
    display:  block;            /* ブロック要素にする */
    position:  absolute;        /* 位置調整 */
    left:  0;                   /* 位置調整 */
    height: clamp(80px,10vw,90px);                 /* 高さ指定 */
    width:  clamp(80px,10vw,90px);                /* 幅指定 */
    border-radius:  50%;        /* 丸くする */
    top: 0;                     /* 位置調整 */
    z-index:  -1;               /* 重なり調整 */
}
.concept-image {
  width: 100%;
  height: auto;
	padding-top: 15px;
  padding-bottom: 15px;
  border-radius: 4px;
  overflow: hidden; 
}

  /* お問い合わせフォーム */
.contact-form {
    font-family: Arial, sans-serif;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form .form-group {
    display: flex;
    flex-direction: column;
}

.contact-form .form-group label {
    margin-bottom: 5px;
    font-weight: bold;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
}

.contact-form textarea {
    min-height: 100px;
    resize: vertical;
}

.contact-form button {
    padding: 10px 20px;
    background-color: #f00606;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 10px;
}

.contact-form button:hover {
    background-color: #d00505;
}

.contact-form h1 {
    text-align: center;
    margin-bottom: 20px;
}

.contact-form .form-group span {
    padding: 8px;
    border: 1px solid #000000;
    border-radius: 4px;
    display: block;
  
}

/* SLEEVE,NECK,FALDA */
.option-image {
  width: 100%;
  height: auto;
  margin-top: 3px;
  margin-bottom: 5px;
  border-radius: 4px;
  overflow: hidden; /* ← これを追加 */
}

.option-topimage img,
.option-middleimage img,
.option-bottomimage img {
  overflow: hidden;
  line-height: 0; /* 親の行間をゼロに */
  vertical-align: top; /* ベースライン余白を解消 */
  width: 100%;
  height: auto;
}


.option-topimage {
  border-radius: 4px 4px 0 0; /* 上:直角、下:丸み */
  margin-top: 5px;
  overflow: hidden;
}

.option-middleimage {
  margin-top: 0;
}

.option-bottomimage {
  border-radius: 0 0 4px 4px;
  margin-bottom: 5px;
  overflow: hidden;
}

/* FALDA img left,text right */
   /* 狭いエリアのコンテナ */
     .option-image1-row {
      max-width: 500px; /* サイト幅を狭く設定 */
      margin: 0 auto; /* 中央揃え */
      padding: 20px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
    /* 画像とテキストを横に並べる */
    .option-image1 {
      display: flex;
    }

    /* 画像のスタイル */
    .option-image1 img {
      width: 200px; /* 縦長写真の幅 */
      height: auto; /* アスペクト比を保持 */
      object-fit: cover;
    }

    /* テキストのスタイル */
    .option-text {
      flex: 1; /* 残りのスペースをテキストが占有 */
    }

 @media screen and (max-width: 600px) {   
    .option-image1 img {
      flex: 1; /* 1/3の幅 */
      max-width: calc(100% / 3); /* 約1/3の幅を保証 */
      object-fit: contain;
      align-self: flex-start; /* 画像を上揃え */
      margin: 0; /* 余計なマージンをリセット */
    }

    /* テキストのスタイル */
    .option-text {
      flex: 2; /* 2/3の幅 */
      max-width: calc(200% / 3); /* 約2/3の幅を保証 */
    }
   }
/* トランペット用のコード*/
   /* 狭いエリアのコンテナ */
     .option-image1-trumpet-row {
      max-width: 500px; /* サイト幅を狭く設定 */
      margin: 0 auto; /* 中央揃え */
      padding: 20px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    /* 画像とテキストを横に並べる */
    .option-image1-trumpet {
      display: flex;
    }

    /* 画像のスタイル */
    .option-image1-trumpet img {
      width: 250px; /* 縦長写真の幅 */
      height: auto; /* アスペクト比を保持 */
      object-fit: cover;
    }

    /* テキストのスタイル */
    .option-text-trumpet {
      font-family: "Georgia", serif;
      flex: 1; /* 残りのスペースをテキストが占有 */
    }

@media screen and (max-width: 600px) {
  .option-image1-trumpet {
    display: flex;
    align-items: flex-start; /* 上揃え */
    gap: 10px; /* 間隔を狭めに（400pxのコンテナで適切） */
  }

  /* 画像のスタイル */
  .option-image1-trumpet img {
    flex: 4; /* 4/10の幅（40%） */
    max-width: calc(40% - 5px); /* 40%からgapの半分を引く */
    height: auto; /* アスペクト比を保持 */
    object-fit: contain; /* 画像全体を表示 */
    align-self: flex-start; /* 画像を上揃え */
    margin: 0; /* 余計なマージンをリセット */
  }

  /* テキストのスタイル */
  .option-text-trumpet {
    flex: 6; /* 6/10の幅（60%） */
    max-width: calc(60% - 5px); /* 60%からgapの半分を引く */
  }
}

/* polka dots img left,text right */
.option-image2-row {
  display: flex;        /* ここが超重要！ */
  align-items: flex-start;
  gap: 10px;
}
.option-image2 img {
  max-width: 150px;
  height: auto;
}
.option-text2 {
  max-width: 400px;
}

/* 新たなh1-2-3 */
.option h1  {
  margin:  0;                 /* デフォルトCSS打ち消し */
  font-family: "Georgia", serif;
  font-size:  clamp(20px,5vw,22px);           /* 文字サイズ指定 */
  font-weight: normal;
  color: #ff9d9d; /* フォントカラー */  
  position:  relative;    /* 位置調整 */
  display:  inline-block; /* インラインブロックにする */
  padding: 0 55px;
}
.option h1:before, .option h1:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: #fde2aa;
}
.option h1:before {
  left:0;
}
.option h1:after {
  right: 0;
}

.option h2 {
    margin:  0;                 /* デフォルトCSS打ち消し */
    font-family: "Georgia", serif;
    font-size:  clamp(18px,5vw,20px);           /* 文字サイズ指定 */
    color: #ffffff; /* フォントカラー */
    position:  relative;        /* 位置調整 */
    font-weight:  normal;       /* 文字の太さ調整 */
    display:  inline-block;     /* インラインブロックにする */
    padding-top: 24px;          /* 余白指定 */
    padding-left: 30px;         /* 余白指定 */
    padding-bottom: 17px;       /* 余白指定 */
}
p {
   font-family: "Georgia", serif;
    font-size:  clamp(14px,5vw,16px);           /* 文字サイズ指定 */
    line-height: 2;             /* 行間調整 */
    padding-left: 10px;         /* 余白指定 */
    padding-bottom: 5px;         /* 余白指定 */
      }
 .option h2:before {
    content:  '';               /* 空白の要素を作る */
    background-color: #f00606;  /* 背景色指定 */
    display:  block;            /* ブロック要素にする */
    position:  absolute;        /* 位置調整 */
    left:  0;                   /* 位置調整 */
    height: clamp(70px,10vw,80px);                 /* 高さ指定 */
    width:  clamp(70px,10vw,80px);                /* 幅指定 */
    border-radius:  50%;        /* 丸くする */
    top: 0;                     /* 位置調整 */
    z-index:  -1;               /* 重なり調整 */
}

.option h3 {
  font-family: "Georgia", serif;
  font-size:  clamp(16px,5vw,18px);  /* 文字サイズ指定 */
  font-weight: normal;
  position: relative;
  padding-bottom: 2px; /* パディングを縮小 */
  display: inline-block;
  margin-bottom: 5px; /* 下マージンをゼロ */
  padding-left: 20px;         /* 余白指定 */
  margin-top: 0px;
}
 .option h3:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
  background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}

 .option h4 { 
  font-family: "Georgia", serif;
  margin-top: 0.5em; /* h3 の上マージンを縮小（約8px） */
  margin-bottom: 0.5em; /* p との間隔も調整 */
  padding-left: 20px;         /* 余白指定 */
}

/* 「・ドラえもん:...」 */
.option ul {
  font-family: "Georgia", serif;
  margin: 0;
  padding-left: 40px; /* 左寄せ */
  list-style: disc;
}

.option ul li {
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 2px; /* 項目間を広く（約16px） */

}

.option > p:last-child {
  padding-bottom: 5px;
}

/* 注釈用のスタイル */
.option .note p {
    font-size: clamp(12px, 3vw, 14px);
}

/* 無地トップ画像 */
.mujitop-wrapper {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
  padding-bottom: 15px;
}

.mujitop {
  display: block;
  width: 100vw;
  margin: 0;
  padding: 0;
}

/* パンくず */
.breadcrumb {
  font-family: "Georgia", serif;
  display: flex;
  list-style: none;
  padding: 10px 0;
  margin: 0;
  font-size: 13px;
  color: #ffffff;
  vertical-align: middle;
}

.breadcrumb li:not(:last-child)::after {
  content: " > ";
  margin: 0 5px;
  font-size: 15px;
  color: #878787;
}


.breadcrumb a {
  text-decoration: none;
  color: #fff5ae;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* order-body全体のスタイル */
.order-body {
  max-width: 900px; /* コンテンツの最大幅 */
  margin: 0 auto; /* 中央揃え */
  padding: 10px; /* 内側の余白 */
  font-family: Georgia, 'Times New Roman', Times, serif;
  line-height: 1.6; /* 行間 */
}

/* h1の見出しスタイル */
.order-body h1 {
font-size: 18px; /* フォントサイズ */

}


/* li（リストアイテム）のスタイル */
.order-body ul li {
  padding: 5px 0; /* 上下の余白 */
  font-size: 16px; /* フォントサイズ */
}

/* section */
.paddtopbottom {
  padding: 0.6vw 0 0.7vw 0;  /* 上 右 下 左 の順番 */
}

.paddtopbottom ul {
  font-family: "Georgia", serif;
  margin: 0;
  padding-left: 40px; /* 左寄せ */
  list-style: disc;
}

/* -------------cart.phpのスタイル------------- */
/* カート画面のアイテム全体 */
#cart-items .item {
  border: 1px solid #000000;
  padding: 12px;
  margin: 12px 0;
  border-radius: 8px;
}

/* 商品タイトル */
#cart-items .item-header {
  font-weight: bold;
  margin-bottom: 6px;
}

/* 通常オプション行 */
#cart-items .opt-normal {
  margin-left: 1em;
  white-space: pre-wrap;
}

/* 段別の親（統一して普通文字に） */
#cart-items .opt-group-title {
  margin-top: 6px;
  font-weight: normal;
  font-size: 1em;
  margin-left: 0.5em;
  white-space: pre-wrap;
}

/* 段別の子行 */
#cart-items .opt-step {
  margin-left: 2em;
  white-space: pre-wrap;
}

/* 小計 */
#cart-items .subtotal {
  margin-top: 6px;
  font-weight: bold;
}

/* 削除ボタンまわり */
#cart-items .actions {
  margin-top: 8px;
}

#cart-items .remove-btn {
  margin-left: 8px;
}

/* 合計表示 */
#cart-items .total {
  font-weight: bold;
  font-size: 1.1em;
  text-align: right;
  margin-top: 12px;
}
#submit-btn {
  background-color: #999;   /* デフォルト（未認証） */
  color: #fff;
  cursor: not-allowed;
}
#submit-btn.enabled {
  background-color: #e60033; /* 認証済みでこの色になる */
  cursor: pointer;
}
/* -------------cart.phpのスタイルここまで----------------- */

.buy-buttons {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.product-buy-button {
  padding: 10px 16px;
  font-size: 16px;
  cursor: pointer;
}
.product-buy-button:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.buy-now {
  background: #e60033; /* 赤系（ブランドカラー） */
  color: #fff;
}
/* ▼ グループ全体 */
.form-stylish .form-group {
  position: relative;
  display: grid;
  gap: 8px;
  margin: 16px 0 22px;
}

/* ▼ ラベル */
.form-stylish .form-group > label {
  font-size: 14px;
  letter-spacing: .02em;
  color: #000000; /* muted */
}

/* ▼ 数値入力欄 */
.form-stylish .form-group input[type="number"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  font-size: 16px;
  line-height: 1.25;
  color: #222;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.06);
  transition: border-color .2s ease, box-shadow .2s ease, transform .06s ease;
}

/* hover */
.form-stylish .form-group input[type="number"]:hover {
  border-color: #aaa;
  transform: translateY(-1px);
}

/* focus */
.form-stylish .form-group input[type="number"]:focus-visible {
  outline: none;
  border-color: #840d00; /* accent */
  box-shadow:
    0 0 0 3px rgba(132,13,0,.24),
    0 6px 24px rgba(0,0,0,.06);
}

/* プレースホルダが見えてる状態の色 */
.form-stylish .form-group input[type="number"]:placeholder-shown {
  color: #888;
}
#cart-items .remove-btn {
 background: none;
  border: none;
  cursor: pointer;
  color: #000000;       /* アイコン色 */
  font-size: 16px;   /* アイコンサイズ */
  padding: 4px;
}

#cart-items .remove-btn:hover {
  background-color: #c0392b; /* 濃い赤 */
  transform: scale(1.1);
}

#cart-items .remove-btn:active {
  transform: scale(0.95);
}

#auth-loggedin-wrap {
  border: 1px solid #000000;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
}

#auth-status-authed {
  margin: 0 0 8px;
  font-weight: 500;
}

#btn-logout {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#btn-logout:hover {
  background: #f0f0f0;
  border-color: #bbb;
}
.auth-btn-wrap {
  margin: 12px 0;
}

/* Googleサインインボタン */
#btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: 100%;
  padding: 10px 12px;

  border: 1px solid #000000;
  border-radius: 4px;
  background: #fff;

  font-size: 14px;
  font-weight: 500;
  color: #333;
  cursor: pointer;

  transition: background 0.2s ease, border-color 0.2s ease;
}

#btn-google img {
  width: 18px;
  height: 18px;
}

#btn-google:hover {
  background: #f7f7f7;
  border-color: #ccc;
}
.divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #000000;
  font-size: 14px;
  margin: 16px 0;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #ccc;
}

.divider:not(:empty)::before {
  margin-right: 8px;
}

.divider:not(:empty)::after {
  margin-left: 8px;
}
button[type="submit"] {
  display:inline-block;
  padding:10px 14px;
  font-size:1em;
  color:#fff;
  background:linear-gradient(135deg,#c21807,#a50000);
  border:none;
  border-radius:10px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
  letter-spacing:.05em;
}

button[type="submit"]:disabled,
button[type="submit"][aria-disabled="true"] {
  color:#eee;
  background:#bdbdbd;
  cursor:not-allowed;
  box-shadow:none;
  opacity:.9;
}

/* 有効時のみのホバー/アクティブ */
button[type="submit"].enabled:hover{
  background:linear-gradient(135deg,#d93025,#b71c1c);
  transform:translateY(-2px);
  box-shadow:0 6px 12px rgba(0,0,0,.25);
}
button[type="submit"].enabled:active{
  transform:translateY(0);
  box-shadow:0 2px 4px rgba(0,0,0,.2);
}

/* 併用：ブラウザの disabled 属性にも反応 */
button[type="submit"]:disabled{
  cursor:not-allowed;
}
button[type="submit-confirm"]{
  display:inline-block;
  padding:8px 8px;
  font-size:1em;
  color:#eee;
  background:linear-gradient(135deg,#c21807,#a50000);
  border:none;
  border-radius:6px;
    cursor:pointer;
  transition:all .25s ease;
  box-shadow:0 3px 6px rgba(0,0,0,.2);
  letter-spacing:.05em;
}

body.page-cart {
  background: #ffffff;
  color: #111111;
  color-scheme: light; /* フォームやスクロールバーもライト寄りに */
}
body.page-cart .breadcrumb { color:#000000; }  
body.page-cart .breadcrumb a { color:#666; }        /* リンク色 */


body.page-cart .form-group.agree-guide a {color: #ff0000;}

body.page-cart p {color: #000000;}

:root { --header-h: 72px; }  /* ヘッダーの高さに合わせて調整 */
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
/* 念のため、id持ち要素に余白を与える */
[id] { scroll-margin-top: var(--header-h); }

body.account #auth-login-wrap{
color:#000000;
}

body.account #auth-loggedin-wrap {color:#000000;
}

body.account .section:has(#addrForm),
body.account .section:has(#sizeForm),
body.account #orders {
  color: #000000;
}



body.account button[type="submit"]{
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.confirm-actions .btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.btn-row button[type="submit"] {
background-color: #111010;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}
.confirm-actions .btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.confirm-actions .btn-primary {
  background: #111;
  color: #fff;
  border: 1px solid #111;
}
.confirm-actions .btn-primary:hover { background: #000; }
.confirm-actions .btn-secondary {
  background: #fff;
  color: #333;
  border: 1px solid #ccc;
}
.confirm-actions .btn-secondary:hover {
  background: #f5f5f5;
  border-color: #999;
  color: #000;
}/* ===================== Orders 完成版（高級感 + 1カラム詳細） ===================== */

/* テーブルの罫線感を薄め、行をカード風に */
#orders table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px; /* 行間 */
}
#orders thead th {
  background: transparent;
  color: #666;
  font-weight: 600;
  border: none;
  padding: 4px 10px 2px;
  letter-spacing: .02em;
}

#orders tbody tr.order-row {
  background: #fff;
  /* 濃いめの枠を追加（インセット線） */
  box-shadow:
    inset 0 0 0 1px rgba(17,17,17,.22),
    0 10px 24px rgba(0,0,0,.06);
  transition: box-shadow .25s ease, transform .06s ease, background .2s ease;
  cursor: pointer;                 /* 行全体をクリック可能に見せる */
}
#orders tbody tr.order-row:hover {
  background: #fcfcfc;
  box-shadow:
    inset 0 0 0 1px rgba(17,17,17,.28),
    0 14px 30px rgba(0,0,0,.08);
}
#orders tbody tr.order-row:active { transform: translateY(1px); }

#orders tbody tr.order-row td {
  border: none;
  padding: 14px 16px;
  vertical-align: middle;
}
#orders tbody tr.order-row td:first-child { border-radius: 12px 0 0 12px; }
#orders tbody tr.order-row td:last-child  { border-radius: 0 12px 12px 0; }


#orders tbody tr.order-row td > *:not(button) { margin-top: 2px; }

/* 合計金額のタイポグラフィ */
#orders tbody tr.order-row td:nth-child(2) {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ゴースト調のトグルボタン（既存 .btn を上書き） */
#orders .btn.btn-toggle {
  background: linear-gradient(180deg, #fff, #f7f7f7);
  color: #222;
  border: 1px solid rgba(17,17,17,.14);
  border-radius: 999px;
  padding: 8px 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
  transition: border-color .2s ease, box-shadow .2s ease, transform .06s ease, background .2s ease;
}
#orders .btn.btn-toggle:hover {
  border-color: rgba(17,17,17,.22);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}
#orders .btn.btn-toggle:active { transform: translateY(1px); }
/* CSSだけの矢印 */
#orders .btn.btn-toggle::after {
  content: "";
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 2px;
  opacity: .7;
}
/* aria-expanded と連動して回転（任意でJS側が付与） */
#orders .btn.btn-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); }

/* 詳細コンテナを“高級カード”に */
#orders .order-detail-row .order-detail {
  margin: 6px 2px 0;
  padding: 16px;
  border: 1px solid rgba(17,17,17,.24);
  border-radius: 12px;
  background:
    radial-gradient(1200px 100px at 50% -60px, rgba(255,255,255,.92), rgba(255,255,255,1)),
    linear-gradient(180deg, #fff, #fafafa);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

/* ===== 1カラム詳細（order-detail-1col を付ける） ===== */
.order-detail-1col .block {
  padding: 10px 0;
  border-top: 1px solid #eee;
}
.order-detail-1col .block:first-child { border-top: none; }

.order-detail-1col h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #333;
}

/* 箇条書き（iOS はみ出し対策込み） */
.order-detail-1col .detail-list {
  list-style-position: inside;  /* ビュレットを内側に */
  margin: 0 0 8px 0;
  padding-left: .4em;           /* はみ出さず左寄せすぎない程度 */
  -webkit-padding-start: 0;
}
.order-detail-1col .detail-list li { margin: 0 0 4px; }

/* モバイル微調整 */
@media (max-width: 560px) {
  #orders tbody tr.order-row td { padding: 12px; }
  #orders tbody tr.order-row td:nth-child(1)::before,
  #orders tbody tr.order-row td:nth-child(2)::before,
  #orders tbody tr.order-row td:nth-child(3)::before { font-size: .78rem; }
}

/* ===== 商品一覧（List Page） ===== */
.fn-products__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* スマホ：2カラム */
  gap: 16px;
}

@media (min-width: 768px) {
  .fn-products__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* タブレット/PC：3カラム */
    gap: 20px;
  }
}

.fn-product {
  display: block;                 /* a全体をクリック可能に */
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.fn-product:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  border-color: #ddd;
}

.fn-product__media {
  position: relative;
  background: #f7f7f7;
  /* 大きめ画像＋比率固定：必要に応じて 4/3 or 1/1 に切替 */
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.fn-product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 画像をトリミングして全体にフィット */
  display: block;
}

.fn-product__body {
  padding: 12px 12px 14px;
}

.fn-product__title {
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0 0 6px;
}

.fn-product__desc {
  margin: 0 0 10px;
  color: #555;
  font-size: .95rem;
  white-space: nowrap;       /* 1行で切る */
  overflow: hidden;
  text-overflow: ellipsis;   /* はみ出しは…で省略 */
}

.fn-product__price {
  font-weight: 700;
  font-size: 1.05rem;
  color: #111;               /* 必要ならブランドカラーに変更可 */
}

/* 余白の調整（任意） */
.fn-products {
  margin: 16px 0 32px;
}
/* ベース：常に白いカードで一体化 */
.prod {
  display: grid;
  grid-template-columns: 1fr;      /* モバイル：1カラム */
  gap: 0;
  margin: 16px 0 40px;
  background: #fff;
  color: #000;                     /* サイト既定が白文字なので明示 */
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
}

/* PC(>=900px)：2カラムに。比率は左(写真) 1.1 : 右(情報) 0.9 くらい */
@media (min-width: 900px) {
  .prod {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

/* ギャラリー */
.prod-gallery {
  background: #fff;
  border-bottom: 1px solid #eee;   /* モバイル時の区切り線 */
}
@media (min-width: 900px) {
  .prod-gallery {
    border-bottom: none;           /* PCでは下線を消し… */
    border-right: 1px solid #eee;  /* …左右を区切る */
  }
}

.fn-swiper { width: 100%; overflow: hidden; }
.fn-swiper .swiper-slide {
  aspect-ratio: 9 / 16;            /* 必要なら 4/5 や 3/4 に変更可 */
  background: #fff;
  display: flex;
}
.fn-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 矢印を白背景でも見やすく */
.fn-swiper .swiper-button-prev,
.fn-swiper .swiper-button-next {
  background: rgba(0,0,0,.45);
  width: 44px; height: 44px; border-radius: 22px;
}
.fn-swiper .swiper-button-prev::after,
.fn-swiper .swiper-button-next::after {
  font-size: 18px; color: #fff;
}

/* 右側の情報ブロック */
.prod-info {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 16px 20px 20px;
}

.prod-title { margin:0 0 8px; font-size:1.25rem; line-height:1.3; }
.prod-price { font-weight:700; font-size:1.15rem; margin-bottom:14px; }
.prod-form { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.qty-label { display:flex; gap:8px; align-items:center; font-size:.95rem; }
.qty-input { width:80px; padding:8px 10px; border:1px solid #ddd; border-radius:8px; }

/* ボタン（.buy-now2 はボタン自体のクラスなので要素セレクタを合わせる） */
button.buy-now2[type="submit"],
.btn-row button[type="submit"] {
  padding:10px 14px; border:none; border-radius:10px;
  background:linear-gradient(135deg,#c21807,#a50000);
  color:#fff; font-weight:700; cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
  transition:transform .15s ease, box-shadow .15s ease;
}
button.buy-now2:hover,
.btn-row button[type="submit"]:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}
/* ================================
   BLOG 完全版（黒背景サイト向け）
   - 記事帯だけ白
   - タイトル上下を凝縮
   - 段落スタイルは記事内で上書き
   - 前後ナビは存在する方だけ表示想定
================================ */

/* 旧クラス互換（使っていなければ削除OK） */
#prev-next { margin-top: 24px; }
.pn-nav { display:flex; justify-content:space-between; gap:12px; }
.pn-prev, .pn-next {
  display:inline-block; padding:8px 12px; border:1px solid #e5e5e5; border-radius:8px;
  text-decoration:none;
}

/* ===== 記事帯（白ストリップ） ===== */
#blog-article{
  background:#fff;
  color:#222;
}
#blog-article a{ color:#a50000; text-decoration:underline; }

/* 記事カード */
#blog-article .post{
  max-width:920px; margin:16px auto 36px;           /* 24/48 → 16/36 に圧縮 */
  padding:20px 24px;                                 /* 上を詰める（タイトルが近づく） */
  background:#fff; border:1px solid #eee; border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
}

/* ヘッダー（タイトル周り） */
#blog-article .post-header{
    display: flex;               /* もし他所でflex指定されていてもOK */
  flex-direction: column;      /* 縦積みにする */
  align-items: flex-start;     /* 左揃え */
  margin-bottom:8px;                                  /* 16 → 8 */
  padding-top:4px; padding-bottom:6px;                /* 12 → 6 */
  border-bottom:1px solid #eee;
}
#blog-article .post-title{
  margin:0 0 4px !important;                          /* 上下の余白を最小化 */
  font-size:clamp(22px,2.6vw,32px);
  line-height:1.15;                                   /* タイトルの行間もタイトに */
  color:#111;
    display: block;
      float: none;    
}
#blog-article .post-meta{
  font-size:14px; 
  color:#666; 
  line-height:1.2;
  display: block;                /* 改行させる */
  margin: 0 0 8px;               /* タイトルとの間に余白（8px） */
 display: block;       
  float: none;   
    white-space: normal;     
}
#blog-article .post-meta time{
  display: block;              /* time自体もブロック化しておくと安心 */
}

/* ===== 本文の読みやすさ（段落や行間を記事内で上書き） ===== */
#blog-article .post-content{
  max-width:68ch;                                     /* 1行の長さを制御 */
  margin-inline:auto;
  font-size:16px;
  line-height:1.9;
  letter-spacing:.02em;
  color:#222;
  text-underline-offset:.2em;
}

/* グローバル p {…} に勝つため明示上書き */
#blog-article .post-content p{
  font-family: inherit;
  font-size:16px;
  line-height:1.9;
  margin:0 0 1.1em;
  padding:0;                                          /* 左/下の余白をリセット */
  color:#222;
}

/* 本文内の見出し */
#blog-article .post-content h1{                       /* 本文内に h1 を使う場合用（任意） */
  margin:1.2em 0 .6em;
  padding:0;                                          /* 余白は margin で管理 */
  line-height:1.25;
  color:#111;
}
#blog-article .post-content h2{
  margin:2.0em 0 .7em;
  font-size:20px; line-height:1.35;
  border-left:4px solid #a50000; padding-left:.6em; color:#111;
}
#blog-article .post-content h3{
  margin:1.6em 0 .6em;
  font-size:18px; line-height:1.4; color:#111;
}

/* リストや引用など */
#blog-article .post-content ul,
#blog-article .post-content ol{
  margin:0 0 1.1em 1.2em;
  line-height:1.9;
}
#blog-article .post-content li{ margin:.35em 0; }
#blog-article .post-content blockquote{
  margin:1.2em 0; padding:.9em 1.1em; line-height:1.8;
  background:#f9f9f9; border-left:4px solid #ddd; color:#333;
}
#blog-article .post-content code{
  background:#f3f3f3; padding:.1em .3em; border-radius:4px; line-height:1.7;
}
#blog-article .post-content img{
  max-width:100%; height:auto; display:block;
  border-radius:8px; margin:1em auto;
}

/* ===== 前/次ナビ（存在する方のみ生成される前提） ===== */
#blog-article .post-pn{
  margin-top:24px; display:flex; justify-content:space-between; gap:12px;
}
#blog-article .post-pn a{
  flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:10px 12px; border:1px solid #de7070; border-radius:10px;
  background:#fff; color:#a50000; text-decoration:none; font-weight:700;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
#blog-article .post-pn a:hover{
  transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.08); border-color:#ddd;
}
#blog-article .post-pn .pn-prev::before{ content:"←"; }
#blog-article .post-pn .pn-next::after{ content:"→"; }

/* 片方しかない時の整列 */
#blog-article .post-pn:has(.pn-prev):not(:has(.pn-next)){ justify-content:flex-start; }
#blog-article .post-pn:has(.pn-next):not(:has(.pn-prev)){ justify-content:flex-end; }

/* 強いグローバル指定の保険（例: a{color:#fff !important;} など） */
#blog-article .post-content a,
#blog-article .post-pn a{ color:#a50000; }

/* ===== モバイル調整 ===== */
@media (max-width:640px){
  #blog-article .post{ margin:12px auto 32px; padding:16px; }
  #blog-article .post-title{ font-size:clamp(22px,4.5vw,30px); }
  #blog-article .post-content{ line-height:2.0; padding-inline:4px; }
}

#blog-article .post-content img{
  display:block; width:100%; height:auto;
  border-radius:8px; margin:1em 0;
  cursor: default;
}