@charset "UTF-8";
.kvArea {
  display: flex;
  padding: 0;
  align-items: center;
  justify-content: flex-end; }
  .kvArea div.kvText {
    display: flex;
    width: 47.5%;
    margin: 0 2.5% 0 0;
    justify-content: flex-end; }
    .kvArea div.kvText div {
      width: 50%;
      margin-left: 0; }
      .kvArea div.kvText div h1 {
        text-align: center; }
        .kvArea div.kvText div h1 img {
          display: block;
          max-width: 400px;
          margin: 0 auto 1em auto; }
          .kvArea div.kvText div h1 img.exMaas {
            width: 120px; }
        .kvArea div.kvText div h1 span {
          display: block;
          margin-bottom: 2em;
          font-size: 24px;
          font-weight: bold; }
          .kvArea div.kvText div h1 span.exDrc {
            font-size: 2.5vw; }
      .kvArea div.kvText div p {
        margin: auto;
        font-size: 18px;
        text-align: center;
        line-height: 2; }
        .kvArea div.kvText div p strong {
          font-weight: bold; }
  .kvArea div.kvImage {
    width: 50%;
    margin: 0;
    line-height: 0;
    clip-path: polygon(7.5vw 0, 100% 0, 100% 100%, 0 100%);
    height: 500px;
    overflow: hidden; }
    .kvArea div.kvImage img {
      height: 100%;
      object-fit: cover;
      object-position: 0 50%; }

.problemArea {
  padding: 50px 0 0 0; }
  .problemArea h2 {
    font-size: 30px;
    font-weight: bold;
    text-align: center; }
  .problemArea > section > div {
    width: 1160px;
    margin: 0 auto; }
  .problemArea .issue h2 {
    padding: 0.25em 0;
    background: #ede2da; }
  .problemArea .issue div {
    position: relative; }
    .problemArea .issue div ul {
      display: flex;
      margin: 60px 20% 60px 0;
      flex-wrap: wrap;
      gap: 20px; }
      .problemArea .issue div ul li {
        display: flex;
        width: 31%;
        padding: 10px;
        font-weight: bold;
        text-align: center;
        border: 3px #ca3948 solid;
        border-radius: 10px;
        background: #fff;
        align-items: center;
        flex-direction: column; }
        .problemArea .issue div ul li p {
          margin: auto;
          font-size: 18px;
          text-align: center; }
        .problemArea .issue div ul li:before {
          content: "！";
          display: block;
          margin-bottom: 5px;
          padding: 2px 2.5px 4px 3.5px;
          color: #fff;
          font-size: 16px;
          line-height: 1;
          border-radius: 100px;
          text-align: center;
          background: #ca3948; }
      .problemArea .issue div ul.w45 li {
        width: 45%; }
    .problemArea .issue div > div {
      display: block;
      position: absolute;
      right: 0;
      bottom: -65px;
      z-index: 200; }
  .problemArea .resolution {
    background: #e6fff5; }
    .problemArea .resolution h2 {
      padding: 1em 0 0.5em 0;
      color: #fff;
      background: #005cca;
      position: relative;
      overflow: hidden; }
      .problemArea .resolution h2:before {
        content: "◆";
        color: #f8f4f1;
        font-size: 80px;
        position: absolute;
        top: -60px;
        left: 50%;
        transform: translateX(-50%) scale(200%, -75%); }
    .problemArea .resolution > div {
      position: relative; }
      .problemArea .resolution > div > div:nth-of-type(1) {
        display: block;
        position: absolute;
        left: 0;
        bottom: -5px;
        z-index: 200; }
      .problemArea .resolution > div > div:nth-of-type(2) {
        margin: 30px 0 0 22.5%;
        padding-bottom: 30px; }
        .problemArea .resolution > div > div:nth-of-type(2) ul {
          gap: 20px; }
          .problemArea .resolution > div > div:nth-of-type(2) ul li {
            margin: 0.75em 0;
            padding-left: 1.5em;
            font-size: 24px;
            font-weight: 400; }
            .problemArea .resolution > div > div:nth-of-type(2) ul li:before {
              content: "\e876";
              margin: 0 0.5em 0 -1.5em;
              padding: 0;
              color: #fff;
              font-weight: bold;
              font-family: "Material Icons";
              border-radius: 5px;
              background: #48BC26;
              vertical-align: -2.5px; }
            .problemArea .resolution > div > div:nth-of-type(2) ul li strong {
              padding: 0 0.25em;
              font-weight: bold;
              background: #ff0; }
          .problemArea .resolution > div > div:nth-of-type(2) ul.exMaas {
            margin: 120px 0 100px 0; }
    .problemArea .resolution .exDrc_resolution h3 {
      display: inline-block;
      margin-bottom: 1em;
      padding: 1em 3em;
      font-size: 24px;
      font-weight: bold;
      color: #fff;
      border-radius: 100px;
      background: #172a88; }
    .problemArea .resolution .exDrc_resolution ul {
      display: flex;
      flex-wrap: wrap;
      gap: 20px; }
      .problemArea .resolution .exDrc_resolution ul li {
        width: calc(50% - 10px);
        padding: 25px;
        border-top: 10px #888 solid;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 5px 5px #ddd; }
        .problemArea .resolution .exDrc_resolution ul li h4 {
          margin-bottom: 0.5em;
          font-size: 24px;
          font-weight: bold; }
        .problemArea .resolution .exDrc_resolution ul li p {
          line-height: 2; }
        .problemArea .resolution .exDrc_resolution ul li:nth-of-type(1) {
          border-color: #ea616d; }
          .problemArea .resolution .exDrc_resolution ul li:nth-of-type(1) h4 {
            color: #ea616d; }
        .problemArea .resolution .exDrc_resolution ul li:nth-of-type(2) {
          border-color: #00b4c9; }
          .problemArea .resolution .exDrc_resolution ul li:nth-of-type(2) h4 {
            color: #00b4c9; }
        .problemArea .resolution .exDrc_resolution ul li:nth-of-type(3) {
          border-color: #2b5670; }
          .problemArea .resolution .exDrc_resolution ul li:nth-of-type(3) h4 {
            color: #2b5670; }
        .problemArea .resolution .exDrc_resolution ul li:nth-of-type(4) {
          border-color: #1c7293; }
          .problemArea .resolution .exDrc_resolution ul li:nth-of-type(4) h4 {
            color: #1c7293; }
  .problemArea .flowArea {
    background: #e4f3d4; }
    .problemArea .flowArea h2 {
      padding: 0.5em 0;
      color: #fff;
      background: #6fac2d; }
    .problemArea .flowArea div {
      padding: 50px 0; }
      .problemArea .flowArea div ul {
        display: flex;
        gap: 50px; }
        .problemArea .flowArea div ul li {
          padding: 50px 20px;
          font-size: 24px;
          font-weight: bold;
          text-align: center;
          border-radius: 10px;
          background: #fff;
          position: relative;
          flex: 1; }
          .problemArea .flowArea div ul li:after {
            content: "\e5c8";
            color: #6fac2d;
            font-family: "Material Icons";
            font-size: 50px;
            position: absolute;
            top: 50%;
            right: -50px;
            transform: translateY(-50%); }
          .problemArea .flowArea div ul li:last-child:after {
            content: normal; }
  .problemArea.exDrc section h2 + div {
    margin: 50px auto;
    text-align: center; }
  .problemArea.exDrc section.resolution {
    padding-bottom: 1px; }

main article section > div h2 {
  margin-bottom: 2em; }
  main article section > div h2 span {
    margin-bottom: 0.25em; }
  main article section > div h2:after {
    content: normal; }
main article section > div strong {
  font-weight: bold;
  background: #ff0; }
main article section > div section div.imgCenter {
  margin: 30px 0 0 0;
  text-align: center; }
main article section > div section h3 {
  margin-bottom: 1em;
  text-align: left; }
main article section > div section h4 {
  padding-bottom: 0.5em;
  font-weight: bold;
  border-bottom: 1px #999 dotted; }
  main article section > div section h4 + p {
    margin-top: 0.5em; }
main article section > div section p {
  text-align: left; }
  main article section > div section p a {
    line-height: 1.5; }
main article section > div section ul {
  margin: 1em 1.5em;
  list-style: disc; }
  main article section > div section ul li {
    margin: 0.75em 0; }
main article section > div section.rightImage {
  display: flex;
  align-items: center;
  gap: 20px; }
  main article section > div section.rightImage > div:nth-of-type(1) {
    width: 70%; }
  main article section > div section.rightImage > div:nth-of-type(2) {
    width: 30%; }
    main article section > div section.rightImage > div:nth-of-type(2) img {
      width: 100%; }
main article section > div > div.flexArea {
  display: flex;
  margin-bottom: 50px;
  align-items: baseline;
  gap: 50px; }
  main article section > div > div.flexArea section {
    flex: 1; }
    main article section > div > div.flexArea section.rightImage {
      display: block; }
      main article section > div > div.flexArea section.rightImage > div {
        width: 100%; }
main article section.punctuation p {
  text-align: center; }
main article section.punctuation:after {
  content: "";
  display: block;
  width: 100px;
  height: 10px;
  margin: 100px auto 0 auto;
  border-radius: 100px;
  background: #9b8878; }
main article section.relatedArticle {
  padding: 0;
  background: #fff; }
  main article section.relatedArticle div {
    display: flex;
    margin: 50px auto;
    padding: 30px 0;
    background: #f8f4f1;
    border-radius: 20px;
    align-items: center; }
    main article section.relatedArticle div > h2 {
      width: 20%;
      padding: 30px 0 0 0; }
    main article section.relatedArticle div > div {
      width: 80%;
      margin: 0 30px 0 0;
      padding: 10px 20px;
      background: #fff; }
      main article section.relatedArticle div > div ul {
        margin: 0 0 0 1.5em;
        list-style: disc; }
        main article section.relatedArticle div > div ul li {
          margin: 1.5em 0; }

#inquiry p {
  text-align: center; }

.caution {
  margin: 1em 1.5em; }
  .caution:before {
    content: "※";
    margin-left: -1.5em;
    padding-right: 0.5em; }

@media (orientation: portrait) {
  header div {
    width: 100%; }
    header div > a {
      display: block;
      width: 100px;
      margin: 0 10px; }
    header div > p {
      margin-right: 5px;
      font-size: 3vw; }
      header div > p img {
        width: 50px; }
    header div nav p {
      display: block; }
      header div nav p:after {
        content: "\e5d2";
        color: #fff;
        font-size: 40px;
        font-family: "Material Icons";
        line-height: 1; }
    header div nav > ul {
      display: none;
      width: 100vw;
      margin: 0;
      padding: 0 20px;
      background: #9b8878;
      position: absolute;
      top: 40px;
      right: 0;
      z-index: 500; }
      header div nav > ul li {
        margin: 40px 0; }
        header div nav > ul li a {
          font-size: 5vw; }
        header div nav > ul li.subMenu {
          margin-bottom: 0; }
        header div nav > ul li ul {
          display: block;
          margin-left: 1.5em;
          padding: 0;
          position: static;
          top: auto; }
          header div nav > ul li ul li {
            margin: 1.5em 0.5em; }
    header div nav.open p:after {
      content: "\e5cd"; }

  .kvArea {
    display: block; }
    .kvArea div.kvText {
      width: 100%;
      padding: 50px 30px; }
      .kvArea div.kvText div {
        width: 100%; }
        .kvArea div.kvText div h1 img {
          max-width: 100%; }
        .kvArea div.kvText div h1 span.exDrc {
          font-size: 8vw; }
        .kvArea div.kvText div p {
          font-size: 4vw; }
    .kvArea div.kvImage {
      width: 100%;
      height: auto;
      clip-path: none; }
      .kvArea div.kvImage img {
        object-fit: contain; }

  .problemArea {
    padding: 0; }
    .problemArea h2 {
      font-size: 6vw; }
    .problemArea > section {
      padding: 3vh 0 0 0; }
      .problemArea > section > div {
        width: auto;
        margin: 0 auto; }
    .problemArea .issue h2 {
      padding: 0.25em; }
    .problemArea .issue div ul {
      display: block;
      width: 65%;
      margin: 20px; }
      .problemArea .issue div ul li {
        width: auto;
        margin-bottom: 1em; }
        .problemArea .issue div ul li p {
          font-size: 4vw; }
      .problemArea .issue div ul.w45 li {
        width: auto; }
    .problemArea .issue div > div {
      width: 35%;
      text-align: right;
      right: 0;
      bottom: 0; }
    .problemArea .resolution {
      padding: 0;
      overflow: hidden; }
      .problemArea .resolution > div {
        padding-bottom: 14vh; }
        .problemArea .resolution > div > div:nth-of-type(1) {
          width: 17vh;
          bottom: -5px;
          left: 50%;
          z-index: 200;
          transform: translateX(-50%); }
        .problemArea .resolution > div > div:nth-of-type(2) {
          width: auto;
          margin: 20px;
          padding-bottom: 30px; }
          .problemArea .resolution > div > div:nth-of-type(2) ul li {
            font-size: 5vw; }
          .problemArea .resolution > div > div:nth-of-type(2) ul.exMaas {
            margin: 20px 0; }
      .problemArea .resolution .exDrc_resolution {
        margin: 0;
        padding-bottom: 5vh; }
        .problemArea .resolution .exDrc_resolution h3 {
          margin: 20px;
          padding: 10px;
          font-size: 5vw;
          border-radius: 0; }
        .problemArea .resolution .exDrc_resolution ul {
          display: block;
          margin: 0 20px; }
          .problemArea .resolution .exDrc_resolution ul li {
            width: 100%;
            margin-bottom: 20px;
            padding: 10px;
            text-align: left; }
    .problemArea .flowArea {
      padding: 0; }
      .problemArea .flowArea div {
        padding: 20px 0 5px 0; }
        .problemArea .flowArea div ul {
          display: block;
          margin: 20px; }
          .problemArea .flowArea div ul li {
            margin-bottom: 40px;
            padding: 10px;
            font-size: 4vw; }
            .problemArea .flowArea div ul li:after {
              font-size: 40px;
              top: auto;
              right: auto;
              bottom: -40px;
              left: 50%;
              transform: translateX(-50%) rotate(90deg); }

  main a {
    word-break: break-all; }
  main article section > div section.rightImage {
    display: block; }
    main article section > div section.rightImage > div:nth-of-type(1) {
      width: 100%; }
    main article section > div section.rightImage > div:nth-of-type(2) {
      width: 100%; }
      main article section > div section.rightImage > div:nth-of-type(2) img {
        width: 100%; }
  main article section > div div.flexArea {
    display: block !important; }
    main article section > div div.flexArea section.rightImage {
      display: block; }
      main article section > div div.flexArea section.rightImage > div {
        width: 100%; }
  main article section.punctuation p {
    text-align: left; }
  main article section.punctuation:after {
    margin-top: 50px; }
  main article section.relatedArticle div {
    display: block; }
    main article section.relatedArticle div > h2 {
      width: auto;
      margin: 0 20px; }
    main article section.relatedArticle div > div {
      width: auto;
      margin: 20px; }
      main article section.relatedArticle div > div ul {
        margin-left: 0.75em; }

  #inquiry h2 span {
    display: block;
    text-align: center; } }