@charset "utf-8";

:root {
    --primary-color: #6aa121;
    --primary-inverse-color: #fff;
    --global-space: 1vw;
    --global-2nd-space: 1vw;
}

figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}
section li {margin-left: 1rem;}
input {font-size: 1rem;}


@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap');

main * {min-width: 0;}
main {
    margin: var(--global-space);
}

#itemR {
    margin-bottom: 5px;
    background-image: url(../images/right.jpg);
    width: 165px;
    height: 150px;
    object-position: 0 0;
    grid-column: 1 / 2;
    display: flex;
    align-items: center;
}

#itemL {
    margin-bottom: 5px;
    background-image: url(../images/left.jpg);
    width: 165px;
    height: 150px;
    object-position: 0 0;
    grid-column: 1 / 2;
    display: flex;
    align-items: center;
}

#itemB {
    margin-bottom: 5px;
    background-image: url(../images/bunkB.jpg);
    width: 165px;
    height: 150px;
    object-position: 0 0;
    grid-column: 1 / 2;
    display: flex;
    align-items: center;
}

.linkbox {
    position: relative;
}

.linkbox a{
    position: absolute;
    top: 0;
    left: 0;
    height:165px;
    width: 100%;
}

#green {
    margin-bottom: 5px;
    background-image: url(../images/green.jpg);
    width: 100%;
    height: 150px;
    object-fit: cover;
    object-position: 0 0;
    grid-column: 2 / 3;
    display: flex;
    align-items: center;
}

#greenB {
    margin-bottom: 5px;
    background-image: url(../images/bunkG.jpg);
    width: 100%;
    height: 150px;
    object-fit: cover;
    object-position: 0 0;
    grid-column: 2 / 3;
    display: flex;
    align-items: center;
}

main h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 2rem;
    font-size: 2rem;
    position: relative;
    font-weight: normal;
    border-bottom: 2px solid #ddd;
    letter-spacing: 0.1em;
}


main h2 .uline {
    display: inline-block;position: relative;
    padding: 0.5rem 0;
    bottom: -2px;
    border-bottom: 2px solid #6aa121;
}

body * {box-sizing: border-box;}
html,body {
    font-size: 13px;
}

@media screen and (min-width:900px) {
    html, body {
        font-size: 16px;
    }
}

body {
    margin: 0;padding:0;
    font-family: "M PLUS 1", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    -webkit-text-size-adjust: none;
    background: #fff;
    color: #777;
    line-height: 2;
}

#numR {
    margin-left: 1.5rem;
    color: white;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
}

#numL {
    margin-left: 1.5rem;
    color: white;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
}

.pUse {
    background: #e1e1e1;
    font-weight: normal;
    border-radius: 100px;
    padding: 0.3rem 1rem;
    margin-left: 1rem;
    font-size: 1.1rem;
    text-align:center;
    width: 14rem;
    letter-spacing: 0.1em;
}

.pUseS {
    background: #e1e1e1;
    font-weight: normal;
    border-radius: 100px;
    padding: 0.3rem 1rem;
    margin-left: 1rem;
    font-size: 1.1rem;
    text-align:center;
    width: 7rem;
    letter-spacing: 0.1em;
}

.pOpen {
    background: #c0ffee;
    vertical-align:bottom;
    font-weight: normal;
    border-radius: 100px;
    padding: 0.3rem 1rem;
    margin-left: 1rem;
    font-size: 1.1rem;
    text-align:center;
    width: 7rem;
    letter-spacing: 0.1em;
    grid-column: 1 / 2;
}

.pOut {
    background: #333333;
    vertical-align:middle;
    font-weight: 800;
    color: #ddd;
    border-radius: 100px;
    padding: 0.3rem 1rem;
    margin-left: 1rem;
    font-size: 1.1rem;
    text-align:center;
    width: 10rem;
}

.solidx {
    display: grid;
    border-left: solid 20px #008BBB;
    padding: 10px;
    width: 100%;
    background: #E6E6FA;
    padding: 0.5rem 0.5rem;
}