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

body, .wide {
/* 	margin: 0 auto; */
	font-size: 16px;
}
/* 斜め（右上がりタイプ）／カラム上に追加用*/
.cstm-clip-upper-r {
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  height:10vmin;
  background-color:#D8E4E5;/*背景色*/
  margin-bottom: 0;/*下部余白を0にする*/
}
section {
	max-width: 1200px;
	height: auto;
	margin: 0 auto;
}
.main-visual {
	width:100%;
}
/* お知らせ一覧 */
.news-box {
	max-width: 1000px;
	width: calc(100% - 40px);
	height: auto;
	display: inline-block;
	vertical-align: top;
	width: 30%;
	z-index: 99;
}
.text-shadow {
	text-shadow: 1px 1px 6px #333333;
}
.news-list {
	box-shadow: 1px 1px 6px rgba(0,0,0,0.3);
}
/* .wp-block-latest-posts li {
	display:flex;
	flex-direction:column-reverse;
} */
.wp-block-latest-posts li>a {
}
.wp-block-latest-posts li>a:hover {
	text-decoration: 1px underline #333;
	transition:.3s;
}
.news-link {
	display:block;
}
.news-link > a {
	text-decoration:none;
	display:inline-block;
	transition: 0.3s;
	padding-right:10px;
}
.news-link > a:hover {
	color:#333;
	transition: 0.3s;
	padding-right:0;
}

/* コンセプトレイアウト */
.concept-section {
	position:relative;
	padding-bottom:240px;
	border-bottom: 1px dashed #888;
}
/* 灰色背景 */
.concept-section::before {
	width:0%;
	transition: all 2s ease-in-out 0.1s;
	z-index: 0;
	content:"";
    position: absolute;
    right: 0;
    top: 0;
    height: 480px;
    background-color: rgba(228,216,198,0.6);
/* 模様	 */
/* 	background-image: radial-gradient(#fcfcfc 1px, rgba(228,216,198,0.6) 1px);
  	background-size: 20px 20px; */
}
/* キャッチフレーズ＆画像 */
.concept-inner {
	padding-top:100px;
}
.concept-img {
	width:60%;
	z-index:0;
	position:absolute;
	top:50px;
	right:30px;
	max-width:800px;
}
.concept-img > figure {
		width:50%;
}
.img-sub {
	position:absolute;
	bottom:-100px;
	left:15px;
	z-index:0;
}
/* スクロールして灰色背景表示 */
.move::before {
	width: 78%;
}

.concept-text {
	width: 100%;
	text-shadow: 1px 1px 2px #fcfcfc;
	z-index:1;
}


/* メニュー */
.menu-container {
	max-width: 1000px;
	margin: 0 auto;
}
/* スライダー */
.vk_slider_item_container {
	padding:0;
}
.swiper .swiper-wrapper {
	transition-timing-function: linear;
}

.bg > a {
  position: relative;
  overflow: hidden;
}
.bg > a::before,
.bg > a::after {
  content: "";
  display: block;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  margin: auto;
  transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
  opacity: 0;
}
.bg > a::before {
  background: rgba(164,120,100,0.6);
  width: 100%;
  height: 100%;
}
.bg > a::after {
  color: #fff;
  content: "MORE";
  font-size: 22px;
  font-weight: bold;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  bottom: 0;
  right: 0;
}
 
.bg > a:hover::before,
.bg > a:hover::after {
  opacity: 1;
}
.button {
	display:block;
	text-align:center;
}
.button-link > a {
	padding:15px 0;
	border-bottom:#111 1px solid;
	border-top:#111 1px solid;
	text-decoration:none;
	min-width:160px;
	display:inline-block;
	transition: 0.3s;
}
.button-link > a:hover {
	color:#333;
	padding:10px 0;
	transition: 0.3s;
}
/* タイトル設定 */
.menu-title {
	display: inline-block;
}
/* .title-right {
	text-align: right;
} */
/* メニュー枠線(固定ページ) */
.menu-items {
	border: 1px dashed #999;
}
.card-wrap {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr 1fr 1fr;
	width: 100%;
}
/* ブログ＆口コミ横幅 */
.flex > div {
	width:50%;
}
/* 口コミ */
.voice-container {
	max-width: 980px;
	justify-content:center;
}
.item-top {
	border-top:1px dashed #999;
}
.voice-item {
	border-bottom: 1px dashed #999;
}
/* ブログ */
.blog-inner {
	float: right;
}
.blog-container {
	overflow:hidden;
	height:300px;
}
.scroll {
	overflow:hidden;
/* 	width:368px; */
	height:300px;
	overflow-y: auto;
	scroll-snap-type: y mandatory;
	scroll-behavior: smooth;
	scrollbar-color:#fcfcfc #e4d8c6;
	scrollbar-width: thin;
	
}
.wp-block-latest-posts li {
	border:none;
	padding:10px 0;
}

.voice-btn {
  text-align: center;
}
/* 口コミ */
.voice-btn-cobtainer {
  width: 80%;
  height: 50px;
  font-size: 18px;
  font-weight: bold;

  /* ボタンにカーソルを当てると、カーソルがポインターに変わる */
  cursor: pointer;
}

/* ボタンにカーソルを当てたとき、ボタンを半透明にする */
.voice-btn-cobtainer:hover {
 opacity: 0.7;
}

/* クリックで表示させるテキストを隠す */
.hidden {
  display: none;
}

.btn2-text{
  margin: 16px 0;
  font-size: 14px;
  color: red;
}
/* 矢印右むき */
.speechBubbleLeft {
  position: relative;
  display: inline-block;
/*   margin-right: 15px;  */
	padding: 20px;
	border: 1px solid #111;
	border-radius: 15px;
	background-color: #fcfcfc;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;

}

.speechBubbleLeft::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	border-style: solid;
	border-width: 7.5px 0 7.5px 15px;
	border-color: transparent transparent transparent #111;
	translate: 100% -50%;
}

.speechBubbleLeft::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	border-style: solid;
	border-width: 6.4px 0 6.4px 12.8px;
	border-color: transparent transparent transparent #fcfcfc;
	translate: 100% -50%;
}
/* 矢印左向き */
.speechBubbleRight {
  position: relative;
  display: inline-block;
/*   margin-left: 15px; */
  padding: 20px;
  border: 1px solid #999;
  border-radius: 20px;
  background-color: #e4d8c6;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
/* 	background-image:  linear-gradient(#e4d8c6 1px, transparent 1px), linear-gradient(to right, #e4d8c6 1px, #fcfcfc 1px);
  background-size: 20px 20px; */
/* 	background-image:  radial-gradient(#e4d8c6 1px, transparent 2px), radial-gradient(#e4d8c6 1px, #fcfcfc 1px);
  background-size: 40px 40px;
  background-position: 0 0,20px 20px; */
}

.speechBubbleRight::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  border-style: solid;
  border-width: 7.5px 15px 7.5px 0;
  border-color: transparent #111 transparent transparent;
  translate: -100% -50%;
}

.speechBubbleRight::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  border-style: solid;
  border-width: 6.4px 12.8px 6.4px 0;
  border-color: transparent #fcfcfc transparent transparent;
  translate: -100% -50%;
}
.slider-item {
	padding: 0 5px;
}
/* フッター */

.footer-flex {
	display: flex;
	justify-content: space-around;
}
.footer-info {
	position: relative;
	display: inline-block;
}
.footer-info::before {
	position: absolute;
	top:50%;
	right: -110px;
	content:"";
	width: 100px;
	height: 1px;
	background-color: #333333;
}
/* SNSアイコン */
.sns-container a:hover,
.right-item a:hover {
	transform:scale(1.1);
	transition:.5s;
}
/* フッター背景 */
footer {
	background-color:#a47864;
}
/* フッターテキストカラー */
.site-footer-copyright {
	color: #fcfcfc;
}
/* powerd by〜消す */
.site-footer-copyright > p:nth-of-type(2) {
	display:none;
}
/* フッターナビカラー */
.footer-nav-list > li > a {
	color:#fcfcfc;
}
/* フッターナビのボーダー消す */
.footer-nav-list > li, .footer-nav-list li:first-child, .footer-nav {
	border: none;
}
/* ＝＝＝＝＝
 * スクロールエフェクト
 * ＝＝＝＝＝ */
/* フェードイン */
.fadeIn {
    /* 初期非表示 */
    opacity: 0;
    transform: translate(0, 100px);
    transition: 2s;
}
.fade-in {
    transform: translate(0, 0);
    opacity: 1;
}
/* スライドイン左 */
.slide-left {
	opacity:0;
	transform: translate(-100px, 0);
	transition: 2s;
}
.slideLeft {
	opacity:1;
	transform: translate(0, 0);
}
/* スライドイン右 */
.slide-right {
	opacity:0;
	transform: translate(100px, 0);
	transition: 2s;
}
.slideRight {
	opacity:1;
	transform: translate(0, 0);
}
/* ＝＝＝＝＝
 * お問い合わせ
 * ＝＝＝＝＝ */
.fix {
	position: fixed;
	right: 10px;
	bottom: 20px;
	z-index: 999;
	width:100px;
}
.right-ttl {
	text-shadow: 1px 1px 5px #fcfcfc;
	writing-mode: vertical-rl;
	-webkit-witing-mode: vertical-rl;
	font-size: 12px;
}
/* TOPへ戻る消す */
#page_top {
	display:none;
}
/* ページヘッダー */
/* 各固定ページ */
.page .page-header {
	/* 画像 */
	background-image: url(/wp-content/uploads/2025/04/img-08-scaled.jpg);
	background-size: cover;
	background-position: bottom 40% right;
}

/* 投稿一覧＆各ポスト */
.category .page-header,
.single-post .page-header {
	/* 画像 */
	background-image: url(/wp-content/uploads/2025/04/img-09-scaled.jpg);
	background-size: cover;
	background-position: center;
}

.page-header::before {
	position:absolute;
	content:"";
	left:0;
	top:0;
	width:100%;
	height:100%;
	background: rgba( 0, 0, 0, .2);
	z-index:1;
}
.page-header-inner > h1 , .page-header-title {
	letter-spacing: .1em;
	position: relative;
	z-index: 100;
	text-shadow: 0 0 20px rgba( 0, 0, 0, .3);
}
@media screen and (max-width: 375px) {
	
	.news-box {
		width: 100%;
	}
	.concept-section {
		height: 200vw;
	}
	.concept-img {
		display:none !important;
	}
	h1 {
		text-align:center !important;
		font-size:1.5em;
	}
	.concept-text {
		text-align:center !important;
		
	}
/* 固定ページメニュー	 */
	.menu-container {
		height: 100vh;
	}
	.card-wrap {
		grid-template-columns: 1fr 1fr;
	}
	.footer-flex {
		flex-direction: column;
	}
 	.fix {
		top: calc(100vh - 200px);	
	}

/* ブログ＆くち込み	 */
	.flex {
		flex-direction:column;
	}
	.flex > div {
		width:100%;
	}
	.slider-item {
		padding: 0 2px;
	}
	footer, .site-footer {
		margin-bottom: 120px;
	}

}