@charset "utf-8";
/* pc */

@media screen and (min-width: 751px) {
  #container {
    width: 1000px;
    margin: 0 auto
  }

  .container {
      max-width: 1000px;
      margin: 0 auto;
  }

  img.fv_sp, .text_sp, .img_sp {
    display: none;
  }
  img.fv_pc {
    width: 100%;
  }

  .fv_text {
    width: 85%;
    margin: 1.5em auto 0;
    font-size: 1.25em;
    line-height: 1.3em;
    text-align: justify;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  }

  #button {
    width: 700px;
    margin: 3em auto;
  }

  .btn_img img:hover {
    opacity: 0.8;
  }

  .btn_text {
    text-decoration: underline;
    text-align: center;
    padding-top: 0.4em;
  }

  #tokuten {
    width: 100%;
    padding: 2em 0;
    background-color: #f2efe4;
    overflow: auto;
  }

  .pre_title {
    width: 674px;
    margin: 0 auto 2em;
  }

  .pre_group {
    width: 90%;
    margin: 0 auto 1em;
    overflow: auto;
  }

  .pre_box {
    width: 32%;
    background-color: #fff;
    text-align: center;
    padding: 1em 0;
    float: left;
  }

  .box_title img {
    width: 90%;
  }

  .box_text {
    padding: 1em 0 1.3em;
    line-height: 1.5em;
  }

  .box_text_span {
    font-size: 0.8em;
  }

  .box_img img {
    width: 80%;
  }

  .box_ex {
    width: 90%;
    margin: 0 auto;
    font-size: 0.7em;
    text-align: left;
    padding-top: 1em;
  }

  .box_center {
    margin: 0 2%;
  }

  .box_ex2 {
    width: 90%;
    margin: 0 auto;
    font-size: 0.7em;
    text-align: center;
    padding-top: 1em;
  }

  .box_ex2_span {
    text-decoration: underline;
  }

  #service {
    margin: 6em auto;
  }

  .service_title {
    text-align: center;
  }

  .service_title img {
    width: 700px;
  }

  .service_text {
    width: 80%;
    margin: 3em auto;
    font-size: 1.1em;
    line-height: 1.7em;
  }

  .service_group {
    width: 90%;
    margin: 0 auto;
    overflow: auto;
  }

  .service_left {
    width: 50%;
    padding-top: 2em;
    float: left;
    text-align: center;
  }

  .time {
    font-size: 1.3em;
    font-weight: 600;
  }

  .box {
    padding: 0.5em 0;
    margin: 1.5em 0;
    border: solid 1px #666;
  }

  .box p {
    margin: 0;
    padding: 0;
    color: #333;
  }

  table , td, th {
    border: none;
  	border-collapse: collapse;
  }

  th {
  	width: 40%;
    text-align: left;
    vertical-align:top;
    font-size: 1.4em;
    font-weight: 600;
  }

  .square_pink {
    font-size: 1.25em;
    color: #ffcccc;
    vertical-align: top;
  }

  .square_yellow {
    font-size: 1.25em;
    color: #faed42;
    vertical-align: top;
  }

  .square_blue {
    font-size: 1.25em;
    color: #a2bada;
    vertical-align: top;
  }

  td {
    padding: 0 0 2em;
  	width: 60%;
    text-align: left;
    vertical-align:top;
    text-align: justify;
    font-size: 0.9em;
    line-height: 1.3em;
  }

  .service_left hr {
    border-top: dotted 2px #666;
  }

  .service_ex {
    width: 90%;
    margin: 1em auto 0;
    text-align: left;
    font-size: 0.8em;
  }

  .service_right {
    width: 45%;
    float: right;
  }

  .service_right img{
    width: 100%;
  }

  #step {
    background-color: #f2efe4;
    padding: 2em 0;
  }

  .step_all {
    width: 85%;
    margin: 0 auto;
    padding-bottom: 0.2em;
    background-color: #FFF;
  }

  .step_all h4 {
    background-color: #86713c;
    padding: 1.5em 0 0.5em 2em;
    color: #fff;
    font-size: 1.1em;
    font-weight: 400;
  }

  .step_group {
    width: 87%;
    margin: 2em auto;
    overflow: auto;
  }

  .step_left {
    width: 60%;
    float: left;
  }

  .step_text {
    font-size: 0.9em;
    text-align: justify;
  }

  .step_left h5 {
    font-size: 1.1em;
    margin: 1.5em 0 0.7em;
  }

  .step_ex {
    font-size: 0.8em;
    text-align: justify;
    padding-bottom: 1em;
  }

  .step_card {
    margin-top: 1em;
    padding: 1.5em 2em;
    border: solid 3px #e6e6e6;
  }

  .step_card h6 {
    font-size: 0.9em;
  }

  .step_card p {
    font-size: 0.8em;
    text-align: justify;
    padding: 0.7em 0;
  }

  .step_card img {
    width: 100%;
  }

  .step_right {
    width: 30%;
    float: right;
  }

  .step_right img {
    width: 100%;
  }

  .footer__container {
    width: 1024px;
    margin: 0 auto;
  }

}

/* smartPhone */

@media screen and (max-width: 750px) {
  #container {
    width: 100%;
    margin: 0 auto;
  }
  img.fv_pc, .br_pc, .text_pc, .img_pc  {
    display: none;
  }
  img.fv_sp {
    width: 100%;
  }

  .fv_text {
    width: 85%;
    margin: 1.5em auto 0;
    font-size: 1em;
    line-height: 1.4em;
    text-align: justify;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  }

  #button {
    width: 95%;
    margin: 1.5em auto;
  }

  .btn_img img:hover {
    opacity: 0.8;
  }

  .btn_text {
    text-decoration: underline;
    text-align: center;
    padding-top: 0.4em;
    font-size: 0.8em;
  }

  #tokuten {
    width: 100%;
    padding: 1em 0;
    background-color: #f2efe4;
    overflow: auto;
  }

  .pre_title {
    width: 95%;
    margin: 0 auto 1em;
  }

  .pre_group {
    width: 85%;
    margin: 0 auto;
  }

  .pre_box {
    background-color: #fff;
    text-align: center;
    padding: 1em 0;
    margin-bottom: 1em;
  }

  .box_title img {
    width: 80%;
  }

  .box_text {
    padding: 0.8em 0 1.2em;
    line-height: 1.5em;
    font-size: 1em;
  }

  .box_text_span {
    font-size: 0.8em;
  }

  .box_img img {
    width: 60%;
  }

  .box_ex {
    width: 90%;
    margin: 0 auto;
    font-size: 0.8em;
    text-align: left;
    padding-top: 1em;
  }

  .box_ex2 {
    width: 90%;
    margin: 0 auto;
    font-size: 0.8em;
    text-align: center;
    padding-top: 1em;
  }

  .box_ex2_span {
    text-decoration: underline;
  }

  #service {
    margin: 2em auto;
  }

  .service_title {
    text-align: center;
  }

  .service_title img {
    width: 95%;
  }

  .service_text {
    width: 85%;
    margin: 2em auto 2em;
    font-size: 0.9em;
    line-height: 1.3em;
    text-align: justify;
  }

  .service_group {
    width: 90%;
    margin: 0 auto;
  }

  .service_left {
    text-align: center;
  }

  .time {
    font-size: 1em;
    font-weight: 600;
  }

  .box {
    padding: 0.2em 0;
    margin: 1.5em 0;
    border: solid 1px #666;
  }

  .box p {
    margin: 0;
    padding: 0;
    color: #333;
    font-size: 0.9em;
  }

  table , td, th {
    border: none;
  	border-collapse: collapse;
  }

  th {
  	width: 40%;
    text-align: left;
    vertical-align:top;
    font-size: 1.1em;
    font-weight: 600;
  }

  .square_pink {
    font-size: 1.2em;
    color: #ffcccc;
    vertical-align: top;
  }

  .square_yellow {
    font-size: 1.2em;
    color: #faed42;
    vertical-align: top;
  }

  .square_blue {
    font-size: 1.2em;
    color: #a2bada;
    vertical-align: top;
  }

  td {
    padding: 0 0 2em;
  	width: 60%;
    text-align: left;
    vertical-align:top;
    text-align: justify;
    font-size: 0.9em;
    line-height: 1.3em;
  }

  .service_left hr {
    border-top: dotted 2px #666;
  }

  .service_ex {
    width: 90%;
    margin: 1em auto 2em;
    text-align: left;
    font-size: 0.8em;
  }

  .service_right img{
    width: 100%;
  }

  #step {
    background-color: #f2efe4;
    padding: 2em 0;
  }

  .step_all {
    width: 90%;
    margin: 0 auto;
    padding-bottom: 0.2em;
    background-color: #FFF;
  }

  .step_all h4 {
    background-color: #86713c;
    color: #fff;
    font-size: 1em;
    font-weight: 400;
    text-align: center;
    padding: 0.8em 0;
  }

  .step_group {
    width: 90%;
    margin: 1em auto;
  }

  .step_text {
    font-size: 0.9em;
    line-height: 1.3em;
    text-align: justify;
  }

  .step_left h5 {
    font-size: 0.9em;
    margin: 1em 0 0.7em;
  }

  .step_ex {
    font-size: 0.8em;
    text-align: justify;
    padding-bottom: 2em;
  }

  .step_right {
    text-align: center;
  }

  .step_right img {
    width: 70%;
  }

  .step_card {
    margin-top: 1em;
    padding: 0.8em 1em;
    border: solid 3px #e6e6e6;
  }

  .step_card h6 {
    font-size: 0.8em;
  }

  .step_card p {
    font-size: 0.7em;
    line-height: 1em;
    text-align: justify;
    padding: 0.7em 0;
  }

  .step_card img {
    width: 100%;
  }

  .footer__container {
    width: 100%;
  }

}

/* 共通 */

body {
  margin-right: auto;
  margin-left: auto;
}

.footer p, dt, .footer-navi__areaname {
  color: #FFF;
}

.footer a:link {
  color: #fff;
}

.footer a:visited {
  color: #fff;
}

.footer a:active {
  color: #fff;
}

.footer a:hover {
  color: #fff;
}

/*}*/