@charset "UTF-8";

/* ==========================================================
ABOUT PAGE STYLES
========================================================== */

/* ----------------------------------------------------------
Top Area (Main Visual)
---------------------------------------------------------- */
.top_about_area {
padding: 80px 0 0;
height: 500px;
background: url(../../images/about/2412-TOCINMASH.jpg) no-repeat center center;
background-size: cover;
/* --- 追加箇所: フェードインの設定 --- */
opacity: 0;
transition: opacity .2s ease-in-out;
}
/* 読み込み完了時専用のクラス */
.top_about_area.is-loaded-about {
    opacity: 1;
}
.top_about_area > .tit {
font-size: 2.6em;
font-family: Futura;
color: #121212;
letter-spacing: .1em;
text-align: center;
font-weight: 600;
}
.top_about_area > .tit > span {
font-size: .8rem;
opacity: .7;
display: block;
line-height: 1;
}

@media (max-width: 780px) {
.top_about_area {
padding: 5vw 0 0;
height: 71vw;
background-size: 145vw;
}
.top_about_area > .tit {
font-size: 1.8em;
}
.top_about_area > .tit > span {
font-size: 0.7rem;
}
}

/* ----------------------------------------------------------
Member Grid Layout
---------------------------------------------------------- */
.about-members-wrap {
margin: 100px auto 0;
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px 20px;
}

.member-card {
margin-bottom: 32px;
}
.member-card p {
line-height: 1.2;
}
.member-card .num {
font-size: .85em;
color: #3c3c3c;
margin-bottom: 0.2em;
}
.member-card .name {
font-size: 1.6em;
line-height: 1.4;
margin-bottom: .4em;
font-weight: 600;
}
.member-card .prof {
font-size: 0.9em;
line-height: 1.4;
margin-bottom: 1em;
}
.member-card .prof span {
color: #848484;
padding-right: .6em;
}

.sns a {
height: 1.1em;
width: 1.1em;
background-size: 1.1em;
display: inline-block;
background-repeat: no-repeat;
background-position: center center;
margin: .3em .6em .3em 0;
opacity: .7;
}
.sns a.tw { background-image: url(../../images/ico/ico_x_blk.png); }
.sns a.in { background-image: url(../../images/ico/ico_ig_blk.png); }
.sns a.yt { background-image: url(../../images/ico/ico_youtube_blk.png); }
.sns a:hover { opacity: 1; }

@media (max-width: 780px) {
.about-members-wrap {
padding: 10vw 0 1vw;
width: 94%;
margin: 0 auto;
grid-template-columns: repeat(2, 1fr);
gap: 30px 4%;
}
}

/* ----------------------------------------------------------
Intro Text
---------------------------------------------------------- */
p.intro {
text-align: justify;
}
@media (max-width: 780px) {
p.intro {
text-align: left;
font-size: 0.8rem;
margin-bottom: 40px;
}
}

/* ----------------------------------------------------------
HISTORY Section
---------------------------------------------------------- */
.history_area a:hover {
opacity: .7;
}
.history_area s {
display: none;
}

.history h3 {
font-weight: 600;
letter-spacing: 0.05em;
font-size: 1.3em;
margin: 20px 0 10px;
}
.search_item {
display: inline-block;
padding-right: 0.6em;
cursor: pointer;
opacity: .3;
font-size: 0.8rem;
transition: opacity 0.2s;
font-weight: 500;
}
.search_item.is-active,
.search_item:hover {
opacity: 1;
}

/* Layout: Year & List */

.history_area{
margin-top: 3em;
}
.history {
display: flex;
align-items: flex-start;
margin-top: 1em;
position: relative;
}

/* Year Title */
.history .year-title {
position: static;
flex-shrink: 0;
margin: 0 20px 0 0;
font-weight: 600;
font-size: 1.2em;
line-height: 0.9;
text-align: right;
transform: translateY(4px); 
}

/* List Body */
.history > ul {
margin: 0;
padding: 0;
list-style: none;
flex-grow: 1;
}

.history > ul > li {
display: flex;
align-items: baseline;
position: relative;
margin: 0 0 16px 0;
padding-left: 0;
line-height: 1.6;
}

/* Month */
.history > ul > li > span {
position: static;
display: block;
width: 2.5em;
flex-shrink: 0;
text-align: center;
margin-right: 0.5em;
font-weight: 600;
color: #666;
font-size: 0.9em;
line-height: 1;
}

/* Filtering State */
.list_item.is-hide {
display: none;
}

/* Hide entire year block if all items are hidden */
.history:not(:has(.list_item:not(.is-hide))) {
display: none;
}

/* Mobile */
@media (max-width: 780px) {
.history {
flex-direction: column; 
margin-top: 2.5em;
}

.history .year-title {
width: 100%;
text-align: left;
margin: 0 0 10px 0;
transform: none;
}

.history > ul > li {
font-size: 0.95em;
}

.history > ul > li > span {
width: 2em;
margin-right: 0.5em;
}

.search_item {
padding-right: 0.2em;
font-size: 0.7rem;
}

}