@charset "utf-8";
/* CSS Document */
#cw47socks .h1_sub {
  font-size: 1.2rem;
  text-align: center;
  font-weight: 500;
}
#cw47socks .tit_h1 {
  text-align: center;
  font-size: clamp(1.6rem, 0.966rem + 1.38vw, 2rem);
  font-weight: 600;
}
#cw47socks .lead {
  text-align: center;
  font-size: clamp(1rem, 0.683rem + 0.69vw, 1.2rem);
  margin-top: 1.2rem;
  line-height: 1.8;
}
#cw47socks .leadS {
  text-align: center;
  font-size: clamp(0.9rem, 0.741rem + 0.34vw, 1rem);
  margin: 1.2rem 0 2rem;
  line-height: 1.7;
}
#cw47socks .aten {
  font-size: 0.95rem;
  text-align: right;
  margin-bottom: 8px;
}
@media screen and (max-width:736px) {
  #cw47socks .aten {
    font-size: 0.8rem;
    text-align: left;
  }
  #cw47socks .lead, #cw47socks .leadS {
    text-align: left;
  }
}
#cw47socks .item_bg {
  width: calc(100vw - 0.7%);
  margin: 0 calc(50% - 50vw);
  background-color: #eee;
  padding: 1rem 1rem 1.5rem;
  margin-top: 2rem;
  box-sizing: border-box;
}
@media screen and (max-width:736px) {
  #cw47socks .item_bg {
    width: 100%;
  }
}
#cw47socks .item_area {
  max-width: 940px;
  margin: 0 auto;
}
#cw47socks .conL {
  float: left;
  margin-right: 1.5rem;
  padding-right: 1.5rem;
  border: solid #999;
  border-width: 0 1px 0 0;
}
#cw47socks .conR {
  float: right;
}
#cw47socks .fix {
  clear: both;
}
#cw47socks .item_area h3 {
  font-size: 1.3rem;
  margin: 0;
  padding: 0;
}
/*#cw47socks .item_area p {
  font-size: 1rem;
}*/
#cw47socks .item_area .txt {
  font-size: 1.05rem;
  padding-top: 1rem
}
#cw47socks .date {
  display: inline-block;
  border: solid #999 1px;
  padding: .2rem 1rem;
  text-align: left;
  margin-bottom: .5rem;
  font-size: clamp(0.9rem, 0.741rem + 0.34vw, 1rem)
}
@media screen and (max-width:736px) {
  #cw47socks .conL {
    float: none;
    border-width: 0;
    margin-bottom: 1rem;
  }
  #cw47socks .item_area .txt {
    font-size: 0.95rem;
    padding-top: 1rem;
    border: solid #999;
    border-width: 1px 0 0 0;
  }
}
/* ==================================
   レイアウト (Flexboxに変更)
   ================================== */
#cw47socks .lineup-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 15px 0;
}
#cw47socks .section-h2-title {
  text-align: center;
  font-size: clamp(1.5rem, 1.024rem + 1.03vw, 1.8rem);
  font-weight: bold;
  margin-bottom: 20px;
}
#cw47socks .section-h3-title {
  text-align: center;
  font-size: clamp(1.2rem, 0.724rem + 1.03vw, 1.5rem);
  font-weight: bold;
  margin-bottom: 20px;
}
/* ▼ GridからFlexboxに変更し、中央寄せを指定 ▼ */
#cw47socks .lineup-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 3アイテム以下の時に中央寄せにする */
  gap: 30px 15px; /* 縦の余白30px、横の余白15px */
  padding: 0;
  margin: 0;
  list-style: none;
}
/* ▼ 各アイテムの横幅を計算式で指定（SP: 2カラム） ▼ */
/* 横の余白15pxを引いた残りを2等分 */
#cw47socks .lineup-item {
  width: calc((100% - 15px) / 2);
}
/* PC: 737px以上で 4カラム */
@media screen and (min-width: 737px) {
  #cw47socks .lineup-list {
    gap: 40px 20px;
  }
  /* 横の余白20px × 3箇所分（60px）を引いた残りを4等分 */
  #cw47socks .lineup-item {
    width: calc((100% - 60px) / 4);
  }
}
/* ==================================
   くるっと回る画像 (Flip Animation)
   ================================== */
#cw47socks .flip-button {
  background: transparent;
  border: none;
  padding: 0;
  width: 100%;
  aspect-ratio: 1 / 1; /* 600x600の正方形を維持 */
  cursor: pointer;
  perspective: 1000px; /* 3D回転の奥行きを設定 */
  margin-bottom: 15px;
  display: block;
}
/* キーボード操作時のフォーカスを見やすく */
#cw47socks .flip-button:focus-visible {
  outline: 3px solid #0171a6;
  outline-offset: 4px;
}
#cw47socks .flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d; /* 子要素の3D空間を維持 */
}
/* ボタンが aria-pressed="true" になったら裏返す */
#cw47socks .flip-button[aria-pressed="true"] .flip-inner {
  transform: rotateY(180deg);
}
#cw47socks .flip-front, #cw47socks .flip-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 裏側を向いた時に要素を隠す */
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 軽い影をつける */
}
#cw47socks .flip-back {
  transform: rotateY(180deg); /* 裏面はあらかじめ180度回しておく */
}
#cw47socks .flip-front img, #cw47socks .flip-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ==================================
   テキスト情報 (ナンバー・地域・テーマ)
   ================================== */
/* ==================================
   テキスト情報 (ナンバー・dlリスト)
   ================================== */
#cw47socks .item-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* ナンバーのバッジが横に伸びないようにする */
  gap: 10px;
}
/* ナンバー */
#cw47socks .item-number {
  background-color: rgb(85, 85, 85);
  color: rgb(255, 255, 255);
  font-size: clamp(0.8rem, 0.562rem + 0.52vw, 0.95rem);
  line-height: 1.2;
  font-family: Jost, sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  clip-path: polygon(0% 0%, 75% 0%, 100% 100%, 0% 100%);
  padding: 4px 22px 4px 15px;
}
/* dlリスト全体 */
#cw47socks .item-details {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
/* dtとddの横並びグループ */
#cw47socks .detail-row {
  display: flex;
  align-items: baseline; /* テキストの下端を綺麗に揃える */
  font-size: clamp(0.9rem, 0.821rem + 0.17vw, 0.95rem);
  line-height: 1.5;
}
/* 項目名 (発売地域 / テーマ) */
#cw47socks .detail-row dt {
  font-weight: normal;
  color: #555;
  flex-shrink: 0; /* 文字が長くなっても潰れないようにする */
}
/* 値 (都道府県 / 花名称) */
#cw47socks .detail-row dd {
  margin-left: 10px;
  font-weight: bold;
  font-size: 1rem;
}
/* ==================================
   クリックを促すヒントアイコン (SVG)
   ================================== */
#cw47socks .flip-front {
  position: relative;
}
#cw47socks .icon-hint {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* ほんのり影をつけて浮き立たせる */
  pointer-events: none; /* アイコンがクリックの邪魔をしないようにする */
  color: #555; /* ★ここを変えるとSVGのアイコン色が変わります */
}
/* SVG自体のサイズ調整 */
#cw47socks .icon-hint svg {
  width: 21px;
  height: 21px;
}
@media screen and (max-width:736px) {
  #cw47socks .icon-hint {
    bottom: 8px;
    right: 8px;
  }
  #cw47socks .icon-hint {
    width: 26px;
    height: 26px;
  }
  #cw47socks .icon-hint svg {
    width: 15px;
    height: 15px;
  }
}
#cw47socks .abroad_area {
  border: solid 1px #ccc;
  border-radius: 10px;
  padding: 2rem 15px;
  margin-top: 5rem;
}
/*===============================================
●sp.css 画面の横幅が737px以上
===============================================*/
@media screen and (max-width:736px) {
  #cw47socks {
    margin: 0 calc(50% - 50vw);
    padding: 0;
    margin-top: -10px;
  }
  #cw47socks section {
    max-width: 100%;
    margin: 0 10px;
    padding: 0;
  }
}