@charset "UTF-8";
/* ==================================
  基本設定
================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  background-color: #5f381b;
}

body {
  font-size: 1.6rem;
  line-height: 1.9;
  color: #333;
  background-color: #fff;
  margin: 0 auto;
  padding: 0;
  animation: fadeIn 1.5s ease 0s 1 normal;
  font-family: "Noto Sans JP", sans-serif;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
body {
  margin: 0;
  font-family: sans-serif;
  color: #333;
  background-image: url('/img/bg.png');
  background-attachment: fixed;
  background-size: cover;
  background-position: 60% 50%;
}

/* ==================================
  共通要素
================================== */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s;
  display: block;
}
a:hover {
  opacity: 0.7;
}

ul,ol {
  padding-left: 2rem;
}


/* ==================================
  レイアウトユーティリティ
================================== */
section {
    /*width: 100%;*/
    padding: 6rem 0;
  }
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
  font-family: 'Yusei Magic', sans-serif;
  font-style: italic;
}

/*****header*******/
header {
  position: fixed;
  display: flex;
  width: 1600px;
  max-width: 90%;
  justify-content: flex-start;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
.logo {
  width: 360px;
  max-width: 30%;
}


/*****main*******/
main{
  display: flex !important;
      width: 1700px;
      max-width: 90%;
      justify-content: flex-end;
      /* flex-direction: row-reverse;*/
}
.contents{
  width: 480px;
  position: relative;
  background: rgb(192 0 0 / 35%);
  filter: drop-shadow(2px 4px 6px #333);
  z-index: 0;
  overflow: hidden;
  backdrop-filter: blur(2px);
}

.hero {
  padding: 2em 1em;
}
.hero h1{
  text-align: left;
  font-size: clamp(2.2rem, 6.8vw, 3.4rem);
  line-height: 1.5;
  color: #eee;
  font-family: serif;
  font-weight: 400;
}
.hero img{
  display: none;
}

.menu, .concept, .info {
  padding: 1.5em 1em;
  background-color: rgba(233, 233, 233, 0.95);
  margin: 1em;
  border-radius: 8px;
}

h2 {
  margin-bottom: 1rem;
}

ul {
  list-style: none;
  padding-left: 0;
}


.menu ul{
  margin-bottom: 1.7rem;
}

footer {
  text-align: center;
  padding: 1rem;
  background-color: #261717;
  color: #eee;
  font-size: small;
  width: 100%;
}


/****レスポンシブ*****/
@media (max-width: 900px) {
  main{
    display: block;
    max-width: 100%;
  }
  .contents{
    margin: auto;
  }
  .hero img{
    display: block;
    margin: 0 auto 1.5rem;
    width: 140px;
  }
  .logo{
    display: none;
  }
}