@charset "utf-8";

/*=========================================*/
/* 共通パーツ */
/*=========================================*/
._inner {
  max-width: 1260px;
  width: 90%;
  margin: 0 auto;
  box-sizing: border-box;
}

.sec_ttl {
  display: flex;
  align-items: center;
  font-family: "Inter", sans-serif;
  font-size: 64px;
  font-weight: 700;

  & ._ja {
    display: inline-block;
    padding-left: 25px;
    font-size: 20px;
    font-weight: 500;
  }

  @media screen and (max-width:768px) {
    font-size: 36px;

    & ._ja {
      padding-left: 8px;
      font-size: 14px;
    }
  }
}

.c-btn {
  display: block;
  max-width: 340px;
  width: 80%;
  padding: 30px 3.5em 30px 2.5em;
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 70px;
  background-color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;

  &:before {
    content: "";
    position: absolute;
    width: 17px;
    height: 1px;
    background-color: #000;
    position: absolute;
    top: 50%;
    right: 2em;
    transition: all 0.3s ease;
  }

  &:after {
    content: "";
    position: absolute;
    width: 8px;
    height: 1px;
    background-color: #000;
    position: absolute;
    top: 46%;
    right: 2em;
    transform: rotate(45deg);
    transition: all 0.3s ease;
  }

  @media (hover:hover) {
    &:hover {
      background-color: #03B2A7;
      color: #fff;

      &:before,
      &:after {
        background-color: #fff;
      }
    }
  }

  @media screen and (max-width:768px) {
    padding: 20px 3.5em 20px 2.5em;
    font-size: 15px;
  }
}

& .swiper-pagination {
  display: flex;
  gap: 10px;
  position: static;
}

& .swiper-pagination-bullet {
  background-color: #000;
  border: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: .3;
}

& .swiper-pagination-bullet-active {
  opacity: 1;
}

& .option_buttom {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(2, 48px);
  gap: 0 16px;
}

& .swiper-button-prev,
& .swiper-button-next {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0;
  position: static;
  cursor: pointer;
}

& .swiper-button-prev {
  background: url('../img/common/2026/arrow_circle_l.svg') no-repeat center/contain;
  transform: scale(-1, 1);
}

& .swiper-button-next {
  background: url('../img/common/2026/arrow_circle_l.svg') no-repeat center/contain;
}



/*----------------------------------------------------
	ichatch
----------------------------------------------------*/
#top_icatch {
  height: auto;
  padding-top: 120px;
  padding-bottom: 0;
  background: none;
  position: relative;
  margin: 0 auto 70px;

  @media screen and (max-width:768px) {
    padding-top: 80px;
  }
}

/* #top_icatch::before {
  content: "";
  width: 100%;
  height: 100px;
  background: url("../img/home/bg_slider.png") repeat;
  display: block;
  position: absolute;
  top: 0;
} */

.swiper-slide {
  cursor: pointer;
}

.swiper-slide img {
  width: 100%;
}


/*----------------------------------------------------
	#headline
----------------------------------------------------*/
#headline {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 184px 1fr;

  margin-bottom: 120px;

  border: 2px solid #03B2A7;
  border-radius: 20px;
  overflow-y: hidden;

  & .headline_ttl {
    display: flex;
    align-items: center;
    height: 100%;
    padding: .8em;
    box-sizing: border-box;
    background-color: #03B2A7;
    color: #fff;

    font-family: "Inter", sans-serif;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }

  & .headline_list {
    padding: 0 5%;
  }

  & .headline_list_li:not(:last-child) {
    border-bottom: 1px solid #03B2A7;
  }

  & .headline_list_item {
    display: block;
    padding: 30px 0;
    font-size: 18px;
    transition: all .3s ease;
  }

  & .headline_list_time {
    display: inline-block;
    padding-right: 1em;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 700;
  }

  @media (hover:hover) {
    & .headline_list_item:hover {
      color: #03B2A7;

      & .headline_list_time {
        color: #03B2A7;
      }
    }
  }

  @media screen and (max-width:768px) {
    grid-template-columns: 100%;
    margin-bottom: 80px;

    & .headline_ttl {
      display: block;
      padding: 0.5em .8em;
      text-align: center;
    }

    & .headline_list_item {
      padding: 15px 0;
    }

    & .headline_list_time {
      display: block;
      padding: 0 0 8px 0;
    }
  }
}

@media screen and (max-width: 479px) {
  #top_icatch {
    padding-bottom: 0;
    margin-bottom: 40px;
    margin-top: 0;
  }

  .sp-button {
    width: 10px;
    height: 10px;
  }

  .sp-buttons {
    bottom: -20px;
  }

  .sp-fade-arrows {
    display: none;
  }
}

@media screen and (min-width: 1230px) {
  /*
	#top_icatch{
		height:320px;
	}
*/

  .sp-arrows {
    position: relative;
  }

  .sp-horizontal .sp-arrows {
    margin: -15px auto 0 auto;
    width: 1230px;
    top: 0;
  }

  .sp-horizontal .sp-next-arrow {
    right: 0;
  }

  .sp-horizontal .sp-previous-arrow {
    left: 0;
  }
}



@keyframes news-5 {
  0% {
    top: 3.0rem;
    visibility: visible;
  }

  5% {
    top: 0;
  }

  15% {
    top: 0;
  }

  20% {
    top: -3.0rem;
  }

  35% {
    top: -3.0rem;
  }

  40% {
    top: -6.0rem;
  }

  55% {
    top: -6.0rem;
  }

  60% {
    top: -9.0rem;
  }

  75% {
    top: -9.0rem;
  }

  80% {
    top: -12.0rem;
  }

  95% {
    top: -12.0rem;
  }

  99% {
    top: -15.0rem;
    visibility: hidden;
  }

  100% {
    top: 3.0rem;
    visibility: hidden;
  }
}

@keyframes news-4 {
  0% {
    top: 3.0rem;
    visibility: visible;
  }

  5% {
    top: 0;
  }

  15% {
    top: 0;
  }

  20% {
    top: -3.0rem;
  }

  40% {
    top: -3.0rem;
  }

  45% {
    top: -6.0rem;
  }

  65% {
    top: -6.0rem;
  }

  70% {
    top: -9.0rem;
  }

  90% {
    top: -9.0rem;
  }

  95% {
    top: -12.0rem;
  }

  99% {
    top: -12.0rem;
    visibility: hidden;
  }

  100% {
    top: 3.0rem;
    visibility: hidden;
  }
}

@keyframes news-3 {
  0% {
    top: 3.0rem;
    visibility: visible;
  }

  5% {
    top: 0;
  }

  30% {
    top: 0;
  }

  35% {
    top: -3.0rem;
  }

  60% {
    top: -3.0rem;
  }

  65% {
    top: -6.0rem;
  }

  90% {
    top: -6.0rem;
  }

  95% {
    top: -9.0rem;
  }

  99% {
    top: -9.0rem;
    visibility: hidden;
  }

  100% {
    top: 3.0rem;
    visibility: hidden;
  }
}

@keyframes news-2 {
  0% {
    top: 3.0rem;
    visibility: visible;
  }

  5% {
    top: 0;
  }

  55% {
    top: 0;
  }

  60% {
    top: -3.0rem;
  }

  90% {
    top: -3.0rem;
  }

  95% {
    top: -6.0rem;
  }

  99% {
    top: -6.0rem;
    visibility: hidden;
  }

  100% {
    top: 3.0rem;
    visibility: hidden;
  }
}

@keyframes news-5-sp {
  0% {
    top: 4rem;
    visibility: visible;
  }

  5% {
    top: 0;
  }

  15% {
    top: 0;
  }

  20% {
    top: -4rem;
  }

  35% {
    top: -4rem;
  }

  40% {
    top: -8rem;
  }

  55% {
    top: -8rem;
  }

  60% {
    top: -12rem;
  }

  75% {
    top: -12rem;
  }

  80% {
    top: -16rem;
  }

  95% {
    top: -16rem;
  }

  99% {
    top: -20rem;
    visibility: hidden;
  }

  100% {
    top: 4rem;
    visibility: hidden;
  }
}

@keyframes news-4-sp {
  0% {
    top: 4.0rem;
    visibility: visible;
  }

  5% {
    top: 0;
  }

  15% {
    top: 0;
  }

  20% {
    top: -4.0rem;
  }

  40% {
    top: -4.0rem;
  }

  45% {
    top: -8.0rem;
  }

  65% {
    top: -8.0rem;
  }

  70% {
    top: -12.0rem;
  }

  90% {
    top: -12.0rem;
  }

  95% {
    top: -15.0rem;
  }

  99% {
    top: -15.0rem;
    visibility: hidden;
  }

  100% {
    top: 4.0rem;
    visibility: hidden;
  }
}

@keyframes news-3-sp {
  0% {
    top: 4.0rem;
    visibility: visible;
  }

  5% {
    top: 0;
  }

  30% {
    top: 0;
  }

  35% {
    top: -4.0rem;
  }

  60% {
    top: -4.0rem;
  }

  65% {
    top: -8.0rem;
  }

  90% {
    top: -8.0rem;
  }

  95% {
    top: -12.0rem;
  }

  99% {
    top: -12.0rem;
    visibility: hidden;
  }

  100% {
    top: 4.0rem;
    visibility: hidden;
  }
}

@keyframes news-2-sp {
  0% {
    top: 4.0rem;
    visibility: visible;
  }

  5% {
    top: 0;
  }

  55% {
    top: 0;
  }

  60% {
    top: -4.0rem;
  }

  90% {
    top: -4.0rem;
  }

  95% {
    top: -8.0rem;
  }

  99% {
    top: -8.0rem;
    visibility: hidden;
  }

  100% {
    top: 4.0rem;
    visibility: hidden;
  }
}


/*----------------------------------------------------
	#topics
----------------------------------------------------*/

#topics {
  width: 100%;
  padding: 100px 0;
  background-color: #B2EBEB;
  border-radius: 150px 0 0 150px;
  box-sizing: border-box;

  & .inner {
    width: 90%;
    max-width: 1260px;
    margin: auto;
  }

  & .topics_headbox {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(2, auto);
    justify-content: space-between;
    align-items: center;
  }

  & .tab-button-outer {
    align-self: center;
    position: relative;
    cursor: pointer;

    & .menu-btn {
      display: block;
      width: 100%;
      padding: 13px 2.5em 13px 1.5em;
      margin: 0 auto;
      background-color: #fff;
      color: #333;
      border: solid 1px #000000;
      font-size: 16px;
      font-weight: 500;
      line-height: 1;
      text-align: center;
      position: relative;
      box-sizing: border-box;
    }

    & .menu-btn::after {
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 8px 5px 0 5px;
      border-color: #000000 transparent transparent transparent;
      position: absolute;
      right: 10px;
      top: calc(50% - 4px);
    }
  }

  & #tab-button {
    display: flex;
    display: none;
    width: 100%;
    flex-direction: column;
    margin-bottom: 50px;
    position: absolute;
    z-index: 10;

    & .tab {
      display: block;
      width: 100%;
      padding: 15px 0;
      box-sizing: border-box;
      background-color: #ffffff;
      border: solid 1px #000000;
      font-size: 123.1%;
      text-align: center;
      line-height: 1;
      transition: all 0.3s ease;
    }

    & .tab.is-active {
      background: #03B2A7;
      border: 1px solid #000;
      color: #ffffff;
    }

    @media (hover:hover) {
      & .tab:hover {
        background: #03B2A7;
        border: 1px solid #000;
        color: #ffffff;
      }
    }
  }

  & .container {
    padding-top: 50px;
  }

  & .tab-contents {
    visibility: hidden;
    height: 0;
    position: relative;
  }

  & .tab-contents.is-show {
    visibility: visible;
    height: auto;
    position: relative;
    animation: show 0.5s linear 0s;
  }

  & .swiper-container .topics_list {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;

    & .topics_list_item {
      display: flex;
      height: auto;
      background-color: #ffffff;
      box-sizing: border-box;
      border-radius: 20px;
      overflow: hidden;
      transition: all 0.3s ease;

      @media (hover:hover) {
        &:hover {
          opacity: 0.7;
        }

        &:has(.topics_list_item_txtbox_meta_cate:hover) {
          opacity: 1;
        }
      }
    }

    & .topics_list_item_img {
      display: block;
      width: 47%;
      height: 100%;
      aspect-ratio: 1/1;
      overflow: hidden;
      position: relative;

      & img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }

    & .topics_list_item_txtbox {
      width: 53%;

      display: grid;
      grid-template-rows: auto 1fr;
      grid-template-columns: 100%;
      padding: 20px;
      box-sizing: border-box;
    }

    & .topics_list_item_txtbox_meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px;
    }

    & .topics_list_item_txtbox_meta_cate {
      background-color: #03B2A7;
      border-radius: 40px;
      font-size: 14px;
      font-weight: 700;
      transition: all 0.3s ease;

      @media (hover:hover) {
        &:hover {
          opacity: 0.7;
        }
      }

      &.cat-child_list {
        background-color: #ED95B6;
      }

      &.cat-career_list {
        background-color: #2DCCE1;
      }

      &.cat-food_list {
        background-color: #68D937;
      }

      a {
        display: block;
        padding: .5em 1em .3em;
        color: #fff;
      }
    }

    & .topics_list_item_txtbox_meta_time {
      font-family: inter, sans-serif;
      font-size: 14px;
      font-weight: 700;
    }

    & .topics_list_item_txtbox_post {
      display: grid;
      grid-template-rows: auto auto 1fr;
      grid-template-columns: 100%;
      gap: 14px;
      padding-top: 20px;
    }

    & .topics_list_item_txtbox_post_ttl {
      font-size: 24px;
      font-weight: 700;
      line-height: 1.5;
    }

    & .topics_list_item_txtbox_post_txt {
      font-size: 16px;
    }

    & .topics_list_item_txtbox_more {
      align-self: end;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 0 .5em;

      font-size: 16px;

      & ._icon {
        display: inline-block;
        width: 22px;
        height: 22px;
        margin-bottom: .2em;
        background: url('../img/common/2026/arrow_circle.svg') no-repeat center/contain;
      }
    }
  }

  & .swiper-pagination {
    display: none;
  }

  & .c-btn {
    margin-top: 70px;
  }

  @media screen and (max-width:768px) {
    padding: 45px 5%;
    border-radius: 60px 0 0 60px;

    & .topics_headbox {
      grid-template-columns: 100%;
      gap: 20px 0;
    }

    & .tab-button-outer {
      width: 100%;
      max-width: 350px;
      margin: 0 auto;
    }

    & .container {
      padding-top: 35px;
    }

    & .swiper-container .topics_list {
      & .topics_list_item {
        display: block;
      }

      & .topics_list_item_img {
        width: 100%;
        height: auto;
        aspect-ratio: 2/1;
      }

      & .topics_list_item_txtbox {
        width: 100%;
        padding: 15px;
      }

      & .topics_list_item_txtbox_post {
        padding-top: 12px;
      }

      & .topics_list_item_txtbox_post_ttl {
        font-size: 20px;
      }

      & .topics_list_item_txtbox_post_txt {
        font-size: 14px;
      }
    }

    & .swiper-pagination {
      display: flex;
      justify-content: center;
      padding-top: 30px;
    }

    & .c-btn {
      margin-top: 40px;
    }
  }
}

@keyframes show {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.swiper-button-prev {
  z-index: 10;

  @media screen and (min-width:769px) {
    display: none;
  }
}

.swiper-button-next {
  z-index: 10;

  @media screen and (min-width:769px) {
    display: none;
  }
}

@media all and (max-width: 960px) {
  .swiper-button-prev {
    left: -35px;
  }

  .swiper-button-next {
    right: -35px;
  }
}

@media all and (max-width: 768px) {

  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }

  .tab-select-outer select {
    display: block;
    width: 100%;
  }

  #topics .inner .tab-button-outer p.active::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 8px 5px;
    border-color: transparent transparent #000000 transparent;
    position: absolute;
    right: 10px;
    top: calc(50% - 4px);
  }

  #topics .inner .container .tab-contents .swiper-container>ul {
    display: flex;
    gap: 0;
  }
}


/*----------------------------------------------------
	#picup
----------------------------------------------------*/
#pikup {
  padding: 100px 0;
  margin-top: 120px;
  position: relative;

  &:before {
    content: "";
    width: 80%;
    height: 100%;
    border-radius: 0 150px 150px 0;
    background-color: #D0E877;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  @media screen and (max-width:768px) {
    padding: 45px 0;
    margin-top: 80px;

    &:before {
      width: 100%;
      border-radius: 0 60px 60px 0;
    }

    & ._inner {
      width: 80%;
    }
  }
}

.pikup_banner {
  max-width: calc((100% - 1260px)/ 2 + 1260px);
  width: 95%;
  margin: 0 0 0 auto;
  padding-top: 54px;

  @media screen and (max-width:1440px) {
    max-width: calc(1440px - 90px);
  }

  & .swiper-container {
    position: relative;
  }

  & .pikup_option {
    width: 90%;
    max-width: 1260px;
    padding-top: 50px;
    margin: 0 auto 0 0;

    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(2, auto);
    justify-content: space-between;
    align-items: center;
  }

  & .swiper-button-prev,
  & .swiper-button-next {
    display: block;
  }

  @media screen and (max-width:768px) {
    padding-top: 35px;
    width: 90%;

    & .pikup_option {
      justify-content: center;
      padding-top: 30px;
    }

    & .option_buttom {
      display: none;
    }

    & .swiper-pagination {
      width: 90%;
      margin: 0 auto;
    }
  }
}


/*----------------------------------------------------
	#movie
----------------------------------------------------*/
#movie {
  padding: 120px 0 0;

  & .movie_slider {
    max-width: 1440px;
    width: 100%;
    padding-top: 35px;
    margin: 0 auto;

    & .swiper-container {}

    & .swiper-slide {
      border-radius: 20px;
      overflow: hidden;
      aspect-ratio: 9/16;
      transform: scale(.85);
      transition: 1.5s all 0.3s ease;

      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    & .swiper-slide-active {
      transform: scale(1);
    }
  }

  & .movie_option {
    padding-top: 50px;
  }

  & .swiper-pagination {
    justify-content: center;
  }

  & .option_buttom {
    display: none;
  }

  @media screen and (max-width:768px) {
    padding: 80px 0 0;

    & ._inner {
      width: 80%;
    }

    & .movie_slider {
      & .swiper-slide {
        transform: scale(1);
      }
    }

    & .movie_option {
      padding-top: 30px;
    }
  }
}


/*----------------------------------------------------
	#department
----------------------------------------------------*/
#department {
  margin-top: 120px;
  padding-top: 120px;
  border-radius: 150px 150px 0 0;
  background-color: #F4F2E6;

  & .sec_ttl {
    display: block;
    font-family: "メイリオ",
      Meiryo,
      "Hiragino Kaku Gothic Pro",
      "ヒラギノ角ゴ Pro W3",
      "ＭＳ Ｐゴシック",
      "Lucida Grande",
      "Lucida Sans Unicode",
      Arial,
      Verdana,
      sans-serif;
    font-size: 48px;
    text-align: center;
  }

  & .sec_txt {
    padding-top: 30px;
    font-size: 18px;
    text-align: center;
  }

  & .department_list {
    display: flex;
    justify-content: space-between;

    padding-top: 50px;
  }

  & .department_list_item {
    width: 30%;
    border-radius: 60px;
    overflow: hidden;
  }

  & .department_list_item_a {
    display: grid;
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr auto;
    gap: 1em;

    width: 100%;
    aspect-ratio: 370 / 548;
    padding: 30px;
    box-sizing: border-box;

    position: relative;
    z-index: 1;
    transition: all 0.3s ease;

    @media (hover:hover) {
      &:hover {
        opacity: 0.7;
      }

    }

    & .department_list_item_fig {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: -1;

      &:before {
        content: "";
        width: 100%;
        height: 100%;
        opacity: .45;
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    & .department_list_item_img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &._carrier .department_list_item_fig:before {
      background-color: #2DCCE1;
    }

    &._food .department_list_item_fig:before {
      background-color: #68D937;
    }

    &._child .department_list_item_fig:before {
      background-color: #ED95B6;
    }

    & .department_list_item_catch {
      color: #fff;
      font-size: 24px;
      font-weight: 700;
      line-height: 1.5;
    }

    & .department_list_item_ttl {
      color: #fff;
      font-size: 40px;
      font-weight: 700;
      writing-mode: vertical-rl;
    }

    & .more {
      grid-column: 1/3;
      justify-self: end;

      display: block;
      width: 48px;
    }
  }

  @media screen and (max-width:768px) {
    padding-top: 80px;
    margin-top: 80px;
    border-radius: 60px 60px 0 0;

    & .sec_ttl {
      font-size: 32px;
    }

    & .sec_txt {
      font-size: 14px;
    }

    & .department_list {
      flex-wrap: wrap;
      gap: 40px 0;
      padding-top: 30px;
      border-radius: 40px;
    }

    & .department_list_item {
      width: 100%;
    }

    & .department_list_item_a {
      & .department_list_item_catch {
        font-size: 20px;
      }

      & .department_list_item_ttl {
        font-size: 32px;
      }
    }
  }

}


/*----------------------------------------------------
	#message
----------------------------------------------------*/
#message {
  padding: 120px 0 0;
  background-color: #F4F2E6;

  & .content_box {
    padding: 0 50px 30px;
    border: 4px solid #03B2A7;
    border-radius: 80px;
    background-color: #fff;
  }

  & .sec_ttl {
    display: block;
    max-width: 830px;
    width: 90%;
    margin: -50px auto 0;
  }

  & .message_slider {
    padding-top: 20px;
  }

  & .message_list {
    padding: 5px 0;
  }

  & .message_list_item {
    height: auto;
  }

  & .message_list_item_a {
    display: flex;
    align-items: stretch;

    height: 100%;
    border-radius: 15px;
    border: 2px solid #ED95B6;
    overflow: hidden;
    transition: all .3s ease;

    & .message_list_item_img {
      width: 31%;
      margin: 0;

      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    @media (hover:hover) {
      opacity: 0.7;
    }

    & .message_list_item_txtbox {
      width: 69%;
      padding: 30px 25px 25px;
      box-sizing: border-box;

      display: grid;
      grid-template-rows: auto auto 1fr;
      grid-template-columns: 100%;
      gap: 14px;
    }

    & .message_list_item_ttl {
      color: #ED95B6;
      font-size: 24px;
      font-weight: 700;
      line-height: 1.5;
    }

    & .message_list_item_cate {
      display: inline-block;
      width: fit-content;
      padding: .2em 1em .3em;
      border: 1px solid #ED95B6;
      border-radius: 40px;
      color: #ED95B6;
      font-size: 14px;
      font-weight: 700;
    }

    & .message_list_item_more {
      align-self: end;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 0 .5em;

      font-size: 16px;

      & ._icon {
        display: inline-block;
        width: 22px;
        height: 22px;
        margin-bottom: .2em;
        background: url('../img/common/2026/arrow_circle.svg') no-repeat center/contain;
      }
    }
  }

  & .message_list_item_a:has(.cat-career_list) {
    border: 2px solid #2DCCE1;

    & .message_list_item_ttl {
      color: #2DCCE1;
    }

    & .message_list_item_cate {
      border: 1px solid #2DCCE1;
      color: #2DCCE1;
    }
  }

  & .message_list_item_a:has(.cat-food_list) {
    border: 2px solid #68D937;

    & .message_list_item_ttl {
      color: #68D937;
    }

    & .message_list_item_cate {
      border: 1px solid #68D937;
      color: #68D937;
    }
  }

  & .message_option {
    width: 100%;
    padding-top: 50px;
    margin: 0 auto 0 0;

    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(2, auto);
    justify-content: space-between;
    align-items: center;
  }

  & .swiper-button-prev,
  & .swiper-button-next {
    display: block;
  }

  & .c-btn {
    margin-bottom: -70px;
    border: 2px solid #03B2A7;
    background-color: #03B2A7;
    color: #fff;

    &:before,
    &:after {
      background-color: #fff;
    }

    @media (hover:hover) {
      &:hover {
        background-color: #fff;
        color: #03B2A7;

        &:before,
        &:after {
          background-color: #03B2A7;
        }
      }

    }
  }

  @media screen and (max-width:768px) {
    padding: 94px 0 0;

    & .content_box {
      padding: 120px 5% 30px;
      border-radius: 40px;
      position: relative;
    }

    & .sec_ttl {
      max-width: 360px;
      width: 100%;
      margin: -10px auto 0;
      position: absolute;
      top: 0%;
      left: 50%;
      transform: translateX(-50%);
    }

    & .message_slider {
      padding-top: 30px;
    }

    & .message_list_item_a {
      display: block;

      & .message_list_item_img {
        width: 100%;

      }

      & .message_list_item_txtbox {
        width: 100%;
        padding: 20px 13px 15px;
      }

      & .message_list_item_ttl {
        font-size: 20px;
      }

      & .message_list_item_cate {
        font-size: 13px;
      }

      & .message_list_item_more {
        font-size: 14px;
      }

    }

    & .message_option {
      grid-template-columns: 100%;
      justify-content: center;
      padding: 30px 0;
    }

    & .swiper-pagination {
      justify-content: center;
    }

    & .option_buttom {
      display: none;
    }

    & .c-btn {
      margin-bottom: -60px;
    }
  }
}


/*----------------------------------------------------
	#mirai_navi
----------------------------------------------------*/
#mirai_navi {
  padding: 140px 0 120px;
  background-color: #F4F2E6;

  & .mirai_navi_a {
    display: block;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 15px 15px 0px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    position: relative;

    @media (hover:hover) {
      &:hover {
        opacity: 0.7;
      }
    }
  }

  & .mirai_navi_a_arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 90px;
    border-radius: 30px 0 0 0;
    background-color: #03B2A7;
    position: absolute;
    bottom: 0;
    right: 0;

    img {
      display: block;
      width: 80px;
      position: relative;
      z-index: 2;
    }

    &:before {
      content: "";
      width: 50px;
      height: 50px;
      background-color: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  @media screen and (max-width:768px) {
    padding: 110px 0 100px;

    & .mirai_navi_a_arrow {
      width: 60px;
      height: 60px;

      img {
        width: 50px;
      }

      &:before {
        width: 30px;
        height: 30px;
      }
    }
  }
}


/*----------------------------------------------------
	#sns
----------------------------------------------------*/
#sns {
  padding: 120px 0;
  border-radius: 150px 150px 0 0;
  background-color: #03B2A7;
  position: relative;

  &:before {
    content: "";
    width: 100%;
    height: 50%;
    background-color: #F4F2E6;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-150px);
    z-index: -1;
  }

  & .sec_ttl {
    display: block;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 48px;
    text-align: center;
  }

  & .sec_txt {
    color: #fff;
    padding-top: 30px;
    font-size: 18px;
    text-align: center;
  }

  & .sns_list {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 40px 4%;
    padding-top: 50px;
  }

  & .sns_list_item {
    width: 48%;
    border-radius: 30px;
    background-color: #fff;
    overflow: hidden;

    & .sns_list_item_a {
      display: grid;
      grid-template-rows: auto 1fr;
      grid-template-columns: 100%;
      height: 100%;
      transition: all 0.3s ease;

      @media (hover:hover) {
        &:hover {
          opacity: 0.7;
        }
      }
    }
  }

  & .sns_list_item_ttl {
    width: fit-content;
    padding: .8em 1.8em .5em;
    border-radius: 0 0 30px 0;
    background-color: #000;
    box-sizing: border-box;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
  }

  & .sns_list_item_main {
    padding: 30px 40px;

    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto 1fr auto;
    gap: 30px;

    & .sns_list_item_main_img {
      width: 75px;
      margin: 0;

      &._youtube {
        width: 90px;
      }

      &._line {
        width: 75px;

        img {
          width: 100%;
        }
      }
    }

    & .sns_list_item_main_txt {
      align-self: center;
      font-size: 17px;
      font-weight: 700;

      & span {
        display: block;
        font-weight: 500;
      }
    }

    & .sns_list_item_main_icon {
      align-self: end;
      display: block;
      width: 40px;
      margin: 0 -20px -10px 0;
    }
  }

  @media screen and (max-width:768px) {
    padding: 60px 0;
    border-radius: 60px 60px 0 0;

    & .sec_ttl {
      font-size: 34px;
    }

    & .sec_txt {
      padding-top: 14px;
      font-size: 14px;
    }

    & .sns_list {
      gap: 25px 0;
      padding-top: 25px;
    }

    & .sns_list_item {
      width: 100%;
      border-radius: 20px;
    }

    & .sns_list_item_ttl {
      width: 100%;
      border-radius: 0 0 0px 0;
      font-size: 17px;
    }

    & .sns_list_item_main {
      gap: 12px;
      padding: 20px;

      & .sns_list_item_main_img {
        width: 50px;

        &._youtube {
          width: 60px;
        }

        &._line {
          width: 55px;
        }
      }

      & .sns_list_item_main_txt {
        font-size: 13px;
      }

      & .sns_list_item_main_icon {
        width: 25px;
        margin: 0 -10px -8px 0;
      }
    }
  }
}



/*----------------------------------------------------
	#f_banner
----------------------------------------------------*/
#f_banner {
  padding: 100px 0 0;
  background-color: #fff;

  & .f_banner_list {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  @media all and (max-width: 767px) {
    padding: 100px 0 0;

    & ._inner {
      width: 80%;
    }

    & .f_banner_list {
      grid-template-columns: 100%;
    }
  }
}



@media all and (max-width: 459px) {

  #f_banner .inner .swiper-wrapper div,
  #f_banner .inner .swiper-wrapper div:nth-of-type(2n) {
    width: 80%;
    margin: 0 auto 20px;
  }
}