@charset "UTF-8";
/* loading */
#loading {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #080808 url("../images/background/bg.webp") repeat center center;
background-size: 100% auto;
display: flex;
justify-content: center;
align-items: center;
z-index: 99999;
transition: opacity 1.0s ease-in-out, visibility 1.0s ease-in-out;
}
#loading.loaded {
opacity: 0 !important;
visibility: hidden !important;
display: none !important;
}
.loading-container {
position: relative;
width: 300px;  
height: 300px;
z-index: 1;
animation: container-fadeout 1.0s ease-in-out forwards;
animation-delay: 2.3s; 
}
#wrapper {
opacity: 1;
}
#loading ~ #wrapper {
animation: fadein 1.0s cubic-bezier(0.25, 1, 0.5, 1) forwards;
animation-delay: 3.2s;
opacity: 0;
}
.slash, .loading-logo {
position: absolute;
top: 0;
bottom: 80px;
left: 0;
right: 0;
width: 250px;  
height: 250px; 
margin: auto; 
}
@media (min-width: 899px) {
.slash, .loading-logo {
width: 300px;  
height: 300px; 
}
}
.slash {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0;
}
.slash-1 {
background-image: url('../images/loading/scene1.webp');
transform-origin: center center; 
animation: slash 0.1s cubic-bezier(0.1, 0.9, 0.1, 1) forwards;
animation-delay: 0.25s; 
z-index: 2;
}
.slash-2 {
background-image: url('../images/loading/scene2.webp');
transform-origin: center center;
animation: slash 0.06s cubic-bezier(0, 1, 0, 1) forwards;
animation-delay: 1.15s; 
z-index: 2;
}
.loading-logo {
object-fit: contain;
opacity: 0;
z-index: 1;
animation: fadein 0.8s ease-out forwards; 
animation-delay: 1.45s; 
}
.slash-3 {
background-image: url('../images/loading/scene3.webp');
transform-origin: center center;
z-index: 20; 
animation: fadein 0.8s ease-out forwards; 
animation-delay: 1.45s; 
}
@keyframes slash {
0% { transform: scale(0); opacity: 0; }
1% { opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes container-fadeout {
0% {opacity: 1;}
100% {opacity: 0;}
}
/* header */
header {
margin: 0 auto;
padding-top: 40px;
display: grid;
grid-template-columns: 28% 69%;
justify-content: space-between;
width: var(--topinner);
} 
@media (max-width: 898px) {
header { padding-top: 0; }
}
.nav-menu {
grid-column: 2;
}
@media (min-width: 899px) {
.nav-menu ul {
gap: clamp(6px, 1vw + 1px, 15px); 
} 
.nav-menu li {
font-size: min(1.25vw, 17px); 
}
}
main {
width: 100%;
}
.topArea {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 899px) {
main { 
width: var(--topinner);
}
.topArea {
margin: 10px auto 0;
row-gap: 20px;
}
}
.topArea .side {
order: 2;
width: min(600px, 88%);
margin:  -10px auto 0;
container-type: inline-size;
container-name: sideContainer;
}
.topArea .topmain {
order: 1;
}
.topmain img {
-webkit-mask-image: linear-gradient(to bottom,
black 70%,
transparent 100%);
mask-image: linear-gradient(to bottom,
black 70%,
transparent 100%);
}
.topArea .side .logo {
text-align: center;
margin: 0 auto;
filter: drop-shadow(0 0 5px rgba(153, 19, 139, 0.7)) drop-shadow(0 0 5px rgba(153, 19, 139, 0.7)) ;
}
.topArea .side .logo img {
width: min(330px, 60%);
}
@media (min-width: 899px) {
.topArea {
grid-template-columns: 27% 69%;
justify-content: space-between;
}
.topArea .side {
grid-column: 1;
order: 1;
width: 100%;
margin:  -10px 0 0;
}
.topArea .side .logo {
text-align: left;
margin: 0;
}
.topArea .side .logo img {
width: min(330px, 90%);
}
.topArea .topmain {
grid-column: 2;
order: 2;
}
}
.top_onair {
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
text-align: center;
margin: 18px 0 ;
text-shadow: 0 0 10px rgba(39, 11, 91, 0.9);
font-weight: 600;
line-height:1.4;
font-size: min(8cqw, 38px); 
}
.top_onair span {
font-size:var(--font52);
color: var(--accent-color);
font-weight: 800;
}
.break{
display:none;
}
@media (min-width: 899px) {
.top_onair {
text-align: left;
line-height:1.2;
margin: 18px 0 .7em .7em;
font-size: min(10cqw, 38px); 
}
.break{
display:inline;
}
}
.kindan{
width: 100%;
margin: 0 auto;
}
.pv {
position: relative;
width: 100%;
margin: 1em 0 0;
border: 3px solid var(--Key-color);
opacity: 0.6;
}
@media (min-width: 899px) {
.pv { margin: 2em 0 0; }
}
.newsArea {
margin: 50px auto 0;
width: 90%;
}
@media (min-width: 899px) {
.newsArea {
display: grid;
grid-template-columns: 2.5fr 7.5fr;
width: 100%;
gap: 50px;
margin: 100px auto 0;
}
.newsArea h2 {
margin: 0;
padding: 0;
}
.newsArea h2::before {
top: 15%; 
left: 30%;
}
.newsArea h2 span:nth-child(even),
.newsArea h2 span:nth-child(odd) {
transform: rotate(0deg);
}
}
.more{
margin: 20px auto 0;
margin: 20px 0 0 auto;
display: block;
width: max-content; 
}
.more a{
font-size: var(--font14);
font-family: var(--font-en);
font-weight: 500;
}
@media (min-width: 899px) {
.more{
margin: 20px 0 0 auto;
}