@charset "utf-8";

:root {
    /* カラー設定 */
    --body_bg: white;
    --body_fg: #5f5f5f;
}

/* デバッグ設定 */
.edit-frame {
    border-style: solid;
    border-color: red;
    border-width: 3px;
}
.edit-comment {
    color: pink;
    font-size: 0.6rem;
}

/* リセットCSS */
html {
    margin: 0;
    padding: 0;
    height: auto;
    font-size: 16px;
    overflow-y: scroll;
    word-break: normal;
/*    word-wrap: break-word; */
    line-break: strict;
    background-color: black;
}
body {
    margin: 0;
    padding: 0;
    height: auto;
    text-align: center;
    /* font-family: "Roboto"; */
    /* font-family: "M PLUS Rounded 1c", "Meiryo UI", sans-serif; */
    font-family: "M PLUS Rounded 1c", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
    min-width: 310px;
    min-height: 100vh;
    text-size-adjust: 100%;
    color: var(--body_fg) !important;
    background-color: var(--body_bg);
}
table {
    margin: 0;
    padding: 0;
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    word-break: break-word;
}
table tr {
    width: 100%;
}
table th {
    border: 1px solid silver;
    text-align: center;
}
table td {
    border: 1px solid silver;
}
iframe {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
div, header, section, article, footer {
    margin: 0;
    padding: 0;
    height: auto;
}
footer {
    margin: 0;
    padding: 0;
    height: auto;
    font-size: 0.8rem;
}
img {
    margin: 0;
    padding: 0;
    border: none;
    vertical-align: top;
    -ms-interpolation-mode: bicubic;
}
hr {
    height: 1px;
    color: silver;
    background-color: silver;
    border: none;
    margin: 0 0 10px 0;
}
nav {
    margin: 0;
    padding: 0;
}
ul {
    margin: 0;
    padding: 0;
    display: block;
    overflow: hidden;
    list-style-position: inside;
    list-style-type: none;
}
li {
    margin: 0;
    padding: 0;
}
a {
    margin: 0;
    padding: 0;
}
p {
    margin: 0;
    padding: 0;
}
span {
    margin: 0;
    padding: 0;
    /* display: inline-block; */
}
label {
    margin: 0;
    padding: 0;
}
pre {
    margin: 0;
    padding: 0;
}
h1 {
    margin: 0;
    padding: 0;
    font-size: 1.8rem;
}
h2 {
    margin: 0;
    padding: 0;
    font-size: 1.3rem;
}
h3 {
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
}
h4 {
    margin: 0;
    padding: 0;
    font-size: 1.0rem;
}
h5 {
    margin: 0;
    padding: 0;
    font-size: 0.87rem;
}
h6 {
    margin: 0;
    padding: 0;
    font-size: 0.87rem;
}
button {
    margin: 0;
    padding: 0;
}
input, textarea, select {
    margin: 0;
    padding: 3px 3px 2px 3px;
    color: var(--body_fg);
    max-width: calc(100% - 6px);
    border: 1px solid gray;
    font-size: 0.95rem;
    font-family: inherit;
}

input:invalid, textarea:invalid, select:invalid {
    background-color: #FBEFFB;
}

/* 汎用設定 */
.show                   {display: block;}
.hide                   {display: none;}
.no-scroll              {overflow: hidden;}
.cell                   {display: table-cell;}
.inline-block           {display: inline-block;}
.width-full             {width: 100%;}
.width-auto             {width: auto}
.height-full            {height: 100%;}

.no-decoration          {text-decoration: none;}
.no-border              {border: none;}

/* フレックスボックス */
.flexbox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-flow: wrap;
}

.flex_auto              {flex: auto;}
.flex_spring            {flex: 1}
/* .flex_order1            {order: 1;}
.flex_order2            {order: 2;} */
.flex_h_center          {justify-content: center;}
.flex_v_center          {align-items: center;}
.flex_flow_row_wrap     {flex-flow: wrap;}

/* .flex_start             {justify-content: flex-start;}
.flex_end               {justify-content: flex-end;}
.flex_align_start       {align-content: flex-start;}
.flex-vertical-center   {align-items: center;}
.flex-vertical-bottom   {align-items: end;} */

/* 汎用設定 文字装飾 */
.text-white             {color: white;}
.text-black             {color: black;}
.text-red               {color: red;}
.text-blue              {color: blue;}
.text-deeppink          {color: deeppink;}
.text-hotpink           {color: hotpink;}
.text-gainsboro         {color: gainsboro;}
.text-yellow            {color: yellow;}
.text-royalblue         {color: royalblue;}
.text-crimson           {color: crimson;}
.text-whitesmoke        {color: whitesmoke;}

.text-center            {text-align: center;}
.text-right             {text-align: right;}
.text-left              {text-align: left;}
.text-vtop              {vertical-align: top;}
.text-vcenter           {vertical-align: middle;}
.text-vbottom           {vertical-align: bottom;}

.font-bold              {font-weight: bold;}

/* 汎用設定 背景 */
.bg-white               {background-color: white !important;}
.bg-black               {background-color: black !important;}
.bg-pink                {background-color: pink;}
.bg-orange              {background-color: orange;}
.bg-orangered           {background-color: orangered;}
.bg-crimson             {background-color: crimson;}
.bg-gold                {background-color: gold;}
.bg-paleturquoise       {background-color: paleturquoise;}
.bg-lime                {background-color: lime;}
.bg-mediumspringgreen   {background-color: mediumspringgreen;}
.bg-lightgray           {background-color: lightgray;}
.bg-lightyellow         {background-color: lightyellow;}
.bg-lightseagreen       {background-color: lightseagreen;}
.bg-gainsboro           {background-color: gainsboro;}
.bg-whitesmoke          {background-color: whitesmoke;}
.bg-dimgray             {background-color: dimgray;}
.bg-darkgray            {background-color: darkgray;}
.bg-royalblue           {background-color: royalblue;}
.bg-lightyellow         {background-color: lightyellow;}
.bg-pinkwhite           {background-color: #fef9fb;}
.bg-powderpink          {background-color: #f5ecf4;}
.bg-pastelyellow        {background-color: #ffffea;}
.bg-hotpink             {background-color: hotpink;}

/* 汎用設定 スペーサー */
.mgt5px                 {margin-top: 5px;}
.mgt10px                {margin-top: 10px;}
.pdt5px                 {padding-top: 5px;}

/* 装飾あり */
.list-style-square　{
    list-style-type: square;
}
.list-style-disc {
    list-style-type: disc;
    list-style-position: outside;
    padding-left: 23px;
}
.list-style-decimal {
    list-style-type: decimal;
    list-style-position: outside;
    padding-left: 23px;
}