/* TATA EXACT OLD SECTION MATCH - version 20261106 */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600&display=swap');
body.home { --tata-bg:#f7f3eb;--tata-paper:#fffefa;--tata-ink:#263b35;--tata-muted:#697c73;--tata-green:#368a76;--tata-line:#dce6dd;background:#f7f3eb;color:#263b35;font-family:'Noto Sans JP',sans-serif;font-size:16px;line-height:1.6; }
body.home .wp-site-blocks main.wp-block-group {max-width:none!important;width:100%!important;padding:0!important;margin:0!important;}
body.home .wp-site-blocks main > .wp-block-group {max-width:none!important;}
body.home #home,body.home #about,body.home #works {width:min(1120px,calc(100% - 64px))!important;max-width:1120px!important;margin-left:auto!important;margin-right:auto!important;}
body.home #skills,body.home #creative,body.home #contact {display:block!important;box-sizing:border-box!important;max-width:none!important;width:100%!important;margin:0!important;padding:96px 0!important;}


body.home #skills .container,body.home #creative .container,body.home #contact .container {width:min(1120px,calc(100% - 64px))!important;max-width:1120px!important;margin:auto!important;}
body.home #skills .section-head,body.home #creative .section-head {margin-bottom:40px!important;}
body.home #skills .eyebrow,body.home #creative .eyebrow,body.home #contact .eyebrow {display:block;color:#368a76;font:600 12px/1.6 'M PLUS Rounded 1c',sans-serif;letter-spacing:.18em;margin-bottom:12px;}
body.home #skills h2,body.home #creative h2 {font:500 clamp(36px,3.3vw,40px)/1.35 'M PLUS Rounded 1c',sans-serif!important;letter-spacing:-.035em;margin:0 0 15px!important;color:#263b35;}
body.home #skills .section-head p,body.home #creative .section-head p {max-width:680px;color:#697c73;font:400 16px/1.6 'Noto Sans JP',sans-serif;margin:0 0 1em;}
body.home #skills .skills-grid {display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px!important;}
body.home #skills .skill-card {box-sizing:border-box;min-width:0;min-height:0!important;height:auto!important;background:#fffefa!important;border:1px solid #dce6dd!important;border-radius:20px!important;padding:28px!important;}
body.home #skills .skill-icon {font-size:26px;line-height:1.6;color:#263b35;}
body.home #skills .skill-card h3 {font:500 18px/1.35 'M PLUS Rounded 1c',sans-serif!important;letter-spacing:-.035em;margin:1em 0!important;color:#263b35;}
body.home #skills .skill-card p {font:400 13px/1.9 'Noto Sans JP',sans-serif!important;color:#697c73;margin:0 0 1em;}
body.home #creative .creative-grid {display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px!important;}
body.home #creative .creative-tile {box-sizing:border-box;position:relative;display:flex!important;flex-direction:column;justify-content:flex-end!important;align-items:stretch!important;overflow:hidden;min-width:0;min-height:250px!important;padding:24px!important;border-radius:20px!important;text-decoration:none!important;color:#fff!important;background:linear-gradient(145deg,#b7cfc0,#496f68)!important;}
body.home #creative .creative-tile:nth-child(2) {background:linear-gradient(140deg,#dfd4b7,#ae9b7d)!important;}
body.home #creative .creative-tile:nth-child(3) {background:linear-gradient(140deg,#a9c5c5,#4e777e)!important;}
body.home #creative .creative-tile::before {content:''!important;position:absolute;top:-40px;right:-35px;width:200px;height:200px;border:1px solid #ffffff77;border-radius:50%;background:transparent!important;}
body.home #creative .creative-tile::after {content:none!important;}
body.home #creative .creative-tile h3 {position:relative;z-index:1;color:#fff!important;font:500 21px/1.35 'M PLUS Rounded 1c',sans-serif!important;letter-spacing:-.035em;margin:0!important;padding:0!important;background:none!important;}
body.home #creative .container > p {color:#697c73;font-size:12px;margin-top:16px;}
body.home #contact .contact-panel {box-sizing:border-box;border-radius:30px!important;background:#dfece3!important;padding:65px 8%!important;text-align:center!important;}
body.home #contact .contact-panel h2 {font:500 clamp(32px,4vw,46px)/1.35 'M PLUS Rounded 1c',sans-serif!important;letter-spacing:-.035em;margin:12px 0 22px!important;color:#263b35;}
body.home #contact .contact-panel p {max-width:560px;margin:0 auto 30px!important;color:#697c73;font-size:16px;line-height:1.6;}
body.home #contact .contact-panel p:last-child {font-size:11px!important;margin-top:18px!important;}
body.home #contact .btn.primary {display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid #368a76;border-radius:100px;background:#368a76;color:white;text-decoration:none;padding:13px 25px;font:600 13px/1.6 'Noto Sans JP',sans-serif;}
/* Preserve WP dynamic WORKS, but use the original section's typography and width. */
body.home #works {padding-top:96px!important;padding-bottom:96px!important;}
body.home #works .tata-works-eyebrow {color:#368a76;font:600 12px/1.6 'M PLUS Rounded 1c',sans-serif;letter-spacing:.18em;margin:0 0 12px;}
body.home #works .tata-works-title {font:500 clamp(36px,3.3vw,40px)/1.35 'M PLUS Rounded 1c',sans-serif!important;margin:0 0 15px;}
body.home #works .wp-block-post-template {grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
body.home #works .tata-work-filters {display:flex;flex-wrap:nowrap;overflow-x:auto;gap:10px;margin-bottom:22px;padding-bottom:14px;}
body.home #works .tata-work-filter {flex-shrink:0;white-space:nowrap;}
@media(max-width:800px){
 body.home #home,body.home #about,body.home #works,body.home #skills .container,body.home #creative .container,body.home #contact .container {width:min(calc(100% - 40px),600px)!important;}
 body.home #skills,body.home #creative,body.home #contact {padding:62px 0!important;}
 body.home #skills h2,body.home #creative h2 {font-size:clamp(28px,7vw,32px)!important;}
 body.home #skills .skills-grid,body.home #creative .creative-grid {grid-template-columns:1fr!important;}
 body.home #creative .creative-grid {gap:14px!important;}
 body.home #creative .creative-tile {min-height:190px!important;}
 body.home #contact .contact-panel {padding:48px 25px!important;}
 body.home #works .wp-block-post-template {grid-template-columns:1fr;}
}

/* ========================================
   HOME / ABOUT 微調整
======================================== */

/* HOME：「カタチ」を旧サイトの緑色に */
body.home #home h1 .tata-accent,
body.home #home h1 .accent,
body.home #home h1 .has-primary-color {
    color: #368a76 !important;
}

/* ABOUT：見出しとラベルの左位置を統一 */
body.home #about h2,
body.home #about .tata-eyebrow {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* ABOUT：見出しのサイズ・行間 */
body.home #about h2 {
    font-size: clamp(36px, 3.3vw, 40px) !important;
    line-height: 1.35 !important;
    letter-spacing: -0.035em;
}

/* HOME：本文の色 */
body.home #home p {
    color: #697c73;
}

/* HOME：見出しの色 */
body.home #home h1 {
    color: #263b35;
}


/* ========================================
   ABOUT — 旧サイトに合わせた微調整
======================================== */

/* セクション全体 */
body.home #about.tata-about-original {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* ABOUTラベル */
body.home #about .tata-about-eyebrow {
    margin: 0 0 16px !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .18em !important;
    color: #368a76 !important;
}

/* 見出し */
body.home #about h2.tata-about-title {
    margin: 0 0 36px !important;
    padding: 0 !important;
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
    font-size: 36px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    letter-spacing: -.035em !important;
    color: #263b35 !important;
}

/* 画像と説明文の配置 */
body.home #about .tata-about-columns {
    display: flex;
    align-items: flex-start;
    gap: 68px !important;
    margin-top: 0 !important;
}

/* WordPress側の列幅指定を調整 */
body.home #about .tata-about-columns > .wp-block-column:first-child {
    flex: 0 0 40% !important;
}

body.home #about .tata-about-columns > .wp-block-column:last-child {
    flex: 1 1 0 !important;
}

/* 説明文の上余白 */
body.home #about .tata-about-description {
    margin-top: 0 !important;
}

/* スマホ表示 */
@media (max-width: 800px) {
    body.home #about.tata-about-original {
        padding-top: 62px !important;
        padding-bottom: 62px !important;
    }

    body.home #about h2.tata-about-title {
        font-size: 30px !important;
        margin-bottom: 28px !important;
    }

    body.home #about .tata-about-columns {
        flex-direction: column;
        gap: 28px !important;
    }

    body.home #about .tata-about-columns > .wp-block-column {
        flex: 0 0 auto !important;
        width: 100% !important;
    }
}

/* HOME：「カタチ」を旧サイトと同じ緑色に */
body.home #home h1 .tata-hero-accent {
    color: #368a76 !important;
}

/* ========================================
   Original Header Design
======================================== */

.wp-site-blocks > header {
    background: rgba(247, 243, 235, .85) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(220,230,221,.67);
}

/* ナビゲーション */
.wp-site-blocks > header .wp-block-navigation-item__content {
    position: relative;
    color: #263b35;
    transition: color .2s;
}

/* 現在のセクション */
.wp-site-blocks > header .wp-block-navigation-item__content.tata-nav-active {
    color: #368a76 !important;
}

/* 緑色の下線 */
.wp-site-blocks > header .wp-block-navigation-item__content.tata-nav-active::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 1px;
    background: #368a76;
}

/* Header active navigation */
body.home .wp-block-navigation a.tata-nav-active {
    color: #368a76 !important;
    position: relative !important;
}

body.home .wp-block-navigation a.tata-nav-active::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 1px !important;
    height: 1px !important;
    background: #368a76 !important;
    display: block !important;
}

/* =========================================
   WORKS 横幅拡張
========================================= */

@media (min-width: 801px) {

    /* WORKSセクション全体 */
    body.home #works {
        width: min(1200px, calc(100% - 64px)) !important;
        max-width: 1200px !important;
    }

    /* WordPressのconstrainedレイアウトを解除 */
    body.home #works > * {
        max-width: none !important;
    }

    /* 作品一覧を3列表示 */
    body.home #works .wp-block-post-template {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 24px !important;
        width: 100% !important;
        max-width: none !important;
    }

    /* カードの横幅 */
    body.home #works .wp-block-post-template > li {
        width: 100% !important;
        min-width: 0;
    }

    /* カテゴリーフィルター */
    body.home #works .tata-work-filters {
        width: 100% !important;
        max-width: none !important;
        flex-wrap: wrap !important;
        overflow: visible !important;
    }
}

/* =====================================
   WORKS PAGINATION
===================================== */

body.home #works .tata-works-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 48px;
}

body.home #works .tata-works-pagination a,
body.home #works .tata-works-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 8px 12px;
    box-sizing: border-box;
    border: 1px solid #dce6dd;
    border-radius: 10px;
    background: #fffefa;
    color: #263b35;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: .2s ease;
}

body.home #works .tata-works-pagination a:hover {
    background: #e0efe6;
    color: #368a76;
}

body.home #works .tata-works-pagination .current {
    background: #368a76;
    border-color: #368a76;
    color: #fff;
}

/* WORKS JavaScript Pagination */
body.home #works .tata-works-pagination[hidden],
body.home #works .tata-work-empty[hidden] {
    display: none !important;
}

body.home #works .tata-works-pagination .tata-works-page-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #dce6dd;
    border-radius: 10px;
    background: #fffefa;
    color: #263b35;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

body.home #works .tata-works-pagination .tata-works-page-button:hover {
    background: #e0efe6;
    color: #368a76;
}

body.home #works .tata-works-pagination .tata-works-page-button.current {
    background: #368a76;
    border-color: #368a76;
    color: #fff;
}

/* =====================================
   CREATIVE PAGES - MOBILE TEXT SPACING
===================================== */

@media (max-width: 700px) {

    /* Photography / Design / Ideas のページ全体 */
    body.page .wp-block-group.container {
        box-sizing: border-box;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* ページタイトル */
    body.page .wp-block-post-title {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* 説明文 */
    body.page .wp-block-post-content {
        max-width: 100%;
        box-sizing: border-box;
    }
}


/* PROFILE SECTION START */

.tata-profile {
  width: 100%;
  background: #f7f3eb;
  padding: 100px 24px;
  box-sizing: border-box;
  scroll-margin-top: 90px;
}

.tata-profile-inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  align-items: center;
  gap: 72px;
}

.tata-profile-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
}

.tata-profile-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
}

.tata-profile-content {
  min-width: 0;
}

.tata-profile-eyebrow {
  margin: 0 0 20px;
  color: #368a76;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.tata-profile-name {
  margin: 0 0 28px;
  color: #263b35;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.4;
}

.tata-profile-name span {
  display: block;
  margin-top: 6px;
  color: #697c73;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.tata-profile-description {
  color: #263b35;
  font-size: 15px;
  line-height: 2;
}

.tata-profile-description p {
  margin: 0 0 18px;
}

.tata-profile-description p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .tata-profile {
    padding: 72px 20px;
  }

  .tata-profile-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .tata-profile-photo {
    max-width: 360px;
    margin: 0 auto;
  }

  .tata-profile-eyebrow {
    margin-bottom: 14px;
  }

  .tata-profile-name {
    margin-bottom: 24px;
    font-size: 30px;
  }

  .tata-profile-description {
    font-size: 14px;
    line-height: 1.9;
  }

  .tata-profile-description p {
    margin-bottom: 16px;
  }
}

/* PROFILE SECTION END */

/* PROFILE LAYOUT ADJUSTMENT START */

.tata-profile-heading {
  max-width: 1100px;
  margin: 0 auto 48px;
}

.tata-profile-heading .tata-profile-eyebrow {
  margin-bottom: 12px;
}

.tata-profile-section-title {
  margin: 0;
  color: #263b35;
  font-size: clamp(32px, 3.5vw, 42px);
  font-weight: 700;
  line-height: 1.3;
}

.tata-profile-inner {
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 48px;
}

.tata-profile-description {
  max-width: none;
}

@media (max-width: 767px) {
  .tata-profile-heading {
    margin-bottom: 32px;
  }

  .tata-profile-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .tata-profile-photo {
    max-width: 280px;
  }

  .tata-profile-section-title {
    font-size: 32px;
  }
}

/* PROFILE LAYOUT ADJUSTMENT END */



















/* PROFILE LAYOUT RESTORE START */

body.home #profile {
  width: 100% !important;
  max-width: none !important;
  background: #fffefa !important;
}

@media (min-width: 768px) {
  body.home #profile .tata-profile-heading,
  body.home #profile .tata-profile-inner {
    width: min(1120px, calc(100% - 64px)) !important;
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.home #profile .tata-profile-inner {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 36px !important;
  }
}

/* PROFILE LAYOUT RESTORE END */

/* PROFILE FINAL TYPOGRAPHY START */

/* 「つくる」の見出しとフォントを統一 */
body.home #profile .tata-profile-section-title,
body.home #profile .tata-profile-name {
  font-family: 'M PLUS Rounded 1c', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.035em;
}

/* 本文は読みやすさを優先 */
body.home #profile .tata-profile-description {
  font-family: 'Noto Sans JP', sans-serif !important;
}

/* PC：写真と文章の距離を縮める */
@media (min-width: 768px) {
  body.home #profile .tata-profile-inner {
    grid-template-columns: 260px minmax(0, 1fr) !important;
    column-gap: 24px !important;
  }
}

/* PROFILE FINAL TYPOGRAPHY END */

/* PROFILE SPACING ADJUSTMENT START */

@media (min-width: 768px) {

  /* 写真を320pxに拡大 */
  body.home #profile .tata-profile-inner {
    display: grid !important;
    grid-template-columns: 320px minmax(0, 1fr) !important;
    column-gap: 32px !important;
    align-items: stretch !important;
  }

  body.home #profile .tata-profile-photo {
    width: 320px !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1;
    margin: 0 !important;
  }

  /* 名前と自己紹介文を写真の高さに合わせる */
  body.home #profile .tata-profile-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
  }

}

/* PROFILE SPACING ADJUSTMENT END */


/* SECTION BACKGROUND MANAGEMENT START */

/* 交互背景色 */
body.home #home,
body.home #about,
body.home #skills,
body.home #contact {
  background-color: #f7f3eb !important;
}

body.home #profile,
body.home #works,
body.home #creative {
  background-color: #fffefa !important;
}

/* ABOUT・WORKSだけ背景を全画面に広げる */
body.home #about,
body.home #works {
  position: relative !important;
  isolation: isolate;
}

body.home #about::before,
body.home #works::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}

body.home #about::before {
  background: #f7f3eb;
}

body.home #works::before {
  background: #fffefa;
}

/* SKILLS・CREATIVE・CONTACTの不要な背景用疑似要素を無効化 */
body.home #skills::before,
body.home #creative::before,
body.home #contact::before {
  content: none !important;
  display: none !important;
}

/* SECTION BACKGROUND MANAGEMENT END */