@charset "UTF-8";/*!
 * Navigation.css v1.0.3 beta
 * Lastupdate 2019/11/07
 *
 * Copyright 2019 Sprocket, Inc
 * Licensed
 *
 * Stprocketポップアップ用CSS
 * 以前のnavigation.cssをリファクタリングなど
 *
 * NOTICE:ポップアップの実体は、必ず.spg-navigationを親にすること
 *


## TO DO
・ボタンの中央寄せ　文字数が２行、１行の時
 */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 0;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;background:#2f2346;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}}.spm-navigation-overlay.spm-navigation-force{z-index:99999997}.spm-navigation-navlayer.spm-navigation-force{z-index:99999998}.spm-navigation-float.spm-navigation-force{z-index:99999999!important}.spg-navigation.spm-balloon.spm-navigation-force{z-index:99999999}.spg-navigation.spm-toast.spm-navigation-force{z-index:99999999}.spg-navigation.spm-dialog.spm-navigation-force{z-index:99999999}.spg-navigation.spgCustom-nodisplay{display:none!important}.spg-navigation.spgCustom-button-nodisplay [class$="-nav"]{display:none!important}@media screen and (min-width:601px){.spg-navigation.spgCustom-navbutton-vertical-pc [class$="-nav"]>div{display:block;justify-content:space-between;margin-left:0}.spg-navigation.spgCustom-navbutton-vertical-pc [class$="-nav"]>div [class$="-button"]{margin-left:0;flex:1}}@media all and (min-width:601px) and (-ms-high-contrast:none){.spg-navigation.spgCustom-navbutton-vertical-pc [class$="-nav"]>div [class$="-button"],::-ms-backdrop{flex:1 1 auto}}@media screen and (max-width:600px){.spg-navigation.spgCustom-navbutton-vertical-sp [class$="-nav"]>div{display:block;justify-content:space-between;margin-left:0}.spg-navigation.spgCustom-navbutton-vertical-sp [class$="-nav"]>div [class$="-button"]{margin-left:0;flex:1}}.spg-navigation.spgCustom-closetext button[class$="-close"]{display:inline-block;padding:5px 6px 5px 25px;width:auto;height:auto;border-radius:5px;opacity:1}.spg-navigation.spgCustom-closetext button[class$="-close"]::before{content:"閉じる";display:block;font-size:14px;line-height:1.2;color:#333}