@charset "utf-8";
/* CSS Document */


/* page common */

#mainWrap .h1wrap { display: block; width: 100%; height: 108px; padding: 30px; background: url(../images/h1_bg.png) top center no-repeat;}
#mainWrap .h1inner { width: 100%; max-width: 1000px; margin: 0 auto;}
#mainWrap .h1inner h1 { height: 48px; padding-left: 20px; margin: 0 40px; border-left: 6px #0B5CA6 solid; color: #0B5CA6; font-size: 36px; line-height: 48px; text-align: left;}

.anchorWrap ul { display: table; width: 100%; margin-bottom: 40px;}
.anchorWrap ul li { display: table-cell; padding-right: 5px;}
.anchorWrap ul li:last-child { padding-right: 0;}
.anchorWrap ul li a { display: block; height: 42px; border: 1px #0B5CA6 solid; color: #0B5CA6; font-size: 22px; text-decoration: none !important; line-height: 42px;}
.anchorWrap ul li a:after { content: url(../images/arrow_blue-s.png);}

@media screen and (max-width: 1020px){
	.anchorWrap ul { padding: 0 10px;}
}
@media screen and (max-width: 767px){
	#mainWrap .h1wrap { height: auto; padding: 20px;}
	#mainWrap .h1inner h1 { height: auto; margin: 0 30px; font-size: 30px; line-height: 40px;}
	.anchorWrap ul { display: block; margin-bottom: 30px;}
	.anchorWrap ul li { display: block; width: 100%; padding-right: 0; text-align: left;}
	.anchorWrap ul li a { display: inline; height: 30px; border: none; font-size: 20px; line-height: 30px;}
}
@media screen and (max-width: 479px){
	#mainWrap .h1wrap { height: auto; padding: 10px;}
	#mainWrap .h1inner h1 { margin: 0; font-size: 24px; line-height: 30px;}
	.anchorWrap ul { margin-bottom: 20px;}
	.anchorWrap ul li a { font-size: 18px;}
	.tableScroll { width: auto; overflow-x:scroll; white-space: nowrap !important;}
	.tableScroll::-webkit-scrollbar{ height: 5px;}
	.tableScroll::-webkit-scrollbar-track{ background: #F1F1F1;}
	.tableScroll::-webkit-scrollbar-thumb { background: #BCBCBC;}
}


#mainWrap .innerPage { position: relative; width: 100%; max-width: 912px; margin: 40px auto; font-size: 18px;}
#mainWrap .innerPage section { margin-bottom: 36px; text-align: left;}

#mainWrap .innerPage .h2wrap { width: 100%; padding: 9px 18px; margin-bottom: 24px; background: #0C5BA6;}
#mainWrap .innerPage .h2wrap h2 { width: 100%; padding: 0 18px; border-left: 4px #fff solid; color: #fff; font-size: 28px; line-height: 30px; text-align: left;}

#mainWrap .innerPage * + p { margin-top: 12px;}
#mainWrap .innerPage a { color: #0C5BA6; text-decoration: underline;}
#mainWrap .innerPage .indent24 { margin-left: 24px;}
#mainWrap .innerPage .max888 { width: 100%; max-width: 888px; margin: 0 auto;}
#mainWrap .innerPage .max864 { width: 100%; max-width: 864px; margin: 0 auto;}
#mainWrap .innerPage .max800 { width: 100%; max-width: 800px; margin: 0 auto;}

#mainWrap .innerPage .alignleft { margin: 0 18px 6px 0; float: left;}
#mainWrap .innerPage .alignright { margin: 0 0 6px 18px; float: right;}
#mainWrap .innerPage .aligncenter { display: block; margin: 0 auto 6px auto;}
#mainWrap .innerPage .alignnone { display: inline;}

@media screen and (max-width: 932px){
	#mainWrap .innerPage { margin: 30px auto; padding: 0 10px;}
}
@media screen and (max-width: 767px){
	#mainWrap .innerPage { margin: 20px auto;}
	#mainWrap .innerPage .h2wrap { padding: 8px 14px;}
	#mainWrap .innerPage .h2wrap h2 { padding: 0 14px; font-size: 24px;}
	#mainWrap .innerPage .indent24 { margin-left: 12px;}
	#mainWrap .innerPage .alignleft, #mainWrap .innerPage .alignright, #mainWrap .innerPage .aligncenter, #mainWrap .innerPage .alignnone { max-width: 50%;}
}
@media screen and (max-width: 479px){
	#mainWrap .innerPage { margin: 10px auto;}
	#mainWrap .innerPage .h2wrap { padding: 6px 10px;}
	#mainWrap .innerPage .h2wrap h2 { padding: 0 10px; font-size: 20px;}
	#mainWrap .innerPage .indent24 { margin-left: 0;}
}


/* イワタのこだわり */ 

.commitCatch { width: 100%; max-width: 540px; height: 40px; margin: 0 auto 40px auto; background: #0B5CA6;  color: #fff; font-size: 32px; line-height: 40px;}
.commitLead { width: 100%; max-width: 832px; margin: 0 auto 40px auto;}
.commitLead p { font-size: 20px;}

@media screen and (max-width: 912px){
	.commitLead { padding: 0 10px; line-height: 30px; text-align: left;}
	.commitLead br { display: none;}
}
@media screen and (max-width: 767px){
	.commitCatch { margin: 0 auto 30px auto; font-size: 24px;}
}
@media screen and (max-width: 479px){
	.commitCatch { margin: 0 auto 20px auto; font-size: 20px;}
}

.h2commitBox { width: 100%; height: 52px;}
.h2commitBox h2 { color: #fff; font-size: 28px; text-align: center; line-height: 52px; }
.h2commitBox.drain { background: #FF4E4E;}
.h2commitBox.straner { background: #50C48C;}

.h3commitBox { width: 100%; margin-bottom: 24px;}
.h3commitBox .imgBox { float: left;}
.h3commitBox .textBox { margin-left: 132px;}
.h3commitBox .textBox h3 { font-size: 30px; font-weight: bold; line-height: 36px;}

.h4commitBox { position: relative; width: 100%; margin-bottom: 24px;}
.h4commitBox.drain { border-bottom: 2px #FF4E4E solid;
background-image:-moz-linear-gradient(50% 0% -90deg,rgb(255,255,255) 0%,rgb(255,235,235) 100%); 
background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0, rgb(255,255,255)),color-stop(1, rgb(255,235,235)));
background-image:-webkit-linear-gradient(-90deg,rgb(255,255,255) 0%,rgb(255,235,235) 100%);
background-image:-ms-linear-gradient(-90deg,rgb(255,255,255) 0%,rgb(255,235,235) 100%);
background-image:linear-gradient(180deg,rgb(255,255,255) 0%,rgb(255,235,235) 100%);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff,endColorstr=#ffffebeb,GradientType=0)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff,endColorstr=#ffffebeb,GradientType=0);}
.h4commitBox.drain:after { position: absolute; right: 4px; bottom: 0px; content: url(../images/commit/drain-arrow.png);}
.h4commitBox.straner { border-bottom: 2px #50C48C solid;
background-image:-moz-linear-gradient(50% 0% -90deg,rgb(255,255,255) 0%,rgb(237,255,247) 100%); 
background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0, rgb(255,255,255)),color-stop(1, rgb(237,255,247)));
background-image:-webkit-linear-gradient(-90deg,rgb(255,255,255) 0%,rgb(237,255,247) 100%);
background-image:-ms-linear-gradient(-90deg,rgb(255,255,255) 0%,rgb(237,255,247) 100%);
background-image:linear-gradient(180deg,rgb(255,255,255) 0%,rgb(237,255,247) 100%);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff,endColorstr=#ffedfff7,GradientType=0)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff,endColorstr=#ffedfff7,GradientType=0);}

.h4commitBox h4 { padding: 0 12px; line-height: 48px; font-size: 36px; font-weight: bold;}
.h4commitBox.drain h4 { color: #FF4E4E;}
.h4commitBox.straner h4 { color: #50C48C;}
.h4commitBox h4.s { padding: 4px 12px; line-height: 32px; font-size: 28px;}

.commitLeadBox.straner { padding: 24px 48px; background: #C8EEDC; border-left: 1px #50C48C solid; border-right: 1px #50C48C solid;}

.commitWrap { width: 100%; padding: 24px;}
.commitWrap.drain { border: 1px #FF4E4E solid; border-top: none;}
.commitWrap.straner { border: 1px #50C48C solid; border-top: none;}

.commitImageList { width: 48%; margin: 12px 1%; float: left; text-align: center;}
.commitImageList figure figcaption{ padding: 6px 24px; font-size: 16px; text-align: left;}
.commitImageList figure h5.straner { width: 100%; background: #50C48C; color: #fff; text-align: center;}

.commitStranerWrapL { width: 568px; float: left;}
.commitStranerWrapR { margin-left: 594px;}
.commitStranerWrapR figure figcaption{ padding: 6px 0; font-size: 14px; text-align: left;}

.hrBar { margin-bottom: 24px; border-bottom: 1px #999 solid;}

.commitBannerList { width: 49.5%; float: left;}
.commitBannerList:nth-child(odd) { margin-right: 1%;}

@media screen and (max-width: 767px){
	.h2commitBox { height: 44px;}
	.h2commitBox h2 { font-size: 24px;line-height: 44px; }
	.h3commitBox {  margin-bottom: 18px;}
	.h3commitBox .imgBox { width: 108px; float: left;}
	.h3commitBox .textBox { margin-left: 114px;}
	.h3commitBox .textBox h3 { font-size: 26px; line-height: 30px;}
	.h4commitBox { margin-bottom: 20px;}
	.h4commitBox h4 { padding: 0 8px; line-height: 40px; font-size: 30px;}
	.h4commitBox h4.s { padding: 3px 8px; line-height: 28px; font-size: 24px;}
	.commitLeadBox.straner { padding: 18px 40px;}
	.commitWrap { padding: 18px;}
	.commitImageList { margin: 10px 1%;}
	.commitImageList figure figcaption{ padding: 5px 20px; font-size: 15px;}
}
@media screen and (max-width: 732px){
	.commitStranerWrapL { width: 78%;}
	.commitStranerWrapR { margin-left: 80%;}
	.commitBannerList, .commitBannerList:nth-child(odd) { width: 100%; margin: 12px auto; float: none; text-align: center;}
}
@media screen and (max-width: 479px){
	.h2commitBox { height: 40px;}
	.h2commitBox h2 { font-size: 20px;line-height: 40px; }
	.h3commitBox {  margin-bottom: 16px;}
	.h3commitBox .imgBox { width: 80px; float: left;}
	.h3commitBox .textBox { margin-left: 90px;}
	.h3commitBox .textBox h3 { font-size: 22px; line-height: 26px;}
	.h4commitBox { margin-bottom: 10px;}
	.h4commitBox h4 { padding: 0 6px; line-height: 30px; font-size: 24px;}
	.h4commitBox h4.s { padding: 2px 6px; line-height: 24px; font-size: 20px;}
	.commitLeadBox.straner { padding: 12px 20px;}
	.commitWrap { padding: 12px;}
	.commitStranerWrapL, .commitStranerWrapR { width: 100%; margin: 12px auto; float: none;}
	.commitStranerWrapR figure, .commitStranerWrapR figure figcaption { text-align: center;}
	.commitStranerWrapR figure img { width: 50%;}
	
	.commitImageList { margin: 5px 1%;}
	.commitImageList figure figcaption{ padding: 3px 10px; font-size: 14px;}
}


/* ドレン製品案内 */

.h2products { width: 100%; height: 52px; margin-bottom: 24px; border-bottom: 1px #333 solid;}
.h2products h2 { color: #333; font-size: 28px; text-align: left; line-height: 52px; }

.productsWrap { padding-top: 24px;}
.productsBox { width: 300px; margin-right: 6px; margin-bottom: 30px; background: #fff; border: 1px #6F9FCB solid; float: left;}
.productsBox:last-child { margin-right: 0;}
.productsBox figure { width: 100%; text-align: center;}
.productsBox figure .imgBox { height: 90px;}
.productsBox figure .imgBox img { margin-top: -38px;}
.productsBox figure figcaption dl dt { padding: 0px; color: #0B5BA7; font-size: 32px; line-height: 44px;}
.productsBox figure figcaption dl dd p.sub { color: #0B5BA7; font-size: 16px; line-height: 22px;}
.productsBox figure figcaption dl dd p.text { height: 90px; margin: 10px 0px; font-size: 14px !important; line-height: 20px; overflow: hidden;}
.productsBox figure figcaption dl dd a.more { display: block; padding: 2px; margin: 10px; background: #0B5BA7; color: #fff !important; text-decoration: none !important;}
.productsBox figure figcaption dl dd a.more:after { content: url(../images/arrow_white.png);}

@media screen and (max-width: 1020px){
	.productsBox { width: 32.2%; margin-right: 1.7%;}
	.productsBox figure figcaption dl dt { font-size: 34px; line-height: 40px;}
	.productsBox figure figcaption dl dd p.text { font-size: 15px; line-height: 20px;}
}
@media screen and (max-width: 959px){
	.productsBox figure figcaption dl dt { font-size: 26px; line-height: 32px;}
	.productsBox figure figcaption dl dd p.sub { font-size: 14px; line-height: 18px;}
	.productsBox figure figcaption dl dd p.text { font-size: 12px; line-height: 16px;}
}
@media screen and (max-width: 767px){
	.h2wrap { margin: 0 auto 20px auto;}
	.productsBox, .productsBox:last-child { width: 100%; padding: 10px; margin-right: 0%; margin-bottom: 12px;}
	.productsBox figure { display: table;}
	.productsBox figure .imgBox { display: table-cell; width: 40%; height: auto; margin-top: 0; vertical-align: middle;}
	.productsBox figure .imgBox img { margin-top: 0;}
	.productsBox figure figcaption { display: table-cell; width: 60%; vertical-align: middle;}
	.productsBox figure figcaption dl dd p.text { height: auto;}
}
@media screen and (max-width: 479px){
	.productsBox, .productsBox:last-child { padding: 5px;}
	.productsBox figure { display: block;}
	.productsBox figure .imgBox { display: block; width: 50%; margin: 0 auto;}
	.productsBox figure figcaption { display: block; width: 100%;}
}

.bannerWrap { display: table; table-layout: fixed; width: 100%; margin-bottom: 12px;}
.bannerBox { display: table-cell; width: 50%;}
.bannerBox:nth-child(odd) { padding-right: 6px;}
.bannerBox:nth-child(even) { padding-left: 6px;}
.bannerBox a { display: block; width: 100%; height: 62px; padding: 0 50px; background: #FFE114; border: 1px #6F9FCB solid; color: #0B5BA7; font-size: 24px; line-height: 62px; text-align: center; text-decoration: none !important;}
.bannerBox a:hover { text-decoration: none;}
.bannerBox a span { position: relative;}
.bannerBox a span.catalogue:before { position: absolute; left:-42px; top:50%; margin-top: -24px; content: url(../images/products/icon_catalogue.png);}
.bannerBox a span.price:before { position: absolute; left:-42px; top:50%; margin-top: -24px; content: url(../images/products/icon_price.png);}
.bannerBox a span:after { content: url(../images/arrow_blue.png);}
.bannerBoxC a { display: block; width: 100%; height: 62px; background: #FFD581; color: #333 !important; font-size: 24px; text-decoration: none !important; line-height: 62px; text-align: center;}
.bannerBoxC a:after { content: url(../images/arrow_black.png);}

@media screen and (max-width: 959px){
	.bannerBox a { padding: 0 0 0 50px;}
}
@media screen and (max-width: 767px){
	.bannerWrap, .bannerBox, .bannerBox:nth-child(odd), .bannerBox:nth-child(even) { display: block; width: 100%; padding: 0;}
	.bannerBox:nth-child(odd) { margin-bottom: 12px;}
	.bannerBox a, .bannerBoxC a  { height: 50px; line-height: 50px;}
	.bannerBox a span.catalogue:before, .bannerBox a span.price:before { margin-top: -20px;}
}
@media screen and (max-width: 479px){
	.bannerBox a { font-size: 20px;}
	.bannerBoxC a { font-size: 16px;}
	
}


/* ドレン製品案内 - 一覧ページ */

.productsList li { width: 296px; margin-right: 12px; margin-bottom: 30px; padding: 10px; background: #fff; border: 1px #6F9FCB solid; float: left;}
.productsList li:nth-child(3n) { margin-right: 0;}
.productsList li figure { width: 100%; text-align: center;}
.productsList li figure figcaption dl dt { padding: 10px 0; color: #0B5BA7; font-size: 26px; line-height: 32px;}
.productsList li figure figcaption dl dt span { font-size: 22px; line-height: 30px;}
.productsList li figure figcaption dl dd p { height: 70px; font-size: 18px; line-height: 22px; overflow: hidden;}
.productsList li figure figcaption dl dd p span { display: inline-block; height: 22px; padding: 0 4px; background: #FFEA4F; color: #0B5BA7; font-size: 16px; line-height: 22px;}
.productsList li figure figcaption dl dd a.more { display: block; padding: 2px; margin: 10px; background: #0B5BA7; color: #fff !important; text-decoration: none !important;}
.productsList li figure figcaption dl dd a.more:after { content: url(../images/arrow_white.png);}

@media screen and (max-width: 959px){
	.productsList li { width: 32.2%; margin-right: 1.7%;}
	.productsList li figure figcaption dl dt { font-size: 20px; line-height: 24px;}
	.productsList li figure figcaption dl dt span { font-size: 18px; line-height: 22px;}
	.productsList li figure figcaption dl dd p { font-size: 16px; line-height: 20px;}
	.productsList li figure figcaption dl dd p span { font-size: 14px; line-height: 18px;}
}
@media screen and (max-width: 767px){
	.productsList li, .productsList li:nth-child(3n) { width: 100%; margin-right: 0; margin-bottom: 12px;}
	.productsList li figure { display: table;}
	.productsList li figure .imgBox { display: table-cell; width: 35%; vertical-align: middle;}
	.productsList li figure figcaption { display: table-cell; vertical-align: middle;}
	.productsList li figure figcaption dl dt { padding: 0;}
	.productsList li figure figcaption dl dd p { height: auto;}
}
@media screen and (max-width: 479px){
	.productsList li figure, .productsList li figure .imgBox, .productsList li figure figcaption { display: block; width: 100%;}
	.productsList li figure .imgBox { width: 50%; margin: 0 auto;}
}


/* ドレン製品案内 - 個別ページ */

.productsLead { position: relative; width: 900px; height: 228px; margin: 0 auto 48px auto; background: url(../images/products/lead_bg.jpg) no-repeat; background-size: contain;}
.productsLead .title { position: absolute; top :138px; left:20px; color: #fff; font-size: 28px;}
.productsLead .catch { position: absolute; top :190px; left:20px;}
.productsLead .name { position: absolute; top :190px; right:20px; width: 280px; text-align: center;}
.productsLead .img { position: absolute; top :-10px; right:20px; width: 280px; text-align: center;}

@media screen and (max-width: 912px){
	.productsLead { width: 748px; height: 190px;}
	.productsLead .title { top:114px;}
	.productsLead .catch { top:156px;}
	.productsLead .name { width: 232px; top:156px;}
	.productsLead .img { width: 232px;}
}
@media screen and (max-width: 767px){
	.productsLead { position: static; width: 100%; height: 120px; background: #FFF9AA; border: 1px #0B5CA6 solid;}
	.productsLead .title { position: static; width: 100%; height: 46px; padding-left: 12px; font-size: 24px; line-height: 46px;
background-image:-moz-linear-gradient(0% 50% 0deg,rgb(11,92,166) 0%,rgb(255,249,170) 100%); 
background-image:-webkit-gradient(linear,0% 50%,100% 50%,color-stop(0, rgb(11,92,166)),color-stop(1, rgb(255,249,170)));
background-image:-webkit-linear-gradient(0deg,rgb(11,92,166) 0%,rgb(255,249,170) 100%);
background-image:-ms-linear-gradient(0deg,rgb(11,92,166) 0%,rgb(255,249,170) 100%);
background-image:linear-gradient(90deg,rgb(11,92,166) 0%,rgb(255,249,170) 100%);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff0b5ca6,endColorstr=#fffff9aa,GradientType=1)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff0b5ca6,endColorstr=#fffff9aa,GradientType=1);}
	.productsLead .catch { position: static; width: 100%; padding: 12px;}
	.productsLead .name { display: none;}
	.productsLead .img { position: static; width: auto; padding-top: 10px; float: right;}
	.productsLead .img img { width: auto; height: 110px;}
}
@media screen and (max-width: 479px){
	.productsLead .title { font-size: 20px;}
	.productsLead .catch { font-size: 16px;}
	.productsLead .img img { height: 70px;}
}

.productsHalfWrap { display: table; table-layout: fixed; width: 100%;}
.productsHalfL { display: table-cell; vertical-align: top; padding-bottom: 80px;}

.productsSlider { width: 394px; height: 262px; margin: 0 auto; }
.productsSlider img { border: 1px #ccc solid;}
ul.slick-dots { bottom: -100px;}
ul.slick-dots li { width: 127px; height: auto; margin: 0 6px 0 0 ;}
ul.slick-dots li:last-child { margin-right: 0;}

.productsHalfR { display: table-cell; vertical-align: middle; padding: 0 20px; text-align: center;}
.productsHalfR p { margin-bottom: 24px;}	
.productsHalfR .orderBtn { display: block; width: 100%; max-width: 300px; height: 80px; margin: 0 auto; background: #FF1A1A; color: #fff !important; font-size: 24px; text-decoration: none !important; line-height: 80px; text-align: center;}

.productsHalfR.left { text-align: left;}
.productsHalfR .sizeTable { width: 100%;}
.productsHalfR .sizeTable caption{ width: 100%; text-align: center;}
.productsHalfR .sizeTable th { padding: 6px 12px; border: 1px #333 solid; background: #FFD696;}
.productsHalfR .sizeTable td { padding: 6px 12px; border: 1px #333 solid; text-align: center;}

@media screen and (max-width: 912px){
	.productsSlider { width: 86%; height: auto;}
	ul.slick-dots li { width: 32%; margin-right: 2%;}
	ul.slick-dots li:last-child { margin-right: 0%;}
	ul.slick-dots { bottom: -90px;}
}
@media screen and (max-width: 767px){
	.productsHalfR { text-align: left;}
	.productsHalfR .orderBtn { height: 60px; line-height: 60px;}
}
@media screen and (max-width: 479px){
	.productsHalfWrap,.productsHalfL,.productsHalfR { display: block; width: 100%;}
}

.productsPriceTable { width: 100%;}
.productsPriceTable caption { width: 100%; padding: 2px 12px; margin-bottom: 6px; background: #0B5CA6; color: #fff; font-size: 20px; line-height: 40px;}
.productsPriceTable th, .productsPriceTable td { padding: 6px 12px; border: 1px #333 solid; text-align: center;}

@media screen and (max-width: 912px){
	.productsPriceTable caption { font-size: 18px;}
	.productsPriceTable th, .productsPriceTable td { font-size: 16px; }
}
@media screen and (max-width: 767px){
	.productsPriceTable caption { font-size: 16px;}
	.productsPriceTable th, .productsPriceTable td { font-size: 14px; }
}
@media screen and (max-width: 479px){
	.productsPriceTable tr { display: table-cell;}
	.productsPriceTable th, .productsPriceTable td { display: block; width: 100%;}
}

.productsBanners { margin-bottom: 12px;}
.productsBannerL { width: 49%; float: left;}
.productsBannerR { margin-left: 51%;}
.productsBanners a { display: block; width: 100%; height: 62px; line-height: 62px; color: #fff !important; font-size: 24px; text-align: center; text-decoration: none !important;}
.productsBanners a:after { content: url(../images/arrow_white.png);}
.productsBanners a.flow { background: #4B9AE7;}
.productsBanners a.manifesto { background: #FF8B4E;}
.productsBanners a.matome { position: relative; height: 78px; padding-left: 256px; line-height: 78px; background: #65CF55;}
.productsBanners a.matome:before { position: absolute; left:14%; content:url(../images/products/icon_matome.png);}

@media screen and (max-width: 912px){
	.productsBanners a.matome:before { left:12px;}
}
@media screen and (max-width: 767px){
	.productsBanners a { font-size: 20px;}
	.productsBanners a.matome { padding-left: 0; height: 62px; line-height: 62px;}
	.productsBanners a.matome:before { display: none;}
}
@media screen and (max-width: 479px){
	.productsBannerL { width: 100%; float: none; margin-bottom: 12px;}
	.productsBannerR { margin-left: 0;}
	.productsBanners a, .productsBanners a.matome { height: 40px; line-height: 40px;}
}

.productsKodawariBox { width: 100%; max-width: 900px; height: 380px; margin: 0 auto; padding: 24px; background: url(../images/products/kodawari_bg.png) left;}
.productsKodawariBox dl dt { width: 100%; max-width: 362px; height: 48px; margin: 0 auto 24px auto; border: 1px #0B5CA6 solid; background: #fff; color: #0B5CA6; font-size: 28px; line-height: 48px; text-align: center;}
.productsKodawariBox dl dd .textBox { padding-left: 200px;}
.productsKodawariBox dl dd .textBox p { margin-bottom: 24px; color: #0B5CA6; font-size: 18px; line-height: 36px; text-shadow:1px 1px 3px #fff;}
.productsKodawariBox dl dd a { display: block; width: 100%; max-width: 300px; height: 62px; margin: 0 auto; background: #0B5CA6; line-height: 62px; color: #fff !important; font-size: 24px; text-align: center; text-decoration: none !important;}
.productsKodawariBox dl dd a:after { content: url(../images/arrow_white.png);}

@media screen and (max-width: 912px){
	.productsBanners a.matome:before { left:12px;}
	.productsKodawariBox dl dd .textBox { padding-left: 0; margin: 0 auto 12px auto;}
	.productsKodawariBox dl dd .textBox p { margin-bottom: 12px; text-align: center; line-height: 32px;}
}
@media screen and (max-width: 767px){
	.productsKodawariBox dl dt { height: 40px; line-height: 40px; font-size: 24px;}
	.productsKodawariBox dl dd .textBox p { text-align: left; line-height: 24px;}
	.productsKodawariBox dl dd a { height: 48px; line-height: 48px; font-size: 20px;}
}
@media screen and (max-width: 480px){
	.productsKodawariBox dl dd a { height: 40px; line-height: 40px;}
}


/* お客様の声 */

.innerPage.interview { width: 856px;}

.interviewBannerBox { width: 100%; margin: 0 auto; border: 1px #0B5CA6 solid;}
.interviewBannerBox h2 { width: 100%; height: 52px; background: #0B5CA6; color: #fff; font-size: 28px; text-align: center; line-height: 52px; }
.interviewBannerBox .imgWrap { position: relative; width: 100%; height: 173px; background: url(../images/voice/interview_banner.jpg) no-repeat; background-size: contain;}
.interviewBannerBox .imgWrap .imgBox { display: none;}
.interviewBannerBox .imgWrap a { position:absolute; top:129px; left:447px; display: block; width: 432px; height: 32px; border: 1px #0B5CA6 solid; color: #0B5CA6; font-size: 18px; text-decoration: none !important; line-height: 32px; text-align: center;}
.interviewBannerBox .imgWrap a:after { content: url(../images/arrow_blue-s.png);}

.h2voiceTopWrap { position: relative; width: 100%; height: 114px; margin-bottom: 48px; padding: 24px; background: #FFE114 url(../images/voice/interview_banner-bg.png) bottom left repeat-x;}
.h2voiceTopWrap:before { position: absolute; top:25px; left:9%; width: 92px; height: 64px; background: url(../images/voice/interview_banner-icon1.png) no-repeat; background-size: contain; content: '';}
.h2voiceTopWrap:after { position: absolute; top:22px; right:8%; width: 116px; height: 71px; background: url(../images/voice/interview_banner-icon2.png) no-repeat; background-size: contain; content: '';}
.h2voiceTopWrap h2 { color: #0B5CA6; font-size: 26px; line-height: 32px; text-align: center;}

@media screen and (max-width: 959px){
	.interviewBannerBox { width: 748px;}
	.interviewBannerBox .imgWrap { height: 145px;}
	.interviewBannerBox .imgWrap a { top:106px; left:369px; width: 360px; }
	.h2voiceTopWrap { height: 102px; padding: 20px;}
	.h2voiceTopWrap:before { top:21px; left: 4%; width: 83px; height: 58px;}
	.h2voiceTopWrap:after { top:20px; right: 3%; width: 104px; height: 64px;}
	.h2voiceTopWrap h2 { font-size: 22px; line-height: 28px;}
}
@media screen and (max-width: 767px){
	.interviewBannerBox { width: 100%; height: auto; padding-bottom: 12px;}
	.interviewBannerBox .imgWrap { position: static; width: 100%; height: auto; background: none; text-align: center;}
	.interviewBannerBox .imgWrap .imgBox { display:block; margin: 0 auto;}
	.interviewBannerBox .imgWrap a { position: static; margin: 0 auto;}	
	.h2voiceTopWrap { height: 80px; padding: 10px;}
	.h2voiceTopWrap:before { top:10px; left: 4%; width: 60px; height: 41px;}
	.h2voiceTopWrap:after { top:10px; right: 3%; width: 60px; height: 38px;}
	.h2voiceTopWrap h2 { font-size: 15px; line-height: 24px;}
}
@media screen and (max-width: 479px){
	.interviewBannerBox h2 { height: 40px; font-size: 20px !important; line-height: 40px;}
	.interviewBannerBox .imgWrap a { width: 90%; font-size: 15px;}
	.h2voiceTopWrap { height:auto;  background: #FFE114;}
	.h2voiceTopWrap:before, .h2voiceTopWrap:after { display: none;}
}

ul.voiceList li { width: 100%; margin-bottom: 48px;}
ul.voiceList li figure .imgBox { width: 292px; float: left;}
ul.voiceList li figure .imgBox a { position: relative; display: block; border: 2px #0B5CA6 solid ;}
ul.voiceList li figure .imgBox a:after { position: absolute; right:0px; bottom:0px; width: 44px; height: 44px; content: url(../images/voice/loupe.png);}
ul.voiceList li figure figcaption { margin-left: 316px;}
ul.voiceList li figure figcaption dl dt { padding: 12px 24px; background: #0B5CA6; color: #fff;}
ul.voiceList li figure figcaption dl dd { padding: 12px; }

@media screen and (max-width: 959px){
	ul.voiceList li figure .imgBox { width: 34%; }
	ul.voiceList li figure figcaption { margin-left: 37%;}
}
@media screen and (max-width: 479px){
	ul.voiceList li figure .imgBox { width: 75%; margin: 0 auto 12px auto; float: none;}
	ul.voiceList li figure figcaption { margin-left: 0;}
	ul.voiceList li figure figcaption dl dt { padding: 6px 12px;}
	ul.voiceList li figure figcaption dl dd { padding: 6px 0;}
}


/* お客様スペシャルインタビュー */

figure.intervierMainimage { width: 100%; margin-bottom: 36px; text-align: left;}
figure.intervierMainimage figcaption dl dt { width: 100%; height: 48px; padding: 0 24px; line-height: 48px; background: #0B5CA6; color: #fff; font-size: 20px;}
figure.intervierMainimage figcaption dl dd { width: 100%; padding: 12px 0; text-align: left;}
figure.intervierMainimage figcaption dl dd .captionMB { display: none;}

dl.interviewDL dt { position: relative; padding-left: 24px; margin-bottom: 12px; color: #0B5CA6;}
dl.interviewDL dt:before { position: absolute; width: 24px; left:0px;  content: '--';}
dl.interviewDL dd { margin-bottom: 12px;}
dl.interviewDL .m408 { margin-left: 408px;}
dl.interviewDL .m236 { margin-left: 236px;}

dl.interviewDL figure.alignL { float: left;}
dl.interviewDL figure.alignR { margin: 0 0 6px 12px; float: right;}
dl.interviewDL figure.w396 { width: 396px;}
dl.interviewDL figure.w224 { width: 224px;}
dl.interviewDL figure figcaption { padding: 6px; color: #666; font-size: 14px; line-height: 120%; text-align: left;}

@media screen and (max-width: 767px){
	dl.interviewDL figure.alignL, dl.interviewDL figure.alignR { width: 80%; margin: 0 10% 12px 10%; float: none; text-align: center;}
	dl.interviewDL .m408, dl.interviewDL .m236 { margin-left: 0;}
}
@media screen and (max-width: 479px){
	figure.intervierMainimage figcaption dl dd .captionPC { display: none;}
	figure.intervierMainimage figcaption dl dd .captionMB { display: block; margin: 0 auto;}
}


/* 施工実績 */

.h2resultWrap { width: 100%; margin-bottom: 24px;
background-image:-moz-linear-gradient(0% 4% 0deg,rgb(12,92,166) 0%,rgb(255,255,255) 100%); 
background-image:-webkit-gradient(linear,0% 4%,100% 4%,color-stop(0, rgb(12,92,166)),color-stop(1, rgb(255,255,255)));
background-image:-webkit-linear-gradient(0deg,rgb(12,92,166) 0%,rgb(255,255,255) 100%);
background-image:-ms-linear-gradient(0deg,rgb(12,92,166) 0%,rgb(255,255,255) 100%);
background-image:linear-gradient(90deg,rgb(12,92,166) 0%,rgb(255,255,255) 100%);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff0c5ca6,endColorstr=#ffffffff,GradientType=1)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff0c5ca6,endColorstr=#ffffffff,GradientType=1);}
.h2resultWrap h2 { padding: 10px 24px; color: #fff; font-size: 32px; line-height: 36px;}
.h2resultWrap h2 span { display: inline-block; width: 36px; height: 36px; background: #fff; color: #0B5CA6; font-size: 28px; text-align: center;}

.resultLead { padding-bottom: 48px;}
.resultLead figure { width: 100%; max-width: 888px; margin: 0 auto;}
.resultLead figure figcaption { width: 476px; float: left;}
.resultLead figure figcaption dl dt { margin-bottom: 12px; font-size: 28px; line-height: 32px;}
.resultLead figure figcaption dl dd { line-height: 175%;}
.resultLead figure .imgBox { margin-left: 500px;}

@media screen and (max-width: 912px){
	.resultLead figure figcaption { width:60%;}
	.resultLead figure .imgBox { margin-left: 62%;}
}
@media screen and (max-width: 767px){
	.resultLead figure figcaption { width:100%; float: none;}
	.resultLead figure .imgBox { width: 60%; margin: 6px auto; }
}

.resultBack { position: relative; width: 100%; max-width: 864px; margin: 0 auto 48px auto; border: 1px #4796E1 solid;}
.resultBack:before { position: absolute; top: -28px; left:3%; content: url(../images/result/icon_back.png);}
.resultBack h3 { display: table; width: 100%;}
.resultBack h3 .sub { display: table-cell; width: 37.5%; padding: 16px 24px 16px 72px; background: #4796E1; color: #fff; font-size: 28px; text-align: center; vertical-align: middle;}
.resultBack h3 .title { display: table-cell; padding: 16px 24px; color: #4796E1; font-size: 28px; line-height: 32px;}
.resultBack .resultInner { padding: 24px;}

.resultSolution { position: relative; width: 100%; max-width: 864px; margin: 0 auto 48px auto; border: 1px #FFA92D solid;}
.resultSolution:before { position: absolute; top: -28px; left:3%; content: url(../images/result/icon_solution.png);}
.resultSolution h3 { display: table; width: 100%;}
.resultSolution h3 .sub { display: table-cell; width: 37.5%; padding: 16px 24px 16px 72px; background: #FFA92D; color: #fff; font-size: 28px; text-align: center; vertical-align: middle;}
.resultSolution h3 .title { display: table-cell; padding: 16px 24px; color: #FFA92D; font-size: 28px; line-height: 32px;}
.resultSolution .resultInner { padding: 24px;}

.resultEffect { position: relative; width: 100%; max-width: 864px; margin: 0 auto 48px auto; border: 1px #FF5E5E solid; }
.resultEffect:before { position: absolute; top: -28px; left:4%; content: url(../images/result/icon_effect.png);}
.resultEffect h3 { display: table; width: 100%;}
.resultEffect h3 .sub { display: table-cell; width: 37.5%; padding: 16px 24px 16px 72px; background: #FF5E5E; color: #fff; font-size: 28px; text-align: center; vertical-align: middle;}
.resultEffect h3 .title { display: table-cell; padding: 16px 24px; color: #FF5E5E; font-size: 28px; line-height: 32px;}
.resultEffect .resultInner { padding: 24px;}

.resultBack:after, .resultSolution:after { position: absolute; left:50%; bottom: -42px; margin-left: -13px; content: url(../images/result/next_arrow.png);}

@media screen and (max-width: 912px){
	.resultBack h3 .sub, .resultSolution h3 .sub, .resultEffect h3 .sub { padding: 12px 16px 12px 72px;}
	.resultBack h3 .title, .resultSolution h3 .title, .resultEffect h3 .title { padding: 12px 16px;}
	.resultBack .resultInner, .resultSolution .resultInner, .resultEffect .resultInner { padding: 16px;}
}
@media screen and (max-width: 767px){
	.resultBack:before, .resultSolution:before, .resultEffect:before { display: none;}
	.resultBack h3 .sub, .resultSolution h3 .sub, .resultEffect h3 .sub { padding: 10px 0; font-size: 24px;}
	.resultBack h3 .title, .resultSolution h3 .title, .resultEffect h3 .title { padding: 10px 12px; font-size: 24px;}
	.resultEffect .resultInner { padding: 12px;}
}
@media screen and (max-width: 479px){
	.resultBack h3 .sub, .resultSolution h3 .sub, .resultEffect h3 .sub { font-size: 20px;}
	.resultBack h3 .title, .resultSolution h3 .title, .resultEffect h3 .title { padding: 8px; font-size: 20px;}
	.resultEffect .resultInner { padding: 10px;}
}

.resultOther { position: relative; display: block; width: 100%; max-width: 836px; height: 106px; line-height: 106px; margin: 0 auto 48px auto; padding-right: 104px; background: #FFFB84; border: 1px #0B5CA6 solid; color: #0B5CA6; font-size: 28px; text-decoration: none !important; text-align: center;}
.resultOther:before { position: absolute; left:7%; top:50%; margin-top: -36px; width: 120px; height: 72px; background: url(../images/result/icon_more.png); background-size: contain; content: '';}	
.resultOther:after { position: absolute; right:7%; top:50%; margin-top: -40px; width: 234px; height: 72px; background: url(../images/result/icon_ipros.png); background-size: contain; content: '';}

.resultList { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 10px;}
.resultList tr:nth-child(odd) td { background: #BBEAF4;}
.resultList tr:nth-child(even) td { background: #BBD7F4;}
.resultList tr td { padding: 6px; text-align: center;}

@media screen and (max-width: 856px){
	.resultOther { height: 85px; line-height: 85px}
	.resultOther:before { left:6%; margin-top: -30px; width: 96px; height: 58px;}	
	.resultOther:after { right:7%; margin-top: -34px; width: 188px; height: 58px;}
}
@media screen and (max-width: 767px){
	.resultOther { height: 64px; padding-right: 72px; line-height: 64px; font-size: 18px;}
	.resultOther:before { left:1%; margin-top: -24px; width: 72px; height: 43px;}	
	.resultOther:after { right:1%; margin-top: -26px; width: 140px; height: 43px;}
	.resultList { border-spacing: 5px; font-size: 15px;}
	.resultList tr td { padding: 5px 3px;}

}
@media screen and (max-width: 479px){
	.resultOther { height: 60px; line-height: 60px; padding: 0 0 0 10px; font-size: 16px; text-align: left;}
	.resultOther:before { display: none;}
	.resultOther:after { right:1%; margin-top: -22px; width: 117px; height: 36px;}
	.resultList { border-spacing: 0px; font-size: 14px;}
	.resultList tr:nth-child(even) td { background: #BBEAF4;}
	.resultList tr td { display: block; padding: 0;}
}








/* イワタドレンＱ＆Ａ */

.faqLeadBox { padding: 24px; background: #D5EBFF; font-size: 20px; line-height: 150%; text-align: center;}
.faqNotice { color: #0B5CA6;}

#faqList { width: 100%;}
#faqList dt { position: relative; width: 100%; padding: 10px 0 16px 56px; margin-bottom: 12px; font-size: 20px; font-weight: bold; border-bottom: 1px #0B5CA6 solid;}
#faqList dt:before { position: absolute; left:0px; top:0px; display: block; width: 44px; height: 44px; background: #0B5CA6; color: #fff; font-size: 24px; content: 'Ｑ'; line-height: 44px; text-align: center;}
#faqList dd { display: none; padding: 18px 24px; margin-bottom: 24px; background: #EEF7FF;}

.faqTable { width: 100%; margin: 12px 0;}
.faqTable th, .faqTable td { padding: 6px; border: 1px #666 solid; font-size: 16px; vertical-align: top;}
.faqTable th { background: #eee;}







/* ご注文の流れ */

dl.orderFlowDL { margin: 24px 0;}
dl.orderFlowDL dt { width: 260px; height: 36px; background: #C3ECFF; line-height: 36px; text-align: center;}
dl.orderFlowDL dd { padding: 24px;}
dl.orderFlowDL dd .number { margin-right: 1em; font-size: 20px; font-weight: bold;}

ul.orderMatters { margin: 24px 36px;}
ul.orderMatters li { position: relative; margin-bottom: 12px;}
ul.orderMatters li.dott { padding-left: 1em;}
ul.orderMatters li.dott:before { margin-left: -1em; content: '・';}
ul.orderMatters li.arrow { margin-bottom: 48px;}	
ul.orderMatters li.arrow:after { position: absolute; left :0px; bottom: -36px; content: url(../images/order/arrow_blue.jpg)}

dl.orderPay dt { font-size: 20px; font-weight: bold;}
dl.orderPay dd { padding: 12px 24px;}

table.feeTable { width: 80%;  margin: 12px 10%; border-collapse: separate; border-spacing: 5px;}
table.feeTable caption { caption-side: bottom;}
table.feeTable th { padding: 3px 6px; background: #ddd;}
table.feeTable td { padding: 3px; border: 1px #666 solid; text-align: center;}

a.priceBtn { display: block; width: 360px; height: 52px; border: 1px #0B5CA6 solid; color: #0B5CA6; font-size: 22px; text-decoration: none !important; line-height: 52px; text-align: center;}
a.priceBtn:after { content: url(../images/arrow_blue-s.png);}

table.matomeTable { width: 100%; margin: 12px 0 24px 0; table-layout: fixed; border-collapse: separate; border-spacing: 5px;}
table.matomeTable caption { width: 100%; padding: 12px; background: #BADEFF; border: 5px #fff solid; color: #0B5CA6; font-size: 20px;}
table.matomeTable tr.blue th { border: none; background: #D9EDFF;}
table.matomeTable tr.yellow th { border: none; background: #FFEA95;}
table.matomeTable th, table.matomeTable td { padding: 10px 0; text-align: center; border: 1px #cacaca solid; vertical-align: middle;}
table.matomeTable th { background: #efefef; line-height: 16px;}
table.matomeTable th span { font-size: 10px; line-height: 10px;}

.keisanBox { width: 100%; padding: 20px; border: 1px #cacaca solid;}
.keisanBox .title { padding-left: 10px; border-left: 3px #333 solid; font-size: 20px; line-height: 28px;}
.keisanBox .keisanTable { display: table; margin-top: 12px; width: 100%;}
.keisanBox .keisanTable .box { display: table-cell; padding: 6px 0; vertical-align: middle; text-align: center;}
.keisanBox .keisanTable .box.border { border: 1px #aaa solid;}
.keisanBox .keisanTable .box.bold { border: 2px #aaa solid;}
.keisanBox .keisanTable .box.kigo { width: 30px;}
.keisanBox .keisanTable .box span { padding: 3px 6px; background: #ddd; font-size: 14px; line-height: 30px;}

dl.manufestoBox { margin: 24px 0;}
dl.manufestoBox dt { width: 100%; padding: 6px 0; font-size: 20px; text-align: left;}
dl.manufestoBox dd { padding: 24px; margin: 0 24px; background: #BADEFF; text-align: center;}
dl.manufestoBox dd p.fax { color: #0B5CA6; font-size: 36px !important; line-height: 48px;}
dl.manufestoBox dd p a { padding: 2px 24px; background: #fff; color: #333 !important; text-decoration: none !important;}
dl.manufestoBox dd br { display: none;}

table.orderLaw { width: 100%; margin: 0 24px; border-collapse: separate; border-spacing: 5px;}
table.orderLaw th { width: 160px; height: 30px; padding: 5px; background: #eee; text-align: center;}
table.orderLaw td { padding: 5px 10px; text-align: left;}

dl.orderPrivacy { margin: 24px;}
dl.orderPrivacy dt { padding: 0 12px; background: #D9EDFF; line-height: 36px;}
dl.orderPrivacy dd { padding: 24px;}
dl.orderPrivacy dd ol{ counter-reset:number; list-style:none; }
dl.orderPrivacy dd ol li{ position: relative; margin-left: 36px; margin-bottom: 12px;}
dl.orderPrivacy dd ol li:before{ position: absolute; left:-36px; counter-increment: number;content:'('counter(number)')';}

@media screen and (max-width: 912px){
	.anchorWrap.flow a { font-size: 17px;}
	ul.orderMatters { margin: 24px 12px;}
	table.orderLaw { margin: 0;}
	dl.orderPrivacy { margin: 24px 0;}
}
@media screen and (max-width: 767px){
	dl.orderFlowDL dd, dl.orderPay dd { padding: 12px 0;}
	ul.orderMatters { margin: 12px 0;}
	table.feeTable { width: 100%; margin: 12px 0;}
	.tableScroll table.matomeTable th, .tableScroll table.matomeTable td { width: 80px; padding: 5px 0; font-size: 14px;}
	.tableScroll table.matomeTable th span { font-size: 8px; line-height: 8px;}
	table.matomeTable td span { font-size: 12px; line-height: 12px;}
	.keisanBox .keisanTable, .keisanBox .keisanTable .box, .keisanBox .keisanTable .box.kigo { display: block; width: 100%;}
	.keisanBox .keisanTable .box.kigo.eq { transform: rotate(90deg);}
	.keisanBox .keisanTable .box br { display: none;}
	dl.manufestoBox dd {  margin: 0; text-align: left;}
	dl.manufestoBox dd p.fax { font-size: 30px !important;}
	dl.manufestoBox dd p a { display: inline-block; width: 100%; padding: 2px 0; text-align: center;}
	dl.manufestoBox dd br { display: inline;}
	table.orderLaw th, table.orderLaw td { display: block; width: 100%;}
	dl.orderPrivacy dd ol li{  margin-left: 16px;}
}
@media screen and (max-width: 479px){
	.keisanBox .keisanTable .box br { display: inline;}
}


/* 会社案内 */

.ideaColumn { display: table; width: 100%;}
.ideaColumnL { display: table-cell; width: 50%; border-right: 6px #fff solid; background: #C3ECFF;}
.ideaColumnR { display: table-cell; width: 50%; border-left: 6px #fff solid; background: #C3ECFF;}
.ideaBox { margin-bottom: 12px; padding: 24px 40px; background: #C3ECFF;}
.ideaBox dl dt { width: 100%; max-width: 300px; height: 40px; margin: 0 auto 24px auto; background: #fff; color: #0B5CA6; font-size: 22px; line-height: 40px; text-align: center;}
.ideaBox dl dd.center { text-align: center;}
.ideaBox dl dd.left { text-align: left;}

.aboutTable { width: 100%; border-collapse: separate; border-spacing: 6px;}
.aboutTable th { width: 200px; padding: 6px 12px; background: #C3ECFF;}
.aboutTable td { padding: 6px 12px;}
.aboutTable tr.top { position: relative;}
.aboutTable tr.top .memberPH { position: absolute; top:0px; right:0px; z-index: 9999;}
.aboutTable td .u912 { display: none;}

.historyTable { width: 100%; border-collapse: separate; border-spacing: 6px;}
.historyTable th { width: 208px; padding: 6px 12px; background: #C3ECFF;}
.historyTable td { padding: 6px 12px;}
.historyTable tr.top { position: relative;}

.gMaps { width: 100%; height: 430px; border: 1px #ccc solid;}

@media screen and (max-width: 912px){
	.ideaBox { margin-bottom: 6px; padding: 12px;}
	.aboutTable td .u912 { display: inline;}
	.aboutTable tr.top .memberPH { width: 268px;}
}
@media screen and (max-width: 767px){
	.ideaColumnL, .ideaColumnR { display: block; width: 100%; border: none;}
	.ideaBox dl dd.center {text-align: left;}
	.ideaBox dl dd.left { text-align: center;}
	.aboutTable th, .aboutTable td { display: block; width: 100%;}
	.aboutTable tr.top .memberPH { width: 200px;}
	.historyTable th, .historyTable td { display: block; width: 100%;}
}



/* ご注文 */

.contactBannerWrap { display: table; table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 12px;}
.contactBannerWrap .box { display: table-cell; width: 50%; padding: 20px; border: 1px #0C5BA6 solid; text-align: center;}
.contactBannerWrap .box dl dt { width: 100%; height: 48px; line-height: 48px; margin: 10px 0; border: 1px #0C5BA6 solid; color: #0C5BA6; font-size: 24px;}
.contactBannerWrap .box dl dd { padding: 10px 0;}
.contactBannerWrap .box dl dd .faxBanner { display: block; width: 100%; height: 48px; background: #0C5BA6; color: #fff !important; font-size: 24px; line-height: 48px; text-decoration: none !important;}
.contactBannerWrap .box dl dd .faxBanner:after { content: url(../images/arrow_white.png);}

.contactRepeaterWrap { width: 100%; padding: 20px; margin-bottom: 48px; background: #FFEF67; text-align: center;}
.contactRepeaterWrap .notice { padding: 20px; background: #fff; border: 1px #0C5BA6 solid;}
.contactRepeaterWrap .notice p { color: #0C5BA6; font-size: 24px; line-height: 36px;}
.contactRepeaterWrap .notice p span.big { font-size: 28px;}
.contactRepeaterWrap .notice p span.red { color: #f33;}
.contactRepeaterWrap p { color: #0C5BA6; font-size: 20px; line-height: 30px;}

@media screen and (max-width: 912px){
	.contactBannerWrap .box dl dd { font-size: 14px;}
	.contactRepeaterWrap { padding: 15px;}
	.contactRepeaterWrap .notice { padding: 15px;}
	.contactRepeaterWrap .notice p { font-size: 20px;}
	.contactRepeaterWrap .notice p span.big { font-size: 22px;}
}
@media screen and (max-width: 767px){
	.contactBannerWrap .box { padding: 10px;}
	.contactBannerWrap .box dl dt { font-size: 16px;}
	.contactBannerWrap .box dl dd .faxBanner { font-size: 14px;}
	.contactBannerWrap .box dl dd { font-size: 13px;}
	.contactRepeaterWrap { text-align: left;}
	.contactRepeaterWrap br { display: none;}
	.contactRepeaterWrap p { font-size: 16px; line-height: 24px;}
}

.contactTable { width: 100%; border-collapse: separate; border-spacing: 6px;}
.contactTable th { padding: 14px; border: 1px #ccc solid; text-align: left; font-size: 18px; white-space: nowrap; vertical-align: top;}
.contactTable th.nb { border: none;}
.contactTable th.blue { border: none; background: #C2E1FE;}
.contactTable th.hp { font-size: 14px;}
.contactTable th .nec { color:#f33;}

.contactTable td { position: relative; border: none; text-align: left; font-size: 18px;}
.contactTable td.border { padding: 14px; border: 1px #ccc solid;}
.contactTable td.zip:after { position: absolute; top:50%; right:16px; margin-top: -20px; height: 40px; line-height: 40px; padding: 0 20px; background: #0C5BA6; color: #fff; content: '住所自動入力';}
.contactTable td.count:after { position: absolute; top:50%; right:16px; margin-top: -20px; height: 40px; line-height: 40px; color: #666; content: '個';}
.contactTable td.check { font-size: 16px;}
.contactTable td p { margin-bottom: 8px; color: #666; font-size: 16px;}

.contactTable input[type="text"] { width:100%; padding: 16px; border: 1px #ccc solid; font-size: 18px;}
.contactTable select, .contactTable option { width: 100%; border: none; font-size: 18px;}
.contactTable select[name="都道府県"], .contactTable select[name="都道府県"] option { width: 160px; border: none; font-size: 18px}
.contactTable textarea { width:100%; height: 5em; padding: 8px; border: 1px #ccc solid; font-size: 18px;}
.formNotice { display:none; color:#f33;}

.submitBox { padding: 20px; text-align: center;}
.submitBox p { margin-bottom: 16px; font-size: 18px;}
.submitBox p.notice { color: #f00; font-size: 18px;}
button.submit { max-width: 360px; width: 100%; height: 52px; margin-bottom: 16px; line-height: 52px; border: none; background: #0C5BA6; color: #fff; font-size: 24px;}
button.submit:hover { opacity:0.75; filter:alpha(opacity=75); -ms-filter:"alpha(opacity=75)"; -webkit-transition:0.1s; -moz-transition:0.1s; -o-transition:0.1s; transition:0.1s;}

@media screen and (max-width: 767px){
	.contactTable th, .contactTable td { display: block; width: 100%;}
}
@media screen and (max-width: 479px){
	.contactTable th, .contactTable td.border, .contactTable input[type="text"] { padding: 6px;}
	.contactTable td p { font-size: 14px;}
	.submitBox { padding: 0px; text-align: left;}
	button.submit { max-width: 100%;}
}














/* イワタドレン開発物語 */











/* CSS memo
 
角丸
border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; 

テキストシャドウ
text-shadow:1px 1px 3px #000;
 
ボックスシャドウ
-moz-box-shadow:1px 1px 3px #000; -webkit-box-shadow:1px 1px 3px #000; box-shadow:1px 1px 3px #000;
 
ボックスシャドウ内側
-moz-box-shadow:inset 1px 1px 3px #000; -webkit-box-shadow:inset 1px 1px 3px #000; box-shadow:inset 1px 1px 3px #000;

トランジション
-webkit-transition: 1.5s; -moz-transition: 1.5s; -o-transition: 1.5s; transition: 1.5s;
 
要素全部を透明
filter: alpha(opacity=25); -moz-opacity:0.25; opacity:0.25;
 
背景のみ透明
background-color:rgba(255,255,255,0.2);
 
:first-child
:last-child
:nth-child(odd)　･･･　奇数番目の要素に適用
:nth-child(even)　･･･　偶数番目の要素に適用
:nth-child(n)　･･･　n番目の要素に適用
:nth-child(2n+1)　･･･　奇数番目の要素に適用
:nth-child(2n)　･･･　偶数番目の要素に適用
:nth-child(3n)　･･･　3,6,9,12…番目の要素に適用
:nth-child(3n+1)　･･･　1,4,7,10…番目の要素に適用 

明朝体
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

テキスト省略
.container { overflow: hidden; width: 100%;}
.container  p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

コンタクトフォーム
.contactTable {}
.contactTable input[type="text"] { width:250px;}
.contactTable textarea { width:100%;}
.formNotice { display:none; color:#f33;}

可変Youtube埋め込み
.youtube { position: relative; width: 100%; padding-top: 56.25%;}
.youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}






CSS memo */