@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;900&display=swap');

body{
  margin:0;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* ---- header ---- */
.header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  padding:20px 40px;
  box-sizing:border-box;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:10;
  text-shadow: 0 1px 8px rgba(0,0,0,.15); 
}
/*BMJの文字*/
.logo{
  font-family: "Playfair Display", serif;
  font-size: 62px;            /* 大きく */
  font-weight: 900;           /* 太く */
  letter-spacing: 1.5px;      /* 少し広げる */
  color:#333;                 /* グレー */
  line-height:1;
}

.logo span{
  display:block;
  font-family: Arial, sans-serif;
  font-size:14px;
  font-weight:400;
  letter-spacing:2.5px;
  color:#555;      /* 薄いグレー */
  margin-top:4px;
}

.nav ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  gap:30px;
}

.nav a{
  text-decoration:none;
  color:#333;
  font-size:14px;
}

/* ---- hero ---- */
.hero{
  position:relative;
  width:100%;
  height:70vh;
  overflow:hidden;
  background:#000;
}

.hero__slides{
  list-style:none;
  margin:0;
  padding:0;
  position:absolute;
  inset:0;
}

.hero__slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1s ease-in-out;
}

.hero__slide.is-active{
  opacity:1;
}

.hero__img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---- other ---- */
.content{
  max-width:1100px;
  margin:60px auto;
  padding:0 20px;
}
/* コンセプト 横並び */
.concept{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
}

/* 左の文章 */
.concept_text{
  flex:1;
  min-width:280px;
}

/* 右の写真2枚 */
.concept_ph{
  flex:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.concept_ph img{
  width:100%;
  height:auto;
  object-fit:cover;
}


/* ヘッダー文字の読みやすさ少しUP */
.header{ text-shadow: 0 2px 10px rgba(0,0,0,.2); }

/* ナビのリンクも薄い縁取りで視認性UP（必要なければ削除OK） */
.nav a{ text-shadow: 0 1px 6px rgba(0,0,0,.15); }

img{ display:block; }

/* Business ３つ並べる・隙間均等 */
#business_inner{
  display:grid;
  grid-template-columns: repeat(3, 1fr); /* PC：3列 */
  gap:30px; /* ← 隙間 */
}

/* カード内の画像 */
#business_inner img{
  width:100%;
  display:block;
  object-fit:cover;
}

/* ===== Works grid (PC: 3列4段 / SP: 1列) ===== */
#works ul{
  margin:0;
  padding:0;
  list-style:none;

  display:grid;
  grid-template-columns: repeat(3, 1fr); /* PC 3列 */
  gap:30px;
}

/* 高さ揃えて綺麗にする */
#works li img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  aspect-ratio: 4 / 3; /* ← Businessと同じにした */
}


/* ----- Works hover effect ----- */
#works li{
  overflow:hidden; /* 画像がはみ出さないように */
}

#works li img{
  transition: transform .45s ease, opacity .45s ease;
}

#works li:hover img{
  transform: scale(1.03); /* ←ほんの少し拡大（3%） */
  opacity: .92;           /* ←少しだけ柔らかく */
}


.contact_form{
  max-width:600px;
  margin:40px auto 0 0; /* 左寄せ（右auto） */
  text-align:left;
}

.contact_form input,
.contact_form textarea{
  padding:12px 14px;
  border:1px solid #ddd;
  border-radius:8px;
  font-size:14px;
  box-sizing:border-box;
}
.contact_form textarea{ resize:vertical; min-height:160px; }
.contact_form button{
  appearance:none;
  border:0;
  padding:12px 20px;
  border-radius:999px;
  background:#333;
  color:#fff;
  font-size:14px;
  letter-spacing:.2px;
  cursor:pointer;
  transition:opacity .25s ease, transform .05s ease;
}
.contact_form button:hover{ opacity:.9; }
.contact_form button:active{ transform:translateY(1px); }

.hero__slide{ will-change: opacity; }

@media (max-width:768px){
  .content{ margin:40px auto; padding:0 16px; }
  #works ul{ gap:18px; }
  #business_inner{ gap:20px; }
}



/* ===== Stylish Map Card ===== */
.map_card{
  --r: 18px;                 /* 角丸 */
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --ring: rgba(0,0,0,.08);   /* 外枠のニュアンス */
  position: relative;
  isolation: isolate;
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* 外周にうっすらリング（1px） */
.map_card::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(255,255,255,.25), transparent 60%) /* 上品な光沢 */,
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.06)) border-box;
  border:1px solid transparent;         /* 擬似的な微リング */
  pointer-events:none;
}

/* 16:9（PC） / 4:3（SP）で比率固定 */
.map_card__frame{
  aspect-ratio: 16 / 9;
  background: #f3f3f3;                  /* ローディング時の下地 */
  position: relative;
}
@media (max-width: 768px){
  .map_card__frame{ aspect-ratio: 4 / 3; }
}

.map_card iframe{
  position:absolute; inset:0;
  width:100%; height:100%; display:block;
  filter: grayscale(.06) contrast(1.04) saturate(1.05); /* ほんの少し品よく */
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .6s ease, opacity .4s ease;
  opacity: 0;                                               /* 後述JSでフェードイン */
}

/* ふわっと＆ほんの少しズーム */
.map_card:hover iframe{
  transform: scale(1.015);       /* 1.5%だけ。上品に */
  filter: grayscale(0) contrast(1.06) saturate(1.08);
}

/* CTAボタン */
.map_card__cta{
  position:absolute; right:14px; bottom:14px; z-index:2;
  display:inline-flex; align-items:center; gap:.5em;
  padding:10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  color:#222; text-decoration:none; font-size:13px; letter-spacing:.2px;
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.map_card__cta:hover{
  transform: translateY(-1px);
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.h2_jp{
  font-size:12px;      /* ←メールでの問い合わせ小さく調整 */
  font-weight:300;     /* ←細く寄せる */
  color:#333;
  letter-spacing:0.5px;
}

.h2_sub_en{
  font-size:12px;
  font-weight:300;
  color:#666;
  margin-top:4px;
  display:block;
}

/* Instagram セクション（ミニマル版） */
#Instagram{
  max-width:1200px;
  margin:100px auto;
  text-align:center;
  padding:0 20px;
}

/* 見出しだけ（ロゴ・下線・追尾リンクなし） */
.insta_heading{
  font-family:"Playfair Display", serif;
  font-weight:900;
  font-size:26px;
  color:#444;
  text-align:center;
  margin:0 0 28px;
}
.insta_heading a{
  color:inherit;
  text-decoration:none;
}
.insta_heading a:hover{ opacity:.7; }



/* スマホはボタン大きめに & 触りやすく */
@media (max-width: 768px){
  .map_card__cta{ right:10px; bottom:10px; padding:12px 16px; font-size:14px; }
}

/* アニメを控えたい人への配慮 */
@media (prefers-reduced-motion: reduce){
  .map_card iframe,
  .map_card:hover iframe,
  .map_card__cta,
  .map_card__cta:hover{
    transition: none !important;
    transform: none !important;
  }
}

@media(max-width:768px){
  .nav{
    display:none;
  }
}
@media(max-width:768px){
  .logo span{
    font-size:10px; /* ←ここ好みで調整できる */
    letter-spacing:2px;
  }
}


/* スマホは1列 */
@media(max-width:768px){
  #works ul{
    grid-template-columns:1fr;
  }
}


/* スマホは１列にする */
@media(max-width:768px){
  #business_inner{
    grid-template-columns:1fr; /* 1列 */
  }
}




/* スマホは縦並びにする */
@media(max-width:768px){
  .concept{
    flex-direction:column;
  }
}

@media (max-width: 1024px){
  .logo{ font-size: 54px; letter-spacing: 1.2px; }
  .nav ul{ gap: 22px; }
}

@media (max-width: 768px){
  .header{ padding: 16px 20px; }
  .logo{ font-size: 42px; }
  .nav a{ font-size: 13px; }
  .nav ul{ gap: 14px; flex-wrap: wrap; } /* 折り返して崩れ防止 */
}

@media (max-width: 560px){
  .logo{ font-size: 34px; }
  .nav a{ font-size: 12px; }
  .nav ul{ gap: 10px; }
}

/*スマホのレイアウト*/
@media screen and (max-width:900px){
  nav.g_navi{ display:none; }
  .main-visual{ height:100vh; }
}

	


	
h2{
  font-family: "Playfair Display", serif;
  font-weight:300;        /* ← もっと細い (900 → 300) */
  font-size:22px;         /* ← さらに少し小さく */
  letter-spacing:0.3px;
  color:#444;
  margin-bottom:24px;
}

	
/* 見出し直下がヘッダーに隠れないように */
section[id] { scroll-margin-top: 90px; } /* ヘッダー高に合わせて微調整 */

@media (max-width: 768px){
  h2{ font-size:20px; margin-bottom:18px; }
  .insta_heading{ font-size:22px; margin-bottom:22px; }
}

.hero + .content { margin-top: 80px; }
@media (max-width:768px){
  .hero + .content { margin-top: 50px; }
}