@charset "utf-8";

/* メディアクエリ設定 */
@media (width: 320px) {
    .sample {
        color: red;
    }
}

@media (min-width: 320px) {
    .sample {
        color: blue;
    }
}

@media (max-width: 320px) {
    .sample {
        color: yellow;
    }
}
/* メディアクエリ設定ここまで */
.header {
    width: 100%;
    padding: 5px 0 5px;
    text-align: center;
    margin: 0 auto;
}

.tabbox {
    margin: 0px; 
    padding: 1em; 
    background-color: #f8f8ff; 
}

.tabbox input { 
    display: none; 
}

/* ▼タブの装飾 */
.tab {
   display: inline-block;
   border-width: 1px 1px 0px 1px;
   border-style: solid;
   border-color: black;
   border-radius: 0.75em 0.75em 0px 0px;
   padding: 0.75em 1em;
   color: black;
   background-color: #e0e0e0;
   font-weight: bold;
}

.tab:hover {
   background-color: #ccffcc;
   color: green;
   cursor: pointer;
}

input:checked + .tab {
   color: red;
   background-color: #ffffcc;
   position: relative;
   z-index: 10;
}

.tabcontent {
   display: none;
   border: 1px solid black;
   margin-top: -1px;
   padding: 1em;
   position: relative;
   z-index: 0;
   background-color: #ffffcc;
}

#tabcheck1:checked ~ #tabcontent1 { display: block; }
#tabcheck2:checked ~ #tabcontent2 { display: block; }
#tabcheck3:checked ~ #tabcontent3 { display: block; }

[v-cloak] {
    display: none;
}