@charset "UTF-8";
:root{
  --mainColor:#17775E;
  --subColor:#cd4622;
  --BEG:#FFF0D2;
  --ASH:#f8f4e9;
  --GRN: #3c8700;
  --GRY: #757575;
  --RED: #d50000;
  --text:#2e2926;
  --mainAnime:all .3s ease;
  --shadow:0 1px 10px rgba(6,0,1,.06)
}

@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?avaq3d');src:url('../fonts/icomoon.eot?avaq3d#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?avaq3d') format('truetype'),url('../fonts/icomoon.woff?avaq3d') format('woff'),url('../fonts/icomoon.svg?avaq3d#icomoon') format('svg');font-weight:normal;font-style:normal}

[class^="icon-"]::after{
  font-family:'icomoon' !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.icon-home::after{content:"\e401"}
.icon-play::after{content: "\e402"}
.icon-pause::after{content: "\e403"}
.icon-plus::after{content: "\e404"}
.icon-minus::after{content: "\e405"}
.icon-mail::after{content: "\e406"}
.icon-arrowL::after{content: "\e408";margin-left:.5em;}
.icon-arrowR::after{content: "\e409";margin-left:.5em;}
.icon-arrowB::after{content: "\e410";margin-left:.5em;}
.icon-arrowT::after{content: "\e411";margin-left:.5em;}
.icon-blank::after{content: "\e414";margin-left:.5em;}
.icon-pdf::after{content: "\e415";margin-left:.5em;}
.icon-excel::after{content: "\e416";margin-left:.5em;}
.icon-word::after{content: "\e417";margin-left:.5em;}
.icon-img::after{content: "\e418";margin-left:.5em;}
.icon-text::after{content: "\e419";margin-left:.5em;}
.icon-fb::after{content: "\e420"}
.icon-x::after{content: "\e421"}
.icon-ig::after{content: "\e422"}

.btn .icon-x::after,.btn .icon-mail::after,
.txtLink .icon-x::after,.txtLink .icon-mail::after{margin-left:.5em;}


/* header
-------------------------------------*/
#campaignHeader{position:fixed;width:100%;z-index:20;display:flex;align-items:center;justify-content:space-between;height:70px;padding:10px 18px;background:#FFF;border-bottom:1px solid #EEE}
#siteName h1{margin:0;line-height:0}
#siteName img{width:150px}
#campaignNav ul{display:none}
.xLink{margin:0}
.xLink a{padding:7px 13px;color:#FFF;background:#111;border-radius:20px;font-size:.8em;font-weight:bold;text-decoration:none;transition:var(--mainAnime)}
.xLink a:hover{background-color:var(--subColor);}
.inner{
  width:90%;
  max-width:1040px;
  margin:0 auto;
  padding:min(10vw,56px) 0 min(8vw,40px);
}
.anchor{
  display:flex;
  flex-wrap:wrap;
  list-style:none;
  padding:0;
}
.anchor li{
  margin:0 .25em .5em;
}
.txtLink a{
  display:inline-block;
  padding:.3em 1em;
  border:1px solid var(--mainColor);
  border-radius:8px;
  font-weight:bold;
  color:var(--mainColor);
  text-decoration:none;
  transition:var(--mainAnime)
}
.txtLink a:hover{
  background-color:var(--mainColor);
  color:#FFF;

}
.anchor li.txtLinkRED{
  width:100%;
}
.txtLinkRED a{
  border-color:var(--subColor);
  color:var(--subColor);
}
.txtLinkRED a:hover{
  background-color:var(--subColor);
}

.secTtl{
  text-align:center;
}
.secTtl p{
  margin-bottom:.4em;
  font-size:.75em;
  font-weight:bold;
  color:var(--mainColor);
}
.secTtl h2{
  margin:0 0 20px;
  color:var(--mainColor);
  font-size:min(7.5vw,2.3em);
  font-weight:bold;
  letter-spacing:-.05em;
  line-height:1.25;
  text-align:center;
}

/* main visual
-------------------------------------*/
main{
  padding-top:70px;
}
#mainVisual{
  background:url(../img/bg.jpg) repeat var(--BEG);
}
#mainVisual .inner{
  padding:min(6vw,32px) 0 min(8vw,40px);
}
h1.mainImg{
  text-align:center;
}
.mainTxt{
  padding:0 4vw;
}
.mainTxt h2{
  margin:0 0 20px;
  color:var(--mainColor);
  font-size:2.3em;
  font-weight:bold;
  letter-spacing:-.05em;
  line-height:1.25;
  text-align:center;
}
.campaignDate{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0 16px;
  align-items:flex-end;
  margin:min(2vw,16px) 0 min(6vw,24px);
  padding:8px 0;
  border-top:2px solid var(--mainColor);
  border-bottom:1px solid #C9B8AB; 
}
.campaignDate dt{
  color:var(--mainColor);
  font-weight:bold;
}
.campaignDate dd{
  padding:0;
  margin:0;
  font-weight:bold;
  line-height:1.25;
}
.campaignDate dd strong{
  font-size:2em;
}
.campaignDate .caDateYoubi{
  display:inline-block;
  width:1.6em;
  height:1.6em;
  margin-right:.5em;
  transform: translateY(-.2em);
  background-color:#282828;
  border-radius:50%;
  color:var(--BEG);
  text-align:center;
  line-height:1.6;
}
.mainTxt .btn{
  text-align:center;
}


/* overview
-------------------------------------*/
.overviewTtl{
}
.overviewTtl h2{
  margin-bottom:.4em;
  font-weight:bold;
  font-size:.75em;
  color:var(--mainColor);
  text-align:center;
}
.overviewTtl h3{
  margin:0 0 20px;
  color:var(--mainColor);
  font-size:min(7.5vw,2.3em);
  font-weight:bold;
  letter-spacing:-.05em;
  line-height:1.25;
  text-align:center;
}

/* about food loss
-------------------------------------*/
#about{
  background-color:var(--ASH);
}
.aboutBox{
  background:#FFF;
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
  /* padding:16px; */
}
.aboutBox{
  margin-bottom:min(4vw,16px);
}
.aboutBox:last-of-type{
  margin-bottom:min(6vw,32px);
}
.aboutBoxImg{
}
.aboutBoxTxt{
  padding:16px 16px 1px;
}
.aboutBox h3{
  font-size:min(5vw,1.2em);
}
.aboutCatch{display:flex;flex-direction:column;justify-content:center;min-height:190px;padding:35px 20px;background:var(--yellow);text-align:center;clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%)}
.aboutCatch strong{font-size:1.25em}
.aboutCatch span{font-size:.9em}
.aboutTxt{padding:28px 22px}

/* how to join
-------------------------------------*/
#join{
  background-color:var(--subColor);
}
#join .secTtl p{
  color:rgba(255,255,255,.7);
}
#join .secTtl h2{
  color:#FFF;
}
#join .secTtl h2 span{
  display:inline-block;
  margin-left:.1em;
  margin-right:-.3em;
  letter-spacing:.02em;
}
.stepList{
  gap:18px 0;
  margin-bottom:min(6vw,32px);
}
.stepItem{
  height:100%;
  position:relative;
  padding:40px 16px 8px;
  background:#FFF;
}
.stepNum{
  position:absolute;
  top:-10px;
  background-color:var(--mainColor);
  border-radius:8px;
  padding:.3em .5em;
  color:#FFF;
  margin:0;
  font-weight:bold;
  line-height:1;
}
.stepNum span{font-size:1.5em}
.stepImg{
  margin-bottom:16px;
  text-align:center;
}
.stepImg img{
  width:min(50vw,150px);
}
.stepItem h3{
  font-size:min(5.2vw,1.2em);
}


/* post ideas
-------------------------------------*/
.postTtl h2{
  margin-bottom:.4em;
  font-weight:bold;
  font-size:.75em;
  color:var(--mainColor);
  text-align:center;
}
.postTtl h3{
  margin:0 0 20px;
  color:var(--mainColor);
  font-size:min(7.5vw,2.3em);
  font-weight:bold;
  letter-spacing:-.05em;
  line-height:1.25;
  text-align:center;
}
.ideaList{
  justify-content:center;
  gap:10px 0
}
.ideaItem{
  height:100%;
  padding:16px 8px 1px;
  background:var(--ASH);
  border-radius:16px;
  text-align:center
}
.ideaItem > span{
  font-size:2em
}
.ideaItem h3{
  margin:0 0 8px;
  font-size:min(4vw,.9em)
}
.ideaItem p{
  font-size:.85em
}

.postSample{
  gap:14px 0;
  margin-top:min(8vw,40px);
  margin-bottom:16px;
}
.postItem{
  height:100%;
  padding:16px 16px 1px;
  border:1px solid var(--GRY);
}
.postHead{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:8px;
}
.postHead > b{display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:#FFF;background:#111;border-radius:50%}
.postHead span{font-size:.85em;font-weight:bold}
.postHead small{display:block;color:#777;font-weight:normal}
.postItem > p{font-size:.85em;}
.postItem > p strong{color:#1D9BFF}
.postImg{
  width:90%;
  margin:0 auto 16px;
  text-align:center;
}
.postImg img{
  border-radius:16px;
  overflow:hidden;
}
/* post ideas
-------------------------------------*/
/* #corporate{
  background-color:var(--ASH);
} */
.corpList{
  gap:18px 0;
  margin-bottom:min(6vw,32px);
}
.corpItem{
  border:1px solid #CCC;
  background-color:#FFF;
  height:100%;
}
.corpItem h3 {
  margin-bottom:8px;
  font-size: min(5.2vw, 1.2em);
}
.corpItem h3 span{
  display:block;
  margin-bottom:4px;
  font-size:.75em;
}
.corpImg{
  margin-bottom:10px;
}
.corpTxt{
  padding:16px 16px 1px;
}

/* special content
-------------------------------------*/
#special{
  background:var(--ASH)
}
.specialImg{
  text-align:center;
}
.specialImg img{
  border-radius:100%;
  width:min(45vw,260px);
}
.specialImg p{
  margin-top:4px;
}


/* present
-------------------------------------*/
#present{
  background-color:var(--subColor);
  color:#FFF;
}
#present .secTtl p{
  color:rgba(255,255,255,.7);
}
#present .secTtl h2{
  color:#FFF;
}
.presentList{
  gap: 18px 0;
  margin-bottom: min(6vw, 32px);
}
.presentItem{
  height:100%;
  background-color:#FFF;
  color:var(--text);
}
.presentTxt{
  padding:16px 16px 1px;
}
.presentTxt p{
  margin-bottom:.5em;
  font-weight:bold;
  line-height:1;
  color:var(--subColor);
}
.presentTxt p span{
  font-size:2em;
}
.presentTxt h3{
  font-size:1.1em;
  font-feature-settings: "palt";
}

/* entry flow
-------------------------------------*/
.flowList{
  padding:0;
  list-style:none
}
.flowList li{
  display:flex;
  gap:18px;
  width:100%;
  padding:16px 0;
  border-bottom:1px solid #C4C1B8
}
.flowNum{
  width:1.5em;
  color:var(--mainColor);
  font-size:2em;
  font-weight:bold;
  line-height:1;
}
.flowTxt{
  width:calc(100% - 1.5em);
}
.flowTxt h3{margin:0;font-size:1em;color:var(--mainColor);}
.flowList p{margin:2px 0;font-size:.85em}
.attention{margin-top:30px;padding:18px;background:#FFF;border:2px solid var(--RED)}
.attention strong{color:var(--RED)}
.attention p{margin-bottom:0;font-size:.85em}

/* terms
-------------------------------------*/
#terms{
  background-color:var(--ASH);
}
.termsList{
  padding:0;
  margin-bottom:min(8vw, 40px);
  list-style:none;
  border-top:1px solid #C0C0C0
}
.termsList li{
  position:relative;
  border-bottom:1px solid #C0C0C0;
  padding:.8em 0 .8em 32px;
  font-size:.9em
}
.termsList li:before{
  content:"✓";
  position:absolute;
  top:0em;left:2px;
  color:var(--mainColor);
  font-weight:bold;
  font-size:1.6em;
}

.termsDetail{
  border:1px solid var(--mainColor)
}
.termsDetail:first-of-type{
  margin-bottom:16px;
}
.termsDetail summary{padding:16px 24px;color:var(--mainColor);
}
.termsDetail summary h3{
  display:inline-block;
  margin:0;
  font-size:1.1em;
}
.termsDetail > div{padding:0 18px 18px;font-size:.85em}
.termsDetail ul{
  padding-left:1.2em;
}
/* contact
-------------------------------------*/
#contact{
  background-color:#302B28;
  color:#FFF;
}
#contact .secTtl h2,#contact .secTtl p{
  color:#FFF;
}
.contactBox h3{
  font-size:1.1em;
}
.contactBox .txtLink a{
  border-color:#FFF;
  color:#FFF;
}
.contactBox .txtLink a:hover{
  background-color:#FFF;
  color:var(--mainColor);
}


/* footer
-------------------------------------*/
footer{
  border-top:1px solid rgba(255,255,255,.3);
  padding:45px 5% 120px;
  background:#302B28;
  color:#FFF;
  text-align:center
}
.footLogo img{
  width:190px;
  margin:0 auto 25px;
  filter:brightness(0) invert(1)
}
.footNav a{
  color:#FFF;
}
#copyright{
  margin-top:16px;
  opacity:.6;
  font-size:.8em
}
#fixedEntry{
  position:fixed;
  right:min(2vw,24px);
  bottom:min(2vw,24px);
  z-index:30;
  margin:0
}
#fixedEntry a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:9em;
  height:9em;
  background:#111;
  border-radius:50%;
  box-shadow:0 5px 18px rgba(0,0,0,.3);
  color:#FFF;
  font-size:.75em;
  font-weight:bold;
  line-height:1.5;
  text-align:center;
  text-decoration:none;
  transition:var(--mainAnime)
}
#fixedEntry span{font-size:1.3em;}
#fixedEntry a:hover{
  background-color:var(--subColor);
}
#pagetop{position:fixed;right:0;bottom:0;z-index:29;margin:0}
#pagetop a{display:none}

/* SP only only */
@media screen and (max-width:767px){
}
/* TB only */
@media screen and (min-width:768px) and (max-width:1019px){
  .campaignDate{
    grid-template-columns:10em auto;
  }
  .corpItem{
    display:grid;
    min-height:240px;
    grid-template-columns:240px auto;
  }
  .corpImg{
    align-self:center;
    margin-bottom:0;
  }
  .stepItem{
    display:grid;
    grid-template-columns:150px auto;
    gap:0 16px;
    align-items:center;
  }
  .stepImg img{
    width:100%;
  }

}
/* TB over */
@media screen and (min-width:768px){
  .btn a{
    font-size:1.2em;
  }
  .mainTxt{
    text-align:center;
  }
  .campaignDate dt{
    font-size:1.2em;
  }
  .aboutLead,.ideaLead,.presentLead,.corpLead{
    text-align:center;
  }
  .aboutWrap{
    margin-top:min(4vw,32px);
  }
  .postHead span,.postItem > p{
    font-size:1em;
  }
  .corpList{
    margin-top:min(4vw,32px);
  }
  .specialWrap{
    align-items:center;
    margin-top:min(4vw,32px);
  }
  .specLead{
    margin-bottom:2em;
  }
  .presentList{
    margin-top:min(4vw,32px);
  }
  .flowList,.attention,.termsList,.termsDetail{
    max-width:50em;
    margin-left:auto;
    margin-right:auto;
  }
  .flowTxt h3{
    font-size:1.5em;
  }
  .flowList p{
    font-size:1em;
  }
  .attention p{
    font-size:1em;
  }
  .termsList li{
    font-size:1em;
  }
  #fixedEntry a{
    width:150px;
    height:150px;
    font-size:1.2em;
  }
  footer{
    padding-bottom:45px;
  }
}
/* PC over */
@media screen and (min-width:1020px){
  #campaignNav{
    display:flex;
    align-items:center;
    gap:0 24px
  }
  #campaignNav ul{
    display:flex;
    gap:18px;
    margin:0;
    padding:0;
    list-style:none;
    font-size:.8em;
    font-weight:bold
  }
  #mainVisual .inner{
    display:flex;
    align-items:center;
    gap:64px;
  }
  h1.mainImg{
    padding:0;
    margin:0;
  }
  .mainTxt{
    width:45em;
    padding:16px 0 0;
  }
  #overview .overviewTtl{
    width:29em;
  }
  .overviewTtl h2,.overviewTtl h3{
    text-align:left;
  }
  .overviewCont{
    width:calc(100% - 29em);
  }
  .ideaList{
    margin-right: -8px;
    margin-left: -8px;
  }
  .ideaList > div{
    width:20%;
    padding:0 8px;
  }
  .presentList.colGroup{
    margin-left:-8px;
    margin-right:-8px;
  }
  .presentList.colGroup [class^="col-"]{
    padding-left:8px;
    padding-right:8px;
  }
  .contactBox{
    text-align:center;
  }
  .contactBox .anchor{
    justify-content:center;
  }

}


@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}