body {
font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
height:100%;
}

.title1 {
  color: #177fa6;
  font-weight: bold;
  position: relative;
  padding: .25em .35em .35em 1.3em;
}
.title1::after {
  position: absolute;
  top: .5em;
  left: .5em;
  content: '';
  width: 6px;
  height: -webkit-calc(100% - 1em);
  height: calc(100% - 1em);
  background-color: #a3d6cc;
  border-radius: 2px;
}

.title3{
  text-align: center;
  margin: 0px 0px 10px 0px;
}

.footer {
width: 100%;
min-height: 100px;
background: linear-gradient(#fff, #a3d6cc);
}

@media only screen and (min-width: 768px), print {
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(50px, auto);
}
.t1 {
  grid-column: 1 / 3;
  grid-row: 1;
  padding: 15px 15px 0px 15px;
}
.t2 { 
  grid-column: 1 / 3;
  grid-row: 2;
  padding: 15px;
  border-right: 1px rgba(42, 131, 162, 0.2) solid;
  border-left: 1px rgba(42, 131, 162, 0.2) solid;
}
.t3 { 
  grid-column: 1 / 3;
  grid-row: 3;
  padding: 35px 15px 0px 15px;
}
.t4 {
  grid-column: 1 / 3;
  grid-row: 4;
  padding: 15px;
  border-right: 1px rgba(42, 131, 162, 0.2) solid;
  border-left: 1px rgba(42, 131, 162, 0.2) solid;
}
.t5 {
  grid-column: 1 / 3;
  grid-row: 5;
  padding: 35px 15px 0px 15px;
}
.t6 {
  grid-column: 1 / 3;
  grid-row: 6;
  padding: 15px;
  border-right: 1px rgba(42, 131, 162, 0.2) solid;
  border-left: 1px rgba(42, 131, 162, 0.2) solid;
}

.t7 {
  grid-column: 1 / 4;
  grid-row: 7;
  padding: 35px 15px 0px 15px;
}

.t8 {
  grid-column: 1;
  grid-row: 8;
  padding: 15px;
  border-right: 1px rgba(42, 131, 162, 0.2) solid;
  border-left: 1px rgba(42, 131, 162, 0.2) solid;
}

.t9 {
  grid-column: 2;
  grid-row: 8;
  padding: 15px;
  border-right: 1px rgba(42, 131, 162, 0.2) solid;
  border-left: 1px rgba(42, 131, 162, 0.2) solid;
}

.t10 {
  grid-column: 3;
  grid-row: 8;
  padding: 15px;
  border-right: 1px rgba(42, 131, 162, 0.2) solid;
  border-left: 1px rgba(42, 131, 162, 0.2) solid;
}

.t11 {
  grid-column: 3;
  grid-row: 1 / 7;
  padding: 15px;
}

.t20 { 
  color: #177fa6;
  grid-column: 1 / 4;
  grid-row: 9;
  padding: 15px;
  text-align: center;
}



}


@media only screen and (max-width: 767px){
.t1 {
  padding: 15px 15px 0px 15px;
}
.t2 { 
  padding: 15px;
  border-right: 1px rgba(42, 131, 162, 0.2) solid;
  border-left: 1px rgba(42, 131, 162, 0.2) solid;
}
.t3 { 
  padding: 35px 15px 0px 15px;
}
.t4 {
  padding: 15px;
  border-right: 1px rgba(42, 131, 162, 0.2) solid;
  border-left: 1px rgba(42, 131, 162, 0.2) solid;
}
.t5 {
  padding: 35px 15px 0px 15px;
}
.t6 {
  padding: 15px;
  border-right: 1px rgba(42, 131, 162, 0.2) solid;
  border-left: 1px rgba(42, 131, 162, 0.2) solid;
}

.t7 {
  padding: 35px 15px 0px 15px;
}

.t8 {
  padding: 15px;
  border-right: 1px rgba(42, 131, 162, 0.2) solid;
  border-left: 1px rgba(42, 131, 162, 0.2) solid;
}

.t9 {
  padding: 15px;
  border-right: 1px rgba(42, 131, 162, 0.2) solid;
  border-left: 1px rgba(42, 131, 162, 0.2) solid;
}

.t10 {
  padding: 15px;
  border-right: 1px rgba(42, 131, 162, 0.2) solid;
  border-left: 1px rgba(42, 131, 162, 0.2) solid;
}

.t11 {
  padding: 15px;
}

.t20 { 
  color: #177fa6;
  padding: 15px;
  text-align: center;
}


}