@charset "utf-8";

/**************************
*
* リセット↓
*
**************************/
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,
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;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

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

body {
  line-height: 1.5;
  word-break: break-all;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

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

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

a:link,
a:visited {
  text-decoration: none;
}

a {
  text-decoration: none;
  transition: 0.3s all;
}

*:focus {
  outline: none;
}

img {
  max-width: 100%;
  height: auto;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

sup {
  font-size: 0.7em;
}

/*****************************************************************************************************************
*
* 　初期設定
*
*****************************************************************************************************************/
button,
input,
select,
textarea,
body {
  font-family:
          "M PLUS Rounded 1c", "Avenir", "Helvetica Neue", "Helvetica", "Arial",
          "Hiragino Sans", "ヒラギノ角ゴシック", YuGothic, "Yu Gothic", "游ゴシック",
          "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* カラー定義 */
:root {
  --main01: #182268;
  --main02: #6b72a6;
  --black01: #1d1d1d;
  --primary01: #00b1e4;
  --primary02: #182268;
  --primary03: #007fbb;
  --primary04: #91CDF1;
  --primary05: #004190;
  --primary06: #0080C6;
  --primary07: #2D6AAE;
  --primary08: #51508B;
  --sub01: #D70051;
  --sub02: #EF858C;
  --sub03: #00A0DD;
  --sub04: #1D50A2;
  --sub05: #796BAF;
  --black: #3E3A39;
}

html{
  height: 100%;
}

body {
  box-sizing: border-box;
  font-family: "M PLUS Rounded 1c";
  font-weight: 400;
  min-height: 100%;
  height: auto;
  p,
  a {
    color: var(--black01);
  }
  img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
  }
  box-sizing: border-box;
}

.sp-only {
  display: none !important;
}

header {
  width: 100%;
  position: relative;
  margin: auto;
  top: 0;
  left: 0;
  margin-bottom: 10px;
  background: #fff;
  z-index: 5;
  .wrapper {
    padding: 15px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    left: 0;
    margin: auto;
    max-width: 1180px;
    gap: 20px;

    .logo-area {
      max-width: 420px;
      display: flex;
      align-items: center;
      img {
        height: 34px;
        width: auto;
      }
      a:nth-child(2) {
        margin-left: 30px;
        margin-top: 5px;
        img {
          height: 43px;
        }
      }
    }
    .company-j-logo {
      width: 250px;
      height: auto;
    }

    /* ボタンのスタイル */
    .hamburger-btn {
      /*position: fixed;*/
      flex-shrink: 0;
      top: 20px;
      right: 20px;
      width: 30px;
      cursor: pointer;
      z-index: 20;
    }

    .hamburger-btn span {
      display: block;
      height: 2px;
      margin: 6px 0;
      background: #333;
      border-radius: 2px;
      transition: 0.4s;
    }

    /* バツ印に変化するスタイル */
    #menu-toggle:checked + .hamburger-btn span:nth-child(1) {
      transform: translateY(6px) rotate(45deg);
    }
    #menu-toggle:checked + .hamburger-btn span:nth-child(2) {
      opacity: 0;
    }
    #menu-toggle:checked + .hamburger-btn span:nth-child(3) {
      transform: translateY(-10px) rotate(-45deg);
    }
  }
}

nav {
  width: 100%;
  margin: auto;
  display: flex;
  position: sticky;
  top: 0;
  left: 0;
  justify-content: center;
  background: #fff;
  z-index: 2;
  box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
  .global-navi {
    max-width: 1200px;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .menu-title{
      height: 100%;
    }

    > li {
      position: relative;
      text-align: center;
      font-weight: 500;
      width: 100%;
      height: 100%;
      /*min-height: 55px;*/
      padding: 10px 15px;
      border-right: 1px solid #babdd2;
      a:first-child {
        color: var(--main01);
        width: 100%;
        height: 100%;
        /*padding: 5px 0;*/
        display: block;
        position: relative;
        font-size: 18px;
        /*min-height: 35px;*/
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    > li:first-child {
      border-left: 1px solid #babdd2;
      width: 10%;
      min-width: 90px;
    }

    > li::before {
      background: var(--main02);
      content: "";
      width: 100%;
      height: 5px;
      position: absolute;
      left: 0;
      bottom: 0;
      transform-origin: center top;
      transform: scale(0, 1);
      transition: transform 0.3s;
    }
    > li:has(a:hover)::before {
      transform-origin: center top;
      transform: scale(1, 1);
    }

    li.active::before{
      background: var(--main02);
      content: "";
      width: 100%;
      height: 5px;
      position: absolute;
      left: 0;
      bottom: 0;
      transform-origin: center top;
      transform: scale(1, 1);
    }
  }
}

body:has(#menu-toggle:checked) {
  overflow: hidden;
}
.sub-menu{
  display: none;
}

.submenu-wrap {
  display: none;
  position: fixed;
  left: 0;
  width: 100vw;
  background: #fff;
  padding: 20px;
  border-top:1px solid #babdd2;
  box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);

}


.global-navi li:hover .submenu-wrap {

  display: flex;
  justify-content: center;
}



.global-navi li:hover{
  .sub-menu {
    position: relative;
    width: 100vw;
    background: #fff;
    display: flex;
    gap: 50px;
    justify-content: center;

    li:hover{
      opacity: 0.5;
    }
  }
}


main {
  position: relative;
  padding-bottom: 80px;
}

.wrapper-main {
  max-width: 1200px;
  padding: 0 10px;
  margin: auto;
  position: relative;
}

.main-visual-area {
  position: relative;
  .wrapper-main {
    background: url(../images/mv-pc.jpg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 50% 0;
    height: 330px;
    text-align: center;
    font-weight: 500;
    font-size: 31px;
    padding-top: 40px;
    position: relative;
    h1 {
      font-weight: 500;
      color: var(--main01);
      text-shadow:
              3px 3px 3px #ffff,
              -3px -3px 3px #ffff,
              -3px 3px 3px #ffff,
              3px -3px 3px #ffff,
              3px 0 3px #ffff,
              -3px 0 3px #ffff,
              0 3px 3px #ffff,
              0 -3px 3px #ffff;
    }
  }

  &:before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, #dbf0ff, #dbf0ff 49.9%, #f2f9ff 50%, #f2f9ff);
  }
}



.menu-area01{
  display: flex;
  gap: 30px;
  justify-content: space-between;
  position: relative;
  padding-bottom: 50px;
  background-image : linear-gradient(to right, #8c90b4 4px, transparent 4px);
  background-size: 12px 4px;
  background-repeat: repeat-x;
  background-position: bottom;

  .menu-part{
    width: 48%;
    display: block;

    h2 {
      height: 220px;
      border-radius: 15px;
      margin-top: 50px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      padding-left: 50px;
      color: #fff;
      font-size: 32px;
      font-family: var(--main01);
      font-weight: 500;
    }

    .lead{
      font-size: 19px;
      font-family: var(--main01);
      /*font-weight: 300;*/
      padding: 20px;
    }

    &:first-child {
      h2 {
        background-color: var(--primary01);
      }
      .lead{
        color: var(--primary03);
      }
    }
    &:nth-child(2) {
      h2 {

        background-color: var(--main01);
      }
      .lead{
        color: var(--primary02);
      }
    }

    &:first-child h2::before{
      content: "";
      display: block;
      position: absolute;
      background: url(../images/top-img01.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: 0% 150%;
      right: 0;
      bottom: 0;
      width: 205px;
      aspect-ratio: 414/444;
    }
    &:nth-child(2) h2::before{
      content: "";
      display: block;
      position: absolute;
      background: url(../images/top-img02.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: 50% 80%;
      right: 0;
      bottom: 0;
      width: 200px;
      aspect-ratio: 403/444;
    }
  }
}

.menu-area02{
  position: relative;
  margin-top: 50px;

  .menu-part{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    a{
      width: 48%;
    }

    h2 {
      border-radius: 15px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      padding: 50px;
      font-size: 28px;
      font-family: var(--main01);
      font-weight: 500;
      text-shadow: 0 2px 3px rgba(255, 255, 255, 0.75);
    }

    .lead{
      font-size: 19px;
      font-family: var(--main01);
      font-weight: 400;
      padding: 20px;
      width: 48%;
    }

    &:first-child {
      h2 {
        border: 3px solid var(--primary02);
        color: var(--primary02);
      }
      .lead{
        color: var(--primary02);
      }
    }
    &:nth-of-type(2) {
      h2 {
        border: 3px solid var(--primary01);
        color: var(--primary01);
      }
      .lead{
        color: var(--primary03);
      }
    }

    &:first-child h2::before{
      content: "";
      display: block;
      position: absolute;
      background: url(../images/top-chara01.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: 0% 100%;
      right: 5px;
      bottom: 0;
      width: 155px;
      aspect-ratio: 282/321;
      z-index: -1;
    }
    &:nth-of-type(2) h2::before{
      content: "";
      display: block;
      position: absolute;
      background: url(../images/top-chara02.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: 0% 100%;
      right: 5px;
      bottom: 0;
      width: 120px;
      aspect-ratio: 212/324;
      z-index: -1;
    }
  }
}

.about-disease{
  padding: 20px;
  font-size: 18px;
  font-family: var(--main01);
  font-weight: 400;
  border: 1px solid #a6a6a6;
  margin-top: 30px;
  margin-bottom: 60px;
  color: #4d4d4d;
  span{
    font-size: 20px;
  }
}

.attention{
  margin-top: 80px;
  font-family: var(--main01);
  font-weight: 300;
  font-size: 16px;
  color: #4d4d4d;
  span{
    font-weight: 500;
    font-size: 20px;
  }
}

/* ページ先頭へボタン */
.to-page-top{
  display: inline-block;
  padding:10px 35px 10px 20px;
  font-family: var(--main01);
  font-weight: 500;
  line-height: 1.2;
  font-size: 16px;
  color: var(--primary02);
  background: #fff;
  border: 1px solid #e5e8eb;
  border-radius: 8px 0 0 8px;
  box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
  z-index: 5;
  position: fixed;
  right: 0;
  bottom: 100px;
}
.to-page-top:after{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 10px;
  width: 1em;
  height: 1em;
  clip-path: polygon(0 7%, 7% 0, 57% 50%, 7% 100%, 0 93%, 43% 50%, 0 7%);
  aspect-ratio: 1;
  background-color: #333;
  transform: translateY(-60%) rotate(270deg);
}

/* 汎用マウスオーバー */
@media (hover: hover) {
  .mouse-over-main:hover {
    opacity: 0.5;
    transition: all 0.4s ease;
  }
}



/* -------------------------------------------------------

 前移動、次移動

 ------------------------------------------------------- */

.prev-next-area{
  border-top: 1px solid #6B72A6;
  padding: 50px 0;
  .wrapper-main{
    display: flex;
    justify-content: space-between;
  }
  .wrapper-main.flex-end{
    justify-content: flex-end;
  }


  a{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    width: 370px;
    border: 2px solid var(--main01);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 400;
    color: var(--main01);
    text-align: center;
    transition: all 0.4s ease;


    @media (hover: hover) {
      &:hover{
        background: var(--main01);
        color: #fff;
      }
    }


    &:before {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      right: 15px;
      width: 1em;
      height: 1em;
      clip-path: polygon(0 7%, 7% 0, 57% 50%, 7% 100%, 0 93%, 43% 50%, 0 7%);
      aspect-ratio: 1;
      background-color: var(--main01);
      transform: translateY(-50%);
    }
    &.arrow-l:before {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 15px;
      width: 1em;
      height: 1em;
      clip-path: polygon(0 7%, 7% 0, 57% 50%, 7% 100%, 0 93%, 43% 50%, 0 7%);
      aspect-ratio: 1;
      background-color: var(--main01);
      transform: translateY(-50%) rotate(180deg);
    }


    @media (hover: hover) {
      &:hover:before {
        background-color: #fff;
      }
    }
  }
}




/* -------------------------------------------------------

 フッタ

 ------------------------------------------------------- */
footer {
  width: 100%;
  /*height: 85px;*/
  position: relative;
  margin: auto;
  top: 0;
  left: 0;
  background: #e5e8eb;
  padding-top: 30px;
  padding-bottom: 30px;
  box-shadow: 0 -8px 5px rgba(0, 0, 0, 0.1);
  z-index: 1;
  /*position: sticky;*/
  /*top: 100vh;*/
  top: auto;

  .upper-area{
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    .site-logo{
      width: 200px;
      height: auto;
    }
    .each-link{
      display: flex;
      width: 530px;
      flex-wrap: wrap;
      /*justify-content: space-between;*/
      line-height: 1.8;
      border-left: 1px solid #aaa;
      padding-left: 30px;
      padding-bottom: 30px;
      column-gap: 40px;
      li{
        position: relative;
        padding-left: 15px;
        font-size: 19px;

        &:before{
          content: "";
          display: block;
          position: absolute;
          top:50%;
          left:0;
          width: 1em;
          height: 1em;
          clip-path: polygon(0 7%, 7% 0, 57% 50%, 7% 100%, 0 93%, 43% 50%, 0 7%);
          aspect-ratio: 1;
          background-color: #333;
          transform: translateY(-50%);
        }

        &:after {
          background: var(--main02);
          content: "";
          width: 100%;
          height: 5px;
          position: absolute;
          left: 0;
          bottom: 0;
          border-radius: 50px;
          transform-origin: center top;
          transform: scale(0, 1);
          transition: transform 0.3s;
        }
        &:has(a:hover)::after {
          transform-origin: center top;
          transform: scale(1, 1);
        }
      }

    }
  }

  .lower-area{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    font-size: 15px;
    .copyright{
      font-size: 15px;
    }
    .material-number{
      font-size: 13px;
    }
  }
}


/* -------------------------------------------------------

 下層ページ

 ------------------------------------------------------- */

.breadcrumb-area{
  background: #E5E8EB;
  .wrapper-main{
    display: flex;
    padding: 10px;
    gap: 30px;
    li{
      font-size: 13px;
      position: relative;

      &:after{
        content: ">";
        display: block;
        position: absolute;
        top:50%;
        right: -20px;
        transform: translateY(-60%);
      }
      &:last-child:after{
        display: none;
      }
    }
  }
}

.second-visual-area {
  position: relative;
  .wrapper-main {
    max-width: 1200px;
    padding: 0 10px;
    height: 200px;
    margin: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    h1{
      font-size: 32px;
      font-family: var(--main01);
      font-weight: 500;
      color: #fff;
      text-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
    }
  }

  &.bg-icon01::before{
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    background: url(../../asthma/images/bg-icon01.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0% 100%;
    width: 300px;
    aspect-ratio: 1/1;
    pointer-events: none;
  }
  &.bg-icon02::before{
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    background: url(../../sinusitis/images/bg-icon02.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0% 100%;
    width: 250px;
    aspect-ratio: 1/1;
    pointer-events: none;
  }
  &.bg-icon03::before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    background: url(../../expenses-asthma/images/bg-icon03.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0% 100%;
    width: 250px;
    aspect-ratio: 1/1;
    pointer-events: none;
  }
  &.bg-icon04::before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    background: url(../../expenses-sinusitis/images/bg-icon04.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0% 100%;
    width: 270px;
    aspect-ratio: 1/1;
    pointer-events: none;
  }


  &.primary-color02{
    background-color: var(--main02);
  }
  &.primary-color04{
    background-color: var(--primary04);
  }
  &.primary-color08{
    background-color: var(--primary08);
  }
}


.main-second{
  padding-top: 20px;
}

.flex-column01{
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.title-main01{
  position: relative;
  padding: 50px 0 30px 0;
  font-size: 34px;
  font-weight: 500;
  color: var(--primary05);
  border-bottom: 1px solid var(--primary06);
  .small{
    font-size: 28px;
  }

  .supplement{
    display: block;
    font-size: 16px;
    color: var(--black01);
    font-weight: 300;
    text-align: right;
  }

  &.title-icon01:after{
    content: "";
    display: block;
    position: absolute;
    width: 150px;
    aspect-ratio: 297/195;
    background: url(../../asthma/images/title-icon02-01-01.png);
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 0;
    right: 0;
  }
  &.title-icon02:after{
    content: "";
    display: block;
    position: absolute;
    width: 180px;
    aspect-ratio: 528/236;
    background: url(../../asthma/images/title-icon02-01-02.png);
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 0;
    right: 0;
  }
  &.title-icon03:after{
    content: "";
    display: block;
    position: absolute;
    width: 180px;
    aspect-ratio: 396/212;
    background: url(../../asthma/images/title-icon02-02-01.png);
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 0;
    right: 0;
  }
  &.title-icon04:after{
    content: "";
    display: block;
    position: absolute;
    width: 160px;
    aspect-ratio: 306/224;
    background: url(../../asthma/images/title-icon02-02-02.png);
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 0;
    right: 0;
  }
  &.title-icon05:after{
    content: "";
    display: block;
    position: absolute;
    width: 160px;
    aspect-ratio: 332/235;
    background: url(../../asthma/images/title-icon02-03-01.png);
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 0;
    right: 0;
  }
  &.title-icon06:after{
    content: "";
    display: block;
    position: absolute;
    width: 160px;
    aspect-ratio: 278/204;
    background: url(../../sinusitis/images/title-icon03-03-01.png);
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 0;
    right: 0;
  }
  &.title-icon07:after{
    content: "";
    display: block;
    position: absolute;
    width: 80px;
    aspect-ratio: 134/120;
    background: url(../../sinusitis/images/title-icon03-03-02.png);
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 5px;
    right: 0;
  }
}

.title-main02 {
  position: relative;
  padding: 30px 0 0 0;
  font-size: 34px;
  font-weight: 500;
  border-bottom: 1px solid var(--primary06);
  display: flex;
  align-items: center;
  color: var(--sub03);
  .number{
    background: var(--sub03);
    color: #fff;
    width: 50px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
  }
  .black{
    color: var(--black01);
  }
  sup{
    margin-top: -5px;
  }
}


.common-block01{
  display: flex;
  flex-direction: column;
  gap: 20px;
  h3{
    position: relative;
    color: var(--sub01);
    font-size: 22px;
    font-weight: 500;
    padding-left: 1.2em;

    &:before{
      content: "";
      display: block;
      position: absolute;
      top:0.4em;
      left:0;
      width: 1.0em;
      height: 0.8em;
      background-color: var(--sub01);
      clip-path: polygon(50% 0.8em, 0% 0%, 1.0em 0%);
    }
  }

  p{
    font-size: 18px;
    font-weight: 400;
    color: var(--black01);
  }
}

.cite-block{
  text-align: right;
  font-size: 13px;
  font-weight: 300;
  color: var(--black01);

  .indent{
    text-align: left;
  }
}
.cite-block.flex{
  display: flex;
  justify-content: flex-end;
}

.border-area01{
  position: relative;
  border: 3px solid var(--sub02);
  border-radius: 20px;
  padding: 50px 50px 30px 50px;
  max-width: 970px;
  margin: auto;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 20px;

  &.p-adjust{
    padding: 30px 50px;
  }

  &.mt-adjust{
    margin-top: 0;
  }

  &.color-blue{
    border: 3px solid var(--sub04);
    margin-top: 0;
    .head-triangle{
      color: var(--primary07);;
    }
  }

  &.color-purple{
    border: 3px solid var(--primary08);
    margin-top: 0;
    .head-triangle{
      color: var(--primary08);

      &:before{
        background-color: var(--primary08);
      }
    }
  }


  h3{
    border-radius: 30px;
    padding: 10px 15px;
    min-width: 468px;
    background: var(--sub02);
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    display: inline-block;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
  }

  .head-triangle{
    font-size: 20px;
    font-weight: 500;
    padding-left: 1.1em;
    position: relative;
    &:before {
      content: "";
      display: block;
      position: absolute;
      top: 0.25em;
      left: 0;
      width: 1.0em;
      height: 1.0em;
      background-color: var(--sub02);
      clip-path: polygon(0 0, 0 100%, 0.6em 50%);

      &.pink:before{}
      background-color: var(--sub01);
    }
  }

  &.color-blue .head-triangle{
    &:before {
      background-color: var(--primary07);
    }
  }

  &.border-area02{
    width: 70%;
    padding: 40px;

    .symptom-list{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      li{
        width: 48%;
        padding-left: 1.1em;
        position: relative;
        color: var(--sub01);
        font-size: 22px;
        font-weight: 500;

        &:nth-child(5){
          width: 100%;
        }
      }
      li:before{
        content: "";
        display: block;
        position: absolute;
        top:0.3em;
        left:0;
        width: 0.8em;
        height: 0.8em;
        background-color: var(--sub01);
        border-radius: 50px;
      }
    }

    .img-area{
      display: flex;
      gap: 30px;
      justify-content: center;
      img{
        height: 130px;
        width: auto;
      }
    }
  }

  &.border-area03{
    width: 70%;
    padding: 40px;
    border:3px solid var(--primary08);

    .treatment-list{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 30px;
      li{
        width: 100%;
        padding-left: 1.1em;
        position: relative;
        color: var(--black01);
        font-size: 22px;
        font-weight: 400;
      }
      li:before{
        content: "";
        display: block;
        position: absolute;
        top:0.3em;
        left:0;
        width: 0.8em;
        height: 0.8em;
        background-color: var(--primary07);
        clip-path: polygon(0 0, 0 100%, 0.6em 50%);
      }
    }

    .img-area{
      display: flex;
      gap: 30px;
      justify-content: center;
      img{
        height: 110px;
        width: auto;
      }
      img:last-child{
        height: 80px;
      }
    }
  }
}

.img-area01{
  width: 80%;
  margin: auto;
}
.img-area02{
  display: flex;
  justify-content: center;
  gap: 50px;
  img{
    width: 20%;
  }
}
.img-area03{
  width: 18%;
  min-width: 175px;
}
.img-area04{
  width: 95%;
  margin: auto;
}
.img-area05{
  width: 60%;
  margin: auto;
}
.img-area06{
  width: 18%;
  margin-left: auto;
  margin-right: 0;
}

.common-block02{
  display: flex;
  flex-direction: column;
  gap: 20px;
  .check-text{
    position: relative;
    font-size: 22px;
    font-weight: 500;
    color: var(--sub01);
    padding-left: 1.2em;
    text-indent: -1.2em;
    vertical-align: baseline;

    .check-box{
      /*content: "";*/
      display: inline-block;
      position: relative;
      top:0.2em;
      left:0;
      margin-right: 5px;
      width: 1.0em;
      height: 1.0em;
      border: 2px solid var(--sub01);
    }
 }



  .list01{
    padding-left: 2.5em;
    font-size: 20px;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 10px;
    li {
      position: relative;
      &:before{
        content: "";
        display: block;
        position: absolute;
        top:0.5em;
        left:-1.0em;
        width: 0.5em;
        height: 0.5em;
        border-radius: 50%;
        background-color: var(--sub01);
        clip-path: circle(50% at 50% 50%);
      }
    }
  }
}

.common-text01{
  font-size: 20px;
  font-weight: 400;
  color: var(--black01);
}

.mt-adjust01{
  margin-top: 30px;
}

.split-block01{
  display: flex;
  gap: 50px;

  .img-area{
    width: 20%;
  }
  .main-text{
    width: 80%;
  }
}

.dr-comment-area01{
  position: relative;
  margin: auto;
  margin-top: 50px;
  display: flex;
  gap: 50px;
  justify-content: center;
  align-items: center;
  .serif-area{
    position: relative;
    width: 60%;
    padding: 30px 40px;
    border: 3px solid var(--primary07);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    p{
      font-size: 20px;
      font-weight: 400;
      color: var(--black01);
    }
    .img-area{
      width: 22%;
      margin-right: 0;
      margin-left: auto;
    }

    &:before {
      content: "";
      position: absolute;
      top: 50%;
      right: -40px;
      width: 40px;
      height: 40px;
      background: var(--primary07);
      clip-path: polygon(0 0, 0 100%, 100% 50%);
      /*transform: translateX(-50%);*/
    }

    &:after {
      content: "";
      position: absolute;
      top: calc(50% + 3px);
      right: -34px;
      width: 36px;
      height: 34px;
      background: #fff;
      clip-path: polygon(0 0, 0 100%, 100% 50%);
      /* transform: translateX(-50%);*/
    }
  }

  > .img-area{
    width: 20%;
    min-width: 220px;

  }
}

.dr-comment-area02{
  position: relative;
  width: 100%;
  padding: 30px 40px;
  border: 3px solid var(--primary07);
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  p{
    font-size: 20px;
    font-weight: 500;
    color: var(--primary07);
  }
  .img-area{
    position:absolute;
    bottom: 0;
    right: 30px;
    width: 14%;
  }
  &.color-purple{
    border: 3px solid var(--primary08);
    p{
      color: var(--primary08);
    }
  }
}

.dr-comment-area03{
  position: relative;
  width: 100%;
  p{
    width: 100%;
    padding: 30px;
    background: #EBF5EC;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 400;
    color: var(--black01);
    position: relative;
    &:after{
      content: "";
      position:absolute;
      display: block;
      bottom: -50px;
      left: 50%;
      width: 50px;
      height: 50px;
      background:  #EBF5EC;
      clip-path: polygon(0 0, 50% 100%, 100% 0);
    }
  }
  .img-area{
    margin: auto;
    margin-top: 50px;
    width: 60%;
  }

}


.common-block03{
  display: flex;
  flex-direction: column;
  gap: 10px;
  .head-block01{
    position: relative;
    color: var(--black01);
    font-size: 17px;
    font-weight: 400;
    padding-left: 1.2em;
    text-indent: -1.2em;

    .filled-box{
      display: inline-block;
      position: relative;
      top:0.15em;
      left:0;
      margin-right: 5px;
      width: 1.0em;
      height: 1.0em;
      background-color: var(--sub03);

      &.color-red{
        background-color: var(--sub01);
      }
      &.color-purple{
        background-color: var(--primary08);
      }
    }


  }

  .head-block02{
    font-size: 22px;
    position: relative;
    color: var(--black01);
    font-weight: 500;
    padding-left: 1.2em;
    text-indent: -1.2em;

    .filled-box{
      display: inline-block;
      position: relative;
      top:0.15em;
      left:0;
      margin-right: 5px;
      width: 1.0em;
      height: 1.0em;
      background-color: var(--sub03);
      &.red{
        background-color: var(--sub01);
      }
      &.color-purple{
        background-color: var(--primary08);
      }

    }
  }

  .main-text{
    font-size: 20px;
    font-weight: 400;
    color: var(--black01);
  }

  .head-block03 {
    position: relative;
    color: var(--black01);
    font-size: 20px;
    font-weight: 400;
    padding-left: 1.2em;
    text-indent: -1.2em;

    .filled-box {
      display: inline-block;
      position: relative;
      top: 0.15em;
      left: 0;
      width: 1.0em;
      height: 1.0em;
      margin-right: 5px;
      background-color: var(--sub03);

      &.color-red {
        background-color: var(--sub01);
      }

      &.color-purple {
        background-color: var(--primary08);
      }
    }
  }

  .head-block04 {
    position: relative;
    color: var(--black01);
    font-size: 20px;
    font-weight: 500;
    padding-left: 1.2em;

    &:before {
      content: "";
      display: block;
      position: absolute;
      top: 0.2em;
      left: 0;
      width: 1.0em;
      height: 1.0em;
      border-radius: 50px;
      background-color: var(--sub03);
    }
  }


  .head-block05 {
    position: relative;
    color: var(--black01);
    font-size: 20px;
    font-weight: 400;
    padding-left: 1.2em;

    &:before {
      content: "";
      display: block;
      position: absolute;
      top: 0.2em;
      left: 0;
      width: 1.0em;
      height: 1.0em;
      background-color: var(--sub03);
      clip-path: polygon(0 0, 0 100%, 80% 50%);
    }

    & .blue{
      color: var(--sub03);
      font-weight: 500;
    }
    & .pink{
      color: #E1444E;
      font-weight: 500;
    }
  }

  .head-block06 {
    position: relative;
    color: var(--black01);
    font-size: 20px;
    font-weight: 400;
    padding-left: 1.2em;

    &:before {
      content: "";
      display: block;
      position: absolute;
      top: 0.2em;
      left: 0;
      width: 1.0em;
      height: 1.0em;
      border-radius: 50px;
      background-color: #AED9F4;
    }
  }

  p{
    font-size: 18px;
    font-weight: 400;
    color: var(--black01);

    &.indent{
      padding-left: 1.5em;
    }
  }

  .red{
    color: var(--sub01);
    font-weight: 500;
  }

  &.split-block01{
    display: flex;
    flex-direction: row;
    gap: 50px;
    p {
      width: 80%;
    }
    .img-area{
      width: 10%;
    }
  }
}

.common-block04{
  margin-top: 50px;

  .main-text{
    font-size: 20px;
    font-weight: 400;
    color: var(--black01);
  }
}



.administration-area{
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding-left: 180px;
  margin-top: 10px;
  margin-bottom: 10px;
  img:first-child{
    width: 50px;
  }
  img:nth-child(2){
    width: 85px;
  }
  p{
    font-size: 32px;
    font-weight: 500;
    color: var(--sub04);
  }
}

.supplement-block01{
  dl{
    display: flex;
    align-items: baseline;
    font-size: 15px;
    font-weight: 300;
    gap: 5px;

    &.flex-end {
      align-items: flex-end;
    }

    &:last-child{
      margin-bottom: 0;
    }
    dt{
      white-space: nowrap;
      &.sky-blue{
        color: #ACDAF3;
      }
    }
  }
  ul{
    li{
      font-size: 15px;
      font-weight: 300;
    }
  }



  .indent{
    padding-left: 20px;
  }
}

.supplement-block02{
  dl{
    display: flex;
    align-items: flex-start;
    font-size: 13px;
    font-weight: 300;
    row-gap: 5px;

    &.flex-end {
      align-items: flex-end;
    }

    &:last-child{
      margin-bottom: 0;
    }
  }

  .indent{
    padding-left: 20px;
  }
}

.supplement-block03{
  ul {
    li {
      display: flex;
      align-items: flex-start;
      font-size: 13px;
      font-weight: 300;
      row-gap: 5px;
      &:first-child{
        font-weight: 400;
        font-size: 16px;
      }
    }
  }
  dl{
    display: flex;
    font-size: 13px;
    font-weight: 300;
    row-gap: 5px;
  }
}


.response-area{

  padding-left: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  .part{
    width: 18%;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    .img-area{
      margin-bottom: 10px;
    }
    p{
      color: var(--sub01);
    }
  }
}


.table-style01{
  width: 100%;
  padding-left: 30px;
  border-collapse: separate;
  overflow: hidden;
  border-spacing: 0;

  th,td{
    width: 20%;
    border-bottom: 1px solid #B9B9B9;
    border-right: 1px solid #B9B9B9;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: var(--black01);
    padding: 10px;
    vertical-align: middle;
  }
  th{
    background: #DDF1FC;
  }
  th:first-child{
    background: #BBDCF4;
    border-left: 1px solid #B9B9B9;
  }
  td{
    background: #EFF8FE;
  }
  tr:first-child{
    th{
      border-top: 1px solid #B9B9B9;
      &:first-child{
        border-radius: 8px 0 0 0;
      }
      &:last-child{
        border-radius: 0 8px 0 0;
      }
    }
  }
  tr:last-child{
    th{
      border-radius: 0 0 0 8px;
    }
    td:last-child{
      border-radius: 0 0 8px 0;
    }
  }

  &.color-purple{

    th{
      background: #E2E4F2;
    }
    th:first-child{
      background: #D2D5EC;
    }
    td{
      background: #F2F4FA;
    }
  }
}

.table-style02{
  width: 100%;
  max-width: 800px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;

  h4{
    font-size: 18px;
    font-weight: 400;
    color: var(--black01);
  }

  table{
    font-size: 18px;
    font-weight: 300;
    color: var(--black01);
    th{
      background: var(--sub03);
      color: #fff;
      padding: 5px 10px;
      border-top: 1px solid #B9B9B9;
    }
    td{
      padding: 5px 10px;
      background: #EAF6FD;
      border-right: 1px solid #B9B9B9;
      border-bottom: 1px solid #B9B9B9;

      &:last-child{
        text-align: center;
      }
    }

    th:first-child{
      writing-mode: vertical-rl;
    }

    tr{
      &:first-child{
        th:first-child{
          border-right: 1px solid #B9B9B9;
          border-left: 1px solid #B9B9B9;
        }
        th:nth-child(2){
          text-align: left;
        }
        th:nth-child(2), th:nth-child(3){
          border-right: 1px solid #B9B9B9;
        }
      }
      &:nth-child(2){
        th{
          background: #EAF6FD;
          color: var(--black01);
          border-right: 1px solid #B9B9B9;
          border-left: 1px solid #B9B9B9;
        }
      }
      &:last-child{
        td:first-child{
          border-top: 1px solid #B9B9B9;
          border-left: 1px solid #B9B9B9;
        }
      }
    }
  }
}


.caution-area{
  padding: 35px;
  border: 3px solid var(--sub01);
  border-radius: 20px;
  &.flex{
    display: flex;
    align-items: center;
    gap: 10px;
    .img-area{
      width: 5%;
    }
  }
  p{
    font-size: 20px;
    font-weight: 500;
    color: var(--sub01);
  }
}

.qa-area{
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 40px;
  border: 3px solid #98D1F0;
  border-radius: 20px;
  margin-top: 30px;

  .block-part{
    div{
      display: flex;
      align-items: center;
      gap: 20px;

      &:first-child{
        .img-area{
          width: 15%;
        }
        .question-text {
          font-size: 20px;
          font-weight: 500;
          color: var(--black01);
        }
      }

      &:last-child{
        gap: 60px;
        .img-area{
          width: 15%;
        }
        .dr-serif{
          background: #EAF6FD;
          padding: 30px;
          border-radius: 15px;
          color: var(--black01);
          font-weight: 400;
          position: relative;
          font-size: 18px;

          &:after{
            content: "";
            position: absolute;
            top: 50%;
            right: -40px;
            width: 40px;
            height: 40px;
            background: #EAF6FD;
            clip-path: polygon(0 0, 0 100%, 100% 50%);
            transform: translateY(-50%);
          }

        }

      }
    }

  }
}

.structure-area{
  display: flex;
  flex-direction: column;
  gap: 20px;

  h3{
    font-size: 28px;
    font-weight: 500;
    color: var(--primary08);

    &.color-red{
      color: var(--sub01);
    }
  }

  .img-area{
    width: 70%;
    margin: auto;
  }
}

.main-text01{
  font-size: 20px;
  font-weight: 400;
  color: var(--black01);

  &.indent{
    padding-left: 1.2em;
  }
}

.target-area{
  max-width: 870px;
  width: 100%;
  margin: auto;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 20px;

  .block-part {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;


    p {
      font-size: 22px;
      font-weight: 500;
      color: var(--sub01);
      padding-left: 1.3em;
      position: relative;

      &:before {
        content: "□";
        position: absolute;
        top: -0.15em;
        left: 0;
        font-size: 120%;
        width: 1.0em;
        height: 1.0em;
        color: var(--sub01);

      }
    }

    .img-area{
      width: 20%;
    }

    &:nth-child(2){

      .img-area{
        width: 28%;
      }

    }
    &:nth-child(3){

      .img-area{
        width: 21%;
      }

    }
  }
}

.injection-body-area{
  width: 100%;
  max-width: 700px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 30px;
  ul {
    width: 40%;
    li {
      font-size: 20px;
      font-weight: 400;
      color: var(--black01);
      position: relative;
      padding-left: 1.1em;
      text-indent: -1.2em;

      .filled-box{
        position: relative;
        display: inline-block;
        top: 0.1em;
        left: 0;
        margin-right: 5px;
        width: 0.8em;
        height: 0.8em;
        background-color: var(--primary08);
      }
    }
  }
  .img-area {
    width: 60%;
  }
}

.block-title01{
  font-size: 24px;
  font-weight: 500;
  color: var(--sub03);

  .black{
    color: var(--black01);
  }
}

.block-title02{
  font-size: 24px;
  font-weight: 500;
  color: var(--sub03);
  padding-left: 1.2em;
  position:relative;

  &:before{
    content: "";
    position: absolute;
    display: block;
    width: 1em;
    height: 1em;
    background: var(--sub03);
    top: 0.2em;
    left: 0;
    clip-path: polygon(0 0, 0 100%, 80% 50%);;
  }

  &.color-purple{
    color: var(--primary08);
    &:before{
      background: #BBAAD2;
    }
  }
}

.block-title03{
  font-size: 28px;
  font-weight: 500;
  color: var(--primary08);
}

.block-title04{
  font-size: 22px;
  font-weight: 500;
  color: var(--primary08);
}

.block-title05{
  font-size: 22px;
  font-weight: 500;
  color: var(--sub01);
  text-align: center;
  line-height: 1.2;
  padding-right: min(250px, 10vw);
  .small{
    font-size: 16px;
  }
  .black{
    color: var(--black01);
  }

}


.border-area04{
  width: 100%;
  max-width: 650px;
  padding: 30px;
  margin: auto;
  border: 3px solid var(--sub03);
  display: flex;
  flex-direction: column;
  gap: 10px;

  &.border-sky{
    border: 3px solid #AED9F4;
  }
}

.border-area05{
  width: 100%;
  padding: 30px;
  margin: auto;
  border: 3px solid var(--sub03);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 30px;

  &.border-sky{
    border: 3px solid #AED9F4;
  }
}

.border-area06{
  width: 100%;
  padding: 30px;
  margin: auto;
  border: 3px solid var(--sub05);
  display: flex;
  flex-direction: column;
  gap: 10px;

  h4{
    font-size: 22px;
    font-weight: 500;
    color: var(--primary05);
  }
  .main-text{
    font-size: 18px;
    font-weight: 400;
    color: var(--black01);
  }
  .supplement-text{
    display: flex;
    font-size: 15px;
    font-weight: 300;
    color: var(--black01);
    dt{
      white-space: nowrap;
    }
  }
}

.set-block01{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.set-block02{
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.matrix01{

  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 720px;
  margin: auto;

  li{
    width: 50%;
    padding: 5px;
    font-size: 24px;
    text-align: center;
    border-right: 3px solid #AED9F4;
    border-top: 3px solid #AED9F4;

    &:first-child, &:nth-child(3){
      border-left: 3px solid #AED9F4;
    }
    &:nth-child(3), &:nth-child(4){
      border-bottom: 3px solid #AED9F4;
    }

    &:last-child{
      border: 3px solid #F5C8CF;
      margin-top: 10px;
      width: 100%;
    }
  }
}


.scroll-area02 {
  width: 100%;
  max-width: 970px;
  margin: auto;
  .target-age {
    padding: 5px 20px;
    font-size: 24px;
    font-weight: 500;
    background: var(--sub03);
    color: #fff;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      display: block;
      width: 70px;
      aspect-ratio: 132/158;
      background: url(../../expenses-asthma/images/img04-02-05.png);
      background-repeat: no-repeat;
      background-size: contain;
      bottom: 0;
      right: 10px;
    }

    &.color-purple{
      background: var(--sub05);

      &::after {
        width: 70px;
        aspect-ratio: 131/165;
        background: url(../../expenses-asthma/images/img04-02-06.png);
        background-repeat: no-repeat;
        background-size: contain;
      }
    }

    &.type02{
      .number{
        padding: 5px 15px;
        border: 1px solid #fff;
        display: inline-block;
        margin-right: 10px;
      }
    }
  }
  .mt-adjust{
    margin-top: 50px;
  }
}

.table-style03{
  width: 100%;
  margin-top: 15px;
  th,td{
    padding: 10px 15px;
    font-size: 22px;
    font-weight: 300;
    color: var(--black01);
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
    vertical-align: middle;
  }
  td{
    background: #E6F4FD;
  }
  tr:first-child{
    th {
      text-align: center;
      background: #4CACE2;
      color: #fff;
      border-right: 1px solid #fff;
      th:last-child{
        border-right: none;

      }
    }
  }
  tr:nth-child(2), tr:nth-child(3){
    th{
      background: #B2E9FA;
      text-align: left;
    }
    td:last-child{
      border-right: none;
    }
  }
  tr:last-child{
    td:last-child{
      border-right: none;
    }
  }
}

.table-style04{
  width: 100%;
  margin-top: 15px;
  th,td{
    padding: 10px 15px;
    font-size: 22px;
    font-weight: 300;
    color: var(--black01);
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
    vertical-align: middle;
  }
  td{
    background: #E6F4FD;
  }
  tr:first-child{
    th {
      text-align: center;
      background: #9A8EC3;
      color: #fff;
      border-right: 1px solid #fff;
      th:last-child{
        border-right: none;
      }
    }
  }
  tr:nth-child(2){
    th{
      background: #F4B4D0;
      writing-mode: vertical-rl;
      text-align: center;
    }
    td:last-child{
      border-right: none;
    }
    td{
      background:#FEF4F8;
    }
    td:first-of-type{
      background: #F7C9DD;
    }
  }
  tr:nth-child(3){
    td:last-child{
      border-right: none;
    }
    td{
      background:#FEF4F8;
    }
    td:first-of-type{
      background: #FADCE9;
    }
  }
  tr:nth-child(4){
    td:last-child{
      border-right: none;
    }
    td{
      background:#FEF4F8;
    }
    td:first-of-type{
      background: #FCEBF3;
      border-right: 1px solid #888;
    }
  }
  tr:nth-child(5){
    th{
      background: #E1D2E5;
    }
    td:last-child{
      border-right: none;
    }
    td{
      background:#F0E3EF;
    }
    td:first-of-type{
      background: #E1D2E5;
      border-right: 1px solid #888;
    }
  }
  tr:nth-child(6){
    th{
      background: #E1E3F1;
    }
    td:last-child{
      border-right: none;
    }
    td{
      background:#EBEBF5;
    }
    td:first-of-type{
      border-right: 1px solid #888;
    }
  }
  tr:last-child{
    td:last-child{
      border-right: none;
    }
  }
  .serif{
    font-family: serif;
  }
}

.sub-text-right{
  text-align: right;
  margin-top: 20px;
  font-size: 16px;
  font-weight: 300;
  color: var(--black01);
  a{
    color: var(--sub03);
    text-decoration: underline;
  }
}

.w-adjust01{
  width: 100%;
  max-width: 970px;
  margin: auto;
}

.table-style05{
  width: 100%;
  margin-top: 15px;
  th,td{
    padding: 10px 15px;
    font-size: 22px;
    font-weight: 300;
    color: var(--black01);
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
    vertical-align: middle;
    line-height: 1.2;
    height: 100px;
  }
  td{
    &:last-child{
      border-right: none;
    }
  }
  tr:nth-child(even){
    th{
      background: #B2E9FA;
    }
    td:first-of-type{
      background: #B2E9FA;
    }
    td:last-of-type{
      background: #E6F4FD;
      text-align: center;
    }
  }
  tr:nth-child(odd){
    th{
      background: #E6F4FD;
    }
    td:first-of-type{
      background: #E6F4FD;
    }
    td:last-of-type{
      background: #F5FBFE;
      text-align: center;
    }
  }

  tr:first-child{
    th {
      text-align: center;
      background: #4CACE2;
      color: #fff;
      border-right: 1px solid #fff;
      th:last-child{
        border-right: none;

      }
    }
  }

  .small{
    font-size: 17px;
  }
}

.table-style06{
  width: 100%;
  margin-top: 15px;
  th,td{
    padding: 10px 15px;
    font-size: 22px;
    font-weight: 300;
    color: var(--black01);
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
    vertical-align: middle;
    line-height: 1.2;
    height: 100px;
  }
  td{
    text-align: center;
    &:first-of-type{
      text-align: left;
    }
    &:last-child{
      border-right: none;
    }
  }

  tr:first-child{
    th {
      text-align: center;
      background: #9A8EC3;
      color: #fff;
      border-right: 1px solid #fff;
      height: auto;

      &:last-child{
        border-right: none;
        border-bottom: none;
      }
    }
  }
  tr:nth-child(2){
    background: #9A8EC3;
    th {
      border-right: 1px solid #fff;
      color: #fff;
      height: auto;
      &:first-child {
        border-right: 1px solid #fff;
        border-top: 1px solid #fff;
        width: 23%;
      }
      &:last-child {
        border-right: 1px solid #fff;
        width: 23%;
      }
    }
  }

  tr:nth-child(n+3) {
    th:first-child{
      writing-mode: vertical-rl;
      padding: 5px;
    }
  }

  tr:nth-child(3){
    th{
      background: #F4B4D0;
    }
    td:first-of-type{
      background: #F7C9DD;
    }
    td:last-of-type{
      background: #FEF4F8;
      text-align: center;
    }
  }
  tr:nth-child(4){
    td:first-of-type{
      background: #FADCE9;
    }
    td{
      background: #FEF4F8;
    }
  }
  tr:nth-child(5){
    td:first-of-type{
      background: #FCEBF3;
    }
    td{
      background: #FEF4F8;
    }
  }
  tr:nth-child(6){
    th{
      background: #E1D2E5;
    }
    td:first-of-type{
      background: #E1D2E5;
    }
    td{
      background: #F0E3EF;
    }
  }
  tr:nth-child(7){
    th{
      background: #E1E3F1;
    }
    td:first-of-type{
      background: #E1E3F1;
    }
    td{
      background: #EBEBF5;
    }
  }
  tr:nth-child(8){
    td:first-of-type{
      background: #E1E3F1;
    }
    td{
      background: #EBEBF5;
    }
  }

  .small{
    font-size: 17px;
  }
}

.table-style07{
  width: 100%;
  margin-top: 15px;
  th,td{
    padding: 10px 15px;
    font-size: 22px;
    font-weight: 300;
    color: var(--black01);
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
    vertical-align: middle;
    line-height: 1.2;
    height: 100px;
  }
  td{
    &:last-child{
      border-right: none;
    }
  }
  tr:nth-child(even){
    th{
      background: #B2E9FA;
    }
    td:first-of-type{
      background: #B2E9FA;
      text-align: left;
    }
    td{
      background: #E6F4FD;
      text-align: center;
    }
  }
  tr:nth-child(odd){
    th{
      background: #E6F4FD;
    }
    td:first-of-type{
      background: #E6F4FD;
      text-align: left;
    }
    td{
      background: #F5FBFE;
      text-align: center;
    }
  }

  tr:first-child{
    th {
      text-align: center;
      background: #4CACE2;
      color: #fff;
      border-right: 1px solid #fff;
      th:last-child{
        border-right: none;

      }
    }
  }

  .small{
    font-size: 17px;
  }
}


.table-style08{
  width: 100%;
  margin-top: 15px;
  th,td{
    padding: 10px 15px;
    font-size: 22px;
    font-weight: 300;
    color: var(--black01);
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
    vertical-align: middle;
    line-height: 1.2;
    height: 100px;
  }
  td{
    text-align: center;
    &:first-of-type{
      text-align: left;
    }
    &:last-child{
      border-right: none;
    }
  }

  tr:first-child{
    th {
      text-align: center;
      background: #9A8EC3;
      color: #fff;
      border-right: 1px solid #fff;
      height: auto;

      &:last-child{
        border-right: none;
        border-bottom: none;
      }
    }
  }

  tr:nth-child(n+2) {
    th:first-child{
      writing-mode: vertical-rl;
      padding: 5px;
    }
  }

  tr:nth-child(2){
    th{
      background: #F4B4D0;
    };
    td:first-of-type{
      background: #F7C9DD;
    }
    td:not(:first-of-type){
      background: #FEF4F8;
    }
  }

  tr:nth-child(3){
    th{
      background: #F4B4D0;
    }
    td:first-of-type{
      background: #FADCE9;
    }
    td:not(:first-of-type){
      background: #FEF4F8;
    }
  }
  tr:nth-child(4){
    td:first-of-type{
      background: #FADCE9;
    }
    td:first-of-type{
      background: #FCEBF3;
    }
    td:not(:first-of-type){
      background: #FEF4F8;
    }
  }

  tr:nth-child(5){
    th{
      background: #E1D2E5;
    }

    td:first-of-type{
      background: #E1D2E5;
    }
    td:not(:first-of-type){
      background: #F0E3EF;
    }
  }
  tr:nth-child(6){
    th{
      background: #E1E3F1;
    }
    td:first-of-type{
      background: #E1E3F1;
    }
    td{
      background: #EBEBF5;
    }
  }

  .small{
    font-size: 17px;
  }
}

.table-style09 {
  width: 100%;
  margin-top: 15px;

  th, td {
    padding: 25px 5px;
    font-size: 15px;
    color: var(--black01);
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
    vertical-align: middle;
    line-height: 1.2;
    font-weight: 400;
    position:relative;
  }
  tr:first-child{
    th{
      background: #A2C0CF;
      border-bottom: 5px solid #fff;
      color: #fff;
      &:first-child{
        border-right: 3px solid #fff;
        min-width: 80px;

      }
      &:not(:first-child){
        border-right: 1px dashed #fff;
      }
    }
  }
  td{
    &:nth-of-type(4), &:nth-of-type(5),
    &:nth-of-type(6), &:nth-of-type(7),
    &:nth-of-type(10), &:nth-of-type(11),
    &:nth-of-type(12), &:nth-of-type(13){
      border-right: 1px dashed #888;
    }
    &:nth-of-type(1){
      writing-mode: vertical-rl;
    }
  }


  tr:nth-child(2){
    th:first-child{
      background: var(--sub03);
      color: #fff;
      border-right: 5px solid #fff;
      border-bottom: 5px solid #fff;

      &::after {
        content: "";
        position: absolute;
        display: block;
        width: 50px;
        aspect-ratio: 132 / 158;
        background: url(../../expenses-asthma/images/img04-02-05.png);
        background-repeat: no-repeat;
        background-size: contain;
        bottom: 0;
        left: 15px;
      }
    }


    td{
      background: #E6F4FD;
      text-align: center;

    }
    td:nth-of-type(1), td:nth-of-type(2){
      background: #B2E9FA
    }
  }
  tr:nth-child(3){
    td{
      background: #F5FBFE;
      text-align: center;
      border-bottom: 5px solid #fff;
    }
    td:nth-of-type(1), td:nth-of-type(2){
      background: #E6F4FD
    }
  }
  tr:nth-child(4){
    th:first-child{
      background: var(--sub05);
      color: #fff;
      border-right: 5px solid #fff;

      &::after {
        content: "";
        position: absolute;
        display: block;
        width: 45px;
        aspect-ratio: 131 / 165;
        background: url(../../expenses-asthma/images/img04-02-06.png);
        background-repeat: no-repeat;
        background-size: contain;
        bottom: 0;
        left: 15px;
      }
    }
    td{
      background: #F0E3EF;
      text-align: center;

    }
    td:nth-of-type(1), td:nth-of-type(2){
      background: #E1D2E5
    }
  }
  tr:nth-child(5){
    td{
      background: #EBEBF5;
      text-align: center;

    }
    td:nth-of-type(1), td:nth-of-type(2){
      background: #E1E3F1
    }
  }
}

.table-style10{
  width: 100%;
  max-width: 970px;
  margin: auto;
  margin-top: 15px;
  table{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .serif{
    font-family: serif;
  }
  th,td{
    padding: 10px 15px;
    font-size: 22px;
    font-weight: 300;
    color: var(--black01);
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
    vertical-align: middle;
    line-height: 1.2;
  }
  th{
    background: #D9D4E2;
    position: relative;
  }
  td{
    text-align: center;
    &:first-of-type{
      text-align: left;
    }
    &:last-child{
      border-right: none;
    }
  }
  tr:first-child{
    th{
      border-top: 2px solid #888;
    }
    th:last-child{
      border-right: none;
    }

    th:nth-child(2):before{
      content: "(";
      position: absolute;
      display: block;
      font-size: 2.0em;
      left: 10%;
      bottom:30%;
    }
    th:nth-child(2):after{
      content: ")";
      position: absolute;
      display: block;
      font-size: 2.0em;
      right: 10%;
      bottom:30%;
    }

  }
  tr:nth-child(2),tr:nth-child(3),
  tr:nth-child(4){
    th:last-child{
      border-right: none;
    }
  }
  tr:nth-child(3){
    th:nth-child(2){
      border-right: none;
    }
  }
  tr:nth-child(4){
    th:last-child{
      position: relative;
      /*border-left: 1px solid #888;*/
      &:before{
        content: "";
        position: absolute;
        display: block;
        width: 1px;
        height: 100%;
        background: #888;
        left:0;
        top:0;
      }
    }
  }
  tr:nth-child(5), tr:nth-child(6),
  tr:nth-child(7), tr:nth-child(8),
  tr:nth-child(9), tr:nth-child(10) {
    th:first-child{
      background: #EBF5EC;
    }
  }
  tr:nth-child(5){
    td{
      text-align: center;
    }
  }

  tr:nth-child(6){
    td:last-of-type{
      border-left: 1px solid #888;
    }
  }
  tr:nth-child(11){
    td{
      text-align: center;
    }
  }



  .supplement-block01{
    margin-top: 20px;
  }
  .small{
    font-size: 17px;
  }
}

.medicine-cost-area{
  margin-top: 30px;
  width: 50%;
  min-width: 300px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  .title{
    font-size: 20px;
    font-weight: 500;
    color: var(--black01);
  }

  .table-style{
    width: 100%;
    th, td{
      padding: 5px 10px;
      font-size: 18px;
      font-weight: 300;
      color: var(--black01);
      border-bottom: 1px solid #888;
      vertical-align: middle;
    }
    tr:first-child{
      th {
        border-top: 1px solid #888;
        border-right: 1px solid #888;
        background: #E6F4FD;
      }
      td{
        border-top: 1px solid #888;
      }

    }
    tr:last-child{
      th {
        border-right: 1px solid #888;
        background: #E6F4FD;
      }
      td{
      }
    }
  }

  .sub-text-right{
    font-size: 15px;
    margin-top: 0;
  }
}


ruby rt{
  line-height: 1;
}

.bold{
  font-weight: 500;
}

.reason-area{
  display: flex;
  flex-direction: column;
  gap: 10px;
  li{
    font-size: 18px;
    font-weight: 400;
    color: var(--black01);
  }
}

.experiment-area{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;

  dl {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    dt {
      white-space: nowrap;
      font-size: 14px;
      font-weight: 500;
      width: 6em;
      color: var(--black01);
      text-align:justify;
      text-align-last:justify;
    }

    dd {
      width: calc(100% - 8em);
      font-size: 14px;
      font-weight: 300;
      color: var(--black01);
      position: relative;

      &:before{
        content: "：";
        position: absolute;
        display: block;
        width: 1em;
        height: auto;
        top: 0;
        left: -1em;
        font-size: 14px;
        color: var(--black01);
      }
    }
  }
}

/* -------------------------------------------------------

terms-of-us

------------------------------------------------------- */
.mt50{
  margin-top: 50px;
}
.mb1m{
  margin-bottom: 1em;
}
.mb3m{
  margin-bottom: 3em;
}

.txt_03{
  font-size: 18px;
  font-weight: 400;
  color: var(--black01);
}

.sec01{
  h2{
    font-size: 24px;
    font-weight: 500;
    color: var(--black01);
    position: relative;
    padding-left: 1em;
    color:var(--main01);
    &:before{
      content: "";
      position: absolute;
      display: block;
      width: 10px;
      height: 100%;
      background: #E6F4FD;
      top: 0;
      left: 0;
      background: var(--main02);
      border-radius: 3px;
    }
  }
}



/* -------------------------------------------------------

confirm

------------------------------------------------------- */
#confirm-screen{
  position:fixed;
  background: rgba(0,0,0, 0.6);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;

  .wrapper{
    width: 100%;
    max-width: 1000px;
    background: #fff;
    padding: 50px;
    text-align: center;

    .title{
      font-size: 24px;
      font-weight: 500;
      color: var(--black01);
      margin-bottom: 50px;

    }
    .button-area{
      display: flex;
      justify-content: center;
      gap: 40px;
      a{
        display: flex;
        justify-content: center;
        align-items: center;
        background: #182268;
        padding: 20px;
        max-width: 380px;
        width: 50%;
        border-radius: 50px;
        color: #fff;
        font-size: 28px;
        font-weight: 500;
        position:relative;
        &:first-child:before{
          content: "";
          position: relative;
          display: block;
          width: 1.2em;
          aspect-ratio: 1/1;
          background: url(../images/yes-icon.png);
          background-repeat: no-repeat;
          background-size: contain;
          top: 0.0em;
          left: -0.5em;
        }

        &:last-child{
          background: #696969;
        }
        &:last-child:before{
          content: "";
          position: relative;
          display: block;
          width: 1.2em;
          aspect-ratio: 1/1;
          background: url(../images/no-icon.png);
          background-repeat: no-repeat;
          background-size: contain;
          top: 0.0em;
          left: -0.5em;
        }

        &:after{
          content: "→";
          position: relative;
          display: inline-block;
          left: 1em;
        }
      }
    }
    .attention{
      font-size: 18px;
      font-weight: 400;
      color: var(--black01);
      margin-top: 50px;
    }
  }
}




/* -------------------------------------------------------

sp

------------------------------------------------------- */

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

  header {
    box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    margin-bottom: 0;

    .wrapper {
      padding: 10px 20px;
      gap: 30px;

      .logo-area {
        a:nth-child(2) {
          margin-left: 15px;
        }
      }
    }

    .hamburger-area {
      padding-bottom: 5px;
      position: relative;

      p {
        position: absolute;
        font-size: 10px;
        text-align: center;
        font-family: var(--main01);
        font-weight: 500;
        letter-spacing: -0.08em;
        width: 4em;
        left: -0.5em;
        bottom: -1em;
      }
    }
  }

  main {
    margin-top: 68px;
    padding-bottom: 50px;
  }

  nav {
    position: fixed;
    margin-top: 68px;
    top: -100%;
    left: 0;
    transition: all 0.4s ease;

    .global-navi {
      flex-wrap: wrap;
      padding-top: 15px;
      padding-bottom: 20px;
      justify-content: flex-start;

      > li:first-child {
        border-left: 1px solid #babdd2;
        width: 100%;
        min-width: auto;
      }

      li {
        width: 100%;
        border-right: none;
        min-height: auto;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        padding-right: 30px;
        border-bottom: 1px dotted #babdd2;

        a:first-child {
          padding: 0;
          min-height: auto;
          justify-content: flex-start;
          text-align: left;
          font-size: 16px;
        }

        &.active::before {
          display: none;
        }
      }

      li:first-child {
        border-left: none;
      }

      li:has(a:hover)::before {
        transform: scale(0, 1);
      }
    }
  }



  .global-navi li:hover .submenu-wrap {
    display: none;
  }


  body:has(#menu-toggle:checked) {
    overflow: hidden;
  }

  header:has(#menu-toggle:checked) {
    position: fixed;
    top: 0;
  }

  body:has(#menu-toggle:checked) nav {
    top: 0;
    left: 0;

    .global-navi {
      flex-wrap: wrap;
      padding-top: 15px;
      padding-bottom: 20px;
      justify-content: flex-start;

      .menu-title {
        display: flex;

        .menu-arrow-area {
          display: block;
          width: 1em;
          height: 1.5em;
          padding: 5px;
          position: absolute;
          top: 0.9em;
          right: 0;


          .menu-arrow {
            position: relative;
            display: block;
            width: 1em;
            height: 1em;
            clip-path: polygon(0 7%, 7% 0, 57% 50%, 7% 100%, 0 93%, 43% 50%, 0 7%);
            aspect-ratio: 1;
            background-color: #333;
            transform: rotate(90deg);
            z-index: 10;
          }
        }
      }



      .submenu-wrap.active {
        display: block;
        position: relative;
        width: 100%;
        top: 10px !important;
        box-shadow: none;
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 0;
        border: none;

        .sub-menu {
          display: block;
          border: none;
          width: 100%;

          li {
            padding-top: 10px;
            padding-bottom: 10px;
            position: relative;
          }

          li:last-child {
            border-bottom: none;
          }

          li:first-child {
            border-top: 1px dotted #babdd2;
          }


          li:before {
            content: "-";
            display: block;
            position: absolute;
            font-size: 1em;
            top: 0.6em;
            left: -1em;
            width: 1em;
            height: 1em;
          }
        }
      }

      li:has(.submenu-wrap.active) .menu-arrow {
        transform: translateY(-40%) rotate(270deg);
      }

    }
  }

  .wrapper-main {
    padding: 0 20px;
  }

  .main-visual-area {
    .wrapper-main {
      background: url(../images/mv-sp.png);
      background-repeat: no-repeat;
      background-size: auto 100%;
      background-position: 50% 0;
      height: auto;
      aspect-ratio: 753/385;
      font-size: max(17px, 4.5vw);
      padding-top: 20px;
    }
  }

  .menu-area01 {
    flex-wrap: wrap;
    gap: 0;
    padding-bottom: 30px;
    background-image: linear-gradient(to right, #888 2px, transparent 4px);
    background-size: 12px 4px;
    background-repeat: repeat-x;
    background-position: bottom;

    .menu-part {
      width: 100%;

      h2 {
        height: auto;
        border-radius: 10px;
        margin-top: 30px;
        padding: 50px 40px;
        color: #fff;
        font-size: 26px;
      }

      h2:hover {
        opacity: 1.0;
      }

    }

    .menu-part:last-child h2 {
      margin-top: 0;
    }

    .menu-part:first-child h2::before {
      content: "";
      display: block;
      position: absolute;
      background: url(../images/top-img01.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 0% 150%;
      right: 0;
      bottom: 0;
      width: 175px;
      height: 190px;
    }

    .menu-part:nth-child(2) h2::before {
      content: "";
      display: block;
      position: absolute;
      background: url(../images/top-img02.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 80%;
      right: 0;
      bottom: 0;
      width: 178px;
      height: 190px;
    }
  }


  .menu-area02 {
    position: relative;
    margin-top: 30px;
    width: 100%;

    .menu-part {
      width: 100%;
      flex-wrap: wrap;
      gap: 0;

      a {
        width: 100%;
      }

      h2 {
        border-radius: 10px;
        width: 100%;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        padding: 50px 40px;
        font-size: 24px;
      }

      h2:hover {
        opacity: 1.0;
      }

      .lead {
        font-size: 18px;
        padding: 20px;
        width: 100%;
      }
    }

    .menu-part:first-child h2::before {
      content: "";
      display: block;
      position: absolute;
      background: url(../images/top-chara01.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 0% 100%;
      right: 5px;
      bottom: 0;
      width: 125px;
      height: 140px;
    }

    .menu-part:nth-of-type(2) h2::before {
      content: "";
      display: block;
      position: absolute;
      background: url(../images/top-chara02.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 0% 100%;
      right: 5px;
      bottom: 0;
      width: 100px;
      height: 150px;
    }
  }

  .about-disease {
    padding: 20px;
    font-size: 15px;
    border: 1px solid #a6a6a6;
    margin-top: 0;
    margin-bottom: 30px;
  }


  /* 汎用マウスオーバー */
  .mouse-over-main:hover {
    opacity: 1.0;
  }

  /* ページ先頭へボタン */
  .to-page-top {
    padding: 12px 35px 12px 20px;
    border-radius: 8px 8px 0 0;
    font-family: var(--main01);
    color: var(--primary02);
    background: #fff;
    right: 15px;
    bottom: 0;
  }


  /* -------------------------------------------------------

 前移動、次移動

 ------------------------------------------------------- */

  .prev-next-area{
    .wrapper-main{
      flex-wrap: wrap;
      gap: 10px;
    }

    a{
      width: 100%;
      &:first-child{
        order: 2;
      }
      &:last-child{
        order: 1;
      }
    }
  }


  /* -------------------------------------------------------

 フッタ

 ------------------------------------------------------- */
  footer {

    padding-bottom: 60px;

    .upper-area {
      flex-wrap: wrap;
      gap: 30px;
      margin-bottom: 30px;

      .each-link {
        width: 100%;
        gap: 10px;
        border-left: none;
        padding-left: 0;
        padding-bottom: 10px;

        li {
          width: 100%;
        }
      }
    }

    .lower-area {
      align-items: flex-end;
      flex-wrap: wrap;
      gap: 20px;
      width: 100%;

      div:first-child {
        order: 1;
      }

      div:nth-child(2) {
        order: 0;
      }
    }
  }


  /* -------------------------------------------------------

   下層ページ

   ------------------------------------------------------- */
  .second-visual-area {
    position: relative;

    .wrapper-main {
      max-width: 100%;
      padding: 0;
      padding-top: 20px;
      height: 165px;
      align-items: flex-start;

      h1 {
        font-size: 24px;
        text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
        text-align: center;
      }
    }

    &.bg-icon01::before {
      width: 150px;
    }
    &.bg-icon02::before {
      width: 150px;
    }
    &.bg-icon03::before {
      width: 150px;
    }
    &.bg-icon04::before {
      width: 150px;
    }
  }

  .main-second {
    padding-top: 20px;
  }

  .flex-column01 {
    gap: 20px;
  }

  .title-main01 {
    position: relative;
    padding: 20px 0;
    font-size: 24px;

    .small {
      font-size: 20px;
    }

    .supplement {
      font-size: 13px;
    }

    &.title-icon01:after {
      width: 100px;
    }

    &.title-icon02:after {
      width: 120px;
    }
    &.title-icon03:after {
      width: 100px;
    }
    &.title-icon04:after {
      width: 100px;
    }
    &.title-icon06:after {
      width: 100px;
    }
    &.title-icon07:after {
      width: 70px;
    }
  }

  .title-main02 {
    position: relative;
    padding: 10px 0 0 0;
    font-size: 24px;
    .number{
      width: 40px;
    }
    sup{
      margin-top: -5px;
    }
  }


  .common-block01 {
    gap: 10px;

    h3 {
      position: relative;
      font-size: 18px;
    }

    p {
      font-size: 16px;
    }
  }

  .common-block03{
    gap: 20px;
    .head-block01{
      font-size: 17px;
    }

    .head-block02{
      font-size: 18px;
    }

    p{
      font-size: 15px;
    }
    .head-block03 {
      font-size: 17px;
      &.pt-adjust:before {
        top: 0.5em;
      }
      &.pt-adjust:nth-child(2):before{
        top: 0.2em;
      }
      &.sp-head-adjust:before{
        top: 0.2em;
      }

    }
    &.split-block01 {
      flex-direction: column;
      gap: 20px;
      p{
        width: 100%;
      }
      .img-area {
        width: 40%;
      }
    }

    .main-text {
      font-size: 17px;
    }

    .head-block04 {
      font-size: 17px;
    }

    .head-block05 {
      font-size: 17px;
    }

    .head-block06{
      font-size: 17px;
    }
  }

  .cite-block {
    font-size: 12px;
  }

  .border-area01 {
    border-radius: 15px;
    padding: 40px 20px 20px 20px;
    max-width: 100%;
    margin: auto;
    margin-top: 30px;
    gap: 20px;

    h3 {
      padding: 10px;
      min-width: auto;
      width: 90%;
      font-size: 20px;
    }

    &.p-adjust {
      padding: 30px 15px;
    }

    .head-triangle {
      font-size: 17px;
      padding-left: 1.1em;
    }

    &.border-area02{
      width: 100%;
      padding: 20px;
      .symptom-list{
        li{
          font-size: 18px;
          width: 100%;
        }
      }
      .img-area{
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        img{
          width: auto;
          height: 150px;
        }
      }
    }

    &.border-area03{
      width: 100%;
      padding: 20px;
      .treatment-list{
        li{
          font-size: 18px;
          width: 100%;
        }
      }
      .img-area{
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img{
          width: auto;
          height: 150px;
        }
      }
    }
  }

  .border-area04{
    padding: 20px;
  }

  .border-area05{
    padding: 20px;
  }
  .border-area06 {
    padding: 20px;
    h4 {
      font-size: 18px;
    }
    .main-text {
      font-size: 16px;
    }
  }

  .img-area01, .img-area05 {
    width: 100%;
    margin: auto;
  }

  .img-area02 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;

    img {
      width: 50%;
    }
  }

  .img-area03 {
    width: 18%;
    min-width: 175px;
  }

  .img-area06 {
    width: 40%;
  }

  .common-block02 {

    gap: 20px;

    .check-text {
      font-size: 18px;
    }

    .list01 {
      font-size: 17px;
    }
  }


  .common-text01{
    font-size: 17px;
  }

  .mt-adjust01{
    margin-top: 30px;
  }

  .split-block01{
    flex-direction: column;
    align-items: center;
    gap: 20px;

    .main-text{
      width: 100%;
    }
    .img-area {
      width: 50%;
    }
  }

  .dr-comment-area01 {
    margin: auto;
    margin-top: 30px;
    gap: 30px;
    flex-direction: column;

    .serif-area {
      width: 100%;
      padding: 30px 20px;
      border: 3px solid var(--primary07);
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      gap: 20px;

      p {
        font-size: 17px;
      }

      .img-area {
        width: 40%;
        margin-right: auto;
        margin-left: auto;
      }

      &:before {
        content: "";
        position: absolute;
        top: 100%;
        right: 50%;
        width: 40px;
        height: 40px;
        background: var(--primary07);
        clip-path: polygon(0 0, 50% 100%, 100% 0);
        transform: translateX(50%);
      }

      &:after {
        content: "";
        position: absolute;
        top: calc(100% - 1px);
        right: calc(50% + 2px);;
        width: 36px;
        height: 34px;
        background: #fff;
        clip-path: polygon(0 0, 50% 100%, 100% 0);
        transform: translateX(calc(50% + 2px));
      }
    }

    > .img-area {
      width: 50%;
    }
  }

  .dr-comment-area02{
    padding: 20px 15px;
    border-radius: 15px;
    flex-direction: column;
    align-items: center;
    p{
      font-size: 17px;
    }
    .img-area{
      width: 40%;
      position:relative;
      right: auto;
    }
  }

  .dr-comment-area03 {
    p {
      padding: 20px;
      font-size: 15px;
      &:after {
        bottom: -30px;
        left: 50%;
        width: 30px;
        height: 30px;
      }
    }
    .img-area {
      margin-top: 30px;
      width: 100%;
    }
  }

  .administration-area {
    padding-left: 0;
    img:first-child{
      width: 30px;
    }
    img:nth-child(2){
      width: 90px;
    }
    p{
      font-size: 18px;
    }
  }

  .supplement-block01{
    dl{
      font-size: 13px;
    }
  }
  .supplement-block02{
    dl{
      font-size: 12px;
    }
  }
  .supplement-block03 {
    & ul {
      li {
        font-size: 12px;
        & li {
          &:first-child {
            font-size: 14px;
          }
        }
      }
    }
    > ul li:first-child{
      font-size: 14px;
    }

    dl{
      dt, dd{
        font-size: 12px;
      }
    }
  }

  .response-area{
    padding-left: 20px;
    gap: 20px;
    justify-content: space-between;
    .part{
      width: 42%;
      font-size: 16px;
      .img-area{
        margin-bottom: 10px;
      }
    }
  }

  .table-style01{
    padding-left: 20px;

    th,td{
      width: 20%;
      font-size: 16px;
    }
    th:first-child{
      background: #DDF1FC;
      border-left: 1px solid #B9B9B9;
    }
    td{
      background: #EFF8FE;
    }
    tr:first-child{
      th{
        background: #BBDCF4;
        border-top: 1px solid #B9B9B9;
      }
    }

    &.color-purple{

      th:first-child{
        background: #E2E4F2;
      }
      td{
        background: #F2F4FA;
      }
      tr:first-child{
        th{
          background: #D2D5EC;
        }
      }
    }
  }

  .table-style02{

    .scroll-area{
      padding-bottom: 10px;
    }

    h4{
      font-size: 16px;
      font-weight: 400;
      color: var(--black01);
    }

    table{
      width: 700px;
      font-size: 15px;
    }
  }

  .table-style09{
    width: 1000px;
    margin-bottom: 10px;
    th,td{
      font-size: 14px;
    }
  }
  .table-style10{
    width: 100%;
    table {
      width: 800px;
      margin-bottom: 10px;

      th, td {
        font-size: 16px;
      }
    }
    & tr:first-child {
      th:nth-child(2):before {
        content: "(";
        position: absolute;
        display: block;
        font-size: 2.0em;
        left: 5%;
        bottom: 30%;
      }
      th:nth-child(2):after {
        content: ")";
        position: absolute;
        display: block;
        font-size: 2.0em;
        right: 5%;
        bottom: 30%;
      }
    }
  }



  .caution-area{
    padding: 20px 15px;
    border-radius: 15px;
    &.flex{
      display: flex;
      align-items: center;
      gap: 10px;
      flex-direction: column;
      .img-area{
        width: 20%;
      }
    }
    p{
      font-size: 17px;
    }
  }

  .qa-area{
    gap: 50px;
    padding: 40px 15px;
    border-radius: 20px;

    .block-part{
      gap: 20px;
      display: flex;
      flex-direction: column;
      div{
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        flex-direction: column;

        &:first-child{
          .img-area{
            width: 50%;
          }
          .question-text {
            font-size: 17px;
          }
        }

        &:last-child{
          gap: 40px;
          .img-area{
            width: 50%;
          }
          .dr-serif{
            font-size: 15px;

            &:after{
              content: "";
              position: absolute;
              top: 100%;
              right: 50%;
              width: 40px;
              height: 40px;
              background: #EAF6FD;
              clip-path: polygon(0 0, 50% 80%, 100% 0%);
              transform: translate(50%, 0);
            }

          }

        }
      }

    }
  }

  .structure-area{
    gap: 20px;

    h3{
      font-size: 20px;
    }

    .img-area{
      width: 100%;
    }
  }

  .main-text01{
    font-size: 17px;
    &.indent{
      padding-left: 0;
    }
  }


  .target-area{
    max-width: 100%;
    margin-top: 30px;

    .block-part {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;

      p {
        font-size: 18px;
      }

      .img-area{
        width: 40%;
        margin: auto;
      }

      &:nth-child(2){

        .img-area{
          width: 58%;
        }

      }
      &:nth-child(3){

        .img-area{
          width: 41%;
        }

      }
    }
  }

  .injection-body-area{
    max-width: 100%;
    flex-direction: column;
    gap: 20px;
    ul {
      width: 100%;
      padding-left: 2em;
      li {
        font-size: 17px;
        padding-left: 1.1em;
      }
    }
    .img-area {
      width: 100%;
    }
  }

  .scroll-area{
    width: 100%;
    overflow-x: scroll;

    .img-area05{
      width: 700px;
      padding-bottom: 20px;
    }
  }


  .matrix01{
    li{
      font-size: 18px;
    }
  }

  .block-title01 {
    font-size: 18px;
  }

  .block-title02 {
    font-size: 18px;
  }
  .block-title03 {
    font-size: 20px;
  }

  .block-title05{
    font-size: 20px;
    padding-right: 0;
    .small{
      font-size: 14px;
    }
  }

  .scroll-area02{
    width: 100%;
    overflow-x: scroll;
    .target-age{
      width: 650px;
      font-size: 18px;
      &::after {
        width: 30px;
        aspect-ratio: 132 / 158;
      }
      &.color-purple {
        &::after{
          width: 30px;
        }
      }
    }
    table{
      width: 650px;
      margin-bottom: 20px;
      th,td{
        font-size: 16px;
      }
    }
  }
  .sub-text-right {
    font-size: 13px;
    margin-top: 0;
  }

  .medicine-cost-area {
    width: 100%;
    min-width: auto;
    max-width: 100%;

    .title {
      font-size: 17px;
    }

    .table-style {
      width: 100%;

      th, td {
        font-size: 16px;
      }
    }
  }

  .supplement-block01 {
    & ul {
      li {
        font-size: 13px;
      }
    }
  }

  .scroll-area02 {
    .mt-adjust {
      margin-top: 10px;
    }
  }

  .reason-area {
    li {
      font-size: 16px;
    }
  }

  .experiment-area{
    width: 100%;

    dl {
      dt {
        font-size: 13px;
      }

      dd {
        font-size: 13px;
      }
    }
  }


  /* -------------------------------------------------------

terms-of-us

------------------------------------------------------- */

  .txt_03{
    font-size: 15px;
  }

  .sec01{
    h2{
      font-size: 18px;
    }
  }


  /* -------------------------------------------------------

confirm

------------------------------------------------------- */
  #confirm-screen{
    .wrapper{
      width: 100%;
      padding: 30px;

      .title{
        font-size: 18px;
        margin-bottom: 30px;

      }
      .button-area{
        gap: 20px;
        flex-direction: column;
        a{
          padding: 10px 15px;
          max-width: 100%;
          width: 100%;
          font-size: 20px;
        }
      }
      .attention{
        font-size: 16px;
        margin-top: 30px;
      }
    }
  }


  .sp-only {
    display: block !important;
  }
  .pc-only {
    display: none !important;
  }
}


.hidden{
  display: none!important;
}
.disabled{
  opacity: 0.3;
  pointer-events: none;
}