/*
 Theme Name:   Storefront Child
 Theme URI:    http://trs-exclusive.test
 Description:  Storefrontの子テーマ
 Author:       koyama
 Author URI:   http://example.com
 Template:     storefront
 Version:      1.0.0
 Text Domain:  storefront-child
*/

/* ここにカスタマイズCSSを記述 */

.bl_notice {
  text-align: center;
  margin: 0px auto 0;
  padding-right: 15px;
  padding-left: 15px;
}

.bl_notice.bl_notice__maxSm {
  max-width: 480px;
}

.bl_notice_txt {
  font-size: 1rem;
  letter-spacing: 0.1em;
  line-height: 2;
}

.bl_notice_empTxt {
  color: #e25c00;
  font-size: 0.9em;
  font-weight: bold;
}

/* 装飾向けヘルパークラス */
/* フォントカラー */
.hp_textOlange { color: #f08437 !important; }
.hp_textCGray { color: #68666c !important; }
.hp_textNavy{ color: #1d4763 !important; }
.hp_textMuted { color: #aaabab !important; }
.hp_textWhite { color: #fcfcfc !important; }
.hp_textBlack { color: #150c15 !important; }
.hp_textRed { color: #d13209 !important; }
.hp_textYellow {color: #ffde00 !important;}
.hp_textBlue { color: #0068b7 !important; }
.hp_textGreen { color: #00a040 !important; }

/* フォントサイズ */
.hp_fsSm { font-size: 0.875rem !important; }
.hp_fsMd { font-size: 1rem !important; }
.hp_fsLg { font-size: 1.25rem !important; }
.hp_fsXl { font-size: 1.5rem !important; }

/* 太さ */
.hp_fwNormal { font-weight: 400 !important; }
.hp_fwBold { font-weight: 700 !important; }

/* テキスト配置 */
.hp_textLeft { text-align: left !important; }
.hp_textCenter { text-align: center !important; }
.hp_textRight { text-align: right !important; }

/* 余白 */
.mt0 { margin-top: 0 !important; }
.mb0 { margin-bottom: 0 !important; }
.mtSm { margin-top: 0.5rem !important; }
.mbSm { margin-bottom: 0.5rem !important; }
.mtMd { margin-top: 1rem !important; }
.mbMd { margin-bottom: 1rem !important; }
.mtLg { margin-top: 2rem !important; }
.mbLg { margin-bottom: 2rem !important; }


/* ショップからのお知らせ */
.bl_info{
  width: 100%;
  text-align: center;
  background-color: #eee;
  margin: 0 auto;
  padding: 3px 5px;
  transform: translateY(-15px);
}
.bl_info a{
  display: block;
  width: 100%;
  color: #150c15;
  text-decoration: none;
  text-align: center;
}

.bl_info a:hover,
.bl_info a:focus{
  text-decoration: underline;
  opacity: .8;
}

.products.columns-3{
  display: flex!important;
  flex-wrap: wrap!important;
  column-gap: 1%!important;
  row-gap: 50px!important;
}

.products.columns-3::before{
  display: none!important;
}

.products.columns-3 li{
  width: 49%!important;
  margin-bottom:0!important;
}

.products.columns-3 li img{
  display: block;
  margin-bottom: 10px!important;
}

.storefront-sorting {
  margin-top: 50px;
}

slect{
  font-size: 18px!important;
  padding: 5px!important;
}

.js-fullwidth {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
}

@media screen and (min-width: 750px) {
  .hp_fsLg { font-size: 1.5rem !important; }
  .hp_fsXl { font-size: 2rem !important; }
  .bl_notice{
    margin-top: -60px;
  }
}

/* デフォルトスタイルのブレイクポイント */
@media (min-width: 768px) {

  .page-template-template-fullwidth-php .site-main ul.products.columns-3 li.product,
  .page-template-template-fullwidth-php .header-widget-region ul.products.columns-3 li.product,
  .page-template-template-homepage-php .site-main ul.products.columns-3 li.product,
  .page-template-template-homepage-php .header-widget-region ul.products.columns-3 li.product,
  .storefront-full-width-content .site-main ul.products.columns-3 li.product,
  .storefront-full-width-content .header-widget-region ul.products.columns-3 li.product{
      width: 18%!important;
      margin-right:0!important;
  }
    .products.columns-3 .product-category.product img {
      margin-bottom: 20px !important;
    }

    .bl_info{
      transform:translateY(-60px);
    }
}

@media screen and (min-width: 1024px) {
  .hp_fsLg { font-size: 1.75rem !important; }
  .hp_fsXl { font-size: 2.25rem !important; }
}

.mdUp_br{
  display: none!important;
}

/* 商品ページの「h2説明」の項目非表示 */
.single-product .woocommerce-tabs .description_tab {
    display: none;
}

.single-product .woocommerce-tabs ul.tabs {
    border-top: none; /* 上線を消す */
}

.site-info{
  display: none!important;
}

.site-footer{
  padding-bottom: 1.6em!important;
}

.footer-widgets{
  padding-top:2em!important;
}

/* ShopページのH1だけを下に50px移動 */
.post-type-archive-product h1.page-title {
  transform: translateY(50px);
}

/* 買い物カゴにアイテムがない時の顔文字画像 非表示 */
.wc-block-cart__empty-cart__title.with-empty-cart-icon:before{
  display: none!important;
}

.single-product div.product h2,
.single-post article.post h2{
  padding-bottom: 10px;
  border-bottom: 4px solid #e25c00;
  font-size: 1.75rem;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: .5em;
}

.single-product div.product h3,
.single-post article.post h3 {
  padding-bottom: 6px;
  border-bottom: 2px solid #e25c00;
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: .5em;
}

.single-product div.product h4,
.single-post article.post h4{
  padding-left: 6px;
  border-left: 2px solid #e25c00;
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: .5em;
}

.single-product div.product h5,
.single-post article.post h5 {
  color: #e25c00;
  font-size: 1.125rem;
  font-weight: bold;
	margin-bottom: .5em;
}

.single-product div.product h6,
.single-post article.post h6 {
  font-size: 1.125rem;
	margin-bottom: .5em;
}

.single-product div.product button,
.single-post article.post button {
  display: inline-block;
  width: 300px;
  max-width: 100%;
  color: #fff;
  font-size: 1.125rem;
	text-align: center;
  text-decoration: none;
  background-color: #e25c00;
  border: 2px solid transparent;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
  box-sizing: border-box;
	padding: 20px;
	position: relative;
	transition: .25s;
}

.single-product div.product button:focus,
.single-product div.product button:hover,
.single-post article.post button:focus,
.single-post article.post button:hover {
  background-color: #fff;
  border-color: currentColor;
  color: #e25c00;
}

.single-product div.product .bl_vertTable,
.single-post article.post .bl_vertTable {
  border: 1px solid #ddd;
  margin-bottom: 25px;
}

.single-product div.product .bl_vertTable table,
.single-post article.post .bl_vertTable table {
  width: 100%;
  text-align: center;
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: 0;
}

.single-product div.product .bl_vertTable thead tr,
.single-post article.post .bl_vertTable thead tr {
  background-color: #efefef;
}

.single-product div.product .bl_vertTable th,
.single-post article.post .bl_vertTable th {
  padding: 15px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  vertical-align: middle;
}

.single-product div.product .bl_vertTable td,
.single-post article.post .bl_vertTable td {
  padding: 15px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  vertical-align: middle;
}

.single-product div.product .bl_vertTable th:last-child,
.single-post article.post .bl_vertTable td:last-child {
  border-right-width: 0;
}

.single-product div.product .bl_vertTable tbody tr:last-child td,
.single-post article.post .bl_vertTable tbody tr:last-child td{
  border-bottom-width: 0;
}

.single-product div.product .bl_priceTable,
.single-post article.post .bl_priceTable {
  border-right: 0;
  max-width: 1024px;
  height: 430px;
  border-top: 1px solid #aaa;
  border-left: 1px solid #aaa;
  margin: 0 calc(50% - 50vw) 0 auto;
  overflow-x: scroll;
}

.single-product div.product .bl_priceTable table,
.single-post article.post .bl_priceTable table {
  width: 780px;
  border-collapse: separate;
  margin-top: -1px;
}

.single-product div.product .bl_priceTable th,
.single-product div.product .bl_priceTable td,
.single-post article.post .bl_priceTable th,
.single-post article.post .bl_priceTable td {
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  padding: 0.5em;
}

.single-product div.product .bl_priceTable th:last-child,
.single-product div.product .bl_priceTable td:last-child,
.single-post article.post .bl_priceTable th:last-child,
.single-post article.post .bl_priceTable td:last-child{
  border-right: 0;
}

.single-product div.product .bl_priceTable thead th,
.single-post article.post .bl_priceTable thead th{
  background-color: #d2f4ff;
  border-top: 1px solid #aaa;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  position: sticky;
  top: 0px;
}

.single-product div.product .bl_priceTable thead th:last-child,
.single-post article.post .bl_priceTable thead th:last-child {
  border-right: 0;
}

.single-product div.product .bl_priceTable tbody tr:nth-child(2n),
.single-post article.post .bl_priceTable tbody tr:nth-child(2n) {
  background-color: #eee;
}

.single-product div.product .bl_priceTable tbody th,
.single-post article.post .bl_priceTable tbody th {
  width: 40%;
  font-weight: bold;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
}

.single-product div.product .bl_priceTable tbody th:last-child,
.single-post article.post .bl_priceTable tbody th:last-child{
  border-bottom: 0;
}

.woocommerce-tabs ul,
.single-post article.post ul {
  padding-left: 0;
  list-style-type: none;
}
.woocommerce-tabs ul > *:last-child ,
.single-post article.post ul > *:last-child {
  margin-bottom: 0;
}

.woocommerce-tabs ul > li,
.single-post article.post ul > li {
  position: relative;
  padding-left: 1em;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.woocommerce-tabs ul > li::before,
.single-post article.post ul > li::before {
  content: '';
  position: absolute;
  top: .5em;
  left: 0;
  display: block;
  width: .4em;
  height: .4em;
  background-color: #e25c00;
  border-radius: 50%;
}

.single-product div.product ol,
.single-post article.post ol {
  counter-reset: bl_orderList;
  padding-left: 0;
  list-style-type: none;
}

.single-product div.product ol > *:last-child,
.single-post article.post ol > *:last-child {
  margin-bottom: 0;
}

.single-product div.product ol > li,
.single-post article.post ol > li {
  position: relative;
  padding-left: 1em;
  margin-bottom: 10px;
}

.single-product div.product ol > li::before,
.single-post article.post ol > li::before {
  content: counter(bl_orderList) '. ';
  position: absolute;
  top: 0;
  left: 0;
  color: #e25c00;
  font-weight: bold;
  counter-increment: bl_orderList;
}

.single-product div.product ol ol,
.single-post article.post ol ol {
  margin-top: 10px;
  counter-reset: bl_childOrderList;
  padding-left: 0;
  list-style-type: none;
}

.single-product div.product ol ol > *:last-child,
.single-post article.post ol ol > *:last-child {
  margin-bottom: 0;
}

.single-product div.product ol ol > li,
.single-post article.post ol ol > li {
  position: relative;
  padding-left: 1em;
  margin-top: 10px;
}

.single-product div.product ol ol > li::before,
.single-post article.post ol ol > li::before {
  content: counter(bl_childOrderList) '. ';
  position: absolute;
  top: 0;
  left: 0;
  color: #e25c00;
  counter-increment: bl_childOrderList;
}

/* 投稿ページのみ投稿者、更新日非表示 */
body.single-post .posted-on,
body.single-post .post-author {
  display: none !important;
}

/* 登録フォーム・ログインフォームの幅を統一 */
.woocommerce-account form {
    max-width: 400px;
    margin: 0 auto;
}

/* ボタン色の変更 */
.woocommerce-account button.button {
    background-color: #0073e6;
    color: #fff;
}

.hp_bgMGray {
  background-color: #d2ddde !important;
}

.ly_mv {
	max-width: 1064px;
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
}

.bl_media {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.bl_media_txt {
  color: #150c15;
  font-size: 1rem;
  line-height: 2;
  text-align: justify;
  margin-bottom: 1.25em;
}
.bl_media_imgWrap{
  margin-bottom: 35px;
}
.bl_media_imgWrap img {
  width: 100%;
}

.bl_media_body.bl_media_body__centered {
  text-align: center;
}

.bl_footerCta {
  background-color: #144da0;
}
.bl_footerCta_txt {
  font-size: 1rem;
  color: #fcfcfc;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 15px;
}
.bl_footerCta_ttl {
  font-size: 1.5rem;
  color: #fcfcfc;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1.25;
  margin-bottom: 15px;
}
.bl_footerCta_btn {
  width: 100%!important;
  max-width: 200px!important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex!important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #144da0!important;
  font-size: 1rem!important;
  font-weight: bold!important;
  text-align: center!important;
  text-decoration: none!important;
  letter-spacing: 0.1em!important;
  line-height: 1!important;
  background-color: #fcfcfc!important;
  margin: 0 auto!important;
  padding: 1em 0.625em!important;
}
.bl_footerCta_btn:hover, .bl_footerCta_btn:focus {
  color: #fcfcfc!important;
  background-color: #f08437!important;
  outline: none!important;
}

.el_btn {
  display: inline-block;
  font-size: 1rem;
  min-width: 214px;
  color: #fcfcfc;
  font-weight: bold;
  text-align: center;
  line-height: 1.25;
  letter-spacing: 0.1em;
  background-color: #68666c;
  border: 2px solid transparent;
  padding: 1.25em;
}
.el_btn:hover, .el_btn:focus {
  text-decoration: none;
  color: #68666c;
  background-color: #fcfcfc;
  border-color: currentColor;
}

@media screen and (max-width:750px) {
	.post-type-archive-product *{
		letter-spacing: 0.1em;
	}
	.post-type-archive-product h1.page-title{
		font-size: 2em;
		transform: translateY(0px);
	}

	.post-type-archive-product p{
		line-height: 1.75;
	}
	.site-branding .site-title a{
		display: inline-block;
		font-size: 18px;
		line-height: 2;
	}

	body.home.post-type-archive-product .site-header {
		margin-bottom: 0px;
	}

	.single-product div.product .bl_vertTable,
	.single-post article.post .bl_vertTable {
    border-right-width: 0;
    overflow-x: auto;
  }

  .single-product div.product .bl_vertTable table,
	.single-post article.post .bl_vertTable table {
    width: auto;
    min-width: 100%;
  }

  .single-product div.product .bl_vertTable th,
	.single-post article.post .bl_vertTable td {
    white-space: nowrap;
  }

  .single-product div.product .bl_vertTable th:last-child,
	.single-post article.post .bl_vertTable td:last-child {
    border-right-width: 1px;
  }
}

@media screen and (min-width:750px) {
  .ly_mv {
		padding-top: 0;
		padding-bottom: 0;
	}

  .sm_br {
		display: none !important;
	}

  .mdUp_br{
    display: block!important;
  }

  .bl_media {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 6.015037594% 5.8270676692% 8.0827067669%;
  }
  .bl_media_body {
    max-width: 46.170212766%;
    padding: 1.25em;
  }
  .bl_media_imgWrap {
    max-width: 50%;
    margin-bottom: 0;
  }
  .bl_media_body.bl_media_body__centered .bl_media_txt {
    text-align: center;
  }
}

@media screen and (min-width: 1024px) {
  .lg_bgGray {
    background-color: #d2ddde !important;
  }
}

.lg_br{
  display: none!important;
}

/* ■■■■アコーディオンメニュー ■■■■ */
/* ▼ FAQページ（ID=440）専用アニメーション */
body.page-id-440 .wp-block-details {
  overflow: hidden!important;
  transition: all 0.4s ease!important;
}

/* ▼ 開いた時のアニメーション */
body.page-id-440 .wp-block-details[open] {
  animation: faqDetailsOpen 0.4s ease!important;
}

/* ▼ 開くときの動き（フェード＋スライド） */
@keyframes faqDetailsOpen {
  from {
    opacity: 0!important;
    transform: translateY(-4px)!important;
  }

  to {
    opacity: 1!important;
    transform: translateY(0)!important;
  }
}

/* ▼ summary 部分の見た目（クリックできる感） */
body.page-id-440 .wp-block-details summary {
  cursor: pointer!important;
  transition: color 0.3s ease!important;
}

body.page-id-440 .wp-block-details summary:hover {
  color: #0073aa!important;
  /* 任意カラー */
}

/* デフォルトスタイル */
@media screen and (max-width: 568px) {
  .col-full {
    margin-right: 5px !important;
    margin-left: 8px !important;
  }
}

@media screen and (max-width:500px) {
	.site-branding .site-title a{
		font-size: 14px;
	}
  .products.columns-3 .single-product div.product ul > li::before, .single-post article.post ul > li::before{
    display:none!important;
  }

  .products.columns-3 .single-product div.product ul > li, .single-post article.post ul > li{
    padding-left:0!important;
  }

  .entry-title,
  .woocommerce-products-header__title{
    font-size: 26px!important;
  }
}