@charset "UTF-8"; /*@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;600&display=swap');*/ :root {--pcMaxW:75rem; --pcMinW:980px; --pcCntMinW:930px; --spPI:clamp(20px, 10px + 3.125vw, 25px);} .container {display:flow-root; position:relative; margin-inline:auto; container-type:inline-size;} .navBackdrop {display:none;} @media (min-width:600px){:where(body,.pageHeader,.pageTitle,main,.pageFooter) {min-width:var(--pcMinW);} .container {width:clamp(var(--pcCntMinW), 94%, var(--pcMaxW));}} @media not (min-width:600px){html {font-size:90%;} .pageHeader,main,.pageFooter {min-width:320px;} :where(:not(.pageHeader))>.container {margin-inline:var(--spPI);} body.-navOpen .navBackdrop {width:100%; height:100dvh; position:fixed; top:0; left:0; display:block; background:#0007; z-index:500; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);}} /* BASE %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ :root{--BL:#1E97E1; --BL2:#538BF5; --LB:#34BCBC; --GN:#109050; --LG:#53AC2A; --YL:#EFA61F; --RD:#ED4157; --PK:#D043A1; --PP:#AD8ABE; --GY:#525456; --BLsb:#EEF2F4; --LBsb:#E1F6F6; --GNsb:#D9F0E5; --LGsb:#E9F8E2; --YLsb:#FDF3D8; --RDsb:#FCEEEE; --PKsb:#F9EEF5; --PPsb:#E0D6E5; --GYsb:#F3F4F5; --theme:var(--BL); --themeSub:var(--BLsb);} .themeBL {--theme:var(--BL); --themeSub:var(--BLsb);} .themeBL2 {--theme:var(--BL2); --themeSub:var(--BLsb);} .themeLB {--theme:var(--LB); --themeSub:var(--LBsb);} .themeGN {--theme:var(--GN); --themeSub:var(--GNsb);} .themeLG {--theme:var(--LG); --themeSub:var(--LGsb);} .themeYL {--theme:var(--YL); --themeSub:var(--YLsb);} .themeRD {--theme:var(--RD); --themeSub:var(--RDsb);} .themePK {--theme:var(--PK); --themeSub:var(--PKsb);} .themeGY {--theme:var(--GY); --themeSub:var(--GYsb);} @media (min-width:1600px){html {font-size:calc(100% + calc((100vw - 1600px) * .006));}} @media (min-width:600px){html {scroll-padding-top:10vh;}} @media not (min-width:600px){html {scroll-padding-top:50px;}} body {line-height:1.8; font-family:"Inter","Zen Kaku Gothic Antique","游ゴシック Medium","Yu Gothic Medium","Yu Gothic","Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic",Meiryo,sans-serif; font-feature-settings:"pkna"; color:#1a1a1a;} a {text-decoration:underline; text-decoration-skip-ink:none; text-underline-offset:.24em; color:inherit;} /* =============== ヘッダ */ .pageHeader {--pcMaxW:100vw; position:relative; z-index:998; line-height:1.4;} .pageHeader :where(li,a,button:not(#spNav)) {position:relative;} .pageHeader img {max-width:100%; max-height:100%; object-fit:contain;} .pageHeader a {display:block; text-decoration:none;} .pageHeader ._siteName i {display:inline-block; vertical-align:middle; width:1.8em; aspect-ratio:1; margin-right:.3em; background:var(--cuLogo) no-repeat 50% 50% / contain;} .pageHeader ._gnav > li > a svg {margin-right:.5em;} @media (min-width:600px){ #spNav {display:none;} .pageHeader {background:#242627;} .pageHeader .container {display:flex; justify-content:space-between; align-items:center;} .pageHeader ._siteName {padding-block:.5em; background:#fff; line-height:1.25; font-size:clamp(1.75rem, 0.636rem + 1.818vw, 2rem); box-shadow:-3em 0 0 #fff, max(calc(var(--vw) * 50 - 50cqw),20px) 0 0 #fff;} .pageHeader ._gnav {display:flex; gap:clamp(2rem, -1.769rem + 6.154vw, 4rem); color:#fff; font-weight:500;} .pageHeader ._gnav > li {position:relative; display:flex;} .pageHeader ._gnav > li > a {display:grid; grid-template-columns:auto 1fr; align-items:center; padding-block:.8em; transition: .3s;} .pageHeader ._gnav > li > a svg {width:clamp(1.625rem, 0.918rem + 1.154vw, 2rem);} .pageHeader ._gnav > li > a:is(:hover,:focus,.-open) { color: #1E97E1; } } @media not (min-width:600px){ .pageHeader ._siteName {margin-left:var(--spPI); padding-block:.6rem; font-size:calc(.8rem + 1.5vw);} .pageHeader nav {position:absolute; width:100%; max-height:calc(100dvh - 50px); box-shadow:0 4px #0003; opacity:1; overflow:auto; overscroll-behavior:contain; transition:all .2s;} body:not(.-navOpen) .pageHeader nav {max-height:0; opacity:0; overflow:hidden;} body:not(.-navOpen) .pageHeader nav :is(a,button,input,select) {display:none;} .pageHeader ._gnav {background:#242627;} .pageHeader ._gnav > li + li {border-top:1px #8885 solid;} .pageHeader ._gnav > li > :first-child {padding:.8em var(--spPI); color:#fff;} .pageHeader ._gnav > li > a svg {width:2em; height:2em; aspect-ratio:1;} /* 開閉ボタン */ #spNav {width:50px; height:100%; position:absolute; top:0; right:0; border:0; background:#242627; text-align:center; cursor:pointer; --navBtnLineClr:#fff;} #spNav:before, #spNav:after {content:""; display:block; position:absolute; top:50%; left:50%; translate:-50% -50%; width:60%; height:2px; transition:.15s all;} #spNav:before {background:var(--navBtnLineClr); box-shadow:0 -7px 0 var(--navBtnLineClr);} #spNav:after {box-shadow:0 7px 0 var(--navBtnLineClr);} .-navOpen #spNav:before {box-shadow:none; rotate:-45deg;} .-navOpen #spNav:after {background:var(--navBtnLineClr); box-shadow:none; rotate:45deg;} } /* ナビ副階層 */ .pageHeader ._gnav > li > :first-child + ul {opacity:0; max-height:0; overflow:hidden; transition:max-height .2s linear, opacity .1s linear;} .pageHeader ._gnav > li > :first-child + ul a {padding:.8em .625rem; transition: color .3s;} .pageHeader ._gnav > li > :first-child + ul a:hover{ color: #1E97E1; } .pageHeader ._gnav > li > :first-child + ul li + li:before {content:""; width:90%; position:absolute; z-index:2; top:0; left:5%; border-top:1px #8884 solid;} @media (min-width:600px){ .pageHeader ._gnav > li > :first-child + ul {position:absolute; left:50%; top:100%; translate:-50%; width:20rem; padding:.4rem .7rem; border-radius:1rem; background:#fafafadd; -webkit-backdrop-filter:saturate(150%) blur(3px); backdrop-filter:saturate(150%) blur(3px); color:#1a1a1a; box-shadow:0 0 .8rem #2222;} .pageHeader ._gnav > li > :is(*:first-child:is(:hover,:focus,.-open) + ul, :first-child + ul:is(:hover,:focus-within)) {opacity:1; max-height:2000px;} } @media not (min-width:600px){ .pageHeader ._gnav {-webkit-backdrop-filter:saturate(150%) blur(3px); backdrop-filter:saturate(150%) blur(3px);} .pageHeader ._gnav > li > :first-child:not(:only-child):before, ._gnav > li > :first-child:not(:only-child):after {all:initial; content:""; display:block; position:absolute; right:12px; top:50%; width:10px; margin-top:-1px; border-top:2px #fff solid; transition:all .2s;} .pageHeader ._gnav > li > :first-child:not(:only-child):not(.-open):after {rotate:90deg;} .pageHeader ._gnav > li > :first-child + ul {background:#0003; color:#fff;} .pageHeader ._gnav > li > :first-child + ul a {padding:.75em var(--spPI) .75em calc(var(--spPI) * 1.5);} .pageHeader ._gnav > li > :first-child + ul li + li a:before {width:calc(100% - 40px); left:20px;} .pageHeader ._gnav > li > :first-child.-open + ul {opacity:1; max-height:2000px;} .pageHeader ._gnav > li > :first-child:not(.-open) + ul :is(a,button,input,select) {pointer-events:none;} } /* =============== フッタ */ .pageFooter {position:sticky; top:100vh; background:#5B656E; color:#fff; font-size:var(--fs15);} .pageFooter address p ~ p {margin-top:.6rem;} .pageFooter ._name {line-height:1.6; font-weight:bold; font-size:var(--fs20);} .pageFooter ._copyright {margin-block:1.5rem 0; font-size:var(--fs11); text-align:center;} @media (min-width:600px){ .pageFooter .container {padding:4rem 3rem;} .pageFooter address {display:flex; justify-content:center; gap:3rem;} } @media not (min-width:600px){ .pageFooter .container {padding:25px 0 15px;} } /* fixedTopBtn */ .fixedBackBtn {bottom:.5rem; right:.5rem; opacity:0; translate:0 200%; transition:.3s translate, .6s opacity;} .fixedBackBtn.-show {opacity:1; translate:0 0;} .fixedBackBtn a {width:var(--fs36); height:var(--fs36); background:#0006; border-radius:50%; text-indent:var(--fs40); text-align:center;} .fixedBackBtn a:before {content:""; display:inline-block; position:absolute; left:calc(50% - var(--fs14) / 2); top:calc(50% - var(--fs10) / 2); width:var(--fs14); height:var(--fs14); border:#fff solid; border-width:calc(var(--fs16) / 4) calc(var(--fs16) / 4) 0 0; rotate:-45deg;} /* =============== メイン */ main {position:relative; overflow-x:hidden;} :where(main .container, main > * > .container) {padding-block:var(--cntPadTop) var(--cntPadBtm);} @media (min-width:600px){ :root {--cntPadTop:5rem; --cntPadBtm:7.5rem;} } @media not (min-width:600px){ :root {--cntPadTop:40px; --cntPadBtm:80px;} } /* CUSTOM COMPONENTS %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* ページタイトル */ .pageTitle {position:relative; background:var(--themeSub);} .pageTitle .container {z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center;} .pageTitle ._dirLabel {font-weight:bold;} .pageTitle ._dirLabel a {text-decoration:none;} .pageTitle h1 {position:relative; line-height:1.4; text-align:center; color:var(--theme);} .pageTitle.-slim:before, .pageTitle.-slim:after, .pageTitle.-slim .container:before, .pageTitle.-slim .container:after {display:none;} /* パンくず */ .breadcrumb {display:flex; flex-wrap:wrap; margin:var(--fs25) 0; line-height:1.5; font-size:var(--fs14);} .breadcrumb li:not(:last-child):after {content:""; display:inline-block; vertical-align:middle; width:calc(var(--fs12) / 2); aspect-ratio:1; margin-inline:.6em; border:#333 solid; border-width:1px 1px 0 0; rotate:45deg;} .breadcrumb a {text-decoration:none;} @media (min-width:600px){ .pageTitle {min-width:var(--pcMinW);} .pageTitle .container {min-height:18rem; padding-block:2rem;} .pageTitle.-slim .container {min-height:6rem; padding-bottom:0;} .pageTitle h1 {font-size:var(--fs40);} } @media not (min-width:600px){ .pageTitle .container {min-height:12rem; padding-block:1.2rem;} .pageTitle h1 {font-size:var(--fs32);} } /* H2～H6 */ :root {--fs2v:clamp(1.75rem, 0.636rem + 1.818vw, 2rem); --fsH2:calc(var(--fs2v) * 1.25); --fsH3:calc(var(--fs2v) * .875); --fsH4:var(--fs21); --fsH5:var(--fs18); --fsH6:1rem; --hllh:calc(1em + .625rem);} .fsH2 {font-size:var(--fsH2);} .fsH3 {font-size:var(--fsH3);} .fsH4 {font-size:var(--fsH4);} .fsH5 {font-size:var(--fsH5);} .fsH6 {font-size:var(--fsH6);} h2, .h2 {/*initialize*/ all:unset; display:block; line-height:var(--hllh); font-size:var(--fsH2); font-weight:bold; /*specific style */ position:relative; margin:3em 0 1.4em; padding-left:.8em;} h2:not(.h3,.h4,.h5,.h6):before, .h2:before {content:""; position:absolute; left:0; top:-.2em; display:block; width:.4em; height:calc(100% + .2em); background:var(--theme); transform:skew(0deg,45deg); translate:-50% 0;} :is(h2, .h2).-noMark {padding-left:0;} h2.-noMark:before, .h2.-noMark:before {display:none;} h3, .h3 {/*initialize*/ all:unset; display:block; line-height:var(--hllh); font-size:var(--fsH3); font-weight:bold; /*specific style */ margin:1.5em 0 .75em; color:var(--theme);} h4, .h4 {/*initialize*/ all:unset; display:block; line-height:var(--hllh); font-size:var(--fsH4); font-weight:bold; /*specific style */ margin:1.5em 0 .6em;} h5, .h5 {/*initialize*/ all:unset; display:block; line-height:var(--hllh); font-size:var(--fsH5); font-weight:bold; /*specific style */ margin:1.2em 0 .4em;} h6, .h6 {/*initialize*/ all:unset; display:block; line-height:var(--hllh); font-size:var(--fsH6); font-weight:bold; /*specific style */ margin:.8em 0 .2em;} :is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6):first-child:not(.-mtInit) {margin-top:0;} @media not (min-width:600px){ :root {--fsH2:var(--fs24); --fsH3:var(--fs21); --fsH4:var(--fs19); --fsH5:var(--fs175);} } .-colTheme {color:var(--theme);} .-colBK {color:#1a1a1a;} .btn1 :is(a,button), :is(a,button).btn1 {display:inline-grid; grid-template-columns:auto 1fr; gap:.4rem; border:0; background:none; text-decoration:none; line-height:1.4;font-weight:600; color:var(--theme);transition: all .3s;} .btn1 .ico-arw svg {width:2.4em; height:2.4em;} .btn1 .ico-arw svg circle {stroke:currentColor;} .btn1 .ico-arw svg path {fill:currentColor;} .btn1 .ico-arw + span {display:flex; align-items:center;} .btn1 a:hover, .btn1 button:hover, a.btn1:hover, button.btn1:hover {opacity: .8;} .btn2 a:before, a.btn2:before {content:""; display:inline-block; width:var(--fs10); aspect-ratio:1; margin-right:.4em; border:#222 solid; border-width:calc(var(--fs10) / 5) calc(var(--fs10) / 5) 0 0; rotate:45deg; scale:.8;} .ctgNav {display:flex; flex-wrap:wrap; gap:.6rem;} .ctgNav :is(a,button) {display:block; padding:.4em 1.4em .35em .7em; border:0; border-radius:3em; background:var(--themeSub); text-decoration:none; text-align:left; line-height:1.2; font-weight:600;} .ctgNav :is(a,button):has(i.ico-challenge) {letter-spacing:-.04em;} .ctgNav :is(a,button) i[class*="ico-"] {display:inline-block; vertical-align:middle; height:1.85em; aspect-ratio:1; margin-right:.4em;} .ctgNav :is(a,button) i[class*="ico-"]:empty {aspect-ratio:unset;} .ctgNav :is(a,button) i[class*="ico-"] svg {width:100%; height:100%;} .ctgNav :is(a,button).-on {pointer-events:none; color:#fff;} .ctgNav :is(a,button).-on svg {filter:brightness(1000%);} .ctgNav :is(a,button):has(.ico-all).-on {background:var(--GY);} .ctgNav :is(a,button):has(.ico-class).-on {background:var(--LG);} .ctgNav :is(a,button):has(.ico-inter).-on {background:var(--YL);} .ctgNav :is(a,button):has(.ico-challenge).-on {background:var(--RD);} .ctgNav :is(a,button):has(.ico-lectures).-on {background:var(--BL2);} .ctgNav :is(a,button):has(.ico-other).-on {background:var(--PP);} .ctgBadge {position:relative; width:fit-content; padding:.1em .8em .1em 2.2em; background:#2C3741CC; font-weight:500; font-size:var(--fs14); color:#fff;} :where(.newsListWithPic, .colabBriefList) .ctgBadge {position:absolute; left:0; top:0;} .ctgBadge i {position:absolute; left:0; top:50%; width:2.4em; aspect-ratio:1; translate:-25% -50%; border-radius:50%;} .ctgBadge i svg {width:100%; height:100%; position:absolute; left:0; top:0; scale:.75; filter:brightness(1000%);} .ctgBadge i.ico-all {background:var(--GY);} .ctgBadge i.ico-class {background:var(--LG);} .ctgBadge i.ico-inter {background:var(--YL);} .ctgBadge i.ico-challenge {background:var(--RD);} .ctgBadge i.ico-lectures {background:var(--BL2);} .ctgBadge i.ico-other {background:var(--PP); display:none;} .ctgBadge:has(i.ico-other) {padding-left:.8em;} .newsListWithPic {display:grid; padding:0!important;} .newsListWithPic li {position:relative; padding:0; list-style:none;} .newsListWithPic ._pic {position:relative; width:100%; aspect-ratio:5/3; overflow:hidden; background:#fafafa;} .newsListWithPic ._pic:empty:before {content:"no image"; display:block; width:80%; font-weight:bold; color:#0003; position:absolute; left:50%; top:50%; translate:-50% -50%; line-height:1.2; font-size:125%; text-align:center;} .newsListWithPic ._pic img {width:100%; aspect-ratio:5/3; object-fit:cover;} .newsListWithPic .-exc ._pic:after {content:"優秀賞"; display:flex; align-items:flex-end; justify-content:center; position:absolute; left:0; top:0; width:8em; aspect-ratio:7/3; background:#ddb057; color:#fff; translate:-50% -12%; rotate:-40deg; transform-origin:50% 0;} .newsListWithPic ._date {margin-bottom:.1em; font-weight:600; color:var(--BL);} .newsListWithPic ._ttl {line-height:1.5; font-weight:bold;} .newsListWithPic ._ttl a {text-decoration:none;} .newsListWithPic ._ttl a:after {content:""; display:block; position:absolute; right:0; bottom:0; width:100%; height:100%;} .newsListWithPic ._ttl .-ico {display:none;} .achTxtList > section {padding-block:.8rem; break-inside:avoid;} .achTxtList :where(h3,.h3) {margin-bottom:.3em; font-size:calc(var(--fs2v) * .75);} .achTxtList ul {position:relative; margin-left:1rem;} .achTxtList li {position:relative; padding:.7rem 1rem; background:var(--GYsb);} .achTxtList li + li {margin-top:2px;} .achTxtList li:before {content:""; position:absolute; left:-3px; top:0; display:block; width:3px; height:100%; background:var(--theme); opacity:.6;} .intvList {display:grid;} .intvList > * , .intvList ._item {position:relative;} .intvList ._pic {overflow: hidden;} .intvList ._pic .ctgBadge {position:absolute; left:0; top:0;} .intvList ._pic > img {width:100%; aspect-ratio:5/3; object-fit:cover;} .intvList dl {display:grid; gap:.2rem; margin:0;} .intvList dt {font-weight:bold;} .intvList dt a {text-decoration:none;} .intvList dt a:after {content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%;} .intvList dd:not(._name) {line-height:1.5; font-size:93%;} .intvList ._aff > span {display:inline-block;} .intvList ._txt {padding-block:.8rem 1.4rem;} .colabBriefList {display:grid;} .colabBriefList li {position:relative; background:#fff; box-shadow:0 0 1em #0000001a;} .colabBriefList ._ttl {margin-bottom:.6em; padding-bottom:.3em; border-bottom:1px #0008 dashed; font-weight:bold; font-size:calc(var(--fs2v) * .6875);} .colabBriefList ._ttl a {text-decoration:none;} .colabBriefList ._ttl a:after {content:""; display:block; width:100%; height:100%; position:absolute; left:0; top:0; z-index:10;} .colabBriefList dl {display:flex; flex-wrap:wrap; align-items:flex-end;} .colabBriefList dd {line-height:1.4; font-size:calc(var(--fs2v) * .8); font-weight:600;} .colabBriefList ._btn {position:absolute; right:1.2rem; bottom:-1rem; width:calc(var(--fs2v) * 1.33); aspect-ratio:1; background:#718292;} .colabBriefList ._btn:before {content:""; display:block; width:30%; aspect-ratio:1; position:absolute; left:50%; top:50%; translate:-60% -50%; border:#fff solid; border-width:.2rem .2rem 0 0; rotate:45deg;} .picTitleList {display:grid;} .picTitleList > li {position:relative;} .picTitleList > li > img {display:block; width:100%; aspect-ratio:16/9; object-fit:cover; margin-bottom:.6rem;} .picTitleList > li > a {font-weight:bold; text-decoration:none;} .picTitleList > li > a:after {content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%;} .txtBnrs {display:grid; gap:.8rem;} .txtBnrs > li > a {display:block; width:100%; aspect-ratio:3/1;} .txtBnrs > li:not(.-txt) img {width:100%; height:100%; object-fit:contain;} .txtBnrs > li.-txt {position:relative;display:flex; background:#fff; line-height:1.4;} .txtBnrs > li.-txt:after {content:""; display:block; width:.6rem; aspect-ratio:1; position:absolute; right:.15rem; bottom:.15rem; background:var(--theme); clip-path:polygon(100% 0, 100% 100%, 0 100%);} .txtBnrs > li.-txt > a {display:flex; flex-direction:column; justify-content:center; padding:.6rem 1rem; text-decoration:none;} .txtBnrs > li.-txt > a:after {content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%;} .imgBR50 img, img.imgBR50 {border-radius:50%;} .posterGallery {display:flex; flex-wrap:wrap; align-items:center; margin-block:1.5rem; background:var(--themeSub);} .posterGallery img {max-width:min(15rem,calc((91.9vw - var(--spPI) * 2 - 6vw) / 3)); max-height:min(20rem,calc((91vw - var(--spPI) * 2 - 6vw) / 3 * 1.5)); box-shadow:0 0 .3rem #0001;} @media (min-width:600px){ .newsListWithPic {grid-template-columns:repeat(auto-fill, minmax(20rem,1fr)); gap:2rem 4%;} .newsListWithPic ._pic {margin-bottom:.8rem;} .newsListWithPic ._txt {display:contents;} .newsListWithPic ._ttl {font-size:var(--fs18);} .colabBriefList {grid-template-columns:1fr 1fr; gap:4cqw;} .colabBriefList li {padding:3rem 3cqw 1.4rem;} .achTxtList {columns:2; column-gap:2rem;} .intvList, .picTitleList {grid-template-columns:1fr 1fr 1fr 1fr; gap:2.5cqw;} .intvList.-spSlide :is(.slick-list, .slick-track) {display:contents!important;} .intvList.-spSlide .slick-track:before, .intvList.-spSlide .slick-track:after {display:none;} .intvList.-spSlide ._item {width:auto!important; float:none;} .intvList ._item ._pic img { transition:scale .3s;} .intvList ._item:has(a:hover) ._pic img {scale:1.05;} .txtBnrs {grid-template-columns:1fr 1fr 1fr 1fr;} .posterGallery {padding:1.5rem; gap:1rem;} } @media not (min-width:600px){ .ctgNav {font-size:var(--fs13);} .ctgBadge {font-size:var(--fs13);} .newsListWithPic {border-bottom:1px #0002 solid;} .newsListWithPic li {display:grid; grid-template-columns:max(30%,100px) 1fr; gap:0 1rem; padding-block:1.2rem; border-top:1px #0002 solid;} .newsListWithPic ._pic:after {font-size:85%;} .newsListWithPic :is(._pic, ._pic img) {aspect-ratio:5/4;} .newsListWithPic .ctgBadge {position:relative; width:fit-content; margin-bottom:.6rem;} .colabBriefList {gap:1.5rem;} .colabBriefList li {padding:2.2rem 1rem 1rem;} .colabBriefList ._btn {bottom:-.6rem;} :is(.intvList, .picTitleList) {grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:1.5rem;} :is(.intvList, .picTitleList) ._item {max-width:320px; margin-inline:auto;} .intvList.-spSlide {display:block; width:min(80%,300px); margin-inline:auto;} .intvList.-spSlide .slick-list {overflow:visible;} .intvList.-spSlide .slick-track {display:flex;} .intvList.-spSlide .slick-arrow {display:none!important;} .intvList.-spSlide ._item {width:100%; padding:8px 12px 0;} .intvList.-spSlide ._item .ctgBadge {left:12px; top:8px;} .txtBnrs {grid-template-columns:1fr 1fr;} .posterGallery {padding:4vw; gap:3vw;} } @media (max-width:540px){ .txtBnrs {grid-template-columns:unset;} .txtBnrs li {width:clamp(270px, 80%, 320px); margin-inline:auto;} } .subPageNav {--theme:var(--BL); padding-block:calc(var(--fs2v) * 1.2);} .subPageNav, .subPageNav > * {position:relative; z-index:3;} .subPageNav:before, .subPageNav:after {content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%; scale:3 1; background:var(--theme); opacity:.3; z-index:1;} .subPageNav:after {background:#dddb;} .subPageNav ._ttl {font-weight:bold; font-size:1.16em; color:var(--theme);} .subPageNav ul {display:grid; gap:.4rem;} .subPageNav ul.-flex {display:flex; flex-wrap:wrap; grid-template-columns:unset;} .subPageNav ul a {display:grid; padding:.3em 1em .3em .6em; background:#fff; text-decoration:none; color:inherit;} .subPageNav ul .ico-arw svg {width:1.6em; color:var(--theme);} .subPageNav ul .-current a {pointer-events:none; background:#6666; color:#fff; opacity:.8;} .subPageNav ul .-current .ico-arw svg {color:#fff;} @media (min-width:600px){ .subPageNav ul {grid-template-columns:repeat(auto-fill, minmax(18rem,1fr));} } /* PAGES %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* =============== トップページ */ .home_mv {position:relative; overflow:hidden;} .home_mv img {width:100%; opacity:0; scale:1.02; transform-origin:50% 100%; animation:mvIn forwards 1.5s; animation-delay:.1s;} .home_mv:after {content:""; position:absolute; left:0; top:0; display:block; width:200%; height:100%; background:linear-gradient(60deg, #fff0 0%, #fff0 10%, #ffff 35%); scale:2; translate:-50% 0; transform-origin:0 0; animation:mvSweep forwards 1.5s; animation-delay:.2s;} .home_mv ._tagline {position:absolute; line-height:1.67; color:#fff; font-weight:700;} .home_mv ._tagline > span {padding:.1em .25em; background:linear-gradient(90deg, #4998E1 0%, #51BBE2 100%); -webkit-box-decoration-break:clone; box-decoration-break:clone;} @keyframes mvIn { 100% {opacity:1; scale:1;} } @keyframes mvSweep { 0% {traslate:-50% 0;} 100% {translate:50% 0;} } body:has(.home_mv) main {margin-top:calc(var(--cntPadTop) * -1);} body:has(.home_mv) main > .container {padding-bottom:0;} .home_news, .home_news > * {position:relative;} .home_news .ctgNav button {transition:all .2s;} .home_news:has(.newsListWithPic[data-ctg="all"]) .ctgNav .ico-all svg, .home_news:has(.newsListWithPic[data-ctg="class"]) .ctgNav .ico-class svg, .home_news:has(.newsListWithPic[data-ctg="inter"]) .ctgNav .ico-inter svg, .home_news:has(.newsListWithPic[data-ctg="challenge"]) .ctgNav .ico-challenge svg, .home_news:has(.newsListWithPic[data-ctg="lectures"]) .ctgNav .ico-lectures svg {filter:brightness(1000%);} .home_news:has(button[data-ctg="all"].-on) .newsListWithPic li:nth-of-type(n+5), .home_news:has(button[data-ctg="class"].-on) :is( .newsListWithPic li:nth-child(n+5 of li:has(.ico-class)), .newsListWithPic li:not(:has(.ico-class))), .home_news:has(button[data-ctg="inter"].-on) :is( .newsListWithPic li:nth-child(n+5 of li:has(.ico-inter)), .newsListWithPic li:not(:has(.ico-inter))), .home_news:has(button[data-ctg="challenge"].-on) :is( .newsListWithPic li:nth-child(n+5 of li:has(.ico-challenge)), .newsListWithPic li:not(:has(.ico-challenge))), .home_news:has(button[data-ctg="lectures"].-on) :is( .newsListWithPic li:nth-child(n+5 of li:has(.ico-lectures)), .newsListWithPic li:not(:has(.ico-lectures))) {display:none;} .home_news:has(button[data-ctg="other"].-on) :is( .newsListWithPic li:nth-child(n+5 of li:has(.ico-other)), .newsListWithPic li:not(:has(.ico-other))) {display:none;} .newsListWithPic.-standby li {opacity:0; transition:opacity 0s;} .newsListWithPic:not(.-standby) li {opacity:1; transition:opacity .3s;} .newsListWithPic:not(.-standby) li ._pic img { transition:scale .3s;} .newsListWithPic:not(.-standby) li:has(._ttl a:hover) ._pic img { scale:1.05; } .home_intv {position:relative;} .home_intv:before {content:""; display:block; position:absolute; right:50%; top:0; width:50.1vw; height:100%; background:linear-gradient(-110deg, #DDE9FF 0%, #CCE6F7 50%, #E2FDFF 100%); scale:2 1; transform-origin:0 50%;} .home_intv > * {position:relative;} .home_intv > ul:before {content:""; display:none; width:min(calc(100% + 10rem), calc(var(--vw) * 100)); height:calc(100% + 6rem); position:absolute; left:50%; top:50%; z-index:0; translate:-50% calc(-50% + 2rem); background:linear-gradient(90deg, #7ce0e4 0%, #75c1fe 50%, #bf96ff 100%); transform:skew(0deg, -3.5deg);} .home_intv .intvList ._item ._txt {padding:calc(var(--spPI) * .6) 0;} .home_txtBnrs {background:#96ABB9; padding-block:calc(var(--fs2v) * 2);} .home_txtBnrs .container {padding:0;} .home_txtBnrs h2.h4 {color:#fff;} @media (min-width:600px){ .home_mv img {max-height:calc(100vh - 8rem); object-fit:cover; object-position:50% 30%;} .home_mv ._tagline {left:0; bottom:calc(var(--cntPadTop) * 1 + 2rem); font-size:calc(var(--fsH2) * 1.4);} .home_news {min-width:var(--psMinW); display:grid; grid-template-columns:max(17rem,22%) 1fr; gap:8%;} .home_news:before {content:""; display:block; position:absolute; z-index:0; left:0; top:calc(var(--cntPadTop) * -1); width:100%; height:calc(100% - 2rem - 2cqw); background:var(--themeSub); scale:1.1 1;} .home_news .ctgNav {width:17rem; flex-direction:column;} .home_news .ctgNav button {width:100%; background:#fff; transition: opacity .3s;} .home_news .ctgNav button:hover {opacity: .7;} .home_news .ctgNav button i.ico-other:empty {display:inline-block; vertical-align:middle; height:1.85em; /*background:var(--PP);*/ border-radius:50%; margin-right:.4em;} .home_news .btn1 {margin-top:3rem;} .home_news .newsListWithPic {grid-template-columns:1fr 1fr; gap:2rem 5%;} .home_intv {display:grid; grid-template-columns:1fr auto; grid-template-columns:auto auto; margin-top:var(--cntPadBtm); padding-block:var(--cntPadBtm) var(--cntPadTop);} .home_intv:before {min-width:var(--pcMinW);} .home_intv h2 {grid-column:1/2; grid-row:1/2;} .home_intv .intvList {grid-column:1/3; grid-row:2/3;} .home_intv .intvList .ctgBadge {font-size:min(var(--fs14),1.33cqw);} .home_intv > ul:before {min-width:var(--pcMinW);} .home_intv .btn1 {grid-column:2/3; grid-row:1/2;} } @media (min-width:1320px){ .home_mv ._tagline {left:calc((var(--vw) * 100 - 1320px) * .15);} } @media not (min-width:600px){ .home_mv {margin-bottom:2rem;} .home_mv img {width:100%; aspect-ratio:7/6; object-fit:cover;} .home_mv ._tagline {left:0; bottom:2rem; font-size:calc(.5rem + 5vw);} .home_news {display:flex; flex-direction:column; padding-block:2rem 4rem;} .home_news:before {scale:1.2 1;} .home_news > ._txt {display:contents;} .home_news > ._txt > * {position:relative;} .home_news h2 {z-index:2;} .home_news .ctgNav {z-index:1;} .home_news .btn1 {order:10;} .home_intv {padding-block:4rem;} .home_intv > ul:before {height:calc(100% - 2rem); translate:-50% calc(-50% + 1rem); transform:skew(0deg, -6deg);} } /* =============== センター概要 */ .overview_space .pcW50 {padding-bottom:2rem;} .overview_space ._usage {display:grid; grid-template-columns:3fr 7fr; align-items:center; gap:0 5%;} .overview_space ._usage ul {display:flex; justify-content:center; text-align:center;} .overview_space ._usage ul img {scale:1.1;} .overview_space ._usage p {position:relative; width:fit-content; margin:0 auto; padding-inline:1em; background:var(--BL); line-height:1.5; color:#fff; font-weight:500; font-size:85%; clip-path:polygon(0 0, 100% 0, calc(100% - .3em) 50%, 100% 100%, 0 100%, .3em 50%);} @media (min-width:600px){ .overview_space ._usage {translate:0 1.5rem;} .overview_space .pcW45 {display:flex; flex-direction:column; justify-content:space-between;} } @media not (min-width:600px){ .overview_space {display:flex; flex-direction:column;} .overview_space :is(.pcLR, [class*="pcW"]) {display:contents;} .overview_space ._usage {order:10;} } /* =============== 社会連携教育 */ .pg_4taiko {display:grid; margin:2em auto 4em;} .pg_4taiko li {position:relative; display:grid; grid-template-rows:1fr 1fr; line-height:1.4; text-align:center; font-weight:bold;} .pg_4taiko li:before {content:attr(data-num); position:relative; z-index:2; line-height:1; font-family:"Gilroy",sans-serif; font-size:300%; -webkit-text-stroke:.02em var(--BL); text-stroke:.02em var(--BL); color:transparent;} .pg_4taiko li:after {content:""; display:block; position:absolute; left:50%; top:50%; translate:-50% -40%; width:70%; aspect-ratio:1; border-radius:50%; background:#C4E7F8;} .pg_4taiko li > span {position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center;} .pg_generic {text-align:center;} .pg_generic > section {position:relative;} .pg_generic > section:before {content:""; display:block; width:100%; position:absolute; left:0; bottom:0; background:var(--color); opacity:.2;} .pg_generic > section > * {position:relative;} .pg_generic h3 {margin-bottom:.3em; font-size:calc(var(--fsH3) * .9); color:var(--color);} .pg_generic ul {display:grid; height:8em;} .pg_generic li {display:grid; place-content:center; border-radius:.3rem; background:var(--color); color:#fff; font-weight:bold;} .pg_generic ._graph {margin-top:1.2rem; border-radius:.5rem; background:#fff; text-align:center; overflow:hidden;} .pg_generic ._graph img {width:100%; object-fit:contain;} .pg_generic .-rt {--color:#FF6660;} .pg_generic .-rt ul {grid-template-columns:1fr 1fr;} .pg_generic .-cp {--color:#38A0B2;} .pg_generic .-cp ul {grid-template-columns:1fr 1fr 1fr;} @media (min-width:600px){ .pg_4taiko {grid-template-columns:1fr 1fr 1fr 1fr; font-size:calc(var(--fs2v) * .8); max-width:55rem;} .pg_4taiko li:before {translate:0 -20%;} .pg_generic {display:grid; grid-template-columns:3fr 4fr;} .pg_generic > section {padding:0 1.4rem 1.4rem;} .pg_generic > section:before {height:calc(100% - 1.1rem);} .pg_generic ul {gap:.4rem; font-size:116%;} .pg_generic ._graph img {width:min(37cqw,100%);} .pg_generic .-rt:before {border-radius:1rem 0 0 1rem;} .pg_generic .-cp:before {border-radius:0 1rem 1rem 0;} } @media not (min-width:600px){ .pg_4taiko {grid-template-columns:1fr 1fr; gap:8vw 4vw; font-size:min(5vw,1.4rem);} .pg_4taiko li:after {max-width:180px;} .pg_generic > section {padding-block:1.5rem 2rem;} .pg_generic > section:before {height:100%; scale:1.2 1;} .pg_generic ul {gap:1vw; font-size:min(1rem,4vw);} .pg_generic ._graph img {max-width:350px;} } .pageTitle.-cgReport h1 small {color:#1a1a1a;} .pageTitle.-cgReport h1 small i {position:relative; display:inline-block; width:1.6em; height:1.6em; vertical-align:middle; translate:0 -20%; border-radius:50%; line-height:1; background:var(--RD);} .pageTitle.-cgReport h1 small i svg {position:absolute; left:0; top:0; width:100%; height:100%; filter:brightness(1000%); scale:.7;} .pageTitle.-cgReport h1 ._name {display:block; margin-top:.4em; font-size:1rem; color:#1a1a1a;} .pageTitle.-cgReport h1 ._name b {margin-left:.4rem; font-weight:inherit; font-size:133%;} .pageTitle.-cgReport ~ main h2 {margin-block:2em .8em; font-size:calc(var(--fsH3) * 1.16);} .pageTitle.-cgReport ~ main img {margin-block:1rem;} @media (min-width:600px){ .pageTitle.-cgReport .container {display:grid; grid-template-columns:2fr 3fr; gap:max(2vw,1.2rem); align-items:unset; padding-block:0;} .pageTitle.-cgReport ._pic {grid-column:1/2; grid-row:1/2; translate:0 3rem;} .pageTitle.-cgReport ._txt {grid-column:2/3; grid-row:1/2; display:flex; align-items:center; padding-block:1rem;} .pageTitle.-cgReport ._txt h1 {font-size:clamp(2.25rem, 1.136rem + 1.818vw, 2.5rem); text-align:left;} .pageTitle.-cgReport h1 small {font-size:calc(var(--fs2v) * .75);} .pageTitle.-cgReport ~ main {--pcMaxW:62.5rem; padding-top:calc(var(--fs2v) * 1.5);} .pageTitle.-cgReport ~ main img {max-width:min(100%,667px); height:auto;} } @media not (min-width:600px){ .pageTitle.-cgReport .container {padding-bottom:0;} .pageTitle.-cgReport h1 {font-size:clamp(1.625rem, 1.196rem + 2.143vw, 2rem);} .pageTitle.-cgReport h1 small {font-size:1.2rem;} .pageTitle:is(.-cgReport, .-intv) ._pic {position:relative; margin-top:1rem;} .pageTitle:is(.-cgReport, .-intv) ._pic:after {content:""; display:block; width:100%; height:20%; position:absolute; left:0; bottom:0; box-shadow:-100px 0 0 #fff, 100px 0 0 #fff;} } /* =============== 連携をお考えの方 */ .ptn_achievements {margin-inline:auto; text-align:center;} .ptn_achievements h3 {padding:.4em .7em; background:var(--theme); line-height:1.4; font-size:1.2rem; font-weight:500; color:#fff;} .ptn_achievements dt {background:#89a; font-weight:500; color:#fff;} .ptn_achievements ul {display:flex; justify-content:space-around; align-items:center; line-height:1.4;} .ptn_achievements li {position:relative;} .ptn_achievements li:before {content:""; display:block; aspect-ratio:1; position:absolute; left:50%; top:50%; translate:-50% -50%; border-radius:50%; background:var(--themeSub);} .ptn_achievements li > div {position:relative; display:flex; flex-direction:column; justify-content:center; min-height:5em;} .ptn_achievements .-pbl {--theme:var(--GN); --themeSub:var(--GNsb);} .ptn_achievements .-ifp {--theme:var(--YL); --themeSub:var(--YLsb);} .ptn_achievements .-ifp h3 {margin-bottom:0;} .ptn_achievements .-ifp dl {margin-top:4px;} .ptn_features tr > * {border:2px #fff solid;} .ptn_features .-head th {font-size:1.2rem;} .ptn_features .-head th:nth-of-type(1) {background:none;} .ptn_features .-head th:nth-of-type(2) {background:var(--GN); color:#fff;} .ptn_features .-head th:nth-of-type(3) {background:var(--YL); color:#fff;} .ptn_features tr ~ tr th {width:1.6em; padding:.6em .2em; background:#89a; color:#fff;} .ptn_features tr ~ tr td:nth-of-type(1) {background:var(--GNsb);} .ptn_features tr ~ tr td:nth-of-type(2) {background:var(--YLsb);} .ptn_schedule-pbl {overflow:hidden;} .ptn_schedule-pbl tr > * {border:none;} .ptn_schedule-pbl .-head th {--thisBg:#89a; position:relative; background:none; color:#fff;} .ptn_schedule-pbl .-head th:before {content:""; display:block; position:absolute; right:1px; top:0; z-index:-1; width:calc(100% - 2px); height:100%; background:var(--thisBg);} .ptn_schedule-pbl .-head th:nth-of-type(n+4) {--thisBg:var(--GN);} .ptn_schedule-pbl .-head th:nth-of-type(n+4):after {content:""; display:block; width:calc(100% - 2px); height:30rem; position:absolute; right:1px; top:100%; background:var(--GNsb);} .ptn_schedule-pbl td {position:relative; vertical-align:top; padding-top:2.2rem; background:transparent; font-weight:500;} .ptn_schedule-pbl td > span:not(._arrow) {display:inline-block; -webkit-writing-mode:vertical-rl; writing-mode:vertical-rl; margin-block:auto; white-space:nowrap;} .ptn_schedule-pbl td ._arrow {display:block; translate:0 -.4rem;} .ptn_schedule-pbl td[colspan] ~ td[colspan] ._arrow {color:var(--GN);} .ptn_schedule-pbl td:before {content:""; display:block; width:100%; height:2px; background:currentColor; position:absolute; left:0; top:1rem;} .ptn_schedule-pbl td:last-child:before {width:50%;} .ptn_schedule-pbl td:nth-child(2):before {width:calc(100% - 5px);} .ptn_schedule-pbl td:nth-child(3):before {width:50%; left:50%;} .ptn_schedule-pbl td:first-child:before, .ptn_schedule-pbl td:nth-child(3):before {width:50%; left:50%;} .ptn_schedule-pbl td:nth-child(n+3):before {background:var(--GN);} .ptn_schedule-pbl td:nth-child(2):after, .ptn_schedule-pbl td:last-child:after {content:""; display:block; width:.7em; height:6px; position:absolute; top:calc(1rem - 2px); clip-path:polygon(0 0, 100% 50%, 0 100%);} .ptn_schedule-pbl td:nth-child(2):after {right:1px; background:currentColor;} .ptn_schedule-pbl td:last-child:after {right:calc(50% - 4px); background:var(--GN);} .ptn_schedule-pbl.-spring th {width:calc(100cqw / 7);} .ptn_schedule-pbl.-autumn th {width:calc(100cqw / 8);} .ptn_schedule-pbl.-autumn th[colspan]:after {width:50%;} .ptn_schedule-pbl.-autumn td.-half {width:calc(100cqw / 16);} .pg_schedule-ifp {display:flex; justify-content:center; align-items:center; gap:.8rem; text-align:center;} .pg_schedule-ifp ._phase {display:grid; place-content:center; width:7em; aspect-ratio:1; border-radius:50%; background:var(--YLsb); line-height:1.4;} .pg_schedule-ifp ._arrow i {position:relative; display:block; height:2px; margin-block:.5rem; background:currentColor;} .pg_schedule-ifp ._arrow i:after {content:""; display:block; width:.7em; height:6px; position:absolute; left:100%; top:50%; translate:-50% -50%; background:currentColor; clip-path:polygon(0 0, 100% 50%, 0 100%);} .pg_ifpTypes :is(th,td) {border:2px #fff solid;} .pg_ifpTypes .-head th {background:var(--YL); color:#fff;} .pg_ifpTypes .-head th:empty {background:transparent;} .pg_ifpTypes tr ~ tr th {height:3rem; background:#89a; color:#fff;} .pg_ifpTypes tr:nth-of-type(2n) td {background:var(--YLsb);} @media (min-width:600px){ .ptn_achievements {max-width:66rem;; display:grid; grid-template-columns:3fr 7fr; gap:3px;} .ptn_achievements ul {width:100%;} .ptn_achievements dl {display:grid; grid-auto-flow:column; grid-template-rows:auto 1fr; gap:3px;} .ptn_achievements dl dd {position:relative; display:flex;} .ptn_achievements dl dd ~ dd:before {content:""; display:block; height:100%; border-left:1px #3332 solid; position:relative; left:-2px; top:0;} .ptn_achievements .-pbl ul {flex-wrap:wrap; height:80%;} .ptn_achievements .-pbl li {min-width:40%;} .ptn_achievements .-pbl li:before {width:7em;} .ptn_achievements .-ifp ul {flex-direction:column; padding-block:1.5rem; gap:2rem; font-size:93%;} .ptn_achievements .-ifp li:before {width:6em;} } @media not (min-width:600px){ .ptn_achievements {max-width:400px;} .ptn_achievements section + section {margin-top:2em;} .ptn_achievements li:before {width:5em;} .ptn_achievements dl {display:grid; grid-template-columns:auto 1fr; gap:3px;} .ptn_achievements dt {padding:1em .15em; -webkit-writing-mode:vertical-rl; writing-mode:vertical-rl;} .ptn_achievements dd {position:relative;} .ptn_achievements dd ~ dd:before {content:""; display:block; width:100%; position:absolute; left:0; top:-2px; border-top:1px #0002 solid;} .ptn_achievements dd ul {height:100%; padding-block:1rem;} } /* =============== 参加者の声 */ .pageTitle.-intv h1 small {font-size:60%; color:#1a1a1a;} .pageTitle.-intv ._pic {position:relative;} .pageTitle.-intv ._pic .ctgBadge {position:absolute;} .pageTitle.-intv ._pj {margin:0; line-height:1.6; font-size:116%; font-weight:bold;} .pageTitle.-intv ._pj:after {content:""; display:block; width:3rem; margin-block:1rem; border-top:1px var(--theme) solid;} @media (min-width:600px){ .pageTitle.-intv .container {display:grid; grid-template-columns:2fr 3fr; gap:max(2vw,1.2rem); align-items:unset; padding-block:0;} .pageTitle.-intv ._pic {grid-column:1/2; grid-row:1/2; translate:0 3rem;} .pageTitle.-intv ._txt {grid-column:2/3; grid-row:1/2; display:flex; flex-direction:column; justify-content:center; padding-block:1rem;} .pageTitle.-intv ._txt h1 {text-align:left;} } @media not (min-width:600px){ .pageTitle.-intv .container {padding-bottom:0;} .pageTitle.-intv ._txt {order:-1; text-align:center;} .pageTitle.-intv ._pj:after {margin-inline:auto;} } .intvEntry ._block {margin-block:calc(var(--fs2v) * 2.5);} @media (min-width:600px){ .intvEntry ._block:has(._pic) {display:grid; gap:3cqw;} .intvEntry ._block:nth-child(2n+1 of ._block) {grid-template-columns:5fr 3fr;} .intvEntry ._block:nth-child(2n of ._block) {grid-template-columns:3fr 5fr;} .intvEntry ._block:nth-child(2n of ._block) ._txt {grid-column:2/3; grid-row:1/2;} .intvEntry ._block:nth-child(2n of ._block) ._pic {grid-column:1/2; grid-row:1/2;} } @media not (min-width:600px){ .intvEntry ._block ._pic {width:min(85%, 350px); margin:1.5rem auto 0;} } /* =============== 新着情報 */ .entryBody img {max-width:100%; height:auto;} @media (min-width:600px){ } @media not (min-width:600px){ } :root{--cuLogo:url('data:image/svg+xml;charset=UTF-8,');}