@charset "utf-8";
/* =============================================
	重要ポイント10選
============================================= */
/*---------------------------------------------
common
---------------------------------------------*/
.bg_default{
	background-color: #f2f2f2;
}

/*---------------------------------------------
	page header
---------------------------------------------*/
#page_header{
	font-size: clamp(1rem,1.5vw,1.8rem);
	padding: 2em 0;
	background-color: #000;
}
.page_header{
	width: 94%;
	max-width: 1200px;
	margin: 0 auto;
 position: relative;
}

.saisei_bar{
	display: block;
	width: 100%;
	height: 6px;
	margin-top: 1em;
	border-radius: 3px;
	background-color: #ff0033;
}

.play_bar_live{
	padding: 1em 0;
	position: relative;
}
.bar_icon_live{
	width: 12%;
	max-width: 144px;
	position: absolute;
	top: 1em;
	left: 30%;
}
.bar_icon_live::after{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-image: url("../img/bar_icon_live.png");
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: center center;
	/*アニメーション*/
	animation-name: anim_live;
	animation-delay: 1s;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

/*****
アイコンアニメーション設定
*****/
@keyframes anim_live{
	0%{
		opacity: 1;
		transform: scale(1,1);
	}
	50%{
		opacity: 0;
		transform: scale(2,2);
	}
	100%{
		opacity: 0;
		transform: scale(2,2);
	}
}

/***liveなどへのリンクボタン***/
.header_btn_area{}
.header_btn_area .btn_normal{
	font-size: clamp(1.6rem,1.8vw,2.2rem);
}

/*****
リード文
*****/
.lead_section_wrap{
	font-size: clamp(1.4rem,2vw,1.8rem);
	line-height: 1.6;
	padding: 1em 0;
}
.lead_section{
	width: 94%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
}


/*---------------------------------------------
	section
---------------------------------------------*/
.section_wrap{
	font-size: clamp(1.4rem,2vw,1.8rem);
	line-height: 1.6;
 padding: 4em 0;
}

.normal_section{
	width: 94%;
 max-width: 1200px;
	margin: 3em auto 0 auto;
}
.section_wrap .normal_section:first-of-type{
	margin-top: 0;
}

.black_frame{
	width: 94%;
	max-width: calc(1200px + 4em);
	margin: 6em auto 0 auto;
	padding: 2em;
	background-color: #000;
}
.section_wrap .black_frame:first-of-type{
	margin-top: 0;
}

.inner_frame{
	width: 100%;
	padding: 2em;
	background-color: #fff;
	position: relative;
}

/*再生コントロール枠*/
.play_bar{
	padding-top: 1em;
}
.play_bar::before{
	content: '';
	display: block;
	width: 100%;
	height: 6px;
	margin-bottom: 1em;
	border-radius: 3px;
	background-color: #ff0033;
}


.frame_cmt{
	font-size: 1.15em;
	font-weight: bold;
	color: #fff;
	width: fit-content;
	padding: 0.5em;
	border-radius: 0.5em;
	background-color: #ff9621;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(3em,-65%) rotateZ(-5deg);
}
.frame_cmt::after{
	content: '';
	display: block;
	width: 1.5em;
	height: 1em;
	background-color: #ff9621;
	clip-path: polygon(0 0,100% 0,85% 100%);
	position: absolute;
	top: calc(100% - 1px);
	left: 25%;
}

.ttl_type01{
	font-size: clamp(1.8rem,3.2vw,3.6rem);
	color: #000;
	width: fit-content;
	margin: 0 0 1em 1.5em;
	background-image: linear-gradient(to top,#ff9621 0,#ff9621 25%,transparent 25%);
	position: relative;
}
.ttl_type01::before{
	content: '';
	display: block;
	width: 1em;
	height: 1em;
	background-image: url("../img/ttl_type01_icon.png");
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0.25em;
	left: -1.5em;
}

.ttl_type02{
	font-size: clamp(1.6rem,2.48vw,2.8rem);
	margin: 1.5em 0 0.5em 0;
	padding: 0.25em 0.5em;
	border: solid 1px var(--font-dark);
	border-radius: 0.25em;
}

.next_arrow{
	width: 6.5%;
	max-width: 72px;
	min-width: 2em;
	margin: 0 auto;
}

/*****
配信概要
*****/
.tbl_info{
	border-top: solid 1px #000;
	border-left: solid 1px #000;
}
.tbl_info th,
.tbl_info td{
	padding: 0.5em;
	border-bottom: solid 1px #000;
	border-right: solid 1px #000;
}
.tbl_info th{
	color: #fff;
	background-color: var(--font-dark);
	white-space: nowrap;
}
.tbl_info td{}


/*****
プロフィール
*****/
.prof_text{}
.ttl_name{
	font-size: clamp(1.5rem,2.12vw,2.4rem);
	margin-bottom: 0.5em;
	padding-bottom: 0.25em;
	border-bottom: dashed 2px var(--font-dark);
}
.prof_img{
	max-width: 400px;
}


/*****
即日WEB採点サービス
*****/
#takken_kaisoku{}

#takken_kaisoku .normal_section{
	max-width: 720px;
}

.ttl_kaisoku01{
	font-size: 1.25em;
	color: #3273A0;
	margin-bottom: 0.5em;
}


/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media screen and (min-width: 768px){
	/*---------------------------------------------
	section
	---------------------------------------------*/
	/*****
	プロフィール
	*****/
	.prof_text{
		flex-grow: 1;
	}
	.prof_img{
		flex-shrink: 0;
		width: 35.5%;
		margin-left: 2em;
	}
}

/* スマホ----------------------------- */
@media screen and (max-width: 767px){
	
	/*---------------------------------------------
 	page header
 ---------------------------------------------*/
 
 
 /*---------------------------------------------
	section
	---------------------------------------------*/
 .section_wrap{
		padding: 3em 0;
 }
 
 .normal_section{}
	
	.black_frame{
		margin: 3em auto 0 auto;
	}
	
	.inner_frame{
		padding: 2em 1em 1em 1em;
	}
	
	
	/*****
	プロフィール
	*****/
	.prof_text{}
	.prof_img{
		width: 65%;
		margin: 1em auto 0 auto;
	}
 
 /*****
 即日WEB採点サービス
 *****/
 
}
