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

/*Animation*/
.scale-up-bl {
	-webkit-animation: scale-up-bl 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-bl 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.slide-bottom {
	-webkit-animation: slide-bottom 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-bottom 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.focus-in-expand-fwd {
	-webkit-animation: focus-in-expand-fwd 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: focus-in-expand-fwd 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slide-right2 {
	-webkit-animation: slide-right 1.0s ease-in forwards;
	        animation: slide-right 1.0s ease-in forwards;
}
.slide-right3 {
	-webkit-animation: slide-right 1.2s ease-in forwards;
	        animation: slide-right 1.2s ease-in forwards;
}

.slide-right {
	-webkit-animation: slide-right 1.0s ease forwards;
	        animation: slide-right 1.0s ease forwards;
}
.slide-left {
-webkit-animation: slide-in-right 1s forwards;
	        animation: slide-in-right 1s forwards;
}
.slide-bottom {
	-webkit-animation: slide-bottom 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-bottom 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slide-bottombounse {
	-webkit-animation: slide-bottombounse 1.5s ease-out infinite alternate forwards;
	        animation: slide-bottombounse 1.5s ease-out infinite alternate forwards;
}
.slide-in-top {
	-webkit-animation: slide-in-top 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-top 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
			
}
.slide-in-top2 {
	-webkit-animation: slide-in-top 1.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-top 1.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slide-in-top3 {
	-webkit-animation: slide-in-top 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-top 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slide-in-bottom {
	-webkit-animation: slide-in-top 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-top 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
			
}


.fade-in-fwd {
	-webkit-animation: fade-in-fwd 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-fwd 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}


.textshadow{text-shadow: 1px 20px 50px -20px #000;}
.textshadow2{text-shadow:1.5px 1.5px 1px #fff, -1.5px -1.5px 1px #fff, -1.5px -1.5px 1px #fff, -1.5px 1.5px 1px #fff, 1.5px -1.5px 1px #fff;}

.boxshadow{text-shadow: 1px 20px 50px -20px #000;}

/**/
@media screen and (min-width:1000px){
.h1 {font-size: 55px;position: relative;color: #05a5bd;font-weight: 600;
    background-image: -webkit-linear-gradient(90deg, #1F849E 0%, #48BDDB 100%);
    background-image:linear-gradient(90deg, #1F849E 0%, #48BDDB 100%);
    -webkit-background-clip: text;
	background-clip: text;
    
    }
}
@media screen and (max-width:999px){
.h1 {font-size: 30px;position: relative;color: #05a5bd;font-weight: 600;
    background-image: -webkit-linear-gradient(90deg, #1F849E 0%, #48BDDB 100%);background-image:linear-gradient(90deg, #1F849E 0%, #48BDDB 100%);
    -webkit-background-clip: text;background-clip: text;}
}

.h1_2 {font-size: 30px;position: relative;color: #05a5bd;font-weight: 600;
    background-image: -webkit-linear-gradient(90deg, #1F849E 0%, #48BDDB 100%);background-image:linear-gradient(90deg, #1F849E 0%, #48BDDB 100%);
    -webkit-background-clip: text;
	background-clip: text;}
.h1:after,
.h1_2:after{content: "";width: 30%;display: block;height: 3px;
    background: #f19f9d;background: -moz-linear-gradient(-45deg, #f2c9c8 0%, #d2eff6 100%);
    background: -webkit-linear-gradient(-45deg, #f2c9c8 0%, #d2eff6 100%);
    background: linear-gradient(135deg, #f2c9c8 0%, #d2eff6 100%);margin-bottom: 50px;}
.h2 {font-size: 30px;color:#fff;font-weight: 500;margin: 30px 0;padding:10px;border-bottom: 3px solid #fcdb68;border-top: 3px solid #fcdb68;
box-shadow: 1px 10px 20px -10px rgba(0,0,0,0.4);
background:linear-gradient(180deg, #F19F9D 8%, rgba(0,0,0,0) 0%), linear-gradient(360deg, #F19F9D 8%, rgba(0,0,0,0) 0%), #6BCAE2;}
h3{color:#27A8C8;font-weight: 600;margin: 30px 0;font-size: 26px;background:linear-gradient(5deg, #F9E7E7 15%, rgba(0, 0, 0, 0) 16%)}
h4, .h4{color:#565656;font-weight: 600;margin: 30px 0;font-size: 22px;border-bottom: 1px solid #27A8C8;}

.list1{position: relative;}	
.list1 li{display: block;border-bottom:1px solid #F19F9D;padding: 10px 5px 10px 40px;margin-bottom: 1px;font-weight: 400;}
.list1 li:before{content: "\f10b";font-family:"Ionicons";color: #fff;font-size: 26px;background: #F19F9D;padding: 0 5px;border-radius: 50%;
margin: 0 15px 0 0;display:inline-block;width: 20px;top:10px;left: 0.1em;position: absolute;}

.list2{position: relative;}	
.list2 li{display: block;padding: 15px 5px 15px 40px;margin-bottom: 1px;font-weight: 400;}
.list2 li:before{content: "\f11f";font-family:"Ionicons";color: #F19F9D;font-size: 30px;padding: 0 5px;margin: 0 15px 0 0;display:inline-block;width: 20px;top:15px;left: 0.1em;position: absolute;}

.list3{position: relative;}	
.list3 li{display: block;font-weight: 400;}
.list3 li:before{content: "\f383";font-family:"Ionicons";color:#6bcae2;margin: 10px 8px 0 0;display:inline-block;}

.list4{position: relative;}	
.list4 li{display: block;font-weight: 400;}
.list4 li:before{content: "●";font-family:"Ionicons";color:#6bcae2;margin: 10px 8px 0 0;display:inline-block;}

.list5 li{counter-increment: step-counter;display:block;margin-bottom: 15px;}
.list5 li:before {content: counter(step-counter); margin-right: 5px;background-color: #a8c827; color: #FFF; font-weight: 600;padding: 2px 8px;border-radius: 10%;}

/*.listfloat{display: flex;-webkit-justify-content: space-around;justify-content:space-around;-webkit-flex-wrap: wrap;flex-wrap:wrap;}
.listfloat li{width: 25%;}*/

.listdl dt{counter-increment: step-counter;display:block;margin-bottom: 10px;}
.listdl dt:before {content: counter(step-counter);
  margin-right: 5px;background-color: #27A8C8;
  color: #FFF;
  font-weight: 600;padding: 3px 10px;border-radius: 50%;}
  .listdl dd{margin-bottom: 20px;text-indent: 40px;padding-bottom: 10px; border-bottom: 1px solid #fafafa;display: block;}

/*float*/
.imgfloatl{float: left;margin: 0 10px 10px 0}
.imgfloatr{float: right;margin: 0 0 10px 10px}
.imground{border-radius: 50%;}
.imground2{border-radius: 5%; padding: 5px!important; border: 1px solid #f3f3f3;}


/*============================*/
.modal {opacity: 0;visibility: hidden;position: fixed;top: 0;right: 0;bottom: 0;left: 0;text-align: left;background: rgba(0,0,0, .9);transition: opacity .25s ease;}
.modal__bg {position: absolute;top: 0;right: 0;bottom: 0;left: 0;cursor: pointer;}
.modal-state {display: none;}
.modal-state:checked + .modal {opacity: 1;visibility: visible;z-index: 99;}
.modal-state:checked + .modal .modal__inner {top: 0;}

.modal__inner {transition: top .25s ease;
  position: absolute;top: -20%;right: 0;bottom: 0;left: 0;width: 50%;
  margin: auto; overflow: auto; background: #fff;
  border-radius: 5px; padding: 1em 2em;height: 50%}
  
  .modal__inner2 {transition: top .25s ease;
  position: absolute;top: -1%;right: 0;bottom: 0;left: 0;width: 50%;
  margin: auto; overflow: auto; background: #fff;
  border-radius: 5px; padding: 1em 2em;height: 90%}

.modal__close {position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer;}
/*.modal__close:after,
.modal__close:before{content: ''; position: absolute; width: 2px; height: 1.5em; background: #ccc;
  display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0;}
  .modal__close:hover:after,
.modal__close:hover:before{ background: #aaa;}
.modal__close:before {transform: rotate(-45deg);}*/
.modal__close:before{content: '\f2d7';font-family:"Ionicons"; position: absolute; display: block;margin: -3px 0 0 -8px; top: 0;font-size: 40px;z-index: 1;color: #FFF;
transition: ease all .8s;}
.modal__close:after{content:' '; background: #a2deed;display: block;width: 40px;height: 40px;position: absolute; display: block;left: -45%; margin: -3px 0 0 -10px; top: 0;
border-radius: 50%;border: 3px solid #74dcf7;}
.modal__close:hover:after{background: #f4f6ff;border: 3px solid #05a5bd;}
.modal__close:hover:before{color: #05a5bd;}

@media screen and (max-width: 768px) {
	
  .modal__inner,
  .modal__inner2{
    width: 90%;
    height: 90%;padding: 15px;
    box-sizing: border-box;
  } 
  
}

/*===hr==*/
.str{border: 0; height: 20px;margin: 50px auto;border-top: 1px solid #fefefe;
  width: 80%;  background-image: radial-gradient(farthest-side at 50% -250%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  position: relative;}

.str::before {
  height: 1px;
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.3) 50%, transparent);
}

/*==QA==*/
.Question{width:100%;display:block;position: relative;padding: 25px 0px 10px 60px;}
.Question:before {content: '';background: #27a7d4;position: absolute; top: 25px;
left: 5px;width: 40px;height: 40px;border-radius: 25px;}
.Question:after{content: 'Q';color: #FFF;font-size: 1.5em;position: absolute;top:0.8em;left: 0.45em;font-weight: 800;}
.QuestionTitle{border-bottom: 1px solid #27a7d4;color: #27a7d4;font-weight: 600;font-size: 1.2em;}

.Answer{position: relative; display:block; padding: 5px 0px 30px 130px; border-bottom: 1px dotted #E4E4E4;}
.Answer:before {content: '';background: #EE7B88; position: absolute; top: 0px; left: 60px; width: 40px; height: 40px; border-radius: 25px;}
.Answer:after{content: 'A';color: #FFF;font-size: 1.8em;font-weight: 800;position: absolute;top:-0.15em;left: 2.1em;}
.AnswerTitle{font-weight: 400;color:#333; border: 1px solid #efefef;padding: 15px 20px;border-radius: 5px;}


/* 各ベンダープレフィックスが取れた標準版！！(http://caniuse.com/#search=placeholder-shown) */
:placeholder-shown {color: red !important; }
/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder { color: #ccc !important;font-size: 0.8em;}
/* Firefox 18- */
:-moz-placeholder {color: #ccc !important;font-size: 0.8em;opacity: 1; }
/* Firefox 19+ */
::-moz-placeholder {color: #ccc !important;font-size: 0.8em;opacity: 1; }
/* IE 10+ */
:-ms-input-placeholder { color: #ccc !important;font-size: 0.8em;}