@charset"utf-8"; 

/*Global*/

* {
	margin: 0; 
	padding: 0; 
}

html {
	font-size: 100%;
}

img { width: 100%; }

body { font-family: font-family: 'Sawarabi Mincho', sans-serif; width: 100%;}

.body-wrap { overflow: hidden; }
/*↑still 1100px~余白消えない*/

/*Header*/

.header-wrapper {
	max-width: 1100px; 
	margin: 0 auto; 
	position: relative; 
}

.big-bg {
	background-position: center; 
	background-size: cover; 
	background-repeat: no-repeat; 
	object-fit: cover; 
}

#home {
	position: relative; 
	background-image: url('../img/big-img1.jpg'); 
	min-height: 76vh; 
} 

#home h2 {
	font-size: 55px; 
	font-weight: 400; 
	text-align: center; 
	margin: 0 auto; 
	z-index: 0; 
}

.header-wrap2 {
	font-family: 'Sawarabi Mincho', sans-serif;
	position: absolute; 
    left: 27%;
    top: 34%;
	color: white; 
}

.header-wrap2 .btn { 
	background: #402717; 
	padding: 14px; 
	border: 1px solid; 
	border-radius: 100vh; 
}

.header-wrap2 .btn:hover { 
	opacity: 0.9; 
	transition: background 1s; 
}

.header-wrap2 .btn a:hover { 
	text-decoration: none; 
	opacity: 0.8; 
	transition: background 1s; 
}


.navbar { z-index: 30; }

.navbar a, 
.header-wrap2 .btn a,
.service-container .btn a,
.event-contents2 .btn a,
.recruit-item .btn a,
.contact-container .btn a { font-family: 'Abril Fatface'; font-size: 22px;  transition: 1.0s ;}

.navbar a:hover,
.header-wrapper .navbar a:hover, 
.footer .navbar a:hover { opacity: 0.8; transition: transform .4s; }

.navbar-nav a {
	position: relative; 
	display: inline-block; 
	text-decoration: none; 
}

.navbar-nav a::after {
	position: absolute; 
	bottom: -4px; 
	left: 0; 
	content: ''; 
	width: 100%; 
	height: 1px; 
	background: #fff; 
	transform: scale(0, 1);
	transform-origin: center top; 
	transition: transform .4s; 
}

.navbar-nav a:hover::after {
  transform: scale(1, 1);
}

.navbar-brand {
	color: #fff; 
	font-size: 40px !important; 
}
.navbar-inner { background-color: transparent; }
.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/*NEWS*/

.news-container { 
	padding-top: 5%; 
	margin: 0 auto 20px auto; 
	display: flex;
	justify-content: center; 
}

.news-item { 
	display: flex; 
	flex-wrap: wrap; 
	padding-bottom: 20px; 
}

.sub-title p,
.news-container a,
.datetime, 
.category { 
	font-family: 'Sawarabi Mincho', sans-serif;
}

.news-container a { 
	display: inline-block; 
	text-decoration: none; 
	font-size: 18px; 
	color: #402717 !important; 
}
.news-container a:hover {
	opacity: 0.8; 
	text-decoration: underline; 
	color: #402717; 
	transition: 1s; 
}


.sub-title h2 { 
	color: #ab0f50;
	font-family: 'Abril Fatface';
	font-size: 42px;
}

.category { 
	background-color: #f6efdb; 
	border: 1px transparent solid; 
	border-radius: 5px; 
	color: #402717 !important; 
}

/*SERVICE*/

.service-container .btn,
.event-contents2 .btn,
.recruit-item .btn,
.contact-container .btn { 
	text-align: center; 
	background: #402717; 
	padding: 14px 80px; 
	border-radius: 100vh; 
	transition: background 1s; 
	box-shadow: -1px 4px 7px 2px #6c757dad; 
}

.service-container .btn a,
.event-contents2 .btn a,
.recruit-item .btn a,
.contact-container .btn a {
	color: #fff; 
	text-decoration: none; 
}

.service-container .btn:hover,
.event-contents2 .btn:hover,
.recruit-item .btn:hover,
.contact-container .btn:hover {
	opacity: 0.8; 
	background: #402717; 
	transition: background 1s; 
}

.card-title, 
.card-text { 
	font-family: 'Sawarabi Mincho', sans-serif;
	font-weight: 450; 
}

/*EVENTS*/
.event-container {
	position: relative;
	display: flex; 
	flex-wrap: wrap; 
	align-items: center;
    padding: 30px 20px 60px 40px;
}

.event-contents1 {
	width: 59%; 
}

.event-contents2 {
	padding-left: 10%; 
}


	

/*Swiper*/

.carousel-item .img-fluid {
  width:100%;
  height:auto;
}

.carousel-item{
  height: auto;
}

.carousel-item a {
  display: block;
  width:100%;
}

.carousel-item .show-image {
  display: block;
  width:100%;
}

/*::after*/

.event-container::after {
	content:""; 
	position: absolute; 
	top: -2%; 
	right: 0; 
	z-index: -1; 
	display: block; 
	background-color: #f6efdb; 
	width: 60%; 
	height: 100%; 
	transform: translateY(-50); 

}

/*CONCEPT*/

.concept {
	position: relative; 
	margin-top: 10%; 
}

.concept-container {
	padding-top: 15%; 
	margin: 0 auto; 
}

.concept-content {
	background-attachment: fixed; 
	background-color: #f6efdb; 
	opacity: .9; 
	border: 1px rgba(255,255,255,0) solid; 
	border-radius: 5px; 
	width: 80vw; 
	height: auto; 
	margin: 0 auto; 
	padding: 2%; 
	text-align: center; 
}

.concept-text p,
.event-text p,
.recruit-text p,
.contact-text p {
	letter-spacing: .1em; 
	padding-top: 3%; 
	font-size: 1.1rem; 
	font-family: 'Sawarabi Mincho', sans-serif;
	font-weight: 460; 
}

.concept-text space {
	background: linear-gradient(transparent 60%, #ffddbc 0%);
}

.fixed-background {
	min-height: 90vh; 
	background-attachment: fixed; 
	background-size: cover; 
	background-position: center; 
}

.background-1 {
	background-image: url('../img/concept.jpeg');
}

/*RECRUIT*/

.recruit-wrapper {
	margin: 12% 5% 5% 5%; 
}


.recruit-content {
	background-color: #f6efdb; 
	max-width: 1100px; 
	max-height: 340px; 
}

.recruit-img img {
	object-fit: cover; 
	min-width: 45vw;
	width: 100%; 
	max-height: 340px; 
}

.recruit-text p {
	word-wrap: break-word; 
	font-size: 0.985rem !important; 
}

/*CONTACT*/

.contact {
	background-color: #f6efdb; 
	margin-top: 13%; 
	padding: 5% 0; 
	max-height: 52vh; 
}

/*FOOTER*/
.footer {
	min-height: 36vh; 
	background-color: #402717; 
}

.footer-container {
	min-height: 35vh; 
	max-width: 1180px; 
}

.footer nav li {
	padding: 0 3%; 
	list-style: none; 
}

.footer nav li a {
	text-decoration: none; 
}



.f-copy {
	padding-top: 10%;
	padding-bottom: 0; 
	margin-bottom: 0; 
	text-align: center; 
}

.copy p { color: #d6c299; }
.my-icon {
	color: #d6c299;
	font-size: 2.1em; 
}
.fa-twitter:hover,
.fa-instagram:hover,
.fa-facebook:hover {
	color: #f6efdb; 
	opacity: 0.8; 
	transition: 1.0s ;
}
   


@media(max-width: 1100px) {
	
	/*global btn*/
	
	.service-container .btn,
	.event-contents2 .btn,
	.recruit-item .btn,
	.contact-container .btn { 
		padding: 12px 60px; 
		border-radius: 100vh; 
	}
	/*global letter*/
	.concept-text p, .event-text p, .recruit-text p, .contact-text p {
		font-size: 1rem;
		font-weight: 400;
	}
	
	.news-container a {
		font-size: 1rem;
	}
	/*Header*/
	.navbar-inner { background-color: #402717; }
	.navbar a:hover { opacity: 1; transition: transform .3s; }
	.navbar .navbar-brand a:hover { opacity: 0.8; transition: transform .4s !important; }
	header .navbar { position: fixed; width: 100%; height: auto; }
	
	#home .navbar {
		top: 0;
		opacity: 0; 
		animation-duration: 3s; 
		animation-name: fadeIn; 
		animation-fill-mode: forwards;
	}
	
	#home h2 {
		font-size: 32px; 
		font-weight: 400; 
	}

	.header-wrap2 {
		 left: 2%;
		top: 32%;
	}
	
	.header-wrap2 .btn a  { font-size: 18px; }
	
	/*NEWS*/
	
	.news-container { 
		flex-direction: column; 
		flex-wrap: wrap;
		margin-bottom: 10px; 
	}
	
	.sub-title h2 { font-size: 35px; }
	.sub-title h2, .sub-title p { 
		text-align: center; 
		margin: 0 auto; 
}

	/*EVENTS*/
	
	.event-container {
		padding: 60px 20px;
		flex-direction: column; 
	}

	.event-contents1 {
		width: 100%; 
		text-align: center; 
	}
	
	.event-contents2 {
		padding-left: 0; 
	}
	
	.event-container::after {
		top: auto;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 68%;
		transform: translateY(0);
	}
	
	/*CONCEPT*/
	
	.fixed-background {
		min-height: 90vh; 
		background-attachment: scroll; 
		background-size: cover; 
		background-position: center; 
	}

.background-1 {
	background-image: url('../img/concept.jpeg');
}

	
	.concept-container {
		padding-top: 25%; 
	}
	
	.concept-text p {
		padding: 5% 2% 0 2%; 
	}
	
	/*RECRUIT*/
	.recruit-img img {
		object-position: top center; 
		width: 100%;
		height: 100%; 
		max-height: 24vh; 
	}
	
	.recruit-wrapper {
		margin: 20% 0 10% 0; 
	}
	
	/*CONTACT*/

	.contact {
		background-color: #f6efdb; 
		margin-top: 16%; 
		padding: 10% 3%; 
		min-height: 40vh;  
	}
	
	.contact-text {
		padding: 2% 3%; 
	}
	
	/*FOOTER*/
	
	.footer nav li {
		padding: 3% 0% !important; 

	}
	
	.footer nav {
		position: relative;
		top: 0%;
		left: -1%;
	}
	
	
	.f-copy {
		padding-top: 5%; 
	}
	.my-icon {
		color: #d6c299;
		font-size: 2em; 
	}

}

/*iphone 5s etc---------------*/
@media (max-width: 786px) {
	
	.concept-text p, .event-text p, .recruit-text p, .contact-text p {
		font-size: 0.859rem;
		font-weight: 400;
	}

	.fixed-background {
		min-height: 70vh; 
		background-attachment: scroll; 
		background-size: cover; 
		background-position: center; 
	}
	
	.concept-container {
		padding-top: 12%; 
	}
	
	.footer nav {
		position: relative; 
		top: 0%; 
		left: -18%; 
	}
	
	/*---repair--*/
	.navbar {
		background: background: rgb(62,39,23);
		padding: .5rem 1rem 1rem;
	}
	#home h2 {
		font-size: 28px; 
	}
	.news-container {
		flex-direction: column; 
	}
	.event-contents1 {
		width: auto; 
	}
	.event-container::after {
		width: 100%; 
	}
	.event-container { padding: 29px; }
	.event-contents2 { padding: 0; }
}

/*iPad iPadPro-----------------------------------*/
@media(min-height: 1022px) and (max-height: 1368px) {
	
	#home {
		min-height: 48vh;
	}

	.concept-text p, .event-text p, .recruit-text p, .contact-text p {
		font-size: 1.1rem;
		font-weight: 400;
	}

	.fixed-background {
		min-height: 48vh; 
		background-attachment: scroll; 
		background-size: cover; 
		background-position: center; 
	}
	
	.concept-container {
		padding-top: 12%; 
	}
	
	.contact {
		background-color: #f6efdb;
		margin-top: 16%;
		padding: 8% 3%;
		min-height: 30vh;
	}
	
	.recruit-img img {
		object-position: top center;
		width: 100%;
		height: 100%;
		max-height: 24vh;
	}
	
	.footer nav {
		position: relative; 
		top: 0%; 
		left: -1%; 
	}
}

/*Surface Duo-------------------------------------------*/
@media(min-width: 500px) and (max-device-width: 540px) {
	.footer nav {
		position: relative; 
		top: 0%; 
		left: -5%; 
	}
}

@keyframes fadeIn {
  0% {
	  opacity: 0; 
	  transform: translateY(-30px);
  }
  100% {
	  opacity: 1; 
	  transform: translateY(0px); 
  }
}
}