@charset "UTF-8";

:root {
  --cat-color--1: #3A7BBE;
  --cat-color--2: #FDA11A;
  --cat-color--3: #FF3713;
  --cat-color--4: #50464B;
}


#siteHeader {
  position: fixed;
}
#breadcrumb {
  position: absolute;
  top: 4rem;
  right: 0;
  left: 0;
  z-index: 55;
}

#main {
  background: url(img/mv_sp.jpg) no-repeat left top / 100%;
}


#mv {
  height: 77vw;
  display: flex;
  align-items: center;
  color: var(--white);
}
#mv .copy {
  font-size: min(5vw, 2rem);
  font-weight: 700;
  line-height: 1.75;
}


@media (min-width: 768px) {
  #breadcrumb {
    top: 6rem;
  }
  #main {
    background-image: url(img/mv.jpg);
  }
  #mv {
    height: 43vw;
  }
  #mv .copy {
    font-size: min(3vw, 2rem);
  }
}


#about .ttl {
  font-weight: 700;
  letter-spacing: .1em;
}
#about .mask-img + .bg-object {
  margin: -22% 2% 0 -3%;
  position: relative;
}

#about .detail-box {
  border: 1px solid currentColor;
  padding: 1em 5%;
  border-radius: .75rem;
}
#about .detail-box dl {
  display: flex;
  flex-wrap: wrap;
}
#about .detail-box dl dt {
  flex: 0 0 8em;
  width: 8em;
}
#about .detail-box dl dd {
  flex: 0 0 calc(100% - 8em);
  width: calc(100% - 8em);
}
@media (max-width: 991px) {
  #about .detail-box dl {
    font-size: .769em;
  }
}
@media (min-width: 768px) {
  #about p {
    line-height: 2.5;
  }
  #about .detail-box {
    padding: 2rem 6%;
  }
  #about .detail-box dl dt {
    flex: 0 0 9em;
    width: 9em;
  }
  #about .detail-box dl dd {
    flex: 0 0 calc(100% - 9em);
    width: calc(100% - 9em);
  }
}


#report .pickup {
  position: relative;
}
#report .recently {
  margin-bottom: 2rem;
}
#report .recently .en_ttl {
  font-weight: 400;
}
#report .recently .ttl {
  font-weight: 900;
  line-height: 1.5;
}
#report .archive-menu li a {
  border: 0;
  color: var(--white);
  border-radius: .75rem;
}
#report .archive-menu ._cat-color--1 { background: var(--cat-color--1); }
#report .archive-menu ._cat-color--2 { background: var(--cat-color--2); }
#report .archive-menu ._cat-color--3 { background: var(--cat-color--3); }
#report .archive-menu ._cat-color--4 { background: var(--cat-color--4); }
#report .card time {
  text-align: left;
}
@media (min-width: 768px) {
  #report .recently {
    position: absolute;
    left: calc(41.666667% + var(--gap));
  }
}
@media (min-width: 992px) {
  #report .recently {
    left: calc(33.333333% + var(--gap));
  }
}
@media (min-width: 1200px) {
  #report .recently {
    left: calc(25% + var(--gap));
  }
}


#note .section__header {
  row-gap: 1rem;
}
#note .section__header .ttl {
  font-weight: 700;
}
#note .section__header img {
  width: 15rem;
}
#note .panels {
  row-gap: 1rem;
  list-style-type: none;
}
#note .panels li:nth-of-type(1) .panel { background: var(--cat-color--1); }
#note .panels li:nth-of-type(2) .panel { background: var(--cat-color--2); }
#note .panels li:nth-of-type(3) .panel { background: var(--cat-color--3); }
#note .panels li:nth-of-type(4) .panel { background: var(--cat-color--4); }

#note .panels .panel {
  max-width: 28rem;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.25em;
  padding: 1em;
  border-radius: .75rem;
  color: var(--white);
}
#note .panels .panel .icon {
  flex: 0 0 2em;
  width: 2em;
  padding: .25em;
}
#note .panels .panel .panel_head {
  width: 100%;
  line-height: 1.75;
}
#note .panels .panel .panel_head .ttl {
  letter-spacing: .1em;
}
#note .panels .panel .panel_head .en_ttl {
  font-size: .923rem;
  border-bottom: 1px solid currentColor;
  padding-bottom: .5rem;
  margin-bottom: .5rem;
}
#note .panels .panel .thumb {
  transition: transform .2s;
}
#note .panels .panel:hover .thumb {
  transform: scale(1.1);
}

@media (max-width: 767px) {
  #note .panels .panel:not(:has(.thumb)) .panel_head {
    display: flex;
    align-items: center;
    gap: 1.25em;
  }
  #note .panels .panel:not(:has(.thumb)) .panel_head .en_ttl {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  #note .panels .panel:not(:has(.thumb)) .panel_head .ttl br {
    display: none;
  }
  #note .panels .panel .thumb {
    flex: 0 0 8.5em;
    width: 8.5em;
  }
}
@media (min-width: 768px) {
  #note .panels .panel {
    flex-direction: column;
    align-items: flex-start;
    padding: 10%;
  }
}