@charset "UTF-8";
@font-face {
  font-family: 'matissem';
  font-display: swap;
  src: url("/common/font/matisse-m.woff") format("woff"), url("/common/font/matisse-m.otf") format("truetype"); }

@font-face {
  font-family: 'rodinb';
  font-display: swap;
  src: url("/common/font/rodin-b.woff") format("woff"), url("/common/font/rodin-b.otf") format("truetype"); }

/*--------------------------------------------------- */
/* mainimg */
/*--------------------------------------------------- */
.mainimg {
  height: 704px;
  position: relative; }
  .mainimg .bgimg img {
    width: 100%;
    height: 704px;
    -o-object-fit: cover;
    object-fit: cover; }
  .mainimg .headingWrap {
    position: absolute;
    top: 320px;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 1000px;
    z-index: 2;
    display: flex; }
    .mainimg .headingWrap .heading {
      margin-left: auto; }
    .mainimg .headingWrap .catch {
      font-size: 54px;
      font-size: 5.4rem;
      font-family: "matissem", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
      font-display: swap;
      font-weight: 500;
      background-color: rgba(124, 184, 21, 0.69);
      display: inline-block;
      line-height: 1em;
      color: #fff;
      padding: 12px;
      letter-spacing: -2.7px; }
      .mainimg .headingWrap .catch:nth-of-type(1) {
        margin-bottom: 16px;
        /* style */ }

@media (max-width: 768px) {
  .mainimg {
    height: 500px; }
    .mainimg .bgimg img {
      height: 500px; }
    .mainimg .headingWrap {
      top: 245px; }
      .mainimg .headingWrap .catch {
        font-size: 32px;
        font-size: 3.2rem; }
        .mainimg .headingWrap .catch:nth-of-type(1) {
          margin-bottom: 0.3em;
          /* style */ } }

@media (max-width: 480px) {
  .mainimg {
    height: 300px; }
    .mainimg .bgimg img {
      height: 300px; }
    .mainimg .headingWrap {
      top: 150px; }
      .mainimg .headingWrap .catch {
        font-size: 22px;
        font-size: 2.2rem;
        padding: 8px; } }

/*--------------------------------------------------- */
/* description */
/*--------------------------------------------------- */
.description {
  margin-top: 75px;
  margin-bottom: 80px; }
  .description .wrap {
    text-align: center; }
  .description p {
    text-align: left;
    max-width: 678px;
    margin: auto;
    display: inline-block;
    font-size: 19px;
    font-size: 1.9rem;
    line-height: 1.5em; }

@media (max-width: 480px) {
  .description {
    margin-top: 60px; }
    .description .wrap {
      text-align: center; }
    .description p {
      text-align: left;
      max-width: 678px;
      margin: auto;
      display: inline-block;
      font-size: 15px;
      font-size: 1.5rem;
      line-height: 1.5em; }
      .description p br:nth-of-type(3), .description p br:nth-of-type(1) {
        display: none;
        /* style */ } }

/*--------------------------------------------------- */
/* reason */
/*--------------------------------------------------- */
.reason {
  position: relative;
  z-index: 1;
  padding: 40px 0 80px; }
  .reason .bgimg img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: -1;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; }
  .reason .heading {
    text-align: center; }
    .reason .heading h2 {
      font-size: 42px;
      font-size: 4.2rem;
      color: #fff;
      font-weight: 700; }
      @media (min-width: 769px) {
        .reason .heading h2 {
          font-family: "rodinb", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
          font-display: swap; } }
  .reason .flex {
    display: flex;
    justify-content: space-between;
    margin-top: 53px; }
    .reason .flex .flex3 {
      width: calc(33.33% - 30px); }
      .reason .flex .flex3 .inner {
        background-color: #fff;
        border-radius: 10px;
        padding: 24px 0 50px;
        /* box-shadow */
        box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.6); }
        .reason .flex .flex3 .inner .img {
          height: 180px;
          display: flex;
          align-items: center;
          justify-content: center; }
        .reason .flex .flex3 .inner img {
          margin: auto;
          max-width: 100%; }

@media (max-width: 768px) {
  .reason .heading h2 {
    font-size: 32px;
    font-size: 3.2rem; } }
  @media (max-width: 768px) and (max-width: 480px) {
    .reason .heading h2 {
      font-size: 28px;
      font-size: 2.8rem; } }

@media (max-width: 768px) {
  .reason .flex {
    flex-wrap: wrap; }
    .reason .flex .flex3 {
      width: calc(100%);
      margin-bottom: 32px; }
      .reason .flex .flex3:nth-last-of-type(1) {
        margin-bottom: 0; }
      .reason .flex .flex3 .inner {
        max-width: 300px;
        margin: auto;
        padding: 24px 32px 50px; }
        .reason .flex .flex3 .inner .img {
          height: 180px;
          display: flex;
          align-items: center;
          justify-content: center; }
        .reason .flex .flex3 .inner img {
          margin: auto;
          max-width: 100%; } }

/*--------------------------------------------------- */
/* about */
/*--------------------------------------------------- */
.about {
  margin-top: 81px; }
  .about .flex {
    display: flex;
    justify-content: space-between; }
  .about .textFlex {
    width: calc(50% - 50px); }
    .about .textFlex h2 {
      font-size: 36px;
      font-size: 3.6rem;
      font-family: "matissem", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
      font-display: swap;
      font-weight: 500; }
      @media (max-width: 1000px) {
        .about .textFlex h2 br {
          display: none; } }
    .about .textFlex p {
      margin-top: 32px;
      font-size: 19px;
      font-size: 1.9rem;
      line-height: 1.5em; }
    .about .textFlex .btn {
      margin-top: 42px; }
      .about .textFlex .btn a, .about .textFlex .btn a:visited {
        position: relative;
        color: #fff;
        background-color: #a3b815;
        border: 1px solid #a3b815;
        padding: 20px 26px;
        line-height: 1em;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        font-size: 20px;
        font-size: 2rem; }
        @media (min-width: 769px) {
          .about .textFlex .btn a:hover, .about .textFlex .btn a:visited:hover {
            background-color: #fff;
            color: #a3b815;
            border: 1px solid #a3b815;
            transition-duration: 0.5s; } }
        .about .textFlex .btn a .arrow, .about .textFlex .btn a:visited .arrow {
          position: relative;
          width: 30px;
          margin-left: 16px; }
          @media (max-width: 480px) {
            .about .textFlex .btn a .arrow, .about .textFlex .btn a:visited .arrow {
              margin-left: 6px; } }
          .about .textFlex .btn a .arrow:after, .about .textFlex .btn a:visited .arrow:after {
            content: "";
            border-bottom: 1px solid #fff;
            width: 30px;
            height: 1px;
            position: absolute;
            top: 3px;
            right: 0;
            bottom: 0;
            margin: auto;
            /* style */ }
          .about .textFlex .btn a .arrow:before, .about .textFlex .btn a:visited .arrow:before {
            content: "";
            border-bottom: 1px solid #fff;
            width: 10px;
            height: 1px;
            position: absolute;
            top: -3px;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            right: 0;
            bottom: 0;
            margin: auto;
            /* style */ }
        @media (min-width: 769px) {
          .about .textFlex .btn a:hover .arrow:before, .about .textFlex .btn a:hover .arrow:after, .about .textFlex .btn a:visited:hover .arrow:before, .about .textFlex .btn a:visited:hover .arrow:after {
            border-bottom: 1px solid #a3b815;
            transition-duration: 0.5s; } }
  .about .imgFlex {
    width: 50.1%; }
    .about .imgFlex img {
      width: 100%; }

@media (max-width: 768px) {
  .about {
    margin-top: 60px; }
    .about .flex {
      flex-wrap: wrap; }
    .about .textFlex {
      margin-top: 32px;
      width: calc(100%);
      order: 2; }
      .about .textFlex h2 {
        font-size: 28px;
        font-size: 2.8rem; }
        .about .textFlex h2 br {
          display: block; } }
      @media (max-width: 768px) and (max-width: 480px) {
        .about .textFlex h2 {
          font-size: 24px;
          font-size: 2.4rem; } }

@media (max-width: 768px) {
      .about .textFlex p {
        margin-top: 16px; }
      .about .textFlex .btn {
        margin-top: 16px; }
        .about .textFlex .btn a, .about .textFlex .btn a:visited {
          padding: 16px;
          font-size: 18px;
          font-size: 1.8rem; }
    .about .imgFlex {
      order: 1;
      width: 100%; }
      .about .imgFlex img {
        width: 100%; } }

/*--------------------------------------------------- */
/* link */
/*--------------------------------------------------- */
.link {
  margin-top: 77px;
  position: relative;
  z-index: 1;
  padding: 60px 0; }
  .link:before {
    content: "";
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url(img/link_bg.png);
    background-size: auto;
    vertical-align: middle;
    background-repeat: repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: -1;
    /* style */ }
  .link .flex {
    display: flex;
    justify-content: space-between; }
    .link .flex .flex2 {
      width: calc(50% - 30px); }
      .link .flex .flex2 img {
        border-radius: 7%; }
      .link .flex .flex2 .text_block {
        margin-top: 12px; }
        .link .flex .flex2 .text_block .text {
          position: relative;
          color: #000;
          background-color: #fff;
          border: 1px solid #fff;
          padding: 16px;
          line-height: 1em;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 30px;
          font-weight: 500;
          font-size: 22px;
          font-size: 2.2rem; }
          .link .flex .flex2 .text_block .text .arrow {
            position: relative;
            width: 30px;
            margin-left: 16px; }
            @media (max-width: 480px) {
              .link .flex .flex2 .text_block .text .arrow {
                margin-left: 6px; } }
            .link .flex .flex2 .text_block .text .arrow:after {
              content: "";
              border-bottom: 1px solid #000;
              width: 30px;
              height: 1px;
              position: absolute;
              top: 3px;
              right: 0;
              bottom: 0;
              margin: auto;
              /* style */ }
            .link .flex .flex2 .text_block .text .arrow:before {
              content: "";
              border-bottom: 1px solid #000;
              width: 10px;
              height: 1px;
              position: absolute;
              top: -3px;
              -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
              right: 0;
              bottom: 0;
              margin: auto;
              /* style */ }
          @media (min-width: 769px) {
            .link .flex .flex2 .text_block .text:hover .arrow:before, .link .flex .flex2 .text_block .text:hover .arrow:after {
              border-bottom: 1px solid #000;
              transition-duration: 0.5s; } }
      @media (min-width: 769px) {
        .link .flex .flex2 a:hover img {
          opacity: 0.5;
          transition-duration: 0.5s; }
        .link .flex .flex2 a:hover .text {
          opacity: 0.5;
          transition-duration: 0.5s; } }

@media (max-width: 768px) {
  .link .flex {
    flex-wrap: wrap; }
    .link .flex .flex2 {
      width: 100%; }
      .link .flex .flex2:nth-of-type(1) {
        margin-bottom: 32px;
        /* style */ }
      .link .flex .flex2 .img img {
        width: 100%; }
      .link .flex .flex2 .text_block {
        margin-top: 12px; }
        .link .flex .flex2 .text_block .text {
          padding: 16px;
          font-size: 16px;
          font-size: 1.6rem; } }