@charset "UTF-8";
/* contract.css
---------------------------------------------------------- */
/* iNav*/
.nav_inner {
  margin: 0 0 20px 30px;
  background: url(../img/pic_animal01.png) no-repeat 450px bottom;
}
.nav_inner ul {
  margin: 0 0 20px 0;
}
.nav_inner ul li {
  display: inline-block;
}
.nav_inner ul li:hover {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filte: alpha(opacity=0.8);
}
.nav_inner ul li a {
  display: block;
}



.ol_txt01 {
  list-style-type: decimal;
  margin: 0 30px 20px 50px;
}

.anchor_basic01 {
  margin: 80px 0 0 0;
}

.button {
  text-align: center;
  margin: 30px 0 !important;
}

.button a {
  color: #FFFFFF;
  font-size: 20px;
  background-color: #e74069;
  border-radius: 5px;
  padding: 9px 9px 9px 38px;
  margin: 5px;
  text-decoration: none;
  background-image: url(/common/img/link.png);
  background-repeat: no-repeat;
  background-position: 5px center;
}

.button a:hover {
  background-color: #00B8BB;
}

/* point01 */
#point01 {
  margin: 60px 0 40px 0;
}
#point01 .h3_basic01 {
  padding: 10px 0 8px 0px;
  background-image: none;
  line-height: 40px;
}
#point01 .h3_basic01:before {
  content: "1";
  color: #fff;
  background-color: #82d7dc;
  font-size: 30px;
  padding: 10px 18px;
  border-radius: 50%;
  line-height: 40px;
  margin-right: 10px;
}
#point01 ul {
  margin: 0 0 30px 0;
}
#point01 ul li {
  display: inline-block;
  margin: 0 10px 0 0;
}
#point01 ul li:last-child {
  margin: 0 0 0 0;
}

.popup01 {
  padding: 22px 0 20px 15.3%;
  position: relative;
}
.popup01 img {
  width: 11.52%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
}
.popup01 p {
  padding: 1px 1px 1px 1px!important;
  position: relative;
  z-index: 1;
  background: #b2b2b2!important;
}

.popup01 p::before{
	content: '';
	width: 17px;
	height: 18px;
	margin-top: -5px;
	border-top: solid 1px #b2b2b2;
	border-right: solid 1px #b2b2b2;
	background: #fff;
	transform: rotate(225deg);
	position: absolute;
	top: 45%;
	left: -9px;
}

.popup01 p span {
  padding: 12px 20px 11px 20px;
  display: block;
  background: #ffffff;
}

.page .star01 {
  text-align: right;
  margin: 0;
}

/* point02 */
#point02 {
  margin: 0 0 40px 0;
}
#point02 .h3_basic01 {
  padding: 10px 0 8px 0px;
  background-image: none;
  line-height: 40px;
}
#point02 .h3_basic01:before {
  content: "2";
  color: #fff;
  background-color: #82d7dc;
  font-size: 30px;
  padding: 10px 18px;
  border-radius: 50%;
  line-height: 40px;
  margin-right: 10px;
}
#point02 ul li {
  display: inline-block;
  margin: 0 7px 0 0;
}
#point02 ul li:last-child {
  margin: 0 0 0 0;
}
#point02 .taR {
  color: #7ea3cf;
}

.h5_basic01 {
  color: #000000;
  background-position: left 0.45em;
}

.case01 {
  padding: 4px 20px 20px 20px;
  margin: 0 0 20px 0;
  border: 2px solid #82d7dc;
  background: url(../img/bg_point02.png) repeat-x top;
}

.ttl_case {
  padding: 0 0 0px 10px;
  margin-bottom: 18px;
  font-size: 129%;
  background: url(../img/ico_white01.png) no-repeat left center;
}

#point02 .ul_case01 li {
  display: inline-block;
  margin: 0 15px 0 0;
  vertical-align: middle;
}
#point02 .ul_case01 li:last-child {
  margin: 0 0 0 0;
}

.fzLL {
  font-weight: bold;
}

/* point03 */
#point03 {
  margin: 0 0 40px 0;
}
#point03 .h3_basic01 {
  padding: 10px 0 8px 0px;
  background-image: none;
  line-height: 40px;
}
#point03 .h3_basic01:before {
  content: "3";
  color: #fff;
  background-color: #82d7dc;
  font-size: 30px;
  padding: 10px 18px;
  border-radius: 50%;
  line-height: 40px;
  margin-right: 10px;
}

/* point04 */
#point04 {
  margin: 0 0 40px 0;
}
#point04 .h3_basic01 {
  padding: 10px 0 8px 0px;
  background-image: none;
  line-height: 40px;
}
#point04 .h3_basic01:before {
  content: "4";
  color: #fff;
  background-color: #82d7dc;
  font-size: 30px;
  padding: 10px 18px;
  border-radius: 50%;
  line-height: 40px;
  margin-right: 10px;
}
#point04 ul {
  margin: 0 0 20px 0;
}
#point04 ul li {
  display: inline-block;
  margin: 0 -5px 0 0;
}
#point04 ul li:last-child {
  margin: 0 0 0 0;
}

/* topic01 */
#topic01 {
  margin: 0 0 40px 0;
}
#topic01 .h3_basic01 {
  padding: 10px 0 8px 0px;
  background-image: none;
  line-height: 40px;
}
#topic01 .h3_basic01:before {
  content: "5";
  color: #fff;
  background-color: #82d7dc;
  font-size: 30px;
  padding: 10px 18px;
  border-radius: 50%;
  line-height: 40px;
  margin-right: 10px;
}

/* topic02 */
#topic02 {
  margin: 0 0 60px 0;
}
#topic02 .h3_basic01 {
  padding: 10px 0 8px 0px;
  background-image: none;
  line-height: 40px;
}
#topic02 .h3_basic01:before {
  content: "6";
  color: #fff;
  background-color: #82d7dc;
  font-size: 30px;
  padding: 10px 18px;
  border-radius: 50%;
  line-height: 40px;
  margin-right: 10px;
}

.page .ttl_base, .page .ttl_other {
  margin: 0;
}

.ttl_base span, .ttl_other span {
  color: #50b9bf;
  font-weight: bold;
  font-size: 150%;
  margin: 0;
}

/* other */
.box_txt01 {
  /* padding: 0 30px 0 30px; 
  line-height: 1.8;*/
}
.box_txt01 h4{
	font-weight: bold;
	font-size: 120%;
	margin: 0 0 8px;
}
.txt01 {
  padding: 0 30px 0 30px;
}

small {
  color: #666666;
}

.color_green {
  color: #50b9bf;
  font-size: 115%;
  font-weight: bold;
	letter-spacing: -0.05em;
}

.color_green02 {
  color: #50b9bf;
  font-size: 115%;
  font-weight: bold;
}

.color_red {
  color: #e94164;
}

.txt_icon {
  padding: 0 0 0px 18px;
  background: url(../img/bg_h5_basic01.gif) no-repeat left 0.45em;
}

.btn_note01 {
  margin: 15px auto 15px auto;
  text-align: center;
}
.btn_note01 li {
  padding: 0 0 0 0;
  width: 46%;
  display: inline-block;
  text-align: center;
}
.btn_note01 li:last-child {
  margin: 0 0 0 0.7%;
}

.table_basic02 {
  margin: 0 0 20px 0;
  font-size: 16px;
}
.table_basic02 th {
  width: 45px;
  height: 55px;
  line-height: 1.2;
  padding: 0 40px 0 40px;
}
.table_basic02 .table_basic02_th {
  background: #e5e5e7;
}
.table_basic02 .odd td {
  background: #ffffff;
}

.faq-area ul {
  margin: 0 30px;
}
.faq-area li {
  background-color: #82d7dc;
  margin: 10px 0 20px;
  list-style: none;
  padding: 0 !important;
  border-radius: 50px;
  color: #FFF;
  margin-right: 30px;
  position: relative;
  border: solid 2px #82d7dc;
  display: inline-block;
  width: 100%;
}
.faq-area li a {
  text-decoration: none;
  color: #FFF;
  display: block;
  padding: 5px 20px;
}
.faq-area li:hover {
  background-color: #fff;
  color: #FFF;
  border: solid 2px #82d7dc;
}
.faq-area li:hover a {
  color: #82d7dc;
}
.faq-area li:hover:after {
  content: "";
  position: absolute;
  display: block;
  width: 8px;
  height: 8px;
  top: 48%;
  right: 10px;
  margin-top: -4px;
  border: 0 solid #82d7dc;
  border-top-width: 2px;
  border-right-width: 2px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.faq-area li:after {
  content: "";
  position: absolute;
  display: block;
  width: 8px;
  height: 8px;
  top: 48%;
  right: 10px;
  margin-top: -4px;
  border: 0 solid #FFF;
  border-top-width: 2px;
  border-right-width: 2px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* !tablet(768px)
---------------------------------------------------------- */
@media screen and (max-width: 929px) {
  .button a {
    color: #FFFFFF;
    font-size: 16px;
    background-color: #e74069;
    border-radius: 5px;
    padding: 15px 3px 13px 35px;
    margin: 5px;
    text-decoration: none;
    background-image: url(/common/img/link.png);
    background-repeat: no-repeat;
    background-position: 5px center;
		letter-spacing: -0.05em;
  }

  #webpage .button a:hover {
    background-color: #00B8BB;
  }

  .nav_inner {
    margin: 0;
  }
  .nav_inner ul li {
    width: 178px;
    height: auto;
  }

  .box_txt01 {
    padding: 0;
    line-height: 1.5;
  }

  #point01 ul li {
    width: 18.7%;
    margin: 0 5px 0 0;
  }

  #point02 ul li {
    width: 32%;
  }
  #point02 .ul_case01 li {
    width: 36%;
  }
  #point02 .ul_case01 li.first {
    width: 19%;
  }
  #point02 .ul_case01 li:last-child {
    width: 39%;
  }

  #point04 ul li {
    width: 123px;
  }
  #point04 ul li:last-child {
    width: 113px;
  }

  .flL {
    width: 47%;
  }

  .flR {
    width: 49%;
  }

  .table_basic02 th {
    width: 60px;
    padding: 0 30px 0 30px;
  }
}
/* !smt(480px)
---------------------------------------------------------- */
@media screen and (max-width: 728px) {
  .nav_inner {
    margin: 0;
    background: none;
  }
  .nav_inner ul li {
    display: inline-block;
    width: 49%;
    margin: 0 0 10px 0;
  }
  .nav_inner ul li a img{
    display:block;
    margin:0 auto;
  }

  .h3_basic01 {
    font-size: 129%;
  }

  #point01 {
    margin: 0 0 40px 0;
  }
  #point01 .h3_basic01 {
    padding: 10px 0 8px 50px;
    background-image: none;
    line-height: 230%;
    position: relative;
  }
  #point01 .h3_basic01:before {
    content: "1";
    color: #fff;
    background-color: #82d7dc;
    font-size: 24px;
    padding: 5px 15px;
    border-radius: 200px;
    line-height: 30px;
    margin-right: 10px;
    left: 0px;
    position: absolute;
  }

  #point01 ul li {
    width: 47%;
    margin: 0 5px 10px 0;
  }
  #point01 ul li.first, #point01 ul li:nth-child(2) {
    width: 47%;
  }

  #point02 ul li {
    width: auto;
    margin: 0 0 10px 0;
  }

  .case01 {
    padding: 8px 10px 10px 10px;
  }

  #point02 {
    margin: 0 0 40px 0;
  }
  #point02 .h3_basic01 {
    padding: 10px 0 8px 50px;
    background-image: none;
    line-height: 120%;
    position: relative;
  }
  #point02 .h3_basic01:before {
    content: "2";
    color: #fff;
    background-color: #82d7dc;
    font-size: 24px;
    padding: 5px 15px;
    border-radius: 200px;
    line-height: 30px;
    margin-right: 10px;
    left: 0px;
    position: absolute;
  }

  #point02 .ul_case01 {
    text-align: center;
  }
  #point02 .ul_case01 li {
    width: 100%;
    margin: 0 0 5px 0;
  }
  #point02 .ul_case01 li.first-child #point02 .ul_case01 li:last-child {
    width: 100%;
    margin: 0 0 5px 0;
  }
	#point02 .ul_case01 li:last-child {
    width: 100%;
  }
  #point03 {
    margin: 0 0 40px 0;
  }
  #point03 .h3_basic01 {
    padding: 10px 0 8px 50px;
    background-image: none;
    line-height: 40px;
    position: relative;
  }
  #point03 .h3_basic01:before {
    content: "3";
    color: #fff;
    background-color: #82d7dc;
    font-size: 24px;
    padding: 5px 15px;
    border-radius: 200px;
    line-height: 30px;
    margin-right: 10px;
    left: 0px;
    position: absolute;
  }

  #point04 {
    margin: 0 0 40px 0;
  }
  #point04 .h3_basic01 {
    padding: 10px 0 8px 50px;
    background-image: none;
    line-height: 40px;
    position: relative;
  }
  #point04 .h3_basic01:before {
    content: "4";
    color: #fff;
    background-color: #82d7dc;
    font-size: 24px;
    padding: 5px 15px;
    border-radius: 200px;
    line-height: 30px;
    margin-right: 10px;
    left: 0px;
    position: absolute;
  }

  #point04 ul li {
    width: 100%;
  }
  #point04 ul li:last-child {
    width: 100%;
  }
  #point04 ul li img{
    display:block;
    margin:0 auto;
		width: 100%;
  }

  #point05 {
    margin: 0 0 40px 0;
  }
  #point05 .h3_basic01 {
    padding: 10px 0 8px 50px;
    background-image: none;
    line-height: 40px;
    position: relative;
  }
  #point05 .h3_basic01:before {
    content: "5";
    color: #fff;
    background-color: #82d7dc;
    font-size: 24px;
    padding: 5px 15px;
    border-radius: 200px;
    line-height: 30px;
    margin-right: 10px;
    left: 0px;
    position: absolute;
  }

  #point06 {
    margin: 0 0 40px 0;
  }
  #point06 .h3_basic01 {
    padding: 10px 0 8px 50px;
    background-image: none;
    line-height: 40px;
    position: relative;
  }
  #point06 .h3_basic01:before {
    content: "6";
    color: #fff;
    background-color: #82d7dc;
    font-size: 24px;
    padding: 5px 15px;
    border-radius: 200px;
    line-height: 30px;
    margin-right: 10px;
    left: 0px;
    position: absolute;
  }

  /* zoom */
  .figure01 {
    margin: 0 0 30px 0;
  }

  .page .figure01 p {
    margin: 0;
  }

  .zoom01 {
    padding: 5px 10px 10px 10px;
    text-align: right;
  }
  .zoom01 img {
    width: 50px;
  }

  /* 蜉�蜈･縺ｧ縺阪ｋ繝壹ャ繝� */
  .flL, .flR {
    width: 100%;
    margin: 0 0 20px 0;
  }

  .ttl_base span, .ttl_other span {
    display: block;
    font-size: 143%;
    margin: 0 10px 0 0;
  }

  .popup01 {
    padding: 12px 5px 10px 28.2%;
    line-height: 1.2;
    font-size: 92%;
  }
  .popup01 img {
		width: 21.5%;
		left: 0;
		top: 8%;
  }
  .popup01 p span {
    padding: 10px 10px 10px 10px;
  }

  .txt01 {
    padding: 0 10px 0 10px;
  }

  .table_basic02 {
    font-size: 90%;
  }
  .table_basic02 th {
    width: 50px;
    height: auto;
    padding: 10px 10px 10px 10px;
  }

  .faq-area ul {
    padding: 0 !important;
    margin: 0 !important;
  }
  .faq-area li {
    margin: 10px 0 20px;
    list-style: none;
    font-size: 1em;
  }
}