@charset "UTF-8";

#c2+div .inner_item_txt {
    border-radius: 30px;
    box-shadow: 5px 5px 39px rgba(76, 76, 76, .15);
    background: var(--i_sub3_color);
    padding: 30px 5% 30px;
}

#c2+div .inner_item {
    min-height: 300px;
    width: calc(50% - 50px);
}
#c2+div .inner_item_txt {
    background: transparent !important;
}

#c2+div .inner_item a:hover+.inner_item_txt{
    opacity: 0.7 ;
border-radius: 30px;
}

.composite_box01.block_images_7 .inner_item_img img {
    border-radius: 30px;
}

.block_news_1.add_design4 .content_wrapper .contents_btn01{
    padding: 30px 8px 30px;
}

/* ===== EVENT section ===== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@700&display=swap');

/* 1. Full-width sky background (soft) */
#hd + section {
  position: relative;
  isolation: isolate;
  background-image: none !important;
}

#hd + section::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, .15), rgba(0, 69, 168, .10)),
    url(/images/convert/10security-kitakyushucom/20261005144310.jpg/image.webp)
    top / cover no-repeat;
  filter: saturate(.85) brightness(1.05);
}

body { overflow-x: clip; }

/* 2. Curved area at the bottom of the section: white (#fff) */
#hd + section::before {
  background: #fff !important;
}

/* 3. Heading + cloud + EVENT text */
#hd + section .heading {
  position: relative;
}

#hd + section .heading > p {
  font-size: 2.4rem;
  font-weight: 700;
  margin-top: 0;
}

#hd + section .heading .h {
  --cw: clamp(170px, 20vw, 280px);
  --ch: calc(var(--cw) / 2.4);

  position: absolute;
  top: calc(var(--ch) * -1 - 10px);
  left: 0;
  z-index: 2;
  width: var(--cw);
  height: var(--ch);
  margin: 0;
  padding: calc(var(--ch) * .04) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: visible;

  background: url(/common/upload_data/10security-kitakyushucom/image/20261005123356.png) center / contain no-repeat;

  font-family: "Fredoka", "Arial Rounded MT Bold", "Hiragino Maru Gothic ProN", sans-serif;
  font-size: calc(var(--cw) * .155) !important;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1;
  color: #1e8cf0 !important;
  -webkit-text-stroke: calc(var(--cw) * .018) #fff;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 rgba(30, 140, 240, .25);
}

/* yellow strokes: 3 left + 3 right (added by JS) */
#hd + section .heading .h .rays {
  position: absolute;
  top: 50%;
  width: calc(var(--cw) * .11);
  height: calc(var(--cw) * .2);
  transform: translateY(-52%);
  pointer-events: none;
  -webkit-text-stroke: 0;
}
#hd + section .heading .h .rays.l { left: calc(var(--cw) * .05); }
#hd + section .heading .h .rays.r { right: calc(var(--cw) * .05); }

#hd + section .heading .h .rays i {
  position: absolute;
  display: block;
  width: calc(var(--cw) * .075);
  height: calc(var(--cw) * .022);
  min-height: 3px;
  background: #ffd93b;
  border-radius: 99px;
}
#hd + section .heading .h .rays i:nth-child(1) { top: 0; }
#hd + section .heading .h .rays i:nth-child(2) { top: 50%; margin-top: calc(var(--cw) * -.011); }
#hd + section .heading .h .rays i:nth-child(3) { bottom: 0; }

#hd + section .heading .h .rays.l i { left: 0; }
#hd + section .heading .h .rays.l i:nth-child(1) { transform: rotate(35deg); }
#hd + section .heading .h .rays.l i:nth-child(3) { transform: rotate(-35deg); }

#hd + section .heading .h .rays.r i { right: 0; }
#hd + section .heading .h .rays.r i:nth-child(1) { transform: rotate(-35deg); }
#hd + section .heading .h .rays.r i:nth-child(3) { transform: rotate(35deg); }

/* SP: smaller cloud, centred */
@media screen and (max-width: 900px) {
  #hd + section .heading .h {
    --cw: clamp(150px, 46vw, 220px);
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    transform: none !important;
  }
}

/* ===== Top section: full-width background image ===== */
#sw + section {
  background-size: cover !important;       /* image always fills the full width */
  background-position: 50% 100% !important; /* keep the bottom of the image anchored */
  background-repeat: no-repeat !important;
  width: 100% !important;
}

/* MV調整_20261014 */
#mv,
#mv .mv_mp4,
#mv .mv_mp4 video{
    height: auto;
    max-height: initial !important;
}
#mv_outer {
    padding-block: 0;
}
#mv .mv_textimg {
    left: 0;
    width: 100%;
}
#mv .mv_textimg > div {
    width: 35%;
    left: 2%;
    bottom: 2%;
}
#mv .mv_textimg img {
    width: 100%;
    max-width: initial;
}
@media only screen and (max-width: 768px) {
    #mv .mv_textimg > div {
        width: 45%;
    }
}
@media screen and (max-width: 650px) {
    #mv_outer {
        padding-bottom: 0;
    }
    #mv .mv_textimg {
        height: 100%;
    }
}
@media screen and (max-width: 125vh){
	#mv.mv_mp4_cover {
		height: auto !important;
		min-height: 0 !important;
	}
}