@charset "UTF-8";
/* Welcome to Compass. Use this file to define print styles.
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */
body {
  margin: 0;
  padding: 0;
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-size: 1em;
  font-weight: 600; }

* {
  margin: 0; }

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

a {
  text-decoration: none; }

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom; }

.p {
  font-size: 1.2em;
  margin-bottom: .5em; }

.max_w {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.2em 2em; }

.header {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.5em 2em;
  text-align: center; }
  .header h1 {
    font-size: 1.5em;
    border: solid #000 2px;
    text-align: center;
    font-weight: 900;
    padding: 1em; }

.top .txt {
  font-size: 1em; }

.period {
  padding-top: 0; }
  .period .p_inner .p_dl {
    margin: 2em 0;
    position: relative;
    padding: 2em 3em;
    border-top: solid 2px black;
    border-bottom: solid 2px black; }
    .period .p_inner .p_dl::before, .period .p_inner .p_dl::after {
      content: '';
      position: absolute;
      top: -10px;
      width: 2px;
      height: -webkit-calc(100% + 20px);
      height: calc(100% + 20px);
      background-color: black; }
    .period .p_inner .p_dl::before {
      left: 10px; }
    .period .p_inner .p_dl::after {
      right: 10px; }
    .period .p_inner .p_dl .p_dt {
      font-size: 1.2em; }

.flow .f_p {
  font-size: 1.2em;
  margin-bottom: 2em; }
.flow .f_ol {
  padding: 0; }
  .flow .f_ol .flow_li {
    width: 90%;
    padding: 2em 1em;
    margin: 0 auto;
    text-align: center;
    border: solid #000 2px;
    list-style: none;
    position: relative; }
    .flow .f_ol .flow_li .step {
      position: absolute;
      top: -14px;
      left: 10%;
      background: #fff;
      padding: 0 1.5em;
      font-size: 1em; }
    .flow .f_ol .flow_li .f_box {
      display: flex;
      justify-content: center;
      align-items: center; }
      .flow .f_ol .flow_li .f_box .f_img {
        width: 10%;
        max-width: 50px;
        min-width: 35px;
        margin-left: 1em; }
  .flow .f_ol .arrow {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 21.7px 12.5px 0 12.5px;
    border-color: #000 transparent transparent transparent;
    margin: 1em auto; }
    .flow .f_ol .arrow:last-child {
      display: none; }

.flow_list .flow_ul {
  padding: 0; }
  .flow_list .flow_ul .flow_li_li {
    margin: 0 0 .5em 1.5em;
    font-weight: 500; }

.note .note_ul {
  padding: 0; }
  .note .note_ul .note_li {
    margin-bottom: .5em;
    list-style: none;
    font-weight: 500; }

.btn .btn_a {
  display: block;
  width: 50%;
  margin: 1.5em auto;
  padding: 1em 0;
  background: #000;
  font-size: 1.2em;
  text-align: center;
  color: #fff; }
  .btn .btn_a:hover {
    opacity: 0.8; }

.contact {
  font-weight: 500;
  padding-top: 0;
  margin-bottom: 1em; }
  .contact .contact_a {
    color: #000;
    font-weight: 900; }

@media (max-width: 480px) {
  html {
    font-size: 56.25%; }

  body {
    font-size: 1.25em; }

  .sp_br {
    display: block; }

  .flow .f_ol .flow_li .step {
    position: absolute;
    top: -10px;
    left: 10%;
    background: #fff;
    padding: 0 1.5em;
    font-size: 1em; } }