@charset "UTF-8";
/* Root + Base */
html { font-size:62.5%; /* 1rem=10px相当 */
    /* ★追加★ 意図しない横スクロールを非表示にする */
    overflow-x: hidden;
}
body {
  font-family:"Noto Sans JP",sans-serif;
  font-size:1.6rem; /* 16px */
  line-height:1.6;
  color:#333;
  background-color: #fff; /* bodyの背景は白にして、各セクションで色を広げる */
  overflow-x: hidden;
}

/* Layout - コンテンツ幅の制限 */
.container {
  max-width:1200px;
  margin:0 auto;
  padding:0 1.6rem;
}
/* --------------------------------- */
/* ===== モバイルファースト基本スタイル (0px ～ 900px) ===== */
/* --------------------------------- */
 /* ヘッダー（フルワイド背景） */
.site-header {
  /* ★フルワイド背景色★: ヘッダーの背景を淡いグレーにする */
  background-color: #f8f8f8; 
  border-bottom: 0.1rem solid #eee; 
  padding: 1.2rem 0; /* 左右パディングは中の.header-innerに任せる */
}
/* ヘッダーの中身 (コンテンツを1200pxに制限し、中央寄せ) */
.header-inner {
  display: flex;
  flex-direction: column; 
  /* ★修正★ ヘッダー全体を中央に配置 */
  align-items: center; 
  gap: 1.6rem; 
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.6rem; 
}
/* ロゴとショップ名 (.brand) - 内部を縦並び・中央寄せ */
.brand {
    display: flex;
    flex-direction: column; /* ロゴとショップ名を縦並び */
    align-items: center; /* ロゴとショップ名を中央揃え */
    gap: 0.5rem; 
    width: 100%;
}
/* モバイルファーストの基本スタイルエリアに追加 */

/* 新しいタイトルグループ（モバイルでは縦積み） */
.title-group {
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}
/* 新しい決済ロゴブロック（モバイルでは中央寄せ） */
.payment-brand-logos {
    text-align: center;
    width: 100%;
    margin-top: 1rem; 
    margin-bottom: 0..5rem;
}
.payment-icons-new {
    height: 2.5rem; /* モバイルでは小さめに */
    width: auto;
    vertical-align: middle;
}
/* ヘッダー情報（キャッチコピー、電話）(.header-info) - 内部を縦並び・中央寄せ */
.header-info { 
    display: flex;
    flex-direction: column;
    align-items: center; /* キャッチコピーと電話を中央揃え */
    gap: 0.5rem;
    width: 100%;
}

/* 個別のテキスト要素も中央寄せを保証 */
.site-title, .catch, .tel {
    text-align: center;
}
/* ... (ヘッダーのロゴやテキストのスタイルは省略/変更なし) ... */
.logo { width: 4.8rem; height: 4.8rem; object-fit: contain; }
h1 { margin: 0; font-size: 1.8rem; font-weight: 700; line-height: 1.2; }
.header-info { text-align: left; }
.catch { margin: 0; font-size: 1.3rem; color: #555; }
.tel { margin: 0.2rem 0 0; font-size: 1.6rem; font-weight: 700; }
.tel a { text-decoration: none; color: #0a7a2a; }
.site-title {
    /* 以前のh1のモバイルでのスタイルを復元 */
    margin: 0; 
    font-size: 1.8rem; /* 既存のh1と同じサイズ (18px) */
    font-weight: 700;
    line-height: 1.2;
    color: #333; /* 念のため色指定 */
    text-align: center;
}
/* 1カラムレイアウト*/
.content-wrapper {
    display: flex; 
    flex-direction: column;
    margin-top: 1.6rem; 
    margin-bottom: 1.6rem;
    gap: 0; 
    /* .content-wrapperが.containerを兼ねているため、コンテンツ幅は制限される */
}
main {
    flex-basis: auto;
    width: 100%; 
    margin-bottom: 2rem; 
}
main h1{
text-align: center;
font-size:3.0rem;
font-weight:bold;
margin-bottom:2rem;
}
main p{
line-height:2.0;
margin-bottom:1rem;
margin-right:1rem;
margin-left:1rem;
}
main a:hover{
  background-color:yellow;
}
 /* パンクズリストPCでは表示 */
    .breadcrumb-nav {
        display: block;
    }
/* モバイルでは非表示 */
.breadcrumb-nav {
    display: none;
    margin-bottom: 2rem;
    padding: 0;
}
    /* 写真エリア全体のコンテナを中央揃え */
.m_section{
margin-bottom: 2rem;
text-align: center;
}
.m_section h2{
font-size:2.5rem;
font-weight:bold;
color:#008080;
}
.part-links{
font-size:2rem;
font-weight:600;
line-height:2.5;
margin-bottom:2rem;
}
.price-value{
display: block;
font-size:2.5rem;
font-weight:700;
margin-bottom:2rem;
}
.order_link{
  display: inline-block;          /* spanをブロック的に */
  padding: 0.5em 1.2em;
  font-size:2rem;
  font-weight: 700;
  color: #333;
  border: 1px solid #333;
  border-radius: 0.8rem;          /* 角丸四角 */
  cursor: pointer;
  margin-bottom: 1.5rem;          /* 次ブロックとの距離 */
}
.order_link::before{
  content: "\25B6";   /* ? BLACK RIGHT-POINTING TRIANGLE */
  color: #008080;
  margin-right: 0.4em;
  font-size: 0.9em;
}
.product_section h2{
font-size:2.0rem;
font-weight:bold;
color:#008080;
line-height:2.0;
margin-left:auto;
margin-right:auto;
margin-bottom:1rem;
padding-left:1rem;
background-color:#F5F5DC;
border-top-left-radius:0px;
border-top-right-radius:5px;
border-bottom-left-radius:0px;
border-bottom-right-radius:5px;
border-left-width : 10px;
border-left-style : double;
border-left-color : #008080;
text-align:center;
}
/* --------------------------------- */
/* ===== グローバルメニュー (モバイルファースト) ===== */
/* --------------------------------- */
#g-nav {
    /* ★フルワイド背景色★: ナビゲーションの背景色を適用 */
    background-color: #008080; 
    width: 100%;
padding: 0.2rem 0; /* 上下1.2remのパディングを追加 */
}

/* .containerがナビゲーションの中身を1200pxに制限 */

/* チェックボックス・ハンバーガーアイコン (スマホでのみ利用) */
.g-check { display: none; }
.g-hamburger { 
    display: block; cursor: pointer; 
    width: 3.0rem; height: 3.0rem; 
    position: relative; z-index: 100; 
    margin: 1.0rem 0; 
   margin-left: auto;
}
.g-hamburger span { 
    display: block; position: absolute; 
    width: 100%; height: 0.2rem; background-color: #fff; 
    transition: transform 0.3s, opacity 0.3s; left: 0; 
}
.g-hamburger span:nth-child(1) { top: 0.5rem; }
.g-hamburger span:nth-child(2) { top: 1.4rem; }
.g-hamburger span:nth-child(3) { bottom: 0.5rem; }

/* メニューリスト (スマホ: 縦並び、非表示) */
.global-nav { 
    position: fixed; top: 0; left: 0; 
    width: 100vw; height: 100vh; 
    background-color: rgba(0, 0, 0, 0.9); 
    list-style: none; padding-top: 10rem; padding-left: 0; 
    transform: translateX(100%); transition: transform 0.4s ease-in-out; 
    z-index: 90; text-align: center; 
}
.global-nav li a {
    display: block; color: #fff; 
    font-size: 2.0rem; padding: 1.5rem 0; 
    border-bottom: 0.1rem solid rgba(255, 255, 255, 0.2); 
}
/* 開閉時のスタイル */
.g-check:checked ~ .g-hamburger span:nth-child(1) { transform: translateY(0.9rem) rotate(45deg); }
.g-check:checked ~ .g-hamburger span:nth-child(2) { opacity: 0; }
.g-check:checked ~ .g-hamburger span:nth-child(3) { transform: translateY(-0.9rem) rotate(-45deg); }
.g-check:checked ~ .global-nav { transform: translateX(0); }
/* ========================================================== */
/* A11yアコーディオン：旧赤帯デザインの完全再現 */
/* ========================================================== */
/* アコーディオン・トリガーの修正 (既存の #amenu #am_tp を置き換える) */
#amenu #am_tp {
    /* 背景色をダークシアンに設定 */
    background-color: #008080; 
    /* 文字色は、背景色と同じだと見えないため、コントラストの高いゴールドにします。*/
    /* もし文字色も #008080 にする場合は、ここを color: #008080; に変更してください。 */
    color:  #ffd700; 
    font-size: 2rem;
    font-weight: bold;
    padding: 1.2rem 1.6rem;
    margin-bottom: 0.8rem;
    
    /* 影を維持 */
    box-shadow: 0 0.4rem 0.6rem rgba(0, 0, 0, 0.2); 
    
    /* 上側の角だけを丸くする */
    border-radius: 0.8rem 0.8rem 0 0; 
    
    /* Flexbox設定 */
    cursor: pointer; 
    display: flex; 
    
    /* テキストのみを中央揃えにする（Flexboxの中央寄せ） */
    justify-content: center; 
    
    align-items: center;
    
    /* ホバー効果は不要なため、このブロックには含めません。*/
    /* アイコン（::after）に関するCSSも完全に削除してください。*/
}
/* --- アコーディオンボタン（赤帯）の正しい見た目指定 --- */
.acc-btn {
  background-color:#F00;
  color: black;
  font-weight: bold;
  font-size: 2rem;
  text-align: center !important;
  padding: 2rem 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  width: 100%;
  cursor: pointer;
  position: relative;
}

/* 開いているときの矢印 */
.acc-btn::after {
  content: ">";
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: black;
  font-weight: bold;
}

.acc-btn[aria-expanded="true"]::after {
  content: "v";
}

/* フォーカス時の青枠を消す */
.acc-btn:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* パネル部分（リスト背景） */
.acc-panel {
  background-color: #f5f5f5;
}
aside .menu li a {
  display: block;
  font-size:1.5rem;
  background-color: #f5f5f5;
  border-bottom: 0.5rem solid #ffffff;
  color: #333333;
  text-align: center;
  padding: 2rem 1.5rem;
  margin: 0;
  text-decoration: none;
}
/* ホバー */
aside .menu li a:hover {
  background-color: #eeeeee;
  color: #A52A2A;
  font-weight: bold;
}
/* アコーディオンメニューの最下部にあるサイトマップリンクのボタン化 */
.acc-item a.acc-btn {
  /* ------------------- */
  /* 基本設定と大きさの復元 */
  /* ------------------- */
  display: block;
  width: 100%;
  box-sizing: border-box; 
  padding: 2rem 1rem;
  
  /* ------------------- */
  /* 色の復元とリンクデフォルトの上書き */
  /* ------------------- */
  text-decoration: none;   /* 下線を削除 */
  
  /* ★色修正★ 文字色と背景色を他のアコーディオンボタンと統一 */
  color: #333;           /* サイトの基本色（濃いグレー）*/
  background-color:#F00;/* 背景色: 元のボタンと同じ色に設定（例として#f7f7f7） */
  border: 2px outset black; /* 境界線を復元 useragent */
  /* ★配置修正★ デフォルトは左揃えだが、モバイルの最下部で中央にしたい場合 */
  text-align: center !important; /* 中央揃えを適用 */
}

/* ホバー時の装飾（ボタンらしさを出す） */
.acc-item a.acc-btn:hover {
  background-color: #f0f0f0; /* 少し濃くする */
}
/* MENUブロック直下の address */
aside address{
  background-color:#F5F5DC;
  font-size:1.5rem;
  text-align:center;
  padding-top:2rem;
  padding-bottom:5rem;
}
aside #am_bt{
  background-color: #008080;
  color:  #ffd700;
  margin-bottom: 0.8rem;
  box-shadow: 0 0.4rem 0.6rem rgba(0, 0, 0, 0.2);
  border-radius: 0 0 0.8rem 0.8rem;
  justify-content: center;
}
#pc_wanted {
    display:block;
    margin-left: auto;
    margin-right: auto;
}
/* --------------------------------- */
/* ===== フッター (モバイルファースト) ===== */
/* --------------------------------- */
footer {
    /* ★フルワイド背景色★: フッターの背景をダークカラーにする */
    background-color: #333; 
    color: #fff; 
}
/* フッター内のcontainerがコンテンツ幅を制限 */
footer .container {
    padding-top: 3.2rem; 
    padding-bottom: 3.2rem; 
    text-align: center;
}
/* SNSメニューのスタイル */
/* --------------------------------- */
/* ===== フッター (モバイルファースト) ===== */
#snsmenu {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 3.2rem;
}
#snsmenu ul {
    display: flex; 
    justify-content: center;
    gap: 4rem;
    margin-bottom: 0rem;
}
/* SNSメニューのアイコンスタイル (SVG用) */
#snsmenu ul li a svg.sns-icon {
    /* サイズを統一 */
    width: 3.2rem;
    height: 3.2rem;
    /* デフォルトの色を設定（フッターが暗い色なら白がおすすめ） */
    fill: #ffffff; 
    transition: fill 0.3s ease;
}

/* ★追加★ 非ホバー時もSVG内のPATH要素にデフォルトの白色を強制適用する */
#snsmenu ul li a svg.sns-icon path {
    fill: #ffffff; 
}

/* ホバー時にSVGとPATH要素の両方に色を適用する */
#snsmenu ul li a:hover svg.sns-icon,
#snsmenu ul li a:hover svg.sns-icon path {
    /* ホバー時の色を設定（例：テニスボールのような黄色） */
    fill: #e8d002;
}
/*ページ上部へボタン*/
#gotop{
font-size:1.4rem;/*10*1.4=14px*/
text-align:center;
position:fixed;
bottom:3rem;/*10*3=30px*/
right:2.5rem;/*10*2.5=25px*/
}
#gotop a{
line-height:2.5rem;/*2.5*10=25px*/
margin-bottom: 0.5em; /* 約5px */
padding-left:0.5rem;
padding-right:0.5rem;
background-color : #008080;
color :#ffd700;
font-weight : bold;
text-decoration : none;
border: medium solid #ffd700;
display:block;
}
#gotop a:hover{
color: white;
}
/*装飾系 */
.a_tr{
display:inline-block;
margin-bottom:2rem;
font-weight:700;
}
.a_tr::before{
  content: "\25B6";   /* ? BLACK RIGHT-POINTING TRIANGLE */
  color:red;
  margin-right: 0.4em;
  font-size: 0.9em;
}
.st_red{
color:red;
}
.st_bold{
font-weight:700;
}
.st_u{
text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.st_rbu{
color:red;
font-weight:700;
text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.st_large{
font-size:larger;
}
/* ------------------------------------------------ */
/* ===== デスクトップスタイル (min-width: 901px 以上) ===== */
/* ------------------------------------------------ */
@media (min-width: 901px) {
    /* -------------------------------------- */
    /* ヘッダーのレイアウト: 横並びに上書き (PC) */
    /* -------------------------------------- */
    .header-inner {
        flex-direction: row; 
        align-items: center;
        justify-content: space-between;
        gap: 1.6rem;
        padding: 0 1.6rem; 
    }
/* 1. .brand を縦並びのコンテナに変更 (ロゴ行と決済ロゴ行の2行にする) */
    .brand {
        flex-direction: column; /* 縦並びにする */
        align-items: flex-start; /* 左寄せに戻す */
        gap: 0.5rem; /* 行間の調整 */
        width: auto;
        flex-shrink: 0;
    }

    /* 2. ロゴとサイトタイトルのグループ（PCでは横並びを維持） */
    .title-group {
        display: flex;
        flex-direction: row; /* 横並びにする */
        align-items: center;
        gap: 1.0rem; 
        width: auto;
        flex-shrink: 0; 
    }
.payment-brand-logos {
    text-align: left; 
    margin-top: 0.5rem; 
    margin-bottom: 0;
    width: auto;
}
.payment-icons-new {
    height: 3rem;
    width: auto;
    vertical-align:middle;
}
    /* キャッチコピーと電話 (.header-info) を右寄せに戻す (PC右側) */
    .header-info {
        flex-direction: column; 
        align-items: flex-end; /* 右寄せに戻す */
        text-align: right;
    }
    
    /* サイズ定義を統合 (重複を削除し、適切な場所に集約) */
    .logo { width: 5.6rem; height: 5.6rem; }
    h1 { font-size: clamp(2.2rem, 3.2vw, 3.2rem); } /* ページ内のメインタイトルに適用 */
    .tel { font-size: 1.8rem; }

    /* サイト名 (.site-title) の装飾復元 - PC */
    .site-title {
        font-size: clamp(2.2rem, 3.2vw, 3.2rem); 
        margin: 0;
        line-height: 1.2;
        text-align: left;
        
        /* ★追加★ 強制的に改行させない */
        white-space: nowrap;
    }
    
    .header-info .catch, .header-info .tel {
        text-align: right; 
    }
    /* グローバルメニュー (PC) */
    .g-hamburger { display: none; }
    /* #g-nav .container { justify-content: center; } */ /* コンテナの中央寄せは削除 */

    .global-nav { 
        position: static; 
        width: 100%; /* ★追加★ 親要素の幅いっぱいに広げる */
        height: auto;
        background-color: transparent;
        transform: none; 
        z-index: auto;
        padding-top: 0;
        display: flex;
        /* 均等配置に変更 */
        /* gap: 2.4rem; */ 
        justify-content: space-around; /* ★修正★ 項目とその周囲に均等なスペースを配置 */
    }
    .global-nav li a {
        padding: 1.5rem 0; 
        border-bottom: none;
        color: #fff;
        font-weight: bold;
        transition: color 0.2s;
    }
    .global-nav li a:hover {
        color: #ffd700; 
    }
    /* パンクズリストPCでは表示 */
    .breadcrumb-nav {
        display: block;
    }
    .breadcrumb-nav ol {
        display: flex;
        list-style: none;
        padding: 0;
        font-size: 1.4rem;
    }

    /* 区切り文字 ( > ) の設定 */
    .breadcrumb-nav li:not(:last-child)::after {
        content: " > ";
        margin: 0 0.5rem;
        color: #555;
    }

    /* 最後の要素（現在地）の強調 */
    .breadcrumb-nav li[aria-current="page"] {
        font-weight: bold;
        color: #800000; /* 例としてサイドメニューの濃い赤を採用 */
    }
/* ------------------------------------------------ */
    /* ===== 商品写真エリアの2カラムレイアウト (PC) ===== */
    /* ------------------------------------------------ */
    /* 写真エリア全体のコンテナを横並びにする */
    .m_contents {
        display: flex; /* 横並びを有効化 */
        flex-direction: row; /* 横並び */
        gap: 3.2rem; /* メイン写真と各部写真の間隔 */
        align-items: flex-start; /* 上端揃え */
        margin-bottom: 2rem; /* 次のセクションとの区切り */
    }

/* 1. メイン写真 (左カラム: 30%) */
    .mc_left {
        width: 30%; /* 30% */
        text-align:left;
        flex-shrink: 0; 
    }
    .mc_right {
        width: 70%; /* 70% */
        text-align:left;
        flex-direction: column; 
    }

    /* 2. 各部写真のリンク (右カラム: 70%) */
    .part-links {
        color:blue;
        text-decoration:underline;
        gap: 1.5rem; 
        align-items: stretch; 
        padding: 0; 
        margin: 0; 
    }
    
    .part-links li {
        width: 100%; /* リストアイテムを親コンテナの幅いっぱいに */
        /* モバイルでの横並び用width設定を上書き */
    }
main h1{
text-align:left;
}
.product_section h2{
margin-left:0;
width:80%;
text-align:left;
}
main p{
width:90%;
}
.product-price{
text-align:left;
}
}