@charset "UTF-8";
@import url("html5reset-1.6.1.css");
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Halant:wght@300&family=Klee+One&family=Oooh+Baby&display=swap");
/* レイアウト */

*{
line-height:150%;
}

body{
color:#333;
background-color:#E5E4E2; 
font-family: 'Noto Serif JP', 'EB Garamond', 'Noto Serif JP', serif;

.base{
margin:0 auto;
max-width:1500px;
}

.header{
padding:10px;
text-align:center;
margin:0 auto;
background-color:#fff;
width:80%;
box-shadow: 0px 0px 0px 9px #fff,0px 0px 0px 11px;
border-width:1px;
border-style:solid;
}



.footer{
padding:10px;
text-align:center;
margin-top:10px;
}

.work{
padding:10px;
margin:0px 5px;
width:50%;
margin-top:20px;
}

.subwork{
padding:10px;
margin:5px;
width:45%;
background-image:url(image/bg.jpg);
background-size:cover;
background-position:center;
border-width:1px;
border-style:solid;
height:95vh;
}

.subwork2{
height:60%;
}

.menu{
margin:30px 0px;
display:flex;
flex-wrap:wrap;
justify-content:space-around;
font-family: 'Cinzel', serif;
}

.column{
display:flex;
flex-wrap:nowrap;
justify-content:center;
margin:15px 0px;
}

.box{
margin:0px 5px;
display:flex;
flex-direction:row;
}

a:link{
color:#7851A9;
text-decoration:none;
}

a:visited {
color: #7851A9;
text-decoration: none;
}


/*SWELL目次風*/
.box30{
margin: 2em auto;
padding:1em;/*内側余白*/
background:linear-gradient(-45deg,transparent 25%,#fafafa 25%,#fafafa 50%,transparent 50%,transparent 75%,#fafafa 75%,#fafafa);
background-size: 4px 4px;
border-bottom: 4px double #ddd;
border-top: 4px double #ddd;
background-clip: padding-box;
}

/* タグ */

h1{
font-size:150%;
font-weight:normal;
font-family: 'Cinzel', serif;
}

H2 {
font-family: 'KleeOne','Noto Serif JP','EB Garamond', 'Noto Serif JP', serif;
font-size: 0.85em;
font-weight: normal;
margin: 10px;
line-height: 1.6; /* 行間を広く設定 */
text-align: justify; /* 両端揃え */
text-justify: inter-ideograph; /* 両端揃えの種類 */
font-feature-settings: "palt";
}



h3{
font-size:130%;
font-weight:normal;
text-align:center;
margin:20px 0px;
font-family: 'Cinzel', serif;
}

h3 span{
display:block;
margin-top:0px;
color:#888;
font-size:60%;
}

h4{
font-size:100%;
font-weight:normal;
margin:15px 0px;
border-width:0px 0px 1px 0px;
border-style:solid;
border-color:#ccc;
font-family: 'Cinzel', serif;
}

h4:first-letter{
font-size:130%;
color:#8B8680;
}

h5{
font-family: 'Open Sans','Noto Sans JP','Roboto','EB Garamond',  serif;
text-align: justify; /* 両端揃え */
text-justify: inter-ideograph; /* 両端揃えの種類 */
font-feature-settings: "palt";
font-size:90%;   
margin:10px 0px;
color:#8B8680;
}

h6{
font-size:85%;
font-weight:normal;
margin:10px 0px;
padding:3px;
background-color:#F4F0EC;
border-radius:4px;
}

H7 {
font-family: 'Noto Serif JP','EB Garamond', 'Noto Serif JP', serif;
font-size: 0.8em;
font-weight: normal;
margin: 10px;
}

p{

font-size:16px;
text-align:left;
margin:10px 0px;
padding:5px;
font-size:80%;
letter-spacing: 0.05em; /* 文字の5%分あける */
text-align: justify; /* 両端揃え */
text-justify: inter-ideograph; /* 両端揃えの種類 */
font-feature-settings: "palt";
}

em{
background: linear-gradient(transparent 60%, #fff799 60%);
font-style:normal;
}

strong{
font-weight:normal;
background-color:#549D0E;
color:#fff;
}

small{
font-size:70%;
}

big{
font-size:130%;
}

ins{
background-color:#fafafa;
text-decoration:underline overline #7851A9;
}

i{
font-style:italic;
}



/* 長編　Serial Novel用の画像 */
img {
max-width:100%;
height:auto;
vertical-align:bottom;
}

/* ul（リスト共通） */
ul {
list-style-type:none;
list-style-position:inside;
}

/* ulリスト( Serial Novel ) */
.ul_1 {
display:inline;
}

.ul_1>li {
display: inline;
}

.ul_1>li:last-child {
margin-right:0;
}

/* dlリスト( Serial Novel ) */
.serial_novel {
margin-top:0em;
display:flex;
}

.serial_novel>dt {
margin-right:20px;
width:160px;
}

.serial_novel>dd {
width:100%;
flex:1;
}

.in-progress { font-size: 0.9em;
display: inline;
}


/*ulリスト( Serial Novel )（縦並び）*/
.ul_serial_novel {}

.ul_serial_novel>li {
    display: block;
    margin-top: 3px;
}



ol{
margin:10px 0px;
}

address{
font-size:75%;
font-family: 'Halant','Klee One',YuMincho, 'Yu Mincho', 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN',  'serif';
}

cite{
font-size:smaller;
}


/* フォーム、ボタン */
input, textarea {
padding: 10px;
margin-bottom: 10px;
border: #2c3056 1px solid;
background:#f0f8ff;
outline: none;
}

input[type="submit"] {
width: 15px;
padding: 7px 10px;
background: #F4F0EC;
color: #333;
transition: 0.2s;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-ms-transition: 0.2s;
-o-transition: 0.2s;
}

input[type="submit"]:hover {
background: #eaf2f6;
color: #333;
cursor: pointer;
}

input[type="button"] {
width: 100px;
padding:7px 10px;
background: #F4F0EC;
color: #333;
}

input[type="button"]:hover {
background: #eaf2f6;
color: #333;
} 

input[type="text"] {

padding:7px 10px;
background: #f0f8ff;
color: #333; 
}


/* CONTACT */
.mailform input {
 width: max(50%, 400px);
}

.mailform textarea {
 width: 100%;

}

 /* CONTACT タブレット、スマホ */
@media screen and (max-width: 768px) {
 .mailform input,
 .mailform textarea {
  max-width: 90%;
 }
}


/* セクションとアーティクル */
article {
margin: 3em auto;
text-align: justify;
word-break: break-all;
}

/* 文字色 */
nav p,
.atogaki {
color: #808080;
}
 




/* ↓classタグ↓ */

.item{
background-color:#fff;
text-align:center;
margin:5px;
padding:0px 5px;
border-radius:4px;
}

.co-1{
padding:10px 5px;
font-size:90%;
text-align:center;
width:40%;
background-size:cover;
background-position:center;
min-height:100px;
background-color:#F4F0EC;
}

.co-1 span{
background:rgba(255,255,255,0.8);
padding:0px 2px;
}

.bg1{
background-image:url(image/bg1.jpg);
}

.bg2{
background-image:url(image/bg2.jpg);
}

.co-2{
padding:10px 5px;
font-size:75%;
text-align:left;
width:100%;
}

.list1{
list-style-type:circle;
}

.list2{
list-style-type:upper-roman;
}

.hr1{
margin:5px 0px;
border-top: 1px #ccc;
border-bottom: 1px #fff;
border-style:solid;
}

.hr2{
margin:5px 0px;
border-top: 1px #aaa;
border-style:dashed;
}

.hr3{
margin:5px 0px;
height:50px;
border-width:0px;
}

.p1{
background-color:#f9f9f9;
}

.p2{
border-style:double;
border-width:3px;
border-color:#ccc;
}

.p3{
border-style:solid;
border-width:2px;
border-color:#F4F0EC;
}

/* 自サイトリンク設定 */
.dl_mylink{
font-family: 'Noto Serif JP', 'EB Garamond', 'Noto Serif JP', serif;
border-style:solid;
border-width:0px 0px 0px 2px;
border-color:#F4F0EC;
padding:4px;
}

.dt_mylink{
margin:5px 0px 5px -10px;
}

.dd_mylink_0 {
background-image: url('image/le_icon.gif'); 
background-position: left; /* 画像を左に配置 */
background-repeat: no-repeat; /* 画像を繰り返さない */
padding-left: 10px; /* 必要に応じてパディングを追加 */
font-size:90%;
}

.dd_mylink {
padding-left: 21px; /* 必要に応じてパディングを追加 */font-size:90%;
}
/* ↑自サイトリンク設定 */



.dl1{
font-family: 'Noto Serif JP', 'EB Garamond', 'Noto Serif JP', serif;
}

.dt1{

margin:5px 0px 5px -10px;
}

.dd1{
border-style:solid;
border-width:0px 0px 0px 2px;
border-color:#F4F0EC;
padding:4px;
font-size:90%;

}


.dt2{
padding:0px;
}

.dt2:before{
content:'▸';
color:#7851A9;
font-size:20px;
}



.memo{
background-color:#F4F0EC;
font-family: 'Noto Serif JP','EB Garamond', 'Noto Serif JP', serif;
font-size:0.8em;
padding:0px 10px;
height:150px;
overflow:auto;
margin:5px 10px;

font-weight:normal;

}

.img1{
box-shadow:1px 1px 3px -1px #888;
margin:1px;
}

.pagetop{
position:fixed;
bottom:10px;
right:14px;
}
 
.pagetop a{
display: block;
text-decoration: none;
}
 
.pagetop:hover{
opacity: 0.7 ;
}


/* リンクホバー時の設定 */
a {
position: relative;
}
a::after {
content: "";
position:absolute;
left:0;
bottom:1px;
border-bottom:1.5px solid #666;
width:0%;
transition:0.3s;
}
@media (hover: hover) {
a:hover::after {
width:100%;
  }
}

/* ホバー装飾の無効化 */
a:is(.snslist *)::after,
.btn::after,
.pageup::after {
display: none;
}




/* Home 小説一覧リスト */
.novellist {
margin-top: 20px;
}
.novellist.--2column {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

/* スマホ */
.novellist.--2column .novellist__item {
margin: 0;
}
.novellist.--2column > :last-child {
margin-bottom: 0;
}
.novellist.--2column .novellist__text {
margin-left: 0px;
}
@media screen and (max-width: 520px) {
.novellist.--2column {
grid-template-columns: 1fr;
  }
}

.novellist__item {
margin-bottom: 40px;
}

.novellist__item .grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}

/* 小説（キャラ名・タイトル） */
.novellist__title {
display: block;
font-size: 12px;
background-color: #F0F2F5;
padding: 4px 20px;
width: -moz-fit-content;
width: fit-content;
}
.novellist__title::after {
bottom: 9px;
}

.short .novellist__title {
font-size: 14px;
}

.novellist__title + * {
margin-left: 20px;
}

/* 短編小説（数字色） */
.novellist__number {
color: #262D40;
margin-right: 10px;
}

/* 短編小説（説明文） */
.novellist__text {
display: block;
font-size: 0.8em;
margin: 10px;
margin-left: 20px;
}

/* Home 小説リスト横並び */
.flex {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: center;
}

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
justify-content: center;
align-items: center;
}

/* タブレット、スマホでは１カラム */
@media screen and (max-width: 768px) {
  .--2column {
    grid-template-columns: 1fr;
  }


/* スマホ表示用のスタイル */
@media (max-width: 600px) {
.novellist__item {
margin-bottom: 5px; /* スマホ用にマージンを調整 */
}

.novellist__item .grid {
grid-template-columns: repeat(auto-fill, minmax(10px, 1fr)); /* スマホ用にグリッドの列幅を調整 */
gap: 10px; /* スマホ用にギャップを調整 */
}

.novellist__item a {
font-size: 14px; /* スマホ用にフォントサイズを調整 */
}

.novellist__title {
font-size: 8.0pt; /* スマホ用にフォントサイズを調整 */
}

.novellist__text {
font-size: 0.7em; /* スマホ用にフォントサイズを調整 */
}
 

/* LINK */
.linklist__item a {
text-decoration: none;
margin-right:5px; /* 左右のマージンを5pxに設定 */
padding: 0; /* パディングを0に設定 */
}



/*↓ディスプレイ900px以下用↓*/

@media screen and (max-width:768px) 

{

body {
color:#333;
font-family:Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, 'Noto Sans', 'Arial', sans-serif;


h1{
font-size:130%;
}

h2{
font-size:0.8em;  
font-family: 'Halant','Klee One',YuMincho, 'Yu Mincho', 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN',  'serif';
}
line-height: 1.8; /* 行間を1.8倍に設定 */
text-align: justify; /* 両端揃え */
text-justify: inter-ideograph; /* 両端揃えの種類 */
font-feature-settings: "palt";
}

h3 span {
display:block;
margin-top:0px;
color:#888;
font-size: 10pt;
font-family:ヒラギノ角ゴ Pro W3, "メイリオ", "Hiragino Kaku Gothic Pro", " Meiryo, Osaka, sans-serif;
}

h5{
text-align: justify;
text-justify: inter-ideograph;
font-feature-settings: "palt";
line-height: 1.3em;
font-size:12px;   
margin:0px 0px;
color:#8B8680;
font-family: 'Open Sans','Noto Sans JP','Roboto','EB Garamond',  serif;
}

H7 {
font-family: 'Noto Serif JP','EB Garamond', 'Noto Serif JP', serif;
font-size: 0.8em;
font-weight: normal;
margin: 10px;
}

.memo{
background-color:#F4F0EC;
padding:0px 10px;
height:150px;
overflow:auto;
font-size: 0.8em;
margin:5px 10px;
font-family: 'Open Sans','Noto Sans JP','Roboto','EB Garamond',  serif;
}


.dt2{
padding:0px;
font-size: 16px;
font-family:ヒラギノ角ゴ Pro W3, "メイリオ", "Hiragino Kaku Gothic Pro", " Meiryo, Osaka, sans-serif;
}

.base{
width:auto;
margin:0px 5px;
}

.box{
margin:0px;
flex-direction:column;
} 

.work{
width:auto;
margin:0px;
padding:10px;
}

.subwork{
width:auto;
margin:5px 0px;
padding:10px;
height:85vh;
}

.subwork2{
height:50%;
}

.text{
width:auto;
margin:0px;
padding:10px;
}

.menu{
margin:30px 0px;
font-size:90%;
}

.column{
flex-direction:column;
width:auto;
margin:10px 0px;
}

.co-1{
width:97%;
}

.co-2{
width:97%;
}

.item a{
display:block;
}

input[type="text"], input[type="button"] {
width: 50%;
  }



/* ulリスト( Serial Novel ) */
.ul_1 {
display:inline;

}

.ul_1>li {
display: inline;
.ul_1>li:first-child a {
  font-size: 2em; /* フォントサイズを2emに設定 */
}


}

.ul_1>li:last-child {
margin-right:0;
font-size: 1.2em;
}

/* dlリスト( Serial Novel ) */
.serial_novel {
margin-top:0em;
display:flex;

}

.serial_novel>dt {
margin-right:20px;
width:160px;
}

.serial_novel>dd {
width:100%;
flex:1;
}

.in-progress { font-size: 1.0em;
display: inline;
}




/* 短編小説（説明文） */
.novellist__text {
display: block;
font-size: 0.8em;
margin: 10px;
margin-left: 20px;
line-height: 1.8; /* 行間を1.8倍に設定 */
}


* スマホ表示用のスタイル 
*/ @media (max-width: 768px) 
{ 
.dl1, dd1 { margin: 0 auto; /* 要素を中央揃え */
 width: 90%; /* 要素の幅を調整 */ 
}

h2{
font-size:50%;
font-weight:normal;
margin:10px;
}


/* リンクホバー時の設定 */
a {
position: relative;
}
a::after {
content: "";
position:absolute;
left:0;
bottom:1px;
border-bottom:1.5px solid #666;
width:0%;
transition:0.3s;
}
@media (hover: hover) {
a:hover::after {
width:100%;
  }
}





}