/*
Theme Name: Lightning Child Sample
Theme URI:
Template: lightning
Description:
Author:
Tags:
Version: 0.6.1
*/
/****************TOPロゴの余白変更***************/

/*メニュー回り込み全幅の場合のロゴのサイズ*/
@media (min-width: 992px){
.header_scrolled .site-header-container--scrolled--logo-and-nav-full .site-header-logo img {
    max-width: 100%;

}
}



/****見出し関連****/
.mainmidashi {
　font-weight:400;
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 10px #000000;/*左線*/

}
.midashi4 {
    border-bottom: 3px dotted #05122e;
    border-left: 0px dotted #05122e;
    border-right: 0px dotted #05122e;
    border-top: 0px dotted #05122e;
    font-size: 21px;
    line-height: 1.6;
    margin: 32px 0px 24px 0px;
    padding: 0px 4px;
}

/**Food見出し***/
.fmidashi{
	background: #000000;/*背景色*/
	padding: 0.2em;/*文字まわり（上下左右）の余白*/
    color: white;
    font-size: 18px;
}
/**チケット見出し***/
.ticketmidashi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: black; /* 背景色を黒に設定 */
  color: white; /* 文字色を白に設定 */
  padding: 5px;
  font-size: 1.1em; /* サイズ調整 */
}

.ticketmidashi span {
  color: white;
}

.ticketmidashi .tax {
  font-size: 0.7em; /* サイズを少し小さく */
  opacity: 0.8; /* 少し薄くする（オプション） */
}


.price {
  margin-left: auto; /* 右側に寄せる */
}

.kikanmoji {
  margin-top: 10px; /* 価格と販売期間の間隔を調整 */
  margin-left: 10px; /* 価格と販売期間の間隔を調整 */
  font-size: 0.9em; /* 文字サイズを調整 */
}

/*******メニューの設定****/
.global-nav-list>li .global-nav-name {
    font-size: 14px;
    display: block;
    width: 100%;
    white-space: nowrap;
    color: white;
}


.global-nav-list>li .global-nav-description {
    display: block;
    overflow: hidden;
    font-size: 10px;
    line-height: 14px;
    opacity: .6;
    text-align: center;
    white-space: nowrap;
    color: white;
}


/**************次の記事を画像なしにする**********************************/
.next-prev-prev.card-horizontal .card-body {
padding-left: 5.0rem;
}

.next-prev-next.card-horizontal .card-body {
padding-right: 5.0rem;
}

/*********TOPに戻る********/
.page_top_btn {
    right: 0;
    bottom: 0;
    width: 60px;
    height: 60px;
    background-color: var(--vk-color-primary);
    box-shadow: none;
}


/* ------------------------- */
/* -------- GoogleMapレスポンシブ-------- */
/* ------------------------- */
.gmap {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.gmap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}


/****画像CSSロールオーバー***/
a:hover img{

opacity:0.8;

filter:alpha(opacity=70);

-ms-filter: “alpha( opacity=70 )”;

transition: 0.6s;

}


/************************************
** お問い合わせフォームの入力
************************************/
/*ContactForm7カスタマイズ*/
table.CF7_table{
	width:90%;
	margin:0 auto;
	background-color:#ffffff;/*ブルーグレー*/
	border: 3px solid #e5e5e5;
}

table.CF7_table tr{
	border-top: 1px solid #e5e5e5;
text-align:left;
}

.single .entry-content table.CF7_table,
.page .entry-content table.CF7_table{
	display:table;
}

/*入力欄*/
.CF7_table input, .CF7_table textarea {
	border: 1px solid #d8d8d8;
}

.CF7_table ::placeholder {
	color:#797979;
}

/*「必須」文字*/
.CF7_req{
	font-size:.9em;
	padding: 5px;
	background: #C30D23;/*赤*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/*「任意」文字*/
.CF7_unreq{
	font-size:.9em;
	padding: 5px;
	background: #0c0f2d;/*グレー*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/* タイトル列 */
@media screen and (min-width: 768px){
	.CF7_table th{
	width:30%;/*横幅*/
	background-color:#ebedf5;/*ブルーグレー*/
	}
}

/* レスポンシブ */
@media screen and (max-width: 768px){
	table.CF7_table{
	width:95%;
	}
	.CF7_table tr, .CF7_table td, .CF7_table th{
	display: block;
	width: 100%;
	line-height:2.5em;
	}
	.CF7_table th{
	background-color:#ebedf5;
	}
}

/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
	background-color:#ff9800;/* イメージカラー*/
	border:0;
	color:#fff;
	font-size:1.2em;
	font-weight:bold;
	margin:0 auto;
}

.CF7_btn{
	text-align:center;
	margin-top:20px;
}

.wpcf7-spinner{
	width:0;
	margin:0;
}


/*********TOPに戻る********/
.page_top_btn {
    right: 10px;
    bottom: 0;
    width: 60px;
    height: 60px;
    background-color: var(--vk-color-primary);
    box-shadow: none;
}
/****************モバイルメニュー変更**************/
/* モバイルナビの背景を画像に変更 */
.vk-mobile-nav {
    background-image: url('https://kagoshima-hanabi.com/wp-content/uploads/2024/11/mobhaikei.png'); /* 背景画像を指定 */
    background-size: cover; /* 画像を要素にフィットさせる */
    background-position: center; /* 画像を中央揃え */
    background-repeat: no-repeat; /* 画像を繰り返さない */
    color: #ffffff; /* テキスト色 */
}

/* モバイルナビ内アラート背景を画像に変更 */
.vk-mobile-nav .alert-info {
    background-image: url('https://kagoshima-hanabi.com/wp-content/uploads/2024/11/mobhaikei.png'); /* 同じ画像を指定する場合 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
}

/* モバイルナビ文字色 */
.vk-mobile-nav nav ul li a {
    color: #ffffff;
    border-bottom: 1px solid #ccc;
}

/*モバイル子ページ用の矢印***/
.vk-mobile-nav .acc-btn {
    border-width: 1px;
    border-style: solid;
    border-color: #fff; /* 境界線を白に変更 */
}

.vk-menu-acc .acc-btn {
    border: 1px solid #fff; /* 境界線を白に設定 */
    background: var(--vk-menu-acc-icon-open-black-bg-src) center 50% no-repeat;
}

/**********************************
最後のメニューだけ色変更
**********************************/
@media (min-width: 992px) {
/* 個々のメニュー枠のスタイル（スクロールしていないとき） */
body:not(.header_scrolled) .vk-menu-acc li {
margin-left: -1px;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
}

/* 最後のメニュー項目だけ白抜き文字にする */
.vk-menu-acc li:last-child {
background-color: #e50045;
}
body:not(.header_scrolled) .global-nav-list>li:last-child .global-nav-name i,
.global-nav-list>li:last-child .global-nav-name i {
color: #fff;
}
.nav li:last-child a, nav li:last-child a {
color: #fff;
}

body:not(.header_scrolled) .global-nav--layout--float-right {
align-items: unset;
}
}


/***********メインボタン***/
/* ボタンの親要素（中央揃え用） */
.button-wrapper {
    text-align: center; /* ボタンを中央に配置 */
    margin-top: 20px; /* テキストとボタンの間隔を調整 */
}

/* ボタンスタイル */
.linear-gradient-button {
    background: linear-gradient(to right, #D32F2F, #FF9800, #FFD54F, #FFF3E0);
    border: none;
    color: white; /* デフォルトの文字色を白に設定 */
    font-size: 16px;
    font-weight: bold;
    padding: 12px 40px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none; /* 下線を消す */
    transition: background 0.3s ease, transform 0.2s ease, color 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.linear-gradient-button i {
    font-size: 18px;
}

/* ホバー時のスタイル */
.linear-gradient-button:hover {
    background: linear-gradient(to right, #FF4500, #FFC107, #FFEB3B, #FFF3E0);
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    color: white; /* ホバー時も文字色を白に固定 */
}

/* クリック時のスタイル */
.linear-gradient-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/**********チケット購入ボタン（小さめ）**/
/* 小さめのボタンの親要素（中央揃え用） */
.small-button-wrapper {
    text-align: center; /* ボタンを中央に配置 */
    margin-top: 15px; /* テキストとボタンの間隔を調整 */
}

/* 小さめのボタンスタイル */
/* 小さめのボタンの親要素（中央揃え用） */
.small-button-wrapper {
    text-align: center; /* ボタンを中央に配置 */
    margin-top: 15px; /* テキストとボタンの間隔を調整 */
}

/* コンテナのスタイル（必要に応じて親要素に追加） */
.button-container {
    display: flex;
    flex-wrap: wrap; /* ボタンが幅を超えると折り返す */
    justify-content: center; /* ボタンを中央揃え */
    gap: 10px; /* ボタン間の間隔 */
}

/* ボタンの親コンテナ */
.button-container {
    display: flex;
    flex-wrap: wrap; /* ボタンが幅を超えると折り返す */
    justify-content: center; /* ボタンを中央揃え */
    gap: 10px; /* ボタン間の間隔 */
    padding: 10px; /* 余白を追加 */
}

/* ボタンの共通スタイル */
/* 小さめのボタンスタイル */
.small-gradient-button {
    background: linear-gradient(to right, #D32F2F, #FF9800, #FFD54F, #FFF3E0); /* 元の色合い */
    border: none;
    color: white; /* デフォルトの文字色を白に設定 */
    font-size: 14px; /* フォントサイズを少し小さく */
    font-weight: bold;
    padding: 10px 30px; /* パディングを小さく */
    border-radius: 6px; /* 角を少し丸く */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none; /* 下線を消す */
    transition: background 0.3s ease, transform 0.2s ease, color 0.2s ease;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}

.small-gradient-button i {
    font-size: 16px; /* アイコンのサイズを少し小さく */
}

/* ホバー時のスタイル */
.small-gradient-button:hover {
    background: linear-gradient(to right, #FF4500, #FFC107, #FFEB3B, #FFF3E0); /* 元の色合い */
    transform: translateY(-2px);
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.12);
    color: white; /* ホバー時も文字色を白に固定 */
}

/* クリック時のスタイル */
.small-gradient-button:active {
    transform: translateY(0);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}
/* レスポンシブ: iPadサイズ（768px〜1024px） */
@media (min-width: 768px) and (max-width: 1024px) {
    .button-container {
        gap: 15px; /* ボタン間の間隔を広げる */
    }
    .small-gradient-button {
        flex: 1 1 calc(45% - 20px); /* ボタン幅を調整（2列表示） */
        max-width: 200px; /* 幅を少し狭く設定 */
    }
}

/* レスポンシブ: スマホサイズ（〜767px） */
@media (max-width: 767px) {
    .button-container {
        gap: 10px; /* 間隔を調整 */
    }
    .small-gradient-button {
        width: 100%; /* スマホでは幅を100%に設定 */
        max-width: none; /* 最大幅の制限を解除 */
    }
}



/****Youtune埋め込み***/
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}





/****PC・スマホ揃え切り替え***/
/* PC用のスタイル（デフォルト） */
.responsive-text {
  text-align: center; /* 中央揃え */
}

/* スマホ用のスタイル */
@media screen and (max-width: 768px) {
  .responsive-text {
    text-align: left; /* 左揃え */
  }
}


/******************************************
FAQのマーク色
****************************************/
.is-style-vk_faq-bgfill-rounded .vk_faq_title:before {
    background-color: #000000;
    color: #fff !important;
}
.is-style-vk_faq-bgfill-rounded .vk_faq_content:before {
    background-color: #e60045;
    color: #fff !important;
}





/********追従ボタン****/
.ticket-purchase {
    position: fixed;
    z-index: 9999;
    bottom: 200px; /* PC時の位置 */
    right: -5px; /* PC時の位置 */
    width: 80px;
    height: 200px;
    background-color: #e50045; /* ピンクに変更 */
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease; /* 滑らかな位置変更 */
}

.ticket-purchase .ticket-button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    transition: all 0.3s ease;
}

.ticket-purchase .ticket-button:hover {
    background-color: #e50045; /* ホバー時の色 */
    opacity: 0.9;
    transform: scale(1.05); /* 少し拡大 */
}

.ticket-purchase .ticket-text {
    writing-mode: vertical-rl; /* PCでは縦書き */
    transform: none; /* 回転を無効にする */
    margin-top: 10px; /* アイコンとテキストの間に余白 */
}

.ticket-purchase .ticket-icon {
    font-size: 2em; /* アイコンの大きさを調整 */
    margin-bottom: 10px; /* アイコンとテキストの間に余白 */
    color: white; /* アイコンの色 */
    transition: color 0.3s ease; /* ホバー時に色が変わるアニメーション */
}

.ticket-purchase .ticket-button:hover .ticket-icon {
    color: #f0c14b; /* ホバー時のアイコン色 */
}

/* スマホ専用スタイル */
@media (max-width: 991.98px) {
    .ticket-purchase {
        bottom: 0; /* スマホでは画面下部に固定 */
        right: 0; /* 横幅いっぱいに */
        width: 100%; /* 横幅いっぱいに広げる */
        height: 60px; /* ボタンの高さ */
        border-radius: 0; /* 角を丸めない */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .ticket-purchase .ticket-button {
        flex-direction: row; /* 横方向にアイコンとテキストを並べる */
        justify-content: center;
        align-items: center;
        width: 100%; /* 横幅いっぱい */
        height: 100%;
        font-size: 1.2em; /* フォントサイズ調整 */
    }

    .ticket-purchase .ticket-icon {
        font-size: 1.5em; /* アイコンサイズを調整 */
        margin-bottom: 0; /* 縦の余白を削除 */
        margin-right: 10px; /* アイコンと文字の間に横余白を追加 */
    }

    .ticket-purchase .ticket-text {
        writing-mode: horizontal-tb; /* 横書きにする */
        margin-top: 0; /* 縦余白を削除 */
        transform: none; /* 変形をリセット */
    }
}