@charset "UTF-8";


/* --------------------------------------------------sub MV */


#mv,#mv-sub {
  position: relative;
  z-index:1;
}

.mv-bg{
  position: absolute;
  top: 0px;
  right: 0; /* 右寄せ */
  width: 68%; /* 親より少し大きくして右側だけ見せる */
  height: 100%;
  background-image: url("https://takken.oura-inc.co.jp/touroku/img/mv.png");
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;

  background-position: calc((50vw - 800px) * 0.5) center;
}

.mv-sub-bg {
  position: absolute;
  top: -40px;
  right: 0; /* 右寄せ */
  width: 70%; /* 親より少し大きくして右側だけ見せる */
  height: 100%;
  background-image: url("https://takken.oura-inc.co.jp/touroku/img/mv-sub.webp");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* Retina対応 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.mv-bg {
    background-image: url("https://takken.oura-inc.co.jp/touroku/img/mv.png");
}

  

  .mv-sub-bg {
    background-image: url("https://takken.oura-inc.co.jp/touroku/img/mv-sub.webp");
  }
}

/* MVコンテンツ */
.mv-sub-content,.mv-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: var(--color-white);
  margin-top:var(--margin-xs);
}

/* タイトル */
.mv-sub-title {
  line-height: 1.6;
  font-weight: 700;
  /* margin-top: 150px; */
}

.mv-sub-subtitle {
  font-size: var(--font-32);
  font-weight: 400;
}


/* -----パンくず----- */

#breadcrumb {
  padding: 0;
  color: var(--color-black-50);
}

.breadcrumb-inner {
  font-size: var(--font-12);
}

.breadcrumb-nav {
  display: inline-flex;     /* 横並び */
  flex-wrap: wrap;          /* 折り返しOK */
  gap: 0.3rem;              /* 要素間の余白 */
}

.breadcrumb-nav a {
  color: var(--color-black-50);
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumb-nav a:hover {
  color: var(--color-blue);
}

.breadcrumb-nav span {
  color: var(--color-dark);
  font-weight: 600;
}

/* スマホ対応 */

@media screen and (max-width: 1900px){
    #mv-sub {
    z-index:1;
  }
}


@media (max-width: 1700px) {

    .mv-bg{
    width:100%;
    height:99%;
    margin-top:0px;
    background-position: calc((50vw - 600px) * 0.5) center;

      background-size: 75% auto;   /* %指定 */
  background-position: right top;
  background-repeat: no-repeat;
  }

  }



/* 追加 */
@media screen and (max-width: 1000px){
.mv-bg{
    top:0;
  }

  .mv-sub-bg{
    top:0;
  }

  #detail .feature-left{
    display:none;
  }


  /* MV下の余白調整 */
  #registration .margin-xl,
  #about .margin-xl,
  #flow .margin-xl,
  #faq .margin-xl,
  #apply .margin-xl,
  #access .margin-xl{
margin-top:50px !important;
  }
}

/* SP対応 */

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

  .mv-sub-bg {
    width: 100%;           /* SPはさらに拡大して右側だけ見せる */
    background-position: 240px top;
    z-index:0;
    top:-50px;
  }

    .mv-sub-content{
    margin-top:var(--margin-xs);
  }

    .mv-sub-title {
    font-size: var(--font-40);
  }
  .mv-sub-subtitle {
    font-size: var(--font-18);
  }


  .sticky-grid {
    flex-direction: column;
  }

  .sticky-box {
    position: relative;
    top: auto;
  }

}

@media screen and (max-width: 500px) {
    .mv-bg {
    width: 100%;           /* SPはさらに拡大して右側だけ見せる */
    background-position: calc((50vw - 200px) * 0.5) center;
    height:44vh;
    margin-top:-20px;
    background-size: cover;
    
  }
  
    .mv-sub-bg {
    width: 150%;           /* SPはさらに拡大して右側だけ見せる */
    background-position: 180% center;
    margin-top:60px;
    display: none;
  }
}

/* 全体2カラム */
.sticky-grid {
  display: flex;
  gap: 2rem;
  margin-top: 3rem;
}


/* 左カラム */
.sticky-left {
  flex: 1;
}

.sticky-box {
  position: sticky;
  top: 120px; /* ヘッダー高さ分だけ調整 */
}

/* 右カラム */
.sticky-right {
  flex: 2;
}


@media screen and (max-width: 768px) {
#required-documents .g-table tr{
  display:flex;
  flex-wrap:wrap;
}

#required-documents .g-table th,
#required-documents .g-table td{
  width:50%;
}

#required-documents .g-table th{
  border-bottom:1px solid var(--color-primary);
  padding-bottom:1rem;
}
}


.video-flex {
  display: flex;
  flex-wrap: wrap; /* 折り返し許可 */
  gap: 16px;       /* 余白（任意） */
}

.video-wrapper {
  flex: 1 1 calc(50% - 16px); /* PCでは2列 */
  aspect-ratio: 4 / 3;        /* 比率を固定 */
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 768px) {
  .video-wrapper {
    flex: 1 1 100%; /* SPは1列 */
  }

  #detail .feature-left{
    display:none;
    
  }
  
  #detail {
  position: relative; /* これがないと z-index は無効 */
  z-index: 5;
}
}