@charset "UTF-8";

#content{
position:relative;
margin-top:0;
padding-top:0;
}

.top-title{
text-align:center;
}



/* シェア＆カウンター
--------------------------------------------------*/ 
#share-counter-outer{
position:relative;
min-height:60px;
background-color:#F3F6E1;
padding-top:5px;
}

#share-counter{
clear:left;
max-width:900px;
margin:0 auto 1em;	
}

/* sns
-----------------------------------------------*/
.sns-col{
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 0.5em;
padding:0 10px 5px;
line-height:20px;
}

.sns-btn{
margin:0 6px;
line-height:0;
}



/* カウンター
------------------------------- */
#counter{
width:280px;
margin:0.5em auto;
text-align:center;
font-size:100%;
}

#counter span{
padding:0 5px;
color:#674D3A;
font-weight:700;
}

#counter li{
display:inline-block;
vertical-align:middle;
margin-left:10px;
}




/*------------------------コンテンツ---------------------------*/

#content-main{
padding-top:0;
}

#content-main h2{
position:relative;
margin:0 0 10px;
padding:5px 10px;
color:#333 ;
font-size:120%;
font-weight:normal;
letter-spacing:1px;
text-align:center;
}

.catch-area{
border:#F19B3D solid 4px;
}

.catch01{
padding:0.5em 1em;
font-size:140%;
background-color:#CC3300;
color:#FFF;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}

.catch-area-p{
margin:10px 0;
}

.catch-area-p img.w01{
float:right;
max-width:40%;
height:auto:
}

.catch-area-p img.w02{
float:left;
max-width:30%;
height:auto:
}

.catch02{
padding:0.5em 1em;
font-size:180%;
background-color:#F19B3D;
color:#FFF;	
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}



main p{
text-align:left;
line-height:1.5;
font-size:120% !important;
}

#content-main section{
margin:1em auto;
padding:1em;
text-align:center;
}



/* 身元保証代行の現状　
　 中部シルバーライフ協会の取り組み
----------------------------------------------- */

#present-condition{
background-color:#F2AE53;
border:#F90 solid 1px;
margin-bottom:1em;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}

#our-association{
background-color:#8EBA7E;
border:#696 solid 1px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;	
}

#present-condition h2,
#our-association h2{
font-size:160% !important;
margin:0 !important;
padding:0;

}

#present-condition h2 a,
#our-association h2 a{
display:block;
margin:0 !important;
padding:5px;
text-decoration:none;
color:#000;
background-color:rgba(255,255,255,0.3);
-webkit-border-radius:4px 4px 0 0 / 4px 4px 0 0;
-moz-border-radius:4px 4px 0 0 / 4px 4px 0 0;
border-radius:4px 4px 0 0 / 4px 4px 0 0;
}

#present-condition h2 a:hover,
#our-association h2 a:hover{
text-decoration:underline;
background-color:rgba(255,255,255,0);
}


#present-condition h2 a:after,
#our-association h2 a:after{
display:inline-block;
font-family:FontAwesome;
font-style:normal;
font-weight:normal;
font-size:100%;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
content:"\f0a4";
margin-left:10px;
}

#present-condition h2 a:after{
color:#CC0000;
}

#our-association h2 a:after{
color:#336633;
}



#present-condition ol,
#our-association ol{
padding:1em 1em 1em 2em;
text-align:left;
list-style-type:decimal;
font-size:120%;
background-color:rgba(255,255,255,0.9);
}

#present-condition ol li,
#our-association ol li{
margin-bottom:0.8em;
}

#present-condition ol li a,
#our-association ol li a{
text-decoration:none;
}

#present-condition ol li a:hover,
#our-association ol li a:hover{
text-decoration:underline;
}

#present-condition ol li a:after,
#our-association ol li a:after{
display:inline-block;
font-family:FontAwesome;
font-style:normal;
font-weight:normal;
font-size:100%;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
content:"\f0a4";
margin-left:10px;
}

#present-condition ol li a:after{
color:#CC0000;
}

#our-association ol li a:after{
color:#339933;
}




/* こんな時にご相談ください
   私たちが選ばれる４つの理由
----------------------------------------------- */
.point-cont h2{
color:#422 !important;
font-size:140% !important;
font-weight:700 !important;
border:#422 solid 1px;
background-color:rgba(255,255,255,0.8);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.point-cont ul{
max-width:960px;
margin:auto;
padding:20px;
text-align:left;
background-color:rgba(255,255,255,0.6);
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
}

.point-cont ul li{
font-size:120%;
font-weight:normal;
line-height:1.6;

margin-left:0.8em;
text-indent:-0.8em;
}

.point-cont ul li span{
color:#482424;
font-weight:700;
}

.point-cont ul li:before{
display:inline-block;
margin:0 0.2em;
font-family:FontAwesome;
font-style:normal;
font-weight:normal;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
content:"\f14a";
color:#8CC349;
}

.point{
margin:1em auto;
}

.point-cont{
margin:1em 0;
padding:1em;
border:#654A3D solid 1px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}

.case{
background-color:#F2EBD9;
}

.point-cont.case ul li:before{
color:#CC6633;
}


.reason{
background-color:#EBF0DD;
}

.point-cont.reason ul li:before{
color:#8CC349;
}



/* .reason-btn
------------------------------------- */
.reason-btn{
max-width:300px;
margin:20px auto 10px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
text-align:center;
}

.reason-btn a{
display:block;
padding:10px 0;
text-decoration:none;
color:#FFF;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
background-color:#417535;
}

.reason-btn a span{
margin:0 5px;
}

.reason-btn a span:after{
content:"\f061";
font-family:FontAwesome;
font-weight:normal;
font-size:120%;
}

.reason-btn a:hover, .reason-btn a:focus {
opacity:0.8;
}



/* プランの説明
----------------------------------------------- */
.service-plan{
margin:0.5em 0;
padding:0.5em 0;
background-color:#FFF;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}

.service-plan-cont{
margin:2em 0.5em;
}

.service-plan-cont img{
width:80%;
margin-bottom:0.2em;
height:auto;
}

.service-plan-cont.p01 h3{
color:#CC6633;
border-top:#CC6633 solid 3px;
border-bottom-color:#CC6633 !important;
padding:0.2em 0 !important;
}

.service-plan-cont.p02 h3{
color:#8CC349;
border-top:#8CC349 solid 3px;
border-bottom-color:#8CC349 !important;
padding:0.2em 0 !important;
}



/* .plan-btn
------------------------------------- */
.plan-btn{
max-width:300px;
margin:0 auto 10px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
text-align:center;
}

.plan-btn a{
display:block;
padding:10px 0;
text-decoration:none;
color:#FFF;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
}

.service-plan .p01 .plan-btn a{
background-color:#C05320 !important;
}

.service-plan .p02 .plan-btn a{
background-color:#AB913F !important;
}


.plan-btn a span{
margin:0 5px;
}

.plan-btn a span:after{
content:"\f061";
font-family:FontAwesome;
font-weight:normal;
font-size:120%;
}

.plan-btn a:hover, .plan-btn a:focus {
opacity:0.8;
}


/* プラン一覧
------------------------------------- */

table.po{
width:96%;
margin:0 auto 1em;
text-align:left;
border:1px solid #542929;
border-collapse: collapse;
}

table.po caption{
font-weight:700;
color:#FFF;
background-color:#542929;
}

table.po th,
table.po td{
padding:5px;
border:1px dashed #C5B9A3;
text-align:center;
font-size:90%;
font-weight:700;
background-color:#F9F4EE;
}

table.po td{
font-weight:normal;
background-color:#FFF;
width:15%;
}

table.po td.title-td{
background-color:#FFFAF4;
font-weight:700;
color:#542929;
text-align:left;
width:30%;
}



/* 中部シルバーライフ協会の概要
----------------------------------------------- */

main p{
text-align:left;
line-height:1.5;
font-size:120% !important;
}

#content-main section{
margin:1em auto;
padding:1em;
text-align:center;
}

#content-main .facility h1{
padding:0.5em;
font-size:4vw;
background-color:#F19B3D;
background-image:none;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
color:#FFF;
text-align:center;
}

.facility .img-col{
max-width:60%;
height:auto;
margin:1em auto;
}

.facility-cont{
max-width:800px;
margin:1em auto;	
}

.location{
margin:1.5em auto;
padding:0;
text-align:left;
border:#BBB dashed 1px;
background-color:#FFF;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
background-color:#F4FBF5;
}

.location li{
font-size:120%;
margin:0.5em;
margin-left:2em;
text-indent:-0.6em;
}

.location li:before{
display:inline-block;
margin:0 0.2em;
font-family:FontAwesome;
font-style:normal;
font-weight:normal;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
content:"\f041";
color:#8CC349;
}

/* #top-contact
----------------------------------------------- */
#top-contact{
margin:0 auto 1em;
padding:0.5em 0;
background-color:#72694F;
color:#FFF;
font-weight:700;
font-size:5vw;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}

#top-contact a{
color:#FF0;
}

#top-contact dt{
color:#FEC353;
border-bottom:#FFFFFF solid 1px;
padding-bottom:0.3em;
margin-bottom:0.5em;
}

#top-contact dd{
font-size:90%;
}

#top-contact span{
color:#FFC;
}

#top-contact i{
color:#FC0;
}


/* 代表者メッセージ
----------------------------------------------- */
.representative{
margin:1em auto;
padding:1em;
background-color:#FDFBEC;
border:#552B2B solid 2px;
}

.representative h2{
margin:0 auto 1em;
color:#552B2B !important;
font-size:140% !important;
font-weight:700 !important;
}

.message{
margin-bottom:1em;
padding:1em;
background-color:#FFF;
border:#999999 solid 1px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}

.img-col img{
max-width:140px;
height:auto;
}

ul.prof{
margin:1em;
padding-top:1em;
padding-bottom:1em;
font-size:100%;
text-align:center;
font-weight:700;
border-top:#CCC solid 1px;
border-bottom:#CCC solid 1px;
background-color:#F8F8F8;
}


ul.oka-style{
margin:1em 1em;
padding:1em;
font-size:100%;
text-align:left;
border:#999999 solid 1px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}

ul.oka-style li{
margin-left:2.5em;
margin-bottom:1em;
text-indent:-2.5em;
}




@media all and (min-width:700px) {

#top-cont{
position:relative;
}

#gnav-base-top{
position:absolute;
left:0;
top:0;
z-index:9000;
}



/* シェア＆カウンター
--------------------------------------------------*/ 
#main-visual{
margin:0 auto;
}


#share-counter{
position:relative;
max-width:1000px;
margin-top:60px;
margin-bottom:0;
}


/*シェアボタン
--------------------------------*/
#share{
position:absolute;
right:0;
}

/* sns
-----------------------------------------------*/
.sns-col{
margin:0.5em auto;
}

/* カウンター
--------------------------------------------------*/ 
#counter{
position:absolute;
left:0;	
}

 

/* コンテンツ
--------------------------------------------------*/

#content-main{
padding-top:2em;
}

.catch-area-p img.w01{
float:right;
max-width:20%;
height:auto:
}

.catch-area-p img.w02{
float:left;
max-width:15%;
height:auto:
}

#content-main .facility h1{
padding:0.5em;
font-size:26px;
align-item:center;
text-align:center;
}



.facility .img-col{
float:right;
margin-top:0;
max-width:24%;
height:auto;
}

#top-contact{
padding:0.5em 0;
font-size:24px;
}


/* プランの説明
----------------------------------------------- */
.service-plan{
display:flex;
margin:0.5em 0;
padding:0.5em 0;
}

.service-plan-cont{
margin:1em 0.5em;
}
.service-plan-cont{
position:relative;
flex:1;
padding-bottom:60px;
}

.service-plan-cont p{
line-height:1.5;
margin:0 2em;
}

.plan-btn{
position:absolute;
left:0;
right:0;
bottom:0;
}

.plan-btn a{
width:300px;
margin:0 auto;
}


/* .reason-btn
------------------------------------- */
.reason-btn{
max-width:400px;
}

/* 代表者メッセージ
----------------------------------------------- */
.message .img-col{
float:left;
margin:0 1em 1em 0;
max-width:24%;
height:auto;
}

ul.prof{
margin-top:0;
text-align:left;
}

}



@media all and (min-width:900px) {
.point-cont ul li{
font-size:20px;
}



@media all and (min-width:1200px) {





}