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

/* reallife.css */
.pagetitle__spell--reallife {
  width: calc( 692 / 690 * 100%);
}
/**-----------------*/
@media screen and (min-width:750px){
  .pagetitle__spell--reallife {
    max-width: 643px;
    width: 100%;
  }
}

.mv--reallife {
  position: relative;
  display: block;
  max-width: 1000px;
  margin: 0 auto;
}
.mv__dec {
  position: absolute;
  z-index: 3;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  -webkit-transition-delay: calc( (var(--animindex) - 1 ) * 0.3s);
  -o-transition-delay: calc( (var(--animindex) - 1 ) * 0.3s);
  transition-delay: calc( (var(--animindex) - 1 ) * 0.3s);
  -webkit-transform: translate3d(0,0,0) scale(1);
  -ms-transform: translate3d(0,0,0) scale(1);
  -o-transform: translate3d(0,0,0) scale(1);
  transform: translate3d(0,0,0) scale(1);
  opacity: 1;
}
.animhide .mv__dec{
  -webkit-transform: translate3d(0,40%,0) scale(0.8);
  -ms-transform: translate3d(0,40%,0) scale(0.8);
  -o-transform: translate3d(0,40%,0) scale(0.8);
  transform: translate3d(0,40%,0) scale(0.8);
  opacity: 0;
}


.mv__dec--01 {
  top: 4%;
  left: 24%;
  width: calc( 207 / 750 * 100%);
}
.mv__dec--02 {
  bottom: 0;
  right: 2.66%;
  width: calc( 231 / 750 * 100%);
}



.colorbtn {
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
}
.colorbtn__text {
  text-align: center;
  color: var(--c-red);
  font-weight: bold;
  font-size: 1.15em;
  line-height: 1.66em;
}
.colorbtn__box {
  margin: 2em auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  padding: 0 2.66%;
}
.colorbtn__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: calc((100% - 10px) / 3);
  margin: 0;
}
.colorbtn__item a {
  box-sizing: border-box;
  border: .192em solid var(--c-bk);
  position: relative;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  padding: 1em .2em;
  background-image: url(img/webp/btn_bg_top_yw.webp) , url(img/webp/btn_bg_btm_yw.webp);
  background-repeat: no-repeat;
  -webkit-background-size: auto 1.6em;
  background-size: auto 1.6em;
  background-position: top left , bottom right;
  
}
.colorbtn__item--bl a {
  background-image: url(img/webp/btn_bg_top_bl.webp) , url(img/webp/btn_bg_btm_bl.webp);
}
.colorbtn__item--or a {
  background-image: url(img/webp/btn_bg_top_or.webp) , url(img/webp/btn_bg_btm_or.webp);
}
.colorbtn__item span {
  font-size: 1.23em;
  font-weight: bold;
  line-height: 1.25em;
  letter-spacing: 0;
  
}
.colorbtn__item .colorbtn__item--s {
  font-weight: 400;
  font-size: .81em;
}
@media screen and (min-width:750px){
  
.mv__dec--01 {
  top: 3.5%;
  left: 30.5%;
  width: calc( 188 / 1000 * 100%);
  max-width: 188px;
}
.mv__dec--02 {
  bottom: 4.5%;
  right: 13%;
  width: calc( 208 / 1000 * 100%);
  max-width: 208px;
}

  .colorbtn__item {
    width: calc((100% - 40px) / 3);
  }
  .colorbtn__item a {
    border: 5px solid var(--c-bk);
    -webkit-background-size: auto 48px;
    background-size: auto 48px;
  }
  .colorbtn__item span {
    font-size: 28px;
  }
  .colorbtn__item .colorbtn__item--s {
    font-weight: 500;
    font-size: 24px;
  }
}
/*------------------------------------------------------*/


.section--reallife {
  box-sizing: border-box;
  padding-top: 1em;
}
.title--reallife {
 position: relative;
}
.title__text--reallife {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
  z-index: 2;
}
.title__textonly--reallife {
  position: relative;
  top: auto;
  left: auto;
  margin: 1.5em auto;
}
.title__text--reallife span {
  display: inline-block;
  background: var(--c-bk);
  color: var(--c-wh);
  font-weight: 400;
  letter-spacing: 0;
  box-sizing: border-box;
  padding: .35em 0.5em .3em;
}
.title--reallife img {
  display: block;
  width: calc( var(--imgsize) / 750 * 100%);
  margin: 0 auto;
  z-index: 1;
}

@media screen and (min-width:750px){
  .title__text--reallife {
    top: 10px;
  }
  .title--reallife img {
    width: calc( var(--imgsize) * 0.908 * 1px);
  }

}
/*------------------------------------------------------*/
.content--reallife {
  display: block;
  max-width: 1260px;
  margin: 0 auto;
}


.rlbox {
  position: relative;
  display: block;
  margin: 0 auto 3em;
  padding: 0;
  max-width: 670px;
}
.rlbox--pcimg {
  text-align: center;
  margin: 0 auto;
  position: relative;
  float: left;
}
.rlbox--pcimg img {
  margin: 0 auto;
  
}
.rlbox--pcdec {
  position: absolute;
  bottom: 0;
  left: 96px;
  width: 166px;
  z-index: 3;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  -webkit-transition-delay: calc( (var(--animindex) - 1 ) * 0.3s);
  -o-transition-delay: calc( (var(--animindex) - 1 ) * 0.3s);
  transition-delay: calc( (var(--animindex) - 1 ) * 0.3s);
  -webkit-transform: translate3d(0,0,0) scale(1);
  -ms-transform: translate3d(0,0,0) scale(1);
  -o-transform: translate3d(0,0,0) scale(1);
  transform: translate3d(0,0,0) scale(1);
  opacity: 1;
}
.animhide .rlbox--pcdec {
  -webkit-transform: translate3d(0,40%,0) scale(0.8);
  -ms-transform: translate3d(0,40%,0) scale(0.8);
  -o-transform: translate3d(0,40%,0) scale(0.8);
  transform: translate3d(0,40%,0) scale(0.8);
  opacity: 0;
}
.rlbox--pcimg .anim {
  display: block;
}

@media screen and (min-width:1100px){
  .title__text--reallife span {
    padding: 0.35em 1em 0.3em;
  }
  .content--reallife:after {
    content: "";
    width: 1px;
    height: 1px;
    display: block;
    clear: both;
  }
  .rlbox {
    width: 50%;
    float: left;
  }
  .rlbox:nth-of-type(even) {
    width: 50%;
    float: right;
  }
  .rlbox--pcimg {
    width: 50%;
    margin: 0;
  }
}
/*------------------------------------------------------*/




.rlnumber {
  position: absolute;
  top: -.7em;
  left: .7em;
  width: calc(150 / 750 * 100%);
  z-index: 5;
}

.rlnumber__size {
  box-sizing: border-box;
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border: .192em solid var(--c-wh);
  border-radius: 100%;
  overflow: hidden;
  transform: rotate3d(0,1,0,180deg);
  background-color: #fff;
}
.rlnumber__text {
  display: block;
  position: absolute;
  top: 50%;
  left: 47%;
  -webkit-transform: translate3d(-50%,-50%,0);
  -ms-transform: translate3d(-50%,-50%,0);
  -o-transform: translate3d(-50%,-50%,0);
  transform: translate3d(-50%,-50%,0);
  width: calc(92 / 150 * 100%);
  z-index: 5;
}
.rlnumber__dec {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform-origin: top left;
  transform: rotate(25deg);
  z-index: 4;
}
.animhide .rlnumber__dec span {
  -webkit-animation-name: none;
  -moz-animation-name: none;
  -o-animation-name: none;
  animation-name: none;  
}
.rlnumber__dec span{
  border: .192em solid var(--c-wh);
  background-color: var(--c-bk);
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 4em;
  --shutter: 20;
  transform: skewX(30deg) rotate(calc(var(--shutter)* 0.98 * -1deg )) translate3d(calc(var(--shutter) * -1%),calc(var(--shutter) * -1%),0);
  transform-origin: top right;
  -webkit-animation-name: shutter;
  -moz-animation-name: shutter;
  -o-animation-name: shutter;
  animation-name: shutter;
  -webkit-animation-duration: .5s;
  -moz-animation-duration: .5s;
  -o-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  -o-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
.rlnumber__dec:nth-of-type(2) {
  transform: rotate(85deg);
}
.rlnumber__dec:nth-of-type(3) {
  transform: rotate(145deg);
}
.rlnumber__dec:nth-of-type(4) {
  transform: rotate(205deg);
}
.rlnumber__dec:nth-of-type(5) {
  transform: rotate(265deg);
}
.rlnumber__dec:nth-of-type(6) {
  transform: rotate(325deg);
  z-index: 3;
}
@keyframes shutter {
  0%{transform: skewX(30deg) rotate(calc(20 * 0.98 * -1deg)) translate3d(calc(20 * -1%),calc(20* -1%),0);}
  10%{transform: skewX(30deg) rotate(calc(20 * 0.98 * -1deg)) translate3d(calc(20 * -1%),calc(20* -1%),0);}
  50%{transform: skewX(30deg) rotate(calc(0 * 0.98 * -1deg)) translate3d(calc(0 * -1%),calc(0* -1%),0);}
  90%{transform: skewX(30deg) rotate(calc(20 * 0.98 * -1deg)) translate3d(calc(20 * -1%),calc(20* -1%),0);}
  100%{transform: skewX(30deg) rotate(calc(20 * 0.98 * -1deg)) translate3d(calc(20 * -1%),calc(20* -1%),0);}
}


.rlbox__inner {
  box-sizing: border-box;
  background-color: var(--c-wh);
  border-radius: 2.11em;
  border: .192em solid var(--c-bk);
  width: calc(670 / 750 * 100%);
  margin: 0 auto;
  padding-bottom: 2em;
  position: relative;
  z-index: 2;
  
}
.rlbox:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: calc((100% - (670 / 750 * 100%)) /2);
  box-sizing: border-box;
  height: 100%;
  background-color: var(--c-wh);
  border-radius: 2.11em;
  border: .192em solid transparent;
  background: url(../cms/wp-content/themes/octagon/assets/shared/img/webp/bg_dot_bk.webp) repeat top left;
  -webkit-background-size: .3em auto;
  background-size: .3em auto;
  width: calc(670 / 750 * 100%);
  z-index: 1;
  transform: translate3d(0.7em,.7em,0);
}
.rlbox__title {
  box-sizing: border-box;
  position: relative;
  display: block;
  margin: 0 auto -0.8em;
  padding: 0;
  overflow: hidden;
  border-radius: 1.91em 1.91em 0 0;
  font-size: 1em;
  padding-bottom: 0.8em;
}
.rlbox__title h3{
  background: var(--c-bk);
  color: var(--c-wh);
  display: block;
  margin: 0 auto;
  padding: 4% 10% 4% 10%;
  font-size: 2.3em;
  text-align: center;
  box-sizing: border-box;
  z-index: 3;
}
.rlbox__title:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 1em solid var(--c-bk);
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  position: absolute;
  bottom: 0;
  left: calc(50% - 1em);
  z-index: 2;
}
.rlbox__text {
  width: calc( var(--imgsize) / 670 * 100% );
  margin: 2em auto .5em;
  display: block;
}
.rlbox__image {
  position: relative;
  display: block;
  margin: 0 auto;
}
.rlbox__image--q1 {
  position: relative;
  z-index: 3;
}
.rlbox__q1graph {
  background: url(img/webp/bg_q1_w.webp) repeat top right;
  -webkit-background-size: auto 100%;
  background-size: auto 100%;
  width: 100%;
  display: block;
  height: 0;
  padding-bottom: calc(300 / 670 * 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
.rlbox__q1graph:before {
  content: "";
  background: url(img/webp/bg_q1_m.webp) repeat top right;
  -webkit-background-size: auto 100%;
  background-size: auto 100%;
  width: 56.4%;
  display: block;
  height: 0;
  padding-bottom: calc(300 / 670 * 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  -webkit-transform: translate3d(0%,0,0);
  -ms-transform: translate3d(0%,0,0);
  -o-transform: translate3d(0%,0,0);
  transform: translate3d(0%,0,0); 
  -webkit-transition-delay: .5s;
  -o-transition-delay: .5s;
  transition-delay: .5s;
}
.animhide .rlbox__q1graph:before {
  content: "";
  -webkit-transform: translate3d(-100%,0,0);
  -ms-transform: translate3d(-100%,0,0);
  -o-transform: translate3d(-100%,0,0);
  transform: translate3d(-100%,0,0);
}

/* q2 ---------*/
.rlbox__balq2 {
  display: block;
  position: absolute;
  width: calc(var(--imgsize) / 670 * 100%);
  top: 0;
  left: 0;
  -webkit-transition: all .8s ease;
  -o-transition: all .8s ease;
  transition: all .8s ease;
  -webkit-transition-delay: calc((var(--animindex) - 1) * 0.15s);
  -o-transition-delay: calc((var(--animindex) - 1) * 0.15s);
  transition-delay: calc((var(--animindex) - 1) * 0.15s);
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  opacity: 1;
}
.animhide .rlbox__balq2 {
  -webkit-transform: translate3d(0,30%,0);
  -ms-transform: translate3d(0,30%,0);
  -o-transform: translate3d(0,30%,0);
  transform: translate3d(0,30%,0);
  opacity: 0;
}
.rlbox__balq2--01 {
  top: 10%;
  left: 57%;
}
.rlbox__balq2--02 {
  top: 52%;
  left: 72%;
}
.rlbox__balq2--03 {
  top: 84%;
  left: 58%;
}
.rlbox__balq2--04 {
  top: 84%;
  left: 8%;
}
.rlbox__balq2--05 {
  top: 55%;
  left: -4%;
}
.rlbox__balq2--06 {
  top: 28%;
  left: 10%;
}
.rlbox__balq2--07 {
  top: 5%;
  left: 17%;
}

/* q3 ---------*/
.rlboxq3__image {
  display: block;
  position: relative;
  margin: auto calc((100% - (670 / 750 * 100%)) / 2 * -1 );
}
.rlbox__image--q3 {
  position: relative;
  z-index: 1;
}
.rlbox__mapicon {
  position: absolute;
  width: calc(40 / 750 * 100%);
  top: 45.5%;
  left: 45.2%;
  z-index: 5;
}
.rlbox__barq3--01 {
  position: absolute;
  background-color: #ff0000;
  height: 0.34em;
  width: 3.5%;
  top: 47.2%;
  right: 56%;
  z-index: 4;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease; 
  -webkit-transform: scale3d(1,1,1);
  -ms-transform: scale3d(1,1,1);
  -o-transform: scale3d(1,1,1);
  transform: scale3d(1,1,1);
  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  -ms-transform-origin: top right;
  -o-transform-origin: top right;
  transform-origin: top right;
  -webkit-transition-delay: .5s;
  -o-transition-delay: .5s;
  transition-delay: .5s;
}
.rlbox__barq3--02 {
  position: absolute;
  background-color: #ff0000;
  height: 38.2%;
  width: 0.34em;
  top: 47.2%;
  left: 40.2%;
  z-index: 3;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  -webkit-transition-delay: .75s;
  -o-transition-delay: .75s;
  transition-delay: .75s;
  -webkit-transform: scale3d(1,1,1);
  -ms-transform: scale3d(1,1,1);
  -o-transform: scale3d(1,1,1);
  transform: scale3d(1,1,1);
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -o-transform-origin: top left;
  transform-origin: top left;
}
.animhide .rlbox__barq3--01 {
  -webkit-transform: scale3d(0,1,1);
  -ms-transform: scale3d(0,1,1);
  -o-transform: scale3d(0,1,1);
  transform: scale3d(0,1,1);
}
.animhide .rlbox__barq3--02 {
  -webkit-transform: scale3d(1,0,1);
  -ms-transform: scale3d(1,0,1);
  -o-transform: scale3d(1,0,1);
  transform: scale3d(1,0,1);
}


.rlbox__textq3 {
  background: #ff0000;
  box-sizing: border-box;
  border-radius: 1em;
  color: var(--c-wh);
  display: block;
  font-size: 1.15em;
  font-weight: 700;
  text-align: center;
  position: relative;
  margin: -1em auto 0;
  padding: 0.8em;
  z-index: 3;
  width: 82%;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  -webkit-transition-delay: 1.05s;
  -o-transition-delay: 1.05s;
  transition-delay: 1.05s;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  -webkit-transform-origin: 37.5% 0%;
  -moz-transform-origin: 37.5% 0%;
  -ms-transform-origin: 37.5% 0%;
  -o-transform-origin: 37.5% 0%;
  transform-origin: 37.5% 0%;
}
.rlbox__textq3 span {
  display: block;
  margin: 0 auto;
  font-size: 1.33em; 
}
.animhide .rlbox__textq3{
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  opacity: 0;
}

/* q4 ----------------------*/
.rlbox__q4list {
  margin: 1em auto 0;
}
.rlbox__q4item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: flex-start;
  width: 88%;
  margin: 0.5em auto;
}
.rlbox__q4list--month {
  width: 4em;
  text-align: right;
  font-size: 1.15em;
  font-weight: 700;
  letter-spacing: 0;
}
.rlbox__q4list--month span {
  font-size: 1.66em;
  font-feature-settings: 'palt' 1;
}
.rlbox__q4list--data {
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: calc(100% - 4em);
  box-sizing: border-box;
  padding-left: 1em;
  padding-right: 2em;
}
.icq4__human {
  display: block;
  width: calc(29 / 400 * 100%);
  margin: 0;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-transition-delay: calc((var(--animindex-2) - 1) * 0.15s + ((var(--animindex) - 1) * 0.3s));
  -o-transition-delay: calc((var(--animindex-2) - 1) * 0.15s + ((var(--animindex) - 1) * 0.3s));
  transition-delay: calc((var(--animindex-2) - 1) * 0.15s + ((var(--animindex) - 1) * 0.3s));
  position: relative;
}
.icq4__human--animitem {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-transition-delay: calc((var(--animindex-2) - 1) * 0.15s + ((var(--animindex) - 1) * 0.3s));
  -o-transition-delay: calc((var(--animindex-2) - 1) * 0.15s + ((var(--animindex) - 1) * 0.3s));
  transition-delay: calc((var(--animindex-2) - 1) * 0.15s + ((var(--animindex) - 1) * 0.3s));
}
.animhide .icq4__human--animitem{
  -webkit-transform: translate3d(0,50%,0);
  -ms-transform: translate3d(0,50%,0);
  -o-transform: translate3d(0,50%,0);
  transform: translate3d(0,50%,0);
  opacity: 0;
}
.icq4__human--animitembase {
  position: relative;
  z-index: 1;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  opacity: 0;
  -webkit-transition-delay: calc((var(--animindex-2) - 1) * 0.15s + ((var(--animindex) - 1) * 0.3s)+ 0.1s);
  -o-transition-delay: calc((var(--animindex-2) - 1) * 0.15s + ((var(--animindex) - 1) * 0.3s)+ 0.1s);
  transition-delay: calc((var(--animindex-2) - 1) * 0.15s + ((var(--animindex) - 1) * 0.3s) + 0.1s);
}
.animhide .icq4__human--animitembase{
  opacity: 1;
}


.rlbox__q4image {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 27.5%;
}
.rlbox__q4bal {
  width: calc(var(--imgsize) / 700 * 100%);
  position: absolute;
  top: 20%;
  left: 10%;
  z-index: 3;
  opacity: 1;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.animhide .rlbox__q4bal {
  -webkit-transform: translate3d(0,50%,0);
  -ms-transform: translate3d(0,50%,0);
  -o-transform: translate3d(0,50%,0);
  transform: translate3d(0,50%,0);
  opacity: 0;
}
.rlbox__image--q4 {
  width: calc(var(--imgsize) / 700 * 100%);
  position: absolute;
  top: 0;
  left: 45%;
  z-index: 2;
}

/* q5 ------------------*/
.rlbox--q5 .rlbox__inner {
  padding-bottom: 1em;
}
.rlboxq5 {
  display: block;
  position: relative;
}
.rlboxq5__text {
  box-sizing: border-box;
  display: block;
  padding: 1em 6%;
  width: 100%;
  position: relative;
  z-index: 2;
}
.rlboxq5__text--tokyo {
  box-sizing: border-box;
  color: var(--c-red);
  display: inline-block;
  padding: .1em;
  font-size: 1.92em;
  font-weight: 700;
  margin-bottom: 0.7em;
  background: rgb(255,239,0);
  background: -moz-linear-gradient(0deg, rgba(255,239,0,1) 0%, rgba(255,239,0,1) 30%, rgba(255,239,0,0) 31%, rgba(255,239,0,0) 100%);
  background: -webkit-linear-gradient(0deg, rgba(255,239,0,1) 0%, rgba(255,239,0,1) 30%, rgba(255,239,0,0) 31%, rgba(255,239,0,0) 100%);
  background: linear-gradient(0deg, rgba(255,239,0,1) 0%, rgba(255,239,0,1) 30%, rgba(255,239,0,0) 31%, rgba(255,239,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffef00",endColorstr="#ffef00",GradientType=1);
}
.rlboxq5__text--tokyo span {
  font-size: 1.8em;
}
.rlboxq5__text--other {
  box-sizing: border-box;
  padding: .14em;
  font-size: 1.53em;
  font-weight: 700;
  margin-bottom: 0.8em;
}
.rlboxq5__text--other span {
  font-size: 2em;
}
.rlboxq5__map {
  position: absolute;
  top: -15%;
  right: -5%;
  width: calc(var(--imgsize) / 670 * 100%);
}
.rlboxq5__mapicon {
  width: calc(var(--imgsize) / 670 * 100%);
  position: absolute;
  bottom: 0;
  right: 0;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  -webkit-transition-delay: calc(var(--animindex)  * 0.3s);
  -o-transition-delay: calc(var(--animindex) * 0.3s);
  transition-delay: calc(var(--animindex) * 0.3s);
  -webkit-transform: translate3d(0,0,0) scale(1);
  -ms-transform: translate3d(0,0,0) scale(1);
  -o-transform: translate3d(0,0,0) scale(1);
  transform: translate3d(0,0,0) scale(1);
  opacity: 1;
}
.animhide .rlboxq5__mapicon {
  -webkit-transform: translate3d(0,100%,0) scale(0.6);
  -ms-transform: translate3d(0,100%,0) scale(0.6);
  -o-transform: translate3d(0,100%,0) scale(0.6);
  transform: translate3d(0,100%,0) scale(0.6);
  opacity: 0;
}



.rlboxq5__mapicon--01 {
  bottom: 44.3%;
  right: 13%;
}
.rlboxq5__mapicon--02 {
  bottom: 40.5%;
  right: 17.5%;
}
.rlboxq5__mapicon--03 {
  bottom: 36.5%;
  right: 24.5%;
}
.othresbox {
  margin: 0 auto;
  display: block;
  position: relative;
  box-sizing: border-box;
  padding: 0 6%;
}
.othrebox__title {
  text-align: center;
  position: relative;
  z-index: 2;
  margin: 0 auto -1em;
}
.othrebox__title span {
  background: var(--c-bk);
  border-radius: 1em;
  box-sizing: border-box;
  color: var(--c-wh);
  display: inline-block;
  font-size: .84em;
  font-weight: 500;
  line-height: 1.3em;
  padding: .25em 1.3em;
  position: relative;
  z-index: 2;
}
.othrebox__text {
  background: url(../cms/wp-content/themes/octagon/assets/shared/img/webp/bg_dot_bl.webp) repeat top center;
  -webkit-background-size: 3.07em auto;
  background-size: 3.07em auto;
  box-sizing: border-box;
  border-radius: 1.15em;
  line-height: 1.61em;
  font-weight: 500;
  text-align: center;
  padding: 1.5em 0.5em 1em;
}
.rlbox__att {
  text-align: right;
  width: 86%;
  margin: 0 auto;
  font-weight: 500;
  line-height: 1.2em;
}
.rlbox__att span {
  display: block;
  margin-right: 0;
}

@media screen and (min-width:750px){
  .rlboxq5__mapicon--01 {
    bottom: 31.5%;
    right: 12.8%;
  }
  .rlboxq5__mapicon--02 {
    bottom: 27.0%;
    right: 17.5%;
  }
  .rlboxq5__mapicon--03 {
    bottom: 23.5%;
    right: 24.5%;
  }
}
@media screen and (min-width:1100px){
  .rlboxq5__map {
    width: 304px;
    top: -43px;
    right: -25px;
  }
  .rlboxq5__mapicon--01 {
    top: 148px;
    bottom: auto;
    right: 75px;
  }
  .rlboxq5__mapicon--02 {
    top: 178px;
    bottom: auto;
    right: 102px;
  }
  .rlboxq5__mapicon--03 {
    top: 188px;
    bottom: auto;
    right: 142px;
  }
}
/* q6 ------------------*/
.rlbox__q6list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-align-items: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  box-sizing: border-box;
  padding: 6% 1% 0;
  margin: 0 auto;
}
.rlbox__q6item {
  box-sizing: border-box;
  width: calc( 300 / 670 * 100%);
  text-align: center;
  margin: 0 1% 1.2em;
}
.rlbox__q6itemimage {
  position: relative;
  display: block;
  margin: 0 auto -1em;
  z-index: 2;
}
.rlbox__q6textbox {
  font-size: 1.15em;
  font-weight: 700;
  border: .145em solid var(--c-bk);
  border-radius: 0.6em;
  box-sizing: border-box;
  padding: 1em .5em 0.1em;
  position: relative;
  z-index: 1;
  line-height: 1.5em;
}
.rlbox__q6value {
  color: var(--c-or);
  font-size: 1.66em;
  font-weight: 900;
  line-height: 1.7em;
  display: block;
  -webkit-transition: all .8s ease;
  -o-transition: all .8s ease;
  transition: all .8s ease;
  -webkit-transition-delay: calc((var(--animindex) - 1 ) * 0.2s);
  -o-transition-delay: calc((var(--animindex) - 1 ) * 0.2s);
  transition-delay: calc((var(--animindex) - 1 ) * 0.2s);
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  opacity: 1;
}
.animhide .rlbox__q6value {
  -webkit-transform: translate3d(0,50%,0);
  -ms-transform: translate3d(0,50%,0);
  -o-transform: translate3d(0,50%,0);
  transform: translate3d(0,50%,0);
  opacity: 0;
}

.rlbox__q6value span {
  font-size: 1.8em;
}
.rlbox__q6image {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 22%;
}
.rlbox__q6bal {
  width: calc(var(--imgsize) / 700 * 100%);
  position: absolute;
  top: 10%;
  left: 10%;
  z-index: 3;
  opacity: 1;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.animhide .rlbox__q6bal {
  -webkit-transform: translate3d(0,50%,0);
  -ms-transform: translate3d(0,50%,0);
  -o-transform: translate3d(0,50%,0);
  transform: translate3d(0,50%,0);
  opacity: 0;
}
.rlbox__imageq6 {
  width: calc(var(--imgsize) / 670 * 100%);
  position: absolute;
  top: -32%;
  left: 47%;
  z-index: 2;
}


/* q7 ---------------------*/
.rlbox--q7 .rlbox__inner {
  padding-bottom: 0.5em;
}
.rlbox__q7list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-align-items: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 2% 4%;
  position: relative;
}
.rlbox__q7item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  background-color: #d7ecee;
  border-radius: .77em;
  line-height: 1.3em;
  text-align: center;
  box-sizing: border-box;
  padding: .8em .4em;
  width: 49.5%;
  margin-bottom: 1.5%;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  -webkit-transition-delay: calc((var(--animindex) - 1) * 0.2s);
  -o-transition-delay: calc((var(--animindex) - 1) * 0.2s);
  transition-delay: calc((var(--animindex) - 1) * 0.2s);
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.animhide .rlbox__q7item  {
  opacity: 0;
  -webkit-transform: translate3d(0,50%,0);
  -ms-transform: translate3d(0,50%,0);
  -o-transform: translate3d(0,50%,0);
  transform: translate3d(0,50%,0);
}
.rlbox__q7item span {
  color: #048995;
  font-size: 1.15em;
  font-weight: 700;
}
.rlbox__q7item--blank {
  background: none;
  text-align: right;
  display: block;
  padding: 0;
  font-size: 1em;
  color: var(--c-bk);
  line-height: 1.2em;
  width: 49.5%;
}
.rlbox__q7item--blank span {
  font-size: 1em;
  color: var(--c-bk);
  font-weight: 500;
}
.rlbox__imageq7 {
  width: calc(var(--imgsize) / 670 * 100%);
  position: absolute;
  bottom: -5%;
  right: 1%;
  z-index: 3;
}

@media screen and (min-width:750px){
  .rlbox__imageq7 {
    width: calc(var(--imgsize) / 670 * 100%);
    position: absolute;
    bottom: -50px;
    right: 15px;
    z-index: 3;
  }  
}
/* q8 --------------------*/
.rlbox--q8 {
  margin-bottom: 1em;
}
.rlbox--q8 .rlbox__inner {
  padding-bottom: 2%;
}
.rlbox--q8 .rlbox__title h3 {
  padding-left: 20%;
}
.rlbox__q8list {
  display: block;
  margin: 1em auto 0;
  padding: 0 2.66%;
  box-sizing: border-box;
  position: relative;
}
.rlbox__q8item {
  font-size: 1.53em;
  font-weight: 700;
  text-align: center;
  margin: .2em auto;
}
.rlbox__q8list--01 {
  background: url(img/bg_q8_01.png) no-repeat top left;
  -webkit-background-size: cover;
  background-size: cover;
  box-sizing: border-box;
  padding: 1.5em;
  margin: 1% auto;
  display: block;
  box-sizing: border-box;
}
.rlbox__q8list--02 {
  background: url(img/bg_q8_02.png) no-repeat top right;
  -webkit-background-size: cover;
  background-size: cover;
  box-sizing: border-box;
  padding: 1.5em;
  margin: 1% auto;
  display: block;
  box-sizing: border-box;
}
.rlbox__q8list--03 {
  position: relative;
  background: #f0f0f0;
  box-sizing: border-box;
  padding: .8em 23% .8em 33%;
  margin: 1% auto;
  display: block;
  box-sizing: border-box;
  text-align: left;
}
.rlbox__q8list--03:before {
  content: "";
  background: var(--c-wh) url(img/bg_q8_03.png) no-repeat top left;
  -webkit-background-size: auto 100%;
  background-size: auto 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 34%;
  height: 100%;
}
.rlbox__q8image {
  position: absolute;
  width: calc(var(--imgsize) / 670 * 100%);
  top: 0;
  left: 0;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  -webkit-transition-delay: calc((var(--animindex) - 1) * 0.3s);
  -o-transition-delay: calc((var(--animindex) - 1) * 0.3s);
  transition-delay: calc((var(--animindex) - 1) * 0.3s);
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  opacity: 1;
  z-index: 5;
}
.animhide .rlbox__q8image {
  -webkit-transform: translate3d(0,50%,0);
  -ms-transform: translate3d(0,50%,0);
  -o-transform: translate3d(0,50%,0);
  transform: translate3d(0,50%,0);
  opacity: 0;
}

.rlbox__q8image--01 {
  top: -2%;
  left: 1%;
}
.rlbox__q8image--02 {
  top: 31%;
  left: auto;
  right: 8%;
}
.rlbox__q8image--03 {
  top: 43%;
  left: 6%;
}
.rlbox__q8image--04 {
  top: auto;
  left: 9%;
  bottom: 3%;
}
.rlbox__q8image--05 {
  top: auto;
  left: auto;
  bottom: 0;
  right: 2%;
}

@media screen and (min-width:750px){
  .rlbox__q8image--03 {
    top: 38%;
    left: 6%;
  }  
  
  .rlbox__inner {
    border: 5px solid var(--c-bk);
  }
}

/* ex --------------*/

/* ex01 --------------*/
.rlbox--ex01 .rlbox__title h3 {
  padding-left: 18%;
}
.rlbox--ex01 .rlbox__inner {
  padding-bottom: 4%;
}
.rlbox__rank--ex01 {
  width: calc(610 / 670 * 100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: flex-end;
  align-items: flex-end;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  margin: .5em auto 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.rlbox__rankitem {
  display: block;
  position: relative;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  opacity: 1;
}
.animhide .rlbox__rankitem {
  -webkit-transform: translate3d(0,80%,0);
  -ms-transform: translate3d(0,80%,0);
  -o-transform: translate3d(0,80%,0);
  transform: translate3d(0,80%,0);
  opacity: 0;
}
.rlbox__rankitem--01 {
  width: calc( 230 / 610 * 100%);
  -webkit-transition-delay: .5s;
  -o-transition-delay: .5s;
  transition-delay: .5s;
}
.rlbox__rankitem--02 {
  width: calc( 190 / 610 * 100%);
  -webkit-transition-delay: .25s;
  -o-transition-delay: .25s;
  transition-delay: .25s;
}
.rlbox__rankitem--03 {
  width: calc( 190 / 610 * 100%);
}
.rlbox__image--ex01 {
  width: calc(599 / 670 * 100%);
  display: block;
  margin: -1.5em auto 0;
  z-index: 3;
}
.rlbox__ex01textbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  width: calc(610 / 670 * 100%);
  margin: .5em auto 0;
  background: #eaeaea;
  box-sizing: border-box;
  border-radius: 1.5em;
  padding: .8em 1em;
}
.rlbox__ex01icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
  background: #000;
  border-radius: 4em;
  color: #fff;
  font-size: 1em;
  height: 4em;
  width: 4em;
}
.rlbox__ex01text {
  width: calc(100% - 5em);
  text-align: center;
  font-weight: 500;
  line-height: 1.75em;
  margin: 0 auto;
}


/* ex02 --------------*/
.rlbox--ex02 .rlbox__title h3 {
  padding-left: 18%;
  padding-bottom: .2em;
}
.rlbox--ex02 .rlbox__inner {
  padding-bottom: 0.5em;
}
.rlbox__title--small {
  display: block;
  margin: 0 auto;
  font-size: .366em;
}
.rlbox__ex02text {
  position: relative;
  display: block;
  margin: 0 auto;
  padding-top: calc(560 / 670 * 100%);
  overflow: hidden;
  width: calc(610 / 670 * 100%);
  text-align: right;
}
.rlbox__ex02text span {
  display: block;
  margin-right: 0;
}
.rlbox__ex02item {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--imgsize) / 670 * 100%);
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  -webkit-transition-delay: calc(var(--animindex) * .2s);
  -o-transition-delay: calc(var(--animindex) * .2s);
  transition-delay: calc(var(--animindex) * .2s);
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.animhide .rlbox__ex02item {
  opacity: 0;
  -webkit-transform: translate3d(0,50%,0);
  -ms-transform: translate3d(0,50%,0);
  -o-transform: translate3d(0,50%,0);
  transform: translate3d(0,50%,0);
}

.rlbox__ex02item--01 {
  top: 1%;
  left: 0;
  z-index: 8;
}
.rlbox__ex02item--02 {
  top: 4%;
  left: 60%;
  z-index: 7;
}
.rlbox__ex02item--03 {
  top: 22%;
  left: 11%;
  z-index: 6;
}
.rlbox__ex02item--04 {
  top: 25.5%;
  left: 56%;
  z-index: 5;
}
.rlbox__ex02item--05 {
  top: 41.5%;
  left: 7%;
  z-index: 6;
}
.rlbox__ex02item--06 {
  top: 49.5%;
  left: 49%;
  z-index: 6;
}
.rlbox__ex02item--07 {
  top: 66.5%;
  left: 2%;
  z-index: 6;
}
.rlbox__ex02item--08 {
  top: 71%;
  left: 57%;
  z-index: 4;
}

/* answer -------------------------------*/
#answer .rlnumber {
  width: calc(130 / 750 * 100%);
}
#answer .rlnumber__text {
  transform: none;
  top: 0;
  left: 0;
  width: 100%;
}
#answer .title--reallife {
  position: relative;
  margin-bottom: -2em;
}
#answer .rlbox__title h3 {
  background: none;
  color: var(--c-bk);
  text-align: left;
  padding: .8em .6em .8em 18%;
  font-size: 1.69em;
  font-weight: 900;
  line-height: 1.27em;
}
#answer .rlbox__title:after {
  content: none;
}
#answer .rlbox__listtext {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-align-items: end;
    align-items: flex-end;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  width: calc(610 / 670 * 100%);
  margin: 1em auto;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
#answer .animhide .rlbox__listtext{
  opacity: 0;
  -webkit-transform: translate3d(0,50%,0);
  -ms-transform: translate3d(0,50%,0);
  -o-transform: translate3d(0,50%,0);
  transform: translate3d(0,50%,0);
}
#answer .rlbox__listtext:nth-of-type(2){
  -webkit-transition-delay: .2s;
  -o-transition-delay: .2s;
  transition-delay: .2s;
}
#answer .rlbox__listtext:nth-of-type(3){
  -webkit-transition-delay: .4s;
  -o-transition-delay: .4s;
  transition-delay: .4s;
}

#answer .rlbox__listtext:before {
  content: "";
  display: block;
  width: 3.07em;
  height: 3.07em;
  background: url(img/ic_human_round.png) no-repeat 50% 50%;
  -webkit-background-size: contain;
  background-size: contain;
  border-radius: 4em;
  background-color: #048995;
  margin: 0;
}
#answer .rlbox__listtext p {
  background: #d7ecee;
  border-radius: .5em ;
  box-sizing: border-box;
  margin: 0;
  padding: .6em .6em;
  position: relative;
  display: block;
  font-size: 1.15em;
  font-weight: 700;
  line-height: 1.46em;
  width: calc(100% - 3.4em);
  font-feature-settings: 'palt' 1;
}
#answer .rlbox__listtext p:before {
  content: "";
  border-bottom: 1em solid #d7ecee;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  display: block;
  position: absolute;
  bottom: 0;
  left: -.6em;
}
#answer .rlbox__listtext p span {
  background: #048995;
  color: var(--c-wh);
  display: inline-block;
  padding: .1em .2em;
  position: relative;
  margin-left: -.2em;
}
.rlbox__item--ex01 + .rlbox__item--ex01 {
  margin-top: 2em;
}

.rlbox__item--ex01:nth-of-type(even) .rlbox__listtext {
  -webkit-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  -o-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
#answer .rlbox__item--ex01:nth-of-type(even) p:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: auto;
  right: -.6em;
}
.takidashi {
  display: block;
  margin: .5em auto 0;
}
#answer .rlbox__listtext p #kyouiku {
  background: #c30808;
  color: var(--c-wh);
  display: inline-block;
  font-size: 1.13em;
  padding: .1em 2.2em .1em .4em;
  position: relative;
  margin-left: -.2em;
  cursor: pointer;
  position: relative;
}
#answer .rlbox__listtext p #kyouiku:after {
  content: "";
  display: block;
  width: 2em;
  height: 2.4em;
  vertical-align: baseline;
  background: url(img/webp/ic_check.webp) no-repeat 50% 50%;
  -webkit-background-size: contain;
  background-size: contain;
  line-height: 1em;
  position: absolute;
  top: calc(50% - 1em);
  right: .1em;
}
.rlbox__title--s {
  font-size: 0.5em;
  font-weight: 400;
  display: block;
  line-height: 1.3em;
  margin-left: 0;
}

@media screen and (min-width:1100px){
  #answer .rlnumber {
    width: 107px;
    top: -10px;
    left: 50px;
  }
  #answer .rlbox__title h3 { 
    padding: 25px 25px 25px 120px;
    font-size: 40px;
  }
  #answer .rlbox {
    width: 100%;
    float: none;
    margin: 0 auto 3em;
   max-width: 1200px; 
  }
  .rlbox__box--ex01 {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -ms-align-items: flex-end;
      align-items: flex-end;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
  }
  .rlbox__item--ex01 {
    width: calc(50% + 1px);
    margin-top: 0em;
    overflow: hidden;
    margin-right: -1px;
  }
  .rlbox__item--ex01:nth-child(even) {
    margin-right: 0;
    margin-left: -1px;
  }  
}

/*--------------------*/

.mfp-bg {
  background-color: var(--c-bk);
  opacity: .4;
}
.popup__box{
  background: url(../cms/wp-content/themes/octagon/assets/shared/img/webp/bg_str_red.webp) repeat top center;
  -webkit-background-size: 1.3em auto;
  background-size: 1.3em auto;
  box-sizing: border-box;
  display: block;
  margin: 0 auto;
  position: relative;
  padding: clamp(5px,2.66%,20px);
  width: calc( 650 / 750 * 100%);
  max-width: 810px;
}
.popup__title {
  text-align: center;
  color: var(--c-wh);
  font-size: 1.63em;
  font-weight: bold;
  margin: .3em auto;
  padding: 0;
}
.popup__title span {
  font-size: 1.25em;
}
.popup__text {
  background-color: var(--c-wh);
  border-radius: 1em;
  box-sizing: border-box;
  display: block;
  padding: 4%;
}
.popup__text p {
  margin: 0 auto;
  font-weight: 500;
}
.popup__text p span {
  font-weight: 700;
  color: var(--c-red);
}
.mfp-close-btn-in .mfp-close {
  background-color: #000;
  opacity: 1;
  color: #fff;
  font-weight: 300;
  font-size: 2em;
  font-family: var(--f-eng);
  border-radius: 2em;
  padding: 0;
  width: 1em;
  height: 1em;
  line-height: 0;
  position: absolute;
  top: -.3em;
  right: -.3em;
  
}

@media screen and (min-width:810px){
  .popup__text {
    padding: 30px 40px;
    text-align: justify;
  }
}

/*-------------------------------*/

.rlbox__anslist{
  display: block;
  box-sizing: border-box;
  margin: 0 auto;
  width: calc(610 / 670 * 100%);
}
.rlbox__anslistbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.rlbox__anslistitem {
  background: #ccc;
  border-radius: 0.76em;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 .3em 0;
  padding: .8em 0em .8em .7em;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  -webkit-transition-delay: calc((var(--animindex) - 1) * 0.3s);
  -o-transition-delay: calc((var(--animindex) - 1) * 0.3s);
  transition-delay: calc((var(--animindex) - 1) * 0.3s);
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.rlbox__box--a02 .rlbox__anslistitem {
  background: url(../cms/wp-content/themes/octagon/assets/shared/img/webp/bg_yw_dot_2.webp) repeat top center;
  -webkit-background-size: 3em auto;
  background-size: 3em auto;
}
.animhide .rlbox__anslistitem {
  opacity: 0;
  -webkit-transform: translate3d(0,50%,0);
  -ms-transform: translate3d(0,50%,0);
  -o-transform: translate3d(0,50%,0);
  transform: translate3d(0,50%,0);
}
.rlbox__anslistitem--half {
  width: calc((100% - .3em) / 2);
}
.rlbox__anslisticon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  width: 2.3em;
}
.rlbox__anslisttext {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: flex-start;
  width: calc(100% - 2.8em);
}
.rlbox__anslisttext > div {
  line-height: 1.57em;
  font-size: 1.07em;
  font-weight: 700;
}
.rlbox__anslistatt {
  display: block;
  width: 100%;
  text-align: right;
  position: relative;
  margin: 0 auto -1em;
}
.rlbox__anslistatt span {
  display: block;
  margin-right: 0;
  line-height: 1.2em;
  font-size: 1em;
}

@media screen and (min-width:1100px){

  .rlbox__anslist{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    box-sizing: border-box;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
  }
  .rlbox__anslistbox {
    box-sizing: border-box;
    width: calc((100% - 20px) / 2);
  }
  .rlbox__anslistitem {
    margin-bottom: 10px;
    font-size: 24px;
    padding-right: 0;
  }
.rlbox__anslistitem--half {
  width: calc((100% - 10px) / 2);
}
  .rlbox__anslisticon {
    width: 50px;
  }
  .rlbox__anslisttext {
  width: calc(100% - 56px);
}
}

/*-------------------------------*/
.rlbox__map--a03 {
  position: relative;
  width: calc((1 + (1 - 670 / 750)) * 100% + .7em);
  margin: 0 calc((1 - 670 / 750) * -50% - .35em);
  box-sizing: border-box;
  padding-top: 2em;
  padding-bottom: 1.5em;
}
.rlbox__maptext--01 {
  position: absolute;
  display: block;
  width: calc( 420 / 750 * 100%);
  top: 0em;
  left: 9.1%;
}
.rlbox__maptext--01:before {
  content: "";
  display: block;
  width: .192em;
  height: 7.2em;
  background-color: var(--c-red);
  position: absolute;
  display: block;
  top: 2.8em;
  left: 0.6em;
  z-index: 2;
  -webkit-transform: scale3d(1,1,1);
  -ms-transform: scale3d(1,1,1);
  -o-transform: scale3d(1,1,1);
  transform: scale3d(1,1,1);
  -webkit-transform-origin:bottom center; 
  -moz-transform-origin: bottom center;
  -ms-transform-origin: bottom center;
  -o-transform-origin: bottom center;
  transform-origin: bottom center;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
.animhide .rlbox__maptext--01:before {
  content: "";
  -webkit-transform: scale3d(1,0,1);
  -ms-transform: scale3d(1,0,1);
  -o-transform: scale3d(1,0,1);
  transform: scale3d(1,0,1);
}
.rlbox__maptext--01 .rlbox__maptextbal {
  opacity: 1;
  position: relative;
  display: block;
  z-index: 3;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transform-origin: 3% 100%;
  -moz-transform-origin: 3% 100%;
  -ms-transform-origin: 3% 100%;
  -o-transform-origin: 3% 100%;
  transform-origin: 3% 100%;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  -webkit-transition-delay: .4s;
  -o-transition-delay: .4s;
  transition-delay: .4s;
}
.animhide .rlbox__maptext--01 .rlbox__maptextbal {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

.rlbox__maptext--02 {
  position: absolute;
  display: block;
  width: calc( 400 / 750 * 100%);
  bottom: 0.8em;
  left: 9.1%;
}
.rlbox__maptext--02:before {
  content: "";
  display: block;
  width: .192em;
  height: 5.6em;
  background-color: var(--c-red);
  position: absolute;
  display: block;
  bottom: 2.8em;
  left: 5.2em;
  z-index: 2;
  -webkit-transform: scale3d(1,1,1);
  -ms-transform: scale3d(1,1,1);
  -o-transform: scale3d(1,1,1);
  transform: scale3d(1,1,1);
  -webkit-transform-origin: top center;
  -moz-transform-origin: top center;
  -ms-transform-origin: top center;
  -o-transform-origin: top center;
  transform-origin: top center;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  -webkit-transition-delay: .8s;
  -o-transition-delay: .8s;
  transition-delay: .8s;
}
.animhide .rlbox__maptext--02:before {
  content: "";
  -webkit-transform: scale3d(1,0,1);
  -ms-transform: scale3d(1,0,1);
  -o-transform: scale3d(1,0,1);
  transform: scale3d(1,0,1);
}
.rlbox__maptext--02 .rlbox__maptextbal {
  opacity: 1;
  position: relative;
  display: block;
  z-index: 3;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transform-origin: 33% 0%;
  -moz-transform-origin: 33% 0%;
  -ms-transform-origin: 33% 0%;
  -o-transform-origin: 33% 0%;
  transform-origin: 33% 0%;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  -webkit-transition-delay: 1.2s;
  -o-transition-delay: 1.2s;
  transition-delay: 1.2s;
}
.animhide .rlbox__maptext--02 .rlbox__maptextbal {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

.othresbox--a03 {
  padding: 0 4%;
}
.othresbox--a03 .othrebox__text {
  background: url(../cms/wp-content/themes/octagon/assets/shared/img/webp/bg_dot_gr.webp) repeat top center;
  -webkit-background-size: 3.07em auto;
  background-size: 3.07em auto;
  
}

@media screen and (min-width:750px){
  .rlbox__maptext--01 {
    width: 380px;
    left: 60px;
  }
  .rlbox__maptext--01:before {
  content: "";
  top: 2.8em;
  left: 2.0em;
}
.rlbox__maptext--02 {
  width: 350px;
  left: 60px;
}
.rlbox__maptext--02:before {
  content: "";
  bottom: 50px;
  left: 142px;
}  
  
  .othresbox--a03 .spitem {
    display: block;
  }
}
@media screen and (min-width:1100px){
  .rlbox__map--a03 {
    display: block;
    width: 947px;
    margin: 0 auto;
  }
  .rlbox__maptext--01 {
    left: 20px;
  }
  .rlbox__maptext--01:before {
  content: "";
  top: 60px;
  left: 123px;
  width: 5px;
  height: 210px;
}
.rlbox__maptext--01 .rlbox__maptextbal {
  -webkit-transform-origin: 31% 100%;
  -moz-transform-origin: 31% 100%;
  -ms-transform-origin: 31% 100%;
  -o-transform-origin: 31% 100%;
  transform-origin: 31% 100%;
}
.rlbox__maptext--02 {
  left: 200px;
  bottom: 40px
}
.rlbox__maptext--02:before {
  content: "";
  bottom: 60px;
  left: 86px;
  width: 5px;
  height: 130px;
}  
.rlbox__maptext--02 .rlbox__maptextbal {
  -webkit-transform-origin: 23% 0%;
  -moz-transform-origin: 23% 0%;
  -ms-transform-origin: 23% 0%;
  -o-transform-origin: 23% 0%;
  transform-origin: 23% 0%;
}  
  .othresbox--a03 .spitem {
    display: none;
  }
}

/* a04 -------------------*/

.rlbox__box--a04 .rlbox__anslistitem {
  background: #d7ecee;
  color: #048995;
}
.rlbox--a4text {
  display: block;
  margin: 2em auto 0;
  width: calc(570 / 610 * 100%);
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  -webkit-transition-delay: calc((var(--animindex) - 1) * 0.3s);
  -o-transition-delay: calc((var(--animindex) - 1) * 0.3s);
  transition-delay: calc((var(--animindex) - 1) * 0.3s);
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.animhide .rlbox--a4text {
  opacity: 0;
  -webkit-transform: translate3d(0,50%,0);
  -ms-transform: translate3d(0,50%,0);
  -o-transform: translate3d(0,50%,0);
  transform: translate3d(0,50%,0);
}
.rlbox__box--a02 .rlbox__anslistitem {
  background: url(../cms/wp-content/themes/octagon/assets/shared/img/webp/bg_yw_dot_2.webp) repeat top center;
  -webkit-background-size: 3em auto;
  background-size: 3em auto;
}
.animhide .rlbox__anslistitem {
  opacity: 0;
  -webkit-transform: translate3d(0,50%,0);
  -ms-transform: translate3d(0,50%,0);
  -o-transform: translate3d(0,50%,0);
  transform: translate3d(0,50%,0);
}

@media screen and (min-width:1100px){
  
.rlbox--a4text {
  margin-top: 0;
  }
}

/*-------------------------------------------------*/
#staff .title__text--reallife {
  top: 11%;
}
#staff .title__dec--staff {
  position: absolute;
  top: -2%;
  left: 50%;
  width: calc( 476 / 750 * 100%);
  transform: translate3d(-50%,0%,0);
}
.stafflist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  box-sizing: border-box;
  position: relative;
  padding: 0 4% 4%;
  margin: -8.5em auto 0;
  z-index: 2;
}
.stafflist__item {
  width: 48%;
  position: relative;
  margin-bottom: 6%;
}
.stafflist__item a {
  display: block;
  width: 100%;
}
.stafflist__frame {
  border: 0.115em solid var(--c-bk);
  border-radius: .769em;
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.stafflist__image {
  position: relative;
  display: block;
  z-index: 1;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  -webkit-transform: scale(1.005);
  -ms-transform: scale(1.005);
  -o-transform: scale(1.005);
  transform: scale(1.005);
}
.stafflist__name {
  background: url(../cms/wp-content/themes/octagon/assets/shared/img/webp/bg_str_black.webp) repeat top center;
  -webkit-background-size: 1.3em auto;
  background-size: 1.3em auto;
  box-sizing: border-box;
  color: var(--c-wh);
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: .5em .6em;
  width: 100%;
  z-index: 3;
  line-height: 1.28em;
}
.stafflist__name span {
  font-size: 1.07em;
  font-weight: bold;
  line-height: 1.28em;
}
.stafflist__ic {
  display: block;
  position: absolute;
  bottom: -0.5em;
  right: -0.5em;
  z-index: 4;
}

.stafflist__ictext {
  background: var(--c-yw);
  width: 5em;
  height: 5em;
  border-radius: 5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content:center;
  font-size: .69em;
  color: var(--c-gr);
  font-weight: bold;
  font-family: var(--f-eng);
  position: relative;
  z-index: 2;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
.stafflist__ictext span:after {
  content: "\02228";
  display: block;
  width: 1em;
  height: 1em;
  position: relative;
  margin: -.4em auto 0;
  line-height: 0;
  transform: scale3d(1.5,0.8,1);
  
}
.stafflist a:hover .stafflist__image {
  -webkit-transform: scale(1.03);
  -ms-transform: scale(1.03);
  -o-transform: scale(1.03);
  transform: scale(1.03);
}
.stafflist a:hover .stafflist__ictext {
  background: var(--c-gr);
  color: var(--c-yw);
}
  .stafflist a .stafflist__ic:before {
    content: "";
    background-color: var(--c-wh);
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 5em;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 1;
  }
  .stafflist a:hover .stafflist__ic:before {
    content: "";
    background-color: var(--c-wh);
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 5em;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0.4;
  }

@media screen and (min-width:750px){
  #staff .title__dec--staff {
  position: absolute;
  top: -25px;
  left: 50%;
  width: 476px;
  transform: translate3d(-50%,0%,0);
}
  #staff .title__text--reallife {
    top: 65px;
  }
  .stafflist {
    padding: 0 20px;
    max-width: 1040px;
  }  
.stafflist__item {
  width: calc((100% - 40px) / 3);
  position: relative;
  margin-bottom: 30px;
}
  .stafflist__frame {
    border: 3px solid var(--c-bk);
  }
}
@media screen and (min-width:1100px){
  .stafflist__name span {
    font-size: 26px;
  }
  .stafflist__ictext {
    font-size: 18px;
    width: 76px;
    height: 76px;
    box-sizing: border-box;
    padding-top: 10px;
  }
.stafflist__ictext span:after {
  content: "\02228";
  display: block;
  width: 1em;
  height: 1em;
  position: relative;
  margin: -.2em auto 0;
  line-height: 0;
  transform: scale3d(1.3,0.6,1);
  
}
  
  
}

/* staffdetail */
.staffdetail {
  counter-reset: staffdetail; 
}
.staffdetail__title {
  background: url(../cms/wp-content/themes/octagon/assets/shared/img/webp/bg_str_black.webp) repeat top center;
  -webkit-background-size: 1.3em auto;
  background-size: 1.3em auto;
  box-sizing: border-box;
  color: var(--c-wh);
  text-align: center;
  padding: 1.5em 0;
  font-size: 1em;
}
.staffdetail__title span {
  font-size: calc(50 / 26 * 1em);
}
.staffdetail__title span:after {
  content: attr(data-spell);
  display: block;
  margin: 0.5em auto 0;
  line-height: 1em;
  font-size: calc(24 / 50 * 1em);
}
.staffdetail__title--nospell span:after {
  content: none;
}
.staffdetail__box {
  position: relative;
  margin: 3em auto 4em;
  display: block;
}
.staffdetail__box:before {
  counter-increment: staffdetail;
  content: counter(staffdetail , decimal-leading-zero);
  display: block;
  font-size: calc(80 / 26 * 1em);
  font-weight: bold;
  font-family: var(--f-eng);
  line-height: 1.6em;
  letter-spacing: 0;
  width: 1.6em;
  height: 1.6em;
  text-align: center;
  border-radius: 2em;
  background-color: #ff0;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50% , 0);
  -ms-transform: translate3d(-50%, -50% , 0);
  -o-transform: translate3d(-50%, -50% , 0);
  transform: translate3d(-50%, -50% , 0);
  z-index: 5;
}
.staffdetail__inner {
  padding-bottom: 0em;
}
.staffdetail__catch {
  position: relative;
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 1.5em 0 0;
}
.staffdetail__catchtext {
  background-image: url(img/webp/ic_staff_catch_dec_01.webp) , url(img/webp/ic_staff_catch_dec_02.webp);
  background-repeat: no-repeat;
  background-position: 10% 0% , 90% 0%;
  -webkit-background-size: calc(60 / 26 * 1em) auto;
  background-size: calc(60 / 26 * 1em) auto;
  box-sizing: border-box;
  display: block;
  text-align: center;
  padding: 1em 0;
  margin: 1em auto 0;
}
.staffdetail__box h3 {
  font-size: calc(36 / 26 * 1em);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: calc(50 / 36 * 1em);
  margin: 0 auto;
}
.staffdetail__catchtext--bar {
  display: inline-block;
  background:var(--c-gr) url(img/webp/ic_staff_catch_dec_03.webp)  no-repeat top left;
  -webkit-background-size: calc(30 / 40 * 1em) auto;
  background-size:calc(30 / 40 * 1em) auto;
  box-sizing: border-box;
  font-size: calc(40 / 36 * 1em);
  color: var(--c-wh);
  padding: .2em .8em .15em;
  margin: .1em auto;
}
.staffdetail__catchimage {
  width: calc(100% + 12%);
  position: relative;
  margin: auto -6%;
}
.staffdetail__catchbal {
  position: absolute;
  top: 0;
  left: 9%;
  width: calc(345 / 750 * 100%);
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  -webkit-transition-delay: calc((var(--animindex) - 1) * 0.4s);
  -o-transition-delay: calc((var(--animindex) - 1) * 0.4s);
  transition-delay: calc((var(--animindex) - 1) * 0.4s);
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  opacity: 1;
}
.animhide .staffdetail__catchbal {
  -webkit-transform: translate3d(0,50%,0);
  -ms-transform: translate3d(0,50%,0);
  -o-transform: translate3d(0,50%,0);
  transform: translate3d(0,50%,0);
  opacity: 0;
}
.staffdetail__catchbal--01 {
  top:29.5%;
}
.staffdetail__catchbal--02 {
  top: 57.5%;
}

.staffdetail__textbox {
  margin: 0 auto;
  padding: 0;
}
.staffdetail__textitem {
  margin: 0.5em auto 0.5em;
  padding: 0 4.66%;
  box-sizing: border-box;
}
.staffdetail__box dt {
  background: var(--c-bk);
  box-sizing: border-box;
  border-radius: calc(10 / 26 * 1em);
  color: var(--c-wh);
  font-size: calc(30 / 26 * 1em);
  font-weight: 700;
  margin: 0 auto;
  line-height: calc(48 / 36 * 1em);
  padding: .3em .6em;
  position: relative;
}
.staffdetail__box span {
  position: relative;
  z-index: 3;
  display: inline-block;
}
.staffdetail__box dt:before {
  content: "";
  display: block;
  position: absolute;
  bottom: -0.7em;
  left: 0;
  width: 0;
  height: 0;
  border-top: 1em solid var(--c-bk);
  border-left: 1em solid var(--c-bk);
  border-bottom: 1em solid transparent;
  z-index: 1;
}
.staffdetail__box dd {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
  letter-spacing: 0.06em;
  padding: 0.8em 0.5em;
}
.staffdetail__box p {
  font-size: calc(24 / 26 * 1em);
  font-weight: 500;
  font-feature-settings: 'palt' 1;
  line-height: calc(50 / 24 * 1em);
  margin: 0;
}
.staffdetail__emoji{
  display: inline-block;
  width: auto;
  vertical-align: baseline;
  position: relative;
}
.staffdetail__emoji img {
  display: inline-block;
  width: auto;
  margin-bottom: -.1em;
  height: 0.95em;
}
@media screen and (min-width:1100px){
  .staffdetail__title {
    margin-bottom: 80px;
}
  .staffdetail__box ,
  .staffdetail__box:nth-of-type(even) {
    max-width: 1040px;
    width: 100%;
    float: none;
    margin: 0 auto 100px;
  }
  .staffdetail__box:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 20px;
  max-width: 1000px;
  width: 100%;
  z-index: 1;
  transform: translate3d(0.7em,.7em,0);
}
  .staffdetail__inner {
    width: calc(100% - 40px);
  }
  .staffdetail__catchbal {
    position: absolute;
    bottom: 0;
    top: auto;
    left: 55px;
    width:295px;
  }
  .staffdetail__catchbal--01 {
    bottom: 20px;
    top: auto;
  }
  .staffdetail__catchbal--02 {
    left: 355px;
    bottom: 20px;
    top: auto;
  }
  .staffdetail__catchtext {
    -webkit-background-size: 60px 40px;
    background-size: 60px 40px;
    background-position: 40px 0 , calc(100% - 40px) 0;
    max-width: 710px;
    width: 74%;
    margin-left: 0;
    margin-bottom: -160px;
    min-height: 160px;
  }
  .staffdetail__box h3 {
    font-size: 36px;
  }
  .staffdetail__catchimage {
    width: calc(100% + 40px);
    max-width: 1040px;
    margin: auto -20px;
    position: relative;
  }
  .staffdetail__textbox {
    margin-top: 30px;
    margin-bottom: 40px;
  }
  .staffdetail__textitem {
    padding: 0 50px;
  }
  .staffdetail__box dt {
    font-size: 24px;
    border-radius: 10px;
    padding: 8px 30px
  }
  .staffdetail__box dd {
    padding: 10px 20px;
    font-size: 18px;
    letter-spacing: 0.06em;
  }
}

/*------------------------*/
.staffdetail__exbox {
  display: block;
  margin: 0em auto 0em;
  overflow: hidden;
  max-width: 750px;
}
.staffdetail__extitle {
  position: relative;
  margin: 0 auto;
  z-index: 3;
}
.staffdetail__exbox h3 {
  box-sizing: border-box;
  padding-left: calc((1 - 710 / 750) * 100%);
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translate3d(0,-50%,0);
  -ms-transform: translate3d(0,-50%,0);
  -o-transform: translate3d(0,-50%,0);
  transform: translate3d(0,-50%,0);
  z-index: 2;
  margin: 0;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  opacity: 1;
}
.animhide.staffdetail__exbox h3 {
  -webkit-transform: translate3d(50%,-50%,0);
  -ms-transform: translate3d(50%,-50%,0);
  -o-transform: translate3d(50%,-50%,0);
  transform: translate3d(50%,-50%,0);
  opacity: 0;
}
.staffdetail__expic {
  position: relative;
  display: block;
  width: calc(320 / 750 * 100%);
  z-index: 4;
  margin-right: 5%;
  margin-left: auto;
}
.staffdetail__excomment {
    position: relative;
    margin: 0.5em auto 2em;
    display: block;
}
.staffdetail__excomment:before {
  content: "";
  display: block;
  position: absolute;
  width: calc(38/ 26 * 1em);
  height: calc(50/ 26 * 1em);
  background: url(img/webp/staff_ex_ar_sp.webp) no-repeat bottom center;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  top: calc(44/ 26 * 1em * -1 + 0.09em);
  left: calc(50% - (44/ 26 * 1em / 2 ));
  z-index: 4;
}
.staffdetail__excomment:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: calc((100% - (670 / 750 * 100%)) /2);
  box-sizing: border-box;
  height: 100%;
  background-color: var(--c-wh);
  border-radius: 2.11em;
  border: calc(5/ 26 * 1em) solid transparent;
  background: url(../cms/wp-content/themes/octagon/assets/shared/img/webp/bg_dot_bk.webp) repeat top left;
  -webkit-background-size: .3em auto;
  background-size: .3em auto;
  width: calc(670 / 750 * 100%);
  z-index: 1;
  transform: translate3d(0.7em,.7em,0);
}
.staffdetail__exinner{
    box-sizing: border-box;
    background-color: var(--c-wh);
    border-radius: 2.11em;
    border: 0.192em solid var(--c-bk);
    width: calc(670 / 750 * 100%);
    margin: 0 auto;
    padding-bottom: 2em;
    position: relative;
    z-index: 2;
}
.staffdetail__extextbox {
  display: block;
  box-sizing: border-box;
  padding: 4.66% 4.66% 0;
}
.staffdetail__extextimage {
  display: block;
  box-sizing: border-box;
  padding: 4.66% 0 0;
}
.staffdetail__extextbox p {
  font-size: calc(24 / 26 * 1em);
  line-height: 2.08em;
  font-weight: 500;
  margin: 0 auto;
}

.matome {
  margin: 1em auto;
}
.matome__image {
  width: calc(674 / 750 * 100%);
  margin: 0 auto;
  text-align: center;
}
.matome__image img {
  display: block;
  margin: 0 auto;
}
.matome__text {
  text-align: center;
  font-size: calc(50/ 26 * 1em);
  font-weight: 900;
  margin: 1.2em auto 1em;
}
.matome__button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  box-sizing: border-box;
  padding: 0 6%;
  margin: 0 auto 5em;
  max-width: 900px;
}
.matome__buttonitem {
  width: 49%;
}
.matome__buttonitem a {
  margin: 0;
  padding: 1.2em 0.7em 1.2em 0.5em;
  background: var(--c-bk) url(../cms/wp-content/themes/octagon/assets/shared/img/ar.svg) no-repeat;
  -webkit-background-size: auto .7em;
  background-size: auto .7em;
  background-position: calc(100% - 1em) 50%;
  border: none;
  box-sizing: border-box;
  border-radius: 0;
  color: var(--c-wh);
  cursor: pointer;
  display: block;
  font-size: calc(34/ 26 * 1em);
  font-weight: 700;
  position: relative;
  width: 100%;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  line-height: 1.3em;  
  text-align: center;
}
.matome__buttonitem a:hover {
  background-position: calc(100% - 0.8em) 50%;
}
.matome__buttonitem--entry a {
  background-color: var(--c-or);
}
@media screen and (min-width:1100px){
  #staff--sup {
    margin-bottom: 40px;
}
  .staffdetail__exbox {
    max-width: 1060px;
  }
  .staffdetail__extitle {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 4;
  }
  .staffdetail__exbox h3 {
    padding-left: 0;
    padding-bottom: 10px;
  }
  .staffdetail__expic {
    width: 320px;
    margin-right: 40px;
  }
  .staffdetail__excomment:before {
    content: "";
    width: 40px;
    height: 50px;
    background: url(img/webp/staff_ex_ar_pc.webp) no-repeat bottom center;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    top: -34px;
    left: calc(50% - 20px);
    z-index: 4;
  }
  .staffdetail__exinner {
    width: calc(100% - 50px);
    border: 5px solid var(--c-bk);
  }
  .staffdetail__extextbox {
    padding: 40px 40px 0;
  }
  .staffdetail__extextimage {
    padding-top: 40px;
  }
  .staffdetail__excomment {
    position: relative;
    z-index: 2;
    margin-top: -30px;
  }
  .staffdetail__excomment:after {
    content: "";
    width: calc(100% - 50px);
    left: 0;
    transform: translate3d(40px,20px,0)
  }
  .staffdetail__extextbox p {
    font-size: 18px;
  }
  .matome__text {
    font-size: 40px;
    margin: 50px auto;
  }
  .matome__button {
  max-width: 900px;
  padding: 0 10px;
    margin: 0 auto 120px;
  }
  .matome__buttonitem {
    width: calc(50% - 10px);
  }
  .matome__buttonitem a {
    font-size: 36px;
    font-weight: 900;
    padding: 40px 10px;
  }
}