@charset "shift_jis";

#landing {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0;
  background: transparent;
}


#nodoraku-pc {
  --ndr-blue: #004cc7;
  --ndr-sky: #00a6d8;
  --ndr-aqua: #83dfd2;
  --ndr-ink: #111;
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
  overflow: hidden;
  background: transparent;
  color: var(--ndr-ink);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  font-feature-settings: "palt";
  line-height: 1.8;
}

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

:where(#nodoraku-pc) :where(h1, h2, h3, p, figure, ul) {
  margin: 0;
  padding: 0;
}

:where(#nodoraku-pc) :where(ul) {
  list-style: none;
}

#nodoraku-pc img {
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.ndr-pc-fv {
  position: relative;
  z-index: 1;
  background: #fff;
}

.ndr-pc-fv img,
.ndr-pc-medical img {
  width: 100%;
}

.ndr-pc-upper-bg {
  position: relative;
  z-index: 2;
  margin-top: -70px;
  background: url("../img/back-1@2x.png") center top / 1090px auto no-repeat;
}

.ndr-pc-bottom-bg {
  padding-top: 30px;
  background: url("../img/back2@2x.png") center top / 1900px 100% no-repeat;
}

.ndr-pc-main-bg {
  background: transparent;
}

.ndr-pc-worry {
  position: relative;
  height: auto;
  padding: 0;
  overflow: hidden;
  color: var(--ndr-blue);
}

.ndr-pc-worry::before {
  display: none;
}

.ndr-pc-worry h2 {
  position: relative;
  z-index: 1;
  margin-bottom: 34px;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0;
}

.ndr-pc-worry img {
  position: relative;
  z-index: 1;
  width: min(1089px, 100%);
}

.ndr-pc-worry__title,
.ndr-pc-worry__image {
  position: absolute !important;
  z-index: 1;
  left: 50%;
  margin: 0 !important;
  transform: translateX(-50%);
}

.ndr-pc-worry__bg {
  width: 100% !important;
  display: block !important;
  margin-top: 60px;
}

.ndr-pc-worry__title {
  top: 20%;
  width: 50% !important;
  max-width: none !important;
}

.ndr-pc-worry__image {
  top: 35%;
  width: 65% !important;
}

.ndr-pc-intro {
  padding: 0;
  background: transparent;
  text-align: center;
}

.ndr-pc-intro img {
  margin: 30px auto 0;
}

.ndr-pc-intro__lead {
  margin-bottom: 16px;
  color: #004cc7;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.4;
}

.ndr-pc-intro__product {
  width: 456px;
  margin: 0 auto 34px;
}

.ndr-pc-intro__visual {
  width: min(1065px, 83.203125vw);
  margin: auto 0;
}

#landing .hacobune-vjs-big-play-button{
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    font-size: 3em;
}

#landing .hacobune-vjs-big-play-button .hacobune-vjs-icon-placeholder:before{
    font-size: 3em;
}

.ndr-pc-points .ndr-pc-points-heading {
  width: min(694px, calc(100% - 48px));
  margin: 0 auto 64px;
  padding: 0;
  color: #111;
  font-size: 45px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  background: transparent;
}

.ndr-pc-points-heading span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 694px;
  max-width: 100%;
  height: 92px;
  margin: 0 auto 14px;
  padding: 0;
  border-radius: 8px;
  color: #fff;
  font-size: 45px;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--ndr-sky) 0%, var(--ndr-blue) 100%);
}

.ndr-pc-points {
  position: relative;
  overflow: hidden;
  padding: 0 0 98px;
  background-image:
    url("../img/movie-pic@2x.png"),
    url("../img/movie-pic@2x.png"),
    url("../img/contents03-point1-syabon@2x.png"),
    url("../img/contents03-syabon@2x.png"),
    url("../img/contents03-syabon@2x.png");
  background-repeat: no-repeat;
  background-position:
    center -175px,
    180px 232px,
    center 410px,
    center 1570px,
    center 2830px;
  background-size:
    880px auto,
    1200px auto,
    1065px auto,
    1070px auto,
    1070px auto;
}

.ndr-pc-points::before,
.ndr-pc-points::after {
  display: none;
}

.ndr-pc-points::before {
  top: 190px;
  left: 8%;
  width: 48px;
  height: 48px;
  box-shadow:
    50px -115px 0 -21px rgba(255, 255, 255, .62),
    -26px 120px 0 -16px rgba(255, 255, 255, .62),
    -14px 714px 0 -7px rgba(255, 255, 255, .54),
    26px 742px 0 -14px rgba(255, 255, 255, .62);
}

.ndr-pc-points::after {
  top: 246px;
  right: 8%;
  width: 46px;
  height: 46px;
  box-shadow:
    -18px 64px 0 -16px rgba(255, 255, 255, .62),
    -10px 430px 0 -11px rgba(255, 255, 255, .58),
    -12px 850px 0 -8px rgba(255, 255, 255, .5);
}

.ndr-pc-point {
  position: relative;
  z-index: 1;
  width: 970px;
  max-width: calc(100% - 310px);
  margin: 0 auto;
  padding: 0;
  background: transparent;
}

.ndr-pc-point + .ndr-pc-point {
  margin-top: 5px;
}

.ndr-pc-point::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ndr-pc-point--1 {
  min-height: 0;
  aspect-ratio: 1940 / 1785;
}

.ndr-pc-point--1::before {
  background-image: url("../img/contents03-point1-back@2x.png");
}

.ndr-pc-point--2 {
  min-height: 0;
  aspect-ratio: 1940 / 1631;
}

.ndr-pc-point--2::before {
  background-image: url("../img/contents03-point2-back@2x.png");
}

.ndr-pc-point--3 {
  min-height: 0;
  aspect-ratio: 1940 / 1717;
}

.ndr-pc-point--3::before {
  background-image: url("../img/contents03-point3-back@2x.png");
}

.ndr-pc-point--4 {
  --point4-subimage-right: 51.4%;
  --point4-text-gap: 30px;
  --point4-text-right: 9.5%;
  min-height: 0;
  aspect-ratio: 1940 / 2099;
}

.ndr-pc-point--4::before {
  background-image: url("../img/contents03-point4-back@2x.png");
}

.ndr-pc-point__title {
  position: absolute;
  z-index: 2;
}

.ndr-pc-point__title img {
  width: 100%;
  max-width: none;
}

.ndr-pc-point__title--1 {
  top: 10.3%;
  left: 18%;
  width: 24.7%;
}

.ndr-pc-point__title--2 {
  top: calc(8.9% + 30px);
  left: calc(20.5% - 55px);
  width: 82%;
}

.ndr-pc-point__title--2 img {
  width: 30.5%;
  transform: translateY(5px);
}

.ndr-pc-point__title--3 {
  top: calc(10.1% + 10px);
  left: 18%;
  width: 25%;
}

.ndr-pc-point__title--4 {
  top: 9.3%;
  left: 18%;
  width: 25%;
}

.ndr-pc-point h3 {
  position: absolute;
  color: #111;
  font-size: clamp(24px, 2.35vw, 26px);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: .02em;
  white-space: nowrap;
  font-feature-settings: normal;
}

.ndr-pc-point__title--1 h3,
.ndr-pc-point__title--3 h3,
.ndr-pc-point__title--4 h3 {
  top: 48%;
  left: 44%;
}

.ndr-pc-point__title--1 h3 {
  top: calc(48% + 15px);
  left: 36%;
  font-size: 26px;
}

.ndr-pc-point__title--3 h3 {
  top: calc(48% + 15px);
  font-size: 26px;
}

.ndr-pc-point__title--4 h3 {
  top: calc(48% + 12px);
  font-size: 26px;

}

.ndr-pc-point__title--2 h3 {
  top: calc(38% + 15px);
  left: calc(12.7% - 5px);
  line-height: 1.22;
}

.ndr-pc-point__image {
  position: absolute;
  left: 50%;
  display: block;
  max-width: none;
  transform: translateX(-50%);
}

.ndr-pc-point--1 .ndr-pc-point__image {
  top: 26%;
  width: 62.7%;
}

.ndr-pc-point2-visual {
  position: absolute;
  top: calc(34.1% + 30px);
  left: 50%;
  display: block;
  width: 70%;
  max-width: none;
  transform: translateX(-50%);
}

.ndr-pc-point--3 .ndr-pc-point__image--wide {
  top: calc(25.2% + 15px);
  width: 69.1%;
}

.ndr-pc-point--4 .ndr-pc-point__image--wide {
  top: 22.2%;
  width: 69.9%;
}

.ndr-pc-point p {
  position: absolute;
  color: #111;
  font-size: clamp(12px, 1.18vw, 15px);
  font-weight: 700;
  line-height: 1.85;
  text-align: center;
  letter-spacing: .12em;
  font-feature-settings: normal;
}

.ndr-pc-point p strong {
  font-weight: 900;
  text-decoration: none;
  background-image: linear-gradient(90deg, #0058ba 0%, #cff5ee 100%);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  padding-bottom: 5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.ndr-pc-point--1 p {
  top: 74%;
  left: 50%;
  width: 72%;
  font-size: 14px;
  font-weight: 400;
  transform: translateX(-50%);
}

.ndr-pc-point--1 p strong {
  font-weight: 950;
}

.ndr-pc-point--2 p {
  top: calc(69.2% + 30px);
  left: 50%;
  width: 78%;
  font-size: 14px;
  font-weight: 400;
  transform: translateX(-50%);
}

.ndr-pc-point--2 .ndr-pc-point__em {
  font-weight: 950;
  text-decoration: none;
  background-image: linear-gradient(90deg, #0058ba 0%, #cff5ee 100%);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  padding-bottom: 5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.ndr-pc-point--3 p {
  top: calc(64% - 15px);
  left: 15.5%;
  width: 230px;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}

.ndr-pc-point--3 .ndr-pc-point__justify-line {
  display: inline-block;
  width: 230px;
  text-align: justify;
  text-align-last: justify;
}

.ndr-pc-point--4 p {
  top: 64.5%;
  left:  calc(var(--point4-subimage-right) + var(--point4-text-gap));
  right: var(--point4-text-right);
  width: auto;
  min-width: 240px;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  line-height: 1.9;
}

.ndr-pc-mode {
  display: grid;
  position: relative;
  grid-template-columns: 176px 1fr;
  gap: 26px;
  align-items: center;
  width: min(560px, 100%);
  margin: 22px auto 20px;
}

.ndr-pc-mode__device {
  display: block;
  width: 174px;
  height: 132px;
  margin: 0 auto;
  background-image: url("../img/contents03-point3@2x.png");
  background-repeat: no-repeat;
  background-size: 477px auto;
  background-position: -263px -160px;
}

.ndr-pc-mode::before,
.ndr-pc-mode::after {
  content: "";
  position: absolute;
  left: 166px;
  width: 120px;
  height: 4px;
  background: var(--ndr-blue);
  transform-origin: left center;
}

.ndr-pc-mode::before {
  top: 50px;
  transform: rotate(-43deg);
}

.ndr-pc-mode::after {
  top: 127px;
  transform: rotate(43deg);
}

.ndr-pc-mode ul {
  display: grid;
  gap: 3px;
  color: #111;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.ndr-pc-mode li {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 7px;
}

.ndr-pc-mode strong {
  font-weight: 900;
}

.ndr-pc-attachment {
  background: #fff;
}

.ndr-pc-attachment h2 {
  --ndr-attachment-gradient: linear-gradient(90deg, var(--ndr-blue) 0%, var(--ndr-sky) 100%);
  position: relative;
  top: -10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 180px;
  padding: 0 24px;
  color: #fff;
  font-weight: 900;
  line-height: 1.22;
  text-align: center;
  background: var(--ndr-attachment-gradient);
}

.ndr-pc-attachment h2::after {
  content: "";
  position: absolute;
  bottom: -33px;
  left: 50%;
  width: 68px;
  height: 34px;
  transform: translateX(-50%);
  background: var(--ndr-attachment-gradient);
  background-size: min(100vw, 1280px) 100%;
  background-position: center top;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.ndr-pc-attachment__headline-main,
.ndr-pc-attachment__headline-sub {
  display: block;
}

.ndr-pc-attachment__headline-main {
  font-size: 34px;
}

.ndr-pc-attachment__headline-sub {
  position: relative;
  top: 5px;
  font-size: 31px;
}

.ndr-pc-attachment__item {
  position: relative;
  width: min(1017px, 100%);
  margin: 0 auto;
  padding-top: 88px;
}

.ndr-pc-attachment__item--mask {
  width: min(972px, 100%);
  padding-top: 46px;
}

.ndr-pc-attachment__item img {
  width: 100%;
}

.ndr-pc-attachment__item:not(.ndr-pc-attachment__item--mask) > img {
  position: relative;
  left: min(0px, calc((1017px - min(100vw, 1280px)) / 2));
}

.ndr-pc-attachment__item--mask > img {
  position: relative;
  left: max(0px, calc((min(100vw, 1280px) - 972px) / 2));
}

.ndr-pc-attachment__item figcaption {
  position: absolute;
  top: 25.2%;
  right: 6.7%;
  width: 350px;
  margin: 0;
  padding: 0;
  color: #111;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: .12em;
  text-shadow:
    2px 0 0 #fff,
    -2px 0 0 #fff,
    0 2px 0 #fff,
    0 -2px 0 #fff,
    1.5px 1.5px 0 #fff,
    -1.5px 1.5px 0 #fff,
    1.5px -1.5px 0 #fff,
    -1.5px -1.5px 0 #fff;
  background: transparent;
}

.ndr-pc-attachment__item:not(.ndr-pc-attachment__item--mask) figcaption {
  transform: translate(15px, -40px);
}

.ndr-pc-attachment__item--mask figcaption {
  top: 20.5%;
  right: auto;
  left: -3.8%;
  width: 390px;
  transform: translate(55px, -40px);
}

.ndr-pc-medical {
  margin-top: 70px;
  background: #111;
}

.ndr-pc-set,
.ndr-pc-spec {
  padding: 44px 24px 30px;
  background: transparent;
}

.ndr-pc-set {
  position: relative;
  top: -15px;
}

.ndr-pc-spec {
  padding-bottom: 78px;
}

.ndr-pc-set h2,
.ndr-pc-spec h2 {
  width: min(975px, 100%);
  margin: 0 auto 25px;
  padding: 12px 18px 13px;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
  background: var(--ndr-blue);
}

.ndr-pc-set img {
  width: min(752px, 100%);
  margin: 0 auto;
}

.ndr-pc-spec table {
  width: min(975px, 100%);
  margin: 0 auto;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
  color: #111;
  font-size: 13px;
  line-height: 1.6;
}

.ndr-pc-spec th,
.ndr-pc-spec td {
  padding: 10px 14px;
  border: 1px solid #8d8d8d;
  vertical-align: middle;
}

.ndr-pc-spec th {
  width: 166px;
  color: #fff;
  font-weight: 900;
  text-align: left;
  background: var(--ndr-blue);
}

@media (max-width: 767px) {
  #nodoraku-pc {
    max-width: none;
  }

  .ndr-pc-worry {
    padding: 50px 14px 48px;
  }

  .ndr-pc-worry::before {
    height: 42px;
  }

  .ndr-pc-worry h2 {
    margin-bottom: 22px;
    font-size: 22px;
  }

  .ndr-pc-intro {
    padding: 40px 14px 0;
  }

  .ndr-pc-intro__product {
    width: min(330px, 88vw);
  }

  .ndr-pc-points-heading {
    width: 300px;
    margin: 0 auto 16px;
    font-size: 22px;
    line-height: 1.3;
  }

  .ndr-pc-points-heading span {
    width: 278px;
    margin-bottom: 8px;
    padding: 7px 8px 8px;
    border-radius: 3px;
    font-size: 18px;
    line-height: 1.12;
  }

  .ndr-pc-points {
    padding: 20px 0 43px;
  }

  .ndr-pc-point {
    width: 390px;
    max-width: calc(100% - 98px);
    margin-bottom: 28px;
    padding: 0;
  }

  .ndr-pc-point--1 {
    margin-bottom: 8px;
  }

  .ndr-pc-point--2 {
    margin-bottom: 15px;
  }

  .ndr-pc-point--3 {
    margin-bottom: 38px;
  }

  .ndr-pc-point h3 {
    font-size: clamp(12px, 2.9vw, 15px);
    line-height: 1.3;
  }

  .ndr-pc-point--2 h3 {
    line-height: 1.35;
  }

  .ndr-pc-point p {
    font-size: 7px;
    line-height: 1.85;
    letter-spacing: .05em;
  }

  .ndr-pc-point--2 p {
    font-size: 7px;
    line-height: 1.9;
  }

  .ndr-pc-mode {
    grid-template-columns: 96px 1fr;
    gap: 38px;
    width: 300px;
    margin: 18px auto 12px;
  }

  .ndr-pc-mode::before,
  .ndr-pc-mode::after {
    content: "";
    position: absolute;
    left: 91px;
    width: 61px;
    height: 2px;
    background: var(--ndr-blue);
    transform-origin: left center;
  }

  .ndr-pc-mode::before {
    top: 30px;
    transform: rotate(-43deg);
  }

  .ndr-pc-mode::after {
    top: 72px;
    transform: rotate(43deg);
  }

  .ndr-pc-mode__device {
    width: 96px;
    height: 76px;
    background-size: 263px auto;
    background-position: -145px -88px;
  }

  .ndr-pc-mode ul {
    gap: 2px;
    font-size: 5.4px;
    line-height: 1.35;
  }

  .ndr-pc-mode li {
    grid-template-columns: 48px 1fr;
    gap: 4px;
  }

  .ndr-pc-attachment h2 {
    min-height: 150px;
  }

  .ndr-pc-attachment__headline-main {
    font-size: 27px;
  }

  .ndr-pc-attachment__headline-sub {
    font-size: 24px;
  }

  .ndr-pc-attachment__item {
    padding-top: 48px;
  }

  .ndr-pc-attachment__item figcaption {
    margin-top: -18px;
    font-size: 14px;
  }

  .ndr-pc-set,
  .ndr-pc-spec {
    padding-right: 14px;
    padding-left: 14px;
  }

  .ndr-pc-spec table {
    table-layout: auto;
    font-size: 12px;
  }

  .ndr-pc-spec th,
  .ndr-pc-spec td {
    display: block;
    width: 100%;
    padding: 9px 11px;
  }
}