@charset "utf-8";

/* ■■■メインイメージ■■■*/

#header-bg {
background: url(../images/ttl_bg.jpg) center 0 no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 400px;
}

#header-bg h2 {
padding: 200px 18px 0;
}

h2 {
color: #333;
font-size: 50px;
text-align: center;
font-family: 'Noto Serif JP', serif;
line-height: 120%;
font-weight: normal;
}

/* max-width: 768px
* * * * * * * * * * * * * * * * * * * * */

@media only screen and (max-width: 768px){

#header-bg h2 {
padding: 140px 18px 0;
}


}
/* max-width: 768px @end */




/* ■■■メニュー■■■*/
#menuArea {
margin: 40px auto;
width: 1140px;
}

#menuArea li {
border:  solid 1px #d2d75d;
border-radius:10px; 
padding: 24px;
font-size: 16px;
width: 49%;
float: left;
}

#menuArea li a {
text-decoration: none;
}

.menu01 {
  position: relative; /* 三角の位置を固定するために設定 */
  width: 300px; /* 幅 */
  margin: 0 auto 40px; /* 上 左右 下のマージン */
  padding: 20px; /* ふきだし内の余白 */
  background: #fff; /* 背景色 */
  border: 1px solid #d2d75d; /* 線色 */
  text-align: center; /* テキストの揃え */
}
.menu01::before,
.menu01::after { /* 三角 */
  content: '';
  border: 14px solid transparent;
  position: absolute;
  left: 50%;
  margin-left: -14px;
}
.menu01::before { /* 線になる部分 */
  border-top-color: #d2d75d; /* 吹き出しの線の色と同じ色 */
  bottom: -28px;
}
.menu01::after { /* 地の部分 */
  border-top-color: #fff; /* 吹き出しの背景色と同じ色 */
  bottom: -27px;
}

#menuArea li.menu02 {
background-color: #f8facb;
margin-left: 20px;
}

#menuArea li.menu03 {
background-color: #f8facb;
margin-right: 20px;
}




/* max-width: 768px
* * * * * * * * * * * * * * * * * * * * */

@media only screen and (max-width: 768px){

#menuArea {
width: 100%;
padding: 0 16px;
}
    
#menuArea li {
float: none;
}
    
#menuArea li {
width: 100%;
}

#menuArea li.menu02 {
margin: 20px 0 0 0;
}
    
#menuArea li.menu03 {
margin: 0 0 20px 0;
}


}
/* max-width: 768px @end */





/* ■■■コンテンツエリア■■■*/
#contentsArea01{
background: url(../../common/images/back_top_gr.svg) no-repeat center top;
overflow: hidden;
margin-top: 20px;
}

h4 {
margin-top: 100px;
color: #fff;
background-color: #abd37d;
font-size: 24px;
padding: 20px;
text-align: center;
font-family: 'Noto Serif JP', serif;
}

h4 span{
font-size: 18px;    
}

.bg_green{
margin-top: 54px;
background-color: #e9fce9;
padding: 40px 0 140px 0;
}

.contentsAreaL{
float: left;
width: 48%;
padding-top: 60px;
}

.contentsAreaR{
float: right;
width: 48%;
padding-top: 60px;
}

.tel{
font-size: 60px;
font-family: 'Crimson Text', serif;
line-height: 1;
}

.bt01 {
width: 340px;
text-align: center;
}

.case_txt{
text-align: center;
}



/* max-width: 768px
* * * * * * * * * * * * * * * * * * * * */

@media only screen and (max-width: 768px){
#contentsArea01{
margin-top: 0;
}
 
.contentsAreaL{
float: none;
width: 100%;
padding-top: 20px;
margin-top: 40px;
}

.contentsAreaR{
float: none;
width: 100%;
padding-top: 40px;
}


}
/* max-width: 768px @end */



/* ■■■健康保険など■■■*/
.bg_green{
margin-top: 54px;
background-color: #e9fce9;
padding: 40px 0 140px 0;
}

.kenAreaL{
float: left;
width: 32%;
padding-top: 40px;
}

.kenAreaL_1{
float: left;
width: 32%;
padding-top: 40px;
margin: 0 2%;
}

.kenAreaR{
float: right;
width: 32%;
padding-top: 40px;
}

.f01{
font-size: 18px;
color: #6fa333;
margin-top: 10px;
}

#kenArea2{
margin-top: 40px;
padding: 30px;
background-color: #fff;
border: solid 3px #abd37d;
}

h5{
margin: 80px 0 24px;
font-size: 24px;
padding: 20px;
text-align: center;
font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif;
border-bottom: solid 1px #4cb9b7;
border-top:  solid 1px #4cb9b7;
}

#kenArea3{
margin-top: 40px;
padding: 30px;
background-color: #fff;
}

#kenArea3 img{
width: 80px;
}


.caseTl{
color: #009b99;
text-align: center;
font-size: 18px;
}

.f02{
color: #fff;
text-align: center;
font-size: 16px;
background-color: #4cb9b7;
border-radius:100px; 
padding: 2px;
width: 200px;
margin: 0 auto;
}

#kenArea4{
margin-top: 30px;
padding: 16px;
background-color: #fcfce2;
}

.kenAreaL2{
float: left;
width: 48%;
}

.kenAreaL2 img{
width: 70%;
margin: 20px 0;
}


.kenAreaR2{
float: right;
width: 48%;
}

.kenAreaR2 img{
width: 70%;
margin: 20px 0;
}

.kenAreaL3{
float: left;
width: 40%;
}

.kenAreaR3{
float: right;
width: 55%;
}

.sub_menu{
color: #6fa333;
}

.sub_menu a{
color: #6fa333;
text-decoration:underline;
}

.sub_menu a:hover{
color: #6fa333;
text-decoration:none;
}


/* max-width: 768px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 768px){
    
.bg_green{
padding: 40px 0 80px 0;
}

.kenAreaL{
float: none;
width: 100%;
padding-top: 30px;
}

.kenAreaL_1{
float: none;
width: 100%;
padding-top: 30px;
}

.kenAreaR{
float: none;
width: 100%;
padding-top: 30px;
}
  
.kenAreaL img{
width: 75%;
}

.kenAreaL_1 img{
width: 75%;
}
    
.kenAreaR img{
width: 75%;
}
    
#kenArea2{
margin-top: 20px;
padding: 16px;
}
    
#kenArea3 img{
width: 20%;
}
    
#kenArea3{
margin-top: 20px;
padding: 16px;
}
    
.kenAreaL2{
float: none;
width: 100%;
}

.kenAreaR2{
float: none;
width: 100%;
}
    
.img80{
width: 80%;
margin: 0 auto;
}

.kenAreaL3{
float: none;
width: 100%;
}

.kenAreaR3{
float: none;
width: 100%;
}
  
.kenAreaL3 img{
width: 90%;
}
  
.kenAreaR3 img{
width: 75%;
}
    
.case_txt{
text-align: left;
}

}
/* max-width: 768px @end */