#area-Contents {
padding-top: 78px;
}
@media only screen and (max-width: 1024px) {
#area-Contents {
padding-top: 58px;
}
}
@media only screen and (max-width: 640px) {
#area-Contents {
padding-top: 58px;
}
}

/*header*/
#kps_header .brand_menu01 a {
color: #0F8482 !important;
text-decoration: underline !important;
}
@media only screen and (max-width: 1024px) {
#kps_header .brand_menu01 a {
text-decoration: none!important;
}
}

/*keyvisual*/
#keyvisual {
width: 100%;
margin: 0;
padding: 0;
position: relative;
z-index: 1;
}
#keyvisual .keyvisual_wrap {
width: 88%;
margin: 0.0% auto 0;
padding-top: 42%;
overflow: hidden;
position: relative;
}
#keyvisual .catch_wrap {
width: 100%;
margin: 0 auto;
padding-top: 0;
position: absolute;
top: 13%;
left: 0;
z-index: 10;
}
#keyvisual .catch_wrap p {
position: absolute;
font-size: 3.1vw;
font-family: 'CezanneProN-DB', sans-serif;
letter-spacing: 0.05em;
text-align: center;
font-feature-settings: 'palt' on;
color: #0F8482;
top: 50%;
left: 50%;
transform: translate(-50%,0);
width: 20em;
margin: 0 auto;
}
#keyvisual .catch_wrap p span {
display: inline-block;
filter: blur(10px) opacity(0);
transform: translate(0,0%) scale(1.8) translateZ(0);
transition: filter 1.0s , transform 2s;
transition-delay: 0.15s;
text-shadow: 2px 2px 0 #FFF, -2px -2px 0 #FFF, -2px 2px 0 #FFF, 2px -2px 0 #FFF, 0px 2px 0 #FFF, 0 -2px 0 #FFF, -2px 0 0 #FFF, 2px 0 0 #FFF;
}
#keyvisual .catch_wrap p.active span {
transform: translate(0,0) scale(1);
filter: none;
}
#keyvisual .catch_wrap p.end span {
filter: blur(0) opacity(1);
transform: translate(0,0) scale(1.0);
transition-delay: 0.15s;
}
#keyvisual .catch_wrap p.end {
filter: blur(0) opacity(1);
transform: translate(-50%,318%) scale(1);
transition: filter 1.0s , transform 1.2s;
transition-delay: 1.5s;
transition-timing-function: 0.165, 0.84, 0.44, 1.0;
}
#keyvisual .catch_wrap p.active span:nth-of-type(1) {
transition-duration: 0.15s;
}
#keyvisual .catch_wrap p.active span:nth-of-type(2) {
transition-duration: 0.3s;
}
#keyvisual .catch_wrap p.active span:nth-of-type(3) {
transition-duration: 0.45s;
}
#keyvisual .catch_wrap p.active span:nth-of-type(4) {
transition-duration: 0.6s;
}
#keyvisual .catch_wrap p.active span:nth-of-type(5) {
transition-duration: 0.75s;
}
#keyvisual .catch_wrap p.active span:nth-of-type(6) {
transition-duration: 0.9s;
}
#keyvisual .catch_wrap p.active span:nth-of-type(7) {
transition-duration: 1.05s;
}
#keyvisual .catch_wrap p.active span:nth-of-type(8) {
transition-duration: 1.2s;
}
#keyvisual .catch_wrap p.active span:nth-of-type(9) {
transition-duration: 1.35s;
}
#keyvisual .catch_wrap p.active span:nth-of-type(10) {
transition-duration: 1.5s;
}
#keyvisual .catch_wrap p.active span:nth-of-type(11) {
transition-duration: 1.65s;
}
#keyvisual .catch_wrap p.active span:nth-of-type(12) {
transition-duration: 1.8s;
}
#keyvisual .catch_wrap p.active span:nth-of-type(13) {
transition-duration: 1.95s;
}
#keyvisual .catch_wrap p.active span:nth-of-type(14) {
transition-duration: 2.1s;
}
#keyvisual .catch_wrap p.active span:nth-of-type(15) {
transition-duration: 2.25s;
}
#keyvisual .catch_wrap p.active span:nth-of-type(16) {
transition-duration: 2.4s;
}
#keyvisual .catch_wrap p.active span:nth-of-type(17) {
transition-duration: 2.55s;
}
#keyvisual img {
width: 100%;
height: auto;
}
#keyvisual .keyvisual_img_wrap {
width: 100%;
margin: 0 auto;
padding-top: 45.07%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
#keyvisual .keyvisual_img_wrap .kv_img01 ,
#keyvisual .keyvisual_img_wrap .kv_img02 ,
#keyvisual .keyvisual_img_wrap .kv_img03 ,
#keyvisual .keyvisual_img_wrap .kv_img04 {
filter: blur(20px) opacity(0);
transform: translate(0,10%) scale(1) translateZ(0);
transition: filter 1.0s , transform 1.0s;
position: absolute;
width: 100%;
z-index: 1;
top: 0;
left: 0;
}
#keyvisual .keyvisual_img_wrap .kv_img01 {
transition-delay: 0.15s;
}
#keyvisual .keyvisual_img_wrap .kv_img02 {
transition-delay: 0.45s;
}
#keyvisual .keyvisual_img_wrap .kv_img03 {
transition-delay: 0.6s;
}
#keyvisual .keyvisual_img_wrap .kv_img04 {
transition-delay: 0.3s;
}
#keyvisual .keyvisual_img_wrap .kv_img05 {
filter: blur(20px) opacity(0);
transform: translate(0,5%) scale(1) translateZ(0);
transition: filter 1.5s , transform 1.5s;
transition-delay: 0.9s;
position: absolute;
width: 100%;
z-index: 5;
top: 0;
left: 0;
}
#keyvisual .keyvisual_img_wrap.active .kv_img01 ,
#keyvisual .keyvisual_img_wrap.active .kv_img02 ,
#keyvisual .keyvisual_img_wrap.active .kv_img03 ,
#keyvisual .keyvisual_img_wrap.active .kv_img04 ,
#keyvisual .keyvisual_img_wrap.active .kv_img05 {
transform: translate(0,0) scale(1);
filter: none;
}
#keyvisual .arch_wrap {
background: url("/content/dam/sites/kao/pro-kao-com/jp/ja/professional/kv/kv_arch.svg") top center no-repeat;
background-size: 100% auto;
position: relative;
z-index: 5;
margin-top: -11%;
filter: opacity(1);
transform: translate(0,80%) scale(1) translateZ(0);
transition: filter 1.0s , transform 1.0s;
transition-delay: 0.5s;
}
#keyvisual .arch_wrap.active {
transform: translate(0,0) scale(1);
filter: none;
}
#keyvisual .arch_wrap .txt_wrap {
padding: 6% 0 2.5%;
}
#keyvisual .arch_wrap p.catch_jp {
font-size: 3.51vw;
line-height: 1;
font-family: 'NotoSansCJKjp-Medium', sans-serif;
letter-spacing: 0.05em;
text-align: center;
font-feature-settings: 'palt' on;
color: #0F8482;
margin: 0 auto;
filter: opacity(0);
transform: translate(0,5%) scale(1) translateZ(0);
transition: filter 1.0s , transform 1.0s;
transition-delay: 1.5s;
}
#keyvisual .arch_wrap p.catch_en {
width: 38%;
margin: 2.0% auto 0;
filter: opacity(0);
transform: translate(0,5%) scale(1) translateZ(0);
transition: filter 1.0s , transform 1.0s;
transition-delay: 1.5s;
}
#keyvisual .arch_wrap p.catch_jp.active ,
#keyvisual .arch_wrap p.catch_en.active {
transform: translate(0,0) scale(1);
filter: none;
}
#keyvisual .scroll_wrap {
position: absolute;
width: 4em;
height: 110px;
left: calc(50% - 2em);
bottom: -100px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
z-index: 10;
filter: opacity(0);
transform: translate(0,5%) scale(1) translateZ(0);
transition: filter 1.0s , transform 1.0s;
transition-delay: 1.5s;
}
#keyvisual .scroll_wrap.active {
transform: translate(0,0) scale(1);
filter: none;
}
#keyvisual .scroll_wrap .scroll_border {
width: 1px;
height: 80px;
background-color: #707070;
animation:sdl 3s cubic-bezier(1, 0, 0, 1) infinite;
}
#keyvisual .scroll_wrap .scroll_border.stop {
animation-play-state: paused;
}
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
#keyvisual .scroll_wrap p {
width: 100%;
font-family: 'Helvetica-Thai-Light', sans-serif;
text-align: center;
font-size: 10px;
color: #232323;
}
@media only screen and (max-width: 640px) {
#keyvisual .keyvisual_wrap {
width: 100%;
margin: 0 auto;
padding-top: 128%;
}
#keyvisual .catch_wrap {
width: 100%;
margin: 0 auto;
padding-top: 0;
position: absolute;
top: 15%;
left: 0;
z-index: 10;
}
#keyvisual .catch_wrap p {
font-size: 8vw;
line-height: 1.33;
letter-spacing: 0.05em;
width: 12em;
}
#keyvisual .catch_wrap p span {
display: inline-block;
filter: blur(10px) opacity(0);
transform: translate(0,0%) scale(1.8) translateZ(0);
transition: filter 1.0s , transform 2s;
transition-delay: 0.15s;
text-shadow: 2px 2px 0 #FFF, -2px -2px 0 #FFF, -2px 2px 0 #FFF, 2px -2px 0 #FFF, 0px 2px 0 #FFF, 0 -2px 0 #FFF, -2px 0 0 #FFF, 2px 0 0 #FFF;
}
#keyvisual .catch_wrap p.active span {
transform: translate(0,0) scale(1);
filter: none;
}
#keyvisual .catch_wrap p.end span {
filter: blur(0) opacity(1);
transform: translate(0,0) scale(1.0);
transition-delay: 0.15s;
}
#keyvisual .catch_wrap p.end {
filter: blur(0) opacity(1);
transform: translate(-50%,318%) scale(1);
transition: filter 1.0s , transform 1.2s;
transition-delay: 1.5s;
transition-timing-function: 0.165, 0.84, 0.44, 1.0;
}
#keyvisual .keyvisual_img_wrap {
width: 100%;
margin: 0 auto;
padding-top: 94%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
#keyvisual .arch_wrap {
background: url("/content/dam/sites/kao/pro-kao-com/jp/ja/professional/kv/kv_arch_sp.svg") top center no-repeat;
background-size: 100% auto;
position: relative;
z-index: 5;
margin-top: -41.5%;
filter: opacity(1);
transform: translate(0,80%) scale(1) translateZ(0);
transition: filter 1.0s , transform 1.0s;
transition-delay: 0.5s;
}
#keyvisual .arch_wrap.active {
transform: translate(0,0) scale(1);
filter: none;
}
#keyvisual .arch_wrap .txt_wrap {
padding: 28% 0 2.5%;
}
#keyvisual .arch_wrap p.catch_en {
width: 70%;
margin: 1.0% auto 0;
}
#keyvisual .scroll_wrap {
position: absolute;
width: 4em;
height: 60px;
left: calc(50% - 2em);
bottom: -70px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
z-index: 10;
filter: opacity(0);
transform: translate(0,5%) scale(1) translateZ(0);
transition: filter 1.0s , transform 1.0s;
transition-delay: 1.5s;
}
#keyvisual .scroll_wrap.active {
transform: translate(0,0) scale(1);
filter: none;
}
#keyvisual .scroll_wrap .scroll_border {
width: 1px;
height: 40px;
background-color: #707070;
animation:sdl 3s cubic-bezier(1, 0, 0, 1) infinite;
}
#keyvisual .scroll_wrap .scroll_border.stop {
animation-play-state: paused;
}
#keyvisual .scroll_wrap p {
width: 100%;
font-family: 'Helvetica-Thai-Light', sans-serif;
text-align: center;
font-size: 10px;
color: #232323;
}
}

/*intro*/
#intro {
width: 100%;
margin: 0;
padding: 0;
position: relative;
z-index: 2;
}
#intro::before {
content: "";
display: block;
width: 100%;
height: 13.9%;
background: url("/content/dam/sites/kao/pro-kao-com/jp/ja/professional/top/top_arch.svg") bottom center no-repeat;
background-size: 100% auto;
position: absolute;
bottom: 0;
left: 0;
padding-bottom: 14%;
}
#intro img {
width: 100%;
height: auto;
}
#intro .intro_wrap {
width: 76%;
display: flex;
flex-wrap: nowrap;
justify-content: center;
margin: 0 auto;
padding: 80px 0 80px;
position: relative;
}
#intro .intro_txt_wrap {
width: 29em;
font-size: 22px;
color: #232323;
}
#intro .intro_txt_wrap p {
font-family: 'CezanneProN-M', sans-serif;
line-height: 1;
margin: 0 0 38px;
text-align: center;
filter: opacity(0);
transform: translate(0,38px) scale(1) translateZ(0);
transition: filter 0.8s , transform 0.8s;
transition-timing-function: 0.165, 0.84, 0.44, 1.0;
}
#intro .intro_txt_wrap p:nth-of-type(1) {
transition-delay: 0.0s;
}
#intro .intro_txt_wrap p:nth-of-type(2) {
transition-delay: 0.25s;
}
#intro .intro_txt_wrap p:nth-of-type(3) {
transition-delay: 0.5s;
margin-bottom: 72px;
}
#intro .intro_txt_wrap p:nth-of-type(4) {
transition-delay: 1.25s;
}
#intro .intro_txt_wrap p:nth-of-type(5) {
transition-delay: 1.5s;
}
#intro .intro_txt_wrap p:nth-of-type(6) {
transition-delay: 1.75s;
}
#intro .intro_txt_wrap p span {
font-family: 'CezanneProN-M', sans-serif;
color: #0F8482;
}
#intro .intro_txt_wrap.active p {
transform: translate(0,0) scale(1);
filter: none;
}
#intro .intro_txt_wrap ul {
width: 100%;
max-width: 650px;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
margin: 80px auto 80px;
padding: 0;
filter: opacity(0);
transform: translate(0,38px) scale(1) translateZ(0);
transition: filter 0.8s , transform 0.8s;
transition-timing-function: 0.165, 0.84, 0.44, 1.0;
transition-delay: 2.0s;
}
#intro .intro_txt_wrap.active ul {
transform: translate(0,0) scale(1);
filter: none;
}
#intro .intro_txt_wrap ul li {
width: 48%;
position: relative;
}
#intro .intro_txt_wrap ul li a {
font-size: 14px;
color: #0F8482;
text-decoration: none;
text-align: center;
line-height: 1;
padding: 18px;
display: block;
border: 1px solid #0F8482;
border-radius: 999px;
background: url("/content/dam/sites/kao/pro-kao-com/jp/ja/professional/common/ico_right_arrow.svg") right 15px center no-repeat;
background-size: 8px auto;

}
#intro .intro_txt_wrap ul li a:hover {
opacity: 0.7;
}
#scroll {
width: 100%;
padding-bottom: 24% !important;
}
#scroll .scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
#scroll .scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
#scroll .scroll-infinity__list--left {
  animation: infinity-scroll-left 30s infinite linear 0.0s both;
}
#scroll .scroll-infinity__item {
  width: calc(100vw / 5.5);
  margin: 0 20px;
}
#scroll .scroll-infinity__item>img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}
@media only screen and (max-width: 1366px) {
#scroll .scroll-infinity__item {
  width: calc(100vw / 4.5);
  margin: 0 20px;
}
#scroll .scroll-infinity__item>img {
  width: 100%;
  height: auto;
  border-radius: 15px;
}
}
@media only screen and (max-width: 640px) {
#scroll .scroll-infinity__list--left {
  animation: infinity-scroll-left 24s infinite linear 0.0s both;
}
#scroll .scroll-infinity__item {
  width: calc(100vw / 2.5);
  margin: 0 10px;
}
#scroll .scroll-infinity__item>img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}
}


@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
@media only screen and (max-width: 1024px) {
#intro .intro_wrap {
width: 80%;
padding: 160px 0 80px;
}
#intro .intro_txt_wrap {
width: 29em;
font-size: 20px;
}
}
@media only screen and (max-width: 640px) {
#intro .intro_wrap {
width: 90%;
display: flex;
flex-wrap: nowrap;
justify-content: center;
margin: 0 auto;
padding: 80px 0 0;
position: relative;
}
#intro .intro_txt_wrap {
width: 100%;
font-size: 18px;
}
#intro .intro_txt_wrap p {
font-family: 'CezanneProN-M', sans-serif;
line-height: 2;
margin: 0 0 0;
text-align: left;
}
#intro .intro_txt_wrap p:nth-of-type(1) {
transition-delay: 0.0s;
}
#intro .intro_txt_wrap p:nth-of-type(2) {
transition-delay: 0.25s;
}
#intro .intro_txt_wrap p:nth-of-type(3) {
transition-delay: 0.5s;
margin-bottom: 36px;
}
#intro .intro_txt_wrap p:nth-of-type(4) {
transition-delay: 1.25s;
}
#intro .intro_txt_wrap p:nth-of-type(5) {
transition-delay: 1.5s;
}
#intro .intro_txt_wrap p:nth-of-type(6) {
transition-delay: 1.75s;
}
#intro .intro_txt_wrap ul {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 50px auto;
padding: 0;
filter: opacity(0);
transform: translate(0,38px) scale(1) translateZ(0);
transition: filter 0.8s , transform 0.8s;
transition-timing-function: 0.165, 0.84, 0.44, 1.0;
transition-delay: 2.0s;
}
#intro .intro_txt_wrap.active ul {
transform: translate(0,0) scale(1);
filter: none;
}
#intro .intro_txt_wrap ul li {
width: 100%;
position: relative;
border-radius: 999px;
}
#intro .intro_txt_wrap ul li:nth-child(1) {
margin-bottom: 15px;
}
#intro .intro_txt_wrap ul li a {
font-size: 14px;
color: #0F8482;
text-decoration: none;
text-align: center;
line-height: 1;
padding: 18px;
display: block;
}
}


/*business detail*/
.business_detail_wrap {
background-color: #EDF8F6;
position: relative;
z-index: 1;
overflow: visible;
}
.sub_ttl_en {font-size: 12px;font-family: 'AvenirLTPro-Roman', sans-serif;color: #00AC8F;}
.sub_ttl_jp {font-size: 46px;font-fmily: 'CezanneProN-M', sans-serif;color: #0f8482;}
@media only screen and (max-width: 1024px) {
.sub_ttl_jp {font-size: 36px;}
}
@media only screen and (max-width: 640px) {
.sub_ttl_jp {font-size: 28px;}
}

/*business policy*/
.business_policy {
padding-bottom: 160px;
}
.business_policy_wrap {
background-color: #FFF;
border-radius: 20px;
}
.business_policy_wrap .g-ImageTextHP--v2__contentsBlock__text {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
padding-left: 12%;
}
.business_policy_wrap .g-ImageTextHP--v2__contentsBlock__image {
padding: 0 !important;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
overflow: hidden;
}
@media only screen and (max-width: 1024px) {
.business_policy_wrap .g-ImageTextHP--v2__contentsBlock__text {
padding-left: 10%;
padding-right: 5%;
}
}
@media only screen and (max-width: 640px) {
.business_policy_wrap .g-ImageTextHP--v2__contentsBlock__text {
width: auto !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
padding: 40px 20px 30px !important;
}
.business_policy_wrap .g-ImageTextHP--v2__contentsBlock__image {
padding: 0 !important;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 0;
overflow: hidden;
}
.btn_line li {
width: 100% !important;
text-align: center !important;
}
.btn_line .is-rightIcon .g-ButtonUnit__link .cmn-richtext {
padding-right: 0;
}
}