html {
}
html,body {
margin: 0;
padding: 0;
}
#area-Contents {
font-family: 'CezanneProN-M', sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
font-feature-settings: 'palt' on;
letter-spacing: 0.05em;
}
#area-Contents img {
width: 100%;
height: auto;
}
#area-Contents a {
text-decoration: none;
}
#area-Contents ul {
list-style: none;
}
#area-Contents ::selection {
	background: #0F8482;
	color: #FFF;
}
#area-Contents ::-moz-selection {
	background: #0F8482;
	color: #FFF;
}
.scobj {}


/*none*/
.show_pc {display: block!important}
.show_sp {display: none !important}
.margin_none p {margin: 0;}
@media only screen and (max-width: 640px) {
.show_pc {display: none!important}
.show_sp {display: block !important}
}

/*header*/
#kps_header {
width: 100%;
font-family: 'CezanneProN-M', sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
font-feature-settings: 'palt' on;
letter-spacing: 0;
opacity: 0;
transition: opacity 0.6s ease, transform 0.6s ease;
transition-delay: 0.2s;
position: fixed;
z-index: 100;
}
#kps_header.hidden {
transform: translateY(30%);
}
#kps_header.visible {
opacity: 1;
transform: translateY(0);
}
#kps_header img {
width: 100%;
height: auto;
}
#kps_header .kps_header_wrap {
width: 100%;
background-color: #FFF;
border-bottom: 1px solid #CCCCCC;
position: relative;
}
#kps_header .kps_header_inner {
width: calc(100% - 60px);
margin: 0 auto;
padding: 15px 0;
position: relative;
display: flex;
align-items: center;
}
#kps_header .kps_logo {
width: 140px;
list-style: none;
margin: 0 20px 0 0;
padding: 0;
}
#kps_header .kps_logo a {
display: flex;
align-items: center;
}
#kps_header .kps_logo h1 {
margin: 0;
padding: 0;
}
#kps_header .lang_btn {
width: 110px;
margin: 0 auto 0 0;
padding: 0;
list-style: none;
}
#kps_header .lang_item {
position: relative;
border: 1px solid #C9C9C9;
border-radius: 999px;
background: #fff;
}
#kps_header .lang01 {
width: 100%;
height: 28px;
padding: 0 26px 0 28px;
font-size: 13px;
color: #555;
background: none;
border: none;
border-radius: 999px;
cursor: pointer;
display: flex;
align-items: center;
position: relative;
}
#kps_header .lang01::before {
content: "";
width: 12px;
height: 12px;
background: url("/content/dam/sites/kao/pro-kao-com/jp/ja/professional/common/ico_lang.svg") no-repeat center / contain;
position: absolute;
left: 10px;
}
#kps_header .lang01::after {
content: "";
width: 8px;
height: 5px;
background: url("/content/dam/sites/kao/pro-kao-com/jp/ja/professional/common/ico_down_arrow.svg") no-repeat center / contain;
position: absolute;
right: 10px;
transition: transform 0.2s;
}
#kps_header .lang_item.is-open .lang01::after {
transform: rotate(180deg);
}
#kps_header .lang01:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(15,132,130,0.4);
}
#kps_header .lang_dropmenu {
position: absolute;
width: calc(100% - 10px);
top: 32px;
left: 0;
background: #fff;
border: 1px solid #C9C9C9;
border-radius: 8px;
padding: 4px;
list-style: none;
z-index: 10;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.25s ease, opacity 0.25s;
opacity: 0;
}

/* hover & JS制御 */
@media (hover: hover) {
#kps_header .lang_item:hover .lang_dropmenu {
transform: scaleY(1);
opacity: 1;
}
}
#kps_header .lang_item.is-open .lang_dropmenu {
transform: scaleY(1);
opacity: 1;
}
#kps_header .lang_dropmenu a {
display: block;
padding: 10px 8px;
border-radius: 6px;
font-size: 13px;
color: #555;
text-decoration: none;
}
#kps_header .lang_dropmenu a.lang02 {
color: #0F8482;
}
#kps_header .lang_dropmenu a:hover, #kps_header .lang_dropmenu a:focus-visible {
background: #0F8482;
color: #fff;
outline: none;
}
#kps_header .brand_menu {
margin: 0 0 0 auto;
}
#kps_header .brand_menu ul {
margin: 0 0 0 auto;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
#kps_header .brand_menu li {
margin: 0 10px;
}
#kps_header .brand_menu li a {
font-family: 'CezanneProN-M',sans-serif;
font-size: 15px;
padding: 12px 5px;
display: block;
color: #232323;
text-decoration: none;
text-underline-offset: 8px;
}
#kps_header .brand_menu li.brand_menu06 a {
padding: 12px 30px;
color: #FFF;
background-color: #0F8482;
border-radius: 999px;
}

/*TABLET*/
@media only screen and (min-width:1025px) and (max-width: 1280px) {
#kps_header .kps_header_inner {
width: calc(100% - 40px);
}
#kps_header .brand_menu li {
margin: 0 5px;
}
#kps_header .brand_menu li a {
font-size: 13px;
padding: 10px 5px;
}
#kps_header .brand_menu li.brand_menu06 a {
padding: 10px 20px;
}
}


/*SP TABLET*/
@media only screen and (max-width: 1024px) {
#kps_header .kps_header_inner {
width: calc(100% - 30px);
height: 34px;
padding: 12px 0;
}
#kps_header .kps_logo {
width: 100px;
list-style: none;
margin: 0 auto 0 0;
padding: 0;
}
#kps_header .lang_btn {
width: 100px;
margin: 0 20px 0 auto;
}
#kps_header .lang01 {
width: 100%;
height: 24px;
padding: 0 15px 0 21px;
font-size: 12px;
line-height: 1.1;
}
#kps_header .lang01::before {
content: "";
width: 10px;
height: 10px;
position: absolute;
top: 50%;
left: 8px;
transform: translate(0,-50%);
}
#kps_header .lang01::after {
content: "";
width: 8px;
height: 5px;
position: absolute;
right: 10px;
transition: transform 0.2s;
}

#kps_header .lang_dropmenu {
position: absolute;
top: 29px;
left: 0;
background: #fff;
border: 1px solid #C9C9C9;
border-radius: 5px;
padding: 3px;
list-style: none;
z-index: 10;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.25s ease, opacity 0.25s;
opacity: 0;
}
/* JSで開いた状態 */
#kps_header .lang_dropmenu a {
display: block;
padding: 10px;
line-height: 1;
border-radius: 5px;
font-size: 12px;
color: #555;
text-decoration: none;
}

#kps_header .brand_menu {
width: calc(100% - 60px);
transition: 0.6s;
transform: translate(0 , -101vh);
position: fixed;
background-color: #FFF;
z-index: -1;
margin: 0;
padding: 50px 30px 30px;
top: 58px;
left: 0;
border-bottom: 1px #CCC solid;
}
#kps_header.active .brand_menu {
display: block;
transform: translate(0 , 0);
}
#kps_header .brand_menu ul {
display: block;
margin: 0;
padding: 0;
}
#kps_header .brand_menu li {
margin: 0;
border-bottom: 1px solid #D8D8D8;
}
#kps_header .brand_menu li a {
font-family: 'CezanneProN-M',sans-serif;
font-size: 16px;
padding: 15px 0;
text-decoration: none;
background: url("/content/dam/sites/kao/pro-kao-com/jp/ja/professional/common/ico_right_arrow.svg") right 10px center no-repeat;
background-size: 8px auto;
}
#kps_header .brand_menu li.brand_menu06 {
border: none;
margin: 20px 0;
}
#kps_header .brand_menu li.brand_menu06 a {
padding: 15px 30px;
color: #FFF;
background-color: #0F8482;
border-radius: 999px;
text-align: center;
}
#kps_header .menu_btn {
  position: relative;
  width: 30px;
  height: 22px;
  cursor: pointer;
}
#kps_header .menu_btn span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #707070;
  border-radius: 2px;
}
#kps_header .menu_btn, .menu_btn span {
  display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}
#kps_header .menu_btn span:nth-of-type(1) {
  top: 0;
}
#kps_header .menu_btn span:nth-of-type(2) {
  top: 10px;
}
.menu_btn span:nth-of-type(3) {
  bottom: 0;
}
#kps_header.active .menu_btn span:nth-of-type(1) {
  -webkit-transform: translateY(10px) rotate(-45deg);
  transform: translateY(10px) rotate(-45deg);
}
#kps_header.active .menu_btn span:nth-of-type(2) {
  opacity: 0;
}
#kps_header.active .menu_btn span:nth-of-type(3) {
  -webkit-transform: translateY(-10px) rotate(45deg);
  transform: translateY(-10px) rotate(45deg);
}
}

/* ボタン */
.btn_line .is-colorset--1 .l-ButtonUnit__link {color: #0F8482; background-color: #fff; border-color: #0F8482; border-radius: 999px;}
.btn_green .is-colorset--2 .l-ButtonUnit__link {color: #fff; background-color: #0F8482; border-radius: 999px; width: 290px; margin: 0 auto;}
.sub_hr .l-Hr__hr.is-color--1 {border-color: #0F8482;}

@media only screen and (max-width: 1024px) {
.btn_green .is-colorset--2 .l-ButtonUnit__link {width: 290px;}	
}

@media only screen and (max-width: 640px) {
.btn_green .is-colorset--2 .l-ButtonUnit__link {width: 250px;}	
}

/* font-family */
.font_bold {font-family: 'CezanneProN-DB', sans-serif;}
.font_medium {font-family: 'CezanneProN-M', sans-serif;}
.font_eng {font-family: 'AvenirLTPro-Roman', sans-serif;}

/* 文字色 */
.col_g {color: #0F8482;}
.col_lg {color: #00AC8F;}
.col_k {color: #333;}

/* 背景色 */
.bg_lg {background-color: #F0F5F4;}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* 文字サイズ */
.font-40 {font-size: 40px; line-height: 1.6;}
.font-38 {font-size: 38px;}
.font-32 {font-size: 32px;}
.font-30 {font-size: 30px; line-height: 1.5;}
.font-26 {font-size: 26px; line-height: 1.5;}
.font-26s {font-size: 26px;}
.font-22 {font-size: 20px; line-height: 1.8;}
.font-20 {font-size: 20px; line-height: 2;}
.font-18 {font-size: 18px; line-height: 2;}
.font-16 {font-size: 16px;}
.font-12 {font-size: 12px;}

@media only screen and (max-width: 1024px) {
.font-40 {font-size: 30px;}
.font-38 {font-size: 28px;}	
.font-32 {font-size: 26px;}	
.font-30 {font-size: 24px;}
.font-26 {font-size: 22px;}
.font-26s {font-size: 17px;}	
.font-22 {font-size: 20px;}
.font-20 {font-size: 17px; line-height: 1.8;}
.font-18 {font-size: 16px; line-height: 1.8;}	
.font-16 {font-size: 14px;}
.font-12 {font-size: 12px;}	
}

@media only screen and (max-width: 640px) {
.font-40 {font-size: 24px;}
.font-38 {font-size: 28px;}	
.font-32 {font-size: 22px;}	
.font-30 {font-size: 20px;}
.font-26 {font-size: 19px; line-height: 1.6;}
.font-26s {font-size: 16px; letter-spacing: normal; line-height: 1.5;}	
.font-22 {font-size: 16px;}	
.font-20 {font-size: 16px;}
.font-18 {font-size: 16px; line-height: 1.8;}
.font-16 {font-size: 14px;}
.font-12 {font-size: 12px;}	
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* padding-top */
.pt180 {padding-top: 180px;}
.pt180 {padding-top: 180px;}
.pt180_100 {padding-top: 180px;}
.pt140 {padding-top: 140px;}
.pt140_80 {padding-top: 140px;}
.pt140_60 {padding-top: 140px;}
.pt100 {padding-top: 100px;}
.pt80 {padding-top: 80px;}
.pt60 {padding-top: 60px;}
.pt50 {padding-top: 50px;}
.pt40 {padding-top: 40px;}
.pt30 {padding-top: 30px;}

@media only screen and (max-width: 1024px) {
.pt180_100 {padding-top: 100px;}	
.pt140_80 {padding-top: 80px;}	
.pt140_60 {padding-top: 60px;}
.pt80 {padding-top: 40px;}	
.pt60 {padding-top: 40px;}	
.pt50 {padding-top: 30px;}
}

@media only screen and (max-width: 640px) {
.pt180 {padding-top: 80px;}
.pt180_100 {padding-top: 100px;}	
.pt140 {padding-top: 100px;}	
.pt140_80 {padding-top: 80px;}	
.pt140_60 {padding-top: 60px;}
.pt80 {padding-top: 40px;}
.pt60 {padding-top: 40px;}	
.pt50 {padding-top: 30px;}
}


/* padding-bottom */
.pb140 {padding-bottom: 140px;}
.pb140_80 {padding-bottom: 140px;}
.pb100 {padding-bottom: 100px;}
.pb80 {padding-bottom: 80px;}
.pb60 {padding-bottom: 60px;}
.pb50 {padding-bottom: 50px;}
.pb40 {padding-bottom: 40px;}
.pb30 {padding-bottom: 30px;}
.pb20 {padding-bottom: 20px;}

@media only screen and (max-width: 1024px) {
.pb140 {padding-bottom: 100px;}
.pb140_80 {padding-bottom: 80px;}
.pb60 {padding-bottom: 40px;}	
.pb50 {padding-bottom: 30px;}
.pb40 {padding-bottom: 30px;}	
}

@media only screen and (max-width: 640px) {
.pb140 {padding-bottom: 80px;}
.pb140_80 {padding-bottom: 80px;}
.pb60 {padding-bottom: 40px;}	
.pb50 {padding-bottom: 30px;}
.pb40 {padding-bottom: 30px;}	
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* margin */
.mt180 {margin-top: 180px;}
.mt180_100 {margin-top: 180px;}
.mt140 {margin-top: 140px;}
.mt140_80 {margin-top: 140px;}
.mt140_60 {margin-top: 140px;}
.mt100 {margin-top: 100px;}
.mt80 {margin-top: 80px;}
.mt60 {margin-top: 60px;}
.mt50 {margin-top: 50px;}
.mt40 {margin-top: 40px;}
.mt30 {margin-top: 30px;}
.mt20 {margin-top: 20px;}

@media only screen and (max-width: 1024px) {
.mt180_100 {margin-top: 100px;}
.mt140 {margin-top: 100px;}	
.mt140_80 {margin-top: 120px;}	
.mt140_60 {margin-top: 60px;}
.mt100 {margin-top: 80px;}
.mt80 {margin-top: 50px;}
.mt30 {margin-top: 20px;}
.mt20 {margin-top: 10px;}	
} 

@media only screen and (max-width: 640px) {
.mt180 {margin-top: 80px;}
.mt180_100 {margin-top: 100px;}	
.mt140 {margin-top: 100px;}	
.mt140_80 {margin-top: 80px;}	
.mt140_60 {margin-top: 60px;}
.mt100 {margin-top: 60px;}	
.mt80 {margin-top: 40px;}
.mt60 {margin-top: 30px;}	
.mt50 {margin-top: 30px;}
.mt30 {margin-top: 20px;}
.mt20 {margin-top: 15px;}	
} 

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* お問い合わせ */
.contact_box {position: relative; top: -100px;}
.contact_pd {padding: 50px 0;}
.contact_bg {height: 300px;}

@media only screen and (max-width: 1024px) {
.contact_box {top: -60px;}
.contact_pd	{padding: 30px 0;}
.contact_bg {height: 250px;}	
}

@media only screen and (max-width: 640px) {
.contact_box {top: -40px;}
.contact_pd	{padding: 30px 0;}
.contact_bg {height: 270px;}
.contact_icon .cmn-icon {top: -15px;}
}