@charset "utf-8";

.first-section{
  padding-top: calc(var(--header-height) + 120px);
}

@media (max-width: 1024px) {
  .first-section {
    padding-top: calc(var(--header-height) + 100px);
  }
}

@media (max-width: 798px) {
  .first-section {
    padding-top: calc(var(--header-height) + 80px);
  }
}

@media (max-width: 560px) {
  .first-section {
    padding-top: calc(var(--header-height) + 60px);
  }
}

@media (max-width: 375px) {
  .first-section {
    padding-top: calc(var(--header-height) + 40px);
  }
}

.page-subtitle-wrapper {
  margin-bottom: 32px;
}


/* TOOLSページ */

.tools-lead {
  font-size: 0.9375rem;
  color: var(--text-heading);
  margin-bottom: 72px;
}

@media (max-width: 1100px) {
  .tools-lead {
    margin-bottom: 56px;
  }
}

@media (max-width: 926px) {
  .tools-lead {
    margin-bottom: 32px;
  }
}

@media (max-width: 560px) {
  .tools-lead {
    font-size: 0.875rem;
  }
}

.tools-container {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: repeat(2,1fr);
  gap: 120px 100px;
}

@media (min-width: 1280px) {
  .tools-container {
    gap: 120px;
  }
}

@media (min-width: 1440px) {
  .tools-container {
    gap: 120px 140px;
  }
}

@media (max-width: 1100px) {
  .tools-container {
    gap: 100px 40px;
  }
}

@media (max-width: 926px) {
  .tools-container {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4,1fr);
    gap: 56px;
    width: 80%;
    min-width: 424px;
    margin-inline: auto;
  }
}

@media (max-width: 560px) {
  .tools-container {
    gap: 48px;
    min-width: auto;
    width: 100%;
  }
}

@media (max-width: 494px) {
  .tools-container {
    gap: 40px;
  }
}

.coding-tools-container {
  position: relative;
}

.design-tools-container {
  position: relative;
  margin-bottom: 264px;
}

@media (max-width: 1024px) {
  .design-tools-container {
    margin-bottom: 232px;
  }
}

@media (max-width: 798px) {
  .design-tools-container {
    margin-bottom: 200px;
  }
}

@media (max-width: 560px) {
  .design-tools-container {
    margin-bottom: 168px;
  }
}

@media (max-width: 375px) {
  .design-tools-container {
    margin-bottom: 136px;
  }
}


.tool-bg-decoration {
  display: block;
  position: absolute;
  opacity: 0.15;
  width: 85.9375%;
  top: -16.5rem;
  right: -13.5rem;
  z-index: -1;
}

@media (max-width: 926px) {
  .tool-bg-decoration {
    width: 90vw;
    top: -14rem;
    right: -16rem;
    transform: rotate(-10deg);
  }
}

@media (max-width: 732px) {
  .tool-bg-decoration {
    width: 80vw;
    right: -10rem;
  }
}

@media (max-width: 588px) {
  .tool-bg-decoration {
    width: 70vw;
    right: -6rem;
  }
}

@media (max-width: 494px) {
  .tool-bg-decoration {
    right: -2rem;
  }
}

.tool-card {
  padding: 2.5rem 3rem 2rem 3rem;
  border-radius: 40px;
}

@media (min-width: 1265px) {
  .tool-card {
    padding: 2.5rem 4rem 2rem 4rem;
  }
}

@media (min-width: 1440px) {
  .tool-card {
    padding: 2.5rem 5rem 2rem 5rem;
  }
}

@media (max-width: 1165px) {
  .tool-card {
    padding: 2.5rem 2.5rem 2rem 2.5rem;
    border-radius: 36px;
  }
}

@media (max-width: 1124px) {
  .tool-card {
    padding: 2rem 2rem 1.5rem 2rem;
    border-radius: 32px;
  }
}

@media (max-width: 926px) {
  .tool-card {
    padding: 2rem 2.5rem;
    width: 424px;
  }
}

@media (max-width: 560px) {
  .tool-card {
    padding: 1.75rem 2rem;
    width: 410px;
    border-radius: 24px;
  }
}

@media (max-width: 494px) {
  .tool-card {
    padding: 1.75rem 0.75rem 1.5rem 0.75rem;
    width: 100%;
    border-radius: 16px;
  }
}

.tool-card:nth-child(odd) {
  transform: translateY(80px);
}

@media (max-width: 1100px) {
  .tool-card:nth-child(odd) {
    transform: translateY(48px);
  }
}

@media (max-width: 926px) {
  .tool-card:nth-child(odd) {
    justify-self: end;
    transform: none;  
  }

  .tool-card:nth-child(even) {
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .tool-card:nth-child(odd),
  .tool-card:nth-child(even) {
    justify-self: center;
  }
}

.tool-card-inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (max-width: 464px) {
  .tool-card-inner {
    gap: 1.125rem;
  }
}

.coding-card {
  background-color: var(--bg-main);
  border: 2px solid var(--text-muted);
  box-shadow: 0 15px 40px var(--shadow-coding-card);
}

@media (max-width: 1100px) {
  .coding-card {
    box-shadow: 0 10px 32px var(--shadow-coding-card);
  }
}

@media (max-width: 560px) {
  .coding-card {
    box-shadow: 0 6px 24px var(--shadow-coding-card);
  }
}

@media (max-width: 494px) {
  .coding-card {
    border: none;
    border-top: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
  }
}

.design-card {
  background-color: var(--bg-sub);
  border: 2px solid var(--text-heading);
  box-shadow: 0 15px 40px var(--shadow-design-card);
}

@media (max-width: 1100px) {
  .design-card {
    box-shadow: 0 10px 32px var(--shadow-design-card);
  }
}

@media (max-width: 560px) {
  .design-card {
    box-shadow: 0 6px 24px var(--shadow-design-card);
  }
}

@media (max-width: 494px) {
  .design-card {
    border: none;
    border-top: 2px solid var(--text-heading);
    border-bottom: 2px solid var(--text-heading);
  }
}

.tool-name {
  font-family: var(--font-en);
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--text-heading);
}

@media (max-width: 798px) {
  .tool-name {
    font-size: clamp(1.5rem, 1.278rem + 0.946vw, 1.75rem);
  }
}

.en-tool-item {
  font-family: var(--font-en);
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.tool-description-container {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

@media (max-width: 464px) {
  .tool-description-container {
    gap: 0.5rem;
  }
}

.tool-description {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.2;
  color: var(--text-heading);
}

@media (max-width: 560px) {
  .tool-description {
    font-size: 0.8125rem;
  }
}

.tools-decoration {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
}

.p-paw-transition.tools-paw {
  margin-top: 200px;
}

@media (max-width: 1100px) {
  .p-paw-transition.tools-paw {
    margin-top: 168px;
  }
}

@media (max-width: 926px) {
  .p-paw-transition.tools-paw {
    margin-top: 120px;
  }
}

@media (max-width: 798px) {
  .p-paw-transition.tools-paw {
    margin-top: 100px;
  }
}

@media (max-width: 375px) {
  .p-paw-transition.tools-paw {
    margin-top: 80px;
  }
}



/* CONTACTページ */

.contact-inner,
.form-thanks-inner {
  margin-inline: auto;
  text-align: center;
}

.contact-lead {
  font-weight: var(--weight-medium);
  margin-bottom: 2rem;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
}

.contact-lead br {
  display: none;
}

@media (max-width: 798px) {
  .contact-lead {
    font-size: clamp(1.125rem, 0.793rem + 1.418vw, 1.5rem);
  }
}

@media (max-width: 560px) {
  .contact-lead.jp-sub-heading {
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }

  .contact-lead br {
    display: block;
  }
}


.contact-message {
  letter-spacing: 0.1em;
}

@media (max-width: 813px) {
  .contact-message {
    width: 90%;
    margin-inline: auto;
    line-height: 1.6;
  }

  .contact-message br {
    display: none;
  }
}

@media (max-width: 560px) {
  .contact-message {
    letter-spacing: 0.08em;
    font-size: 0.8125rem;
  }
}

@media (max-width: 375px) {
  .contact-message {
    width: 95%;
  }
}

.contact-heartdog {
  margin: 2.5rem auto;
  width: 7.03125%;
  min-width: 65px;
}

@media (max-width: 1024px) {
  .contact-heartdog {
    margin: 2.25rem auto;
  }
}

@media (max-width: 798px) {
  .contact-heartdog {
    margin: 2rem auto;
  }
}

@media (max-width: 560px) {
  .contact-heartdog {
    margin: 2rem auto 1.75rem;
  }
}


.contact-form-wrapper {
  padding-top: 80px;
  margin-top: 80px;
  border-radius: 80px 80px 0 0;
  background-color: var(--bg-sub);
}

@media (max-width: 1024px) {
  .contact-form-wrapper {
    padding-top: 72px;
    margin-top: 72px;
    border-radius: 48px 48px 0 0;
  }
}

@media (max-width: 798px) {
  .contact-form-wrapper {
    padding-top: 56px;
    margin-top: 56px;
    border-radius: 40px 40px 0 0;
  }
}

@media (max-width: 560px) {
  .contact-form-wrapper {
    padding-top: 48px;
    margin-top: 48px;
    border-radius: 32px 32px 0 0;
  }
}

@media (max-width: 375px) {
  .contact-form-wrapper {
    padding-top: 32px;
    margin-top: 32px;
    border-radius: 24px 24px 0 0;
  }
}

.contact-form {
  width: 700px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

@media (max-width: 798px) {
  .contact-form {
    width: 480px;
  }
}

@media (max-width: 560px) {
  .contact-form {
    width: 80%;
    gap: 2rem;
  }
}

@media (max-width: 375px) {
  .contact-form {
    width: 85%;
  }
}

.contact-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  }

@media (max-width: 798px) {
  .form-group {
    gap: 0.5rem;
  }
}

.c-item-heading {
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
}

.field-style {
  width: 100%;
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.2;
  border-radius: 12px;
  border: 2px solid var(--bg-element);
  background-color: var(--white);
}

.field-style:focus {
  border: 2px solid var(--text-muted);
}

@media (max-width: 560px) {
  .field-style {
    padding: 0.875rem;
  }
}

.form-note {
  font-size: 0.75rem;
  font-weight: var(--weight-light);
  line-height: 1.4;
  letter-spacing: 0.1em;
}

@media (max-width: 798px) {
  .form-note br {
    display: none;
  }
}

::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

#user-message {
  height: 160px;
}

.submit-btn-container {
  width: 34.2857143%;
  min-width: 200px;
  margin-inline: auto;
}

@media (max-width: 560px) {
  .submit-btn-container {
    min-width: auto;
    width: 180px;
  }
}

.submit-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 100%;
}

.submit-btn img {
  transition: opacity 0.4s ease;
}

.send-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.submit-btn:hover .send-normal {
  opacity: 0;
}

.submit-btn:hover .send-hover {
  opacity: 1;
}

@media (max-width: 1024px) {
  .send-normal,
  .submit-btn:hover .send-normal {
    opacity: 0;
  }
  
  .send-hover,
  .submit-btn:hover .send-hover {
    opacity: 1;
  }
}

.contact-footer {
  padding-top: 24px;
  background-color: var(--bg-sub);
}




/* WORKS　webサイト制作詳細ページ */

@media (max-width: 560px) {
  .production-title-container .u-mb-large {
    margin-bottom: 40px;
  }
}

@media (max-width: 375px) {
  .production-title-container .u-mb-large {
    margin-bottom: 32px;
  }
}


.production-category {
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.external-link-icon {
  display: inline-block;
  width: 1.75rem;
  margin-left: 1.5rem;
}

@media (max-width: 798px) {
  .external-link-icon {
    width: 1.5rem;
    margin-left: 1rem;
  }
}

@media (max-width: 560px) {
  .external-link-icon {
    display: block;
    margin-top: 0.5rem;
    margin-left: 0.25rem;
  }
}

@media (max-width: 375px) {
  .external-link-icon {
    width: 1.25rem;
  }
}

.external-link {
  display: inline-block;
}

.production-title {
  font-family: var(--font-en);
  font-size: clamp(4.25rem, 2.594rem + 3.32vw, 5.25rem);
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: var(--text-heading);
  margin-left: -0.3rem;
}

@media (max-width: 798px) {
  .production-title {
    font-size: clamp(2.5rem, 0.949rem + 6.619vw, 4.25rem);
    margin-left: -0.2rem;
  }
}

@media (max-width: 440px) {
  .production-title {
    margin-left: -0.1rem;
  }
}

.production-title.is-jp {
  font-family: var(--font-jp);
  font-size: clamp(3.5rem, 1.844rem + 3.32vw, 4.5rem);
  font-weight: var(--weight-regular);
  letter-spacing: 0.02em;
  margin-left: 0;
}

@media (max-width: 798px) {
  .production-title.is-jp {
    font-size: clamp(2.25rem, 1.142rem + 4.728vw, 3.5rem);
  }
}


/* 1. link-iconのバウンド */
@keyframes icon-emphasized-bounce {
  0% {
    transform: translateY(0) scale(1);
  }

  30% {
    transform: translateY(-10px) scale(1.1);
  }

  50% {
    transform: translateY(0) scale(1.1);
  }

  70% {
    transform: translateY(-3px) scale(1.1);
  }

  100% {
    transform: translateY(0) scale(1.1);
  }
}

.external-link:hover .external-link-icon img {
  animation: icon-emphasized-bounce 0.6s ease forwards;
}

.external-link-icon img {
  transition: transform 0.3s ease;
}

.website-mv,
.banner-mv {
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .website-mv,
  .banner-mv {
    height: auto;
    aspect-ratio: 16/9;
  }
}

@media (max-width: 798px) {
  .website-mv {
    height: auto;
    aspect-ratio: 4/3;
  }
}

.website-mv img,
.banner-mv img {
  will-change: transform, border-radius;
}

@media (min-width: 561px) {
  .website-mv img,
  .banner-mv img {
    transform: scale(0.9);
    border-radius: 32px;
  }
}

@media (max-width: 560px) {

  .website-mv img,
  .banner-mv img {
    transform: scale(1);
    border-radius: 0;
  }
}

.production-summary {
  font-size: 1rem;
}

@media (max-width: 1024px) {
  .production-summary {
    font-size: clamp(0.875rem, 0.803rem + 0.308vw, 1rem);
  }
}

.mockup-and-data {
  width: 90%;
  display: flex;
  align-items: center;
}

@media (max-width: 1024px) {
  .mockup-and-data {
    width: 92%;
  }
}

@media (max-width: 798px) {
  .mockup-and-data {
    width: 100%;
    margin-inline: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }
}

.another-mockup,
.banner-another-mockup {
  width: 100%;
}

.another-mockup img,
.banner-another-mockup img {
  height: auto;
}

@media (max-width: 560px) {
  .another-mockup {
    aspect-ratio: 4/3;
  }

  .banner-another-mockup {
    aspect-ratio: 7/4;
  }

  .another-mockup img,
  .banner-another-mockup img {
    height: 100%;
  }
}


.project-data-container {
  font-family: var(--font-en);
  white-space: nowrap;
}

@media (max-width: 798px) {
  .project-data-container {
    width: 85%;
    margin-inline: auto;
  }
}

@media (max-width: 560px) {
  .project-data-container {
    width: 100%;
    padding-inline: 32px;
  }
}

@media (max-width: 440px) {
  .project-data-container {
    padding-inline: 20px;
  }
}

.project-data-title {
  margin-bottom: 1rem;
  font-size: 1.125rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  color: var(--text-heading);
}

.project-data-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

.design-process {
  margin-bottom: 168px;
}

@media (max-width: 560px) {
  .design-process {
    margin-bottom: 140px;
  }
}

.process-wrapper {
  display: flex;
  flex-direction: column;
  gap: 120px;
}

@media (max-width: 798px) {
  .process-wrapper {
    gap: 100px;
  }
}

.process-container {
  display: flex;
  gap: 4.25rem;
}

@media (max-width: 1024px) {
  .process-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
  }
}

@media (max-width: 560px) {
  .process-container {
    gap: 2rem;
  }
}

.process-label {
  margin-top: 15px;
  -webkit-writing-mode: vertical-rl; /* Safari用 */
  writing-mode: vertical-rl;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 2.5rem;
  background-color: var(--bg-sub);
  border-radius: 5px;
  text-align: center;
}

@media (max-width: 1024px) {
  .process-label {
    margin-top: 0;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    padding: 0;
    background-color: transparent;
    display: block;
  }
}

.process-label-text {
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.45em;
  color: var(--text-heading);
}

@media (max-width: 1024px) {
  .process-label-text {
    font-size: clamp(1.75rem, 1.448rem + 0.862vw, 2rem);
    letter-spacing: 0.15em;
    color: var(--text-muted);
  }
}

.process-label-decoration {
  display: none;
}

@media (max-width: 1024px) {
  .process-label-decoration {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 2px;
    background: var(--text-muted);
    margin-bottom: 0;
    margin-right: 1.25rem;
  }
}

@media (max-width: 798px) {
  .process-label-decoration {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 1rem;
  }
}


.process-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

@media (max-width: 798px) {
  .process-content {
    gap: 2.5rem;
  }
}

.process-item-group {
  width: 100%;
}

.process-item-title {
  position: relative;
  margin-bottom: 1rem;
  padding: 8px 0 6px;
  font-family: var(--font-en);
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--text-heading);
}

@media (max-width: 798px) {
  .process-item-title {
    padding: 4px 0 6px;
  }
}

/* 全体のベース線（薄い線） */
.process-item-title::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: var(--text-muted);
}

.process-item-title::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30%;
  height: 3px;
  border-radius: 3px;
  background: var(--accent-heading);
}

.process-detail-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

@media (max-width: 798px) {
  .process-detail-list {
    gap: 1rem;
  }
}

.process-detail-row {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

@media (max-width: 798px) {
  .process-detail-row {
    flex-direction: column;
    gap: 0.3rem;
  }
}

.process-detail-label {
  flex: 0 0 280px;
  font-size: 1rem;
  letter-spacing: 0.1em;
}

@media (max-width: 798px) {
  .process-detail-label {
    flex: auto;
    line-height: 1.2;
    padding: 3px 9px;
    border-radius: 3px;
    background: var(--bg-element);
  }

  .bullet {
    display: none;
  }
}

.process-detail-label.label-typo {
  letter-spacing: 0.02em;
}

.process-detail-text {
  flex: 1;
  padding-left: 24px;
}

@media (max-width: 798px) {
  .process-detail-text {
    flex: initial;
    padding-left: 0;
  }
}

.process-color-text {
  margin-bottom: 1rem;
}

.process-color-palette {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

@media (max-width: 1130px) {
  .process-color-palette {
    gap: 2.5rem 1.5rem;
  }
}

.process-color-item {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  box-shadow: 0 2px 2px var(--shadow-color-palette);
}

@media (max-width: 1024px) {
  .process-color-item {
    width: 64px;
    height: 64px;
  }
}

.color-hex-code {
  position: absolute;
  bottom: -28px;
  left: 3px;
  font-family: var(--font-en);
  font-size: 0.75rem;
}

@media (max-width: 1024px) {
  .color-hex-code {
    bottom: -26px;
    left: 0;
  }
}

.website-screens-img {
  width: 100%;
  height: 85vh;
  height: 85svh;
  margin-bottom: 128px;
}

@media (max-width: 560px) {
  .website-screens-img {
    height: 60vh;
    height: 60svh;
    margin-bottom: 96px;
  }
}

.layout-overview {
  margin-bottom: 128px;
  overflow: hidden;
}

@media (max-width: 560px) {
  .layout-overview {
    margin-bottom: 96px;
  }
}

.layout-overview .section-title,
.layout-overview-lead {
  width: 90%;
  margin-inline: auto;
}

.layout-overview-lead {
  position: relative;
  font-size: clamp(1rem, 0.778rem + 0.946vw, 1.25rem);
  margin-bottom: 2.5rem;
  border-bottom: 3px solid var(--text-muted);
  border-radius: 3px;
}

@media (max-width: 560px) {
  .layout-overview-lead {
    line-height: 1.6;
    margin-bottom: 2rem;
  }
}

.layout-overview-lead::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 40%;
  height: 3px;
  border-radius: 3px;
  background: var(--accent-heading);
}

.sankaku-deco {
  display: inline-block;
  width: 32px;
  vertical-align: -8px;
}

@media (max-width: 798px) {
  .sankaku-deco {
    width: 28px;
    vertical-align: -7px;
  }
}

@media (max-width: 375px) {
  .sankaku-deco {
    width: 24px;
  }
}

.layout-overview-container {
  display: flex;
  gap: 64px;
  padding: 32px;
  width: 95%;
  margin-inline: auto;
  background: var(--bg-extra);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

@media (max-width: 1024px) {
  .layout-overview-container {
    gap: 56px;
  }
}

@media (max-width: 798px) {
  .layout-overview-container {
    gap: 48px;
    padding: 24px;
  }
}

@media (max-width: 560px) {
  .layout-overview-container {
    gap: 24px;
    padding: 20px;
  }
}

@media (max-width: 375px) {
  .layout-overview-container {
    padding: 16px;
  }
}

.page-group {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  flex-shrink: 0;
  /* scroll-snap-align: start; */
}

@media (max-width: 1024px) {
  .page-group {
    gap: 24px;
  }
}

@media (max-width: 560px) {
  .page-group {
    gap: 18px;
  }
}

.pc-view {
  width: 52vw;
  box-shadow: 2px 6px 10px var(--shadow-layout-overview);
}

.pc-view img,
.sp-view img {
  object-fit: contain;
}

.sp-view {
  width: 26vw;
  box-shadow: 2px 6px 10px var(--shadow-layout-overview);
}

@media (max-width: 798px) {
  .single-website .section-title {
    line-height: 1.1;
  }
}


/* WORKS　Banner制作詳細ページ */

.banner-process-wrapper {
  display: flex;
  flex-direction: column;
  gap: 120px;
}

@media (max-width: 798px) {
  .banner-process-wrapper {
    gap: 100px;
  }
}

.banner-process-container {
  display: flex;
  gap: 4.25rem;
}

@media (max-width: 1024px) {
  .banner-process-container {
    flex-direction: column;
    gap: 2.5rem;
  }
}

@media (max-width: 560px) {
  .banner-process-container {
    gap: 2rem;
  }
}

.banner-process-label {
  margin-top: 15px;
  -webkit-writing-mode: vertical-rl;
  /* Safari用 */
  writing-mode: vertical-rl;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 3.5rem;
  background-color: var(--bg-element);
  border-radius: 5px;
  text-align: center;
}

@media (max-width: 1024px) {
  .banner-process-label {
    margin-top: 0;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    padding: 0;
    background-color: transparent;
    display: block;
    text-align: start;
  }
}

.banner-process-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (max-width: 1024px) {
  .banner-process-list {
    flex: initial;
    width: 100%;
  }
}

.banner-process-item-text {
  font-size: 0.9375rem;
}

@media (max-width: 560px) {
  .banner-process-item-text {
    font-size: 0.875rem;
  }
}

.banner-process-materials-img {
  display: flex;
  justify-content: flex-start;
}

.banner-process-materials-img img {
  max-height: 200px;
  max-width: 100%;
  width: auto;
  height: auto;
}



/* SEE OTHERSセクション */

.other-works-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 120px;
}

@media (max-width: 1024px) {
  .other-works-container {
    gap: 104px 80px;
  }
}

@media (max-width: 798px) {
  .other-works-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 96px;
  }
}

@media (max-width: 560px) {
  .other-works-container {
    gap: 80px;
  }
}

@media (max-width: 440px) {
  .other-works-container {
    gap: 48px;
  }
}

.other-work-item {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--border-other-works);
  box-shadow: 0 10px 40px var(--shadow-website-mock);
  aspect-ratio: 3/2;
}

@media (max-width: 798px) {
  .other-work-item {
    width: 80%;
    min-width: 440px;
  }
}

@media (max-width: 560px) {
  .other-work-item {
    width: 100%;
    min-width: auto;
  }
}

.other-work-hover-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: var(--overlay-other-work);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.other-work-link:hover .other-work-hover-overlay {
  opacity: 1;
}

@media (max-width: 1024px) {
  /* リセット */
  .other-work-link:hover .other-work-hover-overlay {
    opacity: 0;
  }

  .other-work-link:active .other-work-hover-overlay {
    opacity: 1;
  }

}

.other-work-hover-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--white);
}

@media (max-width: 1024px) {
  .other-work-hover-content {
    gap: 0.875rem;
  }
}

.other-work-category-wrapper {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.other-work-category-decoration {
  width: 2px;
  height: 0.75rem;
  background-color: var(--white);
  border-radius: 2px;
}

.other-work-category {
  font-family: var(--font-en);
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.other-work-title {
  font-size: clamp(1.5rem, 1.086rem + 0.83vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: 0.1em;
}




/* ABOUTページ */

.section-title.about-item-title {
  margin-bottom: 0;
}

.about-title-container {
  width: 80%;
  max-width: 1152px;
  margin-inline: auto;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr;
  /* 1列のグリッド */
  margin-top: 96px;
}

@media (max-width: 798px) {
  .about-title-container {
    margin-top: 72px;
  }
}

@media (max-width: 375px) {
  .about-title-container {
    margin-top: 56px;
  }
}

.about-section-icon,
.about-sub-title {
  grid-column: 1 / 2;
  /* 同じ列（1番目）に重ねる */
  grid-row: 1 / 2;
  /* 同じ行（1番目）に重ねる */
}

.about-section-icon {
  justify-self: start;
  /* 重ねた中で左端に寄せる */
}

.about-me-icon {
  width: 19.53125%;
}

.about-sub-title {
  justify-self: center;
  text-align: center;
  font-size: 2.75rem;
  letter-spacing: 0.1em;
}

@media (max-width: 1024px) {
  .about-sub-title {
    font-size: clamp(2rem, 1.397rem + 1.724vw, 2.5rem);
  }
}

@media (max-width: 560px) {
  .about-sub-title {
    font-size: clamp(1.75rem, 1.243rem + 2.162vw, 2rem);
    margin-left: 32px;
  }
}


.about-item-container {
  width: 100%;
  padding: 80px 0;
  border-radius: 80px;
}

@media (min-width: 1440px) {
  .about-item-container {
    width: 90%;
    margin-inline: auto;
  }
}

@media (max-width: 1024px) {
  .about-item-container {
    border-radius: 48px;
    padding: 72px 0;
  }
}

@media (max-width: 798px) {
  .about-item-container {
    border-radius: 40px;
    padding: 56px 0;
  }
}

@media (max-width: 560px) {
  .about-item-container {
    border-radius: 32px;
    padding: 48px 0;
  }
}

@media (max-width: 375px) {
  .about-item-container {
    border-radius: 24px;
    padding: 40px 0;
  }
}

.profile-wrapper {
  background-color: var(--bg-sub);  
}

.profile-container {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 120px;
}

@media (max-width: 1024px) {
  .profile-container {
    grid-template-columns: 1fr 200px;
    gap: 80px;
  }
}

@media (max-width: 798px) {
  .profile-container {
    gap:0 40px;
  }

  .profile-body {
    display: contents;
  }

  .profile-item-group:nth-child(1) {
    grid-column: 1 / 2;
  }

  .profile-img {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  .profile-item-group:nth-child(2) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .profile-container {
    display: flex;
    flex-direction: column;
  }

  /* 自己紹介を一番上に */
  .profile-body .profile-item-group:nth-child(1) {
    order: 1;
  }

  /* 画像を二番目に */
  .profile-img {
    order: 2;
    margin-bottom: 48px;
  }

  /* 強みを一番下に */
  .profile-body .profile-item-group:nth-child(2) {
    order: 3;
  }
}


.about-item-group  {
  margin-bottom: 56px;
}

.thoughts-on-work-item {
  margin-bottom: 72px;
}

@media (max-width: 560px) {
  .thoughts-on-work-item {
    margin-bottom: 64px;
  }
}

.about-item-title {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-family: var(--font-en);
  font-weight: var(--weight-regular);
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--text-heading);
  padding: 8px 24px;
  border-radius: 16px;
}

.profile-item-title {
  background: var(--bg-main);
}

.thoughts-on-work-item-title {
  background: var(--bg-sub);
}

.extra-item-title {
  background: var(--bg-element);
}

@media (max-width: 1024px) {
  .about-item-title {
    margin-bottom: 1.25rem;
  }
}

@media (max-width: 560px) {
  .about-item-title {
    display: block;
    text-align: center;
    padding: 10px;
  }
}

@media (max-width: 375px) {
  .about-item-title {
    margin-bottom: 1rem;
  }
}

.about-item-sub-title {
  font-family: var(--font-jp);
  font-weight: var(--weight-medium);
  font-size: 0.9375rem;
}

@media (max-width: 560px) {
  .about-item-sub-title {
    font-size: clamp(0.875rem, 0.748rem + 0.541vw, 0.938rem);
  }
}

.profile-img {
  border: 2px solid var(--bg-element);
  aspect-ratio: 1/1.618;
}

@media (max-width: 798px) {
  .profile-img {
    aspect-ratio: 3/4;
  }
}

@media (max-width: 560px) {
  .profile-img {
    aspect-ratio: 1/1;
    width: 60%;
    margin-inline: auto;
  }

  .profile-img img {
    object-position: center top;
  }
}

@media (max-width: 375px) {
  .profile-img {
    width: 70%;
  }
}

.about-pic-item {
  position: relative;
  box-shadow: 0 8px 16px var(--shadow-coding-card);
}

.about-pic-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay-about);
  z-index: 1;
}

.about-value-list {
  display: flex;
  gap: 80px;
  margin-top: 40px;
}

@media (max-width: 1024px) {
  .about-value-list {
    gap: 56px;
    margin-top: 32px;
  }
}

@media (max-width: 798px) {
  .about-value-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 24px;
    justify-items: center;
    align-items: start;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .about-value-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
}

@media (max-width: 375px) {
  .about-value-list {
    align-items: center;
    gap: 24px;
    margin-top: 24px;
  }
}

.about-value-item {
  position: relative;
  width: 100%;
  max-width: 220px;
}

@media (max-width: 798px) {
  /* 探求を上段中央に配置 */
  .about-value-item:nth-child(1) {
    grid-column: 1 / -1;
  }

  .about-value-item:nth-child(2) {
    grid-column: 1 / 2;
    /* 2行目の左側 */
  }

  .about-value-item:nth-child(3) {
    grid-column: 2 / 3;
    /* 2行目の右側 */
  }
}

@media (max-width: 560px) {
  .about-value-item {
    width: 85%;
    max-width: 220px;
  }

  /* 奇数番目左寄せから少しだけ右に離す */
  .about-value-item:nth-child(odd) {
    align-self: flex-start;
    margin-left: 5%;
  }

  /* 偶数番目右寄せから少しだけ左に離す */
  .about-value-item:nth-child(even) {
    align-self: flex-end;
    margin-right: 5%;
  }
}

@media (max-width: 375px) {
  .about-value-item:nth-child(odd) {
    align-self: auto;
    margin-left: 0;
  }

  .about-value-item:nth-child(even) {
    align-self: auto;
    margin-right: 0;
  }
}

.about-value-bg {
  width: 100%;
}

.about-value-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 1;
}

.value-label {
  text-align: center;
  font-weight: var(--weight-medium);
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: var(--accent-heading);
  margin-bottom: 0.875rem;
}

@media (max-width: 560px) {
  .value-label {
    font-size: clamp(1.125rem, 0.872rem + 1.081vw, 1.25rem);
  }
}

.value-text {
  padding: 0 20px;
}

.accent-text {
  font-size: 1rem;
  font-weight: var(--weight-medium);
  color: var(--text-main);
  border-bottom: 2px solid var(--accent-heading);
  border-radius: 2px;
  padding-bottom: 2px;
}

@media (max-width: 560px) {
  .accent-text {
    font-size: 0.875rem;
    padding-bottom: 1px;
  }
}

.about-item-text-detail {
  margin-top: 14px;
}

.thoughts-on-work-title-container,
.extra-title-container {
  margin-bottom: 14px;
}


.thoughts-on-work-icon {
  width: 20.3125%;
}

.thoughts-on-work-wrapper {
  background-color: var(--bg-element);
  margin-bottom: 120px;
}

@media (max-width: 798px) {
  .thoughts-on-work-wrapper {
    margin-bottom: 100px;
  }
}

@media (max-width: 375px) {
  .thoughts-on-work-wrapper {
    margin-bottom: 80px;
  }
}


.end-about-item-group {
  margin-bottom: 0;
}

.about-title-container.extra-title-container {
  margin-top: 84px;
}

@media (max-width: 798px) {
  .about-title-container.extra-title-container {
    margin-top: 60px;
  }
}

@media (max-width: 375px) {
  .about-title-container.extra-title-container {
    margin-top: 44px;
  }
}

.extra-icon {
  width: 20.3125%;
}

.extra-wrapper {
  background-color: var(--bg-extra);
}

.study-log-lead {
  margin-bottom: 1rem;
}

.study-log-container {
  display: flex;
  align-items: center;
  gap: 80px;
}

@media (max-width: 1024px) {
  .study-log-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }
}

@media (max-width: 798px) {
  .study-log-container {
    gap: 24px;
  }
}

.study-log-img {
  border: 2px solid var(--bg-element);
  cursor: pointer;
}

/* モーダル全体の背景 */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--text-heading);
  z-index: 10002;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.modal.is-active {
  display: flex;
}

.modal-content {
  max-width: 90%;
  max-height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#modal-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.study-log-right {
  width: 100%;
}

.study-list {
  width: 300px;
}

@media (max-width: 1024px) {
  .study-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 798px) {
  .study-list {
    display: flex;
    flex-direction: column;
  }
}

.study-list-title {
  display: inline-block;
  font-size: 1rem;
  font-weight: var(--weight-medium);
  margin-bottom: 0.875rem;
  padding: 6px 10px;
  background-color: var(--bg-element);
  border-radius: 8px;
}

@media (max-width: 560px) {
  .study-list-title {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
  }
}

.study-log-check {
  display: inline-block;
  width: 0.875rem;
  margin-right: 8px;
  vertical-align: -2px;
}

.study-item {
  font-size: 0.75rem;
}

.about-likes-container {
  display: flex;
  gap: 80px;
}

@media (max-width: 1024px) {
  .about-likes-container {
    gap: 56px;
  }
}

@media (max-width: 870px) {
  .about-likes-container {
    gap: 4px;
  }
}

@media (max-width: 710px) {
  .about-likes-container {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
    justify-content: center;
    align-items: start;
  }
}

@media (max-width: 450px) {
  .about-likes-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
}

.about-like-item {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--bg-element);
  aspect-ratio: 1/1;
}

@media (max-width: 710px) {
  .about-like-item:nth-child(1) {
    grid-column: 1/-1;
    width: 300px;
    margin-inline: auto;
  }

  .about-like-item:nth-child(2) {
    grid-column: 1/2;
  }

  .about-like-item:nth-child(3) {
    grid-column: 2/3;
  }
}

@media (max-width: 450px) {
  .about-like-item {
    width: 240px !important; 
  }
}

.about-like-item img {
  transition: transform 0.3s ease;
}

.about-like-item:hover img {
  transform: scale(1.1);
}

.like-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay-other-work);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: var(--white);
  text-align: center;
}

.about-like-item:hover .like-overlay {
  opacity: 1;
}

/* 1024px以下でのfocusで詳細が表示される設定 */
@media (max-width: 1024px) {

  /* タップした時に出るブラウザ標準の枠線を消す */
  .about-like-item {
    outline: none;
  }

  /* スマホでの「ホバー残り現象」をリセット */
  .about-like-item:hover img {
    transform: scale(1);
  }

  .about-like-item:hover .like-overlay {
    opacity: 0;
  }

  /* focus時にPCのhoverと同じ挙動をさせる --- */
  .about-like-item:focus img {
    transform: scale(1.1);
  }

  .about-like-item:focus .like-overlay {
    opacity: 1;
  }
}

/* 画像の右下に+マーク*/
.about-like-item::after {
  content: "+";
  font-size: 20px;
  font-family: var(--font-en);
  font-weight: 500;
  color: var(--accent-heading);
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 28px;
  height: 28px;
  z-index: 5;
  opacity: 0.8;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: all 0.3s ease;
  pointer-events: none;
}

/* hover時・focus時：+マークを消す*/
.about-like-item:hover::after,
.about-like-item:focus::after {
  opacity: 0;
  transform: scale(0.8) rotate(90deg);
}

.like-title {
  font-size: 1.75rem;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}

@media (max-width: 1024px) {
  .like-title {
    font-size: clamp(1.25rem, 0.948rem + 0.862vw, 1.5rem);
    margin-bottom: 10px;
  }
}

.like-text {
  letter-spacing: 0.05em;
  text-align: justify;
}

@media (max-width: 798px) {
  .like-text {
    letter-spacing: 0.03em;
    line-height: 1.4;
  }
}



/* THANKS（送信完了）ページ */

.form-thanks {
  padding-top: calc(var(--header-height) + 64px);
}

@media (max-width: 798px) {
  .form-thanks {
    padding-top: calc(var(--header-height) + 56px);
  }
}

@media (max-width: 440px) {
  .form-thanks {
    padding-top: calc(var(--header-height) + 40px);
  }
}

.form-thanks .section-title {
  text-align: center;
  margin-bottom: 64px;
}

@media (max-width: 798px) {
  .form-thanks .section-title {
    font-size: clamp(2.5rem, 0.727rem + 7.565vw, 4.5rem);
    margin-bottom: 56px;
  }
}

@media (max-width: 560px) {
  .form-thanks .section-title {
    margin-bottom: 48px;
  }
}

.form-thanks-lead {
  font-weight: var(--weight-medium);
  margin-bottom: 1.25rem;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
}

@media (max-width: 560px) {
  .form-thanks-lead {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
}

.form-thanks-message {
  letter-spacing: 0.1em;
}

@media (max-width: 560px) {
  .form-thanks-message br {
    display: none;
  }
}

.form-thanks-br {
  display: none;
}

@media (max-width: 1137px) {
  .form-thanks-br {
    display: block;
  }
}

@media (max-width: 760px) {
  .form-thanks-br {
    display: none;
  }
}


.form-thanks-decoration {
  margin: 2rem auto 4rem;
  width: 27.8125%;
  min-width: 180px;
}

@media (max-width: 1024px) {
  .form-thanks-decoration {
    margin-bottom: 3.5rem;
  }
}

@media (max-width: 798px) {
  .form-thanks-decoration {
    margin-bottom: 2.5rem;
  }
}

@media (max-width: 440px) {
  .form-thanks-decoration {
    margin-top: 1.5rem;
  }
}

.form-thanks-footer {
  margin-top: 120px;
}