html {
  font-family: 'Noto Sans JP', sans-serif; }

body {
  position: relative; }

.ov {
  transition: opacity 0.3s ease-out; }
  .ov:hover {
    opacity: 0.8; }

a {
  text-decoration: underline; }
  a:hover {
    text-decoration: none; }

.wrapper {
  width: 1200px;
  margin: 0 auto;
  text-align: center; }
  @media screen and (max-width: 768px) {
    .wrapper {
      width: 100%;
      min-width: 0; } }
  .wrapper .kv_area {
    width: 100%;
    height: 620px;
    background: url(/web/images/lp/ouchide_heim/kv_bg.jpg) center center no-repeat;
    position: relative;
    margin-bottom: 75px; }
    @media screen and (max-width: 768px) {
      .wrapper .kv_area {
        height: auto;
        padding: 20px 0 40px;
        margin-bottom: 30px;
        background: url(/web/images/lp/ouchide_heim/sp_kv_bg.jpg) center center/cover no-repeat; } }
    .wrapper .kv_area .logo {
      position: absolute;
      top: 20px;
      right: 20px; }
      @media screen and (max-width: 768px) {
        .wrapper .kv_area .logo {
          position: static;
          width: 100%;
          text-align: right;
          padding-right: 4%;
          margin-bottom: 35px; }
          .wrapper .kv_area .logo img {
            width: 150px; } }
    .wrapper .kv_area .img {
      position: absolute;
      top: 130px;
      left: 0;
      width: 100%;
      text-align: center; }
      @media screen and (max-width: 768px) {
        .wrapper .kv_area .img {
          position: static;
          margin-bottom: 40px; } }
      .wrapper .kv_area .img img {
        margin: 0 auto; }
    .wrapper .kv_area a.btn {
      position: absolute;
      left: 234px;
      bottom: 40px; }
      @media screen and (max-width: 768px) {
        .wrapper .kv_area a.btn {
          position: static; }
          .wrapper .kv_area a.btn img {
            width: 80%;
            margin: 0 auto; } }
  .wrapper .problem_area {
    width: 100%;
    text-align: center;
    margin-bottom: 70px; }
    @media screen and (max-width: 768px) {
      .wrapper .problem_area {
        margin-bottom: 35px; } }
    .wrapper .problem_area > .inner {
      width: 900px;
      margin: 0 auto; }
      @media screen and (max-width: 768px) {
        .wrapper .problem_area > .inner {
          width: 100%;
          padding: 0 4%; } }
      .wrapper .problem_area > .inner .ttl {
        margin-bottom: 40px; }
        @media screen and (max-width: 768px) {
          .wrapper .problem_area > .inner .ttl {
            margin-bottom: 20px; } }
  .wrapper .online_area {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background: url(/web/images/lp/ouchide_heim/online_bg.jpg) left top;
    border-radius: 10px; }
    @media screen and (max-width: 768px) {
      .wrapper .online_area {
        padding: 30px 4%; } }
    .wrapper .online_area p.ttl {
      margin-bottom: 10px; }
      .wrapper .online_area p.ttl img {
        margin: 0 auto; }
    .wrapper .online_area p.msg {
      width: 800px;
      margin: 0 auto;
      display: block;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 10px;
      padding: 20px 35px;
      font-size: 15px;
      line-height: 1.8;
      text-align: left; }
      @media screen and (max-width: 768px) {
        .wrapper .online_area p.msg {
          width: 100%;
          font-size: 13px;
          padding: 15px 3.5%; } }
  .wrapper .first_area {
    margin: 60px auto 75px; }
    @media screen and (max-width: 768px) {
      .wrapper .first_area {
        margin: 30px auto 35px; } }
    .wrapper .first_area > .inner {
      width: 900px;
      margin: 0 auto;
      padding: 0 100px; }
      @media screen and (max-width: 768px) {
        .wrapper .first_area > .inner {
          width: 100%;
          padding: 0 4%; } }
      .wrapper .first_area > .inner p.ttl {
        text-align: center;
        font-weight: bold;
        color: #e7a923;
        font-size: 27px;
        margin-bottom: 10px; }
        @media screen and (max-width: 768px) {
          .wrapper .first_area > .inner p.ttl {
            font-size: 18px;
            margin-bottom: 20px; } }
      .wrapper .first_area > .inner .bg_area {
        width: 100%;
        display: flex;
        justify-content: center;
        background: url(/web/images/lp/ouchide_heim/mark.jpg) right top no-repeat;
        padding: 15px 0;
        min-height: 150px; }
        @media screen and (max-width: 768px) {
          .wrapper .first_area > .inner .bg_area {
            background: none;
            min-height: 0;
            padding: 0;
            display: block; } }
        .wrapper .first_area > .inner .bg_area ul {
          text-align: left; }
          .wrapper .first_area > .inner .bg_area ul li {
            display: flex; }
            .wrapper .first_area > .inner .bg_area ul li:not(:last-child) {
              margin-bottom: 15px; }
            .wrapper .first_area > .inner .bg_area ul li .icon {
              width: 50px;
              margin-right: 10px; }
            .wrapper .first_area > .inner .bg_area ul li p {
              text-align: left;
              font-size: 15px;
              padding-top: 15px;
              font-weight: bold; }
              @media screen and (max-width: 768px) {
                .wrapper .first_area > .inner .bg_area ul li p {
                  width: calc(100% - 50px);
                  font-size: 14px; } }
  .wrapper .flow_area {
    width: 100%;
    background: #e5eef5;
    padding: 50px 0; }
    .wrapper .flow_area > .inner {
      width: 1100px;
      margin: 0 auto; }
      @media screen and (max-width: 768px) {
        .wrapper .flow_area > .inner {
          width: 100%;
          padding: 0 4%; } }
      .wrapper .flow_area > .inner p.ttl {
        font-size: 30px;
        text-align: center;
        font-weight: bold;
        margin-bottom: 50px; }
        @media screen and (max-width: 768px) {
          .wrapper .flow_area > .inner p.ttl {
            font-size: 20px;
            margin-bottom: 25px; } }
      .wrapper .flow_area > .inner ul {
        width: 100%;
        display: flex;
        justify-content: space-between; }
        @media screen and (max-width: 768px) {
          .wrapper .flow_area > .inner ul {
            display: block; } }
        .wrapper .flow_area > .inner ul li {
          width: 245px;
          background: #fff;
          text-align: center;
          border-radius: 10px;
          position: relative; }
          @media screen and (max-width: 768px) {
            .wrapper .flow_area > .inner ul li {
              width: 80%;
              margin: 0 auto; }
              .wrapper .flow_area > .inner ul li:not(:last-child) {
                margin-bottom: 45px; } }
          .wrapper .flow_area > .inner ul li:last-child:after {
            display: none; }
          .wrapper .flow_area > .inner ul li:after {
            content: "";
            display: block;
            background: url(/web/images/lp/ouchide_heim/flow_icon.png) center center no-repeat;
            width: 31px;
            height: 17px;
            position: absolute;
            right: -36px;
            top: calc(50% - 8px); }
            @media screen and (max-width: 768px) {
              .wrapper .flow_area > .inner ul li:after {
                background-image: url(/web/images/lp/ouchide_heim/sp_flow_icon.png);
                background-size: 45px;
                width: 48px;
                height: 29px;
                right: calc(50% - 24px);
                top: auto;
                bottom: -35px; } }
          .wrapper .flow_area > .inner ul li p.step {
            border-radius: 10px 10px 0 0;
            background: #fff331;
            line-height: 1;
            padding: 15px 0;
            font-size: 27px; }
          .wrapper .flow_area > .inner ul li .txt_area {
            padding: 30px 20px; }
            .wrapper .flow_area > .inner ul li .txt_area p.step_ttl {
              font-size: 20px;
              height: 2em;
              display: flex;
              align-items: center;
              justify-content: center; }
              @media screen and (max-width: 768px) {
                .wrapper .flow_area > .inner ul li .txt_area p.step_ttl {
                  display: block;
                  height: auto; } }
            .wrapper .flow_area > .inner ul li .txt_area .img {
              margin: 25px auto; }
            .wrapper .flow_area > .inner ul li .txt_area p.txt {
              text-align: left;
              font-size: 15px;
              line-height: 1.8; }
      .wrapper .flow_area > .inner p.btn_ttl {
        text-align: center;
        margin: 60px auto 10px; }
        @media screen and (max-width: 768px) {
          .wrapper .flow_area > .inner p.btn_ttl {
            margin-top: 30px; } }
      .wrapper .flow_area > .inner p.btn img {
        margin: 0 auto;
        transition: all 0.3s; }
        .wrapper .flow_area > .inner p.btn img:hover {
          opacity: 0.5; }
  .wrapper footer {
    text-align: center;
    margin: 70px auto 0;
    padding-bottom: 50px; }
    @media screen and (max-width: 768px) {
      .wrapper footer {
        margin-top: 35px;
        padding: 0 4% 25px; } }
    .wrapper footer .bnr {
      margin-bottom: 70px; }
      @media screen and (max-width: 768px) {
        .wrapper footer .bnr {
          margin-bottom: 35px; } }
      .wrapper footer .bnr a:hover img {
        transform: translate(0, -10px); }
      .wrapper footer .bnr a img {
        transition: all 0.3s;
        margin: 0 auto; }

/*--pc > 769px--*/
@media screen and (min-width: 769px) {
  .pc {
    display: block; }

  .pcImg {
    display: inline-block; }

  .sp {
    display: none !important; }

  .spImg {
    display: none !important; } }
/*--sp < 768px--*/
@media screen and (max-width: 768px) {
  .sp {
    display: block; }

  .spImg {
    display: inline-block; }

  .pc {
    display: none !important; }

  .pcImg {
    display: none !important; } }

/*# sourceMappingURL=common_layout.css.map */