@charset "UTF-8";
/*リスト
 1:全体
 2:ヘッダ
 3:メイン
 4:フッタ
 5:その他共通パーツ
*/
/*----------------------------------------
 1:全体
----------------------------------------*/

/* 文字サイズ調整 */
/*.fs-l-page{
	font-size:1.1em;
}*/

body {
	color:#0e2c37;
	font-size: 1em;
	line-height: 1.2em;
	font-family: "Noto Sans JP", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	-webkit-text-size-adjust: none;
	box-sizing: border-box;
	font-weight: 300;
}
@media (max-width: 768px) {
	body{
		font-size: 2.5vw;
	}
}
/*リンク*/

a {
	color:#0e2c37;
}
a:visited {
	color:#0e2c37;
}
a:hover {
	text-decoration:underline;
	opacity: 0.7;
}
a:active {
	color:#0e2c37;
}

/*画像*/

img {
	-ms-interpolation-mode: bicubic;
	max-width: 100%;
	vertical-align: top;
}

@media (max-width: 768px){
	img{
		max-width: 100%;
		width: 100%;
	}
}

/*common layout*/

.container {
	*zoom: 1;
	margin: 0 auto;
	width: 980px;
	min-width:980px;
}
@media (min-width: 769px) and (max-width:1024px) {
	.container {
		width: 100%;
		min-width: 100%;
	}
}
@media (max-width: 768px) {
	.container {
		width: 100%;
		min-width: 100%;
	}
}
.contents {
	*zoom: 1;
	margin: 0 auto;
	width: 100%;
	min-width:980px;
}
.contents:before, .contents:after {
	content: " ";
	display: table;
}
.contents:after {
	clear: both;
}

@media (min-width: 769px) and (max-width:1024px) {
	.contents{
		min-width: 100%;
	}
}
@media (max-width: 768px){
	.contents{
		min-width: 100%;
	}
}
@-ms-viewport {
	width: device-width;
}
h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd {
	margin: 0;
}
ul, ol {
	padding: 0;
}
a {
	text-decoration: none;
}



/*FutureShop設定＆表示打消し*/

/*メインエリア非表示*/
.fs-l-main { display: none }

/*パンくずリスト非表示*/
.fs-c-breadcrumb { display: none }


/*----------------------------------------
 2:ヘッダ
----------------------------------------*/
.top__snsbtn{
	position: fixed;
	right: 0;
    top: 0;
	height: 100vh;
	z-index: 1001;
}
.top__snsbtn.is--hide{
	transition: 0.5s;
	opacity: 0;
}
.top__snsbtn.is--show{
	transition: 0.5s;
	opacity: 1;
}
.top__snsbtn__list{
	position:relative;
	list-style: none;
	top:50vh;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.top__snsbtn__item{
	padding: 25px;
}
.top__snsbtn__item a{
	display: block;
	width:37px;
}
@media (max-width: 1114px){
	.top__snsbtn{
		display: none;
	}
}
/*----------------------------------------
 3:メイン
----------------------------------------*/
.top__section{
	padding-bottom: 210px;
}

@media (max-width: 768px){
	.top__section{
		padding-bottom: 30vw;
	}
}
/*メインビジュアル*/
.top__mainvisual{
	padding-bottom: 0;
}
.top__mainvisual .top__mainvisual__video {
	position:relative;
	width:100%;
	padding-top:601px;
}
.top__mainvisual .top__mainvisual__video iframe{
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
	overflow: hidden;
}
@media (min-width: 769px) and (max-width:1024px) {
	.top__mainvisual .top__mainvisual__video {
		padding-top:61vw;
	}
}
@media (max-width: 768px){
	/*16:9比率*/
	.top__mainvisual .top__mainvisual__video {
		padding-top:177.777vw;
	}
	.main_video{
		width:100%;
	}
}

.movie-pc {
	display: block;
}
.movie-sp {
	display: none;
}

@media (max-width: 768px){
	.movie-pc {
		display: none;
	}
	.movie-sp {
		display: block;
	}
	
}
@media (min-width: 769px){
	.movie-pc img,
	.movie-pc video{
		border-radius: 20px;
	}
}
/*ブランドタイトル*/
.top__brandtitle {
	font-size: 1.5em;
	font-weight: normal;
	text-align: center;
	line-height: 1.8em;
	letter-spacing: .05em;
	padding-top: 20px;
	padding-bottom: 130px;
	font-weight:200;
	color: #b1b3b2;
}
@media (max-width: 768px){
	.top__brandtitle {
		padding-top: 3vw;
		font-size: 1em;
		padding-bottom: 18.2vw;
		letter-spacing: 0;
	}
}
/*カテゴリー*/
.top__category{
	width: 980px ;
	margin:auto;
}
.top__mainvisual + .top__category{
	padding-bottom: 180px;
}
.top__category .top__category__list {
	font-size: 0;
}
.top__category .top__category__list .top__category__item{
	display: inline-block;
	padding-bottom: 75px;
	vertical-align: top;
	width:25%;
	text-align: center;
}
.top__category .top__category__list .top__category__item:nth-last-child(-n+6){
	padding-bottom: 0;
}

.top__category .top__category__list .top__category__item a{
	/*display: inline-block;*/
}
.top__category .top__category__list .top__category__item a:hover{
	text-decoration: none;
}
.top__category .top__category__list .top__category__item .top__category__item__largetxt{
	display: block;
	line-height: 1em;
	padding-bottom: 8px;
	font-size: 24px;
	letter-spacing: 0.2em;
	
	font-family: menco, sans-serif;
	font-weight: 500;
	font-style: normal;
	
	color:#4f7e98;
	
	border-bottom: dashed 1px #0e2c37;
	width:80%;
	margin:auto;
}
.top__category .top__category__list .top__category__item .top__category__item__smalltxt {
	display: block;
	letter-spacing: 0em;
	font-size: 12px;
	width:80%;
	margin: 1em auto 0;
}
@media (max-width: 768px){
	.top__category{
		width: 90%;
		margin: 0 auto;
	}
	.top__mainvisual + .top__category{
		padding-bottom: 20vw;
	}
	.top__category .top__category__list .top__category__item{
		width: 25%;
		padding-bottom: 12vw;
	}
	.top__category .top__category__list .top__category__item .top__category__item__largetxt{
		font-size: 4vw;
		letter-spacing: 0.5px;
	}
	.top__category .top__category__list .top__category__item .top__category__item__smalltxt {
		font-size: 2.2vw;
		letter-spacing: 0;
		padding-left: 0.2em;
	}
}

/*line up、共通タイトル*/
.top__lineup {
	padding-bottom: 188px;
}
h2.top__lineup__title,
h2.top__lineup02__title,
h2.top__snap__title,
h2.top__ranking__title,
h2.top__information__title {
	font-weight: normal;
	text-align: center;
	font-size: 4.5em;
	/*letter-spacing: 0.27em;*/
	text-indent: 0.1em;
	line-height: 1.4em;
	padding-bottom: 53px;
	
	font-family: learning-curve, sans-serif;
	font-weight: 700;
	font-style: normal;
	
	color:#4f7e98;
}
@media (max-width: 768px){
	.top__lineup {
		padding-bottom: 26vw;
	}
	h2.top__lineup__title,
	h2.top__lineup02__title,
	h2.top__snap__title,
	h2.top__ranking__title,
	h2.top__information__title {
		padding-bottom: 7vw;
		font-size: 3.5em;
		/*letter-spacing: 0.24em;*/
	}
	h2.top__lineup__title::after,
	h2.top__lineup02__title::after,
	h2.top__snap__title::after,
	h2.top__ranking__title::after{
		display: none;
	}
}

/*itemlist*/
.top__itemlist{
	/*フレックスボックスの設定*/
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	/*フレックスボックスの要素を左寄せ*/
	justify-content: left;

	text-align: left;
	
	list-style: none;
	font-size: 0;
}
.top__itemlist__item {
	/*列数と間の余白の設定*/
	width: calc( ( 100% - 80px ) / 3 );
	margin-right: 40px;
	
	font-size:1rem;
	margin-bottom:30px;
}
.top__itemlist__item:nth-last-child(-n+3){
	margin-bottom:0;
}
/*右端のマージンをゼロ設定*/
.top__itemlist__item:nth-child( 3n ),
.top__itemlist__item:last-child {
	margin-right: 0;
}

@media (max-width: 768px) {
	.top__itemlist{
		width:97%;
		margin:auto;
	}
	.top__itemlist__item {
		/*列数と間の余白の設定*/
		width: calc( ( 100% - 1vw ) / 2 );
		margin-right: 1vw;
	}
	.top__itemlist__item:nth-child( 3n ){
		margin-right: 1vw;
	}
	.top__itemlist__item:nth-child( 2n ),
	.top__itemlist__item:last-child {
		margin-right: 0;
	}
	.top__itemlist__item:nth-last-child(-n+2){
		margin-bottom:0;
	}
	/*.top__itemlist__item:nth-child(n+9){
		display: none
	}*/
}

.top__itemlist__item img{
	width:100%;
	padding-bottom: 0.8em;
}
.top__itemlist__item a{
	text-decoration: none;
	display: block;
}
.top__itemlist__mark{
	font-family: menco, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 2em;
	line-height: 1em;
	padding-bottom: 0.5em;
	letter-spacing: 0.2em;
	color:#4f7e98;
}
@media (max-width: 768px){
	.top__itemlist__mark{
		font-size: 1.5em;
		padding-bottom: 0.35em;
		letter-spacing: 0.15em;
	}
}

.top__itemlist__date {
	font-size: 1.2em;
	letter-spacing: 0.125em;
	font-family: 'Noto Serif JP', serif;
	padding-bottom: 0.5em;
}
.top__itemlist__text {
	font-size: 1.2em;
	font-family: 'Noto Serif JP', serif;
	padding-bottom: 0.5em;
}
.top__itemlist__price{
	font-size: 1.2em;
	letter-spacing: 0.125em;
	font-family: 'Noto Serif JP', serif;
}

@media (max-width: 768px){
	
	.top__itemlist {
		padding:0 0 0 0;
	}
	.top__itemlist.is--pc{
		display: none;
	}
	.top__itemlist.is--sp{
		display: block;
	}
	.top__itemlist__item {
		font-size: 2.5vw;
	}
	.top__itemlist__item img{
		padding-bottom: 2.75vw;
	}
	.top__itemlist__text {
		font-size: 1em;
		line-height: 1.6em;
		padding-bottom: 0.35em;
	}
	.top__itemlist__date,
	.top__itemlist__price{
		font-size: 0.8em;
		line-height: 1.6em;
		padding-bottom: 0.35em;
		letter-spacing: 0.03em;
	}
}
.btn__more{
	padding-top: 134px;
	font-weight: normal;
	text-align: center;
	font-size: 1.5em;
}
.btn__more a{
	letter-spacing: 0.23em;
	text-indent: 0.23em;
	display: block;
	margin: 0 auto;
	border: 1px solid #0e2c37;
	width: calc(680px - 40px);
	padding: 20px;
}

.btn__more a:hover{
	text-decoration: none;
}
@media (max-width: 768px){
	.btn__more{
		padding-top: 16.3vw;
	}
	.btn__more a{
		letter-spacing: 0.4em;
		text-indent: 0.1em;
		line-height: 1em;
		width: calc(90% - 5vw);
		padding: 2.5vw;
	}
	.btn__more a:after{
		width: 9.2vw;
		height: 4vw;
		margin:3.6vw auto;
	}
}

/*itemlist02*/
/*pc*/
@media (min-width: 769px){
	.top__lineup02__list{
		width:100%;
		max-width:980px;
		margin:auto;
	}
	.top__lineup02__list.top__itemlist,{
		
	}
	.top__lineup02__list .top__itemlist__item {
		/*列数と間の余白の設定*/
		width: calc( ( 100% - 30px ) / 4 );
		margin-right: 10px;

		font-size:1rem;
		margin-bottom:30px;
	}
	.top__lineup02__list .top__itemlist__item:nth-last-child(-n+4){
		margin-bottom:0;
	}
	/*右端のマージンをゼロ設定*/
	.top__lineup02__list .top__itemlist__item:nth-child( 4n ),
	.top__lineup02__list .top__itemlist__item:last-child {
		margin-right: 0;
	}
}
@media (min-width: 769px) and (max-width:1024px) {
	
}
@media (max-width: 768px){
	.top__lineup02__list{
		width:97%;
		margin:auto;
	}
	.top__lineup02__list.top__itemlist a:before{
		font-size: 1.5em;
		padding-bottom: 2vw;
	}
}








/*information*/
.top__information {
	padding: 5%!important;
	margin: 0 auto 194px;
	text-align: center;
	
	width:80%;
	max-width:500px;
	
	border:1px solid #0e2c37;
}
.top__information__list {
	text-align: center;
	list-style: none;
}
.top__information__list .top__information__item {
	padding: 0.9em 0;
	letter-spacing: 0.18em;
}
.top__information__list .top__information__item:last-child {
	margin-bottom: 0;
}
.top__information__list .top__information__item a{
	/*display: inline-block;*/
	border-bottom: 1px solid #494646;
}
.top__information__list .top__information__item a:hover{
	text-decoration: none;
}

.top__information__list .top__information__item strong{
	font-weight: 300;
}


@media (min-width: 769px){
	h2.top__information__title{
		/*border-bottom: 2px solid #494646;*/
		/*display: inline-block;*/
		text-align: center;
		padding-bottom: 0.35em;
		margin-bottom: 24px;
		/*letter-spacing: 0.3em;*/
	}
	.top__information__list .top__information__item {
		font-size:1.3em;
	}
}
@media (max-width: 768px){
	.top__information {
		padding-bottom: 25vw;
		text-align: center;
	}
	.top__information__list .top__information__item {
		/*margin: 0 auto;
		width: calc(90% - 2em);
		border: 1px solid #494646;
		margin-bottom: 9vw;
		padding: 0;*/
	}
	.top__information__list .top__information__item:last-child {
		/*margin-bottom: 0;*/
	}
	.top__information__list .top__information__item a{
		/*border: none;
		display: block;
		padding: 1em;*/
	}
}
/* ranking */
.top__ranking{
	counter-reset: ranking;
	margin-bottom:150px;
}
.top__ranking_inner{
	background-color: #eff5f8;
	padding: 50px 0 80px;
}
.nami img{
	width:100%;
	line-height:0;
}
.nami_upper{
	margin-bottom:-1px;
}
.nami_bottom{
	margin-top:-1px;
}
.top__ranking__list.top__itemlist a:before{
	content: "No." counter(ranking);
	counter-increment: ranking;
	display: block;
	text-align: center;
	font-size: 1.38em;
	line-height: 1.4em;
	padding-bottom: 20px;
	font-family: 'Noto Serif JP', serif;
}
/*pc*/
@media (min-width: 769px){
	.top__ranking__list{
		width:100%;
		max-width:980px;
		margin:auto;
	}
	.top__ranking__list.top__itemlist,{
		
	}
	.top__ranking__list .top__itemlist__item {
		/*列数と間の余白の設定*/
		width: calc( ( 100% - 30px ) / 4 );
		margin-right: 10px;

		font-size:1rem;
		margin-bottom:30px;
	}
	.top__ranking__list .top__itemlist__item:nth-last-child(-n+4){
		margin-bottom:0;
	}
	/*右端のマージンをゼロ設定*/
	.top__ranking__list .top__itemlist__item:nth-child( 4n ),
	.top__ranking__list .top__itemlist__item:last-child {
		margin-right: 0;
	}
}
@media (min-width: 769px) and (max-width:1024px) {
	
}
@media (max-width: 768px){
	.top__ranking__list{
		width:97%;
		margin:auto;
	}
	.top__ranking__list.top__itemlist a:before{
		font-size: 1.5em;
		padding-bottom: 2vw;
	}
}





/*coordinate*/
.top__coordinate{
	padding-bottom: 253px;
}

@media (max-width: 768px){
	.top__coordinate{
		padding-bottom: 19vw;
	}
	
}
.top__coordinate__list{
	width: 910px;
	margin: 0 auto;
	display: none;
}
.top__coordinate__list.slick-slider{
	display: block;
}
@media (min-width: 769px) and (max-width:1024px) {
	.top__coordinate__list{
		width:90vw;
	}
}
@media (max-width: 768px){
	
	.top__coordinate__list{
		width:90vw;
	}
	
}
.top__coordinate__item{
	padding: 0 7px;
}
.top__coordinate__item img{
	width: 100%;
	border-radius: 15px;
}
.top__coordinate__list .slick-dots{
	bottom: -44px;
}
.top__coordinate__list .slick-dots li{
	margin:0 6px;
}
.top__coordinate__list .slick-dots li button:before{
	font-size: 10px;
	opacity: 0.2;
	color: #b1b3b2;
}
.top__coordinate__list .slick-dots li.slick-active button:before{
	opacity: 0.5;
	color: #74b1c4;
}
.top__coordinate__list .slick-arrow{
	width: 25px;
	height: 27px;
}
.top__coordinate__list .slick-arrow:before{
	content: "";
	width: 25px;
	height: 27px;
	display: block;
	opacity: 1;
}
.top__coordinate__list .slick-prev:before{
	background-image: url(https://shirai.itembox.design/item/common/miolite/top/images/top/btn_slide_prev.png);
	background-size: contain;
	background-repeat: no-repeat;
}
.top__coordinate__list .slick-next:before{
	background-image: url(https://shirai.itembox.design/item/common/miolite/top/images/top/btn_slide_next.png);
	background-size: contain;
	background-repeat: no-repeat;
}
.top__coordinate__list .slick-prev{
	left: -22px;
}
.top__coordinate__list .slick-next{
	right: -33px;
}
@media (max-width: 768px){
	.top__coordinate__item{
		padding: 0;
	}
	.top__coordinate__list .slick-dots{
		bottom: -10vw;
	}
	.top__coordinate__list .slick-dots li{
		margin: 0 2vw;
		width:auto;
		height: auto;
	}
	.top__coordinate__list .slick-dots li button:before{
		width: 2vw;
		height: 2vw;
		line-height: 3vw;
		font-size: 3vw;
	}
}

/*snap*/
.top__snap{
}

.top__snap__container{
	width: 100%;
}

.top__snap__list{
	list-style: none;
	font-size: 0;
	display: flex;
}
.top__snap__item{
	display: inline-block;
	font-size: 1rem;
	width: 25%;
	padding-right: 12px;
}
.top__snap__item:nth-child(4n){
	padding-right: 0;
}
.top__snap__item img{
	width: 100%;
}
@media (min-width: 769px){
	.top__snap__title{
	}
	.top__snap__item:nth-child(n+5){
		display: none;
	}
	.top__snap__item:nth-last-child(-n+4){
		padding-bottom: 0;
	}
}
@media (max-width: 768px){
	
	.top__snap{
	}
	.top__snap__list{
		flex-wrap: wrap;
	}
	.top__snap__item{
		width: 26%;
		padding: 0vw 3.3% 3.5vw 4%;
	}
	.top__snap__item:nth-last-child(-n+3){
		padding-bottom: 0;
	}
	.top__snap__item:nth-child(4n){
		padding-right: 3.3%;
	}
}

/*----------------------------------------
 4:フッター
----------------------------------------*/

.footer{
	background: #eff5f8;
	width: 100%;
	padding: 60px 0;
}
.footer_inner{
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
}
.footer_menu{
	width: 100%;
}
.footer_menu dl{
	width: 100%;
	letter-spacing: -.40em;
}
.footer_menu dt{
	padding-right: 30px;
	letter-spacing: normal;
	display: inline-block;
	vertical-align: top;
	width: 25%;
	box-sizing: border-box;
}
.footer_menu dt ul{
}
.footer_menu dt li{
	list-style-type: none;
	font-size: 12px;
	letter-spacing: .1em;
	line-height: 1.5;
}
.footer_menu dt li a{
	text-decoration: none;
	display: block;
	padding-bottom: 4px;
}
.footer_menu dd{
	letter-spacing: normal;
	display: inline-block;
	vertical-align: top;
	width: 25%;
	box-sizing: border-box;
}
.footer_menu dd p{
	width: 100%;
}
.footer_menu dd p img{
	width: 100%;
}
.footer_ttl{
	color: #74b1c4;
	font-size: 18px;
	padding-bottom: 12px;
	letter-spacing: .05em;
	font-family: menco, sans-serif;
	font-weight: 500;
	font-style: normal;
}
.footer_text{
	font-size: 12px;
	padding-bottom: 10px;
	letter-spacing: .1em;
	line-height: 1.5;
}
.footer_text2{
	font-size: 8px;
	padding-bottom: 10px;
	letter-spacing: .1em;
}
.footer_copy{
	position: absolute;
	bottom: 0;
	left: 0;
}
.footer_copy ul{
}
.footer_copy li{
	list-style-type: none;
}
.footer_copy li img{
	width: 160px;
	padding-bottom: 15px;
}


@media screen and (max-width:640px) {
	.footer{
		padding: 30px 0;
	}
	.footer_ttl{
		padding-bottom: 1em;
	}
	.footer_menu dt{
		padding-right: 0px;
		width: 100%;
		padding-bottom: 30px;
	}
	.footer_menu dd{
		width: 100%;
	}
	.footer_menu dd p{
		width: 80%;
		margin: 0 auto;
	}
	.footer_menu dd p img{
		width: 100%;
	}
	.footer_copy{
		position: static;
		bottom: auto;
		left: auto;
		text-align: center;
		padding-top: 60px;
	}
	.footer_copy li{
	}
	.footer_copy li img{
		width: 45%;
		max-width:250px;
		margin-bottom:1em;
	}	
}



/*----------------------------------------
 ex:パンくずリスト　
----------------------------------------*/
.footer_breadcrumbs{
	text-align: center;
	padding: 9px 10px 14px;
	width: 90%;
	margin: 0 auto;
}
.footer_breadcrumbs ol{
	padding: 0;
	margin: 0;
}
.footer_breadcrumbs li{
	list-style-type: none;
	display: inline;
}
.footer_breadcrumbs a{
	text-decoration: none;
}
.footer_breadcrumbs a:hover{
	text-decoration: underline;
}

@media screen and (max-width:640px) {
	.footer_breadcrumbs {
			text-align: center;
			font-size: 11px;
			padding: 7px 0px 12px;
	}
}


/*google adwords崩れ防止*/

iframe[name="google_conversion_frame"]{
	position: absolute;
	top: 0;
}
iframe[title="sprocket control"]{
	position: absolute;
	top: 0;
}


/*---   スライド　ドット削除   ---*/
.top__coordinate.top__section {
	padding-bottom: 145px;
}

.top__coordinate.top__section .slick-dots {
	display: none;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ex.slick
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.slider {
	width: 980px;
	max-width:90%;
	margin: 0 auto;
}
.slider div {
	width: 100%;
	height: auto;
	border-radius: 25px;
}
@media screen and (max-width: 768px){
	.slider div {
		border-radius: 15px;
	}
}
.slider img {
	width: 100%;
	height: auto;
}

.slider-dots {
 /* width: 50%;*/ /*htmlで指定*/
  margin: 30px auto 0;
  padding: 0;
  text-align: center;
  list-style: none;
}

.slider-dots li {
    display: inline-block;
    /*width: calc(25% - 8px);/* プログレスバーの横幅はスライドの枚数に合わせて調整してください *//*htmlで指定*/
    margin: 0 2px;
}
.slider-dots button {
    position: relative;
    width: 100%;
    height: 4px;
    border: 0;
    background-color: #f2f2f2;
    font-size: 0;
}
.slider-dots button:after {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	display: block;
	width: 0%;
	height: 100%;
}
.slider-dots .slick-active button:after{
	background-color: #adcfdb;
	animation: progress 4s linear forwards;
}

@keyframes progress {
  from {
    width: 0%;
  }
  
  to {
    width: 100%;
  }
}