@charset "utf-8";

@media only screen and (max-width: 768px) {
	main {
		padding: 0;
	}
	.program {
		margin-bottom: 0;
		border: none;
	}
	.program tr {
		padding: 0 2vw;
	}
	.program tr th {
		position: sticky;
		top: 50px;
		padding: 15px 0 !important;
		font-size: 14px;
		line-height: 27px;
	}
	.program tr td {
		border-left: none;
		padding: 20px 14px;
	}
	.program tr td span.code_area {
	  padding: 5px 10px;
	  width: 140px;
	  font-size: 12px;
	}
	.program .title {
		font-size: 14px;
		margin: 10px 0 6px;
	}
	.program .subtitle {
		font-size: 13px;
	}
	.program .speaker {
		font-size: 13px;
	}
	.program .flex-box.speaker .position {
		width: 100%;
		padding-right: 4px;
	}
	.program .flex-box.speaker .photo {
		width: 30%;
		max-width: 115px;
	}
	.program .flex-box.speaker .photo img {
		width: 100%;
	}
	.program tr td .download {
		margin: 20px 0;
	}
	.program tr td .download a {
		margin: 0 auto;
	}
	.program .flex-box.speaker {
		flex-wrap: wrap;
		gap: 10px 0;
	}
	.program tr td .time.lower {
		font-size: 14px;
	}
	.program tr td .code .session-code {
		font-size: 14px;
		margin: 5px 0;
	}
	.program .code {
		padding: 0 10px;
		font-size: 12px;
	}

	#online-session tr {
		display: flex;
		flex-direction: column;
	}
	#online-session tr td,
	#exhibition-session tr td {
		padding: 10px 14px;
		margin: 0 !important;
	}

	#keynote-session tr {
		/*display: flex;*/
		/*flex-direction: column;*/
		grid-template-columns: 20% 1fr;
		margin-bottom: 10px;
	}
	#keynote-session tr:nth-child(2) {
		grid-template-columns: 20% 1fr;
	}
	#keynote-session tr:nth-child(2) td:nth-child(3) .select .time,
	#keynote-session tr:nth-child(2) td:nth-child(4) .select .time,
	#keynote-session tr:nth-child(2) td:nth-child(5) .select  .time{
		display: none;
	}
	#keynote-session tr td,
	#reception tr td {
		margin-left: 7px;
	}
	
	#keynote-session tr td:first-of-type {
		padding: 10px 14px;
		border-left: none;
		border-right: none;
		border-bottom: none;
	}
	#keynote-session tr td:first-of-type .title {
		margin: 0;
	}
	#keynote-session tr td .program-container {
		flex-wrap: wrap;
		gap: 10px;
		flex-direction: column;
	}
	#keynote-session tr td .time.upper {
		font-size: 14px;
		padding-bottom: 0;
	}
	#keynote-session tr td:first-of-type .content {
		padding: 10px 0;
	}
	#breakout-session tr th,
	#lunch-session tr th {
		width: inherit;
	}
	#breakout-session tr,
	#lunch-session tr {
		display: grid;
		grid-template-columns: 1fr 4fr; 
		gap: 10px;
		width: 100%;
	}
	#lunch-session tr  td + td,
	#breakout-session tr  td + td {
	  margin-left: 0px;
	}
	#keynote-session tr th.time-line,
	#breakout-session tr th.time-line,
	#lunch-session tr th.time-line,
	#keynote-session2 tr th.time-line,
	#reception  tr th.time-line {
		/*grid-row: 1 / span 2; */
		/*grid-column: 1;*/
		justify-content: flex-start;
        grid-row: 1 / 2;
        grid-column: 1;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
	}
	#breakout-session tr td:nth-of-type(1),
	#lunch-session tr td:nth-of-type(1) {
		grid-row: 1;
		grid-column: 2 / span 2; 
	}
	#breakout-session tr td:nth-of-type(2),
	#lunch-session tr td:nth-of-type(2) {
		grid-row: 2;
		grid-column: 2 / span 2; 
	}
	#breakout-session tr td:nth-of-type(2) {
		margin: 0;
	}
	#reception tr {
		/*display: flex;*/
		/*flex-direction: column;*/
		grid-template-columns: 20% 1fr;
	}
	#keynote-session2 tr {
		/*display: flex;*/
		/*flex-direction: column;*/
		grid-template-columns: 20% 1fr;
		margin-bottom: 10px;
	}
	#keynote-session2 tr td,
	#reception tr td {
		margin-left: 7px;
	}
	
	#keynote-session2 tr td:first-of-type {
		padding: 10px 14px;
		border-left: none;
		border-right: none;
		border-bottom: none;
	}
	#keynote-session2 tr td:first-of-type .title {
		margin: 0;
	}
	#keynote-session2 tr td:first-of-type .program-container {
		flex-wrap: wrap;
	}
	#keynote-session2 tr td .time.upper {
		font-size: 14px;
		padding-bottom: 0;
	}
	#keynote-session2 tr td:first-of-type .content {
		padding: 10px 0;
	}
	#keynote-session .program .download a {
		margin: 20px auto 0;
	}
	#keynote-session2 .program .download a {
		margin: 20px auto 0;
	}
	ul.notice {
		padding: 0 2vw;
	}
	ul.notice li {
	    font-size: 11px;
	}
	form .program .code input[type="radio"] + label {
		background-position: 0 7px, 0 2px;
	}
}