.lineup h4,
.lineup .sub,
.lineup .capacity,
.lineup .capacity_tax {font-family: 'Hiragino Kaku Gothic Pro', "游ゴシック", YuGothic, 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;font-weight: bold;}

.clarity .title {background: #ffece0; padding: 50px 8vw 30px;}
.clarity .lineup-cate h3 {color: #ea6d5e; border-bottom: solid 1px #ea6d5e;}
.clarity .lineup .sub {color: #ea6d5e;}
.clarity .lineup .sub span {border: solid 1px #ea6d5e;}

.whitening .title {background: #ffece0; padding: 50px 8vw 30px;}
.whitening .lineup-cate h3 {color: #dd81b1; border-bottom: solid 1px #dd81b1;}
.whitening .lineup .sub {color: #dd81b1;}
.whitening .lineup .sub span {border: solid 1px #dd81b1;}

.support .title {border-bottom: solid 2px #f29600;}
.support .lineup-cate h3 {color: #f29600; border-bottom: solid 1px #f29600;}
.support .lineup .sub {color: #f29600;}
.support .lineup .sub span {border: solid 1px #f29600;}

.clarity p.txt_cap {
	margin: 0 auto 20px;
	text-align: left;
}

.lineup * {
	box-sizing: border-box;
}

.clarity .lineup-cate,
.whitening .lineup-cate {
	display: flex;
	flex-wrap: wrap;
}
.lineup a,
.lineup .lineup_nolink_body {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,.5);
	box-sizing: border-box;
}
.lineup a::before,
.lineup .lineup_nolink_body::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	background-color: #fff;
	z-index: 0;
}
/* ===================== pc ===================== */

@media print, screen and (min-width: 769px) {
	
	
	#series nav {width: 1000px; height: 280px; margin: 0 auto;}
	#series nav ul {width: 664px; margin: 0 auto; padding: 0; list-style-type: none;}
	#series nav li {
		display: inline-block; vertical-align: top; width: 332px; height: 280px; text-align: center; opacity: .7; box-sizing: border-box;
		transition: opacity .15s linear;
		-webkit-transition: opacity .15s linear;
		-moz-transition: opacity .15s linear;
		-ms-transition: opacity .15s linear;
	}
	#series nav li:nth-of-type(2) {/*border-right: solid 1px #fff;*/ border-left: solid 1px #fff;}
	#series nav li img {width: 100%; height: auto;}
	#series nav li span {display: none;}
	
	#series nav li:hover,
	#series.clarity nav li:nth-of-type(1),
	#series.whitening nav li:nth-of-type(2),
	#series.support nav li:nth-of-type(3) {
		opacity: 1;
		background: -webkit-gradient(linear, left, top, form(rgba(255,255,255,1)), to(rgba(255,255,255,.0)));
		background: linear-gradient(to bottom, rgba(255,255,255,1) 50%, rgba(255,255,255,.0));
	}
	
	.title {position: relative; width: 100%; min-height: 80px; margin: 0 auto; box-sizing: border-box; background-color: #fff;}
	.title-body {position: relative; width: 1400px; margin: 0 auto;}
	.title-body h2 {
		height: 80px; margin-right: 50px; padding-left: 30px; font-size: 30px; line-height: 80px; color: #707070; box-sizing: border-box;
		background: url("/common/images/lineup/title_bg.svg") no-repeat left top; background-size: auto 100%;
	}
	.title-body h2, .title-body p.copy {display: inline-block; vertical-align: middle;}
	.title-body p.link {position: absolute; right: 0; top: 27px; width: 130px; height: 26px; line-height: 26px; border: solid 1px #707070; font-size: 12px; background: url("/common/images/common/icon1.svg") no-repeat right 10px center; background-size: 10px 12px;}
	.title-body p.link a {display: block; width: 100%; height: 100%; padding-left: 20px; box-sizing: border-box;}
	
	/*list*/
	#series {padding: 0 0 50px;}
	#detail {padding: 50px 0;}
	main {
		/*box-sizing: border-box;
		background-image:
			url("/common/images/common/contents_bg2.png"),
			url("/common/images/common/contents_bg1.jpg");
		background-repeat: repeat-y, repeat-y;
		background-position: center center, center top;
		background-size: 100%, 100%;
		background-attachment: fixed, fixed;*/
	}

	main.whitening {
		/*box-sizing: border-box;
		background: url("/common/images/common/contents_whitening_bg.jpg") repeat-y center top;
		background-size: cover;
		background-attachment: fixed;*/
	}
	
	#list-body {width: 1000px; margin: 50px auto 0;}
	.lineup-cate, .lineup {display: inline-block; vertical-align: top;}
	.lineup-cate {margin: 0 0px 40px 0;}

	/* .clarity .lineup-cate:nth-of-type(2),
	.clarity .lineup-cate:nth-of-type(5),
	.clarity .lineup-cate:nth-of-type(7),
	.clarity .lineup-cate:nth-of-type(12) {margin-right: 0;} */

	/* .whitening .lineup-cate:nth-of-type(1),
	.whitening .lineup-cate:nth-of-type(2),
	.whitening .lineup-cate:nth-of-type(3),
	.whitening .lineup-cate:nth-of-type(4),
	.whitening .lineup-cate:nth-of-type(5),
	.whitening .lineup-cate:nth-of-type(6)
	{margin-right: 40px;} */
	/*.whitening .lineup-cate:nth-of-type(4),*/
	.support .lineup-cate:nth-of-type(3) {margin-right: 0;}
	.clarity .lineup {
		/* min-height: 480px; */
		background-color: rgba(255,255,255,.5);}
	.clarity .new {
		/* background-color: rgba(255,255,255,.8); */
		border: 2px solid #DE4252;
		box-sizing: border-box;
	}
	.lineup .new:before {
		width: 216px;
	}
	.new .capacity{background-color: #DE4252 !important;}

	.whitening .lineup {
		/* min-height: 510px; */
		/* background-color: rgba(255,255,255,.5); */
	}
	.support .lineup {min-height: 450px; background-color: rgba(255,255,255,.5);}
	
	.lineup-cate h3 {margin-bottom: 20px; padding-bottom: 10px; font-size: 17px; display: none;}
	.lineup {
		position: relative;
		width: 235px;
		margin: 0 0 20px 20px;
	}
	/*.clarity .lineup:nth-of-type(4n) {margin-left: 0 !important;}*/
	.clarity .lineup:nth-of-type(5),
	.clarity .lineup:nth-of-type(9),
	.clarity .lineup:nth-of-type(11),
	.clarity .lineup:nth-of-type(15),
	.clarity .lineup:nth-of-type(24) {margin-left: 0 !important;}

	.lineup a,
	.lineup .lineup_nolink_body {
		padding-bottom: 60px;
	}
	.lineup a::before,
	.lineup .lineup_nolink_body::before {
		height: 150px;
	}
	.lineup:nth-of-type(1) {margin-left: 0;}
	.lineup .pic {position: relative; width: 100%; height: auto; margin-bottom: 10px; z-index: 1;}
	.lineup .pic img {width: 100%; height: auto;}
	.lineup h4 {font-size: 16px; text-align: center; font-weight: normal; line-height: 1.4em;}
	.lineup .sub {margin: 5px 0 10px; font-size: 12px; text-align: center; line-height: 16px;}
	.lineup .sub span {display: inline-block; vertical-align: bottom; height: 16px; margin-left: 10px; padding: 0 5px; font-size: 10px;}
	.lineup .txt {font-size: 12px; padding: 0 5%;}
	.lineup .capacity {position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 90%; height: 40px; line-height: 18px; margin: 20px auto 0; padding: 3px 10px 0 10px; background-color: #969696; color: #fff; text-align: right; font-size: 12px; font-weight: bold; }
	/*.lineup .capacity_tax {position: absolute; left: 15px; bottom: 0; width: 190px; height: 20px; line-height: 20px; margin: 20px auto 0; background-color: #969696; color: #fff; text-align: center; font-size: 12px; font-weight: bold;}*/
	.lineup .ex {
		width: 90%;
		height: 20px;
		margin: 10px auto 0;
		line-height: 20px;
		color: #ea6d5e;
		font-size: 12px;
		border: solid 1px #ea6d5e;
		border-radius: 100vh;
		text-align: center;
	}

	.small {
		font-family: 'Hiragino Kaku Gothic Pro', "游ゴシック", YuGothic, 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
		font-size: 11px;
		text-align: left;
		color: #666666;
	}

	.copy1 {font-size: 20px;}
	.copy2 {font-size: 26px;}
#detail{display:flex;}
.slide{width:50%;}
ul,li{list-style: none;}
.info{margin-left: 8vw;float: left;margin-top: 5vw;}
.info li{margin-bottom:1.5vw;}
.info1{font-size: 1.5vw;}
.info2{font-size: 1.25vw;margin-left: -1em;}
.info3{font-size: 0.72vw;}
.info4{width: 50%;padding-right: 8vw;}
.photo5{width: 16vw;}
.btn1{margin-left: 8vw;width: 68%;}
.btn2{text-align: center;border: solid 1px #ccc;width: 20%;padding: 0.5vw;margin: 0 auto;display: block;}
.txt1{text-align: center;padding: 7vw 0 3vw;font-size: 1.4vw;}
.setumei{border-bottom: 1px solid #ccc;padding:2.5vw 0;}
.title,.info,.setumei1,.setumei2{font-family: "Noto Serif JP", serif;}
.btn2,.setumei3,.setumei4,.setumei5{font-family: "Noto Sans JP", "Roboto", sans-serif;}
.setumei1 li{font-size: 1.6vw;margin-bottom: 0.8vw;}
.setumei2 li{font-size: 0.8vw;margin-bottom: 0.4vw;}
.setumei3 li{font-size: 0.8vw;margin-bottom: 0.4vw;}
.setumei4 li{font-size: 0.8vw;margin-bottom: 0.4vw;}
.setumei5 li{font-size: 0.7vw;margin-bottom: 0.35vw;}
li.setumei2-1{font-size: 1vw;margin-bottom: 0.5vw;}
li.setumei2-2{padding-left: 1.7em;}
li.setumei-title{font-size: 0.85vw;margin-bottom: 0.45vw;border: 1px solid #ccc;padding: 0.3vw;width: 5vw;text-align: center;}
.setumei5{border: none;}
li.setumei-link{font-size: 0.6vw;float: right;text-decoration: underline;}
.osusume{display: flex;justify-content: center;background:#ffece0;}
.osusume li{margin: 0 1vw;width: 15%;}
li.info3-1{float: right;margin-right: -11.5vw;}
}

.pc_only{display: block;}
.sp_only{display: none;}

@media all and (-ms-high-contrast: none) {
	main {
		display: block;
		background-position: center top, center top;
		background-attachment: scroll, scroll;
	}
}


/* ===================== sp ===================== */

@media screen and (max-width: 768px) {
	
	#series nav {width: 100%; height: auto; margin: 0 auto;}
	#series nav ul {margin: 0; padding: 0; list-style-type: none;}
	#series nav li {width: 100%; height: auto; border-bottom: solid 1px #eee;}
	#series nav li img {width: 100%; height: auto;}
	#series nav li span {
		display: block; height: 4rem; padding-left: 2rem; line-height: 4rem; font-size: 15px; box-sizing: border-box;
		background: url("/common/images/common/icon1.svg") no-repeat right 2rem center;
		background-size: 6px 10px;
	}
	
	#series.clarity nav li:nth-of-type(1) span,
	#series.clarity nav li:nth-of-type(2) img,
	#series.clarity nav li:nth-of-type(3) img,
	#series.whitening nav li:nth-of-type(1) img,
	#series.whitening nav li:nth-of-type(2) span,
	#series.whitening nav li:nth-of-type(3) img,
	#series.support nav li:nth-of-type(1) img,
	#series.support nav li:nth-of-type(2) img,
	#series.support nav li:nth-of-type(3) span {
		display: none;
	}
	
	.title {position: relative; width: 100%; min-height: auto; margin: 0 auto; padding: 5% 0; background-color: #fff; text-align: center;}
	.title-body {position: relative;}
	.title-body h2 {
		margin-bottom: 1rem; padding-top: 1rem; font-size: 22px; line-height: 2em; color: #707070;
		background: url("/common/images/lineup/title_bg.svg") no-repeat 16% top; background-size: auto 120%;
	}
	.title-body p.copy {
		text-align: center;
		/* font-size: 16px; */
		font-size: 3.9vw;
	}
	.title-body p.link {display: none; width: 130px; height: 26px; line-height: 26px; margin: 2rem auto 0; border: solid 1px #707070; font-size: 12px; background: url("/common/images/common/icon1.svg") no-repeat right 10px center; background-size: 10px 12px;}
	.title-body p.link a {display: block; width: 100%; height: 100%; padding-left: 20px; box-sizing: border-box;}
	
	/*contents
	#list, #detail {width: 100%; background: url("/common/images/common/contents_bg_sp.jpg") repeat-y center top; background-size: 100%; background-attachment: fixed;}
	main.whitening #list, main.whitening #detail {width: 100%; background: url("/common/images/common/contents_whitening_bg_sp.jpg") repeat-y center top; background-size: cover; background-attachment: fixed;}*/
	
	#list-body {width: 90%; margin: 0 auto; padding: 3rem 0;}
	.lineup-cate, .lineup {display: inline-block; vertical-align: top;}
	.lineup-cate {
		/* display: block; */
		justify-content: space-between;
		margin: 3rem 0 0;
	}
	.lineup-cate h3 {
		margin-bottom: 1rem;
		padding-bottom: 1rem;
		font-size: 15px;
		color: #ea6d5e;
		border-bottom: solid 1px #ea6d5e;
	}
	.lineup {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 48%;
		margin: 0 0 2rem;
		/* background-color: rgba(255,255,255,.5); */
	}
	/* .lineup:before {content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 10rem; background-color: #fff; z-index: 0;} */
	.lineup .pic {position: relative; width: 100%; height: auto; margin-bottom: 1rem; z-index: 1;}
	.lineup .pic img {width: 100%; height: auto;}
	.lineup h4 {font-size: 13px; text-align: center; font-weight: normal; line-height: 1.4em;}
	.lineup .sub {margin: .5rem 0 1rem; font-size: 11px; text-align: center; color: #ea6d5e;}
	.lineup .sub span {display: inline-block; vertical-align: baseline; height: 16px; line-height: 14px; margin-left: 10px; padding: 0 5px; font-size: 10px; border: solid 1px #ea6d5e;}
	.lineup .txt {
		width: 100%;
		padding: 0 5%;
		font-size: 11px;
	}
	.lineup .capacity {
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 84%;
		/* height: 3.5rem; */
		line-height: 1.5rem;
		/* margin: 2rem auto 0; */
		padding: 2% 3%;
		background-color: #969696;
		color: #fff;
		text-align: right;
		font-size: 10px;
		font-weight: bold;
	}
	.lineup .capacity_tax {width: 90%; height: 2rem; line-height: 2rem; margin: 2rem auto 0; background-color: #969696; color: #fff; text-align: center; font-size: 10px; font-weight: bold;}
	.lineup .ex {
		width: 90%;
		height: 2rem;
		margin: 1rem auto 0;
		line-height: 2rem;
		color: #ea6d5e;
		font-size: 10px;
		border: solid 1px #ea6d5e;
		border-radius: 1rem;
		text-align: center;
		letter-spacing: -.05em;
	}
	
	.lineup-cate.one {display: inline-block; width: 46%;}
	.lineup-cate.one .lineup {width: 100%;}
	
	/*.lineup-cate .lineup:nth-child(2n) {margin-left: 8%;}*/
	.clarity .lineup-cate:nth-of-type(1) {margin-top: 0;}
	.clarity .lineup-cate.one:nth-child(2n) {margin-right: 8%;}
	/* .whitening .lineup-cate:nth-child(odd),
	.support .lineup-cate:nth-child(odd) {margin-right: 6%;} */
	.whitening .lineup-cate:nth-of-type(1),
	.whitening .lineup-cate:nth-of-type(2) {margin-top: 0;}
	/*.whitening .lineup-cate:nth-of-type(5) {margin-right: 0;}*/

	.clarity .new {
		background-color: rgba(255,255,255,.8);
		border: 2px solid #DE4252;
		box-sizing: border-box;
	}
	.new .capacity{background-color: #DE4252 !important;}

	.clarity p.txt_cap {
		margin: 0 auto 20px;
		text-align: left;
	}
	.pc_only{display: none;}
	.sp_only{display: block;}
	
	/*横向きの際に適用*/
	@media only screen and (orientation : landscape) {
		.list-title p.copy {left: 50%;}
		.lineup:before {height: 15rem;}
	}

	.small {
		font-family: 'Hiragino Kaku Gothic Pro', "游ゴシック", YuGothic, 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
		font-size: 70%;
		color: #666666;
	}

	.lineup a,
	.lineup .lineup_nolink_body {
		padding-bottom: 60px;
	}
	.lineup a::before,
	.lineup .lineup_nolink_body::before {
		height: 150px;
	}
}

/*20240130 スライダーの追加*/
.splide.pic.splide--slide{
	position: relative;
}
.splide__arrows{
	position: absolute;
	z-index: 2222;
	left: 0;
	right: 0;
	top: 50%;
	bottom: 0;
	height: fit-content;
	display: flex;
	justify-content: space-between;
}

.splide__arrows.splide__arrow--prev{
	transform: rotate(180deg);
}
.splide__pagination {
	display: none!important;
}	

/*==================================================
20240717スライダーのためのcss
===================================*/
/*画像の横幅を100%にしてレスポンシブ化*/
.slick-slide img{
	width: 100%;
	height: auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}
.gallery img{
	width: 80%;
	height: auto;
}

/*メイン画像下に余白をつける*/

.gallery{
	margin:0 0 5px 0;
	margin: 50px 0 10px 8vw;
}

.gallery li{
list-style:none;
}


/*選択するサムネイル画像の設定*/

.choice-btn li{
	cursor: pointer;
	outline: none;
	background:#333;
	width:7.8vw!important;
	margin-right:0.8vw;
	list-style:none;

}

.choice-btn li img{
	opacity: 1;/*選択されているものは透過しない*/
}

.choice-btn li.slick-current img{
	opacity: 0.4;/*選択されていないものは透過40%*/
}

.choice-btn .slick-track {
	transform: unset !important;/*画面幅サイズ変更に伴うサムネイル固定*/
	margin-left: 8vw;
}


@media screen and (max-width: 768px) {
	.gallery img {width: 100vw; height: auto;}
	.gallery{margin: 50px 0 2vw;}
	.choice-btn .slick-track {margin-left:0;display: flex;justify-content: space-between;}
	.choice-btn li {width: 24vw !important;margin-right: 1.5vw;}
	.choice-btn li:nth-child(4) {margin-right: 0vw;}
	ul,li{list-style: none;}
	.info{margin-left: 0vw;float: left;margin-top: 16vw;}
	.info li{margin-bottom:2vw;}
	.info1{font-size: 4.6vw;}
	.info2{font-size: 3.7vw;margin-left: -0.5em;}
	.info3{font-size: 2.3vw;}
	.info4{width: 100%;padding-right: 0vw;}
	.photo5{width: 42vw;margin-right: -100px;margin-top: 10px;}
	.btn2{text-align: center;border: solid 1px #ccc;width: 100%;padding: 0.5vw;margin: 0 auto;display: block;}
	.txt1{text-align: center;  padding: 7vw 0 3vw;font-size: 4vw;}

	.setumei{border-bottom: 1px solid #ccc;padding:2.5vw 0;}
	.title,.info,.setumei1,.setumei2{font-family: "Noto Serif JP", serif;}
	.title{font-family: "Noto Serif JP", serif; margin-top: 10vw;}
	.btn2,.setumei3,.setumei4,.setumei5{font-family: "Noto Sans JP", "Roboto", sans-serif;}

	.setumei1 li{font-size: 3.6vw;margin-bottom: 3.6vw;}
	.setumei2 li{font-size: 2.4vw;margin-bottom: 1vw;}

	.setumei3 li{
		font-size: 2.6vw;
        	margin-bottom: 0vw;
        	text-indent: -1em;
        	padding-left: 1em;
        	padding-right: 1em;
	}

	.setumei4 li{font-size: 2.6vw;margin-bottom: 0vw;padding-right: 1em;}
	.setumei5 li{font-size: 1.6vw;margin-bottom: -1.5vw;}

	li.setumei2-1{font-size: 3vw;margin-bottom: 1vw;}
	li.setumei2-2{padding-left: 1.7em;}
	li.setumei-title{font-size: 2vw;margin-bottom: 2vw;border: 1px solid #ccc;padding: 0.3vw;width: 12vw;text-align: center;text-indent: 0em;}
	.setumei5{border: none;}
	li.setumei-link{font-size: 2.4vw;float: left;text-decoration: underline;margin-left: 2vw; margin-top: 4vw;}
	.osusume{display: inline-block;background:#ffece0;align-content: center;padding: 0 4vw;}
	.osusume li{margin: 4vw 2vw 0vw;float: left;width: 42vw;}
	.osusume li:nth-child(1),.osusume li:nth-child(2){margin: 0vw 2vw 0vw;}
	li.info3-1{float: right;margin-right: -11.5vw;}
        ul.info,ul.setumei{padding-left: 2vw;}
        ul.setumei3,ul.setumei4,ul.setumei5{padding-left: 3vw;padding-bottom: 14vw;}
	.setumei {padding: 7vw 0;}
	.contents,#index_contents{overflow-x:hidden;}
}