/*
theme Name: moromie
Author: cosmospowerlab
Description: original theme
version： 2.0.0
*/
@charset "utf-8";
body {
  margin: 0;
  padding: 0;
  background: #FBF7EC;
}
a {
  text-decoration: none;
  color:#DC143C;
}
/* ヘッダー */
.header_area {
  position: fixed; /* 固定 */
  top: -10px; /* 一番上に表示 */
  width: 100%; /* 中央に表示 */
  background: white;
}
 
.header_block {
  
}
 
.header_box {
  width: 100%;
  margin: 0 auto;
}
 
.header_box h1 {
  margin: 0;
  padding: 20px 0;
  font-size: 34px;
  text-align: center;
}
 
/* コンテンツ */
.contents_area {
 /* width: 1200px;*/
  width:1024px;
  overflow: auto; /* スクロールする範囲を制御 */
  margin: 0 auto;
  padding: 100px 0 0 0px; /* コンテンツ上下にスペース */
}
 
.content_block {
  padding: 30px 10px;
  /*border: 1px solid #CCC;*/
}
 
/* フッター */
.footer_area {
  position: fixed; /* 固定 */
  bottom: 0; /* 一番下に表示 */
  width: 100%; /* 中央に表示 */
}
 
.footer_block {
color: white;
  background: black;
}
 
.footer_box {
  width: 100%;
  margin: 0 auto;
   /*font-size: 10px;*/
}
 
.footer_box p {
  margin: 0;
  padding: 20px 0;
  font-size: 16px;
  text-align: center;
}
 
/* IE6 */
html,
body {
  _height: 100%;
  _overflow: hidden;
}
 
.header_area,
.footer_area {
  _position: absolute;
}
 
.header_block,
.footer_block {
  _margin-right: 17px; /* IE6のスクロールバーの幅分のスペース */
}

.contents_wrap {
  _width: 100%;
  _height: 100%;
  _overflow: auto;
}




img{border-radius: 12px;}


/*swiper-caption*/
.swiper-container{
/*width:100%;*/
width:1024px;
/*text-align:center;*/
}
p.swiper-caption {
    z-index: 1;
    position: absolute;
    color: #FFF;
    font-weight: 100;
    font-size: 1.6em;
    line-height: 120%;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 5%;
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    text-shadow: 1px 1px 0 #333, -1px -1px 0 #333, -1px 1px 0 #333, 1px -1px 0 #333, 0px 1px 0 #333, 0-1px 0 #333, -1px 0 0 #333, 1px 0 0 #333;
}
/* menu */
.menu {
    list-style: none;
    /*padding: 20px 0 0 0;*/
    /*margin: 0 10px;*/
}
.menu li {
  /*width: 100px;*/
  text-align: center;
  float: left;
  margin:16px 0 0 16px;
}
.menu li a {
  text-decoration: none;
}
.current_page_item{
border-bottom:1px Salmon solid;
}
.watermark{
width:120px;
}
.release{}
.release_products{}
/* products thumb nail  */
.img-wrap{width:100%;position: relative;}
.img-wrap img{object-fit: cover;width:240px;height:160px;}
.genre-data{position: absolute;bottom: 0;left: 0;color:black;background-color:yellow;overflow:hiiden;}
.genre-data a{color:black;text-decoration: none;}
.cat-data{position: absolute;bottom: 0;right: 0;color:white;background-color:red;overflow:hiiden;padding:0 2px;}
.cat-data a{color:white;text-decoration: none;padding:0 2px;}
/* ranking */
.ranking_block{position: relative;width: 100%;}
.ranking_block  img{object-fit: cover;width:180px;height:100px;position: relative;}
.ranking_block span{position: absolute;top: -40px;left: 0;color:white;background-color:red;padding:0 2px;}
/* */
.content_body{float:left;width:75%;}
.content_side{float:right;width:20%;}
/*  */
.products_categories ul{list-style:none;}
.products_categories ul li{border-bottom:1px solid #eee;}
.products_categories ul li::before {content: "»";}
/*  */
.products_thumb_area{float:left;margin:5px;} //functions.php
/*  function get_product_detail($pid) */
.fbi_toggle_css{cursor: pointer;text-decoration: none;}
.fbi_toggle_data_css{display:none;border: 1px solid #888;padding:5px;border-radius: 5px;}
.aff_toggle_css{cursor: pointer;text-decoration: none;}
.aff_toggle_data_css{display:none;border: 1px solid #888;padding:5px;border-radius: 5px;}
.bloginfo{padding:0 20px;}
.ez-toc-list{border:1px solid #CCC;padding:10px;border-radius: 5px;list-style:none;}
.ez-toc-list ul{}
.special{border:1px solid #CCC;padding:10px;border-radius: 5px;}
.free_img{object-fit: cover;width:240px;height:160px;border-radius: 5px;margin:5px;}
/* mobile */
@media (max-width: 1024px) {
	.header_area {
	  width: 100%; /* 中央に表示 */
	  background: white;
	}
	.contents_area {width: 100%;	}
	.footer_area {
	/*display:none;*/
	  width: 100%; /* 中央に表示 */
	}
	.footer_box {
	display:none;
	}
	.copyright{}
	.images_thumb{width:100%;}
	.img-wrap{}
	.img-wrap img{object-fit: cover;width:100%;height:100%;}
	/*.content_side {display:none;}*/
	.content_side {width:100%;}
	.products_releted {display:none;}
	.content_body {width:100%;}
	.products_thumb_area {float: left;margin: 5px;width: 100%;}
}
/* ハンバーガーメニュー */
.header {
  display: flex;
  justify-content: space-between;
  background: #FFF;
  padding: 50px 20px 0 20px ;
  .logo {
    font-size: 20px;
  }
}
.nav-button {
  display: none;
}
.nav {
  a {
    color: #000;
    text-decoration: none;
    font-size: 14px;
    color: #448aff;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
}
.nav-wrap.open {
  display: block;
}
.nav-wrap.close {
  display: none;
}
.tb_block{display:  table;border:1px solid #CCC;padding:10px;border-radius: 5px;}
.tb_label{float:left;display:table-column;width:30%;font-weight:bold;}
.tb_wide{float:left;display:table-column;width:100%;margin:10px 0;}
.tb_value{float:right;display:table-column;width:70%;}
.tb_value1{float:left;display:table-column;width:30%;}
.tb_value2{float:right;display:table-column;width:30%;}
				
.div_table{display: table;border:1px solid #CCC;padding:10px;border-radius: 5px;}
.div_tr{display: inline-block;width:100%;height:100%;padding:5px;}
.div_th{float:left;display:table-cell;width:30%;font-weight:bold;padding:5px;}
.div_th1{float:left;display:table-cell;width:100%;font-weight:bold;padding:5px;}
.div_th2{float:left;display:table-cell;width:70%;font-weight:bold;padding:5px;}
.div_th3{float:left;display:table-cell;width:30%;font-weight:bold;padding:5px;}
.div_th4{float:left;display:table-cell;width:25%;font-weight:bold;padding:5px;}
.div_td{float:right;display:table-cell;width:70%;padding:5px;}
.div_td1{float:right;display:table-cell;width:100%;padding:5px;}
.div_td2{float:left;display:table-cell;width:50%;padding:5px;}
.div_td3{float:left;display:table-cell;width:32%;padding:5px;}
.div_td3r{float:right;display:table-cell;width:32%;padding:5px;}
.div_td4{float:left;display:table-cell;width:25%;padding:5px;}
.div_td5{float:left;display:table-cell;width:20%;padding:5px;}
.wp-pagenavi a{width:20px;display: inline-block;background: #CCC;text-align:center;border: 1px solid #000;margin:2px;}
.wp-pagenavi span{width:20px;display: inline-block;text-align:center;border: 1px solid #000;margin:2px;}
/* products detail */
.images_thumb{width:100%;height:auto;text-align:center;}
.images_thumb img{float:left;width:15%;height:auto;margin:1px 2px;border-radius: 5px;border: 1px solid #FFF;}
#toc-container{margin:10px 0;padding:10px;border-radius: 5px;border: 1px solid #CCC;}
.products_block{float:left;margin:5px;}
a.anchor {
    display: block;
    padding-top:100px;
    margin-top: -100px;
}

@media screen and (min-width: 481px) {
  .nav-wrap {
    display: block !important;
  }
}
.content {
  padding: 20px;
}
.notice_detail{border: 1px solid #000; border-radius: 5px;padding: 5px;}
.profile_label{font-weight: bold;}
@media screen and (max-width: 480px) {
.bloginfo {
  display: none;
}
  .nav-button {
    display: block;
    cursor: pointer;
      background: #aaa;
  }
  .nav-wrap {
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    z-index: 10;
    /*background-color: rgba(0, 0, 0, 0.7);*/
    background: #FFF;
    width: 100%;
   /* height: 100%;*/
   }
    .nav {
      height: 100%;
      position: relative;
      overflow-x: hidden;
      overflow-y: auto;
    }
    li {
      display: block;
      margin: 2em;
      a {color: #000;font-size: 18px;}
    }
  }
  /*メニューボタン*/
  .nav-button,
  .nav-button span {
    display: inline-block;
    transition: all 0.4s;
    box-sizing: border-box;
  }
  .nav-button {
    z-index: 20;
    position: relative;
    width: 40px;
    height: 36px;
    background-color: #FFF;
  }
  .nav-button span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #000;
    border-radius: 4px;
  }
  .nav-button span:nth-of-type(1) {
    top: 0;
  }
  .nav-button span:nth-of-type(2) {
    top: 16px;
  }
  .nav-button span:nth-of-type(3) {
    bottom: 0;
  }
  .nav-button.active span:nth-of-type(1) {
    -webkit-transform: translateY(16px) rotate(-45deg);
    transform: translateY(16px) rotate(-45deg);
  }
  .nav-button.active span:nth-of-type(2) {
    opacity: 0;
  }
  .nav-button.active span:nth-of-type(3) {
    -webkit-transform: translateY(-16px) rotate(45deg);
    transform: translateY(-16px) rotate(45deg);
  }
}