/* syohin.html ページ固有スタイル（HTML内<style>から移設） */

/* ==========================================================================
    ササダ写真館様向け：今風のスタイリッシュ・フレキシブル商品レイアウト
    ========================================================================== */

 /* 横スクロールによる右側の不自然な余白・ガタつきを徹底防止 */
 html, body {
   overflow-x: hidden;
   width: 100%;
   margin: 0;
   padding: 0;
   background-color: #faf8f5; /* 温かみのある上質なライトベージュ */
   color: #4a4643;
 }

 /* コンテンツ全体のラッパー（スマホでのoverflow-x完全固定対策） */
 .maincontainer {
   overflow-x: hidden;
   width: 100%;
 }

 /* 導入メッセージエリアの洗練化 */
 .maintittle {
   padding: 50px 20px;
   text-align: center;
   background: #fff;
 }
 .maintittle p {
   max-width: 760px;
   margin: 0 auto;
   line-height: 1.8;
   font-size: 1.05rem;
   color: #625d59;
 }

 /* 最新のカード型2段グリッドレイアウト構造 */
 .product-grid-section {
   max-width: 1200px;
   margin: 0 auto;
   padding: 40px 20px 80px 20px;
 }

 .product-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr); /* PC・タブレットでは美しい2カラム */
   gap: 40px 30px; /* 余白をしっかり空けて圧迫感をなくす */
 }

 /* 商品カード単体の高品位な装飾 */
 .modern-product-card {
   background: #ffffff;
   border-radius: 16px;
   box-shadow: 0 10px 30px rgba(163, 153, 143, 0.12); /* 柔らかい影 */
   overflow: hidden;
   display: flex;
   flex-direction: column;
   transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
 }

 .modern-product-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 16px 40px rgba(163, 153, 143, 0.22);
 }

/* ==========================================================================
    Splide スライダー・写真エリアの最適化（縦伸び修正版）
    ========================================================================== */
    .card-media-wrapper {
   width: 100%;
   background: #f3f0ec;
 }

 /* スライダーを使わない単独画像の場合 */
 .card-media-wrapper > img {
   width: 100%;
   height: auto; /* ★追加：HTMLのheightを上書きして縦伸びを防ぐ */
   aspect-ratio: 3 / 2;
   object-fit: cover;
   display: block;
 }

 .modern-product-card .splide {
   margin: 0 !important;
   position: relative;
   max-width: 100%;
   box-sizing: border-box;
 }

 /* スライダーのメイン画像の縦横比をキープ */
 .modern-product-card .splide__slide img {
   width: 100%;
   height: auto; /* ★追加：HTMLのheight="800"を無効化して縦伸びを防ぐ */
   aspect-ratio: 3 / 2; /* 綺麗な横長(3:2)をキープ */
   object-fit: cover;
   display: block;
 }

 /* サムネイル（ドットインジケーター）を画像化して並べる */
 .modern-product-card .splide__pagination {
   position: relative;
   bottom: auto;
   margin: 0 !important;
   padding: 12px 10px; /* メイン画像と重ならないように下に余白 */
   display: flex;
   justify-content: center;
   gap: 6px;
   background: #ffffff;
 }

 .modern-product-card .splide__pagination li {
   display: inline-block;
   margin: 0 !important;
   width: 45px;
   height: 30px; /* メイン画像の3:2比率に合わせる */
 }

 /* ページネーションのボタンをサムネイル画像に置き換える指定 */
 .modern-product-card .splide__pagination__page {
   width: 100% !important;
   height: 100% !important;
   border-radius: 4px !important;
   border: 2px solid transparent !important;
   margin: 0 !important;
   padding: 0 !important;
   background-size: cover !important;
   background-position: center !important;
   background-repeat: no-repeat !important;
   opacity: 0.6;
   transition: border-color 0.2s, opacity 0.2s;
 }

 /* アクティブなサムネイルのハイライト */
 .modern-product-card .splide__pagination__page.is-active {
   opacity: 1 !important;
   border-color: #c5a059 !important;
   transform: none !important;
 }

 /* ==========================================================================
    カード内テキスト・インフォメーション
    ========================================================================== */
 .card-body {
   padding: 20px 30px 30px 30px;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
 }

 .card-body h2 {
   font-size: 1.4rem;
   color: #332f2c;
   margin: 0 0 12px 0;
   position: relative;
   padding-bottom: 10px;
   font-weight: 600;
   letter-spacing: 0.03em;
 }
 .card-body h2::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 40px;
   height: 2px;
   background-color: #c5a059; /* アクセントライン */
 }

 .card-body .description {
   font-size: 0.95rem;
   line-height: 1.7;
   color: #68625e;
   margin-bottom: 25px;
   flex-grow: 1;
   font-weight: 500;
 }

 .card-body > p:not(.description) {
   font-size: 0.95rem;
   line-height: 1.7;
   color: #68625e;
   font-weight: 500;
 }

 /* 料金表テーブルのクリーンで今風なデザイン化 */
 .product-price-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.9rem;
 }
 .product-price-table tr {
   border-bottom: 1px solid #f1ece6;
 }
 .product-price-table tr:last-child {
   border-bottom: none;
 }
 .product-price-table td {
   padding: 10px 8px;
   color: #554f4b;
 }
 .product-price-table td:last-child {
   text-align: right;
   font-weight: bold;
   color: #b3893e; /* 金額を目立たせる色味 */
   font-size: 1rem;
 }
 .product-price-table .bgcell {
   background-color: #faf7f4; /* 縞模様の優しいコントラスト */
 }

 /* ==========================================================================
    レスポンシブ：スマートフォン表示（1カラム）への最適化
    ========================================================================== */
 @media (max-width: 767px) {
   .product-grid {
     grid-template-columns: 1fr; /* スマホでは完全に縦1列に流れる */
     gap: 35px;
     padding: 10px;
   }
   .card-body {
     padding: 15px 20px 20px 20px;
   }
   .card-body h2 {
     font-size: 1.25rem;
   }
   .maintittle {
     padding: 35px 15px;
   }
   .maintittle p {
     font-size: 0.95rem;
     text-align: left; /* スマホ長文は左寄せが圧倒的に読みやすい */
   }
 }