@charset "UTF-8";

html {
    display: block;
    font: 100%;
    font-family: "Hachi Maru Pop", Helvetica, sans-serif;
}

body {
    text-decoration: none;
}



.dotgothic16-regular {
    font-family: "DotGothic16", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.hachi-maru-pop-regular {
    font-family: "Hachi Maru Pop", cursive;
    font-weight: 400;
    font-style: normal;
}



h1,
h2,
h3 {
    font-family: "DotGothic16", sans-serif;
}

a,
p,
h1,
h2,
h3 {
    display: block;
    text-align: center;
}

.word li {
    padding: 0 25%;
}






.header {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

 div.top-ilust {
    width: 600px;
height: 6%;
margin: 10px auto;
display: block;
  }


 .top-ilust  img{
    margin: 60px auto 300px;
    padding: 100px auto 50px ;
    text-align: center;
    width:500px ;
}

.hamburger-menu {
    width: 50px;
    height: 50px;
    position: relative;
    border: dotted 2px orangered;
    border-radius: 10px;
    background: transparent;
    background-color: #fcffce;
    appearance: none;
    padding: 0;
    cursor: pointer;
}

.hamburger-menu__bar {
    display: inline-block;
    width: 50%;
    height: 2px;
    border: dashed 0.5px #fcffce;
    background: orangered;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: .5s;
}

.hamburger-menu__bar:first-child {
    top: 16px;
}

.hamburger-menu__bar:nth-child(2) {
    top: 24px;
}

.hamburger-menu__bar:last-child {
    top: 32px;
}

.hamburger-menu--open .hamburger-menu__bar {
    top: 50%;
}

.hamburger-menu--open .hamburger-menu__bar:first-child {
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

.hamburger-menu--open .hamburger-menu__bar :last-child {
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

.hamburger-menu--open .hamburger-menu__bar:nth-last-child(2) {
    display: none;
}

.navigation {
    display: none;
    background: #242424;
    position: absolute;
    top: 50px;
    width: 100%;
    z-index: 9999;
    font-family: "DotGothic16", sans-serif;
}

.navigation__list {
    text-align: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.navigation__list-item {
    border-bottom: solid 1px orangered;
}

.navigation__list-item:first-child {
    border-top: solid 1px orangered;
}

.navigation__link {
    color: #ffff;
    font-weight: 700;
    text-decoration: none;
    display: block;
    padding: 24px 0;
    transition: .5s;
}

@media (hover: hover) and (pointer: fine) {
    .navigation__link:hover {
        background: #333;
    }
}


h1 {
    text-align: center;
}

.top-image {
    height: 100%;;
    margin: 100px auto;
  display: block;
}



.top-image  img {
    width: 500px;
    height: 300px;
    padding-top: 350px;
    margin: 0 25%;
    border: #242424;
    flex-wrap: wrap;
    flex-direction: row;
        align-items: flex-end;
        text-align: center;
}



#ABOUT {
    width: 90%;
    height: 100%;
    padding: 10px;
    margin: 50px auto 30px;
    border: dotted 2px orangered;
    border-radius: 10px;
    background-color: #ffff;
}


#PandS {
    width: 90%;
    height: 100%;
    padding: 10px;
    margin: 0 auto 30px;
    border: dotted 2px orangered;
    border-radius: 10px;
    background-color: #ffff;
    text-align: center;
}

#ACCESS {
    width: 90%;
    height: 100%;
    padding: 10px;
    margin: 0 auto 30px;
    border: dotted 2px orangered;
    border-radius: 10px;
    background-color: #ffff;
}

iframe {
    width: 100%;
    margin-bottom: 15px;
}

#ONAIR {
    width: 90%;
    height: 100%;
    margin: 0 auto 30px;
    padding: 20px 10px 20px;
    border: dotted 2px orangered;
    border-radius: 10px;
    background-color: #ffff;

}

#KEY {
    width: 90%;
    height: 100%;
    margin: 0 auto 30px;
    margin: 60px auto;
    padding: 20px 10px 20px;
    border: dotted 2px orangered;
    border-radius: 10px;
    background-color: #ffff;
}

#LINK {
    width: 90%;
    height: 100%;
    margin: 0 auto 30px;
    padding: 20px 10px 20px;
    border: dotted 2px orangered;
    border-radius: 10px;
    background-color: #ffff;
}

div#LINK img {
    height: 30px;
    display: block;
    margin: 25px auto 5px;
    background-color: #ffff;
}

.logo-x,
.logo-i,
.logo-yt {
    height: 30px;
    display: block;
    margin: 25px auto 5px;

}

#OTHER {
    width: 90%;
    height: 100%;
    margin: 60px auto 5px;
    padding: 20px 10px 20px;
    border: dotted 2px orangered;
    border-radius: 10px;
    background-color: #ffff;
}


footer {
    height: fit-content;
    padding: 10px;
    color: #ffff;
    background-color: black;
    border-radius: 5px;
    text-align: center;
}

.backtotop {
    width: fit-content;
    padding: 5px;
    display: block;
    margin: 0 auto 10px;
    text-align: center;
    border: dotted 3px orangered;
    background-color: #fcffce;
    border-radius: 5px;

}

.backtotop a {
    color: orangered;
    text-underline-offset: none;

}

div.word p {
    padding: 1px;
    text-decoration: underline;
}

.back a {
    margin-bottom: 50%;
}

header {
    width: 100%;
    height: auto;
    display: block;
}


header.tittle p {
    font-size: 1.8em;
    text-decoration: none;
    color: orangered;
}

header .menu a {
    width: fit-content;
    display: block;
    margin: 10px auto;
    text-align: center;
    padding: 10px;
    border: dotted 3px orangered;
    background-color: #fcffce;
    border-radius: 5px;
}

span#root-a,
#root-T,
#root-Y {
    width: 300px;
    padding: 10px;
    border: dashed 3px orangered;
    border-radius: 20px;
}

/*オンエア*/




#onair-list {
    display: flex;
}

table {
    width: 100%;
    margin: 5% auto;
}


#onair-list tr, td {
text-align: center;
padding: 3px;
}