@charset "shift_jis";
/* CSS Document */

*{ list-style:none; margin:0; padding:0;}
a{ text-decoration:none;}
a img{ border:none;}
img{ vertical-align:bottom;}
a:hover img{ opacity:0.8;}

/*------------------------基本------------------------*/

#cage{ max-width: 750px; margin:0 auto;  width: auto;font-family:"Century Gothic",Noto Sans JP,sans-serif;color:#53322b;font-size: 14px;}
#cage section#menu ul li{float: left;width: 31%;}


#cage section{clear: both;}


/*------------------------看板------------------------*/
#cage section#kanban{position: relative; }
#cage section#kanban img:nth-child(1){ }
#cage section#kanban img:nth-child(2){ position: absolute; top: 0; left: 0;  animation: Flash1 8s infinite;}
/* アニメーション */
@keyframes Flash1{
  0% {opacity: 0} 
  50% {opacity: 1} 
  100% {opacity: 0} 
}


/*------------------------テキスト------------------------*/
#cage section#about{padding: 10% 5%;    overflow: hidden;padding: 4% 3% 2%;}
#cage section#about div{ float: left;font-weight: bold; line-height: 2em; margin: 5% 0;}
#cage section#about img{ float: right; width: 30%;}

#cage section#about div{ font-size: 1.2em;width: 65%;}

/*------------------------メニュー------------------------*/
#cage section#menu{ padding: 0 1%;}
#cage section#menu a{display: block;}
#cage section#menu li:nth-child(2){padding:0 3%;}

/*------------------------リンク------------------------*/
#cage section#item div.corner div.itemblock dd.sub2_b a,
#cage section#item div.corner div.itemblock dd.sub1_b a,
#cage #bana div a
{position: absolute; width: 100%; height: 100%; top:0; left: 0;text-indent: 100%; white-space: nowrap;overflow: hidden;
    border-radius: 10px;		/* CSS3草案 */
	-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
        -moz-border-radius: 10px;	/* Firefox用 */} 

#cage section#item div.corner div.itemblock dd.sub2_b a:hover,
#cage section#item div.corner div.itemblock dd.sub1_b a:hover,
#cage #bana div a:hover 
{opacity:0.4;background-color: #D0D0D0;}

#cage a{
    background-color: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}

/*------------------------背景色指定------------------------*/

#cage section#item{background-color: white;}
#cage section#item div#page1{background-color: #e7e9f0;}
#cage section#item div#page2{background-color: #fcdfd8;}
#cage section#item div#page3{background-color: #e0e0d0;}

#cage section#item div#page1 div.itemblock dd.sub2_b{background-color: #cbd1e8;}
#cage section#item div#page2 div.itemblock dd.sub2_b,#cage section#item div#page2 div.itemblock dd.sub1_b{background-color: #efc4ba;}
#cage section#item div#page3 div.itemblock dd.sub2_b{background-color: #d3d3b4;}


/*------------------------商品ブロック------------------------*/
/*--- 商品群大元：section#item > 商品群各コーナー：div#page● div.corner > 各コーナー商品部分：div.itemblock >dl-----*/

#cage section#item div.corner div.title{    margin: 0 0 10%; text-align: center;}
#cage section#item div.corner div.title img{ width: 70%;}

#cage section#item div#page1,#cage section#item div#page3,#cage section#item div#page2{padding: 3%;}

#cage section#item div.corner{clear: both;overflow: hidden;}

#cage section#item div.corner div.itemblock dl{clear: both; overflow: hidden;    margin-bottom: 15%;}
/*商品名*/
#cage section#item div.corner div.itemblock dt{font-weight: bold;  float: left;width: 60%;line-height: 1em;    padding-left: 2%; border-left: 5px solid;}
#cage section#item div.corner div.itemblock dt{ font-size: 1.6em;}

/*------選択肢------*/
/*#cage section#item div.corner div.itemblock dd:nth-child(2){ float: right;}*/
#cage section#item div.corner div.itemblock dd:nth-child(2){ width: 100%;clear: both;padding: 3% 0;}
#cage section#item div.corner img{
    border-radius: 10px;		/* CSS3草案 */
	-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
        -moz-border-radius: 10px;	/* Firefox用 */}

/*メイン画像*/
#cage section#item div.corner div.itemblock dd.main{margin-bottom:2%; position: relative;}
#cage section#item div.corner div.itemblock dd.main img:nth-child(2){ position: absolute; top: 0; left: 0;  animation: Flash1 8s infinite;} 
/*サブ画像*/
#cage section#item div.corner div.itemblock dd.sub2{ width: 49%; position: relative;float: left;margin-bottom: 2%;}
#cage section#item div.corner div.itemblock dd.sub2:nth-child(even),
#cage section#item div.corner div.itemblock dd.sub2_b:nth-child(even){ margin-right: 2%; clear: both;}
/*ボタン*/
#cage section#item div.corner div.itemblock dd.sub1_b{ width: 98%; position: relative;float: left;margin-bottom: 1%; text-align: center;
    border-radius: 10px;		/* CSS3草案 */
	-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
        -moz-border-radius: 10px;	/* Firefox用 */}

#cage section#item div.corner div.itemblock dd.sub2_b{ width: 47%; position: relative;float: left;margin-bottom: 2%; text-align: center;
    border-radius: 10px;		/* CSS3草案 */
	-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
        -moz-border-radius: 10px;	/* Firefox用 */}
#cage section#item div.corner div.itemblock span.material-icons{ position: absolute; right: 1%;  bottom: 35%;}
    #cage section#item div.corner div.itemblock dd.sub1_b{padding: 2% 1%;}
    #cage section#item div.corner div.itemblock dd.sub2_b{padding: 2% 1%;}  



/*価格プロ*/
#cage section#item div.corner div.itemblock div.buy_price{    width: 95%; }
#cage section#item div.corner div.itemblock div.buy_price ul{    position: relative;  display: inline-block;}
#cage section#item div.corner div.itemblock div.buy_price ul li.price {color: #dc4626!important;font-size: 22px;}
#cage section#item div.corner div.itemblock div.buy_price ul li.price .spesicalprice{     color:#53322b!important;font-size: 10px !important;}
#cage section#item div.corner div.itemblock div.buy_price ul li.intax{ font-size: 10px;position: absolute;right: -64px;top: 8px;}


/*------------------------バナー------------------------*/
#cage #bana div{ background-color: white; text-align: center;position: relative; padding: 2%;     margin: 2% 0; background-color: #e6daca;     width: 96%; font-size: 1.2em;font-weight: bold;border-radius: 10px;		/* CSS3草案 */
	-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
        -moz-border-radius: 10px;	/* Firefox用 */}