/**
 * 剣道未来プロジェクト特設 — TOP（page-mirai-project）
 */

/* ----- Layout ----- */
.top-Contents {
  margin-top: 0;
  padding-bottom: 84px;
  overflow: hidden;
}


/* ----- Main Visual ----- */
.top-Mv {
  position: relative;
  z-index: 1;
  height: 608px;
  overflow: hidden;
}
.top-Mv::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url("../images/mv_background.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 768px) {
  .top-Mv {
    height: 495px;
  }
  .top-Mv::before {
    background-image: url("../images/mv_background_sp.webp");
  }
}
.top-Mv_Copy {
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  text-align: center;
  color: #FFF;
  font-weight: 700;
  line-height: 27px;
  z-index: 2;
}
.top-Mv_Copy_Heading {
  width: 100%;
  max-width: 1057px;
  margin: 238px auto 32px;
}
.top-Mv_Copy_Heading_Pc {
  display: block;
  padding-inline: 20px;
}
.top-Mv_Copy_Heading_Sp {
  display: none;
}
@media only screen and (max-width: 768px) {
  .top-Mv_Copy_Heading {
    width: 100%;
    max-width: 177px;
    margin: 106px auto 21px;
  }
  .top-Mv_Copy_Heading_Pc {
    display: none;
  }
  .top-Mv_Copy_Heading_Sp {
    display: block;
  }
}
.top-Mv_Copy_Text_Inner {
  max-width: 504px;
  margin: 0 auto;
  text-align: left;
}
.top-Mv_Copy_Text_Inner br.breakSp {
  display: none;
}
@media only screen and (max-width: 768px) {
  .top-Mv_Copy_Text_Inner br.breakSp {
    display: block;
  }
}
.top-Mv_Copy_Text_Image {
  width: 100%;
  height: auto;
  margin-bottom: 19px;
}
.top-Mv_Copy_Text_small {
  display: none;
  font-size: 16px;
  margin-bottom: 19px;
}
.top-Mv_Copy_Text {
  font-size: 24px;
}
@media only screen and (max-width: 768px) {
  .top-Mv_Copy_Text_Inner {
    position: relative;
    margin: 0 auto;
    text-align: center;
    max-width: 216px;
    width: 100%;
  }
  .top-Mv_Copy_Text_Inner::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: 0;
    width: 81px;
    height: 81px;
    background-image: url("../images/mv_icon_sp.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .top-Mv_Copy_Text_Inner > img {
    display: none;
  }
  .top-Mv_Copy_Text_small {
    display: block;
    font-size: 14px;
  }
  .top-Mv_Copy_Text {
    font-size: 16px;
  }
}
/* ----- News ----- */
.top-News {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin-inline: auto;
  margin-top: 87px;
  padding-inline: 20px;
}
@media only screen and (max-width: 768px) {
  .top-News {
    margin-top: 50px;
    margin-inline: 20px;
    padding-inline: 0;
  }
}
.top-News_Inner {
  padding: 39px 64px 42px 65px;
  border-radius: 20px;
  background: rgba(229, 229, 229, 0.80);
}
@media only screen and (max-width: 768px) {
  .top-News_Inner {
    padding: 23px 20px 34px;
  }
}
.top-News h2 {
  text-align: center;
  color: #1F2C5C;
  font-size: 35px;
  font-style: normal;
  font-weight: 700;
  line-height: 33px;
  margin-bottom: 40px;
}
@media only screen and (max-width: 768px) {
  .top-News h2 {
    font-size: 20px;
    line-height: 165%;
    margin-bottom: 35px;
  }
}
.top-News ul {
  box-sizing: border-box;
  padding: 0;
}
.top-News ul li {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 25px;
  padding-bottom: 17px;
  margin-bottom: 17px;
  border-bottom: 1px solid #d0d0d0;
  color: #333;
  font-weight: 400;
  word-break: break-all;
}
@media only screen and (max-width: 768px) {
  .top-News ul li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-bottom: 14px;
    margin-bottom: 14px;
  }
}

.top-News ul li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.top-News ul li time {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 33px;
  white-space: nowrap;
}
@media only screen and (max-width: 768px) {
  .top-News ul li time {
    font-size: 13px;
  }
}

.top-News ul li a {
  flex: 1;
  font-size: 14px;
  line-height: 1.9;
}
@media only screen and (max-width: 768px) {
  .top-News ul li a {
    font-size: 13px;
  }
}
.top-News ul li a:hover {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

/* ----- About ----- */
.top-About {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin-top: 49px;
  margin-inline: auto;
  padding-inline: 20px;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .top-About {
    margin-top: 80px;
    margin-inline: 20px;
    padding-inline: 0;
  }
}

.top-About_Inner {
  padding: 64px 20px 67px;
  border-radius: 20px;
  background: rgba(0, 114, 137, 0.80);
  color: #FFF;
}
@media only screen and (max-width: 768px) {
  .top-About_Inner {
    padding: 30px 20px;
  }
}
.top-About h2 {
  font-size: 35px;
  font-style: normal;
  font-weight: 700;
  line-height: 33px;
  margin-bottom: 60px;
}
.top-About_Inner h2 > br {
  display: none;
}
@media only screen and (max-width: 768px) {
  .top-About h2 {
    font-size: 20px;
    line-height: 155%; 
  }
  .top-About_Inner h2 > br {
    display: block;
  }
}
.top-About p {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 245%;
}
@media only screen and (max-width: 768px) {
  .top-About p {
    font-size: 15px;
    line-height: 195%;
    text-align: start;
  }
}

/* ----- Message ----- */
.top-Message {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin-top: 56px;
  margin-inline: auto;
  padding-inline: 20px;
}

@media only screen and (max-width: 768px) {
  .top-Message {
    margin-top: 80px;
    margin-inline: 20px;
    padding-inline: 0;
  }
}

.top-Message_Inner {
  padding: 45px 49px 56px;
  border-radius: 20px;
  background: rgba(229, 229, 229, 0.80);
}

@media only screen and (max-width: 768px) {
  .top-Message_Inner {
    padding: 23px 20px 34px;
  }
}

.top-Message h2 {
  color: #1F2C5C;
  font-size: 35px;
  font-style: normal;
  font-weight: 700;
  line-height: 33px;
  margin-bottom: 51px;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .top-Message h2 {
    font-size: 20px;
    line-height: 165%;
    margin-bottom: 15px;
  }
}
.top-Message_Inner_Content {
  display: flex;
  gap: 102px;
}
@media only screen and (max-width: 768px) {
  .top-Message_Inner_Content {
    flex-direction: column;
    gap: 20px;
  }
}
.top-Message_Inner_Text {
  flex: 1;
}
.top-Message_Inner_Text p {
  color: #333;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 255%;
}
@media only screen and (max-width: 768px) {
  .top-Message_Inner_Text p {
    font-size: 15px;
  }
}
.top-Message_Inner_Image {
  flex-shrink: 0;
}
.top-Message_Inner_Image img {
  width: 352px;
  height: auto;
  aspect-ratio: 1/1;
}

/* ----- Kendo ----- */
.top-Kendo {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin-top: 48px;
  margin-inline: auto;
  padding-inline: 20px;
}
@media only screen and (max-width: 768px) {
  .top-Kendo {
    margin-top: 80px;
    margin-inline: 20px;
    padding-inline: 0;
  }
}
.top-Kendo_Inner {
  padding: 45px 30px 51px;
  border-radius: 20px;
  background: rgba(32, 156, 181, 0.85);
  backdrop-filter: blur(7.5px);
}
@media only screen and (max-width: 768px) {
  .top-Kendo_Inner {
    padding: 33px 20px 40px;
  }
}
.top-Kendo h2 {
  color: #FFF;
  font-size: 35px;
  font-style: normal;
  font-weight: 700;
  line-height: 33px;
  margin-bottom: 54px;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .top-Kendo h2 {
    font-size: 20px;
    line-height: 165%;
    margin-bottom: 44px;
  }
}
.top-Kendo_List {
  width: 100%;
}
.top-Kendo_List_Image_pc {
  display: block;
}
.top-Kendo_List_Image_sp {
  display: none;
}

@media (max-width: 768px) {

  .top-Kendo_List_Image_pc {
    display: none;
  }
  .top-Kendo_List_Image_sp {
    display: block;
  }
}

.top-Kendo_Banner {
  margin-top: 76px;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .top-Kendo_Banner {
    margin-top: 43px;
  }
}
.top-Kendo_Banner a {
  position: relative;
  display: inline-block;
  padding: 25px 29px 24px;
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  min-height: 108px;
  background: #00323D;
  border-radius: 10px;
}
@media only screen and (max-width: 768px) {
  .top-Kendo_Banner a {
    padding: 11px 13px;
    max-width: 300px;
    min-height: 50px;
  }
}
.top-Kendo_Banner a:hover {
  background: #2D8090;
}
.top-Kendo_Banner_Inner {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media only screen and (max-width: 768px) {
  .top-Kendo_Banner_Inner {
    gap: 9px;
  }
}
.top-Kendo_Banner a:after {
  content: "";
  position: absolute;
  right: 23px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 33px;
  background-image: url("../images/icon_arrow_right.svg");
  background-size: 100% auto;
  background-position: center center;
}
@media only screen and (max-width: 768px) {
  .top-Kendo_Banner a:after {
    width: 7px;
    height: 14px;
    right: 10px;
  }
}
.top-Kendo_Banner_Heading {
  color: #FFE100;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: 59px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}
@media only screen and (max-width: 768px) {
  .top-Kendo_Banner_Heading {
    font-size: 27px;
  }
}
.top-Kendo_Banner_Text {
  color: #FFF;
  font-size: 25px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  text-align: start;
}
@media only screen and (max-width: 768px) {
  .top-Kendo_Banner_Text {
    font-size: 11px;
  }
}
/* ----- Contact ----- */
.top-Contact {
  text-align: center;
  margin-top: 82px;
  margin-inline: auto;
  max-width: 1000px;
  padding-inline: 20px;
}

.top-Contact_Inner {
  position: relative;
}
@media only screen and (max-width: 768px) {
  .top-Contact {
    margin-top: 98px;
    margin-inline: 20px;
    padding-inline: 0;
  }
}
.top-Contact p {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 270%;
  letter-spacing: normal;
}
.top-Contact p span {
  font-weight: 700;
}
@media only screen and (max-width: 768px) {
  .top-Contact p {
    font-size: 16px;
    line-height: 235%;
    text-align: start;
  }
}
.top-Contact a {
  display: inline-block;
  margin-top: 41px;
  padding: 25px 24px 29px;
  width: 392px;
  height: 87px;
  background: #00677C;
  border-radius: 10px;

  color: #FFF;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 33px;
}
.top-Contact a:hover {
  background: #4DD3EE;
}
@media only screen and (max-width: 768px) {
  .top-Contact a {
    margin-top: 38px;
    margin-inline: auto;
    padding: 21px 50px 23px 50px;
    width: 335px;
    height: 74px;

    font-size: 22px;
    line-height: 28.202px; 
  }
}

/* スクリーンリーダー向け（aria-labelledby 用） */
.top-VisuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----- 背景画像エリア ----- */
.bg-section {
  position: relative;
}
.bg-section_inner {
  position: absolute;
  height: 100vh;
  width: 100%;
  z-index: 0;
}

.bg-image {
  position: absolute;
  inset: 0;
}

.bg-section.is-fixed .bg-image {
  position: fixed;
}

.bg-image,
.bg-placeholder {
  width: 100%;
  height: 100%;
}

.bg-image {
  content: "";
  position: absolute;
  min-width: 1694px;
  height: 100vh;
  left: 50%;
  transform: translateX(calc(-50% + 100vw * 0.035));
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-image: url("../images/bg-kenshi_pc.webp");
  z-index: 0;
}
@media only screen and (max-width: 768px) {
  .bg-image {
    min-width: 130%;
    height: 100vh;
    left: 50%;
    transform: translateX(-50%);
    background-image: url("../images/bg-kenshi_sp.webp");
  }
}

.bg-image {
  top: -75px;
}
.bg-section.is-fixed .bg-image {
  top: 124px;
}
@media only screen and (max-width: 768px) {
  .bg-image {
    top: -30px;
  }
  .bg-section.is-fixed .bg-image {
    top: 88px;
  }
}