@media screen and (max-width:1024px) {
        div.photo{height: 250px;
                  width: 714px;
        }


        article.post3 {background-position: 92%;
                       background-size: 300px;
        }
        article.post4 {background-size: 250px;
                       background-position: 35% 75%,
                                            8% 30%;
                        }
        article.post5{background-position: 92%;
                      background-size: 250px;
        }
        span.mgr4{margin: 0 0 0 5%;
          }
}
        
@media screen and (max-width: 760px) {
        img.ime{width: 350px;

        }

        div.photo{width: 526px;
                  height: 184px;
        }
        article.post1{font-size: 15px;
                      
        }
        article.post2 {background-size: 200px;
                       width:auto;
                       font-size: 13px; 
                       background-position: 10%;
                        
        }
        article.post3 {background-size: 200px;
                       width: auto;
                       font-size: 13px; 
                       background-position: 90%;
        }
        article.post4 {background-size: 150px; 
                       width:  auto;
                       font-size: 13px;
                       background-position: 20% 70%,
                                            8% 30%;

        }
        article.post5 {background-image: none;
                       width:  auto;
                       font-size: 13px;     
        }
        article.post6 {background-size: 200px;
                       width:  auto;
                       font-size: 13px;

        }
        article.post7 {background-size: 200px;
                width:  auto;
                font-size: 13px;
 }

        article.post8 {width:  auto;
                       font-size: 13px;
}

        span.mgr3{display: inline-block;
                margin: 0 0 0 50%;
          }
        div.fo{left: 0%;
                font-size: 15px;

          }
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
        
        br.br-sp{display: inline-block;        
        }
        span.mgr5{display: inline-block;
                  margin: 0 0 0 54%;
        
        }
        img.ime{width: 280px;
                height: 80px;

        }
        header.text{margin: 0;
                padding: 0;

        }
        div.photo{width: 305px;
                  height: 106px;
                  top: 30px;

        }

        section{margin-top: 15px;
        }

        article.post1{font-size: 15px;
                      margin: 0;

        }

        article.post2 {background-size: 150px;
                       padding: 10% 0% 0% 0%;
                       background-position: top;
                       text-align: 300px;
                       font-size: 13px;
        }
        article.post3 {background-size: 150px;
                       background-position: top;
                       font-size: 13px; 
        }
        article.post4 {background-size: 150px; 
                       background-position: top; 
                       font-size: 13px;
        }
        article.post5 {background-image: url(DSC_81412p.png);
                       background-size: 150px;
                       background-position: top;
                       font-size: 13px;     
        }
        article.post6 {font-size: 13px;

        }
        article.post7 {font-size: 13px;

        }

        article.post8 {font-size: 13px;

        }

        span.mgr3{display: inline-block;
                  margin: 0 0 0 5%;
                  margin-top: 150px;
        }
        span.mgr4{display: inline-block;
                  margin: 0 0 0 5%;
                  margin-top: 150px;
        }
        span.mgr6{display:block;
                margin: 0 0 0 10%;
        }

        img.ime2{height: 60px;

        }
        div.fo{left: 0%;
               font-size: 15px;

          }
}

@keyframes fadeIn {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }

.br-sp{display: none;
}

.key {background-color: #ffffff;
      margin: 0 ;
      padding: 0; 
      height: 100%;
      outline: none;
      user-select: none;
}
.photo {position: relative;
        background-image:url(DSC001122.jpg);
        height: 350px;
        width: 1000px;
        background-size: cover;
        background-repeat: no-repeat;
        margin:0 auto;
        top: 50px;
        animation: fadeIn 2s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}


.text {position: relative;
       margin: 0 auto;
       padding: 0;
       background-color: #ffffff;
       box-shadow: 0px 5px 10px 5px #658375;
       text-align: center;
       width: auto;
       z-index: 1000;
       height: 100px;
}
.post1 {position: relative;
        text-align: center;
        font-family: 'BIZ UDPMincho', serif;
        top: 60px;
        font-size: 18px; 
        margin: 2em 0;
        background: repeating-linear-gradient(-45deg, #daecd6, #daecd6 5px, #ffffff 5px, #ffffff 10px);
}

.post2 {position: relative;
        margin:0 auto;
        width: auto;
        border-radius: 10px 10px 0px 0px;
        background-image: url(DSC_80332p.png);
        background-size: 300px;
        background-position: 20%;
        background-repeat: no-repeat;
        box-shadow: 4px 4px 8px #58796a inset;
        font-family: 'BIZ UDPMincho', serif;
        top: 50px;
        font-size: 16px;
        background-color: #daecd6;
} 

.post3 {position: relative;
        margin:0 auto;
        width: auto;
        border-radius: 10px 10px 0px 0px;
        background-image: url(DSC_80412p.png);
        background-size: 350px;
        background-position: 80%;
        background-repeat: no-repeat;
        box-shadow: 4px 4px 8px #58796a inset;
        font-family: 'BIZ UDPMincho', serif;
        top: 50px;
        font-size: 16px;
        background-color: #daecd6;
}

.post4 {position: relative;
        margin:0 auto;
        width: auto;
        border-radius: 10px 10px 0px 0px;
        background-image: url(DSC_80962p.png),
                          url(DSC_80572p.png);
        background-size: 330px;
        background-position: 40% 80%,
                             10% 20%;
        background-repeat: no-repeat;
        box-shadow: 4px 4px 8px #58796a inset;
        font-family: 'BIZ UDPMincho', serif;
        top: 50px;
        font-size: 16px;
        background-color: #daecd6;
}

.post5{position: relative;
       margin:0 auto;
       width: auto;
       border-radius: 10px 10px 0px 0px;
       background-image: url(DSC_81412p.png);
       background-size: 350px;
       background-position: 80%;
       background-repeat: no-repeat;
       box-shadow: 4px 4px 8px #58796a inset;
       font-family: 'BIZ UDPMincho', serif;
       top: 50px;
       font-size: 16px;
       background-color: #daecd6;
}

.post6{position: relative;
       margin:0 auto;
       width: auto;
       border-radius: 10px 10px 0px 0px;
       box-shadow: 4px 4px 8px #58796a inset;
       font-family: 'BIZ UDPMincho', serif;
       font-size: 16px;
       top: 50px;
       background-color: #daecd6;
}

.post7 {position: relative;
        text-align: center;
        font-family: 'BIZ UDPMincho', serif;
        top: 10px;
        font-size: 18px; 
        margin: 2em 0;
        background: repeating-linear-gradient(-45deg, #daecd6, #daecd6 5px, #ffffff 5px, #ffffff 10px);
}

.post8{position: relative;
        margin:0 auto;
        width: auto;
        border-radius: 10px 10px 0px 0px;
        box-shadow: 4px 4px 8px #58796a inset;
        font-family: 'BIZ UDPMincho', serif;
        font-size: 16px;
        top: 0px;
        background-color: #daecd6;
 }

.content{ min-height: 100%;
        min-height: calc(100vh - 210px);
}

.float {background-color: #ffffff;
        bottom: 0;
        position: relative;
        top: 100px;
        width:100%;
        display: flex;
        list-style: none;
        justify-content: space-evenly;
        align-items: center;
        font-size: 20px;
        font-family: 'BIZ UDPMincho', serif;
        box-shadow: 0px 5px 10px 5px #658375;
        height: 110px;
}

.line {color: rgb(0, 0, 0);
   position: relative;
   display: inline-block;
   text-decoration: none;
}

.line::after{position: absolute;
         bottom: -4px;
         left: 0;
         content: '';
         width: 100%;
         height: 2px;
         background: rgb(70, 165, 61);
         transform: scale(0, 1);
         transform-origin: left top;
         transition: transform .3s;

}

.line:hover::after {transform: scale(1, 1);
}

.fo {position: relative;
     left: -15%;
}

br.desk{padding: 8px 0;
        display: block;
        content: "";

}

.mgr3{display: inline-block;
      margin: 0 0 0 60%;
}
.mgr4{display: inline-block;
      margin: 0 0 0 10%;
}
.mgr6{display: inline-block;
      margin: 0 0 0 10%;
}
.mgr7{display: inline-block;
        margin: 0 0 0 30%;

}
.under{border : solid 1px rgb(0, 0, 0);
       display:inline-block;

}