JIN:R風【事務所向け】

JIN:R DEMO 15｜あなたの安心を陰で支えるパートナーでありたい

ABOUT US仁田法律事務所について 「カフェに訪れるような気軽さで、抱えている悩みを相談できる法律事務所を作りたい。」 弁護士への法律相談といえば重々しい話題のように捉えられがちですが、私たちはそういった常識を変えていきたい。そうやって

jinr-demo.jp

上記のデザインをCocoonで再現していました（笑）

以下からデータをコピーし、そのまま「段落」ブロックに貼り付けます。

<!-- wp:group {"metadata":{"name":"ABOUT US"},"style":{"spacing":{"padding":{"bottom":"30px"}}},"layout":{"type":"constrained","contentSize":"100%"}} -->
<div class="wp-block-group" style="padding-bottom:30px"><!-- wp:group {"metadata":{"name":"見出し"},"className":"hvn-h2","layout":{"type":"constrained"}} -->
<div class="wp-block-group hvn-h2"><!-- wp:paragraph -->
<p>[icon class="fas fa-balance-scale hvn-icon"]</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"hvn-description"} -->
<p class="hvn-description">ABOUT US</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"h2"} -->
<p class="h2">明墨法律事務所について</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":37091,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://chuya.s239.xrea.com/temp/wp-content/uploads/2025/01/1735713159.png" alt="" class="wp-image-37091"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>私たちの法律事務所は、クライアントに寄り添い、最善の解決策を提案する「パートナー」として共に歩みます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>法律問題に対する不安を解消し、安心できる明確なアプローチを提供。<br>初回相談では丁寧にお話を伺い、一人ひとりに最適なサポートを心がけています。<br>裁判や交渉の場はもちろん、日常の不安にも対応。<br>どんな困難な状況でも希望を見出し、未来への道を切り開いていきます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>一人で抱え込まず、まずはお気軽にご相談ください。私たちがあなたの力になります。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:columns {"isStackedOnMobile":false} -->
<div class="wp-block-columns is-not-stacked-on-mobile"><!-- wp:column {"className":"hvn-menu"} -->
<div class="wp-block-column hvn-menu"><!-- wp:paragraph -->
<p><a href="#">不動産売買</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"className":"hvn-menu"} -->
<div class="wp-block-column hvn-menu"><!-- wp:paragraph -->
<p><a href="#">家族問題</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"className":"hvn-menu"} -->
<div class="wp-block-column hvn-menu"><!-- wp:paragraph -->
<p><a href="#">契約書作成</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:columns {"isStackedOnMobile":false} -->
<div class="wp-block-columns is-not-stacked-on-mobile"><!-- wp:column {"className":"hvn-menu"} -->
<div class="wp-block-column hvn-menu"><!-- wp:paragraph -->
<p><a href="#">債権回収</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"className":"hvn-menu"} -->
<div class="wp-block-column hvn-menu"><!-- wp:paragraph -->
<p><a href="#">交通事故</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"className":"hvn-menu"} -->
<div class="wp-block-column hvn-menu"><!-- wp:paragraph -->
<p><a href="#">トラブル対応</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"FEATURE"},"className":"wide","style":{"spacing":{"padding":{"top":"60px","bottom":"60px"}}},"layout":{"type":"constrained","contentSize":"1200px"}} -->
<div class="wp-block-group wide" style="padding-top:60px;padding-bottom:60px"><!-- wp:group {"metadata":{"name":"見出し"},"className":"hvn-h2","layout":{"type":"constrained"}} -->
<div class="wp-block-group hvn-h2"><!-- wp:paragraph -->
<p>[icon class="fas fa-book hvn-icon"]</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"hvn-description"} -->
<p class="hvn-description">FEATURE</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"h2"} -->
<p class="h2">明墨法律事務所が大切にしていること</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:columns {"isStackedOnMobile":false} -->
<div class="wp-block-columns is-not-stacked-on-mobile"><!-- wp:column {"className":"hvn-policy"} -->
<div class="wp-block-column hvn-policy"><!-- wp:paragraph {"className":"hvn-description"} -->
<p class="hvn-description">INTEGRITY</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"has-text-align-center","style":{"typography":{"textAlign":"center"}}} -->
<p class="has-text-align-center"><span class="bold"><span class="fz-20px">誠実</span></span></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>お客様の立場に立ち、真摯に向き合い、最適な解決策を提供します。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"className":"hvn-policy"} -->
<div class="wp-block-column hvn-policy"><!-- wp:paragraph {"className":"hvn-description"} -->
<p class="hvn-description">POLITENESS</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"has-text-align-center","style":{"typography":{"textAlign":"center"}}} -->
<p class="has-text-align-center"><span class="bold"><span class="fz-20px">丁寧</span></span></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>複雑な法律問題も、わかりやすく丁寧に説明し、お客様が安心して選べるようサポートします。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:columns {"isStackedOnMobile":false} -->
<div class="wp-block-columns is-not-stacked-on-mobile"><!-- wp:column {"className":"hvn-policy"} -->
<div class="wp-block-column hvn-policy"><!-- wp:paragraph {"className":"hvn-description"} -->
<p class="hvn-description">TRANSPARENCY</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"has-text-align-center","style":{"typography":{"textAlign":"center"}}} -->
<p class="has-text-align-center"><span class="bold"><span class="fz-20px">透明性</span></span></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>全ての過程をオープンにし、クライアントとの信頼関係を大切にします。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"className":"hvn-policy"} -->
<div class="wp-block-column hvn-policy"><!-- wp:paragraph {"className":"hvn-description"} -->
<p class="hvn-description">CLIENT-FIRST</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"has-text-align-center","style":{"typography":{"textAlign":"center"}}} -->
<p class="has-text-align-center"><span class="bold"><span class="fz-20px">お客様第一</span></span></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>一人ひとりの事情に合わせた親身な対応を心がけ、お客様の問題解決をサポートします。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"FLOW"},"style":{"spacing":{"padding":{"top":"30px","bottom":"30px"}}},"layout":{"type":"constrained","contentSize":"1200px"}} -->
<div class="wp-block-group" style="padding-top:30px;padding-bottom:30px"><!-- wp:group {"metadata":{"name":"見出し"},"className":"hvn-h2","style":{"spacing":{"padding":{"top":"30px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group hvn-h2" style="padding-top:30px"><!-- wp:paragraph {"className":"hvn-description"} -->
<p class="hvn-description">FLOW</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"h2"} -->
<p class="h2">ご利用の流れ</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:cocoon-blocks/timeline {"title":"","items":3,"className":"is-style-hvn-timeline-box"} -->
<div class="wp-block-cocoon-blocks-timeline timeline-box cf block-box not-nested-style cocoon-block-timeline is-style-hvn-timeline-box"><div class="timeline-title"></div><ul class="timeline"><!-- wp:cocoon-blocks/timeline-item {"title":"\u003cspan class=\u0022fz-20px\u0022\u003e相談のお申し込み\u003c/span\u003e"} -->
<li class="wp-block-cocoon-blocks-timeline-item timeline-item cf"><div class="timeline-item-label">ラベル</div><div class="timeline-item-content cf"><div class="timeline-item-title"><span class="fz-20px">相談のお申し込み</span></div><div class="timeline-item-snippet"><!-- wp:paragraph -->
<p>お電話（00-0000-0000）にてご相談の日時をご予約いただくか、<a href="#" target="_blank" rel="noreferrer noopener">相談受付フォーム</a>よりご相談希望日時をお知らせください。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ご相談内容を伺いましてご来所いただく日時を決めます。<br>初回相談は3,000円で、30分～1時間を目安にご相談をお受け致します。</p>
<!-- /wp:paragraph --></div></div></li>
<!-- /wp:cocoon-blocks/timeline-item -->

<!-- wp:cocoon-blocks/timeline-item {"title":"\u003cspan class=\u0022fz-20px\u0022\u003e面談を通じて解決策をご提案\u003c/span\u003e"} -->
<li class="wp-block-cocoon-blocks-timeline-item timeline-item cf"><div class="timeline-item-label">ラベル</div><div class="timeline-item-content cf"><div class="timeline-item-title"><span class="fz-20px">面談を通じて解決策をご提案</span></div><div class="timeline-item-snippet"><!-- wp:paragraph -->
<p>当事務所では、お客様にご来所いただき、面談形式で直接お話を伺いながら、問題解決に向けたアドバイスを提供いたします。お悩みや不安、疑問に思っていることについて、どんな小さなことでも気軽にお話しください。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>お客様の時間を大切にし、可能な限り時間をかけて、納得のいく解決策を見つけ出します。また、専門的な用語や法律の知識についても、わかりやすく丁寧に説明いたしますので、安心してご相談いただけます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>プライバシー保護を最優先に、相談内容が外部に漏れることは決してありません。信頼できる環境で、あなたの問題解決を全力でサポートいたします。</p>
<!-- /wp:paragraph --></div></div></li>
<!-- /wp:cocoon-blocks/timeline-item -->

<!-- wp:cocoon-blocks/timeline-item {"title":"\u003cspan class=\u0022fz-20px\u0022\u003e委任契約締結後に活動開始\u003c/span\u003e"} -->
<li class="wp-block-cocoon-blocks-timeline-item timeline-item cf"><div class="timeline-item-label">ラベル</div><div class="timeline-item-content cf"><div class="timeline-item-title"><span class="fz-20px">委任契約締結後に活動開始</span></div><div class="timeline-item-snippet"><!-- wp:paragraph -->
<p>当法律事務所に依頼を決定された場合、まず「委任契約」を結ばせていただきます。<br>委任契約が締結され、着手金をお支払いいただいた後に、解決に向けた活動を開始いたします。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>事件処理の進行状況については、随時ご報告いたします。<br>また、必要に応じて打ち合わせをさせていただくことがありますので、その際はご協力をお願い申し上げます。<br>お客様との密な連携を保ちながら、迅速かつ効果的に問題解決に取り組んでまいります。</p>
<!-- /wp:paragraph --></div></div></li>
<!-- /wp:cocoon-blocks/timeline-item --></ul></div>
<!-- /wp:cocoon-blocks/timeline --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"相談"},"className":"wide","layout":{"type":"constrained","contentSize":"1200px"}} -->
<div class="wp-block-group wide"><!-- wp:group {"metadata":{"name":"見出し"},"className":"hvn-h2","layout":{"type":"constrained"}} -->
<div class="wp-block-group hvn-h2"><!-- wp:paragraph {"className":"hvn-description"} -->
<p class="hvn-description">初回相談は3,000円です</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"h2"} -->
<p class="h2">些細なことでも遠慮なくご相談ください</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p>お悩みのこと、心配なこと、話すべきかわからないこと、何でも気兼ねなくお話しください。<br>時間の許す限りじっくりとお話をお伺いしまして、解決に向けて手段と方法をご提案いたします。</p>
<!-- /wp:paragraph -->

<!-- wp:cocoon-blocks/button-1 {"content":"ご相談のお申し込みに進む","url":"#","size":"btn-l","isCircle":true,"align":"center","customBackgroundColor":"#60a083","width":"50","className":"hvn-btn"} -->
<div class="wp-block-cocoon-blocks-button-1 aligncenter button-block hvn-btn" style="--cocoon-custom-background-color:#60a083"><a href="#" class="btn btn-l btn-circle has-background has-custom-width cocoon-block-button__width-50" target="_self" rel="noopener">ご相談のお申し込みに進む</a></div>
<!-- /wp:cocoon-blocks/button-1 --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"ADDRESS"},"style":{"spacing":{"padding":{"top":"60px"},"margin":{"bottom":"0px"}}},"layout":{"type":"constrained","contentSize":"1200px"}} -->
<div class="wp-block-group" style="margin-bottom:0px;padding-top:60px"><!-- wp:group {"metadata":{"name":"見出し"},"className":"hvn-h2","layout":{"type":"constrained"}} -->
<div class="wp-block-group hvn-h2"><!-- wp:paragraph -->
<p>[icon class="fas fa-map-marker-alt hvn-icon"]</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"hvn-description"} -->
<p class="hvn-description">ADDRESS</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"h2"} -->
<p class="h2">所在地</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:html -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6483.1450943003165!2d139.7285010968526!3d35.66290175715574!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b826ae3281d%3A0xf2a258ed2d09f4e!2z5YWt5pys5pyo6aeF!5e0!3m2!1sja!2sjp!4v1736311324359!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<!-- /wp:html --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>〒106-0000&nbsp;<br>東京都六本木</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>TEL／00-0000-0000　FAX／00-0000-0000<br>受付時間／平日 10：00〜18：00</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>駐車場／ビルテナント共有駐車場 （2台）<br>当事務所専用駐車場 （1台）</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:html {"metadata":{"name":"CSS"}} -->
<style data-wp-block-html="css">
/*******************************************************************************
**  全体
*******************************************************************************/
.entry-content {
  font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-style: normal;
  font-weight: 400;
}

:root {
  --body-color: #ffffff;
  --cocoon-text-color: #44633b;
  --icon-color: #60a083;
  --menu-color: #e6ece6;
}

.front-top-page .breadcrumb {
  display: none;
}

@media (width <= 480px) {
  .body .btn {
    width: 100%;
  }
}

/*******************************************************************************
**  見出しH2
*******************************************************************************/

/* 見出し */
.front-top-page .hvn-h2 .h2 {
  background: unset;
  border: 0;
  color: var(--icon-color);
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 3px;
  margin: 0 0 calc(var(--gap30));
  padding: 0 !important;
  position: relative;
  text-align: center;
  max-width: unset;
}

/* アイコン */
.hvn-icon {
  color: var(--icon-color);
  display: block;
  font-size: 40px;
  padding-bottom: var(--gap30);
  text-align: center;
}

/* 小見出し */
.body .hvn-description {
  color: var(--icon-color);
  font-family: Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 5px;
  text-align: center;
}

/*******************************************************************************
**  メニュー
*******************************************************************************/
.hvn-menu a {
  aspect-ratio: 1 / 1;
  background-color: var(--menu-color);
  color: unset;
  display: grid;
  font-weight: 700;
  place-content: center;
  padding: 10px;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  width: 100%;
}

.hvn-menu a:hover {
  transform: translateY(-4px);
}

.hvn-policy {
  aspect-ratio: 1 / 1;
  background-color: #fff;
  border: 1px solid var(--icon-color);
  padding: 10px;
  width: 100%;
}

/*******************************************************************************
**  ワイドブロック
*******************************************************************************/
.body .wide {
  background-color: var(--menu-color);
  margin: 0 calc(50% - 50vw);
  overflow-x: clip;
  padding: 60px calc(50vw - 50%);
}

/*******************************************************************************
**  フッター
*******************************************************************************/
.hvn-dark-switch {
  display: none !important;
}
</style>
<!-- /wp:html -->