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



/* ==========================================================================
   ヘッダーメニュー
   ========================================================================== */

/* ヘッダーメニュー背景色 */
div#vk-mobile-nav {
	background-color: #ece6dc;
}

/* PCでもハンバーガーメニュー表示 */
@media (min-width: 992px) {

body.device-pc .vk-mobile-nav-menu-btn,
body.device-pc .vk-mobile-nav {
    display: block;
}

.vk-mobile-nav-menu-btn {
    top: 5px;
}

.vk-mobile-nav-menu-btn.position-right {
    right: 10px;
}

.admin-bar .vk-mobile-nav-menu-btn {
    top: calc(32px + 50px);
}

.vk-mobile-nav-menu-btn {
    width: 50px;
    height: 50px;
	}
}

/* ハンバーガーメニュー中身 */
/* 既存のモバイルメニュー非表示 */
nav.vk-mobile-nav-menu-outer {
	display: none;
}

/* メニューのボーダー非表示 */
.vk-mobile-nav .widget_nav_menu ul.menu,
ul#menu-header-nav2 a {
	border: none;
}

/* モバイル時施工エリア、メニューの並びを入れ替え */
@media (max-width:781px) {
.mobile-area {
  order: 2;
	}
.mobile-menu { 
  order: 1;
	}
}

/* ハンバーガーメニューの見積依頼、問合せボタンの背景色設定 */
li#menu-item-6671,
li#menu-item-6672 {
    background-color: #aa8f50;
    margin: 30px 10px;
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
}
li#menu-item-6671 a,
li#menu-item-6672 a {
	color: #fff;
}

/* 施工事例、お役立ち情報ページヘッダー下余白 */
.post-type-archive-example .site-body,
.blog .site-body {
	margin-top: 2.5rem;
}

/* サイトタイトルの位置調整 */
.top-main-parent,
.top-main-parent-sp {
	position:relative;
}
@media screen and (max-width: 767px) {
	.top-main-title-sp {
		color: #fff;
		margin-top: 0.75rem;
        font-size: 3rem;
        line-height: 1.1111111111;
        letter-spacing: -0.0533333333em;
		position: relative;
        top: 2.5rem;
        z-index: 2;
}
	.top-main-text-sp {
        font-size: 1rem;
        line-height: 1.7777777778;
        letter-spacing: 0.0488888889em;
        position: relative;
		margin-bottom: 0;
        top: 3rem;
        z-index: 2;
	}
	.top-main-parent {
		display: none;
	}
}
@media screen and (min-width: 768px) {
	.top-main-title {
		color: #fff;
		font-size: max(5.5vw, 100px);
		top: 5rem;
		z-index: 2;
		position: relative;
}
	.top-main-text {
		writing-mode: vertical-rl;
		top: 14rem;
		right: 6rem;
		position: absolute;
		z-index: 2;
		font-size: max(1.8055555556vw, 20px);
	}
	.top-main-parent-sp {
		display: none;
	}
}

/* モバイル時にヘッダー上にある余白削除 */
@media screen and (max-width: 767px) {
  .site-header-container,
  .l-header,
  .vk-header,
  .site-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
  }
/* 万一ズレる場合に微調整 */
  header, .site-header-container {
    transform: translateY(0) !important;
  }
}

/* ==========================================================================
   HOME
   ========================================================================== */
html {
	overflow: visible!important;/* position:stickyを動作させるため（テキストを固定で、スクロールで左右画像の表示） */
	background-color:#ece6dc; 
}

/* トップメイン画像をズーム */
@keyframes zoom-in {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
.carousel-item img {
  animation: zoom-in 10s linear 0s 1 normal both;
}

/* 画像の縦スクロール時ぼかし */
.fade-blur {
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.8s ease, filter 2s ease;
}
.fade-blur.show {
  opacity: 1;
  filter: blur(0);
}

/* トップメイン下の3カラムをスクロール時真ん中の業界初工事記録サービス固定 */
.about-text {
	position: sticky !important;
    top: 20%;
    height: fit-content;
}
/* モバイル時の業界初工事記録サービス */
.about-text-sp {
	position: sticky;
	top: 30%;
	z-index: 3;
}
/* 業界初工事記録サービスの背景のぼかし設定 */
.about-text:after,.about-text-sp:after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: 20rem;
	height: 15rem;
	border-radius: 50%;
	--sample-color: 236 230 220;
	aspect-ratio: 1 / 1;
	background: radial-gradient(circle, rgb(var(--sample-color)), rgb(var(--sample-color) / 1));
	border-radius: 50%;
	-webkit-filter: blur(50px);
	filter: blur(50px);
}

/* 3カラム（画像、業界初・・・）の幅調整 */
@media (max-width:768px) {
.three-column {
	gap:7rem;
} 
}
/* スクロールで表示される画像枠線のぼかし設定 */
.img-one,
.img-two,
.img-three,
.img-for,
.img-five,
.img-six{
 	position: relative;
	font-size: 0;
	line-height: 0;
	margin: auto;
}

/* 画像のぼかし枠線のずれ解消 */
.img-one img,
.img-two img,
.img-three img,
.img-for img,
.img-five img,
.img-six img {
	padding: 1px;
	object-fit: cover !important;
}

/* 画像の枠線ぼかし */
.img-one:after,
.img-two:after,
.img-three:after,
.img-for:after,
.img-five:after,
.img-six:after{
	position: absolute;
	-moz-box-shadow: inset 0px 0px 5px 5px #ece6dc,inset 0 0 5px 5px rgba(236, 230, 220, 0.9);
	-webkit-box-shadow: inset 0px 0px 5px 5px #ece6dc,inset 0 0 5px 5px rgba(236, 230, 220, 0.9);
	box-shadow: inset 0px 0px 5px 5px #ece6dc,inset 0 0 5px 5px rgba(236, 230, 220, 0.9);
	content: " ";
	border-radius: 20px;
	width: 100%;
}

/* 3カラムのスクロールで表示される左画像（PC表示） */
@media (min-width:768px) {
	/* 左画像1枚目サイズ */
	.img-one {
		width: 15rem;
	}
	.img-one img {
		aspect-ratio: 260 / 340;
		margin-top: 12.5rem;
	}
	/* 左画像1枚目枠線ぼかし */
	.img-one:after {
		top: 12.5rem;
		right: 0;
		bottom: 0;
	}
/* 左画像2枚目サイズ */
	.img-two {
		width: 21rem;
	}
	.img-two img {
		aspect-ratio: 350 / 460;
		margin-top: 12rem;
} 
/* 左画像2枚目枠線ぼかし */
	.img-two:after {
		left: 0;
		top: 12rem;
		right: 0;
		bottom: 0;
}
/* 左画像3枚目サイズ */
	.img-three {
		width: 20rem;
	}
	.img-three img {
		aspect-ratio: 350 / 460;
		margin-top: 27rem;
	} 
/* 左画像3枚目枠線ぼかし */
	.img-three:after {
		top: 27rem;
		right: 0;
		bottom: 0;
}
}

/* 3カラムのスクロールで表示される左画像サイズ、位置調整（SP表示） */
@media (max-width:767px){
/* 左画像1枚目サイズ */
  .img-one {
	  width: 7.5rem;
  }
  .img-one img {
    margin-top: 10rem;
    aspect-ratio: 260 / 340;
	  object-fit: cover !important;
  }
/* 左画像1枚目枠線ぼかし */
	.img-one:after {
		top: 10rem;
		right: 0;
		bottom: 0;
}
/* 左画像2枚目サイズ */
	.img-two {
		width:9rem;
	}
	.img-two img {
    margin-top:15rem;
	}
/* 左画像2枚目枠線をぼかし */
	.img-two:after {
		left: 0;
		top: 15rem;
		right: 0;
		bottom: 0;
}
/* 左画像サ3枚目サイズ */
	.img-three {
		width: 10rem;
	}
	.img-three img {
     margin-top: 12rem;
     aspect-ratio: 350 / 460;
  }
/* 左画像3枚目枠線ぼかし */
	.img-three:after {
		top: 12rem;
		right: 0;
		bottom: 0;
	}
}

/* 3カラムのスクロールで表示される右画像サイズ、位置調整（PC表示） */
@media (min-width:768px) {
/* 右画像1枚目サイズ */
	.img-for {
		width:24rem;
	}
	.img-for img {
		aspect-ratio: 390 / 512;
		margin-top: 24rem;
	}
/* 右画像1枚目枠線ぼかし */
	.img-for:after {
		left: 0;
		top: 24rem;
		right: 0;
		bottom: 0;
}
/* 右画像2枚目サイズ */
	.img-five {
		width: 21rem;
	}
.img-five img {
	aspect-ratio: 350 / 460;
	margin-top: 16rem;
	}
	
/* 右画像2枚目枠線ぼかし */
	.img-five:after {
		left: 0;
		top: 16rem;
		right: 0;
		bottom: 0;
}
/* 右画像3枚目サイズ */
	.img-six {
		width: 14rem;
	}
.img-six img {
	aspect-ratio: 230 / 300;
	margin-top: 22rem;
	} 
/* 右画像3枚目枠線ぼかし */
	.img-six:after {
		left: 0;
		top: 22rem;
		right: 0;
		bottom: 0;
}
}

/* 3カラムのスクロールで表示される右画像サイズ、位置調整（SP表示） */
@media (max-width:767px) {
/* 右画像1枚目サイズ */
	.img-for {
		width: 9rem;
	}
  .img-for img {
    margin-top: 23rem;
    aspect-ratio: 390 / 512;
  }
/* 右画像1枚目枠線ぼかし */
	.img-for:after {
		left: 0;
		top: 23rem;
		right: 0;
		bottom: 0;
}
/* 右画像2枚目サイズ */
	.img-five {
		width: 7.5rem;
	}
  .img-five img {
    margin-top: 15rem;
    aspect-ratio: 350 / 460;
  }
/* 右画像2枚目枠線ぼかし */
		.img-five:after {
		left: 0;
		top: 15rem;
		right: 0;
		bottom: 0;
}
/* 右画像3枚目サイズ */
	.img-six {
		width: 9rem;
	}
	.img-six img {
		margin-top: 15.5rem;
		aspect-ratio: 230 / 300;
	}
/* 右画像3枚目枠線ぼかし */
	.img-six:after {
		left: 0;
		top: 15.5rem;
		right: 0;
		bottom: 0;
}
}


/* PURATINAMU EXTERIORについてのハイブリッドスクロール（PCの時のスクロール）*/
@media screen and (min-width: 782px) {
.horizontal_scroll {
	--sticky-container-height: 100vh;
	height: var(--sticky-container-height);
	min-height: 100vh;
	box-sizing: border-box;
	margin: 0 calc(50% - 50vw);
}
.horizontal_scroll .sticky {
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
}
.horizontal_scroll .scroller {
	display: flex;
	overflow: auto;
}
.horizontal_scroll .scroller.nobar {
	overflow: hidden;
/* PLATINUM EXTERIORについて」の下部の“横スクロール部分”で、始まりと終わりの金色の枠余白 */
	margin-left:1%;
	margin-right:1%;
}
.horizontal_scroll .scroller > * {
	flex-basis: 66%;
	flex-shrink: 0;
	aspect-ratio: 16 / 9;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #F8F6F1;
	border-radius: 20px;
    border: dashed 2px #aa8f50;
	margin-bottom: 0;
}
.horizontal_scroll .scroller > *:not(:first-child) {
	margin-left: 1%;
	}
}

/* よくあるご質問の背景色を変更、余白を削除 */
.page-id-5299　.wp-block-vk-blocks-faq.vk_faq, .wp-block-vk-blocks-faq2.vk_faq {
	background-color: #ECE6DC;
	box-shadow: none;
}
.faq-home {
	margin-bottom:0 !important;
} 

/* 投稿カード（施工事例、ブログ）の角丸を強く */
.card {
	border-radius:20px !important; */
}



/* ==========================================================================
   PURATINAMU EXTERIORについて、選ばれる理由の1〜4の見出し
   ========================================================================== */
/* トップのPURAN〜について部分の数字フォント */

/* 選ばれる理由 数字とテキストの見出しをレスポンシブで横並びに */
@media screen and (max-width: 767px) {
  .reason-text .wp-block-group__inner-container {
  display: flex;
    align-items: center;
    gap: 1rem;
  }
}

/* 選ばれる理由ページ見出し */
.reason-page-text .wp-block-group__inner-container {
  display: flex;
    align-items: center;
    gap: 1rem;
  }
}

.reason-margin {
	margin-bottom: 1.5em;
}

.reason-page-text .wp-block-group__inner-container h2 {
	margin-bottom: 0.5em;
}

/* 選ばれる理由見出しの数字 */
 .reason-num {
  margin-bottom: 0.3em;
}
.reason-num span {
  font-size: 2.5em;
  font-weight: 700;
  color: #aa8f50;
/*   font-family: "Playfair Display", serif; 欧文フォント */
  line-height: 1;
}

.reason-num span {
  font-family: "Sacramento","Amatic SC" , "League Script",　cursive;
}

.horizontal_scroll .sticky .wp-block-column h1,
.horizontal_scroll .sticky .wp-block-column h3 {
  display: inline;
}
.horizontal_scroll .sticky .wp-block-column h1 {
  margin-right: .5em; 
}


/* ==========================================================================
   施工事例ページ
   ========================================================================== */
/* クリックで拡大される画像 */
#main-image-area {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}
#main-image {
  width: 100%;
  max-width: 100%;
  height: 500px;
  object-fit: cover; 
  border-radius: 10px;
  transition: opacity 0.5s ease;
}

.vk_slider_item .vk_slider_item-background-area:not([class*=-background-color]) {
  background-color: #ece6dc;
}

@media screen and (max-width: 767px) {
  #main-image {
    height: 350px;
  }
}

/* ページネーションの位置調整 */
.single-example .swiper-pagination-horizontal {
	bottom: 0!important;
}



/* ==========================================================================
   reCAPTCHA非表示
   ========================================================================== */
.grecaptcha-badge{
	display:none !important;
}