/* ポップアップ用の余白 */
article > section {
    padding: 2rem 2rem 0 2rem;
}

/* 深層など */
h2.right {
    border: 2px dotted darkgray;
    padding: 2rem;
    margin-top: 1rem;
    margin-bottom: 3rem;
}

.show {
    display: inline-block;
}

.red-background {
    background-color: red;
    color: black;
}


.blue-background {
    background-color: blue;
    color: white;
    display: table-cell;
    padding: 0.5rem;
}

.red-background-font-white {
    background-color: red;
    color: white;
}

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

.light-purple-background {
    background-color: #FF00FF;
}

.dark-purple-background {
    background-color: #c000c0;
}

*:disabled {
    cursor: not-allowed;
}

menu {
    padding: 0;
}

menu > li {
    list-style-type: none;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    min-height: 4.5rem;
    cursor: pointer;
}


.flex-item-RNA-btn {
    flex: 0 0 9rem;
}

.decision-button {
    margin-left: 0.5rem;
    height: 5rem;
    border: 1px solid black;
    text-overflow: clip;
    cursor: pointer;
    border-radius: var(--border-radius-btn);
    flex: 0 0 8rem;
}

.decision-button.active {
    animation: active var(--animation-duration) infinite ease-in;
}


.decision-button[disabled]{
    appearance: none;
    opacity: 0.65;
    cursor: not-allowed;
}


@keyframes active {
    0% {
        /* transform:scale(1.0); */
        background-color: white;
    }
    50% {
        /* transform:scale(1.05); */
        background-color: aqua;
    }
    100% {
        /* transform:scale(1.0); */
        background-color: white;
    }
}

img {
    display: block;
    border-radius: var(--border-radius);
    /* border: 3px dashed darkgray; */
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
    min-width: 70%;
    max-width: 80%;
    height: auto;
    padding: 1rem;
}

#page1 > dl {
    margin-top: 3.5rem;
}

small {
    font-size: small;
    display: flex;
    justify-content: center;
    padding: 1rem;
}


.text-bottom {
    vertical-align: bottom;
}

.margin-right1{
    margin-right: 1rem;
}

.margin-right2{
    margin-right: 2rem;
}

.ribosome-label {
    min-width: fit-content; 
    padding: 0.8rem 1rem;
    min-height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 0 auto;
}

#kuchinashi-flower {
    cursor: pointer;
    margin-bottom: 3rem;
}


/* ページ１３ボタン */
.page13-ai {
    background-color: #800080;
    color: white;
}

.page13-hikan-1{
    background-color: #712a01;
    color: white;
}

.page13-hikan-2{
    background-color: #000;
    color: white;
}

.page13-ai,
.page13-hikan-1,
.page13-hikan-2{
    padding: 0.2rem;
    min-width: 8rem;
    display: inline;
    margin: 0.3rem 0.1rem;
}

.page13-ai[disabled],
.page13-hikan-1[disabled],
.page13-hikan-2[disabled] {
    background-color: grey;
}

/* ページ１３文句 */
#page13,
#page14{
    position: relative;
    height: 100%;
}

#phenomenon,
#phenomenon3 {
    position: absolute;
    top: 53%;
    left: 50%;
	transform: translate(-50%, -50%);
    padding: 1rem;
    cursor: pointer;
}

#shippeiritoku,
#etsugishinri {
    position: absolute;
    top: 75%;
    left: 50%;
	transform: translate(-50%, -50%);
}


.ai-complaints,
.pessimism-complaints-one,
.pessimism-complaints-two {
    position: relative;
    height: 80%;
}

h4[name="chatGPT"] {
    position: absolute;
    top: 68%;
    left: 60%;
}

h4[name="speakbuddy"] {
    position: absolute;
    top: 5%;
    left: 5%;
}

h4[name="google-assistance"] {
    position: absolute;
    top: 75%;
    left: 50%;
}

h4[name="image-generation"] {
    position: absolute;
    top: 70%;
    left: 20%;
}

h4[name="siri"] {
    position: absolute;
    top: 12%;
    left: 25%;
}

h4[name="xai"] {
    position: absolute;
    top: 20%;
    left: 75%;
}

h4[name="cookie"] {
    position: absolute;
    top: 5%;
    left: 55%;
}

h4[name="alexa"] {
    position: absolute;
    top: 12%;
    left: 70%;
}

h4[name="no-acceptance"] {
    position: absolute;
    top: 68%;
    left: 5%;
    max-width: 35%;
}

h4[name="outcast"] {
    position: absolute;
    top: 3%;
    left: 5%;
    max-width: 35%;
}

h4[name="disliked"] {
    position: absolute;
    top: 75%;
    left: 70%;
}


h4[name="acharai"] {
    position: absolute;
    top: 3%;
    left: 70%;
}

h4[name="out-of-control"] {
    position: absolute;
    top: 68%;
    left: 70%;
}

h4[name="messy"] {
    position: absolute;
    top: 75%;
    left: 5%;
    max-width: 35%;
}

.right {
    float: right;
}

.page2-layout {
    display: flow-root;
}

#isou > .isou-option {
    flex: 1 1 auto;
    min-width: 10rem;
}

@media ( max-width: 600px ) { 
    img {
        width: 100%;
    }
}