@charset "utf-8";

/*==============================================
basic04 style
==============================================*/

/*#intro-area*/
#basic-04 #content #intro-area{
margin-bottom:29px;
padding-top:25px;
width:948px;
}

#basic-04 #content #intro-area h2{
height:136px;
margin:0 auto 5px auto;
width:862px;
}

#basic-04 #content #intro-area p{
line-height:1.69;
margin-bottom:20px;
text-align:center;
}

#basic-04 #content #intro-area ul.talk-area{
height:330px;
margin-left:103px;
position:relative;
width:760px;
}

#basic-04 #content #intro-area ul.talk-area li.yuko{
height:306px;
left:0;
position:absolute;
top:24px;
width:223px;
}

#basic-04 #content #intro-area ul.talk-area li.takashi{
height:321px;
left:233px;
position:absolute;
top:9px;
width:214px;
}

#basic-04 #content #intro-area ul.talk-area li.sakai{
height:330px;
right:0;
position:absolute;
top:0;
width:283px;
}

/*topic01-area*/
#basic-04 #content .topicboxA .txtbox01{
clear:both;
padding-top:10px;
width:346px;
}

#basic-04 #content .topicboxA .txtbox02{
padding-left:40px;
padding-top:10px;
width:346px;
}

#basic-04 #content .topicboxA #topic01-type03,
#basic-04 #content .topicboxA #topic01-type04{
padding-bottom:8px;
}

#basic-04 #content .topicboxA .txtbox01 h4,
#basic-04 #content .topicboxA .txtbox02 h4{
height:45px;
margin-bottom:18px;
width:346px;
}

#basic-04 #content .topicboxA .txtbox01 p,
#basic-04 #content .topicboxA .txtbox02 p{
line-height:1.84;
margin-bottom:1.4em;
}

#basic-04 #content .topicboxA #topic01-type01 p span,
#basic-04 #content .topicboxA #topic01-type04 p span{
background-color:#ffd9dc;
}

#basic-04 #content .topicboxA #topic01-type02 p span,
#basic-04 #content .topicboxA #topic01-type03 p span{
background-color:#e3f5ba;
}

#basic-04 #content .topicboxA .txtbox01 ul.listboxA,
#basic-04 #content .topicboxA .txtbox01 ul.listboxB,
#basic-04 #content .topicboxA .txtbox02 ul.listboxA,
#basic-04 #content .topicboxA .txtbox02 ul.listboxB{
margin-bottom:15px;
overflow:hidden;
padding:20px 15px 15px 25px;
width:304px;
}

#basic-04 #content .topicboxA .txtbox01 ul.listboxA li,
#basic-04 #content .topicboxA .txtbox01 ul.listboxB li,
#basic-04 #content .topicboxA .txtbox02 ul.listboxA li,
#basic-04 #content .topicboxA .txtbox02 ul.listboxB li{
display:block;
font-size:107%;
float:left;
}

#basic-04 #content .topicboxA #topic01-type01 ul li.list01,
#basic-04 #content .topicboxA #topic01-type01 ul li.list03,
#basic-04 #content .topicboxA #topic01-type01 ul li.list05,
#basic-04 #content .topicboxA #topic01-type01 ul li.list07{
width:150px;
}
#basic-04 #content .topicboxA #topic01-type01 ul li.list02,
#basic-04 #content .topicboxA #topic01-type01 ul li.list04,
#basic-04 #content .topicboxA #topic01-type01 ul li.list06{
width:108px;
}

#basic-04 #content .topicboxA #topic01-type02 ul li.list01,
#basic-04 #content .topicboxA #topic01-type02 ul li.list03,
#basic-04 #content .topicboxA #topic01-type02 ul li.list05{
width:110px;
}
#basic-04 #content .topicboxA #topic01-type02 ul li.list02,
#basic-04 #content .topicboxA #topic01-type02 ul li.list04,
#basic-04 #content .topicboxA #topic01-type02 ul li.list06{
width:150px;
}

#basic-04 #content .topicboxA #topic01-type03 ul li{
width:304px;
}

#basic-04 #content .topicboxA #topic01-type04 ul li.list01,
#basic-04 #content .topicboxA #topic01-type04 ul li.list03{
width:150px;
}
#basic-04 #content .topicboxA #topic01-type04 ul li.list02,
#basic-04 #content .topicboxA #topic01-type04 ul li.list04{
width:108px;
}
#basic-04 #content .topicboxA #topic01-type04 ul li.list05{
width:280px;
}

#basic-04 #content #topic01-area .talk-area{
height:230px;
}

#basic-04 #content #topic01-area .talk-area li.couple{
height:230px;
left:0;
position:absolute;
top:0;
}

#basic-04 #content #topic01-area .btn-otherpage01,
#basic-04 #content #topic01-area .btn-otherpage02,
#basic-04 #content #topic01-area .btn-otherpage03,
#basic-04 #content #topic01-area .btn-otherpage04{
height:37px;
margin-bottom:37px;
position:relative;
width:346px;
}

#basic-04 #content #topic01-area .btn-otherpage01 a,
#basic-04 #content #topic01-area .btn-otherpage02 a,
#basic-04 #content #topic01-area .btn-otherpage03 a,
#basic-04 #content #topic01-area .btn-otherpage04 a{
display:block;
height:37px;
overflow:hidden;
position:relative;
text-indent:-9999px;
width:346px;
}

#basic-04 #content #topic01-area .btn-otherpage01 a{
background:url(../04/img/btn_otherpage01.gif) 0 0 no-repeat;
}
#basic-04 #content #topic01-area .btn-otherpage02 a{
background:url(../04/img/btn_otherpage02.gif) 0 0 no-repeat;
}
#basic-04 #content #topic01-area .btn-otherpage03 a{
background:url(../04/img/btn_otherpage03.gif) 0 0 no-repeat;
}
#basic-04 #content #topic01-area .btn-otherpage04 a{
background:url(../04/img/btn_otherpage04.gif) 0 0 no-repeat;
}

#basic-04 #content #topic01-area .btn-otherpage01 a:hover,
#basic-04 #content #topic01-area .btn-otherpage02 a:hover,
#basic-04 #content #topic01-area .btn-otherpage03 a:hover,
#basic-04 #content #topic01-area .btn-otherpage04 a:hover{
background-position:0 -37px;
}

/*topic02-area*/
#basic-04 #content #topic02-area .innerbox{
padding-bottom:5px;
}

#basic-04 #content #topic02-area .txtbox03 ul.listboxC{
margin-bottom:38px;
overflow:hidden;
padding:30px 57px 20px 57px;
width:615px;
}

#basic-04 #content #topic02-area .txtbox03 ul.listboxC li{
float:left;
width:275px;
}

#basic-04 #content #topic02-area .btn-otherpage05{
height:85px;
position:absolute;
left:53px;
top:180px;
width:250px;
}

#basic-04 #content #topic02-area .btn-otherpage05 a{
background:url(../04/img/btn_otherpage05.gif) 0 0 no-repeat;
display:block;
height:85px;
overflow:hidden;
position:relative;
text-indent:-9999px;
width:250px;
}

#basic-04 #content #topic02-area .btn-otherpage05 a:hover{
background-position:0 -85px;
}

#basic-04 #content #topic02-area .btn-otherpage06{
height:110px;
position:absolute;
left:321px;
top:165px;
width:250px;
}

#basic-04 #content #topic02-area .btn-otherpage06 a{
background:url(../04/img/btn_otherpage06.gif) 0 0 no-repeat;
display:block;
height:110px;
overflow:hidden;
position:relative;
text-indent:-9999px;
width:250px;
}

#basic-04 #content #topic02-area .btn-otherpage06 a:hover{
background-position:0 -110px;
}

#basic-04 #content #topic02-area .advice-area {
overflow:hidden;
padding-top:20px;
}

/*epilogue-area*/
#basic-04 #content #epilogue-area h3{
background:url(../04/img/bg_img_epilogue.gif) 0 0 no-repeat;
height:427px;
position:relative;
}

#basic-04 #content #epilogue-area h3 img{
position:relative;
z-index:2;
}

#basic-04 #content #epilogue-area h3 span{
display:inline-block;
left:203px;
position:absolute;
top:100px;
z-index:1;
}

#basic-04 #content #epilogue-area h3 span img{
-ms-interpolation-mode: bicubic;
}

#basic-04 #content #epilogue-area .btn-next{
height:226px;
width:384px;
}

#basic-04 #content #epilogue-area .btn-next a{
background:url(../04/img/btn_next.gif) 0 0 no-repeat;
height:226px;
width:384px;
}

#basic-04 #content #epilogue-area .btn-next a:hover{
background-position:0 -226px;
}

/*btn_scl*/
#basic-04 #content .btn_scl{
margin-top:50px;
}