*{
    margin:0;
    padding:0;
}

body{
    position:relative;
    background:#fff;
    font-family: 'Poppins', sans-serif;
}

a{
    text-decoration: none;
}

.allfield{
    background:#fff;
    padding-top:60px;
    position:relative;
}

#page_top {
    position: fixed;
    bottom: 30px;
    right: 20px;
}
#page_top a {
    background-color: #999;
    color: #fff;
    text-align: center;
    text-decoration: none;
    padding: 20px 20px;
}
#page_top a:hover {
    background-color: #666;
    text-decoration: none;
}


table{
    margin:0 auto;
    margin-top:10px;
    margin-bottom:10px;
    border-collapse: collapse;
    background:#fffbfb;
}

thead{
    background:#ececec;;
}

thead,th,td{
    padding:4px;
    border:1px solid #ccc;
}

h3{
    margin:0 auto;
    text-align:center;
}

#box{
	width:80%;
    background:#f3f7f5;
    margin:0 auto;
    margin-top: 10px;
    padding: 10px;
}

input{
	padding:4px 0;
}

input[ type="number" ] {
	width:70px;
}


#dataupdate{
	position:absolute;
	top:10px;
	right:10px;
	padding:10px;
}

.button {
	display: inline-block;
	width: 160px;
	padding: 0.8em;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background:#F1322C;
	border-bottom:4px solid #AD2022;
	border-radius: 4px;
}
.button:hover {
	 cursor: pointer;
	 text-decoration: none;
	 background:#AD2022;
	 transform: translate3d(0, 4px, 0);
	 border-bottom: none;
}

#save_data{
    display:block;
    margin:0 auto;
}

/*ログイン画面*/
/* Form Layout */
.form-wrapper {
    /*background: #fafafa;*/
    margin: 3em auto;
    padding: 0 1em;
    width:60%;
    max-width:400px;
  }
  
  .form-wrapper h1 {
    text-align: center;
    padding:0;
  }
  
  form {
    padding: 0 1.5em;
  }
  
  .form-item {
    margin-bottom: 0.75em;
    width: 100%;
  }
  
  .form-item input {
    background: #fafafa;
    border: none;
    border-bottom: 2px solid #e9e9e9;
    color: #666;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    height: 50px;
    transition: border-color 0.3s;
    width: 100%;
  }
  
  .form-item input:focus {
    border-bottom: 2px solid #c0c0c0;
    outline: none;
  }
  
  .button-panel {
    margin: 2em 0 0;
    width: 100%;
  }
  
  .button-panel .button {
    background: #f16272;
    border: none;
    color: #fff;
    cursor: pointer;
    height: 50px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2em;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
    transition: background 0.3s ease-in-out;
    width: 100%;
  }
  
  .button:hover {
    background: #ee3e52;
  }
  
  .form-footer {
    font-size: 1em;
    padding: 2em 0;
    text-align: center;
  }
  
  .form-footer a {
    color: #8c8c8c;
    text-decoration: none;
    transition: border-color 0.3s;
  }
  
  .form-footer a:hover {
    border-bottom: 1px dotted #8c8c8c;
  }


/* ユーザーindex */
.storyboxall{
  margin:0 auto;
  width:90%;
}

.error{
    color:red;
    font-size:12px;
}

.storybox{
  float:left;
  width:250px;
  height:485px;
  margin:12px;
  border:1px solid;
  background:#ebe8ff;
  position: relative;
}

.storybox h2{
  font-size:16px;
  margin:4px;
  overflow: hidden;
}

.storybox .storybox-img{
  width:220px;
  height:378px;
  margin:0 auto;
} 

.storybox .storybox-entry{
  width:100%;
  height:100%;
}

.storybox .storybox-entry h2{
  padding-top:60%;
  margin:0 auto;
  font-size:20px;
  text-align:center;
  width:100%;
}

.storybox .storybox-entry .btn{
    margin: 0 auto;
    text-align: center;
    width: 90%;
    margin-left:5%;
}

.storybox img{
  width:100%;
}

.storybox .idchangebtn{
  text-align:center;
}

.storybox .idchangebtn .btn{
  padding:2%;
}

.storybox .storybox-idconfig{
    font-size:14px;
    position: relative;
    padding: 2px;
    text-align:left;
    margin:0 auto;
    margin-top: 4px;
    vertical-align:middle;
    width:96%;
    background:#ccc;
}

.storybox .instaidchange{
    display:none;
}
.storybox .storybox-idconfig p{
    margin:4px 0;
}

.storybox .closeidconfig{
    text-align: right;
    position: absolute;
    display: block;
    right: 0;
    top: -1px;
    border: 1px solid;
    background: #151515;
    padding:0 1px;
    color: #ccc;
    cursor:pointer;
}

.entryposton,.storybox .idchangebtn .idgochange{
  border:1px solid;
  background:#f1f1f1;
  border-radius: 10px;
  padding:4px;
}

.storybox .storybox-idchangestart{
    margin-top:-90px;
}

.storybox .entryinstaid,.storybox .entryinstaname{
  width:100%;
}

.storybox-idconfig .category_select,.favstar .review_select,.storybox-idconfig .review_select{
    display:inline;
}

.storybox .entryinstaname,.new_window .category_select,.new_window .review_select{
    display:none;
}


.storybox .category{
    border-bottom:1px solid #ccc;
    display:block;
}

.storybox .instaname{
    display:block;
    height:16px;
    font-size:14px;
    margin:4px;
    overflow:hidden;
    margin-top:-4px;
}

.storybox .icon{
    position:absolute;
    right:0;
    top:70px;
}

.storybox .icon img,.icon img{
    width:80px;
    height:80px;
    border-radius: 50%;
    border:2px solid #eee;
}

.dayboxs{
    width:60%;
    margin:0 auto;
    margin-top:20px;
    margin-left:20%;
}

.daybox{
    display: block;
    /*
    padding-top: 70px;
    margin-top: -70px;
    */
    padding-bottom:20px;
    border-bottom:2px solid #b2b2b3;
}

.daybox h3{
    text-align:left;
    font-size:1.2em;
    padding-top:20px;
    display:inline-block;
}

.dayimages{
    overflow-x:auto;
    display:flex;
}

.dayimages img{
    width: 180px;
    height: 380px;
    margin: 10px;
    margin-bottom:0;
}

.dayimages .ocrtext{
    margin:0 10px;
}

.calendar {
    width:83%;
    margin-top:30px;
    font-size:0.9em;
    margin-left:0;
    /*
    position:fixed;
    right:20px;
    top:40px;
    */
}

.calendar td{
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
}

.calendar tbody td{
    color:#ccc;
}


.dayimages .ocrtext .textdetail{
    display:none;
}

.wideimages{
    width:100%;
    display:table;
    padding-top:6px;
    border-bottom:1px solid #ccc;
}

.wideimages .wideleft{
    display:table-cell;
    width:40%;
}

.favstar{
    display:table-cell;
    vertical-align: top;
    cursor: pointer;
    width:15%;
}

.favstar .favs{
    color:#ffa41c;
}

.wideimages .wideright{
    display:table-cell;
    vertical-align: top;
    padding-left:10px;
}

.wideimages img{
    width:360px;
    height:760px;
}

.calendar {
    text-align:center;
}

.calendar td {
    background:rgb(247, 244, 244,1);
}
.week td {
    background: #e0e0e0;
}

.leftside{
    width:20%;
    overflow:auto;
    margin:10px;
    position:fixed;
}

.leftside h2{
    font-size:14px;
}

.leftside #ocrautocopy{
    margin-top:20px;
}

#detailtextbox{
    position:fixed;
    top:60px;
    right:40px;
    width:15%;
    overflow:auto;
}

.detailtext{
    display:none;
}

.categoryinfo{
    margin:4px;
}

#categories{
    float:left;
}

#categories td,#reviews td{
    border-right:none;
    border-left:none;
}

.top-rightbox{
    margin-left:20px;
    float:left;
}

.description{
    margin-top:10px;
    background:#ccc;
    padding: 10px;
    border-radius: 10px;
} 


#categories .category_info,#reviews .category_info{
    padding-top:4px;
    cursor: pointer;
    list-style: none;
    color:#151515;
}

#reviews{
    width:140px;
}

.review_select,#reviews .category_info{
    color:#ffa41c;
}

.review_select{
    border:none;
    background:#ebe8ff;
}

#reviews .category_all{
    color:#151515;
}
.review_star{
    position: absolute;
    top: 0;
    right:0;
    color: #ffa41c;
    font-size: 14px;
    /*
    right: -10px;
    background: #ebe8ff;
    writing-mode: vertical-rl;
    */
}

#categories .nowcategory,#reviews .nowcategory{
    color:#e7260d;
    font-weight:bold;
    font-size:120%;
}

.category_count{
    background: #0000ff;
    padding: 0 10px;
    margin: 10px;
    border-radius: 10px;
    color: #fff;
}


.videos a{
    font-size:14px;
    margin-right:4px;
}

/*****/
  /* ---------------------------------------------------
      TABLE
  ----------------------------------------------------- */
  .card-title,.card-body,.alert {
      font-size: 0.8em;
  }
  table {
      font-size: 0.8em;
  }
  .table-bordered thead td, .table-bordered thead th {
      padding-right: 4px;
      padding-left: 4px;
  }
  table#media-list td {
      padding-right: 4px;
      padding-left: 4px;
  }
  .toukoutable .gray01 {
      background: #f2f2f2;
  }
  a.btn.border.rounded-pill.border-dark {
      font-size: 0.9em;
      padding: 5px;
  }
  .row.mt-2.p-2.border {
      margin: 0px;
  }
  /* ---------------------------------------------------
      FORM
  ----------------------------------------------------- */
  .form-control {
      font-size: 0.8em;
  }
  .input-group-text {
      font-size: 0.8rem;
  }
  .custom-select {
      font-size: 0.8rem;
  }

/* BODY START */
.left-box {
	left:0;
	position:absolute;
	width:20%;
	height:100%;
}
 
.right-box {
	right:0;
	overflow-y:scroll;
	position:absolute;
	width:80%;
	height:100%;
}
/* BODY END */
/* FORM START */
form .error {
  color: #ff0000;
}

/******
search
******/
.searchresult_table{
    white-space:pre-line;
    width:auto;
}

.searchresult_table td{
    vertical-align: top;
}

.search-left{
    width: 20%;
    overflow: auto;
    margin: 10px;
    position: fixed;
}

.search_np{
    display:table;
    margin:0 auto;
}

.search_link{
    display:inline-block;
}

.serch_next{
    background:none;
    padding:4px;
    display:inline-block;
}

.nameicons img{
    width:80px;
    height:80px;
    border-radius:50px;
}

.mw280{
    max-width:280px;
}

.mw280 img{
    width:94%;
    display:block;
    margin:0 auto;
}

#instaid-searchbox{
	float:right;
	position:relative;
}


#instaid-searchbox button{
    position: absolute;
    right: 0;
    height: 100%;
    width: 30px;
}

/**/

.loginname{
    margin-left:20px;
    color:#fff;
    font-size:90%;
}