@charset "UTF-8";

/*base
-----------------------------------------------------------------------------*/
body {
  background: #0B0A08;
  color: #fff;
}
section {
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity 3.0s ease;
}
section.on {
  opacity: 1;
}
body.no-scroll {
  overflow: hidden !important;
  height: 100% !important;
  position: fixed;
  width: 100%;
}

/*header
-----------------------------------------------------------------------------*/
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  transition: .3s;
  z-index: 9999;
}
.site-header.scrolled {
  background: rgba(255,255,255,.95);
}
.header__nav-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #0B0A08;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
  padding: 40px 20px;
  box-sizing: border-box;
  overflow-y: auto;
}
.header__nav-wrapper.active {
  opacity: 1;
  visibility: visible;
}
.header__logo {
  margin: 2.7rem 0 0 2.4rem;
}
.header__logo a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header__logo a img {
  width: 28.575rem;
  margin-right: 2.5rem;
}
.header__logo a span {
  font-size: 1.5rem;
  letter-spacing: .1rem;
  color: #fff;
  text-shadow: 0 0 .6rem rgba(0,0,0,.16);
  padding-top: .5rem;
}
.menu-area {
  margin: 2.6rem;
}
.menu-area .menu {
  text-align: center;
}
.menu-area .menu img {
  width: 3.6rem;
  margin-bottom: .5rem;
}
.menu-area .menu p {
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: .1rem;
  color: #fff;
  text-shadow: 0 0 .6rem rgba(0,0,0,.16);
}
.header__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.header__menu {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
.header__menu-item {
  margin-bottom: 5rem;
}
.header__menu-item a {
  display: block;
  font-size: 3.6rem;
  color: #fff;
  text-decoration: none;
  font-family: canto, serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .1rem;
}
.header__menu-item span {
  display: block;
  font-size: 1.4rem;
  color: #fff;
  margin-top: 0.5em;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-style: normal;
}
.menu-close {
  position: absolute;
  top: 2.3rem;
  right: 4.5rem;
  width: 4.263rem;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}
.menu-close img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 767px) {
.site-header {
  padding: 1rem 5%;
}
.header__logo {
  margin: 2.25rem 0 0 0;
}
.header__logo a img {
    width: 40vw;
    margin-right: 1.5rem;
}
.menu-area {
    margin: 1rem 0;
}
.head-left-box {
  width: 42%;
}
.site-header .site-title {
  width: 100%;
  margin-right: 0;
}
.site-header .catchphrase {
  display: none;
}
.site-header .head-btn-wrap {
  width: 54%;
}
.site-header .btn-box.btn-entry {
  width: 38.5%;
}
.site-header .btn-box.btn-host {
  width: 38.5%;
}
.site-header .btn-box.btn-line {
  width: 19.5%;
}
.site-header .btn-box a {
  width: 100%;
}
.site-header .btn-box.btn-entry a {
  padding: .65rem .5rem 1.1rem;
  justify-content: center;
}
.site-header .btn-box.btn-entry .btn-txt {
  font-weight: bold;
  margin: 0 .15rem;
}
.site-header .btn-box.btn-host a {
  padding: .65rem .5rem 1.1rem;
  justify-content: center;
}
.site-header .btn-box.btn-host .btn-txt {
  font-weight: bold;
  margin: 0 .15rem;
}
.site-header .btn-box.btn-line a {
  padding: .5rem;
}
.site-header .btn-box.btn-line a .btn-icon {
  width: 100%;
}
.site-header .btn-box a .btn-icon {
  width: 20%;
}
.site-header .btn-box.btn-line a .btn-txt {
  display: none;
}
.site-header .btn-box.btn-line a::after {
  content: none;
}
.site-header .btn-box a::after {
  content: '';
  width: .35rem;
  height: .43rem;
  background: url("../img/icon-arrow.svg") no-repeat center center;
  background-size: 100%;
}
}


/*footer
-----------------------------------------------------------------------------*/
footer {
  padding: 2rem 0 3rem;
  position: relative;
  z-index: 2;
}
footer .foot-logo {
  width: 28.575rem;
  margin: 0 auto 1rem;
}
footer .foot-menu ul li {
  margin: 0 1.5rem 1rem;
  font-size: 1.4rem;
}
footer .foot-menu ul li::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 1.794rem;
  height: 1.6rem;
  background: url("../img/icon-link.svg") no-repeat center top;
  background-size: 100%;
  margin-left: .5rem;
}
footer .copyright {
  font-size: 1.2rem;
  text-align: center;
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
footer .foot-logo {
  margin: 0 auto 1rem;
}
footer .copyright {
  display: block;
  width: 100%;
  text-align: center;
}
}


/*color-ball
-----------------------------------------------------------------------------*/
body {
  position: relative;
}
.color-ball {
  position: absolute;
  display: block;
  width: 100vw;
  height: 100vw;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.color-ball.on {
  opacity: .8;
  animation: flickerOpacity 9s ease-in-out 2s infinite;
  animation-fill-mode: forwards;
}
@keyframes flickerOpacity {
  0%   { opacity: 0.8; }
  22.22% { opacity: 0.8; }
  55.55% { opacity: 0.5; }
  66.66% { opacity: 0.5; }
  100%  { opacity: 0.8; }
}
.color-ball.light-orange {
  background: radial-gradient(circle, rgba(138,124,100,1) 0%, rgba(26,26,26,0) 50%);
  top: 54.0rem;
  left: 44.5rem;
}
.color-ball.purple {
  background: radial-gradient(circle, rgba(147,54,136,1) 0%, rgba(26,26,26,0) 50%);
  top: 202.9rem;
  left: -36.0rem;
}
.color-ball.green {
  background: radial-gradient(circle, rgba(61,114,21,1) 0%, rgba(26,26,26,0) 50%);
  top: 388.3rem;
  left: 30.0rem;
}
.color-ball.red {
  background: radial-gradient(circle, rgba(178,58,72,1) 0%, rgba(26,26,26,0) 50%);
  top: 638.5rem;
  left: -64.5rem;
}
.color-ball.blue {
  background: radial-gradient(circle, rgba(58,58,178,1) 0%, rgba(26,26,26,0) 50%);
  top: 712.9rem;
  left: 60.0rem;
}
.color-ball.light-green {
  background: radial-gradient(circle, rgba(56,100,95,1) 0%, rgba(26,26,26,0) 50%);
  top: 939.2rem;
  left: -32.1rem;
}
.color-ball.orange {
  background: radial-gradient(circle, rgba(178,113,58,1) 0%, rgba(26,26,26,0) 50%);
  top: 1140.9rem;
  left: 16.0rem;
}

@media screen and (max-width: 767px) {
.color-ball.light-orange {
    top: 104rem;
    left: 21.5rem;
}
.color-ball.purple {
    top: 252.9rem;
    left: -16rem;
}
.color-ball.green {
    top: 318.3rem;
    left: 20rem;
}
.color-ball.red {
    top: 443.5rem;
    left: -1.5rem;
}
.color-ball.blue {
    top: 712.9rem;
    left: 20rem;
}
.color-ball.light-green {
    top: 979.2rem;
    left: -22.1rem;
}
}

/*mv_sec
-----------------------------------------------------------------------------*/
#mv {
  padding: 0;
  height: 100vh;
  opacity: 1 !important;
}
.mv_wrap {
  position: relative;
  height: 100vh;
  transition: transform 0.5s ease;
  will-change: transform;
  animation-fill-mode: forwards;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mv_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/mv-bg.jpg") no-repeat top center;
  background-size: cover;
  z-index: 0;
  transform: scale(1);
  transition: transform 0.5s ease;
  will-change: transform;
}
@keyframes zoomInBackground {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}
.mv_bg.zooming {
  animation: zoomInBackground 30s ease forwards;
}
.mv_bg.reset {
  transform: scale(1);
  animation: none;
}
.mv__inner {
  max-width: 1180px;
  width: 100%;
  padding: 0 4rem;
  margin: 0 auto;
}
.mv__sitename {
  font-size: 2.2rem;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 .6rem rgba(0,0,0,.16);
  line-height: 1;
  margin-bottom: 9rem;
  letter-spacing: .13rem;
}
.mv__catch-box {
  margin-bottom: 5rem;
}
.mv__sitename,
.mv__catch-box {
  opacity: 0;
  transition: opacity 1.4s ease;
}

.mv__sitename.on {
  opacity: 1;
  transition-delay: 0.4s;
}

.mv__catch-box.on {
  opacity: 1;
  transition-delay: 1.6s;
}
.scroll-indicator {
  position: absolute;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
  color: #fff;
}
.scroll-label {
  font-size: 1.6rem;
  letter-spacing: 0.15em;
  margin-bottom: 8px;
  color: #fff;
}
.scroll-line {
  position: relative;
  width: 2px;
  height: 67px;
  margin: 0 auto;
  background-color: #fff;
  overflow: visible;
}

.scroll-ball {
  position: absolute;
  top: 0;
  left: 50%;
  width: 7px;
  height: 7px;
  background-color: #fff;
  border-radius: 50%;
  transform: translateX(-50%);
  animation: scrollDown 1.8s ease-in-out infinite;
}

@keyframes scrollDown {
  0% {
    top: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    top: 60px;
    opacity: 1;
  }
  100% {
    top: 60px;
    opacity: 0;
  }
}

@media screen and (max-width: 767px) {
.mv_bg {
  background: url("../img/mv-bg.jpg") no-repeat top right 30%;
  background-size: cover;
}
.mv__sitename {
  line-height: 1.5;
}
.mv_list_area {
    margin-top: -6rem;
}
.mv_list_area .slick-slide {
    width: 20rem;
}
.mv_wrap {
  padding: 9rem 0 23rem;
  background: url("../img/mv_bg_sp.webp") no-repeat center center;
  background-size: cover;
}
.mv_box {
  padding: 0 2.5rem;
}
.mv_box .mv_catch {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
.mv_box h2 {
  font-size: 3.2rem;
  margin-bottom: 2rem;
  padding-top: 0;
}
.mv_box h2 .sp-bg,
.mv_box .bottom_txt {
  background: rgba(255,255,255,.8);
}
.mv_box h2 .red {
  font-size: 3.6rem;
  padding-top: 1rem;
}
.mv_box h2 .red.sp-l {
  font-size: 5rem;
}
.mv_box h2 .pt {
  display: block;
  padding-top: 1rem;
}
.mv_box h2 .pt .sp-bg {
  padding-top: 1rem;
}
.mv_box h2 .s-txt {
  font-size: 2.5rem;
}
.mv_box h2 .s-txt.sp-l {
  font-size: 3.6rem;
  line-height: 1.5;
}
.mv_box .cut {
  letter-spacing: -1.5rem;
}
.mv_box .bottom_txt {
  font-size: 1.75rem;
  margin-bottom: 4rem;
  line-height: 1.5;
  display: inline-block;
}
.mv_box .bottom_txt .red {
  font-size: 2.5rem;
}
.mv_box .red.text-m {
  font-size: 2.1rem;
}
.mv_box .mv_btn_wrap {
    margin-bottom: -7rem;
}
.mv_batch {
  width: 70%;
}
.mv_batch h3 {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
}
.mv_box .mv_btn_wrap a {
    width: 100%;
}
}


/*sec_common
-----------------------------------------------------------------------------*/
section {
  position: relative;
}
section p {
  font-size: 1.6rem;
  line-height: 2.25;
}
.sec-tit-box {
  padding: 17rem 0 0 8.3333%;
  margin-bottom: 6rem;
}
.reverse .sec-tit-box {
  padding: 17rem 8.3333% 0 0;
}
.reverse .sec-img-wrapper {
  order: 2;
}
.reverse .sec-txt {
  order: 1;
}
.sec-tit-box .en-tit {
  font-size: 8rem;
  letter-spacing: .1rem;
  margin-bottom: 5rem;
}
.sec-tit-box .jp-tit {
  font-size: 2.4rem;
  letter-spacing: .1rem;
  margin-left: 5rem;
}
.sec-tit-box .jp-tit.no-margin {
  margin-left: 0;
}
.sec-img-wrapper {
  position: relative;
  width: 57.291667%;
  height: auto;
}
.sticky-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.sec-img {
  position: relative;
}
.sec-img img {
  display: block;
  width: 100%;
  height: auto;
}
.sec-txt {
  width: 36.854167%;
  padding: 30rem 5.3333% 0 0;
}
.structure-sec .sec-txt {
  padding: 38.5rem 5.3333% 0 0;
}
.reverse .sec-txt {
  padding: 30rem 0 0 5.3333%;
}
.sec-txt h4 {
  font-size: 2.8rem;
  line-height: 2.25;
  margin-bottom: 6rem;
}

.btn01_wrap {
}
.btn01_wrap a {
  position: relative;
  background: #c80046;
  color: #fff;
  box-shadow: 0px 4px 0px 0px rgba(162, 13, 58, 1);
  transition: .3s;
  width: 38rem;
  padding: 2rem 0;
  border-radius: .7rem;
  font-size: 1.426rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.btn01_wrap a::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 5px solid #ffffff;
  border-right: 0;
  position: absolute;
  top: 50%;
  right: 4.5rem;
  transform: translateY(-50%);
}
.btn01_wrap a:hover {
  opacity: 1;
  box-shadow: 0px 0px 0px 0px rgba(162, 13, 58, 1);
  transform: translateY(4px);
  background: #d84c7d;
}
.btn01_wrap a .btn_top {
  position: absolute;
  color: #c80046;
  text-align: center;
  border: 1px solid #c80046;
  border-radius: 3rem;
  padding: .5rem 2.5rem;
  top: -1.15rem;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  font-size: 1.215rem;
}
.btn01_wrap a .btn_inner {
  display: flex;
  align-items: center;
  justify-content: center;
  
}
.btn01_wrap a .btn_inner span {
  background: #fff;
  border-radius: .5rem;
  color: #c80046;
  margin-right: 1rem;
  padding: .5rem 1rem;
}
@media screen and (max-width: 767px) {
section {
  padding: 5rem 0;
}
.sec-tit-box,
.reverse .sec-tit-box {
  padding: 10rem 7.5% 0;
  margin-bottom: 4rem;
}
.sec-tit-box .en-tit {
    font-size: 5.6rem;
}

.sec-txt h4 {
  font-size: 2.6rem;
  line-height: 2.25;
  margin-bottom: 6rem;
}
.sec-tit-box h2 {
  font-size: 2.6rem;
}
.sec-tit-box h2 span.sec02-span {
  font-size: 2.2rem;
}
.sec-tit-box h2 span.sec06-span {
  font-size: 2.6rem;
  display: block;
}
.sec-img-wrapper {
    width: 100%;
}
.sec-tit-box .jp-tit {
  display: block;
  margin-left: 0;
  margin-top: 1rem;
}

.reverse .sec-img-wrapper {
  order: 1;
}
.reverse .sec-txt {
  order: 2;
}
.sec-txt,
.reverse .sec-txt {
    width: 100%;
    padding: 6rem 7.5% 0;
}
}

/*message-sec
-----------------------------------------------------------------------------*/
.message-sec {
  padding-bottom: 7rem;
}
.message-sec .sec-txt p {
  margin-bottom: 3rem;
}
.message-sec .sec-txt p:last-child {
  margin-bottom: 0;
}
.message-bottom-txt {
  margin-top: 12rem;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.message-bottom-txt.on {
  opacity: 1;
}
.message-second-sec {
  margin-bottom: 3rem;
}
.message-second-sec .sec-txt {
  padding: 10rem 0 0 5.3333%;
}
.message-second-sec .sec-img {
  padding-top: 10rem;
}

@media screen and (max-width: 767px) {
.message-sec {
  padding-bottom: 8rem;
}
.message-bottom-txt {
  margin: 12rem auto 0;
  width: 80%;
}
.message-second-sec .sec-txt {
    padding: 6rem 7.5% 0;
}
}

/*issues-sec
-----------------------------------------------------------------------------*/
.issues-sec {
  padding-bottom: 3rem;  
}
.issues-sec .issue-block {
  opacity: 0;
  transform: translateY(10%);
  transition: opacity 1.6s ease, transform 1.6s ease;
}
.issues-sec .issue-block:not(:last-child) {
  margin-bottom: 10rem;
}
.issues-sec .issue-block.on {
  opacity: 1;
  transform: translateY(0);
}
.issues-sec .issue-block .issue-txt-box {
  width: 65.78%
}
.issues-sec .issue-block .issue-img-box {
  width: 30.73%
}
.issues-sec .issue-block:nth-child(even) .issue-txt-box {
  padding: 0 5.3333% 0 0;
  order: 2;
}
.issues-sec .issue-block:nth-child(odd) .issue-txt-box {
  padding: 0 0 0 5.3333%;
}
.issues-sec .issue-block:nth-child(even) .issue-img-box {
  order: 1;
}
.issues-sec .issue-block h4 {
  font-size: 2.8rem;
  margin-bottom: 2rem;
  line-height: 1;
}
.issues-sec .issue-block .issue-num {
  font-size: 10rem;
  margin-right: 2rem;
  vertical-align: middle;
  color: rgba(255,255,255,.5);
}

@media screen and (max-width: 767px) {
.issues-sec {
  padding-bottom: 0;
}
.issue-box {
  width: 70%;
  margin: 0 auto 7rem;
}
.issue-box h4 {
  font-size: 2.4rem;
  margin-bottom: 2rem;
}
.issue-box.wide .flex_box {
  width: 100%;
  margin: 0 0 2rem;
}
.issue-box.wide .issue-img-box {
  width: 100%;
  overflow-x: scroll;
}
.issue-box.wide .issue-img-box .scroll-content {
  width: 200%;
}
.issues-sec .issue-block .issue-txt-box, 
.issues-sec .issue-block .issue-img-box {
  width: 100%;
}
.issues-sec .issue-block .issue-txt-box {
  order: 2 !important;
}
.issues-sec .issue-block:nth-child(even) .issue-txt-box {
  width: 100%;
  padding: 6rem 7.5% 0;
  order: 2;
}
.issues-sec .issue-block:nth-child(odd) .issue-txt-box {
  padding: 6rem 7.5% 0;
}
.issues-sec .issue-img-box {
  order: 1 !important;
}
.issues-sec .issue-block .issue-txt-box h4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.issues-sec .issue-block .issue-txt-box .issue-num {
  width: 17%;
  line-height: 1;
  font-size: 6rem;
  margin-right: 1%;
}
.issues-sec .issue-block .issue-txt-box .mincho {
  width: 78%;
  line-height: 1.5;
  font-size: 2.6rem;

}
}

/*netpositive-sec
-----------------------------------------------------------------------------*/
.netpositive-sec .np-firstimg {
  margin-bottom: 8rem;
}
.netpositive-block:not(:last-child) {
  margin-bottom: 13rem;
}
.netpositive-block {
}
.npblock-tit {
  padding: 3rem 0;
  border-top: 1px solid rgba(255,255,255,.5);
  border-bottom: 1px solid rgba(255,255,255,.5);
  margin-bottom: 4rem;
}
.npblock-tit h5 {
  font-size: 2.8rem;
  text-align: center;
  margin-bottom: 1rem;
  letter-spacing: .2rem;
}
.npblock-tit .subtit {
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 0;
  line-height: 1;
  letter-spacing: .2rem;
}
.npblock-txt-box .catch {
  text-align: center;
  font-size: 3.2rem;
  margin: 3rem 0;
}
.npblock-txt-box .txt-green {
  color: #A5FFB6;
}
.npblock-txt-box .txt-yellow {
  color: #FFE784;
}
.npblock-txt-box .txt-pink {
  color: #FFB2B2;
}
.npblock-txt-box .txt-purple {
  color: #CB84FF;
}
.npblock-txt-box .txt-lblue {
  color: #46CDFF;
}
.npblock-txt-box .txt-center {
  text-align: center;
}
.np-box {
  width: 31.5%;
}
.np-box figure {
  position: relative;
  margin-bottom: 2rem;
}
.np-box figure .onimg-txt-top {
  position: absolute;
  left: 1.5rem;
  top: 1rem;
  font-size: 5.0rem;
  text-shadow: 0 0 .6rem #000;
  color: #fff;
  letter-spacing: .2rem;
}
.np-box figure .onimg-txt-top-s {
  font-size: 3.0rem;
}
.np-box figure .onimg-txt-bottom {
  position: absolute;
  left: 1.5rem;
  bottom: 1rem;
  font-size: 2.0rem;
  text-shadow: 0 0 .6rem #000;
  color: #fff;
  line-height: 1.5;
  letter-spacing: .2rem;
}
.mb3 {
  margin-bottom: 3rem;
}
.mb10 {
  margin-bottom: 10rem;
}
@media screen and (max-width: 767px) {
.np-box {
    width: 100%;
}
.np-box:not(:last-child) {
  margin-bottom: 5rem;
}
.npblock-txt-box .txt-center.sp-left {
  text-align: left;
}
}

/*structure-sec
-----------------------------------------------------------------------------*/
.structure-sec {
  padding-bottom: 17rem;  
}
.structure-box {
  margin-top: 3rem;
  position: relative;
  aspect-ratio: 590 / 400;
  opacity: 0;
  transition: opacity .4s ease;
}
.structure-box.on {
  opacity: 1;
}
.structure-box img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.structure-box .structure-num {
  position: absolute;
  top: 2rem;
  left: 2.5rem;
  z-index: 2;
  font-size: 7rem;
  color: #fff;
}
.structure-box .structure-img-txt {
  position: absolute;
  bottom: 2.5rem;
  left: 2.5rem;
  right: 2.5rem;
  z-index: 2;
}
.structure-box .structure-img-txt h5 {
  font-size: 2.2rem;
  line-height: 1.5;
  color: #fff;
  letter-spacing: .1rem;
}

@media screen and (max-width: 767px) {
.structure-sec {
  padding-bottom: 8rem;
}
.structure-sec .sec-txt {
  width: 100%;
  padding: 6rem 7.5% 0;
}
.structure-box .structure-img-txt h5 {
  font-size: 2.0rem;
}
}

/*vision-sec
-----------------------------------------------------------------------------*/
.vision-sec {
  margin-bottom: 3rem;
}
.vision-catch {
  margin-bottom: 8rem;
}
.vision-img-box {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto 18rem;
  overflow: hidden;
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.4s ease, transform 1.4s ease;
}
.fade-in.on {
  opacity: 1;
  transform: translateY(0);
}
.vision-txt-box {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.vision-txt-box.middle {
  margin-bottom: 10rem;
}
.vision-txt-box.on {
  opacity: 1;
}
.vision-txt-box h4 {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 5rem;
}
.vision-txt-box p {
  margin-bottom: 5rem;
  text-align: center;
}
.vision-point-block {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.vision-point-block.on {
  opacity: 1;
}
.vision-point-box {
  width: 100%;
  background: rgba(255,255,255,.1);
  border-radius: 2rem;
  position: relative;
  padding: 4rem 0;
}
.vision-point-box:not(:last-child) {
  margin-bottom: 3rem;
}
.vision-point-box .vision-num {
  position: absolute;
  top: 2rem;
  left: 2rem;
  font-size: 8rem;
  opacity: .3;
}
.vision-point-box .vision-point-img {
  width: 32%;
  margin: 0 auto 3rem;
}
.vision-point-box .vision-point-txt p {
  text-align: center;
  font-size: 2.0rem;
  line-height: 1.25;
}
.vision-point-box .vision-point-txt p .point-name {
  font-size: 2.8rem;
}
.vision-point-box .vision-point-txt p .point-price-m {
  font-size: 3.6rem;
}
.vision-point-box .vision-point-txt p .point-price {
  font-size: 5.0rem;
}
.vision-img-box svg {
  width: 100%;
  height: auto;
  display: block;
}
.sure-village {
  margin-bottom: 5rem;
}

/* 初期状態（非表示・透明） */
#title,
#realtor,
#realtor-txt,
#buyer,
#buyer-txt,
#society,
#society-txt,
#catch {
  opacity: 0;
  transform: translateY(20px); /* 下にずらしておくと自然 */
  transition: all 0.6s ease;   /* ふわっと出る */
}

/* on が付いたら表示 */
#title.on,
#realtor.on,
#realtor-txt.on,
#buyer.on,
#buyer-txt.on,
#society.on,
#society-txt.on,
#catch.on {
  opacity: 1;
  transform: translateY(0);
}
.vision-box {
  width: 48.5%;
}


@media screen and (max-width: 767px) {
.vision-sec {
  padding-bottom: 0;
  margin-bottom: 0;
}
.vision-txt-box p {
  text-align: left;
}
.vision-box {
    width: 100%;
}
.vision-box:first-child {
  margin-bottom: 13rem;
}
}

/*foundation-sec
-----------------------------------------------------------------------------*/
.foundation-sec {
  margin-bottom: 20rem;
}
.foundation-sec .introduction-box {
  width: 100%;
  max-width: 780px;
  margin: 8rem auto 0;
}
.foundation-sec .introduction-box p {
  position: relative;
  padding: 1rem 0 0 1.5rem;
  line-height: 1;
  
}
.foundation-sec .introduction-box p::before {
  content: '';
  display: block;
  width: .62rem;
  height: .7rem;
  background: #ffffff;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  position: absolute;
  top: calc(50% + .5rem);
  left: 0;
  transform: translateY(-50%);
}

@media screen and (max-width: 767px) {
.foundation-sec {
  margin-bottom: 5rem;
}
}

/*data-sec
-----------------------------------------------------------------------------*/
.data-sec .issue-box {
  width: 47.5%;
}
.data-sec .issue-box.wide {
  width: 100%;
}
.data-sec .issue-box:not(:last-child) {
  margin-bottom: 8rem;
}
.data-sec h6 {
  font-size: 2.8rem;
  margin-bottom: 3rem;
}
@media screen and (max-width: 767px) {
.data-sec h6 {
  font-size: 2.3rem;
}
.data-sec .issue-box {
    width: 70%;
}
}



/*stories-sec
-----------------------------------------------------------------------------*/
.stories-sec {
  margin-bottom: 17rem;
}
.stories-sec .sec-tit-box {
  padding: 0;
}
.stories-sec .en-tit {
  text-align: center;
}
.stories-box {
  width: 47.5%;
}
.stories-box a {
  position: relative;
  aspect-ratio: 767 / 250;
  display: block;
}
.stories-box a:hover {
  opacity: 1;
}
.stories-box a .img-box {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  border-radius: 2rem;
}
.stories-box a .img-box img {
  transform: scale(1);
  transition: .5s ease;
}
.stories-box a:hover .img-box img {
  transform: scale(1.05);
}
.stories-box a .txt-box {
  position: absolute;
  bottom: 1.5rem;
  left: 2rem;
}
.stories-box a .stories-num {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  font-size: 4rem;
  opacity: .3;
}
.stories-box a .stories-num span {
  font-size: 6.4rem;
}
.stories-box a .txt-box h4 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}
.stories-box a .txt-box p {
  font-size: 1.3rem;
}

@media screen and (max-width: 767px) {
.stories-sec {
  padding-bottom: 8rem;
}
.stories-sec .sec-tit-box {
  padding: 0 2.5% 0;
}
.stories-sec .en-tit {
  text-align: left;
}
.stories-box {
  width: 100%;
}
.stories-box a .txt-box {
  bottom: -11.5rem;
}
}

/*donation-sec
-----------------------------------------------------------------------------*/
.donation-sec {
  padding-bottom: 24rem;  
}
.donation-box {
  margin-bottom: 3rem;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.donation-box.on {
  opacity: 1;
}
.donation-box a:hover {
  opacity: 1;
}
.donation-box a figure {
  margin-bottom: .5rem;
  position: relative;
  aspect-ratio: 585 / 380;
  overflow: hidden;
}
.donation-box a figure img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(1);
  transition: .5s ease;
}
.donation-box a:hover figure img {
  transform: scale(1.05);
}
.link-txt::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 1.794rem;
  height: 1.6rem;
  background: url("../img/icon-link.svg") no-repeat center top;
  background-size: 100%;
  margin-right: 1rem;
}

@media screen and (max-width: 767px) {
.donation-sec {
  padding-bottom: 8rem;
}
}




/*page common
-----------------------------------------------------------------------------*/
.page-title {
  display: flex;
  align-items: center;
  height: 40rem;
}
.page-title h1 {
  font-size: 3.2rem;
  margin-bottom: 2rem;
  color: #fff;
}
.page-title p {
  font-size: 2.0rem;
  color: #fff;
  line-height: 1;
  letter-spacing: .2rem;
}
.bread-crumb {
  padding: 2rem 0;
}
.bread-crumb ol {
  display: flex;
  justify-content: flex-start;
}
.bread-crumb ol li {
  color: #fff;
  font-size: 1.2rem;
}
.bread-crumb ol li:not(:last-child)::after {
  content: '>';
  padding: 0 1.5rem;
}
@media screen and (max-width: 767px) {
.page-title {
  height: 30rem;
}
}

/*stories
-----------------------------------------------------------------------------*/
.stories section {
  opacity: 1;
}
.stories .page-title {
  background: url("../img/stories/title-bg.jpg") no-repeat center right;
  background-size: cover
}
.stories-main-sec {
  padding: 5rem 0;
}
.stories-main-sec .wrap-s {
  position: relative;
}
.stories-main-sec .bg-img {
  position: relative;
  width: 70%;
  max-width: 1060px;
  margin: 0 0 0 auto;
  z-index: 1;
}
.stories-main-sec .stories-main-txt {
  position: absolute;
  left: 4rem;
  top: 7rem;
  z-index: 2;
  font-size: 3.2rem;
  color: #000;
  line-height: 2.5;
}
.stories-main-sec .stories-main-txt span {
  background: #fff;
  padding: .5rem 1.5rem;
  margin-bottom: 1.5rem;
}
.stories-main-sec .stories-main-name {
  position: absolute;
  left: 4rem;
  bottom: 4rem;
  z-index: 2;
  background: #333333;
  padding: 2rem 4rem;
}
.stories-main-sec .stories-main-name .num {
  font-size: 1.2rem;
  color: #EA8623;
  margin-bottom: 1.5rem;
  letter-spacing: .1rem;
  line-height: 1;
}
.stories-main-sec .stories-main-name .name {
  font-size: 1.6rem;
  letter-spacing: .1rem;
  line-height: 1;
}
.stories-main-sec .stories-main-name .name span {
  font-size: 2.0rem;
}
.stories-content-sec {
  padding: 5rem 0;
}
.stories-block:not(:last-child) {
  padding: 0 0 10rem;
}
.stories-block h3 {
  font-size: 2.6rem;
  letter-spacing: .1rem;
  line-height: 1.75;
  padding-bottom: 2rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.3);
}
.stories-block p:not(:last-child) {
  margin-bottom: 3rem;
}
.stories-block figure {
  width: 100%;
  max-width: 860px;
  margin: 0 auto 7.5rem;
}
.stories-profile-sec {
  padding: 0 0 5rem 0;
}
.stories-profile-sec .wrap-s {
  position: relative;
}
.stories-profile-sec .bg-img {
  position: relative;
  width: 25%;
  max-width: 400px;
  margin: 0 0 0 auto;
  z-index: 1;
}
.stories-profile-sec .prof-box {
  position: absolute;
  left: 4rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: #333333;
  padding: 3rem 4rem 2rem;
  width: 75%;
}
.stories-profile-sec .prof-box .prof-name {
  font-size: 2.0rem;
  letter-spacing: .2rem;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.3);
}
.stories-profile-sec .prof-box .prof-name span {
  font-size: 1.2rem;
  padding-left: 2rem;
}
.stories-profile-sec .prof-box .prof-txt {
  font-size: 1.2rem;
}
.stories-profile-sec .prof-box .txt-right {
  font-size: 1.2rem;
  text-align: right;
}
.back-btn-wrap {
  padding: 5rem 0 5rem;
}
.back-btn {
  width: 80%;
  max-width: 360px;
  margin: 0 auto;
}
.back-btn a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 6rem;
  width: 100%;
  color: #fff;
  background: #333;
  transition: .3s;
  font-size: 1.6rem;
  letter-spacing: .2rem;
}
.back-btn a::before {
  content: '';
  display: block;
  width: 8.7px;
  height: 10px;
  background: #ffffff;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
}
@media screen and (min-width: 768px) {
.back-btn a:hover {
  color: #000;
  background: #ccc;
}
.back-btn a:hover::before {
  background: #000;
}
}

@media screen and (max-width: 767px) {
.stories .page-title {
  background: url("../img/stories/title-bg_sp.jpg") no-repeat center right;
  background-size: cover
}
.stories .page-title .wrap {
  margin-top: 4rem;
}
.stories-main-sec .stories-main-txt {
  position: absolute;
  left: 5vw;
  top: 1rem;
  font-size: 2.4rem;
  line-height: 2.25;
}
.stories-main-sec .stories-main-name {
  left: 5vw;
  bottom: 1rem;
  padding: 1rem 2rem;
}
.stories-main-sec .stories-main-name .num {
  font-size: 1.4rem;
  margin-bottom: .5rem;
}
.stories-main-sec .stories-main-name .name {
  font-size: 1.6rem;
}
.stories-main-sec .stories-main-name .name span {
  font-size: 2.0rem;
}
.stories-block h3 {
  font-size: 2.4rem;
  letter-spacing: .1rem;
  line-height: 1.75;
  padding-bottom: 2rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.3);
}
.stories-profile-sec {
  padding: 0;
}
.stories-profile-sec .prof-box {
  position: relative;
  left: 0;
  top: 0;
  transform: translateY(0);
  padding: 3rem;
  width: 100%;
}
.stories-profile-sec .prof-box .prof-img {
  width: 50%;
  margin: 0 auto 2rem;
}
.stories-profile-sec .prof-box .prof-name {
  text-align: center;
}
.stories-profile-sec .prof-box .prof-name span {
  display: block;
  padding: 0;
}
.back-btn a {
  height: 6rem;
  font-size: 2.0rem;
}
}