/* TOPPAGE　キービジュアル用 */

     /*.all-container,
        .flex-grow-1,
        .header{
         box-sizing: border-box;
            border: 1px solid #333
        }*/
/* 花びら共通アニメーション */
.petal {
  opacity: 0;
  transform: scale(0.9);
  transform-origin: center center;
  animation: petalIn 0.6s ease forwards;
}
@keyframes petalIn {
  to { opacity: 1; transform: scale(1); }
}

/* 花びらを順番に表示（0.05s刻み・0.2s開始） */
.petal1  { animation-delay: 0.20s; }
.petal2  { animation-delay: 0.25s; }
.petal3  { animation-delay: 0.30s; }
.petal4  { animation-delay: 0.35s; }
.petal5  { animation-delay: 0.40s; }
.petal6  { animation-delay: 0.45s; }
.petal7  { animation-delay: 0.50s; }
.petal8  { animation-delay: 0.55s; }
.petal9  { animation-delay: 0.60s; }
.petal10 { animation-delay: 0.65s; }
.petal11 { animation-delay: 0.70s; }
.petal12 { animation-delay: 0.75s; }
.petal13 { animation-delay: 0.80s; }
.petal14 { animation-delay: 0.85s; }
.petal15 { animation-delay: 0.90s; }
.petal16 { animation-delay: 0.95s; }

        
.logo-bg {
  opacity: 0;
  animation: textFade 1s ease forwards;
  animation-delay: 0.6s; /* text-group4の終わりを待ってから表示 */
}
.text-group {/* ロゴテキスト上部 */
  opacity: 0;
  animation: textFade 1s ease forwards;
  animation-delay: 1s; /* 花びら終わりを待ってから表示 */
}
.text-group2 {/* ロゴテキスト下部 */
  opacity: 0;
  animation: textFade 1s ease forwards;
  animation-delay: 1.05s;
}
.text-group3 {/* 見出し */
  opacity: 0;
  animation: textFade 0.1s ease forwards;
  animation-delay: 0s;
}
.text-group4 {/* 説明文 */
  opacity: 0;
  animation: textFade 0.8s ease forwards;
  animation-delay: 1.7s; 
}
 
@keyframes fadeInBg {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes textFade {
      from {
      transform: translatey(-25px);
    }
    to {
      opacity: 1;
      transform: translatey(0);
    }
}
       
      /* キーフレーム */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/* CSS（clip-path） */
:root{
  /*--hero-h: 420px;*/
  --diag-offset: 10%;  斜めの角度を調整 
}

/* ===========================
   Hero Section
   =========================== */
/* フェードイン用のアニメーション */
@keyframes fadeInBg {
  from { opacity: 0; }
  to { opacity: 1; }
}

.flex-grow-1 {
  overflow: hidden;
}
/* ヒーローセクション全体 */
.hero { border-radius: 8vw 3px 8vw 3px;
  position: relative; /* 疑似要素を配置する基準点にする */
  padding: 5rem 2rem 5rem; /* 上下の余白 */
  background: url('/vision-cons/assets/img/bg_202509.jpg') center/cover no-repeat;
  overflow: hidden; /* はみ出した白い図形を隠す */
  opacity: 0;
  animation: fadeInBg 2s ease-out forwards;
  --panel-w: 90%;                               /* 白パネルの幅 */
  --panel-left: ;                             /* 左右均等にしたいので 100-90=10 → 5%ずつ */
  --slant-gutter: clamp(20px, 5vw, 72px);  
}
      
.hero p {
  /*font-weight: 600;*/
   font-size: clamp(16px, 0.9rem + 0.3vw, 17px);
}
      
.hero h1{
  color: #111;
      }
      
/* 背景の白い曲線図形を作成 */

.hero::before {
  content: '';
  position: absolute;
  z-index: 0;
  width: 64vw;
  height: 86vW;
  background-color: rgba(255,255,255,1);
  border-radius: 50% 50% 50% 50%;
  transform: rotate(36deg);
  margin: auto;
}
.hero::after {
  content: '';
  position: absolute;
  z-index: 0; /* コンテンツより後ろに配置 */
width: 71vw;
  height: 84vW;
  background-color: rgba(255,255,255,0.6);
  border-radius: 50% 50% 50% 50%;
  transform: rotate(40deg);
  margin: auto;
}
      
/* ==== パネル内のレイアウト ==== */
.hero-inner{
  position: relative;
  z-index: 1;
  width: 80vw;         /* 白hero::beforeより狭い幅 */
  max-width: min(1100px, var(--panel-w));
  margin: 0 auto;                /* パネルと同位置にくる */
  box-sizing: border-box;
  padding-inline: var(--slant-gutter);   /* 斜めに当たらないガード */
  align-items: center;
}
      
@media (min-width: 1200px){
.hero{ border-radius: 8vw 3px 8vw 3px;}
    
.hero::before {/* 内側 */
  content: '';
  position: absolute;
  z-index: 0; /* コンテンツより後ろに配置 */
  width: 78vw;
  height: 62.4vW;
  background-color: rgba(255,255,255,1);
  border-radius: 50% 60% 50% 60%;
  transform: rotate(-30deg);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;max-width: 1320px;
}
.hero::after {/* 外側 */
  content: '';
    position: absolute;
    z-index: 0;
    width: 80vw;
    height: 72vW;
    background-color: rgba(255,255,255,0.5);
    border-radius: 50% 60% 50% 60%;
    transform: rotate(-34deg);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;max-width: 1340px;
}

/* ==== パネル内のレイアウト ==== */
.hero-inner{
  box-sizing: border-box;
}
    }   
      
.hero h1 {
font-size: clamp(24px, 2vw, 34px);
  font-weight: 700;
  font-size: clamp(27px, 3.5vw, 34px);
}

/* ロゴ */
.hero .logo{
  max-width: clamp(300px, 28vw, 400px);
}
.hero .logo img{
  width: 100%;
  height: auto;
  display: block;
}

/* 狭幅では1カラムにして、はみ出しを確実に回避 */
@media (min-width: 980px){      
.hero h1 {
font-size: clamp(24px, 3.4vw, 52px);
 line-height: 1.25;
 margin-bottom: 1em;
}}
      
@media (max-width: 980px){  
  .hero .logo{ margin: 8px auto 0; }
    
  .hero h1 {
        line-height: 1.4;
    } 
}


/* ==== スマホ：縦積み、斜めは解除 ==== */
@media (max-width: 768px){
    
.hero{border-radius: 3px;}
    
 #all-container.container-fluid{
     padding-right:0;
      padding-left:0;
    }
  .hero{ min-height: 90vw; }

  .hero-inner{
    text-align: center;
    gap: 1.25rem;
  }
    
  .hero .logo{ justify-self: center; }

.hero {
  padding: 4rem 2rem 4rem;
    }
.hero-inner{
        max-width: 100%;
    }
    
.hero::before{
  width: 137vW;
    height: 96%;
    background-color: white;
    border-radius: 80% 45%;
    transform: rotate(0deg);
    margin: auto;}
    
  .hero .logo {
    margin: 0 auto 0;
  }
.hero::after{
  width: 150vW;
  height: 98%;
  background-color: rgba(255,255,255,0.5);
  border-radius: 80% 45%;
  transform: rotate(0deg);
  margin: auto;}
    
  .hero .logo {
  margin: 15px auto 20px;
      argin-right: -.4vw;
  }

  }
      
@media (max-width: 500px){
    .hero .row {
    justify-content: flex-end !important;
  }
 .hero .logo {
     text-align: right!important;
    }
  .logo img {
    display: inline!important;
     margin: 0 !important;  
  }
 .hero h1 {
     margin-top: 10px;
    }
    
.hero::before{  
    width: 160vW;
    height: 87%;
    border-radius: 62% 45%;
    transform: rotate(-11deg);
  }
    
.hero::after{  
    width: 160vW;
    height: 90%;
    border-radius: 68% 47%;
    transform: rotate(-25deg);
    margin: auto;}
    }
      
/*Readmore*/ 

.overview .readMore {/* Read more（最下部）中央寄せ */
    margin-top: auto;     /* 下へ押し下げる */
    align-items: center;  /* 上下センター */
    justify-content: center; /* ★ 中央に配置 */
} 
.readMore a {
  display: inline-flex;              /* ← flexでアイコンと文字を中央揃え */
  align-items: center;               /* ← 垂直中央 */
  justify-content: center;
  gap: 5px;                          /* ← テキストとアイコンの間隔 */
  font-weight: 700;
  font-size: 1rem;
  color: #000;
  text-decoration: none;
  transition: color 0.25s ease;
}

.readMore a i {
  display: inline-flex;
  align-items: center;
  background-color: #FFF;
  justify-content: center;
  border: 1.5px solid #000;
  border-radius: 6px;
  padding: 0.2em 0.5em;
  font-size: 1.1em;
  transition: all 0.25s ease;
}

/* hover時の動き */
.readMore a:hover i {
  background-color: #000;
  color: #fff;
  transform: translateX(4px);
}
@media (max-width: 767px) {
  .readMore {
    text-align: right !important; /* スマホ時に右寄せ */
    display: block !important;    /* 親要素をブロックにして右寄せを効かせる */
  }
  .readMore a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end; /* アイコンも右寄せ */
  }
}