@charset "UTF-8";

/*!
Theme Name: ROOTS Plus 2
Description: ROOTS Plus corporate site preview theme based on Cocoon child.
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* Corporate site styles are enqueued from assets/roots-plus/. */

#foot__sns .btn-icons a::before {
  content: none;
  display: none;
}

#foot__sns .btn-icons {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 12px;
}

#foot__sns .btn-icons a.icon-youtube > .icon::before,
#foot__sns .btn-icons a.icon-x > .icon::before,
#foot__sns .btn-icons a.icon-tiktok > .icon::before,
#foot__sns .btn-icons a.icon-threads > .icon::before {
  content: "";
  display: block;
  width: 23px;
  height: 23px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#foot__sns .btn-icons a.icon-youtube > .icon::before {
  background-image: url("assets/roots-plus/images/common/youtube.svg");
  width: 24px;
}

#foot__sns .btn-icons a.icon-x > .icon::before {
  background-image: url("assets/roots-plus/images/common/x.svg");
  width: 20px;
  height: 20px;
}

#foot__sns .btn-icons a.icon-tiktok > .icon::before {
  background-image: url("assets/roots-plus/images/common/tiktok.svg");
  width: 22px;
  height: 22px;
}

#foot__sns .btn-icons a.icon-threads > .icon::before {
  background-image: url("assets/roots-plus/images/common/threads.svg");
  width: 24px;
  height: 24px;
}

footer .copyright {
  text-align: center;
}

body.admin-bar .toggleMenu {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .toggleMenu,
  body.admin-bar header .logo {
    top: 46px;
  }
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}


/* TOP買取実績スワイパー: カード画像の高さ揃え（default.cssと同内容をstyle.cssにも置き、filemtimeで即キャッシュバスト） */
.results__achievements .itemImage { aspect-ratio: 4 / 3; }
.results__achievements .itemImage img { width: 100%; height: 100%; object-fit: cover; }

/* SERVICE 3 service cards: equal image height (same approach as default.css; object-fit cover, 10:7 = min crop) */
.service__content .item .image { aspect-ratio: 10 / 7; overflow: hidden; }
.service__content .item .image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 見出しマーク 表示サイズ5段階（中=既定96px相当。builderのheading_mark_sizeと対応） */
img.lead__mark--xl{width:160px}
img.lead__mark--lg{width:130px}
img.lead__mark--md{width:100px}
img.lead__mark--sm{width:75px}
img.lead__mark--xs{width:50px}
span.lead__mark--xl{font-size:2em}
span.lead__mark--lg{font-size:1.6em}
span.lead__mark--md{font-size:1.25em}
span.lead__mark--sm{font-size:1em}
span.lead__mark--xs{font-size:.8em}


/* =========================================================
   記事（ブログ1本のページ）の読みやすさ＋スマホのヘッダー — F-ROOTS 2026-10-30（宗峰さん「なおして」「とにかくみばえをよくして」）。.jp と .net に同じ塊
   なぜ：テーマが見出しを本文と同じ大きさ・太さにそろえていて、記事の部分に見出し・目次・表の指定が無かった。
         題名だけ画面いっぱい・日付の帯800・本文640と幅がばらばら。記事の上の帯（header要素）にサイトのヘッダー用の高さ60pxが当たり、長い題名がスマホで本文に重なっていた。
   色：サイト基本情報の色（--rp-decoration＝紺／--rp-highlight＝黄）を読む。線と淡い地の灰色だけここに置く。
   戻すとき：この塊を消す。
   ========================================================= */
.post__single{--rp-navy:var(--rp-decoration);--rp-yellow:var(--rp-highlight);--rp-line:#d5dbe3;--rp-soft:#f4f6f9;--rp-w:800px}
.post__single header.post_header{height:auto;padding-bottom:.8em}
.post__single .post_header .postTitle{box-sizing:border-box;max-width:var(--rp-w);margin:.6em auto 0;padding:0 20px;font-size:clamp(22px,2.3vw,30px);line-height:1.5;letter-spacing:.02em}
.post__single .post_header .postMeta{box-sizing:border-box;max-width:var(--rp-w);padding-left:20px;padding-right:20px}
.post__single .post_body{box-sizing:border-box;max-width:var(--rp-w);padding:0 20px;margin-left:auto;margin-right:auto}
.post__single .post_content{line-height:1.9;padding-left:0;padding-right:0}
.post__single .post_content > p:first-of-type{font-size:1.12em;line-height:1.8;font-weight:700;color:var(--rp-navy);border-left:4px solid var(--rp-yellow);padding:.2em 0 .2em .9em;margin:1.2em 0 1.6em}
.post__single .post_content p{margin:0 0 1.3em}
.post__single .post_content h2{font-size:1.3em;font-weight:700;line-height:1.5;color:#fff;background:var(--rp-navy);border-left:6px solid var(--rp-yellow);border-radius:4px;padding:.65em .9em;margin:3em 0 1.2em}
.post__single .post_content h3{font-size:1.12em;font-weight:700;line-height:1.55;color:var(--rp-navy);border-left:5px solid var(--rp-navy);border-bottom:1px solid var(--rp-line);padding:.35em 0 .4em .7em;margin:2.2em 0 1em}
.post__single .post_content h4{font-size:1.02em;font-weight:700;color:var(--rp-navy);margin:1.8em 0 .6em}
.post__single .post_content h4::before{content:"■ "}
.post__single .post_content strong{font-weight:700;background:linear-gradient(transparent 62%,var(--rp-yellow) 62%)}
.post__single .post_content > p:first-of-type strong{background:none}
.post__single .post_content ul,.post__single .post_content ol{padding-left:1.4em;margin:0 0 1.4em}
.post__single .post_content ul li{list-style:disc;margin:.6em 0;padding-left:.1em}
.post__single .post_content ul li::marker{color:var(--rp-navy)}
.post__single .post_content ol li{list-style:decimal;margin:.35em 0}
.post__single .post_content table{width:100%;border-collapse:collapse;margin:.4em 0 1.6em;font-size:.9em;line-height:1.6}
.post__single .post_content th,.post__single .post_content td{border:1px solid var(--rp-line);padding:.6em .75em;vertical-align:top;text-align:left}
.post__single .post_content th,.post__single .post_content thead td{background:var(--rp-soft);font-weight:700;color:var(--rp-navy)}
.post__single .post_content td:first-child,.post__single .post_content th:first-child{min-width:6.5em;font-weight:700;color:var(--rp-navy)}
.post__single .post_content .toc{box-sizing:border-box;width:100%;background:var(--rp-soft);border:1px solid var(--rp-line);border-top:4px solid var(--rp-navy);border-radius:4px;padding:1em 1.3em 1.1em;margin:0 0 2.4em;font-size:.92em;line-height:1.6}
.post__single .post_content .toc-title{display:block;font-weight:700;color:var(--rp-navy);margin-bottom:.5em}
.post__single .post_content .toc ol ol{display:none}
.post__single .post_content .toc li{margin:.35em 0}
.post__single .post_content .toc a{color:var(--rp-navy);text-decoration:none;border-bottom:1px dotted var(--rp-line)}
@media (max-width:767px){
  .post__single .post_header .postTitle,.post__single .post_body,.post__single .post_header .postMeta{padding-left:16px;padding-right:16px}
  .post__single .post_content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .post__single .post_content td,.post__single .post_content th{min-width:12em}
  .post__single .post_content td:first-child,.post__single .post_content th:first-child{min-width:6em}
}
/* 画像・引用・本文のリンク */
.post__single .post_content img{max-width:100%;height:auto;border-radius:4px}
.post__single .post_content figure{margin:0 0 1.4em}
.post__single .post_content blockquote{background:var(--rp-soft);border-left:4px solid var(--rp-line);border-radius:0 4px 4px 0;padding:1em 1.2em;margin:0 0 1.4em}
.post__single .post_content blockquote p:last-child{margin-bottom:0}
.post__single .post_content a:not([class*="btn"]):not([class*="cta"]){text-underline-offset:.22em;text-decoration-thickness:1px}
/* スマホ・タブレットのヘッダー：元の作りはロゴだけが浮く（トップの大きな写真の上に載せる前提）。記事やページではロゴが本文に重なるため、PCと同じ黄色の帯を敷く。
   トップは写真を通り過ぎてヘッダーが固定（is-fixed）になってから帯が出る＝写真の上の見た目は変わらない */
@media (max-width:1023px){
  header.is-fixed:not(.post_header)::before{content:"";display:block;position:fixed;z-index:-5;top:0;left:0;width:100%;height:60px;background:var(--rp-main,#f3e727);box-shadow:0 1px 6px rgba(0,0,0,.15)}
}
/* 申込み枠と本文のLINEリンク：LPと同じボタン（LINE＝緑・電話＝青・黒い縁と下の影）。並びは LINE → 電話 → 査定ページの文字リンク。
   LINEの緑と電話の青はLPのボタンの色（LINE公式の緑 #06c755／LPの電話 #3b5bdb）。サイト基本情報に色の欄ができたらそちらへ移す */
.post__single{--rp-line-green:#06c755;--rp-tel-blue:#3b5bdb}
.post__single .rv-cta{display:flex;flex-direction:column;border:2px solid var(--rp-navy,#0b1f3a);border-radius:6px;padding:1.4em 1.4em 1.2em;background:#fff}
.post__single .rv-cta__heading{order:1;font-size:1.2em;font-weight:700;color:var(--rp-navy,#0b1f3a);margin-bottom:.6em}
.post__single .rv-cta__body{order:2}
.post__single .rv-cta__btn,.post__single .rv-cta__tel a,.post__single .post_content p > a.ccl-link[data-cta="line"]{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;max-width:520px;min-height:58px;margin:.9em auto 0;padding:.7em 1em;border:2px solid #000;border-radius:4px;box-shadow:0 4px 0 #000;color:#fff!important;font-weight:700;font-size:1.05em;line-height:1.4;text-decoration:none!important;text-align:center;transition:transform .1s,box-shadow .1s}
.post__single .rv-cta__btn:not(.rv-cta__btn--sub),.post__single .post_content p > a.ccl-link[data-cta="line"]{background:var(--rp-line-green)}
.post__single .rv-cta__btn:not(.rv-cta__btn--sub){order:3}
.post__single .rv-cta__btn:not(.rv-cta__btn--sub)::before,.post__single .post_content p > a.ccl-link[data-cta="line"]::before{content:"LINE";display:inline-block;margin-right:.6em;padding:.1em .45em;border-radius:4px;background:#fff;color:var(--rp-line-green);font-size:.72em;font-weight:900;letter-spacing:.02em}
.post__single .rv-cta__tel{order:4;width:100%;margin:0;font-size:0}
.post__single .rv-cta__tel a{background:var(--rp-tel-blue);font-size:1.25rem;letter-spacing:.04em}
.post__single .rv-cta__tel a::before{content:"☎";margin-right:.4em}
.post__single .rv-cta__btn--sub{order:5;align-self:center;display:block;width:auto;min-height:0;max-width:none;margin:1.1em 0 0;padding:0;border:0;box-shadow:none;background:none;color:var(--rp-navy,#0b1f3a)!important;font-weight:400;font-size:.92em;text-decoration:underline!important;text-underline-offset:.22em}
.post__single .rv-cta__btn:active,.post__single .rv-cta__tel a:active,.post__single .post_content p > a.ccl-link[data-cta="line"]:active{transform:translateY(3px);box-shadow:0 1px 0 #000}