@charset "UTF-8"


/*基本設定：ページ全体*/
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family:'Noto Sans JP', 'Sawarabi Gothic',sans-serif;
    color: #000;
}
    
/*-----ヒーローイメージ---------*/
.conA {
        width: 100vw;
        background-image: url(../img/main_ph0.jpg);
        background-position: center;
        background-size: cover;
        position: relative;
    display: flex;
    justify-content: center; 
    align-items: flex-start;
 }
.conA .center{
    justify-content: center;
}
.hero_center{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.hero_center img{
    margin-top:10vh;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.conA .read{
    color: #fff;
    font-family: Noto Sans JP;
    margin-top: 18vh;
    font-size: 1.2em;
    text-align: center;

}
.conA .read h1{
    font-size: 2em;
    color: #fff;
    font-weight:bold;
    text-align: center;
}
.conA .read h5{
    color: #fff;
    margin-top: 2vh;
    text-align: center;
}
.conA .read .small{
    color: #fff;
    margin-top: 2vh;
    font-size: 0.3em;
    text-align: center;
}
.maru{
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-top: 2vh;
    margin-left: 1vh;
    margin-right: 1vh;
    margin-bottom: 2vh;
    
}
.maru .container01 img{
    margin-right: 3vh;
}
.maru .container01 a:hover{
   opacity: 0.6;
}
.maru .container02 img{
   margin-right: 3vh;
}
.maru .container02 a:hover{
   opacity: 0.6;
}
.maru .container03 img{
}
.maru .container03 a:hover{
   opacity: 0.6;
}

/*--------NEWS---------------*/
.news{
    padding-top: 10vh;
    font-family: 'Sawarabi Gothic';
    background-color: #E4CE07;
    padding-bottom: 10vh;
}
.news a{
    padding: 2vh;
    text-decoration: none;
    color: black;
}
.news a:hover{
    color:  #808080;
}
.news .newsB {
    font-family:  'Sawarabi Gothic';
    text-align: center;
}
.news .newsB h2{
    font-weight: bold;
    font-size: 2.5em;
    padding: 0 1vh;
}
.news.newsB h2 span{
    color: #97CB7D;
}
.news .newsB p{
    font-weight: 500;
     margin-top: 2vh;
}
.newsA{
    display: flex;
    align-items: flex-start;
    align-items:center;
    justify-content: center;
    padding: 3vh;
}


/*---------インタビュー---------*/
.conF{
    margin: 10vh 0;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Sawarabi Gothic';
    font-size: 0.8em;
}
.conF .cececenter{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.conF .center{
    display: flex;
    align-items: flex-start;
    align-items: center;
    justify-content: center;
    margin-top: 5vh;
         width: 60%;
}
.conF .omoi {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.conF .right{
    margin-left:1vh;
    flex:0 0 50%;
    align-items:center;
}
.conF .midasi{
    font-size: 1.8em;
}
.conF .text{
    flex:0 0 50%;
    margin-left: 10vh;
}
.right img{
    display:block;
    margin-left: auto;
    margin-right: auto;
        margin-top: 5vh;
}
.kakeru{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top:2vh;
}
.kakeru img{
width: 20vw;
}
.text_zyuyou{
    flex:0 0 70%;
}
.text_zyuyou a{
    color:  #97CB7D;
    text-decoration:none;
}
.text_zyuyou a:hover{
    color: #2e8b57;
}
/*---------申し込みボタンエリア---------*/
.order {
    height: 20vh;
    background-color: #E5E5E5;
    display: flex;
    align-items: flex-start;
    align-items: center;
    justify-content: center;
}
.order .center{
    display: flex;
    align-items: flex-start;
    justify-content:center;
    align-items:center;
}
.order .center .order_denki img{
    margin-right: 3em;
}
.order .center .order_denki a:hover{
    opacity: 0.6;
}
.order .center .syumi_denki a:hover{
    opacity: 0.6;
}

/*---------要約---------*/
.conB{
    background-color: #fff;
    font-family: 'Sawarabi Gothic';
}
/*1こめ*/
.conB .containerA{
    background-color: #97CB7D;
    display: flex;
    align-items: flex-start;
    margin-top: 10vh;
    margin-bottom: 2vh;
    margin-left: auto;
    margin-right: auto;
    width: 90vw;
    justify-content: center;
}
.conB .containerA .text h2{
    color: #fff;
    font-family: Noto Sans JP;
}
.conB .containerA .cececenter{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-items: center;
    width: 60%;
}
.conB .containerA img{
    margin-top:  8vh;
    margin-bottom: 8vh;
    margin-right: 8vh;
    margin-left: 5vh;
}
.conB .containerA .text p{
    color: #fff;
    margin-top: 5vh;
    margin-right: 5vh;
    font-family: Noto Sans JP;
}
.conB .containerA .text{
    margin-top: 8vh;
    margin-bottom: 8vh;
    margin-left: 8vh;
    margin-right: 0;
    flex:0 0 50%;
}
/*2こめ*/
.conB .containerB{
    background-color: #BED3B4;
    display: flex;
    align-items: flex-start;
    margin-top: 0vh;
    margin-bottom: 2vh;
    margin-left: auto;
    margin-right: auto;
    width: 90vw;
    justify-content: center;
}
.conB .containerB .cececenter{
    display: flex;
    align-items:center;
    justify-content: center;
    width: 60%;
}
.conB .containerB .five img{
    flex: 0 0 40%;
    width:auto;
}
.conB .containerB .five{
display: flex;
    align-items: center;
    align-items: flex-start;
    justify-content: center;
    margin-left: 5vh;
}
.conB .containerB .text .centercenter{
    margin-top: 5vh;
    margin-bottom: 5vh;
}
.conB .containerB .text h2{
    color: #fff;
    font-family: Noto Sans JP;
}
.conB .containerB .text a{
    margin-top: 3vh;
    margin-left: auto;
    margin-right: auto;
}
.conB .containerB .text p{
    color: #fff;
    margin-top: 5vh;
    font-family: Noto Sans JP;
}
.conB .containerB .text{
    margin-top: 8vh;
    margin-bottom: 8vh;
    margin-left: 8vh;
    margin-right: 8vh;
}
.conB .containerB .text .center{
    display: flex;
    align-items: flex-start;
}
.conB .containerB .text .center a:hover{
    opacity: 0.6;
}
/*3こめ*/
.conB .containerC{
    background-color: #C4C4C4;
    display: flex;
    align-items: flex-start;
    margin-top: 2vh;
    margin-bottom: 10vh;
    margin-left: auto;
    margin-right: auto;
    width: 90vw;
    justify-content: center;
}
.conB .containerC .cececenter{
    display: flex;
    align-items: flex-start;
        justify-content: center;
    align-items: center;
    width: 60%;
}
.conB .containerC .text h2{
    color: #fff;
    font-family: Noto Sans JP;
}
.conB .containerC .center a{
    margin-top: 3vh;
    margin-left: auto;
    margin-right: auto;
}
.conB .containerC .text p{
    color: #fff;
    margin-top: 5vh;
    font-family: Noto Sans JP;
}
.conB .containerC .text{
    margin-top: 8vh;
    margin-bottom: 8vh;
    margin-left: 8vh;
    margin-right: 0;
}
.conB .containerC .text .center{
    display: flex;
}
.conB .containerC .text .center a:hover{
   opacity: 0.6;
}
.conB .containerC img{
    display: flex;
    align-items: flex-start;
    
}
.conB .containerC .graph{
    margin: auto auto;
    margin-top:  8vh;
    margin-bottom: 8vh;
    margin-right: 8vh;
    margin-left: 5vh;
}

/*---------QUONプロジェクトとは---------*/
.conC{
    font-family: 'Sawarabi Gothic';
}

.conC .read {
    font-family:  'Sawarabi Gothic';
    text-align: center;
}
.conC .read h2{
    font-weight: bold;
    font-size: 1.7em;
    padding: 0 1vh;
}
.conC .read h2 span{
    color: #97CB7D;
}
.conC .read p{
    font-weight: 500;
     margin-top: 2vh;
}
.read_logo{
    margin-top: 10vh;
    display: flex;
    align-items: flex-start;
    align-items:center;
    justify-content: center;
}
.read_logo img{
    margin: auto;
}

/*「自然の恵みを」*/
.conC .container01{
    background-color: #C4C4C4;
    margin-top:5vh;
    margin-bottom: 0vh;
    margin-left: 10vh;
    margin-right: 10vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.conC .container01 .left{
    width: 50%;
    margin:3%;
    flex: 0 0 50%;
}
.conC .container01 .ph img{
    margin: 30px;
}
.conC .container01 p{
    margin-top:5vh;
    color: #fff;
}
.conC .container01 .ph{
    flex:0 0 50%;
}
.conC .container01 .cececenter{
    display: flex;
    align-items: flex-start;
    justify-content: center;
   width: 60%;
}
/*「コスメ原料への」*/
.conC .container02{
    background-color: #97CB7D;
    margin-top:2vh;
    margin-bottom: 2vh;
    margin-left: 10vh;
    margin-right: 10vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.conC .container02 .left{
    width: 50%;
    margin:3%;
}
.conC .container02 .ph img{
    margin: 30px;
}
.conC .container02 p{
    margin-top:5vh;
    color: #fff;
}
.conC .container02 .cececenter{
    display: flex;
    align-items: flex-start;
        justify-content: center;
   width: 60%;
}

/*「クリーンエネルギー」*/
.conC .container03{
    background-color: #E4CE07;
    margin-top:2vh;
    margin-bottom: 2vh;
    margin-left: 10vh;
    margin-right: 10vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.conC .container03 .left{
    width: 50%;
    margin:3%;
}
.conC .container03 .ph img{
    margin: 30px;
}
.conC .container03 p{
    margin-top:5vh;
    color: #fff;
}
.conC .container03 .cececenter{
        justify-content: center;
    display: flex;
    align-items: flex-start;
   width: 60%;
}

/*「森を守る」*/
.conC .container04{
    background-color: #C4C4C4;
    margin-top:2vh;
    margin-bottom: 2vh;
    margin-left: 10vh;
    margin-right: 10vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.conC .container04 .left{
    width: 50%;
    margin:3%;
}
.conC .container04 .ph img{
    margin: 30px;
}
.conC .container04 p{
    margin-top:5vh;
    color: #fff;
}
.conC .container04 .cececenter{
    display: flex;
    align-items: flex-start;
        justify-content: center;
   width: 60%;
}

/*「お客様のお手元に」*/
.conC .container05{
    background-color: #97CB7D;
    margin-top:2vh;
    margin-bottom: 2vh;
    margin-left: 10vh;
    margin-right: 10vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.conC .container05 p{
    margin-top: 3vh;
    color: #fff;
}
.conC .container05 .left{
    margin: 3%;
    width: 50%;
}
.conC .container05 .ph img{
    margin: 30px;
}

.conC .container05 .cececenter{
   display: flex;
    align-items: flex-start;
   width: 60%;
}
.conC .container05 .cececenter{
    justify-content: center;
    display: flex;
    align-items: flex-start;
   width: 60%;
}

/*「使い終わった容器」*/
.conC .container06{
    background-color: #E4CE07;
    margin-top:2vh;
    margin-bottom: 2vh;
    margin-left: 10vh;
    margin-right: 10vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.conC .container06 .left{
    width: 50%;
    margin:3%;
}
.conC .container06 .ph img{
    margin: 30px;
}
.conC .container06 p{
    margin-top:5vh;
    color: #fff;
}
.conC .container06 .cececenter{
        justify-content: center;
    display: flex;
    align-items: flex-start;
   width: 60%;
}

/*sdgs*/
.sdgs{
    display: flex;
    align-items: flex-start;
    align-items: center;
    justify-content: center;
    margin: 5vh auto;
    font-family: 'Sawarabi Gothic';
}
.sdgs .text{
    margin-top: 3vh;
    margin-left: 3vh;
    width: 40%;
}
.sdgs .text p{
   font-weight: 100;
    font-size: 1em;
}
.sdgs .text h3{
    color: #2D9B06;
   font-weight: 800;
    font-size: 1.2em;
    margin-bottom: 2vh;
}
.sdgs .text .small{
   font-size: 0.7em;
}
/*---------切り替えると---------*/
.kirikae{
    background-color: #E4CE07;
    display: flex;
    align-items: flex-start;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    padding-bottom: 5vh;
    font-family: 'Sawarabi Gothic';
}
.kirikae .center .text{
    width:40%;
    margin: auto;
}
.kirikae .center .text p{
    margin-top: 3vh;
}
.kirikae .center .text img{
    margin: 0 auto;
    width: 100%;
}
.kirikae .center .text span{
    font-size: 0.8em;
}
.kirikae .center .centercenter p{
   font-family: 'Sawarabi Gothic';
    margin-top: 2vh;
}
.kirikae .exsample{
    color: #fff;
    width:50%;
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    flex: 0 0 30vw;
    margin: 3vh auto;
}
.kirikae .exsample .small{
    width: 70%;
}
.kirikae .exsample img{
    width: 60%;
}
.kirikae .exsample p{
    margin-right: 10%; 
}
.kirikae .centercenter{
    display: block;
    margin:5vh auto;
    width: 40%;
}
.kirikae .centercenter img{
   width: 100%;
   margin: 5vh auto;
}
.kirikae .centercenter p{
    margin: 10vh 0;
    font-size: 1.1em;
    
}

/*---------3つのプラン---------*/
.conD {
    background-color: #97CB7D;
}

.conD  .containerA{
    font-family: Noto Sans JP;
    text-align: center;
    color: #fff;
    padding-top: 5vh;
}
.conD  .containerA h2{
    padding-top: 5vh;
    font-weight: bold;
    font-size: 2em;
}
.conD  .containerA h4{
    padding-top: 2vh;
}
.conD .plan{
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.conD .plan img{
    margin-top: 4vh;
}
.conD .containerB {
    display: block;
    margin-top: 3vh;
    padding-bottom: 8vh;
}
.conD .containerB p{
   color: #fff;
    width:90vh;
   margin-left: auto;
    margin-right: auto;
        font-size: 0.5em;
}

/*---------まとめ---------*/
.conE{
    background-color: #C4C4C4; 
}
.conE .containerA{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 8vh;
}
.conE .containerB .matome{
   display: flex;
    align-items: flex-start;
    justify-content: center;
    align-items: center;
    padding-top: 10vh; 
}
.conE .containerB p{
   color: #fff;
    margin-top: 5vh;
    padding-bottom: 8vh;
    width: 90vh;
   margin-left: auto;
    margin-right: auto;
        font-size: 0.5em;
}

/*---------お申込み---------*/
/*01*/
.conG .text{
    background-color: #E4CE07;
    padding: 5vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.conG .OFF{
    padding: 5vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    align-items: center;
}
.conG .title img{
    width: 100%;    
}
/*02*/
.order_kigyou{
    padding: 5vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    align-items: center;
}
.toiawase .quon img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.toiawase .quon .button img:hover{
    opacity: 0.5;
}
.toiawase .crecos .button img:hover{
    opacity: 0.5;
}
.toiawase .crecos img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.toiawase{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 10vh;
}
/*---------フッター---------*/
footer .haikei img{
    width: 100vw;
}
footer .haikei{
    bottom: 0;
    position:
}
footer{
    position: relative;
}
footer .cresit img{
    position:absolute;
    z-index: 100;
    top: 60%;
   right: 10%;
}
footer .cresit{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    align-items:center;
}
footer .logo img{
    position:absolute;
    z-index: 100;
    top: 52%;
   left: 10%;
}
footer .logo{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    align-items:center;
}
footer .logo a:hover{
    opacity: 0.6;
}
/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------ipad_レスポンジブ---------*/
@media(max-width:1299px){
   /*「自然の恵みを」*/
.conC .container01{
    margin-top:5vh;
    margin-bottom: 4vh;
    margin-left: 4vh;
    margin-right: 4vh;
    display: block;
}
.conC .container01 .left{
    display: block;
    align-items: center;
    padding-top: 2vh;
    width: 90%;
}
.conC .container01 p{
    margin-top:3vh;
    color: #fff;
}
.conC .container01 .cececenter{
  display: block;
   width: auto;
}
    .conC .container01 .ph img {
        margin-left: 3vh;
        margin-top: 2vh;
    }
  /*「コスメ原料への加工」*/
.conC .container02{
    margin-top:5vh;
    margin-bottom: 4vh;
    margin-left: 4vh;
    margin-right: 4vh;
    display: block;
}
.conC .container02 .left{
    display: block;
    align-items: center;
    padding-top: 2vh;
    width: 90%;
}
.conC .container02 p{
    margin-top:3vh;
    color: #fff;
}
.conC .container02 .cececenter{
  display: block;
   width: auto;
}
    .conC .container02 .ph img {
        margin-left: 3vh;
                margin-top: 2vh;
    }
  /*「クリーンエネルギー」*/
.conC .container03{
    margin-top:5vh;
    margin-bottom: 4vh;
    margin-left: 4vh;
    margin-right: 4vh;
    display: block;
}
.conC .container03 .left{
    display: block;
    align-items: center;
    padding-top: 2vh;
    width: 90%;
}
.conC .container03 p{
    margin-top:3vh;
    color: #fff;
}
.conC .container03 .cececenter{
  display: block;
   width: auto;
}
    .conC .container03 .ph img {
        margin-left: 3vh;
        margin-top: 2vh;
    }
      /*「森を守るパッケージ」*/
.conC .container04{
    margin-top:5vh;
    margin-bottom: 4vh;
    margin-left: 4vh;
    margin-right: 4vh;
    display: block;
}
.conC .container04 .left{
    display: block;
    align-items: center;
    padding-top: 2vh;
    width: 90%;
}

.conC .container04 .ph img{
        margin-left: 3vh;
        margin-top: 2vh;
}
.conC .container04 p{
    margin-top:3vh;
    color: #fff;
}
.conC .container04 .ph{
    flex:0 0 100%;
}
.conC .container04 .cececenter{
  display: block;
   width: auto;
}
  /*「お客様のお手元」*/
.conC .container05{
    margin-top:5vh;
    margin-bottom: 4vh;
    margin-left: 4vh;
    margin-right: 4vh;
    padding-bottom: 2vh;
    display: block;
}
.conC .container05 .left{
    display: block;
    align-items: center;
    padding-top: 2vh;
    width: 90%;
    }

.conC .container05 .ph img{
    display: none;
}
.conC .container05 p{
    margin-top:5vh;
    margin-bottom: 2vh;
    color: #fff;
}
.conC .container05 .cececenter{
    display: block;
   width: 90%;
}
 /*使い終わった容器」*/
.conC .container06{
    margin-top:5vh;
    margin-bottom: 4vh;
    margin-left: 4vh;
    margin-right: 4vh;
    display: block;
}
.conC .container06 .left{
    display: block;
    align-items: center;
    padding-top: 2vh;
    width: 90%;
}

.conC .container06 .ph img{
        margin-left: 3vh;
        margin-top: 2vh;
}
.conC .container06 p{
    margin-top:3vh;
    color: #fff;
}
.conC .container06 .ph{
    flex:0 0 100%;
}
.conC .container06 .cececenter{
  display: block;
   width: auto;
}
    /*3つのプラン*/
    .conD .plan img{
    width: 80%;
}
}
														
/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------mobile_レスポンジブ---------*/
@media(max-width:599px){
    .maru{
    display:block;
        justify-content: center;
    flex-wrap:wrap;
    align-items: flex-start;
    margin-top: 2vh;
    margin-left: 1vh;
    margin-right: 1vh;
    }
   .maru .container01 img{
    margin-right: 0vh;
}
     .maru .container01{
         display: flex;
         justify-content: center;
        align-items: flex-start;
    }
.maru .container02 img{
   margin-right: 0vh;
}
     .maru .container02{
         display: flex;
         justify-content: center;
         align-items: flex-start;
    }
     .maru .container03{
        display: flex;
         justify-content: center;
         align-items: flex-start;
    }
.conA .read h1,h5{
    color: #fff;
    text-shadow:1px 0 8px black;
    
}
 .conA .read h1{
    font-size: 1.1em;
}
  .conA .read h5{
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 5vh;
    font-size: 0.6em;
    text-shadow:1px 0 8px black;
    font-weight:900;
}
 .conA .hero_center img{
    margin-top: 12vh;
}
.conA .read{
    margin-top: 20vh;
    width: 85%;
   padding: 10vh 0;
    margin: 0 auto;

}
.conF .omoi img{
    width: 90%;
    height: auto;
}
.conF .center{
    display:block;
    margin-top: 5vh;
}
    .conF .kakeru img{
        width: 80%;
        height: auto;
    }
    .conF .right{
        display:block;
        margin-top: 5vh;
        margin-left:auto;
        margin-right:auto;
}
.conF .text{
    flex:0 0 100%;
    margin: 0 auto;
}
 .conF .center{
    margin-top: 5vh;
     width:80%;
}
    /*お申込みボタン*/
  .order .center{
    display: block;
    margin-top: 3vh;
    height: 30vh;
    background-color:  #E5E5E5;
    padding: 3vh;
}
     .order{
    background-color:#fff;
}
    .order .center .syumi_denki {
        display: flex;
        justify-content: center;
        align-items: flex-start;
}
     .order .center .order_denki {
        display: flex;
        justify-content: center;
         align-items: flex-start;
}
    .order .center .order_denki img{
        margin-right: 0vh;
}
    
    /*1こめ*/
.conB .containerA{
    display: block;
    margin-top: 15vh;
}
.conB .containerA .cececenter{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.conB .containerA img{
    margin-top:  2vh;
    margin-bottom: 2vh;
    margin-right: 2vh;
    margin-left: 2vh;
    width: 90%;
}
.conB .containerA .text{
    margin-top: 4vh;
    margin-bottom: 4vh;
    margin-left: 0;
    flex:0 0 70%;
}
    .conB .containerA .text p{
        margin-right: 0;
    }
    /*2こめ*/
.conB .containerB{
    display: block;
}
.conB .containerB .cececenter{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 0;
}
.conB .containerB .five img{
    margin-top:  2vh;
    margin-bottom: 2vh;
    margin-right: 2vh;
    margin-left: 2vh;
    width: 90%;
}
.conB .containerB .five{
    margin-left: 0vh;
    order:2;
}
.conB .containerB .text .centercenter{
    margin-top: 5vh;
}
.conB .containerB .text{
    order: 1;
    margin-top: 4vh;
    margin-bottom: 4vh;
    flex:0 0 70%;
}
  .conB .containerB{
      display: flexbox;
      margin-top: 3vh;
}
    .conB .containerB .text .centercenter {
    margin-top: 0vh;
    margin-bottom: 0vh;
    }
    /*3こめ*/
.conB .containerC{
    display: block;
}
.conB .containerC .cececenter{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: flex-start;
}
.conB .containerC .text h2{
    color: #fff;
    font-family: Noto Sans JP;
}
.conB .containerC .text p{
    color: #fff;
    margin-top: 5vh;
    font-family: Noto Sans JP;
}
.conB .containerC .text{
    margin-top: 4vh;
    margin-bottom: 4vh;
    margin-left: 0;
    flex:0 0 70%;
}
.conB .containerC .text .center{
    display: flex;
    align-items: flex-start;
}
.conB .containerC .graph img{
    margin: 0vh auto;
    width: 100%;
}
    .conB .containerC .graph{
    margin:4vh;
}
    /*QUONプロジェクトとは*/
     .conC .read h2 {
     margin-top: 15vh;
         font-size:1.6em;
}
    .conC .read {
        display: block;
        margin: 0 auto;

}
.conC .read p{
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5vh;
    font-size: 0.8em;
}
.read_logo{
    display: block;
}
.read_logo img{
    margin: 0 auto;
}
    .quon_logo{
        display:flex;
        margin-left: auto;
        margin-right: auto;
        margin-top: 5vh;
    }
    /*「自然の恵みを」*/
.conC .container01{
    margin-top:5vh;
    margin-bottom: 4vh;
    margin-left: 4vh;
    margin-right: 4vh;
    display: block;
}
.conC .container01 .left img{
    width: 100%;
}
.conC .container01 .left{
    width: 100%;
    margin: 0 5vw;
    flex: 0 0 100%;
}
.conC .container01 .ph img{
    width: 95%;
}
.conC .container01 p{
    margin-top:5vh;
    color: #fff;
}
.conC .container01 .ph{
    flex:0 0 100%;
}
.conC .container01 .cececenter{
    display: block;
   width: 90%;
}
  /*「コスメ原料への加工」*/
.conC .container02{
    margin-top:2vh;
    margin-bottom: 2vh;
    margin-left: 4vh;
    margin-right: 4vh;
    display: block;
}
 .conC .container02 .left img{
    width: 100%;
}
.conC .container02 .left{
    width: 100%;
    margin: 0 5vw;
    flex: 0 0 100%;
}
.conC .container02 .ph img{
    width: 95%;
}
.conC .container02 p{
    margin-top:5vh;
    color: #fff;
}
.conC .container02 .ph{
    flex:0 0 100%;
}
.conC .container02 .cececenter{
    display: block;
   width: 90%;
}
  /*「コスメ原料への加工」*/
.conC .container03{
    margin-top:2vh;
    margin-bottom: 2vh;
    margin-left: 4vh;
    margin-right: 4vh;
    display: block;
}
.conC .container03 .left{
    width: 100%;
    margin: 0 5vw;
    flex: 0 0 100%;
}
.conC .container03 .left img{
    width: 100%;
}
.conC .container03 .ph img{
    width: 95%;
}
.conC .container03 p{
    margin-top:5vh;
    color: #fff;
}
.conC .container03 .ph{
    flex:0 0 100%;
}
.conC .container03 .cececenter{
    display: block;
   width: 90%;
}
/*「森を守るパッケージ」*/
.conC .container04{
    margin-top:2vh;
    margin-bottom: 2vh;
    margin-left: 4vh;
    margin-right: 4vh;
    display: block;
}
.conC .container04 .left{
    width: 100%;
    margin: 0 5vw;
    flex: 0 0 100%;
}
.conC .container04 .left img{
    width: 100%;
}
.conC .container04 .ph img{
    width: 95%;
}
.conC .container04 p{
    margin-top:5vh;
    color: #fff;
}
.conC .container04 .ph{
    flex:0 0 100%;
}
.conC .container04 .cececenter{
    display: block;
   width: 90%;
}
  /*「お客様のお手元」*/
.conC .container05{
    margin-top:2vh;
    margin-bottom: 2vh;
    margin-left: 4vh;
    margin-right: 4vh;
    padding-bottom: 2vh;
    display: block;
}
.conC .container05 .left{
    width: 100%;
    margin: 0 5vw;
    flex: 0 0 100%;
    }
.conC .container05 .left img{
    width: 100%;
}
.conC .container05 .ph img{
    display: none;
}
.conC .container05 p{
    margin-top:5vh;
    color: #fff;
}
.conC .container05 .cececenter{
    display: block;
   width: 90%;
}
 /*使い終わった容器」*/
.conC .container06{
    margin-top:2vh;
    margin-bottom: 2vh;
    margin-left: 4vh;
    margin-right: 4vh;
    display: block;
}
.conC .container06 .left{
    width: 100%;
    margin: 0 5vw;
    flex: 0 0 100%;
}
.conC .container06 .left img{
    width: 100%;
}
.conC .container06 .ph img{
    width: 95%;
}
.conC .container06 p{
    margin-top:5vh;
    color: #fff;
}
.conC .container06 .ph{
    flex:0 0 100%;
}
.conC .container06 .cececenter{
    display: block;
   width: 90%;
}
    
/*sdgs*/
.sdgs{
    display: flexbox;
    flex-wrap: wrap;
    align-items: flex-start;
}
.sdgs .text{
    order: 1;
    margin-top: 3vh;
    padding: 5vh;
    width: 95%;
}
 .sdgs img{
   order: 2;
   margin: 0 auto;
}
.sdgs .text h3{
    margin-bottom: 2vh;
}
 .sdgs .text p{
   font-size: 0.8em;
}
.sdgs .text .small{
    margin-top: 2vh;
   font-size: 0.6em;
}
.sdgs .text {
     margin-left: 0;
    }
/*------切り替えると---------*/
.kirikae{
    padding-bottom: 2vh;
}
.kirikae .center .text{
    width:70%;
    margin:  2vh auto;
}
  .kirikae .center .text p{
    font-size: 0.9em;
}
 .kirikae .center .yazirusi{
    width: 40%;
}
.kirikae .center .text img{
    margin: auto;
    width: 100%;
}
    .kirikae .exsample{
    width: 70%;
    display: block;
    margin: 5vh auto;
}
    .kirikae .exsample .small{
    margin: 3vh 0;
    width: 100%;
}
  .kirikae .exsample img{
    width: 50%;
}
    .kirikae .exsample p{
        margin-right: 0;
        font-size: 0.9em;
    }
.kirikae .centercenter{
    display: block;
    margin:2vh auto;
    width: 80%;
}
.kirikae .centercenter img{
   width: 100%;
    margin: auto;
}
.kirikae .centercenter p{
    margin: 1vh auto;
    width: 90%;
    font-size: 0.8em;
}
/*---------3つのプラン---------*/
.conD  .containerA h4{
    padding-top: 2vh;
}
.conD .plan img{
    margin-top: 4vh;
    width: 90%;
    height: auto;
}
.conD .containerB {
    padding: 2vh;
}
.conD .containerB p {
    width: 90%;
}
 /*---------まとめ---------*/
.conE .containerA{
    display:flex;
    padding-top: 8vh;
    align-items: center;
}
.conE .containerA img{
    width: 90vw;
    margin: 0 auto;
}
.conE .containerB .matome{
   display: block;
   padding: 4vh 2vh;
}
.conE .containerB .matome img{
   width: 100%;
}
.conE .containerB p{
    margin-top: 0vh;
    padding-bottom: 8vh;
    width: 80vw;
    padding-left: 10vw;
    padding-right:10vw;
}
/*---------お申込み---------*/
/*01*/
 .conG .text img{
    width: 100%;
}
.conG .OFF img{
    width: 100%;
    padding-bottom: 4vh;
}
/*02*/
.order_kigyou{
    margin-top: 8vh;
    margin-left: 4vw;
    margin-right: 4vw;
    }
    .order_kigyou img{
    width: 95vw;
    }
.toiawase .quon img{
    width:85%;
    margin-left: auto;
    margin-right: auto;
}
 .toiawase .quon .button img{
    width:45%;
    margin-left: auto;
    margin-right: auto;
     margin-bottom: 10%;
} 
.toiawase{
    display: block;
    justify-content: center;
    margin-bottom: 10vh;
}
.toiawase .crecos img{
    width:85%;
    margin-left: auto;
    margin-right: auto;
}
 .toiawase .crecos .button img{
    width:45%;
    margin-left: auto;
    margin-right: auto;
     margin-bottom: 10%;
} 
/*---------フッター---------*/
footer{
    bottom: auto;
    }

footer .cresit{
    display: block;
}
footer .cresit .long img{
    width: 50%;
    right: 2vw;
    top: 4vh;
}
footer .logo img{
     width: 25%;
    left: 2vw;
    top: 3vh;
}
}