@charset "UTF-8";
/*----------------------------------

master => hss/business/cjs_assets

----------------------------------*/
.case01 .case-ttl01,
.case02 .case-ttl01,
.case03 .case-ttl01 {
  border-top: 1px solid #00c586;
  border-bottom: 1px solid #00c586;
  margin-top: 4rem;
  position: relative;
  text-align: center;
  padding: 2rem;
  font-size: 2.4rem;
  margin-top: 4rem;
  font-weight: bold; }
  .case01 .case-ttl01:before,
  .case02 .case-ttl01:before,
  .case03 .case-ttl01:before {
    position: absolute;
    content: "";
    border-top: 2rem solid #00c586;
    border-right: 2rem solid transparent;
    border-bottom: 2rem solid transparent;
    border-left: 2rem solid transparent;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) translateY(100%); }
.case01 .case-ttl02,
.case02 .case-ttl02,
.case03 .case-ttl02 {
  border: 2px solid #00c586;
  border-radius: 1rem;
  text-align: center;
  padding: 2rem;
  font-weight: bold;
  font-size: 3.2rem;
  color: #00c586;
  margin-top: 3rem; }
.case01 .lead,
.case02 .lead,
.case03 .lead {
  line-height: 2.2;
  margin-top: 4rem;
  padding-bottom: 2rem;
  overflow: hidden; }
  .case01 .lead .photo,
  .case02 .lead .photo,
  .case03 .lead .photo {
    float: right;
    width: 44%;
    margin-left: 4%;
    margin-bottom: 2rem;
    border-radius: 1rem;
    overflow: hidden;
    position: relative; }
@media screen and (max-width: 600px) {
  .case01 .lead .photo,
  .case02 .lead .photo,
  .case03 .lead .photo {
    width: 100%;
    margin-left: 0%;
    margin-bottom: 2rem;
    overflow: hidden;
    position: relative; } }

.case01,
.case03 {
  background: #effffa; }
  .case01 .case-ttl02,
  .case03 .case-ttl02 {
    background: #fff; }

.case02 {
  background: #fff; }
  .case02 .case-ttl02 {
    background: #effffa; }

.contents-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 4rem;
  padding-bottom: 1rem; }
  .contents-list li {
    margin-top: 3rem; }
    .contents-list li a {
      display: block; }
      .contents-list li a .img {
        border-radius: 1.5rem;
        overflow: hidden;
        position: relative; }
        .contents-list li a .img img {
          transition: 1.5s; }
        @media screen and (max-width: 500px) {
          .contents-list li a .img img {
            height: 20rem;
            object-fit: cover; } }
      .contents-list li a .con-ttl {
        font-size: 1.6rem;
        font-weight: bold;
        margin-top: 2rem; }
      .contents-list li a .con-lead {
        font-size: 1.4rem;
        line-height: 2;
        margin-top: 1rem; }
      .contents-list li a:hover .img img {
        transform: scale(1.2); }

.sec-custom {
  background: #fff; }
  .sec-custom .inner {
    padding-bottom: 0; }
  .sec-custom .line-txt {
    margin-top: 5rem; }
  .sec-custom .page-midashi {
    font-weight: bold;
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; }
  .sec-custom .con-name {
    color: #000;
    text-align: center; }
    .sec-custom .con-name b {
      color: #5280f6; }
  .sec-custom .contents-list {
    padding-bottom: 8rem;
    width: 90%;
    margin: auto;
    max-width: 1400px;
    padding-top: 1.5rem; }
    .sec-custom .contents-list li {
      width: 31%;
      /**width: 47%;**/ }
      .sec-custom .contents-list li a .img {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0; }
      .sec-custom .contents-list li a .con-ttl {
        font-size: 1.8rem;
        background: #dee8fc;
        border-bottom-left-radius: 1.5rem;
        border-bottom-right-radius: 1.5rem;
        margin-top: 0;
        box-sizing: border-box;
        position: relative;
        padding: 2rem 2.5rem; }
        .sec-custom .contents-list li a .con-ttl .arrow:before, .sec-custom .contents-list li a .con-ttl .arrow:after {
          position: absolute;
          content: "";
          right: 2.5rem;
          transition: 0.5s; }
        .sec-custom .contents-list li a .con-ttl .arrow:before {
          top: 50%;
          width: 0.8rem;
          height: 0.8rem;
          border-right: 1px solid #000;
          border-top: 1px solid #000;
          transform: translateX(0%) translateY(-50%) rotate(45deg); }
        .sec-custom .contents-list li a .con-ttl .arrow:after {
          top: 50%;
          width: 1.5rem;
          height: 1px;
          background: #000;
          transform: translateX(0%) translateY(-50%); }
      .sec-custom .contents-list li a .con-lead {
        font-size: 1.6rem;
        margin-top: 1.5rem; }
    @media screen and (max-width: 900px) {
      .sec-custom .contents-list li {
        width: 47%; } }
    @media screen and (max-width: 600px) {
      .sec-custom .contents-list li {
        width: 100%; } }