@charset "UTF-8";

/*
==================================================

   絵文字の画像変換ツール Emoji Tools

==================================================
*/



/*
==================================================
  コンテンツ
==================================================
*/

/* ----- 文字サイズ ----- */
#content section p,
#content section ul,
#content section dl {
font-size: 0.96rem;
}

/* ----- セクション共通 ----- */
#content > section {
width: 980px;
margin: 0 auto 60px;
}

/* ----- オペレーション ----- */
#content section.operation {
text-align: center;
}
#content section.operation h2 {
margin: 0 0 10px;
font-size: 1.8rem;
line-height: 1.4;
}
#content section.operation p {
line-height: 1.6;
}
#content section.operation p.note {
font-size: 0.9rem;
color: #7f7f7f;
text-align: left;
}

#content section.operation section {
margin: 20px 0;
}
#content section.operation section h3 {
margin: 0 0 8px;
padding: 8px 5px 6px;
background: #e5f8ff;
font-size: 1.4rem;
}
#content section.operation section p {
margin: 0 0 5px;
}

/* ----- NoScript ----- */
#content noscript p {
color: #ff0000;
}

/* ----- フォーム部品 ----- */
#textInput,
#codeOutput,
#content input {
font-family: sans-serif;
}

#textInput,
#codeOutput {
width: 100%;
height: 10em;
padding: 5px;
font-size: 17px;
line-height: 1.2;
}

#content p.img-type label:first-child {
margin: 0 8px;
}

#update {
padding: 4px 7px 3px;
font-size: 15px;
font-weight: bold;
color: #3366ff;
}

#clear {
margin: 0 0 0 15px;
padding: 4px 7px 3px;
font-size: 14px;
}

#codeCopy {
padding: 4px 7px 3px;
font-size: 14px;
}

#content p.text-size input {
margin: 0 3px;
padding: 4px 7px 3px;
font-size: 14px;
}
#content p.text-size input.current {
color: #3366ff;
font-weight: bold;
}

#preview {
padding: 20px 0 18px;
border-top: 1px #aaaaaa dotted;
border-bottom: 1px #aaaaaa dotted;
text-align: left;
line-height: 1.4;
}
#preview img.emoji {
width: 1em;
height: 1em;
margin: 0 0.05em 0 0.1em;
vertical-align: -0.1em;
}
#preview.small {
font-size: 17px;
}
#preview.medium {
font-size: 50px;
}
#preview.large {
font-size: 90px;
}

/* ----- 説明 ----- */
#content section.description {

}
#content section.description h2 {
margin: 0 0 10px;
font-size: 1.6rem;
text-align: center;
line-height: 1.4;
}
#content section.description div.inner {
margin: 0 auto 20px;
padding: 30px;
background: #f5f5f5;
border-radius: 12px;
}
#content section.description div.inner:last-child {
margin: 0 auto;
}

#content section.description p {
margin: 0 0 1em;
line-height: 1.8;
}
#content section.description p:last-child {
margin: 0;
}

#content section.description pre {
margin: 1.2em 0;
line-height: 1.2;
}

#content section.description ul {
margin: 0 0 1em;
padding: 0;
list-style-type: none;
}
#content section.description ul:last-child {
margin: 0;
}
#content section.description ul li {
margin: 0 0 5px;
line-height: 1.4;
}
#content section.description ul li:last-child {
margin: 0;
}

#content section.description dl {
margin: 0 0 1em;
}
#content section.description dl div {
margin: 0 0 20px;
}
#content section.description dl div:last-child {
margin: 0;
}
#content section.description dl dt {
margin: 0 0 1px;
line-height: 1.4;
}
#content section.description dl dd {
margin: 0 0 2px;
line-height: 1.4;
}
#content section.description dl dd:last-child {
margin: 0;
}



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

/* ----- 文字サイズ ----- */
#content section p,
#content section ul,
#content section dl {
font-size: 16px;
}

/* ----- セクション共通 ----- */
#content > section {
width: auto;
margin: 0 auto 50px;
}

/* ----- オペレーション ----- */
#content section.operation h2 {
font-size: 22px;
}
#content section.operation p.note {
font-size: 14px;
line-height: 1.3;
}

#content section.operation section {
margin: 20px 0;
}
#content section.operation section h3 {
font-size: 16px;
}

#textInput,
#codeOutput {
height: 8em;
padding: 4px;
font-size: 16px;
}

#content p.img-type label:first-child {
margin: 0 12px;
}

#update {
padding: 5px 2px 4px;
font-size: 14px;
}

#clear {
margin: 0 0 0 20px;
padding: 5px 2px 4px;
font-size: 13px;
}

#codeCopy {
padding: 5px 2px 4px;
font-size: 13px;
}

#content p.text-size input {
margin: 0 8px;
padding: 5px 7px 4px;
font-size: 13px;
}

#preview.small {
font-size: 16px;
}
#preview.medium {
font-size: 40px;
}
#preview.large {
font-size: 80px;
}

/* ----- 説明 ----- */
#content section.description h2 {
font-size: 18px;
}
#content section.description div.inner {
padding: 25px 15px;
border-radius: 10px;
}

}
/* ----- /899 ----- */