@charset "UTF-8";

/* ==========================================
  /topmessage CSS
============================================= */

.p-component-keyvisualBlock__image img {
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 100%;
  width: 100%;
  z-index: -1;
}
.p-component-keyvisualBlock h1 {
  font-size: var(--fs-50);
  line-height: calc(74 / 50);
}
.p-component-keyvisualBlock h1,
.p-component-keyvisualBlock .text-information {
  -webkit-animation: fade-tilt 1.5s cubic-bezier(0,.25,1,1) 0.1s both;
          animation: fade-tilt 1.5s cubic-bezier(0,.25,1,1) 0.1s both;
}
@-webkit-keyframes fade-tilt {
  0% {
    opacity: 0;
    -webkit-mask-image: linear-gradient(135deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(135deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-size: 300% 300%;
            mask-size: 300% 300%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 130% 130%;
            mask-position: 130% 130%;
    mask-position: 130% 130%;
  }
  100% {
    opacity: 1;
    -webkit-mask-image: linear-gradient(135deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(135deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-size: 300% 300%;
            mask-size: 300% 300%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 130% 130%;
            mask-position: 130% 130%;
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
  }
}
@keyframes fade-tilt {
  0% {
    opacity: 0;
    -webkit-mask-image: linear-gradient(135deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(135deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-size: 300% 300%;
            mask-size: 300% 300%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 130% 130%;
            mask-position: 130% 130%;
    mask-position: 130% 130%;
  }
  100% {
    opacity: 1;
    -webkit-mask-image: linear-gradient(135deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(135deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-size: 300% 300%;
            mask-size: 300% 300%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 130% 130%;
            mask-position: 130% 130%;
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
  }
}
.p-component-keyvisualBlock .text-information {
  font-family: var(--ff-YuGothic);
  margin-top: var(--value-60);
}
.p-component-keyvisualBlock .text-name {
  font-family: var(--ff-YuGothic);
  font-size: var(--fs-28);
  line-height: calc(30 / 28);
  margin-top: var(--value-8);
}
.l-section--prospect {
  padding-top: var(--value-40);
}
.l-section--prospect .p-topmessage-profileBlock {
  background: #F0F0F1;
  font-family: var(--ff-YuGothic);
  padding-block: var(--value-32);
  padding-inline: var(--value-60);
}
.l-section--prospect .p-topmessage-profileBlock dl dt {
  font-size: var(--fs-20);
  font-weight: bold;
}
.l-section--prospect .p-topmessage-profileBlock dl dd {
  font-size: var(--fs-14);
  line-height: calc(26 / 14);
  margin-top: var(--value-12);
}
.l-section--prospect .p-topmessage-prospectBlock {
  border: 1px solid var(--color-gray8);
  padding-block: var(--value-40);
  padding-inline: var(--value-60);
}
.l-section--prospect .p-topmessage-prospectBlock__body {
  margin-top: var(--value-48);
}
.l-section--prospect .p-topmessage-prospectBlock .list-plan__item:nth-of-type(n+2) {
  border-top: 1px solid var(--color-gray8);
  margin-top: var(--value-16);
  padding-top: var(--value-20);
}
.l-section--prospect .p-topmessage-prospectBlock .list-plan__item h3 {
  font-size: var(--fs-24);
  line-height: calc(36 / 24);
}
.l-section--prospect .p-topmessage-prospectBlock .list-plan__item ul {
  font-family: var(--ff-YuGothic);
  margin-top: var(--value-8);
}
.l-section--prospect .p-topmessage-prospectBlock .list-plan__item ul li {
  line-height: calc(24 / 16);
}

.l-section--message {
  padding-top: var(--value-140);
}
.l-section--message .l-section__title {
  font-size: var(--fs-46);
  line-height: calc(64 / 46);
}
.l-section--message .l-section__title + * {
  margin-top: var(--value-40);
}
.l-section--message .text-comment {
  font-family: var(--ff-YuGothic);
  line-height: calc(32 / 16);
}
.l-section--message .text-comment > p + p {
  margin-top: var(--value-32);
}

.p-component-imageBlock {
  height: 280px;
  margin-top: var(--value-140);
  overflow: hidden;
  position: relative;
}
.p-component-imageBlock img {
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 100%;
  width: 100%;
}
/* PC */
@media screen and (min-width: 769px), print {
  .l-section .l-section__inner {
    max-width: 1048px;
  }
  .p-component-keyvisualBlock {
    color: var(--color-white);
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    height: calc(548 / 1440 * 100vw);
    overflow: hidden;
    position: relative;
    padding-inline: var(--value-80);
  }
  .p-component-keyvisualBlock__inner[data-layout="text-right"] {
    text-align: right;
  }
  .p-component-keyvisualBlock__inner {
    margin-inline: auto;
    max-width: 1120px;
    padding-bottom: calc(60 / 1440 * 100vw);
    width: 100%;
  }
  .l-section--prospect .p-topmessage-profileBlock {
    margin-top: var(--value-20);
  }
  .l-section--prospect .p-topmessage-prospectBlock {
    margin-top: var(--value-40);
  }
  .l-section--message .block-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .l-section--message [data-layout-pc="image-left"] {
    flex-direction: row-reverse;
  }
  .l-section--message .block-layout__image {
    width: calc(389 / 1048 * 100%);
  }
  .l-section--message .block-layout__text {
    width: calc(100% - calc(389 / 1048 * 100%));
  }
  .l-section--message [data-layout-pc="image-left"] .block-layout__text {
    padding-left: 40px;
  }
  .l-section--message [data-layout-pc="image-right"] .block-layout__text {
    padding-right: 40px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1240px) {
  .p-component-imageBlock {
    height: calc(280 / 1240 * 100vw);
  }
}
/* SP */
@media screen and (max-width: 768px) {
  .p-component-keyvisualBlock__image {
    height: calc(204 / 375 * 100vw);
    overflow: hidden;
    position: relative; 
  }
  .p-component-keyvisualBlock__inner {
    padding-top: var(--value-30);
    padding-inline: var(--value-18);
  }
  .p-component-keyvisualBlock h1 {
    font-size: var(--fs-26);
    line-height: calc(40 / 26);
  }
  .p-component-keyvisualBlock .text-information {
    margin-top: var(--value-20);
  }
  .p-component-keyvisualBlock .text-position {
    font-size: var(--fs-14);
    line-height: calc(20 / 14);
  }
  .p-component-keyvisualBlock .text-name {
    font-size: var(--fs-18);
    line-height: 1;
  }
  .l-section__title {
    font-size: var(--fs-22);
    line-height: calc(45 / 22);
  }
  .l-section--prospect .p-topmessage-profileBlock {
    margin-bottom: var(--value-50);
    padding: var(--value-24);
  }
  .l-section--prospect .p-topmessage-profileBlock dl dt {
    color: var(--color-gray7);
    font-size: var(--fs-17);
    font-weight: bold;
  }
  .l-section--prospect .p-topmessage-profileBlock dl dd {
    line-height: calc(24 / 14);
  }
  .l-section--prospect .p-topmessage-profileBlock + .p-topmessage-prospectBlock {
    margin-top: var(--value-50);
  }
  .l-section--prospect .p-topmessage-prospectBlock {
    padding: var(--value-24);
  }
  .l-section--prospect .p-topmessage-prospectBlock__body {
    margin-top: var(--value-28);
  }
  .l-section--prospect .p-topmessage-prospectBlock .list-plan__item:nth-of-type(n+2) {
    margin-top: var(--value-12);
    padding-top: var(--value-16);
  }
  .l-section--prospect .p-topmessage-prospectBlock .list-plan__item h3 {
    font-size: var(--fs-18);
    line-height: calc(20 / 18);
  }
  .l-section--prospect .p-topmessage-prospectBlock .list-plan__item ul li {
    font-size: var(--fs-14);
    line-height: calc(22 / 14);
  }

  .l-section--message {
    padding-top: var(--value-100);
  }
  .l-section--message .l-section__title {
    font-size: var(--fs-25);
    line-height: calc(36 / 25);
  }
  .l-section--message .l-section__title + * {
    margin-top: var(--value-30);
  }
  .l-section--message .text-comment > p {
    font-size: var(--fs-15);
    line-height: calc(30 / 15);
  }
  .l-section--message .image-person,
  .l-section--message .block-layout__image {
    margin-top: var(--value-28);
  }

  .p-component-imageBlock {
    height: calc(100 / 375 * 100vw);
    margin-top: var(--value-28);
  }
}