@charset"UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
main{
    min-height: 100dvh;
    background-repeat: repeat;
    width:100%;
    height:auto;
    padding:3vmin;
}
#main-text{
    background-color:rgba(255,255,255,0.9);
    width:90dvw;
    height:fit-content;
    padding: 1dvmin;
    margin:auto;
}
/* テキスト関連 */
p,dl,ul,ol,table{
    font-size: 1.2rem;
    line-height: 1.6;
    margin-block:1rem;
    color:#000000;
}

.text-LED {
    font-family: 'DotGothic16', sans-serif;
}
.text-serif{
    font-family: serif;
}
.text-red{
    color:#FF0000;
}

@font-face {
    font-family: "CustomNumberFont";
    src: local("Frutiger"), local("Frutiger Linotype"), local("Segoe UI"), local("Helvetica Neue");
    unicode-range: U+0030-0039; 
}
@font-face {
    font-family: "CustomAlphaFont";
    src: local("Vialog"), local("Vialog Medium"), local("Helvetica Neue"), local("Arial");
    unicode-range: U+0041-005A, U+0061-007A; 
}
.text-UI {
    font-family: "CustomNumberFont", "CustomAlphaFont", "Hiragino Sans", "Yu Gothic", sans-serif;
}

.greenback{
    width:fit-content;
    color:#FFFFFF;
    background-color:#00b06b;
}
.text-center{
    display:block;
    text-align: center;
    margin-inline:auto;
    padding-inline:1rem;
}
.text-link{
    color:#FFFF70;
}
.text-link:hover{
    color:#FFFFFF;
}
.text-L{
    font-size:3rem;
}
.text-S{
    font-size:1.4rem;
}
dl{
    outline:ridge 5px #FAE0E0;
    padding:1rem 1rem;
    width:fit-content;
    display:block;
    margin-inline: auto;
    text-align: center;
    align-items: center;
    background: linear-gradient(
        #CAA0A0,
        #9A7070,
        #6A4040
    );
    box-shadow:
        0 10px 30px rgba(0,0,0,0.4);
}
dt{
    font-weight: bold;
    outline:outset 3px #FAE0E0;
    background:linear-gradient(0.25turn, #C09A9A, #FFFAFA, #C09A9A);
    padding-inline:0.5rem;
    color:#000000;
}
dd{
    background-color:#000000;
    padding-inline:0.5rem;
    color:#FFFFFF;
    font-family: 'DotGothic16', "MS UI Gothic", sans-serif;
}
/* レイアウト関連 */
.space-S{
    display:inline-block;
    margin-top:5vmin;
}
.space-M{
    display:inline-block;
    margin-top:10vmin;
}
.space-L{
    display:inline-block;
    margin-top:20vmin;
}
#timeline{
    margin-left:5vw;
    margin-top:5vh;
    margin-bottom:5vh;
    min-height:80vh;
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    border-left:2px solid black;
}
.timeline-item{
    display:block;
    margin:3vh 0;
}
img{
    display:block;
    margin-bottom:2.5rem;
    margin-inline:auto;
    width:50vmin;
    height: auto;
    justify-content: center;
}
.img-S{
    width:40vmin;
}
.img-M,.img-cite{
    width:60vmin;
}
.img-L{
    width:80vmin;
}
.item{
    margin:0;
    display:block;
}
#return{
    margin:5vh 0;
    display:flex;
    justify-content: center;
}
#return img{
    display:block;
}
.link-image img,#return img{
    margin:0;
}
/* ヘッダー・フッター関連 */
#header{
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    width:100%;
    height:20dvmin;
}
#site-name,#site-sub{
    background-color: transparent;
    margin-block:0;
    line-height:9vmin;
    font-size:7vmin;
}
#site-name{
    color:black;
    -webkit-text-stroke:1px white;
    -text-stroke:1px white;
    margin-left:2vw;
}
#site-sub{
    color:lightgoldenrodyellow;
    -webkit-text-stroke:1px blue;
    -text-stroke:1px blue;
    font-family:serif;
    font-style:oblique;
    margin-left:3vw;
}
#page-name{
    font-size:5vmin;
    text-align:center;
    background-color:#00b06b;
    color:#FFFFFF;
    width:100%;
}
#site-footer{
    padding-left:2rem;
    background-color:#00b06b;
    width:100%;
    padding-block:1rem;
}
#foottext,#foottext a{
    color:#FFFFFF;
    font-size:1rem;
    margin: 0;
}
/* 更新情報関連 */
#renewal-container{
    width:80dvw;
    height:43dvmin;
    padding: 1dvmin 1dvw;
    background-color:#4D3339;
    margin:0 auto;
    position:relative;
}
#renewal{
    text-align:center;
    width:fit-content;
    padding-inline:1vmin;
    margin-inline:auto;
    margin-block:1dvmin;
    display:flex;
    font-size:4vmin;
    top:2vmin;
    left:2vmin;
    background-color:#00b06b;
    color:#FFFFFF;
    font-weight: bold;
}
#renewal-list{
    width:70dvw;
    height:30dvmin;
    background-color:#000000;
    display:flex;
    flex-direction: column;
    justify-content:space-evenly;
    align-content:flex-start;
    position:absolute;
    left: 50%;
    margin-block:auto;
    padding-left:1vmin;
    transform: translateX(-50%);
}
.renewal-item{
    display:block;
    color:#FF7F27;
    font-size:3vmin;
    width:fit-content;
    text-decoration-line:none;
}
.renewal-item:hover{
    color:#FF0000;
}

/*blog.php検索・フィルタ・ソート機能*/

.hover-bright05:hover{
    filter: brightness(1.05);
}
.link-image:hover,.hover-bright10:hover{
    filter: brightness(1.10);
}
.active-button:active{
    transform: translateY(1px);
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.45);
}

#option{
    display:flex;
    justify-content:space-around;
    align-items: center;
    margin:3vmin auto;
}

select{
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width:20vmin;
    height:8vmin;
    background-color:#00B06B;
    border: 2px solid 40404A;
    padding:1.5vmin 8vmin 1.5vmin 2vmin;
    font-size: 2vmin;
    color:#FFFFFF;
    font-weight:bold;
    cursor:pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
select:active{
    box-shadow:
        inset 0 0.2vmin 0.2vmin rgba(0,0,0,0.3);
}
.select-wrap{
    position: relative;
    display:inline-block;
}
.select-wrap::after {
    content: "▼";
    font-size: 3vmin;
    color: #FFFFFF;
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

#search{
    width:32vmin;
    height:6vmin;
    background-color:#00B06B;
    border: 1px solid #8a8f99;
    display:inline-flex;
    align-items: center;
    padding:0 2vmin;
    position:relative;
}
#search-input{
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width:20vmin;
    height:4vmin;
    background-color:#FAFAFA;
    color:#000000;
    font-size:2vmin;
    position:absolute;
    top:1vmin;
    left:2vmin;
}
#search-button{
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width:6vmin;
    height:4vmin;
    background-color: #FFFFFF;
    color:#00B06B;
    font-size:2vmin;
    font-weight: bold;
    position:absolute;
    top:1vmin;
    right:2vmin;
    cursor:pointer;
}

#sub-option{
    display:flex;
    justify-content:center;
    align-items: center;
    margin:3vmin auto;
}
#condition-container{
    display:inline-flex;
    align-items: center;
    justify-content: center;
    min-width:70dvw;
    min-height:10dvmin;;
    padding:1vmin 1vmin;
    background-color:#4D3339;
    margin:0;
}
#condition{
    background-color: #000000;
    color:#FF7F27;
    padding-inline:1rem;
    font-size:3vmin;
    width:fit-content;
    max-width:60dvw;
}
#reset{
    display:inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width:10vmin;
    height:4vmin;
    background-color:#E00000;
    color:#000020;
    font-size:2vmin;
    font-weight: bold;
    cursor:pointer;
}

/*blog.php記事一覧*/

#noresult{
    text-align: center;
    background-color: #F2E700;
    width:fit-content;
    margin:auto;
    padding-inline:1rem;
}

#article-list{
    width:80dvw;
    margin:5vmin auto;
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    align-content: center;
}
.article-item{
    width:100%;
    height:15vmin;
    margin:3vmin 0;
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: #707080;
    padding: 1vmin 1vmin;
    position:relative;
    text-decoration: none;
}

.thumbnail{
    width:13vmin;
    height:13vmin;
    display: inline;
    margin: 0 3vmin 0 0;
    object-fit: cover;
}
.article-text{
    flex:1;
    display:flex;
    flex-direction: column;
    justify-content: space-between
}
.article-uptext{
    display:flex;
    justify-content:space-around;
    margin-block:auto;
}
.article-downtext{
    display:flex;
    justify-content:space-around;
    margin-block:auto;
}
.boxes{
    display:block;
    align-items: center;
    align-content: center;
    padding:0 1vmin;
    background-color:#000000;
    color:#FFFFFF;
}
.title-box{
    flex: 1;
    height:6vmin;
    font-size: 3.5vmin;
    margin-inline:0;
    margin-block:0 1vmin;
}
.summary-box{
    flex: 1;
    height:4vmin;
    font-size:2vmin;
    margin:0;
}
.date-box{
    width:15dvw;
    height:4vmin;
    font-size: 2.5vmin;
    font-weight: bold;
    text-align: center;
    margin: 0 0 0 3vmin;
    background-color:#00b06b;
    color:#FFFFFF;
}
.category-box{
    width:15dvw;
    height:4vmin;
    font-size: 2.5vmin;
    font-weight: bold;
    text-align: center;
    margin: 0 0 0 3vmin;
    background-color:#00B06B;
    color:#FFFFFF;
}

/*blog.phpページング*/

.page-container{
    height:7vmin;
    width:80dvw;
    margin:0 auto;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
}
.page-button{
    width:4vmin;
    height:5vmin;
    display:inline-flex;
    align-items: center;
    justify-content: center;
    background-color:#00B06B;
    color:#FFFFFF;
    font-size: 3vmin;
    font-weight:bold;
    cursor:pointer;
}
.page-tmp{
    width:4vmin;
    height:5vmin;
}
.page-num{
    color:#FFFFFF;
    background-color:#00B06B;
    border: 1px solid #8a8f99;
    display:inline-flex;
    align-items: center;
    justify-content: center;
    height:5vmin;
    margin:0 2vmin;
    padding:0 1vmin;
    font-size: 3vmin;
    font-weight: bold;
}

/* 記事内ページング */

.article-paging{
    height:auto;
    width:80dvw;
    margin:0 auto;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
}

/* ガチャ関連 */

#gacha-contents{
        justify-content: space-around;
        display:flex;
        flex-wrap: wrap;
        width:100%;
}
#gacha-machine,#prize-box{
    display:flex;
    flex-direction: column;
    justify-content:space-around;
    align-items:center;
    margin-inline:auto;
}
.gacha-parts,.prize-parts{
    display:block;
}
.gacha-parts{
    margin: 0;
}
#expl{
    background-color:#FFFFFF;
}
#prize-name{
    font-weight:bold;
    color:#000000;
    font-size:1.5rem;
    margin-bottom:1rem;
}
#prize-desc{
    color:#000000;
}
/* 時刻変化・ヘッダー画像関連 */
#header.daytime.head0{
    background-image: url(image/indexheaderD.jpg);
}
#header.night.head0{
    background-image: url(image/indexheaderN.jpg);
}
#header.head1{
    background-image: url(image/mitajheader.jpg);
}
#header.daytime.head2{
    background-image: url(image/mitasaheaderD.JPG);
}
#header.night.head2{
    background-image: url(image/mitasaheaderN.jpg);
}
#header.daytime.head3{
    background-image: url(image/mitawanheaderD.jpg);
}
#header.night.head3{
    background-image: url(image/mitawanheaderN.jpg);
}
#header.head4{
    background-image: url(mitaSA/image/histheader.jpg);
}
#header.head5{
    background-image: url(mitaSA/image/guideheader.jpg);
}
#header.head6{
    background-image: url(mitaSA/image/gachaheader.jpg);
}
main#road{
    background-size: 100%;
}
main#road.daytime{
    background-image: url(image/roadD.jpg);
}
main#road.night{
    background-image: url(image/roadN.jpg);
}
main#mitaJBack{
    background-image: url(image/mitajback.png);
    background-size: 20%;
}
main#mitaSBack{
    background-image: url(image/mitasaback.png);
    background-size: 20%;
}
main#historyBack{
    background-image: url(mitaSA/image/histback.png);
    background-size: 20%;
}
main#guideBack{
    background-image: url(mitaSA/image/guideback.png);
    background-size: 20%;
}
main#gachaBack{
    background-image: url(mitaSA/image/gachaback.png);
    background-size: 20%;
}

/* スマホ用 */

@media (orientation:portrait){
    .contents{
        display:flex;
        flex-direction: column;
        justify-content:space-around;
        align-items:center;
    }
    .link-image{
        margin-block:100px;
        margin-inline:50px;
    }
    
    .img-paging{
        height:12dvw;
        width:auto;
    }
    
    #gacha-contents{
        margin-bottom:10vh;
        align-items:flex-start;
        flex-direction: column;
    }
    #gacha-machine{
        background-color: darkgray;
        width:30dvh;
        height:40dvh;
    }
    #gacha-title{
        height: 15dvh;
        width:auto;
    }
    #gacha-handle{
        height:10dvh;
        width:auto;
    }
    #gacha-door{
        height:10dvh;
        width:auto;
    }
    #prize-box{
        width:80dvw;
    }
    #rarelity img{
        height:8dvh;
        width:auto;
    }
    #prize img{
        width:50dvw;
        height:auto;
    }
    #card img{
        width:10dvw;
        height:auto;
    }
    #gacha-machine,#prize-box{
        margin-top:5dvh;
    }
}

/* パソコン用 */

@media (orientation:landscape){
    .contents{
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items:center;
        justify-content:space-evenly;
        width:100%;
        margin-bottom:10vh;
    }
    .link-image{
        margin-inline:50px;
        margin-block:50px;
    }
    
    .img-paging{
        height:8dvw;
        width:auto;
    }
    
    #gacha-contents{
        flex-direction: row;
        align-items:flex-start;
        margin-bottom:10vh;
    }
    #gacha-machine{
        background-color: darkgray;
        width:30dvw;
        height:40dvw;
    }
    #gacha-title{
        width:23dvw;
    }
    #gacha-handle{
        width:10dvw;
    }
    #gacha-door{
        width:8dvw;
    }
    #prize-box{
        width:50dvw;
    }
    #rarelity img{
        height:15dvh;
        width:auto;
    }
    #prize img{
        width:25dvw;
        height:auto;
    }
    #card img{
        width:10dvw;
        height:auto;
    }
    #gacha-machine,#prize-box{
        margin-top:10dvh;
    }
}