.corp {
    position: relative;
    height: clamp(712px, 59.33vw, 890px);
    padding: 3.33%;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media(max-width: 767px){
	.corp{
		margin: auto;
		width: 100%;
		height: calc(100vh - 130px);
		min-height: 430px;
	}
}
.corp svg.bg-animation {
  position: absolute;
  top: 0;
  right: 0;
  width: 358px;
  height: 1080px;
  z-index: -1;
  pointer-events: none;
}
@media(max-width: 767px){

  #wrap .corp svg.bg-animation {
    position: absolute;
    top:0px;
    right:0;
    width: 174px;
    height: auto;
    z-index:-1;
    aspect-ratio:349/1053
}
}
.corp__btn {
    width: 100%;
    max-width: 1400px;
    position: relative;
    aspect-ratio: 1400 / 400;
}
@media(max-width: 767px){
    .corp__btn{
    aspect-ratio: 668 / 813;
    width: 100%;
    max-width: 375px;
    }

} 

.mask-layer {
  position: absolute;
  width: 100%;
  color: transparent;
  display: flex;
  justify-content:space-between;
  align-items: center;
}
.keyv-logo {
  width: 485px;
  height: 400px;
  fill: transparent; 
  background: linear-gradient(135deg, #236474, #b1993b, #dda879);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientMove 8s linear infinite;
  overflow: visible;
  will-change: transform;
}
.splitting-txt {
    display: flex;
    flex-direction: column;
    height: 400px;
    padding-top: 70px;
    box-sizing: border-box;
    gap: 60px;
}
.logo-svg{
  opacity: 0;
}
.keyv-jp{
    text-align: center;

}
.keyv-jp .char{
    font-size: 7rem;
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    background: linear-gradient(135deg, #b470b1, #4cbde5, #7fb09f);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientMove 10s linear infinite;
    letter-spacing: 1px;
    line-height: 1;
}
.keyv-jp em {
  font-size: 8rem;
}
.keyv-eng {
  font-size: 8rem;
  font-family: "am-lombardia", sans-serif;
  text-align: center;
  background: linear-gradient(135deg, #817283, #eef077, #91d3d1);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientMove 12s linear infinite;
  opacity: 0;
  line-height: 1;
}
.keyv-eng.fade-up{
    opacity: 1;
    transform: translateY(20px);
    animation: fadeUp 1s ease-out forwards;
}


.char.animate {
  animation: slideIn 0.8s ease-out forwards, gradientMove 10s linear infinite;
}
.keyv-eng small {
    font-size: 1.6rem;
    font-family: "Alata", sans-serif;
    display: block;
    font-weight: 700;
    font-synthesis-weight: auto;
    margin-top: 15px;
}
/* グラデーションがゆっくり動く */
@keyframes gradientMove {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
@media (min-width: 768px) and (max-width: 1449px){

.keyv-logo {
  width: clamp(401px,33.4vw,485px);
  height: clamp(331px,27.5vw,400px);
}
.splitting-txt {
    height: clamp(331px,27.5vw,400px);
    padding-top: clamp(57px,4.82vw,70px);
    gap: clamp(50px,4.13vw,60px);
}
.keyv-jp .char{
    font-size: clamp(57px,4.82vw,70px);
    letter-spacing: clamp(0.7px,0.82vw,1px);
}
.keyv-jp em {
  font-size: clamp(6.6rem,5.55vw,8rem);
}
.keyv-eng {
  font-size: clamp(6.6rem,5.55vw,8rem);
}
.keyv-eng small {
    font-size: clamp(1.3rem,1.1vw,1.6rem);
    margin-top: clamp(12px,1.03vw,15px);
}
}
 @media(max-width: 767px){
    .mask-layer {
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }
    .keyv-logo {
        width: 200px;
        height: auto;
        }
    .splitting-txt {
        height: 400px;
        padding-top: 25px;
        height: auto;
        gap: 15px;
    }
    .keyv-jp em {
        font-size: 4rem;
        }
    .keyv-jp .char{
        font-size: 3rem;
        line-height: 1.4;
        }
    .keyv-eng {
        font-size: 4rem;
        letter-spacing: -0.5px;
    }
    .keyv-eng small{
        letter-spacing: 0;
    }
 }
.corp__main{
    margin-bottom:200px
}
@media(max-width: 767px){
    .corp__main{
    margin-bottom:62px;
    position: relative;
}
 @media(max-width: 767px){
    .corp__main svg  {
        position: absolute;
        bottom: 228px;
        width: 75px;
        height: auto;
        display: block;
        z-index: -1;
        aspect-ratio: 152 / 1026;
        width: 76px;
    }
}
}
.corp__main .container__left{
	max-width: inherit;
}
@media(max-width: 767px){
    .corp__main .container__left{
    margin:auto;
    max-width:100%
}
}
.corp__main--flex {
    display: grid;
    grid-template-columns: 48.19% 1fr;
    gap: 1.2%;
    max-width: calc(1400px + (100% - 1400px) / 2);
}
@media(max-width: 767px){
    .corp__main--flex{
    display:flex;
    grid-template-columns:1fr;
    gap: 30px;
    align-items:center;
    flex-direction:column-reverse;
    padding:0 25px;
    position:relative
}
}

.corp__main--img img {
    height: 100%;
    object-fit: cover;
    clip-path: polygon(0 0, 100% 0, calc(100% - 250px) 100%, 0% 100%);
    opacity: 0;
}
@media(max-width: 767px){
	.corp__main--img{
	    margin-left:calc(50% - 50vw);
		height: 228px;
	}
	.corp__main--img img {
		clip-path: polygon(0 0, 100% 0, calc(100% - 100px) 100%, 0% 100%);
	}
}
.corp__main--ttl{
    font-size:8rem;
    letter-spacing:4.72px;
    text-align:center;
    line-height:1.2;
    color:#646464;
    margin-bottom:65px;
	font-weight: 500;
}
@media(max-width: 767px){
    .corp__main--ttl{
		font-size:4rem;
		letter-spacing:3px;
		margin: 0 0 25px;
	}
}
.corp__main--ttl small{
    font-size:2rem;
    display:block;
    font-weight:700
}
@media(max-width: 767px){
    .corp__main--ttl small{
    font-size:1.6rem
}
}
.corp__main--expl{
    color:#646464;
    font-size:1.6rem;
    line-height: 1.75;
	text-align: justify;
    opacity: 0;
}
 @media (min-width: 768px) and (max-width: 767px) {
.corp__main--expl {
    padding: 0 30px;
}
 }
@media(max-width: 767px){
    .corp__main--expl{
    font-size:1.4rem
}
}

.corp__detail {
    position: relative;
    margin: 0 auto;
}
.corp__detail > div {
    max-width: clamp(724px, 47.917vw, 920px);
    margin:auto;
}
@media(max-width: 767px){
    .corp__detail{
    padding:0 25px
}
    .corp__main--ttl {
        margin: 0 0 25px 0;
    }    
}

  .corp__detail svg {
    position: absolute;
    top: 135px;
    left: calc(25vw - 288px);
    width:156px;
    height:1282px;
    display:block;
    z-index:-1;
}

.corp__detail--box{
    background:rgba(100,100,100,.1);
    padding:100px;
    font-size:1.2rem;
    color:#646464;
    width:920px;
    opacity: 0;
}
@media(max-width: 767px){
    .corp__detail--box{
    width:100%;
    padding: 35px 28px 5px;
}
}
.corp__detail--box dl{
    display:grid;
    grid-template-columns:115px 1fr;
    row-gap:40px;
    margin-bottom:20px
}
@media(max-width: 767px){
    .corp__detail--box dl{
    grid-template-columns:1fr;
    row-gap: 6px;
    margin:auto;
    margin-bottom: 30px;
}
}
.corp__detail--box dl dt{
    text-align:justify;
    margin-bottom:-10px;
    font-size:1.6rem;
    /* white-space:nowrap */
}
@media(max-width: 767px){
    .corp__detail--box dl dt {
        margin: auto;
        font-weight: 700;
        font-size: 1.4rem;
        letter-spacing: 0.25em;
        white-space: nowrap;
    }
}
.corp__detail--box dl dt::after{
    content:"";
    display:inline-block;
    width:100%
}
.corp__detail--box dl dd{
    font-size:1.6rem
}
@media(max-width: 767px){
    .corp__detail--box dl dd{
    margin:auto;
    text-align:center;
	font-size: 1.5rem;
    letter-spacing: -1px;
}
}
.corp__detail--box dl ul li{
    list-style-type:none;
    font-size:1.6rem
}
@media(max-width: 767px){
	.corp__detail--box dl ul li {
		font-size: 1.5rem;
		line-height: 1.4;
		margin-bottom: 0.5em;
	}
}
.corp__philosophy{
    color:#fff;
    margin-bottom:0px;
	overflow: hidden;
}
.corp__philosophy--img img{
    opacity: 0;
}
@media(max-width: 767px){
    .corp__philosophy .container__left{
    margin:auto;
    max-width:100%
}
}
@media(max-width: 767px){
    .corp__philosophy--img {
        margin: 0 0 0 -50px;
    }
}
.corp__philosophy--ttl{
    background:url(../images/corp/phi@2x.png) no-repeat center center;
    background-size:cover;
    padding:78px 0;
    text-align:center;
    font-size:80px;
    line-height:1;
    letter-spacing:6px;
    margin:150px auto 100px;
    position:relative;
    z-index:3;
	font-weight: 500;
}
@media(max-width: 767px){
    .corp__philosophy--ttl {
        font-size: 4rem;
        letter-spacing: 3px;
        padding: 35px 0;
        margin: 62px auto 50px;
    }
}
.corp__philosophy--ttl small{
    display:block;
    font-size:2rem;
    margin-top:20px;
	font-weight: 600;
}
@media(max-width: 767px){
    .corp__philosophy--ttl small {
        font-size: 1.6rem;
        margin-top: 10px;
        font-weight: 700;
    }
}

.corp__philosophy .container__left {
	max-width: 100%;
}
.corp__philosophy--flex{
    display:grid;
    grid-template-columns: 1fr min(48.28%, 700px);
    align-items: start;
    max-width: calc(1400px + (100% - 1400px) / 2);
}
@media(max-width: 767px){
    .corp__philosophy--flex{
    display:flex;
    grid-template-columns:1fr;
    gap:0px;
    justify-content:space-between;
    align-items:center;
    position:relative;
    flex-direction:column-reverse;
    padding:0 25px
}
}
.corp__philosophy--desc{
    padding:60px;
    position:relative;
    z-index:2;
    display:flex;
    justify-content:flex-end;
    color:#646464
}
.corp__philosophy--desc--container{
    max-width:385px
}
.corp__philosophy--desc2{
    padding: clamp(33.6px, 2.8vw, 42px) clamp(80px, 6.67vw, 100px) 0;
    z-index:2;
    color:#646464
}
@media(max-width: 767px){
    .corp__philosophy--desc2{
    padding: 0px 0px 50px
}
}
/* 
.corp__philosophy--desc2::before{
    content:"";
    background:url(../images/corp/bg3.svg) no-repeat center center;
    background-size:contain;
    position:absolute;
    top:-101px;
    right:calc((100% - 1630px) / 2);
    width:348px;
    height:618px;
    display:block;
    z-index:-1
} */

.corp__philosophy--desc2 svg{
    position:absolute;
    top:-101px;
    right:calc((100% - 1630px) / 2);
    width:348px;
    height:618px;
    display:block;
    z-index:-1;
    pointer-events: none;
    /* opacity: 0; */
}
@media(max-width: 1630px){
	/* .corp__philosophy--desc2::before{
		right:0;
	} */
     	.corp__philosophy--desc2 svg{
		right:0;
	}
}
@media(max-width: 767px){
    /* .corp__philosophy--desc2::before{
    content:"";
    background:url(../images/corp/bg3.svg) no-repeat center center;
    background-size:contain;
    position:absolute;
    top: -50px;
    right:-25px;
    width:225px;
    height:auto;
    display:block;
    z-index:-1;
    aspect-ratio:431/764
} */
    .corp__philosophy--desc2 svg{
    position:absolute;
    top: -50px;
    right:-25px;
    width:225px;
    height:auto;
    display:block;
    z-index:-1;
    aspect-ratio:431/764;
    pointer-events: none;
}
}
.corp__philosophy--logo {
    max-width: 1000px;
    margin: auto;
    margin-top: 150px;
    opacity: 0;
    transform: scale(1) rotateX(0); 
}
.corp__philosophy .corp__philosophy--logo svg{
    overflow: visible; 
}
.corp__philosophy .corp__philosophy--logo svg g#logo{
    opacity: 0;
}
.corp__philosophy .corp__philosophy--logo{
    opacity: 0;
}
.corp__philosophy.in-view .corp__philosophy--logo {
    opacity: 1;
    animation: flip-scale-up-hor 0.8s ease-out forwards;
    animation-delay: 0.8s; 
}
@keyframes flip-scale-up-hor {
  0% {
    transform: scale(1) rotateX(0);
  }
  50% {
    transform: scale(2.5) rotateX(-90deg);
  }
  100% {
    transform: scale(1) rotateX(0);
  }
}


@media(max-width: 767px){
    .corp__philosophy--logo{
    margin-top:100px;
    padding:0 25px
}
}
/* .corp__philosophy--comment{
    max-width:720px;
    color:#646464;
    font-size:1.6rem;
    line-height:1.75;
    margin:auto;
    padding:192px 128px 90px;
    background:url(../images/corp/bg4.svg) no-repeat center bottom;
    background-size:contain;
    opacity: 0;
} */
 .corp__philosophy--comment{
    max-width:720px;
    color:#646464;
    font-size:1.6rem;
    line-height:1.75;
    margin:auto;
    padding:192px 128px 90px;
    position: relative;
}
.corp__philosophy--comment div{
    opacity: 0;
}
.corp__philosophy--comment svg{
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
      z-index: -1;
  pointer-events: none;
  position: absolute;
}
@media(max-width: 767px){
    .corp__philosophy--comment{
    padding: 93px 50px 50px;
    font-size:1.4rem;
    margin:0 -25px;
	text-align: justify;
}
.corp__philosophy--comment svg {
    height: auto;
    bottom: 0;
        top: unset;
}
}
.corp__philosophy--comment2{
    font-size:1.6rem;
    line-height:2;
    opacity: 0;
}
@media(max-width: 767px){
    .corp__philosophy--comment2 {
        font-size: 1.4rem;
        line-height: 1.75;
		margin-bottom: 0;
        text-align: justify;
    }
}