@charset "utf-8";

/*------------------------------------------------------------
LP
------------------------------------------------------------*/

/*パンくずリスト*/
.bread-crumbs .bread-crumbs-inner{
	display: none;
}


/*パンくずリスト*/
.bread-crumbs .bread-crumbs-inner{
	display: none;
}
main{
	width: 100%;
	/*max-width: 1400px;*/
	max-width: 2000px;
	/*font-family: "linotype-sabon","Times New Roman", Times,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;*/
	font-family: "linotype-sabon","Times New Roman", Times, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", serif;
	margin: 0 auto;
	color: #404040;
	font-size: 14px;
	/*overflow: hidden;*/
	 overflow:clip;/*画面ブレを固定させる。子要素position: sticky;が利かなくなるのでhiddenは使用しない。*/
}
main h2{
		font-size: 27px;
		/*font-style: italic;*/
		font-family: "linotype-sabon","Times New Roman", Times, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", serif;
		display: block;
		color: #333333;
		text-align: center;
		margin: 0 auto;
		padding: 100px 0 50px;
	}

main img{
	width: 100%;
}

/*! pc & tb 
------------------------------------------*/
@media screen and (min-width: 641px) {
	
	.sp_view{
		display: none;
	}

	.main_slider_wrap{
		max-width: 1400px!important;
		margin: 0 auto;
		overflow: hidden;
	}


/* pc & tb  スライダーのためのcss
======================*/
.slider {
	max-width: 1400px;
	margin: 0 auto;
 /* position:relative;
	z-index: 1;*/
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	/*height: 100vh;*/
	/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/

/*.slider-item01 {
    background:url("/photo/page/250818_online5th/img/main_img1.jpg");
}

.slider-item02 {
    background:url("/photo/page/250818_online5th/img/main_img2.jpg");
}

.slider-item03 {
    background:url("/photo/page/250818_online5th/img/main_img3.jpg");
}*/

.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    /*height:100vh;*//*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

/*ドットナビゲーションの設定*/

.slick-dots {
	position: relative;
	z-index: 3;
  text-align:right;
	margin:0 1.0715vw;/*ドットの位置*/
	margin-top: 15px;
}

.slick-dots li {
  display:inline-block;
	margin:0 4px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:7px;/*ドットボタンのサイズ*/
    height:7px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#bfbfbf;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#000000;/*ドットボタンの現在地表示の色*/
}



/*スライダー swiper
---------------*/
.sec_slider{
/*	position: absolute;
	bottom: calc(50/1030*100%);
	right: 0;
  left: 0;*/
  margin: 0 auto;
	overflow: hidden;
}

.swiper{
  width: 100%;
	max-width: 3000px!important;
}
/*スライドの動きをスムーズにする・自動で流れ続ける無限ループスライダー*/
main .swiper-wrapper{
	transition-timing-function: linear;
}
.swiper-slide{
	/* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
	/*margin-left: 30px;*/
/*  color: #ffffff;
  width: 270px;
  height: 100%;
  text-align: center;
  line-height: 270px;*/
}
.swiper-slide img{
	width: 100%;
	
}
/*.slide_up{
	margin-top: 60px;
}*/



/*setion
---------------*/
.sec_wrap{
	width: 100%;
	margin: 0 auto;
	padding: 150px 0 0;
}
.sec_ttl{
	font-size: 25px;
	text-align: center;
	padding-bottom: 60px;
}
.sec_subttl{
	font-size: 21px;
	text-align: center;
	margin-top: 90px;
	padding-bottom: 50px;
}
.sec_txt{
	font-size: 14px;
	width: 560px;
	margin: 0 auto 40px;
	line-height: 2.5;
	font-family: "Noto Serif JP", serif;
  	font-optical-sizing: auto;
  	font-style: normal;
}



/*main
---------------------*/
.main_wrap{
	margin: 50px 0 0;
	padding: 80px 0 0;
	background-color: #f2f0e7;
}

.main_box{
	width: 90%;
	max-width: 1000px;
/*	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;*/
	margin: 0 auto;
	padding: 0 0 80px;
}

.main_ttl{
	width: calc(426/1000 * 100%);
	margin: 0 auto;
}
.main_txt{
	width: calc(560/1000 * 100%);
	padding: 80px 0 0;
	font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
	color: #333333;
	margin: 0 auto;
	text-align: center;
}
.main_txt p{
	line-height: 2.7;
	font-size: 14px;
}
	
.main_always{
	width: calc(320/560 * 100%);
	margin: 0 auto;
	padding: 25px 0 20px;
}

.main_always .cls-1 {
	fill: none;
}

.main_always .cls-2 {
	fill: none;
	stroke: #fff;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 15px;
}

/*index
---------------------*/
.index_wrap{
	margin: 0 auto;
	padding-bottom: 80px;
	text-align: center;
	color: #333333;
	background-color: #f2f0e7;
}
.index_ttl{
	font-size: 15px;
	margin-bottom: 30px;
}
.index_container{
	margin: 0 auto;
	text-align: center;
}

.index_box{
	width: 80%;
	max-width: 480px;
	display: flex;
	flex-wrap: nowrap;/*改行許可*/
	justify-content: space-between;
	align-items: flex-start;/*上揃え*/
	align-items: center;
	margin: 0 auto;
	margin-bottom: 10px;
	background: url("/photo/page/250818_online5th/img/index_line.jpg") repeat-x;
	background-position: left center;
	background-size: 5px auto;
	margin-bottom: 15px;
}
.list_en{
	text-align: right;
	font-weight: 400;
	background-color: #f2f0e7;
	padding-right: 15px;
}
.list_jp{
	text-align: left;
	font-size: 14px;
	font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
	background-color: #f2f0e7;
	padding-left: 15px;
	font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.list_ttl{
	font-size: 18px;
	font-weight: normal;
	padding-left: 40px;
	background: url("/photo/page/250818_online5th/img/arrow.svg");
	background-size: 40px;
	background-position: 0 center;
	background-repeat: no-repeat;
	background-color: #f2f0e7;
	padding-right: 15px;
}
.index_box_subttl{
	font-size: 16px;
	padding-left: 40px;
	width: 80%;
	max-width: 480px;
	display: flex;
	flex-wrap: nowrap;/*改行許可*/
	justify-content: space-between;
	align-items: flex-start;/*上揃え*/
	align-items: center;
	margin: 0 auto;
	margin-bottom: 10px;
}
.subttl_wrap{
	padding-bottom: 15px;
}

/*Top Picks
---------------------*/
.picks_wrap{
	padding: 100px 0 0;
	background-color: #ffffff;
}
.picks_box{
	padding: 0 0 0;
}

/*Limited Item
---------------------*/
.limited_wrap{
	background-color: #ffffff;
	padding-top: 150px;
}
.lim_sec{
	padding: 0 0 120px;
}
.limited_inner{
	width: 94%;
	max-width: 1200px;
	margin: 0 auto;
}
.lim_subttl{
	height: 50px;
	text-align: left;
	margin-left: 0;
	margin-right: auto;
	border-left: 1px solid #888a8b;
	line-height: 1;
	padding-left: 20px;
	margin-bottom: 40px;
}
.subttl_en{
	font-size: 21px;
}
.subttl_jp{
	font-size: 14px;
	padding-top: 10px;
	font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.limbox_ttl{
	font-size: 21px;
}


.limited_imgbox_w{
	width: 100%;
	position: relative;
}
.limited_imgbox_w:before{
	content: "";
	display: block;
	padding-top: 185%;/* limited_imgboxの高さ(1330px+520px)÷横幅1000px×100*/
}
.limited_imgbox_w	.limbox_ttl{
	position: absolute;
	top: calc(65/1330 * 100%);
  left: 50%;
  transform: translateX(-50%);
	z-index: 105;
}
.lim_w1{
	width: calc(480/1000 * 100%);
	position: absolute;
	top: 0;
  left: 0;
}
.lim_w2{
	width: calc(480/1000 * 100%);
	position: absolute;
	top: calc(210/1850  * 100%);
  right: 0;
}
.lim_w3{
	position: absolute;
	top: calc(730/1850 * 100%);
  right: calc(80/1000 * 100%);
	width: calc(480/1000 * 100%);
}
.lim_w4{
	position: absolute;
	top: calc(970/1850  * 100%);
  left: calc(40/1000 * 100%);
	width: calc(360/1000 * 100%);
}
.lim_w5{
	position: absolute;
	bottom: calc(0/1850 * 100%);
	width: calc(480/1000 * 100%);
  left: 50%;
  transform: translateX(-50%);
}

.lim_men{
	padding: 0 0 120px;
}
.lim_men .limbox_ttl{
	text-align: center;
	padding-bottom: 50px;
}

.lim_men_navy{

}
.navy_img_box{
	position: relative;
	margin: 0 auto;
	padding-top: 90px;
	width: calc(740/1200 * 100%);
}
.navy_txt1{
	position: absolute;
	width: 20px;
	top: calc(50% + 39px);
	left: -30px;
	transform: translateY(-50%);
}
.navy_txt2{
	position: absolute;
	width: 20px;
	top: calc(50% + 76px);
	right: -30px;
	transform: translateY(-50%);
}


.limited_imgbox_r{
	width: 100%;
	position: relative;
}
.limited_imgbox_r:before{
	content: "";
	display: block;
	padding-top: 116%;/* limited_imgboxの高さ1160px÷横幅1000px×100*/
}
.limited_imgbox_r	.limbox_ttl{
	position: absolute;
	top: calc(65/1160 * 100%);
  left: 50%;
  transform: translateX(-50%);
	z-index: 99;
}
.lim_r1{
	width: calc(480/1000 * 100%);
	position: absolute;
	top: 0;
  right: 0;
}
.lim_r2{
	width: calc(480/1000 * 100%);
	position: absolute;
	top: calc(120/1160 * 100%);
  left: 0;
}
.lim_r3{
	width: calc(420/1000 * 100%);
	position: absolute;
	top: calc(520/1160 * 100%);
  right: calc(60/1000 * 100%);

}
.lim_r4{
	width: calc(360/1000 * 100%);
	position: absolute;
	bottom: calc(0/1330 * 100%);
  left: calc(120/1000 * 100%);
}


.limited_imgbox_k{
	width: 100%;
	position: relative;
}
.limited_imgbox_k:before{
	content: "";
	display: block;
	padding-top: 64%;/* limited_imgboxの高さ640px÷横幅1000px×100*/
}
.limited_imgbox_k	.limbox_ttl{
	position: absolute;
	top: calc(55/640 * 100%);
  left: 50%;
  transform: translateX(-50%);
	z-index: 105;
}
.lim_k1{
	width: calc(480/1000 * 100%);
	position: absolute;
	top: 0;
  left: calc(30/1000 * 100%);
}
.lim_k2{
	width: calc(420/1000 * 100%);
	position: absolute;
	top: calc(110/640 * 100%);
  right: calc(30/1000 * 100%);
}


.limited_imgbox_l{
	width: 100%;
	position: relative;
}
.limited_imgbox_l:before{
	content: "";
	display: block;
	padding-top: 64%;/* limited_imgboxの高さ640px÷横幅1000px×100*/
}
.limited_imgbox_l	.limbox_ttl{
	position: absolute;
	top: calc(55/640 * 100%);
  left: 50%;
  transform: translateX(-50%);
	z-index: 105;
}
.lim_l1{
	width: calc(420/1000 * 100%);
	position: absolute;
	top: calc(110/640 * 100%);
  left: calc(30/1000 * 100%);
}
.lim_l2{
	width: calc(480/1000 * 100%);
	position: absolute;
	top: 0;
  right: calc(30/1000 * 100%);
}



/*Monthly
---------------------*/
.month_wrap{
	width: 100%;
	background-color: #f2f0e7;
	padding: 100px 0 120px;
}

.month_inner{
	width: 94%;
	max-width: 1200px;
	margin: 0 auto;
}

/*左サイド固定
------------*/
.month_contents {
	width: 100%;
  margin: 0 auto;
  display: flex;
	justify-content: space-between;
	/*align-items: flex-start;*//*上揃え stickyが無効になるのでコメントアウト*/
	overflow:clip;/*子要素position: sticky;による画面ブレを固定させる*/
}
.month_txtwrap {
	width: 91px;
	/* margin-left: -20px; */
	display: block;/*高さを確保*/
}
.month_imgwrap {
	width: calc(840/1000 * 100%);
}

.month--sticky {
  position: sticky;
	height: 635.5px;
  top: 20px; /* スクロール時にビューポートの20px位置に達すると固定 */
	left: 0;
}


/*商品画像
------------*/
.month_imgbox_sep, .month_imgbox_oct, .month_imgbox_dec, .month_imgbox_nov{
	width: 100%;
	margin: 0 auto;
	margin-bottom: 100px;
	position: relative;
}
.month_imgbox_dec{
	margin-bottom: 0;
}
.month_imgbox_sep:before, .month_imgbox_oct:before, .month_imgbox_dec:before{
	content: "";
	display: block;
	padding-top: 109.523%;/* month_imgbox_sepの高さ920px÷横幅840px×100*/
}
.month_imgbox_sep	.month_ttl{
	position: absolute;
	width: calc(270/840 * 100%);
	top: calc(630/920 * 100%);
  left: calc(130/840 * 100%);
	z-index: 101;
}
.month_sep1{
	width: calc(480/840 * 100%);
	position: absolute;
	top: 0;
  left: 0;
	z-index: 100;
	background-color: #f2f0e7;
}
.month_sep2{
	width: calc(480/840 * 100%);
	position: absolute;
	bottom: 0;
  right: 0;
	z-index: 99;
	background-color: #f2f0e7;
}
	
.month_imgbox_oct	.month_ttl{
	position: absolute;
	width: calc(270/840 * 100%);
	top: calc(660/920 * 100%);
  right: calc(205/840 * 100%);
	z-index: 101;
}
.month_oct1{
	width: calc(480/840 * 100%);
	position: absolute;
	top: 0;
  right: 0;
	z-index: 99;
	background-color: #f2f0e7;
}
.month_oct2{
	width: calc(480/840 * 100%);
	position: absolute;
	bottom: 0;
  left: 0;
	z-index: 100;
	background-color: #f2f0e7;
}
	
.month_imgbox_dec	.month_ttl{
	position: absolute;
	width: calc(270/840 * 100%);
	top: calc(225/920 * 100%);
  left: calc(360/840 * 100%);
	z-index: 101;
}
.month_dec1{
	width: calc(480/840 * 100%);
	position: absolute;
	top: 0;
  left: 0;
	z-index: 99;
	background-color: #f2f0e7;
}
.month_dec2{
	width: calc(480/840 * 100%);
	position: absolute;
	bottom: 0;
  right: 0;
	z-index: 100;
	background-color: #f2f0e7;
}

.month_imgbox_nov{

}
.month_imgbox_nov .month_ttl{
	position: absolute;
	width: calc(270/840 * 100%);
	top: calc(315/480 * 100%);
  left: calc(20/840 * 100%);
	z-index: 101;
}
.month_nov1{
	width: calc(480/840 * 100%);
	margin: 0 auto;
	background-color: #f2f0e7;
}


/*Brand History
---------------------*/
.history_wrap{
	padding: 100px 0 0;
	background-color: #ffffff;
	color: #555555;
	font-size: 14px;
	font-family: "linotype-sabon","Times New Roman", Times, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", serif;
}
.history_inner{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	flex-wrap: nowrap;/*改行許可*/
	justify-content: space-between;
	align-items: flex-start;/*上揃え*/
}
.his_boxWrap1{
	width: calc(45% - 100px);
	padding: 50px 0 0;
}
.his_boxWrap2{
	width: calc(45% - 100px);
	padding: 185px 0 0;
}
.his_timeWrap{
	width: 200px;
	margin:0 auto;
	padding: 0;
	text-align: center;
}
.his_box{
	height: 450px;
}
.box_last{
	height: 320px;
}
.shop_jp{
	font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
	font-size: 14px;
	font-weight: 600;
}

.his_timeWrap{
	display: flex;
	flex-wrap: nowrap;/*改行許可*/
	justify-content: space-between;
	font-size: 28px;
	font-style: italic;
	line-height: 1;
	color: #333333;
}


.line_wrap1{
	width: 10px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 2170px;
	z-index: 99;
}
.year_wrap1{
	width: 105px;
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	padding-top: 125px;
	z-index: 100;
}
.year_wrap2{
	width: 105px;
	position: absolute;
	top: 0;
	right: 0;
	text-align: center;
	padding-top: 350px;
	z-index: 100;
}
.year_box{	
/*	width: calc(100% + 10px);*/
	width: 100%;
	padding-bottom: 422.5px;
	display: flex;
	flex-wrap: nowrap;/*改行許可*/
	justify-content: space-between;
	align-items: center;
}
.year_box .year{
	width: calc(100% - 10px);
}
.dot{
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #666666;
	margin: 0 auto;
}


.year_last{
	padding-bottom: 0;
}
.his_txt{
	padding-top: 10px;
}

/*タイムラインのアニメーション
------------*/
.line_box_top{
	height: 145px;
}
.line_box{
	height: 675px;
}
.his_line {
  width: 2px;
  height: 0; /* 初期状態は高さ0 */
  background-color: #c5c5c5;
	margin: 0 auto;
  /*animation: line-grow 2s forwards;*/ /* アニメーションを適用 */
}
.line_box_top .lineAnmActive{
	animation: line-grow-top 1s forwards; /* アニメーションを適用 */
}
.line_box .lineAnmActive{
	animation: line-grow 2s forwards; /* アニメーションを適用 */
	animation-delay: 1s;
}
@keyframes line-grow-top {
  0% {
    height: 0; /* 開始時の高さを0に */
  }
  100% {
    height: 145px; /* 終了時の高さを指定 */
  }
}
@keyframes line-grow {
  0% {
    height: 0; /* 開始時の高さを0に */
  }
  100% {
    height: 675px; /* 終了時の高さを指定 */
  }
}


/*2020
------------*/
.history_middle_inner{
	width: 94%;
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
	line-height: 1;
	color: #333333;
	padding-bottom: 30px;
}

.middle_year{
	font-size: 28px;
	font-style: italic;
	padding: 20px 0 0;
}
.history_middle_inner .img_2020{
	width: calc(640/920 * 100%);
	margin: 0 auto;
}
.history_middle_inner .his_txt_2020{
	font-size: 20px;
	padding: 30px 0 25px;
	font-style: normal;
}
/*2021～
------------*/
.his_timeWrap{
	position: relative;
}
.year_box_2021{
	position: absolute;
	top: 145px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #ffffff;
	padding: 0 0 10px;
	z-index: 101;
}
.num_2021{
	padding-top: 10px;
	}

.his_boxWrap3{
	width: calc(50% - 100px);
	padding: 50px 0 90px;
}
.his_boxWrap4{
	width: calc(50% - 100px);
	padding: 50px 0 0;
}
.his_boxWrap4 .his_box{
	height: 585px;
}


.line_wrap2{
	width: 10px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 1360px;
	z-index: 99;
}
.year_wrap3{
	width: 105px;
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	padding-top: 575px;
	z-index: 100;
}
.year_wrap4{
	width: 105px;
	position: absolute;
	top: 0;
	right: 0;
	text-align: center;
	padding-top: 800px;
	z-index: 100;
}

.line_box_last{
	height: 540px;
}
.line_box_last .lineAnmActive{
	animation: line-grow-last 2s forwards; /* アニメーションを適用 */
	animation-delay: 1s;
}
@keyframes line-grow-last {
  0% {
    height: 0; /* 開始時の高さを0に */
  }
  100% {
    height: 540px; /* 終了時の高さを指定 */
  }
}



/*ロゴ:Always with You
------------*/
.his_logo{
	width: calc(320/920 * 100%);
	max-width: 350px;
	margin: 0 auto;
	padding: 0 0 0;
}
	.his_logo img{
		padding: 40px 0 0;
	}


/*Special Movie
---------------------*/
.movie_wrap{
	padding: 150px 0 0;
	background-color: #ffffff;
}
.movie_box{
	/* padding: 40px 0 120px; */
}
.movie_wrap .sec_txt{
	text-align: center;
}



/*thank you
---------------------*/
.thank_wrap{
	width: calc(570/1000 * 100%);
	max-width: 570px;
	margin: 0 auto;
	padding: 40px 0 0;
}
.thank_wrap .cls-1 {
	fill: none;
  stroke: #FFF;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 13px;
}
.thank_wrap .cls-2 {
  fill: none;
}

/*Our Store
---------------------*/
.store_wrap{
	padding: 120px 0 0;
	background-color: #ffffff;
}
.store_inner{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;/*改行許可*/
	justify-content: center;/*中央配置*/
	justify-content: space-between;
	align-items: flex-start;/*上揃え*/
}
.store_box{
	width: calc(430/900 * 100%);
}
.store_logo{
	width: calc(170/430 * 100%);
	margin: 0 auto;
	padding: 20px 0 50px;
}


/* View More ボタン大
======================*/
	.sec_btn_wrap a{
		width: 150px;
		height: 30px;
		display: block;
		margin: 40px auto 0;
	}
	.sec_btn{
		background-color: #a7a7a7;
		border-radius: 50px;
		font-size: 14px;
		line-height: 30px;
		color: #ffffff;
		text-align: center;
		letter-spacing: 0.8px;
	}


/* 一覧はこちら ボタン大
======================*/
	.all_btn_wrap a{
		width: 270px;
		height: 30px;
		display: block;
		margin: 40px auto 0;
	}
	.all_btn{
		background-color: #a7a7a7;
		border-radius: 30px;
		font-size: 13px;
		line-height: 30px;
		color: #ffffff;
		text-align: center;
		letter-spacing: 0.2px;
		font-family: "Noto Serif JP", serif;
  		font-optical-sizing: auto;
  		font-style: normal;
	}


}/*! //pc & tb */
























/*! sp 
------------------------------------------*/
@media screen and (max-width: 640px) {

	.pc_view{
		display: none;
	}
	main .contents-inner{
		margin: 0 0 0;
		/*font-family: "linotype-sabon","Times New Roman", Times,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;*/
		font-family: "linotype-sabon","Times New Roman", Times, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", serif;
		color: #7d7d7d;
	}



/*sp トップスライダーのためのcss
======================*/
.main_slider_wrap{
	margin: 0 auto;
	overflow: hidden;
}

.slider {
	max-width: 1400px;
	margin: 0 auto;
 /* position:relative;
	z-index: 1;*/
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	/*height: 100vh;*/
	/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/

/*.slider-item01 {
    background:url("/photo/page/250818_online5th/img/main_img1.jpg");
}

.slider-item02 {
    background:url("/photo/page/250818_online5th/img/main_img2.jpg");
}

.slider-item03 {
    background:url("/photo/page/250818_online5th/img/main_img3.jpg");
}*/

.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    /*height:100vh*/;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}


/*ドットナビゲーションの設定*/

.slick-dots {
	position: relative;
	z-index: 3;
  text-align:right;
	margin: 4vw 0 0 0;/*ドットの位置*/
	padding: 0 4.6875vw;
}

.slick-dots li {
  display:inline-block;
	margin:0 0.7vw;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:1.1vw;/*ドットボタンのサイズ*/
    height:1.1vw;/*ドットボタンのサイズ*/
		line-height: 1.1vw;
    display:block;
    border-radius:50%;
    background:#bfbfbf;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#000000;/*ドットボタンの現在地表示の色*/
}



/*sp スライダー swiper
---------------------*/
.sec_slider{
/*	position: absolute;
	bottom: calc(50/1030*100vw);
	right: 0;
  left: 0;*/
	width: 100%;
  margin: 0 auto;
}
.swiper{
  width: 100%;
}
/*スライドの動きをスムーズにする・自動で流れ続ける無限ループスライダー*/
main .swiper-wrapper{
	transition-timing-function: linear;
}
.swiper-slide{
	/* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
	/*margin-left: 30px;*/
/*  color: #ffffff;
  width: 270px;
  height: 100%;
  text-align: center;
  line-height: 270px;*/
}



/*sp setion
---------------*/
.sec_wrap{
	width: 100%;
	margin: 0 auto;
	padding: 40vw 0 0;
}
.sec_ttl{
	font-size: 5vw;
	text-align: center;
	padding-bottom: 10vw;
}
.sec_subttl{
	font-size: 5vw;
	text-align: center;
	margin-top: 24vw;
	padding-bottom: 12vw;
}
.sec_txt{
	width: 80%;
	font-size: 3.2vw;
	margin: 0 auto 9vw;
	line-height: 2.5;
	font-family: "Noto Serif JP", serif;
  	font-optical-sizing: auto;
  	font-style: normal;
}



/*sp main
---------------------*/
.main_wrap{
	margin: 6vw 0 0;
	padding: 20vw 0 0;
	background-color: #f2f0e7;
}

.main_box{
	width: 92%;
	margin: 0 auto;
	padding: 0 0 20vw;
}

.main_ttl{
	width: calc(425/750 * 100vw);
	margin: 0 auto;
}
.main_txt{
	width: calc(670/750 * 100vw);
	padding: 15vw 0 0;
	font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
	color: #333333;
	margin: 0 auto;
	text-align: center;
}
.main_txt p{
	line-height: 2.3;
	font-size: 3.2vw;/*12px*/
	letter-spacing: -0.1vw;
}
.main_always{
	width: calc(420/750 * 100vw);
	margin: 0 auto;
	padding: 5vw 0 2vw;
}

.main_always .cls-1 {
	fill: none;
}

.main_always .cls-2 {
	fill: none;
	stroke: #fff;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 15px;
}


/*sp index
---------------------*/
.index_wrap{
	margin: 0 auto;
	padding-bottom:20vw;
	text-align: center;
	color: #333333;
	background-color: #f2f0e7;
}
.index_ttl{
	font-size: 4vw;
	margin-bottom: 8vw;
}
.index_container{
	width: 75vw;
	margin: 0 auto;
	text-align: center;
}

.index_box{
	width: 100%;
	display: flex;
	flex-wrap: nowrap;/*改行許可*/
	justify-content: space-between;
	align-items: flex-start;/*上揃え*/
	align-items: center;
	margin: 0 auto;
	background: url("/photo/page/250818_online5th/img/index_line.jpg") repeat-x;
	background-position: left center;
	background-size: 5px auto;
	margin-bottom: 4vw;
}

.list_en{
	text-align: right;
	font-size: 4.8vw;
	font-weight: 400;
	background-color: #f2f0e7;
	padding-right: 3vw;
}
.list_jp{
	text-align: left;
	font-size: 3.4vw;
	font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
	background-color: #f2f0e7;
	padding-left: 2vw;
	font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.list_ttl{
	font-size: 4.4vw;
	font-weight: normal;
	padding-left: 5vw;
	background: url("/photo/page/250818_online5th/img/arrow_sp.svg");
	background-size: 5vw;
	background-position: 0 center;
	background-repeat: no-repeat;
	background-color: #f2f0e7;
	padding-right: 3vw;
}
.index_box_subttl{
	font-size: 4.0vw;
	padding-left: 5vw;
	width: 100%;
	display: flex;
	flex-wrap: nowrap;/*改行許可*/
	justify-content: space-between;
	align-items: flex-start;/*上揃え*/
	align-items: center;
	margin: 0 auto;
	margin-bottom: 3vw;
}
.index_box_subttl .list_en{
	text-align: left;
	font-size: 3.6vw;
	padding-right: 0;
}
.index_box_subttl .list_jp{
	padding-left: 0;
}
.subttl_wrap{
	padding-bottom: 3vw;
}


/*sp Top Picks
---------------------*/
.picks_wrap{
	padding: 20vw 0 0;
	background-color: #ffffff;
}
.picks_box{
	padding: 0vw 0 0;
}


/*sp Limited Item
---------------------*/
.limited_wrap{
	background-color: #ffffff;
	padding-top: 20vw;
	overflow: hidden;
}
.lim_sec{
	padding: 0 0 25vw;
}
.limited_inner{
	width: 100%;
	margin: 0 auto;
}
.lim_subttl{
	width: 90%;
	height: auto;
	text-align: left;
	margin: 0 auto;
	text-align: left;
	border-left: 1px solid #888a8b;
	line-height: 1;
	padding-left: 3vw;
	margin-bottom: 5vw;
}
.subttl_en{
	font-size: 4vw;
}
.subttl_jp{
	font-size: 3.2vw;
	padding-top: 3vw;
	font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.limbox_ttl{
	font-size: 4vw;
	position: relative;
	z-index: 105;
}


.limited_imgbox_w{
	width: 100%;
}

.limited_imgbox_w	.limbox_ttl{
	margin: 0 auto;
	padding: 10vw 0 7vw;
	text-align: center;
}
.lim_w1{
	width: calc(500/750 * 100%);
	margin: 0 auto;
	padding-bottom: calc(40/750 * 100vw);
}
.lim_w2{
	width: calc(460/750 * 100%);
	margin-left: auto;
	margin-right: 0;
	padding-bottom: calc(40/750 * 100vw);
}
.lim_w3{
	width: calc(510/750 * 100%);
	padding-bottom: calc(40/750 * 100vw);
}
.lim_w4{
	width: calc(360/750 * 100%);
	padding-left: calc(40/750 * 100vw);
	padding-bottom: calc(40/750 * 100vw);
}
.lim_w5{
	width: calc(470/750 * 100%);
	margin-left: auto;
	margin-right: calc(40/750 * 100vw);
}

.lim_men{
	padding: 0 0 25vw;
}
.lim_men .limbox_ttl{
	text-align: center;
	padding-bottom: 7vw;
}

.lim_men_navy{
	padding-top: 10vw;
}
.navy_img_box{
	position: relative;
	margin: 0 auto;
	width: calc(600/750 * 100%);
}
.navy_txt1{
	position: absolute;
	width: 3.5vw;
	top: 29vw;
	left: -5.5vw;
	transform: translateY(-50%);
}
.navy_txt2{
	position: absolute;
	width: 3.5vw;
	top: 29vw;
	right: -5.5vw;
	transform: translateY(-50%);
}


.limited_imgbox_r{
	width: 100%;
}

.limited_imgbox_r	.limbox_ttl{
	margin: 0 auto;
	padding: 10vw 0 7vw;
	text-align: center;
}
.lim_r1{
	width: calc(480/750 * 100%);
	margin: 0 auto;
	padding-bottom: calc(40/750 * 100vw);
}
.lim_r2{
	width: calc(480/750 * 100%);
	padding-bottom: calc(40/750 * 100vw);
}
.lim_r3{
	width: calc(420/750 * 100%);
	padding-bottom: calc(40/750 * 100vw);
	margin-left: auto;
	margin-right: 0;
}
.lim_r4{
	width: calc(360/750 * 100%);
	margin: 0 auto;
}

.flex-box{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
}
.limited_imgbox_k{
	width: 100%;
	position: relative;
}

.limited_imgbox_k	.limbox_ttl{
	margin: 0 auto;
	padding: 10vw 0 7vw;
	text-align: center;
}
.lim_k1{
	width: calc(480/940 * 100%);
}
.lim_k2{
	width: calc(420/940 * 100%);
}


.limited_imgbox_l{
	width: 100%;
}

.limited_imgbox_l	.limbox_ttl{
	margin: 0 auto;
	padding: 10vw 0 7vw;
	text-align: center;
}
.lim_l1{
	width: calc(420/940 * 100%);
	}
.lim_l2{
	width: calc(480/940 * 100%);
}


/*sp Monthly
---------------------*/
.month_wrap{
	width: 100%;
	margin: 0 auto;
	background-color: #f2f0e7;
	padding: 15vw 0 20vw;
}

.month_inner{
	width: 100%;
	margin: 0 auto;
}

/*左サイド固定
------------*/
.month_contents {
	width: 100%;
  	margin: 0 auto;
	padding-top: 10vw;
  	display: flex;
	justify-content: space-between;
	/*align-items: flex-start;*//*上揃え stickyが無効になるのでコメントアウト*/
}
.month_txtwrap {
	width: calc(105/750 * 100vw);
	display: block;/*高さを確保*/
	margin-left: 1.8vw;
}
.month_imgwrap {
	width: calc(560/750 * 100vw);
}

.month--sticky {
  position: sticky;
	/*height: 635.5px;*/
  	top: 7vw; /* スクロール時にビューポートの7vw位置に達すると固定 */
	left: 0;
}


/*商品画像
------------*/
.month_imgbox_sep, .month_imgbox_oct, .month_imgbox_dec, .month_imgbox_nov{
	width: 100%;
	margin: 0 auto;
	margin-bottom: 20vw;
	position: relative;
}
.month_imgbox_dec{
	margin-bottom: 0;
}
.month_imgbox_sep:before, .month_imgbox_oct:before, .month_imgbox_dec:before{
/*	content: "";
	display: block;
	padding-top: 109.523%;*/
}
.month_imgbox_sep	.month_ttl{
	position: absolute;
	width: calc(350/590 * 100%);
	top: 84vw;
  left: -4vw;
	z-index: 101;
}
.month_sep1{
	width: calc(400/590 * 100%);
	padding-bottom: 3vw;
	position: relative;
	z-index: 100;
	background-color: #f2f0e7;
}
.month_sep2{
	width: calc(450/590 * 100%);
	margin-left: auto;
	margin-right: 0;
	position: relative;
	z-index: 99;
	background-color: #f2f0e7;
}
	
.month_imgbox_oct	.month_ttl{
	position: absolute;
	width: calc(350/590 * 100%);
	top: 82vw;
  left: 36vw;
	z-index: 101;
}
.month_oct1{
	width: calc(400/590 * 100%);
	padding-bottom: 3vw;
	margin-left: auto;
	margin-right: 5vw;
	z-index: 99;
	background-color: #f2f0e7;
}
.month_oct2{
	width: calc(450/590 * 100%);
	z-index: 100;
	background-color: #f2f0e7;
}
	
.month_imgbox_dec	.month_ttl{
	position: absolute;
	width: calc(350/590 * 100%);
	top: 36vw;
  right: -2vw;
	z-index: 101;
}
.month_dec1{
	width: calc(450/590 * 100%);
	padding-bottom: 3vw;
	z-index: 99;
	background-color: #f2f0e7;
}
.month_dec2{
	width: calc(400/590 * 100%);
	margin-left: auto;
	margin-right: 0;
	z-index: 100;
	background-color: #f2f0e7;
}

.month_imgbox_nov{

}
.month_imgbox_nov .month_ttl{
	position: absolute;
	width: calc(350/590 * 100%);
	top: 32vw;
  left: -10vw;
	z-index: 101;
}
.month_nov1{
	width: calc(400/590 * 100%);
	margin: 0 auto;
	background-color: #f2f0e7;
}


/*sp Brand History
---------------------*/
.history_wrap{
	width: 100%;
	padding: 20vw 0 0;
	background-color: #ffffff;
	color: #555555;
	font-size: 2.9vw;
	letter-spacing: -0.05vw;
	font-family: "linotype-sabon","Times New Roman", Times, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", serif;
	overflow: hidden;
}
.history_inner{
	width: calc(700/750 * 100vw);
	margin: 0 auto;
	display: flex;
	flex-wrap: nowrap;/*改行許可*/
	justify-content: space-between;
	align-items: flex-start;/*上揃え*/
}
.his_boxWrap1{
	width: calc(304/750 * 100vw);
	padding: calc(70/750 * 100vw) 0 0;
}
.his_boxWrap2{
	width: calc(304/750 * 100vw);
	padding: calc(298/750 * 100vw) 0 0;
}
.his_box{
	height: calc(456/750 * 100vw);/*456+114*/
}
.box_last{
	height: calc(320/750 * 100vw);
}
.shop_jp{
	font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
	font-size: 2.8vw;
	font-weight: 600;
}

.his_timeWrap1{
	width: calc(92/750 * 100vw);
	margin:0 auto;
	padding: 0;
	text-align: center;
	position: relative;
	height: calc(2236/750 * 100vw);
}
.line_wrap1{
	width: 10px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
/*	height: 2170px;*/
	z-index: 99;
}
.year_wrap1{
	font-size: 4vw;
	font-style: italic;
	line-height: 1;
	color: #333333;
	letter-spacing: -0.1vw;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 200;
	margin-top: calc(184/750 * 100vw);;
}

.year_box{	
	width: calc(92/750 * 100vw);
	height: calc(228/750 * 100vw);
}
.year_box_inner{
	background-color: #ffffff;
	padding-bottom: 2vw;
}

.dot{
	width: 1.6vw;
	height: 1.6vw;
	border-radius: 50%;
	background-color: #666666;
	margin: 0 auto;
}
.year{
	padding-top: 2vw;
}

.year_last{
/*	padding-bottom: 0;*/
}
.his_txt{
	padding-top: 2vw;
}

/*sp タイムラインのアニメーション
------------*/
.line_box_top{
	height: calc(184/750 * 100vw);
}
.line_box{
	height: calc(684/750 * 100vw);
}
.his_line {
  width: 2px;
  height: 0; /* 初期状態は高さ0 */
  background-color: #c5c5c5;
	margin: 0 auto;
  /*animation: line-grow 2s forwards;*/ /* アニメーションを適用 */
}
.line_box_top .lineAnmActive{
	animation: line-grow-top 1s forwards; /* アニメーションを適用 */
}
.line_box .lineAnmActive{
	animation: line-grow 2s forwards; /* アニメーションを適用 */
	animation-delay: 1s;
}
@keyframes line-grow-top {
  0% {
    height: 0; /* 開始時の高さを0に */
  }
  100% {
    height: calc(184/750 * 100vw); /* 終了時の高さを指定 */
  }
}
@keyframes line-grow {
  0% {
    height: 0; /* 開始時の高さを0に */
  }
  100% {
    height: calc(684/750 * 100vw); /* 終了時の高さを指定 */
  }
}


/*sp 2020
------------*/
.history_middle_inner{
	width: 94%;
	margin: 0 auto;
	text-align: center;
	line-height: 1;
	color: #333333;
	padding-bottom: 5vw;
}

.middle_year{
	font-size: 4.4vw;
	font-style: italic;
	padding: 3vw 0 0;
}
.history_middle_inner .img_2020{
	width: calc(600/750 * 100vw);
	margin: 0 auto;
}
.history_middle_inner .his_txt_2020{
	font-size: 3.6vw;
	padding: 3vw 0 3vw;
	font-style: normal;
}

/*sp 2021～
------------*/
.his_timeWrap2{
	width: calc(92/750 * 100vw);
	margin:0 auto;
	padding: 0;
	text-align: center;
	position: relative;
	height: calc(1324/750 * 100vw);
}
.line_wrap2{
	width: 10px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
/*	height: 2170px;*/
	z-index: 99;
}
.year_wrap2{
	font-size: 4vw;
	font-style: italic;
	line-height: 1;
	color: #333333;
	letter-spacing: -0.1vw;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 200;
	margin-top: calc(164/750 * 100vw);;
}
.his_boxWrap3{
	width: calc(304/750 * 100vw);
	padding: calc(50/750 * 100vw) 0 0;
}
.his_boxWrap4{
	width: calc(304/750 * 100vw);
	padding: calc(50/750 * 100vw) 0 0;
}

.his_boxWrap3 .his_box{
	height: calc(360/750 * 100vw);
}
.his_boxWrap3 .box_middle{
	height: calc(470/750 * 100vw);
}
.his_boxWrap4 .his_box{
	height: calc(590/750 * 100vw);
}
.year_wrap2 .year_box{	
	width: calc(92/750 * 100vw);
	height: calc(290/750 * 100vw);
}




/*sp 2021～タイムラインのアニメーション
------------*/

.his_timeWrap2 .line_box_top{
	height: calc(164/750 * 100vw);
}
.his_timeWrap2 .line_box{
	height: calc(870/750 * 100vw);
}
.his_timeWrap2 .his_line {
  width: 2px;
  height: 0; /* 初期状態は高さ0 */
  background-color: #c5c5c5;
	margin: 0 auto;
  /*animation: line-grow 2s forwards;*/ /* アニメーションを適用 */
}
.his_timeWrap2 .line_box_top .lineAnmActive{
	animation: line-grow-top2 1s forwards; /* アニメーションを適用 */
}
.his_timeWrap2 .line_box .lineAnmActive{
	animation: line-grow2 2s forwards; /* アニメーションを適用 */
	animation-delay: 1s;
}
@keyframes line-grow-top2 {
  0% {
    height: 0; /* 開始時の高さを0に */
  }
  100% {
    height: calc(164/750 * 100vw); /* 終了時の高さを指定 */
  }
}
@keyframes line-grow2 {
  0% {
    height: 0; /* 開始時の高さを0に */
  }
  100% {
    height: calc(870/750 * 100vw); /* 終了時の高さを指定 */
  }
}

.line_box_last .lineAnmActive{
	animation: line-grow-last 2s forwards; /* アニメーションを適用 */
	animation-delay: 1s;
}
@keyframes line-grow-last {
  0% {
    height: 0; /* 開始時の高さを0に */
  }
  100% {
    height: calc(290/750 * 100vw); /* 終了時の高さを指定 */
  }
}


/*sp ロゴ:Always with You
------------*/
.his_logo{
	width: calc(380/750 * 100%);
	margin: 0 auto;
	padding: 0 0 0;
}
	.his_logo img{
		padding: 5vw 0 0;
	}



/*sp Special Movie
---------------------*/
.movie_wrap{
	padding: 20vw 0 0;
	background-color: #ffffff;
}
.movie_box{
	/* padding: 0 0 10vw; */
}
.movie_wrap .sec_txt{
	width: calc(650/750 * 100vw);
	text-align: center;
}



/*sp thank you
---------------------*/
.thank_wrap{
	width: calc(550/750 * 100%);
	margin: 0 auto;
}
.thank_wrap .cls-1 {
	fill: none;
  stroke: #FFF;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 13px;
}
.thank_wrap .cls-2 {
  fill: none;
}

/*Our Store
---------------------*/
.store_wrap{
	padding: 20vw 0 0;
	background-color: #ffffff;
}
.store_inner{
	width: 92%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;/*改行許可*/
	justify-content: center;/*中央配置*/
	justify-content: space-between;
	align-items: flex-start;/*上揃え*/
}
.store_box{
	width: calc(430/900 * 100%);
}
.store_logo{
	width: calc(270/430 * 100%);
	margin: 0 auto;
	padding: 3vw 0 10vw;
}







/*sp ボタン
---------------------*/
	.sec_btn_wrap{
		
	}
	.sec_btn_wrap a{
		display: block;
		width: 30vw;
		height: 5.625vw;
		display: block;
		margin: 0 auto;
		padding-top: 7vw;
	}
	.sec_btn{
		display: block;
		background-color: #a7a7a7;
		border-radius: 7.8125vw;
		font-size: 2.8125vw;
		line-height: 5.625vw;
		color: #ffffff;
		text-align: center;
		letter-spacing: 0.1vw;
	}

/*sp 一覧はこちら ボタン
---------------------*/
	.all_btn_wrap{
		margin-top: 5vw;

	}
	.all_btn_wrap a{
		display: block;
		width: 52vw;
		height: 6.5vw;
		display: block;
		margin: 0 auto;
		padding-top: 7vw;
	}
	.all_btn{
		display: block;
		background-color: #a7a7a7;
		border-radius: 6.5vw;
		font-size: 3vw;
		line-height: 6.5vw;
		color: #ffffff;
		text-align: center;
		letter-spacing: 0vw;
		font-family: "Noto Serif JP", serif;
  		font-optical-sizing: auto;
  		font-style: normal;
		font-weight: 600;
	}


}/*! //sp */










/*@media screen and (max-width: 1200px) and (min-width: 768px) and (orientation: portrait) {
}
*/







/*   ふわっと表示 start
=========================*/
/* ----- effects ----- */
  .effFI, .effFIU, .effFID, .effFIR, .effFIL { opacity:0; }
  .effFI.effanm { -webkit-animation:effFI 2.5s both; animation:effFI 2.5s both; }
  .effFIU.effanm { -webkit-animation:effFIU 1.5s both; animation:effFIU 1.5s both; }
  .effFID.effanm { -webkit-animation:effFID 1.5s both; animation:effFID 1.5s both; }
  .effFIR.effanm { -webkit-animation:effFIR 1.5s both; animation:effFIR 1.5s both; }
  .effFIL.effanm { -webkit-animation:effFIL 1.5s both; animation:effFIL 1.5s both; }

/*その場でフェードイン*/
  @keyframes effFI {0%{opacity:0}100%{opacity:1}}

/*下から上へフェードイン*/
  @keyframes effFIU {0%{opacity:1;transform:translate3d(0,25px,0)}100%{opacity:1;transform:none}}

/*上から下へフェードイン*/
  @keyframes effFID {0%{opacity:1;transform:translate3d(0,-50px,0)}100%{opacity:1;transform:none}}

/*右から左へフェードイン*/
  @keyframes effFIR {0%{opacity:1;transform:translate3d(25px,0,0)}100%{opacity:1;transform:none}}

/*右から左へフェードイン*/
  @keyframes effFIL {0%{opacity:1;transform:translate3d(-50px,0,0)}100%{opacity:1;transform:none}}
/*   ふわっと表示 end
=========================*/




/*画像重なりアニメーション start
=========================*/

/*4画像を時差で重ねて表示させる*/
.itemAnmTrigger {
}
.secImgWide1 .itemAnmActive{
	animation: item_anm1 4s ease-out 0s 1;
}
.secImgWide2 .itemAnmActive{
	animation: item_anm2 3.5s ease-out 0.5s 1;
}
.secImgWide3 .itemAnmActive{
	animation: item_anm3 3s ease-out 1s 1;
}
.secImgWide4 .itemAnmActive{
	animation: item_anm4 2.5s ease-out 1.5s 1;
}

@keyframes item_anm1 {
0%   {transform: scale(0.95) rotate(3deg); opacity: 0; }
12.5%{opacity: 1; }
87.5%{transform: scale(1.0) rotate(3deg); opacity: 1;}
100% {transform: scale(1.0) rotate(0); opacity: 1;}
}
@keyframes item_anm2 {
0%   {transform: scale(0.95) rotate(-2deg); opacity: 0; }
14.28%{opacity: 1; }
85.7%{transform: scale(1.0) rotate(-2deg); opacity: 1;}
100% {transform: scale(1.0) rotate(0); opacity: 1;}
}
@keyframes item_anm3 {
0%   {transform: scale(0.95) rotate(2deg); opacity: 0; }
16.6%{opacity: 1; }
83.3%   {transform: scale(1.0) rotate(2deg); opacity: 1;}
100% {transform: scale(1.0) rotate(0); opacity: 1;}
}
@keyframes item_anm4 {
0%   {transform: scale(0.95) rotate(-1deg); opacity: 0; }
20%{opacity: 1; }
80%   {transform: scale(1.0) rotate(-1deg); opacity: 1;}
100% {transform: scale(1.0) rotate(0); opacity: 1;}
}

/*スマホ表示時 重なり時は画像小さめ表示*/
@media screen and (max-width: 640px) {
	@keyframes item_anm1 {
0%   {transform: scale(0.9) rotate(4deg); opacity: 0; }
12.5%{opacity: 1; }
87.5%{transform: scale(1.0) rotate(4deg); opacity: 1;}
100% {transform: scale(1.0) rotate(0); opacity: 1;}
}
@keyframes item_anm2 {
0%   {transform: scale(0.9) rotate(-4deg); opacity: 0; }
14.28%{opacity: 1; }
85.7%{transform: scale(1.0) rotate(-4deg); opacity: 1;}
100% {transform: scale(1.0) rotate(0); opacity: 1;}
}
@keyframes item_anm3 {
0%   {transform: scale(0.9) rotate(2deg); opacity: 0; }
16.6%{opacity: 1; }
83.3%   {transform: scale(1.0) rotate(2deg); opacity: 1;}
100% {transform: scale(1.0) rotate(0); opacity: 1;}
}
@keyframes item_anm4 {
0%   {transform: scale(0.9) rotate(-2deg); opacity: 0; }
20%{opacity: 1; }
80%   {transform: scale(1.0) rotate(-2deg); opacity: 1;}
100% {transform: scale(1.0) rotate(0); opacity: 1;}
}
}

.overlap_box{
	position: relative;
	background-color: aqua;
	width: 100%;
	margin: 0 auto;
}
.overlap_box img{
	opacity: 0;
}

.secImgWide1, .secImgWide2, .secImgWide3, .secImgWide4{
	width: 100%;
	position: absolute;
	top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.secImgWide1{
	z-index: 101;
}
.secImgWide2{
	z-index: 102;
}
.secImgWide3{
	z-index: 103;
}
.secImgWide4{
	z-index: 104;
}

/*画像重なりアニメーション再生後に、同じ位置にスライダーを表示させる*/

.slick-slider{
	z-index: 1!important;
}

.slider_wrap .itemAnmActive{
	animation: slick_anm 5s ease-out 0s 1;

}

@keyframes slick_anm {
0%   { opacity: 0;rotate(2deg);}
65%  { opacity: 0;rotate(2deg);}
100% { opacity: 1;rotate(0);}
}

/*画像重なりアニメーション end
=========================*/





/*幕のように上から下に表示させるアニメーション start
=========================*/
.screen_box {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
}

.screen_box:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background:#ffffff;
  /*transition: 1s cubic-bezier(.15,.65,.85,.65);*/
	transition: 1s cubic-bezier(.6,0,.6,1);/*ease-in-outと同義*/
	z-index: 100;
}

.isPlay:before {
	transform: translate3d(0, 100%, 0);
}

/*幕のように上から下に表示させるアニメーション end
=========================*/



/*画像縮小アニメーション start
=========================*/
.imgAnmTrigger{}

.imgAnmActive{
	animation: top_anm 2s ease-out 1;
}

@keyframes top_anm {
0%   { transform: scale(1.1) rotate(0deg); opacity: 1;}
30%   { opacity: 1; }
100% { transform: scale(1.0) rotate(0deg); opacity: 1;}
}

.navy_img_box .imgAnmActive{
	animation: navy_anm 2s ease-out 1;
}

@keyframes navy_anm {
0%   { transform: scale(1.1) rotate(-5deg); opacity: 0.5;}
30%   { opacity: 1; }
100% { transform: scale(1.0) rotate(0deg); opacity: 1;}
}

.imgFrame{
	overflow: hidden;
}
.imgFrame img{
	overflow: hidden;
}
/*画像縮小アニメーション end
=========================*/