@charset "UTF-8";
/* ==========================================================================//
//
//　IMPORT
//
// ========================================================================== */
/** -------------------------------- **
	FONT
*** ----------------------------------------------------------------- ***/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
/* ==========================================================================//
//
//　変数
//
// ========================================================================== */
:root {
  --ff-noto-sans: "Noto Sans JP", Meiryo, sans-serif;
  /* Base Colors */
  --c-blue: #197dfa;
  --c-yellow: #ffde00;
  --c-yellow-light: #fff8cb;
  --c-white: #ffffff;
  --c-black: #000000;
  --c-red: #ff0000;
  --c-sky: #64d2ff;
  /* Sky 30% (透明度30%) */
  --c-sky-30: rgba(100, 210, 255, 0.3);
}

* {
  box-sizing: border-box;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-style: normal;
  font-weight: normal;
  font-size: 100%;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}
html.active {
  overflow-y: hidden;
}

body {
  width: 100%;
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.3;
  letter-spacing: 0.025em;
  font-family: var(--ff-noto-sans);
  color: var(--color-black);
}
@media (max-width: 750px) {
  body {
    font-size: 14px;
    font-size: calc(14 * 100vw / 750);
  }
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

input, textarea {
  margin: 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select::-ms-expand {
  display: none;
}

ol, ul {
  list-style: none;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

a {
  text-decoration: none;
  color: var(--color-text);
}

a:focus-visible {
  outline: 1px solid #000;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: top;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

input {
  -webkit-user-select: auto;
}

input, button, select, textarea {
  padding: 0;
  color: inherit;
  font-family: var(--ff-noto-sans);
  border: none;
  border-radius: 0;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

@media (pointer: fine), (hover: hover) {
  a:where([href^="tel:"]) {
    pointer-events: none;
  }
}
figure {
  margin: 0;
  line-height: 0;
}

.pc_item {
  display: block;
}
@media (max-width: 750px) {
  .pc_item {
    display: none !important;
  }
}

.sp_item {
  display: block;
}
@media (min-width: 751px) {
  .sp_item {
    display: none !important;
  }
}

.letter0 {
  letter-spacing: 0;
}

.main__inner {
  width: 100%;
  max-width: 1030px;
  margin-inline: auto;
  padding-inline: 15px;
}
@media (max-width: 750px) {
  .main__inner {
    padding-inline: calc(35 * 100vw / 750);
  }
}

/*  ---------------------------
		header
---------------------------  */
.header {
  background-color: var(--c-white);
}
.header__inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1030px;
  margin-inline: auto;
  padding-block: min(calc(31 * 100vw / 1030), 31px) min(calc(22 * 100vw / 1030), 22px);
  padding-inline: 15px;
}
@media (max-width: 750px) {
  .header__inner {
    padding-block: calc(20 * 100vw / 750) calc(35 * 100vw / 750);
  }
}
.header__logo {
  width: min(calc(316 * 100vw / 1030), 316px);
}
@media (max-width: 750px) {
  .header__logo {
    width: calc(380 * 100vw / 750);
  }
}
.header a {
  display: block;
  transition: opacity 0.4s ease;
}
@media (any-hover: hover) {
  .header a:hover {
    opacity: 0.8;
  }
}
.header a:focus-visible {
  outline: 1px solid #000;
}
.header img {
  display: block;
  max-width: 100%;
  height: auto;
}

/*  ---------------------------
		footer
---------------------------  */
.footer {
  position: relative;
  border-top: 1px solid var(--c-sky);
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  max-width: 1030px;
  margin-inline: auto;
  padding: min(calc(27 * 100vw / 1030), 27px) 15px min(calc(24 * 100vw / 1030), 24px);
}
@media (max-width: 750px) {
  .footer__inner {
    flex-direction: column;
    justify-content: center;
    padding: calc(60 * 100vw / 750) calc(35 * 100vw / 750) calc(30 * 100vw / 750);
    text-align: center;
  }
}
.footer__nav {
  -webkit-margin-end: auto;
          margin-inline-end: auto;
}
@media (max-width: 750px) {
  .footer__nav {
    margin-inline: auto;
    -webkit-margin-after: calc(60 * 100vw / 750);
            margin-block-end: calc(60 * 100vw / 750);
  }
}
.footer__nav li a {
  color: #0b41cd;
  text-decoration: none;
  font-size: min(calc(12 * 100vw / 1030), 12px);
  line-height: 1;
  transition: -webkit-text-decoration 0.4s ease;
  transition: text-decoration 0.4s ease;
  transition: text-decoration 0.4s ease, -webkit-text-decoration 0.4s ease;
}
@media (max-width: 750px) {
  .footer__nav li a {
    font-size: calc(24 * 100vw / 750);
  }
}
@media (any-hover: hover) {
  .footer__nav li a:hover {
    text-decoration: underline;
  }
}
.footer__nav li .icon_linkBlank {
  margin-left: 10px;
  vertical-align: inherit;
}
.footer__copyright {
  font-size: min(calc(12 * 100vw / 1030), 12px);
}
@media (max-width: 750px) {
  .footer__copyright {
    font-size: calc(20 * 100vw / 750);
  }
}

.pageTop {
  position: fixed;
  bottom: min(calc(20 * 100vw / 1030), 20px);
  right: min(calc(20 * 100vw / 1030), 20px);
  width: min(calc(66 * 100vw / 1030), 66px);
  height: min(calc(66 * 100vw / 1030), 66px);
  opacity: 0;
  transition: opacity 0.4s ease;
}
@media (max-width: 750px) {
  .pageTop {
    bottom: calc(20 * 100vw / 750);
    right: calc(10 * 100vw / 750);
    width: calc(102.67 * 100vw / 750);
    height: calc(102.67 * 100vw / 750);
  }
}
.pageTop.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.pageTop.is-position {
  position: absolute;
  bottom: min(calc(100 * 100vw / 1030), 100px);
}
@media (max-width: 750px) {
  .pageTop.is-position {
    bottom: calc(230 * 100vw / 750);
  }
}
.pageTop:focus-visible {
  outline: 1px solid #000;
}
@media (any-hover: hover) {
  .pageTop:hover {
    opacity: 0.8;
    cursor: pointer;
  }
}

/*  ---------------------------
		hero
---------------------------  */
.hero {
  padding: min(calc(16 * 100vw / 1030), 16px) 15px min(calc(27 * 100vw / 1030), 27px);
  background: url(../img/bg_ttl.png) repeat center top/2px 125px;
}
@media (max-width: 750px) {
  .hero {
    padding: calc(16 * 100vw / 750) calc(35 * 100vw / 750) calc(27 * 100vw / 750);
    background-size: calc(2 * 100vw / 750) calc(125 * 100vw / 750);
  }
}
.hero .hero__subtitle {
  text-align: center;
  font-weight: bold;
  font-size: min(calc(20 * 100vw / 1030), 20px);
  line-height: 2;
  letter-spacing: 0.02em;
  color: var(--c-white);
}
@media (max-width: 750px) {
  .hero .hero__subtitle {
    font-size: calc(28 * 100vw / 750);
  }
}
.hero .hero__subtitle span {
  font-weight: bold;
}
.hero .hero__title {
  -webkit-margin-before: min(calc(2 * 100vw / 1030), 2px);
          margin-block-start: min(calc(2 * 100vw / 1030), 2px);
  text-align: center;
  font-weight: bold;
  font-size: min(calc(32 * 100vw / 1030), 32px);
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--c-yellow);
}
@media (max-width: 750px) {
  .hero .hero__title {
    -webkit-margin-before: calc(2 * 100vw / 750);
            margin-block-start: calc(2 * 100vw / 750);
    font-size: calc(46 * 100vw / 750);
  }
}

/*  ---------------------------
		パーツ
---------------------------  */
.caution__box {
  -webkit-margin-before: min(calc(38 * 100vw / 1030), 38px);
          margin-block-start: min(calc(38 * 100vw / 1030), 38px);
  padding: min(calc(27 * 100vw / 1030), 27px) min(calc(10 * 100vw / 1030), 10px) min(calc(33 * 100vw / 1030), 33px);
  border: 2px solid var(--c-red);
}
@media (max-width: 750px) {
  .caution__box {
    -webkit-margin-before: calc(40 * 100vw / 750);
            margin-block-start: calc(40 * 100vw / 750);
    padding: calc(30 * 100vw / 750) calc(20 * 100vw / 750) calc(40 * 100vw / 750);
  }
}
.caution__box .caution__text {
  text-align: center;
  font-weight: bold;
  font-size: min(calc(24 * 100vw / 1030), 24px);
  color: var(--c-red);
}
@media (max-width: 750px) {
  .caution__box .caution__text {
    line-height: 1.3333333333;
    font-size: calc(36 * 100vw / 750);
  }
}
.caution__box .caution__text strong {
  font-weight: bold;
}
.caution__box .caution__list {
  -moz-column-count: 2;
       column-count: 2;
  -moz-column-gap: min(calc(20 * 100vw / 1030), 20px);
       column-gap: min(calc(20 * 100vw / 1030), 20px);
  width: min(calc(852 * 100vw / 1030), 852px);
  -webkit-margin-before: min(calc(20 * 100vw / 1030), 20px);
          margin-block-start: min(calc(20 * 100vw / 1030), 20px);
  margin-inline: auto;
  transform: translateX(min(calc(50 * 100vw / 1030), 50px));
}
@media (max-width: 750px) {
  .caution__box .caution__list {
    -moz-column-count: 1;
         column-count: 1;
    -moz-column-gap: auto;
         column-gap: auto;
    width: 100%;
    -webkit-margin-before: calc(18 * 100vw / 750);
            margin-block-start: calc(18 * 100vw / 750);
    transform: translateX(0);
  }
}
.caution__box .caution__list li {
  display: flex;
  align-items: flex-start;
  gap: min(calc(8 * 100vw / 1030), 8px);
}
@media (max-width: 750px) {
  .caution__box .caution__list li {
    align-items: flex-start;
  }
}
.caution__box .caution__list img {
  display: block;
  width: min(calc(26 * 100vw / 1030), 26px);
  height: min(calc(21 * 100vw / 1030), 21px);
  -webkit-margin-before: min(calc(6 * 100vw / 1030), 6px);
          margin-block-start: min(calc(6 * 100vw / 1030), 6px);
}
@media (max-width: 750px) {
  .caution__box .caution__list img {
    width: calc(40 * 100vw / 750);
    height: calc(33 * 100vw / 750);
    -webkit-margin-before: calc(5 * 100vw / 750);
            margin-block-start: calc(5 * 100vw / 750);
  }
}
.caution__box .caution__list span {
  font-weight: bold;
  font-size: min(calc(20 * 100vw / 1030), 20px);
  line-height: 1.6;
  color: var(--c-black);
}
@media (max-width: 750px) {
  .caution__box .caution__list span {
    font-size: calc(32 * 100vw / 750);
  }
}

/* =========================================================
   Section Content Block
   - 本文、特徴（feature）、画像で構成されるレイアウト
   ========================================================= */
.section {
  -webkit-margin-before: min(calc(66 * 100vw / 1030), 66px);
          margin-block-start: min(calc(66 * 100vw / 1030), 66px);
}
@media (max-width: 750px) {
  .section {
    -webkit-margin-before: calc(70 * 100vw / 750);
            margin-block-start: calc(70 * 100vw / 750);
  }
}
@media (min-width: 751px) {
  .section:not(:nth-of-type(1)) {
    -webkit-margin-before: min(calc(20 * 100vw / 1030), 20px);
            margin-block-start: min(calc(20 * 100vw / 1030), 20px);
  }
}
@media (max-width: 750px) {
  .section:not(:nth-of-type(1)) {
    -webkit-margin-before: calc(70 * 100vw / 750);
            margin-block-start: calc(70 * 100vw / 750);
  }
}
@media (min-width: 751px) {
  .section.section--01 .section__image {
    margin-top: min(calc(45 * 100vw / 1030), 45px);
  }
}
.section__title {
  position: relative;
  display: flex;
  align-items: center;
}
@media (max-width: 750px) {
  .section__title {
    min-height: calc(67 * 100vw / 750);
  }
}
.section__title .num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 39.2px;
  height: 39.2px;
  -webkit-margin-end: min(calc(16 * 100vw / 1030), 16px);
          margin-inline-end: min(calc(16 * 100vw / 1030), 16px);
  -webkit-padding-after: min(calc(3 * 100vw / 1030), 3px);
          padding-block-end: min(calc(3 * 100vw / 1030), 3px);
  background-color: var(--c-blue);
  border-radius: 3px;
  border: 1px solid var(--c-blue);
  font-style: normal;
  text-align: center;
  font-size: min(calc(28 * 100vw / 1030), 28px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--c-white);
  white-space: nowrap;
}
@media (max-width: 750px) {
  .section__title .num {
    width: calc(60.98 * 100vw / 750);
    height: calc(60.98 * 100vw / 750);
    -webkit-padding-after: calc(3 * 100vw / 750);
            padding-block-end: calc(3 * 100vw / 750);
    font-size: calc(43 * 100vw / 750);
  }
}
.section__title :where(span) {
  min-width: 0;
  font-weight: bold;
  font-size: min(calc(24 * 100vw / 1030), 24px);
}
@media (max-width: 750px) {
  .section__title :where(span) {
    font-size: calc(37 * 100vw / 750);
  }
  .section__title :where(span).h-txt01 {
    font-size: calc(31 * 100vw / 750);
  }
  .section__title :where(span).h-txt02 {
    font-size: calc(33 * 100vw / 750);
  }
}
.section__title::after {
  content: "";
  position: absolute;
  top: calc(100% + min(calc(8 * 100vw / 1030), 8px));
  left: min(calc(0 * 100vw / 1030), 0px);
  width: 100%;
  height: 5px;
  background-color: var(--c-sky);
}
@media (max-width: 750px) {
  .section__title::after {
    top: calc(100% + (8 * 100vw / 750));
    height: calc(10 * 100vw / 750);
  }
}

.section__content {
  display: flex;
  align-items: center;
}
@media (min-width: 751px) {
  .section__content {
    gap: min(calc(38 * 100vw / 1030), 38px);
    padding: min(calc(30 * 100vw / 1030), 30px) min(calc(5 * 100vw / 1030), 5px) min(calc(30 * 100vw / 1030), 30px) min(calc(17 * 100vw / 1030), 17px);
  }
}
@media (max-width: 750px) {
  .section__content {
    flex-direction: column;
    gap: calc(37 * 100vw / 750);
    margin-top: calc(36 * 100vw / 750);
  }
}

/* -----------------------------
   Section Body
   ----------------------------- */
.section__body {
  flex: 1 1 auto;
}

.section__text {
  line-height: 1.7777777778;
}
@media (min-width: 751px) {
  .section__text {
    font-size: min(calc(18 * 100vw / 1030), 18px);
  }
}
@media (max-width: 750px) {
  .section__text {
    font-size: calc(28 * 100vw / 750);
    line-height: 1.6071428571;
  }
}

/* =========================================================
   Feature Block
   - 症状など、補足情報のまとまりを担当
   ========================================================= */
.feature {
  overflow: hidden;
  background-color: var(--c-white);
  border: 1px solid var(--c-sky);
  border-radius: 14px;
}
@media (min-width: 751px) {
  .feature {
    max-width: min(calc(660 * 100vw / 1030), 660px);
    -webkit-margin-before: min(calc(23 * 100vw / 1030), 23px);
            margin-block-start: min(calc(23 * 100vw / 1030), 23px);
    padding: min(calc(0 * 100vw / 1030), 0px) min(calc(27 * 100vw / 1030), 27px) min(calc(18 * 100vw / 1030), 18px);
  }
}
@media (max-width: 750px) {
  .feature {
    -webkit-margin-before: calc(30 * 100vw / 750);
            margin-block-start: calc(30 * 100vw / 750);
    padding: calc(0 * 100vw / 750) calc(25 * 100vw / 750) calc(19 * 100vw / 750);
  }
}

.feature__title {
  margin-inline: min(calc(-27 * 100vw / 1030), -27px);
  padding-block: min(calc(15 * 100vw / 1030), 15px) min(calc(14 * 100vw / 1030), 14px);
  padding-inline: min(calc(38 * 100vw / 1030), 38px);
  border-radius: 13px 13px 0 0;
  background-color: var(--c-sky-30);
  font-size: min(calc(18 * 100vw / 1030), 18px);
  font-weight: bold;
  margin-bottom: min(calc(16 * 100vw / 1030), 16px);
}
@media (max-width: 750px) {
  .feature__title {
    margin-inline: calc(-30 * 100vw / 750);
    margin-bottom: calc(28 * 100vw / 750);
    padding-block: calc(22 * 100vw / 750) calc(20 * 100vw / 750);
    padding-inline: calc(30 * 100vw / 750);
    font-size: calc(28 * 100vw / 750);
  }
}

/* 注意文：role="note" 対応 */
.note {
  font-size: min(calc(18 * 100vw / 1030), 18px);
  line-height: 1.7777777778;
  color: var(--c-red);
}
@media (max-width: 750px) {
  .note {
    font-size: calc(28 * 100vw / 750);
    line-height: 1.6071428571;
  }
}
.note strong {
  font-weight: 700;
}

/* -----------------------------
   List (症状項目)
   ----------------------------- */
.feature__list {
  list-style: none;
  margin: 0;
  margin-top: min(calc(13 * 100vw / 1030), 13px);
  margin-left: min(calc(4 * 100vw / 1030), 4px);
  padding: 0;
}
@media (max-width: 750px) {
  .feature__list {
    margin-top: calc(16 * 100vw / 750);
    margin-left: calc(6 * 100vw / 750);
  }
}

.feature__item {
  position: relative;
  padding-left: min(calc(36 * 100vw / 1030), 36px);
  margin-bottom: min(calc(10 * 100vw / 1030), 10px);
  font-size: min(calc(18 * 100vw / 1030), 18px);
  line-height: 1.2;
}
@media (max-width: 750px) {
  .feature__item {
    padding-left: calc(58 * 100vw / 750);
    margin-bottom: calc(16 * 100vw / 750);
    font-size: calc(28 * 100vw / 750);
    line-height: 1.7857142857;
  }
}
.feature__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: min(calc(26 * 100vw / 1030), 26px);
  height: min(calc(21 * 100vw / 1030), 21px);
  background: url(../img/icon-check.svg) no-repeat center center/contain;
}
@media (max-width: 750px) {
  .feature__item::before {
    width: calc(40 * 100vw / 750);
    height: calc(33 * 100vw / 750);
  }
}

/* =========================================================
   Section Image
   ========================================================= */
.section__image {
  flex: 0 0 min(calc(280 * 100vw / 1030), 280px);
}
@media (max-width: 768px) {
  .section__image {
    flex: none;
    width: calc(435 * 100vw / 750);
  }
}
.section__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   Document Notice
   - 説明文書・同意文書への誘導エリア
   - 赤枠＋赤文字、天地中央のテキスト
   ========================================================= */
.docnotice {
  border: 2px solid var(--c-red);
  background-color: var(--c-white);
  padding: min(calc(20 * 100vw / 1030), 20px);
  margin-top: min(calc(60 * 100vw / 1030), 60px);
  margin-bottom: min(calc(60 * 100vw / 1030), 60px);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .docnotice {
    padding: calc(51 * 100vw / 750) calc(35 * 100vw / 750) calc(52 * 100vw / 750);
    margin-top: calc(71 * 100vw / 750);
    margin-bottom: calc(162 * 100vw / 750);
  }
}

.docnotice__text {
  color: var(--c-red);
  font-weight: bold;
  line-height: 1;
  font-size: min(calc(18 * 100vw / 1030), 18px);
}
@media (max-width: 768px) {
  .docnotice__text {
    font-size: calc(31 * 100vw / 750);
    line-height: 1.4516129032;
  }
}
/*# sourceMappingURL=style.css.map */