@charset "utf-8";
/* CSS Document */

.container{
	width:auto;
	margin-bottom:0;
	background: #fafafa;
}


/* ------ keyvisual ----------------------------- */

.keyvisual{
	background:url(../images/top/bg_keyvisual.jpg) no-repeat 50% 0;
	background-size:cover;
	text-align:center;
	position:relative;
	overflow:hidden;
	height:110px;
	padding:245px 0;
}

.keyvisual .scroll{
	position:absolute;
	bottom:0;
	left:50%;
	margin-left:-35px;
}


/* ------ activity ------------------------------ */

.activity{
	background:url(../images/top/bg_activity.jpg) no-repeat 50% 0;
	background-size:cover;
	color:#fff;
	position:relative;
	height:490px;
	padding:95px 0 0;
}

.activity .inner{
	width:980px;
	margin:0 auto;
}

.activity .inner h2{
	margin-right:480px;
}

.activity .inner p{
	margin:20px 480px 0 0;
}

.activity .inner p.more{
	margin:55px 480px 0 0;
}

.activity .inner p.more .map{
	margin-left:55px;
}

.activity .photo{
	position:absolute;
	top:100px;
	left:55%;
	overflow:hidden;
	width: 55%;
	z-index:3;
}

.activity .photo img{
	width:100%;
	height:auto;
	max-width: 751px;
	max-height: 502px;
}


/* ------ support ------------------------------- */

.support{
	background:url(../images/top/bg_support.jpg) no-repeat 50% 0;
	background-size:cover;
	color:#fff;
	position:relative;
	height:340px;
	padding:217px 0 0;
}

.support .inner{
	width:980px;
	margin:0 auto;
}

.support .inner h2{
	margin-left:490px;
}

.support .inner p{
	margin:20px 0 0 490px;
}

.support .inner p.more{
	margin:55px 0 0 490px;
}

.support .photo{
	position:absolute;
	bottom:82px;
	right:55%;
	overflow:hidden;
	width:55%;
	z-index:3;
	text-align: right;
}

.support .photo img{
	width:100%;
	height:auto;
	max-width: 751px;
	max-height: 502px;
}



/* ------ oasismap ------------------------------ */

.oasismap{
	background:url(../images/top/bg_oasismap.jpg) no-repeat 50% 0;
	background-size:cover;
	color:#fff;
	position:relative;
	height:490px;
	padding:95px 0 0;
}

.oasismap .inner{
	width:980px;
	margin:0 auto;
}

.oasismap .inner h2{
	margin-right:480px;
}

.oasismap .inner p{
	margin:20px 480px 0 0;
}

.activity .inner p.more{
	margin:55px 480px 0 0;
}

.oasismap .photo{
	position:absolute;
	top:100px;
	left:55%;
	overflow:hidden;
	width: 55%;
	z-index:3;
}

.oasismap .photo img{
	width:100%;
	height:auto;
	max-width: 751px;
	max-height: 502px;
}


/* ------ volunteer-corporation ----------------- */

.volunteer-corporation{
	background:#43b2d6;
	padding:48px 0 50px;
}

.volunteer-corporation .inner{
	width:980px;
	margin:0 auto;
}

.volunteer-corporation h2.volunteer{
	float:left;
}

.volunteer-corporation h2.corporation{
	float:right;
}


/* ------ news-fb ------------------------------- */

.news-fb{
	background:#fafafa;
	clear:both;
	padding:79px 0 67px;
}

.news-fb .inner{
	width:980px;
	margin:0 auto;
}

.news-fb .news{
	float:left;
	width:620px;
}

.news-fb .news .news-title h2{
	float:left;
}

.news-fb .news .news-title .more{
	float:right;
}

.news-fb .news ul{
	margin:44px 0 0;
}

.news-fb .news ul li{
	margin:24px 0 0;
}

.news-fb .news ul dl dt{
	font-size:100%;
	width:9em;
}

.news-fb .news ul dl dd{
	margin:-1.7em 0 0 11em;
}

.news-fb .calendar{
	width:800px;
	margin: 50px auto;
}

.news-fb .calendar h2{
	font-weight: bold;
	font-family: 'Fjalla One', sans-serif;
    font-size: 24px;
	color: #43B2D6;
	margin: 30px 0 10px;
}

.news-fb .fb{
	float:right;
	width:320px;
}

.partner-list {
	background: #EEE;
	margin: 0 auto;
	padding: 40px 0 40px;
}

.partner-list .list-wrap {
	width: 980px;
	margin: 0 auto;
}

.partner-list h2 {
	clear:both;
	line-height:1;
	margin:0 0 0;
}

.partner-list h2 .en{
	font-family:'Fjalla One', sans-serif;
	font-size:48px;
}

.partner-list h2 .ja{
	display:block;
	margin:7px 0 0 3px;
	font-size:14px;
}

.partner-list h3, 
.partner-list .entry h2 {
	border-top:1px solid #ddd;
	clear:both;
	font-size:114%;
	line-height:1;
	position:relative;
	margin:45px 0 20px;
	padding:30px 0 0;
}

.partner-list h3::before, 
.partner-list .entry h2::before {
	background:#43b2d6;
	content:"";
	display:block;
	width:190px;
	height:3px;
	position:absolute;
	top:-2px;
	left:0;
}

.partner-list h3 .en, 
.partner-list .entry h2 .en {
	font-family:'Fjalla One', sans-serif;
	font-size:30px;
	vertical-align:middle;
	padding-right:20px;
}

.partner-list h3 .ja, 
.partner-list .entry h2 .ja {
	font-size:16px;
	vertical-align:middle;
}

.partner-list ul {
	text-align: center;
}

.partner-list li img {
	width: 100%;
}

.partner-list .silver li img {
	width: 70%;
}

.partner-list .platinum li {
	width: 400px;
	margin: 0 auto 20px;
	text-align: center;
}

.partner-list .gold ul {
	margin-right: -20px;
}

.partner-list .gold li {
	display: inline-block;
	width: 310px;
	margin: 0 20px 20px 0;
}

.partner-list .silver ul {
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.partner-list .silver li {
	display: inline-block;
	width: 300px;
	height: auto;
}

.partner-list .normal {
	margin: 20px auto 0;
	text-align: center
}

.partner-list .normal li{
	display: inline-block;
    width: 289px;
    border: solid 1px #DDDDDD;
    margin: 1em 16px;
    text-align: center;
}

.partner-list .normal li a{
    padding: 0.5em 1em;
	display: block;
}

.partner-list .normal .btn:hover{
    background: #086c8c;
    border: solid 1px #086c8c;
    transition: .4s;
}

.partner-list .normal .btn a{
    text-decoration: none;
}

.partner-list .normal .btn:hover a{
    color: #EEEEEE;
}

.bn-area {
	display: flex;
}
.bn-area a {
	margin: 0 auto;
}

/* ------ btn_02 ------------------------------- */

a.btn_02 {
	position: relative;
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 220px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #43B2D6;
	background: #43B2D6;
	color: #fff;
	transition: 0.5s;
	font-size: 18px;
}

a.btn_02::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 27px;
	width: 9px;
	height: 9px;
	margin: auto;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
	box-sizing: border-box;
}

a.btn_02:hover {
	color: #43B2D6;
	background: #fff;
}

a.btn_02:hover::after {
	border-top: 2px solid #43B2D6;
	border-right: 2px solid #43B2D6;
}