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


.next_sec--rgt {
    background-image: url(../img/flow/next-natural.png);
}

.h3-line .muryo{
	display: inline-block;
	padding: 20px;
	background-color: #B4B640;
	margin-left: 25px;
	border-radius: 100px;
	color: #fff;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-size: clamp(20px, 1.27vw, 30px);

}
.mb50{
	margin-bottom: 50px;
}
.flow-sec{
	margin-bottom: 50px;
}
.h3-line {
	display: flex;
	align-items: center;
	font-size: clamp(28px, 1.87vw, 47px);
	font-family: "Shippori Mincho", serif;
	font-weight: 400;
	margin-bottom: 50px;
  }
@media only screen and (max-width: 767px) {
  
	.h3-line {
	display: flex;
	align-items: center;
	font-size: clamp(15px, 1.07vw, 27px);
	font-family: "Shippori Mincho", serif;
	font-weight: 400;
	margin-bottom: 50px;
  }
	  .h3-line .muryo{
	display: inline-block;
	padding: 20px;
	background-color: #B4B640;
	margin-left: 25px;
	border-radius: 100px;
	color: #fff;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-size: clamp(15px, 1.07vw, 27px);

}
}
  .h3-line:after {
	border-top: 1px solid #000661;
	content: "";
	flex-grow: 1;
  }

  .h3-line:after {
	margin-left: 1rem;
  }

.ttl-03{
	border-bottom: 1px #D8DA56 solid;
	background: #fff;
	display: flex;
	align-items: center;
}

.ttl-03 .num{
	max-width: 200px;
	max-height: 200px;
	aspect-ratio:1/1;
	background: #D8DA56;
	padding: 30px;
	text-align: center;
	display: block;
	margin-right: 20px;
}


.step{
	display: block;
	font-size: clamp(12px, 0.78vw, 18px);
}
.num-no{
	display: block;
	font-size: clamp(24px, 1.66vw, 42px);
	line-height: 1;
}
.ttl-03-inner{
	font-size: clamp(18px, 1.25vw, 32px);
}

.img-area{
	width: 45%;
	margin-left: 5%;
}

@media all and (min-width: 781px) and (max-width: 1100px) {
  

  .h3-line {
	display: flex;
	align-items: center;
  }

  .h3-line:after {
	border-top: 1px solid #000661;
	content: "";
	flex-grow: 1;
  }

  .h3-line:after {
	margin-left: 1rem;
  }
}

@media all and (max-width: 780px) {
  .ttl-03{
	border-bottom: 1px #D8DA56 solid;
	background: #fff;
	display: block;
	align-items: center;
}
.ttl-03 .num{
	width: 100%;
	max-width: 100%;
	max-height: auto;
	aspect-ratio:auto;
	background: #D8DA56;
	padding: 10px;
	text-align: center;
	display: block;
	margin-right: 0px;
	margin-bottom: 10px;
}
.ttl-03-inner {
    text-align: center;
}
  .h3-line {
	display: flex;
	align-items: center;
	          width: 90%;
	  margin-left: auto;
	  margin-right: auto;
  }

  .h3-line:after {
	border-top: 1px solid #000661;
	content: "";
	flex-grow: 1;
  }

  .h3-line:after {
	margin-left: 1rem;
  }
}

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

	
	  
}


/*誘導ボタン*/




@media print,
screen and (min-width:768px) {
  a {
    -webkit-tap-highlight-color: transparent;
  }
}



a {
  color: #181818;
  color: var(--clr-link, #333);
  text-decoration: none;
  transition: all .4s ease-out;
  transition: var(--transit-default, all 0.4s ease-out);
  outline: none;
}

a:focus {
  text-decoration: none !important;
}

.content-wrap a {
  text-decoration: none;
}

.content-wrap a:hover {
  text-decoration: none;
}
.content-wrap .u-no-event{
	font-size: clamp(15px, 0.9vw, 30px);
}
.content-wrap .btn.btn-small a {
  text-decoration: none;
}
.content-wrap .p-svgArw:before {
    
    background-color: #fff;
   
}
.content-wrap .btn.btn-small .txt--wrap {
  padding: 6px 0;
  margin-right: 52px;
  text-decoration: none;
  font-size: clamp(15px, 0.9vw, 30px);
  position: relative;
  
}
.content-wrap .btn{
	display: block;
	text-align: left;
}
.content-wrap .btn.btn-small .txt--wrap::after {
  content: "";
  position: absolute;
  background-image: url(https://craftcorp.jp/wp/wp-content/themes/standard_sass/images/common/arrow.svg);
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: center;
  width: 40px;
  height: 40px;
  position: absolute;
  right: -52px;
  top: calc(50% - 20px);
  background-color: #fff;
  border: solid 1px #dfdfdf;
  border-radius: 50%;
}

.content-wrap .btn a {
  position: relative;
  z-index: 1;
  padding: 14px 0;
  width: auto;
  color: #000;
  color: var(--btn-clr-main);
  text-align: left;
  font-size: clamp(15px, 0.9vw, 30px);
  
  font-family: var(--font-primary-m);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

a .txt--wrap {
  position: relative;
}

a .txt--wrap::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  height: 1px;
  width: 100%;
  background: 0 0;
  transition: all .4s ease-out;
  transition: var(--transit-default);
}

a:hover .txt--wrap::before {
  background: currentColor;
  animation: btn-line .5s ease-out 0s 1 normal forwards;
}

@media screen and (max-width:47.9375em) {
  .content-wrap .btn a {
    
    min-width: 100%;
    padding: 10px 0;
  }
	.text-area{
		margin-bottom: 30px;
	}
	.img-area {
		margin-bottom: 20px;

    margin-left: 0%;
}
	
	.left-btn {
    margin-top: 20px;
    display: flex
;
    justify-content: left;
}
}

/*! CSS Used keyframes */
@keyframes btn-line {
  0% {
    transform: scale(1, 1);
  }

  50% {
    transform-origin: right top;
    transform: scale(0, 1);
  }

  51% {
    transform-origin: left top;
  }

  100% {
    transform: scale(1, 1);
    transform-origin: left top;
  }
}


.flow-2box{
	
}

.img-area2{
	margin-bottom: 20px;
}