@charset "UTF-8";
#tenth_anniversary {
  /*   html.jp &,
  html.en & {
    font-family: "Open Sans", "游ゴシック", "Yu Gothic", Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "Shingo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  } */
  position: relative;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  #tenth_anniversary {
    border-top: 1px solid #ccc;
  }
}
#tenth_anniversary::before, #tenth_anniversary::after {
  content: "";
  position: fixed;
  display: block;
  mix-blend-mode: multiply;
}
#tenth_anniversary::before {
  z-index: 100;
  background: url(../images/karaksa_top.svg) no-repeat top right/contain;
  aspect-ratio: 422/287;
  width: 211px;
  top: 100px;
  right: 0;
}
@media (min-width: 768px) {
  #tenth_anniversary::before {
    width: 422px;
    top: 150px;
  }
}
#tenth_anniversary::after {
  z-index: 100;
  background: url(../images/karaksa_bottom.svg) no-repeat top right/contain;
  aspect-ratio: 317/231;
  width: 160px;
  bottom: 0;
  left: 0;
}
@media (min-width: 768px) {
  #tenth_anniversary::after {
    width: 317px;
  }
}
@media (max-width: 767px) {
  #tenth_anniversary .inner {
    padding: 0 16px;
  }
}

h2:has(.logo) {
  background: url(../images/hw_line.svg) no-repeat center bottom/183px;
  color: #00873C;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  padding: 0 0 33px;
  margin: 0 0 20px;
  line-height: 1.2;
}
@media (min-width: 768px) {
  h2:has(.logo) {
    font-size: 32px;
    margin: 0 0 30px;
  }
}
h2:has(.logo) .logo {
  width: 88px;
  margin: 0 auto 0.5em;
}
@media (min-width: 768px) {
  h2:has(.logo) .logo {
    width: 95px;
  }
}

.btns {
  margin-top: 30px;
}
@media (min-width: 768px) {
  .btns {
    margin-top: 50px;
  }
}
.btns .btn {
  border-radius: 100px;
  background: url(../images/arrow.svg) no-repeat 40px center/9px #00873C;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  height: 67px;
  max-width: 390px;
  width: 100%;
  margin: 0 auto;
  text-decoration: none !important;
}
@media (min-width: 768px) {
  .btns .btn {
    font-size: 18px;
  }
}

#tenth_kv {
  height: 130vw;
  background: url(../images/city_sp.svg) no-repeat center bottom/100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 15vw;
}
@media (min-width: 768px) {
  #tenth_kv {
    height: calc(100dvh - 330px);
    padding: 0;
    background-image: url(../images/city_pc.svg);
  }
}
@media (max-width: 767px) {
  html.en #tenth_kv {
    height: 150vw;
  }
}
#tenth_kv .title {
  display: inline-grid;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 30px;
}
@media (min-width: 768px) {
  #tenth_kv .title {
    text-align: left;
    grid-template-columns: 183px 1fr;
    gap: 60px;
  }
}
#tenth_kv .title .logo img {
  width: 178px;
}
@media (min-width: 768px) {
  #tenth_kv .title .logo img {
    width: 100%;
  }
}
#tenth_kv .title h1 {
  font-weight: 700;
  font-size: 21px;
}
html.jp #tenth_kv .title h1, html.sc #tenth_kv .title h1, html.tc #tenth_kv .title h1 {
  padding: 0 0 0 0.5em;
}
@media (min-width: 768px) {
  #tenth_kv .title h1 {
    font-size: 28px;
  }
}

#tenth_message {
  background: #F8F6ED;
  margin-top: -3px;
  position: relative;
}
@media (min-width: 768px) {
  #tenth_message {
    background: url(../images/bg1.svg) no-repeat center bottom 30px/1691px #F8F6ED;
  }
}
#tenth_message::before, #tenth_message::after {
  content: "";
  position: absolute;
  display: block;
  border-radius: 20px 0 0 20px;
  width: 90px;
  height: 95px;
  z-index: 1;
  right: 0;
}
@media (min-width: 768px) {
  #tenth_message::before, #tenth_message::after {
    display: none;
  }
}
#tenth_message::before {
  background: #CCDBEB;
  top: 40px;
}
#tenth_message::after {
  background: #E3F0E4;
  bottom: 20px;
}
#tenth_message .frame {
  position: relative;
  z-index: 2;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.0509803922);
  background: #fff;
  padding: 80px 20px;
  max-width: 787px;
  margin: 80px auto;
  border-radius: 20px;
}
@media (min-width: 768px) {
  #tenth_message .frame {
    margin: 130px auto;
    box-shadow: 0px 0px 20px 20px rgba(0, 0, 0, 0.0509803922);
    padding: 90px;
  }
}
#tenth_message .frame .logo {
  width: 132px;
  margin: 0 auto 60px;
}
@media (min-width: 768px) {
  #tenth_message .frame .logo {
    width: 153px;
  }
}
#tenth_message .frame p {
  margin: 0;
  font-size: 16px;
  line-height: 2;
}
@media (min-width: 768px) {
  #tenth_message .frame p {
    font-size: 18px;
  }
}

#tenth_plan {
  padding: 80px 0;
}
@media (min-width: 768px) {
  #tenth_plan {
    padding: 130px 0;
  }
}
#tenth_plan .grid {
  position: relative;
}
#tenth_plan .grid figure img {
  border-radius: 20px;
}
@media (min-width: 768px) {
  #tenth_plan .grid figure img {
    width: 793px;
  }
}
#tenth_plan .frame {
  margin: -40px 0 0 20px;
  border-radius: 60px 0 0 0;
  padding: 60px 10px 0 0;
  background: #fff;
  position: relative;
}
@media (min-width: 768px) {
  #tenth_plan .frame {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 580px;
    margin: 0;
    padding: 60px 0 30px 90px;
    border-radius: 100px 0 0 0;
  }
}
#tenth_plan .frame h3 {
  color: #00873C;
  text-align: left;
  font-size: 24px;
  margin: 0 0 20px;
  line-height: 1.4;
}
@media (min-width: 768px) {
  #tenth_plan .frame h3 {
    font-size: 26px;
  }
}
#tenth_plan .frame h3::after {
  display: none;
}
#tenth_plan .frame p {
  font-size: 16px;
  line-height: 2;
}
@media (min-width: 768px) {
  #tenth_plan .frame p {
    font-size: 18px;
  }
}

#tenth_event {
  position: relative;
  padding: 0 0 40px;
}
@media (min-width: 768px) {
  #tenth_event {
    padding: 0 0 60px;
  }
}
#tenth_event::before {
  content: "";
  position: absolute;
  inset: 160px 0 0 0;
  background: #F8F6ED;
  z-index: -1;
}
@media (min-width: 768px) {
  #tenth_event::before {
    top: 173px;
  }
}
#tenth_event h3 {
  color: #00873C;
  text-align: left;
  font-size: 24px;
  margin: 0 0 20px;
  padding: 0 0 35px;
  background: url(../images/hw_line2.svg) no-repeat center bottom/283px;
  display: flex;
  justify-content: center;
  line-height: 1.3;
}
@media (min-width: 768px) {
  #tenth_event h3 {
    background-position: left bottom;
    justify-content: start;
  }
}
#tenth_event h3 em {
  font-style: normal;
  font-size: 40px;
}
#tenth_event h3::after {
  display: none;
}
#tenth_event .grid {
  display: grid;
  gap: 20px;
  max-width: 993px;
  margin: 0 auto;
  padding: 10px 0 0;
}
@media (min-width: 768px) {
  #tenth_event .grid {
    grid-template-columns: 486px 1fr;
    gap: 30px;
    padding-top: 20px;
  }
}
#tenth_event .grid figure img {
  border-radius: 20px;
}
#tenth_event .grid p {
  font-size: 16px;
  line-height: 2;
  padding: 0 10px;
}
@media (min-width: 768px) {
  #tenth_event .grid p {
    font-size: 18px;
    padding: 0;
  }
}

#tenth_statement {
  text-align: center;
  padding: 40px 0 80px;
}
@media (min-width: 768px) {
  #tenth_statement {
    padding: 80px 0;
    background: url(../images/statement_pc.jpg) no-repeat calc(50% + 30px) center/1841px;
  }
}
#tenth_statement h3 {
  color: #00873C;
  margin-top: 0;
  font-size: 24px;
}
@media (min-width: 768px) {
  #tenth_statement h3 {
    font-size: 28px;
  }
}
#tenth_statement p {
  font-size: 16px;
  font-weight: 700;
  margin: 2em 0;
  line-height: 2;
}
@media (min-width: 768px) {
  #tenth_statement p {
    font-size: 20px;
    line-height: 2.5;
  }
}

#tenth_gallery {
  overflow: hidden;
}
#tenth_gallery .loop-move-x {
  display: grid;
  grid-template-columns: repeat(2, 1841px);
  gap: 10px;
  padding-right: 10px;
  will-change: transform;
  animation: moveXLoop_sp 100s linear infinite;
}
@media (min-width: 768px) {
  #tenth_gallery .loop-move-x {
    grid-template-columns: repeat(2, 2818px);
    gap: 20px;
    animation: moveXLoop 100s linear infinite;
  }
}

@keyframes moveXLoop {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-2838px, 0, 0);
  }
}
@keyframes moveXLoop_sp {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-1851px, 0, 0);
  }
}
#tenth_history {
  margin: 80px 0 0;
  position: relative;
  padding: 0 0 50px;
}
@media (min-width: 768px) {
  #tenth_history {
    margin: 130px 0 0;
    padding: 0 0 80px;
  }
}
#tenth_history::before {
  content: "";
  position: absolute;
  inset: 160px 0 0 0;
  background: #E5ECE3;
  z-index: -1;
}
@media (min-width: 768px) {
  #tenth_history::before {
    top: 173px;
  }
}
#tenth_history .date {
  text-align: right;
  margin: 0 0 10px;
  font-size: 14px;
}
#tenth_history dl.data {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  color: #00873C;
  font-weight: 700;
}
@media (min-width: 768px) {
  #tenth_history dl.data {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 20px;
  }
}
#tenth_history dl.data > div {
  background: #fff;
  border-radius: 20px;
  border: 2px solid #00873C;
  padding: 10px 0;
}
@media (min-width: 768px) {
  #tenth_history dl.data > div {
    border-width: 3px;
  }
}
#tenth_history dl.data > div:nth-of-type(1) {
  text-align: center;
  grid-row: span 2;
}
@media (min-width: 768px) {
  html.id #tenth_history dl.data > div:nth-of-type(1) dt, html.en #tenth_history dl.data > div:nth-of-type(1) dt {
    margin-bottom: 27px;
  }
}
#tenth_history dl.data > div:nth-of-type(1) dd {
  grid-template-columns: 77px 1fr;
  text-align: center;
  display: inline-grid;
  gap: 0;
  height: 33vw;
  padding: 0 10px 0 0;
}
@media (min-width: 768px) {
  #tenth_history dl.data > div:nth-of-type(1) dd {
    height: 220px;
    font-size: 28px;
    grid-template-columns: 115px 1fr;
  }
}
#tenth_history dl.data > div:nth-of-type(1) dd span:first-child {
  font-size: 64px;
}
@media (min-width: 768px) {
  #tenth_history dl.data > div:nth-of-type(1) dd span:first-child {
    font-size: 105px;
  }
}
#tenth_history dl.data > div:nth-of-type(2) {
  grid-row: span 2;
}
@media (min-width: 768px) {
  html.id #tenth_history dl.data > div:nth-of-type(2) dt, html.en #tenth_history dl.data > div:nth-of-type(2) dt {
    margin-bottom: 22px;
  }
}
#tenth_history dl.data > div:nth-of-type(2) dd {
  display: block;
  position: relative;
}
@media (max-width: 767px) {
  #tenth_history dl.data > div:nth-of-type(2) dd {
    padding: 20px 20px 0;
  }
}
#tenth_history dl.data > div:nth-of-type(2) dd p {
  position: absolute;
  top: 5px;
  left: 0;
  text-align: center;
  width: 60%;
}
@media (min-width: 768px) {
  #tenth_history dl.data > div:nth-of-type(2) dd p {
    top: 0;
  }
}
#tenth_history dl.data > div:nth-of-type(2) dd p span:first-child {
  font-size: 62px;
}
@media (min-width: 768px) {
  #tenth_history dl.data > div:nth-of-type(2) dd p span:first-child {
    font-size: 110px;
  }
}
@media (min-width: 768px) {
  #tenth_history dl.data > div:nth-of-type(2) dd figure {
    margin: 0 -15px 0;
    padding-top: 20px;
  }
}
#tenth_history dl.data dt {
  text-align: center;
  font-size: 15px;
  line-height: 1.2;
}
@media (min-width: 768px) {
  #tenth_history dl.data dt {
    font-size: 24px;
    margin-bottom: 8px;
  }
}
#tenth_history dl.data dd {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 10px;
  text-align: right;
  padding: 10px 20px 10px;
}
@media (min-width: 768px) {
  #tenth_history dl.data dd {
    grid-template-columns: 70px 1fr;
    padding: 0 30px 5px;
  }
}
#tenth_history dl.data dd p {
  margin: 0;
  display: grid;
  font-weight: bold;
  line-height: 1;
}
#tenth_history dl.data dd span {
  font-size: 16px;
}
@media (min-width: 768px) {
  #tenth_history dl.data dd span {
    font-size: 24px;
  }
}
#tenth_history dl.data dd span:first-child {
  font-size: 38px;
}
@media (min-width: 768px) {
  #tenth_history dl.data dd span:first-child {
    font-size: 54px;
  }
}
#tenth_history dl.year {
  display: grid;
  gap: 30px;
  margin-top: 50px;
}
@media (min-width: 768px) {
  #tenth_history dl.year {
    grid-template-columns: repeat(6, 1fr);
    gap: 40px 20px;
  }
}
#tenth_history dl.year > div {
  border-radius: 20px;
  background: #fff;
  padding: 40px 16px 16px;
  position: relative;
}
@media (min-width: 768px) {
  #tenth_history dl.year > div {
    grid-column: span 2;
    padding: 40px 30px 20px;
  }
  #tenth_history dl.year > div:nth-of-type(4), #tenth_history dl.year > div:nth-of-type(5) {
    grid-column: span 3;
  }
}
#tenth_history dl.year dt {
  font-style: italic;
  font-weight: 300;
  position: absolute;
  top: 0;
  left: 16px;
  transform: translateY(-50%);
  font-size: 42px;
  color: #00873C;
}
@media (min-width: 768px) {
  #tenth_history dl.year dt {
    left: 30px;
  }
}
#tenth_history dl.year dd {
  margin: 0;
  padding: 0;
}
#tenth_history dl.year dd h3 {
  font-size: 20px;
  margin: 0 0 10px;
  color: #00873C;
  text-align: left;
  line-height: 1.5;
}
#tenth_history dl.year dd h3::after {
  display: none;
}
#tenth_history dl.year dd p {
  margin: 0;
  font-size: 15px;
}/*# sourceMappingURL=style.css.map */