@charset "utf-8";

.block.first .blockContainer{
	padding-block:0;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	For SmartPhone
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

@media screen and (max-width:767px){
	.miniseminarBox{}
	.miniseminarBox .items{
		display:flex;
		flex-direction:column;
		justify-content:center;
		width:100%;
		padding:3% 1.5%;
		margin-top:8%;
		border-bottom:1px solid #ccc;
		color:#333;
	}
	.miniseminarBox .items:first-child{
		margin-top:0;
	}
	/* ------------------------------------ */
	.miniseminarBox .items .seminarTtl{
		font-weight:500;
		font-size:5.4vw;
		line-height:1.2;
	}
	.miniseminarBox .items .descTxt{
		margin-top:4%;
		font-size:3.5vw;
		line-height:1.3;
	}
	/* ------------------------------------ */
	.miniseminarBox .items .speakerBox{
		display:flex;
		align-items:center;
		padding-top:4%;
		/*margin-top:auto;*/
	}
	.miniseminarBox .items .speakerBox .imgBox{
		width:20vw;
		height:20vw;
		background:#aaa;
	}
	.miniseminarBox .items .speakerBox .txtBox{
		width:calc(100% - 20vw);
		padding-left:0.7em;
	}
	.miniseminarBox .items .speakerBox .txtBox .ttlTxt{
		font-size:3.2vw;
		line-height:1.3;
	}
	.miniseminarBox .items .speakerBox .txtBox .nameTxt{
		margin-top:2%;
		font-size:4.8vw;
	}
	.miniseminarBox .items .speakerBox .txtBox .nameTxt span{
		display:inline-block;
		font-size:3.5vw;
		padding-left:0.2em;
	}
	.miniseminarBox .items .btnBox{
		display:flex;
		justify-content:end;
		width:100%;
		margin-top:15px;
	}
	.miniseminarBox .items .btnBox > p{
		display:flex;
		justify-content:center;
		align-items:center;
		padding-inline:15%;
		padding-block:2%;
		color:#fff;
		font-size:3.5vw;
		background-color:var(--themeColorBlue);
		position:relative;
		border-radius:8px;

		transition:all 0.2s ease-in-out;
		transform:scale(1);
	}
	.miniseminarBox .items .btnBox > p::before{
		content:"\e315";
		font-family:"Material Symbols Outlined";
		font-size:clamp(1.0rem, 1.4vw, 1.4rem);
		display:block;
		position:absolute;
		right:-0.1em;
		top:50%;
		transform:translateY(-46%);
		font-variation-settings:'wght' 300;
	}

}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	For Desktop & Tablet
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* ///////////////////////////////////////////////////// */
/* ============================================ */
/* ------------------------------------ */

@media screen and (min-width:768px){
	.miniseminarBox{
		display:flex;
		flex-wrap:wrap;
	}
	.miniseminarBox .items{
		display:flex;
		flex-direction:column;
		justify-content:center;
		width:48%;
		padding:20px 10px;
		margin-top:50px;
		border-bottom:1px solid #ccc;
		color:#333;

		transition:all 0.2s ease-in-out;
		transform:scale(1);
		opacity:1;
	}
	.miniseminarBox .items:hover{
		transform:scale(1.02);
		opacity:0.7;
	}
	.miniseminarBox .items:nth-child(even){
		margin-left:4%;
	}
	.miniseminarBox .items:nth-child(-n+2){
		margin-top:0;
	}
	/* ------------------------------------ */
	.miniseminarBox .items .seminarTtl{
		font-weight:500;
		font-size:clamp(1.4rem, 1.8vw, 1.8rem);
		line-height:1.2;
	}
	.miniseminarBox .items .descTxt{
		margin-top:20px;
		font-size:clamp(0.8rem, 1.2vw, 1.2rem);
		line-height:1.3;
	}
	/* ------------------------------------ */
	.miniseminarBox .items .speakerBox{
		display:flex;
		align-items:center;
		padding-top:20px;
		margin-top:auto;
	}
	.miniseminarBox .items .speakerBox .imgBox{
		width:8vw;
		height:8vw;
		background:#aaa;
	}
	.miniseminarBox .items .speakerBox .txtBox{
		width:calc(100% - 8vw);
		padding-left:1em;
	}
	.miniseminarBox .items .speakerBox .txtBox .ttlTxt{
		font-size:clamp(0.6rem, 1.0vw, 1.0rem);
		line-height:1.3;
	}
	.miniseminarBox .items .speakerBox .txtBox .nameTxt{
		margin-top:5px;
		font-size:clamp(1.2rem, 1.6vw, 1.6rem);
	}
	.miniseminarBox .items .speakerBox .txtBox .nameTxt span{
		display:inline-block;
		font-size:clamp(0.6rem, 1.0vw, 1.0rem);
		padding-left:0.2em;
	}
	.miniseminarBox .items .btnBox{
		display:flex;
		justify-content:end;
		width:100%;
		margin-top:15px;
	}
	.miniseminarBox .items .btnBox > p{
		display:flex;
		justify-content:center;
		align-items:center;
		padding-inline:40px;
		padding-block:10px;
		color:#fff;
		font-size:clamp(0.9rem, 1.3vw, 1.3rem);
		background-color:var(--themeColorBlue);
		position:relative;
		border-radius:8px;

		transition:all 0.2s ease-in-out;
		transform:scale(1);
	}
	.miniseminarBox .items .btnBox > p::before{
		content:"\e315";
		font-family:"Material Symbols Outlined";
		font-size:clamp(1.0rem, 1.4vw, 1.4rem);
		display:block;
		position:absolute;
		right:-0.1em;
		top:50%;
		transform:translateY(-46%);
		font-variation-settings:'wght' 300;
	}

	.miniseminarBox .items:hover .btnBox > p{
		transform:scale(1.1);
	}

	/* ============================================ */
	.mypage.miniseminar .block.first .blockContainer .blockInner .blockTtl{
		text-align:center;
		color:var(--themeColorBlue);
	}
	.mypage .miniseminarBox{
		margin-top:50px;
	}

}