@charset "UTF-8";
/* CSS Document */

/* common */
*, *:before, *:after {
  margin:0;
  padding:0;
  box-sizing:border-box;
  border:0;
  outline:0
}
html {
  font-size: 62.5%;
}
body {
  line-height: 1.75;
  font-size: 14px;
  font-size: 1.4rem;
  color: #3F2922;
  font-family: "M PLUS Rounded 1c","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
  animation: contentsfadeIn 2s ease 0s 1 normal;
  -webkit-animation: contentsfadeIn 2s ease 0s 1 normal;
  letter-spacing: calc((50 / 1000)*2em);
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
a {
  text-decoration: none;
  color: #333;
  transition: all 0.3s 0s;
}
a:hover,
a:focus {
  text-decoration: none;
  outline: none;
  opacity: .7;
}
ul,ol,li {
  list-style: none;
}
@keyframes contentsfadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}
@-webkit-keyframes contentsfadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}
div#container {
  background-color: #f7cb41;
  background-image:url(images/bg.png),
  repeating-linear-gradient(45deg, #f7ce42, #f7ce42 7px,
  transparent 0, transparent 14px);
  background-size: 100vw auto, auto auto;
  background-repeat: repeat-y, repeat;
  background-position: top center, top center;
}

/* header */
.logo {
  background-color: #fff;
  padding: 0 2em;
}
.logo div {
  max-width: 1100px;
  position: relative;
  margin: 0 auto;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 1em 0;
}
.logo img {
  margin: 0 1em 0 0;
}
.logo_l {
  width: calc(100% - (150px + 2em));
}
.backtop {
  position: absolute;
  top: 0;
  right: 0;
}
.backtop {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.backtop a {
  background-color: #F2922A;
  color: #fff;
  display: flex;
  justify-content: center;
  width: 150px;
  align-items: center;
  height: 100%;
}
.main_logo {
  text-align: center;
  margin: 0 auto;
  background-image: url(images/top_l.png), url(images/top_r.png);
  background-repeat: no-repeat no-repeat;
  background-position: top left, top right;
  background-size: 18vw, 18vw;
}
.eyecatch {
  padding: 1em 28px;
  text-align: center;
  max-width: 1100px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 auto;
  display:-webkit-box;
  display:-ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* update */
.top_update {
  padding: 0 2em;
  margin: 2em auto 3em;
  text-align: center;
}
.top_update dl {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top_update span {
  font-size: 26px;
  font-size: 2.6rem;
  margin-right: 14px;
}
.top_update dt {
  display: flex;
  align-items: center;
}
.top_update dt:after {
  content: "";
  display: inline-block;
  background-image: linear-gradient(-0deg, transparent 49%, #4c202e 49%, #4c202e 51%, transparent 51%, transparent);
  width: 2em;
  height: 2em;
  vertical-align: middle;
  margin: 0 1em;
  transform: rotate(-45deg);
}
.top_update dt img {
  margin: 0 1em 0 0;
}
.top_update dd {
  line-height: 2;
}

/* nav */
nav {
  padding: 0 2em;
  margin: 2em auto 3em;
  text-align: center;
}
nav ul {
  max-width: 1100px;
  margin: 2em auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
nav li {
  width: 32%;
}

/* topic_path */
.topic_path {
  margin: 3em 2em;
}
.topic_path ul {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.topic_path li {
  padding: 0 2em 0 0 ;
  position: relative;
}
.topic_path li:after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  right: 1em;
  width: 4px;
  height: 4px;
  border-top: 1px solid #003567;
  border-right: 1px solid #003567;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.topic_path li:last-child {
  padding: 0;
}
.topic_path li:last-child:after {
  display: none;
}

/* main */
#activity {
  padding: 0 2em;
}
#activity div {
  margin: 70px auto 120px;
  max-width: 1100px;
  font-size: 16px;
  font-size: 1.6rem;
  text-align: center;
  background-color: rgba(255, 255, 255, .3);
  border-radius: 20px;
  padding: 3em 2em;

}
#activity h2 {
  margin: 0 auto 1em;
}
.btn_news {
  background-color: #f2922a;
  color: #fff;
  max-width: 450px;
  margin: 3em auto 0;
  padding: 1.5em 1em;
  border-radius: 5px;
  display: block;
}

/* backnumber */
.backnumber {
  margin: 0 auto 80px;
}
.backnumber h2 {
  background-color: #F2922A;
  padding: 1em;
  color: #fff;
  font-size: 20px;
  font-size: 2.0rem;
  text-align: center;
  margin: 0 0 1em;
}
.backnumber ul {
  max-width: calc(980px + 4em);
  display: flex;
  flex-wrap: wrap;
  margin: .5em auto 2em;
  padding: 0 2em;
}
.backnumber ul li {
  margin: 0 1% 1em;
  width: 23%;
}
.backnumber ul li a {
  position: relative;
  display: inline-block;
}
.backnumber ul li .number {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 10px;
  margin: 0;
  padding: 5px 0;
  z-index: 2;
  width: 50px;
  text-align: center;
  font-size: 12px;
  font-size: 1.2rem;
  color: #54504C;
  background-color: #FFD400;
}
.backnumber ul li .number:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
  border-left: 25px solid #FFD400;
  border-right: 25px solid #FFD400;
  border-bottom: 10px solid transparent;
}

/*-----------------
footer
-----------------*/
#pagetop {
  margin: -45px 0 0;
}
#pagetop a {
  background-color: #E6E6E6;
  display: block;
  width: 90px;
  height: 45px;
  border-radius: 45px 45px 0 0;
  margin: 0 auto;
  text-align: center;
  padding: 0.8em 0 0;
}
footer {
  border-top: 20px solid #E6E6E6;
  padding: 0 28px;
  font-size: 13px;
  font-size: 1.3rem;
  background-color: #fff;
}
.footer_contents {
  max-width: 1100px;
  margin: 0 auto;
  display:-webkit-box;
  display:-ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 3em 0;
  align-items: center;
}
.footer_listWrap {
  align-self: center;
  width: 48%;
  padding-right: 4%;
}
.footer_listWrap ul {
  margin: 1em 0 0 0;
  display:-webkit-box;
  display:-ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.footer_listWrap li {
  margin: 0 0 15px 0;
  width: 32%;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.footer_listWrap p {
  font-size: 22px;
  font-size: 2.2rem;
}
.footer_listWrap li.shop_search {
  display: none;
}
.footer_contact {
  width: 50%;
  border-left: 1px solid #E6E6E6;
  padding-left: 4%;
}
.footer_contact dt {
  margin: 0 0 1em 0;
  text-align: center;
}
.footer_contact dd {
  display:-webkit-box;
  display:-ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.footer_contact dd p {
  margin: 0 0 2%;
  width: 49%;
  display: block;
}
.footer_contact dd a {
  background-color: #F2922A;
  padding: 1em .5em;
  display:-webkit-box;
  display:-ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
  width: 100%;
  height: 100%;
  align-items: center;
  text-align: center;
  border-radius: 5px;
}
.copy {
  padding: 2em;
  text-align: center;
  font-size: 12px;
  font-size: 1.2rem;
  background-color: #fff;
}

/* accordion */
.accordion {
  font-size: 16px;
  font-size: 1.6rem;
  text-align: center;
  position: relative;
}
.accordion_icon,
.accordion_icon span {
  display: block;
  transition: all .4s;
  cursor: pointer;
}
.accordion_icon {
  position: absolute;
  width: 28px;
  height: 28px;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #3F2922;
  border-radius: 20px;
}
.accordion_icon span {
  position: absolute;
  left: 7px;
  width: 50%;
  height: 2px;
  background-color: #fff;
  border-radius: 4px;
}
.accordion_icon span:nth-of-type(1) {
  display:none;
}
.accordion_icon span:nth-of-type(2) {
  top: 13px;
  transform: rotate(180deg);
}
.active .accordion_icon span:nth-of-type(1) {
  top: 13px;
  transform: rotate(0deg);
  display: block;
}
.active .accordion_icon span:nth-of-type(2) {
  top: 13px;
  transform: rotate(90deg);
}
.accordionBox {
  padding: 1em 0 0;
}

/* event */
.finish_text {
  background-color: #eee;
  font-size: 12px;
  font-size: 1.2rem;
  padding: .5em 1em;
  margin-bottom: 2em;
  display: inline-block;
}
.finish_text br {
  display: none;
}
.event_backnumber {
  padding: 0 0 120px;
}
.event_backnumber h2 {
  background-color: #F2922A;
  padding: 1em;
  color: #fff;
  font-size: 20px;
  font-size: 2.0rem;
  text-align: center;
  margin: 0 0 1em;
}
#event_container {
  max-width: calc(1100px + 4em);
  padding: 0 2em;
  margin: 0 auto;
}
.event_container_contents {
  margin-top: 2em;
  text-align: center;
  background-color: rgba(255, 255, 255, .3);
  border-radius: 20px;
  padding: 3em 2em;
}
.event_backnumber_list {
  display: flex;
  text-align: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.event_backnumber_list li {
  width: 32%;
  margin: 0 0 1%;
}
.event_backnumber_list::after{
  content: "";
  display: block;
  width: 32%;
}
.event_backnumber_list li a {
  display: flex;
  padding: 1em;
  border-radius: 3px;
  background-color: #fff;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.event_backnumber_list a:hover,
.event_backnumber_list a.active {
  color: #fff;
  background-color: #ea613b;
  opacity: 1;
}
.event_backnumber_top .event_backnumber_list li:first-child a {
  color: #fff;
  background-color: #ea613b;
}

/* sdgs */
.sdgs_backnumber {
  padding: 0 0 120px;
}
.sdgs_backnumber h2 {
  background-color: #F2922A;
  padding: 1em;
  color: #fff;
  font-size: 20px;
  font-size: 2.0rem;
  text-align: center;
  margin: 0 0 1em;
}
#sdgs_container {
  max-width: calc(1100px + 4em);
  padding: 0 2em;
  margin: 0 auto;
}
.sdgs_container_contents {
  margin-top: 2em;
  text-align: center;
  background-color: rgba(255, 255, 255, .3);
  border-radius: 20px;
  padding: 3em 2em;
}
.sdgs_backnumber_list {
  display: flex;
  text-align: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.sdgs_backnumber_list li {
  width: 32%;
  margin: 0 0 1%;
}
.sdgs_backnumber_list::after{
  content: "";
  display: block;
  width: 32%;
}
.sdgs_backnumber_list li a {
  display: flex;
  padding: 1em;
  border-radius: 3px;
  background-color: #fff;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.sdgs_backnumber_list a:hover,
.sdgs_backnumber_list a.active {
  color: #fff;
  background-color: #ea613b;
  opacity: 1;
}
.sdgs_backnumber_top .sdgs_backnumber_list li:first-child a {
  color: #fff;
  background-color: #ea613b;
}

@media screen and (max-width: 1100px){
  .footer_listWrap li {
    width: 48%;
  }
}

@media screen and (max-width: 786px){
  .backtop {
    height: 50%;
  }
  .logo_l {
    width: 100%;
  }
  .logo img {
    display: block;
    margin: 0 0 15px;
  }
  .footer_contents {
    display: block;
    padding: 3em 0 1em;
  }
  #activity h2 {
    line-height: 1.2;
  }
  .footer_contact {
    width: 100%;
    padding: 2em 0 0 0;
    border-left: 0;
    border-top: 1px solid #FFE3E7;
  }
  .footer_listWrap {
    text-align: center;
    width: auto;
  }
  .footer_listWrap ul {
    text-align: left;
    margin: 1em 0;
  }
  .footer_listWrap a {
    font-size: 3vw;
  }
  .footer_contact dd a {
    font-size: 2vw;
  }
  .copy {
    text-align: left;
  }1  .top_update {
    padding: 2em 0;
  }
  .top_update dl {
    display: block;
  }
  .top_update dt {
  justify-content: center;
  }
  .top_update dt:after {
    display: none;
  }
  .top_update span {
    font-size: 20px;
    font-size: 2.0rem;
  }
  #activity h2 {
    width: 40vw;
  }
  .event_backnumber_list li {
    width: 100%;
  }
  .sdgs_backnumber_list li {
    width: 100%;
  }
  .accordionBox {
    display: none;
  }
  .active .accordion_icon span:nth-of-type(1) {
    display:none;
  }
  .active .accordion_icon span:nth-of-type(2) {
    top: 13px;
    transform: rotate(180deg);
  }
  .accordion_icon span:nth-of-type(1) {
    top: 13px;
    transform: rotate(0deg);
    display: block;
  }
  .accordion_icon span:nth-of-type(2) {
    top: 13px;
    transform: rotate(90deg);
  }
  .finish_text br {
    display: block;
  }
  nav li {
    width: 50vw;
    margin: 0 auto;
  }
  nav {
    margin: 2em auto;
  }
  #activity div {
    margin: 0 auto 80px;
    padding: 1em;
  }
  .top_update {
    margin: .5em auto;
    font-size: 12px;
  }
  .topic_path {
    margin: 1em 2em;
    font-size: 12px;
    font-size: 1.2rem;
  }
  .event_container_contents {
    padding: 1em;
  }
  .sdgs_container_contents {
    padding: 1em;
  }
  .backnumber ul li {
    width: 31%;
  }
  .event_backnumber {
    padding: 0 0 80px;
  }
  .sdgs_backnumber {
    padding: 0 0 80px;
  }
}

.soon {
  padding: 0 2em;
  text-align: center;
}
.soon p {
  font-size: 30px;
  font-size: 3.0rem;
}