@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&display=swap");
.f-gc {
  font-family: "greycliff-cf", sans-serif;
  font-weight: 400;
  font-style: normal; }

.f-zen {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal; }

@media screen and (max-width: 768px) {
  .pc {
    display: none !important; } }

@media screen and (min-width: 769px) {
  .sp {
    display: none !important; } }

.ov {
  -moz-transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  -ms-transition: opacity 0.3s;
  transition: opacity 0.3s; }
  .ov:hover {
    opacity: .8; }

html.ovh, body.ovh {
  overflow: hidden;
  scroll-behavior: auto !important; }

body {
  color: #3c3c3c;
  letter-spacing: 0.08em; }

header {
  display: flex;
  align-items: flex-start;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0; }
  header .nikonLogo {
    display: flex;
    margin: 25px;
    /*background-color: #fff;*/
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1021;
  }
    header .nikonLogo img {
      width: 68px; }
    @media screen and (max-width: 768px) {
      header .nikonLogo {
        margin: 15px; }
        header .nikonLogo img {
          width: 40px; } }
  header .navTgl {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    background-color: #fff;
    position: fixed;
    top: 0;
    right: 0;
    cursor: pointer;
    z-index: 1030; }
    @media screen and (max-width: 768px) {
      header .navTgl {
        width: 70px;
        height: 70px; } }
    header .navTgl.ex i {
      background-color: #fff; }
      header .navTgl.ex i::before {
        top: 0;
        transform: rotate(-45deg); }
      header .navTgl.ex i::after {
        bottom: 0;
        transform: rotate(45deg); }
    header .navTgl:not(.ex) + nav,
    header .navTgl:not(.ex) + .header-menu {
      pointer-events: none;
      opacity: 0; }
    header .navTgl i {
      position: relative; }
      header .navTgl i, header .navTgl i::before, header .navTgl i::after {
        width: 30px;
        height: 1px;
        background-color: #000;
        transition: .5s; }
        @media screen and (max-width: 768px) {
          header .navTgl i, header .navTgl i::before, header .navTgl i::after {
            width: 26px; } }
      header .navTgl i::before, header .navTgl i::after {
        content: '';
        position: absolute; }
      header .navTgl i::before {
        top: -10px; }
        @media screen and (max-width: 768px) {
          header .navTgl i::before {
            top: -8px; } }
      header .navTgl i::after {
        bottom: -10px; }
        @media screen and (max-width: 768px) {
          header .navTgl i::after {
            bottom: -8px; } }
            
  header nav {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1020;
    transition: .3s;
    overflow-y: scroll; }
    header nav ul {
      display: flex;
      flex-direction: column;
      gap: 25px 0;
      width: 100%;
      min-height: 700px;
      padding: 140px 30px 150px 5vw;
      background-color: #fff;
      position: absolute;
      top: 0;
      right: 0; }
      @media screen and (max-width: 768px) {
        header nav ul {
          gap: 18px 0;
          padding: 60px 5vw 180px 5vw; } }
      header nav ul > li a {
        font-size: 24px; }
        @media screen and (max-width: 768px) {
          header nav ul > li a {
            font-size: 20px; } }
      header nav ul ol {
        display: flex;
        flex-direction: column;
        gap: 18px 0;
        margin-top: 20px;
        padding: 0 0 10px 30px; }
        @media screen and (max-width: 768px) {
          header nav ul ol {
            gap: 15px 0;
            margin-top: 16px;
            padding: 0 0 10px 5vw; } }
        header nav ul ol a {
          display: block;
          font-size: 16px; }
          @media screen and (max-width: 768px) {
            header nav ul ol a {
              font-size: 15px; } }
          header nav ul ol a[href="#howto"] {
            text-indent: -1em;
            padding-left: 1em; }
          header nav ul ol a span {
            display: inline-block;
            text-indent: 0; }


.mdlWrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100dvw;
  height: 100dvh;
  padding: calc(5vh + 50px) 5%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999954; }
  .mdlWrap .mdlBg {
    width: 100%;
    height: 100%;
    background-color: rgba(46, 53, 56, 0.9);
    position: absolute;
    top: 0;
    left: 0; }
    .mdlWrap .mdlBg i {
      display: flex;
      width: 40px;
      height: 40px;
      position: absolute;
      top: 5vh;
      right: 5vw;
      z-index: 9;
      cursor: pointer; }
      @media screen and (max-width: 768px) {
        .mdlWrap .mdlBg i {
          width: 30px; } }
      .mdlWrap .mdlBg i::before, .mdlWrap .mdlBg i::after {
        content: '';
        width: 40px;
        height: 1px;
        background-color: #fff;
        position: absolute;
        top: 50%;
        left: 0; }
        @media screen and (max-width: 768px) {
          .mdlWrap .mdlBg i::before, .mdlWrap .mdlBg i::after {
            width: 30px; } }
      .mdlWrap .mdlBg i::before {
        transform: rotate(45deg); }
      .mdlWrap .mdlBg i::after {
        transform: rotate(-45deg); }
  .mdlWrap iframe {
    max-width: calc(177.777vh - 10vw - 50px);
    max-height: 56.25vw;
    aspect-ratio: 16/9;
    position: relative;
    z-index: 1; }
    @media screen and (orientation: landscape) {
      .mdlWrap iframe {
        height: 100%; } }
    @media screen and (orientation: portrait) {
      .mdlWrap iframe {
        width: 100%; } }
  .mdlWrap .cntWrap {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    max-height: calc(90vh - 100px);
    overflow-y: scroll;
    width: 90%;
    padding: 5%;
    background-color: #fff;
    position: relative;
    z-index: 1;
    scrollbar-width: none;
    -ms-overflow-style: none; }
    .mdlWrap .cntWrap::-webkit-scrollbar {
      display: none; }
    .mdlWrap .cntWrap .ttl {
      margin-bottom: clamp(0px, 4vw, 40px);
      font-size: 28px; }
      @media screen and (max-width: 768px) {
        .mdlWrap .cntWrap .ttl {
          font-size: 20px; } }
    .mdlWrap .cntWrap .cntBox {
      display: flex;
      flex-wrap: wrap;
      gap: 16px 0;
      width: 100%;
      margin-bottom: clamp(0px, 3vw, 30px); }
      @media screen and (max-width: 768px) {
        .mdlWrap .cntWrap .cntBox {
          gap: 10px 0; } }
      .mdlWrap .cntWrap .cntBox p {
        width: 100%;
        border-bottom: 1px solid #000;
        font-size: 24px; }
        @media screen and (max-width: 768px) {
          .mdlWrap .cntWrap .cntBox p {
            font-size: 18px; } }
      .mdlWrap .cntWrap .cntBox dl {
        width: 50%; }
        @media screen and (max-width: 768px) {
          .mdlWrap .cntWrap .cntBox dl {
            width: 100%; } }
        .mdlWrap .cntWrap .cntBox dl dt {
          font-weight: bold; }
          @media screen and (min-width: 769px) {
            .mdlWrap .cntWrap .cntBox dl dt {
              font-size: 20px; } }
        @media screen and (max-width: 768px) {
          .mdlWrap .cntWrap .cntBox dl dd {
            font-size: 14px; } }
    .mdlWrap .cntWrap p.cookie {
      font-size: 14px; }

footer {
  width: 100%;
  background-color: #000; }
  footer .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1500px;
    width: 90%;
    min-height: 100px;
    margin: 0 auto;
    padding: 28px 0; }
    @media screen and (max-width: 768px) {
      footer .inner {
        flex-direction: column;
        align-items: center;
        gap: 34px 0;
        padding: 36px 0; } }
    footer .inner a, footer .inner small {
      color: #fff; }
    footer .inner nav {
      display: flex;
      align-items: center;
      gap: 42px 75px; }
      @media screen and (max-width: 768px) {
        footer .inner nav {
          flex-direction: column; } }
      footer .inner nav .sns {
        display: flex;
        align-items: center;
        gap: 0 10px; }
      footer .inner nav span.browser {
        color: #fff;
        font-size: 14px;
        cursor: pointer; }
        footer .inner nav span.browser:not(:hover) {
          text-decoration: underline; }
    footer .inner small {
      font-size: 12px; }
      @media screen and (max-width: 500px) {
        footer .inner small {
          font-size: 10px; } }

/*# sourceMappingURL=common_style.css.map */