@charset "UTF-8";

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

   絵文字キャラ編集ツール Emoji Tools

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



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

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

/* ----- fieldsetのスタイル ----- */
#content fieldset {
margin: 0;
padding: 0;
border: none;
}

/* ----- セクション共通 ----- */
#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 {

}
#content section.operation section h3 {
margin: 0 0 5px;
font-size: 1.4rem;
line-height: 1.4;
}

/* ----- 人物 ----- */
#content section.person {
margin: 30px 0 30px;
}

#content section.person div.inner {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}

#content section.person button {
display: block;
padding: 12px 5px 10px;
background: #ffffff;
border: 1px #c0c0c0 solid;
border-radius: 7px;
font-size: 14px;
line-height: 1.2;
}
#content section.person button:hover {
background: #e5f8ff;
}
#content section.person button.current {
background: #fff8e5;
border: 1px #ff6565 solid;
}
#content section.person button b {
display: block;
height: 40px;
margin: 0 0 7px;
font-size: 40px;
text-align: center;
}

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

/* ----- レイアウト ----- */
#content div.wrap {
display: flex;
column-gap: 30px;
}

/* ----- セッティング ----- */
#content div.set {
width: 50%;
}

#content div.set section {
margin: 0 0 20px;
}
#content div.set section:last-child {
margin: 0;
}
#content div.set section h3 {
margin: 0 0 10px;
padding: 8px 5px 7px;
background: #e5f8ff;
font-size: 1.1rem;
line-height: 1;
}

#content div.set section div.inner {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}

#content div.set section label {
display: block;
padding: 9px 6px 8px;
background: #f5f5f5;
font-size: 15px;
text-align: left;
}
#content div.set section label.current {
background: #ffe5cc;
}

/* 無効時のスタイル */
#content div.set section fieldset[disabled] h3 {
background: #f7f7f7;
color: #afafaf;
}
#content div.set section fieldset[disabled] label {
background: #f7f7f7;
color: #afafaf;
}

/* ----- 絵文字の表示 ----- */
#content section.display {
width: 50%;
padding: 20px 20px;
background: #f5f5f5;
}

#content section.display div.emoji {
display: flex;
align-items: center;
column-gap: 20px;
width: 360px;
margin: 0 auto 15px;
}
#content section.display div.emoji dl {
width: 170px;
padding: 20px 10px;
background: #ffffff;
border-radius: 7px;
}
#content section.display div.emoji dl dt {
margin: 0 0 15px;
font-size: 14px;
}
#content section.display div.emoji dl dd {
height: 90px;
font-size: 90px;
}
#content section.display div.emoji dl dd img {
margin: -3px 0 0;
}

#emojiCopy,
#codePut,
#codeCopy {
font-family: sans-serif;
}

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

#content section.display div.code {
margin: 40px 0 0;
}
#content section.display div.code p:first-child {
margin: 0 0 10px;
}
#codePut {
width: 100%;
padding: 3px;
font-size: 15px;
}
#codeCopy {
padding: 4px 7px 3px;
font-size: 14px;
}

/* ----- 説明 ----- */
#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 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 h3 {
font-size: 18px;
}

/* ----- 人物 ----- */
#content section.person {
margin: 20px 0 15px;
}

#content section.person div.inner {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 5px;
max-width: 625px;
margin: 0 auto;
}

#content section.person button {
padding: 5px 2px 4px;
font-size: 13px;
}
#content section.person button:hover {
background: #ffffff;
}
#content section.person button.current {
background: #fff8e5;
}
#content section.person button b {
height: 22px;
margin: 0 0 4px;
font-size: 22px;
}

/* ----- レイアウト ----- */
#content div.wrap {
display: block;
}

/* ----- 絵文字の表示 ----- */
#content section.display {
width: auto;
margin: 0 0 10px;
padding: 10px 10px;
}

#content section.display div.emoji {
justify-content: space-around;
column-gap: 15px;
width: 100%;
max-width: 400px;
margin: 0 auto 10px;
}
#content section.display div.emoji dl {
width: 140px;
padding: 15px 10px;
}
#content section.display div.emoji dl dt {
margin: 0 0 10px;
}

#content section.display div.code {
margin: 20px 0 0;
}
#codePut {
max-width: 500px;
}

/* ----- セッティング ----- */
#content div.set {
width: auto;
}

#content div.set section {
margin: 0 0 5px;
}
#content div.set section h3 {
margin: 0 0 5px;
font-size: 16px;
}

#content div.set section div.inner {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 5px;
}

#content div.set section label {
padding: 9px 2px 8px 6px;
}

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

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