@import url('https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500;600;700;800&display=swap');

/*基本設定*/
html{font-size: 62.5%;}
body,table{font-family: 'Noto Sans JP', sans-serif;font-size: 1.4rem;color:#3b3b3b;}
div{box-sizing:border-box; }
p, a{text-align:inherit}
p{word-break: normal;word-wrap: break-word;text-align:justify;}
h2{line-height:1.3em;}
ul,dl{letter-spacing: -.40em;}
li,dd,dt{letter-spacing: normal;}

a:hover>img{opacity:0.7;text-decoration:underline;}
img{  pointer-events: none;
user-select: none;
vertical-align: bottom;
-webkit-user-select: none;
width: auto;
height: auto;
-ms-interpolation-mode: bicubic;}
a img{display:block;}

body::before {
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background: #fff url(../img/bg.png) right/cover no-repeat;
}

[data-ruby] {
	position: relative;
}
 [data-ruby]::before {
	content: attr(data-ruby);
	position: absolute;
	top: -.8em;
	left: 0em;
	right: 0;
	margin: auto;
	font-size: 0.5em;
	width: max-content;
	text-align: center;
	letter-spacing: 0;
}
.small_ruby[data-ruby]::before {
    font-size: 0.4em;
    width: 100%;
    line-height: .9;
    text-align: justify;
    top: -1em;
    letter-spacing: -.1em;
}

#cboxOverlay{background: #000!important;z-index:100000!important;}
#colorbox{z-index:100001!important;}

.inner{width: 980px; margin: 0 auto;}

.body_in {padding-top: 0;}
header{position: relative; background: #000;  padding: 0.75em 0; z-index: 10;}
header h1 img{height: 4rem;width: auto;}

.outer >footer{background: none;color:#fff;text-align:center;}
.outer a:hover{text-decoration:none;}

#visual{
	margin-bottom: -65px;
	position: relative;
	z-index: 2;
	overflow-x: hidden;
	mask-image: linear-gradient(to bottom, transparent 0%, 0%, #000 95%, transparent 100%);
}
#visual .inner{background-size: 100%; background-position: 0 50px;}
#visual>div{position:relative;text-align: center;margin: 0 auto;}
#visual>div>h1.logo {
    position: absolute;
    bottom: 22em;
    left: 4em;
    width: 40em;
    z-index: 1;
}
#visual>div>.logo_sub {
    position: absolute;
    bottom: 21rem;
    right: 3em;
    width: 7em;
    z-index: 1;
}
#visual>div>h2 {
    position: absolute;
    margin: auto;
    z-index: 1;
}
#visual>div>h2.c_l {
    left: 1em;
    top: 1.5em;
    width: 9em;
}
#visual>div>h2.c_r {
    right: 1.5em;
    top: 1.5em;
    width: 12em;
}
#visual>div>h1.logo img,
#visual>div>.logo_sub img,
#visual>div>h2 img,
#visual>div>h3 img,
#visual>div>h4 img,
#visual>div>h5 img {
	width: 100%;
	height: auto;
}
#visual>div>h3 {
    position: absolute;
    width: 12em;
    top: -.2em;
    margin: auto;
    right: 4em;
    z-index: 1;
}
#visual>div>h4 {
    position: absolute;
    margin: auto;
    right: 50%;
    transform: translateX(50%);
    bottom: 5em;
    width: 95%;
    z-index: 1;
}
#visual>div>h4 img {width: 100%;height: auto;}
#visual>div>h5 {
    position: absolute;
    width: 11em;
    top: 2em;
    right: 15em;
    z-index: 1;
}
#visual>div>h5 img {width: 100%;}
#visual div>figure img {
    width: 100%;
	/* margin-top: -70px; */
    mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
#buttons{position: relative;z-index: 5;margin-bottom: -4.5em;}
#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%;background: #000000;}
#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: 1;transition:0.5s;filter: brightness(1.5);}
/* #buttons ul li:first-child{flex-grow: 1;background: #940b1e;}
#buttons ul li:nth-child(2){flex-grow: 1;background: #940b1e;} */

/*表示するテキストが切り替わる*/
.btntextchange{
    /*テキストの基点とするためrelativeを指定*/
	position: relative;
    /*アニメーションの指定*/
    transition: all .2s;
}
#buttons ul li.btntextchange {color:#fff;display:block;padding: 1em 0;font-weight: 500;}
#read div.btntextchange {font-size: 178.6%;height: 3.8em;width: 70%;color: #fff;background: #000;text-align:center;margin: 0 auto;border-radius:0.5em;border:2px solid #fff;box-shadow:0px 0px 3px 1px #000000;}

/*hoverした際の変化*/
#buttons ul li.btntextchange:hover {
background:#c7c6c7;
color:#717073;
opacity: 1;
filter: none;
}
#buttons ul li.btntextchange:hover a {color: #717073;}
/*hoverした際の変化*/
#read div.btntextchange:hover {
background:#c7c6c7;
color:#717073;
opacity: 1;
}

.btntextchange span{
	/*絶対配置でテキストの位置を決める*/
	position: absolute;
	left: 50%;
	top:50%;
	transform:translate(-50%,-50%);
	/*アニメーションの指定*/
	transition: all .5s;
/*ブロック要素にしてテキスト折り返しなし*/  
	display: block;
	white-space: nowrap;
}

/*差し替わるテキストの設定*/
.btntextchange span:nth-child(2){
	opacity:0;/*透過0に*/
}
/*hoverするとテキストが入れ替わる設定*/
.btntextchange:hover span:nth-child(1){
	opacity:0;/*透過0に*/
}
.btntextchange:hover span:nth-child(2){
	opacity:1;/*不透明に*/
}

div.inner>h2{
	display: block;
	width: fit-content;
	text-align:center;
	margin-inline: auto;
	margin-bottom: 3em;
	position: relative;
}

#story div.inner>h2 img {
    height: 6rem;
    width: auto;
    position: relative;
	filter: drop-shadow(0.2em 0.2em 0.3em #fff) drop-shadow(-0.2em -0.2em .3em #fff) drop-shadow(0 0 .3em #fff);
}
#character div.inner>h2 img {
	height: 6rem;
	width: auto;
	position: relative;
	filter: drop-shadow(0.2em 0.2em 0.3em #fff) drop-shadow(-0.2em -0.2em .3em #fff) drop-shadow(0 0 .3em #fff);
}
#gallary div.inner>h2 img {
	height: 6rem;
	width: auto;
	position: relative;
	filter: drop-shadow(0.2em 0.2em 0.3em #fff) drop-shadow(-0.2em -0.2em .3em #fff) drop-shadow(0 0 .3em #fff);
}
#visual div.inner>h2::before,
#visual div.inner>h2::after,
#books  div.inner>h2::before,
#books  div.inner>h2::after {
	display: none;
}
#story {
    width: calc(790px + 4em);
    position: relative;
    text-align: center;
    z-index: 2;
    margin: 9em auto 0;
    border: 2rem solid #fdd000;
	background: #fff url(../img/bg_content.svg) right/cover no-repeat;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}
#story .inner{
	position: relative;
	padding: 3em 0;
	width: 100%
}

#story h2 {
	margin: 1em auto 2.5em;
}
#story p {
    color: #000;
    font-size: 2rem;
    text-align: center;
    line-height: 2;
    font-weight: 900;
    padding-bottom: 1em;
    width: calc(100% - 4em);
    margin: 0 auto;
}
#story [data-ruby] {
position: relative;
}
#story [data-ruby]::before {
content: attr(data-ruby);
position: absolute;
top: -1.2em;
left: 0em;
right: 0;
margin: auto;
font-size: 0.5em;
width: max-content;
text-align: center;
letter-spacing: 0;
}



#character {position: relative;z-index: 2;padding: 6em 0 0;}
#character ul li {
    position: relative;
    width: calc((100% - 4em) / 3);
    height: auto;
    background: #fff url(../img/bg_content.svg) right / cover no-repeat;
    padding: 1em;
    border: .5em solid #dff000;
}
#character ul li:nth-of-type(1){
	border: .5em solid #fad046;
}
#character ul li:nth-of-type(2){
	border: .5em solid #edb2cc;
}
#character ul li:nth-of-type(3){
	border: .5em solid #85d2f2;
}
#character ul li:nth-of-type(4){
	border: .5em solid #b385f2;
}
#character ul li:nth-of-type(5){
	border: .5em solid #61cf75;
}
#character ul li div {
	position: relative;
	z-index: 2;
}
#character ul li .ch_area {
    display: flex;
    justify-content: flex-start;
}
#character ul {
    display: flex;
    flex-wrap: wrap;
    gap: 3em 2em;
	justify-content: center;
}
#character ul li::before {
	position: absolute;
}
#character ul li .img_area {
	width: 100%;
	height: auto;
	margin-bottom: 1.5em;
}
#character ul li .img_area img {
	width: 100%;
	height: auto;
	filter: drop-shadow(0.2em 0.2em 0.8em #fff);
}
#character ul li .txt_area {
    /* width: 90%; */
    margin: 0 auto;
}
#character ul li p {
	font-size: 1.8rem;
	width: 95%;
	margin-inline: auto;
	z-index: 2;
}
#character ul li .ch_name p {
    display: flex;
    gap: .3rem;
    justify-content: center;
    color: #fff;
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: .5rem;
}
#character ul li .ch_name p span {
	background-color: #000;
	padding: 0 .1em;
}
#character ul li .ch_name p span.orange {
	color: #fad046;
}
#character ul li .ch_name p span.pink {
	color: #edb2cc;
}
#character ul li .ch_name p span.blue {
	color: #85d2f2;
}
#character ul li .ch_name p span.parple {
	color: #b385f2;
}
#character ul li .ch_name p span.green {
	color: #61cf75;
}
#character ul li .ch_name p.rubi {
    color: #000;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;
    display: block;
    width: fit-content;
    filter: drop-shadow(.1em .1em .1em #fff) drop-shadow(.1em .1em .1em #fff) drop-shadow(0 0 .1em #fff);
}
#character ul li .ch_name p [data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -.8em;
    left: 0em;
    right: 0;
    margin: auto;
    font-size: 0.4em;
    width: max-content;
    text-align: center;
    letter-spacing: 0;
}
#character ul li .ch_about p {
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.5;
    color: #000;
    display: block;
    width: fit-content;
    text-align: center;
    filter: drop-shadow(0 0 .1em #fff) drop-shadow(0 0 .1em #fff) drop-shadow(0 0 .1em #fff);
}
.txt_area_inner {
    margin-top: 1.5em;
}
#character ul li .ch_name,
#character ul li .ch_work {
	margin-bottom: 1em;
}

#gallary {padding: 6em 0 2em;}

#gallary ul {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2em;
}
#gallary li {
    filter: drop-shadow(0.2em 0.2em 0.8em #fff);
    width: calc((100% - 4em) / 3);
	cursor:  pointer !important;
}
#gallary li img {
	width: 100%;
	cursor:  pointer !important;
}
#gallary li a {
	cursor:  pointer !important;
}
#gallery ul li:hover {
	opacity: 1;
	filter: contrast(1.3);
	cursor:  pointer !important;
}


#link_soon {padding: 4em 0;}
.soon {text-align: center;}


#special p.soon {
	background: #f5e7d3 url(../img/bg_content.png);
	background-size: cover;
	background-position: top right;
	background-repeat: no-repeat;
	filter: drop-shadow(0.2em 0.2em 0.8em #190908);
	color: #190908;
    height: 8em;
    margin-top: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-family: 'M PLUS 1p', sans-serif;
    font-weight: 800;
}
#special {margin-bottom: 7em;}
#special h2 {margin: 0;}
#special h2+p {text-align: center;margin-top: 0; font-size: 2.5rem; color: #fff;font-family: 'Shippori Mincho', serif;margin-bottom: 1em;}
#special div.special_list_wrap {display: flex;align-items: flex-start;justify-content: space-between;}
#special div.special_list_wrap ul {width: 48%;}
#special ul li:not(:first-child) {margin-top: 5%;}
#special dl {
	background: #f5e7d3 url(../img/bg_content.png);
	background-size: 200%;
	background-position: top center;
	background-repeat: no-repeat;
	filter: drop-shadow(0.2em 0.2em 0.8em #190908);
	font-family: 'Shippori Mincho B1', serif;
	padding: 5%;
}
#special dl dt {font-size: 3.6rem;color: #711f29;text-align: center;line-height: 1;margin-bottom: 0.5em;}
#special dl dt::before {
	content: "";
	width: 1em;
	height: 1em;
	background: url(../img/deco_mark.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	display: inline-block;
	vertical-align: sub;
}
#special dl dt::after {
	content: "";
	width: 1em;
	height: 1em;
	background: url(../img/deco_mark.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	display: inline-block;
	vertical-align: sub;
}
#special dl dd {font-size: 1.8rem;color: #190908;font-weight: 500;filter: drop-shadow(0.1em 0.1em 0.1em white);}
#special dl dd.long {letter-spacing: -0.01em;font-size: 1.78rem;}
#special dl dd img {width: 100%;height: auto;margin-bottom: 1em;}
#special dl dd a {color: #711f29;}
#special ul li.pay {position: relative;cursor: pointer;}
#special ul li.pay::before {
	position: absolute;
	content: "有償";
	display: inline-block;
	top: 11%;
	right: 2%;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: #940b1e;
	color: #fff;
	box-sizing: border-box;
	font-size: 1.8rem;
	line-height: 70px;
	z-index: 1;
	text-align: center;
	filter: drop-shadow(0.1em 0.1em 0.1em #7e705a);
}


#read{padding: 4em 0 5em;}
#read span{font-size:70%;}
#read b{font-weight:bold;font-size:150%;}
#read a{width: 70%;color:#fff;display:block;padding: 1em 0;font-size:125%;background: #000000;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: 1;transition:0.5s;filter: brightness(1.5);}
#read a i {
	font-size: 100%;
    vertical-align: middle;
    margin-right: 0.4em;
    line-height: 1.8;
}

#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;}


#link {padding: 4em 0;}
#link a:hover{opacity: 0.8;}
#link a{width: 800px; 
	margin:0 auto;
	display: block;
	border-radius: 0.5em;
	background: #e50012;
	padding: 5px;
	border-radius: 10px;
}
#link a div{
	position: relative;
	padding: 0.5em;
	border: 2px solid #fff;
	border-radius: 8px;
	color:#fff;
	font-size: 3rem;
	font-weight: bold;
	text-align: center;
}
#link a div::before{
	position: absolute;
	content: "";
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid #fff;
	top: calc( 50% - 10px);
	right: 40px;
}
#link a div img{height: 1em; display: inline-block; vertical-align: middle;margin-right: 0.5em}
#link a div span {vertical-align: middle;font-family: 'Shippori Mincho', serif;}

.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;}

.outer footer dl dd{display: inline-block;text-align:center;margin: 0 0.5em;}
.outer footer dl {margin-bottom: 1em;}
br.lubi{
	display: none;
}
/*smartphone*****************************************************************************************************************************************************************************************/
@media screen and (max-width: 768px) {
header h1 img {
	width: 70%;
	height: auto;
	margin: 0 auto;
}
.outer{background: none;overflow: hidden;}
.inner{width: 100%;}
#story >.inner, #character >.inner, #gallary >.inner, #gallery >.inner, #special >.inner, #books >.inner, #link >.inner{padding: 0 5%!important;}
div.inner>h2 {
	width: auto;
	height: auto;
	margin: 0 0 3em;
}
div.inner>h2 img{height: 12vw;width: auto;}
#story div.inner>h2 img,
#character div.inner>h2 img,
#gallary div.inner>h2 img {
    height: 2.5em;
    width: auto;
    position: relative;
    filter: drop-shadow(0 0 .5em #fff) drop-shadow(0 0 .5em #fff) drop-shadow(0 0 .5em #fff);
}

#visual{
	margin-bottom: -0.5em;
	margin-top: 0;
	mask-image: initial;
}
#visual div>figure img {
    mask-image: initial;
}
#visual .inner{background: none;}
#visual>div>h1{display:none;}
#visual>div>.logo_sub {display: none;}
#visual>div>h2{display:none;}
#visual>div>h3{display:none;}
#visual>div>h4{display:none;}
#visual>div>h5{display:none;}
#visual>figure>img{display:none;}
#visual >div>figure img{width: 100%; margin:0;}

#buttons {margin-bottom: 0;}
#buttons .bt2{display: none!important;}
#buttons ul li {width: 100%;}
#buttons ul li a{font-size:80%;}

#story {
    border: 1em solid #fdd000;
	width: 90%;
	margin-top: 0.3em;
	margin-bottom: 1em;
	padding: 1.5em 0 1em;
}
#story h2 {
	margin: 1em 0 2em;
}
#story p {
	text-align: justify;
	font-size: 3.4vw;
	width: auto;
}

#character {position: relative;z-index: 2;padding: 6em 0 0;}
#character ul {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1em;
	margin: 0 auto;
}
#character ul li .img_area {
    width: 100%;
	margin-inline: auto;
	margin-bottom: 3rem;
}
#character ul li {
    display: flex;
    flex-direction: column;
	margin: 0;
	width: 100%;
}
#character ul li .txt_area {
	width: calc(100% - 2em);
}
#character ul li .ch_name, #character ul li .ch_work {
    margin-bottom: .5em;
}
#character {padding: 3em 0 0;}
#character ul li h3 {font-size: 5vw;}
#character ul li p {font-size: 3.8vw;}

#character ul li .ch_name p {
    font-size: 2.4rem;
    margin-bottom: 1rem;
    line-height: 1.2;
	font-weight: 700;
}
#character ul li .ch_work p.ch_work_txt {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    line-height: 1.6;
}
#character ul li .ch_about p {
    font-size: 1.4rem;
    line-height: 1.5;
    margin-bottom: 1em;
}

#gallary {padding: 3em 0 0;}
#gallary ul {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2em;
    flex-direction: column;
}
#gallary .key_list_1 li {
    width: 100%;
}

#link_soon {padding: 4em 5%;}
.btntextchange {width: 100%;font-size: 1.6rem;}

#special {margin-bottom: 5em;}
#special p.soon {font-size: 6vw;}
#special .inner{padding: 0 5%;}
#special h2+p {font-size: 4vw;}
#special div.special_list_wrap {display: block;}
#special div.special_list_wrap ul {width: 100%;}
#special div.special_list_wrap ul.special_list02 {margin-top: 3%;}
#special ul li:not(:first-child) {margin-top: 3%;}
#special dl dt {font-size: 5vw;}
#special dl dd {font-size: 3.8vw;}
#special dl dd.long {letter-spacing: 0;font-size: 3.8vw;}
#special ul li.pay::before {
    position: absolute;
    content: "有償";
    display: inline-block;
    top: 11%;
    right: 2%;
    width: 4em;
    height: 4em;
    border-radius: 50%;
    background: #940b1e;
    color: #fff;
    box-sizing: border-box;
    font-size: 1.8rem;
    line-height: 4em;
    z-index: 1;
    text-align: center;
}


#read {padding: 4em 0;}
#read a{padding: 1em 0.5em;width: 90%;}
#read span{margin-bottom: 0.5em;display: block;}
#read br{display:none;}
#read div.btntextchange {
    font-size: 4vw;
    height: 4.6em;
    width: 90%;
}
#read span.read_title {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;}

#link a{width: 100%;}
#link a div{font-size: 1.6rem;}
#link a div::before{right: 1em;}

#gallary li {
    filter: drop-shadow(0.2em 0.2em 0.8em #fff);
    width: 95%;
    cursor: pointer !important;
    margin-inline: auto;
}
}
@media screen and (max-width: 399px) {
	br.lubi {
		display: block;
	}
}