@charset "utf-8";

html,
body{
  margin: 0;
  padding: 0;
}
div,
p{
  font-size: clamp(12px, 3.5vw, 16px);
  line-height: clamp(20px, 5.5vw, 28px);
  font-family: monospace;
  color: #333333;
  text-align: justify;
  margin: 0;
  padding: 0;
}
div.container{
  width: 90%;
  padding: 0;
  margin: 0 5% 0;
}
header{
  width: 90%;
  height: auto;
  margin: 1em 5% 1em;
}
main{
  width: 100%;
  padding: 0;
  margin: 0;
}
big{
  font: bold 1.2em monospace;
}
small{
  font: 0.8em monospace;
}
img{
  border: 0;
}
img.full{
  width: 100%;
  height: auto;
  margin: 0 0 1em 0;
}
img.logo{
  width: 50%;
  height: auto;
  margin: 0;
  float: left;
}
nav{
  width: 45%;
  height: auto;
  margin: 0 0 1em 5%;
  float: left;
}
img.icon{
  width: 17%;
  height: auto;
  opacity: 1;
  margin: 1.25% 0 1.25% 3%;
  float: left;
}
img.icon_a{
  width: 17%;
  height: auto;
  opacity: 0.5;
  margin: 1.25% 0 1.25% 3%;
  float: left;
}
footer{
  width: 100%;
  background-color: #333333;
  padding: 0.75em 0 0.75em;
  margin: 0;
  font: 0.85em monospace;
  color:#ffffff;
  text-align: center;
}
article{
  width: 80%;
  padding: 0;
  margin: 0 10% 0;
}
h1{
  width: 100%;
  font-size: clamp(20px, 5vw, 30px);
  font-family: zen-maru-gothic, monospace;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.25em;
  text-align: center;
  margin: 0 0 0.8em 0;
  padding: 0 0 0.5em;
}
h1.top{
  color: #8b0000;
  border-bottom: 1px solid #8b0000;
}
h1.plusma{
  color: #8b4513;
  border-bottom: 1px solid #8b4513;
}
h1.kks{
  color: #cc6600;
  border-bottom: 1px solid #cc6600;
}
h1.mq{
  color: #000066;
  border-bottom: 1px solid #000066;
}
h1.watage{
  color: #336600;
  border-bottom: 1px solid #336600;
}
h1.dof{
  color: #003399;
  border-bottom: 1px solid #003399;
}
h2{
  width: auto;
  font-size: clamp(15px, 4.2vw, 20px);
  font-family: monospace;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 0.05em;
  text-align: left;
  margin: 2em 0 1em 0;
  padding: 0 1em 0;
  border-radius: 1em;
}
h2.top{
  background-color: #b22222;
}
h2.plusma{
  background-color: #cc9900;
}
h2.kks{
  background-color: #ffa500;
}
h2.mq{
  background-color: #6a5acd;
}
h2.watage{
  background-color: #32cd32;
}
h2.dof{
  background-color: #1e90ff;
}
section.top{
  background-color: #faf0e6;
}
section.plusma{
  background-color: #fffacd;
}
section.kks{
  background-color: #fff5ee;
}
section.mq{
  background-color: #e6e6fa;
}
section.watage{
  background-color: #f0fff0;
}
section.dof{
  background-color: #f0f8ff;
}
li{
  font: 0.9em/1.7em monospace;
  color: #666666;
  text-align: justify;
}
ul{
  list-style-type: disc;
  list-style-position: outside;
}
a:link{
  color: #4169e1;
  text-decoration: none;
}
a:visited{
  color: #4169e1;
  text-decoration: none;
}
a:active{
  color: #4169e1;
  text-decoration: none;
}
a:hover{
  color: #8b0000;
  text-decoration: underline;
  transition: 0.5s;
  opacity: 0.5;
}
.icon:hover{
  transition: 0.5s;
  opacity: 0.5;
}


/*YouTube Player*/
.movie{
  width: 100%;
  margin: 1em 0 1em 0;
}
.youtube{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}


/*Top*/
div.new{
  width: 100%;
  height: auto;
  display: flex;
  vertical-align: middle;
  margin: 0 0 0.75em;
}
div.day{
  width: fit-content;
  height: auto;
  font: 0.8em sans-serif;
  color: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 1.5em 0;
  background-color: #b22222;
  border-radius: 5px 0 0 5px;
}
div.info{
  width: 100%;
  font: 1em/1.7em monospace;
  color: #666666;
  text-align: justify;
  padding: 0.75em;
  background-color: #ffffff;
  border-radius: 0 5px 5px 0;
}


/*Common CharaNameRuby*/
rt{
  font: 2vw monospace;
  color: #333333;
}


/*Plusma*/
img.plusma{
  width: 75%;
  height: auto;
  margin: 0 5% 0 20%;
}
div.plusma_prof{
  width: 90%;
  padding: 0;
  margin: 0 5% 0;
}
div.rotate{
  transform: rotate(-10deg); 
  position: absolute;
  top: 1em;
  left: 12%;
}
p.plusma_word{
  font: 3.5vw/5.2vw serif;
  color: #666666;
  text-indent: -1em;
  text-shadow: 0px 0px 3px #ffffff, 0px 0px 3px #ffffff, 0px 0px 3px #ffffff, 0px 0px 3px #ffffff, 0px 0px 3px #ffffff;
}
p.plusma_catch{
  width: -moz-fit-content;
  width: fit-content;
  background: linear-gradient(to right, #666666, transparent);
  font: 2.8vw monospace;
  color: #ffffff;
  text-align: center;
  margin: 1.2em 0 1.2em;
  padding: 0.25em 1em 0.25em;
}
p.plusma_name{
  font-size: 5vw;
  font-family: zen-maru-gothic, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #333333;
  text-shadow: 0px 0px 10px #ffffff;
  margin: 0 0 0.5em 0;
}
p.plusma_alphabet{
  font: 2.7vw monospace;
  color: #333333;
  text-indent: 0.25em;
  text-shadow: 0px 0px 5px #ffffff;
}
p.plusma{
  width: 90%;
  margin: 1em 5% 1em;
}


/*KKS*/
div.kks_prof{
  width: 76%;
  padding: 0;
  margin: 0 12% 0;
}
p.kks_cap{
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}


/*MQ*/
p.mq{
  width: auto;
  padding: 0;
  margin: 0 3em 1em;
}
.accbox{
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.accbox label{
  display: block;
  padding: 1em;
  margin: 1em 0 0;
  color: #ffffff;
  background-color: #000066;
  cursor: pointer;
  transition: all 0.5s;
}
.accbox label:hover{
  background-color: #cccccc;
  color: #000066;
}
.accbox input{
  display: none;
}
.accbox .accshow{
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}
.cssacc:checked + .accshow {
  height: auto;
  padding: 0;
  background-color: #ffffff;
  opacity: 1;
}
img.mq_img{
  width: 90%;
  height: auto;
  margin: 0 5% 0;
}
div.mq3{
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
div.mqcard{/*Card*/
  width: 30%;
  padding: 0;
  margin: 1em 0 0;
}
div.cardtitle{/*Card*/
  margin: 0;
  padding: 0;
}
div.img{/*Card*/
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}
img.card{/*Card*/
  width: 100%;
  height: auto;
  margin: 0 0 0.5em;
  padding: 0;
  border-radius: 10px;
}
div.text{/*Card*/
  font-size: clamp(10px, 3.2vw, 14px);
  line-height: clamp(16px, 4.5vw, 20px);
  font-family: monospace;
  color: #333333;
}


/*Watage*/
img.watage_ph{
  width: 35%;
  height: auto;
  margin:0 5% 2% 0;
  float: left;
}
p.watage_name{
  font-size: 5vw;
  font-family: zen-maru-gothic, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #333333;
  margin: 0.5em 0 0.5em;
}


@media screen and (max-width: 768px){
/*画面幅が768pxまでの時*/
div.top{
  width: 100%;
  padding: 0;
  margin: 0;
  clear: left;
}
section,
section.h{
  width: calc(100% - 4em);
  margin: 0 0 2em;
  padding: 2em;
  border-radius: 10px;
}
div.full{
  width: 100%;
  margin: 0;
  padding: 0;
}
div.top{
  width: 100%;
  padding: 0;
  margin: 0 0 1em;
  clear: left;
}
ol{/*MusicList*/
  width: calc(100% - 6em);
  list-style-type: decimal-leading-zero;
  list-style-position: outside;
  padding: 0;
  margin: 0 3em;
  column-count: 2;
  column-gap: 20%;
}
div.lyric{/*Lyric*/
  width: 100%;
  margin: 0;
  padding: 0;
  column-count: 2;
  column-gap: 3em;
}
p.lyric{/*Lyric*/
  width: 100%;
  font-size: clamp(12px, 3.5vw, 16px);
  line-height: clamp(20px, 5.5vw, 28px);
  font-family: monospace;
  color: #333333;
  text-align: justify;
  margin: 0 0 1em;
  padding: 0;
}
img.kks_ph{/*KKS*/
  width: 40%;
  height: auto;
  margin: 0 30%;
}
p.kks_name{/*KKS*/
  font-size: 5vw;
  font-family: zen-maru-gothic, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #333333;
  text-align: center;
  margin: 3vw 0 3vw;
}
img.kks_cap{/*KKS*/
  width: 49%;
  height: auto;
  margin: 2% 0 0;
}
div.watage_box{/*Watage*/
  width: 90%;
  margin: 0 5% 1em;
  padding: 0;
}
div.watage_prof_l{/*Watage*/
  width: 80%;
  padding: 0 0 1em;
  margin: 0 10%;
  clear: left;
}
div.watage_prof_r{/*Watage*/
  width: 80%;
  padding: 1em 0 0;
  margin: 0 10%;
  clear: left;
}
}/*画面幅が768pxまでの時*/


@media screen and (min-width: 769px) and (max-width: 1279px){
/*画面幅が769px以上1279px以下の時*/
div.top{
  width: 90%;
  padding: 0;
  margin: 0 5% 2em;
  clear: left;
}
section{/*Full*/
  width: calc(100% - 4em);
  margin: 0 0 3em;
  padding: 2em;
  border-radius: 10px;
}
div.full{/*Half*/
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;
}
section.h{/*Half*/
  width: calc(100% / 2 - 6em);
  margin: 0 0 3em;
  padding: 2em;
  border-radius: 10px;
}
ol{/*MusicList*/
  width: calc(100% - 8em);
  list-style-type: decimal-leading-zero;
  list-style-position: outside;
  padding: 0;
  margin: 0 4em;
  column-count: 3;
  column-gap: 10%;
}
div.lyric{/*Lyric*/
  width: 100%;
  margin: 0;
  padding: 0;
  column-count: 3;
  column-gap: 4em;
}
p.lyric{/*Lyric*/
  width: 100%;
  font-size: clamp(12px, 3.5vw, 16px);
  line-height: clamp(20px, 5.5vw, 28px);
  font-family: monospace;
  color: #333333;
  text-align: justify;
  margin: 0 0 1em;
  padding: 0;
}
img.kks_ph{/*KKS*/
  width: 40%;
  height: auto;
  margin: 0 5% 0 0;
  float: left;
}
p.kks_name{/*KKS*/
  font-size: 5vw;
  font-family: zen-maru-gothic, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #333333;
  margin: 5vw 0 5vw;
}
img.kks_cap{/*KKS*/
  width: 24%;
  height: auto;
  margin: 2% 0 0;
}
div.watage_box{/*Watage*/
  width: 80%;
  margin: 0 10% 1em;
  padding: 0;
}
div.watage_prof_l{/*Watage*/
  width: 45%;
  padding: 0 5% 0 0;
  margin: 0 0 1em 0;
  float: left;
}
div.watage_prof_r{/*Watage*/
  width: 45%;
  padding: 0 0 0 5%;
  margin: 0 0 1em 0;
  float: left;
}
}/*画面幅が769px以上1279px以下の時*/


@media screen and (min-width: 1280px){
/*画面幅が1280px以上の時*/
div.top{
  width: 90%;
  padding: 0;
  margin: 0 5% 2em;
  clear: left;
}
/*これ以降は「画面幅が769px以上1279px以下の時」と同じ*/
section{/*Full*/
  width: calc(100% - 4em);
  margin: 0 0 3em;
  padding: 2em;
  border-radius: 10px;
}
div.full{/*Half*/
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;
}
section.h{/*Half*/
  width: calc(100% / 2 - 6em);
  margin: 0 0 3em;
  padding: 2em;
  border-radius: 10px;
}
ol{/*MusicList*/
  width: calc(100% - 8em);
  list-style-type: decimal-leading-zero;
  list-style-position: outside;
  padding: 0;
  margin: 0 4em;
  column-count: 3;
  column-gap: 10%;
}
div.lyric{/*Lyric*/
  width: 100%;
  margin: 0;
  padding: 0;
  column-count: 3;
  column-gap: 4em;
}
p.lyric{/*Lyric*/
  width: 100%;
  font-size: clamp(12px, 3.5vw, 16px);
  line-height: clamp(20px, 5.5vw, 28px);
  font-family: monospace;
  color: #333333;
  text-align: justify;
  margin: 0 0 1em;
  padding: 0;
}
img.kks_ph{/*KKS*/
  width: 40%;
  height: auto;
  margin: 0 5% 0 0;
  float: left;
}
p.kks_name{/*KKS*/
  font-size: 5vw;
  font-family: zen-maru-gothic, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #333333;
  margin: 5vw 0 5vw;
}
img.kks_cap{/*KKS*/
  width: 24%;
  height: auto;
  margin: 2% 0 0;
}
div.watage_box{/*Watage*/
  width: 80%;
  margin: 0 10% 1em;
  padding: 0;
}
div.watage_prof_l{/*Watage*/
  width: 45%;
  padding: 0 5% 0 0;
  margin: 0 0 1em 0;
  float: left;
}
div.watage_prof_r{/*Watage*/
  width: 45%;
  padding: 0 0 0 5%;
  margin: 0 0 1em 0;
  float: left;
}
}/*画面幅が1280px以上の時*/