@charset "utf-8";

.banner-slider{margin-bottom: 40px; margin-top: 40px;}
.banner-slider .item{margin: 0 10px; width: 400px;}
.banner-slider .item img{border-radius: 20px;}

.news-wrap{background:#F8F4F2; padding: 100px 0; margin-bottom: 100px;}
.news-wrap .content{max-width: 1200px; margin:auto; display: flex; align-self: flex-start; justify-content: space-between;}
.news-wrap .content .left h2{font-size: 40px; font-weight: 400; letter-spacing: .05em; line-height: 1.2; margin-bottom: 40px; font-family: zen-old-mincho, sans-serif;color: #222;}
.news-wrap .content .left h2 small{font-size: 18px; font-weight: 400; letter-spacing: .05em; text-align: right; display: block;}
.news-wrap .content .left .c-btn{text-align: right;}
.news-wrap .content .left .c-btn a{font-size: 20px; letter-spacing: .05em; line-height: 1.4; font-weight: 700; font-family: zen-old-mincho, sans-serif; text-decoration: underline;}

.news-wrap .content .right{width: 940px;}
.news-wrap .content .right .nonews{font-size: 18px; text-align: center;}
.news-wrap .content .right .item{margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #E9D6CF;}
.news-wrap .content .right .item:nth-child(5){margin-bottom: 0; padding-bottom: 0; border-bottom: none;}
.news-wrap .content .right .item a{display: flex; align-items: center; justify-content: space-between; padding-right: 50px; position: relative;}
.news-wrap .content .right .item a::after{content: ""; display: inline-block; position: absolute; width: 40px; height: 40px; right: 0; top: 50%; transform: translateY(-50%); background:url(../images/top/news-arr-icon.svg) no-repeat center/contain;}
.news-wrap .content .right .item a .img-wrap{width: 13.48%;}
.news-wrap .content .right .item a .img-wrap img{border-radius: 5px;}
.news-wrap .content .right .item a .txt-wrap{width: 84.26%;}
.news-wrap .content .right .item a .txt-wrap p.data{margin-bottom: 5px; line-height: 1;}
.news-wrap .content .right .item a .txt-wrap p.data span.date{font-size: 18px; font-weight: 700; letter-spacing: 0; line-height: 1.4; color: #A79791;}
.news-wrap .content .right .item a .txt-wrap p.data span.cate{display: inline-block; font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1.4; padding: 3px 10px 2px; border-radius: 2px;}
.news-wrap .content .right .item a .txt-wrap p.data span.newproduct{background: #C7DFBA;}
.news-wrap .content .right .item a .txt-wrap p.data span.important{background: #F1BCA8;}
.news-wrap .content .right .item a .txt-wrap p.title{font-size: 16px; font-weight: 500; letter-spacing: 0; line-height: 1.4;}

@media screen and (max-width:896px),(max-width:896px) and (orientation:landscape){
	.news-wrap{padding: 40px 0; margin-bottom: 40px;}
	.news-wrap .content {display: block;}
	.news-wrap .content .left{width: 100%; padding:0 10px; margin-bottom: 40px;}
	.news-wrap .content .left h2{margin-bottom: 20px; font-size: 32px;}
	.news-wrap .content .left h2 small{text-align: left;}
	.news-wrap .content .left .c-btn{text-align: left;}
	.news-wrap .content .right{width:100%;}
	.news-wrap .content .right .item{padding: 0 10px;}
	.news-wrap .content .right .item a{padding: 0 0 20px 0; align-items: flex-start;}
	.news-wrap .content .right .item a .txt-wrap p.title{font-size: 16px;}
	.news-wrap .content .right .item a::after{content: none;}
	.news-wrap .content .right .item a .img-wrap{width:30%; margin-bottom: 10px;}
	.news-wrap .content .right .item a .img-wrap img{width:100%;}
	.news-wrap .content .right .item a .txt-wrap{width:68%;}
	.news-wrap .content .right .item a .txt-wrap p.data span.date{font-size: 14px;}
	.news-wrap .content .right .c-btn {text-align: center;}
	.news-wrap .content .right .c-btn a{font-size: 18px; letter-spacing: .05em; line-height: 1.4; font-weight: 700; font-family: zen-old-mincho, sans-serif; text-decoration: underline;}
}
@media screen and (max-width:896px) and (orientation:landscape){
	.news-wrap .content .right .item{margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #E9D6CF;}
	.news-wrap .content .right .item:last-of-type{margin-bottom: 0; padding-bottom: 0; border-bottom: none;}
	.news-wrap .content .right .item a{display: flex; align-items: center; justify-content: space-between; padding-right: 50px; position: relative;}
	.news-wrap .content .right .item a::after{content: ""; display: inline-block; position: absolute; width: 40px; height: 40px; right: 0; top: 50%; transform: translateY(-50%); background:url(../images/top/news-arr-icon.svg) no-repeat center/contain;}
	.news-wrap .content .right .item a .img-wrap{width: 13.48%;}
	.news-wrap .content .right .item a .img-wrap img{border-radius: 5px;}
	.news-wrap .content .right .item a .txt-wrap{width: 84.26%;}
	.news-wrap .content .right .item a .txt-wrap p.data{margin-bottom: 10px;}
	.news-wrap .content .right .item a .txt-wrap p.data span.date{font-size: 18px; font-weight: 700; letter-spacing: 0; line-height: 1.4; color: #A79791;}
	.news-wrap .content .right .item a .txt-wrap p.data span.cate{display: inline-block; font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1.4; padding: 3px 10px 2px; border-radius: 2px;}
	.news-wrap .content .right .item a .txt-wrap p.data span.newproduct{background: #C7DFBA;}
	.news-wrap .content .right .item a .txt-wrap p.data span.important{background: #F1BCA8;}
	.news-wrap .content .right .item a .txt-wrap p.title{font-size: 18px; font-weight: 500; letter-spacing: 0; line-height: 1.4;}
}


.history-wrap{background:url(../images/top/top_history_bg.png) no-repeat bottom/contain; padding-bottom: 320px; margin-bottom: 140px;}
.history-wrap .reed-wrap{width: 83.33%; margin: 0 7.29% 60px 9.375%; display: flex; justify-content: space-between; align-items: flex-start;}
.history-wrap .reed-wrap .visual1{width:31.25%; padding: 0 10px;}
.history-wrap .reed-wrap .visual1 img{border-radius: 20px;}
.history-wrap .reed-wrap .content{display: flex; flex-wrap:wrap; width:66.25%;}
.history-wrap .reed-wrap .content h2{font-size: calc(100vw * (60 / 1920)); font-weight: 400; letter-spacing: .05em; line-height: 1.07; font-family: zen-old-mincho, sans-serif; margin: 82px 0 100px; width:100%; text-align: right;}
.history-wrap .reed-wrap .content h2 small{display: block; font-size: 18px; font-weight: 400; letter-spacing: .05em; line-height: 1.2; margin-top: 10px;}
.history-wrap .reed-wrap .content .text{display: flex; justify-content: space-between;}
.history-wrap .reed-wrap .content .text .visual2{width: 37.73%; margin-top: 10px; padding: 0 10px;}
.history-wrap .reed-wrap .content .text div{ width:55%;}
.history-wrap .reed-wrap .content .text div p{font-size: 16px; font-weight: 500; line-height: 2.4; letter-spacing: 0;}
.history-wrap .reed-wrap .content .text div > p:first-of-type{margin-bottom: 30px;}
.history-wrap .reed-wrap .content .text div p.mgt20 {margin-top: 20px;}

.yt-wrap { width: 100%; max-width: 900px; margin: auto; aspect-ratio: 16 / 9; margin-bottom: 60px;}
.yt-wrap video { padding: 10px; background:#FFF; width: 100%;}

.history-wrap .btn-wrap{display: flex; align-items: center; justify-content: space-between; max-width:710px; margin: auto;}
.history-wrap .btn-wrap a{display: block; position: relative; width: 320px; box-shadow:0 3px 6px rgba(0,0,0,.16); border-radius: 100px; text-align: center; padding: 16px 0 15px; background: #FFF; font-weight: 700; font-size: 20px; letter-spacing: .05em; line-height: 1.4; font-family: zen-old-mincho, sans-serif;}
.history-wrap .btn-wrap a::after{content: ""; display: inline-block; position: absolute; right: 0; top: 50%; transform: translate(50%,-50%); width: 60px; height: 1px; background: #222;}

@media screen and (max-width:1366px){
	.history-wrap .reed-wrap{width:90%; margin: 0 4% 60px 4%;}
	.history-wrap .reed-wrap .content h2{font-size:42px;}
	.history-wrap .reed-wrap .content .text div{width:62%;}
	.history-wrap .reed-wrap .content .text .visual2{width:32%;}
	.history-wrap .reed-wrap .visual1{width:28%;}
}

@media screen and (max-width:896px) , (max-width:896px) and (orientation:landscape){
	.history-wrap{padding-bottom: 120px; margin-bottom: 90px;}
	.history-wrap .reed-wrap{width: 100%; display: flex; flex-direction: column; margin: 0;}
	.history-wrap .reed-wrap .content{width:100%; order: 2;}
	.history-wrap .reed-wrap h2{font-size: 30px; margin: 0; line-height: 1.4; text-align: left; margin-bottom: 18px; padding:  0 10px; font-family: zen-old-mincho, sans-serif;}
	.history-wrap .reed-wrap h2 small{display: block; font-size: 18px;}
	.history-wrap .reed-wrap .content .text{flex-direction: column;}
	.history-wrap .reed-wrap .content .text .visual2{width:100%; order:2; margin-bottom: 34px;}
	.history-wrap .reed-wrap .content .text .visual2 img{border-radius: 20px; overflow: hidden;}
	.history-wrap .reed-wrap .content .text div{width:100%;}
	.history-wrap .reed-wrap .content .text div p{padding: 0 10px; font-size: 16px; font-weight: 500; line-height: 1.8; letter-spacing: 0; margin-bottom: 34px;}
	.history-wrap .reed-wrap .content .text div p:first-of-type{order: 1;}
	.history-wrap .reed-wrap .content .text div p:last-of-type{order: 3;}
	.history-wrap .reed-wrap .visual1{order:1; width: 100%; text-align: right; margin-bottom: 34px;}
	.history-wrap .reed-wrap .visual1 img{border-radius: 20px;}
	.history-wrap .btn-wrap{display: block; padding: 0 30px 0 10px;}
	.history-wrap .btn-wrap a::after{width: 40px;}
	.history-wrap .btn-wrap a{width:100%;}
	.history-wrap .btn-wrap a:first-of-type{margin-bottom: 10px;}
	.yt-wrap{margin-bottom: 10px;}
	.history-wrap .reed-wrap .content .text div p.taC {margin-bottom: 10px;}
}
@media screen and  (max-width:896px) and (orientation:landscape){
	.history-wrap .btn-wrap{display: flex; align-items: center; justify-content: space-between; max-width:710px; margin: auto;}
	.history-wrap .btn-wrap a{display: block; position: relative; width: 290px; box-shadow:0 3px 6px rgba(0,0,0,.16); border-radius: 100px; text-align: center; padding: 16px 0 15px; background: #FFF; font-weight: 700; font-size: 20px; letter-spacing: .05em; line-height: 1.4; font-family: zen-old-mincho, sans-serif;}
	.history-wrap .btn-wrap a::after{content: ""; display: inline-block; position: absolute; right: 0; top: 50%; transform: translate(50%,-50%); width: 60px; height: 1px; background: #222;}
	.yt-wrap video { width: 90%; margin: 0 auto;display: block;}
}

/* おすすめ商品 */
.reccomend h2{font-size: 40px; font-weight: 700; letter-spacing: .1em; line-height: 1.4; text-align: center; margin-bottom: 20px; font-family: zen-old-mincho, sans-serif; }
.reccomend h2 small{display: block; font-size: 18px; letter-spacing: .05em; line-height: 1.4;}
.reccomend .recommend_txt {margin-bottom: 40px; text-align: center;}


@media screen and (max-width:896px),(max-width:896px) and (orientation:landscape){
	.reccomend{padding: 0 10px;}
	.reccomend h2{font-size: 32px;}
	.reccomend .recommend_txt {font-size: 16px;}
}

.online-shop-btn{max-width:800px; margin:0 auto; margin-bottom: 128px;}
@media screen and (max-width:896px),(max-width:896px) and (orientation:landscape){
	.online-shop-btn{margin-bottom: 50px; padding: 0 10px; font-weight: 700;}
}


.shop-info{background:#F8F4F2; padding:60px 0; margin-bottom: 60px;}
.shop-info .content{max-width: 1200px; margin: auto; display: flex; align-items: center;}
.shop-info h2{font-size: 32px; font-weight: 700; letter-spacing: .1em; line-height: 1.4; display: flex; align-items: center; font-family: zen-old-mincho, sans-serif;color: #222;}
.shop-info h2::before{content: ""; display: inline-block; width: 38px; height: 40px; margin-right: 15px; background:url(../images/top/tit-icon.svg) no-repeat center/contain;}
.shop-info .map{margin: 0 176px 0 auto; position: relative;}
.shop-info .btn-wrap a{display: inline-flex; align-items: center; justify-content: center; width:196px; border-radius: 100px; background:#FFF; position: absolute; padding: 6px 0 7px; font-family: zen-old-mincho, sans-serif; font-weight: 700; box-shadow: 0 3px 12px rgba(0,0,0,.16); font-size: 20px;}
.shop-info .btn-wrap a::before{content: ""; display: inline-block; width: 17px; height: 24px; background:url(../images/top/area-pin.svg) no-repeat center/contain; margin-right: 5px;}
.shop-info .btn-wrap a::after{content: ""; display: inline-block; width: 4px; height: 8px; background:url(../images/top/area-after-arr.svg) no-repeat center/contain; margin-left: 8px;}
.shop-info .btn-wrap a.kaetsu{top:80px; right: -176px; background: #F1BCA8;}
.shop-info .btn-wrap a.chuetsu{top: 212px; right: -176px; background:#93CA76;}
.shop-info .btn-wrap a.joetsu{left: -150px; top: 212px; background:#9DD0D6;}
.shop-info .btn-wrap a.sado{left: -150px; top: 80px; background:#BBC8E6;}
@media screen and (max-width:896px),(max-width:896px) and (orientation:landscape){
	.shop-info .content{display: block; padding: 0 10px;}
	.shop-info .map{width:100%; margin: 0;}
	.shop-info .map img{width:100%;}
	.shop-info .btn-wrap a{position: relative; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; transform: none; width: 48%; padding: 15px 0; margin-bottom: 10px;}
}
@media screen and (max-width:896px) and (orientation:landscape){
	.shop-info .map{width: 50%; margin: auto;}
	.shop-info .btn-wrap a{position: absolute;}
	.shop-info .btn-wrap a.kaetsu{top:80px !important; bottom: auto !important; right: -186px !important; left:auto !important;}
	.shop-info .btn-wrap a.chuetsu{top: 212px !important; bottom: auto !important; right: -186px !important; left:auto !important;}
	.shop-info .btn-wrap a.joetsu{left: -130px !important; right: auto !important; bottom: auto !important; top: 212px !important;}
	.shop-info .btn-wrap a.sado{left: -130px !important; right: auto !important; bottom: auto !important; top: 80px !important;}
}


.recruit{max-width: 1200px; margin: auto; margin-bottom: 120px; display: flex; align-items: flex-start; justify-content: space-between;}
.recruit h2{font-size: 32px; font-weight: 700; letter-spacing: .1em; line-height: 1.4; display: flex; align-items: center; font-family: zen-old-mincho, sans-serif; margin-bottom: 26px;color: #222;}
.recruit h2::before{content: ""; display: inline-block; width: 38px; height: 40px; margin-right: 15px; background:url(../images/top/tit-icon.svg) no-repeat center/contain;}
.recruit h3{font-size: 28px; letter-spacing: .1em; line-height: 1.6; font-family: zen-old-mincho, sans-serif; padding-left: 50px; margin-bottom: 30px;color: #222;}
.recruit p{font-size: 16px; font-weight: 500; letter-spacing: 0; line-height: 2.4; padding-left: 50px; margin-bottom: 40px;}
.recruit .btn-wrap{display: flex; align-items: center; justify-content: space-between; max-width:710px; margin: auto; padding-left: 50px;}
.recruit .btn-wrap a{display: block; position: relative; width: 320px; box-shadow:0 3px 6px rgba(0,0,0,.16); border-radius: 100px; text-align: center; padding: 16px 0 15px; background: #FFF; font-weight: 700; font-size: 20px; letter-spacing: .05em; line-height: 1.4; font-family: zen-old-mincho, sans-serif;}
.recruit .btn-wrap a::after{content: ""; display: inline-block; position: absolute; right: 0; top: 50%; transform: translate(50%,-50%); width: 60px; height: 1px; background: #222;}
.recruit .img-wrap{max-width: 580px;}
@media screen and (max-width:896px),(max-width:896px) and (orientation:landscape){
	.recruit{display: block;}
	.recruit .txt-wrap{padding: 0 10px; margin-bottom: 60px;}
	.recruit h3{padding: 0; font-size: 22px; letter-spacing: .05em;}
	.recruit p{padding: 0; font-size: 16px; line-height: 1.8; font-feature-settings: "palt";}
	.recruit .btn-wrap{padding-left: 0;}
	.recruit .img-wrap{padding: 0 10px; max-width: 100%;}
	.recruit .img-wrap img{width:100%;}
}
