@charset "UTF-8";
/* line 4, compound.scss */
.page-title.topimage {
  background-image: url("../img/topimage_compound.jpg"); }
  @media screen and (max-width: 800px) {
    /* line 4, compound.scss */
    .page-title.topimage {
      background-image: url("../img/topimage_compound_sp.jpg"); } }

/* line 13, compound.scss */
#products01 h4 {
  color: #005EAF; }
/* line 17, compound.scss */
#products01 .make h4 {
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 6px; }
  /* line 21, compound.scss */
  #products01 .make h4::before {
    display: inline-block;
    content: "■ "; }
/* line 28, compound.scss */
#products01 .make .make-content:nth-child(2) h4 {
  color: #000; }

/* line 36, compound.scss */
.pellet {
  border-top: 1px solid #E9ECF0;
  margin-bottom: 80px; }
  @media screen and (max-width: 800px) {
    /* line 36, compound.scss */
    .pellet {
      margin-bottom: 60px; } }
  /* line 42, compound.scss */
  .pellet:last-child {
    margin-bottom: 0px; }
  /* line 45, compound.scss */
  .pellet ul {
    padding: 0;
    margin: 0 0 30px; }
    /* line 48, compound.scss */
    .pellet ul li {
      position: relative;
      color: #005EAF;
      padding: 0 0 0 22px;
      margin: 0 0 8px; }
      @media screen and (max-width: 800px) {
        /* line 48, compound.scss */
        .pellet ul li {
          margin-bottom: 4px; } }
      /* line 56, compound.scss */
      .pellet ul li:last-child {
        margin-bottom: 0; }
      /* line 59, compound.scss */
      .pellet ul li::before {
        position: absolute;
        left: 0;
        top: 14px;
        width: 12px;
        height: 1px;
        content: "";
        background-color: #005EAF; }
  @media screen and (max-width: 800px) {
    /* line 70, compound.scss */
    .pellet p {
      margin-bottom: 30px; } }
  /* line 74, compound.scss */
  .pellet p.bikou {
    margin: 0;
    /*max-width: 430px;*/ }
    @media screen and (max-width: 800px) {
      /* line 74, compound.scss */
      .pellet p.bikou {
        max-width: inherit; } }

/* line 83, compound.scss */
.pellet-content {
  display: flex;
  justify-content: space-between; }
  @media screen and (max-width: 800px) {
    /* line 83, compound.scss */
    .pellet-content {
      flex-direction: column;
      gap: 30px 0; } }
  /* line 90, compound.scss */
  .pellet-content .l-pellet {
    width: 48%; }
    @media screen and (max-width: 800px) {
      /* line 90, compound.scss */
      .pellet-content .l-pellet {
        width: 100%; } }
    @media screen and (max-width: 800px) {
      /* line 95, compound.scss */
      .pellet-content .l-pellet p {
        margin-bottom: 30px; } }
    /* line 100, compound.scss */
    .pellet-content .l-pellet dl {
      background-color: #EDF5FC;
      padding: 20px 35px;
      margin: 0; }
      @media screen and (max-width: 800px) {
        /* line 100, compound.scss */
        .pellet-content .l-pellet dl {
          padding: 20px 15px; } }
      /* line 107, compound.scss */
      .pellet-content .l-pellet dl dt {
        position: relative;
        width: 100%;
        color: #005EAF;
        font-size: 15px;
        line-height: 1.67;
        margin: 0;
        padding: 0 0 0 15px; }
        /* line 115, compound.scss */
        .pellet-content .l-pellet dl dt::before {
          position: absolute;
          left: 0;
          top: 0;
          color: #000;
          content: "・"; }
      /* line 123, compound.scss */
      .pellet-content .l-pellet dl dd {
        width: 100%;
        font-size: 15px;
        line-height: 1.67;
        margin: 0 0 10px;
        padding: 0 0 0 15px; }
        /* line 129, compound.scss */
        .pellet-content .l-pellet dl dd:last-child {
          margin-bottom: 0; }
        /* line 132, compound.scss */
        .pellet-content .l-pellet dl dd .nado {
          display: inline-block;
          margin-left: 90px; }
          @media screen and (max-width: 800px) {
            /* line 132, compound.scss */
            .pellet-content .l-pellet dl dd .nado {
              display: block;
              margin-left: 0; } }
  /* line 143, compound.scss */
  .pellet-content .r-pellet {
    width: 48%; }
    @media screen and (max-width: 800px) {
      /* line 143, compound.scss */
      .pellet-content .r-pellet {
        width: 100%; } }
    /* line 148, compound.scss */
    .pellet-content .r-pellet .compound-img01 {
      width: 100%; }
      /* line 150, compound.scss */
      .pellet-content .r-pellet .compound-img01 img {
        width: 100%; }

/* line 157, compound.scss */
.make {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 40px; }
  @media screen and (max-width: 800px) {
    /* line 157, compound.scss */
    .make {
      flex-direction: column;
      gap: 45px 0;
      margin-bottom: 30px; } }
  /* line 167, compound.scss */
  .make .make-content {
    position: relative;
    width: 47.8%;
    padding: 30px; }
    @media screen and (max-width: 800px) {
      /* line 167, compound.scss */
      .make .make-content {
        width: 100%;
        padding: 15px; } }
    /* line 175, compound.scss */
    .make .make-content:nth-child(1) {
      border: 1px solid #005EAF;
      background-color: #EDF5FC; }
      /* line 178, compound.scss */
      .make .make-content:nth-child(1)::after {
        position: absolute;
        left: calc(100% + 3.2%);
        top: 50%;
        translate: 0 -50%;
        width: 21px;
        height: 67px;
        content: "";
        background-color: #B5B8BC;
        clip-path: polygon(0 0, 0% 100%, 100% 50%); }
        @media screen and (max-width: 800px) {
          /* line 178, compound.scss */
          .make .make-content:nth-child(1)::after {
            width: 67px;
            height: 21px;
            left: 50%;
            top: auto;
            bottom: -35px;
            translate: -50% 0;
            clip-path: polygon(50% 100%, 0 0, 100% 0); } }
      /* line 198, compound.scss */
      .make .make-content:nth-child(1) h4 {
        color: #005EAF; }
      /* line 202, compound.scss */
      .make .make-content:nth-child(1) p.read-make {
        color: #005EAF; }
    /* line 207, compound.scss */
    .make .make-content:nth-child(2) {
      border: 1px solid #B5B8BC;
      background-color: #F4F4F4; }
      /* line 210, compound.scss */
      .make .make-content:nth-child(2) h4 {
        color: #000; }
      /* line 214, compound.scss */
      .make .make-content:nth-child(2) p.read-make {
        color: #000; }
    /* line 219, compound.scss */
    .make .make-content p {
      font-size: 15px;
      line-height: 1.67;
      margin-bottom: 0; }
      /* line 223, compound.scss */
      .make .make-content p.read-make {
        font-size: 16px;
        font-weight: 500;
        line-height: 1.56;
        margin-bottom: 10px; }

/* line 233, compound.scss */
.compound-area {
  position: relative;
  width: 100%;
  max-width: 904px;
  margin: -60px auto 30px; }
  @media screen and (max-width: 800px) {
    /* line 233, compound.scss */
    .compound-area {
      width: calc(100% + 16px);
      margin: 0 auto 75px; } }
  /* line 242, compound.scss */
  .compound-area .compound-img02 {
    position: relative;
    width: 100%;
    z-index: 0; }
  /* line 247, compound.scss */
  .compound-area ol {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none; }
    /* line 256, compound.scss */
    .compound-area ol li {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: 0;
      padding: 0; }
      /* line 262, compound.scss */
      .compound-area ol li.ca01 {
        translate: 200% -730%; }
        @media screen and (max-width: 800px) {
          /* line 262, compound.scss */
          .compound-area ol li.ca01 {
            translate: 162% -250%; } }
      /* line 268, compound.scss */
      .compound-area ol li.ca02 {
        translate: 225% -260%; }
        @media screen and (max-width: 800px) {
          /* line 268, compound.scss */
          .compound-area ol li.ca02 {
            translate: 215% -75%; } }
        @media screen and (max-width: 800px) {
          /* line 273, compound.scss */
          .compound-area ol li.ca02 button {
            padding: 37px 0 0; } }
        @media screen and (max-width: 800px) {
          /* line 277, compound.scss */
          .compound-area ol li.ca02 button .plus {
            bottom: auto;
            top: 0; } }
      /* line 285, compound.scss */
      .compound-area ol li.ca03 {
        translate: 5% -420%; }
        @media screen and (max-width: 800px) {
          /* line 285, compound.scss */
          .compound-area ol li.ca03 {
            translate: 0% -175%; } }
      /* line 291, compound.scss */
      .compound-area ol li.ca04 {
        translate: -90% 30%; }
        @media screen and (max-width: 800px) {
          /* line 291, compound.scss */
          .compound-area ol li.ca04 {
            translate: -95% 0%; } }
        @media screen and (max-width: 800px) {
          /* line 296, compound.scss */
          .compound-area ol li.ca04 button {
            padding: 37px 0 0; } }
        @media screen and (max-width: 800px) {
          /* line 300, compound.scss */
          .compound-area ol li.ca04 button .plus {
            bottom: auto;
            top: 0; } }
      /* line 308, compound.scss */
      .compound-area ol li.ca05 {
        translate: -215% -240%; }
        @media screen and (max-width: 800px) {
          /* line 308, compound.scss */
          .compound-area ol li.ca05 {
            translate: -167% -125%; } }
      /* line 314, compound.scss */
      .compound-area ol li.ca06 {
        translate: -200% 645%; }
        @media screen and (max-width: 800px) {
          /* line 314, compound.scss */
          .compound-area ol li.ca06 {
            translate: -90% 220%; } }
        @media screen and (max-width: 800px) {
          /* line 319, compound.scss */
          .compound-area ol li.ca06 button {
            white-space: nowrap;
            padding: 0 0 0 40px; } }
        @media screen and (max-width: 800px) {
          /* line 324, compound.scss */
          .compound-area ol li.ca06 button .plus {
            bottom: auto;
            top: 50%;
            left: 0;
            translate: 0 -50%; } }
      /* line 334, compound.scss */
      .compound-area ol li button {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        font-size: 14px;
        font-weight: 700;
        border-radius: 9999px;
        background-color: #005EAF;
        padding: 0 45px 0 18px;
        border: none;
        cursor: pointer; }
        @media screen and (max-width: 800px) {
          /* line 334, compound.scss */
          .compound-area ol li button {
            color: #005EAF;
            font-size: 11px;
            padding: 0 0 37px;
            background: none;
            border-radius: 0; } }
        @media screen and (max-width: 800px) {
          /* line 354, compound.scss */
          .compound-area ol li button .cm-text {
            position: relative;
            display: inline-block;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 0 4px; } }
        /* line 362, compound.scss */
        .compound-area ol li button .plus {
          position: absolute;
          right: 10px;
          top: 50%;
          translate: 0 -50%;
          width: 26px;
          height: 26px;
          border-radius: 50%;
          background-color: #FFFFFF;
          pointer-events: none; }
          @media screen and (max-width: 800px) {
            /* line 362, compound.scss */
            .compound-area ol li button .plus {
              right: auto;
              left: 50%;
              top: auto;
              bottom: 0;
              translate: -50% 0;
              width: 36px;
              height: 36px;
              border: 3px solid #005EAF; } }
          /* line 382, compound.scss */
          .compound-area ol li button .plus::before, .compound-area ol li button .plus::after {
            position: absolute;
            left: 50%;
            top: 50%;
            translate: -50% -50%;
            width: 11px;
            height: 2px;
            content: "";
            background-color: #005EAF;
            pointer-events: none; }
            @media screen and (max-width: 800px) {
              /* line 382, compound.scss */
              .compound-area ol li button .plus::before, .compound-area ol li button .plus::after {
                width: 13px; } }
          /* line 397, compound.scss */
          .compound-area ol li button .plus::after {
            rotate: 90deg; }

/* line 405, compound.scss */
.products-bottom {
  max-width: 626px;
  margin: 0 0 0 auto; }
  @media screen and (max-width: 800px) {
    /* line 405, compound.scss */
    .products-bottom {
      max-width: inherit;
      margin: 0; } }

/* line 416, compound.scss */
#products02::after {
  background-color: #005EAF; }

/*# sourceMappingURL=compound.css.map */