@charset "utf-8";
/* CSS Document */

/*
##########################################################################
スケジュール
##########################################################################*/
#schedule{
}
#schedule .section{
	margin:auto;
}
#schedule .wrap{
	width:100%;
	margin:auto;
}

/* 開催中のイベント
===========================================================*/
#schedule #campaignArea{}
#schedule #campaignArea .box{}

/* カレンダー　アウトライン
===========================================================*/
#calendar{
    display: block;
    width:40%;
    max-width:900px;
    margin:0 0 5rem;
}
.fc-toolbar-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #666;
    padding:0.5rem 3rem;
    border-radius:50vmax;

}
/* カレンダー全体のtable行を薄くする（週ごと） */
.fc .fc-daygrid-body tr {
    height: 3rem !important; /* ← 数字を下げれば薄くなる */
}

/* 日付セル内のフレームも強制的に薄くする */
.fc-daygrid-day-frame {
    display: block;
    height: 2.2rem;
    padding: 2px;
}
/* ナビゲーションボタンを小さく */
.fc-button {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}
.fc-scrollgrid {
    border-spacing: 0px;
}

.fc-daygrid-day {
    min-height: 20px !important; /* 好きな高さに調整 */
}
/* 曜日ヘッダー行（Sun, Mon, Tue...）をコンパクトに */
.fc-col-header-cell {
    padding: 5px 0;
    font-size: 0.8rem;
}

/* 各日のマス目をコンパクトに */
#calendar .fc-daygrid-day-frame {
    padding: 2px !important;

}

/* 日付の数字（1,2,3...）を小さく */
.fc-daygrid-day-number {
    font-size: 0.8rem !important;
    padding: 2px;
    font-size: 1rem;
}

.fc-day{
    cursor: pointer;
}
.fc-day:hover{
    background:#F3F3F3;
}
.fc-day-selected {
    background-color: #ffd9d9 !important; /* 好きな色にできる */
}

.fc-day-today {
    background-color: #cce5ff !important; /* 今日の日付の背景色 */
}
/* 祝日の背景色 */
.fc-daygrid-day.fc-holiday {
    background-color: #ffe4e1;
}

/* 祝日テキスト色 */
.fc-daygrid-day.fc-holiday .fc-daygrid-day-number {
    color: red !important;
}

/* 土曜 */
.fc-day-sat {
    background-color: #dcf0ff; /* light blue */
}

/* 日曜 */
.fc-day-sun {
    background-color: #ffe3ed; /* light red */
}

/* 祝日（Googleカレンダーから読み込み分） */
.fc-holiday-bg {
    background-color: #ffa59b !important; /* light pink */
    font-size: 0.6rem;
}

/* 今日（todayクラス） */
.fc-day-today {
    background-color: #a8ffa8 !important; /* light green */
}

/* クリックして選択された日 */
.fc-day-selected {
    background-color: #ffc267 !important; /* orange */
}

/* キャスト枠
===========================================================*/
.list .box{
    display: flex;
    justify-content: space-between;
    width:100%;
}
.list .box .item{
    width:200px;
}
.list .box .status{
    width:calc(100% - 240px);
}

/* 日付
===========================================================*/
h3.date{
    margin-bottom: 2rem;
    font-size: 2.3rem;
}

/* 予約状況グラフ
===========================================================*/

/**/
.timeline-container {
    position: relative;
    width:100%;
    height: 70px; /* 出勤帯＋予約帯分の高さ */
    border-bottom: 1px solid #ccc;
}

.timeline-background {
    display: flex;
}

.timeline-hour {
    flex: 0 0 calc(100% / 28); /* 後述する30分刻み対応。14時間×2＝28個 */
    height: 10px;
    border-right: 1px solid #e9e9e9;
    font-size: 0.78rem;
    text-align: left; /* 左揃え */
    padding-left: 0px; /* 少し余白 */
    padding-top: 68px; /* 上に寄せる */
    background: #f9f9f9;
}

.timeline-bars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.schedule-bar, .reservation-bar {
    position: absolute;
    pointer-events: auto;
    box-sizing: border-box;
    font-size: 0.8rem;
    color: #FFF;
}

.schedule-bar {
    background-color: #5ecef3;
    top: 43px;
    line-height:1.8;
    z-index: 2;
}

.reservation-bar {
    background-color: #ff7c9d;
    /* border-right:1px solid #ffb7c9; */
    top: 6px; /* 出勤帯の下にずらす */
    left: 0; /* blade側で指定されるが、念のため */
    transform: translateX(0); /* ブラウザのsubpixelバグ回避 */
    line-height:2.8;
    max-height: 2rem;
    border-radius:50vmax;
    z-index: 3;
    cursor: pointer;
}

/* 予約状況グラフ　説明
===========================================================*/

#sch_list .message{
	margin:0 auto 40px;
	padding:2.4%;
	border:1px solid #686868;
	color: #000;
	line-height:2;
}
/**/
#sch_list #date{
	color:#000;
	padding:1% 2%;
	margin-bottom:15px;
	font-size:29px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-align: center;

}
/**/
#sch_list #studioArea{
	margin:0 0 50px;
}

#sch_list #studioArea table.inTbl tbody th{
	width:23% !important;
	font-size:15px;
}
#sch_list #studioArea table.inTbl tbody td{
	width:77% !important;
}
/**/
#sch_list #description{
	margin:0 0 30px;
}


/* 予約状況グラフ
===========================================================*/
.pop:hover{ /*マウスが乗ったら*/
        position: relative;
        top: 0px; left: 0px;
		cursor:pointer;
}
.fukidasipop { /*吹き出し本体*/
        position: absolute;
        top:11px; left:20px;
        display: none; /*何も表示しない*/
        width: 180px; /*ブロックの幅*/
        font-weight: bold; /*文字の太さ*/
        text-decoration: none; /*文字飾り*/
        color: #ffffff; /*文字色*/


     	filter: alpha(opacity=85); /* IE */
		-moz-opacity:0.85;
		opacity:0.85; /* Opera・Safari */
        background-color: #e72666; /*背景色*/

  	z-index:999;
}
.fukidasipop span{
		display:block;
        padding: 5px; /*内側の余白*/
        background-color: #e72666; /*背景色*/
		border-radius:5px;
}
.fukidasipop span.shihuku{
        background-color: #f25c09; /*背景色*/
}
.fukidasipop span.mizugi{
        background-color: #2277f6; /*背景色*/
}
.fukidasipop span.okugai{
        background-color: #64b60b; /*背景色*/
}
.fukidasipop span.other{
        background-color: #808080; /*背景色*/
}
.fukidasipop span.sch{
        background-color: #fffdcd; /*背景色*/
		color:#333;
		border:1px solid #ffb70b;
}

.pop:hover .fukidasipop {
        display: block; /*ブロック要素で表示*/
}

/* 予約状況テーブル
===========================================================*/
/**/
#sch_list table.outTbl{
	width:100%;
}
#sch_list table.outTbl th{
	width:10%;
	vertical-align:top;
}

#sch_list table.outTbl th .icon{
	width:60px;
	margin:0 0 2px;
}
#sch_list table.outTbl th .name{
	border-radius:5px;
	padding-left:25px;
	margin-top:3px;
	background:url(../images/status/prof_icon.png) no-repeat left center;
}
#sch_list table.outTbl th .name a{
	text-decoration:none;
	color:#555;
	font-size:12px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight:100;
}
#sch_list table.outTbl th .name a:hover{
	text-decoration:underline;
}
#sch_list table.outTbl th .reserve{
	width:80px;
	border-radius:3px;
	margin-top:3px;
	background:#ff9f15;
	text-align:center;
}
#sch_list table.outTbl th .reserve:hover{
	background:#ffb449;
}

#sch_list table.outTbl th .reserve a{
	display:block;
	padding:2px;
	text-decoration:none;
	color:#FFF;
	font-size:12px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight:bold;
}


#sch_list table.outTbl td{
	width:90%;
	padding-bottom:30px;
}

#sch_list .time{
	background-size:100%;
	width:100%;
	margin:0 0 10px;
}
#sch_list .time table.inTbl{
	width:100%;
	background:none;
}
#sch_list .time table.inTbl thead th{
	width:180px;
	background:#FFF;
	padding: 0;
	margin:0;
	vertical-align:bottom;
}

#sch_list .time table.inTbl thead th h4{
	padding:8px;
	text-align:center;
	font-size:14px;
}

#sch_list .time table.inTbl thead th img{
	display:block;
	width:100%;
}
#sch_list .time table.inTbl tbody th{
	width:15%;
	padding:0 0 0 3px;
	vertical-align:middle;
	background:#e9e9e9;
	border-bottom:1px dotted #ccc;
	border-right:1px dotted #F5F5F5;
	text-align:left;
	text-align:center;
}
#sch_list .time table.inTbl tbody td{
	width:85%;
	padding: 0;
	border-bottom:1px dotted #ccc;
	background-size:100%;
}
#sch_list .time table.inTbl tbody td:nth-child(odd){
	background:#e8e8e8;
}
#sch_list .time table.inTbl tbody td:nth-child(even){
	background:#f4f4f4;
}



#sch_list .time table.inTbl tbody tr.model th{
	background:url(../images/status/th_bg.png) #ffa6c5;
	text-align:center;
}
#sch_list .time table.inTbl tbody tr.schedule th{
	background:#D9d9d9;
	font-weight:100;
	text-align:center;
}
#sch_list .time table.inTbl tbody td.status{
	position:relative;
	vertical-align:middle;
}

#sch_list .time table.inTbl tbody tr.studio th,#sch_list .time table.inTbl tbody tr.studio td{
	height:42px;
	font-size:12px;
	line-height:1.1;
}
#sch_list .time table.inTbl tbody tr.model th,#sch_list .time table.inTbl tbody tr.model td{
	height:40px;
	font-size:12px;
line-height:1.1;
}
#sch_list .time table.inTbl tbody tr.schedule th,#sch_list .time table.inTbl tbody tr.schedule td{
	height:15px;
	font-size:12px;
	line-height:1.1;
}

#sch_list table.outTbl .mes{
	margin:0 0 15px;
	text-align:center;
	font-size:11px;
	color:#333;
}

#modelArea{
	display:flex;
	flex-wrap: wrap;
	justify-content:space-between;
	width:100%;
}

/*
=====================================================*/

.status_section{
	width:47%;
	margin-bottom: 1.5rem;
	padding:2%;
	box-sizing: border-box;
	border:1px solid #f0f0f0;
}

.status_section .section{
	display: flex;
	justify-content: flex-start;
	flex-wrap:wrap;
	width:100%;
}
/**/
.status_section .imgArea{
	width:240px;
}

/**/
.status_section .infoArea{
	width:calc(100% - 280px);
}

/**/
.status_section .infoArea .name{
	margin: 0 0 10px;
	font-size: 22px;
	white-space: nowrap;
}
.status_section .infoArea .time{
	font-size: 18px;
	line-height: 1.2;
}
.status_section .infoArea .time span{
	display: block;
	margin:  0 0 6px;
	font-size:11px;
	color: #1FB073;
}



/**/
.status_section .infoArea .priceArea{
	margin: 25px 0;
}
.status_section .infoArea .priceArea .c_price li{
	display: block;
	margin: 0 0 4px;
	padding:3px 10px;
}
/* プライステーブルはcommon.css */


/**/

.status_section .timelineArea{
	position: relative;
}
.end_time{
	position: absolute;
	right: -10px;
	top:0;
	font-weight: bold;
	font-size: 12px;
}
/* timeline number */

.status_section .timelineArea ul.timelineNum{
	display: table;
	table-layout: fixed;
	width:100%;
	margin: auto;
	padding:0;
}
.status_section .timelineArea ul.timelineNum li{
	display: table-cell;
	font-size: 11px;
	box-sizing: border-box;
}
/* timeline table */

table.timelineTbl{
	width:100%;
	table-layout: fixed;
}
table.timelineTbl th,table.timelineTbl td{
	box-sizing: border-box;
	padding:0;

}
table.timelineTbl thead{}
table.timelineTbl thead th{
	position:relative;
	left:-8px;
	font-size: 12px;
}
table.timelineTbl tbody{}
table.timelineTbl tbody td{
	background:#f4f4f4;
}
table.timelineTbl tbody td:nth-child(even){
	background:#e9e9e9;
}
/* ------------ reserveArea --------------- */
.status_section .timelineArea .reserveArea{
	position: relative;
}
.status_section .timelineArea .reserveArea table.timelineTbl tbody td{
	height: 30px;
}
.status_section .timelineArea .reserveLine{
	position: absolute;
	left:0;
	top:21px;
	width: 100%;
	height: 30px;
	z-index:80;
}
.status_section .timelineArea .reserveLine .inner{
	width:100%;
	height: 100%;
	position: relative;
}
.status_section .timelineArea .reserveLine .pop{
	position:absolute;
	top:2px;
	height:13px;
	padding:4px 0;
	background:rgba(245,0,92,0.6);
	text-align:center;
	z-index:90;
}

/* ------------ schArea --------------- */
.status_section .timelineArea .schArea{
	position: relative;
	margin-bottom:12px;
}
.status_section .timelineArea .schArea table.timelineTbl tbody td{
	height: 10px;
	background:none;
}
.status_section .timelineArea .schArea .schLine{
	position: absolute;
	left:0;
	top:0px;
	width: 100%;
	height: 12px;
	z-index:80;
}
.status_section .timelineArea .schLine .inner{
	width:100%;
	height: 100%;
	position: relative;
}
.status_section .timelineArea .schLine .pop{
	position:absolute;
	top:0px;
	height:4px;
	padding: 0;
	background:rgba(0,161,245,0.8);
	text-align:center;
	z-index:90;
}

/* ------------ schArea --------------- */



.status_section .toReserve a{
	display: block;
	width:160px;
	margin: auto;
	padding:12px 20px;
	text-align: center;
	color: #fff;
	background:#686868;
	border-radius:3px;
}
.status_section .toReserve a:hover{
	background:#555;
}