@charset "utf-8";

/************************************************
 design環境コンテンツ用
************************************************ */


/* ===============================================
▼カテゴリ
=============================================== */
#category_area ul.ul_tree li {
    width: 218px;
    display: inline-block;
    position: relative;
}
#category_area li a {
    display: block;
    padding: 0;
}
#category_area ul.ul_tree li a {
    width: 127px;
}
#category_area ul.ul_tree li div.c_tree {
    width: 218px;
}
#category_area li.level1 {
    border-bottom: dotted 1px #ccc;
}
#category_area li.level1:last-child {
    border-bottom: none;
}
#category_area li.level1 p a {
    padding: 6px 10px;
    margin: 0;
}
#category_area li.level2 p a  {
    padding-left: 20px;
    padding-top: 0;
}
#category_area li.level3 p a  {
    padding-left: 35px;
}
#category_area li.level2 p a:before,
#category_area li.level3 p a:before {
	content: '-';
	color: #cccccc;
	margin-right: 3px;
}
#category_area li.onmark p a.onlink:before {
    font-family: FontAwesome;
    content: "\f105";
    margin-right: 4px;
    color: #39c;
}
#category_area ul.ul_tree li a {
    display: inline-block;
    padding: 14px 0 14px 10px;
    word-break: break-word;
    line-height: 16px;
}
#category_area ul#tree1 li a {
    padding: 0 30px 0 10px;
    display: table-cell;
    vertical-align: middle;
}
#category_area ul#tree1 li a:hover {
    opacity: 0.6;
}
#category_area ul.tree2 li a {
    padding: 14px 10px 14px 10px;
}
#category_area ul#tree1 li .on_child a {
    margin-left: 0;
}
li.level2:last-child {
    border-bottom: none;
}
#category_area ul#tree1 li a.toggle {
    padding: 0;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -25px;
    width: 28px;
    height: 50px;
    cursor: default;
}
img.tree_img {
    width: 51px;
	height: 51px;
    object-fit: cover;
}
#category_area ul#tree1 li .on_child img.tree_img {
    margin-right: 0;
}
.level0 > ul,
.level1 > ul {
	display: none;
}

#tree1 .on_child {
    position: relative;
    overflow: hidden;
}

#tree1 .toggle:after{
  font-family: 'FontAwesome';
  content: "\f054";
  position: absolute;
  right: 10px;
    top: 50%;
    margin-top: -10px;
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -moz-transition: all, 0.25s, linear;
    -o-transition: all, 0.25s, linear;
    -webkit-transition: all, 0.25s, linear;
    transition: all, 0.25s, linear;
}

#tree1 .active .toggle:after {
    -moz-transform: translate(0, 50%);
    -ms-transform: translate(0, 50%);
    -webkit-transform: translate(0, 50%);
    transform: translate(0, 50%);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.tree_img_outer {
    display: table-cell;
    vertical-align: middle;
	width: 51px;
	height: 49px;
}


#category_area ul.ul_tree_tq li {
    width: 218px;
    display: inline-block;
    position: relative;
}

#category_area ul.ul_tree_tq li a {
    width: 127px;
}
#category_area ul.ul_tree_tq li div.c_tree {
    width: 218px;
}

#category_area ul.ul_tree_tq li a {
    display: inline-block;
    padding: 14px 0 14px 10px;
    word-break: break-word;
    line-height: 16px;
}

#category_area ul#tree1 li a.toggle_tq {
    padding: 0;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -25px;
    width: 28px;
    height: 50px;
    cursor: default;
}

#tree1 .toggle_tq:after{
  font-family: 'FontAwesome';
  content: "\f054";
  position: absolute;
  right: 10px;
    top: 50%;
    margin-top: -10px;
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -moz-transition: all, 0.25s, linear;
    -o-transition: all, 0.25s, linear;
    -webkit-transition: all, 0.25s, linear;
    transition: all, 0.25s, linear;
}

#tree1 .active .toggle_tq:after {
    -moz-transform: translate(0, 50%);
    -ms-transform: translate(0, 50%);
    -webkit-transform: translate(0, 50%);
    transform: translate(0, 50%);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}