@charset "UTF-8";

/* ==========================================================================
   Base Settings
   ========================================================================== */

html {
  font-size: 62.5%;
  /*ベース10px*/
  height: 100%;
}

body {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 1.6rem; /* 16px相当 */
    color: #707070;
    letter-spacing: 0.05em;
    line-height: 2;
    position: relative;
    text-align: justify;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}
a:hover {
    opacity: 0.7;
}
a[class*="btn-"]:hover {
    opacity: 1;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
.sp_none, .pc_only{
    display: block;
}
.sp_only, .pc_none{
    display: none;
}
/* アンカーリンクで飛んだ際の位置調整 */
section[id], div[id] {
    scroll-margin-top: 100px;
}

/* ==========================================================================
   Header Layout
   ========================================================================== */
header {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.6); /* rgba修正 */
    position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: background-color 0.3s ease;
}

.container__header {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 0 20px; /* 左に20pxの余白 */
}

.header__main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

/* --- Logo --- */
.header-logo {
    display: block;
    width: 280px; /* ロゴのサイズ調整 */
}

/* --- Navigation Area --- */
.pc-global-nav {
    display: flex;
    align-items: center;
    margin-left: auto; /* ロゴとナビの間を空ける */
}

.pc-global-nav ul {
    display: flex;
    align-items: center;
    gap: 30px; /* メニュー間の余白 */
}

/* 通常テキストリンク（買いたい、売りたい、選ばれる理由） */
.pc-global-nav a {
    color: #172A88; /* 青文字 */
    font-weight: 700;
    font-size: 1.6rem; /* 16px -> 1.6rem */
}
.pc-global-nav li:nth-last-child(3) a{
    color: #707070;
}

/* --- CV Buttons (会社案内 & お問い合わせ) --- */
/* 右側の2つのボタン用の特別スタイル */
.pc-global-nav__btn {
    display: flex !important; /* flex指定を強制 */
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 80px;
    height: 80px; /* ヘッダーの高さ一杯にする */
    color: #fff !important; /* 文字色白 */
    font-size: 1rem !important; /* 10px -> 1rem */
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    padding: 0 0 10px 0;
}
.pc-global-nav__btn img{
    width: 40%;
}

/* 会社案内ボタン（青） */
.pc-global-nav li:nth-last-child(2) a.pc-global-nav__btn {
    background-color: #172A88;
}
.pc-global-nav li:nth-last-child(2) a.pc-global-nav__btn img{
    background-color: #172A88;
    padding-bottom: 10px;
}

/* お問い合わせボタン（茶） */
.pc-global-nav li:last-child a.pc-global-nav__btn {
    background-color: #B37642;
}
.pc-global-nav li:last-child a.pc-global-nav__btn img{
    padding-bottom: 15px;
}

/* 上記のmarginネガティブが難しい場合、以下のようにHTML構造を変えるのがベストですが
   今回はCSSだけで見た目を整えるため、ulのgapを調整します */
.pc-global-nav ul {
    gap: 0; /* 一旦ギャップを0に */
}
.pc-global-nav li:not(:nth-last-child(-n+2)) {
    margin-right: 30px; /* ボタン以外のメニューに右余白をつける */
}

/* --- Hamburger Menu (PCでは非表示) --- */
.hbg-button {
    display: none;
}
.nav-menu {
    display: none;
}

/* ==========================================================================
   Breadcrumb (パンくずリスト)
   ========================================================================== */
.breadcrumb {
    width: 100%;
    padding: 20px 0;
}

.breadcrumb .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.2rem; /* 12px -> 1.2rem */
    color: #707070; /* グレー文字 */
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li:not(:last-child):after {
    content: ">";
    margin: 0 10px;
    font-family: Arial, sans-serif; /* 記号をきれいに見せる */
}

.breadcrumb a {
    color: #707070;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Responsive (Tablet / SP)
   ========================================================================== */
@media screen and (max-width: 960px) {
    .sp_none, .pc_only{
        display: none;
    }
    .sp_only, .pc_none{
        display: block;
    }
    /* アンカーリンクで飛んだ際の位置調整 */
    section[id], div[id] {
        scroll-margin-top: 80px;
    }
    .container__header{
        padding: 0 20px;
    }
    .header__main {
        height: 60px;
    }
    .header-logo {
        width: 180px;
    }
    header.active {
        background-color: #fff;
    }
    /* PCナビを非表示にしてハンバーガーを表示 */
    .pc-global-nav {
        display: none;
    }

    /* --------------------------------------
       1. ハンバーガーボタン
       -------------------------------------- */
    .hbg-button {
        display: block;
        width: 30px;
        height: 20px;
        position: relative;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 2000; /* メニュー(z-index:1900)より手前に表示させる */
        margin-left: auto; /* ヘッダー内で右寄せ */
    }

    .hbg-button__line {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #172A88; /* 通常時の色は濃い青 */
        position: absolute;
        left: 0;
        transition: 0.3s;
        border-radius: 2px;
    }

    /* 3本線の位置設定 */
    .hbg-button__line:nth-child(1) { top: 0; }
    .hbg-button__line:nth-child(2) { top: 50%; transform: translateY(-50%); }
    .hbg-button__line:nth-child(3) { bottom: 0; }

    /* --- クリックされて active になった時の動き（×印にする） --- */

    /* 1本目：45度回転して中央へ */
    .hbg-button.active .hbg-button__line:nth-child(1) {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }

    /* 2本目：透明にして消す */
    .hbg-button.active .hbg-button__line:nth-child(2) {
        opacity: 0;
    }

    /* 3本目：-45度回転して中央へ */
    .hbg-button.active .hbg-button__line:nth-child(3) {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
    }


    /* --------------------------------------
       2. ナビゲーションの中身（青い背景部分）
       -------------------------------------- */
    .nav-menu {
        display: block;
        position: fixed;
        top: 0;
        right: -100%; /* 初期状態は画面の右外へ隠す */
        width: 100%;
        height: 100vh;;
        height: 100dvh;
        background-color: #172A88; /* 背景色（濃い青） */
        color: #fff;
        z-index: 9999; /* ボタンより下、ヘッダーより上 */
        transition: right 0.4s ease; /* スライドのアニメーション速度 */
        overflow-y: auto; /* 縦スクロール可 */
        margin-top: 60px;
        padding: 20px 0 200px;
    }

    /* メニューが開いた時（activeクラス付与時） */
    .nav-menu.active {
        right: 0; /* 画面内へ移動 */
    }

    /* 中身のレイアウト */
    .nav-inner {
        padding: 0 5% 0 0;
        margin-left: auto; /* コンテンツ全体を右寄せ */
        width: 50%;
    }

    /* 各メニューリンクのデザイン */
    .nav-item > a {
        display: block;
        font-weight: bold;
        padding: 10px 0;
        color: #fff;
    }

    /* グループ見出し（選ばれる理由、会社案内など） */
    .nav-item.group-title {
        font-weight: 700;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        color: #fff;
    }

    /* サブメニュー（小さい文字） */
    .nav-item.-sub {
        font-size: 14px;
        margin-bottom: 10px;
    }
    .nav-item.-sub a {
        display: block;
        color: rgba(255, 255, 255, 0.8);
        padding: 0;
    }

    /* LINEボタン */
    .line-btn {
        margin-top: 40px;
        text-align: right;
    }
    .line-btn img {
        width: 40px;
        height: auto;
        border-radius: 8px;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
    width: 100%;
    background-color: #172A88; /* 指定の青色 */
    color: #fff;
    padding: 60px 0 20px;
    font-size: 1.4rem; /* 14px相当 */
}

.footer-inner {
    max-width: 1200px; /* コンテナ幅（headerと合わせる） */
    margin: 0 auto;
    padding: 0 20px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 60px;
}

/* --- Left Area (Logo & SNS) --- */
.footer-left {
    width: 250px; /* ロゴエリアの幅確保 */
    flex-shrink: 0;
}

.footer-logo img {
    width: 250px; /* ロゴサイズ調整 */
    height: auto;
    margin-bottom: 20px;
}
.footer-sns{
    text-align: right;
}
.footer-sns img {
    width: 40px; /* LINEアイコンサイズ */
    height: auto;
    transition: opacity 0.3s;
}

.footer-sns a:hover {
    opacity: 0.8;
}

/* --- Center Area (Navigation) --- */
.footer-nav {
    display: flex;
    gap: 60px; /* カラム間の余白 */
    flex-grow: 1; /* 余ったスペースを使う */
    justify-content: center; /* 中央寄せ */
}

/* カラム共通設定 */
.footer-nav-col {
    display: flex;
    flex-direction: column;
    min-width: 160px; /* 各カラムの最低幅 */
}

/* 1列目：メインリンク（買いたい・売りたい・お問い合わせ） */
.main-links a {
    margin-bottom: 15px;
}

.main-links a {
    display: block;
    font-size: 1.6rem; /* 16px -> 1.6rem */
    font-weight: 700;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* 下線 */
    position: relative;
    transition: 0.3s;
}
.nav-list a{
    transition: 0.3s;
}
.main-links a:hover,.nav-list a:hover {
    padding-left: 5px; /* ホバー時に少し右へ動く演出 */
}
.nav-list li {
    margin-bottom: 10px;
}

/* --- Right Area (Back to Top) --- */
.back-to-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #172A88;
    text-align: center;
    font-size: 1rem; /* 10px相当 */
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.2;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* JSで is-visible がついたら表示 */
.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* クリック可能に戻す */
}

.back-to-top .arrow-up {
    display: block;
    width: 14px;
    height: 14px;
    border-top: 2px solid #172A88;
    border-right: 2px solid #172A88;
    transform: rotate(-45deg); /* 上向き矢印を作る */
    margin-bottom: 10px;
    transition: transform 0.3s;
}

.back-to-top:hover .arrow-up {
    transform: rotate(-45deg) translate(-3px, 3px); /* ホバー時に少し上に動く */
}

/* --- Bottom Area (Copyright & Policy) --- */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* 区切り線が必要であれば */
    padding-top: 20px;
    font-size: 1.1rem; /* 11px -> 1.1rem */
}

.bottom-links a {
    opacity: 0.8;
}

.bottom-links a:hover {
    opacity: 1;
    text-decoration: underline;
}

.copyright {
    opacity: 0.6;
    font-family: Arial, sans-serif;
}
.sp-float-menu {
    display: none;
}

/* ==========================================================================
   Responsive (Tablet / SP)
   ========================================================================== */
@media screen and (max-width: 960px) {
    .footer {
        padding: 40px 0 20px;
    }

    .footer-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        padding-bottom: 20px;
    }

    /* 左エリア（ロゴ・SNS） */
    .footer-left {
        width: 100%;
        margin-bottom: 0;
        text-align: left; /* 左揃え */
    }
    .footer-logo img {
        width: 180px;
    }

    .footer-sns {
        margin-top: 15px;
        text-align: left; /* 左揃え */
    }

    /* --- ナビゲーション（ここを修正） --- */
    .footer-nav {
        flex-direction: row;      /* 横並び方向 */
        flex-wrap: wrap;          /* 折り返しを許可 ★重要 */
        justify-content: space-between; /* 両端に配置 */
        gap: 30px 0;              /* 縦の間隔30px、横は0(space-betweenで調整) */
        width: 100%;
    }

    .footer-nav-col {
        width: 46%;
        min-width: auto;
    }
    .footer-nav-col:last-child {
        margin-left: auto;
    }
    
    .main-links a {
        font-size: 1.4rem;
    }

    /* Back to Top ボタン調整 */
    /* JSとfixedで制御するため、配置プロパティはリセットせず、サイズのみ調整します */
    .back-to-top {
        right: 15px;      /* スマホは少し端に寄せる */
        bottom: 15px;
        transform: scale(0.9); /* 少し全体を小さく */
    }
    
    /* 最下部 */
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start; /* 左揃え */
        gap: 15px;
        margin-top: 20px;
        width: 100%;
    }
    /* --- SP Float Menu --- */
    .sp-float-menu {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px; /* 高さ60px */
        z-index: 1000; /* BackToTop(999)より上にする */
        box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
        opacity: 0;              /* 最初は透明にする */
        visibility: hidden;      /* 最初はマウス反応もしない */
        transition: opacity 0.3s; /* 表示される時にフワッとさせる */
    }
    .sp-float-menu.is-visible {
        opacity: 1 !important;
        visibility: visible !important;
    }
    .float-btn {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        color: #fff;
        font-weight: bold;
        font-size: 1.8rem;
        transition: opacity 0.3s;
    }
    .btn-search {
        background-color: #B37642;
    }

    .btn-assessment {
        background-color: #172A88;
    }

    .float-btn:hover {
        opacity: 0.9;
    }

    /* 
       ★重要：フロートメニューがある分、フッター本体系が隠れないように
       body または footer に余白をつける必要があります。
       ここでは footer の padding-bottom を増やします。
    */
    .footer {
        padding-bottom: 80px; /* 元の余白 + 60px */
    }
}

/* ==========================================================================
   LINE Slide Widget
   ========================================================================== */
.line-widget {
    position: fixed;
    top: 50%;
    right: -180px; /* QRコードの幅分だけ右に隠しておく */
    transform: translateY(-50%);
    z-index: 990; /* BackToTop(999)より下 */
    
    /* ★追加：初期状態は非表示 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* 見えてない時はクリック不可にする */

    /* ★修正：スライド(right)とフェード(opacity)の両方に動きをつける */
    transition: 
        right 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        opacity 0.3s ease,
        visibility 0.3s ease;

    display: flex;
    align-items: center;
}

/* ★追加：表示トリガー用のクラス */
.line-widget.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* クリック可能に戻す */
}

/* 開いた時のクラス（JSで付与） */
.line-widget.is-open {
    right: 0; /* 出てくる */
}

/* --- タブ部分（左側の突起） --- */
.line-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #e6e6e6; /* 薄いグレー */
    color: #707070;
    text-decoration: none;
    padding: 15px 8px;
    width: 50px; /* タブの幅 */
    border-radius: 10px 0 0 10px; /* 左側だけ角丸 */
    cursor: pointer;
    position: relative;
    height: 180px;
}

/* LINEアイコン */
.line-icon-wrap {
    width: 30px;
    margin-bottom: 10px;
}
.line-icon-img {
    width: 100%;
    height: auto;
    display: block;
}

/* 縦書きテキスト */
.line-text {
    writing-mode: vertical-rl; /* 縦書き */
    text-orientation: upright; /* 文字を正立 */
    letter-spacing: 0.1em;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #707070;
}

/* 矢印アイコン（CSSで作る） */
.line-arrow {
    width: 8px;
    height: 8px;
    border-top: 2px solid #E3E3E3;
    border-left: 2px solid #E3E3E3;
    transform: rotate(-45deg); /* 「<」の形 */
    transition: transform 0.3s;
}

/* 開いた時は矢印を逆にする */
.line-widget.is-open .line-arrow {
    transform: rotate(135deg); /* 「>」の形 */
    margin-left: 5px; /* 位置微調整 */
}

/* --- コンテンツ部分（QRコード） --- */
.line-content {
    background-color: #e6e6e6; /* タブと同じ色 */
    padding: 20px;
    width: 180px; /* QRエリアの幅 */
    height: auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.line-qr-box img {
    width: 100%;
    height: auto;
    display: block;
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
}

/* ==========================================================================
   Responsive (SP)
   ========================================================================== */
@media screen and (max-width: 960px) {
    .line-widget {
        right:-180px; /* SPでもQR部分は隠しておく */
    }
    
    /* SPではQR部分（右側）は絶対に見えないように非表示にしても良いですが、
       今回は「右にはみ出してるだけ」にしておきます。
       ただし、誤って横スクロールが発生しないよう body { overflow-x: hidden; } が必要です。
       もし横スクロールが出る場合は .line-content { display: none; } してください。
    */
   .line-content {
       display: none; /* SPではQRコード部分は不要なので消す */
   }
   
   /* タブだけが右端に張り付いている状態にする */
   .line-widget {
       right: 0; /* コンテナ自体を画面端に */
   }
   
   /* タブの位置調整 */
   /* コンテナ(right:0)の中に、タブとコンテンツが並んでいるため、
      コンテンツを消した分、タブが自然と右端に来ます */
}

/* ============================================
   下層ページ共通レイアウト
   ============================================ */

/* 共通コンテナ（幅制限と中央寄せ） */
.container {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
}

/* --------------------------------------------
   パンくずリスト (.breadcrumb)
   -------------------------------------------- */
.breadcrumb {
    padding: 15px 0;
    font-size: 1.2rem;
    font-weight: 500;
}
.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

/* 矢印（>）の装飾 */
.breadcrumb li:not(:last-child)::after {
    content: ">";
    margin: 0 10px;
    font-size: 1.2rem;
}

.breadcrumb a {
    text-decoration: none;
    transition: color 0.3s;
}

.breadcrumb a:hover {
    color: #172A88; /* リンクホバー色 */
}

/* --------------------------------------------
   ページタイトル (.page-header)
   -------------------------------------------- */
.page-header {
    margin: 30px 0 100px;
    text-align: center;
}

/* 英語見出し */
.page-header__en {
    font-size: 6.2rem; /* 大きく */
    font-weight: 500;
    margin: 0 0 10px 0;
    font-family: 'Gabarito', sans-serif; /* 英語見出し用のフォント */
    color: #172A88;
    line-height: 1;
}

/* 日本語見出し */
.page-header__jp {
    font-size: 2.6rem;
    margin: 0;
    font-weight: bold;
}

/* --------------------------------------------
   リード文 (.page-lead)
   -------------------------------------------- */

.page-header__text {
    font-size: 1.6rem; /* 16px相当 */
    line-height: 2;
    text-align: center;
    margin-top: 30px;
}

/* スマホ対応 */
@media screen and (max-width: 960px) {
    .page-header {
        margin: 30px 0 60px;
    }
    .page-header__en {
        font-size: 4.8rem;
    }
    .page-header__jp {
        font-size: 2rem;
    }
    .page-header__text {
        margin-bottom: 50px;
        text-align: left; /* スマホでは左寄せの方が読みやすい場合が多い */
    }
    .page-header__text br {
        display: none; /* スマホで強制改行を無効化 */
    }
}

/* --------------------------------------------
   リード文 (.page-lead)
   -------------------------------------------- */
.page-content {
    margin-bottom: 100px;
}