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

/* ===== ヘッダー ===== */
header {
  padding: 20px 0;
}

header .headerContent {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}



/* ===== スライダー ===== */
.slider {
  max-width: 1000px;
  margin: 20px auto;
  text-align: center;
}

.slider img {
  margin: 0 auto;
}

/* ===== 丸バナー ===== */
.banners {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 40px auto;
}

.banners img {
  margin: 0 auto;
}


/* ==== 丸アイコン：スマホ押下（最終） ==== */
@media (hover: none) {
  .banaers a.circle-link:active {
    background-color: #f4ccd9;
    transform: translateY(3px) scale(0.96);
    box-shadow: 0 3px 6px rgba(0,0,0,0.25);
  }
}

/* =====質問　Q&A =====*/
.faq-preview img {
  width: 220px;   /* 好きなサイズに変更 */
  height: auto;   /* 縦横比を保つ */
  text-align: center;
}

.faq-preview img {
  border-radius: 15px;　/*角を丸くする*/
  overflow: hidden;　/*はみ出し隠す*/
}

.faq-preview img {
  transition: 0.4s;
}

.faq-preview img:hover {
  filter: contrast(1.3);　/*色をはっきり*/
}

.faq-preview img:active {
  filter: contrast(1.3);
}

/* スマホ用 */
@media screen and (max-width: 768px) {
  .faq-preview img {
    width: 170px;  /* スマホでは小さく */
  }
}

/* ===== ご意見 ===== */
.opinion {
  text-align: center;
  margin: 40px auto;
}

.opinion h2 {
  text-align: center;
}

/* ===== 店舗情報 ===== */
#shopinfo {
  text-align: center;
  margin: 40px auto;
}

/* 電話ボタン */
.telBox {
  margin: 20px auto;
}

.telBox a {
  display: inline-block;
  padding: 12px 20px;
  background: #e6f4e8;
  color: #000;
  text-decoration: none;
  font-weight: bold;
  border-radius: 30px;
}



/* ===== 地図 ===== */
#map,
#mymap {
  max-width: 1000px;
  margin: 40px auto;
  text-align: center;
}

/* ===== 写真 ===== */
.photoWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 40px auto;
}

/* ===== フッター ===== */
footer {
  text-align: center;
  margin: 40px 0;
}

/* ヘッダーロゴ */
.logo img {
  max-width: 300px;
  margin: 20px auto;
}

/* スライダー */
.slider {
  margin: 20px auto;
}

/* 丸バナー */
.banaers {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* ご意見 */
.opinion h2 {
  margin: 40px 0 20px;
}

/* ご意見・ご要望：完全隔離 */
.opinion {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  overflow: hidden;
}

.opinion h2 {
  margin: 30px auto 20px;
  padding: 0;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-align: center;

  /* ← スマホはみ出し完全防止 */
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media screen and (max-width: 767px) {
  .opinion h2 {
    letter-spacing: 0.05em;
  }
}

#opinionbox {
  width: 100%;
  text-align: center;
}

#opinionbox img {
  display: block;
  margin: 0 auto;
  max-width: 80%;
  height: auto;
}

/* ===== ご意見・ご要望 デザイン調整 ===== */
.opinion {
  padding: 20px 0 60px;
}

.opinion h2 {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.75;
  margin: 40px auto 24px;
  text-align: center;
  color: #222;
}

@media screen and (max-width: 767px) {
  .opinion h2 {
    font-size: 16px;
    letter-spacing: 0.06em;
  }
}
/*もう少しかわいく*/
.opinion h2 {
  font-family: "Hiragino Maru Gothic ProN", "メイリオ", sans-serif;
}


/*中学校、高校、特典、ご意見*/

/* =========================
   全体リセット＆基本
========================= */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  line-height: 1.7;
  color: #000;
}

/* 画像は必ずはみ出さない */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================
   ヘッダー（横並び・中央）
========================= */
.header1 {
  width: 100%;
}

.header1 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin: 20px 0;
}

.header1 img {
  height: auto;
  max-height: 120px;
}

/* =========================
   メインコンテンツ共通
========================= */
#contents {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}

.main {
  text-align: center;
}

/* 見出し */
#contents .main h2 {
  font-size: 32px;
  letter-spacing: 0.15em;
  margin: 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}



/* =========================
   画像（切れ防止）
========================= */
#graphic {
  margin: 20px auto;
}

#graphic img {
  width: 100%;
  height: auto;
}




/* =========================
   黒い星リスト（中央）
========================= */
#comment1 {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 16px;
}

#comment1 ul {
  list-style: none;
  padding: 0;
  max-width: 650px;   /* ← 幅の調整　文章が真ん中へ　 */
  margin: 0 auto;     /* ← 星ごと中央へ */

}

#comment1 li {
  position: relative;
  padding-left: 28px;
  margin: 12px 0;
  text-align: left;
}

#comment1 li::before {
  content: "";
  position: absolute;
  left: 0;
  
  width: 18px;
  height: 18px;
  background: url("images/黒い星.png") no-repeat center/contain;
}


/* =========================
   電話番号（ボタン風）
========================= */

/* =========================
   SHOP INFO
========================= */
#shopinfo {
  text-align: center;
  margin: 40px auto;
  padding: 0 16px;
}

#shopinfo dt {
  font-weight: bold;
  margin-bottom: 10px;
}

/* =========================
   マップ・写真
========================= */
#map,
#mymap,
.photoWrap {
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 16px;
}

.photoWrap {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

/* =========================
   スマホ最適化
========================= */
@media screen and (max-width: 767px) {

  #contents .main h2 {
    font-size: 22px;
    letter-spacing: 0.1em;
  }

  .header1 h1 {
    gap: 16px;
  }

  #comment1 {
    margin: 30px auto;
  }
}

/* =========================
   電話番号（ボタン風）
========================= */

.telBox {
  text-align: center;
  margin: 20px 0;
}

.tel-btn a {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 18px;
  background: #e6f5e9;                  /* 薄い緑 */
  border: none;                          /* 縁なし */
  border-radius: 30px;

  color: #1f5e3b;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;

  /* 初期のほんのり立体感 */
  box-shadow: 0 2px 3px rgba(0,0,0,0.08);
  transform: translateY(0);
  transition: transform 0.1s, box-shadow 0.1s;
  cursor: pointer;
}

/* ホバー時：少し浮く */
.tel-btn a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* クリック時：押し込む */
.tel-btn a:active {
  transform: translateY(2px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* アイコンサイズ */
.tel-icon {
  font-size: 20px;
}

/*スマホの押しボタン風*/
@media screen and (max-width: 768px) {

  /* 何もしなくても浮いている状態 */
  .tel-btn a {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.2);
  }

  /* 押した瞬間にしっかり沈む */
  .tel-btn a:active {
    transform: translateY(2px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  }
}

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

  .tel-btn a {
    transition:
      transform 0.08s ease-in,
      box-shadow 0.08s ease-in;
  }

  .tel-btn a:active {
    transition:
      transform 0.18s ease-out,
      box-shadow 0.18s ease-out;
  }
}



/* ==== 丸アイコン：スマホ押下（最終） ==== */
@media (hover: none) {
  .banaers a.circle-link:active {
    background-color: #f4ccd9;
    transform: translateY(3px) scale(0.96);
    box-shadow: 0 3px 6px rgba(0,0,0,0.25);
  }
}

/*タップ判定が必ず a に来るようにして、スマホで色が変わるように*/
.circle-link img {
  pointer-events: none; /* ← 超重要 */
}

/*iPhoneの謎の青フラッシュ防止*/
.circle-link {
  -webkit-tap-highlight-color: transparent; /* 青いハイライト消す */
}
/* =========================
   上に戻るボタン（gototop）
========================= */

a.gototop {
  background-color: #276F4A;
  bottom: 2%;
  color: #fff;
  display: block;        /* none にすると非表示 */
  font-size: 2rem;
  height: 3rem;
  line-height: 3.8rem;
  position: fixed;
  right: 2%;
  text-align: center;
  text-decoration: none;
  width: 3rem;
}
/*gotoptoふわっと*/
.gototop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.gototop.show {
  opacity: 1;
  pointer-events: auto;
}

/* スマホだけ位置調整 */
@media screen and (max-width: 768px) {
  a.gototop {
    bottom: 80px;   /* ← ここが重要 */
    right: 16px;
  }
}
/*タップ範囲は広いが、見た目は控えめ*/
a.gototop {
  padding: 8px; /* 見えない余白 */
}
/*押せるけど「邪魔しない」サイズ感*/
@media screen and (max-width: 768px) {
  a.gototop {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    line-height: 48px;
  }
}

html, body {
  overflow-x: hidden;
}

/* ===== 店舗情報  shopinfo 縦ラインをそろえる===== */
#shopinfo {
  text-align: center;
  margin: 40px auto;
  padding: 0 16px;
}

/* dl自体を中央に置き、芯を作る */
#shopinfo dl {
  max-width: 360px;   /* ← ここが縦ラインの芯 */
  margin: 0 auto;
}

/* 見出し */
#shopinfo dt {
  font-weight: bold;
  margin-bottom: 10px;
}

/* 内容 */
#shopinfo dd {
  margin: 0;          /* ← ddのデフォルト余白を消す（重要） */
}

/*一応電話も*/
.telBox {
  margin: 20px auto;
  text-align: center;
}

/* =========================
   h1 タイトル前のひつじ（最終・確定）
========================= */
.cute-title {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cute-title::before {
  content: "";
  width: 52px;
  height: 52px;
  background: url("images/hitsuji-yellow.png") no-repeat center / contain;
  margin-right: 8px;
  flex-shrink: 0;
  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));
}
/*後から付け足した「クリック」*/
.click-text {
  margin-top: 10px;

  font-family:
    "Hiragino Maru Gothic ProN",
    "Hiragino Maru Gothic Pro",
    "メイリオ",
    sans-serif;

  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2em;   /* ← 丸さMAX */
  color: #000;
}

/*サークルの下に配置*/
.circle-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative; /* ← 基準にする */
  
}

/* クリック文字（丸の中央） */
/*.click-text{
  position: absolute;
  /*top: 85%; 100にすると下の方*/
  left: 50%;
  
  transform: translateX(-50%); /* X軸だけ中央に調整  真ん中に配置*/
  margin-top: 8px; /* 画像との間隔を調整 */
  text-align: center;

  margin: 0;
 
}*/

.click-text {
  position: static;       /* これでFlexに従う */
  margin-top: 8px;        /* 丸の下に少し余白 */
  font-size: 15px;
  font-weight: 700;
  color: #000;
  letter-spacing: 0.2em;
}

/*タップした瞬間濃く*/
 .circle-link:active .click-text {
    color: #333;   /* 少しだけ濃く */
  }

/* ヘッダー内を横並びに */
.header-flex {
  display: flex;
  align-items: center;   /* 縦方向中央揃え */
  justify-content: space-between; /* 左右に配置 */
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px 20px;
}


/* 電話番号の装飾 */
.tel-btn a {
  font-size: 1.2rem;
  color: #000;
  text-decoration: none;
}

.headerContent {
  display: flex;               /* 横並びにする */
  justify-content: space-between; /* 左右に振り分け */
  align-items: center;         /* 縦方向中央揃え */
  max-width: 1000px;
  margin: 0 auto;
  padding: 0px 20px;          /* 必要に応じて余白 */
}


/* トップロゴ画像のサイズ調整 　これが効いてる*/
.logo img {
  max-height: 170px; /* お好みで調整 */
  height: auto;
}

/*丸アイコン下のPR*/
.center-text {
   text-align: center;
  margin: 40px 0;
  font-size: 1.1rem;
  line-height: 1.8;
  font-family: "M PLUS Rounded 1c", sans-serif;
  letter-spacing: 0.12em;
}


/*トップページ全体の文字指定*/
body {
  font-family: "M PLUS Rounded 1c", sans-serif;
}

/*トップの半田東高校へのリンクの下の余白*/
.lead {
    margin-bottom: 30px; /* 下に30pxの余白を追加 */
}

.btn-link a {
  display: inline-block;          /* ボタンらしくする */
  background-color: #d6336c;  /* 濃いピンク 　薄いピンク#fde6ec;   オレンジ色#f05a28; */
  color: #ffffff;                 /* 文字色を白に */
  padding: 12px 24px;             /* 上下12px・左右24pxの余白 */
  text-decoration: none;          /* 下線を消す */
  border-radius: 8px;             /* 角丸 */
  font-weight: bold;              /* 文字を太く */
  transition: background-color 0.3s ease;  /* ホバー時の変化 */
}

.btn-link a:hover {
  background-color: #b02d5a;  /* ホバーで少し濃く 　#d14c21; ホバーで濃いオレンジに */
}



/*トップの電話ボックスを横長に戻す*/
.telBox {
  white-space: nowrap;
}

/* LINE専用ボタン */
.lineBox a {
  display: inline-block;
  background-color: #06c755;   /* LINEグリーン */
  color: #ffffff;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1.2em;
  transition: background-color 0.3s ease;
}

.lineBox a:hover {
  background-color: #049b44;   /* 少し濃い緑 */
}

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


/*トップページ　文章スマホ左寄せ*/
@media screen and (max-width: 767px) {

  .lead,
  .center-text
  {
    text-align: left;
    line-height: 1.8;
  }

}

/* スマホだけ電話と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;
  }
}



/* スマホだけヘッダーを縦並び */
@media screen and (max-width: 767px) {

  .headerContent {
    display: flex;
    flex-direction: column;   /* ← 縦並び */
    align-items: center;      /* ← 中央揃え */
  }

  }

/*下部のブランドストーリー*/
.brand-message{
  text-align: center;     /* PCは中央 */
  font-size: 1.1em;
  margin: 40px auto;
  max-width: 900px;
  line-height: 1.8;
font-weight: 500;/*少し軽く*/
}

/*h2 スマホでは左寄せ*/
@media screen and (max-width: 767px) {

  .section-title{
    text-align:left;
  }

}

/*h2の字の大きさ*/
.section-title{
  font-size:1.3em;
  font-weight:bold;
}

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


/*トップの修正*/
.top-header {
  background: #fff;
  padding: 10px 20px;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

/*学生服専門店　みずのや*/
.main-title { 
  font-size: 2.9em;  /* 文字を大きく */
  text-align: center;
  margin: 0;
}

@media screen and (max-width: 767px) {
  .main-title {
    font-size: 1.6em; /* スマホでは少し小さく */
  }
}

.tel-box a {
  font-weight: bold;
  color: #000;
  text-decoration: none;
}

/* PC用ロゴ 　大きさ*/
.logo img {
  max-height: 120px;  /* ここを大きく */
  height: auto;
}

/* スマホ用ロゴ */
@media screen and (max-width: 767px) {
  .logo img {
    max-height: 80px;  /* スマホでは少し小さめ */
  }
}

/*ロゴ、みずのや、電話の位置*/
.top-header {
  padding: 10px 80px; /* 上下 左右。左右のパディングを広げる */
}

/*スマホで縦並び*/
@media screen and (max-width: 767px) {
  .header-inner {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    left: 0; /* スマホでは中央に */
  }
}

/*スマホで電話が折り返さないように*/
#telBox a,
.shop-time  {
  white-space: nowrap;   /* ← 折り返さない */
  display: inline-block; /* 横幅に応じて広がるように */
}



/* スマホ用調整 */
@media screen and (max-width: 767px) {
  .header-inner {
    flex-direction: column; /* 縦並び */
    align-items: center;    /* 中央揃え */
    gap: 8px;
    padding: 10px 20px;     /* 左右余白は狭く */
  }

  .main-title {
    font-size: 1.6em;
    margin: 0;             /* スマホは隙間なし */
  }
}


@media screen and (max-width: 767px) {
  .header-inner {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    left: 0; /* スマホでは中央に */
  }
}


.header-inner {
  display: flex;
  align-items: center;
  justify-content: center; /* 中央揃え */
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 80px;
  gap: 20px;
  left: 30px;   /* ← 全体を右にずらす */
}

/* 左右を同じ幅に固定 */
.logo,
#telBox {
  flex: 0 0 150px;  /* 幅を固定 */
  text-align: center;
}

/* H1を真ん中に伸ばす */
.main-title {
  flex: 1;
  text-align: center;
  font-size: 2.9em;
  margin: 0;
}

.top-header {
  padding: 10px 80px; /* 上下 10px、左右 80pxの余白 */
}


/* PC用：横並び＋右に少しずらす */
@media screen and (min-width: 768px) {
  .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 80px;
    gap: 20px;
    position: relative;
    left: 48px;  /* PCだけ右にずらす */
  }
}

/* スマホ用：縦並び・中央揃え */
@media screen and (max-width: 767px) {
  .header-inner {
    flex-direction: column; /* 縦並び */
    align-items: center;    /* 中央揃え */
    gap: 8px;
    left: 0;                /* 左右中央 */
    padding: 10px 20px;     /* 左右余白は狭く */
  }

  .logo img {
    max-height: 80px;       /* スマホでは少し小さめ */
  }

  .main-title {
    font-size: 1.6em;       /* スマホで少し小さく */
    margin: 0;
    text-align: center;     /* 中央揃え */
  }

  #telBox a {
    white-space: nowrap;    /* 折り返さない */
  }
}

@media screen and (max-width: 767px) {
  .main-title {
    font-size: 1.6em;       /* 文字サイズ調整済み */
    margin: 0;
    text-align: center;     /* 中央揃え */
    white-space: nowrap;    /* ← 1行に強制 */
  }
}