@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 experiment */

/* background */
#contents {
    background: linear-gradient(180deg, #005ba8 0%, #005ba8 1000px, #bbd9f2 1000px, #bbd9f2 100%);
}
@media only screen and (max-width: 768px) {
    #contents {
        background: linear-gradient(180deg, #005ba8 0%, #005ba8 170vw, #bbd9f2 170vw, #bbd9f2 100%)
    }
}
@media only screen and (max-width: 460px) {
    #contents {
        background: linear-gradient(180deg, #005ba8 0%, #005ba8 220vw, #bbd9f2 220vw, #bbd9f2 100%)
    }
}

/* main text area */
.tech hgroup h1,
.tech hgroup p {
    color: #ffffff;
}
.tech hgroup ul {
    max-width: 640px;
}
.tech hgroup ul:before,
.tech hgroup ul:after {
    width: 24.5%;
}
.tech hgroup ul li {
    width: 24.5%;
}
.tech hgroup ul li a {
    border-color: #f9b400;
    color: #283c7f;
}
.tech hgroup ul li a:hover {
    background-color: #f9b400;
}
@media only screen and (max-width: 768px) {
    .tech hgroup ul li {
        width: 49%;
    }
}

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

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



.tech article figure.img01 {
    max-width: 650px;
}
.tech article figure.img02 {
    width: 100%;
    max-width: inherit;
}
.tech article figure.photo {
    max-width: 500px;
}

.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;
    position: relative;
    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 {
    position: absolute;
    left: 52.5%;
    bottom: 0;
    width: max-content;
}
.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 {
        position: static;
        width: 100%;
    }
}