@charset "UTF-8";
:root {
  --swiper-height: 50vh;
  --min-size: 300px;
  --max-size: 600px; }

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: #fff;
  font-family: Noto Sans JP, sans-serif;
  line-height: 1.7; }

.container {
  /* width: 100%;*/
  padding: 0; }

/* --- Swiper 設定 --- */
.swiper {
  width: 100%;
  height: clamp(var(--min-size), var(--swiper-height), var(--max-size));
  position: relative;
  overflow: hidden; }
  .swiper-forward {
    background-color: #f0f0f0;
    padding: 10px 0;
    margin-bottom: 10px; }
    .swiper-forward .swiper-slide {
      aspect-ratio: 4 / 3; }
  .swiper-reverse {
    padding: 10px 0;
    margin-bottom: 10px; }
    .swiper-reverse .swiper-slide {
      aspect-ratio: 1 / 1; }
  .swiper-wrapper {
    transition-timing-function: linear !important;
    will-change: transform; }
  .swiper-slide {
    height: 100% !important;
    width: auto !important;
    border-radius: 8px;
    overflow: hidden;
    background: #eee; }
    .swiper-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      opacity: 0;
      animation: imgFadeIn 1.2s ease-out forwards; }

@keyframes imgFadeIn {
  0% {
    opacity: 0;
    filter: grayscale(100%) blur(5px); }
  100% {
    opacity: 1;
    filter: grayscale(0%) blur(0); } }
/* --- タイポグラフィ設定 --- */
.main-title {
  position: absolute;
  left: 4%;
  bottom: 10%;
  /* 余白に合わせて全体の位置を微調整 */
  z-index: 10;
  margin: 0;
  pointer-events: none;
  color: #000;
  font-size: clamp(24px, 4vw, 48px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-feature-settings: "palt" 1;
  box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; }

.title-mask {
  display: table;
  background-color: #ffffff;
  padding: 0.15em 0.4em 0.1em;
  overflow: hidden;
  margin-top: 0.42em;
  border-radius: 5px; }
  .title-mask:nth-child(1) .title-text {
    animation-delay: 0.6s; }
  .title-mask:nth-child(2) .title-text {
    animation-delay: 0.8s; }
  .title-mask:nth-child(3) .title-text {
    animation-delay: 1.0s; }

/* ★サブタイトルの微調整（サイズ80%・余白拡大） */
.sub-title-mask {
  font-size: 0.4em;
  /* 元の0.5emから80%のサイズへ */
  margin-bottom: 2.5em;
  /* 下のメインコピーとの距離を大幅に確保 */
  font-weight: 700;
  letter-spacing: 0.05em;
  /* 小さい文字なので少し字間を広げて可読性を確保 */ }

.title-text {
  display: block;
  transform: translateY(110%);
  animation: textReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes textReveal {
  from {
    transform: translateY(110%) skewY(10deg);
    opacity: 0; }
  to {
    transform: translateY(0) skewY(0);
    opacity: 1; } }
@media (max-width: 620px) {
  :root {
    --swiper-height: 40vh; }

  .main-title {
    left: 15px;
    bottom: 20px; }

  .sub-title-mask {
    margin-bottom: 1.5em; }

  /* スマホでは余白を少し調整 */ }
.concept {
  padding: 120px 0; }
  @media screen and (max-width: 897px) {
    .concept {
      padding: 40px 20px; } }
  .concept__box {
    max-width: 1140px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end; }
    @media screen and (max-width: 897px) {
      .concept__box {
        display: block; } }
    .concept__box .txt {
      width: 51%; }
      @media screen and (max-width: 897px) {
        .concept__box .txt {
          width: 100%; } }
      .concept__box .txt .logo {
        padding: 0 0 70px 0; }
        @media screen and (max-width: 897px) {
          .concept__box .txt .logo {
            padding: 0 0 40px 0;
            text-align: center; } }
        .concept__box .txt .logo img {
          max-width: 80%; }
          @media screen and (max-width: 897px) {
            .concept__box .txt .logo img {
              max-width: 80%; } }
      .concept__box .txt .headline {
        padding: 0 0 30px 0; }
        @media screen and (max-width: 897px) {
          .concept__box .txt .headline {
            padding: 0 0 30px 0;
            text-align: center; } }
        .concept__box .txt .headline span {
          font-size: 7.4rem;
          line-height: 1;
          font-weight: 500;
          font-family: "myriad-pro", sans-serif;
          font-weight: 400;
          font-style: normal; }
          @media screen and (max-width: 897px) {
            .concept__box .txt .headline span {
              font-size: 4.0rem;
              font-weight: 500;
              line-height: 0; } }
        .concept__box .txt .headline h2 {
          font-size: 2.0rem;
          color: #666;
          font-weight: 400;
          padding: 10px 0 0 0; }
          @media screen and (max-width: 897px) {
            .concept__box .txt .headline h2 {
              padding: 15px 0 0 0;
              line-height: 0; } }
      .concept__box .txt h3 {
        font-size: 1.8rem;
        line-height: 1.7;
        letter-spacing: 0.5px; }
        @media screen and (max-width: 897px) {
          .concept__box .txt h3 {
            text-align: justify;
            letter-spacing: 0;
            font-size: 1.7rem;
            line-height: 1.6; } }
      .concept__box .txt p {
        margin: 15px 0 0 0;
        font-size: 1.7rem;
        line-height: 1.7;
        text-align: justify; }
        @media screen and (max-width: 897px) {
          .concept__box .txt p {
            font-size: 1.6rem; } }
    .concept__box .img {
      width: 45%; }
      @media screen and (max-width: 897px) {
        .concept__box .img {
          width: 100%;
          margin: 15px 0 0 0; } }
      .concept__box .img img {
        max-width: 100%;
        border-radius: 8px; }

.about {
  padding: 110px 0 360px 0;
  background: #F7F7F7; }
  @media screen and (max-width: 897px) {
    .about {
      padding: 40px 20px 120px 20px; } }
  .about__box {
    max-width: 800px;
    margin: auto; }
    .about__box .headline {
      padding: 0 0 40px 0;
      text-align: center; }
      .about__box .headline span {
        font-size: 7.4rem;
        line-height: 1;
        font-weight: 500;
        font-family: "myriad-pro", sans-serif;
        font-weight: 400;
        font-style: normal; }
        @media screen and (max-width: 897px) {
          .about__box .headline span {
            font-size: 4.0rem;
            font-weight: 500;
            line-height: 0; } }
      .about__box .headline h2 {
        font-size: 2.0rem;
        color: #666;
        font-weight: 400;
        padding: 10px 0 0 0; }
        @media screen and (max-width: 897px) {
          .about__box .headline h2 {
            padding: 15px 0 0 0;
            line-height: 0; } }
    .about__box .txt p {
      font-size: 1.7rem;
      text-align: justify; }
      @media screen and (max-width: 897px) {
        .about__box .txt p {
          font-size: 1.6rem; } }
      .about__box .txt p:not(:last-of-type) {
        padding: 0 0 15px 0; }
  .about .btn {
    margin: 30px 0 0 0;
    text-align: center; }
    @media screen and (max-width: 897px) {
      .about .btn {
        margin: 0; } }
  .about .btn a {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 20px;
    border: 1px solid #eee;
    text-decoration: none;
    color: #333;
    position: relative;
    background: #fff;
    font-size: 1.7rem;
    line-height: 1.4;
    font-weight: 700; }
  .about .btn a::after {
    content: "";
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'><path d='M14 3h7v7'/><path d='M21 3L10 14'/><path d='M21 14v7h-7'/></svg>") no-repeat center/contain; }

.nakayoshi-gallery {
  margin-top: -240px; }
  @media screen and (max-width: 897px) {
    .nakayoshi-gallery {
      margin-top: -80px; } }