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

*, *::before, *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
    /*padding:0    */
}


html {
	font-size: 16px;
	background: #F2FFF8;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	color: #5B5A5A;/*#707070#3B3A3A ;*/
}

body {
	margin: 0 auto;
	background: #A5E5C3;
}

.l-wrapper {
	overflow: hidden;
	text-align: center;
	margin: 0;
	max-width: 100%;
	height: auto;
}

/*top画像*/


.e-blank3{
    padding-top: 4%;
	background: rgba(255,255,255,0.55);
	border-radius: 4% 4% 30% 30%;
}

/*ナビゲーション*/


.l-nav{
	background-color: #92E8BB;
	/*width:100%;*/
}
.e-ftop-item1{/*発見*/
	width:46%;
	max-width: calc(200px*2.2);
}


.e-ftop-item2{/*SDGsロゴ*/
	width:30%;
	padding: 2% 0% 0% 2%;
	max-width: calc(214px*2.2);
}


.p-nav-retop-container div img{
  width:100%;

}
.p-nav-retop-container{
	display: flex;
	justify-content:flex-end;
	
	align-items: flex-end;
	flex-flow: row;
	/*background-color: #92E8BB;*/
	padding: 0%;

}

* p, h2, h3, h4, .nav-list, .n-btn, .e-quiz-btn, .start {
	transform: rotate(0.05deg);/*文字シャギ防止*/
}

/*画像*/
* .img2x {
	max-width: 100%;
	
}

/*セクション01-TOP*/
#sec01 {
	background: #A5E5C3;
}

.s01-box1 {
	/*width: 375px;*/
	margin: 5% 0 0;
	
}

picture {
	 margin: 0;
}

 .pict01 img, .pict02 img{
	 margin: 0;
	 max-width: 100%;
}



/*セクション02 民衆交易図*/

#sec02 {
	background: #FE85B1;
	padding: 0 0.5em 12%;
}

.s02-box1 {
	padding: 13% 0;
}

.main-contents {
	background: #FFFDF3;
	position: relative;
}

.p2p {
	
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,-60%);
	width: 85vw;
	min-width: 290px;
}

.banana-box {
	margin: 10% auto ;
	padding-top: 15%;
}

.exchange {
	border: 6px solid #FBEF84;
	border-radius: 2em;
	margin: -5% 3% 5%;
	padding-top: 1em;
	line-height: 1.8em;
}

.pigeon-box {
	background-image:url("../img/pigeon@2x.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	padding: 25% 4%;
	margin: 2% auto;
	width: 90vw;
}

.pigeon-box p {
	display: inline-block;
	line-height: 2em;
	margin: 1em 0.5em;
	padding: 2em 0.5em 1.2em;
	max-width: 460px;
	width: 80vw;
	
}

/*02-end*/


#sec03 {
	background: #9FA9C3;
	padding: 5% 2%;
}

.poor-h2 {
	margin: 10% auto;
}

.poor-box {
	position: relative;
	margin: 10% 0;
	
}

.poor-title {
	width: 70%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,-60%);
	
}

.poor-box2 {
	background: #E5F8E3;
	margin: 0 0 10%;
	padding: 4% 0 0;
	line-height: 2.5em;
	text-align: center;
}


/*sec04持続可能な暮らし*/

.sec04 {
	margin: 0;
	background: #FFFDF3;
}
/*
.fadeIn {
	animation: fadeInAnime 5s ease 1s forwards 2;
	opacity: 0;
}*/
/*

@keyframes fadeInAnime {
	from {
		transform: translate(-50%,65%);
		opacity: 0;
				
	}
	
	to {
		transform: translate(-5%,65%);
		opacity: 1;
	}
	
}
*/
/*
@keyframes fadeIn {
	from {
		transform: translate(100%,3%);
		opacity: 0;
				
	}
	
	to {
		transform: translate(87%,3%);
		opacity: 1;
	}
	
}*/

.pink_box {
	background: #FE85B1;
}

.beige_box {
	background: #FFFDF3;
	margin: 0;
}

.pink_img {
	margin: 0;
	width: 70%;
	/*animation: fadeInAnime 1.6s ease 2s both 1;*/
	transition: all 1s 0s ease-in-out;
	transform: translate(-50%,65%);
	opacity: 0;
	z-index: 5;
}

.beige_img {
	 width: 62%;
	/*animation: fadeIn 0.6s ease 1.5s both 1;*/
	transition: all 0.8s 0.8s ease-out;
	transform: translate(100%,3%);
	opacity: 0;
	z-index: 6;
}

@media (max-width:730px){/*持続可能タイトル画像置き換え*/
	.pink2img, .beige2img {
		display: none;
	}}



.life-box {
	background: #8BCB8B;
	padding-top: 20%;
	margin: 0;
	
	display: flex;
	flex-direction: column;
}

.life-p {
	background-image: url("../img/paint6@2x.png");
	/*50%/50% #8BCB8B no-repeat contain;*/
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	padding: 1.2em 2.5em 0.5em;
	/*margin: 1%;*/
	width: 80vw;
	max-width: 540px;
	position: relative;
}
	
.life-p2 {
	right: 0;/*life-pにposition入れたため*/
	margin-left: auto;/*必要？*/
}

/*.life-p::nth-of-type(even) {
	margin-left: auto;
}*/
		
.life-p p {
	display: inline-block;
	margin: 0;
	padding: 1.1em 1em 1.1em 0.9em ;
	font-size: 0.89em;
	line-height:1.9em;
	text-align: center;
	max-width: 65vw;
}

.sec4pic1 {
	position: absolute;
	bottom: -0.5em;
	right: 1em;
	max-width: 22%;	
}

.sec4pic2 {
	position: absolute;
	top: 1em;
	left: 0;
	max-width: 22%;	transform:translateX(-50%);/* rotate(-15deg)*/
}

.sec4pic3 {
	position: absolute;
	bottom: -1em;
	left: 0;
	max-width: 25%;	transform:translate(-10%,15%) rotate(15deg);/**/
}
.sec4pic4 {
	position: absolute;
	top: 0;
	right: 0;
	max-width: 18%;
	transform: translate(0, -55%);/* rotate(2deg)*/
}

.leaf1 {
	max-width: 20%;
	position: absolute;
	right: 0;
	bottom: 0%;
	transform: translateX(60%) ;/*rotate(-60deg)*/
	
}

.sec4pic5 {
	position: absolute;
	top: 0;
	left: 0;
	max-width: 23%;	transform:translate(-20%, -50%) ;
}

.sec4pic6 {
	position: absolute;
	bottom: 0;
	right: 1em;
	max-width: 18%;	transform:translate(5%,-10%) rotate(5deg);/**/
} 

.sec4pic7 {
	position: absolute;
	top: 0;
	right: 0;
	max-width: 23%;	transform:translate(30%,20%);/**/
} 


	.ls005 {
		display: inline-block;
		letter-spacing: -0.08em;
	}

.dots3 {
	width: 30%;
	margin: 5% auto;
}

.cloud6 img {
	margin-top: 20%;
	padding: 2%;
	
}
/*三角下矢印*/
.green-d {
	margin: -1% auto 0;
	
	border-top: 30vw solid #8BCB8B;
	border-right: 50vw solid #7FB173;/*transparent*/
	border-left: 50vw solid #7FB173;/*transparent*/
	max-width: 1040px;
}

@media (min-width: 1041px) {
	.green-d {
		border-width: 312px 520px 0;
		
	}
}

/*sec5　SDGs ポイント*/
#sec05 {
	background: #FEC194;
}

.point-logo {
	padding-top:  5%;
}

.point-logo img {
	width: 65%;
	vertical-align: bottom;
	margin-bottom: -1%;
}

.point-logo p {
	display: inline-block;
	/*padding-top: 30%;*/
	margin: 0 0 1% -1%;
	/*vertical-align: top;*/
	font-weight: bold;
	font-size: 1.56em;
	transform: rotate(2deg);
	color:#FDFDF4;
	text-shadow: 2px 2px 0 #474545,2px 0 0 #474545,0 2px 0 #474545,-1px 0 0 #474545,0 -1px 0 #474545;
	
	/*transform: rotate(0.05deg);*//*文字シャギ防止*/
}
.point {
	padding-bottom: 10%;
}

/*sec5 end*/

/*sec6 パートナーシップ*/

#sec06 {
	background: #F8A8C0;
	padding: 10% 3%;
}

.partner {
	background: #FCE7E7;
	margin: 15% 2%;
	border-radius:2em;
	padding: 0.5em 6% 3em;
}

.tour1,.tour2 {
	margin: 0 0.5em;
}

.tour2 {
	margin-top: 5em;
}

.tour-box,.xmas-box {
	background: rgba(248,242,242,0.48);
	margin: 3% 0;
	padding: 2% 2%;
	text-align: justify;
	font-size: 0.9em;
}

.tour-box p,.xmas-box p {
	line-height: 1.9em;
	margin: 1em 0.5em;
}

.xmas-pics {
	display: flex;
	margin: 0 auto;
}

.xmas-wrap {
	flex-wrap: wrap;
	justify-content: space-around;
}

.xmi {
	flex-basis: 46%;
	
}

.xmi p {
	/*margin: 0;*/
	/*color: #A1A5A2;	*/
	font-size: 0.8em;
	line-height: 1.4em;
	margin-top: 0.2em;
	font-family: 'Noto Sans JP', sans-serif;
}
span.xmascaps {
	font-size: 0.7em;
	
}

.xmas-bg {
	margin: 0;
	padding: 1em 10% 3em;
	background-image:url("../img/xmas-bg1@2x.png");
	background-size: 100%;
}

/*sec6 end*/

/*07れきし*/
#sec07 {
	margin: 0 3%;
	background: #E8F9E8;
	padding: 0 0 15%;
}

#sec07 * p {
	line-height: 2em;
	font-size: 0.95em;
}


.history h2 {
	margin: 0;
	padding: 20% 0 10%;
	letter-spacing: -0.05em; 
	font-weight: bolder;
}

.history-p {
	background: #DBFCE6;
	margin: 2%;
	padding: 0.5em;
	
	
}

.history-box {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: 10% 0 15%;
}
.ml3 { /*マスコバド糖*/
	justify-content: space-evenly;
}


.his-img {
	flex-basis: 35%;
	
}
/*
.his-img img {
	max-width: 100%;
}*/

.his-img p {
	margin: 0;
}

.item-p {
	flex-basis: 90%;
	
	
}

.item-p p {
	text-align: justify;
	
}

.attain-box {
	border: 3px dotted #E9DC9A;
	border-radius: 2em;
	padding: 0 0.8em;
	/*align-content: stretch;*/
	flex-basis: 95%;
	background:rgba(252,251,251,0.35);
	margin: 2%;
	font-weight: bold;
	font-size: 0.89em;
}

.attain-box h4 {
	font-size: 0.8em;
}

.year {
	letter-spacing: -0.25em;
}
.dh3{
	
}

.start {
	border: 1px solid #707070;
	border-radius: 1px;
	background: #FFF;
	flex-basis: 25%;
	font-size: 0.62em;
	padding: 0.3em ;
	margin-bottom: 1.5em;
	margin-right: -50%;
	align-self: center;
	display: inline-block;

}

.ml3 h3 {
	flex-basis: 46%;
}

.hb-h3 { /*れきし年・商品名*/
	line-height: 2em;
	flex-basis: 50%;
	margin: 0;
	font-weight: bolder;
}


.model /*自立モデル*/{
	flex-basis: 19%;
	align-self: center;
}

.f35 {/*れきし画像imgサイズ調整*/
	flex-basis: 35%;
}
.f35 img {
	padding: 0 7%;
	}
.indent-r {
	display: block;
	text-align: left;
	padding-left: 1em;
	text-indent: -1em;
	line-height: 1.5em;
	margin-top: 0.6em;
}

.banana-p {
	flex-basis: 63%;
	padding-top: 1em;
	margin: 0 auto;
	
}

.banana-img {
	flex-basis: 18%;
	margin: 0.5em auto;
	margin-left:  auto;
	
}


.shrimp-img {
	flex-basis: 18%;
	margin: 0.5em auto;
}

.shrimp-p {
	flex-basis: 75%;
	margin-left: auto;
}

p.t-center {
	text-align: left;
	
	}
.indent-1{
	display: block;
	padding-left: 2em;
	text-indent: -3.5em;
	line-height: 1.5em;
}

.indent-c{
	display: block;
	padding-left: 3.5em;
	text-indent: -4.5em;
	line-height: 1.5em;
}
.indent-c ruby {
	text-indent: 0;
}
.indent1 {
	text-align: left;
	margin: 0 0 1em;
	flex-basis: 90%;
}

.indent2 {
	margin-bottom: 0;
	text-align: left;
	flex-basis: 69%;
}

p.indent3 {
	text-align: right;
	margin-top: 0.3em;
	flex-basis: 66%;
}

.cf-ip {
	padding: 0 0.4em;
}

/*.mascimg, */.cofimg, .papuimg {
	flex-basis: 37%;
}

.copee {
	padding-top: 0.8em;
}

.cacao-p {
	display: inline-block;
	flex-basis: 90%;
	text-align: left;
	margin-top: 0;
}

.cacao-ip {
	
}

div.choch-box {
	position: relative;
}

.cho {
	position: absolute;
	width: 20%;
	bottom: 0;
	right: 0;
	transform: translate(5%,80%);
	margin: 0;
}

.cho img {
	max-width: 80px;
}		

	


.summary {
	background: #FCF2E5;
	margin: 30% 5% 15%;
	padding: 3% 2%;
}
.sh2 {
	font-size: 1.2em;
	text-indent: -2em;
}

.sh2-line2 {
	display: block;
	text-indent: 10em;
}
.sh2-line2 ruby{
	text-indent: 0;
}

.summary p {
	text-align: justify;
	/*font-weight: bold;*/
}

.n-btn {
	
	width: 55%;
	max-width: 255px;
	margin: 10% auto;
	position: relative;
}

.btn-img {
	position: absolute;
	right: 0;
	top: 3%;
	transform: translate(40%,-55%);
	max-width: 33%;	
}

.btn-sticky2 {
	display: block;
	background:#F8FED7 /*#F0FED7#e7ffb8#AEE8C4#B3F6CD#B5ECCA #9EEEA1*/;
	border-radius: 2em;
	border:1px solid #FEE2A1;
	/*rgba(247,227,227,1.00);*/
	box-shadow: 3px 2px 0 rgba(233,222,195,1.00);/*rgba(243,215,151,1.00) rgba(243,224,184,1.00)rgba(220,196,184,1.00)*/
	padding: 10% 0.8em 1em;
	text-decoration: none;
	font-size: 1.05em;
	line-height: 2.1em;
	font-weight: bold;
	color:#F58D68;/*#fa8257#F9AE77#E68562#ff5e5e#fa9b57#f78181#faaaaa#f7dada;*/ /*#fff2f2#ECE6E6#FBF1F6#707070rgba(70,154,102,1.00)*/
	text-shadow: 0 1px 0 #8A6C49,1px 0 0 #8A6C49,1px 1px 0 #8A6C49;/*#CEBEAB#ffedd6 text-shadow: 0 1px 0 #ffedd6,1px 0 0 #ffedd6,1px 1px 0 #ffedd6/  -1px 0 0 #C5A1A1,0 -1px 0 #C5A1A1,0 1px 0 #C5A1A1,1px 0 0 #C5A1A1,1px 1px 0 #C5A1A1,-1px -1px 0 #C5A1A1,-1px 1px 0 #C5A1A1,0 1px 0 #C5A1A1,1px -1px 0 #C5A1A1*/
	/*#b28b92#B79B9B#d1adad#D1C7C7
	#474545,1px 1px 0 #474545,-1px 0 0 #474545,0 -1px 0 #474545;*/
	/*,,*/
}
 

/*ここから08APF基金*/

#sec08 {
	padding: 10% 5%;
	background-color: #D6F1F5;
}

.apf-box {
	display: flex;
	justify-content: center;
	align-items: center;
}

.apf-img {
	flex-basis: 25%;
}

.apf-box p{
	display: block;
	background-color: #ffbfa6;
	border: 2px dotted #D1C7C7;
	border-radius: 2em;
	font-size: 0.8em;
	line-height: 1.8em;
	flex-basis: 57%;
	padding: 1em 0.5em 0.5em;
}


.support h3 {
	text-align: left;
	font-size: 1em;
}

.support h4 {
	font-size: 1em;
	font-weight: normal;
}

.cafe {
	margin: 0 10% 10%;
}

.cafe-p {
	font-size: 0.88em;
	line-height: 1.8em;
	text-align: justify;
	margin: 1em auto;
}

.about-apf {
	border:3px solid #D1C7C7;
	border-radius: 2em;
	padding: 1em 0.5em;
	background: #FAF7EE;
	margin: 15% 3%;
}

/*09クイズ*/

#sec09 {
	background: #B5ECCA;
}

/*nクイズ*/

.l-section01quiz-box/*藤松変更*/{
		padding: 0% 3.2% 15%;
	margin: 20% auto 5%;
	}


.p-bold{/*クイズタイトル*/
	font-weight: bold;
}

.l-qizu {
    position: relative;
	padding-bottom: 5%;
	margin:15% 1.5% 20%;/*藤松変更*/

}

.l-qizu img{
width:100%;

}

.l-qizu-wrap{
    /*position: absolute;*/

}


.l-qizu-title{
    position: absolute;
    top: 5%;/*藤松変更2.5%*/
    left:50%;
    transform:translateX(-50%);

    width:95%;
	padding:0%;


}

.l-qizu-title p{
    position: absolute;
	top:50%;
	left:12%;
	transform: translateY(-50%);
	margin: 0;
	padding: 0;
}


.l-qizu-title img{
    width: 100;
}



.p-qizetitle-absolute-top-left{
    position: absolute;
    top:0%;
    left:-5%;

transform:rotate(-40deg);
width:13%;
}

.p-qizetitle-absolute-top-left img{
	/*height:auto;*/
	width:100%;
}


.p-qizetitle-absolute-bottom-rigth{
    position: absolute;
   /* bottom:0%;*/
	top:0%;
    right:-5%;
    /*height: 100%;*/
    /*width:13%;*/
    transform:rotate(40deg);
	width:13%;
}

.p-qizetitle-absolute-bottom-rigth img{
  width:100%;
}


.l-qizu-question{
    position: absolute;
	top:16%;
    /*top:16.5%;*/
    left:0%;
    padding:3% 6% 1% 6%;
	/*background-color: #B3EDD2;*/
}

.l-qizu-question p /*クイズ問題文*/{
    text-align: left;
	line-height: 2em;
}

.p-qmilkchar-container{
	width: 20%;
	margin-left: 0;
}

.p-qmilkchar-container img{
	width: 100%;
}


.l-qize-btn-container{
position: absolute;
	
top:46%;
left:50%;
	
transform:translateX(-50%);

width:90%;

display: flex;

justify-content:space-around;
  
}

.l-qize-btn-container .e-f-item{
	
position:relative;

width: 44%;
	
}
/*文字藤松追記*/
.p-fontsize14/*タイトル*/{
	font-size: calc(1em*1.3);
	color: #ffa5c8;/*#FFA5B7#fa89a0#F499E0*/
	}
.p-fontlarge2 {
	font-size: calc(1em*1.38);
	
}
.p-fontlarge1-26{
	font-size: calc(1em*1.5);
}
.p-quiz-q-font18{
	margin: 0;
	/*,.p-fontsize20font-size: calc(1em*1.2);
	font-weight: bold;*/
}
.p-fontsize18{
	font-size: calc(1em*1.4);
}

/*.p-fontlarge4-17 →1177へ{
	
}*/

.e-q-hantei-img-css{
	display: none;

	position: absolute;
	top:50%;
	left:0%;
	transform: translateY(-50%);
	z-index: 1;
	width: 100%;
	border-radius: 50%;
	border: solid 6px #E60012;
	
}
	
.e-q-hantei-img{

	display: none;

	position: absolute;
	top:50%;
	left:0%;
	transform: translateY(-50%);
	z-index: 1;

}



.q-fadeUp{
	display: block;
	
	/* fadeUp */
animation-name: fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes nonefadeUpAnime{
  0% {
    opacity: 0;
	/*transform: translateX(0%);*/
	transform: translateY(0%);
  }

  36% {
    opacity: 1;
	transform: translateX(0%);
	transform: translateY(-50%);
  }
	38% {
	opacity: 1;
	ransform: translateX(10%);
	transform: translateY(-50%);
  }
	40% {
	opacity: 1;
	ransform: translateX(-10%);
	transform: translateY(-50%);
  }
	42% {
    opacity: 1;
	ransform: translateX(0%);
	transform: translateY(-50%);
  }
	
	100% {
	opacity: 1;
	ransform: translateX(0%);
	transform: translateY(-50%);
	   /*transform: translateY(-50%);*/
  }
	
}


@keyframes fadeUpAnime{
  0% {
    opacity: 0;
	/*transform: translateX(0%);*/
	transform: translateY(0%);
  }

  36% {
    opacity: 1;
	/*transform: translateX(0%);*/
	transform: translateY(-80%);
  }
	45% {
	opacity: 1;
	/*transform: translateX(-50%);*/
	transform: translateY(-40%);
  }
	50% {
	opacity: 1;
	/*transform: translateX(0%);*/
	transform: translateY(-60%);
  }
	51% {
    opacity: 1;
	/*transform: translateX(0%);*/
	transform: translateY(-50%);
  }
	
	100% {
	opacity: 1;
	/*transform: translateX(0%);*/
	transform: translateY(-50%);
	   /*transform: translateY(-50%);*/
  }
	
}

.answer/*藤松追記*/ {
	letter-spacing: -0.15em;
	font-size: 0.88em;
	/*white-space: nowrap;*/
}

.e-quiz-btn {

display: inline-block;

width: 100%;
padding: 18% 4%;/*5→4%に変更*/
margin: 0 auto;
  text-decoration: none;
  background: #FCF4A9;/*ボタン色#FFFF8C*/

    border:solid 0.1em #FFD914 ;

  box-shadow:0.3em 0.3em #99581D;
  border-radius: 26px;
	line-height: 3em;/*藤松追記*/
  cursor: pointer;
}

.e-quiz-btn:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(3px);
  transform: translateY(3px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}


.btn-square:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(3px);
  transform: translateY(3px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}


.l-qizu-answer{
    position: absolute;
    top:19%;
    left:50%;
    transform:translateX(-50%);
   width:90%;

}




.e-q-a-radiusbox{

margin:0 auto;
width:100%;
padding: 0% 0% 0% 0%;
background-color: #FFFF8C;
border-radius: 50px;

}

.e-q-a-radiusbox p{
margin: 0% 0%;
padding: 1.8% 0% 0% 0%;

}

.parent-e-qize-comment-adjustbox{
	position: relative;
	width:100%;
	height: auto;


}

.p-adjustbox::before{
	content:"";
	display: block;
	padding-top: 72%;

}


.e-qize-comment-box{

position: absolute;
	top:0;
	left:50%;
	transform: translateX(-50%);
	width: 94%;
	height:97%;/*100→97*/

margin:0 auto;
padding: 0 2% 3%;
background-color: #FFFDF3;
border:solid 2px #FFD914 ;
border-top: none;

border-bottom-left-radius: 20px;
border-bottom-right-radius:20px;


}


.e-qize-comment-box p/*p-fontlarge4-17のこと*/{
	/*margin: 5% 0 2%;
	padding-bottom: 1%;*/
	text-align: left;
	
	/*ここから藤松追記*/
	line-height: 1.8em;
	font-size: 1em;
	margin: 0.5em 0 0;	
}


/*footer*/


#endsection{
	position: relative;
	/*background-color: #92E8BB;*/
	/*margin-top:20%;*/
	/*margin: 10% 0%;*/
}


.e-gogchp{
	
/*text-align: center;	*/
    margin: 20% auto 10%;
    /*margin: 0% 5% 0% 5%;*/
	padding-right: 7%;
	width: 86%;
	max-width: 700px;
}


.e-gogchp:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(3px);
  transform: translateY(3px);/*下に動く*/
}


.e-gogchp img{
	/*display: inline-block;*/
	width: 100%;
    height:auto;
	vertical-align: bottom;
}


.e-goprevpage{
	position: absolute;	
	top:5%;
	left: 3%;
	padding: 0%;
	width: 34%;
	max-width: 200px;

}

.e-goprevpage:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(3px);
  transform: translateY(3px);/*下に動く*/
}

.e-goprevpage img{
	 width: 100%;
	/*height:auto;*/
	/*vertical-align: bottom;*/
}


.go_fairtrade_items {
	width: 25%;
	max-width: 150px;
	margin-left: auto;
	margin-right: 5%;

}

.go_fairtrade_items:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(3px);
  transform: translateY(3px);/*下に動く*/
	opacity: 0.5;
}/*
.go_fairtrade_items img{
	padding-top: -50%;
}*/

/*go to top*/


#p-page-top{
position: fixed;
	/*position: absolute;*/
	right:10px;
	/*left:0px;*/
	bottom:22px;
	z-index: 10;
	width: 11.0%;
	max-width: 60px;
	max-height: 60px;
}

#p-page-top:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(3px);
  transform: translateY(3px);/*下に動く*/
}

#p-page-top img{
	width: 100%;

}

.cr {
	display: block;
	margin-top: 10%;
}

/*【文字コントロール】*/

/*言葉区切り指定*/
.break {
	/*display: inline-block;*/
	white-space: nowrap;/*chrome128~textbaseのつまり防止のため　24/09/09　*/
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/*safariだけ指定 最新のsafari用*/
_::-webkit-full-page-media, _:future, :root .break {
	white-space: nowrap;
}

/*// 古いsafari用*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, .break {
	white-space: nowrap;
	}
}

/*safariここまで*/


/*フリガナ*/

ruby[data-ruby] {
	position: relative;
	white-space: nowrap;
		
}

ruby[data-ruby]::before{
    content: attr(data-ruby);
    position: absolute;
    line-height: 100%;
    text-align: center;
    left: -2em/*-3em*/;
    right: -2em/*-3em*/;
    transform-origin: bottom center;
    /* ルビの文字サイズを親文字に対する比率で指定 */
    transform: scale(0.45) rotate(0.05deg);/*rotateはシャギ*/
    /* 100%を越える部分が親文字とルビとのスペースになる。単位は親文字に対する比率 */
    bottom: 103%;/*もともと105％*/
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
     white-space: nowrap; /*ルビを段落ちさせないように*/
	
}

/*safari用 ルビの縦配置*/
_::-webkit-full-page-media, _:future, :root ruby[data-ruby]::before{
    
    /* 100%を越える部分が親文字とルビとのスペースになる。単位は親文字に対する比率 */
    bottom: 90%;/*もともと105％*/
	white-space: nowrap; /*ルビを段落ちさせないように*/
	
}
/*
ruby {
	
}*/


/*文字シャギ防止
transform: rotate(0.05deg);*/


.xmi ruby[data-ruby]::before {
	bottom: 89%;
}

ruby[data-ruby] rt
{
    display: none;
}



/*br改行クラス*/
.pc-hid, .pc-hid375, .pc-hid421, .pc-hid600, .pc-hid668, .pc-hid843, .ten, .pc-hid250108 {
	display: none;
}

.pc-nohid, .pic-nohid700 {
	display: block;
}

/*spレイアウトここまで*/

@media (max-width: 380px) and (min-width: 375px)/*380px以下375px以上*/{
	.pc-hid375{
		display: block;
	}
}

@media (max-width: 380px){
	.pc-hid250108 {
		display: block;
	}	
}

@media (max-width: 767px) and (min-width: 500px)/*785px以下500px以上*/{
	
body {
		font-size: 18px; 
}
	
/*07れきし*/
	
#sec07 {
	margin: 0 4%;
	padding: 3% 2% 10%;
}
	
.history h2 {
	font-size: 1.8em;
}

	
.attain-box {
	flex-basis: 78%;
	font-size: 0.9em;
	}
	
	
}

@media (max-width: 767px) and (min-width: 600px)/*767px以下600px以上*/{
.pigeon-box p  {
	font-size: 1.1em;
	width: 70vw;
	line-height: 3em;
	margin: 1em auto;
}
	.exchange p {
		line-height: 2em;
		font-size: 1.1em;

}
	
	.life-p {
		width: 70vw;
		min-height: 120px;
	}
	
	.life-p p {
		display: inline-block;
		
		padding: 5% 8% 5% 10%;
		line-height: 2em;
		max-width: 60vw;
		
	}
	
	.banana-p {
		padding: 0;
	}	

.indent2 {
	text-align: center;
	flex-basis: 68%;
}
p.indent3 {
	text-align: right;
	flex-basis: 65%;
	
}	

	.pc-hid600 {
		display: block;
	}
	
}

/*sp f*/


@media (max-width: 350px){
	.cho {
	transform: translate(0,75%);
}	
	.cho img {
		width: 100%;
	}
}

	

@media (max-width: 374px){
	body {
		font-size: 14px;
	}
}

@media (min-width: 421px) {
	.pc-hid421 {
		display: block;
	}
}
@media (min-width: 668px) {
	.pc-hid668 {
		display: block;
	}
	
	.pc-nohid700 {
	display: none;
}
	
.indent-r {
	display: inline;
	line-height: 2.6em;
	
}
	
}


@media (min-width: 731px) {
	.pink1, .beige1 {
		display: none;
	}
.pink_img {
	
	width: 65%;
}

.beige_img {
	width: 60%; 
}
}
.pink2img, .beige2img {
		width: 100%;
	}

/*pc*/

@media (min-width:768px) {
    /*　for PC and for iPad 画面幅が768px以上の場合のスタイルを記述*/
/*n*/
.l-section01quiz-box{
		padding: 0% 5%;
	}

/*ここからf*/


	body {
		max-width: 1040px;
		font-size: 20px; 
	}

/*sec01*/
	#sec01 {
		text-align: center;
	}
	.s01-box2 {
		
		text-align: center;
		
			}	
	.s01-box2 img {
		width: 100%;
		max-width: 780px;
		
	}
	
/*sec02*/

#sec02 {
	padding: 3% 3% 12%;
}
	
	
.s02-box1 {
	margin: 13% 0 20%;
	padding: 3% 0;
	background: #F9F5E3;
	/*#F4ECC5 #FFFDF3*/
}
	
	
.p2p {
	max-width: 630px;
}


	
	.exchange {
		max-width: 690px;
		margin: -4% auto 0;
		padding: 3% 0;
		
	}
	
	.exchange p {
		line-height: 2.5em;
		font-size: 1.1em;
		
	}
	
.pigeon-box {
	/*background-image:url("../img/pigeon@2x.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	padding: 25% 4%;
	margin: 2% auto;*/
	max-width: 750px;
}

	/*03貧困*/
	
.pigeon-box p {
	line-height: 3em;
	margin: 1em auto;
	max-width: 590px;
	font-size: 1.1em;
	
	}

.poor-h2 {
	width: 660px;
	margin: 8% auto 11%;
}
.poor-h2 img{
	width: 630px;
	
}

.poor-title {
	transform: translate(-50%,-63%);
}
	
	.poor-box2 {
	margin: 0 auto 10%;
	padding: 4% 0 1%;
	line-height: 2.8em;
		/*font-weight: bold;*/
		font-size: 1.2em;
		max-width: 750px;
}

/*04持続可能な*/	

.life-p {
		min-height: 160px;
	margin-left: 5%;
	}
	
.life-p2 {
	margin-right: 5%;
	margin-left: auto;
}

	
.life-p p {
	padding: 8% 8% 6% 9%;
	font-size: 0.98em;
	line-height:2.2em;
	
	}	

.dots3 {
	width: 25%;
	}
	
	.ls005 {
		letter-spacing: -0.1em;
	}
	
	/*05ポイント*/
#sec05 {
		padding: 5% 0;
	}

.point-logo {
		margin: 0 auto;
		min-width: 580px;
	}
	
.point-logo img {
		max-width: 590px;
	}
	
.point-logo p {
		font-size: 2em;
		letter-spacing: -0.1em;
		margin: 0 0 0 -2%;
		transform: rotate(3deg);
	}
.point {
	padding: 0 3% 5%;
}
	
/*06パートナーシップ*/
	
.partner {
	max-width: 85%;
	margin: 8% auto;
	border-radius:2em;
	padding: 0.5em 6% 3em;
}
	
.partner:first-of-type {
		margin-bottom: 18%;
	}
	
.partner:last-of-type {
	padding: 0.5em 3% 3em;
	}


.tour1 {
	margin-top: 8%;
}

	
.tour-box {
	font-size: 0.98em;
	line-height:2.6em;
	}
	
	
.xmas-box {
	max-width: 713px;
	margin: 1em auto;
	font-size: 0.98em;
	line-height:2.6em;
	}
	
.xmas-bg {
	
	background-size: contain;
	background-position: top ;
	background-repeat: repeat;
}

	.xmi p {
		background: #FCE7E7;
		display: inline-block;
	}
	
	/*07れきし*/
	
#sec07 {
	margin: 0 5%;
	
}

#sec07 * p {
	font-size: 0.99em;
	line-height:2.2em;
	
}

	.history {
		max-width: 800px;
		margin: 0 auto;
	}
	
.history h2 {
	font-size: 2em;
	
}

.history-p {
	background: #DBFCE6;
	margin: 2%;
	padding: 0.5em;
	
	
}

.history-box {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: 10% auto 15%;
	max-width: 800px;
	
}
.ml3 {
	justify-content: space-evenly;
}

.his-img {
	flex-basis: 35%;
	
}
/*
.his-img img {
	max-width: 100%;
}*/

.his-img p {
	margin: 0;
}

.item-p {
	flex-basis: 90%;
	
	
}

.history-p p, .item-p p {
	text-align: justify;
	
}

.attain-box {
	flex-basis: 80%;
	font-size: 0.94em;
	
	background:rgba(252,251,251,0.35);
	margin: 2%;
}

.attain-box h4 {
	font-size: 0.8em;
}

.year {
	letter-spacing: -0.25em;
}
.dh3{
	
}

.start {
	border: 1px solid #707070;
	border-radius: 1px;
	background: #FFF;
	flex-basis: 25%;
	font-size: 0.62em;
	padding: 0.3em ;
	margin-bottom: 1.5em;
	margin-right: -50%;
	align-self: center;
	display: inline-block;

}

.hb-h3 {
	line-height: 2.2em;
	flex-basis: 52%;
	margin: 0;
	font-size: 1.5em;
}


.model {
	flex-basis: 14%;
	align-self: center;
}

.f35 {/*れきし画像サイズ調整*/
	flex-basis: 35%;
}

.indent-r {
	display: inline;
	padding-left: 0;
	line-height: 2.6em;
	margin-left: -0.5em;
}

.banana-p {
	flex-basis: 55%;
	margin:0 auto;
	
	
}

.banana-img {
	flex-basis: 18%;
	margin: 0.5em auto 0;
}


.shrimp-img {
	flex-basis: 20%;
	margin: 0.5em auto;
}

.shrimp-p {
	flex-basis: 65%;
	margin-left: auto;
	
}

p.t-center {
	
	}


.indent-1{
	
	padding-left: 0;
	text-indent: -1em;
	line-height: 2.6em;
	letter-spacing: -0.1em;
}

.indent-c{
	display: inline;
	padding: 0;
}

.indent1 {
	
}

.indent2 {
	text-align: center;
	
}

p.indent3 {
	text-align: right;	
}

.cf-ip {
	padding: 0 1em;
}
.copee {
	padding-top: 0.8em;
}

.cacao-p {
	display: inline-block;
	flex-basis: 65%;
	text-align: left;
	margin-top: 0;
}

.cacao-ip {
		flex-basis: 91%;
	}

.chocla {
		letter-spacing: -0.1em;
	}

div.choch-box {
	position: relative;
}

.cho {
	position: absolute;
	width: 26%;
	bottom: 0%;
	transform: translate(50%,70%);
	right: 0;
	margin: 0;
}

.cho img {
	max-width: 88px;
}		

	


.summary {
	background: #FCF2E5;
	margin: 15% 5%;
	padding: 3% 2%;
}
.sh2 {
	margin: 1em auto;
	font-size: 1.1em;
	text-indent: 0;
}

.sh2-line2 {
	display: inline;
	
	
}

.summary p {
	text-align: justify;
	margin: 0 auto;
	display: inline-block;
	/*font-weight: bold;*/
}

.n-btn {
	
	width: 50%;
	max-width: 350px;
	margin: 10% auto;
}

.btn-sticky2 {
	/*display: block;
	background: #9EEEA1;
	border-radius: 2.3em;
	border: 4px solid rgba(247,227,227,1.00);
	box-shadow: 2px 2px 1px rgba(220,196,184,1.00);
	padding: 8% 1em 1em;
	text-decoration: none;
	font-size: 0.8em;
	line-height: 1.9em;
	font-weight: bold;
	color: rgba(70,154,102,1.00);
	*/
}

	/*08 cafe*/
	
.cafe-p {
	text-align: center;
	font-size: 0.9em;
	line-height: 1.8em;
}

	/*09クイズ*/
/*nクイズ*/


.p-quiz-q-font18/*問題分、回答の答え*/, .p-fontsize20/*答えのボタン*/, p.p-fontlarge4-17 {
	
	font-size: 1.2em;/* calc(1em*1.2)*/
	}
	
.p-fontsize18/*答え*/{
	
}

	/*.p-fontsize14タイトル{
		font-size: 1.3em;
	}*/
	/*p-fontlarge4-17　回答の説明
	*/

/*n-end*/
	.q-logo/*クイズロゴ*/ {
		
		padding: 0 1.7%;
		margin: 0 auto;
	}
	.e-qize-comment-box{
		height:100%;
	}

	.e-qize-comment-box p {
		margin-top: 2em;
		line-height: 2em;
	}

.l-qizu {
	padding-bottom: 15%;
    margin-bottom:10%;/*藤松変更*/

}
	
/*footer*/
	

.e-goprevpage{
	top:2%;
	left: 3%;
	
}


.go_fairtrade_items {
	margin-right: 10%;
	width: 180px;
	max-width: 18%;
	

}
	

	

/*br改行クラス*/
.pc-hid {
	display: block;
}

.pc-nohid {
		display: none;
	}	


}/*768-end*/	

@media(max-width: 812px) and (min-width: 768px)/*768px以上812px以下*/{
	
.ten {
	display: inline-block;
}
}

@media(min-width: 843px)
{
	.summary p {
		
	}
	.pc-hid843 {
		display: block;
	}
}
/*メディアクエリend*/