body{

  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#f5f7fa;
  color:#333;
  line-height:1.7;

  background:
    linear-gradient(rgba(245,247,250,0.75), rgba(245,247,250,0.75)),
    url("img/bg-company.jpg");
  background-size:cover;
  background-position:center;
  background-attachment:fixed;

  padding-top:120px;
}

/* ===== ヘッダー ===== */
header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
  box-sizing:border-box;

  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:20px;
  padding:18px 20px;

  background:rgba(18,30,70,0.7);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  border-bottom:1px solid rgba(255,255,255,0.2);
}

/* 左 */
.left{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo img{
  height:60px;
  border-radius:12px;
  box-shadow:0 2px 12px rgba(0,0,0,0.2);
}

/* 社名 */
.header-text{
  display:flex;
  flex-direction:column;
  white-space:nowrap;
  color:#fff;
}

.header-sub{
  font-size:15px;
}

.company-name{
  font-size:50px;
  font-weight:700;
 letter-spacing:4px;
}

.company-name .small{
  font-size:18px;
  vertical-align:baseline;  
  margin-right:4px;
}

/* タブ */
.tabs{
  display:flex;
  gap:6px;
  margin:0 auto;
  padding: 6px 5px 2px; 
  scroll-behavior: smooth;
  flex-wrap: nowrap;   /* ←追加（超重要） */
  overflow-x: auto;    /* ←追加 */
}

/* ↓ここに入れる */
.tabs::-webkit-scrollbar{
  height:4px;
}

.tabs::-webkit-scrollbar-thumb{
  background:#999;
  border-radius:2px;
}

.tabs a{
  color:#fff;
  text-decoration:none;
  font-size:14px;
  padding:5px 8px;
  border-radius:20px;
  background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.25);
  white-space: nowrap; /* ←追加（重要） */
  flex: 0 0 auto;      /* ←追加 */
}

/* TEL */
.tel{
  margin-left:auto;
  display:flex;
  flex-direction:column;

  align-items:flex-end;
  font-size:18px;
  color:#ffd700;
}

.tel a{
  color:#ffd700;
  text-decoration:none;
}

/* ===== コンテンツ ===== */
.container{
  max-width:900px;
  margin:30px auto;
  padding:0 15px;
}

.card{
  background:rgba(255,255,255,0.40); /* ←薄く */
  border-radius:14px;
  padding:20px;
  margin:20px auto;
  max-width:750px;

  backdrop-filter:blur(16px);          /* ←ガラス感 */
  -webkit-backdrop-filter:blur(18px);

  border:1px solid rgba(255,255,255,0.6); /* ←ガラス縁 */

  box-shadow:
    0 8px 20px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.7);
}
/* ===== PC ===== */
@media (min-width:901px){
  header{
    justify-content:space-between;
    padding:22px 20px 18px;
  }
}

/* ===== タブレット ===== */
@media(min-width:769px)and (max-width:900px){
  body{
    padding-top:210px;
  }

  header{
    flex-wrap:wrap;
    justify-content:center;
  }

  .tel{
    cursor:default;
    width:100%;
    align-items:center;
    margin-top:6px;
  }
  
  
  .tel a{
    text-decoration:none;   /* 下線消す */
    color:#ffd700;          /* 色そのまま */
    cursor:default;         /* 手のマーク消す */
    pointer-events:none;    /* クリック無効 */
  }

  .tel:hover{
    transform:none;         /* 拡大しない */
  }

  .tel a:hover{
    color:#ffd700;          /* 色変化なし */
    transform:none;
  }

  .tabs{
    width:100%;
    justify-content:center;
  }
}

  
 .footer-copy{
    font-size:12px;
  }

/* ===== フッター ===== */
footer{
  background:rgba(22,40,85,0.80);
  color:#f0f6ff;
  font-size:13px;
  padding:25px 24px;
  margin-top:30px;
  border-top:1px solid rgba(255,255,255,0.1);
  text-align:left;
}

footer a{
  display:block;
  color:#f0f6ff;
  text-decoration:none;
  margin:4px 0;
}

footer a:hover{
  text-decoration:underline;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.25);
  margin-top:45px;
  padding-top:20px;
  font-size:12px;
}

.footer-inner{
  display:flex;
  align-items:flex-start;
  gap:30px;
  flex-wrap:wrap;
}

.footer-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.footer-left img{
  height:34px;
  border-radius:8px;
}

.footer-company{
  font-size:16px;
  font-weight:bold;
}

.footer-company .small{
  font-size:12px;
  opacity:0.8;
}

.footer-right{
  text-align:left;
  line-height:1.6;
  margin-left:20px;
}

.footer-copy{
  margin-top:18px;
  font-size:11px;
  opacity:0.75;
  text-align:right;
}


header,
header *{
  color:#fff;
}

/* タブも白 */
.tabs a{
  color:#fff;
}

/* 電話だけ黄色 */
.tel,
.tel a{
  color:#ffd700 !important;
}

/* 電話の補足（時間）は白のまま */
.tel-time{
  color:#fff !important;
}

/* PCだけ電話は押せない */
@media screen and (min-width:1001px){
  header .tel a{
    pointer-events:none !important;
    cursor:default !important;
  }

  header .tel,
  header .tel:hover{
    transform:none;
    cursor:default;
  }
}

/* ===== 本文の電話リンク：完全に普通の文字 ===== */


/* ホバーしても何も変えない */
.container a[href^="tel:"]:hover{
  text-decoration:none;
  color:inherit;
}
/* ===== フッター：上部（ラインより上）だけ右寄せ ===== */
footer{
  text-align:right;
}

/* 下（ロゴ・住所）は左に戻す */
.footer-inner{
  text-align:left;
}

/* フッター内全体は右寄せベースに戻す */
footer{
  text-align:right;
}

/* 下（ロゴ・住所など）はそのまま */
.footer-inner{
  text-align:left;
}

/* ===== 高級系タブホバー ===== */
.tabs a{
  position:relative;
  transition:all 0.3s ease;
}

/* PCのみホバー */
@media (hover: hover){

  .tabs a:hover{
    background:rgba(18,30,70,1);   /* 濃紺 */
    color:#ffd700!important;                 /* ゴールド */
    border-color:#ffd700;

    transform:translateY(-2px);

    box-shadow:
      0 0 6px rgba(255,215,0,0.4),
      0 0 12px rgba(255,215,0,0.3),
      inset 0 0 6px rgba(255,215,0,0.2);
  }

  /* ほんのり光のライン */
  .tabs a::after{
    content:"";
    position:absolute;
    left:20%;
    bottom:4px;
    width:60%;
    height:2px;
    background:linear-gradient(90deg, transparent, #ffd700, transparent);
    opacity:0;
    transition:0.3s;
  }

  .tabs a:hover::after{
    opacity:1;
  }
}

/* ===== PCだけタブ文字を大きく ===== */
@media (min-width:901px){
  .tabs a{
    font-size:20px;   /* 好きなサイズに調整OK（例：18?20px） */
    padding:10px 16px; /* 文字に合わせて少し余白も増やすとバランス良い */
    letter-spacing:1px; /* 少し広げると高級感UP */
    line-height:1.4;   /* ←追加 */
  }
}
/* ===== TELを1行に固定 ===== */
.tel-number{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap; /* ←改行させない */
}

/* ===== 太くて光るラインアニメーション ===== */
.marker-title{
  position:relative;
  display:inline-block;
  padding-bottom:6px;
}

/* ライン本体 */
.marker-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;

  width:0%;
  height:5px; /* ←太さ */

  background:linear-gradient(
    90deg,
    #ffd700 0%,
    #ffea70 50%,
    #ffd700 100%
  );

  border-radius:3px;

  /* 光り方 */
  box-shadow:
    0 0 6px rgba(255,215,0,0.6),
    0 0 12px rgba(255,215,0,0.5),
    0 0 20px rgba(255,215,0,0.4);

  transition:width 1s ease;
}

/* 発動 */
.marker-title.active::after{
  width:100%;
}


/* ===== スマホ最終版：会社名 → 電話 → タブ ===== */
@media screen and (max-width:1000px){

  body{
    padding-top:450px;
    font-size:26px;
  }

  header{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:15px;
  }

  header > .left{
    order:1;
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    gap:10px;
  }

  header > .tel{
    order:2;
    width:100%;
    font-size:0px;
    margin:8px 0;
    margin-left:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  header > .tabs{
    order:3;
    width:100%;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px;
    margin-top:10px;
    padding:0;
  }

  header > .tabs a{
    font-size:30px;
    padding:10px 14px;
  }

  .tel a{
    pointer-events:auto !important;
  }

  .tel-number{
    font-size:48px;
    font-weight:bold;
  }

  .logo img{
    height:52px;
  }

  .card{
    font-size:20px;
    line-height:1.9;
  }

  .header-sub{
    font-size:16px;
    white-space:normal;
  }

  .company-name{
    font-size:70px;
    letter-spacing:1px;   /* ←少し詰めると綺麗 */
    line-height:1.1;      /* ←上下の余白詰める */
    text-shadow:0 2px 6px rgba(0,0,0,0.25);
    
    
  }
  .company-name .small{
    font-size:30px;
    position:relative;
    top:-6px;
    margin-right:6px;
  }
  
}


/* ===== 電話リンク制御（最終版） ===== */

/* スマホだけ押せる */
@media screen and (max-width:1000px){
  header .tel a{
    pointer-events:auto;
    cursor:pointer;
  }
}

/* PCは押せない */
@media screen and (min-width:1001px){
  header .tel a{
    pointer-events:none;
    cursor:default;
  }
}


/* ===== 高級タブ（修正版） ===== */

/* これを追加（超重要） */
.tabs a{
  position:relative;
  transition:all 0.35s ease;
}

/* ホバー（PCのみ） */
@media (hover: hover){

  .tabs a:hover{
    background:linear-gradient(
      135deg,
      rgba(18,30,70,0.95),
      rgba(10,18,45,1)
    );

    color:#ffd700;
    border-color:#ffd700;

    transform:translateY(-2px);

    box-shadow:
      0 0 8px rgba(255,215,0,0.5),
      0 0 18px rgba(255,215,0,0.3),
      inset 0 0 8px rgba(255,215,0,0.15);
  }

  /* 下の光ライン */
  .tabs a::after{
    content:"";
    position:absolute;
    left:15%;
    bottom:5px;
    width:70%;
    height:2px;
    background:linear-gradient(
      90deg,
      transparent,
      #ffd700,
      transparent
    );
    opacity:0;
    transition:0.4s;
  }

  .tabs a:hover::after{
    opacity:1;
  }

  /* 上のハイライト */
  .tabs a::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(
      120deg,
      rgba(255,255,255,0.2),
      transparent 40%
    );
    opacity:0;
    transition:0.4s;
    border-radius:20px;
  }

  .tabs a:hover::before{
    opacity:1;
  }
}

/* ===== スマホだけロゴ大きく ===== */
@media screen and (max-width:1000px){
  .logo img{
    height:120px !important;
  }
}

/* ===== ロゴ：高級な光エフェクト ===== */
.logo img{
  transition:all 0.4s ease;
}

/* PC：ホバーで光る */
@media (hover: hover){

  .logo img:hover{
    transform:scale(1.05);

    box-shadow:
      0 0 10px rgba(255,215,0,0.5),
      0 0 25px rgba(255,215,0,0.3),
      0 4px 20px rgba(0,0,0,0.4);
  }
}

/* スマホ：常にほんのり光らせる */
@media screen and (max-width:1000px){

  .logo img{
    box-shadow:
      0 0 8px rgba(255,215,0,0.35),
      0 0 18px rgba(255,215,0,0.2),
      0 4px 14px rgba(0,0,0,0.3);
  }
}

/* ===== スマホ：ロゴ常に発光（強制） ===== */
@media screen and (max-width:1000px){
  header .logo img{
    box-shadow:
      0 0 10px rgba(255,215,0,0.5),
      0 0 25px rgba(255,215,0,0.3),
      0 4px 16px rgba(0,0,0,0.3) !important;
  }
}

/* ===== メニュー全体 ===== */
.menu{
  background:rgba(255,255,255,0.9);
  border-radius:14px;
  padding:20px;
  margin-bottom:25px;

  box-shadow:0 8px 20px rgba(0,0,0,0.1);

  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
}

/* ===== 各リンク ===== */
.menu a{
  display:grid;
  padding:12px 14px;

  font-size:15px;
  font-weight:500;

  background:linear-gradient(135deg,#f7f9ff,#eef3ff);
  border-radius:10px;

  color:#1e2a50;
  text-decoration:none;

  border:1px solid rgba(0,0,0,0.05);

  transition:0.25s;
}

/* ===== ホバー ===== */
.menu a:hover{
  background:linear-gradient(135deg,#1e2a50,#0f1c40);
  color:#ffd700;

  transform:translateY(-2px);

  box-shadow:0 6px 14px rgba(0,0,0,0.2);
}

/* ===== スマホ ===== */
@media (max-width:768px){
  .menu{
    grid-template-columns:1fr; /* 1列 */
  }

  .menu a{
    font-size:17px;
    padding:14px;
  }
}


.menu a{
  display:block;
  padding:12px 14px;
  background:#eef3ff;
  border-radius:10px;
  color:#1e2a50;
  text-decoration:none;
  transition:0.25s;
}

.menu a:hover{
  background:#1e2a50;
  color:#ffd700;
  transform:translateY(-2px);
}

/* スマホ */
@media (max-width:768px){
  .menu{
    grid-template-columns:1fr;
  }

  .menu a{
    font-size:17px;
    padding:14px;
  }
}

header a:visited{
  color:#fff !important;
}

/* ===== ヘッダー：ホバーは全部ゴールドで統一 ===== */
header .tabs a,
header .tabs a:link,
header .tabs a:visited{
  color:#fff !important;
}

@media (hover:hover){
  header .tabs a:hover{
    color:#ffd700 !important;
  }
}

/* ===== 現在ページ（active） ===== */
header .tabs a.active{
  color:#ffd700 !important;
  background:rgba(18,30,70,1);
  border-color:#ffd700;

  box-shadow:
    0 0 6px rgba(255,215,0,0.4),
    inset 0 0 6px rgba(255,215,0,0.2);
}

/* ===== 地図ページ専用：高級版 ===== */

.page-container{
  max-width:920px;
  margin:40px auto;
  padding:0 18px;
}

.map-card{
  background:rgba(255,255,255,0.82);
  border-radius:18px;
  padding:26px;
  box-shadow:0 12px 30px rgba(0,0,0,0.18);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.45);
}

.map-title{
  font-size:20px;
  font-weight:bold;
  color:#162855;
  margin-bottom:18px;
  border-left:6px solid #d6b24c;
  padding-left:12px;
}

.map-image{
  width:100%;
  max-width:620px;
  display:block;
  margin:18px auto;
  border-radius:16px;
  box-shadow:0 8px 22px rgba(0,0,0,0.22);
}

.address-box{
  background:rgba(22,40,85,0.88);
  color:#fff;
  border-radius:14px;
  padding:18px 20px;
  margin:22px 0;
  line-height:1.9;
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
}

.address-box strong{
  color:#ffd700;
  font-size:18px;
}

.map-frame{
  width:100%;
  height:360px;
  border:0;
  border-radius:16px;
  box-shadow:0 8px 22px rgba(0,0,0,0.2);
  margin-top:16px;
}

.big-map-link{
  display:inline-block;
  margin-top:16px;
  padding:10px 18px;
  border-radius:30px;
  background:rgba(22,40,85,0.9);
  color:#ffd700;
  text-decoration:none;
  font-weight:bold;
}

.big-map-link:hover{
  background:#162855;
  color:#fff;
}

.center{
  text-align:center;
}

.gray-link{
  color:#808080;
  font-size:13px;
}

@media screen and (max-width:1000px){
  .page-container{
    margin:30px auto;
  }

  .map-card{
    padding:18px;
  }

  .map-title{
    font-size:18px;
  }

  .map-frame{
    height:320px;
  }

  .address-box{
    font-size:17px;
  }
}

.tel a{
  background:rgba(255,215,0,0.15);
  padding:6px 12px;
  border-radius:20px;
  display:inline-block;
}

.card{
  color:#333 !important;
}

.card h2{
  color:#2c5aa0 !important;
}

/* ===== 電話番号：ピンク発光（全ページ対応） ===== */

@keyframes telGlowPink{
  0%{
    text-shadow: 0 0 3px rgba(255,105,180,0.25);
  }
  50%{
    text-shadow:
      0 0 8px rgba(255,105,180,0.5),
      0 0 14px rgba(255,105,180,0.4);
  }
  100%{
    text-shadow: 0 0 3px rgba(255,105,180,0.25);
  }
}

/* 全ての電話リンクに適用 */
a[href^="tel:"]{
  font-weight:bold;
  animation:telGlowPink 2.5s ease-in-out infinite;
  transition:all 0.2s ease;
}

/* PC：ホバー */
@media (hover: hover){
  a[href^="tel:"]:hover{
    text-shadow:
      0 0 10px rgba(255,105,180,0.7),
      0 0 18px rgba(255,105,180,0.6);
  }
}

/* スマホ：タップ */
a[href^="tel:"]:active{
  text-shadow:
    0 0 12px rgba(255,105,180,0.9),
    0 0 20px rgba(255,105,180,0.7);
}

/* ===== 電話リンク最終統一 ===== */

/* PCは全部押せない */
@media screen and (min-width:1001px){
  a[href^="tel:"]{
    pointer-events:none !important;
    cursor:default !important;
    text-decoration:none;
    color:inherit;
  }
}

/* スマホは全部押せる */
@media screen and (max-width:1000px){
  a[href^="tel:"]{
    pointer-events:auto !important;
    cursor:pointer !important;
  }
}

/* スマホのフッター */
@media (max-width:1000px){
  footer{
    text-align:center!important;
    font-size:28px;
    line-height:1.8;
  }

  .footer-inner{
    flex-direction:column;
     align-items:center;
    text-align:center;
    gap:12px;
  }

  .footer-left{
    justify-content:center;
  }

  .footer-right{
    margin-left:0;
    text-align:center;
    font-size:40px;
    line-height:1.8;
  }

  .footer-company{
    font-size:50px;
  }

  .footer-copy{
    text-align:center;
    font-size:13px;
  }
}

@media (max-width:1000px){
  .footer-company .small{
    font-size:30px !important;  /* ←好きなサイズに */
    opacity:1;
  }
  .header-sub{
    font-size:12px;   /* ←おすすめ */
    line-height:1.6;
  }

  
}
@media (max-width:1000px){


  header{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:10px;
    gap:8px;
  }

  .left{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:15px;
  }

  .header-sub{
    font-size:16px;
    line-height:1.4;
  }

  .company-name{
    font-size:50px;
    line-height:1.05;
    letter-spacing:1px;
  }

  .company-name .small{
    font-size:25px;
    top:0;
  }

  .logo img{
    height:90px !important;
  }

  .tabs{
    display:flex;
    flex-wrap:nowrap;
    justify-content:center;
    gap:4px;
    margin-top:3px;
    width:100%;
  }

  .tabs a{
    font-size:20px;
    padding:6px 10px;
  }

  .tel{
    text-align:center;
    margin-top:3px;
    align-items:center;
  }

  .tel-time{
    font-size:25px;
    line-height:2;
  }

  .tel-number{
    font-size:50px !important;
    font-weight:bold;
  }

  .tel-number a{
    font-size:50px !important;
    white-space:nowrap;
  }

  body{
    padding-top:410px;
  }

}
@media (max-width:480px){

  header{
    padding:6px;
    gap:5px;
  }

  .left{
    gap:8px;
  }

  .header-sub{
    font-size:12px;
    line-height:1.2;
  }

  .company-name{
    font-size:32px;
  }

  .company-name .small{
    font-size:16px;
  }

  .logo img{
    height:40px !important;
  }

  .body{
  font-size:12px;
  }
  .tabs a{
    font-size:14px !important;
    padding:3px 5px !important;
  }

  .tel-time{
    font-size:13px;
  }

  .tel-number,
  .tel-number a{
    font-size:18px !important;
  }

  body{
    padding-top:200px;
  }
   .card{
    font-size:11px !important;
    line-height:1.2 !important;
  }
    footer{
    font-size:16px !important;
    line-height:1.2;
  }

  .footer-right{
    font-size:12px !important;
    line-height:1.4;
  }

  .footer-company{
    font-size:18px !important;
  }

  .footer-copy{
    font-size:11px;
  }
  .footer-company .small{
  font-size:12px !important;
  }

 footer{
    font-size:13px !important;
    line-height:1.4; 
  }

  footer a{
    font-size:13px !important;
    line-height:1.4; 
  }

   .footer-bottom{
    margin-top:10px !important;
    padding-top:10px !important;
  }

}