@charset "utf-8";
/* ===================================================================
CSS topページ

file name  :top.css
style info  :トップページ設定
=================================================================== */

/*--------------------------------------------------------------------
基本設定
--------------------------------------------------------------------*/

#con_01{
margin: 20px 0 20px 0;
position: relative;
background:url(/assets/images/tit_img.jpg) no-repeat;
height: 270px;
}

#con_01 #img_01{
position: absolute;
top: 40px;
left: 20px;
margin: 0 20px 0 0;
}

#con_01 #img_02{
position: absolute;
top: 10px;
right: 10px;
}

#con_01 #img_03{
position: absolute;
bottom: 10px;
right: 10px;
background: #ffffff;
}

#con_02{
border: 1px solid #CC7EB1;
background: url(/assets/images/bg_concept.jpg) top right no-repeat;
overflow: hidden;
margin: 0 0 20px 0;
}

#con_02 h3{
margin: 20px 0 10px;;
}

#con_02 .left_box p{
margin: 10px 0 10px 20px;
width: 500px;
float: left;
}

#con_02 .right_box p{
float: right;
margin: 5px 30px 0 0;
}

#con_03{
margin: 0 0 20px 0;
background: #dbdae8;
text-align: center;
padding: 0 0 10px 30px;
overflow: hidden;
}

#con_03 h3{
padding: 15px 0 15px 10px;
text-align: left;
}

#con_03 .plan_box{
width: 440px;
min-height: 250px;
background: #ffffff;
border-radius: 5px;        /* CSS3草案 */  
-webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
-moz-border-radius: 5px;   /* Firefox用 */
float: left;
text-align: left;
margin: 0 10px 10px  0;
position: relative;
}

#con_03 .plan_box h4{
margin: 10px 20px;
font-size: 1.5em;
}

#con_03 .plan_box h4 p{
float: right;
color: #ac1d22;
font-size: 1.2em;
}

#con_03 .plan_box h4 p span{
color: #484848;
font-size: 0.6em;
font-weight: normal;
}

#con_03 .plan_box p img{
margin: 0 0 0 10px;
}

#con_03 .plan_box p.read_text{
width: 200px;
font-size: 0.9em;
margin: 20px 0 40px 20px;

}

#con_03 .plan_box p.btn_syousai{
position: absolute;
bottom: 12px;
right: 12px;
background: #ffffff;
}

#con_03 .plan_box p.btn_syousai img{
	margin: 0;
}

#con_03 .plan_01{background: url(/assets/images/img_plan_01.jpg) right bottom no-repeat #ffffff;}
#con_03 .plan_02{background: url(/assets/images/img_plan_02.jpg) right bottom no-repeat #ffffff;}
#con_03 .plan_03{background: url(/assets/images/img_plan_03.jpg) right bottom no-repeat #ffffff;}
#con_03 .plan_04{background: url(/assets/images/img_plan_04.jpg) right bottom no-repeat #ffffff;}

#con_04{
margin: 0 0 20px 0;
}

#con_04 .map_box{
overflow: hidden;
padding: 10px;
border-right: 1px solid #BCBCBC;
border-bottom: 1px solid #BCBCBC;
border-left: 1px solid #BCBCBC;
}

#gmapBox {
float: left;
width: 600px;
height: 248px;
border: 1px solid #BCBCBC;
}

#con_04 .shikizyou{
float: right;
text-align: center;
margin: 0 10px 0 0;
}

#con_04 .shikizyou h4{
margin: 0 0 8px 0;
}

#con_04 .shikizyou ul{
margin: 0 0 5px 0;
}

#con_04 .shikizyou li{
margin: 0 0 6px 0;
}

#con_05{
margin: 0 0 20px 0;
overflow: hidden;
}

#con_05 #free{
width: 735px;
float: left;
}

#con_05 #free h3{
margin: 0 0 10px 0;
}

#con_05 #free h4.setsumei{
color: #5F5D9A;
margin: 0 0 10px 0;
}

#con_05 #syousai_box{
overflow: hidden;
margin: 20px 0;
display:flex;
}

#con_05 #syousai_box .base_box{
width: 235px;
margin: 0 10px 0 0;
border: 2px solid #d7d7d7;
padding: 10px 10px 60px;
position: relative;
}

#con_05 #syousai_box .base_box h4{
margin: 0 0 5px 0;
}

#con_05 #syousai_box .base_box p.btm_image{
position: absolute;
bottom: 5px;
}

#con_05 #syousai_box .base_box p span{
color: #AC7A00;
}

#con_05 #free p{
margin: 0 0 5px 0;
}

#con_05 #side_column{
float: right;
width: 200px;
background: #efefef;
padding: 6px;
}

#con_05 #side_column h3{
color: #4B6800;
margin: 0 0 5px 0;
}

#con_05 #side_column #voice{
background: #ffffff;
border: 1px solid #ded8d0;
margin: 0 0 10px 0;
}
#con_05 #side_column .voice_box{
border-bottom: 1px dotted #000000;
margin: 10px;
font-size: 0.9em;
padding: 0 0 10px 0;
}

#con_05 #side_column .voice_box:last-child {
border-bottom: none;
padding: 0 0 0 0;
}

#con_05 #side_column .voice_box p.day{
text-align: right;
margin: 5px 0 0 0;
}

#con_05 #side_column #banner{
background: #ffffff;
border: 1px solid #ded8d0;
padding: 10px 0;
text-align: center;
}

#con_05 #side_column #banner li{
margin: 0 0 5px 0;
}

#con_05 #side_column #banner li:last-child{
margin: 0 0 0 0;
}


/*--------------------------------------------------------------------
スマートフォン＆タブレット対応
--------------------------------------------------------------------*/
/*デバイスの横幅が960pxpx以下の場合*/
@media only screen and (max-width: 960px) {

#con_02 .left_box p {
margin: 10px 20px 10px 20px;
width: auto;
float: none;
}

#con_02 .right_box p {
float: none;
text-align: center;
margin: 5px auto 5px;
max-width: 394px;
}

#con_02 .right_box p img{
width: 100%;
}

#con_03 {
margin: 0 0 20px 0;
background: #dbdae8;
text-align: center;
padding: 0 10px 10px 10px;
overflow: hidden;
}

#con_03 .plan_box {
width: 100%;
}

#con_03 .plan_01,
#con_03 .plan_02,
#con_03 .plan_03,
#con_03 .plan_04 {
background-size:contain;
}

#con_04 {
margin: 0 10px 20px 10px;
}

#con_04 h3 img{
width: 100%
}

#gmapBox {
float: none;
width: 100%;
margin: 0 0 10px 0;
}

#con_04 .shikizyou {
float: none;
text-align: center;
margin: 0 10px 0 0;
}

#con_05 #free {
width: auto;
float: none;
margin: 0 20px;
}

#con_05 #side_column {
float: none;
width: auto;
background: #efefef;
padding: 6px;
}

#con_04 h3{
font-size: 1.2em;
line-height: 1.2em;
}
#con_04 h3 span{
font-weight: normal;
font-size: 0.5em;
}

#con_04 .map_box {
overflow: hidden;
padding: 10px;
border-right: none;
border-bottom: none;
border-left: none;
}







}

/* デバイスの横幅が768以下の場合 */
@media only screen and (max-width: 768px) {

#con_01 {
background: url(/assets/images/tit_img.jpg) no-repeat top center;
height: 270px;
}

#con_01 #img_01 img{
width: 100%;
}

#con_01 #img_02 {
top: auto;
right:auto;
left: 20px;
bottom: 10px;
}

#con_01 #img_02 img{
width: 160px;
}

#con_01 #img_03 {
bottom: 25px;
right: 20px;
}
#con_01 #img_03 img{
height: 60px;
}

#con_02 {
margin: 0 10px 20px 10px;
}

#con_02 h3 img{
width: 100%;
}

#con_05 #syousai_box {
overflow: hidden;
margin: 20px 0;
display: block;
}
#con_05 #syousai_box .base_box {
width: auto;
margin: 0 10px 10px 0;
border: 2px solid #d7d7d7;
padding: 10px 10px 10px;
position: static;
}

#con_05 #syousai_box .base_box p.btm_image {
position: static;
text-align: center;
bottom: auto;
}

#wrap-btm footer ul#fm {
margin: 20px 0 0 20px;
float: none;
}

#wrap-btm footer p#copyright {
float: none;
text-align: center;
}

#con_03 .plan_box p.btn_syousai {
bottom: 8px;
right: 8px;
}




























}