@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Hachi+Maru+Pop&family=Kaisei+HarunoUmi&family=Playwrite+GB+S:ital,wght@0,100..400;1,100..400&family=RocknRoll+One&family=Sawarabi+Gothic&family=Yuji+Boku&family=Zen+Maru+Gothic&display=swap');
:root {
    --green: #2EA139;
}

* {
    font-family: "RocknRoll One", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-transform: capitalize;
    outline: none;
    border: none;
    text-decoration: none;
    transition: all .2s linear;
}
body {
    margin: 0px;
}

html{
    overflow: auto;
    font-size: 62.5%;
}
header{
    background: rgb(62, 79, 148);
    width: 100%;
    height: auto;
}
header .header-1{
    display: flex;
    align-items: center;
    height:auto;
    width: 50%;
    padding: 3px;
    margin: 0px auto;
    
}
header .header-1 .inner-header-1{
    height:auto; 
}
header .header-1 img{
    width: 50px;
    height: auto;
}

header .header-1 .inner-header-1 h1{
    text-align: center;
    font-size: 3rem;
    color: #fff;
    width: 100%;
    margin-bottom: 10px;
}

header .header-1 .inner-header-1 p{
    text-align: center;
    color: #fff;
    font-size: 2rem;
    width: 100%;
}
.title{
    display:flex;
    flex-direction: column;
    margin-top:30px;
    margin-bottom: 30px;
    gap:4px;
}
.title h2{
    text-align: center;
    font-size: 2.5rem;
    margin: 0   px auto;
    color: rgb(62, 79, 148);
}
.title p{
    text-align: center;
    font-size: 2rem;
    margin: 0px auto;
    color: #3E4F94;
    padding:0px;
}
form{
    width: 400px;
    margin: 20px auto;
    background:#F1D4D4;
    padding: 10px;
    border-radius: 5px;
}
form .input{
    width: 100%;
    font-size: 1.8rem;
    padding: 5px;
    border-radius: 5px;
    text-align: center;
}

section{
    margin: 0px auto;
    width: 80%;
    height: auto;
    padding: 10px;
    border-radius: 5px;
}

.top {
    display: flex;
    align-items: center;
    justify-content: center;        
    gap: 10px;
    width: 100%;
    height: auto;
    flex-wrap: wrap; /* 要素の折り返しを許可 */ 
}
.top .container{
    height: 380px;
    padding: 10px;
    border: 1px solid rgb(62, 79, 148);
    border-radius: 5px;
    margin: 10px;
    width: calc(33.33% - 20px); /* 100% ÷ 3個 - 余白(20px) */
}
.top .container h2{
    margin-top: 0px;
    text-align: center;
    font-size: 2rem;
    color: rgb(62, 79, 148);
}
.top .container .img-container{
    margin-top: 10px;
    width: 100%;
    height: auto;
}
.top .container .img-container .image{
    width: 50%;
    height: auto;
    float: left;
    overflow: hidden;
}
.top .container .img-container p{
   font-size: 1.8rem;
}

.top .container .img-container .image img{
    width: 95%;
    height: 125px;
    border-radius: 5px;
    object-fit: cover;
    /* object-position: center; */
}
.output, .output tbody, .output tr, .output td{
    display: flex;
    flex-wrap: wrap; 
    width: 100%;
    border-bottom: 0.5px solid gray;
    }
.output{
    display: flex;
    flex-direction: column;
    margin: 20px auto;
    width: 100%;
}
tbody{
    margin: 0px auto;
    justify-content: center;
}
.output thead{
    display: none;
}

.output tr{
    display: flex;
    border: 1px solid green;
    margin: 20px 10px;
    width: 40%;
    background-color: #F1D4D4;
    border-radius: 5px;
    height:320px;
    padding-left: 40px;
    align-items: center;
    background-image: url('png/shiisa_one.png');
    background-position: 2% 4%;           /* 画像の中央を表示 */
    background-repeat: no-repeat; 
    background-size: 30px;
}
.output td{
    width:95%;
    height: auto;
    border: none;
    padding:5px;
    font-size: 1.5rem;
    /* text-align: left; */
     
}
.output td:nth-child(1){
    display: none;
}
.output td:nth-child(2):before{
    content:"放送日：";
    font-size: 1.5rem;
}
.output td:nth-child(2){
    
    
}
.output td:nth-child(3):before{
    content:"番組名：";
    font-size: 1.5rem;
   
}
.output td:nth-child(3){
   
}
.output td:nth-child(4):before{
    content:"名称：";
    font-size: 1.5rem;
    
}
.output td:nth-child(4){
    
}
.output td:nth-child(5):before{
    content:"住所：";
    font-size: 1.5rem;
}

.output td:nth-child(5){
    
}
.output td:nth-child(6):before{
    content:"電話番号：";
    font-size: 1.5rem;
}
.output td:nth-child(7):before{
    content:"名物：";
    font-size: 1.5rem;
}
.output td:nth-child(8):before{
    content:"コメント：";
    font-size: 1.5rem;
}

.output2 {
    width: 80%;
    margin: 20px auto;
    height: auto;
    border: 1px solid #F1D4D4;
    border-radius: 5px;
}
.output2 thead{
    background: #E93636;
    height: 25px;
    color: #fff;
    font-size: 1.5rem;
}
.output2 td {    
    height: 30px;
    font-size: 1.5rem;
    background: #F1D4D4;
    padding: 5px;
}
.info{
    height:auto;
    margin:0px auto;
}
.counter {
    margin: 0 auto;
    width: 100%;
    height: auto;
    text-align: center;
}
.counter img {
    height:auto;
    width: 80px
}


@media screen and (min-width: 768px) {
   .sp-br {
    display: none;
  } 
}


@media screen and (max-width: 500px){
    .title{
        margin: 10px auto;
    }

    .title h2{
        font-size: 2rem;
    }
     .title p{  
        font-size: 1.6rem;
    }
    header .header-1{
        width: 100%;
        gap:10px;
    }
    header .header-1 img{
        width: 40px;
    }
    
    header .header-1 .inner-header-1{
        width:100%;
        flex-direction: column;
        gap:10px;
    }
     header .header-1 .inner-header-1 img{
       /* display: none; */
    }   
      header .header-1 .inner-header-1 h1{
        font-size: 2.3rem;
        margin-bottom: 10px;
    }
     header .header-1 .inner-header-1 p{
        font-size: 1.3rem;
        width: 100%;
    }
    section{
        width:100%;
    }
    form{
        width: 90%;
        height: auto;
        margin-bottom:0px;
    }
     .top {
        display: block;
    }

    .top .container{
        width: calc(100% - 10px);
        height: auto;
        width: 96%;
    }
    .top .container h2{
        margin-top:0px;
    }
    .top .container .img-container p{
        font-size: 1.5rem;
    }
    .output tr{
        padding: 10px 10px 10px 40px;
        width: 100%;
        height: auto;
        background-position: 2% 2%; 
    }

    h1{
        font-size: 2.3rem;
    }
    .form{
        width:250px;
    }
    .container{
        width:85%;
        margin: 10px auto;
        padding:5px;
    }

    .input{
        font-size: 15px;
        border-radius: 5px;
        height:15px;
        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: 80%;
        height: 40px;
        margin: 10px auto;
        border-radius: 5px;
        font-size: 15px;
    }
    .grid2{
        
    }
    .output2, .output2 tbody, .output2 tr, .output2 td{
    display: flex;
    flex-wrap: wrap; 
    width: 100%;
    border-bottom: 0.5px solid gray;
    }
    .output2 thead{
        display: none;      
    }
    .output2 tr{
        margin-bottom:20px
    }
     .output2 td:nth-child(1):before{
        content:"うちなーぐち：";
        font-size: 1.3rem;
    }
    .output2 td:nth-child(1){
        background: #E93636;
        color: #fff;　
    }
     .output2 td:nth-child(2):before{
        content:"やまとぐち：";
        font-size: 1.3rem;
    }
    .info{
    margin-bottom:0px;
    padding-bottom: 0px;
    }
    .counter {
    margin: 0 auto;
    width: 100%;
    height: auto;
    text-align: center;
    }
    .counter img {
        height:auto;
        width: 50px
    }
   

}