:root {
  --color01: #007ad1;
  --color02: #05adec;
  --color03: #f11a52;
  --color04: #FFD23F;
  --ink:    #434343;
}

html,body{
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  /* cursor: none; */
}
html{
  font-size: 10px;
  background-color: #fff;
}
a{
  text-decoration: none;
}

#all_wrap{
  position: relative;
  width: 100%;
  height: auto;
  min-width: 1200px;
  max-width: 1920px;
  min-height: 100vh;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  overflow: hidden;
  background-repeat: repeat;
  background-color: white;
}

#all_wrap > .headerBG{
  position: relative;
  width: 100%;
  height: 370px;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center;
}

#all_wrap .story_wrap{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 1450px;
  top: 0;
  left: 0;
  font-size: 0;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-position: center;
}

#all_wrap .story_wrap article{
  display: block;
  position: relative;
  width: 1100px;
  height: auto;
  top: 0;
  left: 0;
  right: 0;
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: bold;
  font-size: 0;
  margin: 0;
  margin-top: 76px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}
#all_wrap .story_wrap article:last-child{
  margin-bottom: 500px;
}
article > p{
  width: 100%;
  height: auto;
  margin: 30px 0;
  padding: 0;
  color: var(--ink);
  font-size: 18px;
  font-family: "M PLUS Rounded 1c";
  text-align: center;
  -webkit-text-stroke: 4px white;
  text-stroke: 4px white;
  paint-order: stroke;
}
article > p::selection{
  color: #fff;
  background-color: #3abec1;
}
article .color01{
  color: var(--color01);
}
article .color02{
  color: var(--color02);
}
article .color03{
  color: var(--color03);
}
article .color04{
  color: var(--color04);
}
article p .icon01{
  position: absolute;
  left: 140px;
  top: -70px;
}
article p .icon02{
  position: absolute;
  left: 70px;
  top: -40px;
}
article p .icon03{
  position: absolute;
  right: 70px;
  top: -120px;
}
article > h3{
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  padding-left: 4px;
  padding-bottom: 6px;
  border-bottom: 2px dotted #706258;
  color: #353535;
  font-size: 24pt;
}
article > dl{
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
article > dl > dt{
  display: inline-block;
  position: relative;
  width: 336px;
  height: 30px;
  text-align: left;
  color: #05adec;
  font-size: 20px;
  font-weight: bolder;
  margin: 0;
  margin-top: 15px;
  padding: 0;
  padding-left: 24px;
  transform: rotateZ(-0.1deg);
}
article > dl > dd{
  display: inline-block;
  position: relative;
  width: 740px;
  height: 30px;
  text-align: left;
  color: #353535;
  font-size: 18px;
  font-weight: medium;
  margin: 0;
  margin-top: 15px;
  padding: 0;
  transform: rotateZ(-0.1deg);
}
@media screen and (max-width: 1200px) {
  article > dl > dt{
    height: 40px;
    font-size: 30px;
  }
  article > dl > dd{
    height: 40px;
    font-size: 24px;
  }
}

.effect01 {
  transform-origin: center;
  transition-duration: 1s;
  opacity: 1;
  filter: brightness(0.3);
}
.effect01.is_active {
  filter: brightness(1);
}
@-webkit-keyframes effect01Anim {
  0% {
    filter: brightness(0.3);
	}
	50% {
	}
	100% {
    filter: brightness(1);
	}
}