@charset "utf-8";
/* CSS Document */

/*==================================
	common
==================================*/
body { font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic", "Segoe UI", Verdana, Meiryo, sans-serif; color: #666666; font-feature-settings: "palt";}
body a { outline: none !important; color: #666666;}
img { width: 100%;}
video { width: 100%;}
.put { position: absolute;}

/* cvArea */
.cvArea .cv04 { position: relative;}
.cvArea .cv04 a { position: absolute; z-index: 100; bottom: 0; left: 0; width: 100%; height: 100%; animation:beat 1.8s ease infinite;}


@keyframes loop-slide {
  from { transform: translateX(0);}
  to { transform: translateX(-100%);}
}
@keyframes beat {
  0%,
  50%,
  70%,
  100% {
    -webkit-transform:scale(1);
    transform:scale(1)
  }
  60%,
  80% {
    -webkit-transform:scale(1.05);
    transform:scale(1.05)
  }
}


/*==================================
	frame
==================================*/

.lp { width: 100%; overflow: hidden;}

.pc-frame {
  background-image:url(../img/pc_bg.webp);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  position:fixed;
  top:0;
  left:0;
  z-index:0;
  width:100%;
  height:100vh;
}
.pc-frame img {
  display:block;
  width:100%;
  height:auto
}
.pc-frame-left {
  position:absolute;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  z-index:0;
  top:0;
  left:0;
  width:calc(85.83333333% - 37.5rem);
  height:100%;
  padding:0
}
.pc--contents {
  width:100%;
  max-width:299px;
}
.pc---img {
  width:100%;
  margin:0 auto
}
.pc---btn {
  animation:beat 1.8s ease infinite;
  width:100%;
}
.pc---btn:hover {
  cursor:pointer;
  animation:none
}
.pc---btn:hover:hover {
  opacity:.7
}
.main-frame {
  position:relative;
  z-index:1;
  background-color: #fff;
  box-shadow: 6px 0px 5px -5px rgb(28 10 0 / 10%), -6px 0px 5px -5px rgb(28 10 0 / 10%);
  width:37.5rem;
  margin:0 14.16666667% 0 auto;
  overflow: hidden;
}
@media screen and (max-width: 1500px) {
  .pc-frame-left {
    padding:1.6rem
  }
  .main-frame {
  margin:0 7% 0 auto
  }
}
@media screen and (max-width: 1100px) {
  .pc-frame-left {
    width:calc(85.83333333% - 30.5rem);
  }
  .main-frame {
	width:30.5rem;
	margin:0 5% 0 auto
  }
}
@media screen and (max-width: 750px) {
  .pc-frame {
    display:none
  }
  .main-frame {
    width:100%;
    border:none;
    border-radius:0
  }
}




/*==================================
	mv
==================================*/
#mv .mv02 { position: relative;}
#mv .mv02 .mv02_put01 { top: -20%; right: 0; width: 29.06%; z-index: 10;}
#mv .mv02 .mv02_put02 { bottom: -37.5%; left: 1%; width: 94%; z-index: 10;}
#mv .mv02 .mv_mov { left: 0; right: 0; margin: auto; width: 85.33%; height: 100%; border-radius: 2.66%; overflow: hidden;}
@media screen and (max-width: 750px) {
}

/*==================================
	additivefree
==================================*/
#additivefree .additivefree04 { position: relative;}
#additivefree .additivefree04_put01 { right: 0; top: -22%; width: 17.33%; z-index: 10;}
#additivefree .additivefree04_put02 { left: 12%; bottom: 25%; width: 9.46%; z-index: 10;}
#additivefree .additivefree04_mov { top: 2%; left: 0; right: 0; margin: auto; width: 80%; height: 55.62%; border-radius: 2.66%;overflow: hidden;}
#additivefree .additivefree05 { position: relative;}
#additivefree .additivefree05_put01 { left: 0; top: 25%; width: 24.53%; z-index: 10;}
#additivefree .additivefree05_mov01 { left: 4.8%; top: 5.4%; width: 26.66%; height: 32%; border-radius: 2.66%;overflow: hidden;}
#additivefree .additivefree05_mov02 { left: 4.8%; top: 53.5%; width: 60%; height: 39%; border-radius: 2.66%;overflow: hidden;}
@media screen and (max-width: 750px) {
}

/*==================================
	sns
==================================*/
#sns .sns02 { position: relative;}
#sns .slideshowArea { display: flex;  align-items: center; overflow: hidden; height: 390px;}
#sns .slideshowArea .slideshow { display: flex; animation: loop-slide 40s infinite linear 1s both;}
#sns .slideshowArea li img { width: 100%;}
#sns .slideshowArea li { width: 390px; height: 390px; margin: 0 20px;}
@media screen and (max-width: 1100px) {
#sns .slideshowArea { height: 310px;}
#sns .slideshowArea li { width: 310px; height: 310px; margin: 0 20px;}
}
@media screen and (max-width: 750px) {
#sns .slideshowArea { height: 60vw;}
#sns .slideshowArea li { width: 60vw; height: 60vw; margin: 0 2.67vw;}
}

/*==================================
	selected
==================================*/
#selected .selected02 { position: relative;}
#selected .selected02 .selected02_put01 { right: 11%; top: 0; width: 24.53%; z-index: 10;}
#selected .selected02 .selected02_mov { top: 9.3%; left: 0; right: 0; margin: auto; width: 80%; height: 86%; border-radius: 2.66%;overflow: hidden;}
#selected .selected04 { position: relative;}
#selected .slideshowArea {position: absolute; bottom: 17.33vw; display: flex;  align-items: center; overflow: hidden; height: 63vw;}
#selected .slideshowArea .slideshow { display: flex; animation: loop-slide 40s infinite linear 1s both;}
#selected .slideshowArea li { width: 105.33vw; height: 58vw; margin: 0}
#selected .slideshowArea li img { width: 100%;}
@media screen and (min-width: 750px) {
#selected .slideshowArea { height: 435px; bottom: 130px;}
#selected .slideshowArea li { width: 790px; height: 435px;}
}

/*==================================
	series
==================================*/
/* accordion */
#series .accordion { width:84%; margin: 0 auto; position: relative; top: -150px; margin-bottom: -100px;}
#series .accordion dt.item01 { background:url(../img/series_accordion01_icon_off.webp) no-repeat 92% center #faf7f0;}
#series .accordion dt.item01.open { background:url(../img/series_accordion01_icon.webp) no-repeat 92% center #faf7f0;}
#series .accordion dt.item02 { background:url(../img/series_accordion02_icon_off.webp) no-repeat 92% center #faf7f0;}
#series .accordion dt.item02.open { background:url(../img/series_accordion02_icon.webp) no-repeat 92% center #faf7f0;}
#series .accordion dt.item03 { background:url(../img/series_accordion03_icon_off.webp) no-repeat 92% center #faf7f0;}
#series .accordion dt.item03.open { background:url(../img/series_accordion03_icon.webp) no-repeat 92% center #faf7f0;}
#series .accordion dt.item04 { background:url(../img/series_accordion04_icon_off.webp) no-repeat 92% center #faf7f0;}
#series .accordion dt.item04.open { background:url(../img/series_accordion04_icon.webp) no-repeat 92% center #faf7f0;}

#series .accordion dt { padding: 25px 12%; background:url(../img/series_accordion_icon_off.webp) no-repeat 92% center #faf7f0; background-size: auto 20px; margin-top: 30px;text-align: left; margin-bottom: 0; border-radius: 10px; cursor: pointer;}
#series .accordion dt.open { background:url(../img/series_accordion_icon.webp) no-repeat 92% center #faf7f0;background-size:auto 20px; border-radius: 10px 10px 0 0;}
#series .accordion dd { background:#faf7f0; display:none;text-align: left; padding: 0 8% 10% 8%; line-height: 160%; margin-left: 0; border-radius: 0 0 10px 10px;}
@media screen and (max-width: 1100px) {
#series .accordion { top: -120px; margin-bottom: -80px;}
}
@media screen and (max-width: 750px) {
#series .accordion { top: -23vw; margin-bottom: -16.66vw;}
}

/*==================================
	howto
==================================*/
#howto .howto05 { position: relative;}
#howto .howto05 .btn { bottom: 75px; left: 0; right: 0; margin: auto; width: 84%;}
@media screen and (max-width: 1100px) {
#howto .howto05 .btn { bottom: 62px;}
}
@media screen and (max-width: 750px) {
#howto .howto05 .btn { bottom: 12.5vw;}
}

/* modal */
.modal-overlay { align-items: center; background: rgba(0,0,0,.6); bottom: 0; display: flex; justify-content: center; left: 0; position: fixed; right: 0; top: 0; z-index: 100;}
.modal-container { max-height: 80vh; max-width: 600px; background-color: #fff5eb; overflow-y: auto; padding: 50px 30px; width: 80%; position: relative;}
.modal-open { display: block; border: 0; background: none; padding: 0;}
.modal-close { right: 20px; top: 40px; position: absolute; background: transparent; border: 0;}
.modal-close::before { content: "\2715";}
@keyframes mmfadeIn {
  from { opacity: 0;}
  to { opacity: 1;}
}
@keyframes mmfadeOut {
  from { opacity: 1;}
  to { opacity: 0;}
}
@keyframes mmslideIn {
  from { transform: translateY(15%);}
  to { transform: translateY(0);}
}
@keyframes mmslideOut {
  from { transform: translateY(0);}
  to { transform: translateY(-10%);}
}
.micromodal-slide { display: none;}
.micromodal-slide.is-open { display: block;}
.micromodal-slide[aria-hidden="false"] .modal-overlay { animation: mmfadeIn .3s cubic-bezier(.0, .0, .2, 1);}
.micromodal-slide[aria-hidden="false"] .modal-container { animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);}
.micromodal-slide[aria-hidden="true"] .modal-overlay { animation: mmfadeOut .3s cubic-bezier(.0, .0, .2, 1);}
.micromodal-slide[aria-hidden="true"] .modal-container { animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);}
.micromodal-slide .modal-container,
.micromodal-slide .modal-overlay { will-change: transform;}

@media screen and (max-width: 750px) {
.modal-container { padding: 6.6vw 4vw;}
.modal-close { right: 2.6vw; top: 2vw;}
}


/*==================================
	qa
==================================*/
#qa { position: relative; letter-spacing: 0.05em;}
#qa .ph { top: -230px; right: -5px; z-index: 10; width: 22%;}
/* accordion */
#qa .accordion { width:100%; margin: 0 auto; padding: 20px 8% 100px 8%; background: url("../img/qa_bg.webp") top center repeat-x; background-size: 100% auto;}
#qa .accordion dt { font-size: 22px; font-weight: bold; color: #3d3d3d; cursor: pointer; padding: 35px 14% 30px 8%; background:url(../img/accordion_icon_off.webp) no-repeat 92% center #faf7f0; background-size: auto 12px; margin-top: 20px; text-align: left; margin-bottom: 0; border-radius: 10px;}
#qa .accordion dt.mt0 { margin-top: 0;}
#qa .accordion dt.open { background:url(../img/accordion_icon.webp) no-repeat 92% center #faf7f0; background-size:auto 12px; border-radius: 10px 10px 0 0;}
#qa .accordion dd { font-size: 20px; color: #848484; background:#faf7f0; display:none;text-align: left; padding: 0 8% 40px 8%; line-height: 160%; margin-left: 0; border-radius: 0 0 10px 10px;}
#qa .accordion dd p { padding-top: 35px; border-top: solid 1px #999;}
#qa .accordion dd  .red { color: #e7624c;}
@media screen and (max-width: 1100px) {
#qa .ph { top: -185px;}
#qa .accordion dt { font-size: 18px;}
#qa .accordion dd { font-size: 16px;}
}
@media screen and (max-width: 750px) {
#qa .ph { top: -39vw;}
/* accordion */
#qa .accordion { padding: 3.33% 8% 16.66% 8%;}
#qa .accordion dt { font-size: 3.5vw; padding: 5.83% 14% 5% 8%; background-size: auto 6px; margin-top: 3.33%;}
#qa .accordion dt.mt0 { margin-top: 0;}
#qa .accordion dt.open { background-size:auto 6px;}
#qa .accordion dd { font-size: 3vw; padding: 0 8% 6.66% 8%;}
#qa .accordion dd p { padding-top: 5.83%;}
}


/*==================================
	footer
==================================*/
footer .ftLink { width: 90%; margin: 70px auto 0 auto; display: flex; flex-wrap: wrap; justify-content: center;}
footer .ftLink li { font-size: 17px; margin: 0 30px;}
footer .ftLink li:nth-child(n+4) { margin-top: 30px;}
footer .ftLink li a { display: inline-block;}
footer .copyArea { }
footer copy { font-size: 17px; text-align: center; display: block; padding: 50px 0 70px 0;}
@media screen and (max-width: 1100px) {
footer .ftLink li { font-size: 15px; margin: 0 20px;}
footer .ftLink li:nth-child(n+4) { margin-top: 20px;}
footer copy { font-size: 15px;}
}
/* SP */
@media screen and (max-width: 750px) {
footer .ftLink li { font-size: 2.66vw; margin: 0 4.6vw;}
footer .ftLink li:nth-child(n+4) { margin-top: 4.6vw;}
footer copy { font-size: 2.66vw;}
}