@charset "UTF-8";

/* ===================================
	File Name   : news.css
	Description : news Pages Layout CSS
	Editor      : Bface Saeki
	Last Editor : Bface Saeki
	
	Update Description :
	[2024/09/25] 新規作成

====================================== */

/*========== Style Contents ==========

	1. Individual Redefinition
	2. Share Elements Setting
	
====================================== */


/*===== ■1. Individual Redefinition =====*/
#head {
  &::after {background: url("../img/entry/img-title.jpg") no-repeat center / cover;}
  h1::after {content: "ENTRY";}
}

#breadcrumb { margin: 1rem auto;}

main {
	margin-bottom: 0;
	> .box_fill { margin-bottom: 0;}
}

article .box_fill {
	margin-bottom: 6rem;
	padding: 6rem 0;
	p {
		font-weight: 600;
		font-size: 2rem;
		text-align: center;
	}
}

@media (max-width: 768px){
	.box_fill { padding: 4rem 0 8rem;}
	article .box_fill {
		margin-bottom: 4rem;
		padding: 4rem 0;
		p {
			font-size: 1.8rem;
		}
	}
}


/*===== ■2. Share Elements Setting =====*/
#entry_detail{
  > div{
    margin-bottom: 8rem;
  }
  p{
    margin-bottom: 1rem;
    &:last-of-type{
      margin-bottom: 6rem;
    }
  }
  #howto{
    .eligibility_tabel {
      border-top: 0.1rem solid var(--LGC);
      .eligibility_box {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 0.1rem solid var(--LGC);
                > h3 {
            padding: 3rem 2rem;
            width: 16rem;
            text-align: center;
            font-weight: bold;
        }
        > div {
            flex: 1;
            padding: 3rem 2rem;
        }
      }
    }
  }
  #flow{
    dl {
      display: grid;
      grid-template-columns: 10rem 1fr;
      grid-row-gap: 1rem;
      font-weight: 500;
      line-height: 1.2;
      dt {
        grid-column: 1 / 2;
        padding: 1.5rem 3rem;
        border-left: 4px solid var(--mainC);
        background: var(--accentC);
        text-align: center;
      }
      dd {
        grid-column: 2 / 3;
        padding: 1.5rem 3rem;
        background: var(--LGC);
      }
    }
    
    
  }
}

@media (max-width: 768px) {
  #entry_detail{
    #howto{
      .eligibility_tabel {
        border-top: 0.1rem solid var(--GC);
        .eligibility_box {
          margin-top: 0.1rem;
          border-bottom: 0.1rem solid var(--GC);
          > h3 {
            padding: 2rem 1rem;
            width: 100%;
            background: var(--LGC);
          }
          > div {
            padding: 2rem 1rem;
          }
        }
      }
    }
    #flow{
      dl {
        grid-template-columns: auto;
        dt {
          grid-column: auto;
          padding: 1rem 2rem;
          border-left: 4px solid var(--mainC);
          background: var(--accentC);
          text-align: left;
        }
        dd {
          grid-column: auto;
          margin-top: -1rem;
          padding: 1rem 2rem;
          border-left: 4px solid var(--mainC);
        }
      }
    }
  }
 }

#content {
	margin-bottom: 7rem;
	> dl {
		margin-bottom: 5rem;
		text-align: center;
		dt {
			margin-bottom: 1rem;
			font-weight: 700;
			font-size: 2.4rem;
		}
	}
	> div {
		display: flex;
    justify-content: center;
    gap: 4rem;
		> div {
			padding: 3.5rem;
			border: 4px solid var(--accentC);
			text-align: center;
      width: 60%;
			h3 {
				margin-bottom: 1.5rem;
				font-weight: 600;
				font-size: 2rem;
			}
			figure {
				width: 8rem;
				margin: 0 auto 1.5rem;
			}
			p em {
				display: block;
				margin-bottom: 1rem;
				font-weight: 700;
				font-size: 2.2rem;
				letter-spacing: normal;
			}
		}
	}
}

@media (max-width: 768px){
  #content {
		margin-bottom: 4rem;
		> dl {
			margin-bottom: 2rem;
			dt {
				margin-bottom: 1rem;
				font-size: 1.8rem;
			}
		}
		> div {
			display: block;
			> div {
				flex: 1;
				margin-bottom: 8rem;
				padding: 2rem;
        width: 100%;
				h3 {
					margin-bottom: 2rem;
					font-size: 1.8rem;
				}
				p em {
					font-size: 1.8rem;
				}
			}
		}
  }
}