@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Licorice&family=Satisfy&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Licorice&family=Satisfy&family=Tsukimi+Rounded:wght@300;400;500;600;700&display=swap");
/*Zen Kaku Gothic New*/
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Licorice&family=Satisfy&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Licorice&family=Satisfy&family=Tsukimi+Rounded:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
html, body {
  margin: 0;
  padding: 0;
}

html {
  /* margin-top: 46px !important; */
  margin: 0;
}
@media screen and (min-width: 789px) {
  html {
    margin-top: 0 !important;
  }
}

@media screen and (max-width: 789px) {
  html {
    margin-top: 0 !important;
  }

  p {
    font-family: Zen Kaku Gothic New;
    margin: 0;
    font-size: 1.1rem;
  }

  span {
    font-family: Zen Kaku Gothic New;
  }
}
li {
  font-family: Zen Kaku Gothic New;
}

h1, h2, h3, h4, h5 {
  font-size: 1.6rem;
  font-family: Zen Kaku Gothic New;
  margin: 0;
  text-align: center;
  color: #696a6a;
  font-weight: 700;
}
@media (min-width: 768px) {
  h1, h2, h3, h4, h5 {
    font-size: 1.5rem;
    font-family: Zen Kaku Gothic New;
    margin: 0;
  }
}
@media only screen and (min-width: 1080px) {
  h1, h2, h3, h4, h5 {
    font-size: 2.5rem;
  }
}

body {
  background: #ffffff;
  /*遷移アニメーションと同じ色を指定*/
  /*
      @media (max-width: 1920px)  {
          max-width: 1920px;
          margin: 0 auto;
        }


      @media (min-width: 769px) and  (max-width: 1280px)  {
        max-width: 1280px;
        margin: 0 auto;
      }
  */
}
ul {
  padding: 0;
  margin: 0;
}

a {
  font-family: Zen Kaku Gothic New;
}

html {
  margin: 0;
}
@media screen and (max-width: 782px) {
  html html {
    margin: 0;
  }
}

@media screen and (max-width: 782px) {
  html {
    margin-top: 0 !important;
  }

  p {
    font-family: Zen Kaku Gothic New;
    margin: 0;
    font-size: 1.1rem;
  }

  span {
    font-family: Zen Kaku Gothic New;
    margin-bottom: 2rem;
    font-size: 1.5rem;
  }
}
@media (min-width: 1080px) {
  p {
    font-size: 1.6rem;
    font-family: Zen Kaku Gothic New;
  }

  span {
    font-family: Zen Kaku Gothic New;
  }
}
img {
  max-width: 100%;
}

@font-face {
  font-family: "SnellRoundhand";
  src: url("../fonts/snellroundhand.eot");
  /* IE 9 Compatibility Mode */
  src: url("../fonts/snellroundhand.eot?#iefix") format("embedded-opentype"), url("../fonts/snellroundhand.woff2") format("woff2"), url("../fonts/snellroundhand.woff") format("woff"), url("../fonts/snellroundhand.ttf") format("truetype"), url("../fonts/snellroundhand.svg#snellroundhand") format("svg");
  /* Chrome < 4, Legacy iOS */
}
@font-face {
  font-family: IPAex明朝;
  src: url("https://cdn.leafscape.be/IPAexfont/ipaexm_web.woff2") format("woff2");
}
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeUp2 {
  animation-name: fadeUpAnime2;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime2 {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.zoomOut {
  animation-name: zoomOutAnime;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes zoomOutAnime {
  0% {
    opacity: 1;
    transform: scale(2.5);
  }
  20% {
    opacity: 1;
    transform: rotate(45deg);
  }
  40% {
    opacity: 1;
    transform: rotate(195deg);
  }
  60% {
    transform: scale(1.5);
    opacity: 1;
    transform: rotate(-295deg);
  }
  80% {
    opacity: 1;
    transform: rotate(-365deg);
  }
  100% {
    transform: scale(0.2);
    opacity: 1;
  }
}
.fadeLeftp {
  animation-name: fadeLeftAnimep;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeLeftAnimep {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeRightp {
  animation-name: fadeRightAnimep;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-delay: 2s;
  opacity: 0;
}

@keyframes fadeRightAnimep {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInp {
  animation-name: fadeInAnimep;
  animation-duration: 3s;
  animation-delay: 4s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnimep {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.markertest {
  font-weight: bold;
  background: -webkit-linear-gradient(left, #ffe932 50%, transparent 50%);
  background: -moz-linear-gradient(left, #ffe932 50%, transparent 50%);
  background: linear-gradient(left, #ffe932 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% 0.8rem;
  background-position: 100% 0.5em;
  transition: 3s;
  animation-duration: 5s;
  animation-delay: 5s;
}
@media only screen and (min-width: 1080px) {
  .markertest {
    font-size: 2.5rem;
  }
}

.markertest.is-active {
  background-position: 0% 0.5em;
  background-size: 200% 1.5rem;
}

.zoomIn {
  animation-name: zoomInAnime;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes zoomInAnime {
  from {
    transform: scale(0.3);
  }
  to {
    transform: scale(1.2);
  }
}
/*枠線が伸びて出現*/
.line {
  position: relative;
  /* 枠線が書かれる基点*/
  padding: 2rem 0;
}

/*上下線*/
.line::before,
.line::after {
  position: absolute;
  content: "";
  width: 0;
  height: 1px;
  background: #333;
  /* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 0;
  background: #333;
  /* 枠線の色*/
}

/*上線*/
.line::before {
  top: 0;
  left: 0;
  animation: lineAnime 0.5s linear 0s forwards;
  /*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before {
  top: 0;
  right: 0;
  animation: lineAnime2 0.5s linear 0.5s forwards;
  /*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.line::after {
  bottom: 0;
  right: 0;
  animation: lineAnime 0.5s linear 1s forwards;
  /*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after {
  bottom: 0;
  left: 0;
  animation: lineAnime2 0.5s linear 1.5s forwards;
  /*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes lineAnime2 {
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}
/*枠線内側の要素*/
.line .lineinappear {
  animation: lineInnerAnime 0.5s linear 1.5s forwards;
  /*1.5秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0;
  /*初期値を透過0にする*/
}

@keyframes lineInnerAnime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/
.txt {
  display: flex;
  overflow: hidden;
  padding-top: 2em;
  /* 浮き上がる分の要素の領域の確保 */
}

@keyframes textanimation {
  0% {
    transform: translateY(2em);
  }
  50% {
    transform: translateY(-1em);
    /* 浮き上がるアニメーションの指定 */
  }
  100% {
    transform: translateY(0);
  }
}
.topcont {
  position: relative;
  background-color: #ffffff99;
}

h1 {
  background-color: darkorange;
  color: #fff;
  padding: 1rem 0;
  text-align: center;
}

section.semicircle {
  position: relative;
  height: auto;
  z-index: 3;
  margin-top: -0.3rem;
}

section.semicircle2 {
  position: relative;
  height: auto;
  z-index: 3;
  margin-top: 5rem;
}

.promobox {
  /*background-image: url(../images/top/bg/pz2.png);*/
  position: relative;
  z-index: 3;
  padding: 0 2rem;
  margin: 5rem 0;
}
@media only screen and (min-width: 1080px) {
  .promobox {
    padding: 5rem 3rem;
    max-width: 1366px;
    margin: auto;
  }
}
.promobox__ttl {
  color: #000;
  font-size: 1.5rem;
  margin-top: 2rem;
}
.promobox__txt {
  line-height: 2.5rem;
  margin: 2rem 0;
}
.promobox__point_img {
  width: 30%;
  transform: rotate(338deg);
  margin-bottom: -2rem;
}
@media only screen and (min-width: 1080px) {
  .promobox__point_img {
    width: 10%;
  }
}
.promobox__pointtxt {
  margin-top: 1rem;
  padding: 2rem 3rem;
  box-shadow: 2px 2px 4px -2px gray;
}

section.semicircle2.fadeUp {
  background-color: #e8ffe8;
}

span.problembox__ttl--nayami {
  background-image: radial-gradient(circle at center, orange 20%, transparent 20%);
  background-position: top right;
  background-repeat: repeat-x;
  background-size: 1em 0.3em;
  padding-top: 0.4em;
  font-size: 2rem;
  color: orange;
}
@media only screen and (min-width: 1080px) {
  span.problembox__ttl--nayami {
    font-size: 2.5rem;
  }
}

span.problembox__ttl--hate {
  font-size: 2rem;
  font-family: serif;
  transform: rotate(18deg);
  display: inline-block;
}
@media only screen and (min-width: 1080px) {
  span.problembox__ttl--hate {
    font-size: 2.5rem;
  }
}

img.fukidasibox__imgbox__img {
  position: relative;
  /* width: 100px; */
  /* height: 100px; */
  border-radius: 100%;
  overflow: hidden;
  z-index: 0;
  width: 100%;
}

.fukidasibox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  margin-bottom: 3rem;
}

.fukidasiboxR {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
  margin-bottom: 3rem;
}

.fukidasibox__imgbox {
  width: 60%;
}
@media only screen and (min-width: 1080px) {
  .fukidasibox__imgbox {
    width: 20%;
  }
}

.fukidasibox__txtbox {
  position: relative;
  padding: 20px;
  background-color: #b3e5fc;
  width: 100%;
  border-radius: 5px;
  left: -5%;
}
.fukidasibox__txtbox::before {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #b3e5fc;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
@media only screen and (min-width: 1080px) {
  .fukidasibox__txtbox__txt {
    font-size: 1.6rem;
  }
}

.fukidasibox__txtbox2 {
  position: relative;
  padding: 20px;
  background-color: #ffead8;
  /* margin-bottom: 2em; */
  /* margin-left: 1em; */
  width: 100%;
  border-radius: 5px;
}
.fukidasibox__txtbox2::before {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 20px;
  border-left: 15px solid #ffead8;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.delay-time10 {
  animation-delay: 1s;
}

.delay-time14 {
  animation-delay: 1.4s;
}

.delay-time18 {
  animation-delay: 1.8s;
}

.delay-time22 {
  animation-delay: 2.2s;
}

.delay-time26 {
  animation-delay: 2.6s;
}

.delay-time30 {
  animation-delay: 3s;
}

.problembox {
  /*background-image: url(../images/top/bg/pz1.png);*/
  z-index: 99;
  position: relative;
  padding: 0 1rem;
  padding-bottom: 3rem;
}
@media only screen and (min-width: 1080px) {
  .problembox {
    padding-bottom: 0;
    padding: 3rem;
    max-width: 1366px;
    margin: auto;
  }
}
.problembox__ttl h2 {
  padding: 1rem 0;
  backdrop-filter: blur(3px);
  width: 100%;
  color: #696a6a;
  padding-top: 3rem;
  margin: 0;
  font-size: 1.4rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: baseline;
}
@media only screen and (min-width: 1080px) {
  .problembox__ttl h2 {
    font-size: 2.5rem;
  }
}
.problembox__imgbox {
  text-align: center;
}
.problembox__problembox__imgbox__img {
  width: 100%;
}

img.problembox__imgbox__img {
  width: 100%;
}

p.cardfacebox__txtbox__txt {
  line-height: 3rem;
  font-weight: 500;
}

.cardfacebox__txtboxura {
  background-color: #ffeede;
  padding: 1rem;
  box-shadow: 2px 2px 4px gray;
  margin: 2rem 0;
}

.fukibox1 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}

.fukibox__imgbox {
  width: 50%;
}
@media only screen and (min-width: 1080px) {
  .fukibox__imgbox {
    width: 30%;
  }
}

img.fukibox__imgbox__img {
  width: 100%;
}

p.fukibox__txtbox__txt {
  color: darkorange;
}

.fukibox__txtbox {
  position: relative;
  background-color: #e8ffe8;
  border: 2px solid #81c784;
  margin-bottom: 2em;
  margin-left: 1em;
  border-radius: 30px;
  width: 160%;
  padding: 23px;
  text-align: center;
}
.fukibox__txtbox::before {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #81c714;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.fukibox__txtbox::after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -12px;
  top: 20px;
  border-right: 15px solid #e8ffe8;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

p.topttl {
  font-family: serif;
  font-size: 2.3rem;
  text-align: center;
  color: coral;
  margin-bottom: 2rem;
}

.Gradation_3 {
  display: inline-block;
  width: 110px;
  height: 59.9px;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, #a6d900 0%, #ff4454 100%);
  opacity: 0.5;
  animation: Grad 4s infinite alternate;
}

.Gradation_3_text {
  font-size: 30px;
  font-family: Arial;
  font-weight: 600;
  color: #fff;
}

.poligon {
  opacity: 0;
}

@keyframes Grad {
  0% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }
  100% {
    -webkit-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}
.poligon {
  text-align: center;
  margin: 2rem 0;
}

section.semicircle3 {
  margin-top: 5rem;
  padding: 0 1rem;
}
@media only screen and (min-width: 1080px) {
  section.semicircle3 {
    padding: 0;
  }
}

@media only screen and (min-width: 1080px) {
  .resultwrap {
    padding: 0 3rem;
  }
}

.resultbox {
  width: 65%;
}
.resultbox__txt {
  font-weight: 700;
  font-size: 1.7rem;
  text-align: center;
  color: orange;
}
@media only screen and (min-width: 1080px) {
  .resultbox__txt {
    font-size: 2.5rem;
  }
}

@media only screen and (min-width: 1080px) {
  .resultbox2 {
    padding: 0 3rem;
  }
}

.resultboxfleximg {
  width: 35%;
}
@media only screen and (min-width: 1080px) {
  .resultboxfleximg {
    width: 15%;
  }
}

.resultbox2txtbox {
  text-align: center;
}
.resultbox2txtbox__txt1 {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0rem;
}
@media only screen and (min-width: 1080px) {
  .resultbox2txtbox__txt1 {
    font-size: 2.5rem;
  }
}
.resultbox2txtbox__txt2 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  margin-top: 2rem;
}
.resultbox2txtbox__txt2 span.deco {
  margin: 0;
  padding-bottom: 1rem;
}
.resultbox2txtbox__txt3 {
  line-height: 2rem;
}
.resultbox2txtbox__mark {
  margin: 2rem;
}

img.resultboxflex__img {
  width: 100%;
}

.resultflexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

section.semicircle4 {
  margin: 5rem 0;
  padding: 0 1rem;
  background-color: #e8ffe8;
}
@media only screen and (min-width: 1080px) {
  section.semicircle4 {
    padding: 0;
  }
}

img.promoimagebox__img {
  width: 100%;
}

@media only screen and (min-width: 1080px) {
  .promowrap {
    padding: 0 3rem;
  }
}

.promoimagebox {
  padding: 3rem 0;
}
@media only screen and (min-width: 1080px) {
  .promoimagebox {
    padding: 5rem 0;
    max-width: 1366px;
    margin: auto;
  }
}

.promottl {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
}
@media only screen and (min-width: 1080px) {
  .promottl {
    padding: 5rem 0;
    max-width: 1366px;
    margin: auto;
  }
}

p.promottl__txt.fadeLeftp {
  font-size: 1.7rem;
  font-weight: 500;
  color: seagreen;
}
@media only screen and (min-width: 1080px) {
  p.promottl__txt.fadeLeftp {
    font-size: 2.5rem;
  }
}

p.promottl__txt2.fadeRightp {
  font-size: 1.7rem;
  font-weight: 500;
  color: blue;
  padding: 0 0.5rem;
}
@media only screen and (min-width: 1080px) {
  p.promottl__txt2.fadeRightp {
    font-size: 2.5rem;
  }
}

p.promottl__txt3.fadeInp {
  font-size: 1.7rem;
  font-weight: 500;
  font-size: 2.2rem;
  font-weight: 500;
  color: orangered;
  padding: 0 0.5rem;
}
@media only screen and (min-width: 1080px) {
  p.promottl__txt3.fadeInp {
    font-size: 2.5rem;
  }
}

section.semicircle5 {
  padding: 0 1rem;
}
@media only screen and (min-width: 1080px) {
  section.semicircle5 {
    padding: 0;
  }
}

.smallvoicebox__confboxtxt {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
  padding: 18px 16px;
  border-radius: 4px;
  background-color: #dedede;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
}
.smallvoicebox__confboxtxt ::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 20px 30px 0 30px;
  border-color: #dedede transparent transparent;
  translate: -50% 100%;
  z-index: 3;
}
.smallvoicebox__ttlbox__ttl {
  font-size: 2rem;
  font-weight: 700;
}
.smallvoicebox__confboxconf {
  position: relative;
  display: inline-block;
  margin-bottom: 5rem;
  padding: 18px 16px;
  border-radius: 4px;
  background-color: #cff7ffe0;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
  margin-top: -1.2rem;
}

.box-018 {
  margin: 2rem 0;
}

@media only screen and (min-width: 1080px) {
  .germewrap {
    padding: 5rem 3rem;
    max-width: 1366px;
    margin: auto;
  }
}

.germebox::before {
  content: "What's Germe?";
  font-family: "Zen Kaku Gothic New";
  font-size: 3rem;
  font-weight: 900;
  color: #0000002e;
  position: absolute;
  top: -50%;
  transform: translate(0, 0%);
}
@media only screen and (min-width: 1080px) {
  .germebox::before {
    font-size: 3.5rem;
  }
}

p.germebox__txt {
  font-size: 2rem;
  font-weight: 700;
  /* text-align: center; */
}
@media only screen and (min-width: 1080px) {
  p.germebox__txt {
    font-size: 2.5rem;
  }
}

.germebox {
  position: relative;
}

.line {
  color: darkorange;
  font-size: 1.2rem;
  text-align: center;
  font-weight: 900;
  margin-top: 2rem;
}

.lineinappear {
  padding: 0 2rem;
}
@media only screen and (min-width: 1080px) {
  .lineinappear {
    font-size: 1.6rem;
  }
}

section.semicircle5 {
  margin-top: 5rem;
}

p.js_typing.endAnime {
  font-size: 3rem;
  font-family: sans-serif;
  font-weight: 700;
  color: #84b884;
}

p.smallvoicebox__confboxtxt__txt {
  font-weight: 500;
}

@media only screen and (min-width: 1080px) {
  .smallvoicewrap {
    padding: 5rem 3rem;
    max-width: 1366px;
    margin: auto;
  }
}

.smallvoicebox__ttlbox {
  position: relative;
  margin-bottom: 3rem;
}

.smallvoicebox__ttlbox::before {
  content: "What's SmallVoice?";
  font-family: "Zen Kaku Gothic New";
  font-size: 2.4rem;
  font-weight: 900;
  color: #0000002e;
  position: absolute;
  top: -50%;
  transform: translate(0, 0%);
}

.smallvoicebox__confbox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.naritatiwrap {
  margin-top: -8rem;
}
@media only screen and (min-width: 1080px) {
  .naritatiwrap {
    padding: 5rem 3rem;
  }
}

.naritatittlbox {
  margin-top: 13rem;
}
.naritatittlbox__ttl {
  text-align: center;
}

.torikumiwrap {
  background-color: #e8ffe8;
  display: inline-block;
}
@media only screen and (min-width: 1080px) {
  .torikumiwrap {
    padding: 5rem 3rem;
    max-width: 1366px;
    margin: auto;
    display: block;
  }
}

p.torikumittlbox__ttl {
  font-size: 1.5rem;
  font-weight: 500;
}
@media only screen and (min-width: 1080px) {
  p.torikumittlbox__ttl {
    font-size: 2.5rem;
  }
}

.torikumittlbox {
  margin-bottom: 2rem;
}

.shapeboxwrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.shapeboxwrap2 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.shapeimagetxt {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  position: relative;
  left: -15%;
}

.shapeimagetxt2 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  position: relative;
  left: -55%;
}

img.shape__img {
  width: 100%;
}

.shapeboxwrapbox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  margin-bottom: -6rem;
}

.shapeboxwrap2 {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  position: relative;
  left: 30%;
  top: -50%;
}

img.shape__img2 {
  width: 50%;
}

span.iruka {
  font-size: 1.4rem;
  font-weight: 700;
  color: coral;
}

.iruka_txtbox {
  margin-top: -2rem;
  text-align: center;
  margin-bottom: 2rem;
}

@media only screen and (min-width: 1080px) {
  .jireiwrap {
    padding: 5rem 3rem;
    max-width: 1366px;
    margin: auto;
  }
}

.history {
  position: relative;
  margin: 0 auto;
  padding: 0 15px;
}
@media only screen and (min-width: 1080px) {
  .history {
    width: 1000px;
  }
}
.history:before {
  content: "";
  width: 1px;
  height: 100%;
  background: orange;
  position: absolute;
  transform: translateX(-50%);
}
@media only screen and (min-width: 1080px) {
  .history:before {
    left: 50%;
  }
}
.history .history__item {
  position: relative;
  display: flex;
  padding: 0 0 35px 20px;
  margin-bottom: 5rem;
}
@media only screen and (min-width: 1080px) {
  .history .history__item {
    padding: 0;
  }
}
@media only screen and (min-width: 1080px) {
  .history .history__item:nth-of-type(2n) {
    justify-content: flex-end;
  }
}
.history .history__item:before {
  content: "";
  width: 8px;
  height: 8px;
  background: orange;
  position: absolute;
  border-radius: 50%;
  left: 0;
  transform: translateX(-50%);
}
@media only screen and (min-width: 1080px) {
  .history .history__item:before {
    left: 50%;
    top: 0;
    width: 10px;
    height: 10px;
  }
}
.history .history__item:last-child {
  padding-bottom: 15px;
}
@media only screen and (min-width: 1080px) {
  .history .history__item:last-child {
    padding-bottom: 0;
  }
}
.history .history__item:last-child:after {
  content: "";
  width: 6px;
  height: 6px;
  background: none;
  position: absolute;
  transform: translateX(-50%) rotate(-45deg);
  border-left: 1px solid orange;
  border-bottom: 1px solid orange;
  bottom: 0;
  left: 0;
}
@media only screen and (min-width: 1080px) {
  .history .history__item:last-child:after {
    left: 50%;
    width: 8px;
    height: 8px;
  }
}
.history .history__inner {
  width: 100%;
}
@media only screen and (min-width: 1080px) {
  .history .history__inner {
    width: 50%;
    padding: 0;
    margin: 0 -5rem;
  }
}
.history .history__iamge {
  line-height: 1;
  margin: 0;
  padding: 0;
}
.history .history__iamge img {
  box-shadow: 0 0 15px rgba(30, 29, 29, 0.33);
  display: block;
  margin-top: 3rem;
}
.history .history__text {
  padding-top: 10px;
  letter-spacing: 0.05em;
}
@media only screen and (min-width: 1080px) {
  .history .history__text {
    margin-top: 15px;
  }
}

img.history__img2 {
  margin-top: 3rem;
}

p.history__text__txt2 {
  margin-top: 1rem;
}

p.history__text__ttl {
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 1rem;
}
@media only screen and (min-width: 1080px) {
  p.history__text__ttl {
    font-size: 2rem;
  }
}

.history__text_conf {
  line-height: 2rem;
}

p.history__text__set {
  line-height: 2rem;
  margin-top: -2rem;
}

p.history__text__txt {
  font-size: 1.2rem;
}
@media only screen and (min-width: 1080px) {
  p.history__text__txt {
    font-size: 1.6rem;
  }
}

.history__inner__txtbox {
  margin-bottom: 0rem;
  /* background-color: blanchedalmond; */
  width: 100%;
}

span.history_name {
  text-align: center;
  color: #fff;
  background: darkorange;
  padding: 1rem;
  margin-bottom: 1rem;
}
@media only screen and (min-width: 1080px) {
  span.history_name {
    font-size: 2rem;
    padding: 1rem 3rem;
  }
}

.history__ttl {
  margin-bottom: 2rem;
}

p.jireibox__txt {
  font-size: 2rem;
  font-weight: 700;
}

.history__text__set {
  margin: 5rem 0;
}

.jireibox {
  margin-bottom: 3rem;
}

.jireibox2, .jireibox3 {
  position: relative;
  margin-bottom: 5rem;
}

.jireibox2 {
  position: relative;
  margin-bottom: 5rem;
}
.jireibox2::before {
  content: "01";
  font-size: 5rem;
  font-family: sans-serif;
  font-weight: 700;
  color: lightgray;
  top: -60%;
  position: absolute;
  z-index: -1;
  left: 8%;
  transform: translate(0%, 10%);
}

.jireibox3 {
  position: relative;
  margin-bottom: 5rem;
}
.jireibox3::before {
  content: "02";
  font-size: 5rem;
  font-family: sans-serif;
  font-weight: 700;
  color: lightgray;
  top: -60%;
  position: absolute;
  z-index: -1;
  left: 8%;
  transform: translate(0%, 10%);
}

span.jireittl {
  text-align: center;
  display: block;
  margin-bottom: -2rem;
  margin-top: 1rem;
  font-weight: 600;
}

.novewrap {
  padding: 3rem 0;
}
@media only screen and (min-width: 1080px) {
  .novewrap {
    padding: 5rem 0;
  }
}

.novebox {
  width: 90%;
  height: 42vh;
  /* border-radius: 3px; */
  box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.4), 10px 10px 0px 0px rgba(0, 0, 0, 0.3), 15px 15px 0px 0px rgba(0, 0, 0, 0.2), 20px 20px 0px 0px rgba(0, 0, 0, 0.1);
  z-index: 999;
  box-sizing: border-box;
  margin: 1rem;
  background: #fff;
}
@media only screen and (min-width: 1080px) {
  .novebox {
    width: 360px;
    height: 50vh;
    padding: 0;
  }
}
.novebox__ttl__ttl {
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
}
.novebox__ttl {
  margin-bottom: 2rem;
  margin-top: -3rem;
}
.novebox__txtbox__txt {
  font-size: 1.1rem;
  font-weight: 600;
}
@media only screen and (min-width: 1080px) {
  .novebox__txtbox__txt {
    font-size: 1.6rem;
  }
}
.novebox__ttl__txt__p {
  text-align: center;
  font-size: 2rem;
  color: orangered;
  font-weight: 600;
}
@media only screen and (min-width: 1080px) {
  .novebox__ttl__txt__p {
    font-size: 2.5rem;
  }
}
.novebox__txtbox {
  text-align: center;
  padding: 1rem 1rem;
}

p.TextRandomAnime2.gai2 {
  padding-top: 3rem;
}
@media only screen and (min-width: 1080px) {
  p.TextRandomAnime2.gai2 {
    text-align: center;
  }
}

section.semicircle6, section.semicircle10 {
  margin-top: 5rem;
  background-color: #e8ffe8;
  padding: 3rem 1rem;
}
@media only screen and (min-width: 1080px) {
  section.semicircle6, section.semicircle10 {
    padding: 0;
  }
}

img.history__text__img {
  width: 100%;
}
@media only screen and (min-width: 1080px) {
  img.history__text__img {
    width: 70%;
    display: block;
    margin: auto;
  }
}

.history__text__img2 {
  margin: 1rem 0px;
}
@media only screen and (min-width: 1080px) {
  .history__text__img2 {
    width: 70%;
    display: block;
    margin: 0 auto;
  }
}

img.novebox__imgbox__img {
  width: 100%;
  height: 23vh;
}

section.semicircle7 {
  margin-top: 5rem;
  padding: 3rem 1rem;
  background-color: #e8ffe8;
}
@media only screen and (min-width: 1080px) {
  section.semicircle7 {
    padding: 0;
  }
}

.iruka__gifbox {
  margin: 2rem 0;
}
@media only screen and (min-width: 1080px) {
  .iruka__gifbox {
    display: block;
    margin: auto;
    width: 70%;
    padding: 5rem 3rem;
    max-width: 1366px;
  }
}

.details {
  border-top: 2px solid #00a5a0;
  border-left: 2px solid #00a5a0;
  border-right: 2px solid #00a5a0;
}
.details:last-of-type {
  border-bottom: 2px solid #00a5a0;
}

.details-summary {
  position: relative;
  display: block;
  padding: 20px;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  background-color: #b2e4e2;
}
.details-summary:hover {
  cursor: pointer;
  opacity: 0.8;
}
.details-summary .btn {
  position: absolute;
  top: 37%;
  left: 10%;
  width: 18px;
  height: 18px;
  transform-origin: center center;
  transition-duration: 0.2s;
}
.details-summary .btn:before, .details-summary .btn:after {
  content: "";
  background-color: #fff;
  border-radius: 10px;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 0;
  transform-origin: center center;
}
.details-summary .btn:before {
  width: 4px;
  height: 18px;
  top: 0;
  left: 7px;
}
.details-summary.is-active .btn {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
.details-summary.is-active .btn:before {
  content: none;
}

.details-summary::-webkit-details-marker {
  display: none;
}

.details-content {
  padding: 20px;
}
.details-content p {
  margin: 0 0 20px;
  color: #000;
  font-size: 18px;
  text-align: left;
}
.details-content p:last-of-type {
  margin: 0 0 0;
}

.detailsbox {
  margin: 2rem 0;
}

p.jireishousaibox__txt {
  line-height: 2rem;
  padding: 1rem 0;
}

section.semicircle10 {
  margin-top: 5rem;
  margin-bottom: 10rem;
}

/*========= header-Top ===============*/
img.headimg__img {
  width: 100%;
  /* height: 100vh; */
}

div#container {
  overflow: hidden;
}

.footer__imgbox {
  width: 100%;
}
.footer__imgbox__img {
  width: 100%;
  margin-bottom: -1rem;
}

/*# sourceMappingURL=style.css.map */