html {
   scroll-behavior: auto;
}

body {
   width: 100%;
   overflow-x: hidden;
}

#special.base_top {
   width: 100%;
   background: #202840;
}

#special .base_bottom {
   width: 100%;
}

.bg_image {
   width: 100%;
   height: 100%;
   position: fixed;
   background: url(../images/bg.jpg) center top no-repeat;
   background-size: cover;
   top: 0;
   left: 0;
}

.short_stories {
   position: relative;
}

#special .indent {
   text-indent: 1em;
}

#special .content_header {
   width: 960px;
   padding: 0 0 0 16px;
   position: absolute;
   top: 10px;
   left: 50%;
   margin-left: -480px;
   z-index: 2;
   box-sizing: border-box;
}

#special #contents {
   margin-bottom: 0;
   padding-top: 0;
}

#special #footer {
   width: 100%;
   background: none #000;
   margin-bottom: 0;
   padding-top: 0;
}

#special h1 {
   margin: 70px 20px 30px;
}

#special h2 {
   font-size: 16px;
   font-weight: bold;
   color: #996600;
   margin-bottom: 3px;
}

#special .short_stories .main {
   width: 960px;
   margin: 0 auto;
   padding-bottom: 32px;
}

#special .short_stories .main p {
   color: #333333;
}

#special .short_stories .main li {
   color: #ffffff;
   margin-bottom: 3px;
}

/* menu */

#special #nav_short_stories {
   height: 104px;
   margin: 0 auto 20px;
   padding-top:5px;
}

#nav_short_stories {
   position: relative;
   z-index: 20;
}

.nav-sticky-placeholder {
   width: 100%;
}

#nav_short_stories.is-fixed {
    position: fixed;
   top: 4.4vw;
   left: 0;
   width: 100%;
   z-index:3;
}

#special .nav_short_stories__wrapper {
   position: static;
   width: 880px;
   height: 104px;
   margin: 0 auto;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
}

#special #nav_short_stories li {
   float: left;
   width: 220px;
   height: 52px;
   aspect-ratio: 220 / 52;
   overflow: hidden;
   position: relative;
}

#special #nav_short_stories li a,
#special #nav_short_stories li span {
   display: block;
}

#special #nav_short_stories li a img.btn_pc_img,
#special #nav_short_stories li span img {
   display: block;
}

#special #nav_short_stories li a:hover img.btn_pc_img {
   margin-top: -52px;
}

#special #nav_short_stories li.active img.btn_pc_img,
#special #nav_short_stories li.active a:hover img.btn_pc_img {
   margin-top: -104px;
}
#special #nav_short_stories li .new{
   position: absolute;
   right:7px;
   top: 0;
}
#special #nav_short_stories li .new img{
   width: auto;
   height: 14px;
}

#nav_short_stories__wrapper .btn_pc_img {
   width: 220px;
   height: 156px;
}

#nav_short_stories__wrapper .btn_sp_img {
   display: none;
}

/* 藍色底 */

#special .nav_short_stories__bg {
   position: fixed;
   top: -60vw;
   z-index: 2;
   left: 0;
   width: 100%;
   height: 134px;
   background-image: linear-gradient(to top, rgba(0, 34, 102, 0), #002266);
   background-size: 100%;
   transition: top 0.3s ease;
   margin-top: -0.6vw;
}

#special .nav_short_stories__bg.is-fixed {
   top: 4.4vw;
}

/* content */

.nav-placeholder {
   transition: none;
}

.short_stories-content {
   display: none;
}

.short_stories-content.active {
   display: block;
}

#special .window {
   width: 900px;
   margin: 0 auto;
   display: none;
}

#special .window.active {
   display: block;
}

#special .window .header {
   background: url(../images/frame_t.png) left top no-repeat;
   height: 94px;
   position: relative;
   z-index: 1;
}

#special .window .header h2 {
   padding-top: 46px;
   font-size: 22px;
   font-weight: bold;
   color: #202840;
   text-align: center;
}

#special .window .header .bt_change {
   position: absolute;
   top: 34px;
   right: 42px;
   width: 144px;
}

#special .window .header .bt_change a img {
   display: block;
   position: absolute;
}

#special .window .header .bt_change a img.on,
#special .window .header .bt_change a img.selected {
   opacity: 0;
}

#special .window .header .bt_change a:hover img.on {
   opacity: 1;
}

#special .window .header .bt_change a.active img.selected {
   opacity: 1;
}

#special .window .header .bt_change a.active:hover img.on {
   opacity: 0;
}

#special .window .body {
   background: url(../images/frame_m.png) left top repeat-y;
   min-height: 1%;
}

#special .window .body .line {
   background: url(../images/line.png) center top no-repeat;
   line-height: 1%;
   font-size: 1%;
   width: 780px;
   height: 7px;
   margin: 0 auto;
   padding: 0;
}

#special .window .body .inr {
   padding: 28px 90px 64px;
}

#special .window .body .inr div,
#special .window .body .inr p {
   color: #202840;
   font-size: 16px;
   line-height: 1.8;
}

#special .window .body .inr div i,
#special .window .body .inr div b,
#special .window .body .inr div span,
#special .window .body .inr div strong,
#special .window .body .inr p i,
#special .window .body .inr p b,
#special .window .body .inr p span,
#special .window .body .inr p strong {
   font-size: inherit;
}

#special .window .body .inr .image {
   text-align: center;
   margin-bottom: 28px;
   margin-top: 28px;
   line-height: 1%;
   font-size: 1%;
}

#special .window .body .inr .serif {
   margin-bottom: 28px;
   color: #806540;
   font-weight: bold;
}

#special .window .body .inr.ja div {
   margin-bottom: 28px;
}

#special .window .body .inr.ja .image {
   text-align: center;
   margin-bottom: 28px;
   margin-top: 0;
   line-height: 1%;
   font-size: 1%;
}

#special .window .body .inr.ja div,
#special .window .body .inr.ja p {
   line-height: 2.2;
}

#special .window .body #story_female {
   display: none;
}

#special .window .footer {
   background: url(../images/frame_b.png) left bottom no-repeat;
   height: 88px;
}

#special .window .footer .inr {
   padding: 10px 60px 0;
}

#special .window .footer .inr a {
   height: 32px;
   line-height: 32px;
   display: block;
   color: #202840;
   font-size: 16px;
   font-weight: bold;
}

#special .window .footer .inr a:hover {
   text-decoration: underline;
}

#special .window .footer .inr .link_prev {
   background: url(../images/arrow.png) left top no-repeat;
   padding-left: 32px;
   float: left;
}

#special .window .footer .inr .link_prev:hover {
   background-position: left bottom;
}

#special .window .footer .inr .link_next {
   background: url(../images/arrow_r.png) right top no-repeat;
   padding-right: 32px;
   float: right;
}

#special .window .footer .inr .link_next:hover {
   background-position: right bottom;
}

#special .link_memoir {
   margin: 30px auto 0;
   text-align: center;
}

/* link */

.link_short_stories {
   margin: 30px auto 0;
   text-align: center;
}

.link_short_stories img {
   width: 70%;
   max-width: 720px;
   height: auto;
}

/* gotop */

#go_top_embed .go_top {
   width: 48px;
   height: 48px;
   border: none;
   background: none;
}

#go_top_embed .go_top a svg {
   display: none;
}

#go_top_embed .go_top a {
   width: 48px;
   height: 48px;
   background-image: url(../images/gotop.png);
   background-size: 100% auto;
   background-repeat: no-repeat;
   background-position: right center;
   opacity: 0.5;
}

#all_menu_sp {
   display: none;
}
.tr{text-align: right;}
/* RWD */

@media (max-width: 970px) {
   #special .content_header {
      width: 100%;
      left: 0;
      margin-left: 0;
   }

   #special .short_stories .main {
      width: 100%;
   }

   #special .short_stories .main .special_body {
      width: 90%;
   }

   .main h1 img {
      max-width: 490px;
      width: 50%;
      height: auto;
      margin: 0 auto;
   }

   #special #nav_short_stories {
      height: auto;
      margin: 0 auto 20px;
   }

   #nav_short_stories.is-fixed {
      top: 45px;
   }

   #special .nav_short_stories__wrapper {
      width: 100%;
      height: auto;
   }

   #special .nav_short_stories__bg {
      margin-top: -45px;
      height: 190px;
      top: -60vw;
   }

   #special .nav_short_stories__bg.is-fixed {
      top: 45px;
   }

   #special .window {
      width: 94%;
   }

   #special .window .header {
      background: url(../images/frame_t.png) left bottom no-repeat;
      background-size: 100% auto;
   }

   #special .window .header h2 {
      width: 100%;
   }

   #special .window .body .inr {
      padding: 3% 8%;
   }

   #special .window .body {
      background: url(../images/frame_m.png) left top repeat-y;
      background-size: 100% auto;
      margin-top: -1px;
   }

   #special .window .body .line {
      background: url(../images/line.png) center top no-repeat;
      background-size: 100% auto;
      width: 90%;
   }

   #special .window .body .inr.ja .image img {
      width: 100%;
      height: auto;
   }

   #special .window .footer {
      background: url(../images/frame_b.png) left top no-repeat;
      background-size: 100% auto;
   }

   #special .window .footer .inr {
      padding: 5px 60px 0;
   }

   .link_short_stories img {
      max-width: 500px;
   }
}

@media (max-width: 740px) {
   .main h1 {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
   }

   #special h1 {
      margin: 35px 0 20px;
   }

   .main h1 img {
      max-width: 490px;
      width: 60%;
      height: auto;
      margin: 0 auto;
   }

   #special .window .header {
      background: url(../images/frame_t_sp.png) left bottom no-repeat;
      background-size: 100% auto;
      height: auto;
      aspect-ratio: 640 / 110;
      display: flex;
      justify-content: center;
      align-items: center;
   }

   #special .window .header h2 {
      padding-top: 3vw;
      font-size: clamp(14px, 5vw, 24px);
   }

   #special .window .body {
      background: url(../images/frame_m_sp.png) center top repeat-y;
      background-size: 100% auto;
   }

   #special .window .footer {
      background: url(../images/frame_b_sp.png) left bottom no-repeat;
      background-size: 100% auto;
      height:14vw;
   }
}

/* mobile */
html.is-mobile {
   width: 100%;
   overflow-x: hidden;
}

.is-mobile body {
   width: 100%;
   overflow-x: hidden;
   padding-top: 80px;
}
.is-mobile #header_embed{
   position: fixed;
}
.is-mobile .nav_sp,
.is-mobile .sp_menu,
.is-mobile #menu-list,
.is-mobile .menu-mask {
   max-width: 100%;
   overflow-x: hidden;
}
.is-mobile #nav_short_stories,
.is-mobile #nav_short_stories.is-fixed {
   position: relative;
   top: 0;
   left: auto;
   width: auto;
   z-index: 3;
}

.is-mobile .nav-sticky-placeholder {
   height: auto !important;
}

.is-mobile #special #nav_short_stories {
   height: auto;
}

.is-mobile #special #nav_short_stories li {
   width: 84%;
   max-width: 360px;
   aspect-ratio: 640 / 104;
   height: auto;
}

.is-mobile #nav_short_stories__wrapper .btn_pc_img,
.is-mobile #special #nav_short_stories li.active img.btn_pc_img,
.is-mobile #special #nav_short_stories li img.btn_pc_img {
   display: none !important;
}

.is-mobile #nav_short_stories__wrapper .btn_sp_img,
.is-mobile #special #nav_short_stories li img.btn_sp_img {
   display: block;
   width: 100%;
   height: auto;
}

.is-mobile body.lock-scroll {
   position: fixed;
   width: 100%;
   overflow: hidden;
}

.is-mobile .bg_image {
   background: url(../images/kv_sp.png) no-repeat center top #202840;
   background-size: 130% auto;
}

.is-mobile #all_menu_sp {
   display: block;
}

.is-mobile .nav_short_stories__bg {
   display: none;
}

.is-mobile #special .nav_short_stories__wrapper {
   height: auto;
   position: relative;
}

.is-mobile .nav_sp {
   z-index: 3;
   display: block;
   padding-top: 40px;
   position: fixed;
   width: 100%;
   top: 0;
   left: 0;
}

.is-mobile #subpage-title_sp {
   background: #000;
}

.is-mobile #subpage-title_sp span {
   position: relative;
   height: 40px;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   transform: translateX(0);
   transition: all 0.3s;
}
.is-mobile #subpage-title_sp span picture{
      display: flex;
   align-items: center;
   justify-content: center;
}
.is-mobile #subpage-title_sp span.open {
   transform: translateX(290px);
}

.is-mobile #subpage-title_sp span img {
   height: 30px;
   width: auto;
   margin-right: 10px;
}

.is-mobile .nav_sp .go-home {
   color: #fff;
   position: relative;
   display: flex;
   align-items: center;
   height: 40px;
   width: 100%;
   max-width: 280px;
   border-bottom: 1px solid #e3bc61;
   pointer-events: initial;
   padding: 0 0 0 16px;
   z-index: 2;
}

.is-mobile .menu-toggle {
   position: fixed;
   left: 280px;
   top: 40px;
   min-height: 100%;
   height: 100vh;
   transition: all 0.3s;
   transform: translateX(-280px);
   z-index: 250;
}

.is-mobile .menu-toggle.open {
   width: calc(100% - 280px);
   transform: translateX(0);
}

.is-mobile .menu-toggle div {
   background: rgba(0, 0, 0, 0.3);
   display: flex;
   justify-content: center;
   align-items: center;
   width: 40px;
   height: 40px;
   padding: 8px;
   position: absolute;
   left: 0;
   top: 0;
   z-index: 9;
}

.is-mobile .menu-toggle .bt_close::before {
   content: '';
   display: block;
   width: 25px;
   height: 25px;
   background: url(../images/close.svg) center no-repeat;
   background-size: 100%;
}

.is-mobile .menu-toggle .bt_open::before {
   content: '';
   display: block;
   width: 25px;
   height: 25px;
   background: url(../images/menu.svg) center no-repeat;
   background-size: 100%;
}

.is-mobile .menu-toggle .bt_open,
.is-mobile .menu-toggle .bt_close {
   display: none;
}

.is-mobile .menu-toggle .bt_open.open,
.is-mobile .menu-toggle .bt_close.open {
   display: flex;
   cursor: pointer;
}

.is-mobile .nav_sp .menu-mask {
   position: absolute;
   width: 100%;
   height: 100vh;
   background: rgba(0, 0, 0, 0.7);
   opacity: 0;
   transition: opacity 0.4s;
   z-index: 0;
   display: none;
}

.is-mobile .nav_sp .menu-mask.open {
   opacity: 0.7;
   display: block;
}

.is-mobile #ind_menu {
   display: block;
}

.is-mobile #ind_menu a {
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 1% 0;
}

.is-mobile #ind_menu img {
   width: 90%;
   max-width: 320px;
   margin: 0 auto;
}

.is-mobile #menu-list {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   padding-top: 80px;
   background: #262626;
}

.is-mobile .sp_menu {
   width: 100%;
   max-width: 280px;
   min-height: 100%;
   height: 100vh;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 8;
   transition: all 0.3s;
   transform: translateX(-290px);
}

.is-mobile .sp_menu.open {
   transform: translateX(0);
   overscroll-behavior: contain;
}

.is-mobile #menu-list div {
   display: flex;
   align-items: center;
   width: 100%;
   height: 40px;
   border-bottom: 1px solid #333;
   position: relative;
}

.is-mobile #menu-list li {
   border-bottom: solid 1px #333333;
   position: relative;
}
.is-mobile #menu-list li .new{
   position: absolute;
   top: auto;
   bottom: 0;
   right:1px;
}
.is-mobile #menu-list li .new img{
   width: auto;
   height: 4vw;
   max-height: 16px;
}
.is-mobile #menu-list a {
   background: none;
   text-decoration: none;
   color: #fff;
   line-height: 40px;
   margin-left: 16px;
}

.is-mobile #menu-list li.active a {
   color: #e3bc61;
}

.is-mobile #menu-list a span {
   font-size: 10px;
}
.is-mobile #menu-list li.coming_menu,
.is-mobile #menu-list li.coming_menu a{
   color: #666;
}
.is-mobile #menu-list li .coming_date{
   font-size: 14px;
   position: absolute;
   right:5px;
   bottom:2px;
}
.is-mobile #go_top_embed {
   position: relative;
}

.is-mobile #go_top_embed .go_top {
   right: -20px;
   bottom: 12px;
}

.is-mobile #go_top_embed .go_top a {
   width: 44px;
   height: 40px;
   background: url(../images/go_top_sp.png) center no-repeat;
   background-size: 100% auto;
}
.is-mobile #special #nav_short_stories li .new img{
      height:4.2vw;
      max-height:16px;
   }
.short_stories-content {
    display: block !important;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}
.short_stories-content.active {
    visibility: visible;
    height: auto;
    overflow: visible;
    pointer-events: auto;
}
   
@media (min-width: 1000px) {
   .is-mobile .nav_sp {
      padding-top: 4.4vw;
   }

   .is-mobile #subpage-title_sp span {
      height: 4.4vw;
   }

   .is-mobile .menu-toggle {
      top: 4.4vw;
   }

   .is-mobile .menu-toggle div {
      width: 4.4vw;
      height: 4.4vw;
   }
}

@media (max-width: 674px) {
   #special .window .body .line {
      background: url(../images/line_sp.png) center top no-repeat;
      background-size: 100% auto;
      width: 90%;
      height: auto;
      aspect-ratio: 288 / 7;
   }

   #special .nav_short_stories__bg {
      height: 280px;
   }
}

@media (max-width: 500px) {
   #special #nav_short_stories li {
      width: 45vw;
      height: auto;
      aspect-ratio: 220 / 51;
      gap: 0.5vw;
   }
   #special #nav_short_stories li .new{
      right:2vw;
   }
   #special #nav_short_stories li .new img{
      height:3.2vw;
   }
   #special #nav_short_stories li.active img,
   #nav_short_stories li a img.btn_pc_img {
      width: 100%;
   }

   #special #nav_short_stories li a:hover img.btn_pc_img {
      margin-top: -10.65vw;
   }

   #special #nav_short_stories li.active img.btn_pc_img,
   #special #nav_short_stories li.active a:hover img.btn_pc_img {
      margin-top: -21.2vw;
   }

   #special .nav_short_stories__bg {
      margin-top: -45px;
      height: 60vw;
      top: -60vw;
   }
   #special .window .footer .inr{
      padding: 5px 0 0;
      width: 80%;
      margin: 0 auto;
   }
}
@media (max-width: 360px) {
#special .window .footer {
   height: 20vw;
   background: url(../images/frame_b_sp.png) left bottom no-repeat;
   background-size: 100% auto;
}
}
@media (max-width: 330px) {
   .is-mobile .sp_menu {
      width: calc(100% - 20vw);
   }

   .is-mobile .menu-toggle.open {
      left: calc(100% - 20vw);
   }

   .is-mobile .menu-toggle {
      transform: translateX(100% + 20vw);
   }

   .is-mobile #menu-list div {
      height: auto;
      padding: 5px;
   }

   .is-mobile #menu-list a {
      font-size: 5.5vw;
      margin-left: 1vw;
   }
   
}

@media (max-width: 250px) {
   .is-mobile .nav_sp .go-home{
   font-size:6vw;
   padding-left: 1vw;
   }
   .is-mobile #subpage-title span {
      width: 90%;
      margin: 0 auto;
   }
   .is-mobile #menu-list li .coming_date{
      font-size:5vw;
   }
   .is-mobile #subpage-title span img {
      width: 100%;
   }

   .is-mobile #subpage-title_sp span picture {
      width: 50%;
      margin-right: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
   }

   .is-mobile #subpage-title_sp span img {
      height: auto;
      width: 100%;
      margin-right: 0;
   }

   .is-mobile .nav_sp {
      padding-top: 15vw;
   }

   .is-mobile #subpage-title_sp {
      top: 15vw;
   }

   .is-mobile .menu-toggle div {
      width: 20vw;
      padding: 2%;
   }

   .is-mobile .menu-toggle {
      top: 15vw;
   }

}