.gridmap {
  display: grid;
  grid-template: 
  "... p01 p01 p01 ... ... ... ... p02 p02 p02 p02" 1fr 
  "... p01 p01 p01 ... ... ... ... p05 p05 p03 p03" 0.8fr 
  "... p01 p01 p01 ... ... ... ... p05 p05 p03 p03" 0.8fr 
  "... ... ... ... ... ... ... ... p06 p06 p04 p04" 0.8fr 
  "... ... ... ... ... p17 ... ... p06 p06 p04 p04" 0.8fr 
  "... ... ... ... ... p17 p16 p15 p15 p07 p07 p07" 1fr 
  "... ... ... ... ... p18 p16 p20 p10 p09 p09 p08" 1fr 
  "p32 p32 p31 p28 p26 p18 p21 p20 p10 p09 p09 p08" 1fr 
  "p35 p34 p33 p28 p26 p25 p21 p19 p11 p11 p11 p08" 1fr 
  "p35 p34 p33 p27 p29 p25 p21 p19 p13 p13 p13 p12" 1fr 
  "... ... ... p27 p29 p25 p21 p19 p13 p13 p13 p12" 0.1fr
  "p38 p38 p37 p27 p29 p24 p23 p22 p14 p14 p14 p12" 1fr 
  "p39 p39 p36 p30 p30 p24 p23 p22 ... ... ... p12" 1fr 
  "... ... ... p30 p30 p24 ... ... ... ... ... ..." 0.5fr
  "p41 p40 p44 ... ... ... ... ... ... ... ... ..." 1fr
  "p41 p40 p44 ... ... ... ... ... ... ... ... ..." 1fr
  "p42 p43 p45 ... ... ... ... ... ... ... ... ..." 1fr
  "p42 p43 p45 ... ... ... ... ... ... ... ... ..." 1fr
  "... p46 p46 ... p47 ... ... ... ... ... ... p48" 1.5fr
  /2fr 2fr 2.4fr 2fr 2fr 2fr 2fr 2fr 2fr 1fr 1fr 2fr;
  gap: 2px;
  grid-gap: 2px;
  width:92vw;
  height:34em;
  margin: 0 calc(50% - 46vw);
  padding: 0;
}

#pref{
  width:96vw;
  margin: 0 calc(50% - 48vw);
  padding: 1em 0;
  background:#fff;
}

@media screen and(min-width: 768px){
  .gridmap{
    width: 50em;
    height: 20em;
  }
  
}

.gridmap input {
  display: none;
}


.pref {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.2em;
  transition: all 0.2s ease;
}

.pref:hover, .pref:active, input:checked + .pref {
  font-weight: bold;
}

.pref a {
  width: 100%;
  height: 100%;
  text-decoration: inherit;
  color: inherit;
  border-radius: inherit;
  display: inherit;
  align-items: inherit;
  justify-content: inherit;
  font-size: 0.8em;
}

.pref.hokkaido {
  color: #fff;
  background-color: #a0d8ef;
}

.pref.hokkaido:hover {
  color: #fff;
  background-color: #74b8d2;
}

.pref.hokkaido:active, input:checked + .pref.hokkaido {
  color: #fff;
  background-color: #74b8d2;
}

.pref.tohoku {
  color: #fff;
  background-color: #9edc65;
}

.pref.tohoku:hover {
  color: #fff;
  background-color: #81c046;
}

.pref.tohoku:active, input:checked + .pref.tohoku {
  color: #fff;
  background-color: #81c046;
}

.pref.kanto {
  color: #fff;
  background-color: #eba6af;
}

.pref.kanto:hover {
  color: #fff;
  background-color: #ca717d;
}

.pref.kanto:active, input:checked + .pref.kanto {
  color: #fff;
  background-color: #ca717d;
}

.pref.chubu {
  color: #231815;
  background-color: #eed77c;
}

.pref.chubu:hover {
  color: #231815;
  background-color: #d0b64e;
}

.pref.chubu:active, input:checked + .pref.chubu {
  color: #231815;
  background-color: #d0b64e;
}

.pref.kinki {
  color: #fff;
  background-color: #6c9bd2;
}

.pref.kinki:hover {
  color: #fff;
  background-color: #406997;
}

.pref.kinki:active, input:checked + .pref.kinki {
  color: #fff;
  background-color: #406997;
}

.pref.chugoku {
  color: #fff;
  background-color: #8e8bc2;
}

.pref.chugoku:hover {
  color: #fff;
  background-color: #6e6baa;
}

.pref.chugoku:active, input:checked + .pref.chugoku {
  color: #fff;
  background-color: #6e6baa;
}

.pref.shikoku {
  color: #fff;
  background-color: #d8aad9;
}

.pref.shikoku:hover {
  color: #fff;
  background-color: #bb87bc;
}

.pref.shikoku:active, input:checked + .pref.shikoku {
  color: #fff;
  background-color: #bb87bc;
}

.pref.kyushu {
  color: #fff;
  background-color: #e95464;
}

.pref.kyushu:hover {
  color: #fff;
  background-color: #b13c47;
}

.pref.kyushu:active, input:checked + .pref.kyushu {
  color: white;
  background-color: #b13c47;
}

.pref.foreign {
  color: #fff;
  background-color: #ee9a33;
}

.pref.foreign:hover {
  color: #fff;
  background-color: #d36622;
}

.pref.foreign:active, input:checked + .pref.foreign {
  color: white;
  background-color: #d36622;
}

.pref:nth-of-type(1) {
  grid-area: p01;
}

.pref:nth-of-type(2) {
  grid-area: p02;
}

.pref:nth-of-type(3) {
  grid-area: p03;
}

.pref:nth-of-type(4) {
  grid-area: p04;
}

.pref:nth-of-type(5) {
  grid-area: p05;
}

.pref:nth-of-type(6) {
  grid-area: p06;
}

.pref:nth-of-type(7) {
  grid-area: p07;
}

.pref:nth-of-type(8) {
  grid-area: p08;
}

.pref:nth-of-type(9) {
  grid-area: p09;
}

.pref:nth-of-type(10) {
  grid-area: p10;
}

.pref:nth-of-type(11) {
  grid-area: p11;
}

.pref:nth-of-type(12) {
  grid-area: p12;
}

.pref:nth-of-type(13) {
  grid-area: p13;
}

.pref:nth-of-type(14) {
  grid-area: p14;
}

.pref:nth-of-type(15) {
  grid-area: p15;
}

.pref:nth-of-type(16) {
  grid-area: p16;
}

.pref:nth-of-type(17) {
  grid-area: p17;
}

.pref:nth-of-type(18) {
  grid-area: p18;
}

.pref:nth-of-type(19) {
  grid-area: p19;
}

.pref:nth-of-type(20) {
  grid-area: p20;
}

.pref:nth-of-type(21) {
  grid-area: p21;
}

.pref:nth-of-type(22) {
  grid-area: p22;
}

.pref:nth-of-type(23) {
  grid-area: p23;
}

.pref:nth-of-type(24) {
  grid-area: p24;
}

.pref:nth-of-type(25) {
  grid-area: p25;
}

.pref:nth-of-type(26) {
  grid-area: p26;
}

.pref:nth-of-type(27) {
  grid-area: p27;
}

.pref:nth-of-type(28) {
  grid-area: p28;
}

.pref:nth-of-type(29) {
  grid-area: p29;
}

.pref:nth-of-type(30) {
  grid-area: p30;
}

.pref:nth-of-type(31) {
  grid-area: p31;
}

.pref:nth-of-type(32) {
  grid-area: p32;
}

.pref:nth-of-type(33) {
  grid-area: p33;
}

.pref:nth-of-type(34) {
  grid-area: p34;
}

.pref:nth-of-type(35) {
  grid-area: p35;
}

.pref:nth-of-type(36) {
  grid-area: p36;
}

.pref:nth-of-type(37) {
  grid-area: p37;
}

.pref:nth-of-type(38) {
  grid-area: p38;
}

.pref:nth-of-type(39) {
  grid-area: p39;
}

.pref:nth-of-type(40) {
  grid-area: p40;
}

.pref:nth-of-type(41) {
  grid-area: p41;
}

.pref:nth-of-type(42) {
  grid-area: p42;
}

.pref:nth-of-type(43) {
  grid-area: p43;
}

.pref:nth-of-type(44) {
  grid-area: p44;
}

.pref:nth-of-type(45) {
  grid-area: p45;
}

.pref:nth-of-type(46) {
  grid-area: p46;
}

.pref:nth-of-type(47) {
  grid-area: p47;
}

.pref:nth-of-type(48) {
  grid-area: p48;
  font-size:0.7em;
}

.pref:nth-of-type(1), .pref:nth-of-type(47), .pref:nth-of-type(48) {
  border-radius: 1.2em;
}

.pref:nth-of-type(2), .pref:nth-of-type(17), .pref:nth-of-type(32), .pref:nth-of-type(38), .pref:nth-of-type(41) {
  border-top-left-radius: 1.2em;
}

.pref:nth-of-type(2), .pref:nth-of-type(17), .pref:nth-of-type(37), .pref:nth-of-type(44) {
  border-top-right-radius: 1.2em;
}

.pref:nth-of-type(12), .pref:nth-of-type(14), .pref:nth-of-type(22), .pref:nth-of-type(24), .pref:nth-of-type(36), .pref:nth-of-type(42), .pref:nth-of-type(46) {
  border-bottom-right-radius: 1.2em;
}

.pref:nth-of-type(12), .pref:nth-of-type(23), .pref:nth-of-type(30), .pref:nth-of-type(35), .pref:nth-of-type(39), .pref:nth-of-type(42), .pref:nth-of-type(46) {
  border-bottom-left-radius: 1.2em;
}



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

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.gridmap .pref a.disabled {
  background-color: #e3e3e3;
  color: #ffffff;
  pointer-events: none;
}