/* CSS Document */


/* ----- Fonts Incrude ----- */
@font-face { font-family: 'Noto Sans Japanese Regular'; src: url('../fonts/NotoSansJpRegular.woff2') format('woff'); font-style: normal; font-weight: 400; }
@font-face { font-family: 'Noto Sans Japanese SemiBold'; src: url('../fonts/NotoSansJpSemiBold.woff2') format('woff'); font-style: normal; font-weight: 600; }
@font-face { font-family: 'Noto Sans Japanese Bold'; src: url('../fonts/NotoSansJpBold.woff2') format('woff'); font-style: normal; font-weight: 700; }
.noto-r { font-family: "Noto Sans Japanese Regular"; }
.noto-sb { font-family: "Noto Sans Japanese SemiBold"; }
.noto-b { font-family: "Noto Sans Japanese Bold"; }


/* ----- Reset ----- */
* { zoom: 1; }
html, body, header, footer, h1, h2, h3, h4, h5, h6, p, pre, address, ul, ol, li, dl, dt, em, dd, caption, img, form
{ margin: 0; padding: 0; border: none; font-style: normal; font-weight: normal; font-size: 100%; text-align: left; list-style-type: none; }
img { vertical-align: bottom; width: 100%; height: auto; }
hr { display: none; }
a { color: #06C; text-decoration: none; transition: .3s; }
a:hover { color: #C00;cursor: pointer; }


/* ----- Common ----- */
html, body { height: 100%; }
body { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; font-size: 15px; line-height: 1.8em; color: #333; -webkit-text-size-adjust: none; -webkit-print-color-adjust: exact; }
#wrap { height: 100%; min-height: 100%; position: relative; }
body > #wrap { height: auto; min-height: 100%; }
#container { padding-bottom: 610px;/*padding-bottom: 520px;*/ }
noscript p { line-height: 1.2em; text-align: center; font-weight: bold; color: #FFF; padding: .8em 0; background: #C00; }
#pagetop { position: absolute; left: 0; top: 0; }
.clearfix { zoom: 1; overflow: hidden; }
.clearfix:after { content: ""; display: block; clear: both; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
	#container { padding-bottom: 0; }
}

/* ----- Header ----- */
header { background: #FFF; box-shadow: 0 0 .5rem rgba(0,0,0,.3); position: sticky; top: 0; z-index: 100; }
#head-box { width: calc(1100px + ((100% - 1100px) / 2)); height: 80px; margin-left: calc((100% - 1100px) / 2); display: flex; align-items: center; justify-content: space-between; position: relative; }
#head-logo { width: 60px; height: auto; padding-bottom: 5px; }
#head-logo a:hover img { opacity: .8; }
#head-box ul { width: 290px; margin-right: 80px; display: flex; justify-content: flex-end; }
#head-box ul li { width: 48%; margin-left: 2%; }
#head-box ul li a { height: 40px; border: solid 1px #04A; border-radius: .5rem; display: flex; align-items: center; justify-content: center; }
#head-box ul li a img { width: 92%; }
#head-box ul li#status-btn a { background: rgba(255,255,255,1); }
#head-box ul li#anchor-btn a { background: rgba(255,255,255,1); }
#head-box ul li#login-btn a { background: rgba(0,68,170,1); }
#head-box ul li#LOGINMODE-status a { background: rgba(255,255,255,1); }
#head-box ul li#logout-btn a { color: #FFF; border-color: #999; background: #999; }
#head-box ul li#status-btn a:hover { background: rgba(0,68,170,.2); }
#head-box ul li#anchor-btn a:hover { background: rgba(0,68,170,.2); }
#head-box ul li#LOGINMODE-status a:hover { background: rgba(0,68,170,.2); }
#head-box ul li#login-btn a:hover { background: rgba(0,68,170,.8); }
#head-box ul li#logout-btn a:hover { background: #BBB; }
#head-box ul li#status-btn a img { filter: invert(15%) sepia(47%) saturate(6157%) hue-rotate(210deg) brightness(94%) contrast(101%); }
#head-box ul li#anchor-btn a img { filter: invert(15%) sepia(47%) saturate(6157%) hue-rotate(210deg) brightness(94%) contrast(101%); }
#head-box ul li#LOGINMODE-status a img { filter: invert(15%) sepia(47%) saturate(6157%) hue-rotate(210deg) brightness(94%) contrast(101%); }
#head-box ul li#login-btn a img { filter: invert(100%) sepia(0%) saturate(7288%) hue-rotate(235deg) brightness(113%) contrast(97%); }
@media only screen and (max-width: 1100px) {
	#head-box { width: 96%; margin: 0 auto 0 4%; }
}
@media only screen and (max-width: 520px) and (orientation: portrait) {
	#head-box { width: 94%; height: 60px; margin: 0 auto; }
	#head-logo { width: 50px; }
	#head-box ul { width: 60%; margin-right: 55px; }
}


/* ----- Navigation ----- */
#toggle-btn { width: 50px; height: 80px; display: flex; align-items: center; justify-content: center; position: fixed; top: 0; right: 20px; cursor: pointer; z-index: 1001; }
#toggle-btn ul { width: 100%; height: 84%; position: relative; }
#toggle-btn ul li { width: 90%; height: 6px; background: #04A; display: block; position: absolute; left: 50%; }
#toggle-btn ul li a { width: auto; }
#toggle-btn ul li:first-child { top: 25%; transform: translate(-50%,-50%); transition: .3s; }
#toggle-btn ul li:nth-child(2) { top: 50%; transform: translate(-50%,-50%); transition: .3s }
#toggle-btn ul li:last-child { top: 75%; transform: translate(-50%,-50%); transition: .3s }
#toggle-btn ul.active-menu li:first-child { background: #666; box-shadow: none; top: 50%; transform: translate(-50%,-50%) rotate(-45deg); }
#toggle-btn ul.active-menu li:nth-child(2) { box-shadow: none; opacity: 0; }
#toggle-btn ul.active-menu li:last-child { background: #666; box-shadow: none; top: 50%; transform: translate(-50%,-50%) rotate(45deg); }
#menu-panel { width: min(70%,18rem); height: calc(100dvh - 80px); padding-top: 80px; background: rgba(255,255,255,0.99); box-shadow: 0 0 .5rem rgba(0,0,0,.3); position: fixed; top: 0; right: -100%; transform: translateX(0); z-index: 1000; transition: .5s; }
#menu-panel.active-menu { right: 0; }
#menu-panel ul#gmenu { flex-direction: column; justify-content: flex-start; }
#menu-panel ul#gmenu li { width: 100%; border-top: solid 1px #DDD; }
#menu-panel ul#gmenu li:last-child { border-bottom: solid 1px #DDD; }
#menu-panel ul#gmenu li a { width: 100%; text-align: left; color: #04A; padding: .6rem .6rem; display: block; }
#menu-panel ul#gmenu li ul#program-sub { display: none; }
#menu-panel ul#gmenu li a strong { padding-left: .8rem; position: relative; }
#menu-panel ul#gmenu li a strong::before { content: ""; width: .5rem; height: .7rem; background: #04A; clip-path: polygon(0 0,100% 50%,0 100%); position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: .3s; }
#menu-panel ul#gmenu li a:hover { background: rgba(0,68,170,.2); }
#menu-panel ul#gmenu li ul li { border: none; }
#menu-panel ul#gmenu li ul li:last-child { border-bottom: none; }
#menu-panel ul#gmenu li ul li a { padding: .2rem 0 .2rem 1.6rem; }
#menu-panel ul#gmenu li ul li a strong { font-weight: normal; }
#menu-panel ul#gmenu li ul li a strong::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #999; clip-path: polygon(0 0,100% 0%,100% 100%,0 100%);}
#menu-panel ul#nav-btn { width: 90%; position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); }
#menu-panel ul#nav-btn li { padding-top: .5rem; }
#menu-panel ul#nav-btn li a { padding: .5rem 0; border: solid 1px #04A; border-radius: .5rem; display: flex; align-items: center; justify-content: center; }
#menu-panel ul#nav-btn li a img { width: min(92%,150px); }
#menu-panel ul#nav-btn li#status-nav a { border-radius: .5rem; background: rgba(255,255,255,1); }
#menu-panel ul#nav-btn li#login-nav a { background: rgba(0,68,170,1); }
#menu-panel ul#nav-btn li#logout-nav a { color: #FFF; border-color: #999; background: #999; }
#menu-panel ul#nav-btn li#status-nav a:hover { background: rgba(0,68,170,.2); }
#menu-panel ul#nav-btn li#login-nav a:hover { background: rgba(0,68,170,.8); }
#menu-panel ul#nav-btn li#logout-nav a:hover { background: #BBB; }
#menu-panel ul#nav-btn li#status-nav a img { filter: invert(15%) sepia(47%) saturate(6157%) hue-rotate(210deg) brightness(94%) contrast(101%); }
#menu-panel ul#nav-btn li#login-nav a img { filter: invert(100%) sepia(0%) saturate(7288%) hue-rotate(235deg) brightness(113%) contrast(97%); }
#overlay.active-menu { width: 100%; height: 100lvh; background: rgba(0,0,0,0); display: block; position: fixed; top: 0; left: 0; z-index: 999; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
	#toggle-btn { height: 60px; right: 2%; }
	#toggle-btn ul { height: 100%; }
	#menu-panel { height: calc(100dvh - 60px); padding-top: 60px; }
	#menu-panel ul#gmenu li#gmenu-program a { padding-bottom: .2rem; }
	#menu-panel ul#gmenu li ul#program-sub { display: block; }
	#menu-panel ul#gmenu li ul#program-sub li:last-child a { padding-bottom: .6rem; }
}


/* ----- Key Visual ----- */
#keyvisual { width: 100%; height: min(800px,calc(100vh - 80px)); height: min(800px,calc(100dvh - 80px)); background: #DEDEDE; position: relative; overflow: hidden; }
#kv-bg { width: 76%; height: 100%; background: url("../images/common/blue_bg.jpg") no-repeat center center; background-size: cover; clip-path: polygon(0 0,100% 0,calc(100% - (max(700px,calc(100svh - 80px)) / tan(70deg))) 100%,0 100%); }
#kv-box { width: min(92%,1100px); height: 100%; margin: 0 auto; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
#keyvisual h1 { width: 500px; position: absolute; top: 70px; left: calc((100% - 1100px) / 2); }
#keyvisual #period { width: calc(500px + ((100% - 1100px) / 2)); background: rgba(0,0,0,.9); display: flex; justify-content: flex-end; position: absolute; top: 200px; left: 0; }
#keyvisual #period h2 { width: 480px; padding: 10px 20px 10px 0; }
#kv-sponsor { width: 500px; position: absolute; top: 320px; left: calc((100% - 1100px) / 2); z-index: 3; }
#kv-sponsor ul { display: flex; flex-wrap: wrap; justify-content: center; }
#kv-sponsor ul li { width: 15.2%; height: 0; margin: 0 1.76% 1.76% 0; padding-top: 15.2%; border-radius: .5rem; background: #FFF; box-shadow: 0 0 .5rem rgba(0,0,0,.3); position: relative; }
#kv-sponsor ul li:nth-child(6n), #kv-sponsor li:last-child { margin-right: 0; }
#kv-sponsor ul li a { display: block; cursor: pointer; }
#kv-sponsor ul li img { width: 100%; border-radius: .5rem; position: absolute; top: 0; left: 0; mix-blend-mode: multiply; }
#kv-sponsor dl { margin-top: 1rem; border-radius: 2.25rem; background: rgba(255,255,255,.8); box-shadow: 0 0 .5rem rgba(0,0,0,.5); display: flex; align-items: center; justify-content: space-between;
	dt { font-family: 'Noto Sans Japanese SemiBold'; font-size: 1.2rem; line-height: 1.3; text-align: center; color: #FFF; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: #F63; display: flex; align-items: center; justify-content: center; }
	dd { width: calc(100% - 6rem); padding-right: 1rem;
		p { line-height: 1.4; text-align: justify;
			span { font-size: 80%; line-height: 1.4; text-indent: -1em; padding-left: 1em; display: block; }
		}
	}
}
#kv-sakuma { width: 700px; position: absolute; bottom: -3%; left: 50%; }
#kv-name { width: calc(300px + ((100% - 1100px) / 2)); background: #04A; display: flex; align-items: center; position: absolute; right: 0; bottom: 30px; }
#kv-name h3 { color: #FFF; height: 60px; padding-left: .5rem; display: flex; flex-direction: column; justify-content: center; position: relative; }
#kv-name h3::before { content: ""; width: calc((60px / tan(70deg)) + .5rem); height: 60px; background: #04A; clip-path: polygon(calc(100% - .5rem) 0,100% 0,100% 100%,0 100%); position: absolute; top: 0; left: calc((60px / tan(70deg) * -1)); }
#kv-name h3 span { font-size: 1.2rem; line-height: 1.2; }
#kv-name h3 strong { font-size: 2rem; line-height: 1.2; display: flex; align-items: center; }
#kv-name h3 strong i { font-size: 42%; line-height: 1.2; font-style: normal; padding-right: .8rem; }
@media only screen and (max-height: 600px) and (orientation: landscape) {
	#keyvisual { height: 600px !important; }
	#kv-sakuma { top: auto; bottom: 0; }
}
@media only screen and (max-width: 1100px) {
	#keyvisual h1 { width: 45%; top: 6svw; left: 4%; }
	#keyvisual #period { width: 45%; padding-left: 4%; top: 18svw; }
	#kv-sponsor { width: 45%; top: 28svw; left: 4%; }
	#kv-sakuma { width: 60%; }
	#kv-name { width: 30svw; }
	#kv-name h3 span { font-size: 1.8svw; line-height: 1.2; }
	#kv-name h3 strong { font-size: 3svw; line-height: 1.2; }
	#kv-sponsor dl dd p { font-size: 1.7svw; line-height: 1.4; }
}
@media only screen and (max-height: 1030px) and (orientation: portrait) {
	#keyvisual h1 { width: 60%; top: 3svw; left: 50%; transform: translateX(-50%); }
	#keyvisual #period { width: 100%; padding: 0; top: 18svw; }
	#keyvisual #period h2 { width: 40%; margin: 0 auto; padding: .8rem 0; }
	#kv-sakuma { width: 60%; bottom: 0; left: 50%; }
	#kv-sponsor { width: 45%; top: 27svw; }
	#kv-name { width: 30svw; }
}
@media only screen and (max-width: 840px) and (orientation: portrait) {
	#keyvisual h1 { width: 60%; top: 3svw; left: 50%; transform: translateX(-50%); }
	#keyvisual #period h2 { width: 60%; margin: 0 auto; padding: .8rem 0; }
	#kv-sponsor { top: 30svw; }
	#kv-sakuma { width: 65%; left: 45%; }
	#kv-name { width: 38svw; }
}
@media only screen and (max-width: 520px) and (orientation: portrait) {
	#keyvisual { height: calc(100vh - 60px) !important; height: calc(100dvh - 60px) !important; }
	#kv-bg { width: 95%; }
	#keyvisual h1 { width: 94%; top: 8svw; }
	#keyvisual #period { top: 32svw; }
	#keyvisual #period h2 { width: 92%; }
	#kv-sponsor { width: 92%; top: 48svw; }
	#kv-sponsor dl { margin-top: .5rem; border-radius: 2rem;
		dt { font-size: 1.1rem; line-height: 1.3; width: 4rem; height: 4rem; }
		dd { width: calc(100% - 5.5rem);
			p { font-size: 3.4svw; line-height: 1.4; }
		}
	}
	#kv-sakuma { width: 80%; left: 10%; }
	#kv-name { width: 50svw; }
	#kv-name h3 { height: 50px; }
	#kv-name h3::before { width: calc((50px / tan(70deg)) + .3rem); height: 50px; left: calc((50px / tan(70deg) * -1)); }
	#kv-name h3 span { font-size: 3svw; line-height: 1.2; }
	#kv-name h3 strong { font-size: 5svw; line-height: 1.2; }
}
@media only screen and (max-height: 440px) and (orientation: landscape) {
	#keyvisual { height: 400px !important; }
	#kv-sakuma { top: -15%; bottom: auto; }
	#kv-name h3 { height: 50px; }
	#kv-name h3::before { width: calc((50px / tan(70deg)) + .3rem); height: 50px; left: calc((50px / tan(70deg) * -1)); }
	#kv-name h3 span { font-size: 2svw; line-height: 1.2; }
	#kv-name h3 strong { font-size: 3svw; line-height: 1.2; }
}
@media only screen and (max-width: 375px) and (orientation: portrait) {
	#keyvisual h1 { top: 3svw; }
	#keyvisual #period { top: 24svw; }
	#kv-sponsor { width: 92%; top: 41svw; left: 50%; transform: translateX(-50%); }
	#kv-sakuma { width: 85%; left: 20%; }
}
@media only screen and (max-height: 375px) and (orientation: landscape) {
	#keyvisual { height: 320px !important; }
	#keyvisual h1 { top: 2svw; }
	#keyvisual #period { top: 12svw; }
	#kv-sponsor { top: 21svw; }
	#kv-sponsor dl { margin-top: .5rem; border-radius: 2rem;
		dt { font-size: 1.1rem; line-height: 1.3; width: 4rem; height: 4rem; }
		dd { width: calc(100% - 5.5rem);
			p { font-size: 3.2svh; line-height: 1.4; }
		}
	}
	#kv-sakuma { top: auto; bottom: -8svh; }
}

/* ----- Contents ----- */
.subttl { width: calc((1100px + ((100% - 1100px) / 2)) - (40px / tan(70deg))); }
.ttl-blue, .ttl-blue h2::after { background: #04A; }
.ttl-white, .ttl-white h2::after { background: #FFF; }
.subttl h2 { width: 100%; height: 40px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; position: relative; }
.subttl h2::after { content: ""; width: calc(40px / tan(70deg)); height: 40px; clip-path: polygon(0 0,100% 0,0 100%); position: absolute; top: 0; right: calc((40px / tan(70deg)) * -1); }
.ttl-blue { color: #FFF; }
.ttl-white h2 { color: #04A; }
.subttl h2 strong { font-family: "Noto Sans Japanese SemiBold"; font-size: 1.5rem; line-height: 1.2; padding-left: calc((100svw - 1100px) / 2); }
.subttl h2 strong i { font-style: normal; padding-left: 2rem; position: relative; }
.subttl h2 strong i::before { content: ""; width: 1.6rem; height: 1.8rem; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
.ttl-blue h2 strong i::before { background: url("../images/common/logomark_white.svg") no-repeat center center; background-size: cover; }
.ttl-white h2 strong i::before { background: url("../images/common/logomark_blue.svg") no-repeat center center; background-size: cover; }
.subttl h2 span { font-family: "Noto Sans Japanese SemiBold"; font-size: 1.1rem; line-height: 1.2; padding-right: .5rem; }
.inner-box { width: min(94%,1100px); margin: 0 auto; }
@media only screen and (max-width: 1100px) {
	.subttl { width: calc(98% - (40px / tan(70deg))); }
	.subttl h2 strong { padding-left: 3%; }
}
@media only screen and (max-width: 520px) and (orientation: portrait) {
	.subttl h2 strong { font-size: 1.3rem; line-height: 1.2; padding-left: 1%; }
	.subttl h2 strong i { padding-left: 1.8rem; }
	.subttl h2 strong i::before { width: 1.4rem; height: 1.6rem; }
	.subttl h2 span { font-size: .9rem; line-height: 1.2; padding-right: .2rem; }
}
@media only screen and (max-width: 375px) and (orientation: portrait) {
	.subttl h2 strong { font-size: 1.2rem; line-height: 1.2; }
	.subttl h2 span { font-size: .8rem; line-height: 1.2; }
}


/* ----- Keynote ----- */
#keynote { padding: 1.2rem 0 2rem 0; }
#keynote .inner-box { padding-top: 2rem; }
#keynote h3 { font-family: "Noto Sans Japanese Bold"; font-size: 2.2rem; line-height: 1.2; text-align: center; color: #04A; padding-bottom: .5rem; position: relative; }
#keynote h3::before { content: "「"; }
#keynote h3::after { content: "」"; }
#keynote h4 { font-family: "Noto Sans Japanese Regular"; font-size: 1rem; line-height: 1.4; text-align: center; color: #333; padding: .4rem 0 2rem 0; border-top: solid 1px #04A; }
#keynote h4 span { padding-left: 1rem; }
#keynote .regist-box a { cursor: pointer;
	ul { display: flex; align-items: center; justify-content: center;
		li { font-size: .9rem; line-height: 1.2; text-align: center; width: 10rem; padding: .4rem; border-radius: 0 .5rem .5rem 0; }
		li:first-child { color: #04A; background: rgba(0,68,170,.3); border-right: solid 1px #FFF; border-radius: .5rem 0 0 .5rem; transition: .3s; }
		li.empty { color: #04A; background: #FFF; box-shadow: 0 0 1px rgba(0,68,170,1) inset; transition: .3s; }
		li.few { color: #FFF; background: #F82; transition: .3s; }
		li.full { color: #FFF; background: #C00; transition: .3s; }
	}
	ul.status-empty {
		li.few, li.full { display: none; visibility: hidden; }
	}
	ul.status-few {
		li.empty, li.full { display: none; visibility: hidden; }
	}
	ul.status-full {
		li:first-child span { display: none; visibility: hidden; }
		li.empty, li.few { display: none; visibility: hidden; }
	}
}
#keynote .regist-box a:hover {
	ul {
		li:first-child { color: #FFF; background: rgba(0,68,170,1); }
		li.empty { color: #FFF; background: #04A; box-shadow: none; }
	}
}



#keynote .link-btn { width: min(100%,280px); margin: 0 auto; }
#keynote .link-btn a { font-size: 1.2rem; line-height: 1.2; text-align: center; color: #04A; padding: .5rem 0; border: solid 1px #04A; border-radius: .5rem; display: block; cursor: pointer; }
#keynote .link-btn a:hover { background: rgba(0,68,170,.2); }
@media only screen and (max-width: 1100px) {
	#keynote h3 { font-size: 3.2svw; line-height: 1.2; }
}
@media only screen and (max-width: 520px) and (orientation: portrait) {
	#keynote .inner-box { padding-top: 1rem; }
	#keynote h3 { font-size: 5.4svw; line-height: 1.3; }
	#keynote h3::before, #keynote h3::after { content: ""; }
	#keynote h3 span::before { content: "\A"; white-space: pre; }
	#keynote h4 { padding: .4rem 0 1rem 0; }
	#keynote h4 span { padding-left: 0; }
	#keynote h4 span::before { content: "\A"; white-space: pre; }
	#keynote .link-btn a { font-size: 4.4svw; line-height: 1.2; }
}


/* ----- Program ----- */
#program { padding: 1.2rem 0 2rem 0; background: #04A;
	.program-read { font-size: 1.1rem; line-height: 1.4; text-align: center; color: #FFF; padding-top: .4rem; position: relative; }
	.program-read::after { content: ""; width: 1.2rem; height: .8rem; background: #FFF; clip-path: polygon(0 0,100% 0,50% 100%); position: absolute; bottom: -1rem; left: 50%; transform: translateX(-50%); }
	.inner-box { padding-top: 1rem; display: flex; flex-wrap: wrap; justify-content: space-between; }
}
#program .program-column { width: 48%; padding-bottom: 1.2rem; }
#program .program-column h3 { color: #FFF; width: 100%; margin: 0 auto; padding-bottom: .5rem; }
#program .program-column h3 strong { font-family: "Noto Sans Japanese Bold"; font-size: 1.5rem; line-height: 1.2; text-align: center; padding-bottom: .3rem; border-bottom: solid 1px #FFF; display: block; }
#program .program-column h3 span { font-family: "Noto Sans Japanese Regular"; font-size: 1rem; line-height: 1.2; text-align: center; padding-top: .2rem; display: block; }
#program .program-column h3 span i { font-size: 75%; line-height: 1.2; font-style: normal; }
#program ul li { padding-top: .6rem; }
#program ul li a { border-radius: 1rem; background: #FFF; box-shadow: 0 0 .5rem rgba(0,0,0,.3); display: block; cursor: pointer; }
#program ul li a:hover { box-shadow: 0 0 .3rem rgba(0,0,0,.6); }
#program ul li a dl { min-height: 7.5rem; padding: .8rem 1rem 4rem 1rem; border-radius: 1rem; box-shadow: 0 0 .2rem rgba(0,0,0,.5) inset; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; transition: .3s; }
/*
#program ul li a dl::before { content: ""; width: 1.8rem; height: calc(100% - 4px); background: rgba(0,68,170,.6); border-radius: 0 calc(1rem - 1px) calc(1rem - 1px) 0; display: block; position: absolute; top: 2px; right: 2px; transition: .3s; }
#program ul li a:hover dl::before { background: rgba(0,68,170,1); }
#program ul li a dl::after { content: ""; width: .8rem; height: 1.2rem; background: #FFF; clip-path: polygon(0 0,100% 50%,0 100%); display: block; position: absolute; top: 50%; right: calc(.5rem + 2px); transform: translateY(-50%); transition: .3s; }
#program ul li a:hover dl::after { background: #FF0; }
*/
#program ul li a:hover dl { background: rgba(0,68,170,.1); box-shadow: 0 0 .5rem rgba(0,68,170,1) inset; }
#program ul li a dl dt { text-align: center; margin: 0 auto; padding-bottom: .6rem; }
#program ul li a dl dt img { width: 70%; mix-blend-mode: multiply; }
#program ul li a dl dd h4 { font-family: "Noto Sans Japanese SemiBold"; font-size: 1.2rem; line-height: 1.2; text-align: center; color: #04A; padding-bottom: .3rem; }
#program ul li a dl dd p { font-size: .9rem; line-height: 1.3; text-align: center; color: #333; }
#program ul li a dl dd.regist-box { width: 94%; height: 3rem; border-top: solid 1px #CCC; display: flex; align-items: center; justify-content: center; position: absolute; bottom: 0;
	ul { display: flex; align-items: center; justify-content: center;
		li { font-size: .9rem; line-height: 1.2; text-align: center; width: 10rem; padding: .4rem; border-radius: 0 .5rem .5rem 0; }
		li:first-child { color: #04A; background: rgba(0,68,170,.3); border-right: solid 1px #FFF; border-radius: .5rem 0 0 .5rem; transition: .3s; }
		li.empty { color: #04A; background: #FFF; box-shadow: 0 0 1px rgba(0,68,170,1) inset; transition: .3s; }
		li.few { color: #FFF; background: #F82; transition: .3s; }
		li.full { color: #FFF; background: #C00; transition: .3s; }
	}
	ul.status-empty {
		li.few, li.full { display: none; visibility: hidden; }
	}
	ul.status-few {
		li.empty, li.full { display: none; visibility: hidden; }
	}
	ul.status-full {
		li:first-child span { display: none; visibility: hidden; }
		li.empty, li.few { display: none; visibility: hidden; }
	}
}
#program ul li a:hover dl dd.regist-box {
	ul {
		li:first-child { color: #FFF; background: rgba(0,68,170,1); }
		li.empty { color: #FFF; background: #04A; box-shadow: none; }
	}
}
#program .attention { font-size: .9rem; line-height: 1.4; text-align: center; text-indent: -1em; color: #FFF; width: calc(100% - 1em); padding-left: 1em; }
#adjacent { width: 100%; margin-top: 1.5rem; padding: 2px; border-radius: 1rem; background: rgba(255,255,255,.8); display: flex; align-items: stretch; justify-content: space-between; }
#adjacent dt { font-size: 1rem; line-height: 1.2; color: #FFF; width: 7rem; border-radius: calc(1rem - 2px); background: #F63; display: flex; align-items: center; justify-content: center; }
#adjacent dd { width: calc(100% - 8rem); padding: .4rem .5rem; }
#adjacent dd p { font-size: .9rem; line-height: 1.4; text-align: justify; }
@media only screen and (max-width: 1100px) and (orientation: portrait) {
	#program ul li a dl { min-height: 11svw; padding: .5rem .8rem 4rem .8rem;  }
	#program ul li a dl dd h4 { font-size: 1.7svw; line-height: 1.2; }
	#program ul li a dl dd p { font-size: 1.3svw; line-height: 1.3; }
}
@media only screen and (max-width: 980px) {
	#program ul li a dl dd.regist-box ul li { font-size: 2svw; line-height: 1.2; width: 9.5em; }
}
@media only screen and (max-width: 520px) and (orientation: portrait) {
	#program .inner-box { flex-direction: column; }
	#program .program-column { width: 100%; padding-bottom: 1.2rem; }
	#program #program1 { padding-top: 1rem; }
	#program ul li a dl { min-height: auto; padding: .4rem .6rem 4rem .6rem; }
	#program ul li a dl dt { width: 90%; padding-bottom: .4rem; }
	#program ul li a dl dd h4 { font-size: 3.6svw; line-height: 1.4; }
	#program ul li a dl dd p { font-size: 2.8svw; line-height: 1.3; }
	#program ul li a dl dd.regist-box ul li { font-size: 3.6svw; line-height: 1.2; }
	#program .attention { font-size: .8rem; line-height: 1.4; text-align: justify; }
	#adjacent { margin-top: 1rem; flex-direction: column; }
	#adjacent dt { width: 100%; padding: .4rem 0; }
	#adjacent dd { width: calc(100% - 1rem); }
}


/* ----- Overview ----- */
#overview { padding: 1.2rem 0 2rem 0;
	.inner-box { padding-top: 1rem; }
}
#overview ul { }
#overview ul li { font-size: 1rem; line-height: 1.4; padding: .6rem 0 .6rem 4rem; border-bottom: dotted 1px #999; position: relative; }
#overview ul li:last-child { border-bottom: none; }
#overview ul li h4 { font-weight: normal; color: #04A; position: absolute; left: 0; }
#overview ul li .attention { font-size: .8rem; line-height: 1.4; text-indent: -1em; padding: .2em 0 0 1em; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
	#overview ul li { padding: 0 0 .8rem 0; border-bottom: none; }
	#overview ul li:last-child { padding-bottom: 0; }
	#overview ul li h4 { margin-bottom: .3rem; padding: .3rem; background: rgba(0,68,170,.3); background: linear-gradient(90deg, rgba(0,68,170,.3) 50%, rgba(0,68,170,0) 100%); display: block; position: relative; }
	#overview ul li span::before { content: "\A"; white-space: pre; }
}


/* ----- FAQ ----- */
#faq { padding: 1.2rem 0 2rem 0; background: #DEDEDE;
	.inner-box { padding-top: 1rem; }
}
#faq-column1 { padding-bottom: 2rem; }
#faq h3 { font-family: "Noto Sans Japanese Bold"; font-size: 1.2rem; line-height: 1.2; text-align: center; color: #FFF; margin-bottom: .3em; padding: .2em 0; background: #999; }
#faq ul li { border-bottom: dotted 1px #999; }
#faq ul li:last-child { border-bottom: none; }
#faq dl { padding: .8rem 0; }
#faq dl dt.question { font-family: "Noto Sans Japanese SemiBold"; font-size: 1.2rem; line-height: 1.3; color: #04A; min-height: 3.2rem; padding: 0 2.8rem; display: flex; align-items: center; position: relative; transition: .3s; }
#faq dl dt.question::before { content: "Q"; font-family: "Cabin", sans-serif; font-optical-sizing: auto; font-weight: Bold; font-style: normal; font-variation-settings: "wdth" 700; font-size: 1.45rem; line-height: 1.3rem; text-align: center; color: #FFF; width: 2rem; height: 2rem; border-radius: 50%; background: #04A; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: .2rem; transform: translateY(-50%); transition: .3s; }
#faq dl dt.question::after { content: ""; width: .8em; height: .8em; border-right: solid 1px #999; border-bottom: solid 1px #999; display: block; position: absolute; top: 50%; right: 1em; transform: translateY(-70%) rotate(45deg); transition: transform .3s ease-in-out, top .3s ease-in-out; }
#faq dl dt.question.active::after { transform: rotate(-135deg); }
#faq dl dt.question:hover { color: #37E; cursor: pointer; }
#faq dl dt.question:hover::before { background: #37E; }
#faq dl dd.answer { font-size: 1rem; line-height: 1.4; padding: .5rem 0 .2rem 2.8rem; position: relative; display: none; }
#faq dl dd.answer::before { content: "A"; font-family: "Cabin", sans-serif; font-optical-sizing: auto; font-weight: Bold; font-style: normal; font-variation-settings: "wdth" 700; font-size: 1.45rem; line-height: 1.3rem; text-align: center; color: #FFF; width: 2rem; height: 2rem; border-radius: 50%; background: #666; display: flex; align-items: center; justify-content: center; position: absolute; top: .3rem; left: .2rem; }
#faq dl dd.answer p { line-height: 1.6; text-align: justify; }
#faq dl dd.answer h3 { padding-top: .8em; }
#faq dl dd.answer dl { padding: .8rem 0 0 0; }
#faq dl dd.answer dl dd ul li { line-height: 1.2; text-align: justify; text-indent: -1em; padding: .2em 0 0 1em; border-bottom: none; }
#faq dl dd.answer ol { padding-top: .4em; }
#faq dl dd.answer ol li { line-height: 1.4; text-align: justify; text-indent: -1em; padding: .4em 0 0 1em; border-bottom: none; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
	#faq dl dd.answer p { line-height: 1.4; }
}


/* ----- Privacy ----- */
#privacy { padding: 1.2rem 0 2rem 0;
	.inner-box { padding-top: 1rem; }
}
#privacy h2 { font-size: 1.2rem; line-height: 1.2; font-weight: bold; text-align: center; color: #04A; padding-bottom: .8rem; }
#privacy p { font-size: .9rem; line-height: 1.6; text-align: justify; padding-bottom: .8rem; }
#privacy p a { color: #04A; }
#privacy p a:hover { color: #37E; }
#privacy p.attention { font-size: .8rem; line-height: 1.4; text-indent: -1em; padding: 0 0 0 1em; }


/* ----- Access ----- */
#access .inner-box { padding: 1rem 0; }
#access ul li { font-size: 1rem; line-height: 1.4; text-indent: -1em; padding: 0 0 .2em 1em; }
#access ul li span { color: #04A; }
#access .attention { font-size: .9rem; line-height: 1.4; text-indent: -1em; color: #C00; padding: .8em 0 0 1em; }
#access #map { width: 100%; height: 400px; margin-bottom: 1.2rem; }
#access #map iframe { width: 100%; height: 400px; }


/* ----- Footer ----- */
footer { width: 100%; position: absolute; bottom: 0; }
#footer-column { width: 100%; background: url("../images/common/blue_bg.jpg") no-repeat center center; background-size: cover; }
#footer-box { width: min(94%,1100px); height: 310px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
footer h2 { width: min(100%,500px); margin: 0 auto; }
footer .link-btn { width: 100%; padding: 1.2rem 0; }
footer .link-btn a { font-size: 1.2rem; line-height: 1.2; text-align: center; color: #04A; width: min(100%,260px); margin: 0 auto; padding: .5rem 0; border-radius: .5rem; background: rgba(255,255,255,.8); box-shadow: 0 0 .5rem rgba(0,0,0,.3); display: block; }
footer .link-btn a:hover { background: rgba(255,255,0,.8); box-shadow: 0 0 .3rem rgba(0,0,0,.6); }
footer p { font-size: 1rem; line-height: 1.4; text-align: center; color: #FFF; }
footer p a { color: #FFF; text-decoration: underline; }
footer p a:hover { color: #FF0; }
footer p.attention { font-size: .8rem; line-height: 1.4; margin-top: 1rem; }
footer ul#related { width: min(94%,800px); height: 120px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
footer ul#related li { width: 19%; /*width: 24%;*/ }
footer ul#related li a { width: calc(100% - 2rem); padding: .5rem 1rem; border-radius: .5rem; box-shadow: 0 0 .3rem rgba(0,0,0,.5); display: block; }
footer ul#related li a:hover { background: rgba(0,68,170,.15); }
footer ul#sns { height: 90px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background: #DCDCDC;}
footer ul#sns li { width: 60px; margin-right: 20px; }
footer ul#sns li:last-child { margin-right: 0; }
footer ul#sns li a:hover img { opacity: .8; }

footer ul#sponsored{
	width: min(94%, 800px);
    height: 90px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}
footer ul#sponsored li{
	width: 8.3%;
    height: 0;
    margin: 0 0 0.5% 0;
    padding-top: 8.2%;
    border-radius: .5rem;
    background: #FFF;
    box-shadow: 0 0 .5rem rgba(0, 0, 0, .3);
    position: relative;
}
footer ul#sponsored li a { display: block; }
footer ul#sponsored li a:hover { opacity: .6; }
footer ul#sponsored li img {
    width: 100%;
    border-radius: .5rem;
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: multiply;
}



@media only screen and (max-width: 520px) and (orientation: portrait) {
	footer { position: relative; }
	footer p { font-size: .9rem; line-height: 1.4; }
	footer ul#related { height: auto; padding: 4% 0; }
	footer ul#related li { width: 48%; }
	footer ul#related li:nth-child(n + 3) { margin-top: 4%; }
	footer ul#sns { height: 70px; }
	footer ul#sns li { width: 40px; margin-right: 15px; }
}


/* ----- Return Button ----- */
#returnbtn { width: 50px; height: 50px; position: fixed; bottom: 10px; right: 10px; z-index: 3; }
#returnbtn a img { opacity: .6; transition: .2s; }
#returnbtn a:hover img { opacity: .8; }
@media only screen and (max-width: 520px) {
	#returnbtn { right: 5px; }
}


/* ----- Modal Window ----- */
html.modalset { overflow: hidden; }
.modalwindow { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 9999; display: none; }
.modal-wrap { text-align: center; width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; overflow: -moz-scrollbars-none; }
.modal-wrap::-webkit-scrollbar { display: none; }
.modal-wrap:after { content: ''; width: 1px; height: 100%; vertical-align: middle; display: inline-block; }
.modal-background { width: 100%; height: 100%; background: rgba(0,0,0,.7); position: fixed; top: 0; left: 0; }
.modal-box { width: min(85%,900px); vertical-align: middle; background: #FFF; display: inline-block; position: relative; animation: modal-show 0.6s linear 0s; }
@keyframes modal-show {
	from { opacity: 0; }
	to { opacity: 1; }
}
.modal-box .inner-box { width: min(calc(100% - 2rem),calc(900px - 2rem)); height: min(calc(80svh - 5rem - 2rem),600px); padding: 1rem; overflow-y: auto; }

.modal-foot { width: 100%; height: 5rem; background: #04A; display: flex; align-items: center; }
.modal-foot ul { width: 94%; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.modal-foot ul li { font-size: 1.3rem; line-height: 1.2; width: min(48%,12rem); margin-right: 4%; }
.modal-foot ul li:last-child { margin-right: 0; }
.modal-foot ul li a { text-align: center; padding: .7rem 0; border-radius: .5rem; display: block; }
.modal-foot ul li a:hover { box-shadow: 0 0 .5rem rgba(255,255,255,.8); }
.modal-foot ul li a span { font-size: .8rem; line-height: 1.2; display: block; }
.modal-foot ul li.login-btn a { color: #04A; padding: .3rem 0; background: #FF0; }
.modal-foot ul li.login-btn a:hover { background: #FFF; }
.modal-foot ul li.apply-btn a { color: #04A; background: #FF0; }
.modal-foot ul li.apply-btn a:hover { color: #FFF; background: #E00; }
.modal-foot ul li.status-btn a { color: #04A; background: rgba(255,255,255,1); }
.modal-foot ul li.status-btn a:hover { color: #04A; background: rgba(255,255,255,.8); }
.modal-foot ul li.regist-btn { text-align: center; padding: .7rem 0; border-radius: .5rem; background: #FF0; background: linear-gradient(30deg,rgba(255,255,200,1) 0%,rgba(255,200,0,1) 100%);  }
.modal-foot ul li.cancel-btn a { color: #FFF; border: solid 1px #FFF; background: #999; }
.modal-foot ul li.cancel-btn a:hover { background: #BBB; }
.modal-box .modal-close { width: 44px; height: 44px; position: absolute; top: -50px; right: 0; cursor: pointer; }
.modal-box .modal-close ul { width: 100%; height: 100%; position: relative; }
.modal-box .modal-close ul li { width: 80%; height: 3px; background: #FFF; position: absolute; top: 50%; left: 50%; }
.modal-box .modal-close ul li:first-child { transform: translate(-50%,-50%) rotate(45deg); }
.modal-box .modal-close ul li:last-child { transform: translate(-50%,-50%) rotate(-45deg); }

.modal-box {
	h2 { font-family: "Noto Sans Japanese SemiBold"; font-size: 1.5rem; line-height: 1.2; color: #04A; padding-bottom: .8rem;
		strong { font-size: 80%; line-height: 1.2; text-align: center; letter-spacing: .5rem; color: #FFF; margin-bottom: .8rem; padding: .3rem 0 .3rem .5rem; background: #04A; display: block; }
	}
	.lecture-info { border-top: solid 1px #CCC; }
	.lecture-info li { font-size: 1rem; line-height: 1.4; padding: .4rem 0 .4rem 2rem; border-bottom: solid 1px #CCC; position: relative; }
	.lecture-info li i { line-height: 1.4; text-align: center; color: #999; width: 1.6rem; display: block; position: absolute; left: 0; }
	.lecture-info li span { font-size: 80%; line-height: 1.2; vertical-align: middle; }
	dl { width: 100%; }
	.lecture-info li.teacher span { padding-left: .8rem; }
	.lecture-detail { padding: 1.5rem 0;
		dl { display: flex; flex-direction: column; justify-content: space-between;
			dt { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.2rem;
				strong { width: 60%;
					a { display: block; cursor: pointer; }
					a:hover img { opacity: .8; }
					i { font-size: .8rem; line-height: 1.4; font-style: normal; font-weight: normal; text-align: center; text-indent: -1em; margin: 1rem auto 0 auto; padding-left: 1em; display: block; }
				}
				span { width: 36%; }
			}
			dd {
		 		p { font-size: 1rem; line-height: 1.7; text-align: justify; }
				p.no-justify { text-align: left; }
				dl { margin-top: 1rem; border: solid 1px #999; display: block;
					dt { line-height: 1.2; color: #FFF; width: calc(100% - 1rem); padding: .3rem .5rem; background: #999; }
					dd { font-size: .85rem; line-height: 1.5; text-align: justify; width: calc(100% - 1rem); padding: .3rem .5rem;
						dl { margin: 0; border: none; display: flex; flex-direction: row; justify-content: space-between;
							dt { width: 34%; padding: 0; background: none; }
							dd { width: 64%; font-size: 1rem; line-height: 1.5; text-align: justify; padding: 0; }
							dd.no-justify { line-height: 1.4; text-align: left; }
						}
					}
				}
			}
		}
	}
	#keynote-txt {
		dl { flex-direction: row-reverse; align-items: stretch; justify-content: space-between;
			dt { width: 40%; padding-bottom: 0; position: relative; overflow: hidden;
				img { position: absolute; top: 50%; transform: translateY(-50%); }
			}
			dd { width: 56%;
				dl {
					dt { width: calc(100% - 1rem); }
					dd { width: calc(100% - 1rem); padding: .3rem .5rem; }
				}
			}
		}
	}
}

@media only screen and (max-width: 768px) {
	.modal-box #keynote-txt dl dt img { top: 0; transform: translateY(0) !important; }
}
@media only screen and (max-width: 520px) and (orientation: portrait) {
	.modal-box .inner-box { height: calc(80svh - 5rem - 2rem); }
	.modal-box .lecture-detail { padding: 1rem 0;
		dl {
			dt { flex-direction: column; padding-bottom: 1rem;
				strong { width: 90%; padding-bottom: 1rem;
					i { width: 100%; }
				}
				span { width: 60%; }
			}
			dd {
				p { line-height: 1.5; }
				dl {
					dt { padding-bottom: .3rem; }
					dd { line-height: 1.3;
						dl { flex-direction: column;
							dt { width: 100%; }
							dd { width: 100%; font-size: .9rem; }
						}
					}
				}
			}
		}
	}
	.modal-box #keynote-txt {
		dl { flex-direction: column;
			dt { width: 100%; aspect-ratio: 1 / 1; margin-bottom: 1rem;
				img { position: absolute; top: 0; transform: translateY(-50%); }
			}
			dd { width: 100%;
				dl {
					dt { width: calc(100% - 1rem); aspect-ratio: auto; margin-bottom: 0; }
					dd { width: calc(100% - 1rem); }
				}
			}
		}
	}
}


/* Interface */
#mypage {
	article { width: min(94%,1100px); margin: 0 auto; padding: 1.2rem 0 2rem 0; }
	article#login {
		p { line-height: 1.6; text-align: center; }
		p.name { font-size: 1.2rem; line-height: 1.2; padding-bottom: 1rem; }
		#input-box { width: min(calc(100% - 4rem),calc(600px - 4rem)); margin: 2rem auto .5rem auto; padding: 2rem; background: #DEDEDE;
			ul {
				li { padding-bottom: 1rem;
					dl { display: flex; align-items: center; justify-content: space-between;
						dt { font-size: 1rem; line-height: 1.2; color: #FFF; width: 9.5rem; min-height: 2.2rem; padding: 0 .5rem; border: solid 1px #999; border-radius: .5rem 0 0 .5rem; background: #999; display: flex; align-items: center; justify-content: center; }
						dd { width: calc(100% - 9.5rem);
							input { font-size: 1rem; line-height: 1.2; width: calc(100% - .8rem); min-height: 2.2rem; margin: 0; padding: 0 .4rem; border: solid 1px #999; border-radius: 0 .5rem .5rem 0; display: flex; align-items: center; }
						}
					}
				}
			}
			#btn-box { padding-top: 1rem; display: flex; align-items: center; justify-content: space-between;
				#regist-link { line-height: 1.2;
					a { color: #C00;
						strong { font-weight: normal; padding-right: .8rem; position: relative; }
						strong::before { content: ""; width: .5rem; height: .5rem; border-top: solid 2px #C00; border-right: solid 2px #C00; position: absolute; top: 50%; right: .2rem; transform: translateY(-55%) rotate(45deg); transition: .3s; }
					}
					a:hover { color: #04A;
						strong::before { border-color: #04A; }
					}
				}
				input[type="button"] { font-size: 1rem; line-height: 1.2; text-align: center; color: #04A; width: 12rem; padding: .5em 0; border-style: none; border: solid 1px #04A; border-radius: .6em; background: #FFF; display: block; transition: .3s; cursor: pointer; }
				input[type="button"]:not(:disabled):hover { color: #FFF; background: #04A; }
			}
			.comp-btn { font-size: 1rem; line-height: 1.2;
				a { text-align: center; color: #04A; width: 12rem; margin: 0 auto; padding: .5em 0; border-style: none; border: solid 1px #04A; border-radius: .6em; background: #FFF; display: block; transition: .3s; cursor: pointer; }
				a:hover { color: #FFF; background: #04A; }
			}
		}
	}
	#page-title { width: 100%; height: 5rem; background: url("../images/common/blue_bg.jpg") no-repeat center center; background-size: cover; display: flex; align-items: center; justify-content: center;
		h2 { font-size: 1.5rem; line-height: 1.3; text-align: center; color: #FFF; }
		.name { font-size: 1.1rem; line-height: 1.4; }
	}
	#profile { margin-bottom: 1.2rem; padding: .8rem 1rem; border: solid 1px #999;
		dl { display: flex; align-items: stretch; justify-content: space-between;
			dt { font-size: .9rem; line-height: 1.2; width: 5rem; background: #DEDEDE; display: flex; align-items: center; justify-content: center; }
			dd { width: calc(100% - 5.5rem);
				ul li { font-size: .9rem; line-height: 1.3; word-break: break-all; padding: .4rem 0 .3rem 7rem; border-bottom: dotted 1px #999; position: relative;
					strong { font-weight: normal; position: absolute; left: 0; }
				}
				ul li:first-child { padding-top: 0; }
				ul li:last-child { padding-bottom: 0; border-bottom: none; }
			}
		}
	}
	.notes { line-height: 1.4; color: #C00; padding-bottom: .8rem; }
	.class-column { padding-bottom: 2rem;
		h3 { font-size: 1.1rem; line-break: 1.2; color: #04A; padding: .3rem .5rem; background: rgba(0,68,170,.3); }
		ul li { padding: .5rem; border-bottom: dotted 1px #999; display: flex; align-items: center; justify-content: space-between;
			dl { width: calc(100% - 7rem);
				a { display: block; cursor: pointer; }
				a dt { font-size: 1.2rem; line-height: 1.4; font-weight: bold; color: #04A; transition: .3s; }
				a:hover dt { color: #C00; }
				a dd { font-size: .9rem; line-height: 1.4; color: #333; padding-left: 1rem; position: relative; }
				a dd::before { content: ""; width: .5rem; height: .7rem; background: #CCC; clip-path: polygon(0 0,100% 50%,0 100%); position: absolute; top: .25rem; left: .2rem; }
			}
			.cancel-btn { width: 6rem;
				a { font-size: 1rem; line-height: 1.2; text-align: center; color: #FFF; padding: .5rem 0; border-radius: .5rem; background: #999; display: block; }
			}
		}
		ul li:last-child { border-bottom: none; }
	}
	.contact {
		h3 { line-height: 1.3; background: #DEDEDE; padding: .3rem .5rem; }
		h4 { font-size: 1.1rem; line-height: 1.3; font-weight: bold; padding: .8rem .5rem .3rem .5rem; }
		p { line-height: 1.4; padding: 0 0 .3rem .5rem; }
		p.attention { font-size: .8rem; line-height: 1.4; text-indent: -1em; color: #C00; padding-left: calc(1em + .5rem); }
	}
}
@media only screen and (max-width: 520px) {
	#mypage {
		article#login {
			p { text-align: justify; }
			#input-box { width: calc(100% - 2rem); margin: 1rem auto .5rem auto; padding: 1rem;
				ul li dl { flex-direction: column;
					dt { width: calc(100% - 2px); min-height: auto; padding: .3rem 0; border-radius: .5rem .5rem 0 0; }
					dd { width: 100%;
						input { width: calc(100% - .8rem - 2px); border-radius: 0 0 .5rem .5rem; }
					}
				}
				#btn-box input[type="button"] { width: 8rem; }
			}
		}
		#profile dl { flex-direction: column;
			dt { width: 100%; margin-bottom: .5rem; padding: .3rem 0; }
			dd { width: 100%; }
		}
		.class-column ul li { flex-direction: column;
			dl { width: 100%; }
			.cancel-btn { width: 100%; margin-top: .4rem; }
		}
	}
}