@charset "UTF-8";

/* basic style setting in utility.css */

/* 変数 */
:root {
  --main_color : #175FDD; 
  --bg_color : #F2F2F3; 
}


/*---------------------------------------------------------------------
 共通レイアウト
---------------------------------------------------------------------*/
/* レイアウト */
.inner {width: min(1000px, 100%); margin: auto; padding: 0 20px}

#loading {position: fixed; width: 100%; height: 100%; z-index: 999; background: var(--bg_color); text-align:center;}
#loading_logo {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.fadeUp {animation-name: fadeUpAnime; animation-duration:0.5s; animation-fill-mode:forwards; opacity: 0;}
@keyframes fadeUpAnime{
  from {opacity: 0;transform: translateY(15px);}
  to {opacity: 1; transform: translateY(0);}
}
.jost {font-family: "Jost", sans-serif; }


/* header
----------------------------------------------- */
header {
  position:-webkit-sticky; position: sticky; top:0; width: 100%; z-index: 100; background: rgba(255, 255, 255, 0.97);
  .inner {width: min(100%); padding: 20px 40px; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; }
  h1 {line-height: 1}
  h1 a:hover {opacity: .8}
  nav ul {display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0 40px}
  nav li a {line-height: 1; font-weight: 500}
  nav li a:hover {color: var(--main_color)}
} /* header */

body.research header ul li:nth-of-type(1),
body.event header ul li:nth-of-type(2),
body.about header ul li:nth-of-type(3) {border-bottom: 2px solid var(--main_color);}


/*---------------------------------------------------------------------
 トップページ
---------------------------------------------------------------------*/
.home {

  h2.h_title {display: flex; align-items: center; gap: 14px; line-height: 1; width: 100%; position: relative; font-size: 2.8rem; margin-bottom: 30px}
  h2.h_title::after {content: ""; flex-grow: 1; height: 1px; background-color: var(--main_color);}

  #hero {
    background: url('../img/home/hero_bg.jpg'); background-size: cover; background-position: 50% 50%; min-height: 600px;
    .inner {width: min(1280px, 100%); position: relative; min-height: inherit}
    hgroup {max-width: 560px; position: absolute; bottom: 90px; left: 20px; text-align: justify}
    hgroup h2 {background: rgba(0, 0, 0, 0.5); font-weight: 100; line-height: 1.2; padding: 8px 10px; margin-bottom: 10px; color: white; font-size: 4.4rem; letter-spacing: .1em}
    hgroup p {background: rgba(0, 0, 0, 0.5); padding: 8px 10px; color: white;  font-weight: 100;}
    hgroup {animation: hero_fede 1s ease-in 2s 1 normal forwards; opacity: 0;} 
  } /* #hero */

  .to_about {margin: -30px auto 100px; animation: hero_fede 1s ease-in 3s 1 normal forwards; opacity: 0;}

  #news {
    margin-bottom: 100px;
    .inner {display: grid; grid-template-columns: 140px 1fr; gap: 40px 60px;}
    h2 {font-family: "Jost" ; font-weight: 200; color: var(--main_color); font-size: 4rem; text-transform: uppercase; letter-spacing: .12em; line-height: 1}
    article a {border-bottom: 1px dotted silver; padding: 20px 0; display: block}
    article:first-of-type a {padding-top: 0}
    article dl {display: grid; grid-template-columns: 100px 1fr; gap: 10px 20px;}
    article dt {font-size: 1.2rem}
    article dd h3 {font-size: 1.4rem; font-weight: 400}
    article a:hover {color: var(--main_color)}
  } /* #news */

  #activities {
    background: var(--bg_color); padding: 100px 0; margin-bottom: 100px;
    h2.h_title::before {content: url('../img/home/activities_title_deco.svg');}
    .detail {background: white; padding: 50px; gap: 20px 60px}
    .detail li {position: relative; padding-left: 30px; font-weight: 500; border-bottom: 1px solid var(--main_color); padding-bottom: 20px; margin-bottom: 20px}
    .detail li::before{content: url('../img/home/activities_li_deco.svg'); position: absolute; top: 2px; left: 0;}
    .detail .text {text-align: justify; line-height: 2}
  } /* #activities */

  #award {
    margin-bottom: 120px;
    h2.h_title::before {content: url('../img/home/award_title_deco.svg');}
    .main_figure {}
    .explanation dt {text-align: center}
    .explanation {display: grid; grid-template-columns: 60px 1fr; gap: 10px 20px; align-items: center; border: 4px solid var(--main_color); padding: 3%; max-width: 72%; margin: -30px auto 50px; background: white; position: relative; z-index: 10; text-align: justify}
    .explanation dd {line-height: 1.8}
    .explanation dd b {border-bottom: 2px solid var(--main_color);}
    h3 {border-left: 3px solid var(--main_color); padding-left: 20px; margin-bottom: 20px; font-size: 2.4rem}
    .text {font-size: 1.8rem; margin-bottom: 1.3lh}
    .text b {border-bottom: 2px solid var(--main_color);}
    .wrap {gap: 50px 40px; margin-bottom: 40px}
    .wrap dt {margin-bottom: 16px}
    .appeal {text-align: center; font-size: 2.4rem; border: 2px solid var(--main_color); padding: 14px 10px; margin-bottom: 40px}
  } /* #award  */
} /* .home */




/*---------------------------------------------------------------------
 下層ページ共通
---------------------------------------------------------------------*/
.under {
  #title_head {
    .wrap {padding: 70px 0; text-align: center}
    h2 {background: white; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; display: inline-block; line-height: 1; padding: 10px 40px 20px}
    h2 span:nth-child(1) {margin-right: 2em; font-size: 1.8rem;  position: relative;}
    h2 span:nth-child(1)::after {position: absolute; top: 0; left: 100%; margin: 0 1.5rem; content: ""; width: 1px; height: 100%; background-color: var(--main_color);}
    h2 span:nth-of-type(2) {font-size: 1.6rem; font-family: "Jost"; font-weight: 400;}
  } /* #title_head  */

  .main_wrap {
    background: var(--bg_color); padding: 60px 0 60px; margin-bottom: 1px;
    .inner {display: grid; grid-template-columns: 86px 1fr; gap: 0 40px;}
    #content {order: 2}
    #sidebar {order: 1; position:-webkit-sticky; position: sticky;}
  } /* .main_wrap */
} /* .under */


/*---------------------------------------------------------------------
 下層ページ
---------------------------------------------------------------------*/
.research {
  #title_head {background: url(../img/page/research_title_head.jpg); background-size: cover; background-position: 50% 50%;}
}

.research, .event {
  #content {
    h2.year {font-size: 2.8rem; font-family: "Jost"; font-weight: 200; background: linear-gradient(135deg, #1448D8, #04E2F7); color: white; padding: 12px 10px 10px 50px; line-height: 1}
    h2.year span {font-size: 1.8rem; margin-left: 4px}
    .each_wrap {background: white; padding: 50px; margin-bottom: 50px}
    .lead .mark {display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center}
    .lead .mark span:nth-of-type(1) {font-size: 1.4rem; background: var(--bg_color); padding: 10px 20px; border-radius: 50px; font-weight: 600}
    .lead .mark span:nth-of-type(2) {}
    .english .mark { line-height: 1;display: flex; align-items: center; gap: 10px;}
    .english .mark::before {content: url(../img/page/research_mark_english.svg);}
    .english .mark span:nth-of-type(1) {background: #1A90E6; color: white}
    .seminar .mark span:nth-of-type(1) {background: #FECC66}
    .symposium .mark span:nth-of-type(1) {background: #94C75B; color: white}
    .lead h3 {border-bottom: 1px solid silver; font-size: 2.1rem; margin-bottom: 20px; padding-bottom: 16px; line-height: 1.4; font-weight: 500}
    .detail h3 {font-size: 1.6rem; font-weight: 500; margin-bottom: .5lh}
    .detail h4 {font-size: 1.4rem; font-weight: 500; margin-bottom: .5lh}
    .detail p {font-size: 1.4rem; margin-bottom: .6lh; text-align: justify}
    .detail p a {text-decoration: underline}
    .detail dl {margin-bottom: 20px}
    .detail dt {font-weight: 500}
    .detail dd {font-size: 1.3rem}
    .detail th {width: 16%; font-size: 1.3rem; vertical-align: top}
    .detail td {font-size: 1.4rem; overflow-wrap: anywhere}
    .detail table dl {margin-bottom: 6px; display: grid; grid-template-columns: 100px 1fr; gap: 10px;}
    .detail table dt {font-size: 1.4rem; font-weight: 400; letter-spacing: .02em}
    .detail table dd {font-size: 1.4rem; letter-spacing: .06em;}
    .detail table h4 {margin-bottom: 6px}
    .detail table a {text-decoration: underline}
    .detail table li {font-size: 1.4rem}
    .detail .detail_wrap {display: grid; grid-template-columns: 60% 1fr; gap: 20px 40px; margin-bottom: 30px}
    .detail .detail_wrap .flyer dt {margin-bottom: 10px}
    .detail .detail_wrap .flyer .move_arrow_btn {font-size: 1.4rem; padding: 14px; max-width: 200px; text-decoration: none}
    .detail .detail_wrap .flyer .move_arrow_btn::after {margin-top: 3px}
    .detail .no_text {grid-template-columns: 40% 1fr}
    .detail .no_text .flyer {order: 1;}
    .detail .no_text .text {order: 2}
    .year_wrap:not(:last-of-type) {margin-bottom: 100px}
    .year_wrap .each_wrap {margin-bottom: 25px}
    } /* #content  */

  #sidebar {
    ul {position:-webkit-sticky; position: sticky; top:100px; }
    li {font-size: 1.6rem; font-family: "Jost"; font-weight: 300; margin-bottom: 16px; }
    li span {font-size: 1.2rem; margin-left: 2px}
    li a {color: #AAAAAA; padding: 4px 12px}
    li a:hover {color: var(--main_color)}
    li.current a {color: white; background: linear-gradient(135deg, #1448D8, #04E2F7);}
    li.past a {font-size: 1.4rem; padding-left: 0; padding-right: 0; font-weight: 400; color: #222222} 
    li.past a:hover {color: var(--main_color)}
    li.past.current a {color: white; font-size: 1.2rem; padding: 3px 6px}
  } /* #sidebar */
} /* .research, .event  */


.event {
  #title_head {background: url(../img/page/event_title_head.jpg); background-size: cover; background-position: 50% 50%;}
}


.about {
  #title_head {background: url(../img/page/about_title_head.jpg); background-size: cover; background-position: 50% 50%;}

  #content {
    .each_wrap {
      background: white; padding: 50px; margin-bottom: 50px;
      h2 {border-left: 3px solid var(--main_color); padding-left: 20px; margin-bottom: 20px; font-size: 2.4rem}
      h2 span {font-size: 1.6rem; margin-left: 10px}
      p {line-height: 2; text-align: justify}
      table th {vertical-align: top}
      a {text-decoration: underline}
    }

    #admission {
      .each:not(:last-of-type) {margin-bottom: 50px; padding-bottom: 50px; border-bottom: 1px dotted silver;}
      .each p {line-height: 2; text-align: justify}
      h2 {margin-bottom: 40px}
      h3 {line-height: 1; display: flex; gap: 16px; font-size: 2.1rem; font-weight: 500; align-items: flex-end; margin-bottom: 20px}
      h3::before {font-size: 3.8rem; font-family: "Jost"; font-weight: 400; line-height: .6}
      .entry h3::before {content: "1";}
      .activity h3::before {content: "2";}
      .fee h3::before {content: "3";}
      .admission h3::before {content: "4";}
      .admission dl {display: grid; grid-template-columns: 40% 1fr; gap: 20px; align-items: center;}
    }

    #link {
      a {text-decoration: underline}
    }

    #coordinator {
      table {margin-bottom: 50px}
      table tr th, table tr td {padding: .3em 1em}
      thead th {text-align: center}
    }

    #purpose {
      .date {margin-bottom: 0; font-size: 1.2rem; text-align: right}
    }

    #regulations {
      dl {margin-bottom: 40px}
      dt {border-bottom: 1px solid silver; margin-bottom: 10px; padding-bottom: 10px}
      dd {}
      dd p {margin-bottom: .3lh}
      .revision {text-align: right}
      .revision li {font-size: 1.2rem; }
    }
  } /* #content */

  #sidebar {
    ul {position:-webkit-sticky; position: sticky; top:100px; }
    li {margin-bottom: 20px}
    li a {display: block}
    li a:hover {color: var(--main_color)}
  } /* #sidebar */
} /* .about */



/* not 404
----------------------------------------------- */
.not404 #lead {text-align: center; padding-top: 100px}
.not404 #lead h1 { padding-top: 80px; margin-bottom: 50px}
.not404 #lead dt {text-align: center}
.not404 #lead dd {text-align: center; margin-bottom: 100px}


/* footer
----------------------------------------------- */
footer {
  padding: 50px 0 30px; background: var(--bg_color);
  .inner {width: min(1360px, 100%); }
  ul {margin-bottom: 30px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 30px; align-items: center;}
  li a {background: white; padding: 20px; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; border-bottom: 1px solid white; }
  li a span:nth-child(1) {margin-right: 2em; font-size: 1.8rem;  position: relative;}
  li a span:nth-child(1)::after {
    position: absolute;
    top: 0;
    left: 100%;
    margin: 0 1.5rem;
    content: "";
    width: 1px;
    height: 100%;
    background-color: var(--main_color);
  }
  li a span:nth-of-type(2) {font-size: 1.6rem; font-family: "Jost"; font-weight: 300;}
  li a:hover {border-bottom: 1px solid var(--main_color); }
  .copy {text-align: center; margin-bottom: 0}
  .copy small {font-size: 1.2rem; font-family: "Jost"; font-weight: 300}
  .copy small::before {content: "©"; padding-right: 2px}
} /* footer */

/* to page top */
p.pagetop {position: fixed; bottom: 10px; right: 10px; opacity: 0; transform: scale(1.5); transition: all .5s; text-align: right; width: auto; margin-bottom: 0}
p.pagetop a {display: block}
p.pagetop.show {opacity: 1; transform: scale(1);}



/*---------------------------------------------------------------------
 jquery js 関連 css
---------------------------------------------------------------------*/

/* ハンバーガーメニューボタン */
.button_container {position: fixed; top: 22px; right: 20px; height: 27px; width: 35px; cursor: pointer; z-index: 200;}
.button_container:after {content: ""; position: absolute; top: -18px; right: -13px; z-index: -1; width: 60px; height: 60px;}
.button_container:hover {opacity: .8;}
.button_container.active .top {transform: translateY(10px) translateX(0) rotate(45deg); background: #222; z-index: 200}
.button_container.active .middle {opacity: 0; background: #222;}
.button_container.active .bottom {transform: translateY(-10px) translateX(0) rotate(-45deg); background: #222; z-index: 200}
.button_container span {background: #222; border: none; height: 2px; width: 100%; position: absolute; top: 0; left: 0; transition: all .35s ease; cursor: pointer;}
.button_container span:nth-of-type(2) {top: 10px;}
.button_container span:nth-of-type(3) {top: 20px;}

/* メニュー内 (sp用) */
.overlay {
  position: fixed; background: rgba(255, 255, 255, 0.95); top: 0; left: 0; width: 100%; height: 0%; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s, height .35s; overflow: auto; z-index: 99;
  .overlay-menu {width: calc(100% - 40px); margin: 20px auto 0}
  .site_logo {margin: 0 auto 40px; padding-bottom: 20px; border-bottom: 1px solid #666666;}
  .site_logo img {max-width: 280px}
  li {margin-bottom: 40px; position: relative; opacity: 0; text-align: center; width: 100%; border: none!important}
  li a {color: #222222; font-size: 1.8rem; padding: 0 16px 8px}
} /* .overlay */

.overlay.open {
  opacity: .96; visibility: visible; height: 100%;
  li {animation: fadeInRight .5s ease forwards; animation-delay: .35s;}
  li:nth-of-type(2) {animation-delay: .40s;}
  li:nth-of-type(3) {animation-delay: .45s;}
  li:nth-of-type(4) {animation-delay: .50s;}
} /* .overlay.open */

@keyframes fadeInRight {0% {opacity: 0; left: 20%;} 100% {opacity: 1;left: 0;}}

/* current */
body.research header .overlay ul li:nth-of-type(1) a,
body.event header .overlay ul li:nth-of-type(2) a,
body.about header .overlay ul li:nth-of-type(3) a {color: var(--main_color)}


/*---------------------------------------------------------------------
 メディアクエリー Foundation 6 に準拠
---------------------------------------------------------------------*/
 /* スマホ「縦・横」対応 */
@media screen and (min-width: 320px) and (max-width: 639px) {
  .no_br_sp br {display: none !important}
  br.sp_non {display: none}
  table tr th, table tr td {padding: 0.4em 0.8em; font-size: 1.2rem !important}

  header {
    .inner {padding: 14px 20px 20px}
    h1 img {max-width: 280px}
  }

  body.home {
    h2.h_title {font-size: 2.4rem}
    #hero {background-position: 40% 50%;}
    #hero hgroup {max-width: 80%; bottom: 60px}
    #hero hgroup h2 {font-size: 2.3rem} 
    #hero hgroup p {font-size: 1.3rem;} 
    #hero .to_about {width: 90%}
    #news .post_line_wrap dl {grid-template-columns: 1fr;}
    #activities .detail {padding: 40px 30px 50px}
    #award h3 {font-size: 2.1rem}
    #award .text {font-size: 1.4rem}
    #award .appeal {font-size: 1.8rem}
  }

  body.under {
    #title_head h2 {padding: 8px 20px 20px} 
    #title_head h2 span:nth-child(1) {font-size: 1.3rem; margin-right: 1.5em}
    #title_head h2 span:nth-child(1)::after {margin: 0 .8rem}
    #title_head h2 span:nth-child(2) {font-size: 1.4rem;}
    .main_wrap {padding-bottom: 60px}
    .main_wrap .inner {grid-template-columns: 1fr;}
    .main_wrap #content {order: 1}
    .main_wrap #sidebar {order: 2}
    #content h2.year {padding-left: 20px}
    #content .lead h3 {font-size: 1.6rem}
    #content .each_wrap {padding: 20px}
    #content .detail .detail_wrap {grid-template-columns: 1fr;}
    #content .detail table dl {grid-template-columns: 1fr; gap: 0}
    #content .detail table p,
    #content .detail table li,
    #content .detail table dt,
    #content .detail table dd {font-size: 1.2rem}
    #content .detail table h4 {font-size: 1.4rem}
    #sidebar ul {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 5px;}
    #sidebar ul li {text-align: center}
  }

  body.event {
    .main_wrap {padding-top: 40px; padding-bottom: 20px}
    .main_wrap #content {order: 2}
    .main_wrap #sidebar {order: 1}
    #content {margin-bottom: 0}
    #content .year_wrap {margin-bottom: 40px}
    #sidebar {margin-bottom: 20px}
    #sidebar li {margin-bottom: 10px}
  }

  body.about {
    .main_wrap {padding-top: 40px; padding-bottom: 20px}
    .main_wrap #content {order: 2}
    .main_wrap #sidebar {order: 1}
    #content .each_wrap {padding: 30px}
    #content #admission h3 {align-items: center; line-height: 1.2}
    #sidebar {margin-bottom: 20px}
    #sidebar li {margin-bottom: 10px}
    #coordinator table:nth-of-type(3) thead th:nth-of-type(1) {width: 40%}
  }

  footer {
    ul {grid-template-columns: 1fr;}
    ul li a span:nth-child(1) {font-size: 1.3rem; margin-right: 1.5em}
    ul li a span:nth-child(1)::after {margin: 0 .8rem}
    ul li a span:nth-child(2) {font-size: 1.4rem; letter-spacing: .02em; padding-top: 5px}
  }

}

 /* スマホ・タブレット「縦・横」共通対応 */
@media screen and (min-width: 320px) and (max-width: 1023px){
.no_br br {display: none !important}
}


 /* スマホ「縦」向き対応 */
@media screen and (min-width: 320px) and (orientation:portrait) {
/* Styles */
}


 /* スマホ以降（320px 以下）iPhone SE */
@media screen and (max-width: 320px) {
/* Styles */
}


 /* スマホ以降（320px 以降） */
@media screen and (min-width: 321px) {
/* Styles */
}


 /* タブレット対応 */
@media screen and (min-width: 640px) and (max-width: 1023px) {
/* Styles */
}


 /* タブレット以降（640px 以降） */
@media screen and (min-width: 640px) {
br.tb_non {display: none}
}

 /* タブレット以下（1023px 以下） */
@media screen and (max-width: 1023px) {
  footer ul {grid-template-columns: 1fr;}
}


 /* 1024px以降 iPad 横 iPad 12.9 縦 含む */
@media screen and (min-width: 1024px) {
br.pc_non {display: none} 
  footer ul li a {padding: 20px 0; letter-spacing: 0}
}

 /* 1025px以降 iPad 横 iPad 12.9 縦 以降 */
@media screen and (min-width: 1025px) {
/* Styles */
}


/* PCモニター（1060px以降） */
@media only screen and (min-width : 1060px) {
/* Styles */
}

/* PCモニター（1080px以降） */
@media only screen and (min-width : 1080px) {
/* Styles */
}


/* PCモニター（1160px以降） */
@media screen and (min-width: 1160px) {
/* Styles */
}



/* PCモニター（1240px以降） */
@media screen and (min-width: 1240px) {
  footer ul li a {padding: 20px; letter-spacing: .1em}
}


/* PCモニター大（1480px以降） */
@media only screen and (min-width : 1480px) {
/* Styles */
}


/*---------------------------------------------------------------------
 Edge hack
---------------------------------------------------------------------*/
@supports (-ms-ime-align: auto) {
/* Styles */
}


/*---------------------------------------------------------------------
 print
---------------------------------------------------------------------*/
@media print {
body {-webkit-print-color-adjust: exact;} /* Chrome 背景色強制印刷 */ 
a[href]:after {content: "" !important;}
abbr[title]:after {content: "" !important;}
.show-for-small-only {display: none !important}
.pagetop.show {display: none !important}
body, h1, h2, h3, h4, h5, h6, li, dt, dd, p, th, td, .mincho {font-family: sans-serif !important}  /* Chrome印刷で日本語が表示されない対応 */
}


/* アニメーション */
@keyframes hero_fede {
  0%  {opacity: 0;}
  100%{opacity: 1;}
}