@charset "UTF-8";

/*******************
	Animation
********************/
@keyframes pulsebtn {
  0% {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

/*base*/
a:hover{
	opacity:.7;
}
div#container,#content{
	background: #e0f1f4;
}
.column-wrapper{
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.column-wrapper,header,main,footer{
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
}
/*header*/
header{
	box-sizing: border-box;
	background: #fff;
	padding: 3.73333333% 3.3333333% 4.666666666%;
}
header h1{
	width: 77.101449275%;
}
/*main*/
.qa{
	background: #e5f8fa;
}

/*link*/
section,section>div{
	position: relative;
}
.ctaBtn{
	display: block;
	width: 90.66666666%;
	position: absolute;
	left: 4.5%;
	animation: pulsebtn 0.9s ease 0s infinite alternate;
}
.ctaBtn.kvBtn{
	bottom: 8.7%;
}
.ctaBtn.gplBtn01{
	bottom: 10.7%;
}
.ctaBtn.gplBtn02{
	bottom: 6.7%;
}
.ctaBtn.menuBtn{
	bottom: 5%;
}
.ctaBtn.flowBtn{
	bottom: 4.5%;
}
.ctaBtn02{
	display: block;
	width: 90.66666666%;
	margin: 0 auto;
	padding: min(5.3333333vw, 40px) 0 min(13.3333333vw, 100px);
	animation: pulsebtn 0.9s ease 0s infinite alternate;
}
div#container main a.summaryBtn{
	font-family: 'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ', Meiryo,YuGothic,'Yu Gothic',sans-serif;
	font-size: min(3.3333333vw, 25px);
	color: #fff!important;
	position: absolute;
	left: 22.2%;
}
div#container main a.summaryBtn:hover{
	opacity: 1;
}
.summaryBtn.mj2_5{
	bottom: 80.5%;
}
.summaryBtn.mj5{
	bottom: 63.7%;
}
.summaryBtn.ryb3{
	bottom: 47%;
}
.summaryBtn.ryb7{
	bottom: 30.45%;
}
div#container._spView .summaryBtn{
	text-decoration: none!important;
}
div#container._spView .summaryBtn.mj2_5{
	bottom: 80.1%;
}
div#container._spView .summaryBtn.mj5{
	bottom: 63.3%;
}
div#container._spView .summaryBtn.ryb3{
	bottom: 46.7%;
}
div#container._spView .summaryBtn.ryb7{
	bottom: 30%;
}

.whatgpl{
	background: #fff;
}
.merit{
	margin-top: -5%;
}
.gplBtn03{
	bottom: 4.7%;
}
/*link step CRM*/
section.offWrap{
	position: relative;
}
section.offWrap div.cpn{
	position: absolute;
	width: 50.13333333%;
	cursor: pointer;
	bottom: 22%;
	left: 25%;
	animation: pulsebtn 0.9s ease 0s infinite alternate;
}
section.offWrap > a.ctaBtn {
    width: 88%;
    left: 6.4%;
	bottom: 4%;
}

section.gpl h2.stepGpl01{
	padding-top: 5%;
    background: #f0f8fa;
}
section.gpl p.stepGpl02{
    margin-top: -26%;
}
section.offWrap.off02{
	margin-top: -29%;
}
/* ============================================
   フローティングバナー（STEP）
============================================ */
.jsFltBnrStep {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-49.3%);
  width: 750px;
  z-index: 9999;
  display: none;
}

.jsFltBnrStep a {
	display: block;
	position: relative;
	overflow: hidden;
}
.jsFltBnrStep a:hover{
	opacity: 0.9;
}
.jsFltBnrStep a img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: bottom;
}

/* ---- 光が走るアニメーション ---- */
.jsFltBnrStep a span.twinkle {
  display: block;
  z-index: 11;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.jsFltBnrStep a span.twinkle::before {
  content: '';
  display: block;
  width: 68px;
  height: 300px;
  position: absolute;
  top: -60px;
  left: -120px;
  transform: rotate(30deg);
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0)   0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0)   100%
  );
  animation: twinkle01 1.8s ease-in-out infinite;
}

@keyframes twinkle01 {
  0%   { left: -110%;  opacity: 0.8; }
  100% { left: 110%;    opacity: 0.8; }
}
/*SP*/
@media screen and (max-width: 750px) {
  .jsFltBnrStep {
    width: 100%;
    left: 0;
    transform: none;
  }
	.jsFltBnrStep a{
		opacity: 1;
	}
}

/* ============================================
   footer
============================================ */
footer{
	box-sizing: border-box;
	background: #000;
	font-family: 'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ', Meiryo,YuGothic,'Yu Gothic',sans-serif;
	padding: 13.33333333% 5.33333333% 6.6666666666%;
}
footer p{
	width: 79.402985074%;
	margin: 0 auto min(16.666666666vw, 125px);
}
footer nav{
	
}
nav[aria-label="法的情報"] small{
	display: flex;
	flex-wrap: wrap;
	
	
}
footer nav small a{
    box-sizing: border-box;
	padding-left: min(1.6vw, 12px);
	color: #fff;
	font-size: min(3.2vw, 24px);
	text-decoration: none;
	width: 50%;
	margin-bottom: min(2.66666666vw, 20px);
	letter-spacing: 0.01em;
	display: flex;
    align-items: center;
	height: min(6.66666666vw, 50px);
	border-right: 1px solid #2c2c2c;
}
footer nav small a:nth-of-type(2){
	padding-left: min(4vw, 30px);
    border: none;
}
footer nav small a:last-of-type{
	margin-bottom: min(10vw, 75px);
}
footer > small{
	display: block;
	font-size: min(2.66vw, 18px);
	color: #fff;
	text-align: center;
	border-top: 1px solid #2c2c2c;
	padding: min(4vw, 30px) 0 0 0;
	letter-spacing: 0.01em;
}