@charset "UTF-8";

@media screen and (min-width: 1080px) {
  div.column {
    width: 1080px;
    margin: 0 auto;
    padding: 0 0 100px 0;
    display: flex;
    justify-content: space-between;
  }

  div.column dl {
    width: 344px;
    padding: 85px 0 0 0;
  }

  div.column a {
    text-decoration: none;
    color: #222;
  }

  span.dashed {
    border-bottom: 1PX dashed #333;
  }

  dl.passive {
    background: #80bfff url(../image/number01.png) no-repeat top center;
  }

  dl.kakunin {
    background: #80bfff url(../image/number02.png) no-repeat top center;
  }

  dl.virtualhouse {
    background: #80bfff url(../image/number03.png) no-repeat top center;
  }

  div.column dt {
    width: 254px;
    margin: 0 30px 15px 30px;
    padding: 15px;
    font-size: 1.6rem;
    text-align: center;
    background-color: #fff;
    border-radius: 5px;
    font-weight: bold;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", "Yu Gothic", sans-serif;
  }

  dd.passive,
  dd.virtualhouse,
  dd.kakunin {
    width: 284px;
    padding: 165px 30px 20px 30px;
    font-size: 1.6rem;
  }

  dd.passive {
    background: url(../image/ddpassive.png) no-repeat top center;
  }

  dd.virtualhouse {
    background: url(../image/ddvirtual.png) no-repeat top center;
  }

  dd.kakunin {
    background: url(../image/ddkakunin.png) no-repeat top center;
  }

  dd.second {
    padding: 0 30px 30px 30px;
    font-size: 1.6rem;
    color: #222;
  }
}

@media screen and (min-width:600px) and (max-width:1079px) {
  ul.ordinary {
    list-style: none;
    width: 100%;
    margin: 0 auto;
    padding: 0 0 6% 0;
    box-sizing: border-box;
  }

  ul.ordinary li {
    position: relative;
    padding: 0 0 0 3.2rem;
    margin-bottom: ;
    border: ;
    font-size: 1.6rem;
  }

  ul.ordinary li:after,
  ul.ordinary li:before {
    position: absolute;
    content: '';
  }

  ul.ordinary li:before {
    top: 0.5em;
    left: 0.2em;
    width: 12px;
    height: 12px;
    border: 2px solid #FFA64D;
    transform: rotate(15deg);
    opacity: 1;
  }

  ul.ordinary li:after {
    top: 0.9em;
    left: 0.7em;
    width: 11px;
    height: 11px;
    background: #80bfff;
    transform: rotate(45deg);
    opacity: 0.6;
  }

  div.column {
    width: 100%;
    margin: 0 auto;
    padding: 0 4% 3% 4%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
  }

  div.column a {
    width: 32%;
    text-decoration: none;
    color: #222;
  }

  div.column dl {
    width: 100%;
    padding-top: 24.7%;
    box-sizing: border-box;
  }

  dl.passive {
    background: #80bfff url(../image/number01.png) no-repeat top center;
    background-size: contain;
  }

  dl.kakunin {
    background: #80bfff url(../image/number02.png) no-repeat top center;
    background-size: contain;
  }

  dl.virtualhouse {
    background: #80bfff url(../image/number03.png) no-repeat top center;
    background-size: contain;
  }

  div.column dt {
    margin: 0 5% 8% 5%;
    padding: 5% 3%;
    font-size: 1.6rem;
    text-align: center;
    background-color: #fff;
    border-radius: 5px;
    font-weight: bold;
    box-sizing: border-box;
  }

  span.dashed {
    border-bottom: 1PX dashed #333;
  }

  dd.passive {
    width: 100%;
    padding-top: 52%;
    padding-right: 7%;
    padding-left: 7%;
    font-size: 1.6rem;
    color: #222;
    background: url(../image/smallddpassive.png) no-repeat top center;
    background-size: contain;
    box-sizing: border-box;
  }

  dd.virtualhouse {
    width: 100%;
    padding-top: 52%;
    padding-right: 7%;
    padding-left: 7%;
    font-size: 1.6rem;
    color: #222;
    background: url(../image/smallddvirtual.png) no-repeat top center;
    background-size: contain;
    box-sizing: border-box;
  }

  dd.kakunin {
    width: 100%;
    padding-top: 52%;
    padding-right: 7%;
    padding-left: 7%;
    font-size: 1.6rem;
    color: #222;
    background: url(../image/smallddkakunin.png) no-repeat top center;
    background-size: contain;
    box-sizing: border-box;
  }

  dd.second {
    width: 100%;
    padding: 4% 7%;
    font-size: 1.6rem;
    color: #222;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 599px) {
  div.column {
    width: 100%;
    padding: 0 4% 10% 4%;
    box-sizing: border-box;
  }

  div.column a {
    width: 100%;
    text-decoration: none;
    box-sizing: border-box;
  }

  div.column dl {
    width: 100%;
    margin-bottom: 4%;
    border: 1px solid #4da6ff;
    border-radius: 0 0 10px 10px;
    box-sizing: border-box;
  }

  div.column dt {
    width: 100%;
    padding: 3%;
    font-size: 1.6rem;
    text-align: left;
    color: #fff;
    font-weight: bold;
    border-bottom: 1px solid #4da6ff;
    box-sizing: border-box;
  }

  dt.passive {
    background: #80bfff url(../image/step01.png) no-repeat top right;
    background-size: contain;
  }

  dt.kakunin {
    background: #80bfff url(../image/step02.png) no-repeat top right;
    background-size: contain;
  }

  dt.virtual {
    background: #80bfff url(../image/step03.png) no-repeat top right;
    background-size: contain;
  }

  span.dashed {
    border-bottom: 1PX dashed #fff;
  }

  dd.passive {
    width: 100%;
    margin-top: 3%;
    padding-top: 52%;
    padding-right: 4%;
    padding-left: 4%;
    font-size: 1.6rem;
    color: #222;
    background: url(../image/smallddpassive.png) no-repeat top center;
    background-size: contain;
    box-sizing: border-box;
  }

  dd.virtualhouse {
    width: 100%;
    margin-top: 3%;
    padding-top: 52%;
    padding-right: 4%;
    padding-left: 4%;
    font-size: 1.6rem;
    color: #222;
    background: url(../image/smallddvirtual.png) no-repeat top center;
    background-size: contain;
    box-sizing: border-box;
  }

  dd.kakunin {
    width: 100%;
    margin-top: 3%;
    padding-top: 52%;
    padding-right: 4%;
    padding-left: 4%;
    font-size: 1.6rem;
    color: #222;
    background: url(../image/smallddkakunin.png) no-repeat top center;
    background-size: contain;
    box-sizing: border-box;
  }

  dd.second {
    width: 100%;
    padding: 4%;
    font-size: 1.6rem;
    color: #222;
    box-sizing: border-box;
  }

  a.work {
    text-decoration: none;
    color: #555;
  }
}