@charset "UTF-8";

/*
	YUI 3.8.0 (build 5744)
	Copyright 2012 Yahoo! Inc. All rights reserved.
	Licensed under the BSD License.
	http://yuilibrary.com/license/

	Font-size Adjustment
	base: 7.142857143;

	71.4% = 10px	| 	114.3% = 16px	|	157.4% = 22px
	78.6% = 11px	|	121.4% = 17px	|	164.3% = 23px
	85.7% = 12px	|	128.6% = 18px	|	171.4% = 24px
	92.9% = 13px	|	135.7% = 19px	|	178.6% = 25px
	100% = 14px    	|	142.9% = 20px	|	185.7% = 26px
	107.1% = 15px	|	150% = 21px    	|	192.9% = 27px

*/

/*
	Suggested Order

	display
	position
	float
	clear
	content

	width
	height

	margin (top, right, bottom, left)
	padding (top, right, bottom, left)

	list-style (type, image, position)

	border
	background (color, image, repeat, attachment, position)

	color
	font (family, style, variant, weight, stretch, size)

	text-indent
	text-decoration
	text-align
	vertical-align
	white-space
	other text
*/

/* @group Reset Style*/

html {
	background: transparent;
	color: #000000;
}

body,
h1,h2,h3,h4,h5,h6,
p,
div,
dl,dt,dd,
ul,ol,li,
pre,code,
form,fieldset,legend,input,textarea,
blockquote,
th,td {
	margin: 0;
	padding: 0;
	font-size: 100%;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

fieldset,img {
	border: 0;
}

address,caption,cite,code,dfn,em,strong,th,var {
	font-style: normal;
	font-weight: normal;
}

ol,ul {
	list-style: none;
	list-style-position: outside;
}

caption,th {
	text-align: left;
}

h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
}

q:before,q:after {
	content:'';
}

abbr,acronym {
	border:0;
	font-variant:normal;
}

sup {
	vertical-align: text-top;
}

sub {
	vertical-align: text-bottom;
}

input, textarea, select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* @end */

/* @group Text Module */

strong {
	font-weight: bold;
}

b {
	font-weight: normal;
	font-style: normal;
	color: #000;
	background-color: #fff;
	border-radius: 2px;
	padding: 2px 4px;
	box-shadow: rgba(0,0,0,0.1) 0 0 3px;
}

pre,code,kbd,samp,tt {
	font-family: "Courier New", Courier, mono;
}

select,input,button,textarea {
	font-size: 99%;
}

.uppercase {
	text-transform: uppercase;
}

.notice {
}

.require {
}

.bullet {
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
}

.lang-ja {
	font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','Meiryo','メイリオ','Osaka','ＭＳ Ｐゴシック',sans-serif;
}

.lang-en {
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

/* @end */

/* @group Hypertext Module */

a {
    color: #4d4d4d;
    text-decoration: none;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
}

a.f {
    padding-left: 20px;
}

a:link {
}

a:visited {
}

a:hover {
}

a:active {
}

/* @end */

/* @group Style Modules */

/* @group column module */

.columns {
}

.columns:before,
.columns:after {
	content: "";
	display: block;
	overflow: hidden;
}

.columns:after {
	clear: both;
}

/* For IE 6/7 (trigger hasLayout) */
.columns {
	zoom: 1;
}

.columns .column {
	float: left;
}

/* @end */

/* @group clearfix */

.clearfix:before,
.clearfix:after {
	content: "";
	display: block;
	overflow: hidden;
}

.clearfix:after {
	clear: both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfix {
	zoom: 1;
}

/* @end */

/* @group separator */

div.separator {
}

div.separator hr {
	display: none;
}

/* @end */

/* @end */

/* @group Structure */

/* @group Structure Elements */

html {
}

body {
	font: 14px/1 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	*font-size: small; /* for IE */
	*font: x-small; /* for IE in quirks mode */
	background: #000000;
    -webkit-text-size-adjust: 100%;
}

* html body {
	letter-spacing: 0.1em;
}

*:first-child+html body {
	letter-spacing: 0.1em;
}

main {
    min-width: 980px;
    background: #f2f2f2;
    display: block;
}

/* @end */

/* @group Definition Elements */

#pageframe {
}

#pagebody {
}

.frame {
    width: 980px;
    margin: 0 auto;
}

#pagebody .frame {
    padding: 0 0 40px;
    min-height: 300px;
}

#social {
    clear: both;
    background: #ffffff;
}

#social .frame {
    width: 940px;
    min-height: 0;
    padding: 20px 0;
}

/* @group globalnav */

.globalnav {
    min-width: 980px;
    background: #303030;
}

.globalnav a {
    display: block;
    opacity: .5;
}

.globalnav .sitelogo a {
    opacity: 1;
}

.globalnav a:hover,
.home .globalnav .sitelogo a,
.notes .globalnav li.notes a,
.download .globalnav li.download a {
	background: #191919;
	opacity: 1;
}

.globalnav .frame {
    position: relative;
}

.globalnav .frame:before,
.globalnav .frame:after {
	content: "";
	display: block;
	overflow: hidden;
}

.globalnav .frame:after {
	clear: both;
}

.globalnav .sitelogo {
    position: absolute;
    top: 0;
    left: 0;
}

.globalnav ul {
    float: right;
}

.globalnav li {
    float: left;
	border-left: 1px solid #191919;
}

.globalnav .search {
    display: table;
    height: 44px;
}

.search .globalnav .search {
    background: #191919;
}

.globalnav .search div {
    display: table-cell;
    vertical-align: middle;
    line-height: 1;
}

.globalnav .search form {
}

.globalnav .search img {
	float: left;
	padding: 0 0 0 7px;
	cursor: pointer;
	opacity: .5;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
    text-align: center;
}

.globalnav .search.open img,
.globalnav .search:hover img,
.search .globalnav .search img {
	opacity: 1;
}


.globalnav .search input {
    float: left;
/*    visibility: hidden;*/
    width: 0;
    margin: 2px 0 0;
    padding: 5px;
	-webkit-appearance: textfield;
	background-color: transparent;
	border: 1px solid rgba(0,0,0,0);
	border-radius: 3px;
	outline: none;
/*	cursor: pointer;*/
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
}

.globalnav .search input::-webkit-search-decoration,
.globalnav .search input::-webkit-search-cancel-button {
	display: none;
}

/* effect */

.globalnav .search.open input {
    visibility: visible;
	width: 200px;
    margin: 2px 8px 0 0;
	border: 1px solid #191919;
	background-color: #ffffff;
	cursor: text;
}

/*.globalnav .search label {
	display: block;
}
*/
/* @end */

/* @group subnav */

.subnav {
    background: #191919;
}

.subnav .frame {
    width: 960px;
    min-height: 44px;
}

.subnav ul {
    display: inline-block;
}

/*.download .top .subnav ul {
    width: 100%;
}*/

/* @group breadcrumb */

.breadcrumb li {
    float: left;
	color: #b0b0b0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.breadcrumb li a,
.breadcrumb li span {
    display: table-cell;
	height: 44px;
	padding: 0 10px 0 16px;
	color: #b0b0b0;
	text-decoration: none;
    vertical-align: middle;
}

.breadcrumb li span {
    color: #ffffff;
}

.search .breadcrumb li:first-child span {
    color: #b0b0b0;
}

.breadcrumb li span em {
    margin-left: 5px;
    color: #666666;
}

.breadcrumb li a:hover, .subnav li a:active {
    color: #ffffff;
}

.breadcrumb a::before,
.breadcrumb span::before {
	content: url("../img/icn-separator.svg");
	width: 16px;
	height: 16px;
	vertical-align: text-bottom;
	display: inline-block;
	margin: 0 10px 0 -16px;
	opacity: .5;
}

.breadcrumb li:first-child a,
.breadcrumb li:first-child span {
    padding-left: 10px;
}

.download .archive .breadcrumb li:first-child a {
    padding: 0 10px;
}

.breadcrumb li:first-child a::before,
.breadcrumb li:first-child span::before {
    content: none;
}

/* @end */

/* @group prevnext */

.prevnext {
    float: right;
}

.prevnext li {
    float: left;
}

.prevnext a {
    display: block;
    opacity: .8;
}

.prevnext span {
    opacity: .2;
}

.prevnext a:hover {
    opacity: 1;
    background: #000000;
}

/* @end */

/* @end */

/* @group follow */

#follow {
    width: 980px;
    margin: 0 auto;
    padding: 18px 0 0;
    text-align: center;
}

#follow ul li {
    display: inline;
    padding: 0 1px;
}

#follow a {
    opacity: .8;
}

#follow a:hover,
#follow a:active {
    opacity: 1;
}

/* @end */

/* @group copyright */

#copyright {
    width: 980px;
    margin: 0 auto;
	padding: 20px 0;
	font-size: 85.7%;
	line-height: 1.2;
	text-align: center;
	color: #666666;
}

/* @end */

/* @end */

/* @end */

/* @group Categories */

/* @group for All */

/* @group Font Color setting */

main {
    color: #333333; /* #000000の80% */
    line-height: 1.5;
    display: block;
}

main h1 {
    color: #383838;
}

main span {
    color: #666666;
}

main a {
    color: #333333;
    text-decoration: none;
}

/* @end */

/* @group Archive Module */

.articles {
}

.articles:before,
.articles:after {
	content: "";
	display: block;
	overflow: hidden;
}

.articles:after {
	clear: both;
}

.articles article,
.articles .tags li {
    float: left;
    width: 300px;
    margin: 20px 0 0 20px;
}

.articles .tags li {
    margin-top: 20px;
}

.articles article a,
.articles .tags li a {
    display: block;
    background: #ffffff;
    box-shadow: rgba(0,0,0,0.25) 0 0 2px;
    text-decoration: none;
}

.articles article a:hover,
.articles .tags li a:hover {
	box-shadow: rgba(0,0,0,0.25) 0 3px 8px;
}

/* @end */

/* @group Single Page Module */

.single #pagebody header {
    background: #ffffff;
}

.single #pagebody header ul {
	padding: 8px 20px;
	font-size: 92.9%;
}

.single #pagebody header ul:before,
.single #pagebody header ul:after {
	content: "";
	display: block;
	overflow: hidden;
}

.single #pagebody header ul:after {
	clear: both;
}


.single #pagebody header ul li.permalink {
	float: left;
	position: relative;
}

.single #pagebody header ul li.permalink input {
	border: none;
	padding: 6px 6px 6px 30px;
	outline: none;
	color: #959595;
	word-break: keep-all;
	display: block;
	white-space: nowrap;
	width: 14em;
	background: none;
}

.single #pagebody header ul li.permalink label img {
	position: absolute;
	top: 50%;
	margin: -8px 0 0 0;
	padding: 0 0 0 8px;
	vertical-align: middle;
	opacity: .5;
}

.single #pagebody header ul li.permalink label {
	display: inline-block;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	color: #585858;
}

.single #pagebody header ul li.permalink label:hover {
	border: 1px solid #a0a0a0;
	color: #000;
}

.single #pagebody header ul li.date {
	float: left;
	margin: 2px 0 0;
	padding: 0 20px;
	line-height: 2;
}

.single #pagebody header ul li.date span {
    display: inline-block;
    margin-left: 6px;
    padding-left: 7px;
    border-left: 1px solid #cccccc;
    color: #d96c6c;
}

.single #pagebody header ul li.tags {
	float: right;
	padding: 5px 0 0;
}

.single #pagebody header ul li.tags::before {
	content: url("../img/icn-tags.svg");
	display: inline-block;
	height: 16px;
	width: 16px;
	margin: -2px 6px 0 0;
	vertical-align: middle;
	opacity: .5;
}

.single #pagebody header ul li.tags a {
    color: rgb(102, 102, 102);
}

.single #pagebody header ul li.tags a:hover,
.single #pagebody header ul li.tags a:active {
    color: rgb(51, 51, 51);
}

/* @end */

/* @end */

/* @group Home */

.home {
}

.home #category section, #works section {
    float: left;
    width: 460px;
    overflow: hidden;
    margin-left: 20px;
}

.home #design-company {
    display: table;
	min-height: 100px;
	padding: 40px 0 10px;
}

.home #design-company h1 {
    display: table-cell;
	width: 430px;
    vertical-align: middle;
	text-align: right;
	color: #666666;
}

.home #design-company .logomark {
    display: table-cell;
	width: 100px;
	padding: 0 4px 0 14px;
    vertical-align: middle;
}

.home #design-company .description {
    display: table-cell;
	width: 400px;
	color: #999999;
	line-height: 1.5;
    vertical-align: middle;
}


.home #pagebody div:before,
.home #pagebody div:after {
	content: "";
	display: block;
	overflow: hidden;
}

.home #pagebody div:after {
	clear: both;
}

.home #category,
.home #works {
    margin: 30px 0 0;
}

.home #category a img {
    opacity: .7;
}

.home #category a:hover img {
	opacity: 1;
}

.home #works a:hover img {
    -webkit-filter: brightness(0.85) contrast(120%);
    -moz-filter: brightness(0.85) contrast(120%);
    -o-filter: brightness(0.85) contrast(120%);
    -ms-filter: brightness(0.85) contrast(120%);
    filter: brightness(0.85) contrast(120%);
}

.home #works section {
    margin-top: 20px;
}

.home #works .tb {
    width: 424px;
    padding: 10px 16px;
    border: 2px solid #d9d9d9;
    color: #797979;
    line-height: 1.5;
}

.home #works .tb a {
    color: #797979;
    text-decoration: none;
}

.home #works .tb h1 {
    display: inline-block;
    font-size: 135.7%;
}

.home #works .tb a:hover h1 {
    background: #f9e1e2;
}

.home #about {
    position: relative;
    width: 900px;
    min-height: 305px;
    margin: 20px auto 0;
    padding: 20px;
    background: #ffffff;
}

.home #about dl {
    width: 420px;
    margin-top: 46px;
    padding: 0 10px;
}

.home #about dt {
    padding-bottom: 8px;
}

.home #about dt strong {
    font-size: 114.3%;
    font-weight: normal;
}

.home #about dt span {
    padding-left: 10px;
    font-weight: normal;
    font-size: 92.9%;
}

.home #about dt::before {
    content: url(../img/icn-triangle_r.svg);
	display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin: -6px 4px 0 0;
    opacity: .6;
}

.home #about dt.open::before {
    content: url(../img/icn-triangle_b.svg);
}

.home #about dd {
    display: none;
    margin: 12px 0 0 20px;
    font-size: 92.9%;
}

.home #about dd strong {
    display: inline-block;
    width: 4em;
    padding-right: 8px;
    font-weight: normal;
    text-align: right;
    vertical-align: top;
}

.home #about dd span {
    display: inline-block;
}

.home #about .address {
    width: 420px;
    margin: 30px 0 0 30px;
    color: #0090d9;
}

.home #about .address .lang-en {
    opacity: .5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.home #about .address a {
    color: #0090d9;
}

.home #about .address a:hover {
    color: 005899
}

.home #about .mail {
    width: 420px;
    margin: 20px 0 0 30px;
    color: #0090d9;
}

.home #about .mail a {
    opacity: .8;
}

.home #about .mail a:hover {
    opacity: 1;
}

.home #about li.nagafuji {
    position: absolute;
    top: 20px;
    right: 260px;
}

.home #about li.miyazawa {
    position: absolute;
    top: 20px;
    right: 20px;
}

.home #about li span {
    display: block;
    padding-bottom: 10px;
}

/* @end */

/* @group Notes */

.notes #pickup,
.notes #tags  {
    margin: 40px 0 0;
}

.notes #pagebody section > h1 {
    margin: 20px 20px -5px;
    line-height: 1.6;
}

.notes #pagebody section > h1 strong {
    margin-right: 6px;
    font-size: 114.3%;
    font-weight: normal;
	color: #383838;
}

.notes #pagebody section > h1 strong::before {
    content: url(../img/icn-notes.svg);
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 0 2px 0 5px;
    vertical-align: top;
    opacity: .5;
}

.notes #pagebody section#tags > h1 strong::before {
    content: url(../img/icn-tags.svg);
}

.notes #pagebody section > h1 span {
	font-size: 85.7%;
	color: #b3b3b3;
}

.notes #pagebody section > h1 a {
	display: block;
	text-decoration: none;
}

.notes #pagebody section > h1 a em {
	float: right;
	opacity: .6;
}

.notes #pagebody section > h1 a:hover em {
	opacity: 1;
}

.notes #pagebody .articles p.description {
	overflow: hidden;
	padding: 14px 15px 0;
	height: 3em;
	line-height: 1.5;
}

.notes #pagebody article ul {
	padding: 8px 15px 12px;
	font-size: 85.7%;
	line-height: 1.5;
	color: #b3b3b3;
}

.notes .articles ul:before,
.notes .articles ul:after {
	content: "";
	display: block;
	overflow: hidden;
}

.notes .articles ul:after {
	clear: both;
}

.notes .articles .date {
	float: left;
}

.notes .articles .readmore {
	float: right;
	opacity: .8;
}

.notes .articles a:hover .readmore {
	opacity: 1;
}

.notes #tags li {
}

.notes #tags li a {
	display: block;
	background: #ffffff;
	padding: 10px 15px;
	color: #0090d9;
}

.notes #tags li a strong {
	display: block;
	float: left;
	font-weight: normal;
}

.notes #tags li a span {
	display: block;
	text-align: right;
	color: #999999;
}

/* @end */

/* @group Download */

/* @group Backgroud Color setting */

.download .top section.is a,
#is #howto a,
#is article .read_download,
.search article.is .read_download {
	background: #cc8100;
}

.download .top section.is a:hover {
    background: #c26821;
}

.download .top section.it a,
#it #howto a,
#it article .read_download,
.search article.it .read_download {
	background: #e55082;
}

.download .top section.it a:hover {
    background: #e04069;
}

.download .top section.pp a,
#pp #howto a,
#pp article .read_download,
.search article.pp .read_download {
	background: #b450e5;
}

.download .top section.pp a:hover {
    background: #a64be0;
}

.download .top section.vm a,
#vm #howto a,
#vm article .read_download,
.search article.vm .read_download {
	background: #2995cc;
}

.download .top section.vm a:hover {
    background: #2180c2;
}

.download .top section.ot a,
#ot #howto a,
#ot article .read_download,
.search article.ot .read_download {
	background: #4da621;
}

.download .top section.ot a:hover {
    background: #3e941a;
}


/* @end */

/* @group Top Page */

.download .top .frame:before,
.download .top .frame:after {
	content: "";
	display: block;
	overflow: hidden;
}

.download .top .frame:after {
	clear: both;
}

.download .top section {
    display: block;
    float: left;
    margin: 20px 0 0 20px;
}

.download .top section a {
    display: block;
/*	opacity: .8;*/
/*    background: #000000;*/
    box-shadow: rgba(0,0,0,0.25) 0 0 2px;
}

.download .top section a:hover {
/*	opacity: 1;*/
	box-shadow: rgba(0,0,0,0.25) 0 3px 8px;
}

/* @end */

/* @group Archive Page */

/* @group for subnav */

.subnav .categories {
    float: right;
}

.subnav .categories li {
    float: left;
}

.subnav .categories li a {
    display: table-cell;
	height: 44px;
	padding: 0 27px;
    vertical-align: middle;
	text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.subnav .categories li a::before {
	display: inline-block;
	margin-top: -4px;
	margin-right: 5px;
	vertical-align: middle;
	width: 16px;
	height: 16px;
}

.subnav .categories .is a::before {
	content: url("../img/icn-is.svg");
}

.subnav .categories .it a::before {
	content: url("../img/icn-it.svg");
}

.subnav .categories .pp a::before {
	content: url("../img/icn-pp.svg");
}

.subnav .categories .vm a::before {
	content: url("../img/icn-vm.svg");
}

.subnav .categories .ot a::before {
	content: url("../img/icn-ot.svg");
}

.subnav .categories .is a {
	color: #cc8100;
}

.subnav .categories .it a {
	color: #e55082;
}

.subnav .categories .pp a {
	color: #b450e5;
}

.subnav .categories .vm a {
	color: #2995cc;
}

.subnav .categories .ot a {
	color: #4da621;
}

.subnav .categories a:hover {
	background: #e0e0e0;
}

#is .subnav .categories .is a,
#it .subnav .categories .it a,
#pp .subnav .categories .pp a,
#vm .subnav .categories .vm a,
#ot .subnav .categories .ot a {
	background: #f2f2f2;
}

/* @end */

/* @group for header & fotter */

.download .info,
.download .menu {
    padding: 20px 20px 0;
}

.download .info:before,
.download .info:after,
.download .menu:before,
.download .menu:after {
	content: "";
	display: block;
	overflow: hidden;
}

.download .info:after,
.download .menu:after {
	clear: both;
}

.download #description {
    display: inline-block;
    float: left;
}

.download .btn {
	float: right;
	min-width: 300px;
}

.download .btn a {
	display: inline-block;
	padding: 10px 20px;
	text-align: center;
	opacity: .8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.download #howto a {
	background: #000000;
	border: 1px solid rgba(0,0,0,0.1);
	color: #ffffff;
}

/*.download #notice a {
	background: #ffffff;
	border: 1px solid rgba(0,0,0,0.2);
	color: #000000;
}*/

.download .btn a:hover {
	opacity: 1;
}

.download .btn a strong {
}

.download #howto a strong::before {
    display: inline-block;
	content: url("../img/icn-question.svg");
	width: 16px;
	height: 16px;
	margin: -4px 5px 0 0;
	vertical-align: middle;
}

.download #notice a strong {
    font-weight: normal;
}

.download .btn span {
	display: block;
	font-size: 78.6%;
}

.download #howto a span {
	color: #ffffff;
}

.download #notice a span {
	color: #000000;
	opacity: .6;
}

/* @end */

/* @group menu for inside */

header.menu {
    margin: 10px 0 0;
	font-size: 85.7%;
	line-height: 1.2;
}

header.menu:first-child{
    margin: 0;
}

header.menu ul {
    display: table;
	width: 940px;
	background: #808080;
}

header.menu li {
	float: left;
}

header.menu li a {
    display: table-cell;
    height: 26px;
	padding: 2px 15px 0 10px;
	color: #ffffff;
	opacity: .5;
	vertical-align: middle;
	-webkit-font-smoothing: antialiased;
}

header.menu li a:hover {
	opacity: .8;
	background: #262626;
}

header.menu li a::before {
	display: inline-block;
	vertical-align: middle;
	padding: 0 5px;
	margin-top: -3px;
	width: 16px;
	height: 16px;
	content: url("../img/icn-nothing.svg");
}

/* @group is */

header.menu .artboard a::before {
	content: url("../img/icn-is-artboard.svg");
}

header.menu .item a::before {
	content: url("../img/icn-is-item.svg");
}

header.menu .export a::before {
	content: url("../img/icn-is-export.svg");
}

header.menu .layer a::before {
	content: url("../img/icn-is-layer.svg");
}

header.menu .move a::before {
	content: url("../img/icn-is-move.svg");
}

header.menu .select a::before {
	content: url("../img/icn-is-select.svg");
}

header.menu .symbol a::before {
	content: url("../img/icn-is-symbol.svg");
}

header.menu .text a::before {
	content: url("../img/icn-is-text.svg");
}

header.menu .utility a::before {
	content: url("../img/icn-is-utility.svg");
}

header.menu .view a::before {
	content: url("../img/icn-is-view.svg");
}

/* @end */

/* @group it */

header.menu .basic a::before {
	content: url("../img/icn-it-basic.svg");
}

header.menu .uses a::before {
	content: url("../img/icn-it-uses.svg");
}

/* @end */

/* @group pp */

header.menu .ideasketch a::before {
	content: url("../img/icn-pp-ideasketch.svg");
}

header.menu .stationery a::before {
	content: url("../img/icn-pp-stationery.svg");
}

header.menu .sign a::before {
	content: url("../img/icn-pp-sign.svg");
}

/* @end */

/* @group vm */

header.menu .apple a::before {
	content: url("../img/icn-vm-apple.svg");
}

header.menu .libratone a::before {
	content: url("../img/icn-vm-libratone.svg");
}

/* @end */

/* @group ot */

header.menu .keyboardmaestro a::before {
	content: url("../img/icn-ot-keyboardmaestro.svg");
}

header.menu .appicon a::before {
	content: url("../img/icn-ot-appicon.svg");
}

header.menu .photoshop a::before {
	content: url("../img/icn-ot-photoshop.svg");
}

header.menu .alfred a::before {
	content: url("../img/icn-ot-alfred.svg");
}

header.menu .shortcut a::before {
	content: url("../img/icn-ot-shortcut.svg");
}

/* @end */

#artboard header.menu ul li.artboard a,
#item header.menu ul li.item a,
#export header.menu ul li.export a,
#layer header.menu ul li.layer a,
#move header.menu ul li.move a,
#select header.menu ul li.select a,
#symbol header.menu ul li.symbol a,
#text header.menu ul li.text a,
#utility header.menu ul li.utility a,
#view header.menu ul li.view a,
#basic header.menu ul li.basic a,
#uses header.menu ul li.uses a,
#ideasketch header.menu ul li.ideasketch a,
#apple header.menu ul li.apple a,
#libratone header.menu ul li.libratone a,
#keyboardmaestro header.menu ul li.keyboardmaestro a,
#appicon header.menu ul li.appicon a,
#photoshop header.menu ul li.photoshop a,
#alfred header.menu ul li.alfred a,
#shortcut header.menu ul li.shortcut a {
	background: #000000;
	opacity: .8;
}

/* @end */


.download .articles h1 {
	padding: 12px 15px 0 15px;
}

.download .articles .notice h1 {
    padding: 0;
}

.download .articles h1 strong {
    display: block;
    overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #1a1a1a;
	font-weight: normal;
}

.download .articles h1 span {
    margin-top: 4px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	font-size: 78.6%;
	color: #808080;
}

.download .articles .read_download {
	padding: 5px;
    border: 1px solid rgba(0,0,0,0.1);
	line-height: 1;
    text-align: center;
	opacity: .8;
}

.download .articles a:hover .read_download {
	opacity: 1;
}

/* @end */

/* @end */

/* @group Search & Tag */

.search #pagebody section > h1,
.tag #pagebody section > h1 {
    margin: 20px 20px -5px;
    line-height: 1.6;
}

.search #pagebody section > h1 strong,
.tag #pagebody section > h1 strong {
    margin-right: 6px;
    font-size: 114.3%;
    font-weight: normal;
	color: #383838;
}

.search #pagebody section > h1 strong::before,
.tag #pagebody section > h1 strong::before {
    content: url(../img/icn-notes.svg);
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 0 2px 0 5px;
    vertical-align: top;
    opacity: .5;
}

.search #pagebody #download > h1 strong::before {
    content: url(../img/icn-download.svg);
}

.search #pagebody section > h1 span,
.tag #pagebody section > h1 span {
	font-size: 85.7%;
	color: #b3b3b3;
}

.search #pagebody #notes p.description,
.tag #pagebody #notes p.description {
	overflow: hidden;
	padding: 14px 15px 0;
	height: 3em;
	line-height: 1.5;
}

.search #notes ul,
.tag #notes ul {
	padding: 8px 15px 12px;
	font-size: 85.7%;
	line-height: 1.5;
	color: #b3b3b3;
}

.search #notes ul:before,
.search #notes ul:after,
.tag #notes ul:before,
.tag #notes ul:after {
	content: "";
	display: block;
	overflow: hidden;
}

.search #notes ul:after,
.tag #notes ul:after {
	clear: both;
}

.search #notes .date,
.tag #notes .date {
	float: left;
}

.search #notes .readmore,
.tag #notes .readmore {
	float: right;
	opacity: .8;
}

.search #notes a:hover .readmore,
.tag #notes a:hover .readmore {
	opacity: 1;
}

.search #download article h1 {
	padding: 12px 15px 0 15px;
}

.search #download h1 article strong {
    display: block;
    overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #1a1a1a;
	font-weight: normal;
}

.search #download article h1 span {
    margin-top: 4px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	font-size: 78.6%;
	color: #808080;
}

.search #download .read_download {
	padding: 5px;
    border: 1px solid rgba(0,0,0,0.1);
	line-height: 1;
    text-align: center;
	opacity: .8;
}

.search #download a:hover .read_download {
	opacity: 1;
}

.search .notice,
.single .notfound .notice,
.download .archive #notice .notice {
	width: 280px;
	margin: 20px 0 0 20px;
    padding: 20px 10px;
	background: #e6e6e6;
	border: 1px solid #bfbfbf;
    text-align: center;
}

.single .notfound .notice {
	margin: 20px 0 0;
    padding: 20px 10px;
}

.search .notice strong,
.single .notfound .notice strong,
.download .archive #notice .notice strong {
    font-weight: normal;
}

.search .notice span,
.single .notfound .notice span,
.download .archive #notice .notice span {
	display: block;
	font-size: 78.6%;
	color: #999999;
}


.single .notfound .notice h1 {
    margin: 0;
}

.single .notfound .notice span {
	font-weight: normal;
}



/* @end */

/* @end */

/* @group social */

#social {
	background: #fff;
}

#social .frame:before,
#social .frame:after {
	content: "";
	display: block;
	overflow: hidden;
}

#social .frame:after {
	clear: both;
}

#share {
    display: inline-block;
}

#social .only #share {
    display: block;
    text-align: center;
}

#share li {
	display: inline-block;
	line-height: 1;
	margin-right: 3px;
}

#share li a {
	display: block;
	padding: 6px 9px 4px 7px;
	background: #ffffff;
	border: 1px solid #bbbbbb;
	text-align: center;
}

#share li a:hover,
#share li a:active {
	border: 1px solid #888888;
}

#share li a img {
	margin-bottom: 2px;
	vertical-align: text-top;
}

#share li a span {
    display: inline-block;
    padding-left: 3px;
}

#share li.tw a span {
	color: #68a9de;
}

#share li.fb a span {
	color: #3b5897;
}

#share li.gp a span {
	color: #dc4a39;
}

#share li.hb a span {
	color: #218ede;
}

#comment {
	float: right;
	width: 460px;
}

/* @end */

/* @group error */

.error #pagebody section {
    padding: 46px 0 0;
    text-align: center;
    color: #616161;
}

.error #pagebody h1 {
    font-size: 171.4%;
}

.error #pagebody p {
    margin: 10px 0 0;
}

/* @end */

/* @group howto-notice */

main.howto-notice {
}

main.howto-notice header {
    padding: 0 0 10px;
}

main.howto-notice section {
    margin: 60px 20px 0;
    font-size: 114.3%;
    line-height: 2;
}

main.howto-notice section:before,
main.howto-notice section:after {
	content: "";
	display: block;
	overflow: hidden;
}

main.howto-notice section:after {
	clear: both;
}


main.howto-notice section > h1 {
    padding-bottom: 10px;
    border-top: solid 1px #c1c1c1;
    line-height: 1.4;
}

main.howto-notice section > h1 span {
    display: inline-block;
    margin-top: -0.7em;
    padding: 0 20px 0 30px;
    background-color: #f2f2f2;
    background-image: url("../img/icn-howto.svg");
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: 0 0;
    color: #606060;
    font-size: 114.3%;
}

main.howto-notice #notice > h1 span {
    background-image: url("../img/icn-notice.svg");
    color: #bf3030;
}

main.howto-notice section p,
main.howto-notice section dl,
main.howto-notice section ul,
main.howto-notice section h2 {
    margin: 20px 0 0;
}

main.howto-notice section h2 {
    font-weight: bold;
}

main.howto-notice section h2 + p {
    margin: 0;
}

main.howto-notice section ul {
    margin-left: 1.8em;
}
main.howto-notice section ul li {
    list-style: outside;
}

main.howto-notice section dt {
    font-weight: bold;
}

main.howto-notice section .pass dd {
    margin: 10px 0 0;
    padding: 10px 16px;
    background: #d8d8d8;
    border-radius: 2px;
}

main.howto-notice .column {
    width: 460px;
}

main.howto-notice .column:first-child {
    margin-right: 20px;
}

main.howto-notice #pagebody a {
    color: #0090d9;
}

main.howto-notice #pagebody a:hover,
main.howto-notice #pagebody a:active {
    color: #005899;
}


/* @end */

/* @group donate */

.download #donate #pagebody .frame {
    padding-bottom: 80px;
}

.download #donate .donate {
    width: 460px;
    margin: 24px auto 0;
}

.download #donate .donate a {
    display: block;
    padding: 10px 20px 14px;
    background: #00a2e0;
    border: 1px solid rgba(0,0,0,0.1);
    color: #ffffff;
    opacity: .8;
    box-shadow: rgba(0,0,0,0.25) 0 0 2px;
}

.download #donate .donate a:hover,
.download #donate .donate a:active {
    color: #ffffff;
    opacity: 1;
	box-shadow: rgba(0,0,0,0.25) 0 2px 6px;
}

.download #donate .donate dl {
    margin: 0;
    line-height: 1.2;
    padding-left: 60px;
    min-height: 45px;
    -webkit-font-smoothing: antialiased;
    background-image: url(../img/icn-donate.svg);
    background-size: 48px 48px;
    background-position: 0 0;
    background-repeat: no-repeat;
}

.download #donate .donate dl dt {
    font-weight: normal;
    font-size: 150%;
}

.download #donate #pagebody  div.donate dl dd {
    display: inline-block;
    opacity: .7;
    font-size: 78.6%;
}

.download #donate .donate dd:first-of-type::after {
    content: "　";   
}

/* @end */