@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');


#contentsWrapper #topBanner .topVisual {
  margin-top: -7.0em;
  padding-bottom: 2.0em;
}
#contentsWrapper {
  background: linear-gradient(#e7fdf3, #b5eafe);
}
#contentsWrapper #contentsWidthWrapper {
  background-color: #fff;
}
#contentsWrapper .secConceptInfo .concept {
  background-image: url("../images/bgContents01.jpg");
  background-size: cover;
  background-position: center;
}
#contentsWrapper .secConceptInfo .conceptPopup {
  background-image: url("../images/bgContents02.jpg");
  background-size: cover;
  background-position: center;
  padding-bottom: 50%;
}
#contentsWrapper .secConceptInfo .concept h2 {
  padding-top: 4.0em;
}
#contentsWrapper .alignLeft {
  margin-left: -3.0em;
}
#contentsWrapper .secConceptInfo .conceptPopup div {
  padding: 4.4em 0;
}
#contentsWrapper .secConceptInfo .conceptPopup ul {
  position: relative;
}
#contentsWrapper .secConceptInfo .conceptPopup .popup01 {
  position: absolute;
  top: 8.0em;
  left: 1.0em;
  z-index: 2;
  width: 53%;
}
#contentsWrapper .secConceptInfo .conceptPopup .popup02 {
  position: absolute;
  top: 0;
  right: 2.0em;
  z-index: 1;
  width: 53%;
}
#contentsWrapper .secContentsLineup {
  padding: 8.2em 0 4.0em;
  background-image: url("../images/bg.png");
  background-size: cover;
  background-position: top;
}
#specialFooter {
  background-color: #6dd5fb;
  margin: 0;
}
#goProductPage a {
  transform: translateX(-50%) scale(0.8);
}
#goBack {
  transform: scale(0.8);
  bottom: -1.0em;
  right: -1.0em;
}
#contentsWrapper .note {
  color: #FF0000;
  font-size: 1.4rem;
  line-height: 1.6;
  padding: 1.6em 0;
  width: 50%;
  text-align: left;
  margin: 0 auto;
}
#contentsWrapper .note:first-of-type {
  padding-bottom: 0;
}
@media screen and (max-width: 1280px) {
  #contentsWrapper .secConceptWrapper {
    width: 100%;
  }
  #contentsWrapper #topBanner .topVisual {
    width: 100%;
    margin-top: -7.0vw;
    padding-bottom: 2.0vw;
  }
  #contentsWrapper .secConceptInfo .conceptPopup div {
    padding: 4.4vw 0;
    width: 80%;
    margin: auto;
  }
  #contentsWrapper .secConceptInfo .conceptPopup .popup01 {
    top: 1.4vw;
    left: 0;
  }
  #contentsWrapper .secConceptInfo .conceptPopup .popup02 {
    top: -6.0vw;
    right: 0;
  }
}
@media screen and (max-width: 800px) {
  #contentsWrapper #topBanner .topVisual {
    width: 100%;
  }
  #contentsWrapper .topLogo {
    padding-bottom: 2.0vw;
  }
  #contentsWrapper .productName {
    padding: 1.4vw 0;
  }
  #contentsWrapper .productName img {
    width: 80%;
  }
  #contentsWrapper .productVisual {
    padding: 5.2vw 0;
  }
  #contentsWrapper .secConceptWrapper h2 {
    padding-bottom: 3.4vw;
  }
  #contentsWrapper .secConceptInfo ul {
    margin-top: 2.0vw;
  }
  #contentsWrapper .secConceptInfo .flexList2 > li {
    width: 49%;
    margin-bottom: 1.2vw;
  }
  #contentsWrapper .secConceptInfo .flexList2 > li:nth-child(2n) {
    margin-left: 1%;
  }
  #contentsWrapper .secConceptInfo .conceptPopup .popup01 {
    top: 2.0vw;
    left: 0;
  }
  #contentsWrapper .secConceptInfo .conceptPopup .popup02 {
    top: -4.0vw;
    right: 0;
  }
#contentsWrapper .secConceptInfo .concept h2 {
  padding-top: 4.0vw;
}
  #contentsWrapper .secContentsLineup {
    padding: 6.6vw 0 4.0vw;
  }
  #contentsWrapper .secContentsLineup h2 {
    padding-bottom: 3.4vw;
  }
#contentsWrapper .alignLeft {
  margin-left: 0;
}
  .copyright {
    width: 70%;
    margin: auto;
  }
  #goBack {
    transform: scale(0.6);
    bottom: -3.0vw;
    right: -3.0vw;
  }
  #goProductPage a {
    left: 30%;
  }
  #contentsWrapper .linkBan div {
    
  }
  #contentsWrapper .note {
    width: 90%;
    margin-bottom: 8.0vw;
    padding: 0;
  }
}
@media screen and (max-width: 460px) {
  #goBack {
    transform: scale(0.5);
    bottom: -14.0vw;
    right: -17.0vw;
  }
  
}