@charset "utf-8";

@media only screen and (max-width: 768px) {
	header div.title {
		min-width: 100% !important;
		padding-top: 50px;
		height: 470px;
		overflow: inherit;
	}
	header div.title .background {
		background: url('../../images/common/main_visual_sp.jpg') center top/cover no-repeat;
		opacity: 1;
		transform: translateY(0px);
		animation: none;
	}
	header div.title .tagline {
		font-size: 19px;
		margin: 30px auto 0;
	}
	header div.title h1 {
		font-size: 16px;
		padding: 35px 15px;
		max-width: 70%;
		height: 135px;
		bottom: -90px;
		left: 0;
		right: 0;
		margin: auto;
		background-size: contain;
		width: 270px;
	}
	header div.title .balloon{
		display: block;
		content: "";
		width: 85%;
		height: 166px;
		background: url(../../images/common/h1_bg_sp_balloon.png) no-repeat top center/contain;
		position: absolute;
		bottom: -60px;
		z-index: 3;
		left: 0;
		right: 0;
		margin: auto;
	}
	header div.title h1 .txt01 {
		font-size: 16px;
		margin: 0 0 5px;
	}
	header div.title h1 .txt01 em {
		font-size: 22px;
	}
	header div.title h1 .txt01 .txt02 {
		font-size: 14px;
	}
	header div.title h1 .linkbtn {
		font-size: 16px;
		padding: 10px 0;
		font-feature-settings: "palt";
	}
	header div.title h1 .linkbtn::after {
		width: 20px;
		height: 20px;
		right: 5px;
	}
	header div.title .subtitle {
		font-size: 18px;
	}
	header div.title .info {
		font-size: 16px;
		margin: 10px auto 30px;
	}
	header div.title .info span {
		display: block;
		margin: 6px auto 0;
	}

	h3 {
		font-size: 22px;
		margin-bottom: 40px;
	}
	h3:before {
		top: 30px;
		width: 140px;
	}
	h3 > span {
		font-size: 14px;
		margin-top: 20px;
	}

	.all-wrap {
		margin-top: 0;
		padding-top: 0;
	}

	/* for fixed nav */
	#greeting::before,
	#outline::before,
	#topics::before,
	#live::before,
	#faq::before {
		height: 0;
		margin-top: 0;
	}
	/* special */
	#special {
		padding: 110px 0 40px;
	}
	#special .speaker_list {
	  gap: 20px;
	} 
	#special .speaker_list li {
	  width: 40%;
	  min-height: auto;
	  padding-top: 150px;
	}
	#special .speaker_list li .outer-frame {
		width: 140px;
		height: 140px;
	    top: 0;
	}
	
	#special .speaker_list li .inner-frame {
	  width: 140px;
	  height: 140px;
	}
	
	#special .speaker_list li .dot-border {
	  width: 135px;
	  height: 135px;
	  border: 2px dotted var(--blue);
	  overflow: hidden;
	  padding: 1px;
	}
	#special .speaker_list li .category {
		border-radius: 5px;
		padding: 5px 0;
		font-size: 13px;
	}
	#special .speaker_list li .name {
		font-size: 16px;
		margin: 0 0 5px;
	}
	#special .speaker_list li .position {
		font-size: 13px;
	}
	
	/* supporter */
	#supporter {
		padding: 20px 0;
	}
	#supporter h2 {
		font-size: 18px;
		line-height: 1.4;
	}
	#supporter h2 span {
		font-size: 15px;
	}
	.d-demo__list {
		gap:15px;
	}
	
	.d-demo__list-left{
		animation :infinity-scroll-left 30s infinite linear 0.5s both;
		margin-left: 30px;
	}
	
	.d-demo__item {
		width: calc(100vw / 4);
		height: 90px;
	}


	/* message */
	#message {
		width: 100%;
		padding: 40px 5px 0;
	}
	#message p {
		line-height: 1.6;
		width: 95%;
		max-width: 100%;
		font-size: 13px;
		margin: 20px auto;
	}
	#message h2 {
		font-size: 28px;
	}
	#message h2 span {
		font-size: 18px;
	}
	#message h3 {
		padding: 0px 10px 3px 10px;
		font-size: 28px;
		margin: 20px 0;
	}
	#message .img {
		position: relative;
		left: 0;
		right: 0;
		margin: auto;
		width: 40%;
		bottom: 0px;
	}
	#message .img  img {
		width: 100%;
		height: auto;
	}

	/* greeting */
	#greeting {
		width: 90%;
		min-width: 90%;
		margin: 0 auto;
		padding: 40px 0 20px;
	}
	#greeting p {
		font-size: 13px;
		line-height: 1.8;
	}

	/* outline */
	#outline {
		min-width: 100%;
		padding: 200px 0 65px;
	}
	#outline {
		min-width: 100%;
		padding: 40px 0;
	}
	#outline .gate {
		background: none;
		height: 100%;
	}
	#outline .gate img.sp {
		display: block;
	}
	#outline .gate img.pc {
		display: none;
	}
	#outline .wrap {
		width: 94%;
		padding: 0 0 30px;
	}
	#outline h2 {
		margin: 10% 0 28%;
		font-size: 28px;
	}
	#outline h2 span {
		font-size: 18px;
		margin: 10px 0 0;
	}
	#outline table {
		width: 95%;
	}
	#outline table tr th {
		width: 30%;
		padding: 12px 0 12px 10px;
		font-size: 13px;
	}
	#outline table tr td {
		font-size: 13px;
		padding: 12px 0;
	}
	#outline table tr:first-child td {
		border-top: none;
	}
	#outline:after {
		display: none;
	}
	/* access */
	#access {
		padding: 20px 0 40px;
	}
	#access h2 {
		font-size: 28px;
	}
	#access h2 span {
		font-size: 18px;
	}
	#access p {
		font-size: 13px;
		line-height: 1.6;
	}
	#access ul {
		width: 95%;
		max-width: 95%;
	}
	#access ul li {
		width: 100%;
		font-size: 13px;
		font-weight: 400;
		line-height: 1.6;
	}
	#access .map {
		width: 95%;
		height: 180px;
		margin: 10px auto 0;
		max-width: 95%;
	}
	#access .map iframe {
		width: 100%;
		height: 180px;
	}
	/* topics */
	#topics {
		padding: 20px 0 100px;
	}
	#topics:after{
		content: "";
		width: 100%;
		height: 185px;
		background: url(../../images/common/headline_bg_sp.png) no-repeat bottom center/contain;
	}
	#topics .wrap {
		padding: 0 0 30px;
	}
	#topics h2 {
		margin: 20px 0 40px;
		font-size: 28px;
	}
	#topics h2 span {
		font-size: 18px;
	}
	#topics h2.voice {
		margin: 40px 0 20px;
	}
	ul.topics {
		gap: 20px;
	}
	ul.topics li {
		width: 95%;
		max-width: 100%;
		padding: 10px;
	}
	ul.topics li h3 {
		font-size: 16px;
		margin-bottom: 10px;
	}
	ul.topics li .description {
		padding: 5px 5px;
		font-size: 13px;
	}
	ul.topics li p {
		font-size: 13px;
		min-height: auto;
	}
	ul.topics li div.linkbtn {
		margin: 10px auto 0;
		font-size: 13px;
	}
	#topics p.text01 {
		font-size: 13px;
		line-height: 1.6;
		margin: 0 0 10px;
	}
	#topics p.text01 span.number {
		font-size: 18px;
	}
	#topics p.text01 span.small {
		font-size: 11px;
	}
	#topics ul.voice_list {
		width: 100%;
		gap: 15px;
	}
	#topics ul.voice_list li {
		padding: 10px;
		border-radius: 10px;
		font-size: 11px;
		width: 60%;
		border: 3px solid var(--blue);
	}
	#topics ul.voice_list li:nth-child(1):before,
	#topics ul.voice_list li:nth-child(3):before{
	  top: 55%;
	    left: -20px;
	    margin-top: -15px;
	    border: 10px solid transparent;
	    border-right-width: 10px;
	    border-right: 10px solid var(--blue);
	}
	#topics ul.voice_list li:nth-child(2):before,
	#topics ul.voice_list li:nth-child(4):before{
	  top: 55%;
	  left: 100%;
	  margin-top: -15px;
	  border: 10px solid transparent;
	  border-left: 10px solid var(--blue);
	}
	#topics ul.voice_list li:nth-child(1):after {
		content: "";
		width: 45px;
		height: 45px;
		left: -60px;
	}
	#topics ul.voice_list li:nth-child(2):after {
		content: "";
		width: 45px;
		height: 45px;
		right: -60px;
	}
	#topics ul.voice_list li:nth-child(3):after {
		content: "";
		width: 45px;
		height: 45px;
		left: -60px;
	}
	#topics ul.voice_list li:nth-child(4):after {
		content: "";
		width: 45px;
		height: 45px;
		right: -60px;
	}
	.voice_photo {
		width: 95%;
		max-width: 100%;
		margin: 20px auto 0;
		padding: 10px;
	}
	.voice_photo ul {
		gap: 10px;
		flex-wrap: wrap;
	}
	.voice_photo ul li {
		width: 45%;
	}

	/* live */
	#program {
		padding: 40px 10px;
		min-width: 90%;
	}
	#program .wrap .title-container {
		padding: 40px 0 40px;
		min-width: 90%;
	}

	/* live tab-menu */
	#program .tab-menu-wrapper {
		overflow-x: auto;
	}
	#program .tab-menu-container {
		margin: 0;
		justify-content: flex-start;
		overflow: visible;
		width: 100%;
	}
	#program .tab-menu-container li {
		min-width: 40%;
		flex-shrink: 0;
		flex-grow: 2;
	}
	#program .tab-menu-container li a:hover {
		border: 2px solid #fff;
	}
	#program .tab-menu-container li.selected a {
		border: 2px solid #555;
	}

	/* faq */
	.faq_btn {
		width: 80%;
		height: 70px;
		margin: 30px auto 15px;
	}
	.faq_btn a {
		font-size: 22px;
		line-height: 70px;
	}
	.faq_txt {
		font-size: 14px;
		text-align: center;
		color: var(--black);
		line-height: 1.6;
		margin: 0;
	}
	.faq_btn a:hover {
		text-decoration: none;
		opacity: 0.7;
	}
	#faq .wrap {
		width: 94%;
		padding: 40px 0 30px;
	}
	#faq .faq_list {
		padding: 0;
	}
	#faq .faq_list .faq_item {
		padding: 0;
	}
	#faq .faq_list .faq_item p {
		font-size: 16px;
	}
	/* fast series */
	#fastseries {
		padding: 40px 0;
	}
	#fastseries .logo {
		width: 70%;
		margin: 20px auto;
		max-width: 65%;
	}
	#fastseries p {
		font-size: 16px;
		color: #009dfe;
	}
	#fastseries p.txt01 {
		font-size: 13px;
	}
	#fastseries .ship {
		position: relative;
		width: 30%;
		bottom: -40px;
		right: 0;
		left: 0;
		margin: auto;
	}


	/* register */
	div.register {
		padding: 50px 0;
	}
	div.register a.box-button {
		width: 60%;
		font-size: 22px;
		padding: 12px 0;
	}
	/* sponsor */
	#sponsor {
		padding: 40px 0;
	}
	#sponsor .box {
		padding: 10px;
		width: 95%;
		border-radius: 20px;
		margin: 0 auto 30px;
	}
	#sponsor .ribbon {
	  display: inline-block;
	  position: relative;
	  height: 45px;
	  text-align: center;
	  box-sizing: border-box;
	  width: 70%;
	}
	
	#sponsor .ribbon::before {
	  content: '';
	  position: absolute;
	  width: 10px;
	  bottom: -10px;
	  left: -26px;
	  z-index: 1;
	  border: 20px solid var(--blue);
	  border-left-color: transparent;
	}
	
	#sponsor .ribbon::after {
	  content: '';
	  position: absolute;
	  width: 10px;
	  bottom: -10px;
	  right: -26px;
	  z-index: 1;
	  border: 20px solid var(--blue);
	  border-right-color: transparent;
	}
	
	#sponsor .ribbon h3 {
	  width: 100%;
	  padding: 0 10px;
	  line-height: 45px;
	  font-size: 13px;
	}
	
	#sponsor .ribbon h3::before {
	  width: auto;
	}
	
	#sponsor .ribbon h3::after {
	  position: absolute;
	  content: '';
	  top: 100%;
	  right: 0;
	  border: none;
	  border-bottom: solid 10px transparent;
	  border-left: solid 15px #002796;
	}
	
	#sponsor ul.sponsor_list {
		gap: 60px 30px;
		margin: 30px 0;
	}
	#sponsor ul.sponsor_list li {
		width: 40%;
	}
	#sponsor ul.sponsor_list.media li{
		width: 30%;
	}
	#sponsor ul.sponsor_list.cooperate li{
		width: 30%;
	}
	#sponsor ul.sponsor_list.fast li{
		width: 43%;
	}

}

@media only screen and (max-width: 480px) {
	header div.title {
		height: 300px;
	}
	header div.title .balloon{
		height: 135px;
		width: 100%;
		background-size: cover;
	}
	#outline h2 {
		margin: 20px 0 70px;
	}	
}