@charset "utf-8";

/* =====================================================
   ヘッダー
===================================================== */
@media screen and (max-width: 864px) {
	#header nav {
		height: 35px;
	}
	#header nav ul {
		height: 35px;
	}
	#header nav ul li {
		padding: 0 1em;
		line-height: 35px;
	}
	#header nav ul li:first-child {
		border-left: 0px !important;
	}
	#header nav ul li:last-child {
		border-right: 0px !important;
	}
	#header nav ul li a span {
		display: none;
	}
	#header nav ul li.hloverview a::before,
	#header nav ul li.hlprogram a::before,
	#header nav ul li.hlentry a::before {
		width: 16px;
		height: 16px;
	}
	#header h1{
		width: 100%;
	}
	#header img {
		max-width: 100%;
	}
	#header.image h1 {
		padding: 35px 0 0 0;
	}
}

/* =====================================================
   日時会場情報
===================================================== */
@media screen and (max-width: 680px) {
	.date-info{
		padding: 15px 15px;
	}
	.date-info .date-inner {
		max-width: 836px;
		display: block;
	}
	.date-info .date-inner div{
		max-width: 100%;
		margin:  0 0;
	}
	.date-info p.didate{
		font-size: 1.4rem;
	}
	.date-info p.didate span{
		font-size: 2.0rem;
	}
	.date-info p.didate span.diweek{
		font-size: 1.6rem;
	}
	.date-info .divenue{
		font-size: 1.4rem;
		margin-bottom: 6px;
	}
	.date-info .divenue dt{
		width: auto;
	}
	.date-info .difee {
		display: flex;
		align-items: center;
	}
	.date-info .difee dt {
		width: 8em;
		font-size: 1.2rem;
		line-height: 1;
		padding: 5px 5px;
		margin-right: 10px;
	}
	.date-info .difee dd{
		font-size: 1.4rem;
		text-align: left;
		margin-bottom: 0;
	}
	.date-info .difee dd .difee-price{
		font-size: 1.8rem;
	}
}
@media screen and (max-width: 480px) {
	.date-info p.didate {
		font-size: 1.3rem;
		margin: 0 0 3px 0;
	}
	.date-info p.didate span {
		font-size: 1.7rem;
	}
	.date-info p.didate span.diweek {
		font-size: 1.3rem;
	}
	.date-info .divenue{
		font-size: 1.3rem;
		margin-bottom: 0;
	}
	.date-info .difee dt{
		font-size: 1.1rem;
	}
	.date-info .difee dd{
		font-size: 1.3rem;
	}
	.date-info .difee dd .difee-price{
		font-size: 1.6rem;
	}
}

/* =====================================================
   リード
===================================================== */
@media screen and (max-width: 864px) {
	.lead {
		width: calc(100% -30px);
		padding: 0 15px;
	}
	.lead p.catch {
		font-size: 1.7rem;
		line-height: 1.4;
	}
}
@media screen and (max-width: 480px) {
	.lead p.catch {
		font-size: 1.6rem;
	}
}

/* =====================================================
   セクション基本形
===================================================== */
@media screen and (max-width: 864px) {
	.contents {
		max-width: 100%;
		width: calc(100% - 40px);
		margin: 0 auto;
	}
}
@media screen and (max-width: 767px) {
	.contents .section > h2{
		font-size: 2.6rem;
	}
	.contents .pad{
		padding: 10px 0 0;
	}
}

/* =====================================================
   開催概要
===================================================== */
@media screen and (max-width: 767px) {
	.overview dl{
		display: block;
	}
	.overview dt {
		width: calc(100% - 30px);
		padding: 5px 15px;
		display: block;
		text-align: left;
		font-size: 1.3rem;
	}
	.overview dd{
		font-size: 1.3rem;
		line-height: 1.6;
	}
	.overview dd.date span{
		font-size: 1.8rem;
	}
	.overview dd .note{
		font-size: 1.2rem;
	}
}

/* =====================================================
   スポンサー
===================================================== */
@media screen and (max-width: 864px) {
	.sponsor {
		/*padding: 15px 0;*/
		
		padding: 0;
	}
	.overview .sponsor-list li{
		width: auto;
		/*max-width: 48%;*/
		
		max-width: 100%;
	}
}
@media screen and (max-width: 767px) {
	.overview .sponsor-list {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	.overview .sponsor-list li{
		max-width: 45%;
	}
	.sponsor-list li{
/*		width: 70%;
		max-width: 420px;
		margin: 15px 15px;*/
		
		width: 100%;
		max-width: 760px;
		margin:0;	
	}
	.sponsor-list.L li{
		width: 75%;
	}
	.sponsor-list.M li {
		width: 42%;
	}
	.sponsor-list.S li {
		width: 35%;
	}
	.sponsor-list.L li.short {
		width: 40%;
	}
	.sponsor-list.L li.long {
		width: 90%;
	}
	.sponsor-list.M li.short {
		width: 28%;
	}
	.sponsor-list.M li.long {
		width: 75%;
	}
	.sponsor-list.S li.short {
		width: 20%;
	}
	.sponsor-list.S li.long {
		width: 64%;
	}
}
@media screen and (max-width: 480px) {
	.overview .sponsor-list li,
	.sponsor-list li{
		width: 100%;
		max-width: 100%
	}
	.contents .sponsor h3,
	.sponsor-title{
		font-size: 1.4rem;
	}
	.contents .sponsor h3 span{
		font-size: 1.2rem;
	}
}

/* =====================================================
   プログラム
===================================================== */
@media screen and (max-width: 767px) {
	.program dt.time,
	.program.col01 dt.time {
		width: 100%;
	}
	.program dd:not(.col03 dd){
		padding: 10px 30px 15px;
	}
	.program dd .speakers{
		display: block;
		width: 100%;
	}
	.program dd .speaker,
	.program .speakers .speaker:nth-child(even){
		display: block;
		width: 100%;
		margin: 0 0;
		padding: 10px 0;
	}
	ul.panelist li, .mfp-content .detail ul.panelist li{
		width: calc(50% - 15px);
	}
	.program .detail-area .button,
	.program .speaker.psn01 .button {
		width: 100%;
		margin-left: 0;
	}
}
@media screen and (max-width: 640px) {
	/* .program dt.time,
	.program.col01 dt.time {
		width: 100%;
	} */
}
@media screen and (max-width: 480px) {
	.program dt.time span{
		font-size: 1.8rem;
	}
	.program dl{
		margin-bottom: 20px;
	}
	.program dd {
		padding: 10px 15px 15px;
	}
	.program dd.break {
		padding: 0 15px 0;
	}
	.program .speaker.emptdata, .program .break .speaker {
		margin: 10px 15px 0 0;
	}
	.program h3{
		font-size: 1.5rem;
	}
	.program dl h4{
		font-size: 1.4rem;
	}
	.program .speaker p.coposition{
		font-size: 1.3rem;
	}
	.program .speaker span.name{
		font-size: 1.5rem;
	}
	ul.panelist li, .mfp-content .detail ul.panelist li{
		width: 100%;
	}
	ul.panelist li p.photo,
	.mfp-content .detail ul.panelist li p.photo{
		float: left;
		margin: 5px 15px 0 0;
	}
	p.program-title{
		font-size: 1.8rem;
	}
}

/* =====================================================
   プログラム - 複数カラム
   テーマアイコン セッションアイコン
===================================================== */
@media screen and (max-width: 864px) {
	.tagList{
		margin: 10px auto 10px;
		flex-wrap: wrap;
	}
	.tagList li {
		flex-basis: calc(50% - 28px);
		margin: 0 0 5px 0px;
	}
}
@media screen and (max-width: 767px) {
	p.tag, .multi p.tag, .mfp-content .detail p.tag{
		display: inline-block;
		width: auto;
	}
}
@media screen and (max-width: 680px) {
	.multi {
		display: block;
		padding-bottom: 0;
	}
	.tagList{
		display: block;
	}
	.tagList li{
		width: auto;
		display: inline-block;
		padding: .7em 1em;
	}
	.multi dl{
		display: flex;
		margin-right: 0;
		margin-bottom: 40px;
	}
	.program .col03 dd {
		padding: 10px 30px 15px;
	}
}

/* =====================================================
   詳細ポップアップ（magnific-popup使用）
===================================================== */
@media screen and (max-width: 480px) {
	.mfp-content .detail ul.panelist{
		margin-bottom: 15px;
	}
	.mfp-content .detail p{
		font-size: 1.4rem;
	}
	.mfp-content .detail .speaker .name{
		font-size: 1.5rem;
	}
}

/* =====================================================
   申し込み
===================================================== */
@media screen and (max-width: 864px) {
	.fixed-btm .button-entry a{
		max-width: 90%;
	}
	.fixed-btm .button-entry input[type="submit"] ,	
	.checklist{
		width: calc(100% - 40px);
	}
}
@media screen and (max-width: 767px) {
	.annotation-panel .annotation-inner {
		margin: 1em 1.5em 1em;
	}
	.annotation-detail {
		padding: 5px 0 5px;
	}
	.fixed-btm .button-entry{
		padding: 0 0;
	}
	.fixed-btm .button-area{
		padding: 5px 10px 6px;
	}
	.button-entry a,
	.button-entry input[type="submit"]{
		width: 100%;
		padding: 1em 0;
		font-size: 1.6rem;
		margin: 10px auto 10px auto;
	}
	.checklist ul.program-date li{
		padding: 5px 10px;
	}
	.fixed-btm .button-entry input[type="submit"] {
		width: 100%;
	}
	/* お申し込みボタン2つ横並び */
	.button-entry.double .item{
		width: 100%;
	}
	.button-entry.double .item br{
		display: none;
	}
	.button-entry.double .item + .item a{
		margin: 0 auto 10px;
	}
}
/* インフォメーション */
@media screen and (max-width: 680px) {
	.info{
		padding: 20px 0px 10px;
	}
	.checklist{
		width: 100%;
		margin: 3px auto 4px;
	}
	.checklist p{
		line-height: 1.2;
	}
	ul.program-date li a{
		font-size: 1.6rem;
	}
	ul.program-date input[type="checkbox"]{
		margin: 7px 4px 7px 2px;
		width: 18px;
		height: 18px;
	}
	ul.program-date li .anc{
		position: relative;
		top: -2px;
		padding-left: 13px;
	}
	ul.program-date li .anc::before {
		width: 6px;
 		height: 6px;
	}
}
@media screen and (max-width: 480px) {
	.button-entry a,
	.button-entry input[type="submit"]{
		font-size: 1.4rem;
	}
	.checklist{		
		width: 95%;
	}
	ul.program-date{
		display: block;
	}
	ul.program-date li{
		width: calc(100% - 20px);
	}
	ul.program-date li + li{
		margin-top: 7px;
	}
}

/* =====================================================
   受付終了欄
===================================================== */
@media screen and (max-width: 680px) {
	.entry-close p{
		font-size: 1.4rem;
	}
	.program-date li.check-off a .status{
		/*【満席】表示*/
		position: relative;
		left: -5px;
		top: -2px;
		padding: 3px 4px 3px;
	}
	.program-date li.check-off a{
		/*【満席】表示*/
		font-size: 1.5rem;
	}
	p.close-text{
		padding: 0.825em 10px 0.27em;
	}
}

/* =====================================================
	お問い合わせ
===================================================== */
@media screen and (max-width: 680px) {
	.contents .section:last-child{
		padding: 10px 0 30px 0;
	}
	.inquiry{
		padding: 30px 15px 30px;
	}
	.inquiry p{
		line-height: 1.6;
	}
	.inquiry p span{
		margin-left: 0;
		display: block;
	}
	a.button-inquiry{
		font-size: 1.6rem;
	}
}
@media screen and (max-width: 480px) {
	.inquiry p{
		font-size: 1.4rem;
	}
	a.button-inquiry{
		width: 90%;
		font-size: 1.4rem;
	}
}

/* =====================================================
	フッター
===================================================== */
@media screen and (max-width: 767px) {
	#footer {
		padding-bottom: 30px;
	}
	#footer .logo_bp img{
		width: 160px;
		text-align: center;
	}
	#footer p:nth-child(2) {
		margin-top: 5px;
	}
}

/* =====================================================
	その他の要素
===================================================== */
/* 汎用ボックス */
@media screen and (max-width: 680px) {
	.contents .box{
		padding: 10px 15px;
	}
	.contents .box p{
		font-size: 1.3rem;
	}
	.contents .box2{
		padding: 15px 15px;
		font-size: 1.4rem;
	}
	p.box-title, p.box-title{
		font-size: 1.8rem;
		font-weight: bold;
	}
	.box-subtitle, p.box-subtitle{
		font-size: 1.7rem;
	}
}

/* 告知事項ボックス */
@media screen and (max-width: 680px) {
	.program-annotation-panel{
		padding: 10px 15px;
	}
	.program-annotation-panel p{
		font-size: 1.3rem;
	}
}

/* =====================================================
	臨時スタイル
===================================================== */
@media screen and (min-width: 768px){
	.pc{
		display: block;
	}
}
@media screen and (max-width: 767px) {/*767px以下*/	
	.pc{
		display: none;
	}
	.tab {
		display: block;
	}
}
@media screen and (min-width: 481px) and (max-width: 767px) {/*481px以上～767px以下*/
	.tab-only {
		display: block;
	}
}
@media screen and (max-width: 480px) {/*480px以下*/
	.sp,br.sp {
		display: block;
	}
}


/* 固定fixed-btmの上部*/
#footer{
	padding-bottom: 90px;
}
@media screen and (max-width: 480px){
	/*お申し込み checklist用padding調整*/
	#footer.checkafter{
		padding-bottom: 300px;
	}
	/*お申し込み multi用padding調整*/
	#footer.multiafter{
		padding-bottom: 200px;
	}
}