@charset "UTF-8";
/*==============================================================================================

   top css

==============================================================================================*/


/*==============================================================================================

	header

==============================================================================================*/
#header_contents {
  background: #3AA797;
  color: #FFF;
  padding: 2px 0;
  box-shadow: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

.header_contain {
  width: 100%;
  max-width: 1000px;
  height: 60px;
  padding: 0 20px;
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}

.header_contain>div {
  width: 265px;
}

.header_contain p {
  font-size: 18px;
  letter-spacing: 1px;
  width: 100%;
  text-align: center;
}

.header_nav {
  width: 265px;
  height: auto;
  padding: 8px 0;
  display: -webkit-flex;
  display: flex;
}

.header_nav a {
  width: 132px;
  height: 34px;
  border-radius: 17px;
  background: #FFF;
  color: #288770;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  font-size: 12px;
  transition: opacity .2s ease;
}

.header_nav a:hover {
  opacity: .6;
}

@media screen and (max-width: 768px) {
  #header_contents {
    background: #3AA797;
    color: #FFF;
    padding: 2px 0;
    box-shadow: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
  }

  .header_contain {
    height: 80px;
    display: block;
  }

  .header_contain>div {
    display: none;
  }

  .header_contain p {
    font-size: 12px;
    letter-spacing: 1px;
    width: 100%;
    text-align: center;
    padding-top: 10px;
  }

  .header_nav {
    width: 100%;
  }

  .header_nav a {
    margin: 0 auto;
    width: 250px;
    height: 34px;
    border-radius: 17px;
    font-size: 14px;
  }
}


/*==============================================================================================

	main

==============================================================================================*/

@media screen and (max-width: 768px) {
  main {
    min-height: calc(100vh - 166px);
    padding-top: 84px;
  }
}


/*==============================================================================================

	mv

==============================================================================================*/

#mv_section {
  background-color: #ffffff;
  position: relative;
}

.mv_contain {
  min-height: 640px;
  padding: 20px 20px;
  position: relative;
  z-index: 1;
}

.mv_contain>p {
  font-size: 20px;
  line-height: 63px;
}

.mv_contain>p br {
  display: none;
}

.mv_contain>h2 {
  font-size: 42px;
  color: #3AA797;
  font-weight: bold;
  line-height: 80px;
}

.mv_logo {
  width: 420px;
}

.mv_emblem {
  width: 400px;
  margin-top: 30px;
}

.mv_bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  object-fit: cover;
}

.mv_bg-sp {
  display: none;
}

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

  #mv_section {
    background-color: #ffffff;
    position: relative;
  }

  .mv_contain {
    min-height: 620px;
    padding: 20px 20px;
    position: relative;
    z-index: 1;
  }

  .mv_contain>p {
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
  }

  .mv_contain>p br {
    display: block;
  }

  .mv_contain>h2 {
    font-size: 30px;
    line-height: 1.5;
    text-align: center;
  }

  .mv_logo {
    width: 320px;
    margin: 0 auto;
  }

  .mv_emblem {
    width: calc(100% - 20px);
    margin-top: auto;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }

  .mv_bg {
    display: none;
  }

  .mv_bg-sp {
    display: block;
    position: absolute;
    top: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 400px;
    object-fit: cover;
  }
}


/*==============================================================================================

	cv

==============================================================================================*/
.cv_section {
  text-align: center;
  font-size: 10px;
  padding: 20px 0;
  width: 100%;

}

.cv_section a {
  width: 300px;
  display: block;
  margin: 0 auto;
}

.cv_section img {
  width: 300px;
  margin: 0 auto 10px;
  transition: transform .3s ease;
}

.cv_section a:hover img {
  transform: scale(1.05);
}

#mv_section+.cv_section {
  position: absolute;
  z-index: 3;
  transform: translateY(-100%);
}

#fv_section+.cv_section {
  width: 300px;
  position: absolute;
  z-index: 3;
  left: 50%;
  transform: translate(-40px,-120%);
}

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

  #mv_section+.cv_section,
  #fv_section+.cv_section {
    width: 100%;
    position: inherit;
    z-index: 3;
    transform: translateY(0);
  }
}

/*==============================================================================================

	worries

==============================================================================================*/
#worries_section {
  background-color: #F6F6F6;
  position: relative;
  overflow: hidden;
}

.worries_contain {
  padding: 40px 0;
  position: relative;
  z-index: 1;
}

.worries__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 400px;
  z-index: 0;
  transform: translate(-60%, -20%);
}

.worries_title {
  text-align: center;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 1.8;
}

.worries_title span {
  color: #3AA797;
}

.worries_title p {
  color: #3AA797;
  font-size: 24px;
  position: relative;
}

.worries_title p:before {
  content: '';
  display: block;
  width: 2px;
  height: 70%;
  background: #333;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-225px, -50%) rotate(-28deg);
}

.worries_title p:after {
  content: '';
  display: block;
  width: 2px;
  height: 70%;
  background: #333;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(225px, -50%) rotate(28deg);
}

#worries_section .wrap_contain {
  position: relative;
}

.worries_wrap {
  padding: 40px 0 30px;
}

.worries_inner {
  position: relative;
  display: -webkit-flex;
  display: flex;
}

.worries_inner:nth-child(even) {
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

.worries_inner+.worries_inner {
  margin-top: 18px;
}

.worries_inner img {
  width: 45%;

}

.worries_pop {
  background-color: #FFF;
  border-radius: 5px;
  width: 58%;
  height: 100%;
  position: absolute;
  top: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  line-height: 2;
}

.worries_inner:nth-child(odd) .worries_pop {
  right: 0;
}

.worries_inner:nth-child(odd) .worries_pop:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 16px solid #ffffff;
  border-left: 0;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-100%, -50%);
}


.worries_inner:nth-child(even) .worries_pop {
  left: 0;
}

.worries_inner:nth-child(even) .worries_pop:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 16px solid #ffffff;
  border-right: 0;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(100%, -50%);
}

.worries_text {
  text-align: center;
  line-height: 2.6;
}

.worries_text span {
  color: #3AA797;
  font-weight: bold;
}


@media screen and (max-width: 768px) {
  .worries_contain {
    padding: 20px 0;
  }

  .worries__bg {
    width: 50%;
    max-width: 400px;
    transform: translate(-55%, -45%);
  }

  .worries_title {
    font-size: 14px;
    line-height: 1.6;
  }

  .worries_title p {
    color: #3AA797;
    font-size: 20px;
    position: relative;
    line-height: 1.4;
  }

  .worries_title p:before {
    height: 90%;
    transform: translate(-130px, -50%) rotate(-18deg);
  }

  .worries_title p:after {
    height: 90%;
    transform: translate(130px, -50%) rotate(18deg);
  }

  .worries_wrap {
    padding: 30px 0 20px;
  }

  .worries_inner {
    display: block;
  }

  .worries_inner:nth-child(even) {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
  }

  .worries_inner+.worries_inner {
    margin-top: 18px;
  }

  .worries_inner img {
    width: 100%;

  }

  .worries_pop {
    border-radius: 10px;
    width: 100%;
    height: 130px;
    position: inherit;
  }

  .worries_inner:nth-child(odd) .worries_pop:after,
  .worries_inner:nth-child(even) .worries_pop:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-bottom: 16px solid #ffffff;
    border-top: 0;
    position: absolute;
    top: 0;
    left: 50%;
    right: auto;
    transform: translate(-50%, -100%);
  }

  .worries_text {
    line-height: 2;
  }
}

/*==============================================================================================

	attention

==============================================================================================*/
#attention_section {
  background-color: #F4FCF9;
  padding: 40px 0 40px;
  position: relative;
}

#attention_section:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 80px solid transparent;
  border-left: 80px solid transparent;
  border-top: 50px solid #f4fcf9;
  border-bottom: 0;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
}

.attention_title {
  position: relative;
  text-align: center;
  font-size: 20px;
  letter-spacing: 2px;
  position: relative;
}

.attention_title span {
  color: #3AA797;
  font-size: 28px;
  font-weight: bold;
}

.attention_pop {
  width: 200px;
  margin: 0 auto;
}

.attention_img {
  width: 120px;
  position: absolute;
  top: 0;
  right: 0;
}

.attention_inner {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  padding-top: 20px;
  font-size: 14px;
}

.attention_graph {
  width: 35%;
}

.attention_tips {
  width: 65%;
  padding-left: 30px;
  line-height: 2;
}

.attention_tips p {
  color: #3AA797;
}

.attention_tips span {
  font-size: 10px;
}

.attention_real {
  color: #3AA797;
  width: 370px;
  font-size: 20px;
  text-align: center;
  line-height: 2;
  margin: 10px auto 30px;
}

.attention_text {
  text-align: center;
  font-size: 24px;
  letter-spacing: 2px;
}

.attention_text span {
  color: #F39600;
  position: relative;
}

.attention_text span:before {
  content: '・・・・・・';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 768px) {
  #attention_section {
    padding: 30px 0 30px;
  }

  #attention_section:before {
    border-right: 40px solid transparent;
    border-left: 40px solid transparent;
    border-top: 24px solid #f4fcf9;
  }

  .attention_title {
    position: relative;
    text-align: center;
    font-size: 20px;
    letter-spacing: 2px;
    position: relative;
  }

  .attention_img {
    width: 120px;
    position: inherit;
    margin: 10px auto;
  }

  .attention_inner {
    display: block;
    padding-top: 20px;
    font-size: 16px;
  }

  .attention_graph {
    width: 200px;
    margin: 0 auto;
  }

  .attention_tips {
    width: 100%;
    padding-left: 0;
    line-height: 2;
  }


  .attention_real {
    color: #3AA797;
    width: 340px;
    font-size: 18px;
    text-align: center;
    line-height: 2;
    margin: 30px auto 20px;
  }

  .attention_text {
    text-align: center;
    font-size: 20px;
    letter-spacing: 2px;
  }

  .attention_text span {
    color: #F39600;
    position: relative;
    line-height: 2.6;
  }

  .attention_text span:before {
    content: '・・・・・・';
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/*==============================================================================================

	privilege

==============================================================================================*/
#privilege_section {
  background: url(../img/pri_bg.png);
  background-size: cover;
  background-position: center center;
}

.privilege_title {
  color: #3AA797;
  padding: 80px 0 60px;
  text-align: center;
  font-size: 28px;
  letter-spacing: 2px;
}

@media screen and (max-width: 768px) {
  #privilege_section {
    background: url(../img/pri_bg.png);
    background-size: cover;
    background-position: center center;
  }

  .privilege_title {
    padding: 40px 0 20px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 2px;
    width: 50%;
  }

  .pri_img {
    display: none;
  }
}

/*==============================================================================================

	point

==============================================================================================*/

#point_section {
  padding-top: 40px;
}

.point_inner {
  width: 500px;
  margin: 0 auto;
  padding-bottom: 40px;
  margin-bottom: 40px;
  position: relative;
}

.point_inner:last-child {
  margin-bottom: 0;
}

.point_num {
  width: 80px;
  margin: 0 auto 20px;
}

.point_title {
  color: #3AA797;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  font-size: 20px;
}

.point_title p {
  position: relative;
  line-height: 1.8;
}

.point_title p:before {
  content: '';
  display: block;
  width: 2px;
  height: 70%;
  background: #3AA797;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-20px, -50%) rotate(-28deg);
}

.point_title p:after {
  content: '';
  display: block;
  width: 2px;
  height: 70%;
  background: #3AA797;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(20px, -50%) rotate(28deg);
}

.point_text {
  text-align: center;
  line-height: 1.8;
}

.point_img {
  width: 60%;
  margin: 20px auto;
}

.point_tips {
  max-width: 480px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.8;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.point_bg {
  position: absolute;
  z-index: -1;
  width: 640px;
  bottom: 0;
}

.point_bg_pc {
  display: block;
}

.point_bg_sp {
  display: none;
}

.point_inner:nth-child(odd) .point_bg {
  right: 100px;
  transform: translateX(100%);
}

.point_inner:nth-child(even) .point_bg {
  left: 100px;
  transform: translateX(-100%);
}

.point_link {
  margin-top: 20px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  transition: opacity .2s ease;
}

.point_link:hover {
  opacity: .6;
}

.point_link img {
  width: 20px;
}

.point_link span {
  color: #3AA797;
  font-weight: bold;
}


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

  #point_section {
    padding-top: 30px;
  }

  .point_inner {
    width: 100%;
    padding-bottom: 20px;
    margin-bottom: 0;
  }

  .point_inner:last-child {
    padding-bottom: 0;
  }

  .point_num {
    width: 60px;
  }

  .point_title {
    font-size: 18px;
  }

  .point_title p:before {
    transform: translate(-16px, -50%) rotate(-28deg);
  }

  .point_title p:after {
    transform: translate(16px, -50%) rotate(28deg);
  }

  .point_img {
    width: 60%;
  }

  .point_tips {
    max-width: 100%;
    font-size: 12px;
  }

  .point_bg {
    position: inherit;
    z-index: -1;
    width: 100%;
    margin: 20px auto 0;
    bottom: 0;
  }

  .point_inner:nth-child(odd) .point_bg,
  .point_inner:nth-child(even) .point_bg {
    left: auto;
    right: auto;
    transform: none;
  }

  .point_bg_pc {
    display: none;
  }

  .point_bg_sp {
    display: block;
  }

  .point_link {
    font-size: 12px;
    margin-top: 20px;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }

  .point_link img {
    width: 14px;
  }

}

/*==============================================================================================

	staff

==============================================================================================*/
#staff_section {
  background-color: #3AA797;
  padding: 60px 0 30px;
  color: #FFFFFF;
}

.staff_title {
  font-size: 32px;
  text-align: center;
  letter-spacing: 3px;
  padding-bottom: 20px;
}

.staff_inner {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.staff_img {
  width: 50%;
  padding-right: 20px;
}

.staff_text {
  width: 50%;
  line-height: 2.6;
  font-size: 14px;
}

.staff_inner+.staff_inner {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
  padding-top: 10px;
}

.staff_inner+.staff_inner .staff_img {
  width: 40%;
  padding-right: 0;
  padding-left: 20px;
}

.staff_inner+.staff_inner .staff_text {
  width: 60%;
  line-height: 2;
  font-size: 15px;
}

.staff_text span {
  background: #FFFFFF;
  color: #3AA797;
  font-weight: bold;
}

.staff_tips {
  font-size: 20px;
  color: #FFFFFF;
  text-align: center;
  font-weight: bold;
  padding: 20px 0 10px;
}

#staff_section p {
  max-width: 600px;
  margin: 0 auto;
  line-height: 2;
}

.staff_emblem_pc {
  width: 100%;
  display: block;
  margin: 0 auto;
}

.staff_emblem_sp {
  width: 100%;
  display: none;
}

@media screen and (max-width: 768px) {
  #staff_section {
    padding: 30px 0 20px;
  }

  .staff_title {
    font-size: 28px;
    text-align: center;
    letter-spacing: 3px;
    padding-bottom: 20px;
  }

  .staff_title br {
    display: none;
  }

  .staff_inner {
    display: block;
  }

  .staff_img {
    width: 80%;
    padding-right: 0;
    padding-bottom: 20px;
    margin: 0 auto;
  }

  .staff_text {
    width: 100%;
    line-height: 2;
    font-size: 14px;
  }

  .staff_inner+.staff_inner {
    padding-top: 10px;
  }

  .staff_inner+.staff_inner .staff_img {
    width: 200px;
    padding-right: 0;
    padding-left: 20px;
    transform: translateX(-40px);
  }

  .staff_inner+.staff_inner .staff_text {
    width: 100%;
    font-size: 14px;
  }

  .staff_tips {
    font-size: 20px;
    padding: 30px 0 10px;
  }

  #staff_section p {
    max-width: 600px;
    margin: 0 auto 10px;
    line-height: 2;
  }

  .staff_emblem_pc {
    display: none;
  }

  .staff_emblem_sp {
    display: block;
  }
}

/*==============================================================================================

	to examination

==============================================================================================*/
#toexam_section {
  padding: 40px 0 0;
  min-height: 520px;
  background: url(../img/cv_bg.png) bottom center no-repeat;
  background-size: auto 100%;
}

.toexam_titile {
  color: #3AA797;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}

.toexam_titile p {
  font-size: 28px;
}

.toexam_titile p span {
  color: #F39600;
}

@media screen and (max-width: 768px) {
  #toexam_section {
    padding: 20px 0 0;
    min-height: 380px;
  }

  .toexam_titile {
    font-size: 18px;
    font-weight: bold;
  }

  .toexam_titile p {
    font-size: 24px;
  }

  .toexam_titile p span {
    color: #F39600;
  }
}

/*==============================================================================================

	merit

==============================================================================================*/
#merit_section {
  padding: 30px 0;
}

#merit_section .wrap_contain>p {
  text-align: center;
  line-height: 2;
  padding-bottom: 30px;
}

.merit_contain {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

.merit_inner {
  width: calc(100% / 3 - 10px);
  background: #E6F2EE;
  border-radius: 5px;
  padding: 14px;
}

.merit_num {
  width: 30px;
  margin: 0 auto;
}

.merit_icon {
  width: 40%;
  margin: 14px auto;
}

.merit_title {
  background: #FFF;
  color: #3AA797;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
  font-size: 14px;
  padding: 5px 0;
}

.merit_inner p {
  padding: 0 10px;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.5px;
}

.merit_inner p span {
  color: #3AA797;
}

.merit_pop {
  padding: 30px 0 0;
  color: #3AA797;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.merit_pop>div {
  width: 160px;
}

.merit_pop p {
  padding-left: 30px;
  font-weight: bold;
  line-height: 2;
}

@media screen and (max-width: 768px) {
  #merit_section {
    padding: 20px 0 0;
  }

  #merit_section .wrap_contain>p {
    padding-bottom: 20px;
    font-size: 14px;
  }

  #merit_section .wrap_contain>p br {
    display: none;
  }

  .merit_contain {
    display: block;
  }

  .merit_inner {
    width: 100%;
    background: #E6F2EE;
    border-radius: 5px;
    padding: 14px;
  }

  .merit_inner+.merit_inner {
    margin-top: 20px;
  }

  .merit_num {
    width: 20px;
  }

  .merit_icon {
    width: 80px;
  }

  .merit_title {
    font-size: 16px;
  }

  .merit_inner p {
    padding: 0;
    font-size: 14px;
  }

  .merit_pop {
    padding: 30px 0 0;
    color: #3AA797;
    display: block;
  }

  .merit_pop>div {
    width: 160px;
    margin: 0 auto;
  }

  .merit_pop p {
    padding-left: 0;
    font-weight: bold;
    line-height: 2;
    text-align: center;
    margin-bottom: 10px;
  }
}

/*==============================================================================================

	lawyer

==============================================================================================*/
#lawyer_section {
  background: #F6F6F6;
  padding: 60px 0;
}

.lawyer_titile {
  color: #3AA797;
  font-weight: bold;
  font-size: 26px;
  text-align: center;
  position: relative;
}

.lawyer_titile img {
  width: 70px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(140px, -50%);
}

#lawyer_section p {
  max-width: 640px;
  margin: 30px auto 0;
  line-height: 2;
}

#lawyer_section p+p {
  font-weight: bold;
  color: #3AA797;
  text-align: center;
}

#lawyer_section p+p img {
  margin-top: 10px;
  width: 100%;
}

.lawyer_contain {
  padding: 20px 0;
  display: -webkit-flex;
  display: flex;
}


.lawyer_inner {
  width: 50%;
  padding: 20px;
}

.lawyer_title {
  width: 80%;
  height: 38px;
  margin: 0 auto;
  border-radius: 20px;
  font-weight: bold;
  text-align: center;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.lawyer_icon {
  width: 80px;
  margin: 10px auto;
}

.lawyer_inner li {
  padding-left: 20px;
  line-height: 1.6;
}

.lawyer_inner ul li {
  position: relative;
  font-size: 14px;
}

.lawyer_inner ul li:before {
  content: '・';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.lawyer_inner:nth-child(1) {
  background: #EFEFEF;
}

.lawyer_inner:nth-child(1) .lawyer_title {
  background: #D9D9D9;
}

.lawyer_inner:nth-child(2) {
  background: #E6F2EE;
  color: #288770;
}

.lawyer_inner:nth-child(2) .lawyer_title {
  background: #3AA797;
  color: #FFFFFF;
}

.lawyer_answer {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
  position: relative;
}

.lawyer_answer:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 60px solid transparent;
  border-left: 60px solid transparent;
  border-top: 45px solid #3aa797;
  border-bottom: 0;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}


.lawyer_img {
  width: 140px;
  padding-right: 20px;
}

.lawyer_answer span {
  color: #3AA797;
  font-size: 20px;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  #lawyer_section {
    padding: 20px 0;
  }

  .lawyer_titile {
    font-size: 20px;
  }

  .lawyer_titile img {
    width: 40px;
    position: inherit;
    top: auto;
    left: auto;
    transform: none;
    margin: 10px auto;
  }

  #lawyer_section p {
    font-size: 14px;
    margin: 10px auto 0;
    line-height: 1.8;
  }

  #lawyer_section p+p img {
    margin: 10px auto 0;
    width: 90%;
  }

  .lawyer_contain {
    padding: 20px 0;
    display: block;
  }


  .lawyer_inner {
    width: 100%;
    padding: 20px;
  }

  .lawyer_inner+.lawyer_inner {
    margin-top: 10px;
  }

  .lawyer_title {
    font-size: 14px;
    width: 80%;
    height: 30px;
    border-radius: 15px;
  }

  .lawyer_answer {
    display: block;
    text-align: center;
  }

  .lawyer_answer:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 40px solid transparent;
    border-left: 40px solid transparent;
    border-top: 35px solid #3aa797;
    border-bottom: 0;
    position: inherit;
    margin-bottom: 10px;
  }


  .lawyer_img {
    width: 140px;
    padding-right: 20px;
    margin: 20px auto 0;
  }

  .lawyer_answer span {
    color: #3AA797;
    font-size: 18px;
    font-weight: bold;
  }
}

/*==============================================================================================

	simple

==============================================================================================*/
#simple_section {
  padding: 40px 0;
  position: relative;
}

.simple_title {
  color: #3AA797;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.6;
  text-align: center;
}

.simple_bg {
  position: absolute;
  top: 0;
  left: 50%;
  min-width: 100%;
  height: 100%;
  z-index: -1;
  transform: translateX(-50%);
}

.simple_bg img {
  height: 100%;
  margin: 0 auto;
}

.simple_tips {
  width: 300px;
  height: 40px;
  margin: 40px auto 20px;
  border-radius: 20px;
  color: #FFFFFF;
  background: #3AA797;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

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

.simple_inner {
  width: calc(50% - 10px);
  background: #FFFFFF;
  border: 1px solid #3AA797;
  padding: 20px;
  font-weight: bold;
  text-align: center;
}

.simple_name {
  color: #288770;
  font-size: 20px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  border-bottom: 1px solid #3AA797;
  height: 100px;
}

.simple_name span {
  display: block;
  font-size: 14px;
  font-weight: normal;
}

.simple_plan {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  font-size: 18px;
  height: 100px;
}

.simple_plan span {
  font-size: 24px;
}

@media screen and (max-width: 768px) {
  #simple_section {
    padding: 20px 0;
  }

  .simple_title {
    color: #3AA797;
    font-size: 20px;
    margin-bottom: 10px;
  }

  .simple_bg {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    z-index: 0;
    transform: none;
  }

  .simple_bg img {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    transform: translateX(-50%);
  }

  .simple_tips {
    margin: 30px auto 20px;
  }

  .simple_contain {
    display: block;
  }

  .simple_inner {
    width: 100%;
  }

  .simple_inner+.simple_inner {
    margin-top: 20px;
  }

  .simple_name {
    height: 80px;
  }
}



/*==============================================================================================

	flow

==============================================================================================*/

#flow_section {
  padding: 40px 0 60px;
  background: #E4F2F0;
}

.flow_contain {
  position: relative;
  background: #FFF;
  border: 3px solid #3AA797;
  border-radius: 10px;
  padding: 50px 40px 40px;
}


.flow_tips {
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 20px;
  width: 160px;
  height: 46px;
  background: #3AA797;
  color: #FFF;
  border-radius: 23px 23px 23px 0;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: -3px;
  transform: translateY(-50%);
}

.flow_contain li {
  color: #3AA797;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 1p;
  line-height: 1.8;
  padding-left: 30px;
  position: relative;
}

.flow_contain li:before {
  content: '・';
  display: block;
  position: absolute;
  top: 0;
  left: 0;

}

.flow_text {
  padding: 20px 0 0 30px;
  line-height: 2;
}

.flow_text p {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  font-weight: bold;
}

.flow_text p img {
  width: 20px;
  margin-right: 10px;
}

.flow_text img.pc {
  margin: 5px 0;
}

.flow_text img.sp {
  display: none
}

.flow_title {
  color: #3AA797;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.6;
  text-align: center;
  margin-top: 40px;
}

.flow_img {
  padding-top: 30px;
}


.flow_img .pc {
  display: block;
}

.flow_img .sp {
  display: none;
}

@media screen and (max-width: 768px) {
  #flow_section {
    padding: 40px 0 30px;
    background: #E4F2F0;
  }
  
  .flow_contain {
    position: relative;
    background: #FFF;
    border: 3px solid #3AA797;
    border-radius: 10px;
    padding: 40px 24px 24px;
  }
  
  
  .flow_tips {
    font-size: 18px;
    width: 140px;
    height: 40px;
  }
  
  .flow_contain li {
    font-size: 20px;
    padding-left: 20px;
  }
  
  .flow_contain li:before {
    left: -5px;

  }
  
  .flow_text {
    padding: 10px 0 0;
    font-size: 14px;
  }
  
  .flow_text p img {
    width: 20px;
    margin-right: 10px;
  }
  
  .flow_text img.pc {
    display: none;
  }
  
  .flow_text img.sp {
    margin: 5px 0;
    display: block;
  }
  
  .flow_title {
    font-size: 18px;
    margin-top: 30px;
  }
  
  .flow_img {
    padding-top: 20px;
  }
  
  
  .flow_img .pc {
    display: none;
  }
  
  .flow_img .sp {
    display: block;
  }
}


/*==============================================================================================

	voice

==============================================================================================*/
#manga_section{
  margin: 60px 0;
}

.manga_title{
  color: #3AA797;
  font-size: 24px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 1px;
}

.manga_title > p{
  color: #333;
  font-size: 30px;
  position: relative;
  width: 360px;
  margin: 0 auto;
}

.manga_title > p:before {
  content: '';
  display: block;
  width: 2px;
  height: 70%;
  background: #404040;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-20px, -50%) rotate(-28deg);
}

.manga_title > p:after {
  content: '';
  display: block;
  width: 2px;
  height: 70%;
  background: #404040;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(20px, -50%) rotate(28deg);
}

.manga_title p span{
  color: #F39600;
  position: relative;
  z-index: 1;
}

.manga_title p span:before{
  content: '';
  display: block;
  width: 100%;
  height: 5px;
  background: #3AA797;
  position: absolute;
  bottom: 5px;
  left: 0;
  z-index: -1;
}
          

.manga_wrap{
  padding-top: 40px;
  text-align: center;
}

.manga_wrap img{
  margin: 0px auto 0;
  width: 80%;
}

.manga_contain > p{
  margin-top: 40px;
  font-weight: bold;
  text-align: center;
}

@media screen and (max-width: 768px) {
  #manga_section{
    margin: 40px 0;
  }
  
  .manga_title{
    font-size: 18px;
  }
  
  .manga_title > p{
    font-size: 24px;
    width: 280px;
  }          
  
  .manga_wrap{
    padding-top: 30px;
  }
  
  .manga_wrap img{
    width: 100%;
  }
  
  .manga_contain > p{
    font-size: 14px;
    margin-top: 20px;
  }
}


/*==============================================================================================

	step

==============================================================================================*/
#step_section {
  background: #F4FCF9;
  padding: 60px 0;
}

.step_title {
  font-size: 22px;
  letter-spacing: 1px;
  text-align: center;
  font-weight: bold;
  padding-bottom: 20px;
}

.step_title span{
  color: #F39600;
  font-size: 40px;
}

#step_section .wrap_contain > p{
  text-align: center;
  line-height: 2;
}

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


.step_wrap{
  width: calc(100% / 3 - 10px);
  background: #E4F2F0;
  border-radius: 10px;
padding:30px;
margin: 30px 0;
}


.step_head{
  color: #288770;
  font-weight: bold;
  display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

.step_head img{
  width: 20px;
  margin-left: 5px;

}
     
.step_wrap > img{
  width: 120px;
  margin: 20px auto;
}

.step_text{
  font-size: 14px;
  height: 50px;
  font-weight: bold;
  text-align: center;
  padding-bottom: 10px;
  color: #288770;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.step_wrap > p{
  font-size: 14px;
  line-height: 1.4;
}

.step_wrap > p img{
  width: 10px;
  display: inline-block;
  margin-right: 5px;
}

.step_btn{
  margin-top: 30px;
  width: 320px;
  margin: 30px auto 0;
  position: relative;
}

.step_btn img:nth-child(1){
  position: absolute;
  top: -3px;
  left: -3px;
  width: 100%;
  transition: all .2s ease;
}

.step_btn:hover img:nth-child(1){
  top: 0px;
  left: -0px;
}




@media screen and (max-width: 768px) {
  #step_section {
    padding: 40px 0;
  }
  
  .step_title {
    font-size: 20px;
    padding-bottom: 10px;
  }
  
  .step_title span{
    font-size: 32px;
  }
  
  #step_section .wrap_contain > p{
    line-height: 1.6;
  }
  
  .step_contain{
    display: block;
  }
  
  
  .step_wrap{
    width: 100%;
  padding:20px;
  margin: 30px 0;
  }

  .step_wrap + .step_wrap{
    margin-top: 10px;
  }

  .step_text{
    height: auto;
  }

  .step_text br{
    display: none;
  }
  
  .step_wrap > p{
    font-size: 14px;
  }
  
  .step_btn{
    margin-top: 30px;
    width: 280px;
    margin: 30px auto 0;
    position: relative;
  }
  
  .step_btn img:nth-child(1){
    position: absolute;
    top: -3px;
    left: -3px;
    width: 100%;
    transition: all .2s ease;
  }
  
  .step_btn:hover img:nth-child(1){
    top: 0px;
    left: -0px;
  }
}

/*==============================================================================================

	easy

==============================================================================================*/
#easy_section{
  padding: 60px 0 20px;
}

.easy_title{
  color: #3AA797;
  font-size: 32px;
  font-weight: bold;
  position: relative;
  text-align: center;
}

.easy_title img{
  width: 120px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(200px,-50%);

}

#easy_section .wrap_contain > p{
  text-align: center;
  margin-top: 30px;
  line-height: 2;
}


.easy_contain{
  position: relative;
  margin-top: 60px;
}

.easy_wrap{
  position: relative;
  border: 4px solid #3AA797;
  border-radius: 10px;
  padding: 20px;
  width: 40%;
}

.easy_contain:nth-child(1) .easy_wrap:before,
.easy_contain:nth-child(2) .easy_wrap:before{
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-top: 30px solid #3aa797;
  border-bottom: 0;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%,50px);
}

.easy_num{
  width: 40px;
  position: absolute;
  top: 5px;
  left: 5px;
  transform: translate(-50%,-50%);
}

.easy_img{
  width: 140px;
  margin: 0 auto;
}

.easy_text{
  width: 140%;
  line-height: 2;
  position: absolute;
  top: 50%;
  right: -30px;
  transform: translate(100%,-50%);
}

.easy_text span{
  color: #3AA797;
  font-weight: bold;
  font-size: 20px;

}


@media screen and (max-width: 768px) {
  #easy_section{
    padding: 30px 0 20px;
  }
  
  .easy_title{
    color: #3AA797;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    text-align: center;
  }
  
  .easy_title img{
    width: 100px;
    position: inherit;
    top: auto;
    left: auto;
    transform: none;
    margin: 20px auto;
  
  }
  
  #easy_section .wrap_contain > p{
    font-size: 14px;
    margin-top: 20px;
  }
  
  .easy_contain{
    margin-top: 60px;
  }

  .easy_contain +   .easy_contain{
    margin-top: 80px;
  }
  
  .easy_wrap{
    position: relative;
    border: 4px solid #3AA797;
    border-radius: 10px;
    padding: 50px 16px 20px;
    width: 100%;
  }
  
  .easy_contain:nth-child(1) .easy_wrap:before,
  .easy_contain:nth-child(2) .easy_wrap:before{
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-top: 20px solid #3aa797;
    border-bottom: 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,40px);
  }
  
  .easy_num{
    width: 30px;
  }
  
  .easy_img{
    width: 100px;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  
  .easy_text{
    width: 100%;
    line-height: 2;
    position:inherit;
    top: auto;
    right: auto;
    transform: none;
    font-size: 14px;
  }
  
  .easy_text span{
    color: #3AA797;
    font-weight: bold;
    font-size: 18px;
  
  }
}

/*==============================================================================================

	faq

==============================================================================================*/
#faq_section{
  padding: 60px 0;
  background: #E4F2F0
}

.faq_title{
  color: #288770;
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 40px;
  text-align: center;
}

.faq_contain dt{
  padding: 5px 30px 5px 10px;
  color: #FFFFFF;
  background: #288770;
  border-radius: 20px;
  margin-top: 20px;
}

.faq_contain dt::before{
  content: 'Q. ';
  display: inline-block;
}

.faq_contain .acc_head_icon{
  width: 20px;
  height: 20px;
  background:#FFF;
  border-radius: 50%;
  color: #288770;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}


.faq_contain dd div{
  padding: 20px 20px;
  line-height: 2;
}

@media screen and (max-width: 768px) {
  #faq_section{
    padding: 30px 0;
  }
  
  .faq_title{
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  .faq_contain dt{
    padding: 5px 34px;
    border-radius: 20px;
    margin-top: 20px;
    position: relative;
    line-height: 1.6;
  }
  
  .faq_contain dt::before{
    content: 'Q. ';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
  }
  
  .faq_contain dd div{
    padding: 20px 10px;
    line-height: 2;
  }
}

/*==============================================================================================

	foot visual

==============================================================================================*/
#fv_section{
  background: url(../img/fv_bg.png) center center;
  background-size: cover;
  padding: 80px 0 200px;
}

.fv_contain{
  display: -webkit-flex;
    display: flex;
}

.fv_wrap{
  width: 68%;
  text-align: center;
  margin-left: auto;
}

.fv_title{
  color: #3AA797;
  font-size: 24px;
  font-weight: bold;
}

.fv_wrap p{
  margin-top: 20px;
  font-size: 14px;
  line-height: 3;
}

@media screen and (max-width: 768px) {
  #fv_section{
    background: none;
    padding: 0px 0 20px;
  }
  
  .fv_contain{
    display: block;
  }
  
  .fv_wrap{
    width: 100%;
  }
  
  .fv_title{
    background: url(../img/fv_bg_sp.png);
    background-size: cover;
    color: #3AA797;
    height: 200px;
    font-size: 24px;
    font-weight: bold;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    text-align: right;
    padding: 10px;
  }
  
  .fv_wrap p{
    margin-top: 20px;
    font-size: 14px;
    line-height: 2;
  }
  
}

/*==============================================================================================

	corp

==============================================================================================*/
#corp_sec {
  background: #ffffff;
}

.corp_contain {
  padding: 40px 20px;
}

.corp_wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 1.6;
}

.corp_inner {
  width: 50%;
  padding-bottom: 30px;
}

.corp_logo {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}

.corp_logo img:nth-child(1) {
  width: 180px;
  margin-right: 30px;
}

.corp_logo img:nth-child(2) {
  width: 32px;
}

.corp_pass {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}

.corp_status {
  display: -webkit-flex;
  display: flex;
  padding: 0 0 20px 0;
}

.corp_status>div:nth-child(1) {
  width: 130px;
}

.corp_status>div:nth-child(2) {
  width: calc(100% - 130px);
}

@media screen and (max-width: 768px) {
  .corp_wrap {
    display: block;
    max-width: 400px;
    margin: 0 auto;
  }

  .corp_inner {
    width: 100%;
    padding: 0 20px 0 0;
  }

  .corp_status>div:nth-child(1) {
    width: 115px;
  }

  .corp_pass {
    display: block;
    padding-bottom: 40px;
  }
}

/*==============================================================================================

	list

==============================================================================================*/
#list_section {
  padding: 60px 0;
}

.list_contain {
  padding: 30px 20px;
}

.list_wrap {
  display: -webkit-flex;
  display: flex;
  border-top: 1px solid #3AA797;
}

.list_wrap:last-child {
  border-bottom: 1px solid #3AA797;
}

.list_wrap>div:nth-child(1) {
  width: 200px;
  background: #d7ece8;
  padding: 20px;
}

.list_wrap>div:nth-child(2) {
  width: calc(100% - 200px);
  padding: 20px;
}

.list_wrap a {
  color: #3AA797;
  -moz-transition: opacity 0.3s ease;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.list_wrap a:hover {
  opacity: 0.6;
}

.list_link_wrap {
  padding: 20px 0 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.list_link_wrap a {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100px;
  height: 30px;
  background: #3AA797;
  margin: 5px;
  color: #ffffff;
  border-radius: 5px;
}

.list_link_wrap a.disable {
  pointer-events: none;
  opacity: 0.3;
  display: none;
}

@media screen and (max-width: 768px) {
  .list_wrap {
    display: block;
  }

  .list_wrap>div:nth-child(1) {
    width: 100%;
  }

  .list_wrap>div:nth-child(2) {
    width: 100%;
  }
}