@charset "utf-8";
/* *************************************
hamburger
************************************* */
.hamburger {
  width: fit-content;
  text-align: center;
}

@media (any-hover: hover) {
  .hamburger:hover {
    cursor: pointer;
  }
}

.hamburger__btn {
  padding: calc(8 * var(--rem));
}

.hamburger__btn span {
  display: block;
  width: calc(32 * var(--rem));
  height: calc(2 * var(--rem));
  background-color: var(--navy);
  transition: 0.3s ease;
}

.hamburger__btn span:nth-child(2) {
  margin: calc(8 * var(--rem)) 0;
}

/* is-open */
.hamburger.is-open .hamburger__btn span:nth-child(1) {
  transform: translateY(calc(10 * var(--rem))) rotate(45deg);
}
.hamburger.is-open .hamburger__btn span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-open .hamburger__btn span:nth-child(3) {
  transform: translateY(calc(-10 * var(--rem))) rotate(-45deg);
}

.hamburger__menu,
.hamburger__close {
  text-transform: uppercase;
  font-size: calc(12 * var(--rem));
  font-weight: bold;
  font-family: var(--font-maru);
  line-height: 1;
}

.hamburger.is-open .hamburger__menu {
  display: none;
}

.hamburger__close {
  display: none;
}

.hamburger.is-open .hamburger__close {
  display: block;
}

/* *************************************
page-hed
************************************* */
.page-head {
  position: relative;
  height: calc(250 * var(--rem));
  margin-block-start: calc(80 * var(--rem));
}

.page-head::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #00000030;
  position: absolute;
  inset: 0;
}

.page-head__img {
  height: inherit;
}

.page-head__img img {
  aspect-ratio: 1440/250;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-head__title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: grid;
  row-gap: calc(8 * var(--rem));
  width: 100%;
  padding: calc(16 * var(--rem));
}

.page-head__title-jp {
  font-size: calc(40 * var(--rem));
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--white);
  @media (width < 768px) {
    font-size: calc(30 * var(--rem));
  }
}

.page-head__title-en {
  font-size: calc(20 * var(--rem));
  font-weight: bold;
  line-height: 1;
  text-align: center;
  text-wrap: balance;
  color: var(--white);
  text-transform: uppercase;
  @media (width < 768px) {
    font-size: calc(16 * var(--rem));
  }
}

/* *************************************
btn1
************************************* */
.btn1 {
  display: inline-block;
  padding: calc(20 * var(--rem)) calc(32 * var(--rem));
  font-size: calc(24 * var(--rem));
  color: var(--white);
  text-align: center;
  background: var(--green);
  border-radius: 100vmax;
  @media (width < 768px) {
    padding: calc(16 * var(--rem)) calc(16 * var(--rem));
    font-size: calc(20 * var(--rem));
  }
}

.btn1[data-color='red'] {
  background: var(--red);
}

.btn1[data-color='navy'] {
  background: var(--navy);
}

.btn1[data-color='red'] {
  background: var(--red);
}

.btn1[data-size='large'] {
  min-width: calc(600 * var(--rem));
  @media (width < 768px) {
    min-width: revert;
    padding-block: calc(20 * var(--rem));
  }
}

.btn1[data-size='medium'] {
  min-width: calc(500 * var(--rem));
  @media (width < 768px) {
    min-width: calc(281 * var(--rem));
  }
}

.btn1[data-font='sp'] {
  @media (width < 768px) {
    font-size: calc(16 * var(--rem));
  }
}

/* *************************************
pagination
************************************* */
.pagination {
}

.page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--rem));
  justify-content: center;
}

.page-numbers a,
.page-numbers.dots {
  display: block;
  border: 2px solid var(--navy);
  font-weight: bold;
  padding: calc(8 * var(--rem)) calc(10 * var(--rem));
  transition:
    color 0.3s ease,
    background-color 0.3s ease;
  @media (width < 768px) {
    font-size: calc(14 * var(--rem));
    padding: calc(8 * var(--rem));
  }
}

@media (any-hover: hover) {
  .page-numbers a:hover {
    background: var(--navy);
    color: var(--white);
    opacity: 1;
  }
}

.page-numbers.current {
  display: block;
  border: 2px solid var(--navy);
  font-weight: bold;
  color: var(--white);
  padding: calc(8 * var(--rem)) calc(10 * var(--rem));
  transition:
    color 0.3s ease,
    background-color 0.3s ease;
  background: var(--navy);
  @media (width < 768px) {
    font-size: calc(14 * var(--rem));
    padding: calc(8 * var(--rem));
  }
}

/* *************************************
title1
************************************* */
.title1 {
  display: inline-grid;
  justify-items: center;
  font-size: calc(40 * var(--rem));
  font-family: var(--font-maru);
  font-weight: 400;
  text-align: center;
  @media (width < 768px) {
    font-size: calc(35 * var(--rem));
  }
}

.title1::after {
  content: '';
  display: inline-block;
  width: calc(120 * var(--rem));
  height: calc(22 * var(--rem));
  background: url(../../library/images/svg/title-decoration-r.svg) no-repeat center / contain;
  @media (width < 768px) {
    width: calc(100 * var(--rem));
  }
}

.title1[date-color='yellow']::after {
  background: url(../../library/images/svg/title-decoration-y.svg) no-repeat center / contain;
}
.title1[date-color='navy']::after {
  background: url(../../library/images/svg/title-decoration-n.svg) no-repeat center / contain;
}
.title1[date-color='green']::after {
  background: url(../../library/images/svg/title-decoration-g.svg) no-repeat center / contain;
}

/* *************************************
title2
************************************* */
.title2 {
  display: inline-grid;
  justify-items: center;
  font-size: calc(40 * var(--rem));
  font-family: var(--font-maru);
  font-weight: 400;
  text-align: center;
  @media (width < 768px) {
    font-size: calc(32 * var(--rem));
  }
}

.title2::before {
  content: '';
  display: inline-block;
  width: calc(56 * var(--rem));
  height: calc(46 * var(--rem));
  background: url(../../library/images/svg/crown-y.svg) no-repeat center / contain;
  @media (width < 768px) {
    width: calc(50 * var(--rem));
    height: calc(40 * var(--rem));
  }
}

/* *************************************
title3
************************************* */
.title3 {
  display: inline-block;
  font-size: calc(20 * var(--rem));
  min-width: calc(250 * var(--rem));
  background: var(--red);
  color: var(--white);
  font-weight: 500;
  text-align: center;
  padding: calc(10 * var(--rem)) calc(10 * var(--rem));
  border: calc(2 * var(--rem)) solid var(--white);
  position: relative;
  @media (width < 768px) {
    font-size: calc(18 * var(--rem));
  }
}

.title3::before,
.title3::after {
  content: '';
  display: block;
  width: calc(60 * var(--rem));
  aspect-ratio: 1;
  background: var(--red);
  position: absolute;
  top: calc(10 * var(--rem));
  z-index: -1;
}

.title3::before {
  left: calc(-30 * var(--rem));
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 30% 50%, 0 0);
}

.title3::after {
  right: calc(-30 * var(--rem));
  clip-path: polygon(100% 0, 70% 50%, 100% 100%, 0 100%, 0 0);
}

.title3[data-color='green'],
.title3[data-color='green']::before,
.title3[data-color='green']::after {
  background: var(--green);
}

.title3[data-color='yellow'],
.title3[data-color='yellow']::before,
.title3[data-color='yellow']::after {
  background: var(--yellow);
  color: var(--text);
}

/* *************************************
title4
************************************* */
.title4 {
  background: var(--red-soft);
  position: relative;
  padding-block: calc(32 * var(--rem)) calc(24 * var(--rem));
  padding-inline: calc(40 * var(--rem));
  @media (width < 768px) {
    padding-inline: calc(16 * var(--rem));
  }
}

.title4__main {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -60%);
}

.title4__main span {
  display: inline-block;
  padding: calc(10 * var(--rem)) calc(24 * var(--rem));
  font-size: calc(20 * var(--rem));
  line-height: 1;
  font-weight: 500;
  color: var(--white);
  background: var(--red);
  position: relative;
}

.title4__main span::after {
  content: '';
  display: block;
  position: absolute;
  width: calc(90 * var(--rem));
  height: calc(40 * var(--rem));
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  background: var(--red);
  clip-path: polygon(100% 0, 100% 40%, 50% 5%, 0 40%, 0 0);
}

.title__lead {
  font-size: calc(24 * var(--rem));
  text-align: center;
  @media (width < 768px) {
    font-size: calc(18 * var(--rem));
  }
}

.title4[data-color='yellow'] {
  background: var(--yellow-soft);
}

.title4[data-color='yellow'] .title4__main span,
.title4[data-color='yellow'] .title4__main span::after {
  background: var(--yellow);
}

.title4[data-color='green'] {
  background: var(--green-soft);
}

.title4[data-color='green'] .title4__main span,
.title4[data-color='green'] .title4__main span::after {
  background: var(--green);
}

/* *************************************
card-list1
************************************* */
.card-list1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(80 * var(--rem));
  @media (width < 768px) {
    grid-template-columns: 1fr;
  }
}

.card-list1__item {
  display: flex;
  flex-direction: column;
  background: var(--green-soft);
  padding-block: calc(40 * var(--rem)) calc(40 * var(--rem));
  padding-inline: calc(32 * var(--rem));
  position: relative;
  @media (width < 768px) {
    padding-inline: calc(16 * var(--rem));
  }
}

.card-list1__title {
  position: absolute;
  top: calc(-10 * var(--rem));
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.card-list1__img {
  width: calc(180 * var(--rem));
  margin-inline: auto;
  border: calc(2 * var(--rem)) solid var(--navy);
  border-radius: 100vmax;
  overflow: clip;
}

.card-list1__img img {
  aspect-ratio: 240/241;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-list1__name {
  font-size: calc(20 * var(--rem));
  font-weight: 500;
  text-align: center;
  margin-block-start: calc(8 * var(--rem));
}
.card-list1__text {
  font-family: var(--font-noto);
  margin-block-start: calc(16 * var(--rem));
}

/* *************************************
card-list2
************************************* */
.card-list2 {
  display: grid;
  gap: calc(80 * var(--rem));
  overflow: clip;
  width: min(100%, 1920px);
  margin-inline: auto;
}

.card-list2__item {
  background: var(--yellow-soft);
  padding-block: calc(80 * var(--rem));
  padding-inline: calc(64 * var(--rem));
  /* border-radius: calc(40 * var(--rem));
  corner-shape: scoop; */
  position: relative;
  @media (width < 768px) {
    padding-inline: calc(20 * var(--rem));
    padding-block: calc(40 * var(--rem)) calc(20 * var(--rem));
    border-radius: calc(30 * var(--rem));
  }
}

.card-list2__tl,
.card-list2__tr,
.card-list2__bl,
.card-list2__br {
  display: block;
  width: calc(80 * var(--rem));
  aspect-ratio: 1;
  border-radius: 100vmax;
  background: var(--white);
  position: absolute;
  @media (width < 768px) {
    width: calc(60 * var(--rem));
  }
}

.card-list2__tl {
  top: 0;
  left: 0;
  translate: -50% -50%;
}

.card-list2__tr {
  top: 0;
  right: 0;
  translate: 50% -50%;
}

.card-list2__bl {
  bottom: 0;
  left: 0;
  translate: -50% 50%;
}

.card-list2__br {
  bottom: 0;
  right: 0;
  translate: 50% 50%;
}

.card-list2__title {
  display: grid;
  width: fit-content;
  margin-inline: auto;
  justify-items: center;
  font-size: calc(36 * var(--rem));
  font-weight: bold;
  text-align: center;
  gap: calc(24 * var(--rem));
  @media (width < 768px) {
    font-size: calc(22 * var(--rem));
  }
}

.card-list2__title::before {
  content: '';
  display: inline-block;
  width: calc(56 * var(--rem));
  height: calc(46 * var(--rem));
  background: url(../../library/images/svg/crown-y.svg) no-repeat center / contain;
  @media (width < 768px) {
    width: calc(46 * var(--rem));
    height: calc(36 * var(--rem));
  }
}

.card-list2__title span {
  display: inline-grid;
  grid-template-columns: auto 1fr auto;
  gap: calc(24 * var(--rem));
  @media (width < 768px) {
    gap: calc(16 * var(--rem));
  }
}

.card-list2__title span::before,
.card-list2__title span::after {
  content: '';
  display: block;
  width: calc(28 * var(--rem));
  height: calc(73 * var(--rem));
}

.card-list2__title span::before {
  background: url(../../library/images/svg/laurel-crown-l-y.svg) no-repeat center / contain;
}

.card-list2__title span::after {
  background: url(../../library/images/svg/laurel-crown-r-y.svg) no-repeat center / contain;
}

.card-list2__pen-name-block {
  background: var(--yellow);
  display: flex;
  align-items: center;
  width: fit-content;
  margin-inline: auto;
  padding: calc(10 * var(--rem)) calc(24 * var(--rem));
  border-radius: calc(8 * var(--rem));
  margin-block-start: calc(24 * var(--rem));
  gap: calc(8 * var(--rem));
  @media (width < 768px) {
    flex-direction: column;
    width: 100%;
  }
}

.card-list2__pen-name-item {
  font-family: var(--font-noto);
}

.card-list2__pen-name {
  font-size: calc(24 * var(--rem));
  font-weight: 500;
  margin-inline-start: calc(40 * var(--rem));
  @media (width < 768px) {
    margin-inline-start: 0;
    font-size: calc(20 * var(--rem));
  }
}

.card-list2__pen-name-address {
  font-size: calc(20 * var(--rem));
  font-weight: 500;
  margin-block-start: calc(4 * var(--rem));
  @media (width < 768px) {
    font-size: calc(16 * var(--rem));
  }
}

.card-list2__subtitle {
  font-size: calc(36 * var(--rem));
  text-align: center;
  margin-block-start: calc(16 * var(--rem));
  @media (width < 768px) {
    font-size: calc(24 * var(--rem));
  }
}

.card-list2__wrap {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  @media (width < 768px) {
    display: block;
    width: fit-content;
    margin-inline: auto;
  }
}

.card-list2__bun,
.card-list2__e {
  font-size: calc(20 * var(--rem));
  font-weight: 500;
  @media (width < 768px) {
    font-size: calc(16 * var(--rem));
  }
}

.card-list2__text {
  margin-block-start: calc(40 * var(--rem));
  font-size: calc(20 * var(--rem));
  font-weight: 500;
  margin-block-end: 2em;
  @media (width < 768px) {
    font-size: calc(16 * var(--rem));
    margin-block-end: 1em;
  }
}

/* 赤 */
.card-list2__item:nth-child(2n) {
  background: var(--red-soft);
}

.card-list2__item:nth-child(2n) .card-list2__title::before {
  background: url(../../library/images/svg/crown-r.svg) no-repeat center / contain;
}

.card-list2__item:nth-child(2n) .card-list2__title span::before {
  background: url(../../library/images/svg/laurel-crown-l-r.svg) no-repeat center / contain;
}

.card-list2__item:nth-child(2n) .card-list2__title span::after {
  background: url(../../library/images/svg/laurel-crown-r-r.svg) no-repeat center / contain;
}

.card-list2__item:nth-child(2n) .card-list2__pen-name-block {
  background: var(--red);
}
.card-list2__item:nth-child(2n) .card-list2__pen-name-block > * {
  color: var(--white);
}

/* 緑 */
.card-list2__item:nth-child(3n) {
  background: var(--green-soft);
}

.card-list2__item:nth-child(3n) .card-list2__title::before {
  background: url(../../library/images/svg/crown-g.svg) no-repeat center / contain;
}

.card-list2__item:nth-child(3n) .card-list2__title span::before {
  background: url(../../library/images/svg/laurel-crown-l-g.svg) no-repeat center / contain;
}

.card-list2__item:nth-child(3n) .card-list2__title span::after {
  background: url(../../library/images/svg/laurel-crown-r-g.svg) no-repeat center / contain;
}

.card-list2__item:nth-child(3n) .card-list2__pen-name-block {
  background: var(--green);
}
.card-list2__item:nth-child(3n) .card-list2__pen-name-block > * {
  color: var(--white);
}

/* *************************************
ribbon
************************************* */
.ribbon {
}

.ribbon::before {
  content: '';
  display: block;
  width: calc(900 * var(--rem));
  aspect-ratio: 900/82;
  background: url(../../library/images/webp/ribbon1.webp) no-repeat center / contain;
  margin-inline: auto;
  @media (width < 768px) {
    width: 90%;
  }
}

/* *************************************
post-list
************************************* */
.post-list {
}

.post-list[data-page='archive'] {
  display: grid;
  gap: calc(16 * var(--rem));
}

.post-list__item {
}

.post-list__link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(100 * var(--rem));
  padding-block: calc(10 * var(--rem));
  @media (width < 768px) {
    grid-template-columns: 1fr;
    gap: calc(8 * var(--rem));
  }
}

.post-list__time {
  font-family: var(--font-noto);
  margin-block-start: calc(3 * var(--rem));
}

.post-list__title {
  font-family: var(--font-noto);
  font-weight: 500;
}

/* *************************************
title5
************************************* */
.title5 {
  position: relative;
}

.title5::before {
  content: '';
  display: block;
  width: 100%;
  height: calc(4 * var(--rem));
  border-bottom: calc(2 * var(--rem)) dotted var(--navy);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.title5__main {
  font-size: calc(28 * var(--rem));
  font-weight: 500;
  color: var(--white);
  text-align: center;
  background: var(--white) url(../../library/images/svg/title-bg1.svg) no-repeat center / contain;
  position: relative;
  z-index: 1;
  width: calc(312 * var(--rem));
  margin-inline: auto;
  @media (width < 768px) {
    font-size: calc(22 * var(--rem));
    width: calc(245 * var(--rem));
  }
}

/* *************************************
ribbon-list
************************************* */
.ribbon-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(40 * var(--rem)) calc(80 * var(--rem));
  width: fit-content;
  margin-inline: auto;
  @media (width < 768px) {
    grid-template-columns: 1fr;
  }
}

.ribbon-list__item {
  width: calc(250 * var(--rem));
}

/* *************************************
banner
************************************* */
.banner {
  display: block;
}

.banner__img img {
  aspect-ratio: 700 /179;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* *************************************
ribbon-title
************************************* */
.ribbon-title {
  font-size: calc(28 * var(--rem));
  font-weight: 500;
  color: var(--white);
  text-align: center;
  background: url(../../library/images/svg/ribbon.svg) no-repeat center / contain;
  position: relative;
  z-index: 1;
  width: calc(312 * var(--rem));
  margin-inline: auto;
  @media (width < 768px) {
    font-size: calc(22 * var(--rem));
  }
}

/* *************************************
award-pagination
************************************* */
.award-pagination {
  position: relative;
  min-height: calc(57 * var(--rem));
  @media (width < 768px) {
    min-height: calc(40 * var(--rem));
  }
}

.award-pagination::after {
  content: '';
  display: block;
  min-height: inherit;
  aspect-ratio: 1;
  background: url(../../library/images/svg/search-arrow.svg) no-repeat center / contain;
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
}

.award-pagination select {
  min-height: inherit;
  background: var(--white);
  border-radius: 0;
  border: calc(2 * var(--rem)) solid var(--navy);
  color: var(--navy) !important;
  font-size: calc(24 * var(--rem));
  font-family: var(--font-noto);
  padding-block: calc(5 * var(--rem));
  @media (width < 768px) {
    font-size: calc(16 * var(--rem));
  }
}

.award-pagination option {
  color: var(--navy);
  font-size: calc(24 * var(--rem));
  font-family: var(--font-noto);
  @media (width < 768px) {
    font-size: calc(16 * var(--rem));
  }
}