/**
Theme Name: astra-child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/
/*========= 画面幅調整 =========*/
html, body {
  overflow-x: hidden;
  width: 100%;
}

/*========= グラデーション背景固定 =========*/
body {
  background: linear-gradient(to bottom,
  #F4F7F9 30%,
  #E0E8EF 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

/*========= 事業内容ページ Tab設定 =========*/
.service-tabs {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
}
.service-tab-button {
  padding: 10px 20px 5px 20px;
  margin-right: 6px;
  border: 1px solid #E6EAEC;
  border-radius: 999px;
  background: white;
  color: #E6EAEC;
  font-weight: bold;
  font-family: Josefin Sans; 
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}
.service-tab-button.active {
  background: linear-gradient(to bottom, #F4F7F9, #E0E8EF);
  font-weight: bold;
  color: #000;
  border: none;
}
.service-tab-content {
  display: none;
}
.service-tab-content.active {
  display: block;
}
.service-tab-title {
        font-weight: bold;
        font-size: 20px;
    }
    .service-tab-text {
        font-size:16px;
    }

/*========= 会社概要ページ テーブル設定 =========*/
    .company-info {
        width: 100%;
        border-collapse: collapse;  /*テーブル風ではないけど一応書いてもOK */
    }
    
    .info-row {
        display: flex;
        padding: 12px 0;
        position: relative;
    }
    
    .company-info dt {
        width: 160px; /* 左列の幅 */
        font-weight: bold;
        font-size: 16px;
        color: #333;
        flex-shrink: 0;
    }
    
    .company-info dd {
        margin: 0;
        font-size: 16px;
        color: #555;
        flex: 1;
    }
    /* グラデーションの下線を各行に引く */
    .info-row::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 100%;
        background: linear-gradient(to right, #003E89, #7ACDF2);
    }
    
    /* 最後の行だけ下線なしにしたい場合 */
    .info-row:last-child::after {
        display: none;
        }

/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/

#splash {
    /*fixedで全面に固定*/
	position: fixed;
	top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	z-index: 9999;
	background: linear-gradient(to bottom, #F4F7F9 30%, #E0E8EF 100%);
	text-align:center;
	color: #003e89;
}

/* Loadingバー中央配置　*/
#splash_text {
	position: absolute;
	top: 50%;
	left: 50%;
    z-index: 999;
	width: 100%;
	transform: translate(-50%, -50%);
	color: #003e89;
}

/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg{
    height: 2px;
}
/* ナビゲーションローディング中隠す */
body.loading .side-nav {
  display: none;
}

#opening-video {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 9998;
}
#opening-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#main-site {
  z-index: 1;
  position: relative;
}

/* 初期は非表示 */
.hidden { display:none; }

/* オープニング動画 */
/* opening-video が全画面を覆うように */
#opening-video{
  position:fixed;
  inset:0;
  background:#000;
  z-index:9998;
}
#opening-video video{
  width:100%;
  height:100%;
  object-fit:cover;
}

/*========= 波のためのCSS ===============*/
.wave {
  position: relative;
  width: 100%;
  height: 150px; /* 波の高さ */
  overflow: hidden;
}

#waveCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.wave-wrapper {
  position: relative;
  width: 100%;
  height: 200px; /* セクションの高さに合わせて調整してね */
  overflow: hidden;
}

.wave-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/*========= テキストの動きのCSS ===============*/

span.smoothText {
	overflow: hidden;
	display: block;
}

/* アニメーションで傾斜がついている文字列を水平に戻す*/
span.smoothTextTrigger{
	transition: .8s ease-in-out;
	transform: translate3d(0,100%,0) skewY(12deg);
	transform-origin: left;
	display: block;
}
span.smoothTextTrigger.smoothTextAppear{
    transform: translate3d(0,0,0) skewY(0);
}

/*========= 背景の動く泡あわCSS ===============*/
.blue-box {
  position: relative;
  height: 300px;
  border-radius: 20px;
  overflow: visible; /* ←これで外に出せる！ */
}
.bubble-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;     /* ← 親要素の幅に合わせる */
  height: 100%;
  z-index: 0;
}

.bubble {
  position: absolute;
  bottom: -30px; /* ←少し下からスタート */
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation-name: rise;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  pointer-events: none;
  opacity: 0.8;
}

@keyframes rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translateY(-400px) scale(1.2); /* ←もっと上へ移動！ */
    opacity: 0;
  }
}

@media (max-width: 1024px) {
  .blue-box {
    height: 100px; /* ← ここで全体の高さ調整 */
  }

  .bubble-container {
    height: 100%; /* ← 親に追従でOK */
  }
}

/*========= 液体シェイプCSS ===============*/

.fluid-wrapper {
  position: relative;
  width: 100%;
  height: 300px; /* 全体の高さ */
  overflow: hidden;
}

.fluid-blob {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px; /* ←これでblobだけのサイズを変えられる！ */
  height: 300px;
  background: rgba(255,255,255,0.6);
  z-index: 0;
  animation: fluidrotate 30s ease 0s infinite;
}

.fluid-content {
  position: relative;
  z-index: 1; /* blobの上に表示させる */
  padding: 20px;
}

@keyframes fluidrotate {  
	  
0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
	  
}

/*========= ナビゲーション表示の制御 ==========*/

/* ▼ 初期状態：ブロックナビは非表示 */
.custom-block-nav {
  display: none;
}

/* ▼ PC・タブレット表示（768px以上） */
@media (min-width: 768px) {
  .custom-block-nav {
    display: block;
  }

/*=========  ===============*/
.wavy-text span {
  display: inline-block;
  animation: wave 1.5s ease-in-out infinite;
}

.wavy-text span:nth-child(2) { animation-delay: 0.1s; }
.wavy-text span:nth-child(3) { animation-delay: 0.2s; }
/* 必要に応じて */

@keyframes wave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}	
  /* モバイルヘッダー（ハンバーガー）は非表示に */
  .ast-mobile-header-wrap {
    display: none !important;
  }
}

/* ▼ モバイル表示（767px以下） */
@media (max-width: 767px) {
  /* ブロックナビ非表示、モバイルヘッダー有効 */
  .custom-block-nav {
    display: none !important;
  }

  .ast-mobile-header-wrap {
    display: flex !important;
  }

  /* ハンバーガーメニューの右寄せ・固定配置 */
  #ast-mobile-header {
  left: 0;  /* ← 忘れがち！ */
  right: 0;
  width: 100%;
  box-sizing: border-box;
}

  .ast-above-header-wrap {
    width: 100% !important;
    display: flex;
    justify-content: flex-end;
    padding: 10px 10px;
  }

  .ast-button-wrap {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
  }

  .main-header-menu-toggle {
    margin-left: auto;
    margin-right: 0;
  }

  /* ヘッダー内の余白調整（オプション） */
  #masthead .ast-mobile-header-wrap .ast-above-header-bar {
    padding-right: 0;
  }
}

/*========= PC時の補足スタイル ==========*/

/* PC表示時、ハンバーガー部分の右寄せ */
.ast-header-break-point .main-header-bar .ast-button-wrap {
  margin-left: auto;
}

/* モバイルヘッダー（共通） */
.ast-mobile-header-wrap {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  background-color: rgba(255,255,255,0);
  padding: 10px 16px;
  box-shadow: none;
}