:root {
	--titleFont: 26px;
	--leadFont:20px;
	--subtitleFont: 20px;
	--typetitleFont: 18px;
	--textFont: 14px;
	--pointColor: #B00A0A;
	--gray:#aaa;
	--lightgray:#efefef;
}

img {
    max-width: 100%;
}

/* ------------------------------

contents

------------------------------ */
#contents {
    margin:0 auto;
}
@media only screen and (max-width: 599px) {
     #contents {
        text-align: left;
		padding:0 4vw;
    }
    #contents h1 {
        font-size: 20px;
        padding-bottom: 3px;
    }
    #contents h2 {
        font-size: 18px;
        margin-top: 20px;
    }
    #contents h2 span {
        color: var(--pointColor);
        margin-top: 35px;
    }
    #contents h3 {
        font-size: 17px;
        margin-bottom: 13px;
    }
    #contents h3 span:nth-of-type(2){
		font-size: 14px;
		padding-left: 10px;
	}
    #contents p {
        font-size: 13px;
    }
    #contents p.type_title {
        font-size: 16px;
        margin-bottom: 20px;
    }
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
    #contents {
        width:100%;
        text-align: left;
		padding:0 4vw
    }
    #contents h1 {
        font-size:var(--titleFont);
        padding-bottom: 3px;
    }
    #contents h2 {
        font-size:var(--leadFont);
        margin-top: 30px;
    }
    #contents h2 span {
        color: var(--pointColor);
        margin-top: 35px;
    }
    #contents h3 {
        font-size:var(--subtitleFont);
        margin-bottom: 24px;
    }
    #contents h3 span:nth-of-type(2){
		font-size: 14px;
		padding-left: 20px;
	}
    #contents p {
        font-size:var(--textFont);
    }
    #contents p.type_title {
        font-size: var(--typetitleFont);
        margin-bottom: 20px;
    }
}
@media only screen and (min-width: 1025px) {
    #contents {
        width:1100px;
        text-align: left;
    }
    #contents h1 {
        font-size:var(--titleFont);
        padding-bottom: 3px;
    }
    #contents h2 {
        font-size:var(--leadFont);
        margin-top: 30px;
    }
    #contents h2 span {
        color: var(--pointColor);
        margin-top: 35px;
    }
    #contents h3 {
        font-size:var(--subtitleFont);
        margin-bottom: 24px;
    }
    #contents h3 span:nth-of-type(2){
		font-size: 14px;
		padding-left: 20px;
	}
    #contents p {
        font-size:var(--textFont);
    }
    #contents p.type_title {
        font-size: var(--typetitleFont);
        margin-bottom: 20px;
    }
}


/* ------------------------------

main_title_section

------------------------------ */
@media only screen and (max-width: 599px) {
    .main_title_section {
        margin: 0 0 30px;
    }
    .main_title_section h1 {
        border-bottom: 3px solid var(--gray);
    }
    .main_title_section p {
        margin-top: 3px;
    }
    .main_title_section p span {
        font-size: 16px;
        line-height:1.7;
    }
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
    .main_title_section {
        margin: 40px 0;
    }
    .main_title_section h1 {
        border-bottom: 3px solid var(--gray);
    }
    .main_title_section p {
        margin-top:8px;
    }
    .main_title_section p span {
        font-size:18px;
        line-height:1.7;
    }
}
@media only screen and (min-width: 1025px) {
    .main_title_section {
        margin: 40px 0;
    }
    .main_title_section h1 {
        border-bottom: 3px solid var(--gray);
    }
    .main_title_section p {
        margin-top:8px;
    }
    .main_title_section p span {
        font-size:18px;
        line-height:1.7;
    }
}


/* ------------------------------

wiring_list

------------------------------ */
@media only screen and (max-width: 599px) {
    .wiring_list {
        margin: 0 auto 90px;
    }
    .wiring_list ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0 auto 30px;
        text-align: center;
    }
    .wiring_list ul li {
        width: 48%;
        margin-bottom: 20px;
    }
    .wiring_list ul li p {
        text-align:center;
        font-weight: bold;
    }
    .wiring_list_note {
        font-size: var(--textFont);
    }
    .wiring_list_note ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .wiring_list_note ul li {
        text-indent: -19px;
        padding-left: 19px;
        margin-bottom: 10px;
        width: 100%;
        text-align: left;
        font-size: 11px;
    }
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
    .wiring_list {
        margin: 0 auto 90px;
    }
    .wiring_list ul {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        margin: 0 auto 30px;
    }
    .wiring_list ul li {
    }
    .wiring_list ul li p {
        text-align:center;
        font-weight: bold;
    }
    .wiring_list_note {
        font-size: var(--textFont);
    }
    .wiring_list_note ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .wiring_list_note ul li {
        text-indent: -19px;
        padding-left: 19px;
        margin-bottom: 10px;
    }
}
@media only screen and (min-width: 1025px) {
    .wiring_list {
        margin: 0 auto 90px;
    }
    .wiring_list ul {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin: 0 auto 30px;
    }
    .wiring_list ul li {
        margin-right: 70px;
    }
    .wiring_list ul li p {
        text-align:center;
        font-weight: bold;
    }
    .wiring_list_note {
        font-size: var(--textFont);
    }
    .wiring_list_note ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .wiring_list_note ul li {
        text-indent: -19px;
        padding-left: 19px;
        margin-bottom: 10px;
    }
}


/* ------------------------------

fixtures_section

------------------------------ */
@media only screen and (max-width: 599px) {
    .fixtures_section {
        
    }
    .fixtures_anchor {
        margin: 10px auto 0;
    }
    .fixtures_anchor ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .fixtures_anchor ul li {
        background: var(--lightgray);
        width: 49%;
        margin-bottom: 7px;
    }
    .fixtures_anchor ul li a {
        display: block;
        padding: 10px 11px;
        font-size: 13px;
        font-weight: bold;
    }
    .fixtures_anchor ul li a span {
        color: #B00A0A;
    }
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
    .fixtures_section {
        
    }
    .fixtures_anchor {
        margin-top: 20px;
    }
    .fixtures_anchor ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .fixtures_anchor ul li {
        background: var(--lightgray);
        width: 49%;
        text-align: center;
        margin-bottom: 10px;
    }
    .fixtures_anchor ul li a {
        display: block;
        padding: 10px 20px;
        font-weight: bold;
    }
    .fixtures_anchor ul li a span {
        color: #B00A0A;
    }
}
@media only screen and (min-width: 1025px) {
    .fixtures_section {
        
    }
    .fixtures_anchor {
        margin-top: 20px;
    }
    .fixtures_anchor ul {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    .fixtures_anchor ul li {
        background: var(--lightgray);
        width: 24.5%;
        text-align: center;
    }
    .fixtures_anchor ul li a {
        display: inline-block;
        padding: 20px 30px;
        font-weight: bold;
    }
    .fixtures_anchor ul li a span {
        color: #B00A0A;
    }
}


/*
quick easy ceiling duct COMMON
-------------------------------------- */
@media only screen and (max-width: 599px) {
    #quick,
    #easy {
        padding: 55px 0 20px;
    }
	#ceiling, 
    #duct {
        padding: 55px 0 16px;
    }
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
    #quick,
    #easy,
    #ceiling, 
    #duct {
        padding: 50px 0 20px;
    }
}
@media only screen and (min-width: 1025px) {
    #quick,
    #easy,
    #ceiling, 
    #duct {
        padding: 70px 0 40px;
    }
}
    
/*
attachment
---------------------- */
@media only screen and (max-width: 599px) {
    .attachment {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
     .attachment li {
        width: 48%;
        margin: 0 0 25px;
    }
	.attachment li:first-child,
	.attachment li:nth-child(4) {
		 margin-left:0;
	}
    .attachment li p {
        text-indent: -24px;
        padding-left: 25px;
    }
     .attachment li p span {
        font-weight: bold;
        font-size: 20px;
    }
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
    .attachment {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
     .attachment li {
        width: 30.5%;
        margin: 0 0 40px;
    }
	.attachment li:first-child,
	.attachment li:nth-child(4) {
		 margin-left:0;
	}
	.attachment li:nth-child(2),
	.attachment li:nth-child(3) {
		 margin-left: 30px;
	}
    .attachment li p {
        margin-top: 4px;
        text-indent: -24px;
        padding-left: 25px;
    }
     .attachment li p span {
        font-weight: bold;
        font-size: 20px;
    }
}
@media only screen and (min-width: 1025px) {
    .attachment {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
     .attachment li {
        width: 30.5%;
        margin: 0 0 40px;
    }
	.attachment li:first-child,
	.attachment li:nth-child(4) {
		 margin-left:0;
	}
	.attachment li:nth-child(2),
	.attachment li:nth-child(3) {
		 margin-left:45px;
	}
    .attachment li p {
        margin-top: 4px;
        text-indent: -24px;
        padding-left: 25px;
    }
     .attachment li p span {
        font-weight: bold;
        font-size: 20px;
    }
}



/*
single1col
---------------------- */
@media only screen and (max-width: 599px) {
    .single1col {
        margin-bottom: 25px;
    }
	.single1col li {
        width: 48%;
 }
    .single1col li:first-child {
        width: 100%;
        margin-bottom: 15px;
    }
	.single1col li:nth-child(2) {
		 margin-left:0;
	}
	.single1col li:nth-child(4) {
		 /* margin-left:45px; */
	}
	.single1col .ceiling_ex {
		margin-left:0 !important;
		margin-bottom:0;
		width: 100%;
	}
	.single1col .ceiling_ex p {
		text-align:center;
		font-weight:bold;
		text-indent: 0;
		padding-left: 0;
		width: 95%;
	}
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
    .single1col {
        margin-bottom: 80px;
    }
	.single1col li {
        width: 30.5%;
	}
    .single1col li:first-child {
        width: 100%;
        margin-bottom: 15px;
    }
	.single1col li:nth-child(2) {
		 margin-left:0;
	}
	.single1col li:nth-child(4) {
		 margin-left: 30px;
	}
	.single1col .ceiling_ex {
		margin-left:0 !important;
        margin-bottom:0;
		width:50%;
	}
	.single1col .ceiling_ex p {
		text-align:center;
		font-weight:bold;
		text-indent: 0;
		padding-left: 0;
		width: 95%;
	}
}
@media only screen and (min-width: 1025px) {
    .single1col {
        margin-bottom: 80px;
    }
	.single1col li {
        width: 30.5%;
	}
    .single1col li:first-child {
        width: 100%;
        margin-bottom: 15px;
    }
	.single1col li:nth-child(2) {
		 margin-left:0;
	}
	.single1col li:nth-child(4) {
		 margin-left:45px;
	}
	.single1col .ceiling_ex {
		margin-left:0 !important;
        margin-bottom:0;
		width:50%;
	}
	.single1col .ceiling_ex p {
		text-align:center;
		font-weight:bold;
		text-indent: 0;
		padding-left: 0;
		width: 95%;
	}
}



/*
ex_border
---------------------- */
@media only screen and (max-width: 599px) {
    .ex_border {
        background: var(--lightgray);
        padding: 20px;
        margin-bottom: 24px;
    }
    .ex_border ul {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .ex_border ul li {
        width: 48%;
		margin-bottom:10px;
    }
     .ex_border ul li:last-child {
         width: 100%;
         margin:0 auto;
     }
     .ex_border ul li p {
         text-align:center;
         font-weight: bold;
     }
	.ex_border ul li:last-child p {
		color:var(--pointColor);
	}
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
    .ex_border {
        background: var(--lightgray);
        padding: 2rem;
        margin-bottom: 35px;
    }
    .ex_border ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .ex_border ul li {
        margin-right: 40px;
    }
     .ex_border ul li:last-child {
         width: 37%;
         margin-right: 0;
     }
     .ex_border ul li p {
         text-align:center;
         font-weight: bold;
     }
	.ex_border ul li:last-child p {
		color:var(--pointColor);
	}
}
@media only screen and (min-width: 1025px) {
    .ex_border {
        background: var(--lightgray);
        padding: 2rem;
        margin-bottom: 35px;
    }
    .ex_border ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .ex_border ul li {
        margin-right:40px;
    }
     .ex_border ul li:last-child {
         width: 28%;
     }
     .ex_border ul li p {
         text-align:center;
         font-weight: bold;
     }
	.ex_border ul li:last-child p {
		color:var(--pointColor);
	}
}



/*
type_title
---------------------- */
@media only screen and (max-width: 599px) {
	.type_title span:nth-child(2),
	.type_title span:nth-child(3) {
		font-weight:bold;
	}
    .type_title span:nth-of-type(4) {
        font-weight: bold;
        color:var(--pointColor);
    } 
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
    .type_title span:nth-child(2),
	.type_title span:nth-child(3) {
		font-weight:bold;
	}
    .type_title span:nth-of-type(4) {
        font-weight: bold;
        color:var(--pointColor);
    }
}
@media only screen and (min-width: 1025px) {
	.type_title span:nth-child(2),
	.type_title span:nth-child(3) {
		font-weight:bold;
	}
    .type_title span:nth-of-type(4) {
        font-weight: bold;
        color:var(--pointColor);
    }
}



/*
section_line
---------------------- */
@media only screen and (max-width: 599px) {
    .section_line {
        position:absolute;
    }
    .section_line::after {
        content: '';
        display: block;
        position: absolute;
        height: 3px;
        max-width: 599px;
        width: 92vw;
        left: 0;
        background: var(--lightgray);
    }
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
    .section_line {
        position:absolute;
    }
    .section_line::after {
        content: '';
        display: block;
        position: absolute;
        height: 3px;
        bottom: -3px;
        width: 92vw;
        left: 0;
        background: var(--lightgray);
    }
}
@media only screen and (min-width: 1025px) {
    .section_line {
        position:absolute;
    }
    .section_line::after {
        content: '';
        display: block;
        position: absolute;
        height: 3px;
        bottom: -3px;
        width: 1100px;
        left: 0;
        background: var(--lightgray);
    }
}


/* ------------------------------

other_fixtures

------------------------------ */
@media only screen and (max-width: 599px) {
    .other_fixtures {
        padding: 40px 0 0;
 }
	.other_fixtures h3 {
		margin-bottom:0 !important;
	}
	.other_fixtures p {
		margin-bottom:30px;
	}
    .other_fixtures ul {
		margin-bottom:14px;
		font-size: var(--textFont);
	}
    .other_fixtures ul li:first-of-type {
        font-size: 14px;
    }
	.other_fixtures ul li:nth-of-type(2) {
        text-indent: 0px;
        padding-left: 16px;
        font-size: 13px;
    }
	.other_fixtures ul li:nth-of-type(3) {
        text-indent: 0px;
        padding-left: 16px;
		font-size:12px;
		margin-top:5px;
    }
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
    .other_fixtures {
        padding: 70px 0 40px;
	}
	.other_fixtures h3 {
		margin-bottom:0 !important;
	}
	.other_fixtures p {
		margin-bottom:30px;
	}
    .other_fixtures ul {
		margin-bottom:30px;
		font-size: var(--textFont);
	}
    .other_fixtures ul li:first-of-type {
        font-size:16px;
    }
	.other_fixtures ul li:nth-of-type(2),
	.other_fixtures ul li:nth-of-type(3) {
        text-indent:16px;	
    }
}
@media only screen and (min-width: 1025px) {
    .other_fixtures {
        padding: 70px 0 40px;
	}
	.other_fixtures h3 {
		margin-bottom:0 !important;
	}
	.other_fixtures p {
		margin-bottom:30px;
	}
    .other_fixtures ul {
		margin-bottom:30px;
		font-size: var(--textFont);
	}
    .other_fixtures ul li:first-of-type {
        font-size:16px;
    }
	.other_fixtures ul li:nth-of-type(2),
	.other_fixtures ul li:nth-of-type(3) {
        text-indent:16px;	
    }
}


/* ------------------------------

btn_guide_wrap

------------------------------ */
@media only screen and (max-width: 599px) {
    .btn_guide_wrap {
		text-align: center;
		background: var(--lightgray);
		padding: 30px 20px;
		margin-top: 40px;
	}
    .btn_guide_wrap p {

    }
    .btn_guide {
		background: #fff;
		display: inline-block;
		margin-top:10px
	}
    .btn_guide a {
	font-size: 14px;
	padding: 8px 40px;
	display: block;
	}
	.btn_guide a::after {
		content: "\f105";
		font-family: FontAwesome;
		margin-right: 0.8em;
		margin-left: 0.8em;
	}
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
    .btn_guide_wrap {
		text-align: center;
		background: var(--lightgray);
		padding: 30px;
	}
    .btn_guide_wrap p {

    }
    .btn_guide {
		background: #fff;
		display: inline-block;
		padding: 8px 40px;
		margin-top:10px
	}
    .btn_guide a {
	}
	.btn_guide a::after {
		content: "\f105";
		font-family: FontAwesome;
		margin-right: 0.8em;
		margin-left: 0.8em;
	}
}
@media only screen and (min-width: 1025px) {
    .btn_guide_wrap {
		text-align: center;
		background: var(--lightgray);
		padding: 30px;
	}
    .btn_guide_wrap p {

    }
    .btn_guide {
		background: #fff;
		display: inline-block;
		margin-top:10px
	}
    .btn_guide a {
        padding: 8px 40px;
        display: block;
	}
	.btn_guide a::after {
		content: "\f105";
		font-family: FontAwesome;
		margin-right: 0.8em;
		margin-left: 0.8em;
	}
}