article {
  float: left;
  width: 100%; }

header {
  position: absolute;
  top: 0;
  left: 0; }

.mainvisual {
  float: left;
  width: 100%;
  height: auto;
  background: url(/img/201/22264795_m.jpg) no-repeat;
  background-size: 130% auto;
  background-position: top left;
  text-align: center;
  background-color: #b7b4ab; }
  .mainvisual > .wrapper {
    width: 1000px;
    position: relative;
    margin: auto;
    text-align: center;
    padding: 32px 0 48px; }
    .mainvisual > .wrapper > img {
      float: none;
      width: 820px;
      filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.3)); }
    .mainvisual > .wrapper > .searchbox {
      float: left;
      width: 100%; }
      .mainvisual > .wrapper > .searchbox > .box {
        float: left; }
        .mainvisual > .wrapper > .searchbox > .box.quickbox {
          width: 248px;
          height: 548px;
          background: #f4f3f9;
          border-radius: 8px; }
          .mainvisual > .wrapper > .searchbox > .box.quickbox > h2 {
            float: left;
            width: 100%;
            background: #23577f;
            color: #fff;
            border-radius: 8px 8px 0 0;
            font-size: 18px;
            line-height: 60px; }
          .mainvisual > .wrapper > .searchbox > .box.quickbox > ul {
            float: left;
            width: 100%;
            padding: 16px 8px 8px; }
            .mainvisual > .wrapper > .searchbox > .box.quickbox > ul > li {
              float: left;
              width: 100%;
              padding-bottom: 16px; }
              .mainvisual > .wrapper > .searchbox > .box.quickbox > ul > li > p {
                float: left;
                width: 100%;
                background: #333;
                color: #fff;
                font-size: 16px;
                letter-spacing: 2px;
                padding: 4px 0;
                margin-bottom: 8px; }
              .mainvisual > .wrapper > .searchbox > .box.quickbox > ul > li > input[type="text"] {
                width: 100%;
                border: 2px solid #c9c6bd;
                font-family: 'Sawarabi Gothic', sans-serif;
                font-size: 15px; }
              .mainvisual > .wrapper > .searchbox > .box.quickbox > ul > li > select {
                width: 100%;
                border: 2px solid #c9c6bd;
                cursor: pointer;
                color: #333;
                font-family: 'Sawarabi Gothic', sans-serif;
                font-weight: bold;
                font-size: 16px;
                padding: 2px 4px; }
                .mainvisual > .wrapper > .searchbox > .box.quickbox > ul > li > select option {
                  padding: 8px 4px; }
          .mainvisual > .wrapper > .searchbox > .box.quickbox > .link {
            float: left;
            width: calc(100% - 16px);
            margin: 0 8px 0;
            text-align: center;
            background: #f9e900;
            font-weight: bold;
            border-radius: 8px;
            font-size: 18px;
            line-height: 48px;
            box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.15); }
            .mainvisual > .wrapper > .searchbox > .box.quickbox > .link:hover {
              opacity: 0.8; }
            .mainvisual > .wrapper > .searchbox > .box.quickbox > .link > span {
              position: relative;
              padding-left: 28px; }
              .mainvisual > .wrapper > .searchbox > .box.quickbox > .link > span::before {
                content: "";
                width: 28px;
                height: 32px;
                position: absolute;
                top: 0;
                bottom: 0;
                left: -8px;
                margin: auto;
                background: url(/img/201/search_icon.png) no-repeat;
                background-size: 100%;
                background-position: center; }
        .mainvisual > .wrapper > .searchbox > .box.mapbox {
          width: 720px;
          height: 548px;
          background: #fff;
          border-radius: 8px;
          border: 4px solid #23577f;
          position: relative; }
          .mainvisual > .wrapper > .searchbox > .box.mapbox > .choice {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 10; }
            .mainvisual > .wrapper > .searchbox > .box.mapbox > .choice > h2 {
              float: left;
              background: #23577f;
              color: #fff;
              border-radius: 8px 0 0 8px;
              font-size: 18px;
              line-height: 64px;
              padding: 0 20px; }
            .mainvisual > .wrapper > .searchbox > .box.mapbox > .choice > #search-type {
              float: left;
              background: #23577f;
              border-radius: 0 8px 8px 0; }
              .mainvisual > .wrapper > .searchbox > .box.mapbox > .choice > #search-type > .background {
                float: left;
                width: 100%;
                background-color: #fff;
                padding: 8px 6px;
                border-radius: 4px;
                border: 4px solid #23577f; }
              .mainvisual > .wrapper > .searchbox > .box.mapbox > .choice > #search-type input[type=radio] {
                display: none; }
              .mainvisual > .wrapper > .searchbox > .box.mapbox > .choice > #search-type label {
                float: left;
                height: 40px;
                line-height: 40px;
                background-color: #fff;
                padding: 0 16px 0 8px;
                font-weight: bold;
                font-size: 16px;
                font-weight: bold;
                cursor: pointer;
                border-radius: 8px; }
                .mainvisual > .wrapper > .searchbox > .box.mapbox > .choice > #search-type label:hover {
                  color: #23577f; }
                .mainvisual > .wrapper > .searchbox > .box.mapbox > .choice > #search-type label > span {
                  font-size: 18px;
                  position: relative;
                  padding-left: 36px; }
                  .mainvisual > .wrapper > .searchbox > .box.mapbox > .choice > #search-type label > span::before {
                    content: "";
                    width: 32px;
                    height: 32px;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    left: 0;
                    background-repeat: no-repeat;
                    background-size: 100%; }
                  .mainvisual > .wrapper > .searchbox > .box.mapbox > .choice > #search-type label > span.area::before {
                    background-image: url(/img/201/area_icon.png); }
                  .mainvisual > .wrapper > .searchbox > .box.mapbox > .choice > #search-type label > span.route::before {
                    background-image: url(/img/201/train_icon.png); }
                .mainvisual > .wrapper > .searchbox > .box.mapbox > .choice > #search-type label > .memo {
                  display: none;
                  width: 288px;
                  position: absolute;
                  top: 88px;
                  background: #23577f;
                  color: #fff;
                  padding: 16px 24px;
                  border-radius: 8px;
                  line-height: 20px; }
                  .mainvisual > .wrapper > .searchbox > .box.mapbox > .choice > #search-type label > .memo::before {
                    content: "";
                    position: absolute;
                    top: -18px;
                    left: 40px;
                    border-right: 24px solid transparent;
                    border-bottom: 32px solid #23577f;
                    border-left: 24px solid transparent;
                    z-index: -1; }
              .mainvisual > .wrapper > .searchbox > .box.mapbox > .choice > #search-type input[type="radio"]:checked + label {
                background: #f9e900; }
                .mainvisual > .wrapper > .searchbox > .box.mapbox > .choice > #search-type input[type="radio"]:checked + label:hover {
                  color: #333; }
                .mainvisual > .wrapper > .searchbox > .box.mapbox > .choice > #search-type input[type="radio"]:checked + label > .memo {
                  display: block; }
          .mainvisual > .wrapper > .searchbox > .box.mapbox > .map {
            float: left;
            width: 100%;
            text-align: center;
            position: relative; }
            .mainvisual > .wrapper > .searchbox > .box.mapbox > .map > img.mapimage {
              float: none;
              width: 82%;
              filter: drop-shadow(4px 4px 0px #ccc);
              margin-top: -32px; }
            .mainvisual > .wrapper > .searchbox > .box.mapbox > .map > .area {
              width: 250px;
              position: absolute;
              padding: 8px 8px 2px;
              border-radius: 8px;
              font-size: 18px; }
              .mainvisual > .wrapper > .searchbox > .box.mapbox > .map > .area.area103 {
                top: 250px;
                left: 424px;
                background-color: #f3adcb; }
              .mainvisual > .wrapper > .searchbox > .box.mapbox > .map > .area.area104 {
                top: 346px;
                left: 160px;
                background-color: #6ec7e2; }
              .mainvisual > .wrapper > .searchbox > .box.mapbox > .map > .area.area105 {
                top: 180px;
                left: 100px;
                background-color: #f5a500; }
              .mainvisual > .wrapper > .searchbox > .box.mapbox > .map > .area.area108 {
                top: 478px;
                left: -20px;
                background-color: #d2adf3; }
              .mainvisual > .wrapper > .searchbox > .box.mapbox > .map > .area > h3 {
                float: left;
                width: 100%;
                background: #333;
                color: #fff;
                font-size: 16px;
                letter-spacing: 2px;
                padding: 4px 0;
                margin-bottom: 8px;
                font-weight: normal; }
              .mainvisual > .wrapper > .searchbox > .box.mapbox > .map > .area > ul {
                float: left;
                width: 100%; }
                .mainvisual > .wrapper > .searchbox > .box.mapbox > .map > .area > ul > li {
                  float: left;
                  width: 49%;
                  font-weight: bold;
                  margin-bottom: 6px; }
                  .mainvisual > .wrapper > .searchbox > .box.mapbox > .map > .area > ul > li:nth-of-type(2n) {
                    margin-left: 2%; }
                  .mainvisual > .wrapper > .searchbox > .box.mapbox > .map > .area > ul > li > .link {
                    float: left;
                    width: 100%;
                    box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.15);
                    background-color: #fff;
                    padding: 4px 0; }
                    .mainvisual > .wrapper > .searchbox > .box.mapbox > .map > .area > ul > li > .link:hover {
                      background-color: #f4f3f9;
                      color: #23577f;
                      border-color: #23577f; }

section {
  float: left;
  width: 100%;
  text-align: center;
  min-height: 200px; }

section.meritbox {
  background-color: #6ec7e2;
  padding: 80px 0 100px; }
  section.meritbox > .wrapper > h2 {
    float: left;
    width: 100%;
    text-align: center;
    margin-bottom: 48px; }
    section.meritbox > .wrapper > h2 > img {
      float: none; }
  section.meritbox > .wrapper > .box {
    float: left;
    width: 100%;
    border-radius: 8px;
    box-shadow: 6px 6px 0 0px rgba(0, 0, 0, 0.15); }
    section.meritbox > .wrapper > .box > h3 {
      float: left;
      width: 100%;
      background-image: url(/img/201/bukken_line.png);
      background-color: #23577f;
      background-repeat: repeat-x;
      background-size: 60%;
      background-position: bottom;
      font-size: 36px;
      padding: 28px 0;
      color: #fff;
      text-align: center;
      border-radius: 8px 8px 0 0;
      letter-spacing: 4px; }
      section.meritbox > .wrapper > .box > h3 > span {
        color: #f9e900; }
    section.meritbox > .wrapper > .box > ul {
      float: left;
      width: 100%;
      background-color: #fff;
      background: url(/img/201/back-01.jpg) no-repeat;
      background-size: cover;
      border-radius: 0 0 8px 8px;
      padding: 32px 48px; }
      section.meritbox > .wrapper > .box > ul > li {
        float: left;
        width: 50%;
        height: 280px;
        padding: 24px 32px;
        position: relative; }
        section.meritbox > .wrapper > .box > ul > li:first-of-type {
          border-bottom: 2px solid #c9c6bd;
          border-right: 2px solid #c9c6bd; }
        section.meritbox > .wrapper > .box > ul > li:nth-of-type(2) {
          border-bottom: 2px solid #c9c6bd; }
        section.meritbox > .wrapper > .box > ul > li:nth-of-type(3) {
          border-right: 2px solid #c9c6bd; }
        section.meritbox > .wrapper > .box > ul > li > .title {
          float: left;
          width: 100%;
          position: relative;
          background-color: #f9e900;
          line-height: 48px;
          text-align: center;
          font-weight: bold;
          font-size: 20px;
          margin-bottom: 24px; }
          section.meritbox > .wrapper > .box > ul > li > .title::before {
            content: "";
            position: absolute;
            top: 0;
            display: block;
            height: 48px;
            border: 24px solid #f9e900;
            left: -12px;
            border-left-width: 12px;
            border-left-color: transparent; }
          section.meritbox > .wrapper > .box > ul > li > .title::after {
            content: "";
            position: absolute;
            top: 0;
            display: block;
            height: 48px;
            border: 24px solid #f9e900;
            right: -12px;
            border-right-width: 12px;
            border-right-color: transparent; }
          section.meritbox > .wrapper > .box > ul > li > .title > span {
            background-color: #333;
            color: #fff;
            border-radius: 24px;
            padding: 0 16px;
            font-size: 18px;
            margin-right: 4px; }
        section.meritbox > .wrapper > .box > ul > li > p {
          float: left;
          width: 75%;
          font-size: 22px;
          line-height: 42px;
          padding-top: 8px; }
          section.meritbox > .wrapper > .box > ul > li > p > span {
            font-size: 28px;
            color: #23577f; }
        section.meritbox > .wrapper > .box > ul > li > img {
          position: absolute;
          top: 64px;
          bottom: 0;
          right: 24px;
          margin: auto;
          width: 110px; }

section.pointbox {
  background: url(/img/201/back-02.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  padding: 80px 0 100px; }
  section.pointbox > .wrapper > img.image {
    float: left;
    width: 500px; }
  section.pointbox > .wrapper > .aboutbox {
    float: right;
    width: 468px;
    margin-left: 32px;
    padding: 10px;
    border-radius: 8px;
    background-color: #6ec7e2;
    box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.15);
    margin-top: 32px; }
    section.pointbox > .wrapper > .aboutbox > .inner {
      float: left;
      width: 100%;
      background-color: #fff;
      border: 4px solid #c9c6bd;
      position: relative;
      padding: 32px 24px; }
      section.pointbox > .wrapper > .aboutbox > .inner::before {
        content: "";
        border-top: 48px solid transparent;
        border-left: 48px solid #c9c6bd;
        position: absolute;
        top: -4px;
        right: -4px; }
      section.pointbox > .wrapper > .aboutbox > .inner::after {
        content: "";
        border-top: 28px solid #6ec7e2;
        border-right: 28px solid #6ec7e2;
        border-bottom: 28px solid transparent;
        border-left: 28px solid transparent;
        position: absolute;
        top: -11px;
        right: -6px;
        z-index: 2; }
      section.pointbox > .wrapper > .aboutbox > .inner > h3 {
        float: left;
        width: 100%;
        text-align: center;
        color: #23577f;
        font-size: 32px;
        margin-bottom: 24px; }
        section.pointbox > .wrapper > .aboutbox > .inner > h3 > .fukidashi {
          width: 50%;
          margin: 0 25%;
          position: relative;
          background: #23577f;
          color: #fff;
          border-radius: 40px;
          font-size: 24px;
          padding: 4px 0;
          z-index: 0;
          margin-bottom: 8px; }
          section.pointbox > .wrapper > .aboutbox > .inner > h3 > .fukidashi::before {
            content: "";
            position: absolute;
            bottom: -10px;
            left: calc(50% - 16px);
            border-right: 16px solid transparent;
            border-top: 20px solid #23577f;
            border-left: 16px solid transparent;
            z-index: -1; }
      section.pointbox > .wrapper > .aboutbox > .inner > p {
        float: left;
        width: 100%;
        font-size: 20px;
        text-align: left;
        line-height: 28px; }
  section.pointbox > .wrapper > .mainbox {
    float: left;
    width: 100%;
    padding: 20px;
    border-radius: 8px;
    background-color: #23577f;
    box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 0.15);
    margin-top: 32px; }
    section.pointbox > .wrapper > .mainbox > .inner {
      float: left;
      width: 100%;
      background-color: #fff;
      position: relative;
      padding: 32px 24px; }
      section.pointbox > .wrapper > .mainbox > .inner::before {
        content: "";
        position: absolute;
        bottom: -46px;
        right: 40px;
        border-top: 174px solid #c9c6bd;
        border-right: 90px solid transparent;
        border-bottom: 0px solid transparent;
        transform: rotate(37deg); }
      section.pointbox > .wrapper > .mainbox > .inner::after {
        content: "";
        position: absolute;
        bottom: -47px;
        right: 40px;
        border-top: 180px solid #23577f;
        border-left: 90px solid transparent;
        border-bottom: 0px solid transparent;
        transform: rotate(-270deg); }
      section.pointbox > .wrapper > .mainbox > .inner > h2 {
        float: left;
        width: 100%;
        text-align: center; }
        section.pointbox > .wrapper > .mainbox > .inner > h2 > img {
          float: none;
          width: 800px; }
      section.pointbox > .wrapper > .mainbox > .inner > ul {
        float: left;
        width: 100%;
        margin-top: 48px;
        padding: 0 24px; }
        section.pointbox > .wrapper > .mainbox > .inner > ul > li {
          float: left;
          width: 100%;
          margin-bottom: 48px; }
          section.pointbox > .wrapper > .mainbox > .inner > ul > li > .title {
            float: left;
            width: 100%;
            font-weight: bold;
            padding: 0 0 0 88px;
            position: relative;
            text-align: left; }
            section.pointbox > .wrapper > .mainbox > .inner > ul > li > .title > span {
              position: absolute;
              top: 0;
              left: 0;
              color: #a91a3c;
              font-weight: bold;
              font-size: 100px; }
            section.pointbox > .wrapper > .mainbox > .inner > ul > li > .title > .main {
              float: left;
              width: 100%;
              color: #23577f;
              font-size: 48px;
              margin: 8px 0 12px; }
            section.pointbox > .wrapper > .mainbox > .inner > ul > li > .title > .sub {
              float: left;
              width: 100%;
              font-size: 20px; }
          section.pointbox > .wrapper > .mainbox > .inner > ul > li > p {
            float: left;
            width: 100%;
            text-align: left;
            margin-top: 24px;
            font-size: 18px;
            line-height: 32px; }

section.resolvebox > .title {
  float: left;
  width: 100%;
  background-color: #23577f;
  text-align: center; }
  section.resolvebox > .title > .wrapper {
    text-align: center;
    position: relative;
    padding: 16px 0 40px; }
    section.resolvebox > .title > .wrapper::before {
      content: "";
      position: absolute;
      bottom: -40px;
      left: calc(50% - 64px);
      border-right: 64px solid transparent;
      border-top: 48px solid #23577f;
      border-left: 64px solid transparent; }
    section.resolvebox > .title > .wrapper > img {
      float: none; }
section.resolvebox > .main {
  float: left;
  width: 100%;
  text-align: center; }
  section.resolvebox > .main > .wrapper > ul {
    float: left;
    width: 100%;
    margin: 100px 0 80px;
    padding: 64px 32px; }
    section.resolvebox > .main > .wrapper > ul > li {
      float: left;
      width: 100%;
      padding-bottom: 64px; }
      section.resolvebox > .main > .wrapper > ul > li:last-of-type {
        padding-bottom: 0; }
      section.resolvebox > .main > .wrapper > ul > li .left {
        float: left; }
      section.resolvebox > .main > .wrapper > ul > li .right {
        float: right; }
      section.resolvebox > .main > .wrapper > ul > li > .text {
        width: 48%;
        padding-top: 12px; }
        section.resolvebox > .main > .wrapper > ul > li > .text > .title {
          float: left;
          width: 100%;
          font-weight: bold; }
          section.resolvebox > .main > .wrapper > ul > li > .text > .title > span {
            background: #333;
            color: #fff;
            padding: 10px 16px;
            display: inline-block;
            font-size: 30px;
            margin-bottom: 4px; }
        section.resolvebox > .main > .wrapper > ul > li > .text > p {
          float: left;
          width: 100%;
          font-size: 20px;
          line-height: 40px;
          margin-top: 24px; }
      section.resolvebox > .main > .wrapper > ul > li > .image {
        width: 48%;
        position: relative; }
        section.resolvebox > .main > .wrapper > ul > li > .image.left {
          transform: rotate(5deg); }
        section.resolvebox > .main > .wrapper > ul > li > .image.right {
          transform: rotate(-8deg); }
        section.resolvebox > .main > .wrapper > ul > li > .image > img {
          width: 100%;
          border: 8px solid #fff;
          box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.15); }
        section.resolvebox > .main > .wrapper > ul > li > .image > .text {
          position: absolute;
          top: -16px;
          float: left;
          width: 80%;
          background-color: #f9e900;
          line-height: 48px;
          text-align: center;
          font-weight: bold;
          font-size: 20px;
          margin: 0 10%; }
          section.resolvebox > .main > .wrapper > ul > li > .image > .text::before {
            content: "";
            position: absolute;
            top: 0;
            display: block;
            height: 48px;
            border: 24px solid #f9e900;
            left: -12px;
            border-left-width: 12px;
            border-left-color: transparent; }
          section.resolvebox > .main > .wrapper > ul > li > .image > .text::after {
            content: "";
            position: absolute;
            top: 0;
            display: block;
            height: 48px;
            border: 24px solid #f9e900;
            right: -12px;
            border-right-width: 12px;
            border-right-color: transparent; }

section.bukkenbox {
  background: url(/img/201/back-04.jpg) no-repeat;
  background-size: cover;
  background-position: top right;
  padding: 100px 0 80px; }
  section.bukkenbox > .wrapper > h2 {
    text-align: left; }
    section.bukkenbox > .wrapper > h2 > img {
      float: left; }
  section.bukkenbox > .wrapper > ul {
    float: left;
    width: 70%;
    margin-top: 48px;
    margin-bottom: 48px; }
    section.bukkenbox > .wrapper > ul > li {
      float: left;
      width: 100%;
      margin-bottom: 16px; }
      section.bukkenbox > .wrapper > ul > li:nth-of-type(2n) {
        padding-left: 120px; }
      section.bukkenbox > .wrapper > ul > li > .box {
        border: 4px solid #6ec7e2;
        position: relative;
        background-color: #fff;
        font-weight: bold;
        padding: 16px 24px 16px 72px;
        font-size: 30px;
        box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.15); }
        section.bukkenbox > .wrapper > ul > li > .box::before {
          content: "";
          width: 56px;
          height: 56px;
          background: url(/img/201/kirakira.png) no-repeat;
          background-size: 100%;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 8px;
          margin: auto; }
        section.bukkenbox > .wrapper > ul > li > .box > span {
          color: #23577f; }
  section.bukkenbox > .wrapper > .tablebox {
    float: left;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8px; }
    section.bukkenbox > .wrapper > .tablebox > h3 {
      float: left;
      width: 100%;
      background-image: url(/img/201/bukken_line.png);
      background-color: #23577f;
      background-repeat: repeat-x;
      background-size: 60%;
      background-position: bottom;
      font-size: 36px;
      padding: 28px 0;
      color: #fff;
      text-align: center;
      border-radius: 8px 8px 0 0;
      letter-spacing: 4px; }
      section.bukkenbox > .wrapper > .tablebox > h3 > span {
        color: #f9e900; }
    section.bukkenbox > .wrapper > .tablebox > .inner {
      float: left;
      width: 100%;
      padding: 48px; }
      section.bukkenbox > .wrapper > .tablebox > .inner > table {
        width: 100%; }
        section.bukkenbox > .wrapper > .tablebox > .inner > table > thead {
          width: 100%; }
          section.bukkenbox > .wrapper > .tablebox > .inner > table > thead > tr {
            width: 100%; }
            section.bukkenbox > .wrapper > .tablebox > .inner > table > thead > tr > th {
              color: #fff;
              background-color: #6ec7e2;
              text-align: center;
              font-size: 24px;
              padding: 12px 0; }
              section.bukkenbox > .wrapper > .tablebox > .inner > table > thead > tr > th > span {
                color: #f9e900; }
        section.bukkenbox > .wrapper > .tablebox > .inner > table > tbody {
          width: 100%; }
          section.bukkenbox > .wrapper > .tablebox > .inner > table > tbody > tr {
            width: 100%;
            border-bottom: 2px solid #f4f3f9; }
            section.bukkenbox > .wrapper > .tablebox > .inner > table > tbody > tr > th {
              background-color: #c0dffe;
              font-size: 18px;
              width: 140px;
              padding: 16px;
              vertical-align: middle;
              text-align: left;
              text-align: center; }
            section.bukkenbox > .wrapper > .tablebox > .inner > table > tbody > tr > td {
              background-color: #fff;
              vertical-align: middle;
              font-size: 14px;
              line-height: 20px;
              padding: 12px 16px; }

section.flowbox {
  padding: 140px 0 80px; }
  section.flowbox > .wrapper {
    position: relative; }
    section.flowbox > .wrapper > h2 {
      float: left;
      width: 100%;
      text-align: center;
      position: absolute;
      top: -52px; }
      section.flowbox > .wrapper > h2 > .fukidashi {
        width: 60%;
        background-color: #23577f;
        padding: 16px;
        float: none;
        display: inline-block;
        border-radius: 80px; }
        section.flowbox > .wrapper > h2 > .fukidashi > img {
          float: none; }
    section.flowbox > .wrapper > ul {
      float: left;
      width: 100%;
      background: url(/img/201/back-05.jpg) no-repeat;
      background-size: cover;
      background-position: center;
      border-radius: 8px;
      padding: 88px 24px 48px; }
      section.flowbox > .wrapper > ul > li {
        float: left;
        width: calc(96% / 3);
        padding: 24px 24px;
        margin-right: 2%;
        margin-bottom: 24px;
        background-color: #fff;
        box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.15); }
        section.flowbox > .wrapper > ul > li:nth-of-type(3n) {
          margin-right: 0; }
        section.flowbox > .wrapper > ul > li > .title {
          float: left;
          width: 100%;
          position: relative;
          background-color: #f9e900;
          line-height: 48px;
          text-align: center;
          font-weight: bold;
          font-size: 20px;
          margin-bottom: 24px;
          z-index: 0; }
          section.flowbox > .wrapper > ul > li > .title::before {
            content: "";
            position: absolute;
            top: 0;
            display: block;
            height: 48px;
            border: 24px solid #f9e900;
            left: -12px;
            border-left-width: 12px;
            border-left-color: transparent; }
          section.flowbox > .wrapper > ul > li > .title::after {
            content: "";
            position: absolute;
            top: 0;
            display: block;
            height: 48px;
            border: 24px solid #f9e900;
            right: -12px;
            border-right-width: 12px;
            border-right-color: transparent; }
          section.flowbox > .wrapper > ul > li > .title > .num {
            background-color: #333;
            color: #fff;
            border-radius: 24px;
            padding: 0 16px;
            font-size: 18px;
            margin-right: 4px;
            z-index: 1;
            position: relative; }
        section.flowbox > .wrapper > ul > li > img {
          float: left;
          width: 100%;
          height: 170px;
          object-fit: cover; }
        section.flowbox > .wrapper > ul > li > p {
          float: left;
          width: 100%;
          height: 64px;
          font-size: 18px;
          line-height: 32px;
          text-align: center;
          margin-top: 16px; }

section.faqbox {
  background-image: url(/img/201/back-06.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  background-color: #c0dffe;
  padding: 100px 0 80px; }
  section.faqbox > .wrapper > .box {
    float: left;
    width: 100%;
    box-shadow: 6px 6px 0 0px rgba(0, 0, 0, 0.15); }
    section.faqbox > .wrapper > .box > h2 {
      float: left;
      width: 100%;
      background-image: url(/img/201/bukken_line.png);
      background-color: #23577f;
      background-repeat: repeat-x;
      background-size: 60%;
      background-position: bottom;
      font-size: 36px;
      padding: 28px 0;
      color: #fff;
      text-align: center;
      border-radius: 8px 8px 0 0;
      letter-spacing: 4px; }
      section.faqbox > .wrapper > .box > h2 > span {
        color: #f9e900; }
    section.faqbox > .wrapper > .box > ul {
      float: left;
      width: 100%;
      background-color: #fff;
      padding: 48px; }
      section.faqbox > .wrapper > .box > ul > li {
        float: left;
        width: 100%;
        border-bottom: 2px solid #c9c6bd;
        margin-bottom: 24px; }
        section.faqbox > .wrapper > .box > ul > li:last-of-type {
          border-bottom: none;
          margin-bottom: 0px; }
        section.faqbox > .wrapper > .box > ul > li > .question {
          float: left;
          width: 100%;
          font-size: 30px;
          background: #333;
          color: #fff;
          font-weight: bold;
          padding: 12px 16px 12px 60px;
          letter-spacing: -1px;
          position: relative; }
          section.faqbox > .wrapper > .box > ul > li > .question > span {
            position: absolute;
            top: 8px;
            left: 16px;
            margin: auto;
            color: #f9e900;
            font-size: 32px; }
        section.faqbox > .wrapper > .box > ul > li > .answer {
          float: left;
          width: 100%;
          font-size: 20px;
          line-height: 40px;
          padding: 16px 0 16px 40px;
          position: relative; }
          section.faqbox > .wrapper > .box > ul > li > .answer > span {
            position: absolute;
            top: 14px;
            left: 4px;
            font-size: 28px;
            color: #a91a3c; }

/*# sourceMappingURL=d--homes--index.css.map */