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



.orange_bg{
	background: #FFF5EF;
	padding: 5em 0;
	text-align: center;
	position: relative;
}
.orange_bg:before,
.orange_bg:after{
	content: '';
	background: url("../img/front/project_parts.png")no-repeat top center / cover;
	width: 100%;
	height: 30px;
	display: block;
	position: absolute;
	left: 0;
}
.orange_bg:before{
	bottom: 100%
}
.orange_bg:after{
	transform: rotate(180deg);
	top: 100%
}

@media (min-width:768px){
	.orange_bg:before,
	.orange_bg:after{
		height: 50px
	}
}
@media (min-width:1200px){
	.orange_bg:before,
	.orange_bg:after{
		height: 100px
	}
}
@media (min-width:1600px){
	.orange_bg:before,
	.orange_bg:after{
		height: 100px
	}
}
@media (min-width:2000px){
	.orange_bg:before,
	.orange_bg:after{
		height: 200px
	}
}



/*************************************

   header

**************************************/

#front_header{
	width: 100%;
	height: calc(100vh - 115px);
	margin-top: 65px;
	position: relative;
}
.header_video{
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.header_video video{
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: bottom;
}

/* ヘッダーテキスト部分 */
.header_text{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.header_text h1{
	max-width: 250px;
	margin: 0 auto 2em
}
.title_sub,
.title_read{
	color: #fff;
	font-weight: 900;
	line-height: 1.5;
}
.title_sub{
	font-size: 1.8em;
	margin-bottom: 1em;
}
.title_read{
	font-size: 1.1em;
}

@media (max-width:999px){
	.header_slide:after{
		content: '';
		background: rgba(0,0,0,.5);
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		z-index: 1
	}
	.header_text{
		position: absolute;
		width: 100%;
		height: 100%;;
		top: 0;
		left: 0;
		z-index: 2;
		text-align: center;
		color: #fff
	}
}
@media (min-width:768px){
	#front_header{
		height: 90vh;
	}
	.title_sub{
		font-size: 2em;
	}
	.title_read{
		font-size: 1.3em;
	}
}
@media (min-width:1000px){
	#front_header{
		height: calc(100vh - 75px);
		margin-top: 75px;
		overflow: hidden
	}
	.header_video{
		width: 60%;
		z-index: -1
	}
	.header_text{
		width: 40%;
		position: relative;
		padding: 0 5%;
	}
	.header_text:before{
		content: '';
		background: url("../img/front/header_parts.png")no-repeat left top / cover;
		width: 150px;
		height: 110%;
		display: block;
		position: absolute;
		right: 97%;
		top: 0;
		animation: bob 10s ease-in-out infinite;
		z-index: 0;
	}
	.header_text h1{
		max-width: 300px;
		margin-left: 0;
		z-index: 1;
		position: relative
	}
	.title_sub,
	.title_read{
		color: var(--main-color);
		z-index: 1
	}
	.title_sub{
		font-size: 2.3em
	}
	.title_read{
		font-size: 1.3em;
	}
}
@media (min-width:1400px){
	.header_text h1{
		max-width: 400px;
	}
	.title_sub{
		font-size: 2.8em
	}
	.title_read{
		font-size: 1.8em;
	}
}

@media (min-width:2000px){
	.header_text:before{
		width: 250px;
	}
	.header_text h1{
		min-width: 550px;
		max-width: 550px
	}
	.header_text h1 img{
		width: 100%
	}
	.title_sub{
		font-size: 4em
	}
	.title_read{
		font-size: 2.5em;
	}
	
}

/*　波アニメーション */
@keyframes bob {
    0%   { transform: translateX(0px) rotate(0deg); }
  25%  { transform: translateX(-8px) rotate(-0.3deg); }
  50%  { transform: translateX(0px) rotate(0deg); }
  75%  { transform: translateX(8px) rotate(0.3deg); }
  100% { transform: translateX(0px) rotate(0deg); }
}

/*************************************

   イントロダクション　front_about

**************************************/

#front_about{
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	margin-top: -3.5em;
	padding: 5em 0 10em;
	position: relative;
	z-index: 5;
	width: 100%;
	height: auto
}

#front_about:after{
	content: '';
	background: url("../img/front/nami_index.png")no-repeat bottom left / contain;
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}
#front_about > div.wrap{
	position: relative;
}
#front_about > div.wrap >*:not(.about_zabun){
	z-index: 1;
	position: relative;
}
#front_about h2{
	font-weight: 900;
	font-size: 2.3em;
	line-height: 1.3;
	color: var(--main-color);
	margin: 1em auto;
}
#front_about p{
	line-height: 2.2;
	margin-bottom: 3em;
	position: relative;
	z-index: 1
}
#front_about .btn_wrap{
	margin-bottom: 0;
	justify-content: flex-start;
	align-items: flex-end;
}
.btn_plan{
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: solid 1px #000;
	font-weight: bold;
	color: #000;
	width: 250px;
	padding-bottom: .5em;
}
.btn_plan:after{
	content: "\ea1c";
    font-family: icomoon;
    color: #fff;
    background: var(--orange);
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    display: block;
    font-size: .8em;
    text-indent: 2px;
	transition: .5s
}
.btn_plan:hover:after{
	transform: translateX(5px)
}

@media (max-width:667px){
	#front_about{
		background-image: url("../img/front/intro_bg_sp.png");
	}
	#front_about h2{
		text-align: center
	}
	#front_about p{
		width: 90%;
		margin:  0 auto
	}
	#front_about .btn_wrap{
		text-align: center;
	}
	#front_about .btn1{
		margin: 0 auto
	}
	.btn_plan{
		margin: 2em auto;
		text-align: center
	}
}
@media (min-width:668px) and (max-width:999px){
	#front_about{
		background-image: url("../img/front/intro_bg_tab.png");
	}
}
@media (min-width:668px){
	#front_about{
		margin-top: -8em;
		padding: 7em 0 15em;
	}
	.btn_plan{
		margin-left: 1.2em;
		padding-bottom: .8em;
	}
}
@media (min-width:1000px){
	#front_about{
		background-image: url("../img/front/intro_bg.png");
		padding: 10em 0 18em
	}
	#front_about h2{
		font-size: 3.5em;
	}
	#front_about p{
		line-height: 2.6;
		font-weight: 600;
		font-size: 1.1em;
		margin-bottom: 5em
		
	}
}

@media (min-width:2000px){
	#front_about{
		padding: 15em 0 30em;
		margin-top: -15em;
	}
}

/*************************************

  スライド（about_slide）

**************************************/

#about_slide_wrap{
	position: relative;
}

.about_zabun{
	position: absolute;
	right: 2%;
	width: 25%;
	z-index: 10;
	display: block;
}
.about_zabun img{
	width: auto;
	height: 100%;
	object-fit: contain
}
@media (min-width:668px){
	.about_zabun{
		bottom: 60%;
	}
}
@media (min-width:668px){
	#about_slide_wrap:before{
		height: 400px;
	}
	.about_zabun{
		height: 400px;
		bottom: 100%;
	}
}
@media (min-width:1200px){
	#about_slide_wrap:before{
		height: 500px;
	}
	.about_zabun{
		height: 500px;
		right: 1%;
	}
}

/*-------------------------

  slide

-------------------------*/


.swiper-wrap {
  position: relative;
  width: 100%;
  height: 500px; /* 任意の高さ */
  overflow: hidden;
}

#about_slide_wrap .swiper-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	padding-bottom: 3em
}

.back-slide {
  z-index: 1;
}
.back-slide li img{
	width: 100px!important;
	height: 100px!important;
	object-fit: contain;
}
.back-slide li:nth-child(even){
	margin-top: 300px;
}
.front-slide {
  z-index: 2;
}
.front-slide li{
	margin-top: 2em
}
.front-slide li:nth-child(even){
	margin-top: 5em;
}

@media (min-width:1200px){
	.swiper-wrap {
		height: 700px;
	}
	.back-slide li img{
		width: 120px!important;
		height: 120px!important;
	}
}


/*************************************

  ニュース（index_news)）

**************************************/

#index_news{
	padding: 10em 0;
	margin: 3em auto;
	position: relative;
}
.bg-deco{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.bg-deco:before{
	content: '';
	background: url("../img/front/news_bg.png")no-repeat right top / cover;
	width: 100%;
	max-width: 800px;
	height: 100%;
	display: block;
	z-index: -1;
	position: absolute;
	top: 0;
	left: -1%;
}
#index_news:after{
	content: '';
	background: url("../img/front/news_illast.png")no-repeat center / contain;
	width: 180px;
	height: 180px;
	display: block;
	position: absolute;
	top: 0;
	right: 5%;
}

#index_news .title_en{
	margin-bottom: 5em;
}
#index_news .title_en span{
	color: var(--skyblue);
}


.news_scroll_wrap{
	overflow-x: auto;
	margin-left: auto;
	-webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer / Edge レガシー */
}


#index_news .news_wrap{
	height: auto;
	margin-bottom: 3em;
	justify-content: flex-start;
	flex-wrap: nowrap;
	overflow-x: scroll;
	min-width: 100%;	
}

#index_news .news_wrap:-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

#index_news .news_wrap li.news_list{
	flex: 0 0 300px; /* 幅を固定して折り返さない */
	margin-right: 20px
}
@media (min-width:1000px){
	#index_news:after{
		width: 250px;
		height: 250px;
		right: 10%;
	}
}
@media (max-width:1399px){
	.news_scroll_wrap{
		width: 95%;
	}
}
@media (min-width:1400px){
	.news_scroll_wrap{
		margin-left: calc((100vw - 1400px) / 2 );
	}
	#index_news .news_wrap li.news_list{
		flex: 0 0 400px;
		margin-right: 30px
	}
}


#index_news .btn1{
	background: #fff;
	border: solid 1px var(--skyblue);
	color: var(--skyblue);
}
#index_news .btn1:before{
	background: var(--skyblue);
}
#index_news .btn1:hover span,
#index_news .btn_next:hover:after {
	color: #fff!important
}


/*************************************

  プロジェクト（index_project）

**************************************/

#index_project{
	margin: 100px auto;
	position: relative;
}

.project_title{
	text-align: right;
}

.project_inner_wrap{
	overflow: hidden;
}

.project_read {
	margin: 2em auto 5em;
}

@media (min-width:768px){
	.project_title{
		position: absolute;
		right: 5%;
	}
}
@media (min-width:1200px){
	.project_title{
		top: 3%;
	}
}

/*-------------------------

  project text

-------------------------*/

.project_text{
	color: #F7E7DE;
	font-family: var(--en-font);
	font-size: 6em;
	display: block;
}
@media (min-width:1000px){
	.project_text{
		font-size: 10em;
	}
}



/*-------------------------

  project award

-------------------------*/

#project_award{
	position: relative;
}
#project_award .project_text{
	position: absolute;
	top: -6%;
	left: 25%;
}
#project_award .project_list_wrap{
	justify-content: center;
}
#project_award li{
	margin: 0 3% 1em;
}

@media (min-width: 768px){
	#project_award .project_text{
		top: -10%;
		left: 45%;
	}
}
@media (min-width: 1200px){
	#project_award:after{
		content: '';
		background: url("../img/front/project_illast.png")no-repeat center / contain;
		width: 250px;
		height: 250px;
		display: block;
		position: absolute;
		top: 60%;
		right: 0;
	}
}

/* ざぶん賞 */
#project_zabun figure:before{
	top: -2%;
	left: 2%;
	background-image: url("../img/front/pj_zabun.png")
}
#project_zabun *{
	color: var(--skyblue);
}
#project_zabun .project_cat span{
	border: solid 1px var(--skyblue)
}
#project_zabun .more_btn:after{
	background: var(--skyblue);
}


/*　ざぶんSDGs大賞 */
#project_sdgs{
	margin-top: 5em!important;
}
#project_sdgs figure:before{
	bottom: -3%;
	right: -3%;
	background-image: url("../img/front/pj_sdgs.png")
}
#project_sdgs *{
	color: var(--green1);
}
#project_sdgs .project_cat span{
	border: solid 1px var(--green1)
}
#project_sdgs .more_btn:after{
	background: var(--green1);
}




/*************************************

  バナー（index_banner）

**************************************/

#index_banner{
	padding: 5em 0;
}
#index_banner a{
	display: block;
	transition: .5s
}
#index_banner a:hover{
	opacity: .8
}

#index_banner .flex{
	max-width: 1200px;
	margin: 0 auto 3em
}
#index_banner .flex a{
	width: 100%;
	margin: 0 auto 1em;
}
@media (max-width:999px){
	#index_banner .flex a{
		max-width: 350px;
	}
}
@media (min-width:1000px){
	#index_banner{
		padding: 10em 0
	}
	#index_banner .flex a{
		width: 49%
	}
}

#index_banner > a{
	max-width: 800px;
	margin: 0 auto 2em
}



/*************************************

  活動レポート（index_report）

**************************************/

#index_report{
	margin: 8em auto;
	position: relative
}
#index_report:before{
	content: '';
	background: url("../img/front/report_illust.png")no-repeat center / contain;
	width: 150px;
	height: 150px;
	display: block;
	position: absolute;
	top: 0%;
	right: 0;
}

@media (min-width:768px){
	#index_report:before{
		width: 250px;
		height: 250px;
	}
}
@media (min-width:1200px){
	#index_report:before{
		width: 300px;
		height: 300px;
		top: 5%;
	}
}

#index_report .title_en{
	margin-bottom: 3em;
}
#index_report .title_en span{
	color: var(--green1);
}


.report_list_wrap{
	margin-top: 10%;
	margin-bottom: 5em
}

#index_report .btn1{
	background: var(--green1);
	border: solid 1px var(--green1);
}
#index_report .btn1:before{
	background: #fff;
}
#index_report .btn1:hover span,
#index_report .btn_next:hover:after {
	color: var(--green1)!important
}

.report_list_inner span.date{
	color: var(--green1);
}
.report_list_inner .more_btn span{
	color: var(--green1);
}
.report_list_inner .more_btn:after{
	background: var(--green1)
}


/*************************************

  パートナー（index_partner）

**************************************/

#index_partner{
	margin-top: 15em;
	text-align: center;
	position: relative;
}
#index_partner:after{
	display: none!important
}
#index_partner .title_en:before{
	content: '';
	background: url("../img/front/partner_illust.png")no-repeat center / contain;
	width: 150px;
	height: 150px;
	display: block;
	position: absolute;
	top: -160px;
	left: 2%;
}
@media (min-width:768px){
	#index_partner .title_en:before{
		width: 200px;
		height: 200px;
		top: -180px
	}
}
@media (min-width:1400px){
	#index_partner .title_en:before{
		width: 280px;
		height: 280px;
	}
}

.partenr_slide_wrap{
	width: 100%;
	overflow: hidden;
}


#index_partner .title_en{
	margin-bottom: 3em
}
#index_partner .title_en span{
	color: var(--orange);
}

#index_partner .read_text{
	margin-bottom: 3em;
}

#index_partner .swiper-container{
	overflow: hidden;
}

.partner-slide1{
	margin-bottom: 1em;
}

.partner-slide1 .swiper-wrapper{
	transition-timing-function: linear;
}

.partner-slide1 li{
	aspect-ratio:420 / 110;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 3px 6px rgba(0,0,0,.3);
	border-radius: 5px;
}
.partner-slide1 li img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	vertical-align: bottom
}

/*-------------------------

 パートナー　アコーディオン

-------------------------*/

.partner_acco_wrap{
	margin-top: 3em;
}
.partner_acco{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
#partner_houjin summary{
	background-color: var(--skyblue);
}
#partner_kojin summary{
	background-color: var(--green1);
}
#partner_kouen summary{
	background-color: var(--orange);
}
#partner_art summary{
	background-color: var(--pink);
}

.partner_acco:not([open]) {
    margin-bottom: 7px;
}

.partner_acco summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    border-radius: 2em;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
	margin-bottom: 1.3em;
}
.partner_acco summary p{
	text-align: center;
	width: 100%;
	line-height: 1.5
}

.partner_acco summary::-webkit-details-marker {
    display: none;
}

.partner_acco summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
    transition: transform .3s;
}

.partner_acco[open] summary::after {
    transform: rotate(225deg);
}

.partner_acco ul{
    transform: translateY(-10px);
    opacity: 0;
    margin: 0 auto;
    padding: 1em;
	overflow: hidden;
	transition: height 0.4s ease;
	width: 95%;
	max-width: 1100px;
}

.partner_acco[open] ul {
    opacity: 1;
	transition: .5s
}
.partner_acco ul li{
	width: 50%
}

@media (min-width:768px){
	.partner_acco ul li{
		width: 31%
	}
	.partner_acco_inner:before{
		content: '';
		width: 31%;
		display: block
	}
}



#index_partner .kyousan_png{
	background: #fff;
	width: 95%;
	max-width: 1000px;
	margin: 0 auto 3em;
	border-radius: 1em;
	overflow: hidden;
	padding: 1em;
}