/*
Theme Name: Gallery Bar Nemu
Description: A custom WordPress theme for Gallery & Bar Nemu
Version: 1.0
Author: Nemu
*/

:root {
    --color-yellow: #f5f476;
    --color-blue: #0b547a;
    --color-pink: #f8bcc4;
    --color-gray: #262627;
    --color-orange: #f8bc67;
    --color-white: #fdfdfc;
    --font-size-body: 12pt;
    --font-size-header: 12pt;
    --font-size-section-title: 24pt;
    --font-size-first-view: 14pt;
    --font-size-owner-h: 10pt;
    --font-size-owner-d: 12pt;
    --height-size-header: 4rem;
    --height-size-header-slide-area: 14rem;
    --height-size-body-slide-area: 7rem;
    --height-size-line: 0.1rem;
    --height-size-lineheight: 1rem;
    --height-size-lineheight-s: 0.5rem;
    --height-size-lineheight-ss: 0.25rem;
    --height-size-lineheight-l: 1.5rem;
    --width-size-section-body: 84vw;
    --width-size-header-slide-area: 100%;
    --width-size-body-slide-area: 100%;
    --width-size-body-wide: 60rem;
    --width-size-line: 100%;
    --width-size-exhibitions-line: 80%;
    --width-size-exhibitions: 60%;
    --menu-btn-size-menu: 4rem;
  }
  
  body {
    width: 100%;
    font-size: var(--font-size-body);
  }
  
  main {
    margin-top: var(--height-size-header);
  }
  
  img {
    max-width: 100vw;
  }

  p {
    line-height: 1.5;
  }
  
  .section-title {
    color: var(--color-yellow);
    font-size: var(--font-size-section-title);
    text-align: center;
    padding: 1.2rem 0 1rem;
  }
  
  .section-sub-title {
    margin-top: -0.5rem;
  }
  
  .section-container {
    width: var(--width-size-section-body);
    margin-bottom: 1.5rem;
  }
  
  .section-container p {
    color: var(--color-white);
  }
  
  .section-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .background-gray {
    background-color: var(--color-gray);
  }
  
  .yellow-line {
    height: var(--height-size-line);
    width: var(--width-size-line);
    background-color: var(--color-yellow);
    border: none;
    margin: 0.5rem 0;
  }
  
  .gray-line {
    height: var(--height-size-line);
    width: var(--width-size-exhibitions-line);
    background-color: var(--color-gray);
    border: none;
    margin: 0.5rem 0;
  }
  
  .mt5 {
    margin-top: 0.5rem !important;
  }
  
  .mt1 {
    margin-top: 1rem !important;
  }
  
  .mb1 {
    margin-bottom: 1rem;
  }
  
  .color-orange {
    color: var(--color-orange) !important;
  }
  
  @media screen and (min-width: 768px) {
    .section-container {
      margin-bottom: 3rem;
      margin-top: 2rem;
      width: 55vw;
    }
  }
  
  #about-area,
  #address-area,
  #news-area,
  #menu-area,
  #access-area,
  #exhibitions-area,
  #rental-area {
    scroll-margin-top: 4rem;
  }
  
  /* ============================== */
  /* header */
  
  header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    height: var(--height-size-header);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background-color: var(--color-blue);
  }
  
  .header-text {
    color: var(--color-pink);
    font-weight: bold;
    font-size: var(--font-size-header);
  }

  .header-text p {
    font-size: 14px;
  }
  
  #menu-btn {
    width: var(--menu-btn-size-menu);
    height: var(--menu-btn-size-menu);
  }
  
  #header-nav {
    position: fixed;
    top: var(--height-size-header);
    left: 0;
    width: 100%;
    z-index: 1000;
    background-image: url("./assets/img/header-nav-background.jpg");
    background-repeat: no-repeat;
    color: var(--color-orange);
  }
  
  .nav-list {
    padding: var(--height-size-header) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .nav-item {
    width: 100%;
    text-align: center;
  }
  
  .nav-item a {
    width: 100%;
    height: 100%;
    padding: var(--height-size-lineheight-s) 0;
    display: block;
  }
  
  /* ============================== */
  /* footer */
  
  footer {
    color: var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--height-size-lineheight) 0;
  }
  
  .footer-blue {
    background-color: var(--color-blue);
  }
  
  /* ============================== */
  /* top page  */
  
  #top {
    background-color: var(--color-blue);
  }
  
  /* ============================== */
  /* header slide  */
  
  .header-slide {
    margin-bottom: 34px;
    overflow: hidden;
  }
  
  .slide-container {
    width: 2000%;
    display: flex;
    align-items: center;
  }

  .slide-wrapper {
    display: flex;
    animation: slide-flow 20s infinite linear 1s both;
  }

  .slide {
    width: calc(13rem / 3 * 4);
    object-fit: cover;
    height: 13rem;
  }

  @keyframes slide-flow {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  
  @media screen and (min-width: 768px) {
    .slide {
      width: calc(18rem / 3 * 4);
      object-fit: cover;
      height: 18rem;
    }
  
    .slide-wrapper {
      animation: slide-flow 30s infinite linear 1s both;
    }
  }
  
  /* ============================== */
  /* catchphrase */
  
  .logo-area {
    display: flex;
    justify-content: center;
    margin-bottom: 44px;
  }
  
  .logo {
    width: 10rem;
    height: 10rem;
  }
  
  .catchphrase-area {
    padding-bottom: 1rem;
  }
  
  .catchphrase {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .lang-ja,
  .lang-en {
    text-align: center;
    color: var(--color-pink) !important;
    margin-bottom: 2rem;
    font-size: var(--font-size-first-view);
    font-size: 17px;
  }
  
  /* ============================== */
  /* body slide */
  
  .body-slide-are {
    overflow: hidden;
  }
  
  .body-slide-container {
    width: 1000%;
    display: flex;
    align-items: center;
  }
  .body-slide-wrapper {
    display: flex;
    animation: body-slide-flow 20s infinite linear 1s both;
  }
  .body-slide {
    width: calc(6rem / 3 * 4);
    object-fit: cover;
    height: 6rem;
  }
  @keyframes body-slide-flow {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  
  @media screen and (min-width: 768px) {
    .body-slide {
      width: calc(8rem / 3 * 4);
      height: 8rem;
    }
  }
  
  /* ============================== */
  /* about */
  
  #about-area p {
    margin-bottom: var(--height-size-lineheight);
  }
  
  .owner {
    color: var(--color-white);
    text-align: center;
  }
  
  .owner-h {
    font-size: var(--font-size-owner-h);
  }
  
  .owner-d {
    font-size: var(--font-size-owner-h);
  }
  
  /* ============================== */
  /* about */
  
  .instagram-btn {
    background-color: var(--color-yellow);
    color: var(--color-white);
    width: 6rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--height-size-lineheight);
  }
  
  .instagram-inner {
    background-color: var(--color-gray);
    width: 5.6rem;
    height: 1.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .address-info {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .address-info p {
    margin-bottom: var(--height-size-lineheight-s);
  }

  #address-title {
    font-size: 24px;
  }
  
  .contact {
    margin: var(--height-size-lineheight-s) 0 0;
  }
  
  .contact a {
    color: var(--color-white);
    text-align: left;
  }
  
  /* ============================== */
  /* news */
  
  .wait-text {
    padding: 5rem 0;
  }

  #news-area p {
    padding: 1rem;
    text-align: center;
  }

  #news-area img {
    width: var(--width-size-section-body);
    margin-bottom: 1rem;
  }
  
  /* ============================== */
  /* menu drink & food */
  
  #menu-area .section-container {
    display: flex;
    flex-direction: column;
  }
  
  .menu-table tr {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--height-size-lineheight);
  }
  
  .menu-table th {
    color: var(--color-orange);
    text-align: center;
    line-height: 1.3rem;
  }
  
  .menu-table td {
    color: var(--color-white);
    text-align: center;
    line-height: 1.3rem;
  }
  
  .menu-table-border {
    border-bottom: var(--height-size-line) solid var(--color-yellow);
    padding-bottom: var(--height-size-lineheight);
  }
  
  /* ============================== */
  /* access */
  
  .map-image {
    width: var(--width-size-section-body);
  }
  
  .access-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--height-size-lineheight);
    line-height: 1.1rem;
  }
  
  #access-area .section-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  @media screen and (min-width: 768px) {
    .map-image {
      width: 36rem;
    }
  }
  
  /* ============================== */
  /* footer slide */
  
  .footer-slide-area {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .footer-slide-container {
    width: var(--width-size-section-body) !important;
    height: calc(80vw / 4 * 3);
    margin: 2rem 0;
  }
  
  .footer-slide-container img {
    width: var(--width-size-section-body);
  }
  
  @media screen and (min-width: 768px) {
    .footer-slide-container {
      width: 65vw;
      height: calc(65vw / 4 * 3);
      margin: 2rem 0;
    }
  
    .footer-slide-container img {
      width: 65vw;
    }
  }
  
  /* ============================== */
  /* past exhibitions */
  
  .heading-area {
    background-color: var(--color-gray);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .page-title {
    padding: var(--height-size-lineheight-s);
    color: var(--color-yellow);
    font-size: var(--font-size-section-title);
  }
  
  .page-sub-title {
    padding: var(--height-size-lineheight-s);
    color: var(--color-white);
  }
  
  .exhibitions-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .exhibitions-text {
    width: var(--width-size-exhibitions);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: var(--height-size-lineheight-l);
  }
  
  .exhibitions-images {
    width: var(--width-size-exhibitions);
  }
  
  .exhibitions-images img {
    width: 100%;
  }
  
  @media screen and (min-width: 768px) {
    .exhibitions-images {
      width: 80vw;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }
  
    .exhibitions-images img {
      width: 39vw;
    }
  }
  
  /* ============================== */
  /* rental */
  
  #rental {
    background-color: var(--color-gray);
  }
  
  #rental article {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .rental-container {
    width: 80%;
    color: var(--color-white);
    line-height: var(--height-size-lineheight-l);
    padding-bottom: 1rem;
  }
  
  .rental-container section {
    margin-bottom: 1rem;
  }
  
  .rental-container h3,
  .rental-container p {
    padding: var(--height-size-lineheight-ss);
  }
  
  .commentary-container {
    background-color: var(--color-blue);
    color: var(--color-white);
    padding: 2rem;
  }
  
  .layout-container {
    background-color: var(--color-gray);
    color: var(--color-white);
  }
  
  .layout-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .layout-image {
    width: 80%;
    margin-bottom: 2rem;
  }
  
  @media screen and (min-width: 768px) {
  .rental-container, .commentary-container p {
    width: 55vw;
  }
  
  .commentary-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  
  .commentary-container p {
    text-align: left;
  }
  }