@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;700&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');

* {
  box-sizing:border-box;
}


body{
font-size:16px;
line-height:1.6;
font-family:'Zen Kaku Gothic New', sans-serif,"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo; margin:0;
padding:0;
color:#875d6d;
background:#fff;
height:100%;
font-weight: 400;
}




a {
  text-decoration: none;
  color: #1057a7; transition: all 300ms 0s ease;
}

a:hover{position:relative;
top:1px;
}



.pc{display: block;}
.mob{display: none;}
.smp{display: none;}

@media (max-width: 980px){
.pc{display: none;}
.mob{display: block;}  
}

@media (max-width: 480px){
.smp{display: block;}
 body{font-size:14px;}
}



section, article{margin:0;　padding:0; display: block;}
h1,h2,h3,h4,h5,h6{margin:0; padding:0;}
p{.5em 0;}
ul, li{margin:0; padding:0; list-style-type: none;}


header{position: relative;}

header h1{width:100%; max-width:1280px; height:auto; overflow-x: hidden; margin:0 auto; padding:0;}

header h1 img{position:absolute; display: block; height:auto;}

.title_ill{width:100%; max-width:1280px; height:auto; display: block; 
    top: 0;
        left: 50%;
        transform: translateX(-50%);
}
.title_logo{width:calc(480vw /6); 
top:calc(480vw /480);
left:calc(480vw /30);}
.title_auther{width:calc(480vw /12); 
top:calc(480vw /5.1);
left:calc(480vw /37);
background: #fff; padding:3px 6px;}

.title_chatch{width:calc(480vw /80); 
top:12px;
left:8px;}
.title_overview{width:calc(480vw /5.6); 
top:calc(480vw /4.7);
left:calc(480vw /37);
}


@media (min-width: 480px)
{ 
.title_logo{width:calc(1280vw /35); 
top:calc(1280vw / 1280);
left:calc(1280vw / 28);}
    
.title_auther{width:calc(1280vw /72); 
top:calc(1280vw /55);
left:calc(1280vw /27);
}

.title_chatch{width:calc(1280vw /110); 
top:calc(1280vw /600);
left:calc(1280vw /15);}
.title_overview{width:calc(1280vw /26); 
top:calc(1280vw /43);
left:calc(1280vw /27);} 
}

@media (min-width: 1280px)
{ 
.title_logo{width:490px; 
top:12px;
left:569px; position:relative;}
    
.title_auther{width:230px; 
top:-30px;
left:590px;
position:relative;
}

.title_chatch{width:140px; 
top:-330px;
left:1130px;
position:relative;
}
.title_overview{width:667px; 
top:-260px;
left:580px;
position:relative;} 
}


.container{width: calc(100% - 2em); max-width:980px; margin:2em auto;}
.txtsmall{font-size:80%;}


/*メニュー*/

nav {
  position: relative;
  margin: calc(480vw /3.1) auto 20px auto;
}

@media (min-width: 480px)
{
    nav{margin: calc(1280vw /23) auto 20px auto;}
}

@media (min-width: 1280px)
{  
    nav{
        margin: -210px auto 20px auto;}
}



.scroll-nav {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* 慣性スクロール */
  /*スクロールバー非表示 IE(Internet Explorer)・Microsoft Edgeへの対応*/
  -ms-overflow-style: none;
  /*スクロールバー非表示 Firefoxへの対応*/
  scrollbar-width: none;
}

 /*スクロールバー非表示 Google Chrome、Safariへの対応*/
.contents_box::-webkit-scrollbar{
  display: none;
}

.scroll-nav ul {
  max-width: 980px; 
  min-width: 740px; 
  height: 80px;
  margin: 0 auto;
  list-style: none;
  padding-right: 25px; /* 右側の固定分余白を空ける */
  display: flex;
  align-items: center;
  justify-content:center;
}

.scroll-nav ul li {
  display: block;
  width: 136px;
  height: 70px;
}   
.scroll-nav ul li a {
  display: block;
}

.scroll-nav ul li img{display: block; margin:auto; height:auto;}

.menu_books{width: calc(134px * 0.7); padding-top: 25px;}    
.menu_sd01, .menu_novel{width: calc(112px * 0.7); padding-top: 6px;} 
.menu_sd02{width: calc(136px * 0.7); padding-top: 6px;} 
.menu_sd03{width: calc(157px * 0.7); padding-top: 6px;} 
.logo{width:calc(140px * 0.7);}

.next-btn { 
  position: absolute;
  top: 0;
  right: 0;
  width: 25px; 
  height: 70px; /* メニューの高さに合わせる */
  line-height: 80px;
  color:#666;
  font-size:20px;
}

nav .scroll-nav ul li {
  border-left: 1px solid #a2d1d9;
  border-right: 1px solid #a2d1d9;
}

nav .scroll-nav ul li+ li {
  border-left: 0;
  border-right: 1px solid #a2d1d9;
}


@media only screen and (min-width: 768px) { 
    
.next-btn {
  display: none; /* 右側の固定部分を非表示 */
}

.scroll-nav ul {
  padding: 0;
  height: 100px;
}

.scroll-nav ul li {
  width: 196px;
  height: 100px;
}
    .menu_books{width:134px; padding-top: 38px;}    
    .menu_sd01, .menu_novel{width:112px; padding-top: 10px;} 
    .menu_sd02{width:136px; padding-top: 10px;} 
    .menu_sd03{width:157px; padding-top: 10px;} 
    .logo{width:140px;}
}

.title_book, .title_movie, .title_novel{
    display: block;
    margin:auto;
    width:148px;
    height:auto;
}


/*index*/

#book, #movie #novel{
 margin:4em auto;
}


#book h2{font-size:1.8em; font-weight: 700;}

.bookcover{width: calc(100% - 3em); max-width:320px; height:auto; display: block; border:solid 1px #cfcfcf; margin:0 auto;}

.book_info{width: calc(100% - 3em); max-width:26em; margin:1em auto;}
#book .container span{font-size:.8em;}

.story:before{
content:'';
    display: block;
    background: url(../images/deco.svg) 100% 100% / cover;
    height:7px;
    width: 25px;
    margin:1em auto;    
}
.btn_buy{display: block; width:calc(100% - 2em); 
    max-width:320px; height:auto; margin:1em auto;}


#movie a{display: block; border:solid 1px #a2d1d9;
    margin:3em auto;  text-align: center; color:#875d6d;
padding:1.5em;}
#movie a p{text-align: left;}

#movie h3, #short_drama h1 {
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  color:#4db0ba;
  margin-top:2em;
  font-size:1.4em;
}

#movie h3:before, #movie h3:after, #short_drama h1:before,#short_drama h1:after { 
  content:'';
  width: 16px;
  height: 30px;
  position: absolute;
  display: inline-block;
}

#movie h3:before , #short_drama h1:before {
  border-left: solid 1px #4db0ba;
  border-top: solid 1px #4db0ba;
  top:0;
  left: 0;
}

#movie h3:after , #short_drama h1:after {
  border-right: solid 1px #4db0ba;
  border-bottom: solid 1px #4db0ba;
  bottom:0;
  right: 0;
}



.badge{color:#fff; background:#4db0ba; font-size:.8em; padding:2px 4px; display: inline-block; position: relative; top:-3em; }
.drm_thums{display: block; width: 70%; max-width:240px; height:auto; margin:auto;}



.novel_thums{display: block; width: 70%; max-width:340px;margin:auto; border:solid 1px #4db0ba;}
.novel_title{font-size:1.2em; font-weight:700; margin-top:2em;}
a.link_novel_trial{color:#fff; padding:6px; background: #4db0ba; display: block; margin:2em auto; width:160px; text-align: center;}


@media (min-width: 767px){

}



@media (min-width: 980px){

#book .container,#movie .container, #novel .container{display: flex; align-items: flex-start; justify-content: center;}
.book_info{max-width:calc(100% - 2em); margin:0;}
#book .container >div, #novel .container >div{ margin-left:3em;}
.btn_buy{margin:2em 0 0 0;}

#movie .container{align-items:stretch;}
#movie a{text-align: left; width:32%}
.drm_thums{max-width:180px; height:300px;} 
.badge{display: inline-block; position: relative; top:-3em; left: calc(50% - 3.5em);}
    
}



/*ショートドラマ*/


nav.contents {
  position: static;
  margin: 20px auto;
}

#short_drama{margin-top:4em;}
#short_drama .container{display: block; border:solid 1px #a2d1d9;
margin:3em auto;  text-align: center; color:#875d6d;
padding:1.5em;}

#short_drama h2{  color:#4db0ba;
  font-size:1.4em;
  font-family: "Shippori Mincho", serif;
margin:1em auto .5em auto;}


#short_drama .container .badge{display: block; position:static; width:160px; margin:auto;}

#short_drama .container p{text-align: left}

#short_drama h1 {
  margin :.5em auto;
  font-size:1.8em;
}

.youtube_short{
 width: 90%; /* 伸縮する横幅 */
 max-width: 400px; /* 最大の横幅 */
 margin: auto; /* 画面の中央に配置 */
}
.youtube_short iframe{
 aspect-ratio: 9 / 16;
 width: 100%;
 height: 100%;
}

.drama_info p{width:20em; margin:4em auto;}

#short_drama .btn_buy{margin:2em auto 0 auto;}

.gotop{margin:1em auto;}


@media only screen and (min-width: 768px) { 
    
    .contents .menu_books{width : calc(134px * 0.9); padding-top: 40px;}   
    .contents .menu_sd01, .contents .menu_novel{width: calc(112px * 0.9); padding-top: 13px;} 
    .contents .menu_sd02{width : calc(136px * 0.9); padding-top: 13px;} 
    .contents .menu_sd03{width : calc(157px * 0.9); padding-top: 13px;} 
    .logo{width:140px;}
    
    #short_drama .youtube_short{display: flex; align-items: center; justify-content: center;}
    .drama_info{margin:0 1em 0 3em;}
    
    #short_drama .container p.arasuji{text-align: center;}
    
    #short_drama .moviebox{display: flex;  flex-wrap: wrap; align-items: center; justify-content: center;}
    
.youtube_short{
 width: 100%; 
 padding:0 30px
}
    
    
}


/*小説サンプル*/

#novel_trial{margin-top:4em;}

#novel_trial h1{ 
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-size:1.6em;
margin:1em 0;}

#novel_trial .container{max-width:640px; line-height: 2em;}



.copyright{text-align: center; font-size:12px; margin-top:3em;}

/*　footer　*/

footer {
color:#000;
margin-top:120px;
padding: 20px 0;
    text-align: center;
    font-size: 12px; 
}


footer .footer_link {
    margin: 10px 0;
}

footer .footer_link ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-left: -10px;
}

footer .footer_link ul li {
    list-style: none;
}

footer .footer_link ul li:not(:first-child)::before {
    content: "｜";
}

.share-button{display: flex;
    justify-content: center;
    margin:3rem auto;
    background: transparent;
}

.caption{font-size:12px; text-align: center;}



/*page-top リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background-color:rgb(77 176 186 /0.9);
  opacity: .8;
  width: 50px;
  height: 50px;
  border: none;
  color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:2rem;
	transition:all 0.3s;
}

#page-top a:hover{
	background: rgb(35 150 155 / 1);
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 999;
	opacity: 0;
	transform: translateX(100px);
}

/*　左の動き　*/

#page-top.LeftMove{
	animation: LeftAnime 0.5s forwards;
}

@keyframes LeftAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }
  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/*　右の動き　*/

#page-top.RightMove{
	animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime{
  from {
  	opacity: 1;
	transform: translateX(0);
  }
  to {
  	opacity: 1;
	transform: translateX(100px);
  }
}

.comigsoon p{color:#4db0ba;
  font-size:2em;
  font-family: "Shippori Mincho", serif;
text-align: center;}

.comigsoon img{display: block; margin:2em auto; width:90%; height:auto; max-width:1200px;}