/* ===== Variables ===== */
:root{
  --bg-yellow:#eef35a;
  --bg-beige:#f2e8d8;
  --ink:#1a1a1a;
  --bg-works:#eed7b2;
  --bg-sandbox:#dce0e7;
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg-beige);
  color:var(--ink);
  font-family: "Hiragino Maru Gothic ProN",
               "Yu Gothic Rounded",
               sans-serif;
  line-height:1.7;
  min-width:320px; 
}
img{ max-width:100%; height:auto; display:block; }

/* ===== Hero ===== */
.hero{ background:var(--bg-beige); }
.hero-wrap{
  background:#fff;                /* central white card */
  width:min(750px,100%);
  margin:0 auto;
}
.hero-img{ width:100%; height:auto; display:block; }

/* ===== Scroll band ===== */
.scroll{ background:var(--bg-beige); text-align:center; }
.scroll-wrap{
  background:var(--bg-yellow);    /* central yellow card */
  width:min(750px,100%);
  margin:0 auto;
  padding:24px 0;
}
.scroll-img{
  width:100px;
  height:auto;
  display:inline-block;
  animation:scrollBounce 1.6s ease-in-out infinite;
}
@keyframes scrollBounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(8px); }
}

/* ===== Intro (yellow zone) ===== */
/* PC: central 750px yellow inside beige; SP: full-width yellow */
.intro{ background:var(--bg-beige); }
.intro-wrap{
  position:relative;              /* abs-position reference for items */
  background:var(--bg-yellow);
  width:min(750px,100%);
  margin:0 auto;
  padding:48px 16px 560px;        /* increased bottom space so CTA doesn't overlap */
  overflow:visible;
}

/* Copies */
/* ===== Base ===== */
.intro-copies{ position:relative; z-index:3; padding-top:8px; }
.copy{
  height:30px;              /* SPのデフォルト高さ */
  width:auto; object-fit:contain;
  margin:0 auto; display:block;
  opacity:1; transform:none;
}

/* 余白（高さは触らない） */
.copy-1{ margin-top:100px; margin-bottom:50px; }
.copy-2{ margin-bottom:20px; }
.copy-3{ margin-bottom:50px; }
.copy-4{ margin-bottom:20px; }
.copy-5{ margin-bottom:50px; }

/* 6だけ：SPの見た目 */
.copy-6{
  margin-bottom:0;
  /* SPはやや大きめに可変。固定にしたいなら height:50px; に置換 */
  height: clamp(60px, 10vw, 80px);
}

/* ===== PC以降（769px〜） ===== */
@media (min-width: 769px){
  /* 6 以外をまとめて 50px に */
  .copy:not(.copy-6){ height:50px; }

  /* 6だけ大きく可変（最小80px〜最大120px） */
  .copy-6{ height: clamp(80px, 8vw, 120px); }
}

/* Bear */
.intro-bear{
  position:relative; z-index:2;
  width:clamp(260px,60%,460px);
  margin:00px auto 12px;
  opacity:1; transform:none;
}

/* Items (decorations) */
.intro-vase,.intro-mouse,.intro-pouch,.intro_meadow{
  position:absolute; z-index:1; pointer-events:none;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,0.35));
  opacity:.92; transform:translateY(8px); transition:.6s ease;
}
/* Positions tuned not to overlap CTA */
.intro-pouch   { top:  0%; left:  2%; width:clamp(150px,35%,300px); transform:rotate( 7deg); }
.intro_meadow{ top:  0%; right: 2%; width:clamp(200px,50%,350px); transform:rotate(-5deg); }
.intro-vase  { top: 60%; left:  6%; width:clamp(180px,40%,280px); transform:rotate( 6deg); }
.intro-mouse   { top: 65%; right: 8%; width:clamp(120px,26%,190px); transform:rotate(-7deg); }

/* CTA: move visually down without affecting layout flow */
.intro-cta{
  display:block;
  width:min(640px,92%);
  margin:0 auto;                 /* keep container height */
  position: relative;            /* move visually */
  top: 400px;                     /* lower the button */
  z-index: 3;                    /* above bear/items */
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 4px 0 #0001;
  opacity:1;
  transform:none;
}
.intro-cta img{ width:100%; display:block; }

/* ===== Intro CTA hover animation ===== */
.intro-cta {
  transition:
    transform .28s var(--follow-ease),
    box-shadow .28s var(--follow-ease),
    opacity .28s var(--follow-ease);
  will-change: transform, box-shadow;
}

.intro-cta:hover,
.intro-cta:focus-visible {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  outline: none;
}


/* Portfolio wrap */
.portfolio-wrap {
  background: url('assets/img/portfolio_back_img.jpg') center top / contain no-repeat;
  width: min(750px,100%);
  margin: 0 auto;
  aspect-ratio: 750 / 850;
  border-radius: 0;
  position: relative;
}


/* タイトル */
.portfolio .section-title {
  position: absolute; 
  top: 27%;   
  left: 50%;
  transform: translateX(-50%);
  width: 45%;
}


/* テキスト */
.portfolio-textarea{
  width:min(750px,100%);
  margin:0 auto;
  padding:24px 16px;
  text-align:center;
  color:#2f2f2f;
  letter-spacing:0.02em;
  background:#fff;  
  border-radius:0;
  font-weight:bold;

  /* モバイルは15px、画面が広くなるほど最大18pxまで自動拡大 */
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.85;
}
/* ===== Works / Sandbox ===== */
/* 外側はベージュ */
.works {
  background: var(--bg-beige);
}
.sandbox {
  background: var(--bg-beige);
}


/* 中央の帯 */
.works {
  background: var(--bg-works);
  width: min(750px, 100%);
  margin: 0 auto;
  padding: 24px 16px;
}

.sandbox {
  background: var(--bg-sandbox);
  width: min(750px, 100%);
  margin: 0 auto;
  padding: 24px 16px;
}

.section-wrap {
  width: min(750px, 100%);
  margin: 0 auto;
  padding: 24px 16px;
}


/* ===== Carousel Base ===== */
.carousel {
  position: relative;
  margin: 24px auto 40px;
  width: min(750px, 100%);
  overflow: hidden; /* はみ出しを隠す */
}

/* ビューポート: スライドのみをクリップ */
.carousel-viewport{ width:100%; overflow:hidden; }

.carousel-track {
  display: flex;
  transition: transform .35s ease;

  list-style:none;
  margin:0;
  padding:0;
  will-change: transform;
}

.carousel-item {
  flex: 0 0 100%; /* デフォルトは1スライド=全幅 */
  max-width: 100%;
}

.carousel-item img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
  max-width: 300px;
  box-shadow:
    0 10px 20px rgba(0,0,0,0.25),   /* 下方向に柔らかい影 */
    0 2px 4px rgba(0,0,0,0.15);     /* 輪郭の密度を上げる */
  border-radius: 2px; /* 額縁が角丸なら */
}

/* PC用（769px以上） */
@media (min-width: 769px) {
  .carousel-item img {
    max-width: 447px;
  }
}

/* ===== Buttons ===== */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  line-height: 0;
}

.carousel-btn img{
  width:45px; display:block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.25))
          drop-shadow(0 0 1px rgba(0,0,0,.25)); /* 輪郭を締める */
  transition: transform .15s ease, filter .15s ease;
}
.carousel-btn:hover img{ transform: translateX(1px);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.3)) drop-shadow(0 0 1px rgba(0,0,0,.35));
}

.carousel-btn.prev { left: -8px; }
.carousel-btn.next { right: -8px; }

/* SP時はタップしやすいサイズに */
@media (max-width: 768px) {
  .carousel-btn img { width: 28px; }
  .carousel-btn.prev { left: 4px; }
  .carousel-btn.next { right: 4px; }
}

/* ===== Tile（スライドの中身） ===== */
.tile {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 0 #0001;
}

.tile img {
  display: block;
  width: 100%;
  height: auto;
}


/* ===== SP: 1枚表示 ===== */
@media (max-width: 749px) {
  .carousel[data-name="works"] .carousel-item {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ===== セクション共通レイアウト ===== */
.section-wrap{
  width:min(750px,100%);
  margin:0 auto;
  padding:48px 16px;
}

.section-title{
  display:block;
  width:auto;
  max-width: min(690px,92%);
  height:auto;
  max-height:55px;         /* ← ここを固定値に */
  object-fit:contain;      /* 念のため */
  margin:0 auto 16px;
}
@media (min-width:769px){
  .section-title{ max-height:95px; }
}

.section-line{
  border:0;
  border-top:1px solid #2f2f2f;
  width:min(630px,88%);
  margin:8px auto 16px;
}
.section-text{
  width:min(750px,100%);
  margin:16px auto;
  padding:16px 12px;
  box-sizing: border-box; 
  text-align:center;
  color:#2f2f2f;
  letter-spacing:0.02em;
  border-radius:0;
  font-weight:bold;

  /* モバイルは15px、画面が広くなるほど最大18pxまで自動拡大 */
   font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.8;           /* ← 1.85→1.8 に少しだけ圧縮 */
}

/* 先頭・末尾のはみ出す余白をカット */
.section-text > :first-child { margin-top: 0; }
.section-text > :last-child  { margin-bottom: 0; }

/* 段落間の余白も控えめに（必要なら）*/
.section-text p { margin: .7em 0; }


body.about .section-wrap,
body.portfolio-page .section-wrap {
  background: #fff;
}

/* 最後の項目だけドットを消す＆インデントを元に戻す */
.outline-list li:last-child{
  padding-left: 0;
  text-indent: 0;
}
.outline-list li:last-child::before{
  content: none;
}

/* ===== blog ===== */

/* 外側はベージュ */
.blog {
  background: var(--bg-beige);
}

/* 中央の帯 */
.blog .section-wrap {
  background: var(--bg-yellow);
  width: min(750px, 100%);
  margin: 0 auto;
  padding: 48px 16px;
}

/* ===== Blog list (cards) ===== */
.blog-list{
  width: min(690px, 92%);
  margin: 0 auto 8px;
  display: grid;
  grid-template-columns: 1fr; /* 縦1列 */
  gap: 16px;
}

.blog-card{
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 0 #0001;
  padding: 16px 18px;
}

.blog-card a{
  color: inherit;
  text-decoration: none;
  display: block;
}

.blog-card .title{
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 6px;
}

.blog-card .meta{
  font-size: 12px;
  opacity: .8;
  margin: 0 0 10px;
}

.blog-card .excerpt{
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  margin: 0;
}

/* 余白を詰めたいなら小さめに */
@media (max-width: 480px){
  .blog-card { padding: 14px 16px; }
  .blog-card .title { font-size: 17px; }
}


/* ===== Responsive ===== */
@media (max-width: 768px){
  /* smartphone: make intro full-width yellow (no beige sides) */
  .intro{ background:var(--bg-yellow); }
  .intro-wrap{ width:100%; padding:40px 16px 520px; }
  .scroll-wrap{ width:100%; }
  .hero-wrap, .site-footer .footer-wrap{ width:100%; }
}


/* ===== Footer (full) ===== */
.site-footer{ background: var(--bg-beige); }
.site-footer .footer-wrap{ background:#fff; 
  width: min(750px, 100%);
  margin: 0 auto;
  padding: 40px 16px 48px;
  text-align: center;
}

.footer-nav{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  justify-items: center;
  margin: 0 auto 16px;
  width: min(690px, 92%);
}

/* 画像サイズを統一 */
.footer-nav .section-title{
  width: min(690px,92%);
  height: 95px;             /* PC時 */
  margin: 0 auto 16px;
  object-fit: contain;
}

@media (max-width:768px){
  .footer-nav .section-title{ height:55px; } /* SP時 */
}

.footer-link img{
  display: block;
  width: min(520px, 92%);
  height: auto;
  margin: 0 auto;
}

/* News box */
.footer-news{ width: min(690px, 92%); margin: 0px auto 16px; }
.news-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.news-item{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  border: 1px solid #e6dbc9;
  background: #f2e8d8;
  border-radius: 6px;
  padding: 10px 12px;
}
.news-date{ font-size: 12px; opacity: .9; white-space: nowrap; }
.news-title{ font-size: 14px; line-height: 1.7; text-align: left; }
.news-title a{ color: inherit; text-decoration: none; }

/* Social */
.footer-social { margin: 16px 0 10px; font-size: 14px; letter-spacing: .02em; font-weight: bold; } 
.footer-social a { color: inherit; text-decoration: none; transition: opacity 0.2s ease, text-decoration 0.2s ease; } 
.footer-social a:hover { text-decoration: underline; opacity: 0.8; } .footer-social .sep { margin: 0 10px; opacity: .6; }
.footer-copy {font-size: 13px; text-align: center; color: #666; opacity: .8; margin-top: 12px;}




/* === Footer nav spacing === */
.site-footer .footer-nav{
  display: grid;      /* 縦並び */
  gap: 30px;          /* 各項目の間隔を40pxに */
  margin: 0 auto 16px;/* 下側にも40pxの余白（お知らせとの間隔を広げる） */
}

.site-footer .footer-link:last-child {
  margin-bottom: -10px; /* gap分を打ち消す */
}

.footer-divider{
  width: min(690px, 92%);   /* ← ここを 690px に */
  height: 1px;
  background: #ddd;
  margin: 24px auto;
  display: block;
}
/* ===== Utility ===== */

/* レスポンシブ改行 */
.br {
  display: none; // PCなど広い画面では非表示 → 改行されない
}

@media (max-width: 768px) { 
  .br {
    display: block; // SPサイズ以下では改行される
  }
}

/* 強制中央寄せ */
.text-center{ text-align:center !important; }

/* スペース（margin-bottom） */
.mb-20{ margin-bottom:20px !important; }

/* ===== Follow fixed buttons (Instagram / note) ===== */
.follow-fixed{
  position: fixed;
  top: max(30px, calc(env(safe-area-inset-top) + 10px));
  right: calc(30px + env(safe-area-inset-right));
  z-index: 9999;
  display: none;                 /* .is-visible で表示 */
  flex-direction: column;
  gap: 12px;
  align-items: center;
  pointer-events: auto;
}
.follow-fixed.is-visible{ display: flex; }

.follow-fixed .follow-btn{
  display: block;
  width: 60px;
  height: 60px;
  line-height: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 0 #0001;
}
.follow-fixed .follow-btn img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* SP: 750px 中央帯の「右から30px内側」に揃える */
@media (max-width: 768px){
  .follow-fixed{
    right: max(calc(30px + env(safe-area-inset-right)), calc((100vw - 750px) / 2 + 30px));
  }
  .follow-fixed .follow-btn{ width: 52px; height: 52px; }
}

/* PC: 画面の右端（から30px）に配置 */
@media (min-width: 769px){
  .follow-fixed{ right: calc(30px + env(safe-area-inset-right)); }
}


/* ===== Follow fixed buttons: appearance animation & shadow ===== */
:root{
  --follow-ease: cubic-bezier(.2,.7,.2,1);
}

/* container fade/slide */
.follow-fixed{
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity .45s var(--follow-ease),
    transform .45s var(--follow-ease);
  will-change: transform, opacity;
}

/* visible state */
.follow-fixed.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* each button: pop-in with stagger, depth */
.follow-fixed .follow-btn{
  background:#fff;
  border:1px solid #00000014;
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
  border-radius: 14px;
  transition:
    transform .28s var(--follow-ease),
    box-shadow .28s var(--follow-ease),
    opacity .28s var(--follow-ease);
  transform: translateY(-6px) scale(.96);
  opacity: 0;
  will-change: transform, box-shadow, opacity;
}

.follow-fixed.is-visible .follow-btn{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* stagger */
.follow-fixed.is-visible .follow-btn:nth-child(1){ transition-delay: .06s; }
.follow-fixed.is-visible .follow-btn:nth-child(2){ transition-delay: .12s; }

/* hover / focus effects */
.follow-fixed .follow-btn:hover,
.follow-fixed .follow-btn:focus-visible{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  outline: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .follow-fixed,
  .follow-fixed .follow-btn{
    transition: none !important;
    transform: none !important;
  }
}

/* ===== About page ===== */
/* タイトルと背景イラストを重ねるヒーロー */
.about-hero{ background:var(--bg-beige); }
.about-hero-wrap{
  position: relative;
  background:#fff;
  width: min(750px, 100%);
  margin: 0 auto;
  padding: 56px 16px 24px;
  overflow: visible;
}

.about-hero-title{
  display:block;
  width: min(396px, 92%);
  margin: 55px auto 6px;
  position: relative;
  z-index: 2;
}

.about-hero-bg{
  position: absolute;
  top: 0px;
  right: -38px;
  width: 381px;
  height: auto;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 5px 4px rgba(0,0,0,0.25));
}

/* SP（～768px） */
@media (max-width: 768px){
  .about-hero-wrap{ width:100%; padding: 40px 16px 16px; }
  .about-hero-title{ width: min(600px, 92%); margin: 80px auto 6px; }
  .about-hero-bg{ right: -6px; top: 0px; width: 380px; }
}

/* ===== About page (scroll override) ===== */
body.about .scroll-wrap,
body.portfolio-page .scroll-wrap {
  background: #fff;
}

/* ===== about Intro (white zone) ===== */
/* PC: central 750px white inside beige; SP: full-width yellow */
.intro{ background:var(--bg-beige); }
.about-intro-wrap{
  position:relative;              /* abs-position reference for items */
  background: #fff;
  width:min(750px,100%);
  margin:0 auto;
  padding:24px 16px 120px;        /* increased bottom space so CTA doesn't overlap */
  overflow:visible;
}

/* about Items (decorations) */
.about-book,.about-penstand{
  position:absolute; z-index:1; pointer-events:none;
  filter: drop-shadow(0 5px 4px rgba(0,0,0,0.25));
  opacity:.92; transform:translateY(8px); transition:.6s ease;
}
/* Positions tuned not to overlap CTA */
.about-book   { top:  0%; left:  2%; width:clamp(150px,40%,300px); transform: none; }
.about-penstand   { top: 75%; right: 8%; width:clamp(120px,26%,190px); transform:rotate(-7deg); }

/* ===== About Copies（初期は非表示→.inで表示） ===== */
body.about .about-copies .copy{
  position: relative;   /* z-index を効かせるために必要 */
  z-index: 2;           /* イラストより大きい値 */
  height: 90px;
  width: auto;
  object-fit: contain;
  margin: 0 auto;
  display: block;
  }

/* 共通：初期は非表示→.inで表示（1.0s） */
.intro .copy,
body.about .about-intro .copy{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.0s ease, transform 1.0s ease;
  will-change: opacity, transform;
}
.intro.in .copy,
body.about .about-intro.in .copy{
  opacity: 1;
  transform: none;
}

/* スタッガー（必要な方だけ残す） */
.intro.in .copy-1,      body.about .about-intro.in .copy-1{ transition-delay:.10s; }
.intro.in .copy-2,      body.about .about-intro.in .copy-2{ transition-delay:.24s; }
.intro.in .copy-3,      body.about .about-intro.in .copy-3{ transition-delay:.38s; }
.intro.in .copy-4,      body.about .about-intro.in .copy-4{ transition-delay:.52s; }
.intro.in .copy-5,      body.about .about-intro.in .copy-5{ transition-delay:.66s; }
.intro.in .copy-6,      body.about .about-intro.in .copy-6{ transition-delay:.80s; }

/* 速度を .intro と同じ 1.0s にする（任意） */
body.about .about-copies .copy{
  transition: opacity 1.0s ease, transform 1.0s ease;
}

/* モーション削減：即表示（Home/About共通）← @media は1つだけ */
@media (prefers-reduced-motion: reduce){
  .intro .copy,
  body.about .about-copies .copy{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  /* スタッガー遅延も無効化 */
  .intro.in .copy-1, .intro.in .copy-2, .intro.in .copy-3, .intro.in .copy-4, .intro.in .copy-5, .intro.in .copy-6,
  body.about .about-intro.in .copy-1, body.about .about-intro.in .copy-2, body.about .about-intro.in .copy-3,
  body.about .about-intro.in .copy-4, body.about .about-intro.in .copy-5, body.about .about-intro.in .copy-6{
    transition-delay: 0s !important;
  }
}

/* 余白・サイズ調整 */
body.about .about-copies .copy-1 { margin-top:10px; margin-bottom:0; }
body.about .about-copies .copy-2 { margin-bottom:20px; height: clamp(140px, 15vw, 160px); }
body.about .about-copies .copy-3 { margin-bottom:20px; }
body.about .about-copies .copy-4 { margin-bottom:20px; height: clamp(100px, 15vw, 120px); }
body.about .about-copies .copy-5 { margin-bottom:20px; }
body.about .about-copies .copy-6 { margin-bottom:0; }

/* PC 以降で高さ変更（About限定） */
@media (min-width: 769px){
  body.about .about-copies .copy:not(.copy-2) { height: 150px; }
  body.about .about-copies .copy.copy-2      { height: clamp(180px, 18vw, 220px); }
}


/* セクション外側はベージュ（左右の帯） */
.about-image{
  background: var(--bg-beige);
  padding: 0;                 /* 余白があればゼロに */
}

/* 中央の白帯は 750px（SPは100%） */
.about-image .about-hero-wrap{
  width: min(750px, 100%);
  margin: 0 auto;
  background: #fff;           /* 白はここだけ */
  padding: 0;
  line-height: 0;             /* 画像下の隙間対策（インライン隙間） */
}

/* 画像は白帯のキワまでぴったり（はみ出さず歪まない） */
.about-room-bg{
  display: block;             /* インライン隙間を消す */
  width: 100%;                /* 白帯幅いっぱいに */
  height: auto;               /* 縦横比を維持 */
  max-width: none;            /* 他の img 共通指定に負けないよう保険 */
}

/* ===== About Outline (PC: beige sides, center yellow) ===== */
.about-outline{ background: var(--bg-beige); }
.outline-wrap{
  background: var(--bg-yellow);
  width: min(750px, 100%);
  margin: 0 auto;
  padding: 48px 16px 64px;
}
.outline-title{ font-size: clamp(28px, 6vw, 64px); font-weight: 800; text-align: center; margin: 0 0 10px; }
.outline-line{ border:0; border-top:3px solid #fff; width: min(690px,100%); margin:10px auto 22px; }
.outline-body{ width: min(690px,92%); margin:0 auto; }
.outline-p{ margin:0 0 18px; font-size:16px; line-height:1.95; letter-spacing:.02em; }
.outline-heading{ font-size:18px; margin:18px 0 8px; }
.outline-list{ list-style:none; margin:0 0 12px 1.2em; padding:0; }
.outline-list li{ padding-left:.6em; text-indent:-.6em; margin:0 0 8px; }
.outline-list li::before{ content:"●"; margin-right:.35em; }
.outline-note{
  background:#fff; padding:18px; border-radius:10px;
  box-shadow:0 4px 0 #0001; margin:22px auto 0; width:100%;
}

/* ===== Intro items: gentle angled wobble (on .intro.in) ===== */
@keyframes wobbleDevice {
  0%   { transform: rotate(4deg)  translateY(2px); }
  50%  { transform: rotate(7deg)  translateY(-2px); }
  100% { transform: rotate(4deg)  translateY(2px); }
}
@keyframes wobbleMouse {
  0%   { transform: rotate(-9deg) translateY(1px); }
  50%  { transform: rotate(-5deg) translateY(-3px); }
  100% { transform: rotate(-9deg) translateY(1px); }
}
@keyframes wobblePouch {
  0%   { transform: rotate(5deg)  translateY(2px); }
  50%  { transform: rotate(9deg)  translateY(-2px); }
  100% { transform: rotate(5deg)  translateY(2px); }
}
@keyframes wobbleCalendar {
  0%   { transform: rotate(-7deg) translateY(2px); }
  50%  { transform: rotate(-3deg) translateY(-2px); }
  100% { transform: rotate(-7deg) translateY(2px); }
}

/* みんな同じにならない差し替え版 */
.intro.in .intro-vase{
  animation: wobbleDevice 6.7s cubic-bezier(.45,.05,.2,1) infinite;
  animation-delay: -.6s;
  will-change: transform;
}
.intro.in .intro-mouse{
  animation: wobbleMouse 5.9s ease-in-out infinite;
  animation-delay: -1.2s;
  will-change: transform;
}
.intro.in .intro-pouch{
  animation: wobblePouch 7.3s cubic-bezier(.25,.1,.25,1) infinite;
  animation-delay: -.2s;
  will-change: transform;
}
.intro.in .intro_meadow{
  animation: wobbleCalendar 6.1s ease-in-out infinite;
  animation-delay: -1.0s;
  will-change: transform;
}

/* スタッガー（開始を少しずらして自然に） */
.intro.in .intro-vase   { animation-delay: .10s; }
.intro.in .intro-mouse    { animation-delay: .25s; }
.intro.in .intro-pouch    { animation-delay: .40s; }
.intro.in .intro_meadow{ animation-delay: .55s; }

/* 動きを減らす設定のユーザーには停止 */
@media (prefers-reduced-motion: reduce){
  .intro.in .intro-vase,
  .intro.in .intro-mouse,
  .intro.in .intro-pouch,
  .intro.in .intro_meadow { animation: none !important; transform: none !important; }
}

/* ==== About: ペン/本 ゆらゆら（.about-intro.in で発火） ==== */

/* 回転の支点（見た目に合わせて微調整） */
.about-penstand { transform-origin: 50% 85%; }  /* ちょい下寄り */
.about-book     { transform-origin: 50% 15%; }  /* ちょい上寄り */

/* キーフレーム（控えめな角度＋わずかな上下） */
@keyframes swayPen {
  0%   { transform: rotate(-3deg) translateY(1px); }
  50%  { transform: rotate(  2deg) translateY(-2px); }
  100% { transform: rotate(-3deg) translateY(1px); }
}
@keyframes swayBook {
  0%   { transform: rotate(2deg) translateY(1px); }
  50%  { transform: rotate(-2deg) translateY(-2px); }
  100% { transform: rotate(2deg) translateY(1px); }
}

/* 見えた時だけ常時ゆらゆら */
.about-intro.in .about-penstand { animation: swayPen 6.4s ease-in-out infinite;  will-change: transform; }
.about-intro.in .about-book     { animation: swayBook 7.0s ease-in-out infinite; will-change: transform; }

/* 少しだけ開始をずらして自然に */
.about-intro.in .about-penstand { animation-delay: .15s; }
.about-intro.in .about-book     { animation-delay: .35s; }

/* ユーザーが動きを減らす設定なら停止 */
@media (prefers-reduced-motion: reduce){
  .about-intro.in .about-penstand,
  .about-intro.in .about-book { animation: none !important; transform: none !important; }
}

/* 内側の段落の余白をリセット */
.outline-note p {
  margin:0;
}

@media (min-width:769px){
  .outline-title{ font-size:64px; }
  .outline-heading{ font-size:20px; }
}

/* === Typography === */
:root{
  /* Adobeの“指定用フォント名”に合わせて！ */
  --font-maru: "fot-tsukuardgothic-std",
               "Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
}

/* 本文をまるっとTsukuARdに */
body{
  font-family: var(--font-maru);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* 太字は700をちゃんと使う（疑似ボールド回避） */
b,strong{ font-weight: 700; }
body{ font-synthesis-weight: none; }

/* ===== portfolio page ===== */

/* ===== Works: ヘッダー ===== */
.article-header {
  width: auto;
  margin: 0 auto 24px;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: #2f2f2f;
  text-align: left;
}

/* ===== Works: リード文 ===== */
/* 幅や配置だけ共通化 */
.article-title,
.article-lead,
.article-body {
  width: min(820px, 94%);
  margin-left: auto;
  margin-right: auto;
}

/* タイトル固有のスタイル */
.article-title {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.5;
  color: #2f2f2f;
  margin-top: 40px; /* 必要に応じて調整 */
}

/* リード文固有のスタイル */
.article-lead {
  text-align: left;
  margin-top: 30px;
  font-size: 15px;
  line-height: 1.8;
  color: #2f2f2f;
}

/* ===== Works: ギャラリー ===== */
.work-gallery img {
  width: min(820px, 95%);
  height: auto;
  display: block;
  margin: 0 auto;
}

.work-gallery figcaption {
  text-align: center;   /* Works は中央揃え */
  font-size: 14px;
  margin-top: 8px;
  color: #2f2f2f;
}

@media (max-width: 768px) {
  .work-gallery img {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-1 * (100vw - 100%) / 2); /* コンテナに対して左右センター揃え */
    border-radius: 0;
  }
}

/* ===== noteリンクに背景ラインを表示 ===== */
.note-link-text {
  position: relative;
  display: inline-block;
  font-weight: bold;     /* ← 太字にする */
  color: #2f2f2f;         /* ← 強制的にスミに固定 */
  font-size: 16px;        /* ← 必要に応じて調整 */
  line-height: 1.5;
  margin-top: 30px;   /* ← この行を追加 */
  z-index: 0;intro-copies
}

.note-link-text::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.2em;
  background-color: #eef35a;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s ease;
}

.note-link-wrap.in .note-link-text::before {
  transform: scaleX(1);
}


/* --- optional: full-width divider across the white footer card --- */
.footer-divider--full{
  width: min(750px, 100%);
  height: 1px;
  background: #ddd;
  margin: 24px auto;
  display: block;
}




/* ===== Image Modal (full spec, centered) ===== */
.image-modal{
  display: none;                 /* JSで 'flex' へ切り替え */
  position: fixed;
  z-index: 10000;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,.85);
  overflow: auto;
  padding: 60px 20px 20px;       /* 上に×ボタン分の余白 */
  align-items: center;           /* 中央寄せ（縦） */
  justify-content: center;       /* 中央寄せ（横） */
  animation: fadeIn .25s ease;
}
.image-modal .modal-content{
  display: block;
  max-width: min(1100px, 92vw);
  max-height: 82vh;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  cursor: zoom-out;
  margin: 0;
}
.modal-close{
  position: fixed;
  top: 14px;
  right: 20px;
  width: auto;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  z-index: 10001;
}
.modal-trigger{ cursor: zoom-in; }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
/* 背景スクロール抑止 */
html.modal-open{ overflow: hidden; }

.external-link-icon {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  max-width: none !important;
  vertical-align: text-bottom;
}