/*
Template: arkhe
Theme Name: yokagula
*/

@import url('https://fonts.googleapis.com/css2?family=Klee+One&family=Zen+Kaku+Gothic+New&family=Zen+Old+Mincho&display=swap');

.bel-single__title, .bel-archive__page-title {
  font-family: "Klee One", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 240%;
  font-size-adjust: 0.6;
}

body {
  font-family: "Klee One", cursive;
  font-weight: 400;
  font-style: normal;
}

.legend {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.bel-single__header, .bel-archive__header {
	text-align: center;
	padding-bottom: 3vw;
	color: #531B72;
}
.bel-single__date {
	font-family: "Zen Old Mincho", serif;
	font-size: 140%;
}
h1,h2,h3,h4 {
  font-family: "Klee One", cursive;
  font-weight: 400;
  font-style: normal;
}

.map-container {
  width: 600px; /* マップの幅（正方形にする） */
  height: 600px; /* マップの高さ（幅と同じにする） */
  border-radius: 0.6% 60% 10% 50%/ 0.6% 70% 0% 80%; /* ここで変形する */
  overflow: hidden !important; /* はみ出した部分を隠す */
  border: 0; /* オプション：枠線をつける */
  box-shadow: 0 0 10px rgba(0,0,0,0.2); /* オプション：影をつける */
}

.map-container iframe {
  width: 100%;
  height: 100%;
}


/* Container自体への指定 */
.my-video-container {
  position: relative;
  overflow: hidden;
  /* 2つの円で切り抜く（Container全体を切り抜く場合） */
  -webkit-mask-image: 
    radial-gradient(circle 100px at 20% 18%, black 100%, transparent 100%),
    radial-gradient(circle 160px at 80% 76%, black 100%, transparent 100%),
    radial-gradient(circle 260px at 32% 50%, black 100%, transparent 100%),
    radial-gradient(circle 380px at 60% 30%, black 100%, transparent 100%),
    radial-gradient(circle 280px at 50% 60%, black 100%, transparent 100%);
  mask-image: 
    radial-gradient(circle 100px at 20% 18%, black 100%, transparent 100%),
    radial-gradient(circle 160px at 80% 76%, black 100%, transparent 100%),
    radial-gradient(circle 260px at 32% 50%, black 100%, transparent 100%),
    radial-gradient(circle 380px at 60% 30%, black 100%, transparent 100%),
    radial-gradient(circle 280px at 50% 60%, black 100%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* Spectraが生成する背景動画要素を微調整したい場合 */
.my-video-container video {
  object-fit: cover !important; /* 動画がContainerを覆うように強制 */
}

/* スマホ時（画面幅767px以下）はオーバーレイしない */
@media screen and (max-width: 767px) {
  .l-header {
    background-color: rgba(255,255,255,1); !important; /* 強制的に非表示にする */
  }
}