@charset "UTF-8";

#container {
   max-width: 960px;
   width: 100%;
   margin: 0 auto;
}

header {
       background-color: aqua;
    height: 80px;
   margin-bottom: 10px;
}

header h1 {
   font-weight: normal;
   text-align: center;
   line-height: 80px;
}
nav {
   margin-bottom: 20px;
    box-sizing: border-box;
    width: 100%;
    padding: 5px;
    font-size: 90%;
    text-align: right;
}
#photo {
   width: 100%;
   display: grid;
   grid-column-gap: 5px;
   grid-template-rows: 1fr 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr;
}

#photo div img {
   width: 100%;
}


#t1 {
   grid-column: 1/2;
   grid-row: 1/3;
}
#t2 {
   grid-column: 3/4;
   grid-row: 3/5;
}
#y1 {
   grid-column: 2/4;
   grid-row: 1/2;
}
#y2 {
   grid-column: 2/4;
   grid-row: 2/3;
}
#y3 {
   grid-column: 1/3;
   grid-row: 3/4;
}
#y4 {
   grid-column: 1/3;
   grid-row: 4/5;
}
.setumei {
   display: flex;
   align-items:center
}
.item1 {
   width: 65%;
}
.item2 {
   width: 35%;
}
footer {
    text-align: center;
    color: fuchsia;
   margin-top: 20px
}
@media screen and (max-width:850px){
   .setumei {
   display: block;
}
   .item1 {
   width: 100%;
}
.item2 {
   width: 100%;
}
}