/* ####################################################
	front-page
#################################################### */

/* ====================================
	main
==================================== */
main {
	margin: 127px 0 0 0;
	overflow-x: hidden;
	display: block;
}

.slide_inner {
	width: auto;
}

.slide_inner img {
	width: 100%;
	height: auto;
}

.slick-dots li button:before {
	font-size: 12px;
}

.main__slider {
	background-color: #F3F1F0; /* --color-bg */
	opacity: 0;
	transition: 0.1s linear;
}
.main__slider.slick-initialized{
	opacity: 1;
}
.main__slider .slick-slide {
	transition: 0.3s;
	max-width: 760px;
}
.main__slider .slick-slide:not(.slick-center) {
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
}
#thumbnail-list {
	width: 1000px;
	margin: 20px auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

#thumbnail-list a {
	flex: 0 1 90px;
	margin-bottom: 10px;
	box-sizing: border-box;
	position: relative;
	outline: 0;
	margin: 0 5px;
}

#thumbnail-list a::after {
	content: '';
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: .3s opacity linear;
}
#thumbnail-list a.thumbnail-current{
	outline: 2px solid #b61e3b; /* --color-accent */
}
#thumbnail-list a.thumbnail-current::after {
	opacity: 0;
}

#thumbnail-list a.thumbnail-current::after img {
	width: 100%;
	margin: 0 auto;
}

.slick-slide a {
	background-color: #000;
}

.slick-slide img {
	background-color: #000;
	opacity: 0.5;
	transition: 0.3s;
}

.slick-slide.slick-center img {
	opacity: 1;
}

.slick-prev,
.slick-next {
	z-index: 2;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-image: url("../_front-page/slide_btn_icon.svg");
	background-position: center center;
	background-size: 25px;
	background-repeat: no-repeat;
}

.slick-prev,
.slick-next,
.slick-prev:hover,
.slick-next:hover,
.slick-prev:focus,
.slick-next:focus {
	background-image: url("../_front-page/slide_btn_icon.svg");
	background-position: center left;
	background-size: 25px;
	background-repeat: no-repeat;
}

.slick-next,
.slick-next:hover {
	transform: translate(0, -50%) rotate(-180deg);
}

.slick-prev:before,
.slick-next:before {
	display: none;
}

.slick-prev {
	left: calc(50% - (760px/2) - (50px / 2));
}

.slick-next {
	right: calc(50% - (760px/2) - (50px / 2));
}


@media only screen and (max-width: 767px) {
	#thumbnail-list{
		display: none;
	}
	.slick-dotted.slick-slider{
		margin-bottom: 60px;
	}
	.slick-dots{
		bottom: -40px;
	}
	.slick-slide img{
		background-color: #fff;
		width: 100%;
	}
}

@media only screen and (max-width: 414px) {
	main{
		margin: 66px 0 0 0;
	}
}

/* ====================================
	news
==================================== */
.news__area {
	padding: 60px 0;
}

.news__wrap {
	display: flex;
	justify-content: flex-start;
}

.news__area h2 {
	width: 215px;
	font-size: 1.6rem;
	font-weight: 400; /* --font-weight-noto-regular */
	margin: 0 0 30px 0;
}

.news__area ul {
	width: 100%;
	font-size: 1.5rem;
}

.news__area li {
	margin: 0 0 10px 0;
}

.news__area li:last-child {
	margin: 0 0 0 0;
}
.news__area li a{
	transition: 0.3s;
}
.news__area li a:hover{
	display: block;
	opacity: 0.6;
}
.news__area dl {
	display: flex;
	padding-bottom: 10px;
	margin-bottom: 20px;
	border-bottom: 1px solid #b6b6b6; /* --color-border-default */

}

.news__area li:last-child dl {
	margin-bottom: 0;
}

.news__area dt {
	padding: 0 20px 0 0;
}


@media only screen and (max-width: 767px) {
	.news__area{
		padding: 60px 5.025% 0;
	}
	.news__wrap{
		flex-wrap: wrap;
	}
	.news__area dl{
		flex-wrap: wrap;
	}
	.news__area dt{
		padding: 0 0 10px 0;
		width: 100%;
	}
	.news__area dd{
		line-height: 22px;
	}
}

@media only screen and (max-width: 375px){
	.news__area{
		padding: 40px 5.025% 0;
	}
	.news__area dt{
		padding: 0 0 5px 0;
	}
}
@media only screen and (max-width: 320px){
	.news__area h2{
		margin: 0 0 20px 0;
	}
}

/* ====================================
	shop-search
==================================== */
.shop-search__area {
	padding: 30px 0px;
	background-color: #F3F1F0; /* --color-bg */
}
.shop-search__area #shop_search__input{
	max-width: 600px;
    line-height: 60px;
	height: 60px;
    background-size: 60px;
	background-image: none;
}
.shop-search__area form{
	position: relative;
	max-width: 600px;
    margin: 0 auto;
}
.shop-search__area input.search__btn{
	position: absolute;
    top: 1px;
    right: 0;
    transition: 0.3s;
}
.shop-search__area input.search__btn:hover{
	opacity: 0.6;
}
@media only screen and (max-width: 767px) {
	.shop-search__area form{
		max-width: 80%;
	}
	.shop-search__area #shop_search__input{
		max-width: 100%;
	}
}
@media only screen and (max-width: 414px) {
	.shop-search__area #shop_search__input{
		line-height: 50px;
		height: 50px;
		background-size: 50px;
	}
}
@media only screen and (max-width: 375px) {
	.shop-search__area{
		padding: 20px 0px;
	}
	.shop-search__area #shop_search__input{
		line-height: 40px;
		height: 40px;
		background-size: 40px;
		font-size: 1.1rem;
	}
}
@media only screen and (max-width: 360px){
	.shop-search__area form{
		max-width: 85%;
	}
}
@media only screen and (max-width: 320px){
	.shop-search__area form{
		max-width: 90%;
	}
}


/* ====================================
	link__btn
==================================== */
.link__btn__area{
	padding-bottom: 50px;
}
.link__btn__wrapper{
	width: 100%;
	max-width: 918px;
	display: flex;
	margin: 0 auto;
	justify-content: space-around;
}
.link__btn__wrap{
	max-width: 449px;
	width: 100%;
	display: flex;
	transition: 0.3s;
}

.link__btn__wrap.logo__area span:first-child{
	display: inline-block;
	width: 30%;
	background-image: url(yaechika_logo_basic.svg);
	background-repeat: no-repeat;
	background-position: 115% 30%;
	background-size: 95%;
	border: #b6b6b6 solid;
	border-width: 1px 0 1px 1px;
	margin: 0 auto;
}

.link__btn__wrap.jan__area span:first-child{
	display: inline-block;
	width: 30%;
	background-image: url(jan-joosten_icon.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 43%;
	border: #b6b6b6 solid;
	border-width: 1px 0 1px 1px;
	margin: 0 auto;
}

.link__btn{
	display: block;
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
	line-height: 60px;
	font-size: 1.5rem;
	font-weight: 500;
	text-align: center;
	border: 1px solid #b6b6b6;
	background-image: url(../__common_img/right-arrow_icon.svg);
	background-position: right 20px center;
	background-size: 10px;
	background-repeat: no-repeat;
	background-color: #ffffff;
	position: relative;
}


@media only screen and (max-width: 767px) {
	.link__btn__area{
		padding: 80px 5.025%;
	}
	.link__btn__wrapper{
		flex-direction: column;
		max-width: 490px;
	}
	.link__btn__wrap.logo__area{
		margin-bottom: 15px;
	}
}

@media only screen and (max-width: 414px) {
	.link__btn__area{
		padding: 40px  5.025% 30px  5.025%;
	}
}

@media only screen and (max-width: 375px) {
	.link__btn{
		line-height: 52px;
	}
}

/* ====================================
	event_campaign
==================================== */
.event_campaign__area {
	padding: 60px 0;
	position: relative;
}

.event_campaign__area::before {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	border-bottom: 785px solid #F3F1F0; /* --color-bg */
	/* 三角を白にする */
	border-left: 100vw solid transparent;
	z-index: -1;
}

.event_campaign__title {
	margin: 0 0 50px 0;
}

.content_title--wrap h2 span {
	display: block;
}

.content_title--wrap h2 span.en {
	font-size: 3.2rem;
	letter-spacing: 3.2px;
	font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
	margin-bottom: 10px;
}

.content_title--wrap h2 span.ja {
	font-size: 1.2rem;
	font-weight: 400; /* --font-weight-noto-regular */
}

.event_campaign__title svg {
	top: -15px;
}

.event_campaign__title svg.left-object {
	left: 350px;
}

.event_campaign__title svg.right-object {
	right: 350px;
}

.event_campaign__title p {
	text-align: center;
}
@media only screen and (max-width: 1200px) {
	.event_campaign__area::before{
		border-left: 120vw solid transparent;
	}
}
@media screen and (min-width:767px) and ( max-width:1000px) {
	.event_campaign__area::before{
		border-left: 155vw solid transparent;
	}
}
@media only screen and (max-width: 767px) {
	.event_campaign__area{
		padding: 180px 5.025% 60px;
	}
	.event_campaign__title svg{
	    top: 0px;
	}
	.event_campaign__title svg.left-object{
		left: 70px;
	}
	.event_campaign__title svg.right-object{
		right: 70px;
	}
	.event_campaign__area::before{
		border-left: 100vw solid transparent;
		border-bottom: 810px solid #F3F1F0; /* --color-bg */
		top: 0;
		bottom: inherit;
	}
	.event_campaign__area::after{
		content: '';
		position: absolute;
		top: 810px;
		left: 0;
		border-bottom: 92vw solid #F3F1F0; /* --color-bg */
		border-right: 100vw solid transparent;
		z-index: -1;
	}
}
@media only screen and (max-width: 500px) {
	.event_campaign__area::after{
		border-bottom: 98vw solid #F3F1F0;
	}
}
@media only screen and (max-width: 414px) {
	.event_campaign__area{
		padding: 80px 5.025% 30px;
	}
	.event_campaign__area::before{
		border-bottom: 560px solid #F3F1F0; /* --color-bg */
		border-left: 100vw solid transparent;
	}
	.event_campaign__area::after{
	    border-bottom: 124vw solid #F3F1F0;/* --color-bg */
		top: 560px;
	}
	.event_campaign__title svg.left-object{
	    left: 50px;
	}
	.event_campaign__title svg.right-object{
		right: 50px;
	}
}
@media only screen and (max-width: 375px) {
	.event_campaign__title{
		margin: 0 0 20px 0;
	}
	.event_campaign__area{
		padding: 80px 5.025% 30px;
	}
	.event_campaign__area::after{
		border-bottom: 123vw solid #F3F1F0;/* --color-bg */
		top: 545px;
	}
	.event_campaign__area::before{
		border-bottom: 545px solid #F3F1F0;/* --color-bg */
	}
}
@media only screen and (max-width: 360px) {
	.event_campaign__title svg.left-object{
		left: 40px;
	}
	.event_campaign__title svg.right-object{
	    right: 40px;
	}
}
@media only screen and (max-width: 320px){
	.event_campaign__title svg.left-object{
		left: 20px;
	}
	.event_campaign__title svg.right-object{
		right: 20px;
	}
	.event_campaign__area::before{
		border-bottom: 145vw solid #F3F1F0; /* --color-bg */
	}
	.event_campaign__area::after{
		border-bottom: 141vw solid #F3F1F0; /* --color-bg */
		top: 465px;
	}
}
/* ====================================
	shop_news
==================================== */
.shop_news__area {
	padding: 80px 0;
	position: relative;
}

.shop_news__area svg.left-object {
	left: 400px;
}

.shop_news__area svg.right-object {
	right: 400px;
}

.shop_news__area::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	border-bottom: 775px solid #F3F1F0; /* --color-bg */
	/* 三角を白にする */
	border-right: 100vw solid transparent;
	z-index: -1;
}

.shop_news__area .info__flex li {
	background-color: #fff;
	padding: 0 0 20px 0;
	box-shadow: 2px 3px 6px rgb(0 0 0 / 16%);
}

.shop_news__area .info__flex li div,
.shop_news__area .info__flex li p {
	padding: 0 10px;
}

.shop_news__area .info__flex li:nth-child(4n) {
	margin: 0 0 30px 0;
}
.shop_news__area .shop_genre{
	font-size: 1.2rem;
    background-color: #F3F1F0; /* --color-bg */
    padding: 3px 6px !important;
}
.shop_news__area .shop_name{
	font-size: 1.5rem;
    font-weight: 700; /* --font-weight-noto-bold */
    margin: 15px 0 5px 0;
}

@media only screen and (max-width: 767px) {
	.shop_news__area{
		padding: 80px 5.025% 60px;
	}
	.shop_news__area svg.left-object{
	    left: 90px;
	}
	.shop_news__area svg.right-object{
		right: 90px;
	}
	.shop_news__area::before{
		top: 630px;
		transform: translateY(-630px);
		border-right: 0;
		border-left: 100vw solid transparent;
		border-bottom: 600px solid #F3F1F0; /* --color-bg */
	}
	.shop_news__area::after{
		content: '';
		position: absolute;
		top: 600px;
		left: 0;
		border-bottom: 680px solid #F3F1F0; /* --color-bg */
		border-right: 100vw solid transparent;
		z-index: -1;
	}
	.shop_news__area .info__flex li:nth-child(4n){
		margin: 0 0 60px 0;
	}
	.shop_news__area .shop_genre{
		display: inline-block;
		margin-left: 10px;
		margin-bottom: 0;
	}
}
@media only screen and (max-width: 520px) {
	.shop_news__area::before{
		border-bottom: 580px solid #F3F1F0;/* --color-bg */
	}
	.shop_news__area::after{
		top: 580px;
		border-bottom: 570px solid #F3F1F0;/* --color-bg */
	}
}
@media only screen and (max-width: 414px) {
	.shop_news__area{
		padding: 80px 5.025% 35px;
	}
	.shop_news__area svg.left-object{
		left: 35px;
	}
	.shop_news__area svg.right-object{
		right: 35px;
	}
	.shop_news__area .info__flex li:nth-child(4n){
		margin: 0 0 30px 0;
	}
	.shop_news__area::before{
		border-bottom: 570px solid #F3F1F0; /* --color-bg */
	}
	.shop_news__area::after{
		top: 570px;
		border-bottom: 510px solid #F3F1F0; /* --color-bg */
	}
}
@media only screen and (max-width: 375px) {
	.shop_news__area{
		padding: 60px 5.025% 30px;
	}
	.shop_news__area svg.left-object{
	    left: 15px;
	}
	.shop_news__area svg.right-object{
		right: 15px;
	}
	.shop_news__area::before{
		border-bottom: 520px solid #F3F1F0;/* --color-bg */
	}
	.shop_news__area::after{
		top: 520px;
		border-bottom: 480px solid #F3F1F0;/* --color-bg */
	}
}
@media only screen and (max-width: 350px) {
	.shop_news__area::after{
		border-bottom: 510px solid #F3F1F0;/* --color-bg */
	}
}
@media only screen and (max-width: 320px) {
	.shop_news__area svg.left-object{
		left: 0;
	}
	.shop_news__area svg.right-object{
		right: 0;
	}
	.shop_news__area::before{
		border-bottom: 540px solid #F3F1F0; /* --color-bg */
	}
	.shop_news__area::after{
		border-bottom: 555px solid #F3F1F0; /* --color-bg */
		top: 540px;
	}
}
/* ====================================
	access
==================================== */
.access__area {
	padding: 80px 0 0;
}

.access__wrap {
	background-color: #F3F1F0; /* --color-bg */
}

.access__flex {
	display: flex;
	align-items: flex-end;
	width: 100%;
}

.access__flex > div {
	width: calc(100%/2 - 20px);
}

.access__flex iframe {
	border: 0;
	width: 100%;
	height: 450px;
}

.access__flex > div:nth-child(2) {
	padding: 0 0 60px 40px;
}

.access__flex > div:nth-child(2) img {
	margin: 0 0 30px 0;
}

.access__flex > div:nth-child(2) b {
	display: block;
	margin: 0 0 5px 0;
}

.access__flex > div:nth-child(2) p {
	font-size: 1.5rem;
	margin: 0 0 30px 0;
}

.access__flex > div:nth-child(2) li {
	margin: 0 0 10px 0;
	width: 375px;
	height: 40px;
	display: flex;
	align-content: center;
	justify-content: center;
	background-color: #fff;
	transition: 0.3s;
}
.access__flex > div:nth-child(2) li:hover{
	background-color: #4C4948; /* --color-accent */
}
.access__flex > div:nth-child(2) li:hover a{
	color: #fff;
}
.access__flex > div:nth-child(2) li:nth-child(1) {
	background-image: url(../__common_img/access_icon.svg), url(../__common_img/right-arrow_icon.svg);
	background-size: 17px 22px, 10px;
    background-position: left 16px center, right 20px center;
	background-repeat: no-repeat;
}
.access__flex > div:nth-child(2) li:nth-child(1):hover{
	background-image: url(../__common_img/access_icon_hover.svg), url(../__common_img/right-arrow_icon_hover.svg);
}
.access__flex > div:nth-child(2) li:nth-child(2) {
	background-image: url(../__common_img/access_parking_icon.svg), url(../__common_img/external_icon.svg);
	background-size: 30px, 15px;
	background-position: left 10px center, right 20px center;
	background-repeat: no-repeat;
}
.access__flex > div:nth-child(2) li:nth-child(2):hover{
	background-image: url(../__common_img/access_parking_icon_hover.svg), url(../__common_img/external_icon_hover.svg);
}
.access__flex > div:nth-child(2) a {
	font-size: 1.4rem;
	line-height: 40px;
	opacity: 1;
	transition: 0.3s;
}

.access__flex > div:nth-child(2) a[target="_blank"] {}

@media only screen and (max-width: 767px) {
	.access__area{
		padding: 80px 5.025% 0;
	}
	.access__flex{
		flex-wrap: wrap;
	}
	.access__flex > div{
		width: 100%;
		margin: 0 0 100px;
	}
	.access__flex > div:nth-child(2){
		padding: 0 40px 40px;
		margin: 0;
	}
	.access__flex > div:nth-child(2) li{
		width: 100%;
	    height: 65px;
		margin: 0 0 20px 0;
	}
	.access__flex > div:nth-child(2) a{
		width: 100%;
		line-height: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
@media only screen and (max-width: 414px){
	.access__area{
		padding: 60px 5.025% 0;
	}
	.access__flex iframe{
	    height: 260px;
	}
	.access__flex > div{
		margin: 0 0 50px;
	}
	.access__flex > div:nth-child(2){
		padding: 0 25px 10px;
	}
	.access__flex > div:nth-child(2) li:nth-child(2){
		background-position: left 20px center, right 20px center;
	}
	.access__flex > div:nth-child(2) li:nth-child(1){
		background-size: 22px 26px, 10px;
		background-position: left 24px center, right 20px center;
	}
}
@media only screen and (max-width: 375px){
	.access__flex > div:nth-child(2) li:nth-child(1){
		background-position: left 19px center, right 20px center;
	}
	.access__flex > div:nth-child(2) li:nth-child(2){
		background-position: left 15px center, right 20px center;
	}
}
@media only screen and (max-width: 320px){
	.access__flex iframe{
		height: 170px;
	}
	.access__flex > div:nth-child(2) li:nth-child(1){
		background-position: left 16px center, right 20px center;
		background-size: 16px 22px, 10px;
	}
	.access__flex > div:nth-child(2) li:nth-child(2){
		background-position: left 9px center, right 13px center;
		background-size: 22px, 15px;
	}
}