@charset "utf-8";
/*-------------------------------------
 基本設定
---------------------------------------*/
:root{
  --text-base-page-font-xl: 36px;
  --text-base-page-font-lg: 24px;
  --text-base-page-font-md: 18px;
  --text-base-page-font-nm: 16px;
  --text-base-page-font-sm: 14px;
  --text-base-page-font-xs: 12px;
}
html:has(#text-base-page){
  scroll-behavior: smooth;
}
#text-base-page{
  margin-bottom: 4rem;
  line-height: 1.75;
  font-size: var(--text-base-page-font-nm);
}
#text-base-page img{
  max-width: 100%;
}
#text-base-page h1, 
#text-base-page h2, 
#text-base-page h3, 
#text-base-page h4, 
#text-base-page h5, 
#text-base-page h6{
  line-height: 1.25;
  font-weight: 700;
}
#text-base-page h1{
  font-size: calc(var(--text-base-page-font-xl) * 1.5);
  margin: 0 0 0 0;
}
#text-base-page h2{
  font-size: var(--text-base-page-font-xl);
  margin: 0 0 4rem;
}
#text-base-page h3{
  font-size: var(--text-base-page-font-lg);
  margin: 1.5rem 0 0.75rem;
}
#text-base-page h4{
  font-size: var(--text-base-page-font-md);
  margin: 1.2rem 0 0.5rem;
}
#text-base-page h5{
  font-size: var(--text-base-page-font-nm);
  margin: 1.2rem 0 0.5rem;
}
#text-base-page h6{
  font-size: var(--text-base-page-font-nm);
  margin: 1.2rem 0 0.5rem;
}
#text-base-page p+p{
  margin-top: 1rem;
}
#text-base-page section section+section{
  margin-top: 4rem;
}
@media screen and (max-width:767px){
  :root{
    --text-base-page-font-xl: 6.72vw;
    --text-base-page-font-lg: 5.04vw;
    --text-base-page-font-md: 4.48vw;
    --text-base-page-font-nm: 3.92vw;
    --text-base-page-font-sm: 3.36vw;
    --text-base-page-font-xs: 3.36vw;
  }
  #text-base-page section section+section{
    margin-top: 2rem;
  }
  #text-base-page{
    margin-bottom: 2rem;
  }
  #text-base-page h1{
    font-size: var(--text-base-page-font-xl);
  }
  #text-base-page h2{
    margin: 0 0 2rem;
  }
}

/*-------------------------------------
 テキスト設定
---------------------------------------*/
#text-base-page .text-indent{
  text-indent: 1em;
}
#text-base-page .text-center{
  text-align: center;
}
#text-base-page .text-right{
  text-align: right;
}
#text-base-page .text-well{
  padding: 0.5em;
  background: #d7f2fd;
  text-align: center;
}
#text-base-page .text-strong{
  color: #014DA1;
}
#text-base-page .has-tooltip{
  display: flex;
  justify-content: center;
  align-items: center;
  gap:0.5em;
}
#text-base-page .has-tooltip .tooltip{
  padding: 0.5em;
  display: block;
  position: relative;
  border-radius: 0.5em;
  background: #014DA1;
  font-size: 0.5em;
  color: #fff;
}
#text-base-page .has-tooltip .tooltip::after{
  content: "";
  width: 1rem;
  height: 1rem;
  display: block;
  position: absolute;
  right: -1rem;
  top: 50%;
  transform: translateY(-50%);
  background: #014DA1;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
@media screen and (max-width:767px){
  #text-base-page .has-tooltip {
    flex-direction: column;
    text-align: center;
  }
  #text-base-page .has-tooltip .tooltip::after{
    right: auto;
    top: auto;
    left: 50%;
    bottom: -0.9rem;
    transform: translateY(0);
    transform: translateX(-50%);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
  }
}

/*-------------------------------------
 背景設定
---------------------------------------*/
#text-base-page .bg-odd-even{
  padding: 4rem 0;
}
#text-base-page .bg-odd-even:nth-of-type(odd){
  background: #fff;
}
#text-base-page .bg-odd-even:nth-of-type(even){
  background: #f2f8ff;
}
@media screen and (max-width:767px){
  #text-base-page .bg-odd-even {
      padding: 2rem 0;
  }
}

/*-------------------------------------
 KV
---------------------------------------*/
#text-base-page .kv{
  background: #e2f5fb;
}
#text-base-page .kv h1{
  margin: 0 1em;
}
@media screen and (max-width:767px){
  #text-base-page .kv h1{
    margin: 1rem;
  }
}

/*-------------------------------------
 目次
---------------------------------------*/
.include-toc{
  padding: 1rem;
  border: 1px solid #484848;
}

/*-------------------------------------
 グリッドシステム内の調整
---------------------------------------*/
#text-base-page .grid-container h2:first-of-type,
#text-base-page .grid-container h3:first-of-type,
#text-base-page .grid-container h4:first-of-type,
#text-base-page .grid-container h5:first-of-type,
#text-base-page .grid-container h6:first-of-type {
  margin-top: 0;
}
#text-base-page .grid-container a{
  max-width: 100%;
}

/*-------------------------------------
 base.cssの上書き
---------------------------------------*/
@media screen and (max-width:767px){
  #text-base-page .u-pc-width{
    padding: 0 1rem;
  }
}

/*-------------------------------------
 検索結果
---------------------------------------*/
#text-base-page .include-search-result{
  position: relative;
}
#text-base-page .include-search-result::after{
  content: url(../images/icon-scroll-gray-pointer.webp);
  position: absolute;
  right: 0;
  top: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease;
}
#text-base-page .include-search-result.scroll-over::after{
  opacity: 0;
}
#text-base-page .include-search-result .u-pc-width{
  padding-left: 0;
  padding-right: 0;
}
#text-base-page .include-search-result .p-products-all-item {
  padding-bottom: 0;
  outline: none;
}
#text-base-page .include-search-result .p-products-all-item__item + .p-products-all-item__item {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
#text-base-page .include-search-result .u-pc-width {
  display: contents;
}
#text-base-page .include-search-result .p-products-all-item__results.results-include{
  max-width: 100%;
}
#text-base-page .product-grid{
  user-select: none;
  overflow-x: auto;
}
#text-base-page .include-search-result .productMoreGrid {
  margin-bottom: 1rem;
  width: fit-content;
  display: flex;
  gap: 2rem;
}
#text-base-page .include-search-result .productMoreGrid .p-products-all-item__item {
  width: 300px;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  #text-base-page .include-search-result .p-products-all-item-product {
    display: contents;
  }
}
#text-base-page .include-search-result .p-products-all-item-product__image {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 250/230;
}
#text-base-page .include-search-result .p-products-all-item-product__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#text-base-page .include-search-result .p-products-all-item-product__name {
  margin: 1.25rem 0 0.75rem;
}
#text-base-page .include-search-result .p-products-all-item-product__name__text {
  margin: 0;
  font-size: var(--text-base-page-font-nm);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
#text-base-page .include-search-result .p-products-all-item-product__number {
  font-size: 22px;
}
#text-base-page .include-search-result .p-products-all-item-product__spec__item {
  min-width: 9em;
  padding: 4px 0;
  margin-right: 10px;
}
#text-base-page .include-search-result .p-products-all-item-product__spec__item::after {
  display: none;
}
#text-base-page .include-search-result .p-products-all-item-product__spec__text {
  padding: 4px 0;
  font-size: 12px;
}
#text-base-page .include-search-result .p-products-all-item-product__review{
  width: 100%;
}
#text-base-page .include-search-result .p-products-all-item-product > .p-products-all-item-product__buttons {
  flex-direction: column;
}
#text-base-page .include-search-result .p-products-all-item-product > .p-products-all-item-product__buttons .p-products-all-item-product__link--detail,#text-base-page .include-search-result .p-products-all-item-product > .p-products-all-item-product__buttons .p-products-all-item-product__link--cart {
  flex: 1 1 auto;
  width: 100%;
  margin: 0 auto;
}
#text-base-page .include-search-result .p-products-all-item-product > .p-products-all-item-product__buttons .p-products-all-item-product__link--cart {
  margin-top: 15px;
}
#text-base-page .include-search-result .productMoreButton {
  display: none;
}
#text-base-page .include-search-result .p-products-all-item-product > .p-products-all-item-product__spec{
  margin: 1.25rem 0 0.75rem;
}
#text-base-page .include-search-result .p-products-all-item-product__buttons{
  margin-top: auto;
}
#text-base-page .include-search-result .p-products-all-item-product__buttons a{
  max-width: 100%;
}
#text-base-page .include-search-result--static .product-grid{ /*検索結果ベース＋モデル直指定用の枠*/
  overflow-x: hidden;
}
#text-base-page .include-search-result--static .productMoreGrid{
  width: 100%;
  flex-wrap: wrap;
}
#text-base-page .include-search-result--static .productMoreGrid .p-products-all-item__item {
  width: calc((100% - 2rem - 2rem) / 3);
  display: flex;
  flex-direction: column;
}
#text-base-page .include-search-result--static::after{
  display: none;
}
@media screen and (max-width: 767px) {
  #text-base-page .include-search-result::after{
    content: url(../images/icon-scroll-gray-finger.webp);
  }
  #text-base-page .include-search-result .productMoreGrid {
    grid-template-columns: auto;
    gap: 1rem;
  }
  #text-base-page .include-search-result .productMoreGrid .p-products-all-item__item {
    width: 80vw;
    padding: 1rem 0;
    max-width: none;
  }
  #text-base-page .include-search-result .p-products-all-item-product__name__text{
    margin-bottom: 1rem;
  }
  #text-base-page .include-search-result--static .productMoreGrid{
    gap: 0;
  }
  #text-base-page .include-search-result--static .productMoreGrid .p-products-all-item__item{
    width: 100%;
  }
  #text-base-page .include-search-result--static .productMoreGrid .p-products-all-item__item+.p-products-all-item__item{
    border-top: 1px solid #a3a3a3;
  }
  #text-base-page .include-search-result .js-accordionOpen-search.is-open + .p-products-all-item-product__spec__body.over-seven-specs::after{
    display: none;
  }
}

/*-------------------------------------
レビュー
---------------------------------------*/
#text-base-page .review-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem 2rem;
}
#text-base-page .review-list li {
  width: calc((100% - 48px) / 2);
  display: flex;
}
#text-base-page .review-list__item {
  width: 100%;
  position: relative;
  padding: 2rem 1rem;
  background: #d7f2fd;
  border-radius: 1rem;
}
#text-base-page .review-list__item::before,
#text-base-page .review-list__item::after {
  position: absolute;
  line-height: 1;
}
#text-base-page .review-list__item::before {
  content: url(../images/icon-quote-left.webp);
  top: -1rem;
  left: 1rem;
}
#text-base-page .review-list__item::after {
  content: url(../images/icon-quote-right.webp);
  bottom: -1rem;
  right: 1rem;
}
@media screen and (max-width: 767px) {
  #text-base-page .review-list {
    gap: 2rem 1rem;
  }
  #text-base-page .review-list li {
    width: 100%;
  }
}

/*-------------------------------------
FAQ
---------------------------------------*/
#text-base-page dl.qa+dl.qa{
  margin-top: 1.25rem;
}
#text-base-page dl.qa{
  border: 1px solid #a3a3a3;
}
#text-base-page dl.qa dt{
  padding: 1rem 1rem 1rem calc(1rem + 1.5em);
  background: #eee;
  position: relative;
}
#text-base-page dl.qa dt::before{
  content: "Q.";
  position: absolute;
  left: 1rem;
  top: 1rem;
  color: #004da1;
}
#text-base-page dl.qa dd{
  padding: 1rem 1rem 1rem calc(1rem + 1.5em);
  background: #fff;
  position: relative;
}
#text-base-page dl.qa dd::before{
  content: "A.";
  position: absolute;
  left: 1rem;
  top: 1rem;
  font-weight: 700;
  color: #e43344;
}

/*-------------------------------------
キャンペーン include
---------------------------------------*/
#text-base-page .campaign__panels{
  display: flex;
  flex-wrap: wrap;
  gap:1rem;
}
#text-base-page .campaign__panel{
  width: calc((100% - 1rem * 3) / 4);
}
#text-base-page .c-headline:has(.p-campaign-list__h2){
  display: none;
}
#text-base-page .campaign-name{
  font-weight: 700;
  line-height: 1.25;
}
@media screen and (max-width:767px){
  #text-base-page .campaign__panels{
    gap:1rem;
  }
  #text-base-page .campaign__panel{
    width: calc((100% - 1rem) / 2);
  }
}

/*-------------------------------------
記事一覧 include
---------------------------------------*/
#text-base-page .article_list_wrap{
  background: #fff;
}
#text-base-page .article_list_wrap h2:first-of-type{
  display: none;
}

/*-------------------------------------
受賞履歴 include
---------------------------------------*/
#text-base-page .awards_received_wrap{
  padding: 16px;
  background: #fff;
}
#text-base-page .awards_received_wrap h2{
  margin: 0;
}
#text-base-page .awards_received_wrap p+p{
  margin-top: 0;
}