html {
    overflow: hidden;
    height: 100%;
    font-size: 4vmin;
    height: 100%;
}

body {
    background-color: #fde7e7;
    font-family: "BIZ UDGothic";
    height: 100%;
}

/* boostrapの上書き */

.navbar {
    padding: .5vh 1rem;
}

.navbar-brand {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin: auto;
    padding: 0;
    font-size:1rem;
}

@media (max-width: 400px) {
    .navbar-brand {
        position: relative;
        width: unset;
    }
}

.row {
    margin: unset;
}

.btn {
    font-size: 0.8rem;
    padding: .5vh .55rem;
}

.modal-open {
    padding-right: 0px !important;
}

.modal {
    padding-right: 0px !important;
}

.modal-header {
    background-color: #f8b3b3;
}

.modal-footer {
    background-color: #f8b3b3;
}

.btn.disabled {
    opacity: 1;
    background: #b4bbbd;
}

/* 独自定義 */

.font-center {
    text-align: center;
}

.center_hw {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.center_height {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.bg-themecolor {
    background-color: #d25c38;
    /* background-color: #0e81aa; */
}

.bg-white {
    background-color: white;
}

.font-themecolor {
    color: rgb(126, 169, 182);
}

.sub {
    font-size: smaller;
}

.button {
    width: 30vmin;
    /*ボタン色*/
    /* background-color: #ffffff; */
    color: #ffffff;
    /* border-color: #343a40; */
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    font-size: 2.5vh;
}

@media screen and (max-width:479px) {
    .button {
        font-size: 0.8rem;
    }
}

#control_area>.button {
    /* width: unset; */
    padding: 2.8px 6px;
}

.button:active {
    /*ボタンを押したとき*/
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    /*下に動く*/
}

.button:hover {
    color: #ffffff;
}

.button:focus {
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

#title_area {
    height: 8%;
}

#back_btn_area {
    position: absolute;
    z-index: 1;
}

#reverse {
    font-size: 0.8rem;
}

#step_area {
    /* background-color: #ecb725; */
    background-color: white;
    padding: 2pt 0pt;
    /* width: 100px; */
}

.c-select, .c-select2 {
    position: relative;
    /*width: 10vh;*/
    /*width: 20vw;*/
}

.c-select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    width: 100%;
    /*text-indent: 4vh;*/
    text-indent: 1.4em;
}

.c-select2 select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    width: 100%;
    /*text-indent: 1vh;*/
    text-indent: 0.5em;
}

#inputValue3 {
    /*text-indent: 7vh;*/
}

/* 下向きの矢印 */

.c-select::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f107";
    position: absolute;
    left: 0.8vh;
    pointer-events: none;
}

.c-select2::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f107";
    position: absolute;
    right: 0.8vh;
    pointer-events: none;
}

/* #inputValue1, #inputValue3{
    direction: rtl; 
    unicode-bidi: bidi-override;
} */

.opa {
    opacity: 0;
}

/* .c-select::after {
    content: "";
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1697571/chevron-down.svg) no-repeat center;
    display: block;
    height: 1rem;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translatey(-50%);
    width: 1rem;
} */

.animation_container {
    background-color: white;
    width: 100%;
    margin: auto;
    /*height: 65vh;*/
    position: relative;
    text-align: center;
    /* padding-top: 1vh; */
}

.bar {
    background-color: #f8e8b3;
    padding: 0;
}
.bar2 {
    background-color: #f8e8b3;
    padding: 1vh 0;
}

#index_table {
    position: relative;
    background:white;
    width: 100%;
    margin:0;
}

#text_table {
    width:100%;
    padding:0.5vh 0 1.5vh;
}

#main_table {
    /*position: absolute;*/
    width: 100%;
    /*top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
}

#result_table {
    /* position: absolute;
    width: 100%;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 0%);  */
    /* margin-top: 1vh; */
}

/*
#index_table{
    width: 100%;
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -50%); 
    table-layout: auto;
}

#main_table {
    width: 100%;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#result_table{
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translate(-50%, -50%); 
}
*/

tr td {
    transition: opacity 150ms, visibility 150ms;
    font-size: 2.2vh;
    /*line-height: 2.6vh;*/
    /*font-size: 1.2em;*/
    line-height:100%;
    /* font-size: larger; */
    position: relative;
}

.arrowinTalbe {
    position:absolute;
    top:0.1em;
    right:-0.4em;
    visibility: hidden;
    z-index:1;
}

#main_table tr {
    background-color: #ffffff;
}

.col1, .col2, .col3 {
    border: 2px solid #b4bbbd;
    width:20vw;
}

#main_table .col1 {
    display: none;
}

#rowI0>td {
    /* font-size: 2vh;
    line-height: 2.1vh; */
    padding: 1vh;
}

#rowR1>.col5, #rowR1>.col6, #rowR1>.col8, #rowI1>.col0, #rowI1>.col1, #rowI1>.col3, #rowI2>.col0, #rowI2>.col1, #rowI2>.col3 {
    /* width: 4rem; */
    width: 10vh;
}

#rowR1>.col6 {
    visibility: hidden;
}

.col5, .col7 .col8 {
    width: 4rem;
    height: 0.9rem;
}

#rowI1>td, #rowI2>td {
    border: unset;
}

/* #rowI1>.col1, #rowI1>.col3, #rowI2>.col1, #rowI2>.col3, #rowR2>.col5, #rowR2>.col8 { */

#rowI1>.col3, #rowI2>.col3, #rowR2>.col5, #rowR2>.col8 {
    border-width: 2px 2px 2px 0px;
    border-style: solid;
    border-color: #000000;
}

#rowI1>.col1, #rowI2>.col1, #rowR2>.col5, #rowR2>.col8 {
    border-width: 2px 2px 2px 2px;
    border-style: solid dotted solid solid;
    border-color: #000000;
}

#rowR1>.col4, #rowR1>.col5, #rowR1>.col7, #rowR1>.col8 {
    border: 3px solid #d25c38;
    font-size: 0.8rem;
    line-height: 1rem;
    width: 18vw;
}

.index-highlight {
    background-color: #f8e8b3;
    font-weight: bold;
}

.index-low {
    background-color: #ece7d9;
    font-weight: bold;
}

.selected {
    background-color: #f5d444;
    font-weight: bold;
}

.result {
    opacity: 1;
    color: #c90000;
}

.message_area {
    padding: 2vh 0vh;
    width: 80%;
    margin: auto;
    /* height: 16vh;
    display: flex;
    align-items: center;
    justify-content: center; */
}

#message {
    top: 50%;
    /* height: 100%; */
    /* transform: translateY(-50%); */
}

#message_area {
    font-size: 0.8rem;
    width: 90%;
}

.message_group {
    /* display: none; */
    transition: opacity 150ms, visibility 150ms;
    /* transition: all 300ms; */
    opacity: 0;
    visibility: hidden;
}

.message_group.show {
    opacity: 1;
    visibility: visible;
}

#control_area {
    padding-top: 1vh;
}

td.arrow img {
    width:100%;
    max-height: 5vh;
}

#arrow_head,
#arrow_bottom {
    visibility: hidden;
}

.arrow1 {
    visibility: hidden;
    /* width: 50%; */
    height: 6vh;
}

.arrow2 {
    visibility: hidden;
    /* width: 50%; */
    height: 10vh;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-70%, 0%);
}

@media screen and (min-width:1600px) {
    .arrow2 {
        height: 9vh;
        left: 52%;
    }
}