@charset "UTF-8";
/*　component Styles */
/* mixin */
/****************************************************************/
/* clearfix */
/****************************************************************/
/****************************************************************/
/* letter-spacing */
/****************************************************************/
/****************************************************************/
/* font family */
/****************************************************************/
/****************************************************************/
/* コンテンツ幅を保って背景全画面 */
/****************************************************************/
/****************************************************************/
/* コンテンツ幅を保って左寄せ */
/****************************************************************/
/****************************************************************/
/* コンテンツ幅を保って右寄せ */
/****************************************************************/
/****************************************************************/
/* コンテンツ幅 */
/****************************************************************/
/****************************************************************/
/* hover effect */
/****************************************************************/
/****************************************************************/
/* margin-responsive */
/****************************************************************/
/****************************************************************/
/* padding-responsive */
/****************************************************************/
/****************************************************************/
/* 画面幅からfontSizeを算出する */
/****************************************************************/
/**
 * 画面幅からpadding等の余白を算出する
 */
.text {
  line-height: 2;
  font-weight: 500;
  font-size: clamp(0px, 14 / (375 - var(--scrollbar-width)) * 100vw, 14px);
  text-align: left;
  padding: 0 12px;
}
@media screen and (min-width: 768px) {
  .text {
    font-size: 16px;
    text-align: center;
  }
}
.text p {
  font-weight: 500;
}

h2 {
  color: #2F3787;
  font-size: clamp(0px, 24 / (375 - var(--scrollbar-width)) * 100vw, 24px);
  line-height: 1.35;
}
@media screen and (min-width: 768px) {
  h2 {
    font-size: 30px;
  }
}

.p-machine {
  background-color: #D2E5FF;
}
.p-machine .l-hero {
  background-color: #FFFFFF;
}
@media screen and (max-width: 767.8px) {
  .p-machine .l-hero .l-hero__title .jpn {
    margin: 0 -8px;
  }
}
.p-machine__lead {
  padding-top: 48px;
  padding-bottom: 64px;
}
@media screen and (min-width: 768px) {
  .p-machine__lead {
    padding-top: 80px;
    padding-bottom: 112px;
  }
}
@media screen and (min-width: 768px) and (max-width: 960.8px) {
  .p-machine__lead {
    padding-top: 56px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.8px) {
  .p-machine__lead {
    padding-top: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 960.8px) {
  .p-machine__lead {
    padding-bottom: 78.4px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.8px) {
  .p-machine__lead {
    padding-bottom: 56px;
  }
}
.p-machine .anchor-area {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin-top: 32px;
  padding: 0;
}
@media screen and (max-width: 960.8px) {
  .p-machine .anchor-area {
    flex-direction: column;
    gap: 12px;
  }
}
@media screen and (min-width: 961px) {
  .p-machine .anchor-area {
    gap: 48px;
    margin-top: 40px;
  }
}
@media screen and (min-width: 961px) and (max-width: 960.8px) {
  .p-machine .anchor-area {
    margin-top: 28px;
  }
}
@media screen and (min-width: 961px) and (max-width: 767.8px) {
  .p-machine .anchor-area {
    margin-top: 20px;
  }
}
.p-machine .anchor-area li {
  background-color: #D2FFED;
  border: 1.5px solid #0DC77B;
  border-radius: 40px;
  max-width: 375px;
  width: 100%;
}
.p-machine .anchor-area a {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 4px;
  border-radius: 40px;
  overflow: hidden;
  text-decoration: none;
}
.p-machine .anchor-area p {
  color: #2F3787;
  font-weight: 700;
  font-size: 16px;
}
@media screen and (max-width: 960.8px) {
  .p-machine .anchor-area p {
    font-size: clamp(0px, 16 / (375 - var(--scrollbar-width)) * 100vw, 16px);
    text-align: left;
  }
}
.p-machine .anchor-area__image {
  flex-shrink: 0;
  width: clamp(80px, 28vw, 110px);
  height: clamp(46px, 17vw, 64px);
  border-radius: 40px;
  overflow: hidden;
  margin-right: 8px;
}
.p-machine .anchor-area span {
  background-color: #0DC77B;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  right: 18px;
}
.p-machine .anchor-area span::after {
  content: "";
  display: block;
  width: 11px;
  height: 8px;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #FFFFFF;
  -webkit-mask: url("/wp-content/themes/frey-a26/img/new_icon/arrow_icon.svg") no-repeat center/contain;
  mask: url("/wp-content/themes/frey-a26/img/new_icon/arrow_icon.svg") no-repeat center/contain;
}
.p-machine__feature {
  background-color: #D2FFED;
  padding: 112px 0;
  box-shadow: 0 0 0 2px #0DC77B;
  border-radius: 30px 30px 0 0;
  margin-bottom: 80px;
}
@media screen and (max-width: 960.8px) {
  .p-machine__feature {
    margin-bottom: 56px;
  }
}
@media screen and (max-width: 767.8px) {
  .p-machine__feature {
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 767.8px) {
  .p-machine__feature {
    padding-top: 64px;
    padding-bottom: 56px;
  }
}
.p-machine .featureBlock__middle {
  background-color: #FFFFFF;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 960.8px) {
  .p-machine .featureBlock__middle {
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    padding: 16px 12px 20px;
  }
}
@media screen and (min-width: 961px) {
  .p-machine .featureBlock__middle {
    gap: 40px;
    padding: 0 56px;
    margin-top: 64px;
  }
}
@media screen and (min-width: 961px) and (max-width: 960.8px) {
  .p-machine .featureBlock__middle {
    margin-top: 44.8px;
  }
}
@media screen and (min-width: 961px) and (max-width: 767.8px) {
  .p-machine .featureBlock__middle {
    margin-top: 32px;
  }
}
.p-machine .featureBlock__middle picture {
  max-width: 404px;
  aspect-ratio: 404/554;
  overflow: hidden;
}
@media screen and (max-width: 960.8px) {
  .p-machine .featureBlock__middle picture {
    max-width: 303px;
    aspect-ratio: 303/295;
  }
}
.p-machine .featureBlock__middle picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-machine .featureBlock table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 8px;
}
@media screen and (max-width: 767.8px) {
  .p-machine .featureBlock table {
    border-spacing: 4px;
  }
}
.p-machine .featureBlock table th {
  background-color: #D2E5FF;
  color: #2F3787;
}
@media screen and (max-width: 767.8px) {
  .p-machine .featureBlock table th {
    text-align: center;
    width: 35%;
  }
}
.p-machine .featureBlock table td {
  background-color: rgba(210, 229, 255, 0.5019607843);
  text-align: left;
}
.p-machine .featureBlock table th,
.p-machine .featureBlock table td {
  border-radius: 4px;
  font-weight: 700;
  line-height: 1.1;
  font-size: clamp(0px, 13 / (375 - var(--scrollbar-width)) * 100vw, 13px);
  padding: 8px;
}
@media screen and (min-width: 768px) {
  .p-machine .featureBlock table th,
  .p-machine .featureBlock table td {
    font-size: 16px;
    line-height: 1.25;
    padding: 20px 24px;
  }
}
.p-machine .featureBlock__bottom {
  border-radius: 20px;
  border: 1.5px solid #0DC77B;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 56px 64px;
  gap: 48px;
  margin-top: 64px;
}
@media screen and (max-width: 960.8px) {
  .p-machine .featureBlock__bottom {
    margin-top: 44.8px;
  }
}
@media screen and (max-width: 767.8px) {
  .p-machine .featureBlock__bottom {
    margin-top: 32px;
  }
}
.p-machine .featureBlock__bottom h3 {
  line-height: 1.5;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  .p-machine .featureBlock__bottom h3 {
    font-size: 26px;
    margin-bottom: 32px;
  }
}
@media screen and (min-width: 768px) and (max-width: 960.8px) {
  .p-machine .featureBlock__bottom h3 {
    margin-bottom: 22.4px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.8px) {
  .p-machine .featureBlock__bottom h3 {
    margin-bottom: 16px;
  }
}
.p-machine .featureBlock__bottom .left_col {
  flex: 1;
  text-align: left;
}
.p-machine .featureBlock__bottom .text_box p {
  line-height: 1.75;
  margin-top: 32px;
}
@media screen and (max-width: 960.8px) {
  .p-machine .featureBlock__bottom .text_box p {
    margin-top: 22.4px;
  }
}
@media screen and (max-width: 767.8px) {
  .p-machine .featureBlock__bottom .text_box p {
    margin-top: 16px;
  }
}
@media screen and (min-width: 768px) {
  .p-machine .featureBlock__bottom .text_box p {
    font-size: 16px;
  }
}
.p-machine .featureBlock__bottom .text_box p:first-of-type {
  margin-top: 0;
}
.p-machine .featureBlock__bottom .img_box img {
  aspect-ratio: 300/200;
  border-radius: 20px;
  object-fit: cover;
}
@media screen and (max-width: 767.8px) {
  .p-machine .featureBlock__bottom .img_box img {
    aspect-ratio: 295/170;
    object-position: top;
  }
}
@media screen and (max-width: 960.8px) {
  .p-machine .featureBlock__bottom {
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    gap: 24px;
    margin-top: 24px;
  }
  .p-machine .featureBlock__bottom .left_col {
    display: contents;
  }
  .p-machine .featureBlock__bottom h3 {
    order: 1;
    font-size: clamp(0px, 16 / (375 - var(--scrollbar-width)) * 100vw, 16px);
    text-align: center;
  }
  .p-machine .featureBlock__bottom .img_box {
    order: 2;
  }
  .p-machine .featureBlock__bottom .text_box {
    order: 3;
  }
}
.p-machine__reason {
  padding-top: 32px;
}
@media screen and (max-width: 960.8px) {
  .p-machine__reason {
    padding-top: 22.4px;
  }
}
@media screen and (max-width: 767.8px) {
  .p-machine__reason {
    padding-top: 16px;
  }
}
.p-machine .reasonBlock {
  background-color: #FFFFFF;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 64px;
  gap: 48px;
  margin-top: 32px;
}
@media screen and (max-width: 960.8px) {
  .p-machine .reasonBlock {
    margin-top: 22.4px;
  }
}
@media screen and (max-width: 767.8px) {
  .p-machine .reasonBlock {
    margin-top: 16px;
  }
}
.p-machine .reasonBlock .text_box {
  flex: 1;
}
.p-machine .reasonBlock .left_col {
  text-align: left;
  flex: 1;
}
.p-machine .reasonBlock h3 {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .p-machine .reasonBlock h3 {
    margin-bottom: 24px;
  }
}
@media screen and (min-width: 768px) and (max-width: 960.8px) {
  .p-machine .reasonBlock h3 {
    margin-bottom: 16.8px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.8px) {
  .p-machine .reasonBlock h3 {
    margin-bottom: 12px;
  }
}
.p-machine .reasonBlock p {
  line-height: 1.75;
  font-size: 16px;
}
@media screen and (max-width: 767.8px) {
  .p-machine .reasonBlock p {
    font-size: clamp(0px, 14 / (375 - var(--scrollbar-width)) * 100vw, 14px);
  }
}
.p-machine .reasonBlock:first-of-type {
  margin-top: 64px;
}
@media screen and (max-width: 960.8px) {
  .p-machine .reasonBlock:first-of-type {
    margin-top: 44.8px;
  }
}
@media screen and (max-width: 767.8px) {
  .p-machine .reasonBlock:first-of-type {
    margin-top: 32px;
  }
}
.p-machine .reasonBlock picture {
  flex-shrink: 0;
  width: min(300px, 100%);
}
.p-machine .reasonBlock picture img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}
.p-machine .reasonBlock.reverse {
  flex-direction: row-reverse;
}
@media screen and (max-width: 767.8px) {
  .p-machine .reasonBlock.reverse {
    flex-direction: column;
  }
}
@media screen and (max-width: 767.8px) {
  .p-machine .reasonBlock {
    flex-direction: column;
    gap: 24px;
    padding: 40px 20px;
  }
  .p-machine .reasonBlock .left_col {
    display: contents;
  }
  .p-machine .reasonBlock h3 {
    order: 1;
    font-size: clamp(0px, 16 / (375 - var(--scrollbar-width)) * 100vw, 16px);
    text-align: center;
  }
  .p-machine .reasonBlock .text_box {
    order: 3;
  }
  .p-machine .reasonBlock picture {
    order: 2;
  }
}
.p-machine .btn_block {
  padding-top: 64px;
}
@media screen and (max-width: 960.8px) {
  .p-machine .btn_block {
    padding-top: 44.8px;
  }
}
@media screen and (max-width: 767.8px) {
  .p-machine .btn_block {
    padding-top: 32px;
  }
}
.p-machine .btn_block {
  padding-bottom: 112px;
}
@media screen and (max-width: 960.8px) {
  .p-machine .btn_block {
    padding-bottom: 78.4px;
  }
}
@media screen and (max-width: 767.8px) {
  .p-machine .btn_block {
    padding-bottom: 56px;
  }
}
.p-machine .btn_block .more-link {
  margin-top: 64px;
}
@media screen and (max-width: 960.8px) {
  .p-machine .btn_block .more-link {
    margin-top: 44.8px;
  }
}
@media screen and (max-width: 767.8px) {
  .p-machine .btn_block .more-link {
    margin-top: 32px;
  }
}
@media screen and (max-width: 767.8px) {
  .p-machine .btn_block {
    padding-top: 64px;
  }
  .p-machine .btn_block .more-link {
    margin-top: 48px;
  }
}