@charset "utf-8";
h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dt,dd{
	padding: 0;
	margin: 0;
}
ol,ul{
	list-style-type: none;
}
/*-----------------------------------------------
 root
-----------------------------------------------*/
html{
	overflow-y: scroll;
}
body{
	overflow-x:hidden;
	font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, 'メイリオ', sans-serif;
	font-weight: 400;
}
/*-----------------------------------------------
 font
-----------------------------------------------*/
html{
	overflow-x: hidden;
	font-size: medium;
}
body{
	font-size: 62.5%; /* 16px -> 10px */
}
div{
	line-height: 0;
}
dt,dd,li,
caption,th,td,
input,button,textarea,select,
h1,h2,h3,h4,h5,h6,address{
	line-height: 0;
	font-size: 140%;
	margin: 0;
	padding: 0;
}
p{
	line-height: 1.5;
	font-size: 140%;
	margin: 0;
	padding: 0;
}
h1 *,h2 *,h3 *,h4 *,h5 *,h6 *,
p input,p button,p select,
li h1,li h2,li h3,li h4,li h5,li h6,li p,li dt,li dd,li li,li th,li td,li input,li button,li textarea,li select,
dd h1,dd h2,dd h3,dd h4,dd h5,dd h6,dd p,dd dt,dd dd,dd li,dd th,dd td,dd input,dd button,dd textarea,dd select,
tr h1,tr h2,tr h3,tr h4,tr h5,tr h6,tr p,tr dt,tr dd,tr li,            tr input,tr button,tr textarea,tr select{
	font-size: 100%;
}
input,button,select,option,textarea{
	font-size: 14px;
}
figure{
	margin: 0;
}
a,
a:link,
a:visited{
	color: #000;
	text-decoration: underline;
}
a:hover{
	text-decoration: none;
}
section{
	position: relative;
}
@media only screen and (max-width: 640px) {
	body{
		min-width: 0;
	}
}
/*-----------------------------------------------
 cf
-----------------------------------------------*/
.clearfix:after {
	content: " ";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;
	/*¥*//*/
	height: auto;
	overflow: hidden;
	/**/
}
/*-----------------------------------------------
 hover
-----------------------------------------------*/
body{
	background-color: #fff;
}
#loading{
	overflow: hidden;
	position: fixed;
	top: 0;
	z-index: 100;
	width: 640px;
	height: 100vh;
	background-color: #fff;
	background-position: center top;
}
#loading div.logo{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 102px;
	height: 156px;
	margin: -78px 0 0 -51px;
}
#loading div.logo.anim{
	-webkit-animation: flash 1s infinite;
	animation: flash 1s infinite;
}
@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}
@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}
/*-----------------------------------------------
 content
-----------------------------------------------*/
#content{
	overflow-x: hidden;
	position: relative;
	width: 640px;
	margin: 0 auto;
	background-image: url(../img/global/bg.png);
	background-position: center top;
}
#content > .uzaki-chan{
	position: fixed;
	z-index: 1;
	top: -277px;
	width: 640px;
	height: 2678px;
	background-image: url(../img/top/uzaki.png);
}
#content > .senpai{
	position: fixed;
	top: 405px;
	width: 640px;
	height: 447px;
	background-image: url(../img/top/senpai.png);
	background-repeat: no-repeat;
	background-position: 419px top;
}
/*-----------------------------------------------
 keyvisual
-----------------------------------------------*/
#keyvisual{
	z-index: 20;
	height: 1390px;
}
#keyvisual h1{
	position: absolute;
    top: 7px;
    left: 15px;
}
#keyvisual .dradra{
	position: absolute;
    top: 129px;
    left: 20px;
}
#keyvisual .catch{
	position: absolute;
    top: 417px;
    left: -10px;
}
#keyvisual .coverCatch{
	position: absolute;
	z-index: 1;
    top: 762px;
    left: 15px;
}
#keyvisual .cover{
	position: absolute;
	z-index: 2;
    top: 865px;
    left: 19px;
}
#keyvisual .paint{
	position: absolute;
    top: 820px;
    left: 276px;
}
#keyvisual .links{
	position: absolute;
	z-index: 1;
    top: 1046px;
    left: 307px;
}
#keyvisual .bnr{
	position: absolute;
	z-index: 1;
    top: 1265px;
    left: 19px;
}
#keyvisual .links li{
	margin-bottom: 7px;
}
#keyvisual .starLine{
	overflow: hidden;
	position: absolute;
	top: 37px;
    right: 71px;
    width: 50px;
    height: 30px;
	background-image: url(../img/top/keyvisual-starline.png);
	background-position: right top;
}
#keyvisual .star{
	position: absolute;
    top: 14px;
    left: 482px;
}
/*-----------------------------------------------
 information
-----------------------------------------------*/
#information{
	z-index: 10;
	height: 731px;
	margin-bottom: 250px;
	padding: 67px 20px 0;
	box-sizing: border-box;
	background-image: url(../img/top/information-bg.png);
	background-repeat: no-repeat;
	background-position: center top;
}
#information h2{
	margin-bottom: 10px;
}
#information .newsList{
	overflow-y: scroll;
	position: relative;
	width: 590px;
	height: 140px;
	margin-bottom: 26px;
}
#information .newsList li{
	padding: 10px 0 10px 128px;
	border-bottom: 1px solid #000;
	font-size: 18px;
	line-height: 1.2;
}
#information .newsList time{
	position: absolute;
	left: 0;
	color: #ff0000;
}
#information .newsList time::after{
	content: "\f0da";
	margin-left: 5px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #000;
}
#information .sns{
	margin: 0 0 25px 100px;
	font-size: 0;
}
#information .sns li{
	display: inline-block;
	margin-right: 9px;
}
#information .sns li:last-child{
	margin-right: 0;
}
#information .twitter{
	position: relative;
}
#information .twitter::after{
	display: block;
	content: "";
	position: absolute;
	bottom: -5px;
	right: -5px;
	width: 600px;
    height: 393px;
    box-sizing: border-box;
	background-color: #000;
}
#information .twitter h3{
	margin-bottom: 5px;
}
#information .twitter .timeline{
	overflow-y: scroll;
	position: relative;
	z-index: 1;
    height: 393px;
	border: 1px solid #000;
}
/*-----------------------------------------------
 news
-----------------------------------------------*/
#news{
	z-index: 10;
	height: 901px;
	margin-bottom: 100px;
	padding-top: 55px;
	box-sizing: border-box;
	background-image: url(../img/top/news-bg.png);
	background-repeat: no-repeat;
	background-position: center top;
}
#news h2{
	text-align: center;
	margin-bottom: 7px;
}
#news .text{
	text-align: center;
}
#news .btn {
	width: 600px;
	margin: 0 auto;
	padding: 30px 20px;
	box-sizing: border-box;
}
#news .btn li{
	display: inline-block;
	margin-right: 5px;
}
/*-----------------------------------------------
 cm
-----------------------------------------------*/
#cm{
	z-index: 10;
	height: 1433px;
	margin-bottom: 138px;
	background-image: url(../img/top/cm-bg.png);
	background-repeat: no-repeat;
	background-position: center top;
}
#cm h2{
    position: absolute;
    z-index: 1;
    top: 35px;
    left: 200px;
}
#cm p.cm-catch{
	position: absolute;
	z-index: 1;
  top: 180px;
  left: 17px;
	text-align: center;
}
#cm p.cm-catch2{
	position: absolute;
	z-index: 1;
  top: 762px;
  left: 17px;
	text-align: center;
}
#cm .cm-movie {
	position: absolute;  
  top: 394px;
  left: 14px;
  width: 558px;
  height: 313px;
  background: #2ecc14;
  padding: 25px;
  border-radius: 50px;
}
#cm .cm-movie2 {
  position: absolute;  
  top: 988px;
  left: 14px;
  width: 558px;
  height: 313px;
  background: #2ecc14;
  padding: 25px;
  border-radius: 50px;
}

/*-----------------------------------------------
 story
-----------------------------------------------*/
#story{
	z-index: 10;
	height: 923px;
	margin-bottom: 147px;
	padding-top: 34px;
	box-sizing: border-box;
	background-image: url(../img/top/story-bg.png);
	background-repeat: no-repeat;
	background-position: center top;
}
#story .image{
	position: absolute;
	top: -62px;
	left: 0;
}
#story h2{
	position: relative;
	z-index: 1;
	margin: 0 0 24px 196px;
}
#story p{
	position: relative;
	z-index: 1;
	margin-bottom: 43px;
	text-align: center;
}
#story .trial{
	position: relative;
	z-index: 1;
	text-align: center;
}
/*-----------------------------------------------
 character
-----------------------------------------------*/
#character{
	z-index: 10;
	height: 1163px;
	margin-bottom: 108px;
	background-image: url(../img/top/character-bg.png);
	background-repeat: no-repeat;
	background-position: center top;
}
#character h2{
    position: absolute;
    z-index: 1;
    top: 12px;
    left: 257px;
}
#character .character{
	position: absolute;
	top: -38px;
	left: 0;
}
/*-----------------------------------------------
 books
-----------------------------------------------*/
#books{
	z-index: 10;
	height: 20324px;
	margin-bottom: 113px;
	padding: 32px 18px 0 18px;
	box-sizing: border-box;
	background-image: url(../img/top/books-bg.png);
	background-repeat: no-repeat;
	background-position: center top;
}
#books h2{
    margin: 0 0 0 131px;
}
#books .booksList > li{
	margin: 0 auto 30px;
	padding: 30px;
	border-radius: 40px;
	box-sizing: border-box;
	background-color: #fff;
}
#books .booksList li figure{
	width: 505px;
	height: 719px;
	margin: 0 auto 30px;
	border: 1px solid #cbcbc8;
	text-align: center;
}
#books .booksList li figure img{
	max-width: 100%;
}
#books .booksList li .detail .catch{
	margin-bottom: 20px;
	font-size: 24px;
}
#books .booksList li h3{
	margin-bottom: 24px;
	font-size: 38px;
	line-height: 1.2;
}
#books .booksList li ul.author{
	margin-bottom: 34px;
}
#books .booksList li ul.author li{
	font-size: 20px;
	line-height: 1.5;
}
#books .shopList{
	font-size: 0;
}
#books .shopList li{
	display: inline-block;
	margin-bottom: 8px;
}
#books .shopList li:nth-child(odd){
	margin-right: 8px;
}
/*-----------------------------------------------
 newspaper
-----------------------------------------------*/
#newspaper{
	z-index: 10;
	height: 1055px;
	margin-bottom: 126px;
	background-image: url(../img/top/newspaper-bg.png);
	background-repeat: no-repeat;
	background-position: center top;
}
#newspaper h2{
  position: absolute;
  z-index: 1;
  top: 32px;
  left: 167px;
}
#newspaper p {
  position: absolute;
  text-align: center;
  top: 167px;
  left: 18px;
}
#newspaper .slider-newspaper {
  position: absolute;
  display: flex;
  top: 415px;
  width: 100vw;
}
.slick-list {
	width: 100%;
  }
.slick-slide {
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  transform: scale(.9);
  opacity: 0.8;
}
.slick-current {
  transform: scale(1);
  opacity: 1;
}

/* modal
-------------------------------------------------*/
.modal {
  display: none;
  z-index: 30;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
}
.modal-bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: rgba(255, 255, 255, 0.7);
}
.modal-content {
  -ms-overflow-style: none;
  scrollbar-width: none;
  position: absolute;
  width: 95%;
  height:96%;
  margin: 1% 2% 0;
  overflow-y: scroll;
  text-align: center;
}
.modal-content.modal-txt {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
  margin: 0;
}
.modal-content::-webkit-scrollbar {
  display: none;
}
.modal-content .js-modal-close {
  width: 5%;
  margin: 0 0 2.5vw auto;
  cursor: pointer;
}
body.fixed {
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%;
}
/*-----------------------------------------------
 product
-----------------------------------------------*/
#product{
	z-index: 10;
	height: 1038px;
	padding-top: 33px;
	box-sizing: border-box;
	background-image: url(../img/top/product-bg.png);
	background-repeat: no-repeat;
	background-position: center top;
}
#product h2{
    margin: 0 0 13px 135px;
}
#product figure{
	margin-bottom: 25px;
	text-align: center;
}
#product h3{
	margin-bottom: 10px;
	font-size: 42px;
	line-height: 1.2;
	text-align: center;
}
#product p{
	margin-bottom: 15px;
	font-size: 20px;
	text-align: center;
}
#product .btn{
	text-align: center;
}
/*-----------------------------------------------
 footer
-----------------------------------------------*/
#footer{
	position: relative;
	z-index: 10;
	height: 1540px;
	padding-top: 1116px;
	box-sizing: border-box;
	background-image: url(../img/top/footer-bg.png) , url(../img/global/bg.png);
	background-repeat: no-repeat , repeat;
	background-position: center bottom;
}
#footer .dradra{
	margin-bottom: 75px;
	text-align: center;
}
#footer .dca{
	margin-bottom: 20px;
	text-align: center;
}
#footer small{
	display: block;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	color: #fff;
}
#pagetop{
	position: fixed;
	z-index: 10;
	right: 10px;
	bottom: 10px;
	width: 75px;
	height: 75px;
	font-size: 0;
}
#pagetop a{
	display: block;
	position: relative;
	width: 75px;
	height: 75px;
	background-image: url(../img/top/pagetop.png);
}