.concept-section {
  padding: 80px 20px;
  background-color: #fff;
  background-image: url('../images/top/bg_blue.webp');
  background-size: cover;
  background-position: center;
}

.concept-container {
  display: block; /* 全体をクリック可能にする */
  text-decoration: none; /* 下線を消す */
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  overflow: visible; /* カードがはみ出るのを許容 */
}

/* 共通設定 */
.concept-item {
  margin-bottom: 120px; /* ブロック間の余白 */
}

.concept-container {
  position: relative; /* カードの配置基準 */
  max-width: 1000px;
  margin: 0 auto;
}

/* メイン画像（共通） */
.main-visual {
  width: 55%;
}

.main-visual img {
  width: 100%;
  display: block;
}

/* -------------------------------------------
   コンセプトカード txtBox（共通：中央配置設定）
------------------------------------------- */

.concept-container .txtBox {
	width: 50%;
	position: absolute;
  top: 50%;
  transform: translateY(-50%);
	background-image: url(../images/top/bg_text.webp);
  background-size: cover;
  background-position: center;
	z-index: 1;
	background-color: #2e2624;
	padding: 4%;
	box-shadow: 0px 0px 0px #c79f62;
	transition: 0.5s;
  color: #fff;
  z-index: 2;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  right: 0;
  justify-content: center;
}
.concept-container .txtBox:hover {
	box-shadow: 0px 5px 25px #c79f62;
	transform: translateY(-52%);
	text-decoration: none;
}
.concept-container .txtBox div {
	transition: 0.5s;
	transform: translateX(0px);
	filter: brightness(100%) drop-shadow(0px 0px 0px rgba(255, 255, 255, 0.6));
}
.concept-container .txtBox:hover div {
	
	filter: brightness(300%) drop-shadow(0px 2px 2px rgba(255, 255, 255, 0.6));
	transform: translateX(30px);
}

.concept-container .txtBox dl,
.concept-container .txtBox .btnBox{
	width: 90%;
	max-width: 380px;
	margin: 0 auto;
}
.concept-container .txtBox dl {
	transition-duration: 0.5s;
	transition-delay: 0.5s;
	transition-timing-function: ease-out;
}
.concept-container .txtBox dt {
  color: #c79f62;
  font-family: serif;
  font-size: 24px;
  letter-spacing: 0.2em;
  margin-bottom: 10px;
  text-align: center;
  border-bottom: #c79f62 solid 1px;
}
.concept-container .txtBox dd {
	color: #fff;
	font-size: 20px;
	padding: 1em 0;
}
.concept-container .txtBox dd > div {
	margin-top: 30px;
}


/* -------------------------------------------
   マウスオン（ホバー）時に「浮かせる」設定
------------------------------------------- */
.concept-container .concept-card:hover {
  box-shadow: 0px 5px 25px #c79f62;
    transform: translateY(-52%);
    text-decoration: none;
}


/* テキストのスタイリング */
.title {
  font-family: serif;
  font-size: 24px;
  letter-spacing: 0.2em;
  margin-bottom: 10px;
  text-align: center;
}

.line {
  border: none;
  border-top: 1px solid #fff;
  width: 80%;
  margin: 0 auto 20px;
}

.catchphrase {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}

.sub-text {
  font-size: 14px;
  text-align: center;
  opacity: 0.8;
}


/* -------------------------------------------
   通常パターン（左写真・右中央カード）
------------------------------------------- */
.concept-card {
  right: 0;
  /* border-radius: 140px 0 0 140px; */
  justify-content: center;
  /* padding-right: 40px; */
}

.concept-container:hover .concept-card {
  /* 中央配置の-50%に、浮き上がりの-15pxを加算 */
  transform: translateY(calc(-50% - 15px));
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* -------------------------------------------
   反転パターン（右写真・左中央カード）
------------------------------------------- */
.is-reverse .main-visual {
  margin-left: auto;
  margin-right: 0;
}

.is-reverse .concept-container .txtBox {
  right: auto;
  left: 0;
  /* border-radius: 0 140px 140px 0; */
  justify-content: center;
  /* padding-right: 0;
  padding-left: 60px; */
}

.is-reverse .card-content {
  text-align: center;
}

.is-reverse .line {
  margin: 0 auto 20px;
}

@media screen and (max-width: 768px) {
  .concept-container {
    padding: 0 15px;
  }
  
  .main-visual {
    width: 100%; /* 写真を全幅に */
  }

  
}

@media screen and (max-width: 810px) {

  /* 写真の下に少し被せる（既存を活かしつつ安定化） */
  .concept-container .main-visual{
    position: relative;
  }
  .concept-container .txtBox,
  .concept-item.is-reverse .concept-container .txtBox{
    position: relative;
    width: 95%;
    height: auto;

    /* 写真の下部に少しだけ被せる */
    margin: -20px auto;   /* ここで被せ量を調整（例：-30px 〜 -70px） */

    top: auto;                /* PC用の top:50% を無効化 */
    right: 0;
    left: auto;

    /* PC用 transform を無効化して、スマホ配置を確定させる */
    transform: none;

    padding: 16px 20px;
  }

  /* 反転パターンも同じ右寄せで被せるなら（あなたの方針に合わせて） */
  .concept-item.is-reverse .concept-container .txtBox{
    margin: -20px auto;
  }

  /* ===== スマホ時のホバー挙動 =====
     ・左右に動かさない
     ・その場で少しだけ浮かせる
     ・shadowは現状のまま（変更しない）
  */
  .concept-container .txtBox:hover{
    /* その場で少し浮く（8pxくらいがおすすめ） */
    transform: translateY(-8px);
    /* box-shadow は既存（0px 5px 25px #c79f62;）をそのまま使うので書かない */
  }

  /* 中身の横移動をスマホでは止める */
  .concept-container .txtBox div,
  .concept-container .txtBox:hover div{
    transform: none;
  }
  .concept-container .txtBox dd {
    padding: 0;
  }
  .concept-container .txtBox dd > div {
    margin-top: 0;
  }
}





.mv{
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 1;

  /* 背景グラデーション（そのまま） */
  background: linear-gradient(
    180deg,
    rgba(0,150,223,1) 0%,
    rgba(19,68,179,1) 100%
  );

  /* Canvasの合成をmv内に閉じる */
  isolation: isolate;
}

/* 建物 */
.mv__base{
  position: relative;
  z-index: 2;
}
.mv__base img{
  width: 100%;
  height: auto;
  display: block;
}

/* 光（Canvas） */
.mv__beamCanvas{
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* 月（画面右上固定） */
.mv__moon{
  position: absolute;
  top: 6%;
  right: 0;
  width: min(18vw, 320px);
  z-index: 20;
  height: auto;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* タイトル（固定配置：例として左下寄せ） */
.mv__title{
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 8%;
  transform: translate(-50%, 6px);
  width: min(40vw, 420px);
  height: auto;
  pointer-events: none;
}

/* 初期は隠す */
.mv__moon,
.mv__title{
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
  will-change: opacity, transform;
}
/* 光（Canvas）は最初は非表示 */
.mv__beamCanvas{
  opacity: 0;
  transition: opacity .6s ease;
  will-change: opacity;
}

/* 光が出る */
.mv.is-beam-show .mv__beamCanvas{
  opacity: 1;
}

/* 表示時 */
.mv.is-ui-show .mv__title{
  opacity: 1;
  transform: translate(-50%, 0);  /* ← Xは維持 */
}

.mv.is-ui-show .mv__moon{
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 810px) {
    .mv__title{
    width: min(80vw, 360px);
  }
}