/*/////////////// CSS変数設定 ///////////////////*/
@import "./root.css";
/*/////////////// CSS変数設定 ///////////////////*/

/*/////////////// CSS変数設定 ///////////////////*/

:root {
	--opt-bg-color1: #fdc5c4;
	--opt-bg-color2: #666696;
	--opt-border-color: #f06a9c;
	--data-bg-color: #fdc5c4;		
	--schedule-date-color: #fdc5c4;		
}

/*/////////////// CSS変数設定 ///////////////////*/


.wp_name{position:relative;}
.wp_name span{font-size:14px;font-size:1.4rem;}
.wp_name img{}

.pf_iconbox{
	width:100%;
	text-align:right;
	position:relative;
	top:-5px;
	right:0px;
}

.pfname{margin:0 20px 0 0;float:left;}
.pficon{margin:0 0 0 auto;float:left;}
.pficon img{display:inline-block;margin:0 5px 0 auto;float:left;}

@media screen and (max-width: 1049px) {
	.image_panel{width:100%;margin-right:10px;}
	.basic_data{width:100%;}	
}
@media screen and (min-width: 1050px) {
	.image_panel{width:500px;margin-right:10px;float:left;}
	.basic_data{width:540px;float:right;}
}

.basic_data_1{margin:0 auto 15px;}
.basic_data_2{margin:0 auto 15px;}
.basic_data_3{}
.prof_cmt{height:165px;padding:5px 10px 10px;overflow:scroll;}

/************************************************************
 * オプション
************************************************************/
.optbox{margin:0 auto 15px;}
.optbox ul{width:100%;list-style-type:none;}

@media screen and (max-width: 1049px) {
	.optbox ul li{
		display:inline;
		width:calc(100% / 3);
		height:30px;
		padding:0;
		float:left;
		font-size: 12px;
		font-size: 1.2rem; /* =12px */
		line-height:30px;
		text-align:center;
		border:1px solid var(--opt-border-color);
		box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;
	}	
}
@media screen and (min-width: 1050px) {
	.optbox ul li{
		display:inline;
		width:calc(100% / 7);
		/*width:150px;*/
		height:30px;
		padding:0;
		float:left;
		font-size: 12px;
		font-size: 1.2rem; /* =12px */
		line-height:30px;
		text-align:center;
		border:1px solid var(--opt-border-color);
		box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;
	}
}

.optbox ul li.ok{
	color:#fff;
	background: var(--opt-bg-color1);


-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset; -moz-box-shadow:0 1px 0 rgba(255,255,255,0.8) inset;box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;color:#fff;font-weight:bold;text-shadow: 0.1em 0.1em 1px #1f1f40;}
.optbox ul li.none{background:#fff;color:#ccc;font-weight:bold;font-style:italic;text-shadow: 0.1em 0.1em 1px #fff;}





@media screen and (max-width: 1049px) {
	.gpf_blogbox{width:100%;height:420px;}
	.gpf_reviewbox{width:100%;height:480px;margin:0;}
	.gpf_schedulebox{width:100%;height:480px;margin:0;}
	.rd_nonop{width:100%;margin:10px auto 10px;}
	.review_postbox{width:100%;margin:0px auto;text-align:center;padding:0;font-size:12px;font-size:1.2rem;}
	.review_postbox span{font-size: 10px;font-size: 1.0rem;}

	.gpf_sb{height:420px;margin:10px auto 0px;box-shadow: 2px 2px 2px #666;}
	.gpf_sb ul{list-style-type:none;height:426px;padding:0px;}
	.gpf_sb ul li{width:100%;height:60px;margin:0px auto;border-bottom:1px solid #fff;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,eeeeee+100 */
		background: rgb(255,255,255); /* Old browsers */
		background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
	}
	.gpf_sb ul li .gpf_s_date{width:30%;height:60px;line-height:60px;padding:5px;font-size: 12px;font-size: 1.2rem;font-weight:bold;color:#fff;text-align:center;background:var(--schedule-date-color);border-bottom:1px solid #fff;float:left;}
	.gpf_sb ul li .gpf_s_time{width:70%;padding:5px;text-align:center;font-size: 12px;font-size: 1.2rem;float:left;}	
}
@media screen and (min-width: 1050px) {
	.gpf_blogbox{width:350px;height:480px;float:left;}
	.gpf_reviewbox{width:400px;height:480px;margin:0 0 0 10px;float:left;}
	.gpf_schedulebox{width:280px;height:480px;margin:0 0 0 10px;float:left;}
	.rd_nonop{width:640px;float:left;}
	.review_postbox{width:310px;margin:30px 0 0 40px;padding:0;float:left;font-size:12px;font-size:1.2rem;}
	.review_postbox span{font-size: 10px;font-size: 1.0rem;}
	
	
	.gpf_sb{height:427px;margin:10px auto 0px;background: rgba(255,255,255,0.8);box-shadow: 2px 2px 2px #666;}
	.gpf_sb ul{list-style-type:none;height:426px;padding:0px;}
	.gpf_sb ul li{width:280px;height:61px;margin:0px auto;border-bottom:1px solid #fff;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,eeeeee+100 */
		background: rgb(255,255,255); /* Old browsers */
		background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
	}
	.gpf_sb ul li .gpf_s_date{width:85px;height:60px;line-height:60px;padding:5px;font-size: 12px;font-size: 1.2rem;font-weight:bold;color:#fff;text-align:center;background:var(--schedule-date-color);float:left;}
	.gpf_sb ul li .gpf_s_time{padding:5px;text-align:center;font-size: 12px;font-size: 1.2rem;float:left;}
}

.gpf_bb{background: rgba(255,255,255,0.8);box-shadow: 2px 2px 2px #666;}

.gpf_rb{height:426px;margin:10px auto 5px;background: rgba(255,255,255,0.8);box-shadow: 2px 2px 2px #666;}
.gpf_rb ul{list-style-type:none;height:420px;margin-bottom:6px;padding:5px 8px;overflow:scroll;}
.gpf_rb ul li{margin:5px auto 10px;}
.gpf_rb ul li .gpf_rc{padding:5px;}
.gpf_rb ul li .gpf_r_foot{padding:3px 0px;border-top:1px dotted #660033;border-bottom:1px dotted #660033;font-size:8px;font-size: 0.8em;text-align:right;}
.gpf_rb ul li .gpf_r_foot span{color:#996600;}




/*-------- objectfit ---------*/
.slides{}
.slides ul li{}
.slides ul li {width:498px;height:664px;margin:1px;}
.slides ul li img{width:498px;height:664px;object-fit: cover;border:1px solid #ccc;}


/*-------- course ---------*/
.coursebtn{width:120px;height:25px;margin:0 5px;border-radius:5px;line-height:25px;text-align:center;float:left;}
.course_red{background:#c84a33;color:#fff;font-weight:bold;text-shadow: 1px 1px 3px #333;}
.course_blue{background:#007fac;color:#fff;font-weight:bold;text-shadow: 1px 1px 3px #333;}
.course_orange{background:#f77f19;color:#fff;font-weight:bold;text-shadow: 1px 1px 3px #333;}


/************************************************************/
.pure_shame{}


@media screen and (max-width: 1049px) {
	.pure_shame ul{width:100%;list-style:none;margin:0 auto 20px;}
	.pure_shame ul li{width:calc(90vw / 3);height:calc(90vw / 3);margin:1px;float:left;}
	.pure_shame ul li .idx_syame_imgbox{width:calc(90vw / 3);height:calc(90vw / 3);}
	.pure_shame ul li .idx_syame_imgbox img{width:calc(90vw / 3);height:calc(90vw / 3);object-fit: cover; object-position: 50% 0;}
}
@media screen and (min-width: 1050px) {
	.pure_shame ul{list-style:none;margin:0 auto 20px;}
	.pure_shame ul li{width:205px;height:205px;margin:0 5px 5px 0;float:left;}
	.pure_shame ul li .idx_syame_imgbox{width:205px;height:205px;}
	.pure_shame ul li .idx_syame_imgbox img{width:200px;height:200px;object-fit: cover; object-position: 50% 0;}
}