@charset "UTF-8";
/* =========================================================
   NEW MADE  ブロック用の調整
   本文は WordPress の標準ブロックで組んでいるので、元サイトの HTML と違うところ
   （ボタン・表・画像・見出しの包み方など）をここで元の見た目に合わせる。
   base.css（元サイトの style.css）の後に読み込む
   ========================================================= */

/* ---------- ブロック標準の余白・見た目を消す ---------- */
h1,h3{margin:0}
.wp-block-image{margin:0}
.wp-block-image img{height:auto}
.wp-block-table{margin:0;overflow:visible}
.wp-block-table table{width:100%;border-collapse:collapse}
.wp-block-table td,.wp-block-table th{border:0;padding:0;word-break:normal}
.wp-block-buttons{display:flex;flex-wrap:wrap}
.wp-block-button__link{border-radius:0;box-shadow:none;text-decoration:none}
.wp-block-list{list-style:none;margin:0;padding:0}

/* ---------- セクションの見出し（英語の見出し＋日本語の段落） ---------- */
.section-head{
  padding-inline:var(--gutter);
  margin-bottom:clamp(36px,5.5vw,110px);
}
.section-head .section-title{padding-inline:0;margin-bottom:0}
.section-head.is-center{text-align:center}
.section-head.is-center .section-title{font-size:clamp(22px,2.9vw,58px)}
.creation .section-head,.archive .section-head{margin-bottom:clamp(18px,2.75vw,55px)}
.contact .section-head{margin-bottom:clamp(24px,2.6vw,52px)}

/* ---------- CREATION：カード全体を押せるようにする（「詳しく見る」のリンクを広げる） ---------- */
.creation-item{position:relative}
.creation-more a::after{content:"";position:absolute;inset:0;z-index:1}
.creation-item:hover .creation-img img{transform:scale(1.04)}
.creation-item:hover .creation-more,.creation-item:focus-within .creation-more{text-decoration-color:transparent}
.creation-more a{text-decoration:inherit}
.creation-label > p{margin:0}
/* PC 用（縦長）と SP 用（正方形）の写真を出し分ける */
.creation-img.is-sp{display:none}
@media (max-width:720px){
  .creation-img.is-pc{display:none}
  .creation-img.is-sp{display:block}
}
.creation-img img{width:100%;height:100%}

/* ---------- お問い合わせボタン（黒地に白文字。事業ページ・トップの CONTACT は白地に黒の線） ---------- */
/* base.css の .cta-btn は外側（ボタンブロックの枠）にも当たるので打ち消し、中のリンクに付け直す */
.wp-block-button.cta-btn{display:block;padding:0;border:0;background:none;gap:0}
.cta-btn .wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;gap:.8em;
  padding:1.15em 2.2em;
  background:var(--ink);color:var(--paper);
  font-family:var(--font-ja);font-weight:500;
  font-size:clamp(13px,1vw,18px);letter-spacing:.08em;line-height:1;
}
.cta-btn .wp-block-button__link::after{content:"\2192";display:inline-block;transition:transform .4s ease}
.cta-btn .wp-block-button__link:hover::after,.cta-btn .wp-block-button__link:focus-visible::after{transform:translateX(.25em)}
.cta-btn .wp-block-button__link:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.page-cta,.contact-cta{justify-content:center}
.page-cta .cta-btn .wp-block-button__link,.contact-cta .cta-btn .wp-block-button__link{
  background:transparent;color:var(--ink);border:1px solid var(--ink);
  transition:background-color .35s ease,color .35s ease;
}
.page-cta .cta-btn .wp-block-button__link:hover,.page-cta .cta-btn .wp-block-button__link:focus-visible,
.contact-cta .cta-btn .wp-block-button__link:hover,.contact-cta .cta-btn .wp-block-button__link:focus-visible{background:var(--ink);color:var(--paper)}
@media (max-width:720px){
  .page-cta .cta-btn,.contact-cta .cta-btn,
  .page-cta .cta-btn .wp-block-button__link,.contact-cta .cta-btn .wp-block-button__link{width:100%}
}

/* ---------- COMPANY：表ブロックを「項目名｜内容」の2列に ---------- */
.company-list table,.company-list tbody{display:block}
.company-list tr{display:grid;grid-template-columns:clamp(72px,8vw,160px) 1fr;gap:1em}
.company-list.is-en tr{grid-template-columns:clamp(84px,10vw,210px) 1fr;gap:.6em}
.company-list td a:hover{text-decoration:underline}

/* ---------- NEXT（次の CREATION へ）：行全体を押せるようにする ---------- */
.page-next-link{position:relative}
.page-next-title a::after{content:"";position:absolute;inset:0}
.page-next-title::after{content:"\2192";display:inline-block;margin-left:.3em;font-size:.8em;transition:transform .4s ease}
.page-next-link:hover .page-next-title::after,.page-next-link:focus-within .page-next-title::after{transform:translateX(.25em)}

/* ---------- 黒いボタン（送信完了ページの TOP） ---------- */
.wp-block-button.btn-black{display:block;margin:0;padding:0;width:auto;height:auto;background:none;border:0}
.wp-block-buttons:has(> .btn-black){justify-content:center}
.btn-black .wp-block-button__link{
  display:flex;align-items:center;justify-content:center;
  width:clamp(160px,15vw,240px);height:clamp(48px,4vw,64px);padding:0;
  font:inherit;font-weight:700;font-size:clamp(16px,1.4vw,22px);letter-spacing:.02em;
  color:#fff;background:var(--ink);border:1px solid var(--ink);
  transition:background-color .3s,color .3s;
}
.btn-black .wp-block-button__link:hover,.btn-black .wp-block-button__link:focus-visible{background:var(--paper);color:var(--ink)}
.thanks-page .wp-block-buttons{margin-top:clamp(48px,6vw,110px)}
.thanks-page .btn-black .wp-block-button__link{width:clamp(180px,19vw,320px);height:clamp(52px,5.4vw,88px);font-size:clamp(18px,1.9vw,30px)}

/* ---------- WEB DESIGN：SERVICE の行 ---------- */
.web-service-list .web-service-item{
  display:grid;grid-template-columns:clamp(48px,8vw,160px) minmax(0,1fr) minmax(0,1fr);
  align-items:baseline;gap:clamp(12px,2vw,40px);
  padding:clamp(20px,2.4vw,44px) 0;
  border-bottom:1px solid rgba(13,13,13,.12);
}
@media (max-width:720px){
  .web-service-list .web-service-item{grid-template-columns:40px minmax(0,1fr)}
  .web-service-list .web-service-item > p:last-child{grid-column:2}
}
/* WEB DESIGN：中央の言葉の見出し（h1）は、まわりの文字の大きさに合わせる */
.web-gallery-copy .web-gallery-heading{font:inherit;margin:0}
.web-gallery-copy > p{margin:0}

/* ---------- 事業ページ：JS が動かない時（工程・対応可能アイテムは標準の開閉のまま） ---------- */
.oo-step > summary,.oo-items > summary{cursor:pointer;list-style:none}
.oo-step > summary::-webkit-details-marker,.oo-items > summary::-webkit-details-marker{display:none}
.oo-crumb{display:block;word-spacing:.35em}
.oo-crumb a{word-spacing:normal}

/* ---------- NEWS ---------- */
.news-crumb{display:block;word-spacing:.35em}
.news-crumb a{word-spacing:normal}
.news-page .section-head{padding-inline:0}
.news-list a:hover,.news-list a:focus-visible{text-decoration:underline;text-underline-offset:.3em}
.news-empty{font-family:var(--font-ja);font-size:14px;color:#666}
.news-pager{margin-top:clamp(24px,2.4vw,40px)}
.news-pager .nav-links{display:flex;gap:1em;justify-content:center;font-size:14px}
.news-pager .current{text-decoration:underline;text-underline-offset:.3em}
/* 記事ページ */
.news-single-title{
  font-family:var(--font-ja);font-weight:500;
  font-size:clamp(20px,2vw,36px);line-height:1.5;letter-spacing:.02em;
}
.news-body{
  margin-top:clamp(28px,3vw,56px);padding-top:clamp(28px,3vw,56px);
  border-top:1px solid rgba(13,13,13,.12);
  font-family:var(--font-ja);font-size:clamp(14px,1.05vw,18px);line-height:2;letter-spacing:.03em;
}
.news-body > * + *{margin-top:1.4em}
.news-body a{text-decoration:underline;text-underline-offset:.2em}
.news-body .wp-block-image img{width:100%}
.news-back{margin-top:clamp(40px,4vw,80px);font-size:13px;font-weight:700;letter-spacing:.1em}
.news-back a:hover{text-decoration:underline;text-underline-offset:.3em}

/* 「詳細」ブロックの見出し（工程名など）：JS が動かない時・編集画面でも工程らしく見せる */
.oo-step > summary{
  padding:clamp(18px,2.1vw,42px) 0;
  font-weight:500;font-size:clamp(20px,2.1vw,40px);line-height:1;letter-spacing:-.01em;
}
.oo-items > summary{
  padding:clamp(14px,1.4vw,26px) 0;
  font-size:clamp(15px,1.25vw,24px);font-weight:500;letter-spacing:.04em;
}
details.oo-items{
  margin-top:clamp(24px,2.6vw,52px);
  border-top:1px solid rgba(13,13,13,.12);border-bottom:1px solid rgba(13,13,13,.12);
}

/* 工程は PC もクリックで開くので、PC にも操作の案内（CLICK）を出す。文言は oneofone.js が切り替える */
.oo.is-hover .oo-hint-tap{display:flex}