@charset "UTF-8";
#kv {
  padding-bottom: 15%;
}
#kv:before {
  content: "";
  position: absolute;
  height: 80%;
  bottom: 0;
  width: 100%;
  background: linear-gradient(to right, var(--blue) 0%, var(--green) 100%);
}
#kv .inner {
  position: relative;
  width: 94%;
}
#kv .inner .kv_bg {
  border-radius: 0 0 3em 3em;
  overflow: hidden;
}
#kv .inner .title {
  position: absolute;
  top: 5vw;
  left: 50%;
  transform: translateX(-50%);
  width: 86%;
}
@keyframes flash {
  0% {
    left: -50%;
  }
  50% {
    left: 150%;
  }
  100% {
    left: 150%;
  }
}
#kv .inner .title .img {
  animation: float 2s alternate infinite ease-in-out;
}
#kv .inner .title .img .flash {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: soft-light;
  -webkit-mask: url("../img/product/cancer/kv/title.svg") no-repeat left top/contain;
          mask: url("../img/product/cancer/kv/title.svg") no-repeat left top/contain;
}
#kv .inner .title .img .flash._85 {
  -webkit-mask: url("../img/product/elderly_accident/kv/title.svg") no-repeat left top/contain;
          mask: url("../img/product/elderly_accident/kv/title.svg") no-repeat left top/contain;
}
#kv .inner .title .img .flash::after {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 20%;
  height: 100%;
  background-color: #fff;
  transform: skew(15deg);
  animation: flash 3s infinite ease-out;
}
#kv .inner .title h1 {
  position: absolute;
  top: 50%;
  left: 5%;
  z-index: -1;
  color: var(--blue);
}
@keyframes float {
  0% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(2%);
  }
}
#kv .inner .feature {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 1em);
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  margin: 0 auto;
  width: 90%;
  padding: 4vw;
  border-radius: 1em;
  background-color: #fff;
}
#kv .inner .feature._85 {
  transform: translate(-50%, 2.5em);
}
#kv .inner .feature li {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 0.875em;
  font-size: 3.6vw;
}
#kv .inner .feature li .icon ._mb {
  width: 1.5em;
  margin: 1vw 0.5vw 0 0;
}
#kv .inner .feature li .content {
  color: var(--blue_dark);
}
#kv .inner .feature li .content h2 {
  font-weight: 500;
}
#kv .inner .feature li .content strong {
  padding: 0 0.1em;
  font-weight: 700;
  font-size: 1.5em;
  color: var(--red_word);
}
#kv .inner .feature li .content .remark {
  margin-top: 0.35em;
  font-size: 0.8em;
}
#kv .inner .feature li .content .remark dl {
  position: relative;
}
#kv .inner .feature li .content .remark dl dt {
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
}
#kv .inner .feature li .content .remark dl dt:hover ~ dd {
  display: block;
}
#kv .inner .feature li .content .remark dl dd {
  display: none;
  position: absolute;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  width: -moz-max-content;
  width: max-content;
  max-width: 20em;
  line-height: 1.5;
  font-size: 1.1em;
  padding: 2em 1.5em;
  bottom: 150%;
  right: -1em;
}
#kv .inner .feature li .content._inline {
  display: flex;
  align-items: flex-end;
}
@media all and (min-width: 1024px) {
  #kv .inner {
    width: 88%;
  }
  #kv .inner .kv_bg {
    margin-top: -5%;
    aspect-ratio: 1/1.3;
  }
  #kv .inner .title {
    top: 8%;
    width: 80%;
  }
  #kv .inner .feature {
    background-color: unset;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1em;
    padding: 0;
    transform: translate(-50%, 2em);
  }
  #kv .inner .feature._85 {
    transform: translate(-50%, 2em);
  }
  #kv .inner .feature li {
    align-items: center;
    gap: 5%;
    width: calc((100% - 1em) / 2);
    font-size: 1em;
    position: relative;
    background-color: #fff;
    padding: 1em;
    border-radius: 0.85em;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
  }
  #kv .inner .feature li ._mb {
    display: none;
  }
  #kv .inner .feature li ._pc {
    display: block;
  }
  #kv .inner .feature li .icon {
    width: 25%;
  }
  #kv .inner .feature li .content {
    line-height: 1.1;
  }
  #kv .inner .feature li .content .remark {
    font-size: 0.65em;
  }
  #kv .inner .feature li .content._inline {
    display: block;
  }
}
@media all and (min-width: 1200px) {
  #kv {
    padding-bottom: 7%;
  }
  #kv .inner {
    width: 94%;
    max-width: none;
  }
  #kv .inner .kv_bg {
    margin-top: 0;
    aspect-ratio: unset;
  }
  #kv .inner .title {
    width: 38%;
    top: 45%;
    left: 25%;
    transform: translate(-50%, -50%);
  }
  #kv .inner .feature {
    width: 96%;
    flex-wrap: nowrap;
    justify-content: center;
    transform: translate(-50%, 1.5em);
  }
  #kv .inner .feature._85 {
    transform: translate(-50%, 1.5em);
  }
  #kv .inner .feature li {
    width: -moz-max-content;
    width: max-content;
  }
}

.heighlight {
  background-color: #FFCF61;
  margin: 0 0.1em;
}

.blue_bg {
  background-color: #05588F;
  background: radial-gradient(circle farthest-side at 50% 100vw, #25A4DB, #05588F);
}
@media all and (min-width: 1200px) {
  .blue_bg {
    background: radial-gradient(circle farthest-side at 50% 20em, #25A4DB, #05588F);
  }
}

.ice_mountain ~ .case {
  padding: 0;
  margin-top: -10%;
}
.ice_mountain .inner .content {
  position: relative;
}
.ice_mountain .inner .content .ice {
  margin: 0 auto;
  width: 75%;
}
.ice_mountain .inner .content > dl {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 4vw;
}
.ice_mountain .inner .content > dl dd {
  position: absolute;
  padding: 0.35em 1em;
  border-radius: 99em;
}
.ice_mountain ._up {
  position: relative;
  padding-top: 10%;
  background: linear-gradient(to bottom, #B9E9FF 0%, #D9F3FF 100%);
}
.ice_mountain ._up:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 240vw;
  aspect-ratio: 20/1;
  background: url("../img/product/cancer/in/ice_back.svg") no-repeat center bottom/cover;
}
.ice_mountain ._up .cloud {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.ice_mountain ._up .cloud:before {
  content: "";
  position: absolute;
  width: 20%;
  aspect-ratio: 3/1;
  left: -5%;
  top: 20%;
  background: url("../img/product/cancer/in/cloud_1.svg") no-repeat center center/contain;
}
.ice_mountain ._up .cloud:after {
  content: "";
  position: absolute;
  width: 20%;
  aspect-ratio: 3/1;
  right: -10%;
  top: 10%;
  background: url("../img/product/cancer/in/cloud_2.svg") no-repeat center center/contain;
}
@media all and (min-width: 1200px) {
  .ice_mountain ._up .cloud:before {
    width: 10em;
    top: 45%;
    left: 3%;
  }
  .ice_mountain ._up .cloud:after {
    width: 8em;
    top: 30%;
    right: 5%;
  }
}
.ice_mountain ._up dl dt {
  position: absolute;
  z-index: 1;
  font-weight: 500;
  font-size: 1.05em;
  width: 9.6em;
  padding: 0.7em 0.5em;
  background-color: #fff;
  border-radius: 0.75em;
  left: 53%;
  top: -15%;
  line-height: 1.2;
}
.ice_mountain ._up dl dt:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 6vw;
  aspect-ratio: 1/1;
  border-radius: 99em;
  background-color: #FFF;
  bottom: -10%;
  left: 30%;
}
.ice_mountain ._up dl dt h3:after, .ice_mountain ._up dl dt h3:before {
  content: "";
  position: absolute;
  width: 2.5vw;
  aspect-ratio: 1/1;
  border-radius: 99em;
  background-color: #fff;
  bottom: -25%;
  left: 27%;
}
.ice_mountain ._up dl dt h3:after {
  width: 1.5vw;
  left: 20%;
  bottom: -30%;
}
.ice_mountain ._up dl dd {
  background: linear-gradient(130deg, #0093C1 65%, #1771A3 65%);
  color: #fff;
}
.ice_mountain ._up dl dd:before, .ice_mountain ._up dl dd:after {
  content: "";
  position: absolute;
  height: 1px;
  background-color: var(--blue);
  width: 20%;
  left: 110%;
  top: 50%;
}
.ice_mountain ._up dl dd:nth-child(2) {
  left: 75%;
  bottom: 30%;
}
.ice_mountain ._up dl dd:nth-child(2):before {
  width: 20%;
  left: -30%;
}
.ice_mountain ._up dl dd:nth-child(2):after {
  transform-origin: left;
  width: 25%;
  left: -30%;
  rotate: -230deg;
}
.ice_mountain ._up dl dd:nth-child(3) {
  left: 5%;
  top: -5%;
}
.ice_mountain ._up dl dd:nth-child(3):before {
  width: 20%;
}
.ice_mountain ._up dl dd:nth-child(3):after {
  transform-origin: left;
  width: 50%;
  left: 130%;
  rotate: 50deg;
}
.ice_mountain ._up dl dd:nth-child(4) {
  left: 0%;
  top: 30%;
}
.ice_mountain ._up dl dd:nth-child(4):before {
  width: 20%;
}
.ice_mountain ._up dl dd:nth-child(4):after {
  transform-origin: left;
  width: 25%;
  left: 130%;
  rotate: 50deg;
}
.ice_mountain ._down .ice {
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 85%);
          mask-image: linear-gradient(to bottom, #000 30%, transparent 85%);
}
.ice_mountain ._down .ice:after {
  content: "";
  position: absolute;
  width: 140%;
  aspect-ratio: 510/359;
  top: 0;
  right: -5%;
  background: url("../img/product/cancer/in/shine.svg") no-repeat top center/contain;
}
.ice_mountain ._down dl dd {
  width: -moz-max-content;
  width: max-content;
  background-color: #fff;
  color: var(--blue);
}
.ice_mountain ._down dl dd:after {
  position: absolute;
  font-size: 0.7em;
  font-family: Arial, sans-serif;
  font-weight: 500;
  top: 0;
  left: 0;
  transform: translate(10%, -60%);
  content: "!";
  text-align: center;
  align-content: center;
  width: 1.5em;
  aspect-ratio: 1/1;
  border-radius: 99em;
  background-color: var(--red_word);
  color: #fff;
}
.ice_mountain ._down dl dd:nth-child(1) {
  left: 2%;
  top: 10%;
}
.ice_mountain ._down dl dd:nth-child(2) {
  left: 55%;
  top: 20%;
}
.ice_mountain ._down dl dd:nth-child(3) {
  left: 10%;
  top: 40%;
}
@media all and (min-width: 1024px) {
  .ice_mountain .inner .content {
    margin: 0 auto;
    width: 35em;
  }
  .ice_mountain .inner .content dl {
    font-size: 1.5em;
  }
  .ice_mountain ._up:before {
    width: 100%;
    min-width: 100em;
  }
  .ice_mountain ._up .inner .content {
    margin-top: 6em;
  }
}
@media all and (min-width: 1200px) {
  .ice_mountain ~ .case {
    margin-top: -1em;
  }
  .ice_mountain .inner .content {
    width: 30em;
  }
  .ice_mountain ._up {
    padding-top: 5em;
  }
  .ice_mountain ._up .inner .content dl dt {
    left: -25%;
    top: -28%;
  }
  .ice_mountain ._up .inner .content dl dt:after {
    width: 1.5em;
    bottom: -15%;
    left: 70%;
  }
  .ice_mountain ._up .inner .content dl dt h3:after, .ice_mountain ._up .inner .content dl dt h3:before {
    width: 0.75em;
    bottom: -32%;
    left: 82%;
  }
  .ice_mountain ._up .inner .content dl dt h3:after {
    width: 0.45em;
    bottom: -36%;
    left: 92%;
  }
  .ice_mountain ._up .inner .content dl dd {
    width: -moz-max-content;
    width: max-content;
  }
  .ice_mountain ._up .inner .content dl dd:before, .ice_mountain ._up .inner .content dl dd:after {
    width: 20%;
    left: 110%;
    top: 50%;
  }
  .ice_mountain ._up .inner .content dl dd:nth-child(2) {
    left: -15%;
    bottom: 27%;
  }
  .ice_mountain ._up .inner .content dl dd:nth-child(2):before {
    width: 20%;
  }
  .ice_mountain ._up .inner .content dl dd:nth-child(2):after {
    transform-origin: left;
    width: 30%;
    left: 130%;
    rotate: 60deg;
  }
  .ice_mountain ._up .inner .content dl dd:nth-child(3) {
    left: 78%;
    top: -15%;
  }
  .ice_mountain ._up .inner .content dl dd:nth-child(3):before {
    width: 30%;
    left: -40%;
  }
  .ice_mountain ._up .inner .content dl dd:nth-child(3):after {
    transform-origin: left;
    width: 60%;
    left: -40%;
    rotate: 120deg;
  }
  .ice_mountain ._up .inner .content dl dd:nth-child(4) {
    left: 95%;
    top: 35%;
  }
  .ice_mountain ._up .inner .content dl dd:nth-child(4):before {
    width: 30%;
    left: -40%;
  }
  .ice_mountain ._up .inner .content dl dd:nth-child(4):after {
    transform-origin: left;
    width: 65%;
    left: -40%;
    rotate: 120deg;
  }
  .ice_mountain ._down dl dd:nth-child(1) {
    left: -35%;
    top: 15%;
  }
  .ice_mountain ._down dl dd:nth-child(2) {
    left: -15%;
    top: 40%;
  }
  .ice_mountain ._down dl dd:nth-child(3) {
    left: 74%;
    top: 30%;
  }
}

.accident {
  overflow: visible;
  padding: 15% 0 40vw;
  background: url("../img/product/elderly_accident/in/bg_mb.jpg") no-repeat center top/cover;
}
.accident .inner .sec_title {
  font-size: 0.9em;
}
.accident .inner .sec_title ._mb {
  display: block;
}
.accident .inner .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1em;
}
.accident .inner .list li {
  width: calc((100% - 1em) / 2);
}
.accident .inner .list li .caption {
  position: relative;
  width: -moz-max-content;
  width: max-content;
  margin: 0 auto;
  padding: 0.5em 1.5em;
  background-color: var(--blue);
  color: #fff;
  border-radius: 99em;
  margin-top: -1em;
  font-size: 1.2em;
}
.accident .inner .chair {
  position: absolute;
  bottom: -2%;
  left: -3%;
  width: 55%;
}
@media all and (min-width: 1024px) {
  .accident {
    padding: 5em 0 8em;
    background: url("../img/product/elderly_accident/in/bg.jpg") no-repeat center top/cover;
  }
  .accident .inner .list {
    margin: 0 auto;
    max-width: 840px;
  }
  .accident .inner .list li {
    width: calc((100% - 2em) / 3);
  }
  .accident .inner .chair {
    width: 18em;
    left: 50%;
    transform: translateX(-42em);
  }
}
@media all and (min-width: 1200px) {
  .accident .inner .sec_title {
    font-size: 1em;
  }
  .accident .inner .sec_title ._mb {
    display: none;
  }
}

.case {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  padding-top: 5em;
}
.case .bg .whale {
  position: absolute;
  width: 30%;
  top: 0;
  left: 50%;
  mix-blend-mode: multiply;
  transform: translate(80%, -80%);
}
.case .bg .fish {
  position: absolute;
  width: 35%;
  max-width: 15em;
  top: 10%;
  left: -10%;
}
.case .bg .penguin {
  position: absolute;
  width: 20%;
  transform: translate(-50%, -150%);
  opacity: 0.7;
}
.case .bg .ribon {
  position: absolute;
  width: 35%;
  max-width: 15em;
  top: 25%;
  right: 0%;
  opacity: 0.75;
  transform: translate(0%, 0%);
}
@media all and (min-width: 1200px) {
  .case .bg .penguin {
    width: 13em;
    transform: translate(50%, -100%);
  }
  .case .bg .fish {
    left: 0;
  }
}
.case .sec_title {
  margin-bottom: 2em;
}
.case .sec_title h2 {
  color: #fff;
}
.case .sec_title .sub {
  color: #fff;
}
.case .inner {
  position: relative;
  width: 100%;
}
.case .inner .content {
  position: relative;
  z-index: 3;
  padding: 2em 5vw;
  overflow-y: clip;
  overflow-x: auto;
}
.case .inner .content .case_list {
  width: -moz-max-content;
  width: max-content;
  min-width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: 1em;
}
.case .inner .content .case_list li {
  position: relative;
  width: calc((100% - 2em) / 3);
  width: 20em;
  padding: 1.2em;
  border-radius: 1.5em;
  background-color: #fff;
  --bg-c: #FFF4DD;
  --index-c: #FFC94F;
  background: linear-gradient(to bottom, var(--bg-c) 22%, #fff 20%);
}
.case .inner .content .case_list li:has(._85) {
  background: linear-gradient(to bottom, var(--bg-c) 30%, #fff 20%);
}
@media all and (min-width: 768px) {
  .case .inner .content .case_list li {
    width: 21em;
    padding: 1.5em;
  }
}
.case .inner .content .case_list li:nth-child(2) {
  --bg-c: #FFE3E3;
  --index-c: #E99385;
}
.case .inner .content .case_list li:nth-child(3) {
  --bg-c: #E7E3FF;
  --index-c: #854591;
}
.case .inner .content .case_list li .index {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  position: absolute;
  border-radius: 99em;
  width: 2.65em;
  aspect-ratio: 1/1;
  top: 0;
  left: 50%;
  transform: translate(-50%, -32%);
  font-size: 2.2em;
  color: var(--index-c);
  background-color: var(--bg-c);
  text-align: center;
  padding-top: 0.35em;
}
.case .inner .content .case_list li .index span {
  border-bottom: 1px solid currentColor;
}
.case .inner .content .case_list li .title {
  position: relative;
  z-index: 1;
  padding: 0.75em 0;
  font-size: 1.75em;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}
.case .inner .content .case_list li .dtl {
  padding: 0 0.5em;
}
.case .inner .content .case_list li .dtl .des {
  margin: 1em 0;
  color: #696969;
  font-size: 0.88em;
  line-height: 1.35;
}
.case .inner .content .case_list li .dtl .des p strong {
  color: var(--red_word);
}
.case .inner .content .case_list li .dtl .des + dl {
  border-bottom: 1px dashed #aaa;
}
.case .inner .content .case_list li .dtl dl dt {
  border-radius: 99em;
  background-color: var(--blue);
  color: #fff;
  padding: 0.4em 1em;
  width: -moz-max-content;
  width: max-content;
}
.case .inner .content .case_list li .dtl dl dd {
  padding: 1em 0;
  line-height: 1.5;
  font-weight: 600;
  font-size: 1.1em;
}
.case .inner .content .case_list li .dtl dl dd p {
  font-size: 0.9em;
}
.case .inner .content .case_list li .dtl dl dd p ~ p {
  margin-top: 0em;
}
.case .inner .content .case_list li .dtl dl dd .price {
  font-weight: 700;
  font-size: 1.1em;
  line-height: 1;
  color: var(--red_word);
}
.case .inner .content .case_list li .dtl dl dd .price strong {
  font-size: 1.3em;
}
.case .inner .content .case_list li .dtl dl dd .price.big {
  font-size: 1.2em;
}
.case .inner .content .case_list li .dtl dl dd .remark {
  line-height: 1.25;
  font-size: 0.7em;
  color: #696969;
}
.case .inner .content .case_list li .dtl .tips {
  position: relative;
  background-color: rgba(255, 201, 79, 0.45);
  border-radius: 10px;
  margin: 1.35em 0;
  padding: 0.7em 0.5em;
  padding-left: 1.75em;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.3;
}
.case .inner .content .case_list li .dtl .tips:before {
  content: "※";
  position: absolute;
  left: 0.5em;
}
@media all and (min-width: 1200px) {
  .case {
    padding-top: 5em;
  }
  .case .inner {
    width: 80%;
    min-width: 1040px;
    min-width: 65em;
  }
  .case .inner .content {
    padding: 2em 0em;
  }
  .case .inner .content .case_list {
    justify-content: space-between;
    gap: unset;
  }
  .case .inner .content .case_list li {
    width: 21em;
    padding: 1.2em;
  }
}
.case .advice {
  position: relative;
  z-index: 1;
  margin-top: 10%;
  height: 90vw;
}
.case .advice:before {
  position: absolute;
  z-index: 1;
  content: "";
  bottom: 0%;
  width: 180%;
  left: -15%;
  aspect-ratio: 960/449;
  background: url("../img/product/cancer/blue/blue_back.svg") no-repeat center top/cover;
}
.case .advice:after {
  position: absolute;
  z-index: 4;
  content: "";
  bottom: 0%;
  width: 190%;
  left: -25%;
  aspect-ratio: 192/59;
  background: url("../img/product/cancer/blue/blue_front.svg") no-repeat center top/cover;
}
.case .advice:has(._85):before {
  aspect-ratio: 128/47;
  background: url("../img/product/elderly_accident/blue/blue_back.svg") no-repeat center top/cover;
  width: 250%;
  left: -50%;
}
.case .advice:has(._85):after {
  aspect-ratio: 480/169;
  background: url("../img/product/elderly_accident/blue/blue_front.svg") no-repeat center top/cover;
  bottom: -10%;
}
.case .advice .txt {
  position: absolute;
  z-index: 2;
  font-size: 4vw;
  left: 50%;
  transform: translate(-65%, 0);
}
.case .advice .txt._85 {
  transform: translate(-55%, 0%);
}
.case .advice .txt .txt_wrap {
  position: relative;
  top: -1.5em;
  width: -moz-max-content;
  width: max-content;
  border-radius: 99em;
  padding: 1em 2em 1.5em 1.7em;
  background-color: #fff;
  color: var(--blue);
  font-weight: 500;
  line-height: 1.3;
}
.case .advice .txt .txt_wrap::after {
  position: absolute;
  right: 0;
  bottom: -0.1em;
  content: "";
  width: 1.5em;
  aspect-ratio: 1/1.65;
  background-color: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  rotate: -40deg;
  bottom: -0.85em;
  right: 1.5em;
}
.case .advice .txt strong {
  position: relative;
  font-size: 1.35em;
  font-weight: 600;
}
.case .advice .txt strong:after {
  content: "";
  position: absolute;
  width: 0.3em;
  aspect-ratio: 1/1;
  border-radius: 99em;
  background-color: #FFC94F;
  bottom: -0.3em;
  left: 0.4em;
}
.case .advice .txt .silver {
  position: absolute;
  width: 2.5em;
  top: 0.35em;
  left: 0.35em;
  transform: translate(-50%, -50%) rotate(-10deg);
}
.case .advice .profasor {
  position: absolute;
  z-index: 5;
  width: 100%;
  left: 22%;
}
.case .advice .profasor._85 {
  left: 25%;
  bottom: -5%;
}
.case .advice .treasure {
  position: absolute;
  z-index: 3;
  width: 60%;
  aspect-ratio: 3/1;
  bottom: 20%;
  left: -10%;
}
.case .advice .treasure .item {
  position: absolute;
  width: 35%;
}
.case .advice .treasure .item._1 {
  right: 0;
  rotate: 7deg;
}
.case .advice .treasure .item._2 {
  right: 28%;
  rotate: 15deg;
  top: -10%;
}
.case .advice .treasure .item._3 {
  top: -45%;
}
.case .advice .heart {
  position: absolute;
  z-index: 3;
  width: 30%;
  bottom: 25%;
  left: 10%;
}
@media all and (min-width: 1200px) {
  .case .advice {
    margin-top: 5em;
    height: 30em;
  }
  .case .advice:before {
    width: 100%;
    left: 0;
    bottom: -10%;
  }
  .case .advice:after {
    width: 100%;
    left: 0;
    bottom: -10%;
  }
  .case .advice:has(._85):before {
    width: 100%;
    left: 0%;
  }
  .case .advice:has(._85):after {
    width: 100%;
    left: 0;
    bottom: -42%;
  }
  .case .advice .txt {
    font-size: 1.65em;
    padding: 1em 1.5em 1.5em;
    top: 0.15em;
  }
  .case .advice .txt._85 {
    transform: translate(-85%, 0%);
  }
  .case .advice .profasor {
    width: 36em;
    left: 50%;
  }
  .case .advice .profasor._85 {
    left: calc(50% - 10em);
    bottom: -5%;
  }
  .case .advice .treasure {
    width: 35%;
    bottom: 15%;
    left: 5%;
  }
}
@media all and (min-width: 1200px) and (min-width: 1680px) {
  .case .advice .treasure {
    bottom: 23%;
  }
}
@media all and (min-width: 1200px) {
  .case .advice .heart {
    width: 15em;
    bottom: 5vw;
    left: calc(55% - 40em);
  }
}

#feature {
  --circle_color: #D5F5FF;
  position: relative;
  z-index: 2;
  padding: 10% 0 0;
  overflow: visible;
  background: linear-gradient(to bottom, var(--circle_color) 6%, #fff 80%);
}
#feature._85 {
  --circle_color: #EDFBF1;
}
#feature .circle {
  position: absolute;
  z-index: -1;
  top: 1px;
  transform: translateY(-100%);
  width: 100%;
  aspect-ratio: 10/1;
  overflow: hidden;
}
#feature .circle:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 500%;
  aspect-ratio: 1/1;
  border-radius: 100%;
  background-color: var(--circle_color);
}
@media all and (min-width: 1200px) {
  #feature .circle {
    aspect-ratio: 20/1;
  }
  #feature .circle:before {
    width: 900%;
  }
}
#feature .inner .content .feature_list {
  display: flex;
  flex-direction: column;
  gap: 2em;
}
#feature .inner .content .feature_list li {
  --bg_color: #00D4FD;
  position: relative;
  border-radius: 1.5em;
  border: 1px solid var(--bg_color);
  padding: 2em 1em;
  overflow: hidden;
  background-color: #fff;
}
#feature .inner .content .feature_list li .index {
  position: absolute;
  padding: 0.5em 2em;
  background-color: var(--bg_color);
  color: #fff;
  top: 0;
  left: 0;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
  font-size: 1.2em;
}
#feature .inner .content .feature_list li .icon {
  margin: 1em auto;
  width: 55%;
}
#feature .inner .content .feature_list li .title {
  font-weight: 600;
  font-size: 1.75em;
  text-align: center;
  line-height: 1.15;
}
#feature .inner .content .feature_list li .title .price {
  font-weight: 700;
  font-size: 1.35em;
  color: var(--red_word);
}
#feature .inner .content .feature_list li .slogan {
  position: relative;
  margin: 1.5em auto;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  font-size: 1.1em;
  font-weight: 500;
  color: var(--blue);
  /*text-align: center;*/
  line-height: 1.35;
}
#feature .inner .content .feature_list li .slogan:before, #feature .inner .content .feature_list li .slogan:after {
  content: "";
  position: absolute;
  width: 2em;
  height: 1px;
  background-color: var(--blue);
  top: 50%;
  transform: translateX(-130%);
}
#feature .inner .content .feature_list li .slogan:after {
  right: 0;
  transform: translateX(130%);
}
#feature .inner .content .feature_list li dl {
  font-weight: 500;
}
#feature .inner .content .feature_list li dl dt {
  position: relative;
  padding-left: 1em;
}
#feature .inner .content .feature_list li dl dt:before {
  content: "";
  position: absolute;
  left: 0.5em;
  top: 0.45em;
  width: 3px;
  aspect-ratio: 1/1;
  border-radius: 99em;
  background-color: #333;
}
#feature .inner .content .feature_list li dl dt ~ dt {
  margin-top: 0.75em;
}
#feature .inner .content .feature_list li dl dd {
  position: relative;
  padding-left: 2.3em;
  margin-top: 0.75em;
  color: #7c7c7c;
  line-height: 1.5;
}
#feature .inner .content .feature_list li dl dd:before {
  content: "";
  position: absolute;
  left: 0.8em;
  width: 1.2em;
  margin-top: 0.25em;
  aspect-ratio: 1/1;
  background: url("../img/product/cancer/feature/check.svg") no-repeat center center/contain;
}
#feature .inner .content .feature_list._85 {
  margin-bottom: 5em;
}
#feature .inner .content .feature_list._85 li {
  --bg_color: #30DAA2;
}
#feature .inner .content .feature_list._85 li .slogan:after, #feature .inner .content .feature_list._85 li .slogan:before {
  display: none;
}
#feature .inner .content .feature_list._85 li dl dd {
  max-width: 16em;
}
#feature .six_cancer {
  position: relative;
  margin-top: 5em;
}
#feature .six_cancer dt {
  position: absolute;
  font-weight: 500;
  font-size: 1.75em;
  line-height: 1.3;
  left: 1em;
  top: -1em;
}
#feature .six_cancer dt .price {
  font-weight: 600;
  font-size: 1.3em;
  color: var(--red_word);
}
#feature .six_cancer dd .body {
  position: relative;
  width: 50%;
  margin-left: 50%;
}
#feature .six_cancer dd .body .point {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
#feature .six_cancer dd .body .point li {
  position: absolute;
  width: 0.5em;
  aspect-ratio: 1/1;
  border-radius: 99em;
  background-color: var(--blue_dark);
  border: 3px solid transparent;
  box-sizing: content-box;
}
#feature .six_cancer dd .body .point li._1 {
  top: 50%;
  left: 45%;
}
#feature .six_cancer dd .body .point li._2 {
  top: 42%;
  left: 85%;
}
#feature .six_cancer dd .body .point li._3 {
  top: 57%;
  left: 53%;
}
#feature .six_cancer dd .body .point li._4 {
  top: 66%;
  left: 60%;
}
#feature .six_cancer dd .body .point li._5 {
  top: 80%;
  left: 69%;
}
#feature .six_cancer dd .body .point li._6 {
  top: 82%;
  left: 69%;
}
#feature .six_cancer dd .body .point li.active {
  z-index: 2;
  transform: scale(1.5);
  background-color: #ee8f8f;
  border-color: var(--red_word);
}
@media all and (min-width: 1024px) {
  #feature .six_cancer dd .body .point li._1 {
    top: 50%;
    left: 30%;
  }
  #feature .six_cancer dd .body .point li._2 {
    top: 43%;
    left: 65%;
  }
  #feature .six_cancer dd .body .point li._3 {
    top: 57%;
    left: 35%;
  }
  #feature .six_cancer dd .body .point li._4 {
    top: 66%;
    left: 60%;
  }
  #feature .six_cancer dd .body .point li._5 {
    top: 80%;
    left: 49%;
  }
  #feature .six_cancer dd .body .point li._6 {
    top: 82%;
    left: 49%;
  }
}
#feature .six_cancer dd .cancer_list li {
  cursor: pointer;
  position: absolute;
  padding: 0.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  transform: translateY(-50%);
  left: 5%;
  transition: all 0.1s ease-out;
  border-radius: 1em;
}
#feature .six_cancer dd .cancer_list li:nth-child(2) {
  top: 18%;
}
#feature .six_cancer dd .cancer_list li:nth-child(1) {
  top: 32%;
}
#feature .six_cancer dd .cancer_list li:nth-child(3) {
  top: 46%;
}
#feature .six_cancer dd .cancer_list li:nth-child(4) {
  top: 60%;
}
#feature .six_cancer dd .cancer_list li:nth-child(5) {
  top: 74%;
}
#feature .six_cancer dd .cancer_list li:nth-child(6) {
  top: 88%;
}
#feature .six_cancer dd .cancer_list li .icon {
  width: 4em;
}
#feature .six_cancer dd .cancer_list li .cancer .caption {
  color: var(--blue_dark);
  font-size: 1.3em;
  font-weight: 500;
}
#feature .six_cancer dd .cancer_list li .cancer .remark {
  margin-top: 0.5em;
  font-size: 0.8em;
  color: #676767;
}
#feature .six_cancer dd .cancer_list li:hover {
  transform: translateY(-50%) scale(1.02);
  background-color: rgba(0, 147, 193, 0.1);
}
@media all and (min-width: 1024px) {
  #feature .inner .content .feature_list {
    align-items: center;
  }
  #feature .inner .content .feature_list li {
    width: 70%;
  }
  #feature .inner .content .feature_list li .icon {
    max-width: 10em;
  }
  #feature .inner .content .feature_list li .dtl dl {
    margin: 0 auto;
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
  }
  #feature .six_cancer {
    margin: 0 auto;
    margin-top: 5em;
    width: 80%;
    max-width: 1200px;
  }
  #feature .six_cancer dt {
    top: 1em;
  }
  #feature .six_cancer dd .body {
    margin: 0 auto;
    width: 30%;
  }
  #feature .six_cancer dd .body ._mb {
    display: none;
  }
  #feature .six_cancer dd .body ._pc {
    display: block;
  }
  #feature .six_cancer dd .cancer_list {
    font-size: 0.8em;
  }
}
@media all and (min-width: 1024px) and (min-width: 1200px) {
  #feature .six_cancer dd .cancer_list {
    font-size: 1em;
  }
}
@media all and (min-width: 1024px) and (min-width: 1320px) {
  #feature .six_cancer dd .cancer_list {
    font-size: 1.2em;
  }
}
@media all and (min-width: 1024px) {
  #feature .six_cancer dd .cancer_list li {
    justify-content: flex-start;
    padding: 0.75em;
    width: 14em;
    border-radius: 1em;
    border: 1px solid #eee;
    background-color: #fff;
  }
  #feature .six_cancer dd .cancer_list li .icon {
    flex-shrink: 0;
    width: 4em;
  }
  #feature .six_cancer dd .cancer_list li:nth-child(2n-1) {
    left: 2%;
    justify-content: flex-end;
    text-align: right;
  }
  #feature .six_cancer dd .cancer_list li:nth-child(2n-1) .icon {
    order: 3;
  }
  #feature .six_cancer dd .cancer_list li:nth-child(2n) {
    left: auto;
    right: 2%;
  }
  #feature .six_cancer dd .cancer_list li:nth-child(n+1) {
    top: 40%;
  }
  #feature .six_cancer dd .cancer_list li:nth-child(n+3) {
    top: 60%;
  }
  #feature .six_cancer dd .cancer_list li:nth-child(n+5) {
    top: 80%;
  }
}
@media all and (min-width: 1200px) {
  #feature .inner .content {
    margin-top: 4em;
  }
  #feature .inner .content .feature_list {
    flex-direction: row;
    align-items: stretch;
    gap: 1em;
  }
}

.policy {
  overflow-x: clip;
  overflow-y: visible;
  padding: 15% 0 0;
  background: url("../img/grid_bg.jpg") repeat center top/44px;
}
.policy .bg_item .cross {
  position: absolute;
  z-index: 0;
  width: 20%;
  opacity: 0.5;
}
.policy .bg_item .cross._L1 {
  top: 3em;
  left: -10%;
}
.policy .bg_item .cross._R1 {
  width: 10%;
  right: 5%;
  top: 5vw;
}
.policy .bg_item .cross._R2 {
  width: 5%;
  right: 0%;
  top: 20vw;
}
@media all and (min-width: 1024px) {
  .policy .bg_item .cross._L1 {
    width: 8em;
    top: 65%;
    left: -1em;
  }
  .policy .bg_item .cross._R1 {
    width: 5em;
    opacity: 0.8;
    right: 15%;
    top: 45%;
  }
  .policy .bg_item .cross._R2 {
    width: 3em;
    right: 10%;
    top: 53%;
  }
}
.policy .inner {
  position: relative;
  z-index: 1;
}
.policy .content {
  position: relative;
  padding: 1.65em 0;
}
.policy .content .bg {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: var(--blue_dark);
  left: 0;
  top: 0;
}
.policy .content .form {
  position: relative;
  z-index: 2;
  padding: 2em 1em;
  background: linear-gradient(135deg, #F6FDFF 0%, #E4F8FF 45%);
}
.policy .content .form .tag {
  position: absolute;
  z-index: 2;
  transform: translateY(-100%);
  top: 1px;
  right: 0;
  color: #fff;
  font-size: 1.1em;
  font-weight: 500;
  letter-spacing: 0.1em;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  width: 9em;
}
.policy .content .form .tag h3 {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.75em;
  border-radius: 0.5em 0.5em 0 0;
  background-color: #FFC94F;
}
.policy .content .form .tag::after {
  flex-shrink: 0;
  content: "";
  display: inline-block;
  z-index: -1;
  right: 0;
  bottom: 0;
  border-radius: 0.5em 0.5em 0 0;
  margin-left: -2em;
  width: 5em;
  height: 2em;
  background-color: #E99385;
}
.policy .content .form .tag._85 h3 {
  background-color: #E99385;
}
.policy .content .form .tag._85:after {
  background-color: #FFC94F;
}
.policy .content .clip {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 2em;
  width: 2.5em;
  transform: translateY(-28%);
}
@media all and (min-width: 1024px) {
  .policy {
    padding: 5em 0 0;
  }
  .policy .content {
    margin: 0 auto;
    margin-top: 4em;
    width: 80%;
    max-width: 40em;
    padding: 1.5em 3em 0;
  }
  .policy .content .bg {
    border-radius: 2em 2em 0 0;
  }
  .policy .content .form {
    padding: 2em 2em 4em;
  }
  .policy .content .form .tag {
    width: auto;
    right: 1em;
  }
  .policy .content .clip {
    left: 5em;
  }
  .policy .content .item {
    display: block;
    position: absolute;
    z-index: 1;
  }
  .policy .content .item.stetho {
    width: 30%;
    top: -12%;
    left: -22%;
  }
  .policy .content .item.bag {
    width: 50%;
    bottom: 0%;
    left: -35%;
  }
  .policy .content .item.grass {
    width: 40%;
    bottom: 0;
    right: -30%;
  }
  .policy .content .item.medicine {
    z-index: 2;
    width: 45%;
    bottom: -15%;
    bottom: -8em;
    right: -22%;
  }
}