@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
.wrap{
  height: 100vh;
  background: linear-gradient(-45deg, rgba(1, 24, 26, 0.4),rgba(17, 66, 99, 0.6));
  }

  .blinking{
    animation: flash 3s linear infinite;
  }
  .blinking-f{
    animation: flash 0.3s linear infinite;
  }

  @keyframes flash {
    0%,100% {
      opacity: 1;
    }

    50% {
      opacity: 0;
    }
  }

  .wave{
  position:relative;
  height:200px;/*何も表示されない場合は各波の親要素に高さを持たせましょう。*/
  }
  canvas{
  position: absolute;
  bottom: 0;
  left:0;
  width: 100%;
  }

  .your-video-section::before,
  .your-video-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 150px;  /* この値を変更してぼかしの高さを調整 */
    z-index: 20;
  }

  .your-video-section::before {
    top: 0;
    background: linear-gradient(to bottom, white, rgba(255,255,255,0));
  }

  .your-video-section::after {
    bottom: 0;
    background: linear-gradient(to top, white, rgba(255,255,255,0));
  }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

  html {
    height: 100%;
  }

  body {
    height: 100%;
    margin: 0;
  }
  /*親のheight100%を引き継ぐ */
  .c_container {
    height: 90%;
  }

  /*チャート*/
  .ct-series-a .ct-bar, .ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-slice-donut {
    stroke: rgb(107 114 128);
  }

  /*海外安全.jpニュースサイドパネル*/
  .kaigaianzen_side_panel a {
    text-decoration: underline;
  }

  /* チュートリアル完了画面のデコードエフェクト */
  .slide-in-left {
    font-family: 'Courier New', monospace;
    opacity: 0;
  }

  .slide-in-left.decoding {
    opacity: 1;
  }

  .decode-char {
    display: inline-block;
    opacity: 0.3;
    color: #10b981;
  }

  .decode-char.decoding {
    opacity: 1;
    color: #6b7280;
    animation: charFlicker 0.1s ease-in-out;
  }

  .decode-char.decoded {
    opacity: 1;
    color: #6b7280;
    animation: none;
  }

  @keyframes charFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }

  /* シンプルなフェードインエフェクト */
  .fade-in-text {
    opacity: 0;
    animation: gentleFadeIn 2s ease-out both;
  }

  @keyframes gentleFadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  /* Turbo Progress Bar カスタマイズ */
  .turbo-progress-bar {
    height: 4px !important;
    background: linear-gradient(90deg, #1f2937 0%, #374151 50%, #1f2937 100%) !important;
    box-shadow: 0 0 10px rgba(31, 41, 55, 0.5) !important;
    z-index: 9999 !important;
  }