@charset "utf-8";
/* ------------------------------------------------------------ common */

p.btn.common_01 a { background: url(../images/index/btn_01.png) center top no-repeat; width: 649px; height: 135px; font-size: 31px; padding: 45px 0 50px;}


/* ------------------------------------------------------------ fv */

#fv { background: url(../images/reason/fv.jpg) no-repeat center 60%; background-size: cover; padding: 100px 0 190px;}
#fv img { display: block; width: 360px; margin: 0 auto; }

#reason { padding: 0 0 95px;}

/* ------------------------------------------------------------ nav2 */

#pages_nav { position: relative; }

/* ------------------------------------------------------------ reasontitle */

#reasontitle { background: url(../images/reason/pic_00.jpg) no-repeat center center; background-size: cover; padding: 112px 0 190px; }
#reasontitle h2 { font-size: 25px; color: #fff; line-height: 200%; letter-spacing: 3px; }

/* ------------------------------------------------------------ reasontop */

#reasontop { padding: 80px 0 0; }
#reasontop h3 { background: url(../images/reason/pic_01.jpg) no-repeat center -40px #fff; background-size: cover; height: 800px; font-size: 25px; text-align: center; line-height: 50px; letter-spacing: 2px; font-family: 'Noto Sans Japanese medium';}

/* ------------------------------------------------------------ reasonwrapper */

#reasonwrapper .title { max-width: 670px; margin: 0 auto; padding: 0 0 45px; text-align: center; }
#reasonwrapper h3 { background: url(../images/reason/text_00.png) no-repeat left center; padding: 0 0 0 130px; display: inline-block; text-align: left; font-size: 25px; line-height: 130%; }
#reasonwrapper h3 span { font-size: 48px; line-height: 130%; font-family: 'Noto Sans Japanese medium';}
#reasonwrapper .inner { background: url(../images/common/line.gif) repeat-x; padding: 60px 0 0; }
#reasonwrapper .box,
#reasonwrapper .box2 { padding: 0 0 50px; }
#reasonwrapper .box ul { background: #f3eedb; width: 50%; height: 367px; float: left; box-sizing: border-box; padding: 30px 0 0 50px; }
#reasonwrapper .box2 ul { background: #f3eedb; width: 50%; height: 477px; float: left; box-sizing: border-box; padding: 30px 0 0 50px; }
#reasonwrapper .box img, 
#reasonwrapper .box2 img { float: left; }
#reasonwrapper .box ul li,
#reasonwrapper .box2 ul li { background: url(../images/reason/icn_00.png) no-repeat left 6px; padding: 0 0 10px 40px; line-height: 180%;}
#reasonwrapper .box2 ul li.fukusu { background: url(../images/reason/icn_00.png) no-repeat left 6px; padding: 0 0 10px 40px; }

/* ------------------------------------------------------------ myhome */

#myhome a { display: block; background: url(../images/reason/icn_02.gif) no-repeat 440px center #c20303; width: 480px; margin: 0 auto; padding: 20px 0; text-align: center; color: #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

/* ------------------------------------------------------------ housingloan */

#housingloan { padding: 100px 0 0; }
#housingloan a { display: block; background: url(../images/reason/icn_02.gif) no-repeat 440px center #c20303; width: 480px; margin: 0 auto; padding: 20px 0; text-align: center; color: #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}


/* ------------------------------------------------------------ housingconsultation */

#housingconsultation { padding: 100px 0 0; }
#housingconsultation .btnarea { width: 1010px; margin: 0 auto; }
#housingconsultation a { display: block; background: url(../images/reason/icn_02.gif) no-repeat 440px center #c20303; width: 480px; margin: 0 26px 0 0; padding: 20px 0; text-align: center; color: #fff; float: left; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
#housingconsultation a.btn { margin: 0; }

/* ------------------------------------------------------------ afterfollow */

#afterfollow { padding: 100px 0 0 0; }
#afterfollow .box ul { padding: 40px 0 0 50px;}

/* ------------------------------------------------------------ store */

#store { padding: 50px 0 0; }
#store .box ul { padding: 40px 0 0 50px;}

/* ------------------------------------------------------------ event */

#event .box { background: #c20303; float: right; width: 466px; text-align: center; color: #fff; height: 245px; margin: 12px 0 0;}
#event h4.size_01 { color: #fff; margin: 25px 0 0;}
#event h4.size_01 span { font-size: 18px; display: block;}
#event p.btn { margin: 10px auto 0; color: #c20303; background: url(../images/index/arw.png) 97% center no-repeat #fff; width: 280px; height: 45px; line-height: 45px; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0;}



/* ------------------------------------------------------------ mobile ------------------------------------------------------------------------------*/
@media only screen and (max-width:640px){


/* ------------------------------------------------------------ common */

p.btn.common_01 a { background: url(../images/index/btn_01.png) center top no-repeat; width: 100%; height: auto; font-size: 18px; padding: 18px 0 25px; background-size: contain;}

/* ------------------------------------------------------------ fv */

#fv { background: url(../images/reason/fv_sp.jpg) no-repeat center center; background-size: cover; padding: 50px 0 95px;}
#fv img { width: 50%; }

#reason { padding: 0 0 30px;}

/* ------------------------------------------------------------ reasontitle */

#reasontitle { background: none; padding: 0 0 30px; }
#reasontitle img { width: 100%; height: auto; padding: 0 0 15px; }
#reasontitle h2 { font-size: 16px; color: #000; text-align: center; letter-spacing: 2px;}


/* ------------------------------------------------------------ reasontop */

#reasontop { background: none; padding: 0 0 40px; }
#reasontop img { width: 100%; height: auto; }
#reasontop h3 { background: none; width: 100%; height: inherit; padding: 10px 0 0; font-size: 16px; line-height: 35px;}


/* ------------------------------------------------------------ reasonwrapper */

#reasonwrapper .title { max-width: 670px; margin: 0 auto; padding: 0 0 5px; text-align: center; }
#reasonwrapper h3 { background: url(../images/reason/text_00.png) no-repeat left center; background-size: 70px; padding: 20px 0 20px 90px; font-size: 14px; line-height: 200%; }
#reasonwrapper h3 span { font-size: 20px; }
#reasonwrapper .inner { padding: 15px 0 0; }
#reasonwrapper .box,
#reasonwrapper .box2 { padding: 0 0 20px; }
#reasonwrapper .box ul { width: 100%; height: auto; float: none; margin: 0 auto 20px; padding: 10px 3%; }
#reasonwrapper .box2 ul { width: 100%; height: auto; float: none; margin: 0 auto 20px; padding: 10px 3%; }
#reasonwrapper .box img, 
#reasonwrapper .box2 img { float: none; width: 100%; height: auto; padding: 0 0 20px; }
#reasonwrapper .box ul li,
#reasonwrapper .box2 ul li { background: url(../images/reason/icn_00_sp.png) no-repeat left 5px; background-size: 15px; padding: 0 0 10px 28px; }
#reasonwrapper .box2 ul li.tworows { background: url(../images/reason/icn_00_sp.png) no-repeat left 6px; background-size: 15px; padding: 0 0 10px 28px; }

/* ------------------------------------------------------------ myhome */

#myhome a { background: url(../images/reason/icn_02.gif) no-repeat 245px center #c20303; width: 270px; padding: 15px 0; }

/* ------------------------------------------------------------ housingloan */

#housingloan { padding: 80px 0 0; }
#housingloan a { background: url(../images/reason/icn_02.gif) no-repeat 245px center #c20303; width: 270px; padding: 15px 0; }

/* ------------------------------------------------------------ housingconsultation */

#housingconsultation { padding: 80px 0 0; }
#housingconsultation .btnarea { width: 100%; }
#housingconsultation a { background: url(../images/reason/icn_02.gif) no-repeat 245px center #c20303; width: 270px; margin: 0 auto 15px; padding: 15px 0; float: none; }
#housingconsultation a.btn { margin: 0 auto; }

/* ------------------------------------------------------------ afterfollow */

#afterfollow { padding: 80px 0 0 0; }

/* ------------------------------------------------------------ store */

#store { padding: 40px 0 0; }

/* ------------------------------------------------------------ event */

#event { background: #c20303; padding: 3%;}
#event img { float: none; width: 100%; height: auto;}
#event .box { background: #c20303; float: none; width: 100%; text-align: center; color: #fff; height: auto; margin: 10px 0;}
#event h4.size_01 { color: #fff; margin: 10px 0 0;}
#event h4.size_01 span { font-size: 14px; display: block;}
#event p.btn { margin: 10px auto 0; color: #c20303; background: url(../images/index/arw.png) 97% center no-repeat #fff; width: 200px; height: 25px; line-height: 25px; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; background-size: 4px auto;}



}