/*
rev. 2025-01-23
copyright ©North Pacific Bank,LTD. All rights reserved. 2025
*/
@charset "UTF-8";

/* フロートパーツのスタイル */
#cookieConsent {
  font-family: Noto Sans JP;
  src: local("Noto Sans JP");
  width: 100%;
  background: #363636;
  box-shadow: #818181 0 0 8px 2px;
  background-color: #f7f7f7;
  color: #2a2a2a;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10000;
}

#cookieConsent-inner {
  max-width: 1200px; /* 最大幅 */
  width: 100%; 
  margin: 0 auto; /* 水平中央に配置 */
  padding:48px 0px; /* 上下左右の余白 */
  display: flex;
  justify-content: space-between; /* テキストとボタン横並び */
  align-items: center;
}

#cookieConsent-inner p {
  max-width: 1000px; /* 最大幅 */
  margin: 0;
  text-align: left;
  word-wrap: break-word; /* テキスト折り返す */
  white-space: normal; /* 折り返し有効 */
  flex-grow: 1;
}
#cookieConsent-inner a {
  color: #014998;
  text-decoration: underline;
  text-decoration-color: currentcolor;
  transition: text-decoration-color 300ms;
  display: inline;
}
#cookieConsent-inner a:hover {
  text-decoration-color: transparent;
}

/* OKボタンのスタイル */
#cookieConsent-inner #optinBtn {
  background-color: #014998;
  color: white;
  border: 2px solid #014998;
  cursor: pointer;
  padding: 10px 0px;
  margin-right: 10px;
  border-radius: 5px;
  min-width: 80px; /* ボタンの幅を最低限確保 */
}

#cookieConsent-inner #optinBtn:hover {
  background-color: #007DB8;
  border: 2px solid #007DB8;
}

/* 閉じるボタンのスタイル */
#cookieConsent-inner #closeBtn {
  background-color: #fff;
  border: 2px solid #666666;
  color: #000000;
  cursor: pointer;
  padding: 10px 0px;
  border-radius: 5px;
  min-width: 80px; /* ボタンの幅を最低限確保 */
}

#cookieConsent-inner #closeBtn:hover {
  background-color: #fff;
}

/* スマホ表示時 (画面幅が769px以下の場合) */
@media (max-width: 769px) {
  #cookieConsent-inner {
    padding: 2rem 1.6rem; /* 上下左右の余白 */
    flex-direction: column; /* テキストとボタン縦並び */
    text-align: center;
    gap: 15px; /* テキストとボタン間 */
  }
  
  /* cookieConsentDesc のスタイル */
  #cookieConsentDesc {
    max-width: 100%;
    line-height: 1.8;
  }
  
  /* ボタングループを調整 */
  #cookieConsent-inner > div {
    display: flex; /* 横並び */
    justify-content: center; /* 中央揃え */
    gap: 15px; /* ボタン間の間隔 */
  }

  #cookieConsent-inner p {
    font-size: 14px;
    line-height: 1.6;
    padding: 0px 2px; /* 上下左右の余白 */
  }

  #cookieConsent-inner button {
    width: auto; /* ボタンの幅 */
    margin-top: 8px; /* ボタン間の余白 */
    font-size: 14px;
  }

  /* OKボタンのスタイル */
  #cookieConsent-inner #optinBtn {
    padding: 8px 30px;
    min-width: calc(100% / 2);
  }

  /* 閉じるボタンのスタイル */
  #cookieConsent-inner #closeBtn {
    padding: 8px 30px;
    min-width: calc(100% / 2);
  }
}


#cookieConsent-inner2 {
  max-width: 1200px; /* 最大幅 */
  width: 100%; 
  margin: 0 auto; /* 水平中央に配置 */
  padding: 48px 0px; /* 上下左右の余白 */
  display: flex;
  justify-content: space-between; /* テキストとボタン横並び */
  align-items: center;
}

#cookieConsent-inner2 p {
  max-width: 1000px; /* 最大幅 */
  margin: 0;
  font-size: 16px;
  line-height: 1.6;

  text-align: left;
  word-wrap: break-word; /* テキスト折り返す */
  white-space: normal; /* 折り返し有効 */
  flex-grow: 1;
}
#cookieConsent-inner2 a {
  color: #014998;
  text-decoration: underline;
  text-decoration-color: currentcolor;
  transition: text-decoration-color 300ms;
  display: inline;
}
#cookieConsent-inner2 a:hover {
  text-decoration-color: transparent;
}

#cookieConsent-inner2 button {
  font-size: 16px;
}

/* OKボタンのスタイル */
#cookieConsent-inner2 #optinBtn {
  background-color: #014998;
  color: white;
  border: 2px solid #014998;
  cursor: pointer;
  padding: 10px 0px;
  margin-right: 10px;
  border-radius: 5px;
  min-width: 80px; /* ボタンの幅を最低限確保 */
}

#cookieConsent-inner2 #optinBtn:hover {
  background-color: #007DB8;
  border: 2px solid #007DB8;
}

/* 閉じるボタンのスタイル */
#cookieConsent-inner2 #closeBtn {
  background-color: #fff;
  border: 2px solid #666666;
  color: #000000;
  cursor: pointer;
  padding: 10px 0px;
  border-radius: 5px;
  min-width: 80px; /* ボタンの幅を最低限確保 */
}

#cookieConsent-inner2 #closeBtn:hover {
  background-color: #fff;
}

/* スマホ表示時 (画面幅が769px以下の場合) */
@media (max-width: 769px) {
  #cookieConsent-inner2 {
    padding: 2rem 1.6rem; /* 上下左右の余白 */
    flex-direction: column; /* テキストとボタン縦並び */
    text-align: center;
    gap: 15px; /* テキストとボタン間 */
  }
  
  /* cookieConsentDesc のスタイル */
  #cookieConsentDesc {
    max-width: 100%;
    line-height: 1.8;
  }
  
  /* ボタングループを調整 */
  #cookieConsent-inner2 > div {
    display: flex; /* 横並び */
    justify-content: center; /* 中央揃え */
    gap: 15px; /* ボタン間の間隔 */
  }

  #cookieConsent-inner2 p {
    font-size: 14px;
    line-height: 1.6;
    padding: 0px 2px; /* 上下左右の余白 */
  }

  #cookieConsent-inner2 button {
    width: auto; /* ボタンの幅 */
    margin-top: 8px; /* ボタン間の余白 */
    font-size: 14px;
  }

  /* OKボタンのスタイル */
  #cookieConsent-inner2 #optinBtn {
    padding: 8px 30px;
    min-width: calc(100% / 2);
  }

  /* 閉じるボタンのスタイル */
  #cookieConsent-inner2 #closeBtn {
    padding: 8px 30px;
    min-width: calc(100% / 2);
  }
}