@charset "UTF-8";

/* laquan.comの共通スタイルシートです。 */
/*
    ------------MEMO-------------
    1,header
    2,footer
    3,common（laquan.com共通）
    4,template（一部共通）

    補足：
    「 --- ベースからの変更があればここに追加 --- 」については、
    サイト色に合わせて変更やサイズ特有の変更のみ記述してください。

    font-size(head,ttl,textパーツ), padding, marginについて
    base_common.cssで変更を加える。

    新規ブロック,新規レイアウト追加の場合
    全サイト共通して使用するもの base-common.css
    固有使用するもの css/com_style.css
*/
/*=============================
  General
  =============================*/
a, a img {
  transition: .3s ease-in-out;
}

a:hover, a:hover strong {
  text-decoration: none;
  opacity: 0.8;
}

a img {
  background-color: rgba(255, 255, 255, .01);
}

a:hover img {
  opacity: 0.85;
}

/*=============================
  2,header
  =============================*/
/* ここにcom_header.cssが入る */
#header {
  font-size: 14px;
}

.header__logo a img {
  vertical-align: baseline;
}

.s20th-sub-menu-box .s-sub-menu-list li a {
  letter-spacing: 0.15rem;
}

/*=============================
  2,header End
  =============================*/


/*=============================
  3,footer
  =============================*/
/* ここにcom_footer.cssが入る */
/*=============================
  3,footer End
  =============================*/


/*=============================
  4,common（全サイト共通）
  =============================*/


/*=============================
  base-contents
  =============================*/
html {
  /* font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; */
  /* font-family: Lato, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #3e3e3e; */
}

/*=============================
  responsive
  =============================*/
/* --- ベースからの変更があればここに追加 --- */


/*=============================
  inner-content-variation
  =============================*/
/* --- ベースからの変更があればここに追加 --- */
.inner, .inner-900, .inner-1024, .inner-1100 {
  padding: 75px 0 75px;
}

@media screen and (min-width:768px) {
  .inner, .inner-900, .inner-1024, .inner-1100 {
    padding: 120px 0 120px;
  }

  /* .inner-1100 {
    padding: 85px 0 85px;
  } */
}

.inner-900, .inner-900-b {
  width: calc(100% - 2rem);
  max-width: 900px;
  margin: 0 auto;
}

.inner-1024, .inner-1024-b {
  width: calc(100% - 2rem);
  max-width: 1024px;
  margin: 0 auto;
}

.inner-1100, .inner-1100-b {
  width: calc(100% - 4rem);
  max-width: 1100px;
  margin: 0 auto;
}



/*=============================
  content-wrapper-set
  =============================*/
/* --- ベースからの変更があればここに追加 --- */


/*=============================
  list-content-set
  =============================*/
/* --- ベースからの変更があればここに追加 --- */
.list-1, .list-2, .list-3,
.list-1-b, .list-2-b, .list-3-b,
.list-2-h, .list-2-g, .list-1-s {
  text-align: left;
}

.list-1-c, .list-2-c, .list-3-c {
  text-align: center;
}

.list-1 > *, .list-2 > *, .list-3 > *,
.list-1-b > *, .list-2-b > *, .list-3-b > *,
.list-2-g > * {
  padding: 1rem 0;
}

.list-1-c > *, .list-2-c > *, .list-3-c > * {
  padding: 1.5rem;
}

.list-1-s > * {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: .5rem;
}

.list-1-s > *::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: #BCB395;
  position: absolute;
  left: 0;
  top: 0.3em;
}

.list-1-b > *:first-child {
  border-top: unset;
}

.list-1-b > *+* {
  border-bottom: 1px solid #B9BABA;
}

.list-1-b > *:last-child {
  border-top: unset;
  border-bottom: unset;
}

.list-2, .list-2-b, .list-2-g {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.list-3, .list-3-b {
  display: grid;
  grid-template-columns: 2fr 3fr;
}

@media screen and (max-width: 767px) {
  .list-2-g {
    grid-gap: 1rem;
  }
}

.list-2-h > dt {
  padding: .5rem 0 .25rem;
}

.list-2-h > dd {
  padding: 0 0 .5rem;
  border-bottom: 1px solid #B9BABA;
}

@media screen and (min-width:768px) {
  .list-2-h {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .list-2-h > dt,
  .list-2-h > dd {
    border-bottom: 1px solid #B9BABA;
    padding: .5rem 0;
  }
}

.list-2 dt, .list-2-b dt,
.list-3 dt, .list-3-b dt {
  padding-left: 1rem;
}

.list-2-b > *:nth-child(-n+2),
.list-3-b > *:nth-child(-n+2) {
  border-top: 1px solid #B9BABA;
  border-bottom: 1px solid #B9BABA;
}

.list-2-b > *:nth-child(n+3),
.list-3-b > *:nth-child(n+3) {
  border-bottom: 1px solid #B9BABA;
}


/*=============================
  css-counter-list-set
  =============================*/
/* --- ベースからの変更があればここに追加 --- */
.counter, .counter-b, .counter-c, .counter-d, .counter-md {
  counter-reset: num;
}

.counter > li {
  position: relative;
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
  padding-left: 3rem;
  margin-bottom: 1rem;
}

.counter > li:last-child {
  margin-bottom: 0;
}

.counter > li:before {
  counter-increment: num;
  content: counter(num);
  font-size: 1rem;
  border: 1px solid #e8447e;
  box-sizing: border-box;
  border-radius: 50%;
  height: 2rem;
  width: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  letter-spacing: 0;
  background-color: #e8447e;
  color: white;
}

.counter-b {
  position: relative;
}

.counter-b > * {
  position: relative;
}

.counter-b > *:before {
  position: absolute;
  display: inline-block;
  counter-increment: num;
  content: counter(num);
  left: -2.2em;
  width: 2em;
  text-align: center;
}

.counter-c .c-num {
  position: relative;
}

.counter-c .c-num:after {
  display: inline-block;
  counter-increment: num;
  content: counter(num);
  font-size: 2em;
  text-align: center;
}

.counter-d .d-num {
  position: relative;
}

.d-num {
  text-align: justify;
  background-color: #3e3e3e;
  border: 2px solid #3e3e3e;
  padding: .75rem 2rem .75rem 5rem;
  color: #fff;
}

.d-num:before {
  content: counter(num);
  counter-increment: num;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: inline-block;
  width: calc(1rem * 1.6 + 1.5rem);
  height: calc(1rem * 1.6 + 1.5rem);
  text-align: center;
  line-height: calc(1rem * 1.6 + 1.5rem);
  font-size: 1.5rem;
  color: #3e3e3e;
  background-color: #fff;
}

.d-num.bgc-1:before {
  color: #e8447e;
}

.d-num.bgc-5:before {
  color: #40c3d9;
}

.counter-md .modal-ttl {
  position: relative;
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
  padding-left: 4rem;
  margin-bottom: 2rem;
}

.counter-md .modal-ttl:before {
  counter-increment: num;
  content: counter(num);
  font-size: 2rem;
  border: 1px solid #e8447e;
  box-sizing: border-box;
  border-radius: 50%;
  height: 3rem;
  width: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  letter-spacing: 0;
  background-color: #e8447e;
  color: white;
}


/*=============================
  content-back-set
  =============================*/
.back-1 {
  background-color: #e8447e;
  border-color: #e8447e;
}

.back-1-b {
  background-color: #F7F8F8;
  border-color: #F7F8F8;
}

.back-2 {
  background-color: #fff;
  position: relative;
  padding: 1.5rem 1rem;
}

.back-2::before {
  border-top: 1rem solid #3e3e3e;
  border-right: 1rem solid transparent;
  border-bottom: 1rem solid transparent;
  border-left: 1rem solid #3e3e3e;
}


/*=============================
  block-bottom-set
  =============================*/
/* --- ベースからの変更があればここに追加 --- */


/*=============================
  section-border-content-set
  =============================*/
/* --- ベースからの変更があればここに追加 --- */


/*=============================
  head-content-set
  =============================*/
/* --- ベースからの変更があればここに追加 --- */
.head-M.hd-line {
  position: relative;
  margin: 0 auto 6rem;
}

.head-M.hd-line:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2.2rem;
  display: inline-block;
  width: 50px;
  height: 2px;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%);
  background-color: currentColor;
}

/*=============================
  lead-text-content-set
  =============================*/
/* --- ベースからの変更があればここに追加 --- */


/*=============================
  title-content-set
  =============================*/
/* --- ベースからの変更があればここに追加 --- */
.ttl-L-d {
  border-bottom: 1px solid #3e3e3e;
  margin-top: 0;
}


/*=============================
  text-content-set
  =============================*/
/* --- ベースからの変更があればここに追加 --- */


/*=============================
  font-family-set
  =============================*/
/* --- ベースからの変更があればここに追加 --- */


/*=============================
  decoration-content
  =============================*/
/* --- ベースからの変更があればここに追加 --- */
.square-list > * {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.square-list > *:last-child {
  margin-bottom: 0;
}

.square-list > *:before {
  font-family: 'Material Icons';
  content: "crop_square";
  position: absolute;
  left: 0;
}

.label {
  border: 1px solid currentColor;
  padding: .1em 0.75em;
  display: inline-block;
  letter-spacing: 0.05rem;
  font-size: 0.8em;
}


/*=============================
  background-color-set
  =============================*/
.bgc-1 {
  color: #fff;
  background-color: #E8447E;
  border-color: #E8447E;
}

.bgc-2 {
  background-color: #F7F8F8;
}

.bgc-3 {
  color: #3e3e3e;
  background-color: #fff;
}

.bgc-4 {
  color: #fff;
  background-color: #242424;
}

.bgc-5 {
  color: #fff;
  background-color: #40c3d9;
  border-color: #40c3d9;
}

.bgc-6 {
  color: #fff;
  background-color: #ef9ebb;
}

.bgc-7 {
  color: #fff;
  background-color: #00afcc;
}

.bgc-8 {
  color: #fff;
  background-color: #56514f;
}


/*=============================
  text-color-set
  =============================*/
.color-1 {
  color: #E8447E;
}

.color-2 {
  color: #FF0000;
}

.color-3 {
  color: #FFFFFF;
}

.color-4 {
  color: #40c3d9;
}

.color-5 {
  color: #ef9ebb;
}

.color-6 {
  color: #00afcc;
}

.color-7 {
  color: #56514f;
}

/*=============================
  btn-content
  =============================*/
.btn-1, .btn-1-L, .btn-2, .btn-2-L, .btn-3, .btn-3-L, .btn-4, .btn-5, .btn-5-L, .btn-7, .bnr-btn1 {
  display: block;
  margin: 0 auto;
  width: calc(100% - 2em);
  max-width: 360px;
  padding: 16px 10px;
  /* font-weight: bold; */
  text-align: center;
  text-decoration: none;
  transition: .2s;
  border: 1px solid currentColor;
  border-radius: 100vmax;
}

.btn-1 {
  background-color: #fff;
}

.btn-1-L:focus,
.btn-1-L:hover,
.btn-1:focus,
.btn-1:hover {
  opacity: 0.8;
}

.btn-1-L {
  max-width: 100%;
}

.btn-2, .btn-2-L {
  color: #e8447e;
}

.btn-2:hover,
.btn-2-L:hover {
  background-color: #e8447e;
  color: #fff;
  border-color: #e8447e;
}

.btn-2-L {
  max-width: 480px;
}

.btn-3,
.btn-3-L {
  color: #fff;
  background-color: #3e3e3e;
}

.btn-3:hover,
.btn-3-L:hover {
  background-color: #fff;
  color: #3e3e3e;
}

.btn-3-L {
  max-width: 480px;
}

.btn-4 {
  border-radius: inherit;
  width: 100%;
}

.btn-5, .btn-5-L {
  color: #fff;
  background-color: #e8447e;
  border: 1px solid #e8447e;
}

.btn-5-L {
  width: 100%;
  max-width: unset;
}

.btn-5:hover,
.btn-5-L:hover {
  background-color: #fff;
  border-color: #e8447e;
  color: #e8447e;
}

.btn-6 {
  position: relative;
  text-align: right;
  padding-right: 1rem;
  font-weight: bold;
}

.btn-6::after {
  position: absolute;
  font-family: 'Material Icons';
  content: "navigate_next";
  right: 0;
}

.btn-7 {
  color: #fff;
  background-color: #e8447e;
  border: 1px solid #fff;
}

.btn-7:hover {
  background-color: #fff;
  color: #e8447e;
}

.btn-8 {
  position: relative;
  display: inline;
  border-bottom: 1px solid;
  padding-bottom: 2px;
  transition: all .3s;
}

.btn-8::after {
  font-family: 'Material Icons';
  content: "navigate_next";
  position: relative;
  top: 2px;
}

.btn-8:hover {
  color: #e8447e;
}

.btn-9 {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.btn-9::after {
  position: absolute;
  margin-bottom: 4px;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #e8447e;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}

.btn-9:hover {
  color: #e8447e;
}

.btn-9:hover::after {
  transform: scale(1, 1);
}

.btn-lft {
  margin-left: 0;
}

.bnr-btn1 {
  width: 100%;
  max-width: initial;
  padding: 0.3em;
  border-radius: inherit;
  border: none;
  background-color: #3c3c3c;
  color: #fff;
}


/*=============================
  btn-decoration-content
  =============================*/
.btn--arrow-right {
  position: relative;
  padding-left: 2em;
  padding-right: 2em;
}

.btn--arrow-right::after {
  font-family: 'Material Icons';
  content: "navigate_next";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1rem;
}

.btn--arrow-left {
  position: relative;
  padding-left: 2em;
  padding-right: 2em;
}

.btn--arrow-left::after {
  font-family: 'Material Icons';
  content: "navigate_before";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 1rem;
}

.btn--arrow-up {
  position: relative;
  padding-left: 2em;
  padding-right: 2em;
}

.btn--arrow-up::after {
  font-family: 'Material Icons';
  content: "expand_less";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1rem;
}

.btn--arrow-down {
  position: relative;
  padding-left: 2em;
  padding-right: 2em;
}

.btn--arrow-down::after {
  font-family: 'Material Icons';
  content: "expand_more";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1rem;
}

.btn--open-new {
  position: relative;
  padding-left: 2em;
  padding-right: 2em;
}

.btn--open-new::after {
  font-family: 'Material Icons';
  content: "open_in_new";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1rem;
}

/* -----ボタン-下線----- */
.btn-line-bottom {
  border-bottom: 1px solid;
  line-height: 1.75em;
  margin: 0 0 1rem;
  padding: 0 0 .2rem;
  position: relative;
  display: inline;
}

.btn-line-bottom:after {
  font-family: "Material Icons";
  content: "double_arrow";
  font-size: .8rem;
  margin: 0 0 0 .25rem;
}


/*=============================
  flex-layout
  =============================*/
/* --- ベースからの変更があればここに追加 --- */
.col-1-2-b {
  display: block;
}

.col-1-2-b > * {
  margin-bottom: 1rem;
}

.col-1-2_3 {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.col-1-2_3 > * {
  flex-basis: 100%;
  margin-bottom: 1.25rem;
}

@media screen and (min-width: 768px){
  .col-1-2_3 > *:nth-child(n-2) {
    flex-basis: calc(100% / 2 - 0.75rem);
  }

  .col-1-2_3 > *:nth-child(n+3) {
    flex-basis: calc(100% / 3 - 0.75rem);
  }
}

.col-1-3_4 {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.col-1-3_4 > * {
  flex-basis: 100%;
  margin-bottom: 1.25rem;
}

@media screen and (min-width: 768px){
  .col-1-3_4 > *:nth-child(n-3) {
    flex-basis: calc(100% / 3 - 0.75rem);
  }

  .col-1-3_4 > *:nth-child(n+4) {
    flex-basis: calc(100% / 4 - 0.75rem);
  }
}

.col-2-2-c, .col_2_4-5 {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.col-2-2-c > * {
  flex-basis: calc(100% / 2);
}

.col_2_4-5 > * {
  flex-basis: calc(100% / 2 - .5rem);
}

@media screen and (min-width: 768px) {
  .col-1-2-b, .col-1-2-c {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }

  .col-1-2-b > * {
    flex-basis: calc(100% / 2 - .5rem);
  }

  .col-1-2-c > * {
    flex-basis: calc(100% / 2);
  }

  .col_2_4-5 > * {
    flex-basis: calc(100% / 4 - 1rem);
  }

  .col_2_4-5 > *:nth-child(n+5) {
    flex-basis: calc(100% / 5 - 1rem);
  }

  .row-reverse {
    flex-direction: row-reverse;
  }
}


/*=============================
  grid-layout
  =============================*/
/* --- ベースからの変更があればここに追加 --- */
.grid-col_1-sp {
  grid-column: span 2;
}

@media screen and (min-width:768px) {
  .grid-col_1-pc {
    grid-column: span 2;
  }
}


/*=============================
  3,common（laquan.net共通）End
  =============================*/


/*=============================
  4,template（一部共通）Start
  =============================*/

/*=============================
  page-main-visual-content
  =============================*/
/* --- ベースからの変更があればここに追加 --- */


/*=============================
  cv-content
  =============================*/
/* --- ベースからの変更があればここに追加 --- */
.cv-box {
  padding: 3rem 1rem;
}

.cv-box .col-1-2 {
  max-width: 850px;
  margin: 0 auto;
}


/*=============================
  qa-content
  =============================*/
/* --- ベースからの変更があればここに追加 --- */
.qa-box .wrap-M > * {
  border: 1px solid #707070;
  margin-bottom: 1rem;
}

.qa-box .acc-trigger {
  padding: .75rem 3rem .75rem 5rem;
  padding-left: 3rem;
  position: relative;
}

.qa-box .acc-item {
  padding-left: 3rem;
  position: relative;
}

.qa-box .acc-trigger::after {
  border-top: 2px solid #3e3e3e;
  border-right: 2px solid #3e3e3e;
}

.qa-box .acc-trigger::before {
  color: #3e3e3e;
  background-color: #fff;
  border: unset;
}

.qa-box .acc-item::before {
  content: "A";
  font-family: "Jost-exl", 'sans-serif';
  font-weight: normal;
  -webkit-text-stroke: 1px;
  display: inline-block;
  text-align: center;
  width: calc(1rem * 1.6 + 1.5rem);
  height: calc(1rem * 1.6 + 1.5rem);
  color: #3e3e3e;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.5rem;
  line-height: calc(1rem * 1.6 + 1.5rem);
}


/*=============================
  price-content
  =============================*/
/* --- ベースからの変更があればここに追加 --- */
.price-item-1::before, .price-item-1-b::before,
.price-item-1::after, .price-item-1-b::after {
  content: "";
  display: block;
  width: 5px;
  height: 25px;
  background-color: #3e3e3e;
  position: absolute;
  top: 50%;
  margin-top: -16px;
  right: -30px;
}

.price-box-ud {
  height: 100%;
  position: relative;
}

.price-box-ud > * {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: calc(100% - 0.8em);
}

@media screen and (min-width:768px) {
  .price-box {
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 53px;
  }

  .price-item-1 {
    grid-column: 1/3;
  }

  .price-item-2-b {
    grid-column: 3/5;
  }
}


/*=============================
  option-tab-content
  =============================*/
.option-box .acc-trigger {
  position: relative;
}

.option-box .acc-trigger::after {
  position: absolute;
  top: 40%;
  right: 1rem;
  display: block;
  width: 1em;
  height: 1em;
  margin: auto;
  content: '';
  transform: rotate(135deg);
  transition: .2s;
  border-top: 2px solid #3e3e3e;
  border-right: 2px solid #3e3e3e;
}

.option-box .acc-trigger.open::after {
  transform: rotate(-45deg);
  top: 40%;
}

.opt-ttl, .opt-ttl-b {
  text-align: center;
}

.opt-container, .opt-container-b {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.opt-container > *,
.opt-container-b > * {
  flex-basis: calc(100% / 4);
  margin-bottom: 2rem;
}

.opt-container img,
.opt-container-b img {
  max-width: 65%;
}

@media screen and (min-width:768px) {
  .opt-ttl {
    text-align: center;
    margin-bottom: 0;
  }

  .opt-container {
    justify-content: flex-start;
    margin-bottom: 0;
  }

  .opt-container > * {
    flex-basis: calc(100% / 7);
    margin-bottom: 0;
  }

  .opt-container img,
  .opt-container-b img {
    max-width: 50%;
  }
}


/*=============================
  gallery-content
  =============================*/
/* --- ベースからの変更があればここに追加 --- */


/*=============================
  css-num-content-set
  =============================*/
/* --- ベースからの変更があればここに追加 --- */


/*=============================
  label-tag-content-set
  =============================*/
.tag-type1 {
  position: relative;
  width: 100%;
  margin-bottom: 0;
}

.tag-type1:before {
  content: attr(title)"";
  width: 100%;
  box-sizing: border-box;
  display: inline-block;
  position: absolute;
  font-size: 12px;
  padding: .25rem 1rem;
  top: -1px;
  background-color: #EF9EBB;
  color: #fff;
  text-align: center;
  z-index: 1;
}

.tag-type2 {
  position: absolute;
  display: grid;
  place-content: center;
  background-color: #3e3e3e;
  color: #fff;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  z-index: 1;
  bottom: 12px;
  left: 12px;
  line-height: 1.3;
  text-align: center;
  letter-spacing: .08em;
}

.tag-type2:before {
  content: attr(data-tag-type)"";
  font-size: .75rem;
  margin-top: 4px;
  margin-left: 4px;
}

@media screen and (min-width:768px) {
  .tag-type1 {
    margin: auto;
  }

  .tag-type1:before {
    position: absolute;
    width: auto;
    padding: 0.5rem 1rem;
  }
}

.tag-zoom,
.tag-zoom-1 {
  position: relative;
}

.tag-zoom:before,
.tag-zoom-1:before {
  position: absolute;
  font-family: 'Material Icons';
  content: "search";
  font-size: 2rem;
  color: #7b7c7c;
  bottom: 9px;
  right: 15px;
  z-index: 2;
}

.tag-zoom:after,
.tag-zoom-1:after {
  position: absolute;
  content: "";
  background: #ffffff;
  opacity: .8;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  bottom: 12px;
  right: 12px;
  z-index: 1;
}

.tag-zoom-1:before {
  font-size: 1.4rem;
  bottom: 5px;
  right: 9px;
}

.tag-zoom-1:after {
  width: 2rem;
  height: 2rem;
  bottom: 8px;
  right: 8px;
}


/*=============================
  modal-content
  =============================*/
/* --- ベースからの変更があればここに追加 --- */


/*=============================
  page-top-btn
  =============================*/
/* --- ベースからの変更があればここに追加 --- */
.btn-pagetop {
  width: 56px;
  height: 56px;
  border: solid 2px rgba(250, 250, 250, 1);
  border-radius: 12px;
  right: 1.5em;
  bottom: 72px;
  color: #fff;
  position: fixed;
  text-align: center;
  background-color: rgba(110, 110, 110, 0.6);
  z-index: 99;
  padding-top: 1.5em;
  letter-spacing: .05px;
}

@media screen and (min-width: 768px) {
  .btn-pagetop {
    right: 2em;
    bottom: 2em;
  }
}

@media screen and (min-width:768px) and (max-width:1023px) {
  .btn-pagetop {
    bottom: 80px;
  }
}

.btn-pagetop::before {
  position: absolute;
  font-family: 'Material Icons';
  content: "expand_less";
  font-size: 20px;
  top: 0;
  right: 0;
  left: 0;
}


/*=============================
  anchor-menu-content-set
  =============================*/
.anchor-fixed {
  position: fixed;
  top: 72px;
}

.anchor-fixed {
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 10;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  font-weight: bold;
}

.page-anchor-nav {
  align-items: center;
}

.page-anchor-nav > * {
  position: relative;
  border: 1px solid rgba(208, 208, 208, 0.7);
  background: #ffffff;
  background-color: transparent;
  height: 100%;
  letter-spacing: 0;
  padding: .5rem 0 4rem;
  text-align: center;
  font-size: .75rem;
}

.page-anchor-nav a {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 1.75rem 0 2rem;
  line-height: 1.2em;
}

.page-anchor-nav a.ac-nav-line2 {
  padding: 1rem 0 1.75rem;
}

.page-anchor-nav a::after {
  position: absolute;
  content: "";
  background: url(/img/common_icon_btmArw-2-sp.png) no-repeat;
  background-size: contain;
  width: 12px;
  height: 12px;
  top: 50%;
  margin-top: 14px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
}

.anchor-for-sp {
  display: block;
}

.anchor-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.anchor-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

@media screen and (min-width:768px) {
  .page-anchor-nav > * {
    padding: 2rem;
    font-size: 1rem;
    letter-spacing: .08em;
  }

  .page-anchor-nav a {
    padding: 1.5rem 0;
  }

  .page-anchor-nav a.ac-nav-line2 {
    padding: 1.5rem 0;
  }

  .page-anchor-nav a::after {
    position: absolute;
    background: url(/img/common_icon_btmArw-2-pc.png) no-repeat;
    background-size: contain;
    margin: 0;
    top: 50%;
    left: 80%;
    transform: translate(50%, -50%);
  }
}

@media screen and (min-width:1024px) {
  .anchor-fixed {
    top: 68px;
  }

  .anchor-for-sp {
    display: none;
  }
}

@media print {
  header, .cvFix {
    display: none !important;
    visibility: hidden !important;
  }
}

.patent-border-top {
  padding-top: 2rem;
  border-top: 1px solid;
}

.patent-border-btm  {
  margin-bottom: 0.25rem;
  border-bottom: 1px solid;
  padding-bottom: 2rem;
}


/*=============================
  カタログブロック
  =============================*/
.catalog__page img {
  image-rendering: -webkit-optimize-contrast;
}

.catalog__page img {
  display: none;
}
.catalog__page.page img {
  display: block;
}

.catalog__flip-contents {
  width: 100%;
  height: 100%;
  /* height: 0; */
  border: 1px solid #707070;
  /* padding: 4.1rem 3rem 3.7rem 3rem; */
  padding: 2.1rem 2rem 2.7rem 2rem;
  position: relative;
}

/* .catalog__flip__wrap {
  text-align: center;
  width: 100%;
} */

.catalog__flip {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.catalog__flip {
  transition: margin-left 0.25s ease-out;
}

.catalog__flip .catalog__page {
  height: 100%;
}

.catalog__flip .catalog__page img {
  max-width: 100%;
  height: 100%;
}

.catalog__flip .even .gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.95, rgba(0, 0, 0, 0)),
    color-stop(1, rgba(0, 0, 0, 0.2))
  );
  background-image: -webkit-linear-gradient(
    left,
    rgba(0, 0, 0, 0) 95%,
    rgba(0, 0, 0, 0.2) 100%
  );
  background-image: -moz-linear-gradient(
    left,
    rgba(0, 0, 0, 0) 95%,
    rgba(0, 0, 0, 0.2) 100%
  );
  background-image: -ms-linear-gradient(
    left,
    rgba(0, 0, 0, 0) 95%,
    rgba(0, 0, 0, 0.2) 100%
  );
  background-image: -o-linear-gradient(
    left,
    rgba(0, 0, 0, 0) 95%,
    rgba(0, 0, 0, 0.2) 100%
  );
  background-image: linear-gradient(
    left,
    rgba(0, 0, 0, 0) 95%,
    rgba(0, 0, 0, 0.2) 100%
  );
}

.catalog__flip .odd .gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.95, rgba(0, 0, 0, 0)),
    color-stop(1, rgba(0, 0, 0, 0.15))
  );
  background-image: -webkit-linear-gradient(
    right,
    rgba(0, 0, 0, 0) 95%,
    rgba(0, 0, 0, 0.15) 100%
  );
  background-image: -moz-linear-gradient(
    right,
    rgba(0, 0, 0, 0) 95%,
    rgba(0, 0, 0, 0.15) 100%
  );
  background-image: -ms-linear-gradient(
    right,
    rgba(0, 0, 0, 0) 95%,
    rgba(0, 0, 0, 0.15) 100%
  );
  background-image: -o-linear-gradient(
    right,
    rgba(0, 0, 0, 0) 95%,
    rgba(0, 0, 0, 0.15) 100%
  );
  background-image: linear-gradient(
    right,
    rgba(0, 0, 0, 0) 95%,
    rgba(0, 0, 0, 0.15) 100%
  );
}

.catalog__button-prev,
.catalog__button-next {
  background: #fff;
  width: 2.8rem;
  height: 2.8rem;
  position: absolute;
  top: 47%;
  transform: translateY(-50%);
  border: 1px solid #707070;
  z-index: 99;
}

.catalog__button-prev {
  left: 0;
  border-left: 0;
}

.catalog__button-next {
  right: 0;
  border-right: 0;
}

.catalog__button-prev::before,
.catalog__button-next::before {
  content: "";
  width: 14px;
  height: 14px;
  transform: rotate(-135deg);
  position: absolute;
  top: 15%;
}

.catalog__button-prev::before {
  left: 1.5rem;
  border-top: solid 2px #707070;
  border-right: solid 2px #707070;
  transform: rotate(-135deg) translateY(-50%);
}

.catalog__button-next::before {
  right: 1.5rem;
  border-top: solid 2px #707070;
  border-left: solid 2px #707070;
  transform: rotate(135deg) translateY(-50%);
}

.catalog__page-counter {
  margin-top: 1.2rem;
  text-align: center;
}

.catalog__note {
  margin: 2.3rem 0px 5.8rem;
  font-size: 1.2rem;
}

.catalog__text {
  margin: 3.3rem 0 0;
}

.catalog__description {
  margin: 2.3rem 0;
  line-height: 2;
  font-size: 1rem;
}

.catalog__text-inner {
  margin-bottom: 3rem;
}

.catalog__button-label {
  font-size: 1rem;
}

.catalog__button .btn-holder {
  margin-top: 1rem;
}

.catalog__introduction {
  margin-top: 5rem;
}

.catalog__furicoco-img img,
.catalog__furiphoto-img img {
  width: 55%;
}

.catalog__furicoco-img,
.catalog__furiphoto-img {
  margin-bottom: 2.8rem;
}

.catalog__furicoco {
  margin-bottom: 5.5rem;
}

@media (min-width: 768px) {
  .catalog__flip .catalog__page {
    cursor: zoom-in;
  }
  .catalog__text {
    flex-basis: 38%;
    padding: 0 3rem;
    margin: 0;
  }
  .catalog__page-counter {
    margin-top: 2.4rem;
  }
  .catalog__container {
    display: flex;
    justify-content: space-between;
  }
  .catalog__flip {
    width: 100% !important;
  }
  .catalog__note {
    margin: 1rem 0px 5rem;
  }

  .catalog__flip-contents {
    padding: 2.3rem 3.8rem;
    flex-basis: 62%;
    /* height: 515px;
    max-height: 100%; */
  }
  .catalog__text-inner {
    margin-bottom: 0;
  }

  .catalog__description {
    margin: 2.2rem 0 1.3rem;
  }

  .catalog__button .btn-holder {
    margin: 0.8rem auto;
  }

  .catalog__introduction {
    margin-top: 8.3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .catalog__furicoco,
  .catalog__furiphoto {
    display: flex;
    gap: 1.2rem;
  }

  .catalog__furicoco-img,
  .catalog__furiphoto-img {
    flex-basis: 37%;
  }

  .catalog__furicoco-img img,
  .catalog__furiphoto-img img {
    width: 100%;
  }

  .catalog__furicoco-text > *,
  .catalog__furiphoto-text > * {
    text-align: left;
  }

  .catalog__furicoco-text,
  .catalog__furiphoto-text {
    flex-basis: 63%;
  }
  .catalog__button-prev,
  .catalog__button-next {
    width: 3.8rem;
    height: 3.8rem;
    top: 47%;
  }
  .catalog__button-prev::before,
  .catalog__button-next::before {
    top: 30%;
  }

  .catalog__button-prev::before {
    left: 1.9rem;
  }

  .catalog__button-next::before {
    right: 1.9rem;
  }
  .catalog__introduction__furiphoto-text > * {
    text-wrap: balance;
  }
}

@media screen and (max-width: 900px) and (min-width: 768px) {
  .catalog__container {
    display: block;
  }
  .catalog__text {
    margin-top: 3rem;
  }
  .catalog__button {
    display: flex;
    justify-content: space-around;
    margin-top: 3rem;
    align-items: center;
  }
}
@media screen and (max-width: 767px) {
  .catalog__flip {
    margin: 0 auto !important;
  }
}

.catalog__ad-block {
  display: none;
}

.catalog__ad-block.catalog-last-page {
  display: grid;
  place-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0,0,0,.5);
  padding: 3rem;
  z-index: 99;
}

.catalog__ad-block__text {
  color: #fff;
  font-size: 1.2rem;
  line-height: 2;
  text-align: left;
}

.catalog__ad-block__text-info {
  display: block;
}

.catalog__ad-block__text-list {
  list-style: disc;
  padding-left: 2rem;
}

.catalog__ad-block__text-title {
  font-size: 1.5rem;
  font-weight: bold;
  border-bottom: 2px solid #fff;
}

@media (min-width: 768px) {
  .catalog__ad-block__text {
  }
}

/* --------------------
   コンテンツ余白
---------------------- */

.col_mb-1>* {
  margin-bottom: 1rem;
}

.col_mb-2>* {
  margin-bottom: 1.5rem;
}

.col_mb-3>* {
  margin-bottom: 2rem;
}

.col_mb-4>* {
  margin-bottom: 2.5rem;
}

.col_mb-5>* {
  margin-bottom: 3rem;
}

.pd-box-s1 {
  padding: .25rem;
}

.pd-box-s2 {
  padding: .5rem;
}

.pd-box-s3 {
  padding: .75rem;
}

.pd-box-1 {
  padding: 1rem;
}

.pd-box-2 {
  padding: 2rem;
}

.pd-box-2_2-1 {
  padding: 2rem 1rem;
}

.pd-box-3 {
  padding: 3rem;
}

.pd-box-3_1 {
  padding: 3rem 1rem;
}

.pd-box-3_2 {
  padding: 3rem 2rem;
}

.pd-box-3_2-1 {
  padding: 3rem 1rem;
}

@media screen and (min-width: 768px){
  .pd-box-2_2-1 {
    padding: 2rem;
  }
  .pd-box-3_2-1 {
    padding: 3rem 2rem;
  }
}

.p-t_none {
  padding-top: 0;
}

.p-b_none {
  padding-bottom: 0;
}

.p-tb_none {
  padding-top: 0;
  padding-bottom: 0;
}

.p-rl_none {
  padding-right: 0;
  padding-left: 0;
}

.m-cancel {
  margin: auto;
}

.m-t_none {
  margin-top: 0;
}

.m-b_none {
  margin-bottom: 0;
}

.m-tb_none {
  margin-top: 0;
  margin-bottom: 0;
}

.m-rl_none {
  margin-right: 0;
  margin-left: 0;
}

.text-holder.m-cancel {
  margin: auto;
}

.box-mb-s1,
.l-box-s1>* {
  margin-bottom: .25rem;
}

.box-mb-s2,
.l-box-s2>* {
  margin-bottom: .5rem;
}

.box-mb-s3,
.l-box-s3>* {
  margin-bottom: .75rem;
}

.box-mb-1,
.l-box-1>* {
  margin-bottom: 1rem;
}

.box-mb-2,
.l-box-2>* {
  margin-bottom: 2rem;
}

.box-mb-3,
.l-box-3>* {
  margin-bottom: 3rem;
}

.box-mb-6,
.l-box-6>* {
  margin-bottom: 6rem;
}

.l-box-s1>*:last-child,
.l-box-s2>*:last-child,
.l-box-s3>*:last-child,
.l-box-1>*:last-child,
.l-box-2>*:last-child,
.l-box-3>*:last-child,
.l-box-6>*:last-child {
  margin-bottom: 0;
}

.m-top-3 {
  margin-top: 3rem;
}

@media screen and (min-width: 768px) {
  .mb_no-pc {
    margin-bottom: 0;
  }
}

/* .w-100 {
  width: 100% !important;
} */


.ta-l {
  text-align: left;
}

.ta-r {
  text-align: right;
}

.ta-j {
  text-align: justify;
}

.ta-c {
  text-align: center;
}


/*=============================
  4,template（一部共通）End
  =============================*/