/*! Writen  by SCSS */
@media screen and (max-width: 480px) {
  .main_image_wrap .main_image img {
    aspect-ratio: 1600 / 610; } }

.sec_conent_lead {
  margin-bottom: clamp(60px, 8.34%, 100px); }
  .sec_conent_lead .main_image_wrap .main_lead_text {
    width: 12%;
    top: 9.84%;
    left: 0;
    right: 0;
    margin-inline: auto; }
    @media screen and (max-width: 480px) {
      .sec_conent_lead .main_image_wrap .main_lead_text {
        width: 16%; } }
  .sec_conent_lead .main_bg_text {
    width: 32.13%;
    left: 31.75%;
    top: 0;
    margin-top: 34.69%; }

.main_lead_wrap {
  align-items: center;
  max-width: 1280px; }
  @media screen and (max-width: 480px) {
    .main_lead_wrap {
      flex-direction: column;
      gap: 30px 0; } }
  .main_lead_wrap .inner_head {
    width: 44.93%; }
    @media screen and (max-width: 480px) {
      .main_lead_wrap .inner_head {
        width: 100%; } }
  .main_lead_wrap .main_lead_box {
    width: 53.13%; }
    @media screen and (max-width: 480px) {
      .main_lead_wrap .main_lead_box {
        width: 100%;
        text-align: center; } }

.read_ttl {
  font-size: clamp(15px, 1.45vw, 20px);
  line-height: 1.7; }
  @media screen and (max-width: 480px) {
    .read_ttl {
      line-height: 1.8; } }

.sec01 {
  margin-bottom: clamp(60px, 11.67%, 140px); }
  @media screen and (max-width: 480px) {
    .sec01 {
      margin-bottom: 30px; } }

.sec02 {
  margin-bottom: clamp(60px, 11.67%, 140px); }
  @media screen and (max-width: 480px) {
    .sec02 {
      margin-bottom: 30px; } }

.sec01 .items {
  width: 75%;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start; }
  @media screen and (max-width: 480px) {
    .sec01 .items {
      width: 90%;
      flex-direction: column;
      gap: 10px; } }
  .sec01 .items .image_box {
    width: 50%; }
    @media screen and (max-width: 480px) {
      .sec01 .items .image_box {
        width: 100%; } }
    .sec01 .items .image_box img {
      width: 100%; }

.sec02 {
  margin-bottom: clamp(50px, 6.67%, 80px); }
  .sec02 .sec02_illust {
    max-width: 999px;
    margin-inline: auto;
    margin-bottom: clamp(50px, 6.67%, 80px); }
  .sec02 .sec02_wrap {
    max-width: 1400px;
    align-items: flex-start; }
    @media screen and (max-width: 768px) {
      .sec02 .sec02_wrap {
        flex-direction: column;
        gap: 30px 0; } }
    .sec02 .sec02_wrap .sec02_inner {
      width: 47.86%;
      display: grid;
      align-items: start;
      align-content: start;
      grid-auto-flow: dense;
      justify-content: space-between;
      grid-template-columns: 59.71% 37.32%;
      gap: clamp(10px, 1.67vw, 20px) 0; }
      @media screen and (max-width: 768px) {
        .sec02 .sec02_wrap .sec02_inner {
          width: 100%;
          grid-template-columns: 52.24% 44.78%; } }
      .sec02 .sec02_wrap .sec02_inner .box_head {
        font-size: clamp(14px, 1.45vw, 18px);
        line-height: 1.4; }
        @media screen and (max-width: 480px) {
          .sec02 .sec02_wrap .sec02_inner .box_head {
            grid-column: span 2; } }
      .sec02 .sec02_wrap .sec02_inner .box_text {
        font-size: clamp(10px, 0.96vw, 12px);
        line-height: 1.5; }
      .sec02 .sec02_wrap .sec02_inner .image_box {
        grid-row: 1 / 3;
        grid-column: 2 / 3; }
        @media screen and (max-width: 480px) {
          .sec02 .sec02_wrap .sec02_inner .image_box {
            grid-row: 2 / 3; } }

.seclinks {
  margin: 100px auto 0;
  background: rgba(135, 109, 74, 0.5);
  padding: 55px 0; }
  @media screen and (max-width: 768px) {
    .seclinks {
      margin-top: 40px;
      padding: 30px 0; } }
  @media screen and (max-width: 480px) {
    .seclinks {
      padding: 15px 0; } }
  .seclinks ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 1080px;
    grid-gap: 14px;
    width: calc(100% - 40px);
    margin: 0 auto;
    color: #69c3be; }
    @media screen and (max-width: 768px) {
      .seclinks ul {
        grid-gap: 14px 0; } }
    .seclinks ul li {
      width: calc(32.33% - 7px); }
      @media screen and (max-width: 768px) {
        .seclinks ul li {
          width: 48%; } }
      .seclinks ul li a {
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 15px 10px; }
        @media screen and (max-width: 768px) {
          .seclinks ul li a {
            padding: 10px 0; } }
        .seclinks ul li a span {
          display: block;
          line-height: 1; }

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