@charset "UTF-8";

/* body */
body {
  font-size: 1em;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 1.5;}

  /*角丸ボックス設定*/
.kadomaru {margin: auto;
  padding: 8px;
  width: 96%;
 border-radius: 15px;         /* CSS3 */

 border: 2px #f5bf2c solid;     /*枠線の装飾*/
 background-color: rgba(249, 242, 210, 0.9) ; /* 背景色 */
  word-break:break-all; /* 文字折り返し*/
}



@media(min-width:767px){

  /*グリッド*/
  .post{
    display: grid;
    /* grid-template-columns: 20px 1fr 50px 1fr 20px; */
    /* grid-template-rows: auto 30px auto 30px auto 20px auto 20px auto; */
    background-color: rgba(119, 155, 218, 0.70);

  }

/*ヘッダー*/
  .grid01{
    grid-column: 2 / -2;
    grid-row: 1;

    /*ヘッダーのグリッド*/
    display: grid;
    grid-template-columns: 200px 20px 1fr 100px  1fr;
     grid-column-gap: 50px;
    /*grid-row-gap: 12px; */

  }
  .post * {
    margin: 0;
  }


  .icon
  {
    grid-column: 1;
    grid-row: 1;
  }
  .icon img {
    max-width: 200px;
  }

.logo{
  grid-column: 3;
  grid-row: 1;
}
  .logo img {
    max-width: 600px;
    margin-top: 70px;
  }
.twittericon{
  grid-column: 4;
  grid-row: 1;
  margin-top: 90px;
  max-width: 60px;
}
 

  /*リンク色*/
a {
	color: #e89b1e;
}

a:hover {
    color: #68be8d;
  }



  
  /*about*/
 .grid02{
  display: grid;
  grid-row: 3;

 } 



 /*contents*/
 .grid03{
  display: grid;
  grid-row: 5;
  background-color: rgba(181, 199, 225, 0.6);
  padding-top:30px;
  padding-bottom:30px;

  grid-template-columns: 20px 1fr 6px 1fr 20px;
  grid-template-rows: 40px auto 50px auto 50px;

 }
.infotext{
  font-size: 28px;
  font-weight: 600;
  color: #fff;
 
}

.year01{
  grid-column: 2;
  grid-row: 1;
  color:#fff;
  font-size: 20px;
  font-weight: 600;
}
 .poster{
  grid-column: 2;
  text-align: center;
  margin-bottom: 40px;
  font-size: 20px;
 }
 
 .slineco{
  grid-column: 3;
  background-color: #fff;
  margin-bottom: 40px;
 }
 .poster02{
  grid-column: 4;
  text-align: center;
  margin-bottom: 40px;
  font-size: 20px;
 }

 .year02{
  grid-column: 2;
  grid-row: 3;
  color:#fff;
  font-size: 20px;
  font-weight: 600;
}
 .poster03{
  grid-column: 2;
  grid-row: 4/5;
  text-align: center;
  font-size: 20px;
 }

 .slineco2{
  grid-column: 3;
  grid-row: 4/5;
  background-color: #fff;
 }

 .poster04{
  grid-column: 4;
  grid-row: 4/5;
  text-align: center;
  font-size: 20px;
 }

 .footer{
  display:grid;
  
  grid-row:6;
  color: #fff;
  background-color: rgba(67, 125, 207, 0.8);
  text-align: center;
  padding: 10px;

}

.bigger{
  font-size:  1.6em;;
}

 /*空白行設定*/
.emp1{margin-bottom: 1em;}
.emp2{margin-bottom: 2em;}
.emp3{margin-bottom: 3em;}
.emp5{margin-bottom: 5em;}

}


/*sp*/
@media  (max-width: 767px){

 

  .post{
    display: grid;
    grid-template-columns: 10px 1fr 10px; 
    /* grid-template-rows: auto 30px auto 30px auto 20px auto 20px auto; */
    background-color: rgba(119, 155, 218, 0.70);}

    .grid01{
  
      /*ヘッダーのグリッド*/
      display: grid;
      grid-template-columns: 100px 1fr 20px 40px  ;
      
      /*grid-row-gap: 12px; */
      grid-column: 2/3;
  
    }
.icon{
  grid-column: 1;
  grid-row: 1;
}
    .icon img{
      max-width: 100px;
}
.logo{
  grid-column: 2;
  grid-row: 1;
}
.logo img {
  max-width: 300px;
  margin-top: 40px;
}
.twittericon{
grid-column: 4;
grid-row: 1;
margin-top: 40px;
}

/*about*/
.grid02{
  display: grid;
  grid-column: 2/3;
  grid-row: 3;
 } 
.kadomaru 
{
  margin: auto;
  padding: 8px;
  width: 90%;
 border-radius: 15px;         /* CSS3 */
 border: 2px #f5bf2c solid;     /*枠線の装飾*/
 background-color: rgba(249, 242, 210, 0.9) ; /* 背景色 */
  word-break:break-all; /* 文字折り返し*/
  }

   /*contents*/
 .grid03{
  display: grid;
  grid-column: 2/3;
  grid-row: 5;
  background-color: rgba(181, 199, 225, 0.6);

  grid-template-columns: 5px 1fr 5px;
  grid-template-rows: 10px auto 50px auto 50px auto 50px auto 50p;

 }
.infotext{
  font-size: 20px;
  font-weight: 600;
  color: #fff;
 
}

.year01{
  grid-column: 2;
  grid-row: 1/2;
  color:#fff;
  font-size: 20px;
  font-weight: 600;
}
 .poster{
  grid-column: 2;
  grid-row: 2;
  text-align: center;
  margin-bottom: 40px;
  font-size: 20px;
 }
 
 .poster02{
  grid-column: 2;
  grid-row: 4;
  text-align: center;
  margin-bottom: 40px;
  font-size: 20px;
 }

 .year02{
  grid-column: 2;
  grid-row: 5;
  color:#fff;
  font-size: 20px;
  font-weight: 600;
}
 .poster03{
  grid-column: 2;
  grid-row: 6;
  text-align: center;
  font-size: 20px;
  margin-bottom: 40px;
 }

 .poster04{
  grid-column: 2;
  grid-row: 7;
  text-align: center;
  font-size: 20px;
 }

 /*空白行設定*/
.emp1{margin-bottom: 1em;}
.emp2{margin-bottom: 2em;}
.emp3{margin-bottom: 3em;}
.emp5{margin-bottom: 5em;}



.footer{
  grid-column: 1/4;
  color: #fff;
  background-color: rgba(67, 125, 207, 0.8);
  text-align: center;
  padding: 10px;

}

.bigger{
  font-size:  2em;;
}
}