@charset "UTF-8";

:root #WrapOsgSummer{

	--colorCT:rgb(12,165,176);
	--colorPageMain:rgb(250,239,179);
	--colorYellow:rgb(255,241,0);
	--colorOrange:rgb(248,99,44);
	--colorOrangeOv:rgb(195,87,41);
	--colorPink:rgb(223,65,145);

}



/*===================================================================================================================================================================================*/
/*===================================================================================================================================================================================*/
/*===================================================================================================================================================================================*/
/*===================================================================================================================================================================================*/


#WrapOsgSummer{
	background-color:var(--colorPageMain);
}


#WrapOsgSummer .pBase{
	background-color:var(--colorPageMain);
}

#WrapOsgSummer .colorCT{
	color:var(--colorCT);
}

#WrapOsgSummer .imgTtl{
	margin:0 auto;
}

#WrapOsgSummer .contsDay{
	font-weight: bold;
}

/* メインビジュアル
--------------------------------------------------------------*/

#WrapOsgSummer #pVisual{
	position:relative;
	background-repeat:no-repeat;
	background-position:bottom center;
}



#WrapOsgSummer #pVisual h1{
	margin:0 auto;
	position:relative;
	background-repeat:no-repeat;
}

#WrapOsgSummer #pVisual #ttlMain{
	position:relative;
	margin:0 auto;	
}



#WrapOsgSummer #pVisual #ttlSub{
	display:block;
	margin:0 auto;
}

#WrapOsgSummer #pVisual #ttlLibon{
	position:absolute;
	top:0;
}

#WrapOsgSummer #pHeadLead{
	text-align: center;
	line-height:2;
}

#WrapOsgSummer #pVisualImgBox{
	position:absolute;
	width:100%;
	top:0;
	z-index:2;
}

#WrapOsgSummer #pVisualImgBox #pVisualImgBoxInr{
	position:relative;
	margin:0 auto;
}


/* コンテンツ
--------------------------------------------------------------*/

#WrapOsgSummer #pContents{
	position:relative;
	z-index:3;
}
#WrapOsgSummer #contsNav{
	margin:0 auto;
}


#WrapOsgSummer #contsNav li{
	border-bottom:1px solid #cccccc;
}

#WrapOsgSummer .contsNavItem{
	background-image:url(/special/2026/osg_summer/img/arw.svg);
	background-repeat:no-repeat;
	display: table;
	width:100%;
}

#WrapOsgSummer .contsNavItem .inrItem{
	display:table-cell;
	vertical-align: middle;
	text-align: center;
}

#WrapOsgSummer .contsNavItem .inrItem span{
	color:var(--colorCT);
	display:inline-block;
	text-align: center;
	background-image:url(/special/2026/osg_summer/img/omt_left.svg),url(/special/2026/osg_summer/img/omt_right.svg);
	background-position:left center,right center;
	background-repeat:no-repeat;
	font-weight:bold;
}

#WrapOsgSummer .contsNavItem .inrItem strong{
	display:block;
	text-align: center;
}

/* プログラム
--------------------------------------------------------------*/

#WrapOsgSummer .programConts{
	margin:0 auto;
	padding-top:1px;
}

#WrapOsgSummer .programContsInr{
	background:#ffffff;
	position:relative;
}

#WrapOsgSummer .prgramIco{
	margin:0 auto;
	position:relative;
}

#WrapOsgSummer .programConts h3{
	text-align: center;
	position:relative;
}

#WrapOsgSummer .programConts h3 span{
	display:inline-block;
	border-bottom-style: solid;
	border-bottom-color: var(--colorCT);
}

#WrapOsgSummer .markerLine{
	color:var(--colorCT);
	text-align: center;
	line-height:1.8;
}

#WrapOsgSummer .markerLine span{
	font-weight:bold;
	display:inline;
	background-repeat:repeat-x;
	background-position:bottom;
}


#WrapOsgSummer .circleMark{
	display:table;
	overflow:hidden;
	background:var(--colorPink);
	border-radius:50%;
}

#WrapOsgSummer .circleMark span{
	display:table-cell;
	text-align:center;
	vertical-align: middle;
	color:#ffffff;
}

#WrapOsgSummer .programList dt{
	color:var(--colorCT);
	border:1px solid var(--colorCT);
	font-weight:bold;
}

#WrapOsgSummer .programList dd{
	line-height:1.8;
}

#WrapOsgSummer .dayList li{
	font-weight:bold;
}


#WrapOsgSummer #pgm01Conts li{
	font-weight:bold;
}

#WrapOsgSummer #pgm01Conts li strong{
	font-weight:normal;
}

#WrapOsgSummer #pgm02Conts strong{
	display:block;
	color:var(--colorCT);
	border-left-style:solid;
	border-left-color:var(--colorCT);
}




#WrapOsgSummer .pBtnBox a{
	display:table;
	margin:0 auto;
	color:#ffffff;
	background: var(--colorOrange);
}

#WrapOsgSummer .pBtnBox a:hover{
	background: var(--colorOrangeOv);
}


#WrapOsgSummer .pBtnBox a span{
	display:table-cell;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
}



/*PC ONLY　:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
@media screen and (min-width: 768px) {
/*▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/

	#WrapOsgSummer .spOnly{
		display:none;
	}

	#WrapOsgSummer .pInr{
		width:1000px;
		margin:0 auto;
	}

	#WrapOsgSummer .imgTtl{
		width:330px;
		margin-bottom:30px;
	}

	/* メインビジュアル
	--------------------------------------------------------------*/

	#WrapOsgSummer #pVisual{
		padding-bottom:200px;
		background-image:url(/special/2026/osg_summer/img/bg_visual_pc.svg);
		background-size:3050px;
	}

	#WrapOsgSummer #pVisual h1{
		width:990px;
		padding-top:15px;
		background-image:url(/special/2026/osg_summer/img/bg_h1_pc.svg);
		background-size: contain;
		padding-bottom:120px;
	}

	#WrapOsgSummer #pVisual #ttlMain{
		width:500px;
	}

	#WrapOsgSummer #pVisual #ttlSub{
		width:220px;
		margin-bottom:20px;
	}

	#WrapOsgSummer #pVisual #ttlLibon{
		width:130px;
		right:0;
	}


	#WrapOsgSummer #pHeadLead{
		font-size:17px;
	}



	#WrapOsgSummer #pVisualImgBox #pVisualImgBoxInr{
		width:1060px;
		height:480px;
	}

	#WrapOsgSummer #pVisualImgBox .pageIllust{
		width:240px;
		position:absolute;
		bottom:0;
	}

	#WrapOsgSummer #pVisualImgBox #illust01{
		left:0;
	}

	#WrapOsgSummer #pVisualImgBox #illust02{
		right:0;
	}
	#WrapOsgSummer #pVisualImgBox #ttlOmt{
		position:absolute;
		width:340px;
		top:0;
		left:-120px;
	}



	/* コンテンツ
	--------------------------------------------------------------*/

	#WrapOsgSummer #pContents{
		margin-top:-120px;
		padding-top:1px;
		background-image:url(/special/2026/osg_summer/img/bg_conts_pc.svg),linear-gradient( transparent , transparent 47px , #ffffff 47px , #ffffff );
		background-position:top center,center;
		background-repeat:repeat-x;
		background-size:3050px,100%;
		padding-bottom:30px;
	}

	#WrapOsgSummer #pContents h2{
		margin-top:-30px;
		margin-bottom:60px;
	}

	#WrapOsgSummer #contsNav{
		width:714px;
	}

	#WrapOsgSummer #contsNav li{
		margin-bottom:10px;
		padding-bottom:10px;
	}

	#WrapOsgSummer #contsNav li:last-child{
		border-bottom:none;
	}

	#WrapOsgSummer .contsNavItem{
		background-size:30px;
		background-position:left center;
		text-align: center;
	}

	#WrapOsgSummer .contsNavItem .inrItem{
		height:100px;
	}

	#WrapOsgSummer .contsNavItem .inrItem span{
		font-size:20px;
		background-size:20px;
		padding:0 24px;
		margin-bottom:15px;
	}

	#WrapOsgSummer .contsNavItem .inrItem strong{
		font-size:26px;
	}

	/* プログラム
	--------------------------------------------------------------*/

	#WrapOsgSummer #pProgram{
		background-image:url(/special/2026/osg_summer/img/bg_program_pc.svg);
		background-position:top center;
		background-repeat:repeat-x;
		background-size:3050px;
		padding-top:20px;
		padding-bottom:180px;
	}

	#WrapOsgSummer .programConts{
		width:900px;
		padding:20px;
		margin-bottom:50px;
	}

	#WrapOsgSummer .programContsInr{
		border-radius:20px;
		padding:70px 58px 60px;
		z-index:0;
	}

	#WrapOsgSummer .prgramIco{
		width:140px;
		margin-bottom:-75px;
		z-index:1;
	}


	#WrapOsgSummer .programConts h3{
		font-size:28px;
		margin-bottom:10px;
		z-index:2;
	}

	#WrapOsgSummer .programConts h3 span{
		padding:0 5px 10px;
		border-bottom-width: 3px;
	}

	#WrapOsgSummer .markerLine{
		font-size:22px;
		margin-bottom:30px;
	}

	#WrapOsgSummer .markerLine span{
		background-image:linear-gradient( var(--colorYellow),var(--colorYellow) );
		background-size:10px 10px;
	}

	#WrapOsgSummer .circleMark{
		position:absolute;
		top:10px;
		right:10px;
	}

	#WrapOsgSummer .circleMark span{
		font-size:25px;
		width:110px;
		height:110px;
	}

	#WrapOsgSummer .programList{
		margin-bottom:55px;
	}

	#WrapOsgSummer .programList .listCassette{
		display:flex;
		justify-content: left;
		align-items: stretch;
		font-size:16px;
		padding-bottom:8px;
		margin-bottom:8px;
		border-bottom:1px dotted #666666;
	}

	#WrapOsgSummer .programList .listCassette:last-child{
		border-bottom:none;
	}


	#WrapOsgSummer .programList dt{
		text-align:center;
		width:120px;
		padding:3px;
		margin-right:20px;
		display:table;
	}

	#WrapOsgSummer .programList dt span{
		display:table-cell;
		vertical-align: middle;
	}

	#WrapOsgSummer .programList dd{
		width:600px;
	}


	#WrapOsgSummer #pgm01Conts li:first-child{
		margin-bottom:15px;
	}

	#WrapOsgSummer #pgm02Conts{
		padding:22px 0;
	}

	#WrapOsgSummer #pgm02Conts>li{
		margin-bottom:28px;
	}

	#WrapOsgSummer #pgm02Conts>li:last-child{
		margin-bottom:0px;
	}

	#WrapOsgSummer #pgm02Conts strong{
		line-height:1.4;
		border-left-width:3px;
		padding-left:8px;
		margin-bottom:11px;
	}

	#WrapOsgSummer .pBtnBox a span{
		font-size: 26px;
		width:360px;
		height:70px;
	}



/*▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/
}
/* 768px -> :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/


/*SP ONLY　:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
@media screen and (max-width: 767px) {
/*▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/

	#WrapOsgSummer .pcOnly{
		display:none;
	}


	#WrapOsgSummer .imgTtl{
		width:50vw;
		margin-bottom:5vw;
	}

	/* メインビジュアル
	--------------------------------------------------------------*/


	#WrapOsgSummer #pVisual{
		padding-bottom:20vw;
		background-image:url(/special/2026/osg_summer/img/bg_visual_sp.svg);
		background-repeat:no-repeat;
		background-position:bottom center;
		background-size:100%;
	}



	#WrapOsgSummer #pVisual h1{
		width:100%;
		padding-top:9vw;
		background-image:url(/special/2026/osg_summer/img/bg_h1_sp.svg);
		background-size: 100%;
		padding-bottom:50vw;
	}



	#WrapOsgSummer #pVisual #ttlMain{
		width:83vw;
	}

	#WrapOsgSummer #pVisual #ttlSub{
		width:36vw;
		margin-bottom:4vw;
	}

	#WrapOsgSummer #pVisual #ttlLibon{
		position:absolute;
		top:0;
		width:22vw;
		right:2vw;
	}

	#WrapOsgSummer #pHeadLead{
		font-size:3.2vw;
	}

	#WrapOsgSummer #pVisualImgBox #pVisualImgBoxInr{
		width:100%;
		height:96vw;
		overflow: hidden;
	}

	#WrapOsgSummer #pVisualImgBox .pageIllust{
		width:36vw;
		position:absolute;
		bottom:0;
	}

	#WrapOsgSummer #pVisualImgBox #illust01{
		left:14vw;
	}

	#WrapOsgSummer #pVisualImgBox #illust02{
		right:14vw;
	}
	#WrapOsgSummer #pVisualImgBox #ttlOmt{
		position:absolute;
		width:38vw;
		top:0;
		left:-12vw;
	}

	/* コンテンツ
	--------------------------------------------------------------*/

	#WrapOsgSummer #pContents{
		margin-top:-8vw;
		padding-top:1px;
		background-image:url(/special/2026/osg_summer/img/bg_conts_sp.svg),linear-gradient( transparent , transparent 8vw , #ffffff 8vw , #ffffff );
		background-position:top center,center;
		background-repeat:no-repeat,repeat-x;
		background-size:100%,100%;
		padding-bottom:2vw;
	}

	#WrapOsgSummer #pContents h2{
		margin-top:-5vw;
		margin-bottom:10vw;
	}

	#WrapOsgSummer #contsNav{
		width:86vw;
	}

	#WrapOsgSummer #contsNav li{
		margin-bottom:3vw;
		padding-bottom:3vw;
	}

	#WrapOsgSummer #contsNav li:last-child{
		border-bottom:none;
	}

	#WrapOsgSummer .contsNavItem{
		background-size:6vw;
		background-position:left center;
		text-align: center;
	}

	#WrapOsgSummer .contsNavItem .inrItem{
		height:24vw;
	}

	#WrapOsgSummer .contsNavItem .inrItem span{
		font-size:3.5vw;
		background-size:6vw;
		padding:0 8vw;
		margin-bottom:2vw;
		line-height:1.4;
	}

	#WrapOsgSummer .contsNavItem .inrItem strong{
		font-size:4.5vw;
		line-height:1.4;
	}

	/* プログラム
	--------------------------------------------------------------*/

	#WrapOsgSummer #pProgram{
		background-image:url(/special/2026/osg_summer/img/bg_program_sp.svg);
		background-position:top center;
		background-repeat:no-repeat;
		background-size:100%;
		padding-top:5vw;
		padding-bottom:20vw;
	}

	#WrapOsgSummer .programConts{
		width:96vw;
		padding:4vw;
		margin-bottom:3vw;
	}

	#WrapOsgSummer .programContsInr{
		border-radius:3vw;
		padding:12vw 5vw 6vw;
		z-index:0;
	}

	#WrapOsgSummer .prgramIco{
		width:24vw;
		margin-bottom:-12vw;
		z-index:1;
	}


	#WrapOsgSummer .programConts h3{
		font-size:4.5vw;
		margin-bottom:3vw;
		z-index:2;
		line-height:1.5;
	}

	#WrapOsgSummer .programConts h3 span{
		padding:0 2vw 1vw;
		border-bottom-width: 2px;
	}

	#WrapOsgSummer .markerLine{
		font-size:3.6vw;
		margin-bottom:6vw;
	}

	#WrapOsgSummer .markerLine span{
		background-image:linear-gradient( var(--colorYellow),var(--colorYellow) );
		background-size:1vw 1vw;
	}

	#WrapOsgSummer .circleMark{
		position:absolute;
		top:-5vw;
		right:-2vw;
	}

	#WrapOsgSummer .circleMark span{
		font-size:4vw;
		width:20vw;
		height:20vw;
	}
	#WrapOsgSummer .programList{
		margin-bottom:12vw;
	}

	#WrapOsgSummer .programList .listCassette{
		font-size:3.2vw;
		margin-bottom:3vw;
	}

	#WrapOsgSummer .programList .listCassette:last-child{
		border-bottom:none;
	}


	#WrapOsgSummer .programList dt{
		text-align:center;
		padding:1vw;
		display:table;
		width:100%;
		margin-bottom:2vw;
	}

	#WrapOsgSummer .programList dt span{
		display:table-cell;
		vertical-align: middle;
		font-size:3.4vw;
	}

	#WrapOsgSummer .programList dt span div{
		display:inline;
	}


	#WrapOsgSummer #pgm01Conts li:first-child{
		margin-bottom:2vw;
	}

	#WrapOsgSummer #pgm02Conts{
		padding:3vw 0;
	}

	#WrapOsgSummer #pgm02Conts>li{
		margin-bottom:3vw;
	}

	#WrapOsgSummer #pgm02Conts>li:last-child{
		margin-bottom:0px;
	}

	#WrapOsgSummer #pgm02Conts strong{
		line-height:1.4;
		border-left-width:3px;
		padding-left:1.2vw;
		margin-bottom:2vw;
	}

	#WrapOsgSummer .pBtnBox a span{
		font-size: 4.8vw;
		width:60vw;
		height:16vw;
	}






/*▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/
}
/* -> 767px :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/



