/*---------------------------------
全体
---------------------------------*/
#boserum-ww {
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Noto Serif JP", serif !important;
}
#boserum-ww .text,.kome,.kome2,.kome3,.kome4,.kome5,.voice_kome  {
font-family: "open sans","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","YuGothic Medium","游ゴシック","Yu Gothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
}
#boserum-ww font {
color: #555555;
}
#boserum-ww * {
box-sizing: border-box !important;
}
#boserum-ww button {
cursor: pointer;
width: 100%;
color: #fff;
padding: 10px;
}
#boserum-ww section {
overflow: hidden;
}
.fade_bo {
opacity: 0;
transition: opacity 3s;
transform: translateY(40px);
}
.fade_bo.view {
opacity: 1;
}
#boserum-ww .box_youtube {
width: 90%;
margin: 0 auto;
left: 0;
right: 0;
bottom: 31%;
padding-bottom: 10%;
}
#boserum-ww .youtube1 {
position: relative;
padding: 28%;
}
#boserum-ww .youtube1 iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
#boserum-ww .cv_btn {
color: #fff;
background-color: #c4aa62;
}
#boserum-ww .cv_btn:hover {
color: #fff;
background: #e6cf90;
}
#boserum-ww .cv_btn.btn--radius {
border-radius: 5px;
}
#boserum-ww .cv_btn_t {
color: #fff;
background-color: #93741e;
}
#boserum-ww .cv_btn_t:hover {
color: #fff;
background: #af8f36;
}
#boserum-ww .cv_btn_t.btn--radius {
border-radius: 5px;
}
#boserum-ww .specification p {
font-family: "open sans","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","YuGothic Medium","游ゴシック","Yu Gothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
padding: 4%;
font-size: 12px;
}
#boserum-ww section.contents {
background-color: #fcf9f2;
padding: 2.5% 5%;
font-family: 'Noto Sans Japanese';
position: relative;
}
/*========= ページネーションCSS ===============*/
.box {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
}
#boserum-ww .nayami_1 {
position: absolute;
top: 12%;
left: 59%;
width: 39%;
}
#boserum-ww .nayami_2 {
position: absolute;
top: 29%;
left: 50%;
width: 39%;
}
#boserum-ww .nayami_kome {
position: absolute;
bottom: 1%;
width: 90%;
font-size: 10px;
text-align: left;
}
#boserum-ww .reason {
margin-bottom: 5%;
}
#boserum-ww .reason h2 {
margin: 15% 0 5%;
}
#boserum-ww .reason h3 {
font-size: 18px;
text-align: center;
margin-bottom: 12%;
}
#boserum-ww .reason h4 {
position: absolute;
top: 17%;
font-size: 20px;
line-height: 1.3;
}
#boserum-ww .reason h4 {
  top: 105px;   /* ここはデザインを見ながら調整 */
}
#boserum-ww .reason .text {
position: absolute;
top: 28%;
margin: 4%;
text-align: left;
line-height: 1.3;
}
#boserum-ww .reason .text {
  top: 162px;  /* h4 との間隔を px でコントロール */
}
#boserum-ww .reason .textB {
top: 28%;
margin: 0 0 10%;
text-align: left;
line-height: 1.3;
font-weight: bold;
}
#boserum-ww .reason .kome {
position: absolute;
top: 47%;
left: 2%;
margin: 4%;
text-align: left;
line-height: 1.3;
font-size: 12px;
}
#boserum-ww .reason .image_01 {
position: absolute;
top: 57%;
margin: 5% 15%;
}
#boserum-ww .reason .image_03 {
position: absolute;
top: 310px;
margin: 5% 6%;
}
#boserum-ww .reason .hadazu_1 {
position: absolute;
top: 49%;
}
#boserum-ww .reason .hadazu_2 {
position: absolute;
top: 58%;
}
#boserum-ww .reason .kome2 {
position: absolute;
top: 46%;
left: 12%;
margin: 4%;
text-align: left;
line-height: 1.3;
font-size: 12px;
}
#boserum-ww .reason .kome3 {
position: absolute;
top: 41%;
right: 2%;
margin: 4%;
text-align: left;
line-height: 1.3;
font-size: 12px;
}
#boserum-ww .reason .kome4 {
position: absolute;
top: 49%;
left: 2%;
margin: 4%;
text-align: left;
line-height: 1.3;
font-size: 12px;
}
#boserum-ww .reason .kome4 {
  top: 303px;   /* ここはデザインを見ながら調整 */
}
#boserum-ww .reason .kome5 {
position: absolute;
top: 170px;
left: 2%;
margin: 4%;
text-align: left;
line-height: 1.3;
font-size: 12px;
}
#boserum-ww .rankakumaku {
margin-top: 80px;
}
#boserum-ww .image_03 {
margin-bottom: 80px;
}
#boserum-ww .voice_1 {
position: absolute;
top: 4%;
width: 75%;
}
#boserum-ww .voice_2 {
position: absolute;
top: 34%;
width: 75%;
}
#boserum-ww .voice_3 {
position: absolute;
top: 64%;
width: 75%;
}
#boserum-ww .voice_kome {
position: absolute;
top: 91%;
left: 5%;
text-align: left;
font-size: 12px;
line-height: 1.3;
}
#boserum-ww #box2 h4 {
position: absolute;
top: 18%;
font-size: 20px;
}
#boserum-ww #box5 h4 {
position: absolute;
top: 105px;
font-size: 20px;
}
#boserum-ww #box7 h4 {
position: absolute;
top: 18%;
font-size: 20px;
}
#boserum-ww p.point {
position: absolute;
top: 1%;
width: 100%;
}
section.point {
overflow: hidden;
}
#boserum-ww .obi {
text-align: center;
font-size: 24px;
background-color: #2d2d2d;
padding: 15px;
margin-bottom: 8%;
color: #fff;
line-height: 1;
}

/* -----------------------------------------
SP
-----------------------------------------*/
@media only screen and (max-width: 768px) {
.pc {
display: none !important;
}
.sp {
display: block !important;
}
img {
max-width: 100%;
}
#boserum-ww {
margin: 0 auto;
max-width: 768px;
color: #555555;
font-size: 14px;
}
#boserum-ww img {
border: 0;
vertical-align: bottom;
max-width: 100%;
height: auto;
}
#boserum-ww a {
color: #555555;
text-decoration: none;
}
#boserum-ww br.br-pc {
display: none;
}
#boserum-ww .mb80 {
margin-bottom: 80px;
}
#boserum-ww .box_cv {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
}
#boserum-ww #box1 {
height: 80vh;
height: auto;
padding-top: 165%;
}
#boserum-ww #box2, #box3 {
height: 70vh;
height: auto;
padding-top: 155%;
}
#boserum-ww #box4 {
height: 80vh;
height: auto;
padding-top: 85%;
}
#boserum-ww #box5 {
height: 70vh;
height: auto;
padding-top: 65%;
}
#boserum-ww #box7 {
height: 70vh;
height: auto;
padding-top: 154%;
}
#boserum-ww #box6 {
height: 85vh;
height: auto;
padding-top: 180%;
}
/*#boserum-ww h1.fv {
margin-bottom: 10%;
}*/
#boserum-ww .fv_title {
position: absolute;
top: 3%;
width: 71%;
}
#boserum-ww .fv_pict1 {
position: absolute;
top: 22%;
left: 5%;
width: 30%;
}
#boserum-ww .fv_pict2 {
position: absolute;
bottom: 16.5%;
width: 50%;
}
#boserum-ww .cv_title {
text-align: center;
padding: 10px;
font-size: 18px;
color: #fff;
background-color: #aaa;
margin: 0 8px;
}
#boserum-ww .cv {
overflow: hidden;
margin: 50px 0;
text-align: center;
}
#boserum-ww .cv2 {
overflow: hidden;
margin: 50px 0;
text-align: center;
}
#boserum-ww .cv_text {
font-size: 22px;
text-align: center;
line-height: 1.3;
margin-bottom: 10px;
}
#boserum-ww .cv_left {
margin: 10px;
}
#boserum-ww .cv_left img {
width: 50%;
}
#boserum-ww .cv2 .cv_left img {
width: 60%;
}
#boserum-ww .cv_bg {
position: absolute;
top: 15%;
z-index: -1;
}
#boserum-ww .obi {
font-size: 20px;
}
#boserum-ww .point .text {
margin: 1% 4% 12%;
}
#boserum-ww .section.reason {
margin-bottom: 5%;
}
#boserum-ww .voice {
margin-bottom: 10%;
}
#boserum-ww .howto {
padding: 5% 0 0;
font-size: 20px;
}
#boserum-ww .howto1 {
padding: 5% 0;
background-color: #f8ecca;
}
#boserum-ww .howto1 p {
padding: 5% 0;
text-align: center;
font-size: 20px;
background-color: #f8ecca;
}
#boserum-ww .bo_image {
margin: 20% 0;
}
#boserum-ww .item_name {
margin: 5% 4% 0;
font-size: 18px;
}
#boserum-ww .item_name a {
font-size: 18px;
font-weight: bold;
line-height: 1.6;
letter-spacing: -0.05em
}
#boserum-ww .item_kakaku {
text-align: center;
font-size: 24px;
margin-bottom: 10px;
}
#boserum-ww .item_kakaku2 {
text-align: center;
font-size: 24px;
margin-bottom: 10px;
}
#boserum-ww p.price_down {
font-size: 14px;
color: #C90027;
margin-left: 4%;
margin-bottom: 10px;
}
#boserum-ww p.price_down span {
font-size: 24px;
color: #C90027;
}
#boserum-ww p.price_off {
font-size: 14px;
text-decoration: line-through;
margin-left: 4%;
margin-bottom: 0;
}
#boserum-ww p.price_off span {
font-size: 18px;
}
#boserum-ww p.item-price span {
font-size: 24px;
}
#boserum-ww .cv_btn, .cv_btn_t {
margin: 0 16px;
}
.teiki ,.teiki_c {
background: url(https://ozio.jp/excludes/ozio/item/boserum-ww/img/common/teiki_20.jpg) no-repeat center center;
background-size: cover;
}
#boserum-ww .contents_bnr {
margin: 5% 5% 20%;
}
#boserum-ww .contents_bnr p {
margin: 5% 0;
}
section.specification {
margin-bottom: 10%;
}
/* --- Bnr ------------*/
.Bnr {
position: relative;
margin: 0 auto;
width: 100%;
display: none;
z-index: 30;
}
.Bnr .banner {
position: fixed;
bottom: 0;
}
.Bnr .banner_inner a {
display: block;
}
.Bnr .banner p.close {
position: absolute;
right: 10px;
bottom: 10px;
}
.Bnr .banner p.close a {
display: block;
width: 20px;
height: 25px;
text-align: center;
}
Bnr .banner p.close a span {
display: block;
width: 1px;
height: 1px;
overflow: hidden;
}
.Bnr .banner p.close a i {
font-size: 20px;
z-index: 888;
color: #222;
}
#boserum-ww section h2 {
display: block;
font-size: 22px;
line-height: 1.3;
color: #7d5200;
text-align: center;
margin: 30px 0;
}
#boserum-ww section .txt_01 {
line-height: 1.6;
}
#boserum-ww section h3.h3 {
font-size: 16px;
text-align: left;
margin: 20px 0 5px;
color: #7d5200;
background-color: #fff;
}
#boserum-ww section h4.h4 {
font-size: 16px;
text-align: left;
margin-bottom: 10px;
}
#boserum-ww section .kome {
font-size: 10px;
line-height: 1.3;
text-align: left;
margin: 8px 5px;
}
#boserum-ww .sokkou {
position: absolute;
top: 155px;
left: 70%;
}
#boserum-ww .sokkou img {
width: 70%;
}
#boserum-ww .sinsou {
position: absolute;
top: 5px;
left: 70%;
}
#boserum-ww .sinsou img {
width: 70%;
}
#boserum-ww .reason #box4 .text {
position: absolute;
top: 170px;
margin: 4%;
text-align: left;
line-height: 1.3;
}
#boserum-ww .reason #box5 .text {
position: absolute;
top: 170px;
margin: 4%;
text-align: left;
line-height: 1.3;
}
#boserum-ww .reason #box7 .text {
position: absolute;
top: 21px;
margin: 4%;
text-align: left;
line-height: 1.3;
}
}
/* -----------------------------------------
PC
-----------------------------------------*/
@media only screen and (min-width: 768px) {
#boserum-ww .br-sp {
display: none !important;
}
.pc {
display: block !important;
}
.sp {
display: none !important;
}
#boserum-ww {
width: 1024px;
margin: 0 auto;
}
#boserum-ww h1.fv {
margin-bottom: 10%;
}
#boserum-ww .fv_title {
position: absolute;
top: 60px;
left: 55px;
width: 46%;
}
#boserum-ww .fv_pict1 {
position: absolute;
top: 50px;
left: 837px;
width: 15%;
}
#boserum-ww .fv_pict2 {
position: absolute;
top: 332px;
left: 135px;
width: 30%;
}
#boserum-ww .cv_title {
text-align: center;
padding: 20px;
font-size: 28px;
color: #fff;
background-color: #aaa;
}
#boserum-ww .cv {
overflow: hidden;
margin: 0px auto 100px;
width: 1024px;
padding: 60px 20px 0;
}
#boserum-ww .cv .cv_left {
width: 460px;
float: left;
text-align: center;
}
#boserum-ww .cv img {
width: 35%;
}
#boserum-ww .cv2 {
overflow: hidden;
margin: 0px auto 100px;
width: 1024px;
padding: 60px 20px 0;
}
#boserum-ww .cv2 .cv_left {
width: 460px;
float: left;
text-align: center;
}
#boserum-ww .cv2 img {
width: 73%;
}
#boserum-ww .cv_text {
font-size: 32px;
text-align: center;
line-height: 1.6;
}
#boserum-ww .cv_btn, .cv_btn_t {
width: 420px;
margin: 0 auto;
}
.cv_left a .pc {
width: 100%;
}
#boserum-ww .cv .cv_right {
width: 500px;
float: right;
}
#boserum-ww .cv2 .cv_right {
width: 500px;
float: right;
}
#boserum-ww .cv .teiki {
width: 500px;
float: right;
background: url(https://ozio.jp/excludes/ozio/item/boserum-ww/img/common/teiki_20_pc.jpg) no-repeat;
}
#boserum-ww .cv .teiki_c {
width: 500px;
float: right;
background: url(https://ozio.jp/excludes/ozio/item/boserum-ww/img/common/teiki_20_pc_c.jpg) no-repeat;
}
.cv_right p img {
width: 100%;
}
#boserum-ww .item_name {
margin: 80px 40px 40px;
text-align: center;
font-size: 28px;
}
#boserum-ww .teiki .item_name {
margin: 20px;
}
#boserum-ww .teiki_c .item_name {
margin: 20px;
}
#boserum-ww .item_name a {
font-size: 28px;
line-height: 1.4em;
text-decoration: none;
}
#boserum-ww .item_kakaku {
font-size: 32px;
line-height: 1.2em;
text-align: right;
width: 420px;
}
#boserum-ww .item_kakaku2 {
font-size: 32px;
line-height: 1.2em;
text-align: right;
width: 420px;
}
#boserum-ww p.price_down {
font-size: 18px;
color: #C90027;
margin-left: 95px;
margin-bottom: 10px;
}
#boserum-ww p.price_down span {
font-size: 32px;
color: #C90027;
}
#boserum-ww p.price_off {
font-size: 18px;
line-height: 2.3;
text-decoration: line-through;
margin-left: 95px;
margin-bottom: 0;
}
#boserum-ww p.price_off span {
font-size: 18px;
}
#boserum-ww p.item-price span {
font-size: 36px;
}
#boserum-ww button {
color: #fff;
padding: 20px;
margin: 10px auto;
width: 420px;
font-size: 20px;
}
#boserum-ww .container {
width: 768px;
margin: 0 auto;
}
#boserum-ww #box1 {
height: 1330px;
}
#boserum-ww #box2 {
height: 1170px;
}
#boserum-ww #box3 {
height: 1450px;
}
#boserum-ww #box4 {
height: 650px;
}
#boserum-ww #box5 {
height: 600px;
}
#boserum-ww #box7 {
height: 1135px;
}
#boserum-ww #box6 {
height: 1435px;
}
#boserum-ww .reason h4 {
position: absolute;
top: 200px;
font-size: 40px;
line-height: 1.3;
}
#boserum-ww .reason .text {
position: absolute;
top: 350px;
margin: 0 4%;
text-align: left;
font-size: 24px;
line-height: 1.3;
}
#boserum-ww .reason .textB {
top: 350px;
margin: 8% 0;
text-align: left;
font-size: 24px;
line-height: 1.3;
font-weight: bold;
}
#boserum-ww #box2 .text {
top: 320px;
margin: 0 4%;
}
#boserum-ww #box5 .text {
top: 307px;
margin: 0 4%;
}
#boserum-ww #box7 .text {
top: 8px;
margin: 0 4%;
}
#boserum-ww #box5 .textB {
top: 320px;
font-weight: bold;
}
#boserum-ww #box7 .textB {
top: 320px;
font-weight: bold;
}
#boserum-ww .reason h3 {
text-align: center;
margin-bottom: 12%;
font-size: 40px;
line-height: 1.3;
}
#boserum-ww .reason .kome {
position: absolute;
top: 500px;
left: 39%;
margin: 0 4%;
text-align: left;
font-size: 14px;
}
#boserum-ww .reason .kome4 {
position: absolute;
top: 540px;
left: 39%;
margin: 0 4%;
text-align: left;
font-size: 14px;
}
#boserum-ww .reason .kome5 {
position: absolute;
top: 280px;
left: 35%;
margin: 0 4%;
text-align: left;
font-size: 14px;
}
#boserum-ww #box4 .kome {
top: 540px;
}
#boserum-ww #box7 .kome {
top: 540px;
}
#boserum-ww .reason .kome2 {
position: absolute;
top: 440px;
left: 45%;
margin: 0 4%;
text-align: left;
font-size: 14px;
}
#boserum-ww .reason .kome3 {
position: absolute;
top: 440px;
left: 59%;
margin: 0 4%;
text-align: left;
font-size: 14px;
}
#boserum-ww .reason .image_01 {
position: absolute;
top: 610px;
}
#boserum-ww #box2 h4 {
position: absolute;
top: 200px;
font-size: 40px;
}
#boserum-ww #box5 h4 {
position: absolute;
top: 200px;
font-size: 40px;
}
#boserum-ww #box7 h4 {
position: absolute;
top: 200px;
font-size: 40px;
}
#boserum-ww #box3 .kome {
position: absolute;
top: 18%;
font-size: 24px;
}
.reason .kome2 {
position: absolute;
top: 35%;
left: 26%;
margin: 4%;
text-align: left;
font-size: 20px;
}
#boserum-ww .reason .hadazu_1 {
position: absolute;
top: 45%;
}
#boserum-ww .reason .hadazu_2 {
position: absolute;
top: 45%;
}
#boserum-ww .rankakumaku {
margin-top: 100px;
}
#boserum-ww .image_03 {
margin-bottom: 100px;
}
#boserum-ww .reason .image_03 {
top: 40%;
margin: 5% 6%;
}
#boserum-ww .voice_1 {
position: absolute;
top: 60px;
width: 85%;
}
#boserum-ww .voice_2 {
position: absolute;
top: 520px;
width: 85%;
}
#boserum-ww .voice_3 {
position: absolute;
top: 980px;
width: 85%;
}
#boserum-ww .voice_kome {
position: absolute;
top: 1390px;
left: 40%;
text-align: left;
font-size: 14px;
}
#boserum-ww .point {
overflow: hidden;
width: 768px;
margin: 0 auto 100px;
}
#boserum-ww .specification p {
padding: 3%;
font-family: "open sans","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","YuGothic Medium","游ゴシック","Yu Gothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
}
#boserum-ww .specification p {
padding: 0 4% 10%;
font-size: 18px;
}
section.contents_bnr {
text-align: center;
}
/* --- Bnr ------------*/
.Bnr, .Bnr2 {
position: relative;
margin: 0 auto;
display: none;
}
.Bnr .banner {
position: fixed;
top: 50px;
right: 0;
z-index: 88;
}
.Bnr2 .banner2 {
position: fixed;
top: 370px;
right: 0;
z-index: 88;
}
.banner_inner {
padding: 10px;
}
.Bnr .banner_inner a {
display: block;
}
.Bnr .banner p.close {
position: absolute;
right: 15px;
top: 10px;
}
.Bnr .banner p.close a {
display: block;
width: 20px;
height: 25px;
}
.Bnr .banner p.close a span {
display: block;
width: 1px;
height: 1px;
z-index: 888;
overflow: hidden;
}
.br-sp {
display: none;
}
#boserum-ww section h2 {
display: block;
font-size: 36px;
line-height: 1.3;
color: #7d5200;
text-align: center;
margin: 60px 0;
}
#boserum-ww section .txt_01 {
font-size: 20px;
line-height: 1.6;
}
#boserum-ww section h3.h3 {
font-size: 28px;
text-align: left;
margin: 30px 0 15px;
position: relative;
color: #7d5200;
background-color: #fff;
padding: 10px 0;
}
#boserum-ww section h4.h4 {
font-size: 26px;
text-align: left;
margin-bottom: 25px;
}
#boserum-ww section .kome {
font-size: 14px;
line-height: 1.3;
text-align: left;
}
#boserum-ww .sokkou {
position: absolute;
top: 300px;
right: 0;
}
#boserum-ww .sokkou img {
width: 60%;
}
#boserum-ww .sinsou {
position: absolute;
top: 5px;
right: 0;
}
#boserum-ww .sinsou img {
width: 60%;
}
}
/* -------------------------------------------------------------------- 
動画
-------------------------------------------------------------------- */
.box_mp4 {
position: relative;
}
.box_mp4 .video01 {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 11.3%;
width: 89.6%;
display: flex;
justify-content: center;
}
.box_mp4.voice video {
position: absolute;
left: 54.5%;
bottom: 34.2%;
width: 40.3%;
}
.box_mp4.voice.voice2 video {
bottom: 34.5%;
}
.box_mp4.voice.voice3 video {
bottom: 40.2%;
}
@media only screen and (min-width: 768px) {
.box_mp4 .video01 {
top: 110px;
}
.box_mp4 .video01 {
width: 65%;
}
}
/*==================================================
ふわっ
===================================*/
/* その場で */
.fadeIn {
animation-name: fadeInAnime;
animation-duration: 3s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeInAnime {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 下から */
.fadeUp {
animation-name: fadeUpAnime;
animation-duration: 3s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeUpAnime {
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 上から */
.fadeDown {
animation-name: fadeDownAnime;
animation-duration: 0.5s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeDownAnime {
from {
opacity: 0;
transform: translateY(-100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 左から */
.fadeLeft {
animation-name: fadeLeftAnime;
animation-duration: 2s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeLeftAnime {
from {
opacity: 0;
transform: translateX(-100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* 右から */
.fadeRight {
animation-name: fadeRightAnime;
animation-duration: 2s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeRightAnime {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.flex {
display: flex;
flex-wrap: wrap;
}