@charset "UTF-8";

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
  font-size: 2rem;
  line-height: 1.6;
  color: #222;

  @media (min-width: 768px) and (max-width: 1024px) {
    font-size: 1.8rem;
  }
  @media (max-width: 767px) {
    font-size: 1.6rem;
  }
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
a {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}
a:hover {
  opacity: 0.6;
}
p {
  line-height: 2;
  word-break: break-word;
}
input,
textarea,
select {
  border: 1px solid #ccc;
}


/* ============================================
  レイアウト系
=============================================*/
.inner {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;

  @media (max-width: 1024px) {
    width: 92%;
  }
}

.sec {
  margin-top: 10%;

  &.head {
    margin-top: 5%;
  }

  @media (max-width: 767px) {
    margin-top: 13%;
  }
}

.lower {
  padding-top: 8rem;
}

.content {
  padding-top: 6rem;

  &.head {
    padding-top: 4%;
  }

  @media (max-width: 767px) {
    padding: 6rem 0;

    &.head {
      padding-top: 10%;
    }
  }
}


/* ============================================
  ユーティリティ
=============================================*/
.block  { display: block; }
.inline { display: inline; }
.ib     { display: inline-block; }
.none   { display: none; }

/* PCのみ */
.pc_only {
  display: block;

  @media (max-width: 1024px) {
    display: none;
  }
}

/* タブレットのみ */
.tab_only {
  display: none;

  @media (min-width: 768px) and (max-width: 1024px) {
    display: block;
  }
}

/* スマホのみ */
.sp_only {
  display: none;

  @media (max-width: 767px) {
    display: block;
  }
}

/* PC + タブレット */
.pc_tab {
  display: block;

  @media (max-width: 767px) {
    display: none;
  }
}

/* タブレット + スマホ */
.tab_sp {
  display: none;

  @media (max-width: 1024px) {
    display: block;
  }
}

/* PC + スマホ */
.pc_sp {
  display: block;

  @media (min-width: 768px) and (max-width: 1024px) {
    display: none;
  }
}


/* ============================================
  リスト・グリッド
=============================================*/
/* -------------------------------
  Flex Layout
------------------------------- */
.flex {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.6rem, 2vw, 4rem);
}

.flex_col2 > * { width: calc((100% - 4%) / 2); }
.flex_col3 > * { width: calc((100% - 8%) / 3); }
.flex_col4 > * { width: calc((100% - 12%) / 4); }

@media (max-width: 767px) {
  .flex > * {
    width: 100%;
  }

  /* 2カラムの場合追加 */
  .sp_flex_col2 > * {
    width: calc((100% - 4%) / 2);
  }

  /* 3カラムの場合追加 */
  .sp_flex_col3 > * {
    width: calc((100% - 8%) / 3);
  }

  /* gap調整 */
  .flex { gap: 6%; }
  .sp_flex_gap_sm { gap: 2%; }
  .sp_flex_gap_md { gap: 4%; }
}

/* -------------------------------
  Grid Layout
------------------------------- */
.grid {
  display: grid;
  gap: 4%;
}

.grid_col2 { grid-template-columns: repeat(2, 1fr); }
.grid_col3 { grid-template-columns: repeat(3, 1fr); }
.grid_col4 { grid-template-columns: repeat(4, 1fr); }


@media (max-width: 767px) {
  .grid {
    grid-template-columns: 1fr;
  }

  /* 2カラムの場合追加 */
  .sp_grid_col2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 3カラムの場合追加 */
  .sp_grid_col3 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* gap調整 */
  .grid { gap: 6%; }
  .sp_grid_gap_sm { gap: 2%; }
  .sp_grid_gap_md { gap: 4%; }
}

/* ============================================
  フォント
=============================================*/
.fw_regular { font-weight: 400; }
.fw_medium  { font-weight: 500; }
.fw_bold    { font-weight: 700; }
.fw_black   { font-weight: 900; }


/* ============================================
  テキスト
=============================================*/
.tac { text-align: center; }
.tal { text-align: left; }
.tar { text-align: right; }

.txt_link {
  font-weight: bold;
  text-decoration: underline;
}


/* ============================================
  余白
=============================================*/
/* -------------------------------
  PC用
------------------------------- */
@media (min-width: 1025px) {
  :root {
    --space-sm: 0.8rem;
    --space-md: 1.6rem;
    --space-lg: 2.4rem;
  }
  /* 上 */
  .pc-mt-sm { margin-top: var(--space-sm); }
  .pc-mt-md { margin-top: var(--space-md); }
  .pc-mt-lg { margin-top: var(--space-lg); }
  /* 下 */
  .pc-mb-sm { margin-bottom: var(--space-sm); }
  .pc-mb-md { margin-bottom: var(--space-md); }
  .pc-mb-lg { margin-bottom: var(--space-lg); }
  /* 左 */
  .pc-ml-sm { margin-left: var(--space-sm); }
  .pc-ml-md { margin-left: var(--space-md); }
  .pc-ml-lg { margin-left: var(--space-lg); }
  /* 右 */
  .pc-mr-sm { margin-right: var(--space-sm); }
  .pc-mr-md { margin-right: var(--space-md); }
  .pc-mr-lg { margin-right: var(--space-lg); }
  /* 上下 */
  .pc-my-sm { 
    margin-top: var(--space-sm); 
    margin-bottom: var(--space-sm); 
  }
  .pc-my-md { 
    margin-top: var(--space-md); 
    margin-bottom: var(--space-md); 
  }
  .pc-my-lg { 
    margin-top: var(--space-lg); 
    margin-bottom: var(--space-lg); 
  }
  /* 左右 */
  .pc-mx-sm { 
    margin-left: var(--space-sm); 
    margin-right: var(--space-sm); 
  }
  .pc-mx-md { 
    margin-left: var(--space-md); 
    margin-right: var(--space-md); 
  }
  .pc-mx-lg { 
    margin-left: var(--space-lg); 
    margin-right: var(--space-lg); 
  }
  /* auto */
  .pc-m-auto { 
    margin-top: auto; 
    margin-bottom: auto; 
    margin-left: auto; 
    margin-right: auto; 
  }
  .pc-my-auto { 
    margin-top: auto; 
    margin-bottom: auto; 
  }
  .pc-mx-auto { 
    margin-left: auto; 
    margin-right: auto; 
  }
}

/* -------------------------------
  タブレット用
------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --space-sm: 0.8rem;
    --space-md: 1.2rem;
    --space-lg: 1.8rem;
  }
  /* 上 */
  .tb-mt-sm { margin-top: var(--space-sm); }
  .tb-mt-md { margin-top: var(--space-md); }
  .tb-mt-lg { margin-top: var(--space-lg); }
  /* 下 */
  .tb-mb-sm { margin-bottom: var(--space-sm); }
  .tb-mb-md { margin-bottom: var(--space-md); }
  .tb-mb-lg { margin-bottom: var(--space-lg); }
  /* 左 */
  .tb-ml-sm { margin-left: var(--space-sm); }
  .tb-ml-md { margin-left: var(--space-md); }
  .tb-ml-lg { margin-left: var(--space-lg); }
  /* 右 */
  .tb-mr-sm { margin-right: var(--space-sm); }
  .tb-mr-md { margin-right: var(--space-md); }
  .tb-mr-lg { margin-right: var(--space-lg); }
  /* 上下 */
  .tb-my-sm { 
    margin-top: var(--space-sm); 
    margin-bottom: var(--space-sm); 
  }
  .tb-my-md { 
    margin-top: var(--space-md); 
    margin-bottom: var(--space-md); 
  }
  .tb-my-lg { 
    margin-top: var(--space-lg); 
    margin-bottom: var(--space-lg); 
  }
  /* 左右 */
  .tb-mx-sm { 
    margin-left: var(--space-sm); 
    margin-right: var(--space-sm); 
  }
  .tb-mx-md { 
    margin-left: var(--space-md); 
    margin-right: var(--space-md); 
  }
  .tb-mx-lg { 
    margin-left: var(--space-lg); 
    margin-right: var(--space-lg); 
  }
  /* auto */
  .tb-m-auto { 
    margin-top: auto; 
    margin-bottom: auto; 
    margin-left: auto; 
    margin-right: auto; 
  }
  .tb-my-auto { 
    margin-top: auto; 
    margin-bottom: auto; 
  }
  .tb-mx-auto { 
    margin-left: auto; 
    margin-right: auto; 
  }
}

/* -------------------------------
  SP用
------------------------------- */
@media (max-width: 767px) {
  :root {
    --space-sm: 0.6rem;
    --space-md: 1rem;
    --space-lg: 1.6rem;
  }
  /* 上 */
  .sp-mt-sm { margin-top: var(--space-sm); }
  .sp-mt-md { margin-top: var(--space-md); }
  .sp-mt-lg { margin-top: var(--space-lg); }
  /* 下 */
  .sp-mb-sm { margin-bottom: var(--space-sm); }
  .sp-mb-md { margin-bottom: var(--space-md); }
  .sp-mb-lg { margin-bottom: var(--space-lg); }
  /* 左 */
  .sp-ml-sm { margin-left: var(--space-sm); }
  .sp-ml-md { margin-left: var(--space-md); }
  .sp-ml-lg { margin-left: var(--space-lg); }
  /* 右 */
  .sp-mr-sm { margin-right: var(--space-sm); }
  .sp-mr-md { margin-right: var(--space-md); }
  .sp-mr-lg { margin-right: var(--space-lg); }
  /* 上下 */
  .sp-my-sm { 
    margin-top: var(--space-sm); 
    margin-bottom: var(--space-sm); 
  }
  .sp-my-md { 
    margin-top: var(--space-md); 
    margin-bottom: var(--space-md); 
  }
  .sp-my-lg { 
    margin-top: var(--space-lg); 
    margin-bottom: var(--space-lg); 
  }
  /* 左右 */
  .sp-mx-sm { 
    margin-left: var(--space-sm); 
    margin-right: var(--space-sm); 
  }
  .sp-mx-md { 
    margin-left: var(--space-md); 
    margin-right: var(--space-md); 
  }
  .sp-mx-lg { 
    margin-left: var(--space-lg); 
    margin-right: var(--space-lg); 
  }
  /* auto */
  .sp-m-auto { 
    margin-top: auto; 
    margin-bottom: auto; 
    margin-left: auto; 
    margin-right: auto; 
  }
  .sp-my-auto { 
    margin-top: auto; 
    margin-bottom: auto; 
  }
  .sp-mx-auto { 
    margin-left: auto; 
    margin-right: auto; 
  }
}


/* ============================================
  コンポーネント
=============================================*/
/* タイトル */
.cmn_title {
  font-size: 3.2rem;
  font-weight: 300;
  font-family: 'Roboto';
  color: #00B0F0;
  line-height: 1;

  @media (max-width: 767px) {
    font-size: 2.4rem;
  }
}
.cmn_title_sub {
  font-size: 4rem;
  font-weight: bold;
  line-height: 1.6;
  margin-top: 0.8rem;

  @media (max-width: 767px) {
    font-size: 3.4rem;
  }
}

/* 装飾用罫線 */
.border {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background: #595959;
  }

  &.lower {
    padding-top: 6rem;
  }

}

/* ボタン */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  cursor: pointer;
}

/* outline */
.btn_outline {
  color: #00B0F0;
  border: solid 2px #00B0F0;
  background-color: #FFF;
  padding: 2.5rem 0 3.3rem;
  font-size: 2.4rem;
  max-width: 400px;
  width: 100%;

  @media (max-width: 767px) {
    padding: 1.9rem 0 2.2rem;
    font-size: 2rem;
    width: 100%;
  }
}

.btn_outline:hover {
  background: #00B0F0;
  color: #fff;
  opacity: 1;
}

/* primary */
.btn_primary {
  border: solid 2px #00B0F0;
  background-color: #00B0F0;
  color: #FFF;
  padding: 2.9rem 0 3.3rem;
  font-size: 2.8rem;
  max-width: 400px;
  width: 100%;

  @media (max-width: 767px) {
    font-size: 2.4rem;
    padding: 2.5rem 0 2.7rem;
  }
}

.btn_primary:hover {
  background-color: #FFF;
  color: #00B0F0;
  opacity: 1;
}

/* サイズ */
.btn_sm {
  padding: 0.6em 1.2em;
  font-size: 1.2rem;
}

.btn_lg {
  padding: 1em 2em;
  font-size: 1.6rem;
}

/* 横幅制御 */
.btn_block {
  width: 100%;
}

/* 無効状態 */
.btn:disabled,
.btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}


/* ============================================
  ヘッダー
=============================================*/
header {
  width: 100%;
  z-index: 100;
  position: sticky;
  top: 0;
  left: 0;
  background-color: #FFF;
  font-size: 1.8rem;
  line-height: 1.2;

  @media (min-width: 768px) and (max-width: 1024px) {
    font-size: 1.6rem;
  }
  
  &::after { /* スクロールで下線 */
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #ddd;
    opacity: 0;
    transition: opacity 0.3s;
  }
  &.is-scrolled::after {
    opacity: 1;
  }
}

.header_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header_logo {
  margin-left: 3rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 87px;
  width: 245px;
  max-width: 100%;

  @media (min-width: 768px) and (max-width: 1024px) {
    width: clamp(100px, 20vw, 245px);
    margin-left: clamp(10px, 2vw, 30px);
  }
  @media (max-width: 767px) {
    margin-left: 1.5rem;
    height: 60px;
    width: clamp(130px, 40vw, 200px);
  }
}

.gnav_list {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;

  @media (max-width: 767px) {
    flex-direction: column;
    justify-content: center;
    width: 90%;
    margin: 0 auto;
  }
}

.gnav_list_link {
  display: block;
  padding: 3.1rem clamp(1rem, 1.5vw, 2.5rem);
  border: 2px solid transparent;

  @media (min-width: 768px) and (max-width: 1024px) {
    padding: 3.1rem clamp(0.6rem, 1.2vw, 1.6rem);
  }
  @media (max-width: 767px) {
    padding: 2.5rem 0 2.7rem;
  }
    
  &.contact_btn {
    border: solid 2px #00B0F0;
    background-color: #00B0F0;
    color: #FFF;
    min-width: clamp(160px, 20vw, 240px);
    text-align: center;
    font-weight: bold;

    @media (min-width: 768px) and (max-width: 1024px) {
      min-width: clamp(120px, 18vw, 200px);
    }
    @media (max-width: 767px) {
      min-width: 300px;
      width: 100%;
      padding: 2.5rem 0 2.7rem;
      margin-top: 3.2rem;
    }
    &:hover {
      background-color: #FFF;
      color: #00B0F0;
      opacity: 1;
    }
  }
}

.gnav_list_item:nth-child(4) .gnav_list_link { /* 会社概要 */
  padding: 3.1rem clamp(2rem, 5.5vw, 8rem) 3.1rem clamp(1rem, 1.5vw, 2.5rem);

  @media (min-width: 768px) and (max-width: 1024px) {
    padding: 3.1rem clamp(1.6rem, 4vw, 5rem) 3.1rem clamp(0.6rem, 1.2vw, 1.6rem);
  }
  @media (max-width: 767px) {
    padding: 2.5rem 0 2.7rem;
  }
}



/* -------------------------------
  SP nav
------------------------------- */
.nav-wrap.open {
  display: block;
}
.nav-wrap.close {
  display: none;
}

@media (max-width: 767px) {
  .nav-wrap {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.85);
    width: 100%;
    height: 100%;
    padding-top: 0;
    padding-right: 0;
  }

  .nav-wrap .nav {
    height: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .nav-button {
    display: block;
    cursor: pointer;
    margin-left: auto;
    z-index: 20;
    position: relative;
    right: 0;
    top: 0;
    width: 60px;
    height: 60px;
    background-color: #00B0F0;
  }

  .nav-button::after {
    display: block;
    position: absolute;
    bottom: 3px;
    left: 11px;
    content: "Menu";
    font-size: 1.6rem;
    font-family: "Roboto";
    font-weight: 400;
    color: #fff;
    letter-spacing: 0;
  }

  .nav-button.active::after {
    left: 11px;
    content: "Close";
  }

  .nav-button,
  .nav-button span {
    display: inline-block;
    -webkit-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
    box-sizing: border-box;
  }

  .nav-button span {
    position: absolute;
    left: 15px;
    width: 32px;
    height: 1px;
    background-color: #fff;
  }

  .nav-button span:nth-of-type(1) {
    top: 13px;
  }
  .nav-button span:nth-of-type(2) {
    top: 23px;
  }
  .nav-button span:nth-of-type(3) {
    top: 33px;
  }

  .nav-button.active span:nth-of-type(1) {
    -webkit-transform: translateY(10px) rotate(-45deg);
    -ms-transform: translateY(10px) rotate(-45deg);
    transform: translateY(10px) rotate(-45deg);
  }

  .nav-button.active span:nth-of-type(2) {
    opacity: 0;
  }

  .nav-button.active span:nth-of-type(3) {
    -webkit-transform: translateY(-10px) rotate(45deg);
    -ms-transform: translateY(-10px) rotate(45deg);
    transform: translateY(-10px) rotate(45deg);
  }

}


/* ============================================
  フッター
=============================================*/
footer {
  width: 100%;
  padding: 14rem 0 2.8rem;
  overflow: hidden;

  @media (max-width: 767px) {
    padding: 4rem 0 2.8rem;
  }
}

/* #page_top {
  position: fixed;
  z-index: 50;
  right: 5%;
  bottom: 0;

  a {
    position: relative;
    display: block;
    width: 60px;
    height: 130px;
    background: #0F5CA8;
    font-size: 1.4rem;
    letter-spacing: 0.08em;

    @media (width <= 767px) {
      width: 65px;
      height: 140px;
      font-size: 1.6rem;
    }

    &::after {
      position: absolute;
      left: 50%;
      bottom: 15%;
      transform: translateX(-50%);
      content: "PAGE TOP";
      writing-mode: vertical-rl;

      @media (width <= 767px) {
        bottom: 12%;
      }
    }
    &::before {
      position: absolute;
      top: 16px;
      left: 0;
      right: 0;
      margin: 0 auto;
      display: block;
      content: "";
      width: 12px;
      height: 12px;
      border-top: 2px solid #fff;
      border-left: 2px solid #fff;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      -webkit-transition: all 0.2s;
      -ms-transition: all 0.2s;
      transition: all 0.2s;

      @media (width <= 767px) {

      }
    }
    &:hover {
      opacity: 1;
      background: linear-gradient(#fff500 0%, #cec601 100%);
      color: #222;

      &::before {
        border-top: 2px solid #000;
        border-left: 2px solid #000;
      }
    }
  }
} */

.f_wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
  column-gap: clamp(2.4rem, 4vw, 7.2rem);

  @media (max-width: 767px) {
    display: block;
    padding-left: 5%;
  }
}

.f-company {
  margin: 3.4rem 0 0 clamp(3rem, 4vw, 8rem);
  flex-shrink: 0;

  @media (max-width: 767px) {
    margin: 0 0 6rem 0;
    text-align: center;
    display: flex;
    flex-direction: column;
  }

  .f-logo {
    display: block;
    margin-bottom: 2rem;

    @media (max-width: 767px) {
      order: 2;
      margin-bottom: 2.8rem;
    }
  
    img {
      max-width: 285px;
      width: 100%;

      @media (max-width: 767px) {
        max-width: 180px;
      }
    }
  }

  @media (max-width: 767px) {
    address {
      order: 3;
    }
  }

  address p {
    margin: 0.4rem 0;
    font-style: normal;

    @media (max-width: 767px) {
      margin: 0.3rem 0 0.1rem;
      text-align-last: left;
    }
  }

  .f_company_catch {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1.6;
    margin: 2.5rem 0 7.9rem;

    @media (max-width: 767px) {
      font-size: 1.9rem;
      margin: 1.9rem 0 3.5rem;
      order: 1;
    }
  }

  .f-company_name {
    font-size: 2.6rem;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 1.6rem;

    @media (max-width: 767px) {
      font-size: 1.8rem;
      margin-bottom: 0;
    }
  }

  .f-company_add {
    line-height: 1.5;
    margin-top: 0.8rem;

    @media (max-width: 767px) {
      order: 4;
    }
  }
}

.f-bg_img {
  width: 100%;
  height: 220px;
  background: url("/assets/img/footer_img.jpg") no-repeat center / cover;
  margin-bottom: 6.1rem;

  @media (max-width: 767px) {
    height: 100px;
    margin-bottom: 0;
  }
}

.f-sitemap {
  flex: 1;

  .f-sitemap_list {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-auto-rows: auto;
    justify-content: center;
    gap: 1.7rem 8rem;
    padding-top: 3.5rem;
    text-align: center;

    @media (min-width: 768px) and (max-width: 1024px) {
      grid-template-columns: repeat(2, auto);
      gap: 1.7rem 4rem;
    }
    @media (max-width: 767px) {
      display: block;
      text-align: left;
    }
  }

  @media (max-width: 767px) {
    .f-sitemap_list_item {
      padding: 1rem 0;
    }
  }

}

.footer_btm {
  width: 100%;
  margin-top: 4rem;
  text-align: right;

  @media (max-width: 767px) {
    margin-top: 8.7rem;
    text-align: center;
  }
}

.footer_copy {
  font-size: 1.6rem;
  margin-right: 4.6rem;
  color: #949494;

  @media (min-width: 768px) and (max-width: 1024px) {
    font-size: 1.4rem;
  }
  @media (max-width: 767px) {
    font-size: 1.3rem;
  }
}


/* ============================================
  下層ページ共通
=============================================*/
/* 青背景タイトル */
/* .page_title {
  padding: 186px 0 119px;
  background: url("/assets/img/logo_bg.png") no-repeat right 12vw bottom #105CA8;
  background-size: 608px;
  position: relative;
  margin-bottom: 6%;

  @media (max-width: 1024px) {
    padding: 17% 0 10%;
  }
  @media (width <= 767px) {
    padding: 125px 0 40px;
    background: url("/assets/img/logo_bg.png") no-repeat right 10vw bottom #105CA8;
    background-size: 175px;
    margin-bottom: 10%;
  }

  .bg_img {
    position: absolute;
    right: 5%;
    top: 0;
    z-index: 1;

    @media (min-width: 768px) and (max-width: 1024px) {
      right: -16%;
      top: -15%;
    }
    @media (max-width: 1024px) {
      text-align: right;
    }
    @media (width <= 767px) {
      right: 0;
    }

    img {
      max-width: 460px;
      width: 100%;

      @media (min-width: 768px) and (max-width: 1024px) {
        width: 90%;
      }

      @media (width <= 767px) {
        width: 50%;
      }
    }
  }
}
.inner {
  position: relative;
  width: 90%;
  max-width: 1600px;
  margin: 0 auto;
  z-index: 2;

  @media (max-width: 1024px) {
    max-width: 90%;
  }
} */


/* 青背景タイトル下の見出し */
/* .intro {
  h2 {
    font-size: 3.4rem;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 5%;

    @media (min-width: 768px) and (max-width: 1024px) {
      margin-bottom: 5%;
    }

    @media (width <= 767px) {
      font-size: 2.4rem;
    }
  }
} */

/* ============================================
  Animation
=============================================*/
/* -------------------------------
  Animation Fade
------------------------------- */
.fadeUp,
.topfade {
  animation-name: fadeUpAnime;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger,
.topfadeTrigger {
  opacity: 0;
}

/* -------------------------------
  Animation Mask
------------------------------- */
@keyframes animate-panel {
  0% {
    transform-origin: left top;
    transform: scale(0, 1);
  }
  49% {
    transform-origin: left top;
    transform: scale(1, 1);
  }
  50% {
    transform-origin: right top;
    transform: scale(1, 1);
  }
  100% {
    transform-origin: right top;
    transform: scale(0, 1);
  }
}
@keyframes animate-content {
  0% {
    visibility: hidden;
  }
  49% {
    visibility: hidden;
  }
  50% {
    visibility: visible;
  }
  100% {
    visibility: visible;
  }
}
.mask_wrap {
  display: block;
  margin: 0 auto;
}
.mask_wrap.mask_wrap_inline {
  display: block;
}
.mask_wrap .mask_inner {
  position: relative;
  visibility: hidden;
}
.mask_wrap .mask_inner::after {
  content: "";
  background: #00B0F0;
  width: 640px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: left top;
  transform: scale(0, 1);
  transition: all 0.3s ease 0s;
  visibility: visible;

  @media (max-width: 767px) {
    height: 100%;
  }
}
.mask_wrap .mask_inner.start {
  animation-name: animate-content;
  animation-duration: 1.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.mask_wrap .mask_inner.start::after {
  animation-name: animate-panel;
  animation-duration: 1.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop,
  .mask_wrap .mask_inner {
    visibility: visible;
  }
}

/* -------------------------------
  Animation Fade Order
------------------------------- */

.order_wrap {
}
.order {
  opacity: 0;
  transform: translateY(100px);
  transition: all 2s cubic-bezier(0,1.2,1.0,1.0);
}
.order.ready {
  opacity: 1;
  transform: translateY(0px);
}

/* -------------------------------
  Animation Text Wipe (背景色なし・左から右へ出現)
------------------------------- */
.textWipeTrigger {
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  opacity: 0; 
  display: inline-block; 
}

/* スクロールして .wipe-start が付いた時の設定 */
.textWipeTrigger.wipe-start {
  opacity: 1;
  animation-name: textWipeAnime;
  animation-duration: 1.0s; /* アニメーションの秒数 */
  animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); /* 滑らかな動き */
  animation-fill-mode: forwards; /* アニメーション後の状態を保持 */
}

/* 2行目を遅らせるための設定 */
.textWipeTrigger.wipe-start.delay-time {
  animation-delay: 0.6s;
}

/* アニメーションの動き（左から右へ切り抜き範囲を広げる） */
@keyframes textWipeAnime {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}