@charset "utf-8";
/************************************************

@style.css

©︎ULM Co.,Ltd. - https://www.ulm-design.com
************************************************/

/*
#top
-------------------------------*/
#top {
  
}

#main {
  
}

#main-slider-container {
  position: relative;
  overflow: hidden;
  height: calc(39.0625vw + 5.208334vw);
}

#main-slider {
  width: 89.0625vw;
  height: 39.0625vw;
  margin: 0 auto;
  overflow: hidden;
}

#main-slider.slick-slider {
  height: auto;
  overflow: initial;
}

.main-slider-box {
  width: 100%;
  height: 39.0625vw !important;
  overflow: hidden;
}

.main-slider-link {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.main-slider-img {
  width: 100%;
}

#main-slide-control {
  
}

.slick-arrow {
  width: 2.6vw;
  height: 2.6vw;
  border-right: 2px solid #146fb9;
  border-bottom: 2px solid #146fb9;
  position: absolute;
  z-index: 1;
  top: calc((39.0625vw - 3.75vw)/2);
}

.slick-arrow::before {
  display: none;
}

.slick-prev {
  transform: rotate(135deg);
  left: -3.125vw;
}

.slick-next {
  transform: rotate(-45deg);
  right: -3.125vw;
}

#main-slider-pagination,
.slick-dots {
  width: 100%;
  height: 5.208334vw;
  display: flex !important;
  justify-content: center;
  align-items: center;
  position: initial !important;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: .625vw;
  height: .625vw;
  margin: 0 .78125vw;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  width: .625vw;
  height: .625vw;
  padding: 0;
}

.slick-dots li button:before {
  width: .625vw;
  height: .625vw;
  color: #c2c2c2;
  opacity: 1;
}

.slick-dots li.slick-active button:before,
.slick-dots li:hover button:before {
  color: #146fb9;
  opacity: 1;
}

.main-slider-pagination-btn {
  width: .625vw;
  height: .625vw;
  border-radius: 50%;
  background: #c2c2c2;
  margin: 0 .78125vw;
}

.main-news-container {
  position: absolute;
  z-index: 200;
  width: 98vw;
  height: 4.1667vw;
  top: 1.041667vw;
  left: 1vw;
  border: 1px solid #fff;
  background: rgba(20,111,185,.3);
  color: #fff;
  font-size: 1.1458334vw;
  overflow: hidden;
}

#main-news-container {
  opacity: 0;
  transition: all .3s ease-in-out;
}

#main-news-container:hover {
  opacity: 1;
  height: calc(4.1667vw * 3);
}

.main-news-container::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: .57291667vw .36458334vw 0 .36458334vw;
  border-color: #ffffff transparent transparent transparent;
  position: absolute;
  z-index: 1;
  top: 1.875vw;
  right: 2.6041667vw;
}

#main-news-container-ticker {
  pointer-events: none;
}

#ticker {
  position: relative;
  /*height: 63.4531px;*/
  width: calc(100% - 11.71875vw - .5208334vw - .7291667vw*2);
}

#ticker .main-news-list {
  width: 100%;
  height: auto;
}

#ticker .main-news-list .main-news-box {
  opacity: 0;
}

.main-news-ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Alata', sans-serif;
  background: #146fb9;
  width: 11.71875vw;
  margin: .7291667vw .5208334vw .7291667vw .7291667vw;
}

.main-news-list {
  width: calc(100% - 11.71875vw - .5208334vw - .7291667vw*2);
  height: 100%;
}

.main-news-box {
  height: calc(4.1667vw - 2px);
}

.main-news-btn {
  color: inherit;
  padding: 1.5625vw 2.6041667vw;
  width: 100%;
  height: 100%;
  background-color: none;
  transition: background-color .3s ease-in-out;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.main-news-btn:hover {
  background: rgba(20,111,185,.5);
}

.main-news-date {
  font-family: 'Alata', sans-serif;
  padding: 0 2.34375vw 0 0;
}

.main-news-txt {
  line-height: 1.4em;
}

/*
#news-twitter
-------------------------------*/
#news-twitter {
  padding: 6.09375vw 9.375vw 10.41667vw;
}

.section-inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

#top-news {
  width: 35.41667vw;
}

.section-contents-header {
  margin: 0 0 1.041667vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.contents-ttl {
  color: #3b4453;
  font-family: 'Alata', sans-serif;
  font-size: 3.125vw;
  line-height: 1em;
  font-weight: normal;
}

.more-btn {
  width: 7.03125vw;
}

.more-link {
  display: block;
}

#top-news-container {
  display: flex;
  flex-wrap: wrap;
  flex-flow: column-reverse;
}

.top-news-box {
  margin: 0 0 1.041667vw;
  width: 100%;
}

.top-news-box:nth-child(1) {
  margin: 0;
}

.top-news-link {
  width: 100%;
  border: 1px solid #dee7f2;
  padding: .98958334vw;
  font-size: 1.041667vw;
  align-items: center;
  color: #3c4c68;
  position: relative;
}

.top-news-tag {
  font-family: 'Alata', sans-serif;
  font-size: .8334vw;
  letter-spacing: .5px;
  color: #fff;
  text-align: center;
  width: 7.5vw;
  height: 2.13541667vw;
  line-height: 2.13541667vw;
  background: url("../img/common/board.png") no-repeat;
  background-size: cover;
  position: absolute;
  z-index: 2;
  top: 1.1458334vw;
  left: -.88541667vw;
  white-space: nowrap;
}

.top-news-thumb {
  width: 16.667vw;
  position: relative;
  background: #eee;
}

.top-news-thumb::after {
  content: "";
  display: block;
  padding-top: 55%;
}

.top-news-thumb-img {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-news-contents {
  width: calc(100% - 16.667vw);
  padding: 0 0 0 1.30208334vw;
}

.top-news-ttl {
  font-weight: normal;
  line-height: 1.5em;
}

.top-news-date {
  font-family: 'Alata', sans-serif;
  font-size: .8334vw;
  color: #146fb9;
  position: absolute;
  bottom: .98958334vw;
  right: .98958334vw;
}

#top-twitter {
  width: 35.41667vw;
}

#top-twitter-container {
  background: #fafcff;
}

.twitter-timeline {
  width: 100%;
  height: 35.8334vw !important;
}

#topics {
  background: #eef5ff;
  padding: 5.2vw 0;
}

#topics .contents-ttl {
  text-align: center;
  margin: 0 0 3.125vw;
}

.topics-box {
  width: 21.09375vw;
  margin: 0 1.5620932vw
}

.topics-box-link {
  display: block;
  color: #3c4c68;
}

.topics-thumb {
  width: 100%;
  position: relative;
  background: #000;
  margin: 0 0 1.04vw;
  overflow: hidden;
}

.topics-thumb::after {
  content: "";
  display: block;
  padding-top: 100%;
}

.topics-thumb-img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

.topics-txt {
  font-size: 1.1458334vw;
  line-height: 1.45em;
}


/*
.scection
-------------------------------*/
.section {
  width: 100%;
  height: 62.5vw;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 7.03125vw 0 29.94791667vw;
  color: #3b4453;
}

.section .contents-ttl {
  margin: 0 0 3.90625vw;
}

.section-contents {
  width: 41.667vw;
  height: 41.667vw;
  background: rgba(255,255,255,1);
  position: relative;
}

.section-contents-inner {
  margin: 0 5.208333vw;
}

.section-contents-small {
  width: 28.125vw;
  min-height: 28.125vw;
  background: rgba(255,255,255,1);
  padding: 4.42708334vw;
}

.txt {
  font-size: 1.041667vw;
  line-height: 2em;
}

.section-contents-inner .txt:not(:nth-last-child(1)) {
  padding: 0 0 1.041667vw;
}

/*
#movie
-------------------------------*/
#movie {
  display: block;
  height: 56.510416667vw;
  background: url("../img/top/movie_bg.jpg") no-repeat;
  background-size: cover;
  padding: 0;
  position: relative;
}

#movie .contents-ttl {
  color: #fff;
  text-align: center;
  padding: 10vw 0 3.125vw;
  margin: 0;
}

.movie-box-container {
  display: flex;
  justify-content: center;
  position: relative;
  top: 3vw;
  opacity: 0;
}

.movie-box {
  width: 41.71875vw;
  height: 27.65625vw;
  background: #fff;
  position: relative;
  margin: 0 3.0208334vw;
}

.movie-txt {
  height: 4.1667vw;
  color: #3b4453;
  font-size: .9375vw;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.5em;
}

.movie-thumb {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.movie-thumb::after {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.movie-thumb-img {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#movie .more-btn {
  position: absolute;
  z-index: 1;
  right: 5.2vw;
  bottom: 2.6vw;
}

/*
#movie .contents-ttl {
  margin: 7.8125vw 0 2.86458334vw;
}

#movie-thumb {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

#movie-thumb::after {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.movie-thumb-img {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
*/
#intro-story {
  display: flex;
  background: url("../img/top/story_bg.jpg") no-repeat;
  background-size: cover;
}

/*
#introduction
-------------------------------*/
#introduction {
  width: 50%;
  padding: 0 4.0625vw;
}

/*
#story
-------------------------------*/
#story {
  width: 50%;
  padding: 0 4.0625vw;
}

/*
#caststaff
-------------------------------*/
#caststaff {
  height: auto;
  background: url(../img/top/caststaff_bg.jpg) center center no-repeat;
  background-size: cover;
  padding: 9.2vw 18.48958334vw;
}

#caststaff .section-inner {
  align-items: flex-start;
}

.caststaff-list {
  
}

.caststaff-box {
  width: 50%;
  margin: 0 0 1.5625vw;
}

.staff-box {
  padding: 4.42708334vw 2.3958334vw;
  position: relative;
}

.caststaff-txt0 {
  font-size: .7291667vw;
  color: #146fb9;
  line-height: 1.5em;
  white-space: nowrap;
}

.caststaff-txt1 {
  font-size: 1.041667vw;
  color: #3b4453;
  white-space: nowrap;
}

.popup {
  opacity: 0;
  position: relative;
  top: 100px;
  transition: all .4s cubic-bezier(0,.83,.56,.99);
}

.popup.act {
  top: 0;
  opacity: 1;
}

.caststaff-toggle {
  display: none;
}

.caststaff-more {
  font-family: 'Alata', sans-serif;
  font-size: .8334vw;
  letter-spacing: .5px;
  color: #fff;
  text-align: center;
  width: 7.13541667vw;
  height: 2.03125vw;
  line-height: 2.03125vw;
  background: url("../img/common/board.png") no-repeat;
  background-size: cover;
  position: absolute;
  z-index: 2;
  top: 4.58334vw;
  right: 2.8125vw;
  white-space: nowrap;
  cursor: pointer;
}

.arrow-icon {
  width: .3125vw;
  height: auto;
}

.caststaff-more .arrow-icon {
  transform: rotate(90deg) translate(-.05208334vw, -.57291667vw);
}



/*
#news
-------------------------------*/
#news {
  
}

#sub-ttl {
  font-family: 'Alata', sans-serif;
  font-size: 3.125vw;
  line-height: 1em;
  font-weight: normal;
  color: #146fb9;
  text-align: center;
  padding: 0 0 5.208334vw;
}

#contents-main {
  width: 63.541667vw;
  margin: 0 auto;
  padding: 9.8958334vw 0 10.41667vw;
}

#tag-nav {
  margin: 0 auto calc(3.125vw - .78125vw);
}

.tag-nav-box {
  font-family: 'Alata', sans-serif;
  color: #146fb9;
  font-size: .9375vw;
  width: 10.15625vw;
  height: 2.8125vw;
  line-height: 2.8125vw;
  background: url("../img/news/tag_bg.png") no-repeat;
  background-size: cover;
  text-align: center;
  margin: 0 .78125vw .78125vw;
}

.tag-nav-box.act,
.tag-nav-box:not(.coming):hover {
  color: #fff;
  background: url("../img/news/tag_bg_act.png") no-repeat;
  background-size: cover;
}

.tag-nav-box.coming {
  pointer-events: none;
  filter: grayscale(1);
  opacity: .8;
}


.tag-nav-btn {
  color: inherit;
  display: block;
}

.news-box {
  margin: 0 0 1.041667vw;
  background: rgba(255,255,255,.8);
}

.news-box:nth-last-child(1) {
  margin: 0;
}

.news-link {
  width: 100%;
  border: 1px solid #dee7f2;
  padding: .98958334vw;
  font-size: 1.041667vw;
  align-items: center;
  color: #3c4c68;
  position: relative;
}

.news-tag {
  font-family: 'Alata', sans-serif;
  font-size: .8334vw;
  letter-spacing: .5px;
  color: #fff;
  text-align: center;
  width: 7.5vw;
  height: 2.13541667vw;
  line-height: 2.13541667vw;
  background: url("../img/common/board.png") no-repeat;
  background-size: cover;
  position: absolute;
  z-index: 2;
  top: 1.1458334vw;
  left: -.88541667vw;
  white-space: nowrap;
}

.news-thumb {
  width: 16.667vw;
  position: relative;
  background: #eee;
}

.news-thumb::after {
  content: "";
  display: block;
  padding-top: 56.037151702%;
}

.news-thumb-img {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-contents {
  width: calc(100% - 16.82291667vw);
  padding: 0 0 0 1.30208334vw;
}

.news-ttl {
  font-weight: normal;
  line-height: 1.5em;
}

.news-date {
  font-family: 'Alata', sans-serif;
  font-size: .8334vw;
  color: #146fb9;
  position: absolute;
  bottom: .98958334vw;
  right: .98958334vw;
}

#detail-container {
  background: rgba(255,255,255,.8);
  margin: 0 auto 3.125vw;
  padding: 6.25vw;
}

#news-detail-header {
  margin: 0 0 2.3958334vw;
  padding: 0 0 1.875vw;
  background: url("../img/common/wave.png") center bottom no-repeat;
  background-size: 100% auto;
}

#news-detail-header-inner {
  margin: 0 0 1.40625vw;
  align-items: center;
}

#news-detail-tag {
  font-family: 'Alata', sans-serif;
  font-size: .8334vw;
  letter-spacing: .5px;
  color: #fff;
  text-align: center;
  width: 7.5vw;
  height: 2.13541667vw;
  line-height: 2.13541667vw;
  background: url("../img/common/board.png") no-repeat;
  background-size: cover;
  margin: 0 1.09375vw 0 0;
}

#news-detail-date {
  font-family: 'Alata', sans-serif;
  font-size: 1.041667vw;
  color: #146fb9;
}

#news-detail-ttl {
  color: #3c4c68;
  font-size: 1.3541667vw;
  font-weight: bold;
  line-height: 1.2em;
}

#news-detail-contents {
  font-size: 1.041667vw;
  line-height: 2em;
  color: #3c4c68;
}

#news-detail-contents a {
  color: #146fb9;
}

#news-detail-contents img {
  max-width: 100%;
  height: auto !important;
}

#news-detail-contents iframe {
  max-width: 100%;
}

#news-detail-back-btn {
  width: 7.08334vw;
  display: block;
  margin: 0 auto;
}

/* 再リセット */
#news-detail-contents li,
#news-detail-contents ol,
#news-detail-contents ul {
  text-indent: -1.6em;
  padding: 0 0 0 1.6em;
}

#news-detail-contents ol li { list-style: decimal; }
#news-detail-contents ul li { list-style: disc; }

#news-detail-contents blockquote {
  display: block;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 40px;
  -webkit-margin-end: 40px;
}

/*
#onair
-------------------------------*/
#onair-header,
#haishin-header {
  margin: 0 0 2.3958334vw;
  padding: 0 0 1.875vw;
  background: url(../img/common/wave.png) center bottom no-repeat;
  background-size: 100% auto;
}

#onair-contents {
  font-size: 1.25vw;
  line-height: 1.6em;
  color: #3c4c68;
}

.onair-txt0 {
  font-size: 1.77083334vw;
  text-align: center;
  color: #146fb9;
  font-weight: bold;
  white-space: nowrap;
  line-height: 1em;
}

.onair-txt0 span {
  font-size: 1.25vw;
}

.onair-txt1 {
  display: table;
  margin: 0 auto;
}

#haishin-container {
  background: rgba(255,255,255,.8);
  margin: 0 auto 3.125vw;
  padding: 6.25vw;
}

.haishin-box {
  width: 100%;
  height: 2.6041667vw;
  background: #146fb9;
  color: #fff;
  font-size: 1.25vw;
  font-weight: bold;
  margin: 0 0 .5208334vw;
}

.haishin-box a {
  color: inherit;
  align-items: center;
  padding: 0 1.041667vw;
  height: 100%;
  position: relative;
}

.haishin-box a::after {
  content: "";
  display: block;
  width: .625vw;
  height: .625vw;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  position: absolute;
  transform: rotate(-45deg);
  right: 1.041667vw;
}

.haishin-txt0 {
  width: 32%;
}

.haishin-txt1 {
  width: 30%;
}

.haishin-txt2 {
  width: 38%;
}


/*
#story
-------------------------------*/
.story {
  
}

.story-nav {
  margin: 0 auto 3.4375vw;
  color: #146fb9;
  font-family: 'Alata', sans-serif;
  font-size: .9375vw;
  text-align: center;
}

.story-nav-box {
  margin: 0 .5208334vw;
}

.story-nav-link {
  width: 4.47916667vw;
  height: 2.8125vw;
  line-height: 2.8125vw;
  background: url("../img/story/nav_bg_s_off.png") no-repeat;
  background-size: cover;
  color: inherit;
}

.story-nav-link.act,
.story-nav-link:hover {
  color: #fff;
  background: url("../img/story/nav_bg_s_on.png") no-repeat;
  background-size: cover;
}

.story-nav-link-intro {
  width: 10.15625vw;
  background: url("../img/story/nav_bg_off.png") no-repeat;
  background-size: cover;
}

.story-nav-link-intro:hover {
  color: #fff;
  background: url("../img/story/nav_bg_on.png") no-repeat;
  background-size: cover;
}

.story #contents-main {
  width: 100%;
}

.story #detail-container {
  width: 63.0208333vw;
}

.story-detail-ttl {
  text-align: center;
  color: #146fb9;
  font-size: 1.77083334vw;
  line-height: 1.5em;
  margin: 0 0 2.3958334vw;
  padding: 0 0 1.875vw;
  background: url(../img/common/wave.png) center bottom no-repeat;
  background-size: 100% auto;
}

.story-content {
  font-size: 1.0416667vw;
  line-height: 1.8em;
  letter-spacing: .7px;
}

.story-box img {
  width: 100%;
  vertical-align: bottom;
}

.story-content div {
  display: flex;
  height: 24.375vw;
  margin: 0 0 1em;
}

.story-content div p {
  width: 43.28125vw;
  height: 24.375vw;
  overflow: hidden;
  position: relative;
}

.story-content div p img {
  position: absolute;
  width: 100%;
}

.story-content div ul {
  width: 7.1875vw;
}

.story-content div ul li {
  line-height: 0em;
  height: calc(100% / 6);
  overflow: hidden;
  position: relative;
}

.story-content div ul li.act::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  background: rgba(0,0,0,.3);
  border: .15625vw solid #146fb9;
}

.story-content div ul li img {
  height: 100%;
  object-fit: cover;
}

#story-txt {
  text-align: center;
}

/*
#movie
-------------------------------*/
.movie {
  
}

.movie #contents-main {
  width: 79.1667vw;
}

.movie .movie-box {
  width: 36.9791667vw;
  height: 25vw;
  margin: 0 0 5.2vw;
}

.movie .movie-box:not(:nth-child(2n)) {
  margin-right: 5.2vw;
}

/*
#character
-------------------------------*/
#character {
  
}

#character-container {
}

.character-box {
  width: 12.5vw;
  margin: 0 4.375vw 4.0625vw 0;
}

.character-box:nth-child(4n) {
  margin: 0 0 4.0625vw;
}

.character-thumb {
  margin: 0 0 .9375vw;
}

.character-thumb-name {
  font-size: 1.041667vw;
  color: #146fb9;
  text-align: center;
}

#character-detail-container {
  position: fixed;
  z-index: 101;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: none;
  background: #70caff;
}

#detail-close {
  position: absolute;
  z-index: 10;
  top: 1.5625vw;
  right: 1.5625vw;
  width: 3.75vw;
  height: 3.75vw;
  cursor: pointer;
}

#character-detail-container-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.character-detail-box {
  position: relative;
  z-index: 2;
  width: 85.9375vw;
  height: 42.708334vw;
  display: flex;
  justify-content: space-between;
  opacity: 0;
}

.character-detail-pic {
  width: 38.0208334vw;
  order: 1;
}

.character-detail-main {
  width: 46.875vw;
  order: 2;
  position: relative;
}

.character-detail-txt-box {
  position: absolute;
  top: 3vw;
  left: 4.1667vw;
  letter-spacing: .2em;
}

.chara0 .character-detail-txt-box { color: #ea5c28; }
.chara1 .character-detail-txt-box { color: #000; }
.chara2 .character-detail-txt-box { color: #008ad1; }
.chara3 .character-detail-txt-box { color: #e4021d; }
.chara4 .character-detail-txt-box { color: #9cd502; }
.chara5 .character-detail-txt-box { color: #ff7db5; }
.chara6 .character-detail-txt-box { color: #6f309f; }
.chara7 .character-detail-txt-box { color: #dc9f01; }
.chara8 .character-detail-txt-box { color: #bd4550; }
.chara9 .character-detail-txt-box { color: #e990a1; }
.chara10 .character-detail-txt-box { color: #3d55a2; }
.chara11 .character-detail-txt-box { color: #eb8968; }
.chara12 .character-detail-txt-box { color: #f1be64; }

.character-detail-en {
  font-family: 'Alata', sans-serif;
  font-size: .9375vw;
  margin: 0 0 1vw;
  color: inherit;
}

.character-detail-name {
  font-size: 2.08334vw;
  font-weight: bold;
  line-height: 1em;
  color: inherit;
  margin: 0 0 1.9vw;
}

.character-detail-txt {
  color: #3b4453;
  font-size: 1.041667vw;
  line-height: 2em;
  width: 22.65625vw;
  letter-spacing: .05em;
}

.character-detail-img {
  width: 22.23958334vw;
  height: 49.01041667vw;
  position: absolute;
  z-index: 2;
  top: -1.61458334vw;
  right: .98958334vw;
}

.character-detail-surfer,
.character-detail-board {
  position: absolute;
  top: 0;
  left: 0;
}

.character-detail-board {
  opacity: 0;
}

.character-detail-change {
  position: absolute;
  z-index: 5;
  top: 1.9791667vw;
  right: -3.90625vw;
  width: 8.125vw;
  height: 2.23958334vw;
  line-height: 2.23958334vw;
  background: url("../img/character/btn_bg.png") no-repeat;
  background-size: cover;
  font-size: 1.041667vw;
  text-align: center;
  color: #fff;
  cursor: pointer;
}

.chara0 .character-detail-change {
  background: url("../img/character/0/btn_bg.png") no-repeat;
  background-size: cover;
}

.chara1 .character-detail-change {
  background: url("../img/character/1/btn_bg.png") no-repeat;
  background-size: cover;
}

.chara2 .character-detail-change {
  background: url("../img/character/2/btn_bg.png") no-repeat;
  background-size: cover;
}

.chara3 .character-detail-change {
  background: url("../img/character/3/btn_bg.png") no-repeat;
  background-size: cover;
}

.chara4 .character-detail-change {
  background: url("../img/character/4/btn_bg.png") no-repeat;
  background-size: cover;
}

.chara5 .character-detail-change {
  background: url("../img/character/5/btn_bg.png") no-repeat;
  background-size: cover;
}

.chara6 .character-detail-change {
  background: url("../img/character/6/btn_bg.png") no-repeat;
  background-size: cover;
}

.chara7 .character-detail-change {
  background: url("../img/character/7/btn_bg.png") no-repeat;
  background-size: cover;
}

.character-detail-bg {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.control-btn {
  width: 2.291667vw;
  height: 4.4791666vw;
  position: absolute;
  z-index: 10;
  top: calc((100vh - 4.4791666vw)/2);
  cursor: pointer;
}

#detail-next {
  right: 1.9791667vw;
}

#detail-prev {
  left: 1.9791667vw;
}


/****
sub
*****/
.character-detail-box.sub {
  justify-content: center;
}

.sub .character-detail-main {
  width: 57.8125vw;
}

.sub .character-detail-pic {
  display: none;
}

.sub .character-detail-change {
  display: none;
}

.sub .character-detail-img {
  pointer-events: none;
  width: 33.8541667vw;
  height: 48.69791667vw;
  top: -2.96875vw;
  right: 1.40625vw;
}

.sub .character-detail-surfer {
  display: block !important;
  opacity: 1 !important;
}

.sub .character-detail-board {
  display: none !important;
  opacity: 0 !important;
}

.sub .character-detail-name {
  margin: 0 0 1.3vw;
}


/*
#goods
-------------------------------*/
.goods {
  
}

.goods #contents-main {
  width: 79.1667vw;
}

.goods #tag-nav {
  width: 700px;
}

#goods-box-container {
  align-items: flex-start;
}

.goods-box {
  width: 22.91667vw;
  background: #fff;
  margin-bottom: 5.208334vw;
}

.goods-box:not(:nth-child(3n)) {
  margin-right: 5.208334vw;
}

.goods-box-link {
  display: block;
}

.goods-box-thumb {
  width: 100%;
  position: relative;
  display: block;
}

.goods-box-thumb::after {
  content: "";
  display: block;
  padding-top: 100%;
}

.goods-box-thumb-img {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  object-fit: contain;
}

.goods-box-ttl {
  font-size: .9375vw;
  padding: 1.5625vw;
  display: block;
  line-height: 1.5em;
}

/*--********************

@item

*********************--*/
#item-wrapper{
	background: #fff;
	width: 100%;
	min-height: 100%;
	padding: 52px;
}

.photo{
	width: 340px;
	height: 340px;
	margin: 0 0 20px 0;
	overflow: hidden;
	border: 1px solid #e4e4e4;
	position: relative;
}

.photo img{
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	margin: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.thumbnail{
	width: 340px;
  flex-wrap: wrap;
  margin: 20px 0 0 0;
}

.item_image{
	width: 60px;
	height: 60px;
	margin: 0 10px 10px 0;
	overflow: hidden;
	position: relative;
	/*border: 1px solid #e4e4e4;*/
}

.item_image:before{
	content: "";
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 2;
	top: 0px;
	left: 0px;
	border: 2px solid #146fb9;
	box-sizing: border-box;
}

.item_image.act:before,
.item_image:hover:before{
	display: block;
}

.item_image:nth-child(5n){
	margin: 0 0 10px 0;
}


.item_image .photo{
	width: 100%;
	height: 100%;
	margin: 0;
	display: block;
	top: 0px;
	position: absolute;
}

.item_image img{
	width: 100%;
	height: auto;
}

.item-txt-box{
	margin: 0 0 0 55px;
  line-height: 1.5em;
}

.item-ttl{
	font-size: 24px;
	color: #146fb9;
	padding: 0 0 30px 0;
  line-height: 1.5em;
}

.item-txt a{
	color: #146fb9;
}

.item-shop-container{
	margin: 5% 0;
}

.item-shop-container div{
	margin: 0 5px 0 0;
}

#cboxLoadedContent {
    background: #fff;
    padding: 1px;
}

#cboxOverlay {
    background: #146fb9;
    opacity: 0.9;
}




/*
#discography
-------------------------------*/
.disco #contents-main {
  width: 79.1667vw;
}

.disco #tag-nav {
  width: 700px;
}

#disco-box-container {
  align-items: flex-start;
}

.disco-box {
  width: 22.91667vw;
  background: #fff;
  margin-bottom: 5.208334vw;
}

.disco-box:not(:nth-child(3n)) {
  margin-right: 5.208334vw;
}

.disco-box-link {
  display: block;
  color: #3b4453;
}

.disco-box-thumb {
  width: 100%;
  position: relative;
  display: block;
}

.disco-box-thumb-img {
  width: 100%;
  height: auto;
}

.disco-box-ttl {
  font-size: .9375vw;
  padding: 1.5625vw;
  display: block;
  line-height: 1.5em;
}

/*
detail
-------------------------------*/
#disco-detail-container {
  width: 79.1667vw;
  margin: 0 auto 3.125vw;
  background: rgba(255,255,255,.8);
  font-size: 1.1458334vw;
  line-height: 1.5em;
}

#disco-detail-main {
  margin: 0 3.6458334vw;
}

.detail-main-inner {
  padding: 3.90625vw 0 2.6041667vw;
  /*border-bottom: 1px solid #146fb9;*/
}

.disco-detail-main-left {
  width: 26.041667vw;
  margin: 0 3.6458334vw 0 0;
}

#disco-detail-ttl {
  background: #146fb9;
  color: #fff;
  padding: 1.30208334vw 1.5625vw;
  font-size: 1.5625vw;
}

.disco-detail-jacket {
  width: 100%;
  margin: 0 0 1.5625vw;
}

.disco-detail-img {
  width: 100%;
}

.buy-btn a,
.download-btn a {
  width: 100%;
  height: 4.6875vw;
  line-height: 4.6875vw;
  display: block;
  background: #146fb9;
  font-size: 1.1458334vw;
  font-weight: bold;
  color: #fff;
  text-align: center;
  position: relative;
  margin: 0 0 1.041667vw;
}

.buy-btn a::after,
.download-btn a::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: .26041667vw 0 .26041667vw .46875vw;
  border-color: transparent transparent transparent #ffffff;
  position: absolute;
  top: 2.08334vw;
  right: 1.5625vw;
}

.disco-detail-main-right {
  width: calc(100% - 26.041667vw - 3.6458334vw);
}

.disco-detail-main-ttl {
  font-size: 1.3541667vw;
  font-weight: bold;
  padding: 0 0 1.5625vw;
}

.disco-detail-main-right iframe,
.disco-detail-main-right img {
  max-width: 100%;
}

#detail-main-footer {
  padding: 3.6458334vw 0;
  margin: 0 3.6458334vw;
  border-top: 1px solid #146fb9;
}

#detail-main-footer img {
  max-width: 100%;
  height: auto;
}

#download-box-container .box{
	padding: 10px;
}

.shop-ttl {
  text-align: center;
  padding: 20px;
}

@media all and (max-width:812px) {
	#download-box-container{
	}

	.ecList li{
		margin: 10px;
	}
	
	.coming-txt{
		font-size: 24px;
		text-align: center;
		margin: 30% auto;
	}

}


/*
#special
-------------------------------*/
#special-list-container {
  width: 50.5208334vw;
  margin: 0 auto 8.334vw;
}

.special-list-box {
  line-height: 0em;
  margin: 0 0 2.08334vw;
}

#special-detail-thumb {
  line-height: 0em;
  padding: 0 0 1.1458334vw;
}

/*************************************

スマホ

*************************************/
@media all and (max-width:812px) {
  
  /*
  #top
  -------------------------------*/
  #top {

  }

  #main {

  }
  
  #kv-logo-sp {
    display: block;
    position: absolute;
    z-index: 1;
    top: 10vw;
    left: 25.625vw;
    width: 48.75vw;
  }

  #kv-img {
    line-height: 0;
  }

  #kv-catch {
    display: none;
  }

  .main-news-container {
    display: none !important;
  }
  
  #main-slider-container {
    position: relative;
    overflow: hidden;
    height: calc(43.846153846vw + 13.846153846vw);
  }

  #main-slider {
    width: 100%;
    height: 43.846153846vw;
    margin: 0 auto;
    overflow: hidden;
  }

  #main-slider.slick-slider {
    height: auto;
    overflow: initial;
  }

  .main-slider-box {
    width: 100%;
    height: 43.846153846vw !important;
    overflow: hidden;
  }

  .main-slider-link {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .main-slider-img {
    width: 100%;
  }

  #main-slide-control {

  }

  .slick-arrow {
    width: 7.692307692vw;
    height: 7.692307692vw;
    border-right: 2px solid #146fb9;
    border-bottom: 2px solid #146fb9;
    position: absolute;
    z-index: 1;
    top: calc((39.0625vw - 11.076923076vw)/2);
  }

  .slick-arrow::before {
    display: none;
  }

  .slick-prev {
    left: 3vw;
  }

  .slick-next {
    right: 3vw;
  }

  #main-slider-pagination,
  .slick-dots {
    width: 100%;
    height: 13.846153846vw;
    display: flex !important;
    justify-content: center;
    align-items: center;
    position: initial !important;
  }

  .slick-dots li {
    position: relative;
    display: inline-block;
    width: 1.846153846vw;
    height: 1.846153846vw;
    margin: 0 2.307692307vw;
    padding: 0;
    cursor: pointer;
  }

  .slick-dots li button {
    width: 1.846153846vw;
    height: 1.846153846vw;
    padding: 0;
  }

  .slick-dots li button:before {
    width: 1.846153846vw;
    height: 1.846153846vw;
    color: #c2c2c2;
    opacity: 1;
  }

  .slick-dots li.slick-active button:before,
  .slick-dots li:hover button:before {
    color: #146fb9;
    opacity: 1;
  }

  .main-slider-pagination-btn {
    width: 1.846153846vw;
    height: 1.846153846vw;
    border-radius: 50%;
    background: #c2c2c2;
    margin: 0 .78125vw;
  }

  /*
  #news-twitter
  -------------------------------*/
  #news-twitter {
    width: 87.5vw;
    margin: 0 auto;
    padding: 10.625vw 0 23.4375vw;
  }

  .section-inner {
    width: 100%;
    display: block;
  }

  #top-news {
    width: 100%;
    margin: 0 0 10vw;
  }

  .section-contents-header {
    margin: 0 0 3.125vw;
  }

  .contents-ttl {
    font-size: 9.375vw;
  }

  .more-btn {
    width: 21.25vw;
  }

  .more-link {
    display: block;
  }

  #top-news-container {

  }

  .top-news-box {
    margin: 0 0 6.25vw;
  }

  /*.top-news-box:nth-last-child(1) {
    margin: 0;
  }*/

  .top-news-link {
    width: 100%;
    padding: 3.125vw  3.125vw 9.375vw;
    font-size: 4.0625vw;
    display: block;
  }

  .top-news-tag {
    font-size: 3.125vw;
    width: 30.46875vw;
    height: 8.4375vw;
    line-height: 8.4375vw;
    position: absolute;
    z-index: 2;
    top: 3.125vw;
    left: -3.125vw;
  }

  .top-news-thumb {
    width: 100%;
    margin: 0 0 7.8125vw;
  }

  .top-news-contents {
    width: 100%;
    padding: 0 0 0 1.30208334vw;
  }

  .top-news-ttl {
    font-weight: normal;
    line-height: 1.5em;
  }

  .top-news-date {
    font-size: 3.125vw;
    bottom: 3.125vw;
    right: 3.125vw;
  }

  #top-twitter {
    width: 100%;
  }

  .twitter-timeline {
    width: 100%;
    height: 78.125vw !important;
  }

  #topics {
    background: #eef5ff;
    padding: 15.384615384vw 0;
  }

  #topics .contents-ttl {
    text-align: center;
    margin: 0 0 6.153846153vw;
  }
  
  #topics-container {
    width: 62vw;
    margin: 0 auto;
    display: block;
  }

  .topics-box {
    width: 100vw;
    margin: 0;
  }

  .topics-box-link {
    display: block;
    color: #3c4c68;
  }

  .topics-thumb {
    width: 100%;
    position: relative;
    background: #000;
    margin: 0 0 1.04vw;
    overflow: hidden;
  }

  .topics-thumb::after {
    content: "";
    display: block;
    padding-top: 100%;
  }

  .topics-thumb-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
  }

  .topics-txt {
    font-size: 4vw;
    line-height: 1.45em;
  }
  
  #topics .slick-arrow {
    top: 27vw;
  }

  #topics .slick-next {
    right: -11vw;
  }

  #topics .slick-prev {
    left: -11vw;
  }

  /*
  .scection
  -------------------------------*/
  .section {
    width: 100%;
    height: auto;
    display: block;
    padding: 23.4375vw 6.25vw;
  }

  .section .contents-ttl {
    margin: 0 0 9.375vw;
  }
  
  #introduction .contents-ttl {
    font-size: 8.28125vw;
  }

  .section-contents {
    width: 87.5vw;
    height: 87.5vw;
  }

  .section-contents-inner {
    margin: 0 9.375vw;
  }

  .section-contents-small {
    width: 87.5vw;
    min-height: 87.5vw;
    padding: 9.375vw;
  }
  
  .section-contents-small:not(:nth-last-child(1)) {
    margin: 0 0 6.25vw;
  }

  .txt {
    font-size: 2.5vw;
    letter-spacing: 0;
  }

  .section-contents-inner .txt:not(:nth-last-child(1)) {
    padding: 0 0 3.125vw;
  }

  /*
  #movie
  -------------------------------*/
  #movie {
    display: block;
    height: 202.34375vw;
    background: url("../img/top/movie_bg.jpg") no-repeat;
    background-size: cover;
    position: relative;
    padding: 23.4375vw 6.25vw;
  }
  
  #movie .contents-ttl {
    margin: 0;
    padding: 0 0 9.375vw;
  }
  
  .movie-box-container {
    display: block;
  }

  .movie-box {
    width: 100%;
    height: auto;
    /*height: 57.692307692vw;*/
    margin: 0;
  }
  
  .movie-box:nth-child(2) {
    margin: 9.23076923vw 0 0;
  }

  .movie-txt {
    height: auto;
    min-height: 9.23076923vw;
    font-size: 4vw;
  }

  .movie-thumb {
    width: 100%;
    position: relative;
    bottom: auto;
    left: auto;
  }

  /*
  #movie .contents-ttl {
    margin: 12.5vw 0 7.03125vw;
  }

  #movie-thumb {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  #movie-thumb::after {
    content: "";
    display: block;
    padding-top: 56.25%;
  }

  .movie-thumb-img {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  #movie .txt {
    font-size: 3.75vw;
    
  }
  */
  #intro-story {
    display: block;
    background: none;
  }

  /*
  #introduction
  -------------------------------*/
  #introduction {
    width: 100%;
    background: url("../img/top/intro_bg.jpg") no-repeat;
    background-size: cover;
    padding: 23.4375vw 6.25vw;
  }

  /*
  #story
  -------------------------------*/
  #story {
    width: 100%;
    background: url("../img/top/story_bg.jpg") no-repeat;
    background-size: cover;
    padding: 23.4375vw 6.25vw;
  }

  /*
  #caststaff
  -------------------------------*/
  #caststaff {
    height: auto;
    background: url("../img/top/caststaff_bg.jpg") no-repeat;
    background-size: cover;
    padding: 23.4375vw 6.25vw;
  }

  .caststaff-list {

  }

  .caststaff-box {
    width: 50%;
    margin: 0 0 4.6875vw;
  }

  .caststaff-txt0 {
    font-size: 3.125vw;
  }

  .caststaff-txt1 {
    font-size: 4.0625vw;
  }
  
  .staff-box {
    padding: 9.375vw 5.384615384vw;
    position: relative;
  }
  
  .caststaff-more {
    font-size: 4.153846153vw;
    width: 31.692307692vw;
    height: 9.076923076vw;
    line-height: 9.076923076vw;
    background: url(../img/common/board.png) no-repeat;
    background-size: cover;
    top: 9.692307692vw;
    right: 6.153846153vw;
    cursor: default;
  }
  
  .staff-box .caststaff-txt0 {
    font-size: 2.769230769vw;
  }
  
  .staff-box .caststaff-txt1 {
    font-size: 3.384615384vw;
  }
  
  /*
  #news
  -------------------------------*/
  #news {

  }

  #sub-ttl {
    font-size: 9.375vw;
    padding: 0 0 9.375vw;
  }

  #contents-main {
    width: 87.5vw;
    margin: 0 auto;
    padding: 23.4375vw 0 27.34375vw;
  }

  #tag-nav {
    width: 81.25vw;
    margin: 0 auto 6.25vw;
    justify-content: space-between;
  }

  .tag-nav-box {
    font-size: 3.4375vw;
    width: 36.5625vw;
    height: 10.15625vw;
    line-height: 10.15625vw;
    background: url("../img/news/tag_bg.png") no-repeat;
    background-size: cover;
    margin: 0 0 3.125vw;
  }

  .tag-nav-box.act,
  .tag-nav-box:hover {
    color: #fff;
    background: url("../img/news/tag_bg_act.png") no-repeat;
    background-size: cover;
  }

  .tag-nav-btn {
    color: inherit;
    display: block;
  }

  .news-box {
    margin: 0 0 6.25vw;
  }

  .news-box:nth-last-child(1) {
    margin: 0;
  }

  .news-link {
    width: 100%;
    padding: 3.125vw  3.125vw 9.375vw;
    font-size: 4.0625vw;
    display: block;
  }

  .news-tag {
    font-size: 3.125vw;
    width: 30.46875vw;
    height: 8.4375vw;
    line-height: 8.4375vw;
    position: absolute;
    z-index: 2;
    top: 3.125vw;
    left: -3.125vw;
  }

  .news-thumb {
    width: 100%;
    margin: 0 0 7.8125vw;
  }

  .news-contents {
    width: 100%;
    padding: 0 0 0 1.30208334vw;
  }

  .news-ttl {
    font-weight: normal;
    line-height: 1.5em;
  }

  .news-date {
    font-size: 3.125vw;
    bottom: 3.125vw;
    right: 3.125vw;
  }

  /*
  .news-box {
    margin: 0 0 1.041667vw;
    background: rgba(255,255,255,.8);
  }

  .news-box:nth-last-child(1) {
    margin: 0;
  }

  .news-link {
    width: 100%;
    border: 1px solid #dee7f2;
    padding: .98958334vw;
    font-size: 1.041667vw;
    align-items: center;
    color: #3c4c68;
    position: relative;
  }

  .news-tag {
    font-family: 'Alata', sans-serif;
    font-size: .8334vw;
    letter-spacing: .5px;
    color: #fff;
    text-align: center;
    width: 7.5vw;
    height: 2.13541667vw;
    line-height: 2.13541667vw;
    background: url("../img/common/board.png") no-repeat;
    background-size: cover;
    position: absolute;
    z-index: 2;
    top: 1.1458334vw;
    left: -.88541667vw;
    white-space: nowrap;
  }

  .news-thumb {
    width: 16.667vw;
    position: relative;
    background: #eee;
  }

  .news-thumb::after {
    content: "";
    display: block;
    padding-top: 56.037151702%;
  }

  .news-thumb-img {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .news-contents {
    width: calc(100% - 16.82291667vw);
    padding: 0 0 0 1.30208334vw;
  }

  .news-ttl {
    font-weight: normal;
    line-height: 1.5em;
  }

  .news-date {
    font-family: 'Alata', sans-serif;
    font-size: .8334vw;
    color: #146fb9;
    position: absolute;
    bottom: .98958334vw;
    right: .98958334vw;
  }
  */

  #detail-container {
    margin: 0 auto 3.125vw;
    padding: 4.6875vw;
  }

  #news-detail-header {
    margin: 0 0 7.8125vw;
    padding: 0 0 7.8125vw;
    background: url("../img/common/wave.png") center bottom no-repeat;
    background-size: auto 1.25vw;
  }

  #news-detail-header-inner {
    margin: 0 0 7.8125vw;
    align-items: center;
  }

  #news-detail-tag {
    font-size: 3.125vw;
    width: 30.46875vw;
    height: 8.4375vw;
    line-height: 8.4375vw;
    background: url("../img/common/board.png") no-repeat;
    background-size: cover;
    margin: 0 3.125vw 0 0;
  }

  #news-detail-date {
    font-size: 3.125vw;
  }

  #news-detail-ttl {
    font-size: 4.6875vw;
    line-height: 1.7em;
  }

  #news-detail-contents {
    font-size: 4.0625vw;
    line-height: 1.8em;
  }

  #news-detail-contents iframe {
    max-width: 100%;
    width: 78vw;
    height: calc(78vw * .5625);
  }

  #news-detail-back-btn {
    width: 21.25vw;
  }
  
  /*
  #onair
  -------------------------------*/
  #onair-header,
  #haishin-header {
    margin: 0 0 4.21875vw;
    padding: 0 0 5.78125vw;
    background: url("../img/common/wave.png") center bottom no-repeat;
    background-size: auto 1.25vw;
  }
  
  .onair #detail-container {
    margin: 0 auto 7.8125vw;
  }

  #onair-contents {
    font-size: 3.75vw;
    line-height: 1.7em;
  }

  .onair-txt0 {
    font-size: 5vw;
    white-space: normal;
    line-height: 1.375em;
  }

  .onair-txt0 span {
    font-size: 3.75vw;
  }

  .onair-txt1 {
    display: table;
    margin: 0 auto;
  }
  
  #haishin-container {
    margin: 0 auto 3.125vw;
    padding: 4.6875vw;
  }

  .haishin-box {
    width: 100%;
    height: auto;
    background: #146fb9;
    color: #fff;
    font-size: 4.0625vw;
    font-weight: bold;
    margin: 0 0 1.5625vw;
  }

  .haishin-box a {
    align-items: center;
    padding: 3.125vw;
  }

  .haishin-box a::after {
    width: 1.875vw;
    height: 1.875vw;
    border-right: .3125vw solid #fff;
    border-bottom: .3125vw solid #fff;
    right: 3.125vw;
  }

  .haishin-txt0 {
    width: 100%;
    padding: 0 0 3.125vw;
  }

  .haishin-txt1 {
    width: 50%;
  }

  .haishin-txt2 {
    width: 50%;
  }
  .p0 {
    padding: 0;
  }

  /*
  #story
  -------------------------------*/
  .story {

  }

  .story-nav {
    margin: 0 auto 3.4375vw;
    font-size: 3.4375vw;
  }

  .story-nav-box {
    margin: 0 .625vw 3.125vw;
  }
  
  .story-nav-box:nth-child(1) {
    width: 100%;
  }

  .story-nav-link {
    width: 14.21875vw;
    height: 9.0625vw;
    line-height: 9.0625vw;
    background: url("../img/story/nav_bg_s_off.png") no-repeat;
    background-size: cover;
  }

  .story-nav-link.act {
    color: #fff;
    background: url("../img/story/nav_bg_s_on.png") no-repeat;
    background-size: cover;
  }

  .story-nav-link-intro {
    width: 36.5625vw;
    height: 10.15625vw;
    line-height: 10.15625vw;
    background: url("../img/story/nav_bg_off.png") no-repeat;
    background-size: cover;
  }

  .story-nav-link-intro:hover {
    color: #fff;
    background: url("../img/story/nav_bg_on.png") no-repeat;
    background-size: cover;
  }

  .story #contents-main {
    width: 100%;
  }

  .story #detail-container {
    width: 87.5vw;
  }

  .story-detail-ttl {
    font-size: 5vw;
    margin: 0 0 4.21875vw;
    padding: 0 0 5.78125vw;
    background: url("../img/common/wave.png") center bottom no-repeat;
    background-size: auto 1.25vw;
  }

  .story-content {
    font-size: 4.0625vw;
  }

  .story-box img {
    width: 100%;
    vertical-align: bottom;
  }

  .story-content div {
    display: block;
    height: auto;
    margin: 0 0 1em;
    width: 87.5vw;
    position: relative;
    left: calc((100% - 87.5vw)/2);
  }

  .story-content div p {
    width: 100%;
    height: 49.21875vw;
  }
  
  /*.story-content div p img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }*/

  .story-content div ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .story-content div ul li {
    line-height: 0em;
    height: 16.5625vw;
    width: calc(100% / 3);
  }

  .story-content div ul li.act::after {
    border: .46875vw solid #146fb9;
  }

  .story-content div ul li img {
    height: 100%;
    object-fit: cover;
  }

  #story-txt {
    text-align: center;
  }

  /*
  #movie
  -------------------------------*/
  .movie {

  }

  .movie #contents-main {
    width: 87.5vw;
  }

  .movie .movie-box {
    width: 87.5vw;
    height: 58.59375vw;
    margin: 0 0 9.375vw;
  }

  .movie .movie-box:not(:nth-child(2n)) {
    margin-right: 0;
  }

  /*
  #character
  -------------------------------*/
  #character {

  }

  #character-container {
    justify-content: space-between;
  }

  .character-box {
    width: 37.5vw;
    margin: 0 0 12.5vw;
  }

  .character-box:nth-child(4n) {
    margin: 0 0 12.5vw;
  }

  .character-thumb {
    margin: 0 0 3.125vw;
  }

  .character-thumb-name {
    font-size: 3.75vw;
  }

  #character-detail-container {
    overflow: auto;
  }

  #detail-close {
    position: absolute;
    z-index: 10;
    top: 3.125vw;
    right: 3.125vw;
    width: 11.25vw;
    height: 11.25vw;
    cursor: default;
  }

  #character-detail-container-inner {
    display: block;
    width: 87.5vw;
    height: auto;
    margin: 0 auto;
  }

  .character-detail-box {
    display: block;
    width: 100%;
    height: auto;
    margin: 23.4375vw 0;
  }

  .character-detail-pic {
    width: 100%;
  }

  .character-detail-main {
    width: 100%;
    position: relative;
    margin: 0 0 7.8125vw;
  }
  
  .character-detail-txt-box {
    top: 131.25vw;
    left: 9.375vw;
  }

  .character-detail-en {
    font-size: 3.4375vw;
    margin: 0 0 3.125vw;
  }

  .character-detail-name {
    font-size: 7.5vw;
    margin: 0 0 7vw;
  }

  .character-detail-txt {
    font-size: 3.75vw;
    width: 68.75vw;
  }
  
  .chara6 .character-detail-txt {
    line-height: 1.5em;
    letter-spacing: 0;
  }

  .character-detail-img {
    width: 66.71875vw;
    height: auto;
    position: absolute;
    z-index: 2;
    top: -23.125vw;
    left: 5.625vw;
    right: auto;
  }

  .character-detail-surfer,
  .character-detail-board {
    position: absolute;
    top: 0;
    left: 0;
  }

  .character-detail-board {
  }

  .character-detail-change {
    position: absolute;
    z-index: 5;
    top: 6.25vw;
    right: -3.125vw;
    width: 24.375vw;
    height: 6.71875vw;
    line-height: 6.71875vw;
    font-size: 3.125vw;
    background-size: cover;
  }
  
  .character-detail-bg {
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }

  .control-btn {
    width: 6.71875vw;
    height: 13.59375vw;

    top: 71.25vw;
    cursor: default;
  }

  #detail-next {
    right: 9.375vw;
  }

  #detail-prev {
    left: 9.375vw;
  }
  
  /****
  sub
  *****/
  .character-detail-box.sub {
    justify-content: center;
  }

  .sub .character-detail-main {
    width: 100%;
  }

  .sub .character-detail-pic {
    display: none;
  }

  .sub .character-detail-change {
    display: none;
  }

  .sub .character-detail-img {
    pointer-events: none;
    width: 100%;
    height: auto;
    top: -11.40625vw;
    right: 0;
    left: 0;
  }

  .sub .character-detail-surfer {
    display: none !important;
    opacity: 0 !important;    
  }

  .sub .character-detail-board {
    display: block !important;
    opacity: 1 !important;
  }

  .sub .character-detail-name {
    margin: 0 0 1.3vw;
  }
  
  /*
  #goods
  -------------------------------*/
  .goods {

  }
  
  .goods #tag-nav {
    width: 93.75vw;
    margin: 0 auto 6.25vw;
  }

  .goods .tag-nav-box {
    width: 44.21875vw;
    height: 12.5vw;
  }

  .goods #contents-main {
    width: 100%;
  }
  
  #goods-box-container {
    width: 87.5vw;
    margin: 0 auto;
    display: block;
  }

  .goods-box {
    width: 100%;
    margin-bottom: 9.375vw;
  }

  .goods-box:not(:nth-child(3n)) {
    margin-right: 0;
  }

  .goods-box-ttl {
    font-size: 4.0625vw;
    padding: 3.125vw;
  }
  
	/*--********************

	@item

	*********************--*/
	#item-wrapper{
		background: #fff;
		width: 100%;
		min-height: 100%;
		padding: 5%;
	}
	
	#item-wrapper-inner{
		display: block;
	}
	
	.item-box{
		    width: 90%;
    margin: 0 auto;
	}
	
	.item-img-box{
		margin: 0 0 3% 0;
	}

	.photo{
		width: 100%;
		height: auto;
		margin: 0 0 3% 0;
		overflow: hidden;
		border: 1px solid #e4e4e4;
		position: relative;
	}
	
	.photo:after{
		content: "";
		display: block;
		padding-top: 100%;
	}
	
	.photo img{
		width: 100%;
		position: absolute;
		z-index: 1;
	}

	.thumbnail{
		width: 100%;
	}

	.item_image{
		width: 24%;
		height: auto;
		margin: 0 1.33% 3% 0;
		overflow: hidden;
		position: relative;
		line-height: 0em;
	}
	
	.item_image:after{
		content: "";
		display: block;
		padding-top: 100%;
	}

	.item_image:nth-child(5n){
		margin: 0 1.33% 3% 0;
	}
	
	.item_image:nth-child(4n){
		margin: 0 0 3% 0;
	}
	
	
	.item_image .photo{
		position: absolute;
		width: 100%;
		height: 100%;
		margin: 0;
		top: 0px;
	}

	.item_image .photo img{
		width: 100%;
		height: auto;
		
	}

	.item-txt-box{
		margin: 0;
	}

	.item-ttl{
		font-size: 20px;
		padding: 0 0 4% 0;
	}

	.item-txt a{
	}


  /*
  #discography
  -------------------------------*/
  .disco #contents-main {
    width: 87.5vw;
  }

  .disco #tag-nav {
    width: 81.25vw;
    margin: 0 auto 6.25vw;
  }

  #disco-box-container {
    align-items: flex-start;
  }

  .disco-box {
    width: 100%;
    margin-bottom: 9.375vw;
  }

  .disco-box:not(:nth-child(3n)) {
    margin-right: 0;
  }

  .disco-box-link {
  }

  .disco-box-thumb {
  }

  .disco-box-ttl {
    font-size: 4.0625vw;
    padding: 3.125vw;
  }

  /*
  detail
  -------------------------------*/
  #disco-detail-container {
    width: 100%;
    margin: 0 auto 3.125vw;
    font-size: 4.0625vw;
    line-height: 1.5em;
  }

  #disco-detail-main {
    margin: 6.25vw;
  }

  .detail-main-inner {
    margin: 0 0 6.25vw;
    padding: 0 0 6.25vw;
  }

  .disco-detail-main-left {
    width: 100%;
    margin: 0 0 4.6875vw;
  }

  #disco-detail-ttl {
    padding: 3.125vw;
    font-size: 5.625vw;
    line-height: 1.5em;
  }

  .disco-detail-jacket {
    width: 100%;
    margin: 0 0 6.25vw;
  }

  .disco-detail-img {
    width: 100%;
  }

  .buy-btn a,
  .download-btn a {
    width: 100%;
    height: 17.1875vw;
    line-height: 17.1875vw;
    font-size: 4.0625vw;
    margin: 0 0 3.125vw;
  }

  .buy-btn a::after,
  .download-btn a::after {
    border-width: .769230769vw 0 .769230769vw 1.384615384vw;
    top: 7.69230769vw;
    right: 4.615384615vw;
  }

  .disco-detail-main-right {
    width: 100%;
  }

  .disco-detail-main-ttl {
    font-size: 4.6875vw;
    padding: 0 0 6.25vw;
  }

  #detail-main-footer {
    padding: 0 0 6.25vw;
    margin: 06.25vw;
  }

  /*
  #special
  -------------------------------*/
  #special-list-container {
    width: 81.25vw;
    margin: 0 auto;
  }

  .special-list-box {
    margin: 0 0 6.25vw;
  }

  #special-detail-thumb {
    padding: 3.125vw 0 0;
  }


}