/* いちおうスマホ用の表示と分けてるんだよ */
/* レスポンシブ対応ってやつ？ */

html {
  height: 100%;
  overflow-x: hidden;
}
 
@font-face {
font-family: 'myfont';
src: url(font/font3.otf);
}

body {
 height: 100%;
  margin: 0;
font-family: 'myfont';
}

h1 {
  font-size: 50px;
   font-weight: normal;
}

h2
  font-size:40px;
}


p {
  color: #ffffee;
  font-size: 15px;
}

header {
  background-color: #333333;
  color: #ffffff;
font-size: 30px;
padding :20px;
 position: relative;
text-align: center;
}

header.tab {
padding: 10px 0 5px;
position: fixed;
bottom: 0;
  left: 0;
  right: 0;
z-index: 9;
background-color: rgb(30 30 30 / 0.7);
border-radius: 50px;
margin:10px;
backdrop-filter: blur(5px);
}

img.tab{
width: 15%;
max-width: 100px;
}

ul li, ol li {
 padding: 0px;
  list-style-type: none!important;
}

hr {
height: 2px;
background-color: #666;
 border: none;
 width: 90%;
}

.big {
 width: 100%;
}

.icon {
 float: left;
}


.agare{
position: fixed;
right: 0;
padding:10px 25px 10px;
  color: #fff;
text-decoration:none;
background-color: #333;
border-radius:30px 0 0 30px;
}



.btn{
padding:  2%;
margin: 0 50px 0;
  color: #ffb3e3;
font-size: 20px;
  background-color: #fff;
   border-radius: 100vh;
text-decoration:none;
}

.btn2{
padding:  20px;
margin: 0 50px 0;
  color: #333333;
font-size: 20px;
  background-color: #fff;

text-decoration:none;
}

.kome{
display:block;
font-size:10px;
text-align:center;
}

.siro{
  color: #fff;
text-decoration:none;
}

.siroblock{
 display: inline-block;
  color: #fff;
text-decoration:none;
}


.fukidashi{
text-align:center;
height: 110%;
font-size:calc(5vw - 0.3em);
padding: 5%;
margin:5% 0 5%;
background-color: #ffffff;
border-radius: 15px;
}

.new {
  background-color: #222222;
  color: #ffffff;
}

.new2 {
  background-color: #222222;
  color: #ffffff;
   overflow:auto;    
justify-content:space-between;
}


.title {
  color: #ffffff;
padding: 20px;
}



.account {
    padding:50px 5px;
display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap:20px;
  background-color: #ffb3e3;
  color: #222222;
}

.leftkitsune {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
 background: linear-gradient(to bottom,#ccd9ed,#e8f1ff); 
  padding:50px 0 50px;
   color: #222222;
}

.main {
  background-color: #ffffff;
  color: #222222;
}

.yozorairo {
background: linear-gradient(to bottom left, #5c4378,#292638); 
padding:5%;
}

.chromecore {
 display: flex;
 background: linear-gradient(to bottom,#e8f1ff,#ccd9ed); 
  padding: 20px;
} 

.mikoback{
background-image: url(img/ぼかしみこ.png),linear-gradient(to bottom left,#ffbf86,#ffaef1);
    background-repeat: no-repeat;
    background-position:bottom center;
 background-size: contain;
color: #fff;
text-align: center;
padding:30px;
}

.marisaback{
background-image: url(img/endingmarisa.png),linear-gradient(to bottom,#ffb8f5,#ffaef1);
    background-repeat: no-repeat;
    background-position:bottom center;
 background-size: contain;
color: #fff;
text-align: center;
padding:30px;
}


.reimuiro {
  background-color: #ff584d;
 padding: 0;
color:#fff;
}

.marisairo {
  background-color: #ffd65c;
  padding: 20px;
color:#333;
}
.blue {
  background-color: #6facd9;
  padding: 20px;
color:#fff;
}
.orange {
  background-color: #cf7a4c;
  padding: 20px;
color:#fff;
}

.pink {
  background-color:#c967af;
  color: #fff;
  padding: 20px;
}

.green {
  background-color:#5db551;
  padding: 20px;
color:#fff;
}

.sukitoruiro {
background: linear-gradient(to left bottom,#cfffe0,#a8ffc8); 
color: #222222;
}

.cen {
flex-wrap: nowrap;
 padding: 20px;
margin: 15px;
}


.boxbox{
padding: 5%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
  row-gap: 5px;
}

.boxes{
padding: 6%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 4%;
  row-gap: 7%;
  place-items: center;
}

.pcboxes{
padding: 6%;
}

.box {
  aspect-ratio: 16 / 9;
}


.boxes2{
padding: 2px;
  display: grid;
}


.mokujibox{
padding: 5%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2%;
  row-gap: 1%;
  place-items: center;
}

img.mokujibox{
width:100%;
border-radius:30px
}

.vidlist{
padding: 5%;
  display: grid;
  grid-template-columns: 1fr;
}

.youtubeumekomi{
width:100%;
aspect-ratio: 16 / 9;
border-radius:15px;
}