@charset "UTF-8";
/* CSS Document */
html {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 font-size: 62.5%; /* fontsize:10px */
 color: rgba(110, 110, 110, 1);
 font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
body {
 background: #F4F4F4;
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 font-size: 1.6rem;
 line-height: 2rem;
 letter-spacing: 0.02em;
}
a {
 cursor: pointer;
}
* {
 transition: all 0.2s ease-out allow-discrete;
}
/*- タイトル --------------------- */
#title {
 width: 100%;
 margin: 0;
 padding: 200px 0;
 position: relative;
}
#title h1 {
 margin: 0 auto;
 font-weight: normal;
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
}
#title h1 p {
 width: auto;
 margin: 0 auto;
 padding: 0;
 font-size: 3rem;
 color: #BBB;
 white-space: nowrap;
}
/*- ナビゲーション --------------------- */
#nav {
 margin: 50px 0 0 0;
 padding: 0;
 border-top: 1px dotted rgba(0, 0, 0, .1);
}
#nav ul {
 width: 960px;
 margin: 0 auto;
 padding: 10px 0;
 list-style: none;
 display: flex;
 flex-wrap: wrap;
}
#nav ul li {
 margin: 0 10px 0 0;
 font-size: 1.2rem;
}
#nav ul li:first-child {
 margin: 0 30px 0 0;
 padding: 0 30px 0 0;
 border-right: 1px solid rgba(0, 0, 0, .2);
 font-weight: bold;
}
#nav ul li:nth-child(3)::before {
 content: "»";
 margin: 0 10px 0 0;
 color: #777;
}
#nav ul a {
 text-decoration: none;
}
#nav ul a:hover {
 opacity: .7;
}
/*- リスト --------------------- */
#productList {
 background: #E8E8E8;
 margin: 0;
 padding: 100px 0 20px 0;
}
#productList ul#categoryUl {
 background: #FFF;
 width: 960px;
 margin: 0 auto;
 padding: 20px;
 display: flex;
 flex-wrap: wrap;
 list-style: none;
 justify-content: center;
 border-radius: 2px;
}
#productList ul#categoryUl li {
 margin: 0 30px 0 0;
 padding: 0 30px 0 0;
 border-right: 1px solid rgba(0, 0, 0, .2);
 font-size: 1.4rem;
}
#productList ul#categoryUl li:last-of-type {
 margin: 0;
 padding: 0;
 border-right: none;
}
#productList ul#categoryUl li a {
 color: rgba(110, 110, 110, 1);
 text-decoration: none;
}
#productList ul#categoryUl li a:hover {
 text-decoration: underline;
}
#productList ul#categoryUl li a.active {
 font-weight: bold;
 text-decoration: underline;
}
#productList ul#listUl {
 width: 1040px;
 padding: 0;
 margin: 80px auto 0;
 display: flex;
 flex-wrap: wrap;
 list-style: none;
}
#productList ul#listUl li {
 width: 180px;
 margin: 0 40px 80px;
}
#productList ul#listUl li a {
 width: 100%;
 display: block;
 aspect-ratio: 1 / 1;
 border-radius: 2px;
}
#productList ul#listUl li a:hover {
 opacity: .7;
}
#productList ul#listUl li h2 {
 margin: 20px 0 5px 0;
 padding: 0;
 font-size: 1.6rem;
 font-weight: normal;
}
#productList ul#listUl li p {
 margin: 0;
 padding: 0;
 font-size: 1.2rem;
 line-height: 1;
 color: rgba(120, 120, 120, 1);
 letter-spacing: -0.05rem;
}
/*- フッター --------------------- */
#footer {
 text-align: center;
 margin: 0;
 padding: 50px 0;
 line-height: 1;
 font-size: 1.4rem;
}
@media screen and (max-width:1039px) {
 /*- ナビゲーション --------------------- */
 #nav ul {
  width: 700px;
 }
 /*- リスト --------------------- */
 #productList ul#categoryUl {
  width: 700px;
 }
 #productList ul#listUl {
  width: 780px;
 }
}
@media screen and (max-width:779px) {
 /*- タイトル --------------------- */
 #title {
  width: 100%;
  margin: 0;
  padding: 200px 0;
  position: relative;
 }
 #title h1 {
  margin: 0 auto;
  font-weight: normal;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
 } /*- ナビゲーション --------------------- */
 #nav ul {
  width: 440px;
 }
 #nav ul li:first-child {
  margin: 0 20px 0 0;
  padding: 0 20px 0 0;
 }
 /*- リスト --------------------- */
 #productList ul#categoryUl {
  width: 440px;
 }
 #productList ul#categoryUl li {
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
 }
 #productList ul#listUl {
  width: 520px;
 }
}
@media screen and (max-width:520px) {
 /*- タイトル --------------------- */
 #title {
  padding: 100px 0;
 }
 #title h1 p {
  white-space: normal;
 }
 /*- ナビゲーション --------------------- */
 #nav ul {
  width: calc(100% - 40px);
  margin: 0 auto;
 }
 #nav ul li:first-child {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
 }
 /*- リスト --------------------- */
 #productList {
  padding: 50px 0 20px 0;
 }
 #productList ul#categoryUl {
  width: calc(100% - 40px);
  padding: 10px 5px;
 }
 #productList ul#categoryUl li {
  margin: 0 5px 0 0;
  padding: 0 5px 0 0;
  font-size: 1.2rem;
 }
 #productList ul#listUl {
  width: calc(100% - 20px);
  margin: 50px 10px 0;
 }
 #productList ul#listUl li {
  width: calc((100% - 40px)/2);
  margin: 0 10px 50px;
 }
 #productList ul#listUl li h2 {
  margin: 15px 0 5px 0;
  font-size: 1.4rem;
 }
 #productList ul#listUl li p {
  font-size: 1.1rem;
 }
}