@charset "utf-8";

/*----- about.html CSS -----*/

/* menu */
.about .menu{
  max-width: 300px;
  margin: 20px auto 10px;
  padding: 14px 42px;
  border: 1px solid #ccccff;
}
@media(max-width:499px){/* for mobile */
  .about .menu{
    max-width: none;
    width: 90%;
    padding: 14px;
    border: none;
  }
}
.about .menu li{
  margin: 8px 0px;
  border-bottom: 1px dotted #ccccff;
}
.about .menu li p{
  text-align: left;
}
.about .menu a:link,
.about .menu a:visited,
.about .menu a:active{
	color: #7f7fff;
	text-decoration: none;
}
.about .menu a:hover{
	color: #ff7f7f;
	text-decoration: none;
}

/* detail */
.detail{
  margin: 30px 0px;
}
.detail li{
  width: 80%;
  margin: 0 auto;
  margin-bottom: 60px;
}
.detail li p.head{
  font-size: 16px; font-weight: bold;
  text-align: left;
  border-bottom: 1px dotted #ccccff;
  padding: 5px 14px 0px;
}
.detail li div{
  min-height: 80px;
}
.detail li div.kuck{
	background: url(../img/sub/about/iconKuck.gif) no-repeat left 0px;
}
.detail li div.yaso{
	background: url(../img/sub/about/iconYasoichi.gif) no-repeat right 0px;
}
.detail li div.ninin{
	background: url(../img/sub/about/iconNinin.gif) no-repeat right 0px;
}
.detail li .text{
  max-width: 500px;
  margin: 20px 90px;
  background: #e5e5ff;
  color: #6a6acc;
}
.detail li div.yaso .text,
.detail li div.ninin .text{
  margin-left: auto;
}
.detail li div.kuck .text{
  margin-right: auto;
}
.detail li .text p{
  padding: 14px 20px;
  text-align: left;
}
@media(max-width:599px){/* for mobile */
  .detail li .text p{
    padding: 12px 20px;
    font-size: 12px;
  }
}
@media(max-width:499px){/* for mobile */
  .detail li{
    width: 90%;
  }
  .detail li div{
    min-height: 50px;
  }
  .detail li div.kuck{
    background: url(../img/sub/about/iconKuckS.gif) no-repeat left 0px;
  }
  .detail li div.yaso{
    background: url(../img/sub/about/iconYasoichiS.gif) no-repeat right 0px;
  }
  .detail li div.ninin{
    background: url(../img/sub/about/iconNininS.gif) no-repeat right 0px;
  }
  .detail li .text{
    margin: 20px 60px;
    background: #e5e5ff;
  }
  .detail li div.yaso .text,
  .detail li div.ninin .text{
    margin-left: auto;
  }
  .detail li div.kuck .text{
    margin-right: auto;
  }
  .detail li .text p{
    padding: 12px;
  }
}