/* =========================
   Base
========================= */
* {box-sizing: border-box;}
html,body {margin: 0;padding: 0;}
body {background: #fffdf9;color: #111;font-family: futura-100, sans-serif;}
a {text-decoration: none;color: inherit;}
img {max-width: 100%;display: block;}
:root {--topbar-h: 40px;--header-h: 88px;--hero-gap: 14px;--hero-bar-h: 58px;--hero-side: 28px;--hero-radius: 32px;}
@media screen and (max-width: 1024px) {
:root {--topbar-h: 42px;--header-h: 82px;--hero-gap: 12px;--hero-bar-h: 52px;--hero-side: 20px;--hero-radius: 26px;}}
@media screen and (max-width: 768px) {
:root {--topbar-h: 40px;--header-h: 72px;--hero-gap: 24px;--hero-bar-h: 46px;--hero-side: 16px;--hero-radius: 22px;}}


/* =========================
   header
========================= */
#header {width: 100%;background: #fffdf9; position: relative;}
#header #topbar {width: 100%;height: var(--topbar-h);background: #c6552c;display: flex;justify-content: flex-end;align-items: center;padding: 0 4%;}
#header #topbar .topbar-right {display: flex;align-items: center;gap: 8px;color: #fffdf9;font-size: 1em;font-weight: 500;line-height: 1;font-family: helvetica-neue-lt-pro, sans-serif;;}
#header #topbar .topbar-right img {width: 22px;height: 22px;object-fit: contain;}
#header #topbar .topbar-right .lang-arrow {font-size: 10px;position: relative;top: 1px;}
#header #header-main {width: 100%;height: var(--header-h);display: flex;align-items: center;justify-content: space-between;padding: 0 2.5%;background: #fffdf9;}
#header #header-main #top_logo {width: 220px;flex-shrink: 0;}
#header #header-main #top_logo img {width: 100%;height: auto;}
#header #header-main #nav {display: flex;align-items: center;gap: 48px;margin-left: auto;}
#header #header-main #nav .nav-item {position: relative;}
#header #header-main #nav .locations-trigger {font-size: 1.1em;letter-spacing: 0.2px;font-weight: 600;color: #333;display: inline-flex;align-items: center;gap: 8px;height: 40px;}
#header #header-main #nav .locations-trigger::after {content: "▼";font-size: 1em;position: relative;top: -1px;}
#header #header-main #nav .locations-list {list-style: none;margin: 0;padding: 14px 0;position: absolute;top: calc(100% + 12px);left: 0;min-width: 180px;background: #fffdf9;border: 1px solid rgba(0, 0, 0, 0.08);box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);border-radius: 16px;opacity: 0;visibility: hidden;transform: translateY(8px);transition: all 0.25s cubic-bezier(0.104, 0.204, 0.492, 1);z-index: 30;font-family: helvetica-neue-lt-pro, sans-serif;}
#header #header-main #nav .locations-list li {margin: 0;padding: 0;}
#header #header-main #nav .locations-list li a {display: block;padding: 12px 20px;font-size: 1em;font-weight: 500;color: #333;line-height: 1.2;}
#header #header-main #nav .locations-list li a:hover {color:#e95a1d;}
#header #header-main #nav .nav-locations:hover .locations-list {opacity: 1;visibility: visible;transform: translateY(0);}
#header #header-main #nav > a {font-size: 1.1em;letter-spacing: 0.2px;font-weight: 600;color: #333;}
#header #header-main #nav .contact-btn {width: 225px;height: 58px;border-radius: 999px;background: #de8b59;font-size: 1.1em;letter-spacing: 0.2px;font-weight: 600;color: #333;display: flex;align-items: center;justify-content: center;transition: opacity 0.3s ease;}
#header #header-main #nav .contact-btn:hover {opacity: 0.8;}
#header #header-main #hamburger {display: none;background: none;border: none;padding: 0;margin-left: 16px;cursor: pointer;}
#header #header-main #hamburger span {display: block;width: 28px;height: 2px;background: #333;margin: 6px auto;border-radius: 10px;}

@media screen and (max-width: 1024px) {
#header #topbar .topbar-right {font-size: 1em;}
#header #header-main #top_logo {width: 200px;}
#header #header-main #nav {gap: 28px;}
#header #header-main #nav > a {font-size: 1em;}
#header #header-main #nav .contact-btn {width: 190px;height: 52px;font-size: 1em;}}
@media screen and (max-width: 768px) {
#header #topbar {padding: 0 16px;}
#header #topbar .topbar-right {font-size: 1em;}
#header #topbar .topbar-right img {width: 18px;height: 18px;}
#header #header-main {padding: 0 16px;}
#header #header-main #top_logo {width: 170px;}
#header #header-main #nav {display: none;}
#header #header-main #hamburger {display: block;}
#header.menu-open #header-main #nav {display: flex;}
#nav {
   display: none;
   position: absolute;
   top: 100%;
   right: 20px;
   width: min(360px, calc(100% - 40px));
   background: #fff;
   border-radius: 16px;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
   padding: 18px 20px;
   margin: 0;
   flex-direction: column;
   align-items: flex-start;
   gap: 0;
   z-index: 5;
}}


/* =========================
   hero
========================= */
#hero {width: 100%;}
#hero .hero-img {width: calc(100% - (var(--hero-side) * 2));margin: 0 auto;height: calc(100vh - var(--topbar-h) - var(--header-h) - var(--hero-bar-h) - (var(--hero-gap) * 2));min-height: 420px;position: relative;overflow: hidden;border-radius: var(--hero-radius);}
#hero .hero-img::before {content: "";position: absolute;inset: 0;background: rgba(0, 0, 0, 0.22);z-index: 1;}
#hero .hero-img img {width: 100%;height: 100%;object-fit: cover;}
#hero .hero-img .hero-text {position: absolute;inset: 0;z-index: 2;display: flex;align-items: center;justify-content: center;text-align: center;padding: 20px;}
#hero .hero-img .hero-text h1 {color: #fffdf9;font-size: clamp(32px, 4vw, 58px);letter-spacing: 0.3px;line-height: 1.3;font-weight: 800;font-style: italic;text-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);}

@media screen and (max-width: 1024px) {
#hero .hero-img .hero-text h1 {font-size: clamp(34px, 4.6vw, 56px);}}
@media screen and (max-width: 768px) {
#hero .hero-img {min-height: auto;height: calc(100vh - var(--topbar-h) - var(--header-h) - var(--hero-bar-h) - (var(--hero-gap) * 2));}
#hero .hero-img .hero-text h1 {font-size: clamp(28px, 7vw, 40px);line-height: 1.3;}}


/* =========================
   hero bar
========================= */
#hero #hero-bar {width: 100%;height: var(--hero-bar-h);margin-top: var(--hero-gap);margin-bottom: var(--hero-gap);background: #de8b59;overflow: hidden;}
#hero #hero-bar .scrolling-text {width: 100%;height: 100%;display: flex;align-items: center;position: relative;overflow: hidden;}
#hero #hero-bar .scrolling-text-inner {width: 100%;height: 100%;display: flex;align-items: center;white-space: nowrap;overflow: hidden;position: relative;}
#hero #hero-bar .scrolling-track {display: flex;align-items: center;flex-shrink: 0;}
#hero #hero-bar .track-desktop {width: 100%;justify-content: center;}
#hero #hero-bar .track-mobile {display: none;}
#hero #hero-bar .scrolling-text-item {display: inline-flex;align-items: center;padding: 0 22px;flex-shrink: 0;}
#hero #hero-bar .scrolling-text-item span {display: inline-block;color: #333;font-size: 1em;font-weight: 700;line-height: 1;white-space: nowrap;transition: all 0.25s cubic-bezier(0.104, 0.204, 0.492, 1);}

@media screen and (max-width: 1024px) {
#hero #hero-bar .scrolling-text-item {padding: 0 40px;}
#hero #hero-bar .scrolling-text-item span {font-size: 0.9em;}
#hero #hero-bar .scrolling-text-inner {overflow: hidden;}
#hero #hero-bar .track-desktop,
#hero #hero-bar .track-mobile {display: flex;width: max-content;justify-content: flex-start;animation: hero-marquee-left 22s linear infinite;}}
@media screen and (max-width: 768px) {
#hero #hero-bar {height: 46px;}
#hero #hero-bar .scrolling-text-inner {overflow: hidden;}
#hero #hero-bar .track-desktop,
#hero #hero-bar .track-mobile {display: flex;width: max-content;justify-content: flex-start;animation: hero-marquee-left 18s linear infinite;}
#hero #hero-bar .scrolling-text-item {padding: 0 32px;}
#hero #hero-bar .scrolling-text-item span {font-size: 0.9em;line-height: 1;}}
@keyframes hero-marquee-left {0% {transform: translateX(0%);} 100% {transform: translateX(-100%);}}


/* =========================
   intro
========================= */
#intro {width: 100%;padding: 110px 0 120px;}
#intro .inner {width: 95%;max-width: 1000px;margin: 0 auto;text-align: center;}
#intro .inner .intro-label {margin: 0;color: #c6552c;font-size: 1.8em;line-height: 1.2;font-weight: 700;letter-spacing: 0.01em;}
#intro .inner .intro-copy {margin: 34px auto 0;color: #333;font-size: 3.4em;line-height: 1.2;font-weight: bold;letter-spacing: 0.01em;font-family: "helvetica-neue-lt-pro", sans-serif;}
@media screen and (max-width: 1024px) {
#intro {padding: 82px 0 94px;}
#intro .inner {width: 80%;}
#intro .inner .intro-label {font-size: 1.4em;}
#intro .inner .intro-copy {margin-top: 26px;font-size: clamp(34px, 5vw, 56px);line-height: 1.24;}
#intro .inner .intro-copy br {display: none;}}
@media screen and (max-width: 768px) {
#intro {padding: 56px 0 64px;}
#intro .inner {width: 85%;}
#intro .inner .intro-label {font-size: 1em;line-height: 1.35;}
#intro .inner .intro-copy {margin-top: 18px;font-size: 2em;line-height: 1.28;letter-spacing: 0;}
#intro .inner .intro-copy br {display: none;}}


/* =========================
   recommend
========================= */
#recommend {width: 100%;background: #ffecd2;border-top-left-radius: 120px;padding: 64px 0;overflow: hidden;}
#recommend .inner {width: 85%;max-width: 1320px;margin: 0 auto;}
#recommend .inner h2 {margin: 0 0 32px;text-align: center;color: #333;font-size: 1.3em;letter-spacing: 1px;line-height: 1.1;font-weight: 700;font-family: "helvetica-lt-pro", sans-serif;}
#recommend .inner .recommend-slider {position: relative;}
#recommend .inner .recommend-viewport {overflow: hidden;width: 100%;}
#recommend .inner .recommend-track {display: flex;gap: 36px;transition: transform 0.5s ease;will-change: transform;}
#recommend .inner .recommend-track.no-transition {transition: none;}
#recommend .inner .recommend-item {flex: 0 0 calc((100% - 108px) / 4);min-width: 0;}
#recommend .inner .recommend-item .recommend-img {width: 100%;aspect-ratio: 1 / 1.2;overflow: hidden;background: #ddd;}
#recommend .inner .recommend-item .recommend-img img {width: 100%;height: 100%;object-fit: cover;}
#recommend .inner .recommend-item h3 {margin: 12px 0;color: #8a6737;font-size: 1.2em;line-height: 1.15;font-weight: 700;font-style: italic;letter-spacing: 0.2px;}
#recommend .inner .recommend-item p {margin: 0;color: #5c5750;font-family: helvetica-neue-lt-pro, sans-serif;font-size: 1em;line-height: 1.2;font-weight: 400;letter-spacing: 0.1px;}
#recommend .inner .recommend-item .recommend-meta {margin-top: 8px;}
#recommend .inner .recommend-item .recommend-price {margin: 0 0 12px;color: #5c5750;font-family: helvetica-neue-lt-pro, sans-serif;font-size: 1em;line-height: 1.1;font-weight: 500;}
#recommend .inner .recommend-item .recommend-shop-list {display: flex;flex-wrap: wrap;gap: 8px;margin: 0;padding: 0;list-style: none;}
#recommend .inner .recommend-item .recommend-shop-list li {display: inline-flex;align-items: center;justify-content: center;min-height: 24px;padding: 4px 10px 3px;border: 1px solid #8a6737;border-radius: 999px;color: #6f5a36;font-family: helvetica-neue-lt-pro, sans-serif;font-size: 11px;line-height: 1;font-weight: 600;letter-spacing: 0.5px;}
#recommend .inner .recommend-arrow {position: absolute;top: 28%;transform: translateY(-50%);width: 42px;height: 42px;border: none;border-radius: 50%;background: rgba(255, 253, 249, 0.95);color: #8a6737;box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);display: flex;align-items: center;justify-content: center;cursor: pointer;z-index: 5;}
#recommend .inner .recommend-arrow span {font-size: 34px;line-height: 1;position: relative; padding-bottom: 0.35em;}
#recommend .inner .recommend-arrow.prev {left: -26px;}
#recommend .inner .recommend-arrow.next {right: -26px;}

@media screen and (max-width: 1024px) {
#recommend {padding: 48px 0;}
#recommend .inner .recommend-viewport {overflow: hidden;padding: 0 4%;}
#recommend .inner .recommend-track {gap: 24px;}
#recommend .inner .recommend-item {flex: 0 0 29%;}
#recommend .inner .recommend-item h3 {font-size: 1.25em;}
#recommend .inner .recommend-item p {font-size: 1.05em;line-height: 1.35;}}
@media screen and (max-width: 768px) {
#recommend {border-top-left-radius: 48px;padding: 40px 0 24px;}
#recommend .inner {width: 100%;}
#recommend .inner h2 {margin-bottom: 24px;}
#recommend .inner .recommend-viewport {overflow: hidden;padding: 0 6%;}
#recommend .inner .recommend-track {gap: 16px;}
#recommend .inner .recommend-item {flex: 0 0 44%;}
#recommend .inner .recommend-item h3 {margin: 14px 0 10px;font-size: 1.2em;}
#recommend .inner .recommend-item p {font-size: 1em;line-height: 1.45;}
#recommend .inner .recommend-item .recommend-meta {margin-top: 12px;}
#recommend .inner .recommend-item .recommend-price {margin-bottom: 10px;font-size: 1.15em;}
#recommend .inner .recommend-item .recommend-shop-list {gap: 6px;}
#recommend .inner .recommend-item .recommend-shop-list li {font-size: 10px;padding: 4px 8px 3px;}
#recommend .inner .recommend-arrow {width: 32px;height: 32px;top: 22%;}
#recommend .inner .recommend-arrow.prev {left: 8px;}
#recommend .inner .recommend-arrow.next {right: 8px;}}
@media screen and (max-width: 500px) {
#recommend .inner .recommend-viewport {padding: 0 2% 0 16px;}
#recommend .inner .recommend-track {gap: 12px;}
#recommend .inner .recommend-item {flex: 0 0 44%;}
#recommend .inner .recommend-item h3 {font-size: 1.35em;}
#recommend .inner .recommend-item p {font-size: 0.95em;line-height: 1.45;}
#recommend .inner .recommend-item .recommend-price {font-size: 1em;}
#recommend .inner .recommend-item .recommend-shop-list li {font-size: 9px;padding: 4px 7px 3px;}}


/* =========================
   locations
========================= */
#locations {width: 100%;padding: 72px 0 80px;}
#locations .inner {width: 85%;max-width: 1320px;margin: 0 auto;}
#locations .inner .locations-note {margin: 0 auto 18px;color: #c6552c;font-size: 1.2em;line-height: 1.2;font-weight: 700;letter-spacing: 0.01em;text-align: center;}
#locations .inner .locations-note::before,
#locations .inner .locations-note::after {display: none;}
#locations .inner h2 {margin: 0 0 32px;text-align: center;color: #333;font-size: 1.3em;letter-spacing: 1px;line-height: 1.1;font-weight: 700;font-family: "helvetica-lt-pro", sans-serif;}
#locations .inner .sp-main-img {display: none;}
#locations .inner .sp-main-img img {width: 100%;height: auto;display: block;}
#locations .inner .locations-list {display: grid;grid-template-columns: repeat(3, 1fr);gap: 32px 32px;}
#locations .inner .location-item {border: 1px solid #c7b794;display: flex;flex-direction: column;}
#locations .inner .location-img {width: 100%;aspect-ratio: 16/ 9;overflow: hidden;background: #ddd;}
#locations .inner .location-img img {width: 100%;height: 100%;object-fit: cover;}
#locations .inner .location-body {padding: 8px 12px 16px;display: flex;flex-direction: column;flex: 1;}
#locations .inner .location-head {display: flex;align-items: center;justify-content: space-between;gap: 16px;}
#locations .inner .location-head h3 {margin: 0;color: #333;font-size: 0.9em;line-height: 1.1;font-weight: bold;letter-spacing: 0.4px;}
#locations .inner .location-text {margin: 4px 0 0;color: #5c5750;font-size: 0.9em;line-height: 1.3;font-weight: 400;letter-spacing: 0.1px;font-family: helvetica-neue-lt-pro, sans-serif;}
#locations .inner .location-head .instagram-link {display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0;}
#locations .inner .location-head .instagram-link img {width: 28px;height: 28px;object-fit: contain;}
#locations .inner .location-links {display: flex;align-items: center;gap: 8px;margin-top: auto;padding-top: 12px;}
#locations .inner .location-links a {flex: 1;padding: 12px 0;border-radius: 999px;display: inline-flex;align-items: center;justify-content: center;text-align: center;font-size: 0.9em;line-height: 1;font-weight: bold;letter-spacing: 0.2px;font-family: helvetica-neue-lt-pro, sans-serif;}
#locations .inner .location-links .btn-outline {border: 2px solid #9a7a3a;color: #9a7a3a;background: transparent;}
#locations .inner .location-links .btn-fill {border: 2px solid #9a7a3a;color: #fffdf9;background: #9a7a3a;}
#locations .inner .location-item:nth-child(4) {grid-column: 1 / 2;}
#locations .inner .location-item:nth-child(5) {grid-column: 2 / 3;}

@media screen and (max-width: 1024px) {
#locations {padding: 60px 0 68px;}
#locations .inner {width: 90%;}
#locations .inner .locations-note {font-size: 1em;margin-bottom: 16px;}
#locations .inner .locations-list {grid-template-columns: repeat(3, 1fr);gap: 24px 24px;}
#locations .inner .location-item:nth-child(4) {grid-column: 1 / 2;}
#locations .inner .location-item:nth-child(5) {grid-column: 2 / 3;}
#locations .inner .location-body {padding: 8px 10px 14px;display: flex;flex-direction: column;flex: 1;}
#locations .inner .location-head {gap: 10px;}
#locations .inner .location-head h3 {font-size: 0.9em;line-height: 1.1;font-weight: bold;}
#locations .inner .location-text {margin-top: 4px;font-size: 0.8em;line-height: 1.3;}
#locations .inner .location-head .instagram-link img {width: 24px;height: 24px;}
#locations .inner .location-links {flex-direction: column;align-items: stretch;gap: 8px;margin-top: auto;padding-top: 10px;}
#locations .inner .location-links a {width: 100%;height: 36px;font-size: 0.78em;}}
@media screen and (max-width: 768px) {
#locations {padding: 32px 0 48px;}
#locations .inner {width: 90%;}
#locations .inner .locations-note {font-size: 1.1em;line-height: 1.35;margin-bottom: 12px;}
#locations .inner h2 {margin: 0 0 16px;}
#locations .inner .sp-main-img {display: block;margin-bottom: 24px;aspect-ratio: 16 / 9;overflow: hidden;}
#locations .inner .sp-main-img img {width: 100%;height: 100%;object-fit: cover;}
#locations .inner .locations-list {grid-template-columns: 1fr;gap: 0;border-top: 1px solid #c7b794;border-left: 1px solid #c7b794;border-right: 1px solid #c7b794;}
#locations .inner .location-item,#locations .inner .location-item:nth-child(4),#locations .inner .location-item:nth-child(5) {grid-column: auto;}
#locations .inner .location-item {border: 0;border-bottom: 1px solid #c7b794;}
#locations .inner .location-img {display: none;}
#locations .inner .location-body {padding: 14px 18px 14px;display: flex;flex-direction: column;}
#locations .inner .location-head {align-items: flex-start;gap: 12px;}
#locations .inner .location-head h3 {font-size: 1em;line-height: 1.1;font-weight: bold;}
#locations .inner .location-text {margin-top: 6px;font-size: 0.9em;line-height: 1.4;}
#locations .inner .location-head .instagram-link img {width: 24px;height: 24px;}
#locations .inner .location-links {gap: 12px;margin-top: auto;padding-top: 12px;flex-direction: row;}
#locations .inner .location-links a {font-size: 0.9em;}
#locations .inner .locations-note {margin-bottom: 10px;font-size: 0.78em;}}


/* =========================
   review
========================= */
#review {width: 100%;padding: 80px 0 96px;border-top: 1px solid #a78f5a;border-bottom: 1px solid #a78f5a;}
#review .inner {width: 85%;max-width: 1320px;margin: 0 auto;}
#review .inner h2 {margin: 0 0 32px;text-align: center;color: #333;font-size: 1.3em;letter-spacing: 1px;line-height: 1.1;font-weight: 700;font-family: "helvetica-lt-pro", sans-serif;}
#review .inner .review-list {display: flex;justify-content: space-between;gap: 32px;}
#review .inner .review-card {width: calc((100% - 64px) / 3);padding: 16px 16px 24px;border: 1px solid #b39b68;background: transparent;box-sizing: border-box;}
#review .inner .review-card .stars {margin-bottom: 16px;color: #9b7c3c;font-size: 1.2em;line-height: 1;letter-spacing: 0.08em;}
#review .inner .review-card h3 {margin: 0 0 12px;color: #111;font-size: 1.4em;line-height: 1.2;font-weight: 700;font-family: "helvetica-neue-lt-pro", sans-serif;}
#review .inner .review-card p {margin: 0 0 12px;color: #5b5752;font-size: 1em;line-height: 1.45;font-weight: 400;font-family: "helvetica-neue-lt-pro", sans-serif;}
#review .inner .review-card span {display: inline-block;color: #5b5752;font-size: 1em;line-height: 1.3;font-weight: 500;font-family: "helvetica-neue-lt-pro", sans-serif;}
#review .inner .review-dots {display: none;}

@media screen and (max-width: 1024px) {
#review {padding: 64px 0 80px;}
#review .inner {width: 90%;}
#review .inner .review-list {gap: 20px;}
#review .inner .review-card {width: calc((100% - 40px) / 3);padding: 16px 12px 24px;}
#review .inner .review-card .stars {margin-bottom: 16px;font-size: 1.2em;}
#review .inner .review-card h3 {font-size: 1.2em;}
#review .inner .review-card p {font-size: 1em;line-height: 1.45;}
#review .inner .review-card p br {display: none;}}
#review .inner .review-dots {display: none;}
@media screen and (max-width: 768px) {
#review {padding: 48px 0 56px;}
#review .inner {width: 90%;}
#review .inner h2 {margin-bottom: 28px;font-size: 1.2em;}
#review .inner .review-list {display: flex;flex-direction: row;gap: 16px;overflow-x: auto;scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;scrollbar-width: none;cursor: grab;user-select: none;}
#review .inner .review-list::-webkit-scrollbar {display: none;}
#review .inner .review-list:active {cursor: grabbing;}
#review .inner .review-card {flex: 0 0 100%;width: 100%;padding: 16px 24px 32px;scroll-snap-align: start;}
#review .inner .review-card .stars {margin-bottom: 12px;font-size: 1.2em;}
#review .inner .review-card h3 {margin-bottom: 12px;font-size: 1.2em;}
#review .inner .review-card p {margin-bottom: 12px;font-size: 1em;line-height: 1.45;}
#review .inner .review-card span {font-size: 1em;}
#review .inner .review-dots {display: flex;justify-content: center;align-items: center;gap: 10px;margin-top: 20px;}
#review .inner .review-dots .dot {width: 10px;height: 10px;border: none;border-radius: 50%;background: #d7cfbf;padding: 0;cursor: pointer;transition: background 0.3s ease, transform 0.3s ease;}
#review .inner .review-dots .dot.active {background: #9b7c3c;transform: scale(1.15);}}



/* =========================
   Hamburger
========================= */
#hamburger {display: none;width: 52px;height: 52px;border: none;background: transparent;padding: 0;cursor: pointer;position: relative;flex-shrink: 0;}
#hamburger span {display: block;width: 28px;height: 2px;background: #555;transition: 0.3s;}
/* 開いた時 */
#header.menu-open #hamburger span:nth-child(1) {transform: translateY(8px) rotate(45deg);}
#header.menu-open #hamburger span:nth-child(2) {opacity: 0;}
#header.menu-open #hamburger span:nth-child(3) {transform: translateY(-8px) rotate(-45deg);}