@charset "UTF-8";

:root {
    --czxc: #ffe300;
    --cazz: #d40005;
    --cuss: #ff6eb2;
    --cyuk: #3bd5ff;
    --cwet: #8b77d1;
    --char: #ff9338;
    --caaa: #00ad79;
    --cyug: #006fe0;

    --czxcd: #ccb500;
    --cazzd: #d40005;
    --cussd: #f268a8;
    --cyukd: #3bd5ff;
    --cwetd: #69599e;
    --chard: #f28a34;
    --caaad: #007a55;
    --cyugd: #006fe0;

    --aw: 90vw;/* article width ※vwで指定。スクリプトで90%にして使ってる */
    --h1height: 3rem;
    --headtra: 0.7s;
    --menuheight: 32rem;
    --opendetail: #aaa;

    font-size: 3.5vw;
    --ffmin: 'Shippori Mincho', serif;
    --ffgoth: 'Zen Kaku Gothic New', sans-serif;
    --ffmit: 'Mitr', sans-serif;
}
::selection {
    background: var(--icnr);
}

* {
    -webkit-tap-highlight-color: #0000;
}

.czxc { color:var(--czxc); }
.cazz { color:var(--cazz); }
.cuss { color:var(--cuss); }
.cyuk { color:var(--cyuk); }
.cwet { color:var(--cwet); }
.char { color:var(--char); }
.caaa { color:var(--caaa); }
.cyug { color:var(--cyug); }

/* menu */

:root {
    --hamts: -0.5rem;
    --hamtd: 0.6rem;
    --hamls: 20.8rem;
    --hamld: 0.9rem;
}

#stitle {
    top: 1rem;
    left: 4.5rem;
    transition: top var(--headtra), left var(--headtra);
}
#ham {
    top: 1rem;
    right: 24rem;
    transition: top var(--headtra), right var(--headtra);
    cursor: pointer;
}
#ham svg {
    display: block;
    width: 1rem;
    height: 1rem;
    position: absolute;
    transition: transform 0.2s;
}
#ham svg:nth-of-type(1) { top: var(--hamts);                          left: var(--hamls); }
#ham svg:nth-of-type(2) { top: var(--hamts);                          left: calc(var(--hamls) + var(--hamld)); }
#ham svg:nth-of-type(3) { top: calc(var(--hamts) + var(--hamtd));     left: var(--hamls); }
#ham svg:nth-of-type(4) { top: calc(var(--hamts) + var(--hamtd));     left: calc(var(--hamls) + var(--hamld)); }
#ham svg:nth-of-type(5) { top: calc(var(--hamts) + var(--hamtd) * 2); left: var(--hamls); }
#ham svg:nth-of-type(6) { top: calc(var(--hamts) + var(--hamtd) * 2); left: calc(var(--hamls) + var(--hamld)); }

.hamclose1 { transform: translate(0.2rem, 0.33rem) rotate(45deg); }
.hamclose2 { transform: translate(-0.2rem, 0.33rem) rotate(-45deg); }
.hamclose3 { transform: translate(0.4rem, 0) scaleX(0.1); }
.hamclose4 { transform: translate(-0.4rem, 0) scaleX(0.1); }
.hamclose5 { transform: translate(0.2rem, -0.33rem) rotate(-45deg); }
.hamclose6 { transform: translate(-0.2rem, -0.33rem) rotate(45deg); }

#mcw {
    margin: 0 auto;
    padding: 1rem 4rem 0;
    display: grid;
    grid-template-columns: repeat(6, 16.6%);
}
#mcw li:nth-of-type(1) { grid-area: 1/2/2/4;}
#mcw li:nth-of-type(2) { grid-area: 1/4/2/6;}
#mcw li:nth-of-type(3) { grid-area: 2/1/3/7;}
#mcw li:nth-of-type(4) { grid-area: 3/1/4/7;}
#mcw li:nth-of-type(5) { grid-area: 4/1/5/3;}
#mcw li:nth-of-type(6) { grid-area: 4/3/5/5;}
#mcw li:nth-of-type(7) { grid-area: 4/5/5/7;}
#mcw li:nth-of-type(8) { grid-area: 5/1/6/7;}
#menu {
    position: fixed;
    top: calc(var(--menuheight) * -1);
    left: 0;
    z-index: 9999;
    width: 100%;
    background: black;
    transition: top var(--headtra);
}
#menu li {
    display: block;
    width: 100%;
    height: 2rem;
    margin: 0.6rem 0;
    text-align: center;
}
#menu a {
    color: white;
    font-family: var(--ffmin);
    font-weight: 800;
    font-size: 100%;
}
#menu #menu_member {
    margin: -0.6rem auto 0;
    display: flex;
    justify-content: space-around;
}
#menu #menu_member a {
    font-size: 0.5rem;
}
#menu #menu_member a:nth-of-type(1) { color: var(--czxc); }
#menu #menu_member a:nth-of-type(2) { color: var(--cazz); }
#menu #menu_member a:nth-of-type(3) { color: var(--cuss); }
#menu #menu_member a:nth-of-type(4) { color: var(--cyuk); }
#menu #menu_member a:nth-of-type(5) { color: var(--cwet); }
#menu #menu_member a:nth-of-type(6) { color: var(--char); }
#menu #menu_member a:nth-of-type(7) { color: var(--caaa); }
#menu #menu_member a:nth-of-type(8) { color: var(--cyug); }

#menu #menu_sns {
    margin: 1rem auto 3rem;
    display: flex;
    justify-content: space-around;
}
#menu #menu_sns a {
    background: white;
    border-radius: 3rem;
    width: 2rem;
}
#menu #menu_sns svg {
    --sq: 1rem;
    width: var(--sq);
    height: var(--sq);
    margin-top: 0.5rem;
}
#menu #menu_sns img {
    --sq: 1rem;
    width: var(--sq);
    height: var(--sq);
    margin-top: 0.5rem;
}

#menuafter {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
}

.isvg1, .isvg2 {
    height: 1em;
    vertical-align: -0.1em;
    margin-right: 0.5em;
}
.isvg1 { width: 1em; }
.isvg2 { width: 2em; }

#debug {
    position: fixed;
    top: 0.5rem;
    right: 0.5rem;
    width: fit-content;
    padding: 0 1rem;
    border-radius: 0.5rem;
    background: deeppink;
    color: white;
    font-size: 200%;
    z-index: 100000;
}

.mb { display: block; }
.mbi { display: inline; }
.pc, .pci { display: none; }

@media screen and (min-width: 1080px) {

.pc { display: block; }
.pci { display: inline; }
.mb, .mbi { display: none; }

:root{
    font-size: 14pt;
    --aw: 1000px;
}

#ham { right: 24em; }
#mcw {
    width: 500px;
}

}