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

/* ---------------------------------
 ヘッダーロゴ横に検索窓
---------------------------------*/
/* デザインが崩れるので991.98px以下でform非表示 */
@media (max-width: 991.98px){
    .site-header-container form{
        display: none !important;
    }
}
.site-header-container .search-form{
    position: relative;
}
/*虫眼鏡マーク*/

.site-header-container .search-form:after {
    position: absolute;
    top: 50%;
    right: -50px;
    transform: translateY(-50%);
    margin: 0;
    content: "\f002";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding:14px 1.5em;
}
/*フィールド*/
.site-header-container .search-field{
    position: absolute;
    top: 50%;
    transform: translateY(-50%) ;
    right:-50px;
	background: #fff !important;
}
/*submitボタン非表示*/
.site-header-container .search-submit{
    display: none;
}
/*テキストフィールド*/
.site-header-container form .search-field{
    z-index: 100;
	opacity: 0;
    width: 60px;
    transition: all 0.5s ease-in;
    padding: 1em 0.8em;
    cursor: pointer;
}
/*フォーカス時にテキストフィールド表示*/
.site-header-container form .search-field:focus{
	opacity: 1;
    width:135px;
    transition: all 0.5s ease-in;
    border-width:1px;
    border-radius:var(--vk-size-radius);
}

/* ヘッダーの最小の高さを指定して縦幅を確保する */
.siteHeader {
    min-height: 120px; /* ヘッダーの最小高さ（必要に応じて調整） */
}

/* ロゴ画像の最大高さを調整する (ロゴがある場合) */
.siteHeader .navbar-brand img {
    max-height: 100px; /* ロゴ画像の最大高さ（必要に応じて調整） */
    width: auto;      /* 幅は自動調整 */
}

/* ナビゲーションリンクの行の高さを調整する */
.global-nav li a {
    line-height: 30px; /* ナビゲーションリンクの行の高さ（必要に応じて調整） */
    padding-top: 0;
    padding-bottom: 0;
}

.global-nav {
    margin-right: 20px;
}

.search-form {
    position: absolute;
    right: -780px; /* 右端に配置 */
    top: 50%; /* 垂直方向中央に */
    transform: translateY(0%);
    /* 必要に応じて他のスタイルを追加 */
}

.site-header-logo {
	font-size:0.85rem;
}

/* スマートフォンでのヘッダー縦幅調整の例 */
@media (max-width: 767px) { /* 767px以下の画面幅に適用 */
    .siteHeader {
        padding-top: 15px;
        padding-bottom: 15px;
        min-height: 90px;
    }
    /* ロゴ画像やメニューも必要に応じて調整 */
}

@media (max-width:1200px) { 
　　.site-header-logo {
	　font-size: 0.25rem;
　　}
}
@media (max-width: 991.98px) {
  .has-text-align-left br {
    display: none;
  }
}