/* ================================
  flow
================================ */
body {
  transition: all 0.3s ease;
}
#wrap {
  width: 100%;
  overflow: hidden;
}
#topBox {
  position: relative;
}
#topBox::after {
  background: #0c304d;
  content: '';
  width: 40%;
  height: 80%;
  position: absolute;
  bottom: 10%;
  z-index: -1;
  left: 13%;
}
#topBox h1 {
  position: absolute;
  width: 60%;
  top: 20%;
  background: #1e6faf99;
  padding: 8% 0 8% 15%;
  font-family: "Noto Serif JP", sans-serif;
}
#topBox h1 .maintxt {
  display: block;
  font-size: clamp(24px, 5vw, 58px);
  padding-bottom: 10px;
  color: #fff;
  border-bottom: 1px solid #fff;
}
#topBox h1 .deco {
  position: absolute;
  right: 3%;
  bottom: 5%;
  font-size: clamp(12px, 1.5vw, 16px);
  color: #ffffffdd;
	font-weight: 200;
	letter-spacing: 0.1em;
}
#topBox .imgBox {
  width: 50%;
  margin-left: auto;
  margin-top: 120px;
}
@media screen and (max-width: 1200px) {
  #topBox {
    position: relative;
    width: 120%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }
}
@media screen and (max-width: 767px) {
  #topBox {
    position: relative;
    width: auto;
  }
  #topBox h1 {
    position: relative;
    width: 100%;
    z-index: 2;
    padding: 12% 0 12% 15%;
    top: 90px;
  }
  #topBox::after {
    background: #0c304d;
    content: '';
    width: 100%;
    height: 60%;
    position: absolute;
    top: 70px;
    z-index: -1;
    left: 5%;
  }
  #topBox .imgBox {
    margin-top: 20%;
    width: 90%;
  }
}
@media screen and (max-width: 460px), {
  #topBox .imgBox {
    margin-top: 30%;
    width: 90%;
  }
}

#flowWrap {
	padding: 8rem 0;
}
.flowBox {
	max-width: 1200px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 20px 20px 40px;
	margin: auto;
	border: 2px solid #0c304d;
	position:relative;
}
.flowBox img{
	display: block;
	width: 40%;
	max-width: 340px;
	height: auto;
}
.flowBox::before{
	content: "";
    position: absolute;
	  background: linear-gradient(50deg, #0c304d 0%, #571722 95%);
	 width: 100%;
	 height: 100%;
	 top: 10px;
	 left: 10px;
	z-index: -2;
}
.flowBox dl{
	margin: 1rem 5% 1.5rem 0;
	flex: 1;
}
	
.flowBox dl dt {
	color:#0c304d;
	margin: 0 0 1rem;
	display: flex;
	align-items: center;
	font-size: clamp(18px, 2.5vw, 30px);
}
.flowBox dl .flowTitle{
	font-size: clamp(20px, 2.5vw, 30px);
	font-weight: bold;
}
.flowBox dl .step{
	font-size: clamp(14px, 2.5vw, 30px);
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.flowBox dl .number {
	font-size: clamp(24px, 3vw, 72px);
	font-family: Century Gothic, sans-serif;
	margin-right: 40px;
}

.flowBox dl dd {
	font-size: clamp(14px, 2vw, 18px);
	font-weight: normal;
	margin-right: 5%;
}
#flowWrap .triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #2c253b transparent transparent transparent;
    border-width: 40px 32px 0px 32px;
    position: relative;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 20px;
	  z-index: -4;
	margin-bottom: 2rem;
}


@media screen and (max-width: 1280px), {
	.flowBox {
	margin: 0 5%;
}
.flowBox dl{
	margin: 1rem 0 1rem 0;
	width: 100%;
}
.flowBox dl dt {
	display: block;
}
}
@media screen and (max-width: 1020px), {
		.flowBox dl dd br{
			display: none;
}
}

@media screen and (max-width: 767px) {
	
#flowWrap {
	padding: 2rem 0;
}
	.flowBox {
	flex-direction: column;
	padding: 20px 20px 20px 40px;
	border: 1px solid #0c304d;
}
.flowBox dl dt {
	display: flex;
}
.flowBox dl .number {
	margin-right: 20px;
}
.flowBox img{
	width: 100%;
	margin: 1rem auto 0;
}
.flowBox dl dd {
	margin-right: 0%;
}
.flowBox {
	padding: 20px 40px 20px 40px;
}
#flowWrap .triangle {
   top: 10px;
	 z-index: -4;
	 margin-bottom: 1rem;
}
}

@media screen and (max-width: 540px) {
	.flowBox {
	padding:  0 5% 20px ;
}
.flowBox dl dt {
	display: block;
}
}