html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    font-family: "a-otf-gothic-mb101-pr6n", sans-serif;
    font-weight: 300;
    font-style: normal;
}

html {
    scroll-behavior: auto !important;
}

a {
    -webkit-user-drag: none;
    user-drag: none;
}

img {
    -webkit-user-drag: none;
    user-drag: none;
    max-width: 100%;
    vertical-align: top;
}

.viewport {
    width: 100vw;
    height: 100vh;
    position: fixed;
    inset: 0;
    overflow: hidden;
    user-select: none;
    touch-action: none;
    cursor: url('../image/cursor-open.png') 16 16, auto;
}

.viewport.dragging {
    cursor: url('../image/cursor-grab.png') 16 16, auto;
}

a,
.is-link,
.modalOpen {
    cursor: url('../image/cursor-point.png') 8 4, pointer;
}

/* 超巨大キャンバス：横＝約10倍、縦＝10000px */
.canvas {
    width: 3500px;
    height: 3500px;
    display: block;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    /* 位置確認用の薄いグリッド */
    display: grid;
    grid-template-columns: repeat(50, 70px);
    grid-template-rows: repeat(50, 70px);
    grid-gap: 0;
    background: url(../image/26nenga_bg.webp);
    background-size: 100%;
}

/* デモ用の固定サイズ要素 */
.panel {
    display: grid;
    place-items: center;
    font: 700 clamp(18px, 4vw, 48px)/1.1 system-ui;
    color: #111;
    opacity: 0;
    transform: scale(0.2);
    transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(.34, 1.56, .64, 1);
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.panel.show {
    opacity: 1;
    transform: scale(1);
}


.home {
    grid-column: 23 / 29;
    grid-row: 23 / 29;
    z-index: 1;
}

.drag_attention {
    grid-column: 23 / 29;
    grid-row: 29;
    z-index: 1;
}

.cnet {
    grid-column: 35 / 39;
    grid-row: 22 / 24;
    z-index: 1;
}

.link {
    grid-column: 14 / 18;
    grid-row: 23 / 25;
    z-index: 1;
}

.rosso {
    grid-column: 29 / 33;
    grid-row: 17 / 19;
    z-index: 1;
}

.kingram {
    grid-column: 33 / 37;
    grid-row: 28 / 30;
    z-index: 1;
}

.cms {
    grid-column: 26 / 30;
    grid-row: 34 / 36;
    z-index: 1;
}



.cnet_link {
    grid-column: 15 / 22;
    grid-row: 5 / 11;
}

.link_link {
    grid-column: 6 / 17;
    grid-row: 24 / 28;
}

.rosso_link {
    grid-column: 29 / 40;
    grid-row: 10 / 14;
}

.cms_link {
    grid-column: 41 / 48;
    grid-row: 42 / 48;
}

.kingram_link {
    grid-column: 37 / 47;
    grid-row: 27 / 31;
}

.no_click {
    z-index: 99;
}

.no_click.ptn01 {
    grid-column: 15;
    grid-row: 9 / 11;
}

.no_click.ptn02 {
    grid-column: 20 / 22;
    grid-row: 9 / 11;
}

.no_click.ptn03 {
    grid-column: 13;
    grid-row: 24;
}

.no_click.ptn04 {
    grid-column: 13 / 17;
    grid-row: 27;
}

.no_click.ptn05 {
    grid-column: 36 / 41;
    grid-row: 10;
}

.no_click.ptn06 {
    grid-column: 36 / 41;
    grid-row: 13;
}

.no_click.ptn07 {
    grid-column: 43 / 47;
    grid-row: 27;
}

.no_click.ptn08 {
    grid-column: 43;
    grid-row: 30;
}

.no_click.ptn09 {
    grid-column: 41;
    grid-row: 42 / 44;
}

.no_click.ptn10 {
    grid-column: 46 / 48;
    grid-row: 42 / 44;
}








.menu_header_home {
    width: 82px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    padding: 20px;
}

.menu_header_meu {
    width: 212px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1;
    padding: 20px;
}



/* cnet */
.hasegawa-s {
    grid-column: 30 / 35;
    grid-row: 21;
}

.dangaki {
    grid-column: 42 / 46;
    grid-row: 19;
}

.baba2 {
    grid-column: 36 / 40;
    grid-row: 19;
}

.sawada {
    grid-column: 39 / 43;
    grid-row: 22;
}




/* Link */
.kawasaki {
    grid-column: 17 / 22;
    grid-row: 25;
}

.takeuchi {
    grid-column: 13 / 17;
    grid-row: 17;
}

.yamakawa {
    grid-column: 19 / 23;
    grid-row: 19;
}

.yamashita {
    grid-column: 18 / 22;
    grid-row: 22;
}

.shibata {
    grid-column: 17 / 21;
    grid-row: 41;
}

.tateno {
    grid-column: 18 / 22;
    grid-row: 12;
}

.tsuji {
    grid-column: 14 / 18;
    grid-row: 11;
}

.uchiyama {
    grid-column: 19 / 23;
    grid-row: 16;
}

.minayoshi {
    grid-column: 21 / 25;
    grid-row: 45;
}

.kitano {
    grid-column: 8 / 12;
    grid-row: 31;
}

.ikeda {
    grid-column: 5 / 9;
    grid-row: 9;
}

.iida {
    grid-column: 4 / 8;
    grid-row: 39;
}

.higashitani {
    grid-column: 12 / 16;
    grid-row: 35;
}

.oda {
    grid-column: 9 / 13;
    grid-row: 10;
}

.okabe {
    grid-column: 13 / 17;
    grid-row: 20;
}

.yoshimoto {
    grid-column: 22 / 26;
    grid-row: 41;
}

.watanabe {
    grid-column: 9 / 13;
    grid-row: 46;
}

.okamoto {
    grid-column: 5 / 9;
    grid-row: 5;
}

.matsushima {
    grid-column: 18 / 22;
    grid-row: 34;
}

.nishida {
    grid-column: 4 / 8;
    grid-row: 46;
}

.kuwabara {
    grid-column: 8 / 12;
    grid-row: 43;
}

.konishiike {
    grid-column: 13 / 17;
    grid-row: 42;
}

.nagata {
    grid-column: 18 / 22;
    grid-row: 30;
}

.nagamasa {
    grid-column: 14 / 18;
    grid-row: 14;
}

.nabuti {
    grid-column: 21 / 25;
    grid-row: 38;
}

.tanaka {
    grid-column: 16 / 20;
    grid-row: 45;
}

.yamamoto {
    grid-column: 4 / 8;
    grid-row: 29;
}

.shirano {
    grid-column: 11 / 15;
    grid-row: 4;
}

.arakawa {
    grid-column: 14 / 18;
    grid-row: 32;
}

.fujimoto {
    grid-column: 4 / 8;
    grid-row: 35;
}

.fukui {
    grid-column: 4 / 8;
    grid-row: 13;
}

.hasegawa_t {
    grid-column: 9 / 13;
    grid-row: 18;
}

.okadome {
    grid-column: 17 / 21;
    grid-row: 37;
}

.kitada {
    grid-column: 10 / 14;
    grid-row: 7;
}

.katou {
    grid-column: 8 / 12;
    grid-row: 39;
}

.oono {
    grid-column: 9 / 13;
    grid-row: 28;
}

.oomura {
    grid-column: 5 / 9;
    grid-row: 17;
}

.sudou {
    grid-column: 3 / 7;
    grid-row: 42;
}




/* kingram */
.baba {
    grid-column: 31 / 36;
    grid-row: 30;
}

.fujioka {
    grid-column: 44 / 48;
    grid-row: 34;
}

.motoni {
    grid-column: 45 / 49;
    grid-row: 38;
}

.takagi {
    grid-column: 44 / 48;
    grid-row: 30;
}

.sugimoto {
    grid-column: 36 / 40;
    grid-row: 31;
}

.yamada {
    grid-column: 40 / 44;
    grid-row: 33;
}



/* rosso */
.tsumura {
    grid-column: 24 / 29;
    grid-row: 18;
}

.hara {
    grid-column: 36 / 40;
    grid-row: 7;
}

.kubota {
    grid-column: 41 / 45;
    grid-row: 9;
}

.koizumi {
    grid-column: 32 / 36;
    grid-row: 14;
}

.kobayashi {
    grid-column: 27 / 31;
    grid-row: 14;
}

.miyamura {
    grid-column: 42 / 46;
    grid-row: 13;
}

.sanai {
    grid-column: 25 / 29;
    grid-row: 9;
}

.oomiya {
    grid-column: 30 / 34;
    grid-row: 7;
}





/*cms*/
.aeba {
    grid-column: 23 / 28;
    grid-row: 30;
}

.genjun {
    grid-column: 28 / 32;
    grid-row: 45;
}

.hamada {
    grid-column: 28 / 32;
    grid-row: 39;
}

.kawamata {
    grid-column: 37 / 41;
    grid-row: 44;
}

.maeda {
    grid-column: 30 / 34;
    grid-row: 35;
}

.nakamura {
    grid-column: 33 / 37;
    grid-row: 45;
}

.kageyama {
    grid-column: 29 / 33;
    grid-row: 42;
}

.shimizu {
    grid-column: 35 / 39;
    grid-row: 37;
}





.button {
    background: lightblue;
    color: #fff;
    padding: 0 2em;
    border: 0;
    width: 500px;
    height: 100px;
    font-size: 45px;
    border-radius: 5px;
    font-weight: 900;
    position: relative;
    left: 400px;
    top: 260px;
    font-family: serif;
}

.button:hover {
    background: lightcoral;
    cursor: pointer;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content_wrap {
    margin: 4% auto 0;
    position: relative;
    width: 57vh;
    max-width: 90%;
    animation-name: modalopen;
    animation-duration: 0.4s;
    animation-timing-function: ease-out;
}

.modal-content {
    padding: 0;
    position: relative;
    box-sizing: border-box;
    max-height: 75vh;
    overflow-y: auto;
    margin: 23px 0;
}
.modal-content::-webkit-scrollbar {
    display: none;
}
.modal-content_outer {
    background-color: #ffffff;
    background-image: url(../image/modal_line.png), url(../image/modal_line.png);
    background-position: top, bottom;
    background-repeat: no-repeat, no-repeat;
    background-size: 640px, 640px;
    border: solid 16px #1884c1;
    box-shadow: 12px 12px 0px #1884c1;
    border-radius: 36px;
}


.modal-content_inr {
    background: #fff;
    display: grid;
    grid-gap: 2vh;
}


.modal-body {
    padding: 0 clamp(28px, 3vw, 58px) 58px;
}



#hasegawa-s .modal-content_inr {
    background: #fff;
    display: grid;
    grid-gap: 24px;
}


#hasegawa-s .modal-content_outer {
    background-image: url(../image/modal_line.png), url(../image/modal_line.png), url(../image/boss_img03.jpg), url(../image/boss_img03.jpg);
    background-position: top, bottom, left, right;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 920px, 920px, 110px, 110px;
    padding: 13px 0;
}

#hasegawa-s .modal-content_wrap {
    max-width: 940px;
    width: 90%;
}

#hasegawa-s .modal-content {
    margin: 20px 0;
    height: 70vh;
}

#hasegawa-s .modal-body {
    padding: 20px clamp(20px, 18vw, 168px) 58px;
}

p.boss_txt01 {
    font-size: clamp(16px, 1.1vw, 17px);
    text-align: center;
    font-weight: bold;
    margin: 1em 0;
    line-height: 1.4;
}

p.boss_txt02 {
    font-size: clamp(18px, 2.0vw, 24px);
    text-align: center;
    line-height: 1.4;
    font-weight: bold;
    margin: 0 0 1em;
}

p.boss_txt03 {
    font-size: clamp(14px, 1.6vw, 17px);
    line-height: 1.8em;
    margin: 0 0 0.6em;
}

p.boss_txt03:last-of-type {
    margin-bottom: 50px;
}


.boss_box {
    display: grid;
    grid-template-columns: 134px 1fr;
    width: 80%;
    margin: 0 auto 50px;
    grid-gap: 12px;
    align-items: center;
}

p.boss_txt04 {
    margin: 0 0 0.6em;
    font-size: 13px;
    line-height: 1.4em;
}

p.boss_txt05 {
    margin: 0 0 0.6em;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4em;
}

p.boss_txt06 {
    margin: 0;
    font-weight: bold;
    line-height: 1;
}

img.boss_img01 {
    width: calc(100% - 220px);
    margin: 0 auto;
    display: block;
    padding-bottom: 40px;
}

/* カラー展開 */

.menu .modal-content_outer {
    border: none;
    box-shadow: none;
    border: 0 solid transparent;
    -webkit-border-image: url(../image/menu_bg.png) 150 / 100px stretch;
    -o-border-image: url(../image/menu_bg.png) 150 / 100px stretch;
    border-image: url(../image/menu_bg.png) 150 / 100px stretch;
    background: none;
    padding: 6vh;
}

.cnet .modal-content_outer {
    border: solid 16px #bc9e5e;
    box-shadow: 12px 12px 0px #bc9e5e;
}

.cms .modal-content_outer {
    border: solid 16px #b098b2;
    box-shadow: 12px 12px 0px #b098b2;
}

.kingram .modal-content_outer {
    border: solid 16px #e27d12;
    box-shadow: 12px 12px 0px #e27d12;
}

.rosso .modal-content_outer {
    border: solid 16px #bf1a20;
    box-shadow: 12px 12px 0px #bf1a20;
}



.menu .modalClose {
    border-color: #bc9e5e;
    color: #bc9e5e;
    right: -20px;
}


.cnet .modalClose {
    border-color: #bc9e5e;
    color: #bc9e5e;
}

.cms .modalClose {
    border-color: #b098b2;
    color: #b098b2;
}

.kingram .modalClose {
    border-color: #e27d12;
    color: #e27d12;
}

.rosso .modalClose {
    border-color: #bf1a20;
    color: #bf1a20;
}






.menu .modal-body_img_wrap {
    border-color: #bc9e5e;
}


.cnet .modal-body_img_wrap {
    border-color: #bc9e5e;
}

.cms .modal-body_img_wrap {
    border-color: #b098b2;
}

.kingram .modal-body_img_wrap {
    border-color: #e27d12;
}

.rosso .modal-body_img_wrap {
    border-color: #bf1a20;
}



.modal-header {
    //align-items: center;
    //display: grid;
    //grid-template-columns: 130px 1fr;
    //grid-gap: 10px;
    border-bottom: solid 1px;
    padding: 0 56px 2px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    //height: 110px;
    box-sizing: border-box;
}





.cnet .modal-header {
    //grid-template-columns: 108px 1fr;
}

.link .modal-header {
    //grid-template-columns: 92px 1fr;
}

.cms .modal-header {
    //padding: 35px clamp(28px, 3vw, 58px) 0;
}

.cms .modal-header p {
    //font-size: clamp(11px, 2vw, 14px);
}

.kingram .modal-header {
    //grid-template-columns: 126px 1fr;
}

.rosso .modal-header {
    //grid-template-columns: 98px 1fr;
    //padding: 35px clamp(28px, 3vw, 58px) 0;
}


h2.modal-body_name {
    font-size: 34px;
    text-align: center;
    margin: 0.6em 0 0;
    line-height: 1.4;
}

.modal-body_name_kana {
    font-size: 12px;
    text-align: center;
    margin: 0 0 2em;
}

.modal-body_img_wrap {
    border: solid 2px #1884c1;
    padding: 8px;
    border-radius: 30px;
}

img.modal-body_img {
    border-radius: 22px;
}

p.modal-body_txt {
    font-size: 17px;
    margin: 1.4em 0 0;
    text-align: left;
    line-height: 28px;
}

.modalClose {
    position: absolute;
    top: -20px;
    right: -30px;
    background: #fff;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 46px;
    border-radius: 12px;
    border: solid 6px #1884c1;
    color: #1884c1;
}

.modalClose:hover {
    cursor: pointer;
}

.modal-body {}


@keyframes modalopen {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }

    60% {
        opacity: 1;
        transform: scale(1.05);
    }

    80% {
        transform: scale(0.97);
    }

    100% {
        transform: scale(1);
    }
}





@media (max-width:768px) {


    .canvas {
        width: 2500px;
        height: 2500px;
        grid-template-columns: repeat(50, 50px);
        grid-template-rows: repeat(50, 50px);
    }

    .menu_header_home {
        width: 48px;
        padding: 12px;
    }

    .menu_header_meu {
        width: 124px;
        padding: 12px;
    }

    img.nenga_menu.modalOpen.panel.show {
        padding: 0;
    }

    .modal-content_wrap {
        margin: 10% auto 0;
    }

    .modal-content {
        max-height: 70vh;
    }

    .modal-header {
        padding: 20px 15px 0;
        height: auto;
    }

    .modalClose {
        right: -16px;
    }

    .cnet .modal-header {
        //padding: 20px 20px 10px;
    }

    .rosso .modal-header {
        //grid-template-columns: 98px 1fr;
        //padding: 20px 20px 10px;
    }

    .kingram .modal-header {
        //padding: 20px 20px 10px;
    }

    .cms .modal-header {
        //grid-template-columns: 100px 1fr;
        //padding: 20px 20px 0;
    }

    .cms .modal-header p {
        //font-size: 12px;
    }



    .modal-body {
        padding: 0 10px 40px;
    }

    .modal-content_outer {
        border: solid 8px #1884c1;
        box-shadow: 6px 6px 0px #1884c1;
    }

    .modal-content {
        margin: 23px 0;
    }

    .cnet .modal-content_outer {
        border: solid 8px #bc9e5e;
        box-shadow: 6px 6px 0px #bc9e5e;
    }

    .cms .modal-content_outer {
        border: solid 8px #b098b2;
        box-shadow: 6px 6px 0px #b098b2;
    }

    .kingram .content_outer-content {
        border: solid 8px #e27d12;
        box-shadow: 6px 6px 0px #e27d12;
    }

    .rosso .modal-content_outer {
        border: solid 8px #bf1a20;
        box-shadow: 6px 6px 0px #bf1a20;
    }

    .modal-header {
        font-size: 14px;
    }

    h2.modal-body_name {
        font-size: 28px;
    }

    .modal-body_name_kana {
        margin: 0 0 1em;
    }

    p.modal-body_txt {
        font-size: 16px;
        margin: 0.8em 0 0;
    }

    #hasegawa-s .modal-body {
        padding: 20px 20px 0;
    }

    #hasegawa-s .modal-content_outer {
        background-image: url(../image/modal_line.png), url(../image/modal_line.png);
        background-position: top, bottom;
        background-repeat: no-repeat, no-repeat;
        background-size: 640px, 640px;
        padding: 0;
    }

    #hasegawa-s .modal-content {
        margin: 23px 0;
    }

    .boss_box {
        grid-template-columns: 95px 1fr;
        width: 100%;
    }

    p.boss_txt03:last-of-type {
        margin-bottom: 20px;
    }

    p.boss_txt04 {
        margin: 0 0 4px;
        font-size: 11px;
    }

    p.boss_txt05 {
        margin: 0 0 4px;
        font-size: 12px;
    }

    p.boss_txt06 {
        font-size: 14px;
    }

    img.boss_img01 {
        width: 100%;
        padding-bottom: 30px;
    }



    .sp_none {
        display: none;
    }
}


@media (min-width:769px) {
    .pc_none {
        display: none;
    }

}