@charset "utf-8";

@import url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
   --main-font: "Paperlogy", sans-serif;
   --sub-font: "Poppins", sans-serif;
   --BG-yellow: #FFFDEF;
   --main-blue: #0049E6;
   --pink: #FF2828;
   --pad-x: clamp(12px, 4vw, 40px);
   --gird-max: 1300px;
   --contact-h: 55px;
   --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html {
   scroll-behavior: smooth;
   margin: 0;
   padding: 0;
   overflow-x: hidden;
}


@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }
}

body {
   font-family: 'Paperlogy', '맑은 고딕', sans-serif;
   font-weight: 400;
   font-size: 1.6rem;
   line-height: 1.5;
   color: #111111;
   overflow-x: hidden;
   -ms-overflow-style: none;
   margin: 0;
   padding: 0;
}

*,
*::before,
*::after {
   box-sizing: border-box;
}

#wrap {
   margin: 0 auto;
}

#header {
   position: fixed;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   z-index: 1000;
   width: 100%;
   padding: 0 var(--pad-x);
   background: #fff;
   padding-top: max(env(safe-area-inset-top), 0px);
   transition: transform .25s ease, box-shadow .25s ease;
   will-change: transform;
}

#header.active {
   transform: translate(-50%, -110%);
}

.header-inner {
   width: 100%;
   min-height: 70px;
   padding: 1% var(--pad-x);
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-left: 1px solid var(--main-blue);
   border-right: 1px solid var(--main-blue);
   border-bottom: 1px solid var(--main-blue);
}

.header-inner h1 a img {
   width: clamp(200px, 15vw, 280px);
   height: auto;
   display: block;
}

#gnb {
   display: flex;
   gap: clamp(12px, 3vw, 70px);
   color: var(--main-blue);
}

#gnb li a {
   display: block;
   font-size: clamp(16px, 1.3vw, 21px);
   color: var(--main-blue);
   font-weight: 500;
}

#gnb li a:after {
   content: '';
   display: block;
   border-bottom: 2px solid var(--main-blue);
   transform: scaleX(0);
   transition: transform 150ms ease-in-out;
}

#gnb li a:hover:after {
   transform: scaleX(1);
}

@media (max-width: 768px) {
   .header-inner {
      justify-content: center;
   }

   #gnb {
      display: none;
   }
}

#contact {
   width: 100%;
   background: #fff;
   position: fixed;
   bottom: 0;
   padding: 12px 4%;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   border-top: 1px solid var(--main-blue);
   gap: clamp(4px, 1vw, 12px);
   z-index: 1000;
}

.call {
   display: flex;
   align-items: center;
   gap: clamp(8px, 1vw, 16px);
}

.call img {
   width: clamp(150px, 14vw, 240px);
   height: auto;
   display: block;
}

@media (max-width: 825px) {
   .call {
      gap: clamp(4px, 1vw, 12px);
   }
}

form {
   display: flex;
   gap: clamp(8px, 1vw, 12px);
   min-width: 0;
}

.inputs {
   display: flex;
   gap: clamp(2px, 0.5vw, 8px);
}

.inputs input {
   border: 1px solid var(--main-blue);
   text-align: center;
   width: clamp(70px, 10vw, 200px);
   height: auto;
   display: block;
   flex: 1 1 auto;
   min-width: 0;
}

.agree {
   font-size: clamp(1.1rem, 1vw, 1.5rem);
}

.submit {
   display: flex;
   align-items: center;
   gap: clamp(8px, 1vw, 12px);
}

.submit-btn {
   cursor: pointer;
   display: block;
   min-width: 0;
   width: clamp(120px, 2vw, 220px);
   height: clamp(30px, 2vw, 56px);
   background: var(--pink);
   font-size: clamp(15px, 2vw, 18px);
   line-height: clamp(15px, 2vw, 18px);
   color: #fff;
   font-weight: 600;
   animation: blink 0.8s infinite ease-in-out;
}

@keyframes blink {
   0% {
      opacity: 1;
   }

   50% {
      opacity: 0.5;
   }

   100% {
      opacity: 1;
   }
}

.go-top-btn img {
   height: clamp(40px, 2vw, 56px);
   cursor: pointer;
   margin-left: 40px;
}

@media (max-width: 1400px) {
   .go-top-btn {
      display: none;
   }
}

@media (max-width: 825px) {
   #contact {
      flex-direction: column;
   }

   .submit {
      flex-wrap: wrap;
      gap: 0;
   }
}

.aos-wrap {
   display: block;
}

#main {
   width: 100%;
   min-height: 100vh;
   overflow: hidden;
   padding: 100px clamp(12px, 10vw, 100px);
   display: grid;
   grid-template-rows: auto 1fr auto;
}

@supports (height: 100dvh) {
   #main {
      height: calc(min(100svh, 100dvh) - var(--contact-h) - var(--safe-bottom));
      min-height: calc(min(100svh, 100dvh) - var(--contact-h) - var(--safe-bottom));
   }
}

@media (max-width: 825px) {
   @supports (height: 100dvh) {
      #main {
         height: calc(min(100svh, 100dvh) - var(--contact-h) - var(--safe-bottom));
         min-height: calc(min(100svh, 100dvh) - var(--contact-h) - var(--safe-bottom));
         position: relative;
      }
   }
}

.main-top img {
   max-width: 90%;
   height: auto;
   display: block;
   margin: 0 auto;
}

.main-middle {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.main-middle img {
   display: block;
}

.middle-txt h3 {
   font-size: clamp(18px, 1.4vw, 54px);
}

.middle-txt h3 b {
   font-size: clamp(24px, 3vw, 54px);
   font-weight: 800;
   color: var(--main-blue);
}

.main-visual {
   position: relative;
   width: 100%;
   height: 100%;
   min-height: 0;
}

.rotate-wrap,
.coffee-wrap {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   width: min(100vw, 800px);
}

.rotate-wrap {
   bottom: 0;
   transform: translate(-50%, 60%);
}

.rotate-wrap img {
   animation: rotate 10s linear infinite;
   width: 100%;
   height: auto;
   display: block;
}

@keyframes rotate {
   to {
      transform: rotate(360deg);
   }
}

.coffee-wrap {
   bottom: 0;
   transform: translate(-50%, 55%);
}

.coffee-wrap img {
   width: 100%;
   display: block;
   height: auto;
   animation: shake 3s linear infinite;
}

@keyframes shake {
   0% {
      transform: rotate(0deg);
   }

   50% {
      transform: rotate(-6deg);
   }

   100% {
      transform: rotate(0deg);
   }
}

.main-btm {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.main-btm span {
   font-family: var(--sub-font);
   font-style: italic;
   font-size: clamp(30px, 10vw, 96px);
   font-weight: 900;
   line-height: 1;
   color: var(--main-blue);
}

@media (max-width: 825px) {
   #main {
      height: 94vh;
      position: relative;
   }

   .main-middle picture {
      position: absolute;
      top: 50%;
      right: -10%;
   }

   .main-middle .middle-txt {
      display: none;
   }

   .main-middle [data-aos] {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
   }

   .main-visual [data-aos] {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
   }

   .rotate-wrap {
      bottom: 0;
      transform: translate(-50%, 50%);
   }

   .coffee-wrap {
      bottom: 0;
      transform: translate(-50%, 50%);
   }

   .main-btm {
      display: none;
   }
}

.marquee {
   --gap: 0;
   --duration: 25s;
   /* 속도(작을수록 빠름). 필요시 숫자만 바꾸면 됨 */
   overflow: hidden;
   position: relative;
}

.marquee__track {
   display: flex;
   gap: 0;
   width: max-content;
   animation: marquee-x var(--duration) linear infinite;
   will-change: transform;
   backface-visibility: hidden;
}

@keyframes marquee-x {
   to {
      transform: translate3d(-50%, 0, 0);
   }
}

/* 오른쪽 방향 */
.marquee.is-right .marquee__track {
   animation-direction: reverse;
}

.marquee__group {
   display: flex;
   gap: var(--gap);
}

.marquee img {
   height: clamp(32px, 6vw, 64px);
   width: auto;
   display: block;
   object-fit: contain;
   flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
   .marquee__track {
      animation: none !important;
   }
}

/* (선택) 모바일에서 속도 다르게 하고 싶을 때 */
@media (max-width: 480px) {
   .marquee {
      --duration: 32s;
   }
}

#why {
   width: 100%;
   padding: clamp(50px, 10vw, 100px) 12px;
}

.why-top img {
   margin: 0 auto clamp(30px, 2vw, 60px);
   display: block;
   max-width: 90%;
}

.why-sub {
   max-width: 100%;
   padding: 0 8%;
   height: auto;
   display: block;
   text-align: center;
}

.why-sub p {
   font-size: clamp(26px, 3vw, 58px);
   color: var(--main-blue);
   font-weight: 500;
   margin-bottom: 20px;
   word-break: keep-all;
   text-align: center;
   line-height: 1.2;
}

.why-sub p b {
   font-weight: 800;
}

.why-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-auto-rows: minmax(220px, auto);
   margin: 0 auto;
   max-width: var(--gird-max);
}

@media (max-width: 768px) {
   .why-grid {
      grid-template-columns: 1fr;
      padding: 0 4%;
   }
}

.card {
   border: 1px solid var(--main-blue);
   box-sizing: border-box;
   padding: 4% 8%;
   gap: 5rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   background: #fff;
}

.card b {
   font-size: clamp(2rem, 2vw, 3.2rem);
   font-weight: 600;
   line-height: 1.4;
}

.card p {
   font-size: clamp(2rem, 2vw, 3.2rem);
   font-weight: 500;
   line-height: 1.4;
   word-break: keep-all;
}

.card p mark {
   position: relative;
   background: var(--main-blue);
   color: #fff;
   padding: 0 4px;
   clip-path: inset(0 100% 0 0);
}

.card.aos-animate mark {
   animation: highlight 1s ease forwards;
   animation-delay: 0.3s;
}

@keyframes highlight {
   to {
      clip-path: inset(0 0 0 0);
   }
}

@media (max-width: 620px) {
   .card {
      gap: 2rem;
      padding: 8%;
   }
}

.why-wrap,
.tit-wrap {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   align-items: center;
}

.why-num {
   line-height: 1;
}


.why-tit span {
   font-family: var(--sub-font);
   font-size: clamp(2rem, 2vw, 2.8rem);
   font-style: italic;
   color: var(--main-blue);
   font-weight: 500;
}

.why-tit h3 {
   font-size: clamp(3rem, 2vw, 4.8rem);
   font-weight: 700;
   color: var(--main-blue);
}

.why-num {
   font-weight: 800;
   font-size: clamp(80px, 10vw, 140px);
   color: var(--main-blue);
   opacity: 0.3;
}


.why-0 {
   background-color: var(--main-blue);
   display: flex;
   justify-content: center;
   align-items: center;
}

.why-0 img {
   width: 100%;
   height: auto;
   display: block;
   object-fit: cover;
   object-position: center;
   animation: scale 1.6s linear infinite;
}

@keyframes scale {
   0% {
      transform: scale(1);
   }

   50% {
      transform: scale(1.1);
   }

   100% {
      transform: scale(1);
   }
}

.why-txt {
   padding: 4% 0;
   font-size: clamp(1.8rem, 2vw, 3.2rem);
   font-weight: 500;
   line-height: 1.4;
   word-break: keep-all;
}

.why-txt mark {
   background: var(--main-blue);
   color: #fff;
   padding: 0 4px;
}

#benefit {
   width: 100%;
   height: auto;
   background: url(../img/benefit-bg.png) no-repeat center / cover;
   padding: clamp(50px, 2vw, 100px) 4%;
   text-align: center;
}

.bene-tit span {
   font-size: clamp(26px, 2vw, 36px);
   color: #fff;
   word-break: keep-all;
   line-height: 1.3;
}

.bene-tit span br {
   display: none;
}

.bene-tit span b {
   font-weight: 700;
   color: #FFFF00 !important;
}

.bene-tit p {
   font-size: clamp(36px, 3.5vw, 90px);
   font-weight: 700;
   color: #fff;
   margin-bottom: 30px;
}

.bene-wrap {
   width: 100%;
   padding: 0;
}

.bene-list {
   max-width: var(--grid-max);
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   align-items: stretch;
}

.list {
   border: 1px solid var(--main-blue);
   background: #fff;
   padding: 15% 10% 10%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-width: 0;
   text-align: center;
   position: relative;
}

.bene-list .list:nth-child(2)::after,
.bene-list .list:nth-child(3)::after {
   content: "";
   position: absolute;
   right: clamp(-60px, -5vw, -40px);
   top: clamp(-60px, -5vw, -40px);
   width: clamp(100px, 15vw, 200px);
   aspect-ratio: 1 / 1;
   background: url("../img/mark-benefit.png") no-repeat center / contain;
   pointer-events: none;
   animation: scale 1.2s infinite ease-in-out;
}

@keyframes scale {
   0% {
      transform: scale(1);
   }

   50% {
      transform: scale(1.1);
   }

   100% {
      transform: scale(1);
   }
}

.bene-list .list:nth-child(2)::after {
   display: none;
}

@media (max-width: 900px) {
   .bene-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .bene-list .list:nth-child(2)::after {
      display: block;
   }

   .bene-list .list:nth-child(3)::after {
      display: none;
   }
}

@media (max-width: 600px) {
   .bene-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

.bene-list .list p {
   font-size: clamp(18px, 2vw, 28px);
   font-weight: 600;
}

.bene-list .list span {
   font-size: clamp(24px, 3vw, 54px);
   font-weight: 800;
}

.bene-list .list .beneBlink {
   display: block;
   font-size: clamp(30px, 3vw, 46px);
   color: #FF2828;
   animation: beneblink 0.8s infinite;
   font-weight: 600;
}

@keyframes beneblink {
   0% {
      opacity: 1;
   }

   50% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

.bene-list .list::before {
   content: '01';
   display: block;
   position: absolute;
   top: 8%;
   left: 8%;
   color: var(--main-blue);
   font-size: clamp(14px, 2vw, 24px);
   font-weight: 600;
}

.bene-list .list:nth-child(2):before {
   content: '02';
}

.bene-list .list:nth-child(3):before {
   content: '03';
}

.bene-list .list:nth-child(3):after {
   content: '';
}

.bene-list .list:nth-child(4):before {
   content: '04';
}

.bene-list .list:nth-child(5):before {
   content: '05';
}

.bene-list .list:nth-child(6):before {
   content: '06';
}

.bene-sub {
   font-size: clamp(24px, 2vw, 44px);
   color: #fff;
   font-weight: 600;
   word-break: keep-all;
   text-align: center;
   padding: 20px 0;
}

#interior {
   background: url(../img/interior-bg.png) no-repeat center/cover;
   width: 100%;
   padding: clamp(50px, 5vw, 100px) 12px;
   text-align: center;
}

.section-mark {
   display: block;
   margin: 0 auto;
   max-width: 100%;
   height: auto;
}

@media (max-width: 600px) {
   .section-mark {
      height: 50px;
   }
}

#interior h3 {
   color: var(--main-blue);
   font-size: clamp(21px, 2vw, 44px);
   font-weight: 600;
   padding: clamp(16px, 2vw, 40px) 12px;
   display: inline-block;
}

.interior-slide {
   max-width: var(--gird-max);
   height: auto;
   position: relative;
}

.interior-slide .swiper-slide {
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
}

.interior-slide .swiper-slide img {
   width: 100%;
   display: block;
   max-width: 1200px;
   height: auto;
}

.swiper-button-next,
.swiper-button-prev {
   width: 60px;
   height: 60px;
   background-color: transparent;
   color: transparent;
   max-width: 1200px;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 10;
}

.swiper-button-next {
   background-image: url(../img/arrow-right.png);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   right: 0;
}

.swiper-button-prev {
   background-image: url(../img/arrow-left.png);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   left: 0;
}

.interior-txt {
   display: inline-block;
   padding: 18px 24px;
   font-size: clamp(14px, 2vw, 24px);
   word-break: keep-all;
   background: #fff;
   border: 1px solid var(--main-blue);
   text-align: left;
   z-index: 2;
   margin: 24px auto;
}

.interior-txt b {
   color: var(--main-blue);
   font-weight: 600;
}

@media (max-width: 620px) {

   .swiper-button-next,
   .swiper-button-prev {
      width: 40px;
      height: 40px;
   }

   .interior-txt p br {
      display: none;
   }
}

#menu {
   width: 100%;
   height: auto;
   text-align: center;
   position: relative;
   padding: clamp(50px, 5vw, 100px) 12px;
   overflow: hidden;
}

#menu .aos-wrap h3 {
   color: var(--main-blue);
   font-size: clamp(20px, 2vw, 44px);
   font-weight: 600;
   word-break: keep-all;
   padding: 30px 0;
   display: inline-block;
   position: relative;
}

#menu .aos-wrap h3 br {
   display: none;
}

.menu-marqueeY,
.menu-marqueeY-R {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 70px;
   overflow: hidden;
   z-index: -1;
}

@media (max-width: 500px) {

   .menu-marqueeY,
   .menu-marqueeY-R {
      display: none;
   }

   #menu .aos-wrap h3 br {
      display: block;
   }
}

.menu-marqueeY {
   left: 1%;
}

.menu-marqueeY-R {
   right: 1%;
}

.menu-track {
   display: flex;
   flex-direction: column;
   height: max-content;
   animation: scroll-y var(--dur, 40s) linear infinite;
   will-change: transform;
}

.menu-track img {
   width: 70px;
   height: auto;
   max-width: none;
   flex: 0 0 auto;
   display: block;
}

@keyframes scroll-y {
   from {
      transform: translateY(0);
   }

   to {
      transform: translateY(-50%);
   }
}

@media (max-width: 375px) {
   .menu-track img {
      width: 30px;
   }

   .menu-marqueeY-R {
      right: -10%;
   }
}

.menu-container {
   max-width: 1500px;
   margin: 0 auto;
   padding: 0 8%;
}

.tab-menu {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   background-color: #fff;
}

.tab-content {
   display: none;
}

.tab-content.active {
   display: block;
}

.tab-item {
   min-width: 0;
   width: 100%;
   font-family: var(--main-font);
   font-size: clamp(11px, 1.2vw, 20px);
   text-transform: uppercase;
   flex: 1;
   padding: 15px 20px;
   text-align: center;
   cursor: pointer;
   font-weight: 500;
   transition: all 0.3s ease;
   border-left: 1px solid var(--main-blue);
   border-top: 1px solid var(--main-blue);
   border-bottom: 1px solid var(--main-blue);
   word-break: break-all;
   letter-spacing: -1;
}

.tab-menu .tab-item:last-child {
   border-right: 1px solid var(--main-blue);
}

@media (max-width: 1024px) {
   .tab-menu {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }

   .tab-menu .tab-item:nth-child(3) {
      border-right: 1px solid var(--main-blue);
   }

   .tab-menu .tab-item:nth-child(n+4) {
      border-top: none;
   }
}

.tab-item.active {
   background: var(--main-blue);
   color: white;
}

.tab-item:hover {
   background: var(--main-blue);
   color: white;
}

#menu .swiper {
   padding: clamp(12px, 2vw, 24px);
   border-left: 1px solid var(--main-blue);
   border-right: 1px solid var(--main-blue);
   border-bottom: 1px solid var(--main-blue);
}

.product-card {
   text-align: center;
   width: 100%;
   transition: all 0.3s ease;
}

.product-card img {
   width: 100%;
   height: 200px;
   object-fit: contain;
   border-radius: 10px;
}

.product-card:hover {
   transform: translateY(-5px);
}

.product-image {
   width: auto;
   height: 200px;
   object-fit: cover;
   border-radius: 10px;
   margin-bottom: 15px;
   transition: all 0.3s ease;
}

.product-card:hover .product-image {
   transform: scale(1.1);
}

.product-name {
   font-size: clamp(14px, 2vw, 20px);
   color: #111;
}

.product-name-en {
   font-size: clamp(11px, 2vw, 14px);
   color: #888;
   margin-bottom: 12px;
}

#blended .product-name-en {
   margin-bottom: 0;
}

#always {
   width: 100%;
   background: url(../img/always-bg.png) no-repeat center / cover;
   display: flex;
   justify-content: center;
   gap: 8%;
   padding: clamp(50px, 2vw, 100px) 8%;
}

#always img {
   max-width: 100%;
   height: auto;
}

@media (max-width: 420px) {
   #always {
      flex-wrap: wrap;
   }

   .always-left img {
      content: url(../img/always-mo.png);
      margin-bottom: 40px;
   }
}

#fran-intro {
   width: 100%;
   padding: clamp(50px, 10vw, 100px) 12px;
   background: url(../img/fran-bgSymbol.png) no-repeat left bottom #0049E6;
   color: #fff;
   text-align: center;
}

#fran-intro span {
   font-size: clamp(22px, 2vw, 40px);
}

#fran-intro span b {
   font-weight: 600;
}

#fran-intro h3 {
   font-size: clamp(22px, 3vw, 50px);
   font-weight: 500;
}

#fran-intro h3 span {
   font-size: clamp(40px, 5vw, 90px);
   font-weight: 700;
}

#franchise {
   width: 100%;
   background: var(--BG-yellow);
   text-align: center;
   padding: 100px 4% 150px;
}

#franchise h2 {
   color: var(--main-blue);
   font-size: clamp(20px, 2vw, 30px);
   font-weight: 500;
   padding: 30px 0;
}

#franchise h2 br {
   display: none;
}

.price {
   position: relative;
   height: 732px;
}

.price img {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   max-width: 100%;
}

.price img:last-child {
   animation: blink 1.5s infinite linear alternate;
}

@keyframes blink {
   0% {
      opacity: 0;
   }

   50% {
      opacity: 1;
   }

   75% {
      opacity: 1;
   }

   100% {
      opacity: 0;
   }
}

@media (max-width: 1200px) {
   #franchise {
      padding: 80px 4%;
   }
}

@media (max-width: 800px) {
   .price {
      height: 400px;
   }
}

@media (max-width: 620px) {
   #franchise h2 br {
      display: block;
   }

   .fran-mark {
      height: 60px;
   }

   .price {
      height: 720px;
   }

   #franchise .price img:first-child {
      content: url(../img/창업비용-표-mo.png);
   }

   #franchise .price img:last-child {
      content: url(../img/창업비용-면제-mo.png);
   }
}


#store {
   width: 100%;
   padding: 100px 8%;
   text-align: center;
   background: url(../img/bg-horizontalStroke.png) no-repeat center / cover;
   border-top: 1px solid #0049E6;
}

.store-list {
   display: flex;
   justify-content: center;
   gap: 20px;
   margin-top: 40px;
}

.store-card {
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: stretch;
   width: min(100%, 1100px);
   height: auto;
   background: #fff;
   border: 1px solid #0049E6;
   overflow: hidden;
}

.store-media {
   margin: 0;
   min-width: 0;
}

.store-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.store-body {
   padding: 24px;
   border-left: 1px solid #0049E6;
   text-align: left;
   display: flex;
   flex-direction: column;
   min-width: 0;
   position: relative;
}

.store-inner {
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-top: auto;
}

.store-name {
   font-size: clamp(22px, 2.5vw, 28px);
   font-weight: 700;
}

.store-addr {
   font-size: clamp(14px, 2vw, 18px);
   color: #333;
}

.store-link {
   margin-top: 8px;
   display: block;
   width: 100%;
   text-align: center;
   padding: 12px;
   border: 1px solid #0049E6;
   color: #0049E6;
   font-size: clamp(14px, 2vw, 18px);
   transition: .2s;
}

.store-link:hover {
   background: #0049E6;
   color: #fff;
}

@media (max-width: 860px) {
   .store-card {
      grid-template-columns: 1fr;
   }

   .store-list {
      flex-wrap: wrap;
   }

   .store-body {
      border-left: 0;
      border-top: 1px solid #0049E6;
      padding: 20px;
   }

   .store-media img {
      width: 100%;
      height: 300px;
      object-fit: cover;
   }
}

@media (max-width: 620px) {
   .store-mark {
      height: 60px;
   }
}

@media (max-width: 420px) {
   .store-mark {
      height: 60px;
   }

   .store-media img {
      width: 100%;
      height: 200px;
      object-fit: cover;
   }
}

#footer {
   border-top: 1px solid #0049E6;
   padding: 40px 8% 160px;
   text-align: center;
   background-color: #fafafa;
   word-break: keep-all;
}

#footer p {
   color: #333;
   font-size: clamp(14px, 1vw, 16px);
   margin-bottom: 30px;
}

#footer span {
   color: #999;
   font-size: clamp(12px, 1vw, 16px);
}