*,::after,::before{box-sizing:border-box;word-wrap:break-word;transition:all .25s ease;}html{line-sizing:normal}body{margin:0}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.17rem}hr{border-style:solid;border-width:1px 0 0;color:inherit;height:0;overflow:visible}audio,canvas,embed,iframe,img,object,svg,video,picture{display:block;vertical-align:middle;max-width:100%}canvas,img,svg,video{height:auto}audio{width:100%}img{border-style:none}svg{overflow:hidden}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}
p, dd, figure { margin: 0; }
h1,h2,h3 { margin: 0; }
*, *::before, *::after { box-sizing: border-box; word-break: break-all; }
ul, ol { list-style: none; }

html {
	position: relative;
	min-height: 100%;
	font-family: 'Bai Jamjuree', 'Noto Sans JP';
}
body {
	height: 100%;
	margin: 0;
	padding: 0;
	color: #000;
	background: #fff;
	font-size: 100%;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: unset;
}

.btn:hover {
	transform: translate(0, 3px);
}
.wrap {
	width: 100%;
	margin: 0 auto;
}

.sec {
	width: 100%;
	position: relative;
}
.secHead img {
	margin: 0 auto;
	width: 100%;
	max-width: 100%;
}
.inner {
	width: 100%;
	position: relative;
}
.inner > img {
	margin: 0 auto;
}

:root {
	--plus: 6vw;
}
.sec:not(.sec04) .inner::before,
.sec:not(.sec04) .inner::after {
	content: '';
	position: absolute;
	z-index: 1;
	display: block;
	width: var(--plus);
	height: var(--plus);
	background-image: url(../img/plus.png);
	background-repeat: no-repeat;
	background-size: var(--plus);
}
.inner::before {
	left: calc(var(--plus) / 2);
	top: calc(var(--plus) / 1.5);
}
.inner::after {
	right: calc(var(--plus) / 2);
	bottom: calc( (var(--plus) / 2) + 2%);
}
@media (min-width: 750px) {
	.inner::after {
		right: calc(var(--plus) / 2);
		bottom: calc( (var(--plus) / 2) + 7.5%);
	}
	.sec02 .inner::after {
		right: calc(var(--plus) / 2);
		bottom: calc( (var(--plus) / 2) + 4.5%);
	}
	.sec03 .inner::after {
		right: calc(var(--plus) / 2);
		bottom: calc( (var(--plus) / 2) + .25%);
	}
}

.header {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	background: #fff;
	padding: 2.5% 0;
}
.header img {
	width: 30%;
}
@media (min-width: 750px) {
	.header {
		position: absolute;
		top: 0;
		left: 0;
		padding: 1% 0;
		z-index: 1000;
	}
	.header img {
		width: 19%;
	}
}

.fv {
	position: relative;
	width: 100%;
	overflow: hidden;
	z-index: 10;
}
.fv .fv_obj1 {
	position: absolute;
	z-index: 1;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 4.5%;
    width: 61%;
}
.fv .fv_obj2 {
	position: absolute;
	z-index: 1;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 16.75%;
    width: 73%;
}
.fv .fv_obj3 {
	position: absolute;
	z-index: 1;
    width: 67%;
    top: 27.5%;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.fv .fv_obj4 {
	position: absolute;
	z-index: 1;
    right: 0;
    top: 49%;
    left: 0;
    margin: 0 auto;
    width: 32.5%;
}
.fv .fv_obj5 {
	position: absolute;
	z-index: 2;
    right: 6%;
    top: 52.75%;
    left: auto;
    margin: 0 auto;
    width: 33.75%;
}
.fv .fv_bg {
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
}
@media (min-width: 750px) {
	.fv .fv_obj1 {
		position: absolute;
	    z-index: 1;
	    left: 17.5%;
	    right: auto;
	    margin: 0 auto;
	    top: 16%;
	    width: 32%;
	}
	.fv .fv_obj2 {
		position: absolute;
	    z-index: 1;
	    left: 14%;
	    right: auto;
	    margin: 0 auto;
	    top: 35%;
	    width: 39%;
	}
	.fv .fv_obj3 {
		position: absolute;
	    z-index: 1;
	    width: 35%;
	    top: 52%;
	    left: 16%;
	    right: auto;
	    margin: 0 auto;
	}
	.fv .fv_obj4 {
		position: absolute;
	    z-index: 1;
	    right: 25%;
	    top: 13.5%;
	    left: auto;
	    margin: 0 auto;
	    width: 19.5%;
	}
	.fv .fv_obj5 {
		position: absolute;
	    z-index: 2;
	    right: 10%;
	    top: 23%;
	    left: auto;
	    margin: 0 auto;
	    width: 18%;
	}
	.fv .fv_bg {
		z-index: 0;
		top: 0;
		left: 0;
		width: 100%;
	}
}


/* sec01
____________________________________________________ */
.sec01 {
	z-index: 9;
	margin-top: -7.5%;
}
.sec01 .inner .secHead {
	display: block;
	position: absolute;
	top: 3%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 90%;
}
.sec01 .inner .points {
	display: flex;
	position: absolute;
	top: 13%;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 0;
	flex-direction: column;
	align-items: center;
	width: 100%;
}
.sec01 .inner .points figure {
	width: 100%;
	margin: 0 auto;
}
.sec01 .inner .points figure img {
	width: 100%;
	padding: 5% 22% 0% 18%;
}
.sec01 .inner .points figure dl {
	padding: 0;
	margin: 0;
	width: 100%;
}
.sec01 .inner .points figure dl dt {
	font-size: 6vw;
	font-weight: 600;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: .5em 0;
	line-height: 1.3;
}
.sec01 .inner .points figure dl dd {
	text-align: center;
	font-size: 3.7vw;
	font-weight: 500;
	padding: 0 1em;
}
.sec01 .inner .btnWrap {
	display: block;
	position: absolute;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 6.5%;
	margin: 0 auto;
}
.sec01 .inner .btnWrap .btn {
	display: block;
	width: 75%;
	margin: 0 auto;
}
.sec01 .inner .btnWrap .btn img {
	width: 100%;
}
.sec01_bg {
	width: 100%;
}
@media (min-width: 750px) {
	.sec01 {
		margin-top: -7.5%;
	}
	.sec01 .inner .secHead {
		top: 10%;
		width: 74%;
	}
	.sec01 .inner .points {
		top: 27.5%;
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		width: 84%;
	}
	.sec01 .inner .points figure {
		width: calc( 100% / 3 - 3% );
		margin: 0 1.5% 0 1.5%;
	}
	.sec01 .inner .points figure img {
		width: 100%;
		/* padding: 5% 20% 0% 16%; */
		padding: 0;
	}
	.sec01 .inner .points figure dl {
		padding: 0 0 0 5%;
		margin: 0;
	}
	.sec01 .inner .points figure dl dt {
		font-size: 2vw;
		min-height: 5.5em;
		padding: 0;
	}
	.sec01 .inner .points figure dl dd {
		text-align: left;
		/* font-size: 1.27vw; */
		font-size: 1.1rem;
		font-weight: 600;
	}

	.sec01 .inner .btnWrap {
		bottom: 10%;
	}
	.sec01 .inner .btnWrap .btn {
		width: 50%;
	}
}

/* sec02
____________________________________________________ */
.sec02 {
	z-index: 8;
	margin-top: -7.5%;
}
.sec02 .inner .secHead {
	display: block;
	position: absolute;
	top: 2.75%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 54%;
}
.sec02 .inner .howto {
	display: flex;
	position: absolute;
	top: 5.75%;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 0;
	flex-direction: column;
}
.sec02 .inner .howto li {
	width: 100%;
	margin: auto;
	padding: 0 10% 5.5% 10%;
}
.sec02 .inner .howto::after {
	--triangle: 9vw;
	content: '';
	display: block;
	position: absolute;
	width: var(--triangle);
	height: calc( var(--triangle) * .8 );
	background-image: url(../img/triangle.png);
	background-size: var(--triangle);
	top: calc( 100% + var(--triangle) / 3 );
	left: 0;
	right: 0;
	margin: 0 auto;
}
.sec02 .inner .btnWrap {
	display: block;
	position: absolute;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 4.5%;
	margin: 0 auto;
}
.sec02 .inner .btnWrap .btn {
	display: block;
	width: 65%;
	margin: 0 auto;
}
.sec02 .inner .btnWrap img {
	width: 100%;
	display: block;
	width: 65%;
	margin: 0 auto;
}
.sec02_bg {
	width: 100%;
}
@media (min-width: 750px) {
	.sec02 {
		margin-top: -7.5%;
	}
	.sec02 .inner .secHead {
		top: 5.75%;
	}
	.sec02 .inner .howto {
		top: 13.5%;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;
		width: 97%;
		padding-bottom: 8.5%;
	}
	.sec02 .inner .howto li {
		/* width: calc( 100% / 2 - 3.5% ); */
		width: calc( 100% / 2 );
		/* margin: 0 2.5% 5% 1%; */
		padding: 0 2.5% 5% 1%;
		/* padding: 0; */
	}
	.sec02 .inner .howto li:nth-of-type(even) {
		transform: translateY(24.5%);
	}
	.sec02 .inner .howto::after {
		--triangle: 7vw;
		top: calc( 100% + var(--triangle) / 1.9 );
	}
	.sec02 .inner .howto li img {
		width: 100%;
	}
	.sec02 .inner .btnWrap {
		bottom: 7.5%;
	}
	.sec02 .inner .btnWrap img {
		width: 38%;
	}
}

/* sec03
____________________________________________________ */
.sec03 {
	z-index: 7;
	margin-top: -7.5%;
	padding-bottom: 8rem;
}
.sec03 .inner .secHead {
	display: block;
	position: absolute;
	top: 9%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 55%;
}
.sec03 .inner .sec03_panel {
	position: absolute;
	top: 15%;
	left: 0;
	right: 0;
	width: 92%;
	margin: 0 auto;
}
.sec03 .inner .btnWrap::before {
	content: '';
	display: block;
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	width: var(--plus);
	height: var(--plus);
	background-image: url(../img/plus.png);
	background-repeat: no-repeat;
	background-size: var(--plus);
	bottom: calc( 100% + var(--plus) / 1.6 );
}
.sec03 .inner .btnWrap {
	display: block;
	position: absolute;
	width: 100%;
	left: 0;
	right: 0;
	bottom: -25%;
	margin: 0 auto;
}
.sec03 .inner .btnWrap .btn {
	display: block;
	width: 92%;
	margin: 0 auto;
}
.sec03 .inner .btnWrap .btn img {
	width: 100%;
}
.sec03_bg {
	width: 100%;
}
@media (min-width: 750px) {
	.sec03 {
		margin-top: -7.5%;
		padding-bottom: 0;
	}
	.sec03 .inner .sec03_panel {
		position: absolute;
		top: 15%;
		left: 0;
		right: 0;
		width: 92%;
		margin: 0 auto;
	}
	.sec03 .inner .btnWrap {
		bottom: 12%;
	}
}

/* sec04
____________________________________________________ */
.sec04 .inner {
	padding: 16% 4vw 16% 4vw;
	margin: 0 auto;
}
.sec04 .inner h2 {
	line-height: 1;
	margin-bottom: 6%;
	text-align: center;
}
.sec04 .inner p {
	line-height: 1.8;
	font-weight: 300;
}
@media (min-width: 750px) {
	.sec04 .inner {
		padding: 7% 0 6% 0;
		margin: 0 auto;
		width: 79%;
	}
	.sec04 .inner h2 {
		line-height: 1;
		margin-bottom: 6%;
		text-align: center;
	}
	.sec04 .inner p {
		line-height: 1.8;
		font-weight: 400;
		font-size: 1.1rem;
	}
}



.footer {
	position: relative;
	padding: 30px 0;
	text-align: center;
	background: #0b1f44;
	color: #fff;
}
.footer .siteID {
	z-index: 2;
	width: 25%;
	margin: 0 auto;
}
.footer .siteID img {
	width: 100%;
}
.footer .copyright {
	padding: 1em 0 0 0;
	font-size: .7rem;
	font-weight: 300;
}
@media (min-width: 750px) {
	.footer .siteID {
		width: 10%;
	}
}

._sp { display: block; }
._pc { display: none; }
@media (min-width: 750px) {
	._sp { display: none; }
	._pc { display: flex; }
}
