/* ================================================================= */
/* 暖房特集用 基本設定 */
/* ================================================================= */

/* ブラウザデフォルトマージン・パディングのリセット */
html, body {
    margin: 0;
    padding: 0;
    font-size: 16px; /* 基本フォントサイズ */
}

html {
    position: relative;
    min-height: 100%;
}

body {
    /* 秋の背景画像を暖房テーマに合わせる場合はパスを変更してください */
    background-image: url('/contents/danbou/images/back_2.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    margin-bottom: 60px; /* フッターの高さ確保 */
    font-family: 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', Hiragino Kaku Gothic Pro W3, "ヒラギノ角ゴ Pro W3", Osaka !important;
}


/* ================================================================= */
/* レイアウトとヘッダー・フッター */
/* ================================================================= */

header, footer {
    width: 100%;
    margin: 0 auto;
    background-color: #182d7c; /* ノジマブルー */
    height: 60px;
    z-index: 1;
}

footer {
    position: absolute;
    bottom: 0;
}

/* ================================================================= */
/* リンク設定 */
/* ================================================================= */

a {
    color: #333; 
    text-decoration: none;
}

a:hover {
    color: #F26400; /* ホバー時に暖色に変化 */
    text-decoration: none;
}

#logo {
  padding: 0px 0px;
  width: 94%;
  max-width: 1000px;
  margin: auto;
}

#logo img {
  height: 60px;
}

/* モバイルでの調整 */
@media screen and (max-width: 919px) {
    .comment-box {
        margin: 20px 10px 30px;
        max-width: calc(100% - 20px);
        font-size: 1rem;
    }
    .comment-box p {
        font-size: 0.7rem;
        text-align: center;
        margin: 0;
        padding: 0;
    }

    /* toPC クラスの定義をこのブロックで完了させます */
    .toPC { 
        display: none; 
    }
} /* ★モバイル調整ブロックはここで正しく閉じます */

/* pタグのリセット（この場所で定義されているのは正しいです）*/
.comment-box p {
    margin: 0;
    padding: 0;
}

/*colors*/
/*ノジマブルー*/
.nojimaBlue {
  color: #182D7C;
}

/*ノジマレッド*/
.nojimaRed {
  color: #E60019;
}

.markerpink {
  background: linear-gradient(transparent 40%, rgb(255, 170, 170) 40%);
}

.markeryellow {
  background: linear-gradient(transparent 40%, rgba(226, 197, 90, 0.79) 40%);
}

.markerblue {
  background: linear-gradient(transparent 40%, rgb(83, 197, 240) 40%);
}

.markerblue02 {
  background: linear-gradient(transparent 40%, rgb(171, 217, 235) 40%);
}

.markeryellow2 {
  background: linear-gradient(transparent 40%, rgb(223, 246, 11) 40%);
}

/* パンくずリストの調整 */
.breadcrumb {
    padding: 8px 15px;
    margin: 0 auto 5px !important; /* 上0、下5pxに詰める */
    list-style: none;
    background-color: transparent;
    font-size: 0.7rem;
    max-width: 1000px;
}
.breadcrumb>li {
    display: inline-block;
}
.breadcrumb>li+li:before {
    padding: 0 5px;
    color: #ccc;
    content: "/\00a0";
}

.breadcrumb>.active {
  color: #c2c2c2;
}

/* 導入コメントボックス (上下中央寄せを適用) */
.comment-box {
    max-width: 95%;
    margin: 20px auto 30px; 
    padding: 15px 20px;
    line-height: 1.8;
    font-weight: bold;
    color: #1C4E80;
    background-color: #FFF5E1; 
    border: 1px solid #F26400; 
    border-radius: 8px;

    /* 上下中央寄せ */
    display: flex;             
    align-items: center;       
    justify-content: center;   
}

/* --------------------------------------------- */
/* ▼モバイルファースト (全環境に共通のデザイン) */
/* --------------------------------------------- */
section {
  margin: 1rem auto 2rem;
}

article {
  max-width: 100%;
  margin: 0 5px;
  background-color: #fff;
}

h1 {
  font-size: 14px;
  text-align: center;
}


.obakechan {
  font-family: "Cherry Bomb One", system-ui;
  font-weight: 400;
  font-style: normal;
  margin:1rem;
}

.obakechan img {
  width: 60px;
  height: 53px;
  margin: 0 auto;
  display: block;

}

.balloon-002 {
  display: flex;
  justify-content: center;
  position: relative;
  max-width: 100%;
  margin-top: 15px;
  padding: .8em 1.2em;
  border-radius: 5px;
  background-size: 40px 40px; /* repeating-conic-gradientが適用されるサイズ */
  background-image: repeating-conic-gradient(from 0deg, 
  #333 0deg 90deg, #000 90deg 180deg); /* 90度ずつ色変更を360度まで繰返し（2回） */
  background-repeat: repeat;
  color: #d1c100;
}

.balloon-002::before {
  position: absolute;
  top: -15px;
  width: 30px;
  height: 15px;
  background-size: 40px 40px; /* repeating-conic-gradientが適用されるサイズ */
  background-image: repeating-conic-gradient(from 0deg, 
  #666 0deg 90deg, #000 90deg 180deg); /* 90度ずつ色変更を360度まで繰返し（2回） */
background-repeat: repeat;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  content: '';
}



.kijibox{
  margin:1rem;
  border: 1px dotted #b179c4;
  border-radius: 10px;
  padding: 0.5rem;
}

.kijibox ul {
  padding-left: 0;
  display: block;
}

.kijibox li {
  flex-basis: 100%;
}

.kijibox li img {
  display: block;
  margin-bottom: 1rem;
}

.kanban {
  margin: 1rem 0 2rem;
}

.back999 {
   background-color: #d3d2d2;
   padding: 0.5rem;
}

/* ================================================================= */
/* 暖房特集テーマカラーと H2 / テキストボックス */
/* ================================================================= */

/* H2タイトル (速暖・機能重視カラー) */
.h2title {
    font-family: 'Kiwi Maru', cursive;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.5;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    padding: 0.8rem 1rem 0.8rem 1.5rem;
    text-align: left;
      
    background-color: #FFAD72; /* メインカラー：ブライトオレンジ */
    border-left: 15px solid #3B5E7F; /* アクセントカラー：ロイヤルブルー */
    border-radius: 0 15px 15px 0;
  
    color: #333333;
    text-shadow:
        1px 1px 0 #FFFFFF,
        -1px 1px 0 #FFFFFF,
        1px -1px 0 #FFFFFF,
        -1px -1px 0 #FFFFFF;
}

/* 説明文ボックス (温もりと清潔感) */
.textbox01 {
    /* ★お化けちゃんアイコンはここでは生成しません（content: noneで非表示） */
    display: flex; 
    align-items: center; /* 垂直方向中央寄せ（念のため） */
    
    background-color: #FFF5E1; /* 淡い暖色 */
    padding: 0.8rem;
    margin: 1rem;
    border: 3px dotted #1C4E80; /* ロイヤルブルーの点線 */
    border-radius: 1rem;
    
    font-family: "Kiwi Maru", serif;
    font-weight: 300;
}

/* .textbox01::before { content: none; } （アイコン非表示は今回は不要） */

/* ================================================================= */
/* 看板・パンくずリスト・導入コメントボックス */
/* ================================================================= */

/* 看板コンテナのマージン (上部空白解消 + 下部余白 2rem) */
#kanbanimages {
    margin: 0 0 2rem 0 !important; /* 上0、左右0、下2remを設定 */
    padding: 0 !important;
    line-height: 0; 
}
#kanbanimages img {
    display: block;
    width: 100%;
}

/* ================================================================= */
/* 目次リンク (bottonlink) スタイル */
/* ================================================================= */

.index {
    text-align: center;
    line-height: 2.5;
    font-weight: bold;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: #FF710C !important; /* 色を強制 */
    text-decoration-thickness: 3px;
    text-underline-offset: 8px; 
    font-size: 1.2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.bottonlink {
    width: 90%; /* 目次リンクの幅を調整 */
    margin: auto;
}

.bottonlink ul {
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

    .bottonlink ul li {
        flex-basis: 48%; 
        margin-bottom: 2rem;
        /* 目次ボタン全体に左右の余白を設けることで、画像が端につきすぎないようにします */
        padding: 0 5px; 
    }

.bottonlink ul li a {
    display: block;
    text-align: center;
    border-radius: 1rem;
    padding: 0; /* paddingをリセットして画像サイズを基準にする */
    height: 100%; /* 親要素の高さに合わせる */
    box-sizing: border-box; /* paddingとborderを幅に含める */
}

    .bottonlink ul li span {
        font-size: 0.9rem;
        line-height: 1.2;
        /* 幅を100%にして、親要素（aタグ）の横幅いっぱいに広げる */
        width: 100%; 
        padding: 0.3rem 0; /* 左右のパディングは不要なので0にする */
        box-sizing: border-box; /* paddingとborderを幅に含める */
    }

.bottonlink ul li a:hover img {
    opacity: 1;
}

/* PC時の修正 */
@media all and (min-width: 920px) {
    .bottonlink ul {
        /* justify-content: space-around; は space-between に変更推奨 */
        justify-content: space-between; 
    }
    .bottonlink ul li {
        flex-basis: 15%; /* 6分割レイアウトに修正 */
        /* PC版でも重ね合わせを維持 */
    }
}

.bottonlink ul li span {
    background-color: #FF710C;
    color: #fff;
    font-weight: bold;
    margin-top: 0.5rem;
    padding: 0.3rem 0;
    border-radius: 0.5rem;
}

.bottonlink ul li img {
  width: 95%;
  margin: 0 ;
}

    .bottonlink ul li p {
        width: 100%;
        font-size: 0.8rem;
    }

.bottonlink ul li p::before {
    content: none;
}

/* PC時の目次リンク調整 */
@media all and (min-width: 920px) {
    .bottonlink ul li {
        flex-basis: 15%; /* PCで6分割レイアウトに */
    }
}

h5:before {
  font-family: "Font Awesome 6 Free";
  content: "\f578";
  content: "\f1e6"; /* タグアイコン */
  font-weight: 900;
  padding-right:0.2em;
  padding-left:0.2em;
  color: #BD3C00;
}

h5 {
  text-align: right;
  margin: 0 0.5rem 0.8rem;
}

.textbox01 {
  background-color: #F8EBE5;
  padding: 0.7rem;
  margin: 2.5rem 1rem 1rem;
  font-family: "Kiwi Maru", serif;
  font-weight: 300;
  font-style: normal;
  position: relative;
}

.textbox01::before {
  font-family: "Font Awesome 6 Free";
  content: "\f7b6";
  font-weight: 900;
  padding-right:0.2em;
  padding-left:0.2em;
  color: #F26400;
  position: absolute;
  top: -2rem;
  left: 45%;
  font-size: 1.5rem;
}


.categoriestag p {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.categoriestag p a {
  color: #fff;
}

.categoriestag p a:hover {
  color: #F8EBE5;
  font-weight: bold;
}

.categoriestag p span {
  background-color: #CC5500; /* 落ち着いた暖色 */
  padding: 0.2rem 0.5rem;
  margin:0.5rem;
  border-radius: 0.5rem;
}


/* 商品リストフレックス */

.productslist ul {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ccc;
  padding: 1rem;
}

.productslist ul li:nth-child(1) {
  flex-basis: 50%;
padding-right: 10px;
}

.productslist ul li:nth-child(1) img {
    /* HTML内にあるインラインのstyleで600pxが指定されているため、!importantで上書き */
    width: 100% !important; /* 80%にすることで、左右に余白を作りつつ大きく表示 */
    height: auto;
    padding-right: 0; /* 右側のパディングをリセット */
    margin: 0 auto 1rem; /* 中央寄せ */
  }

.productslist ul li:nth-child(2) {
    flex-basis: 50%; /* 商品情報エリアもフル幅にする */
    text-align: left; /* 商品情報を左寄せ */
  }



.productslist p {
  background-color: #CAE5E9;
  font-size: 0.8rem;
  padding: 0.5rem;
  line-height: 2;
}

.productslist p span {
  background-color: #008899;
  color: #fff;
  display: inline-block;
  padding: 3px 5px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: bold;
  margin-right: 5px;
}

/* どこでもカート設定 */
.cartanywhere {
  margin-bottom: 1rem;
}

.cartprodname {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.cartprice {
  font-size: 1.5rem;
  color: #ff0000;
  font-weight: bold;
  text-align: right;
}

.yencolor {
  color: #000;
  font-size: 0.8rem;
}

.cartnouki {
  font-size: 0.8rem;
  color: #27c10d;
}

.pointkangen {
  font-size: 0.8rem;
  color:coral;
  font-weight: bold;
}

/* -------------------------------------------- */
/* ▼タブレット用デザインとして付け足すデザイン */
/* -------------------------------------------- */
@media all and (min-width: 768px) {
  article {
    max-width: 100%;
    margin: 0 5px;
    background-color: #fff;
  }

  section {
    margin: 1rem auto 2rem;
  }

  /* 商品一覧 */

.productslist {
  display: flex;
  flex-wrap: wrap;
}

.cartanywhere {
  width: 21%;
  display: flex;
  border: 1px solid #ccc;
  margin: 0 1rem 1rem;;
}

.productslist ul {
  display: block;
  border: none;
}

.productslist ul li {
}

.productslist ul li img {
display: block;
margin:0 auto 1rem;
}





/* ------------------------------------ */
/* ▼PC用デザインとして付け足すデザイン */
/* ------------------------------------ */
@media all and (min-width: 920px) {
  article {
    max-width: 1000px;
    margin: 0 auto;
    background-color: #fff;
  }
  }  

  section {
    margin: 1rem auto 4rem;
  }

  h1 {}
    
.obakechan {
  width: 80%;
  margin:2rem auto 1rem;
}

.obakechan img {
  /* max-width: 60px;
  height: 100%; */
  margin: 0 auto;
  display: block;
}


.bottonlink {
  width: 100%;
}

.bottonlink ul li span {
  display: block;
  background-color: #FF710C;
  text-align: center;
}

.bottonlink ul li {
  flex-basis: 30%;
}

.bottonlink ul li a {
  color: #fff;
}

  
  /* 商品一覧 */

.productslist {
  display: flex;
  flex-wrap: wrap;
}

.cartanywhere {
  width: 21%;
  display: flex;
  border: 1px solid #ccc;
  margin: 0 1rem 1rem;;
}

.productslist ul {
  display: block;
  border: none;
}

.productslist ul li {
}

.productslist ul li img {
display: block;
margin:0 auto 1rem;
}
}

#pageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

#pageTop a {
    display: block;
    z-index: 999;
    padding: 8px;
    border-radius: 60px;
    width: 70px;
    height: 70px;
    /* ★修正: 背景色を暖色テーマに変更 */
    background-color: #F26400; 
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
}

#pageTop a:hover {
    text-decoration: none;
    /* ★修正: ホバー時に少し暗い色に変化させる */
    background-color: #CC5500; 
    opacity: 1; /* 不透明度を1に戻し、色変化のみに集中 */
}


/* adding2025.cssに以下のルールを追加（または修正）します */

/* すべての「順序なしリスト（ul）」の点を非表示にする */
.bottonlink ul,
.productslist ul,
.cartanywhere ul {
    /* 箇条書きの印（ビュレット）を非表示にする */
    list-style: none; 
    /* リストのインデント（左側の隙間）をリセット */
    padding-left: 0; 
    /* 必要に応じてマージンもリセット */
    margin: 0;
}

/* さらに確実に非表示にするため、リスト項目（li）にも適用 */
.bottonlink li,
.productslist li,
.cartanywhere li {
    list-style: none;
}