@charset "UTF-8";
@media screen and (min-width: 768px),print {

#ttlbox .inner-Box{padding: 23.9rem 0 0 0;margin-bottom: -126px;}
#ttlbox .inner-Box h1 .en{line-height: 1.3;margin-bottom: 1.2rem;}

#contents00 {margin: 0 auto;position: relative;padding: 9.6rem 0rem 0;background:url(../images/flow/contentsmain-back00.jpg)repeat-x bottom center;}
#contents00 .back-Box {background: url(../images/flow/contentsmain-back01.png)repeat-x bottom center;padding: 0 4rem 44rem;animation: flowBackground 80s linear infinite;}
@keyframes flowBackground { from { background-position: 0 bottom; } to { background-position: -1920px bottom; } }

#contents00 .inner-Box h2 {margin-bottom: 4.2rem;font-size: 2.8rem;line-height: 1.6;letter-spacing: 0.14rem;font-weight: 400;}
#contents00 .inner-Box p.text {font-weight: 500;margin-bottom: 1.9rem;position: relative;font-size: 1.6rem;line-height: 2.4;letter-spacing: 0;}
#contents00 .mainline { width: 100%; position: absolute; bottom: 192px; left: 50%; transform: translateX(-50%); -webkit-mask-image: linear-gradient(#000 0 0); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 0% 100%; -webkit-mask-position: right top; mask-image: linear-gradient(#000 0 0); mask-repeat: no-repeat; mask-size: 0% 100%; mask-position: right top; transition: -webkit-mask-size 1s linear, mask-size 1s linear; }
#contents00 .mainline { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
#contents00 .mainline img { display: block; width: 100%;height: auto; }

#contents00 {margin: 0 auto -127px;position: relative;padding-bottom: 131px;}
#contents00 .inner-Box {margin: 0 auto 13.4rem;position: relative;text-align: left;padding: 0 4rem;width: 880px;}
#contents00 .inner-Box p.text {margin-bottom: 2.2rem;position: relative;font-size: 1.8rem;line-height: 1.96;letter-spacing: 0;font-weight: 500;}


#contentsmain {position: relative;z-index: 1;width: 100%;background-color: #DFF3FB;background-image: url(../images/about/contentsmain-back02.png), url(../images/flow/contents01-back01.png);background-repeat: repeat, no-repeat;background-position: center center, center calc(100% + 100px); /* 初期：bottom -100px */background-size: auto, 100% auto;margin-bottom: 147px;}
#contentsmain .inner-Box {margin: 0 auto;position: relative;z-index: 2;padding: 13.7rem 4rem 35.1rem;max-width: 1080px;}
#contentsmain .backimgbox {width: 100%;height: 147px;background: url(../images/common/fix-bottom.svg) no-repeat bottom center;background-size: 100% auto;position: -webkit-sticky;position: absolute;bottom: 0;z-index: 10;opacity: 0;visibility: hidden;}
#contentsmain .inner-Box h2.f-min {margin-bottom: 8.5rem;text-align: center;font-size: 3.2rem;line-height: 1.25;letter-spacing: 0.16rem;font-weight: 400;}

#contentsmain .flowBox{padding: 0 0 0 12.3rem;position: relative;height: 315px;margin-bottom: 104px;}
#contentsmain .flowBox.flow1{height: 344px;}
#contentsmain .flowBox.flow9{height: 219px;}
#contentsmain .flow-line-drawing{ }
#contentsmain .flowBox .circle-container{position: absolute;top: -8px;left: -8px;width: 71px;height: 71px;}
#contentsmain .flowBox .circle-container .number{font-size: 3rem;left: 5px;top: 6px;position: relative;}

#contentsmain .flowBox .flow-line-drawing{background: #0097A3;width: 1px;height: 0px;top: 81px;left: 31px;position: absolute;}

#contentsmain .flowinBox{padding-right: 54%;}
#contentsmain .flowinBox h3{font-size: 2.4rem;line-height: 1.6;letter-spacing: 0;font-weight: 400;margin-bottom: 17px;}
#contentsmain .flowinBox figure{position: absolute;top: 0;right: 0;width: 40%;aspect-ratio: 4 / 3;}
#contentsmain .flowinBox figure img{width: 100%;height: auto;}
#contentsmain .flowinBox .text{ font-size: 1.6rem; line-height: 2; letter-spacing: 0.032rem; font-weight: 400; margin-bottom: 0.7rem; }
#contentsmain .flowinBox .text.pptop{padding-top: 0.8rem;}
#contentsmain .flowinBox .ltext{position: relative;font-size: 1.6rem;line-height: 2;letter-spacing: 0.032rem;font-weight: 400;padding-left: 15px;}
#contentsmain .flowinBox .ltext::before{content: "";display: block;width: 7px;height: 7px;border-radius: 50%;background: #0097A3;position: absolute;top: 13px;left: 1px;}

#contentsmain .bbttmcontents{text-align: center;padding: 10.2rem 0 0;}
#contentsmain .bbttmcontents h2{font-size: 2.8rem;line-height: 1.73;letter-spacing: 0.14rem;font-weight: 400;margin-bottom: 3.8rem;}
#contentsmain .bbttmcontents p.text{font-size: 1.8rem;line-height: 1.96;letter-spacing: 0;font-weight: 500;margin-bottom: 2.3rem;}

#contentsbottom {margin: -23px auto 16rem;position: relative;max-width: 1280px;padding: 0 4rem;}
#contentsbottom h2{font-size: 2rem;line-height: 1.92;letter-spacing: 0;font-weight: 500;text-align: center;margin-bottom: 48px;}
#contentsbottom .inner-Box ul{display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#contentsbottom .inner-Box ul li {position: relative;width: 31.7%;margin-right: 2.4%;}
#contentsbottom .inner-Box ul li:nth-child(3n) { margin-right: 0px; }
#contentsbottom .inner-Box ul li a {display: block;height: 119px;background: #EEF7F9;position: relative;padding: 37px 10px 0 145px;}
#contentsbottom .inner-Box ul li a:hover {  }
#contentsbottom .inner-Box figure.figbo { position: absolute; top: 0; left: 0; }
#contentsbottom .inner-Box figure.figbo img{  }
#contentsbottom .inner-Box p.ltext {position: relative;font-size: 1.3rem;line-height: 1.5;letter-spacing: 0;font-weight: 400;}
#contentsbottom .inner-Box p.ltext span.f-en {display: block;margin-bottom: 10px;font-size: 1.6rem;line-height: 1;letter-spacing: 0.128rem;}
#contentsbottom .inner-Box ul li .arr{position: absolute;bottom: 15px;right: 17px;transition: all 0.3s ease-in-out;}
#contentsbottom .inner-Box ul li a:hover .arr{  right: 10px;}
#contentsbottom .inner-Box ul li.acv a{ background: #0097A3; color: #fff;}

}
@media screen and (min-width:768px) and ( max-width:1919px) {

}


@media screen and (max-width: 767px) {

#contents00 {}
#contents00 .inner-Box {}
#contents00 .inner-Box p.text {margin-bottom: 1.8rem;position: relative;font-size: 3.86vw;line-height: 2.4;letter-spacing: 0;font-weight: 500;}
#contents00 {}
#contents00 .inner-Box {}
#contents00 .inner-Box p.text {font-weight: 500;margin-bottom: 3.9vw;position: relative;font-size: 3.73vw;line-height: 2.4;letter-spacing: 0;}

#contentsmain {position: relative;z-index: 1;width: 100%;background-color: #DFF3FB;background-image: url(../images/about/contentsmain-back02.png), url(../images/about/contentsmain-back01.png);background-repeat: repeat, no-repeat;background-position: center center, center calc(100% + 24.15vw); /* 初期：bottom 0vw */background-size: auto, 142vw auto;margin-bottom: 23vw;}
#contentsmain .inner-Box {position: relative;z-index: 2;padding: 13vw 3vw 51vw;}
#contentsmain .backimgbox {width: 100%;height: 35.51vw;background: url(../images/common/fix-bottom.svg) no-repeat bottom center;background-size: 100% auto;position: -webkit-sticky;position: absolute;bottom: 0;z-index: 10;opacity: 0;visibility: hidden;}
#contentsmain .inner-Box h2.f-min {margin-bottom: 8.9vw;text-align: center;font-size: 5.76vw;line-height: 1.6;letter-spacing: 0;font-weight: 400;}


#contents00 {position: relative;padding: 22vw 0vw 0vw;background:url(../images/flow/contentsmain-back00.jpg)repeat-x bottom center;background-size: 16vw auto;}
#contents00 .back-Box {background: url(../images/flow/contentsmain-back01.png)repeat-x bottom center;animation: flowBackground 80s linear infinite;background-size:  auto 43vw;padding-bottom: 52vw;}
@keyframes flowBackground { from { background-position: 0 bottom; } to { background-position: -512.00vw bottom; } }

#contents00 .inner-Box h2 {margin-bottom: 4.2vw;font-size: 5.76vw;line-height: 1.6;letter-spacing: 0.34vw;font-weight: 400;}
#contents00 .inner-Box p.text {font-weight: 500;margin-bottom: 1.9rem;position: relative;font-size: 3.86vw;line-height: 2.4;letter-spacing: 0;}

/* ラインの位置決め（SP/PC共通） */
#contents00 .mainline {
  position: absolute;
  bottom: 13.38vw;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw; /* 画面幅いっぱいに固定 */
  pointer-events: none;
  z-index: 5;
}

#contents00 .inner-Box {margin: 0 auto;position: relative;text-align: left;padding: 0 4vw 0;}
#contents00 .inner-Box p.text {margin-bottom: 2.2rem;position: relative;font-size: 4.35vw;line-height: 1.96;letter-spacing: 0;font-weight: 500;}

#contentsmain .flowBox{padding: 0 5vw 0 13.3vw;position: relative;margin-bottom: 15.12vw;}
#contentsmain .flowBox.flow1{}
#contentsmain .flowBox.flow9{height: 123.9vw;}
#contentsmain .flow-line-drawing{ }
#contentsmain .flowBox .circle-container{position: absolute;top: -3vw;left: 0vw;height: 17.15vw;width: 10vw;}
#contentsmain .flowBox .circle-container .number{font-size: 4.25vw;left: 0.21vw;top: -0.55vw;position: relative;}

#contentsmain .flowBox .flow-line-drawing{background: #0097A3;height: 0.0vw;width: 1px;top: 12.57vw;left: 6.19vw;position: absolute;}

#contentsmain .flowinBox{}
#contentsmain .flowinBox h3{font-size: 5.8vw;line-height: 1.6;letter-spacing: 0;font-weight: 400;margin-bottom: 4.11vw;}
#contentsmain .flowinBox figure{position: relative;top: 0;right: 0;width: 100%;margin-bottom: 4vw;aspect-ratio: 46 / 34;}
#contentsmain .flowinBox figure img{width: 100%;height: auto;}
#contentsmain .flowinBox .text{ font-size: 3.86vw; line-height: 2; letter-spacing: 0.08vw; font-weight: 400; margin-bottom: 0.7rem; }
#contentsmain .flowinBox .text.pptop{padding-top: 0.8rem;}
#contentsmain .flowinBox .ltext{position: relative;font-size: 3.86vw;line-height: 2;letter-spacing: 0.08vw;font-weight: 400;padding-left: 3.62vw;}
#contentsmain .flowinBox .ltext::before{content: "";display: block;width: 1.69vw;height: 1.69vw;border-radius: 50%;background: #0097A3;position: absolute;top: 3.14vw;left: 0.24vw;}

#contentsmain .bbttmcontents{text-align: center;padding: 23.2vw 0 0;}
#contentsmain .bbttmcontents h2{font-size: 5.76vw;line-height: 1.73;letter-spacing: 0.34vw;font-weight: 400;margin-bottom: 3.8rem;}
#contentsmain .bbttmcontents p.text{font-size: 3.65vw;line-height: 1.96;letter-spacing: 0;font-weight: 500;margin-bottom: 2.3rem;}



#contentsbottom {margin: -8vw auto 13vw;position: relative;padding: 0 6.6vw;}
#contentsbottom  h2 {margin-bottom: 8.2vw;font-size: 5.76vw;line-height: 1.6;letter-spacing: 0.34vw;font-weight: 400;text-align: center;}
#contentsbottom .inner-Box ul{display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#contentsbottom .inner-Box ul li {position: relative;width: 100%;margin-bottom: 3.9vw;}
#contentsbottom .inner-Box ul li a {display: block;height: 32.28vw;background: #EEF7F9;position: relative;padding: 10.43vw 2.42vw 0 27.88vw;}
#contentsbottom .inner-Box ul li a:hover {  }
#contentsbottom .inner-Box figure.figbo { position: absolute;top: 0;left: 0;width: 21.5vw; aspect-ratio: 8 / 12; overflow: hidden; text-align: center;}
#contentsbottom .inner-Box figure.figbo img { width: 100%; height: 100%; object-fit: cover; display: block; }

#contentsbottom .inner-Box p.ltext {font-weight: 500;margin-bottom: 3rem;position: relative;font-size: 3.38vw;line-height: 1.5;letter-spacing: 0;}
#contentsbottom .inner-Box p.ltext span.f-en {font-size: 3.85vw;line-height: 1;letter-spacing: 0.35vw;display: block;margin-bottom: 3.02vw;}
#contentsbottom .inner-Box ul li .arr{position: absolute;bottom: 4.26vw;width: 5.1vw;right: 4.11vw;transition: all 0.3s ease-in-out;}
#contentsbottom .inner-Box ul li a:hover .arr{  right: 2.42vw;}
#contentsbottom .inner-Box ul li.acv a{ background: #0097A3; color: #fff;}

}