@charset "UTF-8";
/* ===========================================================
   GOODSTYLE — goodportfol.io 風リデザイン（style.css / utility.css の上書き）
   元に戻す場合は header.php の goodstyle.css の <link> を削除するだけでOK
   =========================================================== */

:root {
  --gs-yellow: #FFF200;
  --gs-black:  #111;
  --gs-pink:   #FF3D9E;
  --gs-radius: 28px;
  --gs-display: "Dela Gothic One", "M PLUS 2", sans-serif;
}


/* ---------- 1. BASE ---------- */
body                 { background-color: var(--gs-yellow); color: var(--gs-black); }
a                    { color: inherit; }
::selection          { background: var(--gs-black); color: var(--gs-yellow); }
main a:focus-visible,
.globalNav a:focus-visible,
.footerGroup__navWrap a:focus-visible,
.btn:focus-visible   { outline: 2px solid var(--gs-black); outline-offset: 3px; }

.font-stk            { font-family: var(--gs-display); font-weight: 400; color: var(--gs-black); letter-spacing: -0.01em; line-height: 1.1; font-size: clamp(3.2rem, 7vw, 8rem); margin: 56px 0 20px; }
.base_wrap_des       { color: var(--gs-black); font-weight: 500; }

/* 白いカード面（詳細ページ・固定ページ） */
.bg_white            { border-radius: var(--gs-radius); }
.base_wrap.bg_white  { margin-top: 8px; }
.breadcrumbs,
.breadcrumbs a       { color: #666; }
.breadcrumbs a:hover { color: var(--gs-black); }

/* ボタン */
.btn                 { border: 2px solid var(--gs-black); background-color: var(--gs-black); color: #fff; border-radius: 999px; font-weight: 700; }
.btn:hover           { background-color: #fff; color: var(--gs-black); box-shadow: none; transform: translateY(-2px); }


/* ---------- 2. LOADING ---------- */
#loading             { background-color: var(--gs-black); }


/* ---------- 3. HEADER ---------- */
.headerGroup         { background: transparent; border-bottom: 0; padding: 0; }
.headerGroup .tagLine{ display: none; }
.header_baseWrap     { max-width: 100%; display: flex; align-items: center; gap: 12px 32px; padding: 18px 24px 0 24px; position: relative; padding-right: 170px; }
.headerGroup__logo   { max-width: 150px; margin: 0; }

.globalNav           { width: auto; margin: 0 0 0 auto; font-family: inherit; letter-spacing: 0.04em; }
.globalNav ul        { gap: 8px 28px; }
.globalNav li        { font-size: 1.4rem; font-weight: 700; }
.globalNav a         { color: var(--gs-black); padding: 0; }
.globalNav a::after  { content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 2px; background: var(--gs-black); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
.globalNav li a::before { content: "– "; }
.globalNav a:hover,
.globalNav a:focus-visible { color: var(--gs-black); }
.globalNav a:hover::after,
.globalNav a:focus-visible::after { transform: scaleX(1); }

/* 右上の黒タブ（CONTACT） */
.globalNav li:last-child a        { position: absolute; top: 0; right: 0; display: block; padding: 20px 32px; background: var(--gs-black); color: #fff; border-radius: 0 0 0 22px; text-decoration: none; }
.globalNav li:last-child a::before,
.globalNav li:last-child a::after { content: none; }
.globalNav li:last-child a:hover,
.globalNav li:last-child a:focus-visible { background: #333; color: #fff; text-decoration: none; }

.headerGroup__snsWrap{ position: static; max-width: none; width: auto; margin: 0; gap: 14px; }
.headerGroup__snsWrap a { opacity: 1; }

/* ハンバーガー・ドロワー */
.hamburger           { background-color: var(--gs-black); border: 0; box-shadow: none; }
.hamburger span      { background: #fff; }
nav.globalMenuSp     { background: var(--gs-yellow); color: var(--gs-black); border-radius: 0 var(--gs-radius) var(--gs-radius) 0; }
nav.globalMenuSp ul li       { color: var(--gs-black); border-bottom: 2px solid rgba(0, 0, 0, 0.12); }
nav.globalMenuSp ul li:hover { background: rgba(0, 0, 0, 0.06); }
nav.globalMenuSp ul li a     { color: var(--gs-black); font-family: var(--gs-display); font-size: 1.8rem; padding: 22px 24px; text-align: left; }


/* ---------- 4. HERO（トップページ） ---------- */
.heroTitle            { text-align: center; padding: 8px 16px 36px; overflow: hidden; }
.heroTitle__wordmark  { font-family: var(--gs-display); font-weight: 400; font-size: clamp(2.8rem, 8.6vw, 15rem); line-height: 1.05; letter-spacing: -0.02em; white-space: nowrap; color: var(--gs-black); margin: 0 0 8px; text-align: center; }
.heroTitle__kana      { text-align: center; font-weight: 700; font-size: clamp(1.1rem, 1.3vw, 1.4rem); letter-spacing: 0.3em; text-indent: 0.3em; margin: 0 0 18px; }
.heroTitle__lead      { text-align: center; font-weight: 700; font-size: clamp(1.4rem, 2vw, 2.2rem); margin: 0; letter-spacing: 0.06em; }


/* ---------- 5. WORKS カード ---------- */
/* 画面幅いっぱいに使う（参考サイト同様、左右の余白は最小限） */
.base_wrapNew           { max-width: none; padding: 0 8px 80px; }
.works_cardWrapNew      { gap: 8px; }
.works_cardWrapNew,
.topBlog__list,
.blogIndex__list        { max-width: none; width: 100%; }
.blogIndex__list        { margin-left: 0; margin-right: 0; }
.base_wrap.bg_white     { max-width: none; width: calc(100% - 16px); }
@media screen and (min-width: 1700px) {
  .works_cardWrapNew    { grid-template-columns: repeat(4, 1fr); }
}

.works_card--listNew    { position: relative; background: #fff; border-radius: var(--gs-radius); padding: 12px 12px 28px; transition: transform 0.3s ease; }
.works_card--listNew:hover { transform: translateY(-4px); }
.works_card--listNew .imgWrap { position: static; border: 0; border-radius: 18px; margin-bottom: 20px; }
.works_card--listNew > a      { order: 1; padding: 0 14px; }
h3.works_card--list--title    { font-size: clamp(1.8rem, 2vw, 2.4rem); font-weight: 500; line-height: 1.4; margin: 0 0 6px; padding: 0; color: var(--gs-black); }
.works_card--listDay          { order: 2; padding: 0 14px; font-size: 1.2rem; color: #777; margin-bottom: 14px; }
.works_card--listNew ul.post-categories { order: 3; padding: 0 14px; margin: 0; gap: 8px; color: #333; }

/* タグ（アウトラインのピル） */
ul.post-categories li           { opacity: 1; }
ul.post-categories li::before   { content: none; }
ul.post-categories li a         { display: inline-block; padding: 5px 13px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 999px; font-size: 1.2rem; line-height: 1.4; color: #333; transition: background 0.2s ease, border-color 0.2s ease; }
ul.post-categories li a:hover   { background: var(--gs-yellow); border-color: var(--gs-black); }

/* NEW バッジ（ピンクの丸） */
.blogIndex__new,
.works_card--listNew .imgWrap .blogIndex__new { position: absolute; top: 4px; left: 4px; z-index: 3; width: 56px; height: 56px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--gs-pink); color: #fff; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.04em; transform: rotate(-10deg); pointer-events: none; }

/* カテゴリー絞り込み（タグボタン風） */
.blogIndex__terms ul   { gap: 8px 10px; }
.blogIndex__term       { padding: 8px 18px; color: var(--gs-black); background: #fff; border: 2px solid var(--gs-black); font-weight: 700; }
.blogIndex__term:hover { background: var(--gs-black); color: #fff; border-color: var(--gs-black); transform: translateY(-1px); }
.blogIndex__term.is-current { background: var(--gs-black); color: #fff; border-color: var(--gs-black); }
.blogIndex__term-count { color: inherit; opacity: 0.6; }
.blogIndex__term.is-current .blogIndex__term-count { color: #fff; }


/* ---------- 6. トップスライダー ---------- */
.works_topSlider__link       { border-radius: var(--gs-radius); background: #fff; }
.works_topSlider__caption    { padding: 28px 36px; }
.works_topSlider .slick-dots li button            { background: rgba(0, 0, 0, 0.25); }
.works_topSlider .slick-dots li.slick-active button { background: var(--gs-black); }
.works_topSlider .slick-prev,
.works_topSlider .slick-next { background: #fff; box-shadow: none; }
.works_topSlider .slick-prev:before,
.works_topSlider .slick-next:before { border-color: var(--gs-black); }


/* ---------- 7. BLOG（トップ・一覧） ---------- */
.topBlog__list,
.blogIndex__list        { gap: 8px; }
.topBlog__item,
.blogIndex__card        { background: #fff; border-radius: var(--gs-radius); padding: 12px 12px 26px; position: relative; }
.topBlog__link,
.blogIndex__link        { padding: 0; }
.topBlog__imgWrap,
.blogIndex__imgWrap     { border-radius: 18px; margin-bottom: 18px; }
.blogIndex__imgWrap     { position: static; }
.blogIndex__imgWrap img,
.topBlog__imgWrap img   { border-radius: 18px; }
.topBlog__meta,
.blogIndex__meta        { padding: 0 14px; }
.topBlog__title,
.blogIndex__title       { padding: 0 14px; color: var(--gs-black); font-size: clamp(1.6rem, 1.8vw, 2rem); }
.topBlog__link:hover .topBlog__title,
.blogIndex__link:hover .blogIndex__title { color: var(--gs-black); text-decoration: underline; text-underline-offset: 4px; }
.topBlog__cat,
.blogIndex__cat         { background: transparent; color: #333; border: 1px solid rgba(0, 0, 0, 0.12); }
.topBlog .base_wrap_des,
.blogIndex .base_wrap_des { color: var(--gs-black); }


/* ---------- 8. FORM / PAGINATION / POST NAV ---------- */
.required                  { color: var(--gs-pink); font-weight: 700; }
input.btn_confirm          { background-color: var(--gs-black); border-color: var(--gs-black); border-radius: 999px; }
input.btn_confirm:hover    { background-color: #fff; color: var(--gs-black); }
button.btn_return          { border-radius: 999px; }

span.page-numbers.current,
a.page-numbers             { border: 2px solid var(--gs-black); border-radius: 999px; padding: 8px 16px; font-weight: 700; background: #fff; }
span.page-numbers.current  { background: var(--gs-black); color: #fff; }
a.page-numbers:hover       { background: var(--gs-black); color: #fff; }

.postNav__item             { border: 0; border-radius: var(--gs-radius); background: #fff; }
.postNav__item:hover       { box-shadow: none; transform: translateY(-3px); }
.postNav__item--index      { background: var(--gs-black); color: #fff; font-family: inherit; }
.postNav__item--index:hover{ background: #333; }
.postNav__label            { color: var(--gs-black); font-family: inherit; font-weight: 700; }
.postNav__item.is-disabled { background: rgba(255, 255, 255, 0.5); }

/* LINE相談CTA（お問い合わせページ） */
.contactCta                { background: var(--gs-yellow); border-radius: var(--gs-radius); }
.contactCta__text          { color: var(--gs-black); }
.contactCta__btn           { background: #fff; color: var(--gs-black); border-color: var(--gs-black); }
.contactCta__btn:hover     { background: var(--gs-black); color: #fff; }
.contactCta__btn--line     { background: #06C755; border-color: #06C755; color: #fff; }
.contactCta__btn--line:hover { background: #fff; color: #06C755; box-shadow: none; }


/* ---------- 9. FOOTER ---------- */
.footerGroup               { border-top: 2px solid var(--gs-black); max-width: none; margin-top: 40px; }
.footerGroup__navWrap      { font-family: var(--gs-display); }
.footerGroup__navWrap a    { color: var(--gs-black); }
.footerGroup__navWrap a       { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color 0.2s ease; }
.footerGroup__navWrap a:hover { color: var(--gs-black); text-decoration-color: var(--gs-black); }
.footerGroup__snsWrap a    { opacity: 1; }
.footerGroup__policyWrap,
.footerGroup__policyWrap a,
.copyRight,
footer address p           { color: var(--gs-black); }
.footerGroup__policyWrap span { color: rgba(0, 0, 0, 0.35); }


/* ---------- 10. RESPONSIVE ---------- */
@media screen and (max-width: 820px) {
  .header_baseWrap          { padding: 14px 64px 0 16px; }
  .headerGroup__logo        { max-width: 130px; }
  .font-stk                 { margin: 36px 0 14px; }
  .works_cardWrapNew        { gap: 6px; }
  .works_card--listNew      { border-radius: 22px; padding: 8px 8px 20px; }
  .works_card--listNew .imgWrap { border-radius: 14px; margin-bottom: 14px; }
  .works_card--listNew > a,
  .works_card--listDay,
  .works_card--listNew ul.post-categories { padding: 0 8px; }
  h3.works_card--list--title { font-size: 1.5rem; }
  ul.post-categories li a   { padding: 3px 9px; font-size: 1.1rem; }
  .blogIndex__new,
  .works_card--listNew .imgWrap .blogIndex__new { width: 44px; height: 44px; font-size: 1rem; }
  .topBlog__item,
  .blogIndex__card          { border-radius: 22px; padding: 8px 8px 20px; }
  .works_topSlider__link    { border-radius: 22px; }
  .bg_white                 { border-radius: 22px; }
  .footerGroup              { padding-left: 16px; padding-right: 16px; }
}

@media screen and (max-width: 500px) {
  .heroTitle                { padding-bottom: 24px; }
  .base_wrap.bg_white       { width: calc(100% - 12px); }
  .base_wrapNew             { padding: 0 6px 56px; }
  .works_card--listNew      { padding: 6px 6px 16px; border-radius: 18px; }
  .works_card--listNew .imgWrap { border-radius: 12px; }
  .blogIndex__new,
  .works_card--listNew .imgWrap .blogIndex__new { width: 38px; height: 38px; font-size: 0.9rem; top: 2px; left: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .works_card--listNew,
  .postNav__item,
  .btn                      { transition: none; }
}