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

/*************************************************************************************************************************
* top
*************************************************************************************************************************/

/* fv
*************************************************************************************************************************/
.fv{ width: 100%; position: relative; height: 365px; }
@media print, screen and (max-width: 767px){
	.fv { margin-bottom: 0; overflow: hidden; }
}

.fv__box{ background: linear-gradient(0deg, rgba(240,240,240,1) 13%, rgba(255,255,255,1) 50%, rgba(240,240,240,1) 87%); width: 100%; height: calc(100% - 45px); overflow: hidden;}
.fv__polygon{ width: calc(100% + 200px); height: calc(100% + 200px); margin: -100px 0 0 -100px; position: relative;}

.fv__catch{ width: calc(100% - 50px); max-width: 325px; margin: -20px 0 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;}

.fv__parallax{ width: calc(100% - 200px); height: calc(100% - 200px); position: absolute; top: 100px; left: 100px; overflow: hidden;}
.fv__layer{ width: 100%; height: 100%; overflow: visible;}

.fv__items{ width: calc(100% + 200px); height: calc(100% + 200px); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.fv__items--ball{ background: url("../img/fv_ball_sp.png") no-repeat 50% 44%/360px auto;}
.fv__items--char{ background: url("../img/fv_char_sp.png") no-repeat 50% 50%/375px auto;}
.fv__items--phone{ background: url("../img/fv_phone_sp.png") no-repeat 50% 50%/375px auto;}


@media print, screen and (min-width: 768px){
/* .fv {height: calc(100% - 90px);	*/
  .fv{ height: 600px;}
  .fv__catch{ width: 548px; max-width: none; top: 52%;}
  .fv__items--ball{ background-size: 600px auto;}
  .fv__items--char{ background-size: 600px auto;}
  .fv__items--phone{ background-size: 750px auto;}
}

@media print, screen and (min-width: 1100px){
  .fv{ height: 670px;}
  .fv__box{ height: 100%;}
  
  .fv__catch{ margin-top: 5px; top: 50%;}
  
  .fv__items{}
  .fv__items--ball{ background: url("../img/fv_ball_pc.png") no-repeat center/1200px 600px;}
  .fv__items--char{ background: url("../img/fv_char_pc.png") no-repeat center/1200px 670px;}
  .fv__items--phone{ background: url("../img/fv_phone_pc.png") no-repeat 50% 25%/1200px 700px;}
  
  
}




/* title
*************************************************************************************************************************/
.top__ttl{ text-align: center;}
.top__ttl img{ width: auto; height: 30px;}
.top__ttl span{ display: block; margin: 10px 0 0; font-weight: 400; font-size: 16px; line-height: 1;}


@media print, screen and (min-width: 768px){
  .top__ttl img{ height: 40px;}
  .top__ttl span{ margin-top: 15px;}
}


@media print, screen and (min-width: 1100px){
  .top__ttl img{ height: 50px;}
}




/* message
*************************************************************************************************************************/
.msg{ padding: 50px 30px 70px; position: relative; overflow: hidden;}
.msg__polygon{ background: #d7e6e1; width: calc(100% + 200px); height: calc(100% + 200px); margin: -100px 0 0 -100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.msg__box{ max-width: 580px; margin: 0 auto; position: relative; z-index: 2;}

.msg__catch{ margin: 35px 0 20px;}
.msg__catch span{ display: inline-block; padding: 5px; font-family: 'M PLUS Rounded 1c',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo, Osaka,"ＭＳ Ｐゴシック","MS PGothic","sans-serif";}

.msg__txt{ line-height: 2;}
.msg__name{ margin: 30px 0 0; font-size: 16px;}


@media print, screen and (max-width: 374px){
  .msg__catch span{ font-size: 18px;}
}


@media print, screen and (min-width: 768px){
  .msg{ padding: 100px 30px;}
  .msg__catch{ margin: 50px 0 30px;}
  .msg__txt{ line-height: 2.28;}
  .msg__name{ margin-top: 40px; text-align: right;}
}




/* products
*************************************************************************************************************************/
.prod{ padding: 50px 0 40px; overflow: hidden;}

.prod__archive{ display: flex; justify-content: center; align-items: center; background: linear-gradient(to right, #8cb4ff 0%,#ffafec 100%); width: 170px; height: 40px; margin: 30px auto 0; position: relative; border-radius: 20px; overflow: hidden;}
.prod__archive::before{ content: ""; background: #fff; width: calc(100% - 2px); height: calc(100% - 2px); position: absolute; top: 50%; left: 50%; border-radius: 19px; transform: translate(-50%,-50%);}
.prod__archive::after{ content: ''; background: linear-gradient(to right, #8cb4ff 0%,#ffafec 100%); width: 0; height: 100%; position: absolute; top: 0; left: -15%; transform: skew(160deg); transition-duration: .6s; transform-origin: top left; transition: all .6s ease;}
.prod__archive:hover::after{ width: 135%;}
.prod__archive span{ z-index: 2; font-size: 18px; line-height: 1; color: #000; transition: all .6s ease;}
.prod__archive:hover span{ color: #fff;}

.prod__list{ margin: 40px 0 0; overflow: hidden;}
.prod__item{ width: 226px; margin: 0 -19px; text-align: center;}
.prod__img{ display: block; width: 150px; margin: 0 auto; position: relative; border-radius: 20px; overflow: hidden;}

.prod__info{ opacity: 0; transition: .3s linear;}
.prod__name{ margin: 30px 0 0; font-weight: 800; font-size: 16px; line-height: 1.5; color: #000;}
.prod__genre{ margin: 5px 0 0; font-size: 12px; line-height: 1; color: #000;}
.prdo__os{ justify-content: center; width: 240px; margin: 16px auto 0;}
.prdo__os li{ margin: 0 5px;}

/* slick */
.prod__list .slick-prev,
.prod__list .slick-next{ width: 40px; height: 40px; margin: -55px 0 0; z-index: 2; border-radius: 50%;}
.prod__list .slick-prev{ background: url("../common/img/ico_arrow-l.svg") no-repeat center/12px 20px #ffb45e; left: 58px;}
.prod__list .slick-next{ background: url("../common/img/ico_arrow-r.svg") no-repeat center/12px 20px #ffb45e; right: 58px;}
.prod__list .slick-prev:before,
.prod__list .slick-next:before{ font-size: 0; ; line-height: 0;}
.slick-current .prod__info{ opacity: 1;}


@media print, screen and (min-width: 768px){
  .prod{ padding: 100px 0;}
  .prod__archive{ margin: 50px auto 0;}
  .prod__list{ margin-top: 60px;}
  .prod__item{ width: 370px; margin: 0 -40px;}
  .prod__img{ width: 210px;}
  .prod__img::after{ background-size: 30px 30px; width: 70px; height: 70px;}
  .prod__name{ margin-top: 55px;}
  .prod__genre{ margin-top: 8px;}
  
  /* slick */
  .prod__list .slick-prev,
  .prod__list .slick-next{ margin-top: -70px;}
}

@media print, screen and (min-width: 1090px){
  .prod__list .slick-prev{ left: 50%; margin-left: -500px;}
  .prod__list .slick-next{ right: 50%; margin-right: -500px;}
}


@media print, screen and (min-width: 1100px){
  .prod{ position: relative;}
  .prod__archive{ margin: 0; position: absolute; top: 104px; right: 100px;}
  .prod__list{ margin-top: 100px;}
  .prod__img::before,
  .prod__img::after{ opacity: 0; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: opacity .3s ease-out;}
  .prod__img::before{ background: rgba(0,0,0,.45); width: 100%; height: 100%;}
  .prod__img::after{ background: url("../common/img/ico_magnify.svg") no-repeat center/22px 22px; width: 50px; height: 50px; border: 5px solid rgba(255,255,255,.7); border-radius: 50%;}
  .prod__img:hover::before,
  .prod__img:hover::after{ opacity: 1;}
}






/* privacy
*************************************************************************************************************************/
.privacy li {
	list-style-type: disc;/* リストの左側に黒丸 */
	margin-left: 24px;/* リストの左側に余白 */
	text-align: left;
}