@charset "utf-8"; /************************** location用CSS **************************/ /*------------- event TOP */ #location #wrapper { background: #ECF6F8 url("../img/campuslife/location/bg_01.jpg") no-repeat center top; background-size: 100%; } #location #contents { background: none; padding-bottom: 0 !important; } /*--- #page_title --- */ #location #page_title { margin-bottom: 0 !important; background: none; box-shadow: none; padding-bottom: 0; } #location #page_title h2 { margin-bottom: 0 !important; } /*--- section --- */ #location #contents>section { background: url("../img/campuslife/location/bg_02.png") repeat-x calc(50% + 660px) bottom; padding-top: 0; padding-bottom: 6em; } #location #contents>section h3:first-of-type { color: #333; font-weight: 700; } #location #contents>section h3:first-of-type strong { background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFF100 0%) repeat scroll 0 0; font-size: 110%; margin: 0 0.3em; letter-spacing: 0.2em; font-weight: 900; } #location #contents .leader { color: #333; font-weight: 700; margin-bottom: 3em; } /*--- map --- */ #location #contents .map { position: relative; padding: 0 10% 10%; } #location #contents .map .man { position: absolute; bottom: 0; right: 5%; width: 38%; } /*--- box --- */ #location #contents .box { padding: 2em 5em 0; background: #fff; border-top: 10px solid; border-bottom: 10px solid; border-color: #FBDCD5; margin-bottom: 2em; } #location #contents .box:nth-of-type(2) { border-color: #FDEDDF; } #location #contents .box:nth-of-type(3) { border-color: #E5F2E0; } #location #contents .box:nth-of-type(4) { border-color: #FDEFF5; } #location #contents .box:nth-of-type(5) { border-color: #C0E5F9; } #location #contents .box:nth-of-type(6) { border-color: #E3E5F4; } #location #contents .box figure.flex_box { flex-wrap: nowrap; align-items: center; justify-content: space-between; } #location #contents .box figure.flex_box img { flex-shrink: 0; min-width: 0; } #location #contents .box figure.flex_box img:first-child { width: 43%; } #location #contents .box figure.flex_box img:nth-child(2) { width: 16%; margin-right: 16px; } #location #contents .box figure.flex_box img:nth-child(3) { width: 38%; } #location #contents .box .img-txt { gap: 3em; align-items: flex-start; } #location #contents .box h4 { color: #333; display: inline-block; font-weight: 800; margin-bottom: 1.2em; } #location #contents .box h4 .h4-caution { color: #e60012; font-size: 80%; } #location #contents .box h4 .h4-caution-wrapper strong { margin-left: 1.5em; } #location #contents .box h4 strong { background: rgba(0, 0, 0, 0) linear-gradient(transparent 64%, #FBDCD5 0%) repeat scroll 0 0; padding: 0 0.2em 0.1em; } #location #contents .box:nth-of-type(2) h4 strong { background: rgba(0, 0, 0, 0) linear-gradient(transparent 64%, #FDEDDF 0%) repeat scroll 0 0; } #location #contents .box:nth-of-type(3) h4 strong { background: rgba(0, 0, 0, 0) linear-gradient(transparent 64%, #E5F2E0 0%) repeat scroll 0 0; } #location #contents .box:nth-of-type(4) h4 strong { background: rgba(0, 0, 0, 0) linear-gradient(transparent 64%, #FDEFF5 0%) repeat scroll 0 0; } #location #contents .box:nth-of-type(5) h4 strong { background: rgba(0, 0, 0, 0) linear-gradient(transparent 64%, #C0E5F9 0%) repeat scroll 0 0; } #location #contents .box:nth-of-type(6) h4 strong { background: rgba(0, 0, 0, 0) linear-gradient(transparent 64%, #E3E5F4 0%) repeat scroll 0 0; } #location #contents .box h4 img { padding-right: 0.1em; width: 1.7em; margin-bottom: -0.3em; } #location #contents .box figure.two-img { position: relative; padding-bottom: 20px; margin-bottom: 1em; } #location #contents .box figure.two-img img:first-of-type { width: 68%; } #location #contents .box figure.two-img img:nth-of-type(2) { position: absolute; bottom: 3em; right: 0; width: 40%; /*border: #fff 2px solid;*/ border-radius: 100%; } #location #contents .box figure figcaption { text-align: center; } #location #contents .box figure.two-img figcaption { text-align: right; margin-top: 40px; } /*------------- responsive */ @media screen and (max-width: 920px) { /**/ #location #contents .box { padding: 1em 1.5em 0; } #location #contents .box figure.two-img { text-align: left; } #location #contents .box figure.two-img img:nth-of-type(2) { position: relative; margin: 0 0 0 auto !important; margin-top: -33% !important; bottom: 0; display: block; } #location #contents .box figure.two-img figcaption { text-align: center; margin-top: 0.5em; } } @media screen and (max-width: 760px) { #location #page_title img { width: 100%; } .map img:not(.man) { width: 100% !important; } #location #contents .box { padding: 1em 1.5em 0; } #location #contents .box figure.two-img { text-align: left; } #location #contents .box figure.two-img img:nth-of-type(2) { position: relative; margin: 0 0 0 auto !important; margin-top: -33% !important; bottom: 0; display: block; } #location #contents .box figure.two-img figcaption { text-align: center; margin-top: 0.5em; } }