@charset "UTF-8";


/* common
------------------------------------------------------------------------*/
figure{
position: relative;
overflow: hidden;
height: fit-content;
}
.txt-L{
text-align: left;
}
.txt-R{
text-align: right;
}
.txt-C{
text-align: center;
}


#main_Wrap {
margin:0 auto ;
}
#main_Wrap figcaption {
bottom: 23.4%;
right: 5px;
}


.intro {
width: 94%;
max-width: 1200px;
margin: -30px auto 0;
text-align: center;
}
.intro .page-ttl {
color: #8eabbb;
font-size: clamp(24px, calc(-22.22222222222222px + 6.018518518518518vw), 50px);
font-family: 'Cinzel', serif !important;
font-weight: 400;
font-style: normal;
letter-spacing: 2px;
margin:0 auto 60px;
}
.intro p {
color: #46626f;
font-size: clamp(17px, 2.1vw, 21px);
line-height: 1.8;
text-align: center;
margin-bottom: 60px;
}
.intro p + p {
color: #333;
font-size: clamp(14px, 1.58vw, 16px);
/*margin: 30px auto 60px;*/
}

.f-50{font-size: 50%;}
.f-60{font-size: 60%;}
.f-70{font-size: 70%;}
.f-80{font-size: 80%;}
.f-90{font-size: 90%;}
.f-110{font-size: 110%;}
.f-120{font-size: 120%;}
.f-130{font-size: 130%;}
.f-140{font-size: 140%;}
.f-150{font-size: 150%;}
.f-160{font-size: 160%;}
.f-170{font-size: 170%;}
.f-180{font-size: 180%;}
.f-190{font-size: 190%;}
.f-200{font-size: 200%;}
.f-210{font-size: 210%;}
.f-220{font-size: 220%;}
.f-230{font-size: 230%;}
.f-240{font-size: 240%;}

sup {
font-size: 10px;
letter-spacing: 0;
vertical-align: super;
}

.align_L { text-align: left;}
.align_C { text-align: center;}
.align_R { text-align: right;}
.f-palt {font-feature-settings: "palt";}

.clearfix:after {
content: "";
display: block;
clear: both;
} 
.clearfix:before {
content: "";
display: block;
clear: both;
} 
.clearfix {
display: block;
}


.in-box {
max-width: 1000px;
width: 100%;
margin: 0 auto;
position: relative;
text-align: left;
box-sizing: border-box;
}

.con_box h3 {
font-size: 23px;
color: #8eabbb;
padding-bottom: 14px;
letter-spacing: 0.09em;
line-height: 1.4;
font-feature-settings: "palt";
}

.con_box h4 {
font-size: 20px;
color: #8eabbb;
padding-bottom: 14px;
letter-spacing: 0.09em;
line-height: 1.4;
font-feature-settings: "palt";
}

.con_box h4 span {
font-size: 12px;
color: #000;
padding-left: 20px;
}

.con_box h4 span a {
color: #8eabbb;
}

.con_box h5 {
font-size: 18px;
margin-bottom: 10px;
}

.column2 ul li .notes_list li {
width: 100% !important;
font-size: 12px;
line-height: 1.5;
margin-right: 0 !important;
}

.con_box p {
font-size: 14px !important;
padding-bottom: 15px;
letter-spacing: 0.06em;
font-feature-settings: "palt";
line-height: 1.8;
}

.con_box p.line-h {
line-height: 1.2 !important;
text-indent: 1em;
padding-left: -1em;
}

.con_box p.ta_j {
text-align: justify;
}

.sm_txt {
font-size: 12px !important;
padding-left: 0 !important;
margin-top: 6px;
}

.con_box p.sm_txt {
font-size: 12px !important;
padding-left: 0 !important;
}

.cap_L_top {
left: 5px;
text-align: left;
bottom: auto;
top: 10px;
font-size: 13px;
letter-spacing: 0.1em;
font-feature-settings: "palt";
}

.cap_L_top02 {
left: 0px;
text-align: left;
bottom: auto;
top: -13px;
font-size: 13px;
letter-spacing: 0.1em;
font-feature-settings: "palt";
}

.column1 {
margin-bottom: 60px;
}

.column1.cat_last {
margin-bottom: 100px;
}

.column1 .notes_list {
margin-top: 10px;
}

.column1 .notes_list li {
width: 100%;
font-size: 12px;
line-height: 1.5;
}

.column2 {
margin-bottom: 60px;
}
.in-box .bg_box .column2.pt45{
margin: 30px 0;
padding: 0;
}

.column2.moving {
margin-bottom: 20px;
}

.column2.cat_last {
margin-bottom: 100px;
}

.column2 ul.flex {
justify-content: space-between;
}

.column2 ul li {
width: calc((100% - 4%) / 2);
max-width: 480px;
}
.in-box .bg_box .column2 ul li:first-child {
width: 44.5%;
max-width: unset;
}
.in-box .bg_box .column2 ul li:last-child {
width: 51.3%;
max-width: unset;
}

.column2 ul li.flex {
    flex-wrap: wrap;
}
.column2 ul li.flex h4 {
    width: 100%;
}
.column2 ul li.flex p {
    width: 50%;
    margin: 0 4% 0 0;
}
.column2 ul li.flex figure {
    width: 46%;
    max-width: 220px;
}


.column2 p.Txt_p {
font-size: 14px !important;
letter-spacing: 0.05em;
padding-top: 6px;
}

.column2.moving ul li:nth-child(1) {
width: 100%;
max-width: 760px;
margin-right: 3.90625%;
}

.column2.moving ul li:nth-child(2) {
width: 100%;
max-width: 228px;
}

.column3 {
margin-bottom: 60px;
}

.column3 ul.flex {
justify-content: space-between;
}

.column3 ul li {
width: calc((100% - 4%) / 3);
max-width: 324px;
}

.column3.restroom ul li {
width: 100%;
max-width: 324px;
}

.con_box.camera ul {
gap: inherit;
}

.column3 ul li p.Txt_p {
font-size: 13px !important;
letter-spacing: 0.05em;
padding-top: 6px;
}

.column3.restroom ul li p sup {
vertical-align: super;
font-size: 10px;
}

.column3 ul li h4 {
letter-spacing: 0.05em;
padding-top: 20px;
}

.column4 {
margin-bottom: 60px;
}

.column4 ul.flex {
justify-content: space-between;
}

.column4 ul li {
width: calc((100% - 6.4%) / 4);
max-width: 234px;
}

.column4 ul li p.Txt_p {
font-size: 13px !important;
letter-spacing: 0.05em;
padding-top: 6px;
}

.column4 ul li h4 {
letter-spacing: 0.05em;
padding-top: 20px;
}


/* 個別 */

.sec01 .flex .flex01 figure {
max-width: 250px;
margin-bottom: 20px;
}

.sec01 .flex .flex01 h4:nth-of-type(2) {
margin-top: 30px;
}

.sec01 .flex .flex01 h5 {
font-size: 15px;
}

.column2 .flex .flex01 h5 {
font-size: 15px;
padding-top: 14px;
margin-bottom: 6px;
}

.sec01 .flex .flex02 .sm_txt {
margin-top: 10px;
letter-spacing: 0rem;
}


.sec02 .flex li p {
min-height: 6.2rem;
}

.flex.algn-spe {
justify-content: flex-start;
flex-direction: column;
}

.flex.algn-spe div {
min-height: 157px;
}

.sec03 ul.flex li:nth-child(1) {
width: 33%;
margin-right: 3%;
}

.sec03 ul.flex li:nth-child(2) {
width: 64%;
max-width: none;
}

.sec04 .txt_n {
min-height: 7.25rem;
}

#all_Wrap .Txt_note {
font-size: 12px !important;
letter-spacing: 0;
padding-top: 6px;
}

.pt30 {
padding-top: 30px;
}
.pt45 {
padding-top: 45px;
}

.pt90 {
padding-top: 90px;
}

.em8 {
padding-top: 8em;
}

.mark {
font-size: 10px;
position: relative;
top: -5px;
}


.layout04 ul.flex li:nth-child(1) {
width: 66%;
margin-right: 3%;
max-width: none;
}

.layout04 ul.flex li:nth-child(2) {
width: 31%;
}

.bouhan_sensor ul li.txt {
width: 64%;
max-width: 64%;
}

.bouhan_sensor ul li h4 {
padding-top: 0;
}


.sec_btm {
    font-feature-settings: "palt";
}
/* .sec_btm h4 {
margin-bottom: 20px;
} */
.sec_btm.con_box p {
    line-height: 1.4;
}
.sec_btm .Txt_note {
    font-size: 11px!important;
    padding-top: 5px;
}

.sec_btm .ttl_flex {
display: flex;
align-items: center;
/*margin-bottom: 7px;*/
}
.sec_btm p {
padding-bottom: 0;
}
.sec_btm .door-box {
    width: 31.2%;
    padding: 0 20px;
}
.sec_btm .txt-box {
    width: 34.4%;
}
.sec_btm .txt-box .txt-flex {
    align-items: flex-start;
    gap: 20px;
}
.sec_btm .ttl_flex .ttl_flex01 p {
padding-bottom: 0;
background-color: #8eabbb;
color: #fff;
font-size: 18px!important;
margin-right: 10px;
line-height: 1.5;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
letter-spacing: 0;
}
.sec_btm .ttl_flex .ttl_flex02 h5 {
color: #8eabbb;
font-size: 17px;
margin-bottom: 0;
line-height: 1.3;
padding-top: 0;
}
.sec_btm .ttl_flex .ttl_flex02 span {
color: #000;
font-size: 14px;
margin-bottom: 10px;
font-size: 16px !important;
}

.sec_btm .txt-box [class^="txt-"] {
    margin-bottom: 20px;
}
.sec_btm .txt-flex > .flex {
    gap: 10px;
}
.sec_btm .txt-flex > .flex div { width: 70%; }
.sec_btm .txt-flex > .flex figure { width: 30%; height:fit-content; }
.sec_btm .txt-1 .subttl {
    color: #fff;
    background-color: #8eabbb;
    padding: 5px 10px;
    margin-bottom: 5px;
    margin-top: 10px;
}
.sec_btm .txt-4.txt-flex > .flex div {
    width: 100%;
}
.sec_btm .txt-5.txt-flex > .flex div { width: 60%; }
.sec_btm .txt-5.txt-flex > .flex div:last-of-type { width: 40%; }
.sec_btm .txt-5.txt-flex > .flex div:last-of-type figure { width: 100%; }



/*.con_box h3.freeid_ttl {
position: relative;
margin-bottom: 0;
}
#content_Wrap .con_box h3 .freeid {
width: 150px;
max-width: 100%;
position: absolute;
bottom: 0;
right: 0;
}*/
/*.con_box .bg_box {
background: #fafbfd;
border: 1px solid #003a5e;
padding: 20px;
}*/
.con_box .bg_box > .flex{
    border-bottom: 1px solid;
}
.con_box .bg_box > .flex h4{
display: flex;
align-items: center;
}
.con_box .bg_box > .flex h4 span {
font-size: 70%;
color: #fff;
background: #8eabbb;
margin-right: 0.5em;
padding: 0.30em 0.3em 0.4em 0.45em;
line-height: 1;
vertical-align: middle;
}
.con_box .bg_box > .flex p{
letter-spacing: 0;
}

.device.pc {
width: 300px;
max-width: 40%;
margin: 0 20px;
}
.speed.pc {
width: 500px;
max-width: 100%;
margin-top: 0;
}
.tebra {
position: relative;
background: #2b585e;
padding: 1em;
}
.tebra h3 {
color: #beac83;
font-size: clamp(18px,1.640625vw,21px);
}
.tebra h3 span{
display: inline-block;
text-align: center;
font-size: 70%;
color: #0f061f;
background: #beac83;
margin-right: 0.5em;
padding: 0.15em 0.3em 0.15em 0.4em;
}
.tebra .sm_txt {
color: #fff;
padding-bottom: 0;
margin-top: 0;
}
.tebra h5 {
position: absolute;
top: 0;
right: 0;
width: 50%;
max-width: 300px;
opacity: 0.5;
}

/*=========================================================================================================
tab
=========================================================================================================*/
@media screen and (min-width: 768px) and (max-width: 1024px) {






}

/*=========================================================================================================
sp
=========================================================================================================*/
@media screen and (max-width: 767px) {

.intro {
margin: 20px auto 0;
}
.intro .page-ttl {
margin:0 auto 40px;
}
.intro p {
margin-bottom: 50px;
}
.intro p + p {
font-size: clamp(13px, 1.58vw, 16px);
/*margin: 20px auto 50px;*/
}
.contents {
padding: 0;
}


.con_box h4 {
font-size: 16px;
padding-bottom: 12px;
line-height: 1.4;
}

.con_box h4.font_s17 {
font-size: 16px;
}

.con_box h4.font_s14 {
font-size: 15.6px;
}

.con_box h4 span {
padding-left: 0px;
}

.con_box p {
letter-spacing: 0;
}


.column1 {
margin-bottom: 40px;
}
/*.column1.security {
margin-bottom: 10px;
}*/

.column1.cat_last {
margin-bottom: 60px;
}

.column2 {
margin-bottom: 40px;
}

.column2.cat_last {
margin-bottom: 60px;
}

.column2.cat_last>ul>li:not(:last-child) {
margin-bottom: 0;
}

.column2 ul.flex {
justify-content: space-between;
flex-wrap: wrap;
}

.column2 ul li {
width: 100%;
max-width: none;
}
.in-box .bg_box .column2 ul li:first-child {
width: 100%;
}
.in-box .bg_box .column2 ul li:last-child {
width: 100%;
}

.column2 ul.line1 li {
width: 49%;
max-width: 490px;
}

.column2 ul li:not(:last-child) {
margin-bottom: 40px;
}

.column2 ul.line1 li:not(:last-child) {
margin-bottom: 0;
}

.column2.mg li:not(:last-child) {
margin-bottom: 40px;
}

.column2.secblock ul li:not(:last-child) {
margin-bottom: 10px;
}

.column2.secblock ul li.flex01 {
margin-bottom: 20px;
}

.column2.secblock ul li.flex01.mg20 {
margin-bottom: 20px !important;
}

.column2.secblock ul li.flex01.mg10 {
margin-bottom: 10px;
}

.column2.secblock ul li#greening:not(:last-child) {
margin-bottom: 20px;
}

.column2 ul li p.Txt_p {
font-size: 14px !important;
letter-spacing: 0.05em;
padding-top: 6px;
}

.column2 p.Txt_p {
font-size: 14px !important;
letter-spacing: 0.05em;
padding-top: 6px;
}

.column2.moving ul li:nth-child(1) {
width: 100%;
max-width: 100%;
margin-right: 0;
margin-bottom: 0;
}

.column2.moving ul li:nth-child(2) {
width: 100%;
max-width: 100%;
}

.column3 {
margin-bottom: 40px;
}

.column3 ul.flex {
justify-content: space-between;
flex-wrap: wrap;
}

.column3 ul li {
width: 100%;
max-width: 100%;
}

.column3 ul.line1 li {
margin: 14px auto;
}

.column3.restroom ul li {
width: 100%;
max-width: 100%;
}

.column3 ul.line1 li {
width: calc((100% - 3%) / 3);
}


.column3 ul li:not(:last-child) {
margin-bottom: 30px;
}

.column3 ul.line1 li:not(:last-child) {
margin-bottom: 10px;
}

.column4 {
margin-bottom: 40px;
}

.column4 ul.flex {
justify-content: space-between;
flex-wrap: wrap;
}

.column4 ul.line1 {
justify-content: space-between;
/* align-items: flex-start; */
flex-wrap: wrap;
}

.column4 ul li {
width: 100%;
max-width: 100%;
}

.column4 ul.line1 li {
width: 49%;
max-width: 100%;
display: flex;
flex-direction: column;
}

.column4 ul.line1 li p {
letter-spacing: 0.1em;
}

.column4 ul.line1 li figure {
margin-top: auto;
}

.bouhan_sensor.column3 ul.line1 li {
width: 46%;
margin: 0;
}

.bouhan_sensor.column3 ul.line1 li.txt {
width: 50%;
}


.con_box.camera ul.flex {
    flex-direction: column;
}
.con_box.camera ul li {
    width: 100%;
    max-width: 100%;
}
.con_box.camera ul li:nth-child(1) {
    margin-bottom: 0;
}


    .sec_btm {
    }
    .sec_btm > article.flex {
        flex-direction: column;
        align-items: center;
    }
    .sec_btm.con_box p {
        line-height: 1.8;
    }
    .sec_btm > article.flex .door-box { order: 1; width: 80%; margin-bottom:20px; }
    .sec_btm > article.flex .txt-box1 { order: 2; width: 100%; }
    .sec_btm > article.flex .txt-box2 { order: 3; width: 100%; }

    .sec_btm .ttl_flex {
    display: flex;
    align-items: center;
    /*margin-bottom: 7px;*/
    }
    .sec_btm .door-box {
        width: 31.2%;
        padding: 0 20px;
    }
    .sec_btm .txt-box {
        width: 34.4%;
    }
    .sec_btm .txt-box .txt-flex {
        align-items: flex-start;
        gap: 20px;
    }
    .sec_btm .ttl_flex .ttl_flex01 p {
        width: 25px;
        height: 25px;
        font-size: 16px!important;
    }
    .sec_btm .ttl_flex .ttl_flex02 h5 {
    color: #8eabbb;
    font-size: 17px;
    margin-bottom: 0;
    line-height: 1.3;
    padding-top: 0;
    }
    .sec_btm .ttl_flex .ttl_flex02 span {
    color: #000;
    font-size: 14px;
    margin-bottom: 10px;
    font-size: 16px !important;
    }

    .sec_btm .txt-box [class^="txt-"] {
        margin-bottom: 20px;
    }
    .sec_btm .txt-flex > .flex {
        gap: 10px;
    }
    .sec_btm .txt-flex > .flex div { width: 70%; }
    .sec_btm .txt-flex > .flex figure { width: 30%; height:fit-content; }
    .sec_btm .txt-1 .subttl {
        color: #fff;
        background-color: #8eabbb;
        padding: 5px 10px;
        margin-bottom: 5px;
        margin-top: 10px;
    }
    .sec_btm .txt-4.txt-flex > .flex div {
        width: 100%;
    }
    .sec_btm .txt-5.txt-flex > .flex div { width: 60%; }
    .sec_btm .txt-5.txt-flex > .flex div:last-of-type { width: 40%; }
    .sec_btm .txt-5.txt-flex > .flex div:last-of-type figure { width: 100%; }


.sec_btm .ttl_flex .ttl_flex02 h5 {
font-size: 16px;
}

.sec_btm .ttl_flex .ttl_flex02 h5 span {
font-size: 12px;
}


.device.sp {
float: right;
width: 300px;
max-width: 40%;
margin: 0 0 0 14px;
}
.speed.sp {
width: 500px;
max-width: 94%;
margin-top: 0;
}
.con_box .bg_box > .flex{
    border-bottom: none;
}
.con_box .bg_box > .flex h4 {
align-items: baseline;
}

.in-box .bg_box .column2.pt45 {
margin: 20px 0 0;
padding: 0;
}
.in-box .bg_box .column2 ul li {
width: 100%;
max-width: unset;
}

}

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

.sec01 .flex .flex01 figure {
margin: 0 auto;
}

.flex.algn-spe div {
min-height: unset;
}

#content .cap_L_top {
left: 0;
text-align: left;
bottom: auto;
top: -10px;
font-size: 10px;
letter-spacing: 0;
color: #000;
font-feature-settings: "palt";
}

.sec_btm figure.sp {
width: 100%;
margin: 0 auto 20px;
}

.sec_btm .flex01_1 {
margin-bottom: 30px;
}

.sec_btm .flex01_2 {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}

.sec_btm .flex01_2 .flex01_2_txt {
width: 60%;
}

.sec_btm .flex01_2 figure {
width: 35%;
}

.sec_btm .flex01_3 {
margin-bottom: 30px;
}

.sec_btm .flex02_1 {
margin-bottom: 0;
}

.sec_btm .flex02_2 {
padding-top: 30px;
}

.sp_mb0 {
margin-bottom: 0 !important;
}

.sp_pb0 {
padding-bottom: 0 !important;
}

}