@charset "UTF-8";

/* CSS Document */

/*リセット*/
ol,
ul {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
img,
p {
  margin: 0;
  padding: 0;
}
/*リセットここまで*/

body{
	background: #f3f3f2;
	margin-left: auto;
	margin-right: auto;
	font-family: 'メイリオ', Meiryo,'ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
}

/*見出しデザイン*/
h1,h2,h3,h4{
  font-family: "Hina Mincho", serif;
  font-weight: 400;
  font-style: normal;
	line-height: 2em 0 0 0;
}
h1{
	font-size: 30px;
}

h2{
	margin-top: 1rem;
	margin-left: 1rem;
	margin-bottom: 0.5rem;
	color: #111021;
	background: linear-gradient(transparent 50%, #b4cfcc 50% )
}

h3{
	margin: 2rem 0 1rem 1rem;
	border-left: 5px solid #2f3d4d;
	padding-left: 0.5rem;
	font-weight: bold;
}

 h4{
	margin: 2rem 0 1rem 1rem;
	border-left: 3px solid #6d8fa3;
	padding-left: 0.5rem;
	Font-size: 1em;
	font-weight: bold;
}

/*リンク色*/
a {
	color: #6d8fa3;
 text-decoration: none; 
}

/*引用デザイン*/
blockquote {
    position: relative;
    padding: 10px 15px 10px 15px;
    box-sizing: border-box;
    font-style: italic;
    background: #dbd0bc;
    color: #555;
}

blockquote p {
    padding: 0¥¥¥
    margin: 10px 0;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

/*ボックスデザイン*/
.box {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #111021;
    background: #e4dc8a66;
    border-top: solid 10px #e4dc8a;
}
.box p {
    margin: 0; 
    padding: 0;
}

/*テーブルデザイン*/
table {
  border-collapse: collapse;
  width: 100%;
  max-width: 700px;
}

table th,
table td {
  border: 2px solid #e4dc8a;
  background-color: #e4dc8a33;
  padding: 0.5em;
}

table th {
  background-color: #e4dc8a;
  color: #fff;
  font-weight: bold;
  text-align: center;
  width: 20%;
  min-width: 4em;
}

/*リンクボタンデザイン*/
.btn {
  width: 240px;
  border-radius: 13px;
  background: #93acaaab;
  border: 3px solid #93acaa;
  padding: 1em;
  Margin: 0.5em;
  text-align: center;
}

.btn:hover {
  border: 3px solid #2f3d4d;
  background: #2f3d4dab;
}

.btn a {
  color: #2f3d4d;
  font-weight: bold;
}
.btn:hover a {
  color: #ffffff;
}

.btn-m {
    display: flex;
    align-items: flex-end;
    padding: 0.5em 0.5em;
    margin: 0.5em;
    color: #232323;
    border-left: solid 10px #93acaa;
    Border-top: solid 2px #93acaa;
    Border-bottom: solid 2px #93acaa;
    Border-right: solid 2px #93acaa;
    font-size: 0.8em;
}

.btn-m:hover{
    background: #93acaaac;
}

/*ヘッダーデザイン*/
header{
	position: fixed;
	z-index: 1000;
	top: 0px;
}

.container{
	display: flex;
	position: fixed;
	justify-content: space-between;
	width: 100%;
	height: 45px;
	background: #dbd0becc;
	z-index: 10;
	padding-left: 1em;
}

.container a {
  font-family: "Hina Mincho", serif;
  font-weight: 400;
  font-style: normal;
 text-decoration: none ;}


/* チェックボックスは非表示に */
.drawer-hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */ 

 @media screen and (max-width: 600px) {
	.drawer-open {
  display: flex;
  height: 50px;
  width: 50px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;/* 重なり順を一番上に */
  cursor: pointer;
 Margin-right: 1em ;
}

/* ハンバーガーメニューのアイコン */
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}

/* 三本線 */
.drawer-open span:before {
  bottom: 8px;
}
.drawer-open span:after {
  top: 8px;
}

/* クリックされたら真ん中の線を透明にする */
#drawer-check:checked ~ .drawer-open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコン上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#drawer-check:checked ~ .drawer-open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニュー */
.drawer-content {
  	width: 100%;
  	height: 100%;
  	position: fixed;
	margin-top: 50px;
  	top: 0;
  	left: 100%;
  	z-index: 5;
	background: #2b2b2bcc;
	transition: .5s;
	text-align: right;
	}
	 .manu-box{
		 margin: 1em;
	 }
	 
 .drawer-content a{
	font-size: 16px;
	font-weight: bold;
	color: white;
	 }
	 
/* メニューを表示 */
#drawer-check:checked ~ .drawer-content {
  left: 0;
	}
}

@media screen and (min-width:601px){
	.drawer-content{
		display: none;
	}
	
ul.main-nav{
	display: flex;
	margin-right: 40px;
	margin-top: 10px;
}

ul.main-nav li{
	margin-left: 20px;
	font-size: 18px;
	font-weight: bold;
	}
}

@media screen and (max-width:600px){
	ul.main-nav{
		display: none;
	}
}

.top-img img {
Margin-top: 45px;
width: 100vw;
height: 400px;
object-fit: cover;
}

.main-contents {
width: 95%;
margin :2em auto;
}

.main-contents dl {
margin-left :2em;
}

.text-box  {
margin-left :2em;
}

.back {
text-align:center;
margin :2em;
}

/*物語ページ装飾*/
.story-list dt {
padding-left: 0.5rem;
Border-top: 1px solid #2f3d4d;
Border-left: 6px solid #2f3d4d;
}

.story-list dt:hover {
    background: #93acaaac;
}

.story-list dd {
Margin :0.5em 0 1em 3em;
Padding: 0 0.5rem 0.5em 0;
Border-right: 2px solid #ababab;
Border-bottom: 2px solid #ababab;
}

.novel-main {
Margin:3em 2em;
line-height: 1.5em
}

/*漫画リスト*/
.cmc {
flex-wrap: wrap;
display: flex;
}
.cmc li{
Margin:0.5em 0.2em;
}

/*イラスト表示全体*/
.illust-box {
 background-repeat: no-repeat;
 background-position: center ; 
 background-size:cover;
    padding:3em 0 ;
    Margin-top: 45px ;
    margin-left: auto;
 width: 100%;
 height: 100%;
}

/*イラストタイトル*/
.illust-title {
    Margin:100px auto 100px auto;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px black;
    border-bottom: solid 2px black;
 writing-mode: vertical-rl;
  font-family: "Hina Mincho", serif;
  font-weight: 400;
  font-style: normal;
 font-size: 1.2em;
 
}
.illust-title:before, .illust-title:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: black;
}
.illust-title:before {left: 10px;}
.illust-title:after {right: 10px;}
.illust-title p {
    margin: 0; 
    padding: 0;
}

/*イラスト文章*/
.illust-caption {
 display: flex;
 position: relative;
 width: auto;
 height: auto ;
 writing-mode: vertical-rl;
 margin: 100px auto 100px auto;
  font-family: "Hina Mincho", serif;
  font-weight: 400;
  font-style: normal;
background: rgba(255,255,255,0.8);
border: thick double;
padding: 0.5em 1em;
 font-size: 0.8em;
}

.illust-caption p {
 margin: 15px 15px;
}

/*イラストリンク*/
.box1 {
    width: 300px;
    margin: 0px auto;
    padding: 0.5em 1em;
text-align:center;
}

.box1 a {
 text-decoration: underline ;
background: rgba(255,255,255,0.5);
  font-family: "Hina Mincho", serif;
  font-weight: 400;
  font-style: normal;
    padding: 0.5em 1em;
}

.box2 {
    margin: 0px auto;
    padding: 0.5em 1em;
text-align:center;
}

/*800px以上表示の時*/
@media (min-width: 800px){
.illust-caption {
 height: 200px  ;
 flex-direction: column;
 margin: 100px auto 100px 100px;
 }
.illust-title {
 margin: 100px auto 100px 100px;
}
.illust-box {
 width: 80%;
}
.box1 {
 margin: 0px auto 50px 100px;
Text-align:left;
}
}

.illust-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.illust-list li img{
	margin: 0 1rem;
	max-width: 250px;
	height: auto;
}

/*ゲーム用画面*/

.iframe-game {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.iframe-game iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*フッター*/
footer{
	background: #2f3d4d;
	text-align: center;
color: #fcfcfc;
}

.footer-txt{
	text-align: left;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding: 3em 0;
}


.master{
	background: #fff;
	width: 150px;
	height:  150px;
	border-radius: 50%;
}

.sns-icon{
	width: 50px;
	height: auto;
	margin: 1em 0;
}

footer p{
}