@charset "utf-8";

body {
	background-color: rgba(0,0,0,1);
	color: rgba(0,0,0,1);
	font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
	font-style: normal;
	font-weight: 600;
	font-feature-settings: "palt";
}

img {
    border: none;
    vertical-align: bottom;
    margin: 0;
    padding: 0;
}

a {
	display: inline-block;
	text-decoration: none;
}

.swiper-pagination-bullet {
	background-color: #4298B5!important;
}

#ranking1 .item-name span {
	color: #FF6720;
}

#ranking6 .item-name span {
	color: #00C6FF;
}

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

	body {
		text-align: center;
	}

	p,li,h2,h3 {
		letter-spacing: 0.025rem;
	}

	header {
		height: 2.625rem;
	}

	header ul {
		font-size: 0;
	}

	header li {
		display: inline-block;
		vertical-align: top;
		font-size: 0.75rem;
		line-height: 0.75rem;
	}

	.swiper-slide a {
		display: block;
	}

	.swiper-slide a:hover {
		opacity: 1!important;
	}

	.sp {
		display: block;
		width: 100%;
	}

	.tab {
		display: none!important;
	}

	.pc {
		display: none!important;
	}

    header .side a {
		width: 18vw;
		padding: calc(0.563rem - 0.1rem) 0;
		color: #FF6720;
		border: solid 0.1rem #FF6720;
		box-sizing: border-box;
		}

    header .center a {
		width: 64vw;
		padding: 0.9375rem 0;
		color: #4298B5;
		background-color: rgba(0,0,0,1);
		}

	h1 {
		padding: 1rem 0;
	}

	h1 img {
		width: 7.625rem;
	}

	.hero-img {
		background: url(../images/sp_hero.jpg) center center / cover no-repeat;
		height: 15rem;
	}

	h2 {
		font-size: 1rem;
		margin-bottom: 0.75rem;
		color: #FF6720;
	}

	h3 {
		font-size: 0.625rem;
		margin-bottom: 2rem;
		color: #4298B5;
	}

	#prologue {
		background: url(../images/sp_bg.jpg) center center / cover no-repeat;
		padding: 2.5rem 0;
	}

	#prologue p {
		font-size: 0.75rem;
		line-height: 1.5rem;
		color: rgba(255,255,255,1);
	}

	#prologue span {
		display: block;
	}

	#images {
		padding: 2.5rem 0;
	}

	#images ul {
		font-size: 0;
	}

	#images li {
		display: inline;
	}

	#images img {
		width: 32.8vw;
		padding: 0.2667vw;
	}

	#collection {
		padding: 2.5rem 0;
	}

	#collection ul {
		font-size: 0;
	}

	#collection li {
		display: inline-block;
		position: relative;
		margin-bottom: 1rem;
	}

	#collection li:nth-child(odd) {
		margin-right: 0.666vw;
		margin-left: 1.333vw;
	}

	#collection li:nth-child(even) {
		margin-right: 1.333vw;
		margin-left: 0.666vw;
	}

	#collection li:nth-last-child(1), 
	#collection li:nth-last-child(2) {
		margin-bottom: 0!important;
	}

	#product {
		padding: 2.5rem 0;
	}

	.pickup-item img {
		width: 12.25rem;
	}

	.spec-text {
		margin-top: 3.5rem;
		line-height: 1.5rem;
		font-size: 0.75rem;
		color: rgba(191,191,191,1);
	}

	.spec-text span {
		display: block;
	}

	.notice {
		color: rgba(255,255,255,1);
	}

	.item-img {
		margin-bottom: 0.75rem;
	}

	.item-img img {
		width: 48vw;
	}

	.item-name {
		font-size: 0.625rem;
		line-height: 1rem;
		color: rgba(255,255,255,1);
	}

	#ranking1::after {
		position: absolute;
		top: 0;
		left: 0;
		content: "1";
		font-size: 1rem;
		padding: 0.375rem 0.572rem;
		color: rgba(0,0,0,1);
		background: rgba(191,166,90,1);
	}

	#ranking2::after {
		position: absolute;
		top: 0;
		left: 0;
		content: "2";
		font-size: 1rem;
		padding: 0.375rem 0.572rem;
		color: rgba(0,0,0,1);
		background: rgba(191,191,191,1);
	}

	#ranking3::after {
		position: absolute;
		top: 0;
		left: 0;
		content: "3";
		font-size: 1rem;
		padding: 0.375rem 0.572rem;
		color: rgba(0,0,0,1);
		background: rgba(148,111,70,1);
	}

	#ranking4::after {
		position: absolute;
		top: 0;
		left: 0;
		content: "4";
		font-size: 1rem;
		padding: 0.375rem 0.572rem;
		color: rgba(255,255,255,1);
		border: 1px solid;
		border-color: rgba(225,225,225,1);
	}

	#ranking5::after {
		position: absolute;
		top: 0;
		left: 0;
		content: "5";
		font-size: 1rem;








		padding: 0.375rem 0.572rem;
		color: rgba(255,255,255,1);
		border: 1px solid;
		border-color: rgba(225,225,225,1);
	}

	#ranking6::after {
		position: absolute;
		top: 0;
		left: 0;
		content: "6";
		font-size: 1rem;
		padding: 0.375rem 0.572rem;
		color: rgba(255,255,255,1);
		border: 1px solid;
		border-color: rgba(225,225,225,1);
	}

	.image {
		width: 100%;
	}

	.image-1 {
		background: url(../images/sp_image-1.jpg) center center / cover no-repeat;
		height: 15rem;
	}

	#coupon {
		background-color: rgba(0,0,0,1);
		color: rgba(191,160,64,1);
		padding: 2.5rem 0;
	}

    .coupon-img {
    	margin-bottom: 1rem;
    }

	#coupon img {
		width: 12.5rem;
	}

	.coupon-text {
		font-size: 0.625rem;
		line-height: 1rem;
		margin-bottom: 1rem;
		color: rgba(191,191,191,1);
	}

	#coupon span {
		display: block;
	}

	.coupon-button {
		display: inline-block;
	}

	.coupon-button a {
		padding: 0.625rem 2.889rem;
		font-size: 0.75rem;
		color: #FF6720;
		border: solid 0.1rem #FF6720;
	}

	footer {
		text-align: center;
		background-color: rgba(255,255,255,1);
		color: #4298B5;
	}

	.shop-logo {
		padding-top: 2.5rem;
		margin-bottom: 2rem;
	}

	.shop-logo img {
		width: 8rem;
	}

	.copyright {
		font-size: 0.5rem;
		padding-bottom: 2.5rem;
		line-height: 0.75rem;
	}

	/* 追従バナー */
	#banner {
		position: fixed;
		z-index: 99999999;
		bottom: 0;
		right: 0;
	}

	#banner ul {
		list-style: none;
		display: inline;
		margin: 0;
		font-size: 0;
	}

	#banner li {
		width: 157px;
		display: inline-block;
		line-height: 1;
		margin-bottom: 20px!important;
	}

	#banner li:nth-child(1) {
		/* margin-left: 7px!important; */
		margin-right: 12px!important;
	}

	#banner a {
		display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-decoration: none;
	}

	#banner img {
		width: 157px;
	}

}

@media screen and (min-width: 641px) and (max-width: 1024px) {

	body {
		text-align: center;
		width: 1024px;
	}

	a:hover {
		opacity: 0.6;
	}

	p,li,h2,h3 {
		letter-spacing: 0.01rem;
	}

	header {
		background-color: rgba(0,0,0,1);
		width: 1024px;
	}

	header ul {
		font-size: 0;
	}

	header li {
		display: inline-block;
		vertical-align: top;
		font-size: 1.125rem;
		line-height: 1.85rem;
	}

	.swiper-slide a {
		display: block;
	}

	.swiper-slide a:hover {
		opacity: 1!important;
	}

	.sp {
		display: none!important;
	}

	.hero .pc {
		display: none!important;
	}

	.hero .sp {
		display: block!important;
		width: 100%;
	}

	#prologue .pc {
		display: none!important;
	}

	#product .pc {
		display: none!important;
	}

	.tab {
		display: block;
	}

	header .side a {
		margin: calc(1.625rem - 0.1rem) 0;
		padding: 0 1.625rem;
		color: #FF6720;
		border: solid 0.1rem #FF6720;
	}

	header .center a {
		margin: 1.625rem 0;
		padding: 0 2rem;
		color: #4298B5;
	}

	h1 {
		padding: 1.685rem 0;
	}

	h1 img {
		width: 13.25rem;
	}

	h2 {
		font-size: 1.5rem;
		margin-bottom: 1.6875rem;
		color: #FF6720;
	}

	h3 {
		font-size: 1rem;
		margin-bottom: 5.0625rem;
		color: #4298B5;
	}

	#prologue {
		background: url(../images/sp_bg.jpg) center center / cover no-repeat;
		padding: 6.75rem 0;
	}

	#prologue p {
		font-size: 1.125rem;
		line-height: 2.85rem;
		color: rgba(255,255,255,1);
	}

	#prologue span {
		display: block;
	}

	#images {
		padding: 6.75rem 0;
	}

	#images ul {
		font-size: 0;
		width: 1024px;
		margin: 0 auto;
	}

	#images li {
		display: inline-block;
		margin-bottom: 0.84375rem;
	}

    #images li:nth-child(3n) {
    	margin-right: 0.75rem;
    }

    #images li:nth-child(3n+1) {
    	margin-left: 0.75rem;
    }

    #images li:nth-child(3n+2) {
    	margin-right: 0.75rem;
    	margin-left: 0.75rem;
    }

    #images li:nth-last-child(1),
    #images li:nth-last-child(2),
    #images li:nth-last-child(3) {
    	margin-bottom: 0!important;
    }

	#images img {
		width: 20.3333rem;
	}

	#collection {
		padding: 6.75rem 0;
		width: 1024px;
	}

	#collection ul {
		font-size: 0;
		width: 1024px;
		margin: 0 auto;
	}

	#collection li {
		display: inline-block;
		position: relative;
		margin-bottom: 3.375rem;
	}

	#collection li:nth-child(3n) {
		margin-right: 0.75rem;
	}

	#collection li:nth-child(3n+1) {
		margin-left: 0.75rem;
	}

	#collection li:nth-child(3n+2) {
		margin-left: 0.75rem;
		margin-right: 0.75rem;
	}

	#collection li:nth-last-child(1), 
	#collection li:nth-last-child(2),
	#collection li:nth-last-child(3) {
		margin-bottom: 0!important;
	}

	#product {
		padding: 6.75rem 0;
		width: 1024px;
	}

	.pickup-item {
		vertical-align: top;
		margin-left: 2.28125rem;
	}

	.pickup-item img {
		width: 25rem;
	}

	.spec {
		display: inline-flex;
		text-align: left;
	}

	.spec-text {
		width: 30.875rem;
		margin: 0 2.28125rem 0 3.5625rem;
		line-height: 2.25rem;
		font-size: 1.125rem;
		color: rgba(191,191,191,1);
	}

	.spec-text span {
		display: block;
	}

	.notice {
		color: rgba(255,255,255,1);
	}

	.item-img {
		margin-bottom: 1.6875rem;
	}

	.item-img img {
		width: 20.3333rem;
	}

	.item-name {
		font-size: 1rem;
		line-height: 1.5rem;
		color: rgba(255,255,255,1);
	}

	#ranking1::after {
		position: absolute;
		top: 0;
		left: 0;
		content: "1";
		font-size: 2.25rem;
		padding: 0.563rem 1.05rem;
		color: rgba(0,0,0,1);
		background: rgba(191,166,90,1);
	}

	#ranking2::after {
		position: absolute;
		top: 0;
		left: 0;
		content: "2";
		font-size: 2.25rem;
		padding: 0.563rem 1.05rem;
		color: rgba(0,0,0,1);
		background: rgba(191,191,191,1);
	}

	#ranking3::after {
		position: absolute;
		top: 0;
		left: 0;
		content: "3";
		font-size: 2.25rem;
		padding: 0.563rem 1.05rem;
		color: rgba(0,0,0,1);
		background: rgba(148,111,70,1);
	}

	#ranking4::after {
		position: absolute;
		top: 0;
		left: 0;
		content: "4";
		font-size: 2.25rem;
		padding: 0.563rem 1.05rem;
		color: rgba(255,255,255,1);
		border: 1px solid;
		border-color: rgba(225,225,225,1);
	}

	#ranking5::after {
		position: absolute;
		top: 0;
		left: 0;
		content: "5";
		font-size: 2.25rem;
		padding: 0.563rem 1.05rem;
		color: rgba(255,255,255,1);
		border: 1px solid;
		border-color: rgba(225,225,225,1);
	}

	#ranking6::after {
		position: absolute;
		top: 0;
		left: 0;
		content: "6";
		font-size: 2.25rem;
		padding: 0.563rem 1.05rem;
		color: rgba(255,255,255,1);
		border: 1px solid;
		border-color: rgba(225,225,225,1);
	}

	.image {
		width: 100%;
	}

	.image-1 {
		background: url(../images/sp_image-1.jpg) center center / cover no-repeat;
		height: 45rem;
	}

	#coupon {
		width: 1024px;
		background-color: rgba(0,0,0,1);
		color: rgba(191,160,64,1);
		padding: 6.75rem 0;
	}

	.coupon-pc {
		width: 1024px;
		margin: 0 auto;
		font-size: 0;
	}

	.coupon-img {
		display: inline-block;
		width: 32rem;
		margin-left: 0.75rem;
	}

    .coupon-img img {
    	width: 32rem;
    }

	.coupon-pc-right {
		display: inline-block;
		vertical-align: top;
		width: 26.5rem;
		margin-left: 4rem;
		margin-right: 0.75rem;
	}

	.coupon-text {
		font-size: 1.125rem;
		line-height: 2.25rem;
		text-align: left!important;
		margin-bottom: 1.535rem;
		color: rgba(191,191,191,1);
	}

	#coupon span {
		display: block;
	}

	.coupon-button {
		display: inline-block;
		margin: 0 auto;
	}

	.coupon-button a {
		padding: 1.75rem calc(6.113rem - 0.1rem);
		font-size: 1.625rem;
		color: #FF6720;
		border: solid 0.1rem #FF6720;
	}

	footer {
		text-align: center;
		background-color: rgba(255,255,255,1);
		color: #4298B5;
	}

	.shop-logo {
		padding-top: 6.75rem;
		margin-bottom: 5.0625rem;
	}

	.shop-logo img {
		width: 14.625rem;
	}

	.copyright {
		font-size: 0.75rem;
		padding-bottom: 3.375rem;
		line-height: 0.75rem;
	}

	/* 追従バナー */
	#banner {
		position: fixed;
		z-index: 99999999;
		bottom: 0;
		right: 0;
	}

	#banner ul {
		list-style: none;
		display: inline;
		margin: 0;
		font-size: 0;
	}

	#banner li {
		width: 275px;
		display: inline-block;
		line-height: 1;
		margin-bottom: 20px!important;
	}

	#banner li:nth-child(1) {
		/* margin-left: 7px!important; */
		margin-right: 14px!important;
	}

	#banner a {
		display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-decoration: none;
	}

	#banner img {
		width: 275px;
	}

}

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

	body {
		text-align: center;
		min-width: 1200px;
	}

	a:hover {
		opacity: 0.6;
	}

	p,li,h2,h3 {
		letter-spacing: 0.025rem;
	}

	header {
		background-color: rgba(0,0,0,1);
	}

	header ul {
		font-size: 0;
	}

	header li {
		display: inline-block;
		vertical-align: top;
		font-size: 1.125rem;
		line-height: 1.85rem;
	}

	.swiper-slide a {
		display: block;
	}

	.swiper-slide a:hover {
		opacity: 1!important;
	}

	.sp {
		display: none!important;

	}

	.tab {
		display: none!important;
	}

	.pc {
		display: block;
		width: 100%;
	}

	header .side a {
		margin: calc(1.625rem - 0.1rem) 0;
		padding: 0 1.625rem;
		color: #FF6720;
		border: solid 0.1rem #FF6720;
	}

	header .center a {
		margin: 1.625rem 0;
		padding: 0 2rem;
		color: #4298B5;
	}

	h1 {
		padding: 1.685rem 0;
	}

	h1 img {
		width: 13.25rem;
	}

	.hero-img {
		background: url(../images/pc_hero.jpg) center center / cover no-repeat;
		height: 45rem;
	}

	h2 {
		font-size: 1.5rem;
		margin-bottom: 1.6875rem;
		color: #FF6720;
	}

	h3 {
		font-size: 1rem;
		margin-bottom: 5.0625rem;
		color: #4298B5;
	}

	#prologue {
		background: url(../images/pc_bg.jpg) center center / cover no-repeat;
		padding: 6.75rem 0;
	}

	#prologue p {
		font-size: 1.125rem;
		line-height: 2.85rem;

		color: rgba(255,255,255,1);
	}

	#prologue span {
		display: block;
	}

	#images {
		padding: 6.75rem 0;
	}

	#images ul {
		font-size: 0;
		width: 1200px;
		margin: 0 auto;
	}

	#images li {
		display: inline-block;
		margin-bottom: 1.6875rem;
	}

    #images li:nth-child(3n+2) {
    	margin-right: 1.5rem;
    	margin-left: 1.5rem;
    }

    #images li:nth-last-child(1),
    #images li:nth-last-child(2),
    #images li:nth-last-child(3) {
    	margin-bottom: 0!important;
    }

	#images img {
		width: 24rem;
	}

	#collection {
		padding: 6.75rem 0;
	}

	#collection ul {
		font-size: 0;
		width: 1200px;
		margin: 0 auto;
	}

	#collection li {
		display: inline-block;
		position: relative;
		margin-bottom: 3.375rem;
	}

	#collection li:nth-child(3n+2) {
		margin-left: 1.5rem;
		margin-right: 1.5rem;
	}

	#collection li:nth-last-child(1), 
	#collection li:nth-last-child(2), 
	#collection li:nth-last-child(3) {
		margin-bottom: 0!important;
	}

	#product {
		padding: 6.75rem 0;
	}

	.pickup-item {
		vertical-align: top;
	}

	.pickup-item img {
		width: 28.125rem;
	}

	.spec {
		display: inline-flex;
		text-align: left;
	}

	.spec-text {
		width: 37.5rem;
		margin-left: 9.375rem;
		line-height: 2.25rem;
		font-size: 1.125rem;
		color: rgba(191,191,191,1);
	}

	.spec-text span {
		display: block;
	}

	.notice {
		color: rgba(255,255,255,1);
	}

	.item-img {
		margin-bottom: 1.6875rem;
	}

	.item-img img {
		width: 24rem;
	}

	.item-name {
		font-size: 1rem;
		line-height: 1.5rem;
		color: rgba(255,255,255,1);
	}

	#ranking1::after {
		position: absolute;
		top: 0;
		left: 0;
		content: "1";
		font-size: 2.25rem;
		padding: 0.563rem 1.05rem;
		color: rgba(0,0,0,1);
		background: rgba(191,166,90,1);
	}

	#ranking2::after {
		position: absolute;
		top: 0;
		left: 0;
		content: "2";
		font-size: 2.25rem;
		padding: 0.563rem 1.05rem;
		color: rgba(0,0,0,1);
		background: rgba(191,191,191,1);
	}

	#ranking3::after {
		position: absolute;
		top: 0;
		left: 0;
		content: "3";
		font-size: 2.25rem;
		padding: 0.563rem 1.05rem;
		color: rgba(0,0,0,1);
		background: rgba(148,111,70,1);
	}

	#ranking4::after {
		position: absolute;
		top: 0;
		left: 0;
		content: "4";
		font-size: 2.25rem;
		padding: 0.563rem 1.05rem;
		color: rgba(255,255,255,1);
		border: 2px solid;
		border-color: rgba(225,225,225,1);

	}


	#ranking5::after {
		position: absolute;
		top: 0;
		left: 0;
		content: "5";
		font-size: 2.25rem;
		padding: 0.563rem 1.05rem;
		color: rgba(255,255,255,1);
		border: 2px solid;
		border-color: rgba(225,225,225,1);
	}

	#ranking6::after {
		position: absolute;
		top: 0;
		left: 0;
		content: "6";
		font-size: 2.25rem;
		padding: 0.563rem 1.05rem;
		color: rgba(255,255,255,1);
		border: 2px solid;
		border-color: rgba(225,225,225,1);
	}

	.image {
		width: 100%;
	}

	.image-1 {
		background: url(../images/pc_image-1.jpg) center center / cover no-repeat;
		height: 45rem;
	}

	#coupon {
		background-color: rgba(0,0,0,1);
		color: rgba(191,191,191,1);
		padding: 6.75rem 0;
	}

	.coupon-pc {
		width: 1200px;
		margin: 0 auto;
		font-size: 0;
	}

	.coupon-img {
		display: inline-block;
		width: 37.5rem;
	}

	.coupon-pc-right {
		display: inline-block;
		vertical-align: top;
		width: 33.5rem;
		margin-left: 4rem;
	}

	.coupon-text {
		font-size: 1.125rem;
		line-height: 2.25rem;
		text-align: left!important;
		margin-bottom: 7.25rem;
	}

	#coupon span {
		display: block;
	}

	.coupon-button {
		display: inline-block;
		margin: 0 auto;
	}

	.coupon-button a {
		padding: 1.75rem calc(9.612rem - 0.1rem);
		font-size: 1.625rem;
		color: #FF6720;
		border: solid 0.1rem #FF6720;
	}


	footer {
		text-align: center;
		background-color: rgba(255,255,255,1);
		color: #4298B5;
	}

	.shop-logo {
		padding-top: 6.75rem;
		margin-bottom: 5.0625rem;
	}

	.shop-logo img {
		width: 14.625rem;
	}


	.copyright {
		font-size: 0.75rem;
		padding-bottom: 3.375rem;
		line-height: 0.75rem;
	}

	/* 追従バナー */
	#banner {
		position: fixed;
		z-index: 99999999;
		bottom: 0;
		right: 0;
	}

	#banner ul {
		list-style: none;
		display: flex;
		margin: 0 28px 28px 0;
	}

	#banner li {
		width: 275px;
		display: inline-block;
		line-height: 1;
		background: rgba(255,255,255,1);
	}

	#banner li:nth-child(1) {
		/* margin-left:7px; */
	}

	#banner a {
		display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-decoration: none;
	}

	#banner a:hover {
		opacity: 0.6;
	}

	#banner img {
		width: 275px;
	}

}