@charset "UTF-8";
/**
 * カードをつかう トップ
 */
/* ==========================================================================
   style
   ========================================================================== */
#cat-l01 {
  background-image: url(img/bg-cattop01.jpg); }

#cat-l02 {
  background-image: url(img/bg-cattop02.jpg); }

.cat-base {
  padding: 30px 2.943% 50px; }
  .cat-base h2 {
    font-size: 214.2857142857%;
    text-align: center; }
    .cat-base h2 span {
      display: block;
      margin-bottom: 3px; }
  .cat-base .cat-base-pitapa {
    background-color: #fff;
    border-radius: 3px;
    display: block;
    float: left;
    margin: 20px 0.626% 0;
    padding: 20px 2.5%;
    width: 286px; }
    @media screen and (max-width: 767px) {
      .cat-base .cat-base-pitapa {
        width: 100%; } }
    @media (min-width: 1040px) and (max-width: 1200px) {
      .cat-base .cat-base-pitapa {
        width: 43.75%; } }
    @media all and (min-width: 1200px) {
      .cat-base .cat-base-pitapa {
        width: 350px; } }
    .cat-base .cat-base-pitapa .fbox .fl {
      width: 62px; }
      @media screen and (max-width: 767px) {
        .cat-base .cat-base-pitapa .fbox .fl {
          width: 100%; } }
      @media (min-width: 1040px) and (max-width: 1200px) {
        .cat-base .cat-base-pitapa .fbox .fl {
          width: 21.7142857143%; } }
      @media all and (min-width: 1200px) {
        .cat-base .cat-base-pitapa .fbox .fl {
          width: 76px; } }
      .cat-base .cat-base-pitapa .fbox .fl img {
        height: auto;
        width: 100%; }
    .cat-base .cat-base-pitapa .fbox .fr {
      width: 207px; }
      @media screen and (max-width: 767px) {
        .cat-base .cat-base-pitapa .fbox .fr {
          width: 100%; } }
      @media (min-width: 1040px) and (max-width: 1200px) {
        .cat-base .cat-base-pitapa .fbox .fr {
          width: 72.5714285714%; } }
      @media all and (min-width: 1200px) {
        .cat-base .cat-base-pitapa .fbox .fr {
          width: 254px; } }
    .cat-base .cat-base-pitapa h3 {
      color: #cf0559;
      border-bottom: 1px solid #d8d8d8;
      font-size: 142.8571428571%;
      margin-bottom: 20px;
      padding-bottom: 10px; }
      .cat-base .cat-base-pitapa h3.icon-big-arrow {
        position: relative; }
      .cat-base .cat-base-pitapa h3:after {
        font-size: 80%;
        position: absolute;
        right: 0;
        top: 25%; }
      .cat-base .cat-base-pitapa h3 + p {
        margin-top: 10px; }

.cat-base .cat-base-pitapa.full {
  width: 613px; }
  @media screen and (max-width: 767px) {
    .cat-base .cat-base-pitapa.full {
      width: 100%; } }
  @media (min-width: 1040px) and (max-width: 1200px) {
    .cat-base .cat-base-pitapa.full {
      width: 93.75%; } }
  @media all and (min-width: 1200px) {
    .cat-base .cat-base-pitapa.full {
      width: 750px; } }

@media screen and (max-width: 1040px) {
  .cat-base .cat-base-pitapa {
    width: 285px; }
    .cat-base .cat-base-pitapa.full {
      width: 611px; }
  .cat-base .cat-base-pitapa h3 {
    font-size: 128.5714285714%; } }
@media screen and (max-width: 767px) {
  .cat-base {
    padding: 20px 15px 20px; }
    .cat-base .cat-base-pitapa {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      -o-box-sizing: border-box;
      box-sizing: border-box;
      position: relative;
      zoom: 1;
      float: none;
      margin: 10px 0 0;
      padding: 15px 10px;
      width: 100%; }
      .cat-base .cat-base-pitapa.full {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        zoom: 1;
        width: 100%; }
      .cat-base .cat-base-pitapa .fbox .fl {
        width: 20%; }
      .cat-base .cat-base-pitapa .fbox .fr {
        width: 76%; }
      .cat-base .cat-base-pitapa h3 {
        margin-bottom: 15px; }
        .cat-base .cat-base-pitapa h3 + p {
          margin-top: 5px; } }
.cat-base-item.full .fbox .fl {
  width: 74px; }
  @media screen and (max-width: 767px) {
    .cat-base-item.full .fbox .fl {
      width: 100%; } }
  @media (min-width: 1040px) and (max-width: 1200px) {
    .cat-base-item.full .fbox .fl {
      width: 12%; } }
  @media all and (min-width: 1200px) {
    .cat-base-item.full .fbox .fl {
      width: 90px; } }
.cat-base-item.full .fbox .fr {
  width: 523px; }
  @media screen and (max-width: 767px) {
    .cat-base-item.full .fbox .fr {
      width: 100%; } }
  @media (min-width: 1040px) and (max-width: 1200px) {
    .cat-base-item.full .fbox .fr {
      width: 85.3333333333%; } }
  @media all and (min-width: 1200px) {
    .cat-base-item.full .fbox .fr {
      width: 640px; } }

@media screen and (max-width: 767px) {
  .note-list.service {
    margin: 0 15px; } }