@charset "UTF-8";
/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ 
共通のスタイル調整
*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
/* 投稿ページのみヘッダーを非表示 */
.single-lp #header {
  display: none;
}

/* 固定ページのフッターを非表示 */
.page-template-default .custom-footer-text {
  display: none;
}

/* 通常投稿ページのフッターを非表示 */
.post-template-default .custom-footer-text {
  display: none;
}

/* フロントページのフッターを非表示 */
.front-top-page .custom-footer-text {
  display: none;
}

/* ボタンサイズ大の幅のカスタマイズ */
.btn-l {
  padding-left: 0;
  padding-right: 0;
  width: 40%;
  margin: 0 auto;
}
@media (max-width: 835px) {
  .btn-l {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding-left: 5%;
    padding-right: 5%;
  }
}

.btn-l::after {
  display: none;
}

/* 表のテキストを自動改行させる */
.product-box td,
.product-box th {
  white-space: normal;
}
@media (max-width: 835px) {
  .product-box td,
  .product-box th {
    padding: 5px !important;
  }
}

/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ 
『見出し』のスタイル
*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
/*Cocoonの標準の見出しデザインをリセット*/
.text01 .title,
.text02 .title,
.text03 .title,
.text04 .title,
.text05 .title,
.text06 .title {
  font-size: 18px;
  font-weight: normal;
  line-height: 1.8;
  background: none;
  border: none;
  padding: 0;
}

/* 見出しパターン１のスタイル */
.text01 {
  border-top: 2px solid var(--wp--preset--color--key-color);
  border-bottom: 2px solid var(--wp--preset--color--key-color);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 95%;
  padding: 10px 5%;
  margin: 0 auto;
}
.text01 .catch-copy {
  margin-bottom: 0;
}
.text01 .title {
  margin-top: 10px;
}

/* 見出しパターン２のスタイル*/
.text02 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 95%;
  padding: 10px 5% 30px;
  margin: 0 auto;
}
.text02 .catch-copy {
  margin-bottom: 0;
}
.text02 .title {
  margin-top: 0;
  position: relative;
}
.text02 .title::after {
  position: absolute;
  content: "";
  display: block;
  width: 35px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: -20px;
  background: var(--wp--preset--color--key-color);
  border-radius: 10px;
}

/* 見出しパターン３のスタイル*/
.text03 {
  border: 6px solid var(--wp--preset--color--key-color);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 95%;
  padding: 10px 10%;
  margin: 0 auto;
}
.text03 .catch-copy {
  margin-bottom: 0;
}
.text03 .title {
  margin-top: 0;
}

/* 見出しパターン４のスタイル*/
.text04 {
  border: 2px solid var(--wp--preset--color--key-color);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 95%;
  padding: 10px 10%;
  margin: 0 auto;
  position: relative;
}
.text04 .catch-copy {
  margin-bottom: 0;
}
.text04 .title {
  margin-top: 0;
}
.text04::before, .text04::after {
  position: absolute;
  left: 47%;
  content: "";
  height: 0;
  width: 0;
}
.text04::before {
  top: 100%;
  border: 20px solid;
  border-color: transparent;
  border-top-color: var(--wp--preset--color--key-color);
  margin-left: -9px;
}
.text04::after {
  top: 99%;
  border: 19px solid;
  border-color: transparent;
  border-top-color: #fff;
  margin-left: -8px;
}

/* 見出しパターン５のスタイル*/
.text05 {
  width: 95%;
  max-width: 95%;
  padding: 0 10% 0 0;
}
.text05 .catch-copy {
  margin-bottom: 0;
}
.text05 .title {
  margin-top: 0;
  border-bottom: 4px solid var(--wp--preset--color--key-color);
}

/* 見出しパターン６のスタイル*/
.text06 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 95%;
  padding: 10px 0;
  margin: 0 auto;
  position: relative;
}
.text06 .catch-copy {
  margin-bottom: 0;
}
.text06 .title {
  margin-top: 0;
}
.text06::before, .text06::after {
  position: absolute;
  content: "";
  display: block;
  background: var(--wp--preset--color--key-color);
  height: 1.5px;
  width: 100px;
}
.text06::before {
  top: 50%;
  left: -110px;
}
.text06::after {
  top: 50%;
  right: -110px;
}

/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ 
『ボタン』のスタイル
*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
/* ボタンの共通スタイル*/
.text-on-btn {
  margin-bottom: 0 !important;
}

.btn-top-margin {
  margin-top: 10px !important;
}

/* ボタンパターン3のスタイル*/
.btn01 {
  margin: 20px auto;
  border-radius: 5px;
  -webkit-animation: poyon 2s infinite;
          animation: poyon 2s infinite;
}

@-webkit-keyframes poyon {
  0% {
    -webkit-transform: scale(1, 1) translate(0%, 0%);
            transform: scale(1, 1) translate(0%, 0%);
  }
  15% {
    -webkit-transform: scale(0.97, 0.97) translate(0%, 3%);
            transform: scale(0.97, 0.97) translate(0%, 3%);
  }
  30% {
    -webkit-transform: scale(1.05, 0.95) translate(0%, 5%);
            transform: scale(1.05, 0.95) translate(0%, 5%);
  }
  50% {
    -webkit-transform: scale(0.95, 1.1) translate(0%, -5%);
            transform: scale(0.95, 1.1) translate(0%, -5%);
  }
  70% {
    -webkit-transform: scale(1.03, 0.98) translate(0%, 3%);
            transform: scale(1.03, 0.98) translate(0%, 3%);
  }
  100% {
    -webkit-transform: scale(1, 1) translate(0%, 0%);
            transform: scale(1, 1) translate(0%, 0%);
  }
}

@keyframes poyon {
  0% {
    -webkit-transform: scale(1, 1) translate(0%, 0%);
            transform: scale(1, 1) translate(0%, 0%);
  }
  15% {
    -webkit-transform: scale(0.97, 0.97) translate(0%, 3%);
            transform: scale(0.97, 0.97) translate(0%, 3%);
  }
  30% {
    -webkit-transform: scale(1.05, 0.95) translate(0%, 5%);
            transform: scale(1.05, 0.95) translate(0%, 5%);
  }
  50% {
    -webkit-transform: scale(0.95, 1.1) translate(0%, -5%);
            transform: scale(0.95, 1.1) translate(0%, -5%);
  }
  70% {
    -webkit-transform: scale(1.03, 0.98) translate(0%, 3%);
            transform: scale(1.03, 0.98) translate(0%, 3%);
  }
  100% {
    -webkit-transform: scale(1, 1) translate(0%, 0%);
            transform: scale(1, 1) translate(0%, 0%);
  }
}
/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ 
『口コミボックス』のスタイル
*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
.word-style p {
  line-height: 1.3;
  margin-bottom: 1rem;
}
.word-style .rating-number {
  display: none;
}
.word-style .wp-block-columns {
  margin-bottom: 1rem;
}

/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ 
『商品説明』のスタイル
*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
.product-box {
  position: relative;
  overflow: hidden;
}
.product-box p {
  line-height: 1.5;
}
.product-box .top-ribbon {
  position: absolute;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  top: 12px;
  left: -40px;
  padding: 0 40px;
}
.product-box .rating-number {
  display: none;
}
.product-box .margin-adjust1 {
  margin-bottom: 0;
}
.product-box .margin-adjust2 {
  margin-top: 10px;
}
.product-box .about-title {
  border-bottom: 1px solid #2ca9e1;
}

/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ 
『フローティングボタン』のスタイル
*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
/* フローティングボタン１のスタイル */
.block-box.floating {
  position: fixed;
  bottom: 0;
  left: 0;
  margin-bottom: 0 !important;
  padding: 10px 0;
  width: 100%;
  border: 0;
}

.block-box.floating.bg-1 {
  background: rgba(0, 0, 0, 0.5);
}

.block-box.floating.bg-2 {
  background: rgba(255, 255, 255, 0);
  padding-bottom: 0;
}

/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ 
『離脱防止用ポップアップ』のスタイル
*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
#id_wdp_border {
  width: 100vw;
  height: 10px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.modal {
  display: none;
  height: 100vh;
  position: fixed;
  top: -28px;
  left: 0;
  width: 100%;
  z-index: 99999;
}

.modal__bg {
  background: rgba(0, 0, 0, 0.5);
  height: 100vh;
  position: absolute;
  width: 100%;
}

.modal__content {
  background: #fff;
  left: 50%;
  padding: 40px;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 50%;
}

//LP記事のタイトルを非表示にする
.post-type-lp .entry-title {
display: none;
}