/*　　パソコン　　*/

/*　　更新日　2025年6月15日　　*/

/*目次*/
/**********カート周り・システムに依存するもの**************************************/
/**********見出し・装飾**********************************************************/
/**********文字*****************************************************************/
/**********配置・構図***********************************************************/
/**********その他***************************************************************/
/**********flexbox*************************************************************/
/**********吉野さん*************************************************************/
/**********Swiper**************************************************************/
/**********Bootstrapからの引用**************************************************/

/**********カート周り・システムに依存するもの****************************************************/

/*ロゴを買い物かご遷移の画面にて大きくさせない*/
@media screen and (min-width: 768px) {
  .fs-p-logo__image {
    max-height: 48px;
  }
}

/*グループページレイアウト　開始*/

.fs-c-subgroupList {
  display: flex;
}

.fs-c-subgroupList__item {
  position: relative;
}

.fs-c-subgroupList__link {
  display: block;
}

.fs-c-subgroupList__link::after {
  display: none;
}

.fs-c-subgroupList__label {
  color: #3572b0;
  margin-bottom: 1em;
}

.limited {
  background-color: #ff8b6b;
}

.cool {
  background-color: #84d3ff;
}

.freeze {
  background-color: navy;
}

.normal {
  background-color: #e4d655;
}

/* 墨すみ */
.bg-gray-sumi {
  background-color: #595857;
  color: white;
  padding: 5px;
  margin-right: 5px;
}

/* 絹鼠きぬねず */
.bg-gray-kinunezumi {
  background-color: #dddcd6;
  padding: 3px;
  margin-right: 3px;
  border-radius: 5px;
}

.threedays {
  background-color: #ffd0d0;
}

.fourdays {
  background-color: #ffd0d0;
}

.onedays {
  background-color: #ffd0d0;
}

.newicon {
  background: rgb(228, 88, 100);
  border-radius: 50%;
  width: 3em;
  height: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  position: absolute;
  top: 0.5em;
}

@media screen and (min-width: 300px) {
  .fs-c-subgroupList__item {
    flex: 0 0 50%;
  }
}

@media screen and (min-width: 960px) {
  .fs-c-subgroupList__item {
    flex: 0 0 33%;
  }
}

/*グループページレイアウト　終了*/

/*項目選択肢 背景色の変更*/
#fs_ProductDetails .fs-c-productSelection {
  background-color: rgba(255, 255, 153, 0.3);
}

/*項目選択肢 見出しサイズの変更*/
#fs_ProductDetails .fs-c-productSelection__label,
#fs_ProductDetails .fs-c-productSelection__label {
  font-size: 1.5rem;
}

/*項目選択肢 ラジオボタン選択肢文字サイズの変更*/
#fs_ProductDetails .fs-c-radio__radioLabelText {
  font-size: 1.6rem;
}

/*項目選択肢 セレクトボックス選択肢文字サイズの変更*/
#fs_ProductDetails .fs-c-productSelection__selection select {
  font-size: 1.6rem;
}

/*商品名の文字サイズの変更*/
#fs_ProductDetails .fs-c-productNameHeading__name {
  font-size: 3rem;
}

/*　ヘッダー店舗アイコン位置調整　*/
@media screen and (min-width: 768px) {
  .fs-l-header__contents {
    -ms-grid-columns: 42% 16% 7% 35%;
    grid-template-columns: 42% 16% 7% 35%;
  }
}

.shop_ico {
  -ms-grid-row: 1;
  grid-row: 1;
  -ms-grid-column: 3;
  grid-column: 3;
  align-self: end;
  justify-self: end;
  width: 60%;
}

.fs-l-header__utility {
  -ms-grid-column: 4;
  grid-column: 4;
}

/*狭い幅の際に表示されるハンバーガーメニューアイコンの非表示*/
.fs-l-header__drawerOpener {
  display: none;
}

/* 上に戻るボタン開始 */
.pagetop {
  display: none;
  position: fixed;
  bottom: 40px;
  right: 10px;
}

.pagetop a {
  display: block;
  background-color: #ff0000;
  text-align: center;
  color: #ffffff;
  font-size: 40px;
  text-decoration: none;
  padding: 5px 10px;
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}

.pagetop a:hover {
  display: block;
  background-color: #b2d1fb;
  text-align: center;
  color: #fff;
  font-size: 40px;
  text-decoration: none;
  padding: 5px 10px;
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}

/* 上に戻るボタン終了 */

/*PCのTOPのカルーセルパーツの画像サイズの縮小　開始*/
.fs-pt-carousel .slick-slide img {
  width: 600px;
}

/*PCのTOPのカルーセルパーツの画像サイズの縮小　終了*/

/*PCの左固定ナビ　開始*/

#sidebanner1 a {
  display: block;
  background: url("https://mizuha.itembox.design/item/images/gazou8/guide2019.gif") /*通常時画像*/ no-repeat scroll 0 0;
  width: 100px;
  /*画像幅*/
  height: 100px;
  /*画像高さ*/
  text-indent: -9999px;
  position: fixed;
  left: 0px;
  top: 150px;
}

#sidebanner1 a:hover {
  display: block;
  background: url("https://mizuha.itembox.design/item/images/gazou8/guide2019.gif") /*マウスオーバー時画像*/ no-repeat scroll 0 0;
  width: 100px;
  /*画像幅*/
  height: 100px;
  /*画像高さ*/
  text-indent: -9999px;
  position: fixed;
  left: 0px;
  top: 150px;
}

#sidebanner2 a {
  display: block;
  background: url("https://mizuha.itembox.design/item/images/gazou8/list2019.gif") /*通常時画像*/ no-repeat scroll 0 0;
  width: 100px;
  /*画像幅*/
  height: 100px;
  /*画像高さ*/
  text-indent: -9999px;
  position: fixed;
  left: 0px;
  top: 250px;
}

#sidebanner2 a:hover {
  display: block;
  background: url("https://mizuha.itembox.design/item/images/gazou8/list2019.gif") /*マウスオーバー時画像*/ no-repeat scroll 0 0;
  width: 100px;
  /*画像幅*/
  height: 100px;
  /*画像高さ*/
  text-indent: -9999px;
  position: fixed;
  left: 0px;
  top: 250px;
}

/*PCの左固定ナビ　終了*/

/* 商品一覧ページの税込価格フォントサイズ変更 */
.fs-body-category .fs-c-productPrice__addon {
  font-size: 1.4rem;
}

/* カートボタンの赤いバッジの位置の調整 */
button.btn.btn-warning.fs-p-headerNavigation__viewCartButton__label.btn-lg {
  position: relative;
}

/* カートボタンの赤いバッジの大きさの調整 */
.fs-p-cartItemNumber {
  font-size: 1.7rem;
  top: -10px;
  right: 0;
}

/* カート内のご注文手続きに進みますの文字の大きさの変更 */
.fs-c-purchaseHere__message {
  font-size: 1.7rem;
}

.c-button--primary {
  font-size: 1.5rem;
}

/* カート内のご注文手続きの背景色の変更 　会員登録無し*/
.fs-c-button--secondary {
  font-size: 2rem;
  background: #e2041b;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.c-button--secondary {
  font-size: 1.5rem;
}

/* カートボタンの変更　会員登録有り*/
.fs-c-button--primary {
  font-size: 2rem;
  background: #e2041b;
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/*PCの右固定ナビ　開始*/
#sidebanner3 a {
  display: block;
  background: url("https://mizuha.itembox.design/item/images/others/jumpcart3.png") /*通常時画像*/ no-repeat scroll 0 0;
  width: 150px;
  /*画像幅*/
  height: 100px;
  /*画像高さ*/
  text-indent: -9999px;
  position: fixed;
  right: 0px;
  top: 500px;
}

/*PCの右固定ナビ　終了*/

/*PCの横並びflexbox　開始*/
/* 親要素(コンテナ) */
.flex-container {
  display: flex;
}

/* 子要素(アイテム) */
.flex-item {
  /*margin: 10px auto;
        box-sizing: border-box;*/
  padding: 5px 5px;
  justify-content: center;
}

/*PCの横並びflexbox　終了*/

/*カートボタン押した後の明細下の送料無料計算の文章*/
.fs-c-cartDiscountInfo__info {
  font-size: 2rem;
}

/*カートボタン押した後の明細下のショッピングを続けるの文章　変更ボタン*/
/*変更ボタン　2025年1月20日→2025年6月7日一旦中止→2025年6月9日再開*/
.fs-c-button--standard {
  font-size: 1.5rem;
  background-color: #f4dda5;
}

/*注文完了画面での到着日指定の変更ボタンの背景色　2025年1月21日*/
.fs-c-checkout-shippingDetail__deliveryDetail {
  background: #f8f4e6;
}

/*商品グループページ＝分類ページの次のページの表示の文字を大きくする*/
.fs-c-pagination {
  font-size: 3rem;
}

/*会員情報をヘッダーに表示*/
.fs-l-header__welcomeMsg,
.fs-l-header__welcomeMsg.is-ready {
  display: block;
}

/*会員情報置換文字を利用したログイン・ログアウト表示*/
.logout.my-false {
  display: none;
}

.login.my-true {
  display: none;
}

.regist.my-true {
  display: none;
}

/*商品ページの商品画像のサブ画像のサイズ調整*/
.fs-c-productThumbnail__image {
  flex-basis: 150px;
  min-width: 150px;
}

/*すべてのレビューを見るのボタン化*/

.fs-c-productReview__allReviews {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: white !important;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #d29836;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 2rem;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/*商品ページの下のパン屑リストの位置をそろえる*/
.fs-c-breadcrumb {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
}

/*カートボタン下のお届け日の表示の文字を大きくする*/
.fs-c-estimatedDeliveryDate {
  font-size: 1.5rem;
}

/*定価に取消線を入れる*/
.fs-c-productPrice--listed .fs-c-price {
  text-decoration: line-through;
}

/*詳細指定項目欄の言葉の変更　2025年1月24日*/
/*使わなくなったのでなコメントアウトした　2025年3月13日*/
/* .fs-c-checkout-deliveryScheduleSetting__additionalInfo 
{ font-size: 0;}.fs-c-checkout-deliveryScheduleSetting__additionalInfo:before { content: 'お店への通信欄'; font-size: 16px;} */

/*詳細指定項目欄の言葉の変更　2025年1月29日*/
/*使わなくなったのでなコメントアウトした　2025年3月13日*/
/* .fs-c-checkout-shippingDetail__deliveryInstructions 
{ font-size: 0;}.fs-c-checkout-shippingDetail__deliveryInstructions:before { content: 'お店への通信欄'; font-size: 16px;} */

/*お届け日指定　時間帯指定の文字の変更　2025年1月29日*/
.fs-c-checkout-shippingDetail__deliveryDetailPreview {
  font-weight: bold;
  color: brown;
  font-size: 1.8rem;
}

/*マイページの退会をボタンに変更　2025年5月12日*/
/*FSに相談する*/
/* .fs-c-string--label {
  width: 100%;
  text-align: center;
  font-size: 16px;
  border-radius: 5px;
  border: #000 1px solid;
  color: #000;
  text-decoration: none;
  letter-spacing: 1px;
  display: block;
  padding: 8px 0;
  background-color: #fff;
} */

/* 配布code02 通信欄の拡大、クリック可能範囲拡大の記述CSS(P.28) */
.fs-c-inputInformation__field {
  margin-bottom: 0;
}
#fs-communicationInfo-container .fs-c-checkout-previewAndEdit__info {
  min-height: 200px;
}
.fs-c-checkout-communicationInfo .fs-c-button--change--small.fs-c-button--standard {
  position: relative;
}
.fs-c-checkout-communicationInfo .fs-c-button--change--small.fs-c-button--standard::before {
  content: "";
  display: inline-block;
  position: absolute;
  cursor: pointer;
  height: 200px;
  right: 0;
}
@media screen and (min-width: 600px) {
  .fs-c-checkout-communicationInfo .fs-c-button--change--small.fs-c-button--standard::before {
    max-width: 750px;
    top: 50%;
    transform: translateY(-50%);
  }
}
@media screen and (min-width: 1051px) {
  .fs-c-checkout-communicationInfo .fs-c-button--change--small.fs-c-button--standard::before {
    width: 46vw;
  }
}
@media screen and (min-width: 768px) and (max-width: 1050px) {
  .fs-c-checkout-communicationInfo .fs-c-button--change--small.fs-c-button--standard::before {
    width: 56vw;
  }
}
@media screen and (min-width: 600px) and (max-width: 767px) {
  .fs-c-checkout-communicationInfo .fs-c-button--change--small.fs-c-button--standard::before {
    width: 94vw;
  }
}
@media screen and (max-width: 599px) {
  .fs-c-checkout-communicationInfo .fs-c-button--change--small.fs-c-button--standard::before {
    max-width: 580px;
    width: 87vw;
    bottom: calc(100% + 20px);
  }
}

/* 配布code03 */
/* 配送送料機能upgrade版を使用している店舗様はこちら */
/* 2025年6月9日再配布 */
.fs-body-checkout .fs-c-checkout-shippingDetail .fs-c-checkout-shippingDetail__deliveryDetail {
  grid-template-columns: 1fr !important;
}
.fs-body-checkout .fs-c-checkout-shippingDetail .fs-c-checkout-shippingDetail__button {
  grid-column: 1 !important;
}
.fs-body-checkout .fs-c-checkout-shippingDetail .fs-c-button--change--small {
  background: #fff !important;
  border: 1px solid #000;
  color: #000;
  padding: 15px 0px;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}
.fs-body-checkout .fs-c-checkout-shippingDetail .fs-c-button__label {
  font-size: 0;
}
.fs-body-checkout .fs-c-checkout-shippingDetail .fs-c-button__label::before {
  content: "お届け希望日／時間を設定する";
  font-size: 16px;
}
@media screen and (max-width: 767px) {
  .fs-body-checkout .fs-c-checkout-shippingDetail .fs-c-checkout-shippingDetail__deliveryDetail {
    display: block;
  }
  .fs-body-checkout .fs-c-checkout-shippingDetail .fs-c-checkout-shippingDetail__button {
    margin-top: 20px;
  }
}

/**********見出し・装飾***************************************************************************/
/* 背景色　うす緑色 */
/*DWのみ*/
.bg-light2 {
  background-color: #cef7b7 !important;
}

/* 背景色　白色 */
.bg-light3 {
  background-color: #ffffff !important;
}

/* 背景色　肌色 */
.bg-light5 {
  background-color: #debca6 !important;
}

/* 背景色　うす茶色 */
.bg-lightbrown {
  background-color: #977167 !important;
}

/* ナビゲーションの背景色を緑色の画像に変える */
.bg-greenimg {
  background-image: url(https://mizuha.itembox.design/item/images/top/bg_bar_img_04.jpg) !important;
}

/* ナビゲーションの背景色を緑色の画像に変える */
.bg-redimg {
  background-image: url(https://mizuha.itembox.design/item/images/top/bg_bar_img_02.jpg) !important;
}

/* ナビゲーションの背景色を水色の画像に変える */
.bg-blueimg {
  background-image: url(https://mizuha.itembox.design/item/images/top/bg_bar_img.jpg) !important;
}

/* ナビゲーションの背景色を水色の画像に変える */
.bg-blue2img {
  background-image: url(https://mizuha.itembox.design/item/images/top/bg_bar_img_05.jpg) !important;
}

/* 背景色その4*/
.bg-img04 {
  background-image: url(https://mizuha.itembox.design/item/images/material/pattern04.jpg) !important;
}

/* 背景色その5*/
.bg-img05 {
  background-image: url(https://mizuha.itembox.design/item/images/material/pattern05.jpg) !important;
}

.period-notice {
  font-size: 15pt;
  background-color: white;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  border-width: 2px;
  border-style: solid;
  border-color: red;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}

/**********文字*******************************************************************************************/
/* 本文の文章２ */
.lead2 {
  font-size: 1.2rem;
  font-weight: 300;
}

/* hタグの文字の大きさ */
.display-5 {
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1.2;
}

/* 商品ページ　本文　2020年3月20日　 */
.lead3 {
  font-size: 12pt;
  margin-left: auto;
  margin-right: auto;
  width: 800px;
}

/* 枠に実線　黒色 */
.frameborder-black {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

/* 見出し　左に線＋塗り */
.heading101 {
  padding: 0.4em 0.5em;
  /*文字の上下 左右の余白*/
  color: #494949;
  /*文字色*/
  background: #fffaf4;
  /*背景色*/
  border-left: solid 5px #ffaf58;
  /*左線*/
  border-bottom: solid 3px #d7d7d7;
  /*下線*/
  font-size: 16pt;
}

/* 見出し　左に線＋塗り */
.heading1 {
  padding: 0.5em;
  /*文字周りの余白*/
  color: #494949;
  /*文字色*/
  background: #ffffff;
  /*背景色*/
  border-left: solid 5px #541a10;
  /*左線（実線 太さ 色）*/
}

/* 見出し　左に線＋塗り */
.heading2 {
  padding: 1em;
  /*文字周りの余白*/
  color: #494949;
  /*文字色*/
  background: #ffffff;
  /*背景色*/
  border-left: solid 5px #3fa9f5;
  /*左線（実線 太さ 色）*/
}

/* 見出し　左に線＋塗り */
.heading3 {
  padding: 1em;
  /*文字周りの余白*/
  color: #494949;
  /*文字色*/
  background: #fffacd;
  /*背景色*/
  border-left: solid 10px #541a10;
  /*左線（実線 太さ 色）*/
}

/* 商品ページ　見出し1　2020年3月20日　 */
.heading4 {
  font-size: 18pt;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: maroon;
  font-weight: bold;
}

/* 商品ページ　見出し2　2020年3月20日　 */
.heading5 {
  text-decoration: underline;
  text-decoration-color: maroon;
}

/* 商品ページ　見出し2　2020年3月20日　 */
.heading5 {
  text-decoration: underline;
  text-decoration-color: maroon;
}

/* 商品ページ　見出し2　2020年3月20日　 */
.heading6 {
  font-size: 18pt;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-bottom-color: #fccfc9;
  font-weight: bold;
}

/* 商品ページ　見出し2　2020年3月20日　 */
.heading7 {
  padding: 0.5em;
  /*文字周りの余白*/
  color: #494949;
  /*文字色*/
  background: linear-gradient(transparent 30%, pink 70%);
  /*背景色*/
}

/* 見出し　左に線＋塗り　緑色*/
/* 2021年9月10日*/
.heading8 {
  padding: 0.5em;
  /*文字周りの余白*/
  color: #000;
  /*文字色*/
  background: #f2f2b0;
  /*背景色*/
  border-left: solid 5px #69821b;
  /*左線（実線 太さ 色）*/
}

/* 商品ページ　上部　商品名の文字の装飾　2020年9月16日16時28分　 */
.headingtitle1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  /*font-family: "見出ミンMA1","Midashi Min MA1" !important;*/
  font-family: serif !important;
  font-weight: bold;
}

/* 試験　商品ページ　上部　商品名の文字の装飾　2020年9月17日10時47分　 */
.headingtitle2 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  font-family: "見出ミンMA1", "Midashi Min MA1" !important;
  /*font-family: serif !important;*/
  font-weight: bold;
}

/* PCトップページ　キャプションの装飾　緑色の文字色と緑色の下線　 2022年4月3日*/
.heading-top1 {
  position: relative;
  font-size: 26px;
  text-align: center;
  color: #228b22;
  border-bottom: 1px solid #228b22;
  padding-bottom: 5px;
  margin-bottom: 30px;
}

/* 文字の下線の下半分に黄色 */
.under {
  border-bottom: double 6px orange;
}

/* NEWマーク */

.gl-new {
  position: absolute;
  top: 5px;
  left: 5px;
}

/* テーブルの罫線を強く表示する */
.table-bordered2 {
  border: 2px solid #111111;
}

/* PCヘッダー上線 */
.border-top2 {
  border-top: 1px solid #000 !important;
}

/* PCヘッダー下線 */
.border-bottom2 {
  border-bottom: 1px solid #000 !important;
}

/*********** 立体感のあるボタン　開始 ************/
.button05 a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 1em 2em;
  width: 300px;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  background-color: #cccccc;
  box-shadow: 0 5px 0 #aaaaaa;
  transition: 0.3s;
}

.button05 a::after {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  transform: rotate(45deg);
}

.button05 a:hover {
  transform: translateY(3px);
  text-decoration: none;
  box-shadow: 0 2px 0 #aaaaaa;
}

.button28 a {
  display: block;
  position: relative;
  margin: 0 auto;
  padding: 1em 2em 1em 50px;
  width: 300px;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, #2285b1 0px, #2285b1 30px, #aaa 30px, #aaa 100%);
  border-image-slice: 1;
  transition: 0.3s;
}

.button28 a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #2285b1;
  transition: 0.3s;
  opacity: 0;
}

.button28 a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%) rotate(45deg);
  width: 5px;
  height: 5px;
  border-top: 2px solid #2285b1;

  border-right: 2px solid #2285b1;
}

.button28 a:hover {
  text-decoration: none;
  background-color: #cccccc;
}

.button28 a:hover::before {
  opacity: 1;
}

.button28 a:hover::after {
  border-top: 2px solid #f2f2f2;
  border-right: 2px solid #f2f2f2;
}

/*********** 立体感のあるボタン　終了 ************/

/*********** ボタン　枠線と矢印のボタン　開始 2022年4月4日(月)************/
.button06 a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 1em 2em;
  width: 300px;
  /*color: #2285b1;*/
  color: #000;
  font-size: 18px;
  font-weight: 700;
  border: 2px solid #000;
  /*border: 2px solid #2285b1;*/
}

.button06 a::after {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 3px solid #000;
  border-right: 3px solid #000;
  /*border-top: 3px solid #2285b1;
        border-right: 3px solid #2285b1;*/
  transform: rotate(45deg);
}

.button06 a:hover {
  color: #333333;
  text-decoration: none;
  /*background-color: #a0c4d3;*/
  background-color: #c7e9ba;
}

.button06 a:hover::after {
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
}

/*********** ボタン　枠線と矢印のボタン　終了 2022年4月4日(月)************/

/*********** ボタン　緑色　開始 ************/
.btn2,
a.btn2,
button.btn2 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

.btn2--green,
a.btn2--green {
  color: #fff;
  background-color: #007b43;
}

.btn2--green:hover,
a.btn2--green:hover {
  color: #fff;
  background: #007b43;
}

/*********** ボタン　緑色　終了 ************/

/*********************************************配置・構図*********************************************************************/

/*@media screen and (max-width: 1130px){
    .gl-new {
        position: absolute;
        top: 5px;
        left: 5px;
        width: 30px;
        height: auto;
        }
        }*/

.fixed-top2 {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
}

.fixed-top3 {
  top: 0;
  right: 0;
  left: 0;
}

/* コンテナー3 */
.container3 {
  background: #ffffff;
}

/* コンテナー4 */
.container4 {
  background: #fce3ca;
}

/* コンテナー5 */
.container5 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container5 {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container5 {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container5 {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container5 {
    max-width: 1140px;
  }
}

/* マージン　トップ　4rem */
.mt-6,
.my-6 {
  margin-top: 4rem !important;
}

/* マージン　トップ　5rem */
.mt-7,
.my-7 {
  margin-top: 5rem !important;
}

/* 下寄せ */
.bottom-text {
  position: absolute;
  bottom: 0;
}

/*****画像を丸抜き　2022年4月30日***********/
image_circle {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  object-position: 0px 0px;
}

/*****タイル表示　アルバム表示　開始***********/
.wrapbox {
  display: flex;
  flex-wrap: wrap;
}

.itembox {
  padding: 5px;
  width: 23%;
  background-color: #fff;
}

.itembox:not(:nth-child(3n + 3)) {
  margin-right: 1%;
}

.itembox:nth-child(n + 5) {
  margin-top: 30px;
}

@media not all and (min-width: 768px) {
  .itembox {
    width: 100%;
  }

  .itembox:not(:nth-child(4n + 4)) {
    margin-right: 0;
  }

  .itembox:nth-child(n + 3) {
    margin-top: 30px;
  }
}

/*****タイル表示　アルバム表示　終了***********/

/********** 感想文　開始 **********/
.containerpc1 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.containersp1 {
  display: flex;
}

.framepc {
  border: 5px solid #d0af4c;
  flex-basis: 100%;
  padding: 30px;
  /* 要素の余白を指定する(上下左右) */
  margin: 5px;
  /* ボックス外側余白を指定する */
}

.framesp {
  border: 2px solid #d0af4c;
  flex-basis: 100%;
  padding: 10px;
  /* 要素の余白を指定する(上下左右) */
  margin: 5px;
  /* ボックス外側余白を指定する */
}

/*********** 感想文　終了 ************/

.haba80 {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.haba95 {
  margin-left: auto;
  margin-right: auto;
  width: 95%;
}

/*原材料表記のテーブルのレスポンシブ対応　2025年6月15日*/
.container-material {
  display: flex;
  flex-wrap: wrap; /* PC表示時に折り返すように設定 */
  gap: 1rem; /* アイテム間の隙間 */
  padding: 1rem;
}
.item-material {
  background-color: #fff;
  padding: 1rem;
  border: 1px solid #fff;
  box-sizing: border-box; /* アイテムの幅計算にpaddingとborderを含める */
  flex-basis: 100%; /* スマホでは1カラム */
}
/* PC表示 (例: 768px以上) */
@media (min-width: 768px) {
  .item-material {
    flex-basis: calc((100% - 2rem) / 3); /* 3カラム (2つのgap(各1rem)を考慮) */
  }
}
/*原材料表記のテーブルのレスポンシブ対応　2025年6月15日*/


/*テーブルの装飾　2025年6月15日*/
table {
  border-collapse: collapse;
}

/* 上下5px・左右10pxの余白*/
table th {
  padding: 5px 10px;
}

/* 上下左右15pxの余白*/
table td {
  padding: 10px;
}

/*テーブルの装飾　2025年6月15日*/





/*******************************************************その他*******************************************************************************/

/**イベントのバナー　バレンタインシール、ホワイトデーシール、母の日シール、父の日シールのバナー　パソコンとスマホで横幅を変更する　2025年5月12日***/
.event-banner {
  width: 100%; /* スマホ表示 (デフォルト) */
  /* mx-autoクラスにより中央寄せされます */
}

/* PC表示 (画面幅768px以上の場合) */
@media (min-width: 768px) {
  .event-banner {
    width: 75%;
  }
}
/**イベントのバナー　バレンタインシール、ホワイトデーシール、母の日シール、父の日シールのバナー　パソコンとスマホで横幅を変更する　2025年5月12日***/





/**********flexbox*******************************************************************************/

ul.box {
  display: flex;
  /* 要素をFlexコンテナとして定義する */
  padding: 0;
  /* 要素の余白を指定する(上下左右) */
  /* background-color: #ffffff; */
  /* 背景の色を指定する #aaaaaa*/
  list-style: none;
  /* リストのスタイルを無効にする */
}

ul.box2 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  /* 要素をFlexコンテナとして定義する */
  padding: 0;
  /* 要素の余白を指定する(上下左右) */
  list-style: none;
  /* リストのスタイルを無効にする */
}

ul.box3 {
  display: flex;
  flex-direction: row;
  width: 100%;
  /* 要素をFlexコンテナとして定義する */
  padding: 0;
  /* 要素の余白を指定する(上下左右) */
  list-style: none;
  /* リストのスタイルを無効にする */
}

li.box {
  padding: 0px;
  /* 要素の余白を指定する(上下左右) */
  margin: 5px;
  /* ボックス外側余白を指定する */
  /* background-color: #ffffff; */
  /* 背景の色を指定する #31a9ee*/
}

.flex-item05 {
  flex-basis: 5%;
  /* flexアイテムの幅を割合で指定 */
}

.flex-item10 {
  flex-basis: 10%;
  /* flexアイテムの幅を割合で指定 */
}

.flex-item15 {
  flex-basis: 15%;
  /* flexアイテムの幅を割合で指定 */
}

.flex-item20 {
  flex-basis: 20%;
  /* flexアイテムの幅を割合で指定 */
}

.flex-item25 {
  flex-basis: 25%;
  /* flexアイテムの幅を割合で指定 */
}

.flex-item30 {
  flex-basis: 30%;
  /* flexアイテムの幅を割合で指定 */
}

.flex-item33 {
  flex-basis: 33%;
  /* flexアイテムの幅を割合で指定 */
}

.flex-item35 {
  flex-basis: 35%;
  /* flexアイテムの幅を割合で指定 */
}

.flex-item40 {
  flex-basis: 40%;
  /* flexアイテムの幅を割合で指定 */
}

.flex-item45 {
  flex-basis: 45%;
  /* flexアイテムの幅を割合で指定 */
}

.flex-item50 {
  flex-basis: 50%;
  /* flexアイテムの幅を割合で指定 */
}

.flex-item55 {
  flex-basis: 55%;
  /* flexアイテムの幅を割合で指定 */
}

.flex-item60 {
  flex-basis: 60%;
  /* flexアイテムの幅を割合で指定 */
}

.flex-item70 {
  flex-basis: 70%;
  /* flexアイテムの幅を割合で指定 */
}

.flex-item80 {
  flex-basis: 80%;
  /* flexアイテムの幅を割合で指定 */
}

.flex-item90 {
  flex-basis: 90%;
  /* flexアイテムの幅を割合で指定 */
}

.flex-item100 {
  flex-basis: 100%;
  /* flexアイテムの幅を割合で指定 */
}

.flex-itemauto {
  flex-basis: auto;
  /* flexアイテムの幅を自動で調整 */
}

.flex-navi {
  display: flex;
  width: 100%;
  background-color: #aaa;

  /*並び順*/
  /*
        flex-start：左寄せ（デフォルト）
        flex-end：右寄せ
        center： 中央寄せ
        space-between：残り余白の均等割り 
        space-around：左右余白 ＋ 均等割り
        */
  justify-content: space-around;
}

/* Flexboxの大きさに追従
         ※画像の元サイズ(= 100%)が上限 */
/* 幅もしくは高さを最大100%に設定、もう一方はauto */
/*img .box{
        max-width: 100%;
        height: auto;
        }*/

/*画像を横に2つ並べる場合*/
.flexbanner2 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  /* リストのスタイルを無効にする */
  padding: 0;
}

.flexbanner2 li {
  width: calc(100% / 2);
  /*←画像を横に2つ並べる場合*/
  padding: 0 5px;
  /*←画像の左右に5pxの余白を入れる場合*/
  box-sizing: border-box;
}

.flexbanner2 li img {
  max-width: 100%;
  /*画像のはみだしを防ぐ*/
  height: auto;
  /*画像の縦横比を維持 */
}

/*画像を横に3つ並べる場合*/
.flexbanner3 {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  /* リストのスタイルを無効にする */
  padding: 0;
}

.flexbanner3 li {
  width: calc(100% / 3);
  /*←画像を横に3つ並べる場合*/
  padding: 0 5px;
  /*←画像の左右に5pxの余白を入れる場合*/
  box-sizing: border-box;
}

.flexbanner3 li img {
  max-width: 100%;
  /*画像のはみだしを防ぐ*/
  height: auto;
  /*画像の縦横比を維持 */
  border: solid 1px #ccc;
  /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}

/*画像を横に4つ並べる場合　2022年4月3日*/
.flexbanner4 {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  /* リストのスタイルを無効にする */
  padding: 0;
}

.flexbanner4 li {
  width: calc(100% / 4);
  /*←画像を横に3つ並べる場合*/
  padding: 0 5px;
  /*←画像の左右に5pxの余白を入れる場合*/
  box-sizing: border-box;
}

.flexbanner4 li img {
  max-width: 100%;
  /*画像のはみだしを防ぐ*/
  height: auto;
  /*画像の縦横比を維持 */
  border: solid 1px #ccc;
  /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}

/*画像を横に5つ並べる場合　2022年4月8日*/
.flexbanner5 {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  /* リストのスタイルを無効にする */
  padding: 0;
}

.flexbanner5 li {
  width: calc(100% / 5);
  /*←画像を横に3つ並べる場合*/
  padding: 0 5px;
  /*←画像の左右に5pxの余白を入れる場合*/
  box-sizing: border-box;
}

.flexbanner5 li img {
  max-width: 100%;
  /*画像のはみだしを防ぐ*/
  height: auto;
  /*画像の縦横比を維持 */
  border: solid 1px #ccc;
  /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}

/*画像を横に6つ並べる場合　2022年4月8日*/
.flexbanner6 {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  /* リストのスタイルを無効にする */
  padding: 0;
}

.flexbanner6 li {
  width: calc(100% / 6);
  /*←画像を横に3つ並べる場合*/
  padding: 0 5px;
  /*←画像の左右に5pxの余白を入れる場合*/
  box-sizing: border-box;
}

.flexbanner6 li img {
  max-width: 100%;
  /*画像のはみだしを防ぐ*/
  height: auto;
  /*画像の縦横比を維持 */
  border: solid 1px #ccc;
  /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}

/*画像を横に7つ並べる場合　2022年4月8日*/
.flexbanner7 {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  /* リストのスタイルを無効にする */
  padding: 0;
}

.flexbanner7 li {
  width: calc(100% / 7);
  /*←画像を横に3つ並べる場合*/
  padding: 0 5px;
  /*←画像の左右に5pxの余白を入れる場合*/
  box-sizing: border-box;
}

.flexbanner7 li img {
  max-width: 100%;
  /*画像のはみだしを防ぐ*/
  height: auto;
  /*画像の縦横比を維持 */
  border: solid 1px #ccc;
  /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}

/*画像を横に8つ並べる場合　2022年4月8日*/
.flexbanner8 {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  /* リストのスタイルを無効にする */
  padding: 0;
}

.flexbanner8 li {
  width: calc(100% / 8);
  /*←画像を横に3つ並べる場合*/
  padding: 0 5px;
  /*←画像の左右に5pxの余白を入れる場合*/
  box-sizing: border-box;
}

.flexbanner8 li img {
  max-width: 100%;
  /*画像のはみだしを防ぐ*/
  height: auto;
  /*画像の縦横比を維持 */
  /*border: solid 1px #ccc;*/
  /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}

/*画像を横に9つ並べる場合　2022年4月29日*/
.flexbanner9 {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  /* リストのスタイルを無効にする */
  padding: 0;
}

.flexbanner9 li {
  width: calc(100% / 9);
  /*←画像を横に3つ並べる場合*/
  padding: 0 5px;
  /*←画像の左右に5pxの余白を入れる場合*/
  box-sizing: border-box;
}

.flexbanner9 li img {
  max-width: 100%;
  /*画像のはみだしを防ぐ*/
  height: auto;
  /*画像の縦横比を維持 */
  border: solid 1px #ccc;
  /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}

/*********** 背景色付きのテキスト1カラム ************/
.containerpc2 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background-color: #fff1cf;
}

.containersp2 {
  display: flex;
}

.framepc2 {
  border: 5px solid #fff1cf;
  flex-basis: 90%;
  padding: 30px;
  /* 要素の余白を指定する(上下左右) */
  margin: 5px;
  /* ボックス外側余白を指定する */
}

.framesp2 {
  border: 2px solid #fff1cf;
  flex-basis: 100%;
  padding: 10px;
  /* 要素の余白を指定する(上下左右) */
  margin: 5px;
  /* ボックス外側余白を指定する */
}

/*テキストや画像を横に2つ並べる場合*/
.flextext {
  display: flex;
  justify-content: space-between;
}

.flextext .img {
  width: 50%;
  background: #3d9fb1;
}

.flextext .txt {
  width: 50%;
}

/*テキストを横に2つ並べる場合*/
.container_mediainfo {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.item_1 {
  background-color: #fff;
}

.item_2 {
  background-color: #fff;
}





/**********吉野さん*************************************************************/

/* ui-reset
========================================================================================================
*/

body {
  color: #000;
  /* font-family: 'Noto Sans JP', sans-serif; */
  font-family: "Noto Serif JP", serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6;
  padding: 0;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
div,
ol,
ul,
li,
dl,
dt,
dd,
figure,
p {
  box-sizing: border-box;
  list-style: none;
  padding: 0;
  margin: 0;
}

main.fs-l-main {
  padding: 0;
}

/*---- パンくずの幅調整 ----*/
nav.fs-c-breadcrumb {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 共通　common
  ========================================================================================================
  */
/*---- title ----*/

h1,
h2,
h3,
h4 {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
}

h2.title01 {
  font-size: 3.2rem;
  text-align: center;
}

h2.title02 {
  font-size: 3.2rem;
  text-align: center;
  margin: 0 auto 50px auto;
}

h2.title02 span {
  display: inline-block;
  position: relative;
  padding: 0 0 20px 0;
}

h2.title02 span:before {
  content: "";
  width: 96px;
  height: 3px;
  background: #d29836;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/*---- link ----*/

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

a:hover,
a:active,
a:visited {
  color: #000;
  text-decoration: none;
}

a.link-img01 img {
  transition: 0.5s;
}

a.link-img01:hover img {
  opacity: 0.7;
}

/*---- btn ----*/

a.btn01 {
  position: relative;
  width: 100%;
  height: 50px;
  background: #d29836;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 1s;
}

a.btn01:hover {
  background: #af7c27;
}

a.btn01 span {
  font-size: 1.6rem;
  color: #fff;
  text-align: center;
  padding: 0;
  margin: 0;
}

a.btn02 {
  position: relative;
  width: 100%;
  height: 50px;
  background: #2c893a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 1s;
}

a.btn02:hover {
  background: #184e21;
}

a.btn02 span {
  font-size: 1.6rem;
  color: #fff;
  text-align: center;
  padding: 0;
  margin: 0;
}

a.btn03 {
  position: relative;
  width: 100%;
  height: 40px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 1s;
}

a.btn03 span {
  font-size: 1.6rem;
  color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}

a.btn04 {
  position: relative;
  width: 100%;
  max-width: 340px;
  height: 50px;
  background: #fff;
  border: 3px solid #d29836;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transition: 1s;
}

a.btn04:hover {
  background: #d29836;
  border: 3px solid #d29836;
}

a.btn04 span {
  font-size: 1.6rem;
  color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}

a.btn04:hover span {
  color: #fff;
}

a.btn05 {
  position: relative;
  width: 100%;
  max-width: 250px;
  height: 50px;
  background: #fff;
  border: 1px solid #444;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transition: 1s;
}

a.btn05:hover {
  background: #d29836;
  border: 1px solid #d29836;
}

a.btn05 span {
  font-size: 1.6rem;
  color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}

a.btn05:hover span {
  color: #fff;
}

/*---- icon ----*/

/* 矢印 */

.icon-arrow01::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: solid 2px #d29836;
  border-right: solid 2px #d29836;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%) rotate(45deg);
  transition: 1s;
}

a.icon-arrow01:hover::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%) rotate(45deg);
}

/*下三角*/
.sankaku01:after {
  content: "";
  width: 14px;
  height: 10px;
  background-color: #fff;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/*---- color ----*/

.font-color01 {
  color: #ce2222;
}

/* header
  ========================================================================================================
  */

/*---------------- 会員情報  header-member-info ----------------*/

aside.header-member-info {
  width: 95%;
  max-width: 1200px;
  margin: 10px auto 10px auto;
}

aside.header-member-info div {
  text-align: right;
  font-size: 1.4rem;
  color: #444;
}

.header-member-info .my-false {
  display: none;
}

.header-member-info .my-true {
  display: block;
}

/*---------------- header ----------------*/

header {
  width: 100%;
  padding: 0;
  margin: 0 auto;
}

header div.header-wrap {
  position: relative;
  width: 95%;
  max-width: 1200px;
  min-height: 120px;
  padding: 0px 0 0 0;
  margin: 0 auto;
}

/*---- logo ----*/

header .logo {
  width: 21%;
  max-width: 255px;
  position: absolute;
  bottom: 22px;
  left: 0;
  padding: 0;
  margin: 0;
}

header .logo + span {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 1.4rem;
  position: absolute;
  top: 15px;
  left: 0;
  margin: 10px 0 0 0;
}

@media print, screen and (min-width: 1200px) {
  header .logo + span {
    display: block;
    font-size: 1.6rem;
    position: absolute;
    top: inherit;
    bottom: 22px;
    left: 23%;
    margin: 0;
  }
}

header .logo a img {
  display: block;
  width: 100%;
  margin: 0;
}

header .logo + span + p {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 1.3rem;
  position: absolute;
  top: -30px;
  left: 0;
  padding: 0;
  margin: 0;
}

@media print, screen and (min-width: 1200px) {
  header .logo + span + p {
    position: absolute;
    top: 0px;
    left: 0;
    padding: 0;
    margin: 0;
  }
}

/*---------------- 配送の目安 delivery-date ----------------*/

header div.delivery-date {
  width: 300px;
  /*max-width:25%;*/
  position: absolute;
  bottom: 20px;
  right: 330px;
}

header div.delivery-date dl {
  border: 2px solid #d4e7d7;
}

header div.delivery-date dl dt {
  position: relative;
  background: #d4e7d7;
  font-size: 1.3rem;
  font-weight: 500;
  color: #444;
  padding: 3px 7px 3px 35px;
}

header div.delivery-date dl dt::before {
  content: "";
  width: 24px;
  height: 24px;
  background: url("https://mizuha.itembox.design/item/images/top4/icon-truck.png") no-repeat 0 0;
  background-size: 100%;
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
}

header div.delivery-date dl dd {
  font-size: 1.3rem;
  line-height: 150%;
  padding: 5px 7px;
}

header div.delivery-date dl span {
  color: #ce2222;
}

/*---------------- 問い合わせ header-info----------------*/

header div.header-info {
  width: 310px;
  /*width:28%;*/
  position: absolute;
  bottom: 20px;
  right: 0;
}

header div.header-info div {
  display: flex;
  flex-flow: row nowrap;
  font-size: 1.4rem;
  font-weight: 500;
}

header div.header-info dl.info01 {
  width: 60%;
}

header div.header-info dl.info02 {
  width: 40%;
}

header div.header-info dl dt {
  height: 18px;
}

header div.header-info dl dd {
  height: 35px;
  display: flex;
  align-items: center;
}

header div.header-info dl dd {
  font-weight: 600;
}

header div.header-info dl.info01 dt {
  position: relative;
  padding: 0 0 0 20px;
}

header div.header-info dl.info01 dt::before {
  content: "";
  width: 15px;
  height: 15px;
  background: url("https://mizuha.itembox.design/item/images/top4/icon-tel.png") no-repeat 0 0;
  background-size: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-40%);
}

header div.header-info dl.info01 dd {
  font-size: 2.6rem;
  font-weight: 600;
  font-feature-settings: "palt";
}

/*------------ 問い合わせボタン  header-btn-box ------------*/

ul.header-btn-box {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin: 8px 0 0 0;
}

ul.header-btn-box li {
  width: 48%;
  height: 36px;
  background-color: #be2626;
}

ul.header-btn-box li a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

ul.header-btn-box li.h-btn01 {
  background-color: #fff;
  border: 1px solid #707070;
}

ul.header-btn-box li.h-btn02 {
  background-color: #be2626;
}

ul.header-btn-box li.h-btn01 a {
  color: #000;
}

ul.header-btn-box li.h-btn02 a {
  color: #fff;
}

ul.header-btn-box li.h-btn02 a span {
  display: inline-block;
  position: relative;
  padding: 0 0 0 18px;
}

ul.header-btn-box li.h-btn02 a span::before {
  content: "";
  width: 14px;
  height: 14px;
  background: url("https://mizuha.itembox.design/item/images/top4/icon-cart.png") no-repeat 50% 50%;
  background-size: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

ul.header-btn-box li.h-btn01 span.login.my-true {
  display: none;
}

ul.header-btn-box li.h-btn01 span.login.my-false {
  display: block;
}

ul.header-btn-box li.h-btn01 span.mypage.my-true {
  display: block;
}

ul.header-btn-box li.h-btn01 span.mypage.my-false {
  display: none;
}

/*----------------------------------------------------------------------------------
                                                    header-navigation
  ------------------------------------------------------------------------------------*/

header nav {
  width: 100%;
  background: #d29836;
  text-align: center;
}

/*------------ ナビゲーション1   ------------*/

header nav ul.header-nav01 {
  width: 100%;
  max-width: 1080px;
  height: 50px;
  display: inline-flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  margin: 0 auto;
}

header nav ul.header-nav01 li {
  display: inline-block;
  font-size: 1.5rem;
  margin: 10px 25px;
}

header nav ul.header-nav01 li a {
  color: #fff;
  transition: 0.5s;
}

header nav ul.header-nav01 li a:hover {
  opacity: 0.8;
}

/*------------ ナビゲーション2   ------------*/

header div.header-nav02 {
  width: 90%;
  max-width: 1180px;
  margin: 0 auto;
}

header div.header-nav02 ul {
  width: 100%;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  place-items: center;
  margin: 25px auto 20px auto;
}

header div.header-nav02 ul li {
  width: 100%;
  /*max-width:170px;*/
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 1.6rem;
  text-align: center;
}

header div.header-nav02 ul li figure {
  width: 100%;

  height: 90px;
  border-radius: 15px;
  margin: 0 0 5px 0;
  overflow: hidden;
}

header div.header-nav02 ul li figure img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  object-fit: cover;
  transition: 0.5s;
}

header div.header-nav02 li a:hover figure img {
  transform: scale(1.1);
}

header div.header-nav02 ul li a span {
  color: #000;
  transition: 0.5s;
}

header div.header-nav02 ul li a:hover span {
  color: #d29836;
}

/* お知らせ notice 
  ========================================================================================================
  */

aside.notice {
  width: 95%;
  max-width: 1200px;
  box-sizing: border-box;
  border: 1px solid #464646;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  justify-content: center;
  padding: 10px 20px;
  margin: 0 auto 20px auto;
}

aside.notice h2 {
  border-bottom: 1px solid #707070;
  padding: 0 0 5px 0;
  margin: 0 auto 15px auto;
}

aside.notice h2 span {
  display: inline-block;
  position: relative;
  font-size: 1.6rem;
  font-weight: 600;
  color: #444;
  padding: 0 0 0 30px;
}

aside.notice h2 span::before {
  content: "";
  width: 23px;
  height: 23px;
  background: url("https://mizuha.itembox.design/item/images/top4/icon-info.png") no-repeat 0 0;
  background-size: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

aside.notice p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  color: #444;
  line-height: 180%;
  padding: 0;
  margin: 0 0 5px 0;
}

/* ページ上部バナー　banner box
  ========================================================================================================
  */
aside.hd-banner {
  width: 93%;
  max-width: 1200px;
  margin: 40px auto;
}

/*------------ バナー1つ  ------------*/

aside.hd-banner ul.hd-banner-box01 {
  width: 100%;
  max-width: 70%;
  margin: 0 auto;
}

/*------------ バナー2つ  ------------*/
aside.hd-banner ul.hd-banner-box02 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

aside.hd-banner ul li img {
  width: 100%;
}

/* contents
  ========================================================================================================
  */

/*------------ 共通BOXレイアウト  ------------*/

ul.products-box01 {
  width: 95%;
  max-width: 1200px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 0;
  margin: 0 auto;
}

ul.products-box01 li {
  width: calc((100% - 3%) / 2);
  margin: 0 0 40px 0;
}

ul.products-box01 li p {
  width: 100%;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  padding: 0 5px;
  margin: 15px 0 0 0;
}

ul.products-box01 li p span {
  display: block;
  font-size: 2.3rem;
  font-weight: 500;
  margin: 0 0 7px 0;
}

ul.products-box01 li a figure {
  width: 100%;
  padding: 0;
  margin: 0;
}

ul.products-box01 li a figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}

ul.products-box01 li a:hover img {
  opacity: 0.7;
}

section.purpose ul.products-box01 li img {
  display: block;
  width: 100%;
}

section.purpose ul.products-box01 li a:hover img {
  transform: none;
}

ul.products-box01 li a {
  color: #000;
  transition: all 0.5s;
}

/*------------ 共通BOXレイアウト  ------------*/

ul.products-box02 {
  width: 95%;
  max-width: 1200px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 0;
  margin: 0 auto 40px auto;
}

ul.products-box02 li {
  width: calc((100% - 3%) / 3);
  margin: 0;
}

ul.products-box02 li p {
  width: 100%;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  padding: 0 5px;
  margin: 15px 0 0 0;
}

ul.products-box02 li p span {
  display: block;
  font-size: 2.3rem;
  margin: 0 0 5px 0;
}

ul.products-box02 li a figure {
  width: 100%;
  padding: 0;
  margin: 0;
}

ul.products-box02 li a figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}

ul.products-box02 li a:hover img {
  opacity: 0.7;
}

ul.products-box02 li a {
  color: #000;
  transition: all 0.5s;
}

/*-------------------------　メインビジュアル　--------------------------*/

section.main-visual {
  position: relative;
  width: 100%;
}

/*------------------------------　本わらび餅　---------------------------*/

section.products01 {
  width: 100%;
  margin: 110px auto 0 auto;
}

/*------------------------------用途から選ぶ-----------------------------*/

section.purpose {
  width: 100%;
  margin: 140px auto 0 auto;
}

section.purpose ul.products-box01 li p {
  font-size: 1.6rem;
  margin: 10px 0 30px 0;
}

section.purpose p.purpose-bn {
  width: 100%;
  max-width: 730px;
  margin: 0 auto;
}

section.purpose p.purpose-bn img {
  width: 100%;
}

/*---------------------------------- 特集 --------------------------------*/

section.feature {
  width: 95%;
  max-width: 1200px;
  margin: 120px auto;
}

section.feature div.feature01 {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid #707070;
  padding: 40px 3%;
  margin: 0 0 40px 0;
}

div.feature01 div {
  width: 50%;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  padding: 2%;
}

div.feature01 div h4 {
  font-size: 2.8rem;
  margin: 0 0 25px 0;
}

div.feature01 div p {
  font-size: 1.6rem;
  line-height: 180%;
  text-align: center;
  margin: 0 0 40px 0;
}

div.feature01 div a {
  max-width: 300px;
}

div.feature01 figure {
  width: 50%;
}

div.feature01 figure img {
  display: block;
  width: 100%;
}

/*------------------------------　京みずはについて　 -----------------------------*/

section.about-us {
  width: 100%;
  background: #faf4e5;
  padding: 65px 0 85px 0;
}

section.about-us div.about-us-wrap {
  width: 95%;
  max-width: 1200px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: flex-start;
  margin: 60px auto 0 auto;
}

section.about-us div.about-us-wrap div.swiper {
  width: 48%;
  background: #faf4e5;
  padding: 0;
  margin: 0;
}

section.about-us div.about-us-wrap div.swiper ul li.swiper-slide {
  background: #faf4e5;
}

section.about-us div.about-us-wrap div.about-box {
  width: 48%;
  padding: 0;
  margin: 0;
}

section.about-us div.about-us-wrap p {
  font-family: "Noto Serif JP", serif;
  text-align: left;
  line-height: 200%;
  margin: 0 0 40px 0;
}

section.about-us div.about-us-wrap ul.about-btn-box {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

ul.about-btn-box li {
  width: 48%;
  display: flex;
  align-items: flex-end;
  padding: 0;
  margin: 0 0 5px 0;
}

section.about-us aside {
  width: 100%;
  margin: 80px 0 0 0;
}

section.about-us aside a {
  display: block;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

section.about-us aside img {
  width: 100%;
}

/*------------------------------　人気ランキング　-----------------------------*/

section.ranking {
  width: 100%;
  padding: 100px 0 120px 0;
  margin: 0 auto;
}

section.ranking div.ranking-wrap {
  width: 90%;
  max-width: 960px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: stretch;
  padding: 40px 0 0 0;
  margin: 0 auto;
}

section.ranking div.ranking-wrap div {
  position: relative;
  width: calc(80% / 3);
  max-width: 255px;
  padding: 0 0 30px 0;
}

section.ranking div.ranking-wrap div figure img {
  position: relative;
  width: 100%;
  z-index: 100;
}

section.ranking div.ranking-wrap div span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: #2c893a;
  font-family: "Noto Serif JP", serif;
  font-size: 3.8rem;
  font-weight: 600;
  color: #fff;
  position: absolute;
  top: -42px;
  left: -42px;
  z-index: 101;
}

section.ranking div.ranking-wrap div:nth-of-type(1) span {
  background: #e8ce3e;
  font-family: "Noto Serif JP", serif;
}

section.ranking div.ranking-wrap div dl {
  width: 90%;
  margin: 10px auto 30px auto;
}

section.ranking div.ranking-wrap div dt {
  font-size: 1.8rem;
  min-height: 60px;
  font-family: "Noto Serif JP", serif;
  text-align: center;
  margin: 10px 0 0 0;
}

section.ranking div.ranking-wrap div dl dd {
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
}

section.ranking div.ranking-wrap div dl dd strong {
  font-size: 2.2rem;
  font-weight: 600;
}

section.ranking div.ranking-wrap div p {
  width: 100%;
  height: 40px;
  padding: 0;
  margin: 0;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

section.ranking div.ranking-wrap div p a {
  width: 100%;
  height: 100%;
  background: #d29836;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  transition: all 1s;
}

section.ranking div.ranking-wrap div p a:hover {
  background: #f8f4e5;
  color: #444;
}

/*-----------------------------　お知らせ　 ----------------------------*/

section.news {
  width: 90%;
  max-width: 1100px;
  padding: 0;
  margin: 140px auto 0 auto;
}

section.news dl {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}

section.news dl dt {
  width: 170px;
  border-bottom: 1px solid #cbcbcb;
  line-height: 2.4rem;
  padding: 0 0 15px 0;
  margin: 15px 0 0 0;
}

section.news dl dd {
  width: calc(100% - 170px);
  border-bottom: 1px solid #cbcbcb;
  line-height: 2.4rem;
  padding: 0 0 15px 0;
  margin: 15px 0 0 0;
}

section.news dl + p {
  text-align: right;
  margin: 20px 0 0 0;
}

section.news dl + p a {
  position: relative;
  display: inline-block;
  color: #000;
  padding: 0 20px 0 0;
  margin: 0 20px 0 0;
  transition: 0.5s;
}

section.news dl + p a:hover {
  color: #d29836;
}

/* 矢印 */
section.news dl + p a::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: solid 2px #444;
  border-right: solid 2px #444;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(45deg);
}

/*--------------------　お客様からのご感想　 ---------------------*/

section.feedback {
  width: 95%;
  max-width: 1100px;
  padding: 0;
  margin: 0 auto;
}

section.feedback div.feedback-box {
  width: 100%;
  border: 1px solid #707070;
  display: flex;
  flex-flow: row nowrap;
  padding: 20px;
  margin: 0 auto 30px auto;
}

section.feedback div.feedback-box figure {
  width: 200px;
  margin: 0;
}

section.feedback div.feedback-box figure img {
  width: 100%;
}

section.feedback div.feedback-box div {
  width: calc(100% - 200px);
  padding: 20px;
}

section.feedback div.feedback-box h3 {
  font-size: 1.8rem;
  padding: 0;
  margin: 0;
}

section.feedback div.feedback-box h3 a {
  color: #000;
  border-bottom: 1px solid #000;
  transition: 0.5s;
}

section.feedback div.feedback-box h3 a:hover {
  /*color: #D29836;*/
  border-bottom: none;
}

section.feedback div.feedback-box p {
  margin: 15px 0;
}

section.feedback div.feedback-box dl {
  margin: 0;
}

section.feedback div.feedback-box dl dt {
  font-size: 1.4rem;
  margin: 0 0 5px 0;
}

section.feedback a.btn04 {
  margin: 40px auto 0 auto;
}

/*----------  星 ----------*/

span.star-rating {
  position: relative;
  z-index: 0;
  display: inline-block;
  white-space: nowrap;
  color: #edc82b; /* イエローカラー */
  font-size: clamp(18px, 5vw, 24px); /*フォントサイズ */
  letter-spacing: 0.4em;
}

.star-rating:before {
  content: "☆☆☆☆☆";
}

.star-rating:after {
  content: "★★★★★";
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  z-index: 1;
}

.star-rating[data-rate="5"]:after {
  width: 100%;
} /* 星5 */
.star-rating[data-rate="4"]:after {
  width: 80%;
} /* 星4 */
.star-rating[data-rate="3"]:after {
  width: 60%;
} /* 星3 */
.star-rating[data-rate="2"]:after {
  width: 40%;
} /* 星2 */
.star-rating[data-rate="1"]:after {
  width: 20%;
} /* 星1 */
.star-rating[data-rate="0"]:after {
  width: 0%;
} /* 星0 */

/*-----------------------------　会員特典　 ----------------------------*/

section.membership {
  width: 90%;
  max-width: 1100px;
  padding: 0;
  margin: 140px auto 0 auto;
}

section.membership p {
  text-align: center;
  padding: 0;
}

section.membership p span {
  display: inline-block;
  position: relative;
  font-size: 20px;
  font-weight: 700;
  padding: 0 20px;
}

section.membership p span::before {
  content: "";
  width: 1px;
  height: 30px;
  background: #000;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: rotate(-45deg);
}

section.membership p span::after {
  content: "";
  width: 1px;
  height: 30px;
  background: #000;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: rotate(45deg);
}

section.membership p strong {
  color: #d90000;
}

section.membership p strong.font-l {
  font-size: 3rem;
}

section.membership ul.membership-bn {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 40px;
  margin: 30px auto 60px auto;
}

section.membership ul.membership-bn li img {
  width: 100%;
}

section.membership div.membership-point {
  width: 100%;
  border: 2px solid #d29836;
  padding: 20px 20px 40px 20px;
}

div.membership-point h3 {
  font-size: 2.4rem;
  border-bottom: 2px solid #d29836;
  text-align: center;
  padding: 0 0 20px 0;
}

div.membership-point ul.membership-point-list {
  width: 95%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 30px;
  margin: 50px auto 0 auto;
}

div.membership-point ul.membership-point-list li {
  display: flex;
  flex-flow: row nowrap;
}

div.membership-point ul.membership-point-list li figure {
  display: block;
  width: 60px;
}

div.membership-point ul.membership-point-list li span {
  display: block;
  width: calc(100% - 60px);
  padding: 0 0 0 10px;
  margin: 0;
}

div.membership-point ul.membership-point-list li figure img {
  width: 100%;
}

/* footer
  ========================================================================================================
  */
@media print, screen and (min-width: 600px) {
  footer {
    background-color: #faf4e5;
    padding: 100px 0 0 0;
    margin: 120px 0 0 0;
  }
}

/*---------------------------　ご利用ガイド --------------------------*/

@media print, screen and (min-width: 600px) {
  footer div.user-guide {
    width: 95%;
    max-width: 1460px;
    padding: 0;
    margin: 0 auto;
  }

  footer div.user-guide h2 {
    margin: 0 0 30px 0;
  }

  footer div.user-guide div.user-guide-wrap {
    width: 100%;
    display: grid;
    gap: 4%;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin: 80px 0 0 0;
  }

  footer div.user-guide div.user-guide-wrap div {
    position: relative;
    width: 100%;
    max-width: 315px;
    padding: 0 5px 60px 5px;
  }

  footer div.user-guide div figure {
    width: 100%;
    padding: 0;
    margin: 0 0 30px 0;
  }

  footer div.user-guide div figure img {
    display: block;
    width: 100%;
    max-width: 100px;
    margin: 0 auto;
  }

  footer div.user-guide div h3 {
    border-bottom: 1px solid #707070;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    color: #000;
    padding: 0 0 20px 0;
    margin: 0 0 15px 0;
  }

  footer div.user-guide div p {
    font-size: 1.6rem;
    color: #444;
  }

  footer div.user-guide div p + p {
    margin: 30px 0 0 0;
  }

  footer div.user-guide div img.pay {
    display: block;
    width: 100%;
    margin: 30px auto 0 auto;
  }

  footer div.user-guide div a {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    margin: 0 auto;
  }

  footer div.user-guide div a span {
    color: #444;
    font-weight: 600;
  }

  footer div.user-guide div a.icon-arrow01::after {
    border-top: solid 2px #444;
    border-right: solid 2px #444;
  }
}

/*-----------------------------　お問い合わせ ----------------------------*/

@media print, screen and (min-width: 600px) {
  div.ft-information {
    width: 95%;
    max-width: 1460px;
    margin: 160px auto 0 auto;
  }

  div.ft-information h2 + p {
    font-size: 1.5rem;
    text-align: center;
    margin: 20px 0 0 0;
  }

  div.ft-information div.ft-information-wrap {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin: 40px auto 100px auto;
  }

  div.ft-information div.ft-information01 {
    width: 68%;
    display: flex;
    flex-flow: row nowrap;
    border: 1px solid #707070;
    padding: 15px;
    margin: 0;
  }

  div.ft-information01 dl {
    width: 55%;
    border-right: 1px solid #707070;
  }

  div.ft-information01 dt {
    font-size: 4rem;
    font-weight: 700;
    text-align: center;
  }

  div.ft-information01 dt span {
    display: inline-block;
    position: relative;
    padding: 0 0 0 55px;
  }

  div.ft-information01 dt span::before {
    content: "";
    width: 45px;
    height: 45px;
    background: url("https://mizuha.itembox.design/item/images/top4/icon-tel.png") no-repeat 0 0;
    background-size: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  div.ft-information01 dd {
    font-size: 1.8rem;
    text-align: center;
  }

  div.ft-information01 ul {
    width: 45%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
  }

  div.ft-information01 ul li {
    position: relative;
    font-size: 1.8rem;
    padding: 5px 0 5px 18px;
    margin: 0 0 0 30px;
  }

  div.ft-information01 ul li::before {
    content: "";
    width: 12px;
    height: 12px;
    background-color: #000;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  div.ft-information01 ul li a {
    color: #000;
    transition: 0.5s;
  }

  div.ft-information01 ul li a:hover {
    color: #d29836;
  }

  ul.ft-information02 {
    width: 30%;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }

  ul.ft-information02 li {
    width: 100%;
    margin: 0;
  }
}

/*------------------------------カレンダー-----------------------------*/

@media print, screen and (min-width: 600px) {
  footer div.pc-calendar {
    width: 95%;
    max-width: 960px;
    padding: 0;
    margin: 120px auto 0 auto;
  }

  footer div.pc-calendar p {
    font-size: 1.5rem;
    text-align: center;
    margin: 20px auto 40px auto;
  }

  footer div.pc-calendar div {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
  }

  footer div.pc-calendar div table {
    width: 48%;
    border-collapse: collapse;
    border: 1px solid #444;
    background-color: #fff;
    border-right: 1px solid #444;
    border-top: 1px solid #444;
    padding: 0;
    margin: 5px 0 0 0;
  }

  footer div.pc-calendar div table td {
    font-size: 1.6rem;
    border: 1px solid #444;
    padding: 8px 0;
  }

  footer div.pc-calendar div table th {
    background: #eee;
    border: 1px solid #444;
    font-size: 1.4rem;
    color: #444;
    padding: 3px;
  }

  footer div.pc-calendar div table caption {
    font-size: 2rem;
    font-weight: 500;
    text-align: center;
    margin: 0 0 15px 0;
  }
}

/*---------------フッターナビゲーション--------------*/

@media print, screen and (min-width: 600px) {
  footer nav.pc-ft-nav {
    width: 95%;
    max-width: 1460px;
    margin: 150px auto 0 auto;
  }

  footer nav.pc-ft-nav ul {
    width: 100%;
    padding: 0 0 20px 0;
  }

  footer nav.pc-ft-nav ul li {
    display: inline-block;
    margin: 0 25px 0 0;
  }

  footer nav.pc-ft-nav ul li a {
    position: relative;
    /*font-family: 'Noto Serif JP', serif;*/
    font-size: 1.4rem;
    color: #444;
    padding: 0 0 0 10px;
    line-height: 100%;
  }

  footer nav.pc-ft-nav ul li a:hover {
    color: #d29836;
  }

  /*三角*/
  footer nav.pc-ft-nav ul li a:after {
    content: "";
    width: 6px;
    height: 10px;
    background-color: #444;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
}

/*-----------------------コピーライト----------------------*/

@media print, screen and (min-width: 600px) {
  footer div.copyright {
    width: 100%;
    background: #d29836;
    text-align: center;
    padding: 10px 0;
  }

  footer div.copyright small {
    font-size: 1.4rem;
    color: #fff;
  }
}

/**********Swiper*******************************************************************************/
.swiper {
  width: 100%;
  /*height: 100%;*/
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically 
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;*/
}

.swiper-slide img {
  display: block;
  width: 100%;
  /*height: 100%;*/
  object-fit: cover;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
}

/* Swiperの親要素 */
.swiper-parent {
  position: relative;
}

/* Swiper本体 */
.swiper-wrapper {
  width: calc(100% - 100px);
  /* ☆前・次ページボタンの幅をそれぞれ50pxとして、その分を引く */
  padding-bottom: 50px;
  /* ★ページネーション・スクロールバー分の余白50pxを下に取る */
  box-sizing: content-box;
}

/* 前・次スライドボタンの縦位置調整（スライドの高さの中央に合わせる） */
.swiper-button-prev,
.swiper-button-next {
  top: calc((100% - 50px) * 0.5);
  /* ☆★ページネーション・スクロールバー（50px）を除く縦位置の中央（＝スライドの高さの中央）に一旦配置 */
  margin-top: -22px;
  /* ★ボタンの高さ（44px）の半分のネガティブマージンで上に少しずらす */
}

/* 現在のスライドのスタイル */
.swiper-pagination-bullet-active {
  width: 15px;
  /* 幅 */
  height: 15px;
  /* 高さ */
  background: #007b43;
  /* 色：常磐色色 */
  opacity: 1;
  /* 不透明 */
}





/*** BootStrapから引用 *********************************************************************/

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-sm,
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container-md,
  .container-sm,
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .container-xxl,
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 1320px;
  }
}

.w-25 {
  width: 25% !important;
  height: auto;
  display: block;
}

.w-50 {
  width: 50% !important;
  height: auto;
  display: block;
}

.w-55 {
  width: 55% !important;
  height: auto;
  display: block;
}

.w-60 {
  width: 60% !important;
  height: auto;
  display: block;
}

.w-70 {
  width: 70% !important;
  height: auto;
  display: block;
}

.w-75 {
  width: 75% !important;
  height: auto;
  display: block;
}

.w-80 {
  width: 80% !important;
  height: auto;
  display: block;
}

.w-90 {
  width: 90% !important;
  height: auto;
  display: block;
}

.w-100 {
  width: 100% !important;
  height: auto;
  display: block;
}

.mw-100 {
  max-width: 100% !important;
  height: auto;
  display: block;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.mt-auto {
  margin-top: auto !important;
}

.me-0 {
  margin-right: 0 !important;
}

.me-1 {
  margin-right: 0.25rem !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}

.me-3 {
  margin-right: 1rem !important;
}

.me-4 {
  margin-right: 1.5rem !important;
}

.me-5 {
  margin-right: 3rem !important;
}

.me-auto {
  margin-right: auto !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ms-0 {
  margin-left: 0 !important;
}

.ms-1 {
  margin-left: 0.25rem !important;
}

.ms-2 {
  margin-left: 0.5rem !important;
}

.ms-3 {
  margin-left: 1rem !important;
}

.ms-4 {
  margin-left: 1.5rem !important;
}

.ms-5 {
  margin-left: 3rem !important;
}

.ms-auto {
  margin-left: auto !important;
}

.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.px-1 {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
}

.px-2 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}

.px-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

.px-5 {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pt-3 {
  padding-top: 1rem !important;
}

.pt-4 {
  padding-top: 1.5rem !important;
}

.pt-5 {
  padding-top: 3rem !important;
}

.pe-0 {
  padding-right: 0 !important;
}

.pe-1 {
  padding-right: 0.25rem !important;
}

.pe-2 {
  padding-right: 0.5rem !important;
}

.pe-3 {
  padding-right: 1rem !important;
}

.pe-4 {
  padding-right: 1.5rem !important;
}

.pe-5 {
  padding-right: 3rem !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.pb-3 {
  padding-bottom: 1rem !important;
}

.pb-4 {
  padding-bottom: 1.5rem !important;
}

.pb-5 {
  padding-bottom: 3rem !important;
}

.ps-0 {
  padding-left: 0 !important;
}

.ps-1 {
  padding-left: 0.25rem !important;
}

.ps-2 {
  padding-left: 0.5rem !important;
}

.ps-3 {
  padding-left: 1rem !important;
}

.ps-4 {
  padding-left: 1.5rem !important;
}

.ps-5 {
  padding-left: 3rem !important;
}

.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.mx-1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}

.mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}

.mx-3 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}

.mx-4 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}

.mx-5 {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.blog-header {
  line-height: 1;
  border-bottom: 1px solid #e5e5e5;
}

.blog-header-logo {
  font-size: 2.25rem;
}

.blog-header-logo:hover {
  text-decoration: none;
}

small,
.small {
  font-size: 0.875em;
}

.btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1.6rem;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.btn:hover {
  color: #212529;
}

.btn-check:focus + .btn,
.btn:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  pointer-events: none;
  opacity: 0.65;
}

.btn-primary {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.btn-primary:hover {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

.btn-check:focus + .btn-primary,
.btn-primary:focus {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}

.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #0a58ca;
  border-color: #0a53be;
}

.btn-check:checked + .btn-primary:focus,
.btn-check:active + .btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}

.btn-primary:disabled,
.btn-primary.disabled {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-secondary:hover {
  color: #fff;
  background-color: #5c636a;
  border-color: #565e64;
}

.btn-check:focus + .btn-secondary,
.btn-secondary:focus {
  color: #fff;
  background-color: #5c636a;
  border-color: #565e64;
  box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
}

.btn-check:checked + .btn-secondary,
.btn-check:active + .btn-secondary,
.btn-secondary:active,
.btn-secondary.active,
.show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #565e64;
  border-color: #51585e;
}

.btn-check:checked + .btn-secondary:focus,
.btn-check:active + .btn-secondary:focus,
.btn-secondary:active:focus,
.btn-secondary.active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
}

.btn-secondary:disabled,
.btn-secondary.disabled {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-success {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}

.btn-success:hover {
  color: #fff;
  background-color: #157347;
  border-color: #146c43;
}

.btn-check:focus + .btn-success,
.btn-success:focus {
  color: #fff;
  background-color: #157347;
  border-color: #146c43;
  box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5);
}

.btn-check:checked + .btn-success,
.btn-check:active + .btn-success,
.btn-success:active,
.btn-success.active,
.show > .btn-success.dropdown-toggle {
  color: #fff;
  background-color: #146c43;
  border-color: #13653f;
}

.btn-check:checked + .btn-success:focus,
.btn-check:active + .btn-success:focus,
.btn-success:active:focus,
.btn-success.active:focus,
.show > .btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5);
}

.btn-success:disabled,
.btn-success.disabled {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}

.btn-info {
  color: #000;
  background-color: #0dcaf0;
  border-color: #0dcaf0;
}

.btn-info:hover {
  color: #000;
  background-color: #31d2f2;
  border-color: #25cff2;
}

.btn-check:focus + .btn-info,
.btn-info:focus {
  color: #000;
  background-color: #31d2f2;
  border-color: #25cff2;
  box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5);
}

.btn-check:checked + .btn-info,
.btn-check:active + .btn-info,
.btn-info:active,
.btn-info.active,
.show > .btn-info.dropdown-toggle {
  color: #000;
  background-color: #3dd5f3;
  border-color: #25cff2;
}

.btn-check:checked + .btn-info:focus,
.btn-check:active + .btn-info:focus,
.btn-info:active:focus,
.btn-info.active:focus,
.show > .btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5);
}

.btn-info:disabled,
.btn-info.disabled {
  color: #000;
  background-color: #0dcaf0;
  border-color: #0dcaf0;
}

.btn-warning {
  color: #000;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-warning:hover {
  color: #000;
  background-color: #ffca2c;
  border-color: #ffc720;
}

.btn-check:focus + .btn-warning,
.btn-warning:focus {
  color: #000;
  background-color: #ffca2c;
  border-color: #ffc720;
  box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5);
}

.btn-check:checked + .btn-warning,
.btn-check:active + .btn-warning,
.btn-warning:active,
.btn-warning.active,
.show > .btn-warning.dropdown-toggle {
  color: #000;
  background-color: #ffcd39;
  border-color: #ffc720;
}

.btn-check:checked + .btn-warning:focus,
.btn-check:active + .btn-warning:focus,
.btn-warning:active:focus,
.btn-warning.active:focus,
.show > .btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5);
}

.btn-warning:disabled,
.btn-warning.disabled {
  color: #000;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bb2d3b;
  border-color: #b02a37;
}

.btn-check:focus + .btn-danger,
.btn-danger:focus {
  color: #fff;
  background-color: #bb2d3b;
  border-color: #b02a37;
  box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
}

.btn-check:checked + .btn-danger,
.btn-check:active + .btn-danger,
.btn-danger:active,
.btn-danger.active,
.show > .btn-danger.dropdown-toggle {
  color: #fff;
  background-color: #b02a37;
  border-color: #a52834;
}

.btn-check:checked + .btn-danger:focus,
.btn-check:active + .btn-danger:focus,
.btn-danger:active:focus,
.btn-danger.active:focus,
.show > .btn-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
}

.btn-danger:disabled,
.btn-danger.disabled {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-light {
  color: #000;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-light:hover {
  color: #000;
  background-color: #f9fafb;
  border-color: #f9fafb;
}

.btn-check:focus + .btn-light,
.btn-light:focus {
  color: #000;
  background-color: #f9fafb;
  border-color: #f9fafb;
  box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
}

.btn-check:checked + .btn-light,
.btn-check:active + .btn-light,
.btn-light:active,
.btn-light.active,
.show > .btn-light.dropdown-toggle {
  color: #000;
  background-color: #f9fafb;
  border-color: #f9fafb;
}

.btn-check:checked + .btn-light:focus,
.btn-check:active + .btn-light:focus,
.btn-light:active:focus,
.btn-light.active:focus,
.show > .btn-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
}

.btn-light:disabled,
.btn-light.disabled {
  color: #000;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-dark {
  color: #fff;
  background-color: #212529;
  border-color: #212529;
}

.btn-dark:hover {
  color: #fff;
  background-color: #1c1f23;
  border-color: #1a1e21;
}

.btn-check:focus + .btn-dark,
.btn-dark:focus {
  color: #fff;
  background-color: #1c1f23;
  border-color: #1a1e21;
  box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
}

.btn-check:checked + .btn-dark,
.btn-check:active + .btn-dark,
.btn-dark:active,
.btn-dark.active,
.show > .btn-dark.dropdown-toggle {
  color: #fff;
  background-color: #1a1e21;
  border-color: #191c1f;
}

.btn-check:checked + .btn-dark:focus,
.btn-check:active + .btn-dark:focus,
.btn-dark:active:focus,
.btn-dark.active:focus,
.show > .btn-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
}

.btn-dark:disabled,
.btn-dark.disabled {
  color: #fff;
  background-color: #212529;
  border-color: #212529;
}

.btn-outline-primary {
  color: #0d6efd;
  border-color: #0d6efd;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.btn-check:focus + .btn-outline-primary,
.btn-outline-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}

.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.btn-check:checked + .btn-outline-primary:focus,
.btn-check:active + .btn-outline-primary:focus,
.btn-outline-primary:active:focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  color: #0d6efd;
  background-color: transparent;
}

.btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-check:focus + .btn-outline-secondary,
.btn-outline-secondary:focus {
  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5);
}

.btn-check:checked + .btn-outline-secondary,
.btn-check:active + .btn-outline-secondary,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary.dropdown-toggle.show {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-check:checked + .btn-outline-secondary:focus,
.btn-check:active + .btn-outline-secondary:focus,
.btn-outline-secondary:active:focus,
.btn-outline-secondary.active:focus,
.btn-outline-secondary.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5);
}

.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
  color: #6c757d;
  background-color: transparent;
}

.btn-outline-success {
  color: #198754;
  border-color: #198754;
}

.btn-outline-success:hover {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}

.btn-check:focus + .btn-outline-success,
.btn-outline-success:focus {
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5);
}

.btn-check:checked + .btn-outline-success,
.btn-check:active + .btn-outline-success,
.btn-outline-success:active,
.btn-outline-success.active,
.btn-outline-success.dropdown-toggle.show {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}

.btn-check:checked + .btn-outline-success:focus,
.btn-check:active + .btn-outline-success:focus,
.btn-outline-success:active:focus,
.btn-outline-success.active:focus,
.btn-outline-success.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5);
}

.btn-outline-success:disabled,
.btn-outline-success.disabled {
  color: #198754;
  background-color: transparent;
}

.btn-outline-info {
  color: #0dcaf0;
  border-color: #0dcaf0;
}

.btn-outline-info:hover {
  color: #000;
  background-color: #0dcaf0;
  border-color: #0dcaf0;
}

.btn-check:focus + .btn-outline-info,
.btn-outline-info:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5);
}

.btn-check:checked + .btn-outline-info,
.btn-check:active + .btn-outline-info,
.btn-outline-info:active,
.btn-outline-info.active,
.btn-outline-info.dropdown-toggle.show {
  color: #000;
  background-color: #0dcaf0;
  border-color: #0dcaf0;
}

.btn-check:checked + .btn-outline-info:focus,
.btn-check:active + .btn-outline-info:focus,
.btn-outline-info:active:focus,
.btn-outline-info.active:focus,
.btn-outline-info.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5);
}

.btn-outline-info:disabled,
.btn-outline-info.disabled {
  color: #0dcaf0;
  background-color: transparent;
}

.btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:hover {
  color: #000;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-check:focus + .btn-outline-warning,
.btn-outline-warning:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
}

.btn-check:checked + .btn-outline-warning,
.btn-check:active + .btn-outline-warning,
.btn-outline-warning:active,
.btn-outline-warning.active,
.btn-outline-warning.dropdown-toggle.show {
  color: #000;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-check:checked + .btn-outline-warning:focus,
.btn-check:active + .btn-outline-warning:focus,
.btn-outline-warning:active:focus,
.btn-outline-warning.active:focus,
.btn-outline-warning.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
}

.btn-outline-warning:disabled,
.btn-outline-warning.disabled {
  color: #ffc107;
  background-color: transparent;
}

.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-check:focus + .btn-outline-danger,
.btn-outline-danger:focus {
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
}

.btn-check:checked + .btn-outline-danger,
.btn-check:active + .btn-outline-danger,
.btn-outline-danger:active,
.btn-outline-danger.active,
.btn-outline-danger.dropdown-toggle.show {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-check:checked + .btn-outline-danger:focus,
.btn-check:active + .btn-outline-danger:focus,
.btn-outline-danger:active:focus,
.btn-outline-danger.active:focus,
.btn-outline-danger.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
}

.btn-outline-danger:disabled,
.btn-outline-danger.disabled {
  color: #dc3545;
  background-color: transparent;
}

.btn-outline-light {
  color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light:hover {
  color: #000;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-check:focus + .btn-outline-light,
.btn-outline-light:focus {
  box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5);
}

.btn-check:checked + .btn-outline-light,
.btn-check:active + .btn-outline-light,
.btn-outline-light:active,
.btn-outline-light.active,
.btn-outline-light.dropdown-toggle.show {
  color: #000;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-check:checked + .btn-outline-light:focus,
.btn-check:active + .btn-outline-light:focus,
.btn-outline-light:active:focus,
.btn-outline-light.active:focus,
.btn-outline-light.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5);
}

.btn-outline-light:disabled,
.btn-outline-light.disabled {
  color: #f8f9fa;
  background-color: transparent;
}

.btn-outline-dark {
  color: #212529;
  border-color: #212529;
}

.btn-outline-dark:hover {
  color: #fff;
  background-color: #212529;
  border-color: #212529;
}

.btn-check:focus + .btn-outline-dark,
.btn-outline-dark:focus {
  box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
}

.btn-check:checked + .btn-outline-dark,
.btn-check:active + .btn-outline-dark,
.btn-outline-dark:active,
.btn-outline-dark.active,
.btn-outline-dark.dropdown-toggle.show {
  color: #fff;
  background-color: #212529;
  border-color: #212529;
}

.btn-check:checked + .btn-outline-dark:focus,
.btn-check:active + .btn-outline-dark:focus,
.btn-outline-dark:active:focus,
.btn-outline-dark.active:focus,
.btn-outline-dark.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
}

.btn-outline-dark:disabled,
.btn-outline-dark.disabled {
  color: #212529;
  background-color: transparent;
}

.btn-link {
  font-weight: 400;
  color: #0d6efd;
  text-decoration: underline;
}

.btn-link:hover {
  color: #0a58ca;
}

.btn-link:disabled,
.btn-link.disabled {
  color: #6c757d;
}

.btn-lg,
.btn-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.3rem;
}

.btn-sm,
.btn-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}

.btn-kinako {
  color: #fff;
  background-color: #d29836;
  border-color: #d29836;
}

.btn-kinako:hover {
  color: #fff;
  background-color: #e8ac46;
  border-color: #e8ac46;
}

.btn-check:focus + .btn-kinako,
.btn-kinako:focus {
  color: #fff;
  background-color: #e8ac46;
  border-color: #e8ac46;
  box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5);
}

.btn-check:checked + .btn-kinako,
.btn-check:active + .btn-kinako,
.btn-kinako:active,
.btn-kinako.active,
.show > .btn-kinako.dropdown-toggle {
  color: #fff;
  background-color: #e8ac46;
  border-color: #e8ac46;
}

.btn-check:checked + .btn-kinako:focus,
.btn-check:active + .btn-kinako:focus,
.btn-kinako:active:focus,
.btn-kinako.active:focus,
.show > .btn-kinako.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5);
}

.btn-kinako:disabled,
.btn-kinako.disabled {
  color: #fff;
  background-color: #d29836;
  border-color: #d29836;
}

.text-start {
  text-align: left !important;
}

.text-end {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-scroller .nav-link {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

.lead15 {
  font-size: 1.5rem;
  font-weight: 300;
}

.lead17 {
  font-size: 1.7rem;
  font-weight: 300;
}

.lead4 {
  font-size: 2rem;
  font-weight: 300;
}

.lead5 {
  font-size: 2.5rem;
  font-weight: 300;
}

.lead6 {
  font-size: 3rem;
  font-weight: 300;
}

.display-1 {
  font-size: calc(1.625rem + 4.5vw);
  font-weight: 300;
  line-height: 1.2;
}

@media (min-width: 1200px) {
  .display-1 {
    font-size: 5rem;
  }
}

.display-2 {
  font-size: calc(1.575rem + 3.9vw);
  font-weight: 300;
  line-height: 1.2;
}

@media (min-width: 1200px) {
  .display-2 {
    font-size: 4.5rem;
  }
}

.display-3 {
  font-size: calc(1.525rem + 3.3vw);
  font-weight: 300;
  line-height: 1.2;
}

@media (min-width: 1200px) {
  .display-3 {
    font-size: 4rem;
  }
}

.display-4 {
  font-size: calc(1.475rem + 2.7vw);
  font-weight: 300;
  line-height: 1.2;
}

@media (min-width: 1200px) {
  .display-4 {
    font-size: 3.5rem;
  }
}

.display-5 {
  font-size: calc(1.425rem + 2.1vw);
  font-weight: 300;
  line-height: 1.2;
}

@media (min-width: 1200px) {
  .display-5 {
    font-size: 3rem;
  }
}

.display-6 {
  font-size: calc(1.375rem + 1.5vw);
  font-weight: 300;
  line-height: 1.2;
}

@media (min-width: 1200px) {
  .display-6 {
    font-size: 2.5rem;
  }
}

.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: 0.25rem;
}

.list-group-item-action {
  width: 100%;
  color: #495057;
  text-align: inherit;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  z-index: 1;
  color: #495057;
  text-decoration: none;
  background-color: #f8f9fa;
}

.list-group-item-action:active {
  color: #212529;
  background-color: #e9ecef;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.list-group-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.list-group-item:last-child {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}

.list-group-item.disabled,
.list-group-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
}

.list-group-item.active {
  z-index: 2;
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.list-group-item + .list-group-item {
  border-top-width: 0;
}

.list-group-item + .list-group-item.active {
  margin-top: -1px;
  border-top-width: 1px;
}

.list-group-horizontal {
  flex-direction: row;
}

.list-group-horizontal > .list-group-item:first-child {
  border-bottom-left-radius: 0.25rem;
  border-top-right-radius: 0;
}

.list-group-horizontal > .list-group-item:last-child {
  border-top-right-radius: 0.25rem;
  border-bottom-left-radius: 0;
}

.list-group-horizontal > .list-group-item.active {
  margin-top: 0;
}

.list-group-horizontal > .list-group-item + .list-group-item {
  border-top-width: 1px;
  border-left-width: 0;
}

.list-group-horizontal > .list-group-item + .list-group-item.active {
  margin-left: -1px;
  border-left-width: 1px;
}

@media (min-width: 576px) {
  .list-group-horizontal-sm {
    flex-direction: row;
  }

  .list-group-horizontal-sm > .list-group-item:first-child {
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }

  .list-group-horizontal-sm > .list-group-item:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }

  .list-group-horizontal-sm > .list-group-item.active {
    margin-top: 0;
  }

  .list-group-horizontal-sm > .list-group-item + .list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }

  .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}

@media (min-width: 768px) {
  .list-group-horizontal-md {
    flex-direction: row;
  }

  .list-group-horizontal-md > .list-group-item:first-child {
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }

  .list-group-horizontal-md > .list-group-item:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }

  .list-group-horizontal-md > .list-group-item.active {
    margin-top: 0;
  }

  .list-group-horizontal-md > .list-group-item + .list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }

  .list-group-horizontal-md > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}

@media (min-width: 992px) {
  .list-group-horizontal-lg {
    flex-direction: row;
  }

  .list-group-horizontal-lg > .list-group-item:first-child {
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }

  .list-group-horizontal-lg > .list-group-item:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }

  .list-group-horizontal-lg > .list-group-item.active {
    margin-top: 0;
  }

  .list-group-horizontal-lg > .list-group-item + .list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }

  .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}

@media (min-width: 1200px) {
  .list-group-horizontal-xl {
    flex-direction: row;
  }

  .list-group-horizontal-xl > .list-group-item:first-child {
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }

  .list-group-horizontal-xl > .list-group-item:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }

  .list-group-horizontal-xl > .list-group-item.active {
    margin-top: 0;
  }

  .list-group-horizontal-xl > .list-group-item + .list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }

  .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}

@media (min-width: 1400px) {
  .list-group-horizontal-xxl {
    flex-direction: row;
  }

  .list-group-horizontal-xxl > .list-group-item:first-child {
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }

  .list-group-horizontal-xxl > .list-group-item:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }

  .list-group-horizontal-xxl > .list-group-item.active {
    margin-top: 0;
  }

  .list-group-horizontal-xxl > .list-group-item + .list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }

  .list-group-horizontal-xxl > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}

.list-group-flush {
  border-radius: 0;
}

.list-group-flush > .list-group-item {
  border-width: 0 0 1px;
}

.list-group-flush > .list-group-item:last-child {
  border-bottom-width: 0;
}

.list-group-item-primary {
  color: #084298;
  background-color: #cfe2ff;
}

.list-group-item-primary.list-group-item-action:hover,
.list-group-item-primary.list-group-item-action:focus {
  color: #084298;
  background-color: #bacbe6;
}

.list-group-item-primary.list-group-item-action.active {
  color: #fff;
  background-color: #084298;
  border-color: #084298;
}

.list-group-item-secondary {
  color: #41464b;
  background-color: #e2e3e5;
}

.list-group-item-secondary.list-group-item-action:hover,
.list-group-item-secondary.list-group-item-action:focus {
  color: #41464b;
  background-color: #cbccce;
}

.list-group-item-secondary.list-group-item-action.active {
  color: #fff;
  background-color: #41464b;
  border-color: #41464b;
}

.list-group-item-success {
  color: #0f5132;
  background-color: #d1e7dd;
}

.list-group-item-success.list-group-item-action:hover,
.list-group-item-success.list-group-item-action:focus {
  color: #0f5132;
  background-color: #bcd0c7;
}

.list-group-item-success.list-group-item-action.active {
  color: #fff;
  background-color: #0f5132;
  border-color: #0f5132;
}

.list-group-item-info {
  color: #055160;
  background-color: #cff4fc;
}

.list-group-item-info.list-group-item-action:hover,
.list-group-item-info.list-group-item-action:focus {
  color: #055160;
  background-color: #badce3;
}

.list-group-item-info.list-group-item-action.active {
  color: #fff;
  background-color: #055160;
  border-color: #055160;
}

.list-group-item-warning {
  color: #664d03;
  background-color: #fff3cd;
}

.list-group-item-warning.list-group-item-action:hover,
.list-group-item-warning.list-group-item-action:focus {
  color: #664d03;
  background-color: #e6dbb9;
}

.list-group-item-warning.list-group-item-action.active {
  color: #fff;
  background-color: #664d03;
  border-color: #664d03;
}

.list-group-item-danger {
  color: #842029;
  background-color: #f8d7da;
}

.list-group-item-danger.list-group-item-action:hover,
.list-group-item-danger.list-group-item-action:focus {
  color: #842029;
  background-color: #dfc2c4;
}

.list-group-item-danger.list-group-item-action.active {
  color: #fff;
  background-color: #842029;
  border-color: #842029;
}

.list-group-item-light {
  color: #636464;
  background-color: #fefefe;
}

.list-group-item-light.list-group-item-action:hover,
.list-group-item-light.list-group-item-action:focus {
  color: #636464;
  background-color: #e5e5e5;
}

.list-group-item-light.list-group-item-action.active {
  color: #fff;
  background-color: #636464;
  border-color: #636464;
}

.list-group-item-dark {
  color: #141619;
  background-color: #d3d3d4;
}

.list-group-item-dark.list-group-item-action:hover,
.list-group-item-dark.list-group-item-action:focus {
  color: #141619;
  background-color: #bebebf;
}

.list-group-item-dark.list-group-item-action.active {
  color: #fff;
  background-color: #141619;
  border-color: #141619;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

.card > hr {
  margin-right: 0;
  margin-left: 0;
}

.card > .list-group {
  border-top: inherit;
  border-bottom: inherit;
}

.card > .list-group:first-child {
  border-top-width: 0;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.card > .list-group:last-child {
  border-bottom-width: 0;
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}

.card > .card-header + .list-group,
.card > .list-group + .card-footer {
  border-top: 0;
}

.card-body {
  flex: 1 1 auto;
  padding: 1rem 1rem;
}

.card-title {
  margin-bottom: 0.5rem;
}

.card-subtitle {
  margin-top: -0.25rem;
  margin-bottom: 0;
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-link + .card-link {
  margin-left: 1rem;
}

.card-header {
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header:first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

.card-footer {
  padding: 0.5rem 1rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.card-footer:last-child {
  border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
}

.card-header-tabs {
  margin-right: -0.5rem;
  margin-bottom: -0.5rem;
  margin-left: -0.5rem;
  border-bottom: 0;
}

.card-header-pills {
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  border-radius: calc(0.25rem - 1px);
}

.card-img,
.card-img-top,
.card-img-bottom {
  width: 100%;
}

.card-img,
.card-img-top {
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.card-img,
.card-img-bottom {
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}

.card-group > .card {
  margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
  .card-group {
    display: flex;
    flex-flow: row wrap;
  }

  .card-group > .card {
    flex: 1 0 0%;
    margin-bottom: 0;
  }

  .card-group > .card + .card {
    margin-left: 0;
    border-left: 0;
  }

  .card-group > .card:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .card-group > .card:not(:last-child) .card-img-top,
  .card-group > .card:not(:last-child) .card-header {
    border-top-right-radius: 0;
  }

  .card-group > .card:not(:last-child) .card-img-bottom,
  .card-group > .card:not(:last-child) .card-footer {
    border-bottom-right-radius: 0;
  }

  .card-group > .card:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .card-group > .card:not(:first-child) .card-img-top,
  .card-group > .card:not(:first-child) .card-header {
    border-top-left-radius: 0;
  }

  .card-group > .card:not(:first-child) .card-img-bottom,
  .card-group > .card:not(:first-child) .card-footer {
    border-bottom-left-radius: 0;
  }
}

.d-grid {
  display: grid !important;
}

.gap-0 {
  gap: 0 !important;
}

.gap-1 {
  gap: 0.25rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: 1rem !important;
}

.gap-4 {
  gap: 1.5rem !important;
}

.gap-5 {
  gap: 3rem !important;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

/**********************************************************************************************************************************************/
/**********************************************************************************************************************************************/