@charset "UTF-8";
/* CSS Document */

/* pc -------------------------------------------------------------------------------------*/
@media screen and (min-width: 641px) {

/* ▼ 赤部分（動画エリア） ------------------------------------ */
.main_image {
    position: relative;
    width: 100%;
    height: 100vh;        /* 常にウィンドウ上下左右100% */
    overflow: hidden;
}

/* 動画をフルスクリーン表示 */
.bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 1;
}

/* ▼ 矢印 ------------------------------------ */
.arrow {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    z-index: 2;
    font-weight: bold;
    width: 70px;
    height: auto;
}


/*--------------------------------------------------------------------------------*/

.sub_image {
width: 100%;
/*height: 968px;*/
overflow: hidden;
position: relative;
margin-bottom: 60px;
}

.sub_image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center; /* ★ 常に中央 */
}

/*方針部分ここから*/
.catch {
text-align: center;
  position: absolute;
  top:78%;
  left: 50%;            /* 親の左から 50% の位置へ */
  transform: translate(-50%, -50%); /* 自身の幅と高さの半分だけ戻す */
}

.catch .txt {
font-size: 16px!important;
font-weight: 700;
line-height: 2em;
}

.catch p {
margin-bottom: 1.2em;
}

/*--------------------------------------------------------------------------------*/

    /* 全体（1040px中央） */
    .container{
      max-width: 1040px;
      margin: 0 auto;
      padding: 0 0 20px 0;
      box-sizing: border-box;
    }

    /* ===== ブロック（画像＋テキスト） ===== */
    .info-block_left,
    .info-block_right{
      margin: 0 0 50px;
      }

    /*左から右へ*/
    .info-block_left{
      /* アニメ初期状態 */
      opacity: 0;
      transform: translateX(-60px);
      transition: opacity 1.5s ease, transform 1.5s ease;
      will-change: opacity, transform;
    }
    
    /*右から左へ*/
    .info-block_right{
      /* アニメ初期状態 */
      opacity: 0;
      transform: translateX(60px);
      transition: opacity 1.5s ease, transform 1.5s ease;
      will-change: opacity, transform;
    }

    /* 表示状態 *//*左から右へ*/
    .info-block_left.is-inview,
    .info-block_right.is-inview
    {
      opacity: 1;
      transform: translateX(0);
    }

    /* 下：3列（左：見出し／中：本文／右：リンク） */
    .info-block__content{
      display: flex;
      align-items: center;
      gap: 28px;
      padding: 1em 0 0 0.5em;
      box-sizing: border-box;
    align-items: flex-start; /* ← 上揃えに変更 */
    }

    /* 左：大見出し */
    .info-block__title{
      flex: 0 0 205px;
      margin: 0;
      font-size: 36px;
      font-weight: 800;
      color: #2f6f90;
      line-height: 1;
      white-space: nowrap;
    }

    /* 中：本文 */
    .info-block__text{
      flex: 1 1 auto;
      line-height: 2.0;
      font-weight: 700; /* 画像の雰囲気に合わせて少し太め */
    }
    .info-block__text p{
      margin: 0;
    }

    /* 右：詳しくはこちら */
    .info-block__cta{
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color:#111;
      font-weight: 800;
      white-space: nowrap;
    }

.info-block__cta-wrap{
  display: flex;
  flex-direction: column;   /* ★上下2段 */
  gap: 6px;                 /* 行間（好みで調整） */
  align-items: flex-start;  /* 左揃え */
}

.info-block__cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
}

.link_1{
  display: inline-flex;       /* アイコン＋文字を横並び */
  align-items: center;
  gap: 0.4em;
  font-weight: 700;
  white-space: nowrap;
}

.link_2{
  width: 21px;                /* 見た目に合わせて調整OK */
  height: 21px;
  display: block;
/*  flex: 0 0 auto;*/
}

}



/* sp -------------------------------------------------------------------------------------*/
@media screen and (max-width: 640px) {

main {
	width: 100%!important;
    margin: 0 auto;
    padding: 0;
}

/* ▼ 赤部分（動画エリア） ------------------------------------ */
.main_image {
    margin: 0;
    padding: 0;
}

/* 動画をフルスクリーン表示 */
.bg-video {
display: block;/*インライン要素をブロック要素に*/
width: 100%;
}

/* ▼ 矢印 ------------------------------------ */
.arrow {
display: none;
}


/*--------------------------------------------------------------------------------*/

.sub_image {
width: 100%;
height: auto;
/*overflow: hidden;*/
position: relative;
    margin: 0 0 1.5em 0!important;
}

.sub_image img {
/*width: 100%;
height: 100%;
object-fit: cover;
object-position: center; /* ★ 常に中央 */
}

/*方針部分ここから*/
.catch {
width: 100%;
text-align: center;
  position: absolute;
  top:75%;
  left: 50%;            /* 親の左から 50% の位置へ */
  transform: translate(-50%, -50%); /* 自身の幅と高さの半分だけ戻す */
}

.catch .txt {
font-size: 90%!important;
font-weight: 700;
line-height: 1.8em;
}

.catch p {
margin-bottom: 1.2em;
}

/*--------------------------------------------------------------------------------*/

    /* 全体（1040px中央） */
    .container{
/*      max-width: 100%;*/
      margin: 0 auto;
      padding: 0 0 1em 0;
/*      box-sizing: border-box;*/
    }

    /* ===== ブロック（画像＋テキスト） ===== */
    .info-block_left,
    .info-block_right{
      margin: 0 0 4em;
      }

    /*左から右へ*/
    .info-block_left{
      /* アニメ初期状態 */
      opacity: 0;
/*      transform: translateX(-60px);*/
      transition: opacity 1.5s ease, transform 1.5s ease;
      will-change: opacity, transform;
    }
    
    /*右から左へ*/
    .info-block_right{
      /* アニメ初期状態 */
      opacity: 0;
/*      transform: translateX(60px);*/
      transition: opacity 1.5s ease, transform 1.5s ease;
      will-change: opacity, transform;
    }

    /* 表示状態 *//*左から右へ*/
    .info-block_left.is-inview,
    .info-block_right.is-inview
    {
      opacity: 1;
      transform: translateX(0);
    }

    /* 下：3列（左：見出し／中：本文／右：リンク） */
    .info-block__content{
      display: block;
/*      align-items: center;
      gap: 28px;*/
  padding: 0.5em 0 0 0.9em;
/*      padding: 1em 0 0 0.5em;*/
/*      box-sizing: border-box;
    align-items: flex-start; /* ← 上揃えに変更 */
    }

    /* 左：大見出し */
    .info-block__title{
/*      flex: 0 0 205px;*/
      margin: 0;
  font-size: 6.5vw;
  padding: 0 0 0.5em 0;
      font-weight: 800;
      color: #2f6f90;
      line-height: 1;
      white-space: nowrap;
    }

    /* 中：本文 */
    .info-block__text{
/*      flex: 1 1 auto;*/
  font-size: 90%;
  padding: 0 0 1em 1em;
      line-height: 1.8em;
      font-weight: 700; /* 画像の雰囲気に合わせて少し太め */
    }
    .info-block__text p{
      margin: 0;
    }

    /* 右：詳しくはこちら */
    .info-block__cta{
/*      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color:#111;
      font-weight: 800;
      white-space: nowrap;*/
    }

.info-block__cta-wrap{
  display: flex;
  flex-direction: column;   /* ★上下2段 */
  gap: 0.6em;                 /* 行間（好みで調整） */
  align-items: flex-start;  /* 左揃え */
}

.info-block__cta{
/*  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;*/
}

/*リンク*/
.link_1{
  display: inline-flex;       /* アイコン＋文字を横並び */
  align-items: center;
  gap: 0.4em;
  font-weight: 700;
  white-space: nowrap;
  padding-left: 0.2em;
  margin-left: 0.6em;
}

.link_2{
/*  width: 21px;                /* 見た目に合わせて調整OK */
  height: 1.6em;
  display: block;
/*  flex: 0 0 auto;*/
}

}