/* 基本レイアウトリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  background:url('images/body-bg.jpg') no-repeat center center/cover;
  font-family: 'BIZ UDゴシック', sans-serif;
  font-size:14px;
  background-color: rgba(255,255,255,0);
  background-blend-mode:lighten;
 
}

a {
   text-decoration:none;
   
}

a,a:visited {
   color:inherit;
}




/* ヘッダー */


header {
  color:  #ffffff;
  font-size:12px ;
  padding:8px;
  background-color:#0090ff;
  height:28px;
  
}





/* メニューリンク */
.menu-links {
  
  https://example.com/page3
}

.menu {
  display: flex;
  background-color: #fafae8;
  border:solid;
  border-color:#002d75;
  border-left:transparent;
  border-right:transparent;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin:0 auto;
  

  
}

.menu img {
   width: 100%;
   object-fit: contain;
   transition:0.3s;
   
}

.menu :hover img{
  opacity:0.5;
}





/* ロゴ */


.middle-image {
 
 }
.middle-image img {
  width:100%;
  object-fit: contain;

}

.map-section { 
  text-align: center;
  color:#ffffff;
  padding: 1rem 1rem;
  

  
}





/* マップ */


.map-container {
  
  max-width: 980px;
  margin: 1rem auto;
}

   .wrapper {
            width: 100%;
            height:610px;
        }
        .wrapper iframe {
            border-radius: 10px;
            border: none;
            width: 100%;
            height: 100%;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
            
        }
        @media screen and (max-width: 480px) {
            .wrapper {
                position: relative;
                height: auto;
            }
            .wrapper::before {
                content: "";
                display: block;
                width: 100%;
                height: 0;
                padding-top: calc(100% / 3 * 4);
            }
            .wrapper iframe {
　　　　　　　　border-radius: 10px;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
        }



/* 持ち出すボタン */


.hero {
  text-align: center;
  padding:1rem;
  
  
}

.cta-button {
  background: #f0db4f;
  color: #303030;
  padding: 1rem 1.5rem;
  text-decoration: none;
  border-radius: 100vh;
  font-weight: bold;
  transition: background 0.3s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
  

}

.cta-button:hover {
  background: #ffb400;
  
}




/* マップ　店舗一覧　リンク */


.map-store-links {
 
   display: flex;
   justify-content: stretch;
   margin:4rem  auto 0;
   max-width:980px;
   border:solid;
   border-color:#002d75;
   border-left:transparent;
   border-right:transparent;
   border-top:transparent;
   border-radius:10px 10px 0 0;
  
}

.map-store-links img {
  width: 100%;
  object-fit: cover;
  border-radius:10px 10px 0 0;
  transition: 0.3s;
  vertical-align: bottom;

}
.map-store-links img:hover {
  opacity: 0.5;
  
}



/* カテゴリーリンク */


.category-links {
  display: flex;
justify-content: stretch;
  max-width:980px 



}

.category-links img {
  width: 100%;
  object-fit: cover;
  transition: 0.3s;
  vertical-align: bottom;
  border: solid;
  border-color: #fafae8;

}
.category-links img:hover {
  opacity: 0.5;
}



/* 新着情報リンク */


.blog-section {
  background-color: #fafae8;
  padding-top:2rem;
  padding-bottom:1rem;
  margin: 0 auto 2rem auto;
  max-width:980px;
  border-radius:0 0 10px 10px;
   border:solid;
   border-color:#002d75;
   border-left:transparent;
   border-right:transparent;
   border-bottom:transparent;


  

  }


.new-info {
  text-align: center;
  padding-bottom:0.5rem;
  color:red;
  font-size:1rem;
}

.new-info2 {
  text-align: center;
  padding-bottom:1rem;
  color:red;
  
}


.blog-list {
  
  max-width:500px;
  margin:0 auto;
  justify-content: center;
  gap: 3rem;
  transition:0.3s;
}

.blog-card {
  background-color: white;
 
  width: 90%;
  
  border-radius:3px;
  overflow: hidden;
  text-decoration: none;
  color: #303030;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
  margin:1rem auto;
}

.blog-content {
   
}

.blog-content h3 {
 font-size:16px ;
  padding: 0.5rem;
   display: flex;
}


.blog-card img {
  width: 100%;
  object-fit: cover;

}

.blog-list :hover {
  opacity:0.8;
}


/* おしらせ */

.features {
  max-width: 600px;
  margin:5rem auto 2rem auto;
}

.features h2 {
  text-align: center;
  color:white;
  
}

.features h3 {
  text-align: center;
  color: white;
 
  
}


.news-button {
  display:block;
  text-decoration: none;
  padding: 1rem 4rem;
  
  font-weight: bold;
  background: #0090ff;
  color: #303030;
  border-radius: 100vh;
  transition: background 0.3s;
　margin-bottom:1rem;
  margin-top: 2rem;
  margin-left:1rem;
  margin-right:1rem;
}

.news-button:hover {
  background: #aaddff;
 

}




/* フッター */



footer {
  background-color:#0090ff;
  color: white;
  text-align: center;
  padding: 1rem 0;
  positiom: absolute;
  bottom: 0;
  width: 100%;
}





/* レスポンシブデザイン */

    @media (max-width: 768px) {
      .menu img {
        width: 100%;
      }

      .middle-image img {
        width:100%;
      }
      .category-links img {
        width: 100%;
      
    }
}

    @media (max-width: 480px) {
      .menu img {
        width: 100%;
      }

      .middle-image img {
        width:100%;
      }
      .category-links img {
        width: 100%;
      
    }
}