@charset "UTF-8";

/* ==============================
  共通（PC/SP共通）
============================== */
img {
  width: 100%;
  height: auto;
}

.font-tt {
  font-family: "TTCommons-Regular", sans-serif;
  font-size: 120%;
}

.font-ttL {
  font-family: "TTCommons-Light", sans-serif;
  font-size: 120%;
}

.l-wrapper {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 1.4rem;
  line-height: 1.6;
  font-weight: 400;
  color: #393c41;
  padding-bottom: 8rem;
}

.l-main {
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
}

.l-stack {
  --stack-space: 2.4rem;
}

.l-stack.--xs {
  --stack-space: 0.8rem;
}

.l-stack.--sm {
  --stack-space: 1.6rem;
}

.l-stack.--md {
  --stack-space: 3.2rem;
}

.l-stack.--lg {
  --stack-space: 4.8rem;
}

.l-stack.--xl {
  --stack-space: 6.4rem;
}

.l-stack>*+* {
  margin-top: var(--stack-space);
}

/* セクション
------------------------ ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶ */
.lp-section {
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

.lp-section.--top {
  padding-top: 6.4rem;
}

.lp-section.--bg-gray {
  background-color: #f6f6f6;
  padding: 4rem 0;
}

.lp-section+.lp-section {
  margin-top: 8rem;
}

.lp-section__inner {
  max-width: 1080px;
  margin: 0 auto;
}

.lp-section__inner.--wide {
  max-width: 1240px;
  margin: 0 auto;
}

.lp-section__inner.--narrow {
  max-width: 800px;
}

@media screen and (max-width: 768px) {
  .lp-section {
    padding: 0 15px;
  }

  .lp-section+.lp-section {
    margin-top: 6.4rem;
  }
}

/* 見出し
------------------------ ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶ */
.lp-heading-primary {
  text-align: center;
  color: #000030;
  margin-bottom: 3.2rem;
}

.lp-heading-primary.--border {
  border-bottom: 1px solid currentColor;
  padding-bottom: 1.6rem;
}

.lp-heading-primary__main {
  display: block;
  font-size: 2.4rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  line-height: 1.25;
}

.lp-heading-primary__main.--en {
  font-family: "TTCommons-Regular", sans-serif;
  font-size: 3rem;
  line-height: 1;
}

.lp-heading-primary__sub {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.075em;
}

.lp-heading-primary__sub.--en {
  font-family: "TTCommons-Light", sans-serif;
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 0.8rem;
}

.lp-heading-secondary {
  margin-bottom: 3.2rem;
}

.lp-heading-secondary__line {
  padding: 0.4rem 0 0.4rem 1.6rem;
  border-left: 1px solid #000030;
}

.lp-heading-secondary__line>*+* {
  margin-top: 0.5em;
}

.lp-heading-secondary__main {
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  line-height: 1.6;
}

.lp-heading-secondary__note {
  font-size: 1.4rem;
  line-height: 1;
}

.lp-heading-secondary__note.--en {
  font-family: "TTCommons-Light", sans-serif;
  line-height: 1;
}

/* ラベル
------------------------ ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶ */
.label-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.c-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  border: 1px solid #949494;
  background-color: #fff;
  padding: 0 1.2rem;
  font-size: 0.8rem;
  line-height: 1;
  color: #949494;
}

.c-label.--fill {
  background-color: #949494;
  color: #fff;
}

.c-label__text.--en {
  font-family: "TTCommons-Regular", sans-serif;
  font-size: 120%;
  transform: translateY(0.2em);
}



/* アンカーリンク
------------------------ ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶ */
/* レイアウトの土台 */
.c-nav-anchor {
  --column-gap: 4.8rem;
  --row-gap: 3.2rem;

  padding-bottom: 8rem;
}

/* リスト本体 */
.c-nav-anchor__list {
  display: grid;
  /* 基本設定：最大4カラム。中身に合わせて自動で段落ちする */
  grid-template-columns: repeat(auto-fill, minmax(calc((100% - var(--column-gap) * 3) / 4), 1fr));
  gap: var(--row-gap) var(--column-gap);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media screen and (min-width: 769px) {

  /* アイテムが3つ以下の時だけ、中央寄せに切り替える */
  .c-nav-anchor__list:not(:has(.c-nav-anchor__item:nth-child(4))) {
    display: flex;
    justify-content: center;
  }

  .c-nav-anchor__list:not(:has(.c-nav-anchor__item:nth-child(4))) .c-nav-anchor__item {
    flex: 0 0 22%;
  }
}

/* PC・SP共通で1カラム全幅 */
.c-nav-anchor.--1col .c-nav-anchor__list {
  grid-template-columns: 1fr;
}

@media screen and (min-width: 769px) {
  /* --1col 使用時はアイテム数に関わらずgridを維持し全幅を保つ */
  .c-nav-anchor.--1col .c-nav-anchor__list:not(:has(.c-nav-anchor__item:nth-child(4))) {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: initial;
  }

  .c-nav-anchor.--1col .c-nav-anchor__list:not(:has(.c-nav-anchor__item:nth-child(4))) .c-nav-anchor__item {
    flex: initial;
  }
}

.c-nav-anchor__link {
  display: block;
  color: inherit;
  transition: 0.3s;
}

/* 装飾：下線と矢印 */
.c-nav-anchor.--border .c-nav-anchor__text {
  border-bottom: 1px solid currentColor;
}

.c-nav-anchor__text {
  padding: 0 2rem 1.6rem 0.8rem;
  position: relative;
  display: block;
}

/* 矢印アイコン */
.c-nav-anchor__text::after {
  content: "";
  width: 1rem;
  height: 1rem;
  border-top: solid 1px currentColor;
  border-right: solid 1px currentColor;
  transform: rotate(135deg);
  position: absolute;
  bottom: 2.5rem;
  right: 0.8rem;
  transition: bottom 0.3s;
}

/* ボタンタイプ　　*/
.c-nav-anchorbtn {
  --column-gap: 2.4rem;
  --row-gap: 1.6rem;

  padding-bottom: 8rem;
}

.c-nav-anchorbtn__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc((100% - var(--column-gap) * 2) / 3), 1fr));
  gap: var(--row-gap) var(--column-gap);
  list-style: none;
  padding: 0;
  margin: 0;
}

.c-nav-anchorbtn__link {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000030;
  color: #fff;
  border-radius: 3px;
  transition: 0.3s;
  padding: 2.4rem 3.2rem 2.4rem 2.4rem;
  position: relative;
}

@media screen and (min-width: 769px) {

  /* アイテムが2つ以下の時だけ、中央寄せに切り替える */
  .c-nav-anchorbtn__list:not(:has(.c-nav-anchorbtn__item:nth-child(3))) {
    display: flex;
    justify-content: center;
  }

  .c-nav-anchorbtn__list:not(:has(.c-nav-anchorbtn__item:nth-child(3))) .c-nav-anchorbtn__item {
    flex: 0 0 32%;
  }
}

/* 矢印アイコン */
.c-nav-anchorbtn__link::after {
  content: "";
  width: 1rem;
  height: 1rem;
  border-top: solid 1px currentColor;
  border-right: solid 1px currentColor;
  transform: rotate(135deg);
  position: absolute;
  top: 40%;
  right: 1.8rem;
  transition: bottom 0.3s;
}

@media screen and (max-width: 768px) {
  .c-nav-anchor {
    --column-gap: 2rem;

    padding-bottom: 6.4rem;
  }

  .c-nav-anchor__list {
    grid-template-columns: repeat(auto-fit, minmax(calc(50% - var(--column-gap)), 1fr));
  }

  /* SPで1カラム */
  .c-nav-anchor.--1col-sp .c-nav-anchor__list {
    grid-template-columns: 1fr;
  }

  .c-nav-anchorbtn {
    padding-bottom: 6.4rem;
  }

  .c-nav-anchorbtn__list {
    grid-template-columns: 1fr;
    gap: var(--row-gap) var(--column-gap);
    list-style: none;
    padding: 0;
    margin: 0;
  }
}

/* 横線メニュー
------------------------ ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶ */
.c-nav-menu {
  padding-bottom: 4.8rem;
}

.c-nav-menu__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 2.4rem;
}

.c-nav-menu__link {
  padding: 0.4rem 1.2rem;
  font-size: 1.4rem;
  line-height: 1;
  border-left: 1px solid currentColor;
  transition: all ease .3s;
}

.c-nav-menu__link:first-child {
  border-left: none;
}

@media screen and (max-width: 768px) {
  .c-nav-menu.--wide .c-nav-menu__link:nth-child(odd) {
    border-left: none;
  }

  .c-nav-menu.--wide .c-nav-menu__link {
    width: 50%;
  }

  .c-nav-menu__text {
    text-align: center;
    display: block;
  }
}

/* ボタン
------------------------ ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶ */
.button-wrapper {
  margin-top: 4rem;
  display: flex;
  column-gap: 4rem;
  row-gap: 3.2rem;
  justify-content: center;
  align-items: center;
}

.button-wrapper.--mt-wide {
  margin-top: 8rem;
}

.lp-button {
  background-color: #000030;
  border: 1px solid #000030;
  border-radius: 3px;
  display: block;
  padding: 2.4rem 1.6rem;
  width: 100%;
  min-height: 6.8rem;
  max-width: 80rem;
  color: #fff;
  text-align: center;
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.2;
  position: relative;
  transition: all ease 0.4s;
}

.icon-blank {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.8rem;

  /* SVGをマスクとして設定 */
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.973 14.973"><g transform="translate(-2.5 -2.293)"><path d="M15,3h4.589V7.589" transform="translate(-2.823)" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><path d="M10,11.412,18.412,3" transform="translate(-1.647)" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><path d="M14.471,11.353v4.589a1.53,1.53,0,0,1-1.53,1.53H4.53A1.53,1.53,0,0,1,3,15.942V7.53A1.53,1.53,0,0,1,4.53,6H9.118" transform="translate(0 -0.706)" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g></svg>');

  mask-repeat: no-repeat;
  mask-size: contain;
  transition: all ease 0.4s;
  background-color: #393c41;
}

.icon-blank.--white {
  background-color: #fff;
}

.icon-blank.--navy {
  background-color: #000030;
}

.lp-button.--bg-white {
  background-color: #fff;
  color: #000030;
}

@media screen and (max-width: 768px) {
  .button-wrapper:has(.lp-button:nth-last-child(n+3)) {
    flex-direction: column;
  }
}

/* swiper
------------------------ ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶ */
.common-swiper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.common-swiper .swiper-slide {
  height: auto;
}

.common-swiper .swiper-pagination-bullet-active {
  background-color: #ccc;
}

.common-swiper .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
}

/* フェード時の重なりをスムーズに */
.common-swiper .swiper-slide {
  opacity: 0 !important;
  transition-property: opacity;
}

.common-swiper .swiper-slide-active {
  opacity: 1 !important;
}

.swiper-button-prev, .swiper-button-next {
  color: transparent;
}

/* コンテンツレイアウト
------------------------ ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶ */
.lp-media+.lp-media {
  margin-top: 6.4rem;
}

.lp-media__inner {
  display: flex;
  flex-wrap: wrap;
  column-gap: 5%;
}

.lp-media__inner.--item-center {
  align-items: center;
}

.lp-media__inner.--re {
  flex-direction: row-reverse;
}

.lp-media__img {
  width: 40%;
}

.lp-media__text {
  width: 55%;
}

.lp-media__heading {
  font-size: 1.6rem;
  letter-spacing: 0.18em;
  font-weight: 600;
  margin-bottom: 2.4rem;
}

.lp-media__desc+.lp-media__desc {
  margin-top: 1.6rem;
}

@media screen and (max-width: 768px) {

  .lp-media__inner,
  .lp-media__inner.--re {
    flex-direction: column-reverse;
    column-gap: 0;
    row-gap: 3.2rem;
  }

  .lp-media__img {
    width: 100%;
    margin: 0 auto;
  }

  .lp-media__text {
    width: 100%;
  }
}

/* 半分レイアウト
------------------------ ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶ */
.c-grid-half {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -2rem -4rem;
}

.c-grid-half.--re {
  flex-direction: row-reverse;
}

.c-grid-half__item {
  padding: 0 2rem 4rem;
  width: 50%;
}

@media screen and (max-width: 768px) {
  .c-grid-half {
    margin: 0 -1.5rem -4rem;
  }

  .c-grid-half__item {
    padding: 0 1.5rem 4rem;
  }

  /* SP 1カラム */
  .c-grid-half.--1col-sp {
    flex-direction: column;
    margin: 0;
    row-gap: 4rem;
  }

  .c-grid-half.--1col-sp.--gap-wide {
    margin-top: 6.4rem;
  }

  .c-grid-half.--1col-sp.--sp-re {
    flex-direction: column-reverse;
  }

  .c-grid-half.--1col-sp .c-grid-half__item {
    width: 100%;
    max-width: none;
    padding: 0;
  }
}

/* テーブルレイアウト
------------------------ ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶ */
.c-def-list {
  width: 100%;
  margin: 0;
  padding: 0;
}

.c-def-list__item {
  display: grid;
  grid-template-columns: 160px 1fr;
  border-bottom: 1px solid #eee;
}

.c-def-list__item:last-child {
  border-bottom: none;
}

.c-def-list__term {
  padding: 2rem 1.6rem;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.8;
  display: flex;
  align-items: flex-start;
}

.c-def-list__desc {
  padding: 2rem 1.6rem;
  font-size: 1.4rem;
  line-height: 1.8;
}

.c-def-list__desc p+p {
  margin-top: 0.8rem;
}

.c-def-list__desc a {
  border-bottom: solid 1px #393c41;
  transition: opacity 0.3s;
}

.c-def-list__desc a:hover {
  opacity: 0.7;
}

@media screen and (max-width: 768px) {
  .c-def-list__item {
    grid-template-columns: 1fr;
  }

  .c-def-list__term {
    padding: 1.6rem 1.2rem 0.8rem;
    font-weight: 600;
  }

  .c-def-list__desc {
    padding: 0 1.2rem 1.6rem;
  }
}

/* u-komiレビュー星デザイン調整
------------------------ ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶ */

.review-summary-container .starRating, .review-widget-summary-container .starRating {
    display: flex !important;
    align-items: center;
}

.review-summary-container .starRating .reviewNumber {
  line-height: 1 !important;
}

.starRating .ukmcustomfont-ukm-full-star:before,
.starRating .ukmcustomfont-ukm-half-star:before,
.starRating .ukmcustomfont-ukm-blank-star:before {
  width: 22px;
  height: 19px;
  display: block;
  content: "";
}
.starRating .ukmcustomfont-ukm-full-star:before {
  background-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.0224 0.354309L13.3892 7.30763H21.0485L14.852 11.605L17.2189 18.5583L11.0224 14.261L4.82585 18.5583L7.1927 11.605L0.996193 7.30763H8.6555L11.0224 0.354309Z" fill="%237E8C91"><path></path></path></svg>');
}
.starRating .ukmcustomfont-ukm-half-star:before {
  background-image: url("data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e %3c!-- Generator: Adobe Illustrator 26.5.0%2c SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e %3csvg version='1.1' id='%e3%83%ac%e3%82%a4%e3%83%a4%e3%83%bc_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 22 19' style='enable-background:new 0 0 22 19%3b' xml:space='preserve'%3e%3cstyle type='text/css'%3e.st0%7bfill:%237E8C91%3b%7d .st1%7bfill:none%3b%7d%3c/style%3e%3cpath class='st0' d='M11.0223999%2c0.354309'/%3e%3crect class='st1' /%3e%3cg%3e%3cpolygon class='st0' points='11.0216675%2c14.2614746 11.0216675%2c0.3564453 8.6555176%2c7.3076172 0.9962158%2c7.3076172 7.192688%2c11.6049805 4.8258667%2c18.5582886 '/%3e%3c/g%3e%3cg%3e%3cpath class='st0' d='M11.0223846%2c2.5266323l1.7041521%2c5.0065622l0.1614895%2c0.4744396h0.5011702h5.4216137l-4.3577337%2c3.022151 l-0.4338903%2c0.300909l0.1701508%2c0.4998703l1.6820383%2c4.9413719l-4.4500685-3.0861416l-0.3989105-0.2766504l-0.3989096%2c0.2766504 L6.1733403%2c16.771965l1.6820164-4.9414101l0.1701503-0.4998608l-0.4338903-0.300909l-4.3577342-3.022151h5.4216142h0.5011597 l0.1615-0.4744301L11.0223846%2c2.5266323 M11.0223961%2c0.3543053L8.6554966%2c7.3076344H0.9961965l6.1964998%2c4.2973604 l-2.3668499%2c6.9533091l6.1965494-4.2972994l6.1965008%2c4.2972994l-2.3669004-6.9533091l6.1964998-4.2973604h-7.6592999 L11.0223961%2c0.3543053L11.0223961%2c0.3543053z'/%3e%3c/g%3e%3c/svg%3e");
}
.starRating .ukmcustomfont-ukm-blank-star:before {
  background-image: url("data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e %3c!-- Generator: Adobe Illustrator 26.5.0%2c SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e %3csvg version='1.1' id='%e3%83%ac%e3%82%a4%e3%83%a4%e3%83%bc_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 22 19' style='enable-background:new 0 0 22 19%3b' xml:space='preserve'%3e%3cstyle type='text/css'%3e.st0%7bfill:%237E8C91%3b%7d .st1%7bfill:none%3b%7d%3c/style%3e%3cg%3e%3cg%3e%3cpath class='st0' d='M11.0223846%2c2.5266323l1.7041521%2c5.0065622l0.1614895%2c0.4744396h0.5011702h5.4216137l-4.3577337%2c3.022151 l-0.4338903%2c0.300909l0.1701508%2c0.4998703l1.6820383%2c4.9413719l-4.4500685-3.0861416l-0.3989105-0.2766504l-0.3989096%2c0.2766504 L6.1733403%2c16.771965l1.6820164-4.9414101l0.1701503-0.4998608l-0.4338903-0.300909l-4.3577342-3.022151h5.4216142h0.5011597 l0.1615-0.4744301L11.0223846%2c2.5266323 M11.0223961%2c0.3543053L8.6554966%2c7.3076344H0.9961965l6.1964998%2c4.2973604 l-2.3668499%2c6.9533091l6.1965494-4.2972994l6.1965008%2c4.2972994l-2.3669004-6.9533091l6.1964998-4.2973604h-7.6592999 L11.0223961%2c0.3543053L11.0223961%2c0.3543053z'/%3e%3c/g%3e%3crect class='st1' width='22' height='19'/%3e%3c/g%3e%3c/svg%3e");
}

.starRatingNumber span {
  color: #393c41 !important;
}

/* チェック製品非表示
------------------------ ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶ */
div#recently-checked {
    display: none;
}