@charset "UTF-8";

/* ----------------------------------
 ご利用ガイド
---------------------------------- */
div.freepage_wrapper_#page_guide .page-nav-list ul li.other-page a::after { transform: rotate(45deg);}

#page_guide .flow-list { display: flex; flex-wrap: wrap;}
#page_guide .flow-list li { width: 100%; border: #C1C7CD 1px solid; display: flex; flex-direction: column; background: #FFF;}
#page_guide .flow-list .step { width: 100%; padding: 10px 15px; font-size: 16px; font-weight: 700; background: #DDE1E6; box-sizing: border-box;}
#page_guide .flow-list .desc { width: 100%; padding: 15px; font-size: 14px; font-weight: 400; box-sizing: border-box;}
#page_guide .flow-list .desc a { text-decoration: underline; color: #19AAF1;}
#page_guide .flow-list .desc p { font-size: 14px; font-weight: 400;}
#page_guide .indent { padding-left: 1em; text-indent: -1em;}

#page_guide .payment-wrap { display: flex; flex-wrap: wrap;}
#page_guide .payment-item { width: 100%; border: #C1C7CD 1px solid; background: #FFF;}
#page_guide .payment-item + .payment-item { margin-top: 15px;}
#page_guide .payment-item dt { width: 100%; padding: 10px 15px; font-size: 16px; font-weight: 700; background: #DDE1E6; box-sizing: border-box;}
#page_guide .payment-item dd { width: 100%; padding: 15px; font-size: 14px; font-weight: 400; box-sizing: border-box;}
#page_guide .payment-item dd a { text-decoration: underline; color: #19AAF1;}
#page_guide .payment-item dd p { font-size: 14px; font-weight: 400;}

/* PCのみ */
@media (min-width: 769px) {
	#page_guide .flow-list.col2 li { width: calc(100% / 2);}
	#page_guide .flow-list.col2 li:nth-child(2n) { border-left: none;}
	#page_guide .flow-list.col2 li:nth-child(n+3) { border-top: none;}
	#page_guide .flow-list.col3 li { width: calc(100% / 3);}
	#page_guide .flow-list.col3 li:nth-child(3n) { border-left: none;}
	#page_guide .flow-list.col3 li:nth-child(3n - 1) { border-left: none;}
	#page_guide .flow-list.col3 li:nth-child(n+4) { border-top: none;}
	
	#page_guide .payment-item { display: flex;}
	#page_guide .payment-item dl { min-width: 50%;}
	#page_guide .payment-item dl + dl { border-left: #C1C7CD 1px solid;}
}
/* SPのみ */
@media (max-width: 768px) {
	#page_guide .flow-list { display: block;}
	#page_guide .flow-list li + li { border-top: none;}
	#page_guide .flow-list .step { font-size: 15px;}
	#page_guide .flow-list .desc { font-size: 13px;}
	#page_guide .flow-list .desc p { font-size: 13px;}
}

/* ご利用の流れ */
#page_guide #sec_useflow .flow-image-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px 20px;}
#page_guide #sec_useflow .flow-image-list li { width: calc((100% - 20px * 3)/ 4); min-width: 180px; display: flex; flex-direction: column;}
#page_guide #sec_useflow .image { width: 100%; max-width: 120px; margin: 0 auto 15px; display: flex; justify-content: center; align-items: center;}
#page_guide #sec_useflow .image figure {
  width: 100%;
  padding: 20px;
	margin: 0;
	border: none;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FFF;
}
#page_guide #sec_useflow .image figure img { width: 100%; vertical-align: top;}
#page_guide #sec_useflow .desc { width: 100%; padding: 0; font-size: 14px; font-weight: 400; box-sizing: border-box;}
#page_guide #sec_useflow .desc .step { padding: 10px 15px; margin: 0 0 15px; font-size: 16px; font-weight: 700; text-align: center; background: #DDE1E6; box-sizing: border-box;}
#page_guide #sec_useflow .desc .text { font-size: 14px; font-weight: 400;}
#page_guide #sec_useflow .desc .text + .text { margin-top: 5px;}
#page_guide #sec_useflow .desc a { text-decoration: underline; color: #19AAF1;}

@media (max-width: 768px) {
	#page_guide #sec_useflow .flow-image-list { gap: 20px;}
	#page_guide #sec_useflow .flow-image-list li { width: 100%; display: flex; flex-direction: row; gap: 20px;}
	#page_guide #sec_useflow .image { margin: 0 auto;}
	#page_guide #sec_useflow .desc .step { text-align: left;}
}

/* 作業当日の流れ */
#page_guide #sec_workflow .flow-image-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px 20px;}
#page_guide #sec_workflow .flow-image-list li { width: calc((100% - 20px * 5)/ 6); min-width: 180px; display: flex; flex-direction: column;}
#page_guide #sec_workflow .image { width: 100%; max-width: 120px; margin: 0 auto 15px; display: flex; justify-content: center; align-items: center;}
#page_guide #sec_workflow .image figure {
  width: 100%;
  padding: 20px;
	margin: 0;
	border: none;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FFF;
}
#page_guide #sec_workflow .image figure img { width: 100%; vertical-align: top;}
#page_guide #sec_workflow .desc { width: 100%; padding: 0; font-size: 14px; font-weight: 400; box-sizing: border-box;}
#page_guide #sec_workflow .desc .step { padding: 10px 15px; margin: 0 0 15px; font-size: 16px; font-weight: 700; text-align: center; background: #DDE1E6; box-sizing: border-box;}
#page_guide #sec_workflow .desc .text { font-size: 14px; font-weight: 400;}
#page_guide #sec_workflow .desc a { text-decoration: underline; color: #19AAF1;}

@media (max-width: 768px) {
	#page_guide #sec_workflow .flow-image-list { gap: 20px;}
	#page_guide #sec_workflow .flow-image-list li { width: 100%; display: flex; flex-direction: row; gap: 20px;}
	#page_guide #sec_workflow .image { margin: 0 auto;}
	#page_guide #sec_workflow .desc .step { text-align: left;}
}

/* お支払方法 */
#page_guide #sec_payment .payment-text-wrap { padding: 0 15px; font-size: 16px; font-weight: 400;}
#page_guide #sec_payment .payment-text-wrap .text + .text { margin-top: 15px;}
#page_guide #sec_payment .text { font-size: 16px; font-weight: 400;}
#page_guide #sec_payment .text a { text-decoration: underline; color: #19AAF1;}

@media (max-width: 768px) {
	#page_guide #sec_payment .payment-text-wrap { padding: 0 15px; font-size: 14px;}
	#page_guide #sec_payment .text { font-size: 14px;}
}