@charset "UTF-8";

/*
 * Modern Browser Reset Stylesheet - Rev Sep.18.2023
 * Reference: A (more) Modern CSS Reset
 *     https://piccalil.li/blog/a-more-modern-css-reset/
 * Collis:
 *     https://coliss.com/articles/build-websites/operation/css/a-more-modern-css-reset.html
 * S.T Customize:
 *     Rev.1 - Jun.4.2024
*/


/* --- Base Reset --- */
/* box-sizing: border-box;を設定 ( NOT box-sizing: content-box ) */
*, *::before, *::after { box-sizing: border-box; }

/* デフォルトマージンを削除、作成するCSSの制御を改善するため */
* { margin: 0; }
/*
部分的に対応する場合のターゲットタグ
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd
*/

/* 高さは%ベースを使用 */
html, body {
    height: 100%;
    /* min-height: 100vh; */
}

/* インタラクティブ要素 */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* IDまたはCLASS付きのリストタグからスタイルを除去 */
nav[id] ul, nav[id] ol,
nav[class] ul, nav[class] ol,
ul[id], ul[class], ol[id], ol[class] {
    list-style: none;
    padding: 0;
}

/* CLASSのないリンクは、下線が文字を邪魔しない設定 */
a:not([class]) {
    text-decoration-skip-ink: auto;
    /* color: currentColor; */
}

/* アンカーされている要素には余分なスクロールマージンが必要 */
:target {
    scroll-margin-block: 5ex;
}

/* Text Overflow fix / Paragraph */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
p {
    margin: 0 0 1.8em;
}

/* --- Making Reset --- */
/* altを指定していないimgタグを確認 */
img:not([alt]) {
    border: 2px dashed #900;
}
/* Clearfix */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
/* Clear<br> for SmartPhone */
.clearbr br {
    display: none;
}
/* for PC */
@media screen and ( min-width: 840px ) {
    .clearbr br {
        display: block;
    }
}
/* Image float */
img.fl, figure.fl { margin: 0 .8em .8em 0; float: left; }
img.fr, figure.fr { margin: 0 0 .8em .8em; float: right; }
/* Overflow X Scroll *BetaFunction */
.scroll_parent {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    white-space: nowrap;
}
.scroll_child {
    display: inline-block;
    margin-right: 30px;
    white-space: nowrap;
}


/* --- Customize Reset --- */
/* Natural flow and rhythm in articles by default */
article > * + * {
    margin-top: 1em;
}
/* 水平線 */
hr {
    height: 1px;
    border-top: 1px solid #ccc;
    margin: 1.5em .8em;
}
/* 削除された部分 */
del {
    text-decoration: line-through;
}
/* 追加要素タグ */
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
    font-weight: bold;
}
/* Superscript 上付き */
sup {
    font-size: 80%;
    vertical-align: top;
    position: relative;
    top: -0.1em;
}
/* Subscript 下付き */
sub {
    font-size: 80%;
    vertical-align: bottom;
    position: relative;
    bottom: -0.1em;
}
/* 略語(頭字語以外/頭文字)・用語タグ */
abbr[title], acronym[title], dfn[title] {
    border-bottom: 1px dashed;
    cursor: help;
    text-decoration: none;
    font-style: normal;
}
/* ルビ・読み仮名 */
ruby rt {
    font-weight: bold;
}
/* 該当テキストのハイライト */
mark {
    background-color: #ff9;
}
/* 引用 */
blockquote, q {
    padding: 18px 30px;
    border-top: 3px solid #999;
    border-bottom: 3px solid #999;
    background-color: #eee;
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
blockquote cite {
    font-style: normal;
}
/* for PC */
@media screen and ( min-width: 840px ) {
    blockquote, q {
        width: 700px;
    }
}   



/* --- Table Reset --- */
table {
    display: table;
    border-collapse: collapse;
    border-spacing: 0;
}
th {
    background-color: #ccc;
}
th, td {
    padding: 8px;
    border: 1px solid #000;
}
caption, th {
    font-weight: normal;
    text-align: left;
}
    td {
    background-color: transparent;
}
/*
table tr:hover {
    background-color: #eee;
}
table td:hover {
    background-color: #cff;
}
*/
@media print{
    table tr:hover {
        background-color: #fff;
    }
    table td:hover {
        background-color: #fff;
    }
}

/* DL DT DD like Table
dl {
    margin: 2px 0 0 0;
    width: 900px;
}
dl dt {
    border-top: #CECECE 1px solid;
    display: inline;
    float: left;
    text-indent: 1px;
    padding-top: 15px;
    width: 140px;
    padding-right: 10px;
    clear: both;
    font-weight: bold;
    text-align: right;
}
dl dd {
    border-top: #CFCFCF 1px solid;
    padding-top: 15px;
    margin-bottom: 10px;
    width: 760px;
    float: left;
}
*/



/* --- Form Reset --- */
/* Inherit fonts for inputs and buttons */
input:not([type="checkbox"]):not([type="radio"]),
button, textarea, select {
    width: calc( 100% - .8em );
}
input, button, textarea, select, label {
    font: inherit;
    margin: 5px;
    padding: 8px 5px;
    vertical-align: middle;
}
button, input, label {
    line-height: 1.1;
}
/* Size */
textarea     { height: 150px; }
textarea.min { height: 80px; }
/* iOS form style clear */
select {
    height: 45px;
    border: 1px solid #ccc;
    color: #222;
    background-color: #fff;
}
[type="submit"] {
    height: 45px;
}
/* for PC */
@media screen and ( min-width: 840px ) {
    input[type="text"], button, textarea, select {
        /* width: 95% !important; */
    }
    textarea     { height: 300px; }
    textarea.min { height: 100px; }
    form .long   { width: 700px !important; }
    form .mid    { width: 350px !important; }
    form .shrt   { width: 200px !important; }
    form .int    { width: 60px !important; }
    select, label, button, summary {
        cursor: pointer;
    }
}



/* --- Font --- */
/* Size */
.xxltxt { font-size: 180%; }
.xltxt  { font-size: 140%; }
.ltxt   { font-size: 120%; }
.mtxt   { font-size: 100%; }
.stxt   { font-size:  80%; }
.xstxt  { font-size:  70%; }
.xxstxt { font-size:  60%; }
/* 1byte Char */
.engsans { font-family: "Verdana", "Arial", "Helvetica", sans-serif; }
.engseri { font-family: "Palatino Linotype", serif; }
/* Classic ASCII Art */
.aa {
    font-family: "ＭＳ Ｐゴシック", "MS PGothic", "Mona", "mona-gothic-jisx0208.1990-0", sans-serif;
    line-height: 1;
}



/* --- System Massage --- */
.caution {
    color: #900;
    font-weight: bold;
}
.res_war, .res_msg {
    display: block;
    margin: 8px;
    padding: 12px 8px;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.0;
}
.res_war {
    border: 1px solid rgb(95, 0, 0);
    background-color: rgb(255, 201, 201);
    color: rgb(95, 0, 0);
}
.res_msg {
    border: 1px solid rgb(11, 95, 0);
    background-color: rgb(217, 255, 202);
    color: rgb(11, 95, 0);
}