@charset "UTF-8";

html {
  font-size: 100%;
}

body {
  color: #333333;
  font-size: 0.875rem;
  min-height: 100vh;
  position: relative;
}

a {
  color: #333;
  text-decoration: none;
  transition: all 0.5s; /* 0.5秒かけて変化させるプロパティ */
}

a:hover {
  opacity: 0.7; /* マウスを乗せたときに透明度を70%にするプロパティ */
}

img {
  max-width: 100%;
  height: auto;
}

li {
  list-style: none;
}

/*
コンテンツ幅を設定するための共通クラス
*/

.wrapper {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
}

/* その他のページの余白 */
.content {
  padding-top: 120px;
  padding-bottom: 160px;
}

.site-title a {
  width: 180px;
  line-height: 1px;
  display: block; /* リンクをブロック要素にして幅や高さを効かせる値 */
}

.page-title {
  font-size: 0.875rem;
  font-weight: normal;
  margin-bottom: 30px;
}

/*-------------------------------------------
ヘッダー
-------------------------------------------*/

#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 10;
  width: 100%;
}

/*
ハンバーガーメニュー
メニューが閉じている時は、「left: -300px;」で画面左に隠し、
「opacity: 0;」で非表示にしている
*/

/* メニューが閉じている時（初期状態） */
#navi {
  position: fixed;
  top: 0;
  left: -300px; /* 300pxのメニューを画面の左外にぴったり隠す数値 */
  width: 300px;
  transition: all 0.5s; /* 0.5秒かけて動かす */
  opacity: 0; /* 最初は透明 */
  color: #fff;
  padding: 36px 50px;
  z-index: 20;
}

#navi a {
  color: #fff;
}
#navi li {
  margin-bottom: 14px;
}

/* メニューが開いている時（JSで.openがついた時） */
.open #navi {
  left: 0; /* 画面の左端ぴったりに合わせて出現させるプロパティ */
  opacity: 1; /* 不透明にして見えるようにする */
}

.toggle_btn {
  width: 30px;
  height: 30px;
  position: relative; /* 中の線を自由に動かすための基準の箱にする */
  cursor: pointer; /* マウスを乗せたら指マークにする */
  z-index: 20; /* メニューより手前に表示する */
  transition: all 0.5s;
}

.toggle_btn span {
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: #333;
  transition: all 0.5s;
  border-radius: 4px;
}

/* 1本目の線の位置を設定 */
.toggle_btn span:nth-child(1) {
  top: 10px; /* 上から10pxの位置に配置 */
}

/* 2本目の線の位置を設定 */
.toggle_btn span:nth-child(2) {
  bottom: 10px; /* 下から10pxの位置に配置 */
}

/*
ハンバーガーメニューの線の設定（メニューが開いている時）
線の色を白に変更
*/
.open .toggle_btn span {
  background-color: #fff;
}

/* 1本目の線を移動＆回転させるプロパティ */
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(4px) rotate(-45deg);
  transform: translateY(4px) rotate(-45deg);
}

/* 2本目の線を移動＆回転させるプロパティ */
.open .toggle_btn span:nth-child(2) {
  -webkit-transform: translateY(-4px) rotate(45deg);
  transform: translateY(-4px) rotate(45deg);
}

/* 初期状態は非表示 */
#mask {
  display: none;
  transition: all 0.5s;
}

/* メニューを開いている時（JSで.openがついた時） */
.open #mask {
  display: block; /* 画面に表示させる（noneの解除） */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; /* 画面の横幅いっぱいに広げる */
  height: 100%; /* 画面の縦幅いっぱいに広げる */
  background: #000;
  opacity: 0.8; /* ほんのり透けさせる */
  z-index: 10; /* メニュー本体（20）よりは奥、コンテンツよりは手前 */
  cursor: pointer;
}

/*-------------------------------------------
TOP、PRODUCTS
-------------------------------------------*/

/* トップページの余白 */
#top {
  padding-top: 80px;
  padding-bottom: 160px;
}

.product-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 横に「4列」均等に並べるプロパティ */
  gap: 35px; /* 商品と商品の間の「すき間」をあけるプロパティ */
}

.product-list img {
  margin-bottom: 10px;
  vertical-align: top; /* 画像の垂直方向の基準を「上端」に合わせて隙間を消す値 */
}

.product-list p {
  font-size: 0.75rem; /* 文字の大きさを指定するプロパティ */
}

.link-text {
  display: block;
  margin-top: 40px;
  text-align: center;
}

.pagination {
  display: flex;
  justify-content: center; /* 要素を水平方向の「中央」に寄せるプロパティ */
  margin-top: 40px;
}

.pagination li {
  padding: 0 20px; /* 上下は0、左右に20pxの「内側の余白」を作るプロパティ */
}

/*-------------------------------------------
ITEM
-------------------------------------------*/
#item {
  max-width: 800px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}

#item .item-img {
  width: 50%;
}

#item .item-text {
  width: 42%;
}

#item .item-text p {
  margin-bottom: 30px;
  text-align: justify;
}

#item .item-text dl {
  display: flex;
  flex-wrap: wrap; /* 横幅が溢れたら次の行に折り返す設定 */
}

#item .item-text dt {
  width: 30%; /* 左側の「項目名」の横幅 */
}

#item .item-text dd {
  width: 70%; /* 右側の「内容」の横幅（dtと足して100%になる） */
}

/*-------------------------------------------
ABOUT
-------------------------------------------*/

#about {
  max-width: 600px; /* 横幅が広がりすぎないように制限 */
}

#about p {
  line-height: 1.9; /* 行の間隔（行高）を1.9倍に広げるプロパティ */
  margin-bottom: 30px; /* 段落ごとの下の余白をあけるプロパティ */
}

/*-------------------------------------------
COMPANY
-------------------------------------------*/

#company {
  max-width: 600px;
}

#company dl {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

#company dt {
  width: 30%;
  border-bottom: solid 1px #dcdbdb;
  padding: 20px 10px; /* 線と文字の間に「内側の余白」を作るプロパティ */
}

#company dt:last-of-type {
  border-bottom: none;
}

#company dd {
  width: 70%;
  border-bottom: solid 1px #dcdbdb;
  padding: 20px 10px;
}

#company dd:last-of-type {
  border-bottom: none;
}

#company .map {
  /* グーグルマップを白黒（グレースケール）にする特殊な設定 */
  filter: grayscale(1);
}

#company .map iframe {
  width: 100%;
  height: 300px;
  border: 0;
}

/*-------------------------------------------
フッター
-------------------------------------------*/
#footer {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 20px; /* 画面の「底（下端）」から20pxの位置に固定 */
  left: 0;
  right: 0;
}

#footer .menu {
  display: flex;
}
#footer .menu li {
  font-size: 0.75rem;
  margin-right: 30px;
}
#footer .copyright {
  font-size: 0.625rem;
}

/*-------------------------------------------
SP（画面幅900px以下のときの設定）
-------------------------------------------*/
@media screen and (max-width: 900px) {
  /* ① トップ・一覧ページの商品リストを「2列」にする */
  .product-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 20px;
  }

  /* ② 商品詳細ページの画像とテキストを「縦並び」にする */
  #item {
    flex-direction: column; /* 子要素を上から下に縦並びにする設定 */
  }
  #item .item-text {
    width: 100%;
  }
  #item .item-img {
    width: 100%;
    margin-bottom: 30px;
  }
  /* ③ 会社概要の表も「縦並び」にする */
  #company dl {
    flex-direction: column;
  }
  #company dt {
    width: 100%; /* 横幅いっぱいに広げる */
    border-bottom: none;
    padding-bottom: 5px;
  }
  #company dd {
    width: 100%; /* 横幅いっぱいに広げる */
    padding-top: 5px;
  }
  #footer {
    flex-direction: column;
  }

  #footer .menu {
    margin-bottom: 5px;
  }
}