@charset "utf-8";
/* CSS Document style02.css*/

html, *, *::before, *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /*border-width: 0;*/
  /*min-width: 0;*/
}


html {

    /* 3. Remove gray overlay on links for iOS.*/
    /*-webkit-tap-highlight-color: transparent;*/ 
    
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    
    font-size: 10px; /* 1rem->10px  */
    background-color: #F2FFF8;
}



    
:root {
  --color: #5B5A5A;
}
    
body {
    
/*background-color: #F2FFF8;*/
background-color:#D1FBE5;
max-width: 1040px;
margin: 0 auto;
text-align:center;

font-family: 'Noto Sans JP', sans-serif;	
font-size: 1.8rem; /* -> 18px; */
line-height: 2.0;/* 1.9 or 1.5; */
/*letter-spacing: 0.2em;*/

color: var(--color);

}

/*
max-width
2.468789825916955*/

/* Vertical rhythm */
/* ============================================ */

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}


/*p{
    margin: 0;
}*/

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

/* Lists (enumeration) */
/* ============================================ */
/*ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}*/


/* ============================================ */
/*for carbon neutral*/
/* ============================================ */
.hd-logo-shadow{
    filter: drop-shadow(2px 2px 3px #77b377);   
}
.cbn-preamble-wrap{
    background: url("../images_cbn/cloudA-01.svg") no-repeat;
    background-size: 30% auto;
    background-position: top left -5%;
    animation-name:anime-cloud01;
    animation-duration:60s;
    animation-timing-function:cubic-bezier(0.37, 0, 0.63, 1);
    animation-iteration-count: infinite;
}

/* 背景画像　雲が流れる */
@keyframes anime-cloud01{
  0% {
	background-position: top left -5%;
  }
100% {
      background-position: top left 150%;
  }
}

.cbn-cloud02-wrap{
    overflow: hidden;
}


.cbn-cloud02{
width: 100%;
height: auto;
transform: translateX(-20%);

animation-name:anime-cloud02;
animation-duration:90s;
animation-delay: 5s;
animation-iteration-count: infinite;
}

.cbn-cloud02 img{
    width: 20%;
    height: auto;
    display: block;
}


@keyframes anime-cloud02{
  0% {
	transform: translateX(-20%);
  }
    
    
  100% {
      transform: translateX(100%);
  }
    
}

/************************/
.cbn-cloud01{
    background: url("../images_cbn/cloudA-01.svg") no-repeat;
    background-size: 36% auto;
   background-position: top left;
    animation-name:anime-cloud-a;
	animation-duration:8s;
	animation-fill-mode:forwards;
}

/* 背景画像　雲が流れる */
@keyframes anime-cloud-a{
  from {
	background-position: top left -5%;
  }

  to {
      background-position: top left 200%;
  }
}

/* 雲が流れる */
.cbn-cloud{
	animation-name:anime-cloud;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes anime-cloud{
  from {
	transform: translateX(0);
  }

  to {
      transform: translateX(375);
  }
}


.cbn-p-preamble-content{
    margin:0 12% 0 12%;
}

.cbn-p-preamble-content p{
    text-align:left;
}


@media (min-width:640px){
.cbn-p-preamble-content{
    margin-left: 12%;
    margin-right: 12%;
}
}

@media (min-width:1024px) {

.cbn-p-preamble-content{
    margin-left: 20%;/*10%*/
    margin-right: 20%;
}
}

    
/* ============================================ */
.cbn-e-topsdgs-box{
    background-color: #ffffff;
    padding: 12.63% 0 7.81496%;
}

.cbn-e-topsdgs-box img{
    width: 80%; /*76%*/
}

.cbn-e-top-box{
    position: relative;
}

.cbn-e-top-box img{
    display: block;
}

.cbn-e-top-item01{
    position: absolute;
    top: 0;
    left: 10.589253%;
    width: 49.2716%;
    height: auto;
}

.cbn-e-top-item02{
    position: absolute;
    top : 0;
    right: 4.278586%;
    width: 30.00712%
}

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

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

/* メインメニュー */

/*.cbn-mainmenu-container{
}*/

.cbn-e-mainmenu01 figure{
   width: 82%; 
	height: auto;
    max-width: 634px;
    margin-left:6%;
    
}

.cbn-e-mainmenu02 figure{
    width: 63.24%;
	height: auto;
	max-width: 449px;
    margin-left:auto;
    margin-right: 10%;
}

/* positionで重なりを調整 03*/
.cbn-e-mainmenu03-box{
    position:relative;
    width:100%;
    hight: auto;
}

.cbn-e-mainmenu03-box >figure:not(.cbn-mm-gcbk){
    max-width: 777px;
}

  .cbn-e-mainmenu03-img-adjustbox::before{
    content:"";
    width: 100%;
    padding-top: 74%;
  }

.cbn-e-mainmenu03-bgtree{
    position: absolute;
    /*top: 0;*/
    bottom: 7.18395%;
    left: 50%;
    transform: translateX(-50%);
    width:100%;
}

.cbn-e-mainmenu03{
    /*background-color: #7B85F3;*/
    position: absolute;
    bottom: 7.18395%;
    /*bottom: 15.4514%;*/
    left: 50%;
    transform: translateX(-50%);
    width:100%;
    height: auto;
    max-width: 777px;
    }

.cbn-e-mainmenu-img img:nth-child(2){
    display:none;
  
}
.cbn-e-mainmenu-img:hover img:nth-child(1){
    display:none;
  
}
.cbn-e-mainmenu-img:hover img:nth-child(2){
   display:block;
  
}

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



/**********背景として画像を表示して、hoverで入れ替え*/
/* positionで位置を調整 01*/
.cbn-e-mainmenu01-adjustbox{
    margin: 0 auto;
    position: relative;
    width: 100%;
    max-width: 700px;
	height: auto;
    /*cursor: pointer;*/
  background-color: #FD898B;
}

.cbn-e-mainmenu01-img-adjustbox::before{
    content:"";
    display: block;
    padding-top: 77.85%;
    width: 90.07%;
	height: auto;
    }

.cbn-e-mainmenu01-adjustbox >figure{
    position: absolute;
	top: 0;
	left: 0;
    width: 90.07%;
   
	height: 1000px;
	background-image:url("../images_cbn/menu-cbn-03.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

.cbn-e-mainmenu01-adjustbox >figure:hover{
    background-image:url("../images_cbn/menu-cbn-03-hv.svg");
    background-size: contain;
	background-repeat: no-repeat;
}

/**********　end 背景として画像を表示、hoverで入れ替え*/

/* positionで位置を調整 02*/
.cbn-e-mainmenu02-adjustbox{
    position: relative;
	/*width:60.75%;*/
    width:100%;
    max-width: 700px;
	height: auto;
    margin: 0 auto;
}


.cbn-e-mainmenu02-img-adjustbox::before{
    content:"";
    display: block;
	padding-top: 55.02%;
    width: 63.24%;
    height: auto;
    }

.cbn-e-mainmenu02-adjustbox >figure{
    position: absolute;
    width: 63.24%;
	height: 1000px;
	top: 0;
	left: 27.19589%;
    background-image:url("../images_cbn/menu-quiz-07.svg");
	background-size: contain;
    background-repeat: no-repeat;
}

.cbn-e-mainmenu02-adjustbox >figure:hover{
    background-image:url("../images_cbn/menu-quiz-07-hv.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

/* 拡大 */
.cbn-zoom{
	animation-name:anime-zoom;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes anime-zoom{
  from {
	transform: scale(0.6);
  }

  to {
      transform: scale(1);
  }
}





/***************************************************************************/
/*article what's cbn*/
.cbn-whatscbn p{
    display: inline-block;
     text-align: left;
     margin: 0 12% 0;
}

/* section01 warming*/
.cbn-l-warming{
    background-color: #444459;
     color: #FFFFFF;
}

.cbn-l-wam-read-container{
    position: relative;
}

.cbn-l-wam-read-container img{
    display: block;
}

.nonecbn-l-wam-read-img-adjustbox::before{
    content:"";
    display: block;
	padding-top: 120%;
    width: 100%;
    height: auto;
}

.cbn-e-wam-title{
    width: 83.96573%;
    height: auto;
    max-width: 652px;
    padding-top: 2.2578%;
    margin: 0 auto;
}

.cbn-e-wam-hill{
    position:absolute;
    width:100%;
    height: auto;
    top: 0;
    left: 0;
}


.cbn-wam-read-tree{
    width: 31.898%;
    padding-right: 8%;
    margin: 0 0 0 auto;
}


.grad-whatscbn
{
background-color: #444459;
background-image: linear-gradient(0deg, #444459 0%, #81e681 93%);
}

.cbn-e-wam-part01{
    background: url("../images_cbn/wam-part01bk-05.svg") no-repeat;
     background-size: 100% auto;
}

.cbn-e-wam-part01 img{
    display: block;
    margin: 0 auto;
}


.cbn-e-wam-part02{
    background: url("../images_cbn/wam-part02bk-01.svg") no-repeat;
    background-size: 100% auto;
    background-color:#4F4F5E;
}

.wam-pt02-img01{
    width:100%;
    margin: 0 auto;
    padding-left: 23%;
    padding-right: 7%;
}

.wam-pt02-img01 img{
    width:100%;
    height: auto;
    max-width: 577px; 
}

.cbn-e-wam-part03{
     background-color:#6D6D85;
}

.wam-pt03-img01{
    width:100%;
    margin: 0 auto;
    padding-left: 5%;
    padding-right: 22%;
}

.wam-pt03-img01 img{
    width:100%;
    height: auto;
    max-width: 577px;
        
}

.wam-part03bk img{
    width: 100%;
    height: auto;
    background-color:#4F4F5E;
}


.cbn-e-wam-part04{
    background-color: #4F4F5E;
    
}

.cbn-e-wam-part05 {
    text-align: left;
    
}

.wam-part05-txt{
    width: 12em;
    margin: 0 1.5em;
}

.wam-part05-img01{
    width:100%;
    margin: 0 auto;
    padding-left: 44%; 
    padding-right: 10%;
}

.wam-part05-img01 img{
    width:100%;
    height: auto;
    max-width: 363px;
}

.wam-part05-bk{
    background-color: #4F4F5E;
}

.wam-part05-img02{
    width:100%;
    margin: 0 auto;
    padding-left: 32%;
    padding-right: 6%;
}

.wam-part05-img02 img{
    width:100%;
    height: auto;
    max-width: 486px;
        
}


.wam-part05-img03{
    width:100%;
    margin: 0 auto;
    padding-left: 14%;
    padding-right: 45%;
}

.wam-part05-img03 img{
    width:100%;
    height: auto;
    max-width: 320px;
        
}

.wam-part05-bk02{
    background-image:url("../images_cbn/wam-part05bk02-01.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% bottom;
    background-color: #4F4F5E;
}

.wam-typhoon-container{
    position: relative;
}

.wam-typhoon-container >p{
    position: absolute;
    top: 2em;
    left: 0;
}

.wam-part05-img04{
    width:100%;
    margin: 0 auto;
    padding-left: 29%;
    padding-right: 20%;
    
}

.wam-part05-img04 img{
    width:100%;
    height: auto;
    max-width: 400px;
        
}

.wam-bear-container{
    position: relative;
    background-color: #6D6D85;
}

@media (min-width:789px) {
    .wam-bear-container{
   background-color: #444459;
}
}


.wam-bear-container >p{
    position: absolute;
    top: 1.7em;
    left: center;
    transform: translateX(-50%);
    margin: 0;
    width: 80%;
    max-width: 18em;
}

@media (min-width:640px) {
  .wam-bear-container >p{
      top: 2.3em;
  }
  }


.wam-part06-img01{
    width: 100%;
    margin:  0 auto; 
}

.wam-part06-img01 img{
    width: 100%;
    height: auto;
    max-width: 789px;
}

.wam-part06-02-container{
    background-color: #6D6D85;
    
}

/**********************************/
/* cbn-l-whatscbn */

.e-whatscbn-part01{
    background-color: #FFFDF3; 
}

.whatscbn-part01-bk01{
    background-color: #6D6D85; 
}

p.whatscbn-part01-01-txt{
    font-weight: 700; 
    margin-bottom: 1.5em;
}

p.whatscbn-part01-02-txt{
    font-weight: 600; /*400 ⇒normal 700 ⇒bold*/
    padding: 1em;
    border: 3px var(--color) solid;
    border-radius: 30px;
}

.whatscbn-part01-bk02{
    background-color: #E6FAF7;
    
}

.e-whatscbn-part02{
    background-color: #E6FAF7;
    
}

.whatscbn-part02{
    background: url("../images_cbn/whatscbn-part02bk-02-rationone.svg") no-repeat;
    background-size:96% 100%;
    background-position: center;
}

.whatscbn-part02 p:last-of-type{
     max-width: 19em;
}

.whatscbn-part02-img01{
    width: 79%;
    margin:  0 auto;
}

.whatscbn-part02-img01 img{
    width: 100%;
    height: auto;
    max-width: 625px;
}

.whatscbn-part02-e01-img01{
    width: 3%;/* 3.0217% */
    height: auto;
    margin: 0 auto;
}

.whatscbn-part02-e01-img01 img{
    width: 100%;
    height: auto;
    max-width: 24px;
    margin: 0 auto;
    display: block;
}

.whatscbn-part02-e01 p:last-of-type{
    border: 3px var(--color) solid;
    border-radius: 18px;
    padding: 1em 2em 0.5em;
    background-color: #FBFBD1;
    
}

/***********************************/
/*quiz*/
/***********************************/

.cbn-quiz{
    background-color: #D1FBE5;
}


.cbn-l-quiz-title{

}

.cbn-quiz-title-bk{
    background: url("../images_cbn/quiz-titilebk-01.svg") no-repeat;
    background-position: center;
    background-size: contain;

}

.cbn-quiz-title-txt{
    color: #F562C4;
    font-weight:600;
    display: inline-block;
    padding: 3em 3em;
}

.cbn-quiz-title-img01{
    width: 100%;
    height: auto;
    padding-left: 6%;
    padding-right: 73%;
        
}

.cbn-quiz-title-img01 img{
    width: 100%;
    height: auto;
    max-width: 169px;
}

/******************************/
.l-section01quiz-box{
		padding: 0% 3.2%;
	}

.cbn-l-qizu-bk {
   background: url("../images_cbn/qbook112_02-rationone.svg") no-repeat;
    background-position: left 50% top;
	
	background-size:100% 100%;
    margin:3% 1.5% 2% 1.5%;
}


.l-qizu {
    position: relative;
	margin:3% 1.5% 2% 1.5%;
}


.cbn-l-qizu-title{
	position: relative;
	padding:1em 3%;
	
	
}

.cbn-l-qizu-title p{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	
}

.cbn-l-qizu-question {
	padding:0.5em 2em 0.2em;
	text-align: center;
}

.cbn-l-qizu-question p{
	text-align: left;
       
}

.cbn-l-qize-btn-container{
	width:90%;
    margin: 0 auto;

display: flex;
justify-content:space-around;
}


.cbn-l-qize-btn-container .cbn-e-quiz-f-item{
position:relative;
width: 44%;
}


.l-qizu-title{
    position: absolute;
    top: 2.5%;/*2.5%*/
    left:50%;
    transform:translateX(-50%);
    width:95%;
	padding:0%;

}

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


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



.l-qizu-title-grad{
	margin: 0% 0%;
	padding:2% 0%;
background-image: linear-gradient(to right, #ffff8c, #fffea6, #fffdc0, #fffdda, #fffdf3);
}

.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:12%;
    /*top:16.5%;*/
    left:0%;
    padding:3% 6% 1% 6%;
	/*background-color: #B3EDD2;*/
}

.l-qizu-question p {
    text-align: left;
}

/*クイズタイトルバー　「産直びん牛乳クイズ」*/
.p-qmilk-title{
	color:#ff00ff;

}

.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%;
}


.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:50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: 1;
    width:95%;
    height: auto;
    

}



.q-fadeUp{
	display: block;
    /*margin: 0 auto;*/
	/*background-color: aqua;*/
	/* 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: translateX(-50%) translateY(0%);
  }

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

.e-quiz-btn {
  display: inline-block;

  width: 100%;
  padding: 18% 5% 17%;/*18%*/
  margin: 0 auto;
  /*text-decoration: none;*/
  background: #FFFF8C;/*ボタン色*/

  border:solid 0.1em #FFD914 ;

  box-shadow:0.3em 0.3em #99581D;
  border-radius: 26px;
  cursor: pointer;
}

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


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


.cbn-l-qizu-answer{
     width:90%;
    margin:0 auto;
    /*position: absolute;
    top:17%;
    left:50%;
    transform:translateX(-50%);
  
*/
}

.cbn-e-q-a-radiusbox{
margin:0 auto;
width:100%;
padding: 0% 0% 0% 0%;
background-color: #FFFF8C;
border-radius: 50px;
}

.cbn-e-q-a-radiusbox p{
  margin: 0% 0%;
  padding: 1.8% 0% 0% 0%;
  color: #D94343;

}

.cbn-parent-e-qize-comment-bk{
    /*position: relative;*/
    margin: 0 auto;
	width:94%;
	height: auto;
background: url("../images_cbn/qizu-answer-cmt-frame-03-rationone.svg") no-repeat;
    background-size:100% 100%;
    background-position: top left 50%;
    /*top:0;
    left:50%;
    transform: translateX(-50%);*/

}



.cbn-e-qize-comment{
  margin: 0 auto;
  width: 94%;
  height:100%;

  background-color: #FFFDF3;
  border:solid 2px #FFD914 ;
  border-top: none;

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

.cbn-e-qize-comment p{
    /*margin: 1% 1%;*/
    padding: 1.3em 1em 3em;
	text-align: left;
}


/*******************************/
/* old */
/*******************************/

.l-qizu-answer{
    position: absolute;
    top:17%;
    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:100%;

margin:0 auto;
padding: 2% 2% 3% 2%;
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{
	margin: 1% 1%;
	text-align: left;
}

/* end old*/
/***********************************/
/*quiz*/
/***********************************/


/***********************************/
/*gcaction*/
/***********************************/

.cbn-gcaction{
    background-color: #58CC79;
}

/*.cbn-l-act-title{
    
}*/

.act-title-bk{
    width: 100%;
    height: auto;
    
}

.act-title-bk img{
    background-color: #D1FBE5;
}

.act-title-txt{
    width: 60%;/*49%*/
    height: auto;
    margin: 0 auto;
    
}

.act-title-txt img{
    max-width: 420px;
        /* 390px 363/172.3249=2.106486062 */
}

.cbn-l-act-part{
    background-color: #EEFCE6;
    border-radius: 70px;
    width: 94%;
    margin: 0 auto;
    max-width: 920px;/*658*/
    
}


.act-section-title p{
    color: #A65D5D;
    padding-top: 3em;
    padding-bottom: 1em;
}

.act-p01-img01{
    /*background-color:#F47B7D;*/
    width: 64%;
    margin: 0 auto;
}

.act-p01-maintext{
    display: inline-block;
    /*margin: 0 auto;*/
  text-align: center;
}

.act-p01-maintext >p{
    text-align: left;
    max-width: 32em;
    margin: 0 1.5em; /* 0.8 */
}

/************************************/
/*ゴミを減らす！（エコノート）*/
/************************************/

.cbn-l-act-part:nth-of-type(5){
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}


.cbn-l-act-part:nth-of-type(6){
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: #F7EEDE;
}

.cbn-l-act-part:nth-of-type(6) .act-section-title{
    background:url("../images_cbn/act-p04-01-titlebk-u-01-rationone.svg") no-repeat;
    background-size: 100% 100%;
    /*display: inline-block;*/
    background-color: #EEFCE6;
    display: grid;
    place-items: center;
    
}

.cbn-l-act-part:nth-of-type(6) .act-section-title p{
    color:#ffffff;
    padding-top: 1em;
    padding-bottom: 0;
/*    padding-bottom: 0.5em;*/
    padding-left: 1.4em;
    padding-right: 1.4em;
    max-width:  21em;
    display:block;
    margin:0 auto;
    
}

@media (min-width:446px) {
  .cbn-l-act-part:nth-of-type(6) .act-section-title p{
    padding-top: 2.5em;
    padding-bottom: 2.5em;
    }
}

@media (min-width:768px) {
  .cbn-l-act-part:nth-of-type(6) .act-section-title p{
    padding-top: 4em;
    padding-bottom: 4em;
    }
}

.cbn-l-act-part:nth-of-type(6) .act-p01-maintext p{
    color:#73481D; 
}

/************************************/
/* end ゴミを減らす！（エコノート）*/
/************************************/
.act-e-linkbtn {
  display: inline-block;
  background-color:#58CC79;
  border-radius: 80px;
  width: 86%;
  padding: 1em 0;
  color: #ffffff;
  text-decoration: none;
}

.act-e-linkbtn p::after{
    display: inline-block;

    content:"";
    background: url("../images_cbn/act-link-next-01.svg") no-repeat;
    background-size: contain;
    /*background-color: #ED0B0F;*/
    transform: translateY(22%) translateX(50%);
    width: 1.2em;
    height: 1.2em;
}

.act-p01-img02{
    position: relative;
    width: 78%;/*78% 48 83.427659%*/
    height: auto;/*124.8%*/
    max-width: 600px; /*385 620px 619*/
    margin: 0 auto;
    /* 390px 363/172.3249=2.106486062 */
    /*background-color:#6E6E6E;*/ 
    
}

.act-p01-img02::before{
    content:"";
    display: block;
   /* width: 48%;*/
    padding-top:149.617879%; /*124.8%*/
}

.act-p01-img02 img:nth-child(1){
    border-radius: 52px;
    box-shadow: 3px 3px 9px -3px #274936;
    position: absolute;
    top:0%;
    left:0%;
    width: 62.26%;
}

.act-p01-img02 img:nth-child(2){
    border-radius: 52px;
    box-shadow: 0px 0px 12px -3px #274936;
    position: absolute;
    bottom:0;
    right:0;
    /*top:26.6823%;*//* 37.478%*/
    /*left:43.694%;*/
     width: 56.3%;
}

/*　4R　*/
.act-p03-4r-top-l{
    width:80%;/*76%*/
    max-width: 580px;
    margin: 0 auto 2em;
    
}

.act-p03-4r-top-e{
    /*background-color: #787878;*/
    margin-bottom:1em;
    /*border: #3337E1 solid 1px;*/
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.5em;
    row-gap: 3em;
}

.act-4r-item-img{
    /*background-color: #525151;*/
    width:96%;
    max-width: 235px;
    margin: 0 auto;
    
}


.act-4r-item-img img{
    
}

.act-4r-item-txt {
    margin-top:0.4em;
    text-align: center;

}


.act-4r-item-txt p{
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 500;
}

.act-p03-4r-top-end-txt p{
  font-family: 'M PLUS Rounded 1c', sans-serif;
/*font-weight: 500;p-fontsize18 p-fontsize-def*/
  font-weight: 500;
}


/* エコノート　*//* p-bold */
.act-p04-01-bk{
background-color:#73481D;
}


.act-p04-01-img{
    width:68%;/* 352.5 260 73%*/
    height:auto;
    margin: 0 auto;
}
/* end エコノート　*/

.act-p-end-txt-container{
    display: grid;
    place-items: center;
    margin: 0 auto;
    width: 94%;
    /*background-color:#EDB3B4;*/
}
.act-p-end-txt-container p{
    font-weight: 700;
    color: #35B057;
    /*margin: 0 auto;*/
    background: url("../images_cbn/end-bk-02.svg") no-repeat;
    background-size:contain;
    background-position:center;
    padding: 7em 3em 7em;
}

/*
**************************************
関連リンク
**************************************
*/

.cbn-l-relatedlinks{
    background-color: #58CC79;
}

.rlinks-bk-01{
    width: 93%;height: auto;
    margin:0 0 0 auto;
	/*background-color: #493CF5;*/
    /*background-color: #EDB3B4; #D1FBE5*/
}

.rlinks-container{
	position: relative;
	width:100%;
	height: auto;
}
.rlinks-container::before{
	display: block;
	content: "";
	/*position: absolute;*/
	padding-top:106%; /*106 96% 92 88% 0.8817477333333333 153% 154.29573% */
	width: 100%;
    /*background-color: #EDB3B4;*/
	/*  background-color: #D1FBE5;*/
}

.rlinks-bk-02{
	position: absolute;
	width:100%;
	height: auto;
	bottom: -0.2em;
	right: 0;
}

  
 /* .rlinks-bk-02 img{}*/
  /*background-color: #D1FBE5;*/

.rlinks-banner-container{
    width:85%;
    max-width: 640px;
    height:auto;
    margin:0 auto;
	position: absolute;
	top:0;
	left: 50%;
	transform: translateX(-50%);
   
        /* 320px 674.07553984 363/172.3249=2.106486062 last-chid*/
}

/*.rlinks-banner-container figure:last-child{*/
.rlinks-banner-container figure:last-of-type{
    margin-bottom: 0;
}

.rlinks-banner-container figure{
    margin-bottom: 3.5em;
}

/*.rlinks-banner-container img:hover{
    opacity: .8;
}*/

/*
**************************************
注釈
**************************************
*/
.cbn-notes-asterisk {
  vertical-align: super; /*テキストを上付きに*/
  font-size: 0.7em; /*テキストを小さく*/
}

/*改行*/
.cbn-br{
    display: none;
}

@media (min-width:640px) {
  .cbn-br{
      display: inline;
    }
  .act-p-end-txt-container p{
    padding: 15em 4em 15em;
}

}

/* ============================================ */
/**/
    
/*.l-wrapper{}*/
/* background-color:#D1FBE5;*/
/*width: auto;*/
/*max-width:1040px;*/
/*  margin:0 auto;*/
/*	 margin:auto;*/

.p-fontsize-def{
font-size: 1.8rem; /* -> 18px; */
font-family: 'Noto Sans JP', sans-serif;}


.noe-base-font{
font-size: 1.8rem; /* -> 18px; */

line-height: 1.9;/* or 1.5; */
	/*letter-spacing: 0.2em;*/
font-family: 'Noto Sans JP', sans-serif;
}


/*デバック用*/
.e-hidden_box{
	display: none;
}

/*fontsize*/
.p-fontsize28{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 2.8rem; /* -> 24px; */
}


.p-fontsize24{
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 2.4rem; /* -> 24px; */
}


.p-fontsize22{
		font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 2.2rem; /* -> 22px; */
}

.p-fontsize20{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 2.1rem; /* -> 21px; */

}

.p-fontsize19{
  
	font-size: 1.9rem;


}


.p-fontsize18{
  font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.8rem;

}

.p-quiz-q-font18{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 1.8rem;

/*	font-size: 1.8rem;
	font-weight: bold;*/
    /*font-weight: 500;p-fontsize18 p-fontsize-def*/
}

.p-fontsize17{
 
	font-size: 1.7rem; /* -> 12px; */
}


.p-fontsize16{
 
	font-size: 1.6rem; /* -> 12px; */

}

.p-fontsize15{

  font-size: 1.5rem; /* -> 15px; */

}


.p-fontsize14{

  font-size: 1.4rem; /* -> 12px; */

}

.p-fontsize12{

	font-size: 1.2rem; /* -> 12px; */

}

.p-fontlarge1-27{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 2.7rem; /* -> 28px; */
}

.p-fontlarge1-26{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 2.6rem; /* -> 24px; */
}

.p-fontlarge1{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 2.4rem; /* -> 24px; */
}

.p-fontlarge2{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 2.1rem; /* ->2.0rem; 24px; */

}



.p-fontlarge3{
	font-size: 1.8rem;


}

.p-fontlarge4{
	font-size: 1.8rem;

	/*w376 1.8rem*/

}

.p-quiz-c-font18{
	font-size: 1.8rem;
    /*p-fontlarge4-17*/
}

.p-fontlarge4-17{
	font-size: 1.7rem;

	/*w376 1.7rem*/

}



.p-fontlarge4-16{
	font-size: 1.6rem;

	/*w376 1.6rem*/

}

.e-lineheigth1{
	line-height: 1;
	/*background-color: aqua;*/
	
}



.e-art01-pra-textcolor{
	color: #00aaee;/*00aaee 3d70ff*/

}

.e-art01-conversion-textcolor{
	color: #0040ee;

}

.e-art01-carnum-textcolor{
	color: #0040ee;

}

.p-bold{
	font-weight: bold;
}

.p-bold-fontlarge{
	font-weight: bold;
	font-size: 2.4rem; /* -> 24px; */
}



/* データルビ*/
ruby[data-ruby] { 
    position:relative;
    white-space: nowrap;
}

ruby[data-ruby]::before {
	content: attr(data-ruby);
	position:absolute; left:-1.5em; right:-1.5em; text-align:center;
	transform: scale(0.5);
	top: -1.16em;/*-1.16em*/
	white-space: nowrap;/*ルビを段落ちさせない*/
}


/* 以下追加 */
rt {
     display: none;
}

/*ここまでデータルビ */

.e-art01-carnum-textcolor{
	color: #ff8000;
}


.e-flex_box{
    display:flex;
}

/* ヘッダー */
.l-nav{
	background-color: #92E8BB;
    padding-bottom:13px;
}

@media (min-width:640px) {
    .l-nav{
	background-color: #92E8BB;
    padding-bottom:0px;
}
}



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

}

.e-ftop-item1{
	/*width:46%;*/
    flex-basis: 46.7%;
	max-width: calc(200px*2.2);/*440*/
    /*background-color: #FF060A;*/
}



.e-ftop-item2{
       /* width:30%;*/
    flex-basis: 30.3%;
    /*padding: 2% 0% 0% 2%;*/
    padding: 0% 0% 0% 2%;
	max-width: calc(214px*2.2);/*470.8*/
    /*background-color:#0005F5;*/
}

.e-ftop-item2 img{
    padding: 5% 0% 0%;

}

/* end ヘッダー */


.p-header-sdgstarget-imgbox{
background-color: #FFFFFF;
padding: 3% 2%;
}

.p-header-sdgstarget{
  width: 76%;
	margin-left: auto;
	max-width: 580px;
}



.p-header-sdgstarget img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.nop-header-sdgstarget{
	display: inline-block;
	margin: 0% 1%;
	width: 12%;
}



.nop-header-sdgstarget img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}


.e-title-container {
background-color:#FFFDF3;
	position: relative;
	width: 100%;
margin: 0 auto;
}


.l-title-text{
	width: 100%;
	/*height: 100%;	*/
}

.e-title-img{
	vertical-align: bottom;
	 width: 100%;
	 height: auto;
	max-width: 850px;
}



/* ブラウザーのWindowサイズのブレイクポイントでleftの％を変更する */
.l-title-qlogo{
	position: absolute;
	bottom:-12%;
	left:4.0%;
	width: 21%;
	/*height: 100%;	*/
}

.l-title-qlogo img{
	width: 100%;
    height: auto;
	vertical-align: bottom;
	max-width:186px;
}


.p-preamble-content-box{
/*padding: 3% 10% 0% 10%;*/
/*  position: relative;*/
}

.p-preamble-content{
	padding: 3% 10% 0% 10%;
}

.p-preamble-content p{
    text-align:left;
}

.p-preamble-content img{
    width: 100%;
	vertical-align: bottom;
}

.p-preamble-content2-box{
	position: relative;
	padding: 3% 10% 0% 10%;

}

.p-preamble-content2{
	position: absolute;
}

.p-preamble-content2 p{
    text-align:left;
   
}
	
.p-preamble-content2 img{
    width: 100%;
}



.p-preamble-blank{
    padding-top: 3%;
}

.p-preamble-blank{
    padding-top: 6%;
}

/* *************************** */
.cbn-e-blank-ss{
    padding-top: 0.1em;
}

.cbn-e-blank-s{
    padding-top: 0.2em;
}

.cbn-e-blank-sm{
    padding-top: 0.5em;
}

.cbn-e-blank1{
    padding-top: 1em;
}

.cbn-e-blank2{
    padding-top: 2em;
}

.cbn-e-blank3{
    padding-top: 3em;
}

.cbn-e-blank4{
    padding-top: 4em;
}

.cbn-e-blank-l{
    padding-top: 8em;
}

.cbn-e-blank-xl{
    padding-top: 12em;
   /* background-color:#8A8989;*/
}

/* */
.e-blank1{
    padding-top: 1.5%;
}

.e-blank2{
    padding-top: 2%;
}

.e-blank3{
    padding-top: 3%;
}
.e-blank6{
    padding-top: 6%;
}

.e-blank8{
    padding-top: 8%;
}

.e-blank12{
    padding-top: 12%;
}

.e-blank20{
    padding-top: 20%;
}

/* *************************** */
.l-section01-box{padding: 0%;}

.l-section02-box{padding: 0%;}

.l-section03-box{padding: 0%;}

.l-section04-box{padding: 0%;}

.l-article01-box{
	margin-top: 1%;
    padding: 0% 3% 0% 3%;

}

.l-article01-box p{
    padding: 0;
	margin: 0;


}

/* start read*/
.e-rebin3set-img-box{
	width: 100%;
	max-width: 640px;
	margin: 0 auto;

}


.e-rebin3set-img-box img{

	width: 100%;
    height:auto;
	vertical-align: bottom;
}


.l-article01{

    border-radius: 24px;
    background:#FFFDF3;
   
    text-align: center;
   
	padding: 0% 1% 0% 1%;
}

.e-pragomi-title{
	padding:8% 0% 3% 0%;

}
.e-pragomi-title p{
	margin: 0 auto;
	padding: 0;

}

.e-pragomi-title img{
width:100%
}


.e-pragomitocar-box {
	display: flex;
	justify-content: center;
	text-align: center;
	/*margin: auto 0;*/
	margin-top: 1.2%;
}

.e-pragomitocar-box img{
	width:22%;

}

.e-pragomitocar-box p{
	padding: 0;
	margin: 0;
}



.p-praweight-img{
	margin: 0 auto;
	width: 46%;
	max-width: 280px;
	/*text-align: center;*/
	
}


.p-praweight-img img{
	width: 100%;
}


.p-yearweight-img{
	width: 63%;
	max-width: 320px;
	/*text-align: center;*/
	margin: 0 auto;
}

.p-yearweight-img img{
	width: 100%;
}


.l-fukidasi01-box{
    position: relative;

    margin:6% 2.4% 0% 2.4%;
    /*padding: 2% 0% 0%;*/
    background-color: #FFFDF3;
    border-radius: 50px;
    border:solid 6px #5C87FF;

}


.l-fukidasi01-imgbox{
	position:absolute;
    left:50%;
    z-index:1;
}



.l-fukidasi01-box p{
 /*   padding: 1.5% 2% 1% 2%;*/
	padding: 1.5% 1.5% 1.5% 1.5%;
	text-align: left;

}


.l-section-content {

	display:flex;
	
   justify-content: center;


}




.l-section-item1{
    width:28%;
	max-width: 200px;

	padding: 0% 0% 0% 3%;
}

.l-section-item1 img{
    width:100%;

}


.l-section-item2{
	text-align: left;
	padding-left: 1%;

}



.l-inline-block{
    /*display:inline-block;*/

}


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

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




/* start reuse BIn*/
.e-reusebin-frtimg{
	width: 18%;
	max-width: 100px;
	margin: 0 auto;
}


.e-reusebin-frtimg img{

	width: 100%;
    height:auto;
	vertical-align: bottom;
}

.e-reuse-read-container{
margin:0% 3% 5% 3%;
    padding: 1% 3% 3% 3%;
    border-radius: 24px;
    background:#FFFDF3;
   
}

.e-reuse-read-container p{
	text-align: left;
}

.l-reusebin-recycle{
	margin:4% 0%;
	background-color: #70A0FF;
	/*2B72FF*/
	background-image: url("../images_gomiredu/binreBgPn02_125.svg");
	 /*binreBgPn reusebinbackptn02*/
	background-repeat: repeat;

}


.l-reusebin-title-container{
	margin:5% auto;
	width:90%;
    padding: 4% 0% 2%;
    background-color: #1958FF;
	/*0040EE*/
    border-radius: 30px;

	color: #FFFF3B ;
align-items: center;

}

.e-f-reusebin-item1{
width:11%;

	padding: 0% 1% 0% 0%;
}



.e-f-reusebin-item1 img{
	width:100%;

}

.e-f-reusebin-item2{
	/*background-color: blueviolet;*/

}

.e-f-reusebin-item2 p{
	margin: 0%;
	padding: 0%;

}



.l-binmilkwash-textbox{
	width:80%;
	
	margin: 0 auto;	color:#0044FF;
}



.l-binmilkwash-text{
	padding: 0;
	text-align: left;

}





.e-reusebin-zu-box{
	padding: 2% 2% 0% 2%;
	align-items: left;
	/*background-color: aqua;*/
}

.e-reusebin-zu-box img{
	width:100%;
}

.l-reusebin-recycle-milk{
	margin:0% 3% 0% 3%;

	/*background-color: aqua;*/

}



.e-reuse-recyclebin-milktext{
	margin: 0% auto;
	/*padding: 3% 2% 3% 2%;*/
    border-radius: 30px;
    background:#FFFDF3;
	color:#0040EE;

	padding: 5.5% 4% 3%;
	text-align: left;

}


.l-reusebin-recycle-milkimgbox{
/*	margin-top: 0%;
	margin-bottom: 0;*/
	margin-left: auto;
	padding-right: 2%;
	width:15%;
	text-align: right;

	/*background-color: aqua;*/
}


.l-reusebin-recycle-milkimgbox img{
	width:100%;
	vertical-align: bottom;
}


.l-fukidasi02-box{
margin:6% 2.4% 0%;
	
position:relative;
background-color: #FFFDF3;
border-radius: 60px;
border:solid 6px #54E685;
padding: 1.5% 3% 0%;
	/*padding: 3%;*/
}

.l-fukidasi02-box span{
text-align: left;
margin: 0%;
padding: 0%;
}


.l-fukidasi02-box p{
text-align: left;
margin: 0%;
padding: 0% 1.5% 1.5% 2%;
}




.l-fukidasi02-imgbox{
	position:absolute;
	left:70%;
    z-index:1;
}



.l-wrap-recycle{
	background-image: url("../images_gomiredu/harainter-b08r.svg");
	
	background-size: contain;

}


.l-recycle-discription-container{
	/*margin: 5% 0% 0% 0%;*/
/*display:flex;
flex-flow: row wrap;*/
}



.e-recycle-f-item-e{
	/*text-align: center;*/
	/*background-color: #ECDEBD;	*/
}


.p-haimg-scale{
	margin: 0 auto;
	/*width:40%;*/
	width:42%;
	max-width: 400px;
	/*background-color: #C1E2ED;*/
}

.p-haimg-scale img{
	width:100%;
	height: auto;
}

.e-recycle-f-item-t{

	margin-left: 10%;
	text-align: left;

}



.e-recycle-f-item-t  > div{
/*text-align: left;*/
	margin-left: 0%;
}

.e-recycle-e-discription-container{
	display:flex;
	flex-direction: row;

	/*padding: 0% 15% 0 15%;*/
	/*align-items: */
	margin:0 auto;
	width:94%;
color:#6C3200;/*99581D*/
	/*background-color: #F7DFDF;*/
}

.e-recycle-bag-discription-container {
	margin:0 auto;
	width:80%;
	color:#6C3200;/*99581D*/
	/*padding-left: 20%;*/
	/*background-color:#EDB3B4;*/
}

.e-recycle-bag-discription-container p{
text-align: left;
}

.e-recycle-e-discription-container p{
	text-align: left;
	/*flex-basis: 60%;*/
	padding-right: 1%;
	width:70%;
}



.e-recycle-e-discription-imgbox img{
	width:100%;
}


.e-recycle-after-container{
	/*margin:0 auto;*/
/*	text-align:center;*/
	margin:0 auto;
	width:80%;
/*
	background-color: #FF00FD;
*/
	
}


.p-recycle-after-title{

	margin:0 auto;
	width:100%;
/*width:50%;*/
    padding:4.6% 0% 0.4% ;
    background-color: #e37336; /*99581D 4F2D0F a8e332  7C400D*/
    border-radius: 50px;
/*   border:solid 6px #5C87FF;*/
	text-align: center;
	color:#FFFFFF;
	font-weight: bold;
	/*width: 100%;*/
}


.p-recycle-after-answer{
	background-color: #FFFDF3;
	border: #99581D solid 2px;
	border-top: none;
margin:0 auto;
	padding: 5% 8% 8% 8%;
	width:90%;
	text-align: left;
	color:#6C3200;/*99581D*/
	/*background-color: aqua;*/
}

.p-recycle-after-answer p{
	;
	margin: 0;
/*	padding: 0;*/
	
}


.l-row{
width:100%;
}

.l-row p{
  display: inline-block;
  vertical-align: bottom;
	margin-bottom:0.9%;
}

.p-img-scale{
	width:28%;
}
.l-row p img{
    width:100%;
    height:auto;
	vertical-align: bottom;
}


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


.e-gogchp{
	
/*text-align: center;	*/
    margin: 0 auto;
    /*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{
	text-align: left;
	/*padding: 10% 5% 0% 0%;*/
	margin-left: 2%;
	padding: 6% 0% 4% 0%;
	width: 34%;
	max-width: 200px;

	/*background-color: aqua;*/
}

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

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

.e-gogchp-milk-box{
	background-color: #a6e8f2;
	padding: 5% 0% 6%;
}


.e-gogchp-milk{
/*	margin-left: 60%;width: 35%;*/
	margin: 0 auto;
  /*margin: 0% 5% 0% 5%;10% 400px*/
	padding-left: 8%;
	
	/*background-color: antiquewhite;*/
	width: 52%;/*58% 68% 340px*//*640 chang*/
	max-width: 268px;
}

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

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

.dummy-dennki{
	margin: 0 auto;
	width: 90%;
}

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


/*ページトップへ戻る*/
#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%;

}





/*以下　ルビと漢字の行わかれを止める*/
/*最新のsafari向けのcssハック*/

_::-webkit-full-page-media, _:future, :root .e-noneindention0,.e-noneindention,.e-noneindention_1,.e-noneindention_2,.e-noneindention_3,.e-noneindention_4,.noneindention_5,.noneindention_6,.noneindention_7 {
    display: inline-block;
}


_::-webkit-full-page-media, _:future, :root .p-preamble-content span,.e-recycle-e-discription-container span,.e-recycle-bag-discription-container span,.e-qize-comment-box span,.l-qizu-question span,.l-binmilkwash-textbox span{
	display: inline-block;
}


@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome,.e-noneindention0,.e-noneindention,.e-noneindention_1,.e-noneindention_2,.e-noneindention_3,.e-noneindention_4,.noneindention_5,.noneindention_6,.noneindention_7, .p-preamble-content span,.e-recycle-e-discription-container span,.e-recycle-bag-discription-container sapn,.e-qize-comment-box span,.l-qizu-question span,.l-binmilkwash-textbox span  {
   display: inline-block;
  }
}


@media (max-width:360px) {
    /*　for SP 　layout  bpoint w350px　*/
	html {font-size: 8.888888888888889px;} /* -> for body 1.8rem 16px; */
  .e-quiz-btn {
    padding: 15.5% 5% 13%;
    box-shadow:0.2em 0.2em #99581D;
    border-radius: 20px;
    }
  }

@media (min-width:640px) {
	
	body {

/*margin: 0 auto;*/
font-size: calc(1.6rem*1.5); /* -> px; */
font-family: 'M PLUS Rounded 1c', sans-serif;
	/*transform:rotateZ(0.03deg);*/
	}

.p-fontsize-def{
font-size: calc(1.6rem*1.5); /* -> px; */
font-family: 'M PLUS Rounded 1c', sans-serif;
	}
	

.l-fukidasi02-box{
  margin:6% 6% 0%;

}
	
.p-preamble-content{
    padding: 3% 12% 0% 12%;

}

.p-preamble-content2{
    padding: 3% 12% 0% 12%;

}

.p-preamble-content2 p{
    text-align:left;
   
}
	
.p-preamble-content2 img{
    width: 100%;
}

	
.l-article01-box{
    padding: 0% 6%;
}

.l-section01-box{
	padding: 0% 4%;

}

/*.l-section01quiz-box{
		padding: 0% 3.2%;
	}*/

.cbn-l-sectionquiz-box{
    margin:0 auto;
     max-width: 800px;
  }

    
.l-section02-box{
	padding: 0% 3%;

}


.l-section04-box{
	padding: 0% 8%;

}

.e-recycle-bag-discription-container {
	width:84%;
	
}

	/*init 4.6%*/
.l-title-qlogo{
	left:5.0%;
}

	
.p-fontsize24{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: calc(2.4rem*1.5);

		/*font-size: 4.8rem;*/
}

.p-fontsize28{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: calc(2.8rem*1.2); /* -> 24px; */
	letter-spacing: 0.2em;
	}
	

.p-fontsize22{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: calc(2.2rem*1.5);
	/*font-size: 4.4rem;*/
}

.p-fontsize20{
	font-size: 2.6rem;/*2.4*
}

.p-fontsize19{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: calc(1.9rem*1.5);

}

.p-fontsize18{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: calc(1.8rem*1.2);
	/*font-size: 3.2rem;*/
}

.p-quiz-q-font18{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: calc(1.8rem*1.2);
	/*font-weight: bold;*/
}

	
.p-fontsize17{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	/*font-size:  calc(1.7rem*1.5);*/
	font-size:  2.1rem;
}

.p-fontsize16{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: calc(1.6rem*1.5);
	/*font-size: 3.2rem;*/
}


.p-fontsize15{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: calc(1.5rem*1.5);
	/*font-size: 2.8rem;*/

}

.p-fontsize14{
	font-size: calc(1.4rem*1.5);
	/*font-size: 2.8rem;*/
}

.p-fontsize12{
	font-size: calc(1.2rem*1.5);
	/*font-size: 2.4rem;*/
}

.p-fontlarge1-27{
	font-size: calc(2.7rem*1.5);
}

.p-fontlarge1-26{
	font-size: calc(2.6rem*1.5);
}

.p-fontlarge1{
	font-size: calc(2.4rem*1.2);
	/*font-size: 4.8rem;*/
	}

.p-fontlarge2{
	font-size: calc(2.0rem*1.2);

}

.p-fontlarge3{
	font-size: calc(2.4rem*1.5);

	/*w376 1.8rem*/
	}

.p-fontlarge4{
	font-size: calc(2.2rem*2);

	/*w376 2.2rem*/
	}

.p-fontlarge4-16{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: calc(1.6rem*1.5);

	/*w376 1.6rem*/

}
    
    
.p-quiz-c-font18{
	/*quiz A commnt*/
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: calc(1.7rem*1.5);
	/*w376 1.7rem*/
}
	
.p-fontlarge4-17{
	/*quiz A commnt*/
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: calc(1.7rem*1.5);
	/*w376 1.7rem*/

}
	
		/*768 chang→640*//*58% 340px*/
  .e-gogchp-milk{
    width: 37%;
	max-width: 328px;
  }
}



@media (min-width:768px) {
    /*　for PC and for iPad 画面幅が768px以上の場合のスタイルを記述*/
body {

/*margin: 0 auto;*/

font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: calc(1.6rem*1.5); /* -> px; */
	}
	

.p-fontsize-def{
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: calc(1.6rem*1.5);
	}
	
	
.p-preamble-content2{
    padding: 3% 12% 0% 12%;
}

.p-preamble-content2 p{
    text-align:left;
   
}
	
.p-preamble-content2 img{
    width: 100%;
}

	
.p-fontsize28{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: calc(2.8rem*1.5); /* -> 24px; */
	letter-spacing: 0.3em;
	}
	
	
.p-fontsize20{
	font-size: 2.9rem;/*2.6rem*/
}
	

.p-quiz-q-font18{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: calc(1.8rem*1.4);
	/*font-weight: bold;*/
}

    
.p-quiz-c-font18{
	/*quiz A commnt*/
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: calc(1.7rem*1.5);

}
	
.p-fontlarge4-17{
	/*quiz A commnt*/
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: calc(1.7rem*1.5);

}
	
.l-fukidasi02-box{
  margin:6% 8% 0%;

}
	
.l-article01-box{
    padding: 0% 9%;
}

.l-section01-box{
	padding: 0% 6%;

}


.l-section02-box{
	padding: 0% 4%;

}


.l-section04-box{
	padding: 0% 10%;

}
}


  /*　for PC and for iPad 画面幅が1041px以上の場合のスタイルを記述*/
@media (min-width:1024px) {
.l-title-qlogo{
	left:7.0%;
}
.p-preamble-content{
  
  padding: 3% 10% 0% 10%;
}
	
.p-preamble-content2{
  
  padding: 3% 10% 0% 10%;
}

.e-qize-comment-box{
	width: 90%;

  padding: 2% 2% 3% 2%;
}
	

.e-qize-comment-box p{
	padding: 1% 1.4%;
}
	.l-fukidasi02-box{
  margin:6% 6% 0%;

}
	
}