@charset "utf-8";

/* CSS Document */
:root {
  --col-yew: #fed600;
  --col-dk-yew: #FFD500;
  --col-org: #ec6a1d;
  --col-lt-org: #fabf00;
  --col-red: #e83228;
  --col-fm-grn: #00a33e;
  --col-fm-ble: #008cd6;
  --base-wht: #fff;
  --base-blk: #231815;
  --sbw: 0px;

}

body {
  overflow-x: hidden;
  margin: 0;
}

/*===============================================
  アニメーション初期状態（チラつき防止）
===============================================*/
#tvshow_2609 .ttl_h2,
#tvshow_2609 .js-item {
  visibility: hidden;
}

/*===============================================
●共通
===============================================*/
/* ============ common =========== */
#tvshow_2609 * {
  min-height: 0vw;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

#tvshow_2609 :is(h1, h2, h3, h4, h5, p, figure) {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
}

#tvshow_2609 :is(ul, ol, li, dl, dt, dd) {
  margin: 0;
  list-style: none;
  padding: 0;
}

#tvshow_2609 :is(a:link, a:visited, a:hover, a:active, a:focus) {
  text-decoration: none;
}

#tvshow_2609 img {
  max-width: 100%;
  display: block;
  height: auto;
}


/*====================== text関連 ========================*/
#tvshow_2609 .lead-area .leadB {
  text-align: center;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  margin: 0 0 1.5rem;
}

#tvshow_2609 .lead-area .leadB span {
  text-align: center;
  font-weight: 600;
  font-size: clamp(1.3rem, 2.1vw, 2rem);
  display: block;
  margin: 0;
}

#tvshow_2609 .lead-area .leadT {
  text-align: center;
  font-weight: 500;
  font-size: clamp(1rem, 2.1vw, 1.2rem);
}

#tvshow_2609 .lead-area .leadT span {
  margin: 5px 0 0;
  display: block;
  font-size: clamp(0.85rem, 2vw, 0.95rem);
}

#tvshow_2609 .date {
  text-align: center;
  box-sizing: border-box;
  font-size: clamp(0.85rem, 1.3vw, 1rem);
  font-weight: 600;
  background: #d7c28d;
  color: #313131;
  border-radius: 1rem;
  max-width: 160px;
  padding: 0.2rem 0;
  border: 1px solid #fff;
}

#tvshow_2609 .item-area .name {
  text-align: left;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  font-weight: 600;
  line-height: 1.4;
  margin: 1.5rem 0 0;
}

#tvshow_2609 .item-area .name span {
  text-align: left;
  font-size: clamp(0.9rem, 4vw, 1.05rem);
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  display: block;
}

#tvshow_2609 .item-area .name-sm {
  text-align: left;
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

#tvshow_2609 .item-area .price {
  text-align: left;
  font-size: clamp(1.1rem, 1.5vw, 1.2rem);
  font-weight: 600;
}

#tvshow_2609 .item-area .price-sm {
  text-align: right;
  font-size: clamp(0.85rem, 2vw, 0.9rem);
  font-weight: 600;
}

#tvshow_2609 .item-area .txt {
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  text-align: left;
  line-height: 1.6;
  margin-top: .8rem;
}

#tvshow_2609 .item-area .txt span {
  font-size: clamp(0.8rem, 0.85vw, 0.88rem);
  text-align: left;
  line-height: 1.6;
  display: block;
  margin: 0.2rem 0 0;
}

#tvshow_2609 .ttl_h2 {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
}

#tvshow_2609 .ttl_h3 {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  text-align: left;
}

#tvshow_2609 .ttl_h4 {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  margin: 0 0 0.6rem;
  padding: 0 0 0.5rem;
}

#tvshow_2609 .kome-area {
  margin-top: .3rem;
}

#tvshow_2609 .kome-area .kome {
  font-size: clamp(0.8rem, 0.85vw, 0.88rem);
  text-align: left;
}



/*=======================  main-area =======================*/
/* div#contents {
  background: url(../images/bg.webp) repeat;
  width: 100%;
  min-height: 100%;
  background-attachment: fixed;
  background-size: contain;
  background-position: center;
} */

#tvshow_2609 {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  position: relative;
  min-height: 100%;
  padding-bottom: 0rem;
  position: relative;
  color: var(--base-blk);
  font-feature-settings: "palt", "tnum";
  letter-spacing: 0.05em;
  background-color: var(--col-yew);
  background-image: radial-gradient(circle, var(--col-lt-org) 20%, transparent 21%),
    radial-gradient(circle, var(--col-lt-org) 20%, transparent 21%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
  background-attachment: fixed;
}


#tvshow_2609 section {
  text-align: center;
  margin: 0 auto;
  width: 100%;
  position: relative;
}

#tvshow_2609 .imgbox {
  position: relative;
  z-index: 2;
  overflow: hidden;
}

#tvshow_2609 .imgbox .kv {
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 2;
}


/*==================== text-area ====================*/
#tvshow_2609 .text-area {
  width: 100%;
  position: relative;
  z-index: 1;
  padding: 4rem 1rem 8rem;
  margin-bottom: -5rem;
}

#tvshow_2609 .text-area::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--col-dk-yew);
  z-index: -1;
  clip-path: polygon(0 0, 100% 0%, 100% calc(100% - 5vw), 0% 100%);
}

#tvshow_2609 .lead-area {
  width: min(90%, 1200px);
  padding: 0;
  margin: 0 auto;
}

/* =========================================
   h2見出し：SVG八角形 ＋ GSAP用星要素
========================================= */
#tvshow_2609 .ttl_h2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 280px;
  margin: 3rem auto 5rem;
  padding: 0.9rem 4.5rem;
  color: var(--base-wht);
  font-weight: 900;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  text-align: center;
  z-index: 1;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 60" preserveAspectRatio="none"><polygon points="25,3 275,3 297,30 275,57 25,57 3,30" fill="%23eb5514" stroke="%23111111" stroke-width="4" vector-effect="non-scaling-stroke" stroke-linejoin="miter"/></svg>');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-shadow: 2px 0px 0 var(--base-blk),
    -2px 0px 0 var(--base-blk),
    0px 2px 0 var(--base-blk),
    0px -2px 0 var(--base-blk),
    2px 2px 0 var(--base-blk),
    -2px 2px 0 var(--base-blk),
    2px -2px 0 var(--base-blk),
    -2px -2px 0 var(--base-blk);
}



/* 星の基本スタイル */
#tvshow_2609 .ttl_h2 .star {
  position: absolute;
  top: 50%;
  width: 36px;
  height: 36px;
  background: url('../images/ster.webp') no-repeat center / contain;
  pointer-events: none;
  transform: translateY(-50%);
  will-change: transform;
}

/* 配置場所 */
#tvshow_2609 .ttl_h2 .star.-left {
  left: 18px;
}

#tvshow_2609 .ttl_h2 .star.-right {
  right: 18px;
}



/*==================== item-area =====================*/

#tvshow_2609 .item-area {
  width: 100%;
  position: relative;
  z-index: 1;
}

#tvshow_2609 .bg-dots {
  position: relative;
  padding: 1vw 0 2rem;

}

#tvshow_2609 .bg-dots::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skewY(-3deg);
  z-index: -1;
  background-color: var(--col-org);
  background-image: radial-gradient(circle, var(--col-red) 20%, transparent 21%),
    radial-gradient(circle, var(--col-red) 20%, transparent 21%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(98% - 10vw));
}

#tvshow_2609 .item-wrap {
  width: min(90%, 1200px);
  margin: 0 auto;
  position: relative;
  padding-bottom: 3rem;
}


#tvshow_2609 .item-area .item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin: 0 auto;
  row-gap: 3rem;
  column-gap: 1.5rem;
}

#tvshow_2609 .c-pic-item {
  position: relative;
}

#tvshow_2609 .item-area .c-inner {
  background: var(--base-wht);
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  gap: 1rem;
  border-radius: 1rem;
  border: var(--base-blk) 4px solid;
  box-shadow: 5px 5px 0px var(--base-blk);
}

#tvshow_2609 .c-pic {
  position: relative;
  filter: drop-shadow(0px 5px 0px rgba(35, 24, 21, 0.5));
  will-change: filter;
}

#tvshow_2609 .c-txt {
  position: relative;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  will-change: transform;
  flex-grow: 1;
}

#tvshow_2609 .c-txt::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  border-top: 4px dotted #ccc;
  margin: auto;
}

#tvshow_2609 .item-area .js-item {
  will-change: transform;
}

#tvshow_2609 .c-inner,
#tvshow_2609 .c-txt {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

#tvshow_2609 .c-pic {
  position: relative;
}

#tvshow_2609 .c-badge {
  position: absolute;
  top: -22px;
  left: -9px;
  z-index: 3;
}

#tvshow_2609 .c-badge img {
  width: 150px;
  height: auto;
  display: block;
  filter: drop-shadow(5px 5px 0px rgba(0, 0, 0, .5));
}

#tvshow_2609 .c-badge.-perfect {
  color: var(--base-wht);
  font-size: clamp(1.3rem, 1.8vw, 1.5rem);
}

#tvshow_2609 .c-badge.-perfect .red {
  color: #fed600;
}

#tvshow_2609 .c-badge.-pass {
  background: #cc0303;
  color: var(--base-wht);
  font-size: clamp(1.3rem, 1.8vw, 1.5rem);
}

#tvshow_2609 .ttl_h2 {
  min-width: 240px;
}


/*===== yokoku-area ======*/

#tvshow_2609 .imgbox.yokoku .kv {
  width: min(100%, 1040px);
  margin: 0 auto;
}

#tvshow_2609 .yokoku-text {
  width: min(100%, 1040px);
  margin: 0 auto;
  background: var(--col-org);
  padding: 1rem;
  color: var(--base-blk);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  text-align: center;
}

#tvshow_2609 .yokoku-area {
  width: min(100%, 1040px);
  background: var(--col-dk-yew);
  padding: 1.5rem;
}

#tvshow_2609 .yokoku-area .yokoku-tvname {
  font-weight: 600;
  font-size: clamp(1rem, 1.1vw, 1.2rem);
}

#tvshow_2609 .yokoku-area .btn {
  width: 80%;
  margin: 0 auto;
}

/*===== aem ======*/
.others {
  background: var(--base-wht);
  padding: 1rem 2rem;
}

.ly-contents-area {
  padding: 10px 0 0;
}


/*===============================================
●pc.css 画面の横幅が737px以上
===============================================*/
@media screen and (min-width: 737px) {
  #tvshow_2609 .pc-none {
    display: none;
  }


}

/*===============================================
●sp.css  画面の横幅が736pxまで
===============================================*/
@media screen and (max-width: 736px) {
  #tvshow_2609 .sp-none {
    display: none;
  }

  #tvshow_2609 {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 0;
  }

  #tvshow_2609::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background-color: var(--col-yew);
    background-image: radial-gradient(var(--col-lt-org) 20%, transparent 20%),
      radial-gradient(var(--col-lt-org) 20%, transparent 20%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
  }

  #tvshow_2609 .c-badge {
    top: -15px;
  }

  #tvshow_2609 .text-area {
    padding: 2.5rem 1rem 7rem;
  }


  #tvshow_2609 .lead-area {
    width: 100%;
  }

  #tvshow_2609 .lead-area .leadT {
    text-align: left;
  }


  #tvshow_2609 .item-area {
    width: 100%;
    overflow: visible;
  }

  #tvshow_2609 .item-wrap {
    width: 80%;
    padding-bottom: 2rem;
  }

  #tvshow_2609 .item-area .item-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
    margin: 0 auto;
  }

  #tvshow_2609 .item-area .c-inner {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    padding: 1rem;
    gap: 1.5rem;
  }

  #tvshow_2609 .c-txt {
    padding: 0;
  }

  #tvshow_2609 .c-txt::before {
    width: 100%;
  }

  #tvshow_2609 .item-area .name {
    margin: 1.5rem 0 0
  }

  #tvshow_2609 .ttl_h2 {
    margin: 1.5rem auto 3rem;
    padding: 1rem 2rem;
  }

  #tvshow_2609 .ttl_h2 span {
    padding: 0.5rem;
    transform: skewX(-30deg);
  }

  #tvshow_2609 .c-badge img {
    width: 120px;
    border: 4px solid var(--base-wht);
    box-shadow: 3px 3px 0px rgba(0, 0, 0, .5);
  }

  #tvshow_2609 .c-pic {
    filter: drop-shadow(2px 4px 0px rgba(35, 24, 21, 0.3));
    will-change: filter;
  }

  #tvshow_2609 .item-area {
    padding: 1rem 0;
  }

  #tvshow_2609 .item-area .item-grid {
    gap: 2.5rem;
  }

  #tvshow_2609 .bg-dots::before {
    clip-path: polygon(0 2vw, 100% 0, 100% 100%, 0 calc(98% - 2vw));
    padding-bottom: 1rem;
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
  }



  /*===== yokoku-area ======*/
  #tvshow_2609 .yokoku-area {
    padding: 1rem;
  }

  #tvshow_2609 .yokoku-area .btn {
    width: 100%;
  }

  /*===== aem ======*/
  .others {
    padding: 0.5rem 0.8rem;
    color: #313131;
    background: var(--base-wht);
    position: relative;
    z-index: 2;
  }

  footer {
    position: relative;
  }

  .ly-wrp-breadcrumb-sp {
    position: relative;
  }

  .ly-btn-pagetop {
    background: #fff;
    bottom: 0;
  }

  .ly-foot-top-area2 {
    background: #fff;
  }

  .ly-foot-sns-area2 {
    background: #fff;
    padding: 0px 0 20px;
    margin: 0;
  }

  .ly-foot-bottom-area2 {
    margin: 0;
  }
}

/*===============================================
●tablet.css  画面の横幅が737px～
===============================================*/

@media screen and (min-width: 737px) and (max-width: 767px) {}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  #tvshow_2609 .imgbox .kv-inner {
    padding: 1vw;
  }

  #tvshow_2609 .imgbox .kv-notes {
    top: -1px;
    right: 2px;
  }

  #tvshow_2609 .imgbox .c-kv-ribbon-banana {
    top: 49%;
  }

  #tvshow_2609 .item-area .deco-left-top {
    top: 5%;
    left: -58vw;
    width: 100%;
    transform: rotate(-60deg);
  }

  #tvshow_2609 .item-area .deco-right-top {
    top: 18%;
    right: -51vw;
    width: 100%;
    transform: rotate(82deg);
  }

  #tvshow_2609 .item-area .deco-right-bottom {
    bottom: 5%;
    right: -36vw;
    width: 100%;
    transform: rotate(-48deg);
  }

  #tvshow_2609 .item-area .deco-left-bottom {
    top: 70%;
    left: -37vw;
    width: 100%;
    transform: rotate(65deg);
  }

}

@media screen and (min-width: 1024px) and (max-width: 1199px) {
  #tvshow_2609 .imgbox .kv-inner {
    padding: .3vw;
  }

  #tvshow_2609 .item-area .deco-left-top {
    top: 5%;
    left: -58vw;
    width: 100%;
    transform: rotate(-60deg);
  }

  #tvshow_2609 .item-area .deco-right-top {
    top: 18%;
    right: -51vw;
    width: 100%;
    transform: rotate(82deg);
  }

  #tvshow_2609 .item-area .deco-right-bottom {
    bottom: 5%;
    right: -36vw;
    width: 100%;
    transform: rotate(-48deg);
  }

  #tvshow_2609 .item-area .deco-left-bottom {
    top: 70%;
    left: -37vw;
    width: 100%;
    transform: rotate(65deg);
  }



}