@charset "UTF-8";
@import url("base.css");
/*共通設定-------------------------------------------------------------------------------------------------------------------------------------*/
/*基本設定*/
#message {
  width: 80%;
  margin: 5em auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  #message #m_inner {
    width: 48%; }
    #message #m_inner h1 {
      font-size: 350%;
      color: #171c61;
      margin: 0 0 0.5em; }
    #message #m_inner p {
      width: 100%;
      font-size: 120%;
      margin: 0; }
  #message figure {
    width: 48%; }

#service {
  width: 70%;
  margin: 3em auto 0;
  background-color: #d7b782;
  border-radius: 6px;
  padding: 2.5em 5% 1em;
  position: relative; }
  #service h3 {
    position: absolute;
    top: -1.25em;
    left: 5%;
    background-color: #171c61;
    color: #fff;
    padding: 0.5em 2%;
    width: 30%;
    text-align: center;
    font-size: 156%;
    font-weight: bold;
    border-radius: 6px; }
  #service div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #service div figure {
      width: 12.28%; }
      #service div figure figcaption {
        margin: 1em 0 0;
        text-align: center; }

.back_w {
  width: 100%;
  background-color: #fff;
  padding: 2.5em 0%;
  margin: 10em auto 0; }

#process {
  width: 80%;
  margin: 0 auto;
  padding: 0;
  position: relative; }
  #process .h2_right {
    position: absolute;
    right: 0;
    top: -4.1em;
    background-image: url("../img/base/track_w.png");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 80px auto;
    padding: 1em 75px 0 90px;
    font-family: "Anton", sans-serif;
    font-size: 150%;
    color: #fff; }
  #process .h2_right02 {
    position: absolute;
    right: 0;
    top: -6.4em;
    width: 65px; }
  #process h2 {
    position: absolute;
    top: -3.7em;
    left: 0;
    font-size: 200%;
    color: #fff;
    padding: 1em 0 0 70px;
    background-image: url("../img/base/house02_w.png");
    background-repeat: no-repeat;
    background-size: 60px auto;
    background-position: left bottom; }
  #process #p_inner {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between; }
    #process #p_inner ol {
      width: 70%; }
      #process #p_inner ol li {
        background-color: #d7b782;
        border-radius: 6px;
        padding: 0.5em 2%; }
        #process #p_inner ol li:nth-child(n+2) {
          margin: 5em 0 0; }
        #process #p_inner ol li dl {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: flex-start; }
          #process #p_inner ol li dl dt {
            font-weight: bold;
            font-size: 150%;
            margin: 0 0.5em 0 0; }
          #process #p_inner ol li dl dd {
            font-size: 105%; }
            #process #p_inner ol li dl dd span {
              position: relative;
              width: 100%;
              display: block;
              background-color: #e60012;
              color: #fff;
              font-weight: bold;
              text-align: center;
              padding: 0.5em 2%;
              border-radius: 6px; }
              #process #p_inner ol li dl dd span::before {
                content: "";
                position: absolute;
                top: 100%;
                left: 80%;
                margin-left: -15px;
                border: 15px solid transparent;
                border-top: 15px solid #e60012; }
      #process #p_inner ol li + li {
        position: relative;
        margin-top: 50px;
        /*矢印画像の高さと配置を考慮して設定*/ }
      #process #p_inner ol li + li:before {
        content: '';
        display: block;
        position: absolute;
        top: -3.5em;
        /*矢印画像の高さと配置を考慮して設定*/
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 117px;
        height: 39px;
        background: url(../img/process/image09.png) no-repeat 50% 50%;
        /*矢印画像*/
        background-size: 117px auto; }
    #process #p_inner #right {
      width: 26%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      #process #p_inner #right figure {
        display: block;
        width: 250px;
        margin: 2em 0 0; }

/*共通設定ここまで-------------------------------------------------------------------------------------------------------------------------------------*/
/* pc */
@media screen and (min-width: 1300px) {
  /*メイン*/ }
/* tablet以下共通 ------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1299px) {
  /*メイン*/ }
/* tablet以下共通ここまで ------------------------------------------------------------------------------------------*/
/* tablet1 */
@media only screen and (min-width: 1024px) and (max-width: 1299px) {
  /*メイン*/
  #message #m_inner h1 {
    font-size: 300%; }
  #message #m_inner p {
    width: 100%;
    margin: 0; } }
/* tablet2  */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  /*基本設定*/
  /*メイン*/
  #message {
    margin: 150px auto 0;
    flex-direction: column-reverse; }
    #message #m_inner {
      width: 100%;
      margin: 1em 0 0; }
      #message #m_inner h1 {
        font-size: 350%;
        margin: 0 0 0.5em; }
        #message #m_inner h1 br {
          display: none; }
    #message figure {
      width: 100%; }

  #service h3 {
    width: 50%; }
  #service div figure {
    width: 23%; }
    #service div figure:nth-child(n+5) img {
      margin: 1em 0 0; }
    #service div figure figcaption {
      margin: 0.5em 0 0;
      text-align: center; }

  #process #p_inner {
    flex-direction: column; }
    #process #p_inner ol {
      width: 100%; }
    #process #p_inner #right {
      margin: 2em 0 0;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      #process #p_inner #right figure {
        display: block;
        width: 23%;
        margin: 0; } }
/* tablet3  */
@media only screen and (max-width: 767px) {
  /*基本設定*/
  /*メイン*/
  #message {
    width: 90%;
    margin: 120px auto 0;
    flex-direction: column-reverse; }
    #message #m_inner {
      width: 100%;
      margin: 1em 0 0; }
      #message #m_inner h1 {
        font-size: 250%; }
        #message #m_inner h1 br {
          display: none; }
    #message figure {
      width: 100%; }

  #service h3 {
    width: 80%; }
  #service div figure {
    width: 48%; }
    #service div figure:nth-child(n+3) img {
      margin: 1em 0 0; }
    #service div figure figcaption {
      margin: 0.5em 0 0;
      text-align: center; }

  #process #p_inner {
    flex-direction: column; }
    #process #p_inner ol {
      width: 100%; }
    #process #p_inner #right {
      margin: 2em 0 0;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      #process #p_inner #right figure {
        display: block;
        width: 23%;
        margin: 0; }

  #process {
    width: 90%; }
    #process .h2_right {
      display: none; }
    #process .h2_right02 {
      display: none; }
    #process #p_inner {
      width: 100%;
      flex-direction: column; }
      #process #p_inner ol {
        width: 100%; }
        #process #p_inner ol li:nth-child(n+2) {
          margin: 4em 0 0; }
        #process #p_inner ol li + li {
          position: relative;
          margin-top: 50px;
          /*矢印画像の高さと配置を考慮して設定*/ }
        #process #p_inner ol li + li:before {
          top: -2.5em;
          /*矢印画像の高さと配置を考慮して設定*/
          width: 58px;
          height: 19px;
          background-size: 58px auto; }
      #process #p_inner #right {
        width: 100%; }
        #process #p_inner #right figure {
          display: block;
          width: 150px;
          margin: 2em 0 0; } }
/* smartPhone1 */
@media only screen and (max-width: 499px) {
  /*基本設定*/
  /*メイン*/ }