@charset "utf-8"; /************************** schedule用CSS 2026年版 ※雅 祭が4⇒10月に変更！ **************************/ /*------------- event TOP */ #schedule #wrapper { background: #fffef0 url("../img/campuslife/schedule/bg_01.png") repeat center top -100px; background-size: 100%; } #schedule #contents { background: none; } /*--- #page_title --- */ #schedule #page_title { margin-bottom: 0 !important; background: none; box-shadow: none; } #schedule #page_title h2 { margin-bottom: 0 !important; } /*--- section --- */ body#schedule .leader { color: #333; margin: 2em 0 4em !important; } #schedule #contents>section { background: #fff url("../img/campuslife/schedule/bg_02.png") repeat-y center top 165px; margin: 1em auto 4em; filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.10)); padding: 4em; border-radius: 1.6em; position: relative; overflow: visible; } /*--- 月の軸
--- */ #schedule #contents>section .month { margin-left: auto; text-align: right; padding-right: 13%; } /*--- .yearlytimeline --- */ #schedule #contents>section .yearlytimeline { position: relative; } /*--- photo --- */ #schedule #contents>section .yearlytimeline figure { position: absolute; width: 40%; z-index: -2; } #schedule #contents>section .yearlytimeline figure img {} #schedule #contents>section .yearlytimeline figure:nth-of-type(1) { top: 3%; right: 0%; width: 34%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(2) { top: 17%; left: 0%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(3) { top: 20%; right: 0%; text-align: right; } #schedule #contents>section .yearlytimeline figure:nth-of-type(4) { top: 29%; left: 9%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(5) { top: 44%; right: -7%; text-align: right; } #schedule #contents>section .yearlytimeline figure:nth-of-type(6) { top: 50%; left: 0%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(7) { top: 75%; left: -10%; width: 66%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(8) { top: 64%; left: 4%; width: 51%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(9) { top: 90%; left: 0%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(10) { bottom: 16%; right: -4%; text-align: right; } /*--- 月のマル
4月APRIL
--- */ #schedule #contents>section .month dl { display: inline-block; text-align: left; background: url("../img/campuslife/schedule/bg_03.png") repeat-y 55px top; } #schedule #contents>section .month dl>div { display: flex; align-items: center; line-height: 1.2; margin-bottom: 8em; } #schedule #contents>section .month dl>div:last-of-type { margin-bottom: 0em; } #schedule #contents>section .month dl dt { width: 8em; height: 8em; background: #fbeaf2; border: 3px solid #fff; filter: drop-shadow(3px 3px 20px rgba(0, 0, 0, 0.20)); display: flex; align-items: center; justify-content: center; border-radius: 100%; font-weight: 800; font-size: 18px; flex-direction: column; line-height: 1.2; margin-right: 1em; } #schedule #contents>section .month dl div:nth-child(2) dt { background: #FBE0EC; } #schedule #contents>section .month dl div:nth-child(3) dt { background: #FBE0D6; } #schedule #contents>section .month dl div:nth-child(4) dt { background: #FDEFE9; } #schedule #contents>section .month dl div:nth-child(5) dt { background: #FFF8EE; } #schedule #contents>section .month dl div:nth-child(6) dt { background: #FFFDE5; } #schedule #contents>section .month dl div:nth-child(7) dt { background: #EFF7EE; } #schedule #contents>section .month dl div:nth-child(8) dt { background: #DAEDE1; } #schedule #contents>section .month dl div:nth-child(9) dt { background: #D7EDEA; } #schedule #contents>section .month dl div:nth-child(10) dt { background: #E9F5F7; } #schedule #contents>section .month dl div:nth-child(11) dt { background: #E8F5FD; } #schedule #contents>section .month dl div:nth-child(12) dt { background: #E0E1F1; } #schedule #contents>section .month dl dt .number { font-size: 200%; } #schedule #contents>section .month dl dt .eng { display: block; font-weight: 400; } #schedule #contents>section .month dl dd { padding: 0.2em; background: rgba(255, 255, 255, 0.8); font-size: 18px; font-weight: 500; } /*--- pickup --- */ #schedule #contents>section .yearlytimeline .pickup { padding: 1em 2em; background: #FDEFF5; position: absolute; width: 47%; filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.10)); opacity: 0.9; } #schedule #contents>section .yearlytimeline p:first-child { margin-top: 0.6em !important; margin-bottom: 0.4em !important; } #schedule #contents>section .yearlytimeline .pickup .title { font-weight: bold; font-size: 24px; text-align: center; color: #df365b; margin-bottom: 0.6em !important; line-height: 1.3; } #schedule #contents>section .yearlytimeline .pickup.sep { background: #FFFDE5; bottom: 38%; } #schedule #contents>section .yearlytimeline .pickup.sep .title { color: #F1903D; } /*------------- responsive */ @media screen and (max-width: 780px) { body .pickup.sp_only { display: block !important; } } @media screen and (max-width: 780px) { body#schedule .leader { color: #333; margin: 0em 0 3em !important; padding: 3em 1em 1em; } #schedule #contents>section { background: #fff url(../img/campuslife/schedule/bg_02.png) repeat-y center top 165px; margin: 1em auto 4em; padding: 12px; } #schedule #contents>section .month dl>div { align-items: flex-start; flex-wrap: wrap; } #schedule #contents>section .month dl dt { width: 5.5em; height: 5.5em; border-width: 2px; font-size: 13px; margin-right: 0.2em; } #schedule #contents>section .yearlytimeline .pickup { opacity: 1; padding: 0.7em 1em; margin-top: 0.8em; width: 100%; margin-left: 0; position: relative } #schedule #contents>section .yearlytimeline .pickup p:first-child img { height: 2.5em; } #schedule #contents>section .yearlytimeline .pickup img { display: block; } #schedule #contents>section .yearlytimeline .pickup p:last-of-type { line-height: 1.5; } #schedule #contents>section .month { text-align: left; padding-right: 0; position: relative; } #schedule #contents>section .month dl { background: url(../img/campuslife/schedule/bg_03.png) repeat-y 1.7em top / 20px; } #schedule #contents>section .month dl dt .number { font-size: 140%; } #schedule #contents>section .month dl dd { font-size: 16px; padding-top: 1em } #schedule #contents>section .yearlytimeline figure { left: auto !important; right: 0 !important; } #schedule #contents>section .yearlytimeline figure:nth-of-type(1) { top: 0; right: 0%; width: 36%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(2) { top: 16%; right: 0%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(4) { top: 26%; width: 50%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(5) { top: 41%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(8) { top: 62%; left: 4%; width: 75%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(10) { bottom: 3%; width: 55%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(9) { top: 83%; width: 66%; } } /************************** 2026年版 ※雅祭が4⇒10月に変更パッチ **************************/ #schedule #contents>section .yearlytimeline .pickup-wrapper { position: absolute; top: 29%; } #schedule #contents>section .yearlytimeline .pickup { position: relative; } #schedule #contents>section .yearlytimeline .pickup.oct { margin-top: 16px; } #schedule #contents>section .yearlytimeline figure:nth-of-type(1) { top: 3%; right: -7%; width: 44%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(2) { top: 10%; left: 2%; width: 36%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(3) { top: 18%; right: -5%; text-align: right; } #schedule #contents>section .yearlytimeline figure:nth-of-type(4) { top: 18%; left: 15%; width: 36%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(5) { top: 32%; right: 0%; text-align: right; } #schedule #contents>section .yearlytimeline figure:nth-of-type(6) { top: 50%; left: 0%; display: none; } #schedule #contents>section .yearlytimeline figure:nth-of-type(7) { top: 65%; width: 53%; left: -5%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(8) { top: 0%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(9) { top: 87%; left: 0%; width: 48%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(10) { bottom: 21%; right: -4%; width: 44%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(11) { top: 75%; width: 53%; left: -5%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(12) { bottom: 32%; right: -7%; text-align: right; width: 48%; } @media screen and (max-width: 780px) { #schedule #contents>section .yearlytimeline figure:nth-of-type(2) { top: 9%; width: 60%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(4) { top: 18%; left: 15%; width: 60%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(5) { top: 26%; right: 0%; text-align: right; } #schedule #contents>section .yearlytimeline figure:nth-of-type(9) { width: 72%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(10) { width: 82%; bottom: 22%; } #schedule #contents>section .yearlytimeline figure:nth-of-type(11) { width: 76%; top: 79%; } }