@charset "UTF-8";
/*
    Template: swell
    Theme Name: フィリール（fi-real）子テーマ
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ（fi-real.netデザイン一新用）
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/



#fixed-sidebar-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-40%);
    z-index: 99;
    background-color:#FD7E00;
    color: #fff;
    padding: 1em .5em;
    border-radius: 10px 0 0 10px;
		border:solid 1px#fff; 
    writing-mode: vertical-rl; 
    text-align: center;
}
#fixed-sidebar-menu .swl-inline-icon {
    width: 15px;
    height: 24px;
    margin-bottom: 2px;
}
#fixed-sidebar-menu a {
    color: #fff;
}

#foxed-sidebar-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 0;
    top: 28%;
    transform: translateY(-40%);
    z-index: 99;
    background-color:#FD7E00;
    color: #fff;
    padding: 1em .5em;
    border-radius: 10px 0 0 10px;
		border:solid 1px#fff; 
    writing-mode: vertical-rl; 
    text-align: center;
}
#foxed-sidebar-menu .swl-inline-icon {
    width: 15px;
    height: 24px;
    margin-bottom: 2px;
}
#foxed-sidebar-menu a {
    color: #fff;
}


/* =========================================================
   fi-real メインビジュアル（フロントページ）
   ・黒ベース／ネイビー・白の差し色／オレンジはCTAのみ
   ・見出し Noto Serif JP／角は直角
   ・背景画像 images/mv-lathe.png（左が暗く見出しが乗る構図）
   ========================================================= */
.firiel-mv{
    --mv-black:#0a0b0e; --mv-navy:#0a1628; --mv-navy-line:#16283f;
    --mv-fog:#c3c9d3; --mv-steel:#8b95a6; --mv-orange:#FD7E00; --mv-orange-soft:#ff934b;
    position:relative;
    /* コンテンツ幅を突き破って全面表示（フルブリード） */
    width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
    min-height:70.4vh; overflow:hidden;
    background:var(--mv-black); color:var(--mv-fog);
    display:flex; flex-direction:column; isolation:isolate;
    font-family:"Noto Sans JP", system-ui, sans-serif;
    line-height:1.75;
}
.firiel-mv *{box-sizing:border-box}
.firiel-mv__photo{
    position:absolute; inset:0; z-index:0;
    /* メディアライブラリの画像URLを参照（テーマ内 images/mv-lathe.png でも可） */
    background-image:url(https://fi-real.net/wp-content/uploads/2026/08/mv-lathe-1.png);
    background-size:cover; background-position:center right;
    animation:firielKen 20s ease-out both;
}
@keyframes firielKen{from{transform:scale(1.06)}to{transform:scale(1)}}
.firiel-mv__scrim{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      linear-gradient(90deg, rgba(6,8,12,.95) 0%, rgba(6,8,12,.72) 26%, rgba(6,8,12,.15) 52%, rgba(6,8,12,.05) 100%),
      linear-gradient(0deg, rgba(6,8,12,.88) 0%, rgba(6,8,12,0) 26%),
      linear-gradient(180deg, rgba(6,8,12,.6) 0%, rgba(6,8,12,0) 16%);
}
.firiel-mv__body{
    position:relative; z-index:4; flex:1; display:flex; align-items:center;
    padding:clamp(40px,7vw,80px) clamp(20px,4vw,54px);
}
.firiel-mv__lead{max-width:660px}
.firiel-mv__eyebrow{
    font-family:"EB Garamond", serif; font-style:italic; font-size:1.1rem; color:#aeb6c4;
    margin:0 0 24px; display:flex; align-items:center; gap:14px;
    opacity:0; animation:firielRise .8s .1s forwards;
}
.firiel-mv__eyebrow::before{content:""; width:34px; height:2px; background:var(--mv-orange)}
.firiel-mv__hl{
    font-family:"Noto Serif JP", serif; font-weight:900; color:#fff; margin:0;
    letter-spacing:.045em; font-size:clamp(2.4rem,6vw,4.7rem); line-height:1.22;
    text-shadow:0 2px 26px rgba(0,0,0,.55);
    opacity:0; animation:firielRise .9s .22s forwards;
}
.firiel-mv__hl .en{
    display:block; font-family:"EB Garamond", serif; font-weight:600; font-style:italic;
    font-size:.28em; letter-spacing:.08em; color:#aeb6c4; margin-top:18px; text-shadow:none;
}
.firiel-mv__desc{
    color:#d3d8e0; line-height:2; margin:26px 0 0; max-width:42ch;
    font-size:clamp(.9rem,1.3vw,1.02rem); text-shadow:0 1px 12px rgba(0,0,0,.5);
    opacity:0; animation:firielRise .9s .38s forwards;
}
.firiel-mv__acts{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; opacity:0; animation:firielRise .9s .5s forwards}
.firiel-mv__btn{
    font-family:"Noto Sans JP", sans-serif; font-size:.9rem; font-weight:700;
    padding:15px 30px; border-radius:0; text-decoration:none;
    display:inline-flex; align-items:center; gap:10px;
    transition:transform .18s, filter .18s, border-color .2s;
}
.firiel-mv__btn.is-primary{background:var(--mv-orange); color:#231200; box-shadow:0 12px 30px -12px rgba(253,126,0,.5)}
.firiel-mv__btn.is-primary:hover{transform:translateY(-2px); filter:brightness(1.05)}
.firiel-mv__btn.is-ghost{background:rgba(10,12,18,.35); border:1px solid #46525f; color:#eef1f5; font-weight:500}
.firiel-mv__btn.is-ghost:hover{border-color:#74808f; transform:translateY(-2px)}
@keyframes firielRise{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}

/* 下部バンド：NEWS ＋ コンタクト */
.firiel-mv__band{
    position:relative; z-index:4; margin-top:auto;
    border-top:1px solid var(--mv-navy-line);
    background:linear-gradient(rgba(10,22,40,.92), rgba(8,18,34,.9));
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    opacity:0; animation:firielRise 1s .64s forwards;
}
.firiel-mv__news{display:flex; align-items:center; gap:clamp(14px,2.5vw,26px); padding:13px clamp(20px,3vw,48px); border-bottom:1px solid var(--mv-navy-line)}
.firiel-mv__news .tag{font-family:"Oswald", sans-serif; letter-spacing:.2em; font-weight:600; color:#fff; font-size:.7rem; border-right:1px solid var(--mv-navy-line); padding-right:clamp(14px,2vw,22px)}
.firiel-mv__news .date{font-family:"Oswald", sans-serif; color:var(--mv-steel); font-size:.78rem; font-variant-numeric:tabular-nums; letter-spacing:.05em}
.firiel-mv__news .ttl{font-family:"Noto Serif JP", serif; color:#eef1f5; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1}
.firiel-mv__news .more{margin-left:auto; color:var(--mv-orange-soft); font-weight:700; font-size:.78rem; white-space:nowrap; text-decoration:none}
.firiel-mv__contact{display:flex; align-items:center; gap:clamp(16px,3vw,34px); padding:15px clamp(20px,3vw,48px); flex-wrap:wrap}
.firiel-mv__contact .tel{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.firiel-mv__contact .tel .num{font-family:"Noto Serif JP", serif; font-weight:700; color:#fff; font-size:clamp(1.3rem,2.4vw,1.75rem); letter-spacing:.02em; line-height:1; text-decoration:none}
.firiel-mv__contact .tel .num .pre{font-family:"Oswald", sans-serif; font-size:.5em; letter-spacing:.14em; color:var(--mv-steel); margin-right:8px; vertical-align:middle}
.firiel-mv__contact .tel .sub{font-size:.74rem; color:var(--mv-steel)}
.firiel-mv__contact .firiel-mv__btn{margin-left:auto}
/* MV右下のコンタクトCTAの文字を白に */
.firiel-mv__contact .firiel-mv__btn.is-primary{ color:#fff; }

@media(max-width:600px){
    .firiel-mv__news .date{display:none}
    .firiel-mv__contact .firiel-mv__btn{margin-left:0; width:100%; justify-content:center}
}
@media (prefers-reduced-motion:reduce){
    .firiel-mv__photo{animation:none}
    .firiel-mv__eyebrow,.firiel-mv__hl,.firiel-mv__desc,.firiel-mv__acts,.firiel-mv__band{animation:none; opacity:1; transform:none}
}

/* ヘッダーの高さを約1.3倍に（92px → 120px） */
.l-header__inner{ min-height:120px; }

/* =========================================================
   ヘッダーを「白背景・黒文字・黒ロゴ」に上書き
   （SWELLの透過ヘッダー .-transparent .-t-fff をCSSで解除）
   ※ position は変えずスクロール追従を維持
   ========================================================= */
/* 背景を白に（透過解除） */
.l-header.-transparent{ background-color:#fff !important; box-shadow:0 1px 0 rgba(0,0,0,.06); }
/* ヘッダー内のテキスト・リンクを黒に */
.l-header.-transparent.-t-fff a,
.l-header.-transparent.-t-fff .c-gnav .ttl,
.l-header.-transparent.-t-fff .c-gnav__link{ color:#111 !important; }
/* ただし「無料見積り相談」ボタン（SWELLブロックボタン）の文字は白のまま */
.l-header.-transparent.-t-fff .swell-block-button__link{ color:#fff !important; }
/* ヘッダーCTAの位置を少しだけ下げる */
.l-header .swell-block-button{ transform:translateY(13px); }
/* 検索などアイコンボタンを黒に */
.l-header.-transparent.-t-fff .c-iconBtn{ color:#111 !important; }
/* ハンバーガーの線を黒に */
.l-header.-transparent.-t-fff [class*="drawerBtn"] span{ background-color:#111 !important; }
/* ロゴ画像を新ロゴ（webp）に差し替え（黒化フィルタは解除） */
.l-header .c-headLogo__img{
    content:url("https://fi-real.net/wp-content/uploads/2026/08/%E3%83%95%E3%82%A3%E3%83%AA%E3%83%BC%E3%83%AB%E3%83%AD%E3%82%B4.webp") !important;
    filter:none !important;
    width:auto !important;
    height:auto !important;
    max-height:52px !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
}