/*
Theme Name: Asuka Asaumi
Theme URI: https://example.com/
Author: Asuka Asaumi
Description: ASUKA ASAUMI ポートフォリオ用オリジナルテーマ。制作実績は投稿タイプ「制作実績」から表示されます。
Version: 1.0.0
Text Domain: asuka-theme
*/

/* ========== Tokens ========== */
:root {
  --navy: #2F3D70;
  --yellow: #E8CB59;
  --blue: #94C7D4;
  --bg: #FAF9F7;
  --gray: #eaeaea;
  --text: #222;
  --serif-en: "Ovo", serif;
  --serif-jp: "Zen Kaku Gothic New", "Zen Kaku Gothic", sans-serif;
  --sans: "Zen Kaku Gothic New", "Zen Kaku Gothic", sans-serif;
  --inner: 1200px;
  --gutter: clamp(20px, 8.3vw, 120px);
  --header-h: 60px;
}

/* ========== Base ========== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-weight: 300; line-height: 1.9; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; font-weight: 400; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.nb { display: inline-block; }

.inner { width: 100%; max-width: calc(var(--inner) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.text { font-size: 16px; letter-spacing: .06em; }
.text--en { font-family: var(--serif-en); font-size: 14px; line-height: 1.7; letter-spacing: .02em; margin-top: 1.6em; }
.sub { font-family: var(--serif-en); font-size: 20px; }
.icon-link { display: inline-flex; color: var(--yellow); }

.heading { display: flex; align-items: baseline; gap: 40px; flex-wrap: wrap; }
.heading__en { font-family: var(--serif-en); font-weight: 400; font-size: clamp(40px, 6vw, 60px); line-height: 1.1; letter-spacing: .02em; }
.heading__tags { font-family: var(--serif-en); color: var(--blue); font-size: 20px; }

/* ========== Header ========== */
.header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h); background: #fff; }
.header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.header__logo { font-family: var(--serif-en); font-size: 18px; letter-spacing: .04em; }
.nav__list { display: flex; gap: 40px; font-family: var(--serif-en); font-size: 17px; }
.nav__list a:hover { color: var(--yellow); text-underline-offset: 6px; }

/* floating contact (hexagon) */
.float-contact { position: absolute; top: 1050px; right: 0; z-index: 40; width: 130px; height: 130px; padding-left: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--navy); color: #fff; font-size: 20px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transform: translateX(15%); }
.float-contact { position: fixed; top: auto; bottom: 30px; width: 100px; height: 100px; font-size: 14px; padding-left: 0; transform: none; right: 12px; gap: 6px; }
.float-contact svg { width: 24px; height: auto; }
.float-contact { transition: opacity .5s ease, visibility .5s ease; }
.float-contact.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.float-contact:hover{ background-color: #94C7D4;}
@media (min-width: 1024px) {
  .float-contact { width: 130px; height: 130px; font-size: 20px; right: 50px; bottom: 30px; }
  .float-contact svg { width: 32px; }
  .float-contact:hover svg path { stroke: #94C7D4; }
}
@media (max-width: 767px) {
    .float-contact { width: 80px; height: 80px; font-size: 14px; right: 20px; bottom: 20px; }
  .float-contact.is-scroll-only { opacity: 0; visibility: hidden; pointer-events: none; }
  .float-contact.is-scroll-only.is-visible-scroll:not(.is-hidden) { opacity: 1; visibility: visible; pointer-events: auto; }
}

/* ========== Hero ========== */
.hero {
  --vh: 1vh;
  --iw: min(calc(100vw - 2 * var(--gutter)), 1320px);
  --u: min(calc(var(--iw) / 1200), calc((100 * var(--vh) - var(--header-h)) / 1036));
  position: relative;
  padding: var(--header-h) var(--gutter) 0;
  overflow: hidden;
  background: var(--bg);
}
@supports (height: 100svh) { .hero { --vh: 1svh; } }

.hero__inner { position: relative; width: 100%; max-width: 1320px; margin-inline: auto; height: calc(1036 * var(--u)); }

/* 背景のグラデーションの楕円（PC：横長）。EAF8FB → FFF2D0 各50% */
.hero__inner::before {
  content: ""; position: absolute; z-index: 0;
  left: 0; right: 0; top: calc(125 * var(--u)); height: calc(660 * var(--u));
  border-radius: 999px;
background: linear-gradient(to top right, #94C7D4 0%, #FAF9F7 50%, #F1D45F 100%);

}


/* 右上のリスト */
.hero__list { position: absolute; z-index: 2; right: calc(16 * var(--u)); top: calc(105 * var(--u)); text-align: right; font-family: var(--sans); font-weight: 300; font-size: max(20px, calc(32 * var(--u))); line-height: 1.6; letter-spacing: .02em; }
.hero__list { color: rgba(34, 34, 34, .6); }
/* 左下のテキスト */
.hero__text { position: absolute; z-index: 2; left: 0; bottom: calc(124 * var(--u)); max-width: 60%; }
.hero__label { font-family: var(--serif-jp); font-size: max(12px, calc(20 * var(--u))); }
.hero__title { font-family: var(--serif-jp); font-size: max(24px, calc(48 * var(--u))); line-height: 1.5; margin: .45em 0 .75em; letter-spacing: .06em; }
.hero__en { font-family: var(--serif-en); font-size: max(11px, calc(16 * var(--u))); line-height: 1.5; }

/* 右下のイラスト（art.png） */
.hero__visual { position: absolute; z-index: 1; right: calc(14 * var(--u)); bottom: calc(130 * var(--u)); width: calc(440 * var(--u)); max-width: none; height: auto; }

/* SCROLL（縦書き＋縦線） */
.hero__scroll { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); bottom: -50px; display: flex; flex-direction: column; align-items: center; gap: calc(14 * var(--u)); font-family: var(--serif-en); font-size: max(11px, calc(16 * var(--u))); letter-spacing: .2em; line-height: 1; }
.hero__scroll span { padding-left: .2em; }
.hero__scroll::after {
  content: ""; width: 1px; height: calc(156 * var(--u));
  background-color: rgba(34, 34, 34, .2);          /* 動かない薄い線 */
  background-image: linear-gradient(var(--text), var(--text)); /* 流れる濃い線 */
  background-repeat: no-repeat;
  background-size: 100% 0%;
  background-position: 0 0;
  animation: hero-scroll-line 2.2s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes hero-scroll-line {
  0%      { background-size: 100% 0%;   background-position: 0 0; }    /* 上から伸び始める */
  50%     { background-size: 100% 100%; background-position: 0 0; }    /* 下まで届く */
  50.01%  { background-size: 100% 100%; background-position: 0 100%; } /* 見た目は変わらず、基準を下に切り替える */
  100%    { background-size: 100% 0%;   background-position: 0 100%; } /* 上側から消えて、下で終わる */
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll::after { animation: none; background-size: 100% 100%; }
}

/* スマホ：楕円を縦長にして、上から リスト → テキスト → イラスト の順に配置 */
@media (max-width: 767px) {
 .hero { padding: calc(var(--header-h) + 40px) 12px 40px; }
.hero__inner { height: auto; display: flex; flex-direction: column; gap: 28px; padding: 70px 32px 50px; }
.hero__inner::before { top: 0; bottom: 0; height: auto; border-radius: 100px;}
  .hero__list { display:none;}
  .hero__text { position: static; max-width: none; }
  .hero__label { font-size: 14px; }
  .hero__title { font-size: clamp(24px, 7vw, 30px); }
  .hero__en { font-size: 12px; }
  .hero__visual { position: static; align-self: flex-end; width: 64%; margin-right: -12px; }
.hero__scroll { left: 34px; bottom: 50px; gap: 16px; font-size: 14px; }
.hero__scroll::after { height: 80px; }
}

/* ========== About ========== */
.about { position: relative; padding: 110px var(--gutter) 130px; background-color: var(--bg); background-image: linear-gradient(var(--yellow) 1px, transparent 1px), linear-gradient(90deg, var(--yellow) 1px, transparent 1px); background-size: 20px 20px; background-position: -1px -1px; }
.about__card { position: relative; max-width: 1320px; margin-inline: auto; background: #fff; border-radius: 32px; padding: 120px clamp(24px, 17vw, 240px) 100px; }
.about__title { position: absolute; top: -32px; left: 50%; transform: translateX(-50%); font-family: var(--serif-en); font-size: clamp(48px, 6vw, 68px); line-height: 1; letter-spacing: .04em; color: var(--yellow); }
.about__lead { font-family: var(--sans); font-weight: 300; font-size: clamp(22px, 2.6vw, 38px); line-height: 1.7; letter-spacing: .08em; margin: 14px 0 40px; }
.sub--profile { margin-top: 80px; }
.profile__head { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 24px; }
.profile__name { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: .06em; }

/* ========== Works ========== */
.works { padding-top: 90px; }
.works__area { margin: 24px 0 0; padding: 0; transition: opacity .3s; }
.works__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; }
.works-card { margin: 0; padding: 0; overflow: hidden; }
.works-card a { position: relative; display: block; }
.works-card__img { aspect-ratio: 4 / 3; overflow: hidden; background: #fff; }
.works-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.works-card a:hover .works-card__img img { transform: scale(1.04); }
.works-card__body { line-height: 1.5; position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; background: rgba(148,199,212,.78); color: #fff; opacity: 0; transition: opacity .35s ease; }
.works-card a:hover .works-card__body, .works-card a:focus-visible .works-card__body { opacity: 1; }
.works-card__title { font-size: 18px; line-height: 1.5; }
.works-card__tags { margin-top: 6px; font-family: var(--serif-en); font-size: 14px; }
@media (hover: none) {
  .works-card__body { opacity: 1; align-items: flex-start; justify-content: flex-end; padding: 16px 20px; text-align: left; background: linear-gradient(transparent 45%, rgb(145 145 145 / 85%)); }
}
.works__empty { padding: 120px 20px; text-align: center; color: #777; }

/* WORKS カテゴリ絞り込み */
.heading ul.works-filter { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; margin: 0; padding: 0; list-style: none; }
.works-filter li { display: block; margin: 0; white-space: nowrap; }
.works-filter li + li::before { content: "/"; margin: 0 .4em; }
.works-filter a { transition: color .2s; }
.works-filter a:hover, .works-filter a.is-active { color: var(--navy); }
.works-filter a.is-active { text-decoration: underline; text-underline-offset: 6px; }

/* 下層ページ（作品詳細・一覧） */
.page-main { padding: calc(var(--header-h) + 60px) 0 100px; }
.page-main .works__grid { gap: 24px; }
.single-works .works-card__tags { color: var(--navy); }
.single-works__title { font-size: clamp(26px, 3vw, 40px); line-height: 1.5; margin-bottom: 8px; }
.single-works__thumb { margin: 32px 0; }
.single-works__content { max-width: 760px; }
.single-works__content p { margin-bottom: 1.5em; font-size: 16px; line-height: 2; }
.single-works__back { display: inline-block; margin-top: 40px; font-family: var(--serif-en); color: var(--navy); text-decoration: underline; text-underline-offset: 6px; }

/* ========== What I do ========== */
.service { padding: 160px 0 200px; }
.service__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
.service__intro .heading__en { margin-bottom: 50px; }
.service__list { display: grid; gap: 56px; padding-top: 6px; }
.service__list h3 { font-family: var(--sans); font-weight: 300; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.3; margin-bottom: 14px; }
.service__list .text { font-size: 16px; color: #444; }

/* ========== Contact ========== */
.contact { background: var(--yellow); border-top-right-radius: 160px; padding: 100px var(--gutter) 90px; }
.contact__inner { max-width: 680px; margin-inline: auto; }
.contact__title { font-family: var(--serif-en); font-size: clamp(44px, 6vw, 64px); text-align: center; line-height: 1.1; margin-bottom: 50px; }
.form { margin-top: 50px; }
.form__row { display: grid; grid-template-columns: 180px minmax(0, 1fr); margin-bottom: 8px; }
.form__row > * { min-width: 0; }
.form__row label { background: var(--navy); color: #fff; font-weight: 500; font-size: 18px; text-align: center; line-height: 1; padding: 8px 0; }
.form input[type="text"], .form input[type="email"], .form textarea { width: 100%; border: 0; border-radius: 0; background: #fff; font: inherit; font-size: 14px; padding: 6px 12px; }
.form textarea { display: block; resize: vertical; min-height: 200px; }
.form input[type="text"], .form input[type="email"] { display: block; }
.form__note { font-size: 12px; margin-top: 18px; line-height: 1.7; }
.form__note a { text-decoration: underline; }
.form__agree { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 26px; font-size: 16px; cursor: pointer; }
.form__agree label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.form__agree .wpcf7-list-item { margin: 0; }
.form__agree input { width: 18px; height: 18px; accent-color: var(--navy); }

/* Contact Form 7 */
.form .wpcf7-form-control-wrap { display: block; }
.form .wpcf7-spinner { position: absolute; top: 50%; left: calc(100% + 8px); margin: 0; transform: translateY(-50%); }
.form .wpcf7-not-valid-tip { margin-top: 4px; font-size: 12px; color: #b3261e; }
.form .wpcf7 form .wpcf7-response-output { margin: 24px 0 0; padding: 12px 16px; border: 2px solid var(--navy); background: #94C7D4 font-size: 14px; text-align: center; }
.form__notice { padding: 16px; background: #fff; font-size: 14px; text-align: center; }
.form__submit-wrap { position: relative; width: 200px; margin: 24px auto 0; }
.form__submit { display: block; width: 100%; margin: 0; padding: 6px 0; border: 0; background: var(--navy); color: #fff; font-family: var(--sans); font-weight: 500; font-size: 14px; cursor: pointer; transition: opacity .2s; }
.form__submit:hover { background-color:#94C7D4; }

/* ========== Footer ========== */
.footer { background: #fff; padding: 18px 0 14px; }
.footer__inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.footer__name { display: flex; align-items: center; gap: 12px; font-family: var(--serif-en); font-size: 18px; line-height: 1.5; }
.footer__name .icon-link { color: var(--text); }
.footer__sub { font-size: 11px; }
.footer__copy { font-family: var(--serif-en); font-size: 12px; }

/* ========== Hamburger (~1023px) ========== */
.hamburger { display: none; }
@media (max-width: 1023px) {
  .header__logo { position: relative; z-index: 2; }
  .hamburger { position: relative; z-index: 2; display: block; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; cursor: pointer; }
  .hamburger span { position: absolute; left: 11px; width: 22px; height: 2px; background: var(--text); transition: transform .3s, opacity .3s; }
  .hamburger span:nth-child(1) { top: 15px; }
  .hamburger span:nth-child(2) { top: 21px; }
  .hamburger span:nth-child(3) { top: 27px; }
  .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .nav { position: fixed; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; background: #94C7D4; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
  .nav.is-open { opacity: 1; visibility: visible; }
  .nav__list { flex-direction: column; align-items: center; gap: 36px; font-size: 30px; text-align: center; }
}
body.is-nav-open { overflow: hidden; }
.header:has(.nav.is-open) { background: transparent; }

/* ========== Scroll fade-up ========== */
.js .fade-up { opacity: 0; transform: translateY(40px); transition: opacity 1s ease, transform 1s ease; }
.js .fade-up.is-visible { opacity: 1; transform: none; }
.service__list li:nth-child(2) { transition-delay: .1s; }
.service__list li:nth-child(3) { transition-delay: .2s; }
.service__list li:nth-child(4) { transition-delay: .3s; }

/* ========== Tablet ========== */
@media (max-width: 1024px) {
  .service__inner { gap: 48px; }
  .about__card { padding-inline: clamp(24px, 8vw, 100px); }
  .works__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ========== Mobile ========== */
@media (max-width: 767px) {
  :root { --header-h: 56px; --gutter: 20px; }
  .header__logo { font-size: 15px; }


  .about { padding: 80px 12px 80px; background-size: 16px 16px; }
  .about__card { border-radius: 20px; padding: 80px 20px 56px; }
  .about__title { top: -24px; }
  .about__lead { margin-bottom: 28px; }
  .text { font-size: 13px; }
  .text--en { font-size: 12px; }
  .sub--profile { margin-top: 56px; }

  .works { padding-top: 60px; }
  .heading { gap: 6px 20px; }
  .works__grid { grid-template-columns: minmax(0, 1fr); }

  .service { padding: 80px 0 100px; }
  .service__inner { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .service__intro .heading__en { margin-bottom: 28px; }
  .service__list { gap: 36px; }

  .contact { border-top-right-radius: 80px; padding: 72px var(--gutter) 64px; }
  .contact__title { margin-bottom: 32px; }
  .form { margin-top: 40px; }
  .form__row { grid-template-columns: minmax(0, 1fr); margin-bottom: 14px; }
  .form__row label { text-align: left; padding: 8px 12px; }
  .form input[type="text"], .form input[type="email"], .form textarea { padding: 10px 12px; }
  .form textarea { min-height: 140px; }
  .form__agree { justify-content: flex-start; }
  .form__submit-wrap { width: 100%; }
  .form__submit { padding: 12px 0; }

  .footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .js .fade-up { opacity: 1; transform: none; }
}

/* ========== 固定ページ（プライバシーポリシー等） ========== */
.page__title { margin-bottom: 48px; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.5; letter-spacing: .06em; }
.page__content { font-size: 16px; line-height: 2; letter-spacing: .04em; }
.page__content > * + * { margin-top: 1.5em; }
.page__content h2 { margin-top: 2.6em; padding-bottom: .4em; border-bottom: 2px solid var(--yellow); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.5; }
.page__content h3 { margin-top: 2em; font-size: clamp(17px, 1.8vw, 20px); line-height: 1.6; }
.page__content ul, .page__content ol { padding-left: 1.4em; }
.page__content ul { list-style: disc; }
.page__content ol { list-style: decimal; }
.page__content li + li { margin-top: .4em; }
.page__content a { text-decoration: underline; text-underline-offset: 4px; color: var(--navy); }
@media (max-width: 767px) {
  .page__title { margin-bottom: 32px; }
  .page__content { font-size: 14px; }
}