@charset "utf-8";

/* ---------------------------------------------
Reset
--------------------------------------------- */
html,
body {
  margin: 0;
  padding: 0;
}
/* Modern browser */
.lp_page__class *,
.lp_page__class *::before,
.lp_page__class *::after{box-sizing:border-box}
.lp_page__class *{margin:0;padding:0;}
.lp_page__class img,
.lp_page__class picture,
.lp_page__class video,
.lp_page__class canvas,
.lp_page__class svg{display:block;max-width:100%}
.lp_page__class input,
.lp_page__class button,
.lp_page__class textarea,
.lp_page__class select{font:inherit}
.lp_page__class p,
.lp_page__class h1,
.lp_page__class h2,
.lp_page__class h3,
.lp_page__class h4,
.lp_page__class h5,
.lp_page__class h6{overflow-wrap:break-word}


/* addition */
.lp_page__class img,
.lp_page__class video {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.lp_page__class em {
  font-style: normal;
}
.lp_page__class small {
  font-size: 70%;
}

.lp_page__class ul,
.lp_page__class ol,
.lp_page__class li {
  padding: 0;
  list-style: none;
}


/* ---------------------------------------------
font
--------------------------------------------- */
html {
  font-family: 'Noto Sans JP', sans-serif;
}

html body,
table th,
table td {
  line-height: 1.6;
  color: #000;
  font-size: 3.4vw;
}
@media screen and (min-width:751px) {
  html body,
  table th,
  table td {
    font-size: 25px;
  }
}

.lp_page__class strong,
.lp_page__class em {
  font-weight: 700;
}


/* ---------------------------------------------
link
--------------------------------------------- */
.lp_page__class a,
.lp_page__class a:link,
.lp_page__class a:visited {
  color: #1e87f0;
}
.lp_page__class a:hover {
  color: #f01e1e;
  text-decoration: none;
}


/* ---------------------------------------------
width
--------------------------------------------- */
.lp_page__wrapper {
  width: 100%;
  margin: 0 auto;
}
@media screen and (min-width:751px) {
  .lp_page__wrapper {
    width: 100%;
  }
}

.lp_page__class .contentsWrapper {
  width: 100%;
  margin: 0 auto;
}
@media screen and (min-width:751px) {
  .lp_page__class .contentsWrapper {
    width: 750px;
  }
}


/* ---------------------------------------------
cmn
--------------------------------------------- */
.lp_page__class .sec {
  margin: 0 auto;
}

.lp_page__class sup {
  font-size: 40%;
  vertical-align: super;
}

.lp_page__class .btn a:hover {
  filter: saturate(130%);
}

.lp_page__class .red1 {
  color: #d50001;
}
.lp_page__class .blu1 {
  color: #00008a;
}

.lp_page__class .taC {
  text-align: center;
}
.lp_page__class .taR {
  text-align: right;
}

.lp_page__class .note small {
  font-size: 2.7vw;
  display: block;
}
@media screen and (min-width:751px) {
  .lp_page__class .note small {
    font-size: 17px;
  }
}
.lp_page__class .note1 small {
  padding-left: 1em;
  text-indent: -1em;
}
.lp_page__class .note2 small {
  padding-left: 1.8em;
  text-indent: -1.8em;
}

/* cta */
.lp_page__class .cta {
  position: relative;
  z-index: 1;
}
.lp_page__class .cta1 {
  margin-bottom: 90px;
}
.lp_page__class .cta .ctaBg {
  padding: 1.3333vw 4.9333vw 2.6666vw;
  background: url(../images/dt-04/cta_bg.jpg) repeat-y right bottom;
  background-size: 100% auto;
}
@media screen and (min-width:751px) {
  .lp_page__class .cta .ctaBg {
    padding: 10px 37px 20px;
  }
}
.lp_page__class .cta .ctaNote {
  margin: 0 2.5em 1.5em;
}
.lp_page__class .cta .ctaBtn .btn {
  width: 98.522%;
  margin: 0 auto;
  transition: all .3s;
  animation: btn_animation .6s ease 0s infinite alternate;
}
@keyframes btn_animation {
  0% {
    transform: scale(1)
  }
  100% {
    transform: scale(.95)
  }
}
.lp_page__class .cta .ctaBtn .btn:hover {
  filter: brightness(1.2);
}
.lp_page__class .cta .ctaBtn .btn label {
  cursor: pointer;
}
.lp_page__class .cta .ctaBtn .btn .hidden {
  display: none;
}

/* video */
.lp_page__class .videoArea {
  position: relative;
}
.lp_page__class .videoArea .video {
  width: 92%;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
}
.lp_page__class .videoArea .bg {
  position: relative;
  z-index: 1;
}

/* js-fadeIn */
.lp_page__class .js-fadeIn__point {
  position: relative;
}
.lp_page__class .js-fadeIn__point .js-fadeIn {
  position: relative;
  transform: translateY(20px);
  opacity: 0;
}
@keyframes fadeIn {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.lp_page__class .js-fadeIn__point.active .js-fadeIn {
  animation: fadeIn 1.2s cubic-bezier(.46,.95,.65,.97) forwards;
}
.lp_page__class .js-fadeIn__point.active .js-fadeIn.js-fadeIn__delay1 {
  animation-delay: .4s;
}
.lp_page__class .js-fadeIn__point.active .js-fadeIn.js-fadeIn__delay2 {
  animation-delay: .8s;
}



/* ---------------------------------------------
#pageHeader
--------------------------------------------- */
#pageHeader {
  position: relative;
  z-index: 2;
}
#pageHeader .logo {
  width: 22.534%;
  position: absolute;
  top: 6.6667vw;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width:751px) {
  #pageHeader .logo {
    width: 169px;
    top: 50px;
  }
}



/* ---------------------------------------------
#mainContents
--------------------------------------------- */
#mainContents {
  position: relative;
  z-index: 1;
}


/* contentHeader */
/*
#mainContents .contentHeader #hero {
  margin-bottom: 100px;
}
*/
#mainContents .contentHeader #hero .txtArea2 {
  position: relative;
}
#mainContents .contentHeader #hero .txtArea2 .txt {
  position: relative;
  z-index: 1;
}
#mainContents .contentHeader #hero .txtArea2 .noteArea {
  position: absolute;
  top: 84%;
  left: 5%;
  z-index: 2;
}


/* contents */
#mainContents #sec2 .secTtlArea {
  position: relative;
}
#mainContents #sec2 .secTtlArea .secTtl {
  width: 100%;
  position: absolute;
  top: 14.66666vw;
  left: 0;
  z-index: 2;
}
@media screen and (min-width:751px) {
  #mainContents #sec2 .secTtlArea .secTtl {
    top: 110px;
  }
}
#mainContents #sec2 .secTtlArea .secTtl .txt1 {
  width: 74.267%;
  margin: 0 auto 5.3333vw;
  display: block;
}
@media screen and (min-width:751px) {
  #mainContents #sec2 .secTtlArea .secTtl .txt1 {
    margin-bottom: 40px;
  }
}
#mainContents #sec2 .secTtlArea .secTtl .txt2 {
  width: 76.8%;
  margin: 0 auto 2.6666vw;
  display: block;
}
@media screen and (min-width:751px) {
  #mainContents #sec2 .secTtlArea .secTtl .txt2 {
    margin-bottom: 0px;
  }
}
#mainContents #sec2 .secTtlArea .secTtl .txt3 {
  width: 90.8%;
  margin: 0 auto;
  display: block;
}
#mainContents #sec2 .secTtlArea .bg {
  position: relative;
  z-index: 1;
}


#mainContents #sec2 .txtArea1 {
  margin-bottom: -25px;
  position: relative;
  z-index: 2;
}
#mainContents #sec2 .txtArea1 .txt1 {
  width: 91.867%;
  margin: 0 0 0 auto;
  display: block;
}
#mainContents #sec2 .videoArea1 {
  position: relative;
  z-index: 1;
}
#mainContents #sec2 .videoArea1 .video video {
  aspect-ratio: 345/194;
}


#mainContents #sec3 .videoArea1 {
  width: 100%;
  padding: 20px 0;
  background-color: #fdffe5;
}
#mainContents #sec3 .videoArea1 .video {
  position: relative;
}
#mainContents #sec3 .videoArea1 .video video {
  aspect-ratio: 287 / 194;
}


#mainContents #sec4 .videoArea1 .video {
  width: 37.334%;
}
#mainContents #sec4 .videoArea1 .video video {
  aspect-ratio: 1 / 1;
}


#mainContents #sec8 .secTtlArea .secTtl {
  position: relative;
}
#mainContents #sec8 .secTtlArea .secTtl .txt1 {
  width: 100%;
  position: relative;
  z-index: 1;
}
#mainContents #sec8 .secTtlArea .secTtl .txt2 {
  width: 100%;
  position: absolute;
  bottom: 8vw;
  left: 0;
  z-index: 2;
}
@media screen and (min-width:751px) {
  #mainContents #sec8 .secTtlArea .secTtl .txt2 {
    bottom: 60px;
  }
}
#mainContents #sec8 .component {
  position: relative;
}
#mainContents #sec8 .component .bg {
  width: 100%;
  position: relative;
  z-index: 1;
}
#mainContents #sec8 .component .txt1 {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}


#mainContents #sec10 .secTtlArea .secTtl {
  position: relative;
}
#mainContents #sec10 .secTtlArea .secTtl .txt1 {
  position: relative;
  z-index: 1;
}
#mainContents #sec10 .secTtlArea .secTtl .txtArea1 {
  width: 100%;
  position: absolute;
  top: 23.3333vw;
  left: 0;
  z-index: 2;
  display: block;
}
@media screen and (min-width:751px) {
  #mainContents #sec10 .secTtlArea .secTtl .txtArea1 {
    top: 175px;
  }
}
#mainContents #sec10 .secTtlArea .secTtl .txtArea1 .txt2 {
  width: 39.2%;
  margin: 0 auto 3.6vw;
  display: block;
}
@media screen and (min-width:751px) {
  #mainContents #sec10 .secTtlArea .secTtl .txtArea1 .txt2 {
    margin-bottom: 27px;
  }
}
#mainContents #sec10 .secTtlArea .secTtl .txtArea1 .txt3 {
  width: 100%;
  margin: 0 auto;
  display: block;
}
#mainContents #sec10 .secTtlArea .secTtl .txtArea1 .txt4 {
  width: 61.067%;
  margin: 0 auto;
  display: block;
}


/* ---------------------------------------------
#pageFooter
--------------------------------------------- */
#pageFooter {
  padding: 6.66666vw 0;
  text-align: center;
}
@media screen and (min-width:751px) {
  #pageFooter {
    padding: 50px 0;
    font-size: 14px;
  }
}


.footer-links {
    background-color: #f8f8f8;
    padding: 20px 0;
    text-align: center;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links ul li {
    display: inline;
    margin: 0 15px;
    color: #006600!important;
}

.footer-links ul li a {
    text-decoration: underline;
    color: #006600!important;
    font-size: 14px;
}

@media (max-width: 600px) {
    .footer-links ul li {
        display: block;
        margin: 10px 0;
    }
}

/* ---------------------------------------------
#Q&AContents sec12
--------------------------------------------- */

.sec12_title{
margin-top:10%;
}

.question{
cursor: pointer;
}


.carousel_cta{
position: relative;
}

.carousel_btn{
  width: 98.522%;
  margin:10% auto;
  transition: all .3s;
  animation: btn_animation .6s ease 0s infinite alternate;
  position: absolute;
  cursor: pointer;
}

.carousel_btn:hover {
  filter: brightness(1.2);
}

.carousel_video{
width: 100%!important;
}

.container {
  margin: 0 auto;
/*  width: 90%;*/
  color: #333;
position: relative;
}

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
}

.single-item{
position: absolute!important;
width: 90%;
top: 0;
left: 0;
right: 0;
margin:1% auto 0;
}

.mb_5{
margin-bottom: 5%;
}

.mb_10{
margin-bottom: 10%;
}

/*
.carousel_bg{
background-image: url("../images/dt-01/carousel_02.jpg");
height: 958px;
}
*/