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

/*--clearfix-------------------------------------------------------------------------------------------*/

.item-sum-btn:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/*--/clearfix-------------------------------------------------------------------------------------------*/

.sp-only { display: none;}

img { vertical-align: bottom;}

/*--/Aprica追加20231005-------------------------------------------------------------------------------------------*/

@media screen and (min-width: 640px){	
/* PC時 */
.pc {display:inline;}
.sp {display:none;}
}

@media screen and (max-width: 640px){
/* SP時 */
.pc {display:none;}
.sp {display:inline;}
}

/*--------------------top-copy-area--------------------*/

.item-info h2 {
  font-family: 'Bariol';
  font-size: 70px;
	line-height: 1;
}

.item-info h2 span {
  font-size: 25px;
  display: block;
  margin-top: 15px;
  letter-spacing: 0.3em;
}

.item-info-area {
  display: table;
  margin-top: 100px;
  width: 100%;
}

.item-info-area div {
  display: table-cell;
  vertical-align: top;
}

/*add padding 20190124*/
.item-sum li { display: none; padding-right:5%;}
/*end*/

.item-sum li:first-child { display: block;}

.item-sum li img {max-width:600px;}

.item-copy {
  color: #999;
  font-size: 26px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.2em;
  margin-top: 15px;/*10px*/
}

/*
.item-info-txt {
  line-height: 1.5;
  margin-top: 40px;
}
*/
/*
section.item-info-area div.item-info p {
  line-height: 1.5;
  margin-top: 40px;
}
*/


.item-proce {
  color: #999;
  font-size: 26px;
  font-weight: bold;
  padding-top: 20px;/*40px*/
}

.item-proce p {display: inline-block;}

.item-proce span {
  color: #000;
  font-size: 24px;/*50px*/
  margin-left: 5px;
}

.including-tax {
  color: #000;
  font-size: 14px;
  margin-top: 10px;
  text-align: right;
}

.item-sum-btn { margin-top: 20px;}

.item-sum-btn img { width: 100%;}

.item-sum-btn li {
  border: 2px solid #eee;
  cursor: pointer;
  float: left;
  margin-left: 10px;
  margin-bottom: 10px;
  width: 100px;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

.item-sum-btn li:first-child,
.item-sum-btn li:nth-child(6) { margin-left: 0;}

.item-sum-btn li:hover { opacity: .7;}

.item-info-shop-btn {
  margin-top: 20px;
  width: 320px;/*340px*/
}
@media only screen and (max-width: 675px) {
/*add 20190124*/
.item-sum li { padding-right:0;}
/*end*/

.item-info-shop-btn {
  margin-top: 20px;
  width: 100%;
  }
}

.item-info-shop-btn a {
  background: #1f3370;
  color: #fff;
  display: block;
  font-size: 20px;
  padding: 13px 0;/*15px 0*/
  text-align: center;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
	border-radius: 5px;
}

.item-info-shop-btn a:hover { opacity: .7;}

/*--------------------move-pic--------------------*/

.move-pic { overflow: hidden;}

.move-pic.scroll { animation: move_back 1s steps(11,end) forwards;}

.move-pic.active { animation: move 1s steps(11,end) forwards;}

.move-pic img { opacity: 0;}

/*
.move-pic.citymini {
  background: url(../images/city-mini-move.jpg) no-repeat left top;
  background-size: 340px;
}
*/

@keyframes move {
  0% {background-position: left top;}
  100% {background-position: left bottom;}
}

@keyframes move_back {
  0% {background-position: left bottom;}
  100% {background-position: left top;}
}


/*--------------------item-explanation-area--------------------*/

/*--clearfix----------*/

.item-explanation-area ul:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/*--/clearfix----------*/

.item-explanation-area {
  margin: 140px auto 0;
  width: 90%;
}

.item-explanation-area li { float: left;}

.item-explanation-area li:first-child { margin-right: 30px;}

.item-explanation-area ul.line02 li { float: right;}

.item-explanation-area ul.line02 li:first-child { margin: 0 0 0 30px;}

.item-explanation-area ul.bottom { margin-top: 80px;}

.item-explanation-txt { width: 470px;}

.item-explanation-area h3 {
  font-size: 40px;
  font-weight: bold;
  line-height: 1.3;
}

.item-explanation-area p {
  line-height: 1.5;
  margin-top: 20px;
}

.item-explanation-area p.jp-txt { margin-top: 5px;}

/*--------------------color-check-area--------------------*/

.color-check-area {
  display: table;
  margin-top: 80px;
  width: 100%;
}

.color-check-area div {
  display: table-cell;
  vertical-align: top;
  width: 50%;
}

.color-sum li { display: none;}

.color-sum li:first-child {
  display: block;
  margin: 0;
}

.color-sum-tit {
  font-size: 30px;
  font-weight: bold;
}

.color-btn ul { margin: 10px 0;}

.color-btn li img { width: 100%;}

.color-btn li {
  border: 2px solid #eee;
  cursor: pointer;
  float: left;
  margin-left: 10px;
  width: 100px;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

.color-btn li:first-child { margin: 0;}

.color-btn li:hover { opacity: .7;}

.color-name {
  color: #aaa;
  font-size: 26px;
  font-weight: bold;
}

.color-name p {
  display: none;
  margin: 0;
}

.color-name p:first-child { display: block;}

/*--------------------item-accessory-area--------------------*/

.item-accessory-tit {
  color: #444;
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 20px;
}

.item-accessory-area {
  margin: 80px auto 0;
  width: 90%;
}

.item-accessory-area li {
  background: #eee;
  margin: 0 5px;
  padding: 10px;
}

.item-accessory-area li img { width: 100%;}

.item-accessory-txt {
  color: #444;
  font-size: 13px;
  line-height: 1.3;
  margin-top: 10px;
}

/*--------------------item-details-area--------------------*/

/*--clearfix----------*/

.item-details-area:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/*--/clearfix----------*/

.item-details-area {
  margin: 80px auto 100px;
  width: 90%;
}

.item-details-tit {
  color: #444;
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 20px;
}

/*----------item-details-left----------*/

.item-details-left {
  float: left;
  width: 70%;
}

.item-details-left table { width: 100%;}

.item-details-left th,
.item-details-left td {
  border-top: 1px solid #eee;
  line-height: 1.5;
  padding: 15px 0;
  vertical-align: middle;
	min-width:150px;
}

.item-details-left .bottom th,
.item-details-left .bottom td { border-bottom: 1px solid #eee;}

/*----------item-details-right----------*/

.item-details-right {
  float: right;
  width: 25%;
}

.item-details-download {
  line-height: 1.5;
  text-align: center;
}

.item-details-download img {
  display: block;
  margin: 0 auto 10px;
  width: 58px;
}

.item-details-download-btn { margin-top: 0;}/*20px*/

.item-details-download-btn a {
  /*background: #a5a5a5;#1f3370*/
  color: #24408e;
	text-decoration: underline;
  display: block;
  padding: 5px 0;
  text-align: left;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

.item-details-download-btn a:hover { opacity: .7;}


/*----------movie area----------*/
.movie-responsive {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.movie-responsive iframe {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: 0 auto;
    width: 90%;
    height: 90%;
}


/*------------------------------min-size------------------------------*/

@media screen and (max-width: 800px) {

img { width: 100%;}

/*--------------------top-copy-area--------------------*/

.item-info-area div { width: 50%;}

/*--------------------item-explanation-area--------------------*/

.item-explanation-area li { width: 50%;}

.item-explanation-area li:first-child { margin-right: 5%;}

.item-explanation-area ul.line02 li:first-child { margin: 0 0 0 5%;}

.item-explanation-area li.item-explanation-txt { width: 45%;}

.item-explanation-area .color-btn li { width: 100px;}

.item-explanation-area .color-sum li { width: 100%;}


.movie-responsive iframe {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: 0 auto;
    width: 90%;
    height: 90%;
}
}

/*------------------------------sp------------------------------*/

@media screen and (max-width: 675px) {

.pc-only { display: none;}

.sp-only { display: block;}

/*--------------------top-copy-area--------------------*/

.item-info-area {
  display: block;
  margin: 0 auto;
  width: 90%;
}

.item-info-area div {
  display: block;
  width: 100%;
}

.item-info h2 { font-size: 35px; line-height: 1.5;}


.item-info h2 span {
  font-size: 15px;
  margin-top: 5px;
  letter-spacing: 0.3em;
}

.item-copy {
  font-size: 15px;
  letter-spacing: 0.2em;
}

.item-info-txt {
  font-size: 13px;
  margin-top: 20px;
}

.item-proce {
  font-size: 20px;
  padding-top: 20px;
}

.item-proce span { font-size: 24px;}/*40px*/

.item-sum-btn li { width: 80px;}

.item-info-shop-btn a { font-size: 15px;}

.item-sum-btn li:hover,
.item-info-shop-btn a:hover { opacity: 1;}


/*--------------------item-explanation-area--------------------*/

.item-explanation-area { margin-top: 50px;}

.item-explanation-area li {
  float: none;
  width: 100%;
}

.item-explanation-area li.item-explanation-txt { width: 100%;}

.item-explanation-area h3 { font-size: 25px;}

.item-explanation-area p {
  font-size: 16px;/*13px*/
  margin: 20px 0;
}

.item-explanation-area li:first-child,
.item-explanation-area ul.line02 li:first-child { margin: 0;}

.item-explanation-area ul.bottom { margin-top: 40px;}

/*--------------------color-check-area--------------------*/

.color-check-area {
  display: block;
  margin-top: 40px;
}

.color-check-area div {
  display: block;
  width: 100%;
}

.item-explanation-area p.color-sum-tit { font-size: 25px;}

.item-explanation-area .color-btn li { width: 80px;}

.item-explanation-area .color-btn li { float: left;}

.item-explanation-area .color-name p { font-size: 18px;}

.color-btn li:hover { opacity: 1;}

/*--------------------item-accessory-area--------------------*/

.item-accessory-area { margin: 40px auto 0;}

.item-accessory-tit { font-size: 25px;}

.item-accessory-area ul {
  margin: 0 auto;
  width: 80%;
}

/*--------------------item-details-area--------------------*/

.item-details-area { margin: 40px auto 50px;}

/*----------item-details-left----------*/

.item-details-left {
  float: none;
  width: 100%;
}

.item-details-tit { font-size: 25px;}

.item-details-left table { width: 100%;}

.item-details-left th {
  font-size: 13px;
  padding-right: 5%;
  width: 25%;
	min-width:auto;
}

.item-details-left td {
  font-size: 13px;
  width: 70%;
}

/*----------item-details-right----------*/

.item-details-right {
  float: none;
  margin-top: 30px;
  width: 100%;
}

.item-details-download img { width: 15%;}

.item-details-download-btn { margin-top: 0;}/*20px*/

.item-details-download-btn a {
  padding: 15px 0;
}

.item-details-download-btn a:hover { opacity: 1;}



}