/* リセットcss */
*,*::before,*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;}
img,svg{display:block;}
ul,ol{list-style:none;}

:root{
  --header-bg-color:#cae9e9;
  --column-bg-color:#f5f3e04d;
  --main-text-color:#141414;
  --overlay-text-color:#ffffe2;
  --accent-color:#2f7dc7;
  --text-base-overlay:#0d173165;
  --content-orverlay-gradation:linear-gradient(0deg,#00000099,transparent);
  font-size:16px;
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

body{
  line-height:1.5em;
  max-width:100%;
  color:var(--main-text-color);
  background-color:rgb(81,188,238);
  background-image:
  url(../img/blob-scatter-haikei.svg),
  radial-gradient(at 18% 64%,rgb(138,223,249) 0px,transparent 50%),
  radial-gradient(at 21% 22%,rgb(159,227,236) 0px,transparent 50%),
  radial-gradient(at 85% 5%,rgb(132,208,228) 0px,transparent 50%),
  radial-gradient(at 82% 64%,hsla(193,87%,61%,1) 0px,transparent 50%),
  radial-gradient(at 50% 46%,hsla(206,77%,66%,1) 0px,transparent 50%);
  background-attachment:fixed;
  background-size:cover;
}

section{
  overflow:hidden;
  width:100%;
  margin:1rem 0;
  padding:1rem 0;
  scroll-margin-top:100px;
}

.main-content-wrap{
  max-width:1200px;
  min-height:100vh;
  margin:1em auto;
  background:#ffffff3f;
  border-top:solid 3px var(--header-bg-color);
  border-bottom:solid 3px var(--text-base-overlay);
  border-radius:20px;
  backdrop-filter:blur(4px);
}

a{color:var(--main-text-color); }
a:hover{color:var(--accent-color);}

/*★未実装コンテンツ隔離用★*/
.none-display{display:none;}

/*★見出しスタイル★*/
h1{font-size:1.8em;}
#about-page h1,#history-about h1{margin: 1em 0;}

h2{
  font-size:1.6rem;
  margin:0.5em 0;
  padding:0.5em;
}

h3{margin-bottom:1em; font-size:1.5em;}

.heading-band{
  text-align:center;
  color:var(--overlay-text-color);
  background:var(--accent-color);
}

.heading-overlay-tbline{
  margin:0.5em;
  font-size:1.5em;
  padding:0.3em 0.2em;
  border-top:solid 1px var(--overlay-text-color);
  border-bottom:solid 1px var(--overlay-text-color);
  background:var(--text-base-overlay);
  color:var(--overlay-text-color);
}

.heading-under-line{
  width:max-content;
  padding-bottom:1px;
  margin:0.5em 0;
  border-bottom:solid 2px var(--accent-color);
}

.heading-under-longline{
  margin:0.5em auto;
  padding-bottom:1px;
  border-bottom:solid 2px var(--accent-color);
}

/* 全体共通レイアウトパーツ置き場 */
.laymic_opener:hover{cursor:pointer;}
.content-wrap{
  max-width:100%;
  margin:0 auto;
}

/* インライン要素寄せ */
.text-align-rigth{text-align:right;}
.text-align-left{text-align:left;}
.text-align-center{text-align:center;}

/* 一文40文字制限 */
.rem-limit{max-width:40em;}

/* ボタンっぽいリンク、基本形 */
.button-style{
  text-decoration:none;
  display:block;
  width:fit-content;
  font-size:1em;
  font-weight:bold;
  padding:0.5em 0.5em;
  margin:1em;
  border:solid var(--accent-color) 2px;
  background:var(--accent-color);
  color:var(--overlay-text-color);
  border-radius:5px;
  transition:all 0.3s;
}

.button-style:hover{
  background:var(--overlay-text-color);
  color:var(--main-text-color);
}

/* リストボタンを横並びに*/
.button-column-layout{
  margin:0;
  display:flex;
  justify-content:space-around;
  flex-wrap:wrap;
}

/* 1カラムレイアウト */
.single-column-layout{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
}

.single-column-layout .text-column{width:100%;}

/* 2カラム */
.flex-column-layout{
  display:flex;
  justify-content:space-evenly;
  flex-wrap:wrap;
}

.img-column{
  margin:3%;
  width:30%;
  height:30%;
  overflow:hidden;
  border-radius:30px;
}

.img-column img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.text-column{
  padding:1em 2em;
  justify-items:center;
  width:50%;
  height:auto;
  border-radius:10px;
}

/* ★ヘッダー★ */
header{
  position:sticky;
  top:0;
  width:100%;
  background-color:var(--header-bg-color);
  padding:10px 10px 5px 10px;
  z-index:100;
  box-shadow:0 2px 5px #00000099;
}

.site-logo{
  display:block;
  height:40px;
  width:auto;  
}

.header-menu{
  position:relative;
  flex-direction:column; 
  display:flex;
  align-items:center; 
  justify-content:center; 
}

.index-nav{
  margin-top:10px;
  width:100%;
  overflow-x:auto;
}

.index-nav ul{
  max-width:100%;
  min-width:635px;
  line-height:40px;
  margin:0 auto;
  padding:0 30px 0 20px;
  display:flex;
  gap:5px;
  white-space:nowrap;
  justify-content:center; 
}

.index-nav ul li:not(:first-child)::before{
  content:"";
  border-right:solid var(--main-text-color) 1px;
  margin-right:5px
}

.index-nav ul li a{
  text-decoration:none;
  display:inline-block;
  width:fit-content;
  padding:0 10px;
}

.index-nav__scroll-cover{ 
  position:absolute;
  top:50px;
  right:0;
  width:30px;
  height:40px;
  text-align:center;
  line-height:40px;
  background-image:linear-gradient(90deg,transparent,var(--header-bg-color) 30%);
}

.index-nav a{
  color:var(--text-color);
  font-weight:bold;
}

.index-nav a:hover{color:var(--accent-color);}

/* ★ヒーロー★ */
.hero{
  margin:0;
  padding:0;
  background-color:#caefff;
}
.hero .content-wrap{
  width:1200px;
  height: 700px;
  position:relative;
  display:flex;
  justify-content:center;
  background:blue url(../img/hero.webp) no-repeat center / cover;
}
.hero__overlay{
  width:100%;
  position:absolute; 
  bottom:0; 
  left:0;
  right:0;
  color:white; 
  text-align:center;
  padding:20px;
  background-image:var(--content-orverlay-gradation);
}
.hero__overlay h1{margin-bottom:10px;}
.custom-shape-divider-bottom-1764557700{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  line-height:0;
  transform:rotate(180deg);
}
.custom-shape-divider-bottom-1764557700 svg{
  position:relative;
  width:calc(133% + 1.3px);
  height:26px;
}
.custom-shape-divider-bottom-1764557700 .shape-fill{
  fill:#CAEFFF;}

#about-page section{padding:0;}

#must-read ul{
  padding:1em;
  margin:1em;
  justify-items:center;
  border:dotted 2px var(--accent-color);
  border-radius:5px;
  background:var(--column-bg-color);
}

#statement ul,#privacy ul,#guideline ul{
  list-style:inside;
  justify-items:start;
  padding:1em;
  margin:1em;
  border:dotted 2px var(--accent-color);
  border-radius:5px;
  background:var(--column-bg-color);
}

.guideline-history{
  margin-top:2em;
  font-size:0.8em;
}

/* ★お知らせ★ */
#history ol{margin:1em 0;}
#history .text-column{
  width:48%;
  background:var(--column-bg-color);
}

/* ★作品★ */
#works h2{margin:0;}
.works-list-button{
  font-size:1.1em;
  font-weight:bold;
  padding:1em 1em;
  border:solid var(--overlay-text-color) 2px;
  background:var(--text-base-overlay);
  color:var(--overlay-text-color);
}
.works-list{
  margin:0;
  padding:0;
  background-color:cadetblue;
  color:var(--overlay-text-color);
}
#works ul li:nth-child(even){justify-content:right;}
.works-list-content{
  display:flex;
  min-height:400px;
  overflow:hidden;
}
.serias-text{
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  align-items:center;
  width:40em;
  background-color:var(--text-base-overlay);
  box-shadow:0 0 10px 10px var(--text-base-overlay);
  padding:0.5em 2em;
}
.serias-text p{background-color:var(--text-base-overlay);}
.serias-genre{text-align:center;}
.serias-a{
  background-image:url(../img/the-unattained_thumbnail.webp);
  background-position:center;
  background-color:cornflowerblue;
  background-size:cover;
}
.serias-b{
  background-image:url(../img/ezamon_thumbnail.webp);
  background-position:center;
  background-color:cadetblue;
  background-size:cover;
  font-style:normal;
}
.serias-c{
  background-image:url(../img/others_thumbnail.webp);
  background-position:center;
  background-color:cornflowerblue;
  background-size:cover;
}

/* ★ブログ、管理人プロフィール共通★ */
#blog .flex-column-layout,#profile .flex-column-layout{
 align-items:center; 
}
#blog ul,#profile ul{margin:0.5em 0;}
#profile{background:var(--column-bg-color);}
#profile .flex-column-layout{flex-direction:row-reverse;}
#profile .text-column{
  border:dotted var(--accent-color) 5px;
  margin:1em 0;
}
#profile .button-column-layout{gap:1em;}

/* SNSアカウント用リンクボタンスタイル */
.link-mis-design{
  background:linear-gradient(0deg,#ffc524,#ff4f23);
  color:#3b1207;
}
.link-mis-io{
  background:#1f1f1f;
  color:#90c738;
}
.link-Bulesky{
  background:linear-gradient(0deg,#4266dd,#238aff);
  color:#92e0ff;
}
/* 作品ページ共通 */
.works-page .main-content-wrap{
  background:unset;
  border-top:unset;
  border-bottom:unset;
  border-radius:0;
  backdrop-filter:unset;
}
.works-top h1{margin-bottom:0.5em;}
.works-top{margin:0; padding:0;}
.works-top .content-wrap{
  color:var(--overlay-text-color);
  display:flex;
  justify-content:space-evenly;
}
.works-top .flex-column-layout{
  width:1200px;
  align-items: center;
}
.works-top .img-column{
  margin:3% 0;
  width:50%;
  height: auto;
  border-radius:0;
}
.img-column img{max-width:100%;}
.content1,.content2,.content3{order:solid,1px,var(--header-bg-color);}
.content1 .content-wrap, .content2 .content-wrap, .content3 .content-wrap{
  text-align: center;
}
.works-column{
  margin: 0 auto;
  display:flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap:0.3em;
  width:90%;
}
.works-column img{
  width:90px;
  height:90px;
  object-fit:cover;
  object-position:center;
}
.works-column ul{
  display:flex;
  flex-wrap: wrap;
  justify-content:space-evenly;
  width:100%;
}
.works-column .novel-list li{
  display:block;
  margin-top:0.5em;
  width:48%;
  padding:0.5em;
}
.novel-list li{
  background:var(--column-bg-color);
  border:solid,1px,#0e0202;
}
.novel-title{font-size: 1.2em;}
#works-comics h2{margin-bottom:0;}
.manga-card{
  width:30%;
  height:auto;
  padding:0 0.5em;
  background:var(--column-bg-color);
  border:solid,1px,var(--accent-color);
  border-radius:5px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align: start;
}
.manga-card h3{font-size:1.3em;}
.manga-card img{
  width:100px;
  height:100px;
}

.novel{
  font-size: 1em;
  line-height: 1.6em;
  margin: 0 auto;
  padding:0 1em;
  white-space: pre-wrap;
  max-width: 45em;
}
.novel img{
  margin: 1em auto 0 auto;
  max-width: 30em;
}
.top-return a{color:var(--overlay-text-color)}
/* ★お問い合わせ★ */
#contact{
  background:var(--column-bg-color);
  margin-bottom:0;
  border-bottom-left-radius:20px;
  border-bottom-right-radius:20px;
}

/* ★フッター★ */
footer div{
  background-color:var(--header-bg-color);
  color:var(--main-text-color);
  text-align:center;
  padding:10px;
  font-size:0.8em;
}

/* ★メディアクエリ（PC・タブレット対応）★ */
@media (min-width:635px){
.index-nav__scroll-cover{
  display:none;
}
.index-nav ul{padding:0;}
}

@media not all and (min-width:768px){
:root{
  font-size:15px;
}
body{line-height: 1.6em;}
h1{font-size: 1.5em;}
h2{font-size:1.3em;}
h3{font-size:1.2em;}
/* カラムレイアウト */
.flex-column-layout{
  justify-content:center;
  gap:1em;
}
.img-column{
  margin:0;
  width:60%;
}
.text-column{
  padding:1em 1em;
  margin:0;
  width:100%;
  height:auto;
}

/* ヒーロー */
.hero .content-wrap{
  width:100%;
  height:75dvh;
}
.hero h1{font-size: 1.5em;}

/* お知らせ */
#history .text-column{width:80%;}

/* 作品 */
.serias-text{
  width:100%;
  padding:20px 5%;
}
/* シリーズ共通 */
.works-top .img-column{width:90%;}
.works-column img{
  width:70px;
  height:70px;
}
.works-column .novel-list li{
  display:block;
  margin-top:0.5em;
  width:100%
}

.novel{
  width:97%;
  line-height: 1.8em;
}
.novel img{
  max-width: 100%;
  height: auto;
}
.manga-card{
    width:90%;
}
.manga-card img{
    width:90px;
    height:90px;
}
}