@charset "UTF-8";

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

   絵文字の意味確認ツール Emoji Tools

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



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

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

/* ----- テーブル共通 ----- */
#content table {
width: 100%;
background: #ffffff;
border-collapse: collapse;
}
#content table,
#content table th,
#content table td {
border: 1px #c0c0c0 solid;
}

/* ----- 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 section {
margin: 20px 0;
}
#content section.operation section h3 {
margin: 0 0 2px;
font-size: 1.4rem;
line-height: 1.4;
}

/* ----- 入力欄 ----- */
#content div.input {
margin: 0;
}

#content div.input fieldset p:first-child {
margin: 0 0 10px;
}

#content div.input span.emoji {
font-size: 20px;
}

#charInput {
width: 290px;
padding: 3px;
border: 2px #7f7f7f solid;
border-radius: 5px;
font-size: 25px;
font-family: sans-serif;
}

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

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

#msgBox {
height: 20px;
margin: 10px 0 0;
font-size: 16px;
}

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

/* ----- 絵文字データの表示 ----- */
#content div.display {
display: flex;
column-gap: 40px;
padding: 40px;
background: #f5f5f5;
}
#content div.display.none {
display: none;
}

#content div.display div.emoji {
display: flex;
align-items: center;
column-gap: 15px;
width: 320px;
}
#content div.display div.emoji dl {
width: 50%;
padding: 20px 10px;
background: #ffffff;
border-radius: 7px;
}
#content div.display div.emoji dl dt {
margin: 0 0 10px;
font-size: 14px;
}
#content div.display div.emoji dl dd {
height: 80px;
font-size: 80px;
}
#content div.display div.emoji dl dd img {
margin: -3px 0 0;
}
/* ダミーの絵文字 */
#content div.display div.emoji dl dd span.dmy {
display: inline-block;
width: 80px;
height: 80px;
border: 3px #c0c0c0 dashed;
border-radius: 50%;
}

#content div.display div.data {
flex: 1;
}

#content div.display div.data table th,
#content div.display div.data table td {
padding: 11px 10px 10px;
font-size: 15px;
text-align: left;
line-height: 1.5;
}
#content div.display div.data table th {
width: 120px;
background: #e5f8ff;
font-weight: normal;
}

/* ----- 一覧で確認 ----- */
#content section.list {

}
#content section.list h2 {
margin: 0 0 10px;
font-size: 1.4rem;
line-height: 1.4;
text-align: center;
}

#emoji section {
margin: 0 0 8px;
}

#emoji button {
display: flex;
align-items: center;
width: 100%;
padding: 9px 12px 8px;
background: #ffffff;
border: 1px #1466b7 solid;
font-size: 1rem;
font-weight: bold;
text-align: left;
cursor: pointer;
}

#emoji button i.open-arrow {
display: inline-block;
position: relative;
margin: 0 10px 0 0;
width: 28px;
height: 28px;
background: #1466b7;
border-radius: 50%;
}
#emoji button:hover i.open-arrow {
background: #197fe5;
}
#emoji button i.open-arrow::before {
content: '';
position: absolute;
top: 0;
bottom: 4px;
right: 9px;
width: 9px;
height: 9px;
margin: auto;
border-top: 2px #ffffff solid;
border-right: 2px #ffffff solid;
transform: rotate(135deg);
transition: 0.3s;
}
#emoji button[aria-expanded='true'] i.open-arrow::before {
top: 3px;
bottom: 0;
transform: rotate(-45deg);
}

#emoji button span.emoji {
display: inline-block;
margin: 0 5px 0 0;
font-size: 1.2rem;
}

#emoji section > div {
height: auto;
margin: 10px 0 30px;
overflow: hidden;
opacity: 1;
transition: 0.2s ease-out;
}
#emoji section > div.close {
height: 0;
margin: 0;
opacity: 0;
}
#emoji section p.note {
margin: 10px 0 0;
font-size: 0.9rem;
color: #7f7f7f;
line-height: 1.4;
}

#emoji table {

}
#emoji table thead th {
padding: 10px 3px;
background: #e5f8ff;
}
#emoji table tbody th {
padding: 8px 10px;
background: #f4f4f4;
font-weight: normal;
text-align: left;
line-height: 1.4;
}
#emoji table tbody td {
padding: 3px 7px;
text-align: left;
line-height: 1.4;
}
#emoji table thead th:nth-of-type(2),
#emoji table tbody td:nth-of-type(2) {
display: none;
}
#emoji table tbody td:nth-of-type(1) {
width: 80px;
font-size: 35px;
text-align: center;
}
#emoji table tbody td:nth-of-type(3) {
width: 26%;
}
#emoji table tbody td:nth-of-type(4) {
width: 26%;
font-weight: bold;
}
#emoji table tbody tr:hover {
background: #f9f9f9;
}

/* ----- 説明 ----- */
#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 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 table,
#content section dl {
font-size: 16px;
}

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

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

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

/* ----- 入力欄 ----- */
#content div.input fieldset p:first-child {
margin: 0 0 15px;
}

#content div.input span.emoji {
font-size: 20px;
}

#charInput {
width: 240px;
font-size: 22px;
}

#msgBox {
height: 18px;
margin: 10px 0 0;
font-size: 16px;
}

/* ----- 絵文字データの表示 ----- */
#content div.display {
display: block;
padding: 20px 15px;
}

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

#content div.display div.data table th,
#content div.display div.data table td {
padding: 6px 5px 5px;
}
#content div.display div.data table th {
width: 70px;
}

/* ----- 一覧で確認 ----- */
#content section.list h2 {
font-size: 18px;
}

#emoji button {
padding: 10px 10px 9px;
font-size: 16px;
}

#emoji button i.open-arrow {
margin: 0 5px 0 0;
width: 24px;
height: 24px;
}
#emoji button:hover i.open-arrow {
background: #1466b7;
}
#emoji button i.open-arrow::before {
top: 0;
bottom: 2px;
right: 8px;
width: 8px;
height: 8px;
}
#emoji button[aria-expanded='true'] i.open-arrow::before {
top: 3px;
bottom: 0;;
}

#emoji button span.emoji {
margin: 0 3px 0 0;
font-size: 19px;
}

#emoji table thead th {
padding: 10px 3px;
background: #e5f8ff;
}
#emoji table tbody th {
padding: 6px 10px 5px;
background: #f4f4f4;
font-weight: normal;
text-align: left;
line-height: 1.4;
}
#emoji table tbody td {
padding: 4px 7px 3px;
text-align: left;
line-height: 1.4;
}
#emoji table thead th:nth-of-type(2),
#emoji table tbody td:nth-of-type(2),
#emoji table thead th:nth-of-type(3),
#emoji table tbody td:nth-of-type(3) {
display: none;
}
#emoji table tbody td:nth-of-type(1) {
width: 50px;
font-size: 25px;
}
#emoji table tbody td:nth-of-type(4) {
width: 40%;
}
#emoji table tbody tr:hover {
background: #ffffff;
}

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

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