/*
Theme Name: fff2025
Theme URI:
Description:
Version: 1
Author: R-H
Author URI:https://r-h.info */

/* ==============================
共通css
=============================== */
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  font-family: 'ryo-gothic-plusn', zen-kaku-gothic-new, sans-serif;
  font-style: normal;
  font-size: 4vw;
  color: #2b1814;
  text-align: center;
}
summary::-webkit-details-marker {
  display: none;
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100vh;
  width: 100vw;
}
/* input {
  appearance: none;
  -webkit-appearance: none;
} */
body {
  background: #dfc191;
}
h1 {
  font-size: 10vw;
  font-weight: 800;
  line-height: 10vw;
}
h2 {
  font-weight: 800;
  font-size: 6vw;
  width: 65vw;
  margin: 7px auto;
  border-radius: 50px;
  padding: 4vw;
  line-height: 6vw;
  text-shadow: 1.2px 1.5px #fcfbf5;
  position: relative;
  left: 1vw;
  cursor: pointer;
}
h2 a {
  font-size: 6vw;
  position: relative;
  z-index: 999;
}
h2::before {
  content: "";
  border: 1px solid #2b1814;
  width: 72.5vw;
  height: 13.5vw;
  border-radius: 50px;
  display: block;
  position: absolute;
  top: -1vw;
  left: -1vw;
}
.green {
  background: #758b4e;
}
.orange {
  background: #d5680f;
}
.yellow {
  background: #f9c04b;
}
.text_ja a {
  font-size: 5.5vw;
}
.link h2 {
  margin-bottom: 3vw;
}
.link .orange {
  margin-top: 5.5vw;
}
ul {
  width: 70vw;
  margin: 0 auto 5vw;
}
li {
  cursor: pointer;
  border-bottom: 1px dashed #2b1814;
}

nav h1 {
  font-size: 7vw;
  margin-top: 20vw;
}
    /* ハンバーガーメニュー */
    #g-nav {
      position: fixed;
      z-index: 9999;
      top: -120%;
      left: 0;
      width: 100%;
      height: 100vh;
      background: rgba(234,234,226,0.9);
      transition: all 0.6s;
  }
  
  /* ナビゲーションが開かれたときのスタイル */
  #g-nav.panelopen {
      top: 0;
  }
  #g-nav p {
    text-align: center;
    font-size: 7vw;
    margin-top: 8vw;
    font-weight: 600;
  }
  #g-nav ul {
      position: absolute;
      z-index: 9999;
      top: 70vw;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
  }
  #g-nav ul a {
    font-size: 5vw;
    line-height: 10vw;
  }
  #g-nav ul img {
    width: 10vw;
  }
  #g-nav ul.nav_ico {
    display: flex;
      align-items: center;
      justify-content: space-around;
      width: 60vw;
      position: relative;
      top: 15vw;
  }
  .openbtn1 {
      position: fixed;
      z-index: 99999;
      top: 10px;
      right: 10px;
      cursor: pointer;
      width: 50px;
      height: 50px;
  }
  
  .openbtn1 span {
      display: inline-block;
      transition: all 0.4s;
      position: absolute;
      left: 14px;
      height: 3px;
      border-radius: 2px;
      background-color: #666;
      width: 45%;
  }
  
  .openbtn1 span:nth-of-type(1) {
      top: 15px;
  }
  
  .openbtn1 span:nth-of-type(2) {
      top: 23px;
  }
  
  .openbtn1 span:nth-of-type(3) {
      top: 31px;
  }
  
  /* ナビゲーションが開かれたときのボタンのスタイル */
  .openbtn1.open span:nth-of-type(1) {
      top: 18px;
      left: 18px;
      transform: translateY(6px) rotate(-45deg);
      width: 30%;
  }
  
  .openbtn1.open span:nth-of-type(2) {
      opacity: 0;
  }
  
  .openbtn1.open span:nth-of-type(3) {
      top: 30px;
      left: 18px;
      transform: translateY(-6px) rotate(45deg);
      width: 30%;
  }
    /* ハンバーガーメニューここまで */


.flag_img {
  display: flex;
  justify-content: space-between;
}
.flag_img img {
  width: 36vw;
  margin: 3vw;
}
.header_text {
  position: absolute;
  top: 3vw;
  left: 4vw;
  font-size: 3.3vw;
  font-weight: 600;
}
.title {
  margin: -7vw auto 7vw;
}
main p:nth-of-type(2),
main p:nth-of-type(3) {
  font-size: 6vw;
  font-weight: 800;
  line-height: 7vw;
}
main p:nth-of-type(4) {
  font-size: 6vw;
  line-height: 7vw;
  font-weight: 800;
  margin-bottom: 7vw;
}

.lang li {
  border: none;
}
.lang a {
  display: inline-block;
  border: 1px solid #2b1814;
  border-radius: 50px;
  width: 30vw;
  margin: 1vw auto;
  padding: 1vw;
  background: #fcfbf5;
}
.lang a:hover {
  background: #2b1814;
  color: #fcfbf5;
}

.timetable {
  width: 85%;
  display: inline-block;
  margin: 0 auto;
}

.official_shop p {
  line-height: 5vw;
}

.fff_icon_website {
  width: 20vw;
  margin: 5vw;
}

.post {
  margin: 10vw 1vw;
  height: 70vw;
}
.post img {
  width: 90vw;
}
.post h1 {
  margin-top: -46vw;
  font-size: 6vw;
}
.post ul {
  margin: 6vw auto;
  width: 70vw;
}
.post li {
  border-bottom: 1px dashed #2b1814;
  text-align: left;
  font-size: 3.5vw;
  line-height: 4.3vw;
  padding: 3vw 3vw 1vw;
}
.post a {
  font-size: 3.5vw;
}
.bottom_img {
  width: 90%;
  margin: 7vw auto;

}
.bottom_p {
  margin-top: -16vh;
    font-size: 5.7vw;
    font-weight: 800;
    line-height: 8.5vw;
}

.cf a {
  font-size: 5vw;
  position: relative;
  top: -0.5vh;
}
.cf h2 {
  margin-bottom: 2.5vh;
}
.cf h2.yellow {
  margin-bottom: 1.5vh;
} 

footer {
  margin: 10vw auto;
  padding-bottom: 1vw;
}
footer p,
footer a {
  font-size: 3vw;
  line-height: 4vw;
}
.copy {
  margin: 5vw auto;
}

.single_author {
  text-align: right;
  font-size: 2.5vw;
  margin: 5vw auto;
}
.s_table {
  margin: 0 auto;
}

/* ==============================
スマートフォン用css max-width768
=============================== */
@media screen and (max-width: 768px){

  .pc {
    display: none;
  }
}
/* ==============================
PC用css min-width769
=============================== */
@media screen and (min-width: 769px) {
  body {
    width: 100%;
    display: grid;
    grid-template-columns: 7fr 3fr;
    grid-template-areas: "area1 area2""area1 area3""area1 area4";
  }
  main,
  header,
  #g-nav {
    width: 30%;
    margin: 0 0 auto auto;
    right: 0;
  }
  header {
    grid-area: area2;
    /* background-color: red; */
  }
  main { 
    grid-area: area3;
    position: absolute;
    height: 85vh;
    overflow-y: scroll;
    overflow-x: hidden;
    box-shadow: 30px -50px 50px #2b1814;
    z-index: 99;
    /* background-color: green; */
  }
  aside {
    grid-area: area1;
    height: 100vh;
    width: 100%;
    z-index: 0;
    position: relative;
    /* background-color: blue; */
  }
  .aside_logo {
    position: static;
    height: 30vh;
    display: flex;
    margin: 31vh 0;
    width: 100%;
    background: none;
    flex-direction: column;
  }
  .aside_logo a {
    text-decoration: underline;
    display: inline-block;
    margin: 0.5vw auto;
    padding: 0.5vw 1vw;
    border-radius: 50px;
  }
    .aside_logo a:hover {
      background: #758b4e;
      font-weight: 500;
      text-decoration: none;
    }

  aside img {
    height: 30vh;
  }
  aside h1 {
    font-size: 27px;
    line-height: 38px;
    margin-top: -13vh;
    }
  aside div {
    display: flex;
    position: fixed;
    background: #d5680f;
    height: 2vw;
    width: 70vw;
    bottom: 5vh;
  }
  aside ul {
    display: flex;
    width: 100%;
  }
  aside p {
    line-height: 2vw;
  }
  aside li {
    border: 0;
    line-height: 2vw;
    padding: 0 2vw;
  }
  aside li::before {
    content: "▶";
    font-size: 1vw;
    line-height: 2vw;
    display: inline;
  }
  aside .copy {
    margin: 0 auto;
    position: fixed;
    bottom: 0;
    background: none;
    width: 70vw;
  }
  aside .copy p {
    margin: 0 auto;
    text-align: center;
  }
  .marquee {
    color: #fff;
    line-height: 30px;
    /* padding-left: 100%; */
    white-space: nowrap;
    animation: animate-banner 30s linear infinite;
    background: none;
    z-index: 0;
    padding: 0 72vw 0 0;
  }
  @keyframes animate-banner {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  nav h1 {
    margin-top: 2vw;
  }
  #g-nav ul {
    width: 70%;
    top: 40vh;
  }
  #g-nav ul a {
    line-height: 4vw;
  }.flag_img {
    justify-content: center;
  }
  .flag_img img {
    width: 35%;
    position: relative;
    top: -3vh;
  }
.header_text {
  font-size: 1.2vw;
  top: 0.5vw;
  left: 1vw;
}

.lang li {
  margin: 0vw 6.9vw 0;
  width: 15vw;
}
.lang a {
  width: 13vw;
}

.title {
  font-size: 3vw;
  line-height: 4vw;
  margin: -7vw 0 3vw;
}
main p:nth-of-type(2), main p:nth-of-type(3) {
  font-size: 2.5vw;
  line-height: 3vw;
}
main p:nth-of-type(4) {
  font-size: 2.5vw;
  line-height: 3vw;
  margin-bottom: 4vw;
}
  footer .copy {
    margin: 1vw auto;
  }

h2 {
  font-size: 2vw;
  width: 17vw;
  padding: 3vw;
  line-height: 0vw;
  left: 0vw;
}
h2::before {
  width: 23vw;
  height: 6vw;
  top: -0.5vw;
  left: -0.5vw;
}

.official_shop p {
  line-height: 1.6vw;
}
.official_shop h2 {
  font-size: 1.8vw;
}

.fff_icon_website {
  width: 5vw;
  margin: 2vw auto 1.5vw;
}

.post {
  margin: 4vw 1vw;
  height: 20vw;
}
.post img {
  width: 100%;
}
.post h1 {
  margin-top: -14.5vw;
  font-size: 2vw;
  line-height: 4vw;
}
.post ul {
  margin: 1vw auto;
  width: 22vw;
}
.post li {
  font-size: 1.2vw;
  line-height: 1.2vw;
  padding: 1vw 1vw 0.5vw;
}
.post a {
  font-size: 1.2vw;
}
.text_ja a {
  font-size: 1.9vw;
}
.link h2 a {
  font-size: 2vw;
}
.link h2 {
  margin-bottom: 2vw;
}
.link .orange {
  margin-top: 3.5vw;
}
.bottom_p {
font-size: 1.7vw;
line-height: 2.5vw;
margin-top: -16vw;
}



  footer {
    grid-area: area4;
    height: 18vh;
    margin: 0 auto;
    position: fixed;
    right: 0;
    width: 30%;
    bottom: 0;
    box-shadow: 30px 50px 50px #2b1814;
    z-index: 9999;
    border-top: 1px dashed #2b1814;
    background: #dfc191;
    /* background-color: pink; */
  }

  footer p, footer a {
    font-size: 1vw;
    line-height: 1.5vw;
  }
  nav h1 {
    font-size: 2vw;
    margin-top: 4vh;
  }
  #g-nav ul {
    top: 35vh;
  }
  #g-nav li {
    cursor: pointer;
  }
  #g-nav ul a {
    font-size: 2vw;
    display: inline-block;
    width: 100%;
  }

  .cf a {
    font-size: 1.5vw;
  }  

  .aside_cf {
    display: flex;
    background: none;
    position: absolute;
    top: 5vh;
    left: 2vw;
    flex-direction: column;
    height: 18vh;
    }
  
  .aside_cf p {
    background: #fcfbf5;
    border-radius: 500vw;
    width: 15vw;
    height: 6vw;
    margin-bottom: 2vw; 
  }
  
  .aside_cf a {
    font-size: 1.5vw;
    font-weight: 600;
    line-height: 2vw;
    display: inline-block;
    width: 15vw;
    height: 5vw;
    border-radius: 500vw;
    padding-top: 1vw;
    }

  
  .aside_cf a:hover {
    color: #fcfbf5;
    background: #758b4e;
    box-shadow: 5px 2px #f9c04b;
    transition: 0.5s;
  }

  .single_author {
    font-size: 1.3vw;
  }
  

  .mobile {
  display: none;
  }
}