@charset "UTF-8";
/* CSS Document */
/*-------------------------------------------------------------------------------------
PC用レイアウト（768px以上スクリーン）
----------------------------------------------------------------------------------------*/
/*--------------------------------------------------
共通設定(PC)
-----------------------------------------------------*/
/*body全体の初期スタイル調整*/
body {
  font-size: 62.5%; /*emの計算をしやすくするための定番設定*/
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  color: #000;
  margin: 0 auto;

}
/*リンク文字の設定*/
a {
  text-decoration: none;
}

/*ブラウザのCSSをリセット*/
p {
  margin: 0 !important;
  padding: 0 !important;
}
/*セクションエリアの共通設定*/
section {
  clear: both;
  overflow: hidden;
}


/*--------------------------------------------------
全体レイアウト／背景設定（PC）
-----------------------------------------------------*/
/*全体エリア（全体背景を設定するにはここ）*/
.main {
  background-image: url("../animeimages/bg_main.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position: top left;

}
/*記事(ボディ)エリア*/
.article {
  font-size: 1.7em; /*=16px*/
    overflow: hidden;

}
/*記事(ボディ)エリアの行間*/
.article p {
  line-height: 1.6;
}

/*カラム全体の幅を変更する*/
.article, .top_image_in {
  max-width: 640px;
  margin: 0 auto; /*真ん中に要素を置きたいときに使う*/
}



/*--------------------------------------------------
フェードイン
-----------------------------------------------------*/

.fadein {
    opacity : 0;
    transform: translateY(10px);
    transition: all 2s;
}

/*左からフェードイン*/
.fadeinleft {
    opacity : 0;
    transform: translateX(-40px);
    transition: all 1.5s;
}
/*右からフェードイン*/
.fadeinright {
    opacity : 0;
    transform: translateX(40px);
    transition: all 1.5s;
}




/*--------------------------------------------------
ファーストビュー設定
-----------------------------------------------------*/
.top_image_in  {
  position: relative;
}
.fv_box  {
  position: absolute;
  top:0;
  left: 0;
}

.pc_img { display: block !important; }
.sp_img { display: none !important; }


.top_cta {
  background-image: url("../animeimages/bg_topcta.jpg");

}
.top_graf {
  float: left;
  width: 48%;
}
.top_txt {
  float: right;
  width: 52%;
}


.ctn_vimeo {
  margin-top: 240px;
  max-width: 950px; 
  position: relative;
}


.tit_doctorsvoice {
position: absolute; 
top: -65%; 
left: 0;
 width: 100%;
  height: 100%; 
  object-fit: contain; 
  z-index: 2;
}

.mp4_doctor {
    width: 100%;
   padding-top: 56.25%;
}



/*--------------------------------------------------
CTA設定
-----------------------------------------------------*/
.topcta_02_official {
  position: relative;
}
.topcta_02_answer {
  position: absolute;
  width: 70%;
  bottom: 38%;
  left: 15%;
}

.box_cta {
    background-color: #fff;
    padding: 0 0.5em 2em;
}

.box_cta p {
  color: #595757;
}

.sec_cta_5tokuten {
  background-image: url("../animeimages/bg_cta_5tokuten.jpg");
    padding: 0 0 1em;
    position: relative;
}

.item_cta_5tokuten {
  position: absolute;
  width: 100%;
top: 15%;
}

.btn_ani {
  display: block; /* 中央揃えのために必要 */
  margin: 0 auto;
  animation: fuwafuwa 1s ease 0s infinite alternate;
  transform-origin: center;
  cursor: pointer;
}

@keyframes fuwafuwa {
  from {
    transform: scale(0.9, 0.9);
  }
  to {
    transform: scale(1, 1);
  }
}

/*--------------------------------------------------
GIGAGIGA
-----------------------------------------------------*/
.gigagiga {
  position: relative;
}

.giga_txt {
  position: absolute;
  width: 90%;
  left: 5%;
  bottom: 28%;
}

.sec_pococe {
  position: relative;
}

.txt_event {
position: absolute;
width: 100%;
top: 1%;
}
.magagine {
position: absolute;
width: 100%;
top: 32%;
}
.crown {
position: absolute;
width: 100%;
bottom: 14.5%;
}

/*--------------------------------------------------
メディあ
-----------------------------------------------------*/
.sec_media {
  position: relative;
}

.item_media  {
  position: absolute;
  width: 94%;
  left: 3%;
  bottom: 2%;

}

.sec_story_faq {
  background-image: url("../animeimages/bg_story.jpg");
}

/*--------------------------------------------------
doctor
-----------------------------------------------------*/

.sec_doctor {
  position: relative;
}

.img_doctor {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.sec_fact {
  position: relative;
}
.graf_eiyouhusoku {
  position: absolute;
  top: 39%;

}
.honrai {
  position: absolute;
  top: 64%;
  width: 82%;
  left: 9%;

}

.sec_husoku_aging {
  position: relative;
}

.item_husoku_aging01 {
  position: absolute;
  width: 90%;
  left: 5%;
  top: 28%;
}

.item_husoku_aging02 {
  position: absolute;
  width: 90%;
  left: 5%;
  top: 50%;
}

.item_husoku_aging03 {
  position: absolute;
  width: 90%;
  left: 5%;
  top: 72%;
}

.sec_ichiran {
  position: relative;
}
.txt_ichiran {
  position: absolute;
  width: 100%;
  bottom: 0;
}

.sec_nmn300 {
  position: relative;
}
.img_nmn300 {
  position: absolute;
  width: 100%;
  bottom: 0;
}
.sec_vitamin {
  position: relative;
}
.item_vitamin {
  position: absolute;
  width: 100%;
  bottom: 0;
}

.sec_caution {
  position: relative;
}

.hukanou {
  position: absolute;
  width: 66%;
  left: 16%;
  bottom: 3%;
  
}

.sec_allinone {
  position: relative;
}

.kotae {
  position: absolute;
  width: 40%;
  left: 30%;
 top: 13%;
  
}
.txt_kotae {
  position: absolute;
  width: 90%;
  left: 5%;
  bottom: 1%;
  
}

.sec_rescom {
  position: relative;
}

.img_rescom {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  
}



/*--------------------------------------------------
5大リスク徹底対抗
-----------------------------------------------------*/
.sec_taikou {
background-color: #fff;
padding: 1em;
}

.tetteitaikou {
  width: 90%;
  margin: 2em auto 0;

}
.graf_5risk {
  width: 90%;
  margin: 0 auto;
}
.tappurihaigou {
  width: 80%;
  margin: 2em auto ;
}


/*--------------------------------------------------
変化
-----------------------------------------------------*/

.sec_henka {
  position: relative;
}

.img_henka {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  
}
.sec_eiyouhusoku {
  position: relative;
}

.txt_eiyouhusoku {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  
}





/*--------------------------------------------------
BIG3-1
-----------------------------------------------------*/

.sec_big3 {
  position: relative;
  overflow: hidden;
}

/* 背景動画 */
.sec_big3 .bg-video {
  position: absolute;
  top: 0;
  left: 0;

  min-width: 100%;
  min-height: 100%;

  width: auto;
  height: auto;

  object-fit: cover;
  object-position: center; /* ここがポイント */

  z-index: 1;
}

/* 前面の画像 */
.sec_big3 img {
  position: relative;
  z-index: 10;
  display: block;
  width: 100%;
}
/*--------------------------------------------------
BIG3-trance
-----------------------------------------------------*/
.sec_trance {
  position: relative;
}
.img_trance {
  position: absolute;
  top: 0;
  left: 0;
}

.graf_4bai {
  position: absolute;
  width: 88%;
  left: 6%;
  bottom: 1%;

  /* aspect-ratio が効かない場合 */
  height: auto;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9の比率 */
}

.graf_4bai video {
  position: absolute;
  top: 0;
   left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/*--------------------------------------------------
BIG3-vitaminc
-----------------------------------------------------*/
.sec_vitaminc{
  position: relative;
}
.drop_vitaminc {
  position: absolute;
  top: 10.3%;
  left: 0;
}
.fruits_vitaminc {
  position: absolute;
  bottom: 0;
  left: 0;
}
/*--------------------------------------------------
BIG3-PQQ
-----------------------------------------------------*/
.sec_pqq{
  position: relative;
}
.brain_pqq {
  position: absolute;
  top: 13%;
  left: 0;
}
.img_pqq {
  position: absolute;
  bottom: 0;
  left: 0;
}

/*--------------------------------------------------
other
-----------------------------------------------------*/
.sec_other{
  position: relative;
}

.other_q10 {
  position: absolute;
  width: 100%;
  left: 0;
  top: 28%;
}
.other_dha {
  position: absolute;
  width: 100%;
  left: 0;
  top: 44%;
}
.other_ripo {
  position: absolute;
  width: 100%;
  left: 0;
  top: 60%;
}

/*--------------------------------------------------
作用グラフ
-----------------------------------------------------*/
.ctn_sayou {
  background-color: #fff;
  padding: 0 0 1em;

}

.graf_sayou {
  width: 90%;
 margin: 0 auto;
}


/*--------------------------------------------------
効果効能
-----------------------------------------------------*/
.sec_kouka{
  position: relative;
}

.kouka01 {
  position: absolute;
  width: 100%;
  left: 0;
  top: 1%;
}
.kouka02 {
  position: absolute;
  width: 100%;
  left: 0;
  top: 12.3%;
}
.kouka03 {
  position: absolute;
  width: 100%;
  left: 0;
  top: 21.5%;
}
.kouka04 {
  position: absolute;
  width: 100%;
  left: 0;
  top: 30.7%;
}
.kouka05 {
  position: absolute;
  width: 100%;
  left: 0;
  top: 39.9%;
}
.graf_vitamin {
  position: absolute;
  width: 90%;
  left: 5%;
  bottom: 19%;
}

.sec_howtodrink{
  position: relative;
}

.txt_howtodrink {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}

/*--------------------------------------------------
point
-----------------------------------------------------*/
.sec_point01 {
  position: relative;
}
.img_point01 {
  position: absolute;
  width: 50%;
  right: 0;
  top: 32%;
}

.arrow_point01 {
    position: absolute;

  width: 40%;
  left: 30%;
  bottom: 27%;
}

.sec_point02 {
  position: relative;
}
.img_point02 {
  position: absolute;
  width: 100%;
  right: 0;
  top: 45%;
}

.sec_point03 {
  position: relative;
}
.img_point03 {
  position: absolute;
  width: 100%;
  right: 0;
  top: 27%;
}

/*--------------------------------------------------
voice
-----------------------------------------------------*/
.sec_voice {
  background-image: url("../animeimages/bg_voice.jpg");
  background-size: cover;
    padding: 2em 0;
}

.tit_voice {
  width: 95%;
  margin: 0 auto ;
}

.box_voice {
  margin-top: 1em;
  position: relative;
}

.tit_voice01 {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
/*--------------------------------------------------
メッセージ
-----------------------------------------------------*/
.sec_message {
  position: relative;
}
.tit_message {
  position: absolute;
  width: 80%;
  left: 10%;
  top: 29%;
}
.sec_onlyone {
  position: relative;
}
.tit_onlyone {
  position: absolute;
  width: 100%;
  left: 0%;
  top: 0;
}

.sec_norikae {
  position: relative;
}
.imasugu {
  position: absolute;
  width: 84%;
  left: 8%;
  top: 35%;
}

.txt_norikae {
  position: absolute;
  bottom: 2%;
  width: 90%;
  left: 7%;
}

.image-text-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.image-text {
  display: block;
  width: 100%;
  max-width: 600px;

  transform: translateX(-40px);
  opacity: 0;

  transition:
    transform 0.7s cubic-bezier(.2,1.3,.4,1),
    opacity 0.6s ease;}

.image-text-wrap.isActive .image-text  {
  transform: translateX(0);
  opacity: 1;
}

.mask {
  position: absolute;
  inset: 0;
  background: #000;
  transform: translateX(0);
    right: -1px; /* 端のにじみ防止 */
}

.image-text-wrap.isActive .mask {
  animation: mask-slide 1.2s ease forwards;
}


@keyframes mask-slide {
  from { transform: translateX(0); }
 to   { transform: translateX(101%); }
}

.shine {
  position: absolute;
  top: -50%;
  left: -100%;
  width: 25%;
  height: 200%;
  pointer-events: none;

  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.9) 50%,
    transparent 100%
  );

  transform: skewX(-20deg);
  opacity: 0;
}

.image-text-wrap.isActive .shine {
  animation: shine 0.5s ease forwards;
  animation-delay: 0.5s; /* ←ここ */
}

@keyframes shine {
  0% {
    left: -30%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    left: 105%;
    opacity: 0;
  }
}

.mask,
.shine {
  will-change: transform;
  backface-visibility: hidden;
}

.typing {
  opacity: 0;
}

.typing.isActive {
  opacity: 1;
}

.typing {
  text-align: center;
  font-weight: bold;
  font-size: 95px;

}


.typing span {
  opacity: 0;
  transform: translateY(15px);
  display: inline-block;
  transition: opacity 1.8s ease, transform 1.4s ease;
}

.typing span.show {
  opacity: 1;
  transform: translateY(0);
}


/*--------------------------------------------------
faq
-----------------------------------------------------*/
.sec_faq {
  background-image: url("../animeimages/bg_houganshi.jpg");
    padding: 2em 0;
}

/*--------------------------------------------------
よくある質問
-----------------------------------------------------*/
h2 {
  font-weight: 600;
  text-align: center;
  font-size: 2em;
  margin: 1em 0;
  padding: 0;
}
.accordion {
    max-width: 97%;
    text-align: left;
    margin: 0 auto;
}



/*------------------------------

ここからアコーディオンのCSS

------------------------------*/
/* チェックボックスは非表示 */
.accordion-hidden {
    display: none;
}

/* Question部分 */
.accordion-open {
    display: block;
    padding: 1.5em 2em 1.5em 1em;
    cursor: pointer;
    margin: 5px 0;
    position: relative;
    color: #000;
    font-weight: bold;
    font-size: 1.1em;
    text-align: left;
    border-bottom: 2px solid #000;
}

/* 開閉状態を示すアイコン+の作成 */
.accordion-open::before,
.accordion-open::after {
    content: '';
    width: 20px;
    height: 3px;
    background: #bda178;
    position: absolute;
    top: 50%;
    right: 3%;
    transform: translateY(-50%);
}

/* 一本は縦にして+を作る */
.accordion-open::after {
    transform: translateY(-50%) rotate(90deg);
    transition: .5s;
}

/* アコーディオンが開いたら縦棒を横棒にして-にする */
.accordion-hidden:checked + .accordion-open:after {
    transform: translateY(-50%) rotate(0);
}

/* Answer部分 */
.accordion-close {
    display: block;
    height: 0;
    overflow: hidden;
    padding: 0;
    opacity: 0;
    transition: 0.5s;
    /* 表示速度の設定 */
}

/* チェックボックスにチェックが入ったらAnswer部分を表示する */
.accordion-hidden:checked + .accordion-open + .accordion-close {
    height: auto;
    opacity: 1;
    padding: 10px;
    font-weight: 600;

}
.img_answer {
  width: 95%;
  margin: 10px auto 0;
}

.box_anhon_answer {
  background-color: #ebe3d6;
  padding: 15px 10px;
}

/*-----------------------------------
右側固定メニュー（横長ボタン縦並び）中央寄せ版
-----------------------------------*/

.side-fixed-menu {
  position: fixed;
  top: 5%;
  left: calc((100% + (50% + 320px)) / 2); /* 画面右端と中央カラム右端の中間 */
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 10px;

}


.side-fixed-menu-li {
  display: flex;
  align-items: center;
  background-color: #000;
  padding: 10px 16px;
  text-align: center;
  border-radius: 30px;
  font-size: 16px;
  text-decoration: none;
  transition: background-color 0.3s;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
   width: 380px;      /* 左の画像と同じ幅に */
  justify-content: center; /* 中央揃え */
}

.side-fixed-menu-img {
  display: flex;
  align-items: center;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s;
}

.side-fixed-menu-img img {
  max-width: 380px; /* 左側の画像と同じ */
  height: auto;
}


.side-fixed-menu a {
  color: #fff;
  font-weight: 600;
  font-size: 1.2em;
}

.side-fixed-menu-li:hover {
  background-color: #bda178;
}

@media screen and (max-width: 767px) {
  .side-fixed-menu {
    display: none;
  }
}



/*-----------------------------------
左側固定画像
-----------------------------------*/

.side-fixed-left {
  position: fixed;
  top: 5%;
  left: calc((50% - 320px) / 2); /* 画面左端と中央カラム左端の中間 */
  transform: translateX(-50%);   /* 要素の中央基準に揃える */
  z-index: 999;
}

.side-fixed-left-img {
  max-width: 380px;
}

.side-fixed-left-img {
  padding: 0 1em;
}

.fixed-hidden {
  display: none !important;
}


/* モバイルでは非表示に */
@media screen and (max-width: 1224px) {
  .side-fixed-left,
  .side-fixed-menu {
    display: none;
  }
}

/*--------------------------------------------------
フェードイン
-----------------------------------------------------*/

.fadein {
  opacity : 0;
  transform: translateY(10px);
  transition: all 1.5s;
}
.fadein02 {
  opacity : 0;
  transform: translateY(20px);
  transition: all 3s;
}
.fadein03 {
  opacity : 0;
  transform: translateY(25px);
  transition: all 4s;
}
.fadedrop {
  opacity : 0;
  transform: translateY(-10px);
  transition: all 0.5s;
}


.fadedown {
  opacity : 0;
  transform: translateY(-10px);
  transition: all 2s;
}
.fadedown02 {
  opacity : 0;
  transform: translateY(-10px);
  transition: all 3s;
}
.fadedown03 {
  opacity : 0;
  transform: translateY(-10px);
  transition: all 4s;
}



/*左からフェードイン*/
.fadeinleft {
  opacity : 0;
  transform: translateX(-40px);
  transition: all 1.5s;
}
/*右からフェードイン*/
.fadeinright {
  opacity : 0;
  transform: translateX(40px);
  transition: all 1.5s;
}

/* アニメーション前(斜め左待機) */
.slide-skew01 {
  opacity : 0;
  transform: translate(-150px,-30px);
}
/* トリガー発火でis-activeを付与 */
.slide-skew01.is-active{
    transition: 1s;
    transform: translate(0,0);
    opacity: 1;
  }
  
/* アニメーション前(斜め右待機) */
.slide-skew02 {
  opacity : 0;
  transform: translate(150px,-30px);
}
/* トリガー発火でis-activeを付与 */
.slide-skew02.is-active{
    transition: 1s;
    transform: translate(0,0);
    opacity: 1;
  }

/* アニメーション前(右待機) */
.popup {
  transform: translateY(40px) scale(0.8);
  opacity: 0;
}
/* トリガー発火でis-activeを付与 */
.popup.is-active{
 
  animation: popup 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;}
 
@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}
/* アニメーション前(待機) */
.zoomin {
  transform: scale(0.8);
  opacity: 0;
}
/* トリガー発火でis-activeを付与 */
.zoomin.is-active{
  animation: zoomin 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
 
@keyframes zoomin {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}


    /*--------------------------------------------------
下部固定ヘッダー（スマホ）
-----------------------------------------------------*/
     
#fix_btn {
        display: none!important;
    }
        
      /*--------------------------------------------------
フォーム全体
-----------------------------------------------------*/
     
#form {
        margin: 0 auto;
    }
  


/*--------------------------------------------------
フッター部分
-----------------------------------------------------*/
.footer {
  background-color: #eee;
  padding: 2em 0em ;
  text-align: center;
  font-size: 1.4em;
    color: #3E3A39;
}

.footer a {
    color: #3E3A39;
}