@charset "UTF-8";

/* ======================
   BASE
====================== */
body{
  background:#ececec;color:#333;width:100%;
  font-size:18px;line-height:1.6;word-wrap:break-word;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Sans","Hiragino Kaku Gothic ProN","游ゴシック  Medium",meiryo,sans-serif;
}
img{vertical-align:bottom;}
a{display:block;text-decoration:none;}
a:link{color:#FFF;}
.w100{width:100%;height:auto;}
.container{background:#fff;width:100%;max-width:800px;margin:0 auto;padding:0;}
section{position:relative;text-align:center;}
section .section__title,section .section__contents{text-align:center;}
section img{margin:0 auto;}
html,body{overflow-x:hidden;} /* はみ出し保険 */

/* ======================
   ANIMATION（必要なら）
====================== */
.fade-up{opacity:0;transform:translateY(100px);transition:opacity .5s ease .5s,transform .5s ease .5s;}
.fade-up.is-visible{opacity:1;transform:translateY(0) scale(1);}
.zoom-in{opacity:0;transform:scale(0);transition:opacity .5s ease .5s,transform .5s ease .5s;}
.zoom-in.is-visible{opacity:1;transform:translate(0,-50%) scale(1);}
@keyframes catch{0%{transform:scale(4);opacity:0;}100%{transform:scale(1);opacity:1;}}

/* ======================
   HEADER
====================== */
header{position:relative;}
header img.hero01,header img.hero02,header img.hero03,header img.hero04{position:absolute;}
header img.hero01{top:10%;right:8%;z-index:2;animation:catch .2s .4s linear both;}
header img.hero02{top:10%;right:25%;z-index:1;animation:catch .2s .7s linear both;}
header img.hero03{top:21%;right:55%;z-index:3;animation:catch .2s 1s linear both;}
header img.hero04{top:7%;right:14.5%;z-index:4;animation:catch .2s .1s linear both;}

/* ======================
   CV
====================== */
.cv-area{padding:10px 0 70px;}
.cv-area img.arrow-down{margin-bottom:10px;}
.cv-area img.cv-btn{animation:bounce 2s ease infinite;}
#cv01{background:url(images/cv01-bg.png) no-repeat center top;}
@keyframes bounce{
  0%,100%,20%,50%,80%{transform:scale(1);}
  40%{transform:scale(1.2);}
  60%{transform:scale(1.1);}
}

/* ======================
   WHAT / POINT / FAQ
====================== */
#what img.what-txt{position:absolute;top:50%;left:4%;transform:translate(0,-50%);}
#point .section__contents{display:flex;flex-direction:column;gap:25px;background:#dcf0fa;padding:30px;}
#faq .section__title{margin-bottom:20px;}
#faq .section__contents{padding:30px 30px 50px;display:flex;flex-direction:column;gap:50px;}

/* ======================
   STEP（背景色そのまま／背景切れ防止）
====================== */
#step{background:#feebef;}
#step .section__contents{
  padding:50px 30px;display:flex;flex-direction:column;gap:25px;
  padding-bottom:40px !important;   
  margin-bottom:0 !important;
}

/* ======================
   VIDEO（サムネ→クリック再生）
====================== */

/* 動画コンテナ（中央寄せ） */
#catch .video-wrap{
  width:100%;
  max-width:800px;
  margin:0 auto;
  box-sizing:border-box;
  overflow:hidden;
}

/* サムネ画像と動画の共通仕様 */
#catch .video-thumb,
#catch .hero-video{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  box-sizing:border-box;
  background:#000;
}

/* サムネ特有：クリック可能 */
#catch .video-thumb{
  cursor:pointer;
}




/* ======================
   BANNER（動画とCVの間に画像を置く場合）
====================== */
.banner{text-align:center;padding:30px 0px 0px;background:#fff;}
.banner img{width:100%;height:auto;display:block;margin:0 auto;}
@media (max-width:800px){.banner{padding:10px 0px 0px;}}

/* ======================
   EVIDENCE
====================== */
#evidence{
  position:relative;overflow:hidden;
  margin-top:-30px !important;  
  padding-top:0 !important;
}
#evidence .evidence__bg{
  position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:800px;background:url("images/evidence-bg.jpg") center top repeat-y;background-size:contain;
  pointer-events:none;z-index:0;
}
#evidence .evidence__inner{
  position:relative;z-index:1;max-width:800px;margin:0 auto;
  padding:0 20px 40px;box-sizing:border-box;
}
#evidence .evidence__title{text-align:center;margin:0 0 24px;}
#evidence .evidence__title img{width:100%;max-width:780px;height:auto;display:block;margin:0 auto;}
#evidence .evidence__list{list-style:none;margin:0;padding:0;}
#evidence .evidence__list li{display:none;margin-bottom:16px;}
#evidence .evidence__list li:first-child{display:block;} /* 初期は1枚のみ */
#evidence .evidence__list li img{display:block;width:100%;height:auto;border-radius:4px;}
#evidence .evidence__more{text-align:center;margin:8px 0;}
#evidence .evidence__btn{
  display:inline-block;padding:10px 24px;border-radius:12px;
  background:#fff;color:#e55684;border:2px solid #e55684;
  font-size:16px;font-weight:700;line-height:1.2;cursor:pointer;
  transition:all .3s ease;
}
#evidence .evidence__btn:hover{background:#ffe5ed;opacity:.95;}

@media (max-width:800px){
  #evidence .evidence__bg{width:100%;background-size:cover;}
  #evidence .evidence__inner{padding:0 14px 24px;}
  #evidence .evidence__title{margin-bottom:16px;}
  #evidence .evidence__title img{max-width:95%;}
}

/* PCだけ：ボタンの文字サイズ＆上下マージンを2倍 */
@media (min-width:801px){
  #evidence .evidence__btn{font-size:32px;padding:10px 24px;border-width:2px;}
  #evidence .evidence__more{margin:16px 0;}
}

/* ======================
   LINE（下部固定バナーを使うなら）
====================== */
#line{
  position:fixed;bottom:0;display:none;opacity:0;transform:translateY(100px);
  transition:opacity 3s ease-in-out,transform 3s ease-in-out;
}
@media (max-width:800px){
  #line{display:block;transition:opacity 1s ease-in-out,transform 1s ease-in-out;}
}
@media (min-width:800px){
  #line.fade-in-up{display:block;opacity:1;transform:translateY(0);}
}

/* ======================
   FOOTER
====================== */
footer{padding:0 20px;text-align:center;background:#5c5c5c;}
footer p#copyright{color:#fff;}

/* ======================
   SP 調整
====================== */
@media (max-width:800px){
  /* HEADER 縮小 */
  header img.hero01{top:10%;right:8%;width:23%;}
  header img.hero02{top:10%;right:25%;width:37%;}
  header img.hero03{top:21%;right:55%;width:15%;}
  header img.hero04{top:6%;right:10.5%;width:52%;}
  /* CV 間隔 */
  .cv-area{padding:6px 0 30px;}
  .cv-area img.arrow-down{margin-bottom:5px;width:25%;}
  .cv-area img.cv-btn{width:90%;}
  /* WHAT/POINT/FAQ */
  #what img.what-txt{width:52%;}
  #point .section__contents{gap:10px;padding:15px;}
  #faq .section__title{margin-bottom:0;}
  #faq .section__title img{width:60%;}
  #faq .section__contents{padding:25px 15px 25px;gap:25px;}
  /* STEP 内側 */
  #step .section__contents{padding:25px 15px;gap:15px;}
  #step .section__contents img.sep{width:12%;}
  /* FOOTER */
  footer p#copyright{font-size:2.5vw;}
}