@charset "UTF-8";
body {
  padding: 90px 0 0; }

.page_ttl {
  margin-bottom: 100px; }

/************************************************/
.message {
  max-width: 1200px;
  width: calc(100% - 100px);
  margin: 0 auto;
  padding: 0 0 111px; }
  .message ul {
    width: 100%;
    margin: 0 auto 80px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start; }
  .message li {
    width: calc((100% - 210px)/3);
    max-width: 330px;
    margin: 0 105px 50px 0; }
    .message li:nth-of-type(3n) {
      margin-right: 0; }
    .message li a {
      transition: .3s;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      -webkit-justify-content: center;
      justify-content: center;
      align-items: flex-start;
      border: 1px solid #ccc;
      width: 100%;
      height: 80px;
      padding: 0 25px;
      font: 1.7rem/1.2em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      font-weight: 700;
      text-decoration: none;
      position: relative; }
      .message li a:before {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-left: 12px solid #009B63;
        border-right: 0;
        top: 50%;
        left: auto;
        right: 20px;
        -webkit-transform: translate(0%, -50%);
        /* Safari用 */
        transform: translate(0%, -50%); }
      .message li a br {
        display: none; }

@media (hover: hover) {
  .message li a:hover {
    background-color: #EDF9E7; } }
@media (max-width: 1280px) {
  .message li {
    width: calc((100% - 100px)/3);
    max-width: 330px;
    margin: 0 50px 50px 0; } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .message {
    width: calc(100% - 80px); }
    .message ul {
      max-width: 768px;
      margin: 0 auto 80px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start; }
    .message li {
      width: calc((100% - 50px)/2);
      max-width: 330px;
      margin: 0 0 50px 0; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .message {
    width: calc(100% - 60px); }
    .message li {
      width: calc((100% - 20px)/2);
      max-width: 330px;
      margin: 0 0 30px 0; }
      .message li a {
        font: 1.7rem/1.5em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
        font-weight: 700; }
        .message li a br {
          display: block; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .message {
    width: calc(100% - 40px); }
    .message ul {
      width: 100%;
      margin: 0 auto 55px; }
    .message li {
      width: 100%;
      max-width: 300px;
      margin: 0 auto 30px !important; }
      .message li a {
        font: 1.7rem/1.5em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
        font-weight: 700; }
        .message li a br {
          display: none; } }
/*max-width:480px*/
/************************************************/
.single_message {
  max-width: 1200px;
  width: calc(100% - 100px);
  margin: 0 auto;
  position: relative;
  padding: 0 0 111px; }
  .single_message .content {
    border: 1px solid #009B63;
    background-color: #FFFEF7;
    padding: 120px 60px 80px;
    font: 1.7rem/2em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: 400;
    margin: 0 auto 100px;
    width: 100%;
    border-radius: 20px; }
    .single_message .content .this_month {
      position: relative;
      font: 3.4rem/1em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      font-weight: 700;
      letter-spacing: 0.034em;
      padding: 0 100px;
      text-decoration: none;
      display: block;
      width: fit-content;
      margin: 0 auto 100px; }
      .single_message .content .this_month br {
        display: none; }
      .single_message .content .this_month:before, .single_message .content .this_month:after {
        position: absolute;
        content: "";
        aspect-ratio: 51/45;
        width: 100%;
        max-width: 51px;
        height: auto; }
      .single_message .content .this_month:after {
        top: -30px;
        left: 0;
        background: url("../image/index/message01.svg") center center no-repeat;
        background-size: contain; }
      .single_message .content .this_month:before {
        top: auto;
        bottom: -30px;
        left: auto;
        right: 0;
        background: url("../image/index/message02.svg") center center no-repeat;
        background-size: contain; }
    .single_message .content img {
      max-width: 100%;
      height: auto;
      margin-bottom: 30px;
      line-height: 0; }
    .single_message .content h1 {
      font: 140%/1.8em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      font-weight: 700;
      margin: 0 0 10px; }
    .single_message .content h2 {
      font: 130%/1.8em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      font-weight: 700;
      margin: 0 0 10px; }
    .single_message .content h3 {
      font: 120%/2em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      font-weight: 700;
      margin: 0 0 10px; }
    .single_message .content h4 {
      font: 110%/2em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      font-weight: 700;
      margin: 0 0 10px; }
    .single_message .content h5 {
      font: 100%/2em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      font-weight: 700;
      margin: 0 0 10px; }
    .single_message .content dl {
      margin-bottom: 30px; }
    .single_message .content dt {
      font-weight: 600; }
    .single_message .content dd {
      padding: 0 0 0 1.8rem;
      margin: 0 0 10px; }
    .single_message .content table {
      margin-bottom: 30px; }
    .single_message .content td, .single_message .content th {
      padding: 5px 10px;
      border: 1px solid #ccc; }
    .single_message .content ul {
      margin-bottom: 30px; }
      .single_message .content ul li {
        padding: 0 0 0 1.8rem;
        position: relative;
        margin: 0 0 10px; }
        .single_message .content ul li:before {
          position: absolute;
          content: "・";
          left: 0; }
        .single_message .content ul li:last-of-type {
          margin: 0; }
    .single_message .content ol {
      counter-reset: hoge;
      margin-bottom: 30px; }
      .single_message .content ol li {
        padding: 0 0 0 2.0rem;
        position: relative;
        margin: 0 0 10px; }
        .single_message .content ol li:before {
          position: absolute;
          counter-increment: hoge;
          content: counter(hoge) ". ";
          left: 0; }
        .single_message .content ol li:nth-of-type(n+10) {
          padding: 0 0 0 3rem; }
        .single_message .content ol li:last-of-type {
          margin: 0; }
    .single_message .content p {
      margin-bottom: 30px; }
      .single_message .content p.info {
        font: 2rem/2em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
        font-weight: 700;
        margin: 0 auto 30px; }

/*max-width:1280px*/
@media (max-width: 1024px) {
  .single_message {
    width: calc(100% - 80px); }
    .single_message .content {
      border: 1px solid #009B63;
      background-color: #FFFEF7;
      padding: 100px 40px 60px;
      font: 1.7rem/2em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      font-weight: 400;
      margin: 0 auto 100px;
      width: 100%;
      border-radius: 20px; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .single_message {
    width: calc(100% - 60px); }
    .single_message .content {
      border: 1px solid #009B63;
      background-color: #FFFEF7;
      padding: 80px 40px 60px;
      font: 1.6rem/2em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      font-weight: 400;
      margin: 0 auto 100px;
      width: 100%;
      border-radius: 20px; }
      .single_message .content .this_month {
        font: 2.8rem/1em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
        font-weight: 700;
        padding: 30px 0;
        margin: 0 auto 80px; }
        .single_message .content .this_month:before, .single_message .content .this_month:after {
          max-width: 45px; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .single_message {
    width: calc(100% - 20px);
    padding: 0 0 111px; }
    .single_message .content {
      padding: 80px 20px 60px;
      font: 1.6rem/2em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      font-weight: 400;
      margin: 0 auto 80px; }
      .single_message .content .this_month {
        font: 2.5rem/1em "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
        font-weight: 700;
        padding: 20px 0;
        margin: 0 auto 80px; }
        .single_message .content .this_month:before, .single_message .content .this_month:after {
          max-width: 45px; } }
/*max-width:480px*/
/************************************************/
.btn {
  margin: 0 auto 0;
  display: block;
  width: 313px;
  height: 70px;
  background-color: #009B63;
  border-radius: 50px;
  text-decoration: none;
  color: #fff;
  text-align: center;
  font: 1.6rem/68px "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-weight: 400;
  letter-spacing: 0.05em;
  transition: .3s; }

@media (hover: hover) {
  .btn:hover {
    background-color: darkorange; } }
@media (max-width: 480px) {
  .btn {
    margin: 0 auto 0;
    display: block;
    max-width: 300px;
    width: 100%;
    height: 60px;
    font: 1.6rem/58px "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: 400; } }
/*max-width:480px*/
