@charset "UTF-8";
/* base
============================= */
/* googleFonts */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap");
/* variables */
/* color */
.c-breadcrumbs {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px;
}

.c-breadcrumbs a {
  position: relative;
  transition: all 0.5s ease;
}

.c-breadcrumbs a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 2px;
  background-color: #A1C4FD;
  transform: scale(0, 1);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.c-breadcrumbs a:hover {
  color: #A1C4FD;
  opacity: 1;
}

.c-breadcrumbs a:hover::before {
  transform: scale(1, 1);
}

.c-sectionPadding {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 16px;
  overflow: hidden;
}
@media screen and (max-width: 720px) {
  .c-sectionPadding {
    padding: 40px 16px;
  }
}

.c-sectionTitleWrap {
  display: flex;
  align-items: flex-end;
  margin-bottom: 54px;
}
@media screen and (max-width: 720px) {
  .c-sectionTitleWrap {
    margin-bottom: 32px;
  }
}

.c-sectionTitle {
  position: relative;
  font-family: "Open Sans";
  font-size: 3.6rem;
  letter-spacing: 0.05em;
}

.c-sectionTitle > span {
  font-size: 4rem;
  color: #A1C4FD;
}

.c-sectionTitle::after {
  content: "";
  left: 0;
  bottom: 0;
  display: block;
  height: 3px;
  margin-top: 4px;
  background-color: #A1C4FD;
}

.c-sectionSubTitle {
  flex: 1;
  position: relative;
  font-size: 2.4rem;
  text-indent: 1em;
}
@media screen and (max-width: 720px) {
  .c-sectionSubTitle {
    font-size: clamp(1.6rem, 4.8vw, 1.8rem);
  }
}

.c-sectionSubTitle::after {
  content: "";
  left: 0;
  bottom: 0;
  display: block;
  height: 3px;
  margin-top: 6px;
  background-color: #d9d9d9;
}

.c-btnWrap {
  position: relative;
  margin-top: 54px;
  text-align: center;
  z-index: 1;
}

.c-btn {
  position: relative;
  display: inline-block;
  padding: 12px 64px 14px 56px;
  font-family: "Open Sans";
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  color: #fff;
  background-color: #A1C4FD;
  border-radius: 30px;
  overflow: hidden;
}

.c-btn:hover {
  color: #A1C4FD;
  background-color: #fff;
  opacity: 1;
  transition: background-color 0.1s ease, color 0.5s ease;
}

.c-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #A1C4FD;
  border-radius: 30px;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 0.5s ease-out;
  z-index: -1;
}

.c-btn:hover::before {
  clip-path: inset(0 0 0 0);
  z-index: 1;
}

.c-btn::after {
  position: absolute;
  content: "\f054";
  font: var(--fa-font-solid);
  font-size: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  right: 44px;
  margin-top: 2px;
  color: #fff;
  transition: all 0.5s ease;
}

.c-btn:hover::after {
  color: #A1C4FD;
  transform: translate(5px, -50%);
}

.c-worksCardList {
  gap: 32px;
}
@media screen and (max-width: 720px) {
  .c-worksCardList {
    gap: 16px;
  }
}

.c-worksCard {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.c-worksCard__link {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 360px;
  height: 100%;
  padding: 24px 16px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  gap: 24px;
  transition: transform 0.5s ease, box-shadow 0.5s ease, opacity 0.5s ease;
}
@media screen and (max-width: 720px) {
  .c-worksCard__link {
    gap: 8px;
  }
}

.c-worksCard__link:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
  .c-worksCard__link:hover {
    transform: none !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    opacity: none !important;
  }
}
.c-worksCard__image {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.c-worksCard__image > img {
  max-width: 100%;
  object-fit: contain;
}

.c-worksCard__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  text-align: center;
  min-height: 160px;
}
@media screen and (max-width: 720px) {
  .c-worksCard__info {
    min-height: 125px;
  }
}

.c-worksCard__titleWrap {
  flex-grow: 1;
  text-align: center;
}

.c-worksCard__client {
  font-size: 1.6rem;
  line-height: 1.6;
}
@media screen and (max-width: 720px) {
  .c-worksCard__client {
    font-size: clamp(1rem, 3vw, 1.2rem);
  }
}

.c-worksCard__client > span {
  margin-left: 4px;
}

.c-worksCard__title {
  font-size: 2.4rem;
  line-height: 1.6;
}
@media screen and (max-width: 720px) {
  .c-worksCard__title {
    font-size: 1.6rem;
  }
}

.c-worksCard__category {
  display: inline-block;
  margin: 0 auto;
}

.c-categoryTag {
  display: inline-block;
  margin: 0 auto;
  padding: 8px;
  font-weight: bold;
  color: #fff;
  border-radius: 4px;
}
@media screen and (max-width: 720px) {
  .c-categoryTag {
    font-size: 1.2rem;
  }
}

.c-categoryTag--website {
  background-color: #A1C4FD;
}

.c-categoryTag--lp {
  background-color: #F7B8B8;
  text-transform: uppercase;
}

.c-categoryTag--banner {
  background-color: #F9F871;
  color: #333;
}

.c-toolTag {
  display: inline-block;
  padding: 6px 8px;
  font-family: "Open Sans";
  font-size: 1.6rem;
  font-weight: 600;
  border-radius: 4px;
}
@media screen and (max-width: 720px) {
  .c-toolTag {
    font-size: 1.2rem;
  }
}

.c-toolTag--code,
.c-toolTag--vscode,
.c-toolTag--wordpress,
.c-toolTag--local {
  color: #fff;
  background-color: #A1C4FD;
}

.c-toolTag--design,
.c-toolTag--figma,
.c-toolTag--photoshop,
.c-toolTag--illustrator {
  color: #666;
  background-color: #F9F871;
}

.c-message__wrap {
  margin: 56px auto 0;
  text-align: center;
}

.c-message__message {
  display: inline-block;
  padding: 80px 40px;
  line-height: 1.6;
  background-color: #f5f5f5;
  border-radius: 57% 43% 49% 51%/52% 56% 44% 48%;
}
@media screen and (max-width: 720px) {
  .c-message__message {
    padding: 56px 16px;
    font-size: 1.4rem;
  }
}

.c-sns__snsList {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.c-sns__snsLink > i {
  font-size: 2.4rem;
  color: #fff;
}

.c-sns__copyright {
  font-family: "Open Sans";
  text-align: center;
}
@media screen and (max-width: 720px) {
  .c-sns__copyright {
    font-size: 1.2rem;
  }
}

/* reset
============================= */
h1, h2, h3, h4, h5, h6, p, dl, dd, ul, li {
  margin: 0;
  padding: 0;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  color: #222;
  line-height: 1;
}

a {
  color: inherit;
  text-decoration: none;
}

li {
  list-style: none;
}

img {
  vertical-align: bottom;
}

/* fontSize */
html {
  font-size: 62.5%;
}

/* マウスストーカーのスタイル */
.stalker {
  position: fixed;
  top: -15px; /* widthの半分 */
  left: -15px; /* widthの半分 */
  width: 30px;
  height: 30px;
  background-color: rgba(247, 184, 184, 0.5);
  border-radius: 41% 59% 43% 57%/52% 30% 70% 48%;
  opacity: 0; /* カーソルを画面内に入れるまでは透明 */
  pointer-events: none;
  transition: transform 0.3s ease-out; /* 遅れてついてくる時間 */
  z-index: 999;
}

/* タッチデバイスでは非表示にする */
@media (hover: none) and (pointer: coarse) {
  .stalker {
    display: none !important;
  }
}
/* テキスト選択時のスタイル */
::selection {
  background-color: rgba(249, 248, 113, 0.5); /* 選択時の背景色 */
  color: #000; /* 選択時の文字色 */
}

/* Firefox用の選択スタイル */
::-moz-selection {
  background-color: rgba(28, 180, 211, 0.3); /* 選択時の背景色 */
  color: #000; /* 選択時の文字色 */
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: "Zen Kaku Gothic New", "Open Sans", "Hiragino Sanas", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Helvetica Neue", "Arial", sans-serif;
  font-weight: 400;
  line-height: 1;
  font-size: 1.6rem;
  color: #333;
  background-color: #fff;
  box-sizing: border-box;
  transition: all 0.3s ease;
  overflow-x: hidden;
  opacity: 0;
  transition: opacity 0.5s ease;
}

body.loaded {
  opacity: 1;
}

main {
  flex: 1;
}

a {
  transition: opacity 0.5s ease-in-out;
}

a:hover {
  opacity: 0.6;
  cursor: pointer;
}

@media screen and (max-width: 720px) {
  .pc-only {
    display: none;
  }
}
@media screen and (min-width: 721px) and (max-width: 1024px) {
  .sp-only {
    display: none;
  }
}
.animeTarget {
  transition: all 1s ease;
}

.animeTarget.animeTrigger {
  opacity: 1;
  transform: translate(0);
}

.fadeIn {
  opacity: 0;
}

.slideInLtoR {
  opacity: 0;
  transform: translateX(-50px);
}

.slideInRtoL {
  opacity: 0;
  transform: translateX(50px);
}

.slideInUtoB {
  opacity: 0;
  transform: translateY(-50px);
}

.slideInBtoU {
  opacity: 0;
  transform: translateY(50px);
}

.header {
  background: linear-gradient(90deg, #C2E9FB, #A1C4FD);
  animation: appear 1s ease;
}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.header.fix {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  animation: slideIn 0.5s ease;
}

@keyframes slideIn {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  padding: 12px 16px;
}
@media screen and (max-width: 720px) {
  .header__inner {
    padding: 8px 16px;
  }
}

.header__siteLink > img {
  width: 190px;
  height: auto;
}
@media screen and (max-width: 720px) {
  .header__siteLink > img {
    position: relative;
    width: 160px;
    z-index: 20;
  }
}

.header__menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 72px;
  padding: 6px 24px;
  background-color: #fff;
  border-radius: 28px;
}
@media screen and (max-width: 720px) {
  .header__menu {
    display: none;
  }
}

.header__sp-menuBtn {
  display: none;
}
@media screen and (max-width: 720px) {
  .header__sp-menuBtn {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
    z-index: 20;
  }
}

.header__sp-menuBar {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 3px;
  background-color: #fff;
  transition: transform 0.5s ease-in-out;
}

.header__sp-menuBar:nth-child(1) {
  width: 70%;
  transform: translateY(-8px);
}

.header__sp-menuBar:nth-child(2) {
  transform: translateY(8px);
}

.header__menuL-list {
  display: flex;
  gap: 48px;
}

.header__menuLink {
  position: relative;
  font-family: "Open Sans", sans-serif;
  color: #A1C4FD;
}

.header__menuLink::after {
  position: absolute;
  top: 50%;
  font: var(--fa-font-solid);
  transform: translateY(-44%);
  transition: transform 0.5s ease;
}

.header__menuLink > span {
  display: inline-block;
  transition: transform 0.5s ease;
}

.header__menuLink:hover::after {
  transition-delay: 0.3s;
}

.header__menuLink--arrowR::after {
  right: -1em;
  content: "\f054";
}

.header__menuLink--arrowR:hover::after {
  transform: translate(4px, -44%);
}

.header__menuLink--arrowR:hover > span {
  transform: scale(1.1) translateX(4px);
}

.header__menuLink--arrowB::after {
  right: calc(-1em - 8px);
  content: "\f078";
}

.header__menuLink--arrowB:hover::after {
  transform: translate(0, -20%);
}

.header__menuLink--arrowB:hover > span {
  transform: scale(1.1) translateY(4px);
}

.header__menuR {
  position: relative;
  padding: 6.5px 40px 6.5px 20px;
  background: linear-gradient(-90deg, #C2E9FB, #A1C4FD);
  border: 1px solid transparent;
  border-radius: 24px;
  overflow: hidden;
  transition: all 0.3s ease-in;
}

.header__menuR:hover {
  background: #fff;
  border: 1px solid #A1C4FD;
  color: #A1C4FD;
}

.header__menuLink--contact {
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1;
  color: #fff;
  transition: all 0.3s ease-in;
}

.header__menuR:hover .header__menuLink--contact {
  color: #A1C4FD;
  opacity: 1;
  transform: scale(1.1) translateX(4px);
}

.sp-menu {
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  transition: background 0.5s ease-in-out;
}
@media screen and (max-width: 720px) {
  .sp-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 10;
    background: linear-gradient(90deg, #C2E9FB, #A1C4FD);
    opacity: 0;
    transition: opacity 1s ease-in-out;
    overflow: hidden;
  }
}

.sp-menu__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.sp-menu__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.sp-menu__link {
  display: inline-block;
  font-family: "Open Sans";
  font-size: 3.6rem;
  font-weight: 300;
  color: #fff;
}
@media screen and (max-width: 720px) {
  .sp-menu__link {
    font-size: 2.4rem;
  }
}

.sp-menu__link--contact {
  position: relative;
  padding: 8px 24px;
  font-weight: 400;
  color: #A1C4FD;
  background-color: #fff;
  border-radius: 32.5px;
  box-sizing: border-box;
  background: linear-gradient(90deg, #C2E9FB, #A1C4FD);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sp-menu__link--contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: -1;
  border-radius: 32.5px;
}

.header.panelActive .header__siteLogo {
  z-index: 100;
}
.header.panelActive .header__sp-menuBar:nth-child(1) {
  width: 80%;
  transform: rotate(45deg) translateY(0);
}
.header.panelActive .header__sp-menuBar:nth-child(2) {
  width: 80%;
  transform: rotate(-45deg) translateY(0);
}
.header.panelActive .sp-menu {
  pointer-events: auto;
  opacity: 1;
}

.toTop__link {
  position: fixed;
  bottom: 3em;
  right: 4em;
  display: inline-block;
  width: 48px;
  height: 48px;
  color: #fff;
  text-align: center;
  background-color: #A1C4FD;
  border: 1px solid #fff;
  border-radius: 50%;
  opacity: 0;
  transform: translateY(100px);
  transition: transform 0.5s ease, opacity 0.5s ease;
  z-index: 10;
}
@media screen and (max-width: 720px) {
  .toTop__link {
    bottom: 1em;
    right: 1em;
  }
}

.toTop__link.fix {
  transform: translateY(0);
  opacity: 0.6;
}

/* ホバー可能な場合 */
@media (hover: hover) {
  .toTop__link:hover,
  .toTop__link.active {
    transform: translateY(-16px);
    opacity: 1;
  }
}
/* ホバー不可な場合 */
@media (hover: none) {
  .toTop__link.active {
    transform: translateY(-16px);
    opacity: 1;
  }
}
.toTop__link > i {
  line-height: 44px;
}

.footer__upper {
  background: linear-gradient(90deg, #C2E9FB, #A1C4FD);
}

.footer__under {
  background-color: #ededed;
}

.footer__inner {
  margin: 0 auto;
  padding: 8px;
  max-width: 1440px;
}

.footer__contentWrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.footer__logo > img {
  width: 190px;
}
@media screen and (max-width: 720px) {
  .footer__logo > img {
    width: 130px;
  }
}

.footer__copyright {
  text-align: center;
}

.mainVisual {
  position: relative;
  background: linear-gradient(45deg, #fff, #f5f5f5);
}

.mainVisual__inner {
  height: 800px;
}

.mainVisual__siteTitleWrap {
  position: absolute;
  top: 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 1;
}
@media screen and (max-width: 720px) {
  .mainVisual__siteTitleWrap {
    position: absolute;
    top: clamp(250px, 54vw, 320px);
  }
}

.mainVisual__siteTitle {
  font-size: 4.8rem;
}
@media screen and (max-width: 720px) {
  .mainVisual__siteTitle {
    font-size: 2.4rem;
  }
}

.mainVisual__siteTitle > span {
  display: block;
  margin-bottom: 8px;
  font-size: 2.4rem;
}
@media screen and (max-width: 720px) {
  .mainVisual__siteTitle > span {
    font-size: 1.4rem;
  }
}

.mainVisual__siteSubTitle {
  margin-top: 32px;
}
@media screen and (max-width: 720px) {
  .mainVisual__siteSubTitle {
    margin-top: 16px;
  }
}

.mainVisual__pageLink {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  background-color: #fff;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
}
@media screen and (max-width: 720px) {
  .mainVisual__pageLink {
    bottom: 42%;
  }
}

.pageLink__list {
  display: flex;
  gap: 48px;
  padding: 8px 54px 8px 32px;
  font-family: "Open Sans";
}
@media screen and (max-width: 720px) {
  .pageLink__list {
    gap: 30px;
    padding: 8px 32px 8px 16px;
  }
}

.pageLink__link {
  position: relative;
  padding-right: 1.5em;
}
@media screen and (max-width: 720px) {
  .pageLink__link {
    font-size: 1.4rem;
  }
}

.pageLink__link::after {
  content: "\f078";
  font: var(--fa-font-solid);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 720px) {
  .pageLink__link::after {
    right: calc(-1em - 4px);
  }
}

.pageLink__link:hover::after {
  transform: translateY(-20%);
}

.mainVisual.fix .mainVisual__pageLink {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  height: fit-content;
  background-color: #A1C4FD;
  z-index: 49;
  animation: fadeIn 1.5s ease;
}
@media screen and (max-width: 720px) {
  .mainVisual.fix .mainVisual__pageLink {
    top: 50px;
  }
}

@keyframes fadeIn {
  from {
    transform: translate(-50%, -16px);
    opacity: 0;
  }
  to {
    transform: translateY(-50%, 0);
    opacity: 1;
  }
}
.mainVisual.fix .pageLink__link {
  color: #fff;
}

.mainVisual__image {
  position: absolute;
}

.mainVisual__image--PC {
  left: 3%;
  bottom: 80px;
  width: 20vw;
  width: clamp(300px, 20vw, 400px);
  height: auto;
}
@media screen and (max-width: 720px) {
  .mainVisual__image--PC {
    width: clamp(200px, 50vw, 240px);
    top: 30px;
    left: -30px;
    bottom: unset;
  }
}
@media screen and (min-width: 721px) and (max-width: 1024px) {
  .mainVisual__image--PC {
    top: 340px;
    left: -60px;
    width: clamp(240px, 33vw, 340px);
    min-width: 240px;
  }
}

.mainVisual__image--desk {
  right: 3%;
  bottom: 0;
  width: clamp(300px, 22vw, 430px);
  height: auto;
}
@media screen and (max-width: 720px) {
  .mainVisual__image--desk {
    width: clamp(200px, 50vw, 320px);
  }
}

.mainVisual__image--light {
  right: 4%;
  bottom: 400px;
  width: 100px;
  transition: all 2s ease-in-out;
}
@media screen and (max-width: 720px) {
  .mainVisual__image--light {
    bottom: clamp(200px, 45vw, 350px);
    width: 16vw;
  }
}

.top-works {
  background: linear-gradient(90deg, #e8f8ff 1px, transparent 1px), linear-gradient(180deg, #e8f8ff 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 10px 10px;
}

.top-works .splide__slide {
  height: fit-content;
  max-width: 1080px;
}
.top-works .splide__list {
  height: auto;
}
.top-works .splide__slide > a {
  margin: 0 auto;
  opacity: 0.5;
  transition: transform 0.2s ease-in;
  transform: scale(0.9);
}
.top-works .splide__slide.is-active > a {
  opacity: 1;
  transform: scale(0.95);
}
@media screen and (max-width: 720px) {
  .top-works .splide__slide.is-active > a {
    transform: scale(0.95);
  }
}
.top-works .splide__pagination {
  bottom: -16px;
}
.top-works .splide__pagination__page {
  background-color: #d9d9d9;
  width: 10px;
  height: 10px;
  margin: 0 8px;
}
.top-works .splide__pagination__page.is-active {
  background-color: #A1C4FD;
  transform: scale(1.4);
}
.top-works .splide__arrow {
  opacity: 1;
  background-color: transparent;
  transition: all 0.3s ease;
}
.top-works .splide__arrow > i {
  font-size: 3.2rem;
  color: #A1C4FD;
  background-color: #fff;
  border-radius: 50%;
}
.top-works .splide__arrow--prev {
  left: 0;
}
.top-works .splide__arrow--prev:hover {
  transform: translate(-8px, -50%);
}
.top-works .splide__arrow--next {
  right: 0;
}
.top-works .splide__arrow--next:hover {
  transform: translate(8px, -50%);
}
.top-works .button:disabled::before {
  background-color: #ccc;
}
.top-works .top-works__btnWrap {
  margin-top: 84px;
}

.top-service {
  position: relative;
  overflow-x: clip;
  background: linear-gradient(45deg, #fff, #f5f5f5);
}

.top-service::before,
.top-service::after {
  position: absolute;
  width: 500px;
  height: 500px;
  z-index: 0;
}
@media screen and (max-width: 720px) {
  .top-service::before,
  .top-service::after {
    width: 300px;
    height: 300px;
  }
}

.top-service::before {
  content: "";
  display: block;
  top: -100px;
  right: -200px;
  background-color: #F6F6B2;
  border-radius: 56% 37% 40% 43%/53% 55% 39% 47%;
}
@media screen and (max-width: 720px) {
  .top-service::before {
    top: -60px;
    right: -140px;
  }
}

.top-service::after {
  content: "";
  display: block;
  bottom: -100px;
  left: -200px;
  background-color: #E5EFFF;
  border-radius: 56% 37% 40% 43%/53% 55% 39% 47%;
}
@media screen and (max-width: 720px) {
  .top-service::after {
    bottom: -40px;
    left: -140px;
  }
}

.top-service__itemWrap {
  position: relative;
  margin: 0 16px;
  z-index: 1;
}
@media screen and (max-width: 720px) {
  .top-service__itemWrap {
    margin: 0;
  }
}

.top-service__listItem {
  display: flex;
  align-items: center;
  gap: 36px;
  margin: 32px auto 0;
  padding: 16px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 6px 4px 0 0 #E5EFFF, 0 0 5px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
@media screen and (max-width: 720px) {
  .top-service__listItem {
    flex-direction: column;
    align-items: center;
    max-width: 500px;
  }
}

.top-service__listItem:nth-child(even) {
  flex-direction: row-reverse;
}
@media screen and (max-width: 720px) {
  .top-service__listItem:nth-child(even) {
    flex-direction: column;
  }
}

.top-service__itemImage > img {
  width: clamp(180px, 25vw, 250px);
  height: auto;
}

.top-service__textArea {
  flex: 1;
}

.top-service__itemTitle {
  font-size: 2.4rem;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 720px) {
  .top-service__itemTitle {
    text-align: center;
  }
}

.top-service__itemDesc {
  margin-top: 24px;
  padding: 16px;
  line-height: 1.5;
  background-color: #F1F4F9;
  border-radius: 5px;
}

.top-service__usedTool {
  position: relative;
  text-align: center;
  margin-top: 54px;
  z-index: 1;
}

.top-service__usedToolTitle {
  font-size: 2rem;
  font-weight: 400;
}

.top-service__toolList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.top-about {
  background: linear-gradient(90deg, #e8f8ff 1px, transparent 1px), linear-gradient(180deg, #e8f8ff 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 10px 10px;
}

.top-about__contentWrap {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin: 0 32px;
  overflow: hidden;
}
@media screen and (max-width: 720px) {
  .top-about__contentWrap {
    flex-direction: column;
    align-items: center;
    margin: 0;
  }
}

.top-about__image {
  width: clamp(160px, 24vw, 300px);
  height: auto;
  border-radius: 50%;
}

.top-about__image > img {
  width: 100%;
  height: auto;
}

.top-about__commentWrap {
  position: relative;
  flex: 1;
  padding: 24px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateX(50px);
  transition-delay: 0.5s;
  overflow: hidden;
}

.top-about__comment {
  margin-bottom: 1em;
  font-size: 1.4rem;
  line-height: 1.7;
}

.top-about__comment.animeTrigger {
  animation-delay: 2s;
}

.top-about__sns {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

.top-about__sns .c-sns__snsLink > i {
  font-size: 2.4rem;
  color: #333;
}

.top-contact {
  background: linear-gradient(45deg, #fff, #f5f5f5);
}

.top-contact__contentWrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 720px) {
  .top-contact__contentWrap {
    flex-direction: column;
    gap: 24px;
  }
}

.top-contact__image {
  flex-grow: 1;
  flex-shrink: 1;
  max-width: 200px;
  min-width: 150px;
  height: auto;
  overflow: hidden;
}

.top-contact__image > img {
  width: 100%;
  height: auto;
}

.top-contact__image--sp {
  transition-delay: 0.5s;
}
@media screen and (max-width: 720px) {
  .top-contact__image--sp {
    width: 140px;
  }
}

.top-contact__image--pc {
  transition-delay: 1s;
}

.top-contact__message {
  flex-shrink: 0;
  width: auto;
  max-width: 100%;
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  line-height: 1.75;
  text-align: center;
}
@media screen and (max-width: 720px) {
  .top-contact__message {
    font-size: 1.6rem;
  }
}

.page-archive {
  background: linear-gradient(90deg, #e8f8ff 1px, transparent 1px), linear-gradient(180deg, #e8f8ff 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 10px 10px;
  position: relative;
  z-index: 0;
}

.archiveList__inner {
  min-height: 100vh;
  transform: translateZ(0);
}

.archiveList__filterList {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin-bottom: 54px;
}
@media screen and (max-width: 720px) {
  .archiveList__filterList {
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 32px;
  }
}

.archiveList__filterBtn {
  transition: background-color 0.5s ease;
}

.archiveList__filterBtn--all {
  display: inline-block;
  margin: 0 auto;
  padding: 8px;
  font-weight: bold;
  color: #fff;
  background-color: #333;
  border: 2px solid #333;
  border-radius: 4px;
}

.archiveList__filterBtn.c-categoryTag--website {
  border: 2px solid #A1C4FD;
}

.archiveList__filterBtn.c-categoryTag--lp {
  border: 2px solid #F7B8B8;
}

.archiveList__filterBtn.c-categoryTag--banner {
  border: 2px solid #F9F871;
}

.archiveList__filterBtn--all:hover,
.archiveList__filterBtn--all.active {
  background-color: transparent;
  border: 2px solid #333;
  color: #333;
}

.archiveList__filterBtn.c-categoryTag--website:hover,
.archiveList__filterBtn.c-categoryTag--website.active {
  background-color: transparent;
  border: 2px solid #A1C4FD;
  color: #A1C4FD;
}

.archiveList__filterBtn.c-categoryTag--lp:hover,
.archiveList__filterBtn.c-categoryTag--lp.active {
  background-color: transparent;
  border: 2px solid #F7B8B8;
  color: #F7B8B8;
}

.archiveList__filterBtn.c-categoryTag--banner:hover,
.archiveList__filterBtn.c-categoryTag--banner.active {
  background-color: transparent;
  border: 2px solid #F9F871;
  color: #e8ac2c;
}

.archiveList__itemListWrap {
  width: 100%;
  max-width: 100vw;
}

.archiveList__itemList {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32px;
  transition: all 0.5s ease;
}
@media screen and (min-width: 601px) and (max-width: 800px) {
  .archiveList__itemList {
    gap: 16px;
  }
}
@media screen and (max-width: 600px) {
  .archiveList__itemList {
    gap: 8px;
  }
}

.archiveList__cardItem {
  display: block;
  flex-direction: column;
  justify-content: stretch;
  height: 100%;
  opacity: 1;
  transform: scale(1);
  transition-property: display, opacity, transform;
  transition-duration: 1s;
  width: calc(33.3333333333% - 22px);
}
@media screen and (min-width: 601px) and (max-width: 800px) {
  .archiveList__cardItem {
    width: calc(50% - 8px);
  }
}
@media screen and (max-width: 600px) {
  .archiveList__cardItem {
    width: calc(50% - 4px);
  }
}
@starting-style {
  .archiveList__cardItem {
    opacity: 0;
    transform: scale(0.8);
  }
}

.archiveList__cardItem.hidden {
  display: none;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition-property: display, opacity, transform;
  transition-duration: 1s;
}

.nav-links {
  margin-top: 48px;
  text-align: center;
  color: #333;
}

.nav-links .prev,
.nav-links .next {
  color: #A1C4FD;
}

.nav-links .prev::after,
.nav-links .next::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  width: 30px;
  height: 30px;
  transform: translateX(-50%, -50%);
  transform-origin: center;
  background-color: #A1C4FD;
  border-radius: 41% 59% 43% 57%/52% 30% 70% 48%;
  z-index: -1;
}

.nav-links .prev:hover,
.nav-links .next:hover {
  color: #fff;
  opacity: 1;
}

.nav-links .prev:hover::after,
.nav-links .next:hover::after {
  display: block;
}

.nav-links .prev:hover i {
  animation: toLeft 1.5s linear infinite;
}

@keyframes toLeft {
  0% {
    transform: translateX(-50%);
    opacity: 0;
  }
  25% {
    transform: translateX(-60%);
    opacity: 1;
  }
  50% {
    transform: translateX(-70%);
    opacity: 1;
  }
  75% {
    transform: translateX(-80%);
    opacity: 1;
  }
  100% {
    transform: translateX(-90%);
    opacity: 0;
  }
}
.nav-links .prev:hover::after {
  animation: rollToLeft 1.5s linear infinite;
}

@keyframes rollToLeft {
  0% {
    transform: translate(-50%, -50%) rotate(72deg);
    opacity: 0;
  }
  25% {
    transform: translate(-60%, -50%) rotate(144deg);
    opacity: 1;
  }
  50% {
    transform: translate(-70%, -50%) rotate(216deg);
    opacity: 1;
  }
  75% {
    transform: translate(-80%, -50%) rotate(288deg);
    opacity: 1;
  }
  100% {
    transform: translate(-90%, -50%) rotate(360deg);
    opacity: 0;
  }
}
.nav-links .next:hover i {
  animation: toRight 2s linear infinite;
}

@keyframes toRight {
  0% {
    transform: translateX(-50%);
    opacity: 0;
  }
  25% {
    transform: translateX(-40%);
    opacity: 1;
  }
  50% {
    transform: translateX(-30%);
    opacity: 1;
  }
  75% {
    transform: translateX(-20%);
    opacity: 1;
  }
  100% {
    transform: translateX(-10%);
    opacity: 0;
  }
}
.nav-links .next:hover::after {
  animation: rollToRight 2s linear infinite;
}

@keyframes rollToRight {
  0% {
    transform: translate(-70%, -50%) rotate(72deg);
    opacity: 0;
  }
  25% {
    transform: translate(-60%, -50%) rotate(144deg);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) rotate(216deg);
    opacity: 1;
  }
  75% {
    transform: translate(-45%, -50%) rotate(288deg);
    opacity: 1;
  }
  100% {
    transform: translate(-40%, -50%) rotate(360deg);
    opacity: 0;
  }
}
.page-numbers {
  margin: 0 16px;
  position: relative;
  font-size: 2rem;
  font-family: "Open Sans";
  transition: all 1.5s ease;
}
@media screen and (max-width: 600px) {
  .page-numbers {
    margin: 0 8px;
  }
}

.page-numbers:hover {
  font-weight: bold;
  color: #A1C4FD;
  opacity: 1;
}

.page-numbers.current {
  color: #fff;
  font-weight: 500;
  background-color: #A1C4FD;
}

.page-numbers::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  display: none;
  width: 30px;
  height: 30px;
  transform: translateX(-50%);
  background-color: #A1C4FD;
  border-radius: 41% 59% 43% 57%/52% 30% 70% 48%;
  z-index: -1;
}

.page-numbers.current::after {
  display: block;
}

.page-works {
  background: linear-gradient(90deg, #e8f8ff 1px, transparent 1px), linear-gradient(180deg, #e8f8ff 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 10px 10px;
}

.worksHead {
  text-align: center;
}

.worksHead__workTitle {
  margin-top: 8px;
  font-size: 3.6rem;
}

.worksHead__category {
  margin-top: 16px;
}

.worksImage {
  text-align: center;
  max-width: 800px;
  margin: 16px auto 0;
}

.worksImage img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 600px;
}

.worksInfo {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  margin-top: 54px;
}
@media screen and (max-width: 720px) {
  .worksInfo {
    flex-direction: column;
    align-items: center;
  }
}

.worksInfo__dataListWrap {
  width: 48%;
}
@media screen and (max-width: 720px) {
  .worksInfo__dataListWrap {
    width: 100%;
    max-width: 500px;
  }
}

.worksInfo__dateList {
  display: flex;
  margin-top: 4px;
}

.worksInfo__dateList--link dd {
  color: #A1C4FD;
  font-weight: 500;
}

.worksInfo__dateList--link .fa-up-right-from-square {
  margin-left: 4px;
}

.worksInfo__dateTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33%;
  font-size: 1.8rem;
  font-weight: 500;
  color: #fff;
  background-color: #A1C4FD;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  padding: 8px 0;
  vertical-align: middle;
  text-align: center;
}

.worksInfo__dateDesc {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 4px;
  padding: 8px 16px;
  background-color: #fff;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
}

.worksInfo__comment {
  width: 48%;
  max-width: 500px;
  padding: 16px;
  background-color: #f5f5f5;
  border-radius: 8px;
}
@media screen and (max-width: 720px) {
  .worksInfo__comment {
    width: 100%;
  }
}

.worksInfo__comment p {
  line-height: 1.6;
}

.worksInfo__comment ul {
  margin-top: 16px;
  padding: 8px;
  background-color: #fff;
  border-radius: 8px;
}

.worksInfo__comment li:not(:first-child) {
  font-size: 1.4rem;
  margin-top: 8px;
}

.articlePager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 54px;
}

.articlePager__link {
  display: inline-block;
  position: relative;
  font-family: "Open Sans";
  font-size: 1.8rem;
  color: #A1C4FD;
  transition: transform 0.5s ease;
}

.articlePager__link--prev {
  margin-left: 1em;
  padding-left: 1em;
}

.articlePager__link--prev:hover {
  opacity: 1;
  transform: translateX(-8px);
}

.articlePager__link--next {
  margin-right: 1em;
  padding-right: 1em;
}

.articlePager__link--next:hover {
  opacity: 1;
  transform: translateX(8px);
}

.articlePager__link::before {
  position: absolute;
  font: var(--fa-font-solid);
  font-size: 1.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: #A1C4FD;
}

.articlePager__link--prev::before {
  content: "\f053";
  left: 0;
}

.articlePager__link--next::before {
  content: "\f054";
  right: 0;
}

/* ポップアップ画像のタイトルを非表示 */
.fancybox-title-over #fancybox-title {
  display: none;
}

.service__list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 64px;
  margin: 0 auto;
}
@media screen and (max-width: 720px) {
  .service__list {
    gap: 32px;
  }
}

.service__link {
  position: relative;
  display: inline-block;
  width: 102px;
  padding-bottom: 8px;
  font-family: "Open Sans";
  font-size: 2.4rem;
  text-align: center;
}
@media screen and (max-width: 720px) {
  .service__link {
    width: 72px;
    padding-bottom: 0;
    font-size: 1.6rem;
  }
}

.service__link::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background-color: #A1C4FD;
  transform: scale(0, 1);
  transform-origin: 0%;
  transition: transform 0.5s ease;
}
@media screen and (max-width: 720px) {
  .service__link::after {
    height: 4px;
  }
}

.service__link.active::after {
  transform: scale(1, 1);
}

.service__listItem:nth-child(1) .service__link::after {
  background-color: #A1C4FD;
}

.service__listItem:nth-child(2) .service__link::after {
  background-color: #F7B8B8;
}

.service__listItem:nth-child(3) .service__link::after {
  background-color: #F9F871;
}

.service__section {
  display: none;
  position: relative;
  margin-top: 112px;
  overflow-x: clip;
}
@media screen and (max-width: 720px) {
  .service__section {
    margin-top: 54px;
  }
}

.service__section--lp,
.service__section--banner {
  display: none;
}

.service__section::after {
  content: "";
  position: absolute;
  background-size: contain;
  display: block;
  height: 100%;
  z-index: -1;
}

.service__section--website::after {
  background-image: url(../img/service__pc.webp);
  top: 0%;
  right: -10%;
  width: 55%;
}
@media screen and (max-width: 720px) {
  .service__section--website::after {
    top: 0%;
    right: -20%;
    width: 60%;
  }
}

.service__section--lp::after {
  background-image: url(../img/service__lp.webp);
  top: 8%;
  left: 5%;
  width: 30%;
  max-width: 280px;
}
@media screen and (max-width: 720px) {
  .service__section--lp::after {
    top: 15%;
    left: 0;
    width: 30%;
    min-width: 120px;
  }
}

.service__section--banner::after {
  background-image: url(../img/service__bannerWorks.webp);
  top: -10%;
  right: -10%;
  width: 60%;
  min-width: 400px;
}
@media screen and (max-width: 720px) {
  .service__section--banner::after {
    top: -6%;
    right: -20%;
    width: 60%;
  }
}

.svSection__title {
  position: relative;
  font-size: 3.6rem;
  letter-spacing: 0.1em;
  z-index: 0;
}
@media screen and (max-width: 720px) {
  .svSection__title {
    font-size: 2.4rem;
    letter-spacing: 0.05em;
  }
}

.svSection__title::before {
  position: absolute;
  bottom: -12px;
  left: 0;
  font-size: 14.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #f5f5f5;
  opacity: 0;
  z-index: -1;
}
@media screen and (max-width: 720px) {
  .svSection__title::before {
    bottom: 0;
    font-size: clamp(6.2rem, 15vw, 7.2rem);
    z-index: 0;
  }
}

.svSection__title--website::before {
  content: "WEBSITE";
}

.svSection__title--lp::before {
  content: "LandingPage";
  font-size: clamp(10.2rem, 14vw, 14.2rem);
}
@media screen and (max-width: 720px) {
  .svSection__title--lp::before {
    font-size: clamp(4.2rem, 13vw, 7.2rem);
  }
}

.svSection__title--banner::before {
  content: "BANNER";
}

.svSection__title::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 1px;
  height: 20px;
  background-color: #E5EFFF;
  z-index: -1;
  opacity: 0;
  transform: scale(0, 1);
  transform-origin: 0%;
  animation: scaleInLtoR 1.5s 0.5s ease-in-out forwards;
}
@keyframes scaleInLtoR {
  0% {
    transform: scale(0, 1);
    width: 1px;
  }
  100% {
    transform: scale(1, 1);
    width: 100%;
  }
}
@media screen and (max-width: 720px) {
  .svSection__title::after {
    bottom: -6px;
    height: 10px;
  }
}

.svSection__title--website::after {
  background-color: #E5EFFF;
}

.svSection__title--lp::after {
  background-color: #FFF2F2;
}

.svSection__title--banner::after {
  background-color: #F6F6B2;
}

.svSection__contentWrap {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 32px;
  max-width: 800px;
  margin-top: 54px;
}
@media (max-width: 560px) {
  .svSection__contentWrap {
    margin-top: 32px;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 16px;
  }
}

.svSection__contentWrap--lp {
  flex-direction: row-reverse;
  margin-left: auto;
}
@media (max-width: 560px) {
  .svSection__contentWrap--lp {
    flex-direction: column-reverse;
    align-items: flex-end;
  }
}

.svSection__price {
  display: flex;
  flex-direction: column;
  width: 60%;
  min-height: 360px;
  padding: 24px;
  background-color: #f5f5f5;
}
@media screen and (max-width: 720px) {
  .svSection__price {
    width: 90%;
    max-width: 304px;
    min-height: fit-content;
    padding: 16px 12px;
    min-height: 240px;
  }
}
@media (max-width: 560px) {
  .svSection__price {
    margin-left: auto;
  }
}
@media (min-width: 560px) and (max-width: 720px) {
  .svSection__price {
    width: 48%;
  }
}

@media (max-width: 560px) {
  .svSection__price--lp {
    margin-left: 0;
    margin-right: auto;
  }
}

.svSection__priceContentWrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
}

.svSection__priceTitle {
  font-size: 2rem;
  padding-bottom: 8px;
  border-bottom: 1px solid #d9d9d9;
}
@media screen and (max-width: 720px) {
  .svSection__priceTitle {
    font-size: 1.6rem;
  }
}

.svSection__priceDefList {
  display: flex;
  gap: 2em;
  margin-top: 1em;
}
@media screen and (max-width: 720px) {
  .svSection__priceDefList {
    font-size: 1.2rem;
  }
}

.svSection__priceDataTitle {
  width: 60%;
  text-align: left;
}

.svSection__priceDataTitle > span {
  margin-left: 8px;
  font-size: 1.2rem;
}
@media screen and (max-width: 720px) {
  .svSection__priceDataTitle > span {
    font-size: 1rem;
  }
}

.svSection__priceDataDesc {
  flex: 1;
}
@media screen and (max-width: 720px) {
  .svSection__priceDataDesc {
    font-size: 1.4rem;
  }
}

.svSection__priceDataDesc > span {
  font-size: 1.2rem;
}
@media screen and (max-width: 720px) {
  .svSection__priceDataDesc > span {
    font-size: 1rem;
  }
}

.svSection__priceNoteList {
  margin-top: auto;
  padding: 8px;
  background-color: #fff;
  border-radius: 4px;
}

.svSection__priceNoteItem {
  margin-top: 4px;
  font-size: 1.2rem;
  line-height: 1.5;
}
@media screen and (max-width: 720px) {
  .svSection__priceNoteItem {
    font-size: 1rem;
  }
}

.svSection__commentWrap {
  width: 50%;
  min-height: 260px;
  padding: 24px;
  opacity: 0;
  transform: translateY(32px);
}
@media screen and (max-width: 720px) {
  .svSection__commentWrap {
    width: 80%;
    max-width: 256px;
    min-height: fit-content;
    padding: 16px;
  }
}

.svSection__commentWrap--website {
  background-color: #E5EFFF;
}

.svSection__commentWrap--lp {
  background-color: #FFF2F2;
  min-height: 180px;
}

.svSection__commentWrap--banner {
  background-color: #F6F6B2;
}

.svSection__comment {
  font-size: 1.4rem;
  line-height: 1.7;
}
@media screen and (max-width: 720px) {
  .svSection__comment {
    font-size: 1.2rem;
  }
}

.service__section.active {
  display: block;
}
.service__section.active .svSection__title .char {
  display: inline-block;
  opacity: 0;
  animation: slideInUtoB 0.5s ease forwards;
}
@keyframes slideInUtoB {
  0% {
    opacity: 0;
    transform: translateY(-16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.service__section.active .svSection__title .char-2 {
  animation-delay: 0.1s;
}
.service__section.active .svSection__title .char-3 {
  animation-delay: 0.2s;
}
.service__section.active .svSection__title .char-4 {
  animation-delay: 0.3s;
}
.service__section.active .svSection__title .char-5 {
  animation-delay: 0.4s;
}
.service__section.active .svSection__title .char-6 {
  animation-delay: 0.5s;
}
.service__section.active .svSection__title .char-7 {
  animation-delay: 0.6s;
}
.service__section.active .svSection__title .char-8 {
  animation-delay: 0.7s;
}
.service__section.active .svSection__title .char-9 {
  animation-delay: 0.8s;
}
.service__section.active .svSection__title .char-10 {
  animation-delay: 0.9s;
}
.service__section.active .svSection__title .char-11 {
  animation-delay: 1s;
}
.service__section.active .svSection__title::before {
  animation: slideInUtoB 0.5s ease forwards;
  animation-delay: 0.5s;
}
@keyframes slideInUtoB {
  0% {
    opacity: 0;
    transform: translateY(-16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.service__section.active .svSection__title::after {
  transform: scale(1, 1);
  opacity: 1;
}
.service__section.active .svSection__price {
  animation: slideInLBtoRT 1s ease forwards;
}
@keyframes slideInLBtoRT {
  0% {
    opacity: 0;
    transform: translate(-50px, 50px);
  }
  100% {
    opacity: 0.8;
    transform: translate(0);
  }
}
.service__section.active .svSection__commentWrap {
  animation: slideInBtoT 1s 0.3s ease forwards;
}
@keyframes slideInBtoT {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 0.8;
    transform: translateY(0);
  }
}
.service__section.active .service__section--lp .svSection__price {
  animation: slideInRBtoLT 1s ease forwards;
}
@keyframes slideInLBtoRT {
  0% {
    opacity: 0;
    transform: translate(50px, 50px);
  }
  100% {
    opacity: 0.8;
    transform: translate(0);
  }
}

.service__section.active::after {
  animation: slideInRtoL 1s ease forwards;
}
@keyframes slideInRtoL {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.service__section--lp.active::after {
  animation: slideInLtoR 1s ease forwards;
}
@keyframes slideInLtoR {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.page-contact {
  background: radial-gradient(circle, #e8f8ff 2px, transparent 2px);
  background-size: 24px 24px;
}

.contact__messageWrap {
  margin: 56px auto 0;
  text-align: center;
}

.contact__message {
  display: inline-block;
  padding: 80px 40px;
  line-height: 1.6;
  background-color: #f5f5f5;
  border-radius: 57% 43% 49% 51%/52% 56% 44% 48%;
}
@media screen and (max-width: 720px) {
  .contact__message {
    padding: 56px 16px;
    font-size: 1.4rem;
  }
}

.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 700px;
  margin: 96px auto 0;
}
@media screen and (max-width: 720px) {
  .wpcf7-form {
    margin: 40px auto 0;
    flex-direction: column;
  }
}

.wpcf7__label {
  display: flex;
  align-items: center;
  gap: 24px;
}
@media screen and (max-width: 720px) {
  .wpcf7__label {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

.wpcf7__labelArea {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  width: 176px;
}
@media screen and (max-width: 720px) {
  .wpcf7__labelArea {
    justify-content: flex-start;
  }
}

.wpcf7__labelName {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 2.4rem;
}
@media screen and (max-width: 720px) {
  .wpcf7__labelName {
    font-size: 1.6rem;
    text-align: left;
  }
}

.wpcf7__required {
  display: inline-block;
  font-size: 1.6rem;
  padding: 2px 8px;
  background-color: #F9F871;
}
@media screen and (max-width: 720px) {
  .wpcf7__required {
    font-size: 1.2rem;
  }
}

.wpcf7__label--textbox .wpcf7__labelArea {
  align-items: flex-start;
  margin-top: 4px;
}

.wpcf7-form-control-wrap {
  flex: 1;
  max-width: 400px;
}
@media screen and (max-width: 720px) {
  .wpcf7-form-control-wrap {
    width: 100%;
  }
}

.wpcf7__label input,
.wpcf7__label select,
.wpcf7__label textarea {
  flex: 1;
  max-width: 400px;
  width: 100%;
  padding: 8px;
  height: 40px;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}
@media screen and (max-width: 720px) {
  .wpcf7__label input,
  .wpcf7__label select,
  .wpcf7__label textarea {
    width: 100%;
  }
}

.wpcf7 select[name=select-449] {
  min-width: 200px !important;
}

.wpcf7__label select option {
  color: #333;
}

.wpc7__label--select {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.wpc7__label--select::after {
  content: "\f107";
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
  font: var(--fa-font-solid);
  font-size: 1.6rem;
  color: #333;
  pointer-events: none;
}

.wpcf7__label--detail {
  align-items: flex-start;
}

.wpcf7__label--detail textarea {
  height: 160px;
}

.wpcf7__label--detail .wpcf7__labelArea {
  margin-top: 8px;
}

.wpcf7-not-valid-tip {
  position: absolute;
  bottom: -1.5em;
  left: 0;
}

.wpcf7__consent {
  margin: 32px auto;
  text-align: center;
}
@media screen and (max-width: 720px) {
  .wpcf7__consent {
    font-size: 1.4rem;
  }
}

.wpcf7__consent .wpcf7-list-item {
  margin: 0;
}

.wpcf7__btn {
  position: relative;
  display: inline-block;
  margin: 0 auto;
}

.wpcf7__btn.c-btn::after {
  margin-top: 0;
}

.wpcf7__btn input {
  color: #fff;
  transition: color 0.5s ease;
}

.wpcf7__btn:hover input {
  color: #A1C4FD;
}

.wpcf7__btn--submit {
  cursor: pointer;
}

.wpcf7-spinner {
  position: absolute !important;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

.page-thanks {
  background: radial-gradient(circle, #e8f8ff 2px, transparent 2px);
  background-size: 24px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.thanks__messageWrap {
  margin-top: 96px;
}
@media screen and (max-width: 720px) {
  .thanks__messageWrap {
    margin-top: 64px;
  }
}

.thanks__title {
  font-size: 3.6rem;
  text-align: center;
}
@media screen and (max-width: 720px) {
  .thanks__title {
    font-size: 2.4rem;
  }
}

.thanks__btnWrap {
  margin-top: 96px;
  text-align: center;
}
@media screen and (max-width: 720px) {
  .thanks__btnWrap {
    margin-top: 64px;
  }
}

.thanks__button.c-btn::after {
  margin-top: 0;
}

.wpcf7-form.sent .wpcf7-response-output {
  display: none;
}/*# sourceMappingURL=style.css.map */