@charset "shift_jis";

.drop_area {
    width: 900px;
	margin:15px 0 20px 0;
	padding:15px 0;
	border-top:2px solid #ededed;
	border-bottom:2px solid #ededed;
	}


.dropmenu {
  *zoom: 1;
  list-style-type: none;
  width: 900px;
  margin:0;
  padding: 0;
}

.dropmenu:before, .dropmenu:after {
  content: "";
  display: table;
}

.dropmenu:after {
  clear: both;
}



.dropmenu li {
  position: relative;
  margin:0;
  padding:0;
  width:128px;
  float:left;
  background-color:#FFC6C0;
}

.dropmenu li a {
  margin: 0;
  padding: 0;
  text-decoration: none;
  display: block;
}

.dropmenu ul li:hover ul,
.dropmenu li ul.right_dm {
    display: block;
}

.dropmenu li ul {
  list-style: none;
  position: absolute;
  z-index: 9999;
  top: 100%;
  left: 0;
  margin: 0;
  padding:5px;
  width:260px;
  border: 1px solid #dedede;
  background: #FFF;
}


.dropmenu li ul.right_dm {
  list-style: none;
  position: absolute;
  z-index: 9999;
  top: 100%;
  left: -145px;
  margin: 0;
  padding:5px;
  width:260px;
  border: 1px solid #dedede;
  background: #FFF;
}



.dropmenu li ul li,
.dropmenu li ul.right_dm li {
  width: 125px;
  float:left;
  font-weight:bold;
}

.dropmenu li ul li a, 
.dropmenu li ul.right_dm li a {
  padding: 10px 5px 0px 10px;
  background: #FFF;
  text-align: left;
  height: 30px;
  color:#212121;
}

.dropmenu li ul li a:hover,
.dropmenu li ul.right_dm li a:hover {
  background-color:#FFC6C0;
}


.dropmenu li ul li.dm_title,
.dropmenu li ul.right_dm li.dm_title {
  width: 250px;
  float:left;
  font-weight:bold;
  border-bottom: dotted 1px #dedede;
  background: #FFF;
  text-align: left;
  color: #B85246;
  padding: 10px 0 8px 10px;
  margin:0 0 5px 0;
}



/* ▼メニュー アニメーション */
/* ----------------------------------------------------- */ 


/* ▼ノーマル */

#normal li ul{
  display: none;
}
#normal li:hover ul{
  display: block;
}



/* ▼広がるように */

#dopen li ul li{
  overflow: hidden;
  height: 0;
  transition: .2s;
}
#dopen li:hover ul li{
  overflow: visible;
  height: 30px;
}


/* ▼フェードイン */

#fade-in li ul{
  visibility: hidden;
  opacity: 0;
  transition: 0s;
}
#fade-in li:hover ul{
  visibility: visible;
  opacity: 1;
}
#fade-in li ul li a{
  visibility: hidden;
  opacity: 0;
  transition: .5s;
}
#fade-in li:hover ul li a{
  visibility: visible;
  opacity: 1;
}



/* ▼左から右へ */

#left-to-right ul{
  overflow: hidden;
  width: 0;
  transition: .5s;
}
#left-to-right li:hover ul{
  width: 100%;
}
#left-to-right li:hover ul li a{
  white-space: nowrap;
}



/* ▼全体がめくれてくる */

#flip > li{
  perspective: 400px;
}
#flip li ul{
  visibility: hidden;
  transform: rotateX(-90deg);
  transform-origin: 50% 0;
  transition: .3s;
}
#flip li:hover ul{
  visibility: visible;
  transform: rotateX(0);
}




/* ▼上から回転 */

#flip2 li ul {
  visibility: hidden;
  perspective: 400px;
}
#flip2 li:hover ul{
  visibility: visible;
}
#flip2 ul li{
  transform: rotateY(90deg);
  transform-origin: 50% 0;
  transition: .3s;
}
#flip2 li:hover li{
  transform: rotateY(0);
}
#flip2 ul li:nth-child(2) {
  transition-delay: .1s;
}
#flip2 ul li:nth-child(3) {
  transition-delay: .2s;
}
#flip2 ul li:nth-child(4) {
  transition-delay: .3s;
}
#flip2 ul li:nth-child(5) {
  transition-delay: .4s;
}



/* ▼上からパタパタ */

#flip3 ul {
  visibility: hidden;
  perspective: 400px;
}
#flip3 li:hover ul{
  visibility: visible;
}
#flip3 ul li{
  transform: rotateX(-90deg);
  transform-origin: 50% 0;
  transition: .1s;
}
#flip3 li:hover ul li{
  transform: rotateX(0);
}
#flip3 li:hover ul li:nth-child(1) {
  transition-delay: 0s;
}
#flip3 li:hover ul li:nth-child(2) {
  transition-delay: .1s;
}
#flip3 li:hover ul li:nth-child(3) {
  transition-delay: .2s;
}
#flip3 li:hover ul li:nth-child(4) {
  transition-delay: .3s;
}
#flip3 li ul li:nth-last-of-type(1) {
  transition-delay: 0s;
}
#flip3 li ul li:nth-last-of-type(2) {
  transition-delay: .1s;
}
#flip3 li ul li:nth-last-of-type(3) {
  transition-delay: .2s;
}
#flip3 li ul li:nth-last-of-type(4) {
  transition-delay: .3s;
}