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

@media only screen and (min-width:700px)  {	


.header-word {
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: -2%;
    width: 71%;
}
.left_icon {
    width: 56vw;

}
.upper_switch_logo {
    float: left;
    width: 5.5vw;
    padding-top: 0vw;
    padding-left: 2vw;
    padding-right: 2vw;
}

.upper_ps_logo {
    float: left;
    width: 15vw;
    padding-top: 1vw;

}
.upper_x {
    float: right;
    width: 3.8vw;
    padding-top: 0.5vw;
    padding-right: 2.6vw;


}
.banner-switch {
    margin-top: 70px;
}
.black-bg {
    padding-top: 22px;
}
.con01 {
    background-image: url(../images/main.webp);
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: 54vw;
    position: absolute;
    top: 0px;
}
.con01 .float01 {
    float: right;
    width: 53%;
    position: relative;
    top: 58%;
}
.con01 .float02 {
    float: left;
    width: 35%;
    margin-top: 36%;
    padding-left: 11%;
}
.release-date {
    position: absolute;
    top: 122%;
    width: 71%;
    margin-left: 2%;
}
.con02 {
    background-image: url(../images/con02-bg.webp);
    background-repeat: no-repeat;
    width: 100%;
    height: 132vw;
    background-size: 100% auto;
    margin-top: 45%;
}
.copy-img {
    padding-top: 7%;
    margin: 0 auto;
    width: 70%;

}
.sub-title {
    margin: 0 auto;
    width: 76%;
}

.con02 .float01 {
    width: 50%;
    float: right;
    padding-right: 10%;
    padding-top: 5%;
}
.con02 .float02 {
    float: left;
    width: 26%;
    padding-left: 12%;
    padding-top: 5%;
}
.con03 {
    background-repeat: no-repeat;
    background-image: url(../images/white-upper.webp);
    background-size: 100% auto;
    width: 100%;
    height: 33vw;
    margin-top: -20%;
    position: relative;
    z-index: 2;
}
.deco-mon-list {
    margin-left: 12%;

}
.con04 {
    position: relative;
    z-index: 1;
    margin-top: -12%;
    width: 100%;
}

.syokai  {
    padding-top: 14%;
    margin: 0 auto;
    max-width: 1024px;
    padding-bottom: 5%;
}


.tokuten {
    margin-top: -64%;
    position: relative;
    z-index: 17;
    width: 83%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 6%;

}
.title-pkg {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.deco-line-list {
    margin-left: 10%;
}

.deco-ingredient {
    float: left;
    width: 12%;
    padding-left: 5%;
}





.mon01 {
    width: 17%;
    float: left;
    margin-top: -8%;

}






.button-purchase {
    width: 52%;
    margin-left: 9%;
}
.youtube-title {
    margin: 0 auto;
    width: 88%;
    padding-bottom: 2%;
}



	.youtube-short iframe{
    display : block;
    margin : 0 auto;
    padding-bottom: 46px;
	}


	.youtube-embed{
    filter: grayscale(10%);
    transition: 0.1s;
    width: 90%;
	}
.youtube-buzrecipi{
    filter: grayscale(10%);
    transition: 0.1s;
    margin: 0 auto;
    width: 74%;
    padding-bottom: 3px;
	}
.youtube-embed:hover {
    filter:grayscale(0%);

}
.youtube-name {
    margin: 0 auto;
    width: 74%;
    text-align: center;
    padding-bottom: 50px;
}
.spec-area {
    padding-bottom: 16%;
    margin-top: -7%;
    padding-top: 8%;
    background-image: url(../images/white-under.webp);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 0% bottom;
}
.con05 {
    padding-bottom: 8%;
}

.shop-box {
    margin: 0 auto;
    width: 96%;
    max-width: 1200px;
}
.title_shop {
    width: 88%;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 4%;
    max-width: 1024px;
}


.shop-box .float01 {
    float: left;
    width: 35%;
}
.shop-box .float02 {
    float: right;
    width: 65%;
}
.shop-box .float03 {
    float: left;
    width: 33.3%;
}
.shop-box .purchase_button {
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 9%;
    width: 92%;
}
.shop-box .purchase_button02 {
    margin: 0 auto;
    width: 50%;
}
.shop-box .purchase_button03 {
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 3%;
    width: 92%;
}
.shop-box .purchase_button04 {
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 3%;
    width: 33%;
    float: left;
}
.kaden-name {
    text-align: center;
    font-weight: bold;
    font-size: min(2.3vw);
}




.spec-area-inline {
    margin-top: 5%;
    padding-top: 2%;
}

.spec-title.float01 {
    float: left;
    width: 33%;
    padding-left: 7%;
    padding-top: 8%;
}

.spec-pkg.float02 {
    float: right;
    width: 50%;
    padding-right: 6%;
}
.store-area {
    margin-bottom: 6%;
}

.store-area .float01 {
    float: left;
    width: 37%;
    margin-left: 11%;
}
.store-area .float02 {
    float: left;
    width: 36%;
    margin-left: 2%;
    margin-top: 10%;
}
.store-area .float03 {
    float: left;
    width: 36%;
    margin-left: 6%;
    margin-top: 0%;
}
.button-download {
    width: 90%;
    padding-bottom: 7%;
    padding-top: 1%;
}




	
	.bright-effect{
	transition: filter 1.2s ease;
	}

	.bright-effect:hover {
 filter: hue-rotate(-280deg);
	}
.bic-group .material-symbols-outlined   {
    vertical-align: -8px;
    font-size: 26px;
    margin-bottom: -9px;
}


.flipandfade-none.delay01{
	opacity: 0;
	animation-delay:  0.1s;
}
	
.flipandfade-none.delay02{
	opacity: 0;
	animation-delay:  0.2s;
}

/*スライダーの左右矢印カスタマイズここから*/
	
	
.slick-next{
    right: -10%!important;
    margin-top: 10%!important;;
}
.slick-prev{ left:2%!important; 
	margin-top: 10%!important;;}
.slick-arrow{ z-index:2!important;
	width:20%!important;
    height:20%!important;
	}
	
.slick-arrow:before{
	content:""!important;
   width: 100%!important;
    height: 100%!important;
    position: absolute;
    top: 0;
    left: 0;
	opacity:1!important;
  }

  .slick-next:before{
    background: url("../images/arrow-right.png")!important;
    background-size: contain!important;
	background-repeat: no-repeat!important;
  }
	
 .slick-prev:before{
    background: url("../images/arrow-left.png")!important;
    background-size: contain!important;
	background-repeat: no-repeat!important;
  }	
	

/*スクリーンショットの無限ループここから*/

@keyframes infinity-scroll-right {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--right{
  animation :infinity-scroll-right 45s infinite linear 0.5s both;
}
.scroll-infinity__item {
    width: calc(200vw / 14);
    margin-right: 0.3%;
}
.scroll-infinity__item>img {
  width: 100%;
}

	/*スクリーンショットの無限ループここまで*/
	
.dt-left {
    float: left;
    padding-bottom: 2px;
    width: 9%;
    min-width: 68px;
}
.dt-right {
    float: left;
    height: 21px;
    padding-bottom: 2px;
    /* [disabled]width: 9%; */
    min-width: 74px;
}
.dd-2lines-right {
    float: left;
    /* [disabled]width: 35%; */
    min-width: 65px;
}
.dd-2lines-left {
    float: left;
    padding-right: 3%;
    width: 33%;
    min-width: 263px;
}

.dd-1line   {
    line-height: 21px;
    display: inline-block;
    padding-top: 6px;
    margin-top: -4px;
    width: 87%;
    text-align: justify;
}
.spec-cero {
    width: 18%;
    display: inline-block;
    margin-top: 0%;
}

.spec-area dl {
    width: 83%;
    padding-bottom: 8%;
    margin: 0 auto;
    font-size: max(10pt,1.2vw);
    min-width: 615px;
}

.spec-area dl dd {
    padding-bottom: 4px;
}

	.spec-area dl dd::before {
	content: ": ";
}
.dd-1line .indent-pc  {
    text-indent: 1px;
    display: inline-block;
}

	
.blur-speed02{
	  animation-duration:0.4s;
	animation-delay:1.0s;
}
	.blur-speed01{
	animation-delay:0.3s;
}
	
	
	.scale-down-center.pc-delay01{
	animation-delay: 0.8s;
}
.title-chara {
    margin: 0 auto;
    width: 531px;
    padding-top: 45px;
}

.con-characters {
    background-image: url(../images/characters/pc_chara_bg.webp);
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: 106vw;
    min-height: 781px;
    max-height: 1201px;
    position: relative;
    top: 0px;
}



	.thumnail {
    margin: 0 auto;
    z-index: 7;
    height: 118px;
    width: 790px;
}

.thumnail-item {
    height: 98px;
    padding-right: 4px;
}


	
	
		
/*オンマウスで画像差し替えここから*/
.thumnail-item.highlight img {
    position: absolute;
    width: 100px;
    height: 100px;
    margin-top: 0px;
    /* [disabled]box-shadow: 6px 6px 10px 0px rgba(81, 72, 63, 0.4); */
    z-index: 14;
    /* [disabled]-webkit-box-shadow: 6px 6px 10px 0px rgba(81, 72, 63, 0.4); */
}

.thumnail-item.highlight img:last-of-type {
  opacity: 0;
  transition: opacity 0s;
}
	
.thumnail-item.highlight:hover img:last-of-type {
  opacity: 1;
}
	
	.thumnail-item.highlight:hover img:first-of-type {
  opacity: 0;
  transition: opacity 1s;
}

.thumnail .slick-current .thumnail-item.highlight img:last-of-type {
  opacity: 1;
}

.thumnail .slick-current .thumnail-item.highlight img:first-of-type {
  opacity: 0;
  transition: opacity 0s;
}
/*オンマウスで画像差し替えここまで*/


.slider-area-chara {
    overflow: hidden;
    margin-top: -14px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    background-image: url(../images/characters/pc_chara_base.webp);
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: 792px;
    z-index: 14;
    max-width: 1062px;
    width: 88%;
}

.slider-item-chara .float01 {
    width: 83%;
    padding-top: 5%;
    padding-left: 6%;

}



		}