h1 {
    font-family: "Noto Sans Mono CJK JP", sans-serif;
    font-size: 2.4rem;
    color: #3e8bd5;
    margin-bottom: 60px;
}
@media only screen and (max-width: 640px) {
    h1 {
        margin-bottom: 40px;
    }
}
h1 span {
    margin-right: 1.2rem;
}
h2 {
    width: 100%;
    font-size: 2.4rem;
    border-bottom: #D6D7D8 solid 1px;
    padding-bottom: 6px;
    margin-bottom: 60px;
}
@media only screen and (max-width: 640px) {
    h2 {
        margin-bottom: 40px;
    }
}
h2 span {
    margin-right: 1.2rem;
}
h3 {
    font-size: 2rem;
    margin-bottom: 16px;
}
@media only screen and (max-width: 640px) {
    h3 {
        margin-bottom: 12px;
    }
}
h4 {
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
}
@media only screen and (max-width: 640px) {
    h4 {
        font-size: 1.6rem;
        margin-bottom: 12px;
    }
}
/* title */
.title .utinav {
    align-items: center;
    position: absolute;
    right: 32px;
}
@media only screen and (max-width: 640px) {
    .title .utinav {
        right: 16px;
    }
}
.title .utinav .print {
    width: 20px;
    height: auto;
    margin-right: 40px;
    cursor: pointer;
}
.title .utinav .search {
    width: 16px;
    height: auto;
    cursor: pointer;
}
/* search_popup */
.search_popup {
    width: 320px;
    height: auto;
    padding: 30px 50px;
    background: #FAFAFA;
    margin-top: 27px;
    right: -32px;
    align-items: center;
    flex-wrap: nowrap;
    cursor: default;
}
@media only screen and (max-width: 640px) {
    .search_popup {
        width: 100vw;
        padding: 38px 42px;
        left: calc(-100vw + 32px);
        margin-top: 22px;
    }
}
.search_popup form::after {
    content: "";
    display: block;
    width: 16px;
    height: 8px;
    background: url(../img/common/btn_arrow.png) center center / contain no-repeat;
    position: absolute;
    right: 6px;
    margin-top: -20px;
    transform: scale(-1,1);
    cursor: pointer;
}
/* article */
.article {
    margin: 64px auto 0 auto;
    max-width: 1000px;
    padding: 0 40px;
}
@media only screen and (max-width: 640px) {
    .article {
        margin: 40px auto 0 auto;
        padding: 0 16px;
    }
}
.article .product_intro {
    margin-bottom: 60px;
}
@media only screen and (max-width: 640px) {
    .article .product_intro {
        margin-bottom: 40px;
    }
}
/* product_detail */
.article .product_detail {
    margin-bottom: 100px;
}
@media only screen and (max-width: 640px) {
    .article .product_detail {
        margin-bottom: 70px;
    }
}
.article .sector {
    margin-bottom: 40px;
}
@media only screen and (max-width: 640px) {
    .article .sector {
        margin-bottom: 30px;
    }
}
.article .sector_link {
    font-weight: bold;
    color: #3e8bd5;
    text-decoration: underline;
}
/* img */
.article .img {
    margin-top: 24px;
}
@media only screen and (max-width: 640px) {
    .article .img {
        margin-top: 16px;
    }
}
.article .img img {
    width: 100%;
    height: auto;
}
.article .attach_title {
    font-size: 1.2rem;
    letter-spacing: 0.06em;
    text-align: left;
}
@media only screen and (max-width: 640px) {
    .article .attach_title {
        font-size: 1rem;
    }
}
.article .attach_title span {
    margin-right: 0.6rem;
}
.article .img figcaption {
    margin: 12px 0 0 0;
}
@media only screen and (max-width: 640px) {
    .article .img figcaption {
        margin: 8px 0 0 0;
    }
}
/* table */
.article .table {
    margin-top: 24px;
}
@media only screen and (max-width: 640px) {
    .article .table {
        margin-top: 16px;
        width: 100%;
    }
}
.article .table caption {
    margin: 0 0 12px 0;
}
@media only screen and (max-width: 640px) {
    .article .table caption {
        margin: 0 0 8px 0;
    }
}
.article .table tbody {
    text-align: left;
}
.article .table tr {
    height: 40px;
    width: auto;
}
.article .table th,
.article .table td {
    height: 40px;
    line-height: 1;
    border: #D6D7D8 solid 1px;
    vertical-align: middle;
    padding-left: 12px;
    font-size: 1.2rem;
    letter-spacing: 0.06em;
    text-align: left;
}
@media only screen and (max-width: 640px) {
    .article .table th,
    .article .table td {
        font-size: 1.4rem;
        letter-spacing: 0;
    }
}
.article .table th {
    width: 240px;
}
@media only screen and (max-width: 640px) {
    .article .table th {
        width: 40%;
    }
}
.article .table td {
    width: 320px;
}
@media only screen and (max-width: 640px) {
    .article .table td {
        width: 60%;
    }
}
/* listing */
.article .list {
    width: 100%;
}
.article .list li {
    width: 100%;
    padding: 15px 0;
    border-bottom: #D6D7D8 solid 1px;
    display: flex;
    flex-wrap: nowrap;
    font-size: 1.4rem;
}
@media only screen and (max-width: 640px) {
    .article .list li {
        flex-wrap: wrap;
    }
}
.article .list .list_name {
    width: 25%;
    max-width:240px;
    min-width: 160px;
    line-height: 1;
    align-items: center;
}
@media only screen and (max-width: 640px) {
    .article .list .list_name {
        width: 100%;
        max-width: none;
    }
}
.article .list .list_content {
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
}
.article .list .list_content p {
    line-height: 1;
}
.article .list .btn_link {
    width: 80px;
    height: 30px;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    line-height: 2.3;
}
.article .list .btn .detail {
    position: relative;
}
.article .list .btn .detail:after {
    content: "";
    display: block;
    width: 10px;
    height: 4px;
    background: url(../img/common/btn_arrow.png) center center / contain no-repeat;
    transform: scale(-1, 1);
    position: absolute;
    right: 6px;
    top: 12px;
    transition: 0.3s;
}
.article .list .btn_link:hover.detail:after {
    right: 2px;
}











/* ? */