/* ==========================================================================
   等身大パネル入稿ガイド 共通スタイル
   対象：info-2-sozai.php（等身大パネルの入稿ガイド）
   目的：セクション枠、カード、画像表現、表の補足、アコーディオン等の見た目を定義
   ========================================================================== */


/* ========== 0. トークン（色・影など） ==================================== */
/* 各セクションの帯色・影など。全セクションで参照（.section-block 系） */
:root{
  --sec-bg: #fff;
  --sec-alt: #f8faff;           /* 偶数セクションの薄い色帯 */
  --sec-bd: #e5e7eb;
  --sec-head-1: #1E3A8A;        /* 見出しグラデ開始 */
  --sec-head-2: #5865f2;        /* 見出しグラデ終端 */
  --sec-shadow: 0 8px 22px rgba(0,0,0,.08);
}


/* ========== 1. セクション枠（各 h2 セクションのカード化） ================ */
/* .section-block：本文中の「写真データでの入稿」「通常等身大」「顔抜き」等の大枠 */
.section-block{
  position: relative;
  background: var(--sec-bg);
  border: 1px solid #aaaeb6;
  border-radius: 16px;
  box-shadow: var(--sec-shadow);
  padding: 1.2rem 1.2rem 1.25rem;
  margin: 2.2rem 0;             /* セクション間の一定マージン */
  scroll-margin-top: 90px;      /* 固定ヘッダー等がある場合のアンカーずれ対策 */
  overflow: hidden;
  margin-bottom:30px;
}

/* 偶数番目セクションの背景変化（読みのリズム付け） */
.section-block:nth-of-type(even){
  background: var(--sec-alt);
}

/* .section-head：セクション内ヘッダー帯（h2を内包） */
.section-head{
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: -1.2rem -1.2rem 1rem; /* 枠いっぱいに広げる */
  padding: .9rem 1.2rem;
  background: linear-gradient(90deg, var(--sec-head-1), var(--sec-head-2));
  color: #fff;
}

/* 既存の .page-content h2 の装飾を打ち消し、この帯内で最適化 */
.page-content .section-head h2{
  all: unset;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.4;
}
.page-content .section-head h2::after{ display:none!important; }

/* 見出し左の丸アイコン */
.sec-icon{
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  font-size: 1rem;
}

/* セクション本文領域の上マージン */
.section-body{ padding-top: .25rem; }

/* セクション下端の薄い仕切りライン */
.section-block::after{
  content: "";
  display: block;
  height: 8px;
  margin: .9rem -1.2rem -1.2rem;
  background: linear-gradient(90deg, rgba(88,101,242,.15), rgba(30,58,138,.15));
}

/* モバイル微調整（カードの丸み・余白縮小） */
@media (max-width: 768px){
  .section-block{ border-radius: 14px; padding: .9rem .9rem 1rem;  margin:0 -10px 30px -10px; }
  .section-head{ margin: -.9rem -.9rem .8rem; padding: .75rem .9rem; }
  .page-content .section-head h2{ font-size: 1.05rem; }
}


/* ========== 2. イントロのカードリンク（目次下の4カード） ================ */
/* .point-item.point-link：クリック可能なカード（通常/顔抜き/ビジタッチ/アクリル） */
.point-item.point-link{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:.9rem 1rem;
  border:1px solid #e5e7eb;
  border-radius:12px;
  text-decoration:none;
  color:inherit;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  cursor:pointer;
  margin-bottom:.75rem; /* カード間の余白 */
}

/* 偶数セクション内でもカードは白で維持 */
.section-block:nth-of-type(even) .point-item.point-link{ background:#fff; }

/* hover/focus 状態（浮き上がり） */
.point-item.point-link:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  border-color:#cfd7ff;
  background:#f8faff;
}
.point-item.point-link:focus-visible{
  outline:3px solid #8ea2ff;
  outline-offset:2px;
  border-color:#8ea2ff;
}

/* カード左側の丸アイコン */
.point-item.point-link .point-icon{
  flex:0 0 auto;
  width:28px; height:28px;
  display:grid; place-items:center;
  border-radius:999px;
  background:#4CAF50;
  font-size:1rem;
}

/* カード内の本文色（可読性のためやや濃いめ） */
.point-text p { color: #303030; }


/* ========== 3. セクション直下のメインイメージ ============================= */
/* .plan-description img：各セクション冒頭の説明用画像 */
.plan-description img {
  width: auto;
  max-width: 500px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  max-height: 400px;
  /* 装飾 */
  border-radius: 12px;                 /* 角丸 */
  box-shadow: 0 6px 18px rgba(0,0,0,0.15); /* ドロップシャドウ */
}
@media screen and (max-width: 768px) {
  .plan-description img { max-width: 100%; }
}

/* カード（.point-item）内に配置される小さめの .plan-description 画像 */
.point-item .plan-description { margin: 0.5rem 0; text-align: center; }
.point-item .plan-description img {
  width: 100%;
  max-width: 230px;                   /* カード内の最大幅 */
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  object-fit: contain;
}
@media (max-width: 767px) {
  .point-item .plan-description img{
    max-width: 100%;
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  }
}


/* ========== 4. 画像＋テキストの2カラム（#photo-data の説明部） ========= */
/* 写真入稿セクションの本文ブロック（画像とテキストの横並び） */
.content-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.text-content { font-size: 1rem; flex: 1; }

/* 右側：画像カラム（縦積み） */
.image-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 0.6;
}
.image-content img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.45);
}
.image-content figcaption{
  text-align: center;
  font-size: 0.9rem;
  color: #555;
  margin-top: 5px;
}
/* 画像ブロックの最大幅（図版） */
figure{ max-width:400px; }

/* タブレット以下で縦並びに切替／間隔調整 */
@media (max-width: 980px) {
  .content-container { flex-direction: column; }
  .image-content { order: 0; margin: 0 auto; }
  .content-container{ gap: 20px; }
}





/* ========== 6. 表まわり（入稿基本仕様テーブルの補足画像など） ========= */
/* 補足画像（各テーブル内の .item_image） */
.table-wrap table td .item_image{
  display: inline-block;
  width: auto;             /* 元比率を維持 */
  max-width: 120px;        /* 横幅の上限 */
  max-height: 64px;        /* 縦の上限 */
  height: auto;
  object-fit: contain;     /* 画像の切れ防止 */
  margin: .45rem auto 0;   /* テキスト下に少し空けて中央寄せ */
  border-radius: 6px;      /* ほんのり角丸 */
  box-shadow: 0 2px 6px rgba(0,0,0,.06); /* うっすら影 */
  margin-right: 10px;
}

/* テーブル内の箇条書き・補足の文字サイズ */
.table-wrap table ul { font-size: small; }
.table-wrap table .small { font-size: 12px; color:#515151; }

/* 表内注記の色分け（「通常と同様」「特有」） */
p.small-same   { font-size: 15px; color: #5050ff; } /* 同様 */
p.small-differ { font-size: 15px; color: #009f4c; } /* 相違/特有 */

/* 画像が多いセルでも行高が暴れないように */
.table-wrap table td{ line-height: 1.5; }

/* モバイル時は補足画像をさらにコンパクトに */
@media (max-width: 768px){
  .table-wrap table td .item_image{
    max-width: 96px;
    max-height: 56px;
    margin-top: .35rem;
  }
}


/* ========== 7. 写真入稿セクションのテキストボックス類 =================== */
/* 注意喚起（赤文） */
p.nega {
  color: #ff2e2e;
  font-weight: 600;
  font-size: 13px;
}

/* 解説テキスト（黒・やや太め）
.cutline-service-text{
  color:black;
  font-weight: 500;
  font-family: sans-serif;
  font-size:12px;
} */

/* #photo-data セクション内のリスト体裁（読みやすさ優先） */
#photo-data li{
  font-size: 13px;
  line-height: 1.5;
  color: black;
  font-weight: 500;
  font-family: sans-serif;
}

/* 写真入稿セクションの白背景カード（影付き枠） */
.cutline-service{
  background-color:white;
  padding: 30px 30px;
  border-radius: 20px;
  box-shadow:0 6px 18px rgba(0, 0, 0, 0.15);
}

/* モバイル時の内側余白調整／カード内 points-card の詰め */
@media (max-width: 767px) {
  .cutline-service { padding: 30px 15px; }
  .cutline-service .points-card{ padding: 1.5rem 0.8rem; }
}


/* ========== 8. アコーディオン（「もっと見る」エリア） ================== */
/* .animated：CSSアニメ時間（フェードなど汎用） */
.animated {
  -webkit-animation-duration: 1s; animation-duration: 1s;
  -webkit-animation-fill-mode: both; animation-fill-mode: both;
}

/* 折りたたみコンテナ。初期は高さ固定で下をグラデで隠す */
.content-wrap {
  height: 150px;
  overflow: hidden;
  position: relative;
  margin: 0;
}

/* 折りたたみの開閉ボタン（共通見た目 + 下端に固定配置） */
.close-btn, .more-btn {
  display: block;
  width: 100%;
  padding: 45px 0 0;
  position: absolute;
  bottom: 0; left: 0;
  text-align: center;
  background: -moz-linear-gradient(top,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 60%);
  background: -webkit-linear-gradient(top,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 60%);
  background: linear-gradient(to bottom,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 60%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#ffffff',GradientType=0);
}
.close-btn { background: none; }

/* 閉じている時（高さ固定）／開いている時（高さ自動+下余白） */
.slide-up   { height: 150px; padding-bottom: 0; overflow: hidden; }
.slide-down { height: auto;  overflow: visible; padding-bottom: 50px; }

/* ボタン内のラベル（「もっと見る」/「閉じる」） */
.more-btn p{
  display: inline-block;
  color: #fff;
  cursor: pointer;
  background: #29B6F6;
  padding: 5px 20px;
  width: 25%;
  border-radius: 20px;
  font-size: 1.1rem;
}
.close-btn { padding:0; }
.close-btn p { background: #aaa; }

/* モバイル時の文字と幅の最適化 */
@media (max-width: 768px) {
  .more-btn p { font-size: 0.7rem; }
}
/* 追加の幅最適化（モバイル） */
@media (max-width: 768px) {
  .more-btn p { width: 35%; }
}