/** 全体設定 **/
body {
    font-family: "Kosugi Maru", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
}

#fixed-header {
    position: fixed;
    width: 100%;
    height: 70px;
    border-bottom: solid 1px #dee2e6;
    background-color: #ffffff;
    z-index: 100;
}

#header-contents {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

#header {
    margin-top: 5px;
}
#header h1 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    font-size: 1.5rem;
    color: #407936;
}
#header-subtitle {
    color: #666666;
    font-size: 1.2rem;
}

.title-color1 {
    color: #FF0000;
}
.title-color2 {
    color: #33CC33;
}
.title-color3 {
    color: #0033CC;
}
.title-color4 {
    color: #FF0066;
}
.title-color5 {
    color: #FF9900;
}
.title-color6 {
    color: #008000;
}
.title-color7 {
    color: #FF7C80;
}

#page-navi {
    align-items: flex-start;
}

#page-navi .nav-link {
    transition: padding-top .15s;
    margin-left: 2px;
}
#page-navi .nav-link.active {
    padding-top: 30px;
    transition: padding-top .15s;
}
#page-navi .nav-link,
#page-navi .nav-link:hover,
#page-navi .nav-link:focus {
    color: #ffffff;
}

.home-tab {
    background-color: #777777 !important;
}
.action-tab {
    background-color: #3c9441 !important;
}
.question-tab {
    background-color: #cab248 !important;
}

.home-content {
    background-color: #f9f9f9;
}
.action-content {
    background-color: #eff8ea;
}
.question-content {
    background-color: #f6f7e7;
}

#container {
    padding-top: 70px;
}

.inner-contents {
    max-width: 960px;
    margin: 0 auto;
    padding: 10px 20px;
}

#footer {
    border-top: solid 1px #dee2e6;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

/** ホーム用設定 **/
#introduction-box {
    border-radius: 0.8rem !important;
}

#decokatu-box {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    background-color: #d7f3ff;
    padding: 0.5rem 1rem;
}

#credit-area {
    background-image: url('/assets/images/seal.gif');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 150px;
}

/** 行動用設定 **/
#action-nav .nav-link{
    color: #3c9441 ;
}
#action-nav .nav-link.active{
    background-color: #3c9441;
    color: #ffffff;
}

.action-table-wrapper {
    background-image: url('/assets/images/image03.png');
    background-repeat: no-repeat;
    background-position: 65% 50%;
    background-color: #ffffff;
}
.action-table-wrapper2 {
    background-image: url('/assets/images/image04.gif');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: 75% 50%;
    background-color: #ffffff;
}

.btn-outline-info:hover {
    color: #fff;
}

.action-table {
    font-size: 0.9rem;
    background-color: rgba(255, 255, 255, 0.9);
}

.action-table tbody td {
    border: none;
}

.action-table tbody tr:not(:last-child) {
    border-bottom: 1px solid rgb(222, 226, 230);
}

.action-table tbody tr:last-child {
    border-bottom: 1px solid rgb(33, 37, 41);
}

.action-table .form-check-input {
    background-color: rgba(253, 187, 175, 0.3);
}

.action-table .form-check-input:checked {
    background-color: #e07676;
    border-color: #e07676;
}

.action-on {
    background-color: rgba(253, 187, 175, 0.3);
}

.reduce-co2-cell span,
.reduce-money-cell span {
    color: #dddddd;
}
.action-on .reduce-co2-cell span,
.action-on .reduce-money-cell span {
    color: #000000;
}

.action-graph-wrapper {
    background-color: #ffffff;
}

.action-form {
    background-color: #bde3ba;
}

/** 問題用設定 **/
#question-nav .nav-link{
    color: #cab248 ;
}
#question-nav .nav-link.active{
    background-color: #cab248;
    color: #ffffff;
}

#question .tab-content {
    background-color: #ffffff;
}

.btn-question {
    color: #fff;
    background-color: #cab248;
    border-color: #cab248;
}
.btn-question:active {
    color: #fff;
    background-color: #cfae1c;
    border-color: #cfae1c;
}
.btn-question:hover,
.btn-question:focus {
    color: #fff;
    background-color: #ccaf2f;
    border-color: #ccaf2f;
}

.answer-area {
    position: relative;
    font-size: 2.5rem;
}

.answer {
    position: absolute;
    padding: 0 20px;
    background-color: #fff;
    opacity: 0.7;
    transform: rotate(-10deg) scale(3);
    transition: transform 0.5s;
}
.answer.scale {
    transform: rotate(-10deg) scale(1);
    transition: transform 0.5s;
}
#question-01 .answer {
    left: 80px;
    top: 30px;
}
#question-02 .answer {
    left: 60px;
    top: -5px;
}
#question-03 .answer {
    left: 60px;
    top: 10px;
}
#question-04 .answer {
    left: 60px;
    top: -5px;
}
.correct-answer {
    color: #de2128;
    border: solid 3px #de2128;
}
.incorrect-answer {
    color: #333333;
    border: solid 3px #333333;
}