/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 3 version
*/

/*===========================================
TIPSTER 連携案内ページ
============================================*/
a{
	display: inline-block;
}
img{
	max-width: 100%;
}

.head{
	padding:24px 0 30px;
	text-align: center;
	background-color: #FFFEF0;
}
.head h1{
	width: 582px;
	margin:0 auto 30px;
}

.head .campaign_bnr{
	margin-bottom: 22px;
}

.head p.caption{
	font-size: 77.7778%;
	font-weight: bold;
	line-height: 1.5;
	color: #444444;
	margin-bottom: 16px;
}
.head .top_guide_text{
	display:inline-block;
	margin:12px 0 30px;
	color:#333333;
	font-size:66.67%;
	font-weight: bold;
	text-decoration:underline;
}

.header_content{
	text-align: center;
}
.header_content .text_01{
	color:#2B113E;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.33;
}
.header_content .text_02{
	margin-top:5px;
	font-size: 10px;
	line-height: 2;
}
.header_content .text_03{
	width:84.26%;
	margin: auto;
	text-align: left;
}
.header_content .text_03 a{
	color: unset;
	text-decoration: underline;
}
.header_content .text_link{
	margin-top:20px;
	position: relative;
	color:#2B113E;
	font-size:16px;
	font-weight: bold;
}
.header_content .text_link:hover{
	text-decoration: none;
}
.header_content .text_link:before{
	content:"";
	position: absolute;
	bottom:-7px;
	left:0;
	width:100%;
	height: 1px;
	background:#2B113E;
}

.tip_guidance{
	width:315px;
	margin: auto;
	text-align: left;
	padding:20px 16px 35px 10px;
	margin-top:30px;
	border:1px solid #2B113E;
	position: relative;
	background:#FFFFFF url(../../../../img/campaign/2022/tipstar_coope/img_02.png);
	background-size: contain;
}
.tip_guidance li{
	position: relative;
	margin-left:10px;
	font-size:11px;
	line-height: 1.63;
	color:#2B113E;
	list-style: none;
}
.tip_guidance li:before{
	content:"・";
	position: absolute;
	top: 50%;
	left: -13px;
	transform: translate(0, -50%);
}
.tip_guidance li + li{
	margin-top:20px;
}
.tip_guidance a{
	display: block;
	margin-top:20px;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
	color:#2B113E;
}
.tip_guidance a svg{
	position: relative;
	top: 1px;
}

.content{
	width: 960px;
	margin:auto;
	padding:0 0 25px;
}
.content.point{
	width: 582px;
}

.content .sub_title{
	width: 100%;
	text-align: center;
	padding:16px 0;
	margin:0 0 20px 0;
	position: relative;
	background:#FFF965;
}
.content .sub_title h2{
	color:#301445;
	font-size:15px;
	font-weight: bold;
	letter-spacing: 0.17em;
}
.content .sub_title h2 em{
	font-size:18px;
}
.content .sub_title:after{
	display: block;
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	left: 0;
	right: 0;
	bottom: -14px;
	margin: auto;
	border-style: solid;
	border-width: 15px 60px 0 60px;
	border-color: #FFF965 transparent transparent transparent;
}

ul.content_body{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top:30px;
}
ul.content_body li dl dt{
	display: flex;
	justify-content: center;
	position: relative;
	text-align: center;
}
ul.content_body li dl dt p{
	font-size: 15px;
	color: #2B113E;
	font-weight: bold;
	line-height: 1.38;
}
ul.content_body li dl dt p em{
	position: relative;
	background:#FFF965;
	line-height: 1.38;
	display: inline-block;
}
ul.content_body li dl dd img{
	display: block;
	margin: 21px auto 40px;
	width: 30.13%;
}
@media screen and (min-width:500px) and (max-width:768px){
	ul.content_body li dl dd img{
		width: 150px;
	}
	.footer .intro ul li dl dd.num02{
		display: flex;
		flex-direction: column;
	}
}
.content.step .content_body{
	width:84.26%;
	margin: auto;
}
.content.step .content_body dl dd img{
	width: 100%;
	margin-bottom:30px;
}
.content.step .content_body .step02 dl dd img,
.content.step .content_body .step03 dl dd img{
	width:82.38%;
}

@media screen and (min-width:768px){
	.content.point ul.content_body{
		flex-wrap: inherit;
		max-width: 400px;
		margin: 30px auto 0;
	}
	ul.content_body li dl dd img{
		width:113px;
		margin: 20px auto 30px;
	}
	.pc_disp{
		display: block;
	}
	.sp_disp{
		display: none;
	}
	.head{
		padding:0 0 30px;
	}
	.head h1{
		width: 100%;
	}
	.mv_pc{
		display: flex;
		width:583px;
		margin: auto;
		position: relative;
	}
	.mv_pc img{
		display: block;
		position: relative;
	}
	.mv_pc div:nth-of-type(1){
		position: relative;
		width:350px;
		height: 100%;
		z-index: 10;
		background:left, rgba(43, 17, 62,0.8);
	}
	.mv_pc div:nth-of-type(1) img{
		width: 320px;
	}
	.mv_pc div:nth-of-type(1):after{
		content:"";
		position: absolute;
		display: block;
		width:100vw;
		height: 100%;
		top:0;
		right: 0;
		background:linear-gradient(to right, rgba(43, 17, 62,1) 90% ,rgba(43, 17, 62,0.8) 91%);
		z-index: -1;
	}
	.mv_pc div:nth-of-type(2){
		width:482px;
		height: 100%;
		position: absolute;
		bottom:0;
		right:0;
		z-index: 5;
		background:#FFF965;
	}
	.mv_pc div:nth-of-type(2) img{
		width: 100%;
	}
	.mv_pc div:nth-of-type(2):after{
		content:"";
		position: absolute;
		display: block;
		width:100vw;
		height: 100%;
		top:0;
		left:0;
		background:#FFF965 url(../../../../img/campaign/2022/tipstar_coope/main_02_bg.png) no-repeat;
		background-position: 50px -30px;
		background-size:contain;
		z-index: -1;
	}
	.header_content a.button,
	.content.step ul.content_body li dl dd a{
		border:1px solid #2B113E;
	}
	.header_content a.button:hover,
	.content.step ul.content_body li dl dd a:hover,
	.fixBottom_button.active div a:hover{
		border:1px solid #2B113E;
		background:#fff;
		color:#2B113E;
		text-decoration: none;
	}
	.header_content a.button:hover svg,
	.content.step ul.content_body li dl dd a:hover svg,
	.fixBottom_button.active div a:hover svg{
		transform: translate(5px,0);
	}
	.header_content a.button svg,
	.content.step ul.content_body li dl dd a svg,
	.fixBottom_button.active div a svg,
	.header_content a.button svg path,
	.content.step ul.content_body li dl dd a svg path,
	.fixBottom_button.active div a svg path{
		transition: all 0.3s;
	}
	.header_content a.button:hover svg path,
	.content.step ul.content_body li dl dd a:hover svg path,
	.fixBottom_button.active div a:hover svg path{
		stroke:#2B113E;
	}
}
@media screen and (max-width:767px){
	.pc_disp{
		display: none;
	}
	.sp_disp{
		display: block;
	}
}

.content.step{
	width: 582px;
}
.content.step ul.content_body{
	margin-top:40px;
}
.content.step ul.content_body li{
	width: 375px;
	margin-bottom: 74px;
}
.content.step ul.content_body li dl dt{
	align-items: flex-start;
	font-weight: bold;
}
.content.step ul.content_body li dl dt .num{
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 54px;
	min-height: 54px;
	margin-right: 10px;
	background:#FFF965;
}
.content.step ul.content_body li dl dt .num p{
	padding:0 4px;
	font-size:13px;
	font-weight: bold;
	color:#2B113E;
}
.content.step ul.content_body li dl dt .inner_text{
	text-align: left;
}
.content.step ul.content_body li dl dt .inner_text p{
	color:#2B113E;
	font-size:13px;
	line-height: 1.38;
}
.content.step ul.content_body li dl dt .inner_text p:nth-of-type(1){
	font-size:15px;
	font-weight: bold;
	margin-bottom:5px;
}
.content.step ul.content_body li dl dt .inner_text p:nth-of-type(2){
	font-weight: normal;
}

.header_content a.button,
.content.step ul.content_body li dl dd a{
	display: block;
	width:100%;
	height: 46px;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	margin:21px auto 0;
	border-radius: 46px;
	text-align: center;
	line-height: 46px;
	background-color: #2B113E;
	position: relative;
	letter-spacing: 0.17em;
}
.content.step ul.content_body li dl dd a svg{
	position: relative;
	top: 1px;
	margin-left: 5px;
}
.header_content a.button{
	width:84.26%;
	margin:21px auto;
}


.footer{
	background-color: #2B113E;
}
.footer .intro{
	width: 960px;
	margin: auto;
	padding:30px 0;
	max-width: 100%;
}
.footer .intro > div{
	display: flex;
	justify-content: center;
	width: 641px;
	margin:0 auto;
}
.footer .intro > div p{
	width: 325px;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.538;
	color:#FFFFFF;

}
.footer .intro > div img{
	width: 280px;
	margin:0 36px 0 30px;
}
.footer .intro ul{
	display: flex;
	justify-content: space-between;
	width: 685px;
	margin:auto;
}

.footer .intro ul li{
	width: 325px;
}

.footer .intro ul li dl dt{
	font-size: 13px;
	color: #FFFFFF;
}
.footer .intro ul li dl dd{
	text-align: center;
	padding-top: 13px;
}
.footer .intro ul li dl dd.num01 img{
	width: 150px;
}
.footer .intro ul li dl dd.num02 img{
	width: 211px;
}
.footer .intro ul li dl dd a + a{
	margin-top: 18px;
}

.fixBottom_button{
	position: relative;
	/* display:none; */
	transition:all 0.3s;
	left: 50%;
	bottom:0;
	transform: translate(-50%,80px);
}
.fixBottom_button.active{
	width: 100%;
	/*max-width: 480px;*/
	display:block;
	position:fixed;
	left: 50%;
	bottom:0;
	transform: translate(-50%,0);
	transition:all 0.3s;
	opacity: 1;
	z-index: 1000;
}

.fixBottom_button.active.hide{
	opacity: 0;
	transform: translate(-50%,80px);
}
.fixBottom_button.active div{
	overflow: auto;
	width: 100%;
	max-width: 580px;
	margin:auto;
	background:#FFF965;
}
.fixBottom_button div a{
	display: none;
}
.fixBottom_button.active div a{
	margin:21px auto;
	display: block;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	width: 315px;
	height: 46px;
	line-height: 46px;
	text-align: center;
	background-color: #2B113E;
	border-radius: 46px;
	letter-spacing: 0.17em;
}
.fixBottom_button.active .caution_text{
	margin-bottom:20px;
}
.OpinionBtn > p{
	color:#fff;
}

@media screen and (min-width:768px){
	.header_content{
		max-width: 582px;
		margin: auto;
	}
	.header_content a.button{
		width: 375px;
	}
	.content.step .content_body{
		justify-content: center;
	}
	.footer .intro > div{
		align-items: center;
	}
	.footer .intro ul{
		margin:100px auto;
	}
}


@media only screen and (min-width: 780px){
	a{
		transition: all .5s;
	}
}


@media only screen and (max-width: 767px){
	.head{
		padding: 0 0 21px;
	}
	.head h1{
		width:100%;
	}

	.content{
		width: 100% !important;
		padding:0 0 20px;
	}
	.content.step{
		padding-bottom:0;
	}

	ul.content_body{
		flex-direction: column;
	}
	ul.content_body li{
		width: auto;
	}
	.content.step ul.content_body li{
		position: relative;
		width: auto;
		margin:auto;
		margin-bottom: 60px;
	}
	.content.step ul.content_body li.step03:after{
		transform: rotate(-30deg);
		bottom: -80px;
    	left: 45px;
	}
	.content.step ul.content_body li.step04{
		padding-top: 0;
		margin-top: -19px

	}
	.content.step ul.content_body li.step04:after{
		display: none;
	}
	.footer .intro{
		width: 84.26%;
		margin: auto;
	}
	.footer .intro > div{
		width: auto;
		flex-direction: column;
	}
	.footer .intro > div p{
		width: 100%;
	}
	.footer .intro > div img{
		margin:30px auto;
	}
	.footer .intro ul{
		flex-direction: column;
		width: auto;
	}
	.footer .intro ul li{
		width: 100%;
	}

	.content.point ul.content_body li + li{
		margin-top: 40px;

	}
	.footer .intro ul li + li{
		margin-top: 41px;
	}
}

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

	.header_content .text_01{
		font-size: 13px;
	}
	ul.content_body li dl dt p{
		font-size:12px;
	}

}


.swal2-title p{
	font-size: 16px;
	font-weight: normal;
	line-height: 1.5;
}