@charset "utf-8";

/* ドキュメント基本 */

:root {
	--headwidth: calc(100vw - 1em);
	--pcmaxwidth: 1280px;
	--pcmaxwidth2: 768px;
}

html {
	height: 100%;
}

body {
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-size: 16px;
	line-height: 1.8em;
	color: #333;
	background-color: #96FFFF;
    background-image: url(img/bg_horse.png),url(img/bg.png) ;
    background-position: right bottom -10px,left bottom -10px;
	background-repeat: no-repeat,repeat-x;
	background-attachment: fixed;
    overflow: hidden;
}

body, form {
	height: 100%;
	margin: 0;
	padding: 0;
}

header, main, footer {
	display: block;
	box-sizing: border-box;
}

header {
	position: fixed;
	width: 100%;
	height: 100px;
	padding: 0 0 1em;

	z-index: 2;
}

main {
    position: absolute;
    overflow: hidden;
    width: 100%;
    top: 100px;
    bottom: 0;
    margin-bottom: 50px;
    z-index: 1;
    left: 1px;
}

main section {
	display: block;
    max-width: 1280px;
    margin: 0 5% 5em 5%;
}

footer {
	position: fixed;
	padding: 0.5em 0;
	bottom: 0;
	
	z-index: 2;
}

button, .button {
	cursor: pointer;
}


/* 上へボタン */
#pageTopButton {
	display: none;
}

#pageTopButton.hide {
	bottom: -3em;
	opacity: 0;
}


/*--------------------------------------------------------------
ポップアップ画面 
-----------------------------------------------------------------*/

#dialogDetail {/*お知らせとマニュアル以外*/
	display: none;
	position: absolute;
    top: 0;
    left:0;
	width: 100%;
    height: 100%;
	z-index: 10000;
	background:rgba(0,0,0,0.8);
}
.dialogDetail_yellow{/*お知らせとマニュアル以外*/
    background: url("img/dialogbg.png");
    width: 80%;
    max-width: 600px;
    padding: 10px;
    z-index: 9999;
    position: absolute;
    top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    border-radius: 10px;
    max-height: 80%;
    overflow: auto;
}

#dialogDetail a:first-of-type,
#dialogInformation a:first-of-type {/*ポップアップ閉じる*/
    display: block;
    margin-top: -10px;
}

#topPage #dialogDetail #detailDate,
#calendar #dialogDetail #detailDate,
#dialogDetail #dialogCaption,
.dialogInformation_yellow .infopoptit{/*ポップアップタイトル*/
    text-align: center;
    font-weight: 900;
    margin-top: -20px;
}

.dialogDetail_yellow div{
    margin: 0 auto;
    line-height: 2.5em;
}

.dialogDetail_yellow label{
    display: inline-block;
    width: 30%;
    text-align: right;
    font-size: 90%;

}
.dialogDetail_yellow select{
    display: inline-block;
    width: 60%;
    height: 30px;
    cursor: pointer;
}

.dialogDetail_yellow textarea {
    display: inline-block;
    width: 60%;
    vertical-align: middle;
    margin-top:10px;
    margin-bottom:10px;
}

.dialogDetail_yellow #btnDialog{
    display: block;
    margin: 5% auto 2% auto;
    background: url("img/button_save.png") no-repeat;
    backgrpund-color:rab(0 0 0 0);
    font-size: 0;
    width: 133px;
    height: 34px;
    border: none;
    cursor: pointer;
}

.dialogDetail_yellow #btnDialog:hover,
.dialogDetail_yellow #buttonAppend:hover,
.dialogDetail_yellow #buttonCancel:hover{
  opacity: 0.8;
}
.dialogDetail_yellow #btnDialog{
    background: url("img/button_save.png") no-repeat;
}

#topPage #dialogDetail .dialogDetail_yellow #listEventData li {/*今週の予定ポップアップ*/
    border-radius: 10px;
    background-color: white;
}
 .dialogDetail_yellow #listEventData h5{
    text-align: center;
    font-size: 90%;
    color: white;
    line-height: 180%;
    }
.dialogDetail_yellow #listEventData li.popup_nyuukyu {/*入厩レッド*/
    border: red solid 4px;
}
.dialogDetail_yellow #listEventData h5#eventJoin {
    background-color: red;
}
.dialogDetail_yellow #listEventData li.popup_ido {/*移動水色*/
    border: #3FA9F5 solid 4px;
}
 .dialogDetail_yellow #listEventData h5#eventMove {
    background-color: #3FA9F5;
}
.dialogDetail_yellow #listEventData li.popup_houboku {/*放牧緑*/
    border: #009245 solid 4px;
}
 .dialogDetail_yellow #listEventData h5#eventGraze {
    background-color: #009245;
}
.dialogDetail_yellow #listEventData li.popup_masshou {/*放牧緑*/
    border: #333 solid 4px;
}
 .dialogDetail_yellow #listEventData h5#eventRemove {
    background-color: #333;
}
.dialogDetail_yellow #listEventData li.popup_shusso {/*放牧緑*/
    border: #EC0BC2 solid 4px;
}
 .dialogDetail_yellow #listEventData h5#eventRace{
    background-color: #EC0BC2;
}
#topPage #dialogDetail .dialogDetail_yellow #listEventData li span{/*今週の予定ポップアップ*/
     color: black;
    display: block;
    margin: 10px;
    font-size: 90%;
    line-height: 130%;
    border-bottom: dotted 2px #B6B6B6
}
/* イベント一覧：今週の予定、カレンダー共通 */

#topPage #dialogDetail #listEventData ul,
#calendar #dialogDetail #listEventData ul {
	list-style: none;
}

#topPage #dialogDetail #listEventData li[data-cnt="0"],
#calendar #dialogDetail #listEventData li[data-cnt="0"] {
	display: none;
}

#topPage #dialogDetail #listEventData li:not(:last-child),
#calendar #dialogDetail #listEventData li:not(:last-child) {
	margin-bottom: 0.5em;
}

#topPage #dialogDetail #dataEmpty.hide,
#calendar #dialogDetail #dataEmpty.hide {
	display: none;
}
/* ----------------------------------------------
トップページお知らせ・マニュアルポップアップ 
------------------------------------------------*/
#dialogInformation,
#dialogInformation_fq{
	display: none;
	position: absolute;
    top: 0;
    left:0;
	width: 100%;
    height: 100%;
	z-index: 10000;
	background:rgba(0,0,0,0.8);
}
.dialogInformation_yellow{
    background: url("img/dialogbg.png");
    width: 80%;
    max-width: 600px;
    padding: 10px;
    z-index: 9999;
    position: absolute;
    top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    border-radius: 10px;
    max-height: 80%;
    overflow: auto;
}
#naviwap{/*マニュアルボタン*/
    width: 90%;
    margin: 0 auto;
}
#naviwap ul{
    width: 100%;
    margin: 20px auto;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
}
#naviwap li{
    width: 70px;
    height: 70px;
    text-align: center;
}
#naviwap li img{
    display: block;
    width: 35px;
    height: 30px;
    margin: 0 auto;
}
#naviwap li a{
   font-size: 80%;
    color: royalblue;
    text-decoration: none;
}
#naviwap li a:hover{
    text-decoration: underline;
}
.dialogInformation_yellow .main_content{/*マニュアル本文*/
     width: 90%;
    margin: 0 auto 20px;
}
.dialogInformation_yellow .ico_pagetop{
    display: block;
    width: 35px;
    height: 30px;
    margin-left: 85%;
}
@media screen and (min-width: 1024px) {
    .dialogInformation_yellow .ico_pagetop{
    margin-left: 90%;
}
}
.dialogInformation_yellow h1{
    font-weight: bold;
    padding:0 0 3px 40px;
    border-bottom: 2px #000000 solid;
    position: relative;
}
.dialogInformation_yellow h1 img{
    width: 35px;
    height: 30px;
        display: block;
    position: absolute;
    bottom: 3px;
    left: 0;
}
.dialogInformation_yellow  dl{
    padding: 10px 0;
    line-height: 150%;
}
.dialogInformation_yellow #week dt{
    padding: 1px 0 0 0px;
    color: black;
    background: none;
}
.dialogInformation_yellow #week dd{
    padding: 1px 0 10px 0px;
    background: none;
}
.dialogInformation_yellow #week p{
    font-size: 80%;
    line-height: 150%;
    margin-bottom: 40px;
}
.dialogInformation_yellow dt{
    display: block;
    position: relative;
    padding: 1px 0 0 38px;
    box-sizing: border-box;
    background: url("img/fq_q.png") no-repeat top 0 left -5px;
    font-weight: bold;
    font-size: 90%;
    color: red;
    margin-bottom: 5px;
}
.dialogInformation_yellow dd{
    display: block;
    position: relative;
    min-height: 28px;
    padding: 1px 0 10px 38px;
    box-sizing: border-box;
    background: url("img/fq_a.png") no-repeat top 0 left -5px;
    margin-bottom: 15px;
    font-size: 80%;
    border-bottom: 1px dotted #666;
}
.dialogInformation_yellow dd:last-of-type{
    border-bottom: none;
    padding-bottom: 0px;
    margin-bottom: 10px;
}
/* ----------------------------------------------
システムメッセージエリア 
------------------------------------------------*/

#messageArea {
	display: block;
	padding: 0 0.5em;
    /*margin-bottom: 15px;
	background: repeating-linear-gradient(135deg, rgba(147, 112, 219, 0.25) 0px, rgba(106, 90, 205, 0.25) 5px);
    /*border: red 5px dotted;
    border-radius: 10px;
    color: red;*/
    color: red;
}
#messageArea2{/* 調教エラー表示 */
    color: red;
}


/* ----------------------------------------------
ヘッタ 
------------------------------------------------*/
header #userInfo {
	height: 35px;
	font-weight: 700;
	color: white;
    background-color: #58391B5;
    font-size: small;
    background: url("img/headerLogo.png") no-repeat 5% center #58391B;/*ロゴ右マージン*/
    padding: 0 5%;/*お知らせとユーザー名の左マージン*/
    text-align: right;
    overflow: hidden;
}

#userInfo #userName {
	display: inline-block;
    padding-top: 4px;
}
/* お知らせボタン */
#userInfo #infoButtonPanel,
#userInfo #infofaqPanel {
    display: inline-block;
}

#userInfo #infoButtonPanel a {
	display: block;
     width: 25px;
	background: url(img/buttonInfoOff.png) no-repeat ;
    font-size: 0px;
    margin-left: 10px;
}

#userInfo #infoButtonPanel a:hover {
	background: url(img/buttonInfoOn.png) no-repeat ;
}

/* faqボタン */
#userInfo #infofaqPanel a {
	display: block;
	background: url(img/buttonfqOff.png) no-repeat 3px -1px;
    font-size: 0;
     width: 20px;
}
#userInfo #infofaqPanel a:hover {
    background: url(img/buttonfqOn.png) no-repeat 3px -1px;
}

/* 情報パネル */

header #infoPanel {
	display: flex;
	position: relative;
	max-width: 1280px;
    margin: 0px auto;
    margin: 0px 5%
}
@media screen and (max-width: 350px){
    header #infoPanel {
    margin: 0px 1%;/*ページタイトルとカレンダーのマージン*/
}
}
/* 情報パネル－左 */

#infoPanel #infoLeft {
    flex:1 1 auto;
	overflow: hidden;
	
}

/* 画面名パネル */

#infoLeft #pagePanel {
    margin: 0;
    height: 50px;
}
#infoLeft #pagePanel img{
    display: block;
    margin: 0px;
    width: 203px;
    height: 52px;
}

/* 情報パネル－右 */

#infoPanel #infoRight {
    width: 100px;
    text-align: right;
}


/* 日付パネル */

#infoRight #datePanel {
}

#datePanel > span {
	display: inline-block;
    margin: 0 -1px 0 -5px;;
	width: 50px;
	height: 52px; 
	line-height: 55px; 
	font-size: 20px; 
	text-align: left; 
    font-weight: 900; 
    text-indent: 14px;
    letter-spacing: -0.1em;
}

#datePanel #numMonth {
	background : url(img/buttonMonth.png) no-repeat
}

#datePanel #numDay {
	background: url(img/buttonDay.png)  no-repeat ;
}

/*---------------------------------------------------------------------------
 メニューバー 　旗
---------------------------------------------------------------------------*/

#menuPanel {
	display: block;
	position: fixed;
	left: -283px;
	bottom: 10px;
	width: 274px;
	height: 147px;
	transition: 0.5s;
	background-image: url(img/menuPanel.png);
	z-index: 9999;
}

#menuPanel.show {
	left: 0;
	opacity: 1;
}

#menuDeco {
	display: block;
	position: absolute;
	right: 0;
	top: -37px;
	width: 230px;
	height: 37px;

	background-image: url(img/menuDeco.png);
}

#menuFlagPole {
	display: block;
	position: absolute;
	left: 274px;
	top: -3px;
	width: 7px;
	height: 150px;
	background-image: url(img/menuFlagPole.png);
}

#menuFlagMain {
	display: block;
	position: absolute;
	left: 281px;
    top: 108px;
    width: 48px;
	height: 48px;
    background-image: url(img/menuFlagMain2.png);
    transition: 0.5s;
}

#menuFlagMain.show {
	top: 0;
}

#menuButtonPanel {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	margin: 14px 0 0 14px;
}

#menuButtonPanel > a {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 56px;
	height: 56px;
	margin: 0 7px 7px 0;
	background-image: url(img/buttonMenuBaseOff.png);
	background-repeat: no-repeat;
}

#menuButtonPanel > a:hover,
#menuButtonPanel > a.selected {
	background-image: url(img/buttonMenuBaseOn.png);
}

#menuButtonPanel > a > img {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
}


/*----------------------------------------------------------------- 
管理馬情報 
----------------------------------------------------------------- */

#horseList #tabSelector {
	display: flex;
    width: 80%;
    margin: 0 auto;
    max-width: 1100px;
}

#horseList #tabSelector li {
	display: block;
	box-sizing: border-box;
	border-radius: 0.5em 0.5em 0 0;
	margin-right: 0.3em;
	text-align: center;
	cursor: pointer;
    padding: 0px 13px;
    color:white;
    font-weight: bold;
    font-size: 90%;

}

#horseList #tabSelector li.current_red {
	background-color: #FF1D25;
}
#horseList #tabSelector li.current_green {
	background-color: #009245;
}
#horseList #tabSelector li.current_blue {
	background-color: #0071BC;
}
/*#horseList #tabPages {
    overflow-y: hidden;
    max-height:100%;

}*/

#horseList #tabPages #tabPageCurrent ul{
    background-color: #FF1D25;
}
#horseList #tabPages #tabPageGraze ul{
    background-color: #009245;
}
#horseList #tabPages #tabPageYoung ul{
    background-color: #0071BC;
}
/*------------------------------------------------------------------------------------------------------------*/
.horseList li{
    position: relative;
}
.horseList li .box_nameprize,
.horseList li .box_infoDbtm{
    display: flex;
     align-items: center;
     justify-content: space-between;
}
.horseList li .box_nameprize{
   border-bottom: dotted 2px hsla(38,78%,49%,1.00);
    padding-bottom: 5px;
    margin-bottom: 5px;
}
#tabPages .horsecard .horsemane{
    white-space: nowrap;
    font-weight: bolder;
}
.prizeList{
    line-height: 10px;
    text-align: right;
    margin-left: 15px;
}
.prizeList img{
   
    width: 14px;
    height: 18px;
}
.horseInfo_list {/*カレンダー入力でも使用*/
	/*width: calc(100% - 50px);*/
    font-size: 80%;
    line-height: 20px;
    font-weight: bolder;
     margin-top: 5px;
}
#horseList .horseInfo_list {
	width: 100%!important;
}

.horse_diary{
    display: block;
    height: 48px;
}

.horseInfo_list span{
    background-color: orange;
    padding: 2px 10px;
    border-radius: 5px;
    margin-right: 4px;
    font-size: 90%;
    box-shadow: 1px 1px #666666;
    line-height: 21px;
}
span.stayCount{/*場所*/
        background-color:#A0D600;
}
span.race_yellow{/*レース*/
        background-color:#E1E70A;
}

span.race_pink{/*節*/
        background-color:darksalmon;
}

#horseList #tabPages > li {
	display: none;
}

#horseList #tabPages > li.current {
	display: block;
    /*overflow: auto;
    height: 85vh;*/
    margin-bottom: 5rem;
    
}
/*NT-004 メモ機能-------------------------------------------------------------------------------------------------*/
.acMenu {
     margin: 17px 0 -5px 0;
}
.acMenu dt{
    width:100px;
    height:33px;
    font-size: 0%;
    cursor:pointer;
    text-align: center;
    background: url("img/button_kotai.png") no-repeat;
    background-size: cover;
}

.acMenu dd{
    background:#ea9318;
    color: white;
    margin: 0 0 0.5rem 0;
    line-height:18px;
    text-align:left;
    display:none;
    font-size: 80%;
    padding: 4%;
    border-radius: 0 5px 5px 5px;
}

/*.tooltip {
    width: 230px;
    padding:5px;
    font-size:12px;
    border-radius: 10px;
    background: #ffffa6;
    color:#000;
    position:absolute;
	right: 50px;
    top:50px;
    margin:-30px 0 0;
    height: 30px;
    min-height: 70px;
}*/
/*データ・日誌*/
.newbtn_wap{
    float: right;
    width: 145px;
    margin-top: 10px;
}
.newbtn_wap ul{
    display: flex;
    justify-content:space-between;
    height: 35px;
    background-color: #ffffef!important;
}
.newbtn_wap li{
    list-style: none;
   
}

.newbtn_wap li img{
    object-fit: cover;
}
.newbtn_wap li img:first-child:focus{
    outline: none;
}

/*---------------------
  ふきだし

.balloon{
 position: absolute;
 bottom:35px;
  width: 230px;
  height: 73px;
  padding: 7px 12px;
  color: #000;
  background: #fffb66;
  text-align: left;
  border-radius: 5px;
  font:  12px / 1.5 "游ゴシック";
    overflow: scroll;

}

/*---------------------
  ふきだしの三角形部分

.fukidasiallow{
    display: block;
  border-style: solid;
  border-width: 10px 10px 0px 10px;
  border-color: #fffb66 transparent transparent transparent;
  position: absolute;
  top: -8px;
  left: 20px;
}

/*--------------------------------------------------------
ログイン 
--------------------------------------------------------*/
#login header, #login footer {
	display: none;
}

#login main {
	top: 0;
}

#loginBox {
	display: flex;
	flex-direction: column;
	width: 300px;
	margin: 0 auto;
	align-items: center;
	text-align: center;
	padding-top: 4.6em;
}

#loginBox #logoUmaTore {
	width: 191px;
	height: 129px;
	margin-bottom: 1em;
}

#loginBox input {
	margin-top: 1em;
	width: 10em;
	font-size: 1em;
	padding: 5px 10px;
}

#loginButton {
	display: block;
	margin-top: 2.8em;
	width: 150px;/*sato0925*/
	height: 55px;/*sato0925*/
	background-image: url(img/buttonLoginOff.png);
}

#loginButton:hover {
	background-image: url(img/buttonLoginOn.png);
}

/*----------------------------------------------------------------
今週の予定
------------------------------------------------------------------*/

#topPage #schedulePanel {
    border-bottom: black 1px solid ;
    border-left: black 1px solid ;
}
@media screen and (max-width: 768px) {
#topPage #schedulePanel {
    font-size: 90%;
}
}
.weekbt{/*pre nextボタン*/
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    background-color: black;
    border-radius: 10px;
    z-index: 10;
    color: white;
    display: flex;
    justify-content: space-between;
    height: 38px;
}
.weekbt span{
    display: inline-block;
    font-size: 90%;
    font-weight: bolder;
    margin-top: 5px;
}
.weekbt a.button{
    width:  38px;
    padding: 0px;
}
.weekbt a.button :hover{
    opacity: 0.8;
}

#topPage #schedulePanel .dayPanel {
	display: block;
	position: relative;
    max-width: 1280px;
    margin: 0 auto;
	background-color: white;
    border-top: 1px solid black;
    border-right: 1px solid black;
    height: 85px;  
}
#topPage #schedulePanel .dateText {
	display: block;
    background-color: #E9C919;
    border-bottom: black 1px solid;
    padding-left: 10px;
    font-weight: bolder;
    height: 25px;
}

#topPage #schedulePanel .dayPanel:nth-of-type(6) .upperPanel .dateText {
    background-color: #29abe2;
}

#topPage #schedulePanel .dayPanel:nth-of-type(7) .upperPanel .dateText {
	background-color: #ed1c24
}

#topPage #schedulePanel .racePanel {/*開催レース場所*/
	display: block;
    width: 90%;
    height: 20px;
    padding: 4px 0 5px 10px; 
}

#topPage #schedulePanel .lowerPanel {/*入厩枠*/
	display: block;
     width: 90%;
     padding: 0 0 10px 10px;
}
#topPage #schedulePanel .btn_more{/*詳細*/
	display: block;;
    width: 50px;
    height: 50px;
    position: absolute;
    right: 5px;
    top: 33px;
}
#topPage #schedulePanel span{/*曜日*/
    color: black;
    padding: 2px 10px;
    border-radius: 2px;
    white-space: nowrap;
    line-height: 1.3;
    font-size: 14px;
}
#topPage #schedulePanel .racePanel span,
#topPage #schedulePanel .lowerPanel span{/*今週予定アイコン*/
     color: white;
    padding: 2px 2px 2px 3px;
    border-radius: 2px;
    white-space: nowrap;
    line-height: 1.3;
    display: inline-block;
    letter-spacing: 2px;
    font-size: 12px;
}

#topPage #dialogInformation ul{
    overflow: hidden;
    list-style: none;
    margin: 10px;
    font-size: 90%;
}
#topPage #dialogInformation .targetDate{
    display: block;
    font-weight: bolder;
    border-bottom: 1px black dotted;
    border-top: 1px black dotted;
    background: rgba(0,0,0,0.2);
    text-align: center;
}
#topPage #dialogInformation h3{
    margin-top: 5px;
}
#topPage #dialogInformation p{
    margin-top: 5px;
    padding-bottom: 30px;
    line-height: 1.5em;

}
/*---------------------------------------------------------------
カレンダー 
-----------------------------------------------------------------*/

#calendar #calendarPanel {
	display: table;
	table-layout: fixed;
	width: 100%;
	max-width: 1280px;/*20201007佐藤変更*/
	background-color: white;
}

#calendarPanel th,
#calendarPanel td {
	box-sizing: border-box;
	border: 1px solid black;
}

#calendarPanel thead tr:last-child th {
	font-size: 14px;
	font-weight:bolder;
    background-color: #E9C919;
    /* border-top: solid 20px #99FFFF;*/
}

#calendarPanel thead tr:last-child > th:nth-of-type(6)
/*#calendarPanel tbody tr > td:nth-of-type(6)*/ {
	background-color:#29abe2;
}
#calendarPanel tbody tr > td:nth-of-type(6) {
	color:blue;
}
#calendarPanel thead tr:last-child > th:nth-of-type(7){
	background-color: #ed1c24;
}
#calendarPanel tbody tr > td:nth-of-type(7){
	color: #ed1c24;
}

#calendarPanel td{/*日付*/
     text-align: center;
    font-size: 0.8rem;
    font-weight: bolder!important;
}
#calendarPanel .statusicon:first-child{/*入〜場所アイコン*/
    justify-content:  flex-start;
}
#calendarPanel .statusicon{/*入〜場所アイコン*/
    margin: 5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

}
#calendarPanel .statusicon_kakutei{/*確定アイコン*/
    margin: 10% auto 5% auto;
}
#calendarPanel .statusicon_kakutei span{/*確定アイコン*/
    color: white;
    padding: 1px;
    margin: 5%;
    border-radius: 2px;
    display: block;

}
#calendarPanel .statusicon span{
    color: white;
    padding: 1px 3px;
    margin: 2%;
    border-radius: 2px;
    line-height: 1.4;
    display: inline-block;
    font-size: 12px;
    font-weight: bolder !important;
    height: 17px;

}
.ico_nyukyu {
    background-color: red;
}
.ico_ido {
    background-color: #3FA9F5;
}
.ico_houboku {
    background-color: #009245;
}
.ico_masshou {
    background-color: #333;
}
.ico_blue {
    background-color:darkblue;
}
.ico_darkgreen {
    background-color: darkgreen;
}
.ico_orenge{
    background-color:darkorange;
}
.ico_darkred{
    background-color:firebrick;
}
.ico_brown{
    background-color:brown;
}
.ico_lightseagreen{
    background-color:lightseagreen;
}

/*------------------------------------------------------------------------
カレンダー入力画面 
--------------------------------------------------------------------------*/

#calendarEntry a#btnGoBack  {
    font-size: 0;
}
#calendarEntry .clender_shussho  {/*出走*/
    width: 94%;
    margin: 0 auto 20px auto;
    list-style: none;
}
#calendarEntry .clender_shussho li {
    margin: 10px 0 0 0;
    padding: 3% 4% 0px 4%;
    box-shadow: 2px 2px #666666;
    transition: .3s;
    background-image: url(img/dialogbg.png_white.png);
    background-color: #ffffef;
    border: #666 1px solid;
    border-left: dotted 10px #333;
    top: 0.5em;
    left: 0.2em;
    border-radius: 10px;
    font-size: 90%;
}
#calendarEntry .clender_shussho h5{
    background-color: #666;
    text-align: center;
    font-size: 90%;
    color: white;
    line-height: 180%;
    margin-top: 5px;
    }

#calendarEntry .clender_shussho li span{
     color: black;
    display: block;
    margin: 10px;
    font-size: 90%;
    line-height: 130%;
    border-bottom: dotted 2px #B6B6B6
}

.title_status{/*画像タブタイトル*/
    display: block;
    width: 286px;
    margin-top: 10px;
    margin-left: 7%;
    height: 20px;
}

/*---------------------------------------------------------------------------------------*/
/*カラム*/
/*---------------------------------------------------------------------------------------*/
.column {   
    width: 90%;
    padding: 15px 15px;
    border-radius: 10px;
    list-style: none;
    margin: 0 auto;
}
.col {   
     width: 95%;
    margin: 0 auto;

}

/*  1366px 以下 */
@media screen and (max-width: 590px) {
    .column{
        width: 90%;
    }
    
     .col {
         width: 90%;
    }
}
@media screen and (min-width: 590px) {
    .clender_shussho br{
        display: none;
    }
}

/*入厩赤色---------------------------------------------------------------------*/
.nyukyu_wap{
    background-color: red;
}
/*移動水色*/
ul.ido_wap{
    background-color: #3FA9F5;
}
/*放牧緑*/
ul.houboku_wap{
    background-color: #009245;
}
/*抹消グレー*/
ul.massho_wap{
    background-color: #333333;
}
/*---------------------------------------------------------------------
クリーム色共通
---------------------------------------------------------------------*/
.horsecard{
    display: block;
    background-color: #ffffef;
    padding: 5px 10px;
    border-radius: 10px;
    box-shadow: 2px 2px #666666;
    transition: .3s;
    border: double 5px #fdcb63;
    overflow: hidden;
    margin-bottom: 10px;
    position: relative;
}
.horsecard:last-of-type{
    margin-bottom: 0px;
    
}
.horsecard .horsemane{/*馬名----*/
    font-size: 15px;
    color: black;
    font-weight: bolder !important;
    letter-spacing: -0.03em;
}
.icoh{/*馬アイコン位置*/
    margin: 0px -1px -13px 0;
    display: inline-block;
    
}
/*ボタンwap---*/
.horsecard .editbtn_wap{
    width: 50px;
    float: right;
    margin-top: -30px;
}

.horseDelete{/*削除ボタン*/
	display: block;
	width: 46px;
	height: 25px;
    font-size: 0;
}
.horseDelete:hover{
    opacity: 0.8;
}
.horse_edit{/*編集ボタン*/
	display: block;
	width: 46px;
	height: 48px;
    font-size: 0;
    margin-bottom: 10px;
}
.horse_edit:hover{
    opacity: 0.8;
}

/*テキスト-*/
.horsecard .horseInfo{
    float: left;
	width: calc(100% - 80px);
    margin: 5px 5px 0 5px;;
    font-size: 90%;
    line-height: 130%;
}
.btn_append,
.horseAppend{
    display: block;
    width: 133px;
    margin: 10px auto 0 auto;
    font-size: 0;
}


/*--------------------------------------------------------------
日誌 
---------------------------------------------------------------*/
#diary #mainContent  {
    overflow:hidden;
    max-height: 100% !important;
}

#diaryFrame{/*馬名*/
    margin:0;
}
#diaryFrame .horsecard{/*通常inline-blockを変更*/
    display: block;
    margin: 0 auto;
}
.horse_btn{
    width: 60px;
    position: absolute;
    bottom:5px;
    right: 0;
}

.horse_btn .diary_arrow:last-of-type{
    width: 24px;
    position: absolute;
    right:5px;
    bottom:0px;
}
#diary #diaryEntryPanel {/*日誌書き込みエリア*/
    margin: 10px 0 0 0;

    box-shadow: 2px 2px #666666;
    background-image: url("img/dialogbg_white.png");
    background-color:#ffffef;
    border: #666 1px solid;
    border-left: dotted 10px #333; /*ドットの大きさ、高さ*/
    top:0.5em; /*位置*/
    left:0.2em; /*位置*/
    border-radius: 10px;
    font-size: 85%;


}
.inner_scroll{
      padding: 3% 4% 0px 4% ;
      /*max-height: 60vh;*/
      max-height: calc(70vh - 70px);
      overflow-scrolling: auto;
      overflow-y: scroll;
       -webkit-overflow-scrolling:auto;
    
}
 @media screen and (max-height: 670px){
   .inner_scroll {
        max-height: calc(55vh - 70px);
}
}
 @media screen and (max-height: 600px){
   .inner_scroll {
            max-height: 42vh;
}
}
#diary #dateSelector {
	margin: 0px 0 30px 0 ;
    border-bottom: 2px  dotted #333;
}
#diary #dateSelector span {
    font-weight: 900;
    vertical-align: 15%;
}


#diary #dateSelector #buttonToday {
    margin: 3px 10px 0 0;
    float: right;
}

#diary .saveDiary  {
    display: block;
    margin: 10px auto 20px auto;
    width: 133px;
}
#diary .saveDiary:hover  {
    opacity: 0.8;
}
#diary ul#trainingList {
	margin-top: -15px;
    margin-bottom: 15px;
}

#diary ul#trainingList li {
	display: block;
    margin-bottom: 0.5em;
    padding: 5px 0 0 10px;
	background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;

}
#diary ul#trainingList li span{/*調教内容*/
    padding: 1px 10px;
	background-color: white;
    border-radius: 10px;
    font-size: 80%;
}
#diary ul#trainingList li .diarymamo{
    width: 30px;
    float: right;
    position: relative;
}
#diary ul#trainingList li .diarymamo p{
    display: block;
    background-image: url("img/button_memo.png");
    background-size: cover;
    font-size: 0;
    width: 23px;
    height: 26px; 
    cursor: pointer;
}
.tooltip {
    width: 230px;
    padding:5px;
    font-size:12px;
    border-radius: 10px;
    background: #ffffa6;
    color:#000;
    position:absolute;
    right: 5px;
    top:28px;
    margin:-30px 0 0;
    height: 30px;
    min-height: 70px;

}

/*#
#diary ul#trainingList li .diarymamo textarea{
     padding: 5px; 
     min-height: 35px;
    height: auto;
         display: none;
      width: 200px;
      position: absolute;
      right: 35px;
      top:0px;
      border-radius: 5px;
      background: #ffffa6;
      color: #000;
      font-size: 80%;
      border: 1px solid #000;
    
}

#diary ul#trainingList li .diarymamo p:hover + textarea {
      display: block;
    }
*/
#diary ul#trainingList li div.groupRow {/*併走*/
    font-size: 80%;
}
#diary ul#trainingList li .groupRow span{/*併走馬*/
    padding: 0;
	background-color:transparent;
    color: black;
    border-radius: none;
    font-size: 100%;
}
#diary .entryRow {
	display: flex;
}
#diary .entryRow h5 {
	display: block;
	width: 7em;
    text-align: right;
    margin-right: 10px;
    font-weight: 900;
}

#diary .entryRow input,
#diary .entryRow textarea {
	display: block;
	width: calc(100% - 8em);
    margin-bottom: 10px;
    padding: 5px;
}

#diary .entryRow input.shortField {
	width: 20%;
    padding: 5px;
}
#diary .entryRowTime {
    padding: 0px 5px 5px 5px;
    margin-top: -5px;
}

#diary .entryRowTime input.shortField {
    display: inline-flex;
    padding: 5px;
    margin-bottom: 10px;
    width: 17%;
}

/*#diary #diaryForm {
    overflow: scroll !important;
    max-height: 30vw;

}
@media screen and (max-width: 350px){
   #diary #diaryForm {
    height: 25vw;
}*/

/*---------------------------------------------------------------
調教 
-----------------------------------------------------------------*/

#training #dateSelector {/*日付*/
    background-color:#000000;
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-radius: 10px;
    padding: 0px;
    margin-bottom: 3px;
    height: 38px;
}
#training #dateSelector span{/*日付・曜日*/
    flex-grow: 2;
    color: white;
    margin-top: 5px;
}
#training #dateSelector span:first-of-type{
    text-align: right;
}
#training #dateSelector a.button{/*preボタンnextボタン*/
}
#training #dateSelector a.button :hover{
    opacity: 0.8;
}
#training #dateSelector #buttonToday{
    margin: 7px 5px 0;
}
#training  #addwap {/*鞍追加*/
    z-index: 11;
    text-align: right;
    margin-right: 5%;
    
}
#training  #addwap a{
    font-size: 90%;
    font-weight: 900;
}
#training  #addwap a:hover{
    opacity: 0.8;
}
#training  #addwap img{
    margin: 0px 0 -5px  5px;/*アイコン中央*/
    width:25px;
    height:21px
}

#training  #trainingProgram {/*鞍追加以下*/
	display: flex;
    margin-bottom: 50px;/*マージン必須*/
	flex-direction: row;
}

#training .anmokuClass {/*鞍*/
	position: relative;
    width: 300px;
	min-width: 260px;
	padding: 1rem 1rem 0;
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.2);
}

#training .anmokuClass:not(:first-child) {
	margin-left: 20px;
}

#training .anmokuClass .anmokuTitle {
	display: inline-block;
    background-color: black;
    border-radius: 15px;
    color: white;
    width: 32%;
    text-align: center;
    font-size: 90%;
    font-weight: bolder;
}
#training .anmokuClass  input{
    width: 70px;
    border: none;
    font-size: 75%;
    font-weight: bolder;
    padding: 2px;
    margin: 0 0 3px 3px;
    border-radius: 3px;
}

 @media screen and (min-width: 570px){
   #training .anmokuClass  input{
    color: chartreuse;
    background-color:#505050;
}
}
     
#training .anmokuClass .anmokuDelete {
	display: inline-block;
    float: right;
    margin-right: -5px;
    font-size: 80%;
    font-weight: bolder;
}
#training .anmokuClass > a.anmokuDelete img {
    margin: 0 0 -5px 2px;
}
#training .horseInfo {
	display: block;
	position: relative;
	flex-direction: column;
	margin-top: 0.125em;
	line-height: 1.5;
	/*text-align: justify;*/
	background-color: rgba(240, 120, 0, 0.5);
    
    padding: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px #666666;
    overflow: hidden;
    margin: 10px 0;
    min-height: 95px;
}

#training .horseInfo > .horseName {
    font-size: 16px;
    font-weight: bolder !important;
}

#training .horseInfo[data-tlevel="1"]::after {/*軽め*/
	display: block;
	position: absolute;
	content: url(img/icoTrainingLight.png);
	width: 69px;
	height: 60px;
	bottom: -9px;
	left: -17px;
}

#training .horseInfo[data-tlevel="2"]::after {/*強め*/
	display: block;
	position: absolute;
	content: url(img/icoTrainingHard.png);
	width: 69px;
	height: 60px;
	bottom: -9px;
	left: -17px;
}

#training .horseInfo[data-tlevel="3"]::after {/*馬なり*/
	display: block;
	position: absolute;
	content: url(img/icoTrainingumanari.png);
	width: 69px;
	height: 60px;
	bottom: -9px;
	left: -17px;
}

#training .horseInfo[data-tlevel="4"]::after {/*一杯*/
	display: block;
	position: absolute;
	content: url(img/icoTrainingippai.png);
	width: 69px;
	height: 60px;
	bottom: -9px;
	left: -17px;
}

#training .horseInfo[data-tlevel="5"]::after {/*仕掛け*/
	display: block;
	position: absolute;
	content: url(img/icoTrainingsikake.png);
	width: 69px;
	height: 60px;
	bottom: -9px;
	left: -17px;
}

#training .horseInfo > span {
	display: block;
}

#training .horseInfo > .userName {/*担当者*/
    margin: 5px 0  0 50px;
    padding-left: 25px;
    background: url("img/ico_trainingp.png") no-repeat 2px -1px ;
    font-size: 80%;
    width: 115px;
    line-height: 17px;
}
#training .horseInfo > .trainingTitle {/*バーベル*/
    margin: 2px 0  -5px 50px;
    padding-left: 25px;
    background: url("img/ico_trainingm.png") no-repeat 0px 0px;
    font-size: 80%;
    width: 115px;
    line-height: 16px;
}

/******************************/
/* ADD 2020.11.26 kishida*/
#training .horseInfo > .trainingMemo {
    margin: 10px 50px 0 50px;
    font-size: 70%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    height:15px; /*未出力分の高さを揃える*/
    text-align: left;
    width: 50%;
}
/******************************/

#training .horseInfo .buttonPanel {
    width: 50px;
    position: absolute;
    top:10px;
    right: 7px;
}

#training .horseInfo .buttonPanel .button {
	display: block;
    margin-bottom: 3px;
}

#training .horseInfo .buttonPanel .button:hover {
	    opacity: 0.8;
}

#training .horseInfo .updaterInfo {
	position: relative;
	font-size: 10px;
}

#training .anmokuClass a.horseAppend {/*鞍追加*/
	display: block;
	margin: 20px auto;
	padding: 0;
    width: 133px;
	height: 34px;
}

#training .anmokuClass a.horseAppend:hover {
    opacity: 0.8;
}


#training #dialogDetail {
	
}

#training #dialogDetail_yellow > div {
	display: block;
	position: relative;
	margin: 0.25em 0.5em;
}

#training #dialogDetail_yellow > div > label {
	width: 4em;
}

#training #dialogDetail_yellow > div > select {
	min-width: 10em;
}

.dialogDetail_yellow div .colorbox {/*併走組*/
    display: inline-block;
    vertical-align: text-top;
    width: 60%;
}
.dialogDetail_yellow div .colorbox div{/*併走組*/
    display: flex;   
    flex-wrap: wrap;
    margin-top: -10px;

}
.dialogDetail_yellow div .colorbox div div{/*併走組*/
    display: inline-block;
    line-height: 110%;
     margin: 0px;/*必須*/
}

.dialogDetail_yellow div .colorbox span{/*併走組*/
    display:inline-block;
    /*background-color: aqua;*/
    width: 30px;
    font-size: 80%;
    padding: 5px 10px;
    text-align: center;
     margin: 5px 2px;
}
/*------------------------------------------------------------------------------
 番組表 
-------------------------------------------------------------------------------*/

#program #mainHeader {

}

#program #programSelector {
    background-color:#000000;
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-radius: 10px;
    height: 38px;
     margin-bottom: 10px;/*weekktとおなじ*/
}

#program #programSelector #prev2Button,
#program #programSelector #next2Button{
    border: none;
    border-radius: 0;
    padding: 0;
    background-color: none;
}
#program #programSelector a.button:hover {
    opacity: 0.8;
}
#program #programSelector a,
#program #programSelector h4{
    font-size: 80%;
    font-weight: bolder;
    color: white;
    background-color: rgba(255, 255, 255, 0.15);
    padding: 5px 2% 5px 2%;
}
@media screen and (min-width: 350px) {
#program #programSelector a{
    padding: 5px 4% 5px 4%;
}
}
@media screen and (min-width: 500px) {
#program #programSelector a{
    padding: 5px 7% 5px 7%;
}
}
#program #programSelector a:hover{
    text-decoration: underline;
}
#program #programSelector h4{
    background-color: rgba(255,255,255, 0.3);
}
#program #programSelector .activegreen{
    font-size: 110%;
    font-weight: bolder;
    color: #48FF09;
    letter-spacing: 0em;
    background: linear-gradient(transparent 10%,#005500	 50%);
}

#program #programSelector a span{
    font-size: 90%;
    font-weight:200;
    color: white;
    letter-spacing: 0em;
}
    #program #programImage{
      margin: 0 auto;
/*      width: 842px;*/
    
}

#program #programImage img { 
	/* height: 1191px; */
	/*background-color: rgba(160, 160, 160, 0.5);*/
}
#program #programImage #raceTable { 

}
#program #programImage span {
	display: block;
}
#program #dialogDetail .poptitle{/*ポップアップタイトル*/
    margin: 0px auto 5px auto;

    color: black;
    text-align: center;
}
#program #dialogDetail .poptitle span{
	font-size: 90%;
    font-weight: bolder;
    line-height: 135%;
     display: block;
}
#program #dialogDetail .btwap{/*登録・リセットボタンのwap*/
    margin: 20px auto;
    width: 250px;
}

.dialogDetail_yellow .btwap #buttonAppend{/*登録ボタン*/
    background: url("img/button_touroku.png") no-repeat;
    display: inline-block;
    font-size: 0;
    width: 133px;
    height: 34px;
    border: none;
    cursor: pointer;
    margin-right: 3%;
}
.dialogDetail_yellow .btwap #buttonCancel{/*リセットボタン*/
    background: url("img/button_reset.png") no-repeat;
     display: inline-block;
    font-size: 0;
    width: 103px;
    height: 34px;
    border: none;
    cursor: pointer;
    margin-right: 0;
}
#program #dialogDetail .btwap .button:hover{
    opacity: 0.8;
}
#program #dialogDetail #horseList{

}
#program #dialogDetail #horseList .editwap {
    display: flex;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0.2);
    margin: 3px 0;
    border-radius: 10px;
    padding: 7px;
    
}


#program #dialogDetail #horseList .editwap .edit{/*編集*/
    position: relative;
    display: block;
    margin: 0 0 3px 10px;
}
#program #dialogDetail #horseList .editwap .remove{/*削除*/
     position: relative;
    margin-top: 10px;
    display: block;
}
#program #dialogDetail #horseList .editwap img:hover{/*削除*/
    opacity: 0.8;
}
#program #dialogDetail #horseList .editwap div{/*馬名・騎手・入力*/
    margin-left: 10px;
    text-align: left;
    line-height: 130%;
}

#program #dialogDetail #horseList .editwap div span{/*馬名・騎手・入力*/
    font-size: 80%;
    font-weight: bolder;
    line-height: 135%;
}
#program #dialogDetail #horseList .editwap div br{/*馬名・騎手・入力*/
   height: 0;
}
#program #dialogDetail #horseList blockquote{
    margin: 10px auto;
    padding: 10px;
    border: 1px solid black;
    font-size: 80%;
    line-height: 130%;
}

/* ### 開発／デバッグ用
    
#mainContent .debug {
    margin-top: 30px;
	height: 2000px;
}
*/
#mainContent  {
    overflow: auto;
    max-height: 90% !important;
    margin: 0 auto;
    width: 90%;
    max-width: 1280px;
}

#horseList #mainContent  {
    overflow: auto;
    max-height: calc(100% - 60px);
    margin: 0 auto;
    width: 90%;
    max-width: 1280px;
}