/* ---------------------------------------------------
変数定義（root）
--------------------------------------------------- */

:root {
  --help-color--primary: var(--wp--preset--color--arkb-primary);
  --help-color--secondary: var(--wp--preset--color--arkb-secondary);
  --help-color--lines: var(--wp--preset--color--arkb-lines);

  /* 上書き */
  --ark-color--border: var(--help-color--lines, #cac4d0) !important;

  /* マーカーアイコン色 */
  --help-color--win: #0f7ed3;
  --help-color--mac: #da7e05;
  --help-color--option: #39ae6c;

  /* カラム幅上書き	*/
  --ark-gap--container: 4.5rem;
  --ark-width--sidebar: 15.5rem;
}



/* ---------------------------------------------------
フォント
--------------------------------------------------- */

body {
  font-family: "Noto Sans JP", meiryo, var(--ark-font_family), sans-serif;
}



/* ---------------------------------------------------
ヘッダー
背景色と文字色はカスタマイザーで設定
--------------------------------------------------- */

/* ヘッダーの検索アイコン */
.l-header__searchBtn {
	height: 100%;
	margin-left:0.5rem;
}
.c-iconBtn__icon {
	background-color:var(--wp--preset--color--arkb-dark);
	padding:0.5rem;
	border-radius:50%;
	font-size:1.5rem;
	height:2.5rem;
	width:2.5rem;
	line-height:unset;
}



/* ---------------------------------------------------
グローバルナビ（ヘッダー）

第1階層 ul.c-gnav
第2階層 ul.sub-menu.c-gnav__depth1
第3階層 ul.sub-menu.c-gnav__depth2 ※使ってない

各メニューアイテム li.menu-item
メニューアイテム内リンク a.c-gnav__a
テキスト span.__mainText
--------------------------------------------------- */

/* 第1階層hover時動作 */
.c-gnav > .menu-item {
  /* アニメーション */
  transition: background-color .25s;
  /* hover背景色 */
  &:hover {
    background-color: var(--wp--preset--color--arkb-dark);
  }
}

/* 第1階層のメニュー文字少し太く */
.c-gnav > .menu-item > .c-gnav__a > .__mainText {
  font-weight:500;
}

/* 第1階層に矢印アイコン追加 */
.c-gnav > .menu-item > .c-gnav__a {
	flex-direction:row;
	align-items: center;
  &::after{
    font: var(--fa-font-solid);
    content:"\f107"; /* angle-down */
    margin-left:0.25rem;
  }
}

/* ヘッダーグローバルナビ */
.c-gnav .sub-menu {
	background: var(--wp--preset--color--arkb-menu-bg, #fff);
	color: var(--ark-color--text);
}
.c-gnav__depth1 {
	--ark-color--border:unset; /* 他の線と同じ */
	box-shadow: 0 4px 12px 0 #00000066;
	border-radius:0.25rem;
  width: auto;
  overflow: hidden;
	left:unset;
	transform:unset;
	&:before {
		content:none;
	}
}
.c-gnav .sub-menu>.menu-item:not(:last-child) {
	border-bottom:none;
}
.c-gnav .sub-menu>.menu-item.border-before {
	border-top:1px solid var(--ark-color--border);
}

.c-gnav .sub-menu .c-gnav__a {
	--padding-v: 0.7rem;
	--padding-h:1.5rem;
	font-size:0.9rem;
	padding:var(--padding-v) var(--padding-h);
	
	&:hover {
		background-color:#eee;
	}
}
.c-gnav .sub-menu .menu-item {
  white-space: nowrap;
	&:first-child  .c-gnav__a {
		padding-top:calc(var(--padding-v) * 1.25);
	}
	&:last-child  .c-gnav__a {
		padding-bottom:calc(var(--padding-v) * 1.25);
	}
}



/* ---------------------------------------------------
投稿一覧
--------------------------------------------------- */

/* 投稿一覧（リスト形式）のサムネ削除 */
.c-postThumb {
  display:none;
}
.p-postList.-type-list .p-postList__body {
  padding-left:unset;
}

/* アーカイブページの投稿一覧（リスト形式）表示調整 */
.p-archive .p-postList .p-postList__title{
  color:var(--ark-color--link);
}
.p-archive .p-postList .p-postList__excerpt {
  margin-left:0.15rem;
}



/* ---------------------------------------------------
2カラム サイドバー
--------------------------------------------------- */

/* サイドバー追従 */
@media (min-width: 1000px) {
	.l-container {
		align-items: flex-start;
	}
  .l-sidebar {
		position:sticky;
		top: calc(var(--ark-offset--y, 5rem) + 0.75rem);
  }
}




/* 見出し */
.c-pageTitle__main {
	font-size: 2.5rem;
}

body:not(.home) {
	& h2 {
		font-size: 2rem;
		color: var(--help-color--primary);
	}
	& h3 {
		color: var(--help-color--primary);
		display:inline-block;

		--marker-color: 	rgb(from var(--help-color--secondary) r g b / 0.5);
		background: linear-gradient(transparent 60%, var(--marker-color) 60%, var(--marker-color) 90%, transparent 90%);
	}

}


/* 
 * H2見出しに番号（トップページ除く）
 * .no-numberが付いていたら番号なし
 */
body.single, body.page {
	&:not(.home) {
		& h2.wp-block-heading:not(.no-number) {
			counter-increment: step-counter;
		}
		& h2.wp-block-heading:not(.no-number):before {
			content: counter(step-counter, decimal-leading-zero)". ";
		}
	}
} 


/* 目次調整 */
.ark-block-toc .ark-block-toc__list[data-level="3"]{
	padding-left:1.5rem;
}

/* サイドバーの目次 */
/* リスト項目がない場合は非表示 */
.c-widget.widget_block:has(.ark-block-toc):not(:has(.ark-block-toc__list)) {
	display:none;
}
/* 高さ制限 */
.l-sidebar .ark-block-toc {
	max-height: 60vh;
	overflow-y: auto;
}


/* ［の前をトリム Chromeだけ */
/* インラインブロックにしないと効かない */
dt span:first-child,
li span:first-child,
.ark-block-toc__list li a:first-child {
	display: inline-block;
	vertical-align: top;
}
* {
	text-spacing-trim: trim-start;
}


/* 表（.borderが付いていないときだけ） */
.wp-block-flexible-table-block-table:not(.border) {
	table {
		border: none;
	}
	& th {
		padding: 0.05rem 1.25rem !important;
		font-size:95%;
		border:none !important;
	}
	& td {
		font-size:95%;
		padding:1rem 1.25rem !important;
		border:none !important;
	}
	& tbody tr {
		border-bottom: var(--ark-color--border) 1px solid;
	}
}
.wp-block-flexible-table-block-table {
	& table.is-sticky-header thead {
    top: var(--ark-offset--y) !important;
    & th {
   		padding-top: 0.05rem !important;
   		padding-bottom: 0.05rem !important;
    }
	}
}


/* 
 * DLスタイル
 */

/* DLスタイル */
.ark-block-dl .ark-block-dl__dt,
.ark-block-dl .ark-block-dl__dd {
	border:unset;
	padding:unset;
}
/* 黒丸 */
.ark-block-dl .ark-block-dl__dt::before {
	display:inline-block;
	content:"";
	width:0.75rem;
	height:0.75rem;
	background-color: var(--ark-color--text);
	margin-left:0.2rem;
	margin-right:0.5rem;
	border-radius:10rem;
}
/* 黒丸を表示したくないときは.no-marker */
.ark-block-dl .ark-block-dl__dt.no-marker::before {
	display:none;
}
/* 黒丸のぶんテキスト要素を短く（カラム落ち防止） */
/* エディター側には不要 */
.ark-block-dl .ark-block-dl__dt:not(.no-marker) span {
  max-width: calc(100% - 1.5rem);
}
/* 見出しちょっと太く */
.ark-block-dl .ark-block-dl__dt strong {
	font-weight:900 !important;
}
.ark-block-dl .ark-block-dl{
	margin:1.25rem 0 1.25rem 1.25rem;
}
.ark-block-dl .ark-block-dl:last-child {
	margin-bottom:0;
}
.ark-block-dl .ark-block-dl__dd {
	margin-left:0.5rem;
	padding:0.5rem 0 0.5rem 1.25rem;
}
/* 子要素にDLがあったら線をつける */
.ark-block-dl .ark-block-dl__dd:has(.ark-block-dl){
	border-left:2px dotted var(--ark-color--border);
	padding-left:1.5rem;
}





/* 検索結果ページ */
/* リスト項目のマージン */
.search-results .l-main .p-postList.-type-list .p-postList__item {
	margin-bottom:2.5rem;
}
/* ページタイトル */
.search-results .l-main .p-postList__title {
	font-size:1.5rem;
	font-weight:500;
}
/* マーカー色なし */
.search-results .l-main mark {
	background-color:unset;
	color:unset;
	font-weight:700;
}



/* マーカーアイコン */
.arkb-marker {
  &.marker-icon {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--ark-color--bg, #fff);
    padding: 0 0.5rem;
    margin-left: 0.5rem;
    word-break: keep-all;
  }
  &.only-win {
    background: var(--help-color--win, #333);
  }
  &.only-mac {
    background: var(--help-color--mac, #333);
  }
  &.option {
    background: var(--help-color--option, #333);
  }
}


/* 関連記事 */
.p-entry__foot .p-entry__related {
  padding:1.5rem;
  background-color:var(--ark-color--gray);
}
.p-entry__foot .p-entry__related {
	& .c-bottomSection__title {
		font-size: 1.25rem;
		margin-bottom: 0.75rem;
	}
  & .p-postList.-type-list.-related {
    list-style-type:circle;
    padding-left:0.15rem;
  }
  & .p-postList__item {
    padding:0;
    margin:0.5rem 1rem;
		
		&:last-child {
			margin-bottom: 0;
		}
  } 
	& .p-postList__title {
    font-weight:normal;
    color:var(--ark-color--link);
  }
	& .p-postList__meta {
		display:none;
	}
	& .p-postList__thumb {
		display:none;
	}
}



/* インラインアイコンの位置調整 */
.l-main p > img, .l-main td > img, .l-main li > img, .l-main dt span > img {
  vertical-align: middle;
}


/* 別タブで開く場合にアイコン追加 */
a[target="_blank"]::after {
    font: var(--fa-font-solid);
    content:"\f08e"; /* arrow-up-right-from-square */
    margin-left:0.25rem;
}


/* STEPをカード表示にしたとき、本文が空の場合は表示しないようにする */
/* .ark-block-step__body 内の唯一のp要素が空だったら非表示に */
.ark-block-step.is-style-card .ark-block-step__body.ark-keep-mt--s:has(p:only-child:empty) {
  display: none;
}





/* 通知ブロック内のSTEP調整 */
.ark-block-notice__body .ark-block-step.is-style-default {

  /* STEP同士の間隔 */
  .ark-block-step__item {
    padding-bottom: 1.25rem;
  }

  /* STEP項目と本文の間 */
  .ark-block-step__body.ark-keep-mt--s {
    margin-top: 0.5rem;
  }
  /* 本文が空の場合は表示しないようにする */
  .ark-block-step__body.ark-keep-mt--s:has(p:only-child:empty) {
    display: none;
  }

  /* STEP数字部分を縮小 */
  .ark-block-step__number {
    height: 36px;
    width: 36px;
  }
  .ark-block-step__number:after {
    font-size: 18px;
  }
  .ark-block-step__number .__label {
    font-size: 8px;
    padding-bottom: 0px;
  }
  .ark-block-step__item:before {
    left: 18px;
  }

  /* 点線の位置調整（数字縮小した分） */
  .ark-block-step__title {
    font-size: unset;
  }

}












/* アコーディオン */
.ark-block-accordion {
  &.is-style-box {
    .ark-block-accordion__item {
      border: 1px solid var(--wp--preset--color--arkb-light);
      margin-bottom: 2rem;
    }
    .ark-block-accordion__title {
      padding: .5em 1em;
      background-color: var(--wp--preset--color--arkb-light);
    }
    .ark-block-accordion__body {
      padding: 1.5rem 2rem;
      border-top: unset;
    }
  }

  .ark-block-accordion__label {
    font-size: 1.25rem;
    color: var(--wp--preset--color--arkb-primary);
  }
}



/* サイドバーナビ */
.c-widget.widget_block ul.sidebar-nav {
	list-style-type: none;
	padding:0;

	& li {
/*     font-size: 0.9rem; */
    margin-bottom: 0.5rem;
	}
	& li a{
    color: var(--help-color--primary);
    text-decoration: none;
	}
}


/* 縦書き */
.vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
}


/* PCの時だけリスト系の段組み */
@media (min-width: 1000px) {
  /* 目次2段組み .columns-2 */
  .l-main .ark-block-toc.columns-2 [data-level="2"].ark-block-toc__list {
    column-count: 2;
    /* & > li {
      break-inside: avoid-column;
    } */
  }

  /* ulリスト段組み（階層は考慮していない） */
  ul.columns-2 {
      column-count: 2;
      & > li:first-child {
          margin-top:0;
      }
  }
  ul.columns-3 {
      column-count: 3;
      & > li:first-child {
          margin-top:0;
      }
  }
  ul.columns-4 {
      column-count: 4;
      & > li:first-child {
          margin-top:0;
      }
  }
}



/* リストのスタイルを「ドット」にするとマージンありになる */
.wp-block-list.is-style-ark-list-icon--dot > li {
    margin-top: 1.5rem;
}


/* コンテナブロックの囲み罫 */
.ark-block-container.container-border {
    border:1px solid var(--ark-color--main);
    padding:1.5rem;
}
/* ※注用の囲み罫 */
.ark-block-container.container-border.container-notice {
    border-color: var(--wp--preset--color--arkb-lines) !important;
    border-style: dashed !important;
}


/* 検索結果ページ */
.search-result-page.p-postList {
    margin-top: 2.5rem;

    & .p-postList__item {
        margin-bottom: 3.5rem;
    }
    & .p-postList__title {
        font-size: 1.5rem;
        font-weight: 500;
    }
    & .p-postList__excerpt {
        font-size: 0.9rem !important;
    }
    & mark {
        color: inherit;
        background-color: inherit;
        font-weight: 700;
        padding: 0;
        margin: 0 0.05rem;
    }
    & .result-meta {
        display: none;
    }
}