@charset "UTF-8";


strong { font-weight: bold; }
.pc { display: block; }
.sp { display: none; }
img.pc { display: inline; }
img.sp { display: none; }
table.pc { display: table; }
table.sp { display: none; }

@media screen and (max-width: 767px) {
	.pc { display: none; }
	.sp { display: block; }
	img.pc { display: none; }
	img.sp { display: inline; }
	table.pc { display: none; }
	table.sp { display: table; }
}

.nav-hoewto { text-align: center; }
.nav-hoewto li { display: inline-block; margin: 0 75px 0 0; }
.nav-hoewto li a:hover img { opacity: 0.7; }
.nav-hoewto li:last-child { margin: 0; }

@media screen and (max-width: 767px) {
	.nav-hoewto { text-align: center; }
	.nav-hoewto li { width: 20%; display: inline-block; margin: 0 2%; }
	.nav-hoewto li img { width: 100%; }
}

.sec-howto { margin-bottom: 140px; }
.ttl-howto-01 { margin-bottom: 60px; padding-bottom: 20px; }
.ttl-howto-01 img { width: 100%; }
.ttl-howto-01 p { display: inline-block; vertical-align: middle; }
.ttl-howto-01 dl { display: inline-block; width: 71%; padding-left: 2%; vertical-align: middle; }
.ttl-howto-01 dt { margin-bottom: 10px; font-size: 24px; font-weight: bold; line-height: 1.2; }
.ttl-howto-01 .ico-ttl-01 { width: 11%; }
.ttl-howto-01 .img-ttl-01 { width: 16%; }

@media screen and (max-width: 767px) {
	.ttl-howto-01 p { vertical-align: top; }
	.ttl-howto-01 dl { width: 82%; }
	.ttl-howto-01 dt { font-size: 18px; }
	.ttl-howto-01 .ico-ttl-01 { width: 15%; }
	.ttl-howto-01 .img-ttl-01 { display: none; }
}


.box-ttl { margin-bottom: 15px; }
.ttl-howto-02 { float: left; padding-left: 50px; font-size: 22px; font-weight: bold; }
.ico-howto-01 { background: url(../img/ico_number_01.png) no-repeat left top 0.2em; }
.ico-howto-02 { background: url(../img/ico_number_02.png) no-repeat left top 0.2em; }
.ico-howto-03 { background: url(../img/ico_number_03.png) no-repeat left top 0.2em; }
.ico-howto-04 { background: url(../img/ico_number_04.png) no-repeat left top 0.2em; }
.ico-howto-05 { background: url(../img/ico_number_05.png) no-repeat left top 0.2em; }
.ico-howto-06 { background: url(../img/ico_number_06.png) no-repeat left top 0.2em; }
.ico-howto-07 { background: url(../img/ico_number_07.png) no-repeat left top 0.2em; }
.ico-howto-08 { background: url(../img/ico_number_08.png) no-repeat left top 0.2em; }
.ico-howto-09 { background: url(../img/ico_number_09.png) no-repeat left top 0.2em; }
.ico-howto-10 { background: url(../img/ico_number_10.png) no-repeat left top 0.2em; }
.ico-howto-11 { background: url(../img/ico_number_11.png) no-repeat left top 0.2em; }
.ico-howto-12 { background: url(../img/ico_number_12.png) no-repeat left top 0.2em; }
.ico-howto-13 { background: url(../img/ico_number_13.png) no-repeat left top 0.2em; }
.ico-howto-14 { background: url(../img/ico_number_14.png) no-repeat left top 0.2em; }
.ico-howto-15 { background: url(../img/ico_number_15.png) no-repeat left top 0.2em; }
.ico-howto-16 { background: url(../img/ico_number_16.png) no-repeat left top 0.2em; }
.ico-howto-17 { background: url(../img/ico_number_17.png) no-repeat left top 0.2em; }


.txt-time { float: right; padding-left: 20px; }
.ico-time-01 { background: url(../img/ico_time_01.png) no-repeat left center; }
.ico-time-02 { background: url(../img/ico_time_02.png) no-repeat left center; }
.ico-time-03 { background: url(../img/ico_time_03.png) no-repeat left center; }
.ico-time-04 { background: url(../img/ico_time_04.png) no-repeat left center; }
.ico-time-05 { background: url(../img/ico_time_05.png) no-repeat left center; }
.ico-time-06 { background: url(../img/ico_time_06.png) no-repeat left center; }
.ico-time-07 { background: url(../img/ico_time_07.png) no-repeat left center; }
.ico-time-08 { background: url(../img/ico_time_08.png) no-repeat left center; }
.ico-time-09 { background: url(../img/ico_time_09.png) no-repeat left center; }
.ico-time-10 { background: url(../img/ico_time_10.png) no-repeat left center; }
.ico-time-11 { background: url(../img/ico_time_11.png) no-repeat left center; }
.ico-time-12 { background: url(../img/ico_time_12.png) no-repeat left center; }
.ico-time-13 { background: url(../img/ico_time_13.png) no-repeat left center; }
.ico-time-14 { background: url(../img/ico_time_14.png) no-repeat left center; }
.txt-lead-01 { margin-bottom: 20px; line-height: 2; }
.btn-info-01 { overflow: hidden; }
.btn-info-01 .button { float: right; width: 500px; margin-top: 30px; }
.btn-info-02 { overflow: hidden; }
.btn-info-02 .button { float: right; width: 600px; margin-top: 30px; }
.ico-arrow { margin: 30px 0 60px; text-align: center; }

@media screen and (max-width: 767px) {
	.ttl-howto-02 { float: none; padding-left: 5%; margin-bottom: 10px; font-size: 18px; }
	.ico-howto-01 { background-size: 5% auto; }
	.ico-howto-02 { background-size: 5% auto; }
	.ico-howto-03 { background-size: 5% auto; }
	.ico-howto-04 { background-size: 5% auto; }
	.ico-howto-05 { background-size: 5% auto; }
	.ico-howto-06 { background-size: 5% auto; }
	.ico-howto-07 { background-size: 5% auto; }
	.ico-howto-08 { background-size: 5% auto; }
	.ico-howto-09 { background-size: 5% auto; }
	.ico-howto-10 { background-size: 5% auto; }
	.ico-howto-11 { background-size: 5% auto; }
	.ico-howto-12 { background-size: 5% auto; }
	.ico-howto-13 { background-size: 5% auto; }
	.ico-howto-14 { background-size: 5% auto; }
	.ico-howto-15 { background-size: 5% auto; }
	.ico-howto-16 { background-size: 5% auto; }
	.txt-time { float: none; background-size: 2.4% auto; }
	.btn-info-01 .button { float: none; width: auto; padding: 5px 20px; font-size: 14px; }
}

@media screen and (max-width: 640px) {
		.ttl-howto-02 { padding-left: 8%; }
		.ico-howto-01 { background-size: 6.5% auto; }
		.ico-howto-02 { background-size: 6.5% auto; }
		.ico-howto-03 { background-size: 6.5% auto; }
		.ico-howto-04 { background-size: 6.5% auto; }
		.ico-howto-05 { background-size: 6.5% auto; }
		.ico-howto-06 { background-size: 6.5% auto; }
		.ico-howto-07 { background-size: 6.5% auto; }
		.ico-howto-08 { background-size: 6.5% auto; }
		.ico-howto-09 { background-size: 6.5% auto; }
		.ico-howto-10 { background-size: 6.5% auto; }
		.ico-howto-11 { background-size: 6.5% auto; }
		.ico-howto-12 { background-size: 6.5% auto; }
		.ico-howto-13 { background-size: 6.5% auto; }
		.ico-howto-14 { background-size: 6.5% auto; }
		.ico-howto-15 { background-size: 6.5% auto; }
		.ico-howto-16 { background-size: 6.5% auto; }
}
@media screen and (max-width: 480px) {
			.txt-time { float: none; background-size: 4% auto; }
}

.howto-col1 .lead { margin-bottom: 20px; line-height: 2; }
.howto-col1 ul { margin-bottom: 60px; }
.howto-col1 li { display: inline-block; width: 31.4%; margin-right: 1.6%; }
.howto-col1 li:last-child { margin-right: 0; }
.howto-col1 li img { width: 100%; }
.howto-col2 .box-col2-01 { display: table-cell; width: 450px; }
.howto-col2 .box-col2-01 .lead { margin-bottom: 20px; line-height: 2; }
.howto-col2 .box-col2-01 dl { padding: 20px 25px; }
.howto-col2 .box-col2-01 dt { margin-bottom: 5px; font-size: 18px; font-weight: bold; }
.howto-col2 .box-col2-01 dd { line-height: 2; }
.howto-col2 .box-col2-02 { display: table-cell; width: 400px; padding-left: 50px; text-align: right; }
.howto-col2 .box-col2-03 { display: table-cell; width: 470px; }
.howto-col2 .box-col2-04 { display: table-cell; width: 430px; }
.howto-col2 .box-col2-04 p{ float: left; width: 48%; margin-right: 3%; }
.howto-col2 .box-col2-04 p img { width: 100%; }
.howto-col2 .box-col2-04 p:last-child{ margin: 0; }
.howto-col2 .icon-check { position: absolute; top : -10px; right: 15px; }
.box-col1-01 .inner { padding: 18px 40px 30px 30px; }
.box-col1-01 dl { display:table-cell; padding-right: 30px; }
.box-col1-01 dt { margin-bottom: 5px; font-size: 18px; font-weight: bold; }
.box-col1-01 dd { line-height: 2; }
.box-col1-01 .icon-check { position: absolute; top : -20px; right: 250px; }
.box-col1-01 .img-box { display: table-cell; width: 200px; text-align: right; }
.img-photo img { width: 100%; }

@media screen and (max-width: 767px) {
	
	.howto-col2 .box-col2-01 { display: block; width: 100%; }
	.howto-col2 .box-col2-02-sp { display: block; width: 100%; margin-bottom: 20px; padding-left: 0; }
	.howto-col2 .box-col2-02-sp img { width: 100%; }
	.howto-col2 .box-col2-03 { display: block; width: 100%; }
	.howto-col2 .box-col2-04 { display: block; width: 100%; margin-top: 20px; }
	.howto-col2 .icon-check { top :-20px ; right: 0; }
	.box-col1-01 .inner { padding: 20px 25px; }
	.box-col1-01 dl { display: block; padding-right: 0; margin-bottom: 20px; }
	.box-col1-01 .icon-check { top : -20px; right: 0; }
	.box-col1-01 .img-box { display: block; width: 100%; }
	.box-col1-01 .img-box img { width: 100%; }
	
}
@media screen and (max-width: 640px) {
		.howto-col2 .icon-check { width: 15%; }
		.howto-col2 .icon-check img { width: 100%; }
		.box-col1-01 .icon-check { width: 15%; }
		.box-col1-01 .icon-check img { width: 100%; }
}

/* sec-howto-01 */
.sec-howto-01 .ttl-howto-01 { background: url(../img/ico_line_01.png) repeat-x left bottom; }
.sec-howto-01 .list-figure li { float: left; width: 16.66%; text-align: center; }
.sec-howto-01 .list-figure li img { width: 100%; }
.sec-howto-01 .list-figure figcaption { margin-top: 5px; }
.sec-howto-01 .howto-col1 .boxT { position: relative; padding-top: 1%; background: url(../img/bg_check_04.png) no-repeat left top; background-size: 100% auto; }
.sec-howto-01 .howto-col1 .boxB { padding-bottom: 1%; background: url(../img/bg_check_06.png) no-repeat left bottom; background-size: 100% auto; }
.sec-howto-01 .howto-col1 .boxM { background: url(../img/bg_check_05.png) repeat-y; background-size: contain; }
.sec-howto-01 .howto-col2 .boxT { position: relative; padding-top: 2%; background: url(../img/bg_check_01.png) no-repeat left top; background-size: 100% auto; }
.sec-howto-01 .howto-col2 .boxB { padding-bottom: 2%; background: url(../img/bg_check_03.png) no-repeat left bottom; background-size: 100% auto; }
.sec-howto-01 .howto-col2 .boxM { background: url(../img/bg_check_02.png) repeat-y; background-size: contain; }

@media screen and (max-width: 767px) {
	.sec-howto-01 .list-figure li { width: 33%; margin-bottom: 10px; }
}


/* sec-howto-02 */
.sec-howto-02 .ttl-howto-01 { background: url(../img/ico_line_02.png) repeat-x left bottom; }
.sec-howto-02 .howto-col2 .boxT { position: relative; padding-top: 2%; background: url(../img/bg_check_07.png) no-repeat left top; background-size: 100% auto; }
.sec-howto-02 .howto-col2 .boxB { padding-bottom: 2%; background: url(../img/bg_check_09.png) no-repeat left bottom; background-size: 100% auto; }
.sec-howto-02 .howto-col2 .boxM { background: url(../img/bg_check_08.png) repeat-y; background-size: contain; }


/* sec-howto-03 */
.sec-howto-03 .ttl-howto-01 { background: url(../img/ico_line_03.png) repeat-x left bottom; }
.sec-howto-03 .boxT { position: relative; padding-top: 1%; background: url(../img/bg_check_10.png) no-repeat left top; background-size: 100% auto; }
.sec-howto-03 .boxB { padding-bottom: 1%; background: url(../img/bg_check_12.png) no-repeat left bottom; background-size: 100% auto; }
.sec-howto-03 .boxM { background: url(../img/bg_check_11.png) repeat-y; background-size: contain; }
.sec-howto-03 .mab35 { margin-bottom: 35px; }

@media screen and (max-width: 767px) {
	/* sec-howto-03 */
	.sec-howto-03 .mab35 { margin-bottom: 0; }

}


/* sec-howto-04 */
.sec-howto-04 .ttl-howto-01 { background: url(../img/ico_line_04.png) repeat-x left bottom; }
.sec-howto-04 .img-photo img { width: 50%; }
.sec-howto-04 .img-photo-02 li { float: left; width: 50%; }
.sec-howto-04 .img-photo-02 li img { width: 95.55%; }
.sec-howto-04 .img-photo-02 li:last-child { text-align: right; }

@media screen and (max-width: 767px) {
	.sec-howto-04 .img-photo img { width: 100%; }

}

@media screen and (max-width: 459px) {
.sec-howto-04 .img-photo-02 li { float: none; width: 100%; }
.sec-howto-04 .img-photo-02 li img { width: 100%; }

}











/* sec-about-01
---------------------------------------------------------- */
.sec-about-01 { margin-bottom: 95px;  }
@media screen and (max-width: 767px) {
  .sec-about-01 { margin-bottom: 40px;  }
}

/* sec-about-01
---------------------------------------------------------- */
.sec-about-02 { margin-bottom: 85px;  }
@media screen and (max-width: 767px) {
  .sec-about-02 { margin-bottom: 40px;  }
}

/* ttl-about-01
---------------------------------------------------------- */
.ttl-about-01 { font-size: 24px; }
@media screen and (max-width: 767px) {
  .ttl-about-01 { font-size: 20px;  }
}

/* ttl-about-02
---------------------------------------------------------- */
.ttl-about-02 { font-size: 22px; }
@media screen and (max-width: 767px) {
  .ttl-about-02 { font-size: 18px;  }
}

/* img-about-01
---------------------------------------------------------- */
.img-about-01 { margin-bottom: 22px; }
@media screen and (max-width: 767px) {
  .img-about-01 { margin-bottom: 15px; }
}

/* img-about-02
---------------------------------------------------------- */
.img-about-02 {
  margin-top: 10px;
  text-align: center;
}
  .img-about-02 img { max-width: 100%; }

.txt-about-01 {
  margin-bottom: 20px;
  line-height: 2;
}

/* btn-about-01
---------------------------------------------------------- */
.btn-about-01 { overflow: hidden; }
  .btn-about-01 .button {
    float: right;
    width: 400px;
    padding: 7px 30px;
    font-size: 16px;;
  }

@media screen and (max-width: 767px) {
  .btn-about-01 .button {
    float: none;
    width: auto;
    padding: 5px 20px;
    font-size: 14px;
  }
}

.grid-about-01 { padding-top: 30px; }
.box-about-card-01 .txt-info { letter-spacing: -0.5px; }

/* list-about-01
---------------------------------------------------------- */
.list-about-01 { padding: 25px 0 0 55px; }
@media screen and (max-width: 767px) {
  .list-about-01 { padding: 0 0 0 25px; }
}

/* box-about-01
---------------------------------------------------------- */
.box-about-01 {
  margin: 20px 0 50px;
  padding: 30px 20px 35px 30px;
  background-color: #f4f4f1;
}
  .box-about-01 .ttl-main {
    margin-bottom: 6px;
    font-weight: bold;
    font-size: 18px;
  }
  .box-about-01 .box-content {
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
  }
    .box-about-01 .box-image {
      -ms-flex: 0 0 280px;
      -webkit-flex: 0 0 280px;
      flex: 0 0 280px;
    }
    .box-about-01 .box-info {
      -ms-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      margin-top: -4px;
      padding-left: 15px;
    }
      .box-about-01 .box-info > p { margin-bottom: 25px; }
      .box-about-01 .box-info > p:last-child { margin-bottom: 0; }

@media screen and (max-width: 767px) {
  .box-about-01 {
    margin: 10px 0 25px;
    padding: 15px;
  }
    .box-about-01 .ttl-main { font-size: 15px; }
    .box-about-01 .box-content { display: block; }
      .box-about-01 .box-image {
        margin-bottom: 15px;
        text-align: center;
      }
        .box-about-01 .box-image img { max-width: 100%; }
      .box-about-01 .box-info {
        margin: 0;
        padding-left: 0;
      }
        .box-about-01 .box-info > p { margin-bottom: 15px; }
}

/* btn-about-02
---------------------------------------------------------- */
.box-about-02 { padding-left: 15px; }
  .box-about-02 .ttl-main {
    margin-bottom: 25px;
    font-family: 'Sawarabi Mincho';
    font-size: 20px;
  }
  .box-about-02 .list-data { line-height: 1.375; }
    .box-about-02 .list-data dt {
      padding: 15px 5px 5px;
      font-weight: bold;
      font-size: 16px;
    }
    .box-about-02 .list-data dd {
      padding: 0 5px 8px;
      border-bottom: 1px solid #c2c2c2;
    }

@media screen and (max-width: 767px) {
  .box-about-02 { padding-left: 0; }
    .box-about-02 .ttl-main {
      margin-bottom: 10px;
      font-size: 16px;
    }
    .box-about-02 .list-data dt {
      padding: 10px 5px 5px;
      font-size: 14px;
    }
}