.attempt {
  overflow: hidden;
}
.attempt-bg {
  background: url(../img/cmn/bg01.png) no-repeat center top, url(../img/cmn/bg.svg) no-repeat center bottom, hsl(194, 100%, 95%);
  background-size: 100%, contain;
  background-blend-mode: normal;
}
.attempt__content {
  width: min(1200px, 98%);
  margin-inline: auto;
}
.attempt__tab {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .5rem;
  margin-block-end: clamp(3.5rem, 0.23rem + 9.7vw, 7.5rem);
  height: min(370px,40vw);
}
@media screen and (max-width: 768px) {
  .attempt__tab {
    width: 100%;
    grid-template-columns: 1fr;
  }
}
.attempt__li {
  background-color: hsl(0, 0%, 100%);
}
.attempt__li > a {
  height: 100%;
  border: 2px solid hsl(26, 54%, 25%);
  border-radius: 16px;
  background: hsl(0, 0%, 100%);
  display: grid;
  grid-template-rows: 120px auto;
  overflow: hidden;
  font-weight: 800;
  line-height: 1.3;
}
@media screen and (max-width: 1400px) {
  .attempt__li > a {
    grid-template-rows: 35% auto;
  }
}

@media screen and (max-width: 768px) {
  .attempt__tab{
    height: auto;
  }
  .attempt__li > a {
    grid-auto-flow: column;
    grid-template-columns: 48px auto;
    grid-template-rows: auto;
  }
}
.attempt__li .ttl {
  writing-mode: vertical-rl;
  font-size: clamp(1.1rem, 0.59rem + 1.21vw, 1.5rem);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  padding-inline: 0.625rem;
}
@media screen and (max-width: 768px) {
  .hidden768{
    display: none;
  }
  .attempt__li .ttl {
    writing-mode: horizontal-tb;
  }
}
.attempt__li:hover .ttl {
  color: #be0000;
}
.attempt__flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1.5rem;
  margin-block-end: clamp(4rem, 3.55rem + 1.94vw, 5rem);
}
@media screen and (max-width: 768px) {
  .attempt__flex {
    flex-direction: column;
  }
}
.attempt .after {
  border: 2px solid hsl(26, 54%, 25%);
  box-shadow: 4px 4px 0px hsl(26, 54%, 25%);
  background-color: hsl(0, 0%, 100%);
  padding: 4px;
}
.attempt__img {
  position: relative;
  flex-basis: 56%;
  width: min(658px, 56%);
}
@media screen and (max-width: 768px) {
  .attempt__img {
    width: min(658px, 100%);
  }
}
/*.attempt__img img.brightness {
  filter: brightness(1.3);
}*/
.attempt__box {
  flex-basis: 40%;
}
.attempt__ttl {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  flex-wrap: nowrap;
  font-size: clamp(1.7rem, 0.5rem + 2.67vw, 2.5rem);
  margin-block-end: 1.25rem;
  font-weight: 700;
}
.attempt__ttl img {
  margin-inline-start: 1.25rem;
}
@media screen and (max-width: 768px) {
  .attempt__ttl img {
    height: 35px;
  }
}
.attempt__arw {
  width: min(370px, 30vw);
  margin-block-end: 1.25rem;
  position: relative;
  z-index: 2;
  transform: translate(-20%, 0);
}
@media screen and (max-width: 768px) {
  .attempt__arw {
    translate: 20% -50%;
    position: absolute;
    right: 0;
    top: 0;
    rotate: -10deg;
    width: 50%;
  }
}
.attempt__txt {
  width: min(450px, 98%);
  font-size: clamp(0.875rem, 0.7rem + 0.73vw, 1.25rem);
  line-height: 1.6;
}
.attempt__txt span {
  font-size: clamp(0.875rem, 0.53rem + 1.45vw, 1.625rem);
  border-bottom: 1px solid hsl(26, 54%, 25%);
}



[data-modal] {
  cursor: pointer;
}

/* モーダルの基本スタイル */
.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: 95vw;
}

/* 背景のオーバーレイ */
.overlay {
  display: none; /* 初期状態で非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* モーダルの表示時に使うクラス */
.modal.show,
.overlay.show {
  display: block;
}

.modal {
  background-color: hsl(0, 0%, 100%);
  padding-block: clamp(1.125rem, 0.5rem + 2.67vw, 2.5rem);
  padding-inline: clamp(1rem, 0.55rem + 1.94vw, 2rem);
}