/*
Theme Name: haconiwa design
Theme URI:
Author: Emiko Miyazawa
Description: haconiwa design portfolio theme
Version: 1.1
*/

/* =============================================
   Base Reset
   ============================================= */
*, *::before, *::after {
  box-sizing: border-box;
}

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

img {
  max-width: 100%;
  display: block;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  overflow-x: hidden;
}


/* =============================================
   Header
   ============================================= */
.siteHeader {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.siteHeader::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
  pointer-events: none;
}

.siteHeader > * {
  position: relative;
}

.siteHeader__brand {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(29,36,48,.75);
}

.siteHeader__nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 15px;
  letter-spacing: 0.1em;
}

.siteHeader__nav a {
  color: white;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(28,138,157,1);
  transition: color 0.3s ease, border-bottom-color 0.3s ease;
  padding: 8px 4px;
  border-bottom: 1px solid transparent;
}

.siteHeader__nav a:hover {
  border-bottom-color: rgba(254,255,236,1);
}

.siteHeader__menu {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  z-index: 60;
}

.siteHeader__menu span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 1px;
  border-radius: 2px;
  background: rgba(29,36,48,.45);
  transition: transform .3s ease, opacity .25s ease;
}

.siteHeader__menu span:nth-child(1) { transform: translate(-50%, -6px); }
.siteHeader__menu span:nth-child(2) { transform: translate(-50%, -50%); }
.siteHeader__menu span:nth-child(3) { transform: translate(-50%, 4px); }

.siteHeader__menu.is-active span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.siteHeader__menu.is-active span:nth-child(2) { opacity: 0; }
.siteHeader__menu.is-active span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }


/* モバイルメニュー（オーバーレイ）— ヘッダー(z50)より下にしてハンバーガー(×)を常に押せるように */
.mobileNav {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}

.mobileNav.is-open {
  opacity: 1;
  visibility: visible;
}

.mobileNav a {
  font-size: 22px;
  letter-spacing: .14em;
  color: rgba(29,36,48,.82);
}

@media (min-width: 921px) {
  .mobileNav { display: none; }
}


/* =============================================
   Hero
   ============================================= */
.hero {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  z-index: -1;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 3;
  max-width: 1120px;
  margin: 0 auto;
  padding: 60vh 28px 0;
  filter: drop-shadow(0 0 5px rgb(0,55,0));
}

.hero__tag {
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(255,255,255,1);
}

.hero__title {
  color: #fff;
  font-size: 48px;
  font-weight: 300;
  letter-spacing: .02em;
  margin: 0;
}

.hero__sub {
  margin-top: 6px;
  color: rgba(29,36,48,.6);
}

.hero__cta {
  margin: 30px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.25);
  border: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(29,36,48,.08);
  transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.hero__cta:hover {
  background: rgba(0,0,0,0.6);
  color: rgba(255,255,255,1);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(29,36,48,.15);
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .22em;
  color: rgba(29,36,48,.55);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
}

.hero__arrow {
  letter-spacing: 0;
}


/* =============================================
   Sections (shared)
   ============================================= */
.section {
  position: relative;
  padding: 0 28px;
}

.section__inner {
  max-width: 1120px;
  margin: auto;
  position: relative;
}

.section__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}

.section__icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(29,36,48,.10);
  background: rgba(255,255,255,.55);
  color: rgba(29,36,48,.55);
  font-size: 12px;
  flex-shrink: 0;
}

.section__title {
  margin: 60px 0 30px;
  text-align: center;
  font-size: 25px;
  letter-spacing: .16em;
  font-weight: 300;
  color: rgba(29,36,48,.75);
}


/* =============================================
   About
   ============================================= */
.about {
  height: 115vh;
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(255,255,255,.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.about__grid {
  padding-top: 200px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 34px;
  align-items: center;
}

.about__name {
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: .10em;
  color: rgba(29,36,48,.82);
}

.about__desc {
  margin: 0 0 22px;
  line-height: 2.0;
  color: rgba(29,36,48,.62);
  font-size: 14px;
}

.ghostBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid rgba(29,36,48,.14);
  background: rgba(255,255,255,.55);
  color: rgba(29,36,48,.65);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: background .2s ease;
}

.ghostBtn:hover {
  background: rgba(255,255,255,.80);
}

.about__avatar {
  width: min(340px, 70vw);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  overflow: hidden;
  margin-left: auto;
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 24px 70px rgba(29,36,48,.10);
  background: rgba(255,255,255,.18);
}

.about__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* =============================================
   Works wrapper
   ============================================= */
.section.works {
  position: relative;
  z-index: 12;
  background: rgba(255,255,255,1);
  padding-left: 0;
  padding-right: 0;
}


/* =============================================
   Photography / Gallery
   ============================================= */
.photography {
  padding: 0;
}

.gallery-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-top: 10px;
  padding-bottom: 20px;
  z-index: 15;
  position: relative;
  margin-top: -150px;
  background: linear-gradient(
    135deg,
    rgba(173, 216, 230, 0.4),
    rgba(255, 240, 245, 0.4),
    rgba(255, 255, 200, 0.3),
    rgba(200, 255, 230, 0.3)
  );
}

.gallery-container {
  display: flex;
  width: 100%;
  gap: 0;
  flex-wrap: wrap;
}

.gallery-item {
  display: block;
  flex: 1;
  overflow: hidden;
  padding: 2px;
  line-height: 0;
}

.gallery-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: filter 0.4s ease;
}

.gallery-img:hover {
  filter: brightness(50%);
}

.gallery-section p {
  text-align: right;
  margin: 20px 0 0;
  font-size: 14px;
  color: rgba(29,36,48,.55);
  letter-spacing: .06em;
  padding: 0 28px;
}

.gallery-section p a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  padding: 30px 100px 0 28px;
  color: rgba(29,36,48,.55);
  transition: color 0.3s ease;
}

.gallery-section p a::before {
  content: "";
  width: 100px;
  height: 1px;
  background: rgba(29,36,48,.3);
  transition: width 0.4s ease;
}

.gallery-section p a:hover {
  color: rgba(29,36,48,1);
}

.gallery-section p a:hover::before {
  width: 0;
}


/* =============================================
   Web Design
   ============================================= */
.webdesign {
  position: relative;
  z-index: 20;
  background-color: #fff;
  padding-top: 100px;
  padding-bottom: 0;
  overflow: visible;
}

.web-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  max-width: 1000px;
  margin: 40px auto 0;
  cursor: pointer;
}

.web-item__img {
  transition: transform .5s ease, box-shadow .3s ease;
}

.web-container:hover .web-item__img {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
}

.web-item__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 13px;
  letter-spacing: .14em;
  color: #a2d2e2;
  transition: gap .3s ease, color .3s ease;
}

.web-container:hover .web-item__more {
  gap: 14px;
  color: #6fb8cf;
}

.web-item {
  flex: 1;
  max-width: 50%;
}

.web-item__img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,.1);
}

.web-text {
  flex: 1;
  text-align: left;
}

.web-item__title {
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: bold;
  color: #333;
}

.web-item__desc {
  line-height: 1.8;
  color: #555;
  font-size: 15px;
}

.web-item__sub {
  color: #a2d2e2;
  font-size: 14px;
  margin-bottom: 10px;
}

.web-item__tags {
  margin-top: 20px;
  font-size: 13px;
  color: #ccc;
  letter-spacing: 0.1em;
}


/* =============================================
   Graphic Design / Carousel
   ============================================= */
.graphicdesign {
  background: #f0e8f5;
  overflow: visible;
  padding: 100px 0 10px;
  z-index: 20;
  position: relative;
  margin-top: -1px;
}

.section_inner {
  max-width: 1120px;
  margin: auto;
}

.section_head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
  padding: 0 28px;
}

.section_icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(29,36,48,.10);
  background: rgba(255,255,255,.55);
  color: rgba(29,36,48,.55);
  font-size: 12px;
  flex-shrink: 0;
}

.carousel_container {
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
}

.carousel_track {
  display: flex;
  width: max-content;
}

.carousel_item {
  width: calc(25vw - 10px);
  margin: 0 5px;
  flex-shrink: 0;
}

.carousel_item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  will-change: transform;
}

.track_left {
  animation: scroll_left 60s linear infinite;
}

.track_right {
  animation: scroll_right 60s linear infinite;
}

@keyframes scroll_left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-33.33%); }
}

@keyframes scroll_right {
  0%   { transform: translateX(-33.33%); }
  100% { transform: translateX(0); }
}

.wave-separator {
  position: relative;
  z-index: 30;
  width: 100%;
  line-height: 0;
}

.wave-separator svg {
  width: 100%;
  height: 80px;
  display: block;
}


/* =============================================
   Contact
   ============================================= */
.contact {
  position: relative;
  padding: 120px 28px;
  overflow: hidden;
  z-index: 31;
  margin-top: -250px;
  background: #fff;
}

.contact__bg {
  position: absolute;
  inset: -20px;
  z-index: -1;
  background:
    radial-gradient(900px 420px at 15% 20%, rgba(191,224,242,.60), transparent 62%),
    radial-gradient(900px 420px at 85% 70%, rgba(240,239,233,.70), transparent 62%),
    linear-gradient(to bottom, rgba(255,255,255,.95), rgba(255,255,255,.98));
}

.contact__inner {
  margin-top: 50px;
  text-align: center;
}

.contact__thanks {
  margin: 10px 0 8px;
  color: rgba(29,36,48,.70);
  letter-spacing: .10em;
}

.contact__lead {
  margin: 0 0 20px;
  color: rgba(29,36,48,.55);
  letter-spacing: .06em;
  font-size: 13px;
}

.contact__mail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid rgba(29,36,48,.14);
  background: rgba(255,255,255,.70);
  letter-spacing: .08em;
  color: rgba(29,36,48,.72);
  transition: background .2s ease;
}

.contact__mail:hover {
  background: rgba(255,255,255,.92);
}


/* =============================================
   Footer
   ============================================= */
.siteFooter {
  position: relative;
  z-index: 32;
  background: #fff;         /* 下のカードを隠す不透明背景 */
  padding: 60px 18px 120px; /* 背景を長めに */
  text-align: center;
  color: rgba(29,36,48,.50);
  border-top: 1px solid rgba(29,36,48,.08);
}


/* =============================================
   Scroll to Top（抜け感のある細い線のボタン）
   ============================================= */
.toTop {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 95;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(29,36,48,.22);
  background: rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgba(29,36,48,.65);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .35s ease, visibility .35s ease, transform .35s ease, background .3s ease, border-color .3s ease;
}

.toTop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.toTop:hover {
  background: rgba(255,255,255,.4);
  border-color: rgba(29,36,48,.4);
  color: rgba(29,36,48,.9);
}

.toTop svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 768px) {
  .toTop {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
}


/* =============================================
   Custom Cursor
   ============================================= */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255,255,255,.9),
    rgba(200,230,255,.0) 40%,
    rgba(200,230,255,.0) 70%
  );
  filter: blur(3px);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform .15s ease-out;
}

.cursor.is-click {
  transform: translate(-50%, -50%) scale(.7);
}


/* =============================================
   News / Blog (hero right card)
   ============================================= */
#top { position: relative; }   /* カードの絶対配置の基準 */

.hero-news {
  position: absolute;
  top: 38vh;
  right: 6vw;
  z-index: 4;
  width: 300px;
  max-width: 80vw;
  padding: 22px 22px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.26);
  border: 1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px rgba(29,36,48,.18);
  color: rgba(29,36,48,.85);
}

.hero-news__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.hero-news__title {
  margin: 0;
  font-size: 13px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(29,36,48,.7);
}

.hero-news__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 56vh;
  overflow-y: auto;
}

.hero-news__item {
  border-top: 1px solid rgba(29,36,48,.18);
}

.hero-news__item a {
  display: block;
  padding: 12px 0;
  color: rgba(29,36,48,.82);
  transition: opacity .25s ease;
}

.hero-news__item a:hover { opacity: .55; }

.hero-news__date {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(29,36,48,.55);
  font-variant-numeric: tabular-nums;
}

.hero-news__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
}

.hero-news__all {
  flex-shrink: 0;
  font-size: 12px;
  letter-spacing: .08em;
  white-space: nowrap;
  color: rgba(29,36,48,.6);
  transition: color .3s ease;
}

.hero-news__all:hover { color: rgba(29,36,48,.95); }


/* =============================================
   Blog pages (single / archive)
   ============================================= */
.blog-page {
  padding: 140px 28px 80px;
  min-height: 70vh;
}

.blog-page__inner {
  max-width: 760px;
  margin: 0 auto;
}

.blog-page__title {
  text-align: center;
  font-size: 26px;
  letter-spacing: .16em;
  font-weight: 300;
  color: rgba(29,36,48,.78);
  margin: 0 0 40px;
}

.blog-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-list__item {
  border-top: 1px solid rgba(29,36,48,.12);
}

.blog-list__item:last-child {
  border-bottom: 1px solid rgba(29,36,48,.12);
}

.blog-list__item a {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 4px;
  color: rgba(29,36,48,.72);
  transition: color .25s ease, padding-left .25s ease;
}

.blog-list__item a:hover {
  color: rgba(29,36,48,1);
  padding-left: 10px;
}

.blog-list__date {
  flex-shrink: 0;
  font-size: 13px;
  letter-spacing: .06em;
  color: rgba(29,36,48,.5);
  font-variant-numeric: tabular-nums;
}

.blog-list__cat {
  flex-shrink: 0;
  font-size: 11px;
  letter-spacing: .08em;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(29,36,48,.07);
  color: rgba(29,36,48,.6);
}

.blog-list__text {
  font-size: 15px;
  line-height: 1.6;
}

.blog-article__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: .06em;
  color: rgba(29,36,48,.5);
}

.blog-article__cat {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(29,36,48,.07);
  color: rgba(29,36,48,.6);
}

.blog-article__title {
  font-size: 30px;
  line-height: 1.5;
  font-weight: 400;
  color: #2a2f38;
  margin: 0 0 28px;
}

.blog-article__thumb {
  margin: 0 0 32px;
}

.blog-article__thumb img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.blog-article__body {
  line-height: 2.0;
  color: #444;
  font-size: 16px;
}

.blog-article__body p { margin: 0 0 1.4em; }
.blog-article__body img { border-radius: 6px; margin: 10px 0; }
.blog-article__body h2 { font-size: 22px; margin: 1.6em 0 .6em; }
.blog-article__body h3 { font-size: 19px; margin: 1.4em 0 .5em; }

.blog-article__back {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(29,36,48,.1);
  text-align: center;
}

.blog-article__back a {
  font-size: 14px;
  letter-spacing: .1em;
  color: rgba(29,36,48,.6);
  transition: color .3s ease;
}

.blog-article__back a:hover { color: rgba(29,36,48,1); }

.blog-page__pagination {
  margin-top: 40px;
  text-align: center;
}

.blog-page__pagination .page-numbers {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 3px;
  border-radius: 8px;
  color: rgba(29,36,48,.6);
}

.blog-page__pagination .page-numbers.current {
  background: rgba(29,36,48,.85);
  color: #fff;
}

/* 下層ページ（ヒーロー無し）ではナビを濃色に */
.single .siteHeader__nav a,
.archive .siteHeader__nav a,
.blog .siteHeader__nav a,
.page .siteHeader__nav a {
  color: rgba(29,36,48,.8);
  text-shadow: none;
}

.single .siteHeader__nav a:hover,
.archive .siteHeader__nav a:hover,
.blog .siteHeader__nav a:hover,
.page .siteHeader__nav a:hover {
  border-bottom-color: rgba(29,36,48,.5);
}


/* =============================================
   Web Design Grid (thumbnails)
   ============================================= */
.web-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 40px auto 0;
}

.web-card {
  display: block;
  cursor: pointer;
}

.web-card__imgwrap {
  display: block;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.1);
}

.web-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s ease;
}

.web-card:hover .web-card__img {
  transform: scale(1.06);
}

.web-card__title {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  letter-spacing: .04em;
  color: #555;
}


/* =============================================
   Modal (Photography / Graphic / Web)
   ============================================= */
.pf-sources { display: none; }

.gallery-item { cursor: pointer; }
.carousel_item { cursor: pointer; }

.pf-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility .45s ease;
}

.pf-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.pf-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20,24,32,.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.pf-modal__panel {
  position: relative;
  width: min(1100px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 40px 120px rgba(20,24,32,.30);
  padding: 56px 48px 48px;
  transform: translateY(28px) scale(.97);
  opacity: 0;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
}

.pf-modal.is-open .pf-modal__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.pf-modal__close {
  position: sticky;
  top: 0;
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  margin: -20px -16px 0 0;
  border: none;
  border-radius: 999px;
  background: rgba(20,24,32,.9);
  color: #fff;
  font-size: 13px;
  letter-spacing: .14em;
  cursor: pointer;
  z-index: 2;
  transition: background .2s ease;
}

.pf-modal__close:hover {
  background: rgba(20,24,32,1);
}

.pf-modal__title {
  font-size: 26px;
  font-weight: 400;
  letter-spacing: .04em;
  color: #2a2f38;
  margin: 0 0 18px;
}

.pf-modal__desc {
  line-height: 1.9;
  color: #555;
  font-size: 15px;
}

.pf-modal__desc p { margin: 0 0 1em; }

/* 左右分割（Graphic / Web） */
.pf-split {
  display: flex;
  gap: 44px;
  align-items: flex-start;
}

.pf-split__img {
  flex: 0 0 48%;
  max-width: 48%;
}

.pf-split__img img {
  width: 100%;
  border-radius: 8px;
}

.pf-split__text {
  flex: 1;
}

/* 絵本風ギャラリー（Photography） */
.pf-book__content {
  line-height: 1.9;
  color: #555;
  font-size: 15px;
}

.pf-book__content img {
  border-radius: 6px;
  margin: 8px 0;
}

/* ギャラリーブロックを2〜3列で表示 */
.pf-book__content .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.pf-book__content .wp-block-gallery figure { margin: 0; }

/* ブログ記事（モーダル） */
.pf-article {
  max-width: 720px;
  margin: 0 auto;
}

.pf-article__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: .06em;
  color: rgba(29,36,48,.5);
}

.pf-article__cat {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(29,36,48,.07);
  color: rgba(29,36,48,.6);
}

.pf-article__title {
  font-size: 26px;
  line-height: 1.5;
  font-weight: 400;
  color: #2a2f38;
  margin: 0 0 24px;
}

.pf-article__thumb {
  margin: 0 0 28px;
}

.pf-article__thumb img {
  width: 100%;
  height: auto;          /* 比率を保持（歪み防止） */
  display: block;
  border-radius: 8px;
}

.pf-article__body {
  line-height: 1.95;
  color: #444;
  font-size: 15px;
}

.pf-article__body p { margin: 0 0 1.3em; }
.pf-article__body img { height: auto; border-radius: 6px; margin: 10px 0; }
.pf-article__body h2 { font-size: 21px; margin: 1.5em 0 .5em; }
.pf-article__body h3 { font-size: 18px; margin: 1.3em 0 .4em; }

/* View all：全記事リスト（モーダル） */
.pf-bloglist {
  max-width: 720px;
  margin: 0 auto;
}

.pf-bloglist .blog-list__item a { cursor: pointer; }


/* =============================================
   Works sections - sticky stacking
   長いセクションは最後まで見せてから固定し、次のセクションを重ねる
   ============================================= */
#photography,
#webdesign,
#graphicdesign {
  position: relative;
}

.stack-ready #photography,
.stack-ready #webdesign,
.stack-ready #graphicdesign {
  position: sticky;
  top: var(--stack-top);
}

#photography {
  z-index: 15;
  min-height: auto;
  padding-bottom: 180px;
  background: #fff;
}

#webdesign {
  z-index: 20;
  padding-bottom: 180px;
  background: #fff;
}

#graphicdesign {
  z-index: 25;
  min-height: 100vh;
}

/* sticky化に伴い、ギャラリーの引き上げ余白はリセット */
.gallery-section { margin-top: 0; }

/* Graphic上部の波（白い波でPinkをキャップ＝繋ぎ目） */
.wave--graphic-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 2;
  pointer-events: none;
  background: #f0e8f5;
}
.wave--graphic-top svg {
  display: block;
  width: 100%;
  height: 80px;
}

.wave--graphic-top__mobile {
  display: none;
}

/* Graphic → Contact の波（main直下=全幅なのでブリードさせない） */
.wave--graphic-contact {
  width: 100%;
  line-height: 0;
  margin-top: -1px;
  position: relative;
  z-index: 30;
  background: #fff;
}
.wave--graphic-contact svg {
  display: block;
  width: 100%;
  height: 220px;
}


/* =============================================
   Responsive
   ============================================= */
@media (max-width: 920px) {
  .siteHeader__nav { display: none; }
  .siteHeader__menu { display: block; }

  /* 全文が見えるまでスクロールしてから固定し、Photographyを上に重ねる */
  .about {
    position: relative;
    height: auto;
    z-index: 5;
    padding-bottom: 60px;
    /* 背景はPCと同じ base の rgba(255,255,255,.4) を使用 */
  }
  .stack-ready .about {
    position: sticky;
    top: var(--stack-top);
  }
  .about__grid {
    grid-template-columns: 1fr;
    padding-top: 130px;
  }

  /* Graphicはsticky（ピン留め）だと下にピンク背景の大きな余白（穴）が残るので、
     モバイル幅では通常スクロールにして高さを内容サイズに */
  #graphicdesign {
    position: relative;
    min-height: auto;
    top: auto;
  }
  .stack-ready #graphicdesign {
    position: relative;
    top: auto;
  }
  /* Contact上部の余白も詰める */
  .contact { padding-top: 50px; }
  .contact__inner { margin-top: 24px; }

  .about__avatar {
    order: -1;            /* 顔写真を文章の上に */
    width: 130px;
    margin: 0 auto 22px;
  }

  .web-container {
    flex-direction: column;
    gap: 30px;
  }
  .web-item { max-width: 100%; }

  .carousel_item { width: calc(50vw - 10px); }

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

  .hero-news {
    top: 62vh;
    left: 28px;
    right: 28px;
    width: auto;
    max-width: none;
  }
  .hero-news__list { max-height: 28vh; }

  .pf-modal__panel { padding: 48px 24px 32px; }

  .pf-split {
    flex-direction: column;
    gap: 24px;
  }
  .pf-split__img {
    flex: none;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .cursor { display: none; }

  /* ヒーロー：タイトルを青空あたり（上部）へ */
  .hero__content { padding-top: 11vh; }

  /* View Works ボタンはSPでは非表示 */
  .hero__cta { display: none; }

  /* Blogカード：せり上がらず固定（プロフィールが上から覆って隠す） */
  .hero-news {
    position: fixed;
    top: 52vh;
    left: 20px;
    right: 20px;
  }
  .hero-news__list { max-height: 32vh; }

  #photography {
    padding-bottom: 120px;
  }

  /* SPではPhotographyとWeb Designだけを重ね、Graphicは通常スクロール */
  #graphicdesign {
    position: relative;
    min-height: auto;
    padding-bottom: 24px;
    top: auto;
  }
  #webdesign { padding-bottom: 120px; }

  /* Graphic上部は白を重ねず、透明部分を残したピンクの曲線にする */
  #graphicdesign {
    background: transparent;
  }
  #graphicdesign::before {
    content: "";
    position: absolute;
    inset: 99px 0 0;
    z-index: -1;
    background: #f0e8f5;
  }
  .wave--graphic-top__desktop { display: none; }
  .wave--graphic-top__mobile { display: block; }
  .wave--graphic-top {
    background: transparent;
  }
  .wave--graphic-top svg { height: 100px; }

  /* Graphic → Contact の曲線を残し、白背景で下層を隠す */
  .wave--graphic-contact {
    background:
      radial-gradient(900px 420px at 15% 20%, rgba(191,224,242,.60), transparent 62%),
      linear-gradient(to bottom, #eef8fc, #fff);
  }
  .wave--graphic-contact svg { height: 90px; }
  .contact {
    margin-top: 0;
    padding-top: 70px;
    background: #fff;
    z-index: 31;
  }

  /* Photography：4つ → 2つずつ */
  .gallery-item {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Web Design：2つ並び・タイトルは画像の下・説明とView detailは非表示 */
  .webdesign__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    max-width: none;
  }
  .web-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    max-width: none;
    align-items: stretch;
  }
  .web-container .web-item {
    order: -1;            /* 画像を上に */
    max-width: 100%;
  }
  .web-item__sub,
  .web-item__desc,
  .web-item__tags,
  .web-item__more {
    display: none;        /* 説明・View detailはSPでは隠す */
  }
  .web-text { text-align: center; }
  .web-item__title {
    font-size: 14px;
    margin: 0;
    font-weight: 600;
  }

  /* モーダルを中央に・幅いっぱい */
  .pf-modal { padding: 18px 12px; }
  .pf-modal__panel {
    width: 100%;
    max-width: 100%;
    margin: auto;
  }

  /* web / graphic モーダルのcloseボタンを下に */
  .pf-modal--split .pf-modal__panel {
    display: flex;
    flex-direction: column;
  }
  .pf-modal--split .pf-modal__body { order: 1; }
  .pf-modal--split .pf-modal__close {
    order: 2;
    position: sticky;
    top: auto;
    bottom: 0;
    float: none;
    align-self: center;
    margin: 18px 0 0;
  }
}

@media (max-width: 520px) {
  .web-grid { grid-template-columns: 1fr; }
  .pf-book__content .wp-block-gallery { grid-template-columns: 1fr; }

  .blog-list__item a {
    flex-wrap: wrap;
    gap: 6px 12px;
  }
  .blog-list__text {
    flex-basis: 100%;
  }
  .blog-article__title { font-size: 24px; }
}

@media (max-width: 520px) {
  .hero__title { font-size: 36px; }
  .hero { padding-top: 96px; }
}