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

/* ヘッダーを非表示 */
.site-header {
    display: none;
}

/* サイト下部の余白を調整 */
.site-body {
	padding-bottom: 0;
}

/* メインビジュアルの高さを調整 */
.swiper {
	max-height: 600px;
}

/* ロゴをメインビジュアル上に配置 */
.main-logo {
	position: absolute;
	top: -500px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}

/* 検索窓メインビジュアル上に配置 */
.search-box {
	position: absolute;
	top: -150px;
	left: 50%;
	transform: translateX(-50%);
	width: 400px;
	z-index: 1;
}

/* メインビジュアルの下の間隔を調整 */
.siteContent {
	padding-top: 0;
}

/* TOPページのタイトル修飾 */
.top-special-heading {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	text-shadow: 1px 1px 2px #7C6764;
}
.top-special-heading::before,
.top-special-heading::after {
	content: '';
	width: 100px;
	height: 4px;
	background-color: #327E5B;
}
.top-special-heading::before {
	margin-right: 20px;
}
.top-special-heading::after {
	margin-left: 20px;
}

/* 特集、コラムのカバー画像の大きさ調整 */
.special-column-image {
	height: 250px;
}

/* 今月の特集のタイトルをサムネイルに被せる */
.special-title {
	text-shadow: 0px 0px 15px #00000090;
}

/* トップページ内、注目の宿泊施設の施設名の文字修飾 */
.top-accommodation-name {
	border-left: 5px solid #327E5B;
	padding-left: 5px !important;
}

/* フッターの背景と文字色を変更 */
.site-footer {
	background-color: #7c6764
}
.site-footer-copyright p:nth-child(1) {
	color: #ffffff;
}

/* フッターのLightningライセンスを非表示にする */
.site-footer-copyright p:nth-child(2) {
	display: none;
}

/* 投稿ページのヘッダーを非表示 */
.page-header {
	display: none;
}

/* 投稿ページの日付、投稿者を非表示 */
.entry-meta {
	display: none;
}

/* 投稿ページのタイトルを非表示 */
.entry-header {
	display: none;
}

/* 投稿ページのサイドメニューをタブレット、スマホ用で非表示 */
.single-post .sub-section {
	display: none;
}

/* 投稿ページの内枠 */
.single-post .main-section {
	width: 90%;
	margin: 0 auto;
	background-color: #ffffff;
	padding: 10px 50px 0px 50px;
	box-shadow: 0px 0px 15px #00000040;
}

/* 特集、コラムページのタイトル修飾 */
.single-special-title-container {
	text-align: center;
}
.single-special-title {
	display: inline-block;
	position: relative;
	padding: 0.7em 1.2em;
	text-align: center;
	margin-top: 0;
	margin-bottom: 20px;
}
.single-special-title:before, .single-special-title:after {
	position: absolute;
	content: '';
}
.single-special-title:after {
	top: 0;
	left: 0;
	width: 50px;
	height: 50px;
	border-top: 3px solid #327E5B;
	border-left: 3px solid #327E5B;
}
.single-special-title:before {
	right: 0;
	bottom: 0;
	width: 50px;
	height: 50px;
	border-right: 3px solid #327E5B;
	border-bottom: 3px solid #327E5B;
}

/* 特集ページの下部、宿泊施設のタイトルを修飾 */
.month-special-accommodation {
	border-left: 3px solid #327E5B;
	border-bottom: none;
	padding-left: 5px;
	padding-bottom: 0;
}

/* コラムページの見出しを修飾 */
.web-column-heading {
	border-left: 8px solid #327E5B;
	padding-left: 8px;
}

/* 宿泊施設詳細ページの内枠 */
.single-accommodation .main-section {
	background-color: #ffffff;
	padding: 40px;
	box-shadow: 0px 0px 15px #00000040;
}

/* 宿泊施設詳細ページのカラム幅を設定 */
@media (min-width: 992px) {
	.single-accommodation .site-body-container {
		display: flex;
		justify-content: space-between;
	}
	.single-accommodation div#main {
    width: 80%;
	}
   .single-accommodation .sub-section--col--two {
    width: 20%;
	 position: absolute;
	 right: 0;
   }
}

/* 宿泊詳細ページのサイドバーをタブレット以下で非表示 */
@media (max-width: 991px) {
	.single-accommodation .sub-section {
		display: none;
	}
}

/* 宿泊施設詳細ページの上の余白を少なくする */
.single-accommodation .site-body {
	padding-top: 20px;
}

/* 宿泊施設詳細のタイトル、見出しのスペース修正、文字修飾 */
.accommodation-title {
	position: relative;
	line-height: 1.4;
	padding:5px 10px 5px 10px;
	display: inline-block;
	border: none;
	border-top: 1px solid #327E5B;
	border-left: 10px solid #327E5B;
	margin-bottom: 0px;
}
.single-accommodation h6.wp-block-heading {
	padding-left: 25px;
}

/* 宿泊施設詳細の概要欄に括弧を追加 */
.accommodation-info {
	position: relative;
	padding:5px 10px 5px 10px;
	display: inline-block;
	top:0;
	margin: 10px auto 0 auto;
}
.accommodation-info:before, .accommodation-info:after { 
	position: absolute;
	top: 0;
	content:'';
	width: 15px;
	height: 100%;
	display: inline-block;
}
.accommodation-info:before {
	border-left: solid 3px #7C6764;
	border-radius: 30px;
	left: 0;
}
.accommodation-info:after {
	border-right: solid 3px #7C6764;
	border-radius: 30px;
	right: 0;
}

/* 宿泊施設詳細ページの見出し修飾 */
.accommodation-heading {
	position:relative;
	padding-left: 30px;
}
.accommodation-heading::before {
	content: '';
	position: absolute;
	background-color: #327E5B;
	width: 16px;
	height: 16px;
	top: 50%;
	left: 5px;
	transform: translateY(-50%);
}

/* 宿泊施設詳細ページの表の幅を調整 */
.accommodation-table td:nth-child(1) {
	width: 33%;
}

/* 宿泊施設詳細ページのサイドバーのロゴに影を追加 */
.side-bar-logo {
	box-shadow: 0px 0px 15px #00000040;
}

/* 投稿ページのフッターのコメントを非表示 */
.comment-respond {
	display: none;
}
.single-accommodation .vk_posts {
	display: none;
}
.single-post .vk_posts {
	display: none;
}

/* 検索結果ページのサイドバーを非表示 */
.archive .sub-section, .search-results .sub-section {
	display: none;
}
.archive .site-body-container, .search-results .site-body-container {
	background-color: #ffffff;
	padding: 40px;
	box-shadow: 0px 0px 15px #00000040;
	width: 100%;
}
.archive .main-section, .search-results .main-section {
	width: 90%;
}

/* 検索ページの投稿の日付を非表示 */
.vk_post_date.media-date.published {
    display: none;
}

/* 検索ページの「新着」を非表示 */
.vk_post_title_new {
	display: none;
}

/* 宿泊施設詳細ページのみハンバーガーメニューを表示 */
.vk-mobile-nav-menu-btn {
	display: none;
}
/* ハンバーガーメニューを右上、開いたリストを中央寄せに */
.single-accommodation .vk-mobile-nav-menu-btn {
	display: block;
	left: unset;
	right: 5px;
}
.vk-mobile-nav nav ul li a {
	text-align: center;
}
.vk-mobile-nav {
	opacity: 0.9;
}

/* jQueryでトップページのコンテンツをフェードインさせる */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger{
    opacity: 0;
}

/* メインビジュアル部分のスマホ対応 */
@media(max-width : 600px) {
	.swiper {
		height: 400px;
	}
	.main-logo {
		top: -350px;
	}
	.wp-block-search__inside-wrapper {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	.search-box {
		width: 300px;
	}
	.wp-block-search .wp-block-search__button {
		margin-top: 10px;
	}
	
	/* 特集、コラム部分の各種サイズ調整 */
	.special-title {
		font-size: 1.33rem;
	}
	.special-column-image {
		height: 150px;
	}
	
	/* 特集の間のギャップを調整 */
	.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid {
		grid-template-columns: 1fr;
		gap: 35px;
	}
	
	/* トップページの宿泊施設を2カラムにする */
	ul.columns-3.vk_block-margin-0--margin-top.wp-block-post-template.is-layout-grid.wp-container-core-post-template-is-layout-3.wp-block-post-template-is-layout-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}