@charset "UTF-8";
/* =============================================
                    COMMON
============================================= */
body{ font-family: 'Shippori Mincho', '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;}
.en{ font-family: 'Crimson Text', '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;}
sup{ font-size: 70%; vertical-align: top; position: relative; top: -0.1em;}
.fade-in{ opacity: 0; transform: translateY(20px);}

/* =============================================
                    CONTENTS
============================================= */
*{ box-sizing: border-box;}
.inner{ position: relative;}
header{ display: flex; align-items: center; width: 100%; position: fixed; top: 0; z-index: 21;}
header .logo-gdo{ margin-right: auto;}
header div img{ filter: drop-shadow(0px 0px 26px rgba(0, 0, 0, 0.4)); }
#menu .menu-box .menu-list ul li a{ color: #fff; text-decoration: none; display: block; position: relative;}
#menu .menu-box .menu-list ul li a::after{ content: ""; background: url(../img/arrowR-white.svg) center center no-repeat; background-size: 100%; position: absolute; top: 50%; transform: translateY(-50%);}
#menu .menu-box .menu-list ul li.introduction a{ background: #000 url(../img/menu-shafts_ic.svg) left center no-repeat;}
#menu .menu-box .menu-list ul li.products a{ background: #000 url(../img/menu-products_ic.svg) left center no-repeat;}
#menu .menu-box .menu-list ul li.events a{ background: #000 url(../img/menu-events_ic.svg) left center no-repeat;}
#menu .menu-box .menu-list ul li.official a{ background: #000 url(../img/menu-official_ic.svg) left center no-repeat;}
#menu .menu-box .menu-list ul li.movie a{ background: #000 url(../img/menu-movie_ic.svg) left center no-repeat;}
#menu .menu-box .menu-list ul li a p{ font-weight: 800;}
#menu .menu-box .menu-list ul li a p.en{ font-weight: 400;}
.t-link > a,
.t-link > span{ display: flex; align-items: center; text-decoration: none; border-bottom: 1px solid #717171;}
.t-link > a p,
.t-link > span p{ font-weight: 700; color: #565656; margin-right: auto;}
.t-link > a .arrow,
.t-link > span .arrow{ background: url(../img/arrowR-green.svg?260520-03) center center no-repeat; border: 2px solid #009844; border-radius: 60px;}
.t-link > span .close{ display: none;}
.t-link > span.ac .open{ display: none;}
.t-link > span.ac .close{ display: block;}
.t-link > span .plus-minus{ font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-align: center; border: 2px solid #009844; border-radius: 60px;}
.t-link > span .plus-minus span{ font-weight: 400; color: #009844; position: relative;}
footer .ns-info{ background: #000; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
footer .logo-box p{ font-weight: 700; color: #fff;}
footer .link-box{ display: flex; flex-wrap: wrap;}
footer .link-box dl dt,
footer .link-box dl dt a{ font-weight: 700; color: #fff; text-decoration: none;}
footer .link-box dl dd,
footer .link-box dl dd a{ font-weight: 300; color: #fff; text-decoration: none;}
footer .sns-box{ position: absolute; bottom: 0;}
footer .gdo-info{ background: #111; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
footer .gdo-info p{ color: #fff; text-align: center;}
footer .gdo-info p a{ font-weight: 300; color: #fff; text-decoration: none;}

/* ==== PC ===== */
@media screen and (min-width: 768px){
body{ font-size: 16px;}
.pc{ display: block;}
.sp{ display: none;}
.inner{ width: 1170px; margin: 0 auto;}
header{ padding: 50px 45px 0;}
header .logo-gdo{ width: 90px;}
header .logo-ns{ width: 324px;}
#menu{ width: 170px; position: fixed; z-index: 10; right: 0px; top: 235px;}
#menu .ico-box{ display: none;}
#menu .menu-box .menu-list ul li{ border-left: 1px solid #009844; margin-bottom: 8px;}
#menu .menu-box .menu-list ul li:last-child{ margin-bottom: 0;}
#menu .menu-box .menu-list ul li a{ transition: .4s; padding: 9px 0 9px 46px;}
#menu .menu-box .menu-list ul li a::after{ width: 12px; height: 8px; right: 10px;}
#menu .menu-box .menu-list ul li.introduction a{ background-size: 20px; background-position-x: 11px;}
#menu .menu-box .menu-list ul li.introduction a:hover{ background: #009844 url(../img/menu-shafts_ac.svg) left 11px center no-repeat; background-size: 20px;}
#menu .menu-box .menu-list ul li.products a{ background-size: 20px; background-position-x: 11px;}
#menu .menu-box .menu-list ul li.products a:hover{ background: #009844 url(../img/menu-products_ac.svg) left 11px center no-repeat; background-size: 20px;}
#menu .menu-box .menu-list ul li.events a{ background-size: 20px; background-position-x: 11px;}
#menu .menu-box .menu-list ul li.events a:hover{ background: #009844 url(../img/menu-events_ac.svg) left 11px center no-repeat; background-size: 20px;}
#menu .menu-box .menu-list ul li.official a{ background-size: 20px; background-position-x: 11px;}
#menu .menu-box .menu-list ul li.official a:hover{ background: #009844 url(../img/menu-official_ac.svg) left 11px center no-repeat; background-size: 20px;}
#menu .menu-box .menu-list ul li.movie a{ background-size: 20px; background-position-x: 11px;}
#menu .menu-box .menu-list ul li.movie a:hover{ background: #009844 url(../img/menu-movie_ac.svg) left 11px center no-repeat; background-size: 20px;}
#menu .menu-box .menu-list ul li a p{ font-size: 14px;}
#menu .menu-box .menu-list ul li a p.en{ font-size: 11px; margin-top: 5px;}
.t-link{ width: 158px;}
.t-link > a,
.t-link > span{ cursor: pointer; padding-bottom: 10px;}
.t-link > a p,
.t-link > span p{ font-size: 14px;}
.t-link > a div,
.t-link > span div{ width: 34px; height: 18px; transition: .4s;}
.t-link > a .arrow,
.t-link > span .arrow{ background-size: 12px;}
.t-link > a:hover .arrow{ background: #009844 url(../img/arrowR-white.svg?260520-03) center center no-repeat; background-size: 12px; border: 2px solid #009844;}
.t-link > span:hover .plus-minus{ background: #009844;}
.t-link > span .plus-minus span{ font-size: 13px; top: -3px;}
.t-link > span:hover .plus-minus span{ color: #fff;}
.t-link > span .plus-minus span.close{ top: 0px;}
footer .ns-info{ padding: 111px 0 122px;}
footer .ns-info .inner{ display: flex;}
footer .logo-box{ margin-right: auto;}
footer .logo-box .logo-ns{ width: 255px; margin-bottom: 14px;}
footer .logo-box p{ font-size: 12px;}
footer .link-box{ display: flex; flex-wrap: wrap; padding-bottom: 10px;}
footer .link-box dl{ margin-left: 106px;}
footer .link-box dl dt{ font-size: 14px; margin-bottom: 30px;}
footer .link-box dl dt a{ transition: .4s;}
footer .link-box dl dt a:hover{ opacity: 0.6;}
footer .link-box dl dd{ font-size: 14px; margin-bottom: 18px;}
footer .link-box dl dd a{ transition: .4s;}
footer .link-box dl dd a:hover{ opacity: 0.6;}
footer .sns-box{ display: flex; align-items: center; left: 0;}
footer .sns-box .facebook{ margin-right: 24px;}
footer .sns-box div a{ transition: .4s;}
footer .sns-box div a:hover{ opacity: 0.6;}
footer .gdo-info{ padding: 30px 0;}
footer .gdo-info p{ font-size: 14px; text-align: center;}
footer .gdo-info p:first-of-type{ margin-bottom: 20px;}
footer .gdo-info p a{ transition: .4s;}
footer .gdo-info p a:hover{ opacity: 0.6;}
}

/* ==== SP ===== */
@media screen and (max-width: 767px){
html, body{ overflow-x: hidden; width: 100%;}
body{ font-size: 14px;}
img{ width: 100%;}
.pc{ display: none;}
.sp{ display: block;}
header{ padding: 30px 25px 0;}
header .logo-gdo{ width: 50px;}
header .logo-ns{ width: 192px;}
#menu .menu-box{ background: #000; border-left: 2px solid #009844; position: fixed; right: -100vw; z-index: 10; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; transition: right 0.6s ease;}
#menu .menu-box.ac{ right: 0;}
#menu .ico-box{ border: none; background: #009844; width: 56px; height: 56px; position: fixed; right: 0; bottom: 70px; z-index: 12; cursor: pointer; padding: 18px 16px;}
#menu .ico-box .ico{ position: relative; width: 100%; height: 100%;}
#menu .ico-box .ico span{ background: #000; position: absolute; left: 0; width: 100%; height: 1px;}
#menu .ico-box,#menu .ico-box .ico span{ display: inline-block; transition: all .5s; box-sizing: border-box;}
#menu .ico-box .ico span:nth-of-type(1){ top: 0;}
#menu .ico-box.ac .ico span:nth-of-type(1){ transform: translateY(9px) rotate(45deg);}
#menu .ico-box .ico span:nth-of-type(2){ top: 10px;}
#menu .ico-box.ac .ico span:nth-of-type(2){ opacity: 0;}
#menu .ico-box .ico span:nth-of-type(3){ bottom: 0;}
#menu .ico-box.ac .ico span:nth-of-type(3){ transform: translateY(-10px) rotate(-45deg);}
#menu .menu-box .menu-list{ position: relative; width: 100vw; height: 100vh; height: 100dvh;}
#menu .menu-box .menu-list ul{ width: 200px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#menu .menu-box .menu-list ul li{ margin-bottom: 45px;}
#menu .menu-box .menu-list ul li:last-child{ margin-bottom: 0;}
#menu .menu-box .menu-list ul li a{ padding: 0 0 0 50px;}
#menu .menu-box .menu-list ul li a::after{ width: 16px; height: 10px; right: 0px;}
#menu .menu-box .menu-list ul li.introduction a{ background-size: 28px;}
#menu .menu-box .menu-list ul li.products a{ background-size: 28px;}
#menu .menu-box .menu-list ul li.events a{ background-size: 28px;}
#menu .menu-box .menu-list ul li.official a{ background-size: 28px;}
#menu .menu-box .menu-list ul li.movie a{ background-size: 28px;}
#menu .menu-box .menu-list ul li a p{ font-size: 16px;}
#menu .menu-box .menu-list ul li a p.en{ font-size: 14px; margin-top: 8px;}
.t-link{ width: 158px;}
.t-link > a,
.t-link > span{ padding-bottom: 10px;}
.t-link > a p,
.t-link > span p{ font-size: 14px;}
.t-link > a div,
.t-link > span div{ width: 34px; height: 18px; transition: .4s;}
.t-link > a .arrow,
.t-link > span .arrow{ background-size: 12px;}
.t-link > a:hover .arrow{ background: #009844 url(../img/arrowR-white.svg?260520-03) center center no-repeat; background-size: 12px; border: 2px solid #009844;}
.t-link > span .plus-minus span{ font-size: 12px; top: -2px;}
.t-link > span .plus-minus span.close{ top: 0px;}
footer .ns-info{ padding: 50px 40px 90px;}
footer .logo-box{ margin-bottom: 40px;}
footer .logo-box .logo-ns{ width: 255px; margin-bottom: 10px;}
footer .logo-box p{ font-size: 12px;}
footer .link-box{ display: flex; flex-wrap: wrap;}
footer .link-box dl{ margin-right: auto;}
footer .link-box dl:nth-of-type(1),
footer .link-box dl:nth-of-type(2),
footer .link-box dl:nth-of-type(3){ margin-bottom: 40px;}
footer .link-box dl:nth-of-type(3){ margin-right: 0;}
footer .link-box dl dt{ font-size: 12px; margin-bottom: 18px;}
footer .link-box dl dd{ font-size: 12px; margin-bottom: 12px;}
footer .link-box dl dd:last-child{ margin-bottom: 0;}
footer .sns-box{ right: 0;}
footer .sns-box .facebook{ width: 32px; margin-bottom: 15px;}
footer .sns-box .youtube{ width: 32px;}
footer .gdo-info{ padding: 20px 0;}
footer .gdo-info p{ font-size: 10px; text-align: center;}
footer .gdo-info p:first-of-type{ margin-bottom: 10px;}
}