@charset "UTF-8";
/*!
 * Copyright 2020 Sprocket, Inc
 * Licensed
 *
 * Navigation.css v1.2
 * Lastupdate 2020/08/31
 * NOTICE:ポップアップの実体は、必ず.spg-navigationを親にすること
 *

/* *************************************************
  カスタムクラス対応
  ・display:none;設定
  ・ボタン横並び
  ・他
************************************************* */.spg-navigation.spgCustom-nodisplay,.spg-tour02.spgCustom-nodisplay {
  display:none!important
}
.spg-navigation.spgCustom-button-nodisplay [class$="-nav"],
.spg-tour02.spgCustom-button-nodisplay .spg-tour02-nav {
  display:none!important
}
.spg-tour02-modal.spm-navigation-force,
.spm-navigation-overlay.spm-navigation-force {
  z-index:99999997
}
.spg-tour02-modal-target-area.spm-navigation-force,
.spm-navigation-navlayer.spm-navigation-force {
  z-index:99999998
}
.spg-tour02-modal-target_z-index.spm-navigation-force,
.spm-navigation-float.spm-navigation-force {
  z-index:99999999!important
}
.spg-navigation.spm-balloon.spm-navigation-force,
.spg-tour02.spg-tour02-type_speech.spm-navigation-force {
  z-index:99999999
}
.spg-navigation.spm-toast.spm-navigation-force,
.spg-tour02.spg-tour02-type_card.spm-navigation-force {
  z-index:99999999
}
.spg-navigation.spm-dialog.spm-navigation-force {
  z-index:99999999
}
body>.spm-navigation-overlay {
  position:fixed;
  z-index:99999;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:#000
}
body>.spm-navigation-navlayer {
  position:absolute;
  z-index:100001;
  background:#fff;
  border-radius:6px
}
.spm-navigation-float {
  z-index:100002!important
}
.spm-navigation-relative {
  position:relative!important
}
body>.spg-navigation {
  pointer-events:none;
  box-sizing:border-box;
  z-index:100000;
  padding:15px 14px 15px 14px
}
.spg-navigation * {
  box-sizing:border-box;
  margin:0;
  padding:0;
  border:0 solid transparent;
  line-height:1.3;
  text-align:left
}
.spg-navigation :not(span) {
  font-size:14px
}
.spg-navigation .spm-navigation-image {
  text-align:center
}
.spg-navigation img {
  max-width:100%;
  height:auto;
  vertical-align:top
}
.spg-navigation [class$="-main"] {
  pointer-events:auto;
  position:relative;
  margin:0;
  padding:14px 26px 13px 26px;
  border:1px solid #ccc;
  background:#fff;
  box-shadow:1px 2px 3px 1px rgba(0,0,0,.6)
}
.spg-navigation button[class$="-close"] {
  position:absolute;
  right:0;
  top:0;
  z-index:1;
  width:26px;
  height:26px;
  background:#fff;
  cursor:pointer;
  opacity:.5;
  transition:250ms
}
.spg-navigation button[class$="-close"]::after,
.spg-navigation button[class$="-close"]::before {
  content:"";
  display:block;
  width:15px;
  height:2px;
  background:#888;
  position:absolute;
  left:6px;
  top:11px;
  transform:rotate(45deg);
  transition:250ms
}
.spg-navigation button[class$="-close"]::after {
  transform:rotate(135deg)
}
.spg-navigation button[class$="-close"]:hover {
  opacity:1;
  background:rgba(0,0,0,.2)
}
.spg-navigation button[class$="-close"]:hover::after,
.spg-navigation button[class$="-close"]:hover::before {
  background:#fff
}
.spg-navigation [class$="-nav"]>div {
  border-collapse:separate;
  display:table;
  table-layout:fixed;
  width:calc(100% + 10px);
  border-spacing:5px 0px;
  margin:12px -5px 0
}
.spg-navigation [class$="-nav"]>div:empty {
  margin-top:0
}
.spg-navigation [class$="-nav"]>div .spm-button-wrapInner:first-child {
  margin-top:-5px
}
.spg-navigation [class$="-nav"] [class$="-button"] {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  padding:9px 13px 9px 13px;
  border-radius:3px;
  background:linear-gradient(to bottom,#1d4891 0,#1d4891 100%);
  line-height:1.3;
  color:#fff;
  cursor:pointer
}
.spg-navigation [class$="-nav"] [class$="-button"]:hover {
  opacity:.7
}
@keyframes pullUp {
  0% {
    transform:scaleY(.1);
    opacity:0
  }
  100% {
    transform:scaleY(.98);
    opacity:1
  }
}
@keyframes pullDown {
  0% {
    transform:scaleY(.1);
    opacity:0
  }
  100% {
    transform:scaleY(.98);
    opacity:1
  }
}
@keyframes slideUp {
  0% {
    transform:translateY(50%);
    opacity:0
  }
  100% {
    transform:translateY(0);
    opacity:1
  }
}
@keyframes slideDown {
  0% {
    transform:translateY(-50%);
    opacity:0
  }
  100% {
    transform:translateY(0);
    opacity:1
  }
}
@keyframes slideLeft {
  0% {
    transform:translateX(-10px);
    opacity:0
  }
  100% {
    transform:translateX(0);
    opacity:1
  }
}
@keyframes slideRight {
  0% {
    transform:translateX(10px);
    opacity:0
  }
  100% {
    transform:translateX(0);
    opacity:1
  }
}
@keyframes fadeInDialog {
  0% {
    opacity:0
  }
  100% {
    opacity:1
  }
}
@keyframes slideUpDialog {
  0% {
    transform:translateX(0) translateY(0);
    opacity:0
  }
  100% {
    transform:translateX(0) translateY(-50%);
    opacity:1
  }
}
@keyframes slideDownDialog {
  0% {
    transform:translateX(0) translateY(-100%);
    opacity:0
  }
  100% {
    transform:translateX(0) translateY(-50%);
    opacity:1
  }
}
@keyframes slideLeftDialog {
  0% {
    transform:translateX(-10px) translateY(-50%);
    opacity:0
  }
  100% {
    transform:translateX(0) translateY(-50%);
    opacity:1
  }
}
@keyframes slideRightDialog {
  0% {
    transform:translateX(10px) translateY(-50%);
    opacity:0
  }
  100% {
    transform:translateX(0) translateY(-50%);
    opacity:1
  }
}
.spg-navigation:not(.spm-balloon) {
  width:100%
}
.spg-navigation [class$="-title"] {
  margin-bottom:4px
}
.spg-navigation [class$="-title"]:empty {
  display:none
}
.spg-navigation [class$="-image"]+[class$="-content"] {
  margin-top:24px
}
.spg-navigation [class$="-image"]+[class$="-content"]:empty,
.spg-navigation [class$="-image"]:empty+[class$="-content"] {
  margin-top:0
}
.spg-navigation.spm-btn-image-background [class$="-main"] {
  padding:0;
  border:0;
  border-radius:3px
}
.spg-navigation.spm-btn-image-background [class$="-main"] [class$="-nav"] {
  margin:0;
  padding:0
}
.spg-navigation.spm-btn-image-background [class$="-main"] [class$="-nav"] [class$="-button"] {
  margin:0;
  padding:0
}
.spg-navigation.spm-btn-image-background [class$="-main"] [class$="-nav"] img {
  width:100%
}
.spg-navigation.spm-toast {
  position:fixed
}
.spg-navigation.spm-toast.spm-top,
.spg-navigation.spm-toast.top {
  top:0;
  animation:pullDown .3s ease-out;
  transform-origin:50% 0%
}
.spg-navigation.spm-toast.bottom,
.spg-navigation.spm-toast.spm-bottom {
  bottom:0;
  animation:pullUp .3s ease-out;
  transform-origin:50% 100%
}
.spg-navigation.spm-toast.spm-toast-type2 .spm-toast-wrap {
  display:flex
}
.spg-navigation.spm-toast.spm-toast-type2 .spm-toast-wrap .spm-navigation-image {
  width:30%;
  margin-right:12px;
  position:relative;
  text-align:center;
  align-items:center;
  display:flex;
  justify-content:center
}
.spg-navigation.spm-toast.spm-toast-type2 .spm-toast-wrap .spm-navigation-image img {
  width:100%
}
.spg-navigation.spm-toast.spm-toast-type2 .spm-toast-wrap .spm-navigation-image+[class$="-inner"] {
  width:calc(100% - 30%)
}
.spg-navigation.spm-balloon {
  position:absolute;
  animation:slideUp .3s ease
}
.spg-navigation.spm-balloon.spm-top,
.spg-navigation.spm-balloon.top {
  animation:slideDown .3s ease
}
.spg-navigation.spm-balloon.left,
.spg-navigation.spm-balloon.spm-left {
  animation:slideLeft .3s ease
}
.spg-navigation.spm-balloon.right,
.spg-navigation.spm-balloon.spm-right {
  animation:slideRight .3s ease
}
.spg-navigation.spm-balloon .spm-balloon-arrow {
  width:0;
  height:0;
  position:absolute;
  z-index:1;
  border:11px solid transparent
}
.spg-navigation.spm-balloon .spm-balloon-arrow::before {
  content:"";
  display:block;
  width:0;
  height:0;
  position:absolute;
  border:11px solid transparent
}
.spg-navigation.spm-balloon.spm-top .spm-balloon-arrow,
.spg-navigation.spm-balloon.top .spm-balloon-arrow {
  top:calc(100% + 1px);
  left:calc(50% - 11px);
  border-top-color:rgba(0,0,0,.8)
}
.spg-navigation.spm-balloon.spm-top .spm-balloon-arrow::before,
.spg-navigation.spm-balloon.top .spm-balloon-arrow::before {
  bottom:-10px;
  left:-11px;
  border-top-color:#fff
}
.spg-navigation.spm-balloon.bottom .spm-balloon-arrow,
.spg-navigation.spm-balloon.spm-bottom .spm-balloon-arrow {
  bottom:calc(100% + 1px);
  left:calc(50% - 11px);
  border-bottom-color:rgba(0,0,0,.8)
}
.spg-navigation.spm-balloon.bottom .spm-balloon-arrow::before,
.spg-navigation.spm-balloon.spm-bottom .spm-balloon-arrow::before {
  top:-10px;
  left:-11px;
  border-bottom-color:#fff
}
.spg-navigation.spm-balloon.right,
.spg-navigation.spm-balloon.spm-right {
  width:inherit
}
.spg-navigation.spm-balloon.right .spm-balloon-arrow,
.spg-navigation.spm-balloon.spm-right .spm-balloon-arrow {
  right:calc(100% + 1px);
  top:calc(50% - 11px);
  border-right-color:rgba(0,0,0,.8)
}
.spg-navigation.spm-balloon.right .spm-balloon-arrow::before,
.spg-navigation.spm-balloon.spm-right .spm-balloon-arrow::before {
  left:-10px;
  top:-11px;
  border-right-color:#fff
}
.spg-navigation.spm-balloon.left,
.spg-navigation.spm-balloon.spm-left {
  width:inherit
}
.spg-navigation.spm-balloon.left .spm-balloon-arrow,
.spg-navigation.spm-balloon.spm-left .spm-balloon-arrow {
  left:calc(100% + 1px);
  top:calc(50% - 11px);
  border-left-color:rgba(0,0,0,.8)
}
.spg-navigation.spm-balloon.left .spm-balloon-arrow::before,
.spg-navigation.spm-balloon.spm-left .spm-balloon-arrow::before {
  right:-10px;
  top:-11px;
  border-left-color:#fff
}
.spg-navigation.spm-balloon.spm-balloon-type2 .spm-balloon-wrap {
  display:flex
}
.spg-navigation.spm-balloon.spm-balloon-type2 .spm-balloon-wrap .spm-navigation-image {
  width:30%;
  margin-right:10px;
  position:relative;
  text-align:center;
  align-items:center;
  display:flex;
  justify-content:center
}
.spg-navigation.spm-balloon.spm-balloon-type2 .spm-balloon-wrap .spm-navigation-image img {
  width:100%
}
.spg-navigation.spm-balloon.spm-balloon-type2 .spm-balloon-wrap .spm-navigation-image+[class$="-inner"] {
  width:calc(100% - 30%)
}
.spg-navigation.spm-dialog {
  position:fixed;
  top:50%;
  left:0;
  right:0;
  transform:translateX(0) translateY(-50%)
}
.spg-navigation.spm-dialog.middle,
.spg-navigation.spm-dialog.spm-middle {
  animation:fadeInDialog .3s ease
}
.spg-navigation.spm-dialog.left,
.spg-navigation.spm-dialog.spm-left {
  animation:slideLeftDialog .3s ease
}
.spg-navigation.spm-dialog.right,
.spg-navigation.spm-dialog.spm-right {
  animation:slideRightDialog .3s ease
}
.spg-navigation.spm-dialog.bottom,
.spg-navigation.spm-dialog.spm-bottom {
  animation:slideUpDialog .3s ease
}
.spg-navigation.spm-dialog.spm-top,
.spg-navigation.spm-dialog.top {
  animation:slideDownDialog .3s ease
}
@media screen and (max-width:600px) {
  .spg-navigation h3 {
    font-size:16px
  }
  .spg-navigation [class$="-main"] {
    margin-right:auto;
    margin-left:auto;
    margin-bottom:auto
  }
}
@media screen and (min-width:601px) {
  .spg-navigation h3 {
    font-size:18px
  }
  .spg-navigation [class$="-content"] {
    font-size:16px
  }
  .spg-navigation [class$="-main"] {
    margin-right:auto;
    margin-left:auto
  }
  .spg-navigation.spm-toast [class$="-main"] {
    max-width:600px
  }
  .spg-navigation.spm-balloon {
    max-width:600px
  }
  .spg-navigation.spm-balloon [class$="-main"] {
    width:600px
  }
  .spg-navigation.spm-dialog {
    max-width:600px
  }
}