@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* ---- Core fix: Cocoon's .wrap is a FIXED 1256px width with no responsive
   override anywhere in the parent theme. On any viewport narrower than
   1256px (very common: laptops, tablets, split-screen windows) this causes
   sitewide horizontal overflow and clips the right-hand header nav items
   (Fees / Contact). Making it fluid up to the same max width is a strict
   correctness fix and is safe for every page, not just Home. ---------- */
.wrap{
  width: 100% !important;
  max-width: 1256px;
  box-sizing: border-box;
}

/* ---- Design tokens ------------------------------------------------ */
:root{
  --my-navy: #16324F;
  --my-navy-dark: #0F2438;
  --my-teal: #3C7A6D;
  --my-teal-dark: #2C5A50;
  --my-blue: #3B6FE0;
  --my-blue-dark: #2C56B8;
  --my-blue-pale: #EEF3FC;
  --my-bg: #FFFFFF;
  --my-bg-alt: #F5F7F8;
  --my-text: #22292F;
  --my-text-secondary: #5B6570;
  --my-border: #E2E5E8;
  --my-max-width: 1120px;
}

/* ---- Base typography / links --------------------------------------- */
body{
  color: var(--my-text);
}
a{
  color: var(--my-blue);
}
a:hover{
  color: var(--my-blue-dark);
}
.my-arrow-link{
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-weight: 600;
  font-size: .95em;
  white-space: nowrap;
}
h1, h2, h3, h4, .wp-block-heading{
  color: var(--my-navy);
  font-weight: 700;
  letter-spacing: .01em;
}

/* Slightly more compact running text/heading rhythm than the Cocoon default */
.entry-content{
  line-height: 1.7;
}
.entry-content p{
  margin: 0 0 .95em;
}
.entry-content h2{
  margin: 1.6em 0 .6em;
}
.entry-content h3{
  margin: 1.3em 0 .5em;
}
.entry-content ul, .entry-content ol{
  margin: 0 0 .95em;
}

/* ---- Unified full-bleed section system ---------------------------------
   Cocoon's `.main` column has fixed, known horizontal padding (29px on
   desktop, 16px at <=834px per the parent theme's own breakpoint). Each
   full-bleed section band cancels that fixed padding with matching
   negative margins so its background can span the full content column
   edge-to-edge, then `.my-section-inner` re-establishes one shared,
   centered max-width reading column inside every band. This replaces
   per-section ad-hoc widths/margins with a single reusable pattern. ---- */
.my-hero,
.my-section,
.my-section-alt,
.my-cta{
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-width: none;
  box-sizing: border-box;
}
/* Safety net for the 100vw full-bleed technique above: on some browsers
   100vw includes the scrollbar's own width, which can introduce a few
   px of horizontal overflow. Containing it on the Home body only (where
   the full-bleed sections exist) avoids a stray horizontal scrollbar
   without touching overflow behavior anywhere else on the site. */
body.my-section-page{
  overflow-x: hidden;
}
/* Cocoon's .main trailing padding + .article's own bottom margin leave a
   large gap between the last section (Get in Touch) and the footer.
   Trimming it is scoped to Home only so other pages keep normal spacing
   below their own content. */
body.my-section-page .main{
  padding-bottom: 0;
  padding-top: 0;
}
body.my-section-page .article{
  margin-bottom: 0;
}
body.my-section-page #footer{
  margin-top: 0;
}
/* Header-to-Hero gap was Cocoon's own stacked top spacing: .content's
   24px top margin + .main's 36px top padding (zeroed above) + .entry-
   content's 18px top margin. Removing all three lets the Hero band sit
   flush against the header, as requested, without touching other pages. */
body.my-section-page .content{
  margin-top: 0;
}
body.my-section-page .entry-content{
  margin-top: 0;
  margin-bottom: 0;
}
.my-section-inner{
  max-width: var(--my-max-width);
  margin: 0 auto;
  padding: 0 1.5em;
  position: relative;
  z-index: 1;
}
.my-section{
  background: var(--my-bg);
  padding: 2.6em 0;
}
.my-section-alt{
  background: var(--my-bg-alt);
  padding: 2.6em 0;
}
.my-section h2, .my-section-alt h2{
  font-size: 1.6em;
  margin-bottom: .5em;
}
.my-eyebrow{
  display: block;
  color: var(--my-blue);
  font-size: .78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: .5em;
}

/* ---- Hero ------------------------------------------------------------ */
.my-hero{
  position: relative;
  background: var(--my-navy-dark);
  color: #fff;
  padding: 3.3em 0;
  overflow: hidden;
}
.my-hero-eyebrow{
  display: block;
  color: #9DB8E0;
  font-size: .78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  margin: 0 0 .7em;
}
.my-hero-title{
  color: #fff !important;
  font-size: 2em;
  line-height: 1.3;
  max-width: 600px;
  margin: 0 0 .6em;
  text-align: left;
  position: relative;
  z-index: 1;
}
.my-hero-sub{
  color: #C7D2E3;
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 500px;
  margin: 0 0 2em;
  text-align: left;
  position: relative;
  z-index: 1;
}
/* Heroサブコピー: PCでは指定位置で必ず改行し、スマートフォンでは
   自然な折り返しに任せる(強制改行を入れない)。 */
.my-pc-break{
  display: none;
}
@media screen and (min-width: 835px){
  .my-pc-break{
    display: inline;
  }
}
.my-hero .wp-block-buttons{
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  margin-top: 0 !important;
}

/* ---- Hero: 左(文章)/右(画像)の2カラム構成 ---------------------------
   PC(835px以上)では左に文章・CTA、右にHero画像を配置する。
   画像側はカードのように独立させず、紺背景から続く1枚のグラデーション
   オーバーレイで馴染ませる。835px未満では画像を全面の背景として使い、
   文章の上に重ねる(可読性のため濃いオーバーレイをかける)。
   align-itemsはflex-start: 右側画像の上端と左側テキストの上端を
   揃えるため(center揃えだと文章の方が長い分、画像が下にずれて見える)。 */
.my-hero-inner{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 64px;
}
.my-hero-content{
  flex: 1 1 600px;
  min-width: 0;
}
.my-hero-visual{
  flex: 1 1 520px;
  min-width: 0;
}

/* ---- Hero: 5枚の画像を静かにクロスフェードするための土台 -------------- */
.my-hero-media{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0;
}
.my-hero-media::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to right,
    rgba(15,36,56,.92) 0%,
    rgba(15,36,56,.22) 24%,
    rgba(15,36,56,.3) 100%
  );
}
.my-hero-slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.3s ease;
}
.my-hero-slide.is-active{
  opacity: 1;
}
@media (prefers-reduced-motion: reduce){
  .my-hero-slide{
    transition: none;
  }
}

/* ---- Hero: 835px未満は画像を全面背景にし、文章を上に重ねる ------------ */
@media screen and (max-width: 834px){
  .my-hero-inner{
    position: relative;
    display: block;
  }
  .my-hero-visual{
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .my-hero-media{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
  .my-hero-media::after{
    background: rgba(15,36,56,.74);
  }
  .my-hero-content{
    position: relative;
    z-index: 1;
  }
}

/* ---- Buttons ----------------------------------------------------------- */
.my-btn-primary .wp-block-button__link{
  background: var(--my-blue);
  border-radius: 4px;
  padding: .8em 1.8em;
}
.my-btn-primary .wp-block-button__link:hover{
  background: var(--my-blue-dark);
}
.my-btn-outline .wp-block-button__link{
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  border-radius: 4px;
  padding: .8em 1.8em;
}
.my-btn-outline .wp-block-button__link:hover{
  background: rgba(255,255,255,.1);
  border-color: #fff;
}

/* ---- Technical fields grid (cards, using real photos/illustrations) ---- */
.my-tech-grid, .my-why-grid{
  margin-top: 1.3em;
}
.my-tech-grid{
  gap: 1em !important;
}
.my-tech-grid .wp-block-column{
  background: #fff;
  border: 1px solid var(--my-border);
  border-radius: 6px;
  padding: 1.3em 1.4em;
  flex: 1 1 240px;
  min-width: 240px;
}
.my-tech-title, .my-why-title{
  font-size: 1.05em;
  margin-bottom: .25em;
}
.my-tech-text, .my-why-text{
  color: var(--my-text-secondary);
  font-size: .92em;
  line-height: 1.55;
}

/* ---- Why Choose Us cards (numbered, light blue-gray) -------------------- */
.my-why-grid{
  gap: 1em !important;
}
.my-why-grid .wp-block-column{
  background: var(--my-bg-alt);
  border-radius: 6px;
  padding: 1.4em 1.4em 1.5em;
  flex: 1 1 250px;
  min-width: 250px;
}
.my-why-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--my-blue);
  color: #fff;
  font-size: .82em;
  font-weight: 700;
  border-radius: 5px;
  margin-bottom: .7em;
}

/* ---- Patents/Designs/Trademarks: small practice-area cards -------------- */
.my-pdt-cards{
  display: flex;
  flex-direction: column;
  gap: .8em;
}
.my-pdt-card{
  display: flex;
  align-items: center;
  gap: .9em;
  background: var(--my-bg-alt);
  border-radius: 6px;
  padding: 1em 1.1em;
}
.my-pdt-card-icon{
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: var(--my-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
}
.my-pdt-card-title{
  font-weight: 700;
  color: var(--my-navy);
  font-size: .98em;
}
.my-pdt-card-text{
  color: var(--my-text-secondary);
  font-size: .86em;
}

/* ---- CTA band (navy, matches hero) --------------------------------------- */
.my-cta{
  background: var(--my-navy-dark) !important;
  text-align: center;
  padding: 3em 0;
}
.my-cta-title{
  color: #fff !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 0 20px !important;
}
.my-cta-text{
  color: #C7D2E3 !important;
  max-width: 560px;
  margin: 0 auto 20px !important;
}
.my-cta .wp-block-buttons{
  justify-content: center;
}

/* ---- Home: Our Team band (text + link only, no photo) -------------------- */
.my-team-band{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2em;
  flex-wrap: wrap;
}
.my-team-band-text{
  flex: 1 1 480px;
  max-width: 680px;
}
.my-team-band-link{
  flex: 0 0 auto;
  padding-top: .3em;
}

/* ---- Home: Latest Articles cards ------------------------------------------
   1件しかない場合でも左端に孤立して見えないよう、列をコンテナ幅いっぱいに
   伸ばさず内容幅(最大373px、1184pxグリッドの373×3+32×2に対応)に留め、
   行全体を中央寄せする。記事が2〜3件に増えても同じルールのまま自然に
   中央へ並ぶ(件数専用の特別CSSは作らない)。 */
.my-articles-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 373px));
  justify-content: center;
  gap: 32px;
  margin: 1.4em 0 0;
}
.my-article-card{
  background: #fff;
  border: 1px solid var(--my-border);
  border-radius: 6px;
  padding: 1.3em 1.4em;
  display: flex;
  flex-direction: column;
}
.my-article-date{
  color: var(--my-text-secondary);
  font-size: .8em;
  margin-bottom: .5em;
}
.my-article-title{
  font-size: 1.05em;
  color: var(--my-navy);
  margin: 0 0 .5em;
  line-height: 1.4;
}
.my-article-title a{
  color: inherit;
}
.my-article-excerpt{
  color: var(--my-text-secondary);
  font-size: .9em;
  line-height: 1.55;
  margin: 0 0 .8em;
  flex-grow: 1;
}
.my-articles-empty{
  color: var(--my-text-secondary);
  font-size: .95em;
}
.my-articles-viewall{
  margin-top: .2em;
}

/* ---- Header: compact, single row, Contact as a button --------------------- */
@media screen and (min-width: 835px){
  #header-container-in{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5em;
    flex-wrap: nowrap;
  }
  #header{
    padding: 0;
  }
  .header-in{
    padding: .7em 0;
  }
  #navi{
    border: none;
  }
}
.site-name-text-link,
.site-name-text-link:visited{
  color: var(--my-navy) !important;
  text-decoration: none;
}
.site-name-text{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.3em;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
}
.logo.logo-header{
  display: flex;
  align-items: center;
}
.menu-header{
  display: flex;
  align-items: center;
  gap: .1em;
}
/* Cocoon親テーマの .navi-in > ul{flex-wrap:wrap} も詳細度がこちらより
   高いため、#navi を付けて確実に1行(nowrap)を強制する。 --------------- */
#navi .menu-header{
  flex-wrap: nowrap;
  justify-content: flex-start;
}
/* Cocoon親テーマの .navi-in > ul li{width:176px} はセレクタの詳細度が高く
   このままでは上書きできない(8項目×176px=1408pxとなり1行に収まらない)
   ため、#navi を付けて詳細度を確実に上げ、幅を内容(パディング+文字)に
   応じた可変幅にする。高さ60pxはCocoon標準のヘッダー高さを維持するため
   そのまま引き継ぐ。 -------------------------------------------------- */
#navi .menu-header li{
  width: auto;
  height: 60px;
}
.menu-header li > a{
  color: var(--my-text-secondary);
  font-size: 15px;
  font-weight: 500;
  padding: .5em .55em;
  white-space: nowrap;
}
.menu-header li > a:hover{
  color: var(--my-navy);
}
.menu-header li.current-menu-item > a,
.menu-header li.current_page_parent > a{
  color: var(--my-navy);
  font-weight: 700;
}
.menu-header a[href$="/contact/"]{
  background: var(--my-blue);
  color: #fff !important;
  border-radius: 4px;
  padding: .5em .85em !important;
  margin-left: .3em;
}
.menu-header a[href$="/contact/"]:hover{
  background: var(--my-blue-dark);
}
/* 英語サイト切り替えリンク: 通常のナビ文字として表示し、細い縦線で
   お問い合わせボタンと区別する(青いCTAボタン化はしない)。 */
.menu-header li.menu-item-lang-en > a{
  border-left: 1px solid var(--my-border);
  margin-left: .2em;
  padding-left: .55em;
}
/* 1024〜1099px: Cocoon本体のモバイル切替(1023px以下)より少し広い範囲で、
   8項目のナビ+「お問い合わせ」ボタンがnowrapのまま画面幅に収まりきらず、
   ボタンが右側で見切れることがあるため、この帯域だけ間隔・余白を詰める。 */
@media screen and (min-width: 1024px) and (max-width: 1099px){
  .menu-header{
    gap: 0;
  }
  .menu-header li > a{
    padding: .5em .35em;
    font-size: 14px;
  }
  .menu-header li.menu-item-lang-en > a{
    padding-left: .35em;
  }
  .menu-header a[href$="/contact/"]{
    padding: .5em .6em !important;
    margin-left: .1em;
  }
}

/* ---- Team profiles (chronological, editorial roster style) ------------------
   Two-tier layout: a top row pairs the photo with name / position / practice
   areas / technical fields, then credentials / background / selected
   activities run the full width of the profile section (not squeezed into
   the column beside the photo). Profiles with no photo skip the top row
   entirely and read as a plain full-width text profile. ------------------- */
.my-profile-top{
  display: flex;
  gap: 2.2em;
  align-items: flex-start;
}
.my-profile-photo{
  flex: 0 0 240px;
  width: 240px;
  height: 300px;
  overflow: hidden;
  background: var(--my-bg-alt);
  border-radius: 6px;
}
.my-profile-photo img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.my-profile-intro{
  flex: 1 1 auto;
  min-width: 0;
}
.my-profile-details{
  margin-top: 1.6em;
}
.my-profile-name{
  font-size: 1.4em;
  color: var(--my-navy);
  margin: 0 0 .15em;
  line-height: 1.3;
}
.my-profile-title{
  color: var(--my-teal-dark);
  font-weight: 600;
  margin: 0 0 .9em;
}
.my-profile-label{
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--my-navy);
  font-weight: 700;
  margin: 1.3em 0 .5em;
  padding-bottom: .25em;
  border-bottom: 1px solid var(--my-border);
}
.my-profile-intro > .my-profile-label:first-of-type,
.my-profile-details > .my-profile-label:first-of-type,
.my-profile > .my-profile-label:first-of-type{
  margin-top: 0;
}
.my-practice-areas{
  font-size: .95em;
  margin: 0;
}
.my-field-list{
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.my-field-list li{
  font-size: .92em;
  padding: 0 .9em;
  border-left: 1px solid var(--my-border);
  line-height: 1.3;
}
.my-field-list li:first-child{
  padding-left: 0;
  border-left: none;
}
.my-credential-list,
.my-activity-list{
  margin: 0;
  padding-left: 1.15em;
  max-width: 72ch;
}
.my-credential-list li,
.my-activity-list li{
  font-size: .92em;
  margin-bottom: .3em;
  line-height: 1.5;
}
.my-activity-list li{
  color: var(--my-text-secondary);
}
.my-activity-group{
  margin-bottom: .7em;
}
.my-activity-group:last-child{
  margin-bottom: 0;
}
.my-activity-subhead{
  font-size: .82em;
  font-weight: 600;
  color: var(--my-text);
  margin: 0 0 .25em;
}
.my-timeline{
  display: flex;
  flex-direction: column;
}
.my-timeline-row{
  display: grid;
  grid-template-columns: 5.2em 1fr;
  gap: .15em 1.1em;
  padding: .25em 0;
}
.my-timeline-year{
  font-weight: 700;
  color: var(--my-teal-dark);
  font-variant-numeric: tabular-nums;
  font-size: .88em;
}
.my-timeline-event{
  font-size: .92em;
  line-height: 1.45;
}

/* ---- Access / Contact info blocks -------------------------------------------- */
.my-info-block{
  background: var(--my-bg-alt);
  border: 1px solid var(--my-border);
  border-radius: 4px;
  padding: 1.3em 1.6em;
  margin: 1.1em 0;
}
/* ---- Contact page: two-column panel (office location | contact methods) ---- */
.my-contact-panel{
  display: flex;
  gap: 3em;
  align-items: flex-start;
}
.my-contact-panel-left,
.my-contact-panel-right{
  flex: 1 1 0;
  min-width: 0;
}
.my-contact-panel p{
  margin: 0 0 .5em;
}
.my-contact-panel p:last-child{
  margin-bottom: 0;
}
.my-contact-name{
  font-weight: 700;
  color: var(--my-navy);
  font-size: 1.1em;
  margin: 0 0 .6em;
}
.my-email-label{
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .8em;
  color: var(--my-navy);
  margin: 1em 0 .5em;
}
.my-email-placeholder{
  border: 1px dashed var(--my-border);
  background: #fff;
  padding: 1em 1.2em;
  max-width: 320px;
}
.my-email-placeholder-text{
  color: var(--my-text-secondary);
  font-size: .85em;
  margin: 0;
}
.my-email-image{
  margin-top: .25em;
}
.my-email-image img{
  display: block;
  width: 380px;
  max-width: 100%;
  height: auto;
}
.my-map{
  max-width: 340px;
  margin: 1.4em 0 0;
}
.my-map img{
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--my-border);
  border-radius: 4px;
}

/* ---- Section illustrations: text + image two-column layout --------------------- */
.my-two-col{
  display: flex;
  align-items: center;
  gap: 2.2em;
  margin: 0 0 .95em;
}
.my-two-col-text{
  flex: 1 1 55%;
  min-width: 0;
}
.my-two-col-text > *:last-child{
  margin-bottom: 0;
}
.my-two-col-image{
  flex: 0 0 38%;
  max-width: 38%;
  background: #fff;
  border: 1px solid var(--my-border);
  border-radius: 10px;
  padding: 2em;
}
.my-two-col-image img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.my-access-two-col .my-two-col-image{
  flex: 0 0 380px;
  max-width: 380px;
  padding: .6em;
}
.my-access-two-col{
  align-items: flex-start;
}

/* ---- About Us: slightly tighter section padding for the four content
   sections between Practice Areas and Access, per finishing feedback.
   Scoped to this extra class only (not the shared .my-section /
   .my-section-alt rule) so Home's spacing is untouched. ~15% less than
   the shared 2.6em. ------------------------------------------------- */
.my-section-tight{
  padding: 2.2em 0;
}

/* ---- About Us: page intro heading ---------------------------------------- */
.my-page-title{
  font-size: 2.2em;
  margin-bottom: .5em;
}

/* ---- Small supporting icons inside the technical-field / why-choose grids ------- */
.my-tech-icon,
.my-why-icon{
  display: block;
  width: 84px;
  height: 84px;
  object-fit: contain;
  margin: 0 0 .7em;
}

/* ---- Home: バイオ・化学案件への対応の小見出し・本文(カード枠なし)。 --- */
.my-strength-title{
  font-size: 1.05em;
  color: var(--my-navy);
  margin: 0 0 .3em;
}
.my-strength-text{
  color: var(--my-text-secondary);
  font-size: .92em;
  line-height: 1.6;
  margin: 0 0 .95em;
}
.my-strength-text:last-child{
  margin-bottom: 0;
}

/* ---- Home: 「バイオ・化学案件への対応」「出願前からの継続的な知財支援」
   共通の文章+画像レイアウト。デフォルトはHTML順どおり(文章→画像)で
   PCでも左文章/右画像。.my-media-row-reverse を付けたセクションだけ
   835px以上でorderを使い画像を左に表示する(HTML/モバイルの表示順は
   文章→画像のまま変えない)。画像はカード化せず、白背景がセクション
   背景と同化しないよう極めて薄い枠線のみを付ける。 ------------------ */
.my-media-row{
  display: flex;
  align-items: flex-start;
  gap: 56px;
}
.my-media-row-text{
  flex: 1 1 600px;
  min-width: 0;
}
.my-media-row-image{
  flex: 0 0 460px;
  max-width: 460px;
}
.my-media-row-image img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--my-border);
  border-radius: 2px;
}
@media screen and (min-width: 835px){
  .my-media-row-reverse .my-media-row-image{
    order: -1;
  }
}
@media screen and (max-width: 834px){
  .my-media-row{
    flex-direction: column;
    gap: 1.2em;
  }
  .my-media-row-image{
    flex: 0 0 auto;
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
  }
}

/* ---- Home: 出願前からの継続的な知財支援(PCでも1カラム)。
   小見出しと、末尾の顧問契約・発明発掘相談会の一文のスタイルのみ。 ---- */
.my-prefiling-subhead{
  font-size: 1.05em;
  color: var(--my-navy);
  margin: 0 0 .3em;
}
/* 顧問契約・発明発掘相談会の一文は、カードやCTA化はせず、
   細いネイビーの左線+やや太めの文字で控えめに強調する。 */
.my-prefiling-note{
  margin: 1.1em 0 0;
  padding: .15em 0 .15em 14px;
  border-left: 3px solid var(--my-navy);
  color: var(--my-text);
  font-size: 1.03em;
  font-weight: 600;
  line-height: 1.6;
}

/* ---- Schedule of Fees table ------------------------------------------------------- */
.my-fees-intro{
  color: var(--my-text-secondary);
  margin: 0 0 1.4em;
}
.my-fees-table-wrap{
  margin: 0 0 1.4em;
  overflow-x: auto;
}
.my-fees-table{
  width: 100%;
  border-collapse: collapse;
  font-size: .85em;
  border: 1px solid var(--my-border);
}
.my-fees-table th,
.my-fees-table td{
  text-align: left;
  padding: .48em .7em;
  border-bottom: 1px solid var(--my-border);
  vertical-align: top;
}
.my-fees-table thead th{
  background: var(--my-navy);
  color: #fff;
  font-size: .74em;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  border-bottom: none;
}
.my-fees-table tbody tr:nth-child(even){
  background: var(--my-bg-alt);
}
.my-fees-table td:first-child{
  font-weight: 600;
  color: var(--my-text);
  width: 34%;
}
.my-fees-table td:nth-child(2),
.my-fees-table td:nth-child(3){
  font-weight: 600;
  color: var(--my-navy);
}
.my-fees-table td{
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.my-fee-note{
  display: block;
  color: var(--my-text-secondary);
  font-size: .85em;
  font-weight: 400;
  margin-top: .25em;
  line-height: 1.4;
}
.my-fee-ref{
  display: inline-block;
  color: var(--my-teal-dark);
  background: rgba(60,122,109,.12);
  border-radius: 3px;
  padding: .02em .35em;
  font-weight: 700;
  font-size: .8em;
  white-space: nowrap;
  vertical-align: middle;
}
.my-fees-footnotes{
  list-style: none;
  margin: 0 0 1.2em;
  padding: .6em .9em;
  background: var(--my-bg-alt);
  border-radius: 4px;
  font-size: .8em;
  color: var(--my-text);
}
.my-fees-footnotes li{
  margin-bottom: .3em;
  line-height: 1.45;
}
.my-fees-footnotes li:last-child{
  margin-bottom: 0;
}
.my-fees-section-title{
  font-size: 1.05em;
  color: var(--my-navy);
  margin: 1.55em 0 .43em;
}
.my-fees-jpo-note{
  background: var(--my-bg-alt);
  border-radius: 4px;
  padding: .85em 1.3em;
  margin: 1.4em 0 0;
  font-size: .93em;
}
.my-fees-jpo-note p:last-child{
  margin-bottom: 0;
}

@media screen and (max-width: 700px){
  .my-fees-table-wrap{
    overflow-x: visible;
  }
  .my-fees-table thead{
    display: none;
  }
  .my-fees-table, .my-fees-table tbody, .my-fees-table tr, .my-fees-table td{
    display: block;
    width: 100%;
  }
  .my-fees-table tr{
    border: 1px solid var(--my-border);
    border-radius: 4px;
    padding: .55em .75em;
    margin-bottom: .5em;
  }
  .my-fees-table td{
    border: none;
    padding: .22em 0;
  }
  .my-fees-table td:first-child{
    width: auto;
  }
  .my-fees-table td::before{
    content: attr(data-label);
    display: block;
    font-size: .7em;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--my-text-secondary);
    font-weight: 700;
    margin-bottom: .2em;
  }
}

/* ---- Legal pages (Privacy Policy / Disclaimer) ---------------------------------- */
.my-legal-updated{
  color: var(--my-text-secondary);
  font-size: .88em;
  margin-bottom: 1.4em;
}

/* ---- Lists ---------------------------------------------------------------------- */
.my-list{
  padding-left: 1.2em;
  line-height: 1.55;
}
.my-list li{
  margin-bottom: .35em;
}

/* ---- Sitewide: SNS share bar (X/Twitter) and SNS follow bar (author
   website / feedly / RSS) are not used on this site, on any page,
   including Blog posts. ---------------------------------------------- */
.sns-share,
.sns-follow{
  display: none !important;
}

/* ---- Home / About Us only: hide remaining Cocoon article-page chrome
   (post date/update meta, author byline/edit link, header tagline) that
   doesn't belong on a static landing page. Scoped strictly to body.my-section-page
   so Blog posts / other pages keep this chrome untouched. ----------------- */
body.my-section-page .post-date,
body.my-section-page .post-update,
body.my-section-page .date-tags,
body.my-section-page .footer-meta,
body.my-section-page #breadcrumb,
body.my-section-page .tagline{
  display: none !important;
}

/* ---- Home only: strip Cocoon's default boxed-heading decoration (gray
   background / border / left accent bar on h2/h3) so headings read as
   simple dark-navy bold text. Also relax Cocoon's sitewide
   overflow-wrap:break-word so long English words in headings wrap at
   word boundaries instead of breaking mid-word. --------------------------- */
body.my-section-page .article h1,
body.my-section-page .article h2,
body.my-section-page .article h3,
body.my-section-page .article h4,
body.my-section-page .article h5,
body.my-section-page .article h6{
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* ---- Footer: compact, office info (left) + nav (right) close together ------ */
.footer-widgets{
  padding-top: 1.4em;
  padding-bottom: .4em;
}
.footer-widgets .widget{
  margin-bottom: 0;
}
.footer-widgets .widget-title{
  margin-bottom: .4em;
  font-size: 1.05em;
}
.footer-widgets .textwidget{
  font-size: .92em;
  line-height: 1.6;
  color: var(--my-text-secondary);
}
/* Office info is the only widget in use; let it size to its own content
   instead of being forced into an equal 1/3 column next to two empty
   columns, and drop the empty columns entirely. */
.footer-center:empty,
.footer-right:empty{
  display: none;
}
.footer-left{
  flex: 0 1 auto;
}
/* The site name/logo already appears once in the office-info widget
   above; Cocoon's default footer-bottom repeats it a second time next
   to the nav, which reads as a duplicate on every page. */
.footer-bottom-logo{
  display: none;
}
.footer-bottom{
  margin-top: 4px;
  padding: 6px 8px;
}
.navi-footer-in > .menu-footer li{
  width: auto;
}
.navi-footer-in > .menu-footer li a{
  padding: 0 12px;
  font-size: .88em;
}
.copyright{
  margin-top: 2px;
  font-size: .8em;
  color: var(--my-text-secondary);
}

/* ---- Footer: small, understated legal links (Privacy Policy / Disclaimer) ---- */
.my-footer-legal{
  background: var(--my-bg);
  text-align: center;
  padding: .4em 1.2em .9em;
  font-size: .8em;
}
.my-footer-legal a{
  color: var(--my-text-secondary);
}
.my-footer-legal a:hover{
  color: var(--my-teal-dark);
}
.my-footer-legal-sep{
  color: var(--my-border);
  margin: 0 .6em;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  .my-hero-title{
    font-size: 1.9em;
  }
}

/*834px以下*/
@media screen and (max-width: 834px){
  .my-hero{
    padding: 2.4em 0;
  }
  .my-hero-title{
    font-size: 1.6em;
  }
  .my-section, .my-section-alt{
    padding: 2em 0;
  }
  .my-section-inner{
    padding: 0 1.2em;
  }
  .my-profile-top{
    flex-direction: column;
    gap: .9em;
  }
  .my-profile-photo{
    width: 150px;
    height: 186px;
  }
  .my-profile-details{
    margin-top: 1.2em;
  }
  .my-two-col{
    flex-direction: column;
    gap: 1.1em;
  }
  .my-two-col-image{
    flex: 0 0 auto;
    max-width: 280px;
    width: 100%;
    margin: 0 auto;
  }
  .my-articles-grid{
    grid-template-columns: 1fr;
  }
  .my-team-band{
    flex-direction: column;
    gap: .8em;
  }
  .my-contact-panel{
    flex-direction: column;
    gap: 1.4em;
  }
  /* Cocoon swaps to a separate (unpopulated) .footer-widgets-mobile area
     at this breakpoint, which would hide the office-info widget we placed
     in the desktop footer-left column. Keep the desktop footer widgets
     area visible instead of duplicating the widget into a second area. */
  .footer-widgets{
    display: block !important;
  }
  .footer-widgets-mobile{
    display: none !important;
  }
}

/*1100px以下: Technical Fields / Why Choose Us カードを2列に
  (min-width を保ったまま3〜4列で並べると、この範囲でカード合計の
  最小幅がコンテナ幅を超えてはみ出す/横スクロールする可能性があるため) */
@media screen and (max-width: 1100px){
  .my-tech-grid,
  .my-why-grid{
    flex-wrap: wrap;
  }
  .my-tech-grid .wp-block-column,
  .my-why-grid .wp-block-column{
    flex-basis: calc(50% - .5em) !important;
    min-width: 220px;
  }
}

/*700px以下: Technical Fields / Why Choose Us カードを1列に*/
@media screen and (max-width: 700px){
  .my-tech-grid,
  .my-why-grid{
    flex-wrap: wrap;
  }
  .my-tech-grid .wp-block-column,
  .my-why-grid .wp-block-column{
    flex-basis: 100% !important;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  .my-hero-title{
    font-size: 1.4em;
  }
  .my-hero-sub{
    font-size: 1em;
  }
  .my-info-block{
    padding: 1.2em 1.3em;
  }
  .my-timeline-row{
    grid-template-columns: 4.6em 1fr;
  }
}

/* ---- Home限定: 各セクション末尾要素の下マージンを打ち消す。
   フルブリードのセクションはそれ自体が上下paddingを持つため、末尾の
   段落/リスト等が独自のbottom marginを残すと、次のセクションのpadding
   と二重に積み上がって縦の余白が過大に見える。Home(.home)だけに絞って
   末尾要素のmargin-bottomを0にする。 ------------------------------- */
.home .my-section > *:last-child,
.home .my-section-alt > *:last-child{
  margin-bottom: 0;
}

/* ---- Home限定: 幅制限が効いていなかった根本原因の修正 ------------------
   padding-left/rightに%を使うと、CSS仕様上「要素自身の幅(今回は
   width:100vwにしているHero/Section自身)」ではなく「containing block
   (親要素)の幅」を基準に解決される。Cocoon側では #main が実質約1198px
   固定(.wrap max-width:1256pxの内側)のため、calc(50% - Xpx)は画面幅とは
   ほぼ無関係な値になり、多くの場合 max() の下限(2.25em)に張り付いて、
   画面が大きいほど中身がほぼ無制限に横へ広がっていた。
   修正: %ではなく、必ずビューポート基準になる vw を使う。 --------------- */
.home{
  --my-home-inset: max(2.25em, calc(50vw - 592px));
}
.home .my-hero,
.home .my-section,
.home .my-section-alt,
.home .my-cta{
  padding-left: var(--my-home-inset);
  padding-right: var(--my-home-inset);
}

@media screen and (max-width: 834px){
  .home .my-hero,
  .home .my-section,
  .home .my-section-alt,
  .home .my-cta{
    padding-left: 1.2em;
    padding-right: 1.2em;
  }
}

/* ---- Home限定: セクションごとに内側の読みやすい幅を変える(左端は
   共通のまま、右側だけをvw基準で詰めて幅を狭くする)。 ------------------ */
@media screen and (min-width: 835px){
  /* 事務所紹介: 720pxは通常の説明文には狭すぎ、「知的財産に関する
     実｜務」のような不自然な位置での折り返しを招いていたため、
     読みやすい説明文の目安幅である約1080pxまで広げる。 */
  .home .my-section-narrow{
    padding-right: calc(100vw - var(--my-home-inset) - 1080px) !important;
  }
  /* 得意な技術分野(セクション全体): 従来の860pxは分野アイコンが
     2個だった時点の幅で、3個目(材料)を追加した際に更新されておらず、
     左のリード文（.my-tech-row-text）が340pxまで圧縮されて
     「材料分／野」のような不自然な折り返しの原因になっていた。
     3個のアイコン(220px×3+gap24px×2=708px)+テキスト+gapが収まる
     Home基本幅(約1184px)まで広げる。 */
  .home .my-section-compact{
    padding-right: calc(100vw - var(--my-home-inset) - 1184px) !important;
  }
  /* バイオ・化学案件への対応 / 出願前からの継続的な知財支援(画像入り):
     600(本文) + 56(gap) + 460(画像) = 約1116px。 */
  .home .my-section-medium{
    padding-right: calc(100vw - var(--my-home-inset) - 1116px) !important;
  }
  /* Blog: 1184px(373px×3 + 32px×2 ≒ 1184px)。Heroと同じ基本グリッド幅
     なので、上書きせず共通のvar(--my-home-inset)をそのまま使う。 */
}

/* ---- Home限定: お問い合わせ(CTA)の内側は約670px ---- */
@media screen and (min-width: 835px){
  .home .my-cta{
    padding-left: max(2.25em, calc(50vw - 335px));
    padding-right: max(2.25em, calc(50vw - 335px));
  }
}

/* ---- Home限定: 文章そのものにも保険としてmax-widthを設ける。
   セクションwrapper側の幅計算に万一ズレがあっても、本文が
   画面いっぱいに1行で伸びることがないようにする安全策。
   820pxは上の.my-section-narrow(720px→1080pxへ拡大)より狭く、
   本文を実質720px相当まで圧縮してしまっていたため、各セクションの
   幅設定を妨げないよう1120pxまで広げる。 --------------------------- */
.home .my-section > p,
.home .my-section-alt > p{
  max-width: 1120px;
}

/* ---- Home限定: 得意な技術分野を左(見出し+リード)/右(2項目)の
   2カラムにする。以前の「上に見出し、下にアイコン2個だけ中央寄せ」が
   間延びして見える原因だったため、左右に並べて一体感を持たせる。
   カード枠・影・大きな角丸は使わない。 --------------------------------- */
.home .my-section-compact{
  padding-top: 1.6em;
  padding-bottom: 1.9em;
}
.home .my-section-compact h2{
  margin-bottom: .3em;
}
.home .my-tech-row{
  display: flex;
  align-items: center;
  gap: 48px;
}
.home .my-tech-row-text{
  flex: 0 0 428px;
  max-width: 428px;
}
.home .my-tech-row-items{
  flex: 0 0 auto;
  min-width: 0;
}
.home .my-section-medium{
  padding-top: 2.3em;
  padding-bottom: 1.6em;
}
.home .my-section-medium h2{
  margin-bottom: .7em;
}
/* グリッド自体はもう独立して中央寄せする必要がない(親の
   .my-tech-row-itemsの位置にそのまま収まる)。項目は220px前後を目安にする。 */
.home .my-tech-grid{
  margin: 0;
  gap: 24px !important;
}
.home .my-tech-grid .wp-block-column{
  text-align: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}
@media screen and (min-width: 835px){
  .home .my-tech-grid .wp-block-column{
    flex: 0 0 220px !important;
    width: 220px;
    max-width: 220px;
    min-width: 0 !important;
  }
}
@media screen and (max-width: 834px){
  .home .my-tech-row{
    flex-direction: column;
    align-items: stretch;
    gap: 1.2em;
  }
  .home .my-tech-row-text{
    flex: 0 0 auto;
    max-width: none;
  }
}
/* アイコンの元画像サイズが異なっていても、共通の正方形box(100x100)に
   object-fit:containで収めることで、見た目のサイズを完全に揃える。 */
.home .my-tech-grid figure.wp-block-image{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  max-width: 100px;
  margin: 0 auto .5em;
}

.home .my-tech-grid figure.wp-block-image img.my-tech-icon{
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100px !important;
  max-height: 100px !important;
  object-fit: contain;
  margin: 0 auto;
}
.home .my-tech-title{
  margin: 0 0 .3em;
}
.home .my-tech-text{
  margin: 0;
  line-height: 1.6;
}
/* 「医薬・医療関連技術」「食品・化粧品関連技術」のような複合語が
   語の途中で不自然に折り返されないようにする(文全体はwrapしてよい)。 */
.my-nowrap{
  white-space: nowrap;
}

/* ============================================================
   下層ページ共通コンポーネント(事務所概要ページで初採用、以後の
   下層ページでも再利用する前提)。特定ページ名に依存しない命名とし、
   Home専用クラス(.home配下)やHero、既存の英語ページ用マークアップ
   (.my-two-col / .my-access-two-col / .my-timeline / .my-page-title 等)
   は変更せず、そのまま再利用する。ここでは新規クラスのみ追加する。
   ============================================================ */

/* ---- 下層ページ: セクションごとの読みやすい幅バリエーション ----------
   既定の .my-section-inner (var(--my-max-width): 1120px) はそのまま
   「基本コンテナ」として使い、特に幅を絞りたいセクションだけ追加の
   クラスを重ねる。ページ間で使い回せるよう、ページ固有名を含めない。 */
.my-section-inner.my-w-narrow{
  max-width: 960px;
}
.my-section-inner.my-w-fields{
  max-width: 1020px;
}
.my-section-inner.my-w-table{
  max-width: 900px;
}
.my-section-inner.my-w-timeline{
  max-width: 860px;
}
.my-section-inner.my-w-access{
  max-width: 1080px;
}

/* ---- 下層ページ: 取扱業務のような「カード化しない」横並び一覧 --------
   項目名(strong)と説明(.my-nowrap)を縦に積む2行構成にすることで、
   1行に詰め込むより窮屈に見えず、業務一覧として端正に読める。 -------- */
.my-practice-list{
  display: flex;
  flex-wrap: wrap;
  margin: 2em 0 0;
  padding: 0;
  list-style: none;
}
.my-practice-list li{
  display: flex;
  flex-direction: column;
  gap: .35em;
  padding: 0 1.6em;
  border-left: 1px solid var(--my-border);
  line-height: 1.5;
}
.my-practice-list li:first-child{
  padding-left: 0;
  border-left: none;
}
.my-practice-list li strong{
  color: var(--my-navy);
  font-size: 1.02em;
  font-weight: 600;
}
.my-practice-list li .my-nowrap{
  color: var(--my-text-secondary);
  font-size: 16px;
  font-weight: 400;
}
/* 900px以上: 十分な幅がある場合は5項目を折り返させず、均等幅で
   きれいに1列へ揃える(それ未満は既定のflex-wrapによる自然な折り返し)。 */
@media screen and (min-width: 900px){
  .my-practice-list{
    flex-wrap: nowrap;
  }
  .my-practice-list li{
    flex: 1 1 0;
    padding-left: 1.3em;
    padding-right: 1.3em;
  }
  .my-practice-list li:first-child{
    padding-left: 0;
  }
}
/* 700〜899px: 3列+2列のような不揃いにせず、自然に2列へ折り返す */
@media screen and (min-width: 700px) and (max-width: 899px){
  .my-practice-list li{
    flex: 1 1 40%;
    margin-bottom: 1em;
  }
}
@media screen and (max-width: 700px){
  .my-practice-list{
    flex-direction: column;
    gap: .9em;
  }
  .my-practice-list li{
    border-left: none;
    padding-left: 0;
  }
}
/* 取扱業務一覧のすぐ後に続く「主な技術分野」見出しとの間に、
   セクション内の他の余白と揃う十分な間隔を確保する(このページのみ)。 */
.my-w-fields .my-practice-list + h3{
  margin-top: 2.4em;
}

/* ---- 下層ページ: 技術分野のような2カラム(PC)の分野一覧。
   タグ/バッジ/カードにはせず、細い罫線と通常の本文サイズのみを使う。 --- */
.my-fields-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6em 2.2em;
  margin: 1.3em 0 0;
  padding-top: 1.3em;
  border-top: 1px solid var(--my-border);
}
.my-fields-col h4,
.my-fields-other h4{
  font-size: 1.05em;
  color: var(--my-navy);
  margin: 0 0 .4em;
}
.my-fields-col p,
.my-fields-other p{
  margin: 0;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--my-text);
  /* コンマ区切りの最後の項目(「材料関連 など」等)だけが単独で
     次行へ落ちないよう、幅を確保したうえで通常の語間折り返しに任せる。 */
  overflow-wrap: normal;
  word-break: keep-all;
}
.my-fields-other{
  margin-top: 1.6em;
  padding-top: 1.3em;
  border-top: 1px solid var(--my-border);
}
@media screen and (max-width: 700px){
  .my-fields-grid{
    grid-template-columns: 1fr;
    gap: 1.2em;
  }
}

/* ---- 事務所概要: 主な技術分野(バイオテクノロジー/化学/材料)の3カラム。
   Homeの .my-tech-grid / .home .my-tech-grid とは独立させた専用コンポー
   ネントとし、Home側の上書きに影響されないようにする。カード化せず、
   アイコン+分野名+短い例のみのシンプルな構成。このページ専用。 ------- */
.my-tech3-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  margin: 1.6em 0 0;
}
.my-tech3-col{
  flex: 1 1 200px;
  min-width: 200px;
  text-align: center;
}
.my-tech3-icon{
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin: 0 auto .8em;
}
.my-tech3-name{
  font-size: 1.05em;
  color: var(--my-navy);
  margin: 0 0 .4em;
}
.my-tech3-desc{
  margin: 0;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--my-text-secondary);
  overflow-wrap: normal;
  word-break: keep-all;
}
@media screen and (max-width: 700px){
  .my-tech3-grid{
    flex-direction: column;
    gap: 1.6em;
  }
  .my-tech3-col{
    text-align: left;
  }
  .my-tech3-icon{
    margin: 0 0 .6em;
  }
}
/* 主な技術分野(3カラム)の直後に続く「その他の分野」補足との間隔を、
   カラム構成が変わっても他セクションと揃うよう明示しておく。 */
.my-tech3-grid + .my-fields-other{
  margin-top: 2em;
}

/* ---- 下層ページ: 事務所概要のような項目/内容の2列テーブル。
   Excel的な太い罫線ではなく、薄い横罫線のみ。左列はやや幅を狭くし、
   太字だが背景色は付けない。 ------------------------------------------ */
.my-table-wrap{
  margin: 1.2em 0 0;
  overflow-x: auto;
}
.my-info-table{
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.my-info-table th,
.my-info-table td{
  text-align: left;
  vertical-align: top;
  padding: .85em 1em .85em 0;
  border-bottom: 1px solid var(--my-border);
  font-size: 16.5px;
  line-height: 1.8;
}
.my-info-table th{
  width: 8.5em;
  white-space: nowrap;
  font-weight: 600;
  color: var(--my-navy);
}
.my-info-table td{
  color: var(--my-text);
}
.my-info-table tr:last-child th,
.my-info-table tr:last-child td{
  border-bottom: none;
}
/* 事務所概要(/about/)の値セルは元々左paddingが0で、文字が列の境界に
   接して窮屈に見えるため、このページに限定して値セルの左余白のみ追加する。
   ラベル列(th)はページ本文の他要素と左端を揃えたいためそのまま。 */
body.page-id-133 .my-info-table td{
  padding-left: 1em;
}

/* 下層ページの本文系文字サイズ調整(PC 16.5px前後 / line-height 1.7〜1.9)。
   .my-timeline / .my-timeline-event 自体は既存の英語Teamページ(職歴年表)
   でも共用しているため、そちらには影響させず .my-w-timeline 配下だけに
   限定して適用する。 */
.my-w-timeline .my-timeline-event{
  font-size: 16.5px;
  line-height: 1.75;
}
.my-w-narrow > p{
  font-size: 16.5px;
  line-height: 1.8;
}
.my-w-fields > p{
  font-size: 16.5px;
  line-height: 1.8;
}
.my-w-access .my-two-col-text p{
  font-size: 16.5px;
  line-height: 1.8;
}

/* ---- 事務所の特徴: 画像40〜45%/本文55〜60%、全体幅約1000〜1080pxの
   交互配置行。既存の .my-two-col / .my-two-col-text / .my-two-col-image
   (about-us等でも使用中のイラスト+本文レイアウト)をそのまま再利用し、
   このページの行(.my-features-row)だけ比率を上書きする。左右の入れ替えは
   HTML側の要素順で行う(about-usと同じ方式。CSSのorder等は使わない)。 --- */
.my-section-inner.my-w-features{
  max-width: 1040px;
}

/* ---- スタッフ紹介: 写真ありプロフィール(山口・尾崎)の幅と、
   写真なしプロフィール(原林・森田、読みやすい本文幅の縦積み)の幅。 --- */
.my-section-inner.my-w-team{
  max-width: 1080px;
}
.my-section-inner.my-w-profile-narrow{
  max-width: 820px;
}
/* スタッフ紹介: 「2006～2010年」のような範囲年が年列の幅(5.2em)を
   超え、「年」だけが次の行に落ちることがあるため、このページの
   経歴年表示に限り折り返し禁止+列幅を広げる。about-jpの沿革
   (.my-w-timeline)など他ページの .my-timeline は変更しない。 */
.my-w-team .my-timeline-year,
.my-w-profile-narrow .my-timeline-year{
  white-space: nowrap;
}
.my-w-team .my-timeline-row,
.my-w-profile-narrow .my-timeline-row{
  grid-template-columns: 6.5em 1fr;
}
@media screen and (max-width: 480px){
  .my-w-team .my-timeline-row,
  .my-w-profile-narrow .my-timeline-row{
    grid-template-columns: 5.8em 1fr;
  }
}
.my-features-row .my-two-col-image{
  flex: 0 0 42%;
  max-width: 42%;
  /* 既存の .my-two-col-image の内側padding(2em)は写真的な余白を
     想定した値で、模式図イラストには余白が大きすぎ実表示が小さく
     見えるため、このページの行だけpaddingを縮小してイラスト自体の
     表示面積を約10%拡大する(外側の画像ボックスの大きさは変えない)。 */
  padding: 1em;
}
.my-features-row .my-two-col-text{
  flex: 1 1 58%;
  font-size: 16.5px;
  line-height: 1.8;
}
@media screen and (max-width: 834px){
  /* 834px以下は既存の .my-two-col / .my-two-col-image の共通モバイル
     挙動(1カラム化・画像max-width:280px)にそのまま委ねる。 */
  .my-features-row .my-two-col-image{
    flex: 0 0 auto;
  }
  .my-features-row .my-two-col-text{
    flex: 1 1 auto;
  }
}
@media screen and (max-width: 480px){
  .my-info-table th{
    width: 6.4em;
    white-space: normal;
    padding-right: .6em;
    font-size: .9em;
  }
  .my-info-table td{
    font-size: .9em;
  }
}

/* ---- 下層ページ: Google Mapのレスポンシブ埋め込み(APIキー不要のiframe
   方式)。アスペクト比を固定してiframeを絶対配置することで、スマート
   フォンでも幅100%に収まり、横スクロールが発生しないようにする。
   .my-two-col-image と併用するため、既存の .my-two-col-image のモバイル
   時max-widthだけ、この用途に限り少し広げる。 ------------------------- */
.my-map-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--my-border);
}
.my-map-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media screen and (max-width: 834px){
  .my-two-col-image.my-map-embed{
    max-width: 420px;
  }
}

/* ---- 顧問契約・発明発掘相談会: 画像35〜40%/本文60〜65%の交互配置行。
   事務所の特徴(.my-features-row)と同じ考え方だが比率がやや異なるため、
   専用モディファイアを用意する。既存の .my-two-col 系は変更しない。 --- */
.my-section-inner.my-w-advisory{
  max-width: 1040px;
}
.my-advisory-row .my-two-col-image{
  flex: 0 0 38%;
  max-width: 38%;
  /* 簡略イラストは内側の余白が大きいと小さく見えるため、
     .my-features-row と同様にpaddingを縮小する。 */
  padding: 1em;
}
.my-advisory-row .my-two-col-text{
  flex: 1 1 62%;
  font-size: 16.5px;
  line-height: 1.8;
}
@media screen and (max-width: 834px){
  .my-advisory-row .my-two-col-image{
    flex: 0 0 auto;
  }
  .my-advisory-row .my-two-col-text{
    flex: 1 1 auto;
  }
}

/* ---- 顧問契約・発明発掘相談会: 「どの段階から相談できるか」「打ち合わせの
   進め方」で使う、矢印区切りのシンプルな横方向フロー。カード化・アイコンは
   使わず、太字ネイビーのテキストと矢印のみで構成する。PCでは横並び、
   700px以下では縦積み+下向き矢印にする。 ------------------------------- */
.my-flow{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em 0;
  margin: 1.3em 0 0;
  padding: 0;
  list-style: none;
}
.my-flow li{
  font-size: 16.5px;
  font-weight: 600;
  color: var(--my-navy);
  white-space: nowrap;
}
.my-flow li:not(:last-child)::after{
  content: "→";
  display: inline-block;
  margin: 0 .6em;
  color: var(--my-text-secondary);
  font-weight: 400;
}
@media screen and (max-width: 700px){
  .my-flow{
    flex-direction: column;
    align-items: flex-start;
    gap: .4em;
  }
  .my-flow li{
    white-space: normal;
  }
  .my-flow li:not(:last-child)::after{
    content: "↓";
    display: block;
    margin: .3em 0;
  }
}

/* ============================================================
   お問い合わせ: Contact Form 7 の出力に、既存下層ページのトーン
   (白背景の入力欄・細いグレー枠・大きな角丸/影なし)を合わせるための
   スタイル。フォームの送信処理自体はCF7に委ねる。
   ============================================================ */
.my-section-inner.my-w-contact-form{
  max-width: 760px;
}
/* ---- 採用情報: 応募資格・勤務条件・給与など「条件」セクションの幅。 --- */
.my-section-inner.my-w-terms{
  max-width: 900px;
}
.my-form-row{
  margin: 0 0 1.4em;
}
.my-form-row:last-child{
  margin-bottom: 0;
}
.my-form-row-2col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.6em;
  margin: 0 0 1.4em;
}
.my-form-label{
  display: block;
  font-weight: 600;
  color: var(--my-navy);
  margin: 0 0 .5em;
  font-size: 16.5px;
}
.my-form-required,
.my-form-optional{
  display: inline-block;
  margin-left: .6em;
  font-size: .75em;
  font-weight: 700;
  vertical-align: middle;
  border-radius: 3px;
  padding: .1em .5em;
}
.my-form-required{
  color: var(--my-navy);
  background: var(--my-bg-alt);
}
.my-form-optional{
  color: var(--my-text-secondary);
  background: none;
  font-weight: 600;
  padding-left: 0;
}
.my-form-hint{
  font-size: .85em;
  color: var(--my-text-secondary);
  margin: 0 0 .5em;
}
.my-contact-form .wpcf7-form-control-wrap{
  display: block;
}
.my-contact-form input[type="text"],
.my-contact-form input[type="email"],
.my-contact-form input[type="tel"],
.my-contact-form select,
.my-contact-form textarea{
  width: 100%;
  background: #fff;
  border: 1px solid var(--my-border);
  border-radius: 4px;
  padding: .7em .8em;
  font-size: 16px;
  font-family: inherit;
  color: var(--my-text);
  box-shadow: none;
  box-sizing: border-box;
}
.my-contact-form textarea{
  min-height: 9em;
  resize: vertical;
}
.my-contact-form input:focus,
.my-contact-form select:focus,
.my-contact-form textarea:focus{
  outline: 2px solid var(--my-blue);
  outline-offset: 1px;
  border-color: var(--my-blue);
}
.my-form-consent{
  font-size: .95em;
  line-height: 1.6;
}
.my-form-consent .wpcf7-list-item{
  margin: 0;
}
.my-form-consent .wpcf7-list-item-label{
  margin-left: .5em;
}
.my-form-consent label{
  display: flex;
  align-items: flex-start;
  gap: .3em;
  cursor: pointer;
}
.my-form-consent input[type="checkbox"]{
  width: 1.2em;
  height: 1.2em;
  margin-top: .15em;
  flex: 0 0 auto;
}
.my-contact-form .wpcf7-submit{
  background: var(--my-blue);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: .75em 2.4em;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
}
.my-contact-form .wpcf7-submit:hover{
  background: var(--my-blue-dark);
}
.my-contact-form .wpcf7-spinner{
  margin-left: .8em;
}
.my-contact-form .wpcf7-not-valid-tip{
  color: #B3382C;
  font-size: .85em;
  margin-top: .3em;
}
.my-contact-form .wpcf7-response-output{
  border: 1px solid var(--my-border);
  background: var(--my-bg-alt);
  border-radius: 4px;
  padding: .9em 1.1em;
  font-size: .95em;
  margin-top: 1.4em;
}
.my-contact-form .wpcf7-mail-sent-ok{
  border-color: var(--my-teal-dark);
  color: var(--my-teal-dark);
  background: rgba(60,122,109,.08);
}
.my-contact-form .wpcf7-validation-errors,
.my-contact-form .wpcf7-mail-sent-ng,
.my-contact-form .wpcf7-spam-blocked{
  border-color: #B3382C;
  color: #8a2b21;
  background: rgba(179,56,44,.06);
}
@media screen and (max-width: 700px){
  .my-form-row-2col{
    grid-template-columns: 1fr;
    gap: 1.4em;
  }
}

/* ---- お問い合わせ: フォームの下に添える、控えめなメール問い合わせ導線。
   カード化・強い背景色は使わず、細い上罫線のみで区切る。 --------------- */
.my-contact-email-alt{
  margin-top: 2.2em;
  padding-top: 1.6em;
  border-top: 1px solid var(--my-border);
}
.my-contact-email-alt h3{
  font-size: 1.05em;
  margin: 0 0 .5em;
}
.my-contact-email-alt img{
  display: block;
  max-width: 100%;
  height: auto;
  margin: .8em 0 .5em;
}
.my-contact-email-note{
  font-size: .85em;
  color: var(--my-text-secondary);
  margin: 0 0 .3em;
}

/* ---- 下層ページ: Homeの「お問い合わせ」CTAより控えめな、下層ページ
   共通の末尾CTA。背景・ボタン色は既存の .my-cta をそのまま使い、
   縦の余白と見出しサイズだけを小さくする。 ------------------------------ */
.my-cta-compact.my-cta{
  padding: 2.2em 0;
}
.my-cta-compact .my-cta-title{
  font-size: 1.35em;
}
.my-cta-compact .my-cta-text{
  font-size: .95em;
  margin-bottom: 16px !important;
}

/* ============================================================
   Blog(page_for_posts, ID13)一覧ページの調整。
   body.blog は WordPress標準の body_class()(is_home()時)が付与する
   クラスで、このBlog一覧ページにのみ一致する(他ページには付与されない
   ため、他の下層ページ・投稿単体ページには一切影響しない)。
   Cocoon親テーマの .entry-card / .sidebar 自体は変更せず、このページに
   限定して配色・余白・幅比率のみを上書きする。新しい独自カードや
   独自ウィジェットシステムは作らない。
   ============================================================ */

/* ---- 全体幅・カラム比率(Blogページのみ) ----------------------------
   Cocoon既定は #main(記事一覧)860px + .sidebar 376px で、サイドバーが
   太すぎる(全体の約30%)ため、Blogページだけサイドバー幅を狭める。
   #main は860px(目安820〜880pxの範囲内)のまま変更せず、.sidebarのみ
   284pxに縮小する。.content-inの最大幅を1180pxに絞ることで、
   860+284=1144pxの残り約36pxがjustify-content:space-betweenによる
   カラム間の隙間になる(目安30〜40px)。 -------------------------------- */
body.blog .content-in{
  max-width: 1180px;
}
body.blog .sidebar{
  width: 284px;
}
@media screen and (max-width: 1023px){
  /* Cocoon標準のモバイル時1カラム化(.content-in{display:block}、
     .main/.sidebar{width:auto})を妨げないよう、幅指定を解除する。 */
  body.blog .content-in{
    max-width: none;
  }
  body.blog .sidebar{
    width: auto;
  }
}

/* ---- H1・導入文(inc/blog-intro.php が出力) ------------------------
   #main にそのまま収まる通常のブロックとして表示し、下に細い区切り線を
   引いて記事一覧との区切りにする。見出し自体は既存の .my-page-title
   (他の下層ページと同じ色・太さ・サイズ)をそのまま再利用する。 */
body.blog .my-blog-intro{
  margin: 0 0 1.8em;
  padding-bottom: 1.6em;
  border-bottom: 1px solid var(--my-border);
}
body.blog .my-blog-intro p{
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--my-text);
  margin: 0;
}

/* ---- 記事一覧: 枠線付きの大きなカードをやめ、記事同士を細い区切り線
   だけで仕切るシンプルなリストにする。 --------------------------------- */
body.blog .entry-card-wrap{
  display: block;
  padding: 26px 0;
  border-bottom: 1px solid var(--my-border);
}
body.blog .entry-card-wrap:first-child{
  padding-top: 0;
}
body.blog .entry-card-wrap:last-child{
  border-bottom: none;
}
body.blog .entry-card{
  display: flex;
  align-items: flex-start;
  gap: 1.6em;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  height: auto;
}

/* サムネイル: 画像を設定した記事は左に適度な大きさで表示する
   (Cocoon既定のfloat:left/margin-left:330pxをflex+gapに置き換える)。
   .entry-card-content 自体も縦方向のflexコンテナにし、中の要素(タイトル・
   抜粋・カテゴリー・日付・タグ)を order で並び替える(DOM構造・PHP
   テンプレートは変更しない)。 -------------------------------------------- */
body.blog .entry-card-content{
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
/* .entry-card-meta は表示上の入れ物としては使わず display:contents で
   展開し、中の .entry-card-info(日付)と .entry-card-categorys(カテゴリー)
   を .entry-card-content の直接のflexアイテムとして order 指定できるように
   する。 */
body.blog .entry-card-meta{
  display: contents;
}
body.blog .entry-card-categorys{
  order: 1;
  margin: 0 0 .4em;
}
body.blog .entry-card-title{
  order: 2;
}
body.blog .entry-card-snippet{
  order: 3;
}
body.blog .my-entry-tags{
  order: 4;
}
body.blog .entry-card-info{
  order: 5;
}
body.blog .entry-card-thumb{
  flex: 0 0 180px;
  width: 180px;
  max-width: 180px;
  margin: 0;
  float: none;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
body.blog .entry-card-thumb-image{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* アイキャッチ画像が無い記事(現状3記事とも該当): 実際のDOMで確認した
   Cocoon標準クラス ".no-image" を使い、サムネイル領域(figure)自体を
   丸ごと非表示にする。対応ブラウザでは記事が本文100%幅になる。
   :has()が使えない環境でも「壊れた画像にカテゴリーラベルが重なる」
   状態だけは必ず解消されるよう、NO IMAGE画像自体も個別に非表示にする。 */
body.blog .entry-card-thumb:has(.no-image){
  display: none;
}
body.blog .entry-card-thumb-image.no-image{
  display: none;
}

/* ---- カテゴリー表示: 各記事に実際のカテゴリー(外国出願/バイオ・化学/
   特許実務)を設定したため、タイトルの上に控えめなテキストとして表示
   する。背景色・角丸・影付きの「バッジ」にはせず、色とサイズだけを
   指定する。カード全体が1つの<a>で覆われているため、リンクは付けず
   (Cocoon標準の the_nolink_categories() をそのまま使用)テキストのみ
   とする。サムネイル画像上の .cat-label は、サムネイル自体を上で
   非表示にしているため引き続き表示しない。 --------------------------- */
body.blog .cat-label{
  display: none;
}
body.blog .entry-category{
  font-size: 13.5px;
  font-weight: 400;
  color: var(--my-blue-dark);
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* タイトル・抜粋: カード全体がリンク(.a-wrap)のため、リンク色を
   継承させず明示的に色を指定する(!importantは、この一覧内の色だけを
   確実に固定するための限定的な使用)。 ---------------------------------- */
body.blog .entry-card-title{
  font-size: 23px;
  color: var(--my-navy) !important;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 .5em;
}
body.blog .entry-card-wrap:hover .entry-card-title{
  color: var(--my-blue-dark) !important;
}
body.blog .entry-card-snippet{
  color: var(--my-text-secondary) !important;
  font-size: 15.5px;
  line-height: 1.8;
  margin: 0 0 .7em;
}
body.blog .entry-card-info,
body.blog .post-date{
  font-size: 13px;
  color: var(--my-text-secondary) !important;
}

/* ---- タグ表示: 抜粋の直後(inc/blog-sidebar.php の
   entry_card_snippet_after フック)に「#タグ名」形式で挿入する。
   タグが無い記事では要素自体を出力しないため、空の枠は出ない。
   カード全体が1つの<a>のため、タグ部分は入れ子の<a>になる点に注意
   (ブラウザはこの位置で外側のカードリンクを暗黙的に区切って解釈する。
   タイトル・抜粋のクリックには影響しないが、タグ以降=日付部分は
   カード全体クリックの対象から外れる)。 -------------------------------- */
body.blog .my-entry-tags{
  margin: 0 0 .6em;
  display: flex;
  flex-wrap: wrap;
  gap: .1em .9em;
}
body.blog .my-entry-tags a{
  font-size: 13.5px;
  color: var(--my-text-secondary);
  text-decoration: none;
}
body.blog .my-entry-tags a:hover{
  color: var(--my-navy);
  text-decoration: underline;
}

/* ---- 右サイドバー: 大きな白いカードに見せず、ページ背景と馴染ませる。
   各ウィジェットは背景・枠なし、細い下線見出しのみで区切る。 ------------ */
body.blog .sidebar{
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
body.blog .sidebar h2,
body.blog .sidebar h3{
  background: none;
  color: var(--my-navy);
  font-size: 1.05em;
  font-weight: 700;
  padding: 0 0 .5em;
  margin: 0 0 .8em;
  border-radius: 0;
  border-bottom: 1px solid var(--my-border);
}
body.blog .sidebar .widget{
  margin-bottom: 2em;
}
body.blog .sidebar .widget:last-child{
  margin-bottom: 0;
}
body.blog .sidebar .search-box.input-box{
  display: flex;
  border: 1px solid var(--my-border);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
body.blog .sidebar .search-box .search-edit{
  flex: 1 1 auto;
  border: none;
  padding: .6em .7em;
  font-size: .95em;
  background: none;
}
body.blog .sidebar .search-box .search-submit{
  border: none;
  background: var(--my-bg-alt);
  padding: 0 1em;
  cursor: pointer;
  color: var(--my-text-secondary);
}
body.blog .sidebar .widget_archive ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
body.blog .sidebar .widget_archive li{
  padding: .35em 0;
  font-size: .92em;
}
body.blog .sidebar .widget_archive a{
  color: var(--my-navy);
}
body.blog .sidebar .widget_archive a:hover{
  color: var(--my-blue-dark);
}

/* ---- サイドバー「カテゴリー」: アーカイブと同じ簡潔なリスト形式。
   Uncategorized は投稿が0件になるため、標準の hide_empty 挙動により
   ウィジェット自体が自動的に除外する(追加のフィルターは不要)。 -------- */
body.blog .sidebar .widget_categories ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
body.blog .sidebar .widget_categories li{
  padding: .35em 0;
  font-size: .92em;
}
body.blog .sidebar .widget_categories a{
  display: flex;
  justify-content: space-between;
  gap: .8em;
  color: var(--my-navy);
}
body.blog .sidebar .widget_categories a:hover{
  color: var(--my-blue-dark);
}
body.blog .sidebar .widget_categories .post-count{
  color: var(--my-text-secondary);
  font-size: .95em;
}

/* ---- サイドバー「タグ」: WordPress標準のタグクラウードは頻度に応じて
   文字サイズが変わる仕様のため、派手なタグクラウードに見えないよう
   全タグを同じ小さいサイズに固定する。枠線・背景付きの「ボタン」風
   デザインもやめ、テキストのみのシンプルな一覧にする。 ------------------ */
body.blog .sidebar .tagcloud{
  display: flex;
  flex-wrap: wrap;
  gap: .4em 1em;
}
body.blog .sidebar .tagcloud a{
  display: inline-block;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  font-size: 13px !important;
  color: var(--my-text-secondary);
}
body.blog .sidebar .tagcloud a:hover{
  color: var(--my-navy);
}
body.blog .sidebar .tagcloud .fa-tag{
  font-size: .9em;
  margin-right: .3em;
  opacity: .7;
}

@media screen and (max-width: 700px){
  body.blog .entry-card{
    flex-direction: column;
    gap: .8em;
  }
  body.blog .entry-card-thumb{
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
  }
}