@import url('https://fonts.googleapis.com/css?family=Kosugi+Maru|Lobster&display=swap'); 

body,p{
    font-family: 'Kosugi Maru', "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif; 
}
/* DAE000 #9BC42C */
/* kosugi maru */

#wrapper,
.service_container{
    width: 100%;
    max-width: 1500px;
    margin:0 auto;
}

#service_sec,
.covid19_sec{
    width: 85%;
    margin:0 auto;
    padding-top: 150px;
}
#single_sec{
  width: 85%;
  margin:0 auto;
}
.covid_content_top,
.service_content_top,
.withlife_content_top,
.price_content_top,
.map_content_top,
.news_content_top{
    margin:30px 0;
}

.price_content_top{
    display: flex;
    width: 100%;
    justify-content: center;
    /* padding: 50px; */
    background:#f5f5ec;
    border-radius: 20px;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}

.withlife_content_top{
  display: flex;
}

.map_content_top{
  display:flex;
  justify-content: space-between;
}

footer{
    background: #9BC42C;
    margin-top:150px;
    padding:10px 50px 30px;
    display: flex;
    justify-content: space-around;
}

/* ==== font ====== */
h3,p,li,span,a{
    font-size: 1.2rem;
}
.heading08,
.heading14{
	font-size: 1.8rem;
}

/* =============== */
/* === ボタン ===== */
/* ================ */

.btn03{
    /*影の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
  text-decoration: none;
  display: inline-block;
  
    text-align: center;
    background: transparent;
  border-radius: 25px;
  border: solid 1px #333;
    outline: none;
    /*アニメーションの指定*/
    transition: all 0.2s ease;
    
    display: block;
    width: 50%;
    margin: 0 auto;
}

/*hoverをした後のボタンの形状*/
.btn03:hover{
  border-color:transparent; 
}

/*ボタンの中のテキスト*/
.btn03 span {
  position: relative;
  z-index: 2;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
    /*テキストの形状*/
  display: block;
    padding: 10px 30px;
  background:rgba(63,193,201,1);
  border-radius: 25px;
  color:#fff;
    /*アニメーションの指定*/
    transition: all 0.3s ease;
}

/*== 右下に押し込まれる（立体が平面に） */

/*影の設定*/
.pushright:before {
    content: "";
    /*絶対配置で影の位置を決める*/
    position: absolute;
  z-index: -1;
    top: 4px;
    left: 4px;
    /*影の形状*/
    width: 100%;
    height: 100%;
  border-radius: 25px;
    background-color: rgba(51, 51, 51, 0.3);
}

/*hoverの際にX・Y軸に4pxずらす*/
.pushright:hover span {
  background-color: rgba(63,193,201,0.3);
  color: #fff;
  transform: translate(4px, 4px);
}


/* ============================================================== */
/* ==============  2021タプレット 800-959px   ==================== */
/* ============================================================== */
@media screen and (max-width:959px){
  #wrapper{
    margin-top:50px;
  }
  .service_explan_top{
		flex-direction: column;
  }
  .withlife_content_top{
    flex-direction: column-reverse;
  }
  .btn03{
    width: 100%;
  }
  /* === フォント === */
  h3,p,li,span,a{
    font-size: 1.0rem;
  }
  .heading08,
  .heading14{
    font-size: 1.4rem;
  }
  .g_icon span{
    display: none;
  }
  #single_sec{
    margin:50px auto 0;
  }
}
/* ============================================================== */
/* ==============  2021タプレット 520-799px   ==================== */
/* ============================================================== */

@media screen and (max-width:799px){
  .price_content_top{
   flex-direction: column;
  }
  #wrapper{
    margin-top:0px;
  }
 

}

/* ============================================================== */
/* ==============  2021スマホ     320-519px   ==================== */
/* ============================================================== */
@media screen and (max-width:600px){
  #service_sec,
  .covid19_sec{
      width: 95%;
      padding-top: 100px;
  }
  .service_content_top{
    margin:0;
  }
}