@charset "UTF-8";

/* =========================================
 * ABOUT (aboutページ専用)
 * =========================================
 */

/* Main Container Adjustments */
.about-main {
    padding-bottom: 120px;
}

/* PC画面 (1025px以上) における Aboutページのコンテナ幅調整 */
@media (min-width: 1025px) {
    .about-main .container {
        max-width: 1200px;
        padding: 0 15px; /* 左右の余白を少し低く設定 */
    }

    /* 追加: PC画面ではヒーロータイトルの改行を無効化（1行にする） */
    .about-hero-title br {
        display: none;
    }
}

/* Breadcrumb */
.breadcrumb {
    font-size: 0.75rem; /* 12px */
    color: #999;
    margin-top: 30px;
    margin-bottom: 60px;
    font-family: var(--font-eng);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.breadcrumb a {
    color: #999;
}

/* Hero Title */
.about-hero-title {
    font-family: var(--font-main); /* 参考サイトに合わせるならサンセリフ系 */
    font-size: 3.5rem; /* 56px - 大きな見出し */
    line-height: 1.2;
    font-weight: 500;
    margin-top: 120px; /* ★ 追加: ヘッダーとの間隔を調整 */
    margin-bottom: 100px; /* 余白を大きく */
    color: var(--text-color);
    letter-spacing: 0.02em;
    
    /* 文字がないときでも高さを維持する (レイアウトシフト防止) */
    min-height: 1.2em; 
}

/* 修正: Good Feel の装飾をシンプルに「赤文字」に変更 */
.good-feel {
    color: #cc3300; /* 赤色 */
    font-weight: 500;
    /* 背景色やパディングは削除してシンプルに */
}

/* タイピングカーソル */
.typing-cursor {
    display: inline-block;
    width: 2px; /* 少し細めに */
    height: 1em;
    background-color: var(--text-color);
    margin-left: 4px;
    vertical-align: middle;
    animation: blink 1s step-end infinite;
}

/* カーソルの点滅アニメーション */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}


/* Section Common */
.about-section {
    margin-bottom: 180px; /* セクション間の余白を少し広げました */
}

/* Grid Layout */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 左右等分 */
    gap: 60px; /* カラム間の余白 */
    align-items: center; /* 修正: flex-startからcenterに戻し、垂直方向中央揃えにする */
}

/* Reverse Layout (テキスト左、画像右) */
/* Gridの配置順序を制御 */
.about-grid.reverse .about-img-col {
    order: 2;
}
.about-grid.reverse .about-text-col {
    order: 1;
}

/* Image Column */
.about-img-col img {
    width: 100%;
    height: auto;
    object-fit: cover;
    /* 参考サイトのような少し縦長の比率が必要ならここで調整 */
}

/* Text Column Styles */
.about-text-col {
    padding-top: 20px; /* 修正: 250pxの余白を削除し、元の値に戻す */
}

/* Profile Specific */
.job-title {
    font-size: 0.8rem;
    font-family: var(--font-eng);
    margin-bottom: 15px;
    letter-spacing: 0.05em;
    color: var(--text-color);
}
.profile-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 40px;
    letter-spacing: 0.1em;
    /* 追加: 名前とアイコンを横並びに */
    display: flex;
    align-items: center;
    gap: 15px;
}
.profile-insta-link {
    display: inline-flex;
    color: var(--text-color);
    transition: opacity 0.3s;
    line-height: 1;
}
.profile-insta-link:hover {
    opacity: 0.6;
}
.profile-insta-link svg {
    width: 24px; /* アイコンサイズ */
    height: 24px;
}

.profile-bio p {
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 2;
    color: #333;
}

/* Concept Specific */
.concept-title {
    font-size: 1.25rem;
    line-height: 1.8;
    margin-bottom: 40px;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.concept-body p {
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    line-height: 2;
    color: #333;
}

/* =========================================
 * STRONG POINT Section (Features)
 * =========================================
 */
.strong-point-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 40px;
}

.point-item {
    /* 装飾: カード風のデザインを追加 */
    border: 1px solid #e0e0e0;
    padding: 40px 30px;
    transition: transform 0.3s, box-shadow 0.3s;
    background-color: #fff;
    /* 高さを揃えるため */
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ホバー時に少し浮く + 影をつける */
.point-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-color: var(--text-color);
}

.point-head {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央揃えに変更 */
    margin-bottom: 25px;
    text-align: center;
}

/* 追加: SVGアイコン用のスタイル */
.point-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    color: var(--text-color);
    /* 線の太さや色はSVG側で継承させる */
}
.point-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.point-title {
    font-family: var(--font-main); /* 日本語フォント(Noto Sans JPなど)に変更 */
    font-size: 1.2rem; /* 少し大きく */
    letter-spacing: 0.05em;
    font-weight: 700; /* 太文字に変更 */
    color: var(--text-color);
    margin-bottom: 0;
}

.point-desc {
    font-size: 0.9rem;
    line-height: 2;
    color: var(--sub-text-color);
    text-align: justify; /* 両端揃え */
    margin-top: auto; /* 下揃え対策（念のため） */
}

/* =========================================
 * WORK Section (List Style)
 * =========================================
 */
.work-list-container {
    margin-top: 60px;
    border-top: 1px solid #e0e0e0;
}

.work-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 修正: flex-startからcenterに変更して垂直中央揃えに */
    padding: 50px 0;
    border-bottom: 1px solid #e0e0e0;
}

.work-list-content {
    width: 70%;
}

.work-list-title {
    /* 修正: フォントサイズを大きくして視認性向上 */
    font-size: 1.5rem; 
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: baseline; /* ベースラインで揃える */
    flex-wrap: wrap;
    gap: 15px;
}

.work-list-subtitle {
    font-family: var(--font-eng);
    font-size: 0.8rem;
    color: #999;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.work-list-desc {
    font-size: 0.9rem;
    line-height: 2;
    color: var(--sub-text-color);
}

.work-list-num {
    font-family: var(--font-eng);
    font-size: 6rem; /* 修正: 4remから6remにサイズアップ */
    font-weight: 700;
    line-height: 1;
    color: var(--text-color);
    opacity: 1;
    letter-spacing: 0;
}


/* =========================================
 * JOB OFFER Section
 * =========================================
 */
.job-offer-section {
    margin-bottom: 0; /* 最後のセクションなので */
}

.job-offer-box {
    background-color: #f5f0eb; /* 薄いベージュ系 */
    padding: 60px;
}

.job-offer-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* 画像小さめ、テキスト広め */
    gap: 50px;
    align-items: center;
}

.job-offer-text h3 {
    font-family: var(--font-eng);
    font-size: 1.2rem;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    font-weight: 500;
}
.job-offer-text p {
    font-size: 0.9rem;
    margin-bottom: 30px;
    line-height: 1.8;
}

.email-btn {
    display: inline-flex;
    align-items: center;
    background-color: #fff;
    padding: 12px 30px;
    color: var(--text-color);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    font-family: var(--font-eng);
    border: 1px solid transparent;
    transition: all 0.3s;
}
.email-btn:hover {
    border-color: var(--text-color);
    opacity: 0.8;
}
.email-btn .icon {
    margin-right: 10px;
    font-size: 1.1rem;
}

/* =========================================
 * Responsive (Tablet & Mobile)
 * =========================================
 */
@media (max-width: 768px) {
    .about-hero-title {
        font-size: 2.2rem; /* スマホではサイズダウン */
        margin-top: 60px; /* ★ 追加: スマホでは少し狭めに */
        margin-bottom: 60px;
    }

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

    .about-grid {
        grid-template-columns: 1fr; /* 1カラムにする */
        gap: 30px;
    }

    .about-text-col {
        padding-top: 0;
    }

    /* Reverseも解除して自然な順序（画像が上、テキストが下など）にするか、
       参考サイトに合わせて制御する。
       通常は画像→テキストの順が見やすい */
    .about-grid.reverse .about-img-col {
        order: 1; /* 画像を上に */
    }
    .about-grid.reverse .about-text-col {
        order: 2; /* テキストを下に */
    }

    /* Strong Point Responsive */
    .strong-point-grid {
        grid-template-columns: 1fr; /* 1列にする */
        gap: 30px; /* 余白調整 */
    }
    
    .point-item {
        border-top: 1px solid #e0e0e0; /* スマホでもカード風に */
        border: 1px solid #e0e0e0; /* 全方位に枠線 */
        padding: 30px;
    }
    
    .point-head {
        /* スマホでは左揃えに戻すか、中央揃えのままにするか */
        /* カードデザインなら中央揃えが綺麗なので維持 */
        margin-bottom: 20px;
    }
    
    /* .point-num スタイル削除 */
    
    .point-title {
        font-size: 1.1rem;
    }

    /* Work List Responsive */
    .work-list-item {
        flex-direction: column-reverse; /* 数字を上に */
        align-items: flex-start; /* 修正: スマホでは左揃えに */
        padding: 30px 0;
        gap: 15px;
    }
    
    .work-list-content {
        width: 100%;
    }
    
    /* 追加: スマホ画面ではタイトルと英語表記を改行させる */
    .work-list-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        font-size: 1.3rem; /* スマホでは少し控えめにしつつ大きく */
    }

    .work-list-num {
        font-size: 3rem;
        align-self: flex-start; /* 左寄せ */
        color: #ddd; /* 少し薄くして背景っぽくしても良いが、一旦通常色 */
    }


    /* Job Offer */
    .job-offer-box {
        padding: 40px 24px;
    }
    .job-offer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}