@charset "UTF-8";
/* 初期設定 */
*, *::before, *::after {
  box-sizing: border-box;
}
body {
  font-family: "M PLUS Rounded 1c", sans-serif;
  line-height: 1.6;
  color: #3b3b3b;
  text-align: left;
}
table {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
p, a {
  text-align: inherit;
  word-wrap: break-word;
}
li, dd, dt {
  letter-spacing: normal;
  list-style: none;
}
a {
  text-decoration: none;
}
a img {
  display: block;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
#logo a img {
  max-width: none !important;
}

/* 関数設定 */
:root {
  --main-color: #7D6E00;
  --white: #ffffff;
  --font-size: 1em;/* 16pxから14pxで縮小 */
  --font-color: #333333;
  --font-family: "Noto Sans JP", serif;
  --fw-m: 500;/* ミディアム（フォントによって変化） */
  --fw-b: 700;/* ボールド（フォントによって変化） */
  --line-hight: 1.6;
  --drop-shadow: drop-shadow(0px 0px 6px #000000);
}

/* 背景設定 */
body::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background: url(../img/bg.webp) top center / cover no-repeat;
}

/* 画面トップ黒帯設定 */
#narou_head{margin-bottom:0;background: #000;padding:0.5em;max-height:42px;color:#fff;position:relative;z-index:3;}
#narou_head ul{display:table;width:100%;}
#narou_head ul li{display:table-cell;vertical-align:middle;}
#narou_head .ttl{padding-left:0.5em;font-size:80%;text-align:right;}
#narou_head .inner{max-width: 980px;width: 100%;}

/* Lightboxのデザイン変更 */
#cboxOverlay{background: #000!important;z-index:100000!important;}
#colorbox{z-index:100001!important;}

/* その他設定 */
.outer .inner{max-width:980px;width:100%;}
.outer #buttons .inner{width:90%;margin: 0 auto;}
.outer section .inner{width:90%;margin: 0 auto;}
.outer a:hover{text-decoration:none;}
a:hover > img {
  opacity: 0.7;
}

/* FV設定 */
#visual{
  position:relative;
  z-index:2;
  max-width:980px;
  width:100%;
  margin: 0 auto;
  overflow: hidden;
}
#visual img {width: 100%;}
#visual>div>h1{
  position: absolute;
    width: 85%;
    top: -8%;
    left: 64%;
    transform: translateX(-50%);
    z-index: 1;
}
#visual>div>h2{
  position: absolute;
    width: 39%;
    top: 13%;
    left: 56%;
    z-index: 1;
}
#visual>div>h3{
  position: absolute;
    width: 49%;
    top: 8%;
    left: 84%;
    transform: translateX(-50%);
    z-index: 1;
}
#visual>div>h4{
  position: absolute;
    width: 9%;
    top: 34.5%;
    left: 73%;
    z-index: 1;
}
#visual>div>h5{
  position: absolute;
    width: 77%;
    top: 65%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
#visual>div>h6{
  position: absolute;
    width: 27%;
    top: 27%;
    left: 75%;
    z-index: 1;
}
#visual>div>h7{
  position: absolute;
    width: 14%;
    top: 3%;
    left: 5%;
    z-index: 1;
}
#visual >div>figure{mask-image: linear-gradient(to top, transparent 0%, #000 10%);}
#visual >div>figure img{mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);}

/* ボタンエリア(margin以外はいじらない) */
#buttons{
  position: relative;
  z-index: 5;
  margin: -6em 0 1.5em;
  font-size: clamp(1.4rem, 1.343rem + 0.179vw, 1.6rem);/* 16pxを1として計算 */
}
#buttons ul{list-style: none;display:flex;justify-content: center;}
#buttons ul li{text-align:center;margin: 0 0.5em 1em 0.5em;border-radius:0.5em;border:2px solid #fff;box-shadow:0px 0px 3px 1px #000000;width: 50%;}
#buttons ul li a{color:#fff;display:block;padding: 1em 0;font-size:125%;}
#buttons ul li a i{font-size:130%;vertical-align:middle;margin-right: 0.5em;}
#buttons ul li:hover{opacity:0.8;transition:0.5s;}
#buttons ul li:first-child{flex-grow: 1;background: #000;}
#buttons ul li:nth-child(2){flex-grow: 1;background: #000;}
#buttons ul li:nth-child(3){flex-grow: 1;background: #009fe8;}

/* こちらから下は％またはem,vwで指定してください。 */
/* 但し、borderやmax-widthはremまたはpx指定可。 */
/* font-size指定は子要素を持たないpタグのみ */

/* section設定 */
section{
  text-align: center;
  padding:4em 0 0;
  font-size: clamp(1.4rem, 1.343rem + 0.179vw, 1.6rem);/* 16pxを1として計算 */
}
/* タイトル設定 */
section div.inner>h2{
  text-align:center;
  margin-bottom: 3em;
  width: auto;
  height: 8.5em;
}
section div.inner>h2 img{
  width: auto;
  height: 100%;
}

/* ストーリー｜あらすじ設定 */
#story{
  padding: 1em 0 0;
}
#story h2{
  margin-bottom: 2em;
}
#story p{
  color:#8B4751;
  font-size: var(--font-size);
  font-family: var(--font-family);
  font-weight: 500;
  line-height: 2;
  text-shadow:
   0px 0px 4px rgba(255, 255, 255, 1), 
   0px 0px 4px rgba(255, 255, 255, 1), 
   0px 0px 4px rgba(255, 255, 255, 1), 
   0px 0px 4px rgba(255, 255, 255, 1), 
   0px 0px 4px rgba(255, 255, 255, 1), 
   0px 0px 4px rgba(255, 255, 255, 1), 
   0px 0px 4px rgba(255, 255, 255, 1);
}

/* キャラクター｜人物紹介 */
#character ul{
  display: flex;
  gap: 1.25em;
  flex-wrap: wrap;
  justify-content: center;
}
#character ul li{
  width: calc((100% - 40px) / 3);
  display: flex;
  padding: 0.8em;
  margin: 0;
  background-color: #556F98;
}
.deco{
  border: #fff solid 1px;
  padding:1em;
  width: 100%;
  height: 100%;
}
#character ul li div h3{
  height: 1.7em;
  margin-top: 1.25em;
  text-align: center;
}
#character ul li div h3 img{
  height: 100%;
  width: auto;
}
#character ul li div p{
  border-top: #fff dotted 2px;
  font-size:0.8em;
  font-weight: var(--font-weight);
  line-height: var(--line-hight);
  color:white;
  padding-top: 0.875em;
  margin-top: 1em;
}

.space {
    width: 100%;
    height: 0px;
}

/* コンテンツ_1(作品によってコンテンツ量は変動) */
#special ul li {
  margin-bottom:2em;
}
#special ul li:last-of-type{
  margin-bottom: 0;
}

/* 下記共通コンテンツのためいじらない */
#read{padding: 4em 0 6em;}
#read span{font-size:61%;}
#read b{font-weight:bold;font-size:130%;}
#read a{width: 70%;color:#fff;display:block;padding: 1em 0;font-size:125%;background: #000;text-align:center;margin: 0 auto;border-radius:0.5em;border:2px solid #fff;box-shadow:0px 0px 3px 1px #000000;}
#read a:hover{opacity:0.8;transition:0.5s;}

#books {padding: 4em 0;background: rgba(0,0,0,0.5);}
#books .inner{padding: 0;margin-top: -6em;;}
#books h2{border-radius:0.5em;border:3px solid #000;font-size:2rem;display:inline-block;text-align:center;background: #fff;margin: 0 auto 1em;    display: table;padding:0.5em 2em;}
#books ul{justify-content:flex-start}
#books ul:has(> :nth-child(-n+4):last-child) {justify-content: center;}
#books ul li{background: #fff;padding: 0.75em;position: relative;width: 19%;margin-right: 1.25%;margin-bottom: 1.25%;}
#books ul li h4{margin-bottom: 0.5em;font-size: 1.4rem;}
#books ul li a {display:block;color: #3b3b3b;}
#books ul li a figure {width: 100%;}
.list li figure {margin-bottom: 0;}
#books ul li a div {width: 100%;margin-top: 1em;}
#books ul li i{font-size: 1rem;font-style: normal;padding: 0.15em 1.5em;position: absolute;left: 0;top: 0;z-index: 1;}
#books ul li i.bnk{background: #f39800;color:#fff;}
#books ul li i.nvl{background: #000;color:#fff;}
#books ul li i.grd{background: #009fe8;color:#fff;}
#books ul li:last-child {margin-right: 0;}
#books ul li:nth-child(5n) {margin-right: 0;}

#naroulink {padding: 4em 0;background: rgba(0,0,0,0.3);}
#naroulink .inner{margin-top: -6em;;}
#naroulink h2{border-radius:0.5em;border:3px solid #000;font-size:2rem;display:inline-block;text-align:center;background: #fff;margin: 0 auto 1em;    display: table;padding:0.5em 2em;}
#naroulink a{margin:0 auto;    display: table;border-radius: 0.5em;overflow: hidden;}
#naroulink a img{width: 100%;}

footer {width: 100%; overflow: hidden;}

.pc{display: block;}
.sp{display: none;}

.box{background: rgba(255,255,255,0.75);padding:4em;margin-bottom: 1em;box-shadow:0 0 1px 1px rgba(0,0,0,0.5);border-radius:1em;}

/*smartphone*****************************************************************************************************************************************************************************************/
@media screen and (max-width: 768px) {
/* 画面トップ、その他設定 */
#narou_head{padding: 0.75em 0.5em 0.75em 5rem;height: 42px;}
#narou_head .ttl{display:none;}
.outer .inner{width: 100%;}

.sp{display: block;}
.pc{display: none;}

/* 背景設定 */
body::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background: url(../img/bg.webp) top center / cover no-repeat;
}

/* FV以外に左右余白を設置 */
#books >.inner,#naroulink >.inner{padding: 0 5%!important;}

/* FV設定 */
#visual >div>figure img{
  width: 100%;
  margin-left:0;
  margin-top:0;
  mask-image: linear-gradient(to top, transparent 0%, #000 10%);
}

/* ボタンエリア(#buttonsのmargin以外はいじらない) */
#buttons{
  margin: -10vw 0 0;
}
#buttons .bt1{display: none;}
#buttons ul li {margin-bottom: 0;}
#buttons ul li a{font-size:80%;}

/* section設定 */
section{
  padding: 2.5em 0 0;
}

/* タイトル設定 */
section div.inner>h2{
  height: clamp(50px, 19vw, 120px);
  margin-bottom: 3em;
}

/* ストーリー｜あらすじ設定 */
#story{
  padding-left: 0;
  padding-right: 0;
  margin-top: 1em;
}
.outer #story .inner{
  width: 90%;
}
#story p{
  text-align:justify;
  font-size: 0.8em;
}

/* キャラクター｜人物紹介 */
#character ul{
  justify-content: center;
}
#character ul li{
  width: 80%;
  max-width: 38rem;
}
#character ul li div h3{
  height: 1.8em;
  text-align: center;
}
#character ul li div p{
  padding:1em;
  font-size: 0.9em;
}

/* 下記共通コンテンツのためいじらない */

#read a{padding: 0.5em;width: 90%;}
#read span{margin-bottom: 0.5em;display: block;}
#read br{display:none;}

#books{padding: 5em 0 1em;}
#books ul li {width: 100%;padding: 0.5% 1.5% 0.5% 0.5%;margin-right: 0;}
#books ul li a {display: flex;justify-content: space-between;align-items: center;}
#books ul li a figure {width: 25%;}
#books ul li a div {width: 72%;}
#books h2{height: auto;font-size:90%;}
#books ul li figure i{padding: 0.15em 1em;font-size:70%;left: auto;right: 0;}
#books ul li h4 {font-size: 1.3rem;font-weight: bold;}

#naroulink h2{height: auto;font-size:90%;}
}