@charset "UTF-8";

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

   Webツール

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



/*
==================================================
  レイアウト
==================================================
*/

#main {
width: 100%;
margin: 0;
}
#content {
margin: 0;
padding: 15px 0 1px;
background-color: #ffffff;
box-shadow: 0 0 3px 0 #c0c0c0;
}



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

#main {
margin: 0 0 30px;
}
#content {
padding: 10px 0 1px;
}

}
/* ----- /767 ----- */



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

/* ----- 概要 ----- */
#content div.intro {
margin: 0 20px 10px;
padding: 5px;
background-color: #fffdee;
border-width: 1px;
border-color: #ececec #c0c0c0 #c0c0c0 #ececec;
border-style: solid;
}
#content div.intro div.inner {
margin: 0;
padding: 1.3em 15px 0.1em;
border-width: 1px;
border-color: #c0c0c0 #ececec #ececec #c0c0c0;
border-style: solid;
}
#content div.intro p {
margin: 0 0 1em;
line-height: 160%;
}

/* ----- 結果の見出し ----- */
#content div.contentHeader {
margin: 0 20px 10px;
padding: 2px;
background-color: #fffdee;
border-width: 1px;
border-color: #ececec #c0c0c0 #c0c0c0 #ececec;
border-style: solid;
}
#content div.contentHeader h2 {
margin: 0;
padding: 6px 15px 4px;
border-width: 1px;
border-color: #c0c0c0 #ececec #ececec #c0c0c0;
border-style: solid;
text-align: center;
font-size: 120%;
color: #ff0000;
line-height: 120%;
}

/* ----- Ads ----- */
#content aside.adsTop {
margin: 0 20px;
padding: 0 0 10px;
border-bottom: 1px #aaaaaa dotted;
}
#content aside.adsTop div.label {
/* display: none; */
margin: 0 0 10px;
}
#content aside.adsTop div.label span {
padding: 2px 4px;
background-color: #efefef;
font-size: 80%;
color: #9f9f9f;
}
#content aside.adsTop div.responsive {
width: 728px;
height: 90px;
}
.page_top {
width: 728px;
height: 90px;
}

/* ----- セクション ----- */
#content section.operation,
#content div.operation,
#content section.description,
#content section.display {
padding: 1.6em 20px 1em;
}
#content section.error {
padding: 0em 20px 1em;
}
#content .operation div.inner,
#content .description div.inner,
#content .error div.inner {
padding: 0 10px;
}
#content section p,
#content div p {
margin: 0 0 1em;
line-height: 180%;
}

/* ----- セクション内 ----- */
/* 見出し */
#content .operation h2,
#content .description h2,
#content .error h2 {
margin: 0 0 20px;
padding: 8px 10px 7px;
background-color: #ffd67b;
font-size: 100%;
line-height: 120%;
}
/* 部品ラベル */
#content .operation label.nr {
white-space: nowrap;
}

/* ----- 操作フォーム ----- */
/* フォーム */
#content form {
margin: 0 0 1.5em;
}

#content input[type="text"],
#content input[type="submit"],
#content input[type="reset"],
#content input[type="button"],
#content textarea,
#content select {
box-sizing: border-box;
font-size: 95%;
font-family: "メイリオ", Arial, sans-serif;
}
#content input[type="text"],
#content textarea {
padding: 3px;
}
#content input[type="submit"],
#content input[type="reset"],
#content input[type="button"] {
padding: 4px 7px 3px;
}
#content textarea {
line-height: 120%;
}

/* ----- 操作テーブル ----- */
#content .operation table.set {
margin: 0 0 1em;
background-color: #ffffff;
border-collapse: separate;
}
/* 境界線 */
#content .operation table.set,
#content .operation table.set th,
#content .operation table.set td {
border: none;
}
/* キャプション */
#content .operation table.set caption {
padding: 0 0 3px;
text-align: left;
font-weight: bold;
}
/* 列グループ */
#content .operation table.set colgroup col.groupName {
background-color: #f2f2f2;
}
#content .operation table.set colgroup col.groupEntry {
background-color: #f9f9f9;
}
/* 見出しセル */
#content .operation table.set th {
padding: 8px 5px 6px;
background-color: #deefff;
line-height: 100%;
}
/* データセル */
#content .operation table.set td {
min-width: 3em;
padding: 3px 5px;
line-height: 120%;
}
#content .operation table.set td span {
font-size: 90%;
}

/* ----- 横並びボックス ----- */
#content .operation .twin h3 {
margin: 0 0 3px;
font-size: 100%;
line-height: 120%;
}
#content .operation .twin div.set1,
#content .operation .twin div.set2 {
width: 49%;
}
#content .operation .twin div.set1 {
float: left;
}
#content .operation .twin div.set2 {
float: right;
}
/* テーブル */
#content .operation .twin table.set {
width: 100%;
}

/* ----- プレビュー ----- */
#content .operation div.preview {
margin: 0 0 20px;
padding: 20px 0;
border-top: 1px #aaaaaa dotted;
border-bottom: 1px #aaaaaa dotted;
}

/* ----- コード ----- */
#content .operation .code {
margin: 0 0 25px;
}
#content .operation .code h3 {
margin: 0 0 3px;
font-size: 100%;
line-height: 120%;
}
#content .operation .code h3 span {
font-weight: normal;
}
#content .operation .code p {
margin: 0 0 5px;
line-height: 140%;
}

/* ----- 説明 ----- */
/* ボックス */
#content section.description div.box {
margin: 0 0 1.5em;
padding: 1.2em 15px 0.1em;
background-color: #fffdee;
border: 1px #c0c0c0 dotted;
}
/* 表 */
#content section.description table {
margin: 0 0 1.5em;
}

/* エラーメッセージ */
#content section.error div.msg {
padding: 0 0 150px;
}

/* ----- 一般リスト（UL） ----- */
#content ul {
margin: 0 0 1em;
padding: 0;
list-style-type: none;
}
#content ul li {
line-height: 140%;
}
#content section.description ul {
margin: 0 0 1.5em;
}
/* 項目 */
#content section.description ul li {
padding: 0 0 1em 20px;
background: url(../../image/marks/list.gif) no-repeat left top;
}
/* 項目（リストマークなし） */
#content section.description ul.nm li {
padding: 0 0 5px 0;
background: none;
}
/* 項目（ショートカット） */
#content ul.shortcut li {
padding: 0 0 5px 23px;
background: url(../../image/marks/file_s.gif) no-repeat left 0.1em;
}

/* ----- ノートリスト（UL） ----- */
/* 項目 */
#content ul.note li,
#content section.description ul.note li {
margin: 0 0 0 1em;
padding: 0 0 3px;
background: none;
text-indent: -1em;
}
#content ul.note li::before {
content: "※";
}

/* ----- 記述リスト（DL） ----- */
#content dl {
margin: 1.3em 0 1.3em;
}
/* 用語 */
#content dl dt {
margin: 1.2em 0 4px;
line-height: 120%;
font-weight: bold;
}
#content dl dt span {
font-weight: normal;
}
/* 説明 */
#content dl dd {
margin: 0 0 4px 1em;
line-height: 130%;
}
#content dl dd p {
margin: 0 0 0.7em;
}
#content dl dd figure {
margin: 0.7em 0;
}
#content dl dd figure p {
margin: 0;
}

/* ----- Ads ----- */
#content aside.adsBottom {
margin: 0 0 40px;
padding: 20px 20px 0;
}
#content aside.adsBottom div.label {
/* display: none; */
margin: 0 0 10px;
}
#content aside.adsBottom div.label span {
padding: 2px 4px;
background-color: #efefef;
font-size: 80%;
color: #9f9f9f;
}
/*
#content aside.adsBottom div.responsive {
width: 728px;
height: 90px;
}
.page_bottom {
width: 728px;
height: 90px;
}
*/
#content aside.adsBottom div.responsive {
width: 100%;
}
.page_bottom {
max-width: 728px;
min-height: 250px;
max-height: 280px;
}



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

#content div.intro {
margin: 0 5px 10px;
padding: 5px;
}
#content div.intro div.inner {
padding: 1.2em 5px 0.1em;
}

#content div.contentHeader {
margin: 0 5px 20px;
}
#content div.contentHeader h2 {
padding: 6px 5px 4px;
font-size: 100%;
}

#content aside.adsTop {
margin: 0;
padding: 20px 0 60px;
text-align: center;
}
#content aside.adsTop div.label {
display: block;
margin: 0 0 20px;
}
#content aside.adsTop div.responsive {
width: 320px;
height: 100px;
margin: 0 auto;
}
.page_top {
width: 320px;
height: 100px;
}

#content section.operation,
#content div.operation,
#content section.description,
#content section.display {
padding: 1.6em 5px 0.6em;
}
#content section.error {
padding: 0em 5px 0.6em;
}
#content .operation div.inner,
#content .description div.inner,
#content .error div.inner {
padding: 0;
}

#content .operation h2,
#content .description h2,
#content .error h2 {
padding: 8px 5px 7px;
}

#content .operation table.set td {
line-height: 160%;
}
#content .operation table.set td span {
font-size: 100%;
}

#content .operation .twin div.set1,
#content .operation .twin div.set2 {
width: 100%;
float: none;
margin: 0 0 40px;
}

#content .operation div.over {
width: 100%;
margin: 0 0 10px;
overflow: auto;
}
#content .operation div.over::-webkit-scrollbar{
height: 5px;
}
#content .operation div.over::-webkit-scrollbar-track{
background-color: #efefef; 
}
#content .operation div.over::-webkit-scrollbar-thumb {
background-color: #c0c0c0; 
}

#content .operation div.preview {
margin: 0 0 30px;
padding: 30px 0;
}

#content section.description div.box {
padding: 1.2em 10px 0.1em;
}

#content aside.adsBottom {
margin: 0 0 40px;
padding: 50px 0 50px;
text-align: center;
}
#content aside.adsBottom div.label {
display: block;
margin: 0 0 20px;
}
/*
#content aside.adsBottom div.responsive {
width: 100%;
height: auto;
}
.page_bottom {
width: 100%;
height: auto;
min-height: 250px;
max-height: 280px;
}
*/
.page_bottom {
max-width: 336px;
margin: 0 auto;
}

}
/* ----- /767 ----- */