@charset "utf-8";
/* CSS Document */
/*header*/
.header{
	width: 100%;
	background:linear-gradient(90deg,#ba9163 0%,#ba9163 50%,#ffffff 50%,#ffffff 100%);
}

.header_wrap{
	width: 1400px;
	display: flex;
	align-content: space-around;
	margin: 0 auto;
}

.header_wrap .logo,
.header_wrap .link{
	padding: 1em 0;
}

.header_wrap .logo{
	width: 65%;
	padding-right: 20%;
	background: #ba9163;
}

.header_wrap .logo img{
	width: 100%;
}

.header_wrap .link{
	display: flex;
	align-items: center;
	width: 35%;
	position: relative;
}

.header_wrap .link::before{
	content: "";
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	left: 0;
	border-style: solid;
	border-width: 69px 3em 0 0;
	border-color: #ba9163 transparent transparent transparent;
}

.header_wrap .link a{
	display: block;
	text-align: right;
	width: 100%;
}


@media screen and (max-width: 767px) {
	.header_wrap{
		width: 100%;
	}
	
	.header_wrap .logo, .header_wrap .link {
		padding: 5px 0;
	}
	
	.header_wrap .logo{
		box-sizing: border-box;
		padding-right: 0;
	}
	
	.header_wrap .logo img{
		width: auto;
		height: 46px;
	}
	
	.header_wrap .link a{
		padding-right: 1.5vw;
	}
	.header_wrap .link a img{
		width: auto;
		height: 28px;
	}

	.header_wrap .link::before{
		content: "";
		display: block;
		width: 0;
		height: 0;
		position: absolute;
		top: 0;
		left: -1px;
		border-style: solid;
		border-width: 56px 2em 0 0;
		border-color: #ba9163 transparent transparent transparent;
	}
	
}
@media screen and (min-width:768px) and ( max-width:1000px)  {
	.header_wrap{
		width: 980px;
	}
	
	.header_wrap .link::before{
		border-width: 58px 3em 0 0;
	}
}
/*header*/

/*hero*/
.hero{
	width: 100%;
	background: url("/msppoint/campaign/2019sppr/common/image/main_bg.png") center center no-repeat;
	background-size: cover;
	text-align: center;
}

.hero_image{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

@media screen and (min-width: 768px) {
	.hero{
		min-width: 1400px;
		height: calc(100vh - 119px)
	}
	
	.hero_image img{
		max-height: 100%;
		height: auto;
	}
}

@media screen and (min-width:768px) and ( max-width:1000px)  {
	.hero{
		min-width: 980px;
		height: calc(100vh - 119px)
	}
	
	.hero_image img{
		max-height: 100%;
		height: auto;
	}
}


@media screen and (max-width: 767px) {
	
	.hero{
		height: calc(100vh - 106px)
	}
	
	.hero_image{
		padding: 1em;
		box-sizing: border-box;
	}
	.hero_image img{
		max-width: 100%;
		max-height: 100%;
	}
}




/*set*/
@media screen and (min-width: 768px) {
	#sec01,#sec02,#sec03,#sec04,#sec05,#sec06{
		min-width: 1400px;
		box-sizing: border-box;
	}
}

@media screen and (min-width:768px) and ( max-width:1000px)  {
	#sec01,#sec02,#sec03,#sec04,#sec05,#sec06{
		min-width: 980px;
		box-sizing: border-box;
	}
}

.sec_tl{
	text-align: center;
	position: relative;
	margin-bottom: 2em;
	padding-bottom: 2em;
}

.sec_tl::before{
	content: "";
	display: block;
	width: 2em;
	border-bottom: 2px solid #ba9163;
	position: absolute;
	bottom: 0;
	left: calc(50% - 1em);
}

.sec_tl span{
	display: block;
	width: 3em;
	background: #ffffff;
	margin: 1em auto;
	padding: 1em;
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

.sec_tl span img{
	width: 100%;
}

.sec_tl p{
	font-weight: 700;
}

@media screen and (max-width: 767px) {
	.sec_tl p{
		font-size: 1.2em;
	}
}

.btn_red{
	width: 500px;
	margin: 0 auto;
	border-radius: 0.25em;
	background: #c7150e;
}

.btn_red a{
	color: #ffffff;
	display: block;
	padding: 1.5em 1em;
	text-align: center;
	position: relative;
}

.btn_red a::before{
	content: "";
	position: absolute;
	top: calc(50% - 6px);
	right: 0.5em;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 6px;
	border-color: transparent transparent transparent #ba9163;
}

@media screen and (min-width: 768px) {
	.btn_red a .sp{
		display: none;
	}
}

@media screen and (max-width: 767px) {
	.btn_red{
		max-width: 500px;
		width: 80%;
	}
}
/*set*/

/*sec01*/
#sec01{
	background: url("/msppoint/campaign/2019sppr/common/image/sec01_bg.png") center center no-repeat;
	background-size: cover;
}

.sec01_title{
	text-align: center;
	padding: 4vw 0 0;
}

@media screen and (max-width: 767px) {
	
	.sec01_title img{
		width: 100%;
		
	}
}

/*slider*/
.sp-slide{
	background: #000000;
}

.sp-slide img.sp-image {
    opacity: 0.5;
}

.sp-slide.sp-selected img.sp-image{
	opacity: 1;
}

.sp-mask.sp-grab {
    cursor: pointer;
}

.sp-fade-arrows{
	opacity: 1;
}

.sp-next-arrow:after, .sp-next-arrow:before, .sp-previous-arrow:after, .sp-previous-arrow:before{
	background: none;
}

.sp-next-arrow,
.sp-previous-arrow{
	width: 40px;
	height: 40px;
}

.sp-next-arrow{
	background: url("/msppoint/campaign/2019sppr/common/image/slide_right.png") 0 0 no-repeat;
	background-size: cover;
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
}

.sp-previous-arrow{
	background: url("/msppoint/campaign/2019sppr/common/image/slide_left.png") 0 0 no-repeat;
	background-size: cover;
}

.sp-button{
	width: 8px;
	height: 8px;
	border-radius: 0;
	margin: 8px;
	border: none;
	background: #babbbb;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.sp-selected-button{
	background: #ba9163;
}

@media screen and (min-width: 768px) {
	.sp-horizontal .sp-previous-arrow{
		left: 13.5vw
	}
	.sp-horizontal .sp-next-arrow, .sp-horizontal.sp-rtl .sp-previous-arrow{
		right: 13.5vw;
	}

}

@media screen and (max-width: 767px) {
	
	/*slide*/
	.sp-horizontal .sp-arrows{
		margin-top: 20px;
		top: auto;
		bottom: -20px;
		z-index: 9999;
	}
	/*
	.sp-horizontal .sp-previous-arrow{
		left: 0;
	}
	
	.sp-horizontal .sp-next-arrow, .sp-horizontal.sp-rtl .sp-previous-arrow{
		right: 0;
	}*/
	/*slide*/

}

/*slider*/

.sec01_text{
	color: #ffffff;
	font-size: 0.8em;
	width: 925px;
	margin: 1em auto 0;
	padding-bottom: 4vw;
}

@media screen and (max-width: 767px) {
	
	.sec01_text{
		width: 90%;
		padding: 8vw 0;
		margin: 3em auto 0;
	}
	
	
}
/*sec01*/
/*sec02*/
.sec02_wrap{
	width: 80%;
	margin: 0 auto;
	padding: 3vw 0;
}

@media screen and (max-width: 767px) {
	.sec02_wrap{
		width: 100%;
		padding: 6vw 0;
	}
}

.sec02_wrap ul{
	margin: 2em 0;
}

@media screen and (min-width: 768px) {
	.sec02_wrap ul{
		display: flex;
		justify-content: center;
	}
}

.sec02_wrap ul li{
	border-radius: 1em;
	box-shadow: 0 0 10px rgba(0,0,0,0.4);
	margin: 1em;
}

@media screen and (min-width: 768px) {
	.sec02_wrap ul li{
		width: 40%;
	}
}

.sec02_wrap ul li a{
	display: block;
	padding: 1em;
	cursor: pointer;
}

.sec02_wrap ul li img{
	width: 100%;
}


/*sec02*/

/*sec03*/

#sec03{
	background: url("/msppoint/campaign/2019sppr/common/image/sec03_bg.png") 0 0 repeat;
	padding: 2vw 3vw;
}

.sec03_wrap {
	width: 80%;
	margin: 0 auto;
}

.sec03_wrap  ul li{
	margin-bottom: 2em;
}

.sec03_wrap  ul li img{
	width: 100%;
}

@media screen and (min-width: 768px) {
	.sec03_wrap  ul{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-around;
	}
	
	.sec03_wrap  ul li{
		width: 30%;
	}
}

@media screen and (max-width: 767px) {
	
	#sec03{
		padding: 6vw 3vw;
	}
	
	.sec03_wrap {
		width:100%;
	}

}

/*sec03*/

/*sec04*/
#sec04{
	padding: 2vw 3vw;
}

.sec04_wrap ul li a{
	display: block;
}

.sec04_wrap ul li a img{
	width: 100%;
}

@media screen and (min-width: 768px) {
	.sec04_wrap{
		width: 80%;
		margin: 0 auto;
	}
	
	.sec04_wrap ul{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	
	.sec04_wrap ul li{
		width: 25%;
		padding: 5px;
		box-sizing: border-box;
	}
	
}

@media screen and (max-width: 767px) {
	
	#sec04{
		padding: 6vw 3vw;
	}
	
	.sec04_wrap ul li{
		margin-bottom: 2em;
	}
}

/*sec04*/

/*sec05*/
#sec05{
	padding: 2vw 0;
}
@media screen and (min-width: 768px) {
	.flow{
		background:  linear-gradient(90deg,#ffe7de 0%,#ffe7de 50%,#ffcfbe 50%,#ffcfbe 100%);
	}

	.stepBar {
		max-width: 1400px;
	  position: relative;
	  list-style: none;
	  margin: 0 auto 1em;
	  padding: 0;
	  text-align: center;
	  width: 100%;
	  overflow: hidden;
	  *zoom: 1;
		display: flex;
		justify-content: center;
	}
	.stepBar .step {
	  position: relative;
	  padding: 20px 40px 20px 40px;
	  background-color: #ffd8cc;
	  -moz-box-sizing: border-box;
	  -webkit-box-sizing: border-box;
	  box-sizing: border-box;
		width: 30%;
	}
	.stepBar .step:before, .stepBar .step:after {
	  position: absolute;
	  left: -35px;
	  display: block;
	  content: '';
	  background-color: #ffd8cc;
	  border-left: 60px solid #ffe7de;
	  width: 20px;
	  height: 50%;
	}
	.stepBar .step:after {
	  top: 0;
	  -moz-transform: skew(30deg);
	  -ms-transform: skew(30deg);
	  -webkit-transform: skew(30deg);
	  transform: skew(30deg);
	}
	.stepBar .step:before {
	  bottom: 0;
	  -moz-transform: skew(-30deg);
	  -ms-transform: skew(-30deg);
	  -webkit-transform: skew(-30deg);
	  transform: skew(-30deg);
	}
	.stepBar .step:first-child {
		background: #ffe7de;
	}

	.stepBar .step:nth-child(3)::before,.stepBar .step:nth-child(3)::after {
		border-left: 60px solid #ffcfbe;
		background-color: #ffcfbe;
	}

	.stepBar .step:first-child:before, .stepBar .step:first-child:after {
	  content: none;
	}
	.stepBar .step:last-child {
		background: #ffcfbe;
	}
	.stepBar .step.current {
	  color: #FFF;
	  background-color: #26bfa1;
	}
	.stepBar .step.current:before, .stepBar .step.current:after {
	  background-color: #26bfa1;
	}
	.stepBar.step2 .step {
	  width: 50%;
	}
	.stepBar.step3 .step {
	  width: 33.333%;
	}
	.stepBar.step4 .step {
	  width: 25%;
	}
	.stepBar.step5 .step {
	  width: 20%;
	}

	.stepBar .step p:first-child{
		width: 4em;
		margin: 0 auto;
	}

	.stepBar .step p:first-child img{
		width: 100%;
	}

	.stepBar .step p:last-child{
		font-size: 0.9em;
		margin-top: 1em;
	}

	.stepBar .step p:last-child span{
		font-size: 0.9em;
	}
	
	.ex_text{
		text-align: center;
		margin: 3em 0;
	}
}
@media screen and (max-width: 767px) {
	#sec05{
		padding: 6vw 0;
	}
	
	.flow{
		background:  linear-gradient(180deg,#ffe7de 0%,#ffe7de 50%,#ffcfbe 50%,#ffcfbe 100%);
	}
	
	.stepBar .step{
		padding: 10vw 0 0;
		position: relative
	}
	
	.stepBar .step:nth-child(2){
		background: #ffd8cc;
	}
	
	.stepBar .step:nth-child(2)::after{
		content: "";
		display: block;
		width: 0;
		height: 0;
		position: absolute;
		top: 0;
		left: 0;
		border-style: solid;
		border-width: 10vw 50vw 0 50vw;
		border-color: #ffe7de transparent transparent transparent;
	}
	
	.stepBar .step:nth-child(3)::after{
		content: "";
		display: block;
		width: 0;
		height: 0;
		position: absolute;
		top: 0;
		left: 0;
		border-style: solid;
		border-width: 10vw 50vw 0 50vw;
		border-color: #ffd8cc transparent transparent transparent;
	}
	.stepBar .step p:first-child{
		width: 7em;
		margin: 2em auto 0;
	}
	
	.stepBar .step:nth-child(1) p:first-child{
		margin: 0em auto 0;
	}

	.stepBar .step p:first-child img{
		width: 100%;
	}

	.stepBar .step p:last-child{
		font-size: 0.9em;
		padding: 2em;
		text-align: center;
	}

	.stepBar .step p:last-child span{
		font-size: 0.9em;
	}

	.ex_text{
		width: 80%;
		margin: 2em auto;
	}
}

/*sec05*/

/*sec06*/

#sec06{
	padding: 2vw 0;
}

.tel_box{
	margin-top: 4vw;
	padding: 2em 12em;
	border:2em solid #fcf1f0;
}

.tel_box p:first-child{
	text-align: center;
	margin-bottom: 1em;
}

.sec06_wrap dl dt{
	font-weight: 700;
	display: inline-block;
	margin-bottom: 1em;
	padding-bottom: 1em;
	border-bottom: 2px solid #ba9163;
}

.sec06_wrap dl dd{
	font-size: 0.9em;
}

#pagetop02{
	width: 3em;
	display: block;
	margin: 2em auto;
}

#pagetop02 img{
	width: 100%;
}

@media screen and (min-width: 768px) {
	.sec06_wrap{
		max-width: 1400px;
		margin: 0 auto;
	}
	
	.sec06_wrap dl{
		width: 80%;
		margin: 0 auto 4vw;
	}
	
	.tel_text_sp{
		display: none;
	}
	
	.sec06_link{
		text-align: center;
	}
	
	.sec06_link a{
		margin: 0 1em;
	}
	
	.sec06_link a:hover{
		opacity: 0.8;
	}
	
	.tel_box p:first-child img{
		max-width: 740px;
		width: 100%;
	}
}

@media screen and (min-width:768px) and ( max-width:1000px)  {
	.sec06_wrap{
		max-width: 740px;
		margin: 0 auto;
	}
	
	.tel_box {
		padding: 2em 4em;
		border: 2em solid #fcf1f0;
	}
	
	.tel_box p:first-child img{
		width: 100%;
	}
}

@media screen and (max-width: 767px) {
	
	#sec06{
		padding: 6vw 3vw;
	}
	
	.sec06_wrap dl{
		margin: 0 auto 8vw;
	}
	
	.tel_box{
		margin-top: 6vw;
		padding: 2em;
		border:1em solid #fcf1f0;
		box-sizing: border-box;
	}
	
	.tel_box img{
		width: 100%;
	}
	
	.sec06_link{
		text-align: center;
		font-size: 0.8em;
	}
	
	.tel_text_pc{
		display: none;
	}
	
	.tel_text_sp{
		font-size: 0.8em;
		margin-top: 2em;
	}
}
/*sec06*/

/*scroll*/

#pagetop{
	position: fixed;
	bottom: 50px;
	right: 50px;
	width: 60px;
	height: 60px;
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(0,0,0,0.4);
	padding: 0.5em;
	box-sizing: border-box;
	z-index: 999;
}

#pagetop img{
	width: 100%;
}

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

	.position_btn{
		position: fixed;
		top: 200px;
		right: 0;
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		-o-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
		text-orientation: upright;
		background: #c7150e;
		box-sizing: border-box;
		border-radius: 10px 0 0 10px;
	}

	.position_btn a{
		text-align: center;
		display: inline-block;
		padding: 1em 0.5em;
		color: #ffffff;
	}

	.position_btn a::before{
		content: "";
		width: 1em;
		height: 1em;
		display: inline-block;
		background: url("/msppoint/campaign/2019sppr/common/image/btn_icon.png") 0 0 no-repeat;
		background-size: 1em auto; 
		padding-bottom: 0.5em;
	}

	#pagetop:hover,
	.position_btn a:hover{
		opacity: 0.8;
	}

	.position_btn span{
		display: inline;
	}

	.position_btn .pc{
		display: none;
	}

}
@media screen and (max-width: 767px) {
	
	#pagetop{
		bottom: 25px;
		right: 25px;
	}
	
	.fixed #pagetop{
		right: 25px;
		bottom: 152px;
	}
	
	.position_btn_wrap{
		transition: opacity 1s, visibility 0s ease 1s;
		opacity: 0;
		visibility: hidden;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 1em 2em;
		background: rgba(0,0,0,0.4);
		box-sizing: border-box;
	}
	
	.position_btn a{
		color: #ffffff;
		display: block;
		padding: 1.5em 1em;
		text-align: center;
		position: relative;
		background: #c7150e;
	}

	.position_btn a::before{
		content: "";
		position: absolute;
		top: calc(50% - 6px);
		right: 0.5em;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 6px 0 6px 6px;
		border-color: transparent transparent transparent #ba9163;
	}
	
	.fixed .position_btn_wrap{
		transition-delay: 0s;
		opacity: 1;
		visibility: visible;
		z-index: 999999;
	}
	

}

/*scroll*/