@import url('Common.css');
@import url('library.css');
@import url('Spinner.css');

#target {
 width: 100%;
 margin-bottom: 100px;
}

table {
 width: 27.4rem;	
 border-collapse: collapse;	
 border: 1px solid rgb(85, 85, 85);	
 margin: 10px 3%;	
 table-layout: fixed;
 background-color: #FCFCFC;	
}
th {
 border: 1px solid rgb(85, 85, 85);	
 text-align: center;	
 background-color: rgb(255, 238, 252);	
 color: rgb(51, 51, 51);	
 height: 2rem;	
 width: 3rem;	
 padding: 0px;	
 font-weight: normal;	
}
.th-No {
    width: 10%;
}
.th-card, .th-kikkake {
    width: 80%;
}
.th-delete {
    width: 10%;
}
td {
 border: 1px solid rgb(100, 100, 100);	
 height: 2rem;	
 width: 3rem;	
 text-align: left;	
 line-height: 2rem;	
}
td input {
    padding: 0 1rem;
}
input {
    height: 1.8rem;
    font-size: 1.2rem;
    padding: 0.1rem 0.5rem;
}
select {
   font-size: 1.6rem;
   min-width: 5rem;
}
.delete-td {
    text-align: center;
    vertical-align: middle;
}
.type2 {
    height: 100%;
    width: 100%;
    border: none;
    font-size: 1rem;
}
.topleft {
 background-color: rgb(238, 221, 255);	
 width: 6rem;	
 font-size: 1.2rem;	
}
.left {
 background-color: rgb(255, 238, 252);	
 width: 6rem;	
 font-size: 1.2rem;	
}
#target img {
 width: 100%;	
 margin: 0px;	
}
.flex {
display: flex;	
flex-flow: row nowrap;	
justify-content: space-between;	
align-items: center;	
}
.w6 {
    width: 60%;
}
table {
    counter-reset: th-counter;
}

th.no::before {
counter-increment: th-counter;
content: counter(th-counter);
}
.photo-wrap {
    width: 50%;
    margin-left: 25%;
}

@media screen and (max-width: 767px) {

#target {
    padding: 2rem 1rem;
}
#target table {
    width: 96%;	
    margin: 10px 1% 10px 3%;	
}
input, select {
    font-size: 1rem;
}
.w6 {
    width: 100%;
}
}