/* これやるとfield-plugin-settings-edit image-buttonなボタン（ノードタイプのフォームの表示管理の各フィールド右側の歯車ボタンとか）が消えちゃう）*/
/*
*{
box-sizing: border-box;
}
*/
/* ページ内スクロールとかfragment付きURLとかのターゲットをフラッシュしてわかりやすく */
@keyframes targetFlash {
  0% {
    background-color: unset;
  }

  20% {
    background-color: #fdfde1;
  }

  100% {
    background-color: #fdfde1;
  }
  /* 自動で元のbackground-colorに戻る */
}
:target {
    animation: targetFlash 500ms ease-out 100ms 2;
}

.toolbar-icon-bancho_common_manual_link {
  &::before{
    background-image: url("../images/toolbar-icon-google-drive.png");
  }
}
/* admin toolbarの微調整
 * デスクトップで表示してからモバイルエミュレーションに切り替えると
 * userの幅が広くなって崩れるけど、
 * page load時に処理してるやつなので調整不要
 * （モバイルエミュレーションでリロードしたら大丈夫になる）
 */
@media only screen and (min-width: 769px) {
  /* admin toolbarのボタンを小さくする */
  #toolbar-bar > .toolbar-tab > a.toolbar-icon,
  #toolbar-item-administration-tray .toolbar-menu-administration > .toolbar-menu > .menu-item > a.toolbar-icon,
  #toolbar-item-administration-tray .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-box > a.toolbar-icon{
    padding: .75em .8em .6em 2.2em;
    &::before{
      left: .5em;
      width: 1.2em;
    }
  }
  #toolbar-bar {
    /* 検索ボックスの高さ調整 */
    #admin-toolbar-mobile-search-tab ~ #admin-toolbar-search-tab .js-form-item.form-item {
      margin-top: 1px;
      margin-bottom: 1px;
      height: calc(0.75em + 0.6em + 1em - 2px);
      input[type="search"] {
        min-height: 1.3em;
        line-height: 1.8;
      }
    }
    /* content moderationの編集ボタンが高すぎるのを抑制（いま非表示にしてるかも） */
    button.toolbar-item {
      padding-top: 0.5em;
      padding-bottom: 0.3em;
    }
  }
}

#admin-toolbar-mobile-search-tab ~ #admin-toolbar-search-tab:is(div) {
  & > .form-item.form-type--search {
    margin: 0
  }
  #admin-toolbar-search-input{

  }
}
/* admin toolbarのサブメニューの幅を拡げる */
.toolbar-tray-horizontal ul li.menu-item--expanded.hover-intent ul:is(ul) {
  max-width: 300px;
  width: max-content;
  min-width: 200px;
}
/* admin toolbarの2段階目移行のメニューの位置を上にする
 * absoluteの基準が
 * 親のabsoluteなul要素なので、そんなに大変じゃなかった
 * 40pxは、admin.toolbar.cssのmargin: -40px 0 0 197pxに対応
 * でも、これだと8番目ぐらいの項目をhoverしてサブメニューが2項目とかしかなかったら
 * 選べなくなるからダメ
 */
.toolbar-tray-horizontal ul li.menu-item--expanded.hover-intent ul > li ul:is(ul) {
/*  top: 40px; */
}
/* モバイル時のadmin toolbarのボタンを小さくする */
@media only screen and (max-width: 769px) {
  .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:is(a) {
    width: 3em;
  }
}

/* タブ（特にノード上部）を折り返せるようにする */
.tabs{
  flex-wrap: wrap;
}

/*
CSS Spinner
 based on https://projects.lukehaas.me/css-loaders/
*/
.loader-css-spinner,
.loader-css-spinner:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.loader-css-spinner {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(9, 138, 135, .2);
  border-right: 1.1em solid rgba(9, 138, 135, .2);
  border-bottom: 1.1em solid rgba(9, 138, 135, .2);
  border-left: 1.1em solid rgb(9, 138, 135);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: cssSpinnerLoad8 1.1s infinite linear;
  animation: cssSpinnerLoad8 1.1s infinite linear;
}
@-webkit-keyframes cssSpinnerLoad8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes cssSpinnerLoad8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}



/* やっぱりタグを全角でとかミスがあるので */
form :is(input[type="text"], textarea){
	font-family: monospace;
}

/* autocompleteの変更にともない中身が増えた */
.node-form #autocomplete li{
	min-width: 100% !important;
	width: auto !important;
	padding: .25em .5em;
	white-space: pre-wrap;
}


/*
// 画像のtitle属性を処理するやつ
// @see bancho_common_form_node_form_alter()
// @see bancho_common.css
*/
.bancho-show-image-title-attr{
	display: block;
	margin-top: .25em;
	font-size: .75em !important;
	opacity: .8;
	text-align: right;
	line-height: 1.2;
}


.teaser-meta-markers{
	display: block;
	margin: 0;
	text-align: right;
}
.node-is-old-pickup,
.node-is-ad-content{
	display: inline-block;
	margin: 0 .2em 0 0;
	padding: 1px .25em;
	border: solid 1px #ccc;
	color: #999;
	font-size: .7em;
	box-sizing: border-box;
	font-weight: normal;
	text-indent: initial;
}
.teaser-meta-markers>span:last-child{
	margin-right: 0;
}
.node div:where(.pr, .pr_notice) {
	font-size: .9em;
}
.sponsored_by_merged{
	font-weight: normal;
}
.sponsored_by_merged .sponsored_by_entry:not(:last-child)::after {
	content: "／";
	display: inline-block;
	margin: 0 .2em;
}

/*
https://zenn.dev/catnose99/articles/e0d42812c7588c
*/
textarea{
	overflow-anchor: none
}


/*
bancho_common_preprocess_node()で2p目以降のh1を変えてる
*/
.h_p2follow{
  font-size: 1.2em !important
}
.h_p2follow .node_title_termname{
  font-size: 0.8em !important
}


details > summary{
	cursor: pointer;
}


/* inputのボタンをdeleteとかの場合に他のボタンと間違わない見え方にする。.action-linkと違ってinput要素でも使える */
/* 黒いゴミ箱アイコンにするならこれ
/* background-image: url("data:image/svg+xml,%3csvg height='16' fill='%23545560' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");*/
:is(input, button).bancho-button--danger{
  background-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%23d72222' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: 1em center;
  background-color: rgba(255,0,0,.01);
  color: rgb(220, 35, 35);
  padding-left: 2.5em;
}


.next_page_link{

}
.next_page_link_link{
  box-sizing:border-box;
  display:block;
  width:100%;
  background:transparent url("../images/nextpage_4.png") no-repeat left center;
  padding-left:180px;
  min-height:63px;
  display:flex;
  align-items:center;
  margin:1em auto;
  width:max-content;
  max-width:100%;
  text-align:left;
}

#bancho-editor-menu--block-wrapper {
  /* この56pxは、
   * @media screen and (min-width: 768px) {
   *   .panels-container__content:not(:first-child) {
   *     margin-top: 56px;
   *   }
   * }
   * に揃えてて、こんな意図
   * - desktop: 次に.panels-container__contentがあるはず。同じmarginで相殺、
   * - mobile:  全体の先頭に来るので、最初の要素との間にアキ
   */

  margin-bottom: 56px;
  margin-top: 0;
}

/* taxonomy-term-filterの下の「絞り込む単語を入力（正規表現）」が見切れることがある */
.bancho-taxonomy-term-filter ::placeholder{
  font-size: .8em;
}

/* views_uiのview編集画面で、displayごとの管理用の説明を表示してるのを見やすく */
#edit-display-settings-top {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  .views-ui-display-tab-setting {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
}

/* admin toolbarのメニューがCKEditorのツールバーパネルより上（でもstickyになったらstack context変わって負ける） */
.toolbar-tray-horizontal ul li.menu-item--expanded.hover-intent ul:is(ul) {
  z-index: calc(var(--ck-z-panel, 1) + 1);
}