@charset "UTF-8";

@media screen and (max-width: 767px) {
	.subCopy, .effect .fl p { max-width: 325px; margin-left: auto !important; margin-right: auto !important; }
	.effect .fl p { line-height: 1.68; text-align: center; color: #777 !important; }
	.effect .fl { float: initial; }
	.subCopy { color: #777 !important; font-weight: normal !important; font-size: 16px !important; }
	.action {  padding: 10px 0 0; }
	.sp100 { margin: auto !important; width: 100% !important; }
	span.greenline .txtGreen { border-bottom: 1px solid #38c3bc; }
	.about .subCopy span.greenline { text-align: center; }
	.sp_left { text-align: left !important; }
}
.c, .effect, .mechanism {
  zoom: 1;
}
.c:before, .effect:before, .mechanism:before, .c:after, .effect:after, .mechanism:after {
  content: "";
  display: table;
}
.c:after, .effect:after, .mechanism:after {
  clear: both;
}

.bgCont, .about, .useExample, .effect, .mechanism, .summary, .case, .voice {
  padding: 3.75em 0;
  background: #fff;
}
.bgCont:nth-of-type(even), .about:nth-of-type(even), .useExample:nth-of-type(even), .effect:nth-of-type(even), .mechanism:nth-of-type(even), .summary:nth-of-type(even), .case:nth-of-type(even), .voice:nth-of-type(even) {
  background: #f9f9f9;
}

.fontFamily, .sortArea select {
  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", sans-serif;
}

/*------------------------------
	防カビ_PC
--------------------------------*/
.antifungal.wrapper {
  margin: 0;
  padding: 100px 0 0 0;
  background: #f9f9f9;
}
.antifungal img {
  width: auto;
}
.antifungal .mainContents {
  margin: 0 auto;
  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 16px;
  color: #777;
}
.antifungal .wrapCont {
  width: 1036px;
  margin: 0 auto;
}

.ttl01 {
  margin: 0 0 0.87em;
  font-size: 2.875em;
  letter-spacing: 0.1em;
  text-align: center;
  color: #444;
}

.ttl02 {
  margin: 3.75em 0 2.5em;
  text-align: center;
}
.ttl02 span {
  display: inline-block;
  padding: 0 1.5em 0.38em;
  border-bottom: 1px solid #08c3bc;
  line-height: 1;
  letter-spacing: 0.1em;
  font-size: 1.7em;
  font-weight: normal;
  color: #444;
}

.subCopy {
  margin: 0 0 2.5em;
  text-align: center;
  font-size: 1.5em;
  color: #000;
}
.subCopy .txtGreen {
  color: #38c3bc;
  font-weight: normal;
}

li {
  list-style: none;
}

/* 概要 */
.about img {
  display: block;
  margin: 0 auto;
}
.about .aboutDetail {
  margin: 3.75em 0 0;
  overflow: hidden;
}
.about .aboutDetail .narrow {
  width: auto !important;
  margin: 0 5.875em 0 0;
}
.about .aboutDetail .narrow:last-child {
  margin: 0;
}
.about .aboutDetail .narrow figure {
  box-sizing: border-box;
}
.about .aboutDetail .narrow figure img {
  box-sizing: border-box;
}
.about .aboutDetail .narrow figcaption {
  margin: 1em 0 0;
  text-align: center;
  font-size: 1.25em;
}
.about p {
  margin: 1.38em 0 1.75em;
  line-height: 1.68;
  font-size: 1.5em;
  color: #000;
}

/* 使用例 */
.useExample {
  padding-bottom: 1.25em;
}
.useExample .subCopy {
  font-size: 1.5em;
}
.useExample .useList {
  margin: 0 auto;
  text-align: center;
}
.useExample .useList li {
  display: inline-block;
  width: 20.8%;
  padding: 0 3.25em 2.5em 0;
}
.useExample .useList li:nth-of-type(4n) {
  padding: 0 0 2.5em 0;
}
.useExample .useList li h4 {
  margin: 1.14em 0 0.65em;
  font-weight: normal;
  font-size: 1.25em;
  color: #08c3bc;
}
.useExample .useList li p {
  font-size: 0.88em;
}

/* 効果 */
.effect .fl {
  width: 47.2%;
}
.effect .fl img {
  width: 100%;
  margin: 0 0 2em;
}
.effect .fl p {
  margin: 0 0 1.5em;
  font-size: 0.75em;
	line-height: 1.68;
}
.effect .fr {
  width: 46%;
  padding: 1em 0 0;
}
.effect .fr img {
  display: inline-block;
  width: 100%;
}

/* 仕組み */
.mechanism .boxt {
  width: 100%;
}
.mechanism .boxt img {
  width: 100%;
  margin: 0 0 3em;
}
.mechanism .boxb {
  width: 100%;
}
.mechanism .boxb img {
  width: 100%;
}

/* 効果が長期的に持続します！ */
.summary h3 {
  text-align: center;
}
.summary h3 img {
  width: 600px;
  height: auto;
}

.pointList li {
  display: inline-block;
  width: 20%;
}

/* 導入事例 */
.case {
  text-align: center;
}
.case div {
  margin: 4em 0 0;
}
.case div img {
  display: block;
  margin: 0 auto;
}

/* 料金表 */
.chargeList table {
  width: 100%;
  border: 1px solid #bbb;
  border-bottom: none;
  text-align: center;
}
.chargeList tr {
  float: left;
  display: block;
  width: 50%;
  border-bottom: 1px solid #bbb;
}
.chargeList th, .chargeList td {
  float: left;
  display: block;
  width: 50%;
  padding: 0.8em 0;
  border-left: 1px solid #bbb;
  box-sizing: border-box;
  line-height: 1;
  font-size: 1.5em;
}
.chargeList th:nth-of-type(even), .chargeList td:nth-of-type(even) {
  border-left: none;
}
.chargeList th {
  background: #08c3bc;
  font-weight: normal;
  color: #fff;
}
.chargeList td {
  background: #fff;
  font-weight: bold;
  color: #444;
}

/* セットメニュー */
.setMenu {
  color: #444;
}
.setMenu h4, .setMenu th, .setMenu td {
  font-size: 1.5em;
}
.setMenu h4 {
  display: inline-block;
  padding: 0 2em 0 0.583em;
  line-height: 1;
  letter-spacing: 0.075em;
  color: #444;
}
.setMenu .iconArea {
  display: inline-block;
}
.setMenu .iconArea .menuIcon {
  display: inline-block;
  margin-right: 0.875em;
}
.setMenu .iconArea .menuIcon:last-child {
  margin: 0;
}
.setMenu table {
  width: 100%;
  margin: 0.875em 0 2.5em;
  border: 1px solid #bbb;
  text-align: center;
}
.setMenu thead tr {
  float: left;
  display: block;
}
.setMenu thead th {
  display: block;
  width: 100%;
  padding: 0.875em 0;
  line-height: 1;
  color: #fff;
}
.setMenu tbody tr {
  float: left;
  display: block;
  border-bottom: 1px solid #bbb;
  line-height: 1;
}
.setMenu tbody th, .setMenu tbody td {
  float: left;
  display: inline-block;
  width: 50%;
  padding: 0.875em 0;
}
.setMenu tbody th {
  background: #eee;
  font-weight: normal;
}
.setMenu tbody td {
  background: #fff;
  font-weight: bold;
}
.setMenu tfoot tr td {
  display: block;
  width: 100%;
  padding: 0.875em 0;
  background: #fff;
  line-height: 1;
}
.setMenu tfoot strong {
  padding: 0 1.4em 0 0;
  background: url(../img/coating/photocatalyst/icon_arrowRightGray@2x.png) no-repeat right center;
  background-size: 10px 15px;
  text-decoration: line-through;
  font-size: inherit;
  font-weight: normal;
}
.setMenu tfoot span {
  padding: 0 0 0 0.4em;
  color: #e71717;
  font-size: inherit;
  font-weight: bold;
}
.setMenu tfoot span em {
  padding: 0 0 0 0.2em;
  vertical-align: middle;
  font-size: 1.333em;
}

.setMenu01 h4 {
  border-left: 6px solid #f89636;
}
.setMenu01 tr {
  width: 100%;
}

.setMenu02 h4 {
  border-left: 6px solid #448aca;
}
.setMenu02 tr {
  width: 50%;
}
.setMenu02 tbody tr:nth-of-type(odd) {
  box-sizing: border-box;
  border-right: 1px solid #bbb;
}

.setMenu03 h4 {
  border-left: 6px solid #32b16c;
}
.setMenu03 tr {
  width: 33.333%;
}
.setMenu03 tbody tr {
  box-sizing: border-box;
  border-right: 1px solid #bbb;
}
.setMenu03 tbody tr:nth-of-type(3n) {
  border-right: none;
  box-sizing: content-box;
}

tr.setAntifungal {
  background: #f89636;
}

tr.setFluorine {
  background: #448aca;
}

tr.setPhotocatalyst {
  background: #32b16c;
}

#fullSet h4 {
  border-left: 6px solid #e73939;
}
#fullSet .full01 {
  background: #f29999;
}
#fullSet .full02 {
  background: #ef8081;
}
#fullSet .full03 {
  background: #e85758;
}
#fullSet .full04 {
  background: #e73939;
}
#fullSet tr {
  width: 25%;
  border-right: 1px solid #bbb;
  border-bottom: none;
  box-sizing: border-box;
}
#fullSet tr:last-child {
  border-right: none;
}
#fullSet th {
  display: block;
  width: 100%;
  padding: 1.375em 0 1.25em;
  border-bottom: 1px solid #bbb;
  font-weight: normal;
  font-size: inherit;
}
#fullSet th strong {
  display: block;
  font-size: 1.75em;
  color: #fff;
}
#fullSet th span {
  display: block;
  color: #fff;
  padding: 1.445em 0 0;
  line-height: 1.5;
  font-size: 1.125em;
}
#fullSet th span em {
  display: block;
  font-weight: bold;
  font-size: inherit;
}
#fullSet td {
  display: block;
  width: 100%;
  font-size: 2em;
  color: #e71717;
}

/* お客様の声 */
.mainVoice {
  padding: 6em 0;
  background: url(../img/voice/bg_voice_an@2x.png) no-repeat left center;
  background-size: cover;
  overflow: hidden;
}
.mainVoice .comment {
  float: right;
  width: 51.159%;
}
.mainVoice .comment p {
  line-height: 1.5em;
  font-size: 1.125em;
  color: #444;
}
.mainVoice .tagList {
  margin: 1.5em 0 0;
}
.mainVoice .tagList .lIcontag {
  width: 20%;
  display: inline-block;
  vertical-align: middle;
  margin-right: 1em;
}
.mainVoice .tagList .lIcontag img {
  width: 100%;
  height: auto;
}
.mainVoice .tagList .rTxttag {
  width: 60%;
  display: inline-block;
  vertical-align: middle;
}
.mainVoice .tagList .rTxttag .tagPerson {
  margin: 0 0.5em 0 0;
}
.mainVoice .tagList li {
  padding: 0.938em 0.75em;
}
.mainVoice .tagList li.icon {
  padding: 0;
}

.sortArea {
  width: 77.221%;
  margin: 0 auto;
  padding: 1.875em 0;
}
.sortArea select {
  width: 32.5%;
  margin-right: 0.625em;
  padding: 1em 0 1em 1.25em;
  border: 1px solid #bbb;
  border-radius: 6px;
  background: url(../img/coating/photocatalyst/icon_arrowBottomGray@2x.png) no-repeat 94% center;
  background-size: 18px 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: middle;
  line-height: 1;
  color: #444;
}
.sortArea select option {
  color: #444;
}
.sortArea select:last-child {
  margin-right: 0;
}

.voiceList {
  width: 77.221%;
  margin: 0 auto;
}
.voiceList li {
  margin: 0 0 1.875em;
  padding: 1.5em;
  border: 1px solid #bbb;
  border-radius: 6px;
  overflow: hidden;
}
.voiceList li p {
  font-size: 0.875em;
  line-height: 1.25;
}
.voiceList .imgArea {
  float: left;
  width: 25%;
  margin: 0 1em 0 0;
}
.voiceList .imgArea img {
  width: 100%;
}

.tagList {
  margin: 1em auto 0;
}
.tagList li {
  display: inline-block;
  width: auto;
  margin: 0 0.75em 0 0;
  padding: 0.5em;
  border: none;
  border-radius: 6px;
  line-height: 1;
  color: #fff;
}
.tagList li.tagPerson {
  background: #bfbfbf;
}
.tagList li.tagFluorine {
  background: #73c6ed;
}
.tagList li.tagHouseCleaning {
  background: #f19191;
}
.tagList li.tagHouseKeeping {
  background: #59c794;
}
.tagList li.tagAntifungal {
  background: #448aca;
}
.tagList li.tagHour {
  background: #8c97cb;
}
.tagList li.tagRegularlyVisit {
  background: #f89636;
}
.tagList li.tagRenovation {
  background: #de5a5a;
}
.tagList li.tagFloorCoating {
  background: #08c3bc;
}

/* サポート体制 */
.support .wrapCont {
  width: 1026px;
}

.support {
  padding: 3.75em 0 6em;
}
.support img {
  display: block;
  margin: 0 auto;
}
.support .notes {
  margin: 5em 0 4em;
}
.support .notes p {
  line-height: 1.5;
  letter-spacing: 0.125em;
  font-size: 0.875em;
}
.support .notes p a {
  font-size: inherit;
  color: #2871eb;
}
.support .tel {
  margin: 0 0 1.25em;
}

.support .supportWrap {
  width: 960px;
	margin: 0 auto;
  padding: 1.5em 0 3.5em;
  box-sizing: border-box;
  background: url(../img/top/bg_support.png) no-repeat;
}
.support .supportWrap .supportInner {
  width: 960px;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: center;
}
.support .supportWrap .supportCont {
  width: 64%;
}
.support .supportWrap .supportCont p {
  width: 90%;
  margin: 0 auto;
  box-sizing: border-box;
}
.support .supportWrap .supportCont p img {
  width: 100%;
}
.support .supportWrap .supportCont ul {
  width: 100%;
  margin: 2.5em 0 1.8em;
  display: flex;
  justify-content: space-between;
}
.support .supportWrap .supportCont ul li:first-child {
  padding: 0;
}
.support .supportWrap .supportCont ul li img {
  width: 100%;
}
.support .supportWrap .supportCont ul li li a:hover {
  opacity: 0.7;
}
.support .supportWrap .supportCont .telContact img {
	box-sizing: border-box;
}


/*------------------------------
	防カビ_SP
--------------------------------*/
@media only screen and (max-width: 480px) {
  .antifungal img {
    width: 100%;
    height: auto;
  }
  .antifungal .wrapCont {
    width: auto;
  }

  .bgContSP, .about, .useExample, .effect, .mechanism, .summary, .case, .voice, .support {
    padding: 2em 1em 3em;
    background: #fff;
  }
  .bgContSP:nth-of-type(even), .about:nth-of-type(even), .useExample:nth-of-type(even), .effect:nth-of-type(even), .mechanism:nth-of-type(even), .summary:nth-of-type(even), .case:nth-of-type(even), .voice:nth-of-type(even), .support:nth-of-type(even) {
    background: #f9f9f9;
  }

  .ttl01 {
    font-size: 18px;
  }

  .ttl02 {
    margin: 2em 0;
  }
  .ttl02 span {
    padding: 0 0.5em 0.25em;
    font-size: 18px;
  }

  .subCopy {
    margin: 0 0 2.5em;
    text-align: center;
    font-size: 1em;
    color: #000;
  }

  /* 概要 */
  .about img {
    display: block;
    margin: 0 auto;
  }
  .about .aboutDetail {
    margin: 2em 0 0;
  }
  .about .aboutDetail .narrow {
    width: auto !important;
    margin: 0 auto;
  }
  .about p {
    font-size: 16px;
  }
	.about .aboutDetail .narrow figcaption {
		font-size: 16px;
	}

  /* 使用例 */
  .useExample .subCopy {
    font-size: 1em;
  }
  .useExample .useList li {
    display: block;
    width: auto;
    padding: 0 1em 3em;
  }
  .useExample .useList li:nth-of-type(4n) {
    padding: 0 1em 3em;
  }
  .useExample .useList li h4 {
    margin: 0.5em 0;
	  font-size: 12px;
  }

  /* 効果、仕組み */
  .effect .fl, .mechanism .fl {
    display: block;
    width: auto;
  }
  .effect .fl img, .mechanism .fl img {
    width: 100%;
    height: auto;
    margin: 0 0 1em;
  }
  .effect .fr, .mechanism .fr {
    width: auto;
    padding: 1em 0 0;
  }
  .effect .fr img, .mechanism .fr img {
    width: 100%;
  }

  /* 仕組み */
  /* 効果が長期的に持続します！ */
  .summary h3 img {
    width: 100%;
  }

  .pointList li {
    display: block;
    width: auto;
    margin: 0 2em 1em;
  }

  /* 導入事例 */
  .case div {
    margin: 2em 0 0;
  }

  /* 光触媒クロスコーティングの料金表 */
  .chargeList {
    margin: 0 0 4em;
  }
  .chargeList tr {
    float: left;
    display: block;
    width: 50%;
    border-right: 1px solid #bbb;
    box-sizing: border-box;
  }
  .chargeList tr:nth-of-type(even) {
    border-right: none;
  }
  .chargeList th, .chargeList td {
    display: block;
    width: 100%;
    padding: 0.857em 0.125em;
    border: none;
    vertical-align: middle;
    font-size: 1em;
  }

  /* セットメニュー */
  .setMenu h4, .setMenu th, .setMenu td {
    font-size: 16px;
  }
  .setMenu h4 {
    margin: 0 0 1em;
    padding: 0 0 0 0.583em;
  }
  .setMenu .iconArea {
    display: block;
  }
  .setMenu .iconArea .menuIcon {
    width: 20%;
  }
  .setMenu tbody th, .setMenu tbody td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .setMenu thead tr th {
    padding: 1em 0.25em;
    font-size: 1em;
    box-sizing: border-box;
    line-height: 1.5;
  }
  .setMenu thead tr:last-child th {
    border-right: none;
  }
  .setMenu tfoot strong {
    display: block;
    padding: 0 0 2.125em;
    background: url(../img/coating/photocatalyst/icon_arrowBottomGray@2x.png) no-repeat center bottom;
  }
  .setMenu tfoot span {
    display: block;
    margin: 0.8em 0 0;
  }

  #fullSet table {
    margin-bottom: 0;
  }
  #fullSet tr {
    display: block;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #bbb;
  }
  #fullSet th {
    padding: 0.75em 0.25em 0.5em;
    border-bottom: none;
    box-sizing: border-box;
  }
  #fullSet th strong {
    font-size: 18px;
  }
  #fullSet th span {
    padding: 0.25em 0 0;
    line-height: 1.5;
  }
  #fullSet td {
    font-size: 21px;
  }

  /* お客様の声 */
  .voice {
    padding: 2em 0 3em;
  }
  .voice .wrapCont {
    padding: 0 1em;
  }

  .mainVoice {
    padding: 10em 0 1.5em;
    background: url(../img/voice/bg_voice_an@2x.png) no-repeat left top;
    background-size: contain;
  }
  .mainVoice .comment {
    float: none;
    width: 100%;
  }
  .mainVoice .comment p {
    font-size: 14px;
  }
  .mainVoice .tagList {
    margin: 0.5em 0 0;
  }
  .mainVoice .tagList li {
    padding: 0.5em 0.715em;
  }
  .mainVoice .tagList li.icon {
    width: 20%;
    padding: 0;
  }
  .mainVoice .tagList .lIcontag {
    width: 100%;
    display: block;
    margin-right: 0;
  }
  .mainVoice .tagList .rTxttag {
    width: 100%;
    display: block;
  }
  .mainVoice .tagList .rTxttag .tagPerson {
    margin: 0 0.5em 0.5em 0;
  }

  .sortArea {
    width: 100%;
    padding: 0 0 0.5em;
  }
  .sortArea select {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-bottom: 0.5em;
  }

  .voiceList {
    width: 100%;
  }
  .voiceList li {
    margin: 0 0 1.5em;
    padding: 1em 1em 0.5em;
  }
  .voiceList li p {
    font-size: 0.875em;
    line-height: 1.5;
  }
  .voiceList .imgArea {
    float: none;
    display: block;
    width: 40%;
    margin: 0 auto 0.75em;
  }

  .tagList {
    margin: 0.75em auto 0;
    line-height: 1;
  }
  .tagList li {
    margin: 0 0.5em 0.5em 0;
    padding: 0.5em 0.715em;
    font-size: 0.875em;
    vertical-align: bottom;
  }

  /* サポート体制 */
  .support .wrapCont {
    width: auto;
  }

  .support .notes {
    margin: 1.5em 0 1em;
  }
    .comparison table thead th {
    font-size: 12px;
  }
  .effect .fl, .effectUv .fl, .effectMat .fl, .mechanism .fl {
    text-align: center;
  }
  .effect .fl img, .effectUv .fl img, .effectMat .fl img, .mechanism .fl img {
    width: 80%;
    margin: 0 auto 1em;
  }
  .contactFlow .detailCont li h4, .constructionFlow .detailCont li h4{
    font-size: 18px;
  }
  .w80 {
    width: 80% !important;
  }
  .w50{
    width: 50% !important;
  }
  .boxt {
    text-align: center;
  }
  .about .aboutDetail ul{
    display: flex;
  }
  .about .aboutDetail ul li{
    padding: 0 1%;
  }
  .useExample .useList ul{
    display: flex;
    flex-wrap: wrap;
  }
  .useExample .useList ul li{
    width: calc((100% / 3) - 10px);
    padding: 0 4px;
    margin-top: 10px;
  }
  .useExample .useList li:nth-of-type(4n){
    padding: 0 4px;
  }
  .summary .pointList ul{
    display: flex;
    flex-wrap: wrap;
  }
  .summary .pointList ul li{
    width: calc((100% / 3 ) - 6px);
    padding: 0;
    margin: 0 3px 1em;
  }
  .inner_over.w100vw{
    margin: 0 calc(50% - 50vw);
    width: 100vw;
  }
    .about .aboutDetail ul{
    display: flex;
    flex-wrap: wrap;
  }
  .about .aboutDetail .narrow{
    width: calc((100% / 3) - 10px) !important;
    padding: 0 4px !important;
    margin: 10px 0 0;
  }
  .about .aboutDetail .narrow:last-child {
    margin-top: 10px;
  }
	
	  .support .supportWrap {
    margin: 0;
    padding: 2em 0 1em;
    background: none;
	  width: 100%;
  }
  .support .supportWrap .supportInner {
    width: auto;
  }
  .support .supportWrap .supportCont {
    width: auto;
  }
  .support .supportWrap .supportCont ul {
    display: block;
    width: auto;
    margin: 2em 0 0;
    padding: 0;
    overflow: hidden;
  }
  .support .supportWrap .supportCont ul li {
    float: left;
    width: 33.333%;
    /* padding: 0 1em 2em !important; */
    box-sizing: border-box;
  }
  .support .supportWrap .supportCont .telContact {
    width: auto;
    margin-bottom: 1em;
  }
  .support .supportWrap .supportCont .telContact img {
    width: 100%;
    height: auto;
	  
  }
  .support .supportWrap .supportCont ul li img {
    width: 70%;
  }
	
	
	
}
.setMenu01, .setMenu02, .setMenu03, #fullSet { margin-bottom: 2.5em; }
.setMenu01 table, .setMenu02 table, .setMenu03 table, #fullSet table { margin-bottom: 0; }
.text-right { text-align: right; font-size: 12px; margin-top: 15px; color: #777; }
.caseList p, .useList p, .pointList p {  }
.line-counselling { margin-top: 1.25em; text-align: center; }


.case-img img{
	width: 100%;
}

.subCopy{
	line-height: 1.6em;
}