@charset "UTF-8"; /* CSS Document */
/*必須--------------------------*/
.clearfix:after { content: ""; clear: both; display: block; }
/*共通設定-----------------------------------------------*/
html {
  font-size: 15px;
  letter-spacing: 0.05em;
  line-height: 1.7;
  font-family: 'shippori-mincho', 'Yu Mincho', 'Hiragino Mincho ProN', 'MS PMincho', serif;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}
body {
  font-size: 1rem;
  letter-spacing: inherit;
  line-height: inherit;
  color: #514545;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}
h1, h2, h3 {
  letter-spacing: 0.08em;
  line-height: 1.3;
}
p, li {
  font-size: 1rem;
  letter-spacing: 0.05em;
  line-height: 1.7;
}
@media (max-width: 768px) {
  html {
    font-size: 15px;
  }
  h1, h2, h3 {
    line-height: 1.2;
  }
}
section { margin: 0; padding: 0 0; }
.inner { width: 100%; max-width: 1050px; margin: 0 auto; }
figure { margin: 0; padding: 0; }
figure img { width: 100%; vertical-align: bottom; }
.br-pc { display: block; }
.br-sp { display: none; }
.pc { display: block; }
.sp { display: none; }
a { text-decoration: none; }
a:hover { opacity: 0.7; }
*:hover { transition: all .5s; }
p, figure, img, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, blockquote, pre, form, fieldset, legend, table, th, td { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { }
/*各項目タイトル------------------- */
.title { display: flex; flex-direction: row; align-items: flex-start; max-width: 90%; margin: 100px auto 30px; gap: 50px; }
.title-main { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 30px; }
.title-main h3 { font-size: 14px; color: #76384d; font-weight: normal; letter-spacing: 1.6px; margin-bottom: 12.8px; margin-left: 3.2px; }
.title-main h2 { font-size: 28px; font-weight: 500; white-space: nowrap; line-height: 1.1; position: relative; z-index: 2; letter-spacing: 4px; }
.title-main .lo_sakura { position: absolute; top: -50px; right: -150px; width: 200px; height: 120px; z-index: 1; pointer-events: none; }
.title-right { display: flex; justify-content: flex-end; align-items: center; width: 100%; }
.title-right p {
  font-family: 'shippori-mincho', 'Yu Mincho', 'Hiragino Mincho ProN', 'MS PMincho', serif;
}

.title-main h2 span, .title-main h3 span { opacity: 0; display: inline-block; transform: translateY(20px); transition: opacity 0.5s, transform 0.5s; }
.title-main h2 span.visible, .title-main h3 span.visible { opacity: 1; transform: translateY(0); }
/*btn------------------- */
.button006 { display: inline-block; text-align: center; }
.button006 a { width: auto; position: relative; display: flex; justify-content: space-around; align-items: center; margin: 50px auto 0; padding: 25px 50px; color: #76384d; transition: 0.3s ease-in-out; font-weight: 500; border-bottom: 1px solid #76384d; border-right: 1px solid #76384d; font-size: 16px; }
.button006 a:before { content: ''; position: absolute; top: calc(50% - 1.4px); right: -2em; transform: translateY(calc(-50% - 2px)) rotate(30deg); width: 12px; height: 1px; background-color: #76384d; transition: 0.3s; }
.button006 a:after { content: ''; position: absolute; top: 50%; right: -1.95em; transform: translateY(-50%); width: 60px; height: 1px; background-color: #76384d; transition: 0.3s; }
.button006 a:hover:before, .button006 a:hover:after { right: -2.5em; }
.button006 a:hover { color: #76384d; }
/*ぼかしフェードイン------------------- */
.fade-blur-in { opacity: 0; filter: blur(8px); transition: opacity 0.8s ease, filter 1.0s ease; }
.fade-blur-in.visible { opacity: 1; filter: blur(0); }
/*----トップ----------------------------------------------------------------*/
#top { width: 100%; height: 100vh; position: relative; overflow: hidden; }
#top .slideshow-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 3.5s cubic-bezier(0.22, 1, 0.36, 1); z-index: 0; pointer-events: none; }
#top .slideshow-img.fadeout { opacity: 0; filter: blur(8px); }
#top::before { content: ""; position: absolute; inset: 0; background-size: cover; background-position: left bottom; background-repeat: no-repeat; opacity: 0; transition: opacity 8.4s cubic-bezier(0.22, 1, 0.36, 1); z-index: 1; pointer-events: none; }
#top.fading::before { opacity: 1; }
#top .background { width: 100%; height: 100%; position: relative; }
#top .background::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 1; }
#top .background .line_lo { width: 100%; opacity: 0.5; }
#top .background #main-title { position: absolute; z-index: 2; font-size: clamp(32px, 40vh, 35px); line-height: 90px; font-weight: 100; letter-spacing: 10px; color: #fff; top: 47%; left: 50%; transform: translate(-50%, -50%); writing-mode: vertical-rl; text-orientation: mixed; margin: 0; text-align: center; white-space: nowrap; word-break: keep-all; overflow-wrap: normal; min-height: auto; max-height: 80vh; }
#top .background #main-title span span { display: inline-block; opacity: 0; filter: blur(4px); transition: opacity 0.8s, filter 1.0s; }
#top .background #main-title span span.visible { opacity: 1; filter: blur(0); }
#top .background .news-bar { z-index: 2; display: flex; justify-content: space-between; align-items: center; position: absolute; width: 80%; color: #fff; background-color: #76384d; padding: 20px; bottom: 0; left: 0; border-radius: 0 30px 0 0; }
#top .background .news-bar ul { display: flex; width: 100%; align-items: center; }
#top .background .news-bar ul a { color: #fff; }
#top .background .news-bar ul li { display: inline-block; }
#top .background .news-bar ul li.news { position: relative; font-size: 16px; letter-spacing: 2px; white-space: nowrap; }
#top .background .news-bar ul li.news::after { content: ""; position: absolute; right: -35px; top: 50%; transform: translateY(-50%); width: 1px; height: 50px; background: #fff; opacity: 0.7; }
#top .background .news-bar ul li.date { font-size: 13px; padding: 0 20px 0 73px; }
#top .background .news-bar ul li.content { font-size: 13px; padding-left: 73px; white-space: normal; }
#top .background .news-bar ul li.right-end { font-size: 14px; margin-left: auto; white-space: nowrap; }
#top .slideshow-img::before { content: ""; position: absolute; inset: 0; background: url('assets/img/assets/img/top-slide01.jpg') repeat; opacity: 0.18; background-size: 180px auto; pointer-events: none; z-index: 2; }
#top .slideshow-img::after { content: ""; position: absolute; inset: 0; background: url('assets/img/assets/img/top-slide02.jpg') repeat; opacity: 0.32; background-size: 320px auto; pointer-events: none; z-index: 3; }
/*----コンセプト----------------------------------------------------------------*/
#concept { width: 100%; position: relative; margin-bottom: 200px; }
#concept .line_lo { position: absolute; top: 150px; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 1; pointer-events: none; transform: scaleX(-1); }
#concept .banner { display: flex; max-width: 1100px; margin: 50px auto; z-index: 2; }
#concept .banner img { width: 100%; max-height: 400px; }
#concept .frame { position: relative; text-align: center; }
#concept .frame .concept_content { position: relative; z-index: 2; padding: 100px 0; }
#concept .frame figure.img01 { position: absolute; top: 120px; left: 0; z-index: 2; }
#concept .frame figure.img02 { position: absolute; top: 250px; right: 0; margin: 20px 0; z-index: 2; }
#concept .frame figure img { width: 20vw; height: 30vw; object-fit: cover; }
#concept .frame figure.img01 img { border-radius: 0 50px 50px 0; }
#concept .frame figure.img02 img { border-radius: 50px 0 0 50px; }
#concept .frame .concept_title { padding: 100px 0 0 0; margin: 0 auto; writing-mode: vertical-rl; text-orientation: mixed; font-size: 32px; display: block; text-align: center; letter-spacing: 7px; line-height: 90px; white-space: nowrap; word-break: keep-all; overflow-wrap: normal; min-height: auto; max-height: 80vh; }
#concept .frame .concept_title span { margin-top: 150px; }
#concept .frame .concept_title .concept-line { display: inline-block; writing-mode: vertical-rl; text-orientation: mixed; }
#concept .frame .concept_title .concept-char { display: inline-block; opacity: 0; filter: blur(4px); transition: opacity 0.8s ease, filter 1.0s ease; letter-spacing: 1px; }
#concept .frame .concept_title .concept-char.visible { opacity: 1; filter: blur(0); }
#concept .frame p { text-align: center; margin: 50px 0 0 0; line-height: 50px; font-size: 16px; }
/*----コースのご案内----------------------------------------------------------------*/
#course { background-color: #f9f7f7; position: relative; width: 100%; padding: 580px 0 150px; }
#course .img { position: absolute; left: 0; top: -100px; width: 80%; max-width: 1500px; height: 600px; background-image: url(../img/culture_top02.jpg); background-repeat: no-repeat; background-position: right bottom; background-size: cover; border-radius: 0 50px 50px 0; overflow: hidden; clip-path: inset(0 0 100% 0); will-change: background-position; }
#course .caption { position: absolute; left: 0; top: 500px; width: 80%; max-width: 1500px; padding-top: 10px; color: #999; font-size: 12px; font-weight: 300; text-align: right; line-height: 1.4; z-index: 10; }
#course .img.is-visible { clip-path: inset(0 0 0 0); transition: clip-path 3s ease-in-out; }
#course .inner .frame { display: flex; justify-content: space-between; align-items: flex-start; margin: 40px auto 0; max-width: 1200px; }
#course .inner .box { position: relative; border-radius: 0 0 50px 0; flex: 1 1 0; background: #fff; padding: 32px 24px 50px 24px; display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 350px; height: 400px; margin: 0px 15px; }
#course .inner .box h4 { position: absolute; width: 55px; height: auto; left: -20px; top: -20px; z-index: 10; }
#course .inner .box h4 img { width: 100%; }
#course .inner .box figure img { width: 230px; height: 230px; object-fit: cover; margin-bottom: 18px; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%); border-radius: 0; }
#course .inner .box p { font-size: 14px; text-align: justify; line-height: 1.7; margin: 0; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 300; font-style: normal; }
/* #course .inner .box .line-height-s { line-height: 1.4; } */
#course .inner .box a { color:#514545;}
#course > .inner { text-align: center; }
/*----講演会のご案内----------------------------------------------------------------*/
#lecture { margin: 0px 0 200px; }
#lecture .banner { display: flex; justify-content: center; align-items: center; gap: 30px; width: 100%; }
#lecture .banner div { width: 350px; height: auto; text-align: center; display: flex; justify-content: center; }
#lecture .banner div img { width: 100%; height: auto; object-fit: cover; }

/* 関連大学セクション */
.university-container {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  max-width: 1050px;
  margin: 0 auto;
  padding: 0 20px;
}

.university-box {
  flex: 1;
  background: #fff;
  border-radius: 15px;
  padding: 40px 30px;
  background-color: #F7F5ED;
  border-radius: 20px;
}

.university-title {
  font-size: 24px;
  font-weight: 600;
  color: #76384d;
  margin-bottom: 25px;
  text-align: center;
  position: relative;
}

.university-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: #e5c9d4;
}

.university-box h2{
  font-size: 17px;
  margin: 40px 0 20px;
  text-align: center;
  color: #76384d;
}


.course-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.course-list li {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 15px;
  padding-left: 20px;
  position: relative;
  color: #514545;
  font-size: 14px; text-align: left; line-height: 1.7; margin: 0; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 300; font-style: normal;
}

.course-list li::before {
  content: '・';
  position: absolute;
  left: 0;
  color: #76384d;
  font-weight: bold;
}

.course-detail {
  font-size: 14px;
  color: #666;
  margin-left: 20px;
  margin-bottom: 8px;
}

.course-detail::before {
  content: '';
}

.no-bullet::before {
  content: '';
}

/*----アクセス----------------------------------------------------------------*/
#access { width: 100%; height: auto; background-image: url(../img/filter.png); background-repeat: no-repeat; background-position: left bottom; background-size: cover; background-color: #f2f2f2; display: flex; height: 700px; }
#access .map { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 50%; z-index: 3; }
#access .map ul { margin: 0 auto; padding: 0 30px 0 0; list-style: none; text-align: left; display: flex; flex-direction: column; justify-content: center; }
#access .map ul li { margin-bottom: 10px; font-size: 16px; color: #76384d; letter-spacing: 3px; }
#access .map ul .map_01 { font-size: 24px; font-weight: 600; margin-bottom: 24px; margin-top: 0; letter-spacing: 5px; }
#access .map ul .map_02 { font-size: 14px; margin-bottom: 8px; margin-top: 0; }
#access .map ul .map_03 { font-size: 16px; margin-top: 18px; margin-bottom: 0; }
#access .map .button006 { display: flex; justify-content: center; align-items: center; margin: 0 auto; }
#access .map .button006 a {  padding: 25px 100px; }
#access .background { position: relative; width: 50%; background-image: url(../img/contact.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; z-index: 1; transition: transform 0.3s ease-out; }
#access .background::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; z-index: 1; }
#access .background h3 { font-size: 14px; font-weight: normal; color: #fff; letter-spacing: 1.6px; margin-bottom: 12.8px; margin-left: 3.2px; z-index: 2; }
#access .background h2 { font-size: 24px; font-weight: 500; color: #fff; white-space: nowrap; line-height: 1.1; position: relative; z-index: 2; letter-spacing: 6px; }

/*=================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================------------- */
/* 1050px〜700pxの間のバナーサイズ調整 */
@media screen and (max-width: 1050px) and (min-width: 700px) {
  #concept .banner { max-width: 60% !important; margin: 30px auto; }
  #concept .banner img { max-height: 350px; }
}

@media screen and (max-width: 1050px) {
  .br-sp { display: block; }
  .br-pc { display: none; }
  .pc { display: none; }
  .sp { display: block; }
  .inner { max-width: 90%; }
  
  /* スマホ版フォントサイズ統一 */
  p { font-size: 14px; }
  .button006 a { font-size: 14px; padding: 20px 50px; line-height: 1.3; }
  
  /* タイトルセクション */
  .title { flex-direction: column; gap: 20px; }
  .title-main {padding-bottom: 10px;}
  .title-main h3 { font-size: 12px; }
  .title-main h2 { font-size: 22px; }
  .title-right { justify-content: center; }
  .title-right p { font-size: 14px; line-height: 180%; text-align: justify; }
  
  #top { width: 100%; height: 90vh; position: relative; overflow: hidden; }
  #top .background #main-title { font-size: 26px; letter-spacing: 6px; line-height: 60px;}
  #top .background .news-bar { width: 90%; padding: 10px 10px; }
  #top .background .news-bar ul { flex-direction: column; align-items: stretch; }
  #top .background .news-bar ul li.news { font-size: 14px; display: block; text-align: center; width: 100%; position: static; }
  #top .background .news-bar ul li.news::after { content: ""; position: relative; width: 100%; height: 1px; background: #fff; opacity: 0.7; margin: 10px 0; display: block; margin-left: 0; right: auto; }
  #top .background .news-bar ul li.date { font-size: 12px; padding: 0; display: block; text-align: left; }
  #top .background .news-bar ul li.content { font-size: 12px; padding: 0; white-space: normal; display: block; text-align: left; }
  
  #concept { margin-bottom: 80px; }
  #concept .banner { max-width: 100%; margin: 30px auto; flex-direction: column; gap: 20px; }
  #concept .banner img { max-height: 350px; }
  #concept .banner .banner01 img { content: url('../img/banner01_sp.png'); }
  #concept .banner .banner02 img { content: url('../img/banner02_sp.png'); }

  #concept .line_lo { position: absolute; top: 50px; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 1; pointer-events: none; transform: scaleX(-1); }
  #concept .frame .concept_content { position: relative; z-index: 2; padding: 0px 0 100px; }
  #concept .frame .concept_title { font-size: 24px; letter-spacing: 5px; padding: 50px 0 50px 0; line-height: 55px; }
  #concept .frame .concept_title span { margin-top: 100px; }
  #concept .frame figure.img { width: 35vw; height: 40vw; }
  #concept .frame figure.img01 { top: 60px; }
  #concept .frame figure.img02 { top: 250px; right: 0; }
  #concept .frame figure.img01 img { border-radius: 0 25px 25px 0; }
  #concept .frame figure.img02 img { border-radius: 25px 0 0 25px; }
  #concept .frame p { width: 95%; line-height: 30px; font-size: 14px; margin: 40px auto 0; }
  #concept .frame .button006 a { font-size: 14px; padding: 20px 50px; line-height: 1.3; }
  
  #course { padding: 200px 0 200px; }
  #course .img { width: 95%; height: 350px; }
  #course .caption { top: 250px; left: 0; width: 95%; padding-top: 10px; font-size: 9px; }
  #course .inner { margin-top: 150px; }
  #course .inner .frame { max-width: 100%; flex-wrap: wrap; gap: 0px; }
  #course .inner .box { flex: 1 1 calc(50% - 20px); max-width: none; margin: 20px 0px 20px; height: auto; padding: 32px 24px 30px 24px;}
  #course .inner .box h4 { position: absolute; width: 55px; height: auto; left: 20px; top: -20px; z-index: 10; }
  #course .inner .box h4 img { width: 100%; }
  #course .inner .box figure img { width: 230px; height: 230px; }
  #course .inner .box p { font-size: 14px;line-height: 180%; text-align: justify; }
  
  #lecture { margin-bottom: 100px; }
  #lecture .banner { flex-direction: column; gap: 20px; }
  #lecture .banner div { width: 80%; max-width: 300px; margin: 0 auto; }
  
  #access { flex-direction: column; }
  #access .map, #access .background { width: 100%; max-width: 100%; padding: 40px 5vw; box-sizing: border-box; min-height: unset; }
  #access .background { height: 300px; }
  #access .map { padding: 60px 5vw; }
  #access .map ul { padding: 0; text-align: center; }
  #access .map ul li { font-size: 14px; }
  #access .map ul .map_01 { font-size: 20px; }
  #access .map ul .map_02 { font-size: 14px; margin-bottom: 2px;}
  #access .map ul .map_03 { font-size: 15px; }
  #access .background h3 { font-size: 13px; }
  #access .background h2 { font-size: 18px; }
  #access .map .button006 { display: flex; justify-content: center; align-items: center; margin: 0 auto; }
  #access .map .button006 a { font-size: 14px; }
}

@media screen and (max-width: 1050px) and (min-width: 701px) {
  #top .background .news-bar ul {
    flex-direction: column;
    align-items: flex-start;
  }
  #top .background .news-bar ul li.date {
    padding: 0 0 4px 0;
    font-size: 14px;
    display: block;
  }
  #top .background .news-bar ul li.content {
    padding: 0;
    font-size: 14px;
    white-space: normal;
    display: block;
  }
}

/* コースボックスのマウスオン時、h4内のimgを上に動かす */
.box.fade-blur-in a h4 img {
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}

.box.fade-blur-in a:hover h4 img,
.box.fade-blur-in a:focus h4 img {
  transform: translateY(-8px);
}

/* コースボックスのaタグのホバー時の透明度変化を無効化 */
.box.fade-blur-in a {
  opacity: 1;
}

.box.fade-blur-in a:hover,
.box.fade-blur-in a:focus {
  opacity: 1;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .university-container {
    flex-direction: column;
    gap: 30px;
    padding: 0 15px;
  }
  
  .university-box {
    padding: 30px 20px;
  }
  
  .university-title {
    font-size: 20px;
  }
  
  .course-list li {
    font-size: 14px;
  }
  
}

@media screen and (max-width: 480px) {
  .university-container {
    padding: 0 10px;
    gap: 20px;
  }
  
  .university-box {
    padding: 25px 15px;
  }
  
  .university-title {
    font-size: 18px;
    margin-bottom: 20px;
  }
  
  .course-list li {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 12px;
  }
  
  .course-detail {
    font-size: 12px;
    margin-left: 15px;
  }
}