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

/*************************************************************************************************************************
* products
*************************************************************************************************************************/

/* common
*************************************************************************************************************************/
.app__link{ display: block; background: #fff; padding: 10px; position: relative; border-radius: 20px; overflow: hidden;}
.app__img{ border-radius: 15px; overflow: hidden;}
.app__magnify{ display: none;}

@media print, screen and (min-width: 548px){
  .app__link{ transition: box-shadow .3s ease-out, transform .2s ease-out;}
  .app__link:hover{ box-shadow: 5px 5px 5px 0 #a6a6a6;}
  
  .app__magnify{ background:#ddd; width: 30px; height: 30px; position: absolute; border-radius: 50%; overflow: hidden; text-indent: 100%; white-space: nowrap;}
  .app__magnify::before{ opacity: 0; content: ""; background: linear-gradient(to right, #32c8ff 0%,#aaf032 100%); width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: .3s ease-out;}
  .app__magnify::after{ content: ""; background: url("../../common/img/ico_magnify.svg") no-repeat center/contain; width: 16px; height: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
  .app__link:hover .app__magnify::before{ opacity: 1;}
}




/* pickup
*************************************************************************************************************************/
.pickup{ padding: 30px; overflow: hidden;}
.pickup-list{ width: calc(100% + 60px); margin: 0 -30px;}
.pickup-list__item{ margin: 0 30px;}
.pickup-list__detail{ padding: 15px;}
.pickup-list__ttl{ font-weight: 800; font-size: 16px; line-height: 1.5; color: #000; text-align: left;}
.pickup-list__genre{ margin: 10px 0 0; font-size: 12px; line-height: 1; color: #000; text-align: left;}
.pickup-list__txt{ margin: 16px 0 0; line-height: 1.7; color: #000;}
/*		.pickup-list__os{ width: 220px; max-width: none; transform: translateX(-5px); margin: 20px 0 0;} */
.pickup-list__os{ justify-content: space-between; max-width: none; margin: 20px 0 0;}
.pickup-list__os li{ width: 30%; margin: 0;}
.os-list--not3 { justify-content: flex-start; }

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


@media print, screen and (min-width: 548px){
  .pickup{ padding: 0 30px; overflow: hidden;}
  .pickup-list__link:hover{ transform: scale(1.02);}
  .pickup-list__magnify{ display: block; bottom: 20px; right: 20px;}
  
  /* slick */
  .pickup-list .slick-list{ padding: 30px 0;}
}

@media print, screen and (min-width: 648px){
  .pickup{ padding: 40px 30px 10px;}
  .pickup-list__item{ width: 450px;}
  
  /* slick */
  .pickup-list .slick-list{ padding: 30px 50px!important;}
  .pickup .slick-prev{ left: 50%; transform: translateX(-275px);}
  .pickup .slick-next{ right: 50%; transform: translateX(275px);}
}





@media print, screen and (min-width: 900px){
  .pickup{ max-width: 1060px; margin: 0 auto; padding-top: 70px; padding-left: 15px; padding-right: 15px; }
  /*	.pickup-list{ width: calc(100% - 80px); margin: 0 auto;}*/
  .pickup-list{ width: 100%; margin: 0 auto;}
  .pickup-list__item{ width: auto; margin: 0 15px;}
  .pickup-list__link{ display: flex; justify-content: space-between; align-items: center;}
  .pickup-list__img{ width: 300px;}
  .pickup-list__detail{ order: 1; display: flex; flex-direction: column; width: calc(100% - 300px); padding: 0 35px 0 30px; transform: translateY(-10px);}
  .pickup-list__genre{ order: 2; margin: 10px 0 0; font-size: 12px; line-height: 1; color: #000; text-align: left;}
  .pickup-list__txt{ order: 4; margin: 16px 0 0; line-height: 1.7; color: #000;}
  .pickup-list__os{ order: 3; transform: translateX(-5px); margin: 20px 0 0;}
  
  /* slick */
  .pickup-list .slick-list{ padding: 30px 0!important;}
  .pickup .slick-prev,
  .pickup .slick-prev{ left: 0; transform: none;}
  .pickup .slick-next{ right: 0; transform: none;}
}


@media print, screen and (min-width: 1100px){
	.pickup { overflow: visible; }
  .pickup-list__img{ width: 444px;}
  .pickup-list__detail{ width: calc(100% - 444px); padding: 0 55px 0 50px;}
  .pickup-list__os li{ height: 26px; border-radius: 13px; font-size: 16px;}
	.pickup .slick-prev{ left: -40px; }
  .pickup .slick-next{ right: -40px; }
}




/* app list
*************************************************************************************************************************/
.app-list{ max-width: 1060px; margin: 0 auto; padding: 0 30px 60px;}
.app-list__item{ margin: 15px 0 0;}
.app-list__item:first-child{ margin-top: 0;}
.app-list__box{ display: flex; justify-content: space-between; align-items: center;}
.app-list__img{ width: 148px;}
.app-list__detail{ width: calc(100% - 163px);}
.app-list__ttl{ font-weight: 800; font-size: 14px; line-height: 1.42; color: #000; text-align: left;}
.app-list__genre{ margin: 15px 0 0; font-size: 12px; line-height: 1; color: #000; text-align: left;}
.app-list__os{ margin: 10px 0 0;}
/*.app-list__os li{ margin: 0 5px;}*/


@media print, screen and (min-width: 548px){
  .app-list{ display: flex; flex-wrap: wrap; width: 100%; padding-bottom: 100px;}
  .app-list__item{ width: calc(50% - 12px); margin: 40px 24px 0 0;}
  .app-list__item:first-child{ margin-top: 40px;}
  .app-list__item:nth-child(even){ margin-right: 0;}
  .app-list__link{ padding: 5px 5px 20px;}
  .app-list__link:hover{ transform: scale(1.03);}
  .app-list__box{ display: block;}
  .app-list__img{ width: 100%;}
  .app-list__detail{ width: 100%; padding: 15px 10px;}
  .app-list__os{ width: calc(100% + 6px); transform: translateX(-3px); margin-top: 5px; padding: 0 12px;}
  .app-list__os li{ margin: 0 3px;}
  /*.app-list__magnify{ display: block; bottom: 15px; right: 15px;}*/
  .app-list__magnify{ position: relative; display: block; margin: 30px 12px 0 auto; }
}


@media print, screen and (min-width: 804px){
  .app-list__item{ width: calc((100% / 3) - 16px);}
  .app-list__item:nth-child(even){ margin-right: 24px;}
  .app-list__item:nth-child(3n){ margin-right: 0;}
}


@media print, screen and (min-width: 1100px){
  .app-list__item{ width: calc(25% - 18px);}
  .app-list__item:nth-child(even),
  .app-list__item:nth-child(3n){ margin-right: 24px;}
  .app-list__item:nth-child(4n){ margin-right: 0;}
}




/* detail
*************************************************************************************************************************/
.detail{ padding: 30px 30px 50px;}
.detail__wrap{ background: #fff; max-width: 1000px; margin: 0 auto; padding: 25px; border-radius: 20px;}
.detail__main{ display: none;}
.detail__box{ display: flex; justify-content: space-between;}
.detail__ico{ width: 110px;}
.detail__info{ width: calc(100% - 125px);}
.detail__ttl{ font-weight: 800; font-size: 16px; line-height: 1.5; text-align: left;}
.detail__genre{ margin: 10px 0 0; font-size: 12px; line-height: 1;}
.detail__btns{ display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 255px; margin: 30px auto 0;}
.detail__btns--pc{ width: 100%; margin: 12px 0 0;}
.detail__btns--pc a{ display: flex; justify-content: center; align-items: center; background: #f0aa8c; height: 40px; border-radius: 6px; font-weight: 800; font-size: 12px; line-height: 1; color: #fff; transition: .3s ease-out;}
.detail__btns--pc a:hover{ background: #ea7f59;}
.detail__btns li img{ width: auto; height: 40px;}
.detail__btns--ofc { width: 100%; margin-top: 12px; }
.detail__btns--ofc a { display: flex; justify-content: center; align-items: center; width: 100%; height: 40px; background-color: #f0aa8c; border-radius: 4px; font-size: 12px; font-weight: 800; text-align: center; color: #fff; }





.detail__os{ max-width: none; transform: translateX(-5px); margin: 20px 0 0;}
.detail__os li{ margin: 0 5px;}
.detail__gallery{ width: calc(100% + 110px); margin: 30px -55px 0; overflow: hidden;}
.detail__ss{ width: 215px; margin: 0 7px; border-radius: 10px; overflow: hidden;}
.detail__ss a{ display: block; position: relative;}
.detail__txt{ margin: 25px 0 0; line-height: 1.7;}

.app-nav{ display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 1000px; margin: 50px auto 0;}
.app-nav__item:nth-child(1){ display: flex; justify-content: center; width: 100%;}
.app-nav__list{ order: 1; display: flex; justify-content: center; align-items: center; background: #fff; width: 100%; max-width: 240px; height: 40px; border-radius: 20px; font-weight: 800; font-size: 16px; line-height: 1; color: #ffb45e;}
.app-nav__arrow{ display: inline-block; margin: 30px 0 0; position: relative; font-weight: 800; font-size: 16px; line-height: 1; color: #ffb45e;}
.app-nav__arrow--prev{ padding: 0 0 0 60px;}
.app-nav__arrow--next{ padding: 0 60px 0 0;}
.app-nav__arrow::before{ content: ""; display: block; width: 40px; height: 40px; position: absolute; top: 50%; border-radius: 50%; overflow: hidden; transform: translateY(-50%);}
.app-nav__arrow--prev::before{ background: url("../../common/img/ico_arrow-l.svg") no-repeat center/12px 20px #ffb45e; left: 0;}
.app-nav__arrow--next::before{ background: url("../../common/img/ico_arrow-r.svg") no-repeat center/12px 20px #ffb45e; right: 0;}

/* magnific-popup */
.mfp-arrow{ width: 60px;}
.mfp-arrow-left:before,
.mfp-arrow-left:after,
.mfp-arrow-right:before,
.mfp-arrow-right:after{ border: none;}
.mfp-arrow-left:after{ background: url("../../common/img/ico_arrow-l.svg") no-repeat 0 0/contain; width: 12px; height: 20px; margin-left: 11px;}
.mfp-arrow-right:after{ background: url("../../common/img/ico_arrow-r.svg") no-repeat 0 0/contain; width: 12px; height: 20px;}


@media print, screen and (max-width: 359px){
  .detail__btns{ width: 200px;}
  .detail__btns li img{ width: auto; height: 31px;}
}


@media print, screen and (min-width: 497px){
  .detail__btns{ justify-content: center; max-width: 387px; margin: 30px auto 0;}
  .detail__btns--as{ margin: 0 12px 0 0;}
  .detail__btns--pc{ width: 120px; margin: 0 0 0 12px;}
	.detail__btns--ofc { width: auto; margin: 0 0 0 12px; }
	.detail__btns--ofc a { padding-left: 12px; padding-right: 12px; }
}


@media print, screen and (min-width: 768px){
  .detail{ padding: 100px 30px 100px;}
  .detail__gallery{ width: 100%; margin: 30px 0 0;}
  .detail__imgs{ display: flex; justify-content: space-between;}
  .detail__ss{ width: auto; margin: 0 12px 0 0;}
  .detail__ss:last-child{ margin-right: 0;}
  .detail__txt{ margin: 25px 0 0; line-height: 1.7;}
  .detail__os{ width: calc(100% + 10px); transform: translateX(-5px); margin: 20px 0 0;}
  .detail__os li{ height: 26px; border-radius: 13px; font-size: 16px;}
  
  .app-nav{ align-items: center;}
  .app-nav__item:nth-child(1){ order: 2; width: 240px;}
  .app-nav__item:nth-child(2){ order: 1;}
  .app-nav__item:nth-child(3){ order: 3;}
  .app-nav__list{ font-size: 20px;}
  .app-nav__arrow{ margin-top: 0; font-size: 20px;}
  
  /* magnific-popup */
  .mfp-arrow{ width: 90px;}
  .mfp-arrow-left:after{ width: 24px; height: 40px; margin-left: 31px;}
  .mfp-arrow-right:after{ width: 24px; height: 40px;}
}

/*
@media print, screen and (min-width: 1100px){
  .detail__wrap{ display: flex; flex-direction: column; padding: 30px; position: relative;}
  .detail__main{ order: 1; display: block; width: 444px; border-radius: 15px; overflow: hidden;}
  
  .detail__box{ order: 2; align-items: center; margin: 35px 0 0;}
  .detail__ico{ width: 90px;}
  .detail__info{ width: calc(100% - 105px);}
  .detail__ttl{ font-size: 20px; line-height: 1.4;}
  .detail__genre{ font-size: 14px;}
  .detail__btns{ order: 5; justify-content: flex-start; width: 404px; max-width: none; margin: 30px 0 0 0;}
  .detail__btns--as{ margin-right: 20px;}
  .detail__btns--pc{ margin-left: 20px;}

  .detail__gallery{ width: 456px; margin-top: 0; position: absolute; top: -5px; right: 30px;}
  .detail__imgs{ display: flex; flex-wrap: wrap; justify-content: space-between;}
  .detail__ss{ width: 215px; margin: 35px 26px 0 0;}
  .detail__ss:nth-child(even){ margin-right: 0;}

  

  .detail__txt{ order: 4; width: 404px; min-height: 138px; margin: 30px 0 0 0; line-height: 1.8;}
  .detail__os{ order: 3; width: 274px; transform: none; margin: 26px 0 0 0;}
}
*/

@media print, screen and (min-width: 1100px){
	.detail__wrap { position: relative; display: flex; flex-direction: column; align-items: flex-end; padding: 30px; }
	.detail__main { position: absolute; top: 10px; left: 10px; display: block; width: 444px; border-radius: 15px; overflow: hidden;}
	
	.detail__box,
	.detail__os,
	.detail__txt { width: 446px; }
	.detail__box { order: 1; align-items: center; }
	.detail__ico { width: 90px; }
	.detail__info { width: calc(100% - 115px); }
	.detail__ttl { font-size: 20px; font-weight: 800; line-height: 1.05; }
	.detail__genre { margin: 15px 0 0; font-size: 14px; }
	.detail__os { order: 2; justify-content: flex-start; margin-top: 27px; }
	.detail__os .os-list__item { width: 80px; }
	.detail__txt { order: 3; min-height: 212px; }
	
	.detail__btns { position: absolute; top: 425px; left: 10px; display: flex; flex-wrap: nowrap; width: 444px; max-width: initial; margin-top: 0; }
	.detail__btns--ofc { width: 120px; }
	
	.detail__gallery { order: 4; position: relative; margin-top: 90px; }
	.detail__imgs--landscape { flex-wrap: wrap; }
	.detail__imgs--landscape .detail__ss { width: 48.5%; margin: 0 0 25px 0; }
	.detail__imgs--landscape .detail__ss:nth-child(3),
	.detail__imgs--landscape .detail__ss:nth-child(4) { margin-bottom: 0; }
	
	.detail__imgs--portrait .detail__ss { margin: 0 25px 0 0; }
	.detail__imgs--portrait .detail__ss:last-child { margin-right: 0; }
	
	.detail__ss a:before{ opacity: 0; content: ""; background: rgba(0,0,0,.45); width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: .3s ease-out;}
  .detail__ss a:after{ opacity: 0; content: ""; background: url("../../common/img/ico_magnify.svg") no-repeat center /30px 30px; width: 70px; height: 70px; position: absolute; top: 50%; left: 50%; border: 5px solid rgba(255,255,255,.7); border-radius: 50%; transform: translate(-50%,-50%); transition: .3s ease-out;}
  .detail__ss a:hover:before,
  .detail__ss a:hover:after{ opacity: 1;}
	
}