@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/*
.hero-cover {/** ─ ヒーロー全体 ─ **/
.hero-cover {
  position: relative;
  overflow: hidden;
  background-color: #fff;
}

/* 前面テキスト */
.hero-cover .hero-content {
  position: relative;
  z-index: 10;
  text-align: left; /* 必要に応じ center */
}

/** ─ 擬似要素 SVG 装飾 ─ **/
.hero-cover::before {
  content: '';
  position: absolute; top: 10%; left: 5%;
  width: 250px; height: 250px;
  background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'>\
<circle cx='100' cy='100' r='80' stroke='%23E30613' stroke-width='2' fill='none' opacity='0.3'/>\
<circle cx='100' cy='100' r='50' stroke='%23E30613' stroke-width='2' fill='none' opacity='0.2'/>\
<circle cx='100' cy='100' r='20' stroke='%23E30613' stroke-width='2' fill='none' opacity='0.1'/>\
</svg>") no-repeat center/contain;
  opacity: 0.15; pointer-events: none; z-index: 0;
}
.hero-cover::after {
  content: '';
  position: absolute; bottom: 8%; right: 6%;
  width: 300px; height: 120px;
  background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120'>\
<line x1='0' y1='30' x2='300' y2='30' stroke='%23E30613' stroke-width='1' opacity='0.2' stroke-dasharray='6 6'/>\
<line x1='0' y1='60' x2='300' y2='60' stroke='%23E30613' stroke-width='1' opacity='0.15' stroke-dasharray='4 8'/>\
<line x1='0' y1='90' x2='300' y2='90' stroke='%23E30613' stroke-width='1' opacity='0.1' stroke-dasharray='2 10'/>\
</svg>") no-repeat center/contain;
  opacity: 0.12; pointer-events: none; z-index: 0;
}

/** ─ 形状アニメ用スタイル ─ **/
.hero-cover .hero-anim {
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
}
.hero-cover .hero-anim .shape {
  position: absolute; display: block; opacity: 0.4;
}
/* 大きな円（回転） */
.hero-cover .hero-anim .circle {
  width:200px; height:200px;
  border:2px solid #E30613; border-radius:50%;
  top:20%; left:10%;
}
/* リング（拡大縮小） */
.hero-cover .hero-anim .ring {
  width:120px; height:120px;
  border:1px dashed #E30613; border-radius:50%;
  bottom:15%; right:20%;
}
/* ドット（浮遊） */
.hero-cover .hero-anim .dot {
  width:12px; height:12px;
  background:#E30613; border-radius:50%;
  top:40%; right:40%;
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(-20px,-30px) scale(1.3); }
 100%  { transform: translate(0,0) scale(1); }
}

/** ─ クリック線用 Canvas ─ **/
#clickCanvas {
  position:absolute; top:0; left:0;
  width:100%; height:100%; z-index:2;
  pointer-events:none;
}

/** ─ ボタン波紋効果（任意） ─ **/
.cta-button {
  position:relative; overflow:hidden;
}
.cta-button::after {
  content:''; position:absolute; top:0; left:-100%;
  width:100%; height:100%;
  background: rgba(255,255,255,0.2);
  transition: all 0.3s ease;
}
.cta-button:hover::after { left:100%; }
}
*/