@charset "UTF-8";

.mv-top {
  width: 100%;
  height: clamp(310px, calc(310px + (250 * (100vw - 375px) / 1025)), 560px);
  position: relative;
  overflow: visible;
  margin-bottom:var(--margin-xl);
}

/* 背景画像をpictureで表示 */
.mv-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  overflow: hidden;
}

.mv-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.mv-container {
  max-width: 1500px;
  padding: 0 15px;
  margin: 0 auto;
  position: relative;
  padding:var(--margin-l) 0;
}

.mv-textbox {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: clamp(500px, calc(500px + (200 * (100vw - 500px) / 900)), 700px);
  margin-left: auto;
  margin-right: 0%; /* または 0～clamp() */
  z-index: 1;
}

.mv-text-top {
  width:clamp(160px, calc(180px + (520 * (100vw - 375px) / 1025)), 700px);
  display: flex;
  gap: var(--margin-s);
  flex-wrap: wrap;
  margin-bottom: var(--margin-m);
  align-self: center;
}


.mv-text-col {
  flex: 1 1 45%;
  line-height: 2;
  letter-spacing: 2px;
  text-align: center;
}

.mv-text-col span:nth-of-type(1){
  line-height: 1.2;
}

.mv-text-hikki{
  width: 100%;
  justify-self: center;
  text-align: center;
  padding:.6rem;
  letter-spacing: 10px;
  border-top:1px solid var(--color-black-50);
  border-bottom:1px solid var(--color-black-50);
}

.mv-text-bottom {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--margin-m);
  align-self: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.mv-box {
  flex: 0 0 auto;
  width: clamp(50px, calc(100px + (100 * (100vw - 375px) / 1025)), 200px);  /* 丸のサイズ（必要に応じて調整） */
  height: clamp(50px, calc(100px + (100 * (100vw - 375px) / 1025)), 200px);
  border-radius: 50%;        /* 丸形にする */
  background-color: var(--color-blue);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--font-mv-30);
}

/* 申し込みセクション */

/*
.exam-section {
    margin: 0 auto;
}

.exam-inner {
  background-color: var(--color-blue2);
  padding: var(--margin-l) 20px;

  text-align: center;
}



.exam-label {
  display: inline-block;
  font-size: var(--font-14);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding: 2px 6px;
  margin-right:10px;
}


.exam-highlight {
  color: var(--color-primary);
  text-decoration: underline;
}

.exam-dates {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: var(--margin-m);
  justify-content: center;
}

.exam-date-box {
  display: flex;
align-items: center;
justify-content: center;

}

*/
/* お知らせ */

#top-news h2{
  margin:0;
}

.news-wrap {
  gap: var(--margin-s); /* 適度な余白 */
  flex-wrap: wrap; /* スマホ対応 */
  align-items: center;
}

/* 左：タイトル */
.news-title {
  flex: 0 0 30%;
  font-size: var(--font-36);
  font-weight: 700;
}

/* 右：記事リスト */
.news-list {
  flex: 1 1 0;
  border-bottom:1px solid var(--color-blue);
}

/* 各記事 */
.news-list div{
  padding: .5rem 0;
  border-top:1px solid var(--color-blue);
}

.news-list span {
  display: block;
  font-size: var(--font-14);
  color: var(--color-gray3);
  margin-bottom: 0.2em;
}


/* 挨拶 */

#top-greet .greet-title{
background-color: var(--color-blue);
}

#top-greet h2{
font-size: var(--font-24);
color:white;
margin:0 auto;
padding-top:var(--margin-s);
padding-bottom:var(--margin-s);
}

#top-greet .greet-content{
  margin:0 auto;
  gap:var(--margin-m);
}

#top-greet .greet-content p{
  flex:1;
}

.caption{
padding:var(--margin-s) 0;
}

/*コース*/

#top-course {
  position: relative;
  overflow: visible;
  padding:150px 0;
}

.course-bg {
  position: absolute;
  top: 0;
  right: 23rem; /* ← オフセット */
  width: calc(100% - 23rem); /* ← 残り幅を指定 */
  height: 100%; /* ← 親要素（セクション）の高さに合わせる */
  background-color: var(--color-blue2);
  z-index: 0;
}

/* テキスト：中央寄せ＋max1000px */
.course-text-container {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.course-text-container-2{
  max-width: calc(750px - var(--margin-xl)); /*750は1000-(画像幅/2) */
}


/* 画像：右寄せ・1500px枠の右端に */
.course-image-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1500px;
  height: 550px;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}

.course-image-container img {
  position: absolute;
  right: 0;
  top: 0;
  width: 500px;
  height: 550px;
  object-fit: cover;
  display: block;
}

.course-heading,.course-heading-reverse {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items:baseline;
  font-size: var(--font-30);
}

.course-heading::before, .course-heading-reverse::before {
  
  position: absolute;
  right: 0;
  bottom:-14px;
  font-size: 60px;
  color: var(--color-white-50);
  font-weight: 500;
  letter-spacing: 8px;
  z-index:1;
}

.course-heading::before{
content: "STANDARD";
}

.course-heading-reverse::before{
content: "BEGINNER";
}


.course-heading .sub,.course-heading-reverse .sub {
  display: block;
  font-size: var(--font-18);
  margin-top: .3em;
  padding-left:.3rem;
}

.course-heading span,.course-heading-reverse span{
  z-index:2;
}

.course-table {
  width: 100%;
  border-collapse: collapse;
  color:var(--color-blue);
}

.course-table th,
.course-table td {
  padding: 0.5em 0;
  border-bottom: 1px solid var(--color-blue);
}


.course-table th {
  text-align: left;
  padding-right: 1em;
  font-weight: 500;
  width: 70%;
}

.course-table td {
  text-align: right;
}


/**/

#top-course-reverse {
  position: relative;
  overflow: visible;
  padding: 150px 0;
}

.course-bg-reverse {
  position: absolute;
  top: 0;
  left: 23rem; /* ← オフセット逆 */
  width: calc(100% - 23rem);
  height: 100%;
  background-color: var(--color-blue2);
  z-index: 0;
}

.course-image-container-reverse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1500px;
  height: 550px;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}

.course-image-container-reverse img {
  position: absolute;
  left: 0; /* ← 反転 */
  top: 0;
  width: 500px;
  height: 550px;
  object-fit: cover;
  display: block;
}


/*科目*/
#top-kamoku {
  justify-content: center;
  align-items: center;
}

#top-kamoku .flex-r-c{
  gap:var(--margin-m);
  align-items: stretch;
}

#top-kamoku .box{
  padding:var(--margin-l) var(--margin-xl);
  border:1px solid var(--color-blue);
  flex:1;
}

#top-kamoku h3{
  margin:0;
  padding:0;
}

#top-kamoku ul{
  display: inline-block;
  text-align: left;
  margin:0 auto;
}



#top-kamoku ul li::before{
  content: "・";
}

#top-kamoku .box {
  width: 100%; /* 横幅100%で画面いっぱいに */
}

/*講習日程*/

#schedule h3::before{
  content:"";
padding-right:.8rem;
border-left:4px solid var(--color-primary);
}

.schedule-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-primary);
}

.schedule-header {
  display: flex;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: bold;
  text-align: center;
}

.schedule-header > div {
  flex: 1;
  padding: 0.75rem;
  border-right: 1px solid var(--color-white);
}

.schedule-header > div:last-child {
  border-right: none;
}

.schedule-row {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-primary);
  text-align: center;
}

.schedule-row > div {
  flex: 1;
  padding: 1rem;
  border-right: 1px solid var(--color-gray2);
  border-top: 1px solid #eee;
}

.schedule-row > div:last-child {
  border-right: none;
}


.venue small {
  font-size: 0.9em;
  color: var(--color-gray3);
}

.month {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items:center;
}

.day-entry {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding:.5rem 0;
}

.day-entry .btn {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  background: var(--color-primary);
  color: var(--color-white);
  text-align: center;
  border-radius: 4px;
  font-size: 0.9rem;
  text-decoration: none;
}


.schedule-wrap .flex-r-c,
.schedule-wrap .flex-r-c .flex {
  gap: 0.4rem;
}


@media screen and (max-width: 1500px) {
  .course-image-container{
  right: calc(1500px - 100vw);
  width: calc(1500px - calc(1500px - 100vw));
}

.course-text-container-2{
  max-width: calc(750px - calc((1500px - 100vw) / 2) - var(--margin-xl));
}
/**/
  .course-image-container-reverse {
    right: calc((1500px - 100vw));
    width: calc(1500px - calc(1500px - 100vw));
  }

}

@media screen and (max-width: 1000px) {

  #top-course{
   margin-top:calc(var(--margin-xl) * 2)!important;
   padding:250px 0 var(--margin-xl);
  }
  

  .course-bg{
  position: absolute;
  top: 0;
  right: var(--margin-xl); /* ← オフセット */
  width: calc(100% - var(--margin-xl)); /* ← 残り幅を指定 */
  }

  .course-text-container{
  margin-top:0px;
  }

  /* 横並び
    .course-text-container-2 {
    max-width: calc(100vw - 500px - var(--margin-xl));
  }
    */

  .course-text-container-2{
    max-width:calc(100vw - var(--margin-xl) - 2rem);
    padding:0 1rem;
  }


  .course-image-container{
    top:0%;
  }

  .course-image-container img {
  position: absolute;
  right: 0;
  top: 200px;
  max-width: 660px;
  height: 300px;
}

/**/

  #top-course-reverse {
    margin-top: calc(var(--margin-xl) * 2)!important;
    padding: 250px 0 var(--margin-xl);
  }
  .course-bg-reverse {
    left: var(--margin-xl);
    width: calc(100% - var(--margin-xl));
  }
  .course-image-container-reverse {
    top: 0;
  }
  .course-image-container-reverse img {
  position: absolute;
  left: 0;
  top: 200px;
  max-width: 660px;
  height: 300px;
  }

}


/* スマホ時のはみ出し表現 */
@media screen and (max-width: 768px) {
.mv-top{
  margin-bottom: 100px!important;
}

.mv-container{
  padding:70px .5rem;
}


  .mv-textbox{
max-width: none;
  }

  .mv-text-col{
    text-align: center;
  }

  .mv-text-top{
    background-color: rgba(255,255,255,0.8);
    padding:1.6rem;
    align-self:end;
  }
.mv-text-hikki{
  letter-spacing: 3px;
  padding:.2rem;
}

.mv-text-bottom {
  position: absolute;
  bottom: -60%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  gap:20px;
}

.news-wrap{
  align-items: stretch;
}


#top-greet h2{
  text-align: center;
}


#top-course{
  padding:var(--margin-xl) 0;
}

  
.course-text-container {
  padding: 0 10px;
}

.course-text-container-2{
  max-width: calc(100vw - var(--margin-xl) - 1rem);
}

.course-image-container,.course-image-container img{
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;
  transform: none;
}

.course-image-container {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 1;
  text-align: center; /* or right */
  margin-top: -60px;
}
.course-image-container img {
  position: static;
  display: block;        /* inline画像の余白防止 */
  width: 80%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  text-align: center; /* or right */
  margin: 0 0 0 auto;
}

  .course-heading::before {
    right: 0;
    bottom:-14px;
    font-size: 54px;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
    letter-spacing: 4px;
    z-index:1;
  }

  /**/

  #top-course-reverse{
  padding:var(--margin-xl) 0;
  margin-top:calc((var(--margin-xl) * 2) + 20px)!important;
}


  .course-text-container {
    padding: 0 10px;
  }
  .course-text-container-2 {
    max-width: calc(100vw - var(--margin-xl) - 1rem);
  }

    .course-image-container-reverse,.course-image-container-reverse img{
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    transform: none;
  }

    .course-image-container-reverse {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 1;
    text-align: center; /* or right */
    margin-top: -60px;
  }

  .course-image-container-reverse img {
    position:static;
    display: block;
    width: 80%;
    max-width: 100%;
    height: auto;
    margin: 0 auto 0 0; /* 左寄せ */
  }

  /*講習日程*/

  .schedule-header {
    display: none;
  }

  .schedule-row {
    flex-direction: column;
  }

  .schedule-row > div {
    display: flex;
    padding: 0.75rem;
    border-right: none;
    border-top: 1px solid #ccc;
  }

  .schedule-row > div::before {
    content: attr(data-label);
    min-width: 5rem;
    font-weight: bold;
    color: var(--color-primary);
    margin-right: 1rem;
    align-self: center;
  }

  .schedule-row > div:nth-child(1)::before { content: "8月"; }
  .schedule-row > div:nth-child(2)::before { content: "9月"; }
  .schedule-row > div:nth-child(3)::before { content: "10月"; }

  .schedule-row > div {
    flex-direction: row;
  }

  .month {
    flex: 1;
  }

  .schedule-wrap{
    display: flex;
    flex:1;
    text-align: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap:var(--margin-m)
  }

  .schedule-wrap .flex-r-c{
  gap:0 !important;
  }

 .sp-none{
  display: none;
 }

  .venue > div {
    text-align: left;
  }
}


@media screen and (max-width: 400px) {
.mv-text-bottom {
  gap:5px;
}

#top-course{
 margin-top:calc((var(--margin-xl) * 2) + 20px)!important;
}
}