@charset "utf-8";


/* common
-------------------------------------------------------------*/
:root {
  --blue-color1: #106EB8;
  --blue-color-rgb1: 16, 110, 184;
  --blue-color2: #26A4DF;
  --blue-color-rgb2: 38, 164, 223;
  --orange-color: #F39801;
  --orange-color-rgb: 243, 152, 1;
  --red-color: #df4738;
}

body {
  margin: 0;
  color: #333;
  line-height: 1.75;
  font-size: 100%;
  font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴシック', 'Hiragino Sans', YuGothic, 'Yu Gothic', sans-serif;
  letter-spacing: 1.2px;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #F39801;
  border-radius: 10px;
}

.text-link {
  color: var(--blue-color1);
  font-weight: 900;
  text-decoration: underline;
}

.text-link:hover {
  text-decoration: none;
}

.text-block {
  display: inline-block;
}

.mark {
  background: linear-gradient(transparent 60%, var(--orange-color) 60%);
}

.red {
  color: var(--red-color);
}

.ctabtn-wrap {
  text-align: center;
}

.ctabtn {
  display: inline-block;
  max-width: 800px;
  width: 88%;
  display: block; margin:auto;
  text-align: center;
  font-weight: 900;
  color: #fff;
  font-size: 28px;
  line-height: 1.4;
  padding: 24px 12px;
  border-radius: 120px;
  border: 2px solid #fff;
  background-color: #06c755;
  background-image: linear-gradient(90deg, #06c755, #19b459);
  -webkit-animation: pepe 3.2s ease 1.2s infinite;
  animation: pepe 3.2s ease 1.2s infinite;
}

.main-text {
  line-height: 1.32;
  color: #fff;
}

.ctabtn .sub-text {
  margin-top: 8px;
  font-size: 16px;
  color: rgba(5, 5, 5, 0.603);
  line-height: 1.2;
  display: inline-block;
}

@keyframes pepe {
    from, 33%, 66%, to { transform: rotate(2deg) }
    16%, 50%, 83% { transform: rotate(-2deg) }
}

.sp {
  display: none;
}

.spbr {
  display: none;
}

section h2 {
  font-size: 220%;
  text-align: center;
  margin-bottom: 40px;
  font-weight: 900;
  line-height: 1.4;
}

section h3 {
  font-size: 150%;
}









@media (max-width:787px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }

  .spbr {
    display: block;
  }

  .ctabtn {
    width: 96%;
  }

  .ctabtn .sub-text {
    font-size: 14px;
  }
}

@media (max-width:480px) {
  .ctabtn {
    font-size: 28px;
  }

  .ctabtn .sub-text {
    font-size: 14px;
  }
}


/* rayout
-------------------------------------------------------------*/
.inner1 {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.inner2 {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

.header-logo {
  width: 240px;
  height: auto;
}

.logo-line {
  padding: 16px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-section {
  padding: 64px 0px;
  margin: 40px auto 80px;
}

@media (max-width:980px) {
  .inner1 {
    padding: 0 4%;
  }

  .inner2 {
    padding: 0 4%;
  }

  .top-section {
    margin-bottom: 40px;
  }
}

/* contents
-------------------------------------------------------------*/
.header-line {
  padding: 12px 24px;
  background-color: var(--red-color);
}

.header-line p {
  color: #fff;
  font-weight: 900;
  font-size: 120%;
  line-height: 1;
}

.header-line p span {
  border: 2px solid #fff;
  font-size: 90%;
  margin-right: 12px;
  display: inline-block;
  padding: 12px 16px;
}

.mv img {
  max-width: 1600px;
  height: auto;
  margin: auto;
  display: block;
}

.cta-area {
  background-color: #ffffff;
  overflow: hidden;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask4665%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='url(%26quot%3b%23SvgjsRadialGradient4666%26quot%3b)'%3e%3c/rect%3e%3cpath d='M851 136L613 374' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient4667%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M996 106L760 342' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient4668%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M523 557L820 260' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient4667%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M25 485L254 256' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient4668%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M1352 129L1158 323' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient4668%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M1032 362L1400 -6' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient4668%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M1019 347L1338 28' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient4667%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M1023 397L1299 121' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient4668%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M1063 537L1345 255' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient4668%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M1142 80L730 492' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient4667%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M550 537L318 769' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient4667%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M318 239L618 -61' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient4667%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M665 323L360 628' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient4667%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M607 436L920 123' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient4667%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M931 217L1219 -71' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient4668%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M746 434L526 654' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient4668%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M356 504L532 328' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient4668%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M469 363L143 689' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient4667%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M372 256L90 538' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient4667%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M1135 267L898 504' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient4668%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M980 442L1321 101' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient4667%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M1187 498L958 727' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient4667%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M1405 261L1240 426' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient4667%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M474 415L204 685' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient4667%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M814 374L969 219' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient4668%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M716 419L1052 83' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient4668%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M43 336L346 33' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient4667%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M1198 483L1526 155' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient4668%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M436 536L686 286' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient4668%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M1398 408L1761 45' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient4668%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M517 335L715 137' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient4668%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M638 249L846 41' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient4667%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M932 549L1105 376' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient4667%26quot%3b)' stroke-linecap='round' class='BottomLeft'%3e%3c/path%3e%3cpath d='M225 198L-184 607' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient4668%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M1142 85L852 375' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient4668%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M991 527L592 926' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient4668%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M637 247L384 500' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient4668%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M433 35L637 -169' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient4668%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3cpath d='M1173 166L779 560' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient4668%26quot%3b)' stroke-linecap='round' class='TopRight'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask4665'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cradialGradient cx='50%25' cy='50%25' r='772.53' gradientUnits='userSpaceOnUse' id='SvgjsRadialGradient4666'%3e%3cstop stop-color='rgba(223%2c 71%2c 56%2c 0.2)' offset='0.51'%3e%3c/stop%3e%3cstop stop-color='rgba(255%2c 0%2c 0%2c 0.377)' offset='0.72'%3e%3c/stop%3e%3c/radialGradient%3e%3clinearGradient x1='100%25' y1='0%25' x2='0%25' y2='100%25' id='SvgjsLinearGradient4667'%3e%3cstop stop-color='rgba(255%2c 255%2c 255%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(255%2c 255%2c 255%2c 0.6)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='0%25' y1='100%25' x2='100%25' y2='0%25' id='SvgjsLinearGradient4668'%3e%3cstop stop-color='rgba(255%2c 255%2c 255%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(255%2c 255%2c 255%2c 0.6)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
  padding: 40px 0;
}


@media (max-width: 480px) {
  .header-line p {
    font-size: 100%;
  }
}


/* mission
-------------------------------------------------------------*/
.mission-sec {
  margin: 0;
  background-color: #fff;
  padding-top: 64px;
}
.mission-sec .ppa-logo { text-align: center; margin-bottom:8px; }
.mission-sec .ppa-logo img { width:160px; height:auto; }

/* appeal
-------------------------------------------------------------*/
.appeal-sec {
  margin: 0;
  background-color: rgba(var(--blue-color-rgb2), .15);
  padding-top: 64px;
}


.lead-heading img {
  max-width: 520px;
  width: 100%;
  margin: auto;
  height: auto;
}

.point-wrap {
  margin-top: 40px;
}

.point-list li {
  width: calc(92% / 3);
  margin-bottom: 4%;
  display: flex;
}

.point-list li:nth-child(3n-1) {
  margin: 0 4% 4%;
}

.point-item {
  padding: 8px;
  border-radius: 8px;
  background: repeating-linear-gradient(-45deg, var(--red-color), var(--red-color) 8px, var(--blue-color2) 8px, var(--blue-color2) 16px);
}

.point-itemin {
  background-color: white;
  border-radius: 4px;
  padding: 24px;
}

.point-item img {
  height: auto;
  border-radius: 4px;
}

.point-list li h3 {
  font-size: 120%;
  color: var(--blue-color2);
  font-weight: 900;
  margin: 8px 0 4px;
}

.point-list li p {
  font-size: 90%;
}


@media (max-width: 599px) {
  .worry-sec img {
    width: 100%;
  }

  .point-list li {
    width: 100%;
    margin-bottom: 4%;
  }

  .point-list li:nth-child(3n-1) {
    margin: 0 0 4%;
  }

}

/* price
-------------------------------------------------------------*/
.heading-price {
  margin-bottom: 16px;
}

.heading-price img {
  max-width: 360px;
  height: auto;
}

.pricing-table-wrap {
  display: block;
  overflow-x: scroll;
}

.pricing-table {
  width: 100%;
  min-width: 800px;
  margin-top: 24px;
  border-collapse: collapse;
  white-space: nowrap;
}

.pricing-table th,
.pricing-table td {
  padding: 4px 12px;
  border: 1px solid #ccc;
}

.pricing-table th {
  padding: 16px 12px;
  background-color: var(--blue-color1);
  color: #fff;
  font-weight: 900;
  text-align: left;
}

.pricing-table tr:nth-child(2n+1) {
  background-color: #eee;
}

.pricing-table tr td:nth-child(3n-2) {
  width: 50%;
}

.pricing-table tr td:nth-child(3n),
.pricing-table tr td:nth-child(3n-1) {
  width: 25%;
}

.pricing-table .heading-tr {
  background-color: #E7F0F7 !important;
}

.pricing-table .heading-tr td {
  padding: 12px 12px;
}



/* background
-------------------------------------------------------------*/
.background-sec {
  margin: 0;
  background-image: linear-gradient(rgba(210, 210, 210, 0.4) 1px, transparent 1px), linear-gradient(to right, rgba(210, 210, 210, 0.4) 1px, transparent 1px);
  background-size: 20px 20px;
  background-color: #fff;
  background-position: -14px 14px;
}

.owner {
  width: 320px;
  height: auto;
  border-radius: 240px;
  margin: 0 auto 16px;
  display: block;
}

.intro {
  font-weight: 900;
  font-size: 120%;
  text-align: center;
}

.intro1 {
  font-size: 180%;
}

.background-text1 {
  margin-top: 40px;
}

.background-text {
  line-height: 2.5em;
}

@media (max-width: 599px) {
  .owner {
    width: 240px;
  }
}

/* slider */
.slider {
  overflow: hidden;
  width: 100%;
  /* または固定幅でもOK */
  background: #f0f0f0;
}

.slide-track {
  display: flex;
  width: calc(300px * 6);
  /* 画像の幅 × 枚数 */
  animation: scroll 20s linear infinite;
}

.slide {
  width: 300px;
  height: auto;
  margin-right: 10px;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* youtube
-------------------------------------------------------------*/
.youtube-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 64px 0;
}


.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 20px;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 980px) {
  .youtube-section {
    padding: 64px 0;
  }
}



.chat-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 40px;
}

.bubble {
  max-width: 88%;
  padding: 12px 24px;
  border-radius: 16px;
  background: #f0f0f0;
  position: relative;
  font-size: 16px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.bubble.left::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 15px;
  border: 10px solid transparent;
  border-right-color: #f0f0f0;
}

.bubble.right {
  align-self: flex-end;
  background: #d0f0ff;
}

.bubble.right::before {
  content: "";
  position: absolute;
  right: -10px;
  top: 15px;
  border: 10px solid transparent;
  border-left-color: #d0f0ff;
}

.name {
  display: block;
  font-size: 12px;
  margin-top: 5px;
  color: #555;
}
@media (max-width: 599px) {
  .right p { text-align: left !important;}
}

/* job-summary
-------------------------------------------------------------*/
.job-summary {
  max-width: 700px;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.job-summary h1 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: #333;
  border-left: 4px solid #007bff;
  padding-left: 1rem;
}

.job-table {
  width: 100%;
  border-collapse: collapse;
}

.job-table th,
.job-table td {
  text-align: left;
  vertical-align: top;
  padding: 1rem;
  border-bottom: 1px solid #ddd;
}

.job-table th {
  background-color: #f9f9f9;
  font-weight: bold;
}

@media (max-width: 980px) {
  .job-summary {
    padding: 4%;
  }
}

@media (max-width: 599px) {

  .job-table th,
  .job-table td {
    width: 100%;
    display: block;
  }
}


/* question
-------------------------------------------------------------*/
.faq-sec {
  background-color: rgba(var(--blue-color-rgb1), .02);
  margin: 0;
}

.flow-item {
  width: 80%;
  padding: 24px;
  text-align: center;
  margin: 0 10% 6.4%;
  box-shadow: rgba(var(--blue-color-rgb1), 0.2) 0px 6px 28px 0px;
}

.flow-list h3 {
  font-size: 120%;
  color: var(--blue-color1);
}


.heading-question span {
  display: inline-block;
  background-color: var(--blue-color1);
  color: #fff;
  font-weight: 900;
  padding: 12px 14px;
  font-size: 160%;
  margin: 0 2px;
  line-height: 1;
  letter-spacing: 0;
  border-radius: 50%;
}

details {
  margin-bottom: 24px;
}

details summary {
  color: var(--blue-color1);
  font-size: 120%;
  font-weight: 900;
  background-color: rgba(var(--blue-color-rgb1), .1);
  padding: 16px 12px;
  border-radius: 4px;
  line-height: 1.4;
}

details summary:hover {
  cursor: pointer;
  color: #fff;
  background-color: var(--blue-color1);
}

.ansewr-box {
  padding: 16px;
}

@media (max-width: 599px) {
  .flow-item {
    width: 100%;
    margin: 0 0 2.4%;
  }
}

/* message
-------------------------------------------------------------*/
.message-sec {
  margin: 0;
  padding: 64px 0;
  background-image: linear-gradient(rgba(210, 210, 210, 0.4) 1px, transparent 1px), linear-gradient(to right, rgba(210, 210, 210, 0.4) 1px, transparent 1px);
  background-size: 20px 20px;
  background-color: #fff;
  background-position: -14px 14px;
}

/* footer
-------------------------------------------------------------*/
.copyright {
  background-color: var(--blue-color1);
  padding: 16px 0px;
  text-align: center;
}