﻿@charset "UTF-8";

/* -------------------------
  COMMON
-------------------------  */
:root {
  --color-navy: #003C84;
  --color-blue: #00A0D1;
  --color-lightblue: #D8F0FF;
  --color-red: #CE1032;
}

.btn-grad {
  position: relative;
  color: #FFF;
  text-align: center;
  border-radius: 40px;
  z-index: 1;
  background: linear-gradient(to left, #00c7d9 0%, #0071e2 82.82%, #0067e3 100%);
}
.btn-grad:hover {
  text-decoration: none;
  opacity: 1;
}
.btn-grad:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #00c7d9 0%, #0071e2 82.82%, #0067e3 100%);
  border-radius: 40px;
  z-index: -1;
  opacity: 0;
  transition: .3s ease;
}
.btn-grad:hover:after {
  opacity: 1;
}
.btn-navy {
  position: relative;
  color: #FFF;
  text-align: center;
  border-radius: 40px;
  z-index: 1;
  overflow: hidden;
  background: linear-gradient(to right, #003c84 0%, #205ca5 49.75%, #003c84 100%);
}
.btn-navy:hover {
  text-decoration: none;
  opacity: 1;
}
.btn-navy:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  background: #00A0D1;
  transition: .3s ease;
}
.btn-navy:hover:after {
  opacity: 1;
}
.block-common-title {
  position: relative;
  font-size: 34px;
  line-height: 1.2;
  font-weight: bold;
  padding: 0 0 0 20px;
  border-left: 4px solid;
  border-image: linear-gradient(to bottom, #95e6ff, #00afe4) 1;
}
.swiper:not(.swiper-initialized) .swiper-button-prev,
.swiper:not(.swiper-initialized) .swiper-button-next {
  display: none;
}
.swiper-button-disabled {
  display: none !important;
}

/* -------------------------
  HEADER
-------------------------  */
.block-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #FFF;
  padding: 20px 0 15px;
  border-bottom: 1px solid #CCC;
  z-index: 11;
}
.block-header--inner {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 1480px;
  min-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.block-header-top {
  padding: 0 0 15px;
}
.block-header-search {
  position: relative;
}
.block-header-search form {
  display: flex;
  align-items: center;
  padding: 4px 8px 4px clamp(10px, 0.83vw, 16px);
  border-radius: 4px;
  border: 1px solid #BDBDBD;
}
input.block-header-search--keyword {
  width: 300px;
  border: 0;
  padding: 0;
  font-size: 14px;
  outline: 0;
}
input.block-header-search--keyword:focus {
  outline: 0;
}
.block-header-search--submit {
  width: 80px;
  font-size: 12px;
  text-align: center;
  margin: 0 8px;
  padding: 4px 0;
  background: #FFF;
  border: 1px solid #333;
  border-radius: 30px;
  -webkit-appearance: none;
}
.block-header-search--btn {
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 7px;
  background: var(--color-navy);
  cursor: pointer;
  transition: .3s ease;
}
.block-header-logo02 {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  width: 170px;
}
.block-header-customer {
  font-size: 12px;
  margin: 0 clamp(8px, 0.67vw, 12px) 0 auto;
  text-align: left;
  max-width: 235px
}
.block-header-customer span {
  padding: 0 5px 0 8px;
}
.block-header-customer:has(br) span {
  padding-left: 0;
}
.block-header-link {
  display: flex;
  margin: 0 8px 0 0;
}
.block-header-link li {
  line-height: 1.2;
  border-left: 1px solid #CCC;
}
.block-header-link li a {
  display: inline-block;
  font-size: 12px;
  padding: 0 clamp(10px, 0.83vw, 16px) 1px;
  text-decoration: underline;
}
.block-header-link li a:hover {
  opacity: 1;
  text-decoration: none;
}
a.block-header-login {
  display: block;
  margin: 0 8px 0 0;
  padding: 9px 0;
  color: var(--color-navy);
  font-size: 14px;
  border: 1px solid var(--color-navy);
  text-align: center;
  width: clamp(80px, 6.6vw, 98px);
  border-radius: 40px;
}
a.block-header-entry {
  display: block;
  margin: 0 8px 0 0;
  padding: 9px 0;
  color: #FFF;
  font-size: 14px;
  background: var(--color-navy);
  text-align: center;
  width: clamp(100px, 8.3vw, 114px);
  border-radius: 40px;
}
a.block-header-login:hover,
a.block-header-entry:hover {
  opacity: .8;
  text-decoration: none;
}
.block-header-logo {
  margin: 0 87px 0 0;
}
.block-header-logo img {
  width: 276px;
}
.block-header-globalmenu {
  display: flex;
  gap: clamp(45px, 3.75vw, 80px);
}
.block-header-globalmenu > li > a,
.block-header-globalmenu-category {
  display: inline-block;
  font-weight: bold;
  border-bottom: 2px solid #FFF;
  padding: 15px 0;
}
.block-header-globalmenu > li > a:hover,
.block-header-globalmenu-category:hover,
.block-header-globalmenu-category:has(+.block-gnav-menu:hover) {
  opacity: 1;
  text-decoration: none;
  border-color: #00A0D1;
}
.block-header-globalmenu-category {
  position: relative;
  padding-right: 30px;
  cursor: pointer;
}
.block-header-globalmenu-category:after {
  content: '';
  position: absolute;
  top: 20px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  rotate: 45deg;
  transition: .3s ease;
}
.block-header-globalmenu-category:hover:after,
.block-header-globalmenu-category:has(+.block-gnav-menu:hover):after {
  top: 25px;
  border-color: #00A0D1;
  rotate: 225deg;
}
.block-header-cart {
  position: relative;
  margin-left: auto;
}
.block-header-cart--btn {
  position: relative;
  display: block;
  width: 220px;
  text-align: center;
  border-radius: 40px;
  padding: 12px 0;
}
.block-header-cart--btn span {
  color: #FFF;
  font-weight: bold;
  padding: 0 0 0 30px;
  background: url(../../img/usr/common/icon_cart.png) no-repeat left center / 20px;
}
.block-header-cart--count {
  position: absolute;
  top: -12px;
  right: 0;
  display: none;
  width: 24px;
  height: 24px;
  background: #F8A300;
  border-radius: 50%;
  color: #FFF;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  padding: 2px 0 0;
}
.block-header .cart_to_order_ .btn-buy {
  display: none;
}
.block-header .cart_to_order_ .btn-estimate {
  width: 100%;
  margin: 10px 0 0;
}
.block-header .cart_to_order_ .btn-medium {
  margin: 0;
  padding: 8px 0;
  background: none;
  border: 0;
  width: 100%;
  height: auto;
  color: #FFF;
}
.block-header .cart_to_order_ .btn-medium:hover {
  opacity: 1;
}

/* -------------------------
  FOOTER
-------------------------  */
.block-footer {
  background: #F5F5F5;
  text-align: center;
  padding: 40px 0 20px;
}
.block-footer-link {
  display: flex;
  justify-content: center;
  margin: 0 0 20px;
}
.block-footer-link li {
  position: relative;
  padding: 0 40px;
}
.block-footer-link li:not(:last-child):after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: #CCC;
}
.block-footer-link li a {
  font-size: 14px;
  text-decoration: underline;
}
.block-footer-link li a:hover {
  text-decoration: none;
}
.block-footer-copy {
  color: #858585;
  font-size: 12px;
}

/* -------------------------
  TOP
-------------------------  */
.block-top-mv {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  aspect-ratio: 192/50;
  background: url(../../img/usr/top/mv.jpg) no-repeat center / cover;
}
.block-top-mv--title {
  color: #FFF;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}
.block-top-search {
  position: relative;
  width: 710px;
  padding: 8px 8px 8px 24px;
  border: 1px solid #BDBDBD;
  background: #FFF;
  border-radius: 4px;
}
input.block-top-search--keyword {
  width: 530px;
  border: 0;
  outline: 0;
  padding: 0;
}
input.block-top-search--keyword:focus {
  outline: 0;
}
.block-top-search--submit {
  width: 80px;
  font-size: 12px;
  text-align: center;
  margin: 0 8px 0 auto;
  padding: 4px 0;
  background: #FFF;
  border: 1px solid #333;
  border-radius: 30px;
  -webkit-appearance: none;
}
.block-top-search--btn {
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 7px;
  background: var(--color-navy);
  cursor: pointer;
  transition: .3s ease;
}
.block-top-slider {
  background: #F2F8FF;
  padding: 40px 0;
}
.block-top-slider--inner {
  position: relative;
  max-width: 1480px;
  min-width: 1200px;
  padding: 0 20px;
  margin: 0 auto;
}
.block-top-slider .swiper {
  position: static;
}
.block-top-slider .swiper-slide {
  width: calc((100% - 64px) / 3);
  margin: 0 32px 0 0;
}
.block-top-slider .swiper-slide:last-child {
  margin: 0;
}
.block-top-slider .swiper-slide a {
  display: block;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, .16);
}
.block-top-slider .swiper-slide a:hover {
  opacity: .8;
}
.block-top-slider div[class^="swiper-button-"] {
  width: 40px;
  height: 40px;
}
.block-top-slider .swiper-button-prev {
  left: -45px;
}
.block-top-slider .swiper-button-next {
  right: -45px;
}
.block-top-slider div[class^="swiper-button-"]:after {
  content: '';
  position: absolute;
  top: 14px;
  left: 17px;
  width: 12px;
  height: 12px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
}
.block-top-slider div[class^="swiper-button-"].swiper-button-prev:after {
  rotate: 135deg;
}
.block-top-slider div[class^="swiper-button-"].swiper-button-next:after {
  left: 12px;
  rotate: -45deg;
}
.block-top-catalog {
  padding: 80px 0 0;
  margin: 0 20px;
}
.block-top-catalog--contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 50px;
  width: 100%;
  max-width: 1440px;
  min-width: 1160px;
  height: 410px;
  margin: 0 auto;
  padding: 0 120px;
  background: #003C84 url(../../img/usr/top/img_catalog.png) no-repeat right center;
  border-radius: 16px;
}
.block-top-catalog--title {
  color: #FFF;
  font-size: 34px;
  font-weight: bold;
  padding: 0 0 0 20px;
  border-left: 4px solid;
  border-image: linear-gradient(to bottom, #95e6ff, #00afe4) 1;
}
a.block-top-catalog--btn {
  position: relative;
  display: block;
  width: 268px;
  background: #FFF;
  color: var(--color-navy);
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  border-radius: 30px;
  padding: 17px 0;
}
a.block-top-catalog--btn:hover {
  color: #00A0D1;
  text-decoration: none;
}

/* -------------------------
  一覧
-------------------------  */
.page-category .mainframe_,
.page-event .mainframe_,
.page-genre .mainframe_,
.page-search .mainframe_ {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.page-category .mainframe_ > *:not(.block-list-head):not(.navipage_.top_):not(.navistyle_):not(.navisort_):not(.category_comment_):not(.CategoryStyleP_),
.page-event .mainframe_ > *:not(.block-list-head):not(.navipage_.top_):not(.navistyle_):not(.navisort_),
.page-genre .mainframe_ > *:not(.block-list-head):not(.navipage_.top_):not(.navistyle_):not(.navisort_),
.page-search .mainframe_ > *:not(.block-list-head):not(.navipage_.top_):not(.navistyle_):not(.navisort_) {
  width: 100%;
  order: 10;
}
.page-category .autopagerize_page_element_,
.page-event .autopagerize_page_element_,
.page-genre .autopagerize_page_element_,
.page-search .autopagerize_page_element_ {
  border-top: 1px solid #CCC;
  margin: 12px 0 0;
}
.page-category .block-list-head,
.page-event .block-list-head,
.page-genre .block-list-head,
.page-search .block-list-head {
  width: 100%;
  order: -1;
}
.page-category .category_comment_ {
  width: 100%;
  margin: 30px 0;
}
.page-category .category_comment_.comment2_ {
  order: 1;
}
.page-category .navipage_.top_,
.page-event .navipage_.top_,
.page-genre .navipage_.top_,
.page-search .navipage_.top_ {
  order: 2;
  margin-top: 35px;
}
.page-category .navistyle_,
.page-event .navistyle_,
.page-genre .navistyle_,
.page-search .navistyle_ {
  order: 3;
  margin-top: 35px;
}
.page-category .navisort_,
.page-event .navisort_,
.page-genre .navisort_,
.page-search .navisort_ {
  order: 4;
  margin-top: 35px;
}
.page-category .category_comment_.comment4_ {
  order: 20;
}
.page-category .CategoryStyleP_ {
  order: 30;
}
.page-category .category_comment_.comment5_ {
  order: 40;
}

/* -------------------------
  詳細検索
-------------------------  */
.page-search .message_ {
  margin: 0 0 12px;
}

/* -------------------------
  トピック詳細
-------------------------  */
.topic_title_ {
  font-size: 34px;
  font-weight: bold;
  margin: 0 0 20px;
}
.topiclist_body_ .icon_ img {
  height: 24px;
}
.topiclist_body_ .article_ {
  margin: 40px 0 0;
}
.topiclist_body_ .article_ a {
  color: var(--color-blue);
  text-decoration: underline;
}
.topiclist_body_ .article_ a:hover {
  text-decoration: none;
}

/* -------------------------
  ログアウト
-------------------------  */
.logout_text_ a {
  color: var(--color-blue);
  text-decoration: underline;
}
.logout_text_ a:hover {
  text-decoration: none;
}

/* -------------------------
  パスワード再設定
-------------------------  */
.page-forgotpass .customer_,
.page-forgotpasscomplete .customer_ {
  width: 1000px;
}
.forgotpass_ input {
  width: 100%;
}

/* -------------------------
  新規取引申請
-------------------------  */
.page-bizentry input[name="app_name"],
.page-bizentry input[name="app_name2"],
.page-bizentry input[name="app_kana"],
.page-bizentry input[name="app_kana2"],
.page-bizentry input[name="rep_name"],
.page-bizentry input[name="rep_name2"],
.page-bizentry input[name="rep_kana"],
.page-bizentry input[name="rep_kana2"] {
  margin: 0 10px;
}

/* -------------------------
  得意先会員登録
-------------------------  */
.page-bizuserentry input[name="name"],
.page-bizuserentry input[name="name2"],
.page-bizuserentry input[name="kana"],
.page-bizuserentry input[name="kana2"] {
  margin: 0 10px;
}

/* -------------------------
  配送先一覧
-------------------------  */
.page-order_address .top_box_ .move_button_ {
  color: #FFF;
  background: var(--color-navy);
}
.page-order_address .top_box_ .move_button_:hover {
  background: var(--color-blue);
}
.page-order_address .search-btn {
  color: var(--color-navy);
  border: 1px solid var(--color-navy);
  background: #FFF;
  border-radius: 30px;
  padding: 8px 16px;
  -webkit-appearance: none;
  cursor: pointer;
  transition: .3s ease;
}
.page-order_address .search-btn:hover {
  color: var(--color-blue);
  border-color: var(--color-blue);
}

/* -------------------------
  購入履歴一覧
-------------------------  */
.page-history .customer_ > .submit_ {
  margin-top: 50px;
}

/* -------------------------
  購入履歴詳細
-------------------------  */
.page-historydetail .historydetail_ {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0 50px;
}
.page-historydetail .historydetail_ li {
  width: 300px;
}
.page-historydetail .historydetail_ li a {
  display: block;
  font-size: 18px;
  text-align: center;
}
.page-historydetail .historydetail_ li a.btn-grad {
  color: #FFF;
  font-weight: bold;
  padding: 17px 0;
}
.page-historydetail .historydetail_ li a.btn_register_list_ {
  color: #FFF;
}
.page-historydetail .historydetail_ li a.btn_contact_,
.page-historydetail .historydetail_ li a.btn_cancel_ {
  color: var(--color-navy);
  padding: 17px 0;
}
.page-historydetail .historydetail_ li a.btn_contact_:hover,
.page-historydetail .historydetail_ li a.btn_cancel_:hover {
  color: var(--color-blue);
  text-decoration: none;
}

/* -------------------------
  見積履歴詳細
-------------------------  */
.page-estimatedetail .historydetail_ {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0 50px;
}
.page-estimatedetail .historydetail_ li {
  width: 300px;
}
.page-estimatedetail .historydetail_ li .btn-primary {
  font-size: 18px;
  margin: 0;
  width: 100%;
}
.page-estimatedetail .historydetail_ li a.btn_contact_ {
  display: block;
  color: var(--color-navy);
  font-size: 18px;
  text-align: center;
  width: 100%;
  margin: 0;
}
.page-estimatedetail .historydetail_ li a.btn_contact_:hover {
  color: var(--color-blue);
  text-decoration: none;
}

/* -------------------------
  会員情報変更
-------------------------  */
.page-customer input[name="name"],
.page-customer input[name="name2"],
.page-customer input[name="kana"],
.page-customer input[name="kana2"] {
  margin: 0 10px;
}
.page-customer .message_ a {
  color: var(--color-blue);
  text-decoration: underline;
}
.page-customer .message_ a:hover {
  text-decoration: none;
}

/* -------------------------
  ID変更
-------------------------  */
.page-idchange .idchange_ a {
  color: var(--color-blue);
  text-decoration: underline;
}
.page-idchange .idchange_ a:hover {
  text-decoration: none;
}

/* -------------------------
  会員配送先
-------------------------  */
.page-custdestlist .top_box_ {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-custdestlist .search_box_ .search-btn {
  color: var(--color-navy);
  border: 1px solid var(--color-navy);
  background: #FFF;
  border-radius: 30px;
  padding: 8px 16px;
  -webkit-appearance: none;
  cursor: pointer;
  transition: .3s ease;
}
.page-custdestlist .search_box_ .search-btn:hover {
  color: var(--color-blue);
  border-color: var(--color-blue);
}
.page-custdestlist .top_box_ .move_button_ {
  color: #FFF;
  font-size: 16px;
  background: var(--color-navy);
}
.page-custdestlist .top_box_ .move_button_:hover {
  background: var(--color-blue);
}
.page-custdestlist .navipage_.top_ {
  margin: 30px 0 0;
}
.page-custdestlist .address_item_ .address_change_ a {
  display: inline-block;
  color: var(--color-navy);
  border: 1px solid var(--color-navy);
  border-radius: 40px;
  padding: 8px 16px;
}
.page-custdestlist .address_item_ .address_change_ a:hover {
  opacity: 1;
  text-decoration: none;
  color: var(--color-blue);
  border-color: var(--color-blue);
}

/* -------------------------
  お気に入り
-------------------------  */
.page-bookmark .bookmark_buy_ {
  display: flex;
  gap: 12px;
}
.page-bookmark .add-to-cart-checked {
  border: 0;
  font-size: 16px;
  font-weight: bold;
  border-radius: 40px;
  margin: 0;
  width: 350px;
  height: auto;
  padding: 8px 16px;
}
.page-bookmark .make-group-checked {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  width: 350px;
  height: auto;
  padding: 8px 16px;
}

/* -------------------------
  お気に入りグループ
-------------------------  */
.page-bookmarkgroup .bookmark_ .comment_ {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.page-bookmarkgroup .btn_group_ {
  display: inline-block;
  color: var(--color-navy);
  padding: 8px 16px;
  margin: 0 0 20px;
}
.page-bookmarkgroup .btn_group_:hover {
  color: var(--color-blue);
  text-decoration: none;
}
.page-bookmarkgroup .add-cart-icon {
  display: inline-block;
}
.page-bookmarkgroup .btn_cart_ {
  background: var(--color-navy);
  border-radius: 40px;
  font-size: 16px;
  font-weight: bold;
  padding: 9px 24px;
  margin: 0 10px 0 0;
  transition: .3s ease;
}
.page-bookmarkgroup .btn_cart_:hover {
  background: var(--color-blue);
}
.page-bookmarkgroup .btn_edit_ {
  display: inline-block;
  color: var(--color-navy);
  padding: 8px 12px;
}
.page-bookmarkgroup .btn_edit_:hover {
  color: var(--color-blue);
  text-decoration: none;
}
.page-bookmarkgroup .btn-small {
  margin-left: auto;
  background: none;
}
.page-bookmarkgroup .name_edit_ {
  width: 100%;
}
.page-bookmarkgroup .name_edit_ input[type="text"] {
  margin: 10px 0;
}
.page-bookmarkgroup div[id^="comment_label_"]:not(:empty) {
  font-size: 18px;
  font-weight: bold;
  margin: 8px 0 0;
}
.page-bookmarkgroup .bookmark-group-item-summary {
  padding-left: 0;
}

/* -------------------------
  得意先承認依頼履歴
-------------------------  */
.page-bizapprovallist .order_id_  a {
  color: var(--color-blue);
  text-decoration: underline;
}
.page-bizapprovallist .order_id_  a:hover {
  text-decoration: none;
}

/* -------------------------
  得意先承認依頼履歴詳細
-------------------------  */
.page-bizapprovaldetail ul.approvaldetail_ {
  margin: 30px 0 0;
}
.page-bizapprovaldetail ul.approvaldetail_ li {
  width: 400px;
  margin: 0 auto;
}
.page-bizapprovaldetail ul.approvaldetail_ li a {
  display: block;
  color: var(--color-navy);
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 17px 0;
  border: 1px solid var(--color-navy);
  border-radius: 40px;
}
.page-bizapprovaldetail ul.approvaldetail_ li a:hover {
  color: var(--color-blue);
  border-color: var(--color-blue);
  text-decoration: none;
}
.page-bizapprovaldetail .customer_ > .spandual_ {
  margin-top: -1px;
}

/* -------------------------
  得意先配送先
-------------------------  */
.page-bizdest .search-btn {
  color: var(--color-navy);
  border: 1px solid var(--color-navy);
  background: #FFF;
  border-radius: 30px;
  padding: 8px 16px;
  -webkit-appearance: none;
  cursor: pointer;
  transition: .3s ease;
}
.page-bizdest .search-btn:hover {
  color: var(--color-blue);
  border-color: var(--color-blue);
}

/* -------------------------
  カートリスト
-------------------------  */
.page-precart .date_ {
  text-align: left;
  margin: 0 0 8px;
}
.page-precart .btn_detail_ {
  display: block;
  margin: 0 auto 10px;
  color: var(--color-navy);
  padding: 7px 0;
  text-align: center;
}
.page-precart .btn_detail_:hover {
  color: var(--color-blue);
  border-color: var(--color-blue);
  text-decoration: none;
}
.page-precart .btn_delete_ {
  display: inline-block;
  margin: 10px 0 0;
}

/* -------------------------
  カートリスト詳細
-------------------------  */
.page-precartdetail .formdetail_.method_:has(.rgdt_),
.page-precartdetail .formdetail_.method_:has(.rgdt_) + hr {
  margin: 0;
}
.page-precartdetail .btn_wrapper_ {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.page-precartdetail .btn_cart_ {
  width: 300px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 40px;
  padding: 17px 0;
}
.page-precartdetail .btn_delete_ {
  width: 300px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 40px;
  padding: 17px 0;
  border: 1px solid var(--color-navy);
  text-decoration: none;
}
.page-precartdetail .btn_delete_:hover {
  color: var(--color-blue);
  border-color: var(--color-blue);
}

/* -------------------------
  よく使う支払方法設定
-------------------------  */
.page-defaultmethod .message_ {
  margin: 0 0 12px;
}

/* -------------------------
  メールアドレス変更
-------------------------  */
.page-mailchange .mailchange_ a {
  color: var(--color-blue);
  text-decoration: underline;
}
.page-mailchange .mailchange_ a:hover {
  text-decoration: none;
}

/* -------------------------
  パスワード再設定
-------------------------  */
.page-resetpass .navigation_ {
  margin: 0 0 8px;
}

/* -------------------------
  会員登録
-------------------------  */
.page-entry .formdetail_.customer_ input[name="name"],
.page-entry .formdetail_.customer_ input[name="name2"],
.page-entry .formdetail_.customer_ input[name="kana"],
.page-entry .formdetail_.customer_ input[name="kana2"] {
  margin: 0 8px;
}

/* -------------------------
  得意先会員
-------------------------  */
.page-bizuserlist .bizuserlist_ a {
  color: var(--color-blue);
  text-decoration: underline;
}
.page-bizuserlist .bizuserlist_ a:hover {
  text-decoration: none;
}

/* -------------------------
  得意先会員編集
-------------------------  */
.page-bizuseredit .formdetail_.customer_ input[name="name"],
.page-bizuseredit .formdetail_.customer_ input[name="name2"],
.page-bizuseredit .formdetail_.customer_ input[name="kana"],
.page-bizuseredit .formdetail_.customer_ input[name="kana2"] {
  margin: 0 8px;
}

/* -------------------------
  ご注文内容の入力
-------------------------  */
.page-method .method_box_content_:has(.method_coupon_available) {
  display: flex;
  align-items: center;
}
.page-method .method_box_content_ .method_coupon_available_btn_ {
  display: inline-block;
  color: var(--color-navy);
  padding: 8px 20px;
}
.page-method .method_box_content_ .method_coupon_available_btn_:hover {
  text-decoration: none;
  color: var(--color-blue);
  border-color: var(--color-blue);
}

/* -------------------------
  ご注文内容の確認
-------------------------  */
.page-edi_confirm form#frmSales .formlist_.estimate_ {
  margin-top: 12px;
}

/* -------------------------
  承認依頼履歴
-------------------------  */
.page-approvallist .approvallist_ {
  width: 100%;
}
.page-approvallist .approvallist_ th,
.page-approvallist .approvallist_ td {
  border: 1px solid #BDBDBD;
  padding: 8px 12px;
}
.page-approvallist .approvallist_ th {
  background: #F5F5F5;
  font-weight: bold;
}
.page-approvallist .approvallist_ td a {
  color: var(--color-blue);
  text-decoration: underline;
}
.page-approvallist .approvallist_ td a:hover {
  text-decoration: none;
}

/* -------------------------
  承認依頼履歴詳細
-------------------------  */
.page-approvaldetail .approvaldetail_ a {
  display: block;
  color: var(--color-navy);
  border: 1px solid var(--color-navy);
  text-align: center;
  border-radius: 40px;
  width: 450px;
  font-size: 20px;
  font-weight: bold;
  margin: 32px auto 0;
  padding: 17px 4px;
}
.page-approvaldetail .approvaldetail_ a:hover {
  text-decoration: none;
  color: var(--color-blue);
  border-color: var(--color-blue);
}
.page-approvaldetail div.order_ div.dest_block_ {
  margin: 0;
}
.page-approvaldetail div.order_ div.estimate_block_ {
  margin: 0;
}
.page-approvaldetail div.order_ div.estimate_listframe_ + hr,
.page-approvaldetail div.order_.spandual_ > hr:last-child {
  display: none;
}
.page-approvaldetail .common_headline2_ {
  margin-top: 60px;
}
.page-approvaldetail .spandual_,
.page-approvaldetail .approval_cart_ {
  margin-top: -1px;
}
.page-approvaldetail .order_.spandual_ .comment_ {
  margin: 0 0 12px;
}
.page-approvaldetail .approval_cart_ input[name="refresh.x"] {
  display: inline-block;
  border: 1px solid var(--color-navy);
  border-radius: 40px;
  color: var(--color-navy);
  font-weight: bold;
  padding: 8px 12px;
  text-decoration: none;
}
.page-approvaldetail .approval_cart_ input[name="refresh.x"]:hover {
  color: var(--color-blue);
  border-color: var(--color-blue);
}

/* -------------------------
  承認待ち
-------------------------  */
.page-doapprovallist .order_id_ a {
  color: var(--color-blue);
  text-decoration: underline;
}
.page-doapprovallist .order_id_ a:hover {
  text-decoration: none;
}

/* -------------------------
  承認待ち詳細
-------------------------  */
.page-doapprovaldetail .approval_comment_ {
  margin: 32px 0 0;
}
.page-doapprovaldetail .approvaldetail_ a {
  display: block;
  color: var(--color-navy);
  border: 1px solid var(--color-navy);
  text-align: center;
  border-radius: 40px;
  width: 450px;
  font-size: 20px;
  font-weight: bold;
  margin: 32px auto 0;
  padding: 17px 4px;
}
.page-doapprovaldetail .approvaldetail_ a:hover {
  text-decoration: none;
  color: var(--color-blue);
  border-color: var(--color-blue);
}

/* -------------------------
  ご利用可能クーポン
-------------------------  */
.page-coupon .coupon_ a {
  color: var(--color-blue);
  text-decoration: underline;
}
.page-coupon .coupon_ a:hover {
  text-decoration: none;
}

/* -------------------------
  ご利用ガイド
-------------------------  */
.block-guide {
  width: 1440px;
  margin: 0 auto 60px;
}
.block-guide .sp {
  display: none;
}
.block-guide--title {
  margin: 56px 0;
}
.block-guide--intro {
  margin: 0 0 32px;
}
.block-guide-section:not(:last-child) {
  margin: 0 0 80px;
}
.block-guide-section--title {
  position: relative;
  font-size: 30px;
  font-weight: bold;
  padding: 0 0 15px;
  margin: 0 0 32px;
  border-bottom: 2px solid #CCC;
}
.block-guide-section--title:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 122px;
  height: 2px;
  background: linear-gradient(to left, #95e6ff 0%, #00afe4 100%);
}
.block-guide-section--box:not(:last-child) {
  margin: 0 0 50px;
}
.block-guide-section--text:not(:last-child) {
  margin: 0 0 30px;
}
.block-guide-section a {
  color: var(--color-blue);
  text-decoration: underline;
}
.block-guide-section a:hover {
  text-decoration: none;
}
.block-guide-section--box h3 {
  font-size: 20px;
  font-weight: bold;
  padding: 15px 16px;
  margin: 0 0 30px;
  background: var(--color-lightblue);
}
.block-guide-section--box h4 {
  position: relative;
  font-weight: bold;
  margin: 0 0 4px;
  padding: 0 0 0 26px;
}
.block-guide-section--box h4:before {
  content: '';
  position: absolute;
  top: 6px;
  left: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(#95e6ff 0%, #00afe4 100%);
}
.block-guide-section ol {
  margin: 0;
  padding: 0;
}
.block-guide-section li {
  text-indent: -16px;
  padding: 0 0 0 16px;
  margin: 0;
  list-style: none;
}
.block-guide-section .indent01 li {
  text-indent: -41px;
  padding: 0 0 0 41px;
}
.block-guide .sp {
  display: none;
}

/* -------------------------
  特定商取引法に基づく表記
-------------------------  */
.block-scta {
  width: 1440px;
  margin: 0 auto 60px;
}
.block-scta .sp {
  display: none;
}
.block-scta--title {
  margin: 56px 0;
}
.block-scta--contents {
  border: 1px solid #BDBDBD;
}
.block-scta--contents dl {
  display: flex;
  border-bottom: 1px solid #BDBDBD;
}
.block-scta--contents dl:last-child {
  border: 0;
}
.block-scta--contents dt {
  background: #F5F5F5;
  padding: 16px;
  font-weight: bold;
  border-right: 1px solid #BDBDBD;
  width: 400px;
}
.block-scta--contents dd {
  flex: 1;
  padding: 16px;
}
.block-scta--contents dd a {
  color: var(--color-blue);
  text-decoration: underline;
}
.block-scta--contents dd a:hover {
  text-decoration: none;
}

/* -------------------------
  よくあるご質問
-------------------------  */
.block-faq {
  width: 1440px;
  margin: 0 auto 60px;
}
.block-faq--title {
  margin: 56px 0;
}
.block-faq--intro {
  margin: 0 0 32px;
}
.block-faq--nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin: 0 0 80px;
}
.block-faq--nav li {
  width: 342px;
}
.block-faq--nav a {
  position: relative;
  display: block;
  border: 1px solid var(--color-navy);
  color: var(--color-navy);
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  border-radius: 40px;
  padding: 18px 0;
}
.block-faq--nav a:after {
  content: '';
  position: absolute;
  top: 26px;
  right: 24px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-navy);
  border-bottom: 2px solid var(--color-navy);
  rotate: 45deg;
  transition: .3s ease;
}
.block-faq--nav a:hover {
  color: var(--color-blue);
  border-color: var(--color-blue);
  text-decoration: none;
}
.block-faq--nav a:hover:after {
  border-color: var(--color-blue);
}
.block-faq-section:not(:last-child) {
  margin: 0 0 80px;
}
.block-faq-section--title {
  position: relative;
  font-size: 30px;
  font-weight: bold;
  padding: 0 0 15px;
  margin: 0 0 32px;
  border-bottom: 2px solid #CCC;
}
.block-faq-section--title:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 122px;
  height: 2px;
  background: linear-gradient(to left, #95e6ff 0%, #00afe4 100%);
}
.block-faq-section--box:not(:last-child) {
  margin: 0 0 10px;
}
.block-faq-section--question {
  position: relative;
  background: #F5F5F5;
  padding: 12px 16px 12px 40px;
  border-radius: 4px;
  cursor: pointer;
}
.block-faq-section--question:before {
  content: 'Q.';
  position: absolute;
  top: 10px;
  left: 16px;
  font-size: 18px;
  font-weight: bold;
}
.block-faq-section--answer {
  position: relative;
  display: none;
  margin: 16px 0 24px;
  padding: 0 0 0 40px;
}
.block-faq-section--answer:before {
  content: 'A.';
  position: absolute;
  top: -2px;
  left: 16px;
  font-size: 18px;
  font-weight: bold;
}