/* CSSまでわざわざ見にこないでくれ() */

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;
}

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

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

/* 背景を黒くしたいときはヘッダー以外でも使われる最強のヘッダー */
header {
  background-color: #333333;
  color: #ffffff;
font-size: 40px;
padding :20px;
 position: relative;
text-align: center;
}

header.tab {
text-align: left;
}

img.tab{
width: 100px;
}


.none{
display:none;
}

.big {
 width: 100%;
}

.icon {
 float: left;
}


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

.btn2{
padding:  20px;
  color: #333333;
font-size: 20px;
  background-color: #fff;
text-decoration:none;
}

.morebtn{
padding:30px;
margin:40px;
text-align:center;
  background-color: #fff;
   border-radius: 100vh;
display:block;
  color: #333;
font-size: 30px;
text-decoration:none;
}

.list{
padding:20px;
margin:20px;
text-align:left;
   border-radius: 100vh;
display:block;
  color: #fff;
font-size: 30px;
text-decoration:none;
}

a.list{
  background-color: #fff3;
}

.gytitle{
padding:20px;
margin:10px 40px;
  background-color: #444d;
text-align:center;
   border-radius: 100vh;
display:block;
  color: #fff;
font-size: 30px;
text-decoration:none;
}

.kome{
display:block;
font-size:25px;
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:max(26px);
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;
}


.leftmain {
    padding:20px 0 20px;
  background-color: #ffffff;
  color: #222222;
  overflow:auto;
width: 40%;
 }


.account {
    padding:30px 10px;
display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap:20px;
min-width:500px;
  background-color: #ffffff;
  color: #222222;
  overflow:auto;
}

.leftkitsune { 
 float:left;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  padding:20px 0 20px;
  background-color: #ffffff;
  color: #222222;
}

.floatflex{
 float:left; 
display: flex;
}

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


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

.mikoback{
display:none;
}

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



.reimuiro {
display: flex;
background-color: #ff584d;
color:#fff;
 height: 50vw;
}

.marisairo {
  background-color: #ffd65c;
  padding: 20px;
color:#333;
}

.nadeshiko {
  background-color:#ffb7d2;
  color: #fff;
  padding: 20px;
}

.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;
}

.reimubox{
    align-items: center;
width:60%;
}

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

.boxes{
padding: 60px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
  row-gap: 20px;
  place-items: center;
}

.pcboxes{
padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
  row-gap: 20px;
  place-items: center;
}


.boxes2{
padding: 20px;
  display: grid;

}

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

div.mokujibox{
padding: 40px;
}

.mokujibox-p3m2{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  row-gap: 20px;
  place-items: center;
}

div.mokujibox-p3m2{
padding: 40px;
}


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


.vidlist{
padding: 40px;
  display: grid;
  grid-template-columns: 2fr 5fr;
  column-gap: 20px;
  row-gap: 20px;
}

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