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

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

  サービス紹介／service.html

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

/*-- navi ハイライト --*/
body#body-service #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 #page_kv {
  background-image: url(../img/page_kv_service.jpg);
}

/*-- サブナビゲーション --*/
.sub_navi ul li {
  width: calc( 100% / 4 );
}


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

.servise_image {
  display: none;
}
.servise_image_link {
  width: 500px;
  height: 450px;
  display: block;
  margin: 20px auto;
}

.servise_menu_list {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
.servise_menu_list ul {
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.servise_menu_list ul li {
  width: calc( 100% / 3 - 20px ); /* m20 p40 b2 */
  margin: 10px;
}
.servise_menu_list ul li a {
  padding: 20px;
  border-left: #e5e5e5 1px solid;
  border-right: #e5e5e5 1px solid;
  border-bottom: #e5e5e5 1px solid;
  display: block;
}
.servise_menu_list ul li a:hover {
  text-decoration: none;
}
.servise_menu_list ul li a:hover h3,
.servise_menu_list ul li a:hover p {
  color: #fff;
}
.servise_menu_list ul li.nolink { /* 非リンクメニュー */
  width: calc( 100% / 3 - 62px ); /* m20 p40 b2 */
  margin: 10px;
  padding: 20px;
  border-left: #e5e5e5 1px solid;
  border-right: #e5e5e5 1px solid;
  border-bottom: #e5e5e5 1px solid;
}

.servise_menu_list ul li .servise_menu_list_title {
  /*width: 100%;*/
  padding-bottom: 20px;
}
.servise_menu_list ul li .servise_icon {
  width: 30%;
  float: left;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 70px;
}
.servise_menu_list ul li h3 {
  width: 70%;
  float: right;
  text-align: center;
  font-family: 'Kosugi Maru', sans-serif;
  font-weight: 200;
  font-size: 20px;
  padding: 25px 0;
}
.servise_menu_list ul li p {
  font-size: 14px;
  line-height: 1.8em;
  letter-spacing: 0.05em;
  padding: 25px 0 5px 5px;
  border-top: 1px solid #d9d9d9;
  color: #666;
}


/* menu：ライフプラン */
li.servise_menu_list_lifeplan a {
  border-top: #999999 4px solid;
  background-color: #fff;
}
li.servise_menu_list_lifeplan a:hover {
  border-top: #fff 4px solid;
  background-color: #999999;
}
li.servise_menu_list_lifeplan .servise_icon {
  background-image: url("../img/servise_menu_list_icon_lifeplan.png");
}
li.servise_menu_list_lifeplan a:hover .servise_icon {
  background-image: url("../img/servise_menu_list_icon_lifeplan_.png");
}
li.servise_menu_list_lifeplan h3 {
  color: #383838;
}

/* menu：生命保険 */
li.servise_menu_list_life a {
  border-top: #e43c7f 4px solid;
  background-color: #fff;
}
li.servise_menu_list_life a:hover {
  border-top: #fff 4px solid;
  background-color: #e43c7f;
}
li.servise_menu_list_life .servise_icon {
  background-image: url("../img/servise_menu_list_icon_life.png");
}
li.servise_menu_list_life a:hover .servise_icon {
  background-image: url("../img/servise_menu_list_icon_life_.png");
}
li.servise_menu_list_life h3 {
  color: #e43c7f;
}

/* menu：損害保険 */
li.servise_menu_list_nonlife a {
  border-top: #37a2dc 4px solid;
  background-color: #fff;
}
li.servise_menu_list_nonlife a:hover {
  border-top: #fff 4px solid;
  background-color: #37a2dc;
}
li.servise_menu_list_nonlife .servise_icon {
  background-image: url("../img/servise_menu_list_icon_nonlife.png");
}
li.servise_menu_list_nonlife a:hover .servise_icon {
  background-image: url("../img/servise_menu_list_icon_nonlife_.png");
}
li.servise_menu_list_nonlife h3 {
  color: #37a2dc;
}

/* menu：住宅ローン */
li.servise_menu_list_loan {
  border-top: #e77b25 4px solid;
  background-color: #fff;
}
li.servise_menu_list_loan a {
  border-top: #e77b25 4px solid;
  background-color: #fff;
}
li.servise_menu_list_loan a:hover {
  border-top: #fff 4px solid;
  background-color: #e77b25;
}
li.servise_menu_list_loan .servise_icon {
  background-image: url("../img/servise_menu_list_icon_loan.png");
}
li.servise_menu_list_loan a:hover .servise_icon {
  background-image: url("../img/servise_menu_list_icon_loan_.png");
}
li.servise_menu_list_loan h3 {
  color: #e77b25;
}

/* menu：セミナー */
li.servise_menu_list_seminar a {
  border-top: #68ae3f 4px solid;
  background-color: #fff;
}
li.servise_menu_list_seminar a:hover {
  border-top: #fff 4px solid;
  background-color: #68ae3f;
}
li.servise_menu_list_seminar .servise_icon {
  background-image: url("../img/servise_menu_list_icon_seminar.png");
}
li.servise_menu_list_seminar a:hover .servise_icon {
  background-image: url("../img/servise_menu_list_icon_seminar_.png");
}
li.servise_menu_list_seminar h3 {
  color: #68ae3f;
}

/* menu：資産形成 */
li.servise_menu_list_asset a {
  border-top: #723992 4px solid;
  background-color: #fff;
}
li.servise_menu_list_asset a:hover {
  border-top: #fff 4px solid;
  background-color: #723992;
}
li.servise_menu_list_asset .servise_icon {
  background-image: url("../img/servise_menu_list_icon_asset.png");
}
li.servise_menu_list_asset a:hover .servise_icon {
  background-image: url("../img/servise_menu_list_icon_asset_.png");
}
li.servise_menu_list_asset h3 {
  color: #723992;
}


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

.servise_cards {
  margin-bottom: 50px;
}
.servise_cards ul {
  width: 100%;
  max-width: 826px;
  margin: 0 auto;
}
.servise_cards ul li {
  width: calc( 100% / 4 - 30px );
  max-width: 199px;
  float: left;
  margin: 10px;
}
.servise_cards ul li img {
  width: 100%;
}


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

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

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

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

/*-- コンテンツA --*/
.servise_image {
  background-image: url("../img/msin_servise_image.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  max-width: 500px;
  width: 100%;
  height: 450px;
  display: block;
  margin: -40px auto 20px auto;
}
.servise_image_link {
  display: none;
}
  
.servise_menu_list ul li {
  width: calc( 100% / 2 - 22px ); /* m20 p40 b2 */
}
.servise_menu_list ul li.nolink {
  width: calc( 100% / 2 - 62px ); /* m20 p40 b2 */
}

.servise_cards ul {
  width: 100%;
  max-width: 408px;
}
.servise_cards ul li {
  width: calc( 100% / 2 - 20px );
}
  
  
}


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

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

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

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

/*-- コンテンツA --*/
.servise_menu_list ul li {
  width: calc( 100% - 22px ); /* m20 p40 b2 */
}
.servise_menu_list ul li.nolink {
  width: calc( 100% - 62px ); /* m20 p40 b2 */
}

.servise_menu_list ul li .servise_menu_list_title {
  max-width: 300px;
  margin: 0 auto;
}
  
}