/* ------------------------------
 .google-feed
------------------------------ */

.google-feed{
	width: 90%;
	margin: 0 auto
}





/* ------------------------------
 intoro
------------------------------ */

#intoro{position: relative}

#video_wrap{
	position: relative;
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	
}

video{display: block;
	object-fit: cover;
	width: 100%
}


.swiper {
  overflow: hidden;
  margin-left: 0
}



@keyframes zoom {
  from {
    transform: translateX(0px) scale(1.2);
  }
  to {
    transform: translateX(20px) scale(1.2);
  }
}


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

	.swiper .swiper-wrapper .swiper-slide-prev img,
	.swiper .swiper-wrapper .swiper-slide-active img,
	.swiper .swiper-wrapper .swiper-slide-duplicate-active img {
		
	  object-fit: cover;
	   width: 100%;
	   height: calc(100vh - 50px);
	}
}


@media print, screen and (min-width: 768px) {
	.swiper .swiper-wrapper .swiper-slide-prev img,
	.swiper .swiper-wrapper .swiper-slide-active img,
	.swiper .swiper-wrapper .swiper-slide-duplicate-active img {
	  object-fit: cover;
	   width: 100%;
	}
	
	.ssimg{
	position: relative;
	height: 100vh
	}
	
	.ssimg img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	}

}	


	
.swiper_wrap{
	position: relative
}


.copy{
	position: absolute;
	z-index: 50;
	left: 0;
	right: 0;
	margin: 0 auto;
	color: #fff;
	width: 100%;
	text-align: center;
	padding-top: 45vh;
	font-size: clamp(1.5rem, 1.023rem + 2.39vw, 2.813rem);
	font-weight: normal;
	line-height: 1;
	text-shadow: 0px 0px 7px rgba(135, 135, 135, 1);
}

.logo{
	width: 30%;
	max-width: 200px;
	position: absolute;
	z-index: 50;
	bottom: 50px;
	left: 0;
	right: 0;
	margin: 0 auto
}

.logo::after{
	padding: 20% 0 0;
	width: 100%;
	display: block;
	content: " ";
	background-size:contain;
	background-image: url(../img/typo.svg);
	background-position: center center;
	background-repeat: no-repeat
}

@media print, screen and (min-width: 768px) {
	.copy{padding-top: 50vh;}
	.logo{width: 25%;max-width: 200px;}
}	





.sec_title{
	text-align: center;
	margin-bottom: 2.5em;
	color: var(--color-main);
}

.sec_title span{
	display: block;
	font-size: 1.4rem;
	letter-spacing: .1em
}



ul.ban li{position: relative}

.ban .ss_i img{
	width: 100%;
	height: auto
}


	
@media screen and (orientation: landscape) {

}
	

@media screen and (max-width: 767px) {
	ul.ban{padding: 5px 5px 0}
	ul.ban li:not(:last-child){margin-bottom: 5px}
	.ban .ss_i{
	display: block;
	width: 100px;
	bottom: 60px;
	left: 20px;
	z-index: 30;
	position: absolute;
	animation: pyonpyon 3s infinite ease;
	}

}	

@media print, screen and (min-width: 768px) {
	



	ul.ban{
		display: flex;
		justify-content: space-between;
		flex-wrap:wrap;
		z-index: 100;
		width: 80%;
		max-width: 1000px;
		margin: 5% auto 0;
	}
	ul.ban li{
		width: 48%;
	}
	
	ul.ban li img{
		width: 100%;
		height: auto
	}
	
	.ban .ss_i{
	display: block;
	width: 180px;
	left: 20px;
	bottom: -40px;
	z-index: 30;
	position: relative;
	animation: pyonpyon 3s infinite ease;
	}

}

@media print, screen and (min-width: 1240px){
	ul.ban li{
		max-width: 600px;
	}
}


/* ------------------------------
#pickup
------------------------------ */
#pickup{
	margin: 0 auto;
	padding: 8% 0
}

#pickup h2{
	text-align: center;
	padding: 0 1em;
	margin-bottom: 1em;
	color: #174c28;
	letter-spacing: 1px;
	font-size: 1.8em
}



#pickup li .kaisai{
	line-height: 1.6em;
	margin-bottom: 5px
}




.topicswiper{position: relative;
	overflow: hidden;
	padding-bottom: 3em
}

#pickup .more_event{margin: 1.5em auto 0}

#pickup .more_event a{margin: 0 auto}

#pickup .closed_img{
	opacity: .6
}

.event_title{
	padding: .8em 0 0;
	font-size: .9em
}


.event_title h3{
	font-size: .938rem
}

.event_title h3 a br{
	display: none
}

.closedtxt{
	color: #a5a5a5
}


.imgwrap{
position: relative;
aspect-ratio: 4/4;
max-height: 400px;
}

.imgwrap img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}


.gcal{
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 3%
}


@media screen and (max-width: 667px) {
	#pickup{padding: 10% 0 0 0}
	#pickup h2{}
	.topicswiper{padding: 0 0 0 5%}
	#pickup .more_event{margin: 1.5em 5% 0}
	.swiper-button-next, .swiper-rtl .swiper-button-prev{
	right: 0;
	}
	
	.gcal{padding: 5% 3%}
	
}	

@media print, screen and (min-width: 668px) {
	#pickup{max-width: 1200px;padding: 5% 0}
	#pickup h2{font-size: 30px;margin-bottom: 1.5em;}
	#pickup .more_event{margin: 3em auto 0}
	
	.pick_img{
	width:auto;
/* 	height: 320px */
	}

}	


.swiper-button-next, .swiper-button-prev{
	background: #fff
}



/* ------------------------------
 #type
------------------------------ */

#type{
	background: #ddeaea;
	padding:  6%
}




.type_list{
	margin: 0 auto
}

.type_list > div{
	background: #fff;
	text-align: center;
	box-shadow: 1px 1px 6px #ccc;
	position: relative;
}

.type_list > div > div{
	padding: 1.5em
}

.type_list .more{
	margin: 1em auto 0
}

@media screen and (max-width: 767px) {
	.type_list div:first-child{
		margin-bottom: 2em
	}
}	

@media print, screen and (min-width: 768px) {
	.type_list{
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	max-width: 1000px;
	}
	
	.type_list > div{
		width: 47%;
	}
}	

@media print, screen and (min-width: 1024px) {}	


/* ------------------------------
 features
------------------------------ */	
#features{
	text-align: center
}



.features_company{
	text-align: center;
	padding: 3em 1em;
}

.features_company p{
}





.features_read ul{
	display: flex;
	justify-content: center;
}


.features_read > div{
	text-align: left
}

.features_read > div h1{
	margin-bottom: 1.2em;
}

.features_read > div .more{
	margin: 1em 0 0 0
}


@media screen and (max-width: 1023px) {
	.features_read > div{
		padding: 1.6em
	}
	.features_read p br{display: none}
}	

@media print, screen and (min-width: 768px) {
	.features_read{}
	.features_company{
		display: flex;
		justify-content: center;
		align-items: center}
	.features_company img{width: 300px}
	.features_company p{padding:0 20px;}
	

	.features_read{
		display: flex;
		justify-content: space-between;
		flex-wrap:wrap;
		align-items: center
	}
	
	.features_read > div{
		padding: 2em 5%;
		width: 50%
	}
	
	
	.features_read > ul{
		width: 50%;
	}
	
	
}

@media print, screen and (min-width: 1680px) {

	.features_read{
		max-width: 1360px;
		margin: 0 auto
	}
	
	.features_read > div{
		width: calc(100% - 600px);
	}
	.features_read > ul{max-width: 600px}
	
}	









/* ------------------------------
#works
------------------------------ */

#works{
	padding: 3em 0 2em
}

h2.lefth2{
	margin-bottom: 1em;
	border-bottom: solid 2px #707070;
	padding:0 1em .5em 6%;
	width:-moz-fit-content;
	width:fit-content;
	font-size: 24px;
	letter-spacing: 1px
}


h2.lefth2 span{font-size: .7em;padding-left: 20px;}


#works .swiper-slide{}

#works .swiper-slide img{
	object-fit: cover;
   width: 100%;
}

.workswiper{
	overflow: hidden;
	position: relative;
	padding: 0 20px 20px;
	margin: 0 auto
}


.worksnew{
	position: relative;
	-webkit-box-shadow:1px 1px 6px #ccc;
	-moz-box-shadow:1px 1px 6px #ccc;
	box-shadow: 1px 1px 6px #ccc;
	border: solid 1px #eee
}

.worksnew > div:nth-child(1){
	position: relative;
}

.worksnew > div:nth-child(1) img{
	object-fit: cover;
	width: 100%;
}
.worksnew > div:nth-child(2){padding: 1.2em 1em 1em}


.worksnew .no{
	font-size: 20px;
	display: block;
	color: rgba(72, 46, 51, 0.6)
}
.worksnew > div h3{
	font-size: clamp(0.938rem, 0.869rem + 0.34vw, 1.125rem)
}

.worksnew > div p{
	font-size: .9em;
	margin-bottom: 1em
	
}



#works .more{margin: 1.5em auto 3em;}




@media screen and (max-width: 767px) {
	.workswiper{margin: 0 auto}
	.workswiper .swiper-button-prev,
	.workswiper .swiper-button-next{
		display: none
	}
	.worksnew{min-height: 300px}
	.scroll-nav {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-left: 5%;
	scrollbar-width: none;
	}
	
	.scroll-nav::-webkit-scrollbar {
		display:none;
	}
/*
	ul.works_themeli li{min-width: 60%}
	ul.works_themeli li{margin-right: 1em}
*/


	ul.works_themeli li{
	width: calc(( 100% - 10px ) / 2 );
	margin:0 10px 10px 0;
	}
	
	ul.works_themeli li:nth-child( 2n ) {margin-right: 0;}
}	

@media print, screen and (min-width: 768px) {
	h2.lefth2{
		margin-bottom: 5%;
		font-size: 36px;
		width: 70%
	}
	
	
	#works .swiper-slide{}
	#works .swiper-slide img{
		object-fit: cover;
	   width: 100%;
	   height: 40vh;
	   max-height: 300px
	}
	
	
	.workswiper{padding: 0 70px 50px;}
	
	.worksnew{
	}
	.worksnew .no{font-size: 30px}
	.worksnew > div h3{font-size: 1.1em;}
	.worksnew > div:nth-child(1) img{height: 30vh;}
	.worksnew > div:nth-child(2){padding:1.5em;height: 120px;}
	ul.works_themeli{flex-wrap:wrap;}
	ul.works_themeli li{
	width: calc(( 100% - 60px ) / 4 );
	margin:0 20px 10px 0;
	}
	
	ul.works_themeli li:nth-child( 4n ) {margin-right: 0;}
	ul.works_themeli li a{padding: .8em .8em;}
}	

@media print, screen and (min-width: 769px) {
	.workswiper{margin: 0 5% 0;}
	ul.works_themeli{margin: 1em auto}
	.worksnew {}
	.worksnew > div:nth-child(2){padding: 1em}
}

@media print, screen and (min-width: 1240px) {
	h2.lefth2{width: 50%}
	.worksnew > div:nth-child(1) img{height: 50vh;max-height: 400px;}
}



/* ------------------------------
 maincontents
------------------------------ */
#maincontents{
	margin-bottom: 6%;
	padding: 5% 0 0;
}

#maincontents ul li{text-align: center;}

#maincontents ul li h2{
	position: relative;
	margin: 1em 1em 30px;
	font-size: 1.3em
}
#maincontents ul li p{margin: 0 1em;line-height: 1.3em}
#maincontents ul li h2:after{
	content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;
  display: block;
  width: 60px;
  height: 2px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color:rgba(23, 77, 40, 0.4);
  border-radius: 2px;
}



#maincontents ul li img{
	object-fit: cover;
	width: 100%;
	height: 200px
}

@media screen and (max-width: 667px) {
	#maincontents{margin-bottom: 10%}
	#maincontents ul li{padding-bottom: 10%}
	#maincontents ul li p{}
}	

@media print, screen and (min-width: 668px) {
	#maincontents ul{
	display: flex;
	justify-content: center;
	flex-wrap:wrap;
	margin: 0 auto
	}
	
	#maincontents ul li{
	width: calc(( 100% - 20px ) / 2 );
	margin:0 20px 20px 0;
	}
	
	#maincontents ul li:nth-child( 2n ) {margin-right: 0;}


	#maincontents ul li img{height: 200px}
	#maincontents ul li h2{font-size: 24px}
}	

@media print, screen and (min-width: 1024px) {
	#maincontents ul li img{height: 230px}
	#maincontents ul li{
	width: calc(( 100% - 60px ) / 2 );
	margin:0 60px 60px 0;
	}
}	


@media print, screen and (min-width: 1240px) {
	#maincontents ul li img{height: 250px}
}	




/* ------------------------------
 banners
------------------------------ */
ul.reco_ban{
	max-width: 980px;
	margin: 0 auto
}



#home .tatetala_info{
margin:0 auto 5%;
text-align: center;
max-width: 980px;
}


@media screen and (max-width: 667px) {
	ul.reco_ban li{
		margin:0 5px 5px;
	}
	#home .tatetala_info{margin:0 5px 5px;}
}	

@media print, screen and (min-width: 668px) {
	ul.reco_ban{
		display: flex;
		flex-wrap:wrap;
		margin: 0 auto 3%
	}
	
	ul.reco_ban li{
	width: calc(( 100% - 30px ) / 2 );
	margin-right: 30px;
	}
	
	ul.reco_ban li:nth-child( 2n ) {margin-right: 0;}


}	

@media print, screen and (min-width: 1024px) {}	





/* ------------------------------
 .instagram-feed
------------------------------ */
.instagram-feed{
	width: 90%;
	margin: 0 auto
}


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

@media print, screen and (min-width: 768px) {
	.instagram-feed{}
}	

@media print, screen and (min-width: 1024px) {
	.instagram-feed{width: 80%;}
	.sbi_header_text{margin: 0px auto;
		width: 60% !important;
	}
}	


/* ------------------------------
 #movie_hl
------------------------------ */
#movie_hl{
	padding: 0 0 5%
}

#movie_hl ul{}
#movie_hl ul li{}
#movie_hl ul li h3{
	font-size: 1em;
	padding: .8em;
}


#movie_hl .more{margin: 0 auto 3em;}
	

@media print, screen and (min-width: 668px) {
	#movie_hl ul{
	display: flex;
	flex-wrap:wrap;
	margin: 0 auto
	}


	#movie_hl ul li{
	width: calc( ( 100% - 60px ) / 3 );
	margin-right: 30px;
	margin-bottom: 1.3em
	}
	
	#movie_hl ul li:nth-child( 3n ) {margin-right: 0;}
	#movie_hl ul li h3{}
}	

@media print, screen and (min-width: 1360px) {
	#movie_hl ul{max-width: 1200px;}
}	


/* ------------------------------
 .instagram-feed
------------------------------ */
.instagram-feed{
	width: 90%;
	margin: 0 auto;
}


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

@media print, screen and (min-width: 768px) {
	.instagram-feed{}
}	

@media print, screen and (min-width: 1024px) {
	.instagram-feed{width: 80%;}
	.sbi_header_text{margin: 0px auto;
		width: 60% !important;
	}
}	



/* ------------------------------
 #media_list
------------------------------ */

#media_list{
	padding: 6% 0
}

.media_list_wrap{
	max-width: 980px;
	width: 90%;
	margin: 0 auto;
}


.media_list_wrap dl{
	padding: 1.5em 1em;
	border-bottom: solid 1px #ccc
}


.media_list_wrap dt{
	font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
	font-weight: bold;
	margin: 0 0 .6em 0
}

.media_list_wrap dt::before{
	content: "–";
	padding-right: .8em
}


.media_list_wrap dd{
	padding: 0 0 0 1em
}