@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap");
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 全体 */
:root {
  --maxWD-inner: 800px; /* innerの最大幅 */
  --maxWD-inner-sm: 772px; /* inner(小)の最大幅 */

  --c-text: #4a4a4a; /* テキスト */
  --c-primary: #ff6a1d;
  --c-second: #ffa131;
  --c-link: #4683f6;
  --c-btn: #f74400;
  --c-bk-black: #303030; /* 背景 */
  --c-bg-pale: #fff2e6;

  --padding-PC-top: 72px; /* 共通の上パッディング設定 */
  --padding-SP-top: 40px;
  --padding-PC-bottom: 72px; /* 共通の下パッディング設定 */
  --padding-SP-bottom: 40px;

  --padding-PC-top-sml: 54px; /* 共通の上パッディング設定(小) */
  --padding-SP-top-sml: 24px;
  --padding-PC-bottom-sml: 54px; /* 共通の下パッディング設定(小) */
  --padding-SP-bottom-sml: 24px;

  --padding-inn-PC-top: 48px; /* 共通のinner上パッディング設定 */
  --padding-inn-SP-top: 24px;
  --padding-inn-PC-bottom: 48px; /* 共通のinner下パッディング設定 */
  --padding-inn-SP-bottom: 24px;

  --padding-inn-PC-top-sml: 24px; /* 共通のinner内の上パッディング設定(小) */
  --padding-inn-SP-top-sml: 16px;
  --padding-inn-PC-bottom-sml: 24px; /* 共通のinner内の下パッディング設定(小) */
  --padding-inn-SP-bottom-sml: 16px;

  --margin-PC-div-top: 24px; /* inner内divの上マージン設定 */
  --margin-SP-div-top: 32px;
  --margin-PC-div-bottom: 24px; /* inner内divの下マージン設定 */
  --margin-SP-div-bottom: 32px;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* パッディング用（共通） */
.padding-t-sec {
  /* 共通の上パッディング設定 */
  padding-top: var(--padding-PC-top);
}
.padding-b-sec {
  padding-bottom: var(--padding-PC-bottom);
}

.padding-t-sml {
  /* 共通の上パッディング設定(小) */
  padding-top: var(--padding-PC-top-sml);
}
.padding-b-sml {
  padding-bottom: var(--padding-PC-bottom-sml);
}

.padding-inn-t-sec {
  /* 共通のinner上パッディング設定 */
  padding-top: var(--padding-inn-PC-top);
}
.padding-inn-b-sec {
  padding-bottom: var(--padding-inn-PC-bottom);
}

.padding-inn-t-sec-sml {
  /* 共通のinner内の上パッディング設定(小) */
  padding-top: var(--padding-inn-PC-top-sml);
}
.padding-inn-b-sec-sml {
  padding-bottom: var(--padding-inn-PC-bottom-sml);
}

.margin-div-t {
  padding-top: var(--margin-PC-div-top);
}
.margin-div-b {
  padding-bottom: var(--margin-PC-div-bottom);
}

@media only screen and (max-width: 768px) {
  /* タブレット・スマホ用 */
  .padding-t-sec {
    padding-top: var(--padding-SP-top);
  }
  .padding-b-sec {
    padding-bottom: var(--padding-SP-bottom);
  }

  .padding-t-sml {
    padding-top: var(--padding-PC-top-sml);
  }
  .padding-b-sml {
    padding-bottom: var(--padding-PC-bottom-sml);
  }

  .padding-inn-t-sec {
    padding-top: var(--padding-inn-SP-top);
  }
  .padding-inn-b-sec {
    padding-bottom: var(--padding-inn-SP-bottom);
  }

  .padding-inn-t-sec-sml {
    padding-top: var(--padding-inn-SP-top-sml);
  }
  .padding-inn-b-sec-sml {
    padding-bottom: var(--padding-inn-SP-bottom-sml);
  }

  .margin-div-t {
    padding-top: var(--margin-SP-div-top);
  }
  .margin-div-b {
    padding-bottom: var(--margin-SP-div-bottom);
  }
}

#LP_camp_box {
  overflow: hidden;
  color: var(--c-text);
  line-height: 1.7;
  background-color: #fefefe;
  font-size: 1rem;
  font-weight: 300;
  font-family:
    "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体",
    YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ",
    Meiryo, "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial,
    Verdana, sans-serif;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
.material-symbols-outlined {
  /* Googleアイコンフォント関連 */
  display: inline-flex;
  vertical-align: middle;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* テキスト(全体) */
#LP_camp_box p {
  text-align: left;
}

#LP_camp_box h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0 !important;
  text-align: center;
}

.txt-s-small {
  font-size: 0.9375rem;
}

.txt-c-wh {
  color: #fff !important;
}

/* 改行の設定 */
br.is-pc {
  display: block;
}
br.is-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  #LP_camp_box h2 {
    font-size: 1.4375rem;
    line-height: 1.6;
  }
  br.is-pc {
    display: none;
  }
  br.is-sp {
    display: block;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* Flex */

.grid-inn-gap {
  column-gap: 4em;
}
@media screen and (max-width: 368px) {
  .grid-inn-gap {
    column-gap: 2em;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* リスト */

#LP_camp_box ul {
  list-style: none;
  text-align: left;
  margin: 0;
  padding: 0;
}
#LP_camp_box ul li {
  position: relative;
  list-style: none;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* TABLE */

table.table_feature {
  background-color: #f8f8f8;
}
table.table_feature th {
  padding: 0.25em 1em;
}
table.table_feature tr:first-of-type th {
  background-color: var(--c-primary);
  color: #fff !important;
  text-align: center;
}
table.table_feature tr:first-of-type th:first-of-type {
  border-right: 1px solid #fff;
}
table.table_feature tr td {
  padding: 0.25em 1em;
}
table.table_feature tr td:first-of-type {
  border-right: solid 2px #e5e5e5;
}
table.table_feature tr:nth-child(odd) td:first-of-type {
  background-color: #f2f2f2;
}

table.table_feature tr.tr_separate td {
  border-top: solid 2px #e5e5e5 !important;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* ヘッダー */
.header_wrapper {
  position: relative;
  width: 100%;
  background-color: #efefef;
  border-top: 7px #363636;
}

.header_wrapper .haeder_logo_inner {
  display: inline-block;
  margin-top: 16px;
  margin-left: auto;
  margin-right: 2%;
}

.header_wrapper .d-sm-flex {
  width: 100%;
  margin-bottom: 32px;
}
.haeder_h1_inner {
  padding-left: 64px;
  text-align: left;
}
.haeder_h1_inner h1 {
  width: 100%;
  margin-bottom: 0 !important;
}
.header_wrapper h1 img.img_Vcheck_h1 {
  width: min(100%, 405px);
  height: auto !important;
  padding-bottom: 40px;
}
.header_wrapper h1 img.img_Vcheck {
  width: min(100%, 293px);
  height: auto !important;
}

.header_wrapper h2 {
  width: 100%;
  font-size: 1.625rem !important;
  line-height: 1.7;
  text-align: center;
  color: var(--c-second);
  background-color: #363636;
}
@media screen and (max-width: 768px) {
  .header_wrapper h2 {
    font-size: 1rem !important;
    padding-left: 1em;
    padding-right: 1em;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 問い合わせ */
div.inquiry_wrapper {
  width: 100%;
  background-color: var(--c-bk-black);
}
div.inquiry_wrapper h2 {
  font-size: 1.5rem !important;
  display: inline-block;
  width: 96%;
  max-width: var(--maxWD-inner-sm);
  color: #fff;
  border-bottom: 1px solid;
  margin: 0 auto;
  padding-bottom: 0.5em;
}

div.inquiry_wrapper div.d-sm-flex {
  width: 96%;
  max-width: var(--maxWD-inner-sm);
  margin: 0 auto;
  color: #fff;
  align-items: center;
  column-gap: 3rem;
}
div.inquiry_wrapper div.d-sm-flex > div:first-of-type {
  width: 45%;
}
div.inquiry_wrapper div.d-sm-flex > div:last-of-type {
  width: 55%;
}

img.img_TELno {
  /* 問い合わせ番号 */
  max-width: 324px;
  height: auto !important;
}
div.inquiry_wrapper div.d-sm-flex p {
  margin-bottom: 0.25rem;
}
p.ttl-vetsdesk {
  font-weight: 500;
}
p.ttl-workingtime {
}

@media only screen and (max-width: 575px) {
  /* タブレット・スマホ用 */
  div.inquiry_wrapper h2 {
    width: 86%;
    font-size: 1.25rem !important;
    text-align: left !important;
  }
  div.inquiry_wrapper div.d-sm-flex {
    width: 86%;
    text-align: center;
  }
  div.inquiry_wrapper div.d-sm-flex > div:first-of-type {
    width: 100%;
  }
  div.inquiry_wrapper div.d-sm-flex p {
    text-align: center !important;
  }
  div.inquiry_wrapper div.d-sm-flex > div:last-of-type {
    width: 100%;
    margin-top: 1rem;
  }
  img.img_TELno {
    max-width: 400px;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* div「レンタルプラン」 */

div.lease_wrapper {
  width: 100%;
}

div.lease_wrapper div.col-sm-12 {
  margin: 0 auto;
  width: 100%;
}

div.lease_wrapper div.lease_inner_plan {
  position: relative;
  background: rgb(255, 194, 42);
  background: linear-gradient(
    90deg,
    rgba(255, 194, 42, 1) 0%,
    rgba(255, 145, 35, 1) 35%,
    rgba(255, 113, 30, 1) 100%
  );
  clip-path: polygon(50% 0%, 100% 0, 100% 80%, 50% 100%, 0% 80%, 0 0);
}

div.lease_inner_plan > div {
  background-color: #fff;
  width: min(96%, 800px);
  margin: 0 auto;
  text-align: center;
}
div.lease_inner_plan p.txt-c-wh {
  width: min(96%, 800px);
  margin: 0 auto 6rem;
}

p.ttl_campbuy {
  display: inline-block;
  background-color: var(--c-bg-pale);
  font-weight: 400;
  font-size: 1.625rem;
  text-align: center !important;
  padding: 0 2em;
}
div.lease_wrapper p.txt-c-wh {
  margin-top: 1em;
}

div.lease_wrapper div.lease_inner_about {
  background: #fff;
  width: 100%;
  margin: 0 auto;
}
div.lease_inner_about div.d-sm-flex {
  width: min(90%, 800px);
  margin: 0 auto;
}
div.lease_inner_about div.d-sm-flex h3 {
  font-size: 1.625rem;
  color: var(--c-primary);
  border-bottom: 1px solid;
  padding-bottom: 8px;
  margin-bottom: 0.75em;
}
div.lease_inner_about div.d-sm-flex ul li {
  font-size: 1.375rem;
}
div.lease_inner_about div.d-sm-flex ul li::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-top: 0.5em;
  margin-right: 0.5em;
  display: inline-block;
  background-color: var(--c-second);
  border-radius: 50%;
  position: relative;
  top: 0;
}

div.lease_inner_about div.btn_wrapper {
  text-align: center;
}

img.img_svg_peppyvetplan {
  width: min(90%, 650px);
  height: auto !important;
}
img.img_thumb_V200 {
  width: min(100%, 258px);
  height: auto !important;
}

@media screen and (max-width: 768px) {
  img.img_svg_peppyvetplan {
    max-width: 500px;
    height: auto !important;
  }
  div.lease_inner_about div.d-sm-flex h3 {
    text-align: left;
  }
}

@media screen and (max-width: 600px) {
  div.lease_inner_plan > div {
    padding: 1em;
  }
  p.ttl_campbuy {
    font-size: 1.125rem;
    padding: 0 1em;
  }
  div.lease_wrapper p.txt-c-wh {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  div.lease_inner_about div.d-sm-flex h3 {
    text-align: center;
  }
  div.flxbox_thumb_V200 {
    text-align: center;
  }
  img.img_svg_peppyvetplan {
    max-width: 400px;
    height: auto !important;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* div「特徴」 */

.feature01_wrapper {
  width: 100%;
  background: #ffd32c;
  background: linear-gradient(
    140deg,
    rgba(255, 211, 44, 1) 0%,
    rgba(255, 103, 29, 1) 100%
  );
}

.feature01_wrapper h2 {
  color: #fff;
}
.feature01_wrapper h2 span {
  font-size: 1.25rem;
  font-weight: 400;
  padding-left: 0.5em;
}
.feature01_wrapper h3 {
  font-size: 1.375rem;
  text-align: center;
  color: var(--c-primary);
}

.feature01_inner {
  background-color: #fff;
  width: min(96%, 800px);
  margin-inline: auto;
  margin-bottom: 3rem;
  padding: 3rem;
}
.feature01_inner:last-of-type {
  margin-bottom: 0;
}

.feature01_inner p strong {
  font-weight: bold;
  color: var(--c-primary);
}

p.ft_mark {
  align-items: center;
  display: flex;
  justify-content: center;
}
p.ft_mark::before,
p.ft_mark::after {
  background-color: var(--c-primary);
  content: "";
  height: 2px;
  width: 300px;
}
p.ft_mark::before {
  margin-right: 15px; /* 文字との余白 */
}
p.ft_mark::after {
  margin-left: 15px; /* 文字との余白 */
}

.ft01_triangle {
  display: block;
  margin-inline: auto;
  background: #ffc599;
  height: calc(tan(60deg) * 64px / 4);
  width: 64px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
p.ft01_p_trouble {
  background-color: #efefef;
  padding: 0.75em 1em;
}
p.ft01_p_answer {
  padding-top: 1em;
}

.feature01_inner p.txt-s-small {
  padding-top: 1em;
}

img.img_ft_mark {
  max-width: 64px;
}

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

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* div「試薬一覧」 */

div.feature02_wrapper {
  width: 100%;
  background-color: #fff;
}

div.feature02_wrapper h2 {
  text-align: center;
}

div.feature02_wrapper div.d-sm-flex {
  width: min(96%, 800px);
  margin: 0 auto;
}

div.pancreatitis_inner {
  background-color: #fff2e6;
  text-align: center;
  padding: 1rem;
}
div.pancreatitis_inner h5 {
  font-size: 1.0625rem;
  color: var(--c-primary);
}
div.pancreatitis_inner p {
  text-align: center !important;
  margin-bottom: 0;
}
p.icon_marker {
  margin-bottom: 0.5em !important;
}
p.icon_marker span {
  display: inline-block;
  background-color: var(--c-primary);
  color: #fff;
  border-radius: 8px;
  padding: 0.1em 0.5em;
}

div.feature02_wrapper h4 {
  font-size: 1.25rem;
  color: var(--c-primary);
  border-left: 7px solid;
  padding-left: 0.5em;
  text-align: left;
}
div.feature02_wrapper h4 span {
  font-size: 1.0625rem;
  color: #f40c0c;
}
div.feature02_wrapper p.h4_subtxt {
  font-size: 1.0625rem;
  font-weight: 500;
  margin-top: 0.75em;
  margin-bottom: 0.5em;
}

div.flxbox_reagentdetail > div:first-of-type {
  width: 60%;
}
div.flxbox_reagentdetail > div:last-of-type {
  width: 40%;
}

img.img_reagent {
  width: min(96%, 800px);
  height: auto !important;
}

@media screen and (max-width: 544px) {
  div.flxbox_reagentdetail > div:first-of-type {
    width: 100%;
  }
  div.flxbox_reagentdetail > div:last-of-type {
    width: 100%;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* div「動画」 */

div.feature03_wrapper {
  background-color: #f5f5f5;
  width: 100%;
  text-align: center;
}

div.feature03_wrapper div.btn_wrapper {
  margin-top: 1em;
}
div.feature03_wrapper p {
  text-align: center !important;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* div「便利な機能」 */

div.feature04_wrapper {
  background-color: #fff;
}

div.feature04_inner01 {
  max-width: var(--maxWD-inner-sm);
  width: 90%;
  margin: 0 auto;
  text-align: center;
}

div.feature04_wrapper div.d-sm-flex div {
  width: 50%;
}

div.feature04_wrapper h4 {
  font-size: 1.25rem;
  color: var(--c-primary);
}

img.img_V200function {
  width: min(100%, 372px);
  height: auto !important;
}

@media screen and (max-width: 544px) {
  div.feature04_wrapper div.d-sm-flex div {
    width: 96%;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* div「仕様」 */

div.spec_wrapper {
  width: 100%;
  background-color: #ffffff;
}
div.spec_wrapper h2.h2_specttl {
  background-color: #363636;
  color: #fff;
  padding: 0.75em;
}

div.spec_wrapper div.spec_inner {
  background-color: var(--c-bg-pale);
}
div.spec_wrapper div.spec_inner > div,
div.spec_wrapper div.reagentspec_inner > div {
  width: min(96%, 800px);
  margin-left: auto;
  margin-right: auto;
}

div.spec_wrapper div.d-md-flex {
  max-width: var(--maxWD-inner);
  width: 96%;
  margin: 0 auto;
  column-gap: 3em;
}
div.spec_wrapper h5 {
  text-align: left;
  margin-top: 2em;
}

/* TABLE */
div.spec_wrapper table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.9375rem;
  margin-bottom: 0.75em;
  text-align: left;
  width: 100%;
  overflow: scroll !important;
}
div.spec_wrapper table th {
  font-weight: 500;
  padding: 0.5em 1em;
}
div.spec_wrapper table td {
  padding: 0.5em;
  padding-left: 1em;
  border-top: solid 1px #d4d4d4;
  border-bottom: solid 1px #d4d4d4;
  background-color: #ffffff;
}
div.spec_wrapper table tr:nth-of-type(2n) td {
  background-color: #f7f7f7;
}

div.spec_inner table th {
  background: var(--c-primary);
  color: #fff;
  border-top: solid 1px var(--c-primary);
  border-bottom: solid 1px #fff;
}
div.spec_inner table tr:last-of-type th {
  border-bottom: solid 1px var(--c-primary);
}

div.reagentspec_inner table th {
  background: #9b9b9b;
  color: #fff;
  border-top: solid 1px #9b9b9b;
  border-bottom: solid 1px #fff;
}
div.reagentspec_inner table tr:first-of-type th,
div.reagentspec_inner table tr td {
  text-align: center;
}
div.reagentspec_inner table tr:first-of-type th,
div.reagentspec_inner table tr td {
  border-right: solid 1px #d4d4d4;
}
div.reagentspec_inner table tr:first-of-type th:last-of-type,
div.reagentspec_inner table tr td:last-of-type {
  border-right: none;
}
div.reagentspec_inner table tr:last-of-type th {
  border-bottom: solid 1px #9b9b9b;
}

@media only screen and (max-width: 599px) {
  /* スマホ用 */
  div.spec_wrapper {
    padding: 2em 0;
  }
  div.spec_wrapper div.d-md-flex div {
    width: 90%;
    margin: 0 auto;
  }
  div.spec_wrapper div.d-md-flex > div:first-of-type {
    margin-bottom: 3em;
  }
  div.spec_wrapper table {
    margin: 0 auto 0.5em;
  }
  div.spec_wrapper table th {
    width: 45%;
  }
  div.spec_wrapper table td {
    width: 55%;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* ボタン */
#LP_camp_box div.btn_wrapper {
  width: 100%;
  position: relative;
  cursor: pointer;
  display: inline-block;
}

div.txt_tooltip {
  /* hoverでツールチップ表示 */
  display: none;
  position: absolute;
  padding: 10px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #fff;
  border-radius: 5px;
  background: #000;
  max-width: 300px;
  width: 80%;
}
div.txt_tooltip:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: 8px solid transparent;
  border-top: 8px solid #000;
  margin-left: -8px;
}
#LP_camp_box div.btn_wrapper:hover div.txt_tooltip {
  display: inline-block;
  top: -60%;
  left: 12%;
}

#LP_camp_box a.btn {
  width: 100%;
  max-width: 448px;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 500;
  padding: 0.9em 2em;
  text-decoration: none;
  outline: none;
  letter-spacing: 0.15em;
  border-radius: 0.3em;
}
.btn-icon-r {
  position: absolute;
  top: 50%;
  right: 10px;
  height: 1em;
  line-height: 1em;
  font-size: 1.4em !important;
  transform: translateY(-50%); /* 上下中央に */
}

#LP_camp_box div.btn_wrapper:hover a span.txt_link_rote {
  /* hoverで回転 */
  transition: transform 1s;
  transform: rotateX(360deg);
}

#LP_camp_box a.btn-col_bl {
  background-color: var(--c-link);
  color: #fff;
}

#LP_camp_box a.btn-col_nml {
  background-color: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}
#LP_camp_box a.btn-col_org {
  background-color: #fff;
  color: var(--c-primary);
  border-color: var(--c-primary);
}
#LP_camp_box a.btn-col_gray {
  background-color: var(--c-text);
  color: #fff;
  border: 1px solid;
  border-color: var(--c-text);
}
#LP_camp_box a.btn-col_mono {
  background-color: #fff;
  color: var(--c-text);
  border: 1px solid;
  border-color: var(--c-text);
}

@media only screen and (max-width: 599px) {
  /* スマホ用 */
  #LP_camp_box a.btn {
    font-size: 1em;
    max-width: 100%;
    letter-spacing: 0;
  }
}
@media only screen and (max-width: 387px) {
  /* スマホ(小)用 */
  #LP_camp_box a.btn {
    font-size: 0.8125em;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 総合問い合わせ */

@media only screen and (max-width: 599px) {
  /* スマホ用 */
  div.Vets_SupportDesk_wrapper {
    padding: 16px !important;
  }
}