@charset "UTF-8";
body { margin: 0; }

#fabricmist { font-size: 62.5%; }
#fabricmist img { width: 100%; }
#fabricmist a { display: block; }

.main li { list-style-type: none; font-size: calc(1.0em + (1vw - 0.32em) * 0.6696); line-height: 2; }
.main p { font-size: calc(1.0em + (1vw - 0.32em) * 0.6696); line-height: 2; }
@media screen and (min-width: 768px) { .main li, .main p { font-size: 13px; line-height: 2.5; } }

.hero { height: 25%; background-position: center; background-size: cover; position: relative; }
.hero .wf { position: absolute; background-image: url("../img/bibi_fabricmist_images/flower_wt.png"); background-repeat: no-repeat; background-position: center; background-size: contain; }
.hero .w_flower1 { top: 4%; left: 3%; height: calc(8.4em + (1vw - 0.32em) * 38.1696); width: calc(8.4em + (1vw - 0.32em) * 38.1696); max-width: 250px; max-height: 250px; }
.hero .w_flower2 { top: 20%; right: 2%; width: calc(7em + (1vw - 0.32em) * 31.2500); height: calc(7em + (1vw - 0.32em) * 31.2500); max-width: 250px; max-height: 250px; }
.hero h1 { width: 20%; margin: auto; max-width: 220px; padding: 1em; }
.hero .euphoria_main, .hero .euphoria_sub { width: 70%; margin: auto; max-width: 460px; position: relative; z-index: 2; }
.hero .euphoria_jp { width: 80%; margin: 30px auto; max-width: 600px; }

@media screen and (min-width: 768px) { .hero { height: 45vh; }
  .hero h1 { margin: auto; padding-top: 40px; } }
.features { position: relative; z-index: 2; }

.feature .sp_only { width: 30%; margin: auto; }
.feature_wrapper { margin-top: 10%; margin-bottom: 10%; }
.feature article h2 { font-size: calc(1.3em + (1vw - 0.32em) * 2.4554); font-weight: normal; }
.feature article h2 img { height: calc(4em + (1vw - 0.32em) * 8.0357); width: auto !important; vertical-align: bottom; }
.feature article { margin-bottom: calc(4em + (1vw - 0.32em) * 4.4643); }
.feature .feature_1 h2, .feature .feature_2 h2 { display: inline-block; background-size: contain; background-repeat: no-repeat; padding-bottom: 1em; padding-left: .5em; background-image: url("../img/bibi_fabricmist_images/sp_line.jpg"); background-repeat: no-repeat; background-position: center; background-size: contain; background-position: bottom !important; }
.feature .feature_1 ul { padding-left: 0em; list-style-type: inherit; width: 80%; margin-left: auto; margin-right: auto; }
.feature .feature_1 ul li { line-height: 1.5; }
.feature .feature_2 ul { display: flex; align-items: center; justify-content: space-between; padding-left: 0; width: 80%; margin-left: auto; margin-right: auto; }
.feature .feature_2 ul li { background-repeat: no-repeat; background-size: contain; background-position: center; height: calc(5em + (1vw - 0.32em) * 11.1607); width: calc(5em + (1vw - 0.32em) * 11.1607); position: relative; }
.feature .feature_2 ul li span { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: calc(4em + (1vw - 0.32em) * 13.3929); text-align: center; color: #Fff; font-size: calc(1em + (1vw - 0.32em) * 0.6696); line-height: 1.4; max-width: 80px; }
.feature .pc_only { display: none; }
.feature .feature_3 h2 { text-align: center; }
.feature .feature_3 ul { padding-left: 1.5em; }
.feature .feature_3 ul li { position: relative; }
.feature .feature_3 ul li::before { position: absolute; content: '◉'; left: -1.2em; }
@media screen and (min-width: 768px) { .feature { display: flex; align-items: center; justify-content: center; }
  .feature article { margin-bottom: 60px; }
  .feature article h2 { font-size: 24px; }
  .feature article h2 img { height: 76px; }
  .feature_wrapper { display: flex; flex-direction: column-reverse; }
  .feature .pc_only { display: block; flex: 0 0 23% !important; margin-right: 20px; }
  .feature_article_wrapper { flex: none; }
  .feature .feature_1 h2 { background-image: url("../img/bibi_fabricmist_images/fukidashi.jpg"); background-repeat: no-repeat; background-position: center; background-size: contain; /*padding-bottom: 3em;*/ display: inline-block; }
  .feature .feature_2 h2 { background-image: url("../img/bibi_fabricmist_images/fukidashi.jpg"); background-repeat: no-repeat; background-position: center; background-size: contain; /*padding-bottom: 3em;*/ display: inline-block; }
  .feature .feature_2 ul { width: 100%; }
  .feature .feature_2 ul li { height: 100px; width: 100px; }
  .feature .feature_2 ul li:not(:last-child) { margin-right: 2em; }
  .feature .feature_2 ul li span { font-size: 17px; } }

@media screen and (min-width: 768px) { .sp_only { display: none; } }
.of { display: none; }
@media screen and (min-width: 768px) { .of { position: absolute; z-index: -1; background-image: url("../img/bibi_fabricmist_images/flower_orange.png"); background-repeat: no-repeat; background-position: center; background-size: contain; width: 250px; height: 250px; display: block; }
  .of.o_flower1 { top: -100px; right: 0; }
  .of.o_flower2 { top: 50%; }
  .of.o_flower3 { top: 40%; right: 0; }
  .of.o_flower4 { right: -200px; top: 20%; }
  .of.o_flower5 { left: -250px; top: 50%; } }

.nichijo { position: relative; margin-bottom: calc(15em + (1vw - 0.32em) * 44.6429); }
.nichijo .balloon { position: absolute; bottom: -100%; width: 20%; z-index: 0; height: 90%; }
.nichijo .balloon_g { background-image: url("../img/bibi_fabricmist_images/balloon_g.jpg"); background-repeat: no-repeat; background-position: center; background-size: contain; left: 10%; }
.nichijo .balloon_o { background-image: url("../img/bibi_fabricmist_images/balloon_o.jpg"); background-repeat: no-repeat; background-position: center; background-size: contain; right: 10%; }
.nichijo .nichijo_item { display: flex; align-items: center; padding-top: 80px; padding-bottom: 20px; }
.nichijo .nichijo_rabbit { flex: 0 0 43%; position: relative; z-index: 1; }
.nichijo .nichijo_text { flex: 0 0 68%; margin-left: -20px; position: relative; z-index: 1; }
.nichijo ul { display: flex; align-items: center; justify-content: space-evenly; padding-left: 0; width: 65%; margin-left: auto; margin-right: auto; position: relative; z-index: 1; }
.nichijo ul li { background-repeat: no-repeat; background-size: contain; background-position: center; width: calc(5em + (1vw - 0.32em) * 11.1607); line-height: calc(5em + (1vw - 0.32em) * 11.1607) !important; text-align: center; font-size: calc(1em + (1vw - 0.32em) * 0.6696); letter-spacing: .2em; }

@media screen and (min-width: 768px) { .nichijo { width: 400px; margin: auto; height: auto; background-position: left 50px,right top; display: block; margin-bottom: 200px; }
  .nichijo .balloon { height: 350px; bottom: 20%; }
  .nichijo_item { flex-direction: column; }
  .nichijo .nichijo_rabbit { margin-top: 100px; margin-right: auto; margin-left: auto; width: 400px; flex: none; }
  .nichijo .nichijo_text { flex: none; width: 600px; margin: 80px auto 50px; position: relative; left: 50%; transform: translateX(-50%); }
  .nichijo ul { width: 500px; margin: auto; position: relative; left: 50%; transform: translateX(-50%); }
  .nichijo ul li { width: 100px; line-height: 100px; font-size: 17px; } }
.h2_wrapper { text-align: center; }

.variousways h2 { font-size: calc(1.3em + (1vw - 0.32em) * 2.6786); font-weight: normal; display: inline-block; background-position: bottom; background-size: contain; background-repeat: no-repeat; padding-bottom: 1em; margin-left: auto; margin-right: auto; }
.variousways h2 img { height: calc(3em + (1vw - 0.32em) * 4.4643); width: auto !important; vertical-align: bottom; padding-right: 1em; }
.variousways h3 { text-align: center; font-weight: normal; font-size: calc(1.2em + (1vw - 0.32em) * 3.5714); margin-top: calc(5em + (1vw - 0.32em) * 26.7857); margin-bottom: calc(4em + (1vw - 0.32em) * 10.0446); }
.variousways h3 span { vertical-align: bottom; }
.variousways h3 img { width: 50px !important; margin-bottom: -15px; }
.variousways article:last-of-type { position: relative; margin-bottom: 100px; }
.variousways article:last-of-type p { position: absolute; font-size: calc(1em + (1vw - 0.32em) * 2.6786) !important; bottom: calc(0em + (1vw - 0.32em) * -4.4643); left: 50%; transform: translateX(-50%); width: 100%; text-align: center; }
.variousways .figure_wrapper { display: flex; align-items: flex-end; justify-content: space-around; }
.variousways figure { margin: 0; flex: 0 0 40%; position: relative; padding-bottom: 3em; margin-bottom: 3em; position: relative; }
.variousways figure .chika { position: absolute; width: 35%; }
.variousways figure .chika1-1-1 { top: 30%; left: 5%; }
.variousways figure .chika1-1-2 { top: 50%; left: 50%; }
.variousways figure .chika1-2-1 { top: -30%; left: 5%; }
.variousways figure .chika1-2-2 { top: 40%; left: 70%; }
.variousways figure .chika2-1-1 { top: -10%; left: 20%; }
.variousways figure .chika2-2-1 { top: 15%; left: 20%; }
.variousways figure .chika2-2-2 { top: 40%; left: 60%; }
.variousways figure .chika3-1-1 { top: 0%; left: 20%; }
.variousways figure .chika3-1-2 { top: 40%; left: 70%; }
.variousways figure .chika3-2-1 { top: -20%; left: 10%; }
.variousways figure .chika3-2-2 { top: 10%; right: 0%; }
.variousways figure .chika4-1-1 { top: 40%; left: 0%; }
.variousways figure .chika4-1-2 { top: 25%; left: 60%; }
.variousways figure .chika4-2-1 { top: 50%; left: 0%; }
.variousways figure .chika4-2-2 { top: 35%; left: 80%; }
.variousways figure .v_img { max-width: 320px; margin: 0 auto 30px; }
.variousways figure .v_img_1-1 { width: 80%; margin-right: 0; margin-left: auto; max-width: 270px; }
.variousways figure .v_img_3-1 { width: 86%; max-width: 250px; }
.variousways figure .v_img_4-2 { width: 70%; margin-right: auto; margin-left: auto; max-width: 240px; }
.variousways figure figcaption { position: absolute; width: 100%; font-size: calc(1em + (1vw - 0.32em) * 2.6786); text-align: center; }
.variousways .asterisk { position: relative; display: inline-block; }
.variousways .asterisk::after { content: '※'; position: absolute; bottom: 1.5em; font-size: 10px; }
.variousways .asterisk-1::after { content: '※1'; position: absolute; bottom: 1.5em; font-size: 10px; }
.variousways .asterisk_detail { position: relative; margin: 5em auto; /*text-align: center;*/ width: calc(23em + (1vw - 0.32em) * 42.4107); }
.variousways .asterisk_detail p { text-align: left; display: inline-block; }
.variousways .asterisk_detail::before { content: ''; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 100%; height: 2px; background-image: url("../img/bibi_fabricmist_images/line.jpg"); background-position: center; background-size: contain; }
.variousways .asterisk_detail::after { content: ''; position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); width: 100%; height: 2px; background-image: url("../img/bibi_fabricmist_images/line.jpg"); background-position: center; background-size: contain; }
@media screen and (min-width: 768px) { .variousways h2 { font-size: 25px; }
  .variousways h2 img { height: 50px; }
  .variousways h3 { text-align: left; padding-left: 3em; margin-top: 130px; margin-bottom: 85px; font-size: 28px; }
  .variousways article:last-of-type p { font-size: 22px !important; }
  .variousways figure figcaption { font-size: 22px; }
  .variousways .sp_only { display: none; }
  .variousways .asterisk_detail { width: 420px; } }

.anime1 { -webkit-animation: blink 2.0s ease-in-out infinite alternate; -moz-animation: blink 2.0s ease-in-out infinite alternate; animation: blink 2.0s ease-in-out infinite alternate; }

.anime2 { -webkit-animation: blink 3.0s ease-in-out infinite alternate; -moz-animation: blink 3.0s ease-in-out infinite alternate; animation: blink 3.0s ease-in-out infinite alternate; }

@-webkit-keyframes blink { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-moz-keyframes blink { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes blink { 0% { opacity: 0; }
  100% { opacity: 1; } }
.attention_behind { display: none; }
.attention h2 { display: inline-block; font-size: calc(1.3em + (1vw - 0.32em) * 3.3482); line-height: 2em; padding-left: 1em; padding-right: 1em; border: .5px solid #707070; font-weight: normal; cursor: pointer; }
.attention .figure_wrapper { margin-top: 2.5em; margin-bottom: 2.5em; }
.attention .figure_line { background-image: url("../img/bibi_fabricmist_images/line.jpg"); background-repeat: no-repeat; background-position: center; background-size: contain; background-repeat: repeat-x; width: 100%; height: 2px; }
.attention .figure_line:first-child { margin-top: 2.5em; }
.attention .figure_line:last-child { margin-bottom: 2.5em; }
.attention .attention_wrapper { margin: 5em auto; position: relative; }
.attention .attention_wrapper::before { content: ''; position: absolute; top: -30px; width: 100%; height: 2px; background-image: url("../img/bibi_fabricmist_images/line.jpg"); background-position: center; background-size: contain; }
.attention .attention_wrapper::after { content: ''; position: absolute; bottom: -30px; width: 100%; height: 2px; background-image: url("..img/bibi_fabricmist_images/line.jpg"); background-position: center; background-size: contain; }
.attention figure { min-height: 120px; margin-left: 0; margin-right: 0; display: flex; align-items: center; justify-content: start; }
.attention figure div { flex: 0 0 40%; margin-right: 1em; }
.attention figure figcaption { font-size: calc(1.0em + (1vw - 0.32em) * 0.6696); }
@media screen and (min-width: 768px) { .attention h2 { font-size: 28px; }
  .attention figure { flex-direction: column; flex: 0 0 45%; max-width: 270px; margin: 0 auto; }
  .attention figure figcaption { font-size: 14px; }
  .attention figure .attention_figure_mini { padding: 2em 0; }
  .attention figure div { flex: none; height: 220px; padding: 2em; display: flex; align-items: center; }
  .attention .figure_wrapper { display: flex; flex-wrap: wrap; justify-content: center; width: 768px; margin-left: auto; margin-right: auto; }
  .attention p { width: 85%; max-width: 654px; margin: auto; } }
.attention p { line-height: 2em; }