/*----------------------------------------------------
responsive css for ルアンテニスクラブ web site
【Claude追加 2026-10-20】全ページ共通のレイアウト。
PC幅(900px)は現行の見た目を再現し、狭い画面では縦積みにする。
文字コードは他のCSSに合わせて Shift_JIS(CP932) で保存すること。
----------------------------------------------------*/

html, body { height:auto; }

/* 基本フォント: Noto Sans JP(Googleフォント。読み込めない時は端末の游ゴシック等) */
body, td, th, input, textarea, select {
  font-family:"Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  font-size:14px;
  line-height:1.8;
  letter-spacing:.03em;
}

body {
  -webkit-text-size-adjust:100%;
}

img { max-width:100%; height:auto; }

.wrap {
  max-width:900px;
  margin:0 auto;
  background:#fff;
}

/* head ---------------------------------------------*/
.head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  background:#fff;
}
.head .logo { display:block; line-height:0; flex:0 1 482px; }
.head .logo img { width:100%; max-width:482px; }

.utility {
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
}
.utility a, .utility span {
  display:flex;
  align-items:center;
  height:59px;
  padding:0 14px;
  margin-left:4px;
  background:#fff;
  color:#333;
  font-size:13px;
  line-height:1.4;
  white-space:nowrap;
  text-decoration:none;
  box-sizing:border-box;
}
.utility a::before, .utility span::before {
  content:"";
  width:12px; height:12px;
  margin-right:6px;
  border-radius:50%;
  background:#c8c8c8;
}
.utility a:hover { color:#ff6666; }
.utility .current { color:#333; }
.utility .current::before {
  width:6px; height:6px;
  border:3px solid #009800;
  background:#fff;
}

/* breadcrumb ---------------------------------------*/
.pan {
  background:#1b1b1b url("../common/pan_bg.jpg") repeat-x;
  color:#fff;
  padding:3px 15px;
  line-height:22px;
  font-size:12px;
}
.pan a { color:#fff; }

/* main image ---------------------------------------*/
.mainimg { line-height:0; background:#fff; }
.mainimg img { width:100%; height:auto; display:block; }

/* global navi --------------------------------------*/
.gnav {
  /* 斜線は元画像と同じ模様のタイル(menu_stripe.gif)を全面に敷き、上から下へ暗くする。
     段数が増えても全段が同じ斜線になる */
  background:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5)),
    url("../common/menu_stripe.gif") #007400;
  border-bottom:3px solid #f4f2f6;
  padding:5px 0 5px 6px;
}
.gnav ul {
  display:flex;
  flex-wrap:wrap;
  list-style:none;
  margin:0;
  padding:0;
}
.gnav li { flex:1 1 0; min-width:0; padding:0 6px 0 0; box-sizing:border-box; }
.gnav a {
  position:relative;
  display:block;
  height:50px;
  padding:6px 26px 0 8px;
  box-sizing:border-box;
  background:linear-gradient(#d3e8d3, #c4dcc4);
  color:#1f3f1f;
  font-size:12.5px;
  font-weight:500;
  line-height:20px;
  letter-spacing:0;
  text-decoration:none;
  white-space:nowrap;
}
.gnav a b {
  display:block;
  font-weight:bold;
  font-size:11px;
  line-height:16px;
  color:#006600;
  letter-spacing:.02em;
}
.gnav a::after {
  content:"";
  position:absolute;
  right:3px; top:50%;
  width:14px; height:14px; margin-top:-7px;
  background:#003300;
  border-radius:1px;
}
.gnav a::before {
  content:"";
  position:absolute;
  right:6px; top:50%;
  margin-top:-4px;
  border-left:6px solid #7cd452;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  z-index:1;
}
.gnav a:hover { background:linear-gradient(#c9ecb8, #b3e39d); color:#003300; text-decoration:none; }
.gnav a.current { background:linear-gradient(#b3e39d, #9fd685); }

/* top page -----------------------------------------*/
.main {
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:37px 62px 50px 36px;
  background:#fff;
}
.main .inquiry { flex:1 1 490px; max-width:490px; min-width:0; }
.main .inquiry .ttl { display:block; width:100%; max-width:490px; }
.contact { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:20px; }
.contact .name { flex:0 0 auto; }
.contact .info { flex:1 1 220px; }
.contact { font-size:14px; }
.contact .row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 10px; }
.contact .row > span, .contact a.tel { white-space:nowrap; }
.contact .row + .row { margin-top:5px; }
.contact a.tel { color:#333; }
.banners { flex:0 0 302px; }
.banners a { display:block; line-height:0; }
.banners a + a { margin-top:8px; }
.banners img { width:100%; max-width:302px; }

/* footer -------------------------------------------*/
.foot {
  background:#666;
  color:#fff;
  text-align:center;
  font-size:10px;
  font-weight:bold;
  letter-spacing:.08em;
  line-height:20px;
  padding:0 8px;
}

/* ======== 900px未満 ======== */
@media (max-width:899px) {
  .head { flex-direction:column; align-items:stretch; }
  .head .logo { flex:none; padding:14px 12px; background:#fff; text-align:center; }
  /* ロゴGIFの背景(ごく薄いグレー)を白に近づけ、帯との境目を消す */
  /* 絵柄は画像の左側(x=22〜366)に偏っているため、右の余白を切って見た目を中央にする */
  .head .logo img {
    width:100%; max-width:388px;
    aspect-ratio:388 / 85;
    object-fit:cover; object-position:left center;
    filter:brightness(1.025);
  }
  .utility { border-top:1px solid #e4e4e4; background:#fafafa; }
  .utility li { flex:1 1 25%; min-width:0; }
  .utility a, .utility span {
    justify-content:center;
    height:46px;
    margin:0;
    padding:0 4px;
    font-size:13px;
    border-right:1px solid #e4e4e4;
  }
  .utility li:last-child a { border-right:0; }
  .utility a::before, .utility span::before { display:none; }
  .utility .current { font-weight:bold; color:#006600; box-shadow:inset 0 -3px 0 #009800; }
  .gnav { padding-bottom:0; }
  .gnav a { font-size:14px; }
  .gnav li { flex:0 0 33.333%; padding-bottom:5px; }
  .main { padding:28px 20px 40px 20px; }
}

/* ======== スマホ ======== */
@media (max-width:767px) {
  .head { flex-direction:column; align-items:stretch; }
  .head .logo { flex:none; }
  .utility { flex-wrap:wrap; border-top:1px solid #e4e4e4; }
  .utility li { flex:0 0 50%; min-width:0; border-bottom:1px solid #e4e4e4; box-sizing:border-box; }
  .utility a, .utility span {
    justify-content:center;
    height:46px;
    margin:0;
    padding:0 4px;
    font-size:13px;
    white-space:nowrap;
    text-align:center;
    border-right:1px solid #e4e4e4;
  }
  .utility li:nth-child(even) a { border-right:0; }
  .utility a::before, .utility span::before { display:none; }
  .utility .current { font-weight:bold; color:#006600; box-shadow:inset 0 -3px 0 #009800; }
  .pan { padding:2px 12px; }

  .gnav li { flex:0 0 50%; }
  .gnav a { height:56px; font-size:15px; padding-top:8px; }

  /* 申込につながるバナーを先に見せる(改善案) */
  .main { flex-direction:column; gap:24px; padding:20px 14px 32px 14px; }
  .banners { order:-1; flex:none; width:100%; }
  .banners img { max-width:none; }
  .main .inquiry { flex:none; width:100%; max-width:none; }
  .contact .info { flex-basis:100%; }
  .contact .row + .row { margin-top:12px; }
  .contact { font-size:15px; }
  .contact a.tel {
    display:inline-block;
    padding:10px 18px;
    border:1px solid #006600;
    border-radius:4px;
    font-size:16px;
    color:#006600;
  }
}

/* ======== サブページ共通 ======== */
.content { background:#fff; overflow-x:hidden; }
.content table.fee td:first-child { white-space:nowrap; }
/* 時間割の表見出し(元は画像: 平日 / 土曜日・日曜日) */
.content p.lbl { margin:0; padding:0 0 6px; font-size:15px; font-weight:bold; line-height:1.6; color:#111; }
/* 区切り線を外したぶん、クラブ紹介の各項目の間隔を広げる */
.content table[cellspacing="8"] + table[cellspacing="8"] { margin-top:32px; }
.content table.stack[cellspacing="8"]:first-of-type { margin-top:8px; }
.content table { max-width:100%; }
.content table.hours td[width="150"] { width:auto; white-space:nowrap; padding-right:20px; }
.content td, .content th { font-size:14px; }
.content h2 { line-height:0; }
.content h2 img { width:100%; }
.pagetopbox { width:100%; max-width:900px; }
.pagetopbox td.pagetop { box-sizing:border-box; }
.pagetopbox td.pagetop img { max-width:100%; }
.pagetopbox td.pagetop a { display:inline-block; }

@media (max-width:899px) {
  .content table[width="900"], .content table[width="820"], .content table[width="760"],
  .content table[width="576"], .content table[width="524"], .content table[width="520"],
  .content table[width="490"], .content table[width="395"], .content table[width="340"] { width:100%; }
  .content table { max-width:100%; }
  .content > table > tbody > tr > td { padding:24px 20px; }
  /* お知らせ(インフォメーション)の余白用セル */
  .content td[style*="padding: 40px 0 40px 40px"] { display:none; }
  .content td[style*="width:576px"] { width:auto !important; padding:0 20px 30px !important; }
  .content table[style*="width:576px"] { width:100% !important; }
  .content td[width="244"], .content td[width="228"], .content td[width="490"],
  .content td[width="425"], .content td[width="423"], .content td[width="420"] { width:auto; }
  .content th[width], .content td[width="131"], .content td[width="130"], .content td[width="120"] { width:auto; }
  .content th.calender01, .content td.calender03, .content td.calender04 { padding:4px 2px; font-size:12px; }
  .content td.calender03 { font-size:11px; letter-spacing:0; }
  /* 区切り線とPAGE TOPは、本文と同じ左右余白(20px)に揃える */
  .pagetopbox td.pagetop { padding-left:20px; padding-right:20px; }
  .pagetopbox td.pagetop img[src$="bar.gif"] { display:block; width:100%; }
  /* 時間割: 列を等幅に(最初の列だけ少し広く) */
  .content table[summary] { table-layout:fixed; }
  .content table[summary] th:first-child, .content table[summary] td.calender03 { width:22%; }
}

@media (max-width:767px) {
  body, td, th, input, textarea, select, .content td, .content th { font-size:15px; }
  .content > table > tbody > tr > td { padding:20px 14px; }
  .content td[style*="width:576px"] { padding:0 14px 24px !important; }
  /* 画像と文章が横に並ぶ2カラムは、縦積みにする */
  .stack, .stack > tbody, .stack > tbody > tr, .stack > tbody > tr > td {
    display:block; width:auto !important; box-sizing:border-box;
  }
  .stack > tbody > tr > td[align="right"] { text-align:center; padding-top:12px; }
  .stack img { max-width:100%; height:auto; }
  .content td.infoday { width:auto !important; padding:8px 10px; }
  .content td.infophoto { display:block; width:auto; text-align:center; padding-top:20px; }
  .content td.infophoto img { display:block; margin:0 auto 14px; }
  .content td.infophoto br { display:none; }
}

/* 見出し(元は文字入りの画像だったものをHTML化) ------------*/
.content h3.ttl-bar {
  margin:0;
  padding:0 16px;
  background:#1b1b1b linear-gradient(#444, #000);
  color:#fff;
  font-size:15px;
  font-weight:500;
  line-height:30px;
  letter-spacing:.06em;
}
.content h3.ttl-dia {
  margin:0;
  font-size:14px;
  font-weight:bold;
  line-height:22px;
  color:#111;
}
.content h3.ttl-dia::before { content:"◆"; color:#8f1918; margin-right:2px; }
.content h3.ttl-green {
  margin:0 0 6px;
  font-size:19px;
  font-weight:bold;
  line-height:1.5;
  color:#006600;
}
.btn-trial {
  display:block;
  padding:15px 12px;
  border-radius:6px;
  background:linear-gradient(#ffa51c, #ff7a00);
  box-shadow:inset 0 0 0 1px #e86f00;
  color:#fff;
  font-size:18px;
  font-weight:bold;
  line-height:1.4;
  text-align:center;
  text-decoration:none;
}
.btn-trial:hover, .btn-trial:visited:hover { background:linear-gradient(#ffb64a, #ff8a1f); color:#fff; text-decoration:none; }
.btn-trial:link, .btn-trial:visited { color:#fff; }
@media (max-width:767px) {
  .content table[width="340"] td { font-size:13px; letter-spacing:0; }
  .content table[width="340"] td[width="30"] { width:24px; }
  /* レッスン料金(カレンダーページ): 1行ずつカード状に */
  .content table.fee, .content table.fee > tbody, .content table.fee > tbody > tr { display:block; width:100%; }
  .content table.fee > tbody > tr { padding:8px 0; border-bottom:1px solid #ddd; }
  .content table.fee td { display:inline-block; width:auto !important; padding:1px 8px 1px 0; vertical-align:baseline; }
  .content table.fee td:first-child { display:block; font-weight:bold; padding-bottom:2px; }
  .content td.calender04, .content th.calender01 { font-size:11px; letter-spacing:0; line-height:1.5; }
  .content h3.ttl-green { font-size:17px; }
  .btn-trial { font-size:15px; padding:14px 10px; }
}

/* アクセス: スマホは地図の文字が読めないため、拡大リンクとGoogleマップへのボタンを出す(改善案) */
.maplinks { display:none; }
.map-sp { display:none; }
.mapinfo { display:none; }
@media (max-width:767px) {
  /* スマホは、周辺拡大図の部分だけを切り出した地図を表示する(住所・TELは文字で補う) */
  .map-pc { display:none; }
  .map-sp { display:block; width:calc(100% - 28px); max-width:none; margin:20px auto 0; }
  .mapinfo { display:block; margin:14px 14px 0; padding:12px 16px; background:#ebebeb; text-align:left; line-height:1.8; }
  .mapinfo b { font-weight:bold; }
  .maplinks { display:flex; flex-direction:column; gap:10px; padding:14px 14px 0; }
  .btn-map {
    display:block;
    padding:12px 10px;
    border:1px solid #006600;
    border-radius:4px;
    background:#fff;
    color:#006600;
    font-size:15px;
    font-weight:bold;
    text-align:center;
    text-decoration:none;
  }
  .btn-map:link, .btn-map:visited { color:#006600; }
}

/* 写真のスワイプ(PC幅は現行どおり縦に並べる) -------------------*/
.swipe img { display:block; }
.swipe img + img { margin-top:12px; }
.swipe-dots { display:none; }
.swipe .swipe-clone { display:none; }
.swipe-sec { display:none; }
.swipe img.m-only { display:none; }
.swipe.swipe-m { display:none; }

@media (max-width:767px) {
  /* 画像が単独で入る箇所は中央に揃える(元画像が小さいものは原寸のまま) */
  .stack > tbody > tr > td > img { display:block; margin:0 auto 14px; }
  /* 元の字下げ(左20px)を外し、枠を左右中央にする */
  .content div[style*="padding-left:20px"] { padding-left:0 !important; }
  /* 約300px以上の画像は幅いっぱいにする */
  .stack img.fw { width:100%; max-width:none; }
  /* 画像の下にある余白(白)を切り、下の線との間隔を詰める(お問い合わせの写真) */
  .stack img.crop-b { aspect-ratio:300 / 200; object-fit:cover; object-position:top; }
  /* 項目横の写真(地図/ラケット/コート)はスマホでは出さない。ラケット・コートは上のスワイプに足して5枚、地図はアクセス地図ボタンの上に1枚だけ出す */
  .swipe img.m-only { display:block; }
  /* イベント・大会: 縦長の1枚(PC)は、スマホでは3枚のスワイプにする。写真の幅は本文の幅に合わせる */
  .stack img.pc-only { display:none; }
  .swipe.swipe-m { display:flex; }
  .swipe.swipe-m img { flex:0 0 100%; width:100%; }
  .swipe-sec img { display:block; width:calc(100% - 26px); max-width:none; margin:0 auto; }
  .stack img.sec { display:none; }
  .swipe-sec { display:block; margin:36px 0 22px; }
  /* PC用の空行(改行タグ)はスマホでは詰める */
  br.pc-br { display:none; }
  .content table[cellspacing="8"] + table[cellspacing="8"] { margin-top:36px; }

  /* 写真は手動スワイプ。次の写真を少しのぞかせる。自動では動かさない */
  .swipe {
    display:flex;
    gap:10px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    margin:0 -14px;
    padding:0 14px;
    scrollbar-width:none;
  }
  .swipe::-webkit-scrollbar { display:none; }
  .swipe img {
    flex:0 0 calc(100% - 26px);
    width:calc(100% - 26px);
    max-width:none;
    margin:0 !important;
    scroll-snap-align:center;
  }
  .swipe .swipe-clone { display:block; }
  .swipe-dots { display:flex; justify-content:center; gap:8px; padding:10px 0 4px; }
  .swipe-dots i { width:8px; height:8px; border-radius:50%; background:#c8c8c8; }
  .swipe-dots i.on { background:#009800; }
}

/* 画像だったボタン(アクセス地図/レッスンスケジュール)を文字ボタンに。
   PC幅は元の画像と同じ大きさ、スマホ幅は押しやすい大きさにする */
a.btn-g, a.btn-g:link, a.btn-g:visited {
  position:relative;
  display:inline-block;
  box-sizing:border-box;
  min-width:142px;
  height:31px;
  padding:0 28px 0 12px;
  border-radius:4px;
  background:linear-gradient(#006400, #004900);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  color:#fff;
  font-size:12px;
  font-weight:bold;
  line-height:31px;
  letter-spacing:.02em;
  text-decoration:none;
  white-space:nowrap;
}
a.btn-g::after {
  content:"";
  position:absolute;
  right:11px; top:50%;
  margin-top:-3px;
  border-left:5px solid #fff;
  border-top:3px solid transparent;
  border-bottom:3px solid transparent;
}
a.btn-g:hover { background:linear-gradient(#0f7d0f, #006000); color:#fff; text-decoration:none; }
.contact a.btn-g { min-width:100px; height:21px; padding:0 20px 0 9px; font-size:11px; line-height:21px; }
.contact a.btn-g::after { right:8px; }

@media (max-width:767px) {
  a.btn-g, a.btn-g:link, a.btn-g:visited {
    display:block;
    width:100%;
    height:auto;
    min-height:48px;
    padding:13px 32px 13px 16px;
    border-radius:6px;
    font-size:16px;
    line-height:1.4;
    text-align:center;
  }
  a.btn-g::after { right:16px; margin-top:-5px; border-left-width:7px; border-top-width:5px; border-bottom-width:5px; }
  .contact a.btn-g { width:100%; min-width:0; height:auto; min-height:48px; padding:13px 32px 13px 16px; font-size:16px; line-height:1.4; }
  .contact a.btn-g::after { right:16px; }
  .contact .row > a.btn-g { flex:1 1 100%; }
  /* 縦積みにした2つの欄(入会手続き→ビジター料金など)の間を空ける */
  .stack.gap-td > tbody > tr > td + td { padding-top:32px; }
  /* カレンダーの小見出し(◆付き)の上下の余白を詰める */
  .content h3.ttl-dia[style*="padding:35px"] { padding-top:26px !important; padding-bottom:12px !important; }
  /* 本文末尾の空行は詰める(ボタンと下の線の間を適度に) */
  .content > table > tbody > tr:first-child > td { padding-bottom:0; }
  /* 本文の最後から区切り線までの間隔を、全ページ同じにする */
  .pagetopbox { margin-top:32px; }
  /* ページごとの本文末尾の余白の違いを吸収し、最後の文字から線まで約32pxに揃える */
  .pg-introduction .pagetopbox { margin-top:20px; }
  .pg-calender .pagetopbox { margin-top:37px; }
  .pg-eventinfo .pagetopbox { margin-top:5px; }
  .pg-staff .pagetopbox { margin-top:16px; }
  .pg-information .pagetopbox { margin-top:-6px; }
  .pg-others .pagetopbox { margin-top:17px; }
  .pg-lesson .pagetopbox, .pg-access .pagetopbox { margin-top:31px; }
  .content td.endrow { padding:0 !important; height:0; font-size:0; line-height:0; }
  .content table.gap-s { margin-top:31px !important; }
  /* PAGE TOP: 画像はそのままで、押せる範囲を広げる */
  .pagetopbox td.pagetop { padding-left:14px; padding-right:14px; }
  .pagetopbox td.pagetop a { padding:12px 0 12px 24px; }
}

/* 電話番号のタップ発信(tel:リンク)。
   PC幅は押せない(文字のまま)、スマホ幅だけリンクの見た目にする ------------*/
a.tel-link, a.tel-link:link, a.tel-link:visited { color:inherit; text-decoration:none; pointer-events:none; cursor:text; }
@media (max-width:767px) {
  a.tel-link, a.tel-link:link, a.tel-link:visited {
    display:inline-block;
    padding:6px 2px;
    margin:-6px -2px;
    color:#336600;
    text-decoration:none;
    pointer-events:auto;
    cursor:pointer;
  }
}

/* 写真がまだ無い時の仮の枠(150x190 グレーのカード)。写真が決まったら画像に差し替える */
.photo-ph {
  display:flex;
  align-items:center;
  justify-content:center;
  width:150px;
  height:190px;
  box-sizing:border-box;
  background:#d7d7d7;
  border:1px solid #bdbdbd;
  color:#888;
  font-size:14px;
  letter-spacing:.08em;
}
@media (max-width:767px) {
  .stack .photo-ph { margin:0 auto 14px; }
}