@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Kiwi+Maru&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

*{
    font-family: "Noto Serif JP", serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    text-transform: capitalize;
}
body {
    
    margin: 20px auto;
    background: #3E4F94;
}


html{
    overflow: auto;
    font-size: 62.5%;
}
p{
    text-align: center;
    color: #fff;
    font-size: 2rem;
}

h1{
    text-align: center;
    font-size: 3rem;
    margin-top: 20px;
}
h4{
    text-align: center;
    color: #fff;
    font-size: 1.5rem;
}

h4 span{
    color:red;
}
h5{
    color: #fff;
    text-align: center;
}
.container .supported{
  
    margin: 10px auto;
    gap:10px;
    width: 90px;
    
}

.output {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}
.container .search {
    margin: 20px auto;
    border: 0.5px solid #fff;
    width: 400px;
    border-radius: 5px;
}


.container .order-content{
    text-align: center;
    margin: 10px auto;
    background-color: #fff;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap:20px;
    width:90%;
    padding: 10px;
}
.title{
    font-size: 15px;
    margin: 5px auto;
    font-weight:700;
    border-bottom: 1px dashed #fff;
    width:180px;
    text-align: center;
}

.form{
    display: flex;
    flex-direction: column;
    width: 300px;
    margin:20px auto;
    gap: 10px;
}
.input{
    display: flex;
    padding:10px;
    margin: 10px auto;
    text-align: center;
    width:80%;
    height: 50px;
    font-size:2rem;
}
.number{
    margin: 10px auto;
    font-size: 15px;
    width: 30%;
    text-align: center;
}   
.btn{
    width: 80%;
    height: 35px;
    margin: 5px auto;
    border-radius: 10px;
    border: none;
    font-size: 15px;
}
.btn:hover{
    background-color:#922E2E;
    cursor: pointer;
    color: #fff;
}
.btn:visited{
    background-color:#922E2E;
    color: #fff;
}   
.select{
    font-size: 15px;
    text-align: center;
    font-weight: 400;
    width: 80%;
    margin: 10px auto;
    height: 30px;
    border-radius: 5px;
    background-color: #fff;
}
.order-content{
    font-size: 15px;
    padding: 10px;
}
.quantity{
    width:20%;
    height:30px;    
    margin-left: 50px;
    text-align: center;
    font-size: 15px;
    border: 0.8px solid;
}
.btn-container{
    margin-top: 10px;
    font-size: 15px;
}

.radio-container{
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin: 10px auto
}
.radio{
    font-size: 18px;
}
input:focus {
  background-color: #e8f0fe; /* 薄い青背景 */
}
.textarea{
    width:100%;
    height: 100px;
    padding: 10px;
    font-size: 15px;  
    border-radius: 5px; 
}
.container {
    width: auto;
    margin: 20px auto;
    border-radius: 10px;
    background-color:#5363A2;
    padding: 20px;
    overflow-y: scroll;
}
h2 {
    font-size: 3rem;
    text-align: center;
    color: #000;
    margin-bottom: 10px;
    color: #eee;
}
.grid {
    width: 100%;
    background: pink;
    color: #000;
    padding: 5px;
    font-size:2rem; 
}
.line {
    border-bottom: dashed red;
    margin: 20px auto;
}
.date_style {
   display: none;
}
.date2_style {
    background: #fff;
    text-align: center;
}
.display_style {
    margin-top: 10px;
    background: #11884A;
    padding: 3px;
    color: #eee;
}
.quantity_style{
    text-align: center;
    background: #fff;
}
.content_style{
    background: #11884A;
    color: #fff;
    padding: 10px
}
.memo_style{
    background: #fff;
    text-align: center;
}
.grid2 {
    width: 80%;
    font-size: 1rem;
}
/* .output{
    width: 100%;
    background: pink;
    margin: 20px auto;
    padding:0px;
    border-radius: 10px;
     */
/* } */


.output th{
        font-size: 1.5rem;
        padding-bottom: 10px;
        color: #fff;
    }

.output tr{
    margin-bottom: 15px;
}


.output td {
    /* text-align: center; */
    padding:5px;
    font-size: 1.5rem;
    border-bottom: 2px dotted red; 
}
.output td:empty::after {
    display:none;
}


.output td:nth-child(1) {
  background-color: #f2f2f2;
  display:none;
}
.output td:nth-child(2) {
  background-color: #3E4F94;
  color: #fff;
  
}
.output td:nth-child(3) {
  background-color: #f2f2f2;
}

.output td:nth-child(4) {
  background-color: #F3A8A8;
  font-size: 1.6rem;
}
.output td:nth-child(5) {
  background-color: #f2f2f2;
  white-space: normal;
  height: 50px;
  padding: 3px;
}
 
.container .link {
    font-size: 1.5rem;
    text-align: center;
    width: 200px;
    margin: 20px auto;
    border: solid 0.5px #fff;
    border-radius: 5px;
    padding: 5px;
}
.container .link a{
    color: #fff;
}

.counter {
    margin: 0 auto;
    width: 20%;
    height: auto;
    justify-content: center;
}
.counter img {
    height:auto;
    width: 60px;
}





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


    .output th{
        display: none;
    }
    
    .output td:empty{
        display: none;
        white-space: normal;
    }

    .output, .output tbody, .output tr, .output td{
    display: block;
    width: 100%;
    border-bottom: 0.5px solid gray;
    }
    .output td:nth-child(1){
        font-size:1.5rem;
     }
    .output td:nth-child(3):before{
        content:"番組名："
    }
    .output td:nth-child(5){
        font-size: 1.6rem;
        background: #fff;
        white-space: normal;
        height: auto;
        padding: 5px;
        margin-bottom: 10px;
        /* border-bottom: 5px dotted red; */
    }

    h1{
        font-size: 2.3rem;
    }
   
    p{
        font-size: 1.5rem;
    }
    .form{
        width:250px;
        height: auto;
    }
    .container{
        width:320px ;
        margin: 10px auto;
        padding:15px;
    }
    .container .search {
       width: 70%;
    }
    .container .link{
        width: 60%;
        height: 50px;
    }
  
    .input{
        font-size: 1.8rem;
        border-radius: 5px;
        height:25px;
        padding-left:10px;
        height:30px;
    }
    .number{
        width:20%;
        margin: 10px auto;
        padding: 5px;
    }
    .select{
        font-size: 18px;
        font-weight: 400;
        padding: 5px;
        text-align: center;
        text-align-last: center;
        width: 80%;
    }
    .textarea{
        width:90%;
        height: 80px;
        padding: 10px;
        font-size: 15px;
        border-radius: 5px;
    }
     .btn{
        width: 70%;
        height: 30px;
        margin: 5px auto;
        border-radius: 5px;
        font-size: 1.5rem;
    }
    .grid2{
        
    }
    h2 {
        font-size: 2rem;
    }

}