/* Scss Document */
/*****************************************************/
h2 {
  max-width: 1680px;
  margin: 0 auto;
  width: calc(100% - 80px);
  font: 35px/1.0em 'Noto Sans JP', sans-serif;
  font-weight: 700; }
  h2 span {
    color: #b5091f; }
  h2 small {
    display: block;
    font: 24px/1.0em 'Noto Sans JP', sans-serif;
    font-weight: 700;
    margin: 15px 0 0; }

/*max-width:1280px*/
/*max-width:1024px*/
@media (max-width: 768px) {
  h2 {
    max-width: 1680px;
    margin: 0 auto 30px;
    width: calc(100% - 80px);
    padding: 55px 0 0;
    font: 35px/1.0em 'Noto Sans JP', sans-serif;
    font-weight: 700;
    text-align: center; } }
/*max-width:768px*/
@media (max-width: 480px) {
  h2 {
    max-width: 1680px;
    margin: 0 auto 0px;
    width: calc(100% - 40px);
    padding: 40px 0 0;
    font: 30px/1.0em 'Noto Sans JP', sans-serif;
    font-weight: 700;
    text-align: center; } }
/*max-width:480px*/
/*****************************************************/
.charm_all {
  padding: 100px 0 150px; }
  .charm_all h3 {
    width: calc(100% - 260px);
    margin: 0 auto 33px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: #b5091f;
    position: relative; }
    .charm_all h3 .bg {
      font: 22px/1.5em 'Noto Sans JP', sans-serif;
      font-weight: 500;
      background-color: #b5091f;
      padding: 10px 25px;
      color: #fff;
      display: block;
      width: 184px;
      position: relative;
      margin: 0 45px 0 0;
      border-radius: 10px; }
      .charm_all h3 .bg:before {
        width: 0;
        height: 0;
        border-style: solid;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-left: 26px solid #b5091f;
        border-right: 0;
        position: absolute;
        content: "";
        top: 50%;
        left: auto;
        right: -25px;
        transform: translate(0%, -50%); }
    .charm_all h3 .fish {
      font: 40px/1.8em 'Noto Sans JP', sans-serif;
      font-weight: 700;
      display: block;
      position: relative;
      padding: 0 0 0 105px;
      width: calc(100% - 231px);
      max-width: fit-content; }
      .charm_all h3 .fish:before {
        background: url("../images/charm/fish.svg") center center no-repeat;
        background-size: contain;
        position: absolute;
        content: "";
        display: block;
        width: 90px;
        height: 41px;
        left: 0;
        top: 18px; }
      .charm_all h3 .fish br {
        display: none; }
  .charm_all > p {
    width: calc(100% - 260px);
    text-align: center;
    font: 22px/1.8em 'Noto Sans JP', sans-serif;
    font-weight: 700;
    margin: 0 auto 60px; }
    .charm_all > p span {
      padding: 0 0 0 15px; }

/*min-width:1920px*/
@media (max-width: 1280px) {
  .charm_all {
    padding: 100px 0 150px; }
    .charm_all h3 {
      width: calc(100% - 260px);
      margin: 0 auto 33px;
      display: block;
      position: relative; }
      .charm_all h3 .bg {
        font: 22px/1.5em 'Noto Sans JP', sans-serif;
        font-weight: 500;
        background-color: #b5091f;
        padding: 10px 25px;
        color: #fff;
        display: block;
        width: fit-content;
        position: relative;
        margin: 0 auto 25px;
        border-radius: 10px; }
        .charm_all h3 .bg br {
          display: none; }
        .charm_all h3 .bg:before {
          border-right: 15px solid transparent;
          border-left: 15px solid transparent;
          border-top: 26px solid #b5091f;
          border-bottom: 0;
          position: absolute;
          content: "";
          top: auto;
          bottom: -20px;
          left: 50%;
          right: auto;
          transform: translate(-50%, 0%); }
      .charm_all h3 .fish {
        margin: 0 auto;
        width: 100%;
        max-width: fit-content; } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .charm_all {
    padding: 100px 0 150px; }
    .charm_all h3 {
      width: calc(100% - 150px);
      margin: 0 auto 33px;
      display: block; }
      .charm_all h3 .bg {
        font: 20px/1.5em 'Noto Sans JP', sans-serif;
        font-weight: 500; }
      .charm_all h3 .fish {
        font: 35px/1.8em 'Noto Sans JP', sans-serif;
        font-weight: 700;
        padding: 0 0 0 90px; }
        .charm_all h3 .fish:before {
          background: url("../images/charm/fish.svg") center center no-repeat;
          background-size: contain;
          position: absolute;
          content: "";
          display: block;
          width: 80px;
          height: 36px;
          left: 0;
          top: 17px; }
    .charm_all > p {
      width: calc(100% - 150px); }
      .charm_all > p span {
        padding: 0;
        width: 100%;
        display: block; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .charm_all {
    padding: 100px 0 150px; }
    .charm_all h3 {
      width: calc(100% - 60px);
      margin: 0 auto 15px;
      display: block; }
      .charm_all h3:before {
        background: url("../images/charm/fish.svg") center center no-repeat;
        background-size: contain;
        position: absolute;
        content: "";
        display: block;
        width: 90px;
        height: 41px;
        top: -60px;
        left: 50%;
        transform: translate(-50%, 0%) rotate(15deg); }
      .charm_all h3 .fish {
        font: 28px/1.8em 'Noto Sans JP', sans-serif;
        font-weight: 700;
        padding: 0;
        text-align: center; }
        .charm_all h3 .fish:before {
          display: none; }
    .charm_all > p {
      width: calc(100% - 60px);
      font: 20px/1.8em 'Noto Sans JP', sans-serif;
      font-weight: 700;
      margin: 0 auto 30px; }
      .charm_all > p span {
        padding: 0;
        width: 100%;
        display: block; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .charm_all {
    padding: 90px 0 100px; }
    .charm_all h3 {
      width: calc(100% -40px);
      margin: 0 auto 15px;
      display: block; }
      .charm_all h3:before {
        height: 30px;
        top: -45px;
        left: 50%;
        transform: translate(-50%, 0%) rotate(15deg); }
      .charm_all h3 .bg {
        font: 18px/1.5em 'Noto Sans JP', sans-serif;
        font-weight: 500;
        margin: 0 auto 15px; }
        .charm_all h3 .bg:before {
          bottom: -15px; }
      .charm_all h3 .fish {
        font: 28px/1.8em 'Noto Sans JP', sans-serif;
        font-weight: 700;
        padding: 0;
        text-align: center; }
        .charm_all h3 .fish:before {
          display: none; }
        .charm_all h3 .fish br {
          display: block; }
    .charm_all > p {
      width: calc(100% - 40px);
      font: 18px/1.8em 'Noto Sans JP', sans-serif;
      font-weight: 700;
      margin: 0 auto 30px; }
      .charm_all > p span {
        padding: 0;
        width: 100%;
        display: block; } }
/*max-width:480px*/
/*****************************************************/
.content {
  max-width: 1200px;
  margin: 0 auto;
  width: calc(100% - 260px);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  align-items: stretch; }

.js-open-modal {
  width: calc((100% - 75px) / 4);
  margin: 0 25px 75px 0;
  border: 1px solid #ccc;
  padding: 20px 20px 25px;
  position: relative;
  border-radius: 15px; }
  .js-open-modal:nth-of-type(4n) {
    margin-right: 0; }
  .js-open-modal h4 {
    color: #333;
    text-align: center;
    font: 20px/1.5em 'Noto Sans JP', sans-serif;
    font-weight: 700;
    margin: 0 auto 15px; }
  .js-open-modal p {
    font: 17px/1.8em 'Noto Sans JP', sans-serif;
    font-weight: 400;
    text-align: justify;
    text-justify: inter-ideograph; }
    .js-open-modal p strong {
      font: 17px/1.8em 'Noto Sans JP', sans-serif;
      font-weight: 700; }
  .js-open-modal img {
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 1; }
  .js-open-modal .dat {
    font: 16px/1.5em 'Noto Sans JP', sans-serif;
    font-weight: 500;
    text-align: center;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 2px 15px 3px;
    display: block;
    margin: -10px auto 15px;
    width: fit-content;
    border-radius: 25px;
    position: relative;
    z-index: 2; }
  .js-open-modal .click {
    font: 16px/63px 'Noto Sans JP', sans-serif;
    font-weight: 500;
    display: block;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: #666;
    color: #fff;
    position: absolute;
    top: auto;
    bottom: -33px;
    left: 50%;
    transform: translate(-50%, 0%);
    text-align: center; }
    .js-open-modal .click:before {
      position: absolute;
      content: "";
      background: url("../images/charm/click.svg") center bottom 15px no-repeat;
      background-size: 23xp auto;
      width: 65px;
      height: 65px;
      display: block; }
  .js-open-modal.cat_red {
    border-color: #F8CBC6; }
    .js-open-modal.cat_red .dat {
      border-color: #F8CBC6; }
    .js-open-modal.cat_red h4 {
      color: #E07C76; }
    .js-open-modal.cat_red .click {
      background-color: #E07C76; }
  .js-open-modal.cat_blue {
    border-color: #7ECEF4; }
    .js-open-modal.cat_blue .dat {
      border-color: #7ECEF4; }
    .js-open-modal.cat_blue h4 {
      color: #6DB3D4; }
    .js-open-modal.cat_blue .click {
      background-color: #6DB3D4; }
  .js-open-modal.cat_yellow {
    border-color: #EDCF70; }
    .js-open-modal.cat_yellow .dat {
      border-color: #EDCF70; }
    .js-open-modal.cat_yellow h4 {
      color: #E3B400; }
    .js-open-modal.cat_yellow .click {
      background-color: #E3B400; }
  .js-open-modal.cat_green {
    border-color: #AACF52; }
    .js-open-modal.cat_green .dat {
      border-color: #AACF52; }
    .js-open-modal.cat_green h4 {
      color: #8FC31F; }
    .js-open-modal.cat_green .click {
      background-color: #8FC31F; }
  .js-open-modal.cat_purple {
    border-color: #BBC4E4; }
    .js-open-modal.cat_purple .dat {
      border-color: #BBC4E4; }
    .js-open-modal.cat_purple h4 {
      color: #005EAD; }
    .js-open-modal.cat_purple .click {
      background-color: #005EAD; }

@media (max-width: 1280px) {
  .js-open-modal {
    width: calc((100% - 50px) / 3); }
    .js-open-modal:nth-of-type(4n) {
      margin-right: 25px; }
    .js-open-modal:nth-of-type(3n) {
      margin-right: 0; } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .content {
    width: calc(100% - 150px);
    max-width: 768px; }

  .js-open-modal {
    width: calc((100% - 25px) / 2);
    margin: 0 25px 35px 0;
    border-radius: 15px; }
    .js-open-modal:nth-of-type(4n), .js-open-modal:nth-of-type(3n) {
      margin-right: 25px; }
    .js-open-modal:nth-of-type(2n) {
      margin-right: 0; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .content {
    display: block;
    width: calc(100% - 60px);
    max-width: 480px; }

  .js-open-modal {
    width: 100%;
    max-width: 300px;
    margin: 0 auto 35px;
    padding: 20px 22px 25px; }
    .js-open-modal:nth-of-type(4n), .js-open-modal:nth-of-type(3n), .js-open-modal:nth-of-type(2n) {
      margin: 0 auto 75px; } }
/*max-width:768px*/
/*max-width:480px*/