@charset "utf-8";
/* ------------------------------------------- common */
h3.title { text-align: center; padding: 0 0 50px;}
h3.title img { padding: 0 0 5px;}
h3.title span { display: block; font-size: 18px; font-weight: bold;}

/* ------------------------------------------- index */

#f-view { text-align: center; background: url(../images/diy/fv.jpg) center top no-repeat; padding: 125px 0 65px; color: #162961;}
#f-view p { padding: 0 0 20px;}
#f-view p span { display: block; font-size: 18px; color: #162961; font-weight: bold; padding: 10px 0 0;}
#f-view h2 { font-size: 32px; font-weight: bold;}

#intro { padding: 80px 0 100px; text-align: center;}
#intro div div img { float: left; padding: 0 0 0 11px;}
#intro div div img.first { padding: 0;}
#intro h3 { font-size: 30px; font-weight: bold; padding: 40px 0;}

#faq { background: url(../images/diy/bg_01.gif); padding: 60px 0 80px;}
#faq ul li { border: 5px solid #162961; background: #fff; padding: 35px 45px; margin: 0 0 25px;}
#faq ul li h4 { font-size: 24px; font-weight: bold; background: url(../images/diy/icn_01.gif) left 5px no-repeat; padding: 0 0 20px 50px; border-bottom: 2px dotted #162961; }
#faq ul li p { background: url(../images/diy/icn_02.gif) left 25px no-repeat; padding: 20px 0 0 50px;}

#price { padding: 70px 0;}
#price .box { background: url(../images/diy/bg_02.gif); padding: 35px 30px;}
#price .box div { background: #fff;}
#price .box div img { float: left;}
#price .box div dl { float: left; width: 491px; padding: 50px 0 0 80px; font-size: 28px;}
#price .box div dl dt,
#price .box div dl dd { font-weight: bold;}
#price .box div dl dd span { font-size: 18px;}
#price .box dl.option { padding: 20px 0 0;}
#price .box dl.option dt { color: #fff; font-size: 18px; background: #162961; text-align: center; padding: 10px 0;}
#price .box dl.option dd { background: #fff; padding: 20px 0;}
#price .box dl.option dd ul li { float: left; width: 310px; border-left: 1px solid #b8b7b5; text-align: center; }
#price .box dl.option dd ul li:first-child { border: none;}
#price .box dl.option dd ul li p { font-size: 28px; font-weight: bold;}
#price .box dl.option dd ul li p span { display: block; font-size: 18px; font-weight: bold;}
#price .box dl.option dd ul li p small { font-size: 18px;}

#flow { background: #f1f1f1; padding: 80px 0 120px;}
#flow ol li { list-style-type: none; background: url(../images/diy/arw.gif) center top no-repeat; padding: 70px 0 50px;}
#flow ol li:first-child { background: none; padding: 55px 0 20px;}
#flow ol li .box { background: #fff;}
#flow ol li .box img { float: left;}
#flow ol li .box div { float: left; width: 476px; padding: 25px 40px;}
#flow ol li .box div h4 { font-size: 26px; padding: 0 0 45px;}
#flow ol li .box div h4 img { padding: 0 25px 0 0;}
#flow ol li .box div h4 span { display: inline-block; *display: inline; *zoom: 1; padding: 15px 0 0; font-weight: bold;}

#example { padding: 60px 0 110px;}
#example h3 { font-size: 30px; font-weight: bold; background: url(../images/diy/bg_03.gif) center center no-repeat; padding: 35px 0; text-align: center;}
#example ul { padding: 40px 0 0;}
#example ul li { width: 320px; padding: 0 0 0 20px; float: left;}
#example ul li:first-child { padding: 0;}
#example ul li p { font-size: 17px; font-weight: bold; text-align: center; padding: 20px 0 0;}

#recommend { background: url(../images/diy/bg_04.jpg) center top no-repeat; padding: 80px 0 65px;}
#recommend div div { float: right; width: 470px;}
#recommend div div h4 { font-size: 30px; font-weight: bold; padding: 0 0 40px;}

#company_introduction { padding: 115px 0 105px;}
#company_introduction div img { float: left;}
#company_introduction div div { float: left; width: 497px; padding: 0 0 0 85px;}
#company_introduction h4 { font-size: 30px; font-weight: bold; padding: 0 0 40px;}

#performance { background: #f8f1eb; padding: 85px 0 80px; margin: 0 0 50px; text-align: center;}
#performance #container div { background: #fff; margin: 20px 0 0 20px;}

.diy-btn a { display: inline-block; *display: inline; *zoom: 1; font-size: 14px; width: 280px; height: 50px; line-height: 50px; background: url(../images/index/arrowRight.png) 94% center no-repeat #ee9d00; color: #fff; }
.diy-btn { padding: 30px 0 0 0; }

p.btn.look.index { margin: 30px auto 150px; }


/* ------------------------------------------------------------ list */

p.btn.look.list { margin: 70px auto 95px; }

/* ------------------------------------------------------------ detail */

#detail_intro { text-align: center; padding: 100px 0 60px;}
#detail_intro h2 { font-size: 28px; font-weight: bold;}
#detail_intro h2 span { font-size: 14px; color: #354582; display: block;}

#diy_detail { background: url(../images/diy/bg_01.gif); padding: 40px 0 135px;}
#diy_detail .photo { background: url(../images/diy/arw_02.png) center bottom no-repeat; padding: 0 0 45px;}
#diy_detail .photo .frame { float: left; width: 462px; border: 5px solid #efefef; padding: 10px; background: #fff; text-align: center;}
#diy_detail .photo .before_box .frame { margin: 0 10px 0 0;}
#diy_detail .photo div p span { display: block; font-size: 24px; font-weight: bold; padding: 15px 0 20px;}
#diy_detail h3 { font-size: 28px; font-weight: bold; text-align: center; padding: 40px 0 10px;}

#performance.detail { background: #fff; padding: 65px 0 0;}
#performance.detail #blueRibbon { margin: 0 auto 40px;}
#performance.detail #container div { background: #f1f1f1;}
#performance.detail p.btn { margin: 45px 0 120px;}

#top .empty { font-weight: bold; font-size: 16px; padding: 60px 0;}
#blueRibbon { margin-top: 0; }



@media only screen and (max-width:640px){
/* ------------------------------------------- common */
h3.title { text-align: center; padding: 0 0 20px;}
h3.title span { font-size: 16px;}
h3.title img { width: 120px; height: auto;}

#head .head-contact { display: none;}

/* ------------------------------------------- index */

#f-view { background-size: cover; padding: 60px 0 25px;}
#f-view p img { width: 200px; height: auto;}
#f-view p span { font-size: 14px;}
#f-view h2 { font-size: 18px; padding: 0 3%;}

#intro { padding: 30px 0 40px;}
#intro div div img { width: 32%; padding: 0 1%; height: auto;}
#intro div div img.first { padding: 0 1% 0 0 ;}
#intro div div img.third { padding: 0 0 0 1%;}
#intro h3 { font-size: 22px; padding: 20px 0 10px;}

#faq { background-size: cover; padding: 30px 0 35px;}
#faq ul li { padding: 15px 3%; margin: 0 0 15px;}
#faq ul li h4 { font-size: 17px; background: url(../images/diy/icn_01.gif) left 2px no-repeat; background-size: 20px auto; padding: 0 0 10px 27px;  }
#faq ul li p { background: url(../images/diy/icn_02.gif) left 15px no-repeat;  background-size: 20px auto; padding: 10px 0 0 27px;}

#price { padding: 25px 0; text-align: center;}
#price .box { padding: 15px 3%;}
#price .box div img { float: none; width: 100%; height: auto;}
#price .box div dl { float: none; width: 100%; padding: 20px 0; font-size: 20px;}
#price .box div dl dd span { font-size: 16px; display: block;}
#price .box dl.option { padding: 10px 0 0;}
#price .box dl.option dt { font-size: 16px; padding: 7px 0;}
#price .box dl.option dd { padding: 0 3%;}
#price .box dl.option dd ul li { float: none; width: 100%; border-top: 1px solid #b8b7b5; border-left: none; padding: 5px 0;}
#price .box dl.option dd ul li p { font-size: 20px;}
#price .box dl.option dd ul li p span { font-size: 14px;}
#price .box dl.option dd ul li p small { font-size: 12px;}

#flow { padding: 30px 0 35px;}
#flow ol li { background-size: 50px auto; padding: 25px 0 15px;}
#flow ol li:first-child { padding: 15px 0 10px;}
#flow ol li .box img { float: none; width: 100%; height: auto;}
#flow ol li .box div { float: none; width: 94%; padding: 15px 3%;}
#flow ol li .box div h4 { font-size: 20px; padding: 0 0 15px; text-align: center;}
#flow ol li .box div h4 img { padding: 0; width: 30px; height: auto;}
#flow ol li .box div h4 span { padding: 10px 0 0; display: block;}

#example { padding: 30px 0 40px;}
#example h3 { font-size: 20px; background-size: 270px auto; padding: 15px 0;}
#example ul { padding: 20px 0 0;}
#example ul li { width: 100%; padding: 0 0 10px; float: none;}
#example ul li img { width: 100%; height: auto;}
#example ul li:first-child { padding: 0 0 10px;}
#example ul li p { font-size: 14px; padding: 15px 0 0;}

#recommend { background: none; padding: 40px 0 30px;}
#recommend div div { float: none; width: 100%;}
#recommend div div h4 { font-size: 20px; padding: 0 0 15px; text-align: center;}

#company_introduction { padding: 30px 0 40px;}
#company_introduction div img { float: none; width: 100%; height: auto;}
#company_introduction div div { float: none; width: 100%; padding: 0 0 15px; text-align: center;}
#company_introduction h4 { font-size: 24px; padding: 15px 0 15px;}

#performance { padding: 30px 0 40px; margin: 0 0 25px;}
#performance #container div { margin: 15px 0 10px;}

p.btn.look.index { margin: 20px auto 30px; }

/* ------------------------------------------------------------ list */

p.btn.look.list { margin: 35px auto 40px; }

/* ------------------------------------------------------------ detail */

#detail_intro { padding: 30px 0 35px;}
#detail_intro h2 { font-size: 20px;}

#diy_detail { background-size: 50% auto; padding: 20px 0 30px;}
#diy_detail .photo { background: none; padding: 0;}
#diy_detail .photo .frame { float: none; width: 95%; padding: 10px 2%;}
#diy_detail .photo .before_box { background: url(../images/diy/arw_01.png) center bottom no-repeat; background-size: 15px auto; padding: 0 0 45px; }
#diy_detail .photo .before_box .frame { margin: 0;}
#diy_detail .photo div p span { font-size: 20px; padding: 10px 0 15px;}
#diy_detail .photo div p img { width: 100%; height: auto;}
#diy_detail h3 { font-size: 20px; padding: 20px 0 10px;}

#performance.detail { padding: 20px 0 0;}
#performance.detail #blueRibbon { margin: 0 auto 20px;}
#performance.detail p.btn { margin: 20px 0 30px;}

}