@charset "utf-8";

/*----------------------------------------------
    BASE
----------------------------------------------*/

:root {
  --content-max-width: inherit;
  --content-width-base: 100%;
  --content-width-wide: 100%;
  --content-width-wider: 100%;
  --transition-base: none;
}

a[href^="tel:"] {
  cursor: pointer;
  pointer-events: auto;
}


/*----------------------------------------------
    COMMON (共通)
----------------------------------------------*/

.only-pc {
  display: none !important;
}

.only-pctb {
  display: none !important;
}

.only-tb {
  display: none !important;
}

.only-tbsp {
  display: block !important;
}

.only-sp {
  display: block !important;
}


/* BUTTON */

.c-btn-white {
  font-size: 16px;
  padding: 12px 30px 14px;
  width: 320px;
}

.c-btn-fill {
  font-size: 16px;
  padding: 12px 30px 14px;
  width: 320px;
}

.c-icon-circlearrow-r {
  height: 16px;
  right: 10px;
  width: 16px;
}

.c-icon-circlearrow-r::before {
  height: 8px;
  width: 8px;
}


/* ANIMATION */

@keyframes kf-balloon-a {
  40% {
    transform:translateY(-15px)
  }
}

@keyframes kf-balloon-b {
  40% {
    transform:translateY(10px)
  }
}


/* CONTENTS */

.c-section-inner {
  padding: 30px 15px;
}

.c-section-inner.full {
  padding-left: 0;
  padding-right: 0;
}

.c-section-header {
  margin-bottom: 20px;
}

.c-section-title {
  font-size: 26px;
}

.c-section-title .sub {
  font-size: 18px;
}


/* SLIDER */

.c-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.c-slider-arrow img {
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.25));
}

.c-slider-arrow-prev {
  left: -32px;
}

.c-slider-arrow-next {
  right: -32px;
}

.slick-track {
  display: flex;
}

.slick-slide {
  height: auto;
}

.slick-dots {
  bottom: -35px;
}

.slick-dots li {
  margin: 0;
}

.slick-dots li button::before {
  font-size: 13px;
}


/* MODAL */

.modal-wrapper {
  height: calc(100% - 80px);
  max-height: 80vh;
  max-width: 95%;
  width: 350px;
}

.modal-voice.modal-wrapper {
  height: calc(100% - 80px);
}

.modal-close-btn {
  right: 10px;
}

.modal-inner {
  padding: 0 20px;
}

#modal-square .modal-inner,
#modal-global .modal-inner {
  padding: 0 20px;
}

.modal-section-title {
  font-size: 18px;
}

.modal-subsection-title {
  font-size: 15px;
  margin-bottom: 10px;
  padding: 1px 8px 3px;
}

.modal-btn {
  font-size: 13px;
  padding: 4px 25px 6px 15px;
}

.modal-column {
  width: 100%;
}

.modal-column-title {
  margin-bottom: 5px;
}

.modal-column-figure figcaption {
  font-size: 13px;
}

#modal-global-education {
  border-bottom: 2px dotted var(--color-accent1);
  padding-bottom: 20px;
}

.modal-global-tagline {
  font-size: 16px;
  margin-bottom: 10px;
  padding: 10px 10px 0;
  text-align: left;
}

.modal-global-column-title {
  font-size: 15px;
}

.modal-global-column-subtitle {
  font-size: 18px;
}

.modal-global-column-list {
  min-height: inherit;
}

.modal-voice-balloon {
  left: 20px;
}


/*   HEADER   */

#header {
  column-gap: 20px;
}

.h-btn {
  font-size: 13px;
  line-height: 1.25;
  padding: 5px 18px;
}

.h-btn:hover {
  background-color: #fff;
  color: var(--color-main);
}


/*   PAGETOP   */

#pagetop {
  position: fixed;
  bottom: 10px;
  right: 15px;
}


/*   FOOTER   */

.f-inner {
  padding: 30px 15px;
}

.f-nav-list {
  gap: .5em 1em;
  justify-content: flex-start;
}

.f-nav-list-item {
  min-width: 40%;
}

.f-nav-list-item a::after {
  background-size: 16px 16px;
  height: 16px;
  margin-left: .25em;
  vertical-align: -3px;
  width: 16px;
}


/*----------------------------------------------
    TOP  .home
----------------------------------------------*/

.bb-custom-wrapper::after {
  content: "";
  clear: both;
  display: block;
}

#bb-bookblock-sp {
  aspect-ratio: 1560 / 1180;
  float: right;
  height: auto;
  width: 200%;
  z-index: 1;
}

.bb-inner img {
  height: auto;
  width: 100%;
}

.home-mainvisual-slide-item img {
  height: auto;
  width: 100%;
}

#home-philosophy .c-section-title {
  font-size: 24px;
}

.home-philosophy-aspiration-title {
  font-size: 15px;
}

.home-philosophy-aspiration-text img {
  width: 250px;
}

.home-philosophy-logo img {
  width: 163px;
}

.home-philosophy-btn {
  width: 204px;
}

.home-chart-inner {
  padding: 50px 15px 25px;
}

.home-chart-btn-balloon.left {
  bottom: 10px;
  left: -15px;
}

.home-chart-btn-balloon.right {
  right: -10px;
}

.home-chart-btn-balloon.left img {
  width: 62px;
}

.home-chart-btn-balloon.right img {
  width: 45px;
}

.home-field-contents {
  background-color: #C7E8FA;
  background-image:
    url(../images/home/bg_cloud_t_sp.webp),
    url(../images/home/bg_cloud_b_sp.webp);
  background-position:
    top -25px center,
    bottom -25px center;
  background-size:
    390px auto,
    390px auto;
  margin: auto;
  padding: 80px 0 0;
  width: 100%;
}

.home-field-map-title img {
  width: 356px;
}

.home-field-map-container {
  width: 100%;
}

.home-field-map-image {
  width: 100%;
}

.home-field-map-btn.more img {
  height: 72px;
  width: 72px;
}

.home-field-map-btn.medical {
  top: -1vw;
  left: 52%;
}

.home-field-map-btn.education {
  top: 51vw;
  left: 73%;
}

.home-field-map-btn.square {
  top: 64%;
  left: 55.5%;
}

.home-field-map-btn.global {
  bottom: 2.5%;
  left: 76%;
}

.home-field-map-btn.careworker {
  top: 7.5%;
  left: 73%;
}

.home-field-map-btn.nursery {
  top: 24%;
  left: 60.5%;
}

.home-field-map-btn.overseas {
  top: 33.5%;
  left: 30%;
}

.home-field-map-btn.teacher {
  top: 40%;
  left: 72.5%;
}

.home-field-map-btn.production {
  top: 48%;
  left: 30%;
}

.home-field-map-btn.sales {
  bottom: 40%;
  left: 72%;
}

.home-field-map-btn.coordinator {
  bottom: 16%;
  left: 33%;
}

.home-field-subsection-title {
  font-size: 20px;
  margin-bottom: 20px;
}

.home-field-collab-list {
  margin: 0 auto;
  width: calc(100vw - 80px);
}

.home-field-collab-list .slick-track {
  padding-top: 15px;
}

.home-field-collab-list .slick-dots li button::before {
  color: #E3F2D6;
  opacity: .35;
}

.home-field-collab-list .slick-dots li.slick-active button::before {
  opacity: 1;
}

.home-field-collab-list-item {
  max-width: inherit;
  margin: 0 15px;
  width: 100%;
}

.home-field-collab-list-item-title {
  font-size: 16px;
}

.home-field-collab-list-item-figure .imgwrap img {
  display: inline;
}

.home-field-learn-list {
  margin: 0 auto;
  width: calc(100vw - 80px);
}

.home-field-learn-list .slick-dots li button::before {
  color: #45A97F;
  opacity: .25;
}

.home-field-learn-list .slick-dots li.slick-active button::before {
  opacity: 1;
}

.home-field-learn-list-item {
  max-width: inherit;
  margin: 0 15px;
  width: 100%;
}

.home-story-list-item {
  margin: 0 15px;
}

.home-link-box {
  padding: 35px 20px 90px;
}

.home-link-box .c-section-header {
  margin-bottom: 10px;
}

.home-news-contents {
  padding: 12px 20px;
}

.home-news-header-left {
  column-gap: 5px;
}

.home-news-more {
  font-size: 12px;
}

.home-news-more .icon {
  height: 16px;
  width: 16px;
}

.home-news-list-item {
  column-gap: 1em;
  padding: 11px 0 15px;
}

.home-news-list-item .date {
  font-size: 13px;
  margin-top: 0;
}

.home-news-list-item .title {
  font-size: 13px;
}

.home-news-bnrlist {
  gap: 40px 10px;
  margin-top: 40px;
}

.home-news-bnrlist .home-news-bnrlist-item {
  max-width: 170px;
  width: calc((100% - 10px) / 2);
}

.home-news-bnrlist .home-news-bnrlist-item:first-child {
  order: 3;
  max-width: inherit;
  width: 100%;
}


/*----------------------------------------------
    PAGE (共通)  .page
----------------------------------------------*/

#page-article {
  padding: 30px 15px;
}

.page-title {
  font-size: 26px;
}

.page-iconic {
  margin-top: .5em;
}

.page-back {
  margin-top: 30px;
}

.page-back-btn {
  font-size: 17px;
}

.page-back-iconic {
  bottom: -80px;
  right: -25px;
}


/*----------------------------------------------
    お知らせ (一覧) NEWS  .blog
----------------------------------------------*/

.news-list-item {
  padding: 32px 15px;
}


/*----------------------------------------------
    お知らせ (詳細) NEWS  .single
----------------------------------------------*/

.post-contents {
  padding: 32px 15px;
}

.post-header {
  margin-bottom: 20px;
}

.post-title {
  font-size: 20px;
}

.post-content {
  font-size: 14px;
}

.post-content h2 {
  font-size: 18px;
}

.post-content h3 {
  font-size: 16px;
}

.post-content h4 {
  font-size: 16px;
}

.post-content figcaption {
  font-size: 12px;
}

.post-content table th,
.post-content table td {
  padding: 10px;
}

.post-content blockquote {
  padding: 60px 30px 40px;
}

.post-content blockquote site {
  margin-top: 1.5em;
}


/*----------------------------------------------
    採用情報 RECRUIT  .recruit
----------------------------------------------*/

.recruit-section {
  border-top-width: 1px;
  padding-top: 20px;
}

.recruit-flow-list {
  flex-direction: column;
  row-gap: 30px;
}

.recruit-flow-list-item {
  width: 100%;
}

.recruit-flow-list-item::after {
  background: url(../images/common/icon_arrow-head_d_gr.svg) no-repeat center center / 20px 10px;
  height: 10px;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%,0);
  width: 20px;
}

.recruit-faq-list-item {
  margin-bottom: 20px;
  padding: 32px 15px;
}

.recruit-faq-list-item-question {
  font-size: 18px;
}

.recruit-faq-list-item-question .question {
  margin-top: -5px;
}


/*----------------------------------------------
    グループ全体の取り組み SYNERGY  .synergy
----------------------------------------------*/

.synergy-section {
  padding: 16px 0 40px;
}

.synergy-section-header {
  margin-bottom: 24px;
}

.synergy-section-title {
  font-size: 20px;
}

.synergy-section-box {
  width: 100%;
}


/*----------------------------------------------
    適職診断チャート  .chart
----------------------------------------------*/

.chart {
  background-image: url(../images/chart/bg_cloud_t_sp.webp);
  background-position: top 20px center;
  background-size: 464px auto;
}

.chart #page-article {
  background-size: 398px auto;
  overflow: hidden;
  padding-top: 20px;
  padding-bottom: 90px;
}

.chart-title-deco.cloud-a {
  top: 60px;
  bottom: auto;
  left: -10px;
}

.chart-title-deco.cloud-b {
  top: 65px;
  bottom: auto;
  right: -10px;
}

.chart-title-deco.balloon-a {
  top: 0;
  bottom: auto;
  left: -15px;
}

.chart-title-deco.balloon-b {
  top: 18px;
  bottom: auto;
  right: -15px;
}

.chart-container {
  padding: 19px 23px;
}

.chart-question-btn {
  width: 100%;
}

.chart-result-company-title {
  padding: 5px 8px;
}

.chart-result-btn {
  font-size: 13px;
  padding: 4px 30px 6px 20px;
}

.chart-again {
  padding-top: 20px;
}


/*----------------------------------------------
    パンフレット  .pamphlet
----------------------------------------------*/

.pamphlet {
  background-color: transparent;
}

.pamphlet #page-article {
  max-width: inherit;
  padding: 0;
  width: 100%;
}

.pamphlet-content {
  max-width: inherit;
  padding: 0 0 35px;
}

.swiper-horizontal {
  touch-action: auto;
}

.swiper-slide img {
  height: auto;
  width: 100%
}

.swiper-button-prev,
.swiper-button-next {
  height: auto;
  width: auto;
}

.swiper-button-prev {
  left: 0 !important;
}

.swiper-button-next {
  right: 0 !important;
}

.swiper-button-prev img,
.swiper-button-next img {
  height: 30px;
  width: 30px;
}

.swiper-pagination {
  bottom: -30px;
}

.pamphlet-btns {
  padding: 15px 15px 0;
}

.pamphlet .f-inner {
  padding: 15px;
}


