.use-head-copy {
  font-weight: 600;
  line-height: 1.5;
  font-feature-settings: "palt"; }

.use-feature-list.dotL {
  line-height: 1.5;
  font-weight: 600;
  font-feature-settings: "palt"; }
  .use-feature-list.dotL .note {
    line-height: 1.25; }

.use-image img {
  width: 100%;
  height: auto; }
.use-image-wrapper {
  background-color: #e6e6e6; }

.use-effect {
  display: flex;
  flex-direction: column;
  align-items: center; }
  .use-effect-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 600;
    position: relative; }
    .use-effect-copy em {
      font-style: normal;
      color: #e83820; }
    .use-effect-copy::after {
      content: "";
      display: block;
      margin-top: 0.75em;
      width: 2em;
      height: 1.5em;
      clip-path: polygon(25% 0, 25% 50%, 0 50%, 50% 100%, 100% 50%, 75% 50%, 75% 0); }
  .use-effect-result {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
    .use-effect-result > li {
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 600;
      line-height: 1.25;
      margin-left: 0.5rem;
      margin-right: 0.5rem;
      margin-top: 1rem;
      padding-top: 0.05em;
      padding-left: 1rem;
      padding-right: 1rem;
      min-width: 9rem;
      min-height: 2rem;
      border-radius: 1rem;
      color: #FFF;
      background-color: #ef7665; }

.use-case-list > li {
  border-top: 2px solid #00532e; }
  .use-case-list > li .use-case-head {
    display: flex; }
    .use-case-list > li .use-case-head .head {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; }
      .use-case-list > li .use-case-head .head .text {
        line-height: 1.1; }
      .use-case-list > li .use-case-head .head .num {
        line-height: 1.1; }
    .use-case-list > li .use-case-head h4 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%; }
      .use-case-list > li .use-case-head h4 .prefecture {
        display: inline-block;
        white-space: nowrap;
        padding: 0.25em;
        font-size: 1rem;
        line-height: 1.1;
        display: block;
        color: #FFF;
        background-color: #ef7665; }
  .use-case-list > li .use-case-copy,
  .use-case-list > li .use-case-name {
    font-weight: 600;
    line-height: 1.25; }
  .use-case-list > li .use-case-name {
    margin-top: 2rem; }
  .use-case-list > li .use-case-copy {
    margin-top: 2.5rem; }
    .use-case-list > li .use-case-copy + .use-case-name {
      margin-top: 1.5rem; }
  .use-case-list > li .use-case-body .use-case-tables {
    width: 100%; }
    .use-case-list > li .use-case-body .use-case-tables .borderTable {
      border-right: none; }
      .use-case-list > li .use-case-body .use-case-tables .borderTable th {
        padding-left: 0.5em;
        padding-right: 0.5em;
        width: 5em;
        text-align: justify;
        text-align-last: justify; }
      .use-case-list > li .use-case-body .use-case-tables .borderTable td {
        padding-left: 1em;
        padding-right: 1em; }
      .use-case-list > li .use-case-body .use-case-tables .borderTable th, .use-case-list > li .use-case-body .use-case-tables .borderTable td {
        border-left: none;
        border-right: none; }
  .use-case-list > li .use-case-body .use-case-figure {
    display: flex;
    justify-content: space-between; }
  .use-case-list > li .use-case-body .use-case-draw {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #CCC;
    margin-bottom: 0; }
    .use-case-list > li .use-case-body .use-case-draw img {
      width: 100%;
      height: auto; }
  .use-case-list > li .use-case-body .use-case-before::after {
    content: "";
    width: 2rem;
    height: 2rem;
    position: absolute; }
  .use-case-list > li .use-case-body .use-case-before,
  .use-case-list > li .use-case-body .use-case-after {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 0; }
    .use-case-list > li .use-case-body .use-case-before img,
    .use-case-list > li .use-case-body .use-case-after img {
      width: 100%;
      height: auto; }
    .use-case-list > li .use-case-body .use-case-before figcaption,
    .use-case-list > li .use-case-body .use-case-after figcaption {
      position: absolute;
      right: 0;
      background-color: #ffffffc0;
      font-weight: 600;
      line-height: 1.25; }

#use01 .use-head-copy {
  color: #674694; }
#use01 .use-feature-list.dotL li::before {
  background-color: #674694; }
#use01 .use-effect-copy::after {
  background-color: #674694; }
#use01 .use-case-list > li {
  border-color: #674694; }
  #use01 .use-case-list > li .use-case-head .head {
    color: #FFF;
    background-color: #674694; }
  #use01 .use-case-list > li .use-case-head h4 {
    color: #674694;
    font-weight: 600; }
  #use01 .use-case-list > li .use-case-before::after {
    background-color: #674694; }
  #use01 .use-case-list > li .use-case-copy {
    color: #674694; }

#use02 .use-head-copy {
  color: #009055; }
#use02 .use-feature-list.dotL li::before {
  background-color: #009055; }
#use02 .use-effect-copy::after {
  background-color: #009055; }
#use02 .use-case-list > li {
  border-color: #009055; }
  #use02 .use-case-list > li .use-case-head .head {
    color: #FFF;
    background-color: #009055; }
  #use02 .use-case-list > li .use-case-head h4 {
    color: #009055;
    font-weight: 600; }
  #use02 .use-case-list > li .use-case-before::after {
    background-color: #009055; }
  #use02 .use-case-list > li .use-case-copy {
    color: #009055; }

#use03 .use-head-copy {
  color: #325ea8; }
#use03 .use-feature-list.dotL li::before {
  background-color: #325ea8; }
#use03 .use-effect-copy::after {
  background-color: #325ea8; }
#use03 .use-case-list > li {
  border-color: #325ea8; }
  #use03 .use-case-list > li .use-case-head .head {
    color: #FFF;
    background-color: #325ea8; }
  #use03 .use-case-list > li .use-case-head h4 {
    color: #325ea8;
    font-weight: 600; }
  #use03 .use-case-list > li .use-case-before::after {
    background-color: #325ea8; }
  #use03 .use-case-list > li .use-case-copy {
    color: #325ea8; }

#use04 .use-head-copy {
  color: #b92a3e; }
#use04 .use-feature-list.dotL li::before {
  background-color: #b92a3e; }
#use04 .use-effect-copy::after {
  background-color: #b92a3e; }
#use04 .use-case-list > li {
  border-color: #b92a3e; }
  #use04 .use-case-list > li .use-case-head .head {
    color: #FFF;
    background-color: #b92a3e; }
  #use04 .use-case-list > li .use-case-head h4 {
    color: #b92a3e;
    font-weight: 600; }
  #use04 .use-case-list > li .use-case-before::after {
    background-color: #b92a3e; }
  #use04 .use-case-list > li .use-case-copy {
    color: #b92a3e; }

#use05 .use-head-copy {
  color: #dd960e; }
#use05 .use-feature-list.dotL li::before {
  background-color: #dd960e; }
#use05 .use-effect-copy::after {
  background-color: #dd960e; }
#use05 .use-case-list > li {
  border-color: #dd960e; }
  #use05 .use-case-list > li .use-case-head .head {
    color: #000;
    background-color: #dd960e; }
  #use05 .use-case-list > li .use-case-head h4 {
    color: #dd960e;
    font-weight: 600; }
  #use05 .use-case-list > li .use-case-before::after {
    background-color: #dd960e; }
  #use05 .use-case-list > li .use-case-copy {
    color: #dd960e; }

#use06 .use-head-copy {
  color: #119bde; }
#use06 .use-feature-list.dotL li::before {
  background-color: #119bde; }
#use06 .use-effect-copy::after {
  background-color: #119bde; }
#use06 .use-case-list > li {
  border-color: #119bde; }
  #use06 .use-case-list > li .use-case-head .head {
    color: #FFF;
    background-color: #119bde; }
  #use06 .use-case-list > li .use-case-head h4 {
    color: #119bde;
    font-weight: 600; }
  #use06 .use-case-list > li .use-case-before::after {
    background-color: #119bde; }
  #use06 .use-case-list > li .use-case-copy {
    color: #119bde; }

#use07 .use-head-copy {
  color: #d16c2a; }
#use07 .use-feature-list.dotL li::before {
  background-color: #d16c2a; }
#use07 .use-effect-copy::after {
  background-color: #d16c2a; }
#use07 .use-case-list > li {
  border-color: #d16c2a; }
  #use07 .use-case-list > li .use-case-head .head {
    color: #FFF;
    background-color: #d16c2a; }
  #use07 .use-case-list > li .use-case-head h4 {
    color: #d16c2a;
    font-weight: 600; }
  #use07 .use-case-list > li .use-case-before::after {
    background-color: #d16c2a; }
  #use07 .use-case-list > li .use-case-copy {
    color: #d16c2a; }

#use08 .use-head-copy {
  color: #624131; }
#use08 .use-feature-list.dotL li::before {
  background-color: #624131; }
#use08 .use-effect-copy::after {
  background-color: #624131; }
#use08 .use-case-list > li {
  border-color: #624131; }
  #use08 .use-case-list > li .use-case-head .head {
    color: #FFF;
    background-color: #624131; }
  #use08 .use-case-list > li .use-case-head h4 {
    color: #624131;
    font-weight: 600; }
  #use08 .use-case-list > li .use-case-before::after {
    background-color: #624131; }
  #use08 .use-case-list > li .use-case-copy {
    color: #624131; }

#use09 .use-head-copy {
  color: #bd006b; }
#use09 .use-feature-list.dotL li::before {
  background-color: #bd006b; }
#use09 .use-effect-copy::after {
  background-color: #bd006b; }
#use09 .use-case-list > li {
  border-color: #bd006b; }
  #use09 .use-case-list > li .use-case-head .head {
    color: #FFF;
    background-color: #bd006b; }
  #use09 .use-case-list > li .use-case-head h4 {
    color: #bd006b;
    font-weight: 600; }
  #use09 .use-case-list > li .use-case-before::after {
    background-color: #bd006b; }
  #use09 .use-case-list > li .use-case-copy {
    color: #bd006b; }

#use10 .use-head-copy {
  color: #9ec24b; }
#use10 .use-feature-list.dotL li::before {
  background-color: #9ec24b; }
#use10 .use-effect-copy::after {
  background-color: #9ec24b; }
#use10 .use-case-list > li {
  border-color: #9ec24b; }
  #use10 .use-case-list > li .use-case-head .head {
    color: #000;
    background-color: #9ec24b; }
  #use10 .use-case-list > li .use-case-head h4 {
    color: #9ec24b;
    font-weight: 600; }
  #use10 .use-case-list > li .use-case-before::after {
    background-color: #9ec24b; }
  #use10 .use-case-list > li .use-case-copy {
    color: #9ec24b; }

@media screen and (min-width: 1204px), print {
  .use-head-copy {
    font-size: 1.777778rem; }

  .use-feature-list.dotL {
    margin-top: 2.5em; }
    .use-feature-list.dotL li {
      margin-top: 0.5em; }
      .use-feature-list.dotL li .note {
        font-size: 12px; }

  .use-image {
    width: calc( 100% + 4rem );
    padding-left: 0;
    padding-right: 0;
    clip-path: polygon(0 2rem, 2rem 0, calc( 100% - 2rem ) 0, 100% 2rem, 100% 100%, 0 100%);
    overflow: hidden; }
    .use-image img {
      width: 100%;
      height: auto; }
    .use-image-wrapper {
      margin-top: 4.5rem;
      padding-top: 40px;
      padding-bottom: 1px; }

  .use-effect {
    margin-top: 3rem; }
    .use-effect-copy {
      font-size: 1.777778rem; }
    .use-effect-result {
      font-size: 20px; }

  .use-case-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
    .use-case-list > li {
      width: 100%;
      margin-top: 4.5rem; }
      .use-case-list > li .use-case-head .head {
        width: 52px;
        flex-shrink: 0;
        height: 2.777778rem; }
        .use-case-list > li .use-case-head .head .text {
          font-size: 14px; }
        .use-case-list > li .use-case-head .head .num {
          font-size: 22px; }
      .use-case-list > li .use-case-head h4 {
        font-size: 20px;
        line-height: 1.5;
        padding-left: 1em;
        padding-top: 0.5em; }
      .use-case-list > li .use-case-copy,
      .use-case-list > li .use-case-name {
        font-size: 18px; }
      .use-case-list > li .use-case-body {
        display: flex;
        justify-content: space-between;
        align-items: flex-end; }
        .use-case-list > li .use-case-body .use-case-spec {
          margin-top: 2rem;
          width: 42rem; }
        .use-case-list > li .use-case-body .use-case-tables {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-end; }
          .use-case-list > li .use-case-body .use-case-tables .borderTable:first-child {
            width: calc( 100% - 14rem ); }
          .use-case-list > li .use-case-body .use-case-tables .borderTable:not(:first-of-type) {
            width: 14rem; }
      .use-case-list > li .use-case-figure {
        margin-top: 2.5rem; }
      .use-case-list > li .use-case-draw {
        width: 22rem; }
      .use-case-list > li .use-case-before {
        width: 18rem; }
        .use-case-list > li .use-case-before::after {
          right: -3.15rem;
          clip-path: polygon(25% 0, 75% 50%, 25% 100%); }
      .use-case-list > li.one {
        margin-left: 2rem;
        margin-right: 2rem; }
        .use-case-list > li.one .use-case-after {
          margin-top: 2rem; }
      .use-case-list > li.one,
      .use-case-list > li .use-case-after {
        width: 24rem; }
      .use-case-list > li .use-case-before figcaption,
      .use-case-list > li .use-case-after figcaption {
        bottom: 0.75em;
        padding: 0.25em 0.75em; } }
@media screen and (min-width: 1204px) and (min-width: 1568px) {
  .use-feature-list.dotL li .note {
    font-size: 14px; }

  .use-case-list > li .use-case-head h4 {
    font-size: 22px; }
  .use-case-list > li .use-case-copy,
  .use-case-list > li .use-case-name {
    font-size: 20px; }
  .use-case-list > li .use-case-body .use-case-spec {
    width: 47rem; }
  .use-case-list > li .use-case-body .use-case-tables .borderTable:first-child {
    width: calc( 100% - 14rem ); }
  .use-case-list > li .use-case-body .use-case-tables .borderTable:not(:first-of-type) {
    width: 14rem; }
  .use-case-list > li .use-case-draw {
    width: 26rem; }
  .use-case-list > li .use-case-before {
    width: 19rem; }
    .use-case-list > li .use-case-before::after {
      right: -3.65rem; }
  .use-case-list > li.one,
  .use-case-list > li .use-case-after {
    width: 30rem; } }
@media screen and (max-width: 1203px) {
  .use-feature-list.dotL {
    margin-top: 1em; }
    .use-feature-list.dotL li {
      margin-top: 0.5em; }
      .use-feature-list.dotL li .note {
        font-size: 11px; }

  .use-image {
    padding-left: 0;
    padding-right: 0;
    overflow: hidden; }
    .use-image-wrapper {
      margin-top: 2rem;
      padding-top: 2rem;
      padding-bottom: 2rem; }

  #use08 .use-image img,
  #use09 .use-image img {
    width: calc( 100% + 3rem );
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    height: auto; }

  .use-effect {
    margin-top: 2.5rem; }
    .use-effect-copy {
      font-size: 1.428571rem; }
    .use-effect-result {
      font-size: calc( 1rem + 1px );
      max-width: 20rem; }

  .use-case-list > li {
    margin-top: 2.5rem; }
    .use-case-list > li .use-case-head .head {
      width: 50px;
      flex-shrink: 0;
      height: 50px; }
      .use-case-list > li .use-case-head .head .text {
        font-size: 12px; }
      .use-case-list > li .use-case-head .head .num {
        font-size: 18px; }
    .use-case-list > li .use-case-head h4 {
      display: flex;
      align-items: center; }
      .use-case-list > li .use-case-head h4 .text {
        font-size: 16px;
        line-height: 1.25;
        padding-left: 0.5em;
        padding-top: 0.25em; }
    .use-case-list > li .use-case-body .use-case-spec {
      margin-top: 1rem; }
    .use-case-list > li .use-case-body .use-case-tables .borderTable:not(:last-child) {
      border-bottom: none; }
    .use-case-list > li .use-case-body .use-case-tables .borderTable:last-child tr {
      display: inline-table;
      width: 50%; }
    .use-case-list > li .use-case-figure {
      margin-top: 2rem;
      margin-bottom: 2rem; }
    .use-case-list > li .use-case-draw {
      width: calc( 57.5% - 0.5rem ); }
    .use-case-list > li .use-case-before {
      width: calc( 42.5% - 0.5rem ); }
      .use-case-list > li .use-case-before::after {
        bottom: -2.05rem;
        clip-path: polygon(0 25%, 50% 75%, 100% 25%); }
    .use-case-list > li.one .use-case-after {
      margin-top: 1rem; }
    .use-case-list > li .use-case-before figcaption,
    .use-case-list > li .use-case-after figcaption {
      font-size: 0.857142rem;
      bottom: 0.5em;
      padding: 0.25em 0.75em; } }
@media screen and (max-width: 1203px) and (min-width: 575px) {
  .use-feature-list.dotL li .note {
    font-size: 12px; } }
@media screen and (max-width: 1203px) and (min-width: 768px) {
  .use-effect-result {
    max-width: 100%; } }