/*@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500;600&family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');
*/
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
/* ---------------------------------------------------
  COMMON
 --------------------------------------------------- */
body {
    color: #231815;
    line-height: 1.5;
    /*font-family:"Noto Sans JP",  "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Helvetica", Arial, sans-serif;*/
	font-family:'Lato', YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: 500;
	font-size:10px;
    position: relative;
    background: #FBF6EB;
    width: 100%;
}
@media (max-width: 767px) { 
	body {font-size:8px;}
}

body.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow: hidden;

}
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
	
	display: inline-block;
	transition:all .4s;
}
a:hover img { opacity:.5 !important;}

/* アンカースタイル
------------------------------ */
a {
    color: inherit;
    text-decoration: none;
}

/*a:link {*/
/*    color: #000000;*/
/*}*/

/*a:visited {*/
/*    color: #000000;*/
/*}*/

/*a:hover {*/
/*    color: #000000;*/
/*}*/

/*a:active {*/
/*    color: #000000;*/
/*}*/



/*PC，SP出し分け
------------------------------ */
.is-pc {
    display: block;
}

.is-sp {
    display: none;
}

@media (max-width: 767px) {
    .is-pc {
        display: none;
    }

    .is-sp {
        display: block;
    }
}

/* COMMON
------------------------------ */
.section {
    width: 100%;
    position: relative;
}

.section__inner {
    width: 100%;
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
}
.inner {
	max-width:1040px;
	width:95%;
	margin:0 auto;
}

main {
	padding-top:72px;
	/*padding-top:152px;*/
}
@media (max-width: 767px) {
	.inner {
		width:auto;
		margin:0 5.3333%;
	}
	main {
		padding-top:65px;
		/*padding-top:126px;*/
		overflow-x: hidden;
	}
	
}

/* header
------------------------------ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    height: 72px;
    width: 100%;
    z-index: 6;
}
.header--inner {
    height: 72px;
	background: #fff;
}

.header__logo {
    position: absolute;
    top: 13px;
    left: 50px;
    width: 44px;
    /*z-index: 1;*/
}
.header__logo .logo--collagen { display:none;}
/*---- コラーゲンページ ----*/
.page--collagen .header__logo .logo--normal { display:none;}
.page--collagen .header__logo .logo--collagen { display:block;}

.header__logo > a {
    display: block;
}

.header__logo > a:hover {
    opacity: .7;
}

.header__logo > a img {
    width: 100%;
}

.header__sns {
    position: absolute;
    top: 36px;
    right: 124px;

    display: flex;
    flex-direction: row-reverse;
}

.header__snsLink {
    display: block;
    width: 40px;
    margin-left: 1.6em;
}

.header__snsLink img {
    width: 100%;
}

.header__snsLink:hover {
    opacity: 0.7;
}

.header__nlLink {
    display: block;
    width: 110px;
    margin-left: 1.6em;
    margin-top: 0.1em;
}

@media (max-width: 767px) {
    .header__nlLink img {
        width: 70%;
    }
}
@media (min-width: 768px) {
    .header__nlLink img {
        width: 100%;
    }
}

.header__nlLink:hover {
    opacity: 0.7;
}

/* lang */
.lang {
    position: absolute;
    top: 23px;
    /* right: 252px; */
    right: 120px;
}

.ul--lang {
    display: flex;
}
.ul--lang li {
    position: relative;
    padding: 0 0.65em;
    font-weight: 900;
	font-size:1.8em;
}
.ul--lang li:first-of-type::after {
    content: "";
    position: absolute;
	width:3px; /*width:0;*/
	height:14px;
	top:0.35em;
    right: -1px;
    background: #000;
}
.ul--lang a {
    position: relative;
    display: inline-block;
    color: #000;
    transition: 0.3s;
}
.ul--lang a:hover {
    color: #e72c63;
    border-bottom: 2px solid #e72c63;
}

.ul--lang span {
    position: relative;
    display: inline-block;
    color: #e72c63;
    /*border-bottom:2px solid #fff;*/
}
.page--collagen .ul--lang span { color: #489fdf;}

/*pageNav*/
.pageNav {
    /*display: none;*/    
    /*background: rgba(0, 0, 0, .85);*/
	/*background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(0,0,0,0.85) 50%, rgba(0,0,0,0.85) 100%);*/
    /*flex-wrap: nowrap;*/
    transition: opacity 1s, visibility 0s ease 1s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.pageNav .pageNav--sc { 
	overflow-y: scroll;
	-webkit-overflow-scrolling:scroll;
}
.pageNav.is-open {
    pointer-events: auto;
    transition-delay: 0s;
    opacity: 1;
    visibility: visible;
	overflow: visible;
}

@media (min-width: 768px) {
	.pageNav {
	}
	.pageNav .pageNav--sc {
		position: fixed;
		height:calc(100% - 72px);
		margin-top:72px;
		width: 100vw;
		overflow-y: scroll;
		background: rgba(0, 0, 0, .85);
	}
}
@media (max-width: 767px) {
    .pageNav {}
	.pageNav .pageNav--sc {
		position: fixed;
		height:calc(100% - 65px);
		margin-top:65px;
		overflow-y: scroll;
	}
    /* lang */
    .lang {
        position: absolute;
        top: 19px;
        right: 68px;
    }
	.ul--lang li:first-of-type::after {
		height:13px;
		top:0.45em;
	}

    .ul--lang a,
    .ul--lang span {
        font-size: 0.825em;
    }
}

.header__toggleNavTrigger {
    pointer-events: auto;
    position: absolute;
    top: 10px;
    right: 50px;
    width: 50px;
    height: 50px;
	transition:all .35s;
}

.header__toggleNavTrigger:hover {
    opacity: .7;
}
.is-fixed .header__toggleNavTrigger { 
	opacity:0;
}

button.header__toggleNavTrigger.js-pageNavOpenTrigger.is-open { position: fixed;}

.header__toggleNavTrigger .header__toggleNavTriggerLine {
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    width: 46px;
    height: 2px;
    background: #000;
    position: absolute;
    top: 50%;
    right: 0
}
.page--collagen .header__toggleNavTrigger .header__toggleNavTriggerLine { background-color: #489fdf;}
.header__toggleNavTrigger.header__toggleNavTrigger--02 .header__toggleNavTriggerLine { background: #9A7B4D;}

.header__toggleNavTrigger .header__toggleNavTriggerLine--line1 { transform: translateY(-12px)}
.header__toggleNavTrigger .header__toggleNavTriggerLine--line3 { transform: translateY(12px);}

.header__toggleNavTrigger.is-open .header__toggleNavTriggerLine {
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    width: 60px;
    height: 3px;
    /* background: #000; */
    position: absolute;
    top: 50%;
    right: 0;
    left: auto;
}

.header__toggleNavTrigger.is-open .header__toggleNavTriggerLine--line1 {transform: rotate(-135deg)}
.header__toggleNavTrigger.is-open .header__toggleNavTriggerLine--line2 {opacity: 0}
.header__toggleNavTrigger.is-open .header__toggleNavTriggerLine--line3 {transform: rotate(135deg)}

@media screen and (max-width: 767px) {
	.header {
		height:65px;
	}
/*    .header__toggleNavTrigger:hover {
        opacity: 1;
    }*/
    .header__toggleNavTrigger {
        top: 24px;
        right: 20px;
        width: 40px;
        height: 18px
    }
    .header__sns {
        top: 27px;
        right: 30px;
    }
    .header__snsLink {
        display: block;
        width: 25px;
        margin-left: 1.3em;
    }
    .header__snsLink:hover {
        opacity: 1;
    }
    .header__logo {
        position: absolute;
        top: 11px;
        left: 20px;
        width: 41px;
    }

    .header__toggleNavTrigger .header__toggleNavTriggerLine {
        width: 40px;
        height: 2px;
    }

    .header__toggleNavTrigger .header__toggleNavTriggerLine--line1 { transform: translateY(-10px); }
    .header__toggleNavTrigger .header__toggleNavTriggerLine--line3 { transform: translateY(10px); }

    .header__toggleNavTrigger.is-open .header__toggleNavTriggerLine {
        background: #000;
        width: 30px;
    }
}


/*closeBtn*/
.pageNav__closeNavTrigger {
    pointer-events: auto;
    position: absolute;
    top: /*-61px;*/ 11px;
    right: 47px;
    width: 50px;
    height: 50px;
    z-index: 10;
    transform: rotate(45deg);
}

.pageNav__closeNavTrigger:hover {
    opacity: .7;
}
.pageNav__closeNavTrigger .pageNav__closeNavTriggerLine {
    /*background: #fff;*/
    /*width: 60px;*/
    /*height: 3px;*/
    /*!* background: #000; *!*/
    /*position: absolute;*/
    /*top: 50%;*/
    /*right: 0;*/
    /*left: auto;*/

}

.pageNav__closeNavTrigger .pageNav__closeNavTriggerLine--line1 {
    width: 100%;
    height: 2px;
    display: block;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -1px;
    transform: scale(0, 1);
    transform-origin: 0 0;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-duration: 1s;
    transition-property: transform;
    /*transform: scale(1, 1);*/
}

.pageNav__closeNavTrigger .pageNav__closeNavTriggerLine--line2 {
    opacity: 0
}

.pageNav__closeNavTrigger .pageNav__closeNavTriggerLine--line3 {
    content: '';
    width: 2px;
    height: 100%;
    display: block;
    background-color: #000;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -1px;
    transform: scale(1, 0);
    transform-origin: 100% 100%;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-duration: 1s;
    transition-property: transform;
}

.pageNav__closeNavTrigger.is-active .pageNav__closeNavTriggerLine--line1,
.pageNav__closeNavTrigger.is-active .pageNav__closeNavTriggerLine--line3 {
    transform: scale(1, 1);
}

.page--collagen .pageNav__closeNavTrigger .pageNav__closeNavTriggerLine--line1,
.page--collagen .pageNav__closeNavTrigger .pageNav__closeNavTriggerLine--line3 {
    background-color: #489fdf;
}

@media screen and (max-width: 767px) {
    .pageNav__logo {
        position: absolute;
        top: 15px;
        left: 13px;
        width: 50px;
    }

    .pageNav__closeNavTrigger:hover {
        opacity: 1;
    }

    .pageNav__closeNavTrigger {
		position: fixed;
        top: 19px;
    	right: 25px;
        width: 30px;
        height: 30px;
		z-index: 10;
    }


    /*.pageNav__closeNavTrigger .pageNav__closeNavTriggerLine {*/
    /*    height: 3px;*/
    /*    background: #fff;*/
    /*    width: 30px;*/
    /*}*/
}


/* purchaseNav
------------------------------ */
.purchaseNav {
    display: none;
    /*align-items: center;*/
    justify-content: center;
    background: rgba(252, 243, 226, .97);
    height: 100vh;
    width: 100vw;
    color: #ffffff;
    flex-wrap: nowrap;
    position: fixed;
    top: 0;
    left: 0;
}

.purchaseNav.purchaseNav--clear-protein-muscle,
.purchaseNav.purchaseNav--clear-protein-diet {
    background: rgba(251, 241, 244, .97);
}

.purchaseNav.is-open {
    display: flex;
}


/*purchaseNavCloseBtn*/
.purchaseNav__closeNavTrigger {
    pointer-events: auto;
    position: absolute;
    top: 32px;
    right: 34px;
    width: 50px;
    height: 50px;
    z-index: 1;
}

.purchaseNav__closeNavTrigger:hover {
    opacity: .7;
}


.purchaseNav__closeNavTrigger .purchaseNav__closeNavTriggerLine {
    background: #9F7A45;
    width: 60px;
    height: 3px;
    /* background: #000; */
    position: absolute;
    top: 50%;
    right: 0;
    left: auto;

}

.purchaseNav__closeNavTrigger .purchaseNav__closeNavTriggerLine--line1 {
    transform: rotate(-135deg)
}

.purchaseNav__closeNavTrigger .purchaseNav__closeNavTriggerLine--line2 {
    opacity: 0
}

.purchaseNav__closeNavTrigger .purchaseNav__closeNavTriggerLine--line3 {
    transform: rotate(135deg);
}

@media screen and (max-width: 767px) {
    .purchaseNav {
        overflow-y: auto;
    }

    .purchaseNav.is-open {
        display: block;
    }

    .purchaseNav__logo {
        position: absolute;
        top: 15px;
        left: 13px;
        width: 50px;
    }

    .purchaseNav__closeNavTrigger:hover {
        opacity: 1;
    }

    .purchaseNav__closeNavTrigger {
        top: 23px;
        right: 14px;
        width: 25px;
        height: 28px
    }

    .purchaseNav__closeNavTrigger .purchaseNav__closeNavTriggerLine {
        height: 3px;
        width: 30px;
    }
}


/* page--nav & footer
------------------------------ */
.page--nav {
	padding:4em 0 0;
	background:#fff6e5;
}
.ul--page--nav {
}
.ul--page--nav li {
	padding-bottom:0.75em;
	font-size:2.2em;
	font-weight: 700;
}
.ul--page--nav small {
	margin-left: 1em;
	font-size:0.55em;
	font-weight: 500;
}
.ft--ul--pr01 {
	display:flex;
	justify-content: space-between;
	padding: 1em 0 1em;
}
.ft--ul--pr01 li {
	position:relative;
	display: flex;
	justify-content: space-between;
	margin-bottom: 0;
	padding-bottom: 2em;
	
	font-size:0.55em;
	line-height: 1.4;
	text-align: center;
}
.ft--ul--pr01 li .txt {
	display:flex;
	align-items: center;
	justify-content: center;
	min-height:2.5em;
	margin-top: 0.75em;
	font-family:'Lato', YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	text-align: center;
	line-height: 1.4;
}

@media (min-width: 768px) {
	.ft--ul--pr01 li a { display:block;}
	.ft--ul--pr01 li .photo {
		display:block;
		padding:0 20%;
	}
	.ft--ul--pr01 li .photo img { width:100%; height:auto;}
	
	.ft--ul--pr01 li:nth-child(1)::before,
	.ft--ul--pr01 li:nth-child(5)::before,
	.ft--ul--pr01 li:nth-child(7)::before/*,
	.ft--ul--pr01 li:nth-child(8)::before */ {
		content:'';
		width:/*188%*/328%;
		height:3px;
		position: absolute;
		bottom:0.8em;
		left:6%;
		background: #e72c63;
	}
	.ft--ul--pr01 li:nth-child(1)::after,
	.ft--ul--pr01 li:nth-child(5)::after,
	.ft--ul--pr01 li:nth-child(7)::after/*,
	.ft--ul--pr01 li:nth-child(8)::after */{
		content:'WPI';
		position: absolute;
		left:170%;
		bottom:-1em;
		transform: translateX(-50%);
		font-size:1.125em;
		font-weight: 900;
		letter-spacing: 0.1em;
		white-space: nowrap;
		color: #e72c63;
	}
	.ft--ul--pr01 li:nth-child(5)::before {
		width:208%;
		background: #ec728d;
	}
	.ft--ul--pr01 li:nth-child(5)::after {
		content:'CLEAR WHEY';
		left:100%;
		color: #ec728d;
	}
	.ft--ul--pr01 li:nth-child(7)::before {
		width:208%/*188%*//*328%*/ /*288%;*/ /*コラーゲンOPENで288％*/;
		/*background: #e72c63;*/
		background: #204433;
	}
	.ft--ul--pr01 li:nth-child(7)::after {
		content:'VEGAN';
		left:100%;
		/*color: #e72c63;*/ /*wpiの色*/
		color: #204433;
	}
/*	.ft--ul--pr01 li:nth-child(8)::before {
		width:88%;
		background: #539dd1;
	}
	.ft--ul--pr01 li:nth-child(8)::after {
		content:'COLLAGEN';
		left:50%;
		color: #539dd1;
	}*/
	.ft--ul--pr01 li.dummy { display:none;}
	
	.ul--nav--collagen {
		width:50%;
		margin: 1em auto 0;
		text-align: center;
	}
}
@media (min-width: 1000px) {
	.ft--ul--pr01 li { width:12.5%}
}
@media (min-width: 768px) and (max-width:999px) {
	.ft--ul--pr01 {
		flex-wrap:wrap;
	}
	.ft--ul--pr01 li { 
		width:25%;
		margin-bottom: 2.5em;
	}
}
@media (max-width: 767px) {	
	.page--nav { padding-top:2em;}
	.ft--ul--pr01 {
		padding-top: 0;
		flex-wrap:wrap;
	}
	.ft--ul--pr01 li { 
		width:48%;
		margin-top: 3em;
		padding-bottom: 0.5em;
	}
	.ft--ul--pr01 li:nth-child(3) {
		margin-top: 1.2em;
	}
	.ft--ul--pr01 li a {
		display: flex;
		justify-content: flex-start;
	}
	.ft--ul--pr01 li .photo {
		width:36%;
		padding-right: 1em;
	}
	.ft--ul--pr01 li:nth-child(7) .photo { margin-right:1em;}
	
	.ft--ul--pr01 li .txt { text-align:left; font-size:1.1em;}
	
	.ft--ul--pr01 .ct--vegan {
		border-bottom:2px solid #204433;
	}
	.ft--ul--pr01 .ct--clear {
		border-bottom:2px solid #ec728d;
	}
	.ft--ul--pr01 .ct--wpi {
		border-bottom:2px solid #e72c63;
	}
	.ft--ul--pr01 li:nth-child(1)::after,
	.ft--ul--pr01 li:nth-child(5)::after,
	.ft--ul--pr01 li:nth-child(7)::after {
		content:'WPI';
		position: absolute;
		left:0;
		top:-1.95em;
		font-size:1.125em;
		font-weight: 900;
		letter-spacing: 0.1em;
		white-space: nowrap;
		color: #204433;
		color: #e72c63;
	}
	.ft--ul--pr01 li:nth-child(5)::after {
		content:'CLEAR WHEY';
		color: #ec728d;
	}
	.ft--ul--pr01 li:nth-child(7)::after {
		content:'VEGAN';
		color: #e72c63;
		color: #204433;
	}
	
	.ft--ul--pr01 .ct--collagen { margin-top:2.5em;}
	.ft--ul--pr01 .ct--collagen a.is-pc { display:none;}
	.ft--ul--pr01 .ct--collagen {
		width:100%;
		height:10em;
		background:#eee;
	}
}

/*---- footer--sub ----*/
.footer--sub {
	padding:4em 0 4.6em;
	background:#d9d9d9;
}
.footer--sub .ft--sub--ttl {
	font-size:2.4em;
	font-weight: 900;
	letter-spacing: 0.13em;
}
.ul--tc {
	display:flex;
	justify-content: space-between;
	width:86%;
	margin-top: 1.5em;
}
.ul--tc li {
	max-width:250px;
	margin-left:2em;
}
.ul--tc li:first-of-type { margin-left:0;}

.ul--ft--sns {
	display:flex;
	justify-content: flex-end;
	margin-top:-3em;
}
.ul--ft--sns li {
	width:3em;
	margin-left: 3%;
}
@media (max-width: 767px) {
	.footer--sub { padding-bottom:3.6em;}
	.ul--tc {
		width:100%;
		flex-wrap:wrap;
	}
	.ul--tc li {
		width:48%;
		margin:0 0 1.2em;
	}
	.ul--ft--sns {
		max-width:30%;
		justify-content: space-between;
		margin:2.2em auto 0;
	}
	.ul--ft--sns li {
		width:4em;
		margin: 0;
	}
}

/* footer
-------------------------------------------------- */
.footer {
	padding:4em 0 2em;
	background:#fff;
}
.footer .footer--sub {
	padding:0 0 4.6em;
}
.footer .footer--sub .ft--sub--ttl {
	transform: translateY(-0.7em);
}
.footer .footer--sub .ul--tc { width: 100%;}

.ul--ft--com {
	display:flex;
}
.ul--ft--com li {
	position:relative;
	margin-right:1em;
	padding-right:1em;
	font-size:1.3em;
	font-weight: 500;
}
.ul--ft--com li::before {
	content:'｜';
	position: absolute;
	right:-0.5em;
	top:0;
}
.ul--ft--com li:last-of-type::before { content:'';}
.footer .copyright { font-size:1.2em; font-weight: 500;}

@media (min-width: 768px) {
/* PC用 */
	.ul--ft--com {
		margin:-3em 0 1.2em;
	}
	.footer .ul--ft--sns { margin:3.5em 0 0;}
}
@media (max-width: 767px) {
/* SP用 */
	.ul--ft--com {
		justify-content: center;
		margin:3.6em auto 1.8em;
	}
	.footer .copyright {
		text-align:center;
	}
}




/* page parts
-------------------------------------------------- */
main h2 {
	position: relative;
	margin-bottom: 2em;
	padding-bottom: 0.2em;
	font-size:2.4em;
	font-weight:900;
	letter-spacing: 0.1em;
	line-height: 1.5;
}
main h2::after {
	content: '';
	position:absolute;
	left: 0;
	bottom:0;
	width:2.4em;
	height:3px;
	background: #e72c63;
}
main h3 {
	margin-bottom:5px;
	font-size:5em;
	font-weight: 900;
	letter-spacing: 0.06em;
	line-height: 1.1;
}
.top--product--area h3 span {
	color: transparent;
	-webkit-text-stroke: 2px #231815;
	text-stroke: 2px #231815;
	letter-spacing: 0.1em;
}
main h4 {
	margin-bottom: 3.9em;
	font-size:1.5em;
	font-weight:700;
}
main h4 span {
	margin-right:1.8em;
	color: #e72c63;
	letter-spacing: 0.1em;
}
@media (max-width: 767px) {
	main h2 {
		padding-bottom:0.3em;
	}
}


/* lineupSlider
------------------------------ */
.lineup-swiper-button-prev,
.lineup-swiper-button-next {
    mix-blend-mode: difference;

}

.lineup-swiper-button-prev:hover,
.lineup-swiper-button-next:hover {
    opacity: .7;
    mix-blend-mode: difference;

}

.lineup-swiper-button-prev:after,
.lineup-swiper-button-next:after {
    /*content: '';*/
    /*display: block;*/
    /*background: transparent;*/
    /*width: 100px;*/
    /*height: 100px;*/
    /*transform: rotate(-45deg);*/
    /*position: absolute;*/
}

.lineup-swiper-button-prev:before {
    content: '';
    display: block;
    width: 44px;
    height: 44px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    transform: rotate(-45deg);
    transform-origin: center;
    position: absolute;
    right: 0;
}

.lineup-swiper-button-next:before {
    content: '';
    display: block;
    width: 44px;
    height: 44px;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(-45deg);
    transform-origin: center;
    position: absolute;
    left: 0;
}

.lineup-swiper-button-prev,
.lineup-swiper-button-next {
    width: 60px;
    height: 100px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    bottom: 0;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.lineup-swiper-button-prev {
    left: 50px;
    right: auto;
    margin-top: 41px;
}

.lineup-swiper-button-next {
    right: 50px;
    left: auto;
    margin-top: 41px;
}

.lineup-swiper-button-prev.swiper-button-disabled,
.lineup-swiper-button-next.swiper-button-disabled {
    display: none;
}

@media (max-width: 767px) {
    .lineup-swiper-button-prev {
        left: 17px;
        margin-top: 48px;
    }

    .lineup-swiper-button-next {
        right: 17px;
        margin-top: 48px;
    }

    .lineup-swiper-button-prev:after,
    .lineup-swiper-button-next:after {
        width: 70px;
        height: 70px;
    }
}


.lineup--info {
	max-width: 926px;
	margin:4em auto 0;
	padding:2em 3em;
	line-height: 1.6;
	border: 1px solid #000;
}
.lineup--info .lineup--info--ttl {
	margin-bottom:0.7em;
	font-size:2em;
	font-weight: 700;
	text-align: center;
}
.lineup--info h5 {
	font-size:1.6em;
	font-weight: 700;
}
.lineup--info p {
	font-size:1.4em;
	margin-bottom:1.1em;
}
.lineup--info .sub {
	margin-bottom:0;
	font-size:1.2em;
}
@media (max-width: 767px) {
	.lineup--info {
		margin:3em auto 0;
		padding:2em 2em;
		line-height: 1.6;
		border: 1px solid #000;
	}
	.lineup--info p { font-size:1.5em;}
}



/* slider
-------------------------------------------------- */
.product--slider--area {
	padding:7em 0;
	background:#dbcab6;
}

.product--slider--area h2 {
	position: relative;
	margin-bottom: 2em;
	padding-bottom: 0.1em;
	font-size:2.4em;
	font-weight:900;
	letter-spacing: 0.1em;
	line-height: 1.5;
	text-align: center;
}
.product--slider--area h2::after {
	content: '';
	position:absolute;
	left: 50%;
	bottom:0;
	transform: translateX(-50%);
	width:2.4em;
	height:3px;
	background: #e72c63;
}

.product--slider--area .inner {
	position:relative;
}
.product--slider--area .slick--slider01 {
	margin:0 -9px;
}

.product--slider--area .slick--slider01 .slider--item {
	position:relative;
	padding:0 9.5px;
}
.slider--item .photo { margin-bottom:1em;}
.slider--item .slider--itemName {
	position: relative;
	margin-bottom: 2em;
	padding-bottom: 0.1em;
	font-size:1.6em;
	font-weight:900;
	letter-spacing: 0.1em;
	line-height: 1.5;
}
.slider--item .slider--itemName small {
	display:block;
	font-size:0.833333em;
	font-weight: 500;
	letter-spacing: 0.01em;
}
@media (max-width: 767px) {
/* SP用 */
}

.slick-dots {
	display:flex;
	justify-content: center;
	/*margin: 3% 17.3% 0 auto;*/
	margin:3% auto 0;
}
.slick-dots li {
	width:24px;
	height:3px;
	margin-left: 7px;
	background:#fff;
	line-height: 0;
	overflow: hidden;
}
.slick-dots li:first-of-type { margin-left:0;}

.slick-dots li button {
	width:24px;
	height:4px;
	padding:0;
	border: none;
	text-indent:-1000px;
	overflow: hidden;
	background:#fff;
}
.slick-dots li.slick-active button { background:#e72c63;}

.slick--arrows {
	position:absolute;
	top:50%;
	transform: translate(-50%, -50%);
	
	width:calc(100% + 144px);
	left:50%;
}
.slick--arrows div {
	position: absolute;
	width:49px;
	height:60px;
	top:-50px;
	transition:all .4s;
}
.slick--arrows div:hover { cursor:pointer; opacity:.5;}
.slick--arrows .slick-prev { left: 0%;}
.slick--arrows .slick-next { right:0%;}
.slick--arrows .slick-disabled img { opacity: 0;}
@media (max-width: 767px) {
/* SP用 */
	.slick--arrows { display:none;}
}



/* アニメーション
------------------------------ */
[data-animation-name="animate__fadeInUpSmall"] {
    opacity: 0;
}

.animate__fadeInUpSmall {
    opacity: 0;
    -webkit-animation-name: fadeInUpSmall;
    animation-name: fadeInUpSmall
}

@-webkit-keyframes fadeInUpSmall {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInUpSmall {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.animate__animated.animate__delay-500ms {
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
}