html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  font-size: 14px;
  color: #333;
  width: 100%; }

body {
  margin: 0;
  width: 100%; }

main {
  display: block;
  width: 100%; }

hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

a {
  background-color: transparent; }

abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */ }

b, strong {
  font-weight: bolder; }

code, kbd, samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

small {
  font-size: 80%; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  font-weight: normal; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em;
  font-size: 70%; }

img {
  border-style: none; }

button, input, optgroup, select, textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */ }

button, input {
  /* 1 */
  overflow: visible; }

button, select {
  /* 1 */
  text-transform: none; }

button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button; }

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

fieldset {
  padding: 0.35em 0.75em 0.625em; }

legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */ }

progress {
  vertical-align: baseline; }

textarea {
  overflow: auto; }

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

details {
  display: block; }

summary {
  display: list-item; }

template {
  display: none; }

[hidden] {
  display: none; }

html, body, main, h1, h2, h3, h4, div, ul, li, dl, dt, dd, table, th, tr, td, nav, p, img {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  line-height: 1.4; }

img {
  flex-shrink: 0; }

.pc {
  flex-shrink: 0; }

.sp {
  display: none !important; }

.sp_br {
  display: none; }

#type, #capacity, #speed, #reliability, #for_sp, #for_camera, #for_dr {
  position: relative;
  top: -47px;
  width: 0;
  height: 0; }





@media screen and (max-width: 414px) {
  .sp_br {
display: inherit; }
}

html {
  scroll-behavior: smooth;
}
body {
  z-index: 0; }
  body a:visited {
color: inherit; }

main {
  width: 100%;
    max-width: 100%;
  text-align: center;
    box-sizing: border-box;
}



main p {
line-height: 1.6; }
main a img:hover, main a img:active {
opacity: 0.7;
transition: 0.2s;
text-align: center;
}


main section {
padding: 40px 0; }

main section div.inn {
  margin: 30px auto;
  width: 1000px;
font-weight: normal;
text-align: center;
}

main section div.inn img{
  width: inherit;
  max-width: 1000px;
}

  main section div.inn h1{
font-size: 3.2em;
font-weight: bold;
padding: 0 0 20px 0;
margin: 0;
line-height: 0;
}

main section div.inn h2{
    
}
  main section div.inn h3 {
font-size: 2em;
font-weight: bold;
padding: 0 0 10px 0;
margin: 0; }

  main section div.inn ul {
margin: 0 auto;
list-style: none; }



p.cou{font-size: 90%;
color: #626262;
margin: 14px auto 0;
}


/*--header-----------------*/
header{
position:sticky;
top:0;
left: 0;
background: #fff;
z-index: 999;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
padding: 0;
width: auto;
    max-width: 100%;
    box-sizing: border-box;
}
header div.inn{
margin: 0 auto;
height: 95px;
width: 1000px;
position: relative;
}


header div.inn h1{
left: 0;
top: 5px;
position: absolute;
}

header div.inn .btn{
right:  14px;
bottom: 24px;
position: absolute;
display: flex;
justify-content: space-between;

}
header div.inn .btn button{
display: inline-block;
font-size: 110%;
font-weight: bold;
padding: 6px 14px;
background: #43a536;
color: #fff;
line-height: 1.3;
border-radius: 6px;
border: none;
margin: 0 0 0 8px;
height: 50px;
}
header div.inn .btn button:hover{
opacity: 0.7;
transition: 0.5s;
}
header div.inn .btn button span{
display: block;
font-size: 80%;
}
p.cou{font-size: 90%;
color: #626262;
margin: 14px auto 0;
}






/*--KV---------------------*/



main section.kv {
  margin: 0;
  padding: 0;
  background: none;
z-index: 0;
  width: 100%;
  background-image: url('../img/mback_blu.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
section.kv .inn{
  top: 0;
padding: 0;
margin: 0 auto;
width: 1000px;
height: 650px;
background: none;
position: relative;
  z-index: 1;
}


main section.kv .inn h1{
text-align: left;
  font-size: 5.2em;
  font-weight: bold;
  top: 70px;
padding: 0;
margin: 0;
position: absolute;
  z-index: 2;
}
main section.kv .inn h1 img{

width: 475px;
}

main section.kv .inn .fu_01{
width: 200px;
bottom: 155px;
left:0;
padding: 0;
margin: 0;
position: absolute;
  z-index: 2;
}

main section.kv .inn .fu_02{
width: 200px;
bottom: 155px;
left:230px;
padding: 0;
margin: 0;
position: absolute;
  z-index: 2;
}




main section.kv .inn .main_img{
width: 500px;
  top: 60px;
right:0;
padding: 0;
margin: 0;
position: absolute;
  z-index: 2;
}
main section.kv .inn h2{
bottom: 70px;
left:0;
padding: 0;
margin: 0;
position: absolute;
  z-index: 2;
}



section.kv .video-bk{
width: 100%;
z-index: 0;
  position: relative;
  width: 100%;
  height:  690px;
  overflow: hidden;
background: #fff;
}

section.kv .video-bk video{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  z-index: -999;
background: #fff;
}

section.kv div.kv-base {
  position: absolute;
opacity: 1;
  top: 0;
  left: 0;
  width: 100%;
  height:  690px;

  background-repeat: repeat;
  z-index: 2; /* 動画の上に重ねる */
  pointer-events: none;
overflow: hidden;
  z-index: -999;
}





main section.kv .inn img.btimg {
position: absolute;
animation: floatUpDown 4s ease-in-out infinite;
  top: 50px;
  right: 100px;
  bottom: 0;
  left: 540px;
  margin: auto;
width: 274px;
height: 434px;
z-index: 10;
}
@keyframes floatUpDown {
  0% {
transform: translateY(0); /* 元の位置 */
  }
  50% {
transform: translateY(-10px); /* 上に20px移動 */
  }
  100% {
transform: translateY(0); /* 元の位置に戻る */
  }
}



section .inn a{
text-decoration: none;
}
section .inn a:hover{
opacity: 0.7;
transition: 0.3s;
}


/*-----intro------------------*/
section.intro .inn ul li{
margin: 0 auto 30px;
padding: 15px 0 15px 0;

}
section.intro .inn ul li:last-child{
margin: 0 auto 0px;

}
section.intro .inn ul li h2{
padding: 10px 0 14px;
}
section.intro .inn ul li p{
font-size: 140%;
}

/*-----モバファイ活用ガイドヘッダー------------------*/

section.guide_haeder{
background: #f3f3f2;
}

section.guide_haeder .inn h1{
width: 80%;
margin: 0 auto;
text-align: center;
}
section.guide_haeder .inn h2{
line-height: 0;
}

section.guide_haeder ul{
width: 90%;
padding: 30px 0 0 0;
display: flex;
justify-content: space-between;
}

section.guide_haeder ul li{
padding: 24px 35px 10px;
/*width: 20%;*/
border-radius: 100px;
color: #fff;
font-size: 140%;
}
section.guide_haeder ul li img{
margin: 0 auto 6px;
width: auto;
height: 40px;
}
section.guide_haeder ul li a p,section.guide_haeder ul li a{
    color: #fff;
}

section.guide_haeder ul li div img{
margin: 10px auto 0;
width: 18px;
height: auto;
animation: floatUpDown 1.2s ease-in-out infinite;

}
@keyframes floatUpDown {
  0% {
transform: translateY(0); /* 元の位置 */
  }
  50% {
transform: translateY(-5px); /* 上に20px移動 */
  }
  100% {
transform: translateY(0); /* 元の位置に戻る */
  }
}
section.guide_haeder ul li.guide_r01{
background: #4db9bc;
}
section.guide_haeder ul li.guide_r02{
background: #b68be5;

}

section.guide_haeder ul li.guide_r03{
background: #e3b032;
}


/*-----ビジネス--------*/

section.business{
background: #d0eaeb;
}

section.business .inn,section.watch .inn,section.drive .inn{
padding: 40px 0;
border-radius: 30px;
background: #fff;
}



/*-----共通設定--------*/
section .inn .guide_box h1{
padding: 20px 0 20px;
border-radius: 100px;
background: #4db9bc;
margin: 0 auto 20px;
    line-height: 0;
    width: 90%;
}
section .inn .guide_box h1 img{
    width: auto;
    height: 50px;
}
section .inn .guide_box h2{
margin: 10px auto 20px;
}
section .inn .guide_box p{
font-size: 130%;
margin: 20px auto;
}

section .inn .guide_box p{
font-size: 140%;
margin: 20px auto;
}
section{
position: relative;
}

section div#business,section div#watch,section div#drive{
position: absolute;
top:-95px;

}

section .inn .guide_box p.cou{font-size: 90%;
color: #626262;
margin: 14px auto 0;
}



/*-----見守り--------*/
section.watch{
background: #dcd0e9;
}
section.watch .inn .guide_box h1{
background: #b68be5;
}



/*-----ドライブ--------*/
section.drive{
background: #fdeabc;
}
section.drive .inn .guide_box h1{
background: #e3b032;
}
section.drive .inn .guide_box img.guide_img{
width:55%;
margin: 14px auto;
}



/*-----プラン--------*/
section.plan{

}

main section.plan div.inn h1{
text-align: center;
margin: 0 auto;
width: 80%;
}

section.plan .inn ul{
margin: 20px auto 0;
}
section.plan .inn ul li{
padding: 30px 0;
}
section.plan .inn ul li img.l1{
height:60px; 
margin: 14px 0 0 0;
}
section.plan .inn ul li img.l2{
height:130px; 
margin: 14px 0 0 0;
}

main section.plan .inn ul li p img.h_02_img_01{
max-width: 400px;
}
main section.plan .inn ul li p img{
margin: 20px auto;
}
main section.plan .inn ul li p img.h_02_img_05{
margin: 0 auto;
}
main section.plan .inn ul li p.step img{
margin: 0 auto;
animation: floatUpDown 1.2s ease-in-out infinite;
}
@keyframes floatUpDown {
  0% {
transform: translateY(0); /* 元の位置 */
  }
  50% {
transform: translateY(-5px); /* 上に20px移動 */
  }
  100% {
transform: translateY(0); /* 元の位置に戻る */
  }
}



@media screen and (max-width: 768px) {
.pc{
display: none;}

.sp {
display: inherit!important;}

  #type, #capacity, #speed, #reliability, #for_sp, #for_camera, #for_dr {
position: relative;
top: -47px; }

main section.sp-kv{
width: 100%;
margin: 0 auto;
padding-top: 0!important;
}
main section.sp-kv img{
width: 100%;
margin: 0;
padding: 0 0 0 0;
box-sizing: border-box;
}

main section div.inn {
        width: 100%;
        max-width: 100%;
}
    
main.mobile section {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

main.mobile section div.inn{
    margin: 10px auto;
    width: 96%;
    padding: 2%;
    max-width: 96%;
    box-sizing: border-box;
}
main.mobile section div.inn img {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
  }
    
    
/*------header-*/
    header{
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0;
    }
header div.inn{
box-sizing: border-box;
top:0;
margin: 0 auto;
width: 98%;
padding: 0;
max-width: 98%;
    height: 70px;
}  
    
    
    
header div.inn h1 {
    left: 10px;
    top: 5px;
}

header div.inn h1 img {
    height: 55px;
}
header div.inn .btn.pc{
        display: none;
    }  
   
header div.inn .login ul.sp_login li{
width: 50px;
    margin: 0 0 0 8px;
} 
    
    
    
    
header div.inn .login ul.sp_login {
    position: absolute;
    right: 10px;
    top:10px;
    width: 120px;
display: flex;
    justify-content: space-between;
    list-style: none;
}  
    
header div.inn .login ul.sp_login li a{
    display: block;
background: #43a536;
    border-radius: 100%;
    padding: 5px;
    width: 40px;
    height: 40px;
} 
header div.inn .login ul.sp_login li a img{
height: 32px;
    margin: 4px auto;

}


/*------intro---*/
section.intro .inn ul li h1{
line-height: 0;
    margin: 0 auto;
    padding: 0;
}
section.intro .inn ul li h2 img{
    text-align: center;
    margin: 0 auto;
    width: 80%;
}
section.intro .inn ul li p {
    font-size: 108%;
}

    /*------ガイド---*/
main.mobile section.guide_haeder {
        background: #f3f3f2;
    padding: 2%;
    margin: 0;
}
main.mobile section.guide_haeder .inn{
    padding: 0;
    margin:0;
}
main.mobile section.guide_haeder .inn h1 {
    width: 95%;
    margin: 20px auto 0;
    text-align: center;
}

main.mobile section.guide_haeder ul{
width: 100%;
padding: 0 0 0 0;
display: inherit;
}
main.mobile section.guide_haeder ul li{
        padding: 15px 10px 0 10px;
        width: 95%;
        margin: 0 auto 15px;
        border-radius: 100px;
        color: #fff;
        font-size: 130%;
    line-height: 1.0;
}
main.mobile section .inn .guide_box h1 {
    padding: 15px 30px 15px;
    width: 98%;
    max-width: 98%;
    line-height: 1;
}
main.mobile section .inn .guide_box h1 img{
height: 40px;
    width: auto;
}

    
    
main.mobile section.guide_haeder ul li h2 img {
    height: 35px;
    width: auto;
    margin: 0;
    }
main.mobile section.business,main.mobile section.watch,main.mobile section.drive{
    padding: 2%;
}
main.mobile section.business .inn,main.mobile section.watch .inn,main.mobile section.drive .inn {
    padding: 20px 8px;
    border-radius: 15px;
}
section .inn .guide_box h1 {
    padding: 20px 25px 10px;
    border-radius: 100px;
    background: #4db9bc;
    margin: 0 auto 20px;
    line-height: 1;
}


section.drive .inn .guide_box img.guide_img {
    width: 85%;
}

section .inn .guide_box p {
    font-size: 105%;
    margin: 10px auto;
}
section .inn .guide_box .sub_img {
    width: 90%;
}

    
/*---プラン---*/
    main section.plan div.inn h1 {
    width: 100%;
}
main.mobile section.plan .inn ul {
    margin: 0 auto;
}

main.mobile section.plan .inn ul li {
    padding: 14px 0;
}
main.mobile section.plan .inn ul li h2{
    padding: 0 0 20px;
    text-align: center;
    margin: 0 auto;
}
main.mobile section.plan .inn ul li h2 img{
        width: 90%;
        height: auto;
    padding: 0;
        margin: 0 auto;
}
    
main section.plan .inn ul li p img.h_02_img_01,main section.plan .inn ul li p img.h_02_img_03{
    max-width: 90%;
}
main section.plan .inn ul li p.step img {
    margin: 0 auto 4px;
}

}




.pagetop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
    width: 50px;
    height: 50px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background:none;
  text-decoration: none;

  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}

.pagetop:hover {
  opacity: 0.5;
  transform: translateY(-2px);
}

.pagetop img{
  opacity: 0.9;
 width: 100%;
    max-width: 100%;
}

.pagetop.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); 
}


@media (max-width: 767px) {
  .pagetop {
    bottom: 10px;
    right: 10px;
    width: 45px;
    height: 45px;
  }

  .pagetop:hover {
    transform: translateY(0);
  }
}




footer {
    padding: 30px 0;
    width: 100%;
    background: #efefef;
}
footer img{
    width: 200px;
}


@media screen and (max-width: 768px) {
footer img{
    width: 30%;
}
}