@charset "utf-8";
/* CSS Document */
#thebestcoffee_cp img {
  width: 100%;
  height: auto;
}
#thebestcoffee_cp svg {
  shape-rendering: geometricPrecision;
}
#thebestcoffee_cp .fix {
  clear: both;
}
#thebestcoffee_cp p {
  color: #000;
}
#thebestcoffee_cp article {
  width: 100%;
  margin: 0;
}
#thebestcoffee_cp .red, mark {
  color: #b61a30;
}
#thebestcoffee_cp .kv_img {
  width: 100%;
  /*filter: drop-shadow(2px 2px 2px #aaa);
    /* ▼ 追加：初期状態を透明にし、0.2秒後に1秒かけて表示 */
  opacity: 0;
  animation: fadeUpAnim 1s ease-out 0.2s forwards;
}
/* --- 共通のスタイル --- */
#thebestcoffee_cp .ly-3col-wrap .conLS {
  float: left;
  min-height: 100px;
}
#thebestcoffee_cp .ly-3col-wrap .conLS img {
  width: 130px;
  margin: .5rem .7rem 0rem 0rem;
  border-radius: 50%;
}
#thebestcoffee_cp ly-3col-wrap .fix {
  display: none;
}
/* --- SP表示（736px以下）のスタイル --- */
@media screen and (max-width: 736px) {
  #thebestcoffee_cp .ly-3col-wrap .container {
    margin-bottom: 40px;
  }
}
/* --- PC表示（737px以上）のスタイル：3カラム化 --- */
@media screen and (min-width: 737px) {
  /* 追加した専用クラスに対してFlexboxを指定 */
  #thebestcoffee_cp .ly-3col-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  /* その中にある container だけ幅を狭める */
  #thebestcoffee_cp .ly-3col-wrap .container {
    width: 33%;
  }
}
/* =========================================
   商品セクションのレイアウト（PC・共通）
========================================= */
#thebestcoffee_cp .product_section {
  width: 100%;
  padding: 0;
  margin-top: 1rem;
  margin-bottom: 2.5rem;
  box-sizing: border-box;
}
#thebestcoffee_cp .product_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
#thebestcoffee_cp .product_list.product_list_top {
  grid-template-columns: repeat(2, calc((100% - 60px) / 3));
  justify-content: center;
}
#thebestcoffee_cp .product_item {
  border: 1px solid #34160c;
  padding: 1rem;
  border-radius: 6px;
  /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);*/
  display: flex;
  flex-direction: column;
}
#thebestcoffee_cp .product_img {
  margin: 0;
  padding: 0px;
}
#thebestcoffee_cp .product_img img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 15px;
  display: block;
  object-fit: cover;
}
#thebestcoffee_cp .product_info {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
/* テキスト要素の装飾 */
#thebestcoffee_cp .product_section .release_date {
  display: inline-block;
  border: 1px solid #34160c;
  border-radius: 50px;
  padding: 0px 14px;
  font-size: clamp(0.8rem, 0.771rem + 0.17vw, 0.85rem);
  margin: 0 0 10px;
  align-self: flex-start;
}
#thebestcoffee_cp .product_section .product_name {
  font-size: clamp(1.1rem, 1.121rem + 0.17vw, 1.2rem);
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.4;
}
#thebestcoffee_cp .product_section .price {
  font-size: 1rem;
  font-weight: bold;
  text-align: right;
  margin-bottom: 0;
}
#thebestcoffee_cp .product_section .description {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-top: 10px;
  margin-bottom: 5px;
  border-top: 1px dotted #34160c;
  padding-top: 10px;
}
#thebestcoffee_cp .product_section .note {
  font-size: 0.8rem;
  margin: 0;
  line-height: 1.5;
  /*margin-top: auto;*/
}
#thebestcoffee_cp .product_section .note::before {
  content: "※";
}
#thebestcoffee_cp .product_section dl {
  margin: 0;
  font-size: clamp(0.95rem, 0.871rem + 0.17vw, 1rem);
}
#thebestcoffee_cp .product_section dl > div {
  display: flex;
  gap: 5px;
}
#thebestcoffee_cp .product_section dt {
  font-weight: 600;
  min-width: 17px;
}
#thebestcoffee_cp .product_section dd > span {
  font-size: 90%;
}
/* =========================================
   スマホ用レイアウト（736px以下）
========================================= */
@media screen and (max-width: 736px) {
  #thebestcoffee_cp .product_list {
    grid-template-columns: 1fr; /* スマホ: 1カラム */
    gap: 20px;
  }
  #thebestcoffee_cp .product_list .product_list_top {
    grid-template-columns: 1fr; /* スマホ: 1カラム */
    gap: 0px;
  }
  #thebestcoffee_cp section {
    padding: 0;
  }
}
/*===============================================
●pc.css 画面の横幅が737px以上
===============================================*/
@media screen and (min-width: 737px) {
  #contents {
    /*width: calc(100vw - 0.7%);
    margin: 0 calc(50% - 50vw);*/
    width: 100%;
    min-height: 1000px;
    background-image: /* ノイズSVG */ url("data:image/svg+xml,%3Csvg viewBox='0 0 2000 2000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
    background-color: #fff;
  }
  #thebestcoffee_cp main {
    max-width: 1200px;
    min-height: 100%;
    margin: 0 auto;
    background-color: #e1dacd;
    /*border-top: #34160c solid 1px;
    border-left: #34160c solid 1px;
    border-right: #34160c solid 1px;*/
  }
  #thebestcoffee_cp .kv_area {
    max-width: 100%;
    padding: 4rem 0 2rem;
    margin: 0 auto;
  }
  /* --- 商品イメージ画像（先に表示） --- */
  #thebestcoffee_cp .kv_img {
    max-width: 1200px;
    min-height: 100%;
    margin: 0 auto;
    /*filter: drop-shadow(2px 2px 2px #aaa);
    /* ▼ 追加：初期状態を透明にし、0.2秒後に1秒かけて表示 */
    opacity: 0;
    animation: fadeUpAnim 1s ease-out 0.2s forwards;
  }
  /* --- ロゴ画像（時間差で遅れて表示） --- */
  #thebestcoffee_cp .logo {
    width: 50%;
    margin: 2rem 25%;
    /* ▼ 追加：初期状態を透明にし、商品画像より遅らせて0.8秒後に表示 */
    opacity: 0;
    animation: fadeUpAnim 1s ease-out 0.8s forwards;
  }
  #thebestcoffee_cp .tit_area {
    padding: 1.5rem 0.5rem;
    text-align: center;
  }
  #thebestcoffee_cp .h1_tit {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 10px;
  }
  #thebestcoffee_cp .h1_tit > span {
    font-size: 50%;
  }
  #thebestcoffee_cp .lead {
    font-size: 1.1rem;
  }
  #thebestcoffee_cp .lead > span {
    font-size: 80%;
  }
  #thebestcoffee_cp .aten {
    font-size: 0.85rem;
  }
  #thebestcoffee_cp dl {
    margin: .5rem 0;
  }
  #thebestcoffee_cp dl > div {
    display: flex;
    gap: 10px;
  }
  #thebestcoffee_cp dt {
    font-weight: 500;
  }
  #thebestcoffee_cp .tit02 {
    max-width: 100%;
    padding: .5rem 2rem;
    margin: 0 2rem 2rem;
    -webkit-transform: skew(-20deg);
    transform: skew(-20deg);
    color: #fff;
    background-color: #b61a30;
    font-size: 1.5rem;
  }
  /* --- h2下コンテンツエリア設定 --- */
  #thebestcoffee_cp .con_box {
    max-width: 100%;
    height: auto;
    padding: 0 3rem 1.5rem; /* 少し広げました */
    margin-bottom: 0;
    color: #000;
  }
  #thebestcoffee_cp .con_box .tit03 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    border-left: 8px solid #b61a30;
    padding-left: 10px;
  }
  #thebestcoffee_cp .con_box .num01, #thebestcoffee_cp .con_box .num02, #thebestcoffee_cp .con_box .num03 {
    display: block;
    position: relative;
    padding-left: 2em;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.6;
    text-align: left;
  }
  /*#thebestcoffee_cp .con_box .num02, .num03 {
    margin-top: 30px;
  }*/
  #thebestcoffee_cp .con_box .num01 {
    padding-left: 1.5em;
  }
  #thebestcoffee_cp .con_box .num01::before {
    content: '①';
    position: absolute;
    left: 0;
    top: 0;
    /*transform: translateY(-55%);*/
    font-size: 2rem;
    font-weight: 600;
    color: #b61a30;
    line-height: 1;
  }
  #thebestcoffee_cp .con_box .num02::before {
    content: '②';
    position: absolute;
    left: 0;
    top: 0;
    /*transform: translateY(-55%);*/
    font-size: 2rem;
    font-weight: 600;
    color: #b61a30;
    line-height: 1;
  }
  #thebestcoffee_cp .con_box .num03::before {
    content: '③';
    position: absolute;
    left: 0;
    top: 0;
    /*transform: translateY(-55%);*/
    font-size: 2rem;
    font-weight: 600;
    color: #b61a30;
    line-height: 1;
  }
  #thebestcoffee_cp .con_box p {
    font-size: 1rem;
    line-height: 1.8em;
    margin-bottom: 1.5rem;
  }
  #thebestcoffee_cp .con_box h3 > span, .con_box p > span {
    font-size: 80%;
  }
  #thebestcoffee_cp mark {
    background-color: rgba(255, 255, 0, 0.3);
  }
  #thebestcoffee_cp .conL, #thebestcoffee_cp .conLS {
    float: left;
    min-height: 100px;
  }
  #thebestcoffee_cp .conL img {
    width: 450px;
    margin-right: 2rem;
    border-radius: 8px;
  }
  #thebestcoffee_cp .conLS img {
    width: 150px;
    margin: .5rem 1rem 0 2rem;
    border-radius: 50%;
  }
  #thebestcoffee_cp .conR {
    margin-top: 1rem;
    margin-right: 2rem;
  }
  /* --- プロフィール共通エリア設定 --- */
  #thebestcoffee_cp .prof {
    max-width: 100%;
    height: auto;
    background-color: #34160c;
    padding: 2.5rem 2.5rem 0; /* 少し広げました */
    margin-bottom: 0;
    color: #fff;
  }
  /*#thebestcoffee_cp .prof h2 {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 15px;
    color: #fff;
    /*border-left: 3px solid #fff;  ワンポイントのあしらい 
    padding-left: 10px;
  }*/
  #thebestcoffee_cp .prof h2 {
    position: relative;
    padding-left: 25px;
    font-size: 1.3rem;
    font-weight: 600;
    margin-right: 15px;
  }
  #thebestcoffee_cp .prof h2:before {
    position: absolute;
    content: '';
    bottom: -5px;
    left: 0;
    width: 0;
    height: 0;
    border: none;
    border-left: solid 15px transparent;
    border-bottom: solid 15px rgb(255, 255, 255, 0.5);
  }
  #thebestcoffee_cp .prof h2:after {
    position: absolute;
    content: '';
    bottom: -5px;
    left: 15px;
    width: 100%;
    border-bottom: solid 1px rgb(255, 255, 255, 0.5);
  }
  #thebestcoffee_cp .prof .comment-part p {
    font-size: 1rem;
    line-height: 1.85rem;
    margin-bottom: 2.5rem; /* プロフィールとの間隔 */
  }
  #thebestcoffee_cp .prof .comment-part .cap {
    font-size: 0.85rem;
    font-weight: normal;
    line-height: 1.4rem;
    text-align: right;
    margin-top: -2.0rem;
    opacity: 0.8;
  }
  /* --- プロフィール詳細（横並びレイアウト） --- */
  #thebestcoffee_cp .profile-area {
    display: flex;
    gap: 30px; /* 画像とテキストの間隔 */
    align-items: flex-start;
    padding: 2rem 0 2.5rem;
  }
  #thebestcoffee_cp .profile-img {
    width: 180px; /* 画像の横幅を固定 */
    flex-shrink: 0; /* 画像が潰れないように固定 */
  }
  #thebestcoffee_cp .profile-img img {
    width: 100%;
    height: auto;
    /* 画像を円形にしたい場合は以下を追加 */
    /* border-radius: 50%; */
  }
  #thebestcoffee_cp .profile-text {
    flex: 1;
  }
  #thebestcoffee_cp .profile-text h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    font-weight: 500;
  }
  #thebestcoffee_cp .profile-text h3 span {
    font-size: 0.85rem;
    font-weight: normal;
    margin-left: 5px;
    opacity: 0.8;
  }
  #thebestcoffee_cp .profile-text p {
    font-size: 0.9rem; /* プロフィール文は少し小さめに */
    line-height: 1.6rem;
    color: #ccc;
  }
  /*YouTube*/
  .youtube {
    position: relative;
    width: 93%;
    margin: 1rem auto 1rem;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;
    margin-top: 0px;
  }
  .youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .more {
    max-height: none; /* 高さの制限を解除して全文を表示 */
    overflow: visible; /* はみ出し隠しを解除 */
  }
  .more::after {
    display: none; /* 透過グラデーションを非表示 */
  }
  .more-btn {
    display: none; /* 「もっと見る」ボタン自体を非表示 */
  }
}
/*===============================================
●sp.css  画面の横幅が736pxまで
===============================================*/
@media screen and (max-width: 736px) {
  #thebestcoffee_cp {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: 0;
    margin-top: -10px;
    background-color: #e1dacd;
  }
  #thebestcoffee_cp main {
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
  }
  #thebestcoffee_cp .kv_area {
    max-width: 100%;
    padding: 3rem 0 2rem;
    margin: 0 auto;
  }
  #thebestcoffee_cp .kv_img {
    width: 100%;
    opacity: 0;
    animation: fadeUpAnim 1s ease-out 0.2s forwards;
  }
  #thebestcoffee_cp .logo {
    width: 56%;
    margin: 1.5rem 22%;
    opacity: 0;
    animation: fadeUpAnim 1s ease-out 0.8s forwards;
  }
  #thebestcoffee_cp .tit_area {
    padding: 1.4rem;
    text-align: center;
  }
  #thebestcoffee_cp .h1_tit {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.5rem;
    margin-bottom: 15px;
  }
  #thebestcoffee_cp .h1_tit > span {
    font-size: 50%;
  }
  #thebestcoffee_cp .lead {
    font-size: 0.9rem;
  }
  #thebestcoffee_cp .lead > span {
    font-size: 80%;
  }
  #thebestcoffee_cp .aten {
    font-size: 0.8rem !important;
  }
  #thebestcoffee_cp dl {
    margin: .5rem 0;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
  }
  #thebestcoffee_cp dl > div {
    display: block;
    gap: 10px;
  }
  #thebestcoffee_cp dt {
    font-weight: 500;
  }
  #thebestcoffee_cp .tit02 {
    max-width: 100%;
    padding: .5rem 1rem;
    margin: 0 1rem 1.5rem;
    -webkit-transform: skew(-20deg);
    transform: skew(-20deg);
    color: #fff;
    background-color: #b61a30;
    font-size: 1.1rem;
  }
  /* --- h2下コンテンツエリア設定 --- */
  #thebestcoffee_cp .con_box {
    max-width: 100%;
    height: auto;
    padding: 0 15px 1.5rem;
    margin-bottom: 0;
    color: #000;
  }
  #thebestcoffee_cp .con_box .tit03 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    border-left: 5px solid #b61a30;
    padding-left: 10px;
  }
  #thebestcoffee_cp .con_box .num01, #thebestcoffee_cp .con_box .num02, #thebestcoffee_cp .con_box .num03 {
    display: block;
    position: relative;
    padding-left: 2em;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.6;
    text-align: left;
  }
  #thebestcoffee_cp .con_box .num01 {
    padding-left: 1.5em;
  }
  #thebestcoffee_cp .con_box .num01::before {
    content: '①';
    position: absolute;
    left: 0;
    top: 0;
    transform: none;
    font-size: 1.6rem;
    font-weight: 600;
    color: #b61a30;
    line-height: 1;
  }
  #thebestcoffee_cp .con_box .num02::before {
    content: '②';
    position: absolute;
    left: 0;
    top: 0;
    transform: none;
    font-size: 1.6rem;
    font-weight: 600;
    color: #b61a30;
    line-height: 1;
  }
  #thebestcoffee_cp .con_box .num03::before {
    content: '③';
    position: absolute;
    left: 0;
    top: 0;
    transform: none;
    font-size: 1.6rem;
    font-weight: 600;
    color: #b61a30;
    line-height: 1;
  }
  #thebestcoffee_cp .con_box p {
    font-size: 0.9rem;
    line-height: 1.7em;
    /* margin-bottom: 1.5rem;*/
  }
  #thebestcoffee_cp .con_box h3 > span, .con_box p > span {
    font-size: 80%;
  }
  #thebestcoffee_cp mark {
    background-color: rgba(255, 255, 0, 0.3);
  }
  #thebestcoffee_cp .conL {
    float: none;
  }
  #thebestcoffee_cp .conL img {
    width: 100%;
    margin: 0 0 1rem;
    border-radius: 8px;
  }
  #thebestcoffee_cp .conLS {
    float: left;
  }
  #thebestcoffee_cp .conLS img {
    width: 110px;
    margin-right: 1rem;
    border-radius: 50%;
  }
  #thebestcoffee_cp .conR {
    margin: 0;
  }
  /*--prof--*/
  #thebestcoffee_cp .prof {
    max-width: 100%;
    height: auto;
    background-color: #34160c;
    padding: 1.5rem 1.5rem 0;
    margin-bottom: 0;
    color: #fff;
  }
  /* #thebestcoffee_cp .prof h2 {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 15px;
    color: #fff;
    /*border-left: 3px solid #fff;  ワンポイントのあしらい 
    padding-left: 10px;
  }*/
  #thebestcoffee_cp .prof h2 {
    position: relative;
    padding-left: 25px;
    font-size: 1rem;
    font-weight: 600;
    margin-right: 15px;
  }
  #thebestcoffee_cp .prof h2:before {
    position: absolute;
    content: '';
    bottom: -5px;
    left: 0;
    width: 0;
    height: 0;
    border: none;
    border-left: solid 15px transparent;
    border-bottom: solid 15px rgb(255, 255, 255, 0.5);
  }
  #thebestcoffee_cp .prof h2:after {
    position: absolute;
    content: '';
    bottom: -5px;
    left: 15px;
    width: 100%;
    border-bottom: solid 1px rgb(255, 255, 255, 0.5);
  }
  #thebestcoffee_cp .prof .comment-part p {
    font-size: 0.9rem;
    line-height: 1.75rem;
    margin-bottom: 1.5rem;
  }
  #thebestcoffee_cp .profile-area {
    flex-direction: column; /* 上下並びに変更 */
    gap: 50px;
    /* border-top: 1px solid #555; /* コメントとの境界線 */
    padding: 1.5rem 0 2rem;
  }
  #thebestcoffee_cp .profile-text h3 {
    font-size: 0.95rem;
    font-weight: 500;
  }
  #thebestcoffee_cp .profile-text h3 span {
    font-size: 0.85rem;
    font-weight: normal;
    margin-left: 5px;
    opacity: 0.8;
  }
  #thebestcoffee_cp .profile-text p {
    font-size: 0.8rem; /* プロフィール文は少し小さめに */
    line-height: 1.5rem;
    color: #ccc;
    margin-top: 10px;
  }
  #thebestcoffee_cp .profile-img {
    width: 200px; /* スマホでは少し小さく */
    margin: 0 auto 2rem; /* 中央寄せにしたい場合 */
  }
  #thebestcoffee_cp .profile-text {
    text-align: left; /* テキストは左寄せを維持 */
  }
  /* ▼ 1. 親要素をFlexboxにして縦並びにする */
  #thebestcoffee_cp .comment-part {
    display: flex;
    flex-direction: column;
  }
  /* ▼ 2. 要素の順番（order）を指定する */
  #thebestcoffee_cp .comment-part h3 {
    order: 1; /* 1番目 */
  }
  /* 「.cap」がついていない通常の <p>（メインテキスト） */
  #thebestcoffee_cp .comment-part > p:not(.cap) {
    order: 2; /* 2番目 */
    margin-bottom: 1.5rem; /* 画像との間に少し余白を設ける */
  }
  #thebestcoffee_cp .prof .comment-part .cap {
    order: 4; /* 4番目 */
    font-size: 0.8rem;
    font-weight: normal;
    line-height: 1.4rem;
    margin-top: 0;
    opacity: 0.8;
    text-align: center;
    font-feature-settings: "halt";
  }
  /*YouTube*/
  .youtube {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    margin-bottom: .5rem;
    height: 0;
    overflow: hidden;
    margin-top: 0px;
  }
  .youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /*more*/
  .container {
    position: relative;
    max-width: 600px;
    margin: 0 auto 30px;
  }
  .more {
    /* heightではなくmax-heightを使うことでアニメーションが効くようになります */
    max-height: 50px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.5s ease; /* スムーズに開閉するアニメーション */
  }
  /* 透過しながら隠すグラデーション */
  .more::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to bottom, rgba(225, 218, 205, 0) 0%, rgba(225, 218, 205, 1) 100%);
    pointer-events: none;
    transition: opacity 0.3s ease; /* グラデーション自体のフェードアウト */
    opacity: 1; /* 初期状態は表示 */
  }
  /* 開いたときのスタイル */
  .more.is-open {
    /* 中身のテキストより十分に大きい値を指定します */
    max-height: 1000px;
  }
  /* 開いたときはグラデーションを非表示にする */
  .more.is-open::after {
    opacity: 0;
  }
  .more-btn {
    display: block;
    margin: 10px auto 0px;
    padding: 5px 20px;
    cursor: pointer;
    background-color: #e1dacd;
    border: solid 1px;
    border-radius: 50px;
    font-size: 0.8rem;
  }
}
/* ▼ 画像切り替え時のふわっとアニメーション ▼ */
@keyframes fadeInAnim {
  0% {
    opacity: 0.2;
  } /* 完全に透明にせず少し残すのが自然に見せるコツです */
  100% {
    opacity: 1;
  }
}
#thebestcoffee_cp .main-image img.is-animating {
  animation: fadeInAnim 0.5s ease-out forwards;
}
@keyframes fadeUpAnim {
  0% {
    opacity: 0;
    transform: translateY(0px); /* 30px下からスタート */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* 本来の位置へ */
  }
}