@charset "utf-8";

/*-------------------------------------------------------------------------------------------------------------------------------
* top
------------------------------------------------------------------------------------------------------------------------------- */
.fadein {
	opacity : 0;
	transform : translate(0, 20px);
	transition : all 1.0s ease 0.2s;
}
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}


/* mv
===================================================================== */
.mv{
	position: relative;
	height: 750px;
	overflow: hidden;
}
.mv .mv_txt{
	position: absolute;
	z-index: 100;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-family: 'Noto Serif JP', serif;
	font-size: 36px;
	line-height: 1.9;
	letter-spacing: 0.2em;
	color: #FFF;
	white-space: nowrap;
	padding: 0 0 100px;
}
@media (max-width: 767px) {
	.mv{
		height: auto;
	}
	.mv .mv_txt{
		font-size: 5rem;
		line-height: 1.6;
		letter-spacing: 0.2em;
		padding: 0 0 5rem;
	}
	.mv .mv_txt span{
		padding-left: 1em;
	}
}

/* mv_slider */
.mv .mv_slider{
	position: relative;
	height: 750px;
}
.mv .mv_slider li{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 750px;
	background-size: cover;
	background-position: center center;
	opacity: 0;
}
.mv .mv_slider li img{
	display: none;
}
.mv .mv_slider.start li{
	animation: slideshow 20s linear infinite;
}
.mv .mv_slider li.mv01{
	background-image: url("../img/top/mv01.jpg");
}
.mv .mv_slider li.mv02{
	background-image: url("../img/top/mv02.jpg");
	animation-delay: 5s;
}
.mv .mv_slider li.mv03{
	background-image: url("../img/top/mv03.jpg");
	animation-delay: 10s;
}
.mv .mv_slider li.mv04{
	background-image: url("../img/top/mv04.jpg");
	animation-delay: 15s;
}
@media screen and (max-width:767px) {
	.mv .mv_slider{
		height: 97.6rem;
	}
	.mv .mv_slider li{
		height: auto;
		background-image: none !important;
	}
	.mv .mv_slider li img{
		display: block !important;
	}
}

@keyframes slideshow{
	0%{
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	25% {
		opacity: 1;
	}
	30% {
		opacity: 0;
	}
	100% { 
		opacity: 0; 
	}
}


/* lead
===================================================================== */
.lead{
	height: 510px;
	background-image: url("../img/top/lead_bg.jpg");
	background-repeat: no-repeat;
	background-position: center top;
}
.lead p{
	padding: 150px 0 0;
	text-align: center;
	font-family: 'Noto Serif JP', serif;
	font-size: 30px;
	line-height: 2.16;
	letter-spacing: 0.1em;
}
@media (max-width: 767px) {
	.lead{
		height: 97rem;
		background-image: url("../img/top/lead_bg_sp.jpg");
		background-size: 100%;
	}
	.lead p{
		padding: 10rem 0 0;
		font-size: 4rem;
		line-height: 2;
	}
}


/* ggl
===================================================================== */
.ggl{
	width: 980px;
	margin: 0 auto;
	padding: 50px 130px 60px;
	background-color: #ecefe4;
}
.ggl h2{
	text-align: center;
	font-size: 22px;
	letter-spacing: 0.1em;
	color: #5a8232;
	border-bottom: 1px solid #5a8232;
	padding: 0 0 20px;
	margin: 0 0 30px;
}
@media (max-width: 767px) {
	.ggl{
		width: calc(100% - 40px);
		padding: 30px 25px;
	}
	.ggl h2{
		font-size: 3.8rem;
		line-height: 1.2;
		padding: 0 0 15px;
		margin: 0 0 25px;
	}
}

.ggl dl{
	display: flex;
	align-items: center;
}
.ggl dl dt{
	width: 250px;
}
.ggl dl dt img{
	width: 100%;
}
.ggl dl dd{
	flex: 1;
	padding: 0 0 0 35px;
	line-height: 2.25;
}
@media (max-width: 767px) {
	.ggl dl{
		display: block;
	}
	.ggl dl dt{
		width: 80%;
		margin: 0 auto;
	}
	.ggl dl dd{
		padding: 20px 0 0;
		line-height: 1.64;
	}
}


/* news
===================================================================== */
.news{
	width: 980px;
	margin: 150px auto 100px;
}
.news h2{
	text-align: center;
	font-size: 26px;
	letter-spacing: 0.18em;
	margin: 0 0 30px;
}
@media (max-width: 767px) {
	.news{
		width: 100%;
		padding: 0 20px;
		margin: 70px auto 70px;
	}
	.news h2{
		font-size: 20px;
		margin: 0 0 20px;
	}
}

/* news_list */
.news .news_list ul{
	border-top: 1px dotted #989898;
}
.news .news_list ul li{
	border-bottom: 1px dotted #989898;
	padding: 30px 0;
}
.news .news_list ul li dl{
	display: flex;
	font-size: 15px;
	line-height: 1.65;
}
.news .news_list ul li dl dt{
	font-weight: bold;
}
.news .news_list ul li dl dd{
	flex: 1;
	padding: 0 0 0 30px;
}
.news .news_list ul li dl dd a:hover{
	opacity: 0.6;
}
.news .news_list ul li dl dd .new{
	display: inline-block;
	background-color: #e60012;
	margin: 0 0 0 10px;
	padding: 5px 10px;
	font-size: 10px;
	line-height: 1;
	color: #FFF;
}
@media (max-width: 767px) {
	.news .news_list ul li{
		padding: 15px 0;
	}
	.news .news_list ul li dl{
		display: block;
		font-size: 13px;
	}
	.news .news_list ul li dl dd{
		padding: 5px 0 0;
	}
	.news .news_list ul li dl dd .new{
		display: block;
		width: 40px;
		text-align: center;
		margin: 5px 0 0 0;
		padding: 5px 0;
	}
}

/* more */
.news .news_list .more{
	position: relative;
	margin: 20px 0 0;
	text-align: right;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0.1em;
	padding: 0 20px 0 0;
	cursor: pointer;
}
.news .news_list .more::after{
	content: "";
	position: absolute;
	top: calc(50% - 7px);
	right: 2px;
	width: 8px;
	height: 8px;
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
	transform: rotate(45deg);
}
.news .news_list .more.active::after{
	top: calc(50% - 3px);
	right: 0;
	width: 8px;
	height: 8px;
	border-right: none;
	border-bottom: none;
	border-left: 1px solid #333;
	border-top: 1px solid #333;
	transform: rotate(45deg);
}
@media (max-width: 767px) {
	.news .news_list .more{
		margin: 15px 0 0;
		font-size: 12px;
	}
}

/* past */
.news .news_list .past{
	display: none;
	border-top: none;
}


/* top_menu
===================================================================== */
.top_menu{
	padding: 0 40px;
}
@media (max-width: 767px) {
	.top_menu{
		padding: 0;
	}
}

/* bg */
.top_menu_box .bg{
	position: relative;
	z-index: -1;
}
.top_menu_box .bg img{
	width: 100%;
}
@media (max-width: 767px) {
	.top_menu_box .bg img{
		display: none;
	}
}

/* image */
.top_menu_box .image{
	position: absolute;
	z-index: 100;
	top: 0;
	right: 0;
	width: 50%;
}
.top_menu_box .image img{
	width: 100%;
}
@media (max-width: 767px) {
	.top_menu_box .image{
		position: relative;
		width: 100%;
		padding: 0 20px;
	}
}

/* txt_en */
.top_menu_box .txt_en{
	position: absolute;
	z-index: 101;
	top: 18%;
	left: calc(50% - 490px);
	width: 980px;
	font-family: 'Cardo', serif;
	font-size: 65px;
	line-height: 0;
	font-weight: 400;
	letter-spacing: 0.1em;
	color: #5a8232;
	opacity: 0.3;
}
@media (max-width: 767px) {
	.top_menu_box .txt_en{
		top: -1rem;
		left: 4rem;
		width: auto;
		font-size: 7.4rem;
	}
}

/* txt */
.top_menu_box .txt{
	position: absolute;
	top: calc(50% - 70px);
	left: calc(50% - 490px);
	width: 980px;
}
@media (max-width: 767px) {
	.top_menu_box .txt{
		position: relative;
		top: 0;
		left: 0;
		width: auto;
	}
}

.top_menu_box .txt h3{
	position: relative;
	font-size: 33px;
	letter-spacing: 0.1em;
	padding: 0 0 2px;
}
.top_menu_box .txt h3::after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	height: 1px;
	width: 4.3em;
	background-color: #5a8232;
}
@media (max-width: 767px) {
	.top_menu_box .txt h3{
		font-size: 4.8rem;
		padding: 0 0 2px;
	}
}

.top_menu_box .txt ul{
	padding: 10px 0 0;
}
.top_menu_box .txt ul li{
	margin: 10px 0 0;
}
.top_menu_box .txt ul li a{
	position: relative;
	padding: 0 15px 0 0;
}
.top_menu_box .txt ul li a::after{
	content: "";
	position: absolute;
	top: calc(50% - 3px);
	right: 0;
	width: 6px;
	height: 6px;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	transform: rotate(45deg);
}
.top_menu_box .txt ul li a:hover{
	opacity: 0.6;
}
@media (max-width: 767px) {
	.top_menu_box .txt ul{
		display: flex;
		padding: 3rem 0 0;
	}
	.top_menu_box .txt ul li{
		margin: 0 4rem 0 0;
		font-size: 2.8rem;
	}
	.top_menu_box .txt ul li a{
		padding: 0 2.5rem 0 0;
	}
	.top_menu_box .txt ul li a::after{
		top: calc(50% - 0.6rem);
		right: 0;
		width: 1.2rem;
		height: 1.2rem;
		border-top: 0.1rem solid #333;
		border-right: 0.1rem solid #333;
	}
}

/* btn */
.top_menu_box .txt .btn {
	margin: 45px 0 0;
}
.top_menu_box .txt .btn a{
	display: block;
	position: relative;
	z-index: 2;	
	width: 260px;
	height: 50px;
	border: 2px solid #5a8232;
	font-size: 14px;
	letter-spacing: 0.1em;
	color: #5a8232;
	line-height: 50px;
	text-align: center;
	overflow: hidden;
	transition: all .3s;
}
.top_menu_box .txt .btn a span{
	display: block;
	width: 100%;
	height: 100%;
	background-image: url("../img/common/arrow03_r.png");
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-size: 44px;
}
.top_menu_box .txt .btn a:hover span{
	color: #FFF;
	background-image: url("../img/common/arrow01_r.png");
}
.top_menu_box .txt .btn a::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background-color: #5a8232;
	transition: all .3s;
}
.top_menu_box .txt .btn a:hover::after {
	top: 0;
	left: 0;
}
@media (max-width: 767px) {
	.top_menu_box .txt .btn {
		margin: 5rem 0 0;
	}
	.top_menu_box .txt .btn a{
		display: block;
		width: 35rem;
		height: 8rem;
		line-height: 8rem;
		font-size: 2.4rem;
		border: 1px solid #5a8232;
	}
	.top_menu_box .txt .btn a span{
		background-image: url("../img/common/arrow04_r.png");
		background-position: right 2rem center;
		background-size: 5rem;
	}
	.top_menu_box .txt .btn a:hover span{
		color: #FFF;
		background-image: url("../img/common/arrow02_r.png");
	}
}


/* top_menu01 */
@media (max-width: 767px) {
	.top_menu01.top_menu_box .bg{
		position: absolute;
		left: 0;
		bottom: 0;
		background-color: #ecefe4;
		width: 90%;
		height: 95%;
	}
	.top_menu01.top_menu_box .txt{
		padding: 0 0 6rem 4rem;
		margin-top: -3rem;
	}
}

/* top_menu02 */
.top_menu02{
	margin: 70px 0 0;
}
.top_menu02.top_menu_box .image{
	right: auto;
	left: 0;
}
.top_menu02.top_menu_box .txt_en{
	top: 19%;
	text-align: right;
}
.top_menu02.top_menu_box .txt{
	top: calc(50% - 50px);
	padding: 0 0 0 590px;
}
@media (max-width: 767px) {
	.top_menu02{
		margin: 20rem 0 0;
	}
	.top_menu02.top_menu_box .bg{
		position: absolute;
		right: 0;
		bottom: 0;
		background-color: #ecefe4;
		width: 90%;
		height: 100%;
	}
	.top_menu02.top_menu_box .image{
		padding: 4rem 20px 0;
	}
	.top_menu02.top_menu_box .txt_en{
		top: -9rem;
		text-align: left;
		line-height: 1.2;
	}
	.top_menu02.top_menu_box .txt{
		left: 0;
		padding: 5rem 0 6rem 20rem;
	}
}


/* inquiry
===================================================================== */
.inquiry{
	margin: 100px 0 0;
	position: relative;
	height: 400px;
	background-image: url("../img/top/inquiry_bg.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
@media (max-width: 767px) {
	.inquiry{
		margin: 50px 0 0;
		height: 200px;
	}
}

/* btn */
.inquiry .btn{
	position: absolute;
	z-index: 100;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 600px;
}
.inquiry .btn a{
	position: relative;
	display: block;
	border: 4px solid #FFF;
	text-align: center;
	font-size: 26px;
	line-height: 108px;
	height: 108px;
	color: #FFF;
	letter-spacing: 0.1em;
	overflow: hidden;
}
.inquiry .btn a:hover{
	color: #333;
}
.inquiry .btn a::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	transition: all .3s;
}
.inquiry .btn a:hover::after {
	top: 0;
	left: 0;
	background-color: #FFF;
}
@media (max-width: 767px) {
	.inquiry .btn{
		width: 300px;
	}
	.inquiry .btn a{
		border: 2px solid #FFF;
		font-size: 15px;
		line-height: 54px;
		height: 54px;
	}
}