@charset "utf-8";
body{
    font-family: "Helvetica Neue",
    游ゴシック,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
	font-size: 1.1em;
	line-height: 2;
	margin: 0;
	background-color: #FFFFFF;
}

img{
max-width: 100%;
height: auto;
object-fit: contain;
}

h2,h3,h4{
	text-align: center;
}

h2{
	position: relative;
	display: inline-block;
	padding: 0 55px;
}

h2::before, h2::after{
	position: absolute;
	content: '';
	top: 50%;
	display: inline-block;
	width: 35px;
	height: 2.3px;
	background-color: #000;
}

h2::before{
	left: 0;
}

h2::after{
	right: 0;
}

.logoimg,.footerlogo{
	width: 30%;
	margin: auto;
	display: block;
}

.menu-btn{
	display: flex;
	justify-content: center;
	align-items: center;
	top: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	background-color: #D06E6E;
	cursor: pointer;
	position: fixed;
	z-index: 2;
	border: none;
	color: #FFFFFF;
	border-radius: 50%;
}

.menu-btn span:nth-child(1){
	display: block;
	width: 30px;
	height: 3px;
	content: "";
	transition: all .3s;
	position: absolute;
	border-radius: 10px;
	opacity: 1;
	z-index: 100;
	transform: translateY(-1px);
	pointer-events: all;
	background-color: #FFFFFF;
}

.menu-btn span:nth-child(2){
	display: block;
	width: 30px;
	height: 3px;
	content: "";
	transition: all .3s;
	position: absolute;
	border-radius: 10px;
	background-color: #FFFFFF;
	opacity: 1;
	bottom: 14px;
}

.menu-btn span:nth-child(3){
	display: block;
	width: 30px;
	height: 3px;
	content: "";
	transition: all .3s;
	position: absolute;
	border-radius: 10px;
	background-color: #FFFFFF;
	opacity: 1;
	top: 13px;
}

.menu-btn.is-active span:nth-child(2){
	opacity: 0;
}

.menu-btn.is-active span:nth-child(1){
	transform: rotate(45deg) translate(1px,1px);
	opacity: 1;
}

.menu-btn.is-active span:nth-child(3){
	transform: rotate(-45deg) translate(-9px,9px);
	opacity: 1;
}

.menu-btn span{
	z-index: 100;
	transform: translateY(-1px);
	pointer-events: all;
	background-color: #FFFFFF;
}

.nav{
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	right: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1;
	flex-direction: column;
	transition: all .3s;
	transform: translateX(100vw);
	background-color: #BF8E8E;
}

.nav.is-active{
	transform: translateX(0);
}

.nav ul{
	padding: 0;
	margin: 0;
	width: 100%;
}

.nav li{
	list-style: none;
	height: auto;
	padding: 20px 0;	
	text-align: center;
	box-sizing: border-box;
	border-bottom: 2px dashed #fff;
}

.nav li:hover{
	opacity: .6;
}

.nav a{
	text-decoration: none;
	color: #FFFFFF;
	font-size: 1.2em;
	display: block;
}

.mainimg{
	position: relative;
	height: 599px;
}
.picture{
	position: absolute;
	top: 0;
	bottom: 0;
	opacity: 0;
	height: 599px;
	width: 100%;
}
.picture img{
	width: 100vw;
	height: auto;
}
.picture:nth-child(1){
	animation: infinite 8s fadeInImage;
	background: url("../img/mainimg.png") center center /cover;
}
.picture:nth-child(2){
	animation: infinite 8s fadeInImage;
	background: url("../img/mainimg_2.png") center center /cover;
	animation-delay: 4s
}
@keyframes fadeInImage{
	0%{
		opacity: 0;
	}
	10%{
		opacity: 1;
	}
	50%{
		opacity: 1;
	}
	70%{
		opacity: 0;
	}
	100%{
		opacity: 0;
	}
}
.main{
	text-align: center;
}
.picture{
	line-height: 0;
}
.picture img{
	width: 100%;
}
.presentation{
	width: 70%;
	margin: auto;
	padding: 70px 0;
}

.presentationp{
	background-color: #f7f7e2;
}
.button{
	background-color: #FFFFFF;
	border-radius: 40px;
	color: #D06E6E;
	border: 1.2px solid #D06E6E;
	text-decoration: none;
	margin: auto;
	display: block;
	text-align: center;
	padding: 10px;
	font-size: 1.2em;
	margin-top: 20px;
}

.button:hover{
	background-color: #D06E6E;
	color: #FFFFFF;
}

.btn{
	width: 20%;
}
.btn2{
	width: 15%;
}
.charaimg{
	background-color: #f2f2e3;
 	border-radius: 50%;
  	padding: 0 20px;
}
.charaimg:hover{
	background-color: #d7b5b5;
	cursor: pointer;
}
.relation,.cause{
	padding: 90px 70px;
}
.relation{
	background-color: #fdfddd;
}
.presentation p,.relation p,.cause p{
	width: 55%;
	margin: auto;
	padding: 50px;
	border-radius: 20px;
}	
.relation p{
	background-color: #FFFFFF;
}
.cause{
	background-color: #f7f7e2;
}
.cause p{
	background-color: #fff;
}
.footer{
	background-color: #747474;
	color: #FFF;
	text-align: center;
	padding: 40px 0;
}

.footer p{
	margin: 0;	
}
.footerlogo:hover{
	cursor: pointer;
}
.top{
	position: fixed;
	bottom: 0;
	width: 100%;
}

.topbtn{
	margin-left: auto;
	display: flex;
}

/*cause.html*/
mark{
	background: linear-gradient(transparent 40%,#ecec84 80%);
}
.causemain{
	width: 75%;
	margin: auto;
	text-align: center;
}
.personal,.company{
	padding-bottom: 90px;
}
.personals,.companies{
	padding: 20px;
	border-radius: 15px;
}

.personals{
	background-color: #fffde9;
}

.companies{
	background-color: #eaeaea;
}
.companycause{
	border-bottom: 2px dashed #888;
	padding: 20px 0;
}
.companycause:last-child{
	border: none;
}
.causeexample{
	display: flex;
	margin: auto;
	width: 80%;
}
.causeexample p{
	margin: auto;
}
.we{
	padding-bottom: 40px;
}
.we a:hover{
	opacity: .7;
}

/*can.html*/

.wecans{
	width: 75%;
	margin: auto;
}
ol{
	border: 5px dashed #ddd;
	width: 60%;
	margin: auto;
	background-color: #f2f2f2;
	border-radius: 15px;
}
.divcans{
	padding: 70px 0;
}
.can{
	display: flex;
	justify-content: space-between;
}
.cans{
	flex-direction: row-reverse;
}
.can p{
	margin: auto;
	padding: 0 30px;
}
/*character.html*/
.charamain{
	background-color: #FFFFFF;
	text-align: center;
	padding: 50px 0;
}
.charaintro img{
	width: 37%;
}
.reduce{
	background-color: #F9F9ED;
	display: flex;
	justify-content: center;
	margin: 60px auto;
	width: 80%;
	align-items: center;
	border-radius: 15px;
	padding: 20px;
}
.recycle{
	flex-direction: row-reverse;
}
.reyuce{
	margin-top: 60px;
}

/*now.html*/
.world{
	width: 80%;
	margin: auto;
}
.nowp{
    padding: 40px;
    border-radius: 15px;
    width: 60%;
    margin: auto;
}
.nowworld{
	background-color: #f9f9ed;
}
.nowjapan{
	background-color: #fff;
}
.nowflex{
	display: flex;
	justify-content: space-between;
	padding: 75px 0;
}
.nowflex img{
	width: 20%;
	margin: auto;
}
.japan{
	background-color: #f9f9ed;
	padding: 75px 50px;
}
.nowf{
	flex-direction: row-reverse;
}

/*problem.html*/

.problem h4{
   	/*border-left: 5px solid #000;
    text-align: left;
    padding: 0 20px;*/
}
.environment{
	width: 80%;
	margin: auto;
}
.co2{
	padding: 30px;
	margin: 80px 0;
	border-radius: 15px;
}
.co2en{
	border: 2px dashed #b86565;
}
.syakai,.import{
	margin: auto;
	padding: 75px 110px;
}
.syakai{
	background-color: #f9f9ed;
}
.co2s{
	border: 2px dashed #000;
}
.co2can{
	display: flex;
}
.co2can p{
	width: 50%;
	margin: auto;
}
.co2cans{
	flex-direction: row-reverse;
}
/*connect.html*/

.connect{
	width: 80%;
	margin: auto;
	padding: 50px 0;
}
.memberflex{
	display: flex;
	padding: 40px 0;
}
.member,.member1{
	padding: 30px 20px;
	background-color: #f9f9ed;
    margin: 30px;
    border-radius: 20px;
}
.member1{
	width: 46%;
	margin: auto;
}
.member p{
	width: 80%;
	margin: auto;
}

/*relation.html*/

.sdgs{
	padding: 50px 0;
	width: 80%;
	margin: auto;
}
.sdgsgoal{
	padding: 50px 0;
}
.goalflex{
	display: flex;
}

.goalflex p{
	width: 40%;
	margin: auto;
}

.goal{
	flex-direction: row-reverse;
}

/*quiz.html*/
.quiz{
	padding: 70px 0;
}
.quizcolor{
	background-color: #f9f9ed;
}
.seitou img{
	margin: 0 30px;
}
.seitou img:hover{
	cursor: pointer;
}
.bg{
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	display: none;
}
.box{
	margin: 150px auto 0;
	text-align: center;
	padding-top: 25px;
	width: 700px;
	height: 590px;
	background-color: #f0f0f0;
	border-radius: 50px;
}
.box p{
	width: 80%;
	margin: auto;
}
.foodloss{
	color: #000000;
}
.foodloss:hover{
	text-decoration: none;
}
.close{
    background-color: #b86565;
   	color: #fff;
    border: none;
    padding: 12px 35px;
    border-radius: 15px;
    cursor: pointer;
	font-size: 1em;
	font-family: 游ゴシック;
}
.close:hover{
	opacity: .7;
}
.seikai{
	color: #D06E6E;
	font-weight: bold;
}
.huseikai{
	color: #555AB0;
	font-weight: bold;
}

/*foodloss.html*/

.about_foodloss{
	padding: 50px 0;
	width: 80%;
	margin: auto;
}
.lossreason{
	width: 85%;
	margin: 40px auto;
	background-color: #f9f9ed;
	padding: 20px 40px;
    border-radius: 30px;
}
.foodloss_ex{
	display: flex;
	justify-content: space-between;
}
.maker{
	padding: 30px 0;
}
.maker h3{
	position: relative;
	padding: 1rem 1rem;
	border-radius: 10px;
	background-color: #ececd4;
	width: 27%;
	margin: auto;
}
.maker h3::after{
	position: absolute;
	bottom: -9px;
	left: 1em;
	width: 0;
	height: 0;
	content: '';
	border-width: 10px 10px 0 10px;
	border-style: solid;
	border-color: #ececd4 transparent transparent transparent;
}
.long{
	background-color: #f9f9ed;
	padding: 30px 0;
	width: 80%;
	margin: 60px auto;
	border-radius: 30px;
}
.mayo{
	display: flex;
	justify-content: space-between;
	padding: 40px 0;
	width: 70%;
	margin: auto;
	border-bottom: 2px dashed #6f6f6f;
}
.mayo:last-child{
	border: none;
}
.success{
	width: 50%;
	margin: auto;
}
.syuten{
    border: 2px dashed #757575;
    width: 40%;
    margin: auto;
    margin-bottom: 50px;
	border-radius: 15px;
}
.syuten_2{
	width: 55%;
}

@media(max-width:600px){	
	h2{
		font-size: 1.4em;
	}
	.logoimg{
		width: 60%;
	}
	.nav li{
		padding: 35px 0;
	}
	.nav li:last-child{
		border: none;
	}
	.picture:nth-child(1){
		background: url("../img/mainimg_sp.png") center center /cover;
	}
	.picture:nth-child(2){
		background: url("../img/mainimg_2_sp.png") center center /cover;
	}
	.introduce,.presentation{
		width: 90%;
		padding: 50px 15px;
	}
	.presentation p,.relation p,.cause p{
		width: 75%;
	}
	.character{
		margin: 40px 0;
	}
	.charaimg{
		padding: 0 10px;
		width: 80%;
	}
	.btn{
		width: 40%;
	}
	.btn2{
		width: 36%;
	}
	.button{
		margin-top: 50px;
	}
	.relation,.cause{
		padding: 90px 30px;
	}
	.footerlogo{
		width: 52%;
	}
	
	/*cause.html*/
	.causemain{
		width: 90%;
	}
	.causeexample{
	display: block;
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
    }
	
	/*can.html*/
	.wecans{
		width: 90%;
	}
	ol{
		width: 88%;
	}
	.can p{
		padding: 20px 30px;
	}
	.divcans{
		padding: 20px 0;
	}
	
	/*now.html*/
	.world{
		width: 90%;
	}
	.nowflex{
		display: block;
		padding: 10px 0;
	}
	.nowflex img{
		width: 70%;
	}
	.nowp{
		width: 80%;
		margin-bottom: 70px;
	}
	.japan{
		padding: 75px 20px;
	}
	
	/*problem.html*/
	.environment{
		width: 87%;
	}
	.co2can p{
		width: 100%;
	}
	.syakai,.import{
		padding: 75px 30px;
	}
	
	/*connect.html*/
	.connect{
		width: 90%;
	}
	.member,.member1{
		margin: 30px 0;
	}
	.member1{
		width: 90%;
	}
	
	/*quiz.html*/
	.box{
		width: 445px;
		height: 620px;
		border-radius: 20px;
	}
	
	/*foodloss.html*/
	.about_foodloss{
		width: 90%;
	}
	.foodloss_ex,.goalflex,.memberflex,.co2can,.can,.reduce{
		display: block;
	}
	.lossreason{
		padding: 20px 25px;
	}
	.lossreason article{
		margin: 40px 0;
	}
	.maker{
		width: 90%;
		margin: auto;
	}
	.maker h3{
		width: 63%;
	}
	.long{
		width: 93%;
	}
	.mayo{
		display: block;
		width: 80%;
	}
	.success,.goalflex p{
		width: 95%;
	}
	.syuten,.sdgs{
		width: 90%;
	}

}