@charset "utf-8";
:root {
  --canvas-width: 100vw;
}
.for-pc {
  display: block;
}
.for-sp {
  display: none;
}
.kv {
  width: var(--canvas-width);
}
.navi {
  --bottom-navi: 100;
  bottom: calc(var(--bottom-navi) / 3400 * var(--canvas-width));
}
#navi-information {
  --offset-navi-information: (-900);
  --width-navi-information: 166;
  left: calc(50% + var(--offset-navi-information) / 3400 * var(--canvas-width));
  width: calc(var(--width-navi-information) / 3400 * var(--canvas-width));
}
#navi-kit {
  --offset-navi-kit: (-550);
  --width-navi-kit: 193;
  left: calc(50% + var(--offset-navi-kit) / 3400 * var(--canvas-width));
  width: calc(var(--width-navi-kit) / 3400 * var(--canvas-width));
}
#navi-blocka {
  --offset-navi-blocka: (-180);
  --width-navi-blocka: 123;
  left: calc(50% + var(--offset-navi-blocka) / 3400 * var(--canvas-width));
  width: calc(var(--width-navi-blocka) / 3400 * var(--canvas-width));
}
#navi-notice {
  --offset-navi-notice: 120;
  --width-navi-notice: 166;
  left: calc(50% + var(--offset-navi-notice) / 3400 * var(--canvas-width));
  width: calc(var(--width-navi-notice) / 3400 * var(--canvas-width));
}
#navi-faq {
  --offset-navi-faq: 470;
  --width-navi-faq: 96;
  left: calc(50% + var(--offset-navi-faq) / 3400 * var(--canvas-width));
  width: calc(var(--width-navi-faq) / 3400 * var(--canvas-width));
}
#navi-inquiry {
  --offset-navi-inquiry: 740;
  --width-navi-inquiry: 165;
  left: calc(50% + var(--offset-navi-inquiry) / 3400 * var(--canvas-width));
  width: calc(var(--width-navi-inquiry) / 3400 * var(--canvas-width));
}
.prologue {
  width: var(--canvas-width);
}
.movie {
  width: var(--canvas-width);
}
.moviebox {
  --top-movie: 151;
  --width-movie: 1920;
  top: calc(var(--top-movie) / 3400 * var(--canvas-width));
  width: calc(var(--width-movie) / 3400 * var(--canvas-width));
}
.video-btn {
  width: calc(162 / 3400 * var(--canvas-width));
  height: calc(162 / 3400 * var(--canvas-width));
}

.information {
  width: var(--canvas-width);
}
.button-osc {
  --top-button-osc: 1390;
  --offset-button-osc: (-370);
  --width-button-osc: 636;
  top: calc(var(--top-button-osc) / 3400 * var(--canvas-width));
  left: calc(50% + var(--offset-button-osc) / 3400 * var(--canvas-width));
  width: calc(var(--width-button-osc) / 3400 * var(--canvas-width));
}
.kit {
  width: var(--canvas-width);
}
.button-tabiwa {
  --top-button-tabiwa: 2460;
  --offset-button-tabiwa: 80;
  --width-button-tabiwa: 814;
  top: calc(var(--top-button-tabiwa) / 3400 * var(--canvas-width));
  right: calc(50% + var(--offset-button-tabiwa) / 3400 * var(--canvas-width));
  width: calc(var(--width-button-tabiwa) / 3400 * var(--canvas-width));
}
.button-eplus {
  --top-button-eplus: 2460;
  --offset-button-eplus: 80;
  --width-button-eplus: 814;
  top: calc(var(--top-button-eplus) / 3400 * var(--canvas-width));
  left: calc(50% + var(--offset-button-eplus) / 3400 * var(--canvas-width));
  width: calc(var(--width-button-eplus) / 3400 * var(--canvas-width));
}
.button-detail1 {
  --bottom-button-detail1: 1910;
  --offset-button-detail1: (-550);
  --width-button-detail1: 1100;
  bottom: calc(var(--bottom-button-detail1) / 3400 * var(--canvas-width));
  left: calc(50% + var(--offset-button-detail1) / 3400 * var(--canvas-width));
  width: calc(var(--width-button-detail1) / 3400 * var(--canvas-width));
}
.button-detail2 {
  --bottom-button-detail2: 1450;
  --offset-button-detail2: (-550);
  --width-button-detail2: 1100;
  bottom: calc(var(--bottom-button-detail2) / 3400 * var(--canvas-width));
  left: calc(50% + var(--offset-button-detail2) / 3400 * var(--canvas-width));
  width: calc(var(--width-button-detail2) / 3400 * var(--canvas-width));
}
.button-detail3 {
  --bottom-button-detail3: 1090;
  --offset-button-detail3: (-550);
  --width-button-detail3: 1100;
  bottom: calc(var(--bottom-button-detail3) / 3400 * var(--canvas-width));
  left: calc(50% + var(--offset-button-detail3) / 3400 * var(--canvas-width));
  width: calc(var(--width-button-detail3) / 3400 * var(--canvas-width));
}
.button-detail4 {
  --bottom-button-detail4: 480;
  --offset-button-detail4: (-550);
  --width-button-detail4: 1100;
  bottom: calc(var(--bottom-button-detail4) / 3400 * var(--canvas-width));
  left: calc(50% + var(--offset-button-detail4) / 3400 * var(--canvas-width));
  width: calc(var(--width-button-detail4) / 3400 * var(--canvas-width));
}
.howto {
  width: var(--canvas-width);
}
.agreement {
  width: var(--canvas-width);
}
.terms {
  --top-terms: 220;
  --width-terms: 1850;
  --height-terms: 600;
  --radius-terms: 50;
  --border-terms: 10;
  top: calc(var(--top-terms) / 3400 * var(--canvas-width));
  width: calc(var(--width-terms) / 3400 * var(--canvas-width));
  height: calc(var(--height-terms) / 3400 * var(--canvas-width));
  border-radius: calc(var(--radius-terms) / 3400 * var(--canvas-width));
  border: #153269 calc(var(--border-terms) / 3400 * var(--canvas-width)) solid;
}
.text-terms {
  --font-text-terms: 36;
  --width-text-terms: 1950;
  --height-text-terms: 500;
  font-size: calc(var(--font-text-terms) / 3400 * var(--canvas-width));
  width: calc(var(--width-text-terms) / 3400 * var(--canvas-width));
  height: calc(var(--height-text-terms) / 3400 * var(--canvas-width));
}
.notice {
  width: var(--canvas-width);
}
.faq {
  width: var(--canvas-width);
}
.whole {
  --top-whole: 500;
  top: calc(var(--top-whole) / 3400 * var(--canvas-width));
}
.each {
  --mb-each: 30;
  margin-bottom: calc(var(--mb-each) / 3400 * var(--canvas-width));
}
.question {
  --width-question: 1992;
  --mb-question: 30;
  width: calc(var(--width-question) / 3400 * var(--canvas-width));
  margin-bottom: calc(var(--mb-question) / 3400 * var(--canvas-width));
}
.button-faq {
  --top-button-faq: 30;
  --offset-button-faq: 860;
  --width-button-faq: 60;
  top: calc(var(--top-button-faq) / 3400 * var(--canvas-width));
  left: calc(50% + var(--offset-button-faq) / 3400 * var(--canvas-width));
  width: calc(var(--width-button-faq) / 3400 * var(--canvas-width));
  z-index: 2;
}
.answer {
  --width-answer: 1960;
  --mb-answer: 50;
  width: calc(var(--width-answer) / 3400 * var(--canvas-width));
  margin-bottom: calc(var(--mb-answer) / 3400 * var(--canvas-width));
  border: solid red 0;
}
#frame-blockb {
  position: relative;
}
#frame-inquiry {
  --height-frame-inquiry: 4102;
}
.inquiry {
  width: var(--canvas-width);
}
.inquiry-tel {
  --top-inquiry-tel: 1260;
  --offset-inquiry-tel: -142;
  --width-inquiry-tel: 284;
  right: calc(50% + var(--offset-inquiry-tel) / 3400 * var(--canvas-width));
  top: calc(var(--top-inquiry-tel) / 3400 * var(--canvas-width));
  width: calc(var(--width-inquiry-tel) / 3400 * var(--canvas-width));
}
.inquiry-tabiwatel {
  --top-inquiry-tabiwatel: 1170;
  --offset-inquiry-tabiwatel: 500;
  --width-inquiry-tabiwatel: 271;
  right: calc(50% + var(--offset-inquiry-tabiwatel) / 3400 * var(--canvas-width));
  top: calc(var(--top-inquiry-tabiwatel) / 3400 * var(--canvas-width));
  width: calc(var(--width-inquiry-tabiwatel) / 3400 * var(--canvas-width));
}
.inquiry-epluslink {
  --top-inquiry-epluslink: 1450;
  --offset-inquiry-epluslink: -815;
  --width-inquiry-epluslink: 364;
  left: calc(50% + var(--offset-inquiry-epluslink) / 3400 * var(--canvas-width));
  top: calc(var(--top-inquiry-epluslink) / 3400 * var(--canvas-width));
  width: calc(var(--width-inquiry-epluslink) / 3400 * var(--canvas-width));
}
.inquiry-mail {
  --top-inquiry-mail: 1260;
  --offset-inquiry-mail: 410;
  --width-inquiry-mail: 448;
  left: calc(50% + var(--offset-inquiry-mail) / 3400 * var(--canvas-width));
  top: calc(var(--top-inquiry-mail) / 3400 * var(--canvas-width));
  width: calc(var(--width-inquiry-mail) / 3400 * var(--canvas-width));
}
.frame-about {
  display: none;
}
.frame-footer {
  --top-frame-footer: 3930;
  position: absolute;
  top: calc(var(--top-frame-footer) / 3400 * var(--canvas-width));
  left: 0;
  width: var(--canvas-width);
}
.footer {
  width: 0;
  height: 0;
}
.logos {
  z-index: 2;
}
.logo-osc {
  --bottom-logo-osc: 60;
  --offset-logo-osc: 100;
  --width-logo-osc: 198;
  right: calc(50% + var(--offset-logo-osc) / 3400 * var(--canvas-width));
  bottom: calc(var(--bottom-logo-osc) / 3400 * var(--canvas-width));
  width: calc(var(--width-logo-osc) / 3400 * var(--canvas-width));
}
.logo-yodaka {
  --bottom-logo-yodaka: 70;
  --offset-logo-yodaka: 310;
  --width-logo-yodaka: 320;
  left: calc(50% + var(--offset-logo-yodaka) / 3400 * var(--canvas-width));
  bottom: calc(var(--bottom-logo-yodaka) / 3400 * var(--canvas-width));
  width: calc(var(--width-logo-yodaka) / 3400 * var(--canvas-width));
}
#button-top {
  --right-button-top: 30;
  --bottom-button-top: 100;
  --width-button-top: 90;
  bottom: calc(var(--bottom-button-top) / 3400 * var(--canvas-width));
  right: calc(var(--right-button-top) / 3400 * var(--canvas-width));
  width: calc(var(--width-button-top) / 3400 * var(--canvas-width));
}