@charset "utf-8";
/***************************************************
information
  filename : seminar_parts.css;
***************************************************/

/******* セミナーパーツ設定 *******/

/* ** seminar_box start ** */

/*** セミナー詳細・概要表示エリア ***/
.SemDLBox,
.SemFLBox,
.SemURLBox {width:100%;margin: 0 auto;}

@media screen and (max-width: 600px) {
	.SemDLBox,
	.SemFLBox,
	.SemULBox {width:95%;}
}
.SemDLBox dl,
.SemFLBox dl,
.SemULBox dl {
	display: flex;
	margin: 0 auto;
	padding: 0;
	font-size: clamp(1.4rem, 1.4vw, 1.6rem);
	border-bottom: var(--app-BgBox-Kbrd); /* 要素仕切り共通ボーダー指定 */
	align-items: center;
}
.SemDLBox dt,
.SemFLBox dt,
.SemULBox dt {
	width: 25%;
	max-width: 130px;
	margin: 0;
	padding: 1.5rem;
	white-space:nowrap;
	font-weight: bold;
}
.SemDLBox dd,
.SemFLBox dd,
.SemULBox dd {
	width: 75%;
	padding: 1.5rem 0 1.5rem 2.0rem;
}
.SemDLBox .dlinner dt {width:100%;margin: 0;padding: 0.5rem 0;}
.SemDLBox .dlinner dd {width:100%;margin: 0;padding: 0.5rem 0;}
.SemDLBox dd img {max-width: 100%;}

/* 決済金額表示 */
.Amount .SemDLBox dl {font-weight: bold;}
.Amount .SemDLBox dd.name {
	font-size: var(--font-AmountName); /* 購入商品名 フォントサイズ */
}
.Amount .SemDLBox span.kinagakuTxt {
	font-size: var(--font-Amount); /* 決済金額 フォントサイズ */
	padding: 0 0.5rem 0 0;
}
@media screen and (max-width: 600px) {
	.SemDLBox dl {display: block;}
	.SemDLBox dt {width: 100%;padding: 1.5rem 1.0rem 0 1.0rem;}
	.SemDLBox dd {width: 100%;padding: 1.0rem;}
	.SemDLBox dl.spchkDl {display: flex;}
	.SemDLBox dl.spchkDl dt {width: 40%;padding: 1.0rem 0 0.5rem 0.8rem;}
	.SemDLBox dl.spchkDl dd {width: 60%;}
	.SemDLBox dl.spchkDl dd p.chpd {padding-left: 0;}
}
/*** セミナー詳細画面でのセミナー名・概要個別設置 ***/

/* セミナー詳細メインビジュアル */
.semVisualArea {margin: 0 auto 2.0rem auto;padding: 0;text-align: center;}
.semVisual {width: 100%;margin: 0 auto;padding: 0;text-align: center;}
.semVisual img {width: 100%;margin: 0 auto;}

/* メインタイトル */
h1.semTitle,
p.semTitle {
	margin: 0 auto;
	padding: 0 0 1.0rem 0;
	text-align: left;
	color: #000;
	font-size: clamp(2.0rem, 3.0vw, 3.5rem);
	line-height: 1.2em;
	background: inhelit;
}
/* ディスクリプション個別設置 */
.sem_description .DetDescription {
	margin: 0 auto;
	padding: 0;
	font-size: clamp(1.6rem, 1.8vw, 1.8rem);
	color: #000;
	backgrdound: inhelit;
}
/* 会場・住所個別設置 */
.sem_add .semAddArea {
	margin: 1.0rem auto;
	padding: 0.5rem 0;
	color: #000;
	backgrdound: inhelit;
}
.sem_add .semAddArea .DetVenue {
	padding: 0.5rem 0;
	font-size: clamp(1.6rem, 1.6vw, 1.8rem);
	font-weight: bold;
	line-height: 2.0;
	align-items: center;
}
.sem_add .semAddArea .DetAddress {
	font-size: clamp(1.4rem, 1.0vw, 1.4rem);
	font-weight: normal;
	line-height: 1.2;
}
/* 参加費用個別設置 */
.sem_pay .semPayArea {
	margin: 1.0rem auto;
	padding: 0;
	color: #000;
	backgrdound: inhelit;
}
.sem_pay dl.DetDlPay {
	display: flex;
	margin: 2.0rem auto;
	padding: 0;
	font-size: clamp(1.4rem, 1.0vw, 1.4rem);
	align-items: flex-end;
}
.sem_pay dl.DetDlPay dt {width: 20%;max-width: 100px;margin: 0;white-space:nowrap;}
.sem_pay dl.DetDlPay dd {width: 80%;padding: 0 0 0 0.5rem;}

.sem_pay dl.DetDlPay dd span.kinagakuTxt {
	font-size: clamp(2.0rem, 1.8vw, 2.5rem);
	font-weight: bold;
	padding: 0 1.0rem 0 0;
}
.sem_pay dl.DetDlPay dd span.payfree {color: #005bc7;}

/* 開催日程個別設置 */
.semDateArea dl.DetDlDate {
	display: flex;
	margin: 0 auto;
	padding: 0;
	color: #000;
	backgrdound: inhelit;
	font-size: clamp(1.4rem, 1.0vw, 1.4rem);
}
.semDateArea dl.DetDlDate dt {width: 20%;max-width: 100px;margin: 0;padding-top: 0;white-space:nowrap;}
.semDateArea dl.DetDlDate dd {width: 80%;padding: 0 0 0 0.5rem;font-weight: bold;}

.semDateArea .DetDlDate .dlinner {display: flex;margin: 0 auto;padding: 0.2rem 0;}
.semDateArea dl.DetDlDate .dlinner dt {width: 15%;margin: 0;padding-top: 0;white-space:nowrap;}
.semDateArea dl.DetDlDate .dlinner dd {width: 85%;padding: 0;}

@media screen and (max-width: 600px) {
	h1.semTitle,
	p.semTitle,
	.sem_description .DetDescription,
	.sem_add .semAddArea,
	.sem_pay .semPayArea,
	.semDateArea dl.DetDlDate {width: 85%;}
	.popup h1.semTitle,
	.popup p.semTitle,
	.popup .sem_description .DetDescription {width: 100%;}
}
/* セミナー詳細本文設置 */
.semDetailArea {margin: 0 auto;padding: 2.0rem 0;}
.semDetailOthArea {margin: 0 auto;padding: 2.0rem 0;}

/*** セミナー詳細画面での申し込み・購入ボタンボックス ***/

.SemBTBox {margin: 0;padding: 0 auto;}

/*** ボタン指定 ***/

/* 通常の申込みボタン */
.BtM .seminarOrdBt {
	margin: 1.0em auto;
	padding: 1.5rem;
	width: 60%;
	font-size: clamp(1.6rem, 1.4vw, 1.8rem);
	color: #fff;
	background: #171717;
	border: 1px solid #171717;
	box-shadow: none;
}
.BtM button.seminarOrdBt.next::after,
.BtM a.seminarOrdBt.next::after,
.BtM span.seminarOrdBt.next::after,
.BtM button.seminarOrdBt.back::after,
.BtM a.seminarOrdBt.back::after,
.BtM back.seminarOrdBt.next::after {border-left-color: #fff;}

/* キャンセル待ちでの申込みボタン */
.BtM .seminarCanBt {
	margin: 1.0em auto;
	padding: 1.5rem;
	width: 60%;
	font-size: clamp(1.6rem, 1.4vw, 1.8rem);
	color: #fff;
	background: #203065;
	border: 1px solid #203065;
	box-shadow: none;
}
.BtM button.seminarCanBt.next::after,
.BtM a.seminarCanBt.next::after,
.BtM span.seminarCanBt.next::after,
.BtM button.seminarCanBt.back::after,
.BtM a.seminarCanBt.back::after,
.BtM back.seminarCanBt.next::after {border-left-color:  #fff;}

/* マイページへの移動ボタン */
.BtM .seminarMypBt {
	margin: 1.0em auto;
	padding: 1.5rem;
	width: 60%;
	font-size: clamp(1.6rem, 1.4vw, 1.8rem);
	color: #171717;
	background: #fff;
	border: 1px solid #171717;
	box-shadow: none;
}
.BtM button.seminarMypBt.next::after,
.BtM a.seminarMypBt.next::after,
.BtM span.seminarMypBt.next::after,
.BtM button.seminarMypBt.back::after,
.BtM a.seminarMypBt.back::after,
.BtM back.seminarMypBt.next::after {border-left-color: #171717;}

@media screen and (max-width: 600px) {
	.BtM .seminarOrdBt,
	.BtM .seminarCanBt,
	.BtM .seminarMypBt {width: 85%;}
}
/* ** seminar_box end ** */