/*
Theme Name: Iconic Child
Template: iconic_tcd062
Version: 1.0
*/

/* ========================================================= 
   カスタム価格表記用デザイン
========================================================= */
.price-banner {
  /* ▼ここがポイント：画面幅ではなく、この枠の幅基準で文字を拡大縮小する（コンテナクエリ） */
  container-type: inline-size;
  width: 100%;
  background: #fff;
  padding: 2cqw 1.4cqw 1.8cqw;
  box-sizing: border-box;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Yu Gothic UI",
    "Meiryo",
    "MS PGothic",
    sans-serif;
}

.price-banner__top {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.2cqw;
  width: 100%;
}

.price-banner__label {
  flex: 0 0 auto;
  width: 13%;
  min-width: 48px;
  aspect-ratio: 1 / 1;
  background: #ff2400;
  color: #fff;
  border-radius: 1.2cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-size: clamp(12px, 3.5cqw, 64px);
}

.price-banner__main {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 0.4cqw;
  min-width: 0;
  white-space: nowrap;
  line-height: 0.9;
}

.price-banner__amount {
  color: #ff2400;
  font-weight: 900;
  /* vwからcqwに変更し、はみ出さないように比率を微調整 */
  font-size: clamp(24px, 12cqw, 180px);
  letter-spacing: -0.05em;
}

.price-banner__yen {
  color: #ff2400;
  font-weight: 900;
  font-size: clamp(16px, 8cqw, 125px);
  letter-spacing: -0.06em;
}

.price-banner__tax {
  color: #000;
  font-weight: 900;
  font-size: clamp(12px, 3.8cqw, 70px);
  line-height: 1;
  padding-bottom: 0.4cqw;
}

.price-banner__bottom {
  margin-top: 1.6cqw;
  width: 100%;
  min-height: 6cqw;
  /* borderも画面幅に連動するように調整 */
  border: clamp(2px, 0.35cqw, 10px) solid #ff2400;
  border-radius: 9999px;
  color: #ff2400;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.8cqw 2cqw;
  box-sizing: border-box;
  font-size: clamp(16px, 4.5cqw, 88px);
  letter-spacing: -0.04em;
  line-height: 1.1;
}

/* とてつもなく狭い画面用のセーフティガード */
@container (max-width: 400px) {
  .price-banner__amount {
    font-size: clamp(16px, 11cqw, 180px);
  }
}


/* グローバルメニューの文字サイズを変更 */
.p-global-nav > li > a {
    font-size: 12px !important; /* ←ここに好きな数字を入れます */
}



/* トップページのお知らせ（ニュースエリア）の上下に線を引く */
.home .p-index-news {
    border-top: 1px solid #ccc;     /* 上の線 */
    border-bottom: 1px solid #ccc;  /* 下の線 */
	padding-top: 10px;              /* 線と要素の間の上の余白（適宜調整） */
    padding-bottom: 10px;           /* 線と要素の間の下の余白（適宜調整） */
}
/* 最新ニュースタイトルのデザイン */
.p-index-news__title {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #e54d90;         /* 鮮やかなピンク/マゼンタ */
    margin-bottom: 25px;    /* ニュース本体との間の余白 */
    padding-top: 10px;
}

/* --------------------------------------------------------- 
   イチオシPoint用デザイン
--------------------------------------------------------- */

/* 本文内の余計なマージンをリセット（WordPressの自動改行対策） */
.product-ichioshi p {
    margin: 0 !important;
    padding: 0 !important;
}

.product-ichioshi {
  width: 100%;
  margin-bottom: 4cqw;
}

.ichioshi-item {
  position: relative;
  /* border-left は消して、擬似要素で描画する */
  border-bottom: clamp(1px, 0.2cqw, 3px) solid #ff2400;
  /* 上の余白に最小値を設定し、ラベルと文字の衝突を防ぐ */
  padding: clamp(20px, 2cqw, 40px) 2cqw 1cqw 2cqw; 
  margin-bottom: clamp(30px, 4cqw, 40px);
}

/* 左の線を上（ラベルの頂点）まで伸ばす設定 */
.ichioshi-item::before {
  content: "";
  position: absolute;
  top: -15px; /* ラベルの高さに合わせて固定値で安定させる */
  left: 0;
  bottom: 0;
  border-left: clamp(1px, 0.2cqw, 3px) solid #ff2400;
}

.ichioshi-label {
  position: absolute;
  top: -15px; /* 固定値で位置を安定させる */
  left: 0;      /* 左端にピッタリ付ける */
  background: #ff2400;
  color: #fff;
  font-weight: 900;
  padding: 2px 15px; /* 余白を固定にして極小画面でも潰れないようにする */
  border-radius: 0 999px 999px 0;   /* 左側は直角、右側だけ丸める */
  display: inline-block;
  font-size: clamp(10px, 3.5cqw, 22px);
  line-height: 1.4;
}

.ichioshi-text {
  font-size: clamp(11px, 4.5cqw, 22px);
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.ichioshi-text {
    margin: 0 !important;
    line-height: 1.4;
}




/* ニュースエリアをレスポンシブ対応に調整 */
.p-index-news__flex-body {
    display: flex;
    align-items: center;
}

/* スマホサイズ（991px以下）の設定 */
@media screen and (max-width: 991px) {
    .p-index-news__flex-body {
        flex-direction: column;    /* 縦並びにする */
    }
    
    .p-index-news__archive-link {
        width: 100%;
        text-align: center;         /* ボタンエリアを中央に */
        margin-top: 20px;           /* ニュースとの間の隙間 */
    }
    
    .p-index-news__archive-link__button {
        display: inline-flex !important;
        margin: 0 auto;
        justify-content: center;    /* ボタン内の文字を中央に */
        width: 100%;                /* スマホで押しやすく幅を広げる */
        max-width: 250px;           /* 横に広がりすぎないように制限 */
    }
}