.elementor-3229 .elementor-element.elementor-element-9309d65{--display:flex;}/* Start custom CSS for html, class: .elementor-element-887457f */body{

  min-height:100vh;

  margin:0;

  background-image:
  url("背景画像をここに入れる");

  background-size:cover;

  background-position:center;

  background-repeat:no-repeat;

  background-attachment:fixed;
}




.image-wrap{

  position:relative;

  width:100%;

  max-width:1400px;

  margin:auto;
}

/* 下の画像 */
.bg-image{

  width:100%;

  display:block;
}

/* 上に重ねる画像 */
.front-image{

  position:absolute;

  top:0;

  left:0;

  width:100%;
}




.fortune-message-wrap{

  position:relative;

  display:inline-block;

  max-width:760px;

  margin-top:40px;
}

/* 白の透過レイヤー */
.fortune-message-layer{

  position:absolute;

  inset:0;

  background:
  rgba(255,255,255,0.18);

  border:
  1px solid rgba(255,255,255,0.28);

  border-radius:28px;

  backdrop-filter:
  blur(14px);

  box-shadow:
  0 0 30px rgba(255,255,255,0.08);

  z-index:1;
}

/* 文章 */
.fortune-message-text{

  position:relative;

  z-index:2;

  padding:
  42px 48px;

  color:#fffdf8;

  font-size:24px;

  line-height:2.2;

  letter-spacing:0.06em;

  font-family:
  "Yu Mincho",
  serif;
}



.fortune-hero {
  background-image:
    linear-gradient(rgba(8,15,40,0.35), rgba(8,15,40,0.35)),
    url("背景画像をここに入れる");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 80px 20px;
}

.form-layer {
  width: 100%;
  max-width: 520px;
  margin: 40px auto;
  padding: 36px 28px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 28px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
  box-sizing: border-box;
}

.form-layer h1 {
  text-align: center;
  color: #102a56;
  font-size: 30px;
  margin-bottom: 16px;
}

.title-line {
  height: 1px;
  background: linear-gradient(to right, transparent, #b8863b, transparent);
  margin-bottom: 28px;
}

.form-layer label {
  display: block;
  margin: 18px 0 8px;
  color: #102a56;
  font-weight: bold;
}

.form-layer input,
.form-layer select {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1px solid rgba(16,42,86,0.28);
  border-radius: 12px;
  background: rgba(255,255,255,0.95);
  font-size: 15px;
  box-sizing: border-box;
}

.form-layer button {
  width: 100%;
  height: 56px;
  margin-top: 28px;
  border: none;
  border-radius: 999px;
  background: #102a56;
  color: #fff;
  font-size: 17px;
  font-weight: bold;
}
.form-layer {

  background: #ffffff;
  background: none;
  border-radius: 15px;

}
/* ===================
   bg-image を全画面固定
=================== */

.bg-image{

  position:fixed;

  top:0;
  left:0;

  width:100vw;
  height:100vh;

  object-fit:cover;

  z-index:-1;

  pointer-events:none;
}

/* 少し暗くしたい場合 */

.bg-image{

  filter:
  brightness(0.65);
}








/* ===================
   パネル全体
=================== */

.panel-grid{

  width:100%;

  max-width:920px;

  margin:80px auto;

  display:grid;

  grid-template-columns:
  repeat(2, 1fr);

  gap:20px;

  padding:20px;
}

/* ===================
   パネル
=================== */

.panel{

  position:relative;

  min-height:120px;

  border-radius:38px;

  /* 強め透明感 */

  background:
  rgba(255,255,255,0.16);

  backdrop-filter:
  blur(18px);

  -webkit-backdrop-filter:
  blur(18px);

  /* 白の薄縁 */

  border:
  1px solid rgba(255,255,255,0.18);

  /* 柔らかい影 */

  box-shadow:
  0 10px 30px rgba(0,0,0,0.10);

  display:flex;

  align-items:center;

  justify-content:center;

  overflow:hidden;
}

/* ===================
   光レイヤー
=================== */

.panel::before{

  content:"";

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,0.12),
    rgba(255,255,255,0.01)
  );

  pointer-events:none;
}

/* ===================
   文字
=================== */

.panel span{

  position:relative;

  z-index:2;

  color:#ffffff;

  font-size:34px;

  font-weight:600;

  letter-spacing:0.12em;

  font-family:
  "Yu Mincho",
  serif;

  text-shadow:
  0 2px 10px rgba(0,0,0,0.18);
}

/* ===================
   動かない
=================== */

.panel:hover{

  transform:none;

  box-shadow:
  0 10px 30px rgba(0,0,0,0.10);
}

/* ===================
   スマホ
=================== */

@media(max-width:768px){

  .panel-grid{

    grid-template-columns:1fr;

    gap:16px;

    padding:14px;
  }

  .panel{

    min-height:160px;

    border-radius:28px;
  }

  .panel span{

    font-size:24px;
  }

}



/* ===================
   全体
=================== */

.image-wrap{

  position:absolute;

  top:20px;
  left:20px;

  display:flex;

  flex-direction:column;

  gap:20px;

  z-index:10;
}

/* ===================
   画像共通
=================== */

.top-image,
.bottom-image{

  width:320px;

  height:auto;

  display:block;

  border-radius:20px;

  box-shadow:
  0 10px 30px rgba(0,0,0,0.16);
}

/* ===================
   上画像
=================== */

.top-image{

  opacity:0.96;
}

/* ===================
   下画像
=================== */

.bottom-image{

  opacity:0.92;
}/* End custom CSS */