@charset "Shift_JIS";

/*---------------------------------------
2020.05  products/pump/check
----------------------------------------*/

#Contents{
overflow-x: hidden;
}

.wave{
font-weight: 700;
text-decoration: underline wavy rgba(129,212,250 ,1);
}

h2 span{
border-left: solid 10px rgba(33,150,243,1);
}

/*----------------------------
Branding
----------------------------*/

#Branding {
position: relative;
width: 100%;
min-height: 300px;
background: url(/products/pump/check/image/branding_check2.png) no-repeat, -moz-linear-gradient(left, #e7f7fd 0%, #c4eeed 100%);
background:url(/products/pump/check/image/branding_check2.png) no-repeat, -webkit-linear-gradient(left, #e7f7fd 0%, #c4eeed 100%);
background: url(/products/pump/check/image/branding_check2.png) no-repeat, -ms-linear-gradient(left, #e7f7fd 0%, #c4eeed 100%);
background-position: right 0px top -100px;
}

#Branding .Img{
position: absolute;
top: 10px;
right: 1%;
max-width: 100%;
z-index: 2;
}

#Branding .Img img{
width: 475px;
}

#BrandingImgStyle2{
position: absolute;
overflow: hidden;
width: 100%;
max-width: 700px;
top: 130px;
left: calc(50% - 483px);
text-align: left;
background: none;
font-size: 2.5rem;
font-weight: bold;
line-height: 140%;
z-index: 3;
}

#BrandingImgStyle2 .sub{
display: inline-block;
font-size: 70% !important;
}

#BrandingImgStyle2 .point{
display: inline-block;
color: rgba(33,150,243,1);
border-bottom: 5px dotted #fff;
}

.Branding_after{
z-index: 1;
width: 100%;
height: 150px;
margin-top: -30px;
background-image: url(/products/pump/check/image/wave01.svg);
background-repeat: no-repeat;
background-size: 100% auto;
}


/*----------------------------
Information
----------------------------*/

#Information{
font-size: 100%;
line-height: 170%;
padding-bottom: 80px;
}


/*----------------------------
Point
----------------------------*/

#Point{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
margin-bottom: 100px;
}

#Point img{
width: 100%;
max-width: 600px !important;
height: 70%! important;
margin: 20px auto;
}

.list_container3{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
width: 100%;
}

.list_container3 li{
position: relative;
width: 32%;
padding: 15px;
margin-right: 2%;
box-shadow:
0 0.5px 3.3px rgba(0, 0, 0, 0.021),
0 1.5px 8.1px rgba(0, 0, 0, 0.03),
0 3.6px 15.5px rgba(0, 0, 0, 0.039),
0 12px 30px rgba(0, 0, 0, 0.06)
;
border-radius: 5px;
}

.list_container3 li:last-child{
margin-right: 0;
}

.list_container3 h3{
font-size: 120%;
padding: 10px 0;
}

.list_container3 .title span{
color: #fff;
background-color: rgba(33,150,243,1);
border-radius: 50%;
padding: 1px 9px;
margin-right: 7px;
}

.list_container3 p{
font-size: 90%;
margin-bottom: 50px;
}

.list_container3 .period{
position: absolute;
bottom: -30px;
right: 20px;
font-weight: 700;
text-align: right;
}

.list_container3 .period span{
padding: 2px 5px;
margin-right: 5px;
background-color: rgba(128,222,234 ,1);
border-radius: 2px;
}


/*----------------------------
Attention
----------------------------*/

#Attention{
position: relative;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin: 0 -200% 100px;
padding:50px 200%;
background: -moz-linear-gradient(left, #e7f7fd 0%, #c4eeed 100%);
background: -webkit-linear-gradient(left, #e7f7fd 0%, #c4eeed 100%);
background: -ms-linear-gradient(left, #e7f7fd 0%, #c4eeed 100%);
}

#Attention p{
position: relative;
display: inline-block;
box-sizing: border-box;
width: calc(100% - 400px);
font-size: 120%;
font-weight: 700;
text-align: center;
padding: 30px 20px;
margin: auto;
background-color: #fff;
border-radius: 30px;
}

#Attention .button_inq:after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-left-color: #fff;
border-width: 30px;
margin-top: -30px;
}

#Attention .img{
width: 230px;
height: 250px;
padding: 20px;
}

#Attention .img img{
height: 100%;
}

#Attention .button_inq a{
display: inline-block;
width: 100%;
max-width: 350px;
color: #ffffff;
font-size: 90%;
text-decoration: none;
background-color: rgba(30,136,229 ,1)!important;
text-align: center;
margin: 20px;
padding: 20px;
box-shadow: 4px 4px 4px #f2f2f2;
border-radius: 10px;
background-image: url(/cmn_doc/image/jp/r1/icon/icon_link_right_white_hd.gif) !important;
background-repeat: no-repeat;
background-position: right center;
}
.button_inq a:hover{
opacity: 0.8;
box-shadow: 4px 4px 4px #f2f2f2;
border-radius: 10px;
}

.bubble{
z-index: 5;
position: absolute;
width: 300px;
left:37.5%;
top:-25px;
}
.bubble2{
z-index: 6;
position: absolute;
width: 300px;
top:265px;
right: 38%;
}

.bubble img,
.bubble2 img{
width: 300px;
}


/*----------------------------
WA
----------------------------*/

#WA{
margin-bottom: 80px;
}

#WA h2{
margin-bottom: 30px;
}

.feature_box{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
width: 100%;
}

.feature_box .img{
box-sizing: border-box;
width: 300px;
min-width: 250px;
margin: 60px 50px 0 30px;
}

.feature_box .img img{
width: 100%;
max-width: 100%;
height: auto;
}

.feature_box .txt{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: calc(100% - 300px);
}

.feature_box .txt .CatchCopy{
font-size: 110%;
font-weight: 700;
margin-bottom: 30px;
}

.feature_box .txt h3:before{
content: "";
border-left: solid 10px rgba(0,172,193 ,1);
margin-right: 8px;
}

.feature_box .txt .TextStyle1{
margin-bottom: 30px;
}


/*----------------------------
Inquiry
----------------------------*/

#Inquiry{
margin-bottom: 50px;
}

#Inquiry .button_inq2{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
width: 100%;
margin-bottom: 50px;
}

#Inquiry .button_inq2 li{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 45%;
margin: auto;
}

#Inquiry .button_inq2 a{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
max-width: 350px;
height: 50px;
background-image: url(/cmn_doc/image/jp/r1/icon/icon_link_right_white_hd.gif) !important;
background-repeat: no-repeat;
background-position: right center;
color: #ffffff;
font-size: 100%;
font-weight: 700;
text-decoration: none;
text-align: center;
padding: 20px;
box-shadow: 4px 4px 4px #f2f2f2;
border-radius: 10px;
margin-bottom: 40px;
}

.button_inq2 a:hover{
opacity: 0.8;
box-shadow: 4px 4px 4px #f2f2f2;
border-radius: 10px;
}

.button_inq2 .products a{
background-color: rgba(0,172,193 ,1)!important;
}

.button_inq2 .quote a{
background-color: rgba(30,136,229 ,1)!important;
}


/*----------------------------
fot responsive
----------------------------*/

.only-pc{display: block}
.only-tab{display: none}
.only-bsp{display: none}
.only-sp{display: none}
.only-sps{display: none}


@media screen and (min-width: 1600px){
#Branding .Img{
top: 25px;
right: 10%;
max-width: 100%;
z-index: 1;
}
#BrandingImgStyle2{
top: 130px;
font-size: 3rem;
}
}

@media screen and (max-width: 1024px){
#Branding {
background-position: right 0px top -120px;
}
#Branding .Img img{
width: 450px;
}
#BrandingImgStyle2{
top: 100px;
left: 30px;
font-size: 2.4rem;
}
}

@media screen and (max-width: 965px) {
#Branding {
min-height: 200px;
}
#Branding .Img{
top: 20px;
}
#Branding .Img img{
width: 330px;
}
#BrandingImgStyle2{
font-size: 2rem;
}
#Attention p{
width: calc(100% - 300px);
font-size: 100%;
font-weight: 700;
text-align: center;
padding: 30px 15px;
margin: auto;
background-color: #fff;
border-radius: 30px;
}
#Attention .img{
-ms-flex-preferred-size: 230px;
flex-basis: 230px;
width: 230px;
padding: 20px;
}
#Attention .button_inq a{
display: inline-block;
max-width: 250px;
color: #ffffff;
margin: 20px 0;
}
.bubble{
top:-50px;
left: 40%;
}
.bubble2{
top:305px;
right: 39.8%;
}
.bubble img{
width: 300px;
}
#Inquiry .button_inq2 a{
width: 100%;
max-width: 280px;
height: 50px;
font-size: 100%;
padding: 20px;
}
.only-tab{display: block}
}


@media screen and (max-width: 767px) {
#Branding {
min-height: 200px;
}
.ResponsiveBrandingImgStyle{
width: calc(100% + 15px);
max-width: 500px;
top: 0px;
}
#Branding .Img img{
width: 250px;
}
#BrandingImgStyle2{
top: 70px;
left: 40px;
box-sizing: border-box;
width: calc(100vw - 60px);
font-size: 1.6rem;
}
.Branding_after{
height: 100px;
margin-top: 0;
}
#Information{
font-size: 100%;
margin: 0;
}
.list_container3{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
}
.list_container3 li{
position: relative;
width: calc(100% - 30px);
padding: 15px;
margin-right: 0;
margin-bottom: 20px;
}
.list_container3 li:last-child{
margin-right: 0;
}
#Attention{
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
#Attention p{
width: calc(100% - 40px);
font-size: 100%;
}
#Attention .button_inq:after {
top: -10%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 30px;
margin-left: -30px;
}
#Attention .img{
width: calc(100% - 40px);
height: 200px;
text-align: center;
padding: 0 10px 40px;
}
#Attention .img img{
display: inline-block;
height: 100%;
}
.bubble{
top: -100px;
left: 42%;
}
.bubble2{
top:530px;
right: 39.5%;
}
.bubble img{
width: 250px;
}
.feature_box{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
}
.feature_box .img{
max-width: 300px;
margin: 0 auto 30px auto;
}
.feature_box .txt{
width: 100%;
}
.feature_box .txt .CatchCopy{
font-size: 110%;
font-weight: 700;
margin-bottom: 50px;
}
#Inquiry .button_inq2{
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#Inquiry .button_inq2 li{
width: 90%;
}
#Inquiry .button_inq2 a{
width: 100%;
max-width: 280px;
height: 50px;
font-size: 90%;
padding: 20px;
}
.only-bsp{display: none}
.only-sps{display: none}
}


@media screen and (max-width: 579px){
#Branding {
position: relative;
width: 100%;
min-height: 350px;
background-position: center top 5px;
}
#Branding .Img{
left: calc(50% - 115px);
}
#Branding .Img img{
width: 230px;
}
.ResponsiveBrandingImgStyle{
width: calc(100% - 30px);
top: 240px;
color: #363434 !important;
background-color: rgba(255,0,0,0)!important;
margin: 0 auto;
}
#BrandingImgStyle2{
top: 25px;
left: 20px;
width: calc(100vw - 30px);
font-size: 1.5rem;
padding: 0px !important;
text-align: center;
}
#Information{
font-size: 90%;
padding: 0px 0 60px;
}
#Attention p{
width: calc(100% - 20px);
font-size: 100%;
}
#Attention .button_inq a{
display: inline-block;
max-width: 80%;
}
.bubble2{
top:570px;
right: 39.5%;
}
.only-pc{display: none}
.only-tab{display: none}
.only-bsp{display: block}
}


@media screen and (max-width: 375px) {
#BrandingImgStyle2{
left: 30px;
}
.bubble{
top: -100px;
left: 43%;
}
.bubble2{
top:550px;
}
.feature_box .img img{
width: 90%;
height: auto;
}
.only-sp{display: block}
.only-sps{display: none}
}


@media screen and (max-width: 340px) {
#BrandingImgStyle2{
font-size: 1.3rem;
}
#Information{
font-size: 83%;
}
.bubble{
left: 41.5%;
}
.bubble2{
top:580px;
}
.only-sps{display: block}
}