@charset "UTF-8";
/* CSS Document */

 :root{
    --rise: 100px;                       /* 下からの距離 */
    --dur: 3s;                        /* アニメーションスピード */
    --ease: cubic-bezier(.2,.7,.15,1);  /* 滑らかな動き */
    --marker: rgba(255, 235, 59, 0.7);  /* イエロー50% */
  }

  /* ------------- アニメ前（初期状態） ------------- */
  .reveal{
    opacity:0;
    transform: translateY(var(--rise));
    transition:
      opacity var(--dur) var(--ease),
      transform var(--dur) var(--ease);
    will-change: opacity, transform;
  }

  /* ------------- アニメ発動状態 ------------- */
  .reveal.is-visible{
    opacity:1;
    transform: translateY(0);
  }

  /* ------------- アンダーマーカー ------------- */
  .reveal .marker{
    position:relative;
    display:inline-block;
	  z-index: 1; /* ← テキストを前面に */
    padding-bottom:.05em;
	  padding-left: 0.5em;
	  padding-right: 0.5em;
  }

/* ------------- アンダーマーカー 黄色い線------------- */
/*.reveal .marker::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:0.6em;
    background: var(--marker);
    transform: scaleX(0);
    transform-origin:left center;
    transition: transform calc(var(--dur) + 2s) var(--ease);
    border-radius:2px;
z-index: -1;
  }*/

/* ------------- アンダーマーカー 画像------------- */
.reveal .marker::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.9em;/* ← 少し太めが毛筆っぽい */
	background-image: url("../img/brush-yellow.png");
  background-size: 100% 100%;            /* 幅に合わせる */
  background-repeat: no-repeat;
  opacity: 0.9;
  z-index: -1;                           /* テキストの後ろ */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 2s ease-out;
}

  .reveal.is-visible .marker::after{
    transform: scaleX(1);
  }

  /* ------------- デモ用スタイル ------------- */
  section#maincopy {
    padding:0 0 0 0;
  }
section#maincopy h2 {
text-align: center;
	font-size: 40px;
	padding: 0 0 0 0;
		}
section#maincopy h3{
    margin:0 0 .5em;
	  text-align: center;
	  font-size: 40px;
	  font-weight: bold;
	  padding: 120px 0 0 0;
  }


  /* モーションが苦手な人向け */
  @media (prefers-reduced-motion: reduce){
    .reveal{
      opacity:1 !important;
      transform:none !important;
      transition:none !important;
    }
    .reveal .marker::after{
      transform: scaleX(1) !important;
      transition:none !important;
    }
  }



/*スマホ==========================================================================================================*/
@media screen and (max-width: 480px) {
	section#maincopy h2 {
text-align: center;
	font-size: 16px;
	padding: 0 0 0 0;
		}
section#maincopy h3{
    margin:0 0 .5em;
	  text-align: center;
	  font-size: 18px;
	  font-weight: bold;
	  padding: 30px 0 0 0;
  }
	
	
}