@import './color.css';

body {
    /* bootstrapテーマのフォントが日本語に対応してなさそうなので上書き */
    font-family: 'M PLUS 1p', sans-serif !important;
    color: var(--medium-gray) !important;
}

body.noscroll {
    overflow: hidden;
}

main {
    min-height: 100vh;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none !important;
}

.page-headline h1 {
    font-size: 1.3rem;
}

.table > * {
    color: var(--medium-gray) !important;
}

.text-default {
    color: var(--medium-gray);
}

/* 多分 mint.css のバグで .table-borderless が機能してないので修正 */
.table-borderless th,
.table-borderless td {
    border-width: 0 !important;
}

.card {
    border: none !important;
    border-radius: 7px !important;
    box-shadow:  14px 14px 14px #f2f2f2;
}

.table-dark-border th,
.table-dark-border td {
    border-color: #ccc !important;
}

.thin-table th,
.thin-table td {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

.accordion-icon::before {
    transition: all 0.3s;
}

.open .accordion-icon:before {
    transform: rotate(180deg);
}

@media (max-width: 576px) {
    .form-group > label {
        width: 100%;
        font-weight: bold;
    }
    .form-group > *:not(label) {
        width: 100%;
        margin: auto;
    }
}
@media (min-width: 577px) {
    .form-group {
        display: flex;
    }
    .form-group > label {
        display: block;
        width: 25%;
        font-weight: bold;
    }
    .form-group > *:not(label) {
        width: 75%;
    }
}

.no-box-shadow {
    box-shadow: none !important;
}

.box-shadow-bottom {
    box-shadow: 2px 46px 33px -25px #e3e3e3 !important;
    border-radius: 10px !important;
}

a.full-clickable {
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.clickable-icon {
    cursor: pointer;
}

.clickable-icon:hover {
    opacity: 0.7;
}

.clickable {
    cursor: pointer;
}

.clickable:hover {
    opacity: 0.8;
}

.ruby {
    font-size: 0.5rem;
    font-weight: lighter;
}

.non-line-breaking > span {
    white-space: nowrap;
}

.all-alone {
    background-color: var(--all-alone) !important;
}

.night-alone {
    background-color: var(--night-alone) !important;
}

.alone-time-exists {
    border: 2px solid var(--night-alone) !important;
    color: var(--night-alone) !important;
}

.need-help.night-alone {
    background-color: var(--night-alone);
    background-image: linear-gradient(0deg, white 17%, var(--need-help) 21%);
}

.helpable {
    background-color: var(--helpable) !important;
}

.sticky-left {
    position: sticky;
    left: 0;
}

.sticky-up {
    position: sticky;
    top: 0;
}

i.i-nobizo::before {
    content: "";
    display: inline-block;
    background-image: url('../images/icons/nobizo.png');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 60px;
    height: 60px;
}

.manual.right-arrow-box {
    position: relative;
    background: #FFFFFF;
    padding: 10px;
    text-align: center;
    border: 3px solid #04A3A3;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
.manual.right-arrow-box:after, .manual.right-arrow-box:before {
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    pointer-events: none;
    position: absolute;
    right: 100%;
    top: 50%;
}
.manual.right-arrow-box:after {
    border-color: rgba(255, 255, 255, 0);
    border-top-width: 5px;
    border-bottom-width: 5px;
    border-left-width: 9px;
    border-right-width: 9px;
    margin-top: -5px;
    border-right-color: #FFFFFF;
}
.manual.right-arrow-box:before {
    border-color: rgba(4, 163, 163, 0);
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-left-width: 12px;
    border-right-width: 12px;
    margin-top: -7px;
    margin-right: 2px;
    border-right-color: #04A3A3;
}

.manual.left-arrow-box {
    position: relative;
    background: #04A3A3;
    padding: 10px;
    color: #FFFFFF;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
.manual.left-arrow-box:after{
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    pointer-events: none;
    position: absolute;
    border-color:  rgba(4, 163, 163, 0);
    border-top-width: 5px;
    border-bottom-width: 5px;
    border-left-width: 9px;
    border-right-width: 9px;
    margin-top:  -5px;
    border-left-color: #04A3A3;
    left: 100%;
    top: 50%;
}