@charset "utf-8";
/* CSS Document */

/* -----------------------------

  ライフプランニング／service_life_planning.html

----------------------------- */

/*-- navi ハイライト --*/
body#body-service-planning #navi_in ul li.navi_service a {
  text-decoration: none;
  background-color: #72c7cb;
  color: #fff;

  background-image: url(../img/navi_service_.png);
}

/*-- KV 背景 --*/
body#body-service-planning #page_kv_sub {
  background-image: url("../img/page_kv_service_under.jpg");
}

/*-- サブナビゲーション ハイライト --*/
body#body-service-planning .sub_navi ul li.sub_navi_planning a {
  background-color: #d4eeef;
}




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

body#body-service-planning .content-a .content-box {
  max-width: 950px;
  margin-left: 0;
}
body#body-service-planning .content-a .content-box .left {
  width : calc( 52% - 10px );
}
body#body-service-planning .content-a .content-box .left img {
  width : 100%;
}
body#body-service-planning .content-a .content-box .right {
  width : calc( 40% - 10px );
}


.life_planning_graph {
  background-image: url("../img/life_planning_graph.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  max-width: 363px;
  width: 100%;
  height: 165px;
  display: block;
  margin: 20px auto 0 auto;
}


/*-- コンテンツB --*/
.life_planning_case {
  width: 100%;
  max-width: 1000px;
}
.life_planning_case ul {}
.life_planning_case ul li.case {
  float: left;
  width : calc( 50% - 14% - 1px );
  padding:0em 7% ;
}
.life_planning_case ul li.case1,
.life_planning_case ul li.case3 {
  border-right: 1px solid #bfd9da;
}
.life_planning_case ul li.case2,
.life_planning_case ul li.case4 {
}
.life_planning_case ul li.case3,
.life_planning_case ul li.case4 {
  border-top: 1px solid #bfd9da;
  padding:3em 7% 0em;
}

.life_planning_case h3 {
  padding: 18px 10px;
  font-family: 'Kosugi Maru', sans-serif;
  font-size: 18px;
  line-height: 1.4em;
  font-weight: 200;
  text-align: center;
  color: #3aadb0;
  background-color: #fff;
}
.life_planning_case_fuan {
  background-image: url("../img/life_planning_fuan.png");
  background-size: 80px;
  background-position: center left;
  background-repeat: no-repeat;
  height: 85px;
  margin: 10px 0;
  
  padding: 18px 0 0 95px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6em;
}
.life_planning_case_fuan ul.fuan li {
  list-style-type: "・";
  list-style-position: outside;
}
.life_planning_case_image {
  height: 220px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 20px;
}
li.case1 .life_planning_case_image {
  background-image: url("../img/life_planning_image_case1.png");
}
li.case2 .life_planning_case_image {
  background-image: url("../img/life_planning_image_case2.png");
}
li.case3 .life_planning_case_image {
  background-image: url("../img/life_planning_image_case3.png");
}
li.case4 .life_planning_case_image {
  background-image: url("../img/life_planning_image_case4.png");
}
.life_planning_case h4 {
  color: #339da0;
  font-family: 'Kosugi Maru', sans-serif;
  font-weight: 200;
  font-size: 15px;
  padding: 5px 0;
  border-bottom: 1px solid #b0dee0;
  margin-bottom: 15px;
  text-align: center;
}
.life_planning_case p {
  color: #333;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.8em;
  letter-spacing: 0.02em;
  flex-grow: 1;
}


/*-- コンテンツC --*/
.content-c h3 {
  color: #6b6a00;
  font-size: 18px;
  font-family: 'Kosugi Maru', sans-serif;
  font-weight: 100;
  line-height: 1.4em;
  margin: 0 0 0.5em 0;
}
.life_planning_graph1,
.life_planning_graph2 {
  text-align: center;
  margin: 0 auto;
  padding: 2em;
  width: calc(100% - 4em);
  max-width: 970px;
  background-color: #fff;
  /*border: 1px solid #CCC;*/
  box-shadow: 3px 3px 4px 1px rgba(0, 0, 0, 0.2);
  /*transform: rotate(-1deg);*/
}

.life_planning_graph1 .graph_img,
.life_planning_graph2 .graph_img {
  /*width: 100%;*/
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size:contain;
  padding: 0 1em 2em;
  
  /*box-sizing: border-box;
  padding-top: 34.5%;
  background-size: cover;*/
}
.life_planning_graph1 .graph_img {
  background-image: url("../img/lp_graph_1.jpg");
  width: 900px;
  height: 510px;
}
.life_planning_graph2 .graph_img {
  background-image: url("../img/lp_graph_2.jpg");
  width: 900px;
  height: 510px;
}

.graph_notis {
  color: #999;
  font-size: 0.8em;
  font-weight: 100;
  line-height: 1.6em;
  /*letter-spacing: 0.05em;*/
  margin: 2em 0 10px 0;
}


/*-- コンテンツD --*/
.life_planning_award {
  width: 720px;
  margin: 0 auto 50px auto;
}
.life_planning_award ul {}
.life_planning_award ul li {
  width: 360px;
  height: 110px;
  background-position: center;
  background-repeat: no-repeat;
  float: left;
}
.life_planning_award ul li.award1 {
  background-image: url("../img/life_planning_award1.png");
  width: 100%;
  margin-bottom: 20px;
}
.life_planning_award ul li.award2 {
  background-image: url("../img/life_planning_award2.png");
}
.life_planning_award ul li.award3 {
  background-image: url("../img/life_planning_award3.png");
}
p.award_notis {
  text-align: right;
  font-size: 12px;
  color: #999;
  margin-top: 50px;
}



/* -----------------------------

SP　スマホ
画面サイズが765px以下　

----------------------------- */

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

/*-- コンテンツA --*/
  
  
/*-- コンテンツB --*/
.life_planning_case ul li.case {
  float: none;
  width : calc( 100% - 10% - 1px );
}
.life_planning_case ul li.case1,
.life_planning_case ul li.case2,
.life_planning_case ul li.case3 {
  padding: 2em 5% !important;
  border-bottom: 1px solid #bfd9da !important;
  border-right: none;
  border-top: none;
}
.life_planning_case ul li.case4 {
  padding: 2em 5% 0em;
  border-bottom: none;
  border-right: none;
  border-top: none;
  }
.life_planning_case_image {
  height: 250px;
}

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

/*.life_planning_graph1,
.life_planning_graph2 {
  padding: 1em;
  width: calc(100% - 2em);
}*/
  
/*-- コンテンツD --*/
.life_planning_award {
  width: 100%;
}
.life_planning_award ul li {
  float: none;
  width: 100%;
  max-width: 360px;
  margin: 0 auto 20px auto;
  background-size: 95%;
}
  
}


/* -----------------------------

SP　スマホ
画面サイズが600px以下　

----------------------------- */

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

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

  
}