@charset "UTF-8";

/* --------------------------------------
max-width 1160px（PC）
--------------------------------------*/

/* initial
--------------------------------------*/
#ui5530 a:hover {
opacity: 0.8;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=50)";
text-decoration: none;
}

#ui5530 a:hover img {
opacity: 0.8;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=50)";
}

.pc_view {
 display: block;
}

.sp_view {
display: none;
}

.center {
text-align: center;
}

sup {
font-size: 80%;
}

/* title
------------------------------------- */
#ui5530 .win_logo {
display: none;
}

/* mainVisual
------------------------------------- */
#ui5530 .mainVisual {
width: 100%;
margin: 0 auto;
position: relative;
}

#ui5530 .mainVisual img {
width: 100%;
display: block;
vertical-align: bottom;
}

#ui5530 .mv_text {
width: 38%;
position: absolute;
top: 34%;
left: 10%;
font-family: 'Yu Gothic UI', 'Segoe UI', Arial, sans-serif!important;
}

#ui5530 .mv_text .heading {
font-size: 3.6rem;
font-weight: bold;
color: #fff;
margin-bottom: 30px;
font-family: 'Yu Gothic UI', 'Segoe UI', Arial, sans-serif!important;
}

#ui5530 .mv_text .mv_desc {
width: 68%;
font-size: 1.6rem;
color: #fff;
margin-bottom: 30px;
font-family: 'Yu Gothic UI', 'Segoe UI', Arial, sans-serif!important;
}

#ui5530 .watch_button {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 25%;
padding: 10px;
border: 1px solid #fff;
border-radius: 6px;
font-size: 1.6rem;
color: #fff;
text-decoration: none;
font-family: 'Yu Gothic UI', 'Segoe UI', Arial, sans-serif!important;
}

#ui5530 .watch_button img {
display: block;
margin-right: 10px;
padding: 0px;
background: transparent;
cursor: pointer;
width: fit-content;
text-decoration: none;
}

/* securityIntroArea
------------------------------------- */
#ui5530 .securityIntroArea {
background-color: #000d2a;
}

#ui5530 .securityIntroArea .mob_img {
display: none;
}

#ui5530 .securityIntroArea .desk_img {
display: block;
width: 100%;
}

#ui5530 .securityIntroArea .container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
width: 1160px;
padding: 100px 0;
margin: 0 auto;
}

#ui5530 .securityIntroArea .container .left_wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-end;
width: 50%;
justify-content: center;
padding-right: 25px;
}

#ui5530 .securityIntroArea .container .dlLink {
display: flex;
align-items: center;
font-size: 2.6rem;
font-weight: 600;
color: #fff;
text-decoration: none;
font-family: 'Yu Gothic UI', 'Segoe UI', Arial, sans-serif!important;
}

#ui5530 .securityIntroArea .container .dlLink strong {
flex: none;
display: inline-flex;
width: auto;
color: #60cdff;
}

#ui5530 .securityIntroArea .container .dlLink img {
margin-left: 10px;
}

#ui5530 .securityIntroArea .container div > h2 {
font-size: 3.6rem;
font-weight: bold;
margin-bottom: 30px;
color: #fff;
font-family: 'Yu Gothic UI', 'Segoe UI', Arial, sans-serif!important;
}

#ui5530 .securityIntroArea .container .left_wrapper div p,
#ui5530 .securityIntroArea .container .right_wrapper div p {
font-size: 2.4rem;
margin-bottom: 30px;
color: #fff;
font-family: 'Yu Gothic UI', 'Segoe UI', Arial, sans-serif!important;
}

#ui5530 .securityIntroArea .container .right_wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 50%;
justify-content: center;
padding-left: 25px;
}

#ui5530 .securityIntroArea .container .tw-prose-lg {
font-size: 1.8rem;
line-height: 1.5;
font-family: 'Yu Gothic UI', 'Segoe UI', Arial, sans-serif!important;
}

#ui5530 .securityIntroArea .watch_button {
width: 32%;
}

#ui5530 .securityIntroArea .heading_container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
width: 1160px;
padding-top: 100px;
margin: 0 auto;
}

#ui5530 .securityIntroArea .heading_container div > h2 {
font-size: 3.6rem;
font-weight: bold;
color: #fff;
font-family: 'Yu Gothic UI', 'Segoe UI', Arial, sans-serif!important;
}

#ui5530 .securityIntroArea .container .list_text {
list-style-type: disc;
list-style-position: inside;
font-size: 1.6rem;
line-height: 1.5;
text-align: left;
color: #fff;
margin-bottom: 40px;
}

#ui5530 .securityIntroArea .ankHeading {
font-size: 3.6rem;
text-align: center;
color: #fff;
background: linear-gradient(0deg, rgba(8,57,102,1) 0%, rgba(13,99,152,1) 100%);
line-height: 1.8;
}

#ui5530 .securityIntroArea .ankHeading a {
position: relative;
text-decoration: none;
color: #fff;
}

#ui5530 .securityIntroArea .ankHeading a:after {
position: absolute;
right: -40px;
top: 40%;
content: "";
display: block;
width: 10px;
height: 10px;
border-top: 4px solid #fff;
border-right: 4px solid #fff;
transform: rotate(-45deg);
}

/* campaignArea01
------------------------------------- */
#ui5530 .campaignArea01 {
background-color: #000d2a;
}

#ui5530 .campaignArea01 h2 {
font-size: 3.6rem;
text-align: center;
color: #fff;
background: linear-gradient(0deg, rgba(8,57,102,1) 0%, rgba(13,99,152,1) 100%);
margin-bottom: 35px;
line-height: 1.8;
}

#ui5530 .campaignArea01inner {
width: 1160px;
margin: 0 auto;
padding-bottom: 35px;
background-color: #0d6397;
}

#ui5530 .productsArea {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px 10px;
}

#ui5530 .productsArea .product {
width: 32%;
margin-bottom: 20px;
border: 1px solid #cccccc;
border-radius: 3px;
padding: 15px 10px;
background-color: #fff;
}

#ui5530 .productsArea .space {
width: 32%;
border: none;
background-color: #0d6397;
}

#ui5530 .productsArea .test {
display: flex;
}

#ui5530 .productsArea .productName {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 10px;
}

#ui5530 .productsArea .typeName {
margin-bottom: 15px;
font-size: 1.8rem;
font-weight: bold;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}

#ui5530 .productsArea .productBlock {
display: flex;
align-items: end;
min-height: 169px;
margin-bottom: 15px;
}

#ui5530 .productsArea .product .productBlock .office {
position: absolute;
right: 5px;
bottom: 0;
display: inline-block;
padding: 2px;
border: 1px solid #2074C2;
color: #2074C2;
font-size: 85%;
width: 90px;
text-align: center;
margin-bottom: 3px;
}

#ui5530 .productsArea .productBuy {
margin-left: 10px;
}

#ui5530 .productsArea .productPrice {
color: #c00;
}

#ui5530 .productsArea .productPrice span {
display: inline-block;
font-size: 3rem;
line-height: 1.3;
}

#ui5530 .productsArea .product .spec {
background-color: #eee;
padding: 5px 10px;
}

#ui5530 .productsArea .estimate {
display: flex;
align-items: center;
justify-content: center;
position: relative;
background-color: #CC0000;
margin-top: 10px;
border-radius: 3px;
padding: 13px 27px;
color: #fff;
text-decoration: none;
font-size: 1.2rem;
width: 100%;
height: 40px;
}

#ui5530 .productsArea .estimate::before {
font-family: 'FontAwesome';
content: "\f105";
font-size: 2rem;
position: absolute;
top: 49%;
right: 10px;
transform: translateY(-50%);
}

#ui5530 .productsArea .estimate:hover{
opacity: 0.8;
}

#ui5530 .productsArea .productDescription {
align-items: flex-end;
}

#ui5530 .productsArea img.cp,
#ui5530 .productsArea .balloon {
max-width: 100%;
}

#ui5530 .productsArea .balloon {
position: relative;
display: inline-block;
margin: 1.5em 0 1.5em 20px;
padding: 7px 10px;
min-width: 120px;
color: #555;
font-size: 1.6rem;
font-weight:bold;
background: #e0edff;
}

#ui5530 .productsArea .balloon:before {
content: "";
position: absolute;
top: 50%;
left: -30px;
margin-top: -10px;
border: 10px solid transparent;
border-right: 20px solid #e0edff;
}

#ui5530 .ml10 {
position: relative;
margin-left: 10px;
}

#ui5530 .barginBanner {
width: 1020px;
margin: 0 auto 25px;
background-color: #ccc;
}

#ui5530 .salesCounter {
width: 1020px;
margin: 0 auto;
padding: 20px 0;
background-color: #000d2a;
color: #fff;
text-align: center;
}

#ui5530 .salesCounterHeading {
font-size: 2.8rem;
}

#ui5530 .blueText {
color: #00b0f0;
}

#ui5530 .telNumber,
#ui5530 .receptionHours,
#ui5530 .mailto  {
font-size: 2.4rem;
}

/* makeAnImpact
------------------------------------- */
#ui5530 .makeAnImpact {
background-color: #000d2a;
padding-top: 100px;
}

#ui5530 .makeAnImpact .makeAnImpactInner {
width: 1160px;
margin: 0 auto;
padding: 60px 0;
border-top: 1px solid #fff;
font-family: 'Yu Gothic UI', 'Segoe UI', Arial, sans-serif!important;
}

#ui5530 .makeAnImpact h4 {
margin-bottom: 30px;
font-size: 3.6rem;
line-height: 1.5;
color: #fff;
}

#ui5530 .makeAnImpact p {
margin-bottom: 10px;
font-size: 1.6rem;
line-height: 1.5;
color: #fff;
}

#ui5530 .makeAnImpact a {
color: #b9d4e4;
}

/* subFooter
------------------------------------- */
#ui5530 .subFooter {
background-color: #171717;
color: #fff;
}

#ui5530 .subFooter .subFooterInner {
width: 1160px;
margin: 0 auto;
padding: 60px 0 35px;
}

#ui5530 .subFooter .social_media img {
margin-right: 0.5rem;
margin-bottom: 1rem;
}

#ui5530 .subFooter .subFooterInner p {
font-size: 1.6rem;
}

#ui5530 .subFooter .subFooterInner a {
color: #fff;
}

#ui5530 .subFooter .subFooterInner a:hover {
color: #fff;
text-decoration: none;
}

#ui5530 .subFooter .notesText {
font-size: 1.6rem;
font-family: 'Yu Gothic UI', 'Segoe UI', Arial, sans-serif!important;
}

#ui5530 .subFooter .notesText li {
margin: 4px 0;
}


@media screen and (max-width: 767px) {

.pc_view {
display: none;
}

.sp_view {
display: inherit;
}

/* title
------------------------------------- */
#ui5530 .subHeader {
padding: 15px 30px;
background: #000d2a;
text-align: right;
}
#ui5530 .subHeader .win_logo {
display: inline-block;
width: 40%;
}

/* mainVisual
------------------------------------- */
#ui5530 .mv_text .heading {
font-size: 2.4rem;
}

#ui5530 .mv_text {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background-color: #000d2a;
width: 100%;
position: initial;
padding: 62px 15px 0;
}

#ui5530 .mv_text .mv_desc {
width: 90%;
}

#ui5530 .watch_button {
width: 30%;
background: transparent;
color: #fff;
font-size: 15px;
border: none;
cursor: pointer;
margin: 0 auto 0 0;
}

#ui5530 .watch_button img {
width: 9px;
height: 12px;
margin-right: 6px;
padding: 0px;
}

/* securityIntroArea
------------------------------------- */
#ui5530 .securityIntroArea {
padding-top: 62px;
}

#ui5530 .securityIntroArea .reverse {
flex-direction: column-reverse;
}

#ui5530 .securityIntroArea .container {
width: 94%;
margin: 0 auto;
padding: 0 0 50px 0;
}

#ui5530 .securityIntroArea .container .left_wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
text-align: center;
padding: 0;
}

#ui5530 .securityIntroArea .container .dlLink {
display: block;
text-align: center;
font-size: 2.2rem;
}

#ui5530 .securityIntroArea .container .dlLink img {
width: 10%;
margin-left: 5px;
}

#ui5530 .securityIntroArea .container .left_wrapper .body_mod,
#ui5530 .securityIntroArea .container .right_wrapper .body_mod {
padding: 62px 15px 0;
}

#ui5530 .securityIntroArea .container .left_wrapper div h2,
#ui5530 .securityIntroArea .container .right_wrapper div h2 {
font-size: 2.4rem;
}

#ui5530 .securityIntroArea .container .left_wrapper div p,
#ui5530 .securityIntroArea .container .right_wrapper div p {
font-size: 1.6rem;
margin-bottom: 30px;
color: #fff;
}

#ui5530 .securityIntroArea .container .right_wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
text-align: center;
padding: 0;
}

#ui5530 .securityIntroArea .heading_container {
width: 94%;
margin: 0 auto;
padding: 0 0 50px 0;
}

#ui5530 .securityIntroArea .heading_container .body_mod {
padding: 0 15px;
}

#ui5530 .securityIntroArea .heading_container div > h2 {
font-size: 2.0rem;
}

#ui5530 .securityIntroArea .ankHeading {
font-size: 1.4rem !important;
font-weight: bold;
padding: 4%;
line-height: 1.4;
margin: 20px 0 0 0;
}

#ui5530 .securityIntroArea .ankHeading a {
margin-right: 6%;
}

#ui5530 .securityIntroArea .ankHeading a:after {
right: -8%;
top: 30%;
}

/* campaignArea01
------------------------------------- */
#ui5530 .campaignArea01inner {
width: 94%;
margin: 20px auto 0;
}

#ui5530 .campaignArea01 h2 {
font-size: 2.0rem;
font-weight: bold;
padding: 4%;
margin-bottom: 20px;
line-height: 1.4;
}

#ui5530 .productsArea,
#ui5530 .productsArea .productBlock {
flex-direction: column;
align-items: center;
}

#ui5530 .productsArea{
padding: 20px 10px 0;
}

#ui5530 .productsArea .product {
width: 100%;
margin: 0 auto;
margin-bottom: 20px;
}

#ui5530 .productsArea .product.space {
display: none;
}

#ui5530 .productsArea .productBuy {
margin-left: 0;
text-align: center;
}

#ui5530 .productsArea .product .spec {
background-color: #eee;
padding: 5px 10px;
}

#ui5530 .productsArea .balloon {
max-width: 100%;
margin: 1.5em 0 1.5em 00px;
}

#ui5530 .productsArea .balloon:before {
content: "";
position: absolute;
top: -10px;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
}

#ui5530 .mb20 {
margin-bottom: 20px;
}

#ui5530 .barginBanner {
width: 100%;
margin: 0 auto 20px;
padding: 0 10px;
background-color: #0d6397;
}

#ui5530 .salesCounter {
width: 95%;
padding: 20px 10px;
}

#ui5530 .salesCounterHeading {
font-size: 1.8rem;
}

#ui5530 .telNumber,
#ui5530 .receptionHours {
font-size: 1.6rem;
}

#ui5530 .mailto {
font-size: 1.2rem;
}

/* makeAnImpact
------------------------------------- */
#ui5530 .makeAnImpact {
padding-top: 65px;
}

#ui5530 .makeAnImpact .makeAnImpactInner {
width: 94%;
padding: 65px 15px;
}

#ui5530 .makeAnImpact h4 {
font-size: 2.8rem;
}

#ui5530 .makeAnImpact p {
font-size: 1.6rem;
}

/* subFooter
------------------------------------- */
#ui5530 .subFooter .subFooterInner {
width: 94%;
padding: 65px 15px;
}

}