@charset "UTF-8";
/* CSS Document */

/*-----------
デバイス共通
------------*/
html{
    overflow-x: hidden;
}
body{
    font-family:"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体", YuGothic, "YuGothic M","メイリオ", Meiryo,  sans-serif;
    font-size:18px;
    line-height:1.68;
    color:#000;
    font-feature-settings : "palt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.cl-pink{
	color: #ff6c67;
}
.cl-green{
	color: #276981;
}
.cl-white{
    color: #fff;
}
.highlight {
    background: -webkit-linear-gradient(transparent 40%, rgba(247, 227, 93, 1) 40%);
    background: -o-linear-gradient(transparent 40%, rgba(247, 227, 93, 1) 40%);
    background: linear-gradient(transparent 40%, rgba(247, 227, 93, 1) 40%);
    font-weight: bold;
}
.bg01{
    background: url(../img/bg01.png);
}
.bg02{
    background: url(../img/bg02.png);
}
.bglg{
    background: #fafafa;
}
.bg_lb{
    background: #eef8fd;
}
.bg_trag{
    background: url(../img/bg_trag.png);
}
.bg_grid{
    background: url(../img/bg_grid.png);
}
section{
    padding-top: 100px;
    padding-bottom: 100px;
}
h2{
    margin: 0;
    padding: 0;
}
.narrow{
    margin-left: 50px;
    margin-right: 50px;
}
.pd_top_0{
    padding-top: 0;
}
/*--------------------------------------------------------
ヘッダー
--------------------------------------------------------*/
header{
    background: #eef8fd;
    padding-top: 20px;
    padding-bottom: 20px;
}
.hl{
    float: left;
}
.hr{
    float: right;
    margin-top: 10px;
}

/*--------------------------------------------------------
mv
--------------------------------------------------------*/
.mv{
    padding-top: 50px;
    padding-bottom: 50px;
}

/*固定ボタン*/
.mv_right-fixed-banner {
  position: fixed;
  bottom: 20%;
  right: 5%;
  width: 10%;
  margin-right: 60px;
}
/*.mv_banner-box {
  height: 100px;
}*/

#banner-1 {
  background: none;
}


/*--------------------------------------------------------
sec01
--------------------------------------------------------*/
.h2_blue{
    padding-top: 50px;
    padding-bottom: 50px;
    background: #0075c1;
}
.cautiontxt{
    text-align: right;
    font-size: 14px;
    padding-left:1em;
    text-indent:-1em;
}

/*--------------------------------------------------------
sec02
--------------------------------------------------------*/
.nofl{
    float: left;
    width: 11%;
}
.nofr{
    font-weight: bold;
    width: 88%;
    float: right;
    line-height: 1.5;
    margin-bottom: 10px;
}
.s_arrow{
    position: absolute;
    right: -15px;
    bottom: 130px;
}
.s_arrow02{
    position: absolute;
    right: -15px;
    bottom: 105px;
}

/*--------------------------------------------------------
sec03
--------------------------------------------------------*/
.lgbox{
    background: #fafafa;
    padding: 50px;
}

/*--------------------------------------------------------
sec04
--------------------------------------------------------*/
.bg_reason{
    background: #0d3f5f;
}
.reason_txt {
    width: 600px;
    margin-bottom: 50px;
    line-height: 1.4;
}
.list01{
    background-color: #eeeeee;
    padding:30px 40px;
}
.list01 li{
    font-weight: bold;
    font-size: 28px;
    line-height: 1.5;
}
.list01 li span{
    color: #0d3f5f;
}
.list01 li i{
    color: #0d3f5f;
}
.reason_img{
    position: absolute;
    bottom: 0;
    right: 0;
}

/*--------------------------------------------------------
sec05
--------------------------------------------------------*/
.case{
    background: #fff;
    padding: 0 50px 50px 50px;
}
.case_dl dt{
    font-size: 22px;
    font-weight: bold;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 2px solid #0075c1;
    line-height: 1.4;
}
.case01{
    background: url(../img/case01_bg.png) no-repeat right top #fff;
    background-size: cover;

}
.case02{
    background: url(../img/case02_bg.png) no-repeat right top #fff;
    background-size: cover;

}
.pr0{
   padding-right: 0;
}

/*--------------------------------------------------------
cta
--------------------------------------------------------*/
.cta_bg .cta_bg01{
    background: url(../img/cta_bg.png);
    padding-bottom: 50px;
    padding-top: 50px;
}
.cta_bg .cta_bg02{
    background-color:#eeeeee;
    padding-bottom: 50px;
    padding-top: 50px;
}
.cta_bg .cta_bg03{
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #fdf2e9;
}
.ctabox01{
    background: url(../img/ctabox_bg.png) no-repeat right top #fff;
    padding: 70px 45px 30px;
}
.list02{
    font-size: 20px;
    font-weight: bold;
}
.list02 i{
    display: inline;
    color: #f49139;
}
.list02 span{
    color: #f49139;
}
.stepdl {
    margin-bottom: 7px;
}
.stepdl dt{
    background: #f49139;
    color: #fff;
    display: inline-block;
    text-align: center;
    padding: 0 10px;
    float: left;
    width: 15%;
    font-size: 15px;
}
.stepdl dd{
    width: 82%;
    float: right;
    line-height: 1.5;
}



/*--------------------------------------------------------
sec06
--------------------------------------------------------*/
.point01{
    background: url(../img/point01_bg.png) no-repeat right top #fff;
    background-size: cover;
}
.lisk_box{
    background: #eee;
    padding: 20px;
}
.no02fl{
    float: left;
    width: 7%;
}
.no02fr{
    font-weight: bold;
    width: 92%;
    float: right;
    font-size: 20px;
    line-height: 1.3;
}
.point_h4{
    background: #0075c1;
    padding: 20px;
}
.point_in{
    padding: 30px;
    border:3px solid #0075c1;
}
.point06{
    /*background: url(../img/point06_bg.png) no-repeat left top #fff;
    background-size: cover;*/
}
.point07{
    /*background: url(../img/point07_bg.png) no-repeat left top #fff;
    background-size: cover;*/
}

.box3 {
    padding: 10px;
    margin: 10px 0 15px 0;
    color: #000;
    background: #eef8fd;/*背景色*/
}
.box3 p {
    margin: 0;
    padding: 0;
}
.box4 {
    padding: 10px;
    margin: 10px 0 15px 0;
    color: #000;
    background: #F6C2D9;/*背景色*/
}
.box4 p {
    margin: 0;
    padding: 0;
    font-size:13px;
}

/*--------------------------------------------------------

20190204
--------------------------------------------------------*/
.piro{
    /*background: url(../img/piro1_bg.png) no-repeat right top #fff;*/
    /*background-size: cover;*/
    margin-bottom:15px;
    font-size: 16px;
}

.pd_b_25{
	padding-bottom: 25px;
}
/*--------------------------------------------------------
sec07
--------------------------------------------------------*/
.voice_box{
    border: 3px solid #0075c1;
    padding: 47px;
}

/*--------------------------------------------------------
sec08
--------------------------------------------------------*/
.qa{
    background-color: #fafafa;
    padding: 50px;
}
.qa .qa_tit{
    font-size: 30px;
    border-bottom: 2px solid #0075c1;
    color: #0075c1;
    font-weight: bold;
    margin-bottom: 20px;
}
.qa .inner {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #cccccc;
}
.qa .inner.mb0{
    border-bottom: 0;
    padding-bottom: 0;
}
.qa .inner .qa_q .icon {
    background-color: #0075c1;
    display: block;
    width: 45px;
    border-radius: 50px;
    height: 45px;
    padding: 10px 0 0 1px;
}
.qa .inner .qa_a .icon {
    background-color: #f49139;
    display: block;
    width: 45px;
    border-radius: 50px;
    height: 45px;
    padding: 10px 0 0 0;
}
.qa .inner .tit {
    color: #0075c1;
}
.qa .inner .tit, .qa .inner .txt {
    line-height: 1.4;
}
footer {
    color: #000;
    font-size: 14px;
    padding-top: 50px;
    padding-bottom: 70px;
    background-color: #FFF;
}
footer a {
    color: #000;
}
footer a:hover, footer a:focus {
    color: #000;
}
.pagetop {
    bottom: 15px;
}
.pagetop a {
    background-color: #0075c1;
}
.pagetop a:hover {
    background-color: #2088cc;
}

/*--------------------------------------------------------
caution
--------------------------------------------------------*/

.caution_h1 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
.caution_h2 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
.caution_p{
font-size: 14px;
margin-bottom: 10px;
}

.caution_ol{
  font-size:14px;
}
.caution_li{
  margin-bottom: 25px;
}

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

/*PC用スタイル*/
@media (min-width: 960px) {
.bg_reason{
    padding-bottom: 150px;
}
.lisk_box{
    font-size: 16px;
}
.mv .mv_img{
    position: relative;
    left: -30px;
}
.voice_box .voice_txt{
    width: 610px;
}
.voice_box .voice_img{
    width: 240px;
    padding-right: 0;
}
.qa .inner .tit span {
    font-size: 24px;
}

}
/*PC用スタイルend

/*ボタンフッタ固定*/
/*メニューをページ下部に固定*/
#sp-fixed-menu{
   position: fixed;
   width: 100%;
   bottom: 0px;
   font-size: 0;
   z-index: 99;
}

/*メニューを横並びにする*/
#sp-fixed-menu ul{
   display: flex;
   list-style: none;
   padding:0;
   margin:0;
   width:100%;
}

#sp-fixed-menu li{
   justify-content: center;
   align-items: center;
   width: 100%;
   padding:0;
   margin:0px auto;
   font-size: 17px;
   height: 80px;
}

/*左側メニューを緑色に*/
#sp-fixed-menu li:first-child{
   background: #333333;
opacity: 0.95;
}

/*ボタンを調整*/
#sp-fixed-menu a{
   padding:15px;
   margin:10px auto;
   color: #fff;
   font-weight: bold;
   text-align: center;
   display:block;
   width: 50%;
   background: #FF881D;
   /*background: linear-gradient(#01B927,#03831D);*/
   border-radius: 10px;
   border-bottom: solid 5px #C35805;

}
#sp-fixed-menu a:hover{
   text-decoration: none;
   opacity: 0.9;