@charset "UTF-8";

/*
// subpage_common.css
*/

/* ========== layout ========== */
body{
  position:relative;
}

.common__pages{
  padding: 9rem 0 0;
}


/* ========== KV ========== */

.common__pages__kv{
  margin: 0 0 18.5rem;
  position: relative;
}
.common__pages__kv .common__inner{
  padding-bottom: 40.9rem; /* kv__imageの高さ分を確保　kv__imageがposition absoluteの為 */
  position: relative;
}
.common__pages__obj_wrap{
  height: 180rem;
  left:36.5rem;
  overflow:hidden;
  position: absolute;
  top:0rem;
  width: 180rem;
  z-index: -1;
}
.common__pages__obj{ /* kv右上の斜めオブジェクト */
  background: #42a0d9;
  left: 0rem;
  height: 0rem;
  position: absolute;
  top: 0rem;
  transform: rotate(-48deg);
  transform-origin: left top;
  /*transition: .2s;
  transition-delay: 0s;*/
  width: 82.8rem;
}
.common__pages__obj.active{
  animation: .7s linear forwards kv_obj;
  /*background: #e4ecef;
  height: 166rem;*/
}
@keyframes kv_obj {
  0% {
    background: #42a0d9;
    height: 0rem;
  }
  25% {
    background: #42a0d9;
    height: 166rem;
  }
  75% {
    background: #42a0d9;
    height: 166rem;
  }
  100% {
    background: #e4ecef;
    height: 166rem;
  }
}
.common__pages__kv__title{
  padding: 8.6rem 0 3.5rem 6rem;
}
.common__pages__kv__title__en{
  display: block;
  font-family: "Roboto", sans-serif;
  font-style: italic;
  font-size:11.2892rem;
  font-weight: 300;
  line-height: 0.85;
}
.common__pages__kv__title__en .common__text--bold{
  font-weight: 500;
}
.common__pages__kv__title__ja{
  display: block;
  font-size:2rem;
  margin: 0 0 0 1.2rem;
}
.common__pages__kv__text{
  font-size:2.6rem;
  line-height: 1.4;
  margin: 0 0 6rem 7.5rem;
}
.common__pages__kv__text__description{
  display: block;
  font-size:2rem;
  margin: 2rem 0 0;
}
.common__pages__kv__image_wrap{
  bottom: 0;
  height: 40.9rem;
  overflow: hidden;
  position: absolute;
  right: 7rem;
  width: 142.8rem;
}
.common__pages__kv__image{
  clip-path: inset(0 100% 0 0);
  transition: clip-path .2s ease .5s;
  transition-duration: .1s;
}
.common__pages__kv__image_wrap.active .common__pages__kv__image {
  clip-path: inset(0 0 0 0);
}
.common__pages__section-title{ /* h2 横ぶち抜きラインのタイトル */
  font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif;
  font-size:3.6rem;
  font-style: normal;
  font-weight: normal;
  margin: 0 auto 7.5rem;
  padding: 0 0.5em;
  position: relative;
  width: fit-content;
}
.common__pages__section-title:before,
.common__pages__section-title:after{
  background: #000;
  content:'';
  height: 1px;
  line-height: 1;
  position: absolute;
  top:0.55em;
  width:60vw;
  z-index: -1;
}

.common__pages__section-title:before{
  left:100%; 
}

.common__pages__section-title:after{
  right:100%; 
}

.common__pages__section-title--en{
  font-family: "Roboto", sans-serif;
  font-style: italic;
  font-size:5.6rem;
  font-weight: 300;
  line-height: 0.85;
  padding: 0 0.25em;
}

.common__pages__section-title--en:before,
.common__pages__section-title--en:after{
  top:0.5em;
}


/* ========== 下層ページフッター ========== */

.subpage-footer{
  position: relative;
}
.subpage-footer__obj_wrap{
  height: 0;
  margin: auto;
  position: relative;
  top:0;
  width: 108rem;
  z-index: -1;
}
.subpage-footer__obj{ /* フッター左上の斜めオブジェクト */
  background: #e4ecef;
  bottom:0;
  height: 180rem;
  opacity: 0.5;
  position: absolute;
  left: -154.5rem;
  transform: rotate(-48deg);
  transform-origin: right bottom;
  width: 180rem;
}
.subpage-footer__inner{
  animation: ChangeGradientBg 10s ease infinite;
  background: radial-gradient(#a8d8d8,#42a0d9);
  background-size: 100% 200%;
  width: 100%;
}

@keyframes ChangeGradientBg {
	0% {
    background-size: 100% 100%;
		background-position: -100% -100%;
	}
  25% {
    background-size: 100% 200%;
		background-position: -100% 100%;
	}
	50% {
    background-size: 200% 200%;
		background-position: 100% 100%;
	}
	100% {
    background-size: 100% 100%;
		background-position: -100% -100%;
	}
}
.subpage-footer .common__inner{
  align-items: center;
  display: flex;
  padding: 6rem 0 6rem 7.5rem;
  position: relative;
}
.subpage-footer__company{
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0 4.5rem 0 0;
  padding: 0 5rem 0 0;
  position: relative;
}
.subpage-footer__company:after{
  background: #1a1a1a;
  content:'';
  height: 18.4rem;
  position: absolute;
  right:0;
  top:0;
  width: 1px;
}
.subpage-footer__company > span{
  font-family: "Roboto", sans-serif;
  font-style: italic;
  font-size:5.74347rem;
  font-weight: 300;
}
.subpage-footer__company > span .common__text--bold{
  font-weight: 700;
}
.subpage-footer__message{
  align-items: center;
  display: flex;
  line-height: 1.8;
  height: 18.4rem;
  margin: 0 3.5rem 0 0;
  padding: 0 3.5rem 0 0;
  position: relative;
}
.subpage-footer__message:after{
  background: #1a1a1a;
  content:'';
  height: 18.4rem;
  position: absolute;
  right:0;
  top:0;
  width: 1px;
}
.subpage-footer__link{
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: 2.62919rem;
  height: 18.4rem;
  justify-content: center;
}
.subpage-footer__link span{
  line-height: 1.4;
  margin: 0 0 1.5rem;
}
.subpage-footer__link__arrow{
  align-items: center;
  background: url("../img/common/subpage-footer__link__arrow_black.svg") no-repeat center/3.8rem auto;
  border:1px solid #1a1a1a;
  border-radius: 50%;
  display: flex;
  height: 6.2rem;
  transition: .2s;
  overflow: hidden;
  width: 6.2rem;
}
.subpage-footer__link__arrow:hover{
  background: url("../img/common/subpage-footer__link__arrow_white.svg") #1a1a1a no-repeat center/3.8rem auto;
  background-position: center right 0.5rem;
  box-shadow: 0 0 1rem rgba(255,255,255,0.6);
}



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

   /* ========== layout ========== */

  .common__pages{
    padding: 9rem 0 0;
  }
  
  /* ========== KV ========== */
  
  .common__pages__kv{
    margin: 0 0 18rem;
    position: relative;
  }
  .common__pages__kv .common__inner{
    padding-bottom: 0; /* kv__imageがposition staticのためPC時の高さ分は解放 */
    position: relative;
  }
  .common__pages__obj_wrap{
    height: 53rem;
    left:16rem;
    overflow:hidden;
    position: absolute;
    top:0rem;
    width: 59rem;
    z-index: -1;
  }
  .common__pages__obj{ /* kv右上の斜めオブジェクト */
    background: #e4ecef;
    left: 0rem;
    height: 166rem;
    position: absolute;
    top: 0rem;
    transform: rotate(-48deg);
    transform-origin: left top;
    width: 82.8rem;
  }
  .common__pages__kv__title{
    padding: 8.6rem 0 3.5rem 6.8rem;
  }
  .common__pages__kv__title__en{
    font-size:11.8rem;
  }
  .common__pages__kv__title__ja{
    display: block;
    font-size:2.2rem;
    margin: 0 0 0 1.2rem;
  }
  .common__pages__kv__text{
    font-size:2.8rem;
    line-height: 1.4;
    margin: 0 0 7rem 7.5rem;
  }
  .common__pages__kv__text__description{
    font-size:2.2rem;
  }
  .common__pages__kv__image_wrap{
    height: 44.7rem;
    position: static;
    width: 71.3rem;
  }
  .common__pages__kv__image{
    transition: clip-path .2s ease .5s;
  }
  .common__pages__section-title{ /* h2 横ぶち抜きラインのタイトル */
    font-size:3.6rem;
    margin: 0 auto 5.5rem;
  }
  .common__pages__section-title--en{
    font-size:5.6rem;
    padding: 0 0.4em;
  }


  /* ========== 下層ページフッター ========== */

  .subpage-footer__obj_wrap{
    width: 100%;
  }
  .subpage-footer__obj{ /* フッター左上の斜めオブジェクト */
    height: 122rem;
    left: -9.5rem;
    width: 59rem;
  }
  .subpage-footer .common__inner{
    display: block;
    padding: 4.5rem 0 4.5rem 5rem;
    position: relative;
  }
  .subpage-footer__company{
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 0 0 2rem;
    padding: 0 0 2.5rem;
    position: relative;
  }
  .subpage-footer__company:after{
    bottom:0rem;
    height: 0.2rem;
    left:0;
    right:auto;
    top:auto;
    width: 65rem;
  }
  .subpage-footer__company > span{
    font-size:9.04358rem;
  }
  .subpage-footer__message{
    display: blcok;
    font-size: 2.8rem;
    line-height: 1.7;
    height: auto;
    margin: 0 0 3.5rem;
    padding: 0 0 2rem;
    position: relative;
  }
  .subpage-footer__message:after{
    bottom:0rem;
    height: 0.2rem;
    left:0;
    right:auto;
    top:auto;
    width: 65rem;
  }
  .subpage-footer__link{
    align-items: center;
    display: flex;
    flex-direction: row;
    font-size: 3.60251rem;
    height: auto;
    justify-content: flex-start;
  }
  .subpage-footer__link span{
    line-height: 1.5;
    margin: 0 1rem 0 0;
  }
  .subpage-footer__link__arrow{
    background: url("../img/common/subpage-footer__link__arrow_black.svg") no-repeat center/4rem auto;
    border:0.2rem solid #1a1a1a;
    height: 6.5rem;
    width: 6.5rem;
  }
  .subpage-footer__link__arrow:hover{
    background: url("../img/common/subpage-footer__link__arrow_white.svg") #1a1a1a no-repeat center/4rem auto;
  }
}