@keyframes arrowToBtm {
  0% {
    opacity: 0;
    height: 0; }
  50% {
    opacity: 1; }
  100% {
    opacity: 0;
    height: 100%; } }
.visual {
  width: 100%;
  max-width: 850px;
  margin: 0 auto 0;
  position: relative; }
  .visual .scroll {
    position: absolute;
    top: 53.184%;
    right: 8px;
    z-index: 1; }
    .visual .scroll .txt {
      color: #fff;
      font-size: 1.0rem;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl; }
    .visual .scroll .arrow {
      display: block;
      position: relative; }
      .visual .scroll .arrow:before, .visual .scroll .arrow:after {
        content: '';
        margin: auto;
        left: 0;
        right: 0;
        position: absolute; }
      .visual .scroll .arrow:before {
        width: 1px;
        height: 40px;
        background-color: #fff;
        top: 0; }
      .visual .scroll .arrow:after {
        width: 8px;
        height: 8px;
        margin: auto;
        vertical-align: middle;
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        top: 42px; }

@media screen and (min-width: 1080px) {
  .visual .scroll {
    top: 58.064%;
    right: 36px;
    z-index: 1; }
    .visual .scroll .txt {
      color: #fff;
      font-size: 1.0rem;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl; }
    .visual .scroll .arrow:before {
      height: 56px; }
    .visual .scroll .arrow:after {
      top: 58px; } }
.contents-nav {
  margin: -14px auto 42px; }

@media screen and (min-width: 1080px) {
  .contents-nav {
    margin: -11px auto 90px; } }
.intro {
  padding: 0 24px 0;
  margin: 0 auto 80px; }
  .intro .intro-ttl {
    margin: 0 auto 21px;
    font-size: 2.5rem;
    letter-spacing: .13em;
    white-space: nowrap; }
  .intro .intro-txt .txt {
    font-size: 1.3rem;
    line-height: 2.32; }

@media screen and (min-width: 1080px) {
  .intro {
    width: 850px;
    padding: 0;
    margin: 0 auto 156px;
    text-align: center; }
    .intro .intro-ttl {
      margin: 0 auto 48px;
      font-size: 3.4rem; }
    .intro .intro-txt .txt {
      font-size: 1.8rem;
      line-height: 2.2;
      letter-spacing: .15em; } }
.house .house-head {
  padding: 0 24px; }
.house .house-ttl {
  margin: 0 auto 6px;
  font-size: 1.8rem; }
.house .house-txt {
  margin: 0 auto 18px; }
  .house .house-txt .txt {
    font-size: 1.1rem;
    line-height: 1.82;
    letter-spacing: .12em; }
.house .house-flow {
  width: 100%;
  max-width: 1080px;
  padding: 62px 24px 0;
  margin: 0 auto 0;
  background-image: url("https://porowakka.co.jp/wp-content/themes/porowakka//house/img/house-flow_bg-sp.jpg");
  background-repeat: no-repeat;
  background-size: 46.25% auto;
  background-position: 100% 0; }
.house .flow-step {
  padding: 0 0 48px; }
  .house .flow-step:nth-child(1) .step-ttl .number {
    width: 48px; }
  .house .flow-step:nth-child(1) .step-ttl .txt {
    width: calc(100% - 48px);
    padding: 4px 0 0 24px; }
  .house .flow-step:nth-child(1) .flow-txt {
    position: relative; }
    .house .flow-step:nth-child(1) .flow-txt:before {
      content: '';
      position: absolute;
      width: 10px;
      height: 0;
      border-left: 2px solid #000;
      top: 0;
      left: 26px;
      background-image: url("https://porowakka.co.jp/wp-content/themes/porowakka//house/img/house-flow_arrow.svg");
      background-repeat: no-repeat;
      background-position: -2px calc(100% + 2px);
      animation: arrowToBtm 4s infinite; }
  .house .flow-step:nth-child(2) .step-ttl .number {
    width: 56px; }
  .house .flow-step:nth-child(2) .step-ttl .txt {
    width: calc(100% - 56px);
    padding: 4px 0 0 14px; }
.house .step-ttl {
  margin: 0 auto 16px;
  letter-spacing: -.4em; }
  .house .step-ttl .number,
  .house .step-ttl .txt {
    display: inline-block;
    letter-spacing: .15em;
    vertical-align: top; }
  .house .step-ttl .txt {
    font-size: 1.8rem;
    line-height: 1; }
    .house .step-ttl .txt .large {
      display: inline-block;
      padding: 6px 0 0;
      font-size: 3.6rem; }
.house .flow-txt {
  padding: 8px 0 40px 74px; }
  .house .flow-txt .txt {
    font-size: 1.1rem;
    letter-spacing: .1em;
    line-height: 1.82; }

@media screen and (min-width: 1080px) {
  .house .house-head {
    width: 850px;
    padding: 0;
    margin: 0 auto 64px; }
  .house .house-ttl {
    margin: 0 auto 12px;
    font-size: 3.0rem; }
  .house .house-txt {
    margin: 0 auto 0; }
    .house .house-txt .txt {
      font-size: 1.2rem;
      letter-spacing: .12em; }
  .house .house-flow {
    padding: 0;
    background-image: url("https://porowakka.co.jp/wp-content/themes/porowakka//house/img/house-flow_bg-pc.jpg");
    background-size: 345px auto;
    background-position: 100% 221px; }
  .house .flow-step {
    width: 850px;
    padding: 0 0 48px;
    margin: 0 auto 0; }
    .house .flow-step:nth-child(1) .step-ttl .number {
      width: 63px; }
    .house .flow-step:nth-child(1) .step-ttl .txt {
      width: calc(100% - 63px);
      padding: 4px 0 0 34px; }
    .house .flow-step:nth-child(1) .txt {
      letter-spacing: .046em; }
      .house .flow-step:nth-child(1) .txt .large {
        letter-spacing: .15em; }
    .house .flow-step:nth-child(1) .flow-txt {
      font-size: 1.5rem; }
      .house .flow-step:nth-child(1) .flow-txt .txt {
        letter-spacing: .1em; }
    .house .flow-step:nth-child(2) .step-ttl .number {
      width: 73px; }
    .house .flow-step:nth-child(2) .step-ttl .txt {
      width: calc(100% - 73px);
      padding: 4px 0 0 26px; }
    .house .flow-step:nth-child(2) .txt {
      letter-spacing: .03em; }
      .house .flow-step:nth-child(2) .txt .large {
        letter-spacing: .015em; }
    .house .flow-step:nth-child(2) .flow-txt {
      font-size: 1.4rem; }
      .house .flow-step:nth-child(2) .flow-txt .txt {
        letter-spacing: .12em; }
  .house .step-ttl {
    margin: 0 auto 38px; }
    .house .step-ttl .txt {
      font-size: 2.4rem; }
      .house .step-ttl .txt .large {
        display: inline-block;
        padding: 8px 0 0;
        font-size: 4.7rem; }
  .house .flow-txt {
    width: calc(494px + 72px);
    padding: 0 0 72px 98px; }
    .house .flow-txt .txt {
      font-size: 1.5rem; } }
.problem {
  padding: 0 24px 0;
  margin: 0 auto 76px; }
  .problem .problem-ttl {
    margin: 0 auto 36px;
    font-size: 1.4rem; }
  .problem .problem-list .problem-item {
    font-size: 1.2rem;
    border-right: 3px solid #000;
    border-bottom: 3px solid #000; }
    .problem .problem-list .problem-item:not(:last-child) {
      margin: 0 auto 32px; }
  .problem .problem-list .problem-q {
    padding: 8px 56px 16px 12px;
    letter-spacing: .1em;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
    position: relative; }
    .problem .problem-list .problem-q:before {
      content: '';
      width: 10px;
      height: 10px;
      margin: auto;
      vertical-align: middle;
      border-top: 3px solid #000;
      border-right: 3px solid #000;
      -webkit-transform: rotate(135deg);
      transform: rotate(135deg);
      -webkit-transition-duration: 0.3s;
      -moz-transition-duration: 0.3s;
      transition-duration: 0.3s;
      position: absolute;
      bottom: 26px;
      right: 24px; }
    .problem .problem-list .problem-q:hover {
      cursor: pointer;
      color: #BBD580; }
      .problem .problem-list .problem-q:hover:before {
        border-color: #BBD580; }
    .problem .problem-list .problem-q.on:before {
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      bottom: 20px; }
  .problem .problem-list .problem-a {
    display: none;
    padding: 16px 12px 20px;
    position: relative; }
    .problem .problem-list .problem-a:before {
      content: "";
      background-image: linear-gradient(to right, #000, #000 2px, transparent 2px, transparent 7px);
      background-size: 7px 2px;
      background-repeat: repeat-x;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0; }

@media screen and (min-width: 1080px) {
  .problem {
    width: 892px;
    padding: 0;
    margin: 0 auto 92px; }
    .problem .problem-ttl {
      margin: 0 auto 46px;
      font-size: 1.6rem; }
    .problem .problem-list {
      letter-spacing: -.4em; }
      .problem .problem-list .problem-item {
        display: inline-block;
        width: 274px;
        vertical-align: top;
        font-size: 1.5rem; }
        .problem .problem-list .problem-item:not(:last-child) {
          margin: inherit;
          margin-bottom: 40px; }
        .problem .problem-list .problem-item:not(:nth-child(3n)) {
          margin-right: 35px; }
      .problem .problem-list .problem-q {
        padding: 8px 48px 16px 8px; }
      .problem .problem-list .problem-a {
        padding: 20px 10px 22px;
        letter-spacing: .13em; } }
.contact {
  padding: 0 24px;
  margin: 0 auto 58px; }
  .contact .contact-ttl {
    margin: 0 auto 32px;
    font-size: 2.0rem;
    line-height: 1.4;
    letter-spacing: .12em;
    white-space: nowrap; }
    .contact .contact-ttl .small {
      font-size: 1.2rem;
      letter-spacing: .12em; }
  .contact .contact-choice .contact-tel .number,
  .contact .contact-choice .contact-tel .link,
  .contact .contact-choice .contact-mail .number,
  .contact .contact-choice .contact-mail .link {
    display: inline-block;
    width: 144px;
    margin-bottom: 4px;
    text-align: center;
    line-height: 1; }
    .contact .contact-choice .contact-tel .number a,
    .contact .contact-choice .contact-tel .link a,
    .contact .contact-choice .contact-mail .number a,
    .contact .contact-choice .contact-mail .link a {
      display: block;
      width: 100%;
      padding: 8px 0;
      position: relative;
      z-index: 1; }
      .contact .contact-choice .contact-tel .number a:before, .contact .contact-choice .contact-tel .number a:after,
      .contact .contact-choice .contact-tel .link a:before,
      .contact .contact-choice .contact-tel .link a:after,
      .contact .contact-choice .contact-mail .number a:before,
      .contact .contact-choice .contact-mail .number a:after,
      .contact .contact-choice .contact-mail .link a:before,
      .contact .contact-choice .contact-mail .link a:after {
        content: '';
        width: 100%;
        height: 70.968%;
        position: absolute;
        left: 0;
        z-index: -1; }
      .contact .contact-choice .contact-tel .number a:before,
      .contact .contact-choice .contact-tel .link a:before,
      .contact .contact-choice .contact-mail .number a:before,
      .contact .contact-choice .contact-mail .link a:before {
        border-top: 1px solid #7D7D7D;
        border-left: 1px solid #7D7D7D;
        top: 0; }
      .contact .contact-choice .contact-tel .number a:after,
      .contact .contact-choice .contact-tel .link a:after,
      .contact .contact-choice .contact-mail .number a:after,
      .contact .contact-choice .contact-mail .link a:after {
        border-bottom: 1px solid #7D7D7D;
        border-right: 1px solid #7D7D7D;
        bottom: 0; }
  .contact .contact-choice .contact-tel {
    margin: 0 auto 20px; }
    .contact .contact-choice .contact-tel .txt {
      font-size: 1.2rem;
      letter-spacing: .14em; }
    .contact .contact-choice .contact-tel .small {
      font-size: 1.1rem;
      letter-spacing: .08em; }
  .contact .contact-choice .contact-mail .link {
    font-size: 1.2rem; }
  .contact .contact-choice .contact-mail .txt {
    font-size: 1.2rem; }

@media screen and (min-width: 1080px) {
  .contact {
    width: 796px;
    padding: 0;
    margin: 0 auto 130px; }
    .contact .contact-ttl {
      margin: 0 auto 28px;
      font-size: 3.8rem;
      line-height: 1.3; }
      .contact .contact-ttl .small {
        font-size: 1.6rem; }
    .contact .contact-choice {
      letter-spacing: -.4em; }
      .contact .contact-choice .contact-tel,
      .contact .contact-choice .contact-mail {
        display: inline-block;
        vertical-align: top;
        letter-spacing: .15em; }
        .contact .contact-choice .contact-tel .number a,
        .contact .contact-choice .contact-tel .link a,
        .contact .contact-choice .contact-mail .number a,
        .contact .contact-choice .contact-mail .link a {
          width: auto;
          height: auto;
          -webkit-transition-duration: 0.3s;
          -moz-transition-duration: 0.3s;
          transition-duration: 0.3s; }
          .contact .contact-choice .contact-tel .number a:before, .contact .contact-choice .contact-tel .number a:after,
          .contact .contact-choice .contact-tel .link a:before,
          .contact .contact-choice .contact-tel .link a:after,
          .contact .contact-choice .contact-mail .number a:before,
          .contact .contact-choice .contact-mail .number a:after,
          .contact .contact-choice .contact-mail .link a:before,
          .contact .contact-choice .contact-mail .link a:after {
            -webkit-transition-duration: 0.3s;
            -moz-transition-duration: 0.3s;
            transition-duration: 0.3s; }
          .contact .contact-choice .contact-tel .number a:hover,
          .contact .contact-choice .contact-tel .link a:hover,
          .contact .contact-choice .contact-mail .number a:hover,
          .contact .contact-choice .contact-mail .link a:hover {
            color: #BBD580; }
            .contact .contact-choice .contact-tel .number a:hover:before, .contact .contact-choice .contact-tel .number a:hover:after,
            .contact .contact-choice .contact-tel .link a:hover:before,
            .contact .contact-choice .contact-tel .link a:hover:after,
            .contact .contact-choice .contact-mail .number a:hover:before,
            .contact .contact-choice .contact-mail .number a:hover:after,
            .contact .contact-choice .contact-mail .link a:hover:before,
            .contact .contact-choice .contact-mail .link a:hover:after {
              border-color: #BBD580; }
      .contact .contact-choice .contact-tel {
        margin: 0 56px 0 0; }
        .contact .contact-choice .contact-tel .number {
          width: 292px;
          font-size: 2.6rem; }
          .contact .contact-choice .contact-tel .number a {
            padding: 16px 0; }
        .contact .contact-choice .contact-tel .txt {
          font-size: 1.2rem;
          letter-spacing: .14em; }
        .contact .contact-choice .contact-tel .small {
          font-size: 1.2rem;
          letter-spacing: .15em; }
      .contact .contact-choice .contact-mail .link {
        width: 322px;
        font-size: 2.2rem; }
        .contact .contact-choice .contact-mail .link a {
          padding: 18px 0; }
      .contact .contact-choice .contact-mail .txt {
        font-size: 1.2rem;
        letter-spacing: .15em; } }
.kurasokka {
  padding: 0 24px;
  margin: 0 auto 96px; }
  .kurasokka .contact-ttl {
    margin: 0 auto 12px;
    font-size: 2.2rem;
    line-height: 1.5; }
    .kurasokka .contact-ttl .small {
      display: inline-block;
      margin: 0 auto 4px;
      font-size: 1.1rem;
      line-height: 1;
      letter-spacing: .1em; }
  .kurasokka .img {
    margin: 0 auto 26px; }
  .kurasokka .kurasokka-txt {
    margin: 0 auto 28px; }
    .kurasokka .kurasokka-txt .txt {
      font-size: 1.2rem;
      letter-spacing: .12em; }
  .kurasokka .link {
    display: inline-block;
    position: relative;
    z-index: 1; }
    .kurasokka .link:before, .kurasokka .link:after {
      content: '';
      width: 100%;
      height: 70.968%;
      -webkit-transition-duration: 0.3s;
      -moz-transition-duration: 0.3s;
      transition-duration: 0.3s;
      position: absolute;
      left: 0;
      z-index: -1; }
    .kurasokka .link:before {
      border-top: 1px solid #7D7D7D;
      border-left: 1px solid #7D7D7D;
      top: 0; }
    .kurasokka .link:after {
      border-bottom: 1px solid #7D7D7D;
      border-right: 1px solid #7D7D7D;
      bottom: 0; }
    .kurasokka .link:hover:before, .kurasokka .link:hover:after {
      border-color: #BBD580; }
    .kurasokka .link a {
      display: block;
      padding: 8px 37px 8px 15px;
      font-size: 1.1rem;
      line-height: 1;
      -webkit-transition-duration: 0.3s;
      -moz-transition-duration: 0.3s;
      transition-duration: 0.3s;
      position: relative; }
      .kurasokka .link a:before, .kurasokka .link a:after {
        content: '';
        width: 6px;
        height: 6px;
        margin: auto;
        vertical-align: middle;
        border-top: 1px solid #7D7D7D;
        border-right: 1px solid #7D7D7D;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        transition-duration: 0.3s;
        position: absolute;
        top: 0;
        bottom: 0; }
      .kurasokka .link a:before {
        right: 18px; }
      .kurasokka .link a:after {
        right: 24px; }
      .kurasokka .link a:hover {
        color: #BBD580; }
        .kurasokka .link a:hover:before, .kurasokka .link a:hover:after {
          border-color: #BBD580; }
    .kurasokka .link .pc_txt {
      display: none; }

@media screen and (min-width: 1080px) {
  .kurasokka {
    width: 796px;
    padding: 0;
    margin: 0 auto 110px;
    position: relative; }
    .kurasokka .contact-ttl {
      margin: 0 auto 32px;
      font-size: 3.0rem; }
      .kurasokka .contact-ttl .small {
        font-size: 1.5rem; }
    .kurasokka .img {
      width: 297px;
      margin: 0;
      position: absolute;
      top: 48px;
      right: 0; }
    .kurasokka .kurasokka-txt {
      width: 457px;
      margin: 0 0 28px; }
      .kurasokka .kurasokka-txt .txt {
        font-size: 1.4rem;
        letter-spacing: .15em;
        line-height: 2; }
    .kurasokka .link {
      width: 240px; }
      .kurasokka .link a {
        padding: 14px 35px 14px 35px;
        font-size: 1.2rem;
        letter-spacing: .15em; }
        .kurasokka .link a:before {
          right: 32px; }
        .kurasokka .link a:after {
          right: 38px; }
      .kurasokka .link .pc_txt {
        display: inline-block; } }

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