@charset "utf-8";

@font-face {
  font-family: 'my-font';
  src: url(../FONT/ShipporiGothicB2-OTF-Bold-Web.woff) ;
  font-display:swap;
  unicode-range: U+0080-FFFF;
}

@font-face {
  font-family: 'my-font2';
  src: url(../FONT/ZTChintzy-Medium.woff2);
  font-display:swap;
  unicode-range: U+0030-0039, U+0041-007A;
}

@font-face {
  font-family: 'Mincho';
  src: url(../FONT/ShipporiMinchoB1-OTF-Medium-Web.woff) ;
  font-display:swap;
}

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?764h4w');
  src:  url('../fonts/icomoon.eot?764h4w#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?764h4w') format('truetype'),
    url('../fonts/icomoon.woff?764h4w') format('woff'),
    url('../fonts/icomoon.svg?764h4w#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-pen:before {
  content: "\e900";
  color: #394D5C;
  font-size:1.5em;
}
.icon-Youtube:before {
  content: "\e901";
  color: #652828;
  font-size:1.5em;
}
.icon-TV:before {
  content: "\e902";
  color: #252c3d;
  font-size:1.5em;
}




:root {
    --mainColor: #F2EAE6;
    --lightColor: #adc9cd;
    --mediumColor: #39657D;
    --darkColor:#252c3d;
    --accentColor:#CDB598;
}
body {
    background-image: url("../IMG/016.png");
    background-repeat: repeat; 
    color: var(--darkColor);
    margin-top: 0;
    font-size:1em;
    font-family:"my-font", "my-font2";
    letter-spacing: -0.01em;
    line-height: 1.7;
}



.contentsWrap {
    width: 100%;
    margin:0 auto;
}

h1{
    font-size:2em;
    text-align:center;
    margin:2.5em 0;
}

h2{
    font-size: 1.15em;
    font-weight: normal;
    width:fit-content;
    padding:0 3em 0 0;
    border-bottom:solid 3px var(--darkColor);
    margin:5em 0 1em ;
}

h3{
	color:var(--mediumColor);
    font-weight: normal;
    font-size: 1.1em;
    padding:0.2em 0 0.2em 0em;
    margin:3.5em 0 0.5em;
    line-height: 1.3;
}

h4{
  font-weight: normal;
  border-left:solid 5px var(--lightColor);
  padding:0.1em 0 0.1em 1em;
  margin:2.5em 0 1em;
}

ul, ol {
  border-left: solid 3px var(--darkColor);
  padding: 0.5em 0 0.5em 2.5em;
  margin:0.8em;
  color: var(--darkColor);
}
ul{
	margin:0.8em;
	list-style-type: square;
}
ol{
	list-style-type:decimal-leading-zero;
}

li{padding:0 0 0.2em 0.2em;}

a {
	text-decoration-color: var(--lightColor);
    text-decoration-line: underline;
	text-underline-offset:-0.2em;
    text-decoration-thickness:50%;
    text-decoration-skip-ink: none;
}

a:link {
color:var(--mediumColor);
    
}
a:visited{
	text-decoration-color: var(--accentColor);
color:var(--mediumColor);
}

p{
	margin:1.5em 0;
	text-indent: 1em;
	overflow-wrap: break-word;
	line-break: strict;
	hanging-punctuation: last allow-end;
	text-align: justify;
	text-justify: inter-ideograph;
}

.description{
	margin:0.5em 0;
	text-indent: 0;
}

.kome{
	text-indent: 0;
	padding-left: -1em;
	color:var(--mediumColor);
	border:solid 3px var(--lightColor);
	border-radius:0.1em;
	padding:1em 1em 1em 2em;
	margin:1.8em 0;
}

.imagebox{
  display: flex;
  justify-content: center;
}

.imagetate{
  width:50%;
  margin:1.2em 0.5em;
  border:solid 3px var(--darkColor);
  border-radius:0.1em;
}
.imageyoko{
  width:100%;
  margin:1.2em 0.5em;
  border:solid 3px var(--darkColor);
  border-radius:0.1em;
}

.box{
    position: relative;
    padding: 0 4% 5em;
    border-top:solid 3px var(--darkColor);
}

::selection {
  color: var(--mainColor);
  background-color: var(--mediumColor);
}

.link{
	font-size:0.9em;
	text-decoration:none;
}



table{
  border-collapse:separate;
    border:solid 3px var(--darkColor);
    border-radius:0.1em;
  width: 100%;
  margin:auto;
  margin:1.5em 0;
  padding:0.6em 0;
}

table th,table td{
  text-align:center;
  padding:0.6em;
  
}

table th{
  border-right:solid 2px var(--mediumColor);
  font-weight:normal;
  vertical-align:middle;
}

.linkcard{
	display:flex;
	border:solid 3px var(--darkColor);
	border-radius:0.1em;
	padding:1em 2em;
	box-shadow: 3px 3px 0em 0em var(--darkColor);
	flex-grow: 1;
	justify-content:center;
	align-items:center;
}

.linkcard:active{
	transform:translate(3px,3px);
	box-shadow: 0px 0px 0em 0em var(--darkColor);
}

.linkcardbox{
	display: inline-block;
    margin:1em 0.5em;
}

.blogdate{
	padding:0.5em 0 0 2em;
	display: block;
	text-align:right;
	font-size:0.8em;
}

.blogcardbox{
	display: block;
    margin:2em 0;
    border:solid 3px var(--darkColor);
    padding:1.3em 1.3em 1em;
    border-radius:0.1em;
    text-decoration:none;
    line-height:1.4em;
    font-size:1.05em;
}

.notedate{
	display: block;
	text-align:right;
	padding:0.5em 0 0 2em;
	font-size:1.2em;
	margin:0 1em 2em 0;
	color:var(--darkColor);
}

.text-emphasis-dot {
   -webkit-text-emphasis: dot;
    text-emphasis: dot;
}

.NovelTitle ,.NovelDate{
  font-family:"Mincho" ;
}


.banner{
    border-bottom:solid 7px var(--darkColor);
    padding: 3em 8% 2.5em;
    margin-bottom:0.2em;
}

.bannerlink{
	display:flex;
	justify-content: space-between ;
	align-items: flex-end;
	margin-bottom:2em;
}

.top{
display:flex;
justify-content: space-between ;
align-items: flex-end;
}

.top-h1{
    font-size:3em;
    text-align:left;
    font-weight:bold;
    text-decoration:none;
    line-height: 1;
}

#toptitle{
	font-size:3.8em;
}

.colorchart{
	display:flex;
	justify-content: flex-end;
}

.color-part{
	width:1em;
	height:1em;
	margin:0.1em;
	border:solid 3px var(--darkColor);
	border-radius:0.1em;
}

.dark{background-color: var(--darkColor);}
.medium{background-color: var(--mediumColor);}
.light{background-color: var(--lightColor);}
.main{background-color: var(--mainColor);}
.accent{background-color: var(--accentColor);}

.linkbox{
	display:flex;
	justify-content:space-between;
	width:90%;
	margin:1.2em auto 0;
	flex-wrap: wrap;
	row-gap:1.5em;
	column-gap:1em;
}

.linkboxpart{
	border:solid 3px var(--darkColor);
	border-radius:0.1em;
	padding:0.8em 1.8em;
	flex-grow:1;
	text-align: center;
}


.novelchart{
  display:flex;
  justify-content: flex-start;
}

.novelchart-part{
	margin:0.3em;
	border:solid 3px var(--darkColor);
	border-radius:0.1em;
  padding:0.2em 0.6em;
}

.nextbackblock{
  display: flex;
  justify-content:space-between;
  margin: 4em 4em;
}

.nextback{
  border:solid 3px var(--darkColor);
  border-radius:0.1em;
  padding:0.4em 1em 0.6em;
}

.icon{
    text-decoration:none;
}

.title{
	font-size:5em;
	margin:2em 0 0.3em;
}

.subtitle{
	font-size:1.5em;
	margin-bottom:4em;
	display:block;
	text-align:center;
}

.icon-picture img{
	width:50%;
	border:solid 3px var(--darkColor);
	border-radius:50%;
}
.icon-picture{
	display:block;
	text-align:center;
}

.Novel{
	font-family:"mincho",serif;
  font-feature-settings: 'pkna' 0;
  letter-spacing:-0.02em;
}

.novelh2{
  margin:5em 0 3em;
}

.novelcharth4{
  margin:0.8em 0 0.5em;
}

.Lylic{
  text-indent:0em;
  font-size: 0.9em;
}

.Youtubeframe{
  width: 100%;
  aspect-ratio: 16/9;
}

.Youtube{
  border:solid 3px var(--darkColor);
  border-radius:0.1em;
}

.footer{
	text-align:center;
	margin:1em 0 4em;
	padding-top:3em;
	border-top:solid 7px var(--darkColor);
}


@media screen and (min-width: 960px) {

  .pageWrap{
    padding:3em 0;
    font-size:1.2em;
  }
  .boxwrap{
    padding:0 25vw;
  }

  .toplink{
    width:60%;
    margin-bottom:1em;
  }

  .box{
    padding: 0 8% 5em;
    border-top:none;
  }

  .banner{
    margin-bottom:8em;
  }

  .bannerlink{
    padding-bottom:2em;
  }

  .notedate{
    padding:1em 0 0 2em;
    margin:0 1em 2em 0;
  }

  .footer{
    padding-top:5em;
  }

  .linkbox{
    margin-top:2em;
  }
}