@charset "utf-8";
body {
	font: normal 18px/1.7 "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Arial,Verdana,sans-serif;
	text-align: left;
	color:#333;
	text-align: justify;
	overflow-x: hidden;
}


body .sp-item {
    display: none !important; }
  body .pc-item {
    display: block !important; }

  @media screen and (max-width: 640px) {
    body {
      min-width: inherit;
	  height:100%;
	  }
      body .sp-item {
        display: block !important; }
      body .pc-item {
        display: none !important; }
	  body .sp-item img {
		width:100%;}
}

@media screen and (max-width: 640px) {
	.sp img{
		max-width:90%;
}
	.sp02 img{
		max-width:100%;
}
.sp03 img{
		max-width:70%;
}
}
.ov_hd {
	overflow: hidden;
}
.bg_none {
	background-image: none!important;
}
.rollover:hover {
	filter: brightness(1.05);
}
.center {
	text-align: center;
}
.right {
	text-align:right;
}
.line_0 {
	line-height: 0;
}
.zindex {
	z-index: 200;
}
input[type=radio] {
	width: 15px;
	height: 15px;
	vertical-align: middle;
}
input[type=image]:hover{
		opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
	}
/* ----------------------------------------------------

    ここから書く

---------------------------------------------------- */
/*共通*/
.sec {
	padding-bottom: 40px;
}
.sec-wrap {
	width: 850px;
	max-width: 100%;
	margin: 0 auto;
	box-sizing: border-box;/
}
.sec-wrap-inner {
	padding: 0;
}
.wrap-inner {
	padding:0 2%;
}
img {
	width: 100%;
}
.pink {
	color: #E73645;
}
.yellow-line {
	background: linear-gradient(transparent 0%,#FFFFDD 0%);
}
@media screen and (max-width: 640px) {
	.sec {
		padding-bottom: 20px;
	}
	.sec-wrap {
		width: 100%;
	}
	.sec-wrap-inner {
		padding: 0 2%;
	}
	.autoimg img {
		width: 100%;
	}
}
/* ----------------------------------------------------
sec1 メインビジュアル
---------------------------------------------------- */
.sec1 {
	background:url(../images/mv-bg.webp) top center no-repeat;
	background-size: cover;
}
.sec1-wrap {
	width: 1000px;
	max-width: 100%;
	margin: 0 auto;
}
.cta_bg {
	width: 100%;
	max-width: 100%;
	height: auto;
	position: relative;
	margin: 0 auto;
}
.btn-box {
	width: 41%;
	position: absolute;
	left: 4%;
	bottom: 9%;
}
.btn-copy {
	text-align: center;
	font-size: 17px;
	letter-spacing: 0.07em;
	line-height: 1;
}
.btn-box img {
	margin: 0 auto;
	animation: fuwafuwa 1s ease 1s infinite alternate;
	transform-origin:center;
	cursor: pointer;
}
@keyframes fuwafuwa {
	from {transform: scale(0.95,0.95);}
	to {transform: scale(1,1);}
	}	
@media screen and (max-width: 640px) {
	.sec1 {
		background:url(../images/s-mv-bg.webp) top center no-repeat;
		background-size: cover;
	}
	.sec1-wrap {
		width: 100%;
	}
	.sec1 h1 img {
		padding-bottom: 41%;
	}
	.btn-copy {
	text-align: center;
	font-size: 15px;
	letter-spacing: 0.07em;
	line-height: 1;
}
	.btn-box {
		width: 93%;
		position: absolute;
		left: 3%;
		bottom: 2%;
	}
}
/* ----------------------------------------------------
sec2
---------------------------------------------------- */
.sec2 {
	background: #585858;
	margin-top: -1px;
}
.sec2inner {
	background: url(../images/sec2-topbg.webp) top right no-repeat;
}
.sec2 h2 {
	padding-bottom: 30px;
}
.sec2-checklistbox {
	max-width:600px;
	margin: 0 auto;
	padding-bottom: 30px;
}
.checklist {
	font-weight: bold;
	color: #fff;
	line-height: 1.9em;
	letter-spacing: 0.1em;
	text-shadow: 5px 5px 3px rgba(0, 0, 0, 0.35);
	border-bottom: 1px solid #fff;
	margin-bottom: 7px;
	padding:0 0 5px 30px;
	background: url(../images/sec2-icon.webp) no-repeat top 7px left;
	background-size: 22px;
}


@media screen and (max-width: 640px) {
	.sec2 h2 {
		padding-bottom: 20px;
	}
	.checklist {
		font-size: 16px;
		line-height: 1.6em;
		letter-spacing: 0.1em;
		margin-bottom: 12px;
		padding:0 0 5px 25px;
		background: url(../images/sec2-icon.webp) no-repeat top 4px left;
		background-size: 19px;
	}
	.sec2-checklistbox {
		padding-bottom: 20px;
	}
}
/* ----------------------------------------------------
sec3
---------------------------------------------------- */
.sec3 {
	margin-top:-1px;
	background-image:url(../images/sec3-triangle.webp),url(../images/sec3-topbg.webp),url(../images/sec3-bg.webp);
	background-repeat: no-repeat,no-repeat,no-repeat;
	background-position:top -1px center,top center,top center;
	background-size: auto,auto,cover;
}
.sec3 p {
	padding-top: 320px;
    padding-bottom: 20px;
}
@media screen and (max-width: 640px) {
	.sec3 {
		margin-top:-1px;
		background-image:url(../images/sec3-triangle.webp),url(../images/sec3-topbg.webp),url(../images/sec3-bg.webp);
		background-repeat: no-repeat,no-repeat,no-repeat;
		background-position:top -1px center,top center,top center;
		background-size: contain,contain,cover;
	}
	.sec3 p {
		padding-top: 150px;
	}
}
/* ----------------------------------------------------
sec3-1
---------------------------------------------------- */
.sec3-1 {
	background: url(../images/sec3-1-bg.webp)top center no-repeat;
	background-size: cover;
}
.sec3-1 h2 {
	padding-bottom: 50px;
	max-width: 600px;
	margin: 0 auto;
}
.sec3-1 p {
	padding-bottom: 40px;
}

@media screen and (max-width: 640px) {
	.sec3-1 {
	background: url(../images/s-sec3-1-bg.webp)top center no-repeat;
	background-size: cover;
}
.sec3-1 h2 {
	padding-bottom: 30px;
}
.sec3-1 p {
	padding-bottom: 40px;
}
	
}
/* ----------------------------------------------------
sec4
---------------------------------------------------- */
.sec4 {
	background: url(../images/sec10-bottom-bg.webp)top center repeat;
	background-color: #fff;
}
.sec4 h2 {
	padding-bottom: 50px;
}
.sec-get {
	display: flex;
	padding-bottom: 40px;
}

.sec-get:nth-of-type(even) {
  flex-direction: row-reverse; 
}

.sec4-bottom {
	background: url(../images/sec4-bg.webp) no-repeat;
	background-position: bottom;
	position: relative;
	z-index: 100;
}
.sec4-bottom p {
	padding-bottom: 80px;
}
@media screen and (max-width: 640px) {
	.sec4 h2 {
		padding-bottom: 30px;
	}
	.sec-get {
	display: block;
	}
	.r-get {
	width: 85%;
  margin: 0 auto;
	}
	.sec4-bottom {
		background: url(../images/s-sec4-bg.webp) no-repeat;
		background-position: bottom;
		background-size: contain;
	}
	.sec4-bottom p {
		padding-bottom: 55px;
	}
}
/* ----------------------------------------------------
sec5
---------------------------------------------------- */
.sec5 {
	background-color: #f2f2f2;
	margin-top: -50px;
	padding-top: 40px;
}
.sec5 h2 {
	padding-bottom: 30px;
}
.sec5 p {
	padding-bottom: 20px;
}
@media screen and (max-width: 640px) {
	.sec5 {
		margin-top: -16px;
		padding-top: 30px;
	}
	.sec5 h2 {
		padding-bottom: 20px;
	}
}
/* ----------------------------------------------------
cta
---------------------------------------------------- */
.cta {
	background-color: #2f61c5;
	padding: 30px 0;
}
.btn {
	max-width: 400px;
	margin: 0 auto;
	animation: fuwafuwa 1s ease 1s infinite alternate;
	transform-origin:center;
	cursor: pointer;
}
@media screen and (max-width: 640px) {
	.cta {
		padding: 20px 0;
	}
	.btn {
		max-width: 100%;
	}
}
/* ----------------------------------------------------
sec6
---------------------------------------------------- */
.sec6 {
	background-color: #1d355c;
}
.sec6 h2 {
	padding-bottom: 30px;
}
.sec6 p {
	padding-bottom: 20px;
}

@media screen and (max-width: 640px) {
	.sec6 h2 {
		padding-bottom: 20px;
	}
}

/* ----------------------------------------------------
sec7
---------------------------------------------------- */
.sec7 {
	background: url(../images/sec7-bg.webp)top center no-repeat;
	background-size: cover;
}
.sec7 h2 {
	padding-bottom: 30px;
}
.sec7 p {
	padding-bottom: 30px;
}
.sec7 p img {
	border-radius: 20px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 640px) {
	.sec7 {
	background: url(../images/s-sec7-bg.webp)top center no-repeat;
	background-size: cover;
}
	.sec7 h2 {
		padding-bottom: 20px;
	}
	.sec7 p img {
		border-radius: 10px;
	}
}
	/* ----------------------------------------------------
sec8
---------------------------------------------------- */
.sec8 {
	background: url(../images/sec8-bg.webp)top center no-repeat;
	background-size: cover;
}
.sec8 h2 {
	padding-bottom: 30px;
}
.sec8 p {
	padding-bottom: 30px;
}
@media screen and (max-width: 640px) {
	.sec8 {
		background: url(../images/s-sec8-bg.webp)top center no-repeat;
		background-size: cover;
	}
	.sec8 h2 {
		padding-bottom: 20px;
	}
	.sec8 p {
		padding-bottom: 20px;
	}
}
	/* ----------------------------------------------------
sec9
---------------------------------------------------- */
.sec9 {
	background-color: #e4f1fb;
	padding-top: 30px;
}
.sec9 p {
	padding-bottom: 30px;
}
	/* ----------------------------------------------------
sec10
---------------------------------------------------- */
.sec10-wrap {
	background: rgb(47,97,197);
background: linear-gradient(90deg, rgba(47,97,197,1) 0%, rgba(29,53,92,1) 100%);
position: relative;
}
.sec10-b-wrap {
	background: url(../images/sec10-bottom-bg.webp)top center repeat;
}
.ver {
	width: 2.5px;
	margin: -18px auto 0;
	position: relative;
}
.sec10-b-wrap p {
	padding-bottom: 30px;
}
.sec10-p {
	font-size: 20px;
	text-align: center;
	line-height: 1.9em;
	letter-spacing: 0.1em;
}
@media screen and (max-width: 640px) {
	.ver {
		width: 2px;
		margin: -16px auto 0;
		position: relative;
	}
	.sec10-b-wrap p {
		padding-bottom: 20px;
	}
	.sec10-p {
		font-size: 16px;
		line-height: 1.6em;
	letter-spacing: 0.05em;
	text-align: center;
	}
}
/* ----------------------------------------------------
フッター
---------------------------------------------------- */
footer {
	text-align: center;
	background-color: #333;
	height: 70px;
	display: table;
	width: 100%;
}
.footer {
	display: table-cell;
	vertical-align: middle;
}
footer p {
	color: #fff;
	font-size: 14px;
	font-family: serif;
}
@media screen and (max-width: 640px) {
	footer p {
		font-size: 12px;
	}
}