/* ===== リセット & 基本設定 ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  width: 100%;
}
body {
  width: 100%;
  overflow-x: hidden; /* 横スクロール防止 */
  font-family: "Noto Sans JP", sans-serif;
}
/*============================
header
=============================*/
.header{
position:fixed;
top:0;
left:0;
width:100%;
z-index:999;
background:rgba(255,255,255,.54);
backdrop-filter:blur(4px);
}
.header-inner{
max-width:1400px;
height:90px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 60px;
}
.logo {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    transform: translateX(-20px);
}
.logo img{
width:70px;
display:block;
}
.logo span {
    font-size: 18px;
    font-weight: 800;
    color: #263338;
    letter-spacing: 2px;
    white-space: nowrap;
}
.menu{
display:flex;
align-items:center;
gap:45px;
font-weight:800;
font-size:15px;
list-style: none; /* ← 点を消す */
margin: 0;        /* ← デフォルトの余白も消す */
padding: 0;
}
.menu a{
text-decoration: none;
color: #000;
transition:.3s;
}
.menu a:hover{
color:#74848B;
}
.contact-btn{
background:#fff;
padding:16px 34px;
border-radius:25px;
color:#000!important;
font-weight:bold;
transition:0.3s ease;
}
.contact-btn:hover{
    background:#74848B;      
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(0,0,0,.25);
}
/*============================
SP
=============================*/

.hamburger{
    display:none;
}

.sp-menu{
    display:none;
}

@media(max-width:768px){

.header{

    background:rgba(255,255,255,.75); 
    backdrop-filter:blur(8px);

}

.header-inner{

    height:80px;
    padding:0 20px;

}
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}
.logo img{

    width:60px;

}
.logo span {
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 800;
    white-space: nowrap;
}
.pc-nav{

    display:none;

}

.hamburger{

    width:34px;
    height:28px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    cursor:pointer;

    z-index:1001;

}

.hamburger span{

    width:100%;
    height:2px;

    background:#74848B;

    transition:.4s;

    border-radius:20px;

}

/* × */
.hamburger.active span:nth-child(1){
    transform:translateY(12px) rotate(45deg);
}

.hamburger.active span:nth-child(2){
    opacity:0;
}

.hamburger.active span:nth-child(3){
    transform:translateY(-12px) rotate(-45deg);
}
.sp-menu{
    display:block;
    position:fixed;
    top:80px;
    right:-100%;
    width:280px;
    height:calc(100vh - 80px);

    background:#DCE0E2;

    transition:.4s ease;

    z-index:999;

    box-shadow:-10px 0 30px rgba(0,0,0,.3);
}

.sp-menu.active{
    right:0;
}
.sp-menu ul{
    list-style:none;
    margin:0;
    padding:40px 0;
}

.sp-menu li{
    border-bottom:1px solid rgba(255,255,255,.08);
}

.sp-menu a{
    display:block;
    padding:22px 35px;
    color:#fff;
    text-decoration:none;
    font-size:18px;
    font-weight:700;
    transition:.3s;
}

.sp-menu a:hover{
    background:#EFFEE3;
    padding-left:45px;
}

}
.fv{
    position:relative;
    width:100%;
    height:100vh;
    min-height:700px;
    overflow:hidden;
}


/*=============================
  スライド
=============================*/

.fv-slides{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}


.fv-slide{
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;

    background-size:cover;
    background-position:center;

    opacity:0;

    animation:fvSlide 15s infinite;
}


/* 1枚目 */

.fv-slide.slide1{

    background-image:url("image/miura-fv01new.png?v=2");

    animation-delay:0s;

}


/* 2枚目 */

.fv-slide.slide2{

    background-image:url("image/miura-fv02new.png?v=2");

    animation-delay:5s;

}


/* 3枚目 */

.fv-slide.slide3{
    background-image:url("image/miura-fv03.png");
    animation-delay:10s;
}


/*=============================
  スライドアニメーション
=============================*/

@keyframes fvSlide{

    0%{
        opacity:0;
    }

    5%{
        opacity:1;
    }

    30%{
        opacity:1;
    }

    35%{
        opacity:0;
    }

    100%{
        opacity:0;
    }

}


/*=============================
  オーバーレイ
=============================*/

.fv-overlay{
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.25);

    z-index:1;
}


/*=============================
  キャッチコピー
=============================*/

.fv-content{
    position:absolute;

    top:58%;
    left:50%;

    transform:translate(-50%,-50%);

    width:90%;

    text-align:center;

    z-index:2;
}


/* 英語 */

.fv-en{
    display:block;

    margin-bottom:15px;

    color:#fff;

    font-size:clamp(12px, 1.3vw, 18px);

    font-weight:500;

    letter-spacing:0.12em;

    text-shadow:
        0 3px 10px rgba(0,0,0,.45);
    font-family:"Cormorant Garamond", serif;
}


/* メインコピー */

.fv-content h1{

    margin:0;

    color:#fff;

    font-size:clamp(28px, 3.5vw, 54px);

    font-weight:800;

    letter-spacing:4px;

    line-height:1.5;

    text-shadow:
        0 3px 10px rgba(0,0,0,.45);

}


/*=============================
  サブコピー
=============================*/

.fv-sub{

    width:min(1000px, 80%);

    margin:25px auto 0;

    padding:15px 30px;

    background:rgba(0,0,0,.59);

    box-shadow:
        0 5px 20px rgba(0,0,0,.2);

}


.fv-sub p{

    margin:0;

    color:#fff;

    font-size:clamp(16px, 2vw, 28px);

    font-weight:700;

    letter-spacing:0.08em;

    text-align:center;

}


/*=============================
  3枚目のカテゴリー
=============================*/

.fv-category{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:25px;

    margin-top:35px;
}


.fv-category-item{
    width:220px;
    height:170px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:2px solid #fff;

    background:transparent;
}


.fv-category-item span{
    color:#fff;

    font-size:clamp(28px, 3vw, 48px);

    font-weight:700;

    letter-spacing:0.15em;

    text-shadow:
        0 3px 10px rgba(0,0,0,.4);
}
.fv-category-x{
    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;

    font-size:38px;
    font-weight:300;

    text-shadow:
        0 3px 10px rgba(0,0,0,.4);
}

/*=============================
  SP
=============================*/

@media screen and (max-width:768px){
    .fv-slide.slide1{ 
    background-image:url("image/miura-fv01-phnew.png?v=2"); 
} 
 
.fv-slide.slide2{ 
    background-image:url("image/miura-fv02-phnew.png?v=2"); 
}

    .fv-slide.slide3{
        background-image:url("image/miura-fv03-ph.png");
    }
    .fv{
        min-height:600px;
    }


    .fv-content{
        top:55%;
        width:90%;
    }


    .fv-en{
        margin-bottom:12px;
        font-size:11px;
        letter-spacing:0.08em;
    }


    .fv-content h1{
        font-size:30px;
        letter-spacing:2px;
        line-height:1.5;
    }


    .fv-sub{
        width:100%;

        margin-top:20px;

        padding:12px 15px;
    }
    

    .fv-sub p{
        font-size:14px;
        letter-spacing:0.03em;
        line-height:1.6;
    }


    /* 3枚目 */

    .fv-category{
        gap:10px;

        margin-top:25px;
    }


    .fv-category-item{
        width:30%;
        height:90px;
    }


    .fv-category-item span{
        font-size:20px;
    }
    .fv-slide.slide1 .fv-sub{
        width:70%;
    }
}
@media screen and (max-width:768px){

    /* 2枚目だけサブコピーの背景帯を縮める */
    .fv-slide.slide2 .fv-sub{
        width: 70%;
    }

}
/*=============================
  FOOTER
=============================*/

.footer{
    position:relative;
    width:100%;
    min-height:420px;

    overflow:hidden;

    color:#fff;
}


/*=============================
  背景画像
=============================*/

.footer-bg{
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;

    background-image:url("image/miura-ft.png");
    background-size:cover;
    background-position:center;

    z-index:0;
}


/*=============================
  オーバーレイ
=============================*/

.footer-overlay{
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.48);

    z-index:1;
}


/*=============================
  フッター内部
=============================*/

.footer-inner{
    position:relative;

    z-index:2;

    width:90%;
    max-width:1100px;

    margin:0 auto;

    padding:70px 0 45px;

    text-align:center;
}


/*=============================
  ロゴ
=============================*/

.footer-logo{
    margin-bottom:45px;
}


.footer-logo img{
    width:90px;
    height:auto;

    display:block;

    margin:0 auto;
}


/*=============================
  ナビゲーション
=============================*/

.footer-nav{
    width:100%;
}


.footer-nav ul{
    display:flex;

    justify-content:center;
    align-items:center;

    gap:45px;

    margin:0;
    padding:0;

    list-style:none;
}


.footer-nav li{
    margin:0;
    padding:0;
}


.footer-nav a{
    color:#fff;

    text-decoration:none;

    font-size:20px;
    font-weight:600;

    transition:.3s ease;
}


.footer-nav a:hover{
    color:#74848B;
}


/*=============================
  区切り線
=============================*/

.footer-line{
    width:100%;

    height:1px;

    margin:40px auto 35px;

    background:rgba(255,255,255,.7);
}


/*=============================
  コピーライト
=============================*/

.copyright{
    margin:0;

    color:#fff;

    font-size:15px;

    letter-spacing:.5px;
}
@media screen and (max-width:768px){

    .footer{
        display:none;
    }

}
/*=============================
  SUB PAGE FV
=============================*/

.sub-fv{
    position:relative;

    width:100%;
    height:600px;

    overflow:hidden;

    margin:0;
}


/*=============================
  背景画像
=============================*/

.sub-fv-bg{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;
}


.sub-fv-bg img{
    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;
}
/*=============================
  テキスト
=============================*/

.sub-fv-content{
    position:absolute;

    z-index:2;

    left:50%;

    top:55%;

    transform:translate(-50%,-50%);

    width:1100px;

    max-width:90%;

    text-align:center;
}


/*=============================
  ページタイトル
=============================*/

.sub-fv-content h1{
    margin:0 0 25px;

    color:#fff;

    font-size:50px;

    font-weight:300;

    letter-spacing:6px;

    line-height:1.3;

    text-shadow:
        0 3px 12px rgba(0,0,0,.3);
}


/*=============================
  緑のキャッチコピー
=============================*/

.sub-fv-catch{
    display:flex;

    align-items:center;
    justify-content:center;

    width:580px;
    height:60px;
    white-space:nowrap;
    margin:0 auto;

    padding:0 35px;

    background:rgba(0,0,0,0.51);

    color:#fff;

    font-size:18px;

    font-weight:700;

    letter-spacing:2px;

    box-shadow:
        8px 8px 0 rgba(0,0,0,.12);
    font-family:"Cormorant Garamond", serif;
    font-weight:500;
letter-spacing:1.5px;
}
/* =========================
   CONTACT FORM
========================= */

.contact-form{
    position:relative;

    width:100%;

    padding:120px 20px;

    background:#f5f5f2;
}


/* =========================
   INNER
========================= */

.contact-form-inner{
    width:100%;
    max-width:900px;

    margin:0 auto;
}


/* =========================
   HEADING
========================= */

.contact-form-heading{
    text-align:center;

    margin-bottom:65px;
}


/* 英語タイトル */

.contact-form-en{
    margin:0 0 8px;

    color:#74848B;

    font-family:"Cormorant Garamond", serif;

    font-size:18px;

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;
}


/* 日本語タイトル */

.contact-form-heading h2{
    position:relative;

    display:inline-block;

    margin:0;

    color:#222;

    font-size:38px;

    font-weight:700;

    letter-spacing:4px;

    line-height:1.4;
}


/* タイトル下のライン */

.contact-form-heading h2::after{

    content:"";

    display:block;

    width:55px;
    height:3px;

    margin:18px auto 0;

    background:#74848B;
}


/* 説明 */

.contact-form-lead{

    margin:30px 0 0;

    color:#555;

    font-size:15px;

    line-height:2;

    letter-spacing:1px;
}


/* =========================
   FORM BODY
========================= */

.contact-form-body{

    width:100%;

    padding:60px;

    background:#fff;

    box-shadow:
        0 15px 45px rgba(0,0,0,.08);
}


/* =========================
   FORM ITEM
========================= */

.form-item{

    margin-bottom:35px;
}


/* ラベル */

.form-item label{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:12px;

    color:#222;

    font-size:15px;

    font-weight:700;

    letter-spacing:1px;
}


/* 必須 */

.form-item label span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:38px;
    height:22px;

    padding:0 7px;

    background:#74848B;

    color:#fff;

    font-size:11px;

    font-weight:500;

    letter-spacing:0;

}


/* 任意 */

.form-item label span.optional{

    background:#ddd;

    color:#555;
}


/* =========================
   INPUT / SELECT / TEXTAREA
========================= */

.form-item input,
.form-item select,
.form-item textarea{

    box-sizing:border-box;

    width:100%;

    border:1px solid #d8dddd;

    border-radius:0;

    background:#fafafa;

    color:#333;

    font-family:inherit;

    font-size:15px;

    outline:none;

    transition:
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


/* input */

.form-item input,
.form-item select{

    height:58px;

    padding:0 18px;
}


/* textarea */

.form-item textarea{

    min-height:200px;

    padding:18px;

    line-height:1.8;

    resize:vertical;
}


/* placeholder */

.form-item input::placeholder,
.form-item textarea::placeholder{

    color:#aaa;
}


/* =========================
   FOCUS
========================= */

.form-item input:focus,
.form-item select:focus,
.form-item textarea:focus{

    border-color:#74848B;

    background:#fff;

    box-shadow:
        0 0 0 3px rgba(116,132,139,.12);
}


/* =========================
   PRIVACY
========================= */

.form-privacy{

    margin:45px 0 40px;

    text-align:center;
}


.form-privacy label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

    color:#555;

    font-size:13px;
}


.form-privacy input{

    width:16px;
    height:16px;

    accent-color:#74848B;
}


.form-privacy a{

    color:#74848B;

    text-decoration:underline;
}


/* =========================
   SUBMIT
========================= */

.form-submit{

    display:flex;

    justify-content:center;
}


.form-submit button{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:280px;

    height:68px;

    padding:0 25px 0 35px;

    border:0;

    background:#74848B;

    color:#fff;

    font-family:inherit;

    font-size:15px;

    font-weight:700;

    letter-spacing:3px;

    cursor:pointer;

    transition:
        background .3s ease,
        transform .3s ease;
}


/* 矢印 */

.form-submit button .arrow{

    font-size:24px;

    font-weight:300;

    line-height:1;

    transition:
        transform .3s ease;
}


/* hover */

.form-submit button:hover{

    background:#5f7077;

    transform:translateY(-3px);
}


.form-submit button:hover .arrow{

    transform:translateX(8px);
}
.pc-only { display: block; }
.sp-only { display: none; }
.sp-page-title {
  display: none;
} 
/* =========================
   CONTACT FORM SP
========================= */

@media screen and (max-width:768px){

    .contact-form{
    padding:50px 20px 80px;
}


    .contact-form-heading{

        margin-bottom:45px;

    }


    .contact-form-en{

        font-size:16px;

        letter-spacing:3px;

    }


    .contact-form-heading h2{

        font-size:28px;

        letter-spacing:3px;

    }


    .contact-form-lead{

        margin-top:25px;

        font-size:13px;

        line-height:2;

    }


    .contact-form-body{

        padding:35px 22px;

    }


    .form-item{

        margin-bottom:28px;

    }


    .form-item label{

        font-size:14px;

        gap:9px;

    }


    .form-item input,
    .form-item select{

        height:52px;

        padding:0 14px;

        font-size:14px;

    }


    .form-item textarea{

        min-height:170px;

        padding:14px;

        font-size:14px;

    }


    .form-privacy{

        margin:35px 0;

    }


    .form-privacy label{

        font-size:12px;

    }


    .form-submit button{

        width:100%;

        max-width:280px;

        height:60px;

        padding:0 20px 0 28px;

        font-size:14px;

    }
    .pc-only { display: none; }
    .sp-only { display: block; }
    /* スマホ専用タイトル帯の設定 */
  .sp-page-title {
    display: block;
    width: 100%;             /* ヘッダーと同じ幅（画面いっぱい） */
    background-color: #74848B; /* お写真の黄色 */
    padding: 12px 20px;      /* 上下の厚みと左右の余白 */
    text-align: left;        /* 左寄せ（中央ならcenter） */
    
    /* ヘッダーが固定(fixed)されている場合の重なり防止 */
    position: relative;
    z-index: 10;
    margin-top: 80px;
  }

  .sp-page-title span {
    color: #fff;             /* 文字色（白抜き） */
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
  }

}
/* =========================
   COMPANY PROFILE
========================= */

.company-profile{
    position:relative;

    width:100%;

    padding:120px 20px;

    background:#f5f5f2;

    overflow:hidden;
}


/* =========================
   INNER
========================= */

.company-profile-inner{

    width:100%;

    max-width:900px;

    margin:0 auto;

}


/* =========================
   HEADING
========================= */

.company-profile-heading{

    margin-bottom:65px;

    text-align:center;

}


/* 英語 */

.company-profile-en{

    margin:0 0 8px;

    color:#74848B;

    font-family:"Cormorant Garamond", serif;

    font-size:18px;

    font-weight:600;

    letter-spacing:5px;

}


/* 日本語 */

.company-profile-heading h2{

    position:relative;

    display:inline-block;

    margin:0;

    color:#222;

    font-size:38px;

    font-weight:700;

    letter-spacing:5px;

    line-height:1.4;

}


/* 下線 */

.company-profile-heading h2::after{

    content:"";

    display:block;

    width:55px;

    height:3px;

    margin:18px auto 0;

    background:#74848B;

}


/* =========================
   TABLE
========================= */

.company-profile-table{

    width:100%;

    border-top:1px solid #74848B;

}


/* =========================
   ROW
========================= */

.company-profile-row{

    display:grid;

    grid-template-columns:280px 1fr;

    min-height:82px;

    border-bottom:1px solid #d1d5d6;

}


/* =========================
   LABEL
========================= */

.company-profile-label{

    display:flex;

    align-items:center;

    gap:18px;

    padding:22px 30px;

    background:#74848B;

    color:#fff;

    font-size:15px;

    font-weight:700;

    letter-spacing:2px;

}


/* 番号 */

.company-profile-label span{

    color:rgba(255,255,255,.6);

    font-family:"Cormorant Garamond", serif;

    font-size:16px;

    font-weight:500;

    letter-spacing:1px;

}


/* =========================
   VALUE
========================= */

.company-profile-value{
    display:flex;
    align-items:center;
    padding:22px 35px;
    background:#fff;
    color:#333;
    font-size:15px;
    font-weight:500;
    line-height:1.9;
    letter-spacing:1px;
}


/* =========================
   BUSINESS
========================= */

.company-profile-row:nth-child(2)
.company-profile-value{

    display:block;

    padding-top:25px;

    padding-bottom:25px;

}


.company-profile-value p{

    margin:0;

}


/* =========================
   ADDRESS
========================= */

.company-address{
    margin:0;
}


.company-address:last-child{

    margin-bottom:0;

}


.company-address strong{

    display:block;

    margin-bottom:4px;

    color:#74848B;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

}


.company-address p{

    margin:0;

    line-height:1.8;

}


/* =========================
   HOVER
========================= */

.company-profile-row{

    transition:transform .3s ease;

}


.company-profile-row:hover{

    transform:translateX(5px);

}


.company-profile-row:hover
.company-profile-label{

    background:#65767d;

}
.company-profile-row:last-child .company-profile-value{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:start;
}
/* =========================
   COMPANY PROFILE SP
========================= */

@media screen and (max-width:768px){

    .company-profile{

        padding:80px 20px;

    }


    /* タイトル */

    .company-profile-heading{

        margin-bottom:45px;

    }


    .company-profile-en{

        font-size:16px;

        letter-spacing:3px;

    }


    .company-profile-heading h2{

        font-size:28px;

        letter-spacing:3px;

    }


    /* テーブル */

    .company-profile-row{

        display:block;

        min-height:auto;

    }


    /* 項目名 */

    .company-profile-label{

        min-height:52px;

        padding:14px 18px;

        gap:12px;

        font-size:14px;

        letter-spacing:1px;

    }


    .company-profile-label span{

        font-size:14px;

    }


    /* 内容 */

    .company-profile-value{

        min-height:55px;

        padding:17px 18px;

        font-size:14px;

        line-height:1.8;

    }


    /* 事業内容 */

    .company-profile-row:nth-child(2)
    .company-profile-value{

        padding:18px;

    }


    /* 所在地 */

    .company-address{

        margin-bottom:20px;

    }


    .company-address strong{

        font-size:13px;

    }


    .company-address p{

        font-size:13px;

    }


    /* スマホではホバー移動なし */

    .company-profile-row:hover{

        transform:none;

    }
    .company-profile-row:last-child .company-profile-value{
        display:block;
    }
}
/* =========================
   MESSAGE / PHILOSOPHY
========================= */

.company-message{
    position:relative;

    width:100%;

    padding:120px 20px 40px;

    background:#fff;

    overflow:hidden;
}


.company-message-inner{

    width:100%;

    max-width:1100px;

    margin:0 auto;

}


/* =========================
   共通見出し
========================= */

.section-heading{

    position:relative;

    margin-bottom:65px;

    text-align:center;

}


.section-heading-en{

    margin:0 0 6px;

    color:#74848B;

    font-family:"Cormorant Garamond", serif;

    font-size:18px;

    font-weight:600;

    letter-spacing:5px;

}


.section-heading h2{

    position:relative;

    display:inline-block;

    margin:0;

    color:#222;

    font-size:38px;

    font-weight:700;

    letter-spacing:5px;

    line-height:1.4;

}


.section-heading h2::after{

    content:"";

    display:block;

    width:55px;

    height:3px;

    margin:16px auto 0;

    background:#74848B;

}


/* =========================
   MESSAGE
========================= */

.message-section{

    margin-bottom:150px;

}


/* =========================
   代表挨拶 CONTENT
========================= */

.message-content{

    display:grid;

    grid-template-columns:460px 1fr;

    gap:75px;

    align-items:center;

}


/* =========================
   IMAGE
========================= */

.message-image{

    position:relative;

    width:100%;

}


.message-image img{

    display:block;

    width:100%;

    aspect-ratio:4 / 3;

    object-fit:cover;

}


/* 写真のアクセント */

.message-image::after{

    content:"";

    position:absolute;

    left:-12px;

    bottom:-12px;

    width:100%;

    height:100%;

    border:1px solid #74848B;

    z-index:0;

}


/* 写真を前面へ */

.message-image img{

    position:relative;

    z-index:1;

}


/* 番号 */

.message-image-number{

    position:absolute;

    right:-18px;

    top:-18px;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

    width:58px;

    height:58px;

    background:#74848B;

    color:#fff;

    font-family:"Cormorant Garamond", serif;

    font-size:20px;

    letter-spacing:2px;

}


/* =========================
   MESSAGE TEXT
========================= */

.message-text{

    color:#333;

    font-size:15px;

    font-weight:500;

    line-height:2.05;

    letter-spacing:1px;

}


.message-text p{

    margin:0 0 18px;

}


.message-text p:last-of-type{

    margin-bottom:30px;

}


/* =========================
   SIGN
========================= */

.message-sign{

    display:flex;

    align-items:flex-end;

    justify-content:flex-end;

    gap:16px;

    padding-top:15px;

    border-top:1px solid #d4d8d9;

}


.message-sign span{

    font-size:13px;

    letter-spacing:2px;

    color:#74848B;

}


.message-sign strong{

    font-size:20px;

    font-weight:600;

    letter-spacing:3px;

}


/* =========================
   PHILOSOPHY
========================= */

.philosophy-section{

    position:relative;

    padding-top:0;
    margin-top:-40px;

}


/* =========================
   PHILOSOPHY CONTENT
========================= */

.philosophy-content{

    position:relative;

}


/* =========================
   CATCH
========================= */

.philosophy-catch{
    position:relative;

    width:850px;
    max-width:100%;

    margin:0 auto 60px;

    padding:30px 40px;

    background:#f5f5f2;

    text-align:center;
}


.philosophy-catch::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:5px;

    height:100%;

    background:#74848B;

}


.philosophy-catch h3{

    position:relative;

    margin:0;

    color:#222;
    
    font-size:29px;

    font-weight:700;

    letter-spacing:4px;

    line-height:1.6;

}


/* 引用符 */

.philosophy-mark{

    position:absolute;

    top:12px;

    left:25px;

    color:#74848B;

    font-family:"Cormorant Garamond", serif;

    font-size:55px;

    line-height:1;

}


.philosophy-mark-bottom{

    top:auto;

    left:auto;

    right:25px;

    bottom:-8px;

}


/* =========================
   PHILOSOPHY TEXT
========================= */

.philosophy-text{

    width:760px;

    max-width:100%;

    margin:0 auto;

    color:#333;

    font-size:15px;

    font-weight:500;

    line-height:2.15;

    letter-spacing:1px;

}


.philosophy-text p{

    margin:0 0 22px;

}



/* ==========================================
   COMPANY MESSAGE RESPONSIVE
========================================== */

@media screen and (max-width:768px){

    /* =========================
       全体
    ========================= */

    .company-message{
        padding:80px 20px 40px;
    }

    .company-message-inner{
        width:100%;
        max-width:none;
    }


    /* =========================
       共通見出し
    ========================= */

    .section-heading{
        margin-bottom:40px;
    }

    .section-heading-en{
        margin-bottom:4px;

        font-size:15px;
        letter-spacing:4px;
    }

    .section-heading h2{
        font-size:27px;
        letter-spacing:4px;
        line-height:1.4;
    }

    .section-heading h2::after{
        width:45px;
        height:2px;
        margin-top:12px;
    }


    /* =========================
       MESSAGE
    ========================= */

    .message-section{
        margin-bottom:100px;
    }


    /* =========================
       代表挨拶 CONTENT
    ========================= */

    .message-content{
        display:flex;
        flex-direction:column;

        gap:45px;

        align-items:stretch;
    }


    /* =========================
       IMAGE
    ========================= */

    .message-image{
        width:75%;
        margin:0 auto;
    }

    .message-image img{
        width:100%;
        aspect-ratio:4 / 3;
        object-fit:cover;
    }


    /* 写真のアクセント */

    .message-image::after{
        left:-8px;
        bottom:-8px;

        width:100%;
        height:100%;

        border:1px solid #74848B;
    }


    /* 番号 */

    .message-image-number{
        right:-12px;
        top:-12px;

        width:48px;
        height:48px;

        font-size:17px;
        letter-spacing:1px;
    }


    /* =========================
       MESSAGE TEXT
    ========================= */

    .message-text{
        width:100%;

        font-size:14px;
        font-weight:500;
        text-align: center;
        line-height:2;

        letter-spacing:.5px;
    }

    .message-text p{
        margin:0 0 18px;
    }

    .message-text p:last-of-type{
        margin-bottom:25px;
    }


    /* =========================
       SIGN
    ========================= */

    .message-sign{
        gap:12px;

        padding-top:12px;
    }

    .message-sign span{
        font-size:12px;
        letter-spacing:1px;
    }

    .message-sign strong{
        font-size:18px;
        letter-spacing:2px;
    }


    /* =========================
       PHILOSOPHY
    ========================= */

    .philosophy-section{
        padding-top:0;
        margin-top:-50px;
    }


    /* =========================
       PHILOSOPHY CATCH
    ========================= */

    .philosophy-catch{
        width:100%;
        max-width:none;

        margin:0 auto 40px;

        padding:15px 35px;
    }


    .philosophy-catch::before{
        width:4px;
    }


    .philosophy-catch h3{
        font-size:21px;
        letter-spacing:2px;
        line-height:1.7;
    }


    /* 引用符 */

    .philosophy-mark{
        top:8px;
        left:15px;

        font-size:42px;
    }

    .philosophy-mark-bottom{
        top:auto;
        left:auto;

        right:15px;
        bottom:-5px;
    }


    /* =========================
       PHILOSOPHY TEXT
    ========================= */

    .philosophy-text{
        width:100%;
        max-width:none;

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

        line-height:2;
        text-align: center;
        letter-spacing:.5px;
    }

    .philosophy-text p{
        margin:0 0 20px;
    }

    

}
/* =========================
   お問い合わせ促進
========================= */

.contact-promotion{
    position:relative;

    width:100%;

    padding:120px 20px;
    padding-bottom:20px;
    background:#fff;

    overflow:hidden;
}


/* 内側 */

.contact-promotion-inner{
    position:relative;

    max-width:1200px;

    margin:0 auto;
}


/* 背景英字 */

.contact-bg-text{
    position:absolute;

    right:-20px;
    bottom:-45px;

    font-family:"Cinzel", serif;

    font-size:150px;

    font-weight:500;

    letter-spacing:10px;

    color:rgba(116,132,139,0.08);

    pointer-events:none;

    white-space:nowrap;
}


/* =========================
   タイトル
========================= */

.contact-heading{

    display:flex;

    align-items:flex-start;

    gap:20px;

    margin-bottom:65px;
}


.contact-heading-line{

    display:block;

    width:5px;

    height:75px;

    background:#74848B;

    flex-shrink:0;
}


.contact-heading-en{

    margin:0 0 4px;

    font-family:"Cinzel", serif;

    font-size:14px;

    letter-spacing:4px;

    color:#74848B;

    font-weight:600;
}


.contact-heading h2{

    margin:0;

    font-size:36px;

    font-weight:700;

    letter-spacing:0.08em;

    color:#222;

    line-height:1.4;
}


/* =========================
   メインコンテンツ
========================= */

.contact-content{

    position:relative;

    display:flex;

    align-items:center;

    gap:75px;
}


/* =========================
   画像
========================= */

.contact-image{

    position:relative;

    width:46%;

    flex-shrink:0;

    z-index:2;
    transform:translateX(40px);
}


/* 背面フレーム */

.contact-image-frame{

    position:absolute;

    top:8px;

    left:30px;

    width:80%;

    height:100%;

    border:1px solid #74848B;

    transform:rotate(-3deg);

    z-index:-1;
}


/* 写真 */

.contact-image img{

    display:block;

    width:80%;

    aspect-ratio:4 / 3;

    object-fit:cover;

    position:relative;

    z-index:2;
}


/* =========================
   テキスト
========================= */

.contact-text{

    flex:1;

    position:relative;
    transform:translateX(-30px);
    z-index:2;
}


.contact-text p{

    margin:0 0 20px;

    font-size:15px;

    line-height:2.1;

    letter-spacing:0.04em;

    color:#333;
}


.contact-text .contact-last{

    margin-top:25px;

    margin-bottom:30px;

    font-weight:600;

    color:#222;
}


/* =========================
   ボタン
========================= */

.contact-button{

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:300px;

    height:65px;

    padding:0 22px 0 30px;

    background:#74848B;

    color:#fff;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    letter-spacing:0.08em;

    transition:all 0.3s ease;

    position:relative;

    overflow:hidden;
}


/* ボタン左のアクセント */

.contact-button::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:5px;
    height:100%;

    background:#222;

    transition:all 0.3s ease;
}


.contact-button:hover{

    background:#222;

    transform:translateY(-3px);
}


.contact-button:hover::before{

    background:#74848B;
}


/* 矢印 */

.contact-button-arrow{

    font-size:24px;

    line-height:1;

    transition:transform 0.3s ease;
}


.contact-button:hover .contact-button-arrow{

    transform:translateX(7px);
}
/* ==========================================
   CONTACT RESPONSIVE
========================================== */

@media screen and (max-width:768px){

    /* =========================
       セクション
    ========================= */

    .contact-promotion{
        padding:80px 20px 30px;
    }


    /* =========================
       内側
    ========================= */

    .contact-promotion-inner{
        width:100%;
        max-width:none;
    }


    /* =========================
       背景英字
    ========================= */

    .contact-bg-text{
        right:-20px;
        bottom:-10px;

        font-size:75px;
        letter-spacing:6px;
    }


    /* =========================
       タイトル
    ========================= */

    .contact-heading{
        gap:14px;
        margin-bottom:45px;
    }


    .contact-heading-line{
        width:4px;
        height:60px;
    }


    .contact-heading-en{
        margin-bottom:3px;

        font-size:11px;
        letter-spacing:3px;
    }


    .contact-heading h2{
        font-size:23px;
        letter-spacing:0.06em;
        line-height:1.5;
    }


    /* =========================
       メインコンテンツ
    ========================= */

    .contact-content{
        display:flex;
        flex-direction:column;
        align-items:center;

        gap:45px;
    }


    /* =========================
       画像
    ========================= */

    .contact-image{
        width:100%;

        transform:none;

        display:flex;
        justify-content:center;
    }


    .contact-image img{
        width:80%;
        aspect-ratio:4 / 3;

        object-fit:cover;
    }


    /* 背面フレーム */

    .contact-image-frame{
        top:8px;
        left:10%;

        width:80%;
        height:100%;

        transform:rotate(-3deg);
    }


    /* =========================
       テキスト
    ========================= */

    .contact-text{
        width:100%;
        text-align: center;
        transform:none;
    }


    .contact-text p{
        margin-bottom:18px;

        font-size:14px;
        line-height:2;

        letter-spacing:0.03em;
    }


    .contact-text .contact-last{
        margin-top:25px;
        margin-bottom:28px;

        font-weight:600;
    }


    /* =========================
       ボタン
    ========================= */

    .contact-button{
        width:100%;
        max-width:300px;
        height:58px;

        margin:0 auto;

        padding:0 20px 0 25px;

        font-size:14px;
    }


    .contact-button-arrow{
        font-size:22px;
    }

}
/* ==========================
   募集要項
========================== */

.recruit-requirements {
    padding: 120px 20px;
    background: #f7f7f7;
}

.recruit-requirements .inner {
    max-width: 900px;
    margin: 0 auto;
}


/* タイトル */

.requirements-title {
    text-align: center;
    margin-bottom: 60px;
}

.requirements-title span {
    display: block;
    color: #74848B;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2em;
    margin-bottom: 12px;
}

.requirements-title h2 {
    position: relative;
    display: inline-block;
    margin: 0;
    padding-top: 18px;
    color: #222;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.requirements-title h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 55px;
    height: 2px;
    background: #74848B;
    transform: translateX(-50%);
}


/* 募集要項一覧 */

.requirements-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.requirements-item {
    display: flex;
    background: #222;
    border-left: 4px solid #74848B;
    transition: 0.3s;
}

.requirements-item:hover {
    transform: translateX(8px);
    background: #2c2c2c;
}


/* 左側：項目 */

.requirements-label {
    width: 30%;
    min-width: 250px;
    display: flex;
    align-items: center;
    padding: 30px 40px;
    background: #74848B;
}

.requirements-label span {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;
}


/* 右側：内容 */

.requirements-content {
    width: 70%;
    display: flex;
    align-items: center;
    padding: 25px 45px;
}

.requirements-content p {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.05em;
}

.requirements-content small {
    color: #c9c9c9;
    font-size: 13px;
}


/* ==========================
   SP
========================== */

@media screen and (max-width: 768px) {

    .recruit-requirements {
        padding: 80px 15px;
    }

    .requirements-title {
        margin-bottom: 40px;
    }

    .requirements-title span {
        font-size: 11px;
        margin-bottom: 10px;
    }

    .requirements-title h2 {
        font-size: 26px;
    }


    /* 一覧 */

    .requirements-list {
        gap: 10px;
    }

    .requirements-item {
        display: block;
        border-left: none;
        border-top: 3px solid #74848B;
    }

    .requirements-item:hover {
        transform: none;
    }


    /* 項目 */

    .requirements-label {
        width: 100%;
        min-width: auto;
        padding: 14px 20px;
    }

    .requirements-label span {
        font-size: 14px;
    }


    /* 内容 */

    .requirements-content {
        width: 100%;
        padding: 20px;
    }

    .requirements-content p {
        font-size: 14px;
        line-height: 1.8;
    }

    .requirements-content small {
        font-size: 11px;
    }

}
/* ==========================
   求人のポイント
========================== */

.job-point {
    padding: 120px 20px;
    background: #fff;
}

.job-point .inner {
    max-width: 1100px;
    margin: 0 auto;
}


/* タイトル */

.job-point-title {
    text-align: center;
    margin-bottom: 90px;
}

.job-point-title span {
    display: block;
    margin-bottom: 12px;
    color: #74848B;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.25em;
}

.job-point-title h2 {
    position: relative;
    display: inline-block;
    margin: 0;
    padding-top: 18px;
    color: #222;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.job-point-title h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 55px;
    height: 2px;
    background: #74848B;
    transform: translateX(-50%);
}


/* 各ポイント */

.job-point-item {
    margin-bottom: 100px;
}

.job-point-item:last-child {
    margin-bottom: 0;
}


/* 見出し */

.job-point-heading {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    width: fit-content;
    min-width: 520px;
    margin: 0 auto 45px;
    padding: 20px 45px;
    background: #222;
    color: #fff;
}

.job-point-heading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: #74848B;
}

.job-point-number {
    color: #74848B;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.job-point-heading h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.08em;
}


/* コンテンツ */

.job-point-content {
    display: flex;
    align-items: center;
    gap: 70px;
}

.job-point-content.reverse {
    flex-direction: row-reverse;
}


/* 画像 */

.job-point-image {
    width: 48%;
    overflow: hidden;
}

.job-point-image img {
    width: 90%;
    height: 300px;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.job-point-item:hover .job-point-image img {
    transform: scale(1.05);
}


/* テキスト */

.job-point-text {
    width: 52%;
    position: relative;
    padding-left: 30px;
}

.job-point-text::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: #74848B;
}

.job-point-text p {
    margin: 0;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.06em;
}


/* ==========================
   SP
========================== */

@media screen and (max-width: 768px) {

    .job-point {
        padding: 50px 15px 40px;
    }


    /* タイトル */

    .job-point-title {
        margin-bottom: 60px;
    }

    .job-point-title span {
        font-size: 11px;
    }

    .job-point-title h2 {
        font-size: 26px;
    }


    /* 各ポイント */

    .job-point-item {
        margin-bottom: 70px;
    }


    /* 見出し */

    .job-point-heading {
        width: 100%;
        min-width: auto;
        margin-bottom: 30px;
        padding: 16px 20px;
        gap: 15px;
    }

    .job-point-heading h3 {
        font-size: 20px;
    }

    .job-point-number {
        font-size: 12px;
    }


    /* コンテンツ */

    .job-point-content,
    .job-point-content.reverse {
        flex-direction: column;
        gap: 25px;
    }


    /* 画像 */

    .job-point-image {
        width: 80%;
        transform: translateX(20px);
    }

    .job-point-image img {
        height: 240px;
    }


    /* テキスト */

    .job-point-text {
        width: 100%;
        text-align: center;
    }

    .job-point-text p {
        font-size: 13px;
        line-height: 1.9;
    }
    
}
@media screen and (max-width:768px){

    .job-point-text::before {
        left: 20px;
    }

}
@media screen and (max-width: 768px) {

    /* POINT 03だけ少し左へ */
    .work-point-card:nth-child(3) h3 {
        transform: translateX(-10px);
    }

}
/* =========================
   BUSINESS INTRO
========================= */

.business-intro{

    position:relative;

    width:100%;

    padding:120px 20px 100px;

    background:#fff;

    overflow:hidden;

}


.business-intro-inner{

    width:100%;

    max-width:1100px;

    margin:0 auto;

}


/* =========================
   見出し
========================= */

.business-intro-heading{

    margin-bottom:80px;

    text-align:center;

}


.business-intro-en{

    margin:0 0 6px;

    color:#74848B;

    font-family:"Cormorant Garamond", serif;

    font-size:18px;

    font-weight:600;

    letter-spacing:5px;

}


.business-intro-heading h2{

    position:relative;

    display:inline-block;

    margin:0;

    color:#222;

    font-size:38px;

    font-weight:700;

    letter-spacing:5px;

    line-height:1.4;

}


.business-intro-heading h2::after{

    content:"";

    display:block;

    width:55px;

    height:3px;

    margin:16px auto 0;

    background:#74848B;

}


/* =========================
   各事業
========================= */

.business-intro-item{

    margin-bottom:110px;

}


.business-intro-item:last-child{

    margin-bottom:0;

}


/* =========================
   タイトル帯
========================= */

.business-intro-title{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:520px;

    min-height:62px;

    margin:0 auto 55px;

    padding:0 35px;

    background:#74848B;

    color:#fff;

}


.business-intro-title::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:#222;

}


.business-number{

    position:absolute;

    left:22px;

    top:50%;

    transform:translateY(-50%);

    color:rgba(255,255,255,.55);

    font-family:"Cormorant Garamond", serif;

    font-size:17px;

    font-weight:500;

    letter-spacing:2px;

}


.business-intro-title h3{

    margin:0;

    font-size:22px;

    font-weight:700;

    letter-spacing:3px;

    line-height:1.4;

}


/* =========================
   CONTENT
========================= */

.business-intro-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:75px;

}


/* =========================
   左右反転
========================= */

.business-intro-item.reverse
.business-intro-content{

    direction:rtl;

}


.business-intro-item.reverse
.business-intro-content > *{

    direction:ltr;

}


/* =========================
   IMAGE
========================= */

.business-intro-image{

    position:relative;

    width:80%;

    z-index:1;

}


.business-intro-image img{

    position:relative;

    z-index:2;

    display:block;

    width:100%;

    aspect-ratio:4 / 3;

    object-fit:cover;

}


/* 画像の後ろのフレーム */

.business-image-frame{

    position:absolute;

    z-index:0;

    top:14px;

    left:-14px;

    width:100%;

    height:100%;

    border:1px solid #74848B;

}


/* 反転時のフレーム */

.business-intro-item.reverse
.business-image-frame{

    left:14px;

}


/* =========================
   TEXT
========================= */

.business-intro-text{

    color:#333;

    font-size:15px;

    font-weight:500;

    line-height:2.1;

    letter-spacing:1px;

}


.business-intro-text p{

    margin:0;

}


.business-intro-label{

    margin-bottom:15px !important;

    color:#74848B;

    font-family:"Cormorant Garamond", serif;

    font-size:16px;

    font-weight:600;

    letter-spacing:3px;

}
/* 足場・プラントメンテナンスの画像を右へ */
.business-intro-item:not(.reverse) .business-intro-image{
    transform:translateX(50px);
}
/* 重量物の運搬と据付・船渠作業の画像を左へ */
.business-intro-item.reverse .business-intro-image{
    transform:translateX(-60px);
}
/* 重量物・船渠作業のテキストを右へ */
.business-intro-item.reverse .business-intro-text{
    transform:translateX(30px);
}

/* =========================
   RESPONSIVE
========================= */

@media screen and (max-width:768px){

    /* =========================
       BUSINESS INTRO
    ========================= */

    .business-intro{

        padding:80px 20px 70px;

    }


    .business-intro-inner{

        width:100%;
        max-width:none;

    }


    /* =========================
       見出し
    ========================= */

    .business-intro-heading{

        margin-bottom:60px;

    }


    .business-intro-en{

        font-size:16px;
        letter-spacing:3px;

    }


    .business-intro-heading h2{

        font-size:28px;
        letter-spacing:3px;

    }


    .business-intro-heading h2::after{

        width:45px;
        height:2px;
        margin-top:12px;

    }


    /* =========================
       各事業
    ========================= */

    .business-intro-item{

        margin-bottom:90px;

    }


    .business-intro-item:last-child{

        margin-bottom:0;

    }


    /* =========================
       タイトル帯
    ========================= */

    .business-intro-title{

        width:92%;
        max-width:none;
        min-height:58px;

        margin:0 auto 40px;

        padding:12px 35px;

        box-sizing:border-box;

    }


    .business-intro-title h3{

        font-size:18px;
        letter-spacing:2px;
        line-height:1.5;
        text-align:center;

    }


    .business-number{

        left:14px;

        font-size:15px;
        letter-spacing:1px;

    }


    /* =========================
       コンテンツ
    ========================= */

    .business-intro-content{

        display:flex;
        flex-direction:column;

        gap:35px;

    }


    /* 左右反転を解除 */

    .business-intro-item.reverse
    .business-intro-content{

        direction:ltr;

    }


    .business-intro-item.reverse
    .business-intro-content > *{

        direction:ltr;

    }


    /* =========================
       画像
    ========================= */

    .business-intro-image{

        width:80%;
        max-width:500px;

        margin:0 auto;

        transform:none !important;

    }


    .business-intro-image img{

        width:100%;

        aspect-ratio:4 / 3;

        object-fit:cover;

    }


    /* =========================
       画像後ろのフレーム
    ========================= */

    .business-image-frame{

        top:10px;
        left:-10px;

        width:100%;
        height:100%;

    }


    .business-intro-item.reverse
    .business-image-frame{

        left:10px;

    }


    /* =========================
       文章
    ========================= */

    .business-intro-text{

        width:100%;

        font-size:14px;

        line-height:2;

        letter-spacing:.5px;
        text-align: center;
        transform:none !important;

    }


    .business-intro-text p{

        margin:0;

    }


    /* =========================
       英字タイトル
    ========================= */

    .business-intro-label{

        margin-bottom:12px !important;

        font-size:15px;

        letter-spacing:2px;

    }

}

/* =========================
   SERVICE INTRO
========================= */

.service-intro{

    position:relative;

    width:100%;

    min-height:650px;

    padding:90px 20px 105px;

    background:#DCE0E2;

    overflow:hidden;

}


.service-intro-inner{

    position:relative;

    width:100%;

    max-width:1200px;

    margin:0 auto;

}


/* =========================
   背景 SERVICE
========================= */

.service-bg-title{

    position:absolute;

    top:-15px;

    left:90px;

    z-index:0;

    color:#fff;

    font-family:"Cormorant Garamond", serif;

    font-size:130px;

    font-weight:700;

    line-height:1;

    letter-spacing:5px;

    white-space:nowrap;

    pointer-events:none;

}


/* =========================
   CONTENT
========================= */

.service-intro-content{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:minmax(0, 1fr) 390px;

    gap:70px;

    align-items:center;

}


/* =========================
   LEFT
========================= */

.service-intro-main{

    position:relative;

    z-index:3;

    padding-top:65px;
    

}


/* =========================
   TITLE
========================= */

.service-intro-title{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    max-width:600px;

    height:75px;

    margin-bottom:55px;

    padding:0 35px;

    background:#74848B;
    transform:translateX(70px);

}


.service-intro-title h1{

    margin:0;

    color:#222;

    font-size:36px;

    font-weight:700;

    letter-spacing:4px;

    line-height:1.4;

}
body.recruit .service-intro-title{

    max-width:700px;

}
body.recruit .service-intro-title{

    transform:translateX(40px);
    margin-top: 38px;

}
body.company .service-intro-title{
    max-width:680px;
    margin-top: 38px;

}
/* =========================
   TEXT
========================= */

.service-intro-text{

    width:100%;

    max-width:790px;

    color:#333;

    font-size:15px;

    font-weight:700;

    line-height:2.05;

    letter-spacing:1px;
    transform:translateX(120px);

}


.service-intro-text p{

    margin:0 0 8px;

}


.service-intro-text p:last-child{

    margin-bottom:0;

}


/* =========================
   STICKERS
========================= */

.service-stickers{

    position:relative;

    width:390px;

    height:450px;

    margin-top:20px;
    transform:translateX(-140px);

}


/* 共通 */

.service-sticker{

    position:absolute;

    display:block;

}


.service-sticker img{

    display:block;

    width:100%;

    height:auto;

}


/* =========================
   奥のステッカー
========================= */

.service-sticker-back{

    top:0;

    right:35px;

    width:220px;

    z-index:1;

}


/* =========================
   手前のステッカー
========================= */

.service-sticker-front{

    top:200px;

    right:-5px;

    width:140px;

    z-index:2;

    transform:rotate(14deg);

}


/* =========================
   TICKER
========================= */

.service-ticker{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:82px;

    display:flex;

    align-items:center;

    background:#74848B;

    overflow:hidden;

    z-index:5;

}


.service-ticker-track{

    display:flex;

    width:max-content;

    white-space:nowrap;

    animation:serviceTicker 28s linear infinite;

}


.service-ticker-track span{

    display:block;

    padding-right:80px;

    color:rgba(255,255,255,.42);

    font-family:"Cormorant Garamond", serif;

    font-size:62px;

    font-weight:700;

    letter-spacing:3px;

    line-height:1;

}


/* =========================
   無限スクロール
========================= */

@keyframes serviceTicker{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}
/* =========================
   SERVICE INTRO
   RESPONSIVE
========================= */

@media screen and (max-width:768px){

    /* =========================
       全体
    ========================= */

    .service-intro{

        min-height:auto;

        padding:75px 20px 0;

        background:#DCE0E2;

    }


    .service-intro-inner{

        width:100%;
        max-width:none;

    }


    /* =========================
       背景 SERVICE
    ========================= */

    .service-bg-title{

        top:-35px;
        left:50%;

        font-size:80px;

        letter-spacing:2px;

        transform:translateX(-50%);

    }


    /* =========================
       コンテンツ
    ========================= */

    .service-intro-content{

        display:flex;

        flex-direction:column;

        gap:40px;

        align-items:center;

    }


    /* =========================
       LEFT
    ========================= */

    .service-intro-main{

        width:100%;

        padding-top:45px;

    }


    /* =========================
       TITLE
    ========================= */

    .service-intro-title{ 

    display:flex; 

    align-items:center; 

    justify-content:center; 

    width:100%; 

    max-width:none; 

    min-height:45px; 
    height:auto; 

    margin:0 0 35px; 

    padding:8px 20px; 

    box-sizing:border-box; 

    transform:translateY(-5px); 
}
body.recruit .service-intro-title{
    position:relative;
    top:-35px;
    transform:none;
}
body.company .service-intro-title{
    position:relative;
    top:-35px;
    transform:none;
}
body.recruit .service-intro-text{
    transform:translateY(-20px);
}
body.company .service-intro-text{
    transform:translateY(-20px);
}
body.recruit .service-stickers{
    transform:translateY(-40px)
}
body.company .service-stickers{
    transform:translateY(-40px)
}

    .service-intro-title h1{

        margin:0;

        font-size:23px;

        font-weight:700;

        letter-spacing:2px;

        line-height:1.5;

        text-align:center;

    }


    /* =========================
       TEXT
    ========================= */

    .service-intro-text{

        width:100%;

        max-width:none;

        margin:0;

        padding:0;

        color:#333;

        font-size:14px;

        font-weight:700;

        line-height:2;

        letter-spacing:.5px;
        text-align: center;
        transform:none;

    }


    .service-intro-text p{

        margin:0;

    }
    /* =========================
       STICKERS
    ========================= */

    .service-stickers{

        position:relative;

        width:100%;

        max-width:320px;

        height:330px;

        margin:0 auto;

        transform:none;

    }


    /* =========================
       共通
    ========================= */

    .service-sticker{

        position:absolute;
        left:40%;
    transform:translateX(-50%);
    }


    /* =========================
       奥のステッカー
    ========================= */

    .service-sticker-back{

        top:0;

        right:35px;

        width:170px;

    }


    /* =========================
       手前のステッカー
    ========================= */

    .service-sticker-front{

        top:150px;

        right:0;

        width:110px;

        transform:rotate(14deg);

    }


    /* =========================
       TICKER
    ========================= */

    .service-ticker{

        position:relative;

        left:auto;

        bottom:auto;

        width:calc(100% + 40px);

        height:60px;

        margin-top:20px;

        margin-left:-20px;

        display:flex;

        align-items:center;

    }


    .service-ticker-track{

        width:max-content;

    }


    .service-ticker-track span{

        padding-right:50px;

        font-size:40px;

        letter-spacing:2px;

    }

}


/* =================================
   株式会社ミウラ興業
   求人ポイント
================================= */

.work-point {
  padding: 100px 20px 30px;
  background: #fff;
  overflow: hidden;
}

.work-point-inner {
  max-width: 1200px;
  margin: 0 auto;
}


/* -------------------------------
   見出し
-------------------------------- */

.work-point-heading {
  position: relative;
  text-align: center;
  margin-bottom: 80px;
}

.work-point-heading h2 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.work-point-bg {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;

  font-size: 110px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.03em;

  color: #eeeeee;
  white-space: nowrap;
}


/* -------------------------------
   カード一覧
-------------------------------- */

.work-point-list {
  display: flex;
  justify-content: center;
  gap: 28px;
}


/* -------------------------------
   カード
-------------------------------- */

.work-point-card {
  position: relative;

  width: calc((100% - 56px) / 3);
  min-height: 510px;

  padding: 42px 25px 65px;

  background: #DCE0E2;
  border-radius: 40px;

  text-align: center;
  text-decoration: none;
  color: #111;

  overflow: hidden;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


/* ホバー */
.work-point-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}


/* -------------------------------
   POINT 01など
-------------------------------- */

.work-point-number {
  display: flex;
  flex-direction: column;
  align-items: center;

  position: relative;
  z-index: 2;
}

.work-point-number span {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.work-point-number strong {
  margin-top: 2px;

  font-size: 58px;
  font-weight: 700;
  line-height: 1;

  color: #74848B;
}


/* -------------------------------
   イラスト
-------------------------------- */

.work-point-image {
  width: 190px;
  height: 190px;

  margin: 15px auto 20px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.work-point-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}


/* -------------------------------
   カードタイトル
-------------------------------- */

.work-point-card h3 {
  margin: 25px 0 0;

  font-size: 30px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
}


/* -------------------------------
   矢印ボタン
-------------------------------- */

.work-point-arrow {
  position: absolute;
  right: 25px;
  bottom: 20px;

  width: 58px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #fff;
  border-radius: 50%;

  font-size: 28px;
  font-weight: 400;

  line-height: 1;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.work-point-arrow:hover {
    background: #74848B;
    color: #fff;
    transform: translateX(4px);
}
.work-point-card h3 span{
    color:#74848B;
    font-weight: 800;
}
/* =================================
   WORK POINT
   レスポンシブ
================================= */

@media screen and (max-width: 768px){

    /* セクション */
    .work-point{
        padding:70px 15px 50px;
    }


    /* 内側 */
    .work-point-inner{
        width:100%;
        max-width:none;
    }


    /* =================================
       見出し
    ================================= */

    .work-point-heading{
        margin-bottom:55px;
        text-align:center;
    }

    .work-point-heading h2{
        font-size:24px;
        line-height:1.5;
        letter-spacing:0.04em;
    }

    .work-point-bg{
        top:-22px;

        font-size:65px;
        letter-spacing:0.02em;
    }


    /* =================================
       カード一覧
    ================================= */

    .work-point-list{
        display:flex;
        flex-direction:column;
        align-items:center;

        gap:28px;

        width:100%;
    }


    /* =================================
       カード
    ================================= */

    .work-point-card{
        width:92%;
        min-height:0;

        height:300px;

        padding:28px 20px 55px;

        border-radius:28px;
    }


    /* =================================
       POINT 01
    ================================= */

    .work-point-number{
        align-items:flex-start;

        position:absolute;
        top:28px;
        left:45px;
    }

    .work-point-number span{
        font-size:20px;
        line-height:1.2;
    }

    .work-point-number strong{
        margin-top:3px;

        font-size:46px;
        line-height:1;
    }


    /* =================================
       イラスト
    ================================= */

    .work-point-image{
        width:170px;
        height:170px;

        margin:40px auto 5px;
    }


    .work-point-image img{
        width:100%;
        height:100%;
        object-fit:contain;
    }


    /* =================================
       カードタイトル
    ================================= */

    .work-point-card h3{
        margin:5px 0 0;

        font-size:22px;
        line-height:1.4;
        letter-spacing:0.02em;

        text-align:center;
    }


    /* =================================
       矢印
    ================================= */

    .work-point-arrow{
        right:22px;
        bottom:18px;

        width:55px;
        height:55px;

        font-size:26px;
    }

}



/* =================================
   作業風景スクロール
================================= */

.work-gallery {
  width: 100%;
  overflow: hidden;
  background: #fff;
}

.work-gallery-track {
  display: flex;
  width: max-content;

  animation: work-gallery-scroll 30s linear infinite;
}

.work-gallery-item {
  width: 25vw;
  height: 300px;
  flex-shrink: 0;
}

.work-gallery-item img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =================================
   無限スクロール
================================= */

@keyframes work-gallery-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}
/* =================================
   スマホ
================================= */

@media screen and (max-width:768px){

    .work-gallery {
        width: 100%;
    }

    .work-gallery-track {
        animation-duration: 25s;
    }

    .work-gallery-item {
        width: 50vw;
        height: 180px;
    }

}
/* =================================
   無限スクロール
================================= */

@keyframes work-gallery-scroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}
/* セクション外枠 */
.partner-recruitment-section {
  position: relative;
  width: 100%;
  margin-top: 260px;
  padding: 0 15px;
  box-sizing: border-box;
}

/* 全体コンテナ */
.partner-recruitment-section .partner-container {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}


/* -----------------------------------
   2. 黒カード（右側・高さ調整エリア）
----------------------------------- */
.partner-recruitment-section .card-black {
  position: absolute;
  top: -140px;      /* ★上への飛び出し量（お好みで調整） */
  right: -150px;
  width: 50%;      /* 横幅（100% - 62% = 38%） */
  height: 620px;   /* ★黒カードの高さ（グレーより高く設定） */
  background-color: #1a1e22;
  z-index: 1;      /* 背景側 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
/* グレー背景 */
.partner-recruitment-section .card-gray {
  position: relative;
  width: 80%;
  min-height: 480px;
  margin-left: -130px;
  background-color: #e0e0e0;
  z-index: 2;
  box-sizing: border-box;
}

/* クレーン */
.partner-recruitment-section .crane-img {
  position: absolute;
  top: -220px;
  left: -160px;
  width: 370px;
  height: auto;
  z-index: 10;
  filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3));
  pointer-events: none;
}

/* 写真 */
.partner-recruitment-section .site-img {
  position: absolute;
  top: -120px;
  right: 80px;
  width: 55%;
  height: 330px;
  object-fit: cover;
  z-index: 3;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* 英字 */
.partner-recruitment-section .en-title {
  position: absolute;
  top: 90px;
  left: 125px;
  font-family: 'Times New Roman', Times, serif;
  font-size: 26px;
  font-weight: bold;
  color: rgba(255,255,255,0.9);
  transform: rotate(-7deg);
  letter-spacing: 2px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
  z-index: 12;
  white-space: nowrap;
}

/* 見出し */
.partner-recruitment-section .heading-banner {
  position: absolute;
  top: 100px;
  left: 195px;
  width: 440px;
  background-color: #74848B;
  color: #ffffff;
  padding: 22px 0;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  z-index: 10;
}


.partner-recruitment-section .heading-banner h2 {
  margin: 0;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 4px;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* 説明文エリア */
.partner-recruitment-section .description-content {
  padding-top: 250px;
  padding-left: 310px;
  padding-right: 30px;
  padding-bottom: 40px;
  color: #111111;
}

.partner-recruitment-section .description-content p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 600;
  text-align: justify;
}
/* ==========================
   SP：協力会社募集
========================== */
@media screen and (max-width: 768px) {

  /* セクション外枠 */
  .partner-recruitment-section {
    margin-top: 40px;
    padding: 0;
    overflow: hidden;
  }

  /* 全体コンテナ */
  .partner-recruitment-section .partner-container {
    width: 100%;
    max-width: none;
    height: 760px;
    margin: 0;
  }


  /* ==========================
     黒カード
  ========================== */
  .partner-recruitment-section .card-black {
    top: -10px;
    right: -8%;
    width: 65%;
    height: 400px;
    box-shadow: none;
  }


  /* ==========================
     グレー背景
  ========================== */
  .partner-recruitment-section .card-gray {
    position: absolute;
    top: 140px;
    left: 0;
    width: 100%;
    min-height: 620px;
    margin-left: 0;
    background-color: #e0e0e0;
    
  }


  /* ==========================
     現場写真
  ========================== */
  .partner-recruitment-section .site-img {
    top: 90px;
    right: 6%;
    width: 78%;
    height: 260px;
    object-fit: cover;
    box-shadow: none;
  }


  /* ==========================
     クレーン
  ========================== */
  .partner-recruitment-section .crane-img { 
        position: absolute;
        top: 10px; 
        left: -22%; 
        width: 65%; 
        height: auto;

        z-index: 100;

        filter: drop-shadow(3px 3px 6px rgba(0,0,0,0.2)); 
        pointer-events: none;
        
    }


  /* ==========================
     英字タイトル
  ========================== */
  .partner-recruitment-section .en-title {
    top: 330px;
    left: 9%;
    font-size: 18px;
    letter-spacing: 1.5px;
    transform: rotate(-7deg);
    z-index: 12;
  }


  /* ==========================
     見出し
  ========================== */
  .partner-recruitment-section .heading-banner {
    top: 330px;
    left: 28%;
    width: 62%;
    padding: 18px 10px;
    box-sizing: border-box;
    box-shadow: none;
    z-index: 10;
  }

  .partner-recruitment-section .heading-banner h2 {
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 1.4;
  }


  /* ==========================
     説明文
  ========================== */
  .partner-recruitment-section .description-content {
    position: absolute;
    top: 310px;
    left: 20%;
    width: 80%;
    padding: 0;
    color: #111111;
    box-sizing: border-box;
    z-index: 5;
    
  }

  .partner-recruitment-section .description-content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    font-weight: 600;
    text-align: left;
  }

  

}

/* ==========================================
   トップページ 会社概要ブロック
========================================== */

.top-company-intro {
    position: relative;
    width: 100%;
    padding: 0px 0 0;
    overflow: hidden;
    background: #ffffff;
}


/* 全体 */
.top-company-inner {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 720px;
}


/* ==========================================
   左：現場写真
========================================== */

.top-company-photo {
    position: relative;
    width: 40%;
    height: 720px;
    z-index: 2;
    overflow: hidden;
}

.top-company-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ==========================================
   右：会社概要コンテンツ
========================================== */

.top-company-content {
    position: relative;
    width: 60%;
    min-height: 720px;
    padding: 170px 150px 180px 150px;
    box-sizing: border-box;
    background: #ffffff;
    z-index: 3;
}


/* ==========================================
   キャッチコピー
========================================== */

.top-company-catch {
    position: relative;
    margin: 0 0 40px;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 2px;
    color: #111111;
    white-space: nowrap;
    transform: translate(-90px, -30px);
}

/* 「安全と品質で、」の背景 */
.top-company-catch span {
    position: relative;
    display: inline-block;
    padding: 4px 12px;
    margin-right: 5px;
    background: #DCE0E2;
}


/* ==========================================
   説明文
========================================== */

.top-company-text {
    position: relative;
    max-width: 700px;
    margin: 0 0 65px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.5px;
    color: #222222;
}


/* ==========================================
   会社概要ボタン
========================================== */

.top-company-button {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 245px;
    height: 58px;

    padding: 0 22px;

    box-sizing: border-box;

    background: #263338;
    color: #ffffff;

    border-radius: 30px;

    text-decoration: none;

    font-size: 18px;
    font-weight: 700;

    transition: 
        transform 0.3s ease,
        box-shadow 0.3s ease;
    
    transform: translate(95px, -40px);
}

.top-company-button:hover { 
    transform: translate(95px, -44px); 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); 
}


/* 矢印 */
.top-company-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    font-size: 18px;
}


/* ==========================================
   右端の縦英字
========================================== */

.top-company-vertical{
    position:absolute;

    top:45px;
    right:35px;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:30px;

    font-family:"Times New Roman", serif;

    font-size:58px;
    font-weight:700;

    letter-spacing:10px;

    color:rgba(80,80,80,0.08);

    z-index:1;
}

.top-company-vertical span{
    writing-mode:vertical-rl;
}


/* ==========================================
   海・波のイラスト
========================================== */

.top-company-wave {
    position: absolute;

    left: 0;
    bottom: -40px;

    width: 100%;
    height: 270px;

    z-index: 10;

    pointer-events: none;
    overflow: hidden;
}


.top-company-wave-track {
    display: flex;

    width: max-content;
    height: 100%;

    animation: wave-scroll 20s linear infinite;
}


.top-company-wave img {
    display: block;

    width: 100vw;
    height: 100%;

    object-fit: cover;
    object-position: center bottom;

    flex-shrink: 0;
}


@keyframes wave-scroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100vw);
    }

}
/* ==========================================
   TOP COMPANY INTRO
   スマホレスポンシブ
========================================== */

@media screen and (max-width:768px){

    /* ------------------------------------------
       全体
    ------------------------------------------ */

    .top-company-intro{
        width:100%;
        padding:0;
        overflow:hidden;
    }


    .top-company-inner{
        display:flex;
        flex-direction:column;

        width:100%;
        min-height:0;

        position:relative;
    }


    /* ------------------------------------------
       左：現場写真
    ------------------------------------------ */

    .top-company-photo{
        width:100%;
        height:430px;

        position:relative;
        z-index:2;

        overflow:hidden;
    }

    .top-company-photo img{
        width:100%;
        height:100%;

        object-fit:cover;
        object-position:center;
    }


    /* ------------------------------------------
       右：会社概要
    ------------------------------------------ */

    .top-company-content{
        width:100%;
        min-height:0;

        padding:65px 35px 280px;

        box-sizing:border-box;

        background:#fff;

        position:relative;
        z-index:3;
    }


    /* ------------------------------------------
       縦英字
    ------------------------------------------ */

    .top-company-vertical{
        top:40px;
        right:15px;

        font-size:40px;
        letter-spacing:6px;

        color:rgba(80,80,80,0.07);
    }


    /* ------------------------------------------
       キャッチコピー
    ------------------------------------------ */

    .top-company-catch{
        position:relative;

        margin:0 0 35px;

        font-size:28px;
        line-height:1.55;
        letter-spacing:1px;

        white-space:normal;

        transform:none;

        z-index:2;
    }


    /* 「安全と品質」 */

    .top-company-catch span{
        padding:3px 8px;
        margin-right:2px;
    }


    /* ------------------------------------------
       説明文
    ------------------------------------------ */

    .top-company-text{
        width:100%;
        max-width:none;

        margin:0 0 45px;

        font-size:14px;
        font-weight:600;

        line-height:1.9;
        letter-spacing:.3px;

        color:#222;
        text-align: center;
        position:relative;
        z-index:2;
    }


    /* ------------------------------------------
       会社概要ボタン
    ------------------------------------------ */

    .top-company-button{
        width:220px;
        height:55px;

        margin:0 auto;

        padding:0 18px;

        font-size:16px;

        border-radius:30px;

        transform:none;

        position:relative;
        z-index:3;
    }


    .top-company-button:hover{
        transform:none;
    }


    /* ------------------------------------------
       矢印
    ------------------------------------------ */

    .top-company-arrow{
        width:36px;
        height:36px;

        font-size:16px;
    }


    /* ------------------------------------------
       波
    ------------------------------------------ */

    .top-company-wave{
        left:0;
        bottom:15px;

        width:100%;
        height:230px;

        z-index:10;

        overflow:hidden;
    }


    .top-company-wave-track{
        height:100%;
    }


    .top-company-wave img{
        width:100vw;
        height:100%;

        object-fit:cover;
        object-position:center bottom;

        flex-shrink:0;
    }

}





.loading {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #263338;

    z-index: 9999;
}


.loading-inner {
    text-align: center;
}


.loading-inner img {
    display: block;

    width: 180px;
    height: auto;

    margin: 0 auto 30px;
}


/* ローディングバー */

.loading-bar {
    width: 220px;
    height: 2px;

    margin: 0 auto;

    background: rgba(255,255,255,0.2);

    overflow: hidden;
}


.loading-bar span {
    display: block;

    width: 0;
    height: 100%;

    background: #ffffff;

    animation: loading-bar 2s ease forwards;
}


.loading-percent {
    margin: 12px 0 0;

    color: rgba(255,255,255,0.7);

    font-size: 11px;
    letter-spacing: 3px;
}


@keyframes loading-bar {

    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }

}
.loading {
    transition: opacity 0.8s ease;
}

.loading.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
@media screen and (max-width: 768px) {

    .loading-inner {
        width: 100%;
        padding: 0 30px;
        box-sizing: border-box;
    }

    .loading-inner img {
        width: 150px;
        margin-bottom: 25px;
    }

    .loading-bar {
        width: 180px;
        height: 2px;
    }

    .loading-percent {
        margin-top: 10px;
        font-size: 10px;
        letter-spacing: 2.5px;
    }

}
.instagram-fixed {
    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 60px;
    height: 60px;

    display: block;

    z-index: 9998;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.instagram-fixed img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.instagram-fixed:hover {
    transform: translateY(-5px);
    opacity: 0.8;
}
@media screen and (max-width:768px){

    .sub-fv{
        display:none;
    }

}