@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');

html {
  scroll-behavior: smooth;
}
.monitor {
  --viewport: 750;
  --gold: #BBA171;
}
@media screen and (min-width: 768px) {
  .monitor {
    --viewport: 1280;
  }
}
.monitor {
  position: relative;
  margin-bottom: calc(100vw / var(--viewport) * 75);
  font-size: calc(100vw / var(--viewport) * 24);
  font-weight: normal;
  color: #000;
}
@media screen and (min-width: 768px) {
  .monitor {
    margin-bottom: min(calc(100vw / var(--viewport) * 60), 60px);
    font-size: min(calc(100vw / var(--viewport) * 18), 18px);
  }
}
.monitor, .monitor button, .monitor h1, .monitor h2, .monitor h3, .monitor h4, .monitor h5, .monitor h6, .monitor input, .monitor option, .monitor select, .monitor table, .monitor textarea {
  line-height: 1.6;
  color: #000;
}
.monitor video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
@media screen and (min-width: 768px) {
  .monitor a[href^="tel:"] {
    pointer-events: none;
  }
}
.monitor img {
  vertical-align: middle;
}
@media (min-width: 768px) {
  .monitor img{
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}
.monitor .clearfix::after {
   content: "";
   display: block;
   clear: both;
}
.monitor .inner {
  padding-left: calc(100vw / var(--viewport) * 30);
  padding-right: calc(100vw / var(--viewport) * 30);
}
@media (min-width: 768px) {
  .monitor .inner {
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 1160px;
  }
}
.monitor .content {
  margin-top: calc(100vw / var(--viewport) * -50);
  padding-top: calc(100vw / var(--viewport) * 50);
}
@media screen and (min-width: 768px) {
  .monitor .content {
    margin-top: max(calc(100vw / var(--viewport) * -45), -45px);
    padding-top: min(calc(100vw / var(--viewport) * 45), 45px);
  }
}
.monitor .content:not(:last-child) {
  margin-bottom: calc(100vw / var(--viewport) * 100);
}
@media screen and (min-width: 768px) {
  .monitor .content:not(:last-child) {
    margin-bottom: min(calc(100vw / var(--viewport) * 90), 90px);
  }
}
.monitor .cta {
  margin-top: calc(100vw / var(--viewport) * 80);
}
@media screen and (min-width: 768px) {
  .monitor .cta {
    margin-top: min(calc(100vw / var(--viewport) * 90), 90px);
  }
}
.monitor .ctaLink {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  background: var(--gold);
  border-radius: calc(100vw / var(--viewport) * 18);
  padding: calc(100vw / var(--viewport) * 37) calc(100vw / var(--viewport) * 90);
  width: calc(100vw / var(--viewport) * 540);
  text-align: center;
  line-height: calc(37 / 26);
  font-size: calc(100vw / var(--viewport) * 26);
  font-weight: 600;
  color: #FFF !important;
  text-decoration: none !important;
}
@media screen and (min-width: 768px) {
  .monitor .ctaLink {
    border-radius: min(calc(100vw / var(--viewport) * 18), 18px);
    padding: min(calc(100vw / var(--viewport) * 33), 33px) min(calc(100vw / var(--viewport) * 75), 75px);
    width: min(calc(100vw / var(--viewport) * 460), 460px);
    line-height: calc(34 / 22);
    font-size: min(calc(100vw / var(--viewport) * 22), 22px);
    transition: opacity 0.3s;
  }
}
@media screen and (min-width: 768px) {
  .monitor .ctaLink:hover {
    opacity: 0.7;
  }
}
.monitor .ctaLink::after {
  content: "";
  position: absolute;
  inset: 0 calc(100vw / var(--viewport) * 30) 0 auto;
  margin: auto;
  background: url(../../assets/img/link_arrow.svg) center/contain no-repeat;
  width: calc(100vw / var(--viewport) * 50);
  height: calc(100vw / var(--viewport) * 10);
}
@media screen and (min-width: 768px) {
  .monitor .ctaLink::after {
    inset: 0 min(calc(100vw / var(--viewport) * 14), 14px) 0 auto;
    width: min(calc(100vw / var(--viewport) * 44), 44px);
    height: min(calc(100vw / var(--viewport) * 9), 9px);
  }
}
.monitor .ctaLink:not(:last-child) {
  margin-bottom: calc(100vw / var(--viewport) * 28);
}
@media screen and (min-width: 768px) {
  .monitor .ctaLink:not(:last-child) {
    margin-bottom: min(calc(100vw / var(--viewport) * 30), 30px);
  }
}
.monitor .ctaNote {
  text-align: center;
  line-height: calc(37 / 26);
  font-size: calc(100vw / var(--viewport) * 26);
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .monitor .ctaNote {
    line-height: calc(28 / 16);
    font-size: min(calc(100vw / var(--viewport) * 16), 16px);
  }
}


/* firstview */
.monitor .firstview {
  width: 100%;
  background-color: #000;
}
.monitor .firstviewWrapper {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
}
.monitor .firstviewImage {
  max-width: 100%;
  height: 100%;
  display: block;
}
.monitor .firstviewImage img {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.monitor .firstviewContent {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.monitor .firstviewContent__Subtitle {
  color: var(--gold);
  font-size: calc(100vw / var(--viewport) * 36);
  font-weight: 600;
  display: block;
}
@media screen and (min-width: 768px) {
  .monitor .firstviewContent__Subtitle {
    font-size: min(calc(100vw / var(--viewport) * 29), 29px);
  }
}
.monitor .firstviewContent__Title {
  color: #fff;
  font-size: calc(100vw / var(--viewport) * 44);
  font-weight: 600;
  display: block;
}
@media screen and (min-width: 768px) {
  .monitor .firstviewContent__Title {
    font-size: min(calc(100vw / var(--viewport) * 36), 36px);
  }
}
.monitor .firstviewCatch {
  background: #3C3A39;
}


/* about */
.monitor .about {
  margin-top: 0;
  padding-top: calc(100vw / var(--viewport) * 100);
}
@media screen and (min-width: 768px){
  .monitor .about {
    padding-top: min(calc(100vw / var(--viewport) * 80), 80px);
  }
}
.monitor .aboutTitle {
  text-align: center;
  line-height: calc(58 / 40);
  font-size: calc(100vw / var(--viewport) * 40);
  font-weight: 700;
}
@media screen and (min-width: 768px){
  .monitor .aboutTitle {
    line-height: calc(64 / 44);
    font-size: min(calc(100vw / var(--viewport) * 44), 44px);
  }
}
.monitor .aboutTitle:not(:last-child) {
  margin-bottom: calc(100vw / var(--viewport) * 40);
}
@media screen and (min-width: 768px){
  .monitor .aboutTitle:not(:last-child) {
    margin-bottom: min(calc(100vw / var(--viewport) * 30), 30px);
  }
}
.monitor .aboutText {
  line-height: calc(40 / 24);
  font-size: calc(100vw / var(--viewport) * 24);
}
@media screen and (min-width: 768px){
  .monitor .aboutText {
    line-height: calc(32 / 18);
    font-size: min(calc(100vw / var(--viewport) * 18), 18px);
  }
}
.monitor .aboutText:not(:last-child) {
  margin-bottom: calc(100vw / var(--viewport) * 80);
}
@media screen and (min-width: 768px){
  .monitor .aboutText:not(:last-child) {
    margin-bottom: min(calc(100vw / var(--viewport) * 80), 80px);
  }
}
.monitor .aboutExampleCase {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(100vw / var(--viewport) * 30);
  margin-left: calc(100vw / var(--viewport) * -30);
  margin-right: calc(100vw / var(--viewport) * -30);
  padding: calc(100vw / var(--viewport) * 30);
}
@media screen and (min-width: 768px) {
  .monitor .aboutExampleCase {
    grid-template-columns: repeat(2, 1fr);
    gap: min(calc(100vw / var(--viewport) * 22), 22px);
    margin-left: 0;
    margin-right: 0;
    padding: min(calc(100vw / var(--viewport) * 32), 32px);
  }
}
.monitor .aboutExampleCase--Hige {
  background: #053650;
}
.monitor .aboutExampleCase--Body {
  background: #3C3A39;
}
.monitor .aboutExampleList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.monitor .aboutExampleLabel {
  padding: calc(100vw / var(--viewport) * 12);
  text-align: center;
  line-height: calc(33 / 28);
  font-size: calc(100vw / var(--viewport) * 28);
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .monitor .aboutExampleLabel {
    padding: min(calc(100vw / var(--viewport) * 8), 8px);
    line-height: calc(25 / 21);
    font-size: min(calc(100vw / var(--viewport) * 21), 21px);
  }
}
.monitor .aboutExampleLabel--before {
  background: #9F9592;
}
.monitor .aboutExampleLabel--after {
  background: var(--gold);
}
.monitor .aboutFeature {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(100vw / var(--viewport) * 40);
  margin-left: calc(100vw / var(--viewport) * -30);
  margin-right: calc(100vw / var(--viewport) * -30);
  background: #3C3A39;
  padding: calc(100vw / var(--viewport) * 30) calc(100vw / var(--viewport) * 30) calc(100vw / var(--viewport) * 60);
}
@media screen and (min-width: 768px) {
  .monitor .aboutFeature {
    grid-template-columns: repeat(2, 1fr);
    gap: min(calc(100vw / var(--viewport) * 22), 22px);
    margin-left: 0;
    margin-right: 0;
    padding: min(calc(100vw / var(--viewport) * 18), 18px) min(calc(100vw / var(--viewport) * 32), 32px) min(calc(100vw / var(--viewport) * 32), 32px);
  }
}
.monitor .aboutFeatureItem {
  display: flex;
  flex-direction: column;
}
.monitor .aboutFeatureTitle {
  background: #000;
  padding: calc(100vw / var(--viewport) * 20);
  text-align: center;
  line-height: calc(46 / 32);
  font-size: calc(100vw / var(--viewport) * 32);
  font-weight: 700;
  color: var(--gold);
}
@media screen and (min-width: 768px) {
  .monitor .aboutFeatureTitle {
    padding: min(calc(100vw / var(--viewport) * 16), 16px);
    line-height: calc(34 / 23);
    font-size: min(calc(100vw / var(--viewport) * 23), 23px);
  }
}
.monitor .aboutFeatureText {
  flex-grow: 1;
  background: #F5F5F5;
  padding: calc(100vw / var(--viewport) * 20) calc(100vw / var(--viewport) * 30) calc(100vw / var(--viewport) * 30);
  line-height: calc(40 / 24);
  font-size: calc(100vw / var(--viewport) * 24);
}
@media screen and (min-width: 768px) {
  .monitor .aboutFeatureText {
    padding: min(calc(100vw / var(--viewport) * 15), 15px) min(calc(100vw / var(--viewport) * 22), 22px) min(calc(100vw / var(--viewport) * 24), 24px);
    line-height: calc(30 / 18);
    font-size: min(calc(100vw / var(--viewport) * 18), 18px);
  }
}


/* plan */
.monitor .planTitle {
  text-align: center;
  line-height: calc(58 / 40);
  font-size: calc(100vw / var(--viewport) * 40);
  font-weight: 700;
  color: var(--gold);
}
@media screen and (min-width: 768px){
  .monitor .planTitle {
    line-height: calc(64 / 44);
    font-size: min(calc(100vw / var(--viewport) * 44), 44px);
  }
}
.monitor .planTitle:not(:last-child) {
  margin-bottom: calc(100vw / var(--viewport) * 40);
}
@media screen and (min-width: 768px){
  .monitor .planTitle:not(:last-child) {
    margin-bottom: min(calc(100vw / var(--viewport) * 50), 50px);
  }
}
.monitor .planAnchorList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(100vw / var(--viewport) * 20);
  margin-bottom: calc(100vw / var(--viewport) * 80);
}
@media screen and (min-width: 768px) {
  .monitor .planAnchorList {
    gap: min(calc(100vw / var(--viewport) * 22), 22px);
    margin-bottom: min(calc(100vw / var(--viewport) * 90), 90px);
  }
}
.monitor .planAnchorLink {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding: calc(100vw / var(--viewport) * 24) calc(100vw / var(--viewport) * 44) calc(100vw / var(--viewport) * 24) calc(100vw / var(--viewport) * 23);
  width: calc(100vw / var(--viewport) * 335);
  text-align: center;
  line-height: calc(48 / 33);
  font-size: calc(100vw / var(--viewport) * 33);
  font-weight: 700;
  color: #FFF !important;
  text-decoration: none !important;
}
@media screen and (min-width: 768px) {
  .monitor .planAnchorLink {
    padding: min(calc(100vw / var(--viewport) * 32), 32px) min(calc(100vw / var(--viewport) * 73), 73px) min(calc(100vw / var(--viewport) * 32), 32px) min(calc(100vw / var(--viewport) * 52), 52px);
    width: min(calc(100vw / var(--viewport) * 549), 549px);
    line-height: calc(37 / 26);
    font-size: min(calc(100vw / var(--viewport) * 26), 26px);
    transition: opacity 0.3s;
  }
}
@media screen and (min-width: 768px) {
  .monitor .planAnchorLink:hover {
    opacity: 0.7;
  }
}
.monitor .planAnchorLink::after {
  content: "";
  position: absolute;
  inset: calc(100vw / var(--viewport) * 4) calc(100vw / var(--viewport) * 23) 0 auto;
  margin: auto;
  background: url(../../assets/img/anchor_arrow.svg) center/contain no-repeat;
  width: calc(100vw / var(--viewport) * 21);
  height: calc(100vw / var(--viewport) * 34);
}
@media screen and (min-width: 768px) {
  .monitor .planAnchorLink::after {
    inset: min(calc(100vw / var(--viewport) * 3), 3px) min(calc(100vw / var(--viewport) * 52), 52px) 0 auto;
    width: min(calc(100vw / var(--viewport) * 21), 21px);
    height: min(calc(100vw / var(--viewport) * 34), 34px);
  }
}
.monitor .planAnchorLink--Hige {
  background: #053650;
}
.monitor .planAnchorLink--Body {
  background: #000;
}
.monitor .planContent {
  margin-top: calc(100vw / var(--viewport) * -50);
  padding-top: calc(100vw / var(--viewport) * 50);
}
@media screen and (min-width: 768px){
  .monitor .planContent {
    margin-top: max(calc(100vw / var(--viewport) * -45), -45px);
    padding-top: min(calc(100vw / var(--viewport) * 45), 45px);
  }
}
.monitor .planContent:not(:last-child) {
  margin-bottom: calc(100vw / var(--viewport) * 80);
}
@media screen and (min-width: 768px){
  .monitor .planContent:not(:last-child) {
    margin-bottom: min(calc(100vw / var(--viewport) * 90), 90px);
  }
}
.monitor .planContentTitle {
  text-align: center;
  line-height: calc(58 / 40);
  font-size: calc(100vw / var(--viewport) * 40);
  font-weight: 700;
}
@media screen and (min-width: 768px){
  .monitor .planContentTitle {
    line-height: calc(64 / 44);
    font-size: min(calc(100vw / var(--viewport) * 44), 44px);
  }
}
.monitor .planContentTitle:not(:last-child) {
  margin-bottom: calc(100vw / var(--viewport) * 20);
}
@media screen and (min-width: 768px){
  .monitor .planContentTitle:not(:last-child) {
    margin-bottom: min(calc(100vw / var(--viewport) * 5), 5px);
  }
}
.monitor .planContentTitle .pcOnly {
  display: inline;
}
.monitor .planBlock:not(:last-child) {
  margin-bottom: calc(100vw / var(--viewport) * 50);
}
@media screen and (min-width: 768px){
  .monitor .planBlock:not(:last-child) {
    margin-bottom: min(calc(100vw / var(--viewport) * 90), 90px);
  }
}
.monitor .planBlockTitle {
  margin-top: calc(100vw / var(--viewport) * 40);
  background: var(--gold);
  padding-top: calc(100vw / var(--viewport) * 23);
  padding-bottom: calc(100vw / var(--viewport) * 23);
  text-align: center;
  line-height: calc(44 / 30);
  font-size: calc(100vw / var(--viewport) * 30);
  font-weight: 700;
}
@media screen and (min-width: 768px){
  .monitor .planBlockTitle {
    margin-top: min(calc(100vw / var(--viewport) * 40), 40px);
    padding-top: min(calc(100vw / var(--viewport) * 16), 16px);
    padding-bottom: min(calc(100vw / var(--viewport) * 16), 16px);
    line-height: calc(40 / 26);
    font-size: min(calc(100vw / var(--viewport) * 26), 26px);
  }
}
.monitor .planBlockTitle:not(:last-child) {
  margin-bottom: calc(100vw / var(--viewport) * 30);
}
@media screen and (min-width: 768px){
  .monitor .planBlockTitle:not(:last-child) {
    margin-bottom: min(calc(100vw / var(--viewport) * 50), 50px);
  }
}
.monitor .planText {
  text-align: center;
  line-height: calc(40 / 28);
  font-size: calc(100vw / var(--viewport) * 28);
  font-weight: 500;
}
@media screen and (min-width: 768px){
  .monitor .planText {
    line-height: calc(34 / 23);
    font-size: min(calc(100vw / var(--viewport) * 23), 23px);
  }
}
.monitor .planText:not(:last-child) {
  margin-bottom: calc(100vw / var(--viewport) * 40);
}
@media screen and (min-width: 768px){
  .monitor .planText:not(:last-child) {
    margin-bottom: min(calc(100vw / var(--viewport) * 50), 50px);
  }
}
.monitor .planList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(100vw / var(--viewport) * 20);
}
@media screen and (min-width: 768px) {
  .monitor .planList {
    grid-template-columns: repeat(4, 1fr);
    gap: min(calc(100vw / var(--viewport) * 22), 22px);
  }
}
.monitor .planLabel {
  padding: calc(100vw / var(--viewport) * 10);
}
@media screen and (min-width: 768px) {
  .monitor .planLabel {
    padding: min(calc(100vw / var(--viewport) * 8), 8px);
  }
}
.monitor .planLabel--Hige {
  background: #053650;
}
.monitor .planLabel--Body {
  background: #000;
}
.monitor .planName {
  text-align: center;
  line-height: calc(37 / 26);
  font-size: calc(100vw / var(--viewport) * 26);
  font-weight: 700;
  color: var(--gold);
}
@media screen and (min-width: 768px) {
  .monitor .planName {
    line-height: calc(26 / 18);
    font-size: min(calc(100vw / var(--viewport) * 18), 18px);
  }
}
.monitor .planParts {
  text-align: center;
  line-height: calc(24 / 16);
  font-size: calc(100vw / var(--viewport) * 16);
  font-weight: 500;
  color: #FFF;
}
@media screen and (min-width: 768px) {
  .monitor .planParts {
    line-height: calc(17 / 12);
    font-size: min(calc(100vw / var(--viewport) * 12), 12px);
  }
}
.monitor .planImage {
  position: relative;
  background: #E8E8E8;
}
.monitor .planDiscount {
  position: absolute;
  z-index: 1;
  bottom: calc(100vw / var(--viewport) * 12);
  left: calc(100vw / var(--viewport) * 15);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #B41F20;
  border-radius: 50%;
  width: calc(100vw / var(--viewport) * 78);
  height: calc(100vw / var(--viewport) * 78);
}
@media screen and (min-width: 768px) {
  .monitor .planDiscount {
    bottom: min(calc(100vw / var(--viewport) * 10), 10px);
    left: min(calc(100vw / var(--viewport) * 10), 10px);
    width: min(calc(100vw / var(--viewport) * 65), 65px);
    height: min(calc(100vw / var(--viewport) * 65), 65px);
  }
}
.monitor .planDiscount .value {
  position: relative;
  bottom: calc(100vw / var(--viewport) * -2);
}
@media screen and (min-width: 768px) {
  .monitor .planDiscount .value {
    bottom: max(calc(100vw / var(--viewport) * -2), -2px);
  }
}
.monitor .planDiscount .number {
  line-height: 1;
  font-family: "din-2014", sans-serif;
  font-size: calc(100vw / var(--viewport) * 43);
  font-weight: 600;
  color: #FFF;
  letter-spacing: -0.05em;
}
@media screen and (min-width: 768px) {
  .monitor .planDiscount .number {
    font-size: min(calc(100vw / var(--viewport) * 35), 35px);
  }
}
.monitor .planDiscount .percent {
  margin-left: calc(100vw / var(--viewport) * 2);
  line-height: 1;
  font-family: "din-2014", sans-serif;
  font-size: calc(100vw / var(--viewport) * 19);
  font-weight: 600;
  color: #FFF;
}
@media screen and (min-width: 768px) {
  .monitor .planDiscount .percent {
    margin-left: min(calc(100vw / var(--viewport) * 2), 2px);
    font-size: min(calc(100vw / var(--viewport) * 15), 15px);
  }
}
.monitor .planDiscount .off {
  position: relative;
  top: calc(100vw / var(--viewport) * -2);
  text-align: center;
  line-height: 1;
  font-family: "din-2014", sans-serif;
  font-size: calc(100vw / var(--viewport) * 23);
  font-weight: 600;
  color: var(--gold);
}
@media screen and (min-width: 768px) {
  .monitor .planDiscount .off {
    top: max(calc(100vw / var(--viewport) * -2), -2px);
    font-size: min(calc(100vw / var(--viewport) * 19), 19px);
  }
}
.monitor .planCourcePrice {
  display: grid;
  grid-template-columns: calc(100vw / var(--viewport) * 146) 1fr;
}
@media screen and (min-width: 768px) {
  .monitor .planCourcePrice {
    grid-template-columns: min(calc(100vw / var(--viewport) * 115), 115px) 1fr;
  }
}
.monitor .planCource {
  align-content: center;
  background: #000;
  padding: calc(100vw / var(--viewport) * 4);
  text-align: center;
  line-height: calc(53 / 24);
  font-size: calc(100vw / var(--viewport) * 24);
  font-weight: 600;
  color: #FFF;
}
@media screen and (min-width: 768px) {
  .monitor .planCource {
    padding: min(calc(100vw / var(--viewport) * 4), 4px);
    line-height: calc(40 / 18);
    font-size: min(calc(100vw / var(--viewport) * 18), 18px);
  }
}
.monitor .planCource--Hige {
  background: #053650;
}
.monitor .planCource--Body {
  background: #000;
}
.monitor .planPrice {
  align-content: center;
  background: var(--gold);
  padding: calc(100vw / var(--viewport) * 10) calc(100vw / var(--viewport) * 15);
  text-align: right;
  line-height: 1;
  font-family: "din-2014", sans-serif;
  font-size: calc(100vw / var(--viewport) * 41);
  font-weight: 600;
  color: #FFF;
}
@media screen and (min-width: 768px) {
  .monitor .planPrice {
    padding: min(calc(100vw / var(--viewport) * 8), 8px) min(calc(100vw / var(--viewport) * 12), 12px);
    font-size: min(calc(100vw / var(--viewport) * 32), 32px);
  }
}
.monitor .planLargeItem {
  margin-left: auto;
  margin-right: auto;
  width: calc(100vw / var(--viewport) * 690);
}
@media screen and (min-width: 768px) {
  .monitor .planLargeItem {
    width: min(calc(100vw / var(--viewport) * 548), 548px);
  }
}
.monitor .planLargeLabel {
  padding: calc(100vw / var(--viewport) * 10);
}
@media screen and (min-width: 768px) {
  .monitor .planLargeLabel {
    padding: min(calc(100vw / var(--viewport) * 8), 8px);
  }
}
.monitor .planLargeLabel--Hige {
  background: #053650;
}
.monitor .planLargeLabel--Body {
  background: #000;
}
.monitor .planLargeName {
  text-align: center;
  line-height: calc(37 / 26);
  font-size: calc(100vw / var(--viewport) * 26);
  font-weight: 700;
  color: var(--gold);
}
@media screen and (min-width: 768px) {
  .monitor .planLargeName {
    line-height: calc(26 / 18);
    font-size: min(calc(100vw / var(--viewport) * 18), 18px);
  }
}
.monitor .planLargeParts {
  text-align: center;
  line-height: calc(24 / 16);
  font-size: calc(100vw / var(--viewport) * 16);
  font-weight: 500;
  color: #FFF;
}
@media screen and (min-width: 768px) {
  .monitor .planLargeParts {
    line-height: calc(17 / 12);
    font-size: min(calc(100vw / var(--viewport) * 12), 12px);
  }
}
.monitor .planLargeImage {
  position: relative;
  background: #E8E8E8;
}
.monitor .planLargeImage:not(:last-child) {
  margin-bottom: calc(100vw / var(--viewport) * 11);
}
@media screen and (min-width: 768px) {
  .monitor .planLargeImage:not(:last-child) {
    margin-bottom: min(calc(100vw / var(--viewport) * 10), 10px);
  }
}
.monitor .planLargeDiscount {
  position: absolute;
  z-index: 1;
  bottom: calc(100vw / var(--viewport) * 12);
  left: calc(100vw / var(--viewport) * 15);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #B41F20;
  border-radius: 50%;
  width: calc(100vw / var(--viewport) * 78);
  height: calc(100vw / var(--viewport) * 78);
}
@media screen and (min-width: 768px) {
  .monitor .planLargeDiscount {
    bottom: min(calc(100vw / var(--viewport) * 10), 10px);
    left: min(calc(100vw / var(--viewport) * 10), 10px);
    width: min(calc(100vw / var(--viewport) * 65), 65px);
    height: min(calc(100vw / var(--viewport) * 65), 65px);
  }
}
.monitor .planLargeDiscount .value {
  position: relative;
  bottom: calc(100vw / var(--viewport) * -2);
}
@media screen and (min-width: 768px) {
  .monitor .planLargeDiscount .value {
    bottom: max(calc(100vw / var(--viewport) * -2), -2px);
  }
}
.monitor .planLargeDiscount .number {
  line-height: 1;
  font-family: "din-2014", sans-serif;
  font-size: calc(100vw / var(--viewport) * 43);
  font-weight: 600;
  color: #FFF;
  letter-spacing: -0.05em;
}
@media screen and (min-width: 768px) {
  .monitor .planLargeDiscount .number {
    font-size: min(calc(100vw / var(--viewport) * 35), 35px);
  }
}
.monitor .planLargeDiscount .percent {
  margin-left: calc(100vw / var(--viewport) * 2);
  line-height: 1;
  font-family: "din-2014", sans-serif;
  font-size: calc(100vw / var(--viewport) * 19);
  font-weight: 600;
  color: #FFF;
}
@media screen and (min-width: 768px) {
  .monitor .planLargeDiscount .percent {
    margin-left: min(calc(100vw / var(--viewport) * 2), 2px);
    font-size: min(calc(100vw / var(--viewport) * 15), 15px);
  }
}
.monitor .planLargeDiscount .off {
  position: relative;
  top: calc(100vw / var(--viewport) * -2);
  text-align: center;
  line-height: 1;
  font-family: "din-2014", sans-serif;
  font-size: calc(100vw / var(--viewport) * 23);
  font-weight: 600;
  color: var(--gold);
}
@media screen and (min-width: 768px) {
  .monitor .planLargeDiscount .off {
    top: max(calc(100vw / var(--viewport) * -2), -2px);
    font-size: min(calc(100vw / var(--viewport) * 19), 19px);
  }
}
.monitor .planLargeOptions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(100vw / var(--viewport) * 20);
}
@media screen and (min-width: 768px) {
  .monitor .planLargeOptions {
    gap: min(calc(100vw / var(--viewport) * 22), 22px);
  }
}
.monitor .planLargeCount {
  margin-bottom: calc(100vw / var(--viewport) * 2);
  padding: calc(100vw / var(--viewport) * 10);
  text-align: center;
  line-height: calc(37 / 26);
  font-size: calc(100vw / var(--viewport) * 26);
  font-weight: 700;
  color: var(--gold);
}
@media screen and (min-width: 768px) {
  .monitor .planLargeCount {
    margin-bottom: min(calc(100vw / var(--viewport) * 1), 1px);
    padding: min(calc(100vw / var(--viewport) * 8), 8px);
    line-height: calc(26 / 18);
    font-size: min(calc(100vw / var(--viewport) * 18), 18px);
  }
}
.monitor .planLargeCount--Hige {
  background: #053650;
}
.monitor .planLargeCount--Body {
  background: #000;
}
.monitor .planLargeCourcePrice {
  display: grid;
  grid-template-columns: calc(100vw / var(--viewport) * 146) 1fr;
}
@media screen and (min-width: 768px) {
  .monitor .planLargeCourcePrice {
    grid-template-columns: min(calc(100vw / var(--viewport) * 115), 115px) 1fr;
  }
}
.monitor .planLargeCource {
  align-content: center;
  background: #000;
  padding: calc(100vw / var(--viewport) * 4);
  text-align: center;
  line-height: calc(53 / 24);
  font-size: calc(100vw / var(--viewport) * 24);
  font-weight: 600;
  color: #FFF;
}
@media screen and (min-width: 768px) {
  .monitor .planLargeCource {
    padding: min(calc(100vw / var(--viewport) * 4), 4px);
    line-height: calc(40 / 18);
    font-size: min(calc(100vw / var(--viewport) * 18), 18px);
  }
}
.monitor .planLargeCource--Hige {
  background: #053650;
}
.monitor .planLargeCource--Body {
  background: #000;
}
.monitor .planLargePrice {
  align-content: center;
  background: var(--gold);
  padding: calc(100vw / var(--viewport) * 10) calc(100vw / var(--viewport) * 15);
  text-align: right;
  line-height: 1;
  font-family: "din-2014", sans-serif;
  font-size: calc(100vw / var(--viewport) * 41);
  font-weight: 600;
  color: #FFF;
}
@media screen and (min-width: 768px) {
  .monitor .planLargePrice {
    padding: min(calc(100vw / var(--viewport) * 8), 8px) min(calc(100vw / var(--viewport) * 12), 12px);
    font-size: min(calc(100vw / var(--viewport) * 32), 32px);
  }
}


/* conditions */
.monitor .conditionsTitle {
  text-align: center;
  line-height: calc(58 / 40);
  font-size: calc(100vw / var(--viewport) * 40);
  font-weight: 700;
}
@media screen and (min-width: 768px){
  .monitor .conditionsTitle {
    line-height: calc(64 / 44);
    font-size: min(calc(100vw / var(--viewport) * 44), 44px);
  }
}
.monitor .conditionsTitle:not(:last-child) {
  margin-bottom: calc(100vw / var(--viewport) * 50);
}
@media screen and (min-width: 768px){
  .monitor .conditionsTitle:not(:last-child) {
    margin-bottom: min(calc(100vw / var(--viewport) * 40), 40px);
  }
}
.monitor .conditionsContainer {
  background: #E8E8E8;
  padding: calc(100vw / var(--viewport) * 60) calc(100vw / var(--viewport) * 35);
}
@media screen and (min-width: 768px){
  .monitor .conditionsContainer {
    padding: min(calc(100vw / var(--viewport) * 90), 90px) min(calc(100vw / var(--viewport) * 129), 129px);
  }
}
.monitor .conditionsItem {
  position: relative;
  line-height: calc(40 / 24);
  font-size: calc(100vw / var(--viewport) * 24);
}
@media screen and (min-width: 768px){
  .monitor .conditionsItem {
    line-height: calc(38 / 22);
    font-size: min(calc(100vw / var(--viewport) * 22), 22px);
  }
}
.monitor .conditionsItem::before {
  content: "・";
}
.monitor .conditionsClinics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(100vw / var(--viewport) * 18) calc(100vw / var(--viewport) * 12);
  margin-top: calc(100vw / var(--viewport) * 40);
  margin-bottom: calc(100vw / var(--viewport) * 40);
}
@media screen and (min-width: 768px){
  .monitor .conditionsClinics {
    grid-template-columns: repeat(4, 1fr);
    gap: min(calc(100vw / var(--viewport) * 23), 23px);
    margin-top: min(calc(100vw / var(--viewport) * 40), 40px);
    margin-bottom: min(calc(100vw / var(--viewport) * 40), 40px);
  }
}
.monitor .conditionsClinicsLink {
  display: block;
  background: #000;
  padding: calc(100vw / var(--viewport) * 32) calc(100vw / var(--viewport) * 10);
  text-align: center;
  line-height: calc(30 / 22);
  font-size: calc(100vw / var(--viewport) * 22);
  font-weight: 600;
  color: #FFF;
  text-decoration: none;
}
@media screen and (min-width: 768px){
  .monitor .conditionsClinicsLink {
    padding: min(calc(100vw / var(--viewport) * 32), 32px) min(calc(100vw / var(--viewport) * 10), 10px);
    font-size: min(calc(100vw / var(--viewport) * 22), 22px);
  }
}


/* attention */
.monitor .attentionTitle {
  text-align: center;
  line-height: calc(58 / 40);
  font-size: calc(100vw / var(--viewport) * 40);
  font-weight: 700;
}
@media screen and (min-width: 768px){
  .monitor .attentionTitle {
    line-height: calc(64 / 44);
    font-size: min(calc(100vw / var(--viewport) * 44), 44px);
  }
}
.monitor .attentionTitle:not(:last-child) {
  margin-bottom: calc(100vw / var(--viewport) * 50);
}
@media screen and (min-width: 768px){
  .monitor .attentionTitle:not(:last-child) {
    margin-bottom: min(calc(100vw / var(--viewport) * 40), 40px);
  }
}
.monitor .attentionContainer {
  background: #E8E8E8;
  padding: calc(100vw / var(--viewport) * 60) calc(100vw / var(--viewport) * 35);
}
@media screen and (min-width: 768px){
  .monitor .attentionContainer {
    padding: min(calc(100vw / var(--viewport) * 90), 90px) min(calc(100vw / var(--viewport) * 129), 129px);
  }
}
.monitor .attentionItem {
  position: relative;
  line-height: calc(40 / 24);
  font-size: calc(100vw / var(--viewport) * 24);
}
@media screen and (min-width: 768px){
  .monitor .attentionItem {
    line-height: calc(38 / 22);
    font-size: min(calc(100vw / var(--viewport) * 22), 22px);
  }
}
.monitor .attentionItem::before {
  content: "・";
}
@media screen and (min-width: 768px){
  .monitor .attentionItem .pcOnly {
    display: inline;
  }
}


/* flow */
.monitor .flowContainer {
  background: #E8E8E8;
  margin-left: calc(100vw / var(--viewport) * -30);
  margin-right: calc(100vw / var(--viewport) * -30);
  padding: calc(100vw / var(--viewport) * 60) calc(100vw / var(--viewport) * 60);
}
@media screen and (min-width: 768px){
  .monitor .flowContainer {
    margin-left: 0;
    margin-right: 0;
    padding: min(calc(100vw / var(--viewport) * 90), 90px) min(calc(100vw / var(--viewport) * 136), 136px);
  }
}
.monitor .flowTitle {
  text-align: center;
  line-height: calc(58 / 40);
  font-size: calc(100vw / var(--viewport) * 40);
  font-weight: 700;
}
@media screen and (min-width: 768px){
  .monitor .flowTitle {
    line-height: calc(64 / 44);
    font-size: min(calc(100vw / var(--viewport) * 44), 44px);
  }
}
.monitor .flowTitle:not(:last-child) {
  margin-bottom: calc(100vw / var(--viewport) * 62);
}
@media screen and (min-width: 768px){
  .monitor .flowTitle:not(:last-child) {
    margin-bottom: min(calc(100vw / var(--viewport) * 60), 60px);
  }
}
.monitor .flowList {
  display: flex;
  flex-direction: column;
  gap: calc(100vw / var(--viewport) * 65);
}
@media screen and (min-width: 768px){
  .monitor .flowList {
    gap: min(calc(100vw / var(--viewport) * 55), 55px);
  }
}
.monitor .flowItem {
  display: flex;
  align-items: center;
  gap: calc(100vw / var(--viewport) * 36);
}
@media screen and (min-width: 768px){
  .monitor .flowItem {
    gap: min(calc(100vw / var(--viewport) * 23), 23px);
  }
}
.monitor .flowTerm {
  position: relative;
  background: #000;
  padding: calc(100vw / var(--viewport) * 6) calc(100vw / var(--viewport) * 18) calc(100vw / var(--viewport) * 14);
  line-height: calc(49 / 34);
  font-size: calc(100vw / var(--viewport) * 34);
  font-weight: 700;
  color: #FFF;
}
@media screen and (min-width: 768px){
  .monitor .flowTerm {
    padding: min(calc(100vw / var(--viewport) * 6), 6px) min(calc(100vw / var(--viewport) * 16), 16px) min(calc(100vw / var(--viewport) * 12), 12px);
    line-height: calc(40 / 28);
    font-size: min(calc(100vw / var(--viewport) * 28), 28px);
  }
}
.monitor .flowTerm .number {
  line-height: calc(70 / 48);
  font-size: calc(100vw / var(--viewport) * 48);
}
@media screen and (min-width: 768px){
  .monitor .flowTerm .number {
    line-height: calc(58 / 40);
    font-size: min(calc(100vw / var(--viewport) * 40), 40px);
  }
}
.monitor .flowItem:not(:last-child) .flowTerm::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  width: calc(100vw / var(--viewport) * 3);
  height: 100%;
}
@media screen and (min-width: 768px){
  .monitor .flowItem:not(:last-child) .flowTerm::after {
    width: min(calc(100vw / var(--viewport) * 3), 3px);
  }
}
.monitor .flowDescription {
  line-height: calc(48 / 34);
  font-size: calc(100vw / var(--viewport) * 34);
  font-weight: 700;
}
@media screen and (min-width: 768px){
  .monitor .flowDescription {
    line-height: calc(40 / 28);
    font-size: min(calc(100vw / var(--viewport) * 28), 28px);
  }
}