@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@100..900&display=swap");

@media screen and (max-width: 834px) {
  .pc {
    display: none !important;
  }
}

@media screen and (min-width: 835px) {
  .sp {
    display: none !important;
  }
}

@media screen and (max-width: 1024px) {
  .pc-tb {
    display: none !important;
  }
}

@media screen and (min-width: 1025px) {
  .sp-tb {
    display: none !important;
  }
}

@media screen and (max-width: 640px) {
  .pc-sm {
    display: none !important;
  }
}

@media screen and (min-width: 641px) {
  .sp-sm {
    display: none !important;
  }
}

@media screen and (max-width: 499px) {
  .pc-xsl {
    display: none !important;
  }
}

@media screen and (min-width:500px) {
  .sp-xsl {
    display: none !important;
  }
}

@media screen and (max-width: 376px) {
  .pc-xs {
    display: none !important;
  }
}

@media screen and (min-width: 377px) {
  .sp-xs {
    display: none !important;
  }
}

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━
     flow
  ━━━━━━━━━━━━━━━━━━━━━━━━━ */
.flow-main {
	margin-bottom: 12rem;
}

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━
     flow-lead
  ━━━━━━━━━━━━━━━━━━━━━━━━━ */
.flow-lead {
	margin: 3rem auto 4.3rem;
    width: 58%;
}
.flow-lead__heading {
    text-align: center;
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 2.5rem;
}
.flow-lead__desc {
    font-size: 1.7rem;
    line-height: 1.7647058824;
    font-weight: 300;
    text-align: center;
	
}
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━
     TAB BUTTONS
  ━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .flow-main__tab-bar {
    display: flex;
    justify-content: center;
    gap: 0;
    max-width: 880px;
    border-radius: 40px;
    border: 1px solid #45B035;
    padding: 0.5rem;
    min-width: 835px;
	  width: 60%;
    overflow: hidden;
    margin: 0 auto 4.5rem;
  }
 
  .flow-main__tab-btn {
    flex: 1;
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 2.4rem 5%;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    border: none;
    outline: none;
    color: #45B035;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
    position: relative;
    border-radius: 0;
  }
 
  .flow-main__tab-btn:first-child {
    border-radius: 8px 0 0 0;
  }
  .flow-main__tab-btn:last-child {
    border-radius: 0 8px 0 0;
  }
 
  .flow-main__tab-btn .flow-main__tab-icon {
    font-size: 16px;
    line-height: 1;
  }
 
  .flow-main__tab-btn.is-tab-active {
    border-radius: 35px;
    background: linear-gradient(to right, #67C360 0%, #5EB592 100%);
    color: #fff;
  }
 
  /* active indicator triangle */
  .flow-main__tab-btn.is-tab-active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 8px;
    background: var(--fp-green);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    z-index: 2;
  }
 
  /* ── tab panels ── */
  .flow-main__tab-panel {
    display: none;
  }
  .flow-main__tab-panel.is-tab-active {
    display: block;
  }

  .flow-main__wrapper *,
  .flow-main__wrapper *::before,
  .flow-main__wrapper *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
 
  /* ── Variables & outer container ── */
.flow-main__tab-panel {
    max-width: 1510px;
    width: 90%;
    margin: 0 auto;
	
}

.flow-main__wrapper{
 
    /* 2カラム */
    display: flex;
    width: 100%;
    margin: 0 auto;
    align-items: flex-start;
    overflow: visible;
  }
 

  /* ── tab panels ── */
  .flow-main__tab-panel {
    display: none;
  }
  .flow-main__tab-panel.is-tab-active {
    display: block;
  }
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━
     LEFT SIDEBAR (sticky)
  ━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .flow-main__sidebar {
    width: 30%;
    flex-shrink: 0;
    align-self: flex-start;
    position: sticky;
    top: 25%;
  }
 
  /* nav */
  .flow-main__nav {
    list-style: none;
    position: relative;
  }
 
	/* グレーライン */
	.flow-main__nav::before{
	  content:'';
	  position:absolute;
		left: 10.5px;
		top: 5px;
	  bottom:6px;
	  width:0.3rem;
	  background:#f4f4f4;
	  border-radius:2px;
	}

	/* 緑 progress */
	.flow-main__nav-progress{
	  position:absolute;
		left: 10.5px;
		top: 5px;
	  width:0.3rem;
	  height:0%;
	  background:#3CB034;
	  border-radius:2px;
	  transition:height .2s linear;
	}
 
  .flow-main__nav-item {
    position: relative;
    list-style: none;
    padding: 0 0 3rem 3rem;
    cursor: pointer;
  }
 
  .flow-main__nav-item:last-child { padding-bottom: 0; }
 
  /* ドット */
  .flow-main__nav-item::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 5px;
    width:  1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #DDDDDD;
    transition: background 0.3s, box-shadow 0.3s;
    z-index: 1;
  }
 
  .flow-main__nav-link {
    display: block;
    font-size: 1.8rem;
    line-height: 1.55;
    font-weight: 500;
	 color: rgba(25,25,25,0.3);
    text-decoration: none;
    transition: color 0.3s, font-weight 0.2s;
    user-select: none;
  }
 
 
  /* active */
  .flow-main__nav-item.is-active::before {
    background: #3cb034;
  }
  .flow-main__nav-item.is-active > .flow-main__nav-link {
	 color: rgba(25,25,25,1);
  }
  .flow-main__nav-item.is-active > .flow-main__nav-sub {
    color: var(--fp-green-light);
  }
 
  /* passed */
  .flow-main__nav-item.is-passed::before {
    background: #3cb034;
  }
  .flow-main__nav-item.is-passed > .flow-main__nav-link {
    color: #191919;
  }
 
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━
     RIGHT CONTENT
  ━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .flow-main__content {
	  width: 65%;
	  display: flex;
	  flex-direction: column;
	  gap: 5rem;
  }
.flow-main__item {
	position: relative;
	  padding: 3rem 3%;
	  border-radius: 20px;
	  border: 1px solid #DDDDDD;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 4.5rem;
	
}
.flow-main__item::before  {
    content: '';
    position: absolute;
    bottom: -3rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    background-image: url(../img/flow/flow-triangle.webp);
    background-repeat: no-repeat;
    background-size: contain;
    width: 8rem;
    height: 3rem;
	
}
.flow-main__item:last-child::before  {
    content: none;
}

  /* 画像プレースホルダー */
  .flow-main__card-img-placeholder {
    width: 30%;
    flex-shrink: 0;
	  overflow: hidden;
	  border-radius: 10px;
  }
  .flow-main__card-img-placeholder img {
	  width: 100%;
	  height: auto;
	  object-fit: cover;
  }
  .flow-main__card-body {
    flex: 1;
    min-width: 0;
	  width: 55%;
  }
 

 
  .flow-main__card-title {
    font-size: clamp(1.8rem, 1.4vw, 2.4rem);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1.5rem;
	  letter-spacing: 0.05em;
  }
 
  .flow-main__card-text {
    font-size: 1.5rem;
    line-height: 1.7;
    font-weight: 400;
  }
 
  .flow-main__card-note {
    font-size: 1.2rem;
    line-height: 1.7;
    margin-top: 0.5rem;
  }

@media screen and (max-width: 834px) {
	
	.flow-main {
		margin-bottom: 7rem;
	}
	.flow-lead {    
		width: 90%;
	}
	.flow-lead__heading {    
    	font-size: clamp(2.4rem,2vw,2.8rem);
	}
	.flow-main__tab-bar {
		min-width: auto;
		width: 95%;
	}
	.flow-main__tab-btn {
		padding: 1.9rem 3%;
		font-size: 1.3rem;
		
	}
	.flow-main__sidebar {
		display: none;
	}
	.flow-main__content {
		width: 100%;
		gap: 4rem;
	}
	.flow-main__item {
		flex-direction: column;
		gap: 3rem;
		display: flex;
    	padding: 3rem 5%;
	}
	.flow-main__card-img-placeholder {
		width: 100%;
    	border-radius: 5px;
	}
	.flow-main__card-body {
		width: 100%;
	}
}
 /*# sourceMappingURL=about-jm.css.map */