/*
Theme Name: Lightning Child
Theme URI:
Template: lightning
Description:
Author:
Tags:
Version: 0.6.1
*/

/* ===================================================
   サイト共通CSS　使い方メモ
   ---------------------------------------------------
   このCSSは、子テーマのstyle.cssに書いてあるので、
   すべてのページで自動的に効きます。

   ■ vkp_button-through-arrow（矢印ボタン）
     VKパターンライブラリの「続きを見るボタン」用。
     ボタンの幅を、置いた場所の幅の2/3（最大260px）に自動調整し、
     矢印を小さめにしている。
     ボタンにはパターンを貼ったときから、このクラス名が付いている。

   ■ spec-table（仕様一覧の表）
     項目列の幅を25%に固定する。
     テーブルブロックの「高度な設定」→「追加CSSクラス」に
     spec-table を追加して使う。

   ■ card-cols（カード型のカラム）
     カードのボタンを下端にそろえる。
     親のカラムブロックの「追加CSSクラス」に
     card-cols を追加して使う。
     ※ボタンは各カラムの一番下のブロックにすること。

　■tab-head（角丸タブ見出し：耳と本体のすき間をなくす）
　　実例ページの「この家の作り」セクションのBOXの見出し部分、耳と本体の隙間をなくす

  ■ 注意：各ページに「ボタン調整」のパターンが残っていると、
     このstyle.cssを書き換えても、そのページには反映されない。
     CSSを変更するときは、先にパターンを外すこと。
   =================================================== */


/* ---------- 矢印ボタン：基本のデザイン ---------- */
.vkp_button-through-arrow.vk_button .vk_button_link.is-style-outline {
 position: relative;
 z-index: 0;
 border-radius: 0;
 padding: 12px 35px;
 letter-spacing: 0.1em;
 width: 240px;
}

.vkp_button-through-arrow.vk_button .vk_button_link.is-style-outline::before {
 content: '';
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 0;
 height: 100%;
 background-color: currentColor;
 z-index: -1;
 transition: .3s;
}

.vkp_button-through-arrow.vk_button .vk_button_link.is-style-outline:hover::before {
 width: 100%;
}

.vkp_button-through-arrow.vk_button .vk_button_link.is-style-outline .vk_button_link_caption::before {
 content: '';
 position: absolute;
 display: block;
 width: 80px;
 height: 1px;
 bottom: 50%;
 right: -45px;
 border-bottom: solid 2px currentColor;
}

.vkp_button-through-arrow.vk_button .vk_button_link.is-style-outline .vk_button_link_caption::after {
 content: '';
 position: absolute;
 display: block;
 width: 14px;
 height: 2px;
 background: currentColor;
 bottom: calc(50% + 5px);
 right: -45px;
 transform: rotate(45deg);
}

.vkp_button-through-arrow.vk_button .vk_button_link.is-style-outline:hover {
 opacity: unset;
 box-shadow: unset;
 background-color: transparent !important;
 border: solid 1px;
}


/* ---------- 矢印ボタン：幅の自動調整 ---------- */
/* ボタンの外枠：置いた場所の幅いっぱいに固定 */
.vkp_button-through-arrow.vk_button {
 display: block !important;
 width: 100% !important;
 max-width: 100% !important;
 align-self: stretch !important;
 box-sizing: border-box !important;
 padding-right: 0 !important;
}

/* ボタン本体：置いた場所の幅の2/3（最大260px） */
.vkp_button-through-arrow.vk_button .vk_button_link.is-style-outline {
 display: inline-block !important;
 box-sizing: border-box !important;
 width: 66.6% !important;
 max-width: 260px !important;
 min-width: 0 !important;
 padding: 12px 30px 12px 10px !important;
 letter-spacing: 0.05em !important;
}

/* 文字部分：折り返さない */
.vkp_button-through-arrow.vk_button .vk_button_link,
.vkp_button-through-arrow.vk_button .vk_button_link * {
 white-space: nowrap !important;
 word-break: keep-all !important;
}

/* 矢印の線 */
.vkp_button-through-arrow.vk_button .vk_button_link.is-style-outline .vk_button_link_caption::before {
 width: 54px !important;
 right: -30px !important;
}

/* 矢印の先端 */
.vkp_button-through-arrow.vk_button

/* ---------- 角丸タブ見出し：耳をタブ本体に直接描く ---------- */
/* 横並びのグループ（tab-head）の中の、左右の耳のグループは隠す */
.tab-head > *:first-child,
.tab-head > *:last-child {
 display: none !important;
}
/* 真ん中の青いタブ */
.tab-head > *:nth-child(2) {
 position: relative !important;
 margin-left: 0 !important;
 margin-right: 0 !important;
}
/* 左の耳 */
.tab-head > *:nth-child(2)::before {
 content: '' !important;
 position: absolute !important;
 top: 0 !important;
 left: -0.6em !important;
 width: 0.6em !important;
 height: 0.6em !important;
 background: radial-gradient(circle at 0 100%, transparent 0.6em, var(--wp--preset--color--vk-color-primary) calc(0.6em + 0.5px)) !important;
}
/* 右の耳 */
.tab-head > *:nth-child(2)::after {
 content: '' !important;
 position: absolute !important;
 top: 0 !important;
 right: -0.6em !important;
 width: 0.6em !important;
 height: 0.6em !important;
 background: radial-gradient(circle at 100% 100%, transparent 0.6em, var(--wp--preset--color--vk-color-primary) calc(0.6em + 0.5px)) !important;
}