.mv {
  aspect-ratio: 1920/1080;
}
.mv .inner {
  width: 100%;
  max-width: 100%;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 100%;
}
.mv .left {
  background: url("../images/mvl.webp") center top/cover;
  position: relative;
}
.mv .left h1 {
  position: absolute;
  font-size: clamp(24px, calc(0.1307189542vw + 23.4901960784px), 26px);
  bottom: clamp(30px, calc(1.9607843137vw + 22.3529411765px), 60px);
  left: clamp(35px, calc(2.2875816993vw + 26.0784313725px), 70px);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0.2em;
}
.mv .left h1 span {
  font-size: clamp(12px, calc(0.1307189542vw + 11.4901960784px), 14px);
  display: block;
  margin-bottom: 10px;
  letter-spacing: 0;
}
.mv .left .copy {
  position: absolute;
  font-size: clamp(21px, calc(1.3725490196vw + 15.6470588235px), 42px);
  top: clamp(70px, calc(1.9607843137vw + 62.3529411765px), 100px);
  right: clamp(35px, calc(2.2875816993vw + 26.0784313725px), 70px);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0.1em;
  display: flex;
  justify-content: flex-end;
  flex-direction: row-reverse;
}
.mv .left .copy .tw {
  display: flex;
  flex-direction: column;
}
.mv .left .copy .t1 {
  writing-mode: vertical-rl;
}
.mv .left .copy .t2 {
  font-size: 2.4rem;
  position: relative;
  letter-spacing: -0.05em;
  left: 7%;
}
.mv .right {
  position: relative;
}
.mv .right img {
  display: none;
}
.mv .right .in {
  width: 100%;
  height: 100%;
  background: url("../images/mv.jpg") center top/cover;
}
@media all and (max-width: 1000px) {
  .mv {
    aspect-ratio: unset;
  }
  .mv .inner {
    display: block;
    position: relative;
  }
  .mv .left {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
  }
  .mv .left h1 {
    font-size: 18px;
    color: white;
    bottom: 40px;
    left: 40px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  }
  .mv .left .copy {
    color: white;
    font-size: 28px;
    top: 120px;
    right: 80px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  }
  .mv .left p {
    color: white;
  }
  .mv .right {
    position: relative;
    background: none;
  }
  .mv .right img {
    display: block;
  }
}
@media all and (max-width: 767px) {
  .mv .left h1 {
    font-size: 20px;
    bottom: 20px;
    left: 20px;
  }
  .mv .left p {
    bottom: 80px;
    left: 20px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
  .mv .left .copy {
    font-size: 22px;
    top: 100px;
    right: 20px;
  }
  .mv .left .copy .t2 {
    position: relative;
    left: 13%;
    line-height: 1;
  }
  .mv .left .copy .t1 {
    white-space: nowrap;
    width: auto;
  }
  .mv .left .copy .t3 {
    height: 100px;
  }
  .mv .right {
    position: relative;
    background: none;
  }
  .mv .right img {
    display: block;
  }
}

.top1 {
  padding: 180px 0;
  box-sizing: border-box;
}
.top1 .inner {
  padding: 0 0 0 clamp(90px, calc(5.8823529412vw + 67.0588235294px), 180px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 60px;
}
.top1 .ttl-bx h2 {
  margin-top: 48px;
}
.top1 .lead {
  max-width: clamp(300px, calc(23.5294117647vw + 208.2352941176px), 660px);
  margin: 64px 0 0 0;
}
.top1 .btnw {
  margin: 56px 0 0 0;
}
.top1 .left {
  padding: clamp(30px, calc(1.9607843137vw + 22.3529411765px), 60px) 0 clamp(60px, calc(3.9215686275vw + 44.7058823529px), 120px) 0;
}
.top1 .right {
  background: url("../images/top1.jpg") center top/cover;
}
@media all and (max-width: 1440px) {
  .top1 .inner {
    padding: 0 0 0 clamp(30px, calc(3.9215686275vw + 14.7058823529px), 90px);
  }
}
@media all and (max-width: 1280px) {
  .top1 {
    padding: 100px 0;
  }
}
@media all and (max-width: 1000px) {
  .top1 {
    padding: 100px 0 0 0;
  }
  .top1 .inner {
    display: block;
    padding: 0 5%;
  }
  .top1 .lead {
    max-width: unset;
  }
  .top1 .left {
    padding: 0;
  }
  .top1 .right {
    margin-top: 64px;
    height: 400px;
    width: 112%;
    position: relative;
    left: -6%;
  }
}
@media all and (max-width: 767px) {
  .top1 {
    padding: 60px 0 0 0;
  }
  .top1 .ttl-bx h2 {
    margin-top: 24px;
  }
  .top1 .lead {
    margin: 32px 0 0 0;
  }
  .top1 .btnw {
    margin: 28px 0 0 0;
  }
  .top1 .right {
    margin-top: 40px;
    height: 300px;
  }
}

.top2 {
  background: #1E2A3A;
  color: white;
  padding: 180px 0;
  box-sizing: border-box;
  position: relative;
}
.top2 .inner {
  padding: 0;
}
.top2 .left {
  width: 50vw;
}
.top2 .left .in {
  max-width: 640px;
  width: 90%;
  margin: 0 auto;
}
.top2 .ttl-bx {
  text-align: center;
}
.top2 .ttl-bx .jpm {
  font-size: clamp(12px, calc(0.6535947712vw + 9.4509803922px), 22px);
  line-height: 1;
  color: white;
}
.top2 .ttl-bx .jp {
  color: white;
  writing-mode: vertical-rl;
  font-size: clamp(20px, calc(1.3071895425vw + 14.9019607843px), 40px);
  letter-spacing: 0.2em;
  margin: 24px auto 64px auto;
}
.top2 .ttl-bx .eg {
  font-size: clamp(12px, calc(0.6535947712vw + 9.4509803922px), 22px);
  color: #A08888;
}
.top2 h3 {
  margin-top: 32px;
  font-size: clamp(12px, calc(0.6535947712vw + 9.4509803922px), 22px);
  font-weight: 400;
  text-align: center;
}
.top2 .lead {
  margin-top: 64px;
  font-size: 18px;
  text-align: center;
}
.top2 .lead i {
  border-bottom: 1px solid white;
}
.top2 .et-bx {
  margin-top: 72px;
  position: relative;
}
.top2 .et-bx .fb {
  color: white;
  text-align: center;
  font-size: clamp(12px, calc(0.6535947712vw + 9.4509803922px), 22px);
  font-weight: bold;
  line-height: 1;
}
.top2 .et-bx .bx {
  margin-top: 32px;
  background: #161F2B;
  border-radius: 4px;
  padding: 50px 50px 90px 50px;
  box-sizing: border-box;
  position: relative;
}
.top2 .et-bx p {
  margin: 0 auto;
}
.top2 .et-bx .p1 {
  font-size: 16px;
}
.top2 .et-bx .p1 i {
  font-size: 32px;
  line-height: 1;
}
.top2 .et-bx .p1 {
  text-align: center;
}
.top2 .et-bx .p2 {
  text-align: center;
  margin-top: 16px;
}
.top2 .et-bx .p3 {
  font-size: 14px;
  margin-top: 32px;
}
.top2 .et-bx .btn_2 {
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding-right: 32px;
  box-sizing: border-box;
  background: url("../images/arw1.png") center right 5px no-repeat;
  background-size: 16px auto;
  transition: all 0.3s ease;
}
.top2 .et-bx .btn_2:hover {
  background: url("../images/arw1.png") center right no-repeat;
  background-size: 16px auto;
  opacity: 0.6;
}
.top2 .right {
  width: 54.5vw;
  position: absolute;
  right: -10px;
  top: 0;
  height: 100%;
  place-content: center;
}
.top2 .right .cl, .top2 .right .cm, .top2 .right .cs, .top2 .right .c-main {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  place-content: center;
  transition: all 0.3s ease;
}
.top2 .right .cl.trigger, .top2 .right .cm.trigger, .top2 .right .cs.trigger, .top2 .right .c-main.trigger {
  opacity: 1;
}
.top2 .right .cl.trigger .in, .top2 .right .cm.trigger .in, .top2 .right .cs.trigger .in, .top2 .right .c-main.trigger .in {
  transform: scale(1);
}
.top2 .right .cl .in, .top2 .right .cm .in, .top2 .right .cs .in, .top2 .right .c-main .in {
  border-radius: 100%;
  aspect-ratio: 1/1;
  transform: scale(0);
  transform-origin: right center;
}
.top2 .right .cl .in {
  border: 1px solid #ABB0BA;
  background: #1E3250;
  transition: all 1s ease;
}
.top2 .right .cm .in {
  border: 1px solid #ADB2BC;
  width: 83%;
  background: #1E2D46;
  margin: 0 0 0 auto;
  transition: all 1s 0.1s ease;
}
.top2 .right .cs .in {
  border: 1px solid #C8CDD7;
  width: 65%;
  background: #192337;
  margin: 0 0 0 auto;
  transition: all 1s 0.2s ease;
}
.top2 .right .c-main .in {
  border: 1px solid #A5A9B3;
  width: 47%;
  background: #161F2B;
  margin: 0 0 0 auto;
  place-content: center;
  text-align: center;
  transition: all 1s 0.3s ease;
}
.top2 .right .c-main .in p {
  line-height: 1;
}
.top2 .right .c-main .in .p1 {
  background: linear-gradient(to right, #FFFFFF, #EBC350, #826428);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 3px 6px rgba(130, 100, 40, 0.4);
  line-height: 1;
  font-size: clamp(64px, calc(2.9411764706vw + 52.5294117647px), 109px);
}
.top2 .right .c-main .in .p1 i {
  font-size: clamp(32px, calc(1.6993464052vw + 25.3725490196px), 58px);
}
.top2 .right .c-main .in .p2 {
  background: linear-gradient(to right, #FAFCFF, #C8CDD7, #646E82);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(16px, calc(0.7843137255vw + 12.9411764706px), 28px);
  margin: 10px 0 20px 0;
}
.top2 .right .c-main .in .p3 {
  text-align: left;
  margin: 0 auto;
  width: 211px;
  color: #DDDEE0;
  line-height: 1.7;
  font-size: 16px;
}
.top2 .right .c-main .in2 {
  transition: all 1s 0.5s ease;
  opacity: 0;
  filter: blur(10px);
}
.top2 .right .c-main .in2.trigger {
  opacity: 1;
  filter: blur(0px);
}
.top2 .right .top-nums {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  place-content: center;
  transition: all 1s 0.7s ease;
  opacity: 0;
  filter: blur(10px);
}
.top2 .right .top-nums img {
  width: 51.7%;
  position: relative;
  left: 2.6%;
  top: 4%;
}
.top2 .right .top-nums.trigger {
  opacity: 1;
  filter: blur(0);
}
.top2 .right .tx33 {
  position: absolute;
  top: 0;
  left: -3%;
  width: 100%;
  height: 100%;
  place-content: center;
  opacity: 0;
  transition: all 1s 1s ease;
  filter: blur(10px);
}
.top2 .right .tx33.trigger {
  opacity: 1;
  filter: blur(0px);
}
@media all and (max-width: 1280px) {
  .top2 .left {
    width: 100%;
  }
  .top2 .right {
    width: 54.5vw;
    margin: 40px auto 0 auto;
    position: relative;
    right: unset;
    top: unset;
    height: auto;
    aspect-ratio: 1/1;
    place-content: center;
  }
  .top2 {
    padding: 100px 0;
  }
}
@media all and (max-width: 1000px) {
  .top2 .right {
    width: 90%;
  }
}
@media all and (max-width: 767px) {
  .top2 {
    padding: 60px 0;
  }
  .top2 .ttl-bx .jp {
    margin: 24px auto 32px auto;
  }
  .top2 h3 {
    margin-top: 16px;
  }
  .top2 .lead {
    margin-top: 32px;
    font-size: 16px;
  }
  .top2 .et-bx {
    margin-top: 48px;
  }
  .top2 .et-bx .fb {
    font-size: 15px;
  }
  .top2 .et-bx .bx {
    margin-top: 16px;
    padding: 30px 20px 60px 20px;
  }
  .top2 .et-bx .p1 {
    font-size: 14px;
  }
  .top2 .et-bx .p1 i {
    font-size: 24px;
  }
  .top2 .et-bx .p2 {
    text-align: center;
    margin-top: 16px;
  }
  .top2 .et-bx .p3 {
    font-size: 10px;
    margin-top: 24px;
  }
  .top2 .et-bx .btn_2 {
    right: 10px;
    bottom: 10px;
  }
  .top2 .right {
    position: relative;
    width: 96%;
    right: -4%;
  }
  .top2 .right .c-main .in {
    border: 1px solid #A5A9B3;
    width: 47%;
    background: #161F2B;
    margin: 0 0 0 auto;
    place-content: center;
    text-align: center;
  }
  .top2 .right .c-main .in p {
    line-height: 1;
  }
  .top2 .right .c-main .in .p1 {
    line-height: 1;
    font-size: 48px;
  }
  .top2 .right .c-main .in .p1 i {
    font-size: 24px;
  }
  .top2 .right .c-main .in .p2 {
    font-size: 16px;
    margin: 10px 0 10px 0;
  }
  .top2 .right .c-main .in .p3 {
    width: 130px;
    line-height: 1.6;
    font-size: 10px;
  }
}

.top3 {
  background: url("../images/top3.jpg") center top/cover;
  padding: 180px 0;
  box-sizing: border-box;
  color: white;
}
.top3 .ttl-bx .jpm {
  font-size: clamp(12px, calc(0.6535947712vw + 9.4509803922px), 22px);
  color: white;
}
.top3 .ttl-bx .jp {
  color: white;
  font-size: clamp(20px, calc(1.3071895425vw + 14.9019607843px), 40px);
  margin: 20px 0;
}
.top3 .ttl-bx .eg {
  color: #8E8A8A;
  font-size: clamp(14px, calc(0.6535947712vw + 11.4509803922px), 24px);
}
.top3 .lead {
  margin: 80px 0;
}
.top3 .lead i {
  font-size: clamp(14px, calc(0.6535947712vw + 11.4509803922px), 24px);
}
.top3 .c-2 {
  display: grid;
  grid-template-columns: 45% 52%;
  gap: 0 120px;
  align-items: flex-end;
}
.top3 .c-3 {
  margin-top: 180px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(30px, calc(1.9607843137vw + 22.3529411765px), 60px);
}
.top3 .c-3 .bx {
  border: 1px solid #343434;
  background: #161F2B;
  border-radius: 4px;
  padding: 50px 40px;
  box-sizing: border-box;
}
.top3 .c-3 .bx .tl {
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  line-height: 1;
  margin-bottom: 24px;
}
@media all and (max-width: 1280px) {
  .top3 {
    padding: 100px 0;
  }
  .top3 .c-2 {
    display: flex;
    justify-content: space-between;
  }
  .top3 .c-3 {
    margin-top: 100px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px 0;
  }
}
@media all and (max-width: 1000px) {
  .top3 .lead {
    margin: 40px 0;
  }
  .top3 .c-2 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 60px 0;
  }
  .top3 .c-2 img {
    width: 70%;
    margin: 0 auto;
  }
  .top3 .c-3 {
    margin-top: 60px;
  }
}
@media all and (max-width: 767px) {
  .top3 {
    padding: 60px 0;
  }
  .top3 .ttl-bx .jp {
    margin: 10px 0;
  }
  .top3 .lead {
    margin: 40px 0;
  }
  .top3 .c-2 img {
    width: 100%;
  }
  .top3 .c-3 {
    margin-top: 40px;
  }
  .top3 .c-3 .bx {
    padding: 20px;
    font-size: 14px;
  }
  .top3 .c-3 .bx .tl {
    font-size: 16px;
    margin-bottom: 12px;
  }
}

.top4 {
  padding: 180px 0;
  box-sizing: border-box;
}
.top4 .inner {
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.top4 .left {
  padding: 70px 120px;
  box-sizing: border-box;
}
.top4 .left .ttl-bx {
  text-align: center;
}
.top4 .left .ttl-bx .jp {
  margin-bottom: 32px;
  font-weight: 600;
}
.top4 .left .lead1 {
  font-size: clamp(16px, calc(0.522875817vw + 13.9607843137px), 24px);
  line-height: 1.8;
  text-align: center;
  padding: 80px 0 60px 0;
  position: relative;
}
.top4 .left .lead1:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -50px;
  width: 100px;
  height: 1px;
  background: #333;
}
.top4 .left .lead2 {
  margin-top: 60px;
}
.top4 .left .lead2 i {
  font-weight: bold;
  border-bottom: 1px solid #333;
  box-sizing: border-box;
}
.top4 .right {
  background: url("../images/top4.jpg") center top/cover;
}
@media all and (max-width: 1280px) {
  .top4 {
    padding: 100px 0;
  }
  .top4 .inner {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .top4 .left {
    width: 90%;
    margin: 0 auto;
    padding: 70px 0;
  }
  .top4 .right {
    height: 500px;
    background: url("../images/top4-tb.jpg") center top/cover;
  }
}
@media all and (max-width: 1000px) {
  .top4 .left {
    padding: 0 0 40px 0;
  }
  .top4 .left .lead1 {
    padding: 40px 0 60px 0;
  }
}
@media all and (max-width: 767px) {
  .top4 {
    padding: 60px 0;
  }
  .top4 .left .ttl-bx .jp {
    margin-bottom: 16px;
  }
  .top4 .left .lead1 {
    padding: 40px 0 40px 0;
  }
  .top4 .left .lead2 {
    margin-top: 40px;
  }
  .top4 .right {
    height: 300px;
  }
}

.top5 .jp {
  font-size: clamp(16px, calc(1.045751634vw + 11.9215686275px), 32px);
  font-weight: 400;
}
.top5 em {
  font-weight: bold;
}
.top5 .lead1 {
  margin: 64px 0 0 0;
}
.top5 .lead2 {
  background: #E8E5E2;
  padding: 40px 100px;
  margin: 48px 0;
  box-sizing: border-box;
}
.top5 .lead2 p {
  position: relative;
  padding-left: 1em;
  box-sizing: border-box;
  margin-bottom: 16px;
}
.top5 .lead2 p:last-of-type {
  margin-bottom: 0;
}
.top5 .lead2 p:before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background: #000;
}
.top5 .lead3 i {
  border-bottom: 1px solid #333;
}
.top5 .btnw {
  margin-top: 64px;
}
@media all and (max-width: 1280px) {
  .top5 .lead1 {
    margin: 32px 0 0 0;
  }
}
@media all and (max-width: 1000px) {
  .top5 .lead2 {
    padding: 30px;
  }
}
@media all and (max-width: 767px) {
  .top5 .lead1 {
    margin: 16px 0 0 0;
  }
  .top5 .lead2 {
    margin: 24px 0;
    padding: 20px;
  }
  .top5 .lead2 p:before {
    top: 10px;
  }
  .top5 .lead3 i {
    border-bottom: 1px solid #333;
  }
  .top5 .btnw {
    margin-top: 32px;
  }
  .top5 .btnw a {
    margin: 0 auto;
  }
}

.top6 {
  height: 100vh;
  place-content: center;
  text-align: center;
}
.top6 .inner {
  display: inline-block;
}
.top6 h2 {
  font-size: clamp(20px, calc(0.9803921569vw + 16.1764705882px), 35px);
  line-height: 1.6;
  text-align: left;
  display: inline-block;
}
.top6 .txt {
  line-height: 2;
  margin-top: 30px;
  text-align: left;
  display: inline-block;
  max-width: 600px;
}
@media all and (max-width: 767px) {
  .top6 h2 {
    font-size: clamp(24px, calc(0.7189542484vw + 21.1960784314px), 35px);
    line-height: 1.6;
    text-align: left;
  }
  .top6 .txt {
    line-height: 2;
    font-size: 12px;
    margin-top: 20px;
    text-align: left;
  }
}

.top7 {
  background: #F5F5F5;
  padding: 180px 0;
  box-sizing: border-box;
}
.top7 .ttl-bx {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.top7 .ttl-bx h2 {
  font-family: "Marcellus", serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(20px, calc(1.4379084967vw + 14.3921568627px), 42px);
}
.top7 .ttl-bx .jj {
  font-size: 16px;
  position: relative;
  padding-left: 32px;
  box-sizing: border-box;
  top: 10px;
}
.top7 .ttl-bx .jj:before {
  content: "";
  position: absolute;
  top: 0;
  left: 5px;
  width: 1px;
  height: 100%;
  background: #D0D0D0;
  transform: rotate(18deg);
}
.top7 .inner {
  display: flex;
}
.top7 .left {
  width: 370px;
  position: relative;
  z-index: 2;
  background: #F5F5F5;
}
.top7 .left:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  margin-top: 0;
  margin-left: 0;
  width: 100%;
  height: 100%;
  background: #F5F5F5;
}
.top7 .right {
  width: calc(100% - 370px);
}
.top7 .nv {
  margin-top: 40px;
  width: 160px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 24px;
}
.top7 .btnw {
  margin-top: 90px;
}
.top7 .btn-tab {
  display: none;
}
.top7 .swiper-button-next, .top7 .swiper-button-prev {
  background: none;
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0;
  padding: 0;
  top: unset;
  left: unset;
  right: unset;
}
.top7 .swiper-button-next:after, .top7 .swiper-button-prev:after {
  content: none;
}
.top7 .swiper-button-next:hover, .top7 .swiper-button-prev:hover {
  opacity: 0.6;
}
@media all and (max-width: 1280px) {
  .top7 {
    padding: 100px 0;
  }
}
@media all and (max-width: 1000px) {
  .top7 {
    padding: 100px 0;
  }
  .top7 .btnw {
    display: none;
  }
  .top7 .ttl-bx {
    gap: 0 24px;
  }
  .top7 .ttl-bx h2 {
    font-family: "Marcellus", serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(20px, calc(1.4379084967vw + 14.3921568627px), 42px);
  }
  .top7 .ttl-bx .jj {
    font-size: 14px;
    top: 1px;
  }
  .top7 .btn-tab {
    display: block;
    margin: 60px auto 0 auto;
  }
  .top7 .btn-tab a {
    margin: 0 auto;
  }
  .top7 .inner {
    display: block;
  }
  .top7 .left {
    width: 100%;
  }
  .top7 .right {
    width: 100%;
  }
  .top7 .tp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
  }
  .top7 .nv {
    margin-top: 0;
  }
}
@media all and (max-width: 767px) {
  .top7 {
    padding: 60px 0;
  }
  .top7 .ttl-bx {
    display: block;
  }
  .top7 .ttl-bx h2 {
    font-size: 24px;
  }
  .top7 .ttl-bx .jj {
    font-size: 12px;
    margin-top: 10px;
    padding-left: 20px;
    top: 0;
  }
  .top7 .nv {
    width: 108px;
    gap: 0 12px;
  }
  .top7 .swiper-button-next, .top7 .swiper-button-prev {
    width: 48px;
    height: 48px;
  }
  .top7 .btn-tab {
    margin: 40px auto 0 auto;
  }
}

.swipe_1 a:hover .img:before {
  opacity: 0;
}
.swipe_1 a:hover img {
  transform: scale(1.05);
}
.swipe_1 .img {
  overflow: hidden;
  position: relative;
}
.swipe_1 .img:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: saturation;
  background: #000;
  transition: all 0.3s ease;
  z-index: 2;
}
.swipe_1 .img img {
  transition: all 0.3s ease;
}
.swipe_1 .img {
  aspect-ratio: 350/260;
}
.swipe_1 .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swipe_1 .ttl {
  font-weight: bold;
}
.swipe_1 .ttls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0 10px 0;
}
.swipe_1 .cate {
  color: white;
  background: #A69685;
  line-height: 1;
  font-size: 12px;
  padding: 2px 8px;
  height: 20px;
  place-content: center;
  text-align: center;
}
.swipe_1 .ymd {
  font-size: 12px;
}

/*# sourceMappingURL=top.css.map */