/* =========================================================
   JEBLA NEWS & SCHEDULE
   student_benefits テイスト
========================================================= */

.jebla-page{
  --jebla-brown:#542023;
  --jebla-brown-dark:#361416;
  --jebla-gold:#b29a68;
  --jebla-gold-light:#d2c19c;

  --jebla-cream:#f8f5f0;
  --jebla-cream2:#f2eee8;
  --jebla-white:#fff;

  --jebla-text:#352f2d;
  --jebla-sub:#817a76;
  --jebla-line:#ded8d1;

  width:100%;
  color:var(--jebla-text);
  background:#fff;

  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

  letter-spacing:.03em;
}


.jebla-page *,
.jebla-page *::before,
.jebla-page *::after{
  box-sizing:border-box;
}


.jebla-container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 40px;
}



/* =========================================================
   HERO
========================================================= */

.jebla-hero{
  position:relative;
  min-height:520px;

  margin:0 0 110px;
  padding:90px 65px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  overflow:hidden;

  border-radius:0;

  background:
    linear-gradient(
      90deg,
      rgba(248,245,240,.98) 0%,
      rgba(248,245,240,.94) 39%,
      rgba(248,245,240,.70) 53%,
      rgba(248,245,240,.06) 76%
    ),
    url("https://www.eyebrow.or.jp/wp-content/uploads/2026/01/bg.jpg")
    center right / cover no-repeat;
}


/* 前の丸装飾を消す */

.jebla-hero::after{
  display:none;
}


/* 左上の小見出し */

.jebla-hero-en{
  position:relative;
  z-index:2;

  margin:0 0 24px;

  color:var(--jebla-gold);

  font-family:
    "Times New Roman",
    Georgia,
    serif;

  font-size:12px;
  font-style:normal;
  font-weight:400;

  letter-spacing:.24em;

  text-transform:uppercase;
}


/* 英字前の細いライン */

.jebla-hero-en::before{
  content:"";

  display:inline-block;

  width:38px;
  height:1px;

  margin-right:15px;

  vertical-align:middle;

  background:var(--jebla-gold);
}


.jebla-hero-title{
  position:relative;
  z-index:2;

  max-width:560px;

  margin:0;

  color:#302a28;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size:47px;
  font-weight:500;

  line-height:1.5;

  letter-spacing:.06em;
}


.jebla-hero-text{
  position:relative;
  z-index:2;

  max-width:480px;

  margin-top:28px;

  color:#655e5a;

  font-size:13px;
  font-weight:400;

  line-height:2.1;
}



/* =========================================================
   GUIDE NAVIGATION
========================================================= */

.jebla-guide-grid{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:1px;

  margin:0 0 120px;

  background:var(--jebla-line);

  border-top:1px solid var(--jebla-line);
  border-bottom:1px solid var(--jebla-line);
}


.jebla-guide-card{
  position:relative;

  min-height:150px;

  padding:32px 32px;

  display:flex;
  align-items:flex-end;

  border:0;
  border-radius:0;

  background:#fff;

  color:var(--jebla-text);

  text-decoration:none;

  box-shadow:none;

  transition:
    background .3s ease,
    color .3s ease;
}


.jebla-guide-card:hover{
  border:0;

  background:var(--jebla-cream);

  box-shadow:none;

  transform:none;
}


.jebla-guide-icon{
  position:absolute;

  top:28px;
  left:31px;

  width:auto;
  height:auto;

  border-radius:0;

  background:transparent;

  color:var(--jebla-gold);

  font-size:15px;
}


.jebla-guide-title{
  color:#332c29;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    serif;

  font-size:16px;
  font-weight:500;

  letter-spacing:.04em;
}


.jebla-guide-sub{
  margin-top:7px;

  color:#918b86;

  font-size:10px;

  letter-spacing:.06em;
}


.jebla-guide-arrow{
  position:absolute;

  right:27px;
  bottom:29px;

  color:var(--jebla-brown);

  font-size:20px;

  transition:transform .3s ease;
}


.jebla-guide-card:hover .jebla-guide-arrow{
  transform:translateX(5px);
}



/* =========================================================
   FILTER AREA
========================================================= */

.jebla-filter-box{
  margin:0 0 70px;

  padding:0;

  border:0;
  border-radius:0;

  background:transparent;
}


.jebla-filter-row{
  display:grid;

  grid-template-columns:
    1.7fr
    1fr
    1fr
    auto;

  gap:12px;
}


.jebla-search,
.jebla-select{
  width:100%;
  height:54px;

  padding:0 17px;

  border:1px solid #d9d2ca;
  border-radius:0;

  outline:none;

  background:#fff;

  color:#443d39;

  font-size:12px;
}


.jebla-search::placeholder{
  color:#aaa39d;
}


.jebla-search:focus,
.jebla-select:focus{
  border-color:var(--jebla-gold);
}


.jebla-reset{
  height:54px;

  padding:0 28px;

  border:1px solid var(--jebla-brown);
  border-radius:0;

  background:var(--jebla-brown);

  color:#fff;

  font-size:10px;
  font-weight:500;

  letter-spacing:.12em;

  cursor:pointer;

  transition:.25s;
}


.jebla-reset:hover{
  background:var(--jebla-brown-dark);
}



/* =========================================================
   MAIN LAYOUT
========================================================= */

.jebla-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    270px;

  gap:72px;

  align-items:start;
}



/* =========================================================
   SECTION HEADINGS
========================================================= */

.jebla-heading{
  margin:0 0 38px;

  color:#302a28;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    serif;

  font-size:30px;
  font-weight:500;

  line-height:1.5;

  letter-spacing:.055em;
}


.jebla-heading-en{
  display:block;

  margin-bottom:12px;

  color:var(--jebla-gold);

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size:10px;
  font-weight:600;

  letter-spacing:.23em;
}



/* =========================================================
   EVENT LIST
========================================================= */

.jebla-event-list{
  border-top:1px solid #81766d;
}


.jebla-event-card{
  position:relative;

  display:grid;

  grid-template-columns:
    112px
    minmax(0,1fr)
    125px;

  gap:28px;

  min-height:166px;

  padding:29px 0;

  align-items:center;

  border-bottom:1px solid var(--jebla-line);

  background:#fff;

  transition:background .3s ease;
}


.jebla-event-card:hover{
  background:#fcfaf7;
}


/* DATE */

.jebla-event-date{
  min-height:auto;

  padding:0;

  display:flex;
  flex-direction:column;

  align-items:flex-start;

  border:0;
}


.jebla-event-year{
  order:3;

  margin-top:7px;

  color:#9e9690;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size:9px;

  letter-spacing:.13em;
}


.jebla-event-md{
  color:#382e2a;

  font-family:
    "Times New Roman",
    Georgia,
    serif;

  font-size:37px;
  font-weight:400;

  line-height:1;
}


.jebla-event-week{
  margin-top:9px;

  color:var(--jebla-gold);

  font-size:10px;
}



/* TAGS */

.jebla-event-tags{
  display:flex;

  flex-wrap:wrap;

  gap:7px;

  margin-bottom:12px;
}


.jebla-category-tag{
  display:inline-flex;

  align-items:center;

  min-height:23px;

  padding:3px 9px;

  border-radius:0;

  background:var(--jebla-cream2);

  color:#756b64;

  font-size:9px;
  font-weight:500;

  letter-spacing:.06em;
}


/* 検定 */

.jebla-cat-exam{
  background:#f3e6e7;

  color:#8c555b;
}


/* セミナー */

.jebla-cat-seminar{
  background:#eee9e2;

  color:#796954;
}


/* 会員 */

.jebla-cat-member{
  background:#ede5d7;

  color:#836e47;
}



/* STATUS */

.jebla-status-tag{
  display:inline-flex;

  align-items:center;

  min-height:23px;

  padding:2px 8px;

  border-radius:0;

  background:transparent;

  font-size:9px;

  letter-spacing:.04em;
}


.jebla-status-open{
  border:1px solid #8aa08e;

  color:#58705c;
}


.jebla-status-closed{
  border:1px solid #c3beba;

  color:#99918b;
}


.jebla-status-finished{
  border:1px solid #cdc8c4;

  color:#aaa29d;
}



/* TITLE */

.jebla-event-title{
  margin-bottom:8px;

  color:#302b28;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    serif;

  font-size:18px;
  font-weight:500;

  line-height:1.7;

  letter-spacing:.035em;
}


.jebla-event-place{
  color:#77706b;

  font-size:11px;

  line-height:1.8;
}


.jebla-pin{
  color:var(--jebla-gold);

  font-size:6px;
}


.jebla-event-area{
  margin-top:3px;

  color:#aaa39d;

  font-size:9px;

  letter-spacing:.08em;
}



/* EVENT BUTTON */

.jebla-event-button{
  display:flex;

  width:100%;

  align-items:center;
  justify-content:space-between;

  padding:12px 0;

  border:0;
  border-bottom:1px solid var(--jebla-brown);

  border-radius:0;

  background:transparent;

  color:var(--jebla-brown);

  text-decoration:none;

  text-align:left;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size:9px;
  font-weight:600;

  letter-spacing:.1em;
}


.jebla-event-button::after{
  content:"→";

  font-size:14px;

  transition:transform .25s ease;
}


.jebla-event-button:hover{
  background:transparent;

  color:var(--jebla-brown-dark);
}


.jebla-event-button:hover::after{
  transform:translateX(4px);
}



/* =========================================================
   NEXT EVENT SIDEBAR
========================================================= */

.jebla-sidebar{
  position:sticky;

  top:105px;
}


.jebla-side-card{
  margin:0 0 42px;

  overflow:visible;

  border:0;
  border-top:1px solid var(--jebla-gold);

  border-radius:0;

  background:#fff;
}


.jebla-side-title{
  padding:18px 0;

  border-bottom:1px solid var(--jebla-line);

  background:transparent;

  color:var(--jebla-gold);

  text-align:left;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size:9px;
  font-weight:600;

  letter-spacing:.22em;
}


.jebla-next{
  padding:27px 0 8px;
}


.jebla-next-date{
  margin:7px 0 21px;

  color:#302a28;

  font-family:
    "Times New Roman",
    Georgia,
    serif;

  font-size:34px;
  font-weight:400;

  line-height:1.2;
}


.jebla-next-name{
  color:#302a28;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    serif;

  font-size:17px;
  font-weight:500;

  line-height:1.7;
}


.jebla-next-place{
  margin-top:13px;

  color:#88817b;

  font-size:10px;

  line-height:1.8;
}


.jebla-next-button{
  display:flex;

  align-items:center;
  justify-content:space-between;

  margin-top:27px;

  padding:13px 0;

  border-bottom:1px solid var(--jebla-brown);

  border-radius:0;

  background:transparent;

  color:var(--jebla-brown);

  text-decoration:none;

  text-align:left;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size:9px;
  font-weight:600;

  letter-spacing:.1em;
}


.jebla-next-button:hover{
  background:transparent;

  color:var(--jebla-brown-dark);
}



/* CATEGORY SIDE MENU */

.jebla-side-links{
  padding:8px 0;
}


.jebla-side-link{
  display:flex;

  justify-content:space-between;

  padding:14px 0;

  border-bottom:1px solid #eee9e4;

  color:#635b56;

  text-decoration:none;

  font-size:10px;

  letter-spacing:.04em;
}


.jebla-side-link:hover{
  color:var(--jebla-brown);
}



/* =========================================================
   PAST
========================================================= */

.jebla-past{
  margin-top:45px;

  overflow:hidden;

  border:0;
  border-top:1px solid #8d8179;

  border-radius:0;
}


.jebla-past summary{
  padding:19px 0;

  background:#fff;

  color:#716a65;

  font-size:10px;
  font-weight:500;

  letter-spacing:.07em;

  cursor:pointer;
}



/* =========================================================
   NEWS
========================================================= */

.jebla-news{
  margin:125px 0 0;

  padding:80px 0 20px;

  border-top:1px solid var(--jebla-gold);

  border-radius:0;

  background:#fff;
}


.jebla-news-item{
  display:grid;

  grid-template-columns:
    130px
    1fr;

  gap:25px;

  padding:19px 0;

  border-bottom:1px solid var(--jebla-line);
}


.jebla-news-date{
  color:#a19891;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size:9px;

  letter-spacing:.11em;
}


.jebla-news-item a{
  color:#4b4541;

  text-decoration:none;

  font-size:12px;

  line-height:1.8;

  transition:color .2s ease;
}


.jebla-news-item a:hover{
  color:var(--jebla-gold);
}



/* =========================================================
   EMPTY
========================================================= */

.jebla-no-results{
  display:none;

  padding:55px 0;

  color:#918983;

  text-align:left;

  font-size:11px;
}



/* =========================================================
   TABLET
========================================================= */

@media(max-width:960px){

  .jebla-container{
    padding:0 25px;
  }


  .jebla-layout{
    grid-template-columns:1fr;

    gap:75px;
  }


  .jebla-sidebar{
    position:static;

    display:grid;

    grid-template-columns:
      1fr 1fr;

    gap:42px;
  }


  .jebla-filter-row{
    grid-template-columns:
      1fr 1fr;
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

  .jebla-container{
    padding:0 18px;
  }


  .jebla-hero{
    min-height:550px;

    margin-left:-18px;
    margin-right:-18px;

    margin-bottom:75px;

    padding:
      315px
      25px
      50px;

    justify-content:flex-end;

    background:
      linear-gradient(
        0deg,
        rgba(248,245,240,1) 0%,
        rgba(248,245,240,.98) 37%,
        rgba(248,245,240,.22) 68%
      ),
      url("https://www.eyebrow.or.jp/wp-content/uploads/2026/01/bg.jpg")
      68% top / auto 330px no-repeat,
      #f8f5f0;
  }


  .jebla-hero-title{
    font-size:34px;

    line-height:1.45;
  }


  .jebla-hero-text{
    margin-top:22px;

    font-size:11px;
  }


  .jebla-guide-grid{
    grid-template-columns:1fr;

    margin-bottom:80px;
  }


  .jebla-guide-card{
    min-height:105px;

    padding:24px 5px;
  }


  .jebla-guide-icon{
    top:20px;
    left:4px;
  }


  .jebla-guide-arrow{
    right:4px;
    bottom:34px;
  }


  .jebla-filter-box{
    margin-bottom:55px;
  }


  .jebla-filter-row{
    grid-template-columns:1fr;
  }


  .jebla-heading{
    font-size:25px;
  }


  .jebla-event-card{
    grid-template-columns:
      68px
      minmax(0,1fr);

    gap:17px;

    min-height:auto;

    padding:27px 0;
  }


  .jebla-event-md{
    font-size:27px;
  }


  .jebla-event-title{
    font-size:15px;
  }


  .jebla-event-action{
    grid-column:2;

    width:130px;
  }


  .jebla-sidebar{
    grid-template-columns:1fr;

    gap:20px;
  }


  .jebla-news{
    margin-top:90px;

    padding-top:55px;
  }


  .jebla-news-item{
    grid-template-columns:1fr;

    gap:5px;
  }

}