@charset "utf-8";

:root {
	--lb-bg: #faf6ed;      /* 背景クリーム */
	--lb-color: #6d103a;   /* 文字・罫線のえんじ */
	/* 固定ヘッダーの高さ ＝ 上下padding + 文字サイズ（.lb_header の値と対応） */
	--lb-header-h: calc(min(3.6vw, 54px) + min(3.1vw, 47px) * 2);
}

.pc {
	display: block;
}
.sp {
	display: none;
}
.font {
	font-family: "ivyora-display", serif;
	font-weight: 400;
	font-style: normal;
}
body {
	background: var(--lb-bg);
}
#lower {
	padding-top: 0%;
}
/*左から右にフェードイン*/
.left-to-right {
	opacity: 0;
	transform: translateX(-20px);
	transition: all 1s;
	transition-delay: .3s;
}
.left-to-right.inview {
	opacity: 1;
	transform: translate(0);
}
/*右から左にフェードイン*/
.right-to-left {
	opacity: 0;
	transform: translateX(20px);
	transition: all 1s;
	transition-delay: .3s;
}
.right-to-left.inview {
	opacity: 1;
	transform: translate(0);
}
/*下から上にフェードイン*/
.down-to-top {
	opacity: 0;
	transform: translateY(20px);
	transition: all 1s;
	transition-delay: .3s;
}
.down-to-top.inview {
	opacity: 1;
	transform: translateY(0);
}
/*フェードイン*/
.fade-in {
	opacity: 0;
	transition: all 1s;
	transition-delay: .3s;
}
.fade-in.inview {
	opacity: 1;
}
/*モノクロ→カラー*/
.gray-color img {
	filter: grayscale(100%);
	transition-delay: 1.3s !important;
}
.gray-color.inview img {
	filter: grayscale(0);
}
.down-to-top_parent .down-to-top_child {
	opacity: 0;
	transform: translateY(20px);
	transition: all 1s;
	transition-delay: .3s;
}
.down-to-top_parent.inview .down-to-top_child {
	opacity: 1;
	transform: translate(0);
}
.down-to-top_parent .down-to-top_child:nth-child(2) {
	transition-delay: .5s;
}
.down-to-top_parent .down-to-top_child:nth-child(3) {
	transition-delay: .7s;
}
.down-to-top_parent .down-to-top_child:nth-child(4) {
	transition-delay: .9s;
}
.down-to-top_parent .down-to-top_child:nth-child(5) {
	transition-delay: 1.1s;
}
.down-to-top_parent .down-to-top_child:nth-child(6) {
	transition-delay: 1.4s;
}
.fade-in_parent .fade-in_child {
	opacity: 0;
	transition: opacity 1s;
	transition-delay: .3s;
}
.fade-in_parent.inview .fade-in_child {
	opacity: 1;
}
.fade-in_parent .fade-in_child:nth-child(2) {
	transition-delay: .5s;
}
.fade-in_parent .fade-in_child:nth-child(3) {
	transition-delay: .7s;
}
.fade-in_parent .fade-in_child:nth-child(4) {
	transition-delay: .9s;
}
.fade-in_parent .fade-in_child:nth-child(5) {
	transition-delay: 1.1s;
}
.fade-in_parent .fade-in_child:nth-child(6) {
	transition-delay: 1.4s;
}
/*アニメーションdelay*/
.animation_delay2 {
	transition-delay: .5s;
}
.animation_delay4 {
	transition-delay: .8s;
}
.animation_delay6 {
	transition-delay: 1.1s;
}
/* テキストアニメーション */
.jojo {
  display: inline-block;
  position: relative;
  clip-path: inset(0 0 100% 0); /* 最初は非表示 */
  transition: clip-path 1.2s ease-out;
  transition-delay: .5s;
}
.unit_main_title.inview .jojo {
  clip-path: inset(0 0 0% 0);
  line-height: 1em;
}
@keyframes revealLeftToRight {
  to {
    clip-path: inset(0 0 0% 0); /* 下方向に表示される */
  }
}
.container {
	position: relative;
	width: 100%;
	background: var(--lb-bg);
}
#wrap_contents {
	width: 100%;
	margin: 0px auto 0px;
	padding: 0;
	line-height: 1.5em;
	letter-spacing: 1px;
	font-family: "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background: var(--lb-bg);
}
#wrap_contents img {
	vertical-align: bottom;
	width: 100%;
}
#wrap_contents a:hover img {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}


/*===============================================
  header
===============================================*/
.lb_header {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* padding: min(3.1vw, 47px) min(2.2vw, 33px); */
	padding: 0px 30px 10px;
	color: var(--lb-color);
}
.lb_header_left,
.lb_header_right {
	font-style: italic;
	line-height: 1;
}
.lb_header_left {
	font-size: min(3.2vw, 40px);
	letter-spacing: -.01em;
	margin-top:22px;
}
.lb_header_right {
	font-size: min(4.6vw, 64px);
	padding-right: 10px;
	letter-spacing: -.01em;
	padding-top:0px;
}

/*===============================================
  photo grid
===============================================*/
.lb_grid {
	display: -ms-grid;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	/* 固定ヘッダー分のスペース */
	font-size: 0;
	line-height: 0;
}
.lb_item {
	position: relative;
	cursor: pointer;
	outline: none;
}
.lb_item img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}
.lb_item:hover img,
.lb_item:focus img {
	opacity: 0.8;
}
/* モーダルへ渡すテキスト（グリッド上では非表示） */
.lb_item_caption {
	display: none;
}

/*===============================================
  outro
===============================================*/
.lb_outro {
	padding: min(6vw, 90px) min(4vw, 60px) min(7vw, 105px);
	text-align: center;
	background: var(--lb-bg);
	color: var(--lb-color);
}
.lb_outro_text {
	font-size: min(1.8vw, 18px);
	line-height: 1.9;
	letter-spacing: .02em;
}
.lb_outro_link {
	display: inline-block;
	margin-top: min(3.5vw, 40px);
	font-size: min(1.8vw, 20px);
	line-height: 1.6;
	letter-spacing: .02em;
	color: var(--lb-color);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}
.lb_outro_link:hover {
	opacity: .7;
}

/*===============================================
  modal
===============================================*/
body.lb_noscroll {
	overflow: hidden;
}
.lb_modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: var(--lb-bg);
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity .4s ease, visibility .4s ease;
	transition: opacity .4s ease, visibility .4s ease;
}
.lb_modal.is-open {
	opacity: 1;
	visibility: visible;
}
/* 閉じるボタン */
.lb_modal_close {
	position: absolute;
	top: 26px;
	right: 30px;
	z-index: 10;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	background: none;
	color: var(--lb-color);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.lb_modal_close svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}
.lb_modal_close:hover {
	opacity: .6;
}
/* スライダー */
.lb_modal_slider {
	width: 100%;
	height: 100%;
}
.lb_modal_slider .swiper-slide {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: flex-start;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 100%;
	overflow-y: auto;
	background: var(--lb-bg);
	padding: 0;
}
/* 画像の縦横比 1000 : 1437 を基準に、
   ヘッダー・キャプション分（下記 reserve）を差し引いた高さに収まる幅を算出 */
.lb_slide_inner {
	width: min(62vw, calc((100vh - 140px) / 1.437));
	/* margin: 50px auto 40px; */
	margin: 30px auto 40px;
}
.lb_slide_img img {
	display: block;
	width: 100%;
	height: auto;
}
.lb_slide_caption {
	padding: 6px 3% 0;
	color: var(--lb-color);
	font-size: 17px;
	line-height: 1.6;
	letter-spacing: .04em;
}
.lb_slide_caption a {
	display: block;
	color: var(--lb-color);
	text-decoration: none;
	font-size: 14px;
}
.lb_slide_caption a:hover {
	opacity: .6;
}


/***************　▼スマホ▼　*****************/
@media screen and (max-width: 767px) {
	:root {
		/* 5.8vw（文字）＋ 4.5vw × 2（上下padding） */
		--lb-header-h: 14.8vw;
	}
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	/* header */
	.lb_header {
		padding: 0vw 3.4vw 2vw;
	}
	.lb_header_left {
		font-size: 3.5vw;
		letter-spacing: -.01em;
		margin-left: -1%;
	}
	.lb_header_right {
		font-size: 5.8vw;
		padding-right: 0px;
		letter-spacing: -.01em;
		padding-top: 15px;
	}
	/* outro */
	.lb_outro {
		padding: 11vw 6vw 13vw;
	}
	.lb_outro_text {
		font-size: 3vw;
		line-height: 1.6;
	letter-spacing: .0em;
	}
	.lb_outro_link {
		margin-top: 7vw;
		font-size: 3.5vw;
	}
	/* modal */
	.lb_modal_close {
		top: 3.5vw;
		right: 4vw;
		width: 7vw;
		height: 7vw;
	}
	/* SPは常にスライド幅いっぱい。
	   高さ基準（100vh）で算出するとiOS Safariで数px小さくなり、
	   左右に余白ができてスライド間の隙間として見えるため使わない */
	.lb_slide_inner {
		width: 100%;
		margin: 60px auto 40px;
	}
	.lb_slide_caption {
		padding: 2vw 5% 0;
		font-size: 3.7vw;
	}
	.lb_slide_caption a {
		font-size: 12px;
	}
}