/* ==========================================================
   産業リハビリ ティザーサイト
   ファイル名：sangyo.css
   白いコンテンツ幅：1000px
   「#first」セクション：白幅いっぱい（100%）
   各画像：レスポンシブ＋max-width指定
   #head：左右に10pxパディング
   #cv：横394px固定、画面狭いとき縦並び
   #address：背景#B9E3F9・上下50pxパディング
   ========================================================== */

:root{
  --container: 1000px;   /* 白い紙面の幅 */
  --inner: 760px;        /* 本文のテキスト幅 */
  --cyan: #18A0C8;       /* 両サイドのシアン帯 */
  --yellow: #ffe668;     /* 「first」セクション背景 */
  --ink: #333;           /* 文字色 */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Noto Sans JP",Meiryo,sans-serif;

  /* 背景：左右シアン・中央ホワイト（幅1000px） */
  background:
    linear-gradient(to right,
      var(--cyan) 0,
      var(--cyan) calc((100% - var(--container))/2),
      #fff        calc((100% - var(--container))/2),
      #fff        calc((100% + var(--container))/2),
      var(--cyan) calc((100% + var(--container))/2)
    );
}

/* ----------------------------------------------------------
   基本レイアウト
---------------------------------------------------------- */
body > *{
  max-width: var(--inner);
  margin: 0 auto;
  line-height: 1.75;
}

h1, body > p, section{
  margin-top: 48px;
  margin-bottom: 0;
}

img{
  width:100%;
  height:auto;
  display:block;
}

/* ----------------------------------------------------------
   #head セクション（タイトル＋メインイラスト）
   白い紙面内で左右10pxのパディング
---------------------------------------------------------- */
#head{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
#head h1{
	margin-bottom: 90px;
	margin-left: 10px;
	margin-right: 10px;
}

#head h1 img{                /* title.png */
  max-width:520px;
  margin-inline:auto;
}

#head p img{                 /* main.png */
  max-width:840px;
  margin-inline:auto;
}

/* ----------------------------------------------------------
   #first セクション（黄色帯：1000px幅いっぱい）
---------------------------------------------------------- */
#first{
  max-width: var(--container);
  margin: 48px auto 0;
  background: var(--yellow);
  border-radius: 8px;
  padding: 40px 10px;
  text-align: center;
}

#first p{
  margin: 0 auto 18px;
  max-width: var(--inner);
}

#first p:nth-child(1){
  font-size:14px;
  letter-spacing:.04em;
}

#first p:nth-child(2){
  display:inline-block;
  font-weight:700;
  padding:10px 14px;
  border:1px solid #18A0C8;
  background:#fff;
  margin-bottom:16px;
  font-size: 1.8em;
}

#first p:nth-child(3){
  font-size:15px;
}

#first p:last-child img{      /* ph01.jpg */
  max-width:355px;
  margin-inline:auto;
}

/* ----------------------------------------------------------
   #cv セクション（PDF・お問い合わせボタン）
   横並び → 狭い画面では縦並び
---------------------------------------------------------- */
#cv{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  margin-top:48px;
  max-width:var(--inner);
}

#cv p{
  margin:0;
  line-height:0;
}

#cv img{
  width:394px;
  height:auto;
  display:block;
}

@media (max-width:768px){
  #cv{
    flex-direction:column;
    gap:16px;
  }
  #cv img{
    width:80%;
    max-width:394px;
    margin-inline:auto;
  }
}

/* ----------------------------------------------------------
   #tel セクション（電話ブロック）
---------------------------------------------------------- */
#tel{
  text-align:center;
  margin-top:38px;
}

#tel p{
  margin:0 0 8px;
}

#tel p:nth-child(1){
  color:#2aa6b5;
  font-weight:700;
  letter-spacing:.08em;
}

#tel p:nth-child(2){
  font-size:clamp(26px,4.6vw,34px);
  font-weight:800;
  letter-spacing:.12em;
}

#tel p:nth-child(3){
  font-size:14px;
  color:#555;
  line-height:1.7;
}
/* 電話番号の左にアイコンを出す（SVGを背景で） */
#tel p:nth-child(2) tel{
  display:inline-flex;
  align-items:center;
  gap:16px;                 /* アイコンと数字の距離 */
  line-height:1;
  font-weight:800;
  letter-spacing:.12em;     /* 既存の見た目に揃える */
  color:#333;
}

/* アイコン（SVG） */
#tel p:nth-child(2) tel::before{
  content:"";
  inline-size: clamp(28px, 4vw, 56px);  /* 画面幅に応じてアイコン可変 */
  block-size: clamp(28px, 4vw, 56px);
  background: url("img/icn-phone.svg") no-repeat center / contain;
  /* 必要なら色指定付きのSVGに差し替え or SVG側の塗りで色合わせ */
}

/* 小さな画面での余白微調整（任意） */
@media (max-width: 480px){
  #tel p:nth-child(2) tel{ gap:12px; }
}


/* ----------------------------------------------------------
   #address セクション（テキスト画像＋写真画像）
   背景#B9E3F9・上下50px・左右20pxパディング
   PCで横並び・スマホで縦並び
---------------------------------------------------------- */
#address{
  max-width: var(--container);
  margin: 48px auto 0;
  background:#B9E3F9;
  padding:50px 20px;         /* ← 左右に20px追加 */
  text-align:center;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:40px;                  /* 左右画像の間隔 */
  flex-wrap:wrap;            /* 狭い画面で縦並びに */
}

/* 各画像を中央寄せ */
#address p{
  margin:0;
  flex:1 1 320px;
  display:flex;
  justify-content:center;
}

#address img{
  width:100%;
  height:auto;
  display:block;
  border-radius:6px;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}

/* ---- 各画像の最大幅 ---- */
#address p:first-child img{   /* address_txt.png */
  max-width:405px;
}

#address p:last-child img{    /* adress_ph.png */
  max-width:444px;
}

/* ---- スマホ対応（縦並び） ---- */
@media (max-width:768px){
  #address{
    flex-direction:column;
    gap:24px;
  }
  #address p{
    width:100%;
  }
}