@charset "UTF-8";
/****************************************
	common
****************************************/

h2.title {
	overflow: hidden;
}


/****************************************
	main
****************************************/
main {
	position:relative;
}


/****************************************
	main-img
****************************************/
section#main-img {
	position:relative;
	height:100svh;
	min-height:100vh;
	overflow:hidden;
}

section#main-img .m-slider {
	position:relative;
	height:100%;
}

section#main-img .m-slider .slide {
	position:absolute;
	inset:0;
	opacity:0;
	transition:opacity 1.6s ease;
}

section#main-img .m-slider .slide img {
	width:100%;
	height:100%;
	object-fit:cover;
	position:absolute;
	inset:0;
	transform:scale(1.05);
	transition:transform 2s ease;
}

section#main-img .m-slider .slide.active {
	opacity:1;
	z-index:1;
}

section#main-img .m-slider .slide.active img {
	transform:scale(1);
}

section#main-img .m-slider .sp { display:none; }

@media(max-width:768px){
	section#main-img .m-slider .pc { display:none; }
	section#main-img .m-slider .sp { display:block; }
}

section#main-img .m-slider .copy {
	position:absolute;
	z-index:2;
	bottom:5%;
	left:5%;
	transform:translateY(20px);
	color:#000;
	opacity:0;
	/*text-align:center;*/
	transition:all 1s ease;
	display: inline-block;
	color: white;
	/*
	background: rgba(0,0,0,0.7);
	padding:15px 10px;
	border-radius:22px;
	*/
	
}

section#main-img .m-slider .copy div {
	font-size:clamp(26px, 5vw, 48px);
	font-weight:900;
	letter-spacing:0.05em;
}

section#main-img .m-slider .copy div span {
	position:relative;
}

/*
section#main-img .m-slider .copy div span::after {
	content:"";
	position:absolute;
	bottom:10px;
	left:0;
	width:100%;
	height:18px;
	background:rgba(255,255,255,.7);
	z-index:-1;
}
*/

section#main-img .m-slider .slide .copy div {
	font-size:clamp(26px, 5vw, 48px);
}


section#main-img .m-slider .slide .copy p span {
	position:relative;
	display:inline-block;
}

/*
section#main-img .m-slider .slide .copy p span::after {
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:18px;
	background:rgba(255,255,255,.7);
	z-index:-1;
}
*/

section#main-img .m-slider .slide.active .copy {
	opacity:1;
	transform:translateY(0);
}

@media screen and (max-width:480px) {
	section#main-img .m-slider .copy {
		width:calc(95% - 120px);
	}
}


/****************************************
	about
****************************************/
section#about {
	position:relative;
	width:100%;
	padding:100px 5% 100px;
	background:#f5f5f5;
	overflow:hidden;
}

section#about .about-inner {
	position:relative;
	width:100%;
	max-width:920px;
	margin:0px auto;
}

section#about .about-inner .a-title {
	position:relative;
	text-align:right;
}

section#about .about-inner .a-title span {
	position:relative;
	display:inline-block;
	font-size:clamp(22px , 5vw , 32px);
	z-index:2;
}

section#about .about-inner .a-title span:nth-of-type(1) {
	padding-right:10%;
}

section#about .about-inner .a-title span:nth-of-type(2) {
	padding-right:0px;
}

section#about .about-inner .a-title div {
	position:absolute;
	top:0;
	right:-20%;
	color:#fff;
	z-index:0;
	font-size:250px;
	line-height:1;
	user-select:none;
}




section#about .about-inner .a-dtl {
	position:relative;
	line-height:2.0em;
	padding:70px 0px 70px;
	z-index:2;
}

section#about .about-inner .a-dtl .signature {
	position:absolute;
	bottom:0px;
	right:0;
	transform:rotate(-7deg);
}

section#about .about-inner .a-dtl .signature span {
  display: inline-block;
}

section#about .a-img {
	position:absolute;
	bottom:105px;
	left:5%;
	width:200px;
	transition:.4s;
}

section#about .a-img img {
	width:100%;
	border:5px solid #c29a5c;
}


@media screen and (max-width:1500px) {
	
	section#about .a-img {
		bottom:25px;
		left:1%;
	}

}


@media screen and (max-width:480px) {
	section#about .a-img {
		position:relative;
		left:auto;
		bottom:auto;
	}

	section#about .about-inner .a-dtl {
		padding:70px 0px 0px;
	}

	section#about .about-inner .a-dtl .signature {
		bottom:-170px;
	}

}






/****************************************
	news
****************************************/
section#news {
	position:relative;
	width:100%;
	padding:100px 5% 100px;
	background:#fff;
	overflow:hidden;
}

section#news .news-inner {
	position:relative;
	width:100%;
	max-width:1080px;
	margin:0px auto;
}

section#news .news-inner h2 {
	width:20%;
}

section#news .news-inner .news-area-wrapper {
	width:80%;
}

section#news .news-inner .flex {
	gap:20px;
}

section#news .news-inner .news-area-wrapper .news-area {
	display:block;
	position:relative;
	width:calc(33.3333% - 20px);
}

section#news .news-inner .news-area-wrapper .news-area a {
	color:#333;
	transition:.4s;
}

section#news .news-inner .news-area-wrapper .news-area a:hover {
	color:#787878;
	text-decoration:none;
	transition:.4s;
}

section#news .news-inner .news-area-wrapper .news-area .news-img {
	display:block;
	position:relative;
	width:100%;
	aspect-ratio: 1 / 1;
	overflow:hidden;
	margin:30px 20px 0px;
}

section#news .news-inner .news-area-wrapper .news-area .news-img img {
	position:absolute;
	transform:scale(1.0);
	width:100%;
	transition:.4s;
}

section#news .news-inner .news-area-wrapper .news-area .news-img img:hover {
	transform:scale(1.2);
}

section#news .news-inner .news-area-wrapper .news-area .news-date {
	display:block;
	position:absolute;
	top:10px;
	left:0px;
	padding:0px 20px;
	font-size:12px;
}

section#news .news-inner .news-area-wrapper .news-area .news-title {
	display:block;
	padding:5px 20px;
	font-size:14px;
}

section#news .news-inner .news-area-wrapper .news-area .title-inner{
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	overflow:hidden;
}

section#news .news-list {
	padding-top:70px;
	text-align:center;
}


@media screen and (max-width:768px) {

	section#news .news-inner h2 {
		width:100%;
	}

	section#news .news-inner .news-area-wrapper {
		width:100%;
	}

	section#news .news-inner .news-area-wrapper .news-area {
		width:100%;
	}

	section#news .news-inner .news-area-wrapper .news-area a {
		display:flex;
		flex-wrap:wrap;
		width:100%;
	}

	section#news .news-inner .news-area-wrapper .news-area .news-area-inner-img {
		display:block;
		width:20%;
	}


	section#news .news-inner .news-area-wrapper .news-area .news-area-inner-info {
		display:block;
		width:80%;
	}

	section#news .news-inner .news-area-wrapper .news-area .news-img {
		width:100%;
		margin:0px 0px;
	}

	section#news .news-inner .news-area-wrapper .news-area .news-date {
		display:block;
		position:relative;
		top:auto;
		left:auto;
		padding:20px 20px 7px;
	}

	section#news .news-inner .news-area-wrapper .news-area .news-title {
		display:block;
		padding:5px 20px 0px;
	}

}

@media screen and (max-width:768px) {

	section#news .news-inner .news-area-wrapper .news-area .news-area-inner-img {
		width:30%;
	}


	section#news .news-inner .news-area-wrapper .news-area .news-area-inner-info {
		width:70%;
	}

	section#news .news-inner .news-area-wrapper .news-area .news-date {
		padding:10px 20px 7px;
	}

	section#news .news-inner .news-area-wrapper .news-area .news-title {
		padding:5px 20px 5px;
	}

}

/****************************************
	gallery
****************************************/
section#gallery {
	position:relative;
	width:100%;
	padding:100px 5% 100px;
	background:#6f6a70;
	overflow:hidden;
}

section#gallery .gallery-inner {
}

section#gallery .gallery-inner .flex {
	gap:20px;
}

section#gallery .gallery-inner h2 {
	color:#fff;
}

section#gallery .gallery-inner .gallery-area {
	position:relative;
	width:calc(25% - 20px);
	padding:40px 10px;
	background:#8f8790;
	overflow:hidden;
}

section#gallery .gallery-inner .gallery-area .gallery-img {
	display:block;
	position:relative;
	width:100%;
	aspect-ratio:1 / 1;
	overflow:hidden;
}

/* 画像 */
section#gallery .gallery-inner .gallery-area .gallery-img img {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	transform:scale(1.02);
	transition:transform .6s ease;
	cursor:pointer;
}

section#gallery .gallery-inner .gallery-area .gallery-img img.loaded{
	opacity:1;
	transform:scale(1);
}

/* 枠 */
section#gallery .gallery-inner .gallery-area .gallery-img::after{
	content:"";
	position:absolute;
	inset:10px;
	border:1px solid #fff;
	opacity:0;
	transition:.4s;
	pointer-events:none;
}

/* ＋アイコン */
section#gallery .gallery-inner .gallery-area .gallery-img::before{
	content:"+";
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%) scale(0.8);
	color:#fff;
	font-size:40px;
	font-weight:200;
	opacity:0;
	transition:.4s;
	z-index:2;
	pointer-events:none;
}

/* hover（親に入ったら動く） */

section#gallery .gallery-inner .gallery-area:hover .gallery-img img{
	transform:scale(1.05);
}

section#gallery .gallery-inner .gallery-area:hover .gallery-img::after{
	opacity:1;
}

section#gallery .gallery-inner .gallery-area:hover .gallery-img::before{
	opacity:1;
	transform:translate(-50%,-50%) scale(1);
}

/* タイトル */

section#gallery .gallery-inner .gallery-area .gallery-caption{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	padding:12px;
	color:#fff;
	font-size:13px;

	background:linear-gradient(
		to top,
		rgba(0,0,0,0.6),
		rgba(0,0,0,0)
	);

	transform:translateY(100%);
	transition:.4s;
}

section#gallery .gallery-inner .gallery-area:hover .gallery-caption{
	transform:translateY(0);
}


section#gallery .gallery-inner .gallery-more {
	margin-top:60px;
	text-align:center;
}

section#gallery .gallery-inner #gallery-load {
	width:100%;
	max-width:360px;
	padding:13px 10px 4px;
	height:auto;
	border:1px solid #fff;
	background:none;
	color:#fff;
	font-size:14px;
	letter-spacing:0.07em;
	cursor:pointer;
	transition:.3s;
}

section#gallery .gallery-inner #gallery-load span {
	display:block;
	font-size:16px;
	padding:5px 0px 0px;
}

section#gallery .gallery-inner #gallery-load:hover {
	background:#fff;
	color:#333;
}


#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
  pointer-events: none;
  z-index: 9999;
}

#lightbox.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.4s ease;
}

body.lb-lock{
  overflow: hidden;
  height: 100vh;
  touch-action: none;
}

/* 画像 */
.lb-img {
  max-width: 85vw;
  max-height: 85vh;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.lb-img.show-img {
  opacity: 1;
}

/* 閉じるボタン */
#lightbox .lb-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 32px;
  color: #fff;
  cursor: pointer;
  z-index: 2;
}

/* 前後ボタン */
#lightbox .lb-prev,
#lightbox .lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  color: #333;
  cursor: pointer;
  z-index: 2;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select:none;
  outline: none;
  background: transparent;
}

#lightbox .lb-prev::before,
#lightbox .lb-next::before {
  content:"";
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translateX(-50%) translateY(-50%);
  width:40px;
  height:40px;
  background:#fff;
  z-index: -1;
  border-radius:50%;
  box-shadow:0px 0px 4px rgba(0,0,0,.8);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select:none;
  outline: none;
}




#lightbox .lb-prev { left: 20px; }
#lightbox .lb-next { right: 20px; }

@media screen and (max-width:768px) {
	section#gallery .gallery-inner .gallery-area {
		width:calc(33.3333% - 15px);
	}
}

@media screen and (max-width:480px) {
	section#gallery .gallery-inner .gallery-area {
		width:calc(50% - 10px);
	}
}