/*　■ 商品ページ　＞　画像カルーセル部分 */

/* メイン画像コンテナ */
.touyoutaiki_add_main-image-container {
    width: 100%;
    overflow: hidden;
    border: 1px solid #ccc;
    position: relative; /* 子要素（テキスト）の配置基準 */
    min-height: 400px; /* 必要に応じて調整 */
    transition: height 0.3s ease-in-out;
}

/* メイン画像 */
#touyoutaiki_add_main-image {
    width: 100%;
    height: auto;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#touyoutaiki_add_main-image.touyoutaiki_add_visible {
    opacity: 1;
}

/* 重ねるテキストのスタイル */
.touyoutaiki_add_overlay-text {
    position: absolute; /* 親要素を基準に配置 */
    bottom: 0; /* 親要素の下端に配置 */
    left: 0;
    width: 100%; /* 親要素と同じ幅にする */
    color: white;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒い背景 */
    padding: 10px;
    font-size: 0.8rem;
    text-align: center;
    pointer-events: none; /* テキスト上のクリックを無効化 */
    box-sizing: border-box; /* paddingを含めて幅を計算 */
    opacity: 0; /* 初期状態では非表示 */
    transition: opacity 0.3s ease-in-out; /* 透明度をアニメーション */
}

.touyoutaiki_add_overlay-text.touyoutaiki_add_visible {
    opacity: 1; /* 表示状態 */
}

/* サムネイルのコンテナ */
.touyoutaiki_add_thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    justify-content: flex-start;
}

/* サムネイル画像 */
.touyoutaiki_add_thumbnail {
    width: calc(30% - 7px);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease, border-color 0.3s ease;
    border: 2px solid transparent;
    box-sizing: border-box;
    aspect-ratio: 1 / 1; /* 正方形に固定 */
    object-fit: cover; /* 画像をトリミングしてきれいに表示 */
}

.touyoutaiki_add_thumbnail:hover {
    opacity: 1;
}

/* 選択中のサムネイル */
.touyoutaiki_add_thumbnail.touyoutaiki_add_active {
    opacity: 1;
    border-color: red;
}

/*　■　Googleカレンダー埋め込みをレスポンシブ対応にする*/
.googleCalender iframe {
width: 100%;
max-width: 800px;
height: 400px;
}
@media (min-width: 960px) {
.googleCalender iframe {
height: 600px;
}
}

/*　■　サイドバーのカタログ　*/
.catalogue_sidebar img {
  width: 210px;
  height: auto;
  border: 1px solid #ccc;
}

/*　■　ページ全体にスムーススクロールの適用。主にサイドバーのカタログサムネイルクリックでのアンカーリンクに使うが、他にアンカーリンクがあったりブラウザの戻る進むボタンも影響される　*/
html {
  scroll-behavior: smooth;
}


/*　■　サイドバーの同一カタログページ掲載商品　*/

.widget-products__samecataloguename {
  /* 既存のスタイル */
  font-size: 0.8rem;
  margin-top: 5px; /* 例：10ピクセル分のスペース */
  line-height: 1.6;

  /* 行頭アイコンの設定 */
  position: relative;
  padding-left: 12px; /* アイコン分のスペースを確保 */
}

.widget-products__samecataloguename::before {
  content: ">"; /* 好きなアイコンや文字 */
  position: absolute;
  left: 0; /* 左端に配置 */
  top: 0.3;
  color: #bbb; /* アイコンの色 */
  font-size: 1em; /* アイコンのサイズ */
}

/* -------------------------------------- */
/* 以下をファイルに追記 */
/* -------------------------------------- */

.widget-products__samecataloguename a:link,
.widget-products__samecataloguename a:visited {
  color: inherit;
}

.widget-products__samecataloguename a:hover {
  color: #007bff;
}

.widget-products__samecatalogueprices {
  color: #888; 
  font-weight: 400; 
  font-size: 0.8em; 
  padding-left: 15px; /* 例: 5ピクセル分のスペース */
  margin-bottom: 5px; /* 例：10ピクセル分のスペース */
}
/* 現在の商品なら目立たせる */
.current-product {
 /* 薄く、きれいなグリーンの背景色 */
 /* background-color: #e0f2e0; */
  
  /* 濃く、きれいなグリーンの枠線 */
 /* border: 1px solid #2e8b57;*/
  /* 変更　選択中サムネイルと同じに */
    border: 2px solid red;

  
  /* 周囲の要素との間に余白を作る */
  margin-bottom: 0px;
  padding: 2px;
}

/* 商品情報・カタログ表示用　タブ開閉をなくした、常時表示用ヘッダーのスタイル */
/* タブ開閉をなくした、常時表示用ヘッダーのスタイル */
.touyoutaiki_add_tab-header {
    display: block;
    padding: 10px 26px 8px; /* パディングを調整して見出しとコンテンツの間に余白を持たせる */
    font-size: 20px; /* 文字サイズを大きく */
    font-weight: 500; /* フォントを太字に */
    line-height: 1;
    color: #3d464d;
    text-align: center; /* 中央揃えに設定 */
    /* border-bottom: 4px solid #cc3333; */ /* 下線を赤色に */
    /* margin-bottom: -4px; */ /* 下線がコンテンツの枠線と重なるように調整 */

/* コンテンツエリアのスタイル調整 */
.product-tabs__content {
    border-top: 2px solid #f0f0f0; /* 元のCSSにある枠線を再現 */
}


/*　■　サイドバーのメーカーロゴ表示部分　*/

.manufacturerlogo_sidebar {
  margin-top: -15px; /* 例：10ピクセル分のスペース */
  margin-bottom: 15px; /* 例：10ピクセル分のスペース */
}


/*　■　カテゴリ一覧ページetcの商品一覧部分　*/

/* =========================================================================
// 1. コンテンツエリアの幅をフルワイドに強制拡張 (PC表示のみ)
// !important で詳細度を強化
========================================================================= */
@media (min-width: 992px) { 
    /* 親の Flex/Grid 設定を上書きしてコンテンツを100%に強制拡張 */
    .shop-layout.shop-layout--sidebar--start > .tytk-full-content {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    /* サイドバーを確実に非表示 */
    .shop-layout.shop-layout--sidebar--start > .shop-layout__sidebar {
        display: none !important;
    }
}


/* =========================================================================
// 2. 商品リスト（テーブル形式）のカスタムスタイル (PC/色)
========================================================================= */

.tytk-products-list__table {
    margin-bottom: 0;
    width: 100% !important; /* 幅が狭くならないよう強化 */
    border-collapse: collapse;
}

.tytk-products-list__table th,
.tytk-products-list__table td {
    padding: 10px; 
    vertical-align: middle;
    border: 1px solid #ddd;
    font-size: 14px; 
}

/* 行タイトル（TH）のスタイル */
.tytk-products-list__table thead th {
    background-color: #f2f2f2; 
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    text-align: left;
}

/* マウスオーバー（TR:hover）のスタイル */
.tytk-products-list__table tbody tr.tytk-product-row-link {
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.tytk-products-list__table tbody tr.tytk-product-row-link:hover {
    background-color: #f5f5f5; 
}

/* ★★★ 商品名コンテナの表示設定を強化 ★★★ */
.tytk-product-info-short-no-img {
    display: block !important;
}
.tytk-product-info-short-no-img a {
    color: #333;
    text-decoration: none;
    line-height: 1.4;
    display: block; /* リンク要素をブロック化してタッチ/クリック範囲を確保 */
}
.tytk-products-list__table tbody tr.tytk-product-row-link:hover .tytk-product-info-short-no-img a {
    text-decoration: underline; 
}

/* 価格列の右寄せ */
.tytk-products-list__table .tytk-col-price {
    text-align: right;
}


/* PC表示（768px以上）での列幅の調整 (4列構成) */
@media (min-width: 768px) {
    .tytk-products-list__table .tytk-col-sku { width: 100px; } 
    .tytk-products-list__table .tytk-col-manufacturer { width: 150px; } 
    .tytk-products-list__table .tytk-col-price { width: 120px; } 
    .tytk-products-list__table .tytk-col-name { min-width: 250px; } 

    .tytk-products-list__table td::before {
        content: none;
    }
}


/* =========================================================================
// 3. モバイル表示 (767px以下) のレスポンシブ対応
========================================================================= */
@media (max-width: 767px) {
    .tytk-products-list__table thead { display: none; }

    .tytk-products-list__table tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: #fff;
    }
    
    .tytk-products-list__table td {
        display: block;
        width: 100% !important; /* モバイルでの幅も確実に100%に */
        text-align: left !important;
        border: none; 
        border-bottom: 1px dotted #e5e5e5; 
        padding: 8px 10px;
        position: relative;
        font-size: 14px;
    }
    
    /* セルの前に列タイトルを表示 (data-title属性を利用) */
    .tytk-products-list__table td::before {
        content: attr(data-title) "：";
        font-weight: bold;
        color: #666;
        display: inline-block;
        width: 80px; 
        margin-right: 5px;
    }
    
    .tytk-products-list__table .tytk-col-price {
        font-weight: bold;
        color: #d9534f; 
    }

    .tytk-products-list__table td:last-child {
        border-bottom: none;
    }
}