@charset "utf-8";

/*====================================
tablet
====================================*/

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


.section_head {
    padding: 3.6rem 1.6rem 5.2rem;
    text-align: center;
}

.main{
	padding-top: 60px;	
}




/*-------------- page --------------*/

.page_head{
	width: 100%;
}
.page_head_body{
	position:relative;
	width: 100%;
	max-width: 124.0rem;
	margin: 0 auto;
	padding:1.6rem 1.6rem;
}
.page_contents{
	width:100%;
	background: #EFEFEF;
	padding:1.6rem 1.2rem 3rem;
}

.page_title{
	font-size:2.8rem;
	font-weight:600;
}
.page_card{
	background:var(--white);
	width: 100%;
	max-width: 124.0rem;
	margin: 0 auto;
	padding:1.6rem;
	margin-bottom:2rem;
}
.page_desc{
	font-size:1.3rem;
	color:#454545;
}
/*-------------- header --------------*/

.header{
	height: 60px;
}
.header_content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.header_logo{
	height: 60px;
	padding:0 12px;
	gap:0px;
	flex-direction:column;
	align-items:flex-start;
}
.header_logo_img{
	height: 28px;
	margin-top: 5px;
}

.header_logo_name{
	border-left: none;
	padding-left:2px;
	font-size: 1.2rem;
    line-height: 1;
}

.header_menu{
	display:none;
}

.header_sp_menu_icon{
	display:block;
	height:60px;
}

.header_cta{
	flex-grow: 1
}

.header_cta_tel{
	gap:0;
	margin-top: -6px;
}

/*-------------- menu --------------*/

.sp_menu{
	display: flex;
	flex-direction:column;
	position: fixed;
	top: 0;
	right:-100vw;
	justify-content: flex-start;
	align-items: center;
	width:100vw;
	height: 100vh;
	background: rgba(255,255,255,0.98);
	backdrop-filter: blur(10px);
	z-index: 2000;
	transition: .3s;
	opacity: 1;
}

.sp_menu.show{
	right:0;
}

.sp_menu_close{
	display:flex;
	justify-content:flex-end;
	height:60px;
	width:100%;
}

.sp_menu_menu{
	display: flex;
	flex-direction:column;
	justify-content:flex-start;
	width: 100%;
	padding:0 1.6rem;
}
.sp_menu_menu ul{

}
.sp_menu_menu ul li{
	width: 100%;
	padding: 1.6rem;
	border-bottom:1px solid #ccc;
}
.sp_menu_menu ul li a{
	display:block;
	width:100%;
	text-decoration: none;
	color: var(--blue);
}


/*-------------- kv --------------*/

.kv{
	background-size: cover;
	height: 60vh;
	min-height:80rem;
}

.kv_ring_1{
	display:flex;
	position:absolute;
	top:20vh;
	left:40.5vw;
	width:17.0rem;
	height:17.0rem;
}
.kv_ring_2{
	display:flex;
	position:absolute;
	top:5vh;
	left:69.5vw;
	width:16.3rem;
	height:16.3rem;
}
.kv_ring_3{
	display:flex;
	position:absolute;
	top:38vh;
	left:72.5vw;
	width:15.6rem;
	height:15.6rem;
}
.kv_ring_text{
	background:rgba(0,0,0,0.1);
	border-radius:100%;
}
.kv_ring_1 .kv_ring_text{
	font-size:1.9rem;
	line-height:1.3;
}
.kv_ring_2 .kv_ring_text{
	font-size:1.9rem;
	line-height:1.3;
}
.kv_ring_3 .kv_ring_text{
	font-size:1.5rem;
	line-height:1.3;
}



.point_inner {
	max-width: 100%;
}



.point_heading {
	font-size: 34px;
}

.point_cautionPoint {
	font-size: 10px;
}

.point_spanText-3 {
	margin-bottom: -12px;
	
}

.point_strongth {
	font-size: 48px;
}

.point_spanText {
	font-size: 16px;
}

.point_info {
	padding: 48px 20px;
}

.point_title {
	font-size: 16px;
	margin-bottom: 20px;
}

.point_titleCaution {
	right: 1em;
	font-size: 10px;
}

.point_text {
	font-size: 12px;
}

.point_caution {
}

/*-------------- about --------------*/

.about_body{
	padding-bottom:0;
}
.about_body_main{
	flex-direction:column;
	padding: 4rem 0;
}
.about_body_texts{
	width:100%;
}
.about_body_texts ul{
	flex-wrap:wrap;
	flex-direction:row;
	justify-content:center;
}
.about_body_texts li{
	justify-content:center;
	width:calc(50% - 0.7rem);
	font-size: 1.6rem;
	padding: 1rem;
	text-align:center;
}
.about_body_texts li img{
	display:none;
}


/*-------------- feature --------------*/

.feature_box{
	display: flex;
	flex-direction: column;
	justify-content:space-between;
	width: 100%;
	min-height: auto;
	margin-bottom: 1px;
}
.feature_box:nth-child(even){
	flex-direction: column;
}
.feature_image{
	width: 100%;
	height:40rem;
}
.feature_desc{
	width: 100%;
	gap: 2.4rem;
    width: 100%;
    min-width: auto;
    padding: 2.4rem 2.4rem 4rem;
    margin-top:-10.8rem;
}

/*-------------- cta --------------*/

.evo_boxes {
    gap: 1.6rem;
}
.evo_box {
    padding: 1.6rem;
}
.evo_head_step{
	width: 6.0rem;
	height:6.0rem;
	font-size: 1.5rem;
}
.evo_head_mid{
	font-size: 1.8rem;
	line-height: 1.4;
	color: #1B96DB;
	font-weight: 600;
}
.evo_body{
	padding: 2rem 0 0.2rem 0;
}
.evo_body_mid{
	color: #d5d5d5;
	font-size: 1.4rem;
	line-height: 1.5;
	font-weight: 600;
}

.evo_evo{
	display:flex;
	justify-content:center;
	align-items:center;
	position: absolute;
	width:13rem;
	height: 7rem;
	background: url(../images/evo_evo_fig.png) no-repeat center center;
	background-size: contain;
	top: calc(50% - 6rem);
	left: calc(50% - 6.5rem);
	color: #FFF;
	font-size:2.0rem;
	font-weight:700;
	padding-bottom: 0.4rem;
	padding-left:0.6rem;
}
.evo_body_body1 .evo_body_memo{
	width: 40%;
	padding: 0 0 0 1.0rem;
	font-size: 1.1rem;
	line-height:1.4;
}
.evo_body_body1 .evo_body_name{
	font-size:1.6rem;
}
.evo_body_body2 .evo_body_fig img{
	height:16rem;
}
.evo_body_body2 .evo_body_name{
	font-size:1.6rem;
}
.evo_body_body2 .evo_body_name span{
	font-size: 1.2rem;
}


/*-------------- lineup --------------*/
.lineup_catch {
    margin-top: -4rem;
}
.lineup_boxes {
    gap: 0.2rem;
    padding: 1.2rem;
}
.lineup_box{
	padding: 1.6rem 1.6rem;
}
.lineup_fig img {
    width: 18rem;
    max-width: 100%;
    margin: 0 auto;
}
.lineup_push {
	margin-top:-2rem;
    padding: 0 2rem;
    align-items:flex-end;
}
.lineup_push_fig {
    width: 12rem;
}
.lineup_push_fig img {
    margin: 0.8rem auto;
    width: 10rem;
}
.lineup_push_fig span {
	font-size:1rem;
}
.lineup_push_catch {
    font-size: 1.8rem;
}
.lineup_push_read {
    padding: 1.2rem;
    font-size: 1.3rem;
}

/*-------------- install --------------*/
.install {
    display: flex;
    flex-direction:column-reverse;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    min-height: 40rem;
    margin-bottom: 1px;
}

.install_image {
    width: 100%;
    height:34rem;
    background: url(../images/install_image.jpg) no-repeat right center;
    background-size: cover;
}
.install_main{
	width:100%;
}
.install_body {
    padding: 0 6rem 4rem;
}

/*-------------- campaign --------------*/
.campaign_body {
    padding:2rem 4rem;
}
.campaign_info{
	max-width:100%;
}
.campaign_point{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	width:10.8rem;
	height:10.8rem;
	background: var(--white);
	border-radius:10.8rem;
	color:var(--gray);
	text-align:center;
	font-size:2.0rem;
	line-height:2.4rem;
	font-weight:600;
	flex-shrink:0;
}
.campaign_fig{
	flex-shrink: 1;
	width:calc(100% - 20rem);
}
.campaign_memo {
	font-size:1.2rem;
}

/*-------------- use case --------------*/

.uc_box {
    width: 100%;
    padding: 0 0 0 0;
}

.uc_body_read {
    width: 50%;
    font-size:1.4rem;
}

.uc_body_body1 {
    margin-top: -5rem;
    width: 45%;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 0 0 4rem 0;
}

.uc_case {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 50%;
    border: 1px solid #B9B9B9;
    padding: 4rem 1.6rem;
}

.uc_case_t {
    font-size: 1.5rem;
    line-height:1.4;
}

.uc_case_catch {
    font-size: 1.8rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--blue);
}

/*-------------- case --------------*/
.case_box {
    display: flex;
    margin: 0 0rem;
    padding: 0;
    gap: 2.4rem;
    background: var(--white);
}

.case_desc_no {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 4.8rem;
    height: 4.8rem;
    flex-shrink: 0;
    background: var(--blue);
    color: var(--white);
    font-size: 1.8rem;
    line-height: 1.3;
    font-family: 'open sans';
}

.case_desc {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0 1.6rem 0 0.8rem;
}

.case_desc_catch h3 {
    font-size: 1.6rem;
    line-height: 1.4;
}

.case_desc_fig {
    width: 30%;
    flex-shrink: 0;
}

.case_data {
    padding: 0rem 1.2rem;
    border-left: 1px solid var(--blue);
    font-size:1.3rem;
}

.case_desc_read{
	padding-bottom:1rem;
	font-size:1.3rem;
	color:#333;
}
.faq_mid{
	margin: 2rem 1rem -1rem;
	font-size:2rem;
	font-weight:600;
	color: var(--blue);
}
.faq_boxes {
    padding: 0rem 0rem 2rem;
}
.faq_a_text {
	font-size:1.3rem;
    padding: 1.2rem;
    font-weight: 300;
}


}


/*====================================
smartphone
====================================*/


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

.spbr{
	display:inline;
}

.section_head {
    padding: 3.6rem 1.6rem 5.2rem;
    text-align: center;
}

.section_head .mid {
    font-size: 1.7rem;
}

.header_logo {
    height: 60px;
    padding: 0 8px;
    gap: 0px;
    flex-direction: column;
    align-items: flex-start;
    margin-top:8px;
}
.header_logo_img {
    height: 24px;
    margin-top: 5px;
}

.header_logo_name {
    font-size:7px;
}

.header_cta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    flex-grow: 0;
    padding-right: 0px;
    flex-grow: 1;
}

.header_cta_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    background: var(--gradient);
    font-weight: 600;
    font-size: 10px;
    letter-spacing:0;
    line-height: 20px;
    padding: 9px 6px;
    text-decoration: none;
    border-radius: 8px;
    z-index: 1011;
    transition: .3s;
}
.header_cta_tel {
	margin-top:0;
}
.header_cta_tel a{
	display:block;
	width:32px;
	height:44px;
	overflow:hidden;
	text-indent: -9999px;
	background-position: center center;
}

.header_cta_tel span{
	display:none;
}

.header_sp_menu_icon{
	width:48px;
	height:60px;
	display:flex;
	justify-content:center;
	align-items:center;
}


/*-------------- kv --------------*/

.kv{
	background: url(../images/kv_bg.jpg) no-repeat 75% bottom;
	background-size: cover;
	height: 45rem;
	min-height:45rem;
	margin-top:160px;
	overflow:visible;
	margin-bottom: 1px;
}
.kv_body{
	max-width: 100vw;
}


.kv_texts{
	position:absolute;
	width:100%;
	height:210px;
	top:-240px;
	background: var(--black);
	padding:16px;
	gap:0px;
}
.kv_text_head1 {
    font-size: 1.8rem;
    margin-bottom: 0;
 }
.kv_text_head2 p{
	background: transparent;
	font-size:1.4rem;
	padding:0.2rem 0rem;
	color: var(--blue);
}
.kv_text_head2 p:before{
	content:'【';
}
.kv_text_head2 p:after{
	content:'】';
}
.kv_text_title {
    font-size: 24px;
}
.kv_text_read {
    width: 100%;
    font-size:12px;
    color:#ababab;
}
.kv_ring_1{
	display:flex;
	position:absolute;
	top:12rem;
	left:auto;
	right:calc(54vw - 6rem);
	width:12.0rem;
	height:12.0rem;
}
.kv_ring_2{
	display:flex;
	position:absolute;
	top:0rem;
	left:auto;
	right:calc(20.5vw - 5.5rem);
	width:11rem;
	height:11rem;
}
.kv_ring_3{
	display:flex;
	position:absolute;
	top:25rem;
	left:auto;
	right:calc(16.5vw - 5.25rem);
	width:10.5rem;
	height:10.5rem;
}
.kv_ring_text{
	background:rgba(0,0,0,0.15);
	border-radius:100%;
}
.kv_ring_1 .kv_ring_text{
	font-size:1.5rem;
	line-height:1.35;
	font-weight:600;
}
.kv_ring_2 .kv_ring_text{
	font-size:1.4rem;
	line-height:1.3;
	font-weight:600;
}
.kv_ring_3 .kv_ring_text{
	font-size:1.3rem;
	line-height:1.3;
	font-weight:600;
}



.point_contents {
	flex-direction: column;
}

.point_content {
	display: flex;
	
}

.point_heading {
	flex-shrink: 0;
	flex-basis: 240px;
}


.point_info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0;
	padding: 0 1.2em;
}

.point_title {
	text-align: left;
}

.point_titleCaution {}

.point_text {}

.point_caution {}


/*-------------- about --------------*/
.about {
    padding: 1.6rem;
}
.about .section_head {
    padding: 3.6rem 0rem 5.2rem;
}
.about_body_fig{
	width:88%;
	padding-bottom:2rem;
	padding-left:0.8rem;
}
.about_body_texts{
	text-align:center;
}
.about_body_texts li {
    width: 100%;
    min-height:6rem;
    font-size: 1.5rem;
    padding: 0.6rem;
}


/*-------------- feature --------------*/

.feature_image{
	width: 100%;
	height:24.0rem;
	padding: 2.4rem 1.6rem 4rem;
}

.feature_desc_catch {
	padding-top:1.2rem;
    font-size: 2.0rem;
}
.feature_desc_read {
    font-size: 1.4rem;
    line-height: 1.8;
}
.feature_desc_fig{
	width:90%;
}

/*-------------- cta --------------*/

.cta {
    gap: 2.4rem;
    padding: 2rem 1.6rem 2rem;
}

.cta_btns{
	flex-direction:column;
}

.evo_boxes{
	flex-direction:column;
	gap:3.6rem;
}

.evo_body_body1 {
    display: flex;
    flex-direction:column;
    align-items: center;
    padding-bottom:3rem;
}
.evo_body_body1 .evo_body_memo{
	width:100%;
}
.evo_body_body1 .evo_body_name{
	width:100%;
}
.evo_evo {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 13rem;
    height: 7rem;
    top:auto;
    left:auto;
    background: url(../images/uc_evo_fig.svg) no-repeat center center;
    background-size: contain;
    color: #FFF;
    font-size: 1.8rem;
    font-weight: 700;
    padding-top: 0.8rem;
    padding-bottom: 0rem;
    padding-left: 0.6rem;
    margin:-8rem auto -5rem;
}

.evo_btn {
    font-size: 1.4rem;
}
.cta_read {
    text-align: center;
    font-size: 1.4rem;
    line-height: 1.5;
}
.cta_read strong {
	display:block;
	margin-top:1.2rem;
    font-size: 1.6rem;
    font-weight: 500;
}

/*-------------- lineup --------------*/
.lineup{
	padding-bottom:3rem;
}
.lineup_boxes {
    display: flex;
    flex-direction:column;
    justify-content: space-between;
    align-items: stretch;
    gap: 0.2rem;
    padding: 1.2rem;
}
.lineup_flow {
    margin-top: 1.6rem;
}
.lineup_push {
	flex-direction:column;
    margin-top: -2rem;
    padding: 0 2rem;
    align-items: center;
}
.lineup_push_catch {
    font-size: 1.6rem;
}


/*-------------- campaign --------------*/
.campaign_body {
    padding: 0rem 1.6rem;
}
.campaign_info {
    gap: 0.6rem;
}
.campaign_point {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 6.4rem;
    height: 6.4rem;
    background: var(--white);
    border-radius: 10.8rem;
    color: var(--gray);
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.5rem;
    font-weight: 600;
    flex-shrink: 0;
}
.campaign_fig{
	width:80%;
}

.campaign_catch {
    margin: 2rem 0rem 1rem;
    padding: 0.2rem 0.2rem;
}

.campaign_catch h4 {
    font-size: 1.5rem;
    letter-spacing: 0;
}
.campaign_term {
    margin: 1rem 0 1rem;
    padding-bottom: 1rem;
    font-size: 1.4rem;
}
.campaign_memo {
	font-size:1.3rem;
    line-height: 1.5;
    opacity: 0.9;
    text-align:left;
}

/*-------------- install --------------*/
.install_body {
    padding: 0 1.6rem 4rem;
}
.install_catch {
    font-size: 2rem;
    margin-bottom: 1rem;
}
.install_point {
	display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -11.6rem;
    right: 1rem;
    width: 9.4rem;
    height: 9.4rem;
    color: var(--white);
    background: var(--gradient);
    border-radius: 100%;
    font-size: 1.3rem;
    line-height: 1.4;
    font-weight: 600;
}
.install_omakase {
    font-size: 1.6rem;
}
.about_rexev {
    padding: 2.4rem 1.6rem 1.6rem;
}
.about_rexev p {
    font-size: 1.4rem;
}

.install_image {
    height: 20rem;
}

.uc_head {
    gap: 1em;
}
.uc_head_step {
    width: 5.4rem;
    height: 5.4rem;
    font-size: 1.4rem;
    flex-shrink:0;
}

.uc_head_mid {
    font-size: 1.8rem;
    line-height: 1.4;
    color: #1B96DB;
    font-weight: 600;
}

.uc_body {
    display: flex;
    flex-direction:column;
}

.uc_body_read{
	width:100%;
}

.uc_body_body1{
	margin-top: 0;
	width:100%;
}

.uc_body_body1 .uc_body_fig {
    width: 60%;
}

.uc_body_body2 {
    margin-top: 0;
	width:100%;
	flex-direction:column;
}

.uc_evo {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 11.6rem;
    height: 6.9rem;
    background: url(../images/uc_evo_fig.svg) no-repeat center center;
    background-size: contain;
    color: #FFF;
    font-size: 1.6rem;
    font-weight: 700;
    padding-top: 1.2rem;
    padding-bottom: 0rem;
    margin: -5rem auto -1rem;
    z-index: 100;
}

.uc_body_body2 .uc_body_name {
    width: 100%;
}

.uc_cases {
    margin-top: 2rem;
    display: flex;
    flex-direction:column;
    justify-content: space-between;
    align-items: stretch;
    gap: 2.4rem;
}

.uc_case {
    width: 100%;
    padding: 2rem 1.6rem;
    gap:1.6rem;
}

.uc_case:before {
    display:none;
}

.uc_case_catch {
    font-size: 1.6rem;
    line-height: 1.4;
}


.case_box {
    display: flex;
    flex-direction:column;
    margin: 0 0rem;
    padding: 0;
    gap: 2rem;
    background: var(--white);
}

.case_desc_fig {
    width: 100%;
    flex-shrink: 0;
}

.faq_mid{
	margin: 1rem 0rem 2rem;
	font-size:1.8rem;
	font-weight:600;
	color: var(--blue);
}

.faq_box {
    padding: 0rem 0rem 2rem 0rem;
    border-bottom: 1px solid #D5D5D5;
    margin-bottom: 2rem;
}

.faq_q_q{
	font-size:2.4rem;
}

.faq_q_text {
    padding: 1rem;
    font-size: 1.6rem;
    line-height:1.3;
    font-weight: 500;
}

.faq_a {
    display: flex;
    align-items: flex-start;
    padding-top: 0;
    padding-left: 0.2rem;
}

.faq_a_a{
	font-size:2.4rem;
}

.faq_a_text {
	font-weight:400;
}

}


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

.kv_ring_1{
	display:flex;
	position:absolute;
	top:12rem;
	left:auto;
	right:calc(66vw - 6rem);
	width:12.0rem;
	height:12.0rem;
}

.point {}

.point_inner {
	width: 100%;
	padding: 48px 15px 40px 20px;
}

.point_imgTitle {
	margin: 0;
	max-width: 80%;
}

.point_contents {
	gap: 16px;
}

.point_content {
	align-items: center;
	padding: 32px 0;
}

.point_heading {
	border-radius: 50%;
	font-size: 16px;
	transform: translateX(-1em);
	box-shadow: 4px 4px 4px rgba(55,55,55,0.1);
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex:  0 0 120px;
	padding: 0;
	height: 120px;
}

.point_cautionPoint {
	bottom: 2em;
}

.point_spanText-3 {
	margin: 0;
}

.point_strongth {
	font-size: 18px;
}

.point_spanText {
	font-size: 10px;
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 4px;
}
.point_br{
	display: block;
}

.point_info {
	padding: 0 12px 0 0 ;
}

.point_title {
	margin-bottom: 12px;
}

.point_titleCaution {
	right: 2em;
}

.point_text {
	font-size: 10px;
}

.point_caution {}

}