@charset "UTF-8";
/* パンくず 追加スタイル PC */
@media only screen and (min-width: 768px){
  .breadcrumb__list{
    padding-bottom: 1.6rem;
  }
}

/* メインタイトル */

.main-area{
	font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
.main-ttl img{
	width: 100%;
}
.pc{
	display: none !important
}
.sp{
	display: block !important
}
.main-ttl_txt{
	width: 92%;
	margin: 40px auto 60px;
}
.main-ttl_txt p{
	font-size: 5em;
	line-height: 9rem;
	letter-spacing: 1.9px;
	text-align: justify;
}
.br{
	display: none;
}

@media only screen and (min-width: 768px){
	.main-ttl{
		width: 95%;
		margin: 0 auto;
	}
	.pc{
		display: block!important
	}
	.sp{
		display: none!important
	}
	.main-ttl_txt p{
		font-size: 1.4rem;
		line-height: 2.8rem;
		letter-spacing: 1.5px;
		text-align: center;
	}
	.br{
		display: block;
	}	
}


/* ナビ */

.nav-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 10px;
}
.nav-item{
	position: relative;
	margin-bottom: 13px;
}
.nav-item a{
	display: flex;
	justify-content:center;
	align-items: center;
	width: calc(335 * (100vw / 750));
    height: calc(180 * (100vw / 750));
	background-color: #d3e4eb;
}
.nav-item a::after{
	content: "";
	background-image: url("../img/feather-arrow-down-right.svg");
	background-repeat: no-repeat;
	background-size: contain;
	width: 3.5rem;
	height: 3rem;
	bottom:7px;
	right: 4px;
	position: absolute;
}
.nav-item_e{
	text-align: center;
	font-size: 5rem;
	font-weight: 600;
	letter-spacing: 0.5rem;
}
.nav-item_j{
	text-align: center;
	font-size: 3.5rem;
	line-height: 5rem;
}
.br-2{
	display: block;
}

@media only screen and (min-width: 768px){
	.nav-list{
		width: 83.5%;
		margin: 0 auto;
	}
	.nav-item a{
		width: 27rem;
		height: 12rem;
	}
	.nav-item a::after{
		width: 1.2rem;
		height: 2rem;
		right: 9px;
		bottom: 4px;
	}
	.nav-item a:hover:after{
		bottom: 1px;
		right: 9px;
		transition: all 0.7s;
	}
	.nav-item_e{
		text-align: center;
		font-size: 1.9rem;
		letter-spacing: 0.3rem;
	}
	.nav-item_j{
		text-align: center;
		font-size: 1.2rem;
		line-height: 2rem;
	}
}


/* 商品アイテムタイトル */

.section1,.section2,.section3,.section4{
	width: 100%;
	height: 100%;
	margin-top: 70px;
	background: linear-gradient(180deg, #d3e4eb 0%, #d3e4eb 67%, #ffffff 33%, #ffffff 100%);
}
.ttl-area{
	width: 92%;
	margin: 0 auto;
	padding: 68px 0 33px;
}
.ttl-name{
	text-align: center;
	font-size: 8em;
	font-weight: 600;
	letter-spacing: 3px;
}
.ttl-name_j{
	text-align: center;
	font-size: 4.8em;
	line-height: 48px;
}
.ttl-name_txt{
	margin-top: 8px;
	text-align: justify;
	font-size: 4.5em;
	line-height: 33px;
	letter-spacing: 1.8px;
}

@media only screen and (min-width: 768px){
	.section1,.section2,.section3,.section4{
		margin-top: 88px;
		background: linear-gradient(180deg, #d3e4eb 0%, #d3e4eb 57%, #ffffff 43%, #ffffff 100%);
	}
	.content-area{
		max-width: 1300px;
		margin: 0 auto;
	}
	.ttl-area{
		padding: 74px 0 49px;
	}
	.ttl-name{
		font-size: 3.2em;
	}
	.ttl-name_j{
		font-size: 1.4em;
		line-height: 48px;
	}
	.ttl-name_txt{
		margin-top: 8px;
		text-align: center;
		font-size: 1.4em;
		line-height: 27px;
	}
}

/* 商品内容 */

.item{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 92%;
	margin: 0 auto;
}
.item-list{
	width: 48.5%;
}
.item-img img{
	width: 100%;
}
.brand{
	margin: 10px 0 8px;
	font-size: 3.1em;
	font-weight: 600;
	letter-spacing: 2px;
}
.name{
	font-size: 4.3em;
}
.price{
	margin: 12px 0 53px;
	font-size: 3.4em;
	letter-spacing: 1.2px;
	text-decoration: underline;
}

.button a{
	display: block;
	width: 82%;
	margin: 0 auto;
	padding: 23px 0;
	border: solid 1px #000;
	background-color: #000;
	color: #fff;
	font-size: 4.4em;
	letter-spacing: 3px;
	text-align: center;
}


@media only screen and (min-width: 768px){
	.item{
		width: 92%;
		margin: 0 auto;
	}
	.item-list{
		width: 22.5%;
	}
	.item-img img{
		width: 100%;
	}
	.brand{
		font-size: 1.3em;
		letter-spacing: 1.5px;
	}
	.name{
		font-size: 1.25em;
	}
	.price{
		font-size: 1em;
	}
	.button a{
		width: 36rem;
		padding: 16px 0;
		font-size: 1.4em;
	}
}

.top-btn{
	margin: 28px 0 120px;
}

@media only screen and (min-width: 768px){
	.top-btn{
		margin: 21px 0 120px;
}
	}





/* -----JQuery----- */

/*アニメーション要素のスタイル*/
.item-list{
  opacity : 0;
  visibility: hidden;
  transition: 1.5s;
  transform: translateY(40px);
}


/*アニメーション要素までスクロールした時のスタイル*/
.active{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}