.boxCont02,
.boxCont06 {
  width: 1040px;
  padding: 0;
}

.boxCont03,
.boxCont04,
.boxCont05 {
  width: 1040px;
  padding: 30px 0 0 0;
}

ol,
ul {
  list-style: none;
  padding-left: 0;
}

.ec-layoutRole__contents {
  max-width: none !important;
  padding-top: 80px;
}

.ec-blockTopBtn {
  display: none !important;
}

@media screen and (min-width: 768px) {
  /* .spmain, */
  .ec-headerNaviRole .sp_head_nav,
  .welcome_title,
  .sp_img,
  .sp_drug,
  .pl_sp,
  .trs_sp,
  .itemn_sp,
  .onlin_shop_sp,
  .sp_login {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .boxCont,
  .boxCont02,
  .boxCont03 {
    margin: 0 auto;
    padding: 8% 0 !important;
    width: 92%;
    clear: both;
    overflow: hidden;
  }

  .boxCont04,
  .boxCont06 {
    margin: 0 auto;
    padding: 0 !important;
    width: 92%;
    clear: both;
    overflow: hidden;
  }

  .boxCont05 {
    margin: 0 auto;
    padding: 8% 0 0 !important;
    width: 92%;
    clear: both;
    overflow: hidden;
  }

  .ec-layoutRole__contents {
    padding-top: 71px;
  }
  /* .pcmain, */
  .ec-headerNaviRole,
  .ec-layoutRole__mainTop,
  .pc_img,
  .pc_drug,
  .pl_pc,
  .ms_sp,
  .trs_pc,
  .recom_com_sp,
  .itemn_pc,
  .pc_login,
  .pc_com {
    display: none !important;
  }
}
#page_homepage #hino_product a:link,
#page_homepage #hino_product a:visited,
#page_mypage_login .ec-grid2__cell a:link,
#page_mypage_login .ec-grid2__cell a:visited,
.registration a:link,
.registration a:visited {
  color: #000;
}

#page_homepage a.ec-blockBtn--action,
.regist_btn a {
  color: #fff;
}

.ec-login .ec-login__link a {
  text-decoration: underline;
}

/* #page_homepage #hino_product a:link,
#page_homepage #hino_product a:visited,
#trouble_search a:link,
#trouble_search a:visited,
#medicine_search a:link,
#medicine_search a:visited {
  color: #000;
} */

/************************************************
 Block_ヘッダー(ロゴ・商品検索・ログインナビ・カート)
 *************************************************/

/* 他のCSSにある #header の設定をリセットし、中央寄せを有効にする */
.ec-layoutRole__header #header {
  position: static; /* fixedを解除して親要素に従わせる */
  width: 100%;
  margin: 0 auto; /* 左右中央寄せ */
  left: auto !important; /* positionに関連する位置設定をリセット */
  display: flex !important; /* 横並びを維持 */
}

/* 検索窓をダイナミックに広げるための追加リセット */
.ec-headerNaviRole__left {
  flex: 1 !important;
  width: auto !important;
  min-width: 0; /* flexアイテムが縮小できるようにする */
}

/* -------------------------------------------
   1. ヘッダー全体：画面端から端まで白く固定
------------------------------------------- */
.ec-layoutRole__header {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100% !important;
  background-color: #fff !important; /* 背景を白 */
  z-index: 500;
  /* 透過や重なりを防ぐために高さを明示 */
  height: 80px !important;
  min-height: 80px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 下のコンテンツとの境目 */
}

/* -------------------------------------------
   2. ヘッダー内部：1040px幅で中央寄せ
------------------------------------------- */
.ec-headerNaviRole {
  display: flex !important; /* floatを無効化し横並びにする */
  align-items: center; /* 上下中央揃え */
  justify-content: space-between; /* 左右に分散配置 */

  /* max-width: 1040px !important; */
  width: 100% !important; /* 1040pxまでは100% */
  margin-right: auto !important; /* 左右autoで中央寄せ */
  margin-left: auto !important;

  background-color: transparent !important; /* 親の白背景を透過 */
  float: none !important; /* 絶対にfloatさせない */
  padding: 10px 0 !important;
}

/* -------------------------------------------
   3. 各パーツの微調整
------------------------------------------- */

/* ロゴエリア */
.ec-headerRole__title {
  flex: 0 0 auto !important;
  float: none !important;
}

/* 検索エリア（真ん中で最大化） */
.ec-headerNaviRole__left {
  flex: 1 !important; /* 残りの幅をすべて使う */
  margin: 0 25px !important; /* ロゴとナビの隙間 */
  float: none !important;
}

.ec-headerSearch {
  padding-bottom: 12px;
}

.ec-headerSearch,
.ec-headerSearch .searchform {
  width: 100% !important;
  display: flex !important;
}

/* 検索入力欄を横長にする */
.ec-headerSearch__keyword {
  flex: 1 !important;
}
.ec-headerSearch__keyword input {
  width: 100% !important;
  /* height: 40px !important; */
}

/* 右側ナビエリア（会員・ログイン・カート） */
.ec-headerNaviRole__right {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center;
  float: none !important;
}

/* ナビ（新規登録など）を横並びに */
.ec-headerNav {
  display: flex !important;
  align-items: center;
  margin-right: 15px !important;
}

.ec-headerNav__item {
  margin-left: 15px !important;
  white-space: nowrap !important; /* 改行禁止 */
}

.ec-headerRole__title img {
  width: 170px !important;
  height: 48px !important;
}

.ec-headerNaviRole__left,
.ec-headerNaviRole__right {
  width: auto !important;
}

.ec-cartNaviIsset.is-active {
  max-height: 80vh; /* 画面の80%まで */
  overflow-y: auto; /* 縦スクロール */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* iOSの慣性スクロール */
  overscroll-behavior: contain; /* ページ本体は動かさない */
  /* right: calc(50% - 520px); */
}

@media screen and (min-width: 768px) {
  #header {
    width: 1040px !important;
  }

  /* 表示を維持するために必須の設定 */
  .ec-cartNaviWrap {
    position: static !important;
  }

  /* 吹き出しの位置を、親ではなく「ヘッダー全体」や「画面」を基準に固定する */
  .ec-cartNaviNull {
    position: absolute !important;
    top: 70px !important;
    right: calc(50% - 520px) !important;

    width: 280px !important;
    left: auto !important;
    display: none;
  }

  .ec-cartNaviNull.is-active {
    display: block !important;
  }
  .ec-cartNaviIsset.is-active {
    right: calc(50% - 520px);
    max-height: calc(100vh - 80px);
  }
}
@media screen and (max-width: 767px) {
  .ec-layoutRole__header {
    background-color: #f3f47f !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  .ec-cartNaviIsset.is-active {
    max-height: calc(100vh - 62px);
  }

  .ec-cartNavi--yohaku {
    height: 100px;
  }

  /* 1. 親要素の固定幅を解除し、中身を横並び（Flex）にする */
  .ec-headerNaviRole.boxCont {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: space-between; /* ロゴと右メニューを両端に */
    align-items: center;
    padding: 0 10px; /* 左右に少し余白 */
    box-sizing: border-box;
  }

  /* 2. 検索窓を含む左ブロックを非表示にする */
  .ec-headerNaviRole__left {
    display: none !important;
  }

  /* 3. 右側メニューブロックの設定 */
  .ec-headerNaviRole__right {
    width: auto !important;
    display: flex !important;
    align-items: center;
    margin-left: auto; /* 右寄せを確定させる */
  }

  .ec-headerNav__item .ec-headerNav__itemLink,
  .ec-cartNavi .ec-cartNavi__badge {
    display: block;
    font-size: 8px;
    color: #fff;
    margin-top: -10px;
  }

  /* 1. 全体コンテナの幅と高さのリセット */
  .ec-layoutRole__header {
    height: auto !important; /* 固定高さを解除 */
    min-height: 0 !important;
    width: 100% !important;
  }

  /* 2. 1040px制限の解除と横並びの強制 */
  #header.ec-headerNaviRole,
  .ec-headerNaviRole.boxCont {
    max-width: 100% !important; /* 1040pxを解除 */
    width: 100% !important;
    margin: 0 !important;
    padding: 5px 10px !important; /* 上下5px、左右10pxの余白 */
    display: flex !important;
    justify-content: space-between !important; /* ロゴとメニューを両端へ */
    box-sizing: border-box !important;
  }

  .ec-headerRole__navSP .ec-headerNavSP {
    /* display: block; */
    left: auto;
    right: 22px !important;
  }

  /* 3. 右側メニューエリアを右端に寄せる */
  .ec-headerNaviRole__right {
    /* flex: 1 !important; */
    display: flex !important;
    justify-content: flex-end !important; /* 中身を右寄せ */
    width: auto !important;
    margin: 0 !important;
  }

  /* 4. メニューとカートを横に並べる */
  .ec-headerNav {
    display: flex !important;
    align-items: center !important;
  }

  .ec-headerNav {
    margin-right: 3px !important; /* カートとの間の隙間 */
  }

  /* 5. ロゴのサイズ調整（はみ出し防止） */
  .ec-headerRole__title img {
    width: 120px !important; /* スマホ用に少し小さく */
    height: auto !important;
    margin-top: 10px;
  }

  /* 6. 不要な余白のリセット */
  .ec-headerNav__item {
    margin-left: 2px !important;
    margin-right: 0 !important;
  }

  .ec-headerNaviRole__nav .ec-headerNav .ec-headerNav__itemIcon,
  .ec-cartNavi {
    margin: 0 auto;
    color: #fff;
  }

  .ec-cartNaviWrap .ec-cartNavi {
    padding: 10px 0 0 0px;
  }

  .ec-headerRole__title .ec-headerTitle .ec-headerTitle__title a {
    margin-bottom: 18px;
  }

  .ec-headerNavSP {
    display: block;
    cursor: pointer;
    border-radius: 10%;
    box-sizing: border-box;
    padding: 10px;
    width: 40px;
    height: 40px;
    font-size: 18px;
    text-align: center;
    color: #fff;
    background: #4f6129;
    position: fixed;
    top: 15px;
    left: 10px;
    z-index: 1000;
  }

  .ec-headerNav__item,
  .ec-cartNaviWrap {
    /* display: block;
    cursor: pointer; */
    border-radius: 8%;
    box-sizing: border-box;
    /* padding: 10px; */
    width: 40px;
    height: 40px;
    font-size: 18px;
    text-align: center;
    /* color: #fff; */
    background: #4f6129;
    /* position: fixed;
    top: 10px;
    left: 10px; */
    z-index: 800 !important;
  }

  .ec-cartNaviWrap .ec-cartNaviIsset.is-active {
    position: absolute;
    top: 62px;
  }

  /* ★★アイコン仮設定★★ */
  .ec-headerNavSP__action {
    text-decoration: none !important;
  }

  /* 三本線アイコンの位置調整 */
  .ec-headerNavSP__icon {
    /* margin-bottom: 2px !important; */
    font-size: 20px !important;
    display: block !important;
  }

  /* 追加した「メニュー」テキストの設定 */
  .ec-headerNavSP__text {
    /* display: block !important; */
    font-size: 8px !important;
    line-height: 1 !important;
    color: #fff !important;
  }

  .ec-cartNaviWrap .ec-cartNaviNull {
    top: 60px;
  }
}

/************************************************
 Block_グロナビ・サブメニュー
 *************************************************/
.gNav ul {
  padding-left: 0 !important;
}

ul.gsubnav {
  padding-left: 0 !important;
}

.gsubnav ul {
  padding: 0;
}

/************************************************
 TOPメインビジュアル
 *************************************************/
.welcome_title p {
  padding: 0.6em 0.8em 0.3em;
}

/* 左矢印を内側に入れる */
.slick-prev {
  left: 0 !important; /* 左端から20pxの位置に移動 */
  z-index: 10; /* 画像の下に隠れないようにする */
}

/* 右矢印を内側に入れる */
.slick-next {
  right: 0 !important; /* 右端から20pxの位置に移動 */
  z-index: 10;
}

.guide_box ul {
  list-style: none;
  padding-left: 0 !important;
}

.mainV_underNav_bar {
  height: 60px !important;
  align-content: center;
  padding: 10px 0 !important;
}

.mainV_underNav_bar.fixed {
  height: 40px !important;
  padding: unset !important;
  position: fixed;
}

@media (max-width: 767px) {
  .underNavArea {
    display: none !important;
  }

  .spmenu {
    margin: 0 auto;
    padding: 10px 25px;
    display: block;
    overflow: hidden;
    background: #e8ede6;
  }

  .spmenu ul {
    display: table;
    width: 100%;
  }

  .spmenu ul li:first-child {
    border-left: 1px solid #b8c0a9;
  }

  .spmenu ul li {
    border-right: 1px solid #b8c0a9;
    display: table-cell;
    width: 25%;
    box-sizing: border-box;
    height: 60px;
    vertical-align: middle;
    position: relative;
  }

  .spmenu ul li a {
    font-size: 13px;
    display: block;
    height: 100%;
    line-height: 17px;
    padding: 5px 0;
  }

  .spmenu ul li a span {
    background-repeat: no-repeat;
    background-position: 0px center;
    background-size: 16px auto;
    text-align: center;
    display: block;
    color: #333;
  }

  .spmenu ul li:after {
    position: absolute;
    display: block;
    content: '';
    height: 6px;
    width: 6px;
    border-top: 1px solid #436302;
    border-right: 1px solid #436302;
    transform: rotate(45deg) translateX(-50%);
    left: 50%;
    bottom: 3px;
  }
}

@media screen and (min-width: 768px) {
  .spmenu {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .head_mV_area {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  .ec-sliderRole.mainV_block {
    width: 100% !important;
    margin-bottom: 20px;
  }

  .ec-sliderRole {
    padding: 0;
  }

  #main_vi .slick-prev,
  #main_vi .slick-next {
    height: 40px;
    width: 25px;
  }

  .main_visual img {
    width: 100% !important;
    height: auto !important;
  }

  .login_info_btn {
    display: none;

    width: 100% !important;
    margin-left: 0 !important;
  }

  .mainV_underNav_bar {
    height: 85px !important;
  }

  .underNav ul {
    padding-left: 1rem;
  }

  .underNav ul li a {
    background-repeat: no-repeat;
    background-position: 0px center;
    background-size: 16px auto;
    text-align: center;
    display: block;
    color: #333;
  }
  .underNav ul li:after {
    position: absolute;
    display: block;
    content: '';
    height: 6px;
    width: 6px;
    border-top: 1px solid #436302;
    border-right: 1px solid #436302;
    transform: rotate(45deg) translateX(-50%);
    margin-left: 3em;
    bottom: 60px;
  }
  .underNav ul {
    list-style: none;
  }
  .underNav ul li {
    width: 8.5% !important;
  }

  .mainV_underNav_bar {
    width: 100%;
    height: 85px;
    background: #e8ede6;
  }

  .underNav.fixed ul li {
    /* line-height: 30px; */
    height: 50px;
  }
}

/************************************************
 Block_今月のおすすめ
 *************************************************/
.month_recom {
  background: rgba(0, 0, 0, 0) url(../img/top/bg_season_recommend.jpg) no-repeat
    scroll 0 0 / cover;
  display: inline-block;
  width: 100%;
  padding: 30px 0;
  border-top: 4px #f3f4f0 solid;
}

#ranking h2 {
  text-align: center;
  font-family: 'yumindb', serif;
  font-size: 28px;
  color: #4f6129;
  font-size: 1.8em;
  margin-bottom: 1em;
}

.recom_product_li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1em;
  padding: 0;
  margin: 0;
  list-style: none;
}

.ec-shelfGrid__item {
  box-sizing: border-box;
  text-align: center;
}

.month_recom li {
  padding: 0 !important;
}

.month_recom dt {
  padding-bottom: 1em;
}

.month_recom .product_img {
  height: 185px;
  margin-bottom: 0.7em;
}

@media screen and (min-width: 768px) {
  /* 各商品数に対応する幅 */
  .product-count-4 .ec-shelfGrid__item {
    width: calc(25% - 0.75em);
  }
  .product-count-3 .ec-shelfGrid__item {
    width: calc(33.3333% - 0.75em);
  }
  .product-count-2 .ec-shelfGrid__item {
    width: calc(50% - 0.75em);
  }
  .product-count-1 .ec-shelfGrid__item {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  #ranking {
    background: #fdf7e6;
  }

  .recom_product_li {
    gap: 0.05em;
  }

  .recom_product_li .ec-shelfGrid__item {
    width: 49%;
    margin-bottom: 0;
  }

  #ranking h2 {
    font-size: 1.5em;
    margin-top: 0 !important;
  }

  .news_comment {
    padding: 0.8em;
    border-radius: 30px;
    position: relative;
    border-color: #fff;
    height: 220px !important;
  }

  .news_comment p {
    font-size: 13px;
    padding: 15px 0 0 0;
  }

  .p_list {
    text-align: center;
  }

  .onlin_shop_sp img {
    width: 90% !important;
  }
}

/************************************************
 Block_新規会員登録バナー
 *************************************************/
@media screen and (min-width: 768px) {
  .member_registration_sp {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  #free_bannerrea div {
    width: 100% !important;
  }

  .member_registration_pc {
    display: none;
  }
}

/************************************************
 Block_日野製薬製品
 *************************************************/
.content_center {
  text-align: center;
}

#medicine_search2 ul {
  list-style: none;
}

.product_list01 {
  list-style: none;
}

.product_main {
  padding: 0 !important;
}

.product_list02 {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}

.top_tag01 {
  position: absolute;
  right: 4px;
  bottom: 70px;
}
.top_tag02 {
  position: absolute;
  right: 4px;
  bottom: 50px;
}

@media screen and (max-width: 767px) {
  #hino_product .ttl {
    margin-bottom: 30px;
    margin-top: 20px;
  }

  #medicine_search2 {
    background: #fbfbfb;
  }
  .ttl img {
    width: 204px;
  }

  #medicine_search2 h2 {
    color: #436201;
    font-size: 16px;
    margin: 0 0 7px;
  }
  .top_tag01 {
    position: absolute;
    right: 4px;
    bottom: 158px;
  }

  .top_tag02 {
    position: absolute;
    right: 4px;
    bottom: 40px;
  }

  .p-search-form select {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  .searchMedicine button {
    width: 18%;
    background: #f46a04;
    border: none;
    border-bottom-right-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    -webkit-border-top-right-radius: 8px;
    border-top-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -webkit-border-top-right-radius: 8px;
    /* padding: 12px; */
  }

  #hino_product .box .product_list01 li {
    width: 100%;
    margin-bottom: 10px;
    text-align: center;
  }

  #hino_product .box .product_list01 li.no01,
  #hino_product .box .product_list01 li.no02,
  #hino_product .box .product_list01 li.no03 {
    width: 100%;
  }

  #hino_product .box .product_list01 a p {
    font-size: 14px;
    padding: 12px 0;
  }

  #hino_product .box .product_list02 {
    overflow: hidden;
    padding-top: 1px;
  }

  #hino_product .box .product_list02 li {
    float: left;
    width: 48%;
    text-align: center;
    vertical-align: top;
    font-size: 16px;
  }
  #hino_product .box .product_list02 li:nth-child(even) {
    float: right;
  }

  #hino_product .box .product_list02 li p {
    font-size: 12px;
  }
  .no03,
  .no09 {
    margin-right: 6px !important;
  }
}

/************************************************
 Block_お悩みから探す・一般用医薬品の区分で探す
 *************************************************/

#medicine_search ul {
  /* padding-left: 0; */
  list-style: none;
}

.trs_sp ul {
  list-style: none;
}

/* チェックボックス自体を隠す */
#trouble_search .accordion-check {
  display: none !important;
}

/* メニューの初期状態：強制的に非表示にする */
#trouble_search .accordion-content {
  display: none; /* 一旦 display で制御します */
  list-style: none;
  padding: 0 1rem 1rem;
}

/* チェックが入った時：強制的に表示する */
#trouble_search .accordion-check:checked + .accordion-content {
  display: block !important;
}

@media screen and (min-width: 768px) {
  #trouble_search li {
    border-right: 1px solid #83942e;
    width: auto;
    box-sizing: border-box;
    padding: 15px 0;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
  }

  #trouble_search li:first-child {
    border-left: 1px solid #83942e;
  }
}

@media screen and (max-width: 767px) {
  #trouble_search h2 {
    color: #4f6129;
    font-family: 'yumindb', serif;
    font-size: 22px;
    border-bottom: 1px solid #83942e;
    border-top: 1px solid #83942e;
    padding: 4% 4% 4% 12%;
  }

  .boxCont_pc ul {
    padding: 0 8%;
  }

  .boxCont_pc ul li {
    width: 100%;
    padding: 0 8%;
    text-align: left !important;
  }

  .boxCont_pc ul li a {
    text-align: left !important;
  }

  #trouble_search li {
    border-bottom: 1px solid #83942e;
    padding: 2% 4% 2% 10%;
  }

  #trouble_search li span {
    background: rgba(0, 0, 0, 0) url(../img/icon/icon_sub_arrow.png) no-repeat
      scroll left center / 18px auto;
    padding: 2% 0 2% 8%;
  }

  #search_area h2 {
    color: #436201;
    font-size: 16px;
    margin-bottom: 10px;
  }

  /* 親要素の横並びを解除して縦並びにする */
  #search_area .boxCont {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 10px !important; /* 左右に少し余白 */
    box-sizing: border-box !important;
  }

  /* 各検索ブロックを横幅いっぱいにする */
  #search_area .box {
    width: 100% !important;
    margin-bottom: 5px !important;
  }

  /* セレクトボックスとボタンの親要素を整える */
  .searchMedicine > div,
  .searchTrouble > div {
    display: flex !important;
    width: 100% !important;
  }

  /* セレクトボックスを可能な限り広げる */
  .searchMedicine select,
  .searchTrouble select {
    flex: 1 !important;
    min-width: 0 !important; /* はみ出し防止 */
  }

  .search {
    /* 1. テキストを透明にする（これで文字だけ消えます） */
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;

    /* 2. アイコンを表示するための設定（ここから下は既存の設定に合わせて調整） */
    display: inline-block !important;
    vertical-align: middle;

    /* アイコンが消えないように背景設定を明示 */
    /* すでに別で設定している場合は、以下のwidth/heightをアイコンサイズに合わせるだけでOK */
    width: 25px;
    height: 25px;
  }
}

/************************************************
 Block_伝承薬事典/1000円以下商品/期間限定特集バナー
 *************************************************/
@media screen and (max-width: 767px) {
  /* 1. リスト全体の横並びを解除、または中央揃えを有効にする */
  #ancNews.big_banner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
    list-style: none !important;
  }

  .big_banner li img {
    width: 100%;
  }
}

/************************************************
 Block_フリーバナーエリア_送料画像1
 *************************************************/
@media screen and (min-width: 768px) {
  .shipping_fee_sp {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .shipping_fee_pc {
    display: none;
  }
}

/************************************************
 Block_フリーバナーエリア_送料画像2
 *************************************************/
@media screen and (max-width: 767px) {
  #benner_box {
    display: none;
  }

  .big_banner li {
    margin-bottom: 14px !important;
    text-align: center;
  }
}

/************************************************
 Block_【PC_共通】お問合せエリア 
 *************************************************/
#info_area ul {
  list-style: none;
  /* padding-left: 0; */
}

/************************************************
 Block_フッター 
 *************************************************/
#ftNavPc {
  padding-top: 0.5em;
}

@media screen and (max-width: 767px) {
  /* 1. 非表示設定 */
  .user_guide,
  .viewPc {
    display: none !important;
  }

  /* 2. 親要素の設定をリセット（ここが重要！） */
  #info_area .boxCont {
    display: block !important; /* Flexboxを解除して縦並びにする */
    width: 92% !important;
    padding: 0 !important;
    margin: 0 4% !important;
  }

  /* 3. お客様相談室（support）を強制的に表示させる */
  .support {
    display: block !important; /* 万が一消えていた時のために表示 */
    width: 100% !important; /* 横幅いっぱい */
    margin: 10px 0 !important; /* 上下に少し余白 */
    padding: 15px !important; /* 内側に余白 */
    box-sizing: border-box !important;
    text-align: center !important; /* 文字を中央寄せに */
  }

  /* 4. support内の中身を整える */
  .support p {
    margin: 5px 0 !important;
  }
  .support .num {
    font-size: 1.5rem !important;
    font-weight: bold;
  }

  #gFooter #js-pagetop.pagetop {
    position: fixed;
    top: inherit;
    right: 10px;
    bottom: 76px;
    left: inherit;
    z-index: 99;
  }

  #gFooter #js-pagetop.pagetop a {
    width: 49px;
    height: 49px;
    background: rgba(51, 51, 51, 0.7);
  }
}

/************************************************
 Block_カテゴリから探す 
 *************************************************/
.block_body .level {
  list-style: none;
}

@media screen and (min-width: 768px) {
  #category_area .block_body li {
    border: 1px solid #83942e;
  }
}

@media screen and (max-width: 767px) {
  #category_area .boxCont {
    width: 100%;
    padding: 0;
  }

  #category_area h2 {
    font-size: 21px;
  }
  #category_area .block_body ul {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #707b36;
    /* border-left: 1px solid #707b36;  */
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #category_area .block_body li {
    width: 50%;
    box-sizing: border-box;
    margin-right: 0;
    margin-bottom: 0;
  }
}

/************************************************
 全商品一覧 / カテゴリ一覧 
 *************************************************/
/**** カテゴリページイメージ画像 ****/
.cat_title_flex {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 360px;
  margin: 0;
  text-align: center;
}

.cat_banner_img {
  max-width: 100%;
  height: auto;
  display: block;
}

.cat_title_text {
  color: #ffffff;
  font-family:
    '游明朝体', 'Yu Mincho', YuMincho, 'ヒラギノ明朝 ProN W3',
    'Hiragino Mincho ProN', 'MS P明朝', 'MS 明朝', serif;
  font-weight: 800;
  font-size: 3rem;
  display: inline-block;
  padding: 0 10px;
}

@media screen and (min-width: 768px) {
  .sp_only {
    display: none !important;
  }
  [id^='cat_mainImg'] {
    height: 360px !important;
  }
  #cat_mainImg01 {
    background-image: url(/shop/html/template/hino/assets/img/category/bg_mainimg02_pc.png)
      center center / cover no-repeat !important;
  }
  #cat_mainImg08,
  #cat_mainImg43,
  #cat_mainImg48,
  #cat_mainImg61 {
    height: 360px;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  #cat_mainImg08 {
    background: #f3f6f3
      url(/shop/html/template/hino/assets/img/category/tit_08_pc_bg.png) center
      center / cover no-repeat !important;
  }

  #cat_mainImg43 {
    background: #f3f6f3
      url(/shop/html/template/hino/assets/img/category/tit_43_pc_bg.png) center
      center / cover no-repeat !important;
  }

  #cat_mainImg44 {
    background-image: url(/shop/html/template/hino/assets/img/category/tit_44_pc_bg.jpg);
  }

  #cat_mainImg47 {
    background-image: url(/static/products/category/bg_mainimg012020_pc.png);
  }

  #cat_mainImg48 {
    background: #f3f6f3
      url(/shop/html/template/hino/assets/img/category/tit_48_pc_bg.jpg) center
      center / cover no-repeat !important;
  }

  #cat_mainImg61 {
    background: #f3f6f3
      url(/shop/html/template/hino/assets/img/category/tit_61_pc_bg.jpg) center
      center / cover no-repeat !important;
  }

  #cat_mainImg62 {
    background-image: url(/static/products/category/bg_mainimg62_pc.jpg);
  }
}

@media screen and (max-width: 767px) {
  #cat_mainImg01 h1 {
    width: 320px;
    margin: 0 auto;
    text-align: center;
  }

  #cat_mainImg01 img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
  }
  .cat_title_flex {
    display: block !important;
    min-height: 0 !important;
    text-align: center !important;
    line-height: 0 !important;
  }

  .cat_title_text {
    padding: 100px 10px;
    font-size: 1.8rem;
  }

  .pc_only {
    display: none !important;
  }
  .sp_only {
    display: inline-block !important;
    width: 100% !important;
    height: auto !important;
    vertical-align: bottom !important;
  }

  #cat_mainImg01 {
    height: 150px;
    overflow: hidden;
    background-image: url(/shop/html/template/hino/assets/img/category/bg_mainimg02_sp.png)
      center center / cover no-repeat !important;
  }

  /* #cat_mainImg08,
  #cat_mainImg43,
  #cat_mainImg48,
  #cat_mainImg61 {
    display: block !important;
    height: auto !important;
    padding-top: 0 !important;
    position: static !important;
    margin: 0 !important;
    width: 100% !important;
    overflow: visible !important;
  } */

  #cat_mainImg08,
  /* #cat_mainImg43, */
  #cat_mainImg48,
  #cat_mainImg61 {
    display: block !important;
    height: 200px !important; /* または padding-top: 50% !important; など */
    width: 100% !important;
    background-size: cover;
    background-position: center;
  }

  #cat_mainImg08 {
    background: url(/shop/html/template/hino/assets/img/category/tit_08_sp.png)
      center center / cover no-repeat !important;
  }

  #cat_mainImg43 {
    height: 218px;
    background: url(/shop/html/template/hino/assets/img/category/tit_43_sp.png)
      center center / cover no-repeat !important;
  }

  #cat_mainImg44 {
    height: 200px;
    background: url(/shop/html/template/hino/assets/img/category/tit_44_sp_bg.jpg)
      center top no-repeat !important;
  }
  #cat_mainImg47 {
    background-image: url(/static/products/category/bg_mainimg012020_sp.png);
  }

  #cat_mainImg48 {
    background: url(/shop/html/template/hino/assets/img/category/tit_48_sp.png)
      center center / cover no-repeat !important;
  }

  #cat_mainImg61 {
    background: url(/shop/html/template/hino/assets/img/category/tit_61_sp.png)
      center center / cover no-repeat !important;
  }

  #cat_mainImg62 {
    background-image: url(/static/products/category/bg_mainimg62_sp.jpg);
  }

  .sp_small_icon {
    width: auto !important;
    height: 25px !important;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    top: 60px;
  }
}
/**** カテゴリページイメージ画像ここまで ****/

.ec-searchnavRole__infos .ec-searchnavRole__actions,
.product_desc,
.product_sel,
.itiran_cart {
  display: none;
}

.list_item li {
  position: relative;
  /* border: 1px solid #e4e4e4; */
  width: 244px;
  height: 270px;
  box-sizing: border-box;
  margin-bottom: 6em !important;
}

.list_item li img {
  border: 1px solid #e4e4e4;
  /* padding: 5px; */
}

.list_item li p {
  font-size: 0.9em;
}

.list_item li p.product_name {
  text-decoration: underline;
  margin-top: 1.5em;
  color: #436201;
}

.list_price {
  margin-top: 0.5em;
  text-align: left;
}

.tag-1 {
  background-color: #1f7035;
}
.tag-2 {
  background-color: #e3164df1;
}
.tag-3 {
  background-color: #27b66cf9;
}
.tag-4 {
  background-color: #e37507;
}
.tag-5 {
  background-color: #03a9f4;
}
.tag-6 {
  background-color: #4caf50;
}
.tag-7 {
  background-color: #ff9800;
}
.tag-8 {
  background-color: #47829d;
}
.tag-9 {
  background-color: #c424f1;
}
.tag-10 {
  background-color: #3bbd91;
}
.tag-11 {
  background-color: #f0251b;
}
.tag-12 {
  background-color: #f9e507fd;
  color: #ff0000 !important;
}
.tag-13 {
  background-color: #036687ef;
}
.tag-14 {
  background-color: #24e403;
}
.tag-15 {
  background-color: #dfd005;
}
.tag-16 {
  background-color: #6cabc4e3;
}
.tag-17 {
  background-color: #ce6376;
}
.tag-18 {
  background-color: #40944c;
}

/* 商品一覧ページ・商品画像にタグを配置 */
.ec-shelfGrid__item-image {
  position: relative;
}

.product-tags {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.product-tag02 {
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 3px;
}

div.sub_status {
  margin-top: 0.7em;
}
.sub_status {
  display: inline-block;
  background: #f2f1ee;
  padding: 2% 3%;
  white-space: nowrap;
}

/* id=62 */
.sinsyu_block {
  margin: 0 auto 2em;
  text-align: center;
  width: 1040px;
  padding: 0;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}

.sinsyu_menu {
  /* float: left; */
  background-color: #4f6129;
  width: 30%;
  height: 50px;
  margin-right: 5%;
  padding: 0 30px;
}

.sinsyu_menu:last-child {
  margin-right: 0;
}

.menu_s {
  height: 50px;
  line-height: 50px;
  color: #fff;
  font-weight: normal;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0.16em;
  display: block;
}

/* ページネーション */
.ec-pager {
  font-size: 1.4em;
  background-color: #f8faf7;
  text-align: center;
  padding: 0;
}

.ec-pager .ec-pager__item a {
  font-size: 90%;
}

.ec-pagerRole {
  margin: 2em 0;
}

@media screen and (min-width: 768px) {
  .ec-layoutRole__main .ec-searchnavRole,
  .ec-layoutRole__main .ec-shelfRole {
    width: 1040px;
    padding: 0;
  }
}

@media screen and (max-width: 767px) {
  .ec-searchnavRole {
    margin-top: 5px;
  }
  .ec-searchnavRole__topicpath .ec-topicpath {
    border-top: none;
  }
  .list_item li {
    margin-bottom: 0 !important;
  }
  .list_item li p.product_name {
    margin-top: 0.7em;
  }

  .product-tag02 {
    font-size: 0.8em;
    padding: 2px 4px;
    letter-spacing: -2px;
  }

  .ec-searchnavRole .ec-searchnavRole__infos {
    margin-bottom: 0;
  }

  .sinsyu_block {
    flex-direction: column; /* 縦並びに変更 */
    width: 100%; /* 親要素の幅を画面いっぱいに */
    align-items: center; /* 子要素を中央に寄せる */
  }

  .sinsyu_menu {
    width: 90%; /* 横幅を画面に合わせる（お好みで調整） */
    margin-right: 0; /* 右マージンをリセット */
    margin-bottom: 10px; /* 代わりに下の要素との間隔を作る */
  }

  .sinsyu_menu:last-child {
    margin-bottom: 0; /* 一番下の要素の余白は消す */
  }
}

/************************************************
 Block_お客様の声
 *************************************************/
#product_review_area h2 {
  color: #436201;
  text-align: center;
  font-size: 28px;
  border-bottom: none;
  margin: 40px 0;
}

#reviewContent p {
  text-align: center;
}

#product_review_area .review_list {
  padding: 0 40px !important;
}

.recommend_comment {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #f7f0dd;
  padding: 20px 30px;
  text-align: left;
}

#product_review_area .ec-inlineBtn--action {
  background-color: #ffffff;
  border-color: #4f6129;
  font-weight: normal;
}

#product_review_area .review_date,
#product_review_area .recommend_comment {
  text-align: left;
}
.review_btn a:hover {
  color: #4f6129;
}
/* クリック時（フォーカス時）の赤い枠線を消す */
.review_btn a:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* もしアクティブ状態（クリックした瞬間）にも出る場合はこちら */
.review_btn a:active {
  outline: none !important;
  box-shadow: none !important;
}

@media screen and (max-width: 767px) {
  #product_review_area h2 {
    margin: 0 0 20px;
    font-size: 25px;
  }
  .reviewContent {
    text-align: center;
  }
  .about_review {
    text-align: right;
    margin-top: 1.5em;
    font-size: 14px;
  }

  .review_btn {
    width: 100%;
  }

  .ec-text-ac {
    margin-bottom: 2em;
  }
}

/************************************************
ログイン画面 
 *************************************************/
#login_mypage .ec-login {
  background: #fff;
}

.ec-login__actions .ec-blockBtn--cancel {
  background: #eba40b;
  border: 0;
  height: 50px;
}

@media screen and (max-width: 767px) {
  .setpassLink a {
    display: inline-block;
    margin: 0 0 20px;
    font-size: 13px;
    text-decoration: underline;
  }
  #undercolumn h2.title_bloc {
    margin-top: 4%;
  }
  #login_mypage .ec-login .ec-login__input {
    margin-bottom: 15px;
  }

  .entry_area {
    border: 1px solid #748a03;
    padding: 0 15px;
    margin-bottom: 15px;
  }

  .entry_area .entry_login_area {
    padding: 0;
    margin-bottom: 15px;
  }
  .entry_login_area .ec-login {
    background: #fff;
    padding: 15px 0 0;
  }

  .long_customer_area {
    display: none;
  }

  .entry_area .entry_login_area .subtitle {
    padding: 12px 0 5px 0;
    background: #fff;
    color: #4f6129;
    border-bottom: 1px dotted #000;
    margin-bottom: 16px;
    font-weight: bold;
    font-size: 14px;
  }

  .entry_login_area .subtitle::before {
    content: none !important;
    display: none !important;
  }

  .sub02 {
    line-height: 20px !important;
    /* margin-top: 13px !important; */
  }

  .m_detail {
    margin-top: -15px;
  }

  .green_btn a {
    background-color: #4f6129 !important;
  }
}

/************************************************
新規会員登録関連
 *************************************************/
#undercolumn_entry h2.title_bloc {
  margin-top: 0;
}

/* .ec-registerRole {
  padding: 0;
} */

.ec-registerRole .ec-off1Grid .ec-off1Grid__cell {
  width: 100%;
  margin-left: 0;
}

dl.hidden {
  display: none;
}

.merit_area {
  margin-bottom: 5em;
}

#agree_page {
  margin-top: 3em;
  display: flex;
  flex-direction: column; /* 子要素を縦並びにする */
  align-items: center; /* 水平方向の中央揃え */
  text-align: center;
}

#agree_page h3 {
  font-size: 22px;
  color: #4f6129;
}

#agree_page .common_headline1_ {
  margin: 15px 0;
}

@media screen and (max-width: 767px) {
  .ec-registerRole .title_bloc span.beven,
  .ec-pageHeader .title_bloc span.beven {
    font-size: 21px;
  }
}

/*********** 登録確認 ***********/
.ec-off1Grid__cell p {
  margin-bottom: 1em;
}
.ec-pageHeader h1 {
  border-bottom: none;
  border-top: none;
  margin: 0 0 25px;
}

.ec_reg #complete_area {
  margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  .ec_reg {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .ec_reg02 {
    margin: 30px;
  }
}

/************************************************
パスワードの再発行
 *************************************************/
.ec-off4Grid__cell .ec-blockBtn--action {
  background: #4f6129;
  border: 0;
}

@media screen and (max-width: 767px) {
  .ec-layoutRole__contents .ec-role,
  .ec-layoutRole__contents .ec-forgotRole {
    padding: 0;
  }
}

/************************************************
マイページ関連
 *************************************************/
.cont_under {
  padding-bottom: 5em;
}

.ec-layoutRole__main .ec-off1Grid__cell {
  width: 100%;
  margin-left: 0;
}

.ec-registerCompleteRole.boxCont {
  padding-top: 0;
}

.ec-mypageRole.boxCont {
  padding-bottom: 0;
}

.ec-navlistRole .active a {
  color: inherit;
  text-decoration: underline #de5d50 3px;
  text-underline-offset: 5px;
  background: #faffbd;
}

.ec-withdrawRole__title,
.ec-withdrawConfirmRole__title {
  margin-top: 10px;
}

.ec-off1Grid__cell .ec-addressRole__actions {
  margin-top: 2px;
}

.exclamation {
  text-align: center;
}

@media screen and (max-width: 767px) {
  .ec-withdrawRole {
    margin-top: -80px;
  }
  .conf {
    margin-top: -100px;
  }
  .ec-withdrawRole .ec-withdrawRole__title {
    font-size: 22px;
  }
  .exclamation {
    font-size: 110px;
    text-align: center;
  }

  .exclamation02 {
    font-size: 100px;
    text-align: center;
  }
}

/************************************************
特定商取引法に基づく表記
 *************************************************/
#undercolumn_order .ec-off1Grid .ec-off1Grid__cell {
  width: 100%;
  margin-left: 0;
}
.ec-borderedDefs {
  border-left: 1px solid #e3e0e0; /* 左側の縦線 */
  border-right: 1px solid #e3e0e0;
}
.ec-borderedDefs dl {
  padding: 0;
}
.ec-borderedDefs dt {
  border-left: 1px solid #e3e0e0;
  color: #333;
  font-weight: normal;
  vertical-align: middle;
  padding: 12px;
  background: #e8e8e8;
  border-bottom: 1px solid #e3e0e0;
}

.ec-borderedDefs dd {
  line-height: 1.7;
  margin: 1em;
}

#customer {
  scroll-margin-top: 100px; /* ヘッダーの高さ分を指定 */
}

/************************************************
請求書のPC版の宛名のポジション修正
 *************************************************/

@media (min-width: 767px) {
  /* InvoiceTemplateのモーダルだけ位置調整 */
  #exportOrderModal .modal-dialog {
    margin-top: 13em !important;
    z-index: 2001;
  }
}
/* exportOrderModal の重なり順を強制（PCでの逆転対策） */
#exportOrderModal {
  z-index: 2000 !important;
}
#exportOrderModal .modal-backdrop {
  z-index: 1990 !important;
}
#exportOrderModal .modal-dialog {
  z-index: 2001;
}

/************************************************
 Block_ご利用ガイドメニュー
 *************************************************/

.guideNav {
  margin: 0 -25px 20px;
}

.guideNav .btnCmn02 {
  text-align: left;
}

.guideNav dl .btnCmn02:before {
  right: 14px;
  margin-top: -5px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.guideNav .btnCmn02 span {
  position: relative;
  padding-left: 30px;
}

.guideNav .btnCmn02 span:before {
  position: absolute;
  top: 2px;
  left: 0;
  font-size: 20px;
  /* position: absolute;
  top: 3px;
  left: 0;
  content: '\e920';
  color: #83942e;
  font-size: 24px;
  font-family: hinoseiyaku !important; */
}

.guideNav .btnCmn02 span[class*='calculator']:before,
.guideNav .btnCmn02 span[class*='medal']:before {
  left: 5px;
}
.guideNav .btnCmn02 span[class*='qa'] {
  padding-left: 35px;
}
.guideNav .btnCmn02 span[class*='qa']:before {
  content: '';
  background: url('/img/guide/icon_qa.png') 0 0 no-repeat;
  background-size: 30px auto;
  width: 30px;
  height: 14px;
  display: block;
}

.guideNav dd:not(:last-child) {
  border-bottom: 1px solid #dcdcdc;
}

.guideNav .mod_link01 {
  display: block;
  margin: 0;
  padding: 16px 25px 16px 52px;
  cursor: pointer;
}

.guideNav .mod_link01:before {
  top: 20px;
  left: 25px;
}

.guideNav a {
  text-decoration: underline;
}

#guide main > hr {
  margin: 0 -200%;
  border-bottom: 1px solid #e9e9e9;
}

@media screen and (min-width: 768px) {
  .guideNav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0;
  }
  .guideNav > dl,
  .guideNav > div {
    width: 330px;
    margin: 0 0 25px;
  }
  .guideNav .btnCmn02 {
    width: 330px;
    min-height: 50px;
    padding: 12px 30px 13px 15px;
  }
  .guideNav .btnCmn02:before {
    right: 15px;
  }
  .guideNav dt {
    margin: 0 0 20px;
  }
  .guideNav dd {
    margin: 0 0 12px;
  }
  .guideNav dd:not(:last-child) {
    border-bottom: none;
  }
  .guideNav .mod_link01 {
    display: inline-block;
    margin: 0;
    padding: 0 0 0 22px;
  }
  .guideNav .mod_link01:before {
    top: 9px;
    left: 0;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }
  .guideNav .mod_link01:hover:before {
    left: 2px;
  }
  .guideNav .mod_link01 small {
    font-size: 14px;
    vertical-align: baseline;
  }
  .guideNav .btnCmn02 span[class*='qa']:before {
    margin-top: 2px;
  }
}

@media screen and (max-width: 767px) {
  .guideNav dt {
    margin-bottom: 0.5em;
  }
  .guideNav dt.transition {
    margin-bottom: 1.5em;
  }
  .guideNav dd {
    margin-bottom: 0;
  }
  .guideNav .mod_link01 {
    padding: 10px 25px 10px 48px;
  }
  .guideNav .mod_link01:before {
    top: 24px;
    left: 25px;
  }
  .btnCmn02 {
    padding: 13px 40px;
  }
}
/************************************************
 ご注文手続き
 *************************************************/
.ec-selects .ec-select__delivery {
  margin-right: 30px;
}
/* 1. お届け日・お届け時間の親要素を横並びに */
.ec-select.ec-select__delivery,
.ec-select.ec-select__time {
  /* display: flex !important; */
  align-items: flex-start; /* 上揃え */
  margin-bottom: 30px; /* 項目間の余白 */
}

/* 2. ラベル（左側）の幅を一定にする */
.ec-select label {
  width: 120px; /* ラベルの幅。お好みで調整してください */
  flex-shrink: 0; /* 縮まないように固定 */
  margin-bottom: 0;
  padding-top: 5px;
  font-weight: bold;
}

/* 3. 右側グループ（セレクトボックス＋注釈）を縦に並べる */
.ec-select__group {
  display: flex;
  flex-direction: column; /* 中身を縦に並べる */
  flex-grow: 1;
}

/* 4. セレクトボックスの調整 */
.ec-select__group select {
  display: block !important; /* inline-blockを解除 */
  width: 200px !important; /* セレクトボックスの幅を固定 */
  margin-bottom: 10px; /* 下の注釈との間隔 */
}

/* 5. 注釈テキスト */
.ec-select-com {
  margin: 0 !important;
  font-size: 12px;
  line-height: 1.7;
  color: #333;
}

.ec-select__group .ec-select-com {
  font-size: 80%;
  margin-top: 0.8em;
  line-height: 1.5em;
}

.please_select {
  font-weight: bold;
  margin: 3.2em 0 1em;
  margin-bottom: 20px;
  border-bottom: 1px dotted #ccc;
  padding-bottom: 0.4em;
}
.ec-radio .payment_sel {
  display: flex;
  align-items: flex-start;
  padding: 15px 0; /* 上下の余白を調整 */
  border-top: 1px solid #ececec; /* 区切り線の色と太さ */
}

/* 最後の項目の下の線だけ消したい場合 */
.payment_sel:first-of-type {
  border-top: none;
}

.payment_radio_part label {
  margin-right: 0;
}
.ec-orderPayment .ec-radio input {
  margin-bottom: 0;
  margin-top: 3.5px;
}

.payment_rule {
  padding-left: 1.8em;
  padding: 1.2em;
  margin-bottom: 1em;
  font-size: 90%;
  background-color: #f6f6f6;
  width: 100%;
}

.payment_rule img {
  width: 35%;
  margin-bottom: 1em;
}

/* トリガー全体を横いっぱいに広げ、両端に配置 */
.payment_toggle_trigger {
  display: flex !important;
  justify-content: space-between; /* テキストを左、アイコンを右端へ */
  align-items: flex-start; /* テキストが複数行でもアイコン位置を上に固定 */
  width: 95%; /* 赤枠の位置まで広げる */
  cursor: pointer;
}

/* テキスト部分 */
.payment_toggle_trigger span:first-child {
  flex: 1; /* テキストエリアを最大化 */
  padding-right: 20px; /* 右端アイコンとの余白 */
  line-height: 1.5;
}

/* 右端のマーク（赤枠の位置に固定） */
.toggle-icon {
  display: block;
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0; /* テキストが長くても潰れないよう固定 */
  margin-top: 5px; /* 1行目の高さに合わせる */
}

/* V字マークのデザイン */
.toggle-icon::after {
  content: '';
  position: absolute;
  top: 30%; /* 垂直位置の微調整 */
  right: 15px; /* 赤枠内の位置調整 */
  width: 8px;
  height: 8px;
  border-bottom: 2px solid #666; /* マークの太さと色 */
  border-right: 2px solid #666; /* マークの太さと色 */
  transform: rotate(45deg); /* 初期状態：下向き(V字) */
  transition: transform 0.3s; /* 回転を滑らかにする */
}

/* 【重要】開いた時（activeクラス）のマーク：上向きに変更 */
.tit-toggle.active .toggle-icon::after {
  transform: rotate(-135deg); /* 上向き(山型)に回転 */
  top: 50%; /* 回転時のズレを微調整 */
}

.coupon_accBtn {
  position: relative;
  width: 350px;
  margin-top: 14px;
}

.coupon_accBtn .ec-inlineBtn {
  background-color: #d8e3c0;
  display: inline-block;
  width: 25em;
  color: #4f6129;
  padding: 16px 20px;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  margin: 0.3em auto;
}

.coupon_accBtn::before {
  position: absolute;
  top: 50%;
  right: -30px;
  z-index: 3;
  width: 10px;
  height: 10px;
  margin-top: -8px;
  border-top: 1px solid #4f6129;
  border-right: 1px solid #4f6129;
  content: '';
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  transition: all 0.4s ease;
}

.use_points {
  background-color: #f6f6f6;
  padding: 20px;
  border-radius: 4px;
}

.point-error-area {
  color: #eb4e4e; /* 明るめの赤 */
  font-size: 0.9em;
  margin-top: 5px;
}

.point-form-area input {
  padding: 0.8em 0.8em 0.6em;
}

@media screen and (max-width: 767px) {
  .payment_toggle_trigger {
    width: 92%;
  }
  .coupon_accBtn .ec-inlineBtn {
    width: 100%;
  }
  .coupon_accBtn .ec-inlineBtn {
    width: 100%;
  }
}
/************************************************
 その他
 *************************************************/

figure.img img {
  width: 38%;
}

/* syo*/
/* 親要素：横並びの設定 */
.ec-pageHeader {
  display: flex !important; /* 強制的にFlexを有効化 */
  justify-content: space-between; /* 両端に配置 */
  align-items: flex-end; /* 文字の「底」を揃える（一番綺麗に見えます） */
  flex-wrap: nowrap; /* 折り返さず一行に収める */
  border-bottom: 1px solid #ccc; /* 下線がある場合の調整用 */
  padding-bottom: 10px; /* 下線との余白 */
}

/* ショッピングカートの文字 */
.ec-pageHeader h1 {
  margin: 0 !important; /* デフォルトの上下マージンを完全に排除 */
  padding: 0;
  line-height: 1.1; /* 行の高さを詰め、上下の余計な隙間を消す */
  font-size: 26px;
}

/* ご利用ガイドのリスト（親） */
.ec-pageHeader .user_guide {
  display: block !important; /* スマホで消えるのを防ぐ */
  margin: 0 !important;
  padding: 0;
  list-style: none;
  flex-shrink: 0; /* 幅が狭まっても潰れないようにする */
}

/* ボタンのデザイン調整 */
.ec-pageHeader .user_guide .gide {
  background-color: #5d6b45; /* 背景色（緑） */
  padding: 2px 12px;
  border-radius: 3px;
}

.ec-pageHeader .user_guide .gide a {
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  display: block;
}

.customh1 li {
  text-align: center;
  box-sizing: border-box;
  /* height:67px; */
  line-height: 42px;
}
.customh1 ul .gide {
  background-image: url(../img/icon/icon_right_arrow3.png);
  background-repeat: no-repeat;
  background-position: right 20px center;
  /* margin-bottom: 20px; */
}

.customh1 ul .gide a {
  position: relative;
  display: block;
  background-color: #57643d;
  color: #fff;
  font-size: 14px;
  z-index: 4;
}

@media screen and (max-width: 767px) {
  .ec-pageHeader h1 {
    font-size: 18px; /* タイトルを少し小さくしてスペースを確保 */
  }

  .ec-pageHeader .user_guide {
    width: auto; /* 10emだと広すぎる場合があるため自動に */
    margin-left: 10px !important;
  }

  .customh1 li {
    line-height: 28px;
  }

  .ec-pageHeader .user_guide .gide a {
    font-size: 10px;
  }

  .ec-radio .ec-paymethodList {
    display: flex !important;
    align-items: flex-start !important;
    width: 100%;
  }
}

/* Chrome, Safari, Edge, Opera 用 */
/* #use_point_input::-webkit-outer-spin-button,
#use_point_input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
} */