@charset "UTF-8"; header { position: absolute; z-index: 999; width: 100%; } main { margin: 0; } * { outline: none; } #carouselWrap { position: relative; min-height: 600px; background-size: 64px 64px; } #carouselWrap .fa-times { font-size: 1.8rem; vertical-align: middle; margin-top: -0.5rem; margin-left: 8px; margin-right: 8px; } #mvCarousel, #eventsCarousel { display:none; } #mvCarousel { background: #ffffff; } #topEvWrap { padding: 25px 0 65px; } #eventsCarousel li { background: #fff; margin-left: 5px; margin-right: 5px; } #eventsCarousel li a { padding: 30px; } #topCopy { width: 80%; position: absolute; color: #ffffff; text-align: center; top: 35%; left: 10%; z-index: 2; letter-spacing: 0.2em; text-shadow:0px 0px 120px #000000; } #topCopy p { margin-bottom: 20px; } #topCopy h2 { font-weight: normal; font-size: 4.5rem; line-height: 1.1; } #topCopy h1 { font-size: 5.2rem; margin-top: 35px; line-height: 1.4; margin-bottom: 10px; } #topCopy rt { font-weight: normal; font-size: 1.6rem; } #topCopy .subCopy { letter-spacing: 0; font-size: 1.7rem; } #eventsCarousel li .photoWrap { margin-right: 7%; overflow: hidden; width: 37%; } #eventsCarousel li .evDate, #eventsCarousel li .evSubTi { font-size: 1.2rem; line-height: 1.2; } #eventsCarousel li .evCat { margin-bottom: 10px; font-size: 1.4rem; line-height: 1.2; font-weight: bold; } #eventsCarousel li .evDate { margin-bottom: 10px; } #eventsCarousel li .evDate .fa { margin-right: 5px; } #eventsCarousel li h2 { font-size: 2.0rem; line-height: 1.4; margin-top: 5px; } #topLinks, #topInfo, #topFloor { padding: 70px 0; } #topRecEv, #topRecEv + #topNews { width: 48%; } #topLinks .ti { margin-bottom: 25px; border-bottom: solid 2px #343040; padding: 0 10px 15px 10px; } #topLinks h1 { font-size: 2.3rem; line-height: 1.4; width: 100%; letter-spacing: 0.1em; } #topLinks h1 .fa, #topFloor h1 .fa { margin-right: 13px; } #topLinks h1 span { font-size: 1.4rem; font-weight: normal; margin-left: 20px; } #topLinks .btnViewLists { white-space: nowrap; font-size: 1.3rem; margin-top: 15px; line-height: 1.1; } #topLinks .linkLists { border-top: 0; } #topInfo { text-align: center; } #topInfo .ti, #topFloor .ti { margin-bottom: 30px; } #topInfo .ti h1, #topFloor .ti h1 { font-size: 2.6rem; line-height: 1.0; letter-spacing: 0.1em; } #topFloor .ti h1 { line-height: 1.4; } #topInfo .ti h1 .fa { margin-right: 10px; } #topInfo .ti h1 + p, #topFloor .ti h1 + p { margin-top: 7px; } #topFloor { text-align: center; } #topBn { text-align: center; } #topBn li { background-position: center top; background-size: cover; } #topBn li a { color: #ffffff; background: rgba(0,0,0,0.3); height: 100%; padding: 50px 30px 180px; } #topBn li a:hover { background: rgba(0,0,0,0); } #topBn li a h2, #topBn li a h2 + p { line-height: 1.0; } #topBn li a h2 { font-size: 2.2rem; letter-spacing: 0.1em; } #topBn li a h2 + p { font-size: 1.2rem; margin: 120px 0 15px; } #topBnProjects { background-image: url(top-bn01.jpg); } #topBnCircle { background-image: url(top-bn02.jpg); } #topBnArtists { background-image: url(top-bn03.jpg); } .institutionList li { width: 32%; margin-right: 3%; } .institutionList li { width: 22%; margin-right: 3%; } #eventsCarousel .slick-prev, #eventsCarousel .slick-next { background: rgba(33, 42, 53, 0.84); height: 38px; width: 30px; } .br { display: none; } .slick-dots li { background: none !important; } .slick-dots li button:before { content: ' '; border: solid 2px #343040; border-radius: 100%; font-family: Quicksand, 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif; width: 10px !important; height: 10px !important; line-height: 10px; opacity: 1 !important; } .slick-dots li button { padding: 0; } .slick-dots li.slick-active button:before { background: #343040; } .slick-dots { bottom: -40px; } #mvCarousel .slick-dots { bottom: 30px; } .slick-dotted.slick-slider { margin-bottom: 0; } #mvCarousel .slick-dots li button:before { border-color: #ffffff; } #mvCarousel .slick-dots li.slick-active button:before { background: #ffffff; } @media screen and (max-width:1180px) { #topCopy { top: 32%; } } @media screen and (min-width:959px) { .institutionList li:nth-child(5n) { margin-right: 0; } } @media screen and (max-width:959px) { #topCopy { top: 26%; } #topCopy h1 { margin-top: 25px; } #carouselWrap { position: relative; min-height: 100px; background: none; } #wrapper > header { position: static; } #topCopy { top: 17%; } #topLinks, #topLinks .ti { display: block; } #topLinks .ti { text-align: center; } #topLinks > section { width: 100% !important; margin: 0 auto; } #topLinks .en { margin-left: auto; margin-right: auto; margin-top: 7px; display: block; } .linkLists > li > a, .linkLists li .row { padding-left: 0; padding-right: 0; } #topNews { margin-top: 35px !important; } #topLinks, #topInfo, #topFloor { padding-top: 35px; padding-bottom: 35px; } #topLinks h1, #topFloor h1, #topInfo .ti h1 { font-size: 2.0rem; } } @media screen and (max-width:767px) { #topCopy h1 { font-size: 1.2rem; } #eventsCarousel li a { padding: 20px; } #topBn .row { display: block; } #topBn li { background-position: center center; margin-bottom: 10px; } #topBn li a { padding: 40px 20px; } .institutionList li:nth-child(4n) { margin-right: 4%; } .institutionList li:nth-child(3n) { margin-right: 0; } #eventsCarousel .slick-next { right: 15px; } #eventsCarousel .slick-prev { left: 15px; } } @media screen and (max-width:650px) { #topCopy p { font-weight: bold; font-size: 1.4rem; } #topCopy h2 { font-size: 2.6rem; } #topCopy h1 { font-size: 1.2rem; } #topCopy rt { font-size: 1.3rem; } #topCopy .subCopy { font-size: 1.4rem; line-height: 1.4; } .slick-dots { bottom: -40px; } } @media screen and (max-width:414px) { #eventsCarousel li h2 { font-size: 1.7rem; line-height: 1.5; } .br { display: block; } #eventsCarousel li a { padding: 15px; } #topCopy { top: 30px; text-shadow:0px 0px 60px #000000; } #topCopy .mean, #topCopy h2 { display: none; } #topCopy h1 { font-size: 1.2rem; margin-top: 0; } #topCopy rt { font-size: 1.4rem; font-weight: bold; } #topCopy .subCopy { font-size: 1.4rem; font-weight: normal; } .slick-dots li button:before { width: 7px !important; height: 7px !important; line-height: 7px; } } @media screen and (max-width:375px) { #eventsCarousel li a { padding: 10px; } } @media screen and (max-width:321px) { #topCopy { top: 20px; } #topCopy h1 { font-size: 1.2rem; margin-bottom: 5px; } }