@charset "UTF-8";


/* =====================================================
 * ページ全体
 * ===================================================== */


body, nav, section, header, main, footer, h1, h2, p, ul, li, dl, dt, dd, div, table, input, textarea, select {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  margin: 0;
  padding: 0;
  color: #666;
  font-size: 1rem;
  line-height: 160%;
  user-select: none; /* 選択させない設定 */
  -webkit-user-select: none;
  -ms-user-select:  none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
}


img {
  width: 100%;
  border: 0;
  vertical-align: middle;
}


/* -------------------------
 * リンクの全体の装飾
/* ------------------------- */
a {
  text-decoration: underline;
  color: #666;
}


a:hover {
  filter: alpha(opacity=60); /* IE 6,7 */
  -ms-filter: "alpha(opacity=60)"; /* IE 8,9 */
  -moz-opacity: 0.6; /* 古いFirefox */
  -khtml-opacity: 0.6; /* 古いSafari */
  opacity: 0.6;
  zoom: 1; /* IE */
  /* transitionを使ってゆっくり半透明にする設定 */
  -webkit-transition: 0.3s ease-in-out; /* Google,Chrome,Safari */
  -moz-transition: 0.3s ease-in-out; /* Firefox */
  -o-transition: 0.3s ease-in-out; /* Opera */
  -ms-transition: 0.3s ease-in-out; /* IE */
  transition: 0.3s ease-in-out;
}


/* -------------------------
 * 画像のリンクの装飾
/* ------------------------- */
a img.css-hover {
  filter: alpha(opacity=100); /* IE 6,7 */
  -ms-filter: "alpha(opacity=100)"; /* IE 8,9 */
  -moz-opacity: 1.0; /* 古いFirefox */
  -khtml-opacity: 1.0; /* 古いSafari */
  opacity: 1.0;
  zoom: 1; /* IE */
}


a:hover img.css-hover {
  filter: alpha(opacity=60); /* IE 6,7 */
  -ms-filter: "alpha(opacity=60)"; /* IE 8,9 */
  -moz-opacity: 0.6; /* 古いFirefox */
  -khtml-opacity: 0.6; /* 古いSafari */
  opacity: 0.6;
  zoom: 1; /* IE */
  /* transitionを使ってゆっくり半透明にする設定 */
  -webkit-transition: 0.3s ease-in-out; /* Google,Chrome,Safari */
  -moz-transition: 0.3s ease-in-out; /* Firefox */
  -o-transition: 0.3s ease-in-out; /* Opera */
  -ms-transition: 0.3s ease-in-out; /* IE */
  transition: 0.3s ease-in-out;
}


/* =====================================================
 * ヘッダー
 * ===================================================== */


#top {
  position: relative;
  width: 90%;
  margin:0 auto;
  padding-top: 20px;
  overflow: hidden;
}


#logo {
  float: left;
}


.logoImg { /* ロゴ画像の位置調整 */
  vertical-align: top;
  width: 100px;
  height: 25px;
}


#logo p {
  display: inline-block;
  margin: 0;
  font-size: 80%;
  font-weight: bold;
  line-height: 110%;
  color: #ccc;
  margin-left: 0.5rem;
}


/* -------------------------
 * ハンバーガーアイコン
/* ------------------------- */


.cp_cont {
  float: right;
}


.cp_cont ol, ul {
  list-style: none;
}


.cp_cont a {
  text-decoration: none;
}


.cp_cont :before, :after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


.cp_offcm01 {
  position: absolute;
  top: 10px;
  right: 0;
  display: inline-block;
}


/* menu */
.cp_offcm01 .cp_menu {
  position: fixed;
  top: 0;
  right: -100vw;
  width: 250px;
  cursor: pointer;
  -webkit-transition: 0.53s transform;
    transition: 0.53s transform;
  -webkit-transition-timing-function: cubic-bezier(.38,.52,.23,.99);
    transition-timing-function: cubic-bezier(.38,.52,.23,.99);
  background-color: #778899;
  opacity: 0.7;
  z-index: 1;
}


.cp_offcm01 .cp_menu ul {
  margin: 0;
  padding: 0;
}


.cp_offcm01 .cp_menu li {
  list-style: none;
}


.cp_offcm01 .cp_menu li a {
  display: block;
  padding: 20px;
  text-decoration: none;
  color: #ffffff;
  border-bottom: 1px solid #ffffff;
}


.cp_offcm01 #cp_toggle01 {
  position: absolute;
  display: none;
  opacity: 0;
}


.cp_offcm01 #cp_toggle01:checked ~ .cp_menu {
  -webkit-transform: translateX(-100vw);
    transform: translateX(-100vw);
}


/* menu toggle */
.cp_offcm01 #cp_toggle01 ~ label {
  display: block;
  padding: 0.5em;
  cursor: pointer;
  -webkit-transition: 0.5s transform;
    transition: 0.5s transform;
  -webkit-transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
    transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
  text-align: center;
  color: #333333;
}


/* ×印 */
.cp_offcm01 #cp_toggle01:checked ~ label {
  position: fixed;
  z-index: 1;
  -webkit-transform: translateX(-270px);
    transform: translateX(-270px);
}


.cp_offcm01 #cp_toggle01 ~ label::before {
  font-family: 'Font Awesome 5 Free';
  content: '\f0c9';
  font-size: 2em;
  font-weight: 900;
}


.cp_offcm01 #cp_toggle01:checked ~ label::before {
  content: '\f00d';
}


/* -------------------------
 * 上部のスクロールナビ
/* ------------------------- */
nav {
  clear: both;
  margin-top: 10px;
}


.horizontal_scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* ios系端末でもスムーズにスクロールできるようにする */
  white-space: nowrap;
  padding-bottom: 5px;
  display: -ms-flexbox;
  display: flex;
}


.horizontal_scroll li {
  list-style-type: none;
  padding: 0 5px;
  line-height: 110%;
  background-color: #F2F2F2;
  border-radius: 10px;
  margin-right: 0.3rem;
  display: inline-block;
}


.horizontal_scroll li:nth-child(1) {
  margin-left:10px;
}


.horizontal_scroll li:nth-last-child(1) { /* 後ろから数えて1番目 */
  margin: 0;
}


.horizontal_scroll li a {
  font-size: 70%;
  color: #666;
  text-decoration: none;
}


.horizontal_scroll li a::after {
  content: "▼";
  font-size: 60%;
  margin-left: 0.5em;
}


/* =====================================================
 * メインコンテンツ
 * ===================================================== */


main {
  padding-bottom: 50px;
  display: block; /* IE対策に追加 */
}


/* -------------------------
 * 本文のリード文
/* ------------------------- */
.lead {
  margin-bottom: 60px;
}


/* -------------------------
 * 幅90%にする設定
/* ------------------------- */
.width {
  width: 90%;
  margin: 0 auto;
}


/* =====================================================
 * メニューリスト
 * ===================================================== */


.menuTop {
  position: relative;
  padding: 10px;
  font-weight: bold;
  font-size: 1.2rem;
}


.menuTop p {
  margin: 0 0 5px 0;
  font-weight: normal;
  font-size: 70%;
  color: #ccc;
}


.menuList {
  width: 100%;
}


.window { /* label要素 */
  display: block;
  padding: 10px;
  border-top: 1px dotted #ccc;
  overflow: hidden; /* floatによるレイアウト崩れを防ぐ */
  }


.window:hover { /* オンマウスで半透明にする */
  opacity: 0.6;
  filter: alpha(opacity=60);
  transition: 0.3s ease-in-out; /* transitionを使ってゆっくり半透明にする設定 */
  -webkit-transition: 0.3s ease-in-out; /* Google,Chrome,Safari */
  -moz-transition: 0.3s ease-in-out; /* Firefox */
  -o-transition: 0.3s ease-in-out; /* Opera */
  -ms-transition: 0.3s ease-in-out; /* IE */
}


.window:after { /* clearfixの設定 */
  content: "";
  display: block;
  clear: both;
}


input[type="checkbox"].on-off {
  display: none;
  clear: both;
}


input[type="checkbox"].on-off + ul {
  display: none;
  list-style-type: none;
}


input[type="checkbox"].on-off:checked + ul {
  display: block;
  list-style-type: none;
}


.window img { /* カテゴリー画像 */
  float:left;
  margin-right: 10px;
  border-radius: 10px;
}


.categoryImg { /* カテゴリー画像の大きさの指定 */
  width: 50px;
  height: 50px;
}


.window span { /* label要素の中にブロック要素はいれられないため */
  display: block;
  margin: 0;
  line-height: 130%;
  font-weight: bold; /* カテゴリー名及び商品名のフォント調整 */
  overflow: hidden; /* 左の画像への回り込みを防ぐ */
}


.items {
  display: block;
  margin: 0;
  font-weight: normal;
  font-size: 70%;
  color: #ccc;
}


.type {
  display: block;
  margin:0;
  font-weight: normal;
  font-size: 70%;
  color: #ccc;
}


.productImg { /* 商品画像の大きさの指定 */
  width: 30px;
  height: 30px;
}


.article {
  list-style-position: outside; /* リストマーカーの表示位置を内側に指定する */
  margin: 0;
  padding: 0;
  list-style-image: url("../images/pen.png");
}


.article li {
  margin: 10px 0px 0px 30px;
  padding-right: 10px;
  border-bottom: 1px dotted #ccc;
  font-size: 80%;
}


.article li a {
  color: #666;
  text-decoration: none;
}


.article li:nth-last-child(1) {
  border-bottom: none;
  margin-bottom: 10px;
}


/* =====================================================
 * フッター
 * ===================================================== */


footer {
  position: relative;
  background-color: #2f3a44;
  height: 120px;
  padding-top: 50px;
  text-align: center;
}


footer a {
  text-decoration: none;
  color: #fff;
}


footer li { /* リストを横並びにする */
  list-style-type:none;
  display: inline;
  margin: 0 1rem;
}


.under { /* コビーライトの表記 */
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 0.5rem 0;
  background-color: #000000;
  text-align: center;
  font-size: 70%;
  color: #fff;
}


/* =====================================================
 * スペシャル
 * ===================================================== */


/* -------------------------
 * サイト下部の戻るボタン
/* ------------------------- */
#page-top {
  position: fixed;
  bottom: 15px;
  right: 15px;
  font-size: 200%;
  font-weight: bold;
  letter-spacing: 2px;
  opacity: 0.6;
  filter: alpha(opacity=60); /* IE 6,7 */
  -ms-filter: "alpha(opacity=60)"; /* IE 8,9 */
  -moz-opacity: 0.6; /* 古いFirefox */
  -khtml-opacity: 0.6; /* 古いSafari */
}


#page-top a {
  background: #666;
  text-decoration: none;
  color: #fff;
  padding: 5px 20px;
  text-align: center;
  display: block;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
}


#page-top a:hover {
  text-decoration: none;
  background: #999;
}


/* -------------------------
 * input
/* ------------------------- */
input[type="checkbox"] {
margin-right: 0.5em;
}