@charset "utf-8";

/* ============================================
   Base Setting (Rem基準)
   ============================================ */
html {
    /* これが基準サイズ(1rem)になります */
    /* ここを変更すると全体の文字サイズが連動して変わります */
    font-size: 16px; 
}

/* ============================================
   Color & Font Variables
   ============================================ */
:root {
    --main-blue: #00137F; /* ロゴや文字の濃い青 */
    --bg-blue: #E6F2FF;   /* 背景の薄い水色 */
    --font-en: 'Oswald', sans-serif;
    --font-jp: 'Shippori Mincho', serif;
}
*{
    box-sizing: border-box
}
body,h1,h2,h3,h4,h5,p,ul,form,main,footer{
    margin: 0;
    padding: 0;
    list-style: none
}
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
    letter-spacing: 1px;
    /* font-size指定がない場合、デフォルトは1rem(16px)になります */
}
a{
    text-decoration: none;
    color: #000;
}
img {
    max-width: 100%;
    height: auto;
}
main, footer {
    position: relative;
    z-index: 2;
}

/* ============================================
   Header Design
   ============================================ */
header, .header, #header {
    height: 90px; 
    padding: 0 2%;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    display: flex;
    justify-content: space-between;
    align-items: center; 
    position: fixed;
    transition: transform 0.3s ease;
    background-color: rgba(255,255,255,0.89)
}
/* 隠すためのクラス */
.is-hidden {
    transform: translateY(-100%);
}
.logo{
    width: 260px;
    display: block;
}
.logo img{
    width: 100%;
    height: auto
}
.header-nav {
    display: flex;
    align-items:center
}

.gnav {
    display: flex;
    gap: 25px;
    margin-right: 40px;
}

.gnav li a {
    /* 16px -> 1rem */
    font-size: 1rem;
    font-weight: bold;
    color: #000;
    letter-spacing: 0.05em;
}

/* ヘッダーのお問合せボタン */
header .btn-contact {
    background-color: var(--main-blue);
    width: 150px;
    height: 60px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 17px -> 1.0625rem */
    font-size: 1.0625rem;
    border-radius: 6px;
    transition: 0.7s;
}

header .btn-contact:hover {
    color: var(--main-blue);
    background: #FFF;
    border: 1px solid var(--main-blue);
}
.menu{
    display: none
}



/* ============================================
   スマホメニュー（ドロワー）用スタイル
   ============================================ */
/* ----------------------------------
   ハンバーガーボタン
   ---------------------------------- */
.menu {
    display: none; /* PCでは非表示 */
    position: fixed;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: transparent;
    border: none;
    z-index: 10000;
    cursor: pointer;
}

/* スマホサイズでのみボタンを表示 */
@media screen and (max-width: 1000px) {
    .menu {
        display: block;
    }
    .header-nav{
        display: none   
    }
}

.menu span {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #00137F;
    position: absolute;
    left: 10px;
    transition: all 0.3s;
}
.menu span:nth-child(1) { top: 15px; }
.menu span:nth-child(2) { bottom: 15px; }

/* 開いた時のボタンの変化 */
.menu.is-active span:nth-child(1) {
    top: 24px;
    transform: rotate(45deg);
    background-color: #333;
}
.menu.is-active span:nth-child(2) {
    bottom: 24px;
    transform: rotate(-45deg);
    background-color: #333;
}

/* ----------------------------------
   ドロワーメニュー本体（修正箇所）
   ---------------------------------- */
/* まずPCでは完全に非表示にする */
.drawer-menu {
    display: none;
}

/* スマホサイズ（768px以下）の設定 */
@media screen and (max-width:1000px) {
    .drawer-menu {
        /* ★ここが重要！スマホではdisplay: noneを解除してblockにする */
        display: block;
        
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        background-color: #fff;
        z-index: 9999;
        padding: 80px 20px;
        
        /* 画面の右側（100%）に移動させて隠しておく */
        transform: translateX(100%); 
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        
        overflow-y: auto;
        text-align: center;
    }

    /* クラスがついたら画面内（0%）に戻す */
    .drawer-menu.is-active {
        transform: translateX(0);
    }
}

/* 閉じるボタン */
.btn-drawer-close {
    position: absolute;
    top: 20px;
    right: 20px;
    /* 40px -> 2.5rem */
    font-size: 2.5rem;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
    padding: 10px;
}

/* SP用ナビゲーション */
.gnav-sp {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}
.gnav-sp li {
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.gnav-sp li a {
    /* 16px -> 1rem */
    font-size: 1rem;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    display: block;
    padding: 15px 0;
}

/* お問い合わせボタン */
.drawer-menu .btn-contact {
    display: inline-block;
    background-color: #00137F;
    color: #fff;
    padding: 15px 60px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
}


/* ============================================
   Hero Section
   ============================================ */
.hero {
    position: fixed;
    top:0;
    left: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-blue);
    overflow: hidden;
    background: #00137F;
    z-index: 0;
}

.hero-swiper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-swiper .swiper-slide {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center;
    transform: scale(1);
    transition: transform 8s linear;
}

.hero-swiper .swiper-slide-active img {
    transform: scale(1.15);
}

.hero-content {
    position: absolute;
    bottom: 14vw;
    left: 5%;
    z-index: 2;
    width: 80%;
}
.hero-content img {
    max-width: 100%;
}

/* ============================================
   Footer Design
   ============================================ */
footer {
    background: #fff;
    border-top: 1px solid #ddd;
    padding: 80px 5% 40px;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    gap: 20px;
}

.footer-left {
    flex: 1;
    min-width: 300px;
}

.footer-logo img {
    width: 200px;
    margin-bottom: 20px;
}

.company-info {
    /* 14px -> 0.875rem */
    font-size: 0.875rem;
    line-height: 1.8;
    margin-bottom: 40px;
    font-style: normal;
}

.company-info .name {
    font-weight: bold;
    margin-bottom: 10px;
}

address {
    font-style: normal;
}

.copyright {
    display: block;
    /* 12px -> 0.75rem */
    font-size: 0.75rem;
    color: #888;
    margin-top: auto;
}

.footer-right {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}


.footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 40px;
    margin-bottom: 40px;
    text-align: left;
}

.footer-links li a {
    color: var(--main-blue);
    font-weight: bold;
    /* 14px -> 0.875rem */
    font-size: 0.875rem;
}

.footer-buttons {
    display: flex;
    gap: 20px;
}

.btn-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 50px;
    /* 14px -> 0.875rem */
    font-size: 0.875rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    transition: 0.3s;
}

.btn-entry {
    background-color: #DCEEFF;
    color: var(--main-blue);
}
.btn-entry:hover {
    background-color: #cce5ff;
}

.btn-contact-f {
    background-color: #fff;
    border: 1px solid var(--main-blue);
    color: var(--main-blue);
}
.btn-contact-f:hover {
    background-color: var(--main-blue);
    color: #fff;
}

/* ============================================
   Main Sections (Introduction)
   ============================================ */
.introduction{
    display: flex;
    margin-top: 100vh; 
    position: relative;
    z-index: 2; 
    background-color: rgba(0,11,99,0.84); 
    padding: 10% 0% 100px 5%;
    color: #FFF;
}
.introduction .item1{

    width: 45%;
}
.introduction .item2{
    width: 55%;
    position: relative;


}
.i-img{
    width: 90%;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
}
.copy{
    width: 100%;
    height: auto;
    position: absolute;
    top: 45%;
    right: 10%;
    z-index: 2
}
.introduction-logo{
    width: 300px;
    margin-bottom: 50px;
}

.introduction-title{
    /* 42px -> 2.625rem */
    font-size: 2.625rem;
    margin-bottom: 30px
}
.introduction-text{
    /* 18px -> 1.125rem */
    font-size: 1.125rem;
    line-height: 2;
    margin-bottom: 30px;
}

/* アニメーション系 */
.introduction .item1 > *,
.introduction .item2 {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}
.introduction .item2 {
    transition-delay: 0.5s;
}
.introduction .is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ============================================
   Recruit Section
   ============================================ */
.home-recruit{
    position:relative;
    overflow:hidden;
    padding:120px 20px;
    color:#fff;
}

.home-recruit::before{
    content:"";
    position:absolute;
    inset:-50%;
    background:linear-gradient(
        120deg,
        #4f46e5,
        #ec4899,
        #22c55e,
        #f59e0b,
        #4f46e5
    );
    background-size:300% 300%;
    animation:heroGrad 12s ease-in-out infinite;
    filter:blur(6px);
    z-index:-1;
}

.home-recruit-inner{
    max-width:960px;
    margin:0 auto;
    text-align:left;
}

.home-recruit h1{
    /* clampはremを含んでいるため維持 */
    font-size: clamp(2.4rem, 4vw, 4.6rem);
    line-height:1.4;
    margin-bottom:16px;
}

.home-recruit p{
    /* 1.4rem (すでにrem指定) */
    font-size:1.4rem;
    margin-bottom:24px;
}

.home-recruit-btn{
    display:inline-block;
    padding:14px 32px;
    border-radius:999px;
    background:#111827;
    color:#fff;
    font-weight:700;
    text-decoration:none;
}
.doda{
	display: block;
	width: 720px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 99999
}
.doda img{
	width: 100%;
	height: auto
}
@keyframes heroGrad{
    0%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
}

/* ============================================
   Box1 (Business)
   ============================================ */
.box1{
    display: flex;
    background: #FFF;
    position: relative;
    z-index: 2;
    padding: 50px 0
}
.box1 .item1{
    width: 45%;
    overflow: hidden
}
.box1 .item2{
    width: 55%;
    align-items: center;
    flex-wrap: wrap;
    display: flex;
    padding-left: 5%;
    padding-right: 5%; /* 右側にも余白追加 */
}

.box1 .title_en{
    /* 70px -> 4.375rem */
    font-size: 4.375rem;
    margin-bottom: 10px;
    width: 100%;
    font-weight: bold;
    text-align: left;
    font-style: italic;
    letter-spacing: 2px;
    color:var(--main-blue);

}
.box1 h2{
    /* 18px -> 1.125rem */
    font-size: 1.125rem;
    margin-bottom: 25px;
    width: 100%;
    font-weight: bold;
    color:var(--main-blue);
}
.box1 p{
    /* width: 600px;  レスポンシブ対応のため固定幅は削除 */
    width: 100%;
    line-height: 1.8;
    /* 16px -> 1rem */
    font-size: 1.1rem;
    margin-bottom: 30px;
    text-align: justify
}

.swiper2 .swiper-slide {
    width: 50%;
}
.swiper2 .swiper-slide img {
    width: 100%;
    border-radius: 10px;
}
.entry-btn{
    width: 260px;
    height: 60px;
    background: #fff;
    border: 2px solid #00137F;
    color: #00137F;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 17px -> 1.0625rem */
    font-size: 1.0625rem;
    font-weight: bold;
    border-radius: 100px;
}
    .pc{ display: block; }

    .sp{ display: none; }

/* ============================================
   ★ Responsive (Tablet)
   ============================================ */
@media (max-width: 1377px) {

    .tb-none{ display: none; }
.introduction-title{
    /* 36px -> 2.25rem */
    font-size: 2.25rem;
    margin-bottom: 20px
}
.introduction-text{
    /* 17px -> 1.0625rem */
    font-size: 1.0625rem;
    line-height: 2;
    margin-bottom: 30px;
}
.doda{
	display: block;
	width: 95%;
	position: fixed;
	bottom: 10px;
	right: 2.5%;
	z-index: 99999
}
}
/* ============================================
   ★ Responsive (SP)
   ============================================ */
@media (max-width: 768px) {
    
    .pc{ display: none }
    .sp{ display: block;}
    
    /* Header */
    header, .header, #header {
        height: 80px;
        padding: 0 4%  0 4%;
    }
    .logo {
        width: auto;
        height: 57px;

    }
    .logo img{
        width: auto;
        height: 100%
    }
    .gnav {
        display: none;
    }
    header .btn-contact {
        display: none
    }
    .entry-btn{
        margin: 0 auto  
    }
    .hero-content {
    position: absolute;
    bottom: 29vw;
    left: 5%;
    z-index: 2;
    width: 80%;
}
    /* Introduction */
    .introduction {
        flex-direction: column; /* 縦並び */
        padding: 80px 5%;
        margin-top: 100vh;
    }
    .introduction .item1,
    .introduction .item2 {
        width: 100%;
    }
.introduction-logo{
    width: 60%;
    margin: 0 auto 40px auto;
}
    .introduction-title {
        /* 24px -> 1.5rem */
        font-size: 1.5rem;
        margin-bottom: 15px
    }
    .introduction-text {
        /* 15px -> 0.9375rem */
        font-size: 0.9375rem;
        margin-bottom: 10px
    }
    .introduction .item2 {
        margin-top: 40px;
    }
    /* 地図画像のアニメーション調整 */
    .introduction .item2 img {
        position: relative;
        bottom: auto;
        left: auto;
    }

    /* Box1 */
    .box1 {
        flex-direction: column-reverse;
        padding: 40px 0;
    }
    .box1 .item1,
    .box1 .item2 {
        width: 100%;
    }
    .box1 .item2 {
        padding: 0 5% 40px;
    }
    .box1 .title_en {
        /* 40px -> 2.5rem */
        font-size: 2.5rem;
    }
    .box1 h2 {
        /* 16px -> 1rem */
        font-size: 1rem;
    }
    .box1 .item1 {
        padding-left: 20px;
    }
.home-recruit h1{
    line-height:1.4;
    margin-bottom:16px;
    text-align: center
}

.home-recruit p{
    text-align: center
}

.home-recruit-btn{
    display:block;
    padding:14px 32px;
    margin: 0 auto;
}
    /* Footer */
    .footer-inner {
        flex-direction: column;

        position: relative;
        padding-bottom: 140px;       
    }
    .footer-right {
        align-items: flex-start;
        width: 100%;

    }
    .footer-buttons {
        width: 100%;
        flex-direction: column;
        gap:6px;
    }
    .btn-footer {
        width: 100%;
    }
    .footer-links {
        grid-template-columns: 1fr; /* 1列に */
        width: 100%;
        gap:0;
    }
    .footer-links li{
        border-bottom: 1px solid #eee;
        padding: 15px 0;
        margin: 0;
        width: 100%
    }
    .company-info {
        margin: 0   
    }
    /* ★追加：スマホの時だけcopyrightを絶対配置で一番下へ */
    .copyright {
        position: absolute;
		height: 100px;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-top: 0;
    }
}