@charset "UTF-8";
.kvArea {
  height: 500px;
  padding: 0;
  position: relative;
  overflow: hidden; }
  .kvArea div {
    width: 1160px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    top: 50%;
    left: 0;
    z-index: 10;
    transform: translateY(calc(-50% - 1em)); }
    .kvArea div h1 {
      font-size: 36px;
      font-weight: bold; }
      .kvArea div h1 span {
        display: block;
        margin-bottom: 0.5em;
        font-size: 24px;
        background: linear-gradient(140deg, #8bbc08, #3c9f7b);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent; }
  .kvArea img {
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover; }
  .kvArea + nav {
    width: 1160px;
    margin: 0 auto;
    padding: 20px 0; }
    .kvArea + nav ul {
      display: flex;
      width: 1160px;
      justify-content: space-around; }
      .kvArea + nav ul li a {
        display: block;
        padding: 0.5em 0.75em;
        color: #fff;
        font-size: 16px;
        font-feature-settings: "palt";
        text-align: center;
        text-decoration: none;
        border-radius: 5px;
        background: #9b8878;
        transition: 0.5s background; }
        .kvArea + nav ul li a:after {
          content: "\f181";
          display: block;
          margin: 2px auto 0 auto;
          font-family: 'Material Icons';
          font-size: 18px;
          transition: 0.5s transform; }
        .kvArea + nav ul li a:hover {
          background: #7b614c; }
          .kvArea + nav ul li a:hover:after {
            transform: translateY(5px); }

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 h2 + p {
    padding-right: 120px; }
main article section > div section {
  display: flex;
  margin-bottom: 30px;
  padding-right: 120px;
  align-items: center;
  gap: 20px; }
  main article section > div section > section {
    display: block;
    padding: 0 2em 0 0; }
    main article section > div section > section ul {
      list-style: disc;
      margin: 1em 1em 0 2em; }
  main article section > div section + section {
    margin: 0; }
  main article section > div section > div {
    margin: 0; }
    main article section > div section > div h3 {
      width: 3em;
      margin: 0;
      font-size: 24px;
      text-align: center; }
    main article section > div section > div:before {
      content: "◆";
      display: block;
      font-size: 30px;
      font-family: "Material Icons";
      text-align: center; }
  main article section > div section:nth-of-type(1) > div:before {
    content: "\e002";
    color: #c00; }
  main article section > div section:nth-of-type(2) > div:before {
    content: "\e86c";
    color: forestgreen; }
  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 > div {
  display: flex;
  gap: 10px; }
  main article section > div > div dl {
    display: flex;
    margin-top: 30px;
    padding: 10px;
    border-radius: 5px;
    background: #005cca;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px; }
    main article section > div > div dl dt {
      width: 8em;
      color: #fff;
      font-weight: bold;
      text-align: center; }
    main article section > div > div dl dd {
      display: flex;
      margin: 0 auto;
      flex-wrap: wrap;
      gap: 10px; }
      main article section > div > div dl dd a {
        display: block;
        padding: 0.75em 1.5em;
        color: #005cca;
        font-weight: bold;
        text-decoration: none;
        border-radius: 5px;
        background: #fff;
        position: relative;
        transition: 0.3s all; }
        main article section > div > div dl dd a:after {
          content: "\e5df";
          color: #c00;
          font-size: 18px;
          font-family: "Material Icons";
          position: absolute;
          top: 54.5%;
          right: 2px;
          transform: translateY(-50%);
          transition: 0.3s all; }
        main article section > div > div dl dd a:hover {
          color: #fff;
          background: #687d23; }
          main article section > div > div dl dd a:hover:after {
            color: #fff; }
main article section.blueLinkBlock {
  margin: 20px 0 0 0;
  padding: 0 15px;
  border-radius: 5px;
  background: #005cca; }
  main article section.blueLinkBlock h3 {
    width: 15%;
    margin: 0;
    color: #fff;
    font-size: 18px; }
    main article section.blueLinkBlock h3 span {
      display: block;
      font-size: 12px; }
  main article section.blueLinkBlock > div {
    width: calc(85% - 20px);
    margin: 0; }
    main article section.blueLinkBlock > div:before {
      content: normal !important; }
    main article section.blueLinkBlock > div p a {
      display: block;
      margin: 10px 0;
      padding: 11px 20px 9px 36px;
      color: #005cca;
      font-weight: bold;
      text-decoration: none;
      border-radius: 5px;
      background: #fff;
      position: relative;
      transition: 0.3s all; }
      main article section.blueLinkBlock > div p a:before {
        content: "\e5df";
        color: #c00;
        font-size: 18px;
        font-family: "Material Icons";
        position: absolute;
        top: 54.5%;
        left: 10px;
        transform: translateY(-50%);
        transition: 0.3s all; }
      main article section.blueLinkBlock > div p a:hover {
        color: #687d23;
        background: #f8f4f1; }
      main article section.blueLinkBlock > div p a[target]:before {
        content: "\e89e";
        font-weight: normal;
        left: 13px; }
main article section#anc01 > div {
  background: url("/solutions/clov/images/pd/img_anc01.png") no-repeat 100% 50%;
  background-size: 160px; }
main article section#anc02 > div {
  background: url("/solutions/clov/images/pd/img_anc02.png") no-repeat 100% 50%;
  background-size: 160px; }
main article section#anc03 > div {
  background: url("/solutions/clov/images/pd/img_anc03.png") no-repeat 100% 50%;
  background-size: 160px; }
main article section#anc04 > div {
  background: url("/solutions/clov/images/pd/img_anc04.png") no-repeat 100% 0%;
  background-size: 160px; }
  main article section#anc04 > div .blueLinkBlock {
    margin-top: 80px; }

#inquiry div section {
  display: block;
  padding-right: 0; }
  #inquiry div section p {
    text-align: center; }

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

@media (orientation: portrait) {
  .kvArea {
    height: auto;
    padding: 0;
    position: static; }
    .kvArea div {
      width: 100%;
      margin: 5vh 0;
      padding: 0;
      position: static;
      transform: none; }
      .kvArea div h1 {
        margin: 0 0 0 0.5em;
        text-align: left;
        font-size: 30px; }
    .kvArea img {
      height: auto;
      position: static;
      object-fit: contain; }
    .kvArea + nav {
      width: 100%;
      padding: 20px 0 0 0; }
      .kvArea + nav ul {
        display: flex;
        width: 100%;
        padding: 10px;
        flex-wrap: wrap;
        gap: 10px; }
        .kvArea + nav ul li {
          width: 100%;
          margin: 0 30px; }
          .kvArea + nav ul li a {
            font-size: 3vw; }

  main a {
    word-break: break-all; }
  main article section > div h2 {
    padding-right: 50px; }
    main article section > div h2 + p {
      padding-right: 20px; }
  main article section > div section {
    display: block;
    padding-right: 0; }
    main article section > div section > div h3 {
      width: auto; }
    main article section > div section > section {
      padding: 0; }
      main article section > div section > section h4 {
        margin-top: 1em; }
    main article section > div section p br {
      display: block; }
  main article section > div > div {
    display: block;
    margin: 0 30px; }
    main article section > div > div dl {
      display: flex; }
      main article section > div > div dl dt {
        width: 100%; }
      main article section > div > div dl dd {
        display: block;
        width: 100%;
        margin: 0;
        flex-wrap: wrap; }
        main article section > div > div dl dd a {
          width: 100%;
          margin-bottom: 1em;
          text-align: center; }
          main article section > div > div dl dd a:last-child {
            margin-bottom: 0; }
  main article section#anc01 > div {
    background: url("/solutions/clov/images/pd/img_anc01.png") no-repeat 100% 0;
    background-size: 90px; }
  main article section#anc02 > div {
    background: url("/solutions/clov/images/pd/img_anc02.png") no-repeat 100% 0;
    background-size: 90px; }
  main article section#anc03 > div {
    background: url("/solutions/clov/images/pd/img_anc03.png") no-repeat 100% 0;
    background-size: 90px; }
  main article section#anc04 > div {
    background: url("/solutions/clov/images/pd/img_anc04.png") no-repeat 100% -10%;
    background-size: 90px; }
  main article section.blueLinkBlock {
    width: 100%;
    padding: 15px 15px 1px 15px; }
    main article section.blueLinkBlock h3 {
      width: auto; }
      main article section.blueLinkBlock h3 span {
        display: inline-block;
        margin-right: 0.5em; }
    main article section.blueLinkBlock div {
      width: 100%; }
      main article section.blueLinkBlock div p a[target]:before {
        left: 9px; }

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