html{font-size: 62.5%;}
body{font-size:1.6rem;font-family: 'Noto Serif JP', serif;font-weight: 400;font-style: normal;;/*min-width:1080px;*/line-height: initial;}
html {visibility: hidden;}
html.wf-active {visibility: visible;animation: fadeIn 1s ease 0s 1 normal;}
*, *::before, *::after {
box-sizing: initial;
}
.fade{animation: fadeIn 0.2s ease 0.3s 1 normal;}
@keyframes fadeIn { 0% {opacity: 0}100% {opacity: 1} }
/*setCss*/
header,footer,div,p,a,h1,h2,h3,h4,h5,li,td,dd{box-sizing:border-box;}
img{width: 100%;}
figure{margin: 0;padding: 0;}
p{line-height:1.8}
a{color: inherit;}
ul,ol{margin: 0;padding: 0;}
h1,h2,h3,h4,h5{margin: 0;padding: 0;}
a{text-decoration:none;}
a:visited{color:initial;}
dd{text-align:left;margin: 0;padding: 0;}
li{list-style-type: none;line-height: 1.6}
.pc{display:block;}
.sp{display:none;}
.inner{width: 1080px;margin: 0 auto;position:relative;height: inherit;}
.shadow{filter: drop-shadow(0 0 5px rgba(0,0,0,1));}
.shadow2{filter: drop-shadow(0 0 5px rgba(86,49,12,1));}
body:before{
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background:url(../img/bg.jpg) center no-repeat;
background-size:cover;}
article{position:relative;z-index: 1;}
article.contents{display:flex; max-width: 1600px;margin: 0 auto;padding-bottom: 3em;height: 100%;}
article.contents >header{width:30%;max-width:408px;min-width:300px;position:relative;}
article.contents >header #menu{position:fixed;padding: 2em;max-width:408px;min-width:300px;}
article.contents >section{width:70%;max-width:1200px;/*min-width:680px;*/}
.frames{margin: 0 auto 0;position: relative; border: 3em solid; border-image-source: url(../img/frame00.png); border-image-slice: 80; border-image-repeat: round;}
.frames > *{background:rgba(255,255,255,0.6);width: 100%;height: 100%; box-sizing: border-box;margin: 0;}
.frames > div{padding: 2em;}
header nav{font-family: 'Josefin Sans', sans-serif;}
header nav dd{margin: 0}
header nav dd:not(:last-child){border-bottom:1px solid #000;}
header nav dd a{font-size:2rem;padding: 0.5em 0.5em 0.25em 0.5em ;display:block;background:linear-gradient(to right,#a043a2, #a043a2 33%, transparent 66%, transparent) 100% 0 / 300% 100%; transition:background-position 0.5s;}
header nav dd a:visited{color:#000;}
header nav dd a:hover{background-position:0 0;color:#fff;}
header nav dd a:not([href]) {opacity:0.2;pointer-events: none;}
header nav a{position:relative;display:block;}
header nav a:hover img{overflow:inherit;top: -2px;position:relative;}
header nav a.youtube:before{z-index:1;content:"";display:block;left:0;top:0;bottom:0;right:0;margin:auto;position:absolute;width:60px;height: 60px;background: url(../img/icon-yt.png);-webkit-background-size: cover;background-size: cover;}
header nav a:hover:before{top:-5px;position:absolute;}
.start{color:#a043a2;}
.start h2{font-size:clamp(2.4rem,2.5vw, 3.5rem);text-align-last: justify;margin-bottom: 0.15em;line-height:0.8;white-space: nowrap;}
.start h2 span{font-size:clamp(1.6rem, 2vw, 2.2rem);text-align-last: justify;line-height:0.8;font-family:'Oranienbaum', serif;}
.start h3{font-size:clamp(1.5rem, 1.75vw, 2.9rem);;text-align-last: justify;margin-bottom: 0.25em;line-height: 1;}
.start h4{font-size:1.3rem;}
footer{width: 100%;text-align:center;font-size:1.2rem;padding:0 0 4em 0; max-width: 1600px;text-align: right;}
/*トップページ*/
#top >section{padding: 2em 2.5% 0 0 ;}
#top >section >div{display:flex;justify-content:space-between;}
#top >section#main_visual{width: ;}
#top >section .slide {width: 100%; margin-bottom: 2em;}
#top >section .slide figure{}
#top >section #twitter,#top >section #news{width: 49%;margin: 0;}
#top >section #twitter iframe{width: 100%!important;}
#top >section #twitter > div{padding: 0;}
#top >section #news ol{padding:0;box-sizing:border-box;}
#top >section #news ol{ overflow-y: scroll;height:25em;}
#top >section #news ol li{text-align:left;}
#top >section #news ol li:not(:last-child){border-bottom:1px solid #ddd;}
#top >section #news ol li a{display:flex;padding: 0.5em;align-items:center;width: 100%;}
#top >section #news ol li a:hover{background: #a043a2;color:#fff;}
#top >section #news ol li a span{}
#top >section #news ol li a span:first-child{background: #a043a2;color:#fff;font-size:1.2rem;padding:0.5em 0;text-align:center;font-weight:600;border:1px solid #fff;width: 27.5%;}
#top >section #news ol li a span:last-child{font-size:1.5rem;padding: 0.5em 0 0.5em 0.5em;font-weight:600;width: 72.5%;}
.slick-dots{position: relative;margin-bottom:0.5em;}
.slick-dots li{width: 10%;height: 2px;}
.slick-dots li button{width: 100%;height: 2px;}
.slick-dots li button:before{width:100%;height: 2px;content:"";background: #000;;}
/*各ページ*/
#page section{padding: 2em 2.5% 0 0 ;}
#page section .titles {opacity:0.15;line-height:0.5;font-size:clamp(8.1rem, 7.5vw, 12.6rem);position:relative;font-family: 'Oranienbaum', serif;font-weight:100;display:inline-block;padding: 0;margin-bottom: 0.25em;text-align:right;width: 100%;}
#page .continner{box-sizing: border-box;}
#page section .posts h1{font-size:3rem;color:#a043a2}
#page section .posts h2{}
#page section .posts h3{}
#page section .posts h4{}
#page section .posts h5{}
#page section .posts p{font-size:1.8rem;}
#page section .posts small{font-size:75%;}
#page section div.back {text-align:right;margin-top: 2em;}
#page section div.back a{text-align:center;background:rgba(255,255,255,0.5);border-radius:2em;padding: 0.25em 2.5em 0.25em 1.5em;font-family: 'Zen Kaku Gothic New', sans-serif;margin-right: 1em;position:relative;;}
#page section div.back a:hover{background:rgba(255,255,255,1);}
#page section div.back a:before{
content: "";
display: block;
width: 8px;
height: 8px;
position: absolute;
right: 1.5em;
top: calc(50% - 1px);
border-top: solid 1px;
border-right: solid 1px;
transform: rotate(
45deg
) translateY(-50%);
color: inherit;}
/*news*/
#page section#news{}
#page section#news ol{padding: 2em 5%;box-sizing:border-box;}
#page section#news ol li{text-align:left;}
#page section#news ol li:not(:last-child){border-bottom:1px solid #ddd;}
#page section#news ol li a{display:flex;padding: 1em;align-items:center;width: 100%;}
#page section#news ol li a:hover{background: #a043a2;color:#fff;}
#page section#news ol li a span{}
#page section#news ol li a span:first-child{background: #a043a2;color:#fff;font-size:1.4rem;padding:0.5em 3em;font-weight:600;border:1px solid #fff;margin-right: 1em;}
#page section#news ol li a span:last-child{font-size:1.6rem;padding: 0.5em;font-weight:600;}
#page section#news .kj{padding: 3em 5%;}
#page section#news .kj date{margin-bottom: 2em;background: #a043a2;border:1px solid #fff;color:#fff;font-size:1.6rem; letter-spacing: .15em;display:inline-block;padding: 0.5em 0.75em;}
#page section#news .kj h2{border-bottom:1px solid #ddd;margin-bottom: 2em;padding-bottom: 0.5em;font-size:3rem;}
#page section#news .kj a{color:#a043a2;text-decoration:underline;}
#page section#news .kj a:hover{text-decoration:none;}
/*onair*/
#page section#onair h3{background: rgba(191,179,151,0.5);padding: 0.25em;width: 100%;}
#page section#onair dl{display:flex;flex-wrap:wrap;justify-content:space-between;}
#page section#onair dl dt{width: 100%;margin: 1em 0;color:#a043a2;font-weight:bold;}
#page section#onair dl dd{width: 49.5%;margin-bottom:0.33em;}
#page section#onair dl dd a{padding: 1em;background: rgba(191,179,151,0.5);display:block;border-radius:0.3em;text-align:center;}
#page section#onair dl dd a:hover{background: rgba(191,179,151,1);color:#fff;transition:0.25s ;}
/*story*/
#page section#story h3{background: rgba(191,179,151,0.5);padding: 0.5em;}
#page section#story ul li{}
#page section#story ul li a{display: block; line-height: 0;position:relative;overflow: initial;;}
#page section#story ul li a img{display: block;box-sizing:border-box;}
#page section#story ul li a:hover{}
#page section#story ul li a:hover img{top: -2px;position:relative;}
#page section#story ol.switch {display:flex;margin-bottom: 1em; flex-wrap: wrap;}
#page section#story ol.switch li{width: 24.5%;margin-right: 0.5%;margin-bottom: 0.5em;}
#page section#story ol.switch li a{display:block;padding: 1em;text-align:center;background:rgba(191,179,151,0.4);position:relative;}
#page section#story ol.switch li a:before{display: block;height: 100%;
content: "";left:0;top:0;
width: 100%;
position: absolute;
border: 2em solid;
border-image-source: url(../img/frame2.svg);
border-image-slice: 10;
border-image-repeat: round; box-sizing: border-box;
filter: drop-shadow(0 0 1px rgba(0,0,0,1));}
#page section#story .frames >div{padding: 2em;}
#page section#story .posts h1{margin-bottom: 1em;color:#000;}
#page section#story .posts iframe{margin-top: 1em;}
#page section#story #story_nav .slick-track {transform: unset !important;}
#page section#story .slick-slide{padding: 0.15em;}
#page section#story #story_nav .slick-slide figure img{opacity: 0.4;}
#page section#story #story_nav .slick-current figure img{opacity: 1;}
#page section#story #story_nav .slick-slide figure img:hover{opacity: 1;cursor: pointer;}
#page section#story #page-100 .title span{display:none;}
#page section#story #page-100 ul {display:flex;justify-content:space-between;}
/*staffcast*/
#page section#staffcast{}
#page section#staffcast h3{background: rgba(191,179,151,0.5);padding: 0.25em;width: 100%;}
#page section#staffcast h3:not(:nth-child(2)){}
#page section#staffcast dl{columns: 2;}
#page section#staffcast dl:not(last-child){margin-bottom: 2em;}
#page section#staffcast dl dd{break-inside: avoid-column;margin-bottom: 1em;font-size:2.4rem;font-weight:600;letter-spacing:.15em;line-height:1.1;}
#page section#staffcast dl dd i{display: block;font-style: normal;font-size:1.6rem;font-weight:300;margin-bottom: 0.5em;}
/*books*/
#page section#books{}
#page section#books h2:not(.titles){background: rgba(191,179,151,0.5);padding: 0.5em;;}
#page section#books h3{padding: 0.5em;color: #a043a2;font-size:2.4rem;}
#page section#books .novel{margin-bottom: 3em;}
#page section#books ul{display:flex;flex-wrap:wrap;margin: 0 auto;}
#page section#books ul li{width: 19%;margin:0.5%;font-size:1.4rem; border:2em solid;border-image-source: url(../img/frame00.png);border-image-slice: 80; border-image-repeat: round;box-sizing: border-box;}
#page section#books ul li a{display:block;}
#page section#books li figure{background: rgba(255,255,255,0.6); height: 100%;width: 100%;margin: 0;}
#page section#books li figure a{overflow: hidden;}
#page section#books li:hover{overflow:inherit;top: -2px;position:relative;}
.ovllink{width: 50%;display: block; margin: 2em auto;line-height: 0;position:relative;overflow: initial;;}
.ovllink img{border: 3px solid #fff;display: block;box-sizing:border-box;}
.ovllink:hover{}
.ovllink:hover img{top: -2px;position:relative;}
/*special*/
#page section#special{}
#page section#special ul{display:flex;flex-wrap:wrap;margin: 0 auto;}
#page section#special ul li{width: 32.333%;margin:0.5%;font-size:1.4rem; border:2em solid;border-image-source: url(../img/frame00.png); border-image-slice: 80;border-image-repeat: round;box-sizing: border-box;}
#page section#special ul li a{display:block;}
#page section#special li figure{background: rgba(255,255,255,0.6); height: 100%;width: 100%;margin: 0;}
#page section#special li figure a{overflow: hidden;}
#page section#special li:hover{overflow:inherit;top: -2px;position:relative;}
#page section#special .kj{padding: 3em 5%;}
#page section#special .kj date{margin-bottom: 2em;background: #a043a2;border:1px solid #fff;color:#fff;font-size:1.6rem; letter-spacing: .15em;display:inline-block;padding: 0.5em 0.75em;}
#page section#special .kj h2{border-bottom:1px solid #ddd;margin-bottom: 2em;padding-bottom: 0.5em;font-size:3rem;}
#page section#special .kj a{color:#a043a2;text-decoration:underline;}
#page section#special .kj a:hover{text-decoration:none;}
/*music*/
#page section#music{}
#page section#music ul{display:flex;flex-wrap:wrap;margin: 0 auto;}
#page section#music ul li{width: 100%;margin:0.5%;font-size:1.4rem; border:2em solid;border-image-source: url(../img/frame00.png); border-image-slice: 80;border-image-repeat: round;box-sizing: border-box;}
#page section#music ul li a{display:flex;align-items:center;background: rgba(255,255,255,0.6);}
#page section#music li figure{background: rgba(255,255,255,0.6);margin: 0;width: 30%;}
#page section#music li h3{width: 70%;padding-left: 1em;font-size:1.8rem;}
#page section#music li:hover{overflow:inherit;top: -2px;position:relative;}
/*goods*/
#page section#goods{}
#page section#goods ul{display:flex;flex-wrap:wrap;margin: 0 auto;}
#page section#goods ul li{width: 100%;margin:0.5%;font-size:1.4rem; border:2em solid;border-image-source: url(../img/frame00.png); border-image-slice: 80;border-image-repeat: round;box-sizing: border-box;}
#page section#goods ul li a{display:flex;align-items:center;background: rgba(255,255,255,0.6);}
#page section#goods li figure{background: rgba(255,255,255,0.6);margin: 0;width: 30%;}
#page section#goods li h3{width: 70%;padding-left: 1em;font-size:1.8rem;}
#page section#goods li:hover{overflow:inherit;top: -2px;position:relative;}
.lists figure{list-style-type:none;width: 100%;height: auto;position: relative;}
.lists figure:before {content: "";display: block;padding-top: 100%; }
.lists figure span{display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;text-align: center;box-sizing: border-box;}
.lists figure span:before{content: "";height: 100%;vertical-align: middle;width: 0px;display: inline-block;}
.lists figure span > *{vertical-align: middle;display: inline-block;}
.lists span img{max-width: 100%;height: auto;max-height: 100%;width: auto;}
/*character*/
#page section#character{}
#page section#character ul{display:flex;flex-wrap:wrap;margin: 0 auto 2em;}
#page section#character ul li{width: 49%;margin:0.5%;font-size:1.4rem;border:2em solid;border-image-source: url(../img/frame00.png); border-image-slice: 80;border-image-repeat: round;box-sizing: border-box;}
#page section#character ul li a{display:block;}
#page section#character ul li figure{background: rgba(255,255,255,0.6); height: 50vw;max-height:800px;width: 100%;margin: 0;position:relative;overflow: hidden;}
#page section#character ul li figure figcaption{background: #faf9f7;width: 30%;font-size:3rem;position: absolute;font-size:2rem;font-weight:600;text-align:center;
right: 0;
bottom: 0;
padding: 0.25em;}
#page section#character ul li figure a{overflow: hidden;}
#page section#character ul li:hover{overflow:inherit;top: -2px;position:relative;}
#page section#character ul li img{position: relative;}
#page section#character ul li a{ width: 50vw;max-width:800px;}
#page section#character ul li img{max-width:none;}
#page section#character ul li.c1 img{ width: 140%;left: calc(50% - 95%);}
#page section#character ul li.c2 img{ width: 140%;left: calc(50% - 88%); margin-top: -20%;}
#page section#character ul li.c3 img{ width: 140%;left: calc(50% - 90%); margin-top: -30%;}
#page section#character ul li.c4 img{ width: 90%;left: calc(50% - 64%); margin-top: 5%;}
#page section#character ol{display:flex;flex-wrap:wrap;margin: 0 auto;}
#page section#character ol li{width: 32.33%;margin:0.5%;font-size:1.6rem;}
#page section#character ol li figure a{position:relative;display:block;}
#page section#character ol li figure a:hover{top: -2px;}
#page section#character ol li figure a:before{display:block;content:"";width: 100%;height: 100%;position:absolute;background: url(../img/frame2.svg) no-repeat;background-size: 100% 100%;filter: drop-shadow(0 0 2px rgba(0,0,0,1));}
#page section#character ol li figure a img{display:block;}
#page section#character .single .titles + div{display:flex;align-items:center;}
#page section#character .single .titles + div >figure{width: 60%;}
#page section#character .single .titles + div .dtl{width: 55%;margin-left: -15%;}
#page section#character .single .titles + div .dtl ol{display:flex;justify-content:space-between;}
#page section#character .single .titles + div .dtl ol li{width: 49%;}
#page section#character .single .titles + div .dtl h1{margin: 0 ;padding-bottom: 0.5em;}
#page section#character .single .titles + div .dtl h2{margin: 0;padding-bottom: 0.5em; font-weight: 600;}
#page section#character .single .titles + div .dtl p{margin: 0;padding-bottom: 2em;}
#page section#character .single_other .continner > div.cc{display:flex;align-items:center;margin-bottom: 2em;}
#page section#character .single_other .continner > div.cc >div{width: 50%;padding-left: 2em;}
#page section#character .single_other .continner > div.cc >div h2{margin-bottom: 0.5em;font-size:3rem;}
#page section#character .single_other .continner > div.cc >div h3{background: #a043a2;color:#fff;display:inline-block; line-height: 1.5; padding: 0 0.5em;font-size:1.8rem;}
#page section#character .single_other .continner > div.cc >figure{width: 50%;position:relative;}
#page section#character .single_other .continner > div.cc >figure:before{display:block;content:"";width: 100%;height: 100%;position:absolute;background: url(../img/frame2.svg) no-repeat;background-size: 100% 100%;filter: drop-shadow(0 0 2px rgba(0,0,0,1));}
/*MAP&KEY*/
#page section#mapkey .frames > div.frames_inner{padding: 2em 5%;box-sizing:border-box;}
#page section#mapkey .frames > div.frames_inner > figure img{display:block;}
#page section#mapkey .frames > div.frames_inner .key_index{background: #f4f2f3;padding: 1em;display:flex; flex-wrap: wrap;margin: 0;}
#page section#mapkey .frames > div.frames_inner .key_index dt{width: 100%;margin-bottom: 0.5em;}
#page section#mapkey .frames > div.frames_inner .key_index dt span{ display: inline-block;background: #a043a2;padding: 0.25em 1em;color: #fff;font-size: 1.3rem;border-radius: 0.5em;}
#page section#mapkey .frames > div.frames_inner .key_index dd{margin: 0.25em;}
#page section#mapkey .frames > div.frames_inner .key_index dd a{background: rgba(191,179,151,0.5);color:#000;display:block;padding: 0.25em 0.75em;border-radius:0.25em;}
#page section#mapkey .frames > div.frames_inner .key_index dd a:hover{background: rgba(191,179,151,0.8);}
#page section#mapkey .frames > div.frames_inner ul.keys li{display:flex;width: 100%;border-bottom:1px solid #ddd;padding: 1em 0;align-items: center;}
#page section#mapkey .frames > div.frames_inner ul.keys li figure{width: 30%;order:2;}
#page section#mapkey .frames > div.frames_inner ul.keys li figure img{border-radius:0.5em;}
#page section#mapkey .frames > div.frames_inner ul.keys li div{width: 100%;order:1;}
#page section#mapkey .frames > div.frames_inner ul.keys li div h2 span{font-size:1.5rem;font-weight:normal;margin-left: 1em;color:#a043a2;}
#page section#mapkey .frames > div.frames_inner ul.keys li div p{font-size:1.5rem;}
#page section#mapkey .frames > div.frames_inner ul.keys li figure{padding-left: 1em;}
#page section#mapkey .frames > div.frames_inner ul.keys li figure + div{width: 70%;}
/*special*/
#page section#movie{}
#page section#movie ul{display:flex;flex-wrap:wrap;margin: 0 auto;}
#page section#movie ul li{width: 32.333%;margin:0.5%;font-size:1.4rem; border:2em solid;border-image-source: url(../img/frame00.png); border-image-slice: 80;border-image-repeat: round;box-sizing: border-box;}
#page section#movie ul li a{display:block;}
#page section#movie li figure{background: rgba(255,255,255,0.6); height: 100%;width: 100%;margin: 0;}
#page section#movie li figure a{overflow: hidden;}
#page section#movie li:hover{overflow:inherit;top: -2px;position:relative;}
/*pagenavi*/
.wp-pagenavi{display:flex;margin-top: 1em; justify-content: center;}
.wp-pagenavi .pages{display:none;}
.wp-pagenavi a, .wp-pagenavi span {min-width: 2em; text-align: center;box-sizing: border-box;}
.wp-pagenavi span.current{background: #a043a2;color:#fff;border:#800080 1px solid;}
@media screen and (max-width: 1160px) {
article.contents >header #menu{width:300px;max-width:408px;min-width:300px;}
#top >section >div{flex-wrap:wrap;}
#top >section #twitter,#top >section #news{width: 100%;margin: 0;}
#page section#books ul li{width: 32.3%;}
#page section#special ul li{width: 49%;}
#page section#movie ul li{width: 49%;}
#page section#staffcast dl{columns: 1;}
#page section#character ul li{width: 49%;}
#page section#character ul li figure{height: 30vw;max-height:800px;width: 100%;}
#page section#character ul li a{ width: 30vw;max-width:800px;}
#page section#character ul li img{max-width:none;}
#page section#character ul li.c1 img{ width: 140%;left: calc(50% - 85%);}
#page section#character ul li.c2 img{ width: 140%;left: calc(50% - 78%); margin-top: -20%;}
#page section#character ul li.c3 img{ width: 140%;left: calc(50% - 80%); margin-top: -30%;}
#page section#character ul li.c4 img{ width: 90%;left: calc(50% - 54%); margin-top: 5%;}
#page section#character ul li figure figcaption{width: 50%;font-size:1.75vw}
#page section#character .single .titles + div{display:block;overflow: hidden;}
#page section#character .single .titles + div >figure{width: 120%;margin-left: -10%;}
#page section#character .single .titles + div .dtl{margin: 0;width: 100%;}
#page section#character .single .titles + div .dtl h2{font-size:1.8rem;}
#page section#character .single .titles + div .dtl p{font-size:1.6rem;line-height: 1.6;}
}
@media screen and (max-width: 1080px) {
#top >section#main_visual{width:calc(100% - 300px); box-sizing: border-box;
}
/*smp*/
@media screen and (max-width: 768px){
body{min-width:1px;}
.pc{display:none;}
.sp{display:block;}
article{overflow:hidden;}
article.contents{}
article.contents{display:block;}
article.contents >header{position:static;}
article.contents >header #menu{position:static;;padding: 0;}
footer{text-align:center;}
article.contents >header{widows: 0;max-width:0;min-width:0;}
article.contents >section{max-width:inherit;}
article.contents >section{width: 100%;min-width:0;}
header{z-index:1;}
header nav dd:not(:last-child){border-bottom: 1px solid #bbb0a3;}
.open #gloval-nav dd a{ padding: 0.5em 0.5em 0.25em 0.5em;}
.open #gloval-nav h1 {width: 80%;}
.open #gloval-nav h1 a{width: 60%;}
.start{display:none;}
.bnarea{display:flex;flex-wrap:wrap;margin: 0;justify-content:space-between;width: 80%;margin-top: 0.33em;}
.bnarea li{width: 48%;}
.open #gloval-nav .bnarea li a{padding: 0;}
#top >section{padding: 0;}
#top >section#main_visual{width: 100%;}
#top >section#main_visual h1.tl{position: absolute;top:130vw;z-index: 1;}
#top >section#main_visual div.st{position: absolute;top:164.5vw;z-index: 1; width: 100%;background: rgba(255,255,255,0.5);font-family:'Josefin Sans', sans-serif;
left: 0;
padding:4vw 2vw;}
#top >section#main_visual div.st{color:#fff;background: #a043a2;filter: drop-shadow(0 0 2px rgba(0,0,0,1));/*text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;*/}
#top >section#main_visual div.st h3 span{font-size:7vw;text-align-last: justify;line-height:0.8;font-family:'Oranienbaum', serif;}
#top >section#main_visual div.st h3{font-size:9.5vw;text-align-last: justify;line-height:0.5; padding-top: 0.2em;}
#top >section#main_visual div.st h4{font-size:2.9vw;}
#top >section#main_visual .slide{width: 130%;margin-left: -15%;margin-bottom: 0;}
#top >section >div{display:block;}
#top >section #twitter, #top >section #news{width: 100%;margin: 0;}
#top >section #news ol li a{}
#top >section >div{padding:0 2.5% 2em 2.5%;}
#top >section #news ol li a{padding: 0.5em 0;}
#top >section #news ol li a span:first-child{font-size: 1.2rem;padding: 0.25em 0.5em;}
#top >section #news ol li a span:last-child{ font-size: 1.4rem;}
#page section .titles{text-align:left;margin-bottom: 0.2em;white-space: nowrap; left: -2.5%;line-height: 0.8;}
#page section{padding: 0;}
#page .continner{padding: 0 2.5%;}
#page section .posts h1{padding: 1em 0;font-size:2.2rem;}
#page section .posts p{padding: 1em 0;font-size:1.4rem;}
#page section .posts h2:not(.titles){font-size:1.8rem;font-weight: 600;}
#page section#news ol li a{}
#page section#news ol{padding: 0;}
#page section#news ol li a{padding: 0.5em 0;}
#page section#news ol li a span:first-child{font-size: 1.2rem;padding: 0.25em 0.5em;}
#page section#news ol li a span:last-child{ font-size: 1.4rem;}
#page section#news .kj{padding: 0;}
#page section#news .kj date{font-size:1.2rem;}
#page section#news .kj h2{ font-size: 2.2rem; padding-bottom: 0.75em;margin: 0;line-height: 1.6;}
#page section#news .kj p{line-height: 1.6;}
#page section#news .kj figure{width: 100%!important;}
#page section#onair dl dd{width: 100%;font-size:1.2rem;}
#page section#story .posts iframe{height: 50vw;}
#page section#story ol.switch{justify-content:center;flex-wrap:wrap;}
#page section#story ol.switch li{width: 48%;margin:0 1% 1em 1%;}
#page section#story #story_cont .slick-slide{padding: 0 0 0 0.15em;}
#page section#story #story_nav .slick-slide {
width: calc(100% / 3) !important;
}
#page section#staffcast dl{columns: 1;}
#page section#staffcast dl dd{ font-size: 1.8rem;}
#page section#staffcast dl dd i{ font-size: 1.4rem;}
#page section#character ul li{width: 100%;}
#page section#character ul li figure{height: 70vw;max-height:800px;width: 100%;}
#page section#character ul li a{ width: auto;max-width:800px;}
#page section#character ul li.c1 img{ width: 140%;left: calc(50% - 75%);}
#page section#character ul li.c2 img{ width: 140%;left: calc(50% - 68%); margin-top: -20%;}
#page section#character ul li.c3 img{ width: 140%;left: calc(50% - 70%); margin-top: -30%;}
#page section#character ul li.c4 img{ width: 90%;left: calc(50% - 44%); margin-top: 5%;}
#page section#character ul li figure figcaption{font-size:3vw}
#page section#character .single .titles + div{display:block;}
#page section#character .single .titles + div >figure{width: 120%;margin-left: -10%;}
#page section#character .single .titles + div .dtl{margin: 0;width: 100%;}
#page section#character .single .titles + div .dtl h2{font-size:1.8rem;}
#page section#character .single .titles + div .dtl p{font-size:1.6rem;line-height: 1.6;}
#page section#character ol{justify-content:space-between;}
#page section#character ol li{width: 48%;margin-bottom: 0.5em;}
#page section#character ol li a{width: 100%;}
#page section#character .single_other .continner > div.cc{flex-wrap:wrap;}
#page section#character .single_other .continner > div.cc >div{width: 100%;padding: 1em 1em 0 1em;}
#page section#character .single_other .continner > div.cc >div h2{font-size:2rem;}
#page section#character .single_other .continner > div.cc >div h3{font-size:1.6rem;}
#page section#character .single_other .continner > div.cc >div p{font-size:1.4rem;}
#page section#character .single_other .continner > div.cc >figure{width: 100%;}
#page section#books ul{justify-content:space-between;}
#page section#books ul li{width: 49%;}
#page section#books h3{ font-size: 2.2rem;}
#page section#special ul li{width: 100%;}
#page section#special .kj{padding: 3em 0;}
#page section#movie ul li{width: 100%;}
#page section#mapkey .frames > div.frames_inner{padding: 0;}
#page section#mapkey .frames > div.frames_inner .key_index{background: none;padding: 0;}
#page section#mapkey .frames > div.frames_inner .key_index dd{font-size:1.4rem;}
#page section#mapkey .frames > div.frames_inner ul.keys li{flex-wrap:wrap;}
#page section#mapkey .frames > div.frames_inner ul.keys li figure{width: 100%;padding-left: 0;}
#page section#mapkey .frames > div.frames_inner ul.keys li figure + div{width: 100%;}
.frames > div{padding: 00!important;}
.frames > div p{margin: 0;}
footer{padding: 0 0 0.5em 0;}
/***************************/
#gloval-nav h1{opacity:0;}
#nav-toggle {position: fixed;top: 25px;right: 25px;height: 32px;cursor: pointer;z-index: 1}
#nav-toggle > div {position: relative;width: 36px;}
#nav-toggle span {width: 100%;height: 1px;left: 0;display: block;background: #333;position: absolute;transition: top .5s ease, -webkit-transform .6s ease-in-out;transition: transform .6s ease-in-out, top .5s ease;transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;}
/*#nav-toggle span{filter: drop-shadow(0 0 5px rgba(0,0,0,1));}*/
#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 14px;}
#nav-toggle span:nth-child(3) {top: 28px;}
#nav-toggle:hover span:nth-child(1) {top: 4px;}
#nav-toggle:hover span:nth-child(3) {top: 23px;}
#gloval-nav {background: #000;color: #fff;position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 990;text-align: center;display: flex;visibility: hidden;flex-direction: column;justify-content: center;align-items: center;font-size: 29px;opacity: 0;transition: opacity .6s ease, visibility .6s ease;}
#gloval-nav dd{opacity:0;}
.open #gloval-nav {z-index: 11;background: #cdc1b4;color: #000;position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 10;text-align: center;display: flex;visibility: hidden;flex-direction: column;justify-content: center;align-items: center;opacity: 0;transition: opacity .3s ease, visibility .3s ease;}
.open #gloval-nav a {height: auto;display: block;color: #000;text-decoration: none;padding: 10px 0;transition: color .6s ease;font-size:1.7rem;}
.open #gloval-nav a:hover {color: #666;}
.open #gloval-nav h1 {width: 80%;opacity:1;transition-delay: .5s;transition: opacity .2s ease, -webkit-transform .6s ease;transition: transform .6s ease, opacity .2s ease;transition: transform .6s ease, opacity .2s ease}
.open #gloval-nav dl {width: 80%;position: relative;list-style: none;left:0;margin:0 auto; font-size: 2rem;right:0;}
.open #gloval-nav dl dd {margin: 0;opacity:1;transition: opacity .2s ease, -webkit-transform .6s ease;transition: transform .6s ease, opacity .2s ease;transition: transform .6s ease, opacity .2s ease, -webkit-transform .6s ease;}
.open #gloval-nav dl dd:first-child a{height: auto;}
.open #gloval-nav dl dd:nth-child(2) {transition-delay: .0s;}
.open #gloval-nav dl dd:nth-child(3) {transition-delay: .15s;}
.open #gloval-nav dl dd:nth-child(4) {transition-delay: .2s;}
.open #gloval-nav dl dd:nth-child(5) {transition-delay: .25s;}
.open #gloval-nav dl dd:nth-child(6) {transition-delay: .3s;}
.open #gloval-nav dl dd:nth-child(7) {transition-delay: .35s;}
.open #gloval-nav dl dd:nth-child(8) {transition-delay: .4s;}
.open #gloval-nav dl dd:nth-child(9) {transition-delay: .45s;}
.open #gloval-nav dl dd:nth-child(10) {transition-delay: .5s;}
.open #gloval-nav dl dd:nth-child(11) {transition-delay: .55s;}
.open #nav-toggle{z-index:11;}
.open #nav-toggle span {background: #fff;}
.open #nav-toggle span:nth-child(1) {top: 15px;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.open #nav-toggle span:nth-child(2) {top: 15px;width: 0;left: 50%;}
.open #nav-toggle span:nth-child(3) {top: 15px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
/* open */
.open {overflow: hidden;}
.open #gloval-nav {visibility: visible;opacity: 1;margin:0;}
.open #gloval-nav li {opacity: 1;-webkit-transform: translateX(0); transform: translateX(0);transition: opacity .9s ease, -webkit-transform 0.3s ease;transition: transform 0.3s ease, opacity .9s ease;transition: transform 0.3s ease, opacity .9s ease, -webkit-transform 0.3s ease;}
.open #top >section#main_visual h1.tl{z-index: 0;}
.open #top >section#main_visual .st{z-index: 0;}
}