@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon-master
Version: 1.1.3
*/


/* ========================================
   基本設定
======================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

.site-name-text,
.site-name-text a {
  font-family:
    "Yu Gothic",
    "游ゴシック",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Meiryo",
    sans-serif;
}


/* ========================================
   共通ヘッダー
======================================== */

.header-container {
  width: 100%;
  margin: 0;
  padding: 0;

  background: #fff;
  border-bottom: 1px solid #ececec;
  box-shadow: none;
}

.header-container-in {
  width: 100%;
  margin: 0;
  padding: 0;
}

.header {
  margin: 0;
  padding: 0;

  background: #fff;
  border: 0;
  box-shadow: none;
}

.header-in {
  margin: 0 auto;
  padding: 0;
}

.logo-header {
  margin: 0;
  padding: 0;
}

.site-name-text,
.site-name-text a {
  margin: 0;

  color: #181818 !important;

  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-decoration: none;
}


/* ========================================
   PCヘッダー
======================================== */

@media screen and (min-width: 835px) {

  .header-container {
    min-height: 70px;
  }

  .header-container-in {
    width: 100%;
    min-height: 70px;

    margin: 0;
    padding: 0 32px;

    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }

  .header {
    width: auto !important;
    max-width: none !important;

    flex: 0 0 auto;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent;
  }

  .header-in {
    width: auto !important;
    max-width: none !important;
    min-height: 70px;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center;
    justify-content: flex-start;
  }

  .logo-header {
    width: auto !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left;
  }

  .logo-header .site-name-text,
  .logo-header .site-name-text a {
    display: inline-block;

    width: auto !important;

    padding: 0;

    font-size: 14px !important;
    white-space: nowrap;
    text-align: left;
  }

  .navi {
    position: static !important;

    display: block !important;
    visibility: visible !important;

    width: auto !important;
    max-width: none !important;
    height: auto !important;

    flex: 0 0 auto;

    margin: 0 0 0 auto !important;
    padding: 0 !important;

    background: transparent;
    opacity: 1 !important;
    transform: none !important;
    overflow: visible !important;
  }

  .navi-in {
    display: block !important;

    width: auto !important;
    max-width: none !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
  }

  .navi-in > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-end;

    width: auto !important;
    min-height: 0;

    margin: 0 !important;
    padding: 0 !important;

    gap: 32px;

    overflow: visible !important;
  }

  .navi-in > ul > li {
    display: block !important;

    width: auto !important;
    min-width: 0;

    flex: 0 0 auto;

    margin: 0;
    padding: 0;
  }

  .navi-in > ul > li > a {
    display: block !important;

    width: auto !important;
    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 8px 0;

    color: #181818 !important;
    background: transparent !important;

    font-family:
      "Helvetica Neue",
      Arial,
      sans-serif;

    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-decoration: none;
    white-space: nowrap;

    transition: opacity 0.25s ease;
  }

  .navi-in > ul > li > a:hover {
    color: #181818 !important;
    background: transparent !important;
    opacity: 0.45;
  }

  .navi-in > ul > li.current-menu-item > a,
  .navi-in > ul > li.current-menu-ancestor > a {
    color: #181818 !important;
    background: transparent !important;
    opacity: 0.45;
  }

  .navi-in .caption-wrap {
    display: block;

    width: auto;
    height: auto;

    margin: 0;
    padding: 0;
  }

  .navi-in .item-label {
    display: block;
    white-space: nowrap;
  }

  .navi-in .item-description {
    display: none;
  }

  .mobile-menu-buttons,
  .mobile-menu-button {
    display: none !important;
  }
}


/* ========================================
   HOME：Cocoonレイアウト解除
======================================== */

body.home .content,
body.home .content-in,
body.home .main {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;
}

body.home .content-in {
  display: block;
}

body.home .main {
  float: none;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;
}

body.home .sidebar {
  display: none;
}

body.home .article {
  margin: 0;
  padding: 0;
}

body.home .entry-content {
  margin: 0;
  padding: 0;
}

body.home .entry-content > * {
  margin-top: 0;
  margin-bottom: 0;
}

body.home .article-header,
body.home .entry-title,
body.home .eye-catch,
body.home .date-tags,
body.home .sns-share,
body.home .sns-follow,
body.home .footer-meta {
  display: none;
}

body.home .entry-content,
body.home .entry-content * {
  box-sizing: border-box;
}


/* ========================================
   HOME：見出し装飾解除
======================================== */

body.home .home-section-title,
body.home .home-contact-title,
body.home .home-concept-title,
body.home .home-works-item-title,
body.home .home-labo-item-title {
  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;
}

body.home .home-section-title::before,
body.home .home-section-title::after,
body.home .home-contact-title::before,
body.home .home-contact-title::after,
body.home .home-concept-title::before,
body.home .home-concept-title::after,
body.home .home-works-item-title::before,
body.home .home-works-item-title::after,
body.home .home-labo-item-title::before,
body.home .home-labo-item-title::after {
  content: none;
  display: none;
}


/* ========================================
   HOME：共通
======================================== */

.home-hero,
.home-concept,
.home-section,
.home-contact {
  width: 100vw;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
}

.home-hero-inner,
.home-concept-inner,
.home-section-inner,
.home-contact-inner {
  width: calc(100% - 80px);
  max-width: 1240px;

  margin: 0 auto;
}

.home-section-title,
.home-contact-title {
  font-family:
    "Helvetica Neue",
    Arial,
    "Yu Gothic",
    "游ゴシック",
    sans-serif;

  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
}

.home-text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  color: #181818;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-decoration: none;

  transition: opacity 0.25s ease;
}

.home-text-link:hover {
  color: #181818;
  text-decoration: none;
  opacity: 0.5;
}

.home-text-link span:last-child {
  display: inline-block;

  font-size: 16px;
  line-height: 1;

  transition: transform 0.25s ease;
}

.home-text-link:hover span:last-child {
  transform: translateX(5px);
}


/* ========================================
   HOME：ヒーロー
======================================== */

.home-hero {
  background: #fff;
}

.home-hero-inner {
  min-height: 435px;
  padding: 70px 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

.home-main-logo {
  display: inline-flex;
  align-items: center;
  gap: 28px;

  color: #181818;
  text-decoration: none;
}

.home-main-logo:hover {
  color: #181818;
  text-decoration: none;
}

.home-logo-name {
  font-family:
    "Yu Gothic",
    "游ゴシック",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Meiryo",
    sans-serif;

  font-size: clamp(28px, 3vw, 42px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.18em;
}


/* HOME ロゴ画像 */

.home-logo-image {
  display: block;

  width: 62px;
  height: 62px;

  flex: 0 0 auto;

  object-fit: contain;
}

.home-logo-piece-03 {
  bottom: 0;
  left: 0;

  border-radius: 50% 6px 50% 50%;
}

.home-logo-piece-04 {
  right: 0;
  bottom: 0;

  border-radius: 6px 50% 50% 50%;
}


/* ========================================
   HOME：ABOUT
======================================== */

.home-concept {
  color: #fff;
  background: #294d7c;
}

.home-concept-inner {
  max-width: 900px;

  padding: 85px 0 78px;

  text-align: center;
}

.home-concept-title {
  color: #fff;

  font-family:
    "Yu Gothic",
    "游ゴシック",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Meiryo",
    sans-serif;

  font-size: clamp(25px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.1em;
}

.home-concept-text {
  max-width: 700px;
  margin: 38px auto 0;
}

.home-concept-text p {
  margin: 0;

  color: rgba(255, 255, 255, 0.88);

  font-size: 13px;
  font-weight: 400;
  line-height: 2.15;
  letter-spacing: 0.06em;
}

.home-concept-text p + p {
  margin-top: 19px;
}

.home-text-link-light {
  margin-top: 40px;

  color: #fff;
}

.home-text-link-light:hover {
  color: #fff;
}


/* ========================================
   HOME：セクション共通
======================================== */

.home-section {
  background: #fff;
}

.home-section-inner {
  padding: 75px 0 85px;
}

.home-section-heading {
  width: 100%;

  margin: 0 0 42px;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.home-section-title {
  color: #181818;

  font-size: clamp(31px, 3.6vw, 48px);
}


/* ========================================
   HOME：WORKS
======================================== */

.home-works {
  overflow: hidden;

  background: #f3f3f1;
}

.home-works-list {
  width: calc(
    100vw - max(
      40px,
      calc((100vw - 1240px) / 2)
    )
  );

  margin: 0;
  padding: 0 40px 14px 0;

  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start;
  gap: 22px;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.home-works-list::-webkit-scrollbar {
  height: 5px;
}

.home-works-list::-webkit-scrollbar-track {
  background: #dcdcd8;
}

.home-works-list::-webkit-scrollbar-thumb {
  background: #92928d;
}

.home-works-item {
  width: 340px !important;
  min-width: 340px !important;
  max-width: 340px !important;

  flex: 0 0 340px !important;

  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;
  box-shadow: none;

  scroll-snap-align: start;
}

.home-works-item-link {
  display: block;

  width: 100%;

  color: #181818;
  text-decoration: none;

  border: 0;
  background: transparent;
  box-shadow: none;
}

.home-works-item-link:hover {
  color: #181818;
  text-decoration: none;
}

.home-works-image {
  position: relative;

  display: block;

  width: 100%;
  aspect-ratio: 4 / 3;

  margin: 0;
  padding: 0;

  overflow: hidden;

  border: 1px solid #294d7c;
  border-radius: 6px;

  background: #fff;
}

.home-works-image img,
.home-works-thumbnail {
  display: block;

  width: 100% !important;
  height: 100% !important;

  margin: 0;
  padding: 0;

  object-fit: cover;

  transition:
    transform 0.45s ease,
    opacity 0.3s ease;
}

.home-works-item-link:hover .home-works-thumbnail {
  transform: scale(1.025);
  opacity: 0.92;
}

.home-works-no-image {
  display: grid;
  place-items: center;

  width: 100%;
  height: 100%;

  color: #999;
  background: #fff;

  font-size: 11px;
  letter-spacing: 0.16em;
}

.home-works-info {
  width: 100%;

  margin: 0;
  padding: 15px 0 0;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;

  border: 0;
  background: transparent;
}

.home-works-item-title {
  flex: 1;

  color: #181818;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.025em;
}

.home-works-arrow {
  flex: 0 0 auto;

  color: #181818;

  font-size: 16px;
  line-height: 1.4;

  transition: transform 0.25s ease;
}

.home-works-item-link:hover .home-works-arrow {
  transform: translateX(5px);
}


/* ========================================
   HOME：LABO
======================================== */

.home-labo {
  background: #fff;
}

.home-labo-list {
  width: 100%;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 20px;
}

.home-labo-item {
  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  overflow: hidden;

  border: 1px solid #e6e6e6;
  border-radius: 7px;

  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.home-labo-item-link {
  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100%;

  color: #181818;
  text-decoration: none;
}

.home-labo-item-link:hover {
  color: #181818;
  text-decoration: none;
}

.home-labo-image {
  position: relative;

  display: block;

  width: 100%;
  aspect-ratio: 16 / 9;

  overflow: hidden;

  background: #eeeeeb;
}

.home-labo-image img,
.home-labo-thumbnail {
  display: block;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover;

  transition:
    transform 0.45s ease,
    opacity 0.3s ease;
}

.home-labo-item-link:hover .home-labo-thumbnail {
  transform: scale(1.025);
  opacity: 0.92;
}

.home-labo-no-image {
  display: grid;
  place-items: center;

  width: 100%;
  height: 100%;

  color: #aaa;
  background: #eeeeeb;

  font-size: 11px;
  letter-spacing: 0.16em;
}

.home-labo-info {
  flex: 1;

  margin: 0;
  padding: 15px 15px 18px;

  border: 0;
  background: transparent;
}

.home-labo-date {
  display: block;

  margin: 0 0 10px;
  padding: 0;

  color: #777;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.home-labo-item-title {
  color: #181818;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: 0.025em;
}

.home-labo-excerpt {
  margin: 10px 0 0;
  padding: 0;

  color: #666;

  font-size: 11px;
  line-height: 1.8;
}

.home-no-posts {
  margin: 0;

  color: #777;

  font-size: 13px;
  line-height: 1.8;
}


/* ========================================
   HOME：CONTACT
======================================== */

.home-contact {
  background: #294d7c;
}

.home-contact-link {
  display: block;

  color: #fff;
  text-decoration: none;

  transition: background-color 0.3s ease;
}

.home-contact-link:hover {
  color: #fff;
  text-decoration: none;

  background: rgba(0, 0, 0, 0.08);
}

.home-contact-inner {
  min-height: 320px;
  padding: 80px 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.home-contact-title {
  color: #fff;

  font-size: clamp(32px, 4vw, 52px);
}

.home-contact-text {
  margin: 30px 0 0;

  color: rgba(255, 255, 255, 0.88);

  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.07em;
}

.home-contact-arrow {
  display: inline-block;

  flex: 0 0 auto;

  color: #fff;

  font-size: clamp(36px, 5vw, 62px);
  font-weight: 300;
  line-height: 1;

  transition: transform 0.3s ease;
}

.home-contact-link:hover .home-contact-arrow {
  transform: translateX(10px);
}


/* ========================================
   LABOページ
======================================== */

.labo-page {
  width: 100%;

  margin: 0;
  padding: 0;

  overflow: visible;

  color: #222;
  background: #fff;
}

.labo-page,
.labo-page * {
  box-sizing: border-box;
}


/* ========================================
   LABO：Cocoonレイアウト解除
======================================== */

.post-type-archive-labo .content,
.post-type-archive-labo .content-in,
.post-type-archive-labo .main {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;
}

.post-type-archive-labo .content-in {
  display: block;
}

.post-type-archive-labo .main {
  float: none;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;
}

.post-type-archive-labo .sidebar {
  display: none;
}


/* ========================================
   LABO：ヒーロー
   WORKSアーカイブと共通デザイン
======================================== */

.labo-hero {
  width: 100vw;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);

  background: #f3f3f1;
}

.labo-hero-inner {
  width: calc(100% - 80px);
  max-width: 1240px;
  min-height: 330px;

  margin: 0 auto;
  padding: 70px 0;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(320px, 0.75fr);

  align-items: end;
  gap: 70px;
}


/* 左側 */

.labo-hero-heading {
  min-width: 0;
}

.labo-hero-label {
  margin: 0 0 18px;

  color: #294d7c;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
}

.labo-hero-title {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;

  color: #181818;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: clamp(64px, 8vw, 118px);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.045em;
}

.labo-hero-title::before,
.labo-hero-title::after {
  content: none !important;
  display: none !important;
}


/* 右側 */

.labo-hero-introduction {
  padding-bottom: 4px;
}

.labo-hero-introduction p {
  margin: 0;

  color: #454545;

  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.045em;
}


/* ========================================
   タブレット
======================================== */

@media screen and (max-width: 1023px) {

  .labo-hero-inner {
    width: calc(100% - 48px);

    grid-template-columns:
      minmax(0, 1fr)
      minmax(260px, 0.75fr);

    gap: 40px;
  }
}


/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 767px) {

  .labo-hero {
    margin-top: 0 !important;
  }

  .labo-hero-inner {
    width: calc(100% - 30px);
    min-height: 280px;

    padding: 55px 0 48px;

    display: block;
  }

  .labo-hero-label {
    margin-bottom: 14px;

    font-size: 9px;
  }

  .labo-hero-title {
    font-size: clamp(58px, 20vw, 82px);
  }

  .labo-hero-introduction {
    margin-top: 38px;
    padding: 0;
  }

  .labo-hero-introduction p {
    font-size: 12px;
    line-height: 1.9;
  }

  .labo-hero-introduction p br {
    display: none;
  }
}

/* ========================================
   LABO：記事一覧
======================================== */

.labo-archive {
  width: 100vw;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);

  padding: 34px 0 90px;

  background: #fff;
}

.labo-archive-inner {
  width: calc(100% - 48px);
  max-width: 1160px;

  margin: 0 auto;
}


/* ========================================
   LABO：並び替え
======================================== */

.labo-toolbar {
  width: 100%;
  min-height: 34px;

  margin-bottom: 24px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.labo-result-title {
  width: auto;
  min-width: max-content;

  margin: 0;

  color: #777;

  white-space: nowrap;

  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

select.labo-sort {
  width: auto !important;
  min-width: 95px;
  max-width: none;

  flex: 0 0 auto;

  margin: 0 0 0 auto;
  padding: 7px 22px 7px 8px;

  appearance: none;
  -webkit-appearance: none;

  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;

  background-color: transparent;
  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      #222 50%
    ),
    linear-gradient(
      135deg,
      #222 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 8px) 50%,
    calc(100% - 3px) 50%;

  background-size: 5px 5px;
  background-repeat: no-repeat;

  color: #222;

  font-family: inherit;
  font-size: 13px;

  cursor: pointer;
}

select.labo-sort:focus {
  outline: 1px solid #aaa;
  outline-offset: 2px;
}


/* ========================================
   LABO：カード
======================================== */

.labo-grid {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 20px;
}

.labo-card {
  width: 100%;
  min-width: 0;

  margin: 0;

  overflow: hidden;

  border: 1px solid #e6e6e6;
  border-radius: 9px;

  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.045);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.labo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.075);
}

.labo-card-link {
  display: flex;
  flex-direction: column;

  height: 100%;

  color: inherit;
  text-decoration: none;
}

.labo-card-link:hover {
  color: inherit;
  text-decoration: none;
}

.labo-card-image {
  position: relative;

  width: 100%;
  aspect-ratio: 16 / 8.7;

  overflow: hidden;

  background: #eee;
}

.labo-card-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.45s ease;
}

.labo-card:hover .labo-card-image img {
  transform: scale(1.025);
}

.labo-card-category {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;

  min-height: 25px;
  padding: 4px 9px;

  display: inline-flex;
  align-items: center;

  border-radius: 3px;

  color: #fff;
  background: rgba(25, 25, 25, 0.9);

  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

.labo-card-noimage {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  color: #aaa;
  background: #efefed;

  font-size: 18px;
  letter-spacing: 0.2em;
}

.labo-card-body {
  flex: 1;

  padding: 17px 16px 19px;
}

.labo-card-date {
  display: block;

  margin-bottom: 12px;

  color: #777;

  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.025em;
}

.labo-card-title {
  margin: 0;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: 0.025em;
}

.labo-card-excerpt {
  margin: 11px 0 0;

  color: #555;

  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.025em;
}


/* ========================================
   LABO：ページネーション
======================================== */

.labo-pagination {
  margin-top: 50px;
}

.labo-pagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.labo-pagination .page-numbers {
  min-width: 34px;
  height: 34px;

  display: inline-grid;
  place-items: center;

  border: 1px solid #ddd;
  border-radius: 50%;

  color: #333;

  font-size: 12px;
  text-decoration: none;
}

.labo-pagination .page-numbers.current {
  border-color: #222;

  color: #fff;
  background: #222;
}


/* ========================================
   タブレット
======================================== */

@media screen and (max-width: 1023px) {

  .home-hero-inner,
  .home-concept-inner,
  .home-section-inner,
  .home-contact-inner {
    width: calc(100% - 48px);
  }

  .home-labo-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .labo-hero-inner {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 320px);

    gap: 35px;
  }

  .labo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ========================================
   タブレット・スマートフォンヘッダー
======================================== */

@media screen and (max-width: 834px) {

  .header-container {
    min-height: 66px;
  }

  .header-in {
    width: calc(100% - 36px);
    min-height: 66px;

    margin: 0 auto;
    padding: 0;

    display: flex;
    align-items: center;
  }

  .logo-header {
    padding: 0;
  }

  .site-name-text,
  .site-name-text a {
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.12em;
  }
}


/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 767px) {

  body.home .content {
    margin-top: 0;
  }

  .home-hero-inner,
  .home-concept-inner,
  .home-section-inner,
  .home-contact-inner {
    width: calc(100% - 30px);
    max-width: 600px;
  }

  .home-hero-inner {
    min-height: 340px;
    padding: 60px 0;
  }

  .home-main-logo {
    gap: 18px;
  }
	
.home-logo-image {
  width: 48px;
  height: 48px;
}

  .home-logo-name {
    font-size: 24px;
    letter-spacing: 0.13em;
  }

  .home-concept-inner {
    padding: 70px 0 66px;
  }

  .home-concept-title {
    font-size: 23px;
    line-height: 1.7;
    letter-spacing: 0.08em;
  }

  .home-concept-text {
    margin-top: 32px;
  }

  .home-concept-text p {
    font-size: 12px;
    line-height: 2;
    letter-spacing: 0.04em;
  }

  .home-concept-text p br {
    display: none;
  }

  .home-text-link-light {
    margin-top: 36px;
  }

  .home-section-inner {
    padding: 62px 0 68px;
  }

  .home-section-heading {
    margin-bottom: 28px;

    gap: 15px;
  }

  .home-section-title {
    font-size: 31px;
  }

  .home-text-link {
    gap: 8px;

    font-size: 10px;
  }

  .home-works-list {
    width: calc(100vw - 15px);

    padding-right: 15px;

    gap: 15px;
  }

  .home-works-item {
    width: 78vw !important;
    min-width: 78vw !important;
    max-width: 330px !important;

    flex-basis: 78vw !important;
  }

  .home-labo-list {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .home-contact-inner {
    min-height: 270px;
    padding: 62px 0;
  }

  .home-contact-title {
    font-size: 34px;
  }

  .home-contact-text {
    margin-top: 24px;

    font-size: 12px;
    line-height: 1.9;
  }

  .home-contact-arrow {
    font-size: 38px;
  }

  .labo-hero {
    margin-top: 22px;
  }

  .labo-hero-inner {
    width: calc(100% - 36px);
    max-width: 600px;
    min-height: 0;

    padding: 24px 0 22px;

    grid-template-columns: 1fr;
    gap: 18px;
  }

  .labo-hero-text h1 {
    padding-bottom: 13px;

    font-size: 38px;
    line-height: 1;
    letter-spacing: 0.16em;
  }

  .labo-hero-text h1::after {
    width: 36px;
    height: 2px;
  }

  .labo-hero-subtitle {
    margin-top: 15px;

    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.1em;
  }

  .labo-hero-description {
    margin-top: 18px;
  }

  .labo-hero-description p {
    font-size: 11px;
    line-height: 1.8;
  }

  .labo-hero-image {
    justify-content: flex-end;
  }

  .labo-hero-image img {
    width: 76%;
    max-width: 300px;
  }

  .labo-archive {
    padding: 25px 0 60px;
  }

  .labo-archive-inner {
    width: calc(100% - 30px);
    max-width: 600px;
  }

  .labo-toolbar {
    margin-bottom: 17px;
  }

  .labo-result-title {
    display: none;
  }

  select.labo-sort {
    margin-left: auto;
  }

  .labo-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .labo-card-image {
    aspect-ratio: 16 / 9;
  }

  .labo-card-body {
    padding: 15px 15px 18px;
  }
}


/* ========================================
   小さいスマートフォン
======================================== */

@media screen and (max-width: 480px) {

  .home-hero-inner,
  .home-concept-inner,
  .home-section-inner,
  .home-contact-inner {
    width: calc(100% - 28px);
  }

  .home-hero-inner {
    min-height: 310px;
  }

  .home-main-logo {
    gap: 14px;
  }

.home-logo-image {
  width: 42px;
  height: 42px;
}

  .home-logo-name {
    font-size: 21px;
    letter-spacing: 0.1em;
  }

  .home-concept-title {
    font-size: 21px;
  }

  .home-section-heading {
    align-items: center;
  }

  .home-works-item {
    width: 82vw !important;
    min-width: 82vw !important;

    flex-basis: 82vw !important;
  }

  .home-contact-inner {
    gap: 20px;
  }

  .labo-hero {
    margin-top: 18px;
  }

  .labo-hero-inner {
    width: calc(100% - 28px);
    padding: 21px 0 20px;
  }

  .labo-archive-inner {
    width: calc(100% - 24px);
  }

  .labo-hero-text h1 {
    font-size: 34px;
  }

  .labo-hero-subtitle {
    font-size: 14px;
  }
}

/* ========================================
   スマホ：ヘッダーのサイト名を非表示
======================================== */

@media screen and (max-width: 834px) {

  .logo-header,
  .site-name-text,
  .site-name-text a {
    display: none !important;
  }

  .header-in {
    justify-content: flex-end;
  }
}


/* ========================================
   PCヘッダー：左右を完全に中央揃え
======================================== */

@media screen and (min-width: 835px) {

  .header-container-in {
    position: relative !important;

    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;

    margin: 0 !important;
    padding: 0 40px !important;

    display: block !important;
  }


  /* 左：サイト名 */

  .header {
    position: absolute !important;
    top: 50% !important;
    left: 40px !important;

    width: auto !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateY(-50%) !important;

    background: transparent !important;
    border: 0 !important;
  }

  .header-in,
  .logo-header {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;
  }

  .site-name-text,
  .site-name-text a {
    display: block !important;

    width: auto !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1 !important;
  }


  /* 右：グローバルメニュー */

  .navi {
    position: absolute !important;
    top: 50% !important;
    right: 40px !important;
    left: auto !important;

    width: auto !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateY(-50%) !important;

    background: transparent !important;
  }

  .navi-in {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .navi-in > ul {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    gap: 32px;
  }

  .navi-in > ul > li,
  .navi-in > ul > li > a,
  .navi-in .caption-wrap,
  .navi-in .item-label {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    line-height: 1 !important;
  }
}

/* ========================================
   HOME スマホ表示：仕上げ調整
======================================== */

@media screen and (max-width: 767px) {

  /* ----------------------------------------
     ヘッダー
  ---------------------------------------- */

  .header-container,
  .header-container-in,
  .header,
  .header-in {
    min-height: 56px !important;
    height: 56px !important;
  }

  .header-container {
    border-bottom: 1px solid #ededed;
  }

  .header-container-in {
    width: 100% !important;
    padding: 0 15px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* スマホではヘッダー側のサイト名を非表示 */
  .header,
  .logo-header,
  .site-name-text,
  .site-name-text a {
    display: none !important;
  }

  .navi {
    position: static !important;

    width: 100% !important;
    height: 56px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    transform: none !important;
  }

  .navi-in {
    width: 100% !important;
    height: 56px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .navi-in > ul {
    width: 100% !important;
    height: 56px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
  }

  .navi-in > ul > li {
    width: auto !important;
    height: 56px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
  }

  .navi-in > ul > li > a {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 7px 4px !important;

    display: block !important;

    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.09em !important;
    white-space: nowrap;
  }

  .navi-in .caption-wrap,
  .navi-in .item-label {
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1 !important;
  }


  /* ----------------------------------------
     ヒーロー
  ---------------------------------------- */

  .home-hero-inner {
    min-height: 330px;
    padding: 55px 0 60px;
  }

  .home-main-logo {
    gap: 20px;
  }

  .home-logo-image {
    width: 48px;
    height: 72px;

    object-fit: contain;
  }

  .home-logo-name {
    font-size: 25px;
    line-height: 1.3;
    letter-spacing: 0.12em;
  }


  /* ----------------------------------------
     コンセプト
  ---------------------------------------- */

  .home-concept-inner {
    width: 100% !important;
    max-width: none !important;

    padding: 72px 24px 68px;
  }

  .home-concept-title {
    font-size: 22px !important;
    line-height: 1.65 !important;
    letter-spacing: 0.06em !important;
  }

  .home-concept-text {
    width: 100%;
    max-width: 440px;

    margin: 30px auto 0;
  }

  .home-concept-text p {
    width: 100%;

    margin: 0;

    font-size: 12px !important;
    line-height: 2 !important;
    letter-spacing: 0.025em !important;

    overflow-wrap: anywhere;
  }

  .home-concept-text p br {
    display: none;
  }

  .home-concept-text p + p {
    margin-top: 22px;
  }

  .home-text-link-light {
    margin-top: 34px;
  }


  /* ----------------------------------------
     WORKS・LABO共通
  ---------------------------------------- */

  body.home .home-section-inner {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 58px 15px 68px !important;
  }

  body.home .home-section-heading {
    width: 100%;

    margin: 0 0 28px;
    padding: 0;

    align-items: center;
  }

  body.home .home-section-title {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 30px !important;
    line-height: 1 !important;
    letter-spacing: 0.035em !important;
  }

  body.home .home-text-link {
    flex: 0 0 auto;

    margin: 0;
    padding: 0;

    font-size: 9px !important;
    letter-spacing: 0.08em;
  }


  /* ----------------------------------------
     WORKS
  ---------------------------------------- */

  body.home .home-works-list {
    width: calc(100vw - 15px) !important;

    margin: 0 !important;
    padding: 0 15px 12px 0 !important;

    gap: 15px;
  }

  body.home .home-works-item {
    width: calc(100vw - 60px) !important;
    min-width: calc(100vw - 60px) !important;
    max-width: 380px !important;

    flex: 0 0 calc(100vw - 60px) !important;
  }

  body.home .home-works-image {
    aspect-ratio: 4 / 3;
    border-radius: 6px;
  }

  body.home .home-works-info {
    padding: 14px 0 0 !important;
  }

  body.home h3.home-works-item-title,
  body.home .home-works-item-title {
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
    letter-spacing: 0.015em !important;
  }

  body.home .home-works-arrow {
    padding-top: 2px;

    font-size: 16px;
    line-height: 1.4;
  }


  /* ----------------------------------------
     LABO
  ---------------------------------------- */

  body.home .home-labo-list {
    width: 100%;

    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  body.home .home-labo-item {
    border-radius: 8px;
  }

  body.home .home-labo-image {
    aspect-ratio: 16 / 9;
  }

  body.home .home-labo-info {
    padding: 16px 16px 19px !important;
  }

  body.home h3.home-labo-item-title,
  body.home .home-labo-item-title {
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
  }

  body.home .home-labo-excerpt {
    margin-top: 10px;

    font-size: 12px !important;
    line-height: 1.8;
  }
}


/* ========================================
   小さいスマートフォン
======================================== */

@media screen and (max-width: 390px) {

  .navi-in > ul > li > a {
    padding-right: 2px !important;
    padding-left: 2px !important;

    font-size: 9px !important;
    letter-spacing: 0.04em !important;
  }

  .home-concept-inner {
    padding-right: 18px;
    padding-left: 18px;
  }

  .home-logo-name {
    font-size: 22px;
  }

  body.home .home-section-inner {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  body.home .home-works-list {
    width: calc(100vw - 12px) !important;
  }

  body.home .home-works-item {
    width: calc(100vw - 44px) !important;
    min-width: calc(100vw - 44px) !important;

    flex-basis: calc(100vw - 44px) !important;
  }
}

/* ========================================
   HOME：ファーストビュー最終調整
   ヘッダー＋ヒーローのみを1画面に表示
======================================== */

/* ----------------------------------------
   PC（ヘッダー 64px）
---------------------------------------- */

@media screen and (min-width: 835px) {

  body.home .home-hero {
    min-height: calc(100vh - 64px);
    min-height: calc(100svh - 64px);
    background: #fff;
  }

  body.home .home-hero-inner {
    width: 100%;
    max-width: none;
    min-height: calc(100vh - 64px);
    min-height: calc(100svh - 64px);

    margin: 0;
    padding: 40px;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.home .home-main-logo {
    gap: 22px;
  }

  body.home .home-logo-image {
    width: 92px;
    height: 132px;
    object-fit: contain;
  }

  body.home .home-logo-name {
    font-size: clamp(42px, 4.4vw, 62px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.16em;
  }

  body.home .home-concept-inner {
    max-width: 900px;
    padding: 85px 40px 78px;
  }

  body.home .home-concept-title {
    font-size: clamp(26px, 2.4vw, 36px);
    line-height: 1.55;
  }

  body.home .home-concept-text {
    max-width: 760px;
    margin-top: 20px;
  }

  body.home .home-concept-text p {
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: 0.045em;
  }

  body.home .home-concept-text p + p {
    margin-top: 13px;
  }

  body.home .home-text-link-light {
    margin-top: 24px;
  }
}


/* ----------------------------------------
   タブレット・スマートフォン
   ヘッダー 56px
---------------------------------------- */

@media screen and (max-width: 834px) {

  body.home .home-hero {
    min-height: calc(100vh - 56px);
    min-height: calc(100svh - 56px);
    background: #fff;
  }

  body.home .home-hero-inner {
    width: 100%;
    max-width: none;
    min-height: calc(100vh - 56px);
    min-height: calc(100svh - 56px);

    margin: 0;
    padding: 30px 24px;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.home .home-main-logo {
    gap: 16px;
  }

  body.home .home-logo-image {
    width: 66px;
    height: 98px;
    object-fit: contain;
  }

  body.home .home-logo-name {
    font-size: clamp(30px, 7vw, 40px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.13em;
  }

  body.home .home-concept-inner {
    width: 100%;
    max-width: none;
    padding: 70px 24px 66px;
  }

  body.home .home-concept-title {
    font-size: 21px !important;
    line-height: 1.55 !important;
  }

  body.home .home-concept-text {
    max-width: 520px;
    margin-top: 18px;
  }

  body.home .home-concept-text p {
    font-size: 13px !important;
    line-height: 1.85 !important;
    letter-spacing: 0.025em !important;
  }

  body.home .home-concept-text p + p {
    margin-top: 12px;
  }

  body.home .home-text-link-light {
    min-width: 124px;
    min-height: 40px;

    margin-top: 18px;
    padding: 9px 15px;

    font-size: 10px !important;
  }
}


/* ----------------------------------------
   小さいスマートフォン
---------------------------------------- */

@media screen and (max-width: 390px) {

  body.home .home-main-logo {
    gap: 12px;
  }

  body.home .home-logo-image {
    width: 54px;
    height: 82px;
  }

  body.home .home-logo-name {
    font-size: 27px;
    letter-spacing: 0.1em;
  }

  body.home .home-concept-title {
    font-size: 19px !important;
  }

  body.home .home-concept-text p {
    font-size: 12px !important;
    line-height: 1.8 !important;
  }
}

/* ========================================
   HOME：ダイナミック表示 最終調整
   ロゴ・見出し・本文・記事カードを拡大
======================================== */

/* ----------------------------------------
   PC
---------------------------------------- */
@media screen and (min-width: 835px) {

  /* ヒーローロゴ */
  body.home .home-main-logo {
    gap: 30px;
  }

  body.home .home-logo-image {
    width: 112px;
    height: 164px;
  }

  body.home .home-logo-name {
    font-size: clamp(54px, 5.6vw, 80px);
    line-height: 1.18;
    letter-spacing: 0.14em;
  }

  /* ABOUT */
  body.home .home-concept-inner {
    max-width: 1080px;
    padding: 110px 48px 105px;
  }

  body.home .home-concept-title {
    font-size: clamp(36px, 3.5vw, 52px);
    line-height: 1.5;
    letter-spacing: 0.08em;
  }

  body.home .home-concept-text {
    max-width: 860px;
    margin-top: 34px;
  }

  body.home .home-concept-text p {
    font-size: 17px;
    line-height: 2;
    letter-spacing: 0.045em;
  }

  body.home .home-concept-text p + p {
    margin-top: 20px;
  }

  body.home .home-text-link-light {
    min-width: 160px;
    min-height: 50px;
    margin-top: 38px;
    padding: 13px 20px;
    font-size: 12px;
  }

  /* WORKS・LABO セクション */
  body.home .home-section-inner {
    max-width: 1380px;
    padding-top: 105px;
    padding-bottom: 115px;
  }

  body.home .home-section-heading {
    margin-bottom: 58px;
  }

  body.home .home-section-title {
    font-size: clamp(52px, 5.2vw, 76px);
    letter-spacing: 0.035em;
  }

  body.home .home-text-link {
    font-size: 13px;
  }

  /* WORKSカード */
  body.home .home-works-list {
    gap: 30px;
  }

  body.home .home-works-item {
    width: 430px !important;
    min-width: 430px !important;
    max-width: 430px !important;
    flex: 0 0 430px !important;
  }

  body.home .home-works-info {
    padding-top: 20px;
  }

  body.home .home-works-item-title {
    font-size: 19px;
    line-height: 1.6;
  }

  body.home .home-works-arrow {
    font-size: 22px;
  }

  /* LABO記事カード */
  body.home .home-labo-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 28px;
  }

  body.home .home-labo-info {
    padding: 24px 24px 28px;
  }

  body.home .home-labo-date {
    margin-bottom: 14px;
    font-size: 12px;
  }

  body.home .home-labo-item-title {
    font-size: 20px;
    line-height: 1.6;
  }

  body.home .home-labo-excerpt {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.9;
  }
}

/* ----------------------------------------
   タブレット
---------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1023px) {

  body.home .home-logo-image {
    width: 88px;
    height: 132px;
  }

  body.home .home-logo-name {
    font-size: clamp(42px, 6vw, 58px);
  }

  body.home .home-section-title {
    font-size: 52px;
  }

  body.home .home-works-item {
    width: 390px !important;
    min-width: 390px !important;
    max-width: 390px !important;
    flex: 0 0 390px !important;
  }
}

/* ----------------------------------------
   スマートフォン
---------------------------------------- */
@media screen and (max-width: 767px) {

  /* ヒーローロゴ */
  body.home .home-main-logo {
    gap: 20px;
  }

  body.home .home-logo-image {
    width: 76px;
    height: 112px;
  }

  body.home .home-logo-name {
    font-size: clamp(34px, 9.2vw, 46px);
    line-height: 1.2;
    letter-spacing: 0.1em;
  }

  /* ABOUT */
  body.home .home-concept-inner {
    padding: 88px 24px 84px;
  }

  body.home .home-concept-title {
    font-size: clamp(25px, 6.5vw, 32px) !important;
    line-height: 1.6 !important;
  }

  body.home .home-concept-text {
    margin-top: 28px;
  }

  body.home .home-concept-text p {
    font-size: 15px !important;
    line-height: 2 !important;
  }

  body.home .home-concept-text p + p {
    margin-top: 18px;
  }

  body.home .home-text-link-light {
    min-width: 150px;
    min-height: 46px;
    margin-top: 30px;
    padding: 12px 18px;
    font-size: 11px !important;
  }

  /* 見出し */
  body.home .home-section-inner {
    padding-top: 78px !important;
    padding-bottom: 86px !important;
  }

  body.home .home-section-heading {
    margin-bottom: 38px;
  }

  body.home .home-section-title {
    font-size: clamp(40px, 12vw, 54px) !important;
    letter-spacing: 0.025em !important;
  }

  body.home .home-text-link {
    font-size: 10px !important;
  }

  /* WORKSカード */
  body.home .home-works-item {
    width: calc(100vw - 38px) !important;
    min-width: calc(100vw - 38px) !important;
    max-width: 520px !important;
    flex: 0 0 calc(100vw - 38px) !important;
  }

  body.home .home-works-info {
    padding-top: 18px !important;
  }

  body.home .home-works-item-title {
    font-size: 18px !important;
    line-height: 1.6 !important;
  }

  /* LABO記事カード */
  body.home .home-labo-list {
    gap: 26px;
  }

  body.home .home-labo-info {
    padding: 21px 20px 25px !important;
  }

  body.home .home-labo-date {
    font-size: 11px;
  }

  body.home .home-labo-item-title {
    font-size: 19px !important;
    line-height: 1.6 !important;
  }

  body.home .home-labo-excerpt {
    margin-top: 13px;
    font-size: 14px !important;
    line-height: 1.85 !important;
  }
}

/* ----------------------------------------
   小さいスマートフォン
---------------------------------------- */
@media screen and (max-width: 390px) {

  body.home .home-main-logo {
    gap: 14px;
  }

  body.home .home-logo-image {
    width: 62px;
    height: 94px;
  }

  body.home .home-logo-name {
    font-size: 31px;
    letter-spacing: 0.08em;
  }

  body.home .home-concept-title {
    font-size: 24px !important;
  }

  body.home .home-concept-text p {
    font-size: 14px !important;
  }

  body.home .home-section-title {
    font-size: 39px !important;
  }
}

/* ========================================
   HOME：ヒーローロゴ画像

   PC：hero_logo_pc.png
   SP：hero_logo_sp.png
======================================== */

body.home .home-main-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 auto !important;
  padding: 0 !important;

  color: inherit !important;
  text-decoration: none !important;
}

body.home .home-main-logo:hover {
  color: inherit !important;
  text-decoration: none !important;
}

body.home .home-main-logo::before,
body.home .home-main-logo::after {
  content: none !important;
  display: none !important;
}

body.home .home-hero-logo-image {
  height: auto !important;

  margin: 0 auto !important;
  padding: 0 !important;

  border: 0 !important;
  box-shadow: none !important;

  object-fit: contain !important;
}

/* PC：横組み画像 */
body.home .home-hero-logo-pc {
  display: block !important;

  width: min(66vw, 720px) !important;
  max-width: 100% !important;
}

/* SP画像はPCで非表示 */
body.home .home-hero-logo-sp {
  display: none !important;
}

/* ========================================
   タブレット・スマートフォン
======================================== */

@media screen and (max-width: 834px) {

  body.home .home-hero-logo-pc {
    display: none !important;
  }

  body.home .home-hero-logo-sp {
    display: block !important;

    width: min(44vw, 210px) !important;
    max-width: 100% !important;
  }
}

/* ========================================
   小さいスマートフォン
======================================== */

@media screen and (max-width: 390px) {

  body.home .home-hero-logo-sp {
    width: min(46vw, 180px) !important;
  }
}

/* ========================================
   HOME：ヒーローロゴを画像に差し替え
   HTML変更なし
======================================== */

body.home .home-main-logo {
  display: block !important;

  width: min(72vw, 720px) !important;
  height: auto !important;
  aspect-ratio: 336 / 84;

  margin: 0 auto !important;
  padding: 0 !important;

  background-image: url("https://nado-seisaku.com/wp-content/uploads/2026/07/hero_logo_pc.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  font-size: 0 !important;
  line-height: 0 !important;
}

/* 元のマーク画像と文字を非表示 */
body.home .home-main-logo .home-logo-image,
body.home .home-main-logo .home-logo-name {
  display: none !important;
}


/* ========================================
   SP・タブレット
======================================== */

@media screen and (max-width: 834px) {

  body.home .home-main-logo {
    width: min(48vw, 220px) !important;
    aspect-ratio: 138 / 159;

    background-image: url("https://nado-seisaku.com/wp-content/uploads/2026/07/hero_logo_sp.png");
  }
}


/* ========================================
   小さいスマートフォン
======================================== */

@media screen and (max-width: 390px) {

  body.home .home-main-logo {
    width: min(50vw, 190px) !important;
  }
}

/* ========================================
   HOME：ヒーローロゴの視覚的中央補正
======================================== */

/* PC：ヘッダー64pxの半分だけ上へ */
@media screen and (min-width: 835px) {

  body.home .home-main-logo {
    transform: translateY(-32px) !important;
  }
}


/* SP・タブレット：ヘッダー56pxの半分だけ上へ */
@media screen and (max-width: 834px) {

  body.home .home-main-logo {
    transform: translateY(-28px) !important;
  }
}

/* ========================================
   HOME：PCロゴサイズ調整
======================================== */

@media screen and (min-width: 835px) {

  body.home .home-main-logo {
    width: min(52vw, 520px) !important;
  }
}

/* ========================================
   ABOUT：「等」にナドのルビ
======================================== */

.home-concept-title ruby {
  ruby-position: over;
}

.home-concept-title rt {
  font-family:
    "Yu Gothic",
    "游ゴシック",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Meiryo",
    sans-serif;

  font-size: 0.32em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-align: center;
}

/* ========================================
   ABOUT：説明文内の「等」を微拡大
======================================== */

.home-concept-text strong {
  font-size: 1.08em;
  font-weight: 700;
  line-height: 1;
  color: inherit;
}

/* ========================================
   ABOUT：SPでも改行を維持
======================================== */

@media screen and (max-width: 767px) {

  body.home .home-concept-title br,
  body.home .home-concept-text p br {
    display: inline !important;
  }
}

/* ========================================
   HOME：LABOカード リデザイン
   編集的な研究ノート型
======================================== */

body.home .home-labo {
  background: #fff;
}

body.home .home-labo-list {
  counter-reset: labo-card;

  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(24px, 3vw, 42px) !important;
}

body.home .home-labo-item {
  counter-increment: labo-card;

  position: relative;

  overflow: hidden;

  border: 1px solid #d9d9d5 !important;
  border-radius: 0 !important;

  background: #f8f8f5 !important;
  box-shadow: none !important;

  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

body.home .home-labo-item::before {
  content: "LABO " counter(labo-card, decimal-leading-zero);

  position: absolute;
  z-index: 4;
  top: 18px;
  left: 18px;

  padding: 7px 10px;

  color: #fff;
  background: #181818;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;

  pointer-events: none;
}

body.home .home-labo-item:hover {
  transform: translateY(-7px);

  border-color: #181818 !important;

  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.1) !important;
}

body.home .home-labo-item-link {
  color: #181818;
  text-decoration: none;
}

body.home .home-labo-image {
  position: relative;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  background: #e5e5e1;
}

body.home .home-labo-image::after {
  content: "";

  position: absolute;
  inset: 0;

  border-bottom: 1px solid rgba(0, 0, 0, 0.12);

  pointer-events: none;
}

body.home .home-labo-image img,
body.home .home-labo-thumbnail {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover;

  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.4s ease;
}

body.home .home-labo-item:hover .home-labo-thumbnail {
  transform: scale(1.04);
  filter: contrast(1.04);
}

body.home .home-labo-info {
  position: relative;

  padding: 26px 28px 30px !important;

  background: transparent !important;
}

body.home .home-labo-date {
  display: inline-block;

  margin: 0 0 15px !important;

  color: #777;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 11px !important;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
}

body.home h3.home-labo-item-title,
body.home .home-labo-item-title {
  margin: 0 !important;
  padding: 0 42px 0 0 !important;

  color: #181818;

  font-size: clamp(19px, 1.75vw, 27px) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.025em !important;
}

body.home .home-labo-excerpt {
  margin-top: 18px !important;
  padding-top: 18px;

  border-top: 1px solid #d7d7d2;

  color: #555;

  font-size: 13px !important;
  line-height: 1.9 !important;
  letter-spacing: 0.035em;
}

body.home .home-labo-info::after {
  content: "↗";

  position: absolute;
  top: 24px;
  right: 27px;

  color: #181818;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 22px;
  font-weight: 400;
  line-height: 1;

  transition: transform 0.3s ease;
}

body.home .home-labo-item:hover .home-labo-info::after {
  transform: translate(4px, -4px);
}


/* ========================================
   タブレット
======================================== */

@media screen and (max-width: 1023px) {

  body.home .home-works-item {
    width: min(68vw, 440px) !important;
    min-width: min(68vw, 440px) !important;

    flex-basis: min(68vw, 440px) !important;
  }

  body.home .home-labo-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 18px !important;
  }

  body.home .home-labo-info {
    padding: 23px 22px 26px !important;
  }
}


/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 767px) {

  /* WORKS */

  body.home .home-works-list {
    gap: 18px !important;
    padding-bottom: 18px !important;
  }

  body.home .home-works-item {
    width: calc(100vw - 48px) !important;
    min-width: calc(100vw - 48px) !important;
    max-width: 420px !important;

    flex: 0 0 calc(100vw - 48px) !important;
  }

  body.home .home-works-info {
    padding: 17px 42px 0 0 !important;
  }

  body.home .home-works-info::before {
    margin-bottom: 8px;

    font-size: 9px;
  }

  body.home h3.home-works-item-title,
  body.home .home-works-item-title {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }

  body.home .home-works-arrow {
    top: 19px;

    width: 31px;
    height: 31px;

    font-size: 14px;
  }


  /* LABO */

  body.home .home-labo-list {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  body.home .home-labo-item::before {
    top: 13px;
    left: 13px;

    padding: 6px 8px;

    font-size: 9px;
  }

  body.home .home-labo-info {
    padding: 21px 19px 24px !important;
  }

  body.home .home-labo-date {
    margin-bottom: 12px !important;
    font-size: 10px !important;
  }

  body.home h3.home-labo-item-title,
  body.home .home-labo-item-title {
    padding-right: 34px !important;

    font-size: 19px !important;
    line-height: 1.55 !important;
  }

  body.home .home-labo-excerpt {
    margin-top: 15px !important;
    padding-top: 15px;

    font-size: 12px !important;
    line-height: 1.85 !important;
  }

  body.home .home-labo-info::after {
    top: 20px;
    right: 18px;

    font-size: 19px;
  }
}

/* ========================================
   HOME：アクセントカラー
   ABOUTと同じネイビーブルーを使用
======================================== */

body.home {
  --nado-navy: #294d7c;
  --nado-navy-light: rgba(41, 77, 124, 0.12);
  --nado-navy-pale: rgba(41, 77, 124, 0.055);
}


/* ========================================
   LABO：ネイビーアクセント
======================================== */

/* LABO番号ラベル */
body.home .home-labo-item::before {
  background: var(--nado-navy) !important;
}


/* カード左側に細いライン */
body.home .home-labo-item::after {
  content: "";

  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 0;

  width: 4px;

  background: var(--nado-navy);

  transform: scaleY(0);
  transform-origin: top center;

  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);

  pointer-events: none;
}

body.home .home-labo-item:hover::after {
  transform: scaleY(1);
}


/* 通常時は淡いネイビーを含む背景 */
body.home .home-labo-item {
  background:
    linear-gradient(
      135deg,
      var(--nado-navy-pale) 0%,
      rgba(255, 255, 255, 0) 46%
    ),
    #f8f8f5 !important;
}


/* ホバー時の枠 */
body.home .home-labo-item:hover {
  border-color: var(--nado-navy) !important;

  box-shadow:
    0 18px 40px rgba(41, 77, 124, 0.14) !important;
}


/* 日付 */
body.home .home-labo-date {
  color: var(--nado-navy) !important;
}


/* 右上矢印 */
body.home .home-labo-info::after {
  color: var(--nado-navy) !important;
}


/* 説明文上の区切り線 */
body.home .home-labo-excerpt {
  border-top-color: var(--nado-navy-light) !important;
}


/* ========================================
   セクション見出しにも小さなアクセント
======================================== */

body.home .home-works .home-section-title,
body.home .home-labo .home-section-title {
  position: relative;

  padding-left: 22px !important;
}

body.home .home-works .home-section-title::before,
body.home .home-labo .home-section-title::before {
  content: "";

  position: absolute;
  top: 50%;
  left: 0;

  width: 5px;
  height: 0.72em;

  background: var(--nado-navy);

  transform: translateY(-50%);
}


/* 「一覧を見る」の矢印 */
body.home .home-works .home-text-link span:last-child,
body.home .home-labo .home-text-link span:last-child {
  color: var(--nado-navy);
}


/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 767px) {

  body.home .home-works-image::before {
    height: 3px;
  }

  body.home .home-works-item-title::after {
    margin-top: 10px;
  }

  body.home .home-labo-item::after {
    width: 3px;
  }

  body.home .home-works .home-section-title,
  body.home .home-labo .home-section-title {
    padding-left: 17px !important;
  }

  body.home .home-works .home-section-title::before,
  body.home .home-labo .home-section-title::before {
    width: 4px;
  }
}

/* ========================================
/* ========================================
   HOME：WORKS 最終版
   ・PCは画面幅いっぱいに4列
   ・回転なし
   ・2枚目と4枚目を明確に下げる
   ・大きな連番とトンボで遊びを加える
======================================== */

body.home .home-works {
  width: 100vw !important;
  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;
  overflow: hidden !important;
  background: #f3f3f1;
}

body.home .home-works .home-section-heading {
  width: calc(100% - 80px) !important;
  max-width: 1240px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

body.home .home-works-list {
  counter-reset: works-card;
}

body.home .home-works-item {
  counter-increment: works-card;
  position: relative;
  z-index: 1;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    z-index 0s;
}

body.home .home-works-item-link {
  display: block;
  width: 100%;
  color: #181818;
  text-decoration: none;
}

body.home .home-works-item-link:hover {
  color: #181818;
  text-decoration: none;
}


/* ----------------------------------------
   画像
---------------------------------------- */

body.home .home-works-image {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 0;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: #fff;
}

body.home .home-works-image img,
body.home .home-works-thumbnail,
body.home .home-works-no-image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  padding: 0;
  object-fit: cover;
  clip-path: inset(0);
}

body.home .home-works-thumbnail {
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s ease;
}

body.home .home-works-item:hover .home-works-thumbnail {
  transform: scale(1.035);
  filter: saturate(0.94);
}

body.home .home-works-no-image {
  place-items: center;
  color: #8d8d89;
  background:
    linear-gradient(
      rgba(41, 77, 124, 0.065) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(41, 77, 124, 0.065) 1px,
      transparent 1px
    ),
    #eeeeeb;
  background-size: 22px 22px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
}


/* ----------------------------------------
   大きな連番
---------------------------------------- */

body.home .home-works-item::before {
  content: counter(works-card, decimal-leading-zero);
  position: absolute;
  z-index: 6;
  top: -38px;
  right: 4px;
  color: rgba(41, 77, 124, 0.17);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(52px, 4.8vw, 82px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  pointer-events: none;
  transition:
    color 0.35s ease,
    transform 0.35s ease;
}

body.home .home-works-item:hover::before {
  color: rgba(41, 77, 124, 0.28);
  transform: translateY(-4px);
}


/* ----------------------------------------
   トンボ
---------------------------------------- */

body.home .home-works-image::before,
body.home .home-works-image::after {
  content: "";
  position: absolute;
  z-index: 7;
  width: 22px;
  height: 22px;
  opacity: 0.72;
  pointer-events: none;
  transition:
    width 0.32s ease,
    height 0.32s ease,
    opacity 0.32s ease,
    transform 0.32s ease;
}

body.home .home-works-image::before {
  top: -10px;
  left: -10px;
  border-top: 1px solid #294d7c;
  border-left: 1px solid #294d7c;
}

body.home .home-works-image::after {
  right: -10px;
  bottom: -10px;
  border-right: 1px solid #294d7c;
  border-bottom: 1px solid #294d7c;
}

body.home .home-works-item:hover .home-works-image::before,
body.home .home-works-item:hover .home-works-image::after {
  width: 30px;
  height: 30px;
  opacity: 1;
}

body.home .home-works-item:hover .home-works-image::before {
  transform: translate(-2px, -2px);
}

body.home .home-works-item:hover .home-works-image::after {
  transform: translate(2px, 2px);
}


/* ----------------------------------------
   カード情報
---------------------------------------- */

body.home .home-works-info {
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 0;
  padding: 18px 42px 0 0 !important;
  display: block !important;
  border: 0;
  background: transparent;
}

body.home .home-works-info::before {
  content: "WORKS";
  display: block;
  margin-bottom: 9px;
  color: #294d7c;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2em;
}

body.home h3.home-works-item-title,
body.home .home-works-item-title {
  margin: 0 !important;
  padding: 0 !important;
  color: #181818;
  background: transparent !important;
  border: 0 !important;
  font-size: clamp(15px, 1.15vw, 20px) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.01em !important;
}

body.home .home-works-item-title::after {
  content: "" !important;
  display: block !important;
  width: 20px;
  height: 2px;
  margin-top: 14px;
  background: #294d7c;
  transition: width 0.3s ease;
}

body.home .home-works-item:hover .home-works-item-title::after {
  width: 44px;
}

body.home .home-works-arrow {
  position: absolute;
  top: 19px;
  right: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #294d7c;
  border-radius: 50%;
  color: #294d7c;
  font-size: 13px;
  line-height: 1;
  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s ease;
}

body.home .home-works-item:hover .home-works-arrow {
  color: #fff;
  background: #294d7c;
  transform: translateX(4px);
}


/* ========================================
   HOME：WORKS PC
   4列＋明確な段差
======================================== */

@media screen and (min-width: 1024px) {

  body.home .home-works-list {
    width: 100vw !important;
    max-width: none !important;
    margin-right: calc(50% - 50vw) !important;
    margin-left: calc(50% - 50vw) !important;
    padding:
      42px
      clamp(28px, 2.2vw, 48px)
      66px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: start;
    gap: clamp(28px, 3.2vw, 68px) !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    scrollbar-width: none !important;
  }

  body.home .home-works-list::-webkit-scrollbar {
    display: none !important;
  }

  body.home .home-works-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
    transform: none !important;
  }

  /* 2枚目と4枚目だけ、明確に下げる */
  body.home .home-works-item:nth-child(4n + 2),
  body.home .home-works-item:nth-child(4n + 4) {
    transform: translateY(52px) !important;
  }

  body.home .home-works-item:hover {
    z-index: 8;
    transform: translateY(-8px) !important;
  }

  body.home .home-works-item:nth-child(4n + 2):hover,
  body.home .home-works-item:nth-child(4n + 4):hover {
    transform: translateY(40px) !important;
  }
}


/* ========================================
   HOME：WORKS タブレット
   2列＋控えめな段差
======================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {

  body.home .home-works-list {
    width: 100% !important;
    margin: 0 !important;
    padding: 34px 0 48px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 34px 22px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  body.home .home-works-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
    transform: none !important;
  }

  body.home .home-works-item:nth-child(even) {
    transform: translateY(28px) !important;
  }

  body.home .home-works-item:hover {
    z-index: 8;
    transform: translateY(-5px) !important;
  }

  body.home .home-works-item:nth-child(even):hover {
    transform: translateY(20px) !important;
  }
}


/* ========================================
   HOME：WORKS スマートフォン
   1列・段差なし
======================================== */

@media screen and (max-width: 767px) {

  body.home .home-works-list {
    width: 100% !important;
    margin: 0 !important;
    padding: 28px 0 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 58px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  body.home .home-works-item,
  body.home .home-works-item:nth-child(odd),
  body.home .home-works-item:nth-child(even) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
    transform: none !important;
  }

  body.home .home-works-item:hover {
    transform: translateY(-4px) !important;
  }

  body.home .home-works-item::before {
    top: -25px;
    right: 3px;
    font-size: 46px;
  }

  body.home .home-works-image::before,
  body.home .home-works-image::after {
    width: 17px;
    height: 17px;
  }

  body.home .home-works-image::before {
    top: -7px;
    left: -7px;
  }

  body.home .home-works-image::after {
    right: -7px;
    bottom: -7px;
  }

  body.home .home-works-info {
    padding: 17px 40px 0 0 !important;
  }

  body.home h3.home-works-item-title,
  body.home .home-works-item-title {
    font-size: 17px !important;
  }
}


/* ========================================
   動きを減らす設定
======================================== */

@media (prefers-reduced-motion: reduce) {

  body.home .home-works-item,
  body.home .home-works-item::before,
  body.home .home-works-image::before,
  body.home .home-works-image::after,
  body.home .home-works-thumbnail,
  body.home .home-works-item-title::after,
  body.home .home-works-arrow {
    transition: none !important;
  }
}

   WORKSアーカイブ：基本
======================================== */

.works-page,
.works-page * {
  box-sizing: border-box;
}

.works-page {
  width: 100%;

  margin: 0;
  padding: 0;

  color: #181818;
  background: #fff;
}


/* ========================================
   WORKSアーカイブ：Cocoonレイアウト解除
======================================== */

.post-type-archive-works .content,
.post-type-archive-works .content-in,
.post-type-archive-works .main {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;
}

.post-type-archive-works .content-in {
  display: block;
}

.post-type-archive-works .main {
  float: none;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;
}

.post-type-archive-works .sidebar {
  display: none;
}


/* Cocoon標準のアーカイブ見出しを非表示 */

.post-type-archive-works .archive-title,
.post-type-archive-works .list-title {
  display: none;
}


/* ========================================
   WORKSアーカイブ：ヒーロー
======================================== */

.works-archive-hero {
  width: 100vw;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);

  background: #f3f3f1;
}

.works-archive-hero-inner {
  width: calc(100% - 80px);
  max-width: 1240px;
  min-height: 330px;

  margin: 0 auto;
  padding: 70px 0;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(320px, 0.75fr);

  align-items: end;
  gap: 70px;
}

.works-archive-label {
  margin: 0 0 18px;

  color: #294d7c;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
}

.works-archive-title {
  margin: 0;
  padding: 0;

  color: #181818;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: clamp(64px, 8vw, 118px);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.045em;
}

.works-archive-introduction {
  padding-bottom: 4px;
}

.works-archive-introduction p {
  margin: 0;

  color: #454545;

  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.045em;
}


/* ========================================
   WORKSアーカイブ：一覧
======================================== */

.works-archive {
  width: 100vw;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);

  background: #fff;
}

.works-archive-inner {
  width: 100%;

  margin: 0 auto;
  padding:
    clamp(70px, 8vw, 120px)
    clamp(24px, 3vw, 52px)
    clamp(90px, 10vw, 150px);
}

.works-archive-grid {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  align-items: start;

  gap:
    clamp(72px, 8vw, 130px)
    clamp(25px, 3.5vw, 66px);
}


/* ========================================
   WORKSアーカイブ：カード
======================================== */

.works-archive-card {
  position: relative;
  z-index: 1;

  min-width: 0;

  margin: 0;
  padding: 0;

  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    z-index 0s;
}


/* 上下ずらし＋微回転 */

.works-archive-card:nth-child(4n + 1) {
  transform:
    translateY(22px)
    rotate(-0.35deg);
}

.works-archive-card:nth-child(4n + 2) {
  transform:
    translateY(-10px)
    rotate(0.3deg);
}

.works-archive-card:nth-child(4n + 3) {
  transform:
    translateY(12px)
    rotate(-0.2deg);
}

.works-archive-card:nth-child(4n + 4) {
  transform:
    translateY(-18px)
    rotate(0.4deg);
}

.works-archive-card:hover {
  z-index: 5;

  transform:
    translateY(-8px)
    rotate(0deg)
    scale(1.012);
}

.works-archive-card-link {
  display: block;

  width: 100%;

  color: #181818;
  text-decoration: none;
}

.works-archive-card-link:hover {
  color: #181818;
  text-decoration: none;
}


/* ========================================
   WORKSアーカイブ：画像
======================================== */

.works-archive-card-image {
  position: relative;

  width: 100%;
  aspect-ratio: 4 / 3;

  overflow: visible;

  background: #ededeb;
}

.works-archive-thumbnail,
.works-archive-card-image img {
  display: block;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover;

  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s ease;
}

.works-archive-card:hover .works-archive-thumbnail {
  transform: scale(1.035);
  filter: saturate(0.94);
}

.works-archive-no-image {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  color: #8c8c89;
  background:
    linear-gradient(
      rgba(41, 77, 124, 0.07) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(41, 77, 124, 0.07) 1px,
      transparent 1px
    ),
    #eeeeeb;

  background-size: 22px 22px;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 10px;
  letter-spacing: 0.18em;
}


/* ========================================
   WORKSアーカイブ：連番
======================================== */

.works-archive-number {
  position: absolute;
  z-index: 5;
  top: -34px;
  right: 4px;

  color: rgba(41, 77, 124, 0.17);

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: clamp(52px, 5vw, 84px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;

  pointer-events: none;

  transition:
    color 0.35s ease,
    transform 0.35s ease;
}

.works-archive-card:hover .works-archive-number {
  color: rgba(41, 77, 124, 0.27);

  transform:
    translateY(-5px)
    rotate(-3deg);
}


/* ========================================
   WORKSアーカイブ：トンボ
======================================== */

.works-archive-corner {
  position: absolute;
  z-index: 6;

  width: 22px;
  height: 22px;

  opacity: 0.7;

  pointer-events: none;

  transition:
    width 0.35s ease,
    height 0.35s ease,
    opacity 0.35s ease,
    transform 0.35s ease;
}

.works-archive-corner-top {
  top: -10px;
  left: -10px;

  border-top: 1px solid #294d7c;
  border-left: 1px solid #294d7c;
}

.works-archive-corner-bottom {
  right: -10px;
  bottom: -10px;

  border-right: 1px solid #294d7c;
  border-bottom: 1px solid #294d7c;
}

.works-archive-card:hover .works-archive-corner {
  width: 30px;
  height: 30px;

  opacity: 1;
}

.works-archive-card:hover .works-archive-corner-top {
  transform: translate(-2px, -2px);
}

.works-archive-card:hover .works-archive-corner-bottom {
  transform: translate(2px, 2px);
}


/* ========================================
   WORKSアーカイブ：カード情報
======================================== */

.works-archive-card-info {
  position: relative;

  padding: 20px 42px 0 0;
}

.works-archive-card-label {
  margin: 0 0 10px;

  color: #294d7c;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
}

.works-archive-card-title {
  margin: 0;
  padding: 0;

  color: #181818;

  font-size: clamp(15px, 1.2vw, 20px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.015em;
}

.works-archive-card-title::after {
  content: "";

  display: block;

  width: 20px;
  height: 2px;

  margin-top: 14px;

  background: #294d7c;

  transition: width 0.3s ease;
}

.works-archive-card:hover .works-archive-card-title::after {
  width: 44px;
}

.works-archive-card-excerpt {
  margin: 15px 0 0;

  color: #666;

  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

.works-archive-card-arrow {
  position: absolute;
  top: 20px;
  right: 0;

  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border: 1px solid #294d7c;
  border-radius: 50%;

  color: #294d7c;

  font-size: 13px;
  line-height: 1;

  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s ease;
}

.works-archive-card:hover .works-archive-card-arrow {
  color: #fff;
  background: #294d7c;

  transform: translateX(4px);
}


/* ========================================
   WORKSアーカイブ：ページネーション
======================================== */

.works-archive-pagination {
  margin-top: 110px;
}

.works-archive-pagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.works-archive-pagination .page-numbers {
  min-width: 38px;
  height: 38px;

  display: inline-grid;
  place-items: center;

  border: 1px solid #d5d5d2;
  border-radius: 50%;

  color: #294d7c;
  background: #fff;

  font-size: 12px;
  text-decoration: none;

  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease;
}

.works-archive-pagination a.page-numbers:hover,
.works-archive-pagination .page-numbers.current {
  border-color: #294d7c;

  color: #fff;
  background: #294d7c;
}

.works-archive-empty {
  padding: 90px 20px;

  color: #777;

  text-align: center;
}


/* ========================================
   WORKSアーカイブ：タブレット
======================================== */

@media screen and (max-width: 1023px) {

  .works-archive-hero-inner {
    width: calc(100% - 48px);

    grid-template-columns:
      minmax(0, 1fr)
      minmax(260px, 0.75fr);

    gap: 40px;
  }

  .works-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 80px 28px;
  }

  .works-archive-card:nth-child(odd) {
    transform:
      translateY(8px)
      rotate(-0.2deg);
  }

  .works-archive-card:nth-child(even) {
    transform:
      translateY(-7px)
      rotate(0.2deg);
  }

  .works-archive-card:hover {
    transform:
      translateY(-6px)
      rotate(0deg);
  }
}


/* ========================================
   WORKSアーカイブ：スマートフォン
======================================== */

@media screen and (max-width: 767px) {

  .works-archive-hero-inner {
    width: calc(100% - 30px);
    min-height: 280px;

    padding: 55px 0 48px;

    display: block;
  }

  .works-archive-label {
    margin-bottom: 14px;

    font-size: 9px;
  }

  .works-archive-title {
    font-size: clamp(58px, 20vw, 82px);
  }

  .works-archive-introduction {
    margin-top: 38px;
    padding: 0;
  }

  .works-archive-introduction p {
    font-size: 12px;
    line-height: 1.9;
  }

  .works-archive-introduction p br {
    display: none;
  }

  .works-archive-inner {
    padding:
      72px
      15px
      90px;
  }

  .works-archive-grid {
    grid-template-columns: 1fr;
    gap: 76px;
  }

  .works-archive-card,
  .works-archive-card:nth-child(odd),
  .works-archive-card:nth-child(even) {
    transform: none;
  }

  .works-archive-card:hover {
    transform: translateY(-4px);
  }

  .works-archive-number {
    top: -25px;
    right: 4px;

    font-size: 48px;
  }

  .works-archive-card-info {
    padding: 18px 40px 0 0;
  }

  .works-archive-card-title {
    font-size: 17px;
  }

  .works-archive-card-excerpt {
    font-size: 12px;
  }

  .works-archive-corner {
    width: 17px;
    height: 17px;
  }

  .works-archive-corner-top {
    top: -7px;
    left: -7px;
  }

  .works-archive-corner-bottom {
    right: -7px;
    bottom: -7px;
  }

  .works-archive-pagination {
    margin-top: 75px;
  }
}


/* ========================================
   動きを減らす設定
======================================== */

@media (prefers-reduced-motion: reduce) {

  .works-archive-card,
  .works-archive-thumbnail,
  .works-archive-number,
  .works-archive-corner,
  .works-archive-card-title::after,
  .works-archive-card-arrow {
    transition: none !important;
  }

  .works-archive-card,
  .works-archive-card:nth-child(odd),
  .works-archive-card:nth-child(even) {
    transform: none !important;
  }
}


/* ========================================
   WORKS個別：基本
======================================== */

.single-works .content,
.single-works .content-in,
.single-works .main {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;
}

.single-works .content-in {
  display: block;
}

.single-works .main {
  float: none;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;
}

.single-works .sidebar {
  display: none;
}

.single-works .article-header,
.single-works .entry-title,
.single-works .eye-catch,
.single-works .date-tags,
.single-works .sns-share,
.single-works .sns-follow,
.single-works .footer-meta {
  display: none;
}

.works-single-page,
.works-single-page * {
  box-sizing: border-box;
}

.works-single-page {
  width: 100%;

  margin: 0;
  padding: 0;

  color: #181818;
  background: #fff;
}


/* ========================================
   WORKS個別：ヘッダー
======================================== */

.works-single-header {
  width: 100vw;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);

  background:
    linear-gradient(
      135deg,
      rgba(41, 77, 124, 0.06),
      transparent 44%
    ),
    #f3f3f1;
}

.works-single-header-inner {
  width: calc(100% - 80px);
  max-width: 1240px;
  min-height: 400px;

  margin: 0 auto;
  padding: 78px 0 68px;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(240px, 0.35fr);

  align-items: end;
  gap: 70px;
}

.works-single-label {
  margin: 0 0 22px;

  color: #294d7c;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.22em;
}

.works-single-title {
  max-width: 950px;

  margin: 0;
  padding: 0;

  color: #181818;

  font-size: clamp(42px, 5.4vw, 78px);
  font-weight: 600;
  line-height: 1.23;
  letter-spacing: 0.035em;
}

.works-single-lead {
  max-width: 760px;

  margin: 30px 0 0;

  color: #555;

  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.045em;
}

.works-single-meta {
  padding-bottom: 5px;
}

.works-single-meta-item {
  margin: 0 0 26px;

  color: #555;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.works-single-meta-label {
  display: block;

  margin-bottom: 8px;

  color: #294d7c;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.works-single-back {
  display: inline-flex;
  align-items: center;
  gap: 14px;

  color: #181818;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-decoration: none;

  transition: opacity 0.25s ease;
}

.works-single-back:hover {
  color: #181818;
  text-decoration: none;
  opacity: 0.5;
}


/* ========================================
   WORKS個別：メイン画像
======================================== */

.works-single-visual {
  width: 100vw;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);

  background: #fff;
}

.works-single-visual-inner {
  width: calc(100% - 80px);
  max-width: 1440px;

  margin: 0 auto;
  padding: clamp(70px, 8vw, 120px) 0;
}

.works-single-main-image {
  position: relative;

  width: 100%;

  margin: 0;
  padding: 0;

  background: #ededeb;
}

.works-single-thumbnail {
  display: block;

  width: 100%;
  height: auto;

  margin: 0;
}

.works-single-no-image {
  width: 100%;
  min-height: 620px;

  display: grid;
  place-items: center;

  color: #888;
  background:
    linear-gradient(
      rgba(41, 77, 124, 0.06) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(41, 77, 124, 0.06) 1px,
      transparent 1px
    ),
    #eeeeeb;

  background-size: 28px 28px;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 11px;
  letter-spacing: 0.2em;
}


/* トンボ */

.works-single-corner {
  position: absolute;
  z-index: 3;

  width: 34px;
  height: 34px;

  pointer-events: none;
}

.works-single-corner-top {
  top: -15px;
  left: -15px;

  border-top: 1px solid #294d7c;
  border-left: 1px solid #294d7c;
}

.works-single-corner-bottom {
  right: -15px;
  bottom: -15px;

  border-right: 1px solid #294d7c;
  border-bottom: 1px solid #294d7c;
}


/* ========================================
   WORKS個別：本文
======================================== */

.works-single-content {
  width: 100vw;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);

  background: #fff;
}

.works-single-content-inner {
  width: calc(100% - 80px);
  max-width: 1060px;

  margin: 0 auto;
  padding: 20px 0 clamp(100px, 12vw, 180px);

  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);

  align-items: start;
  gap: 70px;
}

.works-single-content-label {
  position: sticky;
  top: 100px;

  padding-top: 6px;

  color: #294d7c;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2em;
}

.works-single-content-label::before {
  content: "";

  display: block;

  width: 36px;
  height: 2px;

  margin-bottom: 16px;

  background: #294d7c;
}

.works-single-entry {
  min-width: 0;

  color: #333;

  font-size: 15px;
  line-height: 2.1;
  letter-spacing: 0.045em;
}

.works-single-entry > *:first-child {
  margin-top: 0;
}

.works-single-entry > *:last-child {
  margin-bottom: 0;
}

.works-single-entry p {
  margin: 0 0 2em;
}

.works-single-entry h2 {
  margin: 3.4em 0 1.2em;
  padding: 0 0 18px;

  border-bottom: 1px solid rgba(41, 77, 124, 0.22);

  color: #181818;
  background: transparent;

  font-size: clamp(25px, 2.8vw, 38px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.works-single-entry h2::before,
.works-single-entry h2::after {
  content: none;
  display: none;
}

.works-single-entry h3 {
  position: relative;

  margin: 2.8em 0 1em;
  padding: 0 0 0 18px;

  border: 0;

  color: #181818;
  background: transparent;

  font-size: clamp(19px, 2vw, 26px);
  font-weight: 600;
  line-height: 1.6;
}

.works-single-entry h3::before {
  content: "";

  position: absolute;
  top: 0.25em;
  bottom: 0.25em;
  left: 0;

  width: 4px;

  background: #294d7c;
}

.works-single-entry img {
  display: block;

  max-width: 100%;
  height: auto;

  margin: 3em auto;
}

.works-single-entry figure {
  margin: 3.5em 0;
}

.works-single-entry figcaption {
  margin-top: 12px;

  color: #777;

  font-size: 11px;
  line-height: 1.7;
  text-align: center;
}

.works-single-entry blockquote {
  margin: 3em 0;
  padding: 30px 36px;

  border: 0;
  border-left: 4px solid #294d7c;

  color: #444;
  background: rgba(41, 77, 124, 0.055);

  font-size: 14px;
  line-height: 2;
}


/* ========================================
   WORKS個別：前後ナビ
======================================== */

.works-single-navigation {
  width: 100vw;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);

  border-top: 1px solid #dcdcd8;

  background: #f3f3f1;
}

.works-single-navigation-inner {
  width: calc(100% - 80px);
  max-width: 1240px;
  min-height: 250px;

  margin: 0 auto;
  padding: 55px 0;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    80px
    minmax(0, 1fr);

  align-items: center;
  gap: 50px;
}

.works-single-nav-item {
  display: block;

  color: #181818;
  text-decoration: none;
}

.works-single-nav-item:hover {
  color: #181818;
  text-decoration: none;
}

.works-single-nav-next {
  text-align: right;
}

.works-single-nav-direction {
  display: block;

  margin-bottom: 14px;

  color: #294d7c;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
}

.works-single-nav-title {
  display: block;

  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 600;
  line-height: 1.6;

  transition: transform 0.3s ease;
}

.works-single-nav-previous:hover .works-single-nav-title {
  transform: translateX(-6px);
}

.works-single-nav-next:hover .works-single-nav-title {
  transform: translateX(6px);
}

.works-single-nav-index {
  width: 54px;
  height: 54px;

  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(2, 7px);
  grid-template-rows: repeat(2, 7px);
  place-content: center;
  gap: 5px;

  border: 1px solid #294d7c;
  border-radius: 50%;

  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

.works-single-nav-index span {
  display: block;

  width: 7px;
  height: 7px;

  background: #294d7c;

  transition: background-color 0.3s ease;
}

.works-single-nav-index:hover {
  background: #294d7c;
  transform: rotate(90deg);
}

.works-single-nav-index:hover span {
  background: #fff;
}


/* ========================================
   タブレット
======================================== */

@media screen and (max-width: 1023px) {

  .works-single-header-inner {
    width: calc(100% - 48px);

    grid-template-columns:
      minmax(0, 1fr)
      190px;

    gap: 40px;
  }

  .works-single-visual-inner {
    width: calc(100% - 48px);
  }

  .works-single-content-inner {
    width: calc(100% - 48px);

    grid-template-columns: 130px minmax(0, 1fr);
    gap: 42px;
  }

  .works-single-navigation-inner {
    width: calc(100% - 48px);
  }
}


/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 767px) {

  .works-single-header-inner {
    width: calc(100% - 30px);
    min-height: 0;

    padding: 56px 0 48px;

    display: block;
  }

  .works-single-label {
    margin-bottom: 17px;

    font-size: 9px;
  }

  .works-single-title {
    font-size: clamp(34px, 10.5vw, 50px);
    line-height: 1.35;
  }

  .works-single-lead {
    margin-top: 24px;

    font-size: 13px;
    line-height: 1.9;
  }

  .works-single-meta {
    margin-top: 38px;
    padding: 0;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
  }

  .works-single-meta-item {
    margin: 0;

    font-size: 11px;
  }

  .works-single-back {
    font-size: 9px;
  }

  .works-single-visual-inner {
    width: calc(100% - 30px);
    padding: 58px 0 72px;
  }

  .works-single-corner {
    width: 22px;
    height: 22px;
  }

  .works-single-corner-top {
    top: -9px;
    left: -9px;
  }

  .works-single-corner-bottom {
    right: -9px;
    bottom: -9px;
  }

  .works-single-no-image {
    min-height: 300px;
  }

  .works-single-content-inner {
    width: calc(100% - 30px);

    padding: 0 0 95px;

    display: block;
  }

  .works-single-content-label {
    position: static;

    margin-bottom: 42px;
  }

  .works-single-entry {
    font-size: 14px;
    line-height: 2;
  }

  .works-single-entry h2 {
    margin-top: 3em;

    font-size: 25px;
  }

  .works-single-entry h3 {
    font-size: 20px;
  }

  .works-single-entry img,
  .works-single-entry figure {
    margin-top: 2.5em;
    margin-bottom: 2.5em;
  }

  .works-single-navigation-inner {
    width: calc(100% - 30px);
    min-height: 0;

    padding: 46px 0;

    grid-template-columns:
      minmax(0, 1fr)
      48px
      minmax(0, 1fr);

    gap: 15px;
  }

  .works-single-nav-index {
    width: 44px;
    height: 44px;

    grid-template-columns: repeat(2, 6px);
    grid-template-rows: repeat(2, 6px);
    gap: 4px;
  }

  .works-single-nav-index span {
    width: 6px;
    height: 6px;
  }

  .works-single-nav-direction {
    margin-bottom: 10px;

    font-size: 8px;
  }

  .works-single-nav-title {
    font-size: 12px;
    line-height: 1.5;
  }
}


/* ========================================
   動きを減らす設定
======================================== */

@media (prefers-reduced-motion: reduce) {

  .works-single-back,
  .works-single-nav-title,
  .works-single-nav-index,
  .works-single-nav-index span {
    transition: none !important;
  }

  .works-single-nav-index:hover {
    transform: none;
  }
}

/* ========================================
   WORKS個別：作品集レイアウト
======================================== */

/* 本文の基本幅 */
.works-single-entry {
  --works-navy: #294d7c;
  --works-border: rgba(41, 77, 124, 0.18);
  --works-pale: rgba(41, 77, 124, 0.055);
}


/* ========================================
   冒頭文
======================================== */

.works-single-entry > p:first-child {
  color: #222;

  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.055em;
}


/* ========================================
   見出し
======================================== */

.works-single-entry h2 {
  position: relative;

  margin: 4.2em 0 1.5em;
  padding: 0 0 22px;

  border-bottom: 1px solid var(--works-border);

  color: #181818;
  background: transparent;

  font-size: clamp(28px, 3vw, 42px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.works-single-entry h2::before {
  content: "SECTION";

  display: block;

  margin-bottom: 14px;

  color: var(--works-navy);

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.22em;
}

.works-single-entry h2::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: -1px;

  width: 48px;
  height: 3px;

  background: var(--works-navy);
}

.works-single-entry h3 {
  position: relative;

  margin: 3em 0 1.2em;
  padding-left: 20px;

  color: #181818;
  background: transparent;

  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.04em;
}

.works-single-entry h3::before {
  content: "";

  position: absolute;
  top: 0.2em;
  bottom: 0.2em;
  left: 0;

  width: 4px;

  background: var(--works-navy);
}


/* ========================================
   通常画像
======================================== */

.works-single-entry figure.wp-block-image {
  position: relative;

  margin: clamp(50px, 7vw, 90px) 0;
}

.works-single-entry figure.wp-block-image img {
  display: block;

  width: 100%;
  height: auto;

  margin: 0;

  background: #ededeb;
}


/* 画像左上のトンボ */
.works-single-entry figure.wp-block-image::before {
  content: "";

  position: absolute;
  z-index: 3;
  top: -10px;
  left: -10px;

  width: 24px;
  height: 24px;

  border-top: 1px solid var(--works-navy);
  border-left: 1px solid var(--works-navy);

  pointer-events: none;
}


/* ========================================
   キャプション
======================================== */

.works-single-entry figcaption,
.works-single-entry .wp-element-caption {
  position: relative;

  margin: 14px 0 0;
  padding-left: 30px;

  color: #777;

  font-family:
    "Helvetica Neue",
    Arial,
    "Yu Gothic",
    sans-serif;

  font-size: 10px;
  line-height: 1.75;
  letter-spacing: 0.07em;
  text-align: left;
}

.works-single-entry figcaption::before,
.works-single-entry .wp-element-caption::before {
  content: "";

  position: absolute;
  top: 0.8em;
  left: 0;

  width: 18px;
  height: 1px;

  background: var(--works-navy);
}


/* ========================================
   全幅画像
   ブロックの追加CSSクラスに
   works-image-wide を指定
======================================== */

.works-single-entry .works-image-wide {
  width: min(1180px, calc(100vw - 48px));

  margin-right: 50%;
  margin-left: 50%;

  transform: translateX(-50%);
}

.works-single-entry .works-image-wide img {
  width: 100%;
}


/* ========================================
   画面幅いっぱいの画像
   追加CSSクラス：works-image-full
======================================== */

.works-single-entry .works-image-full {
  width: 100vw;

  margin-top: clamp(70px, 9vw, 130px);
  margin-right: 50%;
  margin-bottom: clamp(70px, 9vw, 130px);
  margin-left: 50%;

  transform: translateX(-50%);
}

.works-single-entry .works-image-full::before {
  display: none;
}

.works-single-entry .works-image-full img {
  width: 100%;
}


/* ========================================
   2枚組画像
   グループブロックに
   works-image-pair を指定
======================================== */

.works-single-entry .works-image-pair {
  width: min(1180px, calc(100vw - 48px));

  margin:
    clamp(60px, 8vw, 110px)
    50%;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 30px);

  transform: translateX(-50%);
}

.works-single-entry .works-image-pair figure,
.works-single-entry .works-image-pair .wp-block-image {
  margin: 0;
}

.works-single-entry .works-image-pair figure::before {
  display: none;
}


/* ========================================
   案件概要ボックス
   グループブロックに
   works-project-data を指定
======================================== */

.works-single-entry .works-project-data {
  margin: 0 0 clamp(70px, 9vw, 120px);
  padding: clamp(28px, 4vw, 48px);

  border-top: 4px solid var(--works-navy);
  border-bottom: 1px solid var(--works-border);

  background:
    linear-gradient(
      135deg,
      var(--works-pale),
      transparent 58%
    ),
    #f8f8f5;
}

.works-single-entry .works-project-data::before {
  content: "PROJECT DATA";

  display: block;

  margin-bottom: 28px;

  color: var(--works-navy);

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.22em;
}

.works-single-entry .works-project-data p {
  margin: 0;
  padding: 12px 0;

  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 24px;

  border-bottom: 1px solid rgba(41, 77, 124, 0.12);

  font-size: 13px;
  line-height: 1.75;
}

.works-single-entry .works-project-data p:last-child {
  border-bottom: 0;
}

.works-single-entry .works-project-data strong {
  color: var(--works-navy);

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
}


/* ========================================
   強調文
   段落ブロックに
   works-highlight-text を指定
======================================== */

.works-single-entry .works-highlight-text {
  position: relative;

  margin: clamp(70px, 9vw, 120px) 0;
  padding: 36px 0 36px 42px;

  border-left: 5px solid var(--works-navy);

  color: #181818;

  font-size: clamp(21px, 2.5vw, 34px);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.06em;
}

.works-single-entry .works-highlight-text::before {
  content: "“";

  position: absolute;
  top: -22px;
  left: 17px;

  color: rgba(41, 77, 124, 0.16);

  font-family: Georgia, serif;
  font-size: 90px;
  line-height: 1;
}


/* ========================================
   ネイビー背景セクション
   グループブロックに
   works-navy-section を指定
======================================== */

.works-single-entry .works-navy-section {
  width: 100vw;

  margin:
    clamp(80px, 10vw, 140px)
    50%;

  padding:
    clamp(70px, 9vw, 130px)
    max(24px, calc((100vw - 900px) / 2));

  color: #fff;
  background: var(--works-navy);

  transform: translateX(-50%);
}

.works-single-entry .works-navy-section > *:first-child {
  margin-top: 0;
}

.works-single-entry .works-navy-section > *:last-child {
  margin-bottom: 0;
}

.works-single-entry .works-navy-section h2,
.works-single-entry .works-navy-section h3,
.works-single-entry .works-navy-section p {
  color: #fff;
}

.works-single-entry .works-navy-section h2 {
  border-bottom-color: rgba(255, 255, 255, 0.28);
}

.works-single-entry .works-navy-section h2::before {
  color: rgba(255, 255, 255, 0.72);
}

.works-single-entry .works-navy-section h2::after,
.works-single-entry .works-navy-section h3::before {
  background: #fff;
}


/* ========================================
   数字・ポイント表示
   カラムブロックに
   works-points を指定
======================================== */

.works-single-entry .works-points {
  margin: clamp(60px, 8vw, 100px) 0;
  gap: 18px;
}

.works-single-entry .works-points > .wp-block-column {
  position: relative;

  min-height: 170px;
  padding: 28px 26px;

  border: 1px solid var(--works-border);

  background: #fff;
}

.works-single-entry .works-points > .wp-block-column::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 4px;
  height: 100%;

  background: var(--works-navy);
}

.works-single-entry .works-points h3 {
  margin: 0 0 18px;
  padding: 0;

  font-size: 17px;
}

.works-single-entry .works-points h3::before {
  display: none;
}

.works-single-entry .works-points p {
  margin: 0;

  color: #666;

  font-size: 12px;
  line-height: 1.85;
}


/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 767px) {

  .works-single-entry > p:first-child {
    font-size: 16px;
    line-height: 1.95;
  }

  .works-single-entry h2 {
    margin-top: 3.5em;
    padding-bottom: 17px;

    font-size: 26px;
  }

  .works-single-entry h3 {
    font-size: 20px;
  }

  .works-single-entry figure.wp-block-image {
    margin: 48px 0;
  }

  .works-single-entry .works-image-wide {
    width: calc(100vw - 30px);
  }

  .works-single-entry .works-image-full {
    margin-top: 65px;
    margin-bottom: 65px;
  }

  .works-single-entry .works-image-pair {
    width: calc(100vw - 30px);

    margin-top: 55px;
    margin-bottom: 55px;

    grid-template-columns: 1fr;
    gap: 18px;
  }

  .works-single-entry .works-project-data {
    padding: 25px 20px;
  }

  .works-single-entry .works-project-data p {
    padding: 13px 0;

    display: block;
  }

  .works-single-entry .works-project-data strong {
    display: block;
    margin-bottom: 7px;
  }

  .works-single-entry .works-highlight-text {
    margin: 60px 0;
    padding: 28px 0 28px 24px;

    font-size: 20px;
    line-height: 1.75;
  }

  .works-single-entry .works-navy-section {
    padding:
      65px
      24px;
  }

  .works-single-entry .works-points {
    display: block;
  }

  .works-single-entry .works-points > .wp-block-column {
    min-height: 0;
    margin-bottom: 16px;
  }
}


/* ========================================
   WORKS個別：PROJECT DATA周辺の調整
======================================== */

/* メイン画像下の余白を縮める */
.works-single-visual-inner {
  padding-bottom: clamp(45px, 5vw, 70px) !important;
}


/* 本文エリアを少し上へ詰める */
.works-single-content-inner {
  padding-top: 0 !important;

  grid-template-columns:
    150px
    minmax(0, 1fr) !important;

  gap: clamp(40px, 5vw, 70px) !important;
}


/* PROJECT NOTEの位置 */
.works-single-content-label {
  top: 90px;

  padding-top: 5px;
}


/* PROJECT DATAを横に広くする */
.works-single-entry .works-project-data {
  width: 100% !important;
  max-width: none !important;

  margin-top: 0 !important;
  margin-bottom: clamp(70px, 8vw, 110px) !important;

  padding:
    clamp(30px, 4vw, 48px)
    clamp(34px, 5vw, 62px) !important;
}


/* 案件情報を表のように整える */
.works-single-entry .works-project-data p {
  margin: 0 !important;
  padding: 13px 0 !important;

  display: grid !important;
  grid-template-columns: 130px minmax(0, 1fr) !important;
  align-items: baseline;
  gap: 22px !important;

  border-bottom:
    1px solid rgba(41, 77, 124, 0.15) !important;

  font-size: 14px !important;
  line-height: 1.7 !important;
}

.works-single-entry .works-project-data p:last-child {
  border-bottom: 0 !important;
}


/* 左側の項目名 */
.works-single-entry .works-project-data strong {
  display: block;

  color: #294d7c;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 10px !important;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
}


/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 767px) {

  .works-single-visual-inner {
    padding-bottom: 45px !important;
  }

  .works-single-content-inner {
    padding-top: 0 !important;
  }

  .works-single-content-label {
    margin-bottom: 26px !important;
  }

  .works-single-entry .works-project-data {
    padding: 27px 21px !important;
    margin-bottom: 65px !important;
  }

  .works-single-entry .works-project-data p {
    padding: 13px 0 !important;

    display: block !important;

    font-size: 13px !important;
  }

  .works-single-entry .works-project-data strong {
    margin-bottom: 6px;
  }
}

/* ========================================
   WORKS個別：PROJECT DATA 最終調整
======================================== */

.works-single-visual-inner {
  padding-bottom: 36px !important;
}

.works-single-content-inner {
  padding-top: 0 !important;

  grid-template-columns: 130px minmax(0, 1fr) !important;
  gap: 34px !important;
}

.works-single-entry .works-project-data {
  margin-top: 0 !important;
  margin-bottom: 90px !important;

  padding: 34px 40px !important;
}

.works-single-entry .works-project-data p {
  display: grid !important;
  grid-template-columns: 120px minmax(0, 1fr) !important;
  gap: 18px !important;

  margin: 0 !important;
  padding: 11px 0 !important;

  border-bottom: 1px solid rgba(41, 77, 124, 0.12) !important;
}

.works-single-entry .works-project-data p:last-child {
  border-bottom: 0 !important;
}

@media screen and (max-width: 767px) {

  .works-single-visual-inner {
    padding-bottom: 34px !important;
  }

  .works-single-content-label {
    margin-bottom: 22px !important;
  }

  .works-single-entry .works-project-data {
    padding: 24px 20px !important;
  }

  .works-single-entry .works-project-data p {
    display: block !important;
  }
}

/* ========================================
   WORKS ARCHIVE：カード配置 最終調整

   ・PC：4列
   ・回転なし
   ・2枚目／4枚目を明確に下げる
   ・タブレット：2列
   ・SP：1列で段差なし
======================================== */


/* ========================================
   共通
======================================== */

.works-archive-grid {
  align-items: start !important;
}

.works-archive-card {
  position: relative;
  z-index: 1;

  min-width: 0;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;

  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    z-index 0s linear 0.42s !important;
}

.works-archive-card:hover {
  z-index: 5;

  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    z-index 0s !important;
}


/* ========================================
   PC：画面幅内に4列
======================================== */

@media screen and (min-width: 1024px) {

  .works-archive-inner {
    width: 100% !important;
    max-width: none !important;

    padding:
      clamp(90px, 8vw, 125px)
      clamp(28px, 3vw, 52px)
      clamp(110px, 11vw, 170px) !important;
  }

  .works-archive-grid {
    display: grid !important;
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;

    /*
     * 下げたカードが次の行へ干渉しないよう、
     * 縦方向の間隔を大きめに確保
     */
    column-gap: clamp(28px, 3.5vw, 66px) !important;
    row-gap: clamp(115px, 10vw, 165px) !important;
  }


  /* 1枚目・3枚目：基準位置 */

  .works-archive-card:nth-child(4n + 1),
  .works-archive-card:nth-child(4n + 3) {
    transform: translateY(0) !important;
  }


  /* 2枚目・4枚目：明確に下げる */

  .works-archive-card:nth-child(4n + 2),
  .works-archive-card:nth-child(4n + 4) {
    transform: translateY(56px) !important;
  }


  /* 基準位置のカード */

  .works-archive-card:nth-child(4n + 1):hover,
  .works-archive-card:nth-child(4n + 3):hover {
    transform:
      translateY(-9px)
      scale(1.012) !important;
  }


  /* 下げたカードは、その位置から少し浮かせる */

  .works-archive-card:nth-child(4n + 2):hover,
  .works-archive-card:nth-child(4n + 4):hover {
    transform:
      translateY(45px)
      scale(1.012) !important;
  }
}


/* ========================================
   ARCHIVEカード画像
======================================== */

.works-archive-card-image {
  position: relative;

  width: 100%;
  aspect-ratio: 4 / 3;

  overflow: visible !important;

  background: #ededeb;
}

.works-archive-thumbnail,
.works-archive-card-image img {
  display: block;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;

  object-fit: cover;

  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s ease !important;
}

.works-archive-card:hover .works-archive-thumbnail {
  transform: scale(1.035);
  filter: saturate(0.94);
}


/* ========================================
   ARCHIVE連番
======================================== */

.works-archive-number {
  position: absolute;
  z-index: 7;

  top: -32px;
  right: 5px;

  color: rgba(41, 77, 124, 0.16);

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: clamp(52px, 5vw, 82px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;

  pointer-events: none;

  transition:
    color 0.35s ease,
    transform 0.35s ease;
}

.works-archive-card:hover .works-archive-number {
  color: rgba(41, 77, 124, 0.26);

  transform: translateY(-5px);
}


/* ========================================
   ARCHIVEトンボ
======================================== */

.works-archive-corner {
  position: absolute;
  z-index: 8;

  width: 22px;
  height: 22px;

  opacity: 0.72;

  pointer-events: none;

  transition:
    width 0.35s ease,
    height 0.35s ease,
    opacity 0.35s ease,
    transform 0.35s ease;
}

.works-archive-corner-top {
  top: -10px;
  left: -10px;

  border-top: 1px solid #294d7c;
  border-left: 1px solid #294d7c;
}

.works-archive-corner-bottom {
  right: -10px;
  bottom: -10px;

  border-right: 1px solid #294d7c;
  border-bottom: 1px solid #294d7c;
}

.works-archive-card:hover .works-archive-corner {
  width: 30px;
  height: 30px;

  opacity: 1;
}

.works-archive-card:hover .works-archive-corner-top {
  transform: translate(-2px, -2px);
}

.works-archive-card:hover .works-archive-corner-bottom {
  transform: translate(2px, 2px);
}


/* ========================================
   ARCHIVEカード情報
======================================== */

.works-archive-card-info {
  position: relative;
  z-index: 2;

  padding: 20px 42px 0 0 !important;
}

.works-archive-card-label {
  margin: 0 0 10px !important;

  color: #294d7c;

  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
}

.works-archive-card-title {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;

  color: #181818;

  font-size: clamp(15px, 1.2vw, 20px) !important;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.015em;
}

.works-archive-card-title::after {
  content: "";

  display: block;

  width: 20px;
  height: 2px;

  margin-top: 14px;

  background: #294d7c;

  transition: width 0.3s ease;
}

.works-archive-card:hover
.works-archive-card-title::after {
  width: 44px;
}

.works-archive-card-excerpt {
  margin: 15px 0 0 !important;

  color: #666;

  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

.works-archive-card-arrow {
  position: absolute;

  top: 20px;
  right: 0;

  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border: 1px solid #294d7c;
  border-radius: 50%;

  color: #294d7c;
  background: transparent;

  font-size: 13px;
  line-height: 1;

  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s ease;
}

.works-archive-card:hover
.works-archive-card-arrow {
  color: #fff;
  background: #294d7c;

  transform: translateX(4px);
}


/* ========================================
   タブレット：2列
======================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {

  .works-archive-inner {
    padding:
      80px
      24px
      120px !important;
  }

  .works-archive-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    column-gap: 28px !important;
    row-gap: 100px !important;
  }

  .works-archive-card,
  .works-archive-card:nth-child(odd),
  .works-archive-card:nth-child(even) {
    transform: none !important;
  }

  .works-archive-card:nth-child(even) {
    transform: translateY(34px) !important;
  }

  .works-archive-card:nth-child(odd):hover {
    transform: translateY(-7px) !important;
  }

  .works-archive-card:nth-child(even):hover {
    transform: translateY(26px) !important;
  }
}


/* ========================================
   スマートフォン：1列
======================================== */

@media screen and (max-width: 767px) {

  .works-archive-inner {
    padding:
      72px
      15px
      95px !important;
  }

  .works-archive-grid {
    grid-template-columns: 1fr !important;
    gap: 76px !important;
  }

  .works-archive-card,
  .works-archive-card:nth-child(n),
  .works-archive-card:hover {
    transform: none !important;
  }

  .works-archive-card:active {
    transform: translateY(-3px) !important;
  }

  .works-archive-number {
    top: -24px;
    right: 3px;

    font-size: 46px;
  }

  .works-archive-card-info {
    padding: 18px 40px 0 0 !important;
  }

  .works-archive-card-title {
    font-size: 17px !important;
  }

  .works-archive-card-excerpt {
    font-size: 12px;
  }

  .works-archive-corner {
    width: 17px;
    height: 17px;
  }

  .works-archive-corner-top {
    top: -7px;
    left: -7px;
  }

  .works-archive-corner-bottom {
    right: -7px;
    bottom: -7px;
  }
}


/* ========================================
   動きを減らす設定
======================================== */

@media (prefers-reduced-motion: reduce) {

  .works-archive-card,
  .works-archive-thumbnail,
  .works-archive-number,
  .works-archive-corner,
  .works-archive-card-title::after,
  .works-archive-card-arrow {
    transition: none !important;
  }

  .works-archive-card:hover {
    transform: none !important;
  }
}

.labo-hero-title {
  letter-spacing: -0.015em;
}


/* ========================================
   LABO ARCHIVE：カードサイズ 最終調整

   WORKSより小さく、
   研究ノートらしいコンパクトなカードへ
======================================== */


/* ========================================
   一覧全体
======================================== */

.labo-archive {
  padding:
    clamp(70px, 7vw, 100px)
    0
    clamp(95px, 10vw, 145px) !important;
}

.labo-archive-inner {
  width: calc(100% - 80px) !important;
  max-width: 1080px !important;

  margin: 0 auto !important;
}


/* 並び替え部分もカード幅に合わせる */

.labo-toolbar {
  margin-bottom: 34px !important;
}


/* ========================================
   カード一覧
======================================== */

.labo-grid {
  width: 100% !important;

  display: grid !important;
  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap:
    clamp(42px, 5vw, 66px)
    clamp(24px, 3vw, 38px) !important;

  align-items: start;
}


/* ========================================
   カード本体
======================================== */

.labo-card {
  width: 100% !important;
  min-width: 0;

  margin: 0 !important;

  overflow: hidden;

  border: 1px solid rgba(41, 77, 124, 0.16) !important;
  border-radius: 6px !important;

  background: #fff;

  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.035) !important;

  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.35s ease !important;
}

.labo-card:hover {
  transform: translateY(-6px) !important;

  border-color: rgba(41, 77, 124, 0.38) !important;

  box-shadow:
    0 13px 30px rgba(0, 0, 0, 0.075) !important;
}


/* ========================================
   画像
======================================== */

.labo-card-image {
  width: 100%;

  /*
   * 今までより少し横長にして、
   * カード全体の高さを抑える
   */
  aspect-ratio: 16 / 9.5 !important;

  overflow: hidden;

  background: #eeeeeb;
}

.labo-card-image img,
.labo-card-thumbnail {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover;

  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s ease !important;
}

.labo-card:hover .labo-card-image img,
.labo-card:hover .labo-card-thumbnail {
  transform: scale(1.035) !important;
  filter: saturate(0.92);
}


/* ========================================
   カテゴリーラベル
======================================== */

.labo-card-category {
  top: 10px !important;
  left: 10px !important;

  min-height: 22px !important;
  padding: 4px 8px !important;

  border-radius: 2px !important;

  font-size: 9px !important;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
}


/* ========================================
   テキスト部分
======================================== */

.labo-card-body {
  padding:
    17px
    17px
    20px !important;
}

.labo-card-date {
  margin: 0 0 10px !important;

  color: #777;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 9px !important;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.1em;
}

.labo-card-title {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;

  color: #181818;

  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: 0.025em;
}

.labo-card-title::before,
.labo-card-title::after {
  content: none !important;
  display: none !important;
}

.labo-card-excerpt {
  margin: 10px 0 0 !important;

  color: #666;

  font-size: 10px !important;
  line-height: 1.85;
  letter-spacing: 0.025em;

  /*
   * 抜粋が長くてもカードが極端に伸びない
   */
  display: -webkit-box;
  overflow: hidden;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}


/* ========================================
   タブレット：2列
======================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {

  .labo-archive-inner {
    width: calc(100% - 48px) !important;
    max-width: 820px !important;
  }

  .labo-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 48px 28px !important;
  }
}


/* ========================================
   スマートフォン：1列
======================================== */

@media screen and (max-width: 767px) {

  .labo-archive {
    padding:
      58px
      0
      85px !important;
  }

  .labo-archive-inner {
    width: calc(100% - 30px) !important;
    max-width: 520px !important;
  }

  .labo-toolbar {
    margin-bottom: 24px !important;
  }

  .labo-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .labo-card-image {
    aspect-ratio: 16 / 9 !important;
  }

  .labo-card-body {
    padding:
      16px
      16px
      19px !important;
  }

  .labo-card-title {
    font-size: 15px !important;
  }

  .labo-card-excerpt {
    font-size: 11px !important;
  }

  .labo-card:hover {
    transform: none !important;
  }

  .labo-card:active {
    transform: translateY(-2px) !important;
  }
}

/* ========================================
   HOME：LABOカード コンパクト化
======================================== */

body.home .home-labo-list {
  width: 100%;
  max-width: 1080px;

  margin: 0 auto;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap:
    clamp(34px, 4vw, 52px)
    clamp(24px, 3vw, 36px) !important;
}

body.home .home-labo-item {
  border: 1px solid rgba(41, 77, 124, 0.15) !important;
  border-radius: 6px !important;

  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.035) !important;

  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.35s ease !important;
}

body.home .home-labo-item:hover {
  transform: translateY(-5px);

  border-color: rgba(41, 77, 124, 0.35) !important;

  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.07) !important;
}


/* 画像を少し横長にしてカード高さを抑える */

body.home .home-labo-image {
  aspect-ratio: 16 / 9.5 !important;
}


/* 本文をコンパクトに */

body.home .home-labo-info {
  padding:
    15px
    16px
    18px !important;
}

body.home .home-labo-date {
  margin-bottom: 9px !important;

  font-size: 9px !important;
  letter-spacing: 0.09em;
}

body.home .home-labo-item-title {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

body.home .home-labo-excerpt {
  margin-top: 9px !important;

  font-size: 10px !important;
  line-height: 1.8 !important;

  display: -webkit-box;
  overflow: hidden;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}


/* ========================================
   タブレット
======================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {

  body.home .home-labo-list {
    max-width: 820px;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 40px 26px !important;
  }
}


/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 767px) {

  body.home .home-labo-list {
    width: 100%;
    max-width: 520px;

    grid-template-columns: 1fr !important;

    gap: 28px !important;
  }

  body.home .home-labo-image {
    aspect-ratio: 16 / 9 !important;
  }

  body.home .home-labo-info {
    padding:
      15px
      15px
      18px !important;
  }

  body.home .home-labo-item-title {
    font-size: 15px !important;
  }

  body.home .home-labo-excerpt {
    font-size: 11px !important;
  }

  body.home .home-labo-item:hover {
    transform: none;
  }
}

/* ========================================
   HOME：LABOを画面幅いっぱいに表示
======================================== */

body.home .home-labo {
  overflow: hidden;
}

/* 見出しは今までどおり中央幅 */
body.home .home-labo .home-section-heading {
  width: 100%;
  max-width: 1240px;

  margin-right: auto;
  margin-left: auto;
}

/* カード一覧だけ画面幅いっぱいへ */
body.home .home-labo-list {
  width: 100vw !important;
  max-width: none !important;

  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;

  padding-right: clamp(24px, 3vw, 52px);
  padding-left: clamp(24px, 3vw, 52px);

  display: grid !important;
  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap:
    clamp(38px, 4vw, 56px)
    clamp(22px, 2.5vw, 40px) !important;
}

/* カードサイズはコンパクトなまま */
body.home .home-labo-item {
  width: 100%;
  min-width: 0;
}

/* 画像の高さを抑える */
body.home .home-labo-image {
  aspect-ratio: 16 / 9.5 !important;
}

/* ========================================
   大きめPC
======================================== */

@media screen and (min-width: 1440px) {

  body.home .home-labo-list {
    padding-right: 44px;
    padding-left: 44px;

    gap:
      56px
      clamp(30px, 3vw, 54px) !important;
  }
}


/* ========================================
   タブレット
======================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {

  body.home .home-labo-list {
    width: 100% !important;

    margin-right: 0 !important;
    margin-left: 0 !important;

    padding-right: 0;
    padding-left: 0;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 42px 26px !important;
  }
}


/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 767px) {

  body.home .home-labo-list {
    width: 100% !important;

    margin-right: 0 !important;
    margin-left: 0 !important;

    padding-right: 0;
    padding-left: 0;

    grid-template-columns: 1fr !important;

    gap: 28px !important;
  }
}

/* ========================================
   HOME：LABO 全幅＋6枚表示
======================================== */

body.home .home-labo {
  overflow: hidden;
}


/* 見出しは通常幅 */
body.home .home-labo .home-section-heading {
  width: 100%;
  max-width: 1240px;

  margin-right: auto;
  margin-left: auto;
}


/* 一覧部分は画面幅いっぱい */
body.home .home-labo-list {
  width: 100vw !important;
  max-width: none !important;

  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;

  padding-right: clamp(24px, 3vw, 54px) !important;
  padding-left: clamp(24px, 3vw, 54px) !important;

  display: grid !important;
  grid-template-columns:
    repeat(6, minmax(0, 1fr)) !important;

  column-gap: clamp(14px, 1.8vw, 30px) !important;
  row-gap: clamp(36px, 4vw, 56px) !important;

  align-items: start;
}


/* カードを大きくしすぎない */
body.home .home-labo-item {
  width: 100% !important;
  max-width: 220px !important;

  justify-self: center;

  margin: 0 !important;
}


/* 画像 */
body.home .home-labo-image {
  aspect-ratio: 16 / 10 !important;
}


/* テキスト部分 */
body.home .home-labo-info {
  padding:
    13px
    13px
    16px !important;
}

body.home .home-labo-date {
  margin-bottom: 8px !important;

  font-size: 8px !important;
  letter-spacing: 0.08em;
}

body.home .home-labo-item-title {
  font-size: 12px !important;
  line-height: 1.55 !important;
}

body.home .home-labo-excerpt {
  margin-top: 8px !important;

  font-size: 9px !important;
  line-height: 1.7 !important;

  display: -webkit-box;
  overflow: hidden;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}


/* ========================================
   少し狭いPC：3列
======================================== */

@media screen and (min-width: 1024px) and (max-width: 1279px) {

  body.home .home-labo-list {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap: 42px 30px !important;
  }

  body.home .home-labo-item {
    max-width: 280px !important;
  }

  body.home .home-labo-item-title {
    font-size: 14px !important;
  }

  body.home .home-labo-excerpt {
    font-size: 10px !important;
  }
}


/* ========================================
   タブレット：2列
======================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {

  body.home .home-labo-list {
    width: 100% !important;

    margin-right: 0 !important;
    margin-left: 0 !important;

    padding-right: 0 !important;
    padding-left: 0 !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 40px 28px !important;
  }

  body.home .home-labo-item {
    max-width: 360px !important;
  }

  body.home .home-labo-item-title {
    font-size: 14px !important;
  }

  body.home .home-labo-excerpt {
    font-size: 10px !important;
  }
}


/* ========================================
   スマートフォン：1列
======================================== */

@media screen and (max-width: 767px) {

  body.home .home-labo-list {
    width: 100% !important;

    margin-right: 0 !important;
    margin-left: 0 !important;

    padding-right: 0 !important;
    padding-left: 0 !important;

    grid-template-columns: 1fr !important;

    gap: 26px !important;
  }

  body.home .home-labo-item {
    max-width: 420px !important;
  }

  body.home .home-labo-image {
    aspect-ratio: 16 / 9 !important;
  }

  body.home .home-labo-info {
    padding:
      15px
      15px
      18px !important;
  }

  body.home .home-labo-date {
    font-size: 9px !important;
  }

  body.home .home-labo-item-title {
    font-size: 15px !important;
  }

  body.home .home-labo-excerpt {
    font-size: 11px !important;
  }
}
body.home .home-labo-list {
  column-gap: 6px !important;
}

body.home .home-labo-list {
  column-gap: 50px !important;
}

body.home .home-labo-item {
  max-width: none !important;
}

/* ========================================
   HOME：WORKS 背景を白へ
======================================== */

body.home .home-works {
  background: #fff !important;
}


/* ========================================
   HOME：LABO 背景を方眼紙へ
======================================== */

body.home .home-labo {
  position: relative;

  background-color: #f7f8fa !important;

  background-image:
    linear-gradient(
      rgba(41, 77, 124, 0.075) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(41, 77, 124, 0.075) 1px,
      transparent 1px
    );

  background-size: 24px 24px;
}


/* 内容を背景より前に出す */
body.home .home-labo .home-section-inner {
  position: relative;
  z-index: 1;
}


/* カードは白で読みやすく */
body.home .home-labo-item {
  background: rgba(255, 255, 255, 0.96) !important;

  border-color: rgba(41, 77, 124, 0.2) !important;

  box-shadow:
    0 5px 16px rgba(30, 45, 65, 0.055) !important;
}


/* カード画像部分 */
body.home .home-labo-image {
  background: #fff;
}


/* 見出し周辺が方眼に埋もれないよう調整 */
body.home .home-labo .home-section-heading {
  position: relative;
}


/* ========================================
   スマートフォン
   方眼を少し細かく・薄くする
======================================== */

@media screen and (max-width: 767px) {

  body.home .home-labo {
    background-image:
      linear-gradient(
        rgba(41, 77, 124, 0.06) 1px,
        transparent 1px
      ),
      linear-gradient(
        90deg,
        rgba(41, 77, 124, 0.06) 1px,
        transparent 1px
      );

    background-size: 20px 20px;
  }
}

/* ========================================
   HOME：LABO スマホ横長カード
======================================== */

@media screen and (max-width: 767px) {

  body.home .home-labo-list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body.home .home-labo-item {
    width: 100% !important;
    max-width: none !important;

    border-radius: 6px !important;
  }

  body.home .home-labo-item-link {
    display: grid !important;
    grid-template-columns: 38% minmax(0, 1fr);
    align-items: stretch;

    min-height: 130px;
  }

  /* 左：アイキャッチ */
  body.home .home-labo-image {
    width: 100%;
    height: 100%;

    aspect-ratio: auto !important;

    border-radius: 5px 0 0 5px;

    overflow: hidden;
  }

  body.home .home-labo-image img,
  body.home .home-labo-thumbnail,
  body.home .home-labo-no-image {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover;
  }

  /* 右：テキスト */
  body.home .home-labo-info {
    min-width: 0;

    padding:
      14px
      14px
      14px
      16px !important;

    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  body.home .home-labo-date {
    margin: 0 0 7px !important;

    font-size: 8px !important;
    line-height: 1.4;
    letter-spacing: 0.08em;
  }

  body.home .home-labo-item-title {
    margin: 0 !important;

    font-size: 14px !important;
    line-height: 1.55 !important;

    display: -webkit-box;
    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.home .home-labo-excerpt {
    margin: 8px 0 0 !important;

    font-size: 10px !important;
    line-height: 1.65 !important;

    display: -webkit-box;
    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.home .home-labo-item:hover,
  body.home .home-labo-item:active {
    transform: none !important;
  }
}

/* ========================================
   HOME：スマホではLABOを4件だけ表示
======================================== */

@media screen and (max-width: 767px) {

  body.home .home-labo-item:nth-child(n + 5) {
    display: none !important;
  }
}

/* ========================================
   LABO ARCHIVE：全幅＋トップと共通カード
======================================== */

.post-type-archive-labo .labo-archive {
  width: 100vw;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);

  padding:
    clamp(64px, 7vw, 100px)
    0
    clamp(90px, 9vw, 140px) !important;

  background-color: #f7f8fa;

  background-image:
    linear-gradient(
      rgba(41, 77, 124, 0.07) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(41, 77, 124, 0.07) 1px,
      transparent 1px
    );

  background-size: 24px 24px;
}


/* ========================================
   内側を画面幅いっぱいに
======================================== */

.post-type-archive-labo .labo-archive-inner {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;

  padding-right: clamp(24px, 3vw, 54px);
  padding-left: clamp(24px, 3vw, 54px);
}


/* ========================================
   並び替え部分
======================================== */

.post-type-archive-labo .labo-toolbar {
  width: 100%;

  margin: 0 0 30px !important;
}


/* ========================================
   PC：6列
======================================== */

.post-type-archive-labo .labo-grid {
  width: 100%;

  display: grid !important;
  grid-template-columns:
    repeat(6, minmax(0, 1fr)) !important;

  column-gap: 8px !important;
  row-gap: 28px !important;

  align-items: start;
}


/* ========================================
   カード
======================================== */

.post-type-archive-labo .labo-card {
  width: 100% !important;
  min-width: 0;
  max-width: none !important;

  margin: 0 !important;

  overflow: hidden;

  border: 1px solid rgba(41, 77, 124, 0.18) !important;
  border-radius: 6px !important;

  background: rgba(255, 255, 255, 0.97) !important;

  box-shadow:
    0 4px 14px rgba(30, 45, 65, 0.05) !important;

  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.35s ease !important;
}

.post-type-archive-labo .labo-card:hover {
  transform: translateY(-5px) !important;

  border-color: rgba(41, 77, 124, 0.36) !important;

  box-shadow:
    0 12px 28px rgba(30, 45, 65, 0.09) !important;
}


/* ========================================
   画像
======================================== */

.post-type-archive-labo .labo-card-image {
  width: 100%;

  aspect-ratio: 16 / 10 !important;

  overflow: hidden;

  background: #eee;
}

.post-type-archive-labo .labo-card-image img {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover;

  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s ease;
}

.post-type-archive-labo
.labo-card:hover
.labo-card-image img {
  transform: scale(1.035);

  filter: saturate(0.94);
}


/* ========================================
   カテゴリー
======================================== */

.post-type-archive-labo .labo-card-category {
  top: 9px !important;
  left: 9px !important;

  min-height: 21px;
  padding: 4px 7px !important;

  border-radius: 2px;

  font-size: 8px !important;
  font-weight: 600;
  letter-spacing: 0.07em;
}


/* ========================================
   テキスト
======================================== */

.post-type-archive-labo .labo-card-body {
  padding:
    13px
    13px
    16px !important;
}

.post-type-archive-labo .labo-card-date {
  margin: 0 0 8px !important;

  font-size: 8px !important;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

.post-type-archive-labo .labo-card-title {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;

  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.post-type-archive-labo .labo-card-title::before,
.post-type-archive-labo .labo-card-title::after {
  content: none !important;
  display: none !important;
}

.post-type-archive-labo .labo-card-excerpt {
  margin: 8px 0 0 !important;

  color: #666;

  font-size: 9px !important;
  line-height: 1.7;

  display: -webkit-box;
  overflow: hidden;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}


/* ========================================
   少し狭いPC：3列
======================================== */

@media screen and (min-width: 1024px) and (max-width: 1279px) {

  .post-type-archive-labo .labo-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap: 32px 14px !important;
  }

  .post-type-archive-labo .labo-card-title {
    font-size: 14px !important;
  }

  .post-type-archive-labo .labo-card-excerpt {
    font-size: 10px !important;
  }
}


/* ========================================
   タブレット：2列
======================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {

  .post-type-archive-labo .labo-archive-inner {
    padding-right: 24px;
    padding-left: 24px;
  }

  .post-type-archive-labo .labo-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 32px 18px !important;
  }

  .post-type-archive-labo .labo-card-title {
    font-size: 14px !important;
  }

  .post-type-archive-labo .labo-card-excerpt {
    font-size: 10px !important;
  }
}


/* ========================================
   スマホ：左画像＋右テキスト
======================================== */

@media screen and (max-width: 767px) {

  .post-type-archive-labo .labo-archive {
    padding:
      52px
      0
      80px !important;

    background-size: 20px 20px;
  }

  .post-type-archive-labo .labo-archive-inner {
    padding-right: 15px;
    padding-left: 15px;
  }

  .post-type-archive-labo .labo-toolbar {
    margin-bottom: 22px !important;
  }

  .post-type-archive-labo .labo-grid {
    grid-template-columns: 1fr !important;

    gap: 16px !important;
  }

  .post-type-archive-labo .labo-card {
    width: 100% !important;
    max-width: none !important;
  }

  .post-type-archive-labo .labo-card-link {
    display: grid !important;
    grid-template-columns:
      38%
      minmax(0, 1fr);

    align-items: stretch;

    min-height: 130px;
  }

  /* 左側画像 */

  .post-type-archive-labo .labo-card-image {
    width: 100%;
    height: 100%;

    aspect-ratio: auto !important;

    border-radius: 5px 0 0 5px;
  }

  .post-type-archive-labo .labo-card-image img,
  .post-type-archive-labo .labo-card-noimage {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover;
  }

  /* 右側テキスト */

  .post-type-archive-labo .labo-card-body {
    min-width: 0;

    padding:
      13px
      13px
      13px
      15px !important;

    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .post-type-archive-labo .labo-card-date {
    margin-bottom: 7px !important;

    font-size: 8px !important;
  }

  .post-type-archive-labo .labo-card-title {
    font-size: 14px !important;
    line-height: 1.5;

    display: -webkit-box;
    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .post-type-archive-labo .labo-card-excerpt {
    margin-top: 7px !important;

    font-size: 10px !important;
    line-height: 1.6;

    -webkit-line-clamp: 2;
  }

  .post-type-archive-labo .labo-card:hover,
  .post-type-archive-labo .labo-card:active {
    transform: none !important;
  }
}

/* ========================================
   LABO ARCHIVE：カード間隔
======================================== */

.post-type-archive-labo .labo-grid {
  gap: 50px !important;
}

/* ========================================
   スマホ：下層ページではサイト名を表示
   トップページのみ従来どおり非表示
======================================== */

@media screen and (max-width: 767px) {

  /* 下層ページのヘッダー */
  body:not(.home) .header-container,
  body:not(.home) .header-container-in {
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
  }

  body:not(.home) .header-container-in {
    position: relative !important;

    padding: 0 15px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 16px;
  }


  /* 左側：ナド制作室を復活 */
  body:not(.home) .header {
    position: static !important;

    width: auto !important;
    height: auto !important;
    min-height: 0 !important;

    flex: 0 0 auto;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    transform: none !important;
  }

  body:not(.home) .header-in,
  body:not(.home) .logo-header {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;
  }

  body:not(.home) .site-name-text,
  body:not(.home) .site-name-text a {
    display: block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #181818 !important;

    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap;

    text-decoration: none !important;
  }


  /* 右側：グローバルメニュー */
  body:not(.home) .navi {
    position: static !important;

    width: auto !important;
    height: 56px !important;

    flex: 1 1 auto;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    transform: none !important;
  }

  body:not(.home) .navi-in {
    width: auto !important;
    height: 56px !important;

    display: flex !important;
    align-items: center !important;
  }

  body:not(.home) .navi-in > ul {
    width: auto !important;
    height: 56px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 14px !important;
  }

  body:not(.home) .navi-in > ul > li {
    width: auto !important;
    height: auto !important;

    flex: 0 0 auto;
  }

  body:not(.home) .navi-in > ul > li > a {
    width: auto !important;
    height: auto !important;

    padding: 7px 0 !important;

    font-size: 9px !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap;
  }
}

/* ========================================
   下層ページ：ヘッダーを上部に追従
======================================== */

body:not(.home) .header-container {
  position: sticky !important;
  z-index: 10000 !important;
  top: 0 !important;

  width: 100% !important;

  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid #ececec !important;

  box-shadow:
    0 3px 14px rgba(0, 0, 0, 0.035) !important;

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}


/* Cocoon側の位置指定を解除 */
body:not(.home) .header-container-in {
  position: relative !important;
  z-index: 1;
}


/* 管理バー表示中 */
@media screen and (min-width: 783px) {

  body.admin-bar:not(.home) .header-container {
    top: 32px !important;
  }
}

@media screen and (max-width: 782px) {

  body.admin-bar:not(.home) .header-container {
    top: 46px !important;
  }
}

/* ========================================
   スマホ下層ページのヘッダー
   左：ナド制作室
   右：グローバルメニュー
======================================== */

@media screen and (max-width: 767px) {

  /* ヘッダー全体 */
  body:not(.home) .header-container {
    position: sticky !important;
    z-index: 10000 !important;
    top: 0 !important;

    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: rgba(255, 255, 255, 0.97) !important;
    border-bottom: 1px solid #ececec !important;

    overflow: visible !important;

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }


  /* 左右を1段で配置 */
  body:not(.home) .header-container-in {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;

    margin: 0 !important;
    padding: 0 12px !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 10px !important;

    overflow: visible !important;
  }


  /* ========================================
     左：ナド制作室
  ======================================== */

  body:not(.home) .header {
    position: static !important;

    display: flex !important;
    visibility: visible !important;

    width: auto !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;

    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    align-items: center !important;

    opacity: 1 !important;
    transform: none !important;
  }

  body:not(.home) .header-in,
  body:not(.home) .logo-header {
    display: block !important;
    visibility: visible !important;

    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
  }

  body:not(.home) .site-name-text,
  body:not(.home) .site-name-text a {
    display: block !important;
    visibility: visible !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #181818 !important;

    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;

    white-space: nowrap !important;
    text-decoration: none !important;

    opacity: 1 !important;
  }


  /* ========================================
     右：グローバルメニューを強制表示
  ======================================== */

  body:not(.home) .navi {
    position: static !important;

    display: block !important;
    visibility: visible !important;

    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 56px !important;
    min-height: 56px !important;

    flex: 0 1 auto !important;

    margin: 0 0 0 auto !important;
    padding: 0 !important;

    background: transparent !important;

    opacity: 1 !important;
    transform: none !important;

    overflow: visible !important;
    pointer-events: auto !important;
  }

  body:not(.home) .navi-in {
    display: flex !important;
    visibility: visible !important;

    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 56px !important;
    min-height: 56px !important;

    margin: 0 !important;
    padding: 0 !important;

    align-items: center !important;
    justify-content: flex-end !important;

    opacity: 1 !important;
    overflow: visible !important;
  }

  body:not(.home) .navi-in > ul {
    display: flex !important;
    visibility: visible !important;

    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 56px !important;
    min-height: 56px !important;

    margin: 0 !important;
    padding: 0 !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 8px !important;

    opacity: 1 !important;
    overflow: visible !important;

    list-style: none !important;
  }

  body:not(.home) .navi-in > ul > li {
    display: flex !important;
    visibility: visible !important;

    width: auto !important;
    min-width: 0 !important;
    height: 56px !important;

    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    align-items: center !important;

    opacity: 1 !important;
  }

  body:not(.home) .navi-in > ul > li > a {
    display: block !important;
    visibility: visible !important;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 8px 0 !important;

    color: #181818 !important;
    background: transparent !important;

    font-size: 8px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;

    white-space: nowrap !important;
    text-decoration: none !important;

    opacity: 1 !important;
  }

  body:not(.home) .navi-in .caption-wrap,
  body:not(.home) .navi-in .item-label {
    display: block !important;
    visibility: visible !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1 !important;
    white-space: nowrap !important;

    opacity: 1 !important;
  }

  body:not(.home) .navi-in .item-description {
    display: none !important;
  }


  /* Cocoonのスマホ用ボタンは使用しない */
  body:not(.home) .mobile-menu-buttons,
  body:not(.home) .mobile-menu-button {
    display: none !important;
  }
}

/* スマホ下層ページ：メニュー文字を少し大きく */

@media screen and (max-width: 767px) {

  body:not(.home) .navi-in > ul {
    gap: 9px !important;
  }

  body:not(.home) .navi-in > ul > li > a {
    font-size: 10px !important;
    letter-spacing: 0.025em !important;
  }
}

/* ========================================
   スマホ共通ヘッダー
   左：ナド制作室／右：グローバルメニュー
   TOP・下層ページ共通
======================================== */

@media screen and (max-width: 767px) {

  /* ヘッダー全体 */
  body .header-container {
    position: sticky !important;
    z-index: 10000 !important;
    top: 0 !important;

    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    background: rgba(255, 255, 255, 0.97) !important;
    border-bottom: 1px solid #ececec !important;

    box-shadow:
      0 3px 14px rgba(0, 0, 0, 0.035) !important;

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }


  /* 左右を1段で配置 */
  body .header-container-in {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 12px !important;

    overflow: visible !important;
  }


  /* ========================================
     左：ナド制作室
  ======================================== */

  body .header {
    position: static !important;

    display: flex !important;
    visibility: visible !important;
    align-items: center !important;

    width: auto !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;

    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    transform: none !important;
  }

  body .header-in,
  body .logo-header {
    display: block !important;
    visibility: visible !important;

    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
  }

  body .site-name-text,
  body .site-name-text a {
    display: block !important;
    visibility: visible !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #181818 !important;

    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;

    white-space: nowrap !important;
    text-decoration: none !important;

    opacity: 1 !important;
  }


  /* ========================================
     右：グローバルメニュー
  ======================================== */

  body .navi {
    position: static !important;

    display: block !important;
    visibility: visible !important;

    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 56px !important;
    min-height: 56px !important;

    flex: 0 1 auto !important;

    margin: 0 0 0 auto !important;
    padding: 0 !important;

    background: transparent !important;

    opacity: 1 !important;
    transform: none !important;

    overflow: visible !important;
    pointer-events: auto !important;
  }

  body .navi-in {
    display: flex !important;
    visibility: visible !important;
    align-items: center !important;
    justify-content: flex-end !important;

    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 56px !important;
    min-height: 56px !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    overflow: visible !important;
  }

  body .navi-in > ul {
    display: flex !important;
    visibility: visible !important;

    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 56px !important;

    margin: 0 !important;
    padding: 0 !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 9px !important;

    opacity: 1 !important;
    overflow: visible !important;

    list-style: none !important;
  }

  body .navi-in > ul > li {
    display: flex !important;
    visibility: visible !important;
    align-items: center !important;

    width: auto !important;
    min-width: 0 !important;
    height: 56px !important;

    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
  }

  body .navi-in > ul > li > a {
    display: block !important;
    visibility: visible !important;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 8px 0 !important;

    color: #181818 !important;
    background: transparent !important;

    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.025em !important;

    white-space: nowrap !important;
    text-decoration: none !important;

    opacity: 1 !important;
  }

  body .navi-in .caption-wrap,
  body .navi-in .item-label {
    display: block !important;
    visibility: visible !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body .navi-in .item-description {
    display: none !important;
  }


  /* Cocoonのスマホ用メニューボタンは非表示 */
  body .mobile-menu-buttons,
  body .mobile-menu-button {
    display: none !important;
  }
}


/* WordPress管理バー表示中 */
@media screen and (max-width: 782px) {

  body.admin-bar .header-container {
    top: 46px !important;
  }
}

/* ========================================
   WORKS・LABO アーカイブヒーロー
   ABOUTと同じネイビー背景へ
======================================== */

.works-archive-hero,
.labo-hero {
  position: relative;

  background: #294d7c !important;
}


/* ごく薄い方眼を重ねる */
.works-archive-hero::before,
.labo-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px
    );

  background-size: 32px 32px;

  pointer-events: none;
}


/* 内容を背景装飾より前面へ */
.works-archive-hero-inner,
.labo-hero-inner {
  position: relative;
  z-index: 1;
}


/* 小さな英字ラベル */
.works-archive-label,
.labo-hero-label {
  color: rgba(255, 255, 255, 0.68) !important;
}


/* 大きなタイトル */
.works-archive-title,
.labo-hero-title {
  color: #fff !important;
}


/* 右側の説明文 */
.works-archive-introduction p,
.labo-hero-introduction p {
  color: rgba(255, 255, 255, 0.84) !important;
}


/* ========================================
   ヒーロー下端のアクセント
======================================== */

.works-archive-hero::after,
.labo-hero::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: 0;

  width: clamp(70px, 10vw, 150px);
  height: 6px;

  background: rgba(255, 255, 255, 0.9);
}


/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 767px) {

  .works-archive-hero::before,
  .labo-hero::before {
    background-size: 24px 24px;
  }

  .works-archive-label,
  .labo-hero-label {
    color: rgba(255, 255, 255, 0.66) !important;
  }

  .works-archive-introduction p,
  .labo-hero-introduction p {
    color: rgba(255, 255, 255, 0.82) !important;
  }

  .works-archive-hero::after,
  .labo-hero::after {
    width: 72px;
    height: 4px;
  }
}

/* ========================================
   HOME スマホ：
   WORKS・LABO見出しを中央揃え
======================================== */

@media screen and (max-width: 767px) {

  body.home .home-works .home-section-heading,
  body.home .home-labo .home-section-heading {
    position: relative;

    width: 100%;

    margin-right: auto !important;
    margin-left: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
  }

  body.home .home-works .home-section-title,
  body.home .home-labo .home-section-title {
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
  }
}

/* ========================================
   HOME スマホ：
   LABO見出しをWORKSと同じ配置に統一
======================================== */

@media screen and (max-width: 767px) {

  body.home .home-works .home-section-heading,
  body.home .home-labo .home-section-heading {
    width: 100% !important;

    margin: 0 0 28px !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    text-align: left !important;
  }

  body.home .home-works .home-section-title,
  body.home .home-labo .home-section-title {
    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;
  }

  body.home .home-works .home-text-link,
  body.home .home-labo .home-text-link {
    position: static !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    white-space: nowrap;
  }
}

/* ========================================
   HOME スマホ：
   タイトル＋VIEW MORE / READ MOREを中央配置
======================================== */

@media screen and (max-width: 767px) {

  body.home .home-works .home-section-heading,
  body.home .home-labo .home-section-heading {
    width: 100% !important;

    margin-right: auto !important;
    margin-left: auto !important;
    padding: 0 !important;

    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;

    gap: 12px !important;

    text-align: center !important;
  }

  body.home .home-works .home-section-title,
  body.home .home-labo .home-section-title {
    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
  }

  body.home .home-works .home-text-link,
  body.home .home-labo .home-text-link {
    position: static !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

/* ========================================
   HOME スマホ：
   タイトル＋VIEW MORE / READ MOREを中央配置
======================================== */

@media screen and (max-width: 767px) {

  body.home .home-works .home-section-heading,
  body.home .home-labo .home-section-heading {
    width: 100% !important;

    margin-right: auto !important;
    margin-left: auto !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 12px !important;

    text-align: center !important;
  }

  body.home .home-works .home-section-title,
  body.home .home-labo .home-section-title {
    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1 !important;
    text-align: center !important;
  }

  body.home .home-works .home-text-link,
  body.home .home-labo .home-text-link {
    position: static !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

/* ========================================
   HOME スマホ：
   CONTACTをWORKS・LABOと同じ見出し構成に
======================================== */

@media screen and (max-width: 767px) {

  body.home .home-contact-inner {
    width: 100% !important;
    min-height: auto !important;

    padding: 56px 20px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 0 !important;

    text-align: center !important;
  }

  /* CONTACTタイトル */
  body.home .home-contact-title {
    position: relative;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;

    font-size: 32px !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  /* 矢印をタイトルのすぐ右へ */
  body.home .home-contact-arrow {
    position: absolute !important;
    top: 50% !important;
    left: calc(100% + 12px) !important;

    margin: 0 !important;

    color: #fff !important;

    font-size: 18px !important;
    line-height: 1 !important;

    transform: translateY(-50%) !important;
  }

  /* 説明文 */
  body.home .home-contact-text {
    max-width: 320px;

    margin: 24px auto 0 !important;

    font-size: 12px !important;
    line-height: 1.9 !important;
    letter-spacing: 0.06em !important;

    text-align: center !important;
  }

  body.home .home-contact-link:hover .home-contact-arrow {
    transform: translateY(-50%) translateX(4px) !important;
  }
}

/* ========================================
   HOME：CONTACT
   PC・スマホ共通で中央配置
======================================== */

body.home .home-contact-inner {
  width: 100% !important;
  min-height: 320px !important;

  padding: 80px 24px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 0 !important;

  text-align: center !important;
}


/* CONTACTタイトル */
body.home .home-contact-title {
  position: relative;

  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #fff !important;

  font-size: clamp(42px, 5vw, 72px) !important;
  line-height: 1 !important;
  text-align: center !important;
}


/* 矢印をタイトルのすぐ右へ */
body.home .home-contact-arrow {
  position: absolute !important;

  top: 50% !important;
  left: calc(100% + 18px) !important;

  margin: 0 !important;

  color: #fff !important;

  font-size: clamp(20px, 2vw, 30px) !important;
  line-height: 1 !important;

  transform: translateY(-50%) !important;
}


/* 説明文 */
body.home .home-contact-text {
  max-width: 520px;

  margin: 28px auto 0 !important;

  color: rgba(255, 255, 255, 0.88) !important;

  font-size: 14px !important;
  line-height: 2 !important;
  letter-spacing: 0.07em !important;

  text-align: center !important;
}


/* ホバー */
body.home .home-contact-link:hover .home-contact-arrow {
  transform:
    translateY(-50%)
    translateX(6px) !important;
}


/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 767px) {

  body.home .home-contact-inner {
    min-height: auto !important;

    padding: 56px 20px !important;
  }

  body.home .home-contact-title {
    font-size: 32px !important;
  }

  body.home .home-contact-arrow {
    left: calc(100% + 12px) !important;

    font-size: 18px !important;
  }

  body.home .home-contact-text {
    max-width: 320px;

    margin-top: 24px !important;

    font-size: 12px !important;
    line-height: 1.9 !important;
  }
}

/* ========================================
   HOME：CONTACT
   タイトル＋矢印を中央で横並び
======================================== */

body.home .home-contact-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 18px !important;

  text-align: center !important;
}

body.home .home-contact-title {
  position: static !important;

  width: auto !important;
  margin: 0 !important;

  line-height: 1 !important;
}

body.home .home-contact-arrow {
  position: static !important;

  display: inline-block !important;
  visibility: visible !important;

  width: auto !important;
  margin: 0 !important;

  opacity: 1 !important;

  font-size: clamp(22px, 2.2vw, 32px) !important;
  line-height: 1 !important;

  transform: none !important;
}

/* 説明文は下段に送る */
body.home .home-contact-text {
  flex-basis: 100% !important;

  margin: 10px auto 0 !important;

  text-align: center !important;
}

body.home .home-contact-link:hover .home-contact-arrow {
  transform: translateX(6px) !important;
}

/* ========================================
   ABOUT・CONTACT 共通ヒーロー
======================================== */

.page-about .content,
.page-about .content-in,
.page-about .main,
.page-contact .content,
.page-contact .content-in,
.page-contact .main {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;
}

.page-about .main,
.page-contact .main {
  float: none;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;
}

.page-about .sidebar,
.page-contact .sidebar {
  display: none;
}


/* ヒーロー全体 */

.subpage-hero {
  position: relative;

  width: 100%;

  overflow: hidden;

  color: #fff;
  background: #294d7c;
}


/* 薄いグリッド */

.subpage-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px
    );

  background-size: 32px 32px;

  pointer-events: none;
}


/* 内側 */

.subpage-hero-inner {
  position: relative;
  z-index: 1;

  width: calc(100% - 80px);
  max-width: 1240px;
  min-height: 330px;

  margin: 0 auto;
  padding: 70px 0;

  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(280px, 0.85fr);

  align-items: end;
  gap: clamp(50px, 8vw, 130px);
}


/* 左側 */

.subpage-hero-heading {
  min-width: 0;
}

.subpage-hero-label {
  margin: 0 0 28px;
  padding: 0;

  color: rgba(255, 255, 255, 0.68);

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
}


/* 大タイトル */

.subpage-hero-title {
  margin: 0;
  padding: 0;

  color: #fff;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: clamp(64px, 8vw, 118px);
  font-weight: 600;
  line-height: 0.85;
  letter-spacing: -0.03em;
}


/* 右側説明文 */

.subpage-hero-introduction {
  padding-bottom: 4px;
}

.subpage-hero-introduction p {
  margin: 0;
  padding: 0;

  color: rgba(255, 255, 255, 0.84);

  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 2;
  letter-spacing: 0.06em;
}


/* 右下アクセント */

.subpage-hero::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: 0;

  width: clamp(70px, 10vw, 150px);
  height: 6px;

  background: rgba(255, 255, 255, 0.9);
}


/* 本文エリア */

.about-page-content,
.contact-page-content {
  width: calc(100% - 80px);
  max-width: 1160px;

  margin: 0 auto;
  padding: clamp(70px, 8vw, 120px) 0;
}


/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 767px) {

  .subpage-hero::before {
    background-size: 24px 24px;
  }

  .subpage-hero-inner {
    width: calc(100% - 40px);
    min-height: auto;

    padding: 52px 0 48px;

    grid-template-columns: 1fr;
    align-items: start;

    gap: 28px;
  }

  .subpage-hero-label {
    margin-bottom: 18px;

    font-size: 9px;
  }

  .subpage-hero-title {
    font-size: clamp(54px, 17vw, 76px);
    line-height: 0.9;
  }

  .subpage-hero-introduction {
    padding-bottom: 0;
  }

  .subpage-hero-introduction p {
    font-size: 12px;
    line-height: 1.9;
  }

  .subpage-hero::after {
    width: 72px;
    height: 4px;
  }

  .about-page-content,
  .contact-page-content {
    width: calc(100% - 40px);

    padding: 56px 0 80px;
  }
}

/* ========================================
   下層4ページ：ヒーローを完全統一
   WORKS / LABO / ABOUT / CONTACT
======================================== */

/* ヒーロー全体 */
.works-archive-hero,
.labo-hero,
.about-page .subpage-hero,
.contact-page .subpage-hero {
  position: relative;

  width: 100%;
  min-height: 300px;

  margin: 0;
  padding: 0;

  overflow: hidden;

  color: #fff;
  background: #294d7c !important;
}


/* 内側の配置 */
.works-archive-hero-inner,
.labo-hero-inner,
.about-page .subpage-hero-inner,
.contact-page .subpage-hero-inner {
  position: relative;
  z-index: 1;

  width: calc(100% - 80px) !important;
  max-width: 1240px !important;
  min-height: 300px !important;

  margin: 0 auto !important;
  padding: 66px 0 !important;

  display: grid !important;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(280px, 0.85fr) !important;

  align-items: end !important;
  gap: clamp(50px, 8vw, 130px) !important;
}


/* 左側：小見出し＋タイトル */
.works-archive-heading,
.labo-hero-heading,
.about-page .subpage-hero-heading,
.contact-page .subpage-hero-heading {
  min-width: 0;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;
}


/* 上の小さな文字 */
.works-archive-label,
.labo-hero-label,
.about-page .subpage-hero-label,
.contact-page .subpage-hero-label {
  margin: 0 0 24px !important;
  padding: 0 !important;

  color: rgba(255, 255, 255, 0.68) !important;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.2em !important;

  text-align: left !important;
}


/* 大きなページタイトル */
.works-archive-title,
.labo-hero-title,
.about-page .subpage-hero-title,
.contact-page .subpage-hero-title {
  margin: 0 !important;
  padding: 0 !important;

  color: #fff !important;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: clamp(52px, 6.5vw, 88px) !important;
  font-weight: 600 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.025em !important;

  text-align: left !important;
}


/* 右側の説明文 */
.works-archive-introduction,
.labo-hero-introduction,
.about-page .subpage-hero-introduction,
.contact-page .subpage-hero-introduction {
  margin: 0 !important;
  padding: 0 0 4px !important;

  align-self: end !important;
}

.works-archive-introduction p,
.labo-hero-introduction p,
.about-page .subpage-hero-introduction p,
.contact-page .subpage-hero-introduction p {
  margin: 0 !important;
  padding: 0 !important;

  color: rgba(255, 255, 255, 0.84) !important;

  font-size: clamp(13px, 1.15vw, 16px) !important;
  line-height: 2 !important;
  letter-spacing: 0.06em !important;

  text-align: left !important;
}


/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 767px) {

  .works-archive-hero,
  .labo-hero,
  .about-page .subpage-hero,
  .contact-page .subpage-hero {
    min-height: auto !important;
  }

  .works-archive-hero-inner,
  .labo-hero-inner,
  .about-page .subpage-hero-inner,
  .contact-page .subpage-hero-inner {
    width: calc(100% - 40px) !important;
    min-height: auto !important;

    padding: 50px 0 48px !important;

    grid-template-columns: 1fr !important;
    align-items: start !important;

    gap: 28px !important;
  }

  .works-archive-label,
  .labo-hero-label,
  .about-page .subpage-hero-label,
  .contact-page .subpage-hero-label {
    margin-bottom: 18px !important;

    font-size: 9px !important;
    line-height: 1 !important;
  }

  .works-archive-title,
  .labo-hero-title,
  .about-page .subpage-hero-title,
  .contact-page .subpage-hero-title {
    font-size: 42px !important;
    line-height: 1 !important;
    letter-spacing: -0.015em !important;
  }

  .works-archive-introduction,
  .labo-hero-introduction,
  .about-page .subpage-hero-introduction,
  .contact-page .subpage-hero-introduction {
    padding: 0 !important;
  }

  .works-archive-introduction p,
  .labo-hero-introduction p,
  .about-page .subpage-hero-introduction p,
  .contact-page .subpage-hero-introduction p {
    font-size: 12px !important;
    line-height: 1.9 !important;
  }
}

/* ========================================
   HOME：スクロール表示エフェクト
======================================== */

/* 初期状態 */
body.home .js-scroll-reveal {
  opacity: 0;
  transform: translateY(36px);

  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: opacity, transform;
}


/* 左から表示 */
body.home .js-scroll-reveal.is-reveal-left {
  transform: translateX(-36px);
}


/* 右から表示 */
body.home .js-scroll-reveal.is-reveal-right {
  transform: translateX(36px);
}


/* 少し拡大しながら表示 */
body.home .js-scroll-reveal.is-reveal-scale {
  transform: translateY(24px) scale(0.97);
}


/* 表示後 */
body.home .js-scroll-reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}


/* ========================================
   カードの時間差
======================================== */

body.home .home-works-item.js-scroll-reveal,
body.home .home-labo-item.js-scroll-reveal {
  transition-delay: var(--reveal-delay, 0ms);
}


/* ========================================
   ファーストビュー
======================================== */

body.home .home-hero .js-hero-reveal {
  opacity: 0;
  transform: translateY(28px);

  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: opacity, transform;
}

body.home.is-page-loaded .home-hero .js-hero-reveal {
  opacity: 1;
  transform: translateY(0);
}


/* ファーストビュー内の時間差 */
body.home .home-hero .js-hero-reveal:nth-child(1) {
  transition-delay: 0.15s;
}

body.home .home-hero .js-hero-reveal:nth-child(2) {
  transition-delay: 0.35s;
}

body.home .home-hero .js-hero-reveal:nth-child(3) {
  transition-delay: 0.55s;
}


/* ========================================
   ホバー
======================================== */

@media (hover: hover) {

  body.home .home-works-item,
  body.home .home-labo-item {
    transition:
      transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.35s ease;
  }

  body.home .home-works-item:hover,
  body.home .home-labo-item:hover {
    transform: translateY(-7px);
  }
}


/* ========================================
   動きを減らす設定への対応
======================================== */

@media (prefers-reduced-motion: reduce) {

  body.home .js-scroll-reveal,
  body.home .home-hero .js-hero-reveal,
  body.home .home-works-item,
  body.home .home-labo-item {
    opacity: 1 !important;
    transform: none !important;

    transition: none !important;
  }
}

/* ========================================
   LABOカード：斜め右矢印を完全に非表示
   TOP・ARCHIVE共通
======================================== */

/* TOPページ */
body.home .home-labo-arrow,
body.home .home-labo-item-link::after,
body.home .home-labo-info::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* LABOアーカイブ */
.post-type-archive-labo .labo-card-arrow,
.post-type-archive-labo .labo-card-link::after,
.post-type-archive-labo .labo-card-body::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* ========================================
   LABO ARCHIVE：
   TOPページと同じカードエフェクト
======================================== */

.post-type-archive-labo .labo-card {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease !important;
}

.post-type-archive-labo .labo-card-link {
  display: block;
  height: 100%;

  color: inherit;
  text-decoration: none;

  transition: opacity 0.3s ease;
}


/* 画像 */
.post-type-archive-labo .labo-card-image {
  overflow: hidden;
}

.post-type-archive-labo .labo-card-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease;
}


/* PC・マウス操作時 */
@media (hover: hover) and (pointer: fine) {

  .post-type-archive-labo .labo-card:hover {
    transform: translateY(-7px) !important;

    box-shadow:
      0 14px 30px rgba(20, 39, 64, 0.12) !important;
  }

  .post-type-archive-labo .labo-card:hover .labo-card-image img {
    transform: scale(1.035);
  }

  .post-type-archive-labo .labo-card:hover .labo-card-title {
    opacity: 0.62;
  }
}


/* タイトル */
.post-type-archive-labo .labo-card-title {
  transition: opacity 0.3s ease;
}


/* スマホでは持ち上げない */
@media screen and (max-width: 767px) {

  .post-type-archive-labo .labo-card,
  .post-type-archive-labo .labo-card:hover {
    transform: none !important;
  }

  .post-type-archive-labo .labo-card:hover .labo-card-image img {
    transform: none !important;
  }
}


/* ========================================
   LABO ARCHIVE：
   TOPと同じ左側ネイビーライン
======================================== */

.post-type-archive-labo .labo-card {
  position: relative;
  overflow: hidden;
}


/* 左側ラインの初期状態 */
.post-type-archive-labo .labo-card::after {
  content: "";

  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;

  width: 4px;
  height: 100%;

  background: #294d7c;

  transform: scaleY(0);
  transform-origin: bottom;

  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);

  pointer-events: none;
}


/* マウスオーバーで表示 */
@media (hover: hover) and (pointer: fine) {

  .post-type-archive-labo .labo-card:hover::after {
    transform: scaleY(1);
    transform-origin: top;
  }
}

/* ========================================
   HOME スマホ：
   LABO見出しを上へ
======================================== */

@media screen and (max-width: 767px) {

  body.home .home-labo .home-section-inner {
    padding-top: 44px !important;
  }

  body.home .home-labo .home-section-heading {
    margin-top: 0 !important;
  }
}


/* ========================================
   HOME スマホ：
   LABO見出しの上下余白をゆったり
======================================== */

@media screen and (max-width: 767px) {

  body.home .home-labo .home-section-heading {
    margin-top: 24px !important;
    margin-bottom: 48px !important;
  }
}

/* ========================================
   WORKS・LABO 個別投稿：
   記事タイトルを小さく調整
======================================== */

.single-works .works-single-title,
.single-works .entry-title,
.single-labo .labo-single-title,
.single-labo .entry-title {
  font-size: clamp(30px, 3.6vw, 52px) !important;
  line-height: 1.35 !important;
  letter-spacing: 0.02em !important;
}


/* スマートフォン */
@media screen and (max-width: 767px) {

  .single-works .works-single-title,
  .single-works .entry-title,
  .single-labo .labo-single-title,
  .single-labo .entry-title {
    font-size: 26px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.015em !important;
  }
}

/* ========================================
   WORKS個別ページ：
   クライアント名／実績名／一行説明
======================================== */

.single-works .works-single-header {
  width: 100%;

  margin: 0;
  padding: 0;

  background: #f5f5f3;
}

.single-works .works-single-header-inner {
  width: calc(100% - 80px);
  max-width: 1240px;
  min-height: 340px;

  margin: 0 auto;
  padding: 68px 0 62px;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(180px, 230px);

  align-items: end;
  gap: clamp(60px, 10vw, 170px);
}


/* ========================================
   左側
======================================== */

.single-works .works-single-heading {
  min-width: 0;

  margin: 0;
  padding: 0;
}


/* WORKS */

.single-works .works-single-label {
  margin: 0 0 22px;
  padding: 0;

  color: #294d7c;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.22em;
}


/* カテゴリー */

.single-works .works-single-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 32px;

  margin: 0 0 32px;
  padding: 7px 15px;

  border-radius: 5px;

  color: #fff;
  background: #294d7c;

  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
}


/* クライアント名：中サイズ */

.single-works .works-single-client {
  margin: 0 0 14px;
  padding: 0;

  color: #294d7c;

  font-size: clamp(16px, 1.65vw, 22px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.06em;

  overflow-wrap: anywhere;
}


/* 制作実績名：大サイズ */

.single-works .works-single-title {
  max-width: 900px;

  margin: 0;
  padding: 0;

  border: 0;

  color: #181818;
  background: transparent;

  font-family:
    "Helvetica Neue",
    Arial,
    "Yu Gothic",
    "游ゴシック",
    sans-serif;

  font-size: clamp(34px, 4vw, 56px) !important;
  font-weight: 600;
  line-height: 1.28 !important;
  letter-spacing: 0.02em !important;

  overflow-wrap: anywhere;
}

.single-works .works-single-title::before,
.single-works .works-single-title::after {
  content: none !important;
  display: none !important;
}


/* 一行説明：小サイズ */

.single-works .works-single-lead {
  max-width: 760px;

  margin: 22px 0 0;
  padding: 0;

  color: #61758a;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.07em;
}


/* ========================================
   右側
======================================== */

.single-works .works-single-meta {
  width: 100%;

  align-self: end;
}

.single-works .works-single-date {
  margin: 0 0 30px;
}

.single-works .works-single-meta-label {
  margin: 0 0 13px;
  padding: 0;

  color: #294d7c;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2em;
}

.single-works .works-single-date-text {
  display: block;

  color: #61758a;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
}


/* ALL WORKS */

.single-works .works-single-back {
  width: 100%;

  padding: 23px 0 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  border-top:
    1px solid rgba(41, 77, 124, 0.4);

  color: #181818;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
  text-decoration: none;

  transition: opacity 0.25s ease;
}

.single-works .works-single-back span:last-child {
  display: inline-block;

  font-size: 23px;
  font-weight: 300;
  line-height: 1;

  transition: transform 0.25s ease;
}

.single-works .works-single-back:hover {
  color: #181818;
  text-decoration: none;
  opacity: 0.55;
}

.single-works .works-single-back:hover span:last-child {
  transform: translateX(6px);
}


/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 767px) {

  .single-works .works-single-header-inner {
    width: calc(100% - 40px);
    min-height: auto;

    padding: 46px 0 42px;

    grid-template-columns: 1fr;
    align-items: start;

    gap: 38px;
  }

  .single-works .works-single-label {
    margin-bottom: 18px;

    font-size: 9px;
  }

  .single-works .works-single-category {
    min-height: 29px;

    margin-bottom: 26px;
    padding: 6px 12px;

    font-size: 10px;
  }

  .single-works .works-single-client {
    margin-bottom: 10px;

    font-size: 15px;
    line-height: 1.5;
  }

  .single-works .works-single-title {
    font-size: 28px !important;
    line-height: 1.42 !important;
  }

  .single-works .works-single-lead {
    margin-top: 17px;

    font-size: 12px;
    line-height: 1.85;
  }

  .single-works .works-single-meta {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(130px, 1fr);

    align-items: end;
    gap: 24px;
  }

  .single-works .works-single-date {
    margin: 0;
  }

  .single-works .works-single-meta-label {
    margin-bottom: 10px;

    font-size: 9px;
  }

  .single-works .works-single-date-text {
    font-size: 12px;
  }

  .single-works .works-single-back {
    padding-top: 17px;

    font-size: 9px;
  }

  .single-works .works-single-back span:last-child {
    font-size: 18px;
  }
}

/* ========================================
   WORKS個別：
   アイキャッチとPROJECT NOTEの横幅を統一
======================================== */

.single-works .works-single-visual,
.single-works .works-project-note,
.single-works .works-project-data-wrap {
  width: calc(100% - 80px) !important;
  max-width: 1240px !important;

  margin-right: auto !important;
  margin-left: auto !important;
}

/* ========================================
   WORKS個別：
   PROJECT NOTE＋PROJECT DATA 最終調整
======================================== */

/* アイキャッチとPROJECT NOTE＋DATAの外幅を統一 */
.single-works .works-single-visual-inner,
.single-works .works-single-content-inner {
  width: calc(100% - 80px) !important;
  max-width: 1240px !important;

  margin-right: auto !important;
  margin-left: auto !important;
}


/* PROJECT NOTE＋PROJECT DATAの横並び */
.single-works .works-single-content-inner {
  display: grid !important;

  grid-template-columns:
    95px
    minmax(0, 1fr) !important;

  align-items: start !important;

  column-gap: 42px !important;
  row-gap: 0 !important;

  padding-right: 0 !important;
  padding-left: 0 !important;
}


/* 左側：PROJECT NOTE */
.single-works .works-single-content-label {
  width: 100% !important;

  margin: 0 !important;
  padding: 3px 0 0 !important;
}


/* 右側：本文・PROJECT DATA */
.single-works .works-single-entry {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}

.single-works .works-project-data {
  width: 100% !important;
  max-width: none !important;

  margin-right: 0 !important;
  margin-left: 0 !important;
}


/* アイキャッチ画像 */
.single-works .works-single-visual-inner {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.single-works .works-single-main-image,
.single-works .works-single-thumbnail,
.single-works .works-single-thumbnail img,
.single-works .works-single-main-image img {
  display: block;

  width: 100% !important;
  max-width: none !important;
  height: auto !important;

  margin-right: 0 !important;
  margin-left: 0 !important;
}


/* ========================================
   タブレット
======================================== */

@media screen and (max-width: 1023px) {

  .single-works .works-single-visual-inner,
  .single-works .works-single-content-inner {
    width: calc(100% - 48px) !important;
  }

  .single-works .works-single-content-inner {
    grid-template-columns:
      90px
      minmax(0, 1fr) !important;

    column-gap: 32px !important;
  }
}


/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 767px) {

  .single-works .works-single-visual-inner,
  .single-works .works-single-content-inner {
    width: calc(100% - 40px) !important;
    max-width: 600px !important;
  }

  .single-works .works-single-content-inner {
    grid-template-columns: 1fr !important;

    row-gap: 18px !important;
  }

  .single-works .works-single-content-label {
    padding-top: 0 !important;
  }

  .single-works .works-single-entry,
  .single-works .works-project-data {
    width: 100% !important;
  }
}

/* ========================================
   WORKS個別：
   アイキャッチとPROJECT NOTEエリアの
   左右端を完全に統一
======================================== */

/* アイキャッチとPROJECT NOTEエリアを同じ外幅にする */
.single-works .works-single-visual-inner,
.single-works .works-single-content-inner {
  width: calc(100% - 80px) !important;
  max-width: 1240px !important;

  margin-right: auto !important;
  margin-left: auto !important;

  padding-right: 0 !important;
  padding-left: 0 !important;
}


/* PROJECT NOTE＋PROJECT DATA全体 */
.single-works .works-single-content-inner {
  display: grid !important;

  grid-template-columns:
    120px
    minmax(0, 1fr) !important;

  align-items: stretch !important;

  column-gap: 42px !important;
  row-gap: 0 !important;
}


/* 左側：PROJECT NOTE
   アイキャッチ左端と完全に一致 */
.single-works .works-single-content-label {
  width: 120px !important;

  margin: 0 !important;
  padding: 3px 0 0 !important;

  justify-self: start !important;
}


/* 右側：PROJECT DATA
   アイキャッチ右端まで使用 */
.single-works .works-single-entry {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  justify-self: stretch !important;
}


/* PROJECT DATAの背景ブロック */
.single-works .works-project-data {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;

  box-sizing: border-box !important;
}


/* PROJECT DATA内の余計な横幅制限を解除 */
.single-works .works-project-data-inner,
.single-works .works-project-data table {
  width: 100% !important;
  max-width: none !important;

  margin-right: 0 !important;
  margin-left: 0 !important;
}


/* ========================================
   タブレット
======================================== */

@media screen and (max-width: 1023px) {

  .single-works .works-single-visual-inner,
  .single-works .works-single-content-inner {
    width: calc(100% - 48px) !important;
  }

  .single-works .works-single-content-inner {
    grid-template-columns:
      100px
      minmax(0, 1fr) !important;

    column-gap: 32px !important;
  }

  .single-works .works-single-content-label {
    width: 100px !important;
  }
}


/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 767px) {

  .single-works .works-single-visual-inner,
  .single-works .works-single-content-inner {
    width: calc(100% - 40px) !important;
    max-width: 600px !important;
  }

  .single-works .works-single-content-inner {
    grid-template-columns: 1fr !important;

    row-gap: 18px !important;
  }

  .single-works .works-single-content-label {
    width: 100% !important;

    padding-top: 0 !important;
  }

  .single-works .works-single-entry,
  .single-works .works-project-data {
    width: 100% !important;
  }
}

/* ========================================
   WORKS個別：
   アイキャッチとPROJECT NOTE＋DATAの
   左右端を完全に統一
======================================== */

.single-works {
  --works-content-width: 1160px;
  --works-side-space: 80px;
}


/* アイキャッチと下段を同じ外幅にする */
.single-works .works-single-visual-inner,
.single-works .works-single-content-inner {
  width: calc(100% - var(--works-side-space)) !important;
  max-width: var(--works-content-width) !important;

  margin-right: auto !important;
  margin-left: auto !important;

  padding-right: 0 !important;
  padding-left: 0 !important;

  box-sizing: border-box !important;
}


/* ========================================
   アイキャッチ
======================================== */

.single-works .works-single-main-image,
.single-works .works-single-thumbnail {
  width: 100% !important;
  max-width: none !important;

  margin-right: 0 !important;
  margin-left: 0 !important;
}

.single-works .works-single-main-image img,
.single-works .works-single-thumbnail img {
  display: block;

  width: 100% !important;
  max-width: none !important;
  height: auto !important;

  margin: 0 !important;
}


/* ========================================
   PROJECT NOTE＋PROJECT DATA
======================================== */

.single-works .works-single-content-inner {
  display: grid !important;

  grid-template-columns:
    110px
    minmax(0, 1fr) !important;

  align-items: start !important;

  column-gap: 42px !important;
  row-gap: 0 !important;
}


/* PROJECT NOTE
   アイキャッチの左端と一致 */
.single-works .works-single-content-label {
  width: 110px !important;

  margin: 0 !important;
  padding: 3px 0 0 !important;

  justify-self: start !important;
}


/* 右側本文 */
.single-works .works-single-entry {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  justify-self: stretch !important;
}


/* PROJECT DATA背景
   アイキャッチの右端まで伸ばす */
.single-works .works-single-entry .works-project-data {
  width: 100% !important;
  max-width: none !important;

  margin-right: 0 !important;
  margin-left: 0 !important;

  box-sizing: border-box !important;
}


/* 内側に別の幅制限がある場合も解除 */
.single-works .works-project-data-inner,
.single-works .works-project-data table {
  width: 100% !important;
  max-width: none !important;

  margin-right: 0 !important;
  margin-left: 0 !important;
}


/* ========================================
   タブレット
======================================== */

@media screen and (max-width: 1023px) {

  .single-works {
    --works-side-space: 48px;
  }

  .single-works .works-single-content-inner {
    grid-template-columns:
      90px
      minmax(0, 1fr) !important;

    column-gap: 32px !important;
  }

  .single-works .works-single-content-label {
    width: 90px !important;
  }
}


/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 767px) {

  .single-works {
    --works-side-space: 40px;
  }

  .single-works .works-single-visual-inner,
  .single-works .works-single-content-inner {
    max-width: 600px !important;
  }

  .single-works .works-single-content-inner {
    grid-template-columns: 1fr !important;

    row-gap: 18px !important;
  }

  .single-works .works-single-content-label {
    width: 100% !important;

    padding-top: 0 !important;
  }

  .single-works .works-single-entry,
  .single-works .works-project-data {
    width: 100% !important;
  }
}

/* ========================================
   WORKS個別 スマホ：
   冒頭アイキャッチを大きく表示
======================================== */

@media screen and (max-width: 767px) {

  /* アイキャッチ部分を画面幅基準にする */
  .single-works .works-single-visual {
    width: 100vw !important;

    margin-right: calc(50% - 50vw) !important;
    margin-left: calc(50% - 50vw) !important;
  }

  /* 左右15pxだけ余白を残す */
  .single-works .works-single-visual-inner {
    width: calc(100% - 30px) !important;
    max-width: none !important;

    margin-right: auto !important;
    margin-left: auto !important;

    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  /* 画像本体を外枠いっぱいに広げる */
  .single-works .works-single-main-image,
  .single-works .works-single-thumbnail,
  .single-works .works-single-main-image img,
  .single-works .works-single-thumbnail img {
    display: block !important;

    width: 100% !important;
    max-width: none !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ========================================
   WORKS・LABO 個別ページ スマホ：
   ヒーローをコンパクトに調整
======================================== */

@media screen and (max-width: 767px) {

  /* ----------------------------------------
     WORKS
  ---------------------------------------- */

  .single-works .works-single-header-inner {
    width: calc(100% - 30px) !important;
    min-height: auto !important;

    padding-top: 32px !important;
    padding-bottom: 30px !important;

    display: grid !important;
    grid-template-columns: 1fr !important;

    gap: 24px !important;
  }

  .single-works .works-single-label {
    margin-bottom: 12px !important;

    font-size: 9px !important;
  }

  .single-works .works-single-category {
    min-height: 26px !important;

    margin-bottom: 16px !important;
    padding: 5px 10px !important;

    font-size: 9px !important;
  }

  .single-works .works-single-client {
    margin-bottom: 7px !important;

    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .single-works .works-single-title,
  .single-works .entry-title {
    margin: 0 !important;

    font-size: 24px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.01em !important;
  }

  .single-works .works-single-lead {
    margin-top: 12px !important;

    font-size: 11px !important;
    line-height: 1.75 !important;
  }


  /* DATEとALL WORKSを横並び */
  .single-works .works-single-meta {
    width: 100% !important;

    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(120px, 1fr) !important;

    align-items: end !important;
    gap: 20px !important;
  }

  .single-works .works-single-date {
    margin: 0 !important;
  }

  .single-works .works-single-meta-label {
    margin-bottom: 8px !important;

    font-size: 8px !important;
  }

  .single-works .works-single-date-text {
    font-size: 11px !important;
  }

  .single-works .works-single-back {
    padding-top: 13px !important;

    font-size: 8px !important;
  }


  /* ----------------------------------------
     LABO
  ---------------------------------------- */

  .single-labo .article-header,
  .single-labo .labo-single-header {
    margin: 0 !important;
    padding: 32px 15px 30px !important;
  }

  .single-labo .entry-title,
  .single-labo .labo-single-title {
    margin: 0 !important;

    font-size: 24px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.01em !important;
  }

  .single-labo .entry-categories,
  .single-labo .labo-single-category,
  .single-labo .cat-label {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
  }

  .single-labo .date-tags,
  .single-labo .labo-single-meta {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
  }
}