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

/* 共通 */
body {
  font-family: "M PLUS 2", sans-serif;
  font-optical-sizing: auto;
}

.site-header {
    background: #eeeaea !important;
}

.page-header-title, h1.page-header-title  {
  text-shadow: 2px 3px 8px rgba(0, 0, 0, 0.6);
/*   letter-spacing: 0.25em; */
  font-family: "Kiwi Maru", serif;
  font-weight: 500;
  font-style: normal;
}


h2 {
	font-weight: 800;
	letter-spacing: 0.25rem;
}
h3 {
	font-weight: 500;
	letter-spacing: 0.25rem;
}

.u-center {
	margin: 0 auto;
}

.u-text--strong {
	font-weight: 700;
}

.u-text--color-main {
	color :#742000;
}

.u-link__text--attention {
	color :#742000;
	text-decoration-color: rgba(115, 33, 0, .3);
}

.entry-title--post-type--page, h2:where(:not(.wp-block-post-title)) {
	padding: .5em 0;
    border-top: 0;
    border-bottom: 0;
}

.page_heading2 {
	text-align: center;
	letter-spacing: 0.25rem;
	color: #772607;
}
.caption-letter-spacing--medium {
	font-size: 1.2rem;
    letter-spacing: .16rem;
	color: #595959;
}

/* 画像 */
/* 投稿一覧のサムネイル画像を角丸にする */
.thumbnail__radius--base {
	margin: 0 auto;
}
.thumbnail__radius--base img {
    border-radius: 16px; /* 角丸の大きさを調整 */
}

/* WordPress「最新の投稿」ブロックを中央揃え */
.wp-block-latest-posts.is-grid{
 justify-content: center;
}

/* アイキャッチ画像も中央に寄せたい場合（必要なら追加 */
.wp-block-latest-posts.is-grid li .wp-block-latest-posts__featured-image {
  margin-left: auto;
  margin-right: auto;
}

/* ---フッター --- */
.site-footer .site-footer-copyright p:last-child {
    display: none;
}

/* ---  投稿一覧 --- */
.wp-block-latest-posts.is-grid li .wp-block-latest-posts__featured-image {
	margin-right: 16px;
}

/* --- 投稿ページ --- */
.entry-meta-item-updated, .entry-meta-item-author  {
	display:none;
}
/*
 * 投稿ページのサイドバーにある、
 * サムネイル上のカテゴリラベルを非表示にする
 * ----------------------------------------------- */
/* .vk_posts .card-img-overlay {
    display: none !important;
} */

.entry-meta-data-list dt  {
	background: #772607;
	font-weight: normal;
}

about-pressed-flowers div.jetpack-likes-widget-wrapper {
	display: none;
}


/* --- TOPページ --- */
/* .swiper-pagination-bullet, .swiper-button-prev, .swiper-button-next, .swiper-button-next, .swiper-rtl .swiper-button-prev {
	display: none;
} */

/*
 * Vegas.jsスライダー専用のスタイリング (擬似要素版)
 * ----------------------------------------------- */

/* 1. Vegas.js用の「箱」（基準点であり、全幅にする） */
#vegas-kenburns-slider {
  height: 80vh; /* スライダーの高さ */
  width: 100vw;
  position: relative; /* ★キャプションを重ねる基準点 */
  left: 50%;
  margin-left: -50vw;
}

/* 2. ★ 擬似要素(::before)でキャプションを重ねる ★ */
#vegas-kenburns-slider::before {
  /* ★ 表示するテキスト（\Aは改行を意味します） ★ */
  content: "木と花に触れる、\A心を満たす手仕事の時間。";
  white-space: pre-wrap; /* \Aでの改行を許可 */  
  position: absolute;
  z-index: 999; /* 最前面に表示 */
/*   background: rgba(0, 0, 0, 0.2);  */
  color: #ffffff;
  box-sizing: border-box;

  /* --- テキストのスタイル（共通） --- */
  font-family: "Kiwi Maru", serif;
  font-weight: 500;
  font-style: normal;	
  font-size:2.5rem;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);

  /* --- ▼▼▼ PCのスタイル (デフォルト) ▼▼▼ --- */
  /* (これがPCでの「左下100px」配置です) */
  display: block;
  bottom: 100px;
  left: 100px;
  padding: 0; /* PCでは座標指定なのでpadding不要（またはお好みで） */
  text-align: left;
  
  /* PCではサイズを自動に（必要に応じて） */
  width: auto;
  height: auto;
  top: auto;
  /* --- ▲▲▲ PCのスタイルはここまで ▲▲▲ --- */
}

/* --- ▼▼▼ スマホのスタイル (767.98px以下で上書き) ▼▼▼ --- */
@media (max-width: 767.98px) {
  #vegas-kenburns-slider::before {
	font-size:2rem;
    /* スマホ用のFlexbox設定（左下配置） */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;  /* 垂直：下揃え */
    align-items: flex-start;  /* 水平：左揃え */
    
    /* PC用の座標指定(bottom, left)をリセット */
    bottom: auto;
    left: auto;
    
    /* 全画面を覆うように戻す */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
    padding: 2rem 0 2rem 2rem;
  }
}


.lightning_swiper {
	background-color: #eeeaea;
}

body.home .site-body {
  padding-top: 0 !important;
}

.info_heading h2 {
	padding-top: 0;
}

/* 最新投稿タイトル部分 */
a.wp-block-latest-posts__post-title {
    font-weight: 700;
}

/* --- TOPページ_End --- */

/* --- 木工品について --- */
/* Googleマップ */
.gmap-iframe-wrap {
  text-align: center;
}
.gmap-iframe {
  width: 1100px;
  border-radius: 16px;
}
@media only screen and (max-width: 767px) {
  .gmap-iframe {
    width: 90%;
  }
}

/*
 * Slickスライダーを全幅（Full Width）にする
 * ----------------------------------------------- */
.my-slick-slider {
  /* ▼▼▼ 全幅にするためのコード ▼▼▼ */
  width: 100vw; /* ビューポート（表示画面）の幅100% */
  position: relative;
  left: 50%;
  margin-left: -50vw;
  /* ▲▲▲ 全幅にするためのコード ▲▲▲ */
  
  /* はみ出し防止（念のため） */
  overflow: hidden;
}

/*
 * Slickスライダーの画像間の余白と角丸
 * ----------------------------------------------- */

/* 1. スライド間の余白（16px）を設定 */
.my-slick-slider .slick-slide {
  /* 左右に8pxずつの余白を設けます */
  /* (隣り合うスライドと合わさって 8px + 8px = 16px の余白になります) */
  margin-left: 12px;
  margin-right: 12px;
}

/* 2. 画像の角丸（16px）を設定 */
.my-slick-slider .slick-slide img {
  border-radius: 16px;
  
  /* 画像が親要素(div)の幅いっぱいに広がるように設定 */
  width: 100%;
  
  /* 縦横比を保ったままボックスに収める（画像の歪み防止） */
  object-fit: cover;
}

/* --- お問い合わせ --- */
.cf-area {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 2em 0;
	border-bottom: 1px dashed #ccc;
	transition: all .3s;
}

.cf-area:last-child {
	border-bottom: none;
}

.cf-area dt {
  width: 200px;
  padding-right: 30px;
  text-align: right;
	line-height:1.5em;
}

.cf-area dd {
    flex: 1;
}

.cf-area input, .cf-area textarea {
  width: 100%;
  padding: 0.8em;
  background-color: #eeeaea;
  border: 1px solid #dbd8d8;
  font-size: 16px;
  resize: vertical;
  transition: all .3s;
}

/* プルダウンの背景色を変更 */
.wpcf7-form select[name="your-select"] {
    background-color: #eeeaea;	
}

/* プルダウンの背景色と矢印アイコンを追加 */
.cf-area select {
	border: 1px solid #dbd8d8;
    padding-right: 30px; /* 矢印のスペースを確保 */
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"%3E%3Cpath fill="%23742000" d="M6 8L0 0h12z"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    appearance: none; /* デフォルトの矢印を消す */
    -webkit-appearance: none;
    -moz-appearance: none;
}

.cf-area select option {
    background-color: #742000;
    color: #ffffff;
}

.cf-area input:focus,.cf-area textarea:focus {
	outline: none;
	background: #dde2e9;
}

.cf-area__confirmation {
	margin-left: 200px;
/* 	padding: 2em 0; */
	transition: all .3s;
}

.cf-required {
	background: #772607;
	color: #fff;
	font-size: 0.8em;
	padding: 0 5px 2px;
	border-radius: 4px
}

.cf-send input {
	display: block;
	background: linear-gradient(135deg, #702000 0%, #391000 100%);
	width: 300px;
	height: 60px;
	margin: 30px auto 0;
	border: none;
	border-radius: 10px;
	color: #fff;
	box-shadow: 2px 5px 15px 0 rgba(0, 0, 0, .2);
	font-size: 1.3em;
	font-weight: bold;
	transition: all .3s;
}

.cf-send input:hover {
	filter: brightness(1.25);
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
	background-color: #fce3e3;
	border: none;
	text-align: center;
}

.wpcf7-turnstile.cf-turnstile div{
	text-align: right;
}

@media screen and (max-width:768px){
	.cf-area {
		display: block;
	}

	.cf-area dt {
    width: 100%;
	margin-bottom: 5px;
    padding-right: 0;
    text-align: left;
	line-height:1.5em;
	}
	
	.cf-area__confirmation {
	margin-left: 0;
    }
	
/* プレースホルダーのフォントを変更するCSS */
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
  font-family:  "M PLUS 2", sans-serif; 
  color: #c4c4c4 !important;
}
   /* Turunstileウィジェット調整 */
  .wpcf7-turnstile.cf-turnstile div {
  display: grid;		/* グリッド指定 */
  margin: 1.2em 0 1.0em;	/* 上下マージンを揃える */
  place-items: center;		/* 中央揃え */
  }
}