body, input, textarea, select, button {
    font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}

.header{
	background: url(../img/bg_eye-c.png) center top #fff repeat-x;
	background-size: auto 430px;
	position: relative;
}

.inner{
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	position: relative;
}

.header .inner{
	height: 710px;
	display: flex;
    flex-direction: column;
    align-items: flex-start;
	padding-bottom: 60px
}

.header .inner .left{
	max-width: 600px;
	width: 100%;
	margin-top: 140px
}

.header .inner .left div+div{
	margin-top: 10px
}

.header .inner .left div p{
	font-weight: 900;
	font-size: 48px;
	line-height: 1;
	padding: 10px 10px 12px;
	background-color: #fff;
	display: inline-block;
}
.header .inner .left div p .accessary {
	font-feature-settings: "palt";
}

.header .inner .left div p .highlight,
h2 span,
.point .highlight,
.point h4 span{
	color: #ff9900
}

.search .highlight{
	color: #8fc314
}

.header .inner h1{
	font-size: 16px;
	font-weight: 900;
	text-align: center;
	margin-top: 110px;
	line-height: 1;
	position: relative;
	width: 570px;
}

.header .inner h1 img{
	max-width: 450px;
	width: 100%;
	height: auto;
	margin-top: 20px
}

/* .header .inner h1:after{
	content: "";
	background: url(../img/bubble.svg) center top no-repeat;
	width: 110px;
	height: 110px;
	position: absolute;
	margin-top: -80px
} */

.header .inner .right{
	position: absolute;
	right: 0;
	margin-right: -420px;
	top: 90px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

/*.header .inner .right .swiper-container{
	max-width: 730px;
	width: 100%;
	height: auto;
	position: absolute;
	z-index: 1;
	margin-top: 100px;
	margin-left: -30px
}

.header .inner .right .swiper-container img{
	width: 100%
}*/

.header .inner .right .scroll-box{
	position: absolute;
    background-color: #fff;
		width: 770px;
    height: 420px;
    margin-left: -15px;
    z-index: 1;
    margin-top: 100px;
    overflow: hidden;
    display: flex;
}

.header .inner .right .scroll-box img {
    max-width: none;
    width: auto;
    flex-shrink: 0;
    height: 100%;
}

.header .inner .right .scroll-box img:nth-of-type(1) {
	animation: loop 240s -120s linear infinite;
}
.header .inner .right .scroll-box img:nth-of-type(2) {
	animation: loop2 240s linear infinite;
}

@keyframes loop {
	0% {
		transform: translateX(100%);
	}
	to {
		transform: translateX(-100%);
	}
	}
	@keyframes loop2 {
	0% {
		transform: translateX(0);
	}
	to {
		transform: translateX(-200%);
	}
}


.header .inner .right .flame{
	height: auto;
	max-width: 1140px;
	width: 100%;
	position: relative;
	z-index: 9
}

.what{
	background-color: #fff8dd;
}

.what .inner{
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 950px
}

.what .inner>img:first-child{
	max-width: 514px;
	height: auto;
	margin-left: -56px;
	position: relative;
}

.what .inner .box{
	max-width: 600px;
	width: 100%;
	margin-right: 50px
}

.what .inner .box .caption{
	line-height: 1;
	margin-bottom: 50px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700
}

.what .inner .box h2{
	line-height: 1;
	font-weight: 900;
	font-size: 40px;
	line-height: 68px;
	margin-bottom: 60px
}

.what .inner .box .txt-box{
	font-size: 16px;
	line-height: 32px;
	font-weight: 500;
	text-align: justify;
}

.what .inner .box .txt-box p+p{
	margin-top: 38px
}

.what .inner:before,
.what .inner:after{
	position: absolute;
	content: "";
	display: block;
}

.what .inner:before{
	background: url(../img/illust_cloud_01.png) center top no-repeat;
	background-size: 100%;
	width: 360px;
	height: 148px;
	top: 80px;
	left: -60px
}

.what .inner:after{
	background: url(../img/illust_cloud_02.png) center top no-repeat;
	background-size: 100%;
	width: 380px;
	height: 112px;
	top: 90px;
	right: -30px
}

.point{
	padding-top: 80px;
	margin-bottom: 200px
}

h3.icon-set{
	display: flex;
	flex-direction: column;
    align-items: center;
	font-weight: 900;
    line-height:1;
    position: relative;
    margin-bottom: 70px
}

.cv h3.icon-set{
	color: #fff
}

h3.icon-set:before{
	content: "";
	width: 80px;
	height: 80px;
	margin-bottom: 30px
}

.point h3.icon-set:before{
	background: url(../img/icon_feature.svg) center top no-repeat;
}

.search h3.icon-set:before{
	background: url(../img/icon_search.svg) center top no-repeat;
}

.cv h3.icon-set:before{
	background: url(../img/icon_user_min.svg) center top no-repeat;
}

h3.icon-set .speech{
	font-size: 23px;
	position: relative;
	margin-bottom: 40px
}

h3.icon-set .speech:before,
h3.icon-set .speech:after{
	content: "";
	width: 2px;
	height: 160%;
	background-color: #000;
	display: block;
	position: absolute;
	top: -30%
}

.cv h3.icon-set .speech:before,
.cv h3.icon-set .speech:after{
	background-color: #fff;
}

h3.icon-set .speech:before{
	left: -20px;
    transform: rotate(-35deg);
}

h3.icon-set .speech:after{
	right: -20px;
	transform: rotate(35deg);
}

h3.icon-set .big,
.point .inner .box .txt-box h4{
	font-size: 36px;
}

h3.icon-set .big span{
	font-size: 48px
}

.point .inner .box{
	display: flex;
	justify-content: space-between;
    align-items: center;
}

.point .inner .box:nth-child(3){
	flex-direction: row-reverse;
	align-items: flex-end;
}

.point .inner .box img{
	max-width: 660px;
	width: 100%;
	height: auto;
	border-radius: 10px
}

.point .inner .box+.box{
	margin-top: 100px
}

.point .inner .box .txt-box{
	width: 480px;
	text-align: center;
	display: flex;
    flex-direction: column;
    align-items: center;
}

.point .inner .box .txt-box .caption{
	margin-bottom: 50px
}

.point .inner .box .txt-box .caption img{
	width: 120px;
	height: auto;
}

.point .inner .box .txt-box h4{
	font-weight: 900;
	margin-bottom: 40px
}

.point .inner .box .txt{
	font-weight: 700;
	font-size: 20px;
	line-height: 38px
}

.point .inner .box .txt-box .note{
	font-size: 12px;
	color: #616161;
	line-height: 20px;
	margin-top: 30px;
	text-align: left;
	text-indent: -12px;
	padding-left: 12px
}

.point .inner .box ul{
	display: flex;
	justify-content: space-between;
	width: 100%
}

.point .inner .box ul li{
	background-color: #fff8dd;
	border-radius: 10px;
	width: 580px;
	height: 580px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
}

.point .inner .box li .caption{
	width: 140px;
	height: auto;
	margin-bottom: 60px
}

.point .inner .box li .caption+img{
	width: 150px;
	height: 150px;
	margin-bottom: 40px
}

.point .inner .box li h4{
	font-size: 28px;
	font-weight: 900;
	margin-bottom: 30px
}

.search{
	padding-top: 80px;
	padding-bottom: 140px;
	background-color: #ecf5e1
}

.search ul{
	display: flex;
	justify-content: space-between;
}

.search ul li{
	max-width: 375px;
	width: 100%;
	text-align: center;
}

.search ul li img{
	width: 100%;
	height: auto;
	margin-bottom: 30px;
}

.search ul li h4{
	font-weight: 900;
	font-size: 28px;
	line-height: 1;
	margin-bottom: 20px
}

.search ul li p{
	text-align: justify;
	font-size: 16px;
	line-height: 30px;
	font-weight: 700
}

.footer{
	position: relative;
	z-index: 19
}

.footer .cv{
	background: url(../img/bg_cv.png) center bottom #003ab4 repeat-x;
	background-size: auto 468px;
	/*height: 100vh;*/
	position: relative;
	color: #fff
}

.footer .cv .inner{
	min-height: 820px;
	padding-top: 80px;
}

.footer .cv h3 .big{
	font-size: 48px;
	line-height: 1
}

.footer .cv h4{
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 50px
}

.footer .cv h4 span{
	border-bottom: 3px dotted #fff;
	padding-bottom: 10px;
	display: inline-block;
	width: 600px;
}

.footer .cv .cv-btn{
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	font-weight: 900;
	
	line-height: 1;
	position: relative;
	box-sizing: border-box;
	transition: opacity 0.2s;
}

.footer .cv .cv-btn.register {
	max-width: 600px;
	height: 120px;
	font-size: 30px;
	background-color: #fff8dd;
	border: 2px solid #fff8dd;
	color: #003ab4;
}

.footer .cv .cv-btn.register:hover{
	opacity: 0.8;
}

.footer .cv .cv-btn.done {
	max-width: 600px;
	height: 60px;
	margin-top: 20px;
	font-size: 18px;
	background-color: transparent;
	border: 2px solid #fff;
	color: #fff;
}

.footer .cv .cv-btn.done:hover{
	opacity: 0.7;
}

/* .footer .cv .cv-btn{
	border-radius: 10px;
	max-width: 600px;
	height: 120px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	background-color: #fff558;
	border: 2px solid #fff558;
	color: #003ab4;
	font-weight: 900;
	font-size: 30px;
	line-height: 1;
	position: relative;
	box-sizing: border-box;
	transition: 0.2s
}

.footer .cv .cv-btn:hover,
.footer .cv .cv-btn.not-active{
	background-color: transparent;
	border: 2px solid #fff;
	color: #fff;
} */
/*
.footer .cv .cv-btn.not-active{
	pointer-events: none
}*/

.footer .cv .cv-btn:after{
	position: absolute;
	content: "";
	background: url(../img/icon_arrow_bl.svg) center bottom no-repeat;
	background-size: 100%;
	width: 36px;
	height: 36px;
	right: 18px
}

.footer .cv .cv-btn.not-active:after{
	display: none;
}

/* .footer .cv .cv-btn:hover:after{
	background: url(../img/icon_arrow_wh.svg) center bottom no-repeat;
} */

.footer .cv .inner .link-copy,
.footer .cv .inner .link-copy ul{
	display: flex;
}

.footer .cv .inner .link-copy{
	justify-content: space-between;
	position: absolute;
	bottom: 30px;
	width: 100%;
	font-size: 12px;
	font-weight: 500
}

.footer .cv ul{
	display: flex;
}

.footer .cv ul li+li{
	margin-left: 20px
}

.fixd-outer{
	background-color: #fff;
	border-radius: 20px 0 0 0;
	position: fixed;
	right: 0;
	bottom: 0;
	width: 150px;
	height: 150px;
    text-align: center;
    z-index: 10;
	overflow: hidden;
}

.fixd-btn{
	background-color: #003ab4;
	width: 100%;
	height: 100%;
	color: #fff;
	font-weight: 900;
	font-size: 16px;
	display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 24px;
    z-index: 10;
	overflow: hidden;
	transition: 0.2s;
}

.fixd-btn:hover{
	opacity: 0.6
}

.fixd-btn:after{
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 8px 8px;
	border-color: transparent transparent #ffffff transparent;
	position: absolute;
	right: 8px;
	bottom: 8px
}

.fixd-btn img{
	width: 60px;
	height: 60px;
	margin-bottom: 10px
}

.illust{
	position: absolute;
}

.illust02{
	right: -14px;
	bottom: -180px;
	width: 380px;
	height: auto;
}

.illust03{
	width: 495px;
	height: auto;
	left: -130px;
	top: -210px
}

.illust04{
	width: 368px;
	height: auto;
	right: -50px;
	top: -190px
}

.illust05{
	width: 500px;
	height: auto;
	left: -180px;
	top: -60px
}

@media screen and (max-width: 768px){

	.header{
	    background-size: auto 54%;
	}

	.header .inner{
		padding-bottom: 0;
		justify-content: center;
		margin-bottom: 60px
	}

	.header .inner .left{
		max-width: none;
		width: auto;
		margin: -6vh auto 0;
		z-index: 2;
	}

	.header .inner .left div p {
		font-size: 7vw;
		/*margin-left: 10px;*/
	}

	.header .inner h1 {
	    font-size: 12px;
	    margin-top: 0;
	    width: 100%;
	    position: relative;
	    z-index: 9
	}

	.header .inner h1 img{
		max-width: 42vh;
		margin-top: 10px
	}

	.header .inner h1:after {
	    width: 60px;
	    height: 60px;
	    margin-top: -80px;
	    right: 10px;
	}

	.header .inner .right {
	    margin-right: 0;
	    top: auto;
	    margin-top: 20px;
	    position: relative;
	    z-index: 1;
	    width: 100%
	}

	/*.header .inner .right .swiper-container {
	    max-width: 250px;
	    margin-top: 30px;
	    margin-left: -10px;
	    height: 134px;
	}*/

	.header .inner .right .scroll-box{
		margin-top: 4vh;
		width: 32vh;
		height: 18vh;
		margin-left: -1vh;
	}

	.header .inner .right .flame{
		max-width: 46vh;
		height: auto;
	}

	.what .inner{
		flex-direction: column;
		min-height: 100%;
		height: auto;
		justify-content: flex-start;
		padding: 0 20px 140px;
	}

	.what .inner>img:first-child{
		width: 90%;
		margin-left: 0;
		margin-top: -50px
	}

	.what .inner .box{
		margin-right: 0;
		margin-top: 40px
	}

	.what .inner .box .caption{
		font-size: 14px;
		margin-bottom: 20px
	}

	.what .inner .box h2{
		font-size: 6vw;
		line-height: 12vw;
		margin-bottom: 30px
	}

	.what .inner .box .txt-box p+p{
		margin-top: 20px
	}

	.what .inner .box .txt-box{
		font-size: 14px;
		line-height: 26px
	}

	.what .inner:before,
	.what .inner:after{
		display: none;
	}

	.point{
		padding: 140px 10px 0;
		margin-bottom: 240px
	}

	h3.icon-set{
		margin-bottom: 40px
	}

	h3.icon-set:before {
	    width: 60px;
	    height: 60px;
	    margin-bottom: 20px;
	}

	h3.icon-set .speech{
		font-size: 4vw;
		margin-bottom: 10px
	}

	h3.icon-set .big,
	.point .inner .box .txt-box h4{
		font-size: 7vw
	}

	h3.icon-set .big span{
		font-size: 9vw
	}

	.point .inner .box,
	.point .inner .box+.box{
		flex-direction: column;
	}

	.point .inner .box img{
		max-width: 100%
	}

	.point .inner .box .txt-box{
		width: 100%;
		margin-top: 20px
	}

	.point .inner .box .txt-box .caption,
	.point .inner .box .txt-box h4{
		margin-bottom: 10px
	}

	.point .inner .box .txt{
		font-size: 4vw;
		line-height: 7vw
	}

	.point .inner .box+.box{
		margin-top: 50px
	}

	.point .inner .box .txt-box .note{
		margin-top: 20px
	}

	.point .inner .box ul{
		flex-direction: column;
	}

	.point .inner .box ul li{
	    width: 100%;
	    height: auto;
	    padding: 40px 10px 50px;
	}

	.point .inner .box li .caption{
		margin-bottom: 20px
	}

	.point .inner .box li .caption+img{
		width: 100px;
		height: 100px;
		margin-bottom: 20px
	}

	.point .inner .box li h4{
		font-size: 6vw;
		margin-bottom: 10px
	}

	.point .inner .box ul li+li{
		margin-top: 20px
	}

	.search{
		padding: 160px 10px
	}

	.search ul {
	    flex-direction: column;
	}

	.search ul li{
		display: flex;
	    flex-wrap: wrap;
	    flex-direction: row;
	    align-items: center;
	    max-width: 100%
	}

	.search ul li img{
		width: 150px;
		margin-bottom: 0
	}

	.search ul li div{
		padding-left: 10px;
		width: calc(100% - 150px)
	}

	.search ul li h4{
		text-align: left;
		font-size: 5vw;
		margin-bottom: 10px
	}

	.search ul li p{
		font-size: 3vw;
		line-height: 5vw;
		letter-spacing: -0.4px;
		font-weight: 500
	}

	.search ul li+li{
		margin-top: 30px
	}

	.footer .cv{
	    background-size: auto 70%;
	}

	.footer .cv .inner{
		padding: 180px 15px 20px;
		min-height: 100%
	}

	.footer .cv h3 .big{
		font-size: 10vw
	}

	.footer .cv h4{
		font-size: 3.2vw;
		margin-bottom: 30px;
		line-height: 1;;
	}

	.footer .cv h4 span{
		box-sizing: border-box;
		display: block;
		width: 100%;
	}

	.footer .cv .cv-btn{
		height: auto !important;
		max-width: 100%
	}

	.footer .cv .cv-btn.register{
		padding: 30px 0;
		font-size: 5vw;
	}

	.footer .cv .cv-btn.done{
		padding: 15px 0;
		font-size: 4vw;
	}

	.footer .cv .cv-btn:after {
		width: 26px;
		height: 26px;
		right: 12px;
	}

	.footer .cv .inner .link-copy{
		position: relative;
		bottom: auto;
		margin-top: 100px;
		display: block;
	}

	.footer .cv .inner .link-copy ul{
		justify-content: center;
	}

	.footer .cv .inner .link-copy p{
		font-size: 10px;
		text-align: center;
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #fff
	}

	.fixd-outer{
		border-radius: 10px 10px 0 0;
	    width: 90%;
	    height: 50px;
	    right: 5%
	}

	.fixd-btn {
	    font-size: 14px;
	    line-height: 1;
	    flex-direction: row;
	    justify-content: center;
	    align-items: center;
	}

	.fixd-btn img{
		width: 28px;
		height: 28px;
		margin-bottom: -2px;
		margin-right: 10px
	}

	.fixd-btn br{
		display: none;
	}

	.illust02{
		right: -20px;
		bottom: -100px;
		width: 300px;
	}

	.illust03{
		width: 320px;
		left: calc(50% - 160px);
		top: -310px;
	}

	.illust04{
		display: none;
	}

	.illust05 {
        width: 390px;
		left: -130px;
		top: -90px;
	}

}