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

/* メインメージ */

#mainimageWrap { width: 100%; height: 566px; background: url(../images/home/main_bg.jpg) top center repeat-x; }
#mainimageWrap .mainimageInner { width: 1200px; height: 566px; margin: 0 auto;}
#mainimageWrap .mainimageInner .mainMB { display: none;}

@media screen and (max-width: 1100px){
	#mainimageWrap { height: auto; background: none;}
	#mainimageWrap .mainimageInner { width: 100%; height: auto;}
}
@media screen and (max-width: 480px){
	#mainimageWrap .mainimageInner .mainPC { display: none;}
	#mainimageWrap .mainimageInner .mainMB { display: block;}
}


/* メニュー */
#menuWrap { padding-bottom: 40px;}
#menuWrap .menuBox { width: 492px; border: 1px #6F9FCB solid;}
#menuWrap .menuBox:nth-child(odd) { float: left;}
#menuWrap .menuBox:nth-child(even) { margin-left: 508px;}

#menuWrap .menuBox figure { display: table; width: 100%;}
#menuWrap .menuBox figure figcaption { display: table-cell; width: 254px; padding: 0 15px; vertical-align: top;}
#menuWrap .menuBox figure figcaption dl dt { padding: 10px;  border-bottom: 1px #6F9FCB solid; color: #0B5BA7; font-size: 36px; line-height: 40px;}
#menuWrap .menuBox figure figcaption dl dt.voice { line-height: 80px;}
#menuWrap .menuBox figure figcaption dl dd { padding: 10px 4px; color: #0B5BA7;}
#menuWrap .menuBox figure figcaption dl dd p { margin-bottom: 6px; line-height: 130%;}
#menuWrap .menuBox figure figcaption dl dd a.more { display: block; padding: 2px; background: #0B5BA7; color: #fff; text-decoration: none;}
#menuWrap .menuBox figure figcaption dl dd a:after { content: url(../images/arrow_white.png);}
#menuWrap .menuBox figure .imgBox { display: table-cell; width: 238px; vertical-align: middle;}

@media screen and (max-width: 1020px){
	#menuWrap .menuBox { width: 49%;}
	#menuWrap .menuBox:nth-child(even) { margin-left: 51%;}
	#menuWrap .menuBox figure figcaption { width: 52%}
	#menuWrap .menuBox figure figcaption dl dd p { font-size: 14px;}
	#menuWrap .menuBox figure .imgBox { width: 48%;}
}
@media screen and (max-width: 959px){
	#menuWrap .menuBox { width: 100%;}
	#menuWrap .menuBox:nth-child(odd) { float: none; margin-bottom: 12px;}
	#menuWrap .menuBox:nth-child(even) { margin-left: 0%;}
}
@media screen and (max-width: 480px){
	#menuWrap .menuBox figure figcaption { padding: 0 5px;}
	#menuWrap .menuBox figure figcaption dl dt { padding: 5px 0; font-size: 28px; line-height: 32px;}
	#menuWrap .menuBox figure figcaption dl dt.voice { line-height: 64px;}
	#menuWrap .menuBox figure figcaption dl dd p { font-size: 12px; text-align: left;}
	#menuWrap .menuBox figure figcaption dl dd p br { display: none;}

}


/* 製品案内 */

#productsWrap { width: 100%; height: 590px; padding: 40px 0; background: url(../images/home/products_bg.jpg) top center repeat;}
#productsWrap .h2wrap { width: 100%; max-width: 464px; height: 66px; margin: 0 auto 46px auto; background: #0B5CA6;}
#productsWrap .h2wrap h2 { color: #fff; font-size: 36px; line-height: 66px;}

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

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

#productsWrap .bannerWrap { display: table; table-layout: fixed; width: 100%;}
#productsWrap .bannerBox { display: table-cell; width: 50%;}
#productsWrap .bannerBox:nth-child(odd) { padding-right: 6px;}
#productsWrap .bannerBox:nth-child(even) { padding-left: 6px;}
#productsWrap .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;}
#productsWrap .bannerBox a:hover { text-decoration: none;}
#productsWrap .bannerBox a span { position: relative;}
#productsWrap .bannerBox a span.catalogue:before { position: absolute; left:-42px; top:50%; margin-top: -24px; content: url(../images/products/icon_catalogue.png);}
#productsWrap .bannerBox a span.price:before { position: absolute; left:-42px; top:50%; margin-top: -24px; content: url(../images/products/icon_price.png);}
#productsWrap .bannerBox a span:after { content: url(../images/arrow_blue.png);}

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

/* information */

#informationWrap { width: 100%; padding: 40px 0; background:url(../images/home/information_bg.png);}

#informationWrap .newsBox { width: 660px; height: 532px; padding: 0 16px; background: #fff; border: 1px #6F9FCB solid; float: left; text-align: left;}
#informationWrap .newsBox .h2wrap { display: table; width: 100%; padding: 20px 0; margin-bottom: 10px; border-bottom: 1px #6F9FCB solid;}
#informationWrap .newsBox .h2wrap h2 { display: table-cell; color: #0B5BA7; font-size: 36px;  vertical-align: middle;}
#informationWrap .newsBox .h2wrap h2:before { content: url(../images/home/news_icon.png);}
#informationWrap .newsBox .h2wrap .banner { display: table-cell; height: 36px; padding: 0 5px; line-height: 36px; vertical-align: middle; text-align: center;}
#informationWrap .newsBox .h2wrap .banner a { display: block; color: #fff;}
#informationWrap .newsBox .h2wrap .banner a:after { content: url(../images/arrow_white.png);}
#informationWrap .newsBox .h2wrap .banner a:hover { text-decoration: none;}
#informationWrap .newsBox .h2wrap .banner a.paper { background: #FF7A0E;}
#informationWrap .newsBox .h2wrap .banner a.news { background: #0B5BA7;}
#informationWrap .newsBox ul li a { display: block; width: 100%; padding: 8px 0;}
#informationWrap .newsBox ul li a:hover { text-decoration: none;}
#informationWrap .newsBox ul li a figure { display: table; table-layout: fixed; width: 100%; vertical-align: top;}
#informationWrap .newsBox ul li a figure .imgBox{ display: table-cell; width: 114px; padding-right: 18px;}
#informationWrap .newsBox ul li a figure figcaption { display: table-cell; border-bottom: 1px #333 dashed; vertical-align: top;}
#informationWrap .newsBox ul li a figure figcaption .meta { width: 100%;}
#informationWrap .newsBox ul li a figure figcaption .meta .banner { display: inline-block; width: 228px; height: 32px; line-height: 32px; margin-right: 20px; color: #fff; text-align: center;}
#informationWrap .newsBox ul li a figure figcaption .meta .banner.paper { background: #FF7A0E;}
#informationWrap .newsBox ul li a figure figcaption .meta .banner.news { background: #0B5BA7;}
#informationWrap .newsBox ul li a figure figcaption .meta .banner.blog { background: #5FAA47;}
#informationWrap .newsBox ul li a figure figcaption .meta .date { display: inline-block; height: 32px; line-height: 32px; color: #333;}
#informationWrap .newsBox ul li a figure figcaption .title { overflow: hidden; width: 100%;}
#informationWrap .newsBox ul li a figure figcaption .title  p { height: 32px; line-height: 32px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

#informationWrap .orderBox { width: 320px; height: 532px; margin-left: 680px; background: #fff; margin-bottom: 20px; border: 1px #6F9FCB solid;}
#informationWrap .orderBox .h2wrap { width: 100%; padding: 15px; margin-bottom: 10px;}
#informationWrap .orderBox .h2wrap h2 { padding: 10px;  border-bottom: 1px #6F9FCB solid; color: #0B5BA7; font-size: 36px; }
#informationWrap .orderBox ul { width: 240px; margin: 8px auto; text-align: left;}
#informationWrap .orderBox ul li:before { content: url(../images/home/order_dott.png);}
#informationWrap .orderBox ul li a { margin-left: 10px; color: #333;}
#informationWrap .orderBox a.more { display: block; padding: 2px; margin: 15px; background: #0B5BA7; color: #fff; text-decoration: none;}
#informationWrap .orderBox a.more:after { content: url(../images/arrow_white.png);}

@media screen and (max-width: 1020px){
	#informationWrap .newsBox { width: 66%}
	#informationWrap .orderBox { width: 32%; margin-left: 68%;}
}
@media screen and (max-width: 959px){
	#informationWrap { padding: 30px 0;}
	#informationWrap .newsBox .h2wrap h2 { font-size: 28px; line-height: 33px;}
	#informationWrap .newsBox .h2wrap .banner a { font-size: 14px;}
	#informationWrap .newsBox ul li a figure figcaption .meta .banner { width: 192px; font-size: 14px;}
	#informationWrap .newsBox ul li a figure figcaption .meta .date { font-size: 14px;}
	#informationWrap .orderBox .h2wrap h2 { font-size: 26px;}
	#informationWrap .orderBox ul li { margin-left: 16px;}
}
@media screen and (max-width: 767px){
	#informationWrap { padding: 20px 0;}
	#informationWrap .newsBox { width: 100%; height: auto; padding: 0 16px 16px 16px; margin-bottom: 12px;}
	#informationWrap .orderBox { display: none;}
	#informationWrap .newsBox .h2wrap h2 { font-size: 26px;}
	#informationWrap .newsBox .h2wrap .banner a { font-size: 14px;}
	#informationWrap .newsBox ul li a figure figcaption .meta .banner { width: 180px; font-size: 12px;}
	#informationWrap .newsBox ul li a figure figcaption .meta .date { font-size: 12px;}
}
@media screen and (max-width: 479px){
	#informationWrap { padding: 10px 0;}
	#informationWrap .newsBox .h2wrap, #informationWrap .newsBox .h2wrap h2, #informationWrap .newsBox .h2wrap .banner { display: block; width: 100%;}
}

#informationWrap .storyBox { display: table; width: 100%; background: #fff; border: 1px #6F9FCB solid;}
#informationWrap .storyBox .textBox { display: table-cell; width: 42%; padding: 20px 15px; vertical-align: middle;}
#informationWrap .storyBox .imgBox { display: table-cell; width: 58%; vertical-align: middle;}
#informationWrap .storyBox .h2wrap { width: 100%; margin-bottom: 15px;}
#informationWrap .storyBox .h2wrap p { color: #0B5BA7; font-size: 22px; line-height: 26px; text-align: left;}
#informationWrap .storyBox .h2wrap h2 { color: #0B5BA7; font-size: 36px; line-height: 44px; text-align: center;}
#informationWrap .storyBox a.more { display: block; padding: 2px; margin: 8px 16px; background: #0B5BA7; color: #fff; text-decoration: none;}
#informationWrap .storyBox a.more:after { content: url(../images/arrow_white.png);}

@media screen and (max-width: 1020px){
	#informationWrap .storyBox { height: auto;}
	#informationWrap .storyBox .textBox { padding: 15px 10px;}
	#informationWrap .storyBox .h2wrap p { font-size: 20px; line-height: 24px;}
	#informationWrap .storyBox .h2wrap h2 { font-size: 34px; line-height: 40px;}
}
@media screen and (max-width: 959px){
	#informationWrap .storyBox .textBox { padding: 10px 5px;}
	#informationWrap .storyBox .h2wrap { margin-bottom: 10px;}
	#informationWrap .storyBox .h2wrap p { font-size: 18px; line-height: 20px;}
	#informationWrap .storyBox .h2wrap h2 { font-size: 30px; line-height: 32px;}
	#informationWrap .storyBox p { font-size: 14px; line-height: 20px;}
}
@media screen and (max-width: 767px){
	#informationWrap .storyBox .textBox { width: 60%; padding: 10px 5px;}
	#informationWrap .storyBox .imgBox { width: 40%;}
	#informationWrap .storyBox .h2wrap { margin-bottom: 5px;}
	#informationWrap .storyBox .h2wrap p { font-size: 16px; line-height: 18px;}
	#informationWrap .storyBox .h2wrap h2 { font-size: 24px; line-height: 24px;}
	#informationWrap .storyBox p { font-size: 13px; line-height: 18px;}
}
@media screen and (max-width: 479px){
	#informationWrap .storyBox .textBox { display: block; width: 100%; padding: 10px 5px;}
	#informationWrap .storyBox .imgBox { display: block; width: 100%; margin: 0 auto; padding: 0 5px 5px 5px;}
}

/* 会社概要 */
#aboutWrap { width: 100%; height: 310px; padding: 40px 0; background: #89C0F6 url(../images/home/about_bg.jpg) top center no-repeat;}
#aboutWrap .aboutBox { width: 562px; float: right;}
#aboutWrap .aboutBox .h2wrap { width: 100%; margin-bottom: 15px;}
#aboutWrap .aboutBox .h2wrap h2 { color: #fff; font-size: 36px; line-height: 44px; text-align: center;}
#aboutWrap .aboutBox ul { width: 100%;}
#aboutWrap .aboutBox ul li { width: 260px; margin: 0 8px 16px 8px; float: left;}
#aboutWrap .aboutBox ul li a { display: block; width: 100%; height: 40px; line-height: 40px; background: #fff; color: #0B5BA7; font-size: 18px;}
#aboutWrap .aboutBox ul li a:after { content: url(../images/arrow_blue-s.png);}
#aboutWrap .aboutBox ul li a:hover { text-decoration: none;}

@media screen and (max-width: 767px){
	#aboutWrap { width: 100%; height: auto; padding: 30px 0 14px 0;}
	#aboutWrap .aboutBox { width: 100%; float: none;}
	#aboutWrap .aboutBox ul li { width: 48%; margin: 0 1% 16px 1%; float: left;}
}
@media screen and (max-width: 479px){
	#aboutWrap { width: 100%; height: auto; padding: 20px 0 4px 0;}
}


/* banner */

#bannerWrap { width: 100%; padding: 40px 0 0 0;}
#bannerWrap .bannerBox { display: table; table-layout: fixed; width: 100%; margin: 0 auto;}
#bannerWrap .bannerBox .bannerCell { display: table-cell; padding: 12px;}
#bannerWrap .bannerBox .bannerCell a, #bannerWrap .bannerBox .bannerCell span { position: relative; display: block; width: 100%; height: 70px; padding-right: 16px; background: #0B5BA7; color: #fff; font-size: 18px; text-align: right; line-height: 70px;}
#bannerWrap .bannerBox .bannerCell a:after { content: url(../images/arrow_white.png);}
#bannerWrap .bannerBox .bannerCell a:hover { text-decoration: none;}
#bannerWrap .bannerBox .bannerCell a img, #bannerWrap .bannerBox .bannerCell span img { position: absolute; top:-12px; left: -20px;}

@media screen and (max-width: 767px){
	#bannerWrap .bannerBox, #bannerWrap .bannerBox .bannerCell, #bannerWrap .bannerBox .bannerCell.blue { display: block; width: 100%;}
}