/*
      :root{
--bs-primary: #b3ecff;
--bs-secondary: #c20067;
--bs-tertiary: #ffffff;
--bs-tertiary-bg: #b3ecff;
       }
*/



    html{ scroll-behavior: smooth; }
    body{ position: relative; }
    section{ padding:2% 10%; }
    h1,h2{ color: #c20067; font-family: "Jun 501","M PLUS 1p";  }
    h3,h4{ color: #222299; margin-top:20px; font-family: "Jun 501","M PLUS 1p";}
    h4{ font-size:1em;}
    ul{ color: #222299; margin-top:20px; font-size:1.1em }
    
    p.info{ font-size:0.9em; }
    
    
    span.midori,div.midori p.info{ color: #009944; }
    span.mizu,div.mizu p.info{ color: #00b2d9; }
    span.sora,div.sora p.info{ color: #eca600; }
    
    div.midori{ border-left: 6px dotted #009944; padding-left:1em; }
    div.mizu{ border-left: 6px dotted #00b2d9; padding-left:1em; }
    div.sora{ border-left: 6px dotted #f8b62d; padding-left:1em; }
    div.niji{ background: url(../img/bgimg_niji.png) no-repeat; background-position: bottom -300px right 20px; background-size:500px; }
    
    div.senden img{ max-width:900px;  }
    div.senden img.tate{ width:70% margin:auto; }
    
    #navbar_top{ background-color:#b3ecff; color:#c20067; font-family: "Jun 501","M PLUS 1p"; }
    .main{  padding-top:100px; }
    .col_name{ color: #c20067; font-family: "Jun 501","M PLUS 1p"; }
    .col_blue{ color: #000099;}
    .theme_col{ background-color:#b3ecff; color:#222222; font-family: Jun 501,"M PLUS 1p"; }
    .theme_border{ margin-top:30px; padding-top:100px; }
    
    #navbar_top a.navbar-brand { color:#c20067; font-size:1.6em; }
    #navbar_top li.nav-item a.active{ color:#c20067; font-weight: bold; }
    span.mute{ font-size:0.5em; }
    img#poster{ width:auto; height:auto; max-height:900px; }



/*  */

.alertbase{
background-color:#FEE;
border-radius: 0.5em;
padding:0.5em;
color:#F05;
}


.responsiv{
    width:auto;
    margin:auto;
    text-align:center;
    }

.responsiv img {
    width:100%;
    max-width: 100%;
    height: auto;
}


/* PCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPCPC */


@media screen and (orientation: portrait) { /*tate*/
  .br-pc { display:block; }
  .br-sp { display:block; }
}
@media screen and (orientation: landscape) { /*yoko*/
  .br-pc { display:block; }
  .br-sp { display:none; }
}

@media screen and (min-width: 769px){
    .responsiv{
        width:90%;
        margin:auto;
        text-align:center;
    }
    .responsiv img {
        width:80%;
        max-width:1500px;
        height: auto;
    }
}

/**/