@charset "UTF-8";

/* ==========================================================================
   home.css
   トップページ専用CSS
   ========================================================================== */

@media screen and (min-width: 820px), print {
  .p-home__kv {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: stretch;
  }
}
@media screen and (min-width: 820px), print {
  .p-home__kv__img {
    width: 100%;
    margin-left: 1rem;
  }
}
@media screen and (max-width: 819px) {
  .p-home__kv__img {
    width: calc(100% + 4rem);
    margin-left: -2rem;
    margin-right: -2rem;
    margin-bottom: 2rem;
  }
}

/* 全画面共通の初期化 */
.p-home__kv__img {
  aspect-ratio: 710 / 484;
  display: block;
  overflow: hidden;
}


.p-home__kv__cont {
  width: 100%;
}
@media screen and (min-width: 820px), print {
  .p-home__kv__cont {
    max-width: 48rem;
  }
}
@media screen and (min-width: 820px), print {
  .p-home__kv__cont__header {
    margin-bottom: 3rem;
  }
}
@media screen and (max-width: 819px) {
  .p-home__kv__cont__header {
    margin-bottom: 1.5rem;
  }
}
.p-home__kv__cont__header > *:last-child {
  margin-bottom: 0 !important;
}

.p-home__kv__copy {
  line-height: 1.4;
  font-weight: bold;
}
@media screen and (min-width: 820px), print {
  .p-home__kv__copy {
    margin-bottom: 2rem;
    font-size: 5rem;
  }
}
@media screen and (max-width: 819px) {
  .p-home__kv__copy {
    margin-bottom: 1.2rem;
    font-size: 3.2rem;
    text-align: center;
  }
}

.p-home__kv__summary {
  line-height: 1.5;
  font-weight: bold;
}
@media screen and (min-width: 820px), print {
  .p-home__kv__summary {
    margin-bottom: 2rem;
    font-size: 2rem;
  }
}
@media screen and (max-width: 819px) {
  .p-home__kv__summary {
    margin-bottom: 1.2rem;
    font-size: 1.6rem;
    text-align: center;
  }
}

@media screen and (min-width: 820px), print {
  .p-home__kv__description {
    margin-bottom: 2rem;
  }
}
@media screen and (max-width: 819px) {
  .p-home__kv__description {
    margin-bottom: 2rem;
  }
}
@media screen and (min-width: 820px), print {
  .p-home__kv__pr {
    margin-bottom: 1rem;
    padding: 1rem;
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    --r: .6em; /* control the ribbon shape */
    clip-path: polygon(0 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,0 100%, var(--r) 50%);
    background: #ea6986;
    width: 90%;
    text-shadow: 0px 0px 5px rgba(212, 53, 87, 1);
  }
}
@media screen and (max-width: 819px) {
  .p-home__kv__pr {
    margin-bottom: 2rem;
    padding: 1rem;
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    --r: .6em; /* control the ribbon shape */
    clip-path: polygon(0 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,0 100%, var(--r) 50%);
    background: #ea6986;
    width: 100%;
    text-shadow: 0px 0px 5px rgba(212, 53, 87, 1);
  }
}

@media screen and (min-width: 820px), print {
  .p-home__kv__cta {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    width: 46rem;
  }
}
@media screen and (max-width: 819px) {
  .p-home__kv__cta {
    width: 22rem;
    margin: 0 auto;
  }
}

@media screen and (min-width: 820px), print {
  .p-home__kv__cta__unit {
    max-width: calc(50% - 1rem);
    min-width: calc(50% - 1rem);
    margin-left: 2rem;
    margin-top: 2rem;
  }
  .p-home__kv__cta__unit:nth-child(2n-1) {
    margin-left: 0;
  }
  .p-home__kv__cta__unit:nth-child(-n+2) {
    margin-top: 2rem;
  }
}
@media screen and (max-width: 819px) {
  .p-home__kv__cta__unit {
    margin-top: 2rem;
  }
  .p-home__kv__cta__unit:first-child {
    margin-top: 0;
  }
}


.p-logoList__item {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
  padding: 0;
  gap: 0 1rem;
}
.p-logoList__item a {
  display: block;
}
.p-logoList__item a:hover {
  opacity: .5;
  filter: alpha(opacity=50);
}
@media screen and (max-width: 819px) {
  .p-logoList__item {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 .5rem;
  }
}

@media screen and (max-width: 819px) {
  .p-logoList__item li {
    flex: none;
    width: 49% ;
    margin-bottom: .5rem;
  }
}
.p-logoList__item li img {
  width: 100%;
}
.p-logoList__item li {
  border: 2px solid #c4eceb;
}

.p-logoList__item > a:hover {
 opacity: .5;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
	.p-logoList__item img {
    image-rendering: -webkit-optimize-contrast;
  }
}


.p-taskWrap__col {
  position: relative;
  background-color: #c4eceb;
}
@media screen and (min-width: 820px), print {
  .p-taskWrap__col {
    margin-top: 3rem;
    margin-bottom: 8rem;
    padding: 5rem 0 10rem;
  }
}
@media screen and (max-width: 819px) {
  .p-taskWrap__col {
    margin-top: 2rem;
    margin-bottom: 6rem;
    padding: 3rem 0 8rem;
  }
}


.c-taskArrow {
  position: absolute;
  right: 0;
  bottom: -8rem;
  left: 0;
  width: 11rem;
  height: 10rem;
  margin: auto;
}
@media screen and (max-width: 819px) {
  .c-taskArrow {
    bottom: -5rem;
    width: 7rem;
    height: 6rem;
  }
}
@media screen and (min-width: 820px), print {
  .p-task__item {
    display: flex;
    gap: 2rem;
  }
  .p-task__item__cont {
    display: flex;
    position: relative;
    width : -webkit-calc(100% / 3);
    width : calc(100% / 3);
  }
}
@media screen and (max-width: 819px) {
  .p-task__item__cont {
    position: relative;
  }
  .p-task__item__cont:not(:last-child) {
    margin-bottom: 8rem;
  }
}
  .p-task__item__txt {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 20px;
    font-size: 1.7rem;
    font-weight: bold;
    padding: 2rem 34% 2rem 2rem;
  }
@media screen and (max-width: 819px) {
  .p-task__item__txt {
    position: relative;
    padding: 2rem;
  }
  .p-task__item__txt::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 30%;
    border-style: solid;
    border-width: 2rem 0 0 2rem;
    border-color: #fff transparent transparent;
    translate: calc(-50% + 0.4px) 100%;
  }
}
@media screen and (min-width: 820px), print {
  .p-task__item__txt p {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 819px) {
  .p-task__item__txt p {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 820px), print {
  .p-task__item__chara {
    position: absolute;
    right: 0;
    bottom: -6rem;
    width: 15rem;
  }
}
@media screen and (max-width: 819px) {
  .p-task__item__chara {
    position: absolute;
    right: 0;
    bottom: -7rem;
    width: 8rem;
  }
}
@media screen and (min-width: 820px), print {
  .p-task__item__chara figcaption {
    font-size: 1.6rem;
    font-weight: bold;
    margin-top: 5px;
    text-align: center;
  }
}
@media screen and (max-width: 819px) {
  .p-task__item__chara figcaption {
    font-size: 1.4rem;
    font-weight: bold;
    margin-top: 5px;
    text-align: center;
  }
}

.p-taskPrWrap {
  background: rgb(219, 242, 242);
  background: linear-gradient(180deg, transparent 0%, rgb(219, 242, 242) 100%);
  padding: 12rem 0 7rem;
  position: relative;
}
@media screen and (max-width: 819px) {
  .p-taskPrWrap {
    padding: 9rem 0 7rem;
  }
}
@media screen and (max-width: 819px) {
  .p-taskPrWrap::after {
    width: 60px;
  }
}
@media screen and (min-width: 820px), print {
  .p-taskPr {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
  }
}
@media screen and (min-width: 820px), print {
  .p-taskPr__txt {
    font-size: 3rem;
    font-weight: bold;
  }
  .p-taskPr__txt__em {
    font-size: 5rem;
    margin-right: 10px;
  }
  .p-taskPr__ph {
    max-width: 35rem;
  }
}
@media screen and (max-width: 819px) {
  .p-taskPr__txt {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
  }
  .p-taskPr__txt__em {
    font-size: 4rem;
    margin-bottom: 1.5rem;
  }
}



@media screen and (min-width: 820px), print {
  .c-features {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: stretch;
  }
}
@media screen and (min-width: 820px), print {
  .c-features__unit {
    max-width: calc(50% - 4rem);
    min-width: calc(50% - 4rem);
    margin-left: auto;
    margin-top: 8rem;
  }
  .c-features__unit:nth-child(2n-1) {
    margin-left: 0;
  }
  .c-features__unit:nth-child(-n+2) {
    margin-top: 0;
  }
}
@media screen and (max-width: 819px) {
  .c-features__unit {
    margin-top: 4rem;
  }
  .c-features__unit:first-child {
    margin-top: 0;
  }
}

@media screen and (min-width: 820px), print {
  .c-features__unit__thumb {
    min-height: 34rem;
    margin-bottom: 4rem;
  }
}
@media screen and (max-width: 819px) {
  .c-features__unit__thumb {
    min-height: 18rem;
    margin-bottom: 2rem;
  }
}
.c-features__unit__thumb img {
  width: 100%;
  height: auto;
}
@media screen and (min-width: 820px), print {
  .c-features__unit__thumb.--1 {
    filter: drop-shadow(0 0 5rem rgba(250, 212, 113, 0.4));
  }
}
@media screen and (max-width: 819px) {
  .c-features__unit__thumb.--1 {
    filter: drop-shadow(0 0 2.4rem rgba(250, 212, 113, 0.4));
  }
}
@media screen and (min-width: 820px), print {
  .c-features__unit__thumb.--2 {
    filter: drop-shadow(0 0 5rem rgba(96, 183, 210, 0.4));
  }
}
@media screen and (max-width: 819px) {
  .c-features__unit__thumb.--2 {
    filter: drop-shadow(0 0 2.4rem rgba(96, 183, 210, 0.4));
  }
}
@media screen and (min-width: 820px), print {
  .c-features__unit__thumb.--3 {
    filter: drop-shadow(0 0 5rem rgba(73, 189, 189, 0.4));
  }
}
@media screen and (max-width: 819px) {
  .c-features__unit__thumb.--3 {
    filter: drop-shadow(0 0 2.4rem rgba(73, 189, 189, 0.4));
  }
}
@media screen and (min-width: 820px), print {
  .c-features__unit__thumb.--4 {
    filter: drop-shadow(0 0 5rem rgba(249, 194, 214, 0.4));
  }
}
@media screen and (max-width: 819px) {
  .c-features__unit__thumb.--4 {
    filter: drop-shadow(0 0 2.4rem rgba(249, 194, 214, 0.4));
  }
}

.c-features__unit__title {
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
}
@media screen and (min-width: 820px), print {
  .c-features__unit__title {
    margin-bottom: 1.2rem;
    font-size: 3.2rem;
  }
}
@media screen and (max-width: 819px) {
  .c-features__unit__title {
    margin-bottom: 0.8rem;
    font-size: 2rem;
  }
}

.c-features__unit__text {
  text-align: center;
}
@media screen and (min-width: 820px), print {
  .c-features__unit__text {
    line-height: 2;
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 819px) {
  .c-features__unit__text {
    line-height: 1.8;
    font-size: 1.2rem;
  }
}






@media screen and (min-width: 820px), print {
  .p-home__about__item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8rem;
  }
}
@media screen and (max-width: 819px) {
  .p-home__about__item {
    margin-bottom: 4rem;
  }
}

@media screen and (min-width: 820px), print {
  .p-home__about__item__img {
    max-width: 50rem;
    min-width: 50rem;
    margin-right: 4rem;
  }
}
@media screen and (max-width: 819px) {
  .p-home__about__item__img {
    width: calc(100% + 4rem);
    margin-left: -2rem;
    margin-right: -2rem;
    margin-bottom: 2rem;
  }
}

@media screen and (min-width: 820px), print {
  .p-home__about__item__cont {
    max-width: 48rem;
  }
}
.p-home__about__item__title {
  line-height: 1.5;
  font-weight: bold;
}
@media screen and (min-width: 820px), print {
  .p-home__about__item__title {
    margin-bottom: 2rem;
    font-size: 2.8rem;
  }
}
@media screen and (max-width: 819px) {
  .p-home__about__item__title {
    margin-bottom: 2rem;
    font-size: 2rem;
    text-align: center;
  }
}

.p-home__about__item__summary {
  line-height: 2;
  font-size: 1.4rem;
}
@media screen and (max-width: 819px) {
  .p-home__about__item__summary {
    margin-bottom: 2rem;
  }
}


@media screen and (min-width: 820px), print {
  .p-home__about__button {
    max-width: 60rem;
    margin: 0 auto 8rem;
  }
}
@media screen and (max-width: 819px) {
  .p-home__about__button {
    max-width: 22rem;
    margin: 0 auto 4rem;
  }
}


.p-home__strengths__item {
  position: relative;
}
@media screen and (min-width: 820px), print {
  .p-home__strengths__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42rem;
    margin-bottom: 8rem;
  }
}
@media print {
  .p-home__strengths__item {
    height: auto;
  }
}
@media screen and (max-width: 819px) {
  .p-home__strengths__item {
    width: calc(100% + 4rem);
    margin-left: -2rem;
    margin-right: -2rem;
    margin-bottom: 4rem;
  }
}
@media screen and (min-width: 820px), print {
  .p-home__strengths__item .p-home__strengths__item__thumb {
    position: absolute;
    left: 0;
    top: 50%;
    width: 47.3rem;
    height: 42rem;
    transform: translate(0, -50%);
    filter: drop-shadow(0 0 0.5rem rgb(240, 240, 240));
  }
}
@media screen and (max-width: 819px) {
  .p-home__strengths__item .p-home__strengths__item__thumb {
    z-index: 2;
    position: relative;
    margin-bottom: -4rem;
    filter: drop-shadow(0 0 0.34rem rgb(240, 240, 240));
  }
}
.p-home__strengths__item .p-home__strengths__item__cont {
  color: #333333;
}
@media screen and (min-width: 820px), print {
  .p-home__strengths__item .p-home__strengths__item__cont {
    display: flex;
    align-items: center;
    justify-content: stretch;
    width: 108rem;
    height: 36rem;
    padding-left: 37rem;
    padding-right: 18rem;
    margin-left: auto;
    background-image: url(../../img/page/home/strengths_bg.svg);
    background-position: center right 1rem;
    background-repeat: no-repeat;
    background-size: auto 100%;
  }
}
@media print {
  .p-home__strengths__item .p-home__strengths__item__cont {
    padding-right: 5rem;
  }
}
@media screen and (max-width: 819px) {
  .p-home__strengths__item .p-home__strengths__item__cont {
    z-index: 1;
    position: relative;
    padding: 6rem 1rem 3rem;
    background-color: #F8F8F8;
    border-radius: 2rem;
  }
}
.p-home__strengths__item .p-home__strengths__item__cont__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.p-home__strengths__item .p-home__strengths__item__cont__inner > *:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 820px), print {
  .p-home__strengths__item.--reverse {
    flex-direction: column-reverse;
  }
  .p-home__strengths__item.--reverse .p-home__strengths__item__thumb {
    left: auto;
    right: 0;
  }
  .p-home__strengths__item.--reverse .p-home__strengths__item__cont {
    padding-left: 18rem;
    padding-right: 37rem;
    margin-left: 0;
    margin-right: auto;
    background-position: center left 1rem;
  }
}
@media print {
  .p-home__strengths__item.--reverse .p-home__strengths__item__cont {
    padding-left: 5rem;
  }
}


.p-home__strengths__cta {
  position: relative;
  background-color: #DBF2F2;
}
@media screen and (min-width: 820px), print {
  .p-home__strengths__cta {
    width: 80rem;
    padding: 8rem 10rem;
    margin: 0 auto;
    border-radius: 4rem;
  }
}
@media screen and (max-width: 819px) {
  .p-home__strengths__cta {
    width: calc(100% + 4rem);
    padding: 4rem 2rem;
    margin: 0 -2rem;
    border-radius: 2rem;
    transform: translate(0, -4rem);
  }
}
@media screen and (min-width: 820px), print {
  .p-home__strengths__cta::after {
    position: absolute;
    content: "";
    display: block;
    right: -8.8rem;
    top: 23rem;
    width: 4.4rem;
    height: 4.4rem;
    background-image: url(../../img/page/home/strengths-cta-accessory.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
  }
}
.p-home__strengths__cta__message {
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
}
@media screen and (min-width: 820px), print {
  .p-home__strengths__cta__message {
    margin-bottom: 4rem;
    font-size: 2.8rem;
  }
}
@media screen and (max-width: 819px) {
  .p-home__strengths__cta__message {
    margin-bottom: 2rem;
    font-size: 2rem;
  }
}

@media screen and (max-width: 819px) {
  .p-home__strengths__cta .c-buttonWrap {
    max-width: 22rem;
    margin: 0 auto;
  }
}