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


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

a {
   text-decoration:none;
   
}

a,a:visited {
   color:inherit;
}



/* ヘッダー */


header {
  color: white;
  font-size:12px ;
  padding:8px;
  background-color: rgb(90,180,250);
  height:28px;
}





/* メニューリンク */
.menu-links {
 }

.menu {
  display: flex;
  background-color: #fafae8;
  border:solid;
  border-color: #ffbd59;
  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;
   vertical-align: bottom;
}

.menu :hover img{
  opacity:0.5;
}





/* ロゴ */


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

}



/* ページ説明 */

.hello {
  background-color: white;
  color:#666;
  font-size:12px;
  max-width: 980px; 
  border-radius: 5px;
  margin: 10px auto;
  padding:9px 9px;

}




/* カード一覧 */


.main-content {
  display: flex;
  margin:0 auto 10px auto;
  max-width: 980px;
}

/* ストアコンテナ */


.store-container {
  width:100%;
  background-color:white;
  border-radius:5px ;  
}

.store-container-head {
  color:#9d5010;
  background-color:#ffffff;
  height:30px;
  font-size:16px ;
  border-radius:5px 5px 0 0;
  border:solid;
  border-color:#ffbd59;
  border-top:transparent;
  border-left:transparent;
  border-right:transparent;
  
}

.store-container-head h1{
  padding:7px 12px;
  color:#9d5010;
  font-size:16px ;
}

.store-container h3 {
   padding:1rem;
   line-height:1.6;
   font-size:clamp(14px,1vw,16px) ; 
}


.store-container p {
   padding:1rem;
   line-height:1.6;
   font-size:clamp(8px,1vw,14px) ; 
}

.store-container a {
   color: blue;
   text-decoration: underline;
   
}

.store-container a:hover {
   color: darkblue;
   font-weight: bold;
   text-decoration: none; 
}



/* 問合せフォーム */
#contact {
  margin-left:2rem;
  line-height:1.6;
  font-size:clamp(8px,1vw,14px) ;

}






/* サイドバー */
.sidebar {
  width:25%;
  margin: 0 0 0 10px;
  border-radius: 5px;
}


.sidebar-head {
  height:30px;
  background-color: white;
  color:#9d5010;
  font-size:clamp(10px,1vw,16px) ;
  font-weight: bold;
  border-radius: 5px 5px 0 0;
  border:solid;
  border-color:#ffbd59;
  border-top:transparent;
  border-left:transparent;
  border-right:transparent;

}

.sidebar-head img {
  height:27px;
  object-fit: contain;
vertical-align: bottom;

}

.sidebar h3 {
  

}

.sidebar ul {
  background-color: #f8f9fa;
  list-style: none;
  border-radius: 0 0 5px 5px;
 
}

.sidebar ul li {
  margin: 0;
}

.sidebar ul li :hover {
  opacity:0.7;
}

.sidebar img {
  width:100%;
  vertical-align: bottom;
}

.sidebar-banner {
  
  background-color: #f8f9fa;
  border-radius: 5px 5px 5px 5px;

}

.sidebar-banner img {
  border-radius: 5px 5px 5px 5px;
}


footer {
  background-color: rgb(90,180,250);
  color: white;
  font-size:12px;
  text-align: center;
  padding: 1rem 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%;
      
    }
}