@charset "utf-8";
/* =============================================
余白の単位はなるべくemで指定します。デフォルトで1em=16pxです
============================================= */

.section-contents{
    margin-top: 1.875em;
}

.caribra-h2{    /* h2の中で改行しており、スマホ表示の時は行間を詰めたい */
    line-height: 1.4;
}
@media screen and (min-width:961px) {
.caribra-h2{
    line-height: 1.8;
    width: 950px;
    }
}

.h2-small{
    font-size: 14.4px; /* emで指定するよ想定より大きくなってしまうのでpx指定 */
}
@media screen and (min-width:961px) {
.h2-small{
    font-size: 18px; /* emで指定するよ想定より大きくなってしまうのでpx指定 */
    }
}

/* h2を区切りにしたカテゴリーの位置調整 */
.calibra{
    background-color: #fff;
    width: 94%;
    margin: 0 auto;
}
@media screen and (min-width:961px) {
.calibra{
    width: 950px;
    }
}

.cal-txt{
    width: 100%;
    margin: 20px 0 20px;
}
@media screen and (min-width:961px) {
.cal-txt{
    width: 940px;
    margin: 20px 0 50px;
    }
}

.jscc-box{
    display: flex;
    flex-wrap: wrap;
}
@media screen and (min-width:961px) {
.jscc-box{
    flex-wrap: nowrap;
    }
}

@media screen and (min-width:541px) {
.jscc-box2 {
    display: flex;
    flex-wrap: nowrap;
    }
}

@media screen and (min-width:541px) {
.jscc-box3 {
    display: flex;
    flex-wrap: nowrap;
    }
}

.jcss-b-txt{
    flex-grow: 2;
    font-size: 0.8125em;    /* 13px */
    line-height: 1.8;
    margin-right: 0px;
}
@media screen and (min-width:961px) {
.jcss-b-txt{
    font-size: 1em;    /* 16px */
    }
}

@media screen and (min-width:541px) {
.left-text{
    margin-right: 20px;
    }
}
@media screen and (min-width:961px) {
.left-text{
    margin-right: 60px;
    }
}

.cal-txt-p{
    margin: 0 0 20px 0;
}

/* JCSS登録内容のリスト表示 */
.ctlist{
    border: 1px solid #636794;
    margin-top: 20px;
    padding: 10px;
}
@media screen and (min-width:961px) {
.ctlist{
    border: 2px solid #636794;
    padding: 20px 30px;
    }
}

.ctlist-th{
    padding: 0 15px 10px 0;
}
@media screen and (min-width:541px) {
.ctlist-th{
    padding: 0 40px 0 0;
    }
}

.ctlist-td{
    padding: 0 0 10px 0;
}
@media screen and (min-width:541px) {
.ctlist-td{
    padding: 0;
    }
}

.ctlist-th, .ctlist-td{
    border: none!important;
    font-size: 13px;
    line-height: 1.3;
    vertical-align: top;
}
@media screen and (min-width:541px) {
.ctlist-th, .ctlist-td{
    font-size: 15px;
    line-height: 1.8;
    }
}

/* JCSS校正の画像全般 */
.jcss-b-img{
    height: auto;
    margin: 10px auto 0;
    text-align: center;
    width: 50%;
}
@media screen and (min-width:961px) {
.jcss-b-img{
    width: auto;
    height: auto;
    }
}
@media screen and (min-width:541px) {
.jcss-b-img{
    margin: 0;
    text-align: left;
    }
}

.jcss-system-img {  /* トレーサビリティ体系の図 */
    width: 100%;
}

/* 文字リンク */
.cal-link {
    text-align: right;
}
.cal-link-a {
    color: #636794;
    text-decoration: none;
}

/* 校正証明書の配置 */
.certificate-box-flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
@media screen and (min-width:541px) {
.certificate-box-flex {
    justify-content: space-around;
    flex-wrap: nowrap;
    }
}

.certificate-box {
    width: 100%;
    margin: 0 10px;
}
@media screen and (min-width:541px) {
.certificate-box {
    width: 176px;
    }
}

/* 校正証明書のPDFへのリンク */
.link-hover:hover {
    filter: alpha(opacity=80);
    opacity: 0.7;
}

/* 校正証明書の画像 */
.certificate-box-img {
    border: 1px solid #ccc;
    height: auto;
    margin-bottom: 0.4em;
    width: 100%;
}

/* 校正証明書の下の説明 */
.certificate-box-p{
    font-size: 0.6875em;    /* 11px */
    line-height: 1.4;
    text-align: center;
}
@media screen and (min-width:541px) {
.certificate-box-p{
    font-size: 0.75em;    /* 12px */
    }
}

/* h3見出し。共通の h3-text と幅や間隔が違うので個別に指定 */
.jcss-h3{
    width: 100%;
    height: auto;
    color: #223a70;
    border-bottom: 1px solid #CCC;
    margin: 0.4em auto 0.7em;
    font-weight: 700;
}
@media screen and (min-width:961px) {
.jcss-h3{
    margin: 1.5em auto;
    }
}

/* 校正内容の箇条書き */
.jcss-li {
    list-style-type: disc;
    margin-left: 24px;
    text-align: left;
}

/* 校正内容の表 */
.jcss-value-table {
    border-top: 1px solid #333!important;
    margin: 15px 0 0;
    width: 100%;
}

.jcss-value-table-td {
    border: 1px solid #333;
    border-right: 1px solid #333;
    text-align: center;
    font-size: 11px;    /* emで指定するよ想定より小さくなってしまうのでpx指定 */
    line-height: 1.3;
    padding: 3px 5px;   /* emで指定するよ想定より小さくなってしまうのでpx指定 */
}
@media screen and (min-width:541px) {
.jcss-value-table-td {
    font-size: 13px;    /* emで指定するよ想定より小さくなってしまうのでpx指定 */
    line-height: 1.8;
    padding: 3px 10px; /* emで指定するよ想定より小さくなってしまうのでpx指定 */
    }
}

.jcss-value-table-caption{
    text-align: right;
}

/* 校正内容で表示している製品や標準液などの画像 */
.jcss-product-img-area{
    flex-basis: 60%;
    text-align: center;
    margin: 0 auto 20px;
}
@media screen and (min-width:541px) {
.jcss-product-img-area{
    flex-basis: 258px;
    text-align: left;
    margin: 80px 0 0 0;
    }
}

.jcss-product-img{
    width: 60%;
}
@media screen and (min-width:541px) {
.jcss-product-img{
    width: 100%;
    }
}

/* 校正内容の末尾の注釈 */
.jcss-caution-li{
    font-size: 0.8125em;    /* 13px */
}

/* 他リンクと指定が一致しないので個別で定義 */
.jcss-mail{
    color: #636794;
    text-decoration: none;
}
.jcss-mail:hover{
    color: #999;
}

.mark-jcss{
    margin-top: 15px;
    width: auto;
}

@media screen and (min-width:961px) {
.jcss-box3-img{
    margin-left: 20px;
    }
}