@charset "UTF-8";
/* =====================================================================
   attracca リニューアル 共通スタイル（原本デザイン準拠・全ページ共通）
   設計: FLOCSS + BEM / :root変数 / ルートfont-sizeのvwスケーリング
   ===================================================================== */


/* =====================================================================
   Foundation - reset
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


/* =====================================================================
   Foundation - variables
   ===================================================================== */
:root {
  --c-text:    #333333;
  --c-black:   #1a1a1a;
  --c-accent:  #13b5b1;
  --c-white:   #ffffff;
  --c-mint:    #dcf4f3;
  --c-bg:      #ffffff;
  --c-line:    #e5e5e5;
  --c-num:     #7fb8b3; /* Serviceカードの番号（淡いティール） */

  --font-base:    'Zen Kaku Gothic New', system-ui, sans-serif;
  --font-heading: 'Zen Kaku Gothic New', system-ui, sans-serif;

  --content-width: 1300px;
  --side-gutter:   40px;
  --header-h: 6rem;

  --z-base: 1; --z-float: 10; --z-header: 100; --z-overlay: 1000;
}


/* =====================================================================
   Foundation - base
   ===================================================================== */
html { font-size: 100%; }
@media (max-width: 1400px) { html { font-size: 1.1428vw; } }
@media (max-width: 768px)  { html { font-size: clamp(10px, 4.2666vw, 16px); } }

body {
  font-family: var(--font-base);
  font-size: 1rem;
  line-height: 1.9;
  font-weight: 500;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: inherit; text-decoration: none; transition: opacity 0.2s ease; }
a:hover { opacity: 0.7; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.4; color: var(--c-black); }


/* =====================================================================
   Layout - l-inner（内側1300px）／二層構造の内側
   ===================================================================== */
.l-inner {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--side-gutter);
}


/* =====================================================================
   Layout - l-header（ミント半透明・上部固定）
   ===================================================================== */
.l-header {
  position: fixed; top: 0; left: 0;
  width: 100%; height: var(--header-h);
  background: rgba(220, 244, 243, 0.85);
  backdrop-filter: blur(6px);
  z-index: var(--z-header);
}
.l-header__inner {
  width: 100%; height: 100%;
  margin-inline: auto; padding-inline: var(--side-gutter);
  display: flex; align-items: center; justify-content: space-between;
}
.l-body { padding-top: var(--header-h); }
/* ヒーローを持つTOPはヘッダーを画像に重ねるため余白を消す */
.l-body--hero { padding-top: 0; }


/* =====================================================================
   Layout - l-cta（共通CTA帯：Contact / Recruit）
   ===================================================================== */
.l-cta { background: var(--c-mint); padding: 8rem 0 5rem; margin-top: 10rem;}
.l-cta__lead {
  text-align: center; font-size: 1.215rem; line-height: 2;
  letter-spacing: 0.08em; margin-bottom: 2.5rem;
}
.l-cta__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.l-cta__card {
  background: var(--c-white); border-radius: 12px;
  padding: 2.75rem 2rem; text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.l-cta__card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); opacity: 1; }
.l-cta__en { display: block; font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; color: var(--c-accent); }
.l-cta__ja { display: block; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--c-text); letter-spacing: 0.08em; }


/* =====================================================================
   Layout - l-footer（ミント・ロゴ大・2カラムnav）
   ===================================================================== */
.l-footer { background: var(--c-mint); color: var(--c-text); }
.l-footer__inner {
  width: 100%; max-width: var(--content-width); margin-inline: auto;
  padding: 4rem 0 8rem;
  display: flex; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap;
}
.l-footer__logo {
   width: 13rem;
  font-family: var(--font-heading); font-weight: 700; font-size: 2rem;
  letter-spacing: 0.04em; color: var(--c-black); display: inline-block; margin-bottom: 1.25rem;
}
.l-footer__addr { font-style: normal; font-size: 0.8125rem; line-height: 2; color: var(--c-text); }
.l-footer__nav { display: grid; grid-template-columns: repeat(2, auto); gap: 0.75rem 3rem; }
.l-footer__col li { margin-bottom: 0.75rem; }
.l-footer__col a { font-size: 0.875rem; letter-spacing: 0.04em; color: var(--c-text); }
.l-footer__col a:hover { color: var(--c-accent); opacity: 1; }
.l-footer__bottom {
  width: 100%; max-width: var(--content-width); margin-inline: auto;
  padding: 1.5rem var(--side-gutter);
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid rgba(0,0,0,0.08); font-size: 0.75rem; color: #888888;
}
.l-footer__pp:hover { color: var(--c-accent); opacity: 1; }


/* =====================================================================
   Component - c-logo / c-gnav
   ===================================================================== */
.c-logo { width: 13rem;font-family: var(--font-heading); }

.c-gnav__list { display: flex; align-items: center; gap: 1.75rem; }
.c-gnav__link { font-size: 1rem; font-weight: 500; letter-spacing: 0.03em; }
.c-gnav__link--contact { padding: 0.6rem 1.5rem; border: 1px solid var(--c-text); border-radius: 999px; }
.c-gnav__link--contact:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-white); opacity: 1; }
.c-gnav__link--sns { font-size: 1.25rem; 
   display: block;
   width: 2rem;
}
.c-gnav__toggle { display: none; }
.c-gnav__toggle span,
.c-gnav__toggle span::before,
.c-gnav__toggle span::after {
  content: ""; display: block; position: absolute; left: 0;
  width: 100%; height: 2px; background: var(--c-black);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.c-gnav__toggle span { top: 50%; transform: translateY(-50%); }
.c-gnav__toggle span::before { top: -8px; }
.c-gnav__toggle span::after  { top:  8px; }
.c-gnav.is-open .c-gnav__toggle span { background: transparent; }
.c-gnav.is-open .c-gnav__toggle span::before { transform: translateY(8px) rotate(45deg); }
.c-gnav.is-open .c-gnav__toggle span::after  { transform: translateY(-8px) rotate(-45deg); }


/* =====================================================================
   Component - c-pagehead（JP小+EN大ティール 左寄せ／パンくず右）
   ===================================================================== */
.c-pagehead { background: var(--c-white); }
.c-pagehead__inner {
  width: 100%; max-width: var(--content-width); margin-inline: auto;
  padding: 3.5rem var(--side-gutter);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
}
.c-pagehead__ja { display: block; font-size: 1.215rem; font-weight: 700; color: var(--c-black); letter-spacing: 0.06em; margin-bottom: 0.5rem; }
.c-pagehead__en { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 4rem; line-height: 1.05; color: var(--c-accent); letter-spacing: 0.02em; }


/* =====================================================================
   Component - c-breadcrumb
   ===================================================================== */
.c-breadcrumb { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; white-space: nowrap; font-size: 0.8125rem; color: #888888; }
.c-breadcrumb__sep { color: #cccccc; }
.c-breadcrumb a:hover { color: var(--c-accent); opacity: 1; }


/* =====================================================================
   Component - c-secthead（左寄せ・EN大ティール＋JP小）TOPセクション頭
   ===================================================================== */
.c-secthead { margin-bottom: 2.5rem; }
.c-secthead__ja { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--c-black); letter-spacing: 0.06em; margin-bottom: 0.4rem; }
.c-secthead__en { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 3rem; line-height: 1.05; color: var(--c-accent); }


/* =====================================================================
   Component - c-secttl（下層の本文セクション見出し：JP大＋EN小）
   ===================================================================== */
.c-secttl { margin-bottom: 2rem; padding-bottom: 1rem;}
.c-secttl__ja { display: block; font-size: 2.25rem; font-weight: 700; color: var(--c-black); }
.c-secttl__en { display: block; margin-top: 0.25rem; font-size: 0.8125rem; letter-spacing: 0.12em; color: var(--c-accent); }

@media (max-width: 768px) {
   .c-secttl__ja {
      font-size: 1.75rem; 
   }


}

/* =====================================================================
   Component - c-subhead / c-lead / c-list / c-tags / c-more
   ===================================================================== */
.c-subhead { font-size: 1.5rem; font-weight: 700; color: var(--c-black); margin-bottom: 0.75rem;}
.c-lead { font-size: 1.125rem; line-height: 2.1; margin: 0 0 1rem 0; }
.c-list { padding-left: 1.25rem; }
.c-list li { list-style: disc; font-size: 0.9375rem; line-height: 1.9; margin-bottom: 0.4rem; }
.c-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.c-tags li { font-size: 0.8125rem; padding: 0.3rem 1rem; border: 1px solid #cfd8d7; border-radius: 999px; color: var(--c-text); background: var(--c-white); }
.c-more { display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; font-size: 1rem; font-weight: 500; letter-spacing: 0.08em; color: var(--c-accent); }
.c-more::after { content: ""; width: 3rem; height: 3rem; border: 1px solid var(--c-accent); border-radius: 50%; background: no-repeat center / 1rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313b5b1' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }


/* =====================================================================
   Component - c-imgph（画像プレースホルダ：ダミー）
   ===================================================================== */
.c-imgph { display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; letter-spacing: 0.08em; border-radius: 4px; overflow: hidden;     border-radius: 10px 10px;}


/* =====================================================================
   Component - c-note / c-map
   ===================================================================== */
.c-note { padding: 1rem 1.25rem; border: 1px solid var(--c-line); border-left: 3px solid var(--c-accent); border-radius: 6px; font-size: 1rem; line-height: 1.9; color: var(--c-text); }
.c-map { aspect-ratio: 16 / 7; border-radius: 6px; overflow: hidden; background: #ececec; }
.c-map iframe { width: 100%; height: 100%; border: 0; display: block; }


/* =====================================================================
   Project - p-top（TOPページ）
   ===================================================================== */
/* --- ヒーロー（フルブリード画像＋白キャッチ左下） --- */
.p-top__hero {
  position: relative;
  height: 100vh; min-height: 540px;
  background: linear-gradient(180deg, #9fb4ab 0%, #7e938a 100%); /* ダミー画像（実画像はbackground-imageへ） */
  display: flex; align-items: flex-end;
}
.p-top__hero .l-inner { position: relative; z-index: 1; padding-bottom: 12vh; }
.p-top__catch { color: #ffffff; font-size: 5rem; font-weight: 500; letter-spacing: 0.1em; text-shadow: 0 2px 16px rgba(0,0,0,0.25); }
.p-top__slides { position: absolute; inset: 0; z-index: 0; }
.p-top__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.p-top__slide.is-active { opacity: 1; }
.p-top__slide img { width: 100%; height: 100%; object-fit: cover; }
.p-top__catch_pos {
   position: absolute;
   left: 5rem;
   bottom: 10rem;
   z-index: 30;
}

/* --- About（緑グラデ：左=見出し+ロゴ / 右=本文） --- */
.p-top__about {
   background: url(../images/green_bg.jpg);
   background-size: cover;
}
.p-top__about .l-inner { padding: 9rem 6rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; }
.p-top__about-ja { display: block; font-weight: 700; font-size: 1rem; color: #000; }
.p-top__about-en { line-height: 1.5;display: block; font-size: 3rem; font-weight: 700; color: var(--c-accent); margin-bottom: 0; }
.p-top__about-logo {width: 20rem; font-family: var(--font-heading); font-weight: 700; font-size: 2.75rem; color: var(--c-black); letter-spacing: 0.04em; }
.p-top__about-sub { font-size: 0.8125rem; color: #557; letter-spacing: 0.12em; margin-top: 0.25rem; }
.p-top__about-body { font-size: 1rem; line-height: 2.2; }
.p-top__about-body p {
   font-size: 1.125rem; 
}

@media (max-width: 768px) {
   .p-top__about .l-inner {
      padding: 6rem 2rem;      
   }

   .p-top__about-logo {
      width: auto;
      max-width: 20rem;
   }
}

/* --- Service（緑カード：番号+画像 左 / 本文 右 / 矢印） --- */
.p-top__service { padding-block: 6rem; }
.p-top__intro { font-size: 1rem; line-height: 2.1; margin-bottom: 3rem; }
.p-card {
   background: url(../images/green_bg.jpg);
   background-size: cover;
  border-radius: 18px;
  margin-top: 2rem;
}
.p-card:last-child { margin-bottom: 0; }
.p-card__num { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 900; color: var(--c-num); line-height: 1; }
.p-card__img { width: 25rem; }
.p-card__img .c-imgph { aspect-ratio: 4 / 3;
 object-fit: cover; 
  display: block;  
}

@media (max-width: 768px) {
   .p-card__img .c-imgph { 
      aspect-ratio:auto;
   }

}

.p-card__title { font-size: 1.5rem; margin-bottom: 0.75rem; }
.p-card__desc { font-size: 1.125rem; line-height: 1.9; }
.p-card__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.p-card__tags li { font-size: 0.75rem; padding: 0.3rem 0.9rem; background: var(--c-white); border-radius: 999px; color: var(--c-text); }
.p-card__arrow { width: 2.75rem; height: 2.75rem; border: 1px solid var(--c-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--c-accent); }
.p-card__Wrap {
   padding: 2.5rem;
   display: grid;
   grid-template-columns: auto 25rem 1fr auto;
   align-items: center;
   gap: 1.5rem 2rem;
}

@media (max-width: 768px) {
   .p-card__Wrap {
      grid-template-columns: 1fr;
      padding: 1rem;
   }

}

/* --- Works（2カラム・写真＋名前＋タグpill） --- */
.p-top__works { padding-block: 6rem; }
.p-top__works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.p-work__img .c-imgph { aspect-ratio: 4 / 3;
 object-fit: cover; 
  display: block;  
}

@media (max-width: 768px) {
   .p-top__works {
       padding-block: 0;
       }

}

.p-work__img .c-imgph img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 比率を保ったまま枠いっぱいに切り抜き */
  display: block;  
}

.p-work__name { margin-top: 0.85rem;
font-size: 1.215rem;
font-weight: 500;
}
.p-work__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.p-work__tags li { font-size: 0.6875rem; padding: 0.15rem 0.75rem; border: 1px solid var(--c-accent); color: var(--c-accent); border-radius: 999px; }
.p-top__center { text-align: center; margin-top: 3.5rem; }
.p-work__img {
}

/* --- Blog／Column（works-gridと同形・画像＋メタ＋タイトル） --- */
.p-top__blog { padding-block: 6rem; }
.p-top__blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.p-blog__img .c-imgph { aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.p-blog__img .c-imgph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-blog__meta { display: flex; align-items: center; gap: 1rem; margin-top: 0.85rem; }
.p-blog__cat { font-size: 0.6875rem; padding: 0.15rem 0.75rem; border: 1px solid var(--c-accent); color: var(--c-accent); border-radius: 999px; }
.p-blog__date { font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--c-accent); }
.p-blog__title { margin-top: 0.5rem; font-size: 1.215rem; font-weight: 500; }

/* --- News（一覧・日付＋タイトル＋丸矢印） --- */
.p-top__news { padding-block: 6rem; }
.p-top__news .l-inner {
   max-width:1100px;
}
@media (max-width: 768px) {
   .p-top__news { padding-block: 0; }
}


/* --- Blog／Column カードグリッド（共通・TOPでも一覧でも使える） --- */
.p-blog-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 3rem;
 }
 
 /* カード中身は既存のまま（変更不要） */
 .p-blog__img .c-imgph { aspect-ratio: 4 / 3; overflow: hidden; display: block; }
 .p-blog__img .c-imgph img { width: 100%; height: 100%; object-fit: cover; display: block; }
 .p-blog__meta { display: flex; align-items: center; gap: 1rem; margin-top: 0.85rem; }
 .p-blog__cat { font-size: 0.6875rem; padding: 0.15rem 0.75rem; border: 1px solid var(--c-accent); color: var(--c-accent); border-radius: 999px; }
 .p-blog__date { font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--c-accent); }
 .p-blog__title { margin-top: 0.5rem; font-size: 1.215rem; font-weight: 500; }
 
 /* SP：1カラム */
 @media (max-width: 768px) {
   .p-blog-grid { grid-template-columns: 1fr; gap: 2rem; }
 }

/* =====================================================================
   Component - p-news（News一覧の行）
   ===================================================================== */
.p-news { border-top: 1px solid var(--c-line); }
.p-news__item { display: flex; align-items: center; gap: 1.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--c-line); }
.p-news__date { flex-shrink: 0; font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--c-accent); }
.p-news__title { flex: 1; font-size: 0.9375rem; }
.p-news__arrow { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border: 1px solid var(--c-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--c-accent); font-size: 0.9375rem; transition: background 0.2s, color 0.2s; }
.p-news__item:hover .p-news__arrow { background: var(--c-accent); color: var(--c-white); }


/* =====================================================================
   Project - p-sec（下層共通の本文セクション）
   ===================================================================== */
.p-sec { padding-block: 8rem 0; }
.p-sec--mint { background: var(--c-mint); }

.p-sec__block { margin-bottom: 4rem; }
.p-sec__block:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
   .p-sec {
   padding: 5rem 1rem;
   }
}
/* =====================================================================
   Project - p-service（サービスページ）
   ===================================================================== */
/* 事例の画像モザイク */
.p-case { margin-bottom: 8rem;
   max-width: 80%;
   margin-left: auto;
   margin-top:5rem;
}

@media (max-width: 768px) {
   .p-case {
      margin-bottom: 4.5rem;
      max-width: 100%;
      margin-left: auto;
      margin-top:5rem;
   }
   

}

.p-case:last-child { margin-bottom: 0; }
.p-case__name { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
.p-case__mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-bottom: 2rem;}
.p-case__mosaic .c-imgph { }
.p-case__desc { font-size: 1.125rem; line-height: 1.95; margin-bottom: 2rem; }
.p-case__label {
   font-size: 1.125rem;
   font-weight: bold;
  margin-bottom: 0.5rem;
}
.p-case__work { font-size: 1rem; margin-bottom: 0.75rem; }
.p-case__block {
   padding: 1rem 0;
   border-top:1px solid #000 ;
   border-bottom:1px solid #000 ;
}

/* デザイン/リクルートのサブブロック（画像グリッド付き） */
.p-svc-block { margin-bottom: 3rem;
   max-width: 80%;
   margin-left: auto;
   margin-top: 5rem;
}
.p-svc-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 2rem;
   margin-bottom: 2rem;
}

@media (max-width: 768px) {
   .p-svc-block {
      margin-bottom: 3rem;
      max-width: 100%;
      margin-left: auto;
      margin-top: 3rem;
   }

}

/* サポートの流れ（縦並び） */
.p-flow { display: flex; flex-direction: column; gap: 1.25rem; }
.p-flow__item { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; border: 1px solid #000; border-radius: 12px; padding: 1.75rem 2rem; }
.p-flow__num { width: 3.5rem; height: 3.5rem; border-radius: 50%; font-family: var(--font-heading); font-weight: 400;font-size: 1.5rem;border: 1px solid #000; display: flex; align-items: center; justify-content: center; }
.p-flow__step {
   font-size: 1.5rem;
   font-weight: 500;
}
.p-flow__cap { font-size: 1.215rem;
   font-weight: bold; margin-bottom: 0.5rem; }
.p-flow__desc { font-size: 1rem; line-height: 1.9; }
.p-flow__item_head {
display: flex;
gap: 1rem;
align-items: center;
width: 11rem;
}
.p-flow__pic {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
   margin-top: 2rem;
}

@media (max-width: 768px) {
   .p-flow__item {
      display: grid; 
      grid-template-columns:  1fr; 
      gap: 1.5rem; align-items: center;
       border: 1px solid #000; 
       border-radius: 12px; 
       padding: 1.75rem 2rem; 
      }


}

/* FAQ（details/summary） */
.p-faq__item { border-bottom: 1px solid var(--c-line); }
.p-faq__q { display: flex; align-items: center; gap: 0.75rem; padding: 1.25rem 0; cursor: pointer; font-weight: 500; list-style: none; }
.p-faq__q::-webkit-details-marker { display: none; }
.p-faq__q::after { content: "＋"; margin-left: auto; color: var(--c-accent); font-weight: 700; }
.p-faq__item[open] .p-faq__q::after { content: "−"; }
.p-faq__q-mark { color: var(--c-accent); font-weight: 900; flex-shrink: 0; }
.p-faq__a { padding: 0 0 1.25rem 1.75rem; font-size: 0.9375rem; line-height: 2; }


/* =====================================================================
   Project - p-recruit（採用ページ）
   ===================================================================== */
.p-recruit__hero { margin-bottom: 3rem; }
.p-recruit__hero .c-imgph { aspect-ratio: 21 / 9; }
.p-recruit__catch { font-size: 1.5rem; font-weight: 700; line-height: 1.8; margin-bottom: 1.5rem; color: var(--c-black); }
.p-recruit__media { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 2.5rem 0; }
.p-recruit__media .c-imgph { aspect-ratio: 4 / 3; }
/* スキル枠（ミント背景） */
.p-skillbox { background: var(--c-mint); border-radius: 10px; padding: 2rem 2.25rem; margin: 2rem 0; }
.p-skillbox__row { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; padding: 0.6rem 0; }
.p-skillbox__key { font-weight: 700; font-size: 1rem; color: var(--c-black); }
.p-skillbox__val { font-size: 1rem; }
/* 働き方（ラベル左・本文右） */
.p-work-row { display: grid; grid-template-columns: 160px 1fr; gap: 2rem; padding: 2rem 0; border-top: 1px solid var(--c-line); }
.p-work-row__key { font-weight: 700; font-size: 1rem; color: var(--c-black); }
.p-work-row__body { font-size: 0.9375rem; line-height: 2; }
/* メンバー */
.p-members { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.p-member .c-imgph { aspect-ratio: 3 / 4; }
.p-member__name { margin-top: 0.75rem; font-weight: 700; }
.p-member__role { font-size: 0.8125rem; color: var(--c-accent); }


/* =====================================================================
   Project - p-worklist（制作実績一覧：Support / Spot）
   ===================================================================== */
.p-worklist__group { margin-bottom: 4rem; }
.p-worklist__group:last-child { margin-bottom: 0; }
.p-worklist__gtitle { font-size: 1.25rem; font-weight: 700; color: var(--c-black); margin-bottom: 1.5rem; }
.p-worklist__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; }
.p-work2__img .c-imgph { aspect-ratio: 3 / 2; }
.p-work2__name { margin-top: 0.75rem; font-size: 0.9375rem; font-weight: 500; }
.p-work2__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.p-work2__tags li { font-size: 0.6875rem; padding: 0.15rem 0.75rem; border: 1px solid var(--c-accent); color: var(--c-accent); border-radius: 999px; }


/* =====================================================================
   Project - p-warchive（施工事例アーカイブ：カード一覧）
   ===================================================================== */
/* グリッド：PC3列（タブ2列・SP1列はレスポンシブ側で指定） */
.p-warchive__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; }
/* カード本体（記事リンク） */
.p-warchive__item { display: block; color: inherit; }
.p-warchive__item:hover { opacity: 1; }
.p-warchive__item:hover .p-warchive__img { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); }
/* サムネイル枠 */
.p-warchive__img { border-radius: 4px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; }
.p-warchive__img .c-imgph { aspect-ratio: 3 / 2; }
/* 写真が入ったら枠いっぱいに表示 */
.p-warchive__img .c-imgph img { width: 100%; height: 100%; object-fit: cover; }
/* 会社名 */
.p-warchive__name { margin-top: 0.75rem; font-size: 0.9375rem; font-weight: 500; }
/* タグpill */
.p-warchive__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.p-warchive__tags li { font-size: 0.6875rem; padding: 0.15rem 0.75rem; border: 1px solid var(--c-accent); color: var(--c-accent); border-radius: 999px; }
/* MOREボタン配置（中央寄せ） */
.p-warchive__more { text-align: center; margin-top: 3.5rem; }
.p-warchive__head {
   font-size: 2.5rem;
   font-weight: bold;
   margin-bottom: 2rem;
}
.p-warchive__block:nth-child(2) {
   margin-top: 6rem;
}
@media (max-width: 768px) {
   .p-warchive__head {
   font-size: 2rem;
   }
   .p-warchive__grid {
      grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
   .p-warchive__grid {
      grid-template-columns:1fr;
  }
}

/* =====================================================================
   Project - p-article（News記事 / 制作実績の詳細）
   ===================================================================== */
.p-article { max-width: 1000px; margin-inline: auto; }
.p-article__date { font-size: 0.8125rem; color: #888888; letter-spacing: 0.06em; }
.p-article__title { font-size: 2rem; font-weight: 700; line-height: 1.5; color: var(--c-black); margin: 0.5rem 0 2rem; }
.p-article__lead { font-size: 0.9375rem; line-height: 2; margin-bottom: 1.5rem; }
.p-article__img { margin: 2rem 0; }
.p-article__index { background: #f7f7f7; border-radius: 6px; padding: 1.5rem 2rem; margin-bottom: 2.5rem; }
.p-article__index li { font-size: 1rem; line-height: 2; }
.p-article__index a { color: var(--c-accent); }
.p-article__h { font-size: 1.125rem; font-weight: 700; color: var(--c-black); margin: 2.5rem 0 1rem; padding-left: 0.75rem; border-left: 3px solid var(--c-accent); }
.p-article__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 1.5rem 0; }
.p-article__grid .c-imgph { aspect-ratio: 4 / 3; }
.p-article__embed { aspect-ratio: 16 / 9; background: #ececec; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #999999; font-size: 1rem; margin: 1.5rem 0; }
.p-article__back { text-align: center; margin-top: 3rem; }
.p-article__body h2 {
font-size:1.75rem;
font-weight:bold;
padding:1rem 0;
margin:2.25rem 0 1.5rem 0; 
}
.p-article__body h3 {
font-size:1.5rem;
font-weight:bold;
padding:1rem 0;
border-bottom:1px solid #000;
margin:1.5rem 0 2rem; 
}
.p-article__body p {
margin:1.5rem 0; 
}
.p-article__body img {
margin:1.5rem 0; 
display:block;
}

/* =====================================================================
   Project - p-legal（プライバシーポリシー）
   ===================================================================== */
.p-legal { max-width: 1100px; margin-inline: auto; }
.p-legal__intro { font-size: 0.9375rem; line-height: 2; margin-bottom: 2.5rem; }
.p-legal__art { margin-bottom: 2.5rem; }
.p-legal__art-title { font-size: 1.125rem; font-weight: 700; color: var(--c-black); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--c-line); }
.p-legal__art p { font-size: 0.9375rem; line-height: 2; margin-bottom: 0.75rem; }
.p-legal__ol { padding-left: 1.5rem; }
.p-legal__ol > li { list-style: decimal; font-size: 0.9375rem; line-height: 1.9; margin-bottom: 0.5rem; }
.p-legal__ol .p-legal__ol { margin-top: 0.5rem; }
.p-legal__contact { margin-top: 1rem; font-size: 0.9375rem; line-height: 2; }


/* =====================================================================
   Project - p-contact / p-access
   ===================================================================== */
.p-contact { max-width: 800px; margin-inline: auto; }
.p-contact__lead { font-size: 0.9375rem; line-height: 2.2; margin-bottom: 2.5rem; }
.p-contact__time { font-size: 1rem; margin-bottom: 0.25rem; }
.p-contact__mail { font-size: 1.125rem; font-weight: 700; letter-spacing: 0.05em; color: var(--c-accent); margin: 0.25rem 0 2rem; }


/* =====================================================================
   Project - p-about（私たちについて）
   ===================================================================== */
.p-about__secttl { font-size:2.25rem; font-weight: 700; color: var(--c-black); margin-bottom: 2rem; }

/* 導入：左キャッチ / 右テキスト */
.p-about__intro {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 3rem 4rem; align-items: center; margin-bottom: 8rem; }
.p-about__catch { font-size: 3.25rem; font-weight: 500; letter-spacing: 0.15em; color: var(--c-black); }
.p-about__intro-body p {
   font-size: 1.215rem;
   line-height: 2.5; margin-bottom: 2rem;
   letter-spacing: 1px;
}
@media (max-width: 768px) {
   .p-about__intro-body p {
      font-size: 1.125rem;
      line-height: 1.8;
      margin-bottom: 2rem;
      letter-spacing: 1px;
   }
   .p-about__intro_inr {
      padding: 0 !important;
   }


}


.p-about__intro-body p:last-child { margin-bottom: 0; }

/* Vision / Stance カード */
.p-about__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.p-about__card {
   background: url(../images/green_bg.jpg);
   background-size: cover;
   border-radius: 14px; padding: 1.5rem 2rem 4rem; }
.p-about__card-en { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 2rem; color: var(--c-accent); margin-bottom: 1.25rem; }
.p-about__card-ja { display: block; font-size: 2rem; font-weight: 700; color: var(--c-black); text-align: center;}
.p-about__card-sub { display: block; margin-top: 0.6rem; font-size: 0.8125rem; color: #5a6b67;    font-size: 1.125rem;
   text-align: center; }

/* 社名とロゴ（緑グラデ） */
.p-about__name { margin:10rem 0 0;background: linear-gradient(155deg, #b7e5c2 0%, #d2f0ec 55%, #dcf4f3 100%); }
.p-about__name .l-inner { padding-block: 5rem; }
.p-about__name-ttl { font-size:2.25rem; font-weight: 700; color: var(--c-black); margin-bottom: 2.5rem; }
.p-about__name-grid {     align-items: center;display: grid; grid-template-columns: 1fr 1.3fr; gap: 3rem; }
.p-about__name-logo { 
   max-width: 20rem;
 }
.p-about__name-sub { font-size: 0.8125rem; color: #5a6b67; letter-spacing: 0.12em; margin-top: 0.25rem; }
.p-about__name-body p { font-size: 1.125rem; line-height: 1.95; margin-bottom: 1rem; }
.p-about__name-body p:last-child { margin-bottom: 0; }

/* ごあいさつ */
.p-about__greeting { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: start; }
.p-about__greeting-body p {font-size: 1rem;
   line-height: 2;
   letter-spacing: 1px;margin-bottom: 1.5rem; }
.p-about__profile-img .c-imgph { }
.p-about__profile-role { margin-top: 1rem; font-weight: 700; font-size: 0.9375rem; color: var(--c-black); }
.p-about__profile-bio { margin-top: 0.75rem; font-size: 0.75rem; line-height: 1.8; color: #666666; }

/* 会社概要 */
.p-about__photo { margin-bottom: 2.5rem; }
.p-about__photo .c-imgph { aspect-ratio: 21 / 7; }
.c-deftable { width: 100%; border-collapse: collapse; }
.c-deftable th, .c-deftable td { text-align: left; vertical-align: top; padding: 1.1rem 0; border-bottom: 1px solid var(--c-line); font-size: 1rem; line-height: 1.8; }
.c-deftable th { width: 160px; font-weight: 700; color: var(--c-black); }
.c-deftable td { font-weight: 400; color: var(--c-text); }
.c-deftable a { color: var(--c-accent); }

.p-sec_inr {
   padding:4rem 3rem;
   border-radius: 20px 20px;
   border: 1px solid #ccc;
}
@media (max-width: 768px) {
   .p-sec_inr {
      padding:4rem 2rem;
   }
}


/* =====================================================================
   Utility
   ===================================================================== */
.u-hidden { display: none !important; }


/* =====================================================================
   レスポンシブ（SP: 768px以下）
   ===================================================================== */
@media (max-width: 768px) {
  :root { --header-h: 60px; --side-gutter: 16px; }

  /* グローバルナビ → ハンバーガー */
  .c-gnav__toggle { display: block; width: 28px; height: 20px; position: relative; background: none; border: none; cursor: pointer; }
  .c-gnav__list {
    position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--c-mint); padding: 1rem var(--side-gutter); transform: translateY(-120%); transition: transform 0.3s ease;
  }
  .c-gnav.is-open .c-gnav__list { transform: translateY(0); }
  .c-gnav__item { width: 100%; border-bottom: 1px solid rgba(0,0,0,0.06); }
  .c-gnav__link { display: block; padding: 1rem 0; }

  /* 見出しエリア */
  .c-pagehead__inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .c-pagehead__en { font-size: 2.75rem; }
  .c-secthead__en { font-size: 2.25rem; }

  /* TOP */
  .p-top__hero { height: 80vh; }
  .p-top__catch { font-size: 2.75rem; }
  .p-top__about .l-inner { grid-template-columns: 1fr; gap: 2rem; }
  .p-card { grid-template-columns: 1fr; gap: 1rem; padding: 1.75rem; }
  .p-card__img { width: 100%; }
  .p-card__arrow { display: none; }
  .p-top__works-grid { grid-template-columns: 1fr; }
  .p-top__blog-grid { grid-template-columns: 1fr; }
.p-top__catch_pos {
   position: relative;
   left: auto;
   bottom: auto;
}
.p-top__hero {
   align-items: center;
   justify-content: center;
}

  /* 下層 */
  .p-case__mosaic, .p-svc-grid, .p-article__grid { grid-template-columns: repeat(2, 1fr); }
  .p-recruit__media { grid-template-columns: 1fr; }
  .p-skillbox__row, .p-work-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .p-members, .p-worklist__grid { grid-template-columns: repeat(2, 1fr); }
  .l-cta__cards { grid-template-columns: 1fr; }
  .l-footer__inner { flex-direction: column; gap: 2rem; padding: 0 1rem 4rem;}


  /* About */
  .p-about__intro, .p-about__cards, .p-about__name-grid, .p-about__greeting { grid-template-columns: 1fr; gap: 2rem; }
  .p-about__catch { font-size: 2rem; }
  .c-deftable th { width: 110px; }

  .p-case__mosaic {
   grid-template-columns: 1fr;
   }
   .p-svc-grid {
      grid-template-columns: 1fr;
   }
}


/* --- カテゴリーフィルター --- */
.c-filter {
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;
   margin-bottom: 2.5rem;
 }
 .c-filter__btn {
   font-size: 0.8125rem;
   padding: 0.4rem 1.25rem;
   border: 1px solid var(--c-accent);
   border-radius: 999px;
   background: transparent;
   color: var(--c-accent);
   cursor: pointer;
   font-family: inherit;
   transition: background 0.2s, color 0.2s;
 }
 .c-filter__btn:hover { background: rgba(0, 0, 0, 0.04); }
 .c-filter__btn.is-active {            /* 選択中 */
   background: var(--c-accent);
   color: #fff;
 }
 .p-blog.is-hidden { display: none; }  /* 絞り込みで隠すカード */


 .c-filter__btn {
   display: inline-block;       /* a要素用 */
   text-decoration: none;       /* 下線消す */
   font-size: 0.8125rem;
   padding: 0.4rem 1.25rem;
   border: 1px solid var(--c-accent);
   border-radius: 999px;
   background: transparent;
   color: var(--c-accent);
   cursor: pointer;
   font-family: inherit;
   transition: background 0.2s, color 0.2s;
 }
 .c-filter__btn:hover { background: rgba(0, 0, 0, 0.04); }
 .c-filter__btn.is-active {
   background: var(--c-accent);
   color: #fff;
 }
 


 /* =====================================================================
   レスポンシブ（SP: 640px以下）
   ===================================================================== */
@media (max-width: 640px) {

 .p-top__catch { font-size: 2rem; }

}