@charset "utf-8";
/* CSS Document */

/*メインビジュアル *****************************************************************/
#mv { justify-content: center; align-items: center; gap: 0 5%; margin-bottom: 32px; }

/*テキストエリア --------------------*/
#mv .text-area { width: 32%; min-width: 280px; padding-left: 4%; }
#mv .since {
	display: inline-block; padding: 0 12% 0 12px; background: var(--color-or); clip-path: var(--clip-path-01); letter-spacing: .1em; }
#mv .catchcopy-wrap { margin-top: 16px; margin-bottom: 20px; }
#mv .catchcopy {
	font-weight: bold; font-size: clamp(2.5rem, 1.3vw + 1.5rem, 3.2rem);; letter-spacing: .1em; }
#mv .text-wrap { margin-bottom: 24px; }
#mv .text { font-size: var(--font-size-02); }

/*画像エリア --------------------*/
#mv .image-area {
	width: 54%; max-width: 640px; padding: 48px 4% 40px 0; }
/*スライダー -----*/
#mv .slider {
	padding: 8px 28px 8px 8px; background: #fff; position: relative; }
#mv .slider::after {
	content: "© 2025 MARUTAKA Co., Ltd."; position: absolute; bottom: 0; right: 4px; rotate: 90deg; translate: 43.5% -468%; font-size: var(--font-size-sml); letter-spacing: .05em; }
#mv .slider .image { aspect-ratio: 3 / 2; }
#mv .slider .image01 .bg-img { background-image: url("../images/mv-slide01.webp"); }
#mv .slider .image02 .bg-img { background-image: url("../images/mv-slide02.webp"); }
#mv .slider .image03 .bg-img { background-image: url("../images/mv-slide03.webp"); }
#mv .slick-dots { text-align: right; right: 20px; }
#mv .slick-dots li { width: 16px; height: 16px; }
#mv .slick-dots li button:before { font-size: 11px; color: #fff; opacity: 1; }
#mv .slick-dots li.slick-active button:before { color: var(--color-or); }

#mv .scroll {
	width: 1px; height: 64px; background: var(--color-font-reg); line-height: 1; position: absolute; bottom: -32px;  left: 50%; translate: -50% 0; }
#mv .scroll span { font-size: var(--font-size-01); }
#mv .scroll .text-en { font-weight: bold; position: absolute; top: 0; left: 12px; }
#mv .scroll .animation {
	animation: 1.1s ease infinite scrollAnime; position: absolute; left: 50%; translate: -50% 0; }

@keyframes scrollAnime {
  0% { top: 0; }
  100% { top: 92%; }
}
@media (max-width: 767px) {
	#mv { flex-wrap: wrap; padding: 40px 0 24px; }
	#mv .text-area,
	#mv .image-area { width: 85%; max-width: 480px; padding: 0; }
	#mv .text-area { order: 2; padding: 0 8px; }
	#mv .image-area { order: 1; margin-bottom: 24px; }
	#mv .slider {	padding-right: 24px; }
	#mv .scroll { height: 56px; bottom: -36px; }
}





/*新着情報 *****************************************************************/
#news .cont-wrap { justify-content: space-between; flex-wrap: wrap; padding-top: 64px; }
#news .title-area { width: 200px; }
#news h2 { margin-bottom: 24px; }
#news .insta-acount a { gap: 0 6px; line-height: 1; }
#news .insta-acount .bg-box { width: 28px; height: 28px; }
#news .insta-acount .bg-img {
	background-image: url("../images/instagram_glyph_gradient.png"); }
#news .insta-acount .text-link { padding-top: 9px; }

#news .import-area { width: calc(95% - 200px); min-height: 160px; margin-bottom: 40px; }
#news #instagram ul { display: flex; gap: 8px; }
#news #instagram ul li { width: calc((100% - 16px) / 3); position: relative; }
#news #instagram ul li:nth-child(4) { display: none; }
#news #instagram ul li img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
#news #instagram ul li { width: calc((100% - 16px) / 3); aspect-ratio: 1; position: relative; }
#news #instagram ul li a::after {
	content: ""; width: 100%; height: 100%; background: transparent; position: absolute; left: 0; top: 0; transition: .3s; }
#news #instagram ul li a:hover::after { background: #000000aa; }
#news #instagram .like {
	display: flex; align-items: center; gap: 5px; font-size: 1em; color: #ffffffa6; position: absolute; right: 3.5%; bottom: .5%; z-index: 10; transition: .3s; }
#news #instagram .like .icon-area {
	display: inline-block; width: .75em; aspect-ratio: 1; background: url(../images/icon_heart.svg) center / contain no-repeat; filter: var(--filter-wh); opacity: .7; }
#news #instagram ul li a:hover .like {
	font-size: 1.2em; color: #ffffffc2; top: 50%; bottom: unset; left: 50%; right: unset; translate: -50% -50%; }
#news #instagram ul li a:hover .like .icon-area { opacity: .8; }

#news  h3 { margin-bottom: 8px; }

#news .sns-link-area { width: 100%; padding-left: calc(200px + 5%); }
#news .sns-link { justify-content: space-between; }
#news .link-item { align-items: center; width: 49%; border-radius: var(--border-radius-s); }
#news .link-item.line { background: #06C755; }
#news .link-item.insta {
	background: linear-gradient(130deg, #f7ce46 17%, #EB6C2C 51%, #EA339D 80%, #7B26F5 100%); }
#news .link-item a {
	justify-content: space-between; align-items: center; width: 100%; padding: 8px 4%; }
#news .link-item .qr-box { width: 104px; height: 120px; position: relative; }
#news .link-item .bg-img { z-index: 1; }
#news .link-item.line .bg-img { background-image: url("../images/qr-line.png"); }
#news .link-item.insta .bg-img { background-image: url("../images/qr-insta.webp"); }
#news .link-item .text-area { width: calc(95% - 104px); }
#news .link-item .text-area h4 { margin-bottom: 12px; }
#news .link-item .text-area p { line-height: 1.3; }

@media (max-width: 960px) {
	#news .sns-link-area { margin-top: 24px; padding-left: 0; }
}
@media (max-width: 768px) {
	#news .title-area,
	#news .import-area { width: 100%; }
	#news .title-area {
		display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 8px; }
	#news h2 { margin-bottom: 24px; }
	#news .insta-acount .bg-box { width: 20px; }
	#news h3 { margin-bottom: 12px; }
	#news .link-item a { padding: 12px 8px 12px 6%; }
	#news .link-item .qr-box {
		order: 2; width: 64px; height: 64px; border-radius: var(--border-radius-reg); background: #fff; }
	#news .link-item .bg-img { background-size: 50%; }
	#news .link-item.line .bg-img { background-image: url("../images/line_brand_icon.png"); }
	#news .link-item.insta .bg-img {
		background-image: url("../images/instagram_glyph_gradient.png"); }
	#news .link-item .text-area { order: 1; width: calc(93% - 64px); }
	#news .link-item .text-area h4 { margin-bottom: 6px; }
}
@media (max-width: 520px) {
	#news #instagram ul { flex-wrap: wrap; }
	#news #instagram ul li { width: calc((100% - 8px) / 2); }
	#news #instagram ul li:nth-child(4) { display: block; }
	#news .sns-link { flex-direction: column; gap: 12px 0; }
	#news .link-item { width: 100%; }
}





/*業務内容 *****************************************************************/
#service { margin-top: 104px; }
#service .bg-color {
	width: 100%; height: 100%; background: var(--color-font-reg); position: absolute; left: 0; top: 0; z-index: -5; }
#service .cont-wrap { justify-content: space-between; align-items: center; }

#service .title-area { width: 200px; }
#service h2 { color: #fff; }
#service .opening-info { margin-top: 32px; margin-bottom: 32px; color: #fff; }
#service .opening-hours { flex-wrap: wrap; }
#service .opening-hours .title { width: 72px; }
#service .opening-hours .text { width: calc(98% - 72px); }
#service .access { width: 32px; }
#service .access a { display: block; padding-bottom: 16px; }

#service .title-area .logo-box { width: 64px; }

#service .list-area { width: calc(95% - 200px); }
#service .wrapper1 .list-area { height: 256px; position: relative; }

#service .service-list { width: 100%; height: 100%; position: absolute; bottom: -56px; }
#service .service-item {
	width: 33.333%; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
#service .service-item .bg-img { z-index: 1; transition: ease-out .3s; }
#service .service-item.item01 .bg-img {
	background-image: url("../images/top-service-img01.webp"); }
#service .service-item.item02 .bg-img {
	background-image: url("../images/top-service-img02.webp"); }
#service .service-item.item03 .bg-img {
	background-image: url("../images/top-service-img03.webp"); background-position: 20% center; }
#service .service-item .text {
	padding: 8px 10% 8px 5%; background: #000000cc; color: #ffffff; text-align: right; line-height: 1.3; position: absolute; top: 50%; right: 0; translate: 0 -50%; z-index: 5; }

#service .wrapper2 .list-area .button { text-align: right; }
#service .wrapper2 .list-area .button a { text-align: left; }


@media (min-width: 768px) {
	@media (hover: hover) {
		#service .service-item:hover .bg-img { transform: scale(1.2); }
	}
}
@media (max-width: 767px) {
	#service .cont-wrap.wrapper1 { flex-wrap: wrap; }
	#service .cont-wrap.wrapper2 { padding-top: 80px; }
	#service .title-area,
	#service .list-area { width: 100%; }
	#service .wrapper1 .title-area { display: flex; align-items: flex-end; flex-wrap: wrap; }
	#service .opening-info { width: calc(95% - 32px); }
	#service .access { width: 32px; margin-bottom: 16px; }
	#service .opening-hours .text br { display: none; }
	#service .wrapper1 .list-area { margin-top: -56px; }
}
@media (max-width: 600px) {
	#service .cont-wrap.wrapper1 { padding-top: 64px; }
}
@media (max-width: 428px) {
	#service { padding-bottom: 80px; background: var(--color-be); }
	#service .bg-color { z-index: 1; }
	#service .cont-wrap.wrapper1 { position: relative; z-index: 2; }
	#service .wrapper1 .list-area { height: 336px; margin-top: -24px; }
	#service .service-list { flex-wrap: wrap; gap: 12px 0; bottom: -24px; }
	#service .service-item { width: 100%; height: 104px; background: #fff; }
	#service .service-item .bg-img { width: 65%; left: unset; right: 0; }
	#service .service-item.item01 .bg-img { background-position: center 30%; }
	#service .service-item .text {
		width: 35%; padding: 12px 8px 8px 20px; background: none; font-weight: 500; font-size: var(--font-size-03); color: var(--color-font-reg); text-align: center; left: 0; right: unset; }
}




/*取扱商品 *****************************************************************/
#product { margin-top: 104px; }
#product .cont-wrap { justify-content: space-between; padding-bottom: 80px; }

#product .product-list {
	justify-content: space-between; flex-wrap: wrap; gap: 4px; width: 62%; padding: 4px; background: #fff; }
#product .product-item {
	width: calc(33.333% - 3px); aspect-ratio: 3 / 4; background: #ddd; overflow: hidden; }
#product .product-item .bg-img { z-index: 1; transition: ease-out .3s; }
#product .product-item.item01 .bg-img {
	background-image: url("../images/product-img01.webp"); }
#product .product-item.item02 .bg-img {
	background-image: url("../images/product-img02.webp"); }
#product .product-item.item03 .bg-img {
	background-image: url("../images/product-img03.webp"); }
#product .product-item.item04 .bg-img {
	background-image: url("../images/product-img04.webp"); background-position: 20% center; }
#product .product-item.item05 .bg-img {
	background-image: url("../images/product-img05-1.webp"); }
#product .product-item.item06 .bg-img {
	background-image: url("../images/product-img06.webp"); background-position: top right; }
#product .product-item .bg-img::before {
	content: ""; display: block; width: 100%; height: 100%; background: #00000088; position: absolute; left: 0; top: 0; z-index: 1; }
#product .product-item .text {
	padding: 0 5%; text-align: right; font-size: var(--font-size-03); color: #fff; line-height: 1.3; letter-spacing: .1em; font-weight: 500; text-shadow: 0px 0px 11px #000000f0; position: absolute; top: 50%; right: 0; translate: 0 -50%; z-index: 5; }

#product .text-area { width: 35%; }
#product h2 { margin-bottom: 32px; }
#product .text-area .text-wrap {
	padding: 32px 8%; border-radius: var(--border-radius-reg); background: #ffffffcc; }

#product .button { margin-top: 32px; text-align: right; }
#product .button a {
	background: var(--color-or); color: var(--color-font-reg); text-align: left; }
#product .button a::after { filter: none; }

@media (min-width: 768px) {
	@media (hover: hover) {
		#product .product-item:hover .bg-img { transform: scale(1.2); }
	}
}
@media (max-width: 960px) and (min-width: 768px) {
	#product .product-item { width: calc(50% - 2px); aspect-ratio: 4 / 3; }
}
@media (max-width: 767px) {
	#product .cont-wrap { flex-wrap: wrap; padding-top: 64px; }
	#product .product-list,
	#product .text-area { width: 100%; }
	#product .product-list { order: 2; }
	#product .text-area { order: 1; }
	#product h2 { margin-bottom: 24px; }
	#product .text-area .text-wrap { padding: 0 0 40px; background: none; }
	#product .text-area .text-sml { font-size: var(--font-size-reg); }
	#product .button { margin-top: 20px; }
}
@media (max-width: 600px) {
	#product .cont-wrap { }
}
@media (max-width: 520px) {
	#product .product-item { width: calc(50% - 2px);  aspect-ratio: 1; }
}
@media (max-width: 428px) {
	#product { margin-top: 24px; }
}





/*取扱ブランド *****************************************************************/
#brands h2 { margin-bottom: 32px; padding-left: 1%; }
#brands .cont-wrap { margin-bottom: 104px; }

#brands .brand-list {
	align-items: center; flex-wrap: wrap; gap: 16px 2.8%; margin-bottom: 40px; }
#brands .brand-item { width: 10.05%; text-align: center; }

#brands .text { padding-left: 1%; }

@media (max-width: 960px) {
	#brands .brand-list { gap: 16px 4%; }
	#brands .brand-item { width: 13.333%; }
}
@media (max-width: 768px) {
	#brands .brand-list { gap: 20px 4%; }
	#brands .brand-item { width: 16.8%; }
}
@media (max-width: 600px) {
	#brands .brand-list { gap: 24px 6%; }
	#brands .brand-item { width: 20.5%; }
}
@media (max-width: 520px) {
	#brands .brand-list { gap: 24px 9%; }
	#brands .brand-item { width: 27.3333%; }
}