@charset "UTF-8";
/* =============================================
                    COMMON
============================================= */
body{ background: #000; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.min{ font-family: 'Noto Serif JP', '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;}
sup{ font-size: 70%; vertical-align: top; position: relative; top: -0.1em;}

/* =============================================
                    CONTENTS
============================================= */
*{ box-sizing: border-box;}
html:before,
html:after,
body:before,
body:after{ content: ""; background: #009944; position: fixed; display: block; z-index: 990;}
/* 上 */
html:before{ width: 100vw; top: 0; left: 0;}
/* 右 */
html:after{ height: 100vh; min-height: calc(var(--vh, 1vh) * 100); top: 0; right: 0;}
/* 下 */
body:before{ width: 100vw; bottom: 0; left: 0;}
/* 左 */
body:after{ height: 100vh; min-height: calc(var(--vh, 1vh) * 100); top: 0; left: 0;}
.ico-blank{ display: inline-block; position: relative; padding-right: 20px;}
.ico-blank::before,
.ico-blank::after{ content: ""; background: #000; border: 1px solid #fff; width: 9px; height: 9px; position: absolute;}
.ico-blank::before{ top: 5px; right: 2px;}
.ico-blank::after{ top: 3px; right: 0px;}
#demoday-btn{ position: fixed; z-index: 40;}
#demoday-btn a{ background: #009944 url(/special/discover/nipponshaft/asset/img/fixed-ico.svg); background-repeat: no-repeat; box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.4); font-weight: 700; color: #fff; text-decoration: none; display: block;}
#demoday-btn a span{ background: #009944; display: block;}
#page-top{ position: fixed; right: 0; bottom: 0; z-index: 40;}
#page-top a{ background: #fff; box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.4); display: block; position: relative;}
#page-top a::before{ content: ""; border-top: 2px solid #000; border-right: 2px solid #000; position: absolute; transform: rotate(-45deg); width: 18px; height: 18px; top: 30px; left: 28px;}
/* header */
header{ position: fixed; width: 100%; z-index: 50; transition: all 0.3s;}
header .bg{ content: ""; background: rgba(0, 0, 0, 0.8); position: fixed; width: 100%; top: 0; left: 0; z-index: -1; display: none;}
header .bg.ac{opacity: 0;}
header .inner{ display: flex; align-items: center;}
header .g-nav ul li a{ font-weight: 700; color: #fff; text-decoration: none;}
/* footer */
footer .bg{ background: #009944;}
footer .info-box h2 span{ font-weight: 700; color: #fff; display: inline-block;}
footer .info-box .official-list{ display: flex; flex-wrap: wrap;}
footer .info-box .official-list li{ border-bottom: 1px solid #01863c; width: 49%; padding-left: 20px; position: relative;}
footer .info-box .official-list li:first-of-type{ width: 100%;}
footer .info-box .official-list li:nth-of-type(even){ margin-right: auto;}
footer .info-box .official-list li::before{ content: ""; border-left: 2px solid #fff; border-bottom: 2px solid #fff; width: 4px; height: 6px; position: absolute; top: 50%; left: 0; margin-top: -6px;}
footer .info-box .official-list li a{ font-weight: 700; color: #fff; text-decoration: none;}
footer .info-box .official-list li .ico-blank::before,
footer .info-box .official-list li .ico-blank::after{ background: #009944;}
footer .bottom{ background: #fff;}
footer .bottom .sns li{ display: inline-block; vertical-align: middle; margin: 0 5px;}
footer .bottom .sns li:nth-of-type(2){ vertical-align: top;}
/* .breadcrumb */
.breadcrumb{ background: #eee; margin: 0 !important;}
.breadcrumb a{ color: #000;}

/* ==== PC ===== */
@media screen and (min-width: 768px){
body{ font-size: 16px;}
a{ transition: .4s;}
a:hover,a:hover img{ opacity: 0.8;}
.pc{ display: block;}
.sp{ display: none;}
/* 上,下 */
html:before,
body:before{ height: 5px;}
/* 右,左 */
html:after,
body:after{ width: 5px;}
#demoday-btn{ top: 130px; right: 0;}
#demoday-btn a{ background-size: 60px; background-position: -12px 5px; font-size: 24px; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; border-radius: 6px 0 0 6px; padding-top: 50px;}
#demoday-btn a span{ border-top: 1px solid #008d3f; border-radius: 0 0 0 6px; padding: 15px;}
#page-top a{ border-radius: 6px 0 0 0; width: 79px; height: 74px;}
#page-top a::before{ width: 18px; height: 18px; top: 30px; left: 28px;}
/* header */
header .inner{ width: 1080px; height: 110px; margin: 0 auto;}
header .bg{ height: 110px;}
header .logo-ns{ width: 278px; margin-right: auto;}
header .logo-gdo{ width: 71px; margin-top: -2px;}
header .g-nav ul{ display: flex;}
header .g-nav ul li{ margin-right: 60px;}
/* footer */
footer .bg{ padding: 60px 0;}
footer .bg .inner{ width: 1080px; display: flex; margin: 0 auto;}
footer .info-box{ width: 520px; margin-right: auto;}
footer .info-box h2{ margin-bottom: 13px;}
footer .info-box h2 img{ width: 330px;}
footer .info-box h2 span{ font-size: 18px; margin: 8px 0 0 10px;}
footer .info-box .official-list{ margin-bottom: 40px;}
footer .info-box .official-list li{ padding: 20px 0 22px 18px;}
footer .fb-box{ width: 500px;}
footer .bottom{ padding: 60px 0; text-align: center;}
footer .bottom .sns{ margin-bottom: 40px;}
footer .bottom .cp{ margin-top: 20px;}
/* #top-page */
#top-page #contents{ padding-top: 0;}
/* #sub-page */
#sub-page #contents{ padding-top: 110px;}
/* .breadcrumb */
.breadcrumb{ padding: 15px 0;}
.breadcrumb ol{ width: 1080px; margin: 0 auto;}
}

/* ==== SP ===== */
@media screen and (max-width: 767px){
body{ font-size: 14px;}
img{ width: 100%;}
.pc{ display: none;}
.sp{ display: block;}
/* 上,下 */
html:before,
body:before{ height: 3px;}
/* 右,左 */
html:after,
body:after{ width: 3px;}
.mainblur{ filter: blur(8px);}
#demoday-btn{ bottom: 0; right: 55px; transition: .4s;}
#demoday-btn a{ background-size: 60px; background-position: -12px 5px; font-size: 20px; border-radius: 6px 0 0 0; padding-left: 50px;}
#demoday-btn a span{ border-left: 1px solid #008d3f; height: 50px; padding: 15px 20px 0;}
#page-top{ transition: .4s;}
#page-top a{ width: 50px; height: 50px;}
#page-top a::before{ width: 14px; height: 14px; top: 20px; left: 16px;}
#demoday-btn.hide,
#page-top.hide{ transform: translateY(100%);}
/* header */
header .inner{ height: 50px; padding: 0 20px;}
header .bg{ height: 50px;}
header .logo-ns{ width: 180px; margin-right: auto;}
header .logo-gdo{ width: 45px; margin-top: -2px; margin-right: 25px;}
header .g-nav{ background: rgba(0, 0, 0, 0.7); position: fixed; z-index: 55; width: 100%; height: 50vh; top: 0; left: 0; display: none; transition: all 0.3s;}
header .g-nav.ac{ display: block;}
header .g-nav ul{ position: absolute; z-index: 999; top: 50%; left: 50%; transform: translate(-50%,-50%);}
header .g-nav ul li{ padding: 25px 0;}
header .g-nav ul li a{ font-size: 18px;}
header .open-btn{ cursor: pointer; width: 18px; height: 18px; position: relative; z-index: 59;}
header .open-btn span{ background: #fff; display: inline-block; height: 2px; width: 18px; left: 0; transition: all .4s; position: absolute;}
header .open-btn span:nth-of-type(1){ top: 0px;}
header .open-btn span:nth-of-type(2){ top: 8px;}
header .open-btn span:nth-of-type(3){ bottom: 0px;}
header .open-btn.ac span:nth-of-type(1){ top: 2px; transform: translateY(6px) rotate(-45deg);}
header .open-btn.ac span:nth-of-type(2){ opacity: 0;}
header .open-btn.ac span:nth-of-type(3){ bottom: 2px; transform: translateY(-6px) rotate(45deg);}
/* footer */
footer .bg{ padding: 20px 0;}
footer .bg .inner{ padding: 0 20px;}
footer .info-box h2{ margin-bottom: 10px; text-align: center;}
footer .info-box h2 img{ width: 330px;}
footer .info-box h2 span{ font-size: 18px; margin: 8px 0 0 10px;}
footer .info-box .official-list{ margin-bottom: 20px;}
footer .info-box .official-list li{ padding: 20px 0 22px 14px;}
footer .info-box .bnr{ margin-bottom: 30px;}
footer .bottom{ font-size: 10px; text-align: center; padding: 30px 0;}
footer .bottom .sns{ margin-bottom: 20px;}
footer .bottom .cp{ margin-top: 10px;}
/* #top-page */
#top-page #contents{ padding-top: 0;}
/* #sub-page */
#sub-page #contents{ padding-top: 50px;}

/* .breadcrumb */
.breadcrumb{ font-size: 12px !important; overflow-x: scroll; white-space: nowrap; padding: 15px 15px;}
.breadcrumb ol li:last-child{ padding-right: 15px;}

}