@charset "UTF-8";
/* [ 株式会社ナビ ] : top.css */
/* [ 株式会社ナビ ] : setting.scss */
/* +++ [ 幅設定 ] +++ */
/* $max_width: 1280px;
$inner_width: 1280px;
 */
/* +++ [ 色 ] ++++ */
/* ナビっぽい青 */
/* +++ [ グラデーション ] ++++ */
/* +++ [ グリッド ] +++ */
.wrap.bg.fixed {
  background-attachment: fixed !important; }

#header {
  display: none; }

/*==================================================*
 *  [ Main Image ]
 *==================================================*/
#main {
  position: relative;
  height: 560px;
  background: none; }
  #main .section {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    z-index: 10; }
    #main .section h1 {
      line-height: 2; }
  #main .slider {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 560px;
    z-index: -1; }
    #main .slider .item {
      width: 100%;
      height: 560px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover; }

@media screen and (max-width: 768px) {
  #main {
    height: 340px; }
    #main .section {
      padding: 0 5%; }
      #main .section .logo {
        width: 230px; }
      #main .section h1 {
        line-height: 1.4; }
    #main .slider {
      height: 340px; }
      #main .slider .item {
        height: 340px; }
    #main .btn.nav {
      position: absolute;
      top: 0;
      right: 0;
      width: 70px;
      height: 60px;
      margin: 0;
      z-index: 200; }
      #main .btn.nav::before, #main .btn.nav::after {
        position: absolute;
        left: 20px;
        width: 30px;
        height: 12px;
        content: ""; }
      #main .btn.nav::before {
        top: 19px;
        border-top: 2px solid #fff;
        border-bottom: 2px solid #fff; }
      #main .btn.nav::after {
        bottom: 19px;
        border-bottom: 2px solid #fff; }

  .open #main .btn.nav {
    position: fixed; }
    .open #main .btn.nav::before, .open #main .btn.nav::after {
      height: 2px;
      border-top: none; }
    .open #main .btn.nav::before {
      top: 29px;
      transform: rotate(45deg); }
    .open #main .btn.nav::after {
      bottom: 29px;
      transform: rotate(-45deg); } }
/* */
/*==================================================*
 *  [ Nav ]
 *==================================================*/
#nav {
  background: #000; }
  #nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    max-width: 1280px;
    margin: 0 auto;
    font-size: 2rem;
    line-height: 1.2; }
    #nav ul li {
      display: flex;
      width: 16.66%; }
    #nav ul a {
      display: flex;
      align-items: center;
      width: 100%;
      height: 82px;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      color: #fff; }
      #nav ul a > * {
        width: 100%; }
      #nav ul a:hover {
        border-bottom-color: #0068b7;
        font-weight: bold; }

@media screen and (max-width: 768px) {
  #nav {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    padding: 60px 5%;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    opacity: 0;
    z-index: -100;
    overflow-y: scroll;
    -webkit-transition: all ease .5s;
    /* Safari */
    transition: all ease .5s; }
    #nav ul {
      display: block;
      padding: 20px 0;
      font-size: 1.6rem;
      border-bottom: 1px solid #666; }
      #nav ul li {
        width: 100%; }
      #nav ul a {
        display: inline-block;
        height: auto;
        padding: 10px;
        border: none; }
        #nav ul a:hover {
          font-weight: normal; }

  .open #nav {
    opacity: 1;
    z-index: 100; } }
/* */
/*==================================================*
 *  [ NEWS ]
 *==================================================*/
#news {
  margin-top: 0;
  /* [ リスト ] */
  /* [ テキスト ] */ }
  #news > section {
    margin-top: 40px;
    margin-bottom: 40px; }
  #news ul {
    display: inline-block;
    list-style: none;
    text-align: left; }
    #news ul li > * {
      display: flex;
      color: #000; }
      #news ul li > * time {
        width: 8em;
        font-weight: bold; }
      #news ul li > * span {
        width: calc(100% - 8em); }
    #news ul li a span {
      text-decoration: underline; }
    #news ul li a:hover span, #news ul li a:active span {
      text-decoration: none; }
    #news ul li + li {
      margin-top: 10px; }
  #news dl {
    margin: 30px 0; }
    #news dl dt {
      font-size: calc(1em + 0.2rem);
      font-weight: bold; }
    #news dl dd {
      margin-top: 10px; }
    #news dl dd + dt {
      margin-top: 30px; }
  #news ul + dl::before {
    display: block;
    margin-bottom: 20px;
    color: #d2d2d2;
    content: "●　●　●"; }

/*==================================================*
 *  [ スライダー ]
 *==================================================*/
@media print, screen and (min-width: 768px) {
  .bn-pc {
    display: inline !important; }

  .bn-sp {
    display: none !important; }

  .swiper {
    width: 750px; }

  .swiper-wrapper {
    height: auto !important; }

  .xo-slider-template-default .swiper-slide img {
    width: 600px !important;
    height: 192px !important; } }
@media screen and (max-width: 767px) {
  .bn-pc {
    display: none !important; }

  .bn-sp {
    display: inline; }

  .swiper {
    width: 100% !important; }

  .swiper-wrapper {
    height: auto !important; }

  swiper-container {
    width: 100% !important; } }
.xo-slider-template-simple .swiper-container {
  padding-bottom: 40px; }

.xo-slider-template-simple .swiper-button-prev,
.xo-slider-template-simple .swiper-button-next {
  top: auto;
  bottom: 0; }

/*==================================================*
 *  [ 事業内容 ]
 *==================================================*/
#business .link a {
  display: block;
  position: relative;
  padding-bottom: 100%;
  background-position: center center;
  background-size: 100% 100%;
  color: #fff; }
  #business .link a:hover, #business .link a:active {
    background-size: 120% 120%; }
  #business .link a[href="#web"] {
    background-image: url(../img/business_web.jpg); }
  #business .link a[href="#sptool"] {
    background-image: url(../img/business_sptool.jpg); }
  #business .link a[href="#video"] {
    background-image: url(../img/business_video.jpg); }
  #business .link a[href="#consultant"] {
    background-image: url(../img/business_consultant.jpg); }
  #business .link a::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    content: ""; }
  #business .link a > * {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    transform: translateY(-50%); }

@media screen and (max-width: 768px) {
  #business .link {
    margin: 0 -5.5%; }
    #business .link li + li {
      margin-top: 10px; }
    #business .link a {
      padding-bottom: 24%;
      background-size: 100% auto; }
      #business .link a:hover, #business .link a:active {
        background-size: 120% auto; } }
/* */
/*==================================================*
 *  [ WEB企画・制作・運用 ]
 *==================================================*/
#web .merit section > img {
  padding: 0 2.5%; }
#web .merit section + section {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #000; }
#web .works > *:nth-child(3) ~ * {
  margin-top: 40px; }
#web .works > *:nth-child(3n+1) {
  margin-left: 0; }
#web .works a {
  color: #000; }
  #web .works a b {
    display: block;
    margin-bottom: 10px;
    text-align: left; }
  #web .works a img {
    display: block;
    width: 100%; }
  #web .works a dt {
    color: #666; }
  #web .works a dd {
    font-weight: bold; }

@media screen and (max-width: 768px) {
  #web .merit section > img {
    display: block;
    margin: 0 auto 10px !important;
    padding: 0;
    width: 128px !important; }
  #web .merit section + section {
    margin-top: 20px;
    padding-top: 20px; }
  #web .works {
    position: relative; }
    #web .works a img {
      padding: 0 30px; }
    #web .works .slick-arrow {
      position: absolute;
      top: 30vw;
      width: 16px !important;
      height: 16px;
      padding: 0;
      margin: -10px 0 0;
      border: none;
      border-top: 4px solid #0068b7;
      border-right: 4px solid #0068b7;
      background: none;
      font-size: 0;
      line-height: 0;
      cursor: pointer;
      outline: none;
      z-index: 100; }
    #web .works .slick-prev {
      left: 3px;
      -webkit-transform: rotate(-135deg);
      transform: rotate(-135deg); }
    #web .works .slick-next {
      right: 3px;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg); }
    #web .works .slick-disabled {
      border-color: #c9c9c9;
      cursor: auto; } }
/* */
/*==================================================*
 *  [ 広告宣伝ツール制作 ]
 *==================================================*/
#sptool .service img {
  padding: 0 5%; }

@media screen and (max-width: 768px) {
  #sptool .service img {
    display: block;
    width: 128px !important;
    margin: 0 auto 10px !important; } }
/* */
/*==================================================*
 *  [ 映像制作 ]
 *==================================================*/
#video .service img {
  padding: 0 5%; }

#video .works > *:nth-child(2) ~ * {
  margin-top: 40px; }
#video .works > *:nth-child(2n+1) {
  margin-left: 0; }
#video .works a {
  color: #000; }
  #video .works a b {
    display: block;
    margin-bottom: 10px;
    text-align: left; }
  #video .works a img {
    display: block;
    width: 100%;
    margin-bottom: 10px; }
  #video .works a dt {
    color: #666;
    text-align: left; }
  #video .works a dd {
    font-weight: bold; }

@media screen and (max-width: 768px) {
  #video .works {
    position: relative; }
    #video .works a img {
      padding: 0 30px; }
    #video .works .slick-arrow {
      position: absolute;
      top: 30vw;
      width: 16px !important;
      height: 16px;
      padding: 0;
      margin: -10px 0 0;
      border: none;
      border-top: 4px solid #0068b7;
      border-right: 4px solid #0068b7;
      background: none;
      font-size: 0;
      line-height: 0;
      cursor: pointer;
      outline: none;
      z-index: 100; }
    #video .works .slick-prev {
      left: 0;
      -webkit-transform: rotate(-135deg);
      transform: rotate(-135deg); }
    #video .works .slick-next {
      right: 0;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg); }
    #video .works .slick-disabled {
      border-color: #c9c9c9;
      cursor: auto; }
  #video .service img {
    display: block;
    width: 128px !important;
    margin: 0 auto 10px !important; } }
/* */
/*==================================================*
 *  [ 個人情報保護コンサルティング ]
 *==================================================*/
#consultant {
  background: url(../img/consultant_bg.jpg) center center no-repeat;
  background-size: cover; }
  #consultant section {
    position: sticky;
    position: -webkit-sticky;
    /* Safari */ }

/*==================================================*
 *  [ 会社情報 ]
 *==================================================*/
#aboutus {
  background: url(../img/aboutus_bg.jpg) center bottom no-repeat;
  background-size: contain; }
  #aboutus .list dt, #aboutus .list dd {
    margin-top: 30px; }
  #aboutus .list dt:nth-of-type(1), #aboutus .list dd:nth-of-type(1) {
    margin-top: 0; }
  #aboutus .list dt {
    margin-left: 0;
    color: #333;
    font-weight: bold;
    text-align: right; }
  #aboutus .list dd {
    text-align: left; }

@media screen and (max-width: 768px) {
  #aboutus .list dt, #aboutus .list dd {
    margin-top: 15px; }
  #aboutus .list dt {
    margin-left: 0 !important; } }
/* */
/*==================================================*
 *  [ 沿革 ]
 *==================================================*/
#history .list dt, #history .list dd {
  margin-top: 10px; }
#history .list dt:nth-of-type(1), #history .list dd:nth-of-type(1) {
  margin-top: 0; }
#history .list dt {
  margin-left: 0;
  font-weight: bold;
  text-align: right; }
  #history .list dt b {
    display: inline-block; }
#history .list dd {
  text-align: left; }

@media screen and (max-width: 768px) {
  #history .list dt {
    margin-left: 0 !important; } }
/* */
/*==================================================*
 *  [ 交通アクセス ]
 *==================================================*/
#access .detail dt, #access .detail dd {
  margin-top: 30px; }
#access .detail dt:nth-of-type(1), #access .detail dd:nth-of-type(1) {
  margin-top: 0; }
#access .detail dt {
  margin-left: 0;
  text-align: right; }
  #access .detail dt span {
    display: inline-block;
    position: relative;
    width: 5em; }
    #access .detail dt span::before {
      position: absolute;
      top: 50%;
      left: 0;
      width: 36px;
      height: 36px;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: contain;
      transform: translateY(-50%);
      content: ""; }
    #access .detail dt span.car::before {
      background-image: url(../img/icon_car.svg); }
    #access .detail dt span.train::before {
      background-image: url(../img/icon_train.svg); }
    #access .detail dt span.bus::before {
      background-image: url(../img/icon_bus.svg); }
#access .detail dd {
  text-align: left; }

@media screen and (max-width: 768px) {
  #access .detail dt {
    margin-left: 0 !important; } }
/* */
/*==================================================*
 *  [ お問い合わせ ]
 *==================================================*/
#contact {
  background: url(../img/contact_bg.jpg) center center no-repeat;
  background-size: cover; }
  #contact h3, #contact p {
    margin: 0; }
  #contact .tel {
    display: block;
    margin: 20px 0;
    padding: 8px 10px;
    font-size: 2.8rem;
    background: rgba(255, 255, 255, 0.3); }

@media screen and (max-width: 768px) {
  #contact .tel {
    margin: 10px 0; } }
/* */
/*==================================================*
 *  [ 運営コンテンツ ]
 *==================================================*/
#other .link a {
  display: block;
  position: relative;
  padding-bottom: 180px;
  background-position: center center;
  background-size: 100% auto;
  color: #fff; }
  #other .link a > * {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    padding: 0 10px;
    transform: translateY(-50%); }
  #other .link a:hover, #other .link a:active {
    background-size: 120% auto; }
  #other .link a[href="https://www.japan-navi.com/book/"] {
    background-image: url(../img/other_book.jpg); }
  #other .link a[href="https://tsukuru-navi.com/"] {
    background-image: url(../img/other_strap.jpg); }
  #other .link a[href="http://www.memorial-bear.com/"] {
    background-image: url(../img/other_bear.jpg); }
  #other .link a::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    content: ""; }

@media screen and (max-width: 768px) {
  #other .link section + section {
    margin-top: 20px; }
  #other .link a {
    padding-bottom: 150px; } }
/* */
/*==================================================*
 *  [ Print ]
 *==================================================*/
@media print {
  #main {
    background: url(../img/main_web.jpg) center top no-repeat !important;
    background-size: cover; }
    #main .slider {
      display: none; }

  #business ul,
  #web > .section > *,
  #sptool > .section > *,
  #video > .section > *,
  #consultant, #aboutus, #history, #access, #contact, #pmark, #other {
    page-break-inside: avoid; }

  #access iframe {
    width: 1060px !important;
    height: 300px !important; }

  .wrap.bg.fixed {
    background-attachment: scroll !important; } }
/* */


.grecaptcha-badge { bottom: 104px!important; }