@charset "utf-8";

.first-view {
   display: flex;
   align-items: center;
   height: calc(100vh - 120px);
   background-image: url(../images/main-2.jpg);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
}

.first-view-text {
   width: 100px;
   max-width: 1200px;
   margin-left: 20px;
   margin-right: auto;
   padding-left: 40px;
   padding-bottom: 80px;
   color: beige;
   font-weight: bold;
   text-shadow: 1px 1px 10px #4b2c14;
}

.first-view-text h2 {
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   font-size: 40px;
   line-height: 72px;
}

.map{
   display: block;
   text-align: center;
   height: 520px;
   padding: 10px;
   margin-top: 50px;
   margin-bottom: 50px;
}

.info p{
   text-align: center;
   font-weight: bold;
}

.info{
   text-align: center;
   font-size: 35px;
   margin-bottom: 120px;
   line-height: 2;
}

@media (max-width: 1000px) {
   .first-view {
     display: flex;
     align-items: center;
     width: 100%;
     height: 600px;
     background-image: url(../images/main-2.jpg);
     background-repeat: no-repeat;
     background-position: center center;
     background-size: contain;
   }
 
   .first-view-text {
     width: 100px;
     max-width: 1200px;
     margin-left: 20px;
     margin-right: auto;
     padding-left: 30px;
     padding-bottom: 40px;
     color: beige;
     font-weight: bold;
     text-shadow: 1px 1px 10px #4b2c14;
   }
 
   .first-view-text h2 {
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     font-size: 45px;
     line-height: 72px;
   }

   /*追加要素*/
   .map {
      position: relative;
      width: 100%;
      height: 0;
      padding-top: 75%; /*4:3比率に*/
   }
 
   /* Googleマップを左上に固定し、.mapの要素によってサイズ変更 */
   .map iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
   } 
  
   .info p{
      text-align: center;
      font-weight: bold;
   }
   
   .info{
      text-align: center;
      font-size: 20px;
      margin-bottom: 120px;
      line-height: 2;
   }
}