@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;}
#fence { max-width: 750px; margin:0 auto;  width: auto;color:#000000;font-size: 18px;font-family:"Century Gothic", sans-serif;}
#fence section{clear: both; }
#fence h3{clear: both;}
#fence h4{clear: both;font-family: 'M PLUS Rounded 1c', sans-serif;font-weight: 900;}
#fence h5{clear: both; text-align: center; margin: 0 1em 1em 1em;color: #999999;}
#fence hr{    clear: both;margin: 1em 0;color:#000000 ;border: dotted 1px;}




/*------------------------�����N�ݒ�------------------------*/
#fence li,#fence dd.bot span{position: relative;}
#fence li a,#fence dd.bot span a
    {position: absolute; width: 100%; height: 100%; top:0; left: 0;text-indent: 100%; overflow: hidden; } 
#fence li a:hover,#fence dd.bot span a:hover{opacity:0.4; background-color:lightgrey;}
#fence 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;}


/*----------------------�Ŕ�----------------------------*/
section#kanban h5{
    padding: 1em;
    color: black!important;
    border-bottom: 1px solid #666666;
    border-top: 1px solid #666666;
}


/*-----------------------���i��------------------------*/
#fence #page2{margin-top: 10%;}
/*------------���J�������ʁ�-----------------*/

#fence li{ margin: 0;background-color: #eeeeda;padding: 2%;    /*overflow: hidden;*/border-radius: 10px;  -webkit-border-radius: 10px;-moz-border-radius: 10px; }
#fence li.clm_2{ width: 45%;float: left;}
#fence li.clm_2:nth-child(odd){margin-right: 2% !important;}
#fence div.pic img{border-radius: 10px;  -webkit-border-radius: 10px;-moz-border-radius: 10px; }
#fence dd{ clear: both;}
/*��������*/
#fence .osusume{position: absolute; right: 1%; top: 1%;}
/*�g�g��*/
#fence ul{display:inline-block;
display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
flex-wrap: wrap;}

/*��*/
#fence .haba{ width: fit-content;padding: 2%;background-color: #000000; color: white; border-radius: 10px;  -webkit-border-radius: 10px;-moz-border-radius: 10px; font-family: 'M PLUS Rounded 1c', sans-serif;font-weight:700;}
/*���i��*/
#fence dt{  font-family: 'M PLUS Rounded 1c', sans-serif;font-weight: 900;}

/*�J���[*/
#fence .col{ font-weight: bold;font-size: 0.8em;}
#fence .col span{ font-size: 1.4em;}

/*���i�v��*/
#fence dd.price{text-align: center;}
#fence dd.price .prices{ color:#dc008f; font-weight: 700;font-family: 'M PLUS Rounded 1c', sans-serif;}
/*�{�^��*/
#fence dd.bot{    overflow:hidden;}
/*�{�^�� ���o��*/
#fence dd.bot div{ text-align: center; font-family: 'M PLUS Rounded 1c', sans-serif;font-weight:700;}
/*�{�^�� �I����*/
#fence dd.bot span{ position:relative; background-color: white; text-align: center;     display: block; float: left;  padding:3% 2%;border-radius: 10px;  -webkit-border-radius: 10px;-moz-border-radius: 10px;}
#fence dd.bot span::after {   content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  position: absolute;
  top: 50%;
  margin-top: -4px;
  transform: rotate(45deg);}
#fence dd.b1 span{width: 96% !important;}

/*---PC�̂�--------*/
  #fence .bs{    margin-bottom: 1em;}
/*�e�L�X�g*/
#fence .text{font-size: 0.8em;margin-bottom: 0.5em;    padding: 1em 0;}
/*��������*/
    #fence .osusume{width: 14%;top: -2vw;}
/*���i��*/
    #fence dt,#fence h4{ font-size: 1.4em;border-bottom: 6px solid #000000;}
    #fence dt p,#fence h4 p{ font-size: 0.8em!important;    font-weight: 100; margin-bottom: -0.4em;}
/*�{�^�� �I����*/ 
    #fence dd.bot div{margin-top: 1em;}
    #fence dd.b1 span,#fence .b1{ margin-top: 0.5em;} 
    #fence dd.bot span::after {  right: 1vw;}
/*�{�^�� ���o��*/
#fence dd.bot div{ font-size:1.2em;}
/*���i�v��*/
    #fence dd.price .prices{font-size: 2em;}


/*------------��1�J������-----------------*/
/*���i�摜*/
#fence li.clm_1 div.pic{width: 50%; float: left; margin-right: 2%;  }
/*�{�^�� �I����*/
#fence li.clm_1 dd.bot span{width: 45%;  }
#fence li.clm_1 dd.bot span:nth-of-type(1){ margin-right: 2%;}

/*---PC�̂�--------*/

#fence li.clm_1{width: 96%}
#fence li.clm_1 dl{width: 48%;float: left;}
#fence li.clm_1:nth-child(even){margin: 2em 0;}
#fence li.clm_1 dd.price{margin-top: 1em;}





/*------------��2�J������-----------------*/
/*���i�摜*/
#fence li.clm_2 div.pic{width: 100%; }
/*�{�^�� �I����*/
#fence li.clm_2 dd.bot span{width: 96%; }

/*---PC�̂�--------*/

#fence li.clm_2{margin-bottom: 2em;}
#fence li.clm_2 dl{width: 100%; margin-top: 1em;}