@import url('https://fonts.googleapis.com/css2?family=Kaisei+HarunoUmi&family=Shippori+Mincho&family=Kaisei+Opti&display=swap');

html {
  scroll-behavior: smooth;
}

body{
  margin: 0;
  padding: 0 0 0 0;
}

.hero{
  height: 100svh;
  width: 100%;
  object-fit: cover;
  display: block;
}

.content{
  margin: 0 10px 0;
}

.bar1{
  position: sticky;
  top: 0;
  display: flex;
  height: 45px;
  box-sizing: border-box;
  background-color: #ffffff;
  align-items: center;
  z-index: 1;
  padding: 0 30px;
}

.bar1 a{
  display: block;
  margin: auto 0 auto auto;
  height: 27.5px;
}

.bar1 img{
  height: 27.5px;
}

.bar2{
  position: sticky;
  top: 45px;
  display: flex;
  height: 30px;
  box-sizing: border-box;
  background-color: #e1e1e1;
  align-items: center;
  z-index: 1;
  font-family: "Shippori Mincho", serif;
}

.bar2 p{
  font-size: 12pt;
  line-height: 20pt;
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 0;
}

.bar2_button_l{
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
}

.bar2_button{
  padding-left: 10px;
  padding-right: 10px;
}

.bar2_button_r{
  padding-left: 10px;
  padding-right: 10px;
  margin-right: auto;
}

.bar2 a{
  text-decoration: none;
  color: #000000;
}

.offset{
  position: absolute;
  height: 75px;
  top: -75px;
  visibility: hidden;
}

.wide{
  margin: 0 -10px;
}

.story{
  padding: 30px 0;
  background-color: #000000;
  position: relative;
  font-size: 20pt;
}

.story p{
  font-size: 11pt;
  text-align: center;
  margin: 1em 0;
  color: #ffffff;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
}

.story img{
  width: 90%;
  margin: auto auto 0.7em;
  display: block;
}

.character{
  padding: 30px 20px;
  background-color: #a2cfcc;
  position: relative;
  font-size: 20pt;
}

h2{
  font-size: 20pt;
  text-align: center;
  margin: 0.7em 0;
  font-family: "Kaisei Harunoumi", serif;
  font-weight: 400;
}

p{
  font-size: 12pt;
  line-height: 20pt;
  text-align: justify;
  margin: 0.5em 0;
}

.face{
  width: 108px;
  height: 144px;
  float: left;
  margin-right: 15px;
}

.name{
  margin: 0;
  padding-top: 2.5px;
  font-size: 18pt;
  font-family: "Kaisei Opti", serif;
}

.kana{
  margin: 0;
  font-size: 12pt;
  font-family: "Kaisei Opti", serif;
}

.person{
  margin: 0;
  font-size: 12pt;
  line-height: 16pt;
  font-family: "Kaisei Opti", serif;
}

details{
  display: flex;
  flex-direction: column;

  &::details-content{
    transition: 
      height 0.5s,
      content-visibility 0.5s allow-discrete;
    height: 0;
    overflow: clip;
  }

  &[open]::details-content{
    height: 1472px;
  }
}

/*@supports(interpolate-size: allow-keywords){
  :root{
    interpolate-size: allow-keywords;
  }
  details[open]::details-content{
    height: auto;
  }
}*/

details summary{
  list-style: none;
  order: 2;
}

.p_m{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: solid #646464 1px;
  margin: 20px auto auto;
}

summary::-webkit-details-marker{
  display: none;
}

.others{
  order: 1;
  overflow: hidden;
}

.clear{
  clear: both;
  height: 40px;
}

.gallery{
  padding: 30px 20px;
  background-color: #ffffff;
  position: relative;
}

.sns{
  padding: 30px 20px;
  background-color: #333333;
  position: relative;

}

@media screen and (min-width: 1000px) {
  .bar1{
    height: 50px;
  }

  .bar2{
    top: 50px;
    height: 50px;
  }

  .bar2 p{
    font-size: 15pt;
    line-height: 25pt;
  }

  .bar2_button_l{
    margin-right: 15px;
  }

  .bar2_button{
    margin-left: 15px;
    margin-right: 15px;
  }

  .bar2_button_r{
    margin-left: 15px;
  }

  .offset{
    position: absolute;
    height: 100px;
    top: -100px;
    visibility: hidden;
  }
}

@media screen and (max-width: 386px) {
  .person{
    font-size: 11pt;
  }

  .bar2 p{
    font-size: 11pt;
  }
}

@media screen and (max-width: 368px) {
  .person{
    font-size: 10pt;
  }
}