@charset "UTF-8";
/* ==========================================================================
	root
========================================================================== */ :root {
  --base-pc-width: 1500;
  --easeInQuad: cubic-bezier(.55, .085, .68, .53);
  --easeOutQuad: cubic-bezier(0.215, 0.61, 0.355, 1);
  --easeOutQuint: cubic-bezier(.25, .46, .45, .94);
  --easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --easeInOutQuad: cubic-bezier(0.45, 0, 0.55, 1);
  --easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
  --easePopUp: cubic-bezier(0.17, 0.88, 0.30, 1.28);
  --easeInCirc: cubic-bezier(0.55, 0, 1, 0.45);
}
/* ==========================================================================
	animations
========================================================================== */
@-webkit-keyframes lb {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(-10px, 10px);
    transform: translate(-10px, 10px);
    /* 左に10px、下に10px移動 */
  }
}
@keyframes lb {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(-10px, 10px);
    transform: translate(-10px, 10px);
    /* 左に10px、下に10px移動 */
  }
}
@-webkit-keyframes rb {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(10px, 10px);
    transform: translate(10px, 10px);
    /* 左に10px、下に10px移動 */
  }
}
@keyframes rb {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(10px, 10px);
    transform: translate(10px, 10px);
    /* 左に10px、下に10px移動 */
  }
}
@-webkit-keyframes bt {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    /* 左に10px、下に10px移動 */
  }
}
@keyframes bt {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    /* 左に10px、下に10px移動 */
  }
}
@-webkit-keyframes deg {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
}
@keyframes deg {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
}
/* ==========================================================================
	fv
========================================================================== */
main {
  margin-top: 100px;
}
@media screen and (min-width: 415px) {
  main {
    margin-top: 130px;
  }
}
@media screen and (min-width: 1101px) {
  main {
    margin-top: 200px;
  }
}
#fv {
  position: relative;
  width: 100%;
  padding-top: 313px;
  padding-bottom: 256px;
}
#fv:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -1px;
  width: 100%;
  height: 300px;
  background: url(../img/story/fv_btm_bg.webp) bottom center repeat-x;
  background-size: 1500px 300px;
  z-index: 10;
}
#fv .bg_area {
  position: absolute;
  left: 0;
  top: 0;
  width: 426px;
}
#fv .read {
  position: relative;
  display: block;
  width: 45%;
  max-width: 465px;
  margin: 0 auto 30px;
  z-index: 10;
}
#fv .title {
  position: relative;
  width: 90%;
  max-width: 930px;
  margin: 0 auto 10px;
  z-index: 10;
}
#fv .sub_tit {
  position: relative;
  display: block;
  width: 30%;
  max-width: 309px;
  margin: 0 auto 52px;
  z-index: 10;
}
#fv .illust {
  display: block;
  position: absolute;
  z-index: 3;
}
#fv .illust.-center {
  position: relative;
  width: 581px;
  margin: 0 auto;
}
#fv .illust.-rt {
  width: 422px;
  top: 186px;
  left: calc(50% + 357px);
}
#fv .illust.-r {
  width: 209px;
  height: 141px;
  top: 460px;
  left: calc(50% + 493px);
}
#fv .illust.-r .-l {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26.0869565217%;
  -webkit-animation: bt 1.5s steps(1) infinite;
  animation: bt 1.5s steps(1) infinite;
  /* 1秒ごとに動作、2ステップで繰り返し */
}
#fv .illust.-r .-r {
  position: absolute;
  right: 0;
  top: 0;
  width: 56.5957446809%;
  -webkit-animation: deg 1.5s steps(1) infinite;
  animation: deg 1.5s steps(1) infinite;
  /* 1秒ごとに動作、2ステップで繰り返し */
}
#fv .illust.-rb {
  width: 666px;
  top: 653px;
  left: calc(50% + 345px);
}
#fv .illust.-lb {
  width: 423px;
  top: 663px;
  right: calc(50% + 366px);
}
#fv .illust.-l {
  width: 235px;
  height: 137px;
  top: 476px;
  right: calc(50% + 475px);
}
#fv .illust.-l .-l {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45.1063829787%;
  -webkit-animation: lb 1.5s steps(1) infinite;
  animation: lb 1.5s steps(1) infinite;
  /* 1秒ごとに動作、2ステップで繰り返し */
}
#fv .illust.-l .-r {
  position: absolute;
  right: 0;
  top: 0;
  width: 43.4042553191%;
  -webkit-animation: lb 1.5s steps(1) infinite;
  animation: lb 1.5s steps(1) infinite;
  /* 1秒ごとに動作、2ステップで繰り返し */
  -webkit-animation-delay: .4s;
  animation-delay: .4s;
}
@media screen and (min-width: 1101px) {
  .head.hasei {
    padding-left: 0;
    padding-top: 10px;
    text-align: center;
  }
  .head.hasei .bnr_area {
    position: absolute;
    left: auto;
    top: -10px;
    right: -30px;
    -webkit-transform: tranaslteX(0);
    transform: tranaslteX(0);
  }
}
@media screen and (max-width: 1100px) {
  .head .bnr_area {
    display: none;
  }
}
@media screen and (max-width: 800px) {
  #fv {
    padding-top: 217px;
    padding-bottom: calc(90px + 27vw);
  }
  #fv:after {
    width: 100%;
    height: 150px;
    background-size: 750px 150px;
  }
  #fv .bg_area {
    width: 41.25%;
  }
  #fv .read {
    width: 66.5%;
    margin: 0 auto 5vw;
    z-index: 10;
  }
  #fv .title {
    width: 62.125%;
    margin: 0 auto 1rem;
    z-index: 10;
  }
  #fv .sub_tit {
    width: 42%;
    margin: 0 auto 3rem;
  }
  #fv .illust {
    display: block;
    position: absolute;
    z-index: 3;
  }
  #fv .illust.-center {
    width: 76.75%;
  }
  #fv .illust.-rt {
    width: 55.125%;
    top: 150px;
    left: calc(50% + 26vw);
  }
  #fv .illust.-r {
    width: 26vw;
    height: auto;
    aspect-ratio: 208/141;
    top: calc(217px + 26vw);
    left: calc(50% + 23.75vw);
  }
  #fv .illust.-rb {
    width: 83.75vw;
    top: auto;
    bottom: 25px;
    left: calc(50% + 20.375vw);
  }
  #fv .illust.-lb {
    width: 59.125vw;
    top: auto;
    right: calc(50% + 17.5vw);
    bottom: 20px;
  }
  #fv .illust.-l {
    width: 29.375vw;
    height: auto;
    aspect-ratio: 235/137;
    top: 476px;
    top: calc(217px + 29vw);
    right: calc(50% + 18.375vw);
  }
}
/* ==========================================================================
	intro
========================================================================== */
.intro {
  position: relative;
  background: var(--theme-color02);
  z-index: 60;
  padding-top: 20rem;
  padding-bottom: 35rem;
}
.intro:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  background: -webkit-gradient(linear, left bottom, left top, from(#21987b), to(#139F67));
  background: linear-gradient(0deg, #21987b 0%, #139F67 100%);
}
.intro .inr {
  position: relative;
  width: 700px;
  max-width: 80%;
  z-index: 10;
  margin: 0 auto 20.5rem;
  color: #fff;
  z-index: 10;
}
.intro h2 {
  font-size: 5rem;
  --lh: calc(76/50);
  position: relative;
  /*
    overflow: hidden;
    */
  line-height: calc(var(--lh)* 1em);
  padding-top: .1px;
  padding-bottom: .1px;
  color: #fff;
  text-align: center;
  margin-bottom: 10rem;
}
.intro h2::before {
  content: '';
  display: block;
  height: 0;
  width: 0;
  /*
      margin-top: calc((1 - var(--lh)) * 0.5em);
      */
  margin-top: calc((1 - var(--lh))* .5em);
}
.intro h2::after {
  content: '';
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc((1 - var(--lh))* .5em);
}
.intro p {
  font-size: 2rem;
  --lh: calc(46/20);
  position: relative;
  /*
    overflow: hidden;
    */
  line-height: calc(var(--lh)* 1em);
  padding-top: .1px;
  padding-bottom: .1px;
}
.intro p::before {
  content: '';
  display: block;
  height: 0;
  width: 0;
  /*
      margin-top: calc((1 - var(--lh)) * 0.5em);
      */
  margin-top: calc((1 - var(--lh))* .5em);
}
.intro p::after {
  content: '';
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc((1 - var(--lh))* .5em);
}
.intro .top-illust_area {
  display: block;
  position: absolute;
  width: 1764px;
  height: 1154px;
  top: 57px;
  left: calc(50% - 886px);
  z-index: 3;
}
.intro .top-illust_area .illust {
  position: absolute;
}
.intro .top-illust_area .l_area {
  position: absolute;
  left: 0;
  top: 0;
  width: 502px;
  height: 1043px;
}
.intro .top-illust_area .l_area .-i01 {
  width: 61.9521912351%;
  top: 0;
  right: 6.9031639501%;
}
.intro .top-illust_area .l_area .-i02 {
  width: 94.8207171315%;
  top: 24.9280920422%;
}
.intro .top-illust_area .l_area .-i03 {
  width: 55.9760956175%;
  aspect-ratio: 281/201;
  top: 50.1438159156%;
  right: 9.9601593625%;
}
.intro .top-illust_area .l_area .-i03 .-l {
  position: absolute;
  width: 53.3807829181%;
  left: 0;
  bottom: 0;
}
.intro .top-illust_area .l_area .-i03 .-r {
  position: absolute;
  width: 39.5017793594%;
  aspect-ratio: 111/110;
  right: 0;
  top: 0;
  -webkit-animation: deg 1.5s steps(1) infinite;
  animation: deg 1.5s steps(1) infinite;
}
.intro .top-illust_area .l_area .-i04 {
  width: 80.8764940239%;
  right: 0;
  bottom: 0;
}
.intro .top-illust_area .r_area {
  position: absolute;
  right: 0;
  top: 0;
  width: 733px;
  aspect-ratio: 733/1128;
}
.intro .top-illust_area .r_area .-i01 {
  width: 42.4283765348%;
  top: 0;
  right: 17.0532060027%;
}
.intro .top-illust_area .r_area .-i02 {
  width: 55.3888130969%;
  aspect-ratio: 406/239;
  top: 18.2624113475%;
  right: 18.1446111869%;
}
.intro .top-illust_area .r_area .-i02 .-l {
  position: absolute;
  width: 23.3990147783%;
  top: 31.7991631799%;
  left: 17.9802955665%;
  -webkit-animation: rb 1.5s steps(1) infinite;
  animation: rb 1.5s steps(1) infinite;
  /* 1秒ごとに動作、2ステップで繰り返し */
  -webkit-animation-delay: .4s;
  animation-delay: .4s;
}
.intro .top-illust_area .r_area .-i02 .-r {
  position: absolute;
  width: 100%;
}
.intro .top-illust_area .r_area .-i03 {
  width: 64.9386084584%;
  aspect-ratio: 476/363;
  top: 43.9716312057%;
  right: 0;
}
.intro .top-illust_area .r_area .-i03 .-l {
  position: absolute;
  width: 14.2857142857%;
  aspect-ratio: 68/152;
  top: 27.8236914601%;
  left: 23.3193277311%;
  bottom: 0;
  -webkit-animation: bt 1.5s steps(1) infinite;
  animation: bt 1.5s steps(1) infinite;
  z-index: 10;
}
.intro .top-illust_area .r_area .-i03 .-r {
  position: absolute;
  width: 20.5882352941%;
  aspect-ratio: 98/230;
  top: 0;
  left: 44.1176470588%;
  -webkit-animation: deg 1.5s steps(1) infinite;
  animation: deg 1.5s steps(1) infinite;
  z-index: 10;
}
.intro .top-illust_area .r_area .-i03 .-b {
  position: absolute;
  width: 100%;
  aspect-ratio: 476/190;
  right: 0;
  bottom: 0;
}
.intro .top-illust_area .r_area .-i04 {
  width: 55.3888130969%;
  left: 0;
  bottom: 0;
}
/*-------- slide_wrap --------*/
.slide_wrap {
  position: relative;
  height: 680px;
}
.slide_wrap .slide_area {
  position: absolute;
  left: 0;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 560px;
  overflow: hidden;
  z-index: 10;
}
.slide_wrap .slide_area .slide_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-animation: loop-slide 80s infinite linear 1s both;
  animation: loop-slide 80s infinite linear 1s both;
}
.slide_wrap .slide_area .slides {
  position: relative;
  margin-right: 20px;
}
.slide_wrap .slide_area .slides.-sizeL {
  width: 720px;
}
.slide_wrap .slide_area .slides.-sizeM {
  width: 600px;
  margin-top: 140px;
}
.slide_wrap .slide_area .slides.-sizeS {
  width: 360px;
  margin-top: 200px;
}
.slide_wrap .slide_area .slides img {
  border-radius: .5rem;
}
.slide_wrap .bottom-illust_area {
  display: block;
  position: absolute;
  width: 1548px;
  height: 677px;
  top: -72px;
  left: calc(50% - 798px);
  z-index: 15;
}
.slide_wrap .bottom-illust_area .illust {
  position: absolute;
}
.slide_wrap .bottom-illust_area .illust.-i01 {
  width: 392px;
  top: 0;
  left: 0;
}
.slide_wrap .bottom-illust_area .illust.-i02 {
  width: 236px;
  top: 82px;
  right: 0;
}
.slide_wrap .bottom-illust_area .illust.-i03 {
  width: 502px;
  height: 175px;
  bottom: 0;
  left: 190px;
}
.slide_wrap .bottom-illust_area .illust.-i03 .-l {
  position: absolute;
  width: 150px;
  left: 0;
  bottom: 0;
  -webkit-animation: lb 1.5s steps(1) infinite;
  animation: lb 1.5s steps(1) infinite;
}
.slide_wrap .bottom-illust_area .illust.-i03 .-c {
  position: absolute;
  width: 138px;
  top: 30px;
  left: 178px;
  -webkit-animation: lb 1.5s steps(1) infinite;
  animation: lb 1.5s steps(1) infinite;
  -webkit-animation-delay: .25s;
  animation-delay: .25s;
}
.slide_wrap .bottom-illust_area .illust.-i03 .-r {
  position: absolute;
  width: 150px;
  right: 0;
  top: 0;
  -webkit-animation: lb 1.5s steps(1) infinite;
  animation: lb 1.5s steps(1) infinite;
  -webkit-animation-delay: .15s;
  animation-delay: .15s;
}
@media screen and (max-width: 800px) {
  .intro {
    padding-top: 4rem;
    padding-bottom: 20rem;
  }
  .intro .inr {
    margin: 0 auto 7.5rem;
  }
  .intro h2 {
    font-size: 2.6rem;
    --lh: calc(82/56);
    margin-bottom: 5rem;
    letter-spacing: -0.05em;
  }
  .intro p {
    font-size: 1.6rem;
    --lh: 2;
  }
  .intro .top-illust_area {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    z-index: 3;
    margin-bottom: 9rem;
  }
  .intro .top-illust_area .illust {
    position: absolute;
  }
  .intro .top-illust_area .l_area {
    position: relative;
    width: 74.125%;
    aspect-ratio: 593/780;
    height: auto;
    -webkit-transform: translateX(-10vw);
    transform: translateX(-10vw);
  }
  .intro .top-illust_area .l_area .-i01 {
    width: 91.568296796%;
    right: 0;
  }
  .intro .top-illust_area .l_area .-i02 {
    width: 80.2698145025%;
    top: 39.2307692308%;
  }
  .intro .top-illust_area .l_area .-i03 {
    width: 47.3861720067%;
    top: auto;
    bottom: 0;
    right: 27.4873524452%;
  }
  .intro .top-illust_area .r_area {
    position: absolute;
    right: 0;
    left: calc(50% - 1.25vw);
    top: 0;
    width: 64.5%;
    aspect-ratio: 516/803;
  }
  .intro .top-illust_area .r_area .-i01 {
    width: 60.2713178295%;
    top: 0;
    right: 17.6356589147%;
  }
  .intro .top-illust_area .r_area .-i02 {
    width: 78.6821705426%;
    top: 32.3785803238%;
    right: auto;
    left: 0;
  }
  .intro .top-illust_area .r_area .-i02 .-l {
    position: absolute;
    width: 23.3990147783%;
    top: 31.7991631799%;
    left: 17.9802955665%;
    -webkit-animation: rb 1.5s steps(1) infinite;
    animation: rb 1.5s steps(1) infinite;
    /* 1秒ごとに動作、2ステップで繰り返し */
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
  }
  .intro .top-illust_area .r_area .-i02 .-r {
    position: absolute;
    width: 100%;
  }
  .intro .top-illust_area .r_area .-i03 {
    width: 92.2480620155%;
    top: auto;
    bottom: 0;
  }
  .intro .top-illust_area .r_area .-i03 .-l {
    position: absolute;
    width: 14.2857142857%;
    aspect-ratio: 68/152;
    top: 27.8236914601%;
    left: 23.3193277311%;
    bottom: 0;
    -webkit-animation: bt 1.5s steps(1) infinite;
    animation: bt 1.5s steps(1) infinite;
    z-index: 10;
  }
  .intro .top-illust_area .r_area .-i03 .-r {
    position: absolute;
    width: 20.5882352941%;
    aspect-ratio: 98/230;
    top: 0;
    left: 44.1176470588%;
    -webkit-animation: deg 1.5s steps(1) infinite;
    animation: deg 1.5s steps(1) infinite;
    z-index: 10;
  }
  .intro .top-illust_area .r_area .-i03 .-b {
    position: absolute;
    width: 100%;
    aspect-ratio: 476/190;
    right: 0;
    bottom: 0;
  }
  /*-------- slide_wrap --------*/
  .slide_wrap {
    position: relative;
    height: calc(280px + 51.875vw);
    padding-top: 26.25vw;
    padding-bottom: 25.625vw;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .slide_wrap .slide_area {
    position: relative;
    height: 280px;
  }
  .slide_wrap .slide_area .slides {
    position: relative;
    margin-right: 10px;
  }
  .slide_wrap .slide_area .slides.-sizeL {
    width: 360px;
  }
  .slide_wrap .slide_area .slides.-sizeM {
    width: 300px;
    margin-top: 70px;
  }
  .slide_wrap .slide_area .slides.-sizeS {
    width: 180px;
    margin-top: 100px;
  }
  .slide_wrap .bottom-illust_area {
    width: 108.75%;
    aspect-ratio: 870/872;
    height: auto;
    top: 0;
    left: -5vw;
    z-index: 15;
  }
  .slide_wrap .bottom-illust_area .illust {
    position: absolute;
  }
  .slide_wrap .bottom-illust_area .illust.-i01 {
    width: 45.0574712644%;
  }
  .slide_wrap .bottom-illust_area .illust.-i02 {
    width: 27.1264367816%;
    top: 17.4311926606%;
  }
  .slide_wrap .bottom-illust_area .illust.-i03 {
    width: 68.9655172414%;
    height: auto;
    aspect-ratio: 600/210;
    left: 9.1954022989%;
  }
  .slide_wrap .bottom-illust_area .illust.-i03 .-l {
    position: absolute;
    width: 25%;
  }
  .slide_wrap .bottom-illust_area .illust.-i03 .-c {
    width: 27.3333333333%;
    top: 16.6666666667%;
    left: 29.6666666667%;
  }
  .slide_wrap .bottom-illust_area .illust.-i03 .-r {
    width: 25%;
  }
}
/* ==========================================================================
	contents
========================================================================== */
.contents {
  position: relative;
  padding: 20rem 0 51.7rem;
  background: #fff;
}
.contents.con02 {
  background: var(--theme-color03);
}
.contents.con02 .base-mask_area {
  background: #fff;
}
.contents .inr {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 90%;
  max-width: 1260px;
  margin: 0 auto;
  z-index: 10;
}
.contents .inr.-rev {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.contents .inr .illust_area {
  display: block;
  position: absolute;
}
.contents .inr .illust_area.illust01 {
  width: 67.1428571429%;
  top: -12rem;
  right: -124px;
}
.contents .inr .illust_area.illust02 {
  width: 49.5238095238%;
  left: 0;
  bottom: 0;
}
.contents .inr .illust_area.illust03 {
  width: 56.3492063492%;
  right: -40px;
  bottom: -6px;
}
.contents .inr .text_area {
  position: relative;
  width: 500px;
  z-index: 10;
}
.contents .inr .text_area.text02 {
  color: #fff;
}
.contents .inr .text_area .en_tit {
  display: block;
  width: 100%;
  margin-bottom: 3rem;
}
.contents .inr .text_area .en_tit.en01 {
  text-align: right;
}
.contents .inr .text_area .en_tit.en01 img {
  width: 358px;
}
.contents .inr .text_area .en_tit.en02 {
  padding-left: 14px;
}
.contents .inr .text_area .en_tit.en02 img {
  width: 155px;
}
.contents .inr .text_area .en_tit.en03 {
  text-align: right;
}
.contents .inr .text_area .en_tit.en03 img {
  width: 300px;
}
.contents .inr .text_area h2 {
  font-size: 4.6rem;
  --lh: calc(64/44);
  position: relative;
  /*
        overflow: hidden;
        */
  line-height: calc(var(--lh)* 1em);
  padding-top: .1px;
  padding-bottom: .1px;
  margin-bottom: 7.5rem;
}
.contents .inr .text_area h2::before {
  content: '';
  display: block;
  height: 0;
  width: 0;
  /*
          margin-top: calc((1 - var(--lh)) * 0.5em);
          */
  margin-top: calc((1 - var(--lh))* .5em);
}
.contents .inr .text_area h2::after {
  content: '';
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc((1 - var(--lh))* .5em);
}
.contents .inr .text_area h2.tit02 {
  padding-left: 50px;
}
.contents .inr .text_area h2 .pc-pd {
  padding-left: 2em;
}
.contents .inr .text_area h2 .g_txt {
  color: var(--theme-color);
}
.contents .inr .text_area p {
  font-size: 1.9rem;
  --lh: 2;
  position: relative;
  /*
        overflow: hidden;
        */
  line-height: calc(var(--lh)* 1em);
  padding-top: .1px;
  padding-bottom: 51px;
}
.contents .inr .text_area p::before {
  content: '';
  display: block;
  height: 0;
  width: 0;
  /*
          margin-top: calc((1 - var(--lh)) * 0.5em);
          */
  margin-top: calc((1 - var(--lh))* .5em);
}
.contents .inr .text_area p::after {
  content: '';
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc((1 - var(--lh))* .5em);
}
@media screen and (max-width: 1050px) {
  .contents {
    padding-top: 0;
    padding-bottom: 40rem;
  }
  .contents .inr .illust_area {
    position: relative;
    width: 80%;
    margin: 0 auto 5rem;
  }
  .contents .inr .illust_area.illust01 {
    width: 100%;
    top: auto;
    right: auto;
  }
  .contents .inr .illust_area.illust02 {
    width: 100%;
    left: 0;
    bottom: 0;
  }
  .contents .inr .illust_area.illust03 {
    width: 100%;
    right: auto;
    bottom: auto;
  }
  .contents .inr .text_area {
    position: relative;
    margin: 0 auto;
  }
}
@media screen and (max-width: 800px) {
  .contents {
    position: relative;
    padding: 3.5rem 0 15.8rem;
  }
  .contents .inr {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto 7rem;
    margin-bottom: 7rem;
  }
  .contents .inr .illust_area.illust01 {
    width: 113.625%;
    -webkit-transform: tranaslteX(-0.5rem);
    transform: tranaslteX(-0.5rem);
  }
  .contents .inr .illust_area.illust02 {
    width: 64%;
  }
  .contents .inr .illust_area.illust03 {
    width: 90%;
  }
  .contents .inr .text_area {
    width: 80%;
    margin: 0 auto;
  }
  .contents .inr .text_area .en_tit {
    text-align: center;
    margin-bottom: 1.8rem;
  }
  .contents .inr .text_area .en_tit.en01 {
    text-align: center;
  }
  .contents .inr .text_area .en_tit.en01 img {
    width: 238px;
  }
  .contents .inr .text_area .en_tit.en02 {
    padding-left: 0;
  }
  .contents .inr .text_area .en_tit.en02 img {
    width: 103px;
  }
  .contents .inr .text_area .en_tit.en03 {
    text-align: center;
  }
  .contents .inr .text_area .en_tit.en03 img {
    width: 200px;
  }
  .contents .inr .text_area h2 {
    font-size: 3rem;
    --lh: calc(80/60);
    margin-bottom: 4rem;
    text-align: center;
  }
  .contents .inr .text_area h2.tit02 {
    padding-left: 0;
  }
  .contents .inr .text_area h2 .pc-pd {
    padding-left: 0;
  }
  .contents .inr .text_area p {
    font-size: 1.6rem;
  }
}
/* ==========================================================================
	animations
========================================================================== */
/*# sourceMappingURL=story.css.map */
/* ==========================================================================
	outline
========================================================================== */
.outline {
  position: relative;
  background: #fff;
  
  padding-top: 8.5rem;
  padding-bottom: calc(12.8rem + 0px);
}
.outline .con_tit {
  display: inline-block;
  margin-right: 4rem;
}
.outline .en_tit {
  position: relative;
  display: inline-block;
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}
.outline .inr {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 90%;
  max-width: 1260px;
  z-index: 10;
  margin: 0 auto;
}
.outline .left_area {
  position: relative;
  width: 48.4126984127%;
}
.outline dl {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  margin-top: 9rem;
}
.outline dl dt {
  width: 12.5rem;
  padding-right: 1rem;
}
.outline dl dt:not(:first-child) {
  padding-top: 3rem;
}
.outline dl dt p {
  font-size: 1.8rem;
  color: var(--theme-color);
  letter-spacing: 0.12em;
}
.outline dl dd {
  position: relative;
  width: calc(100% - 14.5rem);
  padding-bottom: 3rem;
}
.outline dl dd:not(:nth-child(2)) {
  padding-top: 3rem;
}
.outline dl dd:not(:last-child):after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 1px;
  background-image: url(../img/common/foot_tm-line_sp.png);
  background-repeat: repeat-x;
  background-size: 482px 1px;
}
.outline dl dd p {
  position: relative;
  font-size: 1.6rem;
  --lh: calc(30/16);
  position: relative;
  /*
        overflow: hidden;
        */
  line-height: calc(var(--lh)* 1em);
  padding-top: .1px;
  padding-bottom: .1px;
  letter-spacing: 0.12em;
}
.outline dl dd p::before {
  content: '';
  display: block;
  height: 0;
  width: 0;
  /*
          margin-top: calc((1 - var(--lh)) * 0.5em);
          */
  margin-top: calc((1 - var(--lh))* .5em);
}
.outline dl dd p::after {
  content: '';
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc((1 - var(--lh))* .5em);
}
.outline dl dd p + p {
  margin-top: 3rem;
}
.outline .right_area {
  position: relative;
  width: 46.0317460317%;
}
.outline .right_area:after {
  content: "";
  display: block;
  position: absolute;
  right: -4rem;
  top: -5rem;
  width: 201px;
  height: 201px;
  background: url(../img/shiire/visit_icon.png);
  background-size: cover;
  z-index: 15;
}
.outline .g_txt {
  font-size: 1.8rem;
  --lh: calc(32/18);
  position: relative;
  /*
    overflow: hidden;
    */
  line-height: calc(var(--lh)* 1em);
  padding-top: .1px;
  padding-bottom: .1px;
  color: var(--theme-color03);
  margin-bottom: 6.5rem;
  padding-right: 180px;
}
.outline .g_txt::before {
  content: '';
  display: block;
  height: 0;
  width: 0;
  /*
      margin-top: calc((1 - var(--lh)) * 0.5em);
      */
  margin-top: calc((1 - var(--lh))* .5em);
}
.outline .g_txt::after {
  content: '';
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc((1 - var(--lh))* .5em);
}
.outline .g_txt.ushizu {
  color: #f18239;
}
.outline .info_area {
  position: relative;
  display: block;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  z-index: 10;
}
.outline .info_area h3 {
  position: relative;
  display: block;
  font-size: 2rem;
  --lh: 1;
  position: relative;
  /*
      overflow: hidden;
      */
  line-height: calc(var(--lh)* 1em);
  padding-top: .1px;
  padding-bottom: .1px;
  margin-bottom: 2rem;
  -webkit-transform: translateX(10px);
  transform: translateX(10px);
}
.outline .info_area h3::before {
  content: '';
  display: block;
  height: 0;
  width: 0;
  /*
        margin-top: calc((1 - var(--lh)) * 0.5em);
        */
  margin-top: calc((1 - var(--lh))* .5em);
}
.outline .info_area h3::after {
  content: '';
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc((1 - var(--lh))* .5em);
}
.outline .info_area h3 span {
  position: relative;
  display: inline-block;
}
.outline .info_area h3 .icon {
  display: inline-block;
  position: absolute;
  left: -44px;
  margin-right: 1.4rem;
}
.outline .info_area .tell_area {
  position: relative;
  text-align: center;
  width: 100%;
  padding: 4rem 3rem 4.5rem;
  margin-bottom: .5rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
  border-radius: 1.5rem;
}
.outline .info_area .tell_area .icon {
  width: 31px;
  top: -7px;
}
.outline .info_area .tell_txt {
  position: relative;
  display: inline-block;
  font-size: 3.4rem;
  letter-spacing: -0.06em;
  color: var(--theme-color);
  margin-bottom: 2rem;
  background: #fff;
}
.outline .info_area .tell_txt:before {
  content: "Tel.";
  color: #232323;
  position: absolute;
  left: -4rem;
  bottom: 5px;
  font-size: 1.4rem;
}
.outline .info_area .n_txt {
  font-size: 1.5rem;
}
.outline .info_area .mail_area {
  position: relative;
  text-align: center;
  width: 100%;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 4rem 3rem 4.5rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
  border-radius: 1.5rem;
}
.outline .info_area .mail_area .icon {
  width: 32px;
}
.outline .info_area .mail_area .link_btn {
  width: 100%;
  max-width: 310px;
  margin: 0 auto;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding-left: 4rem;
}
@media screen and (max-width: 1200px) {
  .outline .g_txt br {
    display: none;
  }
}
@media screen and (max-width: 1000px) {
  .outline .left_area, .outline .right_area {
    width: 100%;
  }
  .outline .right_area {
    margin-top: 7rem;
  }
}
@media screen and (max-width: 800px) {
  .outline {
    padding-top: 4rem;
    padding-bottom: 6.3rem;
  }
  .outline .con_tit {
    margin-right: 2.5rem;
    margin-bottom: 0;
    padding-left: 1.5rem;
  }
  .outline .en_tit {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  .outline dl {
    position: relative;
    margin-top: 5rem;
  }
  .outline dl:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-image: url(../img/common/foot_tm-line_sp.png);
    background-repeat: repeat-x;
    background-size: 260px 1px;
  }
  .outline dl dt {
    width: 8.8rem;
  }
  .outline dl dt:first-child {
    padding-top: 3rem;
  }
  .outline dl dt p {
    font-size: 1.6rem;
  }
  .outline dl dd {
    position: relative;
    width: calc(100% - 9.8rem);
    padding-bottom: 3rem;
  }
  .outline dl dd:nth-child(2) {
    padding-top: 3rem;
  }
  .outline dl dd p {
    font-size: 1.5rem;
    --lh: calc(50/30);
  }
  .outline .right_area:after {
    right: auto;
    left: calc(50% - 15px);
    top: -1.5rem;
    width: 195px;
    height: 195px;
  }
  .outline .g_txt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    width: 310px;
    margin: 0 auto;
    margin-bottom: 4.5rem;
    padding-right: 0;
  }
  .outline .g_txt br {
    display: block;
  }
  .outline .info_area h3 {
    font-size: 1.6rem;
    margin-bottom: 2rem;
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  .outline .info_area h3 .icon {
    left: -44px;
    margin-right: 1rem;
  }
  .outline .info_area .tell_area {
    padding: 3.5rem 2rem 4rem;
    margin-bottom: .5rem;
    border-radius: 1rem;
  }
  .outline .info_area .tell_area .icon {
    width: 25px;
    top: -5px;
  }
  .outline .info_area .tell_txt {
    position: relative;
    display: inline-block;
    font-size: 3rem;
    letter-spacing: -0.06em;
    color: var(--theme-color);
    margin-bottom: 2rem;
    -webkit-transform: translateX(15px);
    transform: translateX(15px);
  }
  .outline .info_area .tell_txt:before {
    content: "Tel.";
    color: #232323;
    position: absolute;
    left: -4rem;
    bottom: 5px;
    font-size: 1.4rem;
  }
  .outline .info_area .n_txt {
    font-size: 1.5rem;
  }
  .outline .info_area .mail_area {
    padding: 3.7rem 2rem 4rem;
  }
  .outline .base-mask_area.-rev {
    -webkit-mask-image: url(../img/common/base-mask.png);
  }
}
/* ==========================================================================
	qa
========================================================================== */
.faq {
  position: relative;
  background: var(--theme-color02);
  padding-top: 13.5rem;
  padding-bottom: 12.5rem;
}
.faq .inr {
  position: relative;
  width: 90%;
  max-width: 1300px;
  margin: 0 auto;
  padding-right: 160px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /*z-index: 20; */
}
.faq .tit_area {
  position: absolute;
  right: 0;
  top: 0;
  width: 110px;
  color: #fff;
}
.faq .tit_area .en {
  display: block;
  position: absolute;
  left: 0;
  top: -5rem;
  text-align: center;
  color: #fff;
}
.faq .click_con {
  position: relative;
  width: 100%;
  max-width: 1060px;
  margin-bottom: 1rem;
  background: #fff;
  border-radius: 1rem;
  min-height: 100px;
  -webkit-transition: all 0.6s var(--easeOutQuad);
  transition: all 0.6s var(--easeOutQuad);
}
.faq .click_con .top_area {
  position: relative;
  padding: 40px 100px 30px 80px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: padding 0.6s var(--easeOutQuad);
  transition: padding 0.6s var(--easeOutQuad);
 
}
.faq .click_con .top_area .en {
  display: block;
  position: absolute;
  left: 40px;
  top: 40px;
  font-size: 2.3rem;
  color: var(--theme-color03);
  font-weight: 500;
}
.faq .click_con h3 {
  display: inline;
  font-size: 2rem;
  --lh: calc(30/20);
  position: relative;
  /*
      overflow: hidden;
      */
  line-height: calc(var(--lh)* 1em);
  padding-top: .1px;
  padding-bottom: .1px;
  color: var(--theme-color03);
  --b_color: var(--theme-color03);
  background-image: -webkit-gradient(linear, left top, right top, from(var(--b_color)), to(var(--b_color)));
  background-image: linear-gradient(90deg, var(--b_color), var(--b_color));
  background-repeat: no-repeat;
  background-position: 0px 90%;
  background-size: 100% 1px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.faq .click_con h3::before {
  content: '';
  display: block;
  height: 0;
  width: 0;
  /*
        margin-top: calc((1 - var(--lh)) * 0.5em);
        */
  margin-top: calc((1 - var(--lh))* .5em);
}
.faq .click_con h3::after {
  content: '';
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc((1 - var(--lh))* .5em);
}
.faq .click_con .icon {
  display: block;
  position: absolute;
  right: 36px;
  top: 50%;
  margin: auto;
  display: block;
  width: 20px;
  height: 14px;
  background: url(../img/common/qa_ar.png);
  background-size: cover;
  -webkit-transition: background 0.6s var(--easeOutQuad), -webkit-transform 0.6s var(--easeOutQuad);
  transition: background 0.6s var(--easeOutQuad), -webkit-transform 0.6s var(--easeOutQuad);
  transition: transform 0.6s var(--easeOutQuad), background 0.6s var(--easeOutQuad);
  transition: transform 0.6s var(--easeOutQuad), background 0.6s var(--easeOutQuad), -webkit-transform 0.6s var(--easeOutQuad);
}
.faq .click_con .text_area {
  position: relative;
  padding: 0 100px 0 80px;
  opacity: 0;
  height: 0;
  -webkit-transition: all 0.4s var(--easeOutQuad);
  transition: all 0.4s var(--easeOutQuad);
}
.faq .click_con .text_area .en {
  display: block;
  position: absolute;
  left: 40px;
  top: -2px;
  font-size: 2.3rem;
  color: var(--qa-A-color);
}
.faq .click_con .text_area p {
  font-size: 1.5rem;
  --lh: calc(28/15);
  position: relative;
  /*
        overflow: hidden;
        */
  line-height: calc(var(--lh)* 1em);
  padding-top: .1px;
  padding-bottom: .1px;
}
.faq .click_con .text_area p::before {
  content: '';
  display: block;
  height: 0;
  width: 0;
  /*
          margin-top: calc((1 - var(--lh)) * 0.5em);
          */
  margin-top: calc((1 - var(--lh))* .5em);
}
.faq .click_con .text_area p::after {
  content: '';
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc((1 - var(--lh))* .5em);
}
.faq .click_con.active {
  padding-bottom: 50px;
}
.faq .click_con.active .icon {
  background-image: url(../img/common/qa_ar_af.png);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
.faq .click_con.active .text_area {
  height: auto;
  opacity: 100;
}
@media screen and (max-width: 800px) {
  .faq {
    padding-top: 5.5rem;
    padding-bottom: 22.5rem;
  }
  .faq .inr {
    padding-right: 0;
  }
  .faq .tit_area {
    position: relative;
    width: 100%;
    padding-left: 5rem;
    margin-bottom: 7.5rem;
  }
  .faq .tit_area h2 {
    margin-right: 2.2rem;
  }
  .faq .tit_area .en {
    display: inline-block;
    position: relative;
    left: auto;
    top: auto;
    text-align: left;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  .faq .click_con {
    margin-bottom: 1.5rem;
    min-height: 75px;
  }
  .faq .click_con .top_area {
    position: relative;
    padding: 30px 65px 25px 46px;
  }
  .faq .click_con .top_area .en {
    left: 20px;
    top: 30px;
    font-size: 1.6rem;
  }
  .faq .click_con h3 {
    font-size: 1.5rem;
    --lh: calc(30/20);
  }
  .faq .click_con .icon {
    right: 23px;
    width: 18px;
    height: 13px;
  }
  .faq .click_con .text_area {
    padding: 0 25px 0 50px;
  }
  .faq .click_con .text_area .en {
    left: 26px;
    top: -2px;
    font-size: 1.6rem;
  }
  .faq .click_con .text_area p {
    font-size: 1.4rem;
  }
  .faq .click_con.active {
    padding-bottom: 33px;
  }
}
/* ==========================================================================
	animations
========================================================================== */
/*# sourceMappingURL=admission.css.map */