/*
Template:ystandard
Theme Name:ystandard-child
Theme URI: https://wp-ystandard.com
Author: yosiakatsuki
Author URI: https://yosiakatsuki.net
Description:「自分色に染めた、自分だけのサイトを作る楽しさ」を感じてもらうために作った一風変わったWordPressテーマ「ystandard」の子テーマ
Version: 4.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/**
 * 共通スタイル調整
 */
:root {
	--color-white: #fff;
	--color-white-rgb: rgb(255,255,255);
	--color-white-rgba: rgb(255,255,255, 0.4);
	--color-black:#252525;
	--color-black-rgba: rgb(37,37,37, 0.4);
	--color-gray:#cacaca;
	--color-primary: #1a3556;
	--color-primary-rgb: rgb(26,53,86);
	--color-primary-rgba: rgba(26,53,86,0.4);
	--color-secondary: #5c8fbe;
	--color-secondary-rgb: rgb(92,143,190);
	--color-secondary-rgba: rgba(92,143,190,0.4);
	--color-tertiary: #9dd0ff;
	--color-tertiary-rgb: rgb(157,208,255);
	--color-tertiary-rgba: rgba(157,208,255);
	
}

.mt40 {
	margin-top: 40px;
}

/**
 * ボタン
 */
.btn-schedule {
	width: 100%;
	color: var(--color-white);
	background-color: var(--color-primary);
	text-decoration: none;
}
.btn-schedule:hover {
	color: var(--color-white);
	background-color: var(--color-secondary);
}
/**
 * 見出し
 */
h2.sub-section {
	padding-bottom: 8px;
	position: relative;
	border: 0px;
	text-align: center;
	font-size: 2rem;
}
h2.sub-section::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	border: 0px;
	background: linear-gradient(to right, transparent 0%, var(--color-primary) 40%, var(--color-primary) 60%,transparent 100%);
}


/*------------------------------------------------
	ホスト募集ページ
------------------------------------------------*/
/*----登録までの流れ----*/
@media screen and ( max-width: 768px ){
.vk_flow .vk_flow_frame {
	display: block;
}
.vk_flow .vk_flow_frame_image {
	max-width: 80%;
	margin:10px auto 0 auto;
}
}
@media screen and (max-width: 768px) {
.spimgharf {
	width: 40%;
}
}
/**
 * キャストスケジュール
 */
.krc_calendar {
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	font-size: 13px;
	margin: 24px 0;
	/*box-shadow: 0 2px 15px rgba(0, 0, 0, 0.22);*/
}

.krc_calendar dl {
	margin: 0px;
	border: 0px;
	border-right: 1px solid #ccc;
	width: 20%;
	float: left;
	display: block;
}
.krc_calendar dl dt {
	border: 0px;
	border-bottom: 1px solid #ccc;
	text-align: center;
	padding: 2px;
	background-color: #f9e7e7;
	font-weight: normal;
}

.krc_calendar dl dd {
	border: 0px;
	text-align: center;
	text-decoration: none;
	padding: 24px 2px;
	display: block;
	color: #ff9900;
	font-weight: bold;
}


/**
 * 出勤情報
 */
.week_calendar ul {
	list-style:none;
	overflow: hidden;
	margin: 5px 0px;
	padding: 0px;
	width: 100%;
}

.week_calendar ul li {
	position: relative;
	float: left;
	width: 14%;
}

.week_calendar ul li a {
	display: block;
	padding: 17px 5%;
	width: 99%;
	color: #fff;
	background-color: var(--color-primary);
	text-align: center;
	text-decoration: none;
}
.week_calendar ul li.target a {
	background-color: var(--color-secondary);
}

.week_calendar ul li a:hover {
	background-color: var(--color-tertiary);
}

/**
 * キャスト一覧
 */

.one-cast {
	display: inline-block;
	position: relative;
	max-width: 220px;
	height: 370px;
	margin: 0 5px 12px 5px;
	padding: 0;
	text-align: center;
	line-height: 1.3em;
	overflow: hidden;
	letter-spacing: normal;
}

.one-cast a.iframe {
	z-index: 8;
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	color: #111;
}

.one-cast figure {
	position: relative;
	margin: 0 auto 0;
	padding: 0;
	overflow: hidden;
	position: relative;
	text-align: center;
	width: 100%;
	height: 300px;
	overflow: hidden;
}
.one-cast figure img {
	width: 100%;
}

.one-cast figcaption {
	position: relative;
	width: 100%;
	height: 200px;
	margin: 0;
	padding: 5px 0 0;
	text-align: center;
	font-size: 14px;
	line-height: 1.2em;
}

/**
 * キャスト個人ページ
 */
.cast {
	overflow: hidden;
	border: 0px solid gray;
	padding: 20px;
	display: flex;
	flex-flow: row wrap;
}
.cast-photo {
	padding: 10px;
	width: 50%;
	min-width: 300px;
	flex: 0 0 50%;
	margin : 0 auto;
}
.cast-profile {
	width: 50%;
	min-width: 350px;
	flex: 0 0 50%;
}
.cast-schedule {
	width: 100%;
	flex: 0 0 100%;
}
.cast-meta {
	overflow:hidden;
	text-align: center;
}
.cast-meta-left {
	width:49%;
	float:left;
	text-align: right;
	background-color: #F1F1F3;
	margin: 1px;
	padding:10px;
	min-height: 45px;
}
.cast-meta-right {
	width:49%;
	float:left;
	text-align: left;
	margin: 1px;
	padding:10px;
	min-height: 45px;
}
.cast-meta-table {
	/*! border: 0px; */
}
.cast-meta-table th {
	width:40%;
}
.cast-meta-table th,
.cast-meta-table td {
	font-size: 0.8em;
}
.cast-meta-table td pre {
	margin:0px;
}
.cast-pr {
	font-size: 18px;
	overflow: hidden;
	line-height: 1.8;
	padding: 15px 10px;
}
.cast-pr pre {
	white-space: pre-wrap;
}

#slider,
#thumbnail {
	/** border: 5px solid #e58f8f; */
}
#slider {
	margin-bottom: -10px;
	max-height: 600px;
	overflow:hidden;
}
#slider ul {
	overflow:hidden;
}
#slider ul li {
	flex-grow: unset;
}
#slider ul li img {
	object-fit:cover;
}
/**

*/
#thumbnail {
	overflow:hidden;
}
#thumbnail .slides li {
	max-height:130px;
	width:100px;
}
#thumbnail .slides img {
	max-height: 130px;
	width:100px;
	-moz-user-select: none;
	object-fit:cover;
}
#thumbnail img {
	opacity: 0.5;
}
#thumbnail .flex-active-slide img {
	opacity: 1;
	cursor: default;
}

/**
#thumbnail .slides {
    display: flex;
    flex-wrap: wrap;
    padding: 0px;
    margin: -20px -10px 0px;
    list-style: none;
}

#thumbnail .slides > li {
    position: relative;
    padding-top: 5%;
    margin: 20px 10px 0px;
    width: calc(100% / 4 - 20px);
    overflow: hidden;
}

#thumbnail .slides > li > img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 150%;
    height: 100%;
}
*/

/**
 * スケジュールテーブル
 */
.sch-box {
	border: 1px solid #eee;
	table-layout: fixed;
}
.sch-box tr td,
.sch-box tr th {
	text-align: center;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
}
.sch-box tr th {
	background-color: var(--color-primary);
	color: #fff;
}
.sch-box tr td {
	background-color: RGBA(255, 255, 255, 0.6);
}

/**
 * ツイッターアイコン
 */
.one-cast .tw {
	right: 0px;
	top: 395px;
	right:5px;
	width: 50px;
	height: 50px;
	position: absolute;
	display: block;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 26;
	background-image: url(images/twitter_icon.png);
}

.one-cast .tw:hover {
	opacity: 0.8;
}

/**
 * 当日出勤バッジ
 */
.one-cast .todays_cast {
	right: 0px;
	top: 0px;
	border-radius: 3px;
	background-color: #ed561b;
	color: #fff;
	font-size: 14px;
	opacity: 0.9;
	font-weight: normal;
	padding: 5px;
}

.one-cast .todays_cast {
	position: absolute;
	display: block;
	z-index: 5;
}

/**
 * 出勤時間バッジ
 */
.one-cast .worktime {
	text-align: left;
	left: 0px;
	top: 450px;
	width:100%;
	background-color: #ed561b;
	color: #fff;
	font-size: 18px;
	opacity: 0.8;
	font-weight: normal;
	padding: 5px 5px 5px 20px;
	border-radius: 0px;
}

.one-cast .worktime {
	position: absolute;
	display: block;
	z-index: 26;
	text-align: center;
}

/**
 * 新人バッジ
 */
.one-cast .new_cast {
	left: 5px;
	top: 5px;
	width: 50px;
	height: 50px;
	position: absolute;
	display: block;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 26;
	background-image: url(images/new_icon.png);
	opacity: 0.9;
}

/**
 * ランキングバッジ
 */
.one-cast .rank {
	left: 0px;
	top: 378px;
	width: 100px;
	height: 50px;
	position: absolute;
	display: block;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 26;
	opacity: 0.9;
}

/**
 * キャスト情報
 */
.one-cast a {
	text-decoration: none;
}
.one-cast figcaption span.cast-name {
	display: block;
	font-size: 130%;
	color: #210698;
	padding: 10px 0px;
font-style: normal;
  display: inline-block;
  border-bottom: solid 5px #efefef;
}}

.one-cast figcaption span.cast-size {
	display: block;
	color: #000;
}

.one-cast figcaption span.cast-time {
	display: block;
	color: #e1053b;
}

div.cast-name{
text-align: center;
font-size: 1.2em;
color: #210698;
display: block;
border-bottom: solid 5px #efefef;
margin: 0px 0px 20px 0px;
}

/**
 * スマホ対応
 */
@media screen and (max-width:480px) {
/* 画面サイズが480pxからはここを読み込む */
	.one-cast {
		width: 43%;
	}
	.cast {
		width: 100%;
	}
	.cast-photo {
		width: 100%;
	}
	.cast-profile {
		width: 100%;
	}
	#slider ul li img {
		max-height: 533px;
	}
	#thumbnail {
		display: none;
	}
	
	/**
	 * キャスト詳細のスケジュールテーブル
	 * 行列を入れ替える
	 */
	.sch-box {
		width: 100%;
	}
	.sch-box tr {
		display: block;
		float: left;
	}
	.sch-box tr td, 
	.sch-box tr th {
		border-left: none;
		display: block;
		height: 50px;
	}
	.sch-box thead {
		display: block;
		float: left;
		width: 30%;
	}
	.sch-box thead tr {
		width: 100%;
	}
	.sch-box tbody {
		display: block;
		float: left;
		width: 70%;
	}
	.sch-box tbody tr {
		width: 100%;
	}
	.sch-box tr td + td {
		border-left: none;
	}
	.sch-box tbody td:last-child {
		border-bottom: solid 1px #ccc;
	}	
	
	.home-block,
	.box-body {
		text-align: center;
		font-weight: normal;
	}
	.krc_calendar dl {
		min-height: 150px;
	}
	.wp-block-group.is-style-vk-group-shadow.home-block {
		padding: 5px 0px;
	}
	.one-cast {
		max-width: 170px;
		height: 300px;
		margin: 0px 8px 10px;
	}
	.one-cast figure {
		height: 240px;
	}
	/**
	 * ツイッターアイコン
	 */
	.one-cast .tw {
		top: 190px;
		width: 35px;
		height: 35px;
	}

	/**
	 * 当日出勤バッジ
	 */
	.one-cast .todays_cast {
		font-size: 10px;
		opacity: 0.7;
	}

	/**
	 * 出勤時間バッジ
	 */
	.one-cast .worktime {
		top: 0px;
		top: 230px;
		font-size: 10px;
		text-align: left;
		padding: 5px 5px;
	}

	/**
	 * 新人バッジ
	 */
	.one-cast .new_cast {
		width: 35px;
		height: 35px;
	}
	/**
	 * 情報項目テーブル
	 */
	.cast-meta-table th,
	.cast-meta-table td {
		text-align: left;
		display: block;
		width: 100%;
	}
}