@charset "utf-8";

body { background:#fff;}

#fukubukuro { background-image: url("../img/craftmenu/2603/bg.webp");}

#fukubukuro .container {
  max-width:550px;
  background-color:#8c0108;
}

#fukubukuro .first-area {
  padding-top:0;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

main { padding-bottom:0;}

#fukubukuro .row1 { width:100%; padding:0; margin:0;}
#fukubukuro img { width:100%;}


#fukubukuro h2 { 
	text-align:left;
	font-size: 18px;
	padding: 0.5em 1em;
	background-color:#db8973;
	margin: 0px 5%;
	letter-spacing: 2px;
	font-family: "monopin-j", "Segoe UI", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", Roboto, "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
	font-weight: 400;
	display:inline-block;
	color:#fff;
	border-radius: 999px;
}

#fukubukuro.fuku2027 h2 { background-color:#ab882a;}

.parent {
	width: 100%;
	text-align: center;
}

#fukubukuro h3 {
	text-align:center;
	font-size: 14px;
	padding: 0.3em 1.5em;
	background-color:#db8973;
	margin: 0 5%;
	letter-spacing: 2px;
	font-family: "monopin-j", "Segoe UI", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", Roboto, "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
	font-weight: 400;
	display:inline-block;
	color:#fff;
	border-radius: 999px;
}

#fukubukuro.fuku2027 h3 { background-color:#ab882a;}

#fukubukuro h4 { 
	text-align:center;
	font-size: 32px;
	padding: 0.3em 8% 0.5em 8%;
	margin: 0;
	font-family: "monopin-j", "Segoe UI", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", Roboto, "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
	font-weight: 400;
	display:block;
	color:#333;
}
@media screen and (max-width:740px) {
	#fukubukuro h4 { font-size: 26px; padding: 0.2em 8% 0.5em 8%;}
}

#fukubukuro h5 { 
	text-align:center;
	font-size: 22px;
	padding: 10px 8% 50px 8%;
	margin: 0;
	font-family: "monopin-j", "Segoe UI", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", Roboto, "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
	font-weight: 400;
	display:block;
}

#fukubukuro.fuku2027 h5.ended {
	color:#ab882a;
	border-top: 1px solid #ab882a;
	border-bottom: 1px solid #ab882a;
	padding: 15px 0;
	margin: 20px 8% 20px 8%;
}

@media screen and (max-width:740px) {
	#fukubukuro h5 { font-size: 16px; padding: 10px 8% 30px 8%;}
}

#fukubukuro h6 { 
	text-align:center;
	font-size: 24px;
	padding: 50px 8% 20px 8%;
	margin: 0;
	letter-spacing: 2px;
	font-family: "monopin-j", "Segoe UI", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", Roboto, "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
	font-weight: 400;
	display:block;
}
@media screen and (max-width:740px) {
	#fukubukuro h6 { font-size: 20px;}
}

#fukubukuro .clear {
	clear:both;
}

#fukubukuro .youtube {
  width: 100%;
  margin:1em auto;
  aspect-ratio: 16 / 9;
}
#fukubukuro .youtube iframe {
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 741px) {
    #footer {
        margin-top: 0;
    }
}



.vstack{
  display: grid;
  gap: var(--gap);
}

/* 4:3固定の見た目 */
.v{
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  background: #000;
  border-radius: var(--radius);
}

/* figureの余白を消す */
.vitem{ margin: 0; }

/* 省電力・通信節約モード等で止まっても破綻しない */
.v::poster{
  object-fit: cover;
}


/* フレーム */
.vframe{
  width:100%;
  aspect-ratio: 4 / 3;
  overflow:hidden;
  border-radius:0; /* 角丸なし */
}

/* 上下を斜めにする（横方向の傾き） */
.vframe.skew{
  /*
    左上と右上をずらすことで
    上辺と下辺が平行な斜め形状になる
  */
  clip-path: polygon(
    0% 13%,     /* 左上 */
    100% 0%,   /* 右上 */
    100% 87%,  /* 右下 */
    0% 100%    /* 左下 */
  );
}

/* 動画 */
.vframe .v{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#000;
}