@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100&display=swap');
@charset"utf-8";
.header{
    text-align: center;
    height:330px;
    width:100%;
        background-color:white;
position:sticky;
}
.clear{
    clear:both;
}
.header-logo{
    height:80px;
    margin-top:70px;
}
.header-text{
    margin-top:30px;
}
.container{
	margin-left:auto;
    margin-right:auto;
}
	.grid{
	display: grid;
  gap: 50px;
  grid-template-columns:184px 184px 184px 184px 184px;
  grid-auto-rows: 274px;
		justify-content:center; 
}

.header-text{
        font-size:15px;
    font-family:  "M PLUS Rounded 1c";
    margin-left:5px;
}
.item{
	background:#ffff;
}
.box-big1 {
  grid-column: 1 /3;
  grid-row: 1 / 3;
}
.box-big2  {
  grid-column: 3 /5;
  grid-row: 4 / 6;
}
 .box-big3  {
  grid-column: 2 /4;
  grid-row: 6 / 8;
}
 .box-big4  {
  grid-column: 1 /2;
  grid-row: 4 / span 2;
}
 .box-big5  {
  grid-column: 1 / 4 ;
  grid-row: 3 / 4 ;
}
 .box-big6  {
  grid-column: 4 /6;
  grid-row: 2 / 5;
}
 .box-big7  {
  grid-column: 5 /6;
  grid-row: 4 / 5;
}
img {
  max-width: 100%;
  height: auto;
}

img2 {
  max-width: 100%;
  height: auto;
}
.footer{
    text-align: center;
    height:330px;
    width:100%;
        background-color:white;
position:sticky;
}
.footer-logo{
    height:40px;
    margin-top:70px;
	margin-bottom: :100px;
}
.footer-logo2{
    height:20px;
    margin-top:30px;
	margin-bottom: :100px;
}
.follow-me {
  list-style: none;
  margin: 0 0 -8px;
  overflow: hidden;
         text-align: center; 
  padding: 0;
}
.follow-me li {
  float: none;
  margin: 0 8px 8px 0;
  padding: 0;
}
.follow-me li a::before {
  background-color: #eee;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  color: #333;
  display: inline-block;
  font-family: FontAwesome;
  font-size: 16px;
  height: 44px; /* Button height */
  line-height: 44px; /* Button height */
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
      margin-left:auto;
    margin-right:auto;
  width: 44px; /* Button width */
}
.follow-me li a:hover::before {
  background-color: #333;
  color: #fff;
}
.follow-me li a[href*="amazon.co.jp"]::before,
.follow-me li a[href*="amazon.com"]::before,        { content: "\f270"; }
.follow-me li a[href*="codepen.io"]::before         { content: "\f1cb"; }
.follow-me li a[href*="delicious.com"]::before      { content: "\f1a5"; }
.follow-me li a[href*="deviantart.com"]::before     { content: "\f1bd"; }
.follow-me li a[href*="digg.com"]::before           { content: "\f1a6"; }
.follow-me li a[href*="dribble.com"]::before        { content: "\f17d"; }
.follow-me li a[href*="dropbox.com"]::before        { content: "\f16b"; }
.follow-me li a[href*="facebook.com"]::before       { content: "\f09a"; }
.follow-me li a[href*="instagram.com"]::before      { content: "\f16d"; }
.follow-me li a:before {
    font-size: 25px;
    height: 50px;
    line-height: 50px;
    width: 50px;
            margin-left:auto;
    margin-right:auto;
}