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

.seikatsu-guide_title .top-intro {
margin: 30px 0;
font-size: 14px;
}

#guide .pr-text {
color: #999;
text-align: right;
margin: 50px 0 0 0;
padding: 0;
}

#guide .lead {
  font-size: 12px;
  line-height: 18px;
  margin: 0;
}

#guide p {
  margin: 1em 0 0 0;
}

#guide h2 {
  color: #666;
  line-height: 1.4em;
  font-size: 18px;
  margin: 10px 0 0 0;
  padding: 0;
}

#guide h2 small {
  font-size: 30px;
  line-height: 34px;
  display: block;
  margin: 10px 0;
}

#guide h3 {
  line-height: 22px;
  margin: 0;
  position: relative;
  padding: 9px;
  padding-left: 0px;
  font-weight: bold;
  font-size: 24px;
}

#guide h4 {
font-size: 18px;
}

#guide ul.point {
  color: #de2518;
  margin: 20px 0 30px 0;
  padding: 0;
}

#guide ul.point li {
  color: #de2518;
  margin-left: 35px;
  margin-bottom: 16px;
}

#guide ul.point a {
 color: #de2518;
}

#guide ul.point li:before,
#guide ul.point-black li:before {
  content: "\f00c";
  font-family: FontAwesome;
  margin-left: -25px;
  display: inline-block;
  width: 25px;
  vertical-align: bottom;
  color: #de2518;
}

#guide ul.point li p {
  margin: 1em 0 2em;
  color: initial;
}

#guide .point-text {
  color: #de2518;
  margin: 20px 0 30px 0;
  padding: 0;
}

#guide ul.point-black {
  color: #333333;
  margin: 20px 0 30px 0;
  padding: 0;
}

#guide ul.point-black li {
  color: #333333;
  margin-left: 35px;
  margin-bottom: 12px;
  line-height: 1.2em;
}

#guide ul.point-black li a {
  color: #333333;
}

#guide .black {
border: none;
padding: 0;
margin: 50px 0;
}

#guide .black a:link {
color: #333
}

#guide.orange .black h4 {
border: none;
color: #333;
padding: 0;
margin: 40px 0 10px 0;
}

/* info */

#guide .info {
  border: none;
  box-shadow: none;
}

#guide ul.info img {
margin-bottom: 15px;
}

#guide ul.info {
  list-style: none;
  margin: 40px 0;
  overflow: auto;
}

#guide ul.info li {
  margin: 5px 5px 5px 0;
}

#guide ul.info li a {
  color: #333333;
  text-decoration: underline;
}

#guide ul.info li a:hover {
  color: #333333;
  text-decoration: none;
}

#guide ul.info li strong {
  margin: 20px 0 5px 0;
  display: inline-block;
}

#guide ul.info li:before {
  font-family: FontAwesome;
  line-height: 1.4em;
  width: 30px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
}

ul.info.narrow li {
  margin: 0 5px 0 0;
}

ul.info.narrow li strong {
  margin: 20px 0 0 0;
  display: inline-block;
}

ul.info.narrow li:before {
  font-family: FontAwesome;
  line-height: 1.2em;
  width: 26px;
  text-align: center;
  display: inline-block;
  color: #589a1e;
  font-size: 16px;
}

#guide ul.info li.add:before {
  content: "\f041";
  font-size: 18px;
}

#guide ul.info li.open:before {
  content: "\f017";
}

#guide ul.info li.tel:before {
  content: "\f095";
}

#guide ul.info li.mail:before {
  content: "\f0e0";
}

#guide ul.info li.fax:before {
  content: "\f1ac";
}

#guide ul.info li.web:before {
  content: "\f245";
}

#guide ul.info li.facebook:before {
  content: "\f082";
}

#guide ul.info li.insta:before {
  content: "\f16d";
}

#guide ul.info li.train:before {
  content: "\f239";
}

#guide ul.info li.mob:before {
  content: "\f10b";
  font-size: 22px;
  vertical-align: middle;
  margin-top: -2px;
}

/*  Toggle  */

#guide h3 small {
  font-size: 16px;
}

#guide h3:before {
  content: "";
  height: 15px;
  width: 100%;
  display: block;
  position: absolute;
  top: 57px;
  left: 0px;
  filter: alpha(opacity=15);
  -moz-opacity: 0.15;
  -khtml-opacity: 0.15;
  opacity: 0.15;
}

#guide h3.switch {
  cursor: pointer;
  margin: 30px 0;
  line-height: 1.5;
}

#guide .toggle {
  display: none;
}

#guide .toggle-open {
  text-align: right;
  font-size: 12px;
  font-weight: normal;
  color: #999999;
  margin-top: -30px;
}

#guide .box {
border: #333333 1px solid;
padding: 20px 30px;
margin: 40px 0;
}

#guide .box h4 {
margin: 0;
display: inline-block;
color: #fff;
background: #666666;
padding: 5px 10px;
}


/* Property Navy Blue*/

#guide.navyblue h3:before {
  background-color: #1f4b86 ;
}

#guide.navyblue a,
#guide.navyblue h3,
#guide.navyblue h4,
#guide.navyblue h5,
#guide.navyblue h6,
#guide.navyblue h2 small, 
#guide.navyblue h3 small,
#guide.navyblue ul.info li:before {
  color: #1f4b86 ;
}

#guide.navyblue .box {
border: #1f4b86 1px solid;
}
#guide.navyblue .box h4 {
background: #1f4b86;
color: #FFF;
font-size: 90%
}

#guide.navyblue .property-type {
margin: 50px 0;
}

#guide.navyblue .property-type h4 {
margin: 40px 0 10px 0;
}

#guide.navyblue .property-type img {
display: block;
margin: 10px 0;
}


/* Recruit light blue*/

#guide.lightblue h3:before {
  background-color: #0f99c1;
}

#guide.lightblue a,
#guide.lightblue h3,
#guide.lightblue h4,
#guide.lightblue h5,
#guide.lightblue h6,
#guide.lightblue h2 small, 
#guide.lightblue h3 small,
#guide.lightblue ul.info li:before {
  color: #0f99c1;
}


/* Education purple*/

#guide.purple h3:before {
  background-color: #5544bc;
}

#guide.purple a,
#guide.purple h3,
#guide.purple h4,
#guide.purple h5,
#guide.purple h6,
#guide.purple h2 small, 
#guide.purple h3 small,
#guide.purple ul.info li:before {
  color: #5544bc;
}


/* Tax gold*/

#guide.gold h3:before {
  background-color: #907825;
}

#guide.gold a,
#guide.gold h3,
#guide.gold h4,
#guide.gold h5,
#guide.gold h6,
#guide.gold h2 small, 
#guide.gold h3 small,
#guide.gold ul.info li:before {
  color: #907825;
}


/* Communication turquoise*/

#guide.turquoise h3:before {
  background-color: #209f98;
}

#guide.turquoise a,
#guide.turquoise h3,
#guide.turquoise h4,
#guide.turquoise h5,
#guide.turquoise h6,
#guide.turquoise h2 small, 
#guide.turquoise h3 small,
#guide.lturquoise ul.info li:before {
  color: #209f98;
}

#guide.turquoise .small-text {
  font-size: 11px !important;
}



/* 05 Moving orange */

#guide.orange h3:before {
  background-color: #ff8400;
}

#guide.orange a,
#guide.orange h3,
#guide.orange h4,
#guide.orange h5,
#guide.orange h6,
#guide.orange h2 small, 
#guide.orange h3 small,
#guide.orange ul.info li:before,
#guide.orange .box strong {
  color: #ff8400;
}

#guide.orange .box {
border: #ff8400 1px solid;
}
#guide.orange .box h4 {
background: #ff8400;
color: #FFF;
}


/* 06 Medical Green */

#guide.green h3:before {
  background-color: #006600;
}

#guide.green a,
#guide.green h3,
#guide.green h4,
#guide.green h5,
#guide.green h6,
#guide.green h2 small, 
#guide.green h3 small,
#guide.green ul.info li:before {
  color: #006600;
}

/* 07 Beauty pink */

#guide.pink h3:before {
  background-color: #e9749d;
}

#guide.pink a,
#guide.pink h3,
#guide.pink h4,
#guide.pink h5,
#guide.pink h6,
#guide.pink h2 small, 
#guide.pink h3 small,
#guide.pink ul.info li:before {
  color: #e9749d;
}

#guide.pink .box {
border: #e9749d 1px solid;
}
#guide.pink .box h4 {
background: #e9749d;
color: #FFF;
}

#guide .imgright {
float: right;
}


/* 08 Driving brown */

#guide.brown h3:before {
  background-color: #9e6d38;
}

#guide.brown a,
#guide.brown h3,
#guide.brown h4,
#guide.brown h5,
#guide.brown h6,
#guide.brown h2 small, 
#guide.brown h3 small,
#guide.brown ul.info li:before {
  color: #9e6d38;
}


/* 09 BtoB matcha */

#guide.matcha h3:before {
  background-color: #51942a;
}

#guide.matcha a,
#guide.matcha h3,
#guide.matcha h4,
#guide.matcha h5,
#guide.matcha h6,
#guide.matcha h2 small, 
#guide.matcha h3 small,
#guide.matcha ul.info li:before {
  color: #51942a;
}

/* 旅行 red */

#guide.red h3:before {
  background-color: #a90101;
}

#guide.red a,
#guide.red h3,
#guide.red h4,
#guide.red h5,
#guide.red h6,
#guide.red h2 small, 
#guide.red h3 small,
#guide.red ul.info li:before {
  color: #a90101;
}

#guide.red h4 {
margin: 40px 0 0 0 ;
}

#guide.red h4 span {
font-size: 90%;
}

#guide.red .kakomi h3 {
border:none;
background: none;
}

#guide.red .kakomi {
padding: 30px;
}

#guide .kakomi {
border: #de2518 1px solid;
padding: 30px;
margin: 50px 0;
}

#guide .kakomi p {
margin: 20px 0;
}

#guide .kakomi p:last-child {
  margin-bottom: 0;
}

#guide .kakomi a:link {
color: #333;
}


.profile-box img {
  margin: 0 20px 10px 0;
  float: left;
}

.profile-box {
  margin: 30px 0 15px 0;
  font-size: 13px;
  min-height: 130px;
}

.profile-box strong {
  display: block;
  font-size: 1.2em;
  margin-bottom: 10px;
}




/* */
#guide .col2-flex {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  display: -webkit-flex;
  /* Safari */
  -webkit-flex-direction: row;
  /* Safari */
  flex-direction: row;
  -webkit-justify-content: space-between;
  /* Safari */
  justify-content: space-between;
  list-style: none;
  width: 100%;
  clear: both;
  margin: 40px 0 30px 0;
}

#guide ul.col2-flex li {
  width: 48%;
  padding: 0;
  color: #333333;
  line-height: 16px;
  font-size: 12px;
  margin: 10px 0
}

#guide ul.col2-flex li a{
  color: #333333;
  text-decoration: none;
}

#guide ul.col2-flex a:hover {
  text-decoration: none;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}

#guide ul.col2-flex li img {
  width: 100%;
  margin: 10px 0 5px 0;
}

/* */

.col2-flex {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  display: -webkit-flex;
  /* Safari */
  -webkit-flex-direction: row;
  /* Safari */
  flex-direction: row;
  -webkit-justify-content: space-between;
  /* Safari */
  justify-content: space-between;
  list-style: none;
  width: 100%;
  clear: both;
  margin: 15px 0 30px 0;
}

ul.col2-flex li {
  width: 48%;
  padding: 0;
  color: #333333;
  line-height: 20px;
  font-size: 13px;
}

ul.col2-flex li a {
  color: #333333;
}

ul.col2-flex a:hover {
  text-decoration: none;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}

ul.col2-flex li img {
  width: 100%;
  height: auto;
  margin: 30px 0 7px 0;
}


.col2-flex h6 {
  margin: 0 0 5px 0;
  line-height: 22px;
  font-size: 16px;
}

.col2-flex h6 small {
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
}

.voice {
  background: #f3f2f2;
  padding: 20px 25px 20px 25px;
  margin: 30px 0;
  clear: both;
}

.voice p {
  margin: 15px 0;
}

.voice h3 {
  font-size: 18px;
  margin: 0 0 10px 0;
  clear: both;
}


p.youtube:before {
  content: "\f16a";
  font-family: FontAwesome;
  color: #de2518;
  font-size: 30px;
  margin-right: 10px;
  vertical-align: middle;
}


#guide h4.title-bubble {
  position: relative;
  padding: 7px 15px 7px 15px;
  font-size: 14px;
  color: #fff;
  background: #de2518;
  display: inline-block;
  text-decoration: none;
  margin: 10px 0 10px 0;
}

#guide h4.title-bubble:before {
  content: " ";
  position: absolute;
  top: 100%;
  left: 24px;
  width: 0;
  height: 0;
  border-width: 12px;
  border-style: solid;
  border-color: transparent;
  border-top-color: #de2518;
}

#guide h4.title-bubble:after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 28px;
  width: 0;
  height: 0;
  border-width: 8px;
  border-style: solid;
  border-color: transparent;
  border-top-color: #de2518;
  z-index: 1;
}


/* links */

h6.links {
  font-size: 14px;
  margin: 0 0 5px 0;
}

ul.links-guide {
  clear: both;
  margin: 0;
  overflow: auto;
  padding: 0 0 10px 0;
}

ul.links-guide li {
  float: left;
  margin: 0 15px 3px 0;
  font-size: 11px;
  line-height: 20px;
}

ul.links-guide li a {
  color: #333;
}

ul.links-guide li a:hover {
  color: #999;
  text-decoration: none;
}


.useful-link {
  font-size: 1.1em;
  padding: 0 0 0 30px;
}

.useful-link:before {
  font-family: FontAwesome;
  line-height: 1.2em;
  display: inline-block;
  color: #878787;
  font-size: 20px;
  content: "\f0f6";
  margin-left: -25px;
  margin-top: 5px;
  width: 25px;
  text-align: left;
  vertical-align: bottom;
}

/*  */

ul.services {
  margin: 40px auto;
  width: 590px;
  border-top: #ccc 1px dashed;
  padding-top: 40px;
}

ul.services li {
  line-height: 18px;
  margin: 0 15px 15px 0;
  float: left;
  display: block;
  font-size: 12px;
  width: 280px;
}

ul.services li img {
  margin: 10px 0 10px 0;
}

ul.services li h6 {
  margin: 0 0 5px 0;
  line-height: 22px;
  font-size: 16px;
}

ul.services li h6 small {
  font-size: 85%;
  text-decoration: none;
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}

ul.services li a {
  color: #333;
  display: block;
}

ul.services li a:hover {
  text-decoration: none;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}

.box-flow {
  margin: 0 0 30px 0;
}

.box-flow h3 {
  margin: 0;
  color: #de2518;
}

.box-flow p {
  margin: 15px 0;
}

.box-flow strong {
  color: #de2518;
}



/* top nav */

ul.navi-guide {
  margin: 20px 0 30px 0;
  clear: both;
}

ul.navi-guide li {
list-style: none;
}

ul.navi-guide li a {
  margin: 0 5px 5px 0;
  float: left;
  padding: 5px 10px;
  color: #fff;
  text-decoration: none;
}

ul.navi-guide li a:hover {
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
  text-decoration: none;
}

  ul.navi-guide.seikatsu-guide__navi {
      display: flex;
      gap: 8px;
  flex-wrap: wrap;
  }

  ul.navi-guide.seikatsu-guide__navi li a {
      margin: 0;
      float: none;
      font-weight: bold;
      display: inline-block;
  }

  ul.navi-guide {
      margin: 8px 0 0 0;
      display: block;
  }

/* 不動産 */
ul.navi-guide li.btn-navyblue a {
  background: #1f4b86;
}

/* リクルート */

ul.navi-guide li.btn-lightblue a {
  background: #0f99c1
}

/* 教育*/
ul.navi-guide li.purple a {
  background:#5544bc;
}

/* 税金*/
ul.navi-guide li.gold a {
  background: #907825;
}

/* 引越し */
ul.navi-guide li.orange a {
  background: #ff8400;
}

/* 医療 */
ul.navi-guide li.green a {
  background: #006600
}

/* 美容 */

ul.navi-guide li.pink a {
  background: #e9749d;
}

/* 通信 */

ul.navi-guide li.turquoise a {
  background: #2cb3ab;
}

/* 運転 */

ul.navi-guide li.brown a {
  background: #9e6d38;
}

/* B to B */
ul.navi-guide li.matcha a {
  background:  #51942a;
}

/* YMS */
ul.navi-guide li.red a {
  background: #c01a36;
}

/* 旅行 */
ul.navi-guide li.red a {
  background:  #51942a;
}


/* Resopnsive */

body.white .site #guide {
width: 100%;
clear: both;
float: none;
}

body.white .site ul.navi-guide li a {
  font-size: 16px;
}

body.white .site #guide h2 {
  margin: 30px 0 15px 0;
  font-size: 16px;
}

body.white .site #guide h2 small {
  font-size: 26px;
  line-height: 28px;
}

body.white .site ul.info {
  font-size: 15px;
  padding-left: 10px;
}

body.white .site ul.info li strong {
  color: #333;
}

body.white .site #guide .imgright {
float: none;
clear: both;
}

body.white .site #guide .box h4 {
color: #FFF;
font-size: 90%
}