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

/*==============================*/
/* main */
/*==============================*/
div.flowWrap{
	counter-reset: rank;
	width: min(1080px,100%);
	margin: 0 auto;
}

/*---------------------------------
   Title（共通）
---------------------------------*/
div.flowWrap h2{
	position: relative;
	margin-bottom: 16px;
	padding-left: 40px;
	color: #000;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3em;
}
div.flowWrap h2::before{
	position: absolute; top: -2px; left: 0;
	counter-increment: rank;
	content: counter(rank);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	background: #1a1a1a;
	border-radius: 50%;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	font-family: "Inter", sans-serif;
	line-height: 1.3em;
	letter-spacing: 0.01em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.flowWrap h2{
			margin-bottom: 16px;
			padding-left: 36px;
			font-size: 20px;
			line-height: 1.35em;
		}
		div.flowWrap h2::before{
			position: absolute; top: 0px; left: 0;
			width: 28px;
			height: 28px;
			font-size: 17px;
		}
	}


/*---------------------------------
   矢印
---------------------------------*/
div.flow::after,
div.flowList div.flowBox::after{
	position: absolute; bottom: -44px; left: 50%;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 24px 24px 0 24px;
	border-color: #1a1a1a transparent transparent transparent;
	margin-left: -24px;
}
div.flowList div.flowBox:last-child::after{ display: none;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.flow::after,
		div.flowList div.flowBox::after{
			position: absolute; bottom: -36px; left: 50%;
			border-width: 20px 20px 0 20px;
			margin-left: -20px;
		}
	}


/*---------------------------------
   
---------------------------------*/
div.flow{
	position: relative;
	padding: 48px 40px;
	background: #F6F6F6 url("/common/img/share/bg-texture.webp");
	border-radius: 5px;
}
div.flow:not(:last-child){ margin-bottom: 64px;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.flow{ padding: 36px 24px;}
		div.flow:not(:last-child){ margin-bottom: 48px;}
	}

/*-- 
------------------------- */
div.flow > p{
	font-size: 15px;
	line-height: 1.618em;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.flow > p{
			font-size: 14px;
		}
}


/*-- 
------------------------- */
div.flow div.flowContact{
	display: flex;
	gap: 24px;
}

div.flow div.flowContact > dl{
	width: calc(calc(100% - 24px * 1) / 2);
	padding: 40px 36px 36px 36px;
	background: #fff;
	box-shadow: 4px 4px 6px -3px rgba(153,153,153,0.5);
}
div.flow div.flowContact > dl > dt{
	margin-bottom: 10px;
	color: #000;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.3em;
	text-align: center;
}

div.flow div.flowContact dl dd > p:first-child{
	margin-bottom: 20px;
	font-size: 15px;
	text-align: center;
}

div.flow div.flowContact dl dd div{
	margin-bottom: 24px;
	padding: 12px 16px 12px 16px;
	border: 1px solid #ccc;
}
div.flow div.flowContact dl dd div dl dt{
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px dashed #ccc;
	color: #000;
	text-align: center;
	line-height: 1.3em;
	font-weight: 600;
}
div.flow div.flowContact dl dd div dl dd{
	font-size: 14px;
	text-align: center;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.flow div.flowContact{ gap: 20px;}
		div.flow div.flowContact > dl{
			width: calc(calc(100% - 20px * 1) / 2);
			padding: 36px 32px 28px 32px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.flow div.flowContact{
			flex-direction: column;
			gap: 16px;
		}

		div.flow div.flowContact > dl{
			width: 100%;
			padding: 32px 20px 20px 20px;
		}
		div.flow div.flowContact > dl > dt{
			margin-bottom: 10px;
			font-size: 19px;
		}

		div.flow div.flowContact dl dd > p:first-child{
			margin-bottom: 20px;
			font-size: 14px;
			text-align: left;
			line-height: 1.3em;	
		}

		div.flow div.flowContact dl dd div{
			margin-bottom: 20px;
			padding: 10px 12px 10px 12px;
		}
		div.flow div.flowContact dl dd div dl dt{
			margin-bottom: 10px;
			padding-bottom: 10px;
		}
	}


/*-- 
------------------------- */
div.flow ul{
	display: flex;
	justify-content: space-between;
}
div.flow ul li{ width: calc(50% - 5px);}
div.flow ul li a{
	display: block;
	padding: 14px 0 15px 0;
	border-radius: 5px;
	color: #fff;
	text-align: center;
	transition: transform .25s ease, box-shadow .25s ease;
}
div.flow ul li a:hover{
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
div.flow ul li:nth-child(1) a{ background: #D70051;}
div.flow ul li:nth-child(2) a{ background: #1A1A1A;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.flow ul li{ width: calc(50% - 3px);}
		div.flow ul li a{
			padding: 12px 0 13px 0;
			font-size: 15px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.flow ul{
			flex-direction: column;
			gap: 8px;
		}
		div.flow ul li{ width: 100%;}
		div.flow ul li a{
			padding: 14px 0 15px 0;
		}
	}


/*-- 
------------------------- */
div.flow p.flowTel a{
	display: inline-flex;
    align-items: center;
    justify-content: center;
	width: 100%;
	padding: 16px 8px 18px 8px;
	background: #F3F3F3;
	border-radius: 5px;
	color: #1a1a1a;
	font-size: 30px;
	font-weight: 700;
	line-height: 1em;
	gap: 3px;
}
div.flow p.flowTel a img{ position: relative; top: 3px;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.flow p.flowTel a{
			padding: 14px 8px 16px 8px;
			font-size: 28px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.flow p.flowTel a{ font-size: 24px;}
		div.flow p.flowTel a img{
			position: relative; top: 3px;
			width: 16px;
		}
	}



/*-- 
------------------------- */
div.flow div.flowMethod{
	display: flex;
	gap: 20px;
}

/*--  -- */
div.flow div.flowMethod > div{
	width: calc(calc(100% - 20px * 2) / 3);
}
div.flow div.flowMethod > div dl{
	padding: 24px 28px 24px 28px;
}
div.flow div.flowMethod > div dl:not(:last-child){ margin-bottom: 20px;}
div.flow div.flowMethod > div dl dt{
	margin-bottom: 8px;
	font-size: 19px;
}

/*--  -- */
div.flow div.flowMethod > dl{
	width: calc(calc(100% - 20px * 2) / 3);
	padding: 36px 32px 36px 32px;
}
div.flow div.flowMethod > dl > dt{
	margin-bottom: 14px;
	text-align: center;
	font-size: 20px;
}


/*-- 共通 -- */
div.flow div.flowMethod dl{
	background: #fff;
	box-shadow: 4px 4px 6px -3px rgba(153,153,153,0.5);
}
div.flow div.flowMethod dl dt{
	color: #000;
	font-weight: 600;
	line-height: 1.3em;
}
div.flow div.flowMethod dl dd{
	font-size: 14px;
	line-height: 1.414em;
}
div.flow div.flowMethod dl dd p{
	font-size: 14px;
	line-height: 1.618em;
}
div.flow div.flowMethod dl dd p:not(:last-child){ margin-bottom: 16px;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.flow div.flowMethod{
			flex-wrap: wrap;
			gap: 16px;
		}
		/*--  -- */
		div.flow div.flowMethod > div{ width: 100%;}
		div.flow div.flowMethod > div dl{ padding: 24px 28px 24px 28px;}
		div.flow div.flowMethod > div dl:not(:last-child){ margin-bottom: 16px;}
		div.flow div.flowMethod > div dl dt{
			margin-bottom: 8px;
			font-size: 19px;
		}

		/*--  -- */
		div.flow div.flowMethod > dl{
			width: calc(calc(100% - 16px * 1) / 2);
			padding: 36px 28px 36px 28px;
		}
		div.flow div.flowMethod > dl > dt{
			margin-bottom: 12px;
			text-align: left;
		}

	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.flow div.flowMethod{
			flex-direction: column;
			gap: 16px;
		}

		/*--  -- */
		div.flow div.flowMethod > div{
			width: 100%;
		}
		div.flow div.flowMethod > div dl{
			padding: 24px 24px 24px 24px;
		}
		div.flow div.flowMethod > div dl:not(:last-child){ margin-bottom: 16px;}
		div.flow div.flowMethod > div dl dt{
			margin-bottom: 8px;
			font-size: 17px;
		}

		/*--  -- */
		div.flow div.flowMethod > dl{
			width: 100%;
			padding: 24px 24px 24px 24px;
		}
		div.flow div.flowMethod > dl > dt{
			margin-bottom: 10px;
			text-align: left;
			font-size: 17px;
		}


		/*-- 共通 -- */
		div.flow div.flowMethod dl{
		}
		div.flow div.flowMethod dl dd{
			font-size: 13px;
			line-height: 1.618em;
		}
		div.flow div.flowMethod dl dd p{
			font-size: 13px;
			line-height: 1.618em;
		}
		div.flow div.flowMethod dl dd p:not(:last-child){ margin-bottom: 12px;}
	}



/*---------------------------------
   
---------------------------------*/
div.flowList div.flowBox{
	display: flex;
	align-items: center;
	gap: 24px;
	position: relative;
	padding: 48px 40px;
	background: #F6F6F6 url("/common/img/share/bg-texture.webp");
	border-radius: 5px;
}
div.flowList div.flowBox:not(:last-child){ margin-bottom: 64px;}


div.flowList div.flowBox h2{
	width: 344px;
	margin: 0;
	flex: 0 0 344px;
}

div.flowList div.flowBox div{
	flex: 1;
	min-width: 0;
}
div.flowList div.flowBox div p{
	font-size: 15px;
	line-height: 1.618em;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.flowList div.flowBox{
			flex-direction: column;
			gap: 0px;
			padding: 28px 24px 24px 24px;
		}
		div.flowList div.flowBox:not(:last-child){ margin-bottom: 48px;}


		div.flowList div.flowBox h2{
			width: 100%;
			margin-bottom: 14px;
			flex: none;
		}

		div.flowList div.flowBox div{
			width: 100%;
		}
		div.flowList div.flowBox div p{
			font-size: 14px;
			line-height: 1.618em;
		}
	}