/*!
Theme Name: JBIB
Theme URI: http://underscores.me/
Author: JBIB
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
@charset "utf-8";
*/
@charset "utf-8";

/* ==========================================================================
 body, layout
========================================================================== */

body {font-family: 'Inter', sans-serif;font-weight:500;}

body.toppage {background: url( ../img/bg_top.png ) repeat;}
body.overview {background: url( ../img/bg_overview.png ) repeat;}
body.members {background: url( ../img/bg_members.png ) repeat;}
body.member_initiatives {background: url( ../img/bg_member_initiatives.png ) repeat;}
body.programs {background: url( ../img/bg_programs.png ) repeat;}
body.working_groups {background: url( ../img/bg_working_groups.png ) repeat;}
body.publications {background: url( ../img/bg_publications.png ) repeat;}

.content_width {
	width: 1000px;
}
.main_width {
	width: 750px;
}
@media screen and (max-width: 959px) {
	.content_width {
		width: auto;
	}
	.main_width {
		width: auto;
	}
}

header {
	position: absolute;
	top: 0;
	width: 100%;
	height: 0;
	z-index: 999;
}
#header_main {
	padding: 35px 40px 12px 40px;
	box-sizing: border-box;
	background: rgba(255,255,255,0.85);
}
@media screen and (max-width: 959px) {
	#header_main {
		padding: 15px;
	}
}

#main_image {
}

footer {
	padding: 40px 0 45px 0;
	background: #63b170;
}
#footer_body {
	display: flex;
	justify-content: space-between;
	flex-flow: row-reverse;
	flex-wrap: wrap;
}
@media screen and (max-width: 959px) {
	#footer_body {
		display: block;
	}
}

/* ==========================================================================
 common
========================================================================== */

a,
a:link  { color: #2e9a44; }
a:visited { color: #597e61; }
a:hover { color: #52c23c !important;text-decoration: none !important; }

a.link_middle { font-size: 18px; }

.semibold {font-weight:600;}
.bold {font-weight:700;}

.italic { font-style: italic;}

em {color:#333 !important;}

/* pc_only, sp_only */
@media screen and (max-width: 639px) {
	.pc_only {
		display: none;
	}
}
@media screen and (min-width: 640px) {
	.sp_only {
		display: none;
	}
}

/* ==========================================================================
 header
========================================================================== */

header h1 {
	font-size: 54px;
	font-weight: bold;
	line-height: 1;
	letter-spacing: 0.12em;
	color: #2c883b;
}
header h1 a:visited{
	color: #2c883b;
}
@media screen and (max-width: 767px) {
	header h1 {
		font-size: 27px;
	}
}

.title_sub {
	margin-bottom: 4px;
	font-size: 15px;
	letter-spacing: 0.04em;
	font-weight: 600;
}
@media screen and (max-width: 767px) {
	.title_sub {
		display: none;
	}
}
@media screen and (min-width: 640px) and (max-width: 959px) {
	.title_sub {
		margin-top: -24px;
	}
}

#pc_navi {
}
@media screen and (max-width: 767px) {
	#pc_navi {
		display: none;
	}
}
#header_navi {
}
#header_navi li {
	display: inline-block;
	padding: 0 8px;
	border-right: 1px solid #333;
	font-size: 15px;
	line-height: 19px;
	letter-spacing: 0.04em;
	font-weight: 600;
}
#header_navi li:last-child {
	padding-right: 0;
	border: none;
}
#header_navi li a {
	color: #2c883b;
}
#header_navi li a:hover {
	color: #52c23c;
}
#header_navi li a:link,
#header_navi li a:visited, {
	color: #2c883b;
}

#sp_navi_trigger_container {
	margin-top: -25px; 
}
@media screen and (min-width: 768px) {
	#sp_navi_trigger_container {
		display: none;
	}
}
#sp_navi_trigger,
#sp_navi_trigger:link,
#sp_navi_trigger:visited,
#sp_navi_trigger:hover {
	color: #27823d !important;
}
#sp_navi {
	position: sticky;
	top: 55px;
	left: 0;
	width: 100%;
	background: rgba(46,154,68,0.95);
	text-align: left;
	z-index: 900;
}
#sp_navi nav ul li {
	border-bottom: 1px solid #fdd;
}
#sp_navi nav ul li a {
	position: relative;
	padding: 15px 15px 15px 20px;
}
#sp_navi nav ul li a,
#sp_navi nav ul li a:link,
#sp_navi nav ul li a:visited,
#sp_navi nav ul li a:hover {
	color: #fff !important;
}
#sp_navi .uk-nav-parent-icon>.uk-parent>a::after{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
	right: 20px;
	box-sizing: border-box;
	width: 6px;
	height: 6px;
	border: 6px solid transparent;
	border-left: 10px solid #fff;
	background: none !important;
}
#sp_navi .uk-nav-parent-icon>.uk-parent.uk-open>a::after {
	top: 7px;
	right: 26px;
	border: 6px solid transparent;
	border-top: 10px solid #fff;
}

#sp_navi nav ul.uk-nav-sub {
	padding: 0 !important;
}
#sp_navi nav ul.uk-nav-sub li:first-child {
	border-top: 1px solid #fdd;
}
#sp_navi nav ul.uk-nav-sub li:last-child {
	border-bottom: none;
}
#sp_navi nav ul.uk-nav-sub li a {
	padding-left: 40px;
}

/* ==========================================================================
 main image
========================================================================== */

.main_image_text {
	position: absolute;
	top: 25vw;
	left: 32vw;
	color: #fff;
	font-size: 40px;
	line-height: 55px;
	font-weight: bold;
	letter-spacing: 0.01em;
	text-shadow: black 0 0 5px;
}
@media screen and (max-width: 959px) {
	.main_image_text {
		top: 26%;
		left: 30px;
		font-size: 30px;
		line-height: 45px;
	}
}
@media screen and (max-width: 639px) {
	.main_image_text {
		display: none;
	}
}

#subpage_image {
	position: relative;
	height: 40vw;
	background-size: cover !important;
}
#subpage_image.bg_overview {background:url(../img/mainimg_overview.jpg);}
#subpage_image.bg_members {background:url(../img/mainimg_members.jpg);}
#subpage_image.bg_member_initiatives {background:url(../img/mainimg_member_initiatives.jpg);}
#subpage_image.bg_programs {background:url(../img/mainimg_programs.jpg);}
#subpage_image.bg_working_groups {background:url(../img/mainimg_working_groups.jpg);}
#subpage_image.bg_publications {background:url(../img/mainimg_publications.jpg);}
@media screen and (max-width: 959px) {
	#subpage_image {
		height: 50vw;
		background-size: 100% auto;
		background-position: center;
	}
}
@media screen and (max-width: 639px) {
	#subpage_image {
		height: 100vw;
		background-size: cover !important;
		background-position: center;
	}
}
#subpage_image .main_image_text {
	position: absolute;
	top: 50%;
}
@media screen and (max-width: 959px) {
	#subpage_image .main_image_text {
		top: 60%;
		left: 30px;
		font-size: 30px;
		line-height: 45px;
	}
}
@media screen and (max-width: 639px) {
	#subpage_image .main_image_text {
		display: block;
		top: 50%;
	}
}

#main_image_slide {
		height: 57.5vw;
}
#main_image_slide li {
	/*background-size: cover;*/
	background-size: 100% ;
	background-position: center;
}
@media screen and (max-width: 959px) {
	#main_image_slide {
		height: 78vw;
	}
	#main_image_slide li {
		background-size: auto 100% ;
		background-position: center;
	}
}
@media screen and (max-width: 639px) {
	#main_image_slide {
		height: 130vw;
	}
}

/* ==========================================================================
 footer
========================================================================== */

footer a,
footer a:link,
footer a:visited {color:#fff !important;}
footer a:hover {color:#fff !important;}

#footer_logo {
	position: relative;
	width: 200px;
}
#footer_main {
}
@media screen and (max-width: 959px) {
	#footer_logo {
		height: 60px;
		margin: 0 auto;
	}
}
@media screen and (min-width: 640px) and (max-width: 959px) {
	#footer_logo {
		margin-left: 30px;
	}
}

#footer_logo img {
	position: absolute;
	bottom: 0;
	width: 200px;
	margin-bottom: 0;
}

#footer_list {
	margin-left: 10px;
	margin-bottom: 60px;
	font-size: 13px;
	line-height: 20px;
}
#footer_list ul li {
	color: #fff;
	white-space: nowrap;
}
#footer_list ul li.parent {
	padding-left: 15px;
	font-weight: 600;
}
#footer_list ul li.parent::before {
	content: none;
}
@media screen and (max-width: 639px) {
	#footer_list ul {
		margin-bottom: 10px;
	}
	#footer_list div:first-child div:last-child {
		/* position fix */
		margin-top: -75px;
	}
}

#footer_copy {
	margin-top: -1em;
}
#footer_copy small {
	margin-left: 20px;
	color: #333;
	font-size: 12px;
	line-height: 20px;
}
@media screen and (max-width: 959px) {
	#footer_copy {
		margin-top: 20px;
		text-align: center;
	}
	#footer_copy small {
		margin-left: 0;
	}
}
@media screen and (min-width: 640px) and (max-width: 959px) {
	#footer_copy {
		margin-left: 30px;
		text-align: left;
	}
}

.footer_jp {
	float: right;
	display: block;
	width: 110px;
	padding: 2px 0;
	border: 1px solid #fff;
		text-align: center;
}
@media screen and (max-width: 959px) {
	.footer_jp {
		margin-right: 10px;
	}
}
@media screen and (max-width: 639px) {
	.footer_jp {
		float: none;
		margin: 20px auto 0 auto;
	}
}

/* ==========================================================================
 top page, main area
========================================================================== */

/* -----------------------------------------------
 * main image
 * ----------------------------------------------- */

#mainimg_caption {
	width: 185px;
	height: 210px;
	padding: 0 20px;
	background: rgba(83,83,83,0.8);
	color: #fff;
	font-size: 13px;
	line-height: 20px;
}
@media screen and (max-width: 959px) {
	#mainimg_caption {
		width: auto;
		height: 80px;
		padding: 15px;
	}
}
#mainimg_caption a,
#mainimg_caption a:link,
#mainimg_caption a:visited {
	color: #64b271;
}
#mainimg_caption a:hover {
	color: #64b271;
}
#mainimg_caption ul {
	position: relative;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
#mainimg_caption ul li {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	font-weight: normal;
}
@media screen and (max-width: 959px) {
	#mainimg_caption ul li {
		top: 0;
		transform: translate(0, 0);
	}
}

.main_noimage {
	padding-top: 120px;
}
@media screen and (max-width: 959px) {
	.main_noimage {
		padding-top: 134px;
	}
}
@media screen and (max-width: 767px) {
	.main_noimage {
		padding-top: 60px;
	}
}

/* -----------------------------------------------
 * main area common
 * ----------------------------------------------- */

.main {
	box-sizing: border-box;
	padding: 40px;
	padding-bottom: 200px;
	background: rgba(255,255,255,0.85);
}
.main h1 {
	font-size: 26px;
	line-height: 36px;
	font-weight: bold;
}
.main h1.h1_large {
	font-size: 34px;
	line-height: 40px;
}
.main h1.h1_large .font_sub {
	font-size: 25px;
}
.main h2 {
	margin-bottom: 0;
	font-size: 20px;
	line-height: 36px;
	font-weight: bold;
	color: #335039;
}
.main p+h2, .main figure+h2{
    margin-top:70px;
}
.main p+h2, .main figure+h2.small-padding{
    margin-top:35px;
}
.main p {
	margin-top: 0;
	font-size: 16px;
	line-height: 26px;
}
p.lead {
	font-weight:700;
}
.main p.has-small-font-size{
	font-size: 15px;
}
.main p+ol{
    margin-top:-20px;
}

.main figure {
	margin-top: 30px;
}
.main figure figcaption {
	font-size: 13px;
	margin-top: 10px;
}

.main div.quot {
	margin-bottom: 20px;
}
.main div.quot p {
	margin-bottom: 0.25em;
	padding-left: 1em;
	text-indent: -0.75em;
}

/* -----------------------------------------------
 * title icon
 * ----------------------------------------------- */

.title_icon {
	padding-right: 120px;
}
.title_icon.icon_esg {
	background: url( ../img/title_icon_esg.png ) no-repeat;
	background-position: right center;
}
.title_icon.icon_supply {
	background: url( ../img/title_icon_supply.png ) no-repeat;
	background-position: right center;
}
.title_icon.icon_green {
	background: url( ../img/title_icon_green.png ) no-repeat;
	background-position: right center;
}
.title_icon.icon_town {
	background: url( ../img/title_icon_town.png ) no-repeat;
	background-position: right center;
}
.title_icon.icon_marine {
	background: url( ../img/title_icon_marine.png ) no-repeat;
	background-position: right center;
}
@media screen and (max-width: 767px) {
	.title_icon.icon_esg,
	.title_icon.icon_supply,
	.title_icon.icon_green,
	.title_icon.icon_town,
	.title_icon.icon_marine {
		background: none;
	}
}

/* -----------------------------------------------
 * left navi
 * ----------------------------------------------- */

#leftnavi {
	width: 210px;
	min-height: 170px;
	padding: 20px;
	background: rgba(83,83,83,0.9);
	color: #fff;
	font-size: 15px;
	line-height: 33px;
	z-index: 900;
}
@media screen and (max-width: 959px) {
	#leftnavi {
		width: auto;
		min-height: 80px;
		padding: 15px;
	}
}
#leftnavi a,
#leftnavi a:link,
#leftnavi a:visited {
	color: #64b271;
}
#leftnavi a:hover {
	color: #64b271;
}
#leftnavi ul.content_list {
	margin: 0;
	padding: 0;
	list-style: none;
}
#leftnavi ul.content_list li.secondary {
}
#leftnavi ul.content_list li.secondary:before {
	content: '-';
	margin-right: 5px;
	color: #64b271;
}

/* sticky */
@media screen and (min-width: 960px) {
	#leftnavi.leftnavi_sticky {
		width: 250px !important;
		padding: 20px 0;
	}
	#leftnavi.leftnavi_sticky ul.content_list {
		padding-left: 20px;
	}
}
@media screen and (max-width: 959px) {
	#leftnavi.leftnavi_sticky {
		display: none;
	}
}
#leftnavi.leftnavi_sticky + .uk-sticky-placeholder {
	height: 0 !important;
}

/* -----------------------------------------------
 * list
 * ----------------------------------------------- */

/* ---------- topics ---------- */

dl.topics {
	margin-top: 8px;
}
dl.topics dt {
	font-size: 13px;
	line-height: 20px;
	font-weight: normal;
	
}
dl.topics dd {
	margin-bottom: 16px;
	font-size: 16px;
	line-height: 26px;
}

/* ---------- list_number ---------- */

dl.list_number {
}
dl.list_number > div {
	display: flex;
	margin-bottom: 1em;
}
dl.list_number dt {
	width: 36px;
}
dl.list_number dd {
	flex: 1;
}
dl.list_number.dt_bold_normal dt {
	font-weight: 500;
}

/* ---------- list_year ---------- */

dl.list_year {
}
dl.list_year > div {
	display: flex;
	margin-bottom: 1em;
}
dl.list_year dt {
	width: 110px;
}
@media screen and (max-width: 767px) {
	dl.list_year dt {
	    width: 70px;
	}
}


dl.list_year dd {
	flex: 1;
}

/* ---------- list_position ---------- */

dl.list_position {
}
dl.list_position > div {
	display: flex;
	margin-bottom: 1em;
}
dl.list_position dt {
	width: 140px;
	font-size: 14px;
	font-weight: normal;
}
dl.list_position dd {
	flex: 1;
	font-weight: normal;
}
dl.list_position div.list_position_name {
	margin-bottom: 8px;
	font-size: 16px;
}
dl.list_position p {
	font-size: 14px;
}

/* ---------- list_link_small ---------- */

ul.list_link_small {
	margin: 0 0 20px 0;
	padding: 0;
	list-style: none;
}

/* ---------- list_link_middle ---------- */

ul.list_link_middle {
	margin: 0 0 20px 0;
	padding: 0;
	list-style: none;
}
ul.list_link_middle li {
	margin-bottom: 0.6em;
}
ul.list_link_middle li a {
	font-size: 18px;
}

/* ---------- list accordion fix ---------- */

ul.list_accordion {
}
ul.list_accordion.uk-accordion>:nth-child(n+2) {
	margin-top: 10px;
}
ul.list_accordion .uk-accordion-title::before {
	background: none;
}
ul.list_accordion > li .uk-accordion-title {
	display: inline;
	font-size: inherit;
}
ul.list_accordion > li .uk-accordion-title:focus {
	color: #2e9a44 !important;
}
ul.list_accordion > li .uk-accordion-content {
	margin-top: 10px;
	padding-bottom: 10px;
}

/* -----------------------------------------------
 * section_title
 * ----------------------------------------------- */

h1.section_title {
	margin-left: -40px;
	margin-right: -40px;
	padding: 35px 40px;
	background: url( ../img/section_title_bg_blue.jpg ) no-repeat;
	font-size: 20px;
	line-height: 1;
	color: #fff;
}

/* -----------------------------------------------
 * company_list
 * ----------------------------------------------- */

ul.company_list {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 20px 0;
	padding: 0;
	list-style: none;
}
ul.company_list li {
	width: 165px;
	height: 165px;
}
ul.company_list li img {
	width: 165px;
	height: 165px;
}
@media screen and (max-width: 459px) {
	ul.company_list li {
		width: 50%;
		height: 50%;
	}
	ul.company_list li img {
		width: 100%;
		height: 100%;
	}
}

/* -----------------------------------------------
 * member initiatives
 * ----------------------------------------------- */

.member_i_box {
	display: flex;
	margin-bottom: 70px;
}
.member_i_box_img {
	width: 180px;
	height: 180px;
	margin-right: 35px;
}
.member_i_box_data {
	flex: 1;
}
.member_i_box_logo {
	height: 100px;
}
.member_i_box_company {
	margin-bottom: 10px;
    font-size:14px;
}
.member_i_box_text {
}
@media screen and (max-width: 767px) {
	.member_i_box_img {
		width: 120px;
		height: 120px;
		margin-right: 15px;
	}
}

/* -----------------------------------------------
 * box_person
 * ----------------------------------------------- */

.box_person {
	display: flex;
}
.box_person_data {
	flex: 1;
}
.box_person_photo {
	width: 150px;
}
.box_person_org {
	margin-bottom: 30px;
}
.box_person_name {
	margin-bottom: 3px;
	font-weight: bold;
	font-size: 26px;
}
.box_person_position {
	font-size: 13px;
}
.box_person.chairperson .box_person_org {
	margin-bottom: 0;
}
.box_person.chairperson .box_person_name {
	margin-bottom: 10px;
	font-size: 20px;
}
.box_person.chairperson .box_person_sign {
	margin-bottom: 10px;
}
@media screen and (max-width: 767px) {
	.box_person {
		display: block;
	}
	.box_person_data {
		margin-bottom: 10px;
	}
}