@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); }