@charset "UTF-8";
/* CSS Document */
/*--------------------
01.top
02.下層共通
03.WORKS/TOPICS
04.WORKS/TOPICS_detail
05.CONTACT
05-01.confirm
05-02.thanks

--------------------*/

/*----------
01.top
----------*/

#top #mainvisual_area{
width: 100%;
height: 100vh;
position: relative;
}

#top #mainvisual_area .mainvisual_box{
width: 100%;
height: 100vh;
position: relative;
}

#top #mainvisual_area .mainvisual_box .mainvisual img{
width: 100%;
height: 100vh;
object-fit: cover;
transform: scale(1.1);
}

#top #mainvisual_area .mainvisual_box.slide_animation .mainvisual img{
-webkit-animation: zoomimg 12s linear ;
animation: zoomimg 12s linear;
transform-origin: top;
}

@-webkit-keyframes zoomimg {
0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes zoomimg {
0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}


#top #mainvisual_area .mainvisual_box .mainvisual_text_box{
max-width: 960px;
width: 100%;
height: calc(100vh - 72px);
position: absolute;
top: 72px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
}

#top #mainvisual_area .mainvisual_text_box .title{
font-size: 80px;
line-height: 100px;
letter-spacing: 0.15em;
position: absolute;
font-family: 'Gotham';
font-weight: 100;
}
#top #mainvisual_area .mainvisual_text_box .title span{
font-size: 40px;
letter-spacing: 0.15em;
}

#top #mainvisual_area .mainvisual_text_box .link_box{
position: absolute;
min-width: 120px;
}

#top #mainvisual_area .mainvisual_text_box .title_jp{
font-weight: 350;
font-size: 20px;
letter-spacing: 0.15em;
line-height: 32px;
margin: 0 0 22px;
}

#top #mainvisual_area .mainvisual_text_box .next_btn{
max-width: 120px;
width: 100%;
background: rgba(255,255,255,.5);
border-radius: 20px;
transition: .4s ease;
}
#top #mainvisual_area .mainvisual_text_box .next_btn:hover{
background: rgba(255,255,255,.8);
}

#top #mainvisual_area .mainvisual_text_box .next_btn a{
display: block;
width: 100%;
padding: 7px 0 8px 24px;
font-weight: 350;
font-size: 16px;
letter-spacing: 0.15em;
line-height: 24px;
position: relative;
}

#top #mainvisual_area .mainvisual_text_box .next_btn a::before{
content: "";
display: block;
position: absolute;
top: 18px;
right: 19px;
background: url(../common/img/arrow_bottom01.png) no-repeat center bottom;
background-size: 100% auto;
width: 13px;
height: 6px;
}

#top #mainvisual_area .slider_function_box{
max-width: 960px;
width: 100%;
position: absolute;
bottom: 20px;
right: 0;
left: 0;
margin: 0 auto;
}

#top #mainvisual_area .slider_function_box .box{
max-width: 274px;
width: 100%;
margin: 0 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}

#top #mainvisual_area .slider_function_box .count_text{
font-weight: 400;
font-size: 20px;
letter-spacing: 0.15em;
line-height: 29px;
margin: 0 23px 0 0;
}

#top #mainvisual_area .slider_function_box .arrow_box{
display: flex;
align-items: start;
justify-content: space-between;
width: 186px;
}

#top #mainvisual_area .slider_function_box .arrow{
max-width: 86px;
width: 100%;
border-radius: 20px;
background: #fff;
text-align: center;
padding: 7px 0 9px;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.15em;
line-height: 24px;
cursor: pointer;
transition: .4s ease;
}
#top #mainvisual_area .slider_function_box .arrow:hover{
opacity: 0.7;
}

/* mainvisual01 */
#top #mainvisual_area .mainvisual_box01 .mainvisual_text_box .title{
top: 36px;
left: 0;
}

#top #mainvisual_area .mainvisual_box01 .mainvisual_text_box .link_box{
top: 209px;
right: 201px;
}

/* mainvisual02 */
#top #mainvisual_area .mainvisual_box02 .mainvisual_text_box .title{
top: 51px;
left: 116px;
}

#top #mainvisual_area .mainvisual_box02 .mainvisual_text_box .link_box{
top: 166px;
right: 96px;
}

/* mainvisual03 */
#top #mainvisual_area .mainvisual_box03 .mainvisual_text_box .title{
top: 22%;
left: 117px;
}

#top #mainvisual_area .mainvisual_box03 .mainvisual_text_box .link_box{
top: calc(22% + 120px);
left: 117px;
}

/* mainvisual04 */
#top #mainvisual_area .mainvisual_box04 .mainvisual_text_box .title{
top: 12%;
right: -20px;
text-align: right;
}

#top #mainvisual_area .mainvisual_box04 .mainvisual_text_box .link_box{
top: calc(12% + 221px);
right: 0;
}
#top #mainvisual_area .mainvisual_box04 .mainvisual_text_box .title_jp{
text-align: right;
}
#top #mainvisual_area .mainvisual_box04 .mainvisual_text_box .next_btn {
margin: 0 0 0 auto;
}

/* mainvisual05 */
#top #mainvisual_area .mainvisual_box05 .mainvisual_text_box .title{
top: 81px;
left: -37px;
}
#top #mainvisual_area .mainvisual_box05 .mainvisual_text_box .link_box{
top: 136px;
left: 60%;
}

/* mainvisual06 */
#top #mainvisual_area .mainvisual_box06 .mainvisual_text_box .title{
top: 5%;
left: 117px;
}
#top #mainvisual_area .mainvisual_box06 .mainvisual_text_box .link_box{
top: calc(5% + 210px);
left: 117px;
}

/* mainvisual07 */
#top #mainvisual_area .mainvisual_box07 .mainvisual_text_box .title{
top: 12%;
left: 73px;
color: #fff;
}
#top #mainvisual_area .mainvisual_box07 .mainvisual_text_box .title_jp{
color: #fff;
}
#top #mainvisual_area .mainvisual_box07 .mainvisual_text_box .link_box{
top: calc(12% + 310px);
left: 73px;
}

/* mainvisual08 */
#top #mainvisual_area .mainvisual_box08 .mainvisual_text_box .title{
top: 9%;
left: 73px;
}
#top #mainvisual_area .mainvisual_box08 .mainvisual_text_box .link_box{
top: calc(9% + 310px);
left: 73px;
}

/* mainvisual09 */
#top #mainvisual_area .mainvisual_box09 .mainvisual_text_box .title{
top: 4%;
right: 7%;
}
#top #mainvisual_area .mainvisual_box09 .mainvisual_text_box .link_box{
top: calc(4% + 300px);
left: 50%;
}

/* END  mainvisual */



#top .cnt_area .h2_g h2{
display: block;
font-size: 56px;
line-height: 72px;
letter-spacing: 0.15em;
text-align: center;
margin-bottom: 26px;
font-weight: 300;
}
#top .cnt_area .h2_g .maintext{
font-weight: 400;
margin-bottom: 47px;
line-height: 40px;
font-size: 32px;
letter-spacing: 0.15em;
text-align: center;
}
#top .cnt_area .h2_g p.first_text{
font-size:16px;
line-height: 40px;
letter-spacing: 0.15em;
text-align: center;
}


#top #about{
padding: 76px 0 96px;
}
#top #about .contents_in{
display: block;
position: relative;
}

#top #about .icon.icon01{
display: block;
max-width: 152px;
position: absolute;
top: 16px;
left: -28px;
}

#top #about .icon.icon02{
display: block;
max-width: 133px;
position: absolute;
bottom: -56px;
right: -80px;
}

#top #concept{
padding: 50px 0 0;
}
#top #concept .bg{
display: block;
width: 100%;
background: url("../img/top/bg_concept.jpg") no-repeat center;
background-size: cover;
padding-bottom: 289px;
}

#top #concept .logo_g{
max-width: 460px;
width: 100%;
margin: 0 auto 30px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px 18px 27px 34px;
background: #fff;
transform: translateY(-50%);
}

#top #concept .logo_g .kmn_logo{
max-width: 150px;
display: block;
}
#top #concept .logo_g .x_img{
max-width: 29px;
display: block;
}
#top #concept .logo_g .kt_logo{
max-width: 158px;
display: block;
}
#top #concept .h2_g p.first_text,
#top #concept .h2_g .maintext,
#top #concept .h2_g h2{
color: #fff;
}

#top #concept .cnt_g{
display: flex;
justify-content: space-between;
align-items: center;
max-width: 804px;
width: 100%;
margin: -166px auto 0;
}

#top #concept .cnt_g .cnt_box{
display: block;
width: 383px;
height: 383px;
border-radius: 50%;
background: #ddd;
position: relative;
text-align: center;
padding: 84px 0 59px;
}
#top #concept .cnt_g .cnt_box.air{
background: #5CCDCC;
}
#top #concept .cnt_g .cnt_box.water{
background: #65B9F4;
}

#top #concept .cnt_g .cnt_box .icon{
display: block;
position: absolute;
top: -42px;
left: 0;
right: 0;
margin: 0 auto;
}
#top #concept .cnt_g .cnt_box.air .icon{
width: 121px;
}
#top #concept .cnt_g .cnt_box.water .icon{
width: 68px;
}

#top #concept .cnt_g .cnt_box .text{
display: block;
color:#fff;
font-size: 40px;
letter-spacing: 0.15em;
margin-bottom: 40px;
}
#top #concept .cnt_g .cnt_box .img{
width: 100%;
margin: 0 auto;
}

#top #concept .cnt_g .cnt_box.air .img{
max-width: 228px;
}
#top #concept .cnt_g .cnt_box.water .img{
max-width: 171px;
}

#top #territory {
padding: 96px 0 0;
}
#top #territory .h2_g{
display: block;
margin-bottom: 55px;
}

#top #territory .cnt_g{
display: flex;
justify-content: center;
align-items: center;
max-width: 537px;
height: 537px;
position: relative;
margin: 0 auto 65px;
}
#top #territory .cnt_g .img{
max-width: 160px;
position: absolute;
opacity: 0;
}
#top #territory .cnt_g .img.img01 {
top: 0;
left: 0;
right: 0;
margin: 0 auto;
}
#top #territory .cnt_g .img.img02 {
/*top: 50%;*/
top: 35%;
right: 0;
/*transform: translateY(-50%);*/
}
#top #territory .cnt_g .img.img03 {
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
}
#top #territory .cnt_g .img.img04 {
/*top: 50%;*/
top: 35%;
left: 0;
/*transform: translateY(-50%);*/
}
#top #territory .cnt_g .icon{
max-width: 162px;
opacity: 0;
}

#top #territory .bg_circle svg {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: 0 auto;
transform: translateY(-50%) rotate(-90deg);
z-index: -1;
}

#top #territory .bg_circle circle {
fill: transparent;
stroke: #FCB835;
stroke-width: 2;
opacity: 0;
}

#top #territory .bg_circle.animate circle {
opacity: 1;
animation: circle_pc 2s cubic-bezier(.65,.05,.36,1);
}

@keyframes circle_pc {
  0% { stroke-dasharray: 0 1230; }
  99.9%,to { stroke-dasharray: 1230 1230; }
}
@keyframes circle_sp {
  0% { stroke-dasharray: 0 1230; }
  99.9%,to { stroke-dasharray: 1230 1230; }
}


/*
#top #territory .cnt_g::before{
content: '';
width: 400px;
height: 400px;
border: 2px solid #FCB835;
border-radius: 50%;
display: block;
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: 0 auto;
transform: translateY(-50%);
}
*/
#top #territory .cnt_g::after {
content: '';
display: block;
max-width: 28px;
height: 16px;
background: url("../img/top/arrow01_bottom.png") no-repeat center;
background-size: contain;
position: absolute;
bottom: -49px;
left: 0;
right: 0;
margin: 0 auto;
}


/*--- 記事スライドエリア ---*/
#top .article_area{
padding-bottom: 60px;
position: relative;
}
#top .article_area .h2_g{
margin-bottom: 64px;
}

#top .article_area .article_slider{
width: calc(50% + 480px);
margin: 0 0 0 auto;
}
#top .article_area .article_slider .cnt_box{
max-width: 960px;
width: 78%;
margin: 0 50px 0 0;
position: relative;
}

#top .article_area .article_slider .cnt_box .cnt_img{
width: 96%;
margin: 0 0 0 auto;
position: relative;
}
#top .article_area .article_slider .cnt_box .cnt_img::after{
content: '';
display: block;
width: 100%;
height: 100%;
background: #fff;
position: absolute;
top: 0;
right: 0;
opacity: 0.4;
transition: ease .4s;
}

#top .article_area .article_slider .cnt_box.slick-current .cnt_img::after{
opacity: 0;
}

#top .article_area .article_slider .cnt_box .cnt_text{
opacity: 0;
background:#444343;
display: block;
color: #fff;
max-width: 480px;
width: 100%;
position: absolute;
bottom: 59px;
left: 0;
padding: 36px 32px 32px 50px;
}
#top .article_area .article_slider .cnt_box .cnt_text .cat{
font-weight: 300;
font-size: 14px;
letter-spacing: 0.15em;
margin-bottom: 4px;
}
#top .article_area .article_slider .cnt_box .cnt_text .title{
font-weight: 500;
font-size: 32px;
line-height: 40px;
letter-spacing: 0.15em;
margin-bottom: 22px;
}
#top .article_area .article_slider .cnt_box .cnt_text p{
font-size: 16px;
line-height: 24px;
padding-right: 130px;
}
#top .article_area .article_slider .cnt_box .cnt_text .btn_more{
max-width: 120px;
width: 100%;
background: #fff;
border-radius: 20px;
position: absolute;
bottom: 32px;
right: 32px;
}
#top .article_area .article_slider .cnt_box .cnt_text .btn_more a{
display: block;
width: 100%;
padding: 7px 0 8px 24px;
font-weight: 350;
font-size: 16px;
letter-spacing: 0.15em;
line-height: 24px;
position: relative;
}
#top .article_area .article_slider .cnt_box .cnt_text .btn_more a::before {
content: "";
display: block;
position: absolute;
top: 18px;
right: 19px;
background: url("../common/img/arrow_right02.png") no-repeat center bottom;
background-size: 100% auto;
width: 17px;
height: 5px;
transition: .4s ease;
}
#top .article_area .article_slider .cnt_box .cnt_text .btn_more:hover a::before{
right: 13px;
}

#top .article_area .article_slider .cnt_box.slick-current .cnt_text {
animation: fadeOut 5.8s;
}

@keyframes fadeOut {
0% {
opacity: 0;
}
15% {
opacity: 0;
}
25% {
opacity: 1;
}
94% {
opacity: 1;
}
100% {
opacity: 0;
}
}

#top .article_area .article_slider .slick-counter{
font-weight: 400;
font-size: 20px;
letter-spacing: 0.15em;
line-height: 29px;
margin: 0 23px 0 0;
position: absolute;
bottom: -54px;
max-width: 960px;
width: 100%;
text-align: right;
padding-right: 210px;
}

#top .article_area .slider_function_box{
max-width: 960px;
width: 100%;
margin: 21px auto 38px;
}

#top .article_area .slider_function_box .box{
max-width: 274px;
width: 100%;
margin: 0 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}

#top .article_area .slider_function_box .arrow_box{
display: flex;
align-items: start;
justify-content: space-between;
width: 186px;
}

#top .article_area .slider_function_box .arrow{
max-width: 86px;
width: 100%;
border-radius: 20px;
background: #fff;
text-align: center;
padding: 7px 0 9px;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.15em;
line-height: 24px;
cursor: pointer;
transition: .4s ease;
}
#top .article_area .slider_function_box .arrow:hover{
opacity: 0.7;
}

#top .article_area .slider_function_box .count_text{
font-weight: 400;
font-size: 20px;
letter-spacing: 0.15em;
line-height: 29px;
margin: 0 23px 0 0;
}

#top .article_area .btn_next{
display: block;
max-width: 460px;
margin: 0 auto;
background: #fff;
border-radius: 60px;
transition: .4s ease;
}
#top .article_area .btn_next:hover{
opacity: 0.7;
}

#top .article_area .btn_next a{
display: block;
width: 100%;
text-align: center;
border-radius: 60px;
font-size: 20px;
font-weight: 500;
letter-spacing: 0.15em;
padding: 44px 0 46px;
position: relative;
}
#top .article_area .btn_next a::after {
content: "";
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 66px;
background: url("../common/img/arrow_right01.png") no-repeat center bottom;
background-size: 100% auto;
width: 10px;
height: 22px;
}

/*--- 記事スライドエリア ---*/

#top #works{
padding-top: 30px;
}

#top #works::before{
content: '';
display: block;
width: calc(50% + 580px);
height: 51.7%;
background: rgb(58 189 126 / 0.5);
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
}



/*--- FUNCTION共通 ---*/

#top .function_area {
padding: 143px 0 97px;
}
#top .function_area .title_g{
margin-bottom: 73px;
}

#top .function_area .title_g .h2_en{
display: block;
width: 100%;
position: relative;
margin: 0 auto 12px;
text-align: center;
}
#top .function_area .title_g .h2_en::before{
content: '';
display: block;
width: 100%;
height: 1px;
background: #5CCDCC;
position: absolute;
top: 50%;
z-index: -1;
}
#top .function_area .title_g .h2_en span{
display: inline-block;
background: #5CCDCC;
color: #fff;
font-size: 20px;
letter-spacing: 0.15em;
font-weight: 500;
padding: 6px 44px 7px 52px;
}
#top .function_area .title_g .en_sub{
display: block;
color: #5CCDCC;
font-size: 20px;
letter-spacing: 0.15em;
font-weight: 500;
text-align: center;
margin-bottom: 42px;
}
#top .function_area .title_g h2{
color: #5CCDCC;
font-size: 128px;
letter-spacing: 0.15em;
text-align: center;
font-weight: 100;
margin-bottom: 96px;
}
#top .function_area .title_g h2 span{
font-size: 92px;
}
#top .function_area .title_g .sub_title{
text-align: center;
font-size: 24px;
letter-spacing: 0.15em;
line-height: 32px;
margin-bottom: 45px;
}
#top .function_area .title_g p{
text-align: center;
font-size: 16px;
line-height: 40px;
letter-spacing: 0.15em;
}

#top #function_water .title_g p{
margin: 0 auto 16px;
}

#top .function_area .title_g ul {
text-align: center;
font-size: 16px;
line-height: 40px;
letter-spacing: 0.15em;
}

/* 商品グループ */

#top .function_area .product_g{
position: relative;
margin-bottom: 233px;
}
#top .function_area .product_g:last-of-type{
margin-bottom: 0;
}
#top .function_area .product_g::before{
content: '';
display: block;
width: 43.7%;
max-width: 840px;
height: 460px;
background: url("../img/top/product/pic01_product01.jpg") no-repeat center top;
background-size: contain;
position: absolute;
top: 144px;
right: calc(50% + 125px);
}
#top .function_area .product_g::after{
content: '';
display: block;
width: calc(50% + 480px);
height: 65.3%;
background: #5CCDCC;
opacity: 0.05;
position: absolute;
bottom: 50px;
right: 0;
z-index: -1;
}
#top .function_area .product_g:nth-of-type(odd)::before{
background: url("../img/top/product/pic01_product02.jpg") no-repeat center top;
background-size: contain;
position: absolute;
top: 144px;
right: unset;
left: calc(50% + 125px);
}
#top .function_area .product_g:nth-of-type(odd)::after{
opacity: 0.1;
right: unset;
left: 0;
}

#top .function_area .product_g .contents_in{
position: relative;
z-index: 1;
}
#top .function_area .product_g .en_name{
display: block;
font-family: 'Gotham';
font-weight: 100;
font-size: 80px;
line-height: 100px;
letter-spacing: 0.15em;
margin-bottom: 82px;
}
#top .function_area .product_g:nth-of-type(odd) .en_name{
text-align: right;
}

#top .function_area .product_g .about_box{
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 97px;
}
#top .function_area .product_g:nth-of-type(odd) .about_box{
flex-direction: row-reverse;
}
#top .function_area .product_g .about_box .cnt_img{
max-width: 441px;
width: 46%;
display: block;
padding-top: 60px;
}
#top .function_area .product_g .about_box .cnt_text{
display: block;
max-width: 450px;
width: 46.8%;
margin-right: 3%;
}
#top .function_area .product_g:nth-of-type(odd) .about_box .cnt_text{
margin-right: 0;
margin-left: 7.8%;
}
#top .function_area .product_g .about_box .cnt_text .sub{
font-size: 20px;
line-height: 40px;
font-weight: 350;
margin-bottom: 7px;
}
#top .function_area .product_g .about_box .cnt_text h3{
display: block;
font-weight: 700;
letter-spacing: 0.15em;
font-size: 32px;
line-height: 40px;
margin-bottom: 8px
}
#top .function_area .product_g .about_box .cnt_text .register{
font-size: 16px;
line-height: 28px;
}
#top .function_area .product_g .about_box .top_text{
margin-bottom: 40px;
}


#top .function_area .product_g .about_box .cnt_text .about_text{
font-size: 24px;
line-height: 32px;
margin-bottom: 13px;
}
#top .function_area .product_g .about_box .cnt_text p{
font-size: 16px;
line-height: 32px;
text-align: justify;
text-justify: inter-ideograph;
margin-bottom: 24px;
}
#top .function_area .product_g .about_box .cnt_text table{
width: 100%;
font-size: 16px;
line-height: 32px;
}
#top .function_area .product_g .about_box .cnt_text table th{
text-align: left;
background: #DFDFDF;
padding: 7px 17px 8px;
border: 1px solid #929292;
}
#top .function_area .product_g .about_box .cnt_text table td{
text-align: left;
padding: 7px 17px 8px;
background: #fff;
border: 1px solid #929292;
}

#top .function_area .product_g .about_box .cnt_text table td sup{
font-size: 70%;
vertical-align: top;
position: relative;
top: -0.1em;
}

#top .function_area .product_g .point_box{
display: block;
max-width: 640px;
margin: 0 auto 21px;
padding-bottom: 56px;
position: relative;
}
#top .function_area .product_g .point_box::after{
content: '';
display: block;
width: 56px;
height: 28px;
background: url("../img/top/arrow02_bottom.png") no-repeat center;
background-size: contain;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
}

#top .function_area .product_g .point_box .cnt_box{
display: block;
width: 100%;
background: #fff;
margin-top: 44px;
padding: 24px 35px 23px 42px;
position: relative;
opacity: 0;
}
#top .function_area .product_g .point_box .cnt_box .point{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 74px;
height: 74px;
background: #5CCDCC;
border-radius: 50%;
color: #fff;
font-size: 12px;
line-height: 20px;
font-weight: 350;
position: absolute;
top: -21px;
left: -44px;
}
#top .function_area .product_g .point_box .cnt_box .point span{
display: block;
font-size: 20px;
}
#top .function_area .product_g .point_box .cnt_box p{
font-weight: 350;
font-size: 20px;
line-height: 40px;
}
#top .function_area .product_g .point_box .cnt_box p span{
background:linear-gradient(transparent 60%, #FEED5C 60%);
}
#top .function_area .product_g .point_box p.attention{
font-size: 14px;
line-height: 22px;
padding: 10px 0 0;
text-align: right;
}
#top .function_area .product_g .btn_more{
max-width: 420px;
margin: 0 auto;
border-radius: 60px;
background: #5CCDCC;
display:block;
width: 100%;
font-size: 20px;
font-weight: 400;
letter-spacing: 0.15em;
padding: 30px 0 32px;
text-align: center;
color: #fff;
cursor: pointer;
transition: .4s ease;
opacity: 0;
}
#top .function_area .product_g .btn_g{
/*opacity: 0;*/
}
#top .function_area .product_g .btn_g a{
max-width: 420px;
/*margin: 0 auto 20px;*/
margin: 0 auto;
border-radius: 60px;
background: #5CCDCC;
display:block;
width: 100%;
font-size: 20px;
font-weight: 400;
letter-spacing: 0.15em;
padding: 30px 0 32px;
text-align: center;
color: #fff;
cursor: pointer;
transition: .4s ease;
}
#top .function_area .product_g .btn_g .btn_contact a{
background: #5CCD7E;
}
#top .function_area .product_g .btn_figure{
max-width: 220px;
margin: 10px 0 0;
border-radius: 60px;
background: #5CCDCC;
display:block;
width: 100%;
font-size: 16px;
padding: 8px 0 9px;
text-align: center;
color: #fff;
cursor: pointer;
transition: .4s ease;
}
#top .function_area .product_g .btn_table{
max-width: 220px;
margin: 16px 0 0;
border-radius: 60px;
background: #579AC8;
display:block;
width: 100%;
font-size: 16px;
padding: 8px 0 9px;
text-align: center;
color: #fff;
cursor: pointer;
transition: .4s ease;
}

#top .function_area .product_g .btn_more:hover,
#top .function_area .product_g .btn_figure:hover,
#top .function_area .product_g .btn_table:hover{
opacity: 0.7;
}

/* ポップアップ */

#top .function_area .product_g .popup_box{
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100vh;
z-index: 99;
display: none;
}
#top .function_area .product_g .popup_box .bg{
background: rgb(92 205 204 / 0.5);
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

#top .function_area .product_g .popup_box .inner_box{
margin: 0 auto;
background: #fff;
position: relative;
}

#top .function_area .product_g .popup_box .inner_box .close{
position: absolute;
top: -20px;
right: -20px;
display: block;
width: 40px;
height: 40px;
background: #fff;
border-radius: 50%;
box-shadow: 0 4px 12px rgb(0 0 0 / 0.2);
cursor: pointer;
transition: .4s ease;
}
#top .function_area .product_g .popup_box .inner_box .close:hover{
transform: scale(1.1);
}
#top .function_area .product_g .popup_box .inner_box .close::before,
#top .function_area .product_g .popup_box .inner_box .close::after{
content: '';
display: block;
width: 1px;
height: 18px;
background: #585757;
position: absolute;
top:11px;
left: 0;
right: 0;
margin: 0 auto;
}
#top .function_area .product_g .popup_box .inner_box .close::before{
-webkit-transform:rotate(-45deg);
transform: rotate(-45deg);
}
#top .function_area .product_g .popup_box .inner_box .close::after{
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

/*PDF*/
#top .function_area .product_g .more_box .inner_box .close{
top: 41px;
right: 36px;
box-shadow: none;
}
#top .function_area .product_g .more_box .inner_box{
max-width: 520px;
width: 100%;
padding: 34px 30px 23px;
border-radius: 8px;
}
#top .function_area .product_g .more_box .inner_box .pdf_img{
display: flex;
justify-content: center;
align-items: center;
background: #AAAAAA;
border-radius: 16px;
width: 100%;
max-width: 460px;
height: 350px;
margin-bottom: 33px;
}
#top .function_area .product_g .more_box .inner_box .pdf_img img{
max-width: 282px;
}
#top .function_area .product_g .more_box .btn_g{
display: flex;
justify-content: space-between;
}

#top .function_area .product_g .more_box .btn_g .btn_download{
max-width: 280px;
width: 100%;
border-radius: 40px;
background: #5CCDCC;
}
#top .function_area .product_g .more_box .btn_g .btn_contact{
max-width: 170px;
width: 100%;
border-radius: 40px;
background: #5CCD7E;
}
#top .function_area .product_g .more_box .btn_g .btn_download a,
#top .function_area .product_g .more_box .btn_g .btn_contact a{
display: block;
width: 100%;
border-radius: 40px;
color: #fff;
font-size: 20px;
letter-spacing: 0.15em;
font-weight: 350;
text-align: center;
padding: 25px 0 26px;
}
#top .function_area .product_g .more_box .btn_g .btn_download a::after{
content: '';
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
margin-left: 13px;
background: url("../common/img/icon_download.png") no-repeat center;
background-size: contain;
}

/*figure*/
#top .function_area .product_g .figure_box .inner_box{
max-width: 580px;
width: 100%;
padding: 20px 28px 23px;
border-radius: 8px;
}

/*table*/
#top .function_area .product_g .table_box .inner_box{
background: none;
padding: 0;
max-width: 598px;
width: 100%;
}
#top .function_area .product_g .table_box .title{
display: block;
width: 100%;
background: #2B7DB6;
color: #fff;
font-size: 20px;
line-height: 28px;
text-align: center;
padding: 24px 0 20px
}
#top .function_area .product_g .table_box .title span{
font-size: 16px;
}
#top .function_area .product_g .table_box table{
background: #fff;
font-size: 16px;
line-height: 32px;
width: 100%;
}
#top .function_area .product_g .table_box table th{
background: #C2C2C2;
border:1px solid #585757;
padding: 7px 18px 8px;
text-align: left;
}
#top .function_area .product_g .table_box table td{
border:1px solid #585757;
padding: 7px 18px 8px;
text-align: left;
max-width: 220px;
width: 36%;
}
#top .function_area .product_g .table_box table tr.color01 th{
background: #97CAEE;
}
#top .function_area .product_g .table_box .attention{
display: block;
text-align: right;
font-size: 16px;
line-height: 32px;
margin-top: 16px;
}

/*--- END FUNCTION共通 ---*/


#top .function_area #kowahope_15.product_g .contents_in::after{
content: '';
display: block;
width: 41.6vw;
height: 26.2vw;
background: url(../img/top/product/bg01_function01.png) no-repeat center top;
background-size: contain;
position: absolute;
top: -11.6vw;
left: -36.4vw;
}

#top .function_area #kh_35.product_g::before{
top: 52px;
background: url(../img/top/product/pic01_product03.jpg) no-repeat center top;
background-size: contain;
}
#top .function_area #kh_35.product_g::after{
opacity: 0.2;
height: 76.3%;
}

#top .function_area #su_15.product_g::before{
background: url(../img/top/product/pic01_product04.jpg) no-repeat center top;
background-size: contain;
}
#top .function_area #su_15.product_g::after{
background: #61EDA9;
opacity: 0.1;
height: 69.3%;
}
#top .function_area #su_15.product_g .contents_in{
position: relative;
}
#top .function_area #su_15.product_g .contents_in::after{
content: '';
display: block;
width: 41.6vw;
height: 26.2vw;
background: url(../img/top/product/bg01_function01.png) no-repeat center top;
background-size: contain;
position: absolute;
bottom: -17.6vw;
right:-33.4vw;
}

#top .function_area #su_30.product_g::before{
background: url(../img/top/product/pic01_product05.jpg) no-repeat center top;
background-size: contain;
}
#top .function_area #su_30.product_g::after{
background: #61EDA9;
opacity: 0.2;
height: 69.3%;
}


#top #function_water .title_g .h2_en span{
background: #65B9F4;
}
#top #function_water .title_g .h2_en::before{
background: #65B9F4;
}
#top #function_water .title_g h2,
#top #function_water .title_g .en_sub{
color: #65B9F4;
}
#top #function_water .product_g::after{
background: #65B9F4;
opacity: 0.2;
height: 69.4%;
}
#top #function_water .product_g:nth-of-type(odd)::after{
background: #65B9F4;
opacity: 0.2;
}
#top #function_water .product_g .point_box .cnt_box .point{
background: #65B9F4;
}
#top #function_water .product_g .point_box::after{
background: url(../img/top/arrow03_bottom.png) no-repeat center;
background-size: contain;
}
#top #function_water .product_g .btn_more{
background: #65B9F4;
}
#top #function_water .product_g .btn_g .btn_download a{
background: #65B9F4;
}
#top #function_water .product_g .more_box .btn_g .btn_download{
background: #65B9F4;
}
#top #function_water .product_g .popup_box .bg{
background: rgb(101 185 244 / 0.5);
}

#top .function_area #kowaclean_20.product_g::before{
background: url(../img/top/product/pic01_product06.jpg) no-repeat center top;
background-size: contain;
}
#top .function_area #kowaclean_20.product_g .contents_in::after{
content: '';
display: block;
width: 20.9vw;
height: 31.25vw;
background: url(../img/top/product/bg01_function02.png) no-repeat center top;
background-size: contain;
position: absolute;
bottom: 154px;
right: -22.6vw;
}

#top .function_area #kowaclean_25.product_g::before{
background: url(../img/top/product/pic01_product07.jpg) no-repeat center top;
background-size: contain;
}
#top .function_area #kowaclean_25.product_g::after{
opacity: 0.2;
height: 69.3%;
}

#top .function_area #kowaclean_50.product_g::before{
background: url(../img/top/product/pic01_product08.jpg) no-repeat center top;
background-size: contain;
}
#top .function_area #kowaclean_50.product_g::after{
opacity: 0.1;
height: 69.3%;
}
#top .function_area #kowaclean_50.product_g .contents_in::after{
content: '';
display: block;
width: 200px;
height: 300px;
background: url(../img/top/product/bg01_function02.png) no-repeat center top;
background-size: contain;
position: absolute;
bottom: -190px;
left: -30px;
}

#top .function_area #kowaclean_kcl.product_g::before{
background: url(../img/top/product/pic01_product09.jpg) no-repeat center top;
background-size: contain;
}
#top .function_area #kowaclean_kcl.product_g::after{
opacity: 0.05;
height: 71.3%;
}



#top #topics{
padding-top: 97px;
}

#top #topics::before{
content: '';
display: block;
width: 100%;
height: 47.7%;
background: rgb(249 151 12 / 0.5);
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
}


#top #contact{
padding: 172px 0 135px;
}

#top #contact .h2_g{
margin-bottom: 39px;
}

#top #contact .h2_g h2{
margin-bottom: 60px;
}

#top #contact .h2_g .maintext{
line-height: 56px;
margin-bottom: 76px;
}
#top #contact .h2_g .attention_text{
font-size: 16px;
line-height: 40px;
letter-spacing: 0.15em;
text-align: center;
margin-bottom: 12px;
}

#top #contact .h2_g .first_text{
margin-bottom: 32px;
}
#top #contact .h2_g .ex_cnt{
font-size: 16px;
line-height: 32px;
font-weight: 400;
color: #5AC893;
text-align: center;
}

#top #contact .h2_g .ex_cnt span{
display:inline-block;
border: 1px solid #5AC893;
border-radius: 20px;
margin: 0 5px 9px;
padding: 0 10px;
}

#top #contact .form_g{
background: #E7E7E7;
padding: 52px 0 0;
margin-bottom: 97px;
}
#top #contact .form_g p.first_text{
display: block;
text-align: center;
margin-bottom: 53px;
line-height: 40px;
font-size: 16px;
}

#top #contact .form_box{
max-width: 880px;
padding: 48px 40px 0;
margin: 0 auto;
position: relative;
z-index: 1;
}
#top #contact .form_box::before{
content: '';
display: block;
width: 100%;
height: 880px;
border: 2px solid #fff;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}

#top #contact .form_box .required dt{
color: #D90202;
}
#top #contact .form_box dl{
display: flex;
justify-content: flex-start;
background: #fff;
font-size: 16px;
border-radius: 32px;
max-width: 800px;
margin: 0 0 40px;
padding: 0 26px 0 10px;
}

#top #contact .form_box dl dt{
width: 180px;
padding: 0 0 0 30px;
display: flex;
justify-content: flex-start;
align-items: center;
}
#top #contact .form_box dl dd{
width: calc(100% - 180px);
padding: 0;
}

#top #contact .form_box dl.zip{
position: relative;
max-width: 530px;
}
#top #contact .form_box dl.zip dd .btn_zip{
display: block;
width: 130px;
height: 64px;
background: #919191;
border-radius: 0 32px 32px 0;
position: absolute;
top: 0;
right: 0;
}
#top #contact .form_box dl.zip dd .btn_zip button{
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 64px;
color: #fff;
}

#contact input[type="text"], input[type="email"] {
padding: 0;
border: none;
border-radius: 0;
outline: none;
background: none;
}
#contact input[type="checkbox"] {
display: none;
}
#contact input[type="checkbox"]:checked + label {
background: #ff0000;
}
#contact textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
resize: none;
padding: 0;
border: 0;
outline: none;
background: transparent;
}
#contact button,
#contact input[type="submit"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
border: none;
outline: none;
background: transparent;
}

#top #contact .form_box input{
background: #fff;
display: block;
box-sizing:border-box;
height: 64px;
max-width: 624px;
width: 100%;
padding: 10px;
font-family: 'Noto Sans CJK JP', sans-serif;
font-size: 16px;
color: #585757;
}

#top #contact .form_box select {
width: 100%;
padding-right: 1em;
cursor: pointer;
text-indent: 0.01px;
text-overflow: ellipsis;
border: none;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
font-family: 'Noto Sans CJK JP', sans-serif;
font-size: 16px;
color: #585757;
}
#top #contact .form_box::-ms-expand {
display: none;
}
#top #contact .form_box select{
display: block;
box-sizing:border-box;
height: 64px;
width: 100%;
padding: 10px;
position: relative;
z-index: 1;
}

#top #contact .form_box .select{
border-radius: 32px;
background: #ffffff;
position: relative;
}

#top #contact .form_box .select::before{
content: '';
width: 20px;
height: 10px;
display: block;
background: url("../common/img/arrow_bottom01.png") no-repeat center;
background-size: contain;
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 30px;
}

#top #contact .form_box dl.textarea{
display: block;
padding: 17px 40px 10px;
}

#top #contact .form_box dl.textarea dt{
display: block;
width: 100%;
padding: 0 0 18px;
border-bottom: 2px solid #929292;
}
#top #contact .form_box dl.textarea dd{
width: 100%;
}
#top #contact .form_box textarea{
background: #fff;
display: block;
box-sizing:border-box;
height: 208px;
width: 100%;
padding: 10px;
font-family: 'Noto Sans CJK JP', sans-serif;
font-size: 16px;
color: #585757;
}

#top #contact .form_g .check{
padding: 20px 10px;
}
#top #contact .form_g .check label{
display: block;
}
#top #contact .form_g .check input{
display: none;
width: 100%;
}
#top #contact .form_g .check span.mwform-checkbox-field-text::before{
content: "";
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 16px;
height: 16px;
border: 1px solid #585757;
border-radius: 2px;
}
#top #contact .form_g .check span.mwform-checkbox-field-text{
padding-left: 28px;
position: relative;
display: inline-block;
width: 100%;
font-size: 16px;
letter-spacing: 0.15em;
cursor: pointer;
font-weight: 300;
}
#top #contact .form_g .check input:checked + span.mwform-checkbox-field-text::after {
content: "";
display: block;
position: absolute;
top: -4px;
left: 7px;
width: 7px;
height: 16px;
transform: rotate(40deg);
border-bottom: 2px solid #5AC893;
border-right: 2px solid #5AC893;
}


#top #contact .privacy_box{
margin: 0 0 80px;
text-align: center;
}
#top #contact .privacy_text {
display: block;
padding: 8px 10px 8px;
box-sizing: border-box;
width: 100%;
max-width: 520px;
background: #fff;
margin: 0 auto ;
}
#top #contact .privacy_text .inner_box{
overflow-y: scroll;
box-sizing: border-box;
padding: 33px 50px 0;
width: 100%;
height: 280px;
text-align: left;
font-size: 14px;
line-height: 24px;
}

#top #contact .privacy_text .inner_box::-webkit-scrollbar {
width: 4px;
}
#top #contact .privacy_text .inner_box::-webkit-scrollbar-track {
background-color: #fff;
}
#top #contact .privacy_text .inner_box::-webkit-scrollbar-thumb {
background-color: #919191;
border-radius: 6px;
}
#top #contact .privacy_text .inner_box p{
padding-bottom: 20px;
}
#top #contact .privacy_text .title {
font-size: 16px;
text-align: center;
margin-bottom: 28px;
}

#top #contact .form_g .submit_btn button,
#top #contact .form_g .submit_btn input[type="submit"]{
display: block;
width: 100%;
text-align: center;
border-radius: 60px;
font-size: 20px;
font-weight: 500;
letter-spacing: 0.15em;
padding: 44px 0 46px;
position: relative;
font-family: 'Noto Sans CJK JP', sans-serif;
color: #585757;
cursor: pointer;
z-index: 1;
}

#top #contact .form_g .submit_btn::after{
content: "";
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 66px;
background: url(../common/img/arrow_right01.png) no-repeat center bottom;
background-size: 100% auto;
width: 10px;
height: 22px;
}

#top #contact .form_g .submit_btn{
display: block;
max-width: 460px;
margin: 0 auto;
background: #fff;
border-radius: 60px;
position: relative;
transform: translateY(50%);
transition: .4s ease;
}
#top #contact .form_g .submit_btn:hover{
transform: translateY(45%);
}

#top #contact .contact_g p{
font-size: 16px;
line-height: 40px;
max-width: 800px;
margin: 0 auto 60px;
}
#top #contact .contact_g .time{
text-align: center;
font-size: 16px;
font-weight: 400;
line-height: 40px;
margin: 0 auto 69px;
}
#top #contact .contact_g .time span{
font-size: 24px;
font-weight: 500;
}
#top #contact .contact_g .contact_box{
max-width: 552px;
margin: 0 auto;
text-align: center;
}
#top #contact .contact_g .contact_box .box{
font-size: 24px;
font-weight: 500;
margin-bottom: 54px;
}

#top #contact .contact_g .contact_box .box span{
display: block;
font-weight: 400;
color: #fff;
background: #5AC893;
font-size: 16px;
padding: 9px 0 10px;
width: 200px;
margin: 0 auto 22px;
border-radius: 20px;
}
#top #contact .contact_g .contact_box .flex_box{
display: flex;
justify-content: space-between;
align-items: flex-start;
}
#top #contact .contact_g .contact_box .flex_box .box{
margin-bottom: 0;
}

#top #company {
padding: 122px 0 77px;
background: rgb(90 200 147 / 0.1);
}

#top #company .h2_g{
margin-bottom: 83px;
}
#top #company .h2_g h2{
margin-bottom: 72px;
}
#top #company .h2_g .logo{
max-width: 190px;
margin: 0 auto 68px;
}

#top #company .cnt_box{
max-width: 800px;
margin: 0 auto;
}

#top #company .cnt_box dl{
font-size: 16px;
line-height: 28px;
border-bottom: 1px solid #5CCD7E;
display: flex;
align-items: flex-start;
padding: 8px 0 6px 13px;
}

#top #company .cnt_box .map_btn{
display: block;
width: 100px;
background: #5CCD7E;
border-radius: 20px;
margin: 8px 0 9px;
}
#top #company .cnt_box .map_btn a{
display:block;
width: 100%;
font-size: 16px;
font-weight: 350;
padding: 3px 0 4px;
color: #fff;
text-align: center;
}
#top #company .cnt_box .map_btn a::after{
content: "";
display: inline-block;
background: url(../common/img/arrow_right03.png) no-repeat center bottom;
background-size: 100% auto;
width: 5px;
height: 11px;
margin: 0 0 0 14px;
}

#top #company .cnt_box .download_btn{
max-width: 360px;
width: 100%;
border: 2px solid #5CCD7E;
background: #fff;
border-radius: 8px;
}
#top #company .cnt_box .download_btn a{
display: block;
width: 100%;
color: #5CCD7E;
font-size: 20px;
font-weight: 500;
letter-spacing: 0.15em;
text-align: center;
padding: 48px 0 50px;
}
#top #company .cnt_box .download_btn a .icon{
display: inline-block;
width: 20px;
vertical-align: middle;
margin-left: 30px;
}

#top #company .cnt_box01{
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 98px;
}
#top #company .cnt_box01 .left_g,
#top #company .cnt_box01 .right_g{
max-width: 360px;
width: 49%;
}
#top #company .cnt_box01 .left_g dl{
line-height: 24px;
}
#top #company .cnt_box01 .left_g dl dt{
width: 54px;
margin-right: 17px;
}
#top #company .cnt_box01 .right_g dl {
display: block;
margin-bottom: 58px;
}
#top #company .cnt_box01 .right_g dl dt{
margin-bottom: 10px;
}

#top #company .cnt_box02 dl dt{
width: 90px;
margin-right: 17px;
}
#top #company .cnt_box02 dl dd.font_small{
font-size: 14px;
}




/*-----------------*/
#top .comming_pic{
position: relative;
overflow: hidden;
}

#top .comming_pic img.pc{
width: 1920px;
position: relative;
left: 50%;
transform: translateX(-50%);
}



/*----------
03.WORKS/TOPICS
----------*/
#works_topics .contents_in {
max-width: 1200px;
}

#works_topics #title_area {
margin: 72px 0 80px;
padding: 92px 0 102px;
background-color: #2CA158;
}

#works_topics #title_area h2 {
color: #fff;
font-size: 56px;
font-weight: 100;
letter-spacing: 0.1em;
text-align: center;
}

#works_topics #title_area h2 .ja {
margin-top: 46px;
display: block;
font-size: 32px;
font-weight: 400;
letter-spacing: 0.05em;
}

#works_topics #cnt_area01 {
margin-bottom: 38px;
}

#works_topics #cnt_area01 .first_txt {
margin-bottom: 72px;
line-height: 40px;
letter-spacing: 0.05em;
text-align: center;
}

#works_topics #cnt_area01 .tab_g {
margin-bottom: 129px;
align-items: center;
display: flex;
justify-content: center;
}

#works_topics #cnt_area01 .tab_g .item {
margin: 0 20px;
background-color: #626262;
border-radius: 20px;
width: 160px;
}

#works_topics #cnt_area01 .tab_g .item a{
display: inline-block;
width: 100%;
color: #fff;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}

#works_topics #cnt_area01 .tab_g .item.works {
background-color: #5AC893;
}

#works_topics #cnt_area01 .tab_g .item.topics {
background-color: #F9970C;
}

#works_topics #cnt_area01 .list_block {
margin: 0 -3.8%;
display: flex;
flex-wrap: wrap;
}

#works_topics #cnt_area01 .list_block .item {
position: relative;
margin: 0 3.5% 80px;
max-width: 340px;
width: 26.3%;
}

#works_topics #cnt_area01 .list_block .img_box {
position: relative;
margin-bottom: 29px;
}

#works_topics #cnt_area01 .list_block .cnt_img {
position: relative;
}

#works_topics #cnt_area01 .list_block .cnt_img::before {
content: "";
position: absolute;
background-color: #626262;
opacity: .6;
width: 100%;
height: 100%;
}

#works_topics #cnt_area01 .list_block .category {
position: absolute;
margin: auto;
bottom: 0;
left: 0;
transform: translateY(50%);
align-items: center;
display: flex;
justify-content: center;
color: #fff;
font-weight: 600;
letter-spacing: 0.15em;
width: 120px;
height: 50px;
}

#works_topics #cnt_area01 .list_block .title {
margin-bottom: 12px;
font-size: 28px;
font-weight: 500;
line-height: 40px;
letter-spacing: 0.1em;
}

#works_topics #cnt_area01 .list_block .title .num {
font-size: 16px;
line-height: 0;
letter-spacing: 0.1em;
}

#works_topics #cnt_area01 .list_block p {
line-height: 28px;
}

#works_topics #cnt_area01 .list_block .absolute_box {
width: 100%;
}

#works_topics #cnt_area01 .list_block .more_btn {
position: relative;
margin-top: 12px;
}

#works_topics #cnt_area01 .list_block .more_btn::before {
content: "";
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
display: block;
width: calc(100% - 140px);
height: 2px;
}

#works_topics #cnt_area01 .list_block .more_btn a {
position: relative;
margin-left: auto;
align-items: center;
display: flex;
justify-content: center;
border-radius: 20px;
font-weight: 500;
letter-spacing: 0.1em;
width: 160px;
height: 40px;
}

#works_topics #cnt_area01 .list_block .more_btn .icon {
position: absolute;
margin: auto;
right: 32px;
width: 17px;
}

#works_topics #cnt_area01 .list_block .item.works .category {
background-color: #5AC893;
}

#works_topics #cnt_area01 .list_block .item.works .more_btn::before {
background-color: #5AC893;
}

#works_topics #cnt_area01 .list_block .item.works .more_btn a {
border: 2px solid #5AC893;
color: #5AC893;
}

#works_topics #cnt_area01 .list_block .item.topics .category {
background-color: #F9970C;
}

#works_topics #cnt_area01 .list_block .item.topics .more_btn::before {
background-color: #F9970C;
}

#works_topics #cnt_area01 .list_block .item.topics .more_btn a {
border: 2px solid #F9970C;
color: #F9970C;
}

#works_topics #pagination {
background-color: #E8E8E8;
letter-spacing: 0.1em;
}

#works_topics #pagination .contents_in {
align-items: center;
display: flex;
justify-content: center;
}

#works_topics #pagination .wp-pagenavi{
padding: 42px 0 32px;
display: flex;
align-items: center;
justify-content: center;
}

#works_topics #pagination .previouspostslink,#works_topics #pagination .nextpostslink {
padding: 0;
margin: 0;
position: relative;
align-items: center;
display: flex;
justify-content: center;
background-color: #fff;
border: 1px solid #626262;
border-radius: 50%;
font-weight: 400;
width: 86px;
height: 86px;
cursor: pointer;
}

#works_topics #pagination .previouspostslink::before,#works_topics #pagination .nextpostslink::before {
content: "";
position: absolute;
margin: auto;
top: 0;
right: -8px;
bottom: 0;
background-color: #626262;
width: 20px;
height: 2px;
}

#works_topics #pagination .nextpostslink::before {
right: auto;
left: -8px;
}

#works_topics #pagination .previouspostslink{
margin-right: 62px;
}

#works_topics #pagination .nextpostslink{
margin-left: 62px;
}

#works_topics #pagination .wp-pagenavi a.page,#works_topics #pagination .wp-pagenavi span {
font-size: 20px;
font-weight: 400;
margin: 0 12px;
cursor: pointer;
border: none;
padding: 0;
}

/*----------
04.WORKS/TOPICS_detail
----------*/
#works_topics_detail #mainv_area {
margin: 72px 0 84px;
}

#works_topics_detail #mainv_area .contents_in {
position: relative;
max-width: 1020px;
}

#works_topics_detail #mainv_area .label {
position: absolute;
margin: auto;
right: 0;
bottom: -18px;
left: 0;
align-items: center;
display: flex;
justify-content: center;
color: #fff;
font-size: 24px;
font-weight: 100;
letter-spacing: 0.1em;
width: 200px;
height: 40px;
}

#works_topics_detail #cnt_area01 {
margin-bottom: 112px;
letter-spacing: 0.1em;
}

#works_topics_detail #cnt_area01 .contents_in {
max-width: 882px;
}

#works_topics_detail #cnt_area01 h2 {
margin-bottom: 64px;
font-size: 48px;
line-height: 62px;
text-align: center;
}

#works_topics_detail #cnt_area01 p {
margin-bottom: 28px;
line-height: 28px;
font-weight: 200;
}

#works_topics_detail #cnt_area01 .cnt_img,#works_topics_detail #cnt_area01 figure.wp-block-gallery {
margin: 60px auto 88px;
max-width: 680px;
width: 100%;
}

#works_topics_detail #cnt_area01 .blocks-gallery-grid .blocks-gallery-image, #works_topics_detail #cnt_area01 .blocks-gallery-grid .blocks-gallery-item, #works_topics_detail #cnt_area01 .wp-block-gallery .blocks-gallery-image, #works_topics_detail #cnt_area01 .wp-block-gallery .blocks-gallery-item{
margin-bottom: 0;
}

#works_topics_detail #cnt_area02 {
margin-bottom: 146px;
letter-spacing: 0.1em;
}

#works_topics_detail #cnt_area02 .contents_in {
padding-top: 24px;
border-top: 2px solid #626262;
display: flex;
justify-content: space-between;
max-width: 882px;
}

#works_topics_detail #cnt_area02 .left_g p {
font-weight: 350;
}

#works_topics_detail #cnt_area02 .left_g .sns_g {
margin-top: 15px;
align-items: center;
display: flex;
}

#works_topics_detail #cnt_area02 .left_g .sns_g .icon {
margin-right: 12px;
border-radius: 50%;
overflow: hidden;
width: 40px;
}

#works_topics_detail #cnt_area02 .right_g {
font-weight: 200;
line-height: 28px;
text-align: right;
}

#works_topics_detail #cnt_area03 {
padding: 52px 0 44px;
background-color: #E8E8E8;
}

#works_topics_detail #cnt_area03 .tab_g {
align-items: center;
display: flex;
justify-content: center;
}

#works_topics_detail #cnt_area03 .tab_g .item a {
align-items: center;
display: flex;
justify-content: center;
background-color: #fff;
border: 2px solid #626262;
border-radius: 20px;
color: #626262;
font-weight: 500;
letter-spacing: 0.1em;
width: 160px;
height: 40px;
}

#works_topics_detail #cnt_area03 .tab_g .item.active {
margin: 0 56px 0 64px;
}

#works_topics_detail #cnt_area03 .tab_g .item.active a {
border-radius: 32px;
width: 200px;
height: 64px;
}

#works_topics_detail #cnt_area03 .tab_g .item.works a {
border: 2px solid #5AC893;
color: #5AC893;
}

#works_topics_detail #cnt_area03 .tab_g .item.topics a {
border: 2px solid #F9970C;
color: #F9970C;
}

#works_topics_detail .wrap.works #mainv_area .label {
background-color: #5AC893;
}

#works_topics_detail .wrap.works #cnt_area01 h2 {
color: #5AC893;
}

#works_topics_detail .wrap.topics #mainv_area .label {
background-color: #F9970C;
}

#works_topics_detail .wrap.topics #cnt_area01 h2 {
color: #F9970C;
}


/*----------
05-01.confirm
----------*/

#contact{
margin: 72px 0 132px;
}

#contact #title_area{
padding: 98px 0 90px;
}

#contact #title_area h2 {
font-size: 56px;
font-weight: 100;
letter-spacing: 0.1em;
text-align: center;
}

#contact #title_area h2 .ja {
margin-top: 36px;
display: block;
font-size: 32px;
font-weight: 400;
line-height: 40px;
letter-spacing: 0.1em;
}

#contact #title_area h2 .red_text{
color: #f36c5e;
font-size: 25px;
}

#contact.confirm .form_g{
background: #E7E7E7;
padding: 36px 0 0;
margin-bottom: 97px;
}

#contact.confirm .form_g p.first_text{
display: block;
text-align: center;
margin-bottom: 53px;
line-height: 20px;
font-size: 16px;
}

#contact.confirm .form_g p.first_text span{
font-size: 12.8px;
}

#contact.confirm .form_box{
max-width: 880px;
padding: 48px 40px 0;
margin: 0 auto;
position: relative;
z-index: 1;
}
#contact.confirm .form_box::before{
content: '';
display: block;
width: 100%;
height: 880px;
border: 2px solid #fff;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}

#contact.confirm .form_box .required dt{
color: #D90202;
}

#contact.confirm .form_box dl{
position: relative;
display: flex;
justify-content: flex-start;
background: #fff;
font-size: 16px;
border-radius: 32px;
max-width: 800px;
margin: 0 0 42px;
padding: 0 26px 0 10px;
min-height: 64px;
}

#contact.confirm .form_box dl.select::after{
content: "";
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%) rotate(90deg);
right: 36px;
background: url(../common/img/arrow_right01.png) no-repeat center bottom;
background-size: 100% auto;
width: 10px;
height: 22px;
}

#contact.confirm .form_box dl dt{
width: 190px;
padding: 0 0 0 30px;
display: flex;
justify-content: flex-start;
align-items: center;
}

#contact.confirm .form_box dl dd{
width: calc(100% - 190px);
padding: 19px 15px;
box-sizing: border-box;
font-size: 16px;
line-height: 26px;
color: #585757;
align-items: center;
display: flex;
}

#contact.confirm .form_box dl.zip{
position: relative;
max-width: 530px;
}

#contact.confirm .form_box dl.zip dd .btn_zip{
display: none;
/*
display: flex;
justify-content: center;
align-items: center;
width: 130px;
height: 64px;
background: #919191;
border-radius: 0 32px 32px 0;
color: #fff;
position: absolute;
top: 0;
right: 0;
*/
}

#contact.confirm .form_box dl.textarea{
margin-bottom: 65px;
display: block;
padding: 22px 40px 10px;
}

#contact.confirm .form_box dl.textarea dt{
display: block;
width: 100%;
padding: 0 0 20px;
border-bottom: 2px solid #929292;
}

#contact.confirm .form_box dl.textarea dd{
padding: 10px 0 20px;
align-items: flex-start;
box-sizing:border-box;
width: 100%;
min-height: 208px;
line-height: 40px;
}

#contact.confirm .form_g .btn_g{
align-items: center;
display: flex;
justify-content: center;
}

#contact.confirm .form_g .btn_item{
display: block;
margin: 0 40px;
background: #fff;
border-radius: 40px;
position: relative;
transition: .4s ease;
transform: translateY(50%);
}

#contact.confirm .form_g .submit_btn{
background-color: #5AC893;
}

#contact.confirm .form_g .btn_item::after{
content: "";
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 26px;
background: url(../common/img/arrow_right03.png) no-repeat center bottom;
background-size: 100% auto;
width: 8px;
height: 18px;
}

#contact.confirm .form_g .correct_btn::after{
background-image: url(../common/img/arrow_right01.png);
right: auto;
left: 26px;
transform: translateY(-50%) scale(-1,1);
}

#contact.confirm .form_g .btn_item:hover{
transform: translateY(45%);
}
#contact.confirm .form_g .btn_item button,#contact.confirm .form_g .btn_item input[type="submit"]{
display: block;
width: 240px;
height: 80px;
text-align: center;
border-radius: 40px;
font-weight: 500;
font-size: 16px;
letter-spacing: 0.15em;
position: relative;
color: #585757;
cursor: pointer;
z-index: 1;
}

#contact.confirm .form_g .btn_item input[type="submit"]{
color: #fff;
}

#contact .contact_g p{
font-size: 16px;
line-height: 40px;
letter-spacing: 0.06em;
max-width: 800px;
margin: 0 auto 60px;
}

#contact .contact_g .time{
text-align: center;
font-size: 16px;
font-weight: 400;
line-height: 40px;
margin: 0 auto 69px;
}
#contact .contact_g .time span.title_text{
font-size: 16px;
}

#contact .contact_g .time span{
font-size: 24px;
font-weight: 500;
}

#contact .contact_g .contact_box{
max-width: 552px;
margin: 0 auto;
text-align: center;
}

#contact .contact_g .contact_box .box{
font-size: 24px;
font-weight: 500;
margin-bottom: 54px;
}

#contact .contact_g .contact_box .box span{
font-weight: 400;
color: #fff;
background: #5AC893;
font-size: 16px;
width: 200px;
height: 40px;
margin: 0 auto 22px;
border-radius: 20px;
align-items: center;
display: flex;
justify-content: center;
}

#contact .contact_g .contact_box .flex_box{
display: flex;
justify-content: space-between;
align-items: flex-start;
}

#contact .contact_g .contact_box .flex_box .box{
margin-bottom: 0;
}


/*----------
05-01.thanks
----------*/

#contact.thanks #title_area{
padding-bottom: 82px;
}

#contact.thanks p.first_text{
display: block;
text-align: center;
margin-bottom: 90px;
line-height: 40px;
font-size: 16px;
}