@charset "utf-8";
/*
Theme Name: Lightning Child
Template: lightning
Author:アートフレア株式会社
Version: 1.2
*/
/* 標準データ最終更新日：2025/04/14  */


/*
 * WEBフォントの読み込み（@import url('https://fonts～'); ）はHeader.phpで行う
*/


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  General　全体的な設定
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* :root設定、bodyへの上書き、カラー変数設定など */


.fw-bold{
	font-weight:bold;
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Common 汎用パーツ系
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 繰り返しボタン・見出し、余白設計など 汎用パーツへの上書き */



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Header ヘッダーまわり
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* ヘッダー固定 */
/*
body  {
	overflow-x: unset !important;
    display: flex;
    flex-direction: column;
}
.device-pc #site-header {
    position: sticky;
    top: 0;
}
.logged-in.device-pc #site-header {
    top: 32px;
}
*/

/* グローバルナビ */
.global-nav-list>li>a {
	transition: .3s;
	border-bottom: 3px solid transparent;
}
.global-nav-list>li>a:hover,
.global-nav-list>li.current-menu-item>a {
    color: var(--vk-color-custom-1);
    border-bottom: 3px solid var(--vk-color-custom-1);
}

/* ナビゲーション全体の調整 */
.global-nav-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: flex-end; /* 右寄せ */
}

/* 各メニュー項目の枠組み（斜めにする） */
.global-nav-list > li {
    margin-left: -15px; /* 重なり具合を調整 */
    transform: skewX(-25deg); /* ここで平行四辺形にする */
    overflow: hidden;
}

/* メニュー内のリンク（文字をまっもどす） */
.global-nav-list > li > a {
    display: block;
    padding: 15px 30px;
    text-decoration: none;
    color: #333 !important;
    font-weight: bold;
    transform: skewX(25deg); /* 親の斜めを打ち消して文字を正位置に */
}

/* --- 背景色の設定（左から順番に） --- */

/* 1番目：ピンク */
.global-nav-list > li:nth-child(1) {
    background-color: #f2d1ed;
}


/* 1. ヘッダー自体の余白と影を消して、下の要素と密着させる */
.site-header {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important; /* 下の影を消す */
    border-bottom: none !important; /* 下線を消す */
}

/* 2. ナビゲーション全体の高さを調整して隙間をなくす */
.global-nav-list {
    margin-bottom: 0 !important;
    align-items: stretch; /* 子要素の高さを揃える */
}

/* 3. 各メニュー項目（平行四辺形）の下側の隙間をゼロにする */
.global-nav-list > li {
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
}

/* 4. メインイメージ（トップセクション）側の余白もリセット */
.site-body {
    padding-top: 0 !important;
}

/* Lightning特有のコンテナの余白を消す場合 */
.site-header .container {
    padding-bottom: 0 !important;
}
/* 2番目：薄緑 */
.global-nav-list > li:nth-child(2) {
    background-color: #c9f0db;
}

/* 3番目：薄青 */
.global-nav-list > li:nth-child(3) {
    background-color: #d1e8f2;
}

/* 4番目：薄赤 */
.global-nav-list > li:nth-child(4) {
    background-color: #f2d1d1;
}

/* ホバー時に少し明るくする（お好みで） */
.global-nav-list > li:hover {
    opacity: 0.8;
}

/* スマホでは斜めを解除する場合 */
@media (max-width: 991px) {
    .global-nav-list > li {
        transform: none;
        margin-left: 0;
    }
    .global-nav-list > li > a {
        transform: none;
    }
}

.global-nav-list li {
    top: 18px;
    line-height: 2;
    font-size: 25px;
}

/* ホバー時の下線を消す */
.global-nav-list > li > a:hover {
    text-decoration: none !important; /* リンクの下線を消す */
    border-bottom: none !important;  /* ボーダーによる線を消す */
}

/* Lightningの標準スタイルが干渉している場合 */
.global-nav-list li a::after {
    display: none !important; /* 装飾用のライン要素を非表示にする */
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Footer フッターまわり
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* フッターウィジェット、フッターロゴ、コピーライト */



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Toppage トップページ
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* パーツごとにコメントアウトで注釈を入れてください。 */



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Pageheader, Breadcrumb 下層ページヘッダー・パンくずリスト
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 下層ページのページヘッダー、パンクズ設定 */



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Page 下層ページ
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* ページごと、パーツごとにコメントアウトで注釈を入れてください。 */

/* 会社概要 */

/* 会社概要　＞　代表あいさつ */


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Archive　ブログ一覧ページ
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* パーツごとにコメントアウトで注釈を入れてください。 */



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Single　ブログ詳細ページ
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* パーツごとにコメントアウトで注釈を入れてください。 */



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  その他・追加機能
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* パーツごとにコメントアウトで注釈を入れてください。 */

.mylook-style-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    /* 背景色を完全に消す場合 */
    background-color: transparent; 
}

/* 白いカード部分 */
.mylook-login-card {
    background: #fff;
    padding: 40px;
    width: 100%;
    max-width: 450px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* 軽い影 */
    text-align: center;
}

.mylook-login-card {
    background: rgba(255, 255, 255, 0.9); /* 0.9は不透明度（0が透明、1が不透明） */
    padding: 40px;
    width: 100%;
    max-width: 450px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    text-align: center;
    backdrop-filter: blur(5px); /* 背景をぼかすとおしゃれになります */
}

/* ロゴ・タイトル部分 */
.mylook-logo {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

/* 入力エリア */
.input-field {
    text-align: left;
    margin-bottom: 20px;
}

.input-field label {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    font-weight: bold;
}

.input-field input {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    background-color: #fafafa;
    box-sizing: border-box; /* 幅がはみ出さないように */
}

/* ログインボタン */
.mylook-btn {
    width: 100%;
    padding: 15px;
    background-color: #333; /* 黒系のボタン */
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 10px;
}

.mylook-btn:hover {
    background-color: #000;
}

/* エラーメッセージ */
.mylook-error {
    display: none;
    margin-top: 20px;
    padding: 10px;
    background-color: #fff2f2;
    color: #d63638;
    border-radius: 4px;
    font-size: 14px;
}

/*
#vk-mobile-nav-menu-btn {
    display: none;
}
*/

img {
  /* ドラッグ操作自体を無効化するプロパティ */
  -webkit-user-drag: none;
  /* スマホでの長押し保存メニュー禁止（念のため） */
  -webkit-touch-callout: none;
}

/* ギャラリー内の画像とキャプションを縦に並べる */
.wp-block-gallery .wp-block-image {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
}

/* キャプション（.wp-element-caption）のスタイル調整 */
.wp-block-gallery .wp-block-image .wp-element-caption {
    /* 1. 位置を画像の外（下）へ強制移動 */
    position: static !important;
    display: block !important;
    width: 100% !important;

    /* 2. 見た目の変更（背景を消して色を変える） */
    background: transparent !important; /* 黒い背景を透明に */
    color: #333333 !important;           /* 文字の色（お好みで変更可） */
    
    /* 3. 余白と配置の微調整 */
    margin-top: 10px !important;        /* 画像との隙間 */
    padding: 0 !important;
    text-align: center !important;      /* 中央寄せ */
    font-size: 0.9rem !important;       /* 文字の大きさ */
}

/* 画像が消えるのを防ぐためのリセット */
.wp-block-gallery .wp-block-image img {
    height: auto !important;
    max-height: none !important;
}

.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) {
    margin-bottom: auto;
    margin-top: 20px;
}