@charset "utf-8";

/*--------------------------------------------------------
目次
--------------------------------------------------------
1. テーマ情報
2. ルート変数
3. タイポグラフィとフォント設定
   -- for Apple
4. for Apple
5. テキスト要素のスタイル
6. ブロックエディタのデフォルト設定とレイアウト・ブレークポイントを合わせる
7. コンテナのスタイル
8. 下層ページメインビジュアル
9. パンクズリストのスタイル
10. 見出しのスタイル
11. オリジナルブロックのスタイル
12. フッターのスタイル
13. SNSリンク
14. トップに戻るボタン
15. モバイルナビボタン
16. モバイルナビ
17. ロゴ
18. サイトヘッダー
19. ブログ関連のスタイル
20.トップページメインビジュアル
21.お問合せ

22.電設 トップページコンテンツ
   -- 新着情報
   -- 協会について
   -- 関連リンク
23.電設 ローディングアニメ
24.電設 サイドバー
25.電設 スクロールヒント
--------------------------------------------------------*/

/*--------------------------------------------------------
1. テーマ情報
--------------------------------------------------------*/
/*
Theme Name: oita-densetugyo
Theme URI:
Template: lightning
Description:
Author:
Tags:
Version: 
*/

/*--------------------------------------------------------
2. ルート変数
--------------------------------------------------------*/
:root {
    /*キーカラー*/
    --vk-color-primary: #8AE064;
    /*カスタムカラー 1*/ /*文字色*/
    --vk-color-text-body: #333333;
    /*--vk-color-custom-1: #333333;*/
    /*カスタムカラー 2*/ /*線色*/
    --vk-color-custom-2: #CCCCCC;
    /*カスタムカラー 3*/ /*ベタ塗 薄*/
    --vk-color-custom-3: #F0F2F1;
    /*カスタムカラー 4*/ /*ベタ塗 濃*/
    --vk-color-custom-4: #333333;
    /*カスタムカラー 5*/
    
    /*リンク文字色*/
    --vk-color-text-link: #63B33F;
    /*リンクホバー文字色*/
    --vk-color-text-link-hover: #8AE064;
    /*角丸*/
    --vk-size-radius: 5px;
    
    /*サイト毎設定*/
        /*ヘッダーの高さ*/
        --header-height: 150px;
        /*背景*/
        --bg-body: #F6F6F6;
        /*フッター*/
        --bg-foot: #1A1A1A;
        
        /*ノイズテクスチャ画像*/
        --texture-noise: url("img/parts/noise.jpg");
        /*透過*/
        --hover-opacity: .8;
        /*コンタクトフォーム7*/
        --contactform7-color-1: #8AE064;
    
    /*ボタン関係*/
        /*A*/
            /*ボックスシャドウ*/
            --box-shadow: 0px 0px 8px rgba(196,196,196,0.75);
            /*ボーダーカラー*/
            --btn-border: 2px solid transparent;
            /* トランジション 0.3s ボックスシャドウのみ*/
            --box-shadow-transition-3s: box-shadow 0.3s ease;
            /* トランジション 0.3s ALL（すべて）*/
            --all-transition-3s: all 0.3s ease;
        /*A hover*/
            /*ボックスシャドウ ホバー*/
            --box-shadow-hover: 0px 5px 10px rgba(196,196,196,0.75);
            /*ボーダーカラー ホバー*/
            --btn-border-hover: var(--vk-color-text-body);
    
    
    --vk-width-col-2-main: 70%;
    --vk-width-col-2-sub: calc(1000px* 0.25);
    
    /*白は #fff を直書きしてください*/
}

/*--------------------------------------------------------
3. タイポグラフィとフォント設定
--------------------------------------------------------*/

body, html {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-feature-settings: "palt";
    letter-spacing: 1px;
    font-size: 18px;
}
body {
    background-color: var(--bg-body);
    background-image: var(--texture-noise); /* ノイズテクスチャ画像 */
    background-repeat: repeat;
}
body:not(.home) .site-body {
    background-color: #fff;
}


@media (max-width: 991.98px) {
    body, html {
        font-size: var(--vk-size-text);
    }
}
@media print {
    body, html {
        background-color: transparent;
    }
}

.outfit-400 {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
}

/*--------------------------------------------------------
-- for Apple
--------------------------------------------------------*/
body {
    -webkit-text-size-adjust: 100%;
}
a[href^="tel:"] {
    color: var(--vk-color-text-body);
    text-decoration: none;
}
.device-pc a[href^="tel:"] {
    pointer-events: none;
}

.site-header-logo a:hover, address h3 a:hover {
    color: var(--vk-color-text-body);
    text-decoration: none;
}

/*--------------------------------------------------------
4. リンクのスタイル
--------------------------------------------------------*/
a, li a, p a {
    text-decoration: none;
}
a:hover, li a:hover, p a:hover {
    text-decoration: underline;
    -webkit-text-decoration-style: solid!important;
    text-decoration-style: solid!important;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

/*外部リンクにアイコンを付ける*/
.editor-styles-wrapper  a[target="_blank"]::after,
.entry a[target="_blank"]::after {
    display: inline-block;
    content: "";
    width: 11px;
    height: 11px;
    background-color: var(--vk-color-text-link);
    mask-image: url("img/parts/mask-blank-03.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    margin-left: 4px;
    margin-right: 2px;
}

/*--------------------------------------------------------
5. テキスト要素のスタイル
--------------------------------------------------------*/
b, strong {
    font-weight: 700;
}
li {
    line-height: var(--vk-line-height);
}
address {
    font-style: normal;
    line-height: var(--vk-line-height);
}

/*--------------------------------------------------------
6. ブロックエディタのデフォルト設定とレイアウト・ブレークポイントを合わせる
--------------------------------------------------------*/

/* カラムブロックのブレイクポイントを992pxにあわせる */
@media screen and (max-width: 991.98px) {
    .wp-block-columns {
        flex-wrap: wrap !important;
    }
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* カラムブロック 印刷時は横に並べる */
@media print {
    .wp-block-columns {
        flex-wrap: nowrap;
    }
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis:auto;
    }
}

/* 不要な左右マージンが入るのを回避 */
.is-layout-constrained > * {
    max-width: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 囲み（グループ）内 不要な左右マージンが入るのを回避 */
.wp-block-group h1,
.wp-block-group h2,
.wp-block-group h3,
.wp-block-group h4,
.wp-block-group h5,
.wp-block-group h6 {
    margin-left: 0!important;
    margin-bottom:  var(--vk-margin-headding-bottom)!important;
}

/*--------------------------------------------------------
7. コンテナのスタイル
--------------------------------------------------------*/
.site-body {
    padding-top: 85px!important;
    padding-bottom: 110px!important;
}
.home .site-body {
    padding-top: 90px!important;
    padding-bottom: 0!important;
}

@media print, screen and (min-width: 1200px) {
    .container {
        max-width: calc( 1000px + 15px + 15px );
    }    
}
@media print {
    .container {
        padding-left: 30px;
        padding-right: 30px;
    }
}

.site-header-container {
    max-width: calc( 1640px + 15px + 15px )!important;
}

.main-section {
    margin-bottom: 0;
}

/*--------------------------------------------------------
8. 下層ページメインビジュアル
--------------------------------------------------------*/
.page-header {
    background-color: var(--bg-body);
    background-image: var(--texture-noise); /* ノイズテクスチャ画像 */
    min-height: 0;
    padding: 0 15px;
    text-align: left;
}
@media screen and (min-width: 992px) {
    .page-header {
        margin-top:var(--header-height);
    }
}
.page-header-inner {
    background-color: #fff;
    border-radius: var(--vk-size-radius);
    min-height: 100px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 0 15px;
    max-width: 1640px;
}
@media print, screen and (min-width: 768px) {
    .page-header-inner {
        padding: 0 50px;
    }
}

/*--------------------------------------------------------
9. パンクズリストのスタイル
--------------------------------------------------------*/

.breadcrumb .container {
    max-width: calc( 1640px + 15px + 15px );
}

.breadcrumb {
    background-color: var(--bg-body);
    background-image: var(--texture-noise); /* ノイズテクスチャ画像 */
    font-size: 16px;
    line-height: var(--vk-line-height);
    padding-bottom: 30px;
}
.breadcrumb-list {
    padding: .4rem 0 .3rem;
}
.breadcrumb-list li:first-child i,
.breadcrumb-list__item--home a svg {
    display: none;
}
.breadcrumb-list li:after {
    content: "＞";
    color: var(--white);
}
.breadcrumb-list a,
.breadcrumb-list span {
    color: var(--white);
}
.breadcrumb-list a:hover {
    color: var(--white);
    text-decoration-color: var(--white);
}

/*--------------------------------------------------------
10. 見出しのスタイル
--------------------------------------------------------*/
h1, h2, h3, h4, h5, h6,
.page-header-title, h1.page-header-title {
    font-weight: 700;
}
h2, .entry-title, h1.entry-title {
    font-size: 30px;
    padding-top: 27px;
    position: relative;
}
h2::before, .entry-title::before, h1.entry-title::before {
    display: block;
    content: "";
    width: 40px;
    height: 5px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--vk-color-primary);
}
h3 {
    font-size: min(5.3vw, 24px);
    background-color: var(--vk-color-custom-3);
    border-left: 10px solid var(--vk-color-primary);
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}
@media print, screen and (min-width: 992px) {
    h3 {
        padding-left: 30px;
    }
}
h4 {
    font-size: 20px;
    border-left: 10px solid var(--vk-color-primary);
    padding-top: 0;
    padding-left: 30px;
    padding-right: 10px;
    padding-bottom: 0;
}
h5 {
    font-size: 18px;
}

.toppage-headline-wrap {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 45px;
}
.toppage-headline-wrap__headline {
    display: inline-block;
    font-size: min(10vw, 45px);
    background-image: url("img/parts/toppage-headline.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 62px 63px;
    padding: 17px 30px 0;
    margin-bottom: 8px;
    letter-spacing: 0;
}
.toppage-headline-wrap__headline::before {
    content: none;
}
.toppage-headline-wrap .outfit-400 {
    display: inline-block;
    font-size: 1rem;
    width: 100%;
}


/*--------------------------------------------------------
11. オリジナルブロックのスタイル
--------------------------------------------------------*/

/* 囲み（グループ） */
.is-style-custom-block-wrapper-1,
.is-style-custom-block-wrapper-2 {
    max-width: none;
    padding: 30px;
    border-radius: var(--vk-size-radius);
}
.is-style-custom-block-wrapper-1 {
    border: 1px solid var(--vk-color-text-body);
}
.is-style-custom-block-wrapper-2 {
    background-color: var(--vk-color-custom-3);
}
.is-style-custom-block-wrapper-1 p:last-child,
.is-style-custom-block-wrapper-2 p:last-child,
.wp-block-group[class*=wp-container-]>:is(p):last-child {
    margin-bottom: 0;
    margin-block-end: 0;
}

/* カラム */
.wp-block-columns.is-style-justify {
    justify-content: space-between;
}
.wp-block-columns.is-style-center {
    justify-content: center;
}

/*すべてのテーブル*/
table th, table td {
    font-size: 1rem;
}

/*テーブル デフォルト*/
.wp-block-table tr td:first-child {
    background-color: var(--vk-color-custom-3);        
}
.wp-block-table td {
    font-size: 1rem;
    padding: 1rem;
    line-height: var(--vk-line-height);
    border: 1px solid #ccc;
    border-left: none;
    border-right: none;
}
.wp-block-table {
    position: relative;
    padding-top: 2rem;
}
.wp-block-table figcaption {
    margin-top: 0;
    text-align: right;
    font-size: 1rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.wp-block-flexible-table-block-table tr th {
    font-weight: 700;
}

/*プラグインテーブル 縦積みのときは線を重ねる*/
@media screen and (max-width: 768px) {
    .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table.is-stacked-on-mobile tr:not(:last-child) th,
    .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table.is-stacked-on-mobile tr:not(:last-child) td,
    .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table.is-stacked-on-mobile tr:last-child th:not(:last-child),
    .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table.is-stacked-on-mobile tr:last-child td:not(:last-child) {
        border-bottom-color: transparent!important;
    }
}

/*プラグインテーブル 印刷対応*/
@media print {
    .wp-block-flexible-table-block-table.is-scroll-on-mobile table {
        min-width: 0!important;
    }
}

/* ボタンスタイル */

.wp-block-file__button {
    background-color: var(--vk-color-primary);
    color: #fff!important;
    font-weight: 700;
}
.wp-block-file__button:hover {
    opacity: .9;
    text-decoration: none;
}

/*エディタ用*/
.editor-styles-wrapper .is-style-buttonwhite .wp-block-button__link::after,
.editor-styles-wrapper .is-style-buttonblack .wp-block-button__link::after,
.editor-styles-wrapper .is-style-buttongreen .wp-block-button__link::after {
    content: "＞";
}

.is-style-buttonwhite .wp-block-button__link,
.is-style-buttonblack .wp-block-button__link,
.is-style-buttongreen .wp-block-button__link {
    background-color: #fff!important; /*エディタ用*/
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    color: var(--vk-color-text-body);
    
    border: var(--btn-border);
    border-radius: var(--vk-size-radius);
    box-shadow: var(--box-shadow);
    transition: var(--all-transition-3s);
    text-decoration: none;
}

/* ホバー時の共通スタイル */
.is-style-buttonwhite .wp-block-button__link:hover,
.is-style-buttonblack .wp-block-button__link:hover,
.is-style-buttongreen .wp-block-button__link:hover {
    /* デフォルトスタイルの上書き */
    filter: none;
    
    border-color: var(--btn-border-hover); /* ホバー時のボーダーカラー */
    box-shadow: var(--box-shadow-hover); /* シャドウを大きく */
}

/* アイコン部分のスタイル */

.is-style-buttonwhite .wp-block-button__link span.icon,
.is-style-buttonblack .wp-block-button__link span.icon,
.is-style-buttongreen .wp-block-button__link span.icon {
    transition: transform 0.3s ease; /* アイコンにスライドアニメーション */
}

/* アイコン部分のスタイル（角丸黒背景に白い三角形） */
.is-style-buttonwhite .wp-block-button__link span.icon,
.is-style-buttonblack .wp-block-button__link span.icon,
.is-style-buttongreen .wp-block-button__link span.icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background-color: var(--vk-color-custom-4);
    border-radius: 3px;
    position: relative; /* 疑似要素の配置のために必要 */
    margin-left: 8px; /* テキストとアイコンの間のスペース */
}
.is-style-buttonblack .wp-block-button__link span.icon {
    width: 17px;
    height: 17px;
    border-radius: 2px;
    background-color: #fff;
}

/* 疑似要素で白い三角形を作成 */
.is-style-buttonwhite .wp-block-button__link span.icon::after,
.is-style-buttonblack .wp-block-button__link span.icon::after,
.is-style-buttongreen .wp-block-button__link span.icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%) rotate(-90deg); /* 中央配置と回転 */
    width: 7px;
    height: 7px;
    background-color: #fff;
    clip-path: polygon(0 0, 100% 0, 50% 100%); /* 白い三角形を作成 */
}
.is-style-buttonblack .wp-block-button__link span.icon::after {
    background-color: var(--vk-color-custom-4);
}

/* ホバー時のアイコンのスライド */
.is-style-buttonwhite .wp-block-button__link:hover span.icon,
.is-style-buttonblack .wp-block-button__link:hover span.icon,
.is-style-buttongreen .wp-block-button__link:hover span.icon {
    transform: translateX(4px); /* ホバー時に右に4pxスライド */
}

/* 色ごとのスタイル */
.is-style-buttonwhite .wp-block-button__link {
    background-color: #fff;
    color: var(--vk-color-text-body);
}

.is-style-buttonblack .wp-block-button__link {
    background-color: var(--vk-color-custom-4)!important;/*エディタ用*/
    color: #fff;
}

.is-style-buttongreen .wp-block-button__link {
    background-color: var(--vk-color-primary)!important;/*エディタ用*/
    color: #fff;
}

/* ボタン内の外部リンクアイコンを調整 */
.is-style-buttonwhite .wp-block-button__link[target="_blank"]::after,
.is-style-buttonblack .wp-block-button__link[target="_blank"]::after,
.is-style-buttongreen .wp-block-button__link[target="_blank"]::after {
    display: inline-block;
    content: "";
    width: 11px;
    height: 11px;
    background-color: var(--vk-color-text-link);
    mask-image: url("img/parts/mask-blank-03.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    margin-left: 4px;
}

/* ボタン内のアイコン（▶️）の位置調整 */
.is-style-buttonwhite .wp-block-button__link .icon,
.is-style-buttonblack .wp-block-button__link .icon,
.is-style-buttongreen .wp-block-button__link .icon {
    margin-left: 8px;
    margin-right: 0; /* 外部リンクアイコンとのスペースを適宜調整 */
}

/* 外部リンクアイコンの順序を調整 */
.is-style-buttonwhite .wp-block-button__link[target="_blank"],
.is-style-buttonblack .wp-block-button__link[target="_blank"],
.is-style-buttongreen .wp-block-button__link[target="_blank"] {
    display: inline-flex;
    align-items: center;
}

.is-style-buttonwhite .wp-block-button__link[target="_blank"] > .icon,
.is-style-buttonblack .wp-block-button__link[target="_blank"] > .icon,
.is-style-buttongreen .wp-block-button__link[target="_blank"] > .icon {
    order: 2; /* ボタンのアイコンを最後に表示 */
}

.is-style-buttonwhite .wp-block-button__link[target="_blank"]::after,
.is-style-buttonblack .wp-block-button__link[target="_blank"]::after,
.is-style-buttongreen .wp-block-button__link[target="_blank"]::after {
    order: 1; /* 外部リンクアイコンをテキストの後ろに表示 */
}


/*--------------------------------------------------------
12. フッターのスタイル
--------------------------------------------------------*/
/*--------------------------------------------------------
フッターサブ
--------------------------------------------------------*/
address {
    letter-spacing: 0;
}
@media print {
    .foot-sub__flexwrap__left address {
        font-size: 14px;
    }   
}
address h3 {
    background-color: transparent;
    border: none;
    padding: 0;
    font-weight: 500;
    margin-bottom: 6px;
    font-size: min(5.6vw, 24px);
}
@media print {
    address h3 {
        font-size: 18px;
    }
}
address h3 a {
    color: var(--vk-color-text-body);
}

.foot-sub {
    border-top: 1px solid var(--vk-color-custom-2);
    padding-top: 80px;
    padding-bottom: 100px;
    
    background-image: url(img/top/bg01.png);
    background-position: top center;
    background-repeat: repeat-x;
}
.home .foot-sub {
    margin-top: 10px;
}

.foot-sub__flexwrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    --foot-sub__flexwrap-gap: 55px;
    gap: var(--foot-sub__flexwrap-gap);
}
.foot-sub__flexwrap__left,
.foot-sub__flexwrap__right {
    width: 100%;
}
@media screen and (min-width: 992px) {
    .foot-sub__flexwrap__left {
        width: 40%;
        display:flex;
        flex-flow: column;
        justify-content: space-between;
    }
    .foot-sub__flexwrap__right {
        width: calc( 60% - var(--foot-sub__flexwrap-gap) );
        display:flex;
        align-items: flex-end;
    }
}
@media print {
    .foot-sub__flexwrap__left {
        width: 40%;
        display:flex;
        flex-flow: column;
        justify-content: space-between;
    }
    .foot-sub__flexwrap__right {
        width: calc( 60% - var(--foot-sub__flexwrap-gap) );
        display:flex;
        align-items: flex-end;
    }
}

.foot-sub__flexwrap__left__contbox {
    background-color: #fff;
    border-radius: var(--vk-size-radius);
    padding: 30px 40px;
    text-align: center;
    margin-top: 20px;
}
@media screen and (max-width: 991.98px) {
    .foot-sub__flexwrap__left__contbox {
        padding: 30px;
    }
}
@media print {
    .foot-sub__flexwrap__left__contbox {
        display: none;
    }
}

.foot-sub__flexwrap__left__contbox__telnum {
    font-size: 30px;
    display: inline-block;
    margin-bottom: 6px;
    
    /*2024/11/13 リクエスト 発信解除 誤タップが心配*/
    pointer-events: none!important;
}
.foot-sub__flexwrap__left__contbox__telnum::before {
    display: inline-block;
    content: "";
    width: 20px;
    height: 20px;
    background-color: var(--vk-color-text-body);
    mask-image: url("img/parts/mask-tel.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    margin-right: 10px;
}

.foot-sub__flexwrap__left__contbox__btn {
    background-color: var(--vk-color-primary);
    border-radius: var(--vk-size-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 4px;
    color: var(--vk-color-text-body);
    font-weight: 500;
    letter-spacing: 0;
    transition: var(--box-shadow-transition-3s);
}
.foot-sub__flexwrap__left__contbox__btn:hover {
    color: var(--vk-color-text-body);
    text-decoration: none;
    box-shadow: var(--box-shadow-hover);
}
.foot-sub__flexwrap__left__contbox__btn::before {
    display: inline-block;
    content: "";
    width: 23px;
    height: 18px;
    background-color: var(--vk-color-text-body);
    mask-image: url("img/parts/mask-mail.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    margin-right: 15px;
}

.foot-gmap {
    position: relative;
    width: 100%;
    padding-top: 55.88%; /* 304 / 544 * 100 のアスペクト比 */
}
.foot-gmap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
 
/*--------------------------------------------------------
フッター本体
--------------------------------------------------------*/
.site-footer {
    background-color: var(--bg-foot);
    color: #fff;
    padding-top: 10px;
    padding-bottom: 50px;
}
.site-footer ul li a:hover {
    text-decoration: none;
}

.footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
    margin-bottom: 24px;
    padding-left: 0;
}
.footer-nav ul li a {
    display: block;
    color: #fff;
    font-size: 18px;
    text-align: center;
}

/*2024/11/13 リクエスト スマホの時はフッタのメニューを非表示*/
@media print, screen and (max-width: 991.98px) {
    .footer-nav ul li.menu-item {
        display: none;
    }
}

.footer-nav ul li.lock-pagebtn a {
    border: 1px solid #fff;
    border-radius: var(--vk-size-radius);
    min-width: 220px;
    min-height: 46px;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-nav ul li.lock-pagebtn a::before {
    content: "";
    background-color: #fff;
    display: inline-block;
    width: 15px;
    height: 20px;
    mask-image: url("img/parts/mask-lock.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    margin-right: 10px;
}

.site-footer-copyright {
    padding: 0;
}
.site-footer-copyright ul {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: 0;
}
.site-footer-copyright ul li, 
.site-footer-copyright ul li a {
    color: #fff;
    font-size: 14px;
}
.site-footer-copyright ul li {
    margin: 0;
}
.site-footer-copyright ul li:not(:first-child) {
    padding-left: 20px;
}
.site-footer-copyright ul li a {
    position: relative;
    border-right: 1px solid #fff;
    padding-right: 20px;
}

@media screen and (max-width: 991.98px) {
    .footer-nav ul {
        justify-content: flex-start;
    }
    .footer-nav ul li {        
        width: 100%;
        padding-top: 6px;
    }
    .footer-nav ul li.lock-pagebtn {
        margin-top: 12px;
    }
    .footer-nav ul li.lock-pagebtn a {
        min-width: 100%;
    }
    .site-footer-copyright ul li a {
        border: none;
    }
}


/*--------------------------------------------------------
13. SNSリンク
--------------------------------------------------------*/
.p-footer-left__sns__ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    column-gap: 12px;
}
.p-footer-left__sns__ul__li {
    margin: 0;
}
.p-footer-left__sns__ul__li a {
    display: block;
    width: 30px;
    height: 30px;
    background-color: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    text-indent: -9999px;
}
.p-footer-left__sns__ul__li.instagram a {
    mask-image: url("img/parts/mask-instagram.svg");
}
.p-footer-left__sns__ul__li.line a {
    mask-image: url("img/parts/mask-line.svg");
}
.p-footer-left__sns__ul__li.facebook a {
    mask-image: url("img/parts/mask-facebook.svg");
}
.p-footer-left__sns__ul__li.x-twitter a {
    mask-image: url("img/parts/mask-x.svg");
}
.p-footer-left__sns__ul__li a:hover {
    background-color: var(--vk-color-primary);
}

/*--------------------------------------------------------
14. トップに戻るボタン
--------------------------------------------------------*/
.page_top_btn {
    right: 15px;
    bottom: 15px;
    height: 40px;
    background-color: var(--vk-color-primary);
    box-shadow: none;
    border-radius:var(--vk-size-radius);
    background-image: url("img/parts/to-top-btn-icon.svg");
}
@media screen and (max-width: 991.98px) {
    .page_top_btn {
        right: 0;
        bottom: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

/*--------------------------------------------------------
15. モバイルナビボタン
--------------------------------------------------------*/

/*モバイルナビボタン マル*/
/*.vk-mobile-nav-menu-btn,
.vk-mobile-nav-menu-btn.menu-open {
    background-size: 80%;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    border-color: var(--vk-color-text-body);
    top: 15px;
}
.vk-mobile-nav-menu-btn.position-right {
    right: 15px;
}*/

/*モバイルナビボタン マル 「メニュー」*/
/*.vk-mobile-nav-menu-btn,
.vk-mobile-nav-menu-btn.menu-open {
    background-size: 45%;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    border-color: var(--vk-color-text-body);
    top: 15px;
    
    text-indent: 0;
    font-size: 12px;
    text-align: center;
    padding-top: 10px;
    background-position-y: 25px;
    letter-spacing: 0;
}
.vk-mobile-nav-menu-btn.position-right {
    right: 15px;
}*/

/*モバイルナビボタン シカク*/
/*.vk-mobile-nav-menu-btn {
    background: url(/wp-content/themes/lightning/_g3/inc/vk-mobile-nav/package/images//vk-menu-btn-white.svg) center 50% no-repeat;
}
.vk-mobile-nav-menu-btn.menu-open {
    background: url(/wp-content/themes/lightning/_g3/inc/vk-mobile-nav/package/images//vk-menu-close-white.svg) center 50% no-repeat;
}
.vk-mobile-nav-menu-btn.position-right {
    right: 0;
}
.vk-mobile-nav-menu-btn, .vk-mobile-nav-menu-btn.menu-open {
    top: 0;
    left: auto;
    border: none;
    border-radius: 0;
    width: 50px;
    height: 50px;
    background-size: 85%;
    background-color: #F99A5A;
}*/

/*電設 モバイルナビボタン*/
.vk-mobile-nav-menu-btn,
.vk-mobile-nav-menu-btn.menu-open {
    background-size: 45%;
    border-radius: var(--vk-size-radius);
    width: 55px;
    height: 35px;
    border-color: var(--vk-color-text-body);
    top: 23px;
    background-color: #fff;
}
.vk-mobile-nav-menu-btn {
    background-image: url("img/parts/vk-menu-btn-black-double.svg");
}
.vk-mobile-nav-menu-btn.position-right {
    right: 15px;
}

/*電設 会員専用*/
.mobile-lock-btn {
    background-color: var(--vk-color-text-body);
    color: #fff;
    font-weight: 500;
    border-radius: var(--vk-size-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    text-decoration: none;
    line-height: 35px;
    font-size: 16px;
    letter-spacing: 0;

    position: absolute;
    top: 23px;
    right: 80px;
    z-index: 1999;
}
.mobile-lock-btn::before {
    width: 13px;
    height: 16px;
    background-color: #fff;
    mask-image: url(img/parts/mask-lock.svg);
    display: inline-block;
    content: "";
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    margin-right: 5px;
}
@media print, screen and (min-width: 992px) {
    .mobile-lock-btn {
        display: none;
    }
}

/*--------------------------------------------------------
16. モバイルナビ
--------------------------------------------------------*/

/*警告を非表示*/
.veu_adminEdit.alert {
    display: none;
}

/*クリックさせない*/
.pointer-events-none>a {
    pointer-events: none;
}

/*メニューの背景*/
.vk-mobile-nav {
    background-color: rgba(255,255,255,0.9);
    border-bottom: none;
    padding: 70px 20px;
    /*height: 100%;*/
    width: 60%;
}
.vk-mobile-nav.vk-mobile-nav-open.vk-mobile-nav-right-in {
    left: 40%;
}
/*メニュー1個1個*/
.vk-mobile-nav nav>ul, .vk-mobile-nav nav ul li a {
    border: none;
}
.vk-mobile-nav nav ul li a {
    font-size: 18px;
    font-weight: 700;
    padding: 1em .5em;
}
/*子をひらくアイコン スマホ*/
.vk-menu-acc .acc-btn {
    /*border-radius: 4px;*/
    background-size: 65%;
    width: 20%;
    height: 40px;
    top: 13.125px;
}
/*子をひらくアイコン タブレット*/
.device-mobile .global-nav-list>li .acc-btn {
    background-color: #fff;
    width: 2rem;
    right: -5px;
}

/*電設menu*/
.vk-mobile-nav nav>ul {
    margin-bottom: 15px;
}
.vk-mobile-nav .cont-pagebtn {
    margin-bottom: 15px;
}
.vk-mobile-nav .cont-pagebtn a, .vk-mobile-nav .lock-pagebtn a {
    border-radius: var(--vk-size-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 4px;
    text-decoration: none;
    min-width: 127px;
    line-height: 50px;
    font-size: 18px;
    width: 100%;
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: 0;
}
.vk-mobile-nav .cont-pagebtn a {
    background-color: var(--vk-color-primary);
    color: var(--vk-color-text-body);
}
.vk-mobile-nav .lock-pagebtn a {
    background-color: var(--vk-color-text-body);
    color: #fff;
    font-weight: 700;
}
.vk-mobile-nav .cont-pagebtn a::before, .vk-mobile-nav .lock-pagebtn a::before {
    display: inline-block;
    content: "";
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    margin-right: 10px;
}
.vk-mobile-nav .cont-pagebtn a::before {
    width: 20px;
    height: 16px;
    background-color: var(--vk-color-text-body);
    mask-image: url(img/parts/mask-mail.svg);
}
.vk-mobile-nav .lock-pagebtn a::before {
    width: 15px;
    height: 20px;
    background-color: #fff;
    mask-image: url(img/parts/mask-lock.svg);
}

/*--------------------------------------------------------
17. ロゴ
--------------------------------------------------------*/
.site-header-logo {
    padding-top: 10px;
    margin-bottom: 10px;
}

.site-header-logo img {
    margin: 0;
    max-height: 20px;
}
@media print, screen and (min-width: 992px) {
    .site-header-logo {
        display: flex;
        align-items: center;
    }
    .site-header-logo img {
        max-height: 28px;
    }
}

/*電設ロゴ字*/
.site-header-logo {
    line-height: 1;
    text-align: left;
    letter-spacing: 0;
    font-weight: 500;
    /*グロナビが入りきらないので ロゴの右マージンを最低限にする*/
    margin-right: 23px!important;
}
.logomin {
    font-size: 12px;
}
.logotxt {
    font-size: 20px;
}
@media print, screen and (min-width: 992px) {
    .site-header-logo a {
        display: flex!important;
        align-items: center;
    }
    .site-header-logo a:hover {
        text-decoration: none;
    }
    .site-header-logo br {
        display: none;
    }
    .logomin {
        font-size: 18px;
        margin-right: 1em;
        display: inline-block;
        padding-top: 4px;
    }
    .logotxt {
        font-size: 30px;
    }
}

/*--------------------------------------------------------
18. サイトヘッダー
--------------------------------------------------------*/

.site-header {
    box-shadow: none;
}

@media screen and (min-width: 992px) {
    .site-header {
        position: fixed;
        
    }
}
@media print, screen and (min-width: 992px) {
    .site-header {
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;

        background-color: var(--bg-body);
        background-image: var(--texture-noise); /* ノイズテクスチャ画像 */
        /*min-height:var(--header-height);*/
        transition: top .3s;
    }
    .scrolled .site-header {
        box-shadow: 0 1px 3px rgba(0,0,0,.05);
        top: -22px;
    }
    
    
    .site-header-container {
        padding-top: 40px;
        padding-bottom: 18px;
    }
    
    .device-pc .global-nav-list>li>a:hover {
        text-decoration: none;
    }
}

@media print {
    .site-header, .scrolled .site-header {
        box-shadow: none!important;
    }
}

/*サブメニューのスクロールバーが気になるのを解決*/
.device-pc .global-nav-list>li:focus-within li:focus-within>.sub-menu, 
.device-pc .global-nav-list>li:focus-within>.sub-menu, 
.device-pc .global-nav-list>li:hover li:focus-within>.sub-menu, 
.device-pc .global-nav-list>li:hover>.sub-menu {
    overflow-y: hidden;
}

/*-----------------------------
global-nav グローバルナビゲーション
-------------------------------*/
#global-nav {
    background-color: #fff;
    border-radius: var(--vk-size-radius);
    padding: 20px 23px;
}
#global-nav li.menu-item,
#global-nav li.cont-pagebtn, #global-nav li.lock-pagebtn {
    padding: 0;
}
#global-nav li.menu-item {
    position: relative;
}
#global-nav li.menu-item::after {
    position: absolute;
    --menu-item-height: 27px;
    top: calc( 50% - ( var(--menu-item-height) / 2 ) );
    right: 0;
    content: "";
    background-color: var(--vk-color-text-body);
    display: block;
    width: 1px;
    height: var(--menu-item-height);
}
#global-nav li.menu-item a,
#global-nav li.cont-pagebtn a, #global-nav li.lock-pagebtn a {
    padding: 3px min( 1.2vw, 40px );
}
/*タブレット位まで 最初の一個は「左」パディング 持たせない*/
#global-nav li.menu-item:first-child a {
    padding-left: 0;
}
@media screen and (min-width: 1200px) {
    #global-nav li.menu-item a,
    #global-nav li.cont-pagebtn a, #global-nav li.lock-pagebtn a {
        padding: 3px min( 2vw, 40px );
    }
    /*PC位以上 最初の一個は「左」パディング MAX 23px*/
    #global-nav li.menu-item:first-child a {
        padding-left: min( 1.2vw, 23px );

    }
}
@media screen and (min-width: 1400px) {
    #global-nav li.menu-item a,
    #global-nav li.cont-pagebtn a, #global-nav li.lock-pagebtn a {
        padding: 3px 40px;
    }
}
#global-nav .global-nav-name,
#global-nav li.cont-pagebtn a, #global-nav li.lock-pagebtn a {
    display: block;
    width: 100%;
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: 0;
}
#global-nav .global-nav-name {
    font-size: 1rem;
}
#global-nav li.cont-pagebtn a, #global-nav li.lock-pagebtn a {
    font-size: 16px;
}
#global-nav li.cont-pagebtn {
    margin-left: min(1.6vw, 30px);
}
#global-nav li.lock-pagebtn {
    margin-left: 16px;
}

#global-nav li.cont-pagebtn a,
#global-nav li.lock-pagebtn a {
    border-radius: var(--vk-size-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5px;
    text-decoration: none;
    min-width: min(9.5vw, 127px);
    line-height: 32px;
    
    box-shadow: none;
    
    /*border: 1px solid transparent;*/
    transition: var(--box-shadow-transition-3s), background-color 0.3s ease;
}
#global-nav li.cont-pagebtn a:hover,
#global-nav li.lock-pagebtn a:hover {
    box-shadow: var(--box-shadow-hover);
    border-color: var(--btn-border-hover);
}
#global-nav li.lock-pagebtn a:hover {
    background-color: #000;
    border-color: #000;
}

#global-nav li.cont-pagebtn a {
    background-color: var(--vk-color-primary);
    color: var(--vk-color-text-body);
}
#global-nav li.lock-pagebtn a {
    background-color: var(--vk-color-text-body);
    color: #fff;
    font-weight: 500;
}

#global-nav li.cont-pagebtn a::before,
#global-nav li.lock-pagebtn a::before {
    display: inline-block;
    content: "";
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    margin-right: min(.6vw, 10px);
}
#global-nav li.cont-pagebtn a::before {
    width: 15px;
    height: 12px;
    background-color: var(--vk-color-text-body);
    mask-image: url("img/parts/mask-mail.svg");    
}
#global-nav li.lock-pagebtn a::before {
    width: 13px;
    height: 16px;
    background-color:#fff;
    mask-image: url("img/parts/mask-lock.svg");    
}

/*はみ出し対応*/
@media screen and (min-width: 992px) and (max-width: 1083.98px) {
    #global-nav li.lock-pagebtn a {
        text-indent: -9999px;
        min-width: 32px;
    }
    #global-nav li.lock-pagebtn a::before {
        margin-right: 0;
    }
}

/*--------------------------------------------------------
19.ブログ関連のスタイル
--------------------------------------------------------*/
.vk_posts {
    margin-left: 0;
    margin-right: 0;
}
.vk_post {
    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    position: relative;
}
.postListText {
    padding: 1.4rem 0;
}
/*日*/
.postListText_date {
    font-size: 16px;
    float: none;
    min-width: auto;
    margin-right: 0;
}
@media print, screen and (min-width: 992px) {
    .postListText_date {
        min-width: 6.25rem;
        text-align: right;
    }
}
/*カテゴリ*/
.postListText_singleTermLabel {
    float: none;
    min-width: 86px;
    margin-right: 0;
    margin-top: 0;
    padding-left: 1.5rem;
}
@media print, screen and (min-width: 992px) {
    .postListText_singleTermLabel {
        padding-right: 1.5rem;
    }
}
.postListText_singleTermLabel a {
    background-color: transparent!important;
    color: var(--vk-color-text-body)!important;
    line-height: 1;
    min-width: 86px;
    padding: 3px 4px 4px;
    font-size: 13px;
    border-radius: var(--vk-size-radius);
    border: 1px solid var(--vk-color-text-body);
}
/*題名*/
.postListText_title {
    font-size: 1rem;
    padding-top: 1rem;
    width: 100%;
}
.postListText_title a {
    text-decoration: none;
}
.postListText_title a:hover {
    
}
.postListText_title a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
@media print, screen and (min-width: 992px) {
    .postListText_title {
        width: 70%;
        padding-top: 0;
    }
}
/*ページネーション*/
ul.page-numbers li {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 1rem;
}
ul.page-numbers li:last-child {
    margin-right: 0;
}
ul.page-numbers li a, ul.page-numbers li span.page-numbers {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    margin-left: 0;
    width: 100%;
    height: 100%;
}
ul.page-numbers li a {
    background-color: var(--bg-light);
}
ul.page-numbers li span.page-numbers {
    width: 100%;
    height: 100%;
}
/*詳細記事*/
.entry-header {
    border-bottom: 1px solid var(--vk-color-custom-2);
}
.entry-meta {
    padding: .5em 0 .3em;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    min-height: 35px;
    line-height: var(--vk-line-height);
}
.entry-meta span {
    margin-right: 1em;
}
.entry-meta span:last-child {
    margin-right: 0;
}
.entry-meta span a:hover {
    text-decoration: underline;
}
.next-prev {
    display: none;
}

/*トップページ 先頭固定 お知らせ*/
.top__main-section section.sec-stickyNews {
    margin-bottom: 120px;
}
/*印刷のみ設定*/
@media print {
    .top__main-section section.sec-stickyNews {
        margin-bottom: 30px;
    }
}
.sec-stickyNews {
    background-color: var(--white);
    box-shadow: var(--box-shadow);
    border-radius: 15px;
    padding: 0 30px;
}
.sec-stickyNews__postListText {
    border-top: 1px dotted #ccc;
    border-bottom: none;
}
.sec-stickyNews__postListText:first-child {
    border-top: none;
}

/*--------------------------------------------------------
20.トップページメインビジュアル
--------------------------------------------------------*/
.swiper {
    overflow: visible;
}
@media print, screen and (min-width: 992px) {
    .swiper {
        /*margin-top:var(--header-height);*/
    }
}
.swiper-slide picture img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}
@media print {
    .swiper-slide picture img {
        height: 40vh;
    }    
}
.swiper-button-next, .swiper-button-prev {
    transition: opacity .3s;
}
.swiper-button-next:not(:hover), .swiper-button-prev:not(:hover) {
    opacity: 0;
}
/*印刷のみ設定*/
@media print {
    .lightning_swiper .swiper-slide {
        width: 100%!important;
    }
}

/*ページネーション*/
.swiper-pagination-bullets {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 5px;
        
    top: auto;
    left: auto;
    right: 30px;
    bottom: -40px!important;
    width: auto!important;
}
@media print, screen and (min-width: 992px) {
    .swiper-pagination-bullets {
        right: calc( 60px + 15px );
    }
}
.swiper-pagination-bullet {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    /*background-color: var(--swiper-theme-color);*/
    outline: none;

    display: inline-block;
    margin: 0!important;
}
.swiper-pagination-bullet-active {
    background-color: var(--swiper-theme-color);
}

/*-----------
電設 オリジナル
-------------*/
.mainvisual {
    margin-left: auto;
    margin-right: auto;
    padding-top: 30px;
    width: 100%;
    max-width: calc( 1640px + 15px + 15px );
}
@media screen and (min-width: 992px) {
    .mainvisual {
        margin-top: var(--header-height);
    }
}

.mainvisual__header {
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    z-index: 1;
}

.mainvisual__header__text {
    margin-bottom: 45px;
    padding: 4px 4px 0;
}
@media screen and (max-width: 991.98px) {
    .mainvisual__header__text {
        padding-top: 11px;
    }
}

.mainvisual__header__text h2 {
    font-size: min(8.6vw, 45px);
    line-height: 1.5;
    padding: 0;
    letter-spacing: 2px;
    margin-bottom: 19px;
    
}
.mainvisual__header__text h2::before {
    content: none;
}
.mainvisual__header__text h2 span {
    display: inline-block;
}

.mainvisual__header__text p {
    font-size: min(4.6vw, 20px);
    margin: 0;
    line-height: 1.2;
}

.mainvisual__imgwrap {
    position: relative;
    margin-left: 15px;
    margin-right: 15px;
}

.mainvisual__imgwrap__oita {
    display: block;
    width: min(70vw, 681px);
    height: auto;
    position: absolute;
    top: -16vw;
    right: 0;
}
@media screen and (min-width: 576px) {
    .mainvisual__imgwrap__oita {
        width: min(50vw, 681px);
        top: -20vw;
    }
}
@media print, screen and (min-width: 992px) {
    .mainvisual__imgwrap__oita {
        top: auto;
        bottom: min(40vw, 420px);
    }
}

.mainvisual__imgwrap__img {
    display: block;
    width: 100%;
    height: 480px;
    object-fit: cover;
    object-position: 16% center;
    border-radius: 10px;
}

.highlight {
    background: linear-gradient(transparent 60%, #a8f085 0%);
}

/*--------------------------------------------------------
21.お問合せ
--------------------------------------------------------*/
.form__wrap {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}
.wpcf7 .template01 {
  color: var(--vk-color-text-body);
  font-size: 1rem;
}
.wpcf7 .template01 a {
  margin: 0;
  padding: 0;
  text-decoration: underline;
  color: inherit;
  transition: opacity .25s;
}
.wpcf7 .template01 a:hover {
  opacity: .5;
  transition: opacity .25s;
}
.wpcf7 .template01 div.form__row {
  margin: 0;
  padding: 0;
  margin-bottom: 15px;
}
.wpcf7 .template01 div.form__row.row-privacy {
  margin-top: 3.5em;
  text-align: center;
}
.wpcf7 .template01 div.form__row.row-submit {
  margin-top: 3em;
  text-align: center;
}
.wpcf7 .template01 p.form__txt,
.wpcf7 .template01 p.form__label,
.wpcf7 .template01 p.form__body {
  margin: 0;
  margin-bottom: .5em;
  padding: 0;
  box-sizing: border-box;
}
.wpcf7 .template01 p.form__txt {
    font-size: 14px;
}
.wpcf7 .template01 p.form__label label {
  position: relative;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
    font-weight: 700;
}
.wpcf7 .template01 p.form__label.is-required label {
    padding-right: calc( 42px + 15px );
}
.wpcf7 .template01 p.form__label.is-required label::after {
    content: "必須";
    display: block;
    position: absolute;
    top: calc( 50% - ( 24px / 2 ) );
    right: 0;
    width: 42px;
    padding: 0 5px;
    background-color: #fff;
    color: #dc3232;
    border: 1px solid #dc3232;
    font-size: 12px;
    text-align: center;
    box-sizing: border-box;
    border-radius: var(--vk-size-radius);
    line-height: 24px;
}
/* テキストフィールド */
.wpcf7 .template01 input[type=text],
.wpcf7 .template01 input[type=tel],
.wpcf7 .template01 input[type=email],
.wpcf7 .template01 input[type=url],
.wpcf7 .template01 input[type=date],
.wpcf7 .template01 input[type=number],
.wpcf7 .template01 textarea {
  width: 100%;
  /*margin: 0;*/
  border: 1px solid #ccc;
  border-radius: var(--vk-size-radius);
  box-shadow: none;
  background-color: #fff;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.wpcf7 .template01 input[type=text],
.wpcf7 .template01 input[type=email],
.wpcf7 .template01 input[type=url],
.wpcf7 .template01 input[type=date],
.wpcf7 .template01 input[type=number] {
    width: 443px;
    max-width: 100%;
}
.wpcf7 .template01 input[type=tel] {
    width: 268px;
    max-width: 100%;
}
.wpcf7 .template01 .width-m input[type=text] {
    width: 686px;
    max-width: 100%;
}
/* テキストフィールド placeholder */
.wpcf7 .template01 input[type=text]::placeholder,
.wpcf7 .template01 input[type=tel]::placeholder,
.wpcf7 .template01 input[type=email]::placeholder,
.wpcf7 .template01 input[type=url]::placeholder,
.wpcf7 .template01 input[type=date]::placeholder,
.wpcf7 .template01 input[type=number]::placeholder,
.wpcf7 .template01 textarea::placeholder {
  color: #ccc;
}
.wpcf7 .template01 input[type=text]:-ms-input-placeholder,
.wpcf7 .template01 input[type=tel]:-ms-input-placeholder,
.wpcf7 .template01 input[type=email]:-ms-input-placeholder,
.wpcf7 .template01 input[type=url]:-ms-input-placeholder,
.wpcf7 .template01 input[type=date]:-ms-input-placeholder,
.wpcf7 .template01 input[type=number]:-ms-input-placeholder,
.wpcf7 .template01 textarea:-ms-input-placeholder {
  color: #ccc;
}
.wpcf7 .template01 input[type=text]::-ms-input-placeholder,
.wpcf7 .template01 input[type=tel]::-ms-input-placeholder,
.wpcf7 .template01 input[type=email]::-ms-input-placeholder,
.wpcf7 .template01 input[type=url]::-ms-input-placeholder,
.wpcf7 .template01 input[type=date]::-ms-input-placeholder,
.wpcf7 .template01 input[type=number]::-ms-input-placeholder,
.wpcf7 .template01 textarea::-ms-input-placeholder {
  color: #ccc;
}
/* テキストフィールド フォーカス時 */
.wpcf7 .template01 input[type=text]:focus,
.wpcf7 .template01 input[type=tel]:focus,
.wpcf7 .template01 input[type=email]:focus,
.wpcf7 .template01 input[type=url]:focus,
.wpcf7 .template01 input[type=date]:focus,
.wpcf7 .template01 input[type=number]:focus,
.wpcf7 .template01 textarea:focus {
  outline: 0;
  border: 1px var(--vk-color-text-body) solid;
}
/* チェックボックス */
.wpcf7 .template01 input[type=checkbox] {
  display: none;
}
.wpcf7 .template01 input[type=checkbox] + span {
  cursor: pointer;
  position: relative;
  margin: 0;
  padding: 0 1em 0 1.8em;
  font-size: inherit;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template01 input[type=checkbox] + span::before {
  content: "";
  opacity: 1;
  display: block;
  position: absolute;
  top: 3px;
  left: 0;
  width: 1.24em;
  height: 1.24em;
  border: 1px solid #ccc;
  border-radius: var(--vk-size-radius);
  background-color: #fff;
  box-sizing: border-box;
  transition: opacity .25s ease;
  z-index: 1;
}
.wpcf7 .template01 input[type=checkbox] + span::after {
  content: "";
  opacity: 0;
  display: block;
  position: absolute;
  top: calc( 0.15em + 3px );
  left: 0.44em;
  width: 0.4em;
  height: .8em;
  border-bottom: 3px solid #000;
  border-right: 3px solid #000;
  box-sizing: border-box;
  transform: rotate(40deg);
  transition: opacity .25s ease;
  z-index: 10;
}
.wpcf7 .template01 input[type=checkbox]:checked + span {
  color: var(--contactform7-color-1); /*アクセシビリティ無視*/
  transition: all .25s ease;
}
.wpcf7 .template01 input[type=checkbox]:checked + span::before {
  opacity: 1;
  transition: opacity .25s ease;
}
.wpcf7 .template01 input[type=checkbox]:checked + span::after {
  opacity: 1;
  border-bottom: 2px solid var(--contactform7-color-1); /*アクセシビリティ無視*/
  border-right: 2px solid var(--contactform7-color-1); /*アクセシビリティ無視*/
  transition: opacity .25s ease;
}
/* ラジオボタン */
.wpcf7 .template01 input[type=radio] {
  display: none;
}
.wpcf7 .template01 input[type=radio] + span {
  cursor: pointer;
  position: relative;
  margin: 0;
  padding: 0 1em 0 1.8em;
  font-size: inherit;
  transition: opacity .25s ease;
}
.wpcf7 .template01 input[type=radio] + span::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template01 input[type=radio] + span::after {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template01 input[type=radio]:checked + span {
  color: var(--contactform7-color-1);
  transition: opacity .25s ease;
}
.wpcf7 .template01 input[type=radio]:checked + span::after {
  opacity: 1;
  top: .2em;
  left: .2em;
  width: .6em;
  height: .6em;
  background-color: var(--contactform7-color-1); /*アクセシビリティ無視*/
  border-radius: 50%;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
/* セレクト */
.wpcf7 .template01 span.select-wrap {
  position: relative;
  width: 250px;
  margin: 0;
  padding: 0;
}
.wpcf7 .template01 select {
  cursor: pointer;
  width: 250px;
  max-width: 100%;
  margin: 0;
  /*padding: .5em 2.5em .5em 1em;*/
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: none;
  background-color: #fff;
  color: inherit;
  line-height: 1;
  box-sizing: border-box;
  transition: border-color 0.2s ease, outline 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
    
    font-family: inherit;
    font-size: 14px;
}
.wpcf7 .template01 select::-ms-expand {
  display: none;
}
.wpcf7 .template01 span.select-wrap::after {
  content: "";
  pointer-events: none;
  position: absolute;
  display: block;
  width: .6em;
  height: .6em;
  top: 50%;
  right: 1em;
  margin-top: -3px;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  transform: rotate(45deg) translateY(-50%);
  transform-origin: 50% 0;
  box-sizing: border-box;
}
.wpcf7 .template01 select:focus {
  outline: 0;
  border: 1px var(--vk-color-text-body) solid;
}
.wpcf7 .template01 span.select-wrap:focus-within::after {
  border-bottom: 1px solid var(--vk-color-text-body);
  border-right: 1px solid var(--vk-color-text-body);
}
/* 送信ボタン */
.wpcf7 .template01 .submit-btn {
  position: relative;
  width: 320px;
  height: 65px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}
.wpcf7 .template01 input[type="submit"] {
  cursor: pointer;
  width: 320px;
  max-width: 100%;
  padding: 18px;
  border-radius: 0;
  box-shadow: none;
  border: 1px solid var(--vk-color-primary);
  background-color: var(--vk-color-primary);
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  transition: opacity .25s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
    
    font-size: 18px;
    border-radius: var(--vk-size-radius);
    letter-spacing: 1em;
}
.wpcf7 .template01 input[type="submit"]:disabled {
  cursor: not-allowed;
  box-shadow: none!important;
  border: 1px solid #f8f8f8!important;
  background-color: #f8f8f8!important;
  color: #999!important;
}
.wpcf7 .template01 input[type="submit"]:hover {
    /*transition: opacity .25s, background-color .25s;*/
    opacity: .9;
}
.wpcf7 .template01 input[type="submit"]:not(:disabled):hover {
    color: #fff;
}
.wpcf7 .template01 input[type="submit"]:focus {
  outline: 1px #eee solid;
  border: 1px var(--vk-color-text-link-hover) solid;
}
.wpcf7 .template01  span.wpcf7-list-item {
  margin: 0 1em .2em 0;
}
.wpcf7 .template01 .ajax-loader {
  display: block;
}
.wpcf7 form .wpcf7-response-output {
    margin: 2em 0 1em!important;
    padding: 30px!important;
    border-width: 1px!important;
    text-align: center;
    position: relative;
    z-index: 1;
}
.wpcf7-spinner {
    background-color: var(--vk-color-text-body)!important;
    margin-top: 24px!important; 
}
/*バリデーション*/
.wpcf7 .template01 input[type=text].wpcf7-not-valid, 
.wpcf7 .template01 input[type=tel].wpcf7-not-valid, 
.wpcf7 .template01 input[type=email].wpcf7-not-valid, 
.wpcf7 .template01 input[type=url].wpcf7-not-valid, 
.wpcf7 .template01 input[type=date].wpcf7-not-valid, 
.wpcf7 .template01 input[type=number].wpcf7-not-valid, 
.wpcf7 .template01 textarea.wpcf7-not-valid {
    background-color: rgba(255, 75, 0, .1) !important;
}
/*CF7を利用した問い合わせフォーム送信時にコンテンツを消す*/
.wpcf7-form .sent-displaynone {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 1;
    overflow: hidden; /* コンテンツが高さを超えた場合に非表示にする */
}
.wpcf7-form.sent .sent-displaynone {
    max-height: 0;
    opacity: 0;
}
.wpcf7-form.sent p.sent-displaynone,
.wpcf7-form.sent p.sent-displaynone+h2 {
    margin: 0!important;
}
@media only screen and (max-width: 768px) {
    .wpcf7 .template01 p.form__label.is-required label {
        display: inline-block;
    }
    .wpcf7 .template01 p.form__label.is-required label::after {
        top: 1px;
    }
}

/*--------------------------------------------------------
22.電設 トップページコンテンツ
--------------------------------------------------------*/
section {
    margin-bottom: 80px;
}

/*新着情報*/
.top-news-posts {
    margin-top: -10px;
}
.top-news-posts .postListText {
    background-color: var(--vk-color-custom-3);
    border: none;
    border-radius: var(--vk-size-radius);
    margin-bottom: 7px;
    padding-left: 15px;
    padding-right: 15px;
}
.top-news-more {
    margin-top: 37px;
}

/*協会について*/
p.about-description {
}
.about-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    --about-links-gap:15px;
    gap: var(--about-links-gap);
    padding: 50px var(--about-links-gap);
    border-radius: var(--vk-size-radius);
    
    background-image: url("img/top/bg01.png");
    background-position: top center;
    background-repeat: repeat-x;
    
    margin-top: -10px;
    margin-left: -15px;
    margin-right: -15px;
}
@media print, screen and (min-width: 576px) {
    .about-links {
        --about-links-gap:26px;
        padding: 55px 60px;
        
        margin-left: 0;
        margin-right: 0;
    }
}

.about-links__item {
    width: calc( ( 100% - var(--about-links-gap)) / 2 );
}
@media screen and (min-width: 992px) {
    .about-links__item {
        width: calc((100% - (var(--about-links-gap) * 3)) / 4);
    }
}

.about-links__item a {
    background-color: #fff;
    box-shadow: var(--box-shadow);
    border-radius: var(--vk-size-radius);
    padding: 19px;
    color: var(--vk-color-text-body);
    display:flex;
    flex-flow: column;
    justify-content:flex-end;
    align-items: center;
    
    transition: var(--all-transition-3s);
    border: var(--btn-border);
}
.about-links__item a:hover {
    text-decoration: none;
    box-shadow: var(--box-shadow-hover);
    border-color: var(--btn-border-hover);
}
@media print, screen and (min-width: 992px) {
    .about-links__item a img {
    transition: transform 0.3s ease;
    }
    .about-links__item a:hover img {
    transform: scale(1.1);
    }    
}

.about-links__item a span.icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background-color: var(--vk-color-custom-4);
    border-radius: 3px;
    position: relative;
    margin-top: 20px;
    margin-left: auto;
    transition: transform 0.3s ease;
}
.about-links__item a span.icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%) rotate(-90deg);
    width: 7px;
    height: 7px;
    background-color: #fff;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.about-links__item a:hover span.icon {
    transform: translateX(4px);
}

/*関連リンク*/

.bnr-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    --bnr-links-gap:19px;
    gap: var(--bnr-links-gap);
    border-radius: var(--vk-size-radius);
    margin-bottom: 30px;
}
.bnr-links h5 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 3px;
}
.bnr-links p {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
    line-height: 1.4;
    padding-left: 3px;
}
.bnr-links__item {
    width: 100%;
    display: flex;
}
@media print, screen and (min-width: 992px) {
    .bnr-links {
        --bnr-links-gap:39px;
    }
    .bnr-links__item {
        width: calc( ( 100% - var(--bnr-links-gap)) / 2 );
    }
}
.bnr-links__item a {
    background-color: #fff;
    box-shadow: var(--box-shadow);
    border-radius: var(--vk-size-radius);
    padding: 25px 30px 20px;
    color: var(--vk-color-text-body);
    display:flex;
    flex-flow: column;
    justify-content:space-between;
    flex-grow: 1;
    transition: var(--box-shadow-transition-3s);
}
.bnr-links__item a:hover {
    text-decoration: none;
    box-shadow: 0px 0px 15px rgba(196, 196, 196, 0.75);
}
.bnr-links__item a span.icon {
    display: inline-block;
    content: "";
    width: 14px;
    height: 14px;
    background-color: var(--vk-color-text-body);
    mask-image: url("img/parts/mask-blank-03.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    margin-top: 0;
    margin-left: auto;
    margin-right: -10px;
}

.text-links {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 18px;
    font-weight: 700;
}
.text-links li {
    display: inline-block;
    margin-right: 30px;
}
.text-links a {
    color: var(--vk-color-text-body);
    text-decoration: underline;
    text-decoration-style: solid;
}
.text-links a[target="_blank"]::after {
    display: inline-block;
    content: "";
    width: 11px;
    height: 11px;
    background-color: var(--vk-color-text-link);
    mask-image: url("img/parts/mask-blank-03.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    margin-left: 10px;
}

/*--------------------------------------------------------
23.電設 ローディングアニメ
--------------------------------------------------------*/
#loading {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: var(--bg-body);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s ease; /* フェードアウト時間0.5秒に合わせる */
}
.circle {
    width: 50px;
    height: 50px;
    border: 5px solid var(--vk-color-primary);
    border-top: 5px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* ×ボタンのスタイル */
#close-loading {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 52px;
    font-weight: 500;
    cursor: pointer;
    color: #ccc;
    display: none; /* 初期状態で非表示にする */
}

/*まとめてホバー設定*/
@media screen and (min-width: 992px) {
    .site-header-logo a:hover,
    #global-nav li.menu-item a:hover,
    .text-links a:hover,
    .footer-nav ul li a:hover,
    .site-footer-copyright ul li a:hover {
        opacity: var(--hover-opacity);
    }
}

/*--------------------------------------------------------
24.電設 サイドバー
--------------------------------------------------------*/

@media screen and (max-width: 991.98px) {
    body.sidebar-fix .site-body-container {
        display: flex;
        flex-wrap: wrap;
        gap: 60px;
    }
    .sub-section {
        order: 0;
    }
    .main-section {
        order: 1;
    }    
}

/*サブセクション 印刷対応*/
@media print {
    .sub-section {
        display: none;
    }
}

.sub-section-title {
    border: none;
    padding: 0;
    text-align: center;
    margin-bottom: .8rem!important;
}
.widget_nav_menu>div>ul li {
    margin-bottom: 4px;
}
.widget_nav_menu>div>ul li a {
    background-color:var(--vk-color-custom-3);
    border-radius: var(--vk-size-radius);
    border: none;
    color: var(--vk-color-text-body);
    position: relative;
    padding: 1em 2em;
    transition: background-color .25s;
}
.widget_nav_menu>div>ul li a::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid black;
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%); /* 垂直中央揃え */
}
@media screen and (max-width: 991.98px) {
    .widget_nav_menu>div>ul li a::after {
        border-left: 5px solid transparent; /* 左右を透明に */
        border-right: 5px solid transparent;
        border-top: 8px solid black; /* 上向きに黒の三角 */
        border-bottom: none; /* 下の線を削除 */
    }
}
.widget_nav_menu>div>ul li a:hover {
    background-color: var(--vk-color-primary);
}

/*--------------------------------------------------------
25.電設 スクロールヒント
--------------------------------------------------------*/
.scroll-hint-icon {
    border-radius: var(--vk-size-radius);
    background: var(--vk-color-primary);
}
.scroll-hint-text {
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 1;
}
.c-scrollHint {
    -webkit-animation: FloatHorizontal 2s ease-in-out infinite alternate;
    animation: FloatHorizontal 2s ease-in-out infinite alternate;
    margin-bottom: 2px!important;
    margin-top: 3em;
    text-align: right;
}
.c-scrollHint span {
    align-items: center;
    display: inline-flex;
    font-size: 12px;
    line-height: 1;
    opacity: .75;
    vertical-align: middle;
}
@media (min-width: 768px){
.sp_, .sp_only {
    display: none!important;
}}
.c-scrollHint span i {
    font-size: 16px;
    margin-left: 4px;
}