@charset "UTF-8";

/* INDEX
-------------------------------------------
1. layout
2. link
3. header
4. content
5. product list
6. footer
7. ham-menu
8. background
-------------------------------------------*/


/* 1. layout
-------------------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  color: #fff;
  background: #000;
  line-height: 1.6;
  font-size: 1rem;
  font-family: 'Noto Sans Japanese', sans-serif;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

#wrapper {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

#contents {
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative;
}

#maincol {
  margin: 0 auto 30px auto;
  padding: 0;
  width: 100%;
  position: relative;
}

#maincol h2 {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  font-family: "a-otf-ud-reimin-pr6n", sans-serif;
  font-size: 1.3rem;
}

#maincol p {
  margin: 0 auto;
  width: 100%;
  max-width:800px;
  text-align: center;
  font-family: "a-otf-ud-reimin-pr6n", sans-serif;
  font-size: 1.1rem;
}

@media screen and (max-width: 800px) {
.w800 {display:none;}
}

.nobr {
white-space: nowrap;
}

/* 2. link
-------------------------------------------*/
a:link,
a:visited {
  color: #f4fdbe;
  text-decoration: underline;
}

a:hover,
a:active {
  color: #307dea;
  text-decoration: none;
}


/* 3. header
-------------------------------------------*/
#wrap_head {
  margin: 0;
  padding: 10px 0;
  width: 100%;
  position: relative;
  border-bottom: 5px solid rgb(0, 0, 50);
  background: #eee;
}

#header {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  height: auto;
  position: relative;
}

#tn-top {
  margin: 0;
  padding: 0;
  position: relative;
  width: 133px;
  left: 1em;
  top: 0;
}

.logo {
  max-width: 25vw;
  max-height: 30px;
}


/* 4. content
-------------------------------------------*/
.wrap_main01 {
  margin: 10px auto;
  padding: 0 5px;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.wrap_main02 {
  margin: 10px auto;
  padding: 0 5px;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.wrap_main03 {
  margin: 10px auto;
  padding: 0 5px;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.wrap_main04 {
  margin: 10px auto;
  padding: 0 5px;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  overflow: hidden;
}


/* 5. product list
-------------------------------------------*/
ul.buy {
  box-sizing: border-box;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}

ul.buy li {
  margin: 5px 0;
  width: calc(33% - 5px);
}

ul.buy li a {
  background: #000;
  display: block;
  text-decoration: none;
}

ul.buy li a h3 {
  padding: .5em;
  text-align: right;
  color: #fff;
  font-size: small;
  font-weight: bold;
}

ul.buy li:hover > a {
  background: #5a5a5a;
}


/* 6. footer
-------------------------------------------*/
#wrap_foot {
  position: relative;
  margin: 0;
  padding: 10px 0;
  width: 100%;
  background: rgb(47, 46, 46);
}

.footer {
  position: relative;
  bottom: 0;
  margin: 0 auto;
  width: 100%;
}

.txt_copy_l {
  padding: 5px 0 5px 10px;
  text-align: left;
  font-family: Verdana;
  font-size: 75%;
}

.txt_copy_r {
  padding: 5px 10px;
  text-align: center;
  font-family: Verdana;
  font-size: 75%;
}

/* ページTOPへ戻るボタン（backtotop.js が生成） */
#page-top {
  position: fixed;
  bottom: 200px;
  right: 10px;
  z-index: 100;
  opacity: .4;
}

#page-top:hover {
  opacity: 1;
}


/* 7. ham-menu
-------------------------------------------*/
#ham-menu {
  background-color: #fff;
  box-sizing: border-box;
  height: 100%;
  padding: 10px 0;
  position: fixed;
  right: -300px;              /* width と合わせる */
  top: 0;
  transition: transform .3s linear 0s;
  width: 300px;
  z-index: 1000;
  color: #333;
}

#ham-menu ul li a {
  display: block;
  padding: 10px 40px;
  border-bottom: 1px #ccc dotted;
}

#ham-menu ul li a:link,
#ham-menu ul li a:visited,
#ham-menu ul li a:active {
  color: #333;
  text-decoration: none;
}

#ham-menu ul li a:hover {
  background-color: #d1ccff;
}

#menu-background {
  background-color: #333;
  display: block;
  height: 100%;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: all .3s linear 0s;
  width: 100%;
  z-index: -1;
}

#menu-icon {
  background-color: #fff;
  border-radius: 0 0 0 10px;
  color: #333;
  cursor: pointer;
  display: block;
  font-size: 50px;
  height: 50px;
  line-height: 50px;
  position: fixed;
  right: 0;
  text-align: center;
  top: 0;
  width: 50px;
  transition: all .3s linear 0s;
  z-index: 1000;
}

#menu-cb {
  display: none;
}

#menu-cb:checked ~ #ham-menu,
#menu-cb:checked ~ #menu-icon {
  transform: translate(-300px);   /* #ham-menu の width と合わせる */
}

/* ハンバーガーアイコン（3本線）*/
#menu-icon span,
#menu-icon span::before,
#menu-icon span::after {
    background: #333;          /* 線の色 */
    height: 3px;               /* 線の太さ */
    width: 26px;               /* 線の長さ */
    transition: transform 0.3s linear, top 0.3s linear, background 0.3s linear;
}

#menu-icon span {
    position: absolute;        /* #menu-icon は fixed なので基準になる */
    top: 50%;
    left: 50%;
    margin: -1.5px 0 0 -13px;  /* 中央寄せ（高さ・幅の半分）*/
}

#menu-icon span::before,
#menu-icon span::after {
    content: '';
    position: absolute;
    left: 0;
}

#menu-icon span::before { top: -9px; }  /* 上の線 */
#menu-icon span::after  { top: 9px; }   /* 下の線 */

/* メニューを開いているとき：× に変形 */
#menu-cb:checked ~ #menu-icon span {
    background: transparent;   /* 真ん中の線を消す */
}

#menu-cb:checked ~ #menu-icon span::before {
    top: 0;
    transform: rotate(45deg);
}

#menu-cb:checked ~ #menu-icon span::after {
    top: 0;
    transform: rotate(-45deg);
}

#menu-cb:checked ~ #menu-background {
  opacity: .5;
  z-index: 999;
}


/* 8. background
-------------------------------------------*/
#js-particles {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  background: #000;
}