@charset "UTF-8";



body {
	font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-size: 17px;
}

/****************************************
List
*****************************************/

ul,ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

li { list-style: none; }
.pc {display: block;}
.sp {display: none !important;}
img { max-width: 100%; height: auto; }
.imgblock { display: block; margin-left: auto; margin-right: auto; }
.aligncenter { text-align: center; }
.alignright { float: right; }
.alignleft { float: left; }
.clearfix:after {
  display: block;
  content: "";
  clear: both;
}
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }

header {
    position: relative;
    width:100%;
    height: 100%;
}
.wrapper {
    width:1050px;
    margin-left:auto;
    margin-right:auto;
}
#sec01 { margin-bottom: 50px; }
#sec02 ul { text-align: center; margin-bottom:  50px; }
#sec02 ul li { display: inline-block; width: 45%; margin: 20px 2% 20px; vertical-align: middle; }
#sec03 { background: #20ACE0; padding: 50px 0px; }
#sec04 {
  background: url(./../images/bg-merit.jpg) no-repeat top center;
  background-size: cover;
  padding: 50px 0px;
}

#sec05 {
  background: url(./../images/bg-merit-01.jpg) no-repeat bottom center;
  padding: 50px 0px;
}

#sec06 {
  background: url(./../images/bg-flow.jpg) repeat top center;
  padding: 50px 0px;
}

#sec07 {
  background: #FEFFD5;
  padding: 50px 0px 20px;
  margin-bottom: 50px;
}

.ttl01 { font-size: 27px; line-height: 1.5em; font-weight: 600;
    display: flex;
    align-items: center;
}
.ttl01:before,
.ttl01:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #666;
}
.ttl01:before {
    margin-right: 1rem;
}
.ttl01:after {
    margin-left: 1rem;
}

.ttl02 { font-size: 34px; line-height: 1.5em; font-weight: 600; color: #fff; text-align: center; margin-bottom: 30px; }
.ttl03 { font-size: 60px; line-height: 1.5em; font-weight: 600; color: #fff; text-align: center; margin-bottom: 30px; text-shadow: 0px 0px 10px #666; }
.ttl03 span { font-size: 46px; }

.ttl04 { font-size: 36px; line-height: 1.5em; font-weight: 600; color: #fff; text-align: center; margin-bottom: 30px; background: #00749F; padding: 20px; position: relative; }
.ttl04:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -25px;
  border: 25px solid transparent;
  border-top: 25px solid #00749F;
}
.ttl05 { font-size: 31px; line-height: 1.5em; font-weight: 600; color: #000; text-align: center; margin-bottom: 20px; }

.morebutton {
  position: relative;
  display: inline-block;
  padding: 30px 100px;
  text-align: center;
  text-decoration: none;
  transition: .3s;
  overflow: hidden;
  font-size: 28px;
  color: #000;
  font-weight: 600;
  border-radius: 10px;
  line-height: 1em;
  background: url(./../images/yaji.png) no-repeat center right;
  background-position-x: 96%;
}
.morebutton:hover {
  color: #000;
}

.morebutton::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  content: '';
  width: 120%;
  height: 100%;
  background: url(./../images/yaji.png) no-repeat center right #32BAEC;
  background-position-x: 96%; 
  transform-origin: right top;
  transform: skewX(180deg) scale(0, 1);
  transition: transform .3s;
}
.morebutton:hover::before {
  transform-origin: left top;
  transform: skewX(180deg) scale(1, 1);
}
.morebutton::after{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  content: '';
  width: 120%;
  height: 100%;
  background: #FDD535;
}
.wlist { display: flex; align-items: top; flex-wrap: wrap;  }
.wlist li { display: inline-block; width: 44%; margin-right: 5%; background: #EFFBFF; border-left: 6px solid #078CBE; padding: 20px; font-size: 18px; line-height: 1.8em; margin-bottom: 40px; }
.wlist li:nth-child(2n + 2) { margin-right: 0px; }
.wlist li h3 { color: #20ACE0; font-size: 27px; margin: 0px 0px 20px; }
.wlist li img { margin-top: -25px; }
.wlist.wlist02 li { display: block; width: 93%; margin-right: 0px; }
.flowbloc { display: flex; flex-wrap: wrap; }
.flowbloc .item01 { display: inline-block; width: 56%; background: #20ACE0; padding: 5px; border-radius: 5px; margin-right: 3%; position: relative; margin-bottom: 50px;}
.flowbloc .item02 { display: inline-block; width: 38%; background: #44B17A; padding: 5px; border-radius: 5px; position: relative; margin-bottom: 50px; }
.flowbloc .item01 ul,
.flowbloc .item02 ul { padding-top: 10px; padding-bottom: 10px; }
.flowbloc .item01 li { background: url(./../images/check-s.png) no-repeat left center; padding-left: 30px; line-height: 2em; font-size: 21px; margin-left: 20px; color: #fff; }
.flowbloc .item02 li { background: url(./../images/check-l.png) no-repeat left center; padding-left: 50px; line-height: 1.5em; padding-top: 0.5em; padding-bottom: 0.5em;font-size: 21px; margin-left: 20px; color: #fff;}
.flowbloc .item01 p,
.flowbloc .item02 p {
  background: #fff;
  padding: 20px;
  line-height: 1.5em;
  font-size: 17px;
}
.flowwrap { background: #fff; }
.flowcontent { padding: 20px 60px 30px; font-size: 20px; }
.flowttl { font-size: 29px; line-height: 1.5em; font-weight: 600; color: #fff; text-align: center; margin-bottom: 50px; background: #00749F; padding: 20px; position: relative; border-radius: 5px; }
.flowttl.next:before {
display: block;
    width: 5px;
    height: 50px;
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 1;
    content: '';
    background-color: #00749F;
}

.flowbloc .item01:before {
display: block;
    width: 5px;
    height: 50px;
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 1;
    content: '';
    background-color: #20ACE1;
}
.flowbloc .item02:before {
display: block;
    width: 5px;
    height: 50px;
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 1;
    content: '';
    background-color: #44B17A;
}
.contactbloc .item01 { display: inline-block; width: 50%; margin-right: 5%; position: relative; margin-bottom: 40px;}
.contactbloc .item02 { display: inline-block; width: 40%; position: relative; margin-bottom: 40px; text-align: center; }
.contactbloc .tel01 { font-size: 23px; color: #20ACE0; background: url(./../images/tel.png) no-repeat left center; display: inline-block; padding-left: 55px; line-height: 2em;}
.contactbloc .tel02 a { font-size: 57px; color: #E7503E; font-weight: 500; margin-bottom: 10px; text-decoration: none;}
.lttl { font-size: 38px; font-weight: 500; }
.lttl p { font-size: 20px; font-weight: 400; line-height: 1.5em; padding-top: 10px; }


footer { background: #0A2737; color: #fff; padding: 50px 0px 10px; text-align: center; }
footer a { color: #fff; }
footer .copyright { font-size: 14px; }

footer .menuf { margin-bottom: 50px; }
footer .menuf li { display: inline-block; }
footer .menuf li a { display: block; padding: 0px 10px; border-left: 1px solid #fff; font-size: 15px; text-decoration: none;}
footer .menuf li:last-child a { border-right: 1px solid #fff;}

@media screen and (max-width: 767px){
	body { min-width: 100%; font-size: 15px; }
	img { max-width: 100%; height: auto; }

    .pc {display: none !important;}
    .sp {display: block !important;}
    .spdi {display: inline-block; !important;}

    .wrapper {
        width:1050px;
        width:auto;
        margin-left:auto;
        margin-right:auto;
    }
    .ttl01 {
        font-size: 18px;
        line-height: 1.5em;
        font-weight: 600;
        display: flex;
        align-items: center;
    }
    #sec02 ul li {
      display: block;
      margin: 20px auto 10px;
      vertical-align: middle;
      max-width: 80%;
      width: auto;
      }
    .ttl02 {
      font-size: 19px;
      line-height: 1.5em;
      font-weight: 600;
      color: #fff;
      text-align: center;
      margin-bottom: 0px;
      } 
      #sec03 {
        padding: 20px 0px;
      }
      .morebutton { font-size: 20px; padding: 20px 50px; }
      .ttl03 { font-size: 30px; line-height: 1.5em; font-weight: 600; color: #fff; text-align: center; margin-bottom: 30px; text-shadow: 0px 0px 10px #666; }
      .ttl03 span { font-size: 16px; }
        .wlist li {
          display: block;
          width: 90%!important;
          margin-right: auto!important;
          margin-left: auto;
          background: #EFFBFF;
          border-left: 6px solid #078CBE;
          padding: 10px;
          font-size: 14px;
          line-height: 1.8em;
          margin-bottom: 40px;
        }
      .wlist li h3 {
          color: #20ACE0;
          font-size: 18px;
          margin: 0px 0px 10px;
      }
      .ttl04 { font-size: 25px; }

    .flowbloc { display: block; flex-wrap: wrap; }
    .flowbloc .item01 { display: inline-block; width: 56%; background: #20ACE0; padding: 3px; border-radius: 5px; margin-right: 1%; position: relative; margin-bottom: 50px;}
    .flowbloc .item02 { display: inline-block; width: 42%; background: #44B17A; padding: 3px; border-radius: 5px; position: relative; margin-bottom: 50px; }
    .flowbloc .item01 li {
        background: url(./../images/check-s.png) no-repeat left center;
        padding-left: 23px;
        line-height: 1.5em;
        font-size: 14px;
        margin-left: 6px;
        color: #fff;
        background-size: 20px;
    }
    .flowbloc .item02 li {
        background: url(./../images/check-l.png) no-repeat left center;
        padding-left: 24px;
        line-height: 1.5em;
        padding-top: 0px;
        padding-bottom: 0px;
        font-size: 14px;
        margin-left: 6px;
        color: #fff;
        background-size: 20px;
    }
    .flowbloc .item01 p, .flowbloc .item02 p {
        background: #fff;
        padding: 10px;
        line-height: 1.5em;
        font-size: 12px;
    }

    .flowcontent {
        padding: 20px 10px 30px;
        font-size: 14px;
    }
    .flowttl { font-size: 18px; }
    .ttl05 { font-size: 18px; }
    .contactbloc .item01 { display: block; width: 90%; margin: 10px auto 30px; }
    .contactbloc .item02 { display: block; width: 90%; margin: 10px auto 30px; }
    .contactbloc .tel02 a { font-size: 40px; margin-bottom: 15px; }

    .lttl { font-size: 18px; font-weight: 500; }
    .lttl p { font-size: 13px; font-weight: 400; line-height: 1.5em; padding-top: 10px; }
    #sec08 img { max-width: 48%; }
    footer .menuf li a { font-size: 10px; line-height: 1.5em; }
    footer .copyright { font-size: 12px; }
    .imglist img { width: 250px; display: block; margin: 0px auto 20px;  }
    #sec04 {
      padding: 50px 10px;
    }

    #sec05 {
      padding: 50px 10px;
    }

}