@charset "utf-8";
/* watch css */

.g_navi .gnav02 a::before {
opacity: 1;
top: -18px;
}
.intro_imgbox {
padding-right: 8.02%;
margin-bottom: 40px;
}

@media all and (max-width : 820px ){
.intro_imgbox {
padding-right: 4.02%;
margin-bottom: 30px;
}
}

@media all and (max-width : 767px ){
.intro_imgbox {
padding-right: 4.2%;
margin-bottom: 15px;
}
}

.intro_img {
position: relative;
z-index: 0;
}
.intro_img::after {
content: "";
display: block;
background-color: #000;
opacity: 0.1;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.intro_img img {
width: 100%;
}
.intro_title {
font-size: 2.4rem;
font-weight: 700;
letter-spacing: 0.2em;
margin-bottom: 30px;
}

@media all and (max-width : 1024px ){
.intro_title {
font-size: 2.2rem;
letter-spacing: 0.15em;
margin-bottom: 20px;
}
}

@media all and (max-width : 820px ){
.intro_title {
font-size: 2.0rem;
}
}

@media all and (max-width : 767px ){
.intro_title {
font-size: 1.6rem;
margin-bottom: 15px;
}
}

.intro_title span {
color: #003791;
}
.service_box_wrap {
display: flex;
flex-wrap: wrap;
}
.service_box {
width: calc(33.3333333% - 60px / 3);
margin-right: 30px;
position: relative;
border: solid 1px #ddd;
}

@media all and (max-width : 820px ){
.service_box {
width: calc(33.3333333% - 40px / 3);
margin-right: 20px;
}
}

.service_box:nth-child(3n) {
margin-right: 0px;
}
.service_box_wrap {
display: flex;
margin-bottom: 40px;
}
.service_imgbox {
position: relative;
overflow: hidden;
}
.service_imgbox img {
width: 100%;
transition-duration: 0.7s;	
}
.service_imgbox .num {
font-family: "Barlow Condensed", sans-serif;
font-weight: 500;
font-size: 5.0rem;
letter-spacing: 0;
line-height: 100%;
position: absolute;
bottom: -5px;
right: 10px;
color: transparent;
-webkit-text-stroke: 1px #fff;
z-index: 2
}
.service_imgbox .num::before {
content: '#';
color: #fff;
font-size: 3.0rem;
font-weight: 400;
display: inline-block;
margin-right: 5px;
}
.service_txt {
font-size: 1.5rem;
line-height: 180%;
padding: 15px 15px 20px;
}

@media all and (max-width : 820px ){
.service_imgbox .num {
font-size: 4.0rem;
}
.service_imgbox .num::before {
font-size: 2.0rem;
}
.service_txt {
font-size: 1.4rem;
}
}

@media all and (max-width : 767px ){
.service_box {
width: 100%;
margin-right: 0px;
margin-bottom: 20px;
}
.service_box_wrap {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.service_txt {
font-size: 1.3rem;
}
}


/*-------------------------------------------------
コンセプトエリア
-------------------------------------------------*/

.concept_box_wrap {
display: flex;
justify-content: space-between;
padding-top: 20px;
margin-bottom: 80px;
}
.concept_txt {
width: 50%;
font-size: 1.6rem;
font-weight: 500;
letter-spacing: 0.15em;
line-height: 200%;
}

@media all and (max-width : 1024px ){
.concept_txt {
font-size: 1.5rem;
letter-spacing: 0.1em;
}
}

.concept_img {
width: 45.56%;
}
.concept_img img {
width: 100%;
}

@media all and (max-width : 820px ){
.concept_box_wrap {
display: flex;
justify-content: space-between;
flex-direction: column-reverse;
padding-top: 10px;
margin-bottom: 50px;
}
.concept_txt {
width: 100%;
font-size: 1.4rem;
}
.concept_img {
width: 100%;
margin-bottom: 20px;
}
}

@media all and (max-width : 767px ){
.concept_box_wrap {
padding-top: 5px;
margin-bottom: 30px;
}
.concept_txt {
font-size: 1.3rem;
}
.concept_img {
margin-bottom: 10px;
}
}


/*-------------------------------------------------
サービスの特徴
-------------------------------------------------*/

.property_box {
display: flex;
align-items: flex-start;
margin-bottom: 30px;
color: #003D79;
}
.property_box dt {
font-family: "Barlow Condensed", sans-serif;
font-weight: 500;
font-size: 2.2rem;
letter-spacing: 0;
line-height: 100%;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: solid 1px #003D79;
margin-right: 15px;
}
.property_box dd {
font-size: 2.0rem;
font-weight: 600;
letter-spacing: 0.2em;
}
.property_txt {
font-size: 1.5rem;
line-height: 200%;
}
.property_txt span {
font-weight: 700;
}
.property_box_left {
width: 57.5%;
}
.property_box_wrap {
max-width: 1260px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 60px;
}

@media all and (max-width : 900px ){
.property_box_left {
width: 57.5%;
padding-right: 30px;
}
.property_box_wrap {
display: flex;
align-items: center;
margin-bottom: 50px;
}
}

@media all and (max-width : 820px ){
.sec_sentence_txt .tb-hidden {
display: none;
}
.property_box_left {
width: 100%;
padding-right: 60px;
border-right: none;
}
.property_box_wrap {
max-width: 1260px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: column-reverse;
margin-bottom: 60px;
}
.box_inner.sec03 .property_box_wrap {
flex-direction: column;
}
.box_inner.sec03 .property_imgbox {
margin-top: 20px;
}
}

.property_imgbox {
width: 36.51%;
padding-left: 60px;
border-left: solid 1px #ccc;
}
.property_imgbox img {
width: 100%;
}

@media all and (max-width : 1024px ){
.property_box dt {
font-size: 2.8rem;
margin-right: 15px;
padding-top: 0;
}
.property_box dd {
font-size: 2.0rem;
}
.property_txt {
line-height: 180%;
}
}

@media all and (max-width : 900px ){
.property_box dt {
font-size: 2.0rem;
margin-right: 15px;
}
.property_box dd {
font-size: 1.6rem;
}
}

@media all and (max-width : 820px ){
.property_imgbox {
position: relative;
width: 100%;
padding-left: 0px;
border-left: none;
margin-bottom: 30px;
}
}

@media all and (max-width : 767px ){
.sec_title {
margin-bottom: 20px;
}
.sec_title dd {
font-size: 1.6rem;
}
.property_box {
margin-bottom: 15px;
}
.property_box dd {
font-size: 1.5rem;
letter-spacing: 0.1em;
}
.property_box_left {
width: 100%;
padding-right: 0px;
}
.property_box_wrap {
margin-bottom: 30px;
}
.property_imgbox {
margin-bottom: 20px;
}
.property_txt {
font-size: 1.2rem;
line-height: 180%;
}
.property_box_wrap:last-child {
margin-bottom: 30px;
}
}


/*-------------------------------------------------
見守りサービスでできること
-------------------------------------------------*/

.house {
max-width: 1150px;
height: auto;
margin-bottom: 15px;
}
.house img {
width: 100%;
}
.house_txt {
font-size: 1.6rem;
font-weight: 700;
margin-left: 60px;
margin-bottom: 80px;
}

@media all and (max-width : 820px ){
.house_txt {
font-size: 1.4rem;
margin-left: 50px;
margin-bottom: 50px;
}
}

@media all and (max-width : 767px ){
.house_txt {
font-size: 1.1rem;
margin-left: 0px;
letter-spacing: 0.05em;
margin-bottom: 30px;
}
}


/*-------------------------------------------------
月額料金
-------------------------------------------------*/

.plan_box {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
border: solid 3px #3CB5C8;
border-radius: 10px;
margin-bottom: 80px;
}
.plan_box_head {
background: #3CB5C8;
padding: 18px 0;
width: 100%;
border-radius: 4px 4px 0 0;
color: #fff;
}
.plan_box_head h4 {
font-size: 2.4rem;
font-weight: 700;
letter-spacing: 0.2em;
text-align: center;
}
.plan_inner {
padding: 20px 10px 40px;
}
.plan_inner dt {
font-size: 1.8rem;
font-weight: 700;
text-align: center;
margin-bottom: 20px;
}
.plan_inner dt span {
font-family: "Barlow Condensed", sans-serif;
font-size: 4.0rem;
font-weight: 700;
}
.plan_inner dd {
font-size: 1.6rem;
font-weight: 600;
text-align: center;
}

@media all and (max-width : 820px ){
.plan_box_head {
padding: 15px 0;
}
.plan_box_head h4 {
font-size: 2.0rem;
}
.plan_inner dt {
font-size: 1.6rem;
margin-bottom: 5px;
}
.plan_inner dt span {
font-size: 3.4rem;
}
.plan_inner dd {
font-size: 1.4rem;
}
}

@media all and (max-width : 767px ){
.plan_box {
margin-bottom: 40px;
}
.plan_box_head {
padding: 10px 0;
}
.plan_box_head h4 {
font-size: 1.4rem;
letter-spacing: 0.1em;
}
.plan_inner {
padding: 10px 10px 20px;
}
.plan_inner dt {
font-size: 1.3rem;
margin-bottom: 5px;
}
.plan_inner dt span {
font-size: 2.4rem;
}
.plan_inner dd {
font-size: 1.2rem;
}
}


/*-------------------------------------------------
サービスの流れ
-------------------------------------------------*/

.flow_title {
font-size: 2.4rem;
font-weight: 700;
letter-spacing: 0.2em;
padding-bottom: 5px;
margin-left: 10px;
margin-bottom: 60px;
}
.color_sax {
color: #70BEE6;
border-bottom: solid 3px #70BEE6;
}
.color_pink {
color: #ED99A3;
border-bottom: solid 3px #ED99A3;
}

@media all and (max-width : 820px ){
.flow_title {
font-size: 2.0rem;
letter-spacing: 0.15em;
margin-bottom: 40px;
}
}

@media all and (max-width : 767px ){
.flow_title {
font-size: 1.4rem;
letter-spacing: 0.1em;
margin-bottom: 20px;
}
.color_sax {
border-bottom: solid 2px #70BEE6;
}
.color_pink {
border-bottom: solid 2px #ED99A3;
}
}

/* step
-------------------------------------------------- */

.flow_item {
position: relative;
margin-left: 10px;
max-width: 1260px;
padding-left: 124px;
counter-increment: number;
}
.flow_item:last-of-type {
padding-bottom: 50px;
}
.flow_item:not(:last-child) {
padding-bottom: 70px;
}

@media all and (max-width : 820px ){
.flow_item:not(:last-child) {
padding-bottom: 60px;
}
}

@media all and (max-width : 767px ){
.flow_item {
margin-left: 10px;
padding-left: 60px;
}
.flow_item:last-of-type {
padding-bottom: 10px;
}
.flow_item:not(:last-child) {
padding-bottom: 30px;
}
}

.flow_item:not(:last-child)::before {
content: "";
position: absolute;
top: 90px;
left: 44px;
display: block;
width: 0;
height: calc(100% - 112px);
border-right: 1px solid #aaa;
}

@media all and (max-width : 767px ){
.flow_item:not(:last-child)::before {
content: "";
position: absolute;
top: 48px;
left: 20px;
width: 0;
height: calc(100% - 70px);
}
}

.editor-ttl {
font-size: 2.0rem;
letter-spacing: 0.2em;
margin-bottom: 10px;
}

@media all and (max-width : 820px ){
.editor-ttl {
font-size: 1.8rem;
letter-spacing: 0.15em;
margin-bottom: 5px;
}
}

@media all and (max-width : 767px ){
.editor-ttl {
font-size: 1.3rem;
}
}

.editor-ttl::after {
content: counter(number, decimal-leading-zero);
position: absolute;
top: -8px;
left: 5px;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
line-height: 50px;
letter-spacing: 0.05em;
border-radius: 50%;
text-align: center;
color: #fff;
font-family: "Barlow Condensed", sans-serif;
font-weight: 400;
font-size: 1.5rem;
}
.step1 {
margin-bottom: 40px;
}
.step1 .editor-ttl::after {
background-color: #70BEE6;
}
.step2 .editor-ttl::after {
background-color: #ED99A3;
}
.flow_txt {
font-size: 1.5rem;
line-height: 200%;
}
.flow_txt a {
text-decoration: underline;
color: #8E7742;
}
.flow_txt a:hover {
text-decoration: none;
}

@media all and (max-width : 820px ){
.flow_txt {
font-size: 1.4rem;
line-height: 180%;
}
}

@media all and (max-width : 767px ){
.editor-ttl::after {
content: counter(number, decimal-leading-zero);
position: absolute;
top: -6px;
left: 0px;
width: 40px;
height: 40px;
line-height: 50px;
font-size: 1.1rem;
}
.flow_txt {
font-size: 1.2rem;
line-height: 170%;
}
.step1 {
margin-bottom: 10px;
}
}