/*	=======================================================
	HP&Docsのスタイルシート
	=======================================================	*/

/*	--------------------------------------
	基本設定
	--------------------------------------	*/
html {
    color: #666;
    font-size: 11pt;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}
@media (max-width: 500px) {
    html {
        font-size: 8pt;
    }
    .mobile_off {
        display: none !important;
    }
}
@media (min-width: 501px) {
    .mobile_on {
        display: none !important;
    }
}
body {
    margin: 0;
    padding: 0;
}
@font-face {
    font-family: "lowline-only";
    src: local("Hiragino Sans"), local("Hiragino-Sans"), local("游ゴシック体"),
        local("YuGothic"), local("Meiryo"), local("Meiryo UI"), local("メイリオ");
    unicode-range: U+005F, U+FF3F;
}

/*	--------------------------------------
	ヘッダー / フッター
	--------------------------------------	*/
body > .header,
body > .footer {
    display: flex;
    position: fixed;
    left: 0;
    z-index: 900;
    width: 100%;
}
body > .header {
    top: 0;
    height: 2.8rem;
    background-color: #1abcbc;
}
body > .footer {
    bottom: 0;
    height: 2.2rem;
    background-color: #ddd;
}
body > .header > div,
body > .footer > div {
    height: 100%;
    bottom: 0;
}
@media (max-width: 500px) {
    body > .header {
        font-size: 14pt;
        height: 4.0rem;
    }
}

/* ロゴ */
body > .header > .logo {
    position: relative;
    cursor: pointer;
    width: 15.0rem;
    height: 2.4rem;
	background-repeat: no-repeat;
    background-position: 1.5rem 0.3rem;
    background-size: auto 2.4rem;
    background-image: url(../img/ab_logo.png);
}
@media (max-width: 500px) {
    body > .header > .logo {
        width: 16.0rem;
        height: 3.6rem;
        background-position: 1.0rem 0.5rem;
        background-size: auto 3.2rem;
    }
}

/* リンク */
body > .header .link {
    padding-top: 1.2rem;
}
body > .header .link a {
    display: inline-block;
    font-size: 85%;
    color: #fff;
    text-decoration: none;
}
body > .header .link a + a {
    padding-left: 1.0rem;
}
body > .header .link a.myself {
    color: #1cd2ce;
    font-weight: bold;
}

/*	--------------------------------------
    コンテンツ
    --------------------------------------	*/
section.contents {
    display: flex;                  /* 左側にメニューを表示するため */
    padding-top: 2.8rem;            /* ヘッダーの高さ               */
    height: calc(100vh - 2.8rem);   /* ヘッダーの高さを差し引く     */
    outline: none;
}
section.contents > div:last-child {
    padding: 1.0rem 1.5rem;
    padding-bottom: 5.0rem;
    flex-grow: 1;
    overflow: auto;
}
div.contents {
    background-color: #fafdfe;
    outline: none;
}
@media (max-width: 500px) {
    section.contents > div:last-child {
        padding: 1.0rem 0.5rem;
    }
}

/*	--------------------------------------
    メニュー開閉ボタン（ハンバーガーメニュー）
    --------------------------------------	*/
.opener {
    display: inline-block;
    position: relative;
    top: 0.3rem;
    left: 0.3rem;
    width: 2.2rem;
    height: 2.0rem;
    cursor: pointer;
}
.tinyapp_header .opener {
    top: 0.1rem;
    left: 0.2rem;
}

/* 三本線 */
.opener_bar {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.33rem;
    border-radius: 0.18rem;     /* height ÷ 2*/
    background-color: #fff;
}
.opener_bar:nth-of-type(1) {
    top: 0;
}
.opener_bar:nth-of-type(2) {
    top: 0.84rem;    /* 「abf_opener_menu.height － span.height」の 1/2 */
}
.opener_bar:nth-of-type(3) {
    bottom: 0;
}

@media (max-width: 500px) {
    .opener {
        position: absolute;
        width: 3.3rem;
        height: 2.8rem;
        left: auto;
        right: 0.5rem;
    }
    .opener_bar {
        height: 0.5rem;
    }
    .opener_bar:nth-of-type(1) {
        top: 0.3rem;
    }
    .opener_bar:nth-of-type(2) {
        top: 1.3rem;
    }
}

#menu_opener {
    display: none;
}
.menu {
    height: 100%;
    overflow: auto;
    border-right: 1px solid #e7f7f7;
    opacity: 1;
    outline: none;
    min-width: 20.0rem;
    max-width: 20.0rem;
    transition: opacity .4s ease-in-out, min-width .4s ease-in-out, max-width .4s ease-in-out;
}
@media (max-width: 500px) {
    .menu {
        height: calc(100% - 4.0rem);
        position: fixed;
        z-index: 899;
        top: 4.0rem;
        right: 0;
        background-color: #fff;
        min-width: 25.0rem;
        max-width: 25.0rem;
        border-left: 2px solid #1abcbc;
    }
}
input:checked + .menu {
    opacity: 0;
    min-width: 1px;
    max-width: 1px;
}
.menu_lv1,
.menu_lv2 {
    position: relative;
    white-space: nowrap;
    padding: 0.15rem 0.2rem;
}
[data-page] {
    cursor: pointer;
}
.header > .logo a,
.menu  a {
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
}
.menu_lv1 {
    color: #fff;
    background-color: #5ad4d4;
    border-bottom: 1px solid #1abcbc;
}
.menu_lv2 {
    color: #1abcbc;
    padding-left: 0.4rem;
    cursor: pointer;
}
.menu_lv2 + .menu_lv1 {
    border-top: 1px solid #1abcbc;
}
.menu_lv2 + .menu_lv2 {
    border-top: 1px solid #ccc;
}
.menu_lv2:last-child {
    border-bottom: 1px solid #ccc;
}
@media (max-width: 500px) {
    .menu_lv1,
    .menu_lv2 {
        padding: 0.3rem 0.2rem;
        padding-left: 1.0rem;
        font-size: 120%;
    }
}
/* 現在選択中のメニュー */
.menu_curr {
    background-color: #ffedc6;
}

/* スクロールバー */
.menu::-webkit-scrollbar {
    width: 0.9rem;
    height: 0.9rem;
    background: #e7f7f7;
}
.menu::-webkit-scrollbar-thumb {
    background: #a2e9e9;
    border-radius: 0.45rem;
}

/*	--------------------------------------
    文章の構成
    --------------------------------------	*/
/* 見出し */
h1,
h2,
h3 {
    position: relative;
    color: #7d99eb;
    font-weight: normal;
}
h1 {
    background-color: #f9fbfd;
    background-color: transparent;
    border-radius: 0.3rem;
    font-size: 1.2rem;
    padding: 0.5rem 2.5rem 0.2rem 2.5rem;
    position: relative;

    box-shadow:
        3px 3px 3px rgba(0,0,0,.1),
        inset 4px 4px 8px rgba(245,245,245,1),
        inset -3px -3px 6px rgba(0,0,0,.05);
    max-width: 55rem;
}
h1 ~ h1 {
    margin-top: 4.0rem;
}
h2 {
    font-size: 1.3rem;
    padding: 0 1.2rem;
    width: 50.0rem;
}
h3 {
    margin-top: 2.0rem;
    display: inline-block;
    padding: 0 2.0rem;
    min-width: 20.0rem;
    margin-bottom: 0.2rem;
}
h2 + h3,
P + h3 {
    margin-top: 1.0rem;
}
h2.nomark,
h3.nomark {
    padding: 0 0.5rem;
}
@media (max-width: 500px) {
    h2 {
        width: calc(100% - 3.0rem);
    }
}

/* 見出しのマーク */
h1::before,
h2:not(.nomark)::before,
h3:not(.nomark)::before {
    content: "";
    display: block;
    position: absolute;
    border-radius: 0.5rem;
    box-shadow: -1px -1px 2px rgba(0,0,0,.3),
        1px 1px 2px rgba(255,255,255,.7),
        inset 1px 1px 2px rgba(0,0,0,.3),
        inset -1px -1px 2px rgba(255,255,255,.7);
    }
h1::before {
    top: 0.6rem;
    left: 0.8rem;
    width: 0.4rem;
    height: 1.6rem;
    background-color: #7d99eb;
}
h2:not(.nomark)::before {
    top: 0.15rem;
    left: 0.2rem;
    width: 0.4rem;
    height: 1.5rem;
    background-color: #7d99eb;
}
h3:not(.nomark)::before {
    top: 0.5rem;
    left: 0.65rem;
    height: 0.8rem;
    width: 0.8rem;
    border-radius: 0.2rem;
    background-color: #afc1f7;
}

/* 見出しの下線 */
h2::after,
h3::after {
    background: transparent;
    box-shadow: 1px 1px 2px rgba(255,255,255,.9),
        -1px -1px 2px rgba(0,0,0,.1),
        inset -1px -1px 2px rgba(255,255,255,.9),
        inset 1px 1px 2px rgba(0,0,0,.12);
    border-radius: 1px;
    content: "";
    display: block;
    height: 2px;
    margin-top: 0.2rem;
}

/* 段落 */
div.ptag,
p {
    padding-left: 0.6rem;
}
h2,
h1 + p,
.actual:not(.snippet) + p {
    margin-top: 3.0rem;
}
h1 ~ h1 + p {
    margin-top: 2.0rem;
}

/* 重要 */
strong {
    color: #f76758;
    font-weight: normal;
    font-size: 1.05rem;
}

/* 短い注釈 */
i {
    display: inline-block;
    padding: 0.2rem 0.2rem;
    font-size: 90%;
    font-style: normal;
    color: #aaa;
}
br + i {
    padding: 0 0;
    font-size: 100%;
}

/* アクセント */
em {
    display: inline-block;
    padding: 0 0.2rem;
    color: #4169e1;
    font-style: normal;
}
em[data-level="1"] {
    color: #f76758;
}

/* 注釈 */
small {
    color: #aaa;
}

/* リスト */
ul {
    margin: 0;
    padding: 0;
    padding-top: 1.0rem;
    padding-left: 2.0rem;
}
ul ul {
    padding-top: 0.5rem;
    padding-left: 0.3rem;
}
ul li {
    list-style-type: none;
    padding-left: 1.4rem;
    position: relative;
}
ul li::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0.35rem;
    left: 0;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    /*  background-color: #4169e1;  */
    background-color: #1abcbc;
}
ul ul li::before {
    top: 0.45rem;
    width: 0.5rem;
    height: 0.5rem;
    /*
    border-radius: 50%;
    background-color: #1cd2ce;
    */
}
ol > li + li,
ul > li + li {
    margin-top: 0.4rem;
}
ol.spaced > li + li,
ul.spaced > li + li {
    margin-top: 1.5rem;
}
ul ul > li + li {
    margin-top: 0.3rem;
}
/* 要点 */
ul.point li,
li .caption,
.fig li .caption {
    color: #1abcbc;
}
ul.point li + li {
    margin-top: 0.8rem;
}
li span {
    color: #666;    /* 基本設定のcolor */
}
/* 順序付きリスト */
ol > li {
    padding-left: 0.5em;
}
ol > li::marker {
    font-weight: bold;
    color: #1abcbc;
}

/*	--------------------------------------
    スクリーンショット
    --------------------------------------	*/
.screenshot input {
    display: none;
}
.screenshot input + span img {
    width: auto;
    height: 15.0rem;
    cursor: pointer;
    border: 1px solid #ccc;
    box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
.screenshot.small input + span img {
    height: 10.0rem;
}
.screenshot.xsmall input + span img {
    height: 8.0rem;
}
.screenshot input:checked + span img {
    height: 30.0rem;
    box-shadow: none;
}
.screenshot.no_spread input:checked + span img {
    height: 15.0rem;
}
.screenshot em {
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding-left: 2.0rem;
}
.screenshot em::before {
    content: "";
    position: absolute;
    display: block;
    top: 0.2rem;
    left: 0.6rem;
	border-top: 0.45rem solid transparent;
	border-bottom: 0.45rem solid transparent;            
	border-right: 0.9rem solid #4169e1;
}

/*	--------------------------------------
    図  ※補足ではないのでfigureを使用しない
    --------------------------------------	*/
.fig {
    margin-left: 2.0rem;
}
.fig .caption {
    color: #1e6197;
}
.fig .caption.mark {
    position: relative;
    padding-left: 1.2rem;
}
.fig .caption.mark::after {
    content: "";
    position: absolute;
    display: block;
    top: 0.3rem;
    left: 0.1rem;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0.2rem;
    background-color: #1e6197;
}
p.fig {
    line-height: 2.0rem;
    margin-top: 0.4rem;
    padding-left: 0;
}
td.fig {
    margin-left: 0;
    padding-left: 2.0rem;
}

/*	--------------------------------------
    模式図
    --------------------------------------	*/
.dia .base {
    padding: 0.6rem;
    padding-top: 0.1rem;
    background-color: #fff;
}
.dia > .base {
    display: inline-block;
}
.dia .item {
    display: inline-block;
    padding: 0.2rem;
}
.dia .box {
    border: 1px solid #aaa;
}
.dia .box + .box:not(.item) {
    border-top: 0;
}
.dia .fill {
    background-color: #eee;
}
.dia .fill_dark {
    background-color: #ddd;
}

/* プラス記号 */
.plus {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    background: #a2e9e9;
    line-height: 1;
    width: 2.0em;
    height: 0.75em;
    border-radius: 0.2em;
}
.plus::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    transform: rotate(90deg);
}

/*	--------------------------------------
    行
    --------------------------------------	*/
.row {
    display: flex;
}
.row > div:last-child.right {
    flex-grow: 1;
    text-align: right;
}
    
/*	--------------------------------------
    伝票
    --------------------------------------	*/
.slip {
    display: inline-block;
    padding: 1.0rem 1.5rem;
    border-radius: 0.25rem;
    border: 1px solid #ccc;
}

/*	--------------------------------------
    表
    --------------------------------------	*/
table + table,
table + .caption {
    margin-top: 0.8rem;
}
table {
    border-collapse: separate;
    border-spacing : 0;
}
th {
    background-color: #eee;
    font-weight: normal;
}
.selected {
    background-color: #87ceeb
}
.num {
    text-align: right;
}
.fix {
    text-align: center;
}
tr.gap > td {
    padding-top: 1.0rem;
}

/* 幅・高さ */
.w3  { width:  3.0rem !important; }
.w4  { width:  4.0rem !important; }
.w5  { width:  5.0rem !important; }
.w6  { width:  6.0rem !important; }
.w7  { width:  7.0rem !important; }
.w8  { width:  8.0rem !important; }
.w9  { width:  9.0rem !important; }
.w10 { width: 10.0rem !important; }
.w12 { width: 12.0rem !important; }
.h1_55 { height:  1.55rem !important; }

/* データ */
table.data {
    border-collapse: separate;
    border-spacing : 0;
    border: 1px solid #ccc;
}
table.data tr + tr > th,
table.data tr + tr > td,
table.data thead + tbody tr:first-child th,
table.data thead + tbody tr:first-child td {
    border-top: 1px solid #ccc;
}
table.data tr + tr > th.line,
table.data tr + tr > td.line {
    border-top: 3px solid #ddebf7;
}
table.data tr + tr > th,
table.data td {
    vertical-align: text-top;
}
table.data th + th,
table.data th + td,
table.data td + th,
table.data td:not([rowspan]) + td {
    border-left: 1px solid #ccc;
}
table.data td[rowspan]:not(:last-child) {
    border-right: 1px solid #ccc;
}
table.data th,
table.data td {
    padding: 0 0.5rem;
    white-space: nowrap;
}
table.data.whiteborder {
    border: none !important;
}
table.data.whiteborder th,
table.data.whiteborder td {
    border-color: #fff !important;
}

/* フェードイン・フェードアウト */
table.data.fadein {
    border-left: none;
}
table.data.fadein th:first-child {
    min-width: 0.5rem;
    background: linear-gradient(270deg, #eee 0%, #eee 55%, #fff 100%);
}
table.data.fadeout {
    border-right: none;
}
table.data.fadeout th + th:last-child {
    min-width: 0.5rem;
    background: linear-gradient(90deg, #eee 0%, #eee 55%, #fff 100%);
}

/* Excel(.dataと共に使う) */
table.excel th   { text-align: center; }
table.excel td   { min-width:  3.0rem; }
table.excel .cap { background-color: #ddebf7; }
table.excel .l_t { border-top:    2px solid #ddebf7; }
table.excel .l_b { border-bottom: 2px solid #ddebf7; }
table.excel .l_l { border-left:   2px solid #ddebf7; }
table.excel .l_r { border-right:  2px solid #ddebf7; }
@media (max-width: 500px) {
    div.excel {
        width: 100%;
        overflow: auto;
    }
}

/* データベースのテーブルレイアウト */
table.db tbody td:nth-child(1) { text-align: center; background-color: #fafafa; }   /* No.  */
table.db tbody td:nth-child(4) { text-align: right; width: 2.0rem; }    /* 桁   */
table.db tbody td:nth-child(5) { text-align: center; }                  /* キー */
table.db tbody td:nth-child(6) { width: 15.0rem; }                      /* 備考   */

tr.gray_row td {
    background-color: #f6f6f6;
}
tr.footer td {
    background-color: #eee;
}
tr.level2 td {
    background-color: #f2f8ff;
}

/* テーブル右端の注釈 */
table.data:has(> tbody > tr > td.remark) {
    border-right: none;
}
th.remark,
td.remark,
tr.remark td {
    background-color: transparent;
    padding: 0 !important;
    max-width: 0;
    font-size: 90%;
}
th.remark,
td.remark {
    border-top: none !important;
}
tr.remark td {
    border-left: none !important;
}
.design th.remark,
.design td.remark {
    color: #00bcd4;
    text-shadow: 1px 2px 3px #aaa; 
}
.remark.stickout {
    text-shadow: none; 
}
.remark.stickout > div {
    padding-left: 3.0rem;
}
/* テーブル下の注釈 */
table.data:has(> tbody > tr.remark) {
    border-bottom: none;
    border-left: none;
}
table.data:has(> tbody > tr.remark) tr:not(.remark) th,
table.data:has(> tbody > tr.remark) tr:not(.remark) td {
    border-left: 1px solid #ccc;
}

/* テーブル横の注釈 */
td:has(.annotation) {
    position: relative;
}
.annotation {
    position: absolute;
    font-size: 90%;
    top: 0.1rem;
    left: 3.0rem;
}

/* カレンダー */
.row.calendar {
    padding: 0 !important;
}
.calendar table.data th {
    background-color: #f6f6f6;
}
.calendar table.data th,
.calendar table.data td {
    text-align: center;
    padding: 0 0.25rem;
}
.calendar span.item {
    display: inline-block;
    border-radius: 2px;
    border: 1px solid #ccc;
    padding: 0 0.5rem;
    width: auto;
}
.calendar.row > div + div {
    padding-left: 0.5rem;
}
.calendar .row > div:nth-child(2) {
    flex-grow: 1;
    text-align: center;
}
.calendar .row > div:first-child,
.calendar .row > div:last-child {
    color: #aaa;
}
.calendar .row > div:last-child {
    text-align: right;
}

/* 項目情報 */
.items {
    display: inline-block;
    overflow: auto;
    margin-top: 0.3rem;
    max-width: calc(100% - 7.0rem);
    border: 1px solid #ccc;
}
.items table {
    border: none;
}
.items td:nth-child(5) { text-align: center; }
.items td:nth-child(7) { text-align: right; }

/*	--------------------------------------
    タイニーAppエディタ
    --------------------------------------	*/
.tinyapp .caption {
    display: inline-block;
    min-width: 8.0rem;
    padding: 0.1rem 0.3rem;
}
.tinyapp_caption,
.tinyapp .caption {
    color: #00bcd4;
    background: #e4fcff;
    border-left: solid 0.3rem #1dc1d6;
}
.tinyapp .grid_ope {
    flex-grow: 1;
    text-align: right;
    padding-right: 1.0rem;
}
.tinyapp .item {
    display: inline-block;
    height: auto;
    line-height: 1.4rem;
    border: 1px solid #aaa;
    border-radius: 2px;
    padding: 0 0.2rem;
}
.tinyapp {
    width: calc(100% - 2.0rem);
}
.row > .tinyapp {
    width: auto;
}
.tinyapp .cond,
.tinyapp .rslt,
.tinyapp .rslt_sub {
    display: inline-block;
    overflow: auto;
    margin-top: 0.3rem;
    max-width: calc(100% - 1.0rem);
    border: 1px solid #ccc;
}
.tinyapp table {
    border: none;
}
.tinyapp + .tinyapp {
    margin-top: 0.3rem;
}
.table_alias {
    color: #ccc;
    min-width: 8.0rem;
}
/* 検索条件の列 */
.tinyapp .cond td:nth-child(1) { min-width: 4.0rem; }
.tinyapp .cond td:nth-child(3) { min-width: 2.0rem; }
.tinyapp .cond td:nth-child(4) { text-align: right; }
.tinyapp:not(.with_id) .cond td:nth-child(6), .tinyapp.with_id .cond td:nth-child(7) { min-width: 4.0rem; }
.tinyapp:not(.with_id) .cond td:nth-child(7), .tinyapp.with_id .cond td:nth-child(8) { min-width: 4.0rem; }
.tinyapp:not(.with_id) .cond td:nth-child(9), .tinyapp.with_id .cond td:nth-child(10) { min-width: 4.0rem; }
/* 検索結果の列 */
.tinyapp .rslt td:not(.w0):nth-child(1) { min-width: 4.0rem; }
.tinyapp .rslt td:not(.w0):nth-child(3) { min-width: 2.0rem; }
.tinyapp .rslt td:not(.w0):nth-child(4) { text-align: right; }
.tinyapp:not(.with_id) .rslt td:not(.w0):nth-child(7),  .tinyapp.with_id .rslt td:nth-child(8) { min-width: 2.0rem; }
.tinyapp:not(.with_id) .rslt td:not(.w0):nth-child(10), .tinyapp.with_id .rslt td:nth-child(11) { text-align: center; }
.tinyapp:not(.with_id) .rslt td:not(.w0):nth-child(11), .tinyapp.with_id .rslt td:nth-child(12) { min-width: 4.0rem; }
.tinyapp:not(.with_id) .rslt td:not(.w0):nth-child(12), .tinyapp.with_id .rslt td:nth-child(13) { min-width: 4.0rem; }
.tinyapp:not(.with_id) .rslt td:not(.w0):nth-child(14), .tinyapp.with_id .rslt td:nth-child(15) { min-width: 4.0rem; }
.tinyapp:not(.with_id) .rslt td:not(.w0):nth-child(15), .tinyapp.with_id .rslt td:nth-child(16) { min-width: 4.0rem; }
.tinyapp:not(.with_id) .rslt td:not(.w0):nth-child(16), .tinyapp.with_id .rslt td:nth-child(17) { padding-left: 0.15rem; }
.tinyapp:not(.with_id) .rslt td:not(.w0):nth-child(17), .tinyapp.with_id .rslt td:nth-child(18) { min-width: 4.0rem; }
/* 検索結果(サブ)の列 */
.tinyapp .rslt_sub td:nth-child(1) { min-width: 4.0rem; }
.tinyapp .rslt_sub td:nth-child(4) { min-width: 2.0rem; }

/* 処理とテーブル */
.tinyapp .caption ~ .selectbox,
.tinyapp > div.selectbox:first-child,
.tinyapp > div.selectbox:first-child + .item {
    min-width: 5.0rem;
}

/* SQL */
.tinyapp .row.sql > div {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
/* 単語一覧 */
.tinyapp > .words {
    display: inline-block;
    border: 1px solid #ccc;
}
.tinyapp .words > div:first-child {
    padding: 0.2rem;
    background-color: #e8e8e8;
    font-size: 90%;
}
.tinyapp .words > div:first-child .selectbox {
    background-color: #fff;
}
.tinyapp .words > table.data {
    width: 100%;
    border-bottom: 1px solid #ccc;
}
.tinyapp .words > table.data .lv1 td {
    color: #00bcd4;
}
.tinyapp .words > table.data .lv2 td {
    color: #777;
    padding-left: 1.0rem;
}
.tinyapp .words > table.data .ins td {
    position: relative;
    padding-right: 1.3rem;
}
.tinyapp .words > table.data .ins td::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 1.0rem;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 0.8rem 0.8rem;
    background-image: url(../img/triangle_r_bbb.png);
}
/* SQLエディタ */
.row.sql > div:last-child {
    position: relative;
    min-width: 30.0rem;
    padding: 0.2rem;
    border-right: 1px solid #ccc;
}
.row.sql > div:last-child > pre {
    margin: 0 0;
    display: inline-block;

    /* 行番号の要素より手前にする */
    position: relative;
    z-index: 10;
    background-color: transparent;
}
/* 行番号 */
.row.sql > div:last-child::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 2.0rem;
    height: 100%;
    background-color: #e8e8e8;
    border-right: 1px solid #ccc;
}
.row.sql > div:last-child > pre > code {
    counter-reset: line-number;
    line-height: 1.3rem;
}
.row.sql > div:last-child > pre > code span.lno {
    counter-increment: line-number;
    display: inline-block;
    position: relative;
    width: 1.6rem;
    padding-right: 0.8rem;
    text-align: right;
}
.row.sql > div:last-child > pre > code span.lno::before {
    content: counter(line-number);
    color: #888;
}

/* 一覧の中のセレクトボックス */
td .selectbox {
    border: none;
}

/* 属性 */
.attribute {
    display: inline-block;
}
.attribute .header {
    padding-left: 0.4rem;
    border: 1px solid #ccc;
    background-color: #eee;
}
.attribute .row:not(.noborder) {
    border: 1px solid #ccc;
}
.attribute .row .selectbox {
    border: none;
    min-width: auto;
}
.attribute .row .selectbox::after {
    background-color: #fff;
    color: #bbb;
}
.selectlist,
.attribute .selectlist {
    display: inline-block;
    font-size: 95%;
    line-height: 1.1rem;
    border: 1px solid #aaa;
    padding: 0.2rem;
    box-shadow: 3px 4px 5px rgba(0,0,0,0.3);
}

/*	--------------------------------------
    用語集
    --------------------------------------	*/
.glossary > tbody > tr > td {
    vertical-align: top;
    border-bottom: 1px solid #ddd;
}
.glossary > tbody > tr > th {
    text-align: left;
    padding-left: 2.0rem;
    border-bottom: 1px solid #ddd;
}
.glossary > tbody > tr > td:first-child {
    color: #47c;
    padding-left: 0.2rem;
}
.glossary > tbody > tr > td:nth-child(2) {
    padding-left: 1.5rem;
    max-width: 50.0rem;
}
.glossary.spaced > tbody > tr > td {
    padding-bottom: 1.0rem;
}

/*	--------------------------------------
    画面イメージ
    --------------------------------------	*/
/* タイニーAppエディタのヘッダー */
.tinyapp_header {
    display: inline-block;
    min-width: 35.0rem;
    border-radius: 0.2rem;
}
.tinyapp_header > div:first-child {
    padding-top: 0.2rem;
    height: 2.5rem;
    background-color: #1abcbc;
    background: linear-gradient(90deg, #1abcbc 0%, #1abcbc 75%, #fff 100%);
}
.tinyapp_header .opener {
    cursor: default;
}
.tinyapp_header .logo {
    position: relative;
    display: inline-block;
    width: 12.0rem;
    height: 2.0rem;
	background-repeat: no-repeat;
    background-position: 1.5rem 0.3rem;
    background-size: auto 2.0rem;
    background-image: url(../img/ab_logo.png);
}
.tinyapp_header > div:last-child {
    padding: 0.5rem;
    background-color: #ddd;
    background: linear-gradient(90deg, #ddd 0%, #ddd 75%, #fff 100%);
}
.tinyapp_header .item,
.tinyapp_header .select {
    display: inline-block;
    position: relative;
    border-radius: 2px;
    width: 10.0rem;
    padding: 0 0.2rem;
    background-color: #fff;
}
.tinyapp_header .select::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 1.5rem;
    height: 100%;
    background-color: #bbb;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 0.8rem 0.8rem;
    background-image: url(../img/triangle_d_fff.png);
}

/* 画面全体 */
.actual,
.design {
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 0.2rem;
}
.actual,
.lowcode {
    box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
.actual.snippet {
    border: none;
    box-shadow: none;
}
.actual.snippet.frame {
    border: 1px solid #ccc;
    padding: 0.3rem;
    padding-left: 0.5rem;
}
.design,
.design:has(.message) > div:first-child {
    padding: 1.0rem;
    padding-left: 0.5rem;
}
.design.snippet {
    padding: 0.3rem;
    padding-left: 0.5rem;
}
.design:has(.message) {
    padding: 0;
    padding-left: 0;
}
.actual .row,
.design .row {
    padding-left: 0.5rem;
}
.actual .row .row,
.design .row .row {
    padding-left: 0;
}

/* ボタン */
.design .button {
    color: inherit;
    background-color: inherit;
    border: 1px solid #ccc;
}

/* ヘッダー */
.actual {
    padding: 0.5rem;
}
.actual:has(.title) {
    padding: 0;
}
.actual .title {
    color: #fff;
    padding-right: 3.0rem;
    font-size: 105%;
}
.actual div:has(> .title) {
    display: flex;
    padding: 0.2rem 0.5rem;
}
.actual:not(.dialogue) div:has(> .title) {
    color: #fff;
    background-color: #ccc;
}
.actual div:has(> .title) > div:last-child {
    flex-grow: 1;
    text-align: right;
}
.actual div:has(> .title) .button {
    font-size: 90%;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 0.15rem;
}
.actual div:has(> .title) .button.noborder {
    border: none;
}
.actual div:has(> .title) > div .button.icon::before {
    background: #fff;
}

/* ボディ */
.actual div:has(.title) + div:not(.bracket) {
    padding: 1.0rem;
}

/* メッセージ */
.message.error,
.message.warning {
    padding: 0.1rem 0.5rem;
}
.message.error {
    color: #ff6464;
    background-color: #ffdddd;
}
.message.warning {
    color: #ffa755;
    background-color: #ffeddd;
}
.message.information {
    color: #006400;
    background-color: #90ee90;
}

/* 検索条件 */
.actual .conditions,
.design .conditions {
    border-radius: 2px;
    display: flex;
}
.actual .conditions {
    border: 1px solid #1abcbc;
    padding: 0;
}
.design .conditions {
    border-bottom: 2px solid #ddd;
    padding-top: 0;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}
.actual .conditions > div:first-child {
    padding: 0.25rem 0.3rem;
    padding-right: 1.0rem;
}
.actual .conditions > div:last-child {
    flex-grow: 1;
    background-color: #eee;
}
.design .conditions > div:last-child {
    flex-grow: 1;
    padding-left: 1.0rem;
}

/* 行と項目 */
.actual .row + .row,
.design .row + .row {
    padding-top: 0.2rem;
}
.actual .lavel,
.design .lavel {
    display: inline-block;
    min-width: 5.0rem;
    padding: 0 0.5rem;
}
.actual .lavel {
    background-color: #eee;
    border: 1px solid #eee;
}
.actual .item,
.design .item {
    display: inline-block;
    width: 6.0rem;
}
.actual div.item,
.design div.item {
    border-radius: 2px;
    border: 1px solid #ccc;
}
.actual td > div.item,
.design td > div.item {
    border: none;
}
.actual .lavel + .item,
.design .lavel + .item {
    margin-left: 0.5rem;
}
.actual .item.error {
    background-color: #ffcccc;
}
.lavel {
    display: inline-block;
    padding: 0 0.2rem;
    background-color: #eee;
    color: #666;
}

/*  ダイアログ */
.dialogue {
    border-width: 2px;
}
.dialogue .buttons {
    text-align: right;
    padding-top: 0.3rem;
}
.dialogue:not(.actual) .buttons {
    padding-right: 0.2rem;
    padding-bottom: 0.3rem;
}

/*  鍵のマーク */
.key {
    position: relative;
}
.key::before {
    content: "\01F511";
    position: absolute;
    top: 0;
    right: 0;
    font-size: 70%;
}

/* 範囲を示す括弧 */
div:has(.bracket) {
    position: relative;
}
.bracket {
    position: absolute;
    width: 1.0rem;
    height: 100%;
    border-radius: 0.8rem;
    border-right: 2px solid #1abcbc;
    color: #1abcbc;
    top: 0;
    right: -2rem;
}
.bracket > div,
.bracket > span {
    display: inline-block;
    padding-top: 0.3rem;
    padding-left: 1.5rem;
    white-space: nowrap;
}
.actual .bracket {
    right: -2.3rem;
}
/*
.actual .bracket > div,
.actual .bracket > span {
    padding-left: 2.5rem;
}
*/

/*	--------------------------------------
    コード
    --------------------------------------	*/
.code .tag {
    display: inline-block;
    min-width: 8.0rem;
    padding: 0.1rem 0.5rem;
    color: #aaa;
    background-color: #eee;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
}
.code pre {
    height: 20.0rem;
    width: calc(100% - 3.0rem);
    overflow: auto;
    border: 1px solid #ccc;
    border-radius: 0.3rem;
    padding: 0.3rem 0.3rem;
    margin: 0 0;
}
.code .tag + pre {
    border-top-left-radius: 0;
}
.code.snippet pre {
    height: auto;
    min-height: 4.0rem;
    width: calc(100% - 15.0rem);
}
.code.tips pre {
    display: inline-block;
    height: auto;
    width: auto;
    min-width: 30.0rem;
    max-width: calc(100% - 15.0rem);
}
.code pre::-webkit-scrollbar {
    width: 0.9rem;
    height: 0.9rem;
    background: #eee;
}
.code pre::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 0.2rem;
}
code {
    font-family: "lowline-only", monospace, monospace;
    line-height: 1.3rem;
}
.code code {
    color: #888;
}
.mono em,
.code code em {
    color: #47c;    /* 用語集の文字色と同じ */
    padding: 0 0;
    font-weight: normal;
}
.sql code i,
.code code i {
    color: #ccc;
}

/*	--------------------------------------
    タブ
    --------------------------------------	*/
.tab {
    display: inline-block;
    background-color: #eee;
    min-width: 8.0rem;
    padding: 0.1rem 0.5rem;
    color: #aaa;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
}
    
/*	--------------------------------------
    リファレンス
    --------------------------------------	*/
.spec {
    display: flex;
}
.spec > .name {
    min-width: 7.0rem;
    padding-right: 0.5rem;
    color: #47c;
}
.syntax {
    padding: 0.2rem 0.5rem;
    border-radius: 0.3rem;
    background-color: #e7f7f7;
}
span.syntax {
    display: inline-block;
    min-width: 30.0rem;
}
.spec .syntax {
    margin-top: 0.5rem;
    line-height: 1.5rem;
}
.spec:has(.name) .syntax {
    min-width: 40.0rem;
}
.spec .tag {
    display: inline-block;
    margin-top: 1.0rem;
    padding: 0.05rem 0.5rem;
    border-radius: 0.3rem;
    min-width: 2.0rem;
    text-align: center;
    background-color: #eee;
}
.spec p + .tag {
    margin-top: 0;
}
.spec .tag + br + p {
    margin-top: 0.5rem;
}
.spec + .spec {
    padding-top: 0.5rem;
    margin-top: 2.0rem;
    border-top: 1px solid #ccc;
}
.spec .code pre {
    width: auto;
    height: auto;
}

/*	--------------------------------------
    ドキュメント上のコントロール
    --------------------------------------	*/
/* ボタン */
.button {
    display: inline-block;
    padding: 0 0.3rem;
    margin-right: 0.2rem;
    border: 1px solid #ccc;
    border-radius: 0.15rem;
}
.button.message {
    color: #1abcbc;
    border: solid 1px #1abcbc;
    background-color: inherit;
}
.button.selector {
    background-color: #eee;
}
.button.gray,
.button.gray.noicon,
.button.gray.icon {
    color: #fff;
    border: solid 1px #fff;
    background-color: #ccc;
}
.button.abgreen,
.button.abgreen.noicon,
.button.abgreen.icon {
    color: #fff;
    border: solid 1px #fff;
    background-color: #1abcbc;
}
/* ボタンバー */
.button_bar {
    display: inline-block;
    border: solid 1px #1abcbc;
    border-radius: 0.2rem;
    margin-bottom: 0.3rem;
}
.button_bar .button.icon {
    border: none;
}
.button_bar .button + .button {
    border-left: solid 1px #1abcbc;
}
.button sup {
    font-size: 0.65rem;
}

/* セレクトボックス */
.selectbox {
    position: relative;
    display: inline-block;
    border: 1px solid #aaa;
    border-radius: 0.2rem;
    min-height: 1.4rem;
    padding: 0 0.2rem;
    padding-right: 1.5rem;
    font-size: 95%;
    vertical-align: middle;
    overflow: hidden;
}
.selectbox::after {
    content: "\025bc";
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    background-color: #bbb;
    height: 100%;
    width: 1.3rem;
    text-align: center;
    padding-top: 0.2rem;
    background-repeat: no-repeat;
    background-position: center center;
}
/* ボタンの文字 */
.selectbox[btn_cont]::after {
	content: attr(btn_cont)"";
    padding-top: 0;
}
.selectframe {
    display: inline-block;
    border: 1px solid #aaa;
}
.selectframe .selectbox {
    border: none;
}
.selectbox.notext {
    min-width: 0;
    padding-right: 0.9rem;
    min-height: 1.1rem;
}
.selectbox.notext::after {
    padding-top: 0.05rem;
    width: 1.1rem;
}
/* カレンダー・参照画面 */
.selectbox.calendar:not(.notext),
.selectbox.reference:not(.notext) {
    width: 5.0rem;
}
.selectbox.calendar::after,
.selectbox.reference::after {
	content: "";
    padding-top: 0;
    background-size: 0.9rem 0.9rem;
}
.selectbox.calendar::after { background-image: url(../img/calendar_fff.png); }
.selectbox.reference::after { background-image: url(../img/subwindow_fff.png); }
/* リスト */
.selectbox.list {
    min-width: 5.0rem;
}
.selectbox.list::after {
	content: "\1f4dd";
    padding-top: 0;
    background-image: none;
    background-color: transparent;
}

/* チェックボックス */
.radio,
.check,
.checkbox {
    display: inline-block;
    position: relative;
    width: 1.0rem;
    height: 1.0rem;
    vertical-align: middle;
}
.checkbox {
    border: 1px solid #aaa;
    border-radius: 0.3rem;
}
/* チェックマーク */
.check::after,
.checkbox.on::after {
    content: '';
    display: block;
    position: absolute;
    top: -0.3rem;
    left: 0.15rem;
    width: 0.6rem;
    height: 1.0rem;
    border-right: 0.35rem solid #1abcbc;
    border-bottom: 0.2rem solid #1abcbc;
    transform: rotate(45deg) translate3d(0,2px,0) scale3d(.75,.75,1);
}
.check::after {
    border-right-color: #bbb;
    border-bottom-color: #bbb;
}

/* ラジオボタン */
.radio {
    border-radius: 50%;
    border: 0.06rem solid #aaa;
}
.radio.on {
    border: 0.06rem solid #1abcbc;
}
.radio.on::after {
    content: '';
    display: block;
    position: absolute;
    background: #1abcbc;
    border-radius: 50%;
    top: 0.12rem;
    left: 0.12rem;
    width: 0.76rem;
    height: 0.76rem;
}
.radio.on.disabled {
    border: 0.06rem solid #a4f3f3;
}
.radio.on.disabled::after {
    background: #a4f3f3;
}

/* メニュー */
/*
.menuitem {
    display: inline-block;
    padding: 0 0.3rem;
    margin: 0 0.2rem;
    color: #1abcbc;
    border: solid 1px #1abcbc;
}
.menu_arrow {
    display: inline-block;
	border-top: 0.40rem solid transparent;
	border-bottom: 0.40rem solid transparent;            
	border-left: 0.8rem solid #ddd;
}
*/

/* リストの値 */
.list_values {
    display: inline-block;
    border: 1px solid #ccc;
    white-space: nowrap;
    line-height: 1.2rem;
    background-image: repeating-linear-gradient( #fff, #fff calc(1.2rem - 1px), #ced4da calc(1.2rem - 1px), #ced4da 1.2rem, #fff 1.2rem );
    background-origin: content-box;
    background-clip: content-box;
    background-attachment: local;
}

/* 矢印 */
.arrow {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-block;
    position: relative;
    filter: drop-shadow(3px 4px 5px rgba(0,0,0,0.3));
}
.arrow::after {
	content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 2.5rem auto;
}
.arrow.small {
    width: 2.0rem;
    height: 2.0rem;
}
.arrow.small::after {
    background-size: 2.0rem auto;
}
.arrow.up::after { background-image: url(../img/arrow_u_fff.png); }
.arrow.down::after { background-image: url(../img/arrow_d_fff.png); }
.arrow.left::after { background-image: url(../img/arrow_l_fff.png); }
.arrow.right::after { background-image: url(../img/arrow_r_fff.png); }
.arrow.search::after { background-image: url(../img/magniglass_fff.png); }
/* インデント */
.arrow.up.indent,
.arrow.up.indent2,
.arrow.down.indent,
.arrow.down.indent2 {
    display: block;
    padding-top: 1.0rem;
    padding-bottom: 1.5rem;
    padding-left: 5.0rem;
}
.arrow.up.indent2,
.arrow.down.indent2 {
    padding-left: 10.0rem;
}

/*	--------------------------------------
	並べ替え
	--------------------------------------	*/
.sort {
    position: relative;
}
.sort::after {
    content: "";
    position: absolute;
    top: 0.15rem;
    left: 0.1rem;
    width: 0.6rem;
    height: 0.6rem;

    mask-size: 100% 100%;
    mask-position: center;
    mask-repeat: no-repeat;

    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
}
.sort.on::after {
    background: #1abcbc;
}
.sort:not(.on)::after {
    background: #ccc;
}
.sort.asc::after {
    mask-image: url(../img/triangle_u_000.png);
    -webkit-mask-image: url(../img/triangle_u_000.png);
}
.sort.desc::after {
    mask-image: url(../img/triangle_d_000.png);
    -webkit-mask-image: url(../img/triangle_d_000.png);
}
    
/*	--------------------------------------
    アイコン
    --------------------------------------	*/
.button.noicon,
.button.icon {
    vertical-align: middle;
    position: relative;
    display: inline-block;
    color: #1abcbc;
    border: 1px solid #1abcbc;
}
.button.icon {
    padding-left: 1.4rem;
}
.button.noborder {
    border: none;
}
.button.icon::before {
    content: "";
    position: absolute;
    width: 1.2rem;
    height: 100%;
    top: 0;
    left: 0;
    background: #1abcbc;

    /* 画像に関する設定 */
    mask-size: 0.8rem 0.8rem;
    mask-position: 0.25rem 0.25rem;
    mask-repeat: no-repeat;
    -webkit-mask-size: 0.8rem 0.8rem;
    -webkit-mask-position: 0.25rem 0.25rem;
    -webkit-mask-repeat: no-repeat;
}
.button.icon.gray::before,
.button.icon.abgreen::before {
    background: #fff;
}

/* アイコンのみ(キャプションなし) */
.button.icon.icon_only {
    height: 1.4rem;
    width: 1.2rem;

    /* .button設定の上書き */
    padding: 0 0;
    margin-right: 0;

    /* .button.icon設定の上書き */
    padding-left: 0;
}

/* アイコン画像 */
.button.icon.login::before {
    mask-image: url(../img/login_000.png);
    -webkit-mask-image: url(../img/login_000.png);
}
.button.icon.search::before {
    mask-image: url(../img/magniglass_000.png);
    -webkit-mask-image: url(../img/magniglass_000.png);
}
.button.icon.create::before {
    mask-image: url(../img/create_000.png);
    -webkit-mask-image: url(../img/create_000.png);
}
.button.icon.save::before {
    mask-image: url(../img/update_000.png);
    -webkit-mask-image: url(../img/update_000.png);
}
.button.icon.delete::before {
    mask-image: url(../img/trashcan_000.png);
    -webkit-mask-image: url(../img/trashcan_000.png);
}
.button.icon.cancel::before {
    mask-image: url(../img/back_000.png);
    -webkit-mask-image: url(../img/back_000.png);
}
.button.icon.triangle_l::before {
    mask-image: url(../img/triangle_l_000.png);
    -webkit-mask-image: url(../img/triangle_l_000.png);
}
.button.icon.triangle_r::before {
    mask-image: url(../img/triangle_r_000.png);
    -webkit-mask-image: url(../img/triangle_r_000.png);
}
.button.icon.reload::before {
    mask-image: url(../img/reload_000.png);
    -webkit-mask-image: url(../img/reload_000.png);
}
.button.icon.download::before {
    mask-image: url(../img/download_000.png);
    -webkit-mask-image: url(../img/download_000.png);
}
.button.icon.upload::before {
    mask-image: url(../img/upload_000.png);
    -webkit-mask-image: url(../img/upload_000.png);
}
.button.icon.delfile::before {
    mask-image: url(../img/delfile_000.png);
    -webkit-mask-image: url(../img/delfile_000.png);
}
.button.icon.copy::before {
    mask-image: url(../img/copy_000.png);
    -webkit-mask-image: url(../img/copy_000.png);
}
.button.icon.cut::before {
    mask-image: url(../img/cut_000.png);
    -webkit-mask-image: url(../img/cut_000.png);
}
.button.icon.paste::before {
    mask-image: url(../img/paste_000.png);
    -webkit-mask-image: url(../img/paste_000.png);
}
.button.icon.edit::before {
    mask-image: url(../img/edit_000.png);
    -webkit-mask-image: url(../img/edit_000.png);
}
.button.icon.rename::before {
    mask-image: url(../img/rename_000.png);
    -webkit-mask-image: url(../img/rename_000.png);
}
.button.icon.release::before {
    mask-image: url(../img/release_000.png);
    -webkit-mask-image: url(../img/release_000.png);
}
.button.icon.slideup::before {
    mask-image: url(../img/arrow_u_000.png);
    -webkit-mask-image: url(../img/arrow_u_000.png);
}
.button.icon.slidedown::before {
    mask-image: url(../img/arrow_d_000.png);
    -webkit-mask-image: url(../img/arrow_d_000.png);
}

/*	--------------------------------------
    索引番号
    --------------------------------------	*/
.indicator {
    display: inline-block;
    position: relative;
}
.indicator::before {
    border-radius: 50%;
    text-align: center;
    color: rgba(255, 128, 128, 0.8);
    background-color: rgba(255, 192, 192, 0.5);
}
    
/* 図や表の中 */
.indicator[data-num] {
    z-index: 1;
    width: 0;
    height: 0;
}
.indicator[data-num]::before {
    content: attr(data-num);
    display: block;
    position: absolute;
    width: 1.2rem;
    height: 1.2rem;
    top: -1.9rem;
    left: -0.4rem;
}
tr .indicator[data-num]::before {
    top: -1.0rem;
    left: -1.0rem;
}
.sub.indicator[data-num]::before {
    top: 0;
}
.sup.indicator[data-num]::before {
    top: -1.5rem;
}

/* 文中 */
.indicator[data-ref]::before {
    content: attr(data-ref);
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
}

/*	--------------------------------------
    ポインター
    --------------------------------------	*/
.tap {
    position: relative;
    z-index: 1;
    width: 0;
    height: 0;
}
.tap::before {
    content: "";
    display: block;
    position: absolute;
    width: 1.8rem;
    height: 1.8rem;
    top: -0.3rem;
    left: -0.3rem;
    transform: rotate(-45deg);
    filter: drop-shadow(-3px 3px 2px rgba(0,0,0,0.6));
	background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 100%;
    background-image: url(../img/pointer_f66.png);
}
.tap.lower::before {
    top: 0.3rem;
}

/*	--------------------------------------
    ショートパーツ
    --------------------------------------	*/
.bevel {
    padding: 1.0rem;
    border-radius: 0.5rem;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.2);
}
.bevel.inset {
    background-color: #fafafa;
    border-top: none;
    border-left: none;
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.2) inset;
}
.min_spacing {
    letter-spacing: -1.5px;
}
.mono {
    font-family: "lowline-only", monospace, monospace;
}
.eg,
.eg1 {
    padding: 0.3rem 0.6rem;
    background-color: #f6f6f6;
    border-radius: 0.2rem;
}
.eg     {max-width: 50.0rem;}
.eg1    {max-width: 60.0rem;}
.gap0   {margin-top: 0.45rem;}
.gap    {margin-top: 0.75rem;}
.gap2   {margin-top: 1.5rem;}
.gap3   {margin-top: 2.25rem;}
.gapb0  {margin-bottom: 0.45rem;}
.gapb   {margin-bottom: 0.75rem;}
.gapb2  {margin-bottom: 1.5rem;}
.gapb3  {margin-bottom: 2.25rem;}
.required {
    background-color: #fff9f4;
}
.readonly {
    background-color: #fafafa;
}

/* 縮小表示 */
.shrink { transform: scale(0.8, 0.8) }

/* リンク */
.link,
[data-page]:not(.menu_lv1):not(.menu_lv2) {
    color: #6bf;
    text-decoration: underline;
}
.link[target="_blank"] {
    position: relative;
    margin-right: 1.3rem;
}
.link[target="_blank"]::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 1.0rem;
    height: 1.0rem;
    top: 0.15rem;
    margin-left: 0.3rem;
	background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 100%;
    background-image: url(../img/link.png);
}

/* 色 */
.gray:not(.button) { color: #ccc !important; }
.red        { color: #f66 !important;   }
.lblue      { color: #add8e6 !important;}
.comment    { color: #6a9955;           }
.caption    { color: #1abcbc;           }
.bg_lblue   { background-color: #e4f4f4 }
.abgreen    { color: #1abcbc;           }

/* OK/NG */
.ok {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    border: 0.25rem solid #7c7;
    vertical-align: middle;
}
.ng {
    position: relative;
    display: inline-block;
    width: 1.2rem;
    height: 0.2rem;
    border-radius: 0.1rem;
    background-color: #f66;
    transform: rotate(45deg);
    vertical-align: middle;
}
.ng::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.1rem;
    background-color: #f66;
    transform: rotate(90deg);
}

/* シェブロン */
div:has(.chevron) {
    position: relative;
}
.chevron {
    display: inline-block;
    position: absolute;
    right: 0.65rem;
    width: 0.6rem;
    height: 0.6rem;
    border: 0.2rem solid;
    border-color: #00bcd4 #00bcd4 transparent transparent;
    /* 右向き */
    top: 0.3rem;
    transform: rotate(45deg);
}
.chevron.down {
    /* 下向き */
    top: 0.2rem;
    transform: rotate(135deg);
}

/* 注釈 */
.note {
    display: inline-block;
    padding: 0.4rem 1.0rem;
    color: #e4ae5c;
    background-color: #fcf6eb;
    border-radius: 0.5rem;
    width: calc(100% - 18.0rem);
}
.note.snippet {
    width: auto;
}
.note em {
    padding: 0 0;
}

/*	--------------------------------------
    「1-3．作成からリリースまでの流れ」用
    --------------------------------------	*/
.cap_window {
    width: 6.0rem;
    height: 4.5rem;
    border-radius: 0.5rem;
    border: 2px solid #38a4ed;
    position: relative;
}
.cap_window > div:first-child {
    height: 1.0rem;
    background-color: #38a4ed;
    border-radius: 0.3rem 0.3rem 0 0;
}
.cap_window > div + div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-weight: bold;
}
.cap_window > div:nth-child(2) {
    font-size: 3.3rem;
    color: #eee;
    padding-top: 0.5rem;
}
.cap_window > div:last-child {
    font-size: 1.2rem;
    color: #38a4ed;
    padding-top: 2.0rem;
}

.arrow.down.next {
    padding-top: 2.0rem;
    padding-left: 3.5rem;
}

.flow_desc {
    padding-left: 1.5rem;
    margin-bottom: 2.0rem;
}
.flow_desc > h3 {
    margin-top: 0;
}
.flow_desc > h3 + div > div:first-child {
    width: 21.5rem;
    padding-top: 1.0rem;
    padding-right: 1.5rem;
}

.app {
    font-weight: bold;
    text-align: center;
    color: #fff;
    background-color: #a5e1e1;
    border: 3px solid #1abcbc;
    border-radius: 6px;
    display: inline-block;
    padding: 1.0rem 0.5rem;
    min-width: 5.0rem;
}

/*	--------------------------------------
    図
    --------------------------------------	*/
.user {
    position: relative;
    display: inline-block;
    width: 2.5rem;
    height: 4.7rem;
}
.user::before,
.user::after {
    content: "";
    position: absolute;
    left: 0;
    background-color: #a0d0f8;
    width: 2.5rem;
    height: 2.5rem;
}
.user::before {
    top: 0;
    border-radius: 50%;
}
.user::after {
    bottom: 0;
    border-radius: 50% 50% 0 0;
}

/*	--------------------------------------
    トップページ用
    --------------------------------------	*/
.top_contents {
    display: flex;
    padding-top: 2.8rem;
    height: calc(100vh - 2.8rem);
}

/* コンテンツヘッダー */
.contents_header {
    /*
    background-color: #dff8f8;
    */
    background: #fff;
    background: linear-gradient(135deg, #fff 0%, #dff8f8 25%, #dff8f8 75%, #fff 100%);
    border-bottom: 5px solid #1abcbc;
}
div:has(> .headline) {
    display: inline-block;
    padding: 8.0rem 5.0rem 2.0rem 3.0rem;
}
.headline {
    font-size: 1.3rem;
    color: #1abcbc;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.under_line {
    width: 100%;
    height: 0.3rem;
    border-radius: 0.15rem;
    background-color: #92dfdf;
    background-color: #fff;
}
.logo3 {
	background-repeat: no-repeat;
    background-position: 50.0rem 1rem;
    background-size: 20.0rem auto;
    background-image: url(../img/ab_logo3.png);
}
@media (max-width: 500px) {
    .under_line:first-child {
        width: 58%;
    }
    .logo3 {
        background-position: 95% 1rem;
        background-size: 16.0rem auto;
    }
}

/* コンテンツフッター */
.contents_footer {
    background-color: #dff8f8;
    border-top: 3px solid #1abcbc;
    padding: 0.5rem 1.0rem;
}

/* コンテンツボディ */
.contents_header + section.contents {
    display: block;
    height: auto;
    padding-top: 1.5rem;
    padding-left: 3.0rem;
    flex-grow: 1;
    overflow: auto;
}
@media (max-width: 500px) {
    .contents_header + section.contents {
        padding-left: 1.0rem;
        padding-right: 1.0rem;
    }
}
.topic {
    position: relative;
}
.topic + .topic {
    padding-top: 3.5rem;
}
.banner {
    position: absolute;
    display        : inline-block;
    color          : #ffffff;
    font-size      : 8.0rem;
    /* 文字間
    */
    letter-spacing : 0.4rem;
    text-shadow    : 
    1px  1px 10px #f4f4f4,
        -1px  1px 10px #f4f4f4,
        1px -1px 10px #f4f4f4,
        -1px -1px 10px #f4f4f4,
        1px  0px 10px #f4f4f4,
        0px  1px 10px #f4f4f4,
        -1px  0px 10px #f4f4f4,
        0px -1px 10px #f4f4f4;  
}
.banner.small {
    font-size      : 6.0rem;
    letter-spacing : 0;
}
.topic .heading {
    position: relative;
    color: #1abcbc;
    font-size: 1.3rem;
    padding-left: 5.0rem;
}
.topic .banner + .heading {
    padding-top: 5.0rem;
}
.topic .banner.small + .heading {
    padding-top: 4.0rem;
}
.topic .text + .heading {
    padding-top: 2.0rem;
}
.topic .text {
    position: relative;
    padding-left: 5.0rem;
}
.topic .heading + .text {
    padding-top: 1.0rem;
}
.topic .text > .fig_row {
    padding-left: 2.0rem;
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
}
@media (max-width: 500px) {
    .topic .heading {
        padding-left: 1.0rem;
    }
    .topic .text {
        padding-left: 1.0rem;
    }
}

/* 図 */
.fig_row {
    display: flex;
}
.fig_row > div + div {
    margin-left: 1.0rem;
}
.fig_box {
    border-radius: 0.8rem;
    padding: 0.5rem 1.0rem 0.5rem 1.0rem;
}
.fig_box .fig_box {
    border-radius: 0.4rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}
.fig_box + .fig_box {
    margin-top: 0.6rem;
}
.fig_appbeads {
    border: 0.5rem solid #1abcbc;
    background-color: #dff8f8;
}
.fig_blue {
    border: 0.5rem solid #1a78bc;
    background-color: #8abcdf;
}
@media (max-width: 500px) {
    .fig_row.fig_column {
        flex-flow: column;
        align-items: start;
    }
    .fig_row > div + div {
        margin-left: 0;
    }
}
/* 見出し */
.fig_box .caption {
    color: #1a78bc;
    line-height: 1.2rem;
}
.fig_box .mark {
    color: #1a78bc;
    font-size: 2.0rem;
    font-weight: bold;
    padding-top: 0.8rem;
    text-align: right;
    padding-right: 0.5rem;
}
/* 図：表 */
.fig_box .data {
    margin-top: 0.5rem;
    font-size: 60%;
}
.fig_box table.data {
    border-radius: 0.3rem;
    border-width: 3px;
    border-color: #fff !important;
}
.fig_box table.data th,
.fig_box table.data td {
    border-width: 3px;
    border-color: #fff !important;
}
/* 図：線 */
div:has(.fig_line) {
    position: relative;
}
.fig_line {
    display: inline-block;
    position: absolute;
    border-radius: 0.2rem;
    height: 0.3rem;
    width: 6.0rem;
}
/* 図：データベース */
.fig_db {
    display: inline-block;
    position: relative;
    width: 7.0rem;
    height: 3.0rem;
    background-color: #8abcdf;
    color: #fff;
    padding-top: 2.0rem;
    text-align: center;
}
.fig_db::before,
.fig_db::after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 50%;
    width: 7.0rem;
    height: 2.0rem;
}
.fig_db::before {
    background-color: #99d5f3;
    background-color: #b0d8f6;
    top: -1.0rem;
}
.fig_db::after {
    background-color: #8abcdf;
    bottom: -1.0rem;
}

/* マーカー */
.marker {
    background: linear-gradient(transparent 50%, #9fc 65%);
}

/* 色 */
.navy     { color: #1a78bc; }
.bg_green { background-color: #dfd; }
.bg_pink  { background-color: #fdf; }
.bg_blue  { background-color: #cef; }
.bg_white { background-color: #fff; }
.bg_abgreen {background-color: #1abcbc; }
.bg_translucent { opacity: 0.8; }

/*	--------------------------------------
    各ページ専用
    --------------------------------------	*/
/* 1.1  AppBeadsって何？ */
.logo2 {
	background-repeat: no-repeat;
    background-position: 25.0rem 3.0rem;
    background-size: auto 20.0rem;
    background-image: url(../img/ab_logo2.png);
}
@media (max-width: 500px) {
    .logo2 {
        background-position: 100% 3.0rem;
        background-size: auto 15.0rem;
    }
}