@charset "UTF-8";

/*INDEX
index.php
chemical01.php
-----*/





/* common */

.indentTxt {
    text-indent: -1.5em;
    padding-left: 1.5em;
}

.chemical--sub h2:after {
    display: none;
}

.container--sub h2:after {
    border-color: #000064;
}

.mv__wrapper {
    background-image: url('../img/bg_chemical.jpg');
}

#tanshozai {
    margin-top: -200px;
    padding-top: 200px;
}

dt,
dd {
    font-weight: normal;
}

.mgn--bottom50 {
    margin-bottom: 50px;
}

.mgn--bottom30 {
    margin-bottom: 30px;
}

.mgn--bottom20 {
    margin-bottom: 20px;
}

.mgn--bottom10 {
    margin-bottom: 10px;
}

.mgn--right30{
	margin-right: 30px;
}

.indentTxt--disc {
    text-indent: -1.1em;
    padding-left: 1.1em;
    margin-bottom: .5em
}

p {
    line-height: 1.5;
}

.img__box{
    margin: 0 auto 20px;
}

/* index.php */

.chemicalImg__wrap {
    max-width: 920px;
    margin: 0 auto;
}

.chrmicalList__wrapper {
    justify-content: center;
}

.chemical__wrap dt,
.chemical__wrap dd {
    display: table;
    height: 55px;
    border-radius: 2px;
    margin-bottom: 5px;
    position: relative;
}

.chemical__wrap .chrmicalList__inner--long .chrmicalList__inner--short dd {
    max-width: 300px;
}

.chemical__wrap .chrmicalList__inner--double dd {
    max-width: 455px;
}

.chemical__wrap dt a,
.chemical__wrap dd a {
    display: table-cell;
    width: 100%;
    height: 100%;
    font-weight: normal;
    padding-left: 10px;
    text-align: left;
    vertical-align: middle;
}

.chemical__wrap dt a:hover,
.chemical__wrap dd a:hover{
    text-decoration: none;
}

.chemical__wrap dt {
    background: #000064;
    color: #fff;
    font-size: 15px;
}

.chemical__wrap dd {
    background: #ededed;
    font-size: 13px;
}

.chemical__wrap dd.list--empty {
    background: transparent;
}

.chemical__wrap dt:after,
.chemical__wrap dd:not(.list--empty):after,
.chemical--nav li a:after {
    content: "▶︎";
    display: inline-block;
    font-size: 16px;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    position: absolute;
}

.chemical__wrap dd:not(.list--empty):after {
    color: #828282;
}

.chrmicalList__inner--long,
.chrmicalList__inner--long dt,
.chrmicalList__inner--double {
    width: 100%;
}

.chrmicalList__inner--double dd {
    width: 430px;
}

.chrmicalList__inner--long dt a {
    text-align: center;
}

.chrmicalList__inner--short:not(:last-child),
.chrmicalList__inner--double dd:not(:last-child),
.chrmicalList__inner--long .chrmicalList__inner--short dd:not(:last-child) {
    margin-right: 10px;
}

dl.chrmicalList__inner--short {
    width: 100%;
}

.chrmicalList__inner--short dt,
.chrmicalList__inner--short dd,
.chrmicalList__inner--double dt,
.chrmicalList__inner--double dd {
    width: 100%;
}

.chemical--nav {
    margin-top: 60px;
}

.chemical--nav ul li {
    width: 100%;
    max-width: calc(50% - 5px);
    margin-left: 10px;
    height: 175px;
    color: #fff;
    float: left;
    font-size: 1.3em;
    overflow: hidden;
}

.chemical--nav ul li:nth-child(odd) {
    margin-left: 0;
}

.chemical--nav ul li a.nav--left {
    background: url("../img/chemical-btn-01.jpg") no-repeat center / cover;
}

.chemical--nav ul li a.nav--right {
    background: url("../img/chemical-btn-02.jpg") no-repeat center / cover;
}

.chemical--nav ul li a {
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    height: 175px;
    position: relative;
    text-align: center;
    text-shadow: 0px 0px 4px #444;
    transition-duration: 0.3s;
    vertical-align: middle;
}

.chemical--nav ul li.list--empty {
    width: 10px;
    background: transparent;
}

.chemical--nav ul li a {
    flex-direction: column;
}

.chemical--nav ul li a.nav--right span {
    font-size: 40px;
    margin-top: -20px;
}

/* chemical01.php */


.anchorLink__wrap {
    background: #ededed;
    font-weight: 600;
    margin: 0 auto;
    padding: 20px 20px 30px;
}

.anchorLink__wrap a:hover{
    text-decoration: none;
}

.txt--onAnchorLink {
    text-align: right;
}

.anchorLink__wrap h2 {
    margin-top: 0;
    margin-bottom: 30px;
}

.anchorLink__wrap .anchorLink__block:not(:last-child) {
    margin-bottom: 20px;
}

.anchorLink__wrap .anchorLink__block .box {
    display: table;
    width: 100%;
    max-width: 430px;
    height: 100px;
    color: #000064;
    background: #fff;
    padding-left: 65px;
    position: relative;
}

.anchorLink__wrap .anchorLink__block .box a {
    display: table-cell;
    padding-right: 3em;
    text-align: left;
    vertical-align: middle;
}

.anchorLink__wrap .anchorLink__block .box:not(:last-child) {
    margin-right: 20px;
}


.anchorLink__wrap .anchorLink__block .box:before,
.anchorHeading:before {
    color: #000064;
    font-size: 40px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
}

.anchorLink__wrap .anchorLink__block .box--1:before,
#chemical01 .anchorHeading:before {
    content: "1";
}

.anchorLink__wrap .anchorLink__block .box--2:before,
#chemical02 .anchorHeading:before {
    content: "2";
}

.anchorLink__wrap .anchorLink__block .box--3:before,
#chemical03 .anchorHeading:before {
    content: "3";
}

.anchorLink__wrap .anchorLink__block .box--4:before,
#chemical04 .anchorHeading:before {
    content: "4";
}

.anchorLink__wrap .anchorLink__block .box--5:before,
#chemical05 .anchorHeading:before {
    content: "5";
}

.anchorLink__wrap .anchorLink__block .box--6:before,
#chemical06 .anchorHeading:before {
    content: "6";
}

.anchorLink__wrap .anchorLink__block .box:after {
    width: 25px;
    content: url("../img/arrow.svg");
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

.anchorLink__wrap .anchorLink__block .box.list--empty {
    background: transparent;
}

.anchorLink__wrap .anchorLink__block .box.list--empty:after {
    display: none;
}


h2.anchorHeading {
    font-size: 23px;
    font-weight: bold;
    margin-top: 60px;
    margin-bottom: 30px;
    padding-left: 40px;
    position: relative;
    text-align: left;
}

h2.anchorHeading:before {
    left: 0;
    padding-bottom: 10px;
}

h3 {
    color: #000064;
    font-size: 20px;
    font-weight: bold;
}

h3.HeadingSub {
    padding-bottom: 20px;
}

h3.center {
    text-align: center;
}

h4 {
    color: #000064;
    font-size: 18px;
    font-weight: bold;
}

.contentsBlock {
    padding-top: 220px;
    margin-top: -220px;
}

.simpleTableBlock {
    margin-top: 40px;
}

.simpleTableBlock__heading {
    margin-bottom: 30px;
}

.simpleTableBlock__item {
    display: flex;
    width: 100%;
    max-width: 950px;
    margin-bottom: 0;
    border-top: 1px solid #000064;
    padding: 20px;
}

.simpleTableBlock__notice {
    border-top: 1px solid #000064;
    padding-top: 20px;
    text-align: right;
}

.simpleTableBlock__item .title {
    min-width: 260px;
    max-width: 260px;
    padding-right: 20px;
}

#chemical01 p.simpleTableBlock__notice{
	  text-align: left;
}

#chemical02 .simpleTableBlock__item .title {
    min-width: 220px;
    max-width: 260px;
    padding-right: 20px;
}

.simpleTableBlock__item dd {
    max-width: 620px;
}

.simpleTableBlock__item--hasimage .title {
    width: 17%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    letter-spacing: 5px;
    padding-right: 10px;
}

.simpleTableBlock__item .box--right {
    max-width: 650px;
}

.simpleTableBlock__item .box--right dt {
    width: 120px;
    height: 30px;
    line-height: 30px;
    background: #e5e6ef;
    color: #000064;
    margin-bottom: 5px;
    text-align: center;
}

.simpleTableBlock__item .box--right dd {
    font-size: 16px;
    padding-left: 1em
}

.simpleTableBlock__item--hasimage dd:first-of-type {
    width: 100%;
}

.simpleTableBlock__item--hasimage dd:last-of-type {
    width: 54%;
    margin-left: 4%;
    box-sizing: border-box;
}

.definicationModule {
    margin-bottom: 50px;
}

.definicationModule__item {
    display: table;
}

.definicationModule__item dt {
    display: table-cell;
    width: 60px;
    font-weight: bold;

}

.definicationModule__item dt:after {
    content: ":";
    display: inline-block;
    margin-left: 0.25em;
    margin-right: 0.25em;
}

.definicationModule__item dd {
    display: table-cell;

}

.complexTableBlock {
    width: 100%;
    margin-bottom: 50px;
}

.complexTableBlock--noMargin {
    margin-bottom: 10px;
}

.complexTableBlock+small {
    display: inline-block;
    width: 100%;
    text-align: left;
}

.complexTableBlock caption {
    caption-side: top;
    width: 100%;
    height: 36px;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 10px;
    padding-left: 1em;
    color: #000064;
    font-size: 20px;
    font-weight: bold;
    line-height: 36px;
    background: #e5e6ef;
}

.complexTableBlock thead {
    background: #e5e6ef;
    border: 1px solid #000064;
    box-sizing: border-box;
}

.complexTableBlock th {
    height: 36px;
    font-size: 16px;
    color: #000064;
    vertical-align: middle;
    text-align: center;
}

.complexTableBlock th.th01 {
    width:160px;
}

.complexTableBlock th.th02 {
    width:250px;
}

.complexTableBlock th,
.complexTableBlock td {
    padding-right: 20px;
    padding-left: 20px;
}

.complexTableBlock th {
    border-right: 1px solid #000064;
}

.complexTableBlock th:last-child {
    border-right: none;
}

.complexTableBlock td {
    border: 1px solid #000064;
    padding-top: 20px;
    padding-bottom: 20px;
    vertical-align: middle;
}

.complexTableBlock .anchorLink a {
    border-bottom: none;
    padding-bottom: 0;
}

.complexTableBlock .anchorLink a:hover{
    text-decoration: none;
}

.complexTableBlock td:first-child {
    max-width: 190px;
    width: fit-content;
}

.complexTableBlock td:nth-child(2) {
    max-width: 190px;
}

.complexTableBlock td:nth-child(3) {
    max-width: 200px;
    padding-right: 20px;
}

.complexTableBlock ul {
    margin-bottom: 0;
}

.anchorLink a {
    width: auto;
    padding-right: 20px;
    border-bottom: 1px solid transparent;
    padding-bottom: 3px;
    position: relative;
}

.anchorLink__wrapper .anchorLink a:after {
    display: inline-block;
    width: 1em;
    height: auto;
    content: url(../img/arrow.svg);
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    right: 0;
}

.asideContents {
    background: #ededed;
    margin: 30px auto 60px;
    padding: 40px;
}

.asideContents a:hover {
    text-decoration: none;
}

.asideContents__title {
    color: #000064;
    font-size: 20px;
    font-weight: bold;
}


.colorCheckDescription .txt__box {
    max-width: 700px;
    margin-right: 30px;
}

.colorCheckDescription .img__box {
    max-width: 360px;
    text-align: center;
}

.colorCheckDescription .img__box p {
    padding-top: 10px;
}

.descriptionModule__description {
    max-width: 440px;
}

.descriptionModule .img__box {
    width: 30%;
}

.descriptionModule .img__box:first-of-type {
    margin: 0 1em;
    text-align: center;
}

.descriptionModule__image {
    max-width: 240px;
}

.descriptionModule__image img {
    height: 180px;
    margin-bottom: 10px;
}

.descriptionModule__image.middle {
    margin: 0 30px;
}
.descriptionModule__image.right1 {
    margin-left:170px;
}

.description__block--indent dd,
.description__txt--indent {
    text-indent: -1em;
    padding-left: 1em;
}


.iconTieBtn {
    width: 100%;
    height: 90px;
    align-items: center;
    background: #fff;
    justify-content: left;
    border-right: 1px solid #828282;
    border-bottom: 1px solid #828282;
    margin: 0 0 20px 0;
    padding-left: 20px;
    position: relative;
}

.iconTieBtn .img__box {
    width: 20px;
    min-width: 0;
    max-width: 20px;
    height: auto;
    margin-left: 0;
    margin-right: 20px;
    margin-bottom: 0;
}

.iconTieBtn .img__box img {
    padding-bottom: 0;
}

.iconTieBtn:after {
    content: "▶︎";
    color: #828282;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

.btnLinks {
    padding: 40px;
}

.btnLinks .btn__bottom__wrapper {
    justify-content: left;
}

.btnLinks .btn__bottom__box {
    background: #000064;
    color: #fff;
}

.description--plural dd {
    padding-left: 3em;
}

.equipmentType__block dt,
.equipmentType__block--typeA dt,
.equipmentType__block--typeB dt,
.equipmentTypeDescription__box dt,
.mgn--bottom50 dt,
.usage__wrap dt,
.usageWithImg__block dt,
.featureLists--block dt {
    font-weight: bold;
    margin-bottom: 10px;
}

.usage__wrap:not(:last-child) {
    margin-bottom: 0;
}

/* prtyr.php */
.mv__wrapper--prtr {
    background-image: url("/support/local/img/bg_support.jpg")!important;
}
.prtrList__outer li {
    text-indent: -1em;
    padding-left: 1em;
}


/*------------*/
/* pc only settings */
/*------------*/

@media (min-width: 1051px) {

    /* hover */
    .chemical__wrap dt:hover {
        opacity: .9;
    }

    .chemical__wrap dd a:hover,
    .anchorLink__wrap .anchorLink__block .box:hover,
    .iconTieBtn:hover {
        background: #e5f0f9;
    }

    .chemical--nav ul li a:hover {
        transform: scale(1.15);
        transition-duration: 0.3s;
        opacity: 0.8;
        text-decoration: none;
    }

    .btnLinks .btn__bottom__box:hover {
        opacity: .8;
        background: #000064 !important;
    }

    .list--empty:hover {
        background: transparent !important;
    }

}

/*min-width: 1051px*/

/*------------*/
/* responsive settings */
/*------------*/

@media (max-width: 980px) {

    /* index.php */
    .chemical__wrap dt a,
    .chemical__wrap dd a {
        padding-right: 32px;
    }

    .chemical--nav ul li a {
        flex-direction: row;
        justify-content: left;
        padding: 0 40px;
    }

    .chemical--nav ul li a.nav--left br {
        display: none;
    }

    .chemical--nav ul li a.nav--right span:first-child {
        margin-right: 10px;
    }

    .chemical--nav ul li,
    .chemical--nav ul li a {
        max-width: 100%;
        height: 140px;
        margin-left: 0;
    }

    .chemical__wrap .chrmicalList__inner--double dd,
    .chemical__wrap .chrmicalList__inner--long .chrmicalList__inner--short dd {
        max-width: 100%;
    }

    .complexTableBlock,
    .complexTableBlock th {
        font-size: 14px;
    }

    .complexTableBlock th:last-child {
        padding: 0;
    }


    .anchorLink__wrap .anchorLink__block .box {
        padding-left: 60px;
    }


}

/*max-width: 980px*/



@media (max-width: 767px) {

    h2 {
        margin: 20px auto;
    }

    h2.anchorHeading {
        font-size: 21px;
    }

    h3 {
        font-size: 18px;
        margin: 0 3.9vw 0.5rem;
    }

    h4 {
        font-size: 16px;
    }

    small {
        font-size: 50%;
        padding: 0 1em;
    }

    .contentsBlock {
        padding-top: 1em;
        margin-top: 1em;
    }

    .iconTieBtn {
        font-size: 12px;
        padding-right: 20px;
    }

    /* index.php */
    .chrmicalList__wrapper,
    .chrmicalList__inner--double,
    .chrmicalList__inner--long .chrmicalList__inner--short {
        flex-direction: column;
        align-items: center;
    }

    .chemical__wrap dl {
        width: 100%;
        margin-bottom: 55px;
    }

    .chemical__wrap dt a {
        text-align: center;
    }

    .chemical__wrap dd {
        width: 100%;
    }

    .chemical__wrap dd.list--empty {
        display: none;
    }

    .chrmicalList__inner--short:not(:last-child),
    .chrmicalList__inner--double dd:not(:last-child),
    .chrmicalList__inner--long .chrmicalList__inner--short dd:not(:last-child) {
        margin-right: 0;
    }

    /*chemical01.php*/

    .container--sub.details {
        padding: 1em 0;
    }

    .container--sub.details .txt--onAnchorLink,
    .anchorHeading,
    .headingSub,
    .simpleTableBlock,
    .simpleTableBlock__notice {
        margin: 0 3.9vw 1em;
    }

    .simpleTableBlock__notice {
        font-size: 14px;
    }

    .mgn--bottom50,
    .block--spLength {
        width: 90%;
        line-height: 1.7;
        margin: 0 auto 30px;
    }

    .anchorLink__block {
        flex-direction: column;
        align-items: center;
        margin-bottom: 0;
    }

    .anchorLink__wrap .anchorLink__block .box:before,
    .anchorHeading:before {
        left: 10px;
    }

    .anchorLink__wrap .anchorLink__block:not(:last-child) {
        margin-bottom: 0;
    }

    .anchorLink__wrap .anchorLink__block .box {
        width: 100%;
        height: 80px;
        font-size: 13px;
        margin-bottom: 15px;
        padding-left: 40px;
    }


    .anchorLink__wrap .anchorLink__block .box:not(:last-child) {
        margin-right: 0;
    }


    .anchorLink__wrap .anchorLink__block .box.list--empty {
        display: none;
    }

    h2.anchorHeading {
        margin-top: 0;
    }

    .simpleTableBlock {
        margin-top: 20px;
    }

    .simpleTableBlock__item {
        padding: 20px 20px 0;
    }

    .simpleTableBlock__item {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .simpleTableBlock__item.tableBlock__item--align {
        align-items: flex-start;
    }

    .simpleTableBlock__item .title {
        width: 100%;
    }

    .simpleTableBlock__item .title,
    .simpleTableBlock__item .box--right dt {
        margin-bottom: 15px;
    }

    .simpleTableBlock__item--hasimage .title {
        justify-content: center;
    }

    .simpleTableBlock__item--hasimage dd:first-of-type {
        width: 100%;
        max-width: 320px;
    }

    .simpleTableBlock__item--hasimage dd:last-of-type {
        width: 100%;
        margin-bottom: 30px;
    }

    .simpleTableBlock__item .box--right dd {
        padding-left: 0;
    }

    .colorCheckDescription {
        flex-direction: column;
        align-items: center;
    }

    .colorCheckDescription .txt__box {
        margin-right: 0;
    }

    .colorCheckDescription .img__box {
        margin-top: 20px;
    }

    .usage__wrap {
        width: 90%;
        margin: 0 auto 1em;
    }

    .usage__wrap:not(:last-child) {
        margin-bottom: 1em;
    }

    .usage__wrap dd {
        width: 83%;
    }


    .definicationModule {
        width: 90%;
        margin: 0 auto 50px;
    }
        
    .complexTableBlock {
        width: 90%;
        font-size: 12px;
        margin: 0 auto 30px;
    }

    .complexTableBlock--noMargin {
        margin-bottom: 0;
    }

    .complexTableBlock caption{
        font-size: 14px;
    }

    .complexTableBlock th {
        padding-right: 5px;
        padding-left: 5px;
        font-size: 12px;
    }

    #chemical03 .complexTableBlock th:first-child {
        white-space: nowrap;
    }

    .complexTableBlock td {
        padding: 5px;
    }
	
	#chemical03 .complexTableBlock{
		width: 100%;
	}
	
    #chemical03 .complexTableBlock td:nth-child(2),
    #chemical03 .complexTableBlock td:nth-child(3){
			  max-width: 130px;
		}
	
    .complexTableBlock td:nth-child(3) {
        padding-right: 5px;
    }
    .complexTableBlock + small{
        display: block;
        width: 90%;
        margin: 0.5em auto 2em;
        text-indent: 0;
        padding: 0;
    }

    .descriptionModule__image {
        text-align: center;
    }

    .complexTableBlock .heading {
        width: 25%;
    }

    .complexTableBlock .symbol {
        width: 25%;
    }

    .asideContents {
        padding: 20px 3.9vw;
    }

    .iconTieBtn {
        min-height: 60px;
        height: auto;
    }

    .descriptionModule {
        flex-direction: column;
        align-items: center;
    }

    .usageWithImg__block {
        flex-direction: column-reverse;
        align-items: center;
    }

    .btnLinks {
        padding: 0 20px;
    }

    .asideContents__title {
        margin: 1em;
        text-align: center;
    }

    .btn__bottom__wrapper {
        margin-top: 0;
    }
    .descriptionModule__image.right1 {
        margin-left:0;
    }
    
}