@import url(../../css/cssreset.css);
@import url(../../css/common.css);
@import url(../../css/parts.css);
@import url(../../css/footer.css);
@import url(../../css/header_pc.css) screen and (min-width: 769px);
@import url(../../css/header_sp.css) screen and (max-width: 768px);

/* styles.css */
/* for earthquake */

/* background */
#contents {
    background: linear-gradient(180deg, #542a1b 0%, #542a1b 1000px, #f9c158 1000px, #f9c158 100%);
}
@media only screen and (max-width: 768px) {
    #contents {
        background: linear-gradient(180deg, #542a1b 0%, #542a1b 195vw, #f9c158 195vw, #f9c158 100%)
    }
}

/* main text area */
.tech hgroup h1 {
    letter-spacing: normal;
    text-indent: 0;
}
.tech hgroup h1,
.tech hgroup p {
    color: #ffffff;
}
.tech hgroup ul li a {
    border-color: #8ce4fd;
    color: #542a1b;
}
.tech hgroup ul li a:hover {
    background-color: #8ce4fd;
}
.tech hgroup ul li a small {
    font-size: 0.8em;
}
@media only screen and (max-width: 768px) {
    .tech hgroup ul li {
        width: 49%;
    }
    .tech hgroup ul li a small {
        font-size: 1em;
    }
}
@media only screen and (max-width: 460px) {
    .tech hgroup ul li a small {
        font-size: 0.85em;
    }
}

.tech article h2.wide {
    width: 11em;
}

.tech article {
    border-color: #ffe9a9;
}
.tech article:before,
.tech article:after {
    background-image: url(../images/corner.png);
}

.tech article h2 {
    background-color: #653627;
}



.tech article figure.img-a {
    width: 100%;
    max-width: inherit;
}
.tech article figure.img-b {
    max-width: 550px;
}
.tech article figure.img-c {
    max-width: 660px;
}
.tech article figcaption.img-c {
    text-align: center;
    font-weight: 500;
}
.tech article figure.img-d {
    max-width: 240px;
}
.tech article figure.img-e {
    width: 110%;
    max-width: inherit;
    transform: translateX(-5%);
}

.references {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}
p.references {
    font-weight: 700;
}

.video {
    max-width: 550px;
}
.tech article figure {
    max-width: 550px;
}

.column2-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 90%;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}
.tech article .column2-wrap figure {
    width: 50%;
    max-width: inherit;
    margin-left: 0;
    margin-right: auto;
}
.column2-wrap .text {
    width: 48.5%;
}
.column2-wrap .text dl.references {
    display: block;
}
.column2-wrap .text dl.references dt,
.column2-wrap .text dl.references dd {
    width: 100%;
}
@media only screen and (max-width: 768px) {
    .column2-wrap {
        display: block;
        width: 100%;
    }
    .tech article .column2-wrap figure {
        width: 60%;
    }
    .column2-wrap .text {
        width: 100%;
    }
}