@charset "utf-8";
/* CSS Document */

/****************************
ページ共通
****************************/
#souryou{
  max-width: 990px;
  margin: 0 auto;
	line-height: 1.8;
	font-size: 15px;
}
#souryou img{
	width: 100%;
}
#souryou a{
	transition: 0.3s all;
}
#souryou .txt-attention{
	color: #d10505;
}

@media screen and (min-width: 600px){
	.sp-only{
		display: none;
	}
}

/****************************
ヘッダー
****************************/
#souryou .header{
	text-align: center;
}
#souryou .header h1{
  margin: 30px auto 25px;
  font-size: 45px;
  color: #b30049;
  line-height: 1.4;
  font-weight: 600;
}
#souryou .header h1 span{
  font-size: 32px;
}

@media screen and (max-width: 599px){
	#souryou .header h1{
		margin: 30px auto 15px;
		font-size: 28px;
	}
	#souryou .header h1 span{
		font-size: 20px;
	}
}

/****************************
手順
****************************/
#souryou .flow-wrap{
	margin-top: 60px;
}
#souryou .flow-wrap .head-h2{
	/* padding: 5px 0px 5px 18px; */
	margin-bottom: 35px;
	font-size: 28px;
	font-weight: 600;
	/* background-color: #d33170; */
	color: #b30049;
	text-align: center;
	position: relative;
}
#souryou .flow-wrap .head-h2::before{
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	padding: 2px;
	border-top: 1px solid #b30049;
	border-bottom: 1px solid #b30049;
	z-index: -1;
	content: "";
}
#souryou .flow-wrap .head-h2 span{
	padding: 0 18px;
	background: #fff;
}
#souryou .flow-wrap .flow-item:nth-of-type(n+2){
	margin-top: 70px;
}
#souryou .flow-wrap .flow-item .head-h3 {
	display: flex;
	align-items: center;
	gap: 54px;
	padding: 5px 0px 5px 25px;
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 15px;
	color: #b30049;
	border: 2px solid #b30049;
	overflow: hidden;
	position: relative;
	line-height: 1.5;
}
#souryou .flow-wrap .flow-item .head-h3::before{
	position: absolute;
	top: -29px;
	left: -22px;
	width: 90px;
	height: 100px;
	content: "";
	background: #b30049;
}
#souryou .flow-wrap .flow-item .head-h3 span{
	display: block;
}
#souryou .flow-wrap .flow-item .head-h3 .flow-num{
	font-size: 28px;
	z-index: 1;
	color: #fff;
}
#souryou .flow-wrap .flow-item .souryou-text:nth-of-type(2){
	margin-top: 25px;
}
#souryou .flow-wrap .flow-item .souryou-text .souryou-attention{
	color: #b30049;
	font-weight: 600;
}

@media screen and (min-width: 600px){
	#souryou .flow-wrap .flow-item .head-h3::before{
		transform: rotate(20deg);
	}
}

@media screen and (max-width: 599px){
	#souryou .flow-wrap{
		margin-top: 50px;
	}
	#souryou .flow-wrap .head-h2{
		margin-bottom: 25px;
		font-size: 22px;
	}
	#souryou .flow-wrap .flow-item:nth-of-type(n+2){
		margin-top: 60px;
	}
	#souryou .flow-wrap .flow-item .head-h3{
		gap: 34px;
    padding: 5px 10px 5px 17px;
		font-size: 18px;
	}
	#souryou .flow-wrap .flow-item .head-h3::before{
		left: -40px;
	}
	#souryou .flow-wrap .flow-item:nth-of-type(2) .head-h3::before{
		top: -4px;
	}
	#souryou .flow-wrap .flow-item .head-h3 .flow-num{
		font-size: 26px;
	}
	#souryou .flow-wrap .flow-item .souryou-text:nth-of-type(2){
		margin-top: 10px;
	}
}

/****************************
ボタン
****************************/
#souryou .souryou-button {
  max-width: 450px;
  margin: 40px auto 0;
}
#souryou .souryou-button a{
  display: block;
  position: relative;
  padding: 18px 30px;
  border: 2px solid #b30049;
  background: #b30049;
  color: #fff;
  border-radius: 100vh;
  text-align: center;
  font-size: 16px;
  box-sizing: border-box;
}
#souryou .souryou-button a::after {
  display: block;
  position: absolute;
  content: "";
  top: 50%;
  right: 20px;
  width: 8px;
  height: 8px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: translateY(-50%) rotate(45deg);
}
#souryou .souryou-button.back{
	margin: 60px auto 0;
}
#souryou .souryou-button.back a{
  background: #fff;
  color: #b30049;
}
#souryou .souryou-button.back a::after{
  border-top: solid 2px #b30049;
  border-right: solid 2px #b30049;
}

@media screen and (min-width: 600px){
	#souryou .souryou-button a:hover{
		background: #fff;
		color: #b30049;
	}
	#souryou .souryou-button a:hover::after{
		border-top: solid 2px #a50043;
		border-right: solid 2px #a50043;
	}
	#souryou .souryou-button.back a:hover{
		border: 2px solid #b30049;
		background: #b30049;
		color: #fff;
	}
	#souryou .souryou-button.back a:hover::after {
		border-top: solid 2px #fff;
		border-right: solid 2px #fff;
	}
}

@media screen and (max-width: 599px){
	#souryou .souryou-button{
		width: 85%;
		margin: 30px auto 0;
	}
	#souryou .souryou-button a{
		padding: 14px 30px;
		font-size: 15px;
		line-height: 1.5;
	}
	#souryou .souryou-button.back{
		margin: 40px auto 0;
	}
}

/****************************
期間限定
****************************/
#souryou .fair-box{
	margin-top: 40px;
}
#souryou .fair-box .fair-title{
	font-size: 20px;
	font-weight: 600;
}
#souryou .fair-box .fair-period{
	color: #F05F8D;
	font-weight: 600;
	font-size: 17px;
}

@media screen and (max-width: 599px){
	#souryou .fair-box .fair-title{
		font-size: 18px;
	}
	#souryou .fair-box .fair-period{
		font-size: 16px;
	}
}