/* =========================================
   WhaleFall Block Presets
   - core/button: is-style-wf-arrow（矢印ボタン）
   - core/group : is-style-wf-box（ボックス）
========================================= */


/* --------------------------------
  矢印ボタン（btn1相当）
  対象：.wp-block-button.is-style-wf-arrow
-------------------------------- */

/* 単一記事だけ色指定したいなら（任意）
.single .contents__main .wp-block-button.is-style-wf-arrow .wp-block-button__link{
  color: black;
  border-bottom: none;
}
*/
/* --------------------------------
  Buttonsブロック：flexを潰して block にする
-------------------------------- */
/*
/* ここが本丸：標準の is-layout-flex をこの範囲だけ上書き */
/*.wp-block-buttons.is-layout-flex.wp-block-buttons-is-layout-flex{
  display: block !important;
}*/

/* 子ボタンを block に */
/*.wp-block-button.is-style-wf-arrow{
  display: block;
  margin: 0;
}*/
.wp-block-buttons.is-style-wf-buttons-block.is-layout-flex,
.wp-block-buttons.is-style-wf-buttons-block.wp-block-buttons-is-layout-flex{
  display: block !important;
}
.wp-block-buttons.is-style-wf-buttons-block > .wp-block-button{
  display: block;
  margin: 0;
}

/* ボタン同士の間隔（任意） */
.wp-block-buttons.is-style-wf-buttons-block > .wp-block-button + .wp-block-button{
  margin-top: 14px;
}

.wp-block-button.is-style-wf-arrow .wp-block-button__link{
  font-family: "Share Tech Mono", "Noto Sans JP", sans-serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;

  display: block;
  position: relative;
  box-sizing: border-box;

  max-width: 180px;
  text-align: center;

  padding: 4px 16px 4px 0;
  margin: 24px;
  margin-inline: auto;

  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;

  background: transparent;
  border-radius: 0;
}

/* 横線 */
.wp-block-button.is-style-wf-arrow .wp-block-button__link::before{
  content: "";
  display: block;
  position: absolute;
  width: 180px;
  height: 1px;
  background: #333;
  bottom: 0;
  left: 0;
  transition: all 0.3s;
}

/* 斜め線（矢じり） */
.wp-block-button.is-style-wf-arrow .wp-block-button__link::after{
  content: "";
  display: block;
  position: absolute;
  width: 30px;
  height: 1px;
  background: #333;
  transform: rotate(40deg);
  right: -3px;
  bottom: 10px;
  transition: all 0.3s;
}

/* hover: 右へスライド */
.wp-block-button.is-style-wf-arrow .wp-block-button__link:hover::after,
.wp-block-button.is-style-wf-arrow .wp-block-button__link:hover::before{
  transform: translateX(20px);
}

/* after は rotate もあるので hover時に transform を上書きしないよう別指定 */
.wp-block-button.is-style-wf-arrow .wp-block-button__link:hover::after{
  transform: translateX(20px) rotate(40deg);
}

/* --------------------------------
  ボックス（core/group）
-------------------------------- */
.wp-block-group.is-style-wf-box{
  border: 1px solid rgba(0,0,0,.18);
  padding: 1.1rem 1.2rem;
  margin: 1rem 0;
  background: rgba(255,255,255,.50);
}
.wp-block-group.is-style-wf-box > *:first-child{ margin-top: 0; }
.wp-block-group.is-style-wf-box > *:last-child{  margin-bottom: 0; }