@charset "utf-8";
/* CSS Document */

/*画像の枠線*/

/* 共通の浮き出し枠 */
.float-img,
.img-card {
  border: 2px solid #ccc;/* 薄いグレーの枠線 */
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);/* 軽い影で浮き出し感 */
  border-radius: 4px;/* 角を少し丸くする場合 */
  width: 100%;      /* デフォルトは幅いっぱい */
  height: auto;
  max-width: 800px; /* PCでの最大幅 */
	display: block;     /* ★追加 */
  margin: 0 auto;     /* ★追加 */
}


/*中学校　無料プレゼント画像*/
/* 特定の画像用レスポンシブ設定 */
.special-img {
  width: 100%;       /* デフォルトでスマホ対応：幅いっぱい */
  height: auto;      /* 縦横比を維持 */
  max-width: 250px;  /* PCでの最大幅を指定 */
}

/* 特定の画像用レスポンシブ設定（スマホ向け上書き） */
@media screen and (max-width: 767px) {
  .float-img {
    max-width: 95%;   /* 画面幅いっぱいに近く表示 */
    width: 95%;       /* 念のため width も指定 */
    display: block;
    margin: 0 auto;   /* 中央寄せ */
  }
}

/* 駐車場と店の写真 */
.photoWrap {
  display: flex;
  flex-direction: column;  /* 縦並び */
  align-items: center;     /* 中央揃え */
  gap: 20px;
  margin: 40px 0;
}

.photoWrap img {
  width: 400px;      /* ← ここで大きさが揃っている */
  height: auto;      /* 比率維持 */
  display: block;
}
	
/*中央揃え*/
#comment2,
#comment3 {
  margin: 0 auto;/* ← これが無いと中央にならない */
  padding: 0 16px;
  text-align: center;
}
	

/*東高校の学生の図を中央に*/
	
#figure {
  text-align: center;
}

#figure img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
	
/*ヤギを中央に*/
.img-card {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 260px;
  height: auto;
}

#opinionbox {
  text-align: center;   /* 親で中央制御 */
}

.opinion-card {
  display: inline-block; /* ← これが決定打 */
}

/* 作成地図を中央に */
#mymap {
  text-align: center;   /* 親で中央 */
}

#mymap img {
  display: block;       /* ブロック化 */
  margin: 0 auto;       /* 完全中央 */
  width: 100%;
  max-width: 400px;     /* 好きなサイズに調整 */
  height: auto;
}

/* 店・駐車場 写真を中央揃え */
.photoWrap {
  display: flex;
  justify-content: center;   /* 横中央 */
  align-items: center;       /* 縦中央 */
  gap: 20px;
  margin: 40px auto;
}

.photoWrap img {
  display: block;
  margin: 0 auto;            /* 各画像も中央 */
  width: 500px;              /* 画像サイズ */
  max-width: 100%;           /* スマホ対応 */
  height: auto;
}

/* 高校の　comment3 のリストを星付きにする */
#comment3 ul {
  list-style: none;   /* ●を消す */
  padding: 0;
  margin: 0;
}

#comment3 li {
  position: relative;   /* ← ★これが重要 */
  padding-left: 20px;   /* 星の分だけ左に余白 */
  margin: 12px 0;
  text-align: left;     /* 文章は左揃え */
}

#comment3 li::before {
  content: "";
  position: absolute;
  left: 0;
  
  width: 17px;/*星の大きさ*/
  height: 17px;/*星の大きさ*/
  background: url("images/黒い星.png") no-repeat center / contain;
}

/*星が縦の真ん中にくるように*/
#comment1 li::before,
#comment3 li::before {
  top: 44%;/*星の縦ラインの位置がかわる。*/
  transform: translateY(-50%);
　 align-items: center;   /* ← ★縦中央 完全保証 */
}

/*2行になる文章は li の高さが不安定 なので、
これを足すとさらに完璧になります。*/
#comment3 li {
  position: relative;
  padding-left: 24px;
  margin: 12px 0;
  line-height: 1.7;   /* ← これ重要 */
}

/* リストは左揃え */
#comment2 ul,
#comment3 ul {
  list-style: none;   /* ●を消す（必要なら） */
  padding: 0;
  margin: 0;
  text-align: left;   /* ← 文字を左揃え */
}

/* li の余白調整 */
#comment2 li,
#comment3 li {
  margin: 10px 0;
}
/* comment2・comment3 を“もっと中央寄せ” */
#comment2,
#comment3 {
  max-width: 350px;   /* ← ここを細くするのがポイント 中央による*/
  margin: 0 auto;
  padding: 0 16px;
}

/*PCだけ繊維製品の文章の中央の位置（幅）*/
@media screen and (min-width: 768px) {
  #comment3 {
    max-width: 335px;/*横幅*/
	word-break: keep-all;/*文章が折れないように*/
  　line-break: strict;/*文章が折れないように*/
  }
}

#comment2 {
  max-width: 250px;   /* ← 黒丸の商品リスト　ここを細くするのがポイント 中央による*/
 }
/* 文章は左揃えのまま */
#comment2 ul,
#comment3 ul {
  text-align: left;
}

/* =========================
   押せる画像リンク（共通）
   ヘッダ画像・丸アイコン・黒ヤギ対応
========================= */

/* =========================
   押せる画像リンク：スマホ確実版
========================= */

/* 対象リンク */
a.logo,
a.link,
.banaers a,
.opinion-card {
  display: inline-block;
  -webkit-tap-highlight-color: transparent; /* 青ハイライト消す */
}

/* 画像はリンクに追従 */
a.logo img,
a.link img,
.banaers a img,
.opinion-card img {
  display: block;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* =========================
   スマホ：押した瞬間（確実）
========================= */
@media (hover: none) {

  a.logo:active img,
  a.link:active img,
  .banaers a:active img,
  .opinion-card:active img {
    transform: translateY(3px) scale(0.96);
    box-shadow: 0 3px 6px rgba(0,0,0,0.25);
  }
}

/* =========================
   PC：ホバー
========================= */
@media (hover: hover) {

  a.link:hover img,
  .banaers a:hover img {
    transform: translateY(-6px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.25);
  }

  .opinion-card:hover img {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
  }
}

/* 丸型保証 */
a.link img,
.banaers a img {
  border-radius: 50%;
}

/* =========================
   ヘッダーロゴ専用：押せる表現
========================= */

/* PC */
@media (hover: hover) {
  a.logo:hover img {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
  }
}

/* スマホ */
@media (hover: none) {
  a.logo:active img {
    transform: translateY(3px) scale(0.96);
    box-shadow: 0 3px 6px rgba(0,0,0,0.25);
  }
}

/* =========================
   ピンク星つき文章（特典）
========================= */
.pink-star {
  position: relative;
  padding-left: 28px;
  margin: 12px auto;
  /*display: block;      ← ★ここが重要 
  text-align: center;
	 margin: 0 auto;   上下間隔＋中央寄せ 
	max-width: 420px;    必要なら幅を制御 */
}

.pink-star::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  width: 18px;
  height: 18px;
  background: url("images/黒い星.png") no-repeat center / contain;
  filter:
    brightness(0)
    saturate(100%)
    invert(75%)
    sepia(40%)
    saturate(600%)
    hue-rotate(305deg);
}







/* =========================
   販売商品リスト（中央寄せ）
========================= */
#comment2 ul {
  list-style: none;
  padding-left: 0;
  margin: 0 auto;
  text-align: center;
}

#comment2 li {
  margin: 6px 0;
}

/*無料プレゼントの画像を少し大きく*/
@media screen and (min-width: 768px) {
  .special-img {
    max-width: 460px;   /* ← PCで少し大きく */
  }
}

/* 中学校のプレゼント　折り返さない スマホは折り返す　便利なcss*/
@media screen and (min-width: 768px) {
  .no-wrap-pc {
    white-space: nowrap;
  }
}

/*高校の繊維製品管理士の文章の上のスペース*/
#comment3 {
  margin-top: 32px;
}

/*特典のピンクの〇*/
.circle-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 130px;              /* 丸の直径 */
  height: 130px;
  background-color: #fdecef; /* ← 通常時の薄ピンク */
  border-radius: 50%;        /* ← 丸にしている正体 */
  text-decoration: none;
  
}

/*PCでマウスを乗せた時だけ色が変わる*/
.circle-link:hover {
  background-color: #f7d6dd; /* 少し濃いピンク */
}

/*スマホだけ　指で押した瞬間に「沈む」演出*/
@media (hover: none) {
  .circle-link:active {
    background-color: #f4c6d4; /* 押した時のピンク */
    transform: translateY(3px) scale(0.96);
    box-shadow: 0 3px 6px rgba(0,0,0,0.25);
  }
}

/*ご意見を中央に*/
.form-wrap {
  width: 100%;
  text-align: center;   /* 中央ぞろえ */
}
/*ご意見　スマホもはみ出さなく*/
@media screen and (max-width: 767px) {
  .form-wrap iframe {
    width: 100%;
    /*height: 1000px; /* 必要なら調整 */
  }
}

/*benefit 特典ページの調整　始まり*/
.cute-title-benefit {
  font-family: 'ヒラギノ丸ゴ Pro', 'Hiragino Maru Gothic Pro', 'Arial', sans-serif; /* 丸みのあるフォント */
  font-size: 2em; /* 少し大きめ */
    text-align: center; /* 中央揃え */
  /*text-shadow: 2px 2px 5px rgba(255,182,193,0.7); /* ふんわり影 */
  /*background: linear-gradient(90deg, #ffe6f0, #ffd1dc); /* グラデーション背景 */
  padding: 15px 20px;
	
  border-radius: 30px; /* 角丸 */
  display: inline-block; /* 背景に沿ってサイズ調整 */
  /*box-shadow: 0 5px 10px rgba(0,0,0,0.1); /* 少し浮いた感じ */
  background: rgba(245, 240, 230, 0.8);/*薄いベージュ*/
  width: auto;
margin: 0 auto;

}

/* 特典　親要素を中央揃え これで文章全部が中央*/
#comment4 {
  text-align: center; /* 子要素を中央揃え */
}

#comment4 ul {
  display: inline-block;   /* 横幅を文字に合わせる */
  text-align: left;        /* リスト内は左揃え */
  list-style-position: inside; /* マーカーを文字と一緒に中央に寄せる */
  padding-left: 0;         /* 左余白をリセット */
  margin-bottom: 30px;
}

.cute-title {
  margin-top: 50px;    /* 上の余白を30pxに */
  margin-bottom: 15px; /* 下の余白はそのまま */
}



.cute-title.higasi-title {
    margin-top: 10px; /* 上の余白を狭く */
    margin-bottom: 15px; /* 下はそのまま */
}

/*リストの場所*/
#comment4 ul {
  margin-left: 1.2em;  /* ← 数値で微調整　右にずれる */
}

/*benefit 特典ページの調整　終わり*/

/*shopinfo 少し丸く*/
#shopinfo dt {
  font-size: 1.1em;
  letter-spacing: 0.08em;
}

/* =========================
   h1 タイトル前のひつじ
========================= */
/*
.cute-title::before {
  content: "";
  width: 32px;
  height: 32px;
  background: url("images/hitsuji-yellow.png") no-repeat center / contain;
  margin-right: 2px;
  display: inline-block;
}
*/

/* =========================
   背景つきタイトル
========================= */
.bg-title {
  display: inline-block;
  margin: 30px auto 16px;
  padding-left: 36px;  /* 星＋余白 */
  padding-right: 36px; /* 同じ量 */
  /* 左側は星分の余白を少なめにして文字を中央に見せる */
  font-size: 22px;
  letter-spacing: 0.12em;
  font-weight: bold;
  text-align: center;

  background: rgba(245, 240, 230, 0.8); /* ベージュ */
  border-radius: 999px;
  position: relative; /* ★追加 */
}


/*h1微調整*/
h1.bg-title {
  font-size: 26px;
}

/* 販売商品のピンクの星（黒い星.png） */
/* 星付き h2 */
#contents .main h2.star-title {
  position: relative;      /* ::before の基準にする */
  padding-left: 28px;      /* 星分の余白 */
}

#contents .main h2.star-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 44%;               /* 星の縦位置 */
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: url("黒い星.png") no-repeat center/contain;
  
  /* 黒い星をピンクに変換 */
  filter:
    brightness(0)
    saturate(100%)
    invert(75%)
    sepia(40%)
    saturate(600%)
    hue-rotate(305deg);
}

.pink-star {
  position: relative;       /* これがないと ::before が親に対して位置決めできない */
  padding-left: 28px;       /* 星の分だけ左余白を確保 */
}



.pink-star::before {
  content: "";
  position: absolute;
  left: 0;
  top: 30%;                  /* 星の縦位置 */
  width: 18px;
  height: 18px;
  background: url("images/黒い星.png") no-repeat center / contain;
  filter: brightness(0) saturate(100%) invert(75%) sepia(40%) saturate(600%) hue-rotate(305deg);
}


/*書き足したら*/
/* =========================
   h2用・星付き帯タイトル
========================= */
.h2-star-title {
  position: relative;       /* 星を絶対配置 */
  display: inline-block;    /* 背景幅を文字に合わせる */
  padding: 8px 28px 8px 36px; /* 上下8px、左は星用に少し広め */
  margin: 30px auto;        /* 上下の間隔＋中央寄せ */
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-align: center;
  line-height: 1.4;
  background: rgba(245, 240, 230, 0.8); /* 薄いベージュ帯 */
  border-radius: 999px;
}

/* 星 */
.h2-star-title::before {
  content: "";
  position: absolute;
  left: 8px;      /* 左端からの位置 */
  top: 50%;        /* 縦中央 */
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: url("黒い星.png") no-repeat center / contain;
  filter: brightness(0) saturate(100%) invert(75%) sepia(40%) saturate(600%) hue-rotate(305deg); /* ピンク星 */
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
  .h2-star-title {
    font-size: 18px;
    padding: 6px 20px 6px 28px; /* 小さい画面でも文字＋星バランス */
  }

  .h2-star-title::before {
    width: 16px;
    height: 16px;
    left: 6px;
  }
}

/*販売商品の修正*/
.bg-title.pink-star {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 85px;
  padding-right: 56px;
  
  line-height: 1.4;/*行の高さ*/
  letter-spacing: 0.08em;/*文字間隔*/
}

.bg-title.pink-star::before {
  left: 30%;/*星の横の位置*/
  transform: translateX(-100%) translateY(+5%); /*縦Yの位置 プラスの値が下になる */
}

/*特典のスマホの文字  この設定なくても変わらない*/
/*@media screen and (max-width: 768px) {
  #comment4 li {
    font-size: 25px;
    line-height: 2.0;
  }
}*/

/*ご意見の文章を中央ぞろえに*/
.opinion-text {
  text-align: center;
  line-height: 1.8; /* 行間を少し読みやすく */
}

/*セットで購入されるとお得になります*/

.set-sale::before,
.set-sale::after {
  content: "⭐";
  margin: 0 8px;
  color: #ff9f1a;
  font-size: 20px;
  /*animation: starBlink 3s infinite alternate; /*星の点滅の速度*/*/
}

/* 点滅アニメーション */
@keyframes starBlink {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

/* ピンクの帯削除
.set-sale {
 display: inline-block;   /* ← 背景を文字幅に */
    margin: 30px auto 20px;   /* 上を少し広めに */
    padding: 10px 32px;      /* 帯を短く */
    font-size: 20px;
    letter-spacing: 0.12em;
    font-weight: 800;
    text-align: center;

    background: rgba(255, 220, 230, 0.85); /* やさしいピンク */
    color: #000;   /* 黒 */

    border-radius: 999px;    /* 完全に丸い帯 */
    position: relative;
}


.set-price {
  margin-top: 12px;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.set-price .price {
  font-size: 28px;
  margin-left: 6px;
}



/* 金額だけさらに強調 */
.set-price .price {
  font-size: 30px;
  margin-left: 6px;
}

 .set-contents {
  line-height: 2;
  margin-bottom: 10px;
}

/* 見出し */
.set-contents-title {
  display: block;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 2px;
}

/* 6種類7点 */
.set-contents-sub {
  display: block;
  font-size: 14px;
  color: #555;
  margin-bottom: 6px;
}

/* 中身リスト */
.set-contents-list {
  display: block;
  font-size: 15px;
  letter-spacing: 0.03em;
}

.set-contents-list {
  display: block;      /* ← 全行に効かせる */
  padding-left: 2em;   /* ← 2字下げ */
  line-height: 1.8;
}

/* スマホだけ強めに */
@media screen and (max-width: 767px) {
  .set-contents-list {
    padding-left: 3em;
  }
}  

/* 元々のセット販売の星を消す */
.set-sale::before,
.set-sale::after {
  content: none; /* ★無効化 */
}

.set-sale.pink-star {
  padding-left: 36px; /* 星用スペース */
  padding-right: 36px;
}

/* set-sale に pink-star を付けた場合 */
.set-sale.pink-star {
  position: relative;           /* ::before を親基準に配置するため必須 */
  padding-left: 36px;           /* 左に星の分の余白 */
  display: inline-block;        /* 幅を文字に合わせる */
  border-radius: 999px;
  font-weight: 800;
  text-align: left;             /* 星と文章を横並びに */
  margin: 40px auto 20px;
  text-align: center;
}

/* 左の星 */
.set-sale.pink-star::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;                     /* 縦中央 */
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  
  background: url("images/goldstar.png") no-repeat center/contain;
  filter: none; /* ← これがポイント */
}

/* 右の星 */
.set-sale.pink-star::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
 
 background: url("images/goldstar.png") no-repeat center/contain;
 filter: none; /* ← これも */
}

/* 冬セットの価格帯の間隔調整 */
.set-sale-wrap .set-price {
    margin-top: 10px;       /* 上の余白は不要なら0に */
　margin-bottom: 10px; /* 下の余白を10pxに調整 */
}

.set-sale-wrap .set-sale {
    margin-top: 0;       /* 上の余白を調整 */
    margin-bottom: 20px; /* 下の余白を調整 */
}



/* 東高校　冬セットの下の説明の太字・強調用 */
.highlight {
  font-weight: bold;
  /*color: #d32f2f;  赤系でお得感を強調、必要なければ削除可 */
}

/* 注釈の上にスペース */
.note {
  margin-top: 1em; /* 上に余白を1em分 */
  font-size: 0.9em; /* 少し小さめにして注釈らしく */
  color: #555; /* 柔らかいグレー */
}

/*最後の文章*/
.under {
  text-align: center;
  margin: 0 auto;
}


/* スマホだけ電話とLINE固定 */
@media screen and (max-width: 767px) {

  .fixed-contact {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    display: flex;
    z-index: 9999;
    border-top: 1px solid #ddd;
  }

  .fixed-contact a {
    flex: 1;
    text-align: center;
    padding: 14px;
    font-weight: bold;
    text-decoration: none;
  }

  .fixed-tel {
    background: #e6f5e9;
    color: #000;
  }

  /* ★ここが重要 */
  .fixed-line,
  .fixed-line a {
    background: #06c755;
    color: #fff;
  }
}

/* 高校頁のタイトルの改行をきれいにする */
.cute-title {
  word-break: keep-all;
  line-break: strict;
}

/* 高校ページ　スマホだけ本文を左揃え */
@media screen and (max-width: 767px) {

  .lead,
  .set-sale,
  .price-text,
  .note,
  .quality,
  .difference,
  .after-support,
  .anshin,
  .cta {
    text-align: left;
    line-height: 1.8;
  }

}

/* 信頼バッジ */
.trust-badge{
  display:inline-block;
  margin:14px auto 20px;
  padding:8px 18px;

  background:#1e3a5f; /* ネイビー */
  color:#fff;

  font-size:0.95rem;
  font-weight:bold;
  letter-spacing:0.05em;

  border-radius:999px;
  text-align:center;
}

/* スマホで少し小さく */
@media (max-width:768px){
  .trust-badge{
    font-size:0.85rem;
    padding:6px 14px;
  }
}

/*袖裾の文字を目立たせる*/
.free {
  color: #d32f68;
  font-weight: bold;
}


/* 左・右・上に出る羊を全部停止 */
h1.cute-title::before{
  content:none !important;
  display:none !important;
}



/*東高校から近く*/
.near-school {
  text-align: center;
  font-size: 1.1em;
  color: #ff6600; /* アクセントカラー オレンジ*/
  margin-top: 8px;
  font-weight: bold;
}

.near-school-cta {
  text-align: center;
  font-size: 1em;
  color: #ff6600;
  margin-top: 6px;
  /*font-style: italic;*/
}

/* =====h3 半田東高校の制服はおまかせ　 羊＋文字（横並び＋2行OK） ===== */

/* =========================
   sp-catch 羊（h1.cute-title と同じ見た目）
========================= */
.sp-catch {
  display: inline-flex;        /* 羊＋文字を横並びに */
  align-items: flex-start;     /* 羊が上にズレない */
  justify-content: center;     /* 中央揃え */
  flex-wrap: wrap;             /* 文字だけ折り返す */
  max-width: 90%;              /* スマホで自然に2行 */
  margin: 20px auto;
  line-height: 1.4;
  word-break: keep-all;
  text-align: center;
  padding: 0;
}

.sp-catch::before {
  content: "";
  display: inline-block;       /* ブロックではなく inline-block */
  width: 52px;                 /* 羊の大きさ */
  height: 52px;
  margin-right: 6px;           /* 文字に近づける */
  flex-shrink: 0;              /* 縮まない */
  background: url("images/hitsuji-yellow.png") no-repeat center/contain;

  /* h1.cute-title::after と同じ filter（色・影） */
  filter:
    brightness(0.9)
    saturate(1.5)
    contrast(1.1)
    drop-shadow(0 0 3px rgba(255,210,80,0.8))
    drop-shadow(0 0 6px rgba(255,210,80,0.5));
}

/* スマホでも2行に折り返しOK */
@media screen and (max-width: 767px) {
  .sp-catch {
    max-width: 95%;
  }
}

/* sp-catch と trust-badge を縦並びにする */
.sp-catch,
.trust-badge {
   display: block;       /* ブロック化して縦に並べる */
  text-align: center;   /* 中央揃え */
  margin: 0 auto 10px;  /* 下に少し余白 */
}

.trust-badge {
  display: inline-block;   /* 文字の幅に合わせる */
}

/* ===== 価格のブロック ===== */
.set-price{
  display: inline-block;
  padding: 14px 60px;  /*　紺の帯の上下横の幅　*/

  background: #0b3a6f;   /* ネイビー（信頼色） */
  color: #fff;
  font-weight: bold;
  text-align: center;

  border-radius: 14px; /*角丸*/
}

/*----69500円----*/
.price-title{
  font-size:17px;
    margin-bottom:10px;
}

.price-number{
  font-size:31px;
  font-weight:700;
  letter-spacing:1px;
}

.price-yen{
  font-size:22px;
  margin-left:4px;
}

.price-note{
  font-size:14px;
  margin-top:10px;
}


/*69,500   ← 太く
円       ← 細く
税込     ← さらに細く*/
.price-number{
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700; /* Bold */
}

.price-yen,
.price-note{
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}

/*数字を少し横に広げる*/
.price-number{
  letter-spacing: 0.05em;
}　

/*ネイビーに“うっすら立体感”*/
.set-price{
  display: inline-block;
  padding: 18px 64px;

  background: linear-gradient(
    180deg,
    #134a8a 0%,
    #0b3a6f 60%,
    #082e57 100%
  );

  color:#fff;
  border-radius:16px;

  box-shadow:
    0 6px 14px rgba(0,0,0,0.25),   /* 外側影 */
    inset 0 1px 0 rgba(255,255,255,0.15); /* 上に光 */

  text-align:center;
}

.price-number{
  font-size: 34px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/*プレート風に*/
.set-price{
  border: 2px solid rgba(255,255,255,0.4);
}


/*---長年～　--*/
.price-reason{
  font-size: 0.9rem;
  color: #555;
  margin-top: 8px;
  text-align: center;
}

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

  /* 文章は左揃え */
.cute-title, 
.near-school.
h3,
.lead,
  .sp-price-sub,
  .set-sale,
  .note {
    text-align: left;
    line-height: 1.8;
  }

  /* 価格ブロックは中央 */
  .set-price{
    display: block;
    text-align: center;
    margin: 20px auto;
  }
}
/* ===== スマホだけ全部左揃え ===== */
@media screen and (max-width: 767px) {

  h3,
  .sp-price-sub,
  .set-sale,
  .price-reason,
  .note,
  .anshin,
  .cta-box,
  .near-school-cta,
  .set-price 
  .benefit-sub {
    text-align: left;
  }


/* 価格ブロックだけ中央 */

.set-price{
    display: block;
    text-align: center;
    margin: 24px auto;   /* 少し余白を増やすと目立つ */
  }
/* 文章は左揃えのまま */
#comment2 ul,
#comment3 ul {
  text-align: left;
}
}

/*h3の文章の上下の余白*/
.h3-tight{
  margin-top: 32px;
  margin-bottom: 0px; 
}

.quality{
  margin-top: 1px;
}

.difference{
  margin-top: 1px;
}

 .after-support{
  margin-top: 1px;
}

.anshin{
  margin-top: 1px;
}

.bg-title {
  display: block;          /* ここを変更 */
  width: fit-content;      /* 文字幅に合わせる */
  margin: 30px auto 16px;  /* 中央に */
}

/*リストの前の★を消す*/
#comment3 li.set-contents-list::before {
  content: none;
}

/* デフォルト（スマホ）　ヘッダーの構造をスマホ基準にする */
.header1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* PCだけ横並び */
@media screen and (min-width: 768px) {
  .header1 {
    flex-direction: row;
    justify-content: center;   /* ← ここが重要 　中央になる*/
    align-items: center;
    gap: 40px;                 /* ロゴと電話の間 */
    padding: 20px 0;
  }
}

.telBox {
  margin: 0;
}

/*ロゴと電話の縦ラインをそろえる*/
.logo img {
  display: block;
}

/*ヘッダーの営業時間*/
.shop-time{
text-align:center;
font-size:1.1em;
margin-top:10px;
}

/*お気軽にどうぞの文章*/
.lead-text{
  text-align:center;
  font-size:1.1em;
  margin-top:10px;
}

/*特典リスト　アイコン　空色背景*/
.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.benefit-item {
    display: flex;
    align-items: center;
    background-color: #f0f8ff; /* 背景色 */
    padding: 12px 15px;
    margin-bottom: 10px;
    border-radius: 10px;
    font-size: 1.1em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.benefit-item .icon {
    margin-right: 10px; /* アイコンと文字の間隔 */
    font-size: 1.3em;
}

/*特典　当店だけの限定特典・サービスの上の余白*/
.cute-title-benefit {
  margin-top: 50px; /* 上に50pxの余白 */
}

/* 特典ページへの誘導ブロック */

.benefit-promo {
  text-align: center; /* ページ中央に配置 */
  margin: 20px 0;
}

.benefit-box {
  display: inline-block;        /* 文字幅に合わせる */
  background-color: #e0f7fa;   /* 水色背景 */
  padding: 15px 25px;          /* 上下左右の余白 */
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  text-align: center;           /* 中のテキストも中央寄せ */
}

.benefit-title {
  margin-top: 40px; /* 上に40pxの余白 */
  font-size: 1.3em;
  font-weight: bold;
  color: #00796b;
  margin-bottom: 5px;
}

.benefit-sub {
  font-size: 1em;
  margin-top: 8px;/*上の余白*/
  margin-bottom: 12px;/*下の余白*/
  line-height: 1.2;
}

.benefit-btn {
  display: inline-block;
  background-color: #0B3A6F;
  color: #fff;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 1em;
  transition: background-color 0.3s;
}


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

  .benefit-sub {
    text-align: left;/*スマホだけ左揃え*/
   }
}


/*はじめての方へ　画像*/

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

.first-title,
.first-sub
{
    text-align: left;/*スマホだけ左揃え*/
   }
}


.first-visit{
text-align:center;
margin:30px 0;
}

.first-title{
font-size:1.17em;
margin-bottom:2px;
}

.first-sub{
color:#666;
margin-bottom:20px;
}


.first-photo{
display:flex;               /*写真を横並び*/
gap:20px;                  /*写真と写真の間の余白*/
align-items:flex-end; /*下揃え*/
flex-wrap:wrap;
justify-content:center; /*中央*/
padding-bottom:60px; /*下の余白*/
}

.photo-box1{
max-width:420px;
}

.photo-box2{
max-width:380px;
}

.photo-box1 img,
.photo-box2 img{
width:100%;
border-radius:8px;
}

/*内金のお願い*/
.deposit-note{
font-size:14px;
color:#666;
margin-top:8px;
}

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

.deposit-note
{
    text-align: left;/*スマホだけ左揃え*/
   }
}

/*ご兄弟で来てくれる文章*/
.family-note{
font-size:0.9em;
color:#666;
}

/*一人ずつ丁寧に採寸　文字大きく*/
.difference strong{
font-size:1.1em;
}

/*ブレザーが並んでいる写真*/
.highschool-blazer-wrap {
  text-align: center;  /* PCで中央寄せ用 */
  margin: 40px 0;      /* 上下の余白 */
}

.highschool-blazer {
  display: block;
  width: 100%;         /* 画面幅いっぱいに広げる */
  max-width: 500px;    /* PCでの最大幅 */
  height: auto;        /* 縦横比を保持 */
  margin: 0 auto;      /* 中央寄せ */
}

/*実物がある*/

.try-box {
  max-width: 700px;
  margin: 30px auto 10px;
  padding: 18px 24px;

  background: #fffaf4;

  border: 1px solid #f2e2cc;        /* 枠 */
  border-left: 5px solid #f2e2cc;   /* ←同じ色に統一 */

  border-radius: 10px;

  text-align: center;
  line-height: 1.8;
  font-weight: 500;

  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.try-box p {
  margin: 0;
}

/* スマホだけ左寄せ */
@media screen and (max-width: 767px) {
  .try-box {
    text-align: left;
    padding: 18px 24px;
    line-height: 1.9;
  }
}

.try-lead {
  font-weight: 700;
  font-size: 1.05em;
  display: inline-block;
  margin-bottom: 6px;
}

.try-lead::before {
  content: "▶ ";
  color: #e89ab0;
}