@charset "utf-8";
/* CSS INFORMATION -====================================================
File name : top.css
Description : トップCSS
===================================================================== */

/* =====================================================================
*    #main
* =================================================================== */
.main {
	padding-top: 0;
}

/* .mainvisual
-------------------------------------*/
.mainvisual {
	width: 100%;
	height: 0;
	padding-top: 73.4375%;
	position: relative;
}

.mainvisual .mainvisual__slider {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}

.mainvisual .mainvisual__slider li {
	width: 170.9375%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -85.46875%;
	display: none;
}

.mainvisual .mainvisual__slider li.show {
	display: block;
	z-index: 10;
}

@media screen and (min-width:640px){
	.mainvisual {
		padding-top: 470px;
	}

	.mainvisual .mainvisual__slider li {
		width: 1094px;
		margin-left: -547px;
	}
}

@media screen and (min-width:700px){
	.mainvisual {
		padding-top: 42.96875%;
	}

	.mainvisual .mainvisual__slider li {
		width: 100%;
		margin-left: -50%;
	}
}

/* .news
-------------------------------------*/
.news {
	width: 100%;
	background-color: #009f6b;
	overflow: hidden;
}

.news .newsInner {
	width: 100%;
	max-width: 640px;
	position: relative;
	box-sizing: border-box;
	padding: 4.0625% 3.125%;
	margin: auto;
}

.news dl {
	overflow: hidden;
	margin-bottom: 3.3334%;
}

.news dl:first-child {
	box-sizing: border-box;
	padding-right: 23.3334%;
	margin-bottom: 0;
}

.news dl:not(:first-child) {
	display: none;
}

.news dl:nth-child(2) {
	margin-top: 10%;
}

.news dl dt,
.news dl dd,
.news dl dd a {
	color: #fff;
	font-size: 1.2rem;
	line-height: 1.4167em;
	font-weight: 200;
}

.news dl:not(:first-child) dt {
	float: left;
}

.news dl:not(:first-child) dd {
	box-sizing: border-box;
	padding-left: 21.6667%;
}

.news .btn_more,
.news .btn_close {
	width: 21.875%;
	background-color: #1aa97a;
	position: absolute;
	top: 0;
	right: 0;
}

.news .btn_more a,
.news .btn_close a {
	display: block;
	color: #fff;
	font-size: 1.0rem;
	line-height: 1.5em;
	text-align: center;
	text-decoration: none;
	position: relative;
	padding-top: 25%;
	padding-bottom: 39.2858%;
}

.news .btn_close a::after {
	content: "\e903";
	display: inline-block;
	color: #f2ad2e;
	font-size: 1.2rem;
	line-height: 1em;
	font-family: 'icon_webfonts' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 50% auto auto;
}

.news .btn_more a::after {
	content: "\e901";
	display: inline-block;
	color: #f2ad2e;
	font-size: 1.2rem;
	line-height: 1em;
	font-family: 'icon_webfonts' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
	transform: rotate(90deg);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 46.4286% auto auto;
}

.news .btn_close {
	display: none;
}

/* .new */
.news dl.new dt {
	position: relative;
	box-sizing: border-box;
	padding-left: 21.7392%;
}

.news dl.new dt::before {
	content: "NEW!";
	display: inline-block;
	background-color: #f2ad2e;
	font-size: 1.0rem;
	line-height: 1.7em;
	font-weight: 400;
	letter-spacing: 0.1em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	position: absolute;
	top: 0;
	left: 0;
}

/* .open */
.news.open .btn_close {
	display: block;
}

@media screen and (min-width:640px){
	.news .newsInner {
		padding: 26px 20px;
	}
}

@media screen and (min-width:700px){
	.news .newsInner {
		width: 100%;
		max-width: 1280px;
		padding: 1.875% 4.6875%;
	}

	.news dl {
		margin-bottom: 0;
	}

	.news dl:first-child {
		padding-right: 17.2414%;
	}

	.news dl:nth-child(2) {
		margin-top: 4.3104%;
	}

	.news dl dt,
	.news dl dd,
	.news dl dd a {
		font-size: 1.6rem;
		line-height: 2em;
	}

	.news dl dt {
		float: left;
	}

	.news dl:not(:first-child) dd {
		padding-left: 12.9311%;
	}

	.news dl:first-child dd {
		padding-left: 15.625%;
	}

	.news .btn_more,
	.news .btn_close {
		width: 17.1875%;
	}

	.news .btn_more a,
	.news .btn_close a {
		font-size: 2.0rem;
		line-height: 4em;
		box-sizing: border-box;
		padding-top: 0;
		padding-bottom: 0;
		transition: opacity 0.2s ease;
	}

	.news .btn_more a:hover,
	.news .btn_close a:hover {
		opacity: 0.6;
	}

	.news .btn_close a::after {
		font-size: 1.4rem;
		line-height: 1em;
		position: relative;
		margin:auto;
		padding-left: 0.5em;
	}

	.news .btn_more a::after {
		font-size: 1.6rem;
		line-height: 1em;
		vertical-align: middle;
		position: relative;
		margin: auto;
		padding-bottom: 0.5em;
	}

	/* .new */
	.news dl.new dt {
		padding-left: 8.8542%;
	}

	.news dl.new dd {
		padding-left: 17.7084%;
	}

	.news dl.new dt::before {
		font-size: 1.6rem;
		line-height: 1.625em;
		margin-top: 0.1875em;
	}
}

@media screen and (min-width:1280px){
	.news .newsInner {
		padding: 24px 60px;
	}
}

/* #bannerArea
-------------------------------------*/
#bannerArea {
	width: 92%;
	margin: 0 auto;
}

#bannerArea a {
	width: 100%;
	display: block;
	margin-top: 8%;
}

@media screen and (min-width:700px){
	#bannerArea {
	width: 78.125%;
	max-width: 1000px;
}

#bannerArea a {
	width: 100%;
	display: block;
	margin-top: 5%;
}
}

@media screen and (min-width:1280px){
}

/* #seminar
-------------------------------------*/
.seminar {
	margin-top: 7.8125%;
}

.seminar .sec__ttl {
	font-size: 1.7rem;
	line-height: 1.1765em;
	text-align: center;
	margin-bottom: 7.8125%;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.seminar.show .sec__ttl {
	opacity: 1;
}

.seminar .newSeminar {
	position: relative;
	background-color: #e5f5f0;
	margin-bottom: 31.25%;
	padding-top: 5.46875%;
	opacity: 0;
	transition: opacity 0.3s ease 0.5s;
}

.seminar.show .newSeminar {
	opacity: 1;
}

.seminar .newSeminar .ttl {
	width: 93.75%;
	max-width: 600px;
	font-size: 1.3rem;
	line-height: 1.23em;
	text-align: center;
	font-weight: 600;
	padding-bottom: 6.25%;
	margin: auto;
}

.seminar .newSeminar .detailWrap {
	background-color: #ccece1;
	padding-top: 4.6875%;
	padding-bottom: 4.6875%;
}

.seminar .newSeminar dl {
	width: 87.5%;
	max-width: 560px;
	font-size: 1.3rem;
	line-height: 1.3847em;
	overflow: hidden;
	margin: auto;
}

.seminar .newSeminar dl dt {
	float: left;
	margin-bottom: 1.7858%;
}

.seminar .newSeminar dl dd {
	box-sizing: border-box;
	padding-left: 21.4286%;
	margin-bottom: 1.7858%;
}

.seminar .btn_detail {
	width: 68.75%;
	max-width: 440px;
	position: absolute;
	left: 0;
	right: 0;
	margin: 6.25% auto auto;
}

.seminar .btn_detail a {
	width: 100%;
	height: 100%;
	display: block;
	color: #009f6b;
	font-size: 1.3rem;
	line-height: 3.3077em;
	font-weight: 500;
	text-decoration: none;
	text-align: center;
	position: relative;
	box-sizing: border-box;
	border: 1px solid #009f6b;
}

.seminar .btn_detail a::after {
	content: "\e901";
	display: inline-block;
	color: #f2ad2e;
	font-size: 1.1rem;
	line-height: 3.9091em;
	font-family: 'icon_webfonts' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
	transform-origin: center;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: 30%;
}

.seminar .otherBtnWrap {
	width: 87.5%;
	max-width: 560px;
	margin: auto;
}

.seminar .otherBtnWrap > div {
	position: relative;
	box-sizing: border-box;
	padding-left: 28.5715%;
	margin-bottom: 5.3572%;
	opacity: 0;
	transform: translateX(-20px);
}

.seminar .otherBtnWrap > div:nth-child(1) {
	transition: all 0.3s ease 1.0s;
}

.seminar .otherBtnWrap > div:nth-child(2) {
	transition: all 0.3s ease 1.4s;
}

.seminar.show .otherBtnWrap > div {
	opacity: 1;
	transform: translateX(0);
}

.seminar .otherBtnWrap > div::before {
	width: 23.5715%;
	display: inline-block;
	color: #fff;
	text-align: center;
	font-family: 'icon_webfonts' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
	transform-origin: center;
	background-color: #009f6b;
	border-radius: 5px;
	position: absolute;
	top: 0;
	left: 0;
	margin-top: 0.7143%;
}

.seminar .otherBtnWrap > div::after {
	content: "";
	width: 0;
	height: 0;
	border: 7px solid transparent;
	border-left-color: #009f6b;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 23.5715%;
	margin: auto;
}

.seminar .otherBtnWrap > div.btn_entry::before {
	content: "\e907";
	font-size: 4.6rem;
	line-height: 1.0653em;
}

.seminar .otherBtnWrap > div.btn_log::before {
	content: "\e908";
	font-size: 3.4rem;
	line-height: 1.4412em;
}

.seminar .otherBtnWrap a {
	display: block;
	color: #1b1b1b;
	font-size: 1.4rem;
	line-height: 3.7858em;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	position: relative;
	background-color: #eeeeee;
}

.seminar .otherBtnWrap a::before {
	content: "";
	width: 0;
	height: 0;
	border: 7px solid transparent;
	border-left-color: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

.seminar .otherBtnWrap a::after {
	content: "\e901";
	display: inline-block;
	color: #f2ad2e;
	font-size: 1.2rem;
	line-height: 4.4167em;
	font-family: 'icon_webfonts' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
	transform-origin: center;
	padding-left: 1.25em;
}

@media screen and (min-width:640px){
	.seminar {
		margin-top: 50px;
	}

	.seminar .sec__ttl {
		margin-bottom: 50px;
	}

	.seminar .newSeminar {
		margin-bottom: 200px;
		padding-top: 35px;
	}

	.seminar .newSeminar .ttl {
		padding-bottom: 40px;
	}

	.seminar .newSeminar .detailWrap {
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.seminar .btn_detail {
		margin-top: 40px;
	}

	.seminar .otherBtnWrap > div::after {
		border-width: 14px;
	}

	.seminar .otherBtnWrap a::before {
		border-width: 14px;
	}
}

@media screen and (min-width:700px){
	.seminar {
		margin-top: 3.90625%;
	}

	.seminar .sec__ttl {
		font-size: 3.0rem;
		line-height: 1.3334em;
		margin-top: 3.90625%;
	}

	.seminar .newSeminar {
		overflow: hidden;
		margin-bottom: 4.6875%;
		padding-top: 0;
	}

	.seminar .newSeminar::before {
		content: "";
		width: 50%;
		height: 100%;
		display: block;
		background-color: #ccece1;
		position: absolute;
		top: 0;
		left: 50%;
	}
	.seminar .newSeminarInner {
		width: 100%;
		max-width: 1280px;
		overflow: hidden;
		position: relative;
		margin: auto;
	}

	.seminar .newSeminar .ttl {
		width: 50%;
		font-size: 2.0rem;
		line-height: 1.4em;
		text-align: left;
		box-sizing: border-box;
		position: relative;
		float: left;
		padding-top: 1.5625%;
		padding-left: 4.6875%;
		padding-bottom: 7.8125%;
	}

	.seminar .newSeminar .detailWrap {
		width: 50%;
		float: right;
		padding-top: 1.5625%;
		padding-bottom: 1.5625%;
	}

	.seminar .newSeminar dl {
		width: 100%;
		max-width: 640px;
		font-size: 1.6rem;
		line-height: 1.625em;
		box-sizing: border-box;
		padding-left: 4.6875%;
		padding-right: 9.375%;
	}

	.seminar .newSeminar dl dt {
		margin-bottom: 1.8182%;
	}

	.seminar .newSeminar dl dd {
		padding-left: 14.5455%;
		margin-bottom: 1.8182%;
	}

	.seminar .btn_detail {
		width: 22.65625%;
		background-color: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
		right: auto;
		margin: auto auto 1.953125% 4.6875%;
	}

	.seminar .btn_detail a {
		font-size: 2.0rem;
		line-height: 2.9em;
		overflow: hidden;
		position: relative;
		z-index: 0;
		transition: color 0.3s ease;
	}

	.seminar .btn_detail a:hover {
		color: #fff;
	}

	.seminar .btn_detail a::before {
		content: "";
		width: 0;
		height: 120%;
		display: block;
		background-color: #009f6b;
		position: absolute;
		bottom: 0;
		left: -10%;
		transform: skewX(15deg);
		transition: width 0.3s ease;
		z-index: -1;
	}

	.seminar .btn_detail a:hover::before {
		content: "";
		width: 120%;
	}

	.seminar .btn_detail a::after {
		font-size: 1.6rem;
		line-height: 3.625em;
		transition: color 0.3s ease;
	}

	.seminar .btn_detail a:hover::after {
		color: #fff;
	}

	.seminar .otherBtnWrap {
		width: 90.625%;
		max-width: 1160px;
		text-align: center;
		letter-spacing: -.40em;
	}

	.seminar .otherBtnWrap > div {
		width: 45.6896%;
		display: inline-block;
		letter-spacing: normal;
		vertical-align: top;
		padding-left: 12.9311%;
		margin-bottom: 0;
	}

	.seminar .otherBtnWrap > div.btn_log {
		margin-left: 4.3104%;
	}

	.seminar .otherBtnWrap > div::before {
		width: 23.585%;
		margin-top: 0.7548%;
	}

	.seminar .otherBtnWrap > div::after {
		border: 13px solid transparent;
		border-left-color: #009f6b;
		left: 23.585%;
	}

	.seminar .otherBtnWrap > div.btn_entry::before {
		font-size: 8.6rem;
		line-height: 1.0698em;
	}

	.seminar .otherBtnWrap > div.btn_log::before {
		font-size: 6.2rem;
		line-height: 1.4839em;
	}

	.seminar .otherBtnWrap a {
		font-size: 2.0rem;
		line-height: 5em;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.seminar .otherBtnWrap a:hover {
		color: #fff;
		background-color: #f2ad2e;
	}

	.seminar .otherBtnWrap a::before {
		border: 22px solid transparent;
		border-left-color: #fff;
	}

	.seminar .otherBtnWrap a::after {
		font-size: 1.6rem;
		line-height: 6.25em;
		transition: color 0.2s ease;
	}

	.seminar .otherBtnWrap a:hover::after {
		color: #fff;
	}
}

@media screen and (min-width:1280px){
	.seminar {
		margin-top: 50px;
	}

	.seminar .sec__ttl {
		margin-top: 50px;
	}

	.seminar .newSeminar {
		padding-top: 0;
		margin-bottom: 60px;
	}

	.seminar .newSeminar .ttl {
		padding-top: 20px;
	}
}

/* #promotion
-------------------------------------*/
.promotion {
	margin-top: 12.5%;
}

.promotion .sec__ttl {
	font-size: 1.7rem;
	line-height: 1.1765em;
	text-align: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.promotion.show .sec__ttl {
	opacity: 1;
}

.promotion .promo {
	width: 87.5%;
	max-width: 560px;
	position: relative;
	margin: 31.25% auto auto;
}

.promotion .promo .img {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	margin-top: -27.5%;
	opacity: 0;
}

.promotion.show .promo .img {
	opacity: 1;
}

.promotion .promo .promoWrap {
	width: 87.5%;
	position: relative;
	z-index: 10;
	margin: auto;
	opacity: 0;
	transform: translateY(20px);
}

.promotion.show .promo .promoWrap {
	opacity: 1;
	transform: translateY(0);
}

.promotion .promo .promoInner {
	width: 100%;
	background-color: rgba(255, 255, 255, 0.9);
	position: relative;
	box-sizing: border-box;
	border: 1px solid #7d7d7d;
	padding: 14.6429% 8.0358% 8.0358%;
}

.promotion .promo.study .img {
	transition: all 0.3s ease 0.5s;
}

.promotion .promo.international .img {
	transition: all 0.3s ease 0.8s;
}

.promotion .promo.public .img {
	transition: all 0.3s ease 1.1s;
}

.promotion .promo.study .promoWrap {
	transition: all 0.3s ease 1.5s;
}

.promotion .promo.international .promoWrap {
	transition: all 0.3s ease 1.8s;
}

.promotion .promo.public .promoWrap {
	transition: all 0.3s ease 2.1s;
}

.promotion .promo .promoInner::before {
	content: "";
	width: 26.5307%;
	height: 0;
	padding-top: 2.0409%;
	display: block;
	background-color: #f2ad2e;
	position: absolute;
	top: 0;
	left: 0;
}

.promotion .promo .promoInner .ttl {
	font-size: 1.5rem;
	line-height: 1.3334em;
	font-weight: 500;
	text-align: center;
	margin-bottom: 17.1718%;
}

.promotion .promo .promoInner .text {
	width: 97%;
	font-size: 1.2rem;
	line-height: 2.0834em;
	margin: auto auto 18.1819%;
}

.promotion .promo .promoInner .btn_more {
	width: 100%;
}

.promotion .promo .promoInner .btn_more a {
	display: block;
	color: #fff;
	font-size: 1.5rem;
	line-height: 3em;
	font-weight: 500;
	text-decoration: none;
}

.promotion .promo .promoInner .btn_more a span {
	display: block;
	text-align: center;
	background-color: #f2ad2e;
	position: relative;
}

.promotion .promo .promoInner .btn_more a span::after {
	content: "\e901";
	display: inline-block;
	color: #fff;
	font-size: 1.1rem;
	line-height: 4.091em;
	font-family: 'icon_webfonts' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
	transform-origin: center;
	position: absolute;
	top: 0;
	right: 0;
	margin-right: 15%;
}

@media screen and (min-width:640px){
	.promotion {
		margin-top: 80px;
	}

	.promotion .promo {
		margin-top: 200px;
	}

	.promotion .promo .promoInner {
		border-width: 2px;
	}
}

@media screen and (min-width:700px){
	.promotion {
		margin-top: 7.03125%;
	}

	.promotion .sec__ttl {
		font-size: 3.0rem;
		line-height: 1.3334em;
	}

	.promotion .promotionInner {
		width: 100%;
		max-width: 1280px;
		display: flex;
    flex-wrap: wrap;
		margin: 12.5% auto auto;
	}

	.promotion .promo {
		width: 29.6875%;
		max-width: 380px;
		margin-top: 0;
		margin-bottom: 0;
	}

	.promotion .promo:not(:first-child) {
		margin-left: 3.125%;
	}

	.promotion .promo .img {
		margin-top: -27.6316%;
	}

	.promotion .promo .promoWrap {
		width: 86.8422%;
		height: 100%;
	}

	.promotion .promo .promoInner {
		height: 100%;
		border: 1px solid #7d7d7d;
		padding: 14.4737% 7.8948% 28.9474%;
		transition: transform 0.2s ease;
	}

	.promotion .promo .promoInner:hover {
		transform: scale(1.09);
		box-shadow: 0 1px 5px 0 rgba(44, 28, 21, 0.3);
	}

	.promotion .promo .promoInner::before {
		width: 27.4391%;
		padding-top: 1.8293%;
	}

	.promotion .promo .promoInner .ttl {
		font-size: 2.4rem;
		line-height: 1.25em;
		margin-bottom: 13.7196%;
	}

	.promotion .promo .promoInner .text {
		width: 79.2683%;
		font-size: 1.6rem;
		line-height: 2em;
		margin: auto;
	}

	.promotion .promo .promoInner .btn_more {
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.promotion .promo .promoInner .btn_more a {
		height: 100%;
		font-size: 2.0rem;
		line-height: 3em;
	}

	.promotion .promo .promoInner .btn_more a span {
		width: 82.3171%;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto auto 9.1464%;
	}

	.promotion .promo .promoInner .btn_more a span::after {
		font-size: 1.5rem;
		line-height: 4em;
		margin-right: 14.8149%;
	}
}

@media screen and (min-width:1280px){
	.promotion {
		margin-top: 90px;
	}

	.promotion .promotionInner {
		margin-top: 160px;
	}
}

/* #enviroment
-------------------------------------*/
.enviroment {
	margin-top: 12.5%;
}

.enviroment .sec__ttl {
	font-size: 1.7rem;
	line-height: 1.1765em;
	text-align: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.enviroment.show .sec__ttl {
	opacity: 1;
}

.enviroment .catch {
	width: 90.625%;
	max-width: 580px;
	font-size: 1.5rem;
	line-height: 1.3334em;
	text-align: center;
	margin: 5.46875% auto auto;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.enviroment.show .catch {
	opacity: 1;
}

.enviroment .bg_green {
	width: 100%;
	position: relative;
	padding-top: 29.6875%;
	margin-top: 33.59375%;
}

.enviroment .bg_green::before {
	content: "";
	width: 0;
	height: 0;
	padding-top: 45.3125%;
	display: block;
	background-color: #009f6b;
	position: absolute;
	top: 0;
	left: 0;
	transition: width 0.3s ease 0.5s;
}

.enviroment.show .bg_green::before {
	width: 100%;
}

.enviroment .bg_green .img {
	width: 93.75%;
	max-width: 600px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: -29.6875% auto auto;
	opacity: 0;
	left: -20px;
	transition: all 0.3s ease 0.9s;
}

.enviroment.show .bg_green .img {
	opacity: 1;
	left: 0;
}

.enviroment.show .bg_green .img {
}

.enviroment .bg_green .env__assist {
	width: 87.5%;
	max-width: 560px;
	background-color: #ccece1;
	position: relative;
	box-sizing: border-box;
	padding: 5.46875% 6.25% 13.28125%;
	margin: auto;
	opacity: 0;
	right: -20px;
	transition: opacity 0.3s ease 1.2s,
		right 0.3s ease 1.2s;
}

.enviroment.show .bg_green .env__assist {
	opacity: 1;
	right: 0;
}

.enviroment .bg_green .env__assist .ttl {
	font-size: 1.5rem;
	line-height: 1.3334em;
	font-weight: 500;
	text-align: center;
	margin-bottom: 8.3334%;
}

.enviroment .bg_green .env__assist .text {
	font-size: 1.2rem;
	line-height: 2.0834em;
}

.enviroment .bg_green .env__assist .btn_more {
	width: 71.4286%;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto auto -8.3334%;
}

.enviroment .bg_green .env__assist .btn_more a {
	display: block;
	color: #fff;
	font-size: 1.5rem;
	line-height: 3em;
	font-weight: 500;
	text-decoration: none;
}

.enviroment .bg_green .env__assist .btn_more a span {
	display: block;
	text-align: center;
	background-color: #f2ad2e;
	position: relative;
}

.enviroment .bg_green .env__assist .btn_more a span::after {
	content: "\e901";
	display: inline-block;
	color: #fff;
	font-size: 1.1rem;
	line-height: 4.091em;
	font-family: 'icon_webfonts' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
	transform-origin: center;
	position: absolute;
	top: 0;
	right: 0;
	margin-right: 15%;
}

@media screen and (min-width:640px){
	.enviroment {
		margin-top: 80px;
	}

	.enviroment .catch {
		margin-top: 35px;
	}

	.enviroment .bg_green {
		padding-top: 190px;
		margin-top: 215px;
	}
	.enviroment .bg_green::before {
		padding-top: 290px;
	}

	.enviroment .bg_green .img {
		margin-top: -190px;
	}

	.enviroment .bg_green .env__assist {
		padding: 35px 40px 85px;
	}
}

@media screen and (min-width:700px){
	.enviroment {
		margin-top: 7.03125%;
	}

	.enviroment .sec__ttl {
		font-size: 3.0rem;
		line-height: 1.3334em;
	}

	.enviroment .catch {
		width: 90.625%;
		max-width: 1160px;
		font-size: 2.4rem;
		line-height: 1.3334em;
		text-align: left;
		box-sizing: border-box;
		padding-left: 44.53125%;
		margin-top: 4.296875%;
	}

	.enviroment .bg_green {
		padding-top: 2.734375%;
		margin-top: 2.34375%;
	}

	.enviroment .bg_green::before {
		padding-top: 22.65625%;
	}

	.enviroment .bg_green .img {
		width: 46.875%;
		left: 48%;
		right: auto;
		margin: -7.03125% auto auto -50%;
	}

	.enviroment.show .bg_green .img {
		left: 50%;
	}

	.enviroment .bg_green .env__assist {
		width: 43.75%;
    left: 52%;
		padding: 3.515625% 2.34375% 10.546875% 3.75%;
		margin-left: 1.5625%;
		transition:
			opacity 0.3s ease 1.2s,
			left 0.3s ease 1.2s,
			transform 0.2s ease;
	}

	.enviroment.show .bg_green .env__assist {
		left: 50%;
	}

	.enviroment .bg_green .env__assist:hover {
		transform: scale(1.09);
		box-shadow: 0 1px 5px 0 rgba(44, 28, 21, 0.3);
	}
	.enviroment .bg_green .env__assist .ttl {
		font-size: 2.4rem;
		line-height: 1.25em;
		text-align: left;
		margin-bottom: 4.1494%;
	}

	.enviroment .bg_green .env__assist .text {
		font-size: 1.6rem;
		line-height: 2.em;
	}

	.enviroment .bg_green .env__assist .btn_more {
		width: 100%;
		height: 100%;
		margin: auto;	
	}

	.enviroment .bg_green .env__assist .btn_more a {
		height: 100%;
		font-size: 2.0rem;
		line-height: 3em;
	}

	.enviroment .bg_green .env__assist .btn_more a span {
		width: 48.2143%;
		position: absolute;
		bottom: 0;
		left: 0;
		margin: auto auto 8.0358% 8.5715%;
	}

	.enviroment .bg_green .env__assist .btn_more a span::after {
		font-size: 1.5rem;
		line-height: 4em;
		margin-right: 14.8149%;
	}


}

@media screen and (min-width:1280px){
	.enviroment {
		margin-top: 90px;
	}

	.enviroment .catch {
		padding-left: 570px;
		margin-top: 55px;
	}

	.enviroment .bg_green {
		padding-top: 35px;
		margin-top: 30px;
	}

	.enviroment .bg_green::before {
		padding-top: 290px;
	}

	.enviroment .bg_green .img {
		margin: -90px auto auto -640px;
	}

	.enviroment .bg_green .env__assist {
		padding: 45px 30px 135px 48px;
		margin-left: 20px;
	}
}

/* .otherBtn
-------------------------------------*/
.otherBtn {
	width: 93.75%;
	max-width: 600px;
	margin: 18.75% auto auto;
}

.otherBtn .btn_book,
.otherBtn .btn_access {
	box-sizing: border-box;
	border: 1px solid #1b1b1b;
	margin-top: 6.6667%;
}

.otherBtn .btn_book a,
.otherBtn .btn_access a {
	display: block;
	color: #1b1b1b;
	font-size: 1.8rem;
	line-height: 4.1667em;
	text-decoration: none;
	box-sizing: border-box;
	position: relative;
	padding-left: 28.3334%;
}

.otherBtn .btn_book a::after,
.otherBtn .btn_access a::after {
	content: "\e901";
	display: inline-block;
	color: #009f6b;
	font-size: 1.6rem;
	line-height: 4.6875em;
	font-family: 'icon_webfonts' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
	transform-origin: center;
	position: absolute;
	top: 0;
	right: 0;
	margin-right: 10%;
}

.otherBtn .btn_book a::before,
.otherBtn .btn_access a::before {
	display: inline-block;
	color: #1b1b1b;
	font-family: 'icon_webfonts' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
	transform-origin: center;
	position: absolute;
	top: 0;
	left: 0;
}

.otherBtn .btn_book a::before {
	content: "\e905";
	font-size: 4.7rem;
	line-height: 1.5958em;
	margin-left: 6%;
}

.otherBtn .btn_access a::before {
	content: "\e900";
	font-size: 4.5rem;
	line-height: 1.6667em;
	margin-left: 8%;
}

@media screen and (min-width:640px){
	.otherBtn {
		margin-top: 120px;
	}

	.otherBtn .btn_book,
	.otherBtn .btn_access {
		border-width: 2px;
	}
}

@media screen and (min-width:700px){
	.otherBtn {
		width: 78.125%;
		max-width: 1000px;
		letter-spacing: -.40em;
		text-align: center;
		margin: auto;
	}

	.otherBtn .btn_book,
	.otherBtn .btn_access {
		width: 40%;
		display: inline-block;
		vertical-align: top;
		letter-spacing: normal;
		position: relative;
		overflow: hidden;
		border: 1px solid #1b1b1b;
		margin: 10% 3% auto;
	}

	.otherBtn .btn_book::before,
	.otherBtn .btn_access::before {
		content: "";
		width: 0;
		height: 120%;
		display: block;
		background-color: #009f6b;
		position: absolute;
		bottom: 0;
		left: -10%;
		transform: skewX(15deg);
		transition: width 0.3s ease;
	}

	.otherBtn .btn_book:hover::before,
	.otherBtn .btn_access:hover::before {
		content: "";
		width: 120%;
	}


	.otherBtn .btn_book a,
	.otherBtn .btn_access a {
		font-size: 2.4rem;
		line-height: 4.0834em;
		text-align: left;
		padding-left: 27.6382%;
		transition: color 0.2s ease;
	}

	.otherBtn .btn_book:hover a,
	.otherBtn .btn_access:hover a {
		color: #fff;
	}

	.otherBtn .btn_book a::after,
	.otherBtn .btn_access a::after {
		font-size: 2.2rem;
		line-height: 4.4546em;
		margin-right: 10%;
		transition: color 0.2s ease;
	}

	.otherBtn .btn_book a:hover::after,
	.otherBtn .btn_access a:hover::after {
		color: #fff;
	}

	.otherBtn .btn_book a::before,
	.otherBtn .btn_access a::before {
		transition: color 0.2s ease;
	}

	.otherBtn .btn_book a:hover::before,
	.otherBtn .btn_access a:hover::before {
		color: #fff;
	}

	.otherBtn .btn_book a::before {
		font-size: 6.3rem;
		line-height: 1.5874em;
	}

	.otherBtn .btn_access a::before {
		font-size: 5.8rem;
		line-height: 1.7242em;
	}
}

@media screen and (min-width:1280px){
}