@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap");
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700&subset=japanese");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap");

/* ════════════════════════════════════════════════════════
   EXPRESS STUDIO FREX — style.css
   Breakpoints:
     PC      : 1024px+
     Tablet  : 768px – 1023px
     Mobile  : ~767px
════════════════════════════════════════════════════════ */
/* ─── RESET & BASE ─────────────────────────────────── */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

:root {
   --teal: #2b7b7b;
   --cyan: #00c4be;
   --gray-dark: #484848;
   --text: #222222;
   --text-light: #333333;
   --bg-light: #f2f2f2;
   --bg-gray: #e5e0e0;
   --max-max: 1400px;
   --max-w: 1200px;
   --full-w: 1920px;
   --hd-h: 75px;/*95*/
   /* ヘッダー高さ */
   --hd-h-sp: 50px;
   /* SP ヘッダー高さ */
   --font-en: Arial, 'Noto Sans JP', sans-serif;
   --font-en2: 'Karla', sans-serif;
}

html {
   scroll-behavior: smooth;
}

body {
   /*font-family: "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", 'Noto Sans JP', sans-serif;*/
   font-family: "Noto Sans CJK JP", "Noto Sans Japanese", "Noto Sans JP","游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro", Osaka, "Meiryo","メイリオ","MS Pゴシック",sans-serif;
   color: var(--text);
   background: #fff;
   font-size: 14px;
   font-weight: 500;
   line-height: 1.8;
}

a {
   text-decoration: none;
   color: inherit;
}

img {
   display: block;
   max-width: 100%;
}

br.sm_br {
   display: none;
}

.link {
 text-decoration: underline;
}

/* ════════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════════ */
header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 200;
   background: #fff;
   border-bottom: 1px solid #eee;
   height: var(--hd-h);
   transition: box-shadow .3s;
   padding-top: 0;/*10*/
}

header.scrolled {
   box-shadow: 0 2px 14px rgba(0, 0, 0, .1);
}

header .hd-inner {
   max-width: var(--max-max);
}

.hd-inner {
   max-width: var(--max-w);
   margin: 0 auto;
   height: 100%;
   display: flex;
   align-items: center;
   padding: 0 10px;
   position: relative;
}

/* ── ロゴ ── */
.logo {
   display: flex;
   align-items: center;
   gap: 9px;
   flex-shrink: 0;
   margin-right: auto;
}

/* ── PC ナビ ── */
.hd-nav {
   display: flex;
   align-items: center;
   gap: 45px;
   margin-right: 16px;
   position: absolute;
   right: 290px;
   /*bottom: 6px;*/
}

.hd-nav a {
   font-size: 1.2em;
   font-weight: 500;
   color: var(--text);
   letter-spacing: .04em;
   padding: 4px 0;
   position: relative;
   white-space: nowrap;
}

.hd-nav a::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: var(--text);
   transform: scaleX(0);
   transition: transform .25s;
   transform-origin: left;
}

.hd-nav a:hover::after {
   transform: scaleX(1);
}

/* ── ヘッダー右：電話 + メール ── */
.hd-right {
   display: flex;
   align-items: center;
   gap: 0;
   flex-shrink: 0;
   position: absolute;
   right: 10px;
   bottom: 17px;
   z-index: 5;
}

.hd-phone {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 2px 0 2px 20px;
}

.hd-phone-info {
   display: flex;
   align-items: center;
}

.hd-phone-num {
   font-size: 1.55em;
   font-weight: 900;
   letter-spacing: 0;
   line-height: 1em;
}

.hd-phone-hrs {
   font-size: 0.95em;
   letter-spacing: .04em;
   font-weight: 900;
   line-height: 1;
   margin-top: 2px;
}

.hd-mail {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 3px;
   font-size: 0.625em;
   color: #888;
   letter-spacing: .06em;
   padding: 2px 15px;
   border-right: 1px dashed #bdbdbd;
   border-left: 1px dashed #bdbdbd;
}

/* ── ハンバーガーボタン（SP のみ表示） ── */
.hd-hamburger {
   display: none;
   flex-direction: column;
   justify-content: center;
   gap: 5px;
   width: 36px;
   height: 36px;
   cursor: pointer;
   padding: 4px;
   margin-left: 12px;
   background: none;
   flex-shrink: 0;
   position: absolute;
   left: 0;
   border: 0;
   /*border: 1px solid var(--text);*/
   z-index: 10;
}

.hd-hamburger span {
   display: block;
   width: 80%;
   height: 2px;
   background: var(--text);
   border-radius: 2px;
   transition: transform .3s, opacity .3s;
   transform-origin: center;
   position: relative;
   left: 10%;
}

/* 開いた状態 */
.hd-hamburger.is-open span:nth-child(1) {
   transform: translateY(7px) rotate(45deg);
}

.hd-hamburger.is-open span:nth-child(2) {
   opacity: 0;
   transform: scaleX(0);
}

.hd-hamburger.is-open span:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg);
}

/* ── スマホ ドロワーナビ ── */
.sp-nav {
   display: none;
   position: fixed;
   top: var(--hd-h-sp);
   left: 0;
   right: 0;
   bottom: 0;
   background: #fff;
   z-index: 199;
   flex-direction: column;
   padding: 32px 28px;
   gap: 0;
   overflow-y: auto;
   transform: translateX(100%);
   transition: transform .35s ease;
}

.sp-nav.is-open {
   transform: translateX(0);
}

.sp-nav a:first-child {
   border-top: 1px solid #9b9b9b;
}

.sp-nav a {
   display: block;
   padding: 12px 4px;
   font-size: 1.2em;
   font-weight: 500;
   color: var(--text);
   letter-spacing: .06em;
   border-bottom: 1px solid #9b9b9b;
}

.sp-nav-contact {
   margin-top: 28px;
   display: flex;
   gap: 5vw;
   padding: 0 3vw;
}

.sp-nav-contact-inner {
   display: flex;
   align-items: center;
}

.sp-nav-contact img {
   width: 50px;
}

.sp-nav-contact .sp-tel {
   font-size: 8.2vw;
   font-weight: 700;
   color: var(--text);
   letter-spacing: .04em;
   border: none !important;
   padding: 0;
   line-height: 1em;
}

.sp-nav-contact .sp-tel-hrs {
   font-size: 5vw;
   line-height: 1;
   margin-top: 10px;
}

.sp-nav-contact .sp-form {
   display: inline-block;
   padding: 10px 24px;
   border: 1px solid var(--teal);
   color: var(--teal);
   font-size: 0.813em;
   letter-spacing: .1em;
   text-align: center;
}



/* ════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════ */
.hero {
   position: relative;
   margin-top: var(--hd-h);
   height: 800px;
   overflow: hidden;
}
.hero2 {
   position: relative;
   margin-top: var(--hd-h);
   /*height: 400px;*/
   overflow: hidden;
}

/* ── 背景動画コンテナ ── */
#backgroundVideo {
   position: absolute;
   inset: 0;
   overflow: hidden;
}

/* video / iframe 共通：JS でサイズを計算・中央配置 */
#backgroundVideo video,
#backgroundVideo iframe {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

/* video はネイティブ object-fit で中央カバー */
#backgroundVideo video {
   min-width: 100%;
   min-height: 100%;
   object-fit: cover;
   object-position: center center;
}

/* iframe はクリック透過（背景用途） */
#backgroundVideo iframe {
   border: none;
   pointer-events: none;
}

.hero-body {
   position: relative;
   z-index: 2;
   max-width: var(--max-w);
   margin: 0 auto;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
}
.hero-body2 {
   position: relative;
   z-index: 2;
   max-width: var(--max-w);
   margin: 0 auto;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
}

.hero-inner {
   max-width: 95%;
   text-align: center;
   margin: 0 auto;
   color: #fff;
   font-weight: 700;
}

.hero-main-text {
   font-size: 2.25em;
   letter-spacing: .1em;
   margin-bottom: 0.7em;
}

.hero-sub-text {
   font-size: 3.2em; /*1.875 */
   letter-spacing: .06em;
}

.studio-hero-text {
   font-size: 4.5em;
   font-weight: 600;
   letter-spacing: 1px;
   position: relative;
   font-family: var(--font-en);
   padding-top: 2em;
}
.studio-hero-text2 {
   font-size: 3.5em;
   font-weight: 600;
   letter-spacing: 1px;
   position: relative;
   padding-top: 2em;
   padding-bottom: 1em;
}

.hero-main-text-inner:after {
   content: "";
   height: 1px;
   background-color: #fff;
   width: 100%;
   position: absolute;
   bottom: 14px;
   left: 0;
}

.hero-main-text-inner {
   position: relative;
   line-height: 1;
   vertical-align: baseline;
   padding: 0 50px;
}

.studio-hero-text .big {
   font-size: 3.2em;
   font-weight: 700;
   margin-right: 10px;
   line-height: 1;
}

/* ════════════════════════════════════════════════════════
   ABOUT
════════════════════════════════════════════════════════ */
.about {
   padding: 80px 36px 20px;
}

.about-inner {
   max-width: var(--max-w);
   margin: 0 auto;
}

.about-copy {
   text-align: center;
   font-size: 1.35em;
   line-height: 2.1;
   margin: 0 auto 20px;
   font-weight: 500;
}

.about-headline {
   text-align: center;
   margin-bottom: 22px;
}

.about-headline h2 {
   font-size: 3.5em;
   font-weight: 700;
   letter-spacing: .05em;
   line-height: 1.4em;
   color: var(--text);
}

.about-headline .strong {
   font-size: 1.3em;
   font-weight: bold;
   letter-spacing: 0;
   position: relative;
   top: 3px;
   margin: 0 8px;
}

.about-headline .letter0 {
   letter-spacing: -7px;
}

.about-sub {
   display: flex;
   justify-content: center;
   gap: 60px;
   font-size: 1.6em;
   color: var(--text);
   font-weight: 700;
   letter-spacing: .07em;
}

.studio-headline {
   text-align: center;
   margin-bottom: 30px;
}

.studio-headline h2 {
   font-size: 3.5em;
   font-weight: 700;
   letter-spacing: .05em;
   line-height: 1.4em;
   color: var(--text);
}

.studio-catch-head {
   text-align: center;
   font-size: 1.6em;
   line-height: 2.1;
   margin: 0 auto 60px;
   font-weight: 500;
}

/* ════════════════════════════════════════════════════════
   PHOTO GRID
════════════════════════════════════════════════════════ */
.photo-grid {
   max-width: var(--max-w);
   margin: 48px auto 0;
   padding: 0 36px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
}

.sec-space {
   padding: 0 36px;
}

.photo-item img {
   width: 100%;
   aspect-ratio: 4/3;
   object-fit: cover;
   border-radius: 10px;
}

.photo-cap {
   margin-top: 1.5em;
   font-size: 1.8em;
   color: var(--text);
   line-height: 1.75;
   font-weight: 500;
   text-align: center;
}

/* ════════════════════════════════════════════════════════
   STUDIO SECTIONS
════════════════════════════════════════════════════════ */
body .mode-sp {
   display: none;
}

.studio-sec {
   padding: 100px 0;
   background-color: var(--bg-light);
   overflow: hidden;
}

#a-studio.studio-sec {
   margin-top: 100px; /*120*/
}

.studio-sec.bg-gray {
   background-color: var(--bg-gray);
}

.studio-layout {
   max-width: var(--full-w);
   margin: 0 auto;
   padding: 0 36px;
   position: relative;
}

.studio-info {
   padding-left: calc(50% - 90px);
   box-sizing: border-box;
   position: relative;
   z-index: 5;
}

#b-studio .studio-info {
   padding-left: 0%;
   width: calc(50% + 90px);
}

.studio-info-detail {
   padding: 20px 20px 120px 160px;
   /*padding: 20px 20px 20px 160px;*/
   background-color: var(--bg-light);
   border-radius: 20px 0 0 20px;
   position: relative;
}

#b-studio .studio-info-detail {
   background-color: var(--bg-gray);
   padding: 20px 40px 120px 20px;
   /*padding: 20px 40px 20px 20px;*/
   border-radius: 0 20px 20px 0;
}

.studio-img {
   position: absolute;
   top: 0;
   left: 0;
   width: 50%;
   height: auto;
   z-index: 1;
}

#b-studio .studio-img {
   left: auto;
   right: 0;
}

.studio-img img {
   width: 100%;
   height: auto;
   border-radius: 0 10px 10px 0;
}

#b-studio .studio-img img {
   border-radius: 10px 0 0 10px;
}

.studio-ttl {
   display: flex;
   align-items: center;
   gap: 2px;
   margin-bottom: 32px;
   position: relative;
   padding-left: 160px;
   padding-top: 6em;
}

#b-studio .studio-ttl {
   padding-left: 0;
}

.studio-ttl:after {
   content: "";
   width: 100%;
   height: 2px;
   background-color: #ffffff;
   bottom: 0;
   position: absolute;
   left: 160px;
}

#b-studio .studio-ttl:after {
   left: auto;
   right: 160px;
}

.studio-letter {
   font-size: 11em;
   font-weight: 600;
   line-height: 1;
   color: var(--text);
   font-family: var(--font-en);
   letter-spacing: -.02em;
}

.studio-word {
   font-size: 3em;
   font-weight: bold;
   letter-spacing: 0;
   color: var(--text);
   margin-left: 12px;
   position: relative;
   top: 43px;
   font-family: var(--font-en);
}

.cam-icon {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   opacity: .08;
}

.studio-catch {
   font-size: 1.8em;
   font-weight: 800;
   color: var(--text);
   line-height: 1.9;
   margin-bottom: 1em;
   text-align: left;
}

.studio-desc {
   font-size: 1.4em;
   color: var(--text-light);
   line-height: 1.6;
   margin-bottom: 1em;
   font-weight: 600;
   max-width: 29em;
}

.studio-spec {
   color: var(--text-light);
   line-height: 1.6;
   margin-bottom: 1em;
   font-size: 1em;/*0.9*/
}

/* 詳しくはこちら */
.more-link {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   font-size: 1.25em;
   letter-spacing: .08em;
   color: var(--text);
   transition: transform .2s;
   float: right;
   font-weight: 600;
   margin-top: 20px;
}

.more-link img {
   width: 82px;
}

.more-link:hover {
   transform: scale(1.05);
}

/* ════════════════════════════════════════════════════════
   ご利用手順
════════════════════════════════════════════════════════ */
.steps-sec {
   position: relative;
   padding: 80px 36px 70px;
   overflow: hidden;
}

.steps-sec::before {
   content: '';
   position: absolute;
   inset: 0;
   background: url('../img/step_bg.jpg') center/cover no-repeat;
   opacity: .25;
}

.steps-inner {
   position: relative;
   max-width: var(--max-w);
   margin: 0 auto;
}

.sec-title {
   text-align: center;
}

.sec-title h2 {
   font-size: 2.5em;
   font-weight: bold;
   letter-spacing: .1em;
}

.sec-en {
   text-align: center;
   font-size: 1.5em;
   letter-spacing: .1em;
   color: var(--text);
   margin-bottom: 13px;
   font-family: var(--font-en);
}

.sec-divider {
   width: 1px;
   height: 54px;
   background: var(--text-light);
   margin: 8px auto 0;
}

.steps-row {
   margin: 0 auto;
}

.steps-row .step-item:first-child {
   margin-top: 20px;
}

.step-item:after {
   content: "";
   left: 50%;
   bottom: -38px;
   height: 27px;
   width: 1px;
   background-color: #333;
   position: absolute;
}

.steps-row .step-item:last-child:after {
   display: none;
}

.step-item {
   display: flex;
   gap: 46px;
   padding: 46px;
   margin: 46px 0;
   background-color: #fff;
   border-radius: 10px;
   border: 1px solid #e6e6e6;
   position: relative;
   line-height: 1.2em;
}

.step-item-left {
   display: flex;
   gap: 20px;
   width: 20em;
}

.step-item-inner {
   text-align: center;
   width: 6em;
}

.step-item-inner span {
   display: block;
}

.step-lbl {
   font-size: 1.5em;
   letter-spacing: 0.01em;
   line-height: 1em;
   font-family: var(--font-en);
}

.step-num {
   font-size: 3.8em;
   font-weight: 700;
   line-height: 1em;
   color: var(--text);
   font-family: var(--font-en);
   margin-top: 6px;
}

.step-name {
   font-size: 1.5em;
   font-weight: 700;
   color: var(--text);
   letter-spacing: .04em;
   line-height: 1.6;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   border-top: 1px solid #333;
   border-bottom: 1px solid #333;
   text-align: center;
}

.step-item-right {
   font-size: 1.15em;
   color: var(--text-light);
   /*text-align: center;*/
   width: calc(100% - 20em);
   line-height: 1.6em;
   display: flex;
   justify-content: left;
   align-items: center;
}

.step-contact-row {
   display: flex;
   align-items: center;
   gap: 20px;
   flex-wrap: wrap;
   justify-content: center;
}
.step-contact-row-box {
	margin-top: 10px;
	border: 1px solid var(--gray-dark);
	border-radius: 5px;
	padding: 4px 10px;
}
.step-tel {
   font-size: 0.8em;
   color: #666;
}

.open-date {
   display: inline-block;
}

.step-tel strong {
   font-size: 1.6em;
   font-weight: 700;
   color: var(--text);
   letter-spacing: .05em;
   position: relative;
   top: 1px;
   margin: 0 7px;
}

.step-form-link {
   font-size: 1.1em;
   font-weight: 700;
   color: var(--text);
   transition: color .2s;
   letter-spacing: 0.05em;
}

.step-form-link:hover {
   color: var(--teal);
}

.step-note {
   margin-top: 6px;
   font-size: 0.85em;
   line-height: 1.75;
}

/* ════════════════════════════════════════════════════════
   CONTACT
════════════════════════════════════════════════════════ */
.contact-sec {
   background: var(--gray-dark);
   padding: 40px 36px;
   color: #fff;
}

.contact-inner {
   max-width: var(--max-w);
   margin: 0 auto;
}

.contact-sec .sec-title h2 {
   color: #fff;
}

.contact-sec .sec-en {
   color: #fff;
}

.contact-sec .sec-divider {
   background: rgba(255, 255, 255, .25);
}

.contact-cards {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
   margin: 44px auto 60px;
}

.contact-card {
   border: 1px solid #fff;
   padding: 30px 50px;
   display: flex;
   align-items: center;
   gap: 50px;
   transition: border-color .25s;
   border-radius: 10px;
   justify-content: center;
}

.contact-card:hover {
   border-color: rgba(255, 255, 255, .65);
}

.cc-icon {
   flex-shrink: 0;
   stroke: rgba(255, 255, 255, .8);
   fill: none;
   stroke-width: 1.3;
}

.cc-body {
   flex: 1;
}

.cc-label {
   font-size: 1.5em;
   color: #fff;
   letter-spacing: .06em;
   padding-bottom: 12px;
   border-bottom: 3px dotted #fff;
   margin-bottom: 12px;
   font-weight: 500;
   line-height: 1;
   padding-top: 5px;
}

.cc-value {
   font-size: 3em;
   font-weight: 600;
   letter-spacing: .04em;
   line-height: 1;
   font-family: var(--font-en);
}

.cc-value.form {
   font-size: 2.0em;
   font-weight: bold;
   letter-spacing: 0;
   font-family: var(--font-en);
}

.contact-bottom {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
   align-items: start;
}

.c-logo {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 26px;
}

.c-addr {
   display: flex;
   flex-direction: column;
   gap: 30px;
   margin-top: 6em;
}

.addr-row {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   color: #fff;
   line-height: 1.75;
   font-size: 1.5em;
   font-weight: 600;
}

.addr-row.access-row {
   font-size: 1.2em;
}

.googlemap iframe {
   width: 100%;
   height: 350px;
   border-radius: 10px;
}

/* ════════════════════════════════════════════════════════
   FOOTER NAV
════════════════════════════════════════════════════════ */
.footer-nav {
   background: #e6e6e6;
   padding: 50px 36px;
}

.fn-inner {
   max-width: var(--max-w);
   margin: 0 auto;
   display: grid;
   grid-template-columns: 0.35fr 1px 1fr;
   gap: 48px;
}

.fn-sep {
   background: #000000;
}

.fn-col-head {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 1.25em;
   font-weight: 400;
   letter-spacing: .08em;
   margin-bottom: 18px;
}

.fn-en {
   font-weight: 600;
   font-size: 2.5em;
   line-height: 1em;
   font-family: var(--font-en);
}

.fn-en-links {
   font-family: var(--font-en);
}

.fn-links {
   list-style: none;
   display: flex;
   gap: 20px;
}

.fn-links li {
   border-bottom: 1px solid #fff;
}

.fn-links li:first-child {
   /*border-top: 1px solid #d5d5d5;*/
}

.fn-links a {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 9px 2px;
   font-size: 1.2em;
   color: var(--text-light);
   letter-spacing: .04em;
   font-weight: 500;
}

.fn-links a::after {
   content: '▼';
   font-size: 0.7em;
   color: var(--text-light);
   margin-left: 3px;
}

/* ════════════════════════════════════════════════════════
   Studio page
════════════════════════════════════════════════════════ */
.hero-studio {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}
.background-a-studio {
   background-image: url('../img/Astudio/Astudio_hero.jpg');
}
.background-b-studio {
   background-image: url('../img/Bstudio/Bstudio_hero.jpg');
}
.background-sub {
   background-image: url('../img/sub_hero.jpg');
}

.studio-photo-item {
   max-width: var(--max-w);
   gap: 50px;
   display: flex;
   margin: 50px auto;
}

.studio-photo-item>* {
   width: 50%;
}

.studio-photo-item dd img {
   border-radius: 15px;
}

.studio-photo-item dt .point {
   text-align: center;
   font-weight: 600;
   font-family: var(--font-en);
}

.studio-photo-item dt .point span {
   display: block;
   line-height: 1;
   font-size: 1.2em;
}

.studio-photo-item dt .studio-photo-cap {
   text-align: center;
   font-weight: 700;
   font-size: 2.5em;
   line-height: 1.3em;
   margin: 15px 0 40px 0;
   background-color: #fff;
   position: relative;
   z-index: 15;
}

.studio-photo-item dt .point span.num {
   font-size: 6em;
   line-height: 1em;
   font-weight: 700;
   /*font-family: var(--font-en2);*/
   color: #484848ba;
   position: relative;
}

.studio-photo-item dt .point span.num:after {
   content: "";
   border-top: 1px solid #f2f2f2;
   background-color: #fff;
   height: 30px;
   z-index: 5;
   position: absolute;
   left: 0;
   bottom: -16px;
   width: 100%;
}

.studio-photo-item dt .point span.num:before {
   /*content: "";*/
   background-color: #cee3e5;
   width: 1.6em;
   height: 20px;
   left: calc(50% - 0.8em);
   position: absolute;
   display: block;
   bottom: 4px;
   filter: blur(10px);
   z-index: 1;
   border-radius: 150%;
}

.studio-photo-desc {
   font-size: 1.35em;
   line-height: 2.1;
}

.studio-detail {
   padding: 100px 0;
   margin-top: 100px;
   background-color: var(--bg-light);
}

.studio-detail-inner {
   max-width: var(--max-w);
   margin: 0 auto;
}

.studio-detail-drawing-img {
   display: flex;
   flex-wrap: wrap;
   /*gap: 10px;*/
   /*margin: 30px auto;*/
}

.studio-detail-drawing-img img {
   border-radius: 15px;
}

.studio-detail-drawing-img p {
   width: 33.333%;
   box-sizing: border-box;
   margin-bottom: 50px;
}


/*Studio detail*/
.studio-detail-inner h2 {
   font-size: 3.5em;
   font-weight: 700;
   font-family: var(--font-en);
   position: relative;
   line-height: 1;
   margin-bottom: 0;
}

.studio-detail-inner h2 .big {
   font-size: 3.5em;
   line-height: 1em;
   vertical-align: baseline;
   position: relative;
   top: 21px;
   background-color: var(--bg-light);
   z-index: 2;
}

.studio-detail-inner h2 .base {
   position: relative;
   z-index: 2;
   background-color: var(--bg-light);
   top: 20px;
   padding-left: 15px;
   padding-right: 5px;
}

.studio-detail-inner h2::after {
   content: "";
   position: absolute;
   bottom: 7px;
   left: 0;
   width: 100%;
   height: 2px;
   background-color: #000;
}

.studio-detail-inner h2 .detail {
   position: absolute;
   right: 0;
   bottom: 0;
}

.studio-detail-title {
   font-size: 4em;
   font-family: var(--font-en);
   position: relative;
   margin-left: 33px;
   margin-bottom: 0.5em;
}

.studio-detail-title .studio-name {
   position: absolute;
   left: 0;
   width: 100%;
   text-align: center;
   font-size: 2.5rem;
   bottom: 10px;
}


.studio-detail-title .inner {
   position: relative;
   z-index: 2;
}

.studio-detail-title:before {
   content: "";
   position: absolute;
   left: -31px;
   top: 1px;
   width: 60px;
   height: 60px;
   background-color: #fff;
   border-radius: 150%;
   z-index: 1;
}

.studio-detail-row {
   margin-top: 6em;
}

.studio-detail-table {
   font-size: 1.05em;
   line-height: 1.8;
   border-spacing: 0;
}

.studio-detail-table table {
   width: 100%;
}

.studio-detail-table td,
.studio-detail-table th {
   border-bottom: 1px solid #cccccc;
   padding: 1.2em 0;
}

.studio-price-table {
   background: #fff;
   line-height: 1.8;
   border-spacing: 0;
   width: 100%;
}

.studio-price-table .yen {
   font-weight: bold;
   font-size: 1.25em;
   margin-right: 9px;
}

.studio-detail-table th {
   width: 9em;
   text-align: left;
   font-weight: 500;
   vertical-align: top;
   background: #f9f9f9;
}

.studio-price-table tr {
 border-bottom: dotted 1px #a3a3a3;
}

.studio-price-table tr:nth-child(odd) {
   background-color: #fff;

}

.studio-price-table th {
   text-align: left;
   font-weight: 500;
   padding: 1em 0em 1em 2em;
   width: 35%;
   box-sizing: border-box;
   border-right: dotted 1px #a3a3a3;
   border-bottom: dotted 1px #a3a3a3;
   background: #f9f9f9;
}

.studio-price-table td {
   padding: 1em 1em 1em 2em;
   border-bottom: dotted 1px #a3a3a3;
}

.studio-price-table td.nospace {
   padding: 5px 1em 5px 2em;
}

.studio-price-table dl {
   display: flex;
}

.studio-price-table dt {
   width: 8em;
   padding: 8px 0 5px;
   border-bottom: dotted 1px #a3a3a3;
}

.studio-price-table dl:last-child * {
   border-bottom: none;
}

.studio-price-table dd {
   border-bottom: dotted 1px #a3a3a3;
   padding: 5px 0;
   width: calc(100% - 6em);
}

.studio-price-table td.note {
   font-size: 1em;
   padding-left: 48px;
}
.studio-price-table td.note span {
	display: inline-block;
	padding-right: 10px;
}

@media (max-width: 768px) {
 .studio-detail-drawing-img p {
 	width: 100%;
 	margin-bottom: 20px;
 }
 .studio-photo-item {
	gap:0;
 }
}

.page-content {
 background-color: var(--bg-light);
 margin-top:0;
 padding: 10px 0 70px;
}


/* ════════════════════════════════════════════════════════
   gallery
════════════════════════════════════════════════════════ */
.gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* アイテム間の隙間 */
}

.gallery-item {
  /* PC: 4枚並び (100%から隙間3回分60pxを引いて4分割) */
  width: calc((100% - 60px) / 4);
  text-decoration: none; /* リンクの下線を消す */
}

/* カード全体のスタイル */
.item-card {
  background: #fff;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.item-card:hover {
  transform: translateY(-5px); /* ホバー時に少し浮き上がらせる */
}

/* --- 画像を正方形に統一する設定 --- */
.image-box {
  width: 100%;
  aspect-ratio: 1 / 1; /* 強制的に1:1の正方形にする */
  overflow: hidden;
  background-color: #f0f0f0;
}

.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 比率を保ったまま枠を埋める（トリミング） */
  display: block;
  transition: 0.3s;
}

.item-card:hover img {
  transform: scale(1.05); /* ホバー時に画像だけ少しズーム */
}

/* --- テキストエリア（常時表示） --- */
.caption-box {
  padding: 12px 10px;
  background: rgba(0, 0, 0, 0.7);
  text-align: center;
  min-height: 3em; /* 2行になっても高さがズレないように調整 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.caption-text {
  margin: 0;
  color: #fff; /* 文字色は読みやすい濃いグレー */
  font-size: 14px;
  line-height: 1.4;
}

/* --- GLightbox（拡大画面）のスタイル --- */
.glightbox-container .gdesc-inner {
  font-size: 16px;
  color: #fff;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
}

.glightbox-container .ginner-container .gcaption {
  background: rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
  .gallery-item {
    /* 隙間1回分10pxを引いて2分割 */
    width: calc((100% - 10px) / 2);
  }
  .gallery-container {
    gap: 20px 10px; /* 縦の隙間20px、横の隙間10px */
  }
}

/* ════════════════════════════════════════════════════════
   PRICE
════════════════════════════════════════════════════════ */
/* --- 共通設定 --- */
.price-table-wrapper {
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 15px;
  box-sizing: border-box;
  color: #333;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* ヘッダー画像 */
.studio-name {
  /*position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);*/
  font-size: clamp(18px, 4vw, 32px);
  font-weight: bold;
  white-space: nowrap;
  color: #fff;
  background: #191717;
}
.studio-name:nth-child(2) {
  border-left: 1px solid #fff;

} 

/* セル共通 */
.price-table th, .price-table td {
  border-bottom: 1px solid #e0e0e0;
  padding: 24px 15px;
  text-align: center;
  vertical-align: middle;
}
.price-table td {
  background: #fff;
  border-left: 1px solid #e0e0e0;
}
/* 左側のラベル列 */
.price-table th.label {
  background-color: #f9f9f9;
  width: 25%;
  text-align: left;
  font-weight: 500;
}
.price-table th.label small {
  font-size: 11px;
  font-weight: normal;
  display: block;
  margin-top: 5px;
}

/* 金額 */
.price-val {
  font-size: 1.35em;
  font-weight: bold;
}
.price-val span {
  font-size: 18px;
  margin-left: 5px;
  font-weight: normal;
}

/* キャンセル料 */
.cancel-grid {
  /*display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 40px;*/
  text-align: left;
  max-width: 200px;
  margin: 0 auto;
}
.cancel-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px dotted #ccc;
}
.cancel-item strong { font-size: 22px; }
.cancel-item strong small { font-size: 14px; }

/* 備考 */
.notes-cell { text-align: left !important; }
.notes-list {
  padding: 0;
  margin: 0;
  margin-left: 40px;
  line-height: 1.8;
}

@media screen and (max-width: 768px) {
  .price-table, .price-table thead, .price-table tbody, .price-table tr, .price-table th, .price-table td {
    display: block;
    width: 100% !important;
  }

  .price-table thead tr {
    display: flex; /* 画像だけは横に並べる */
  }

  .price-table .empty-cell,
  .price-table .studio-name {
    display: none;
  }
  .price-table th.label {
    padding: 12px;
    font-size: 16px;
    border-bottom: none;
  }

  .price-table td {
    position: relative;
    /*padding-top: 45px;*/ /* data-labelを表示するスペース */
    border-top: none;
    border-left:none;
  }

  /* セル上部に A Studio / B Studio を表示 */
  .price-table td::before {
    content: attr(data-label);
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    font-size: 12px;
    color: #999;
    font-weight: bold;
    text-transform: uppercase;
  }

  .cancel-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .notes-list {
    margin-left: 24px;
   }
  
}

/* ════════════════════════════════════════════════════════
   faq
════════════════════════════════════════════════════════ */
.faq-container {
  max-width: 1000px;
  margin: 0 auto;
  /*padding: 0 20px;*/
  font-family: sans-serif;
}

.faq-title {
  text-align: center;
  margin-bottom: 40px;
  font-size: 28px;
  color: #333;
}

.faq-item {
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}

/* 質問部分 */
.faq-question {
  list-style: none; /* デフォルトの矢印を消す */
  cursor: pointer;
  padding: 15px 40px 15px 15px;
  position: relative;
  font-weight: bold;
  font-size: 16px;
  transition: background 0.3s;
  background: #f9f9f9;
}

.faq-question:hover {
  background: #f9f9f9;
}

/* 質問の頭に Q をつける（デザインアクセント） */
.faq-question::before {
  content: "Q.";
  color: #4a4543; /* スタジオのテーマカラー */
  margin-right: 10px;
  font-size: 18px;
}

/* 開閉用のプラス・マイナスアイコン */
.faq-question::after {
  content: "+";
  position: absolute;
  right: 15px;
  font-size: 20px;
  color: #888;
}

/* オープン時のアイコン変更 */
.faq-item[open] .faq-question::after {
  content: "-";
}

/* 回答部分 */
.faq-answer {
  padding: 15px 20px 25px 45px;
  line-height: 1.8;
  background: #fcfcfc;
  animation: fadeIn 0.4s ease;
}

/* ※印などの注釈リスト */
.faq-notes {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.faq-notes li::before {
  content: "※ ";
}
@media (max-width: 768px) {
 .faq-answer {
   padding: 15px 20px 25px 15px;
  }
}

/* ════════════════════════════════════════════════════════
   access
════════════════════════════════════════════════════════ */
.access-container {
  max-width: 1000px;
  margin: 60px auto;
  padding: 0 20px;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

.section-title {
  text-align: center;
  font-size: 32px;
  letter-spacing: 0.1em;
  margin-bottom: 40px;
}

.map-wrapper {
  margin-bottom: 40px;
  filter: grayscale(20%); /* 少し彩度を落とすとオシャレに見えます */
  border: 1px solid #eee;
}

.access-details {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.address-box {
  text-align: center;
  padding: 30px;
  background: #f8f8f8;
}

.address-text {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 15px;
}

/* 住所コピーボタン */
.copy-btn {
  background: #333;
  color: #fff;
  border: none;
  padding: 8px 20px;
  cursor: pointer;
  font-size: 13px;
  transition: 0.3s;
}
.copy-btn:hover { background: #666; }

.route-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.route-item {
  border-left: 3px solid #333;
  padding-left: 20px;
}

.route-icon {
  font-size: 11px;
  font-weight: bold;
  color: #999;
  margin-bottom: 5px;
}

.route-item h4 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.route-item p {
  font-size: 15px;
  line-height: 1.6;
}

.note {
  font-size: 13px !important;
  color: #666 !important;
  margin-top: 10px;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .route-grid {
    grid-template-columns: 1fr;
  }
  .map-wrapper iframe {
    height: 300px;
  }
}

/* ════════════════════════════════════════════════════════
   FOOTER BOTTOM BAR
════════════════════════════════════════════════════════ */
#footer_section {
   color: #fff;
   /*padding: 40px 0;*/
   background: #00757F;
   font-size: 0.95em;
   line-height: 1.5;
}

#footer_section p {
   line-height: 30px;
}

#footer_section #logo_w {
   width: 280px;
}

.small,
small {
   font-size: 80%;
   font-weight: 400;
}

.text-center {
   text-align: center !important;
}

.col-lg-3,
.col-lg-12,
.col-lg-4 {
   position: relative;
   width: 100%;
   padding-right: 15px;
   padding-left: 15px;
}

@media (min-width: 992px) {
   .col-lg-4 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 33.33333%;
      flex: 0 0 33.33333%;
      max-width: 33.33333%;
   }

   .col-lg-3 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 25%;
      flex: 0 0 25%;
      max-width: 25%
   }

   .col-lg-12 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;
   }
}

#footer_section #logo_w {
   width: 280px;
   /*margin-top:24px;*/
}

#footer_section a {
   color: #fff;
}

.footer__link {
   /*margin-top: 20px;*/
   /*background: #1f919b;*/
   text-align: center;
}

.footer__link p {
   margin: 0;
   padding: 10px 0;
}

.footer__link a {
   font-size: 1em;
   line-height: 16px;
   display: inline-block;
   padding: 0px 12px;
   border-right: 1px solid #fff;
}

.footer__link a:last-child {
   border: 0
}

.container {
   width: 100%;
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

@media (min-width: 576px) {
   .container {
      max-width: 540px;
   }
}

@media (min-width: 768px) {
   .container {
      max-width: 720px;
   }
}

@media (min-width: 992px) {
   .container {
      max-width: 960px;
   }

   .col-lg-4 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 33.33333%;
      flex: 0 0 33.33333%;
      max-width: 33.33333%;
   }
}

@media (min-width: 1200px) {
   .container {
      max-width: 1140px;
   }
}

.footer-copy {
   background: #000;
   padding: 10px 10px 20px 10px;
   color: #fff;
   font-size: 0.8em;
   line-height: 1.5;
}

footer h1 {
   margin: 0;
   font-size: 0.9em;
   font-weight: 400;
   text-align: center;
   line-height: 1.2;
}

/* ════════════════════════════════════════════════════════
   SCROLL ANIMATION（jQuery で .is-visible を付与）
════════════════════════════════════════════════════════ */
.js-fade {
   opacity: 0;
   transform: translateY(28px);
   transition: opacity .65s ease, transform .65s ease;
}

.js-fade.is-visible {
   opacity: 1;
   transform: translateY(0);
}

/* 少し遅らせるバリアント */
.js-fade.delay-1,
.delay-1 {
   transition-delay: .1s !important;
}

.delay-2,
.js-fade.delay-2 {
   transition-delay: .2s !important;
}

.delay-3,
.js-fade.delay-3 {
   transition-delay: .3s !important;
}

.delay-4,
.js-fade.delay-4 {
   transition-delay: .4s !important;
}

.delay-5,
.js-fade.delay-5 {
   transition-delay: .5s !important;
}

/* 横からスライド */
.js-slide-left {
   opacity: 0;
   transform: translateX(-36px);
   transition: opacity .65s ease, transform .65s ease;
}

.js-slide-right {
   opacity: 0;
   transform: translateX(36px);
   transition: opacity .65s ease, transform .65s ease;
}

.js-slide-left.is-visible,
.js-slide-right.is-visible {
   opacity: 1;
   transform: translateX(0);
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (1270px)
════════════════════════════════════════════════════════ */
@media (max-width: 1270px) {
   .logo img {
      width: 215px;
   }

   .logo {
      padding-bottom: 35px;
   }

   .hd-nav {
      bottom: 3px;
   }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (768px – 1023px)
════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
   .hd-nav {
      gap: 20px;
      right: 250px;
   }

   .hd-nav a {
      font-size: 1.7vw;
   }

   .hd-phone-num {
      font-size: 1.1em;
   }

   .studio-layout {
      gap: 40px;
   }

   .photo-grid {
      gap: 16px;
   }

   .studio-detail-title .studio-name {
      display: block;
      position: static;
      line-height: 1.2em;
      font-size: 2rem;
   }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (~767px)
════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

   /* ── ヘッダー ── */
   header {
      height: var(--hd-h-sp);
      padding-top: 0;
   }

   .hd-inner {
      padding: 0 16px;
      text-align: center;
      justify-content: center;
   }

   .logo {
      margin: 0 auto;
      padding-bottom: 0;
   }

   .logo img {
      width: 160px;
   }

   .logo-big {
      font-size: 1.125em;
   }

   .logo-svg {
      width: 32px;
      height: 32px;
   }

   /* PC ナビ・連絡先を非表示 → ハンバーガーへ */
   .hd-nav {
      display: none;
   }

   .hd-right {
      display: none;
   }

   .hd-hamburger {
      display: flex;
   }

   .sp-nav {
      display: flex;
   }

   /* ── ヒーロー ── */
   .hero {
      margin-top: var(--hd-h-sp);
      height: calc(100vh - var(--hd-h-sp));
   }
   .hero2 {
      margin-top: var(--hd-h-sp);
   }

   .hero-body {
      padding: 0 20px 40px;
   }

   .hero-main-text {
      font-size: 6.8vw;
      line-height: 1.6;
   }

   br.sm_br {
      display: block;
   }

   br.pc_br {
      display: none;
   }

   .hero-sub-text {
      font-size: 7.8vw;
      margin-bottom: 20px;
   }

   .hero-video-btn {
      font-size: 0.875em;
   }

   .about-headline h2 {
      font-size: 7vw;
   }

   .about-headline .letter0 {
      letter-spacing: -0.7vw;
   }

   /* ── About ── */
   .about {
      padding: 32px 20px 0px;
   }

   .about-copy,
   .studio-photo-desc {
      font-size: 1.15em;
      margin-bottom: 20px;
      text-align: left;
   }

   .about-sub {
      flex-direction: column;
      gap: 8px;
      text-align: center;
      font-size: 5vw;
   }

   /* ── Photo Grid ── */
   .photo-grid {
      grid-template-columns: 1fr;
      padding: 0 20px;
      margin-top: 32px;
      gap: 28px;
   }

   /* ── Studio ── */
   .studio-sec {
      padding: 52px 0;
   }

   #a-studio.studio-sec {
      margin-top: 50px;
   }

   .studio-catch-head {
   		font-size: 1.2em;
   		text-align: left;
   }

   .sec-space {
      padding: 0 15px
   }
   .studio-layout {
      padding: 0;
      max-width: 100%;
   }

   .studio-img {
      position: static;
      width: auto;
   }

   .studio-img img {
      border-radius: 0 !important;
   }

   .studio-info {
      padding-left: 0;
   }

   .studio-ttl {
      margin: 0 20px 40px 20px;
      width: auto;
      padding: 0;
   }

   .studio-info-inner {
      padding: 20px;
   }

   .studio-info-detail,
   #b-studio .studio-info-detail {
      background-color: transparent;
      padding: 0;
   }

   .more-link {
      font-size: 1.1em;
   }

   body .mode-pc {
      display: none;
   }

   body .mode-sp {
      display: block;
   }

   #b-studio .studio-info {
      width: auto;
   }

   #b-studio .studio-ttl:after,
   .studio-ttl:after {
      left: 0;
      width: 100%;
      right: auto;
   }

   .studio-sec.bg-gray .studio-img {
      order: -1;
   }

   .studio-letter {
      font-size: 22vw;
   }

   .studio-word {
      font-size: 7vw;
      top: 0vw;
   }

   .cam-icon {
      display: none;
   }

   /* ── Studio Page ── */
   .studio-detail-title {
      font-size: 2.5em;
   }

   .hero-main-text-inner:after {
      bottom: 1.6vw;
   }

   .hero-main-text-inner {
      padding: 0 6vw;
   }

   .studio-catch {
      text-align: left;
      font-size: 1.5em;
   }

   .studio-headline h2 {
      font-size: 8vw;
   }

   .studio-photo-item dt .studio-photo-cap {
      font-size: 2em;
   }

   .studio-photo-item {
      flex-wrap: wrap;
      /*flex-direction: column-reverse;*/
   }

   .studio-photo-item dt,
   .studio-photo-item dd {
      width: 100%;
   }

   .studio-detail {
      padding: 60px 0;
      margin-top: 30px;
   }

   .studio-detail-row {
      margin-top: 3em;
   }

   .studio-detail-inner h2 {
      font-size: 8vw;
   }

   .studio-detail-inner h2::after {
      bottom: 0;
   }

   .studio-detail-inner h2 .detail {
      bottom: -1vw;
   }

   /* ── Steps ── */
   .steps-sec {
      padding: 52px 20px 52px;
   }

   .sec-title h2 {
      font-size: 1.65em;
   }

   .sec-en {
      font-size: 1em;
   }

   .step-item {
      gap: 10px;
      padding: 30px 24px;
      flex-wrap: wrap;
   }

   .step-item-left {
      width: 100%;
      box-sizing: border-box;
   }

   .step-item-right {
      width: 100%;
      box-sizing: border-box;
      padding-top: 30px;
      text-align: left;
   }
   .studio-spec {
      font-size: 0.83em;
   }

   .step-contact-row {
      gap: 0;
      text-align: center;
      margin-top: 15px;
   }

   .step-contact-row-box {
      width: 100%;
   }
   .open-date {
      margin-right: 10px;
   }

   .step-note {
      font-size: 0.85em;
   }

   /* ── Contact ── */
   .contact-sec {
      padding: 52px 0 0;
   }

   .contact-cards {
      grid-template-columns: 1fr;
      max-width: 100%;
      margin: 32px auto 40px;
      padding: 0 20px;
   }
   .contact-cards img {
     width: 40px
   }
   .cc-label {
      font-size: 1.2em;
   }
   .contact-bottom {
      grid-template-columns: 1fr;
      gap: 32px;
      overflow: hidden;
   }

   .googlemap iframe {
      border-radius: 0;
      line-height: 1em;
      vertical-align: baseline;
   }

   .googlemap {
      vertical-align: baseline;
      background-color: #e6e6e6;
   }

   .contact-card {
      padding: 20px;
      gap: 20px;
   }

   .c-logo {
      text-align: center;
      display: block;
   }

   .c-logo img {
      display: inline;
      width: 300px;
   }

   .c-addr {
      margin-top: 2em;
      padding: 0 20px;
      font-size: 0.8em;
   }

   /* ── Footer ── */
   .footer-nav {
      padding: 20px;
   }

   .fn-inner {
      grid-template-columns: 1fr;
      gap: 32px;
   }

   .fn-sep {
      display: none;
   }

   .footer-bar {
      padding: 14px 20px;
   }

   .fb-links {
      flex-direction: column;
      gap: 0;
   }

   .fb-link {
      padding: 4px 0;
      border-right: none;
      border-bottom: 1px solid rgba(255, 255, 255, .2);
      font-size: 0.688em;
   }

   .fb-link:last-child {
      border-bottom: none;
   }

   .fn-links {
      /*border-top: 2px solid #fff;*/
      display: block;
   }

   .fn-links li {
      border-bottom: 1px solid #fff;
   }

   .fn-links a {
      display: block;
      font-size: 1em;
   }
   .footer__link {
     text-align: left;
     font-size: 0.9em;
   }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — Very small (~600px)
════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

   .studio-price-table th,
   .studio-price-table td,
   .studio-detail-table th,
   .studio-detail-table td {
      display: block;
      width: 100%;
      box-sizing: border-box;
      padding: 1em;
      border: none;
   }

   .studio-price-table td,
   .studio-detail-table td {
      padding-bottom: 2em;
   }

   .studio-price-table tr:nth-child(odd) {
      background-color: transparent;
   }

   .studio-price-table th,
   .studio-detail-table th {
      font-weight: bold;
      /*background-color: #ffffff;*/
   }

   .studio-price-table td.note {
      background-color: #ffffff;
   }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — Very small (~480px)
════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
   .cc-value {
      font-size: 5vw;
   }

   .cc-value.form {
      font-size: 5vw;
   }

   .fn-en {
      font-size: 10vw;
   }
}