@charset "utf-8";
/* ============================================================
   GranClass — Design Refresh Layer  (2026-08)
   既存テーマ fake_tcd074 の上に読み込む上書き専用スタイル。
   HTML構造・文言・画像は変更していない。このファイルを外せば
   完全に元のデザインへ戻る。
   ============================================================ */

:root{
  /* --- 色 : ロゴのゴールドと背景写真のネイビーから抽出 --- */
  --rf-navy-900:#071722;
  --rf-navy-800:#0c2130;
  --rf-navy-700:#13303f;
  --rf-navy-600:#1f384c;   /* 既存ブランドネイビー */
  --rf-gold:#c9a06a;       /* ロゴの金 */
  --rf-gold-lt:#e3c89e;
  --rf-ink:#0f1e28;
  --rf-body:#4c5c67;
  --rf-muted:#7b8892;
  --rf-rule:rgba(15,30,40,.13);
  --rf-paper:#ffffff;
  --rf-paper-2:#f5f7f8;

  /* --- 書体 --- */
  --rf-serif:"Cormorant Garamond","Times New Roman","游明朝","Yu Mincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",serif;
  --rf-sans:"Inter",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Segoe UI",sans-serif;

  --rf-ease:cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------
   1. ベース
   ------------------------------------------------------------ */
body,input,textarea,button,select{
  font-family:var(--rf-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body{ font-size:16px; color:var(--rf-ink); background:var(--rf-paper); }

.rich_font,.rich_font_type3,.p-vertical{ font-family:var(--rf-serif); font-weight:400; }
.rich_font_type1,.rich_font_type2{ font-family:var(--rf-sans); }

::selection{ background:rgba(201,160,106,.28); color:var(--rf-ink); }

a{ transition:color .28s var(--rf-ease), background-color .28s var(--rf-ease), border-color .28s var(--rf-ease), opacity .28s var(--rf-ease); }
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--rf-gold); outline-offset:3px; border-radius:1px;
}
img{ max-width:100%; }

/* 空段落が生む不自然な余白を除去（WordPress由来） */
.post_content p:empty{ display:none !important; }

/* ------------------------------------------------------------
   2. ヘッダー / グローバルナビ
   ------------------------------------------------------------ */
#header{
  transition:background-color .45s var(--rf-ease), backdrop-filter .45s var(--rf-ease),
             height .45s var(--rf-ease), box-shadow .45s var(--rf-ease);
  box-shadow:none;
}
/* ナビをいつでも押せるよう、PCでもヘッダーを固定する
   （最上部では背景を敷かないので、ヒーローの見え方は変わらない） */
@media screen and (min-width:1051px){
  #header{ position:fixed; top:0; left:0; }
}
/* トップ位置：背景は敷かず、可読性のためのごく薄いスクリムのみ */
#header:before{
  content:""; position:absolute; inset:0 0 auto 0; height:190px; pointer-events:none; z-index:-1;
  background:linear-gradient(180deg,rgba(7,23,34,.62) 0%,rgba(7,23,34,.28) 55%,rgba(7,23,34,0) 100%);
  transition:opacity .45s var(--rf-ease);
}
/* スクロール後：ぼかしガラス + 金のヘアライン */
#header.is-scrolled{
  height:74px;
  background:rgba(7,23,34,.88);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid rgba(201,160,106,.22);
}
#header.is-scrolled:before{ opacity:0; }

#header_logo{ left:clamp(22px,3.4vw,48px); }
#header_logo img{ transition:opacity .35s var(--rf-ease), width .45s var(--rf-ease); }
#header_logo .pc_logo_image.type1{ width:74px; height:auto; }
#header.is-scrolled #header_logo .pc_logo_image.type1{ width:52px; }
#header_logo img:hover{ opacity:.62; }

#global_menu{ position:absolute; right:clamp(22px,3.4vw,48px); top:0; }
#global_menu > ul{ display:flex; align-items:center; gap:clamp(6px,1.2vw,18px); }
#global_menu > ul > li > a{
  position:relative; height:auto; line-height:1; padding:14px 6px;
  font-family:var(--rf-sans); font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; overflow:visible;
}
#global_menu > ul > li > a:after{
  content:""; position:absolute; left:6px; right:6px; bottom:2px; height:1px;
  background:var(--rf-gold); transform:scaleX(0); transform-origin:right center;
  transition:transform .45s var(--rf-ease);
}
#global_menu > ul > li > a:hover:after,
#global_menu > ul > li.current-menu-item > a:after{ transform:scaleX(1); transform-origin:left center; }
#global_menu > ul > li.current-menu-item > a{ color:var(--rf-gold-lt); }
#header.is-scrolled #global_menu > ul > li > a{ height:74px; line-height:74px; padding:0 6px; }
#header.is-scrolled #global_menu > ul > li > a:after{ bottom:26px; }

/* ヘッダーの登場を素早く（既定は2秒待ち＝第一印象を損ねていた） */
.pc #header.animate{
  -webkit-animation:opacityAnimation .8s var(--rf-ease) forwards .15s;
  animation:opacityAnimation .8s var(--rf-ease) forwards .15s;
}

/* ------------------------------------------------------------
   3. ヒーロー（トップのスライダー）
   ------------------------------------------------------------ */
/* 写真の情報量に負けないよう、上下を締めるスクリムを重ねる */
#index_slider_wrap:after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% 46%,rgba(7,23,34,.10) 0%,rgba(7,23,34,.60) 100%),
    linear-gradient(180deg,rgba(7,23,34,.58) 0%,rgba(7,23,34,.14) 34%,rgba(7,23,34,.40) 72%,rgba(7,23,34,.86) 100%);
}
#index_slider .caption{ width:min(1080px,86vw); }
#index_slider .caption_inner{ position:relative; padding-bottom:2vh; }
/* 文字の背後だけをさらに落とし、写真の白い部分でも読めるようにする */
#index_slider .caption_inner:before{
  content:""; position:absolute; left:50%; top:50%; z-index:-1; pointer-events:none;
  transform:translate(-50%,-50%); width:min(1180px,98vw); height:190%;
  background:radial-gradient(58% 50% at 50% 50%,
    rgba(5,17,26,.74) 0%, rgba(5,17,26,.52) 44%, rgba(5,17,26,.18) 70%, rgba(5,17,26,0) 86%);
}

/* 見出しの上に細い金の罫 */
#index_slider .logo_desc_area:before{
  content:""; display:block; width:54px; height:1px; margin:0 auto 30px;
  background:linear-gradient(90deg,transparent,var(--rf-gold) 22%,var(--rf-gold) 78%,transparent);
}
#index_slider .item1 .catch,
#index_slider .item2 .catch,
#index_slider .item3 .catch{
  font-family:var(--rf-serif); font-weight:300;
  font-size:clamp(36px,5.4vw,74px) !important;
  line-height:1.14; letter-spacing:.012em;
  text-shadow:0 2px 34px rgba(0,0,0,.5);
  text-wrap:balance;
}
#index_slider .item1 .desc,
#index_slider .item2 .desc,
#index_slider .item3 .desc{
  font-family:var(--rf-sans); font-weight:300;
  font-size:clamp(13px,1.15vw,16px) !important;
  line-height:1.95; letter-spacing:.055em;
  color:rgba(255,255,255,.92) !important;
  max-width:660px; margin:32px auto 0;
  text-shadow:0 1px 3px rgba(0,0,0,.65), 0 2px 22px rgba(0,0,0,.7);
}

/* キャプションの登場（既定の2秒待ち→0.35秒 + わずかな上昇） */
@keyframes rfRise{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;} }
#index_slider .item.slick-active .caption .item1,
#index_slider .logo_desc_area.animate,
#index_slider .logo_desc_area.animate2{
  -webkit-animation:rfRise 1.15s var(--rf-ease) forwards .35s;
  animation:rfRise 1.15s var(--rf-ease) forwards .35s;
}

/* スクロールを促す縦線 */
#index_header_content:after{
  content:""; position:absolute; left:50%; bottom:0; z-index:6;
  width:1px; height:74px; margin-left:-.5px; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.45));
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%);
  mask-image:linear-gradient(180deg,transparent,#000 30%);
  animation:rfScrollCue 2.6s var(--rf-ease) infinite;
  transform-origin:bottom center;
}
@keyframes rfScrollCue{
  0%,100%{ transform:scaleY(.45); opacity:.35; }
  50%    { transform:scaleY(1);   opacity:1;  }
}

/* ------------------------------------------------------------
   4. 本文セクション（index_content1）
   ------------------------------------------------------------ */
.index_content1{
  width:min(1080px,88vw);
  padding:clamp(84px,10vw,140px) 0 clamp(84px,10vw,136px);
}
.index_content1 .catch{
  position:relative;
  font-family:var(--rf-serif); font-weight:300;
  font-size:clamp(28px,3.5vw,48px) !important;
  line-height:1.34; letter-spacing:.012em; color:var(--rf-ink);
  max-width:900px; margin:0 auto 34px; text-wrap:balance;
  padding-top:44px;
}
.index_content1 .catch:before{
  content:""; position:absolute; top:0; left:50%; margin-left:-27px;
  width:54px; height:1px;
  background:linear-gradient(90deg,transparent,var(--rf-gold) 22%,var(--rf-gold) 78%,transparent);
}
.index_content1 .desc{
  font-family:var(--rf-sans); font-weight:300;
  font-size:clamp(14px,1.12vw,16px) !important;
  line-height:2.05; letter-spacing:.03em; color:var(--rf-body);
  max-width:760px; margin:0 auto clamp(48px,5vw,68px); text-align:center;
}
.index_content1 .desc:last-child{ margin-bottom:0; }

/* 3点のイラストを1枚のパネルに納める。白背景のPNGと透過PNGが
   混在しているため multiply で地色に馴染ませ、見え方を揃えている。 */
.index_content1 .image_list{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin:0 0 clamp(52px,6vw,76px) !important;
  padding:clamp(20px,2.6vw,38px) clamp(10px,1.4vw,20px);
  background:linear-gradient(180deg,#f8fafb 0%,#edf1f4 100%);
  border:1px solid var(--rf-rule); border-radius:3px;
}
.index_content1 .image_list:after{ display:none; }
.index_content1 .image_list img{
  float:none !important; width:100% !important; height:auto;
  -webkit-box-sizing:border-box; box-sizing:border-box;
  aspect-ratio:3/2; object-fit:contain; display:block;
  padding:0 clamp(6px,0.9vw,14px);
  mix-blend-mode:multiply; background:transparent;
  transition:transform .8s var(--rf-ease), opacity .8s var(--rf-ease);
  opacity:.94;
}
.index_content1 .image_list img:hover{ transform:scale(1.05); opacity:1; }
/* 3枚目は絵柄が画面いっぱいまで伸びるため、余白を足して他2枚と揃える */
.index_content1 .image_list img:nth-child(3){
  padding:0 clamp(14px,1.9vw,30px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
}

/* ------------------------------------------------------------
   5. パララックス帯
   ------------------------------------------------------------ */
.index_parallax{ height:clamp(400px,54vh,600px); }
.index_parallax .overlay{
  background:linear-gradient(180deg,rgba(7,23,34,.74) 0%,rgba(7,23,34,.56) 45%,rgba(7,23,34,.80) 100%) !important;
}
.index_parallax .caption{ width:min(940px,86vw); }
.index_parallax .catch{
  position:relative; padding-top:44px; margin:0 !important;
  font-family:var(--rf-serif); font-weight:300;
  font-size:clamp(24px,3.1vw,44px) !important;
  line-height:1.42; letter-spacing:.018em; color:#fff; text-wrap:balance;
}
.index_parallax .catch:before{
  content:""; position:absolute; top:0; left:50%; margin-left:-27px;
  width:54px; height:1px;
  background:linear-gradient(90deg,transparent,var(--rf-gold) 22%,var(--rf-gold) 78%,transparent);
}

/* ------------------------------------------------------------
   6. 下層ページのヘッダー
   ------------------------------------------------------------ */
#page_header{ height:clamp(340px,58vh,560px); }
body.error404 #page_header{ height:clamp(420px,72vh,720px); }
#page_header:after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(115% 80% at 50% 50%,rgba(7,23,34,.14) 0%,rgba(7,23,34,.62) 100%),
    linear-gradient(180deg,rgba(7,23,34,.66) 0%,rgba(7,23,34,.26) 40%,rgba(7,23,34,.72) 100%);
}
#page_header_catch{ width:min(1000px,88vw); }
#page_header_catch .catch{
  position:relative;
  font-family:var(--rf-serif); font-weight:300;
  font-size:clamp(38px,5.2vw,72px) !important;
  line-height:1.16; letter-spacing:.05em;
  padding-bottom:34px;
  text-shadow:0 2px 30px rgba(0,0,0,.45);
}
#page_header_catch .catch:after{
  content:""; position:absolute; bottom:0; left:50%; margin-left:-27px;
  width:54px; height:1px;
  background:linear-gradient(90deg,transparent,var(--rf-gold) 22%,var(--rf-gold) 78%,transparent);
}
#page_header .catch.animate,#page_header .catch.animate2,
#page_header .desc.animate,#page_header .desc.animate2{
  -webkit-animation:rfRise 1.1s var(--rf-ease) forwards .3s;
  animation:rfRise 1.1s var(--rf-ease) forwards .3s;
}

/* ------------------------------------------------------------
   7. 本文（Company / Contact / 記事）
   ------------------------------------------------------------ */
#main_contents{
  width:min(860px,88vw);
  padding:clamp(72px,9vw,124px) 0 clamp(88px,10vw,144px);
}
.post_content{ font-size:16px; line-height:2; color:var(--rf-body); }

/* 「Company」「Contact」を小見出しラベルとして扱う */
body.page .post_content > p.has-medium-font-size{
  margin:0 0 22px; text-align:center;
}
body.page .post_content > p.has-medium-font-size strong{
  display:inline-block;
  font-family:var(--rf-sans); font-weight:500; font-size:11px !important;
  letter-spacing:.32em; text-transform:uppercase; color:var(--rf-gold);
}
/* リード文 */
body.page .post_content > p:not(.has-medium-font-size):not(:empty){
  font-family:var(--rf-serif); font-weight:300;
  font-size:clamp(22px,2.5vw,30px); line-height:1.6; letter-spacing:.01em;
  color:var(--rf-ink); text-align:center;
  margin:0 auto clamp(48px,6vw,72px); max-width:640px;
}

/* --- 会社情報テーブル --- */
.post_content .company-info{ margin:0 auto; max-width:640px; }
.post_content .company-info table{
  width:100%; border-collapse:collapse; font-size:15px; line-height:1.75;
  border-top:1px solid var(--rf-rule);
}
.post_content .company-info caption{
  border:0 !important; padding:0 0 20px !important;
  font-family:var(--rf-sans); font-weight:500; font-size:11px !important;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--rf-muted); text-align:left; caption-side:top;
}
.post_content .company-info th,
.post_content .company-info td{
  border:0 !important; border-bottom:1px solid var(--rf-rule) !important;
  background:transparent !important;
  padding:20px 0 !important; vertical-align:top; line-height:1.8;
}
.post_content .company-info th{
  width:32%; text-align:left !important; font-weight:500;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--rf-muted); white-space:nowrap; padding-top:23px !important;
}
.post_content .company-info td{ color:var(--rf-ink); font-size:16px; }
.post_content .company-info td a{
  color:var(--rf-ink); text-decoration:none;
  border-bottom:1px solid rgba(201,160,106,.55); padding-bottom:2px;
}
.post_content .company-info td a:hover{ color:var(--rf-gold); border-bottom-color:var(--rf-gold); }

/* --- Contact のメールアドレスをボタン化 --- */
body.page .post_content h6.wp-block-heading{ text-align:center; margin:0; }
body.page .post_content h6.wp-block-heading a{
  display:inline-block; padding:20px clamp(28px,4vw,52px);
  font-family:var(--rf-sans); font-weight:500;
  font-size:15px; letter-spacing:.08em; line-height:1;
  color:var(--rf-ink); text-decoration:none;
  border:1px solid rgba(201,160,106,.7); border-radius:2px;
}
body.page .post_content h6.wp-block-heading a:hover{
  color:#fff; background:var(--rf-navy-800); border-color:var(--rf-navy-800);
}

/* ------------------------------------------------------------
   8. フッター
   ------------------------------------------------------------ */
#footer{ background:var(--rf-navy-900); color:rgba(255,255,255,.68); min-width:0; }
#footer_inner{
  width:min(1080px,88vw);
  padding:clamp(76px,8vw,116px) 0 clamp(44px,5vw,64px);
  text-align:center;
}
#footer_logo img{ margin:0 auto 26px; width:44px; height:auto; }
#footer_information p{
  font-family:var(--rf-serif); font-weight:300;
  font-size:clamp(20px,2.1vw,26px) !important; line-height:1.6;
  letter-spacing:.09em; color:rgba(255,255,255,.9);
}
#footer_menu{
  background:transparent; height:auto; line-height:1;
  border-top:1px solid rgba(255,255,255,.11);
}
#footer_menu ul{ padding:30px 0; }
#footer_menu ul li{ margin:0 clamp(12px,1.6vw,24px); }
#footer_menu ul li a{
  font-family:var(--rf-sans); font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.72) !important; text-decoration:none;
}
#footer_menu ul li a:hover{ color:var(--rf-gold-lt) !important; }
#copyright{
  background:transparent !important; color:rgba(255,255,255,.4) !important;
  border-top:1px solid rgba(255,255,255,.08);
  font-family:var(--rf-sans); font-size:11px; letter-spacing:.18em;
  height:auto; line-height:1; padding:26px 0;
}
#footer a{ color:rgba(255,255,255,.72); }

/* ページトップ */
#return_top a{
  width:54px; height:54px; line-height:54px;
  background:rgba(7,23,34,.9) !important;
  border:1px solid rgba(201,160,106,.4);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
#return_top a:before{ color:var(--rf-gold-lt); }
#return_top a:hover{ background:var(--rf-gold) !important; border-color:var(--rf-gold); }
#return_top a:hover:before{ color:var(--rf-navy-900); }

/* ------------------------------------------------------------
   9. モバイル（<=1050px）
   ------------------------------------------------------------ */
@media screen and (max-width:1050px){
  #header{
    background:rgba(7,23,34,.92);
    -webkit-backdrop-filter:saturate(150%) blur(14px);
    backdrop-filter:saturate(150%) blur(14px);
    border-bottom:1px solid rgba(201,160,106,.2);
    box-shadow:none;
  }
  #header:before{ display:none; }
  /* 既定ではハンバーガーとリンクが黒＝紺地に埋もれていたため白へ */
  #header a,#header.active a,#menu_button:before,#header.is-scrolled a{ color:#fff; }
  #header a:hover,#menu_button:hover:before{ color:var(--rf-gold-lt); }
  #header_logo{ left:20px; }
  #header_logo .mobile_logo_image{ width:34px; height:auto; }

  #index_slider .caption{ width:88vw; }
  #index_slider .logo_desc_area:before{ margin-bottom:22px; width:44px; }
  #index_header_content:after{ height:54px; }

  .index_content1{ width:auto; padding:clamp(60px,12vw,84px) 24px; }
  .index_content1 .image_list{ margin:0 0 clamp(36px,8vw,52px) !important; gap:10px; }
  #main_contents{ width:auto; margin:0 24px; }
  #footer_inner{ width:auto; padding:64px 24px 40px; }
  #footer_menu ul{ padding:22px 0; }
  #footer_menu ul li{ display:inline; margin:0 14px; }
  #footer_menu ul li a{ display:inline; padding:0; border:0; }
  #return_top a{ width:46px; height:46px; line-height:46px; }
}
@media screen and (max-width:650px){
  .index_content1 .image_list{ grid-template-columns:1fr 1fr; }
  .index_content1 .image_list img:nth-child(3){ grid-column:1 / -1; aspect-ratio:16/7; }
  .post_content .company-info th{ width:38%; font-size:10px; letter-spacing:.16em; }
  .post_content .company-info td{ font-size:15px; }
  body.page .post_content h6.wp-block-heading a{
    display:block; padding:18px 14px; font-size:14px; letter-spacing:.04em;
    word-break:break-all;
  }
}

/* ドロワー（モバイルメニュー） */
#drawer_menu{ background:var(--rf-navy-900); }
#mobile_menu a{
  background:transparent; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.09);
  font-family:var(--rf-sans); font-size:12px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
}
#mobile_menu li li a{ background:transparent; }
#mobile_menu a:hover,#drawer_menu .close_button:hover,#mobile_menu .child_menu_button:hover{
  background:rgba(201,160,106,.14); color:var(--rf-gold-lt);
}

/* ------------------------------------------------------------
   10. アクセシビリティ：モーション低減
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  #index_header_content:after{ animation:none; opacity:.6; }
  #index_slider .item.slick-active .caption .item1,
  #index_slider .logo_desc_area.animate,
  #index_slider .logo_desc_area.animate2,
  #page_header .catch.animate,#page_header .catch.animate2{
    animation-duration:.01ms !important; animation-delay:0ms !important;
  }
  .index_content1 .image_list img:hover{ transform:none; }
}