@charset "UTF-8";
/* =====================================================================
* SLD writing css
* =================================================================== */
/* ---
CSS記述ルール：
◆!importantを使わない。
◆IDセレクタ (#) をスタイリングに使わない。（クラスセレクタを使う）
◆コメントを付ける
◆モジュールの命名ルール
「sl」-「ページ分類クラス」-「ブロック」-「作成モジュール」（ハイフン区切り）で付ける
ex.　.sl-top-slider-bg_color　（＝SLD作成、トップページ、スライダー、背景色）
※但しセレクタのネスト（入れ子）をなるべく浅く保つ。（例: .header .nav .item a のような深いネストは避ける）
--- */

/* ---
共通CSSを反映するルール：
※共通外枠「.sl-content-area」を加えるとテキスト、画像、テーブルなど共通設定になる

--- */

/* ===============================================
   1. 共通スタイル (Common)
   - サイト全体で共通利用する汎用クラスなど
===============================================
*/

/* コンテンツページの「幅」や「区切り線」など、
   ページ固有のレイアウトの記述
   マイ穀について、ABOUT、、、、
*/
.about_us .sl-content-area, .about .sl-content-area, .omakase .sl-content-area, .millet .sl-content-area, .info_renewal .sl-content-area, .renewal_cp .sl-content-area, .wakagenmai .sl-content-area, .mail_setting .sl-content-area   {
    max-width: 800px; /* PCでの最大幅 */
    margin-left: auto;
    margin-right: auto;
    padding: 0px 16px; /* 上下と左右（スマホ）の余白 */
}


/* --- 汎用見出しクラス (sl-title) --- */
/* (sl-title-01 〜 06 の定義 ※変更なし) */
.sl-title-01 {
    font-size: 2.8rem;
    font-weight: 700;
    text-align: center;
    color: #333;
    padding-bottom: 16px;
    margin: 1em 0;
    border-bottom: 3px solid #604c3f;
    display: table;
    margin-left: auto;
    margin-right: auto;
}
.sl-title-02 {
    font-size: 2.4rem;
    font-weight: 700;
    color: #333;
    margin: 1.2em 0;
    padding: 12px 16px;
    background: #f8f7f6;
    border-left: 6px solid #604c3f;
}
.sl-title-03 {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin: 1.5em 0;
    display: flex;
    align-items: center;
    text-align: center;
}
.sl-title-03::before,
.sl-title-03::after {
    content: '';
    flex: 1;
    border-bottom: 2px dotted #604c3f;
    opacity: 0.6;
}
.sl-title-03::before { margin-right: 1.5em; }
.sl-title-03::after { margin-left: 1.5em; }
.sl-title-04 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #333;
    margin: 1em 0;
    padding-bottom: 8px;
    border-bottom: 3px double #ddd;
}
.sl-title-05 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    margin: 1.2em 0;
    padding: 10px 16px;
    position: relative;
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 4px;
}
.sl-title-05::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    width: 6px;
    height: calc(100% - 16px);
    background: #604c3f;
    border-radius: 3px;
}
.sl-title-05::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    width: 24px;
    height: 6px;
    background: #604c3f;
    border-radius: 3px;
}
.sl-title-05 { padding-left: 48px; }
.sl-title-06 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #604c3f;
    margin: 1.5em 0 1em;
    display: flex;
    align-items: center;
}
.sl-title-06::before {
    content: '';
    display: inline-block;
    width: 8px; /* ひし形のサイズ（正方形の縦横） */
    height: 8px; /* ひし形のサイズ（正方形の縦横） */
    background: #604c3f; /* 塗りつぶしの色 */
    transform: rotate(45deg); /* 45度回転させてひし形に */
    margin-right: 12px; /* アイコンとテキストの余白 */
    flex-shrink: 0;
}

/* ---
  ★新規★ 共通コンテンツエリア (.sl-content-area)
  - p, ul, table, img などの共通スタイルをここに定義します
--- */

/* 段落 (p) */
.sl-content-area p {
    font-size: 1.5rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.5em;
}
.sl-content-area p:empty {
    display: none;
}

/* 画像 (img) */
.sl-content-area img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 24px auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
/* サイズ指定など、一部画像は影や角丸を無効化 */
.sl-content-area img.size-image {
    box-shadow: none;
    border-radius: 0;
}



/* 動画 (youtube) */
.sl-content-area .frame-wrapper__video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
}
.sl-content-area .frame-wrapper__video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}




/* ===============================================
   2. ページ別スタイル (Page-Specific)
===============================================
*/

/* --- 商品詳細 .productdetail --- */

/* 商品説明エリアの「幅」や「区切り線」など、
   ページ固有のレイアウトのみを記述します。
*/
.productdetail .product__desc--detail3,
.productdetail .product__desc--detail4 {
    max-width: 800px; /* PCでの最大幅 */
    margin-left: auto;
    margin-right: auto;
    padding: 0px 16px; /* 上下と左右（スマホ）の余白 */
}

/* リスト (ul) */
.product__desc--detail3 .sl-content-area ul {
    list-style: none;
    padding-left: 0;
    margin-top: 24px;
    margin-bottom: 24px;
}
.product__desc--detail3 .sl-content-area ul li {
    font-size: 1.5rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 12px;
    padding-left: 1.5em;
    position: relative;
}

/* リストの注釈（※） */
.product__desc--detail3 .sl-content-area ul li:before {
    content: "※";
    font-weight: bold;
    color: #777;
    position: absolute;
    left: 0;
    top: 0;
}
/* 画像を含むリスト項目は※を非表示 */
.product__desc--detail3 .sl-content-area ul li:has(img) {
    padding-left: 0;
    text-align: center;
}
.product__desc--detail3 .sl-content-area ul li:has(img)::before {
    display: none;
}
.product__desc--detail3 .sl-content-area ul li img {
    box-shadow: none;
    border-radius: 0;
    margin: 0 auto;
}

/* 雑穀の粒見本画像 */
.sl-grain-sample img {
        width: 45%;
    }


/* 白米特栽表示用テーブルデザイン */
.simple-styled-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 20px 0;
  font-size: 14px;
  line-height: 1.6;
  background-color: #fff;
  border: 1px solid #ddd;
}

/* ヘッダー・セルの共通設定 */
.simple-styled-table th,
.simple-styled-table td {
  padding: 12px 15px;
  border: 1px solid #ddd;
  vertical-align: middle;
  text-align: left;
  color: #444;
}

/* ヘッダー固有のデザイン */
.simple-styled-table th {
  background-color: #f7f7f7; /* 薄いグレー */
  color: #333;
  font-weight: bold;
  white-space: nowrap; /* 項目名が折り返されないように */
}

/* テーブルの大見出し（colspanを使っている部分） */
.simple-styled-table th.table-title {
  background-color: #eee;
  text-align: center;
  font-size: 1.1em;
}

/* 2つ目のテーブルの列幅調整（任意） */
.simple-styled-table th:nth-child(1) { width: 50%; } /* 資材名 */
.simple-styled-table th:nth-child(2) { width: 25%; } /* 用途 */
.simple-styled-table th:nth-child(3) { width: 25%; } /* 回数 */



/* タブコンテンツのレイアウト */
.productdetail #tab1-content,
.productdetail #tab2-content {
    padding: 32px 16px;
    background-color: #fff;
    max-width: 800px; /* PCでの最大幅 */
    margin-left: auto;
    margin-right: auto;
}

/* タブ内のh6マージン調整（ページ固有） */
.productdetail #tab2-content h6.sl-title-06 {
    margin-top: 0;
}

/* タブ内テーブル (table) */
.sl-content-area .c-tab__content .table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 1.5em;
}
.sl-content-area .c-tab__content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.5rem;
    color: #333;
    min-width: 600px; /* スマホでの横スクロール用 */
}
.sl-content-area .c-tab__content table th,
.sl-content-area .c-tab__content table td {
    border: none;
    border-bottom: 1px solid #ddd;
    padding: 16px;
    line-height: 1.6;
    vertical-align: top;
}
.sl-content-area .c-tab__content table tr:last-child th,
.sl-content-area .c-tab__content table tr:last-child td {
    border-bottom: none;
}
.sl-content-area .c-tab__content table th {
    background-color: #f9f9f9;
    font-weight: 700;
    text-align: left;
/*    width: 30%;  */
    border-right: 1px solid #ddd;
}

/* ---　MAIKOKUについて　.未設定　--- */


/* ---　ABOUT　.未設定　--- */


/* ---　ご利用ガイド　.guide　--- */


/* ---　定期便ガイド　.default　--- */


/* ---　よくあるご質問　.termofuse　--- */


/* ---　特商　.default　--- */


/* ---　プライバシーポリシー　.privacy　--- */


/* ---　会社概要　.company　--- */


/* ===============================================
   3. レスポンシブ (Responsive)
   - 767px以下のスクリーンサイズに適用
===============================================
*/
@media (max-width: 767px) {

    /* --- 共通 (Responsive) --- */
    
    /* 汎用見出し */
    .sl-title-01 { font-size: 2.4rem; padding-bottom: 12px; }
    .sl-title-02 { font-size: 2rem; padding: 10px 12px; }
    .sl-title-03 { font-size: 1.8rem; }
    .sl-title-04 { font-size: 1.8rem; }
    .sl-title-05 { font-size: 1.6rem; padding-left: 40px; }
    .sl-title-06 { font-size: 1.5rem; }

    /* 共通コンテンツエリア */
    .sl-content-area p,
    .sl-content-area ul li {
        font-size: 1.4rem;
    }

    /* 共通テーブル */
    .sl-content-area .c-tab__content table {
        font-size: 1.4rem;
        min-width: 100%; /* スクロールは維持 */
    }
    .sl-content-area .c-tab__content table th,
    .sl-content-area .c-tab__content table td {
         padding: 12px;
         line-height: 1.5;
    }
    /*.sl-content-area table th {
        width: 35%;
    }*/

    /* --- 商品詳細 (Responsive) --- */
    
    /* 雑穀の粒見本画像 */
    .sl-grain-sample img {
        width: 60%;
    }
    
    /* コンテンツエリア */
    .productdetail .product__desc--detail3,
    .productdetail .product__desc--detail4 {
        max-width: 100%;
        width: 100%;
        padding: 0px 8px;
        box-sizing: border-box;
    }

/* 白米特栽表示用テーブルデザイン */
  /* スマホでは文字を少し小さくして横スクロールさせない、またはスクロールさせる */
  .simple-styled-table th,
  .simple-styled-table td {
    padding: 8px 10px;
    font-size: 12px;
    white-space: normal; /* スマホでは折り返し許可 */
  }
  
  /* 1つ目のテーブルのように項目が少ない場合は縦積み表示に切り替え */
  .simple-styled-table:first-of-type th,
  .simple-styled-table:first-of-type td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .simple-styled-table:first-of-type th {
    background-color: #eee;
    border-bottom: none;
  }

    /* タブ */
    .productdetail #tab1-content,
    .productdetail #tab2-content {
        padding: 24px 8px;
    }

}