@charset "UTF-8";
/*
アコーディオン
*/

.listAccordion label {
  background: #ffffff;
  padding: 6px 10px;
  display: block;
  cursor: pointer;
}
.listAccordion label:hover {
  background: #ffffff;
}
.listAccordion input[type="checkbox"].on-off {
  display: none;
}
.listAccordion .listTips {
  background: #ffffff;
  margin: 0;
  padding: 0;
  border-top: 1px solid #ededed;
}
.listAccordion input[type="checkbox"].on-off + .listTips {
  height: 0;
  overflow: hidden;
}
.listAccordion input[type="checkbox"].on-off:checked + .listTips {
  height: auto;
}

/* 広告枠背景 */
ins {
  background: none;
}

/* 口コミメモ */
.memox{
   position:relative;
   background:#fffde7;
   width:85%;
   margin:2em auto;
   padding:1.5em 1em;
   transform: rotate(-2deg);
   box-shadow:1px 1px 4px rgba(0,0,0,0.2);
   color:#795548;
}
.memox::before{
   content:'口コミ・レビュー';
   position:relative;
   display:inline-block;
   border-bottom:3px solid #795548;
   border-radius: 0 0 40% 5% / 0 0 15% 20%;
   padding:0 1em 0.1em 0.2em;
   font-size:110%;
   font-weight:bold;
   transform: rotate(-5deg);
}
.memox::after{
   content:'';
   position:absolute;
   left:50%;
   top:-15px;
   margin-left:-75px;
   width:150px;
   height:30px;
   background:rgba(245,245,245,0.7);
   box-shadow:1px 1px 4px rgba(0,0,0,0.2);
   transform: rotate(-4deg);
}
.memox ol{
   margin:1em 0.5em 0 2em;
   padding:0 0 0 0;
}
.memox ol li{
   margin-bottom:0.5em;
}



/*レーティング */

.rate {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 16px;
  font-size: 16px;
}
.rate:before, .rate:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '★★★★★';
  display: inline-block;
  height: 16px;
  line-height: 16px;
}
.rate:before {
  color: #ddd;
}
.rate:after {
  color: #ffa500;
  overflow: hidden;
  white-space: nowrap;
}

.rate0:after {
  width: 0;
}

.rate1:after {
  width: 16px;
}

.rate1-5:after {
  width: 24px;
}

.rate2:after {
  width: 32px;
}

.rate2-5:after {
  width: 40px;
}

.rate3:after {
  width: 48px;
}

.rate3-5:after {
  width: 56px;
}

.rate4:after {
  width: 64px;
}

.rate4-5:after {
  width: 72px;
}

.rate5:after {
  width: 80px;
}

.wrap {
  width: 80px;
  margin: 0 auto;
}

/* 画像枠線 */
#text1 > p > img, 
#text2 > p > img, 
#text3 > p > img, 
#text4 > p > img, 
#text5 > p > img, 
#text6 > p > img, 
#text7 > p > img, 
#text8 > p > img, 
#text9 > p > img, 
#text10 > p > img {
	border: 1px solid #fff;
	box-sizing: content-box;
}
.arrow_box {
    position: relative;
    background: #88b7d5;
    border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow_box:after {
    border-bottom-color: #88b7d5;
    border-width: 30px;
    left: 50%;
    margin-left: -30px;
}
.arrow_box:before {
    border-bottom-color: #c2e1f5;
    border-width: 36px;
    left: 50%;
    margin-left: -36px;
}

/* 背景画像付きBOXを設置 */
@media screen and (min-width: 640px){
.imgbox {
background-image: url(./img/cracker.gif);
background-size: 100% auto;
}}

.pop {
font-family:HGP創英角ﾎﾟｯﾌﾟ体;
letter-spacing: -0.05em;
}

/* スライダー */
.slider {
  width: 328px;
  height: 280px;
  display: flex;
  overflow-x: auto;
}
.slide {
  width: 328px;
  flex-shrink: 0;
  height: 100%;
}

/* 左右寄せ特殊タイトル */
.titlebar { display: table; width: 100%; color:white; }
.category { display: table-cell; text-align: left; }
.subject  { display: table-cell; text-align: right; }

/* 円形ボックス */
.circle_blue{
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #AFD7EC;
  color: #ffffff;
  text-align:center;
  line-height: 80px;
  vertical-align: middle;
}

.circle_red{
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #FFBCBC;
  color: #ffffff;
  text-align:center;
  line-height: 80px;
  vertical-align: middle;
}

.box15 {
    padding: 0.2em 0.5em;
    margin: 2em 0;
    color: #565656;
    background: #ffeaea;
    box-shadow: 0px 0px 0px 4px #ffeaea;
    border: dashed 2px #ffc3c3;
    border-radius: 8px;
}
.box15 p {
    margin: 0; 
    padding: 0;
}

.box29 {
    margin: 2em 0;
}
.box29 .box-title {
    font-size: 1.2em;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box29 p {
    padding: 15px 20px;
    margin: 0;
}

/* 楽天 */
@media only screen and (min-device-width: 480px) {
.wrapper{
  width: 750px;
  margin: 0 auto;
}
}
.secCommon{
  margin-bottom: 80px;
}
#contentInner{
  display: flex;
  flex-wrap:wrap;
}

@media only screen and (min-device-width: 480px) {
#contentInner li{
  font-size:10px;
  width: calc(100%/2);
  padding: 0 20px;
  margin-bottom: 40px;
}
}
#contentInner li dl dt{
  margin-bottom: 10px;
  height: 300px;
}
#contentInner li dl dt a{
  height: 100%;
  text-align: center;
}
#contentInner li dl dt a img{
  width: auto;
}
#contentInner li dl dd.itemPrice{
  color: #ed1b24;
  font-size: 22px;
  letter-spacing: 1px;
}
#contentInner li dl dd.itemPrice span{
  font-size:15px;
}
#contentInner li dl dd.itemValue{
  letter-spacing: 1px;
}
#contentInner li dl dd.itemValue span{
  font-size:20px;
}

/* 広告枠背景 */
ins {
  background: none;
}

/* 画像枠線 */
#text1 > p > img, 
#text2 > p > img, 
#text3 > p > img, 
#text4 > p > img, 
#text5 > p > img, 
#text6 > p > img, 
#text7 > p > img, 
#text8 > p > img, 
#text9 > p > img, 
#text10 > p > img {
	border: 1px solid #fff;
	box-sizing: content-box;
}


a img {
    border-style:none;
}


.overlay-ad2 {
  position: fixed;
  left: 0;
  bottom: 0;
  text-align: center;
  z-index: 1000;
}

.overlay-ad {
  position: fixed;
  left: 0;
  bottom: 0;
  text-align: center;
  z-index: 1000;
}

===================================
PC・モバイルでのみ表示
===================================
*/
.display-pc {	display: block;	}
.display-sp {	display: none;	}
@media screen and (max-width: 767px) {
	.display-pc {
		display: none;
	}
	.display-sp {
		display: block;
	}
}
/*

/* 全ページを1カラム */
#column2 {
    background-color: #fff;
}
#column2 #topmenubox, #column2 #contents {
    max-width: 870px !important;
    margin: 0 auto;
}
#column2 #main, #column2 #menu {
    float: none;
    width: 100%;
}
#column2 #menu {
    margin-top: 50px;
}
#column2 #submenu {
    font-size: 0;/* 画像空白問題の対処 */
}
#column2 #submenu img {
    display: inline;
    width: 25%;
    padding: 0 1px 1px;
}
@media screen and (min-width: 768px) {
    #column2 #topmenubox + #contents {
        padding-top: 20px !important;
    }
}
@media screen and (max-width: 767px) {
    #column2 #submenu img {
        display: block;
        width: auto;
        padding: 0;
    }
}
#column2 #whatsnew, #column2 #relnavi, #column2 #searchbox, #column2 #newpost, #column2 #menu .space {
    display: none;
}
#column2 #sitemenu + #newpost {
    display: block;
}