/* ############################
GROWUP Ver1.0 CSS
############################ */


/* ############################
リセットCSS START
############################ */

*, *:before, *:after {
box-sizing: border-box;
}

/* マージン、パディング、ボーダーをリセット */
body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, figure, figcaption, blockquote, dl, dd {
margin: 0;
padding: 0;
border: 0;
}

/* リストスタイルをリセット */
ol, ul {
list-style: none;
}

/* フォント継承をリセット */
html {
font-family: sans-serif;
}

/* リンクのスタイルをリセット */
a {
text-decoration: none;
color: inherit;
}

/* 画像のスケーリングを防ぐ */
img {
max-width: 100%;
height: auto;
display:block;
}

/* テーブルのボーダースパイシングとボーダーコラプスをリセット */
table {
border-collapse: collapse;
border-spacing: 0;
}

/* その他の基本的なスタイルリセット */
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
display: block;
}

/* ############################
リセットCSS END
############################ */


/* contents */

body{
max-width:760px;
margin:0 auto;
position: relative;
}

.btn-area{
position: relative;
}

.n-btn-area{
text-align:center;
}

.btn1,.btn2,.btn3{
position: absolute;
left: 10%;
width: 80%;
animation: zoom 1s alternate infinite;
}

@keyframes zoom {
  0% {
    transform: scale(1); /* 初期サイズ */
  }
  100% {
    transform: scale(1.1); /* 1.2倍に拡大 */
  }
}
.btn1{
bottom:1%;
}

.btn2{
bottom:2%;
}

.btn3{
bottom:1.6%;
}



input{
width:100%;
padding:20px;
border-radius:10px;
border:solid 1px #000;
}

input[type="image"]{
border:none;
width:90%;
}

.required,.err{
color:red;
}

.btn-fix{
position: fixed;
bottom:0;
box-sizing: border-box;
width: clamp(0%, 100%, 700px);
padding: 10px;
}

.btn-fix img{
width:100%;
}

#cta{
margin-top:70px;
}

.copyright{
text-align:center;
font-size: 10px;
background: #000;
padding-top: 5px;

color: white;
}

.copyright a{
color:#007bff;
}



@media (max-width: 700px) {
.copyright span{
display:block;
}
}




/*追記*/
.a02{
  width: 100%;
  background-size: contain;
  background-repeat:repeat;
}

.flow{
    width: 100%;
    background-color: #fff8cc;
}
.a_img{
    
}
.sec_btn{
    background-color: #ffe6aa;
    padding-top: 20px;
    
}

.qa01{
    width: 100%;
  background-image: url(../img/img_07p.jpg);
  background-size: contain;
  background-repeat:repeat;
  padding-top: 20px;
}
.yureru-s {
    animation: yureru-s 2s infinite;
}
@keyframes yureru-s {
    0% {
        transform: translate(2px, 0px);
    }
    5% {
        transform: translate(-2px, 0px);
    }
    10% {
        transform: translate(2px, 0px);
    }
    15% {
        transform: translate(-2px, 0px);
    }
    20% {
        transform: translate(2px, 0px);
    }
    25% {
        transform: translate(-2px, 0px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}
.age{
    color: red;
    text-align: center;
    margin-top: -20px;
    font-weight: bold;
    font-size: 12px;
}

.btn_01{
    margin-top: 0px;
    
}
.btn_02{
    margin-bottom: 10px;
}

.btn02{
    margin-top: 20px;
    margin-bottom: 20px;
}

.entry{
    background-image: url(../img/img_entry.jpeg);
}

.a03{
  width: 100%;
  background-image: url(../img/6p.jpg);
  background-size: contain;
  background-repeat:repeat;
  padding-top: 20px;
 padding-bottom: 10px;
  height: 100%;
}


/*アニメーション*/




.anime {
  position: relative;
  display: inline-block;
}

.img_text01 {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
}




.pudding-container01 {
  position: absolute;
  right: 400;
  left: 0;
  margin: 0 auto;
    top:10px;
}

.pudding-container02 {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
    top:120px;
}
.pudding-container03 {
  position: absolute;
  right: 0;
  left: 200;
  margin: 0 auto;
    top:120px;
}


.pudding {
    background-size: cover;
    animation: purine 1.2s linear   normal;
    transform-origin: center bottom;
    /* 上から落ちてくるスタート地点 */
    transform: translateY(0px); 
}


.syashin {
    background-size: cover;
    animation: 1.2s 0s syashin ease infinite;
}
.ok01 {
    background-size: cover;
    animation: 1.7s 0s syashin ease normal;
}
.man50 {
    background-size: cover;
    animation: 2.1s 0s syashin ease normal;
}

.man2 {
    background-size: cover;
    animation: puyon 1.6s linear 0s infinite;
}



@keyframes puyon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  40%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
  50%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  60%  { transform: scale(0.95, 1.05) translate(0%, -3%); }
  70%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
  80%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

@keyframes syashin {
	79%,
	90%,
	97%,
	100% {
		-webkit-transform: translate(0);
		        transform: translate(0);
	}
	85% {
		-webkit-transform: translateY(-20px);
		        transform: translateY(-20px);
	}
	94% {
		-webkit-transform: translateY(-4px);
		        transform: translateY(-4px);
	}
	99% {
		-webkit-transform: translateY(-2px);
		        transform: translateY(-2px);
	}
}

@keyframes purine {
    0%   { transform: scale(0.8, 1.4) translate(0%, -100%); }
  10%  { transform: scale(0.8, 1.4) translate(0%, -15%); }
  20%  { transform: scale(1.4, 0.6) translate(0%, 30%); }
  30%  { transform: scale(0.9, 1.1) translate(0%, -10%); }
  40%  { transform: scale(0.95, 1.2) translate(0%, -30%); }
  50%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
  60%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  70%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

   .purun {
      -webkit-animation: purun 0.8s linear 0s 1;
      animation: purun 0.8s linear 0s 1;
    }
    @-webkit-keyframes purun {
      0%   { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
      15%  { -webkit-transform: scale(0.9, 0.9) translate(0%, 5%); }
      30%  { -webkit-transform: scale(1.3, 0.8) translate(0%, 10%); }
      50%  { -webkit-transform: scale(0.8, 1.3) translate(0%, -10%); }
      70%  { -webkit-transform: scale(1.1, 0.9) translate(0%, 5%); }
      100% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
    }

@keyframes purun {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
  30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
  50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

.top001{
    display: block;
    max-width: 100%;
    height: auto;
}


.zoomFade {
animation: zoomFade 2s ease-in-out infinite;
}
/* zoomFade */
@keyframes zoomFade {
    0% {
        transform: scaleX(1)
    }
    50% {
        transform: scale3d(1.05, 1.05, 1.05)
    }
    to {
        transform: scaleX(1)
    }
}

.a_img2{
    margin-top: -10px;
}


/* テスト */



.content {
  
  opacity: 0;
}
.content.inview {
  animation-name: fade-in;
  animation-duration: .5s;
  animation-timing-function: ease-in-out;
  animation-delay: .4s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes fade-in {
  0% {
    transform: translateY(40px);
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

.pikopiko{
    animation: pikopiko 1s steps(2, start) infinite;
}

@keyframes pikopiko {
  0% {
    transform: rotate(20deg);
  }
  to {
    transform: rotate(-10deg);
  }
}


///0707//

.slideinLeft {
  animation: slideinLeft 3s infinite;
      transition: 1s;
  opacity: 0;
  transform: translateY(20px);
  display: block;
}

@keyframes slideinLeft {
   0% {
    transform: translateY(20px);
  }
   100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.zoomFade02 {
animation: zoomFade 2s ease-in-out infinite;
}
/* zoomFade */
@keyframes zoomFade02 {
    0% {
        transform: scaleX(1)
    }
    50% {
        transform: scale3d(1.05, 1.05, 1.05)
    }
    to {
        transform: scaleX(1)
    }
}

.fadeInLeft {
    animation: fadeInLeft 0.7s ease 0s 1 normal;
}
/* fadeInLeft */
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-800px);
  }
  100% {
    opacity: 1;
  }
}

.fadeInRight {
    animation: fadeInRight 1.5s ease 0s 1 normal;
}
/* fadeInRight */
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(160px);
  }
  100% {
    opacity: 1;
    display: block;
  }
}


.toptobottomScale  {
    animation: toptobottomScale 1.4s ease 0s 1 normal;
}
/* toptobottomScale */
@keyframes toptobottomScale {
    0% {
        transform: translateY(-1200px) scale(0.7);
        opacity: .7
    }
    80% {
        transform: translateY(0) scale(0.7);
        opacity: .7
    }
    to {
        transform: scale(1);
        opacity: 1
    }
}

/* fadeInTop */
.fadeInTop {
    animation: fadeInTop 0.7s ease 0s 1 normal;
}

@keyframes fadeInTop {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
  }
}

.circle {
   animation: fuwafuwa 2s infinite;
}

@keyframes fuwafuwa {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0px);
  }
}

.fadeIn {
    transform: translate3d(-200px, 0, 0);
    transition: 1s;
    opacity: 0;
    animation-duration: .20s;
    animation-delay: .10s;
}

.fadeIn.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.fadeIn01 {
  transform: translate3d(-1200px, 0, 0);
    transition: 1s;
    opacity: 0;
    animation-duration: .100s;
    animation-delay: 1s;
}

.fadeIn01.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.topsp{
    margin-top: 0px;
}
.atehama{
    margin-top: 40px;
}





.btn5p{
    margin-bottom: 15px;
}
.sec01{
    padding-top: -10px:
}
.btn0201{
    margin-bottom: 5px;
}

.copyright01{
    background-color: black;
    height: 30px;
}

.tokusyo p{
    color: white;
}

.number {
  font-size: 24px;
  font-weight: bold;
  color: red;
}

.countdown{
    text-align: center;
}

.count{
    color: red;
    font-size: 20px;
    font-weight: bold;
    width: 100%;
    line-height: 20px;
}

.top_wrap{
    position: sticky;
    top:0;
  width: 100%; /* 画面幅全体に広げる */
}

.countdown{
 background-color: white;
}

header {
  position: sticky;
  top: 0;
  z-index: 999;
  
}

.top_contain{
position: relative;
}

.top_contain01{
position: absolute;
    top:20px;
}
.top_contain02{
   position: relative; 
}

.countdown_01{
    font-weight: bold;
    font-size: 5px;
}

.zoomin{
    transform: scale(0);
  animation: zoomIn 1s ease-in-out forwards;
}

@keyframes zoomIn {
  to {
    transform: scale(1);
  }
}

.pudding-container05 {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  top:0%; 
}

.top_animekoumoku{
    position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  top:0%; 
}

.top_animekoumoku {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
    top:120px;
}
.aniconte{
  position: absolute;
  top:0px;

}



.aniko01{
    margin-left: 23%;
}

.koumoku01{
    position: absolute;
    
}

.blue{
    width: 100%;
    position: relative;
}

.shikaku{
    width: 90%;
    margin: 0 auto;
    position: absolute;
    top: 40px;
    left: 20px;
    text-align: center;
}



.zoomBottomUp01{
    animation: zoomBottomUp 1.0s ease 0s 1 normal;

}
/* zoomBottomUp */
@keyframes zoomBottomUp {
    0% {
        transform: translateY(1200px) scale(0.7);
        opacity: .7
    }
    80% {
        transform: translateY(0) scale(0.7);
        opacity: .7
    }
    100% {
        transform: scale(1);
        opacity: 1
    }
}

  

.zoomBottomUp {
  opacity : 0;
  transition : all 3s;
}
  
.zoomBottomUp01{
  opacity : 1;
}

.wrapper {
  padding: 200px 0;
  background-color: #f2f2f2;
}

.aniconte01{
    position: relative;
}

.flip01 {
    animation: flip 0.8s ease 0s 1 normal;
}
/* flip */
@keyframes flip {
    0% {
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
        animation-timing-function: ease-out
    }
    40% {
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
        animation-timing-function: ease-out
    }
    50% {
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
        animation-timing-function: ease-in
    }
    80% {
        transform: perspective(400px) scale3d(0.95, .95, 0.95) translateZ(0) rotateY(0deg);
        animation-timing-function: ease-in
    }
    100% {
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
        animation-timing-function: ease-in
    }
}

.flip01{
  opacity : 1;
}

.kari{
    height: 30px;
}
.kininaru{
    margin-top: -30px;
}

.shikaku01{
    width: 90%;
    margin: 0 auto;
    position: absolute;
    top: 0px;
    left: 20px;
    text-align: center;
}

.tap{
    margin-top: 20px;
}

.zoomUp01{
    animation: zoomBottomUp 1.0s ease 0s 1 normal;

}
/* zoomBottomUp */
@keyframes zoomBottomUp {
    0% {
        transform: translateY(1200px) scale(0.7);
        opacity: .7
    }
    80% {
        transform: translateY(0) scale(0.7);
        opacity: .7
    }
    100% {
        transform: scale(1);
        opacity: 1
    }
}

  

.zoomUp {
  opacity : 0;
  transition : all 2s;
}
  
.zoomUp01{
  opacity : 1;
}


/* slideの枠 */
.cp_cssslider01 {
  overflow: hidden;
  margin: 1em auto;
}
/* 画像のグループ */
.cp_slidewrapper01 {
  width: 400%;/* slideの枚数×100% */
  position: relative;
  display: flex;
  animation: cp_slider01 13s infinite ease;

}
/* 画像単体の設定 */
.cp_slide01_item {
 width: 100%;
}
@keyframes cp_slider01 {
  /* 100%を枚数で割った%に割り振る */
    0% { transform: translateX(0); }
    20%{ transform: translateX(0px); }
   25% { transform: translateX(-25%); }
    45% { transform: translateX(-25%); }
   50% { transform: translateX(-50%); }
    70% { transform: translateX(-50%); }
    75% { transform: translateX(-75%); }
    95% { transform: translateX(-75%); }
    100% { transform: translateX(0px); }

}
.kekka{
    font-size: 8px;
    color:#FFAD90;
    margin-top: -20px;
}
.kekka01{
    font-size: 8px;
    color:#FFAD90;
}
.kekka01{
    font-size: 8px;
    text-align: center;
    color:#e0aa05;
}

.shikaku02{
    width: 90%;
    margin: 0 auto;
    position: absolute;
    top: 30px;
    left: 20px;
    text-align: center;
}

.shikaku03{
    width: 100%;
    margin: 0 auto;
    top: 0;
    left; 0;
    position: absolute;
    margin-top: -20px;

}
.shikaku04{
    width: 100%;
    margin: 0 auto;
    top: 0;
    left; 0;
    position: absolute;
    margin-top: 30px;

}

.space{
    margin-bottom: 20px;
}

.3tap{
    
}

.zoomin01{

}


.zoomin01{
        transform: scale(0);
        animation: zoomIn01 1s ease-in-out forwards;
}

@keyframes zoomIn01 {
  to {
    transform: scale(1);
  }

}
/* zoomBottomUp */
@keyframes zoomin01 {
    0% {
        transform: translateY(1200px) scale(0.7);
        opacity: .7
    }
    80% {
        transform: translateY(0) scale(0.7);
        opacity: .7
    }
    100% {
        transform: scale(1);
        opacity: 1
    }
}

  

.zoomin00 {
  opacity : 0;
  transition : all 3s;
}
  
.zoomin01{
  opacity : 1;
}

.touroku{
    margin-top: 250px;
}

.step_conte{
    display: flex;
    overflow: hidden;
}
.step_conte01{
    display: flex;
    width: 100%;
}

.sconte{
    width: 33%;
}
.sconte01{
    width: 50%;
}

.fadeIn02 {
  transform: translate3d(-400px, 0, 0);
    transition: 1s;
    opacity: 0;
    animation-duration: .100s;
    animation-delay: .30s;
}

.fadeIn02.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.fadeIn02a {
  transform: translate3d(400px, 0, 0);
    transition: 1s;
    opacity: 0;
    animation-duration: .100s;
    animation-delay: .30s;
}

.fadeIn02a.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.fadeIn02_01 {
  transform: translate3d(-400px, 0, 0);
    transition: 1s;
    opacity: 0;
    animation-duration: .100s;
    animation-delay: 1s;
}

.fadeIn02_01.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}


.fadeIn03 {
  transform: translate3d(600px, 0, 0);
    transition: 1.2s;
    opacity: 0;
    animation-duration: .200s;
    animation-delay: .40s;
}

.fadeIn03.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
    animation-delay: .40s;
}

.fadeIn04 {
  transform: translate3d(800px, 0, 0);
    transition: 1.4s;
    opacity: 0;
    animation-duration: .300s;
    animation-delay: .50s;
}

.fadeIn04.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
    animation-delay: .60s;
}
.space01{
    margin-top: 30px;
}
.cp{
    z-index: 10;
}

.basyo{
    margin-top: -50px;
    z-index: 20;   
}

.btn01{
    margin-top: -150px;
}

.doubutu{
    margin-top: -30px;
}
.reinbo{
    margin-top: -10px;
}

.top01 {
  position: relative;
  display: inline-block;
}

.top_w1 {
  animation: floating 4s ease-in-out infinite;
    
}

@keyframes floating {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

@keyframes floating {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-15px, 10px); }
  100% { transform: translate(0, 0); }
}
.top01 {
  position: relative;
  display: inline-block;
}

.top01::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 70%;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle,
    rgba(255,0,0,0.6) 0%,     /* 赤 */
    rgba(255,165,0,0.6) 20%,  /* オレンジ */
    rgba(255,255,0,0.6) 40%,  /* 黄色 */
    rgba(0,255,0,0.6) 60%,    /* 緑 */
    rgba(0,0,255,0.6) 80%,    /* 青 */
    rgba(138,43,226,0.6) 100% /* 紫（バイオレット） */);
  transform: translate(-50%, -50%);
  filter: blur(120px);
  z-index: 0; /* 女性の後ろに配置 */
  animation: rainbowGlow 10s ease-in-out infinite;
}

@keyframes rainbowGlow {
  0%   { filter: blur(100px) brightness(1); }
  50%  { filter: blur(140px) brightness(1.3); }
  100% { filter: blur(100px) brightness(1); }
}

.body{
    background-color:  rgba(0,200,255,0.6);
    
}

.top02{
 
}

.haikei_content {
  margin: 0;
  background-color: #055198; /* 水色の背景全体 */
  max-width: 800px;
  padding-top: 20px;

    
}

.main-content {
  width: 90%;           /* コンテンツ幅（必要に応じて調整） */
  margin: auto;             /* ページ中央に寄せる */
  background: #f9fbfe;        /* 中央は白背景 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 余裕があればボックス影で浮き感を演出 */
      border-radius: 20px;
}
.rogo{
 width: 80%;
    margin-top: 20px;
}

.woman-wrap{
  position: relative;         /* これが基準！ */
  display: inline-block;
}

.top_w1{
  display: block;
  width: 100%;               /* 必要に調整 */
  height: auto;
}

/* 重ねるアイコン */
.icon{
  position: absolute;
  /* 中央寄せ例：頬のあたり  */
  top: 5%;                   /* 縦位置（%は画像に対して相対） */
  left: 50%;                  /* 横位置 */
  transform: translate(-50%, -50%);
  width:   50px;
  height: auto;
  z-index: 2;                 /* 女性の上に来るように */
  pointer-events: none;       /* クリック干渉させたくない時 */
}

.icon2{
  position: absolute;
  /* 中央寄せ例：頬のあたり  */
  top: 13%;                   /* 縦位置（%は画像に対して相対） */
  left: 45%;                  /* 横位置 */
  transform: translate(-50%, -50%);
  width: 50px;
  height: auto;
  z-index: 2;                 /* 女性の上に来るように */
  pointer-events: none;       /* クリック干渉させたくない時 */
}

.icon3{
    position: absolute;
  /* 中央寄せ例：頬のあたり  */
  top: 21%;                   /* 縦位置（%は画像に対して相対） */
  left:53%;                  /* 横位置 */
  transform: translate(-50%, -50%);
  width: 50px;
  height: auto;
  z-index: 2;                 /* 女性の上に来るように */
  pointer-events: none;       /* クリック干渉させたくない時 */
}





.woman-wrap{
  position: relative;
  display: inline-block;
}



.icon, .icon2, .icon3{
 height:auto;
  opacity:0;                    /* 最初は非表示 */
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.15));
  pointer-events:none;
  animation: popIn .55s cubic-bezier(.2,.8,.3,1.2) forwards;
}

/* 順番に遅延（1→2→3） */
.icon  { animation-delay: 500ms;   }
.icon2 { animation-delay: 1000ms; }
.icon3 { animation-delay: 1500ms; }

@keyframes popIn{
  0%   { opacity:0; transform: scale(.6) translateY(8px); }
  60%  { opacity:1; transform: scale(1.08) translateY(0); }
  100% { opacity:1; transform: scale(1); }
}

.cp1, .cp2, .cp3, .cp4{
 height:auto;
  opacity:0;                    /* 最初は非表示 */
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.15));
  pointer-events:none;
  animation: popIn2 .55s cubic-bezier(.2,.8,.3,1.2) forwards;
}

/* 順番に遅延（1→2→3） */
.cp1, .cp2, .cp3, .cp4  { animation-delay: 2000ms;   }

@keyframes popIn2{
  0%   { opacity:0; transform: scale(.6) translateY(30px); }
  60%  { opacity:1; transform: scale(1.08) translateY(0); }
  100% { opacity:1; transform: scale(1); }
}



:root{
  --navy:#0f1b2e;
  --navy-2:#0b1526;
  --gold-1:#f8e7be;
  --gold-2:#d7b467;
  --gold-3:#b58a2e;
  --text:#e9edf5;
  --muted:#9aa3b2;
}

.hero{
  background:
    radial-gradient(1000px 600px at 10% -10%, rgba(255,255,255,0.08), transparent 60%),
    radial-gradient(800px 500px at 90% 10%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(180deg, var(--navy), var(--navy-2));
  color:var(--text);
  padding: clamp(32px, 6vw, 72px) 20px;
  overflow:hidden;
}

.hero__inner{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items:center;
  gap: clamp(20px, 5vw, 56px);
}

.brand{
  display:inline-block;
  font-size:.9rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  border:1px solid rgba(255,255,255,.18);
  padding:.35rem .6rem;
  border-radius:999px;
  margin-bottom:.9rem;
  backdrop-filter: blur(2px);
}

.headline{
  font-size: clamp(24px, 3.2vw, 40px);
  line-height:1.25;
  margin:0 0 14px;
  font-weight:700;
  position:relative;
}

.headline b{
  background: linear-gradient(90deg, var(--gold-1), var(--gold-2), var(--gold-3));
  -webkit-background-clip: text; background-clip:text;
  color:transparent;
}

.headline .hero-sub{
  font-weight:600;
  letter-spacing:.02em;
  color:#fff;
}

.clock-svg{
  color: var(--gold-2);
  display:inline-block;
  vertical-align: -6px;
  margin-right:.5rem;
  filter: drop-shadow(0 4px 10px rgba(213,174,96,.35));
}

.lead{
  color:var(--muted);
  margin:10px 0 20px;
  font-size: clamp(14px, 1.3vw, 16px);
}

.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.1rem; border-radius:14px; font-weight:700;
  text-decoration:none; transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
  border:1px solid transparent;
}
.btn-primary{
  color:#0b0f18;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2));
  box-shadow: 0 10px 24px rgba(215,180,103,.25), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-primary:hover{ transform: translateY(-1px); }
.btn-ghost{
  color:var(--text);
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
}
.btn-ghost:hover{ background: rgba(255,255,255,.12); }

.pills{ display:flex; gap:8px; flex-wrap:wrap; list-style:none; padding:0; margin:6px 0 0; }
.pills li{
  font-size:.78rem; color:#cbd3e2; border:1px solid rgba(255,255,255,.18);
  padding:.35rem .6rem; border-radius:999px; backdrop-filter: blur(2px);
}

/* 右側ビジュアル */
.hero__visual{ position:relative; display:grid; place-items:center; }
.hero-img{
  width:min(420px, 80vw); height:auto; display:block;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.35));
  border-radius: 18px;
}

/* 浮遊アイコン（既存PNGを使用） */
.float{
  position:absolute; width:64px; height:auto; opacity:0;
  animation: popIn .55s cubic-bezier(.2,.8,.3,1.2) forwards,
             bob 4s ease-in-out .6s infinite;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.25));
}
.f1{ top:8%;  right:4%;  animation-delay:.0s, .6s; }
.f2{ top:42%; right:-2%; animation-delay:.18s, .6s; }
.f3{ top:76%; right:6%;  animation-delay:.36s, .6s; }

@keyframes popIn{
  0%{ opacity:0; transform: scale(.7) translateY(8px); }
  60%{ opacity:1; transform: scale(1.08) translateY(0); }
  100%{ opacity:1; transform: scale(1); }
}
@keyframes bob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

/* レスポンシブ */
@media (max-width: 900px){
  .hero__inner{ grid-template-columns: 1fr; }
  .hero__visual{ order:-1; }           /* 画像を上、テキストを下に */
  .hero__cta{ justify-content:center; }
  .headline{ text-align:center; }
  .brand, .lead, .pills{ text-align:center; justify-content:center; }
}


.woman-wrap{ position: relative; display:inline-block; }
.top_w1{ display:block;  height:auto; }

/* 既存のアイコンはそのまま */
.woman-wrap p{
  position: absolute;
  bottom: 0%;          /* 置きたい場所に合わせて調整してね */
  left: 6%;
  margin: 0;
  z-index: 6;          /* 画像やアイコンより前へ */
  color: #000;
  font-weight: 700;
  font-size: 10%;
  line-height: 1.4;
  max-width: 80%;
  padding: .30em .8em;
  margin-top: -50px;
}

.cp1{
    position: absolute;
  /* 中央寄せ例：頬のあたり  */
  top: 5%;                   /* 縦位置（%は画像に対して相対） */
  left:-3%;                  /* 横位置 */
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  z-index: 2;                 /* 女性の上に来るように */
  pointer-events: none;       /* クリック干渉させたくない時 */
}

.cp2{
    position: absolute;
  /* 中央寄せ例：頬のあたり  */
  top: 13%;                   /* 縦位置（%は画像に対して相対） */
  left:-3%;                  /* 横位置 */
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  z-index: 2;                 /* 女性の上に来るように */
  pointer-events: none;       /* クリック干渉させたくない時 */
}

.cp3{
    position: absolute;
  /* 中央寄せ例：頬のあたり  */
  top: 25%;                   /* 縦位置（%は画像に対して相対） */
  left:-3%;                  /* 横位置 */
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  z-index: 2;                 /* 女性の上に来るように */
  pointer-events: none;       /* クリック干渉させたくない時 */
}
.cp4{
    position: absolute;
  /* 中央寄せ例：頬のあたり  */
  top: 33%;                   /* 縦位置（%は画像に対して相対） */
  left:-3%;                  /* 横位置 */
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  z-index: 2;                 /* 女性の上に来るように */
  pointer-events: none;       /* クリック干渉させたくない時 */
}

.karikyu{
     position: absolute;
  /* 中央寄せ例：頬のあたり  */
  top: 50%;                   /* 縦位置（%は画像に対して相対） */
  left:50%;                  /* 横位置 */
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  z-index: 2;                 /* 女性の上に来るように */
  pointer-events: none;       /* クリック干渉させたくない時 */
    
}

.syogetu{
    position: absolute;
  /* 中央寄せ例：頬のあたり  */
  top: 62%;                   /* 縦位置（%は画像に対して相対） */
  left:50%;                  /* 横位置 */
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  z-index: 2;                 /* 女性の上に来るように */
  pointer-events: none;       /* クリック干渉させたくない時 */
}
.kaisetu{
    position: absolute;
  /* 中央寄せ例：頬のあたり  */
  top: 74%;                   /* 縦位置（%は画像に対して相対） */
  left:50%;                  /* 横位置 */
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  z-index: 2;                 /* 女性の上に来るように */
  pointer-events: none;       /* クリック干渉させたくない時 */
}






/* 親（ヒーローなど）の例 */
.hero { position: relative; overflow: hidden; }

/* 共通（キャンバス） */
.sparkle-field{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;          /* 必要に応じて調整 */
  overflow: hidden;
}

/* 色テーマ：ゴールド（他テーマに差し替え可） */
.sparkle-gold{
  --sp-core:#fff7d1;   /* ハイライト */
  --sp-mid:#ffd86b;    /* 中間の光 */
  --sp-deep:#c9a063;   /* 影寄りの金 */
}

/* 1粒の星（上から落ちる） */
.sparkle-field .sparkle{
  position: absolute;
  top: -10vh;                 /* 画面上外から出現 */
  left: 50%;
  width: 8px; height: 8px;    /* 粒の基本サイズ */
  border-radius: 50%;
  background: radial-gradient(circle,
    #fff 0%,
    var(--sp-core) 45%,
    transparent 70%
  );
  /* ふんわり光る */
  filter:
    drop-shadow(0 0 10px var(--sp-core))
    drop-shadow(0 0 20px rgba(201,160,99,.65));

  /* 縦に落ちる動き（速度は個体ごとに後で変える） */
  animation:
    sp-fall 7s linear infinite,
    sp-twinkle 1.2s ease-in-out infinite alternate;
  will-change: transform, opacity, filter;
}

/* 星の尾（縦の光線） */
.sparkle-field .sparkle::after{
  content:"";
  position: absolute;
  left: 50%;
  top: -22px;
  width: 2px;
  height: 24px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom,
    var(--sp-mid) 0%,
    rgba(255,216,107,.6) 40%,
    rgba(255,216,107,0) 100%
  );
  filter: blur(0.4px);
  opacity: .9;
}

/* 縦にストンと落ちる */
@keyframes sp-fall{
  0%   { transform: translate3d(0,-10vh,0); opacity:.0; }
  5%   { opacity: .9; }
  100% { transform: translate3d(0,110vh,0); opacity: 0; }
}

/* きらめき（軽い負荷で） */
@keyframes sp-twinkle{
  from { opacity: .6; }
  to   { opacity: 1;  }
}

/* 粒ごとに：左右位置・開始タイミング・サイズ・速度をバラす */
.sparkle-field .sparkle:nth-child(1)  { left: 8%;  animation-duration: 5.5s, 1.1s; animation-delay: .0s, .0s;  width:7px; height:7px; }
.sparkle-field .sparkle:nth-child(2)  { left: 18%; animation-duration: 6.2s, 1.0s; animation-delay: .6s, .1s;  width:9px; height:9px; }
.sparkle-field .sparkle:nth-child(3)  { left: 28%; animation-duration: 7.4s, 1.3s; animation-delay: 1.2s, .2s; }
.sparkle-field .sparkle:nth-child(4)  { left: 38%; animation-duration: 6.8s, 1.1s; animation-delay: .9s,  .0s; }
.sparkle-field .sparkle:nth-child(5)  { left: 48%; animation-duration: 5.8s, 1.4s; animation-delay: .3s,  .2s; width:10px; height:10px; }
.sparkle-field .sparkle:nth-child(6)  { left: 58%; animation-duration: 7.8s, 1.2s; animation-delay: 1.5s, .1s; }
.sparkle-field .sparkle:nth-child(7)  { left: 68%; animation-duration: 6.0s, 1.0s; animation-delay: .2s,  .0s; width:7px; height:7px; }
.sparkle-field .sparkle:nth-child(8)  { left: 78%; animation-duration: 8.5s, 1.5s; animation-delay: 2.0s, .2s; }
.sparkle-field .sparkle:nth-child(9)  { left: 22%; animation-duration: 6.6s, 1.1s; animation-delay: 1.3s, .1s; }
.sparkle-field .sparkle:nth-child(10) { left: 34%; animation-duration: 7.2s, 1.0s; animation-delay: .5s,  .0s; width:9px; height:9px; }
.sparkle-field .sparkle:nth-child(11) { left: 66%; animation-duration: 5.9s, 1.2s; animation-delay: .8s,  .1s; }
.sparkle-field .sparkle:nth-child(12) { left: 88%; animation-duration: 7.6s, 1.3s; animation-delay: 1.7s, .2s; }

/* モーション弱め希望のOS設定に配慮（任意） */
@media (prefers-reduced-motion: reduce){
  .sparkle-field .sparkle{ animation: none; opacity: 0; }
}

.top_img{
    margin-bottom: -70px;
}

@keyframes popIn {
  0%   { opacity: 0; transform: translateY(14px) scale(.96); }
  60%  { opacity: 1; transform: translateY(0)    scale(1.02); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

/* 対象3枚に適用（読み込みで自動再生） */
.karikyu, .syogetu, .kaisetu {
  opacity: 0;
  will-change: opacity, transform;
  animation: popIn .65s cubic-bezier(.2,.7,.2,1) forwards;
}

/* 順番にディレイ（好みで数値調整OK） */
.karikyu { animation-delay: 2.5s; }
.syogetu { animation-delay: 3s; }
.kaisetu { animation-delay: 3.5s; }

/* 影をほんのり（任意） */
.karikyu, .syogetu, .kaisetu {
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.12));
}

/* 動きが苦手設定の人へ配慮（任意） */
@media (prefers-reduced-motion: reduce){
  .karikyu, .syogetu, .kaisetu { animation: none; opacity: 1; }
}

.karikyu{
     position: absolute;
  /* 中央寄せ例：頬のあたり  */
  top: 42%;                   /* 縦位置（%は画像に対して相対） */
  left:0%;                  /* 横位置 */
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  z-index: 2;                 /* 女性の上に来るように */
  pointer-events: none;       /* クリック干渉させたくない時 */
    
}

.syogetu{
    position: absolute;
  /* 中央寄せ例：頬のあたり  */
  top: 55%;                   /* 縦位置（%は画像に対して相対） */
  left:0%;                  /* 横位置 */
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  z-index: 2;                 /* 女性の上に来るように */
  pointer-events: none;       /* クリック干渉させたくない時 */
}
.kaisetu{
    position: absolute;
  /* 中央寄せ例：頬のあたり  */
  top: 68%;                   /* 縦位置（%は画像に対して相対） */
  left:0%;                  /* 横位置 */
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  z-index: 2;                 /* 女性の上に来るように */
  pointer-events: none;       /* クリック干渉させたくない時 */
}

/* 初期状態：見えない＆少し下で待機 */
.nayami{
  opacity: 0;
  transform: translateY(14px) scale(.98);
  will-change: opacity, transform;
  display: block;       /* 画像の余白ズレ防止 */
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.12)); /* 任意 */
}
/* 初期状態：見えない＆少し下で待機 */
.nayami2{
  opacity: 0;
  transform: translateY(14px) scale(.98);
  will-change: opacity, transform;
  display: block;       /* 画像の余白ズレ防止 */
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.12)); /* 任意 */
    margin-top: -70px;
}

/* 入ってきたら一度だけ “ふわっ” */
.is-inview02{
  animation: popIn02 .65s cubic-bezier(.2,.7,.2,1) forwards;
}


@keyframes popIn02{
  0%   { opacity:0; transform: translateY(14px) scale(.98); }
  60%  { opacity:1; transform: translateY(0)    scale(1.02); }
  100% { opacity:1; transform: translateY(0)    scale(1); }
}

/* 入ってきたら一度だけ “ふわっ” */
.is-inview{
  animation: popIn .65s cubic-bezier(.2,.7,.2,1) forwards;
}


@keyframes popIn{
  0%   { opacity:0; transform: translateY(14px) scale(.98); }
  60%  { opacity:1; transform: translateY(0)    scale(1.02); }
  100% { opacity:1; transform: translateY(0)    scale(1); }
}

/* 動きが苦手な人への配慮（任意） */
@media (prefers-reduced-motion: reduce){
  .nayami{ opacity:1; transform:none; }
  .is-inview{ animation:none; }
}

.mana{
    width: 30%;
}

/* 重ねるアイコン */
.haiti{
  position: absolute;
  /* 中央寄せ例：頬のあたり  */
  top: 28%;                   /* 縦位置（%は画像に対して相対） */
  left: 20%;                  /* 横位置 */
  transform: translate(-50%, -50%);
  height: auto;
  z-index: 2;                 /* 女性の上に来るように */
  pointer-events: none;       /* クリック干渉させたくない時 */
}
.haiti2{
  position: absolute;
  /* 中央寄せ例：頬のあたり  */
  top: 15%;                   /* 縦位置（%は画像に対して相対） */
  left: 30%;                  /* 横位置 */
  transform: translate(-50%, -50%);
  height: auto;
  z-index: 2;                 /* 女性の上に来るように */
  pointer-events: none;       /* クリック干渉させたくない時 */
}
.haiti3{
  position: absolute;
  /* 中央寄せ例：頬のあたり  */
  top: 5%;                   /* 縦位置（%は画像に対して相対） */
  left: 50%;                  /* 横位置 */
  transform: translate(-50%, -50%);
  height: auto;
  z-index: 2;                 /* 女性の上に来るように */
  pointer-events: none;       /* クリック干渉させたくない時 */
}
.haiti4{
  position: absolute;
  /* 中央寄せ例：頬のあたり  */
  top: 15%;                   /* 縦位置（%は画像に対して相対） */
  left: 70%;                  /* 横位置 */
  transform: translate(-50%, -50%);
  height: auto;
  z-index: 2;                 /* 女性の上に来るように */
  pointer-events: none;       /* クリック干渉させたくない時 */
}
.haiti5{
  position: absolute;
  /* 中央寄せ例：頬のあたり  */
  top: 28%;                   /* 縦位置（%は画像に対して相対） */
  left: 80%;                  /* 横位置 */
  transform: translate(-50%, -50%);
  height: auto;
  z-index: 2;                 /* 女性の上に来るように */
  pointer-events: none;       /* クリック干渉させたくない時 */
}





:root{
  /* サイズ＆色をここで調整 */
  --arrow-size: clamp(84px, 12vw, 160px);
  --arrow-box:  calc(var(--arrow-size) * 1.45);
  --brand-1:#e7cabc;     /* ピンクゴールド明 */
  --brand-2:#c9a063;     /* ゴールド中間   */
  --glow:#ffd9a6;        /* 外側グロー色   */
}

.section-arrow.flash{
  display:flex; justify-content:center; align-items:center;
  margin-block: clamp(28px, 8vw, 120px);
}

.arrow-link{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:var(--arrow-box); height:var(--arrow-box);
  text-decoration:none; user-select:none;
}

.arrow{
  width:var(--arrow-size); height:var(--arrow-size); display:block;
  filter: drop-shadow(0 6px 18px rgba(201,160,99,.55)) drop-shadow(0 0 22px rgba(255,217,166,.55));
  animation: bounceHard .9s cubic-bezier(.2,.8,.2,1) infinite,
             glowPulse 1.6s ease-in-out infinite alternate;
}

/* 走るハイライト */
.arrow .dash{
  stroke-dasharray: 16 160;
  stroke-dashoffset: 0;
  opacity:.9;
  animation: dashRun 1.2s linear infinite;
}

/* 放射リング（外側エフェクト） */
.section-arrow.flash .ring{
  position:absolute; inset:0; border-radius:50%;
}
.section-arrow.flash .ring::before,
.section-arrow.flash .ring::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow: 0 0 0 0 rgba(201,160,99,.35), 0 0 40px 8px rgba(255,217,166,.35) inset;
  animation: pulseRing 1.4s ease-out infinite;
}
.section-arrow.flash .ring::after{
  animation-delay: .35s;
  opacity:.7;
}

/* ラベル */
.section-arrow.flash .label{
  position:absolute; bottom: -14px; left:50%; transform:translateX(-50%);
  font-size: clamp(12px, 2.6vw, 14px);
  letter-spacing:.24em; color:#744f22; font-weight:700;
  text-shadow: 0 1px 0 #fff, 0 0 10px rgba(255,217,166,.65);
  pointer-events:none;
}

/* ホバー（PC） */
@media (hover:hover){
  .arrow-link:hover .arrow{ animation-duration:.8s; transform: translateY(2px) scale(1.04); }
}

/* アニメーション */
@keyframes bounceHard{
  0%   { transform: translateY(0) scale(1); }
  45%  { transform: translateY(18%) scale(1.02, .92); }
  60%  { transform: translateY(8%)  scale(1.03, .97); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes glowPulse{
  0%   { filter: drop-shadow(0 6px 18px rgba(201,160,99,.55)) drop-shadow(0 0 18px rgba(255,217,166,.45)); }
  100% { filter: drop-shadow(0 10px 26px rgba(201,160,99,.75)) drop-shadow(0 0 34px rgba(255,217,166,.75)); }
}
@keyframes dashRun{
  to { stroke-dashoffset: -176; }
}
@keyframes pulseRing{
  0%   { transform: scale(.86); opacity:.6; box-shadow: 0 0 0 0 rgba(201,160,99,.38), 0 0 40px 8px rgba(255,217,166,.35) inset; }
  70%  { transform: scale(1.18); opacity:.15; box-shadow: 0 0 0 12px rgba(201,160,99,0), 0 0 60px 16px rgba(255,217,166,.15) inset; }
  100% { transform: scale(1.22); opacity:0; }
}

/* 低刺激モード配慮 */
@media (prefers-reduced-motion: reduce){
  .arrow, .section-arrow.flash .ring::before, .section-arrow.flash .ring::after{ animation:none; }
}




/* セクションに付けるだけでOK */
 .flash{
  background: linear-gradient(to bottom, var(--beige) 0%, var(--pink) 100%);
}

:root{
  --beige: #ffffff; /* 上：白 */
  --pink:  #3e96ef; /* 下：ネイビー */
}

/* 汎用：上ベージュ→下ピンク */
.bg-beige-pink{
  background: linear-gradient(to bottom, var(--beige) 0%, var(--pink) 100%);
}
.section-arrow.band{
    margin-block: 0;
    padding-bottom: 20px;
}

/* 初期状態：見えない＋ほんの少し下に */
.fade-up{
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

.naya{
    margin-bottom: -130px;
    margin-top: 80px;
}

/* 好きな金色にしたい場合（手早く） */
.section-arrow.flash{
  --arrow-color: #c9a063;   /* 矢印の金（中間） */
  --label-color: #c9a063;   /* “scroll” の金 */
  --dash-color:  #ffd86b;   /* 走るハイライトの金（明るめ） */
}

/* 走るハイライト線 */
.arrow .dash{ stroke: var(--dash-color); }

/* “scroll” の文字色 */
.section-arrow.flash .label{ color: var(--label-color); }
.section-arrow.flash{
  --arrow-color: var(--brand-2); /* #c9a063 相当 */
  --label-color: var(--brand-2);
  --dash-color:  var(--glow);    /* #ffd9a6 相当 */
}
.section-arrow.flash .label{
  background: linear-gradient(90deg,#8c6b2f,#ffd86b 50%,#8c6b2f);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; color: transparent;
}

.husoku p{
    text-align: center;
    font-size: 6vw;
    font-weight: bold;
    margin-top: 20px;
}

.ninzuu p{
     text-align: center;
    font-size: 5vw;
    font-weight: bold;
    margin-top: 20px;
}

#count{
    color: red;
}
#keisan{
    text-align: center;
    font-size: 2vw;
    margin-top: 10px;
}

/* サイズはCSS変数で調整可能 */
.arrow-down{
  --w: 50px;   /* 全体の幅 */
  --h: 50px;   /* 全体の高さ */
    margin: auto;
    margin-top: 20px;
  width: var(--w);
  height: var(--h);

  /* 上→下で濃くなる青グラデーション */
  background: linear-gradient(to bottom, #bfe0ff 0%, #4d90ff 55%, #0a51ff 100%);

  /* 矢印の形状をクリップ（下向き・軸＋矢じり） */
  clip-path: polygon(
    30% 0%, 70% 0%,          /* 軸の上辺 */
    70% 60%, 100% 60%,       /* 右肩 → 矢じり右端 */
    50% 100%,                /* 矢じり先端（下） */
    0% 60%, 30% 60%          /* 矢じり左端 → 左肩 */
  );

  /* 滑らか表示（任意） */
  -webkit-clip-path: polygon(
    30% 0%, 70% 0%, 70% 60%, 100% 60%, 50% 100%, 0% 60%, 30% 60%
  );
  border-radius: 6px; /* 角の僅かな丸み（好みで） */
}

.seikou{
    text-align: center;
    font-weight: bold;
    font-size: 6vw;
}

/* 画面中央に配置 */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 8vh; /* 全画面高さの中央 */
    margin-top: 20px;

}

/* ゴールドテキスト */
.seikou {
  font-size: 11vw;
  font-weight: 900;
  position: relative;
  display: inline-block;
 color: var(--gold-2);

  /* 立体感のための多層シャドウ */
  text-shadow:
    1px 1px 2px rgba(0,0,0,0.4),
    2px 2px 4px rgba(0,0,0,0.6),
    4px 4px 6px rgba(0,0,0,0.4);
  overflow: hidden;
}

/* ゆっくりキラッと光る帯 */
.seikou::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.9) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  animation: shine 6s infinite; /* ゆっくり6秒間隔 */
    
}

@keyframes shine {
  0% { left: -100%; }
  100% { left: 150%; }
}

.nensyu p{
     text-align: center;
    font-size: 5vw;
    font-weight: bold;
    margin-top: 80px;
}



/* マーカー対象 */
.hi-marker{
  --marker-h: 0.3em;     /* マーカーの太さ */
  --overshoot: .25em;    /* 文字からはみ出す量 */
  position: relative;
  z-index: 0;
  padding: 0 .05em;      /* 文字の端が欠けないよう少し余白 */
}

/* 蛍光ペン（下地） */
.hi-marker::before{
  content:"";
  position:absolute;
  left: calc(-1 * var(--overshoot));
  bottom: .05em;               /* 文字の下をなぞる位置 */
  height: var(--marker-h);
  width: 0;                    /* 初期は0 → アニメで伸ばす */
  border-radius: .25em;
  z-index: -1;
  background:
    linear-gradient(90deg,#ff9ad6 0%, #ff58bd 50%, #ff1a9a 100%); /* ピンク基調 */
  /* 蛍光感（にじみ） */
  box-shadow:
    0 0 10px rgba(255, 26, 154, .35),
    0 0 18px rgba(255, 26, 154, .25);
  transition: width 1.1s cubic-bezier(.2,.7,.2,1);
}

/* 可視になったら幅を一気に伸ばす（左右に少しはみ出す） */
.is-highlighted .hi-marker::before{
  width: calc(100% + var(--overshoot) * 2);
}

/* 低モーション環境への配慮 */
@media (prefers-reduced-motion: reduce){
  .hi-marker::before{ transition: none; width: calc(100% + var(--overshoot) * 2); }
}

.rei1{
    width:40%;
    height: 80%;
    margin-top: 30px;
    
}

.syokugyo1{
    background-color: azure;
    text-align: center;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    font-size: 3vw;
}
.syokugyo2{
    background-color: midnightblue;
    text-align: center;
    color: #fff;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    font-size: 3vw;
    margin-top: 10px;
}
.rei{
    width: 80%;
    margin: auto;
    background-color: aliceblue;
}

.rei {
  display: flex;         /* 横並びにする */
    margin-top: 20px;
}
  
#size{
    width: 30px;
    height: 30px;
    
    
}

.yazirusi {
  display: flex;
  justify-content: center; /* 中央寄せ */
  gap: 6px;               /* 矢印同士の間隔 */
}

.tensyoku{
    margin-left: 30px;
    margin-top: 10px;
    width: 60%;
}

.purasu {
  font-size: 6vw;
  font-weight: 900;
  position: relative;
  display: inline-block;
 color: var(--gold-2);

  /* 立体感のための多層シャドウ */
  text-shadow:
    1px 1px 2px rgba(0,0,0,0.4),
    2px 2px 4px rgba(0,0,0,0.6),
    4px 4px 6px rgba(0,0,0,0.4);
  overflow: hidden;
    
      display: flex;
  justify-content: center;
  align-items: center;
  height: 7vh; /* 全画面高さの中央 */
    margin-top: 10px;

    
}

/* ゆっくりキラッと光る帯 */
.purasu::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.9) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  animation: shine 6s infinite; /* ゆっくり6秒間隔 */
    
}

@keyframes shine {
  0% { left: -100%; }
  100% { left: 150%; }
}
.img0 p{
    text-align: center;
    font-size: 12px;
    
}

.ans{
     background-color: #3e96ef;
    padding-bottom: 30px;
    
}
.kaiketu{
    text-align: center;

    padding-top: 30px;
    color: midnightblue;
    width: 95%;
    margin: auto;
    border-radius: 10px;
}

.kaiketu p{
    margin-top: 10px;
    color: #fff;
}

.kaiketu span{
   font-size: 7vw;
}
.fadein-target {
  opacity: 0;                   /* 初期は透明 */
  transform: translateY(20px);  /* 少し下から */
  transition: opacity 1s ease, transform 1s ease;
}

.fadein-target.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.highlight {
  color: #e6007e;               /* ビビッドなピンク */
  font-weight: 900;             /* 太字で強調 */
  background: linear-gradient(90deg, #ff9ad6, #ff1a9a);
  -webkit-background-clip: text;
    
    
    
  -webkit-text-fill-color: transparent; /* グラデーション文字 */
  background-clip: text;
  position: relative;
}

/* 下に蛍光ペン風の強調ラインを追加したい場合 */
.highlight::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 6px;
  background: rgba(255, 26, 154, 0.4);
  z-index: -1;
  border-radius: 3px;
}

.riyuu{
    background-color: #fff;
    width: 90%;
    margin: auto;
    border-radius: 10px;
    
}

.t01{
    font-size: 5vw;
    padding-top: 20px;
    padding-left: 20px;
}
.riyuu01{
    margin-top: 20px;
}

.t01 {
  font-weight: 900;
  font-size: 28px;
  background: linear-gradient(
    90deg,
    #3e96ef 0%,
    #2f7fd6 40%,
    #1a5fb4 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.t02{
    margin-left: 20px;
    font-size: 3vw;
    margin-top: 10px;
    text-align: center;
}
.setumei{
    width: 90%;
    text-align: center;
    margin: auto;
    margin-top: 10px;

    padding-bottom: 10px;
    
}
.setumei span{
    color: red;
    font-weight: bold;
}
.risutora{
    background-color: #c0c0c0;
    padding-bottom: 20px;
    
}
.risutora p{
    text-align: center;
    font-size: 6vw;
    font-weight: bold;
    padding-top: 30px;
    
}
.situgyo{
    width: 90%;
    margin: auto;
    margin-top: 20px;
    
}
.risutora span{
    color: red;
    font-weight: bold;
}
.son01{
    text-align: center;
    font-size: 5vw;
    margin-top: 30px;
    font-weight: bold;
}
.size01{
    font-size: 4vw;
}
.son02{
    text-align: center;
    font-size: 5vw;
    font-weight: bold;
    padding-top: 30px; 
}

.son02{
  display: inline; /* 文字幅に合わせる */
  font-weight: 700;
  background-image: linear-gradient(90deg, #ff9ad6, #ff1a9a);
  background-repeat: no-repeat;
  background-position: left 85%;     /* テキストの下の方に敷く */
  background-size: 0% 0.6em;         /* 初期は幅0% */
  transition: background-size 1s ease;


}

.son02.is-highlighted{
  background-size: 100% 0.6em;       /* 可視化で一気に伸びる */
}

/* 低モーション配慮（任意） */
@media (prefers-reduced-motion: reduce){
  .son02{ transition: none; }
  .son02.is-highlighted{ background-size: 100% 0.6em; }
}

.son {
  text-align: center; /* 子要素を中央寄せ */
  padding-bottom: 30px;
}
.huan{
    color: #000;
}
.huan00{
    padding-top: 10px;
    padding-bottom: 50px;
}
.huan00 span{
    background-color: #000;
    color: #fff;
    padding: 10px;
}
.daizyoubu{
     text-align: center;
    font-size: 5vw;
    font-weight: bold;
    padding-top: 10px; 
    
}
.marker-target {
  position: relative;
  display: inline; /* テキスト幅に合わせる */
  font-weight: bold;
  background-image: linear-gradient(90deg, #ff9ad6, #ff1a9a);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 0.6em;     /* 初期は幅ゼロ */
  transition: background-size 1s ease;
}

.marker-target.is-highlighted {
  background-size: 100% 0.6em;   /* アニメで横に伸びる */
}

.zinzai{
    text-align: center;
    font-size: 5vw;
    font-weight: bold;
    padding-top: 10px; 
    margin-top: 30px;
}
#motome{
    font-size: 6vw;
    shape-margin: -10px;
}
.zin01{
    background-color: aliceblue;
}

.mikeiken00{
    margin-top: 100px;
}
.mikei{
    width: 35%;
}

.rapp {
  display: flex;          /* 横並びにする */
  align-items: center;    /* 縦の位置を揃える（中央揃え） */
  gap: 12px;              /* 画像とテキストの間隔 */
}

.rapp img.mikei {
           /* 必要に応じてサイズ調整 */
  height: auto;
}

.rapp .prhu p {
    
}

.prhu{
  width: 60%;  
}

.pason{width: 40%;}



.mess00{
    font-weight: bold;
    font-size: 4vw;
}

.marker {
  position: relative;
  display: inline-block;
  font-weight: bold;
  z-index: 1;
}

.marker::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.1em;              /* 文字の少し下に配置 */
  width: 100%;
  height: 0.6em;              /* マーカーの高さ */
  background: #ff9ad6;        /* 蛍光ピンク */
  opacity: 0.6;               /* 半透明で蛍光感 */
  z-index: -1;                /* テキストの下に敷く */
  border-radius: 3px;         /* 角を丸くして柔らかく */
}
.kome{
    font-size: 3vw;
    text-align: center;
}

.arrow-right {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;    /* 上の透明部分 */
  border-bottom: 15px solid transparent; /* 下の透明部分 */
  border-left: 25px solid #3e96ef;       /* 右向き矢印（色指定） */
}
.keireki{
     width: 35%;
    font-size: 4vw;
    text-align: center;
    padding: 10px;
    
}
.goal{
    background-color: #3e96ef;
    width: 35%;
    font-size: 4vw;
     text-align: center;
    padding: 10px;
}
.rapp02 {
  display: flex;          /* 横並びにする */
  align-items: center;    /* 縦の位置を揃える（中央揃え） */
   gap: 16px;  /* 画像とテキストの間隔 */
    height: 80px;
    margin: auto;
     justify-content: center;
}
.kome{
    margin-top: 20px;
}

/* コンテナ */
.slider {
  position: relative;
  overflow: hidden;
}

/* 横に並べるレール */
.slider-track {
  display: flex;
  transition: transform .5s ease;
  will-change: transform;
}

/* 各スライド（幅をコンテナ幅に合わせる）*/
.slider .mikeiken {
  min-width: 100%;
  box-sizing: border-box;
  padding: 16px;           /* 余白は好みで */
}

/* ナビボタン */
.slider .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
}
.slider .nav:hover { background: rgba(0,0,0,.65); }
.slider .nav.prev { left: 8px; }
.slider .nav.next { right: 8px; }

/* スマホでボタンが押しやすいように */
@media (max-width: 600px) {
  .slider .nav { width: 40px; height: 40px; font-size: 22px; }
}
.zyukou{
    text-align: center;
    font-size: 5vw;
    font-weight: bold;
}

.zisseki{
    background-color: aliceblue;
    width: 90%;
    margin: auto;
    margin-top: 30px;
}

.zisseki00{
    font-size: 4vw;
}
.zisseki01{
    font-size: 3vw;
}

.zisseki01 span{
    font-size: 12vw;
    padding-right: 10px;
    font-weight: bold;
    
}

.purasu1 {
   color: var(--gold-2);
  /* 立体感のための多層シャドウ */
  text-shadow:
    1px 1px 2px rgba(0,0,0,0.4),
    2px 2px 4px rgba(0,0,0,0.6),
    4px 4px 6px rgba(0,0,0,0.4);
  overflow: hidden;
}
.zissekiimg{
    margin-top: 0px;
    width: 90%;
    
}


.zisseki01 {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0;
  white-space: nowrap;  /* ← ここがポイント！ */
}
.pason p{
        text-align: center;
}
.tyuui{
    text-align: center;
}
.tyuui P{
    font-size: 2.5vw;
}
.douga{
    text-align: center;
  font-size: 5vw;
    font-weight: bold;
    padding-top: 30px;
}

.manzoku{
    margin-top: 30px;
    background-color: aliceblue;
}

.nebygurahu{
    width: 90%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}
.grahusetu{
    text-align: center;
}
.merit{
    text-align: center;
    font-size: 5vw;
    margin-top: 50px;
    font-weight: bold;
    
}

.douga{

  font-weight:700;
  line-height:1.2;
  padding-bottom:.05em;                  /* 下端のにじみ余白 */
  /* 下から0.65emだけピンク、他は透明の背景グラデーション */
  background-image:
    linear-gradient(transparent calc(100% - 0.65em),
                    rgba(255,105,180,.55) calc(100% - 0.65em));
  background-size:0% 100%;              /* 最初は0% */
  background-repeat:no-repeat;
  background-position:left bottom;
  transition:background-size 1.0s cubic-bezier(.2,.7,0,1);
width: 70%;
    margin: auto;

}

/* 視界に入ったら横方向にスーッと塗られる */
.douga.is-marked{
  background-size:100% 100%;
}

/* モダン環境ならJSなしのスクロール連動(対応ブラウザで自動有効) */
@supports (animation-timeline: view()){
  .douga{
    animation: marker-fill 1s both ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 20%;
  }
  @keyframes marker-fill { to { background-size:100% 100%; } }
}

.merit {
  opacity: 0;               /* 最初は透明 */
  transform: translateY(20px); /* 下に少しずらしておく */
  transition: opacity 1s ease, transform 1s ease;
}

.merit.is-visible {
  opacity: 1;
  transform: translateY(0); /* 元の位置に戻る */
}

.checklist {
  list-style: none;         /* デフォルトの黒丸を消す */
  padding: 0;
  margin: 0;
}

.checklist li {
  position: relative;
  padding-left: 2em;        /* チェックアイコン分の余白 */
  margin-bottom: 1em;
  font-size: 16px;
  line-height: 1.6;
}

.checklist li::before {
  content: "✔";             /* チェックマーク */
  position: absolute;
  left: 0;
  top: 0;
  color: hotpink;           /* ピンク系 */
  font-weight: bold;
  font-size: 1.2em;
}
.checklist{
    width: 90%;
    margin: auto;
    background-color: #fff;
    padding: 30px;
    margin-top: 30px;
}
.kanso{
    text-align: center;
    font-size: 5vw;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 30px;
}
.voice00{
    width: 90%;
    margin: auto;
    border-radius: 10px;
    background-color: midnightblue;
}

.voice-box {
  align-items: center;
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.avatar {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;        
  overflow: hidden;          
  margin-right: 16px;
  background: #f0f0f0;       
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar svg {
  width: 90%;
  height: 90%;
}

.voice-text {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}
.voice-box{display:flex;align-items:center;background:#fff;border-radius:12px;padding:16px;margin-bottom:20px;box-shadow:0 4px 8px rgba(0,0,0,.1)}
.avatar{flex-shrink:0;width:60px;height:60px;border-radius:50%;overflow:hidden;margin-right:16px;background:#f7f7f7;display:flex;align-items:center;justify-content:center}
.avatar svg{width:90%;height:90%}
.voice-text{font-size:15px;line-height:1.6;color:#333}

.voice-text{
    font-size: 3vw;
}
.foot{
    text-align: center;
    background-color: #191970;
    color: #fff;
    padding-bottom: 20px;
    padding-top: 20px;
}
.foot P{
    margin-top: 10px;
    font-size: 3vw;
}


.circle-line-btn{
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 200px;
  height: 200px;
  z-index: 9999;
  text-decoration: none;
}

.circle-svg{
  width: 100%;
  height: 100%;
  display: block;      /* 余白防止 */
}

/* 外周だけ回転させる */
.circle-svg .ring{
  animation: spin 15s linear infinite;
  /* SVGの回転中心をviewBox中央に固定（Safari対策込み） */
  transform-origin: 100px 100px;  /* viewBox座標 */
  transform-box: view-box;
}

@keyframes spin{
  from{ transform: rotate(0deg); }
  to  { transform: rotate(360deg); }
}

/* スマホで少し小さく */
@media (max-width: 480px){
  .circle-line-btn{ width: 150px; height:150px; right:16px; bottom:16px; }
  .circle-svg text{ font-size: 12px; }
}

.kiyaku{
    text-align: center;
    margin-top: 50px;
    font-size: 5vw;
    font-weight: bold;
}

.naiyou00{
    margin-top: 30px;
    
}

.naiyou{
    width: 90%;
    margin: auto;
}
.bunnsyou{
    margin-top: 20px;
}
.nannsyou{
    font-weight: bold;
}
.kaitei{
    margin-top: 20px;
}

.foot00{
      /* 全体の高さに適用 */
 
background-color: #001f4d;
    padding-top: 50px;
    margin-top: 30px;
}
.rogo00{
    margin: auto;
    margin-top: 50px;
    background-color: #fff;
    
}

.foot11{
    text-align: center;
    color: #fff;
    padding-bottom: 20px;
    padding-top: 20px;
}
.foot11 P{
    margin-top: 10px;
    font-size: 3vw;
}
.rogo11{
    width: 60%;
}