:root {
  /* margin */
  --mx: 150px;
  --ml: 100px;
  --mm: 45px;
  --ms: 15px;
  --mi: 10px;
  /* width */
  --wl: 1200px;
  --wm: 767px;
  /* height */
  --lh: 450px;
  /* font-size */
  --fe: 48px;  /* enjoin    */
  --ft: 20px;  /* title     */
  --fc: 15px;  /* content   */
  --fh: 14px;  /* history   */
  /* letter-spacing */
  --lt: 0.8em; /* title     */
  --lc: 0.2em; /* content   */
  /* color */
  --cg: #b7ba6b;
  --ct: rgba(255, 255, 255, 0.7);
  --cb: rgba(0, 0, 0, 0.7);
  /* time */
  --d: 0s;
}
html {
  scroll-behavior: smooth;
  font-family: serif;
  box-sizing: border-box;
  overflow-x: hidden;
}
body {
  margin: 0;
  letter-spacing: var(--lc);
  overflow-x: hidden;
  background: white;
}
h1 {
  font-size: var(--fe);
  letter-spacing: var(--lc);
  margin: 0 var(--ms);
}
h1 span {
  font-size: var(--ft);
}
h2 {
  margin: var(--ms);
  font-size: var(--ft);
  letter-spacing: var(--lt);
}
p {
  font-size: var(--fc);
}
label {
  cursor: pointer;
}
section, footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: var(--ml) 0;
}
.c {
  display: flex;
  background-color: var(--ct);
}
.v {
  display: flex;
  width: 100%;
  max-width: var(--wl);
}
.c>div, .v>div {
  flex: 1;
}
.c>h2, .v>h2 {
  writing-mode: vertical-rl;
}
.s {
  display: flex;
  flex-direction: column;
  align-items: center;  
  gap: var(--mm);
  padding: 0 var(--mm);
}
.o {
  border: 1px solid lightgray;
}
.u {
  display: flex;
  border-top: 1px solid black;
  padding: var(--mi) var(--ms);
  margin: 0 var(--mi);
}
.e {
  padding-left: var(--lt);
}
.x {
  margin: var(--mm);
}
.w {
  background-color: white;
}
#top {
  position: relative;
  padding: var(--ml) 0 0;
  background-image: url(keidai.jpeg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#top h1 {
  color: white;
  writing-mode: vertical-rl;
}
#top label {
  display: none;
  position: absolute;
  top: 5px;
  left: 5px;
  color: white;
  font-size: 48px;
  font-weight: bold;
}
#top label::before {
  content: "≡";
}
.btn {
  position: absolute;
  top: 0;
  width: 100%;
  padding: var(--ms) 0;  
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.btn a {
  width: 135px;
  padding: var(--ms) 0;
  color: black;
  text-align: center;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn a:hover {
    background-color: lightgray;
  }
}
#menu:checked ~ label::before{
  content: "×";
}
#menu:checked + .btn{
  display: flex;
}
#history {
  position: relative;
  background: url("kamon.png") no-repeat center center;
  background-size: contain;
}
#history h2 {
  position: absolute;
  right: max(calc(50% - 600px), 40px);
  writing-mode: vertical-rl;
}
.a {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--mm);
}
.a img {
  width: 274px;
  height: 137px;
}
.b {
  display: flex;
  gap: var(--mx);
}
.b img {
  width: 120px;
  height: 240px;
}
.h {
  writing-mode: vertical-rl;
}
#history p {
  display: block;
  font-size: var(--fh);
  line-height: 2;
}
#column .f {
  width: 90%;
  max-width: 1100px;
  padding: var(--mm);
  display: flex;
  gap: var(--ms);
  border-radius: 15px;
  background-color: var(--cg);
}
#column img {
  max-width: var(--lh);
  aspect-ratio: 2/1;
}
.g {
  width: 100%;
  max-width: var(--wl);
  height: var(--lh);
  display: grid;
  grid-template-columns: 1fr 0fr 1fr 0fr 1fr 0fr;
  transition:grid-template-columns .5s ease;
}
#e1, #e2, #e3 {
  overflow : hidden;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.l {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  opacity: 0;
  color: white;
  background-color: var(--cb);
}
#e1:hover .l,
#e2:hover .l,
#e3:hover .l {
  opacity: 1;
}
#e1 {
  grid-column: 1/2;
  background-image: url("event1.jpeg");
}
#e2 {
  grid-column: 3/4;
  background-image: url("event2.jpeg");
}
#e3 {
  grid-column: 5/6;
  background-image: url("event3.jpeg");
}
#p1_d {
  grid-column: 2/3;
}
#p2_d {
  grid-column: 4/5;
}
#p3_d {
  grid-column: 6/7;
}
.p {
  overflow : hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  writing-mode: vertical-rl;
}
.p>div {
  padding: var(--mm);
}
#event h3 {
  font-size: var(--ft);
  letter-spacing: var(--lt);
}
.pX {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 22px;
}
input{
  display: none;
}
.g:has(#p1:checked) {
  grid-template-columns: 1fr 2fr 0fr 0fr 0fr 0fr;
}
.g:has(#p2:checked) {
  grid-template-columns: 0fr 0fr 1fr 2fr 0fr 0fr;
}
.g:has(#p3:checked) {
  grid-template-columns: 0fr 0fr 0fr 0fr 1fr 2fr;
}
.m {
  position: relative;
}
.m div,
.m iframe {
  width: 100%;
  height: var(--lh);
}
.m iframe {
  border: 0;
  position: absolute;
  top: 0;
  z-index: 5;
}
#access p {
  margin: var(--ms);
}
#access p span {
  font-weight: bold;
}
#qa {
  background: url("hasu.png") no-repeat bottom right;
  background-size: contain;
}
#qa .u {
  flex-direction: column;
}
#qa img{
  position: absolute;
  bottom: 0;
  right: 10%;
  z-index: -21;
  height: 750px;
  aspect-ratio: 1/1;
}
footer {
  background-image: url("jari.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: black;
}
footer>div {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
#contact p {
  margin: 0;
}
.k {
  width: var(--mx);
}
footer .s {
  margin-top: var(--ms);
  gap: var(--ms);
}
footer .s a, footer>p {
  color: white;
}
@supports (timeline-trigger-name: --t) {
  .f {
    opacity: 0;
    timeline-trigger: --t view() entry 0% exit 100%;
    animation: fadeup 0.8s ease-out forwards;
    animation-trigger: --t play-forwards play-backwards;
    animation-delay: var(--d);
  }
}
@keyframes fadeup {
  from {
    opacity: 0;
    translate: 0 30% 0;
  }
  to {
    opacity: 1;
    translate: 0;
  }
}
@media (max-width: 1200px) {
  :root {
    --ml: 50px;
    --fe: 32px;  /* enjoin     */
    --ft: 18px;  /* title      */
  }
  .btn {
    display: none;
    margin-top: 0;
    flex-direction: row-reverse;
    background-color: var(--cb);
  }
  .btn a {
    height: 140px;
    width: auto;
    color: white;
    writing-mode: vertical-rl;
    text-align: left;
    padding: 15px;
    margin-top: 75px;
  }
  #top label {
    display: block;
  }
  #history .h p {
    display: inline;
    animation: none;
    opacity: 1;
  }
  .a, .b {
    height: 280px;
  }
  #column .f {
    width: auto;
    max-width: 80%;
    flex-direction: column;
  }
  .m div,
  .m iframe {
    width: 90%;
  }
  @supports (timeline-trigger-name: --t) {
    .h .f {
      timeline-trigger: none;
      animation: none;
      animation-trigger: none;
    }
    .h {
      opacity: 0;
      timeline-trigger: --t view() entry 0% exit 100%;
      animation: fadeup 0.8s ease-out forwards;
      animation-trigger: --t play-forwards play-backwards;
    }
  }
}
@media (max-width: 767px) {
  :root {
    --fc: 14px;
    --fh: 12px;
    --mm: 25px;
  }
  .c {
    width:100%;
  }
  .h {
    writing-mode: horizontal-tb;
  }
  .s {
    width: 100%;
    align-items: flex-start;
    gap: 0;
    box-sizing: border-box;
  }
  .a, .b {
    position: relative;
    width: 100%;
    height: auto;
    /* background-color: pink; */
    /* flex-direction: row; */
    /* align-items: flex-end; */
    display: block;
    gap: 0;
  }
  .s img {
    position: absolute;
    bottom: -34px;
    right: 0;
  }
  .a img {
    width: 134px;
    height: 67px;
  }
  .b img {
    width: 67px;
    height: 134px;
  }
  #history .h p {
    display: block;
    line-height: 1.3;
  }
  .e {
    padding-left: 0;
    padding-bottom: 1em;
  }
  .g {
    height: 540px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 0fr 1fr 0fr 1fr 0fr;
    transition:grid-template-rows .5s ease;
  }
  .p {
    writing-mode: horizontal-tb;
  }
  .pp p {
    display: inline;
  }
  #e1 {
    grid-column: auto;
    grid-row: 1/2;
  }
  #e2 {
    grid-column: auto;
    grid-row: 3/4;
  }
  #e3 {
    grid-column: auto;
    grid-row: 5/6;
  }
  #p1_d {
    grid-column: auto;
    grid-row: 2/3;
  }
  #p2_d {
    grid-column: auto;
    grid-row: 4/5;
  }
  #p3_d {
    grid-column: auto;
    grid-row: 6/7;
  }
  .g:has(#p1:checked) {
    grid-template-columns: none;
    grid-template-rows: 1fr 2fr 0fr 0fr 0fr 0fr;
  }
  .g:has(#p2:checked) {
    grid-template-columns: none;
    grid-template-rows: 0fr 0fr 1fr 2fr 0fr 0fr;
  }
  .g:has(#p3:checked) {
    grid-template-columns: none;
    grid-template-rows: 0fr 0fr 0fr 0fr 1fr 2fr;
  }
  .u {
    flex-direction: column;
  }
  footer {
    background-image: none;
  }
}