@charset 'utf-8';

/* ------------------------------------------------------------ TOP ------------------------------------------------------------ */


/*--------------------------------
	ファーストビュー スライド
--------------------------------*/

.top_slide {
	position: relative;
}

.top_slide .top_logo {
	position: absolute;
	top: calc(( 100vh - 200px - 50px ) / 2);
	left: calc(( 100vw - 50px ) / 2);
	z-index: 999;
}

.top_slide .top_logo svg {
	display: block;
	width: 41px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: animation;
}

.top_slide .top_logo .logo_tate1 {
	height: 66px;
    -webkit-animation: topLogo 2s ease-out 0.5s both;
    animation: topLogo 2s ease-out 0.5s both;
}
.top_slide .top_logo  .logo_tate2 {
	height: 41px;
    -webkit-animation: topLogo 2s ease-out 1s both;
    animation: topLogo 2s ease-out 1s both;
}
.top_slide .top_logo .logo_tate3 {
	height: 61px;
    -webkit-animation: topLogo 2s ease-out 1.5s both;
    animation: topLogo 2s ease-out 1.5s both;
}
@-webkit-keyframes topLogo {
	0% { opacity: 0; filter: blur(5px); -webkit-transform: translate3d(0, 30px, 0) scale(1.2); }
	100% { opacity: 1; filter: blur(0); -webkit-transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes topLogo {
	0% { opacity: 0; filter: blur(5px); transform: translate3d(0, 30px, 0) scale(1.2); }
	100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); }
}



/* トップ お知らせ */

.top_news {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	line-height: 50px;
	padding: 0 3%;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.7); 
	font-size: 1.3rem;
	z-index: 1;
}

.top_news em {
	display: inline-block;
	margin: 0 3% 0 0;
	padding: 0 3% 0 0;
	border-right: 1px solid #ccc;
	line-height: 1.4;
}

.top_news span {
	display: inline-block;
	margin: 0 10px 0 0;
}

.top_news.io {
	opacity: 0;
	-webkit-transition: opacity 1.5s ease 2s;
	transition: opacity 1.5s ease 2s;
}

.top_news.io.move {
	opacity: 1 !important;
}


/*--------------------------------
	slider
--------------------------------*/

.swiper-wrapper {
	transition-timing-function: ease-in-out;
}

.top_slide .swiper-container {
	width: 100%;
	height: 100vh;
	opacity: 0;
}

.top_slide .swiper-container .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-family: 'object-fit: cover;'
}

/* 縮小 */
.top_slide .kbeIn.swiper-slide-active img,
.top_slide .kbeIn.swiper-slide-duplicate-active img,
.top_slide .kbeIn.swiper-slide-prev img {
	-webkit-animation: kbeIn linear 18s infinite normal;
	animation: kbeIn linear 18s infinite normal;
}
@-webkit-keyframes kbeIn {
	0% { -webkit-transform: scale(1.2); }
	75% { -webkit-transform: scale(1); }
	100% { -webkit-transform: scale(1); }
}
@keyframes kbeIn {
	0% { transform: scale(1.2); }
	75% { transform: scale(1); }
	100% { transform: scale(1); }
}

/* 縮小 + 右上移動 */
.top_slide .kbeInRU.swiper-slide-active img,
.top_slide .kbeInRU.swiper-slide-duplicate-active img,
.top_slide .kbeInRU.swiper-slide-prev img {
	-webkit-animation: kbeInRU linear 18s infinite normal;
	animation: kbeInRU linear 18s infinite normal;
}
@-webkit-keyframes kbeInRU {
	0% { -webkit-transform: scale(1.2) translate3d(-5%, 5%, 0); }
	75% { -webkit-transform: scale(1) translate3d(0, 0, 0); }
	100% { -webkit-transform: scale(1) translate3d(0, 0, 0); }
}
@keyframes kbeInRU {
	0% { transform: scale(1.2) translate3d(-5%, 5%, 0); }
	75% { transform: scale(1) translate3d(0, 0, 0); }
	100% { transform: scale(1) translate3d(0, 0, 0); }
}

/* 縮小 + 左上移動 */
.top_slide .kbeInLU.swiper-slide-active img,
.top_slide .kbeInLU.swiper-slide-duplicate-active img,
.top_slide .kbeInLU.swiper-slide-prev img {
	-webkit-animation: kbeInLU linear 18s infinite normal;
	animation: kbeInLU linear 18s infinite normal;
}
@-webkit-keyframes kbeInLU {
	0% { -webkit-transform: scale(1.2) translate3d(5%, 5%, 0); }
	75% { -webkit-transform: scale(1) translate3d(0, 0, 0); }
	100% { -webkit-transform: scale(1) translate3d(0, 0, 0); }
}
@keyframes kbeInRU {
	0% { transform: scale(1.2) translate3d(5%, 5%, 0); }
	75% { transform: scale(1) translate3d(0, 0, 0); }
	100% { transform: scale(1) translate3d(0, 0, 0); }
}

/* 縮小 + 右下移動 */
.top_slide .kbeInRD.swiper-slide-active img,
.top_slide .kbeInRD.swiper-slide-duplicate-active img,
.top_slide .kbeInRD.swiper-slide-prev img {
	-webkit-animation: kbeInRD linear 18s infinite normal;
	animation: kbeInRD linear 18s infinite normal;
}
@-webkit-keyframes kbeInRD {
	0% { -webkit-transform: scale(1.2) translate3d(-5%, -5%, 0); }
	75% { -webkit-transform: scale(1) translate3d(0, 0, 0); }
	100% { -webkit-transform: scale(1) translate3d(0, 0, 0); }
}
@keyframes kbeInRD {
	0% { transform: scale(1.2) translate3d(-5%, -5%, 0); }
	75% { transform: scale(1) translate3d(0, 0, 0); }
	100% { transform: scale(1) translate3d(0, 0, 0); }
}

/* 縮小 + 左下移動 */
.top_slide .kbeInLD.swiper-slide-active img,
.top_slide .kbeInLD.swiper-slide-duplicate-active img,
.top_slide .kbeInLD.swiper-slide-prev img {
	-webkit-animation: kbeInLD linear 18s infinite normal;
	animation: kbeInLD linear 18s infinite normal;
}
@-webkit-keyframes kbeInLD {
	0% { -webkit-transform: scale(1.2) translate3d(5%, -5%, 0); }
	75% { -webkit-transform: scale(1) translate3d(0, 0, 0); }
	100% { -webkit-transform: scale(1) translate3d(0, 0, 0); }
}
@keyframes kbeInLD {
	0% { transform: scale(1.2) translate3d(5%, -5%, 0); }
	75% { transform: scale(1) translate3d(0, 0, 0); }
	100% { transform: scale(1) translate3d(0, 0, 0); }
}

/* 拡大 */
.top_slide .kbeOut.swiper-slide-active img,
.top_slide .kbeOut.swiper-slide-duplicate-active img,
.top_slide .kbeOut.swiper-slide-prev img {
	-webkit-animation: kbeOut linear 18s infinite normal;
	animation: kbeOut linear 18s infinite normal;
}
@-webkit-keyframes kbeOut {
	0% { -webkit-transform: scale(1); }
	75% { -webkit-transform: scale(1.2); }
	100% { -webkit-transform: scale(1.2); }
}
@keyframes kbeOut {
	0% { transform: scale(1); }
	75% { transform: scale(1.2); }
	100% { transform: scale(1.2); }
}

/* 拡大 + 右上移動 */
.top_slide .kbeOutRU.swiper-slide-active img,
.top_slide .kbeOutRU.swiper-slide-duplicate-active img,
.top_slide .kbeOutRU.swiper-slide-prev img {
	-webkit-animation: kbeOutRU linear 18s infinite normal;
	animation: kbeOutRU linear 18s infinite normal;
}
@-webkit-keyframes kbeOutRU {
	0% { -webkit-transform: scale(1) translate3d(0, 0, 0); }
	75% { -webkit-transform: scale(1.2) translate3d(-5%, 5%, 0); }
	100% { -webkit-transform: scale(1.2) translate3d(-5%, 5%, 0); }
}
@keyframes kbeOutRU {
	0% { transform: scale(1) translate3d(0, 0, 0); }
	75% { transform: scale(1.2) translate3d(-5%, 5%, 0); }
	100% { transform: scale(1.2) translate3d(-5%, 5%, 0); }
}

/* 拡大 + 左上移動 */
.top_slide .kbeOutLU.swiper-slide-active img,
.top_slide .kbeOutLU.swiper-slide-duplicate-active img,
.top_slide .kbeOutLU.swiper-slide-prev img {
	-webkit-animation: kbeOutLU linear 18s infinite normal;
	animation: kbeOutLU linear 18s infinite normal;
}
@-webkit-keyframes kbeOutLU {
	0% { -webkit-transform: scale(1) translate3d(0, 0, 0); }
	75% { -webkit-transform: scale(1.2) translate3d(-5%, -5%, 0); }
	100% { -webkit-transform: scale(1.2) translate3d(-5%, -5%, 0); }
}
@keyframes kbeOutLU {
	0% { transform: scale(1) translate3d(0, 0, 0); }
	75% { transform: scale(1.2) translate3d(-5%, -5%, 0); }
	100% { transform: scale(1.2) translate3d(-5%, -5%, 0); }
}

/* 拡大 + 右下移動 */
.top_slide .kbeOutRD.swiper-slide-active img,
.top_slide .kbeOutRD.swiper-slide-duplicate-active img,
.top_slide .kbeOutRD.swiper-slide-prev img {
	-webkit-animation: kbeOutRD linear 18s infinite normal;
	animation: kbeOutRD linear 18s infinite normal;
}
@-webkit-keyframes kbeOutRD {
	0% { -webkit-transform: scale(1) translate3d(0, 0, 0); }
	75% { -webkit-transform: scale(1.2) translate3d(5%, 5%, 0); }
	100% { -webkit-transform: scale(1.2) translate3d(5%, 5%, 0); }
}
@keyframes kbeOutRD {
	0% { transform: scale(1.2) translate3d(0, 0, 0); }
	75% { transform: scale(1.2) translate3d(5%, 5%, 0); }
	100% { transform: scale(1.2) translate3d(5%, 5%, 0); }
}


/* 拡大 + 左下移動 */
.top_slide .kbeOutLD.swiper-slide-active img,
.top_slide .kbeOutLD.swiper-slide-duplicate-active img,
.top_slide .kbeOutLD.swiper-slide-prev img {
	-webkit-animation: kbeOutLD linear 18s infinite normal;
	animation: kbeOutLD linear 18s infinite normal;
}
@-webkit-keyframes kbeOutLD {
	0% { -webkit-transform: scale(1) translate3d(0, 0, 0); }
	75% { -webkit-transform: scale(1.2) translate3d(-5%, 5%, 0); }
	100% { -webkit-transform: scale(1.2) translate3d(-5%, 5%, 0); }
}
@keyframes kbeOutLD {
	0% { -webkit-transform: scale(1) translate3d(0, 0, 0); }
	75% { -webkit-transform: scale(1.2) translate3d(-5%, 5%, 0); }
	100% { -webkit-transform: scale(1.2) translate3d(-5%, 5%, 0); }
}



/*--------------------------------
	トップコンセプト
--------------------------------*/

.top_concept .inner {
	padding: 200px 10%;
}

.top_concept .inner h2 {
	font-size: 3rem;
	margin: 0 auto 30px;
	letter-spacing: 0.2em;
}

.top_concept .inner p {
	line-height: 3;
	letter-spacing: 0.1em;
}

/* top_parallaxするエリア 共通 */

.top_concept .parallax {
	width: 100%;
	height: 450px;
	margin: 0 auto;
	text-align: center;
	position: relative;
}

.top_concept .parallax strong {
	display: block;
	padding: 80px 0 0;
}

.top_concept .parallax strong img {
	display: block;
	width: 25px;
	height: auto;
	margin: 10px auto 0;
}

.top_concept .parallax .link_detail a {
	position: absolute;
	bottom: 30px;
	left: calc(50% - 80px);
	display: block;
	width: 160px;
	height: 50px;
	line-height: 50px;
	font-size: 1.4rem;
	border: 1px solid #fff;
	overflow: hidden;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.1);  
}

.top_concept .parallax .link_detail a:link,
.top_concept .parallax .link_detail a:visited { color:#fff; background-color: rgba(255, 255, 255, 0.1); }
.top_concept .parallax .link_detail a:hover,
.top_concept .parallax .link_detail a:active 	{ color:#000; background-color: rgba(255, 255, 255, 1); }


/*--------------------------------
	お菓子
--------------------------------*/

.top_okashi {
	text-align: center;
}

.top_okashi h2 {
	padding: 150px 0 50px;
}

.top_okashi h2 img {
	display: block;
	width: 25px;
	height: auto;
	margin: 0 auto 10px;
}

/* お菓子スライド　カルーセル */

.top_okashi .slide_carousel .swiper-slide {
	position: relative;
}

.okashi_list_item.io.upS {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity: 1;
}


/* 季節限定 お菓子 */

.okashi_seasonal {
	position: relative;
	padding: 150px 0 100px;
}

.okashi_seasonal h3 {
	position: absolute;
	left: 10%;
	top: 0;
	z-index: 999;
}

.okashi_seasonal h3 img {
	display: block;
	width: 25px;
	margin: 0 0 5px 0;
}

.okashi_seasonal .swiper-button-disabled {
    display: none;
}


/* 常設お菓子 */

.top_okashi_standing {
	font-size: 0;
	padding: 0 0 100px;
}

.top_okashi_standing ul li {
	position: relative;
	display: inline-block;
	width: 47.5%;
	margin: 120px 0 0;
}

.top_okashi_standing ul li:nth-of-type(2n+1) {
	margin: 0 5% 0 0;
}

.top_okashi_standing ul li > a {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.top_okashi_standing ul li > a img {
	-webkit-transition: 3s;
	transition: 3s;
	filter: brightness(100%) saturate(90%);
}

.top_okashi_standing ul li:hover > a img {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	opacity: 1;
	filter: brightness(110%) saturate(100%);
}

.top_okashi_standing ul li h3 {
	position: absolute;
	top: -65px;
	left: 10%;
	z-index: 1;
}

.top_okashi_standing ul li h3 a span {
	display: block;
	margin: 0 0 10px;
}

.top_okashi_standing ul li h3 a span img {
	width: 25px;
	height: auto;
}

.top_okashi_standing ul li p {
	font-size: 1.4rem;
	margin: 17px auto 0;
}


/* ほこほこ */

.top_okashi_standing ul li:nth-of-type(1):hover h3 a span:nth-of-type(1) img {
	-webkit-animation: hokohoko_animation 3s ease 0.1s infinite;
	animation: hokohoko_animation 3s ease 0.1s infinite;
}
.top_okashi_standing ul li:nth-of-type(1):hover h3 a span:nth-of-type(2) img {
	-webkit-animation: hokohoko_animation 3s ease 0.5s infinite;
	animation: hokohoko_animation 3s ease 0.5s infinite;
}
.top_okashi_standing ul li:nth-of-type(1):hover h3 a span:nth-of-type(3) img {
	-webkit-animation: hokohoko_animation 3s ease 1s infinite;
	animation: hokohoko_animation 3s ease 1s infinite;
}
.top_okashi_standing ul li:nth-of-type(1):hover h3 a span:nth-of-type(4) img {
	-webkit-animation: hokohoko_animation 3s ease 1.5s infinite;
	animation: hokohoko_animation 3s ease 1.5s infinite;
}

@-webkit-keyframes hokohoko_animation {
	0% { filter: blur(0); opacity: 1; -webkit-transform: translate3d( 0, 0, 0); }
	80% { filter: blur(5px); opacity: 0; -webkit-transform: translate3d( 0, -10px, 0); }
	81% { filter: blur(5px); opacity: 0; -webkit-transform: translate3d( 0, 10px, 0); }
	100% { filter: blur(0); opacity: 1; -webkit-transform: translate3d( 0, 0, 0); }
}
@keyframes hokohoko_animation {
	0% { filter: blur(0); opacity: 1; transform: translate3d( 0, 0, 0); }
	80% { filter: blur(5px); opacity: 0; transform: translate3d( 0, -10px, 0); }
	81% { filter: blur(5px); opacity: 0; transform: translate3d( 0, 10px, 0); }
	100% { filter: blur(0); opacity: 1; transform: translate3d( 0, 0, 0); }
}

/* さくさく */

.top_okashi_standing ul li:nth-of-type(2):hover h3 a span:nth-of-type(1) img {
	-webkit-animation: sakusaku_animation 3s ease 0.1s infinite;
	animation: sakusaku_animation 3s ease 0.1s infinite;
}
.top_okashi_standing ul li:nth-of-type(2):hover h3 a span:nth-of-type(2) img {
	-webkit-animation: sakusaku_animation 3s ease 0.5s infinite;
	animation: sakusaku_animation 3s ease 0.5s infinite;
}
.top_okashi_standing ul li:nth-of-type(2):hover h3 a span:nth-of-type(3) img {
	-webkit-animation: sakusaku_animation 3s ease 1s infinite;
	animation: sakusaku_animation 3s ease 1s infinite;
}
.top_okashi_standing ul li:nth-of-type(2):hover h3 a span:nth-of-type(4) img {
	-webkit-animation: sakusaku_animation 3s ease 1.5s infinite;
	animation: sakusaku_animation 3s ease 1.5s infinite;
}

@-webkit-keyframes sakusaku_animation {
	0% { -webkit-transform: rotate(10deg) translate3d( 2px, -2px, 0); }
	20% { -webkit-transform: rotate(10deg) translate3d( 2px, -2px, 0);}
	21% { -webkit-transform: rotate(-10deg) translate3d( -1px, -1px, 0); }
	40% { -webkit-transform: rotate(-10deg) translate3d( -1px, -1px, 0); }
	41% { -webkit-transform: rotate(10deg) translate3d( 5px, 5px, 0); }
	60% { -webkit-transform: rotate(10deg) translate3d( 5px, 5px, 0); }
	61% { -webkit-transform: rotate(-15deg) translate3d( 0px, 0px, 0); }
	80% { -webkit-transform: rotate(-15deg) translate3d( 0px, 0px, 0); }
	81% { -webkit-transform: rotate(2deg) translate3d( -2px, 2px, 0); }
	99% { -webkit-transform: rotate(2deg) translate3d( -2px, 2px, 0); }
	100% { -webkit-transform: rotate(10deg) translate3d( 2px, -2px, 0); }
}
@keyframes sakusaku_animation {
	0% { transform: rotate(10deg) translate3d( 2px, -2px, 0); }
	20% { transform: rotate(10deg) translate3d( 2px, -2px, 0);}
	21% { transform: rotate(-10deg) translate3d( -1px, -1px, 0); }
	40% { transform: rotate(-10deg) translate3d( -1px, -1px, 0); }
	41% { transform: rotate(10deg) translate3d( 5px, 5px, 0); }
	60% { transform: rotate(10deg) translate3d( 5px, 5px, 0); }
	61% { transform: rotate(-15deg) translate3d( 0px, 0px, 0); }
	80% { transform: rotate(-15deg) translate3d( 0px, 0px, 0); }
	81% { transform: rotate(2deg) translate3d( -2px, 2px, 0); }
	99% { transform: rotate(2deg) translate3d( -2px, 2px, 0); }
	100% { transform: rotate(10deg) translate3d( 2px, -2px, 0); }
}

/* もちもち */

.top_okashi_standing ul li:nth-of-type(3):hover h3 a span:nth-of-type(1) img {
	-webkit-animation: mochimochi_animation 3s ease 0.1s infinite alternate;
	animation: mochimochi_animation 3s ease 0.1s infinite alternate;
}
.top_okashi_standing ul li:nth-of-type(3):hover h3 a span:nth-of-type(2) img {
	-webkit-animation: mochimochi_animation 3s ease 0.5s infinite alternate;
	animation: mochimochi_animation 3s ease 0.5s infinite alternate;
}
.top_okashi_standing ul li:nth-of-type(3):hover h3 a span:nth-of-type(3) img {
	-webkit-animation: mochimochi_animation 3s ease 1s infinite alternate;
	animation: mochimochi_animation 3s ease 1s infinite alternate;
}
.top_okashi_standing ul li:nth-of-type(3):hover h3 a span:nth-of-type(4) img {
	-webkit-animation: mochimochi_animation 3s ease 1.5s infinite alternate;
	animation: mochimochi_animation 3s ease 1.5s infinite alternate;
}

@-webkit-keyframes mochimochi_animation {
	0% { -webkit-transform: scale(1); }
	30% { -webkit-transform: scale(1.5); }
	60% { -webkit-transform: scale(0.5); }
	100% { -webkit-transform: scale(1); }
}

@keyframes mochimochi_animation {
	0% { transform: scale(1); }
	30% { transform: scale(1.5); }
	60% { transform: scale(0.5); }
	100% { transform: scale(1); }
}

/* つるつる */

.top_okashi_standing ul li:nth-of-type(4):hover h3 a span:nth-of-type(1) img {
	-webkit-animation: turuturu_animation 2s ease 0.1s infinite alternate;
	animation: turuturu_animation 2s ease 0.1s infinite alternate;
}
.top_okashi_standing ul li:nth-of-type(4):hover h3 a span:nth-of-type(2) img {
	-webkit-animation: turuturu_animation 2s ease 0.5s infinite alternate;
	animation: turuturu_animation 2s ease 0.5s infinite alternate;
}
.top_okashi_standing ul li:nth-of-type(4):hover h3 a span:nth-of-type(3) img {
	-webkit-animation: turuturu_animation 2s ease 1s infinite alternate;
	animation: turuturu_animation 2s ease 1s infinite alternate;
}
.top_okashi_standing ul li:nth-of-type(4):hover h3 a span:nth-of-type(4) img {
	-webkit-animation: turuturu_animation 2s ease 1.5s infinite alternate;
	animation: turuturu_animation 2s ease 1.5s infinite alternate;
}

@-webkit-keyframes turuturu_animation {
	0% { -webkit-transform: translate3d( 0, 0, 0); }
	33% { -webkit-transform: translate3d( 15px, 0, 0); }
	66% { -webkit-transform: translate3d( -15px, 0, 0); }
	100% { -webkit-transform: translate3d( 0, 0, 0); }
}
@keyframes turuturu_animation {
	0% { transform: translate3d( 0, 0, 0); }
	33% { transform: translate3d( 15px, 0, 0); }
	66% { transform: translate3d( -15px, 0, 0); }
	100% { transform: translate3d( 0, 0, 0); }
}

/* まーめいどバナー */

.okashi_banner {
    width: 400px;
    margin: 60px auto 150px;
}

.okashi_banner a {
    display: block;
}

.okashi_banner a img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #eee;
}

.okashi_banner a:hover img {
    opacity: 0.6;
}


/*--------------------------------
	店舗
--------------------------------*/

.top_tenpo .parallax {
	width: 100%;
	height: 450px;
	margin: 100px auto;
	text-align: center;
	position: relative;
}

.top_tenpo .parallax strong {
	display: block;
	padding: 80px 0 0;
}

.top_tenpo .parallax strong img {
	display: block;
	width: 25px;
	height: auto;
	margin: 10px auto 0;
}

.top_tenpo .parallax .link_detail a {
	position: absolute;
	bottom: 30px;
	left: calc(50% - 80px);
	display: block;
	width: 160px;
	height: 50px;
	line-height: 50px;
	font-size: 1.4rem;
	border: 1px solid #fff;
	overflow: hidden;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.1);  
}

.top_tenpo .parallax .link_detail a:link,
.top_tenpo .parallax .link_detail a:visited { color:#fff; background-color: rgba(255, 255, 255, 0.1); }
.top_tenpo .parallax .link_detail a:hover,
.top_tenpo .parallax .link_detail a:active 	{ color:#000; background-color: rgba(255, 255, 255, 1); }

/*--------------------------------
	Instagram
--------------------------------*/

.top_insta {
	padding: 150px 5% 0;
	text-align: center;
}

/*
.top_insta ul {
	font-size: 0;
	margin: 0 auto 50px;
}

.top_insta ul li {
	width: 25%;
	padding: 0 0.5%;
	margin: 0 0 1% 0;
	display: inline-block;
	vertical-align: top;
	font-size: 1.3rem;
}

.top_insta ul li a {
	display: block;
	position: relative;
	width: 100%;
	padding-top: 100%;
	overflow: hidden;
}

.top_insta ul li a span {
	display: none;
}

.top_insta ul li a img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	-webkit-transition: 0.8s;
	transition: 0.8s;
	object-fit: cover;
	font-family: 'object-fit: cover;'
}

.top_insta ul li a:hover img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
*/

.top_insta .link_insta {
    margin: 50px auto 0;
}

.top_insta .link_insta a .icon_sns_insta {
	width: 20px;
	height: 20px;
}

.top_insta .link_insta a span {
	display: block;
	font-size: 1.3rem;
}

.top_insta p {
	margin: 30px auto 0;
}


 /* インスタ出現アニメーション */
 
/*
.top_insta ul li {
	-webkit-transition: all 1.8s ease 0.3s;
	transition: all 1.8s ease 0.3s;
	opacity: 0;
	-webkit-transform: translate3d(0, 15px, 0);
	transform: translate3d(0, 15px, 0);
}

.top_insta ul li:nth-of-type(1) {
	-webkit-transition: opacity 1.5s ease 0s, -webkit-transform 1.5s ease 0s;
	transition: opacity 1.5s ease 0s, transform 1.5s ease 0s;
}
.top_insta ul li:nth-of-type(2) {
	-webkit-transition: opacity 1.5s ease 0.2s, -webkit-transform 1.5s ease 0.2s;
	transition: opacity 1.5s ease 0.2s, transform 1.5s ease 0.2s;
}
.top_insta ul li:nth-of-type(3) {
	-webkit-transition: opacity 1.5s ease 0.4s, -webkit-transform 1.5s ease 0.4s;
	transition: opacity 1.5s ease 0.4s, transform 1.5s ease 0.4s;
}
.top_insta ul li:nth-of-type(4) {
	-webkit-transition: opacity 1.5s ease 0.6s, -webkit-transform 1.5s ease 0.6s;
	transition: opacity 1.5s ease 0.6s, transform 1.5s ease 0.6s;
}
.top_insta ul li:nth-of-type(5) {
	-webkit-transition: opacity 1.5s ease 0.8s, -webkit-transform 1.5s ease 0.8s;
	transition: opacity 1.5s ease 0.8s, transform 1.5s ease 0.8s;
}
.top_insta ul li:nth-of-type(6) {
	-webkit-transition: opacity 1.5s ease 1s, -webkit-transform 1.5s ease 1s;
	transition: opacity 1.5s ease 1s, transform 1.5s ease 1s;
}
.top_insta ul li:nth-of-type(7) {
	-webkit-transition: opacity 1.5s ease 1.2s, -webkit-transform 1.5s ease 1.2s;
	transition: opacity 1.5s ease 1.2s, transform 1.5s ease 1.2s;
}
.top_insta ul li:nth-of-type(8) {
	-webkit-transition: opacity 1.5s ease 1.4s, -webkit-transform 1.5s ease 1.4s;
	transition: opacity 1.5s ease 1.4s, transform 1.5s ease 1.4s;
}
.top_insta ul.move li {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0) scale(1);
	transform: translate3d(0, 0, 0) scale(1);
}
*/


/*--------------------------------
    EXPOムービー
--------------------------------*/

.top_movie .inner {
    padding: 150px 10% 50px;
}

.top_movie .inner video {
    width: 100%;
    height: auto;
}

.top_movie .inner > div {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 0.8em auto 1em;
}

.top_movie .inner > div p {
    margin: 0 1em 0 0;
    width: calc(100% - 200px - 1em);
}

.top_movie .inner > div strong {
    display: block;
    width: 200px;
}

.top_movie .inner > div strong a img {
    width: 100%;
    height: auto;
}

.top_movie .inner > p {

}

.top_movie .inner > p a {
  text-decoration: underline;
}

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

    .top_movie .inner > div {
        display: block;
    }

    .top_movie .inner > div p {
      width: 100%;
        margin: 0 0 1em 0;
    }

    .top_movie .inner > div strong {
        width: 180px;
    }

}

/* ================================================== RESPONSIVE ================================================== */

@media only screen and (max-width: 812px) {
	
	/*--------------------------------
		ファーストビュー スライド
	--------------------------------*/
	
	/* トップ お知らせ */
	
	.top_news {
		padding: 10px 3%;
		height: auto;
		line-height: normal;
		font-size: 1.2rem;
	}
	
	.top_news em {
		display: block;
		margin: 0 0 3px;
		padding: 0;
		border: none;
	}
	
	.top_news em:after {
		display: block;
		content: "";
		width: 10px;
		height: 1px;
		margin: 5px 0 0;
		background-color: #aaa;
	}
	
	.top_news span {
		display: inline-block;
		margin: 0 10px 0 0;
	}
		
	
	/*--------------------------------
		slider
	--------------------------------*/
	.slide_carousel {
		padding: 0 5%;
	}
	

		
	/*--------------------------------
		トップコンセプト
	--------------------------------*/
	
	.top_concept .inner {
		padding: 50px 10%;
	}
	
	.top_concept .inner h2 {
		font-size: 2rem;
		margin: 0 auto 20px;
	}
	
	.top_concept .inner p {
		line-height: 2;
	}
	
	.top_concept .inner p br {
		display: none;
	}
	
	/* top_parallaxするエリア 共通 */
	
	.top_concept .parallax {
		height: 375px;
	}
	
	.top_concept .parallax strong {
		padding: 30px 0 0;
	}
	
	.top_concept .parallax strong img {
		margin: 5px auto 0;
	}
	
	.top_concept .parallax .link_detail a:link,
	.top_concept .parallax .link_detail a:visited { color:#fff; background-color: rgba(255, 255, 255, 0.1); }
	.top_concept .parallax .link_detail a:hover,
	.top_concept .parallax .link_detail a:active 	{ color:#fff; background-color: rgba(255, 255, 255, 0.1); }

	/*--------------------------------
		お菓子
	--------------------------------*/
	
	.top_okashi h2 {
		padding: 50px 0 50px;
	}
	
	.top_okashi h2 img {
		margin: 0 auto 5px;
	}
	
	/* 季節限定 お菓子 */
	
	.okashi_seasonal {
		position: relative;
		padding: 80px 0;
	}
	
	.okashi_seasonal h3 {
		position: absolute;
		left: 10%;
		top: 0;
		z-index: 999;
	}
	
	.okashi_seasonal h3 img {
		width: 20px;
		margin: 0 0 5px 0;
	}
	
	/* 常設お菓子 */
	
	.top_okashi_standing {
		padding: 0 0 50px;
	}
	
	.top_okashi_standing ul li {
		display: block;
		width: 100%;
		margin: 80px auto 0;
	}
	
	.top_okashi_standing ul li:nth-of-type(2n+1) {
		margin: 80px auto 0;
	}
		
	.top_okashi_standing ul li h3 {
		top: -50px;
		left: 5%;
	}
	
	.top_okashi_standing ul li:nth-of-type(2n) h3 {
		left: auto;
		right: 5%;
	}
	
	.top_okashi_standing ul li h3 a span {
		display: block;
		margin: 0 0 5px;
	}
	
	.top_okashi_standing ul li p {
		font-size: 1.4rem;
		margin: 15px auto 0;
	}
	
	.top_okashi_standing ul li > a img {
		filter: brightness(100%) saturate(100%);
	}
	
	.top_okashi_standing ul li:hover > a img {
		-webkit-transform: scale(1);
		transform: scale(1);
		filter: brightness(100%) saturate(100%);
	}


	/* ほこほこ */
	.top_okashi_standing ul li:nth-of-type(1):hover h3 a span:nth-of-type(1) img {
		-webkit-animation: none;
		animation: none;
	}
	.top_okashi_standing ul li:nth-of-type(1):hover h3 a span:nth-of-type(2) img {
		-webkit-animation: none;
		animation: none;
	}
	.top_okashi_standing ul li:nth-of-type(1):hover h3 a span:nth-of-type(3) img {
		-webkit-animation: none;
		animation: none;
	}
	.top_okashi_standing ul li:nth-of-type(1):hover h3 a span:nth-of-type(4) img {
		-webkit-animation: none;
		animation: none;
	}
	
	/* さくさく */
	.top_okashi_standing ul li:nth-of-type(2):hover h3 a span:nth-of-type(1) img {
		-webkit-animation: none;
		animation: none;
	}
	.top_okashi_standing ul li:nth-of-type(2):hover h3 a span:nth-of-type(2) img {
		-webkit-animation: none;
		animation: none;
	}
	.top_okashi_standing ul li:nth-of-type(2):hover h3 a span:nth-of-type(3) img {
		-webkit-animation: none;
		animation: none;
	}
	.top_okashi_standing ul li:nth-of-type(2):hover h3 a span:nth-of-type(4) img {
		-webkit-animation: none;
		animation: none;
	}
	
	/* もちもち */
	.top_okashi_standing ul li:nth-of-type(3):hover h3 a span:nth-of-type(1) img {
		-webkit-animation: none;
		animation: none;
	}
	.top_okashi_standing ul li:nth-of-type(3):hover h3 a span:nth-of-type(2) img {
		-webkit-animation: none;
		animation: none;
	}
	.top_okashi_standing ul li:nth-of-type(3):hover h3 a span:nth-of-type(3) img {
		-webkit-animation: none;
		animation: none;
	}
	.top_okashi_standing ul li:nth-of-type(3):hover h3 a span:nth-of-type(4) img {
		-webkit-animation: none;
		animation: none;
	}
	
	/* つるつる */
	.top_okashi_standing ul li:nth-of-type(4):hover h3 a span:nth-of-type(1) img {
		-webkit-animation: none;
		animation: none;
	}
	.top_okashi_standing ul li:nth-of-type(4):hover h3 a span:nth-of-type(2) img {
		-webkit-animation: none;
		animation: none;
	}
	.top_okashi_standing ul li:nth-of-type(4):hover h3 a span:nth-of-type(3) img {
		-webkit-animation: none;
		animation: none;
	}
	.top_okashi_standing ul li:nth-of-type(4):hover h3 a span:nth-of-type(4) img {
		-webkit-animation: none;
		animation: none;
	}

    /* まーめいどバナー */

    .okashi_banner {
        width: 70%;
        margin: 60px auto 80px;
    }
	
	/*--------------------------------
		店舗
	--------------------------------*/
	
	.top_tenpo .parallax {
		height: 400px;
		margin: 50px auto 0;
	}
	
	.top_tenpo .parallax strong {
		display: block;
		padding: 30px 0 0;
	}
	
	.top_tenpo .parallax strong img {
		margin: 5px auto 0;
	}

	.top_tenpo .parallax .link_detail a:link,
	.top_tenpo .parallax .link_detail a:visited { color:#fff; background-color: rgba(255, 255, 255, 0.1); }
	.top_tenpo .parallax .link_detail a:hover,
	.top_tenpo .parallax .link_detail a:active 	{ color:#fff; background-color: rgba(255, 255, 255, 0.1); }
	
	/*--------------------------------
		Instagram
	--------------------------------*/
	
	.top_insta {
		padding: 100px 5% 50px;
		text-align: center;
	}
	
/*
	.top_insta ul {
		margin: 0 auto 30px;
	}
	
	.top_insta ul li {
		width: 50%;
		padding: 0 1%;
		margin: 0 0 2% 0;
	}

	.top_insta ul li a:hover img {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
*/

    .top_insta .link_insta {
        margin: 30px auto 0;
    }
    
	.top_insta p {
		margin: 20px auto 0;
	}
    
    
    /*--------------------------------
        EXPOムービー
    --------------------------------*/

    .top_movie .inner {
        padding: 100px 10% 50px;
    }


	
}