.container {
  max-width: 1100px;
  margin: 1% auto;
  padding: 2% 2%;
  display: grid;
  grid-template-columns: 1fr 0.5fr 1fr;
  gap: 10px;
  grid-template-rows: 1fr 1fr;
/*  background-color: black;*/

}
.item{
  border-radius: 10px;
/*  background:  #eff;*/
  padding: 10px;
  margin: 10px;
  text-align: center;
  line-height: 3;
}

.pict{
	width: 350px;
	height: auto;
	border-radius: 20px;
	border: 1px solid #00cc00;

}
.pict1{
	width: 250px;
	height: auto;
	border-radius: 200px;
	border: 9px solid #00cc00;
}

body {
  color: #0e940c;
  font-family: "M PLUS Rounded 1c","Yu Gothic Medium", "游ゴシック Medium", YuGothic;
}



a:hover img{
	opacity: 0.5;
}


.mainArea{
  max-width: 1000px;
  margin: 0 auto;
}


/* sub Page */
.subContainer {
  max-width: 480px;
  margin: 0 0 0 auto;
  padding: 10% 20% 0 0;

/*  background-color: black;*/
}

.subItem{
  border-radius: 10px;
  background:  rgb(255, 255, 255, .8);
  padding: 6%;
  width: 450px;

}

.mailsubItem{
  border-radius: 10px;
  background:  rgb(255, 255, 255, .8);
  padding: 6%;
  width: 500px;

}

.forms {
  padding-right: 6%;
}

.profileBody{
	background-image: url("./img/imgOrg/20141104_3.png");
/*	margin-top: 10%;
*/
/*	height:10px;*/
  background-size: cover;
  background-position: left bottom;
	min-height:100vh;

	background-repeat: no-repeat;
	background-color: #00051d;

}
.mailBody{
  background-image: url("./img/imgOrg/20200813.png");
  background-position: left bottom;
  background-repeat: no-repeat;
  min-height:100vh;
}




/* Responsive */
@media ( max-width : 1100px ){
    /*画面サイズが1100px未満に適用*/
   .container {
        max-width: 850px;
        margin: 1% auto;
        padding: 2% 2%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr ;
        gap: 10px;
/*    grid-template-rows: 25%;*/
    }
    .pict{
      width: 250px;
      height: auto;
      border-radius: 20px;
      border: 1px solid #00cc00;

    }
    .pict1{
      width: 150px;
      height: auto;
      border-radius: 200px;
      border: 9px solid #00cc00;
    }

  }


/* Responsive */
@media ( max-width : 850px ){
    /*画面サイズが600px未満に適用*/
    body {
      line-height: 1.2;
    }

    .container {
        max-width: 650px;
        margin: 1% auto;
        padding: 2% 2%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr ;
        gap: 10px;
    }
    .pict{
      width: 180px;
      height: auto;
      border-radius: 10px;
      border: 1px solid #00cc00;

    }
    .pict1{
      width: 120px;
      height: auto;
      border-radius: 100px;
      border: 4px solid #00cc00;
    }
      /* 送信ボタン */
    .btn{
      padding: 15px 20px; /* 上下の余白、左右の余白 */
      border-radius: 10px; /* 角を丸くする */

    }
}


/* Responsive */
@media ( max-width : 600px ){
    /*画面サイズが600px未満に適用*/
   .container {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
  /*    grid-template-rows: 25%;*/
    }

    .item02 {
      order: -1;
    }

    .item05 {
      order: -1;
    }

    .forms {
      width: 360px;
      height: 1000px;
    }

    .mainArea{
      max-width: 580px;
      margin: 0 auto;
    }

    .subItem{
      width: 360px;
      margin-left: 5px;
    }

}