@charset "euc-jp";
/* 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: #4d382a;
  font-size: 14px;
  /* padding: 5vw 0 0 0; */
}
#cage ul.nav 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} 
}


/*------------------------�ƥ�����------------------------*/
/* section#about{padding: 10% 5%;    overflow: hidden;padding: 0% 3% 1%;     background-color: #f1eee4;
    /* width: 2000px !important; */
    text-align: center;
    padding: 50px;
    color: #4d382a;} */
#cage section#about div{ float: left;font-weight: bold; line-height: 2em; margin: 5% 0;}
#cage section#about img{ float: right; width: 30%;}

@media (max-width: 749px){
  #cage section#about div{ font-size: 0.8em; width: 65%; }
  section#about{padding: 10% 5%;    overflow: hidden;padding: 0% 3% 1%;     background-color: #f1eee4;
    /* width: 2000px !important; */
    text-align: center;
    padding: 20px 10px;
    color: #4d382a;}
    .concept{
      font-weight: bold;
      font-size: 1.5em;
      letter-spacing: 0.2vw;
      padding: 0 0 1vw 0;
    }
    .concept_txt{
      line-height: 7vw;
      font-size: 0.8em;
    }
    .title{
      /* width: 750px; */
      margin: 0 auto;
      position: relative;
    }
    .title p{
      text-align: center;
      font-size: 2.0em;
      font-weight: bold;
      letter-spacing: 0.2vw;
      color: #fff;
      margin: 30px auto;
      line-height: 10vw;
    }
    .title p::before{
      position: absolute;
      top: 50%;
      width: 5rem;
      height: 0.1rem;
      background-color: #ffffff;
      /* background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%); */
      content: '';
      /* left: 10px; */
      /* right: 10px; */
      display: block;
    }
    .title p::after{
      position: absolute;
      top: 50%;
      width: 5rem;
      height: 0.1rem;
      background-color: #ffffff;
      /* background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%); */
      content: '';
      /* left: 10px; */
      right: 0px;
      display: block;
    }
    
}
@media (min-width: 750px){
  #cage section#about div{ font-size: 1.2em;width: 65%;}
  section#about{padding: 10% 5%;    overflow: hidden;padding: 0% 3% 1%;     background-color: #f1eee4;
    /* width: 2000px !important; */
    text-align: center;
    padding: 50px;
    color: #4d382a;}
    .concept{
      font-weight: bold;
      font-size: 1.5em;
      letter-spacing: 0.2vw;
      padding: 0 0 1vw 0;
    }
    .concept_txt{
      line-height: 2.1vw;
        font-size: 1.1vw;
    }
    .title{
      width: 750px;
      margin: 0 auto;
      position: relative;
    }
    .title p{
      text-align: center;
      font-size: 2.5em;
      font-weight: bold;
      letter-spacing: 0.2vw;
      color: #fff;
      margin: 50px auto;
    }
    .title p::before{
      position: absolute;
      top: 50%;
      width: 13rem;
      height: 0.1rem;
      background-color: #ffffff;
      /* background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%); */
      content: '';
      /* left: 10px; */
      /* right: 10px; */
      display: block;
    }
    .title p::after{
      position: absolute;
      top: 50%;
      width: 13rem;
      height: 0.1rem;
      background-color: #ffffff;
      /* background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%); */
      content: '';
      /* left: 10px; */
      right: 0px;
      display: block;
    }
    
  }

/*------------------------��˥塼------------------------*/
#cage section#menu{ padding: 0 1%;}
#cage section#menu a{display: block;}
#cage section#menu li:nth-child(2){padding:0 3%;}

/*------------------------���------------------------*/
#item div.corner div.itemblock dd.sub3_b a,
#cage section#item div.corner div.itemblock dd.sub3_b a,
#cage section#item div.corner div.itemblock dd.sub2_b a,
#cage section#item div.corner div.itemblock dd.sub1_b a,
#cage section#item div.corner div.itemblock dd.sub1_d a,
#cage section#item div.corner div.itemblock dd.sub2_d a,
#cage section#item div.corner div.itemblock dd.bana1 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.sub3_b a:hover,
#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 section#item div.corner div.itemblock dd.sub1_d a:hover,
#cage section#item div.corner div.itemblock dd.sub2_d a:hover,
#cage section#item div.corner div.itemblock dd.bana1 a:hover,
#cage section#item div.corner div.itemblock dd.bana2 a:hover,
#cage #bana div a:hover 
{opacity:0.4;background-color: #d2beaf;}

#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;
}

/*------------------------���ʥ֥��å�------------------------*/
/*--- ���ʷ��縵��section#item > ���ʷ��ƥ����ʡ���div#page�� div.corner > �ƥ����ʡ�������ʬ��div.itemblock >dl-----*/
#cage section#item{background-color: white;    border-radius: 20px;margin: 10px;}
#cage section#item div.corner div.title{    margin: 0 0 5%; text-align: center;}
@media (min-width: 750px){#cage section#item div.corner div.title img{ width: 70%;}}

#cage section#item div#page1,#cage section#item div#page3{padding: 3%;    margin: 0 0 10% 0;}
#cage section#item div#page2{padding: 3%;background-color: #f1eee4;}

#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 dl:last-child{margin: 5%;} */
/*����̾*/
#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;}
@media (max-width: 749px){#cage section#item div.corner div.itemblock dt{ font-size: 1.3em;}}
@media (min-width: 750px){#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�� */}
@media (min-width: 750px){#cage section#item div.corner div.itemblock dd:nth-child(2){font-size: 1.3em;}}

/*�ᥤ�����*/
#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.sub3{ width: 33%; 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.sub3_b:nth-child(even){ margin-right: 2%;margin-left: 2%;}
/*�ܥ���*/
#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.sub1_d{padding: 3% 0; 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 dd.sub3_b{ width: 30%; 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 dd.sub2_d{padding: 3% 0; width: 49%; 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 dd.sub2_d:last-child {
    float: right;
}
#cage section#item div.corner div.itemblock span.material-icons:not(dd.bana span.material-icons) { position: absolute; right: 1%;  bottom: 35%;}
#cage section#item div#page1 div.itemblock dd.sub3_b,#cage section#item div#page1 div.itemblock dd.sub2_b,#page1 div.itemblock dd.sub1_d,#page1 div.itemblock dd.sub2_d,#cage section#item div#page3 div.itemblock dd.sub2_b,#cage section#item div#page1 div.itemblock dd.sub1_b{background-color: #f1eee4;}
#cage section#item div#page2 div.itemblock dd.sub3_b,#cage section#item div#page2 div.itemblock dd.sub2_b,#cage section#item div#page2 div.itemblock dd.sub1_b{background-color: #ffffff;}



@media (max-width: 749px){
    #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 dd.sub3_b{padding: 2% 1%;font-size: 0.9em;}
}
@media (min-width: 750px){
    #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 dd.sub3_b{padding: 2% 1%;    font-size: 1.3em;} 
}



/*���ʥץ�*/
#cage section#item div.corner div.itemblock div.prices{clear: both;position: relative;padding: 5px 0;}
#cage section#item div.corner div.itemblock div.prices span.prdisp-taxin,.syosai{ font-weight:bold;color:#4d382a;}

@media (max-width: 749px){
#cage section#item div.corner div.itemblock div.prices span.prdisp-taxin,.syosai{
  font-size: 4vw;
  padding: 0 0 10px 0;
  }}

@media (min-width: 750px){
#cage section#item div.corner div.itemblock div.prices span.prdisp-taxin,.syosai{font-size: 1.2em; }}


/*------------------------------------------------*/
/*   �եå���    */
/*------------------------------------------------*/
footer{background-color: #eae9e6;color:#4d382a ; text-align: center; /* margin-top: 25vh; */}
footer ul{display: flex;    }
footer li:nth-of-type(2){margin: 0 2em;}
footer div{    margin: auto; display: inline-block;padding: 1em 0;}
footer a:link,footer a:visited{color:#4d382a;}
@media screen and (max-width: 750px) { /*���ޥۤ�Ŭ��*/
footer{height: 9vh;}
  }


/*------------------------�Хʡ�------------------------*/
#cage #bn{padding-bottom: 6%}
#cage section#item div.corner .bn1 img{border-radius: 0px;		/* CSS3��� */
	-webkit-border-radius: 0px;	/* Safari,Google Chrome�� */
        -moz-border-radius: 0px;	/* Firefox�� */}


/*------------------------���ƥ���ܥ���------------------------*/
#cage #bana{
    display: flex;
    align-items: stretch;
    justify-content: space-between;}

#cage #bana div{ text-align: center;position: relative; padding: 2%;     margin: 2% 0; background-color: #d3bea3;     width: 45%; font-size: 1.2em;font-weight: bold;border-radius: 10px;		/* CSS3��� */
	-webkit-border-radius: 10px;	/* Safari,Google Chrome�� */
        -moz-border-radius: 10px;	/* Firefox�� */}

#cage section#item div dd.bana1{ text-align:center; position:relative; padding:2%; margin:2% 0; background-color:#d3bea3;width:96%; font-size:1.2em; font-weight:bold;border-radius:10px; float: left;}
#cage section#item div dd.bana2{ text-align:center; position:relative; padding:2%; margin:2% 0; background-color:#d3bea3;width:96%; font-size:1.2em; font-weight:bold;border-radius:10px; float: left;}


/*------------------------���ޥ�------------------------*/

/*���ޥۤǤΤ�ɽ��*/
@media (max-width: 749px){.smp{   }}
@media (min-width: 750px){.smp{ display: none !important;}}
/*PC�ǤΤ�ɽ��*/
@media (max-width: 749px){.PC{ display: none !important;}}
@media (min-width: 750px){.PC{}}



/* ==================================================
�饤�ȥʥ�
================================================== */
#elevator {
    position: fixed;
    z-index: 1;
    bottom: 8%;
    height: 100vh;
    right: 1vw;
    text-align: right;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* opacity: 0; */
    text-align: center;
    transition-duration: .3s;
    width: 10%;
  }
  
  #elevator li {
    border-bottom: 1px dashed #3b3635;
  }
  
  #elevator li a h4:after {
    display: none;
  }
  
  #elevator li:first-child {border-bottom: none;}
  
  
  #elevator ul {
    margin: 0 0;
    list-style: none;
    /* background: #ffffff38; */
    border-radius: 100px;
    height: 100px;
    background-color: #fff;
    width: 100px;
  }
  
  #elevator ul li a {
    display: block;
    text-decoration: none;
    color: #333;
    position: relative;
    padding: 1em 1em;
    font-size: 1.2em;
    top: 10px;
    font-weight: bold;
    letter-spacing: 3px;
    margin: 0 auto;
  }
  
  #elevator ul li a:hover {
    color: #dc4626 !important;
  }

  .anchor01 {
    /* font-size: 1.5em; */
    color: #ffffff;
    background-color: #4d382a;
    padding: 6%;
    font-weight: bold;
}


/*========================
���ޥۥ�˥塼
��========================*/


.mini-text{font-size: 0.7em;}/*ʸ���礭��*/

ul.bottom-menu {
  position: fixed;
  /* left: 0; */
  bottom: 10px;
  width: 75px;
  height: 75px;
  margin: 0;
  padding: 0;
  z-index: 30;
  background-color: #f5f5f5;
  /* border-top: 2px solid #4d382a; */
  right: 10px;
  border-radius: 100px;
    }

ul.bottom-menu li {
  float: left;
  width: 25%;
  /* background-color: #f5f5f5; */
  list-style-type: none;
  text-align: center;
  font-size: 25px;
  display: contents;
  }

.bottom-menu li a {
  display: block;
  color: #4d382a;
  padding-top: 25px;
  padding-bottom: 5px;
  /* line-height: 10px; */
  text-decoration: none;
  font-size: 1.2em;
  font-weight: bold;
    }

.bottom-menu li a:hover {
    color: #000;/*�ޥ��������С����ο�*/
    }



/*�ɲ�*/

.bk{
  color: #000;
  font-size: 1.5em;
  margin: 2px;
}
.brwn{
  color: #4c3930;
  font-size: 1.5em;
}
.nv{
  color: #333649;
  font-size: 1.5em;
  margin: 2px;
}
.gr{
  color: #858784;
  font-size: 1.5em;
}
.dg{
  color: #2d2d2d;
  font-size: 1.5em;
}
.bg{
  color: #bcb5ad;
  font-size: 1.5em;
  margin: 2px;
}
.sub3_01{
  width: calc(100%/3);
}
.col_3{
  display: flex;
}
.col_3 li{
  padding: 0.7vw;
  width: 33%;
}