/*************************************
MIXINS
*************************************/
.scpop {
  transform: scale3d(0, 0, 0);
  transform-origin: center center;
  will-change: animation;
}

.scpop.ac {
  animation: bounce 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/*------------------------------------
animation
	*/
@keyframes hueRotate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(359deg);
  }
}
@keyframes photoCoverAnim {
  0% {
    filter: grayscale(95%);
  }
  100% {
    filter: grayscale(0%);
  }
}
@keyframes bounce {
  0% {
    transform: scale3d(0, 0, 0);
  }
  40% {
    transform: scale3d(1.2, 1.2, 1.2);
  }
  60% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  80% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
/*------------------------
SIZE
-------------------------*/
.mainContainer .mainVisualWrap {
  height: calc(100vh - 137px);
  position: relative;
}
@media screen and ( max-width : 1024px ) {
  .mainContainer .mainVisualWrap {
    height: calc(80vh - 137px);
  }
}
@media screen and ( max-width : 1024px ) {
  .mainContainer .mainVisualWrap {
    height: calc(100vh - 101px);
  }
}
.mainContainer .mainVisualWrap .detail {
  position: absolute;
  right: 60px;
  top: 60px;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  margin-left: auto;
  margin-right: auto;
  font-family: "Noto Serif JP", serif;
}
@media screen and ( max-width : 1024px ) {
  .mainContainer .mainVisualWrap .detail {
    right: 40px;
    top: 40px;
  }
}
@media screen and ( max-width : 768px ) {
  .mainContainer .mainVisualWrap .detail {
    right: 30px;
    top: 30px;
  }
}
.mainContainer .mainVisualWrap .detail h1, .mainContainer .mainVisualWrap .detail h2 {
  font-size: 36px;
  font-weight: 700;
  text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.9), 0px 0px 2px rgba(255, 255, 255, 0.9), 0px 0px 2px rgba(255, 255, 255, 0.9), 0px 0px 2px rgba(255, 255, 255, 0.9), 0px 0px 2px rgba(255, 255, 255, 0.9), 0px 0px 2px rgba(255, 255, 255, 0.9);
}
@media screen and ( max-width : 1024px ) {
  .mainContainer .mainVisualWrap .detail h1, .mainContainer .mainVisualWrap .detail h2 {
    font-size: 28px;
  }
}
@media screen and ( max-width : 768px ) {
  .mainContainer .mainVisualWrap .detail h1, .mainContainer .mainVisualWrap .detail h2 {
    font-size: 24px;
  }
}
.mainContainer .mainVisualWrap .detail p {
  font-weight: 700;
  padding: 40px 40px 0 0;
  line-height: 2;
  font-size: 18px;
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.9), 0px 0px 2px rgba(255, 255, 255, 0.9), 0px 0px 2px rgba(255, 255, 255, 0.9), 0px 0px 2px rgba(255, 255, 255, 0.9), 0px 0px 2px rgba(255, 255, 255, 0.9), 0px 0px 2px rgba(255, 255, 255, 0.9);
}
@media screen and ( max-width : 1024px ) {
  .mainContainer .mainVisualWrap .detail p {
    padding: 20px 20px 0 0;
    font-size: 16px;
  }
}
@media screen and ( max-width : 768px ) {
  .mainContainer .mainVisualWrap .detail p {
    padding: 15px 15px 0 0;
  }
}
.mainContainer .mainVisualWrap.pat1 {
  background: url(../images/list/bg1.jpg) no-repeat;
  background-size: cover;
}
@media screen and ( max-width : 768px ) {
  .mainContainer .mainVisualWrap.pat1 {
    background: url(../images/list/bg1_sp.jpg) no-repeat;
    background-size: cover;
  }
}
.mainContainer .mainVisualWrap.pat2 {
  background: url(../images/list/bg2.jpg) no-repeat;
  background-size: cover;
}
@media screen and ( max-width : 768px ) {
  .mainContainer .mainVisualWrap.pat2 {
    background: url(../images/list/bg2_sp.jpg) no-repeat;
    background-size: cover;
  }
}
.mainContainer .mainVisualWrap.pat3 {
  background: url(../images/list/bg3.jpg) no-repeat;
  background-size: cover;
}
@media screen and ( max-width : 768px ) {
  .mainContainer .mainVisualWrap.pat3 {
    background: url(../images/list/bg3_sp.jpg) no-repeat;
    background-size: cover;
  }
}
.mainContainer .mainVisualWrap.pat4 {
  background: url(../images/list/bg4.jpg) no-repeat;
  background-size: cover;
}
@media screen and ( max-width : 768px ) {
  .mainContainer .mainVisualWrap.pat4 {
    background: url(../images/list/bg4_sp.jpg) no-repeat;
    background-size: cover;
  }
}

@media screen and ( max-width : 768px ) {
  header h1, header .logo, .gnavAb h1, .gnavAb .logo {
    width: 250px;
  }
}

.underContent .transactionlawWrap .aboutBox .child .imageTitle {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 30px;
}