@charset "UTF-8";

/* ===================================
	File Name   : news.css
	Description : news Pages Layout CSS
	Editor      : Bface Chiba
	Last Editor : Bface Chiba
	
	Update Description :
	[2026/02/16] 新規作成

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

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

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


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

#breadcrumb { margin: 1rem auto;}

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

article .box_fill {
	margin-bottom: 6rem;
	padding: 6rem 0;
}

@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 =====*/
#study_detail{
	> p{
		margin-top: 4rem;
	}
  > div{
    margin-bottom: 8rem;
  }
	#purpose{
		p{
			margin-bottom: 1rem
		}
		ul {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			li {
				width: calc(25% - 1rem);
				border: 0.5rem solid var(--accentC);
				padding: 3rem;
				text-align: center;
				figure{
					width: 50%;
					margin: 0 auto 2rem;
				}
			}
		}
	}
  #outline{
    .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;
					li {
						display: flex;
						&::before{
							width: 1.2rem;
							height: .2rem;
							margin: 1rem .5rem 0 0;
							background: var(--accentC);
							content: "";
						}
          }
        }
      }
    }
  }
	#theme{
		div{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			dl{
				width: calc(33.3% - 2rem);
				background: #fff;
				padding: 2rem;
				border: 0.5rem solid var(--accentC);
				dt{
					font-weight: bold;
					margin-bottom: 2rem;
					padding-bottom: 3rem;
					padding-top: 2rem;
					font-size: 2rem;
					text-align: center;
					border-bottom: 0.1rem solid var(--accentC);
				}
				dd{
					p{
						font-size: 1.6rem;
						text-align: left;
						margin-bottom: 1rem;
						font-weight: bold;
					}
				}
			}
		}
	}
  #flow{
    dl {
      display: grid;
      grid-template-columns: 22rem 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);
      }
    }
  }
	#guideline{
		h2{
			margin-bottom: 4rem;
			font-weight: 600;
			font-size: 3rem;
			text-align: center;
		}
		h3{
			margin-top: 2.2rem;
			font-weight: bold;
			font-size: 1.8rem;
			margin-bottom: 0.5rem;
		}
		dl{
			padding: 1.5rem 2rem;
			background: #fff;
			margin-top: 2rem;
			border-left: solid 0.5rem var(--accentC);
			dt{
				font-weight: bold;
				font-size: 1.8rem;
				margin-bottom: 0.5rem;
				span{
					font-size: 1.6rem;
					display: inline-block;
				}
			}
		}
	}
}



@media (max-width: 768px) {
  #study_detail{
		#purpose{
			ul{
				li{
					width: calc(50% - 0.5rem);
					margin-bottom: 1rem;
					padding: 1.5rem;
					figure{
						width: 70%;
						margin: 0 auto 1rem;
					}
				}
			}
		}
    #outline{
      .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);
          } 
        }
      }
    }
		#theme{
			div {
			dl{
				width: 100%;
				margin-bottom: 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);
        }
      }
    }
		#guideline{
			h2{
				font-size: 2.4rem;
			}
  }
 }

#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;
				}
			}
		}
  }
}