@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/*****以下、編集内容*****/

/************************************
**目次
************************************/

/**h3目次の変更**/
ol.is-style-index ol>li:before {
	border: none;
	padding: 0 0 0 0;
	color: #bbbbbf;
	content: "▶";
	font-size: 0.5rem;
	line-height: inherit;
	top: 4px;
}

.p-toc__list .p-toc__childList {
    padding-left: 0px;
}

/**h2目次の変更**/
ol.is-style-index>li:before {
    font-weight: 700;
    border: none;
	content: counters(toc,"-") ".";
	color: #bbbbbf;
}

/**表題の調整**/
.p-toc__ttl:before {
	display: none;
}
.p-toc.-capbox .p-toc__ttl {
	text-align: start;
	padding: 1.0em 0.5em 0.5em 1.5em;
	color: #000000; /*「目次」の色*/
	background-color: transparent;
	font-weight: 700;
}
#main_content .p-toc {
	background-color: #F7F7F7;
}
.p-toc__ttl {
	color: #000000;
}

/**左縦線の調整**/
.p-toc.-capbox {
	border:solid var(--color_main);
	border-width:0 0 0 6px;
}

/************************************
**記事タイトル（h1）
************************************/

.c-postTitle__ttl {
	color: #000000;
	font-size: 24px;/**SPフォントサイズ**/
}

/**PCフォントサイズ**/
@media (min-width: 960px){
.c-postTitle__ttl {
    font-size: 28px;
	}}

/************************************
**記事見出し（h2、h3、h4）
************************************/

/**h2テキスト**/
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
	font-weight: 500;/**あえてデフォの700から500に落として調整（白抜き文字がボールドで視認性・可読性が悪い）**/
}

/**h3テキスト**/
.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
	color: #000000;
}

/**h3下線**/
.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before {
	content: "";
    width: 100%;
    height: 2px;
	background: repeating-linear-gradient(90deg, var(--color_main) 0%, var(--color_main) 29.3%, rgba(150,150,150,.2) 29.3%, rgba(150,150,150,.2) 100%);
}

/**h4テキスト**/
.post_content h4:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
	color: #000000;
}

/**h4左線**/
.post_content h4:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
    padding: 0 0 0 16px;
    border-left: solid 2px var(--color_main);
}

/************************************
**カテゴリー左のアイコン削除
************************************/

/**TOP**/
.icon-folder:before {
	display: none;
}

/**記事タイトル下**/
.c-categoryList:before {
	display: none;
}

/**記事サイドバー**/
.widget_categories>ul>.cat-item>a:before, .wp-block-categories-list>li>a:before {
    content: "\e921";
}

/************************************
**記事タイトル下カテゴリーバッジ
************************************/

.c-categoryList__link {
	background-color: #A8A8A8;
}

/************************************
**TOPカテゴリーバッジ
************************************/

.-type-list .c-postThumb__cat, .-type-list2 .c-postThumb__cat {
	opacity: 0.7;
}

.c-postThumb__cat {
	opacity: 0.7;
}

/************************************
**パンくずリスト
************************************/

/**HOMEアイコン削除**/
.icon-home:before {
    display: none;
}

/**記事タイトル表示**/
.single .p-breadcrumb__item:last-child > span.p-breadcrumb__text {
  display: block;
}

/**横スクロール設定**/
.p-breadcrumb__list {
	overflow: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.p-breadcrumb__list::-webkit-scrollbar {
  display: none;
}

/************************************
**ヘッダーロゴ調整
************************************/

/**SP**/
@media not all and (min-width: 960px){
.-img .c-headLogo__link {
    display: block;
    padding: 3px 0;
	}}

/************************************
**ブログカード
************************************/

[data-type=type1] .p-blogCard__inner:before {
	    border: 1px solid #a8a8a8;
}

.p-blogCard__caption:before {
	color: #a8a8a8;
}

.p-blogCard__title {
    color: var(--color_link);
}

/************************************
**記事本文領域
************************************/

.l-mainContent__inner>.post_content {
	margin: 0 0 4em 0;
}

/************************************
**PR表記（ステマ規制対応）
************************************/
.c-prNotation[data-style=big] {
	margin-top: 6px;
    margin-bottom: -26px;
    color: #A8A8A8;
	font-size: 0.7em;
	background: none;
	border: none;
	padding: 0;
}

.c-prNotation[data-style=big]>i {
	display: none;
}

/************************************
**記事下部のカスタムHTMLのバナーサイズ指定
************************************/

@media screen and (min-width: 960px){
.bn_kaiu_article_after {
    width: 50%;
	margin: 0 auto;
	}}

@media screen and (min-width: 600px) and (max-width: 959px){
.bn_kaiu_article_after {
    width: 50%;
	margin: 0 auto;
	}}

/************************************
**Kaiuのクリッカブルエフェクト調整
************************************/

/**記事上部**/
.bn_kaiu_article_top:hover{
  opacity: 0.6;
  cursor: pointer;
}

/**記事下部**/
.bn_kaiu_article_after:hover{
  opacity: 0.6;
  cursor: pointer;
}

/**目次上**/
.bn_kaiu_above-toc:hover{
  opacity: 0.6;
  cursor: pointer;
}

/**目次下**/
.bn_kaiu_below-toc:hover{
  opacity: 0.6;
  cursor: pointer;
}

/**h2終わり**/
[class^=bn_kaiu_before_h2]:hover{
  opacity: 0.6;
  cursor: pointer;
}

/**サイドバー**/
[class^=bn_kaiu_sidebar]:hover{
  opacity: 0.6;
  cursor: pointer;
}

/************************************
**ボックスメニューの調整
************************************/

.swell-block-box-menu__link {
  border-radius: 80px;
}

.swell-block-box-menu__link:hover {
  border-radius: 80px;
}

.swell-block-box-menu.is-style-fill .has-link:hover {
  border-radius: 80px;
}

.swell-block-box-menu__link::after{
    /* 擬似要素で矢印アイコンをつくる */
    content: '';
    border: 0;
    border-top: solid 2px #A8A8A8;
    border-right: solid 2px #A8A8A8;
    display: inline-block;
    width: 10px;
    height: 10px;
    /* 矢印アイコンの位置を設定 */
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(45deg); /* rotate(45deg)で矢印を回転（向きを変更）させる */
}

.swell-block-box-menu[data-direction=horizontal] .swell-block-box-menu__figure {
    margin-right: 0.5em;
	color: #343434
}

.swell-block-box-menu.is-style-fill .swell-block-box-menu__link {
    background: var(--the-icon-color);
    padding: 1em 2em 1em 1em;
}

.swell-block-box-menu__text{
	margin-top: -3px;
	font-weight: bold;
}

/************************************
**ウィジェット_KaiU設置箇所
************************************/
.widget-above-toc{
	margin-bottom: -40px;
}

.widget-below-toc{
	margin-bottom: -50px;
	margin-top: -30px;
}

#custom_html-2.widget_custom_html{
	margin-bottom: -20px;
}

#custom_html-3.widget_custom_html{
	margin-top: -40px;
}

/************************************
**ウィジェット_おすすめ記事
************************************/

.widget-sidebar-recommend-title{
	text-align: center;
	font-weight: 700;
	color: #343434;
}

.widget-top-recommend-title{
	text-align: center;
	font-weight: 700;
	color: #343434;
}

.widget-articleBottom-recommend-title{
	text-align: center;
	font-weight: 700;
	color: #343434;
}

/* PC_TOP_サイズ小さく */
@media screen and (min-width: 1024px) {
.widget-top-recommend-img img {
    width: 70%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}

/* PC_関連記事上_サイズ小さく */
@media screen and (min-width: 1024px) {
.widget-articleBottom-recommend-img img {
    width: 70%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}

/* TOP_クリッカブルエフェクト */
.widget-top-recommend-img img:hover{
  opacity: 0.6;
  cursor: pointer;
}

/* 関連記事上_クリッカブルエフェクト */
.widget-articleBottom-recommend-img img:hover{
  opacity: 0.6;
  cursor: pointer;
}

/* サイドバー_クリッカブルエフェクト */
.widget-sidebar-recommend-img img:hover{
  opacity: 0.6;
  cursor: pointer;
}

/************************************
**Amazonアソシエイトの画像リンクを自動的にセンタリングする（参考：https://hatebu-memo.scriptlife.jp/entry/2017/11/26/amazon-img-centering）
************************************/

img[src*="ws-fe.amazon-adsystem.com"] {
  display: block;
  margin: auto;
}

/************************************
**SWELLボタンの「キラッと」スタイルに立体スタイルを付与
************************************/
.is-style-btn_shiny a {
 box-shadow: 0 4px 0 var(--the-solid-shadow,var(--color_main_dark));
}

/************************************
**目次ボタン・TOPボタン
************************************/
@media not all and (min-width: 960px) {
.p-fixBtnWrap {
padding-bottom: 80px;
}}

/************************************
**診断チャート（ynchart）
************************************/
/* YES・NO チャート */
.yn-chart{
  margin:0 auto 2rem;
  padding: 2em;
  max-width: 600px;
  background:#f7f7f7;
  font-size:0.9rem;
  border-radius: 8px;
}
.yn-chart__add{
  background: #343434;
  color:#fff;
  padding: 0.2em 0.9em !important;
  margin:0 !important;
  text-align:center;
  display:inline-block;
  line-height: 1.5 !important;
  border-radius: 4px;
}
.yn-chart__title{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: 0.5em 0 0.3em!important;
  margin: 0 auto 0.5em !important;
  font-size:1.35em !important;
  font-weight: 900 !important;
  color:#343434;
  letter-spacing: 1px !important;
  line-height:1.5 !important;
}
.yn-chart__title:before,.yn-chart__title:after {
  content: "";
  flex: 1;
  height: 1px;
  background: #a8a8a8;
  display: block;
}
.yn-chart__title:before {
  margin-right: 0.7em;
}
.yn-chart__title:after {
  margin-left: 0.7em;
}
.yn-chart__ex{
  text-align:center;
  margin: 0 !important;
  padding: 0 !important;
}
.yn-chart > div{
  display:none;
  padding-top: 100px;
  margin-top: -100px;
}
.yn-chart > div.yn-chart__display{
  display:block;
}
.yn-chart > div > figure{
  margin:1em 0 -36px;
}
.yn-chart > div > figure img{
  display:block;
  border-radius: 8px 8px 0 0;
  filter: blur(0.6px) contrast(85%);
}
.yn-chart > div > p{
  margin:2em 0 0 !important;
  padding: 0.8em 1em 0.8em 4.3em !important;
  background:#fff;
  position:relative;
  font-size: 1.2em;
  font-weight: bold;
  border-radius: 0 0 8px 8px;
  line-height: 2em;
}
.yn-chart > div > p:before{
  content: "Q.";
  position: absolute;
  left: 1em;
  top: 0.5em;
  color: #e3801d;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.1em;
  min-width: 2em;
  max-height: 2em;
}


.yn-chart > div ul{
  margin:2em 0 0 !important;
  padding:0 !important;
  list-style:none !important;
  border:none;
  font-size: 1.2em;
  font-weight: bold;
}
.yn-chart > div ul li {
  margin: 0 0 1em 1em!important;
  padding: 0 !important;
  line-height: 3;
}
.yn-chart > div ul li:last-child{
  margin:0 0 0 1em !important;
  line-height: 3;
}
.yn-chart > div ul li a{
  background: #e3801d;
  display: block;
  padding: 0.8em !important;
  text-decoration: none;
  color: #FFFFFF;
  border-radius: 8px;
  position: relative; /* 親要素に対して相対位置を指定 */
  padding-right: 2em; /* アイコンのスペースを確保 */
}
.yn-chart > div ul li a:after{
  font-family: icomoon!important;
  content: "\e921"!important;
  position: absolute;
  right: 0.8em; /* 右端からの距離を指定 */
  top: 50%; /* 縦中央に配置 */
  transform: translateY(-50%); /* 縦中央に整える */
}
.yn-chart > div ul li a:hover{
  box-shadow: inset 2px 2px 0 0 #343434, 2px 2px 0 0 #343434, 2px 0 0 0 #343434, 0 2px 0 0 #343434;
  transition: 0.1s ease-in-out;
  opacity:1;
}
.yn-chart > div ul li:before{
  content:unset !important;
}
.yn-chart__result{
  background:rgba(0,0,0,0);
  padding:0;
}
.yn-chart__result-service{
	text-align: center;
	font-size: 1.3em;
	font-weight: bold;
	margin-bottom: 6px;
}
.yn-chart__result-description{
	font-size: 14px;
	margin-top: 14px;
	margin-bottom: 14px;
}
.yn-chart__result-title{
  color: #e3801d;
  font-size: 1.6em !important;
  font-weight:900 !important;
  padding: 0 !important;
  margin: 0 0 0.1em !important;
  text-align: center;
}
.p-check-link{
	font-size: 0.9em;
	margin: 0.5em 0 0 0.5em;
}
@media screen and (max-width: 560px) {
  .yn-chart{
    padding:1.8em 1.3em;
  }
  .yn-chart > div > figure {
    margin: -16px 0;
  }
  .yn-chart > div > p {
    margin: 1em 0 0 !important;
    padding: 0.8em 1em 0.8em 3.3em !important;
  }
  .yn-chart > div ul {
    margin: 1em 0 0 !important;
  }
  .yn-chart__title{
    font-size:1.2em !important;
  }
  .yn-chart__title:before {
    margin-right:0.3em;
  }
  .yn-chart__title:after {
    margin-left:0.3em;
  }
  .yn-chart__ex,.yn-chart__add{
    font-size:0.9em !important;
  }
  .yn-chart > div > p:before{
    left: 0.5em;
  }
}
/* Twitterシェアボタンなど */
.p-tw-btn,.p-check-btn{
  text-align:center;
  margin:1.5em 5em !important;
  padding:0 !important;
}
.p-tw-btn a,.p-check-btn a{
  display:block;
  box-shadow: 0 3px 5px rgba(0,0,0,.15);
  color:#fff !important;
  font-weight:600 !important;
  text-decoration:none !important;
  padding:0.5em 0;
  border-radius:30px;
}
.p-tw-btn a{
  background:  #00acee;
}
.p-check-btn a{
  background:#fbc55e;
}
.p-tw-btn a:hover,.p-check-btn a:hover{
  transform: translateY(3px);
  box-shadow: 0 2px 2px rgba(0,0,0,.22);
}
.yn-chart > div > p.p-check-btn{
  background: none !important;
  padding: 0 5em !important;
}
.yn-chart > div > p.p-check-btn:before{
  content:unset !important;
}
@media screen and (max-width: 800px) {
  .p-tw-btn,.p-check-btn{
    margin:1.5em 3em !important;
  }
}
@media screen and (max-width: 560px) {
  .p-tw-btn,.p-check-btn{
    margin:1.5em 1em !important;
  }
  .yn-chart > div > p.p-check-btn{
    padding: 0 3em !important;
  }
}

/************************************
**KaiU設定用のタグの非表示
************************************/

/* ドコモアフィリエイトのdアニメストア案件 */
a[href="https://www.netoff.co.jp/media/tag/docomo-danime-store/"] {
    display: none;
}

/* ドコモアフィリエイトのディズニープラス案件 */
a[href="https://www.netoff.co.jp/media/tag/docomo-disneyplus/"] {
    display: none;
}

/* ドコモアフィリエイトのLemino案件 */
a[href="https://www.netoff.co.jp/media/tag/docomo-lemino/"] {
    display: none;
}

/************************************
**広告タグロゴ位置調整

.p-adBox__img img {
    display: block;
    margin: 0 auto -15px
}
************************************/


/************************************
**記事投稿ページのサイドバーをカテゴリー別に出し分け
************************************/

/* 動画配信サービス */
#body_wrap:not(.categoryid-7) .sidebar-vod{
display:none;
}

/* 電子書籍 */
#body_wrap:not(.categoryid-2) .sidebar-ebook{
display:none;
}

/* インターネット回線 */
#body_wrap:not(.categoryid-105) .sidebar-internet{
display:none;
}

/* 占い */
#body_wrap:not(.categoryid-125) .sidebar-fortune{
display:none;
}

/************************************
**ボタンを押してモーダルで表示するカスタマイズ
https://motoki-design.co.jp/wordpress/wordpress-modal-btn/
************************************/
.modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 9999 !important;
}

/* PC用スタイル */
@media screen and (min-width: 961px) {
  .modal-content {
    position: fixed;
    top: 14%; /* ← 上から%に表示 */
    left: 50%;
    transform: translateX(-50%) !important;
    background-color: #fff;
    padding: 30px;
    border: 1px solid #888;
    border-radius: 3em;
    width: 50%;
    max-height: 80vh;
    overflow-y: auto;
    box-sizing: border-box;
    z-index: 10000 !important;
  }
}

/* スマホ用スタイル */
@media screen and (max-width: 960px) {
  .close {
    font-size: 20px;
  }

  .modal-content {
    padding: 16px;
    width: 95%;
    max-height: 80vh;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    overflow-y: auto;
	background-color: #FFFFFF
  }

  .modal-content .has-text-align-center {
    font-size: .7em !important;
    z-index: 10000;
  }

  .modal-content .u-mb-40,
  .modal-content .u-mb-30 {
    margin-bottom: .5em !important;
  }
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: relative;
  z-index: 4;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.p-postList__item::before {
  z-index: 0 !important;
}

/************************************
**レーダーチャート
************************************/

.radar-chart-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 230px;
    height: 230px;
    margin: 0 auto;
    padding: 35px;
    box-sizing: content-box;
}

.radar-chart-2 svg {
    width: 100%;
    height: 100%;
}

.radar-chart-2 dl {
    position: absolute;
    width: 100%;
    height: 100%;
}

.radar-chart-2 dl > div {
    position: absolute;
    color: #777;
    font-size: .6em;
    text-align: center;
}

.radar-chart-2 dl > div:nth-child(1) {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.radar-chart-2 dl > div:nth-child(2) {
    top: 31%;
    right: 7%;
    transform: translateX(50%);
}

.radar-chart-2 dl > div:nth-child(3) {
    bottom: 6%;
    right: 25%;
    transform: translateX(50%);
}

.radar-chart-2 dl > div:nth-child(4) {
    bottom: 6%;
    left: 25%;
    transform: translateX(-50%);
}

.radar-chart-2 dl > div:nth-child(5) {
    top: 31%;
    left: 7%;
    transform: translateX(-50%);
}

.radar-chart-2 dd {
    margin: 0;
}


/************************************
**モーダル
************************************/

.modal-2__wrap input {
    display: none;
}

.modal-2__open-label,
.modal-2__close-label {
    cursor: pointer;
}

.modal-2__open-label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin:0 auto;
    padding: .8em 2em;
    border: none;
    border-radius: 5px;
    background: linear-gradient(to right, #ff8c00, #ff0080);
    color: #ffffff;
    font-weight: 600;
    font-size: 1em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
	text-align: center;
}

.modal-2__open-label:hover {
    background: linear-gradient(to right, #ffe0cc, #ffe0f0);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);              /* ← 浮き上がる */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* ← hover時にさらに立体感 */
    outline: none;
}

.modal-2 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
}

.modal-2__open-input:checked + label + input + .modal-2 {
    display: block;
    animation: modal-2-animation .6s;
}

.modal-2__content-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 650px;
    background-color: #fefefe;
    z-index: 2;
    border-radius: 5px;
}

.modal-2__close-label {
    background-color: #777;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 20px;
    width: 36px;
    height: 36px;
    line-height: 1.6;
    text-align: center;
    display: table-cell;
    position: fixed;
    top: -15px;
    right: -2%;
    z-index: 99999;
    font-size: 1.3em;
}

.modal-2__content {
    max-height: 50vh;
    overflow-y: auto;
    padding: 39px 45px 40px;
}

.modal-2__background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .45);
    z-index: 1;
}

@keyframes modal-2-animation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media only screen and (max-width: 520px) {
    .modal-2__open-label {
        max-width: 90%;
        padding: .94em 2.1em .94em 2.6em;
		text-align: center;
    }

    .modal-2__close-label {
        top: -17px;
        right: -4%;
    }

    .modal-2__content-wrap {
        width: 90vw;
    }

    .modal-2__content {
        padding: 33px 21px 35px;
        max-width: 100%;
    }
}

/* モーダルのコンテンツ領域を広げる調整 */

.modal-2__content-wrap {
    width: 90%;            /* ← 横幅を広げる */
    max-width: 900px;      /* ← デスクトップでの最大幅を拡大 */
    height: auto;          /* ← 必要に応じて高さを自動 */
    max-height: 85vh;      /* ← 画面の高さに応じて広めに表示 */
}

.modal-2__content {
    max-height: 70vh;      /* ← スクロール領域も広げる */
    padding: 40px 50px;    /* ← 余白を少し広めに */
}

@media only screen and (max-width: 520px) {
    .modal-2__content-wrap {
        width: 95vw;        /* ← スマホ時はさらに横幅を広めに */
        max-width: 95vw;
        max-height: 85vh;   /* ← スマホの高さを広めに */
    }

    .modal-2__content {
        max-height: 75vh;   /* ← 縦のスクロール領域を広げる */
        padding: 30px 20px; /* ← スマホでは余白を少し縮小 */
    }
}

/************************************
**追従メニュー
************************************/
  :root{
    /* SWELLのヘッダー高を既定値に採用。押し出し時はJSで0に切替 */
    --netoff-sticky-top: var(--swl-headerH, 0px);
    /* 追従ナビの高さ（JSで実測反映）。未計測時は既定44px */
    --netoff-sticky-navH: 44px;
  }
  /* 追従に入ったらヘッダーを押し出す＆top=0に切替 */
  html.sp-nav-only{ --netoff-sticky-top: 0px; }

  /* アンカーずれ防止（ヘッダー＋追従ナビの合計分） */
  .post_content h2[id], .post_content h3[id]{
    scroll-margin-top: calc(var(--netoff-sticky-top) + var(--netoff-sticky-navH) + 10px);
  }

  /* PCでは非表示 */
  .netoff-sticky{ display:none; }

  @media (max-width: 959px){
    /* sentinel は表示しないがレイアウト計算用に設置 */
    .netoff-sticky__sentinel{ display:block; height:1px; margin: 0; }

    .netoff-sticky{
      display:block;
      position: sticky; /* 追従 */
      top: var(--netoff-sticky-top);
      z-index: 9990 !important; /* z-indexを確実に適用 */

      /* フル幅背景（本文幅を超えて左右いっぱい） */
      left: 50%; right: 50%;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      width: 100vw;
      background: #fff;
      border-bottom: none; /* 下の要素に移動 */
      box-shadow: 0 1px 3px rgba(0,0,0,0.06); /* 浮いている感じを出すために薄い影を追加 */
    }

    .netoff-sticky__inner{
      padding: 0; /* 左右のpaddingも削除し、完全に全幅にする */
    }
    
    .netoff-sticky__scroller{
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      display: flex;
      /* justify-content: center; を削除 */
    }

    .netoff-sticky__list{
      display: flex;
      list-style: none;
      padding: 0 !important; /* ブラウザのデフォルトpaddingを強制的にリセット */
      margin: 0;
      border-bottom: 1px solid #e5e7eb; /* タブ全体の薄い下線 */
      width: 100%; /* 要素を画面幅いっぱいに広げる */
    }

    .netoff-sticky__list > li {
      flex: 1; /* 均等に幅を分け合う */
      text-align: center; /* テキストを中央揃え */
    }

    .netoff-sticky__link{
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      text-decoration: none;
      color: #555; /* 通常時の文字色を調整 */
      font-weight: 600;
      font-size: 14px;
      padding: 12px 16px; /* paddingを調整 */
      border-radius: 0; /* 角丸をなくす */
      transition: color 0.2s, border-color 0.2s;
      width: 100%; /* 親要素(li)いっぱいに広げる */
      background-color: transparent; /* 背景色をなくす */
      border: none; /* 枠線をなくす */
      border-bottom: 3px solid transparent; /* ハイライト用の下線のスペースを確保 */
      margin-bottom: -1px; /* 全体の下線と重なるように調整 */
    }
    .netoff-sticky__link:hover{
      color: #1176d4; /* ホバー時に文字色を青系に */
    }

    /* 自動アクティブ（JSで .is-active 付与） */
    .netoff-sticky__link.is-active{
      color: #1176d4 !important;
      font-weight: 700 !important; /* 少し太字に */
      border-bottom-color: #87b5e1 !important; /* アクティブ時の下線を薄い青に変更 */
      background: transparent !important; /* 背景色は不要 */
    }

    /* 追従時にヘッダーを画面外へ（マイベスト風） */
    header.l-header{ transition: transform .24s ease; }
    html.sp-nav-only header.l-header,
    html.header-hidden header.l-header,
    html.header-hidden #header {
        transform: translateY(-100%) !important;
    }

    /* 目次の下のマージンを調整 */
    .p-toc.-called-from-sc.-capbox {
      margin-bottom: 12px !important;
    }
  }

  /* ページのスムーススクロール（テーマ側で既に設定があれば削除可） */
  html{ scroll-behavior:smooth; }

/************************************
**キャプションブロック
************************************/
.swell-block-capbox.cap_box.is-style-onborder_ttl2[data-colset="col3"] .cap_box_content {
 /* border-color: #E2E2E2; /* ← ここを任意の色に変更 */
  border: none;
  background-color: var(--color_gray) !important;
}