@charset "utf-8";
/* CSS Document */
a{
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
}
.jmk_body{
  position: relative;
}
.jmk_body::before{
  content: '';
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 100%;
  background-image: url(../img/il_bg.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  pointer-events: none;
}
.jmk_body>*,
header{position: relative; z-index: 1;}
.tss_footer {
  margin-top: 176px;
  background-color: #BDB4FF;
}

.jmk_secHeading{
  text-align: center;
  position: relative;
  z-index: 2;
}
.jmk_spbr{
  display: inline-block;
}

/* 画像スライダー */
.jmk_splide_slide{
  max-width: clamp(8.875rem, 1.441rem + 27.66vw, 30rem);/*142-480 430-1652*/
  border: 1px solid #FFFFFF;
} 


/* ページ上部 */
h1.jmk_pageHeading {
  max-width: 960px;
  margin-inline: auto;
  margin-top: -24px;
}
nav.jmk_pageNav {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
}
.jmk_pageNavList {
  display: flex;
  gap: 2px;
}
.jmk_pageNavList li a {
  display: block;
  align-content: center;
  height: clamp(1.875rem, 0.497rem + 5.13vw, 3.125rem);
  padding: 8px 12px;
  font-size: clamp(0.75rem, 0.4595rem + 1.0811vw, 1rem);/*12-16 430-800*/
  color: #666666;
  font-weight: bold;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.11);
  text-align: center;
}
.jmk_pageNavList li {
  max-width: 224px;/*30-50 430-820*/
  background-color: #FFFFFF;
}
.jmk_pageNavList li:first-of-type,
.jmk_pageNavList li:first-of-type a{
  border-radius: 33px 0 0 33px;
}
.jmk_pageNavList li:last-of-type,
.jmk_pageNavList li:last-of-type a{
  border-radius: 0 33px 33px 0;
}
.jmk_iconX {
  max-width: clamp(2.625rem, 2.074rem + 2.05vw, 3.125rem);/*42-50 430-820*/
}
.jmk_iconX a{
  display: block;
  transition: opacity .6;
}


/* 広島県東部とは・・・ */
.jmk_eastWrap{
  display: flex;
  justify-content: center;
  gap: clamp(16px,2vw,32px);
  margin-top: clamp(1.5rem, 0.397rem + 4.1vw, 2.5rem);/*24-40 430-820*/
  padding: 0 8px 0 24px;
}
.jmk_eastWrap_left {
  width: 47.05%;
  margin-top: clamp(0rem, -20.5rem + 40vw, 3.5rem);/*0-56 820-960*/
}
.jmk_eastWrap_left .jmk_secHeading{text-align: left;}
.jmk_eastWrap_left p{
  margin-top: 8px;
  font-size: clamp(0.875rem, 0.5671rem + 1.1457vw, 1.75rem);/*14-28 430-1652*/
  font-weight: bold;
  color: #666666;
  line-height: calc(46 / 28);
}
.jmk_eastWrap_right{
  display: flex;
  align-items: end;
}
.jmk_eastmap{
  max-width: 380px;
}
.jmk_hanzakiBlock{
  margin-inline-start: -136px;
}
.jmk_hanzakiImg{
  max-width: 322px;
}
.jmk_hanzakiBtn{
  max-width: 188px;
  min-width: 148px;
  width: 57.32%;
  background-color: #FFFFFF;
  border: 1px solid #E1CBFF;
  border-radius: 9999px;
}
.jmk_hanzakiBtn a{
  display: block;
  padding: 6px;
  text-align: center;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.11);
  transition: opacity .2s;
}


/* こんな地元特産品も！ */
.jmk_goodsWrap{
  max-width: 874px;
  margin-inline: auto;
  margin-top: clamp(0.5rem, -0.603rem + 4.1vw, 1.5rem);/*8-24 430-820*/
  padding: 0 16px;
}
.jmk_goodsBg{
  margin-top: -28px;
  padding: 24px 24px 16px 24px;
  background-image: linear-gradient(180deg, rgba(217, 201, 172, 0.26), rgba(183, 165, 134, 1)), url(../img/bg_goods.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border: 1px solid #C8AE84;
  border-radius: 16px;
  box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, 0.16), 0px 3px 6px 0px rgba(0, 0, 0, 0.11);
}
.jmk_goodsTxt01{
  font-size: clamp(1.125rem, 0.8494rem + 1.0256vw, 1.375rem);/*18-22 430-820*/
  color: #7E6336;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  text-shadow: -1px -1px 0px rgba(255, 255, 255, 1);
}
.jmk_goodsTxt02{
  margin-top: 12px;
  font-size: clamp(1.3125rem, 0.9679rem + 1.2821vw, 1.625rem);/*21-26 430-820*/
  color: #7E6336;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  text-shadow: -1px -1px 0px rgba(255, 255, 255, 1);
}
.jmk_goodsImgFlx_wrap{
  width: 94.05%;
  margin-top: 8px;
  margin-inline: auto;
}
.jmk_goodsImgFlx{
  display: flex;
  gap: 12px;
}
.jmk_goodsImgFlx li{
  border: 2px solid #FFFFFF;
}


/* 日向坂46 竹内希来里の地元できらる */
.jmk_kiraruWrap{
  margin-top: clamp(1.5rem, -1.256rem + 10.26vw, 4rem);/*24-64 430-820*/
}
.jmk_kiraruLogo_wrap .jmk_secHeading{
  position: absolute;
  width: 42.34%;
  top: 13%;
  right: 15%;
}
.jmk_kiraruLogo{
  width: fit-content;
  margin-inline: auto;
  padding: 0 8px;
  text-align: center;
}
.jmk_kiraruLogo_wrap{
  position: relative;
}
.jmk_secTtl{
  position: absolute;
  width: 42.34%;
  top: 50%;
  transform: translateY(-24%);
  right: 5%;
}
.jmk_kiraruImg{
  max-width: 1096px;
  margin-inline: auto;
}
.jmk_kiraruDate_wrap{
  position: relative;
  padding: clamp(0.5rem, -0.603rem + 4.1vw, 1.5rem) 18px;/*8-24 430-820*/
  background-color: #FBF401;
  border: 3px solid #FFFFFF;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}
.jmk_kiraruDate_deco{
  position: absolute;
  top: calc(-40px - 60 * ((100vw - 430px) / 666));/*-40- -100 430-1096*/
  left: 25%;
  width: 16.81%;
}
.jmk_kiraruContents_wrap{
  margin-top: 16px;
}
.jmk_kiraruTxt{
  padding: 0 8px;
  font-size: clamp(0.875rem, 0.0481rem + 3.0769vw, 1.625rem);/*14-26 430-820*/
  color: #4D2A7E;
  font-weight: bold;
  text-align: center;
  line-height: calc(46/26);
}
/* videolist */
.jmk_container {
  width: 96%;
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  justify-content: center;
  margin-bottom: 2em;
}
.jmk_videoBox {
  width: 22.25%;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: #8ee9e9 1px 1px 4px 1px;
}
.jmk_videoBox a {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  color: #000000;
  text-decoration: none;
}
.jmk_videoBox img {
  width: 100%;
  display: block;
}
.jmk_videoBox div {
  padding: clamp(0.25rem, -1.75rem + 3.33vw, 0.75rem);
  font-size: 0.875rem;
  background-color: rgba(255, 255, 255, 1);
}
.jmk_videoBox a div p {
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.375;
  font-size: 0.875rem;
}
/* 番組公式Xはこちら */
.jmk_kuraruBtn{
  max-width: 460px;
  width: 96%;
  margin-inline: auto;
}
.jmk_kuraruBtn a{
  display: block;
  border-radius: 10px;
  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.16);
  transition: opacity .2s;
}


/* 広島きらきらサポーターが盛り上げます！ */
.jmk_supporterWrap{
  margin-top: clamp(4.5rem, 3.397rem + 4.1vw, 5.5rem);/*72-88 430-820*/
  padding: 0 24px;
}
.jmk_supporterImgFlx_wrap{
  max-width: 1012px;
  margin-inline: auto;
  margin-top: 16px;
}
.jmk_supporterImgFlx{
  display: flex;
  justify-content: center;
  gap: 20px clamp(20px,2vw,40px);
}
.jmk_supporterImgFlx li{
  flex: 1;
  aspect-ratio: 1/1;
  align-content: end;
  padding: 16px;
  padding-bottom: clamp(0.5rem, -0.051rem + 2.05vw, 1rem);/*8-16 430-820*/
  background-color: #FFFCCC;
  border: 3px solid #FFFFFF;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}
.jmk_supporterImg{
  width: 100%;
  text-align: center;
}
.jmk_supporterImgFlx li p{
  width: 31.41%;
  min-width: 46px;
  margin-inline: auto;
  margin-top: 16px;
  text-align: center;
}


/* 広島県東部を応援したい企業さまを募集しています！ */
.jmk_sponsorWrap{
  margin-top: clamp(2.5rem, -6.321rem + 32.82vw, 10.5rem);/*430-820 40-168*/
  padding: 0 18px;
}
.jmk_sponsorBtn{
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 782px;
  margin-inline: auto;
  max-height: 134px;
  background-image: linear-gradient(180deg, rgba(212, 198, 245, 1), rgba(255, 239, 197, 1));
  border: 5px solid #FFFFFF;
  border-radius: 9999px;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}
.jmk_sponsorBtn a{
  display: block;
  padding: clamp(0.5rem, -0.603rem + 4.1vw, 1.5rem) 16px;/*8-24 430-820*/
  transition: opacity .2s;
}


/* tss_gotop */
.tss_gotop{
  max-width: 60px;
}



@media screen and (min-width: 821px) {
  .jmk_iconX a:hover{opacity: 0.6;}
  .jmk_hanzakiBtn a:hover{opacity: 0.6;}
  .jmk_kuraruBtn a:hover{opacity: 0.6;}
  .jmk_sponsorBtn a:hover{opacity: 0.6;}
  a:hover.jmk_goodslink{opacity: 0.6;}
}



@media screen and (max-width: 820px) {
  .tss_body{padding-bottom: calc(17.5vw + 120px);}
  .jmk_body::before{
    background-size: cover;
  }
  
  /* ページ上部 */
  .jmk_pageNavList{
    display: grid;
    grid-template-columns: repeat(2, auto);
  }
  .jmk_pageNavList li:first-of-type,
  .jmk_pageNavList li:first-of-type a{
    border-radius: unset;
  }
  .jmk_pageNavList li:last-of-type,
  .jmk_pageNavList li:last-of-type a{
    border-radius: unset;
}

  /* 広島県東部とは・・・ */
  .jmk_eastWrap{
    flex-direction: column;
  }
  .jmk_eastWrap_left{width: 100%;}
  .jmk_eastmap{max-width: fit-content;min-width: 300px;}
  .jmk_hanzakiImg{max-width: 426px;}
  .jmk_hanzakiBtn{max-width: 400px; margin-inline-start: auto;}

  /* こんな地元特産品も！ */
  .jmk_goodsImgFlx{
    flex-wrap: wrap;
  }

  /* 日向坂46 竹内希来里の地元できらる */
  .jmk_kiraruLogo_wrap .jmk_secHeading{width: 57.34%; right: 2%;}
  /* videolist */
  .jmk_container {
    gap: 16px 2%;
  }
  .jmk_videoBox {
    width: 48.75%;
  }

  /* 広島きらきらサポーターが盛り上げます！ */
  .jmk_supporterImgFlx{
    flex-wrap: wrap;
    justify-content: center;
  }
  .jmk_supporterImgFlx li{
    flex: none;
    width: calc((100% - 20px) / 2);
  }
}