figure {
    cursor: pointer;
    margin: 0;
    z-index: 0;
}

.grid_figure a {
    width: 100%;
    height: 100%;
}

.grid_figure img {
    width: 100%;
    height: 100%;
}

/* 外枠 */
/* メニュー外枠 */
.nav-panel {
    height: 85vh;
    top: 0;
    width: 500px;
    font-size: 1.6em;
    font-family: a-otf-ryumin-pr6n, serif;
    font-style: normal;
    font-weight: 300;
    position: fixed;
    z-index: 1;
    right: -500px;
    background-color: #fcf3f0;
    overflow-x: hidden;
    transition: 0.5s;
}

.nav-panel h4 {
    font-size: 25px;
}


/* メニュー背景黒 */
#back {
    display: none;
    background-color: rgba(0, 0, 0, .6);
    position: fixed;
    height: 100%;
    z-index: 9;
    width: 100%;
}


.panel ul {
    display: grid;
    grid-template-areas: 'header header header ' 'main menu right' 'main1 menu1 right1' 'main2 menu2 right2';
    grid-gap: 1px;
    text-align: center;
    list-style: none;
    padding: 0%;
    margin: 0%;
}
/* 外枠 */

.panel ul p {
    font-size: 16px;
}



nav h4 {
    cursor: default;
}

nav p {
    color: white;
}

nav p:hover {
    opacity: 0.7;
}

.panel .grid.two {
    display: grid;
    grid-template-areas: 'header header' 'menu1 right1' 'menu2 right2' 'menu3 right3' 'menu4 right4';
    grid-gap: 1px;
    text-align: center;
    list-style: none;
    padding: 0%;
    margin: 0%;
}

.header_item {
    grid-area: header;
    position: relative;
}

.header_item1 {
    grid-area: main;
    position: relative;
}

.header_item2 {
    grid-area: menu;
    position: relative;
}

.header_item3 {
    grid-area: right;
    position: relative;
}

.header_item4 {
    grid-area: main1;
    position: relative;
}

.header_item5 {
    grid-area: menu1;
    position: relative;
}

.header_item6 {
    grid-area: right1;
    position: relative;
}

.header_item7 {
    grid-area: main2;
    position: relative;
}

.header_item8 {
    grid-area: menu2;
    position: relative;
}

.header_item9 {
    grid-area: right2;
    position: relative;
}


.header_item7_2 {
    grid-area: menu2;
    position: relative;
}

.header_item8_2 {
    grid-area: right2;
    position: relative;
}

.header_item9_2 {
    grid-area: menu3;
    position: relative;
}
.header_item10_2 {
    grid-area: right3;
    position: relative;
}

.header_item11_2 {
    grid-area: menu4;
    position: relative;
}
.header_item12_2 {
    grid-area: right4;
    position: relative;
}

.panel ul p {
    position: absolute;
    width: 100%;
    top: 45%;
    left: 47%;
    padding: 0;
    margin: 0%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.panel ul .header_ttl_glid {
  position: inherit;
  top: 0;
  left: 0;
  transform: translate(0%, 0%);
  color: rgb(0 0 0);
  font-size: 25px;
  font-family: a-otf-ryumin-pr6n, serif;
  font-style: normal;
  font-weight: bold;
}



nav h2 {
    padding: 0%;
    margin: 0%;
}

/* スマホフッター */
.footer {
  list-style: none;
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  text-align: center;
  margin-left: 20%;
margin-right: 20%;
  /* margin-left: 5%;
  margin-right: 5%; */
  padding-top: 3%;
  padding-bottom: 3%;
}
/* スマホフッター */

.footer_sns {
  list-style: none;
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  text-align: center;
  margin-left: 2%;
  margin-right: 2%;
  padding-top: 3%;
  padding-bottom: 3%;
}

.footer_sns li.sns_panel_word {
  font-size: 12px;
  vertical-align: middle;
  align-items: center;
  align-items: center;
  justify-content: center;
  margin: 10px 0 0 0;
}

.footer li img {
    width: 60%;
    cursor: pointer;
}

.nav-panel {
    background-color: #fcf3f0;
    text-align: center;
}

@media (max-width:780px) {

  .smart_nav-panel {
      height: 90%;
      top: 0;
      width: 0;
      font-size: 1.6em;
      font-family: a-otf-ryumin-pr6n, serif;
      font-style: normal;
      font-weight: 300;
      position: fixed;
      z-index: 1;
      right: 0;
      background-color: #fcf3f0;
      overflow-x: hidden;
      transition: 0.5s;
  }


    .header_item {
        grid-area: header;
        position: relative;
    }
    .header_item1 {
        grid-area: main;
        position: relative;
    }
    .header_item2 {
        grid-area: menu;
        position: relative;
    }
    .header_item3 {
        grid-area: main1;
        position: relative;
    }
    .header_item4 {
        grid-area: menu1;
        position: relative;
    }
    .header_item5 {
        grid-area: main2;
        position: relative;
    }
    .header_item6 {
        grid-area: menu2;
        position: relative;
    }
    .header_item7 {
        grid-area: main3;
        position: relative;
    }
    .header_item8 {
        grid-area: menu3;
        position: relative;
    }
    .header_item9 {
        grid-area: footer;
        position: relative;
    }
    .header_item7_2{
      grid-area: main3;
      position: relative;
    }
    .header_item8_2{
      grid-area: menu3;
      position: relative;
    }
    .header_item9_2{
      grid-area: main4;
      position: relative;
    }
    .header_item10_2{
      grid-area: menu4;
      position: relative;
    }
    .header_item11_2{
      grid-area: main5;
      position: relative;
    }




    #smart_last_headeritem {
        margin-top: 5%;
    }
    .panel ul p {
        position: absolute;
        width: 100%;
        top: 50%;
        left: 50%;
        padding: 0;
        margin: 0%;
        transform: translate(-50%, -50%);
        cursor: pointer;
        font-size: 2.8em;
    }

    .panel ul .header_ttl_glid {
      position: inherit;
      top: 0;
      left: 0;
      transform: translate(0%, 0%);
      color: rgb(0 0 0);
      font-size: 25px;
      font-family: a-otf-ryumin-pr6n, serif;
      font-style: normal;
      font-weight: bold;
    }

    nav h2 {
        padding: 0%;
        margin: 0%;
    }
    nav h4 {
        cursor: default;
        font-size: 4em;
    }
    .footer {
        list-style: none;
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        text-align: center;
        margin-left: 1%;
        margin-right: 1%;
        padding-top: 3%;
        padding-bottom: 5%;
    }
    .footer li img {
        width: 60%;
        cursor: pointer;
        height: calc(12.7vw * (57 / 58));
    }

    .panel {
        background-color: #FFF;
        text-align: center;
        padding-left: 1%;
        padding-right: 1%;
    }
    .panel ul {
        display: grid;
        grid-template-areas: 'header header' 'main menu' 'main1 menu1' 'main2 menu2' 'main3 menu3' 'footer footer';
        grid-gap: 1px;
        text-align: center;
        list-style: none;
        padding: 0%;
        margin: 0%;
    }

    .panel ul p {
        font-size: 3em;
    }

    .panel .grid.two {
        display: grid;
        grid-template-areas: 'header header' 'main2 menu2' 'main3 menu3' 'main4 menu4' 'main5 menu5';
        grid-gap: 1px;
        text-align: center;
        list-style: none;
        padding: 0%;
        margin: 0%;
    }
}