.osonae_title_01{
     background-image: url('https://flowergift875.itembox.cloud/item/category/osonae/2026/pc_title.jpg');
     background-size: 100% 100%; /* 画像を引き伸ばして枠いっぱいに合わせる */
     background-repeat: no-repeat;
     background-position: center;
    
     /* サイズ・配置の設定 */
  width: 100%;
  max-width: 928px; /* PCでの最大幅 */
  height: 218px;     /* PCでのタイトルの高さ */
  margin: 20px auto; /* 画面の中央に配置 ＆ 上下の余白 */
  
  /* 文字を上下左右の中央に配置する */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  /* 文字のスタイル */
  color: #ffffff;
  font-weight: bold; /* 太字に指定 */
  letter-spacing: 0.05em; /* 文字と文字の間隔を少し空けると上品になります */
  line-height: 1.4;   /* 2行のときの行間 */
  box-sizing: border-box;

    }

  /* --- 1行目（上側）のサイズ設定 --- */
.osonae_title_01 .t_sub {
  font-size: 24px; /* 例：PC時の1行目のサイズ */
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

/* --- 2行目（下側）のサイズ設定 --- */
.osonae_title_01 .t_main {
  font-size: 36px; /* 例：PC時の2行目のサイズ */
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

@media (max-width: 768px) {
.osonae_title_01 {
    background-image: url('https://flowergift875.itembox.cloud/item/category/osonae/2026/sp_title.jpg');
    height: 110px;    
    font-size: 16px;  
    padding: 0 16px;  
  }

/* スマホ時の1行目・2行目のサイズを個別に調整する場合 */
  .osonae_title_01 .t_sub {
    font-size: 18px; /* スマホ時の1行目のサイズ */
   font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  }
  
  .osonae_title_01 .t_main {
    font-size: 27px; /* スマホ時の2行目のサイズ */
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  }


}

/* 全体のグリッドコンテナ */
.anchor-grid {
  display: grid;
  gap: 10px; /* ボタン同士の間隔 */
  width: 95%;
  margin: 50px auto;
}

/* PC用は4列 */
.pc-only {
  grid-template-columns: repeat(4, 1fr);
}

/* SP用はデフォルト非表示 */
.sp-only {
  display: none;
  grid-template-columns: repeat(2, 1fr);
}

/* カード（リンク）のスタイル */
.anchor-card {
  display: block;
  width: 100%;
  overflow: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
}


/* 画像のスタイル（崩れずにレスポンシブ対応） */
.anchor-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* --- レスポンシブ切り替え（768px以下をスマホとする場合） --- */
@media (max-width: 768px) {
    .anchor-grid {
  margin: 25px auto;
}


  .pc-only {
    display: none !important; /* PC用を隠す */
  }
  .sp-only {
    display: grid !important; /* SP用（2列）を表示する */
  }
}

/* ボタンをグリッドで並べ、画面の中央に配置する親コンテナ */
.dropdown-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* PC時は「4列」に固定 */
  gap: 8px;            /* ボタン同士の間隔 */
  width: 100%;
  max-width: 1200px;    /* 全体の最大幅（レイアウトに合わせて調整してください） */
  margin: 0 auto;       /* 画面の左右中央に配置 */
  padding: 0 16px;      /* 画面端の余白 */
  box-sizing: border-box;
}

.dropdown-button {
  /* ボタン全体のスタイル */
  display: flex;
  align-items: stretch;
  border: 1px solid #555555;
  background-color: #ffffff;
  padding: 0;
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;          /* グリッドのセル幅に合わせる */
  height: 48px;
  font-family: sans-serif;
}

.dropdown-text {
  /* 左側のテキストエリア */
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
  font-size: 16px;
  letter-spacing: 0.05em;
  padding: 0 ;
}

/* 右側のアイコンエリア（背景がグレーで、下向きの矢印を表示） */
.dropdown-button::after {
  content: "";
  background-color: #333333; /* 右側の濃いグレーの背景 */
  width: 48px; /* 右側エリアの幅 */
  height: 100%;
  display: block;
  
  /* 下向きの矢印SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center; /* 枠の中央に配置 */
  background-size: 18px 18px; /* アイコンの大きさ */
}

/* --- スマホ表示（画面幅768px以下の場合） --- */
@media (max-width: 768px) {
  .dropdown-container {
    grid-template-columns: repeat(1, 1fr); /* スマホ時は「2列」に変更 */
    gap: 18px; /* スマホ時のボタン間隔を少し狭める場合 */
  }
  
  .dropdown-text {
    font-size: 16px; /* スマホ画面に合わせて文字サイズを微調整 */
    padding: 0 8px;
  }
}

h3.osonae{background-color:#537c61 ; padding: 5px; width: 100%; color: #fff; font-size: 30px; margin: 20px 0; height:60px;display: flex; justify-content: center; align-items: center; }
h4.osonae{border-bottom: #000 1px solid;margin-top: 20px; padding-bottom: 5px; font-size: 24px; }

.cat-item04{display:flex;flex-wrap:wrap;background-color:#fff;padding:2%;}
.cat-item04:last-of-type{margin-bottom:0;}
.cat-item04 li{width:calc(93%/4);margin-right:2%;background-color:#ffffff;padding-bottom:1.5%;}
.cat-item04 li:nth-of-type(4n){margin-right:0;}
.cat-item04-name{font-size:1rem;margin:3.5% 0 0 0;line-height:1.3;padding:0 3%;color:#303030;}
.cat-item04-price{background-color:transparent;font-size:1.1rem;padding:0 3%;margin:2% 0 0 0;color:#FF0000;}
.cat-item04-price span{color:#303030; font-size: 0.9rem;}


@media (max-width: 768px) {
 h3.osonae{ font-size: 24px; height: 60px; display: flex; justify-content: center; align-items: center; }
 h4.osonae{ font-size: 18px; margin-bottom:5px;}
 
 .cat-item04 li{width:calc(93%/2);margin-right:2%;background-color:#ffffff;padding-bottom:1.5%;}
.cat-item04 li:nth-of-type(2n){margin-right:0;}

.cat-item04-name{font-size:12px;}
.cat-item04-price{font-size:12px;}
}







/*2026変更前*/

.main-item{display:flex;flex-wrap:wrap;margin:3% 0;}
.main-item:last-of-type{margin-bottom:0;}
.main-delivery._osonae{background-color:#edfded;}
.main-delivery-title._osonae span{background-color:#3b633b;}
.main-pitem-label._osonae{background-color:#3b633b;color:#ffffff;}
.main-message._osonae{background-color:#edfded;}
.main-title._osonae{background-color:#3b633b;color:#ffffff;border:0;font-size:1.4rem;padding:1.8% 2% 1.5% 2%;margin-bottom:2%;text-align:center;}
.main-title._osonae span{color:#ffffff;}

.osonae_nav{width: 945px; margin: auto; margin-top: 80px;margin-bottom: 80px;}
.osonae_nav a img:hover{opacity:0.6;filter:brightness(110%);}

.osonae_nav_sp{ margin: auto; margin-top: 50px; width:90%; margin-bottom: 50px;}
.osonae_nav_sp a img:hover{opacity:0.6;filter:brightness(110%);}

.osonae_menu{
  display: flex;         
  justify-content: space-between; /* 画像を均等に配置する */
  padding: 0;             /* ブラウザが自動でつける内側の余白を削除 */
  list-style: none;       /* リストの先頭にある「・」を削除 */
  gap: 15px;              /* 画像間の隙間を15pxに設定 */
}
.osonae_menu li {
    /* 各画像の幅を均等にするため、flex: 1; を指定すると便利です */
    flex: 1;
}

.osonae_nav_sp li{margin-bottom: 3px;}

.main-item{background-color: #ffffff;}

.category-link-button{
    width : 100%;
    display       : inline-block;
    border-radius : 5%;          /* 角丸       */
    font-size     : 14pt !important;        /* 文字サイズ */
    text-align    : center;      /* 文字位置   */
    cursor        : pointer;     /* カーソル   */
    padding       : 12px 12px;   /* 余白       */
    background    : #ffffff;     /* 背景色     */
    color         : #ff7f00;     /* 文字色     */
    line-height   : 0.5em;         /* 1行の高さ  */
    transition    : .3s;         /* なめらか変化 */
    box-shadow    : 2px 2px 3px #666666;  /* 影の設定 */
    border        : 2px solid #ff7f00;    /* 枠の指定 */
  }

.category-link-button:visited { color:#ff7f00;}
.category-link-button:link { color:#ff7f00;}
.category-link-button:hover {
    box-shadow    : none;        /* カーソル時の影消去 */
    color         : #ffffff !important;     /* 背景色     */
    background    : #ff7f00;     /* 文字色     */
    text-decoration: none;
  }


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}