@charset "utf-8";
/* html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark */
html,body,div,span,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,
small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,d
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video { margin:0; padding:0; border:0; outline:0; vertical-align:bottom; background:transparent;}
body { line-height:1; -webkit-text-size-adjust: 100%;}
ul li { list-style:none;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none;}

a { margin:0; padding:0; color: #666; text-decoration: none; vertical-align:baseline;}
a:hover { opacity: 0.7;}
del { text-decoration: line-through;}
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help;}
table { border-collapse:collapse; border-spacing:0;}
/* change border colour to suit your needs */
hr { display:block; height:1px; border:0;  border-top:1px solid #cccccc; margin:1em 0; padding:0;}
input, select { vertical-align:middle;}

/* ===================================================================================
  resetここまで
=================================================================================== */

body { -webkit-text-size-adjust: 100%;}
.pc_none { display: none;}

.fv { background: url("../img/pc/bg_fv.jpg") no-repeat top center;}
.sec01 { background: url("../img/pc/bg_trouble.jpg") no-repeat top center;}
.sec02 { background: url("../img/pc/bg_settle.jpg") no-repeat top center, #e5f3f4;}
.sec03 { background:  #f2f2f2;}
.sec04 { background: url("../img/pc/bg_comparison.jpg") no-repeat top center, #e5f3f4;}
.sec05, .sec07 { background:  #cce8ea;}
.sec08 { background:  #e5f3f4;}
.sec10 { background: url("../img/pc/bg_message.jpg") no-repeat top center;}
.inner { width: 1100px; margin: 0 auto;}
 
header {
  background: #fff;
  box-shadow: 2px 2px 3px rgba(0,0,0,.3);
  position: relative;
  z-index: 10;
}
header .inner {
  width: 1000px;
  display: flex;
  justify-content: space-between;
}
header .line { position: relative;}
header .line .line_btn {
  position: absolute;
  top: 15px;
  left: 171px;
}

.offer { position: relative;}
.offer .btn {
  position: absolute;
  bottom: 108px;
  left: 0;
  right: 0;
  text-align: center;
  -webkit-filter: drop-shadow(3px 3px 3px rgba(0,0,0,.4));
  filter: drop-shadow(3px 3px 3px rgba(0,0,0,.4));
}

.sec02 .inner { position: relative;}
.sec02 .inner .arrow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  -webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,.4));
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,.4));
}

.movie {
  width: 1000px;
  margin: 0 auto;
  background: #008b96;
  padding-bottom: 55px;
}
.movie .youtube { text-align: center;}

.float {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #008b96;
}
.float .inner {
  width: 900px;
  position: relative;
}
.float .inner .float_img {
  position: absolute;
  bottom: 0;
  left: 0;
}
.float .inner .float_btn {
  text-align: right;
  -webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,.4));
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,.4));
}

.sec10 { padding-bottom: 100px;}

@media screen and (min-width:768px) and ( max-width: 1100px) {
  img { width: 100%;}
  
  .fv { background-size: 181.8vw auto;}
  .sec01 { background-size: 181.8vw auto;}
  .sec02 { background-size: 181.8vw auto;}
  .sec04 { background-size: 181.8vw auto;}
  .sec10 { background-size: 181.8vw auto;}
  .inner { width: 100%; margin: 0 auto;}
  
  header .inner { width: 90.9vw;}
  
  .offer .btn { bottom: 9.8vw;}
  .offer .btn img { width: 80.5vw;}
  
  .sec02 .inner .arrow img { width: 34.3vw;}
  
  .movie {
    width: 90.9vw;
    padding-bottom: 5vw;
  }
  .movie .youtube {
    position: relative;
    width: 65.7vw;
    margin: 0 auto;
    padding-top: 36.9vw;
  }
  .movie .youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
  }
  
  .float .inner { width: 83vw;}
  .float .inner .float_img img { width: 28vw}
  .float .inner .float_btn img { width: 52.7vw}

  .sec10 { padding-bottom: 9.1vw;}
  
}

@media screen and ( max-width: 767px) {
  img { width: 100%;}
  a:hover { opacity: 0;}
  
  .pc_none { display: block;}
  .sp_none { display: none;}
  
  .fv, .sec01, .sec02, .sec03, .sec04,
  .sec05, .sec07, .sec08, .sec10 { background: none;}
  .inner { width: 100%;}
  
  header {
    background: #fff;
    box-shadow: 2px 2px 3px rgba(0,0,0,.3);
    position: relative;
    z-index: 10;
  }
  header .inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  header h1 img { width: 23.3vw;}
  header .line { position: relative;}
  header .line .line_btn {
    position: static;
    margin-top: 2vw;
    margin-right: 3.7vw;
  }
  header .line .line_btn img { width: 53.3vw;}

  .offer { position: relative;}
  .offer .btn {
    position: absolute;
    bottom: 17.3vw;
    left: 0;
    right: 0;
    width: 84vw;
    margin: 0 auto;
    -webkit-filter: drop-shadow(3px 3px 3px rgba(0,0,0,.4));
    filter: drop-shadow(3px 3px 3px rgba(0,0,0,.4));
  }

  .movie {
    width: 100%;
    margin: 0 auto;
    background: none;
    padding-bottom: 0;
    position: relative;
  }
  .movie .youtube {
    position: absolute;
    top: 22.7vw;
    left: 0;
    right: 0;
    width: 84vw;
    margin: 0 auto;
    padding-top: 47.2vw;
  }
  .movie .youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
  }

  .float {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: 2.7vw;
    background: #008b96;
  }
  .float .inner {
    width: 90%;
    position: static;
  }
  .float .inner .float_img {
    position: absolute;
    bottom: 0;
    left: 8%;
    z-index: 20;
  }
  .float .inner .float_img img { width: 17vw;}
  .float .inner .float_btn {
    float: right;
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,.4));
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,.4));
  }
  .float .inner .float_btn img { width: 63.9vw;}
  .sec10 { padding-bottom: 20vw;}
  
}