@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Noto+Serif+JP:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
:root {
  --accent-color: #9729cf;
  --accent-color-pink: #e3295a;
  --dark-color: #111317;
  --light-dark-color: #3c3d41;
  --gray-color: #4e4e4e;
  --en-font: "Playfair Display";
}
/*-------------------------------------------
common
-------------------------------------------*/
.sp-only {
  display: none;
}
.pc-only {
  display: inline-block;
}
body {
  font-family: YakuHanJP, "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1.8;
  font-size: 15px;
  background: #111317;
  color: #fff;
}
.inner {
  max-width: 1040px;
  margin: 0 auto;
}
.center {
  text-align: center;
}
.txt-shadow {
  text-shadow: 0px 0px 3px #000, 0px 0px 5px #000, 0px 0px 20px #000;
}
.btn {
  position: relative;
  display: inline-block;
  border: 1px solid var(--accent-color-pink);
  size: 20px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  color: var(--accent-color-pink);
  background: var(--dark-color);
  transition: 0.5s;
}
.middle-btn {
  padding: 15px 80px;
  margin-top: min(30 / 1440 * 100vw, 30px);
  margin-bottom: min(30 / 1440 * 100vw, 30px);
}
.middle-btn::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 27px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid var(--accent-color-pink);
  border-right: 2px solid var(--accent-color-pink);
  transform: rotate(45deg);
  box-sizing: border-box;
}
.btn:hover {
  background-position: right center;
  background-size: 200% auto;
  -webkit-animation: pulse 2s;
  animation: btn-fade 1.5s;
  color: var(--dark-color);
  background: var(--accent-color-pink);
}
@keyframes btn-fade {
  0% {
    box-shadow: 0 0 0 0 var(--accent-color-pink);
  }
  70% {
    box-shadow: 0 0 0 10px rgb(39 172 217 / 0%);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(39 172 217 / 0%);
  }
}
.middle-btn:hover::after {
  border-top: 2px solid var(--dark-color);
  border-right: 2px solid var(--dark-color);
}
.txt-strong {
  color: var(--accent-color);
}
.txt-strong-more {
  color: var(--accent-color-pink);
}
section {
  padding: 80px 0px;
  position: relative;
}
h2.section-title img {
  max-width: 50%;
  height: auto;
}
.small-title {
  font-family: var(--en-font);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  font-size: 12px;
}
.small-title::before {
  content: '';
  display: inline-block;
  margin-right: 5px;
  width: 15px;
  height: 1px;
  background-color: var(--accent-color);
}
.dl-list {
  display: flex;
}
.dl-list div {
  width: 50%;
}
.dl-list div:first-child {
  margin-right: 40px;
}
.dl-list dl {
  display: flex;
  margin: 5px 0px;
  padding: 5px 0px;
  font-size: 12px;
}
.dl-list dt {
  width: 20%;
  border-right: solid 1px var(--gray-color);
  font-weight: 500;
  color: var(--accent-color);
  padding-right: 20px;
}
.dl-list dd {
  width: 80%;
  padding-left: 20px;
}
main img {
  width: 100%;
  height: auto;
}
/*-------------------------------------------
header
-------------------------------------------*/
#header {
  font-family: var(--en-font);
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--dark-color);
}
.overlayNav {
  padding: 10px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.blandLogo {
  transition: filter 0.5s ease;
  filter: brightness(1);
}
.blandLogo:hover {
  filter: brightness(0.4);
}
.navBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-direction: column;
}
.utilityNav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 10px;
}
.utilityNav ul {
  display: flex;
}
.utilityNav li {
  font-weight: bold;
  font-size: 12px;
  color: #fff;
  margin-left: 15px;
  padding-right: 15px;
  border-right: solid 1px var(--light-dark-color);
}
.utilityNav li:last-child {
  border-right: none;
  padding-right: 0px;
}
.utilityNav li a:hover {
  color: var(--accent-color);
  transition: .3s;
}
.utilityNav li a:hover::after {
  opacity: 1;
}
.globalNav ul {
  display: flex;
  justify-content: flex-end;
  font-size: min(20 / 1440 * 100vw, 20px);
}
.globalNav ul li {
  padding-left: min(20 / 1440 * 100vw, 20px);
  padding-right: min(20 / 1440 * 100vw, 20px);
  text-align: center;
  letter-spacing: 2px;
  background: linear-gradient(0deg, #581878 0%, #9729cf 80%);
  /*background: linear-gradient(0deg, #21565a 0%, #24c7c4 80%);*/
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.globalNav ul li:last-child {
  padding-right: 0px;
}
.globalNav ul li :hover {
  background: none;
  background-clip: text;
  -webkit-text-fill-color: var(--accent-color-pink);
  ;
  transition: all 1s ease 0s;
}
.globalNav li span {
  display: block;
  font-size: 10px;
  margin-top: -5px;
  letter-spacing: 0px;
}
.coming-link {
  opacity: 0.8;
  pointer-events: none;
}
/*-------------------------------------------
main
-------------------------------------------*/
#main {
  padding: 40px 0px 60px 0px;
  letter-spacing: 1.5px;
  margin: 0 auto;
}
/*-------------------------------------------
top
-------------------------------------------*/
/*-------------------------------------------
mainvisual
-------------------------------------------*/
#top #main {
  padding-top: 0;
}
section.mainVisual {
  padding: 0px;
}
.mainVisual {
  margin: 0px auto 0px auto;
  text-align: center;
  display: flex;
  justify-content: center;
}
.mainVisual img {
  width: 100%;
}
/*-------------------------------------------
shop
-------------------------------------------*/
.shop {
  background: rgba(151, 41, 207, 0.2);
  padding: 40px 0px;
  margin: 0 auto;
}
.shop .shopList {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0 20px;
}
.shop .shopList div {
  width: calc(50% - 10px);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
}
.link-banner {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
  filter: brightness(1);
  transition: filter 0.3s ease;
}
.link-banner:hover {
  filter: brightness(1.15);
}
.shop .shopList div img {
  width: 100%;
}
/*-------------------------------------------
introduction
-------------------------------------------*/
#introduction {
  background-image: url("../images/introduction/bg.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.introduction p {
  margin-bottom: 50px;
  font-size: clamp(16px, 3vw, 22px);
}
.introduction p img {
  max-width: 70%;
  height: auto;
}
.introduction .txt-strong-more {
  font-size: clamp(16px, 4vw, 28px);
}
.txt-line {
  letter-spacing: -2px;
}
/*-------------------------------------------
product
-------------------------------------------*/
#product {
  background-image: url("../images/product/machigurumi_bg.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
#product-nanako {
  background-image: url("../images/product/nanako_bg.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
#product-kegasareta {
  background-image: url("../images/product/kegasareta_bg.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  padding-bottom: 100px;
}
#product {
  padding: 80px 0px 0px 0px;
}
.productBox {
  padding: 60px 0px;
}
#product-machigurumi {
  padding: 60px 0px 0px 0px;
}
.product__main {
  display: flex;
  margin: 0 auto 40px auto;
  justify-content: center;
  align-items: center;
  gap: 40px;
	padding:0 40px;
}
.product__main div {
  width: 50%;
}
.product__main div img {
  max-width: 100%;
}
.productBox {
  padding: 60px 0px;
}
.productBox p {
  font-size: 22px;
}
.product__main p {
  line-height: 2.5;
}
.product__title img {
  display: block;
  position: relative;
  left: -40px;
}
.product__title p {
  border-top: solid 1px var(--accent-color-pink);
  font-size: 22px;
  padding-top: 30px;
  margin-top: 20px;
  text-align: left;
}
.product__jacket img {
  filter: drop-shadow(0px 0px 10px var(--accent-color-pink));
}
.product__point {
  margin-bottom: 60px;
	padding:0px 40px;
}
.product__cg {
  margin-top: calc(100vw/ (1040 / 20) * -1);
}
.product__cg img {
  width: 100%;
}
.system_img {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}
.system_img img {
  width: 30%;
  filter: drop-shadow(0px 0px 5px var(--accent-color));
}
#product-nanako .product__cg {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nanako_tachie {
  width: 30%;
}
.nanako_cgBox {
  width: 70%;
}
.nanako_tachie img {
  max-width: 100%;
}
.nanako_cg {
  display: flex;
  gap: 20px;
  justify-content: space-around;
}
.nanako_cg img {
  width: 48%;
}
.nanako_cgBox p img {
  width: 100%;
}
.product__link {
  padding: 60px 0px;
  margin-top: 60px;
  background: rgba(0, 0, 0, 0.5);
}
.product__link div {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
  max-width: 600px;
  margin: 0 auto;
}
/*-------------------------------------------
special
-------------------------------------------*/
#special {
  background-image: url("../images/special/bg.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.special p {
  font-size: 22px;
}
#shop {
  padding-bottom: 100px;
}
.special_cg {
  width: 100%;
  margin: 0 auto;
}
/*-------------------------------------------
footer
-------------------------------------------*/
#footer {
  padding: 40px 60px;
  color: var(--gray-color);
  border-top: solid 1px var(--gray-color);
  background-color: var(--dark-color);
  text-align: center;
}
#footer small {
  font-family: var(--en-font);
}
/*-------------------------------------------
sp
-------------------------------------------*/
@media (max-width: 960px) {
  body {}
  .sp-only {
    display: inline-block;
  }
  .pc-only {
    display: none;
  }
  /*-------------------------------------------
sp ■headerNav
-------------------------------------------*/
  #header {
    position: relative;
  }
  /*headerNav------------------*/
  .blandLogo {
    margin-bottom: 20px;
  }
  .navBox {
    flex-direction: column-reverse;
  }
  .globalNav ul {
    display: block;
    margin-bottom: 30px;
    font-size: 20px;
  }
  .globalNav ul li {
    margin-bottom: 5px;
  }
  .overlayNav {
    position: fixed;
    z-index: 5;
    width: 100%;
    height: 100vh;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: flex-start;
    align-items: center;
    flex-flow: column;
    opacity: 0;
    visibility: hidden;
    transition: all .5s;
    display: flex;
    padding-top: 50px;
  }
  .overlayNav.navOpen {
    display: flex;
    visibility: visible;
    opacity: 1;
    width: 100%;
    height: 100vh;
    animation: navOpen 0.3s;
  }
  .navOpen__blur {
    filter: blur(8px);
    transition: all .5s;
  }
  .globalNavBtn {
    position: fixed;
    top: 10px;
    right: 10px;
    background: var(--dark-color);
    box-shadow: 0px 0px 4px 2px rgba(151, 41, 207, 0.8);
    border-radius: 50%;
    padding: 10px;
    z-index: 10;
  }
  .globalNavBtn__Trigger {
    display: block;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .globalNavBtn__Trigger span {
    content: '';
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 6px;
    background-color: var(--accent-color);
    transition: all .5s;
  }
  .globalNavBtn__Trigger.navActive span {
    background-color: var(--accent-color-pink);
  }
  .globalNavBtn__Trigger span:nth-of-type(1) {
    top: 4px;
  }
  .globalNavBtn__Trigger.navActive span:nth-of-type(1) {
    transform: translateY(7px) rotate(-45deg);
  }
  .globalNavBtn__Trigger span:nth-of-type(2) {
    top: 11px;
  }
  .globalNavBtn__Trigger.navActive span:nth-of-type(2) {
    opacity: 0;
  }
  .globalNavBtn__Trigger span:nth-of-type(3) {
    bottom: 4px;
  }
  .globalNavBtn__Trigger.navActive span:nth-of-type(3) {
    transform: translateY(-7px) rotate(45deg);
  }
  .globalNavBtn__Trigger {
    transform: translateX(0);
  }
  /*-------------------------------------------
sp ■main
-------------------------------------------*/
  #main .inner {
    padding: 0 20px;
    letter-spacing: 1.2px;
  }
  section {
    padding: 20px 0px 40px 0px;
  }
  #main section.shop {
    margin: 0px;
  }
  h2.section-title {
    margin-top: 30px;
  }
  h2.section-title img {
    max-width: 80%;
  }
  h3.section-title {
    overflow: hidden;
  }
  h3.section-title img {
    width: 120%;
    margin-left: -10%;
  }
  .dl-list {
    flex-direction: column;
  }
  .dl-list div {
    width: 100%;
  }
  .dl-list dt {
    width: 28%;
  }
  .dl-list dd {
    width: 72%;
  }
  .shop .shopList div {
    width: 100%;
  }
  .mainVisual {
    margin: 0 auto;
    text-align: center;
  }
  #top #main {
    margin: 0;
  }
  .shopList, .spec, .product__link div {
    margin: 0 20px;
  }
  /*-------------------------------------------
sp ■introduction
-------------------------------------------*/
  section {
    position: relative;
  }
  #introduction {
    background: none;
  }



  body:after {
    content: "";
    display: block;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;

  }
  body.introduction_bg:after {
    background-image: url("../images/introduction/bg_sp.jpg");
	  animation-name: fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
	  
  }
  #product {
    background: none;
  }
  body.product_bg:after {
    background-image: url("../images/product/machigurumi_bg_sp.jpg");
	  	  animation-name: fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
  }
  #product-nanako {
    background: none;
  }
  body.product-nanako_bg:after {
    background-image: url("../images/product/nanako_bg_sp.jpg");
	  	  animation-name: fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
  }
  #product-kegasareta {
    background: none;
  }
  body.product-kegasareta_bg:after {
    background-image: url("../images/product/kegasareta_bg_sp.jpg");
	  	  animation-name: fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
  }
  #special {
    background: none;
  }
  body.special_bg:after {
    background-image: url("../images/special/bg_sp.jpg");
	  	  animation-name: fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
  }
  .introduction p {
    margin-bottom: 30px;
    text-align: left;
  }
  .introduction .txt-strong-more {}
  /*-------------------------------------------
sp ■product
-------------------------------------------*/
  #product {
    padding: 40px 0px 0px 0px;
  }
  .productBox {
    padding: 50px 0px 10px 0px;
  }
  #product-machigurumi {
    padding: 0px 0px 0px 0px;
  }
  .product__main {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    gap: 0px;
    margin: 0 auto 40px auto;
	 padding:0;
  }
  .product__main div {
    width: 100%;
  }
  .product__title {
    max-width: 90%;
  }
  .product__title img {
    display: inline-block;
    position: relative;
    left: 0px;
  }
  .productBox p {
    font-size: 14px;
  }
  .product__main p {
    line-height: 2;
    padding-top: 10px;
    margin-top: 10px;
  }
	.product__point{
		 padding:0;
	}
  .product__point p, .product__system p {
    text-align: left;
  }
  .product__jacket {
    max-width: 90%;
  }
  .system_img {
    flex-wrap: wrap;
  }
  .system_img img {
    width: 45%;
  }
  .system_img:after {
    content: "";
    display: block;
    width: 45%;
    height: 0;
  }
  .product__point {
    margin-bottom: 40px;
  }
  #product-nanako .product__cg {
    flex-direction: row-reverse;
    gap: 10px;
  }
  .nanako_cg {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .nanako_cg img {
    width: 100%;
  }
  .nanako_tachie {
    width: 45%;
  }
  .nanako_cgBox {
    width: 55%;
  }
  #product-kegasareta {
    padding-bottom: 60px;
  }
  /*-------------------------------------------
special
-------------------------------------------*/
  .special p {
    font-size: 16px;
    text-align: left;
  }
  .special_cg {
    overflow: hidden;
    width: auto;
    margin: 0 auto;
  }
  .special_cg img {
    width: 120%;
    margin-left: -10%;
  }
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}