/* ----------
	common
---------- */
body {
	background: #fafafa;
	font-family: "ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",sans-serif;
}
@media (min-width: 768px) {
	body {
		min-width: 1400px;
	}
}
.container {
	overflow-x: hidden;
	width: 100%;
}

.b {
	font-weight: bold;
}
.big {
	font-size: 1.25em;
}
.small {
	font-size: .8em;
}
mark {
	background: linear-gradient(transparent 70%, yellow 70%);
}


/* ----------
	header
---------- */

#site-header {
	background: #bdd354;
	display: flex;
	justify-content: space-between;
	padding: 20px;
	width: 100%;
}
@media (max-width: 767px) {
	#site-header {
		align-items: center;
		filter: drop-shadow(0 3px 3px rgba(0,0,0,.2));
		left: 0;
		padding: 8px 12px;
		position: fixed;
		top: 0;
		z-index: 999;
	}
}

#site-header .brand img {
	width: 230px;

}
@media (max-width: 767px) {
	#site-header .brand img {
		width: 160px;
	}
}

#site-header #nav-switch,
#site-header #nav-close {
	display: none;
}
@media (max-width: 767px) {
	#site-header #nav-switch {
		color: #fafafa;
		display: block;
		font-size: 24px;
		transition: .3s;
	}
	#site-header nav {
		background: #bdd354;
		bottom: 0;
		filter: opacity(.9);
		min-height: 100vh;
		padding: 40px 20px;
		position: fixed;
		right: 0;
		top: 0;
		transform: translateX(100%);
		transition: .5s;
		width: 50%;
		z-index: 1000;
	}
	#site-header #nav-close {
		color: #fff;
		display: block;
		font-size: 24px;
		position: absolute;
		right: 12px;
		top: 8px;
	}

	/* open */
	#site-header #nav-switch.open {
		filter: opacity(0);
	}
	#site-header nav.open {
		transform: translateX(0);
	}
}

#site-header ul {
	display: flex;
	height: 100%;
	margin: 0;
	list-style: none;
	font-size: 24px;
}
@media (max-width: 767px) {
	#site-header ul {
		align-content: flex-start;
		flex-wrap: wrap;
	}
	#site-header li {
		width: 100%;
	}
}

#site-header li a {
	align-items: center;
	color: #fff;
	display: flex;
	justify-content: center;
	height: 100%;
	padding-right: 40px;
	text-decoration: none;
	transition: .4s;
}
@media (max-width: 767px) {
	#site-header li a {
		color: #fff;
		justify-content: flex-start;
		margin: 0 0 20px;
		padding: 0 20px;
	}
}

#site-header li a:hover {
	color: #5f9740;
}
#site-header .contact a {
	color: #fff;
	cursor: pointer;
}
@media (max-width: 767px) {
	#site-header .contact a {
		color: #fff;
		margin-left: 0;
	}
}

#site-header .contact a:hover {
	color: #5f9740;
}


/* ----------
	footer
---------- */
#site-footer {
	padding: 30px;
	text-align: center;
	width: 100%;
	background: #bdd354;
	color: #fff;
}


/* ----------
	index
---------- */

/* common */
.index section {
	padding: 80px 0;
}

.index .tit {
	text-align: center;
	line-height: 120px;
}

.index .area {
	margin-top: 50px;
}

.index h2 {
	font-size: 36px;
	margin: 20px 0 0;
	font-family: 'Stick', sans-serif;
}
@media (max-width: 767px) {
	.index h2 {
		font-size: 7vw;
	}
}

/* /改行 */
.index .br_pc {
	display: block;
}
.index .br_sp {
	display: none;
}
@media (max-width: 767px) {
	.index .br_sp {
		display: block;
	}
	.index .br_pc {
		display: none;
	}
}

.index .body {
	padding: 0 200px;
	max-width: 1400px;
  transition: .7s ease-in-out ;
}
@media (max-width: 767px) {
	.index .body {
		padding: 0;
	}
}

.index .txt p {
	line-height: 200%;
}

.index .fadeup {
	animation-name:fadeUpAnime;
	animation-duration:2.0s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
.fadeup_trigger {
    opacity: 0;
}


/* /key visual */
.index .kv {
	height: 700px;
	position: relative;
	overflow: hidden;
}

.index .kv .sp { 
	display: none !important; 
}
@media (max-width: 767px)  {
	.index .kv .pc {
		display: none !important;
	}
	.index .kv .sp { 
		display: block !important; 
	}
}

.index .fadein {
    font-size: 30px;
    font-weight: bold;
    animation-name: fadein;
    animation-duration: 4s;
}
@keyframes fadein {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
@media (max-width: 767px) {
	.index .kv {
		height: 100vw;
	}
}

.index .kv .tit {
	color: #fff;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 10;
}
@media (max-width: 767px) {
	.index .kv .tit {
		top: 55%;
		width: 100%;
	}
}

.index .kv h1 {
	font-family: 'Stick', sans-serif;
	font-size: 80px;
	font-weight: normal;
}
@media (max-width: 767px) {
	.index .kv h1 {
		font-size: 12vw;
		line-height: normal;
	}
}

@media (max-width: 767px) {
	.index .kv .img {
		height: 100%;
		width: 100%;
	}
}

.index .kv img {
	height: auto;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
}
@media (max-width: 767px) {
	.index .kv img {
		height: 120%;
	}
}


/* section-1 */
.index #section-1 .txt {
	text-align: center;
}

.index #section-1 .body {
	margin: 40px auto 0;
}

.index #section-1 .tit {
	line-height: normal;
	font-family: 'Stick', sans-serif;
}

.index #section-1 .flex_box {
  display: flex;
  padding: 20px 0;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
	.index #section-1 .flow {
		width: 100%;
		margin: 0 auto;
	}
}

.index #section-1 .flow {
  margin: 0 57px;
  color: #bdd354;
  text-align: center;
}
@media (max-width: 767px) {
	.index #section-1 {
		margin-top: -40px;
	}
	.index #section-1 .flow {
		margin-bottom: 20px;
	}
	.index #section-1 .img img {
		width: 80%;
	}
}


/* section-2 */
.index #section-2 {
	background-color: #0d1b06;
	color: #fafafa;
	position: relative;
}

.index #section-2 .box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	position: static;
}
@media (max-width: 767px) {
	.index #section-2 .box {
		padding: 60px 20px 20px 20px;
	}
}

.index #section-2 .img {
	width: 50%;
}
.index #section-2 .img img {
	width: 75%;
}
@media (max-width: 767px) {
	.index #section-2 .img {
		margin: 0 auto;
	}
	.index #section-2 .img img {
		width: 100%;
	}
}

.index #section-2 .txt_btn {
	width: 50%;
	text-align: center;
}
@media (max-width: 767px) {
	.index #section-2 .txt_btn {
		width: 100%;
	}
}

.index #section-2 .title_s {
	margin-bottom: 10px;
}
.index #section-2 .title_s h2 {
	margin-bottom: 30px;
}

.index #section-2 .txt_s {
	margin-bottom: 50px;
}
.index #section-2 .txt_s p {
	margin-bottom: 50px;
	line-height: 250%;
}

#section-2 .btn a {
	background: #5f9740;
	border-radius: 20px;
	color: #fff;
	font-size: 18px;
	padding: 15px 50px;
	text-decoration: none;
	transition: .3s;
	font-weight: bold;
}

#section-2 .btn a:hover {
	filter: brightness(0.8);
}
@media (max-width: 767px) {
	#section-2 .btn a {
		padding: 15px 50px;
		margin-top: 30px;
	}
}

.index #section-2 .eng {
	font-family: 'Sacramento', cursive;
	font-size: 165px;
	color: #bdd354;
	opacity: 0.2;
	position: absolute;
	top: 0; 
	right: 50px;
}
@media (max-width: 767px) {
	.index #section-2 .eng {
		font-size: 70px;
		position: absolute;
		top: 50px; 
		left: 10px;
	}
}



/* section-3 */
.index #section-3 {
	background-color: #fafafa;
	position: relative;
}

.index #section-3 .box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
@media (max-width: 767px) {
	.index #section-3 .box {
		padding: 60px 20px 20px 20px;
	}
}

.index #section-3 .img {
	width: 50%;
	order: 1;
}
.index #section-3 .img img {
	width: 100%;
}
.index #section-3 .img a {
	transition: .3s;
}
.index #section-3 .img a:hover {
	filter: brightness(0.8);
}
@media (max-width: 767px) {
	.index #section-3 .img {
		width: 100%;
		order: 1;
	}
}

.index #section-3 .txt_btn {
	width: 50%;
	text-align: center;
}
@media (max-width: 767px) {
	.index #section-3 .txt_btn {
		width: 100%;
		order: 2;
	}
}

.index #section-3 .title_s {
	margin-bottom: 10px;
}
.index #section-3 .title_s h2 {
	margin-bottom: 30px;
}

.index #section-3 .txt_s p {
	margin-bottom: 50px;
}

#section-3 .btn a {
	background: #5f9740;
	border-radius: 20px;
	color: #fff;
	font-size: 18px;
	padding: 15px 50px;
	text-decoration: none;
	transition: .3s;
	font-weight: bold;
}

#section-3 .btn a:hover {
	filter: brightness(0.8);
}
@media (max-width: 767px) {
	#section-3 .btn a {
		padding: 15px 50px;
		margin-top: 30px;
	}
}

.index #section-3 .eng {
	font-family: 'Sacramento', cursive;
	font-size: 165px;
	color: #bdd354;
	opacity: 0.2;
	position: absolute;
	top: 40px; 
	left: 50px;
}
@media (max-width: 767px) {
	.index #section-3 .eng {
		font-size: 70px;
		position: absolute;
		top: 50px; 
		left: 10px;
	}
}




/* section-4 */
.index #section-4 {
	background-color: #0d1b06;
	color: #fafafa;
	position: relative;
}

.index #section-4 .box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
@media (max-width: 767px) {
	.index #section-4 .box {
		padding: 80px 20px 20px 20px;
	}
}

.index #section-4 .img {
	width: 50%;
}
.index #section-4 .img img {
	width: 75%;
}
@media (max-width: 767px) {
	.index #section-4 .img {
		margin: 0 auto;
	}
	.index #section-4 .img img {
		width: 100%;
	}
}

.index #section-4 .txt_btn {
	width: 50%;
	text-align: center;
}
@media (max-width: 767px) {
	.index #section-4 .txt_btn {
		width: 100%;
	}
}

.index #section-4 .title_s {
	margin-bottom: 10px;
}
.index #section-4 .title_s h2 {
	margin-bottom: 30px;
}

.index #section-4 .txt_s {
	margin-bottom: 50px;
}
.index #section-4 .txt_s p {
	margin-bottom: 50px;
	line-height: 250%;
}

.index #section-4 .eng {
	font-family: 'Sacramento', cursive;
	font-size: 165px;
	color: #bdd354;
	opacity: 0.2;
	position: absolute;
	top: 0; 
	right: 50px;
}
@media (max-width: 767px) {
	.index #section-4 .eng {
		font-size: 70px;
		position: absolute;
		top: 50px; 
		left: 10px;
	}
}



/* contact */
#contact {
	background: #faf1df;
	position: relative;
}

#contact .en {
	color: #eee;
}

#contact .tit {
	color: #0d1b06;
	position: relative;
	z-index: 2;
}

#contact .body {
	margin: 64px auto 0;
	position: relative;
	text-align: center;
	z-index: 2;
}

#contact .tit {
	line-height: normal;
}
#contact .group {
	align-items: center;
	display: flex;
	padding: 16px 0;
}

#contact ::placeholder {
  color: #7cb2d0;
}
@media (max-width: 767px) {
	#contact .group {
		flex-wrap: wrap;	
	}
}

#contact .button {
	background: none;
	border: none;
	display: block;
	margin-top: 50px;
	width: 100%;
	text-align: center;
}
@media (max-width: 767px) {
	#contact .button {
		width: 100%;
	}
}

#contact .button a {
	background: #5f9740;
	border-radius: 20px;
	color: #fff;
	font-size: 18px;
	padding: 15px 60px;
	text-decoration: none;
	transition: .3s;
	font-weight: bold;
}
@media (max-width: 767px) {
	#contact .button a {
		margin: 40px auto 0;
		width: 100%;
		padding: 15px 20px;
	}
}

#contact .button a:hover {
	filter: brightness(0.8);
}