.u-text--head {
  color: #8d8d8d !important;
  font-size: 27px !important;
  font-family: 'メイリオ', 'Meiryo';
  
}
.u-color--head {
  color: #8d8d8d !important;
}
.u-text--subhead {
  color: #8d8d8d !important;
  font-size: 17px !important;
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
  font-weight: bold;
}
.u-text--body {
  color: #6a6a6a !important;
  font-size: 14px !important;
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
  
}
.u-color--body {
  color: #6a6a6a !important;
}
.u-text--strong {
  color: #8d8d8d !important;
  font-size: 14px !important;
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
  
}
.u-text--link {
  color: #ff887a !important;
  font-size: 14px !important;
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
  
}
.u-text--head--overlay {
  color: #686868E6 !important;
  font-size: 27px !important;
  font-family: 'メイリオ', 'Meiryo';
  
}
.u-text--subhead--overlay {
  color: #686868E6 !important;
  font-size: 17px !important;
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
  font-weight: bold;
}
.u-text--body--overlay {
  color: #686868E6 !important;
  font-size: 14px !important;
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
  
}
.u-text--color--overlay {
  color: #686868E6 !important;
}
.u-color__btn--bg {
  background: #ff887a !important;
}
.u-color__btn--bg--overlay {
  background: #ff887a !important;
}
.u-color__btn--bg--reverse {
  background: #FFFFFF !important;
}
.u-color__btn--bg--overlay--reverse {
  background: #FFFFFF !important;
}
.u-color__btn {
  color: #ff887a !important;
}
.u-text--btn {
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
  
}
.u-text--btn--overlay {
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
  
}
.u-text--btn--reverse {
  color: #ff887a !important;
  font-size: 14px !important;
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
  
  border: 1px solid #bdc1c2 !important;
}
.u-text--btn--overlay--reverse {
  color: #ff887a !important;
  font-size: 14px !important;
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
  
  border: 1px solid #bdc1c2 !important;
}
.u-color__btn--text {
  color: #FFFFFF !important;
}
.u-color__btn--text--bg {
  background: #FFFFFF !important;
}
.u-text--input {
  color: #9A9A9A !important;
  font-size: 14px !important;
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
  
}
.u-color--input {
  color: #9A9A9A !important;
}
.u-color__input--bg {
  background: #FFFFFF !important;
}
.u-color__border--input {
  border-color: #bdc1c2 !important;
}
.u-color__bg--base {
  background: #ffffff !important;
}
.u-color__bg--main {
  background: #ffffff !important;
}
.u-color__border--border {
  border-color: #000000 !important;
}
.u-color__border--main {
  border-color: #000000 !important;
}
.u-font--head {
  font-size: 27px !important;
  font-family: 'メイリオ', 'Meiryo';
  
}
.u-font--subhead {
  font-size: 17px !important;
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
  font-weight: bold;
}
.u-font--body {
  font-size: 14px !important;
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
  
}
.u-font--bold {
  font-weight: bold;
}

.c-product_info__details__icon::before, .c-product_info__details__icon::after {
  background: #8d8d8d !important;
}



  .c-product_info__share .u-icon--line {
    display: none
  }



  .c-product_item__actions .c-product_item__form--favorite {
    display: inline-block;
  }


  .c-product_item__actions .c-product_item__form--cart {
    display: inline-block;
  }



/*================ Fonts ================*/

/*================ Headings ================*/
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: "メイリオ", serif;
}

/*================ Variables ================*/
:root {
  --color-text-head: #8d8d8d;
  --color-text-body: #6a6a6a;
  --color-text-overlay: #686868E6;
  --color-text-link: #ff887a;
  --color-btn-bg: #ff887a;
  --color-btn-text: #FFFFFF;
  --color-input-text: #9A9A9A;
  --color-input-border: #bdc1c2;
  --color-page-bg: #ffffff;
  --color-page-border: #000000;
  --color-page-accent: #ff887a;

  --font-size-text-head: 27px;
  --font-size-text-subhead: 17px;
  --font-size-text-body: 14px;
  --font-size-text-link: 14px;

  --font-family-text-head: 'メイリオ', 'Meiryo';
  --font-family-text-subhead: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
  --font-family-text-body: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
}

.c-steps_to_order--theme {
  --theme-color: var(--color-btn-bg) !important;
  --text-color: var(--color-btn-text) !important;
}

.p-movie--theme {
  --theme-color: var(--color-btn-bg);
}









/*================ TXcustomize ================*/


/* --- マトリクス コンテナ --- */
.matrix-container_tx01 {
    /* マトリクス全体に基本フォントを適用 */
    font-family: 'Helvetica Neue', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
    line-height: 1.6;
    
    display: grid;
    /* 3列レイアウト。画面幅に応じて自動調整（レスポンシブ対応） */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

/* --- マトリクス アイテム（カード） --- */
.matrix-item_tx01 {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0; /* 明るいグレーのクリーンな境界線 */
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

/* ホバーエフェクト */
.matrix-item_tx01:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 122, 183, 0.2);
}

/* --- アイテム内の要素 --- */
.item-title_tx01 {
    color: #007AB7; /* アクセントカラー（積水ブルー）を適用 */
    font-size: 1.25em;
    font-weight: 600;
    margin-top: 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #EEEEEE;
}

.item-text_tx01 {
    color: #555555;
    margin-bottom: 15px;
    font-size: 0.9em;
}

.item-link_tx01 {
    display: inline-block;
    color: #007AB7; /* リンクもアクセントカラー */
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid #007AB7;
    padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
    font-size: 0.9em;
}

.item-link_tx01:hover {
    color: #00509E;
    border-bottom-color: #00509E;
}


/* --- テーブルコンテナ --- */
.table_tx01 {
    width: 100% !important;
    max-width: 1000px;
    margin: 5px auto 20px auto !important; 
    border-collapse: separate; 
    border-spacing: 0; /* セル間の余白を0に設定 */
    border-radius: 7px; /* 角丸くする */
   
    /* 外枠の役割を担うシャドウを追加し、外枠のように見せる */
    box-shadow: 0 0 0 1px #6a6a6a; 

    font-family: 'Helvetica Neue', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif;
    color: #6a6a6a;
    font-size: 0.95em;
}

/* --- テーブルヘッダー (thead) および テーブルボディ (tbody) --- */
/* セル自体の罫線はそのまま維持します */
.table_tx01 thead th,
.table_tx01 tbody td {
    padding: 10px 15px;
    border: 1px solid #E0E0E0; /* 内部の罫線 */
}

/* ⭐ 上部ヘッダーセルの角を丸める ⭐ */
.table_tx01 thead tr:first-child th:first-child {
    border-top-left-radius: 6px; 
}

.table_tx01 thead tr:first-child th:last-child {
    border-top-right-radius: 6px;
}

/* ⭐ 必要であれば、下部セルの角も丸める ⭐ */
.table_tx01 tbody tr:last-child td:first-child {
    border-bottom-left-radius: 6px;
}

.table_tx01 tbody tr:last-child td:last-child {
    border-bottom-right-radius: 6px;
}

/* --- テーブルヘッダー (thead) --- */
.table_tx01 thead th {
    background-color: #ff887a; /* ベースサーモン色 */
    color: #FFFFFF; /* 白 */
    font-weight: 600;
    padding: 12px 15px;
    text-align: left;
    border: 1px solid #6a6a6a; /* 罫線 */
}

/* --- テーブルボディ (tbody) --- */
.table_tx01 tbody td {
    padding: 10px 15px;
    border: 0.5px solid #E0E0E0; /* 罫線 */
}

/* --- 交互の行に背景色を適用（ゼブラストライプ） --- */
.table_tx01 tbody tr:nth-child(odd) {
    background-color: #FFFFFF; /* 奇数行は白 */
}

.table_tx01 tbody tr:nth-child(even) {
    background-color: #F9F9F9; /* 偶数行はごく薄いグレー */
}

/* --- ホバーエフェクト（Excelでいう「行選択」の視覚化） --- */
.table_tx01 tbody tr:hover {
    background-color: #E6F3FF; /* カーソルを合わせた行を薄い積水ブルーで強調 */
    cursor: default;
}





