@charset "utf-8";

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/* config */
:root {
  --tc: #333;
  --tc_02: #39c4b9;
  --ff: #fff;
  --miku_c: #00a3a3;
  --bg_01: #39c4ba;
  --bg_02: #FAC5DD;
  --bg_03: #fcdcea;
  --bg_04: #bcece7;
  --bg_05: #f2fbfa;
  --bg_06: #f8fce2;
  --pnk: #e6227c;
  --line: #ccc;
  --about: #666;
  --t4: 400;
  --t5: 500;
  --t7: 700;
  --t9: 900;
}

/* Anime */
@keyframes loop {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -4313px 0;
  }
}

/* ALL */
html,
body {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 100%;
  line-height: 2;
  letter-spacing: 0;
  background: var(--ff);
}
#container {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}
.contentbloc {
  width: min(98%, 1000px);
  margin: 0 auto;
}
a {
  text-decoration: underline;
  color: #196f78;
  transition: .2s;
}
a:hover {
  color: #2075c4;
  text-decoration: none;
}
main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#footer footer #footer_inner div address {
  font-size: .8rem;
}
#footer footer #copyright li {
  font-size: .7rem;
}
#footer footer #footer_inner div.button_area a {
  font-size: .85rem;
  padding: .4rem 0;
}
sub {
  font-size: .8rem;
  vertical-align: sub;
}
sup {
  font-size: .8rem;
  vertical-align: super;
}
/* topimg */
#topimg {
  position: relative;
}
img.topimages {
  display: block;
  width: 100%;
}
#topimg ul {
  position: absolute;
  bottom: 2%;
  left: 10%;
  width: 50%;
  display: flex;
}
#topimg ul li {
  padding: 0 5%;
}
#miku,
#yukimiku {
  width: 80%;
  margin: 0 auto -20%;
  padding: 5%;
  background: #09a3a3;
}
#yukimiku {
  background: #2B71B8;
}
#miku h1,
#yukimiku h1 {
  color: #fff689;
  font-size: 1.9rem;
  font-weight: var(--t7);
  text-align: center;
}
#yukimiku h1 {
  color: var(--ff);
}
#miku a,
#yukimiku a {
  display: block;
  margin: -3% 0 0;
  color: var(--ff);
  font-size: 1.2rem;
  font-weight: var(--t5);
  text-align: center;
  text-decoration: none;
}
#miku p,
#yukimiku p {
  color: var(--ff);
  font-size: 1.1rem;
  margin: 5%;
}
#miku .mfp-close,
#yukimiku .mfp-close {
  bottom:-25%;
}
.mfp-image-holder > .mfp-content >.mfp-figure > .mfp-close {
  left: 0;
  bottom: -10%;
  margin-left: 0;
  cursor: pointer;
}
.mfp-image-holder .mfp-close {
  text-align: center !important;
}
/* style */
#infomation h1,
#contents h1,
#event h1,
#products h1,
#story h1,
#gallery h1 {
  position: relative;
  width: 40%;
  margin: 0 auto;
  font-family: 'Roboto', sans-serif;
  color: var(--pnk);
  font-size: clamp(1.6rem, calc(1.6rem + ((1vw - .2rem) * 3.5714)), 2.6rem);
  min-height: 0vw;
  font-weight: var(--t5);
  text-align: center;
}
#infomation h1::after,
#contents h1::after,
#event h1::after,
#products h1::after,
#story h1::after,
#gallery h1::after {
  position: absolute;
  content: '';
  left: 0;
  bottom: 15%;
  width: 100%;
  height: 2px;
  background: -webkit-repeating-linear-gradient(-45deg,  var(--pnk),  var(--pnk) 2px, var(--ff) 0, var(--ff) 4px);
  background: repeating-linear-gradient(-45deg,  var(--pnk),  var(--pnk) 2px, var(--ff) 0, var(--ff) 4px);
}
#infomation h2,
#contents h2,
#event h2,
#products h2,
#story h2,
#gallery h2 {
  margin: -5px 0 0;
  color: var(--pnk);
  font-size: clamp(1rem, calc(1rem + ((1vw - .2rem) * .7143)), 1.2rem);
  min-height: 0vw;
  font-weight: var(--t4);
  text-align: center;
}
/* infomation */
#infomation {
  margin: 8% 0 0;
}
#infomation dl {
  display:flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 50px auto 100px;
}
#infomation dl dt {
  width: 20%;
  padding: 5px 0;
  box-sizing: border-box;
  color: var(--tc);
  font-size: clamp(1rem, calc(1rem + ((1vw - .2rem) * .3571)), 1.1rem);
  min-height: 0vw;
  font-weight: var(--t4);
  border-bottom: 1px dashed var(--line);
}
#infomation dl dd {
  width: 80%;
  padding: 10px 0;
  box-sizing: border-box;
  color: var(--tc);
  font-size: clamp(1rem, calc(1rem + ((1vw - .2rem) * .3571)), 1.1rem);
  min-height: 0vw;
  font-weight: var(--t4);
  line-height: 1.4;
  border-bottom: 1px dashed var(--line);
}
/* contents */
#contents {
  position: relative;
  padding: 6% 0 7%;
}
#contents::before,
#contents::after {
  position: absolute;
  content: '';
  left: 0;
  width: 100%;
  height: 5px;
  background: -webkit-repeating-linear-gradient(45deg, var(--bg_01), var(--bg_01) 2px, var(--ff) 2px, var(--ff) 4px);
  background: repeating-linear-gradient(45deg, var(--bg_01), var(--bg_01) 2px, var(--ff) 2px, var(--ff) 4px);
}
#contents::before {
  top: 0;
}
#contents::after {
  bottom: 0;
}
#contents ul{
  display: flex;
  width: 100%;
  justify-content: space-between;
}
#contents ul li {
  padding: 10px;
  background-color: var(--bg_02);
  background: repeating-linear-gradient( -45deg, var(--bg_02), var(--bg_02) 8px, var(--bg_03) 8px, var(--bg_03) 10px );
}
#contents ul li a {
  text-decoration: none;
}
#contents ul li a div {
  position: relative;
  display: block;
  min-height: 130px;
  padding: 1.5em .5em;
  background: var(--ff);
  text-align: center;
}
#contents ul li a div h2 {
  display: block;
  font-family: 'Roboto', sans-serif;
  color: var(--pnk);
  font-size: clamp(1.25rem, calc(1.25rem + ((1vw - .48rem) * 1.7188)), 1.8rem);
  min-height: 0vw;
  font-weight: var(--t5);
  line-height: 1.2;
  -webkit-transition: all .2s;
  transition: all .2s;
}
#contents ul li a div h3 {
  display: block;
  margin: 0 auto 1em;
  color: var(--pnk);
  font-size: clamp(.85rem, calc(0.85rem + ((1vw - .48rem) * .9412)), 1rem);
  min-height: 0vw;
  font-weight: var(--t4);
  line-height: 1.2;
  -webkit-transition: all .2s;
  transition: all .2s;
}
#contents ul li a div::after {
  position: absolute;
  content: '';
  bottom: 1em;
  left: calc(50% - 6px);
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--pnk);
  border-right: 2px solid var(--pnk);
  transform: rotate(135deg);
  -webkit-transition: all .2s;
  transition: all .2s;
}
/* event */
#event {
  padding: 3% 0 0;
}
#event_head {
  position: relative;
  width: 100%;
  margin: 3% 0 0;
}
/* products */
#products {
  position: relative;
  min-height: 800px;
  margin: 0 0 60px;
  padding: 5% 0 8%;
  background: var(--bg_04);
  background: linear-gradient(32deg, var(--bg_04) 0%, var(--bg_05) 25%, var(--bg_05) 85%, var(--bg_04) 100%);
}
.productsloop {
  width: 100%;
  height: 616px;
  margin: 5% 0;
  background: url(../images/lab/products.png) repeat-x 0 0;
  background-size: cover;
  overflow: hidden;
  animation: loop 45s linear infinite;
}
#products p {
  color: var(--tc_02);
  font-size: clamp(.9rem, calc(.9rem + ((1vw - .2rem) * 1.0714)), 1.2rem);
  min-height: 0vw;
  font-weight: var(--t7);
  line-height: 1.6;
  text-align: center;
}
a.products_btn {
  display: block;
  position: relative;
  width: min(90%, 580px);
  margin: 3em auto;
  text-align: center;
  background: var(--miku_c);
  border-radius: 3px;
  text-decoration: none;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
a.products_btn span.btn_txt {
  display: block;
  padding: 1.1em 0;
  color: var(--ff);
  font-size: clamp(1rem, calc(1rem + ((1vw - .48rem) * 1.8824)), 1.3rem);
  font-weight: var(--t5);
  line-height: 1.2;
}
a.products_btn::after {
  position: absolute;
  content: url(../images/common/arrow.svg);
  top: calc((100% - 24px) / 2);
  right: .8em;
  width: 24px;
  height: 24px;
}
/* story */
#story {
  position: relative;
  width: 100%;
  background: var(--bg_06);
}
#story::before {
  position: absolute;
  content: '';
  top: -180px;
  left: 0;
  width: 100%;
  height: 200px;
  background: url(../images/lab/story_bg_top.svg) center bottom / cover no-repeat;
}
#story::after {
  position: absolute;
  content: '';
  bottom: -180px;
  left: 0;
  width: 100%;
  height: 200px;
  background: url(../images/lab/story_bg_bottom.svg) center bottom / cover no-repeat;
}
.storybloc {
  position: relative;
  width: min(96%, 1000px);
  margin: 80px auto;
}
a.story_btn {
  display: block;
  position: relative;
  width: min(90%, 580px);
  margin: 80px auto 0;
  text-align: center;
  background: var(--miku_c);
  border-radius: 3px;
  text-decoration: none;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
a.story_btn span.btn_txt {
  display: block;
  padding: 1.1em 0;
  color: var(--ff);
  font-size: clamp(1rem, calc(1rem + ((1vw - .48rem) * 1.8824)), 1.3rem);
  font-weight: var(--t5);
  line-height: 1.2;
}
a.story_btn::after {
  position: absolute;
  content: url(../images/common/arrow.svg);
  top: calc((100% - 24px) / 2);
  right: .8em;
  width: 24px;
  height: 24px;
}
/* gallery */
#gallery {
  padding: 0 0 3%;
  margin: 150px 0 0;
}
#gallery article {
  width: min(98%, 1000px);
  margin: 3% auto;
}
#photogallery dt,
#photogallery dt.active {
  position: relative;
  margin: .5em 0;
  padding: .5em 1em;
  color: var(--ff);
  font-size: clamp(.9rem, calc(.9rem + ((1vw - .2rem) * .7143)), 1.1rem);
  min-height: 0vw;
  font-weight: var(--t7);
  background:  var(--pnk);
  cursor: pointer;
}
#photogallery dt::after,
#photogallery dt.active::after {
  position: absolute;
  content: url(../images/common/icon_plus.svg);
  top: calc((100% - 24px) / 2);
  right: .8em;
  width: 24px;
  height: 24px;
}
#photogallery dt.active::after {
  content: url(../images/common/icon_minus.svg);
}
#photogallery dd {
  margin: 1em 0;
}
#photogallery dd > ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1em;
  width: 100%;
}
#photogallery dd > ul > li {
  flex-basis: calc((100% - 3em) / 4);
  max-width: 240px;
  max-height: 180px;
  border: 1px solid var(--line);
}
#photogallery dd > ul > li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#photogallery dd > ul > li.noborder {
  border:none;
}
/* intro_bloc */
#intro_bloc {
  width: 100%;
  background: var(--bg_05);
}
#intro_bloc ul {
  width: min(96%, 1000px);
  margin: 0 auto;
}
#intro_bloc ul li {
  margin: 3em 0;
}
#intro_bloc ul li a img {
  display: block;
  width: 100%;
  aspect-ratio: 10 / 3;
}
#intro_bloc ul li a {
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
#intro_bloc ul li a:hover {
  opacity: .6;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
@media all and (max-width: 640px) {
  /* gallery */
  #photogallery dd > ul {
    justify-content: space-around;
  }
  #photogallery dd > ul > li {
    flex-basis: calc((100% - 1em) / 2);
  }
  #photogallery dt::after,
  #photogallery dt.active::after {
    top: calc((100% - 20px) / 2);
    width: 18px;
    height: 18px;
  }
  /* intro_bloc */
  #intro_bloc ul li {
    margin: 1em 0;
  }
}
/* hover */
#topimg ul li a,
#contents a,
#products a,
#event a {
  -webkit-transition: all .2s;
  transition: all .2s;
}
#topimg ul li a:hover,
#products a:hover,
#story a:hover,
#contents ul li:hover a div h2,
#contents ul li:hover a div h3,
#contents ul li:hover a div::after {
  opacity: .6;
  -webkit-transition: all .2s;
  transition: all .2s;
}
#event a:hover img:not(.nohover) {
  opacity: .8;
}
.btn_link:hover::before {
  content: url(../images/common/arrow_03.svg);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.btn_link:hover::after {
  transform: scale(1, 1);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.btn_link:hover.btn_link a p {
  color: var(--ff);
}
@media all and (max-width: 480px) {
  #infomation h1::after,
  #contents h1::after,
  #event h1::after,
  #products h1::after,
  #story h1::after,
  #gallery h1::after {
    left: calc(50% - 150px);
    width: 300px;
  }
  /* contents */
  #contents .contentbloc {
    width: min(98%, 450px);
  }
}
@media all and (max-width: 640px) {
  .pc_box,
  .pc {
    display:none !important;
  }
  .cautionpop02 {
  padding: 20px 0 0;
}
  /* topimg */
  #topimg {
    aspect-ratio: 32 / 25;
  }
  #topimg ul {
    bottom: 15%;
  }
  /* style */
  #infomation h1,
  #contents h1,
  #event h1,
  #products h1,
  #story h1,
  #gallery h1 {
    width: 100%;
  }
  /* infomation */
  #infomation dl {
    margin: 0 auto 100px;
  }
  #infomation dl dt {
    width: 100%;
    padding: 5px 2% 0;
    border: none;
  }
  #infomation dl dd {
    width: 100%;
    padding: 0 2% 5px;
  }
  /* contents */
  #contents .contentbloc {
    text-align: center;
  }
  #contents ul {
    width: 98%;
    flex-wrap: wrap;
    margin: 0 auto;
  }
  #contents ul li {
    padding: 6px;
    flex-basis: calc(96% / 2);
  }
  #contents li{
    margin: 10px 0;
  }
  #contents ul li a div {
    min-height: 115px;
  }
  /* products */
  #products {
    margin: 0;
    padding: 5% 0 calc(8% + 70px);
  }
  .productsloop {
    height: 400px;
  }
  #products p {
    line-height: 1.2;
  }
  a.products_btn {
    padding: .5em 0;
  }
  a.products_btn::after {
    top: calc((100% - 20px) / 2);
    right: .8em;
    width: 20px;
    height: 20px;
  }
  /* story */
  #story::before {
    top: -100px;
    height: 100px;
  }
  #story::after {
    bottom: -60px;
    height: 100px;
  }
  .storybloc {
    margin: 30px auto;
    padding: 24px 0;
  }
  a.story_btn {
    width: calc(100% - 20px);
    padding: 0;
  }
  a.story_btn::after {
    top: calc((100% - 20px) / 2);
    right: .8em;
    width: 20px;
    height: 20px;
  }
  /* gallery */
  #gallery {
    margin: 60px 0 0;
  }
  #photogallery dd > ul {
    justify-content: space-around;
  }
  #photogallery dd > ul > li {
    flex-basis: calc((100% - 1em) / 2);
  }
  #miku .mfp-close,
  #yukimiku .mfp-close {
    bottom: -15%;
  }
}
@media all and (min-width: 641px) {
  .sp_box,
  .sp {
    display:none !important;
  }
  /* topimg */
  #topimg {
    aspect-ratio: 191 / 100;
  }
  /* contents */
  ul.bannerbloc {
    display: flex;
    justify-content: space-between;
  }
  #contents ul {
    margin: 50px auto 35px;
  }
  #contents ul li {
    flex-basis: calc(96% / 4);
  }
  /* event */
  #event_head img {
    display: block;
    width: 100%;
    aspect-ratio: 96 / 35;
  }
}
@media all and (max-width: 768px) {
  /* Display */
  .pc02 {
    display: none !important;
  }
  .mfp-image-holder .mfp-close::before {
    content: '';
  }
}
@media all and (max-width: 1023px) {
  .storyarea li br{
    display: none;
  }
}
@media all and (min-width: 641px) and (max-width: 1680px) {
  #topimg ul li img {
    max-width: 80%;
  }
}

/* about_bloc add 2022-12-09 */
#about_bloc {
  width:100%;
  padding: 60px 0;
  background: var(--ff);
}
#about_bloc #about_bloc_inner {
  width: min(90%, 1000px);
  margin: 0 auto;
}
#about_bloc #about_bloc_inner h2 {
  padding-bottom: .8em;
  color: var(--about);
  font-size: clamp(1rem, calc(1rem + ((1vw - .48rem) * 1.5625)), 1.25rem);
  min-height: 0vw;
  font-weight: var(--t4);
}
#about_bloc #about_bloc_inner p {
  color: var(--about);
  font-size: clamp(.75rem, calc(.75rem + ((1vw - .48rem) * 1.5625)), 1rem);
  min-height: 0vw;
  font-weight: var(--t4);
  line-height: 1.75;
}
@media all and (max-width: 640px){
  #about_bloc {
    padding: 20px 0;
  }
  #about_bloc #about_bloc_inner h2 {
    text-align: center;
  }
}
/* btn */
a.about_btn {
  display: block;
  position: relative;
  width: min(90%, 580px);
  margin: 3em auto 0;
  text-align: center;
  background: var(--miku_c);
  border-radius: 3px;
  text-decoration: none;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
a.about_btn span.btn_txt {
  display: block;
  padding: .7em 0;
  color: var(--ff);
  font-size: clamp(1rem, calc(1rem + ((1vw - .48rem) * .9375)), 1.15rem);
  min-height: 0vw;
  font-weight: var(--t5);
  line-height: 1.2;
}
a.allitems_btn span.btn_txt {
  padding: 1.25em 0;
}
a.about_btn::after {
  position: absolute;
  content: url(../images/common/arrow.svg);
  top: calc((100% - 24px) / 2);
  right: .8em;
  width: 24px;
  height: 24px;
}
@media all and (max-width: 767px) {
  a.about_btn {
    width: 100%;
    margin: 2em auto 0;
    padding-left: .6em;
    text-align: left;
  }
  a.about_btn span.btn_txt {
    padding: 1.25em 0;
  }
  a.about_btn::after {
    top: calc((100% - 20px) / 2);
    right: .6em;
    width: 20px;
    height: 20px;
  }
}
a.about_btn:hover {
  opacity: .8;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.mt {
  margin: 8% 0 0 !important;
}
.mt3 {
  margin: 3% 0 0 !important;
}
.mt5 {
  margin: 5% 0 0 !important;
}
.mb {
  margin: 0 0 5% !important;
}
.mtb {
  margin: 8% 0 !important;
}
.tc {
  text-align: center !important;
}
.tmin {
  font-size: .8rem !important;
}