@charset "utf-8";
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  outline: 0;
  border: none;
  background: transparent; 
  vertical-align: baseline;
}
body {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
}
img {vertical-align: bottom;}
a {text-decoration: none;}
a:hover {text-decoration: none;}

.debug {
  width: 100%;
  height: 20px;
  position: fixed;
  z-index: 20000;
  text-align: center;
  color: #ff0000;
  background-color: #eee;
  top: 0;
  display: none !important;
}
.pc {display: block;}
.sp {display: none !important;}

.nolink a,
.nolink {
  opacity: .5;
  cursor: default;
  background-color: #fff !important;;
}
.nolink a {
  color: #ff919e !important;
}

@keyframes fadeInCatch{
  0% {
    opacity: 0;
    top: 20%;
  }
  100% {
    opacity: 1;
    top: 5%;
  }
}
@keyframes fadeIn5th{
  0% {
    opacity: 0;
    transform: rotate(111deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}

body {
  width: 100%;
  font-size: 15px;
  line-height: 1.3em;
  min-height: 100vh;
  color: #383838;
 }
#mainwrap {
  width: 100%;
  height: 100%;
}
.bgcommon {
  background-image: url(../img/BG_common.webp);
}

#menuwrap {
  width: 100%;
  height: 86px;
  position: fixed;
  top: 0;
  background-color: #FFF;
  z-index: 100;
}
#menubox {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  position: relative;
}
#title {
  width: 150px;
  height: 86px;
}
#title img {
  width: 100%;
  height: 100%;
  display: block;
}

#navibox {
  width: 788px;
  list-style: none;
  display: flex;
  justify-content: space-around;
}
#menuarea li,
#navibox li {
  height: 36px;
  margin: auto;
  top: auto;
  bottom: auto;
}
#menuarea {
  width: 130px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}
#menuarea li {
  margin: 5px auto;
  width: 130px;
  background-repeat: no-repeat;
  background-position: center top;
}
#menuarea li:hover {
  background-position: center bottom;
}
#title:hover,
#menuarea li:hover,
#navibox li:hover {
  animation: pulse;
  animation-duration: 1s;
}
#men_topics,
#nav_topics {
  width: 91px;
  background-image: url(../img/nav_topics.webp);
}
#men_story,
#nav_story {
  width: 90px;
  background-image: url(../img/nav_story.webp);
}
#men_chara,
#nav_chara {
  width: 121px;
  background-image: url(../img/nav_chara.webp);
}
#men_gallery,
#nav_gallery {
  width: 101px;
  background-image: url(../img/nav_gallery.webp);
}
#men_download,
#nav_download {
  width: 120px;
  background-image: url(../img/nav_download.webp);
}
#men_special,
#nav_special {
  width: 102px;
  background-image: url(../img/nav_special.webp);
}
#men_product,
#nav_product {
  width: 103px;
  background-image: url(../img/nav_product.webp);
}
#menuarea a,
#navibox a {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  text-indent: 100em;
}
#menuarea li:hover,
#navibox li:hover {
  background-position: center bottom;
}
.offnavi a:hover,
.offnavi a,
.offnavi:hover,
.offnavi {
  opacity: .3;
  background-position: top center !important;
  cursor: default !important;
}

.menu-btn {
  position: fixed;
  top: 10px;
  right: 0px;
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  cursor: pointer;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background-color: #e40a3c;
  position: absolute;
}
.menu-btn span:before {
  bottom: 8px;
}
.menu-btn span:after {
  top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
}
.list {
  display: flex;
  flex-wrap: wrap;
}

.navwrap {
  width: 100%;
  height: 0%;
  position: fixed;
  z-index: 100;
  background-image: url(../img/white80.webp);
  display: none;
  overflow: hidden;
}
.menu-trigger {
  width: 48px;
  height: 48px;
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  border-radius: 10%;
  margin: auto;
  background-color: #fff;
  z-index: 9999;
  border: 1px solid #e40a3c;
}
.menu-trigger:hover {
  cursor: pointer;
}
.menu-trigger div:first-child {
  margin-top: 16px;
}
.menu-trigger div {
  width: 70%;
  height: 3px;
  background: #e40a3c;
  margin: 4px auto;
  transition: all 0.3s;
  backface-visibility: hidden;
  border-radius: 2px;
}
.menu-trigger.on .top {
  transform: rotate(45deg) translate(5px, 5px);
}
.menu-trigger.on .middle {
  opacity: 0;
}
.menu-trigger.on .bottom {
  transform: rotate(-45deg) translate(5px, -5px);
}
.blur {
  filter: blur(3px);
}
























#topwrap {
  width: 100%;
  min-height: 600px;
  position: relative;
  background-image: url(../img/top_BG.webp);
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}
#topwrap img {
  width: 100%;
}
#topimg {
  position: relative;
  top: 0;
  z-index: 0;
}
#topinner {
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  background-image: url(../img/top_chara.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.topbox{
  width: 30%;
  max-width: 195px;
  max-height: 195px;
  background: #eee;
  position: relative;
  overflow: hidden;
  border-radius: 4%;
  box-shadow: 0px 0px 10px #fff;
}
.topbox::before{
  content: "";
  padding-top: 100%;
  
}
#tb01 {
  top: 5%;
  left: 15%;
}
#tb02 {
  top: 10%;
  left: 15%;
}
.linkran {
  width: 10%;
  max-width:  75px;
  max-height: 75px;
  position: absolute;
  margin: auto;
  left: -5.5%;
  bottom: 0%;
  top: 0%;
  animation-delay: 1s;
  animation-play-state:running;
  animation: ranlink 5s ease-out infinite;
}
.linkran img {
  width: 100%;
}
@keyframes ranlink{
  0% {
    bottom: 0%;
  }
  50% {
    bottom: 10%;
  }
  100% {
    bottom: 0%;
  }
}
.topcatch {
  height: 55%;
  width: auto;
  max-width: 152px;
  max-height: 582px;
  position: absolute;
  right: 13%;
  top: 5%;
  opacity: 0;
  background-image: url(../img/top_catch.webp);
  background-size: contain;
  background-repeat: no-repeat;
  animation-name: fadeInCatch;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function:ease-out;
}
.topcatch img {
  width: 100%;
  height: 100%;
}
.top5th {
  width: 147px;
  height: 149px;
  position: absolute;
  right: 5%;
  top: 50%;
  opacity: 0;
  animation-name: fadeIn5th;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-delay: 1s;
  animation-timing-function:ease-out;
}
.toptitle {
  width: 40%;
  max-width: 477px;
  max-height: 320px;
  position: absolute;
  right: 6%;
  top: 62%;
}
.topreleace {
  width: 100%;
  max-width: 1079px;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 35px;
}


#topicswrap {
  width: 100%;
  min-height: 527px;
  background-image: url(../img/BG_topics.webp);
  background-repeat: no-repeat;
  background-position: center;
  border-top: 1px solid #FFF;
}

h2 {
  width: 100%;
  height: 20px;
  overflow: hidden;
  text-indent: 100em;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
#h2_topics {
  background-image: url(../img/h2_topics.webp);
}
#h2_story {
  background-image: url(../img/h2_story.webp);
  margin-top: 50px;
}
#h2_chara {
  background-image: url(../img/h2_chara.webp);
  margin-top: 50px;
}
#h2_gallery {
  background-image: url(../img/h2_gallery.webp);
  margin-top: 70px;
}
#h2_down {
  background-image: url(../img/h2_down.webp);
  margin-top: 90px;
}
#h2_special {
  background-image: url(../img/h2_special.webp);
  margin-top: 80px;
}
#h2_product {
  background-image: url(../img/h2_product.webp);
  margin-top: 80px;
}





.decoline {
  width: 100%;
  height: 11px;
  margin: 30px auto;
  background-image: url(../img/deco_line.webp);
  background-repeat: no-repeat;
  background-position: center;
}


#topicsarea {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.topicsbox {
  width: 320px !important;
  height: 240px !important;
  position: relative;
}
.topicsbox img {
  width: 100%;
  height: auto;
  position: absolute;
}
.topicstxt {
  width: 80%;
  height: 88px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.topicsbox p {
  width: 100%;
  font-size: 160%;
  font-weight: 900;
  text-align: center;
  line-height: 1.3em;
  padding-bottom: 5px;
}
.topicsbox p::first-letter {
  color: #d12929;
}
.topicsbox a {
  color: #000;
}


#infowrap {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
}
#newswrap {
  width: 50%;
  min-width: 500px;
}
#newswrap h3 {
  width: 100%;
  height: 44px;
  background-image: url(../img/h3_news.webp);
  background-repeat: no-repeat;
  background-size: 100%;
  overflow: hidden;
  text-indent: 100em;
}
#newsbox {
  width: 90%;
  margin-left: auto;
  border-right: 1.5px solid #0c072d;
  padding-right: 20px;
  padding-bottom: 30px;
}
dl {
  width: 100%;
  margin-bottom: 15px;
}
dt {color: #858585;}
dd {margin-top: 5px;}



#twitterwrap {
  width: 50%;
  min-width: 300px;
  height: 300px !important;
  overflow: hidden;
}
#twitterwrap h3 {
  width: 100%;
  height: 44px;
  background-image: url(../img/h3_twitter.webp);
  background-repeat: no-repeat;
  background-size: 100%;
  overflow: hidden;
  text-indent: 100em;
}
.twitter-timeline {
  width: 95% !important;
  margin-left: 10px;
  height: 300px !important;
  overflow: scroll !important;
}




#storywrap {
  width: 100%;
  background-image: url(../img/BG_story.webp);
  background-position: top center;
}
#storytxtimg {
  display: none;
}
#storytxt {
  display: block;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
#storytxt p {
  width: 100%;
  padding-top: 110px;
  padding-bottom: 120px;
  text-shadow: 0px 0px 4px #FFF, 0px 0px 4px #FFF, 0px 0px 4px #FFF;
  line-height: 1.5em;
  text-align: center;
  font-size: 16pt;
}
#storytxt span {
  width: 100%;
  display: block;
  font-size: 120%;
  color: #d12929;
  font-weight: bolder;
  text-align: center;
  font-size: 16pt;
}


#charawrap {
  width: 100%;
  background-image: url(../img/BG_chara.webp);
  background-position: top center;
}
.charaarea {
  width: 100%;
  min-height: 1000px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.charabox {
  width: 100%;
  height: 1030px;
  position: relative;
  top: 130px;
}
.charast {
  width: 100%;
  max-width: 500px;
  position: absolute;
  left: 0;
  top: 0;
}
.charast img {
  width: 100%;
}
.charaname {
  width: 100%;
  max-width: 591px;
  position: absolute;
  top: 9.3%;
  right: 0;
}
.charaname img {
  width: 100%;
}
.charatxt {
  width: 90%;
  height: 100%;
  max-width: 490px;
  max-height: 418px;
  background-image: url(../img/chara/BG_prof.webp);
  position: absolute;
  top: 23%;
  right: 2%;
}
.charatxt p {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  line-height: 1.8em;
}
.threesize {
  width: 80%;
  max-width: 490px;
  margin-left: auto;
  margin-right: auto;
  line-height: 2em;
}
.threesize span {
  color: #f92f18;
}

.charavoice {
  width: 90%;
  max-width: 365px;
  height: 120px;
  background-image: url(../img/chara/BG_voice.webp);
  background-repeat: no-repeat;
  position: absolute;
  top: 71%;
  right: 1.5%;
}
.charavoice ul {
  width: 100%;
  list-style: none;
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
.charavoice li {
  width: 48px;
  height: 77px;
  background-position: top center;
  cursor: pointer;
  box-shadow: 5px 5px 5px rgba(0,0,0,.1);
  margin-right: 5px;
  margin-left: 5px;
}
.charavoice li:hover {
  background-position: bottom center;
}
.charavoice a {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  text-indent: 100em;
}
.charavoice li:nth-of-type(1) {background-image: url(../img/chara/voiceA01.webp);}
.charavoice li:nth-of-type(2) {background-image: url(../img/chara/voiceA02.webp);}
.charavoice li:nth-of-type(3) {background-image: url(../img/chara/voiceA03.webp);}
.charavoice li:nth-of-type(4) {background-image: url(../img/chara/voiceB01.webp);}
.charavoice li:nth-of-type(5) {background-image: url(../img/chara/voiceB02.webp);}
.charavoice li:nth-of-type(6) {background-image: url(../img/chara/voiceB03.webp);}
.voicenone {
  background-image: none !important;
  box-shadow: none !important;
  cursor: default !important;
}

.subv li:nth-of-type(4) {background-image: url(../img/chara/voiceC01.webp);}
.subv li:nth-of-type(5) {background-image: url(../img/chara/voiceC02.webp);}
.subv li:nth-of-type(6) {background-image: url(../img/chara/voiceC03.webp);}




.charaarea .slick-dots {
  width: 100%;
  height: 200px;
  list-style: none !important;
  top: 0px;
}
.charaarea .slick-dots li:hover {
  background-position: bottom center !important;
}
.charaarea .slick-dots li:nth-of-type(1) {
  width: 201px !important;
  height: 200px !important;
  overflow: hidden !important;
  background-image: url(../img/chara/select_00.webp);
  opacity: 1 !important;
}
.charaarea .slick-dots li:nth-of-type(2) {
  width: 97px !important;
  height: 96px !important;
  overflow: hidden !important;
  background-image: url(../img/chara/select_01.webp);
  opacity: 1 !important;
  margin-bottom: 45px;
}
.charaarea .slick-dots li:nth-of-type(3) {
  width: 96px !important;
  height: 96px !important;
  overflow: hidden !important;
  background-image: url(../img/chara/select_02.webp);
  opacity: 1 !important;
  margin-bottom: 45px;
}
.charaarea .slick-dots li:nth-of-type(4) {
  width: 96px !important;
  height: 96px !important;
  overflow: hidden !important;
  background-image: url(../img/chara/select_03.webp);
  opacity: 1 !important;
  margin-bottom: 45px;
}
.charaarea .slick-dots li:nth-of-type(5) {
  width: 97px !important;
  height: 96px !important;
  overflow: hidden !important;
  background-image: url(../img/chara/select_04.webp);
  opacity: 1 !important;
  margin-bottom: 45px;
}
.charaarea .slick-dots li:nth-of-type(6) {
  width: 97px !important;
  height: 96px !important;
  overflow: hidden !important;
  background-image: url(../img/chara/select_05.webp);
  opacity: 1 !important;
  margin-bottom: 45px;
}
.charaarea .slick-dots li:nth-of-type(7) {
  width: 97px !important;
  height: 96px !important;
  overflow: hidden !important;
  background-image: url(../img/chara/select_06.webp);
  opacity: 1 !important;
  margin-bottom: 45px;
}
.charaarea .slick-dots li:nth-of-type(8) {
  width: 97px !important;
  height: 96px !important;
  overflow: hidden !important;
  background-image: url(../img/chara/select_07.webp);
  opacity: 1 !important;
  margin-bottom: 45px;
}
.charaarea .slick-dots button { opacity: 0;}

.slick-arrow {
  opacity: 1 !important;
}
.slick-prev:before,
.slick-next:before {color: #0c072d !important;}
.slick-arrow{
  position: absolute;
  top: 40%;
  margin-top: -16px;
  width: 20px;
  height: 33px;
  opacity:0.7;
  z-index:10;
  cursor: pointer;
  animation: rubberBand;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
.prev-arrow{
	left: -30px;
}
.next-arrow{
	right: -30px;
}



#gallerywrap {
  width: 100%;
  background-image: url(../img/BG_gallery.webp);
  background-position: top center;
  min-height: 678px;
  border-top: 1px solid #fff;
}
#galleryarea {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  list-style: none;
  margin-top: 150px;
}
#galleryarea li {
  width: 322px;
  height: 180px;
  background-image: url(../img/gallery_thum.webp);
  margin-bottom: 30px;
}
.evwrap {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.evstage {
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.evstage img {
  width: 100%;
  object-fit: cover;
}
.evtxt {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: fixed;
  bottom: 0;
  background-color: #FFF;
}
.evtxt p {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.3em;
  padding: 20px;
}
/*
#cboxTitle {
  width: 90% !important;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 10px;
  padding-bottom: 10px;
  bottom: 0px !important;
  line-height: 1.3em;
  background-color: transparent !important;
  background-image: url(../img/pink50.webp);
  color: #fff !important;
  text-shadow: 0 0 4px #000,0 0 4px #000,0 0 4px #000;
}
*/



#downwrap {
  width: 100%;
  background-image: url(../img/BG_down.webp);
  background-position: top center;
  min-height: 883px;
  border-top: 1px solid #fff;
}
#downarea {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  display: flex;
  flex-wrap: wrap;
}
.downbox {
  width: 100%;
  max-width: 1000px;
  min-height: 224px;
  background-image: url(../img/down_thum.webp);
  border-radius: 10px;
  overflow: hidden;
}
.downbox img {  
  width: 100%;
}
.mirrorwrap {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 5px;
  width: 100%;
}
.mirrorbox {
  width: calc(50% - 2px);
  min-width: 330px;
  text-align: center;
  padding-top: 7px;
  padding-bottom: 7px;
  background-color: #d12929;
}
.mirrorbox:nth-child(even) {
  background-color: #ff919e;
}
.mirrorbox a {
  margin-top: 5px;
  margin-bottom: 5px;
  color: #FFF;
  font-weight: bold;
}






#specialwrap {
  width: 100%;
  background-image: url(../img/BG_special.webp);
  background-position: top center;
  min-height: 903px;
  border-top: 1px solid #fff;
}
#specialarea {
  width: 100%;
  max-width: 833px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 110px;
}
.spbox {
  width: 260px;
  height: 260px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 2px solid #ff9393;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, .1);
}
.spbox img {
  width: 100%;
  height: auto;
  position: absolute;
}
.spboxtxt {
  width: 100%;
  height: 60px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url(../img/white80.webp);
}
.spbox p {
  width: 90%;
  font-size: 140%;
  font-weight: 900;
  text-align: center;
  line-height: 1.3em;
  padding-bottom: 5px;
}
.spbox p::first-letter {
  color: #d12929;
}
.spbox a {
  color: #000;
}



















#productwrap {
  width: 100%;
  background-image: url(../img/BG_product.webp);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 1191px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #e40a3c;
  color: #fff;
}
#productarea {
  width: 90%;
  max-width: 1100px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 150px;
  line-height: 1.8em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
#productarea p {
  margin-top: 20px;
  margin-bottom: 50px;
}
h4 {
  font-weight: normal;
  text-align: center;
}
.proweight {
  font-size: 125%;
}
.productbox {
  margin-bottom: 30px;
}
#productarea div:nth-of-type(1){
  width: 100%;
}
#productarea .productbox:nth-of-type(2){
  width: 50%;
  text-align: left;
}
#productarea .productbox:nth-of-type(3){
  width: 50%;
  text-align: left;
}
.productbox .productitem{
  display: flex;
  justify-content: space-between;
}
.productbox dt {
  color: #fff;
  width: 110px;
}
.productbox dd {
  width: calc(100% - 120px);
  margin-top: 0;
}








#footer {
  width: 100%;
  height: 80px;
  background-color: #e40a3c;
  position: relative;
}
.digilogo {
  width: 70%;
  height: 50px;
  max-width: 200px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.footer-logos {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center;     /* 垂直居中对齐 */
}

.footer-logos img {
  height: 50px; /* 设置相同的高度 */
  margin: 0 10px; /* 设置图片之间的间距 */
}





/* イオちゃん大好きBOX */

.iochantop {
  width: 100%;
  max-width: 2000px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 60px;
}
.iochantop img {
  width: 100%;
  height: auto;
}
.iochanwrap {
  width: 100%;
  min-height: 500px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
}

.iochanwrap h2 {
  width: 100%;
  height: 60px;
  overflow: hidden;
  text-indent: 0em !important;
  line-height: 2.7em;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #d12929;
  color: #fff;
  text-align: center;
  margin-bottom: 0;
}

.iobox {
  width: 100%;
  margin-top: 30px;
  margin-bottom: 30px;
  position: relative;
}
.iodummy {
  display: flex;
  flex-wrap: wrap;
}
.iodummy img {
  width: 50%;
}


.iobox h3 {
  width: 100%;
  max-width: 600px;
  height: 36px;
  overflow: hidden;
  line-height: 100em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
#makurabox {
  width: 100%;
  max-width: 1000px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
#makurathum {
  width: 80px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#makurathum li {
  width: 80px;
  padding: 0;
  margin-bottom: 10px;
  border: 1px solid #f92f18;
  cursor: pointer;
}
.bigmakura {
  width: 400px !important;
  height: 615px;
  border: 1px solid #f92f18;
}
.makuraup {
  width: 400px !important;
  height: 615px !important;
  border: 1px solid #f92f18;
  background-color: #effeff;
  text-align: center;
  position: relative;
}
.makuraup p {
  width: 100%;
  height: 20px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  color: #0bbae0;
}
.detail {
  width: 80%;
  max-width: 200px;
  border: 1px solid #858585;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 30px;
  padding: 10px 20px;
}
#ioitem img{
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.coin {
  width: 15%;
  min-width: 100px;
  position: absolute;
  right: 4%;
  top: -10%;
  z-index: 100;
}
.coin img {
  width: 100%;
  height: auto;
}
.dramasample {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 10px;
}
.tokimeki {
  display: flex;
}
.tokimeki img {
  width: 50%;
}


.tokutenwrap {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 50px;
}
.tokutenwrap h2 {
  width: 100%;
  height: 60px;
  overflow: hidden;
  text-indent: 0em !important;
  line-height: 2.7em;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 20px;
  background-color: #d12929;
  color: #fff;
  text-align: center;
  margin-bottom: 0px;
  overflow: hidden;
}
.tokutenbox {
  width: 80%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 10px;
  border: 1px solid #d12929;
  box-shadow: 4px 4px 12px rgba(0,0,0,.2);
}
.tokutenbox2 {
  width: 45%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 10px;
  border: 1px solid #d12929;
  box-shadow: 4px 4px 12px rgba(0,0,0,.2);
}
.tokutenbox2 h3,
.tokutenbox h3 {
  position: relative;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
.tokutenbox2 h3:first-letter,
.tokutenbox h3:first-letter {
  color: #d12929;
}
.tokutenbox2 h3:before,
.tokutenbox h3:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: #d12929;
}
.tokutenbox2 h3 span,
.tokutenbox h3 span {
  position: relative;
  padding: 0 1em;
  background: #fff;
}
.tokutenbox2 p,
.tokutenbox p {
  text-align: center;
  font-weight: bolder;
  margin-top: 20px;
  margin-bottom: 0px;
}
.tokutenstage {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
.tokutenstage img {
  max-width: 500px;
  box-shadow: 4px 4px 12px rgba(0,0,0,.2);
}
.buybox {
  width: 200px;
  border: 1px solid #d12929;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 40px;
  box-shadow: 4px 4px 4px rgba(0,0,0,.2);
}
.buybox a{
  color: #d12929;
  width: 100%;
  height: auto;
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
}
.buybox a:hover{
  color: #fff;
  font-weight: bolder;
  background-color: #d12929;
}


.twitterhiwrap {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.twitterhiwrap h2 {
  width: 100%;
  height: 60px;
  overflow: hidden;
  text-indent: 0em !important;
  line-height: 2.7em;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #d12929;
  color: #fff;
  text-align: center;
  margin-bottom: 0;
}

.twh {
  width: 100%;
  max-width: 1000px;
  margin-top: 30px;
  margin-bottom: 100px;
}
.twh img {
  width: 100%;
}
.twi {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 30px;
  margin-bottom: 100px;
}
.twi img {
  width: 30%;
  margin-bottom: 20px;
}


.patchwrap {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 50px;
}
.patchwrap h2 {
  width: 100%;
  height: 60px;
  overflow: hidden;
  text-indent: 0em !important;
  line-height: 2.7em;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 20px;
  background-color: #d12929;
  color: #fff;
  text-align: center;
  margin-bottom: 0px;
  overflow: hidden;
}
.patchbox {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 50px;
  border: 1px solid #e40a3c;
}
.patchbox p {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 10px;
  font-size: 120%;
}
.patchbox h3 {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e40a3c;
  font-size: 140%;
  color: #e40a3c;
}
.patchbox h4 {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  font-weight: bolder;
  text-align: left;
  font-size: 130%;
}
.patchbox ul,
.patchbox ol {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  list-style: inside;
}
.patchbox li {
  text-indent: 1em;
  font-size: 120%;
}
.dlpatch {
  width: 250px;
  border: 1px solid #d12929;
  margin-left: auto;
  margin-right: auto;
  margin-top: 70px;
}
.dlpatch a {
  width: 100%;
  height: 100%;
  display: block;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  font-weight: bolder;
  color: #d12929;
  background-color: #fffafb;
}
.dlpatch a:hover {
  color: #FFF;
  background-color: #d12929;
}



















@media screen and (max-width: 500px) {
  .pc {display: none !important;}
  .sp {display: block !important;}

  #newswrap {
    width: 100%;
    min-width: 100%;
  }
  #twitterwrap {
    width: 100%;
    min-width: 100%;
  }
  #newsbox {
    border-right: 0px solid #0c072d;
  }
  .topbox{
    position: relative;
  }
  #tb01 {
    width: 30%;
    position: absolute;
    top: 2%;
    right: 2%;
    left: auto;
    margin: auto;
  }
  #tb02 {
    width: 30%;
    position: absolute;
    top: 2%;
    right: 35%;
    left: auto;
    margin: auto;
  }
  .topbox img {
    width: 100%;
  }
  .youtube{
    position: relative;
    width: 100%;
    padding-top: 56.25%;
  }
  .youtube iframe {
      position: absolute;
      top: 0;
      right: 0;
      width: 100% !important;
      height: 100% !important;
  }

  .linkran {
    width: 10%;
    max-width: 75px;
    max-height: 75px;
    margin: auto;
    left: 1%;
    bottom: 0%;
    top: 0%;
    animation-delay: 1s;
    animation-play-state:running;
    animation: ranlink 5s ease-out infinite;
  }

  .topcatch {
    right: auto;
    left: 0%;
    top: 5%;
  }
  .top5th {
    width: 30%;
    height: auto;
    position: absolute;
    right: 5%;
    top: 50%;
  }
  .toptitle {
    width: 80%;
    max-width: 477px;
    max-height: 320px;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    top: 65%;
  }
  .topreleace {
    width: 100%;
    height: 50px;
    max-width: 1079px;
    position: absolute;
    bottom: 35px;
    left: 0;
    right: 0;
    margin: auto;
   }
   #topicsarea .slick-dots{
    bottom: -80px !important;
   }
   #storywrap {
    background-size: cover;
    background-repeat: no-repeat;
   }
   #storytxtimg {
    display: none;
   }
   #storytxt {
    display: block;
   }
   #storytxt p {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 110px;
    padding-bottom: 120px;
    text-shadow: 0px 0px 4px #FFF,0px 0px 4px #FFF,0px 0px 4px #FFF;
    line-height: 1.5em;
   }
   #storytxt span {
    width: 95%;
    display: block;
    font-size: 120%;
    color: #d12929;
    font-weight: bolder;
    text-align: center;
   }
   .charaarea .slick-dots li:nth-child(1),
   .charaarea .slick-dots li:nth-child(2),
   .charaarea .slick-dots li:nth-child(3),
   .charaarea .slick-dots li:nth-child(4),
   .charaarea .slick-dots li:nth-child(5),
   .charaarea .slick-dots li:nth-child(6),
   .charaarea .slick-dots li:nth-child(7),
   .charaarea .slick-dots li:nth-child(8) {
    width: 80.5px !important;
    height: 80.5px !important;
    background-size: cover;
    margin: 0 5px;
  }
  .charabox {
    top: 50px;
    height: 1400px;
  }
  .charast {
    width: 100%;
    height: 600px;
    left: 0;
    right: 0;
    margin: auto;
    top: 180px;
  }
  .charatxt {
    width: 90%;
    height: 100%;
    max-height: 550px;
    background-image: url(../img/white80.webp);
    right: 0;
    left: 0;
    margin: 300px auto 0 auto;
    border: 1px solid #e40a3c;
  }
  .charatxt p {
    display: block;
    margin-top: 20px;
    float: none;
    line-height: 1.8em;
  }
  .threesize {
    padding-top: 30px;
    line-height: 2em;
  }
  .charavoice {
    left: 0;
    right: 0;
    margin: 200px auto 0 auto;
  }
  .next-arrow { right: 1% !important;}
  .prev-arrow { left: 1% !important;}
  .productbox {
    width: 95% !important;
    margin-left: auto;
    margin-right: auto;
  }
  #productarea div:nth-of-type(2){
    width: 100%;
    text-align: left;
  }
  #productarea div:nth-of-type(3){
    width: 100%;
    text-align: left;
  }
  #makurathum {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
  }
  .tokutenstage img {
    width: 100%;
    max-width: 500px;
  }
  .coin {
    width: 10%;
    min-width: 70px;
    position: absolute;
    right: 1%;
    top: -2%;
    z-index: 10;
  }
  .downbox {
    width: 90%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #d12929;
  }
}